/*
  Handlinien · 02.10.2026
  Die harten 1-px-Linien der Mappe (Rahmen, Trennlinien, Listenlinien) laufen
  jetzt leicht wellig, wie mit der Feder gezogen. Technik: Die ursprüngliche
  Linie bleibt als transparenter Platzhalter stehen (nichts verschiebt sich),
  die sichtbare Linie ist ein Pseudo-Element mit SVG-Verschiebungsfilter.
  Die Filter #hb1-3 (Rahmen) und #hh1-3 (waagrechte Linien) stehen inline in
  index.html. Zurück zur geraden Linie: <link> auf diese Datei entfernen.
*/

/* ---------- Rahmen ---------- */
.blatt, .jetzt, .zettel, .kachel, button.kachel, .tour,
.indexkarte:not(.indexkarte--dunkel), .gegenueber { position: relative; }
.blatt { --hl: rgba(42,31,24,.42); }
.jetzt, .zettel, .gegenueber { --hl: rgba(42,31,24,.55); }
.kachel, .tour, .indexkarte { --hl: rgba(42,31,24,.42); }
.kachel:hover, .tour:hover { --hl: rgba(42,31,24,.6); }
.kachel--warnung { --hl: rgba(122,43,31,.55); }
.jetzt[data-zustand="warnung"] { --hl: var(--siegelwachs); }

.blatt, .jetzt, .jetzt[data-zustand="warnung"], .zettel, .kachel, button.kachel,
.kachel:hover, .kachel--warnung, .tour, .tour:hover,
.indexkarte:not(.indexkarte--dunkel), .gegenueber { border-color: transparent !important; }
.jetzt { outline: 0 !important; }

:is(.blatt, .jetzt, .zettel, .kachel, .tour, .indexkarte:not(.indexkarte--dunkel), .gegenueber)::after {
  content: ''; position: absolute; inset: -2px; z-index: 1; pointer-events: none;
  border: 1.4px solid var(--hl, var(--linie-stark)); border-radius: var(--radius);
  filter: url(#hb1);
}
:is(.blatt, .jetzt, .zettel, .kachel, .tour, .indexkarte, .gegenueber):nth-child(3n+2)::after { filter: url(#hb2); }
:is(.blatt, .jetzt, .zettel, .kachel, .tour, .indexkarte, .gegenueber):nth-child(3n)::after { filter: url(#hb3); }

/* der innere Zierrahmen der Karte „Jetzt wichtig“ (vorher Outline) */
.jetzt::before {
  content: ''; position: absolute; inset: 5px; z-index: 1; pointer-events: none;
  border: 1px solid var(--linie); border-radius: 1px; filter: url(#hb2);
}

/* ---------- Waagrechte Linien oben ---------- */
.zeilen, .akkordeon, .tafel, .tafel-zeile, .haken li + li, .leiste-buchung { position: relative; }
.zeilen, .akkordeon, .tafel, .tabs, .tafel-zeile, .haken li + li, .leiste-buchung,
.schritte li { border-top-color: transparent !important; }
:is(.zeilen, .akkordeon, .tafel, .tabs)::before,
:is(.tafel-zeile, .haken li + li, .leiste-buchung)::before {
  content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 9px;
  pointer-events: none; filter: url(#hh1);
  background: linear-gradient(rgba(42,31,24,.45), rgba(42,31,24,.45)) 50% 50% / 100% 1.3px no-repeat;
}
:is(.tafel-zeile, .haken li + li)::before { background-image: linear-gradient(var(--linie), var(--linie)); }
.leiste-buchung::before { background-image: linear-gradient(rgba(243,236,218,.16), rgba(243,236,218,.16)); }
.tafel-zeile:nth-child(2n)::before, .haken li:nth-child(2n)::before { filter: url(#hh2); }
.tafel-zeile:nth-child(3n)::before, .haken li:nth-child(3n)::before { filter: url(#hh3); }

/* Schrittelisten: der ::before gehört dem Zahlenkreis, die Linie liegt deshalb auf ::after */
.schritte li:not(:first-child)::after {
  content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 9px; pointer-events: none; filter: url(#hh2);
  background: linear-gradient(var(--linie), var(--linie)) 50% 50% / 100% 1px no-repeat;
}

/* ---------- Waagrechte Linien unten ---------- */
.zeilen li, .akkordeon details { position: relative; border-bottom-color: transparent !important; }
:is(.zeilen li, .akkordeon details)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 9px;
  pointer-events: none; filter: url(#hh2);
  background: linear-gradient(rgba(42,31,24,.45), rgba(42,31,24,.45)) 50% 50% / 100% 1.3px no-repeat;
}
:is(.zeilen li, .akkordeon details):nth-child(2n)::after { filter: url(#hh3); }
:is(.zeilen li, .akkordeon details):nth-child(3n)::after { filter: url(#hh1); }

/* ---------- Trennlinie ---------- */
.trenner {
  height: 9px; margin: 32px 0; filter: url(#hh3);
  background: linear-gradient(rgba(42,31,24,.45), rgba(42,31,24,.45)) 50% 50% / 100% 1.3px no-repeat;
}