/* listenwerk — Gestaltung
 *
 * Richtung: das Notizbuch eines Technikers. Papier statt Bildschirmweiss,
 * Graphit statt Schwarz, Tinte statt Signalfarbe. Metadaten stehen in
 * Schreibmaschinenschrift mit gleich breiten Ziffern, damit Termine
 * untereinander fluchten — das ist die technische Haelfte.
 *
 * Die Signatur ist der Randstrich links an jeder Zeile:
 *   FARBE  = wie dringend der Termin ist (Rotstift ueberfaellig, Tinte heute)
 *   DICKE  = wie wichtig die Aufgabe ist (Prioritaet 1 bis 4)
 * Ein Element, zwei Achsen. Deshalb gibt es hier keine Prioritaetsflaggen und
 * keine Termin-Plaketten.
 *
 * Tiefe: ausschliesslich Randlinien und leichte Flaechentoene. Kein Schatten,
 * ausser bei Dingen, die wirklich ueber der Seite schweben (Randspalte am
 * Handy, Meldung). Papier, das flach liegt, wirft keinen Schatten.
 */

/* --------------------------------------------------------------- Farben - */

:root {
  color-scheme: light dark;

  --papier:        #F5F1E8;
  --papier-blatt:  #FBF8F2;
  --papier-tief:   #ECE5D6;
  --papier-warm:   #F0EADC;

  --graphit:       #23201B;
  --graphit-2:     #574F42;
  /* Nachgemessen gegen den Seitengrund: die alten Werte kamen auf 3,66 und
     2,40 zu 1. Termine, Zaehler und Platzhalter stehen in kleiner Schrift und
     brauchen 4,5 — und zwar auch auf dem DUNKELSTEN hellen Grund, also auf
     dem Ton der Eingabefelder, nicht nur auf dem Seitengrund. Gerechnet gegen
     alle drei Gruende: 4,52 bis 5,02 fuer Termine und Zaehler, 4,69 bis 5,21
     fuer Platzhalter. Der warme Graustich bleibt, weil nur die Helligkeit
     gesenkt wurde, nicht das Kanalverhaeltnis. */
  --graphit-3:     #6E6659;
  --graphit-blass: #6A6457;

  --tinte:         #1F4E4A;
  --tinte-hell:    #2E6B65;
  --rotstift:      #A63A2A;
  --moos:          #4A6B3A;
  --ocker:         #96681F;
  --pflaume:       #6B3A5C;

  --linie:         rgba(35, 32, 27, .12);
  --linie-zart:    rgba(35, 32, 27, .07);
  --linie-stark:   rgba(35, 32, 27, .22);
  --ring:          rgba(31, 78, 74, .40);

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --masch:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --e: 4px;                    /* Grundeinheit — alles ist ein Vielfaches */
  --r-klein: 3px;
  --r: 5px;
  --r-gross: 10px;

  --rand-breite: 258px;
  --griff: 44px;               /* Mindest-Trefferflaeche am Daumen */

  --schwung: 120ms cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:        #16130F;
    --papier-blatt:  #1E1A15;
    --papier-tief:   #110E0B;
    --papier-warm:   #221D17;

    --graphit:       #E9E3D6;
    --graphit-2:     #B7AF9E;
    --graphit-3:     #8F8674;
    /* Ebenfalls nachgemessen: 3,20 zu 1 war zu wenig fuer Platzhalter. */
    --graphit-blass: #948C75;

    --tinte:         #6FB5AC;
    --tinte-hell:    #8ACCC3;
    --rotstift:      #E08672;
    --moos:          #9CBC83;
    --ocker:         #D6A55E;
    --pflaume:       #C592B4;

    --linie:         rgba(233, 227, 214, .13);
    --linie-zart:    rgba(233, 227, 214, .07);
    --linie-stark:   rgba(233, 227, 214, .24);
    --ring:          rgba(111, 181, 172, .45);
  }
}

/* Farbschluessel der Listen. Gedaempft, damit zwoelf Listen nebeneinander
   nicht flimmern — der Punkt soll unterscheiden, nicht rufen. */
[data-farbe="tinte"]   { --ton: var(--tinte); }
[data-farbe="rotstift"]{ --ton: var(--rotstift); }
[data-farbe="moos"]    { --ton: var(--moos); }
[data-farbe="ocker"]   { --ton: var(--ocker); }
[data-farbe="pflaume"] { --ton: var(--pflaume); }
[data-farbe="graphit"] { --ton: var(--graphit-3); }

/* ---------------------------------------------------------------- Grund - */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--graphit);
  font: 15px/1.5 var(--schrift);
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tinte); text-decoration-color: var(--linie-stark); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-klein);
}

.nurlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ueberspringen {
  position: absolute; left: -999px; top: 0; z-index: 40;
  background: var(--papier-blatt); padding: calc(var(--e) * 3);
  border: 1px solid var(--linie-stark); border-radius: var(--r);
}
.ueberspringen:focus { left: calc(var(--e) * 2); top: calc(var(--e) * 2); }

/* ------------------------------------------------------------- Aufbau -- */

body.werk {
  display: grid;
  grid-template-columns: var(--rand-breite) minmax(0, 1fr);
  min-height: 100dvh;
}

/* Die Randspalte hat denselben Grund wie der Inhalt. Ein eigener Farbton
   wuerde die Seite in zwei Welten zerschneiden; eine Linie reicht. */
.rand {
  border-right: 1px solid var(--linie);
  padding: calc(var(--e) * 5) calc(var(--e) * 3) calc(var(--e) * 4);
  display: flex; flex-direction: column; gap: calc(var(--e) * 5);
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}

.marke-oben {
  display: flex; align-items: center; gap: calc(var(--e) * 2);
  font-weight: 620; letter-spacing: -.02em; font-size: 16px;
  color: var(--graphit); text-decoration: none;
  padding-inline: calc(var(--e) * 2);
}
.siegel { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--tinte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.rand ul { list-style: none; margin: 0; padding: 0; }
.rand-titel {
  margin: 0 0 calc(var(--e) * 1) 0; padding-inline: calc(var(--e) * 2);
  font: 500 11px/1 var(--masch); letter-spacing: .10em; text-transform: uppercase;
  color: var(--graphit-3);
}

.bereiche a, .listen a, .rand-fuss a {
  display: flex; align-items: center; gap: calc(var(--e) * 2);
  min-height: 34px; padding: calc(var(--e) * 1.5) calc(var(--e) * 2);
  border-radius: var(--r); color: var(--graphit-2); text-decoration: none;
  transition: background var(--schwung), color var(--schwung);
}
.bereiche a:hover, .listen a:hover, .rand-fuss a:hover { background: var(--papier-warm); color: var(--graphit); }
.bereiche a.hier, .listen a.hier { background: var(--papier-warm); color: var(--graphit); font-weight: 560; }

.bereiche b, .listen b {
  margin-left: auto; font: 500 12px/1 var(--masch); font-variant-numeric: tabular-nums;
  color: var(--graphit-3);
}
.bereiche b.warn { color: var(--rotstift); }

.listen .punkt {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ton, var(--tinte));
}
.listen .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listen .geteilt {
  font: 500 10px/1 var(--masch); letter-spacing: .06em; text-transform: uppercase;
  color: var(--graphit-3); border: 1px solid var(--linie); border-radius: 2px;
  padding: 2px 4px;
}

.neue-liste { padding-inline: calc(var(--e) * 2); }
.neue-liste summary {
  cursor: pointer; color: var(--graphit-3); font-size: 13px; list-style: none;
  min-height: 28px; display: flex; align-items: center;
}
.neue-liste summary::-webkit-details-marker { display: none; }
.neue-liste summary::before { content: "+"; margin-right: calc(var(--e) * 2); font: 500 15px/1 var(--masch); }
.neue-liste summary:hover { color: var(--graphit); }
.neue-liste form { display: grid; gap: calc(var(--e) * 2); margin-top: calc(var(--e) * 2); }

.farbwahl { display: flex; gap: calc(var(--e) * 1.5); }
.farbe { cursor: pointer; }
.farbe input { position: absolute; opacity: 0; }
.farbe span[aria-hidden] {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ton); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--linie) inset;
}
.farbe input:checked + span[aria-hidden] { border-color: var(--papier); box-shadow: 0 0 0 2px var(--graphit-2); }
.farbe input:focus-visible + span[aria-hidden] { outline: 2px solid var(--ring); outline-offset: 2px; }

.rand-fuss {
  margin-top: auto; padding-top: calc(var(--e) * 3); border-top: 1px solid var(--linie-zart);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e);
}

/* --------------------------------------------------------------- Kopf --- */

/* Nur die Werkansicht. Ohne die Einschraenkung erwischte diese Regel auch
   das Anmeldeblatt, das ebenfalls ein `main` ist — es bekam volle Hoehe und
   klebte dadurch am oberen Rand, statt in der Mitte zu stehen. */
body.werk main {
  display: flex; flex-direction: column; min-height: 100dvh;
  padding: calc(var(--e) * 5) calc(var(--e) * 7) 0;
  max-width: 860px; width: 100%;
}

.kopf {
  display: grid; align-items: baseline; gap: calc(var(--e) * 3);
  grid-template-columns: 1fr auto;
  padding-bottom: calc(var(--e) * 4);
  border-bottom: 1px solid var(--linie);
}
.kopf-text h1 {
  margin: 0; font-size: 25px; font-weight: 640; letter-spacing: -.022em;
}
.kopf-text h1 .leise { color: var(--graphit-3); font-weight: 400; }
.datum {
  margin: calc(var(--e) * 1) 0 0; font: 400 12px/1.3 var(--masch);
  color: var(--graphit-3); font-variant-numeric: tabular-nums;
}
.kopf-werkzeuge { grid-column: 1 / -1; display: flex; gap: calc(var(--e) * 4); }
/* Ganze Saetze bleiben in der Fliesstextschrift. Schreibmaschinenschrift ist
   fuer Termine, Zahlen und Kennungen da — ein Erklaersatz darin liest sich
   wie eine Fehlermeldung. */
.unterzeile { margin: calc(var(--e) * 1) 0 0; font-size: 13px; color: var(--graphit-3); }
.rand-schalter { display: none; }

.suche input {
  width: 200px; min-height: 32px;
  padding: calc(var(--e) * 1.5) calc(var(--e) * 3);
  font: 400 15px/1.2 var(--schrift);
  color: var(--graphit);
  /* Eingabefelder liegen tiefer als ihre Umgebung, nicht hoeher — ein
     dunklerer Grund sagt "hier hinein", ohne einen kraeftigen Rahmen. */
  background: var(--papier-tief);
  border: 1px solid var(--linie-zart); border-radius: var(--r);
  transition: border-color var(--schwung), background var(--schwung);
}
.suche input::placeholder { color: var(--graphit-blass); }
.suche input:focus { border-color: var(--linie-stark); background: var(--papier-blatt); }

.hinweis-geteilt {
  margin: calc(var(--e) * 4) 0 0; padding: calc(var(--e) * 2.5) calc(var(--e) * 3);
  background: var(--papier-warm); border-left: 2px solid var(--tinte);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 13px; color: var(--graphit-2);
}

/* ------------------------------------------------------------ Gruppen --- */

.gruppe { margin-top: calc(var(--e) * 6); }
.gruppe h2 {
  margin: 0 0 calc(var(--e) * 1); display: flex; align-items: baseline; gap: calc(var(--e) * 2);
  font: 500 11px/1 var(--masch); letter-spacing: .10em; text-transform: uppercase;
  color: var(--graphit-3);
}
.gruppe[data-gruppe="ueberfaellig"] h2 { color: var(--rotstift); }
.gruppe h2 .zahl { font-variant-numeric: tabular-nums; color: var(--graphit-blass); }

/* ------------------------------------------------------------- Zeilen --- */

.zeilen { list-style: none; margin: calc(var(--e) * 2) 0 0; padding: 0; }

.zeile {
  position: relative;
  display: grid;
  grid-template-columns: var(--griff) minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 calc(var(--e) * 1);
  padding: calc(var(--e) * 2) 0 calc(var(--e) * 2) calc(var(--e) * 3);
  border-bottom: 1px solid var(--linie-zart);
  transition: opacity var(--schwung);
}
.zeile:first-child { border-top: 1px solid var(--linie-zart); }

/* Die Signatur. Dicke aus der Prioritaet, Farbe aus der Faelligkeit. */
.marke {
  position: absolute; left: 0; top: calc(var(--e) * 2); bottom: calc(var(--e) * 2);
  width: var(--marke-breite, 1px);
  background: var(--marke-farbe, var(--linie));
  border-radius: 1px;
}
.zeile[data-prio="1"] { --marke-breite: 4px; }
.zeile[data-prio="2"] { --marke-breite: 3px; }
.zeile[data-prio="3"] { --marke-breite: 2px; }
.zeile[data-prio="4"] { --marke-breite: 1px; }

.zeile[data-lage="ueberfaellig"] { --marke-farbe: var(--rotstift); }
.zeile[data-lage="heute"]        { --marke-farbe: var(--tinte); }
.zeile[data-lage="morgen"]       { --marke-farbe: color-mix(in srgb, var(--tinte) 55%, transparent); }
.zeile[data-lage="spaeter"]      { --marke-farbe: var(--linie); }
.zeile[data-lage="ohne"]         { --marke-farbe: var(--linie-zart); }

.abhaken { margin: 0; }
.kaestchen {
  width: var(--griff); height: var(--griff); margin-left: calc(var(--e) * -2);
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--graphit-3);
  border-radius: var(--r);
}
.kaestchen:hover { color: var(--tinte); }
.kaestchen svg { width: 21px; height: 21px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kaestchen .rahmen { stroke: currentColor; stroke-width: 1.6; }
.kaestchen .haken {
  stroke: var(--tinte); stroke-width: 2.2;
  stroke-dasharray: 20; stroke-dashoffset: 20;
  transition: stroke-dashoffset 160ms cubic-bezier(.4, 0, .2, 1);
}
.zeile.ist-erledigt .kaestchen .haken { stroke-dashoffset: 0; }
.zeile.ist-erledigt .kaestchen { color: var(--tinte); }

.mitte { padding-top: calc(var(--e) * 2.5); min-width: 0; }
.titel {
  margin: 0; overflow-wrap: anywhere;
  /* Der Durchstrich wird gezeichnet, nicht eingeblendet — abhaken soll sich
     anfuehlen wie das Durchstreichen einer Zeile im Heft. */
  background-image: linear-gradient(var(--graphit-3), var(--graphit-3));
  background-repeat: no-repeat;
  background-position: 0 .62em;
  background-size: 0 1px;
  transition: background-size 180ms cubic-bezier(.4, 0, .2, 1), color 220ms 120ms;
}
.zeile.ist-erledigt .titel { background-size: 100% 1px; color: var(--graphit-3); }
.zeile.ist-erledigt { opacity: .62; }
.zeile.ist-erledigt:hover { opacity: 1; }

.notiz {
  margin: calc(var(--e) * .5) 0 0; font-size: 13px; color: var(--graphit-2);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.beiwerk {
  margin: calc(var(--e) * 1) 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 calc(var(--e) * 3);
  font: 400 12px/1.4 var(--masch); font-variant-numeric: tabular-nums;
  color: var(--graphit-3);
}
.beiwerk:empty { display: none; }
.zeile[data-lage="ueberfaellig"] .faellig { color: var(--rotstift); }
.zeile[data-lage="heute"] .faellig { color: var(--tinte); }
.beiwerk .wdh::before { content: "\21BB\00A0"; }
.beiwerk .herkunft {
  color: var(--graphit-3); text-decoration: none;
  display: inline-flex; align-items: center; gap: calc(var(--e) * 1.5);
}
.beiwerk .herkunft::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ton, var(--graphit-blass));
}
.beiwerk .herkunft:hover { color: var(--graphit); }
.beiwerk .zustaendig {
  border: 1px solid var(--linie); border-radius: 2px; padding: 1px 5px; font-size: 11px;
}

.werkzeuge { display: flex; align-items: center; min-height: var(--griff); opacity: 0; }
.zeile:hover .werkzeuge, .zeile:focus-within .werkzeuge { opacity: 1; }
@media (hover: none) { .werkzeuge { opacity: 1; } }

/* ---------------------------------------------------------------- Leer -- */

.leer {
  margin: calc(var(--e) * 12) 0; padding-left: calc(var(--e) * 3);
  border-left: 1px solid var(--linie-zart); color: var(--graphit-2);
}
.leer-titel { margin: 0 0 calc(var(--e) * 1); font-weight: 560; color: var(--graphit); }
.leer p { margin: 0; }

/* ------------------------------------------------------------- Eingabe -- */

.eingabe {
  position: sticky; bottom: 0; margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: calc(var(--e) * 2);
  padding: calc(var(--e) * 3) 0 calc(var(--e) * 3);
  padding-bottom: max(calc(var(--e) * 3), env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--papier) 78%, transparent);
  border-top: 1px solid var(--linie);
}
.eingabe input[type="text"], .eingabe select {
  min-height: var(--griff);
  /* Mindestens 16px: darunter zoomt iOS beim Antippen in das Feld hinein. */
  font: 400 16px/1.2 var(--schrift);
  color: var(--graphit); background: var(--papier-tief);
  border: 1px solid var(--linie); border-radius: var(--r);
  padding: 0 calc(var(--e) * 3);
}
.eingabe input[type="text"]::placeholder { color: var(--graphit-blass); }
.eingabe input[type="text"]:focus { background: var(--papier-blatt); border-color: var(--linie-stark); }
.eingabe select { max-width: 150px; }
.eingabe-tipp {
  grid-column: 1 / -1; margin: 0; min-height: 15px;
  font: 400 12px/1.3 var(--masch); color: var(--tinte);
}

.knopf {
  min-height: var(--griff); padding: 0 calc(var(--e) * 4);
  font: 560 14px/1 var(--schrift); color: var(--papier-blatt);
  background: var(--tinte); border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; transition: background var(--schwung);
}
.knopf:hover { background: var(--tinte-hell); }
.knopf:active { transform: translateY(1px); }
@media (prefers-color-scheme: dark) { .knopf { color: #12100D; } }

.knopf-still {
  background: none; border: 0; padding: calc(var(--e) * 2);
  font: 400 13px/1 var(--schrift); color: var(--graphit-3); cursor: pointer;
  text-decoration: none; border-radius: var(--r);
  min-height: 30px; display: inline-flex; align-items: center;
}
.knopf-still:hover { color: var(--graphit); background: var(--papier-warm); }

.knopf-warn { color: var(--rotstift); }

/* ------------------------------------------------------------ Meldung --- */

.meldung {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(calc(var(--e) * 20), calc(env(safe-area-inset-bottom) + var(--e) * 20));
  z-index: 30; max-width: min(440px, calc(100vw - var(--e) * 8));
  padding: calc(var(--e) * 2.5) calc(var(--e) * 4);
  background: var(--papier-blatt); color: var(--graphit);
  border: 1px solid var(--linie-stark); border-radius: var(--r-gross);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .10);
  font-size: 14px;
}
.meldung[data-art="fehler"] { border-color: var(--rotstift); color: var(--rotstift); }
.meldung .rueckgaengig {
  margin-left: calc(var(--e) * 3); background: none; border: 0; cursor: pointer;
  font: 560 13px/1 var(--schrift); color: var(--tinte); text-decoration: underline;
}

/* -------------------------------------------------------------- Karten -- */

.blatt {
  background: var(--papier-blatt);
  border: 1px solid var(--linie); border-radius: var(--r-gross);
  padding: calc(var(--e) * 5);
  margin-top: calc(var(--e) * 5);
}
.blatt h2 { margin: 0 0 calc(var(--e) * 3); font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.blatt p { margin: 0 0 calc(var(--e) * 3); color: var(--graphit-2); }
.blatt table { width: 100%; border-collapse: collapse; font-size: 14px; }
.blatt th {
  text-align: left; font: 500 11px/1 var(--masch); letter-spacing: .08em;
  text-transform: uppercase; color: var(--graphit-3);
  padding-bottom: calc(var(--e) * 2); border-bottom: 1px solid var(--linie);
}
.blatt td { padding: calc(var(--e) * 2.5) 0; border-bottom: 1px solid var(--linie-zart); vertical-align: middle; }
.blatt td.masch { font-family: var(--masch); font-variant-numeric: tabular-nums; color: var(--graphit-2); font-size: 13px; }

.feld { display: grid; gap: calc(var(--e) * 1.5); margin-bottom: calc(var(--e) * 4); }
.feld > span { font: 500 12px/1 var(--masch); letter-spacing: .06em; text-transform: uppercase; color: var(--graphit-3); }
.feld input, .feld select {
  min-height: var(--griff); font: 400 16px/1.2 var(--schrift);
  color: var(--graphit); background: var(--papier-tief);
  border: 1px solid var(--linie); border-radius: var(--r);
  padding: 0 calc(var(--e) * 3); width: 100%;
}
.feld input:focus { border-color: var(--linie-stark); background: var(--papier); }
.feld .hilfe { font: 400 12px/1.4 var(--schrift); color: var(--graphit-3); text-transform: none; letter-spacing: 0; }

.fehlerkasten {
  margin: 0 0 calc(var(--e) * 4); padding: calc(var(--e) * 3);
  border-left: 2px solid var(--rotstift); background: var(--papier-warm);
  border-radius: 0 var(--r) var(--r) 0; color: var(--rotstift); font-size: 14px;
}

.geheim {
  font-family: var(--masch); font-size: 12px; word-break: break-all;
  background: var(--papier-tief); border: 1px solid var(--linie);
  border-radius: var(--r); padding: calc(var(--e) * 3); margin: calc(var(--e) * 2) 0;
  color: var(--graphit);
}

/* --------------------------------------------------------------- Tore --- */

body.tor {
  display: grid; place-items: center; min-height: 100dvh;
  padding: calc(var(--e) * 6);
}
.tor-blatt {
  width: 100%; max-width: 380px;
  background: var(--papier-blatt); border: 1px solid var(--linie);
  border-radius: var(--r-gross); padding: calc(var(--e) * 8);
}
.tor-blatt .siegel { width: 26px; height: 26px; }
.tor-blatt h1 { margin: calc(var(--e) * 3) 0 calc(var(--e) * 2); font-size: 20px; letter-spacing: -.02em; }
.tor-blatt > p { margin: 0 0 calc(var(--e) * 6); color: var(--graphit-2); font-size: 14px; }
.tor-blatt .knopf { width: 100%; }
.tor-fuss { margin-top: calc(var(--e) * 5); font-size: 13px; color: var(--graphit-3); text-align: center; }

/* ------------------------------------------------------------- Schmal --- */

@media (max-width: 860px) {
  body.werk { grid-template-columns: minmax(0, 1fr); }
  body.tor { padding: calc(var(--e) * 4); }

  .rand {
    position: fixed; inset: 0 auto 0 0; z-index: 20;
    width: min(84vw, var(--rand-breite));
    background: var(--papier);
    border-right: 1px solid var(--linie-stark);
    box-shadow: 0 0 40px rgba(0, 0, 0, .18);
    transform: translateX(-102%);
    transition: transform 180ms cubic-bezier(.2, .7, .3, 1);
    padding-top: max(calc(var(--e) * 5), env(safe-area-inset-top));
  }
  body.rand-offen .rand { transform: none; }

  .rand-schleier {
    position: fixed; inset: 0; z-index: 15;
    background: rgba(0, 0, 0, .34);
    opacity: 0; pointer-events: none; transition: opacity 180ms;
  }
  body.rand-offen .rand-schleier { opacity: 1; pointer-events: auto; }

  body.werk main { padding: max(calc(var(--e) * 4), env(safe-area-inset-top)) calc(var(--e) * 4) 0; }

  .kopf { grid-template-columns: var(--griff) minmax(0, 1fr); align-items: center; }
  .kopf-text { grid-column: 2; }
  .kopf-text h1 { font-size: 21px; }
  .suche { grid-column: 1 / -1; }
  .suche input { width: 100%; min-height: 38px; font-size: 16px; }

  .rand-schalter {
    display: grid; place-items: center;
    width: var(--griff); height: var(--griff); margin-left: calc(var(--e) * -2);
    background: none; border: 0; cursor: pointer; color: var(--graphit-2);
    border-radius: var(--r);
  }
  .rand-schalter span {
    width: 17px; height: 1.5px; background: currentColor; border-radius: 1px; position: relative;
  }
  .rand-schalter span::before, .rand-schalter span::after {
    content: ""; position: absolute; left: 0; width: 17px; height: 1.5px;
    background: currentColor; border-radius: 1px;
  }
  .rand-schalter span::before { top: -5px; }
  .rand-schalter span::after { top: 5px; }

  .eingabe { grid-template-columns: minmax(0, 1fr) auto; }
  .eingabe select { grid-column: 1; max-width: none; }
  .eingabe button { grid-column: 2; grid-row: 2; }
  .eingabe input[type="text"] { grid-column: 1 / -1; }

  .werkzeuge { opacity: 1; }

  /* Am Daumen brauchen auch die Eintraege der Randspalte volle Hoehe. Am
     Zeigegeraet reichen 35 Pixel und halten die Liste kompakt — deshalb steht
     das hier und nicht in der Grundregel. */
  .bereiche a, .listen a, .rand-fuss a, .neue-liste summary, .archiv summary {
    min-height: var(--griff);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------- Bearbeiten -- */

.bearbeiten {
  list-style: none;
  padding: calc(var(--e) * 4) calc(var(--e) * 4) calc(var(--e) * 3) calc(var(--e) * 3);
  background: var(--papier-warm);
  border-bottom: 1px solid var(--linie-zart);
  border-left: 2px solid var(--tinte);
}
.bearbeiten .feld { margin-bottom: calc(var(--e) * 3); }
.bearbeiten .paar { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--e) * 3); }
.bearbeiten-fuss { display: flex; align-items: center; gap: calc(var(--e) * 3); }
.bearbeiten input, .bearbeiten select { background: var(--papier-blatt); }

.wochentage {
  border: 1px solid var(--linie); border-radius: var(--r);
  padding: calc(var(--e) * 2) calc(var(--e) * 3) calc(var(--e) * 3);
  margin: 0 0 calc(var(--e) * 4); display: flex; flex-wrap: wrap; gap: calc(var(--e) * 2);
}
.wochentage legend {
  font: 500 12px/1 var(--masch); letter-spacing: .06em; text-transform: uppercase;
  color: var(--graphit-3); padding-inline: calc(var(--e) * 1);
}
.wochentage label { cursor: pointer; }
.wochentage input { position: absolute; opacity: 0; }
.wochentage span {
  display: grid; place-items: center; min-width: 38px; min-height: 34px;
  border: 1px solid var(--linie); border-radius: var(--r);
  font: 500 13px/1 var(--masch); color: var(--graphit-2); background: var(--papier-blatt);
}
.wochentage input:checked + span { background: var(--tinte); border-color: var(--tinte); color: var(--papier-blatt); }
.wochentage input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { .wochentage input:checked + span { color: #12100D; } }

.bearbeiten-hinweis { font: 400 12px/1.3 var(--masch); color: var(--graphit-3); }

/* Unteraufgaben. Eingerueckt und mit einer kurzen Anbindung nach links —
   ohne die schwebt die Zeile ohne erkennbaren Bezug im Raum. */
.zeile.ist-unteraufgabe { padding-left: calc(var(--e) * 11); }
.zeile.ist-unteraufgabe::before {
  content: ""; position: absolute; left: calc(var(--e) * 6); top: calc(var(--e) * 5.5);
  width: calc(var(--e) * 3); height: 1px; background: var(--linie);
}
.zeile.ist-unteraufgabe .titel { font-size: 14px; }

/* Listenverwaltung und Unteraufgaben-Eingabe */
.liste-verwalten { margin-top: calc(var(--e) * 4); }
.feld-quer {
  display: flex; align-items: flex-start; gap: calc(var(--e) * 3);
  margin-bottom: calc(var(--e) * 4);
}
.feld-quer input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--tinte); }
.quer-text {
  font: 400 13px/1.45 var(--schrift); color: var(--graphit-2);
  text-transform: none; letter-spacing: 0;
}
.unter-anlegen { margin-top: calc(var(--e) * 2); }
.unter-anlegen .feld { margin-bottom: 0; }

.archiv { padding-inline: calc(var(--e) * 2); }
.archiv summary {
  cursor: pointer; list-style: none; min-height: 28px; display: flex; align-items: center;
  font: 500 11px/1 var(--masch); letter-spacing: .10em; text-transform: uppercase;
  color: var(--graphit-3);
}
.archiv summary::-webkit-details-marker { display: none; }
.archiv summary:hover { color: var(--graphit); }
.archiv .listen { margin-top: calc(var(--e) * 1); margin-inline: calc(var(--e) * -2); }
.archiv .listen a { opacity: .7; }

/* Verschiebepfeile. Nur sichtbar, wo sie auch wirken — in einer Liste mit
   manueller Sortierung. In der Termin-Sortierung waeren sie eine Luege:
   die Reihenfolge kaeme beim naechsten Laden zurueck. */
.schieben { display: none; font-size: 10px; padding: calc(var(--e) * 2) calc(var(--e) * 1.5); }
body.sortierung-manuell .schieben { display: inline-flex; }
body.sortierung-manuell .zeile:first-child [data-schieben="hoch"],
body.sortierung-manuell .zeile:last-child [data-schieben="runter"] {
  opacity: .25; pointer-events: none;
}

/* Das Siegel im Anmeldeblatt traegt `currentColor` im Markup — ohne diese
   Zeile faerbt es sich in Graphit statt in Tinte wie in der Randspalte. */
.tor-blatt .siegel { color: var(--tinte); }
.tor-blatt form { margin-bottom: calc(var(--e) * 2); }

/* Trefferflaechen in der Zeile. Gemessen bei 320 Pixel Breite: der
   Bearbeiten-Griff war 29x30 Pixel und damit unter den 44 Pixeln, die am
   Daumen noetig sind. Die sichtbare Marke bleibt klein, die Flaeche waechst. */
.werkzeuge .knopf-still, .werkzeuge .schieben {
  min-width: 36px; min-height: var(--griff);
  justify-content: center; padding-inline: 0;
}
.werkzeuge .schieben { min-width: 32px; }
.rand-fuss .knopf-still { min-height: var(--griff); }

/* Breite Inhalte scrollen in ihrem eigenen Kasten, statt die Seite waagrecht
   zu verschieben. */
.blatt table { display: block; overflow-x: auto; }
.blatt table thead, .blatt table tbody { display: table; width: 100%; }

@media (max-width: 700px) {
  /* Eine fuenfspaltige Tabelle ist auf 390 Pixeln nicht lesbar — die Zellen
     brechen ineinander. Ab hier wird jede Zeile ein eigener Block, und die
     Spaltenueberschrift steht als Beschriftung davor. */
  /* Die Auswahl traegt `.blatt` mit, weil die allgemeine Tabellenregel
     darueber (`.blatt table thead`) sonst gewinnt und die Kopfzeile stehen
     bleibt — als unlesbare Reihe "WANN WER WAS VON AUF". */
  .blatt .verlauf, .blatt .verlauf tbody,
  .blatt .verlauf tr, .blatt .verlauf td { display: block; width: auto; }
  .blatt .verlauf thead { display: none; }
  .verlauf tr {
    border-bottom: 1px solid var(--linie);
    padding: calc(var(--e) * 3) 0;
  }
  .verlauf tr:last-child { border-bottom: 0; }
  /* Ebenfalls mit `.blatt`, sonst gewinnt die Blockregel darueber und die
     Beschriftung klebt am Wert. */
  .blatt .verlauf td {
    border: 0; padding: 1px 0;
    display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: calc(var(--e) * 2);
    align-items: baseline;
  }
  .verlauf td::before {
    content: attr(data-titel);
    font: 500 11px/1.4 var(--masch); letter-spacing: .06em; text-transform: uppercase;
    color: var(--graphit-3);
  }
  .verlauf td[data-titel="Wer"], .verlauf td[data-titel="Was"] { font-weight: 500; }
}

/* --------------------------------------------------------------- Suche -- */

.filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--e) * 2);
  margin-top: calc(var(--e) * 4);
}
.filter select {
  min-height: 34px; font: 400 13px/1.2 var(--schrift); color: var(--graphit);
  background: var(--papier-tief); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 0 calc(var(--e) * 2);
}
.filter select:focus { border-color: var(--linie-stark); }

.gruppe-liste {
  display: inline-flex; align-items: center; gap: calc(var(--e) * 2);
  color: inherit; text-decoration: none;
}
.gruppe-liste .punkt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ton, var(--tinte));
}
.gruppe-liste:hover { color: var(--graphit); }

/* Der Suchbegriff wird im Browser hervorgehoben, nicht auf dem Server: dort
   muesste Markup in Nutzertext eingesetzt werden, und genau daran schneidet
   man sich. Die Auszeichnung entsteht ueber Textknoten, nie ueber innerHTML. */
.zeile mark {
  background: color-mix(in srgb, var(--ocker) 26%, transparent);
  color: inherit; border-radius: 2px; padding: 0 1px;
}

@media (max-width: 700px) {
  .filter select { flex: 1 1 45%; min-height: var(--griff); font-size: 16px; }
}

/* `hidden` muss jede display-Regel schlagen — sonst bleibt ein Element
   sichtbar, obwohl das Attribut gesetzt ist (etwa der Filter-Knopf, den das
   JavaScript ausblendet, weil die Auswahl selbst absendet). */
[hidden] { display: none !important; }