/* =====================================================================
   DEKO: Papier, Aquarell, Washi-Tape, Notizblock, Schieflage.
   Alles hier ist "Kunst" – die App funktioniert auch ohne diese Datei.
   Schneller Weg zu einem schlichteren Look: in index.html die Zeile
   mit decor.css entfernen (oder einzelne Abschnitte unten löschen).
   ===================================================================== */

/* ---------- Papier-Hintergrund mit Aquarellflecken ---------- */
body {
  background-image:
    radial-gradient(70vmax 55vmax at -10% -5%, var(--wash-1), transparent 65%),
    radial-gradient(60vmax 50vmax at 110% 105%, var(--wash-2), transparent 65%),
    var(--texture-grain);
}

/* ---------- Kategorie-Töne ---------- */
[data-tone="1"] { --card-tone: var(--tone-1); }
[data-tone="2"] { --card-tone: var(--tone-2); }
[data-tone="3"] { --card-tone: var(--tone-3); }
[data-tone="4"] { --card-tone: var(--tone-4); }
[data-tone="5"] { --card-tone: var(--tone-5); }
[data-tone="6"] { --card-tone: var(--tone-6); }

/* ---------- Karten: getöntes Papier + Washi-Tape + leicht schief ---------- */
.card[data-tone] {
  background-color: color-mix(in srgb, var(--card-tone) var(--tone-strength), var(--color-surface));
  background-image: var(--texture-grain);
}
.card[data-tone]::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 26px;
  translate: -50% 0;
  rotate: -3deg;
  background:
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.28) 0 5px, transparent 5px 11px),
    color-mix(in srgb, var(--card-tone) 75%, transparent);
  border-radius: 2px;
  opacity: 0.9;
  /* ausgefranste Tape-Kanten */
  clip-path: polygon(0 8%, 4% 0, 96% 4%, 100% 0, 98% 50%, 100% 100%, 95% 94%, 4% 100%, 0 92%, 3% 50%);
}
.cards > .card:nth-child(3n+1) { rotate: calc(var(--tilt) * -1); }
.cards > .card:nth-child(3n+2) { rotate: var(--tilt); }
.cards > .card:nth-child(3n)   { rotate: calc(var(--tilt) * -0.4); }
.cards > .card:nth-child(3n+1)::before { left: 28%; rotate: -5deg; }
.cards > .card:nth-child(3n+2)::before { left: 70%; rotate: 4deg; }

/* ---------- Einkaufsliste: Notizblatt mit Linien und rotem Rand ---------- */
.card--note[data-tone] {
  background-color: var(--color-surface);
}
.card--note .check-list { position: relative; }
.card--note .check-list::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: 0;
  left: 40px;
  border-left: 1.5px solid var(--margin-color);
  pointer-events: none;
}

/* ---------- PC: Einkaufsliste rechts als Notizblock mit Lochung ---------- */
@media (min-width: 1100px) {
  body.is-split .view--split-aside {
    padding: var(--space-7) var(--space-5) var(--space-5);
    background-color: var(--color-surface);
    background-image: var(--texture-grain);
    border-radius: 6px 6px var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-card), 6px 6px 0 -1px color-mix(in srgb, var(--color-border) 70%, transparent);
    rotate: 0.4deg;
  }
  /* Spiralbindung oben */
  body.is-split .view--split-aside::before {
    content: "";
    position: absolute;
    top: 14px; left: 20px; right: 20px;
    height: 16px;
    background: radial-gradient(circle, var(--color-bg) 0 5px, var(--color-border) 5.5px 6.5px, transparent 7px) 0 0 / 26px 16px repeat-x;
  }
  /* Karten im Block: flach, nur durch Linien getrennt */
  body.is-split .view--split-aside .cards { columns: 1; }
  body.is-split .view--split-aside .card {
    rotate: none;
    box-shadow: none;
    padding: var(--space-4) 0 0;
    border-radius: 0;
    border-top: 1.5px dashed var(--color-border);
    background: transparent;
    margin-bottom: var(--space-3);
  }
  body.is-split .view--split-aside .card::before { display: none; }
  body.is-split .view--split-aside .card__emoji { width: 38px; height: 38px; font-size: 1.2rem; }
  body.is-split .view--split-aside .card__title { font-size: var(--font-size-lg); }
}

/* "Neue Kategorie" ohne Tape */
.card--new::before { display: none; }