/* ── css/schriften/schrift.css ── */
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(/css/schriften/plus-jakarta-sans-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(/css/schriften/plus-jakarta-sans-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/css/schriften/plus-jakarta-sans-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/css/schriften/plus-jakarta-sans-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── css/tokens.css ── */
/* ==========================================================================
   EasyLife Prototyp · Gestaltungs-Tokens (Kern)
   „Wolke“ (Runde 10, von Sammy gewählt): heller, kühler Grund, Inhalt auf
   weißen Karten mit weichen, sehr leisen Schatten, große Rundungen, viel Luft.
   Vorbild: design/neustart/runde-10/leinwand/project/Wolke-Heute.dc.html und
   Wolke-Listen.dc.html. Schrift Plus Jakarta Sans, lokal in css/schriften/.

   HELL IST IMMER DER STANDARD. Weder prefers-color-scheme noch ein
   data-theme der Umgebung (claude.ai) schaltet um. Dunkel gibt es nur als
   ausdrückliche Wahl unter Einstellungen › Darstellung; sie setzt
   data-darstellung="dunkel" am Wurzelelement (EL.darstellung, bausteine.js).

   Jede Farbe hat genau eine Bedeutung:
     --tinte         Schrift, das Aktive (gewählter Reiter), Jetzt-Linie, die dunkle Haupttaste
     --akzent        Wörter zum Antippen (Zurück, Rückgängig, Zeigen), Fokus
     --akzent-weich  getönte Fläche für das Gewählte in Zeilen
     --gedrueckt     das Gewählte als Knopf: eingedrückt (mit --schatten-gedrueckt); dunkle Flächen sind nur Handlungen
     --neben         Nebentext, Erledigtes, Symbole
     --art-…         die Art eines Dings (Termin, Aufgabe, Routine, Ort, Geld, Person)
                     --art-x          Marke: Kreis, Symbol, Linie (≥ 3 : 1 auf allen Gründen)
                     --art-x-grund    helle Fläche: Plakette, laufende Karte, Block
                     --art-x-flaeche  etwas kräftigere Fläche (Block, Kachel), nie satt
                     --art-x-text     Schrift in der Farbe der Art (≥ 4,5 : 1 auf hell und auf -grund)
   Artfarben gedämpft und gleich hell, gerechnet in OKLCH (Regel in
   .claude/rules/easylife-produkt.md): helle Fläche L 0,968 / C 0,018, Fläche
   L 0,95 / C 0,03, Marke L 0,58 / C 0,10, Schrift L 0,50 / C 0,10; Farbtöne
   Termin 245, Aufgabe 295, Routine 160, Ort 55, Geld 85, Person 15.
   Keine satten Flächen, keine mehrfarbigen Verläufe.
   ========================================================================== */

:root{
  /* ---------- Grund und Schrift (hell) ---------- */
  --grund:#F2F5F8;
  --grund-tief:#E3E8ED;       /* außerhalb der App: Seite um das Handy */
  --flaeche:#FFFFFF;
  --feld:#F2F5F8;             /* das Feld in der weißen Leiste */
  --mulde:#EDF1F5;            /* eingelassen: ruhige Knöpfe, Wortschalter, Plakette ohne Art */
  --tinte:#20252A;
  --neben:#5E646A;
  --kreis:#858C93;            /* Umriss offener Kreise ohne Art, ≥ 3 : 1 auf Weiß und Mulde */
  --trenner:#EDF0F3;

  /* ---------- Akzent ---------- */
  --akzent:#28577C;           /* Wörter zum Antippen, Fokus */
  --akzent-flaeche:#20252A;   /* die eine Haupthandlung: dunkle Pille wie die Mikrofon-Taste */
  --auf-akzent:#FFFFFF;
  --akzent-weich:#E6EEF6;     /* das Gewählte in Zeilen (Auswahl links, rechts das Gewählte) */
  /* das Gewählte als Knopf (Tag der Woche, Wort am Desktop, Tag im Monat): eingedrückt, nie eine dunkle Fläche
     (Sammy, 27.09.2026: „dezenter … wie wenn man einen button runter drückt“) */
  --gedrueckt:#E4E9EE;
  --schatten-gedrueckt:inset 0 1px 3px rgba(32,37,42,.16), inset 0 0 0 1px rgba(32,37,42,.05);
  --akzent-tief:#1C4262;      /* Text auf --akzent-weich */
  --jetzt:#20252A;            /* Jetzt-Linie und Zeit-Pille */
  --auf-jetzt:#FFFFFF;

  /* ---------- Arten (OKLCH, siehe oben) ---------- */
  --art-termin:#4280B2;  --art-termin-grund:#EBF6FF;  --art-termin-flaeche:#DFF1FF;  --art-termin-text:#296898;
  --art-aufgabe:#7F6EAF; --art-aufgabe-grund:#F5F2FF; --art-aufgabe-flaeche:#EFEBFF; --art-aufgabe-text:#685796;
  --art-routine:#3C8C66; --art-routine-grund:#EBF8F0; --art-routine-flaeche:#DEF5E8; --art-routine-text:#1F744F;
  --art-ort:#A7693C;     --art-ort-grund:#FFF2E9;     --art-ort-flaeche:#FFEADC;     --art-ort-text:#8E5224;
  --art-geld:#95752A;    --art-geld-grund:#FAF4E7;    --art-geld-flaeche:#F8EDD8;    --art-geld-text:#7D5E07;
  --art-person:#AD6067;  --art-person-grund:#FFF0F0;  --art-person-flaeche:#FFE7E8;  --art-person-text:#934951;

  /* ---------- Hinweis, Schatten, Außenbereiche ---------- */
  --umkehr:#20252A;           /* Hinweis „Rückgängig" */
  --auf-umkehr:#F2F5F8;
  --umkehr-akzent:#A9CDEC;
  --abdunkeln:rgba(24,30,36,.26);
  /* Schatten wie im Vorbild: sehr leise, weich */
  --schatten-karte:0 1px 2px rgba(32,37,42,.04), 0 8px 22px rgba(32,37,42,.06);   /* große Karte, Arbeitsfläche */
  --schatten-gruppe:0 1px 2px rgba(32,37,42,.04), 0 6px 18px rgba(32,37,42,.04);  /* Gruppen-Karte (Listen, Flächen) */
  --schatten-zeile:0 1px 2px rgba(32,37,42,.04), 0 4px 14px rgba(32,37,42,.04);   /* Karte im Zeitband */
  --schatten-pille:0 1px 2px rgba(32,37,42,.05);                                   /* weiße Pille */
  --schatten-dock:0 1px 2px rgba(32,37,42,.05), 0 10px 30px rgba(32,37,42,.08);    /* die schwebende Leiste */
  --schatten-blatt:0 -1px 2px rgba(32,37,42,.04), 0 -10px 36px rgba(32,37,42,.10);
  --schatten-heben:0 14px 30px -14px rgba(32,37,42,.30), 0 1px 2px rgba(32,37,42,.06);
  --schatten-knopf:0 1px 2px rgba(32,37,42,.10);
  --leiste:#FAFBFC;           /* Vorführleiste (außerhalb der App) */
  --leiste-text:#20252A;
  --leiste-neben:#5E646A;
  --sperr-grund:#1E2429;      /* Sperrbildschirm-Hintergrund */
  --sperr-text:#F2F5F8;
  --sperr-karte:#F6F8FA;      /* Mitteilung und Widget auf dem Sperrbildschirm */
  --sperr-karte-text:#20252A;
  --sperr-karte-neben:#5E646A;
  --sperr-karte-trenner:#E3E8ED;
  --sperr-akzent:#28577C;
  --papier:#FDFCF8;           /* gezeichnete Beispiel-Dokumente */
  --papier-bon:#FFFFFF;
  --papier-text:#2A2F2C;
  --papier-strich:#D9DCD6;
  --rahmen:#15191D;           /* Gerät um das Handy */

  /* Schrift: eine Familie (Plus Jakarta Sans, lokal) */
  --schrift:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --t-klein:13px;   --z-klein:18px;   /* Zusatz, Uhrzeit, Überschrift einer Gruppe */
  --t-mittel:15px;  --z-mittel:22px;  /* Bedienung, Untertitel, Lagebild */
  --t-text:15px;    --z-text:21px;    /* Zeilentitel (halbfett), Fließtext */
  --t-gross:24px;   --z-gross:30px;   /* Titel eines Blatts */
  --t-seite:30px;   --z-seite:38px;   /* Seitentitel und Tag am Handy */
  --t-desk-titel:22px;                /* nur Desktop: Titel in der Arbeitsfläche */
  --t-reiter:12px;                    /* Beschriftung der fünf Reiter (Vorbild 11 px; nie unter 12 px) */

  /* Rundungen ineinander passend */
  --r-dock:28px;
  --r-karte:22px;       /* große Karte (laufender Eintrag, Arbeitsfläche) */
  --r-flaeche:20px;     /* Gruppen-Karte */
  --r-zeile:16px;       /* Karte im Zeitband, Knopf */
  --r-block:12px;
  --r-pille:999px;

  /* Kanten am Handy (ab Bildschirmrand) */
  --rand:20px;          /* Grund bis Karte */
  --innen:12px;         /* Karte bis Kante A (Plakette, Text ohne Marke) */
  --spalte-zeit:46px;
  --spalte-mark:34px;   /* Plakette 30 px + 4 px */
  --luecke-text:8px;    /* Kante C = rand + innen + zeit + mark + lücke */
  --plakette:32px;      /* runde Symbol-Plakette in Listen und Zeilen ohne Zeitspalte */
  --band-zeit:60px;     /* Uhrzeitspalte des Zeitbands; so breit, dass „tagsüber“ (52 px) mit Luft neben der Karte steht (Punkt 42) */
  --spalte-breite:680px; /* Desktop: eine Spalte, so breit wie eine Handy-Seite; sie steht mittig (css/desktop.css) */

  /* Bewegung: weich auslaufend, kurz, abbrechbar */
  --weich:cubic-bezier(.16,1,.3,1);
  --standard:cubic-bezier(.2,0,0,1);
  --d-kurz:160ms;
  --d-mittel:240ms;
  --d-blatt:320ms;
  --d-zu:220ms;

  color-scheme:light;
}

/* ---------- Dunkel: nur auf ausdrücklichen Wunsch ---------- */
:root[data-darstellung="dunkel"]{
  --grund:#121518;
  --grund-tief:#0A0C0E;
  --flaeche:#1A1E22;
  --feld:#23282D;
  --mulde:#23282D;
  --tinte:#E6E9EC;
  --neben:#A2A9B0;
  --kreis:#737A81;
  --trenner:#2A3035;
  --akzent:#93BDE2;
  --akzent-flaeche:#E6E9EC;
  --auf-akzent:#15181B;
  --akzent-weich:#1F3345;
  --gedrueckt:#0E1114;
  --schatten-gedrueckt:inset 0 1px 3px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.04);
  --akzent-tief:#CFE2F2;
  --jetzt:#E6E9EC;
  --auf-jetzt:#15181B;
  --art-termin:#80B7E7;  --art-termin-grund:#213241;  --art-termin-flaeche:#284053;  --art-termin-text:#B4D9FA;
  --art-aufgabe:#B5A6E5; --art-aufgabe-grund:#312D40; --art-aufgabe-flaeche:#3F3852; --art-aufgabe-text:#D6CDF8;
  --art-routine:#7CC39D; --art-routine-grund:#20362A; --art-routine-flaeche:#274435; --art-routine-text:#B3E1C7;
  --art-ort:#DEA279;     --art-ort-grund:#3E2C1F;     --art-ort-flaeche:#503726;     --art-ort-text:#F4CBAF;
  --art-geld:#CBAD6D;    --art-geld-grund:#382F1B;    --art-geld-flaeche:#483B20;    --art-geld-text:#E6D2A8;
  --art-person:#E49A9F;  --art-person-grund:#40292B;  --art-person-flaeche:#523335;  --art-person-text:#F9C5C8;
  --umkehr:#E6E9EC;
  --auf-umkehr:#15181B;
  --umkehr-akzent:#1C4262;
  --abdunkeln:rgba(0,0,0,.55);
  --schatten-karte:0 0 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.35);
  --schatten-gruppe:0 0 0 1px rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.30);
  --schatten-zeile:0 0 0 1px rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.28);
  --schatten-pille:0 0 0 1px rgba(255,255,255,.05);
  --schatten-dock:0 0 0 1px rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.55);
  --schatten-blatt:0 -8px 40px -12px rgba(0,0,0,.7);
  --schatten-heben:0 12px 28px -14px rgba(0,0,0,.7);
  --schatten-knopf:0 1px 2px rgba(0,0,0,.4);
  --leiste:#15191C;
  --leiste-text:#E6E9EC;
  --leiste-neben:#A2A9B0;
  --sperr-grund:#0E1113;
  color-scheme:dark;
}

/* ---------- Art eines Elements: data-art setzt die Farben für sein Inneres ---------- */
[data-art="termin"]{ --diese-art:var(--art-termin); --diese-art-grund:var(--art-termin-grund); --diese-art-flaeche:var(--art-termin-flaeche); --diese-art-text:var(--art-termin-text); }
[data-art="aufgabe"]{ --diese-art:var(--art-aufgabe); --diese-art-grund:var(--art-aufgabe-grund); --diese-art-flaeche:var(--art-aufgabe-flaeche); --diese-art-text:var(--art-aufgabe-text); }
[data-art="routine"]{ --diese-art:var(--art-routine); --diese-art-grund:var(--art-routine-grund); --diese-art-flaeche:var(--art-routine-flaeche); --diese-art-text:var(--art-routine-text); }
[data-art="ort"]{ --diese-art:var(--art-ort); --diese-art-grund:var(--art-ort-grund); --diese-art-flaeche:var(--art-ort-flaeche); --diese-art-text:var(--art-ort-text); }
[data-art="geld"]{ --diese-art:var(--art-geld); --diese-art-grund:var(--art-geld-grund); --diese-art-flaeche:var(--art-geld-flaeche); --diese-art-text:var(--art-geld-text); }
[data-art="person"]{ --diese-art:var(--art-person); --diese-art-grund:var(--art-person-grund); --diese-art-flaeche:var(--art-person-flaeche); --diese-art-text:var(--art-person-text); }
/* eine Zeile ohne eigene Art erbt keine Farbe von außen */
.zl:not([data-art]), .lz:not([data-art]), .chip:not([data-art]), .planen-wb:not([data-art]), .planen-wk:not([data-art]){ --diese-art:initial; --diese-art-grund:initial; --diese-art-flaeche:initial; --diese-art-text:initial; }

@media (prefers-reduced-motion:reduce){
  :root{
    --d-kurz:1ms;
    --d-mittel:1ms;
    --d-blatt:1ms;
    --d-zu:1ms;
  }
}

/* ── css/bausteine.css ── */
/* ==========================================================================
   EasyLife Prototyp · Grundbausteine (Kern)
   Fläche · Zeile · Listenzeile · Knopf · Chip · Wortschalter · Hinweis · Blatt
   Alle Maße aus css/tokens.css. Tippflächen ≥ 44 px.
   Aussehen „Wolke“: weiße Karten auf kühlem Grund, runde Symbol-Plaketten,
   Überschriften einer Gruppe über der Karte (wie Einstellungen am iPhone).
   ========================================================================== */

/* ---------- Grundlagen ---------- */
/* Rücksetzer ohne Gewicht (:where), damit jede Klasse sie überschreibt */
:where(.el-app), :where(.el-app) *{ box-sizing:border-box; }
.el-app{ font-family:var(--schrift); color:var(--tinte); font-size:var(--t-text); line-height:var(--z-text); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
:where(.el-app) :where(h1,h2,h3,h4,p,ol,ul){ margin:0; padding:0; }
:where(.el-app) :where(ol,ul){ list-style:none; }
:where(.el-app) :where(button){ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; text-align:inherit; -webkit-appearance:none; appearance:none; }
:where(.el-app) :where(button:disabled){ cursor:default; opacity:.5; }
:where(.el-app) :where(:focus-visible){ outline:2px solid var(--akzent); outline-offset:2px; border-radius:10px; }   /* ohne Gewicht: eine eigene Rundung (Blatt 28, Pille) bleibt */
:where(.el-app) ::selection{ background:var(--akzent-weich); }
.zahl{ font-variant-numeric:tabular-nums; }
svg.i{ width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.sym{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }

/* ---------- Fläche ---------- */
.fl{ background:var(--flaeche); border-radius:var(--r-flaeche); padding:2px 0; box-shadow:var(--schatten-gruppe); }
.fl + .fl{ margin-top:16px; }
/* Fläche mit Überschrift: die Überschrift steht leise über der weißen Karte, die Karte trägt die Zeilen */
.fl:has(> .fl-kopf):has(> .fl-zeilen){ background:transparent; box-shadow:none; padding:0; border-radius:0; }
.fl:has(> .fl-kopf) > .fl-zeilen{ background:var(--flaeche); border-radius:var(--r-flaeche); box-shadow:var(--schatten-gruppe); padding:2px 0; }
.fl:has(> .fl-kopf) > .fl-zeilen:empty{ display:none; }
.fl-kopf{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; min-height:26px; padding:0 4px 8px; }
.fl-kopf .wort-knopf{ margin:-13px -4px -9px 0; }
/* Titel und Zusatz: der Abstand ist eine Spaltenlücke, kein Rand links. Passt der Zusatz nicht mehr daneben,
   rutscht er als Ganzes in die nächste Zeile und steht dann genau unter dem Titel (gilt für Kopf, Kopf-Knopf
   und Abschnitt gleich) */
.fl-kopf-links{ display:flex; align-items:baseline; flex-wrap:wrap; column-gap:6px; row-gap:0; min-width:0; }
.fl-titel{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); }
.fl-kopf-zusatz{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:500; color:var(--neben); }
.fl-kopf-knopf{ display:inline-flex; flex-wrap:wrap; align-items:center; column-gap:6px; row-gap:0; text-align:left; min-height:44px; margin:-13px 0 -5px; padding:0 4px; margin-left:-4px; border-radius:12px;
  font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); }
.fl-kopf-knopf:active{ background:var(--mulde); }
.fl-kopf-knopf .fl-kopf-pfeil{ color:var(--neben); margin-left:-4px; }
.fl-kopf-knopf .fl-kopf-pfeil svg{ width:15px; height:15px; }
.fl-zeilen{ position:relative; }

/* ---------- die eine Zeilenform ---------- */
.zl{
  position:relative; display:grid;
  grid-template-columns:var(--spalte-zeit) var(--spalte-mark) minmax(0,1fr);
  align-items:start; padding:0 12px 0 var(--innen); min-height:48px;
}
.zl + .zl::before{ content:""; position:absolute; top:0; right:0; height:1px; background:var(--trenner);
  left:calc(var(--innen) + var(--spalte-zeit) + var(--spalte-mark) + var(--luecke-text)); }
.zl-zeit{ padding-top:13px; font-size:var(--t-klein); line-height:var(--z-text); font-weight:500; color:var(--neben); white-space:nowrap; font-variant-numeric:tabular-nums; }
.zl-zeit.kommt{ color:var(--tinte); }
.zl-marke, .zl-kreis{ display:flex; justify-content:flex-start; align-items:flex-start; height:48px; }
.zl-marke{ padding-top:9px; }
.zl-kreis{ width:44px; margin:0 -10px 0 -7px; padding:9px 0 0 7px; border-radius:22px; }
.zl-kreis:focus-visible{ outline-offset:-4px; }
/* der Kreis ist eine runde Plakette in der hellen Fläche der Art, darin ein Ring in der Markenfarbe
   (Ring als Schatten nach innen: 7 px Fläche, dann 2 px Ring, innen wieder Fläche) */
.kreis{ position:relative; width:30px; height:30px; border-radius:50%; border:0 solid var(--diese-art, var(--kreis)); background:var(--diese-art-grund, var(--mulde));
  box-shadow:inset 0 0 0 7px var(--diese-art-grund, var(--mulde)), inset 0 0 0 9px var(--diese-art, var(--kreis));
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition:box-shadow var(--d-mittel) var(--standard), background-color var(--d-mittel) var(--standard), transform var(--d-kurz) var(--weich); }
.zl-kreis:active .kreis{ transform:scale(.9); }
.kreis .haken{ width:17px; height:17px; fill:none; stroke:var(--diese-art, var(--neben)); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:20; stroke-dashoffset:20; }
.ist-erledigt .kreis{ box-shadow:none; }
.ist-erledigt .kreis .haken{ stroke-dashoffset:0; }
/* Termin: dieselbe Plakette mit dem Symbol der Art */
.zl-symbol{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--diese-art-grund, var(--seite-art-grund, var(--mulde))); color:var(--diese-art, var(--seite-art, var(--neben))); }
.zl-symbol svg.i{ width:16px; height:16px; stroke-width:1.9; }
.zl-haupt{ display:flex; align-items:flex-start; gap:8px; width:100%; min-height:48px; padding:13px 0 13px var(--luecke-text); text-align:left; border-radius:var(--r-zeile); }
.zl-haupt:focus-visible{ outline-offset:-2px; }
.zl-was{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.zl-titel{ font-size:var(--t-text); line-height:var(--z-text); font-weight:600; text-wrap:pretty; }
.zl-titel-text{
  background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-position:0 55%; background-size:0% 1.5px;
  transition:color var(--d-mittel) var(--standard);
}
.zl-zusatz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); margin-top:1px; text-wrap:pretty; }
.zl-dafuer{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--tinte); margin-top:3px; text-wrap:pretty; }
.zl-dafuer-wort{ font-weight:700; color:var(--art-person-text); }
.zl-hinten{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; font-size:var(--t-klein); line-height:var(--z-text); font-weight:500; color:var(--neben); white-space:nowrap; }
.zl[data-art] .zl-hinten{ color:var(--diese-art-text); font-weight:600; }
.zl-hinten svg.i{ width:15px; height:15px; }

/* erledigt: Strich zieht sich von links nach rechts */
.zl.ist-erledigt .zl-titel{ color:var(--neben); font-weight:500; }
.zl.ist-erledigt .zl-titel-text{ background-size:100% 1.5px; }
.zl.ist-erledigt .zl-zusatz, .zl.ist-erledigt .zl-dafuer{ opacity:.85; }
/* vorbei (Termin, nicht abhakbar): nur leiser, kein Strich */
.zl.vorbei .zl-titel{ color:var(--neben); font-weight:500; }
.zl.vorbei .zl-zeit{ color:var(--neben); }

/* läuft gerade: die einzige getönte Zeile */
.zl.laeuft{ background:var(--akzent-weich); border-radius:var(--r-zeile); margin:0 4px; padding-left:calc(var(--innen) - 4px); padding-right:8px; }
.zl.laeuft::before, .zl.laeuft + .zl::before, .zl-jetzt + .zl::before, .zl + .zl-jetzt::before{ display:none; }
.zl.laeuft .zl-zeit{ color:var(--akzent-tief); }
.zl.laeuft .zl-titel{ color:var(--akzent-tief); font-weight:600; }
.zl.laeuft .zl-zusatz{ color:var(--akzent-tief); opacity:.86; }
.zl.laeuft .zl-symbol{ background:var(--flaeche); color:var(--akzent); }
.zl.laeuft .kreis{ --diese-art-grund:var(--flaeche); }
.zl.laeuft[data-art]{ background:var(--diese-art-grund); }
.zl.laeuft[data-art] .zl-zeit, .zl.laeuft[data-art] .zl-titel, .zl.laeuft[data-art] .zl-zusatz{ color:var(--diese-art-text); }
.zl.laeuft[data-art] .zl-symbol{ background:var(--flaeche); color:var(--diese-art); }
.zl.unbestaetigt .zl-symbol{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--kreis); }

/* Jetzt */
/* Jetzt: eine dunkle Linie mit der Uhrzeit als Pille davor (wie im Zeitband) */
.zl-jetzt{ min-height:0; align-items:center; padding-top:5px; padding-bottom:5px; }
.zl-jetzt .zl-zeit{ position:relative; z-index:1; justify-self:start; padding:0 7px; height:22px; border-radius:11px; background:var(--jetzt); color:var(--auf-jetzt); font-size:12px; line-height:22px; font-weight:600; }
.zl-jetzt .zl-marke{ display:none; }
.jetzt-punkt{ display:none; }
.jetzt-was{ grid-column:2 / -1; display:flex; flex-direction:row; align-items:center; margin-left:-6px; }
.jetzt-was b{ display:none; }
.jetzt-was i{ flex:1; height:1.5px; background:var(--jetzt); }

/* einmalige Bewegungen */
.frisch-erledigt .kreis{ animation:kreis-fuellen 900ms var(--weich) both; }
.frisch-erledigt .kreis .haken{ animation:haken-ziehen 320ms 90ms var(--weich) both; }
.frisch-erledigt .zl-titel-text{ animation:strich-ziehen 360ms 120ms var(--weich) both; }
.frisch-wieder .zl-titel{ animation:einblenden 300ms var(--standard) both; }
.frisch-neu{ animation:einblenden 300ms var(--standard) both; }
@keyframes kreis-fuellen{
  0%{ transform:scale(.8); }
  30%{ transform:scale(1.1); }
  52%{ transform:scale(1); }
  100%{ transform:scale(1); }
}
@keyframes haken-ziehen{ from{ stroke-dashoffset:20; } to{ stroke-dashoffset:0; } }
@keyframes strich-ziehen{ from{ background-size:0% 1.5px; } to{ background-size:100% 1.5px; } }
@keyframes einblenden{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- Zeile ohne Zeitspalte (Übersichten) ---------- */
.lz{ position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:6px 14px 6px var(--innen); text-align:left; }
.lz + .lz::before{ content:""; position:absolute; top:0; right:0; left:var(--innen); height:1px; background:var(--trenner); }
.lz.mit-symbol + .lz.mit-symbol::before{ left:calc(var(--innen) + var(--kante-b)); }
/* runde Symbol-Plakette: helle Fläche der Art, Symbol in der Markenfarbe (ohne Art: leise grau) */
.lz-symbol{ width:var(--plakette); height:var(--plakette); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--diese-art-grund, var(--seite-art-grund, var(--mulde))); color:var(--diese-art, var(--seite-art, var(--neben))); flex:0 0 auto; }
.lz-symbol svg.i{ width:16px; height:16px; }
.lz-was{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lz-titel{ font-size:var(--t-text); line-height:var(--z-text); font-weight:600; text-wrap:pretty; }
.lz-zusatz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); margin-top:1px; text-wrap:pretty; }
.lz-hinten{ font-size:var(--t-klein); font-weight:500; color:var(--neben); white-space:nowrap; }
.lz[data-art] .lz-hinten{ color:var(--diese-art-text); font-weight:600; }
.lz-pfeil{ color:var(--kreis); flex:0 0 auto; margin-right:-4px; }
/* Zahl rechts (Übersichten): „6 offen“ — die Zahl kräftig, das Wort leise */
.lz-zahl{ flex:0 0 auto; white-space:nowrap; font-size:15.5px; line-height:21px; font-weight:650; font-variant-numeric:tabular-nums; color:var(--tinte); }
.lz-zahl span{ font-size:var(--t-klein); font-weight:400; color:var(--neben); margin-left:3px; }
.lz-pfeil svg.i{ width:16px; height:16px; }
button.lz:active{ background:var(--mulde); }
.fl > .fl-zeilen > button.lz:first-child{ border-top-left-radius:var(--r-flaeche); border-top-right-radius:var(--r-flaeche); }
.fl > .fl-zeilen > button.lz:last-child{ border-bottom-left-radius:var(--r-flaeche); border-bottom-right-radius:var(--r-flaeche); }

/* ---------- Knöpfe ---------- */
.kn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:var(--r-pille);
  font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; white-space:nowrap; transition:transform var(--d-kurz) var(--weich), background-color var(--d-kurz) var(--standard); }
.kn:active{ transform:scale(.97); }
.kn svg.i{ width:17px; height:17px; }
.kn-voll{ background:var(--akzent-flaeche); color:var(--auf-akzent); }
.kn-ruhig{ background:var(--mulde); color:var(--tinte); }
@media (hover:hover){ .kn-ruhig:hover{ background:var(--trenner); } }
@media (hover:hover){ .kn-voll:hover{ filter:brightness(1.15); } }
.kn-wort{ background:none; color:var(--akzent); padding:0 10px; }
.kn.breit{ width:100%; }
.wort-knopf{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 8px; margin:0 -8px; border-radius:12px;
  font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; color:var(--akzent); white-space:nowrap; }
.wort-knopf.klein{ font-size:var(--t-klein); }
.wort-knopf svg.i{ width:16px; height:16px; }
.wort-knopf:active{ background:var(--akzent-weich); }

/* ---------- Chip ---------- */
.chip{ display:inline-flex; align-items:center; min-height:44px; padding:0; vertical-align:middle; }
.chip-pille{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 13px 0 11px; border-radius:var(--r-pille); background:var(--mulde);
  font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--tinte); white-space:nowrap; }
.chip-pille svg.i{ width:14px; height:14px; color:var(--neben); }
.chip.an .chip-pille{ background:var(--akzent-weich); color:var(--akzent-tief); }
.chip.an .chip-pille svg.i{ color:var(--akzent); }
.chip.an[data-art] .chip-pille{ background:var(--diese-art-grund); color:var(--diese-art-text); }
.chip.an[data-art] .chip-pille svg.i, .chip[data-art]:not(.aus) .chip-pille svg.i{ color:var(--diese-art); }
.chip.aus .chip-pille{ background:transparent; box-shadow:inset 0 0 0 1px var(--trenner); color:var(--neben); text-decoration:line-through; }
button.chip:active .chip-pille{ transform:scale(.96); }
.chip-pille{ transition:transform var(--d-kurz) var(--weich), background-color var(--d-kurz) var(--standard); }
.chips{ display:flex; flex-wrap:wrap; column-gap:6px; row-gap:0; }

/* ---------- Schalter aus Wörtern ---------- */
.ws{ display:inline-flex; background:var(--mulde); border-radius:22px; padding:0; flex-wrap:wrap; }
.ws-wort{ position:relative; min-height:44px; min-width:44px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--t-mittel); font-weight:600; color:var(--neben); border-radius:22px; }
.ws-wort::before{ content:""; position:absolute; inset:4px; border-radius:18px; background:var(--flaeche); box-shadow:var(--schatten-knopf); opacity:0; transform:scale(.92);
  transition:opacity var(--d-kurz) var(--standard), transform var(--d-mittel) var(--weich); }
.ws-wort span{ position:relative; }
.ws-wort.an{ color:var(--tinte); }
.ws-wort.an::before{ opacity:1; transform:none; }

/* ---------- Leer, Abschnitt ---------- */
.leer{ padding:18px var(--innen) 20px; }
.leer-text{ font-size:var(--t-text); line-height:var(--z-text); font-weight:500; }
.leer-zusatz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); margin-top:4px; max-width:46ch; }
/* Überschrift einer Gruppe: überall dieselbe Form wie der Flächenkopf (15 px fett, nie Großbuchstaben) */
.abschnitt{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; row-gap:0; font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); padding:14px 12px 6px var(--innen); text-wrap:balance; }
.abschnitt:first-child{ padding-top:10px; }

/* ---------- Hinweis (die Meldung unten) ----------
   Wo er steht, rechnet EL.hinweis aus (bottom inline): über Dock, Blatt-Knöpfen
   und den Wörtern beim Aufräumen, nie auf ihnen. Antippen oder Wegwischen schließt ihn. */
.hinweis{
  position:absolute; left:14px; right:14px; bottom:calc(12px + var(--unten-sicher, 0px)); z-index:40;
  display:flex; align-items:center; gap:4px; min-height:52px; padding:6px 6px 6px 18px; border-radius:22px;
  background:var(--umkehr); color:var(--auf-umkehr); box-shadow:var(--schatten-heben);
  opacity:0; transform:translateY(10px); transition:opacity var(--d-kurz) var(--standard), transform var(--d-mittel) var(--weich);
  pointer-events:auto; touch-action:none; -webkit-user-select:none; user-select:none; cursor:default;
}
.hinweis.da{ opacity:1; transform:none; }
.hinweis.geht{ opacity:0; transform:translateY(6px); }
.hinweis.wird-gezogen{ transition:none; }
.hinweis-text{ flex:1; min-width:0; font-size:var(--t-mittel); line-height:20px; font-weight:500; display:flex; flex-direction:column; padding:4px 0; }
.hinweis-zusatz{ font-size:var(--t-klein); line-height:var(--z-klein); opacity:.8; font-weight:400; margin-top:2px; }
.hinweis-knoepfe{ display:flex; flex:0 0 auto; }
.hinweis.lang{ flex-direction:column; align-items:stretch; gap:0; padding:10px 6px 4px 16px; }
.hinweis.lang .hinweis-knoepfe{ justify-content:flex-end; margin-top:2px; }
.hinweis-knopf{ min-height:44px; padding:0 12px; border-radius:12px; font-size:var(--t-mittel); font-weight:700; color:var(--umkehr-akzent); white-space:nowrap; }
.hinweis-knopf:active{ background:color-mix(in srgb, var(--auf-umkehr) 10%, transparent); }

/* ---------- Blätter ---------- */
.schleier{ position:absolute; inset:0; z-index:30; background:var(--abdunkeln); opacity:0; transition:opacity var(--d-blatt) var(--standard); }
.schleier.auf{ opacity:1; }
.blatt{ position:absolute; z-index:31; background:var(--grund); outline:none; box-shadow:var(--schatten-blatt); overflow:hidden; display:flex; flex-direction:column; }
.blatt-inhalt{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
/* von unten: schwebt wie das Dock, 10 px vom Rand */
.blatt-unten{ left:10px; right:10px; bottom:calc(10px + var(--unten-sicher, 0px)); max-height:calc(100% - 64px - var(--oben-sicher, 0px)); border-radius:var(--r-dock);
  transform:translateY(calc(100% + 24px)); transition:transform var(--d-blatt) var(--weich); }
.blatt-unten.auf{ transform:none; }
.blatt-unten.zu{ transition-duration:var(--d-zu); transition-timing-function:cubic-bezier(.4,0,1,1); }
.blatt-griff{ display:flex; justify-content:center; padding:8px 0 2px; cursor:grab; touch-action:none; flex:0 0 auto; }
.blatt-griff span{ width:40px; height:5px; border-radius:3px; background:var(--kreis); opacity:.6; }
/* Seite eines Reiters: der ganze Bildschirm unter der schwebenden Leiste, die Leiste bleibt bedienbar
   (kein Schleier, das Dock wird nicht inert); sie blendet mit einem kurzen Weg nach oben ein */
.blatt-seite{ left:0; right:0; top:var(--status-h, 0px); bottom:0; z-index:15; border-radius:0; box-shadow:none; padding-top:var(--oben-sicher, 0px);
  transform:translateY(10px); opacity:0; transition:transform var(--d-blatt) var(--weich), opacity 180ms linear; }
.blatt-seite.auf{ transform:none; opacity:1; }
.blatt-seite.zu{ transition-duration:var(--d-zu), 160ms; transition-timing-function:cubic-bezier(.4,0,1,1), linear; transform:translateY(6px); }
.schleier.schleier-seite{ display:none; }
/* Mitte (Desktop) */
.blatt-mitte{ left:50%; top:50%; width:min(560px, calc(100% - 48px)); max-height:calc(100% - 64px); border-radius:var(--r-dock);
  transform:translate(-50%, -48%) scale(.97); opacity:0; transition:transform var(--d-blatt) var(--weich), opacity 180ms linear; }
.blatt-mitte.auf{ transform:translate(-50%, -50%); opacity:1; }
.blatt-mitte.zu{ transition-duration:var(--d-zu); }
/* ein Fenster darüber: dieses tritt ganz zurück (kein angeschnittener Rand, EL.blatt.oeffne) */
.blatt-mitte.auf.darunter{ opacity:0; pointer-events:none; }
.blatt-mitte .eintrag-kopf, .blatt-mitte .foto-blatt{ padding-top:14px; }

/* hinter einem Blatt tritt der Tag (oder die Seite) einen Hauch zurück; hinter einer Seite nicht */
.app-handy > .tage, .app-handy > .dock{ transition:transform var(--d-blatt) var(--weich); transform-origin:50% 30%; }
.app-handy.hat-blatt > .tage, .app-handy.hat-blatt > .blatt-seite.auf{ transform:scale(.965); transform-origin:50% 30%; }
.app-handy.hat-blatt > .dock{ transform:scale(.965) translateY(6px); }

@media (prefers-reduced-motion:reduce){
  .blatt-seite, .blatt-unten, .blatt-mitte{ transform:none !important; transition:opacity 180ms linear !important; opacity:0; }
  .blatt-seite.auf, .blatt-unten.auf, .blatt-mitte.auf{ opacity:1; }
  .blatt-mitte, .blatt-mitte.auf{ transform:translate(-50%,-50%) !important; }
  .app-handy.hat-blatt > .tage, .app-handy.hat-blatt > .dock, .app-handy.hat-blatt > .blatt-seite.auf{ transform:none; }
  .frisch-erledigt .kreis, .frisch-erledigt .kreis .haken, .frisch-erledigt .zl-titel-text{ animation:none; }
  .hinweis{ transform:none !important; }
}

/* Geist: fliegt vom Feld in ein Wort */
.el-geist{ position:absolute; z-index:45; pointer-events:none; padding:8px 14px; border-radius:var(--r-pille); background:var(--flaeche); color:var(--tinte);
  font-size:var(--t-mittel); font-weight:600; white-space:nowrap; box-shadow:var(--schatten-heben); max-width:260px; overflow:hidden; text-overflow:ellipsis; }

/* ======================================================================
   Einheitliche Formen (Zusammenführung aller Teile, 25.09.2026)
   ====================================================================== */
/* versteckt heißt versteckt, auch wenn eine Klasse display setzt */
#el-seite [hidden]{ display:none !important; }

/* ---------- Zeile ohne Zeitspalte ----------
   Die Uhrzeitspalte gibt es nur im Zeitstrahl eines Tages. Überall sonst:
   Marke (Kreis 22 px, Symbol 18 px) auf Kante A, Text 30 px dahinter (Kante B) —
   dieselbe Kante wie Listenzeilen mit Symbol und Handlungszeilen im Blatt. */
:root{ --kante-b:44px; }   /* Plakette 32 px + 12 px */
.zl.zl-ohne-zeit{ grid-template-columns:var(--plakette) minmax(0,1fr); }
.zl.zl-ohne-zeit.mit-rechts{ grid-template-columns:var(--plakette) minmax(0,1fr) auto; }
.zl.mit-rechts{ grid-template-columns:var(--spalte-zeit) var(--spalte-mark) minmax(0,1fr) auto; }
.zl-ohne-zeit .zl-kreis{ width:44px; margin:0 -5px 0 -7px; padding-left:7px; }
.zl-ohne-zeit .zl-marke{ justify-content:flex-start; padding-top:9px; }
.zl-ohne-zeit .zl-symbol{ width:30px; height:30px; }
.zl-ohne-zeit.unbestaetigt .zl-symbol{ box-shadow:inset 0 0 0 1.5px var(--kreis); background:transparent; }
.zl-ohne-zeit .zl-haupt{ padding-left:calc(var(--kante-b) - var(--plakette)); }
.zl-ohne-zeit + .zl::before, .zl + .zl-ohne-zeit::before{ left:calc(var(--innen) + var(--kante-b)); }
.zl-haupt.ohne-tun{ cursor:default; }
.zl-pfeil{ flex:0 0 auto; color:var(--kreis); padding-top:3px; }
.zl-pfeil svg.i{ width:16px; height:16px; transition:transform var(--d-mittel) var(--weich); }
.zl-haupt[aria-expanded="true"] .zl-pfeil svg.i{ transform:rotate(180deg); }
.zl-rechts{ display:flex; align-items:center; min-height:44px; padding-left:8px; }
.zl-rechts .wort-knopf{ margin:0 -8px 0 0; }

/* gewählt (eine Zeile in einer Liste, deren Inhalt daneben steht): getönt wie das Laufende */
.zl.ist-gewaehlt, .lz.ist-gewaehlt{ background:var(--akzent-weich); border-radius:14px; }
.zl.ist-gewaehlt{ margin:0 4px; padding-left:calc(var(--innen) - 4px); padding-right:8px; }
.lz.ist-gewaehlt{ margin:0 4px; width:calc(100% - 8px); padding-left:calc(var(--innen) - 4px); padding-right:8px; }
.zl.ist-gewaehlt::before, .zl.ist-gewaehlt + .zl::before, .lz.ist-gewaehlt::before, .lz.ist-gewaehlt + .lz::before{ display:none; }
.ist-gewaehlt .zl-titel, .ist-gewaehlt .lz-titel{ color:var(--akzent-tief); font-weight:600; }
.ist-gewaehlt .zl-zusatz, .ist-gewaehlt .lz-zusatz, .ist-gewaehlt .lz-hinten, .ist-gewaehlt .lz-pfeil, .ist-gewaehlt .lz-symbol, .ist-gewaehlt .zl-zeit{ color:var(--akzent-tief); }

/* Trennlinien zwischen Zeilen verschiedener Art: immer ab der Textkante der unteren Zeile */
.fl-zeilen > .zl + .lz.mit-symbol::before,
.fl-zeilen > .lz + .zl-ohne-zeit::before,
.fl-zeilen > .aktion-offen + .lz.mit-symbol::before,
.fl-zeilen > .aktion-offen + .zl-ohne-zeit::before{ content:""; position:absolute; top:0; right:0; left:calc(var(--innen) + var(--kante-b)); height:1px; background:var(--trenner); }
.fl-zeilen > .zl + .lz:not(.mit-symbol)::before,
.fl-zeilen > .leer + .lz::before,
.fl-zeilen > .aktion-offen + .lz:not(.mit-symbol)::before{ content:""; position:absolute; top:0; right:0; left:var(--innen); height:1px; background:var(--trenner); }
.fl-zeilen > .leer + .lz.mit-symbol::before{ content:""; position:absolute; top:0; right:0; left:calc(var(--innen) + var(--kante-b)); height:1px; background:var(--trenner); }
.fl-zeilen > .ist-gewaehlt + *::before{ display:none; }

/* aufklappende Listenzeile: der Pfeil dreht sich wie an der Zeile */
.lz-pfeil svg.i{ transition:transform var(--d-mittel) var(--weich); }
.lz[aria-expanded="true"] .lz-pfeil svg.i{ transform:rotate(180deg); }

/* frisch gemerkt oder gerade gezeigt: kurz getönt (Zeilen mit und ohne Zeitspalte, Listenzeilen) */
.lz.hervor{ animation:hervor 1400ms var(--standard) both; border-radius:var(--r-zeile); }

/* Nichts verschwindet einfach (Nutzerprüfung Runde 12, Befund 4): erst steht ein Schild an der Zeile
   („Weggelegt“), dann gleitet sie an einen sichtbaren Ort; das Ziel hebt sich kurz (EL.bewegung.schild/hinein) */
.zustand-schild{ position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:3; display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 11px 0 9px; border-radius:14px; background:var(--jetzt); color:var(--auf-jetzt); font-size:var(--t-klein); font-weight:600;
  white-space:nowrap; pointer-events:none; box-shadow:var(--schatten-pille); }
.zustand-schild svg.i{ width:15px; height:15px; }
.zustand-zeigt .zl-titel-text, .zustand-zeigt .lz-titel{ color:var(--neben); }
.nimmt-auf{ animation:nimmt-auf 800ms var(--weich); }
@keyframes nimmt-auf{ 0%{ transform:none; } 30%{ transform:scale(1.08); } 100%{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .nimmt-auf{ animation:none; } }

/* ein Blatt oder eine Seite, die per Programm den Fokus bekommt, trägt keinen Rahmen */
.blatt:focus-visible, [tabindex="-1"]:focus-visible{ outline:none; }

/* Listenzeile als leise Handlung („Etwas vormerken“, „Neue Liste“): Akzent wie ein Wort-Knopf */
.lz.lz-aktion .lz-titel, .lz.lz-aktion .lz-symbol{ color:var(--akzent); }
.lz.lz-aktion .lz-symbol{ background:var(--akzent-weich); }
/* Nie graue Plaketten (Punkt 40): eine Plakette ohne eigene Art trägt die Farbe ihrer Seite (EL.seitenArt, data-seite-art
   an der Seite, der Arbeitsfläche und am Blatt setzt --seite-art); .lz-symbol, .zl-symbol und die Handlungen im Blatt
   nehmen sie, wenn ihre Zeile keine eigene Art hat. Kreise und Text einer Zeile ohne Art färben sich nicht. */
[data-seite-art="termin"]{ --seite-art:var(--art-termin); --seite-art-grund:var(--art-termin-grund); }
[data-seite-art="aufgabe"]{ --seite-art:var(--art-aufgabe); --seite-art-grund:var(--art-aufgabe-grund); }
[data-seite-art="routine"]{ --seite-art:var(--art-routine); --seite-art-grund:var(--art-routine-grund); }
[data-seite-art="ort"]{ --seite-art:var(--art-ort); --seite-art-grund:var(--art-ort-grund); }
[data-seite-art="geld"]{ --seite-art:var(--art-geld); --seite-art-grund:var(--art-geld-grund); }
[data-seite-art="person"]{ --seite-art:var(--art-person); --seite-art-grund:var(--art-person-grund); }
.lz.lz-aktion .lz-titel{ font-weight:600; }
.lz-hinten{ display:inline-flex; align-items:center; gap:5px; }
.lz-hinten svg.i{ width:15px; height:15px; }

/* ---------- Sätze unter Flächen, Leer, Filter ---------- */
.fuss-satz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding:12px var(--innen) 0; text-wrap:pretty; }
.fuss-satz + .fuss-satz{ padding-top:6px; }
.fuss-satz + .fl, .fuss-satz + .abschnitt{ margin-top:10px; }
.fuss-satz.am-computer{ display:flex; align-items:flex-start; gap:8px; }
.fuss-satz.am-computer > .sym{ padding-top:1px; color:var(--akzent); }
.fuss-satz.am-computer svg.i{ width:15px; height:15px; }
.leer-filter{ color:var(--akzent-tief); }
.leer .kn, .leer .wort-knopf{ margin-top:12px; }
.leer .wort-knopf{ margin-left:-8px; }
.filter-zeile{ display:flex; align-items:center; flex-wrap:wrap; column-gap:12px; font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; color:var(--akzent-tief); }
.filter-zeile .wort-knopf{ margin:0; }
/* „Nur: …“ an einer Antwort: ein leiser Satz wie im Leerzustand (Nachbesserung zu Stufe 6b) */
.antwort-nur{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--akzent-tief); margin-top:8px; padding:0 2px; text-wrap:pretty; }

/* ---------- Tasten (Desktop) ---------- */
.taste{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; padding:0 6px; border-radius:7px; background:var(--mulde);
  box-shadow:inset 0 -1px 0 var(--trenner); font-family:var(--schrift); font-size:var(--t-klein); line-height:20px; font-weight:600; color:var(--neben); white-space:nowrap; }

/* ---------- Blatt mit Kopf (die eine Form für alle Blätter) ---------- */
.blatt-mit-kopf{ display:flex; flex-direction:column; min-height:0; }
.blatt-kopf{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:6px; align-items:start; padding:4px 8px 0 calc(8px + var(--innen)); }
.blatt-kopf.mit-kreis{ grid-template-columns:44px minmax(0,1fr) auto; padding-left:10px; }
.blatt-mitte .blatt-kopf{ padding-top:14px; }
.blatt-titel{ font-size:var(--t-gross); line-height:var(--z-gross); font-weight:700; letter-spacing:-.02em; padding-top:6px; text-wrap:balance; }
/* ein Wort, das nicht in die Zeile passt: trennen (deutsche Silbentrennung), sonst im Wort umbrechen; nur an diesem Titel
   (EL.b.titelTrennen, js/kern/bausteine.js; auch .eintrag-titel und .el-auswahl-titel) */
.wort-trennen{ overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
.blatt-meta{ padding-top:4px; font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); }
.blatt-meta p + p{ margin-top:1px; }
/* nur der Titel weicht „Schließen“ aus, die Zeilen darunter nehmen die ganze Breite (wie im Eintrags-Blatt; Runde 12, Schritt 7) */
.blatt-kopf-text{ display:contents; }
.blatt-kopf .blatt-titel{ grid-column:1; grid-row:1; }
.blatt-kopf .blatt-meta{ grid-column:1 / -1; grid-row:2; }
.blatt-kopf > .eintrag-fertig{ grid-column:2; grid-row:1; }
.blatt-kopf.mit-kreis > :first-child{ grid-column:1; grid-row:1; }
.blatt-kopf.mit-kreis .blatt-titel{ grid-column:2; }
.blatt-kopf.mit-kreis .blatt-meta{ grid-column:2 / -1; }
.blatt-kopf.mit-kreis > .eintrag-fertig{ grid-column:3; }
.blatt-rumpf{ overflow-y:auto; min-height:0; padding:16px 12px 14px; overscroll-behavior:contain; }
/* scrollt der Rumpf, läuft sein Inhalt unter dem Kopf weich aus (die 14 px oben sind ungescrollt leer) */
.blatt-rumpf{ background:var(--grund); }
.blatt-standard:not(.blatt-fuellt) .blatt-rumpf::before{ content:""; position:sticky; top:-16px; display:block; height:12px; margin:-16px -12px 4px; z-index:8; pointer-events:none;
  background:linear-gradient(to bottom, var(--grund), color-mix(in srgb, var(--grund) 0%, transparent)); }
.blatt-rumpf > .fl + .fl, .blatt-rumpf > * + .fl, .blatt-rumpf > .fl + *{ margin-top:16px; }
.blatt-rumpf > .fuss-satz, .blatt-rumpf > .el-leise{ padding-left:var(--innen); padding-right:var(--innen); }
/* Blatt, das die Höhe füllt (mitKopf({ fuellt: true })): der Rumpf scrollt nicht, sein Inhalt füllt ihn und scrollt in sich */
.blatt-unten.blatt-fuellt{ height:calc(100% - 64px - var(--oben-sicher, 0px)); }
.blatt-mitte.blatt-fuellt{ height:min(880px, calc(100% - 64px)); }
.blatt-fuellt .blatt-inhalt > .blatt-mit-kopf{ flex:1 1 auto; }
.blatt-fuellt .blatt-rumpf{ flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; padding-bottom:0; }
.blatt-fuellt .blatt-rumpf > *{ flex:1 1 auto; min-height:0; }

/* ---------- Pfad: „Ziel › Unterziel › Projekt“ (b.pfad) ----------
   Bricht zwischen den Teilen um („›“ bleibt am Teil davor), höchstens zwei Zeilen; mehr rückt in „…“.
   Teile zum Antippen im Akzent, „hier“ in der Tinte. */
.pfad{ display:flex; flex-wrap:wrap; align-items:center; max-width:100%; margin-left:-8px; padding-left:8px; font-size:var(--t-mittel); line-height:var(--z-mittel); }
.pfad-glied{ display:inline-flex; align-items:center; flex:0 1 auto; min-width:0; max-width:100%; }
.pfad-glied[hidden]{ display:none !important; }
.pfad-teil, .pfad-mehr{ flex:0 1 auto; min-width:44px; display:inline-flex; align-items:center; min-height:44px; padding:0 8px; margin:0 -8px; border-radius:12px;
  font-weight:600; color:var(--akzent); text-align:left; overflow-wrap:anywhere; }
.pfad-teil:active, .pfad-mehr:active{ background:var(--akzent-weich); }
.pfad-teil:focus-visible, .pfad-mehr:focus-visible{ outline:2px solid var(--akzent); outline-offset:-2px; }
.pfad-mehr{ justify-content:center; letter-spacing:.08em; }
.pfad-mehr::before{ content:"…"; }
.pfad-glied-mehr::after{ content:"›"; padding:0 8px 0 16px; color:var(--neben); }
.pfad-trenner{ flex:0 0 auto; padding:0 8px; color:var(--neben); white-space:pre; }
.pfad-hier{ flex:0 1 auto; min-width:0; font-weight:600; color:var(--tinte); padding-right:8px; overflow-wrap:anywhere; }
.pfad-zusatz{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); text-wrap:pretty; }

/* ---------- Druckansicht ---------- */
.blatt-mitte.blatt-druck{ width:min(820px, calc(100% - 48px)); }
.druck-satz{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); padding:0 var(--innen) 12px; text-wrap:pretty; }
.druck .ws{ margin:0 0 12px var(--innen); }
.druck-vorschau{ display:flex; justify-content:center; padding:4px 8px 4px; }
.druck-papier{ width:100%; max-width:640px; background:var(--papier); color:var(--papier-text); border-radius:6px; padding:40px 48px 44px;
  box-shadow:0 0 0 1px var(--papier-strich), 0 10px 24px -16px rgba(20,30,26,.35); font-size:var(--t-mittel); line-height:var(--z-mittel); }
.druck-papier h1{ font-size:var(--t-desk-titel); line-height:26px; font-weight:700; }
.druck-papier .druck-unter{ font-size:var(--t-klein); line-height:var(--z-klein); margin:2px 0 16px; opacity:.85; }
.druck-papier h2{ font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:700; margin-top:16px; padding-bottom:4px; border-bottom:1px solid var(--papier-strich); }
.druck-papier p{ margin-top:6px; }
.druck-papier ul{ list-style:none; display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.druck-papier li{ display:flex; gap:10px; align-items:baseline; }
.druck-papier .druck-kasten{ width:12px; height:12px; flex:0 0 auto; border-radius:3px; box-shadow:inset 0 0 0 1.5px var(--papier-text); opacity:.7; transform:translateY(1px); }
/* angekreuzt: Erledigtes auf dem Papier (Klasse druck-kasten erledigt) */
.druck-papier .druck-kasten.erledigt{ position:relative; }
.druck-papier .druck-kasten.erledigt::after{ content:""; position:absolute; left:3.5px; top:1px; width:4px; height:7px; border:solid var(--papier-text); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
/* oben, über dem Papier: „Drucken“ und „Als PDF sichern“ sind ohne Scrollen erreichbar */
.druck-knoepfe{ display:flex; justify-content:flex-start; flex-wrap:wrap; gap:8px; padding:0 var(--innen) 14px; }

/* ---------- Antwort mit Handlung ---------- */
.antwort-fuss .antwort-aktion{ margin-right:8px; }

/* ── css/neu.css ── */
/* ==========================================================================
   EasyLife Prototyp · Neues anlegen (Kern, js/kern/neu.js)
   Das Blatt „Neue Routine“ … mit sichtbaren Vorgaben und „Anlegen“ fest unten; die Felder stehen
   als Überschrift über einer weißen Karte (wie jede Gruppe in „Wolke“). Die Zeile „+ Neue …“ ist eine
   Listenzeile als leise Handlung (.lz-aktion, Plus in der Plakette) — dieselbe Form wie „Neue Zeitkapsel“.
   Nur Tokens, keine Farbwerte; Tippflächen ≥ 44 px.
   ========================================================================== */

/* ---------- Blatt: der Rumpf scrollt, „Anlegen“ steht fest darunter ---------- */
.neu-fuss{ flex:0 0 auto; padding:8px 12px 12px; }
.blatt-mitte .neu-fuss{ padding:10px 20px 18px; }
.neu-fuss .kn{ min-height:50px; font-size:var(--t-text); }
.neu-huelle .blatt-rumpf{ padding-bottom:10px; }

/* ---------- Karten im Blatt ---------- */
.neu-rahmen{ padding:8px 10px 10px; }
.neu-rahmen .neu-feld{ padding:0 14px; }
.neu-wahl .ws{ max-width:100%; }
.neu-chips{ padding:4px 10px 4px var(--innen); }
.neu-chips + .neu-chips{ padding-top:0; margin-top:-6px; }
/* kurze Chips (Mo, Di …) bleiben mindestens 44 px breit */
.neu-chips .chip{ min-width:44px; }
.neu-chips .chip-pille{ min-width:44px; justify-content:center; }
.neu-chips + .neu-rahmen{ padding-top:2px; }
.neu-leise{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding:0 var(--innen) 12px; text-wrap:pretty; }
/* was noch fehlt: ruhig, aber deutlich (Frage statt Warnfarbe) */
.neu-fehler{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--akzent-tief); padding:0 var(--innen) 12px; text-wrap:pretty; }
.neu-rahmen + .neu-fehler{ margin-top:-2px; }
.blatt-rumpf > .neu-satz{ padding-top:12px; }

/* ---------- Liste zum Ergänzen (Schritte, Punkte) ----------
   Nummer auf der Plakette (Kante A), Text auf Kante B, rechts „Entfernen“ (44 px) */
.neu-liste-zeile{ position:relative; display:grid; grid-template-columns:var(--plakette) minmax(0,1fr) 44px; column-gap:calc(var(--kante-b) - var(--plakette)); align-items:center;
  min-height:48px; padding:0 4px 0 var(--innen); border-radius:14px; }
.neu-liste-zeile + .neu-liste-zeile::before{ content:""; position:absolute; top:0; right:0; left:calc(var(--innen) + var(--kante-b)); height:1px; background:var(--trenner); }
.neu-liste-zeile:focus-within{ background:var(--mulde); }
.neu-liste-zeile:focus-within::before, .neu-liste-zeile:focus-within + .neu-liste-zeile::before{ opacity:0; }
.neu-liste-nr{ justify-self:center; font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); }
.neu-liste-eingabe{ min-width:0; width:100%; height:44px; border:0; outline:none; background:transparent; padding:0;
  font:inherit; font-size:var(--t-text); line-height:var(--z-text); font-weight:600; color:var(--tinte); }
.neu-liste-eingabe::placeholder{ color:var(--neben); font-weight:500; opacity:1; }
.neu-liste-weg{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:22px; color:var(--neben); }
.neu-liste-weg svg.i{ width:16px; height:16px; }
.neu-liste-weg:active{ background:var(--trenner); }
.neu-liste-hinzu{ grid-template-columns:var(--plakette) minmax(0,1fr) auto; }
.neu-liste-plus{ justify-self:center; display:flex; color:var(--akzent); }
.neu-liste-plus svg.i{ width:18px; height:18px; }
.neu-liste-dazu{ min-height:44px; padding:0 12px; border-radius:12px; font-size:var(--t-mittel); font-weight:700; color:var(--akzent); }
.neu-liste-dazu:active{ background:var(--akzent-weich); }

/* Fristen je Schritt (Vorlage): − Zahl + „Tage vorher“ */
.neu-frist{ grid-column:2 / -1; display:flex; align-items:center; gap:6px; margin-top:-2px; padding:0 0 8px; }
.neu-frist-knopf{ width:44px; height:44px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:22px; background:var(--mulde);
  font-size:18px; line-height:1; font-weight:600; color:var(--tinte); }
.neu-frist-knopf:active{ background:var(--trenner); }
.neu-frist-zahl{ width:56px; height:44px; flex:0 0 auto; border:0; outline:none; border-radius:14px; background:var(--feld); text-align:center; padding:0;
  font:inherit; font-size:var(--t-mittel); font-weight:600; color:var(--tinte); }
.neu-frist-zahl:focus{ box-shadow:inset 0 0 0 1.5px var(--akzent); }
.neu-frist-wort{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding-left:4px; }

/* ---------- „Gehört zu“: die Stellen, eingerückt nach Ebene ---------- */
.lz.neu-ort-wahl{ padding-left:calc(var(--innen) + var(--kante-b) + var(--ebene, 0) * 14px); }
.lz.neu-ort-wahl::before, .lz + .lz.neu-ort-wahl::before{ left:calc(var(--innen) + var(--kante-b)); }
.lz.neu-ort-wahl.ist-gewaehlt{ padding-left:calc(var(--innen) + var(--kante-b) - 4px + var(--ebene, 0) * 14px); }

/* ---------- die Zeile „+ Neue …“ und der Knopf in einer Werkzeugleiste ---------- */
.lz.lz-neu .lz-titel{ font-weight:600; }
.neu-knopf{ white-space:nowrap; }

/* ── css/ziehen.css ── */
/* ==========================================================================
   EasyLife Prototyp · Eine Bewegung für alles Ziehen (Kern, zu js/kern/ziehen.js)
   Die Zahlen (Heben, Drücken, Dauer) setzt js/kern/ziehen.js aus EL.ziehen.W als
   CSS-Variablen --zieh-… (auch die Federkurve --zieh-platz-kurve); hier stehen nur Formen. Nur Tokens, nur transform
   und opacity. Den Maßstab des gehobenen Geists setzt der Kern je Bild (Feder), CSS gibt ihm keinen eigenen.
   ========================================================================== */

/* ziehbar: mit der Maus eine Hand, mit dem Finger bleibt Scrollen frei (erst Halten hebt an) */
.zieh-bar{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; cursor:grab; }
.zieh-halten{ touch-action:manipulation; }
.zieh-sofort{ touch-action:none; }
/* der Finger hält: der Eintrag gibt ein wenig nach — gleich geht es los */
.zieh-drueckt{ transform:scale(var(--zieh-druecken, .975)); transition:transform var(--d-zieh-aufnehmen, 180ms) var(--weich); }
/* die Quelle tritt zurück, solange der Eintrag am Finger hängt */
.zieh-quelle{ opacity:.3; transition:opacity 160ms var(--standard); }
/* in einer Reihe mit Lücke (EL.ziehen.luecke) tritt sie ganz zurück: die Lücke zeigt, wohin es kommt */
.zieh-quelle.zieh-luecke-quelle{ opacity:0; }

/* der Geist: außen genau unter dem Finger, innen gehoben mit weichem Schatten */
.zieh-geist{ position:absolute; z-index:60; margin:0; pointer-events:none; will-change:transform; }
.zieh-geist > .zieh-geist-innen{ position:relative !important; inset:auto !important; left:0 !important; top:0 !important; right:auto !important; bottom:auto !important;
  width:100% !important; height:100% !important; margin:0 !important; box-sizing:border-box; transform:none; transform-origin:50% 40%;
  box-shadow:var(--schatten-heben), var(--schatten-zeile); will-change:transform; opacity:1; cursor:grabbing;
  transition:none !important; }   /* der Geist folgt je Bild; ein geerbter Übergang (z. B. eines Blocks) liefe sonst hinterher */
.zieh-geist.ohne-ziel > .zieh-geist-innen{ opacity:.9; }
html.zieht, html.zieht *{ cursor:grabbing !important; -webkit-user-select:none; user-select:none; }

/* eine Zeile am Finger ist eine weiße Karte: in ihrer Gruppe steht sie auf deren Karte und hätte allein keinen Grund
   (vorher schwebte im Brett am Handy nur Text über den Zahlen; Runde 12, Schritt 7) */
.zieh-geist > .zl.zieh-geist-innen, .zieh-geist > .lz.zieh-geist-innen{ background:var(--flaeche); border-radius:var(--r-zeile); }
.zieh-geist > .zl.zieh-geist-innen::before, .zieh-geist > .lz.zieh-geist-innen::before{ display:none; }
/* eine Pille: der Schatten gehört an die Pille, nicht an ihren Kasten */
.zieh-geist > .zl-pille.zieh-geist-innen{ background:none; box-shadow:none; border-radius:0; }
.zieh-geist > .zl-pille.zieh-geist-innen::after{ box-shadow:var(--schatten-heben), var(--schatten-pille); }

/* das Schild über der Karte am Finger: wohin sie kommt (EL.ziehen.sagen) */
.zieh-geist-satz{ position:absolute; left:0; bottom:calc(100% + 8px); z-index:2; padding:3px 10px; border-radius:var(--r-pille); background:var(--umkehr); color:var(--auf-umkehr);
  font-size:var(--t-klein); line-height:var(--z-klein); font-weight:650; white-space:nowrap; box-shadow:var(--schatten-pille); pointer-events:none; }
.zieh-geist.zieh-geist-vorbei > .zieh-geist-innen{ box-shadow:var(--schatten-heben), inset 0 0 0 2px var(--kreis); opacity:.9; }

/* Platz machen: Nachbarn gleiten zur Seite, als Feder (--zieh-platz-kurve setzt js/kern/ziehen.js) */
.zieh-weicht{ transition:transform var(--d-zieh-platz, 300ms) var(--zieh-platz-kurve, var(--weich)); }

@media (prefers-reduced-motion:reduce){
  .zieh-drueckt{ transform:none; transition:none; }
  .zieh-geist > .zieh-geist-innen{ transform:none !important; }
  .zieh-quelle{ transition:none; }
  .zieh-weicht{ transition:none; }
}

/* ── css/huelle.css ── */
/* ==========================================================================
   EasyLife Wolke · Hülle
   Aus dem Prototyp (design/neustart/runde-12/prototyp/css/huelle.css) bleiben Seite und Bühne; die
   Vorführleiste, das gezeichnete Handy und „Das kannst du ausprobieren“ gibt es in der echten App nicht.
   Die App füllt den Schirm: am Handy die Handy-Form, am Rechner der Desktop.
   Dazu die Seiten vor der App (Anmeldung, Einladung, Mitmachen): eine Spalte aus den Bausteinen.
   ========================================================================== */

html, body{ height:100%; }
body{ margin:0; background:var(--grund); color:var(--tinte); font-family:var(--schrift); }
#el-seite{ position:fixed; inset:0; display:flex; flex-direction:column; font-family:var(--schrift); color:var(--tinte); }
:where(#el-seite) *{ box-sizing:border-box; }
:where(#el-seite) :where(button){ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; }
:where(#el-seite) :where(h1,h2,h3,p,ol,ul){ margin:0; padding:0; }
:where(#el-seite) :where(:focus-visible){ outline:2px solid var(--akzent); outline-offset:2px; border-radius:10px; }

/* das Sprite der eigenen Symbole (EL.symbol) nimmt keinen Platz ein */
.el-sprite-halter{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- Bühne ---------- */
.buehne{ flex:1 1 auto; min-height:0; position:relative; overflow:hidden; background:var(--grund); }
.buehne.vollbild{ padding:0; }
.buehne.vollbild > .app-handy{ position:absolute; inset:0; width:auto; height:auto; border-radius:0; }
.buehne.desktop > .app-desk{ position:absolute; inset:0; }

/* ---------- Seiten vor der App: eine ruhige Spalte, mittig ---------- */
.buehne.konto{ overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.app-konto{ min-height:100%; background:var(--grund);
  padding:calc(env(safe-area-inset-top, 0px) + 40px) var(--rand) calc(env(safe-area-inset-bottom, 0px) + 40px); }
.konto-spalte{ max-width:520px; margin:0 auto; }
.konto-marke{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:700; color:var(--neben); padding:0 4px; margin-bottom:6px; }
.app-konto .seite-titel{ padding:0 4px; }
.konto-satz{ font-size:15.5px; line-height:22px; color:var(--neben); padding:4px 4px 0; text-wrap:pretty; }
.konto-inhalt{ margin-top:22px; }
.konto-knoepfe{ display:flex; flex-direction:column; gap:10px; padding:12px; }
.konto-fehler{ padding-top:12px; }
.konto-recht{ display:flex; flex-wrap:wrap; align-items:center; column-gap:6px; margin-top:24px; padding:0 4px; }
/* zwei Wörter, zwei Knöpfe: ein leiser Punkt trennt sie (Impressum · Datenschutzerklärung) */
.konto-recht-punkt{ color:var(--neben); }
/* zwei Wort-Knöpfe rechts in einer Zeile (Betrieb: Sperren, Rückweg-Link) */
.el-knoepfe-reihe{ display:inline-flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:0 8px; }
/* lange Schlüssel und Links ohne Leerzeichen brechen um, statt aus der Karte zu laufen */
.el-umbrechen{ overflow-wrap:anywhere; }

/* ── css/handy.css ── */
/* ==========================================================================
   EasyLife Prototyp · Handy (Kern)
   Heute als Zeitband, die schwebende Leiste (Feld und fünf Reiter), Blätter,
   Seiten, Sperrbildschirm. Maße für 390 × 844; im Vollbild füllt die App den Schirm.
   Aussehen „Wolke“ (Vorbild: design/neustart/runde-10/leinwand/project/Wolke-Heute.dc.html).
   ========================================================================== */

.app-handy{ position:relative; overflow:hidden; background:var(--grund); isolation:isolate;
  --oben-sicher:0px; --unten-sicher:0px; --status-h:47px; --oben-frei:calc(var(--status-h) + 8px); }
.app-handy.vollbild{ --status-h:0px; --oben-sicher:env(safe-area-inset-top, 0px); --unten-sicher:env(safe-area-inset-bottom, 0px); --oben-frei:calc(var(--oben-sicher) + 10px); }

/* Statusleiste (nur im Rahmen; ein echtes Handy hat seine eigene) */
.statusleiste{ position:absolute; inset:0 0 auto 0; height:47px; z-index:25; padding:16px 28px 0 34px; display:flex; justify-content:space-between;
  font-size:16px; line-height:20px; font-weight:600; color:var(--tinte); pointer-events:none; background:var(--grund); }
/* unter der Mitte des Docks endet der Inhalt: nichts scheint unter dem Dock hervor */
.app-handy::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:calc(24px + var(--unten-sicher) + var(--tastatur, 0px) + var(--dock-h, 124px) / 2); background:var(--grund); z-index:19; pointer-events:none; }
.app-handy.vollbild::after{ height:calc(10px + var(--unten-sicher) + var(--tastatur, 0px) + var(--dock-h, 124px) / 2); }
.statusleiste svg{ height:12px; width:auto; display:block; }
.statusleiste .sr{ display:flex; gap:6px; align-items:center; }
.app-handy.vollbild .statusleiste{ display:none; }
.home-balken{ position:absolute; left:50%; bottom:8px; width:134px; height:5px; margin-left:-67px; border-radius:3px; background:var(--tinte); z-index:60; pointer-events:none; }
.app-handy.vollbild .home-balken{ display:none; }

/* ---------- Tage: wischen zwischen gestern, heute, morgen ---------- */
/* overflow:clip statt hidden: auch scrollIntoView darf die Spur nicht seitlich verschieben (sonst bleibt ein Versatz) */
.tage{ position:absolute; top:var(--status-h); left:0; right:0; bottom:0; overflow:hidden; overflow:clip; touch-action:pan-y; }
.app-handy.vollbild .tage{ top:var(--oben-sicher); }
.tage-spur{ display:flex; height:100%; width:300%; transform:translateX(-33.3333%); will-change:transform; }
.tage-spur.gleitet{ transition:transform 300ms var(--weich); }
.tag-seite{ width:33.3333%; height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain;
  padding:4px var(--rand) calc(var(--dock-h, 124px) + 48px + var(--unten-sicher)); scrollbar-width:none; }
.tag-seite::-webkit-scrollbar{ display:none; }

/* Wochentag groß (30 px), darunter das Datum; rechts leise die Tag-Schritte; darunter das Lagebild */
.tag-kopf{ padding:0 0 0 4px; }
.tag-titelzeile{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.tag-datum{ display:flex; flex-direction:column; align-items:flex-start; min-height:44px; padding:4px 0 0; text-align:left; border-radius:12px; min-width:0; }
.tag-datum-tag{ font-size:var(--t-seite); line-height:var(--z-seite); font-weight:700; letter-spacing:-.02em; }
.tag-datum-rest{ font-size:15.5px; line-height:22px; font-weight:400; color:var(--neben); margin-top:2px; }
.tag-rel{ font-weight:600; }
.tag-rel.anders{ color:var(--tinte); }
.tag-schritte{ display:flex; align-items:center; flex:0 0 auto; margin:2px -8px 0 0; }
.tag-schritt{ display:inline-flex; align-items:center; gap:2px; min-height:44px; padding:0 8px; border-radius:var(--r-pille); font-size:var(--t-klein); font-weight:600; color:var(--neben); white-space:nowrap; }
.tag-schritt svg.i{ width:16px; height:16px; }
.tag-schritt:active{ background:var(--mulde); }
.tag-schritt.zurueck-heute{ color:var(--akzent); }
.tag-lage{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--tinte); margin-top:10px; max-width:40ch; text-wrap:pretty; padding-right:12px; }
.tag-flaechen{ margin-top:16px; }
.tag-flaechen > .fl + .fl{ margin-top:16px; }
.tag-leer{ padding:14px var(--innen) 16px; font-size:var(--t-mittel); color:var(--neben); }

/* ---------- Dock: die eine schwebende Schicht ---------- */
/* die Leiste weicht einer Seite, die ein ganzes Werkzeug ist (EL.leisteSetzen): sie gleitet nach unten weg */
.app-handy > .dock{ transition:transform var(--d-blatt) var(--weich), visibility 0s linear 0s; }
.app-handy.leiste-weg > .dock{ transform:translateY(calc(100% + 60px)); visibility:hidden; transition:transform var(--d-blatt) var(--weich), visibility 0s linear var(--d-blatt); }
.app-handy.leiste-weg::after{ opacity:0; }
.app-handy.leiste-weg .seite-inhalt, .app-handy.leiste-weg .seite-inhalt.fuellt{ padding-bottom:calc(28px + var(--unten-sicher)); }
.app-handy.leiste-weg .seite-inhalt.fuellt{ padding-bottom:var(--unten-sicher); }
/* die schwebende weiße Leiste: oben das Feld, darunter die fünf Reiter (beim Tippen klappen sie weg) */
.dock{ position:absolute; left:12px; right:12px; bottom:calc(22px + var(--unten-sicher) + var(--tastatur, 0px)); z-index:20; background:var(--flaeche); border-radius:var(--r-dock);
  padding:8px; box-shadow:var(--schatten-dock); display:flex; flex-direction:column; }
.app-handy.vollbild .dock{ bottom:calc(10px + var(--unten-sicher) + var(--tastatur, 0px)); }
.klappe{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-mittel) var(--weich); }
.klappe.offen{ grid-template-rows:1fr; }
.klappe > .klappe-innen{ min-height:0; overflow:hidden; }
.worte-klappe.offen{ grid-template-rows:1fr; }
.worte{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); height:52px; margin-top:4px; }
.worte button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px; min-width:44px; border-radius:18px;
  font-size:var(--t-reiter); line-height:15px; font-weight:500; color:var(--neben); white-space:nowrap; }
.worte button svg.i{ width:21px; height:21px; stroke-width:1.8; }
.worte button:active{ background:var(--mulde); color:var(--tinte); }
.worte button.an, .worte button[aria-current="page"]{ color:var(--tinte); font-weight:700; }
.worte button.an svg.i{ stroke-width:2.1; }

/* das Feld: hellgrau in der weißen Leiste, rechts die runde dunkle Mikrofon-Taste (beim Tippen: das Wort, z. B. „Merken“) */
.feld{ display:flex; align-items:center; gap:0; height:46px; border-radius:23px; background:var(--feld); padding:0 1px 0 16px; }
.feld-eingabe{ flex:1 1 auto; min-width:0; height:44px; border:0; outline:none; background:transparent; font:inherit; font-size:15.5px; color:var(--tinte); padding:0; }
.feld-eingabe::placeholder{ color:var(--neben); opacity:1; }
.feld:focus-within{ box-shadow:inset 0 0 0 1.5px var(--akzent); }
/* Foto: ein leises Kamera-Symbol im Feld (im Vorbild fehlt es; die Funktion bleibt) */
.feld-foto{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:22px; color:var(--neben); flex:0 0 auto; }
.feld-foto svg.i{ width:19px; height:19px; stroke-width:1.9; }
.feld-foto:active{ background:var(--trenner); }
.feld-sag{ position:relative; min-width:44px; height:44px; padding:0 13px; border:4px solid transparent; border-radius:22px; background:var(--akzent-flaeche); background-clip:padding-box;
  color:var(--auf-akzent); font-size:var(--t-mittel); font-weight:700; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; transition:transform var(--d-kurz) var(--weich); }
/* sichtbar ist ein Kreis bzw. eine Pille von 36 px Höhe (der Rand ist durchsichtig); getippt werden 44 px */
.feld-sag.nur-symbol{ padding:0; width:44px; }
.feld-sag .feld-sag-symbol{ display:flex; }
.feld-sag .feld-sag-symbol svg.i{ width:17px; height:17px; }
/* in Ruhe: nur das Mikrofon; die Taste heißt dann „Sag“ (aria-label) */
.feld-sag.nur-symbol .feld-sag-text{ display:none; }
.feld-sag:not(.nur-symbol) .feld-sag-symbol{ display:none; }
.feld-sag:active{ transform:scale(.95); }
.feld-sag.hoert{ background-color:var(--akzent-weich); color:var(--akzent-tief); }

/* Aufsatz über dem Feld: Chips beim Tippen, Antworten, „Sag", Hinweise der App */
.aufsatz{ padding:4px 6px 8px 8px; }
.aufsatz-zeile{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding:2px 2px 4px; text-wrap:pretty; }
.aufsatz-zeile b{ color:var(--tinte); font-weight:600; }
.aufsatz .chips{ margin:-4px 0 0; }
.aufsatz-kopf{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:32px; }
.aufsatz-herkunft{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); display:inline-flex; align-items:center; gap:6px; }
.aufsatz-herkunft svg.i{ width:14px; height:14px; }
.antwort{ max-height:min(46vh, 360px); overflow-y:auto; padding:0 2px 2px; }
.antwort-text{ font-size:var(--t-text); line-height:var(--z-text); font-weight:600; margin-top:2px; text-wrap:pretty; }
.antwort-zeilen{ margin-top:6px; }
.antwort-zeilen li{ position:relative; font-size:var(--t-mittel); line-height:var(--z-mittel); padding:5px 0 5px 14px; border-top:1px solid var(--trenner); text-wrap:pretty; }
.antwort-zeilen li::before{ content:""; position:absolute; left:2px; top:14px; width:5px; height:5px; border-radius:50%; background:var(--kreis); }
.antwort-fuss{ display:flex; gap:16px; padding:4px 2px 0; }
.antwort-fuss .wort-knopf{ margin:0; }
.app-notiz{ padding:2px 2px 0; }
.app-notiz p{ font-size:var(--t-mittel); line-height:var(--z-mittel); }
.app-notiz .knopf-reihe{ display:flex; gap:8px; margin-top:8px; }

/* „Sag": zuhören (simuliert) */
.sag-kopf{ display:flex; align-items:center; gap:12px; min-height:44px; }
.pegel{ display:flex; align-items:center; gap:3px; height:24px; }
.pegel i{ width:4px; height:8px; border-radius:2px; background:var(--akzent); transform-origin:center; animation:pegel 1.1s ease-in-out infinite; }
.pegel i:nth-child(2){ animation-delay:.15s; } .pegel i:nth-child(3){ animation-delay:.3s; } .pegel i:nth-child(4){ animation-delay:.45s; } .pegel i:nth-child(5){ animation-delay:.6s; }
@keyframes pegel{ 0%,100%{ transform:scaleY(.6); } 50%{ transform:scaleY(2.2); } }
@media (prefers-reduced-motion:reduce){ .pegel i{ animation:none; transform:scaleY(1.4); } }
.sag-titel{ flex:1; font-size:var(--t-text); font-weight:600; }
.beispiele{ margin:2px -6px 2px; max-height:min(42vh, 340px); overflow-y:auto; }
.beispiel{ display:flex; align-items:flex-start; gap:10px; width:100%; min-height:44px; padding:11px 8px; border-radius:14px; text-align:left; font-size:var(--t-mittel); line-height:var(--z-mittel); }
.beispiel svg.i{ width:16px; height:16px; color:var(--akzent); margin-top:3px; }
.beispiel:active{ background:var(--mulde); }
.beispiel small{ display:block; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }

/* ---------- Seiten (die vier Wörter) ---------- */
.seiten-stapel{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; }
.seite{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--grund); transition:transform 300ms var(--weich), opacity 300ms var(--weich); }
.seite.rechts{ transform:translateX(100%); }
.seite.links{ transform:translateX(-28%); opacity:.4; }
@media (prefers-reduced-motion:reduce){ .seite{ transition:opacity 160ms linear; } .seite.rechts{ transform:none; opacity:0; } .seite.links{ transform:none; opacity:0; } }
/* Kopf einer Seite: links „‹ Zurück“ (auf den fünf Reitern nicht, dort steht „Nur: …“), rechts „Einstellungen“;
   darunter der Titel groß (30 px) und der Untertitel leise, wie im Vorbild */
.seite-kopf{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:2px 12px 0; }
.seite-zurueck, .seite-rechts{ display:inline-flex; align-items:center; gap:2px; min-height:44px; padding:0 12px 0 4px; border-radius:var(--r-pille); font-size:var(--t-mittel); font-weight:600; color:var(--akzent); }
.seite-zurueck svg.i{ width:20px; height:20px; }
.seite-rechts{ color:var(--neben); padding:0 10px; gap:6px; margin-left:auto; font-size:var(--t-klein); }
.seite-rechts svg.i{ width:17px; height:17px; }
.seite-zurueck:active, .seite-rechts:active{ background:var(--mulde); }
.seite-kopf .nur-filter{ margin:0 0 0 -2px; }
/* Kopf, Titel, Untertitel und Filter behalten ihre Höhe; kürzer wird nur der Inhalt (er scrollt) */
.seite-titelzeile{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 var(--rand) 0 calc(var(--rand) + 4px); }
.seite-werkzeuge{ display:flex; align-items:center; gap:2px; flex:0 0 auto; margin-right:-6px; }
.seite-werkzeuge:empty{ display:none; }
.seite-werkzeuge .wort-knopf{ margin:0; }
.seite-filter{ flex:0 0 auto; padding:4px var(--rand) 0 calc(var(--rand) + 4px); }
.seite-titel{ font-size:var(--t-seite); line-height:var(--z-seite); font-weight:700; letter-spacing:-.02em; text-wrap:balance; }
.seite-untertitel{ flex:0 0 auto; font-size:15.5px; line-height:22px; color:var(--neben); padding:2px var(--rand) 0 calc(var(--rand) + 4px); text-wrap:pretty; }
/* ohne Netz: „Das ist der zuletzt geholte Stand.“ wie der Untertitel, darunter (js/handy/seiten.js, netzZeigen) */
.seite-nicht-frisch{ flex:0 0 auto; font-size:15.5px; line-height:22px; color:var(--neben); padding:2px var(--rand) 0 calc(var(--rand) + 4px); text-wrap:pretty; }
.seite-nicht-frisch[hidden]{ display:none; }
.seite-inhalt{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:20px var(--rand) calc(var(--dock-h, 124px) + 48px + var(--unten-sicher)); overscroll-behavior:contain; scrollbar-width:none; }
.seite-inhalt::-webkit-scrollbar{ display:none; }
/* was ins Bild geholt wird (scrollIntoView, Fokus), bleibt über der schwebenden Leiste */
.seite-inhalt, .tag-seite{ scroll-padding-bottom:calc(var(--dock-h, 124px) + 40px + var(--unten-sicher)); }
.app-handy.leiste-weg .seite-inhalt{ scroll-padding-bottom:16px; }
.seite-inhalt > .fl + .fl, .seite-inhalt > * + .fl{ margin-top:16px; }
/* scrollt der Inhalt, läuft er unter dem Kopf weich aus statt an einer harten Kante (oben 14 px Luft, ungescrollt leer) */
.seite-inhalt{ background:var(--grund); }
.seite-inhalt:not(.fuellt)::before{ content:""; position:sticky; top:-20px; display:block; height:12px; margin:-20px calc(-1 * var(--rand)) 8px; z-index:8; pointer-events:none;
  background:linear-gradient(to bottom, var(--grund), color-mix(in srgb, var(--grund) 0%, transparent)); }
/* eine Ansicht, die die Höhe füllt (fuellt, ctx.fuellt): die Seite scrollt nicht, die Ansicht in sich */
.seite-inhalt.fuellt{ overflow:hidden; display:flex; flex-direction:column; padding-bottom:calc(var(--dock-h, 124px) + 30px + var(--unten-sicher)); }
.seite-inhalt.fuellt > *{ flex:1 1 auto; min-height:0; }
/* kompakter Kopf einer Seite, die die Höhe füllt: Titel 20 px, Untertitel in derselben Zeile */
.seite.kompakt .seite-titelzeile{ justify-content:flex-start; column-gap:10px; min-height:40px; }
.seite.kompakt .seite-titel{ flex:0 0 auto; font-size:var(--t-desk-titel); line-height:28px; }
.seite.kompakt .seite-titelzeile > .seite-untertitel{ flex:1 1 auto; min-width:0; padding:0; font-size:var(--t-klein); line-height:var(--z-klein); }
.seite.kompakt .seite-werkzeuge{ margin-left:auto; }
.seite.kompakt .seite-inhalt.fuellt{ padding-top:8px; }
/* Untertitel als Pfad: eine Zeile zum Antippen, darunter ein Satz */
.seite-untertitel.mit-pfad{ padding-top:0; }
.seite-untertitel.mit-pfad .pfad-zusatz{ margin-top:-2px; }
.nur-filter{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 10px; margin-right:-6px; border-radius:var(--r-pille); font-size:var(--t-klein); font-weight:600; color:var(--neben); white-space:nowrap; }
.nur-filter b{ color:var(--tinte); font-weight:700; }
.nur-filter svg.i{ width:15px; height:15px; }
.nur-filter:active{ background:var(--mulde); }
/* .fuss-satz steht jetzt in css/bausteine.css */

/* ---------- Eintrag-Blatt ---------- */
.eintrag{ display:flex; flex-direction:column; min-height:0; }
.eintrag-kopf{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; column-gap:6px; align-items:start; padding:4px 8px 0 10px; }
.eintrag-kopf.ohne-kreis{ grid-template-columns:minmax(0,1fr) auto; padding-left:calc(8px + var(--innen)); }
.eintrag-kopf .zl-kreis{ margin:0; padding:5px 0 0 5px; height:44px; }
.eintrag-kopf .kreis{ width:34px; height:34px; box-shadow:inset 0 0 0 8px var(--diese-art-grund, var(--mulde)), inset 0 0 0 10px var(--diese-art, var(--kreis)); }
.eintrag-kopf .ist-erledigt .kreis, .eintrag-kopf .zl-kreis[aria-pressed="true"] .kreis{ box-shadow:none; }
.eintrag-kopf .kreis .haken{ width:19px; height:19px; }
.eintrag-titel{ font-size:var(--t-gross); line-height:var(--z-gross); font-weight:700; letter-spacing:-.02em; padding-top:6px; text-wrap:balance; }
.eintrag-kopf .eintrag-meta{ padding:4px 0 0; }
.eintrag-titel.ist-erledigt{ color:var(--neben); text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--kreis); }
.eintrag-fertig{ min-height:44px; padding:0 14px; border-radius:var(--r-pille); font-size:var(--t-mittel); font-weight:600; color:var(--akzent); flex:0 0 auto; }
.eintrag-meta{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); }
.eintrag-meta p + p{ margin-top:1px; }
.eintrag-rumpf{ overflow-y:auto; min-height:0; padding:16px 12px 12px; overscroll-behavior:contain; }
.eintrag-rumpf > .fl + .fl{ margin-top:16px; }
.eintrag-rumpf > .fl.eintrag-handlungen + .fl.eintrag-handlungen{ margin-top:12px; }
/* Wolke (Runde 12, Schritt 7): nur der Titel weicht „Schließen“ aus; Datum und Zusatz darunter nehmen die ganze Breite
   („Donnerstag, 24. September“ in einer Zeile statt in zweien) */
.eintrag-kopf-text{ display:contents; }
.eintrag-kopf > .zl-kreis{ grid-column:1; grid-row:1; }
.eintrag-kopf .eintrag-titel{ grid-column:2; grid-row:1; }
.eintrag-kopf .eintrag-meta{ grid-column:2 / -1; grid-row:2; }
.eintrag-kopf > .eintrag-fertig{ grid-column:3; grid-row:1; }
.eintrag-kopf.ohne-kreis .eintrag-titel{ grid-column:1; }
.eintrag-kopf.ohne-kreis .eintrag-meta{ grid-column:1 / -1; }
.eintrag-kopf.ohne-kreis > .eintrag-fertig{ grid-column:2; }
.aktion{ display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:7px 14px 7px var(--innen); text-align:left; position:relative; }
.aktion + .aktion::before, .aktion-offen + .aktion::before{ content:""; position:absolute; top:0; right:0; left:calc(var(--innen) + var(--kante-b)); height:1px; background:var(--trenner); }
/* Handlungen im Blatt: dieselbe runde Plakette wie in Listen, leise grau */
.aktion > .sym{ width:var(--plakette); height:var(--plakette); border-radius:50%; background:var(--seite-art-grund, var(--mulde)); color:var(--seite-art, var(--neben)); }
.aktion > .sym svg.i{ width:16px; height:16px; }
.aktion-wort{ flex:1; font-size:var(--t-text); font-weight:600; }
/* der Wert rechts bricht um, statt abgeschnitten zu werden */
.aktion-wert{ flex:0 1 auto; font-size:var(--t-mittel); line-height:20px; color:var(--neben); text-align:right; max-width:55%; text-wrap:pretty; }
.aktion-wert.gesetzt{ color:var(--akzent); font-weight:600; }
button.aktion:active{ background:var(--mulde); }
.fl-zeilen > button.aktion:first-child{ border-top-left-radius:var(--r-flaeche); border-top-right-radius:var(--r-flaeche); }
.fl-zeilen > button.aktion:last-child{ border-bottom-left-radius:var(--r-flaeche); border-bottom-right-radius:var(--r-flaeche); }
.aktion-offen{ padding:0 14px 12px calc(var(--innen) + var(--kante-b)); position:relative; }
.aktion-offen .ws{ max-width:100%; }
.aktion-offen .chips{ margin-top:-4px; }
.aktion-offen .feld{ margin-top:6px; background:var(--mulde); }
.entwurf{ padding:4px 12px 12px var(--innen); }
.entwurf-text{ font-size:var(--t-mittel); line-height:var(--z-mittel); padding:10px 12px; border-radius:var(--r-zeile); background:var(--mulde); text-wrap:pretty; white-space:pre-wrap; }
.entwurf .knopf-reihe{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.laeuft-zeile{ display:flex; align-items:center; gap:10px; font-size:var(--t-mittel); color:var(--neben); padding:4px 12px 12px var(--innen); }
.laeuft-punkt{ width:8px; height:8px; border-radius:50%; background:var(--akzent); animation:atmen 1.2s ease-in-out infinite; }
@keyframes atmen{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
.agenda-zeile{ display:grid; grid-template-columns:var(--plakette) 1fr; column-gap:calc(var(--kante-b) - var(--plakette)); align-items:start; padding:0 12px 0 var(--innen); min-height:48px; position:relative; }
.agenda-zeile .zl-kreis{ width:44px; margin:0 -5px 0 -7px; padding-left:7px; }
.agenda-zeile .agenda-text{ padding:13px 0; font-size:var(--t-text); line-height:var(--z-text); font-weight:500; text-wrap:pretty; }
.agenda-zeile.ist-erledigt .agenda-text{ color:var(--neben); text-decoration:line-through; }
.agenda-zeile + .agenda-zeile::before{ content:""; position:absolute; top:0; right:0; left:calc(var(--innen) + var(--kante-b)); height:1px; background:var(--trenner); }
/* leiser Satz in einer Fläche oder im Rumpf eines Blatts (Kern-Klasse el-leise) */
.el-leise{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding:8px var(--innen) 4px; text-wrap:pretty; }

/* ---------- Nur das (Fokus) ----------
   Ohne Wecker: der Eintrag groß, darunter „Jetzt angehen, mit Wecker“. Mit Wecker (.mit-uhr):
   alles mittig, der Ring läuft im Uhrzeigersinn ab; Farbe nur für das Aktive (Akzent), angehalten grau. */
.fokus{ position:absolute; inset:0; z-index:50; background:var(--grund); display:flex; flex-direction:column; padding:calc(var(--status-h) + var(--oben-sicher) + 8px) 20px calc(28px + var(--unten-sicher));
  opacity:0; transition:opacity var(--d-mittel) var(--standard); container-type:size; }
.fokus.auf{ opacity:1; }
.fokus-kopf{ display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:44px; flex:0 0 auto; }
.fokus-kopf-rechts{ display:flex; align-items:center; gap:16px; }
.fokus-kopf .wort-knopf{ margin:0 -8px; }
.fokus-kopf .fokus-ton{ color:var(--neben); }
.fokus-marke{ font-size:var(--t-klein); font-weight:700; color:var(--akzent); }
.fokus-mitte{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; padding:8px 6px; overflow-y:auto; scrollbar-width:none; }
.fokus-mitte::-webkit-scrollbar{ display:none; }
.fokus-titel{ font-size:var(--t-gross); line-height:var(--z-gross); font-weight:700; letter-spacing:-.018em; text-wrap:balance; transform:translateY(8px); opacity:0; transition:transform 420ms var(--weich) 80ms, opacity 300ms var(--standard) 80ms; }
.fokus.auf .fokus-titel{ transform:none; opacity:1; }
.fokus-zusatz{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); margin-top:8px; text-wrap:pretty; }
.fokus-dafuer{ margin-top:22px; background:var(--flaeche); border-radius:var(--r-flaeche); box-shadow:var(--schatten-gruppe); padding:12px var(--innen) 10px; text-align:left; }
.fokus-dafuer h4{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); margin-bottom:4px; }
.fokus-dafuer p{ font-size:var(--t-text); line-height:var(--z-text); }
.fokus-dafuer .fokus-dafuer-zeile{ display:flex; align-items:flex-start; gap:10px; font-size:var(--t-mittel); line-height:var(--z-mittel); padding:3px 0; text-wrap:pretty; }
.fokus-dafuer-zeile > .sym{ color:var(--neben); padding-top:3px; }
.fokus-dafuer-zeile svg.i{ width:16px; height:16px; }
.fokus-fuss{ display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }
.fokus-fuss .kn{ min-height:54px; font-size:var(--t-text); border-radius:var(--r-pille); }
.fokus-fuss-reihe{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.fokus-fuss-reihe .kn{ width:100%; padding:0 10px; }
.fokus-ansage{ position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

/* mit Wecker: mittig */
.fokus.mit-uhr .fokus-mitte{ align-items:center; text-align:center; }
.fokus.mit-uhr .fokus-dafuer{ width:100%; max-width:380px; margin-top:18px; }
.fokus-uhr{ --ring:clamp(150px, 30cqh, 236px); position:relative; width:var(--ring); height:var(--ring); flex:0 0 auto; margin:22px auto 2px; }
.fokus-uhr .fokus-ring{ width:100%; height:100%; display:block; }
.fokus-uhr-innen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 18%; }
.fokus-rest{ font-size:calc(var(--ring) * .2); line-height:1.12; font-weight:600; letter-spacing:-.02em; color:var(--tinte); }
.fokus-rest-unter{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); margin-top:2px; }
.fokus-uhr-symbol{ color:var(--diese-art, var(--akzent)); }
.fokus-uhr-symbol svg.i{ width:calc(var(--ring) * .18); height:calc(var(--ring) * .18); stroke-width:1.75; }
.modus-fertig .fokus-uhr + .fokus-titel, .modus-um .fokus-titel{ margin-top:0; }
.modus-fertig .fokus-titel{ margin-top:14px; }

/* der Ring: Spur leise, Bogen im Akzent, läuft im Uhrzeigersinn ab */
.fokus-ring{ transform:rotate(-90deg); overflow:visible; }
.fokus-ring circle{ fill:none; }
.fokus-ring-spur{ stroke:var(--trenner); }
.fokus-ring-bogen{ stroke:var(--diese-art, var(--akzent)); stroke-linecap:round; transition:stroke-dasharray 260ms linear, stroke-dashoffset 260ms linear, stroke var(--d-mittel) var(--standard), opacity var(--d-kurz) linear; }
.modus-pause .fokus-ring-bogen, .ist-pause .fokus-ring-bogen{ stroke:var(--kreis); }
.modus-um .fokus-ring-spur, .ist-um .fokus-ring-spur{ stroke:var(--diese-art-grund, var(--akzent-weich)); }
.fokus-ring.voll .fokus-ring-bogen{ stroke:var(--diese-art, var(--akzent)); }
@media (prefers-reduced-motion:reduce){ .fokus-ring-bogen{ transition:none; } }

/* „Jetzt angehen“: vier Dauern, eine eigene (im Blatt und in „Nur das“) */
.fokus-wahl{ display:flex; flex-direction:column; gap:10px; text-align:left; }
.fokus-wahl-titel{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:700; color:var(--akzent); }
.fokus-dauern{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
.fokus-dauern .kn{ min-width:0; padding:0 4px; }
.fokus-eigen{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:8px; row-gap:6px; }
.fokus-eigen-wort{ grid-column:1 / -1; font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); }
.fokus-eigen-stepper{ display:inline-flex; align-items:center; background:var(--mulde); border-radius:var(--r-zeile); }
.fokus-schritt{ width:44px; height:44px; border-radius:var(--r-zeile); display:inline-flex; align-items:center; justify-content:center; font-size:22px; line-height:1; font-weight:500; color:var(--tinte); }
.fokus-schritt:active{ background:var(--trenner); }
.fokus-eigen-wert{ min-width:64px; text-align:center; font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; }
.fokus-eigen-los{ width:100%; }
.fokus-wahl-satz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); text-wrap:pretty; }
.fokus-wahl-andere{ display:flex; flex-direction:column; align-items:flex-start; background:var(--akzent-weich); color:var(--akzent-tief); border-radius:var(--r-zeile); padding:9px 12px 2px; font-size:var(--t-klein); line-height:var(--z-klein); text-wrap:pretty; }
.fokus-wahl-andere .wort-knopf{ margin:0 -8px; color:var(--akzent-tief); }
.aktion-offen .fokus-wahl{ padding-top:2px; }
.fokus-mitte > .fokus-wahl.im-schirm{ margin-top:22px; }
.fokus-gleich{ padding:4px 12px 12px calc(var(--innen) + var(--kante-b)); }

/* nach „Fertig“ im Projekt */
.fokus-projekt{ width:100%; max-width:420px; margin-top:18px; text-align:left; }

/* ---------- Fokuszeit oben auf Heute und im Blatt ---------- */
.fl.fokus-flaeche{ background:var(--akzent-weich); padding:0; box-shadow:none; }
.fokus-banner{ display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:10px 12px 10px var(--innen); border-radius:var(--r-flaeche); text-align:left; color:var(--akzent-tief); }
.fokus-banner:active{ background:color-mix(in srgb, var(--akzent) 10%, transparent); }
.fokus-banner-ring, .fokus-blatt-ring, .sperr-fokus-ring{ flex:0 0 auto; display:block; }
.fokus-banner-ring svg{ width:32px; height:32px; display:block; }
.fokus-banner .fokus-ring-spur{ stroke:var(--flaeche); }
.fokus-banner-was, .fokus-blatt-was{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.fokus-banner-titel{ font-size:var(--t-text); line-height:var(--z-text); font-weight:600; text-wrap:pretty; }
.fokus-banner-zusatz{ font-size:var(--t-klein); line-height:var(--z-klein); margin-top:1px; }
.fokus-banner-pfeil{ flex:0 0 auto; color:var(--akzent-tief); }
.fokus-banner-pfeil svg.i{ width:16px; height:16px; }
.fokus-blatt-zeile{ display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:8px 12px 8px var(--innen); text-align:left; border-radius:18px 18px 0 0; }
.fokus-blatt-zeile:active{ background:var(--mulde); }
.fokus-blatt-ring svg{ width:44px; height:44px; display:block; }
.fokus-blatt-titel{ font-size:var(--t-text); line-height:var(--z-text); font-weight:600; color:var(--akzent-tief); }
.fokus-blatt-zusatz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.fokus-blatt .fokus-banner-pfeil{ color:var(--kreis); }
.fokus-blatt-knoepfe{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; padding:2px 12px 12px var(--innen); }
.fokus-blatt-knoepfe .kn{ width:100%; padding:0 10px; }

/* ---------- Sperrbildschirm: laufende Zeit, am Ende „Geschafft?“ ---------- */
.sperr-fokus{ margin-top:22px; }
.sperr.mit-fokus .sperr-fokus + .mitteilung, .mitteilung + .mitteilung{ margin-top:10px; }
.sperr-fokus-oeffnen{ display:block; width:100%; min-height:44px; text-align:left; }
.sperr-fokus-zeile{ display:flex; align-items:center; gap:12px; margin-top:8px; padding-bottom:8px; }
.sperr-fokus-ring svg{ width:44px; height:44px; display:block; }
.sperr-fokus .fokus-ring-spur{ stroke:var(--sperr-karte-trenner); }
.sperr-fokus .fokus-ring-bogen{ stroke:var(--sperr-akzent); }
.sperr-fokus.ist-pause .fokus-ring-bogen{ stroke:var(--sperr-karte-neben); }
.sperr-fokus-was{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.sperr-fokus-was .mitteilung-titel{ margin-top:0; }
.sperr-fokus-was .mitteilung-text{ color:var(--sperr-karte-neben); }
.sperr-fokus-uhr{ font-size:30px; line-height:36px; font-weight:600; letter-spacing:-.01em; color:var(--sperr-karte-text); }
.sperr-fokus.ist-um{ padding-bottom:6px; }

/* ---------- Foto: gezeichnete Beispiel-Dokumente ---------- */
.foto-blatt{ padding:4px 12px 14px; }
.foto-kopf{ display:flex; align-items:center; justify-content:space-between; padding:0 0 2px 4px; }
.foto-kopf h3{ font-size:var(--t-gross); line-height:var(--z-gross); font-weight:700; }
.foto-satz{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); padding:2px 4px 12px; text-wrap:pretty; }
.docs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.doc-wahl{ display:flex; flex-direction:column; gap:8px; align-items:stretch; text-align:left; border-radius:16px; padding:0; }
.doc-wahl:active .papier{ transform:scale(.97); }
.doc-name{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; padding:0 2px; }
.papier{ position:relative; aspect-ratio:3/4; border-radius:8px; background:var(--papier); box-shadow:0 1px 2px rgba(20,30,26,.18), 0 8px 16px -10px rgba(20,30,26,.35); padding:9% 9% 0; overflow:hidden;
  color:var(--papier-text); font-family:var(--schrift); transition:transform var(--d-kurz) var(--weich); }
.papier .p-kopf{ font-size:7px; line-height:9px; font-weight:700; letter-spacing:.02em; }
.papier .p-zeile{ font-size:5.5px; line-height:8px; }
.papier .p-strich{ height:3px; border-radius:2px; background:var(--papier-strich); margin-top:5px; }
.papier .p-strich.k{ width:62%; } .papier .p-strich.m{ width:84%; }
.papier .p-fett{ font-weight:700; }
.papier.bon{ background:var(--papier-bon); padding:10% 12% 0; }
.papier.bon .p-zeile{ display:flex; justify-content:space-between; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:5.5px; }
.papier.gross{ width:min(64%, 230px); aspect-ratio:3/3.3; margin:4px auto 0; padding:7% 8% 0; }
.papier.vorschau{ width:112px; flex:0 0 auto; }
.gelesen-kopf{ display:flex; align-items:center; gap:14px; padding:0 4px 4px; }
.gelesen-kopf .foto-satz{ padding:0; }
.papier.gross .p-kopf{ font-size:13px; line-height:17px; }
.papier.gross .p-zeile{ font-size:10.5px; line-height:15px; }
.papier.gross .p-strich{ height:5px; margin-top:8px; }
.scan{ position:absolute; left:0; right:0; top:0; height:26%; background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--akzent) 22%, transparent) 80%, color-mix(in srgb, var(--akzent) 55%, transparent)); animation:scan 900ms var(--standard) both; }
@keyframes scan{ from{ transform:translateY(-100%); } to{ transform:translateY(390%); } }
@media (prefers-reduced-motion:reduce){ .scan{ display:none; } }
.gelesen{ margin-top:14px; }

/* ---------- Sperrbildschirm (Orts-Erinnerung) ---------- */
.sperr{ position:absolute; inset:0; z-index:70; background:var(--sperr-grund); color:var(--sperr-text); display:flex; flex-direction:column; align-items:center;
  padding:calc(var(--oben-sicher) + 58px) 12px calc(30px + var(--unten-sicher)); opacity:0; transition:opacity 260ms var(--standard); }
.sperr.auf{ opacity:1; }
.sperr-schloss{ color:var(--sperr-text); opacity:.85; margin-bottom:6px; }
.sperr-datum{ font-size:17px; line-height:22px; font-weight:600; opacity:.92; }
.sperr-uhr{ font-size:84px; line-height:92px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.mitteilung{ width:100%; margin-top:26px; background:var(--sperr-karte); color:var(--sperr-karte-text); border-radius:22px; padding:12px 14px 6px; text-align:left;
  transform:translateY(-14px) scale(.98); opacity:0; transition:transform 520ms var(--weich) 280ms, opacity 300ms var(--standard) 280ms; }
.sperr.auf .mitteilung{ transform:none; opacity:1; }
.mitteilung-kopf{ display:flex; align-items:center; gap:8px; font-size:13px; line-height:18px; color:var(--sperr-karte-neben); }
.app-marke{ width:20px; height:20px; border-radius:6px; background:var(--sperr-akzent); color:var(--sperr-karte); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.mitteilung-kopf span:last-child{ margin-left:auto; }
.mitteilung-titel{ font-size:16px; line-height:22px; font-weight:700; margin-top:6px; }
.mitteilung-text{ font-size:15px; line-height:21px; }
.mitteilung-knoepfe{ display:flex; gap:6px; margin-top:8px; border-top:1px solid var(--sperr-karte-trenner); padding-top:4px; }
.mitteilung-knoepfe button{ flex:1; min-height:44px; border-radius:12px; font-size:15px; font-weight:700; color:var(--sperr-akzent); }
.mitteilung-knoepfe button:active{ background:var(--sperr-karte-trenner); }
.widget{ align-self:flex-start; width:calc(50% - 6px); margin-top:12px; background:var(--sperr-karte); color:var(--sperr-karte-text); border-radius:22px; padding:12px 14px 14px; }
.widget small{ display:block; font-size:13px; line-height:18px; color:var(--sperr-karte-neben); font-weight:600; }
.widget b{ display:block; font-size:16px; line-height:21px; margin-top:2px; }
.widget span{ display:block; font-size:13px; line-height:18px; color:var(--sperr-karte-neben); margin-top:2px; }
.sperr-fuss{ margin-top:auto; font-size:13px; line-height:18px; opacity:.8; text-align:center; }
.sperr-oeffnen{ min-height:44px; padding:0 18px; border-radius:22px; color:var(--sperr-text); font-size:15px; font-weight:600; }

/* frisch gemerkte Zeile kurz hervorheben, wenn sie erst ins Bild gescrollt wurde */
.zl.hervor{ animation:hervor 1400ms var(--standard) both; border-radius:var(--r-zeile); }
@keyframes hervor{ 0%,30%{ background:var(--akzent-weich); } 100%{ background:transparent; } }
/* im Zeitband leuchtet die Karte selbst, nicht der Streifen daneben */
@keyframes hervor-karte{ 0%,30%{ background:var(--akzent-weich); } 100%{ background:var(--flaeche); } }
.fl-zeitband .zl.hervor, .fl-ohne .zl.hervor{ animation:none; background:transparent; }
.fl-zeitband .zl.hervor::after, .fl-ohne .zl.hervor::after{ animation:hervor-karte 1400ms var(--standard) both; }
.paket-zeile:not(.einstellungen-schalter){ align-items:flex-start; }
.paket-zeile .ws{ flex:0 0 auto; margin-top:2px; }
.app-notiz-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.app-notiz-kopf b{ font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:700; padding-top:11px; }
.app-notiz .app-notiz-satz{ color:var(--tinte); margin-top:2px; }
.tag-filter{ display:flex; align-items:center; gap:12px; margin-top:4px; font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; color:var(--akzent-tief); }
.tag-filter .wort-knopf{ margin:0; }
/* Schalter aus Wörtern im Eintrags-Blatt: gleich breite Felder, nie umbrechend */
.aktion-offen .ws{ display:grid; width:100%; }
.aktion-offen .ws-n2, .aktion-offen .ws-n4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.aktion-offen .ws-n3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.aktion-offen .ws-n5{ grid-template-columns:repeat(5, minmax(0,1fr)); }
.aktion-offen .ws-wort{ padding:0 8px; }
/* Zeiger am großen Ring und das einmalige Aufziehen beim Start */
.fokus-ring-zeiger{ transition:transform 260ms linear, opacity var(--d-kurz) linear; }
.fokus-ring-zeiger circle{ fill:var(--flaeche); stroke:none; }
.fokus-ring.aufziehen .fokus-ring-bogen{ transition:stroke-dasharray 820ms var(--weich), stroke-dashoffset 820ms var(--weich); }
.fokus-ring.aufziehen .fokus-ring-zeiger{ transition:transform 820ms var(--weich), opacity var(--d-kurz) linear; }
@media (prefers-reduced-motion:reduce){ .fokus-ring-zeiger, .fokus-ring.aufziehen .fokus-ring-bogen, .fokus-ring.aufziehen .fokus-ring-zeiger{ transition:none; } }
/* nach „Erledigt“ im Projekt: kleiner Ring, „Rückgängig“ als Wort in der Zeile, der nächste Schritt hat Platz */
.modus-fertig .fokus-uhr{ --ring:clamp(88px, 15cqh, 128px); margin-top:4px; }
.modus-fertig .fokus-uhr-innen .fokus-rest-unter{ display:none; }
.fokus-erledigt-zeile{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:14px; margin-top:2px; }
.fokus-erledigt-zeile .wort-knopf{ margin:0 -8px; }
.modus-fertig .fokus-uhr-symbol svg.i{ width:calc(var(--ring) * .36); height:calc(var(--ring) * .36); stroke-width:2.25; }

/* ======================================================================
   Zeitband (Heute am Handy, der Tag links und rechts am Desktop)
   Jeder Eintrag ist eine weiße Karte rechts neben seiner Uhrzeit, so hoch, wie er dauert
   (--band-h aus EL.heute.zeileFuer). Die laufende Karte füllt sich in der hellen Fläche ihrer Art
   bis zur Jetzt-Linie (--anteil); die Linie ist dunkel, die Uhrzeit steht als Pille davor.
   ====================================================================== */
.fl.fl-zeitband{ background:none; box-shadow:none; padding:0; border-radius:0; }
.fl.fl-zeitband > .fl-zeilen{ display:flex; flex-direction:column; gap:8px; background:none; box-shadow:none; padding:0; border-radius:0; }
.tag-flaechen > .fl-zeitband + .fl-zeitband, .tag-flaechen > .fl-zeitband + .fl-tageszeit, .tag-flaechen > .fl-tageszeit + .fl-tageszeit,
.tag-flaechen > .fl-tageszeit + .fl-zeitband, .tag-flaechen > .fl-frueher + *{ margin-top:8px; }
.fl-zeitband .zl{ grid-template-columns:var(--band-zeit) 48px minmax(0,1fr); padding:0 12px 0 0; min-height:var(--band-h, 46px); isolation:isolate; margin:0; }
.fl-zeitband .zl.mit-rechts{ grid-template-columns:var(--band-zeit) 48px minmax(0,1fr) auto; }
.fl-zeitband .zl::before{ display:none; }
.fl-zeitband .zl::after{ content:""; position:absolute; z-index:-1; top:0; bottom:0; left:var(--band-zeit); right:0; border-radius:var(--r-zeile); background:var(--flaeche); box-shadow:var(--schatten-zeile); }
.fl-zeitband .zl-zeit{ padding:14px 0 0 4px; font-size:12.5px; line-height:18px; color:var(--neben); }
.fl-zeitband .zl-zeit.kommt{ color:var(--neben); }
.zl-zeit-bis{ position:absolute; left:4px; bottom:0; font-size:12.5px; line-height:18px; color:var(--neben); }
.fl-zeitband .zl-marke, .fl-zeitband .zl-kreis{ height:46px; }
.fl-zeitband .zl-marke{ padding:8px 0 0 8px; }
.fl-zeitband .zl-kreis{ width:44px; margin:0 -10px 0 0; padding:8px 0 0 8px; }
.fl-zeitband .zl-haupt{ padding:12.5px 0 12.5px 0; min-height:46px; }
.fl-zeitband .zl-titel{ font-size:14.5px; line-height:21px; }
.fl-zeitband .zl-zusatz{ font-size:12.5px; line-height:18px; }
/* läuft: kein Streifen, die Karte selbst füllt sich */
.fl-zeitband .zl.laeuft{ background:none; margin:0; padding:0 16px 0 0; border-radius:0; }
.fl-zeitband .zl.laeuft::after{ border-radius:var(--r-karte); box-shadow:var(--schatten-karte);
  background:linear-gradient(to bottom, var(--diese-art-grund, var(--akzent-weich)) 0, var(--diese-art-grund, var(--akzent-weich)) calc(var(--anteil, 1) * 100%), var(--flaeche) calc(var(--anteil, 1) * 100%)); }
.fl-zeitband .zl.laeuft .zl-zeit, .fl-zeitband .zl.laeuft .zl-titel, .fl-zeitband .zl.laeuft .zl-zusatz{ color:inherit; }
.fl-zeitband .zl.laeuft .zl-zusatz{ color:var(--neben); opacity:1; }
.fl-zeitband .zl.laeuft .zl-zeit{ color:var(--neben); }
.fl-zeitband .zl.laeuft .zl-marke{ padding:14px 0 0 14px; }
.fl-zeitband .zl.laeuft .zl-symbol{ width:34px; height:34px; background:var(--flaeche); color:var(--diese-art, var(--akzent)); }
.fl-zeitband .zl.laeuft .zl-symbol svg.i{ width:18px; height:18px; }
.fl-zeitband .zl.laeuft.plakette-ungefuellt .zl-symbol{ background:var(--diese-art-grund, var(--akzent-weich)); }
.fl-zeitband .zl.laeuft .zl-haupt{ padding:13px 0 12px 6px; }
.fl-zeitband .zl.laeuft .zl-titel{ font-size:17px; line-height:23px; font-weight:650; }
.fl-zeitband .zl.laeuft .zl-zusatz{ font-size:13px; }
/* Zu jeder Uhrzeit ohne Überlappung (js/handy/heute.js, laufendOrdnen): die Linie endet vor Schrift auf ihrer Höhe
   (--jetzt-rechts), „noch …“ steht unter der Linie, unter dem Kopf oder über der Linie (--rest-oben), die Karte wächst, wenn
   Kopf und „noch …“ sonst nicht passen (--band-min), die Pille bleibt vor der Karte davor und danach (--pille-oben), und eine
   Uhrzeit der Zeitspalte, die die Pille deckt, tritt zurück. Ohne Messung gelten die Werte des Prototyps. */
.fl-zeitband .zl.mit-jetzt{ min-height:max(var(--band-h, 46px), var(--band-min, 0px)); }
.band-jetzt{ position:absolute; z-index:1; left:calc(var(--band-zeit) - 6px); right:var(--jetzt-rechts, 0px); top:calc(var(--anteil) * 100%); height:1.5px; margin-top:-.75px; background:var(--jetzt); pointer-events:none; }
.band-jetzt-zeit{ position:absolute; z-index:2; left:0; top:var(--pille-oben, calc(var(--anteil) * 100%)); transform:translateY(-50%); height:22px; padding:0 7px; border-radius:11px; background:var(--jetzt); color:var(--auf-jetzt);
  font-size:12px; line-height:22px; font-weight:600; pointer-events:none; }
.zl.jetzt-deckt-anfang > .zl-zeit{ visibility:hidden; }
.zl.jetzt-deckt-anfang > .zl-zeit > .zl-zeit-bis{ visibility:visible; }
.zl.jetzt-deckt-ende > .zl-zeit > .zl-zeit-bis{ visibility:hidden; }
.band-rest{ position:absolute; left:calc(var(--band-zeit) + 8px); top:var(--rest-oben, min(calc(var(--anteil) * 100% + 14px), calc(100% - 52px))); display:flex; align-items:baseline; gap:6px; pointer-events:none; }
.band-rest b{ font-size:29px; line-height:34px; font-weight:650; letter-spacing:-.02em; color:var(--tinte); }
.band-rest-wort{ font-size:14px; line-height:20px; color:var(--neben); }
.band-rest b + .band-rest-wort{ margin-left:-4px; margin-right:2px; font-size:15px; }
.band-bis{ position:absolute; right:16px; bottom:14px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); pointer-events:none; }
/* erledigt oder vorbei: leiser */
.fl-zeitband .zl.ist-erledigt .zl-titel, .fl-zeitband .zl.vorbei .zl-titel{ color:var(--neben); }
/* die Jetzt-Linie als eigene Zeile (keine lange Karte läuft) */
.fl-zeitband .zl-jetzt{ min-height:22px; padding:0; margin:2px 0; grid-template-columns:var(--band-zeit) minmax(0,1fr); }
.fl-zeitband .zl-jetzt::after{ display:none; }
.fl-zeitband .zl-jetzt .zl-zeit{ padding:0 7px; font-size:12px; line-height:22px; color:var(--auf-jetzt); }
.fl-zeitband .zl-jetzt .jetzt-was{ grid-column:2; margin-left:-6px; }
.fl-zeitband .tag-leer{ background:var(--flaeche); border-radius:var(--r-zeile); box-shadow:var(--schatten-zeile); margin-left:var(--band-zeit); }

/* Früher heute: eine weiße Pille, aufgeklappt stehen darunter die Karten */
.fl-frueher > .fl-kopf{ display:block; padding:0; min-height:0; }
.frueher-knopf{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 16px; border-radius:22px; background:var(--flaeche); box-shadow:var(--schatten-pille);
  font-size:13.5px; line-height:20px; font-weight:500; color:var(--neben); text-align:left; }
.frueher-knopf .frueher-haken{ color:var(--art-routine); }
.frueher-knopf .frueher-haken svg.i{ width:16px; height:16px; stroke-width:2.2; }
.frueher-knopf .frueher-pfeil{ margin-left:auto; }
.frueher-knopf .frueher-pfeil svg.i{ width:16px; height:16px; transition:transform var(--d-mittel) var(--weich); }
.frueher-knopf[aria-expanded="true"] .frueher-pfeil svg.i{ transform:rotate(180deg); }
.frueher-knopf:active{ background:var(--mulde); }
.fl-frueher.offen > .fl-zeilen{ margin-top:8px; }

/* morgens · tagsüber · abends: die Tageszeit in der Uhrzeitspalte, daneben eine Karte mit Zeilen */
.fl.fl-tageszeit{ display:grid; grid-template-columns:var(--band-zeit) minmax(0,1fr); background:none; box-shadow:none; padding:0; border-radius:0; }
.fl-tageszeit > .fl-kopf{ grid-column:1; display:block; padding:14px 0 0 3px; min-height:0; }
.fl-tageszeit > .fl-kopf .fl-titel{ font-size:12px; line-height:18px; font-weight:500; white-space:nowrap; }
.fl-tageszeit > .fl-zeilen{ grid-column:2; min-width:0; border-radius:var(--r-zeile); box-shadow:var(--schatten-zeile); padding:0; }
.fl-tageszeit .zl.zl-ohne-zeit{ padding-left:8px; }
.fl-tageszeit .zl-ohne-zeit .zl-kreis{ margin:0 -6px 0 -8px; padding:8px 0 0 8px; height:46px; }
.fl-tageszeit .zl-ohne-zeit .zl-marke{ padding-top:8px; height:46px; }
.fl-tageszeit .zl-ohne-zeit .zl-haupt{ padding:12.5px 0 12.5px 10px; min-height:46px; }
.fl-tageszeit .zl-ohne-zeit .zl-titel{ font-size:14.5px; }
.fl-tageszeit .zl + .zl::before{ left:calc(8px + var(--plakette) + 10px); }

/* Ohne Uhrzeit: weiße Pillen, Kreis zum Abhaken, Titel zum Öffnen */
.fl.fl-ohne > .fl-zeilen{ display:flex; flex-wrap:wrap; gap:0 8px; background:none; box-shadow:none; padding:0; border-radius:0; }
.fl.fl-ohne > .fl-kopf{ padding-bottom:4px; }
.zl.zl-pille{ display:inline-flex; align-items:center; max-width:100%; min-height:44px; padding:0 0 0 1px; isolation:isolate; margin:0; }
.zl.zl-pille::before{ display:none; }
.zl.zl-pille::after{ content:""; position:absolute; z-index:-1; left:0; right:0; top:4px; bottom:4px; border-radius:18px; background:var(--flaeche); box-shadow:var(--schatten-pille); }
.zl-pille .zl-kreis{ flex:0 0 44px; width:44px; height:44px; margin:0 -9px 0 0; padding:9px 0 0 4px; }
.zl-pille .kreis{ width:26px; height:26px; box-shadow:inset 0 0 0 7px var(--diese-art-grund, var(--mulde)), inset 0 0 0 9px var(--diese-art, var(--kreis)); }
.zl-pille.ist-erledigt .kreis{ box-shadow:none; }
.zl-pille .kreis .haken{ width:15px; height:15px; }
.zl-pille .zl-haupt{ width:auto; flex:0 1 auto; min-width:0; min-height:44px; padding:12px 14px 12px 4px; align-items:center; gap:8px; }
.zl-pille .zl-titel{ font-size:13.5px; line-height:20px; font-weight:600; }
.zl-pille .zl-hinten{ line-height:20px; }
.zl-pille .zl-hinten svg.i{ width:14px; height:14px; }

/* ---------- Ziehen im Tag (Runde 12, Schritt 7; js/handy/heute.js) ----------
   Waagrecht wischt man am Handy zum Nachbartag: eine ziehbare Zeile lässt die waagrechte Geste durch (wie die Gliederung B). */
.tag-flaechen .zl.zieh-halten{ touch-action:pan-y; }
/* die Karte aus dem Band am Finger: ihr Rahmen bringt Uhrzeitspalte und weiße Karte mit, der Schatten gehört an die Karte */
.zieh-geist > .tag-geist.zieh-geist-innen{ display:block; background:none; box-shadow:none; border-radius:0; }
.tag-geist > .zl{ height:100%; min-height:0; }
.tag-geist > .zl::after{ box-shadow:var(--schatten-heben), var(--schatten-zeile); }
.tag-geist .zl-zeit.tag-geist-neu{ color:var(--tinte); font-weight:700; }
/* wohin es fällt: die Fläche „Ohne Uhrzeit“ tönt sich; fehlt sie, erscheint sie beim Ziehen als Ablage */
.fl-ohne.tag-ziel-an > .fl-zeilen{ border-radius:18px; background:var(--akzent-weich); box-shadow:inset 0 0 0 2px var(--akzent); }
.fl-ohne.tag-ablage > .fl-zeilen{ min-height:52px; align-items:center; border-radius:18px; box-shadow:inset 0 0 0 1.5px var(--kreis); }
.fl-ohne.tag-ablage.tag-ziel-an > .fl-zeilen{ box-shadow:inset 0 0 0 2px var(--akzent); }
.tag-ablage-satz{ margin:0; padding:0 16px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }


/* ── css/desktop.css ── */
/* ==========================================================================
   EasyLife Prototyp · Desktop-Gerüst (Kern)
   „Wolke“ in breiter Anordnung (Vertrag: WOLKE.md). Der Desktop ist dieselbe Gestaltung wie das Handy mit denselben
   Bausteinen, nie eine eigene (Sammy, 27.09.2026, Punkt 45: „das dekstop design bei listen ist zb ein ganz anderes“):
     • alles steht auf dem kühlen Grund --grund, nie auf einer großen weißen Fläche;
     • links der Tag (das Heute des Handys: Zeitband mit weißen Karten);
     • rechts oben die Leiste (wie unten am Handy: weiß, Rundung 28, --schatten-dock; darin die Wörter, das Feld mit der
       dunklen Taste, „Nur: …“ und Einstellungen), darunter die Unterreiter (Wortschalter), der Seitenkopf (Titel 30 px,
       Untertitel darunter) und der Inhalt: Gruppen-Karten, Zeilen, Plaketten, Pillen wie am Handy.
   Kanten rechts: die Leiste 4 px neben dem Tag und 16 px vom rechten Rand; Karten 8 px innerhalb der Leiste (wie am Handy:
   Leiste 12 px, Karten 20 px vom Rand), Titel und Überschriften 4 px innerhalb der Kartenkante.
   Scrollen (Punkt 44): ein Scrollbereich je Ansicht, deckend im Grund, ohne Maske, damit der Browser ihn auch auf
   Bildschirmen mit Pixeldichte 1 und 1,25 selbst schiebt, statt bei jedem Bild neu zu malen (Messung: ARCHITEKTUR.md, 22).

   Die linke Tagesspalte hat einen Zustand für alle Seiten (Punkt 46): offen ist sie überall offen, zu nirgends zu sehen;
   zu steht links nur die schmale Pille „Tag“ zum Aufklappen (.links-breit: offen).
   ========================================================================== */

.app-desk{ display:grid; grid-template-columns:var(--links-b, clamp(320px, 27vw, 404px)) minmax(0,1fr); background:var(--grund); height:100%; overflow:hidden; position:relative; isolation:isolate;
  --dock-h:64px; --werk-rand:12px; transition:grid-template-columns 320ms var(--weich); }
.app-desk.links-zu{ --links-b:80px; }
.app-desk.ohne-uebergang{ transition:none; }
@media (prefers-reduced-motion:reduce){ .app-desk{ transition:none; } }
.desk-links{ position:relative; display:flex; flex-direction:column; min-height:0; padding:14px 12px 14px 18px; }
/* aufklappen und einklappen: die Pille „Tag“ (weiß, rund, --schatten-pille) */
.desk-auf{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:56px; min-height:64px; margin:0 auto; border-radius:28px;
  background:var(--flaeche); box-shadow:var(--schatten-pille); font-size:var(--t-klein); line-height:16px; font-weight:600; color:var(--tinte); }
.desk-auf svg.i{ width:20px; height:20px; color:var(--neben); }
.desk-auf:hover{ background:var(--mulde); }
.desk-zu{ display:none; align-self:flex-start; margin:0 0 4px 0; color:var(--neben); }
.app-desk.links-breit .desk-zu{ display:inline-flex; }
.app-desk.links-zu .desk-auf{ display:flex; }
.app-desk.links-zu .desk-links{ position:static; padding:14px 12px 14px 12px; }
.app-desk.links-zu .desk-tag, .app-desk.links-zu .desk-tipp{ display:none !important; }
/* das Feld in der Leiste, in jeder Ansicht an derselben Stelle (js/desktop/geruest.js) */
.werk-navi > .desk-erfassen{ position:relative; z-index:25; flex:1 1 200px; min-width:180px; max-width:520px; margin:0 8px; }
/* das Dock des Handys steht hier im Fluss der Leiste: nur das Feld (46 px, rund, --feld) mit Kamera und dunkler Taste */
.werk-navi > .desk-erfassen .dock{ position:relative; left:auto; right:auto; bottom:auto; padding:0; background:none; box-shadow:none; border-radius:23px; }
.werk-navi > .desk-erfassen .feld{ height:46px; border-radius:23px; }
/* Was unter dem Feld aufgeht (Vorschau, Antwort, Sprechen, Korb): Form der Leiste wie im Prototyp, genau unter dem Feld
   und so breit wie es (js/desktop/geruest.js, aufsatzAusrichten). Anders als im Prototyp steht die Schicht im Fluss und
   schiebt die Seite weich nach unten, statt über dem Seitentitel zu liegen (Prüfung Stufe 6, Befund 9). */
.werk-aufsatz{ flex:0 0 auto; padding:0 24px 0 0; transition:padding-top var(--d-mittel) var(--weich); }
.werk-aufsatz:has(.aufsatz-klappe.offen){ padding-top:14px; }
.werk-aufsatz .aufsatz-klappe{ margin-left:var(--aufsatz-links, 12px); width:var(--aufsatz-breite, 536px); max-width:calc(100% - var(--aufsatz-links, 12px)); border-radius:var(--r-dock); }
.werk-aufsatz .aufsatz-klappe.offen{ background:var(--flaeche); box-shadow:var(--schatten-dock); }
.werk-aufsatz .aufsatz{ padding:10px 12px 10px 14px; }
/* die letzte Antwort: eine Gruppen-Karte unter der Leiste; sie schiebt die Unterreiter nach unten, statt sie zu decken */
.werk-gespraech{ display:none; flex:0 0 auto; padding:12px 24px 0 12px; }
.werk-gespraech.an{ display:block; }
.app-desk:has(.werk-aufsatz .aufsatz-klappe.offen) .werk-gespraech{ display:none; }
/* eine lange Antwort schiebt die Seite weiter nach unten; erst ab 60 % der Höhe scrollt sie in sich (vorher lief sie über
   den Seitentitel, Prüfung Stufe 6, Befund 9). Der Innenabstand lässt dem Schatten der Karte Platz. */
.werk-gespraech .gespraech{ max-width:784px; max-height:min(60vh, 560px); padding:0 12px 12px; margin:0 -12px; -webkit-mask-image:none; mask-image:none; overflow-y:auto; overscroll-behavior:contain; }
.werk-gespraech .ge-du{ padding-left:4px; font-size:var(--t-klein); line-height:var(--z-klein); }
.werk-gespraech .ge-antwort{ margin-top:6px; }
.werk-gespraech .ge-ausblenden{ display:inline-flex !important; }
/* ist die Arbeitsfläche schmal, verlieren die Wörter ihre Symbole; wird es noch enger, bekommt das Feld eine eigene Zeile */
@container werkrahmen (max-width: 1000px){
  .werk-navi .werk-wort{ padding:0 11px; }
  .werk-navi .werk-wort > .sym{ display:none; }
}
@container werkrahmen (max-width: 860px){
  .werk-navi > .desk-erfassen{ order:5; flex:1 1 100%; max-width:none; margin:4px 0 0; }
}
/* der Tag links: ein Scrollbereich, deckend im Grund, ohne Maske (Punkt 44); unten läuft er unter einer Kappe weich aus */
.desk-tag{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:0 0 24px; scrollbar-width:thin; scrollbar-color:var(--kreis) transparent; background:var(--grund); }
.desk-tag::after{ content:""; position:sticky; bottom:-24px; display:block; height:28px; margin-top:-4px; pointer-events:none; z-index:2;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--grund) 0%, transparent), var(--grund)); }
.desk-tag .tag-kopf{ padding-left:4px; padding-right:4px; }
.desk-tag .tag-flaechen{ margin-top:14px; }
/* Zeilen links reagieren auf den Zeiger (im Zeitband die Karte selbst) */
.desk-tag .zl-haupt:not(.ohne-tun){ transition:background-color var(--d-kurz) var(--standard); }
.desk-tag .fl-tageszeit .zl-haupt:hover, .desk-tag .fl-morgen-vorschau .zl-haupt:hover{ background:var(--mulde); }
.desk-tag .fl-zeitband .zl:not(.laeuft):not(.zl-jetzt):hover::after{ background:var(--mulde); }
.desk-tag .zl-pille:hover::after{ background:var(--mulde); }

/* ---------- Gespräch: der eigene Satz an der Textkante, nur die letzte Antwort als Fläche ---------- */
.desk-erfassen{ flex:0 0 auto; display:flex; flex-direction:column; min-height:0; }
.ge-ausblenden{ display:none !important; }
.gespraech{ flex:0 0 auto; display:flex; flex-direction:column; gap:6px; padding:16px 0 12px; max-height:min(40vh, 400px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--kreis) transparent;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, black 16px); mask-image:linear-gradient(to bottom, transparent 0, black 16px); }
.gespraech:empty{ display:none; }
.ge-paar{ display:flex; flex-direction:column; }
.ge-du{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); padding:0 12px 0 var(--innen); text-wrap:pretty; }
.ge-antwort{ background:var(--flaeche); border-radius:var(--r-flaeche); padding:10px 8px 10px 16px; margin-top:6px; box-shadow:var(--schatten-gruppe); }
.ge-antwort-zeile{ display:flex; align-items:flex-start; gap:10px; }
.ge-text{ flex:1; font-size:var(--t-text); line-height:var(--z-text); font-weight:600; text-wrap:pretty; padding-top:10px; }
.ge-text svg.i{ display:inline-block; width:16px; height:16px; vertical-align:-3px; margin-left:6px; color:var(--akzent); }
.ge-zeilen{ margin:6px 8px 2px 0; }
.ge-zeilen li{ font-size:var(--t-mittel); line-height:var(--z-mittel); padding:5px 0; border-top:1px solid var(--trenner); }
.ge-herkunft{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); margin-top:4px; }
.ge-nur{ margin:6px 8px 2px 0; padding:0; }
.ge-antwort .wort-knopf{ margin:0; }
.ge-antwort .ge-knoepfe{ display:flex; align-items:center; gap:4px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.ge-antwort .ge-knoepfe .wort-knopf{ color:var(--neben); padding:0 10px; }
.ge-antwort .ge-knoepfe .ge-aktion{ padding:0 14px; }
.ge-rueck.zurueck{ opacity:.6; }
/* die vorige Antwort steht leise darüber — ohne Zeilen, ohne Herkunft */
.ge-paar:not(:last-child) .ge-antwort{ background:transparent; box-shadow:none; padding:0 12px 4px var(--innen); margin-top:0; }
.ge-paar:not(:last-child) .ge-text{ padding-top:0; font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:500; color:var(--neben); }
.ge-paar:not(:last-child) .ge-zeilen, .ge-paar:not(:last-child) .ge-herkunft{ display:none; }
.ge-paar:not(:last-child) .ge-du{ font-size:var(--t-klein); line-height:var(--z-klein); }
.ge-paar:last-child .ge-antwort{ animation:ge-antwort 320ms var(--weich) both; }
@keyframes ge-antwort{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ @keyframes ge-antwort{ from{ opacity:0; } to{ opacity:1; } } }

.desk-links .dock{ position:relative; left:auto; right:auto; bottom:auto; padding:8px; border-radius:var(--r-dock); }
.desk-links .feld{ margin:0; }
/* Tasten-Zeile unter dem Feld */
.desk-tipp{ display:flex; justify-content:center; align-items:center; min-height:28px; margin-top:6px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.desk-tipp > span{ display:inline-flex; align-items:center; gap:6px; }
.desk-tipp-punkt{ margin:0 4px; }
.desk-tipp-feld{ display:none !important; }
.app-desk:has(.werk-navi .feld:focus-within) .desk-tipp-ruhe{ display:none !important; }
.app-desk:has(.werk-navi .feld:focus-within) .desk-tipp-feld{ display:inline-flex !important; }
/* niedrige Fenster: der Tag behält Platz — nur die letzte Antwort, keine Tasten-Zeile */
@media (max-height: 780px){
  .gespraech{ max-height:30vh; }
  .ge-paar:not(:last-child){ display:none; }
  .desk-tipp{ display:none; }
}

/* ---------- Arbeitsfläche: auf dem Grund, oben die Leiste ---------- */
.werk{ position:relative; display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--grund); container:werkrahmen / inline-size; }
/* die Leiste: dieselbe wie unten am Handy (weiß, Rundung 28, --schatten-dock), hier waagrecht oben */
.werk-navi{ flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:14px 16px 0 4px; padding:7px 8px; border-radius:var(--r-dock);
  background:var(--flaeche); box-shadow:var(--schatten-dock); position:relative; z-index:5; }
.werk-wort{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:var(--r-pille); font-size:var(--t-mittel); font-weight:500; color:var(--neben); }
.werk-wort svg.i{ width:18px; height:18px; stroke-width:1.8; }
.werk-wort:hover{ background:var(--mulde); color:var(--tinte); }
/* das Gewählte wie der gewählte Reiter am Handy: dunkel und fett, dazu eingedrückt wie der gewählte Tag (Punkt 38) */
.werk-wort.an{ background:var(--gedrueckt); box-shadow:var(--schatten-gedrueckt); color:var(--tinte); font-weight:700; }
.werk-navi-rechts{ margin-left:auto; display:flex; align-items:center; gap:4px; }
/* schmale Arbeitsfläche (1024 px): die Leiste bleibt eine Zeile — Wörter ohne Symbol, engere Knöpfe */
@container werkrahmen (max-width: 780px){
  .werk-navi{ gap:2px; }
  .werk-wort{ padding:0 11px; gap:6px; }
  .werk-navi .werk-wort > .sym{ display:none; }
  .werk-navi .nur-filter{ padding:0 8px; }
}

/* Unterreiter: ein Wortschalter (Mulde, gewählt die weiße Innenpille), eine Zeile; reicht der Platz nicht, gleitet sie seitlich */
.werk-unter{ flex:0 0 auto; display:flex; align-items:center; min-height:56px; padding:12px 24px 0 12px; min-width:0; }
.pillen{ display:inline-flex; flex-wrap:nowrap; gap:2px; background:var(--mulde); padding:0; border-radius:22px; max-width:100%; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
.pillen::-webkit-scrollbar{ display:none; }
.pillen.mehr-rechts{ -webkit-mask-image:linear-gradient(to right, black calc(100% - 40px), transparent); mask-image:linear-gradient(to right, black calc(100% - 40px), transparent); }
.pillen.mehr-links{ -webkit-mask-image:linear-gradient(to right, transparent, black 40px); mask-image:linear-gradient(to right, transparent, black 40px); }
.pillen.mehr-links.mehr-rechts{ -webkit-mask-image:linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); mask-image:linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); }
.pille{ position:relative; flex:0 0 auto; min-height:44px; padding:0 15px; border-radius:22px; font-size:var(--t-mittel); font-weight:600; color:var(--neben); display:inline-flex; align-items:center; white-space:nowrap; }
.pille::before{ content:""; position:absolute; inset:4px; border-radius:18px; background:var(--flaeche); box-shadow:var(--schatten-knopf); opacity:0; transition:opacity var(--d-kurz) var(--standard); }
.pille span{ position:relative; }
.pille:hover{ color:var(--tinte); }
.pille.an{ color:var(--tinte); }
.pille.an::before{ opacity:1; }
/* Nichts wird abgeschnitten (Punkt 42; Befund 09.10.2026: Gedächtnis mit Dokumenten und Einstellungen liefen am Desktop über):
   reicht die Zeile nicht, rücken die Wörter zuerst enger (eng), reicht auch das nicht, bricht die Leiste um (umbruch).
   Das Gerüst misst und setzt beides (js/desktop/geruest.js, leisteEinpassen). */
.pillen.eng .pille{ padding:0 10px; }
.pillen.umbruch{ flex-wrap:wrap; overflow:visible; -webkit-mask-image:none; mask-image:none; }

/* Seitenkopf wie am Handy: [Wort ›] Titel 30 px, darunter der Untertitel ……… Werkzeuge. Immer gleich hoch, damit der
   Inhalt in jeder Ansicht an derselben Stelle beginnt. */
.werk-kopf{ flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; min-height:84px;
  padding:14px calc(24px + var(--versatz) * var(--eine-spalte)) 6px calc(16px + var(--versatz) * var(--eine-spalte)); }
.werk-kopf > .werk-knoepfe{ margin-top:-3px; }
/* Titel und Untertitel nehmen, was neben den Werkzeugen frei ist (in einer Spalte sind das 680 px); erst wenn ihnen weniger als
   340 px blieben, rücken die Werkzeuge unter den Untertitel */
.werk-kopf-links{ display:flex; align-items:baseline; flex-wrap:wrap; column-gap:12px; row-gap:0; flex:1 1 0; min-width:min(100%, 340px); }
.werk-pfad{ display:inline-flex; align-items:center; gap:2px; min-height:44px; margin:-6px -2px -6px -8px; padding:0 4px 0 8px; border-radius:12px; font-size:var(--t-seite); line-height:var(--z-seite); font-weight:600; letter-spacing:-.02em; color:var(--neben); }
.werk-pfad svg.i{ width:22px; height:22px; transform:translateY(3px); }
.werk-pfad:hover{ background:var(--mulde); color:var(--tinte); }
.werk-titel{ font-size:var(--t-seite); line-height:var(--z-seite); font-weight:700; letter-spacing:-.02em; }
.werk-zusatz{ flex:1 0 100%; margin-top:2px; font-size:15.5px; line-height:22px; font-weight:400; color:var(--neben); text-wrap:pretty; }
/* ohne Netz: „Das ist der zuletzt geholte Stand.“ unter Titel und Untertitel (js/desktop/geruest.js, kopfZeichnen) */
.werk-nicht-frisch{ flex:1 0 100%; margin-top:2px; font-size:15.5px; line-height:22px; font-weight:400; color:var(--neben); text-wrap:pretty; }
.werk-knoepfe{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.werk-knoepfe .wort-knopf{ margin:0; }

/* der Inhalt: ein Scrollbereich, deckend im Grund, ohne Maske (Punkt 44); Karten 8 px innerhalb der Leiste */
.werk-buehne{ position:relative; flex:1 1 auto; min-height:0; }
.werk-inhalt{ position:absolute; inset:0; overflow:auto; padding:12px 24px 32px calc(12px + var(--versatz) * var(--eine-spalte)); background:var(--grund); scrollbar-width:thin; scrollbar-color:var(--kreis) transparent; container-type:inline-size; container-name:werk; }
/* Ansichten mit eigener Höhe (Woche, Sortiertisch, Menschen mit gewählter Person): der Inhalt füllt, statt zu scrollen */
.werk-inhalt.fuellt{ overflow:hidden; display:flex; flex-direction:column; padding-bottom:16px; }
.werk-inhalt.fuellt > *{ flex:1 1 auto; min-height:0; }
.werk-inhalt.kommt{ animation:werk-kommt 260ms var(--weich) both; }
.werk-inhalt.geht{ animation:werk-geht 160ms var(--standard) both; pointer-events:none; }
@keyframes werk-kommt{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes werk-geht{ from{ opacity:1; } to{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  @keyframes werk-kommt{ from{ opacity:0; } to{ opacity:1; } }
}
/* ---------- Seite mit einer Spalte: mittig (Sammy, 28.09.2026) ----------
   Eine Spalte ist der Normalfall (Runde 12, Schritt 5): so breit wie eine Handy-Seite (--spalte-breite, 680 px). Sie steht
   mittig unter der Leiste, und der Kopf (Titel, Untertitel, Werkzeuge) steht mit denselben Kanten darüber: links und
   rechts bleibt gleich viel Grund, statt rechts einer leeren Hälfte. Ist die Tagesspalte offen, ist es die Mitte des
   verbleibenden Platzes (die Mitte der Arbeitsfläche ist die Mitte der Leiste). Die Leiste und die Unterreiter bleiben,
   wo sie sind. Das hier ist die einzige Stelle dafür; keine Ansicht setzt ihre Spalte selbst.
   Breite Seiten tragen an ihrer Wurzel die Klasse el-breit und nutzen die Breite wie bisher: die Woche und ihr Schritt 2
   von „Woche planen“, Monat und Jahr, Projekte und Ziele mit dem Brett, der Sortiertisch mit offenen Dingen, der Kassenbon
   und die Auswahl, sobald etwas gewählt ist (b.auswahl setzt el-breit selbst).
   Gerechnet: --versatz = (Breite der Arbeitsfläche − 12 − 680 − 24) / 2, nie unter 0 (100 % ist bei Kopf und Inhalt die
   Breite der Arbeitsfläche). Die Spalte beginnt 12 px + --versatz vom linken Rand der Arbeitsfläche und ist höchstens
   680 px breit, auch wenn rechts ein Rollbalken steht; der Scrollbereich bleibt so breit wie die Arbeitsfläche, das Rad
   greift auch neben der Spalte. --eine-spalte ist 1 (mittig) oder 0 (breit). */
.werk{ --versatz:max(0px, calc((100% - var(--spalte-breite) - 36px) / 2)); }
.werk-kopf, .werk-inhalt{ --eine-spalte:1; --spalte-max:var(--spalte-breite); }
.werk:has(> .werk-buehne > .werk-inhalt:not(.geht) .el-breit) > .werk-kopf, .werk-inhalt:has(.el-breit){ --eine-spalte:0; --spalte-max:none; }
.werk-inhalt > *{ max-width:var(--spalte-max); }
.el-spalte{ min-width:0; }

/* ---------- Auswahl: links auswählen, rechts genau das Gewählte (b.auswahl, Runde 12, Schritt 5) ----------
   ohne Wahl eine Spalte; mit Wahl links die Liste, rechts das Gewählte mit seinem Namen oben. Die gewählte Zeile
   ist getönt und zeigt mit einer kleinen Spitze über die Trennlinie auf das Gewählte (die sichtbare Verbindung). */
.el-auswahl{ min-width:0; }
.el-auswahl-liste, .el-auswahl-detail{ min-width:0; }
.el-auswahl.mit-wahl{ display:grid; grid-template-columns:minmax(260px, 340px) minmax(0, 1fr); align-items:start; max-width:1180px; }
.el-auswahl.mit-wahl > .el-auswahl-liste{ position:sticky; top:0; padding-right:10px; }
/* rechts das Gewählte auf dem Grund (keine Linie: auf dem Grund trennt der Abstand); die Spitze der gewählten Zeile zeigt hinein */
.el-auswahl-detail{ position:relative; padding-left:26px; min-height:100%; }
.el-auswahl-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; padding:2px 0 16px; }
.el-auswahl-kopf-text{ flex:1 1 240px; min-width:0; }
.el-auswahl-kopf{ padding-left:4px; }
.el-auswahl-titel{ font-size:var(--t-gross); line-height:var(--z-gross); font-weight:700; letter-spacing:-.02em; color:var(--tinte); text-wrap:balance; }
.el-auswahl-zusatz{ margin-top:2px; font-size:15.5px; line-height:22px; color:var(--neben); text-wrap:pretty; }
.el-auswahl-knoepfe{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-top:-8px; }
.el-auswahl-knoepfe .wort-knopf{ margin:0; }
.el-auswahl-inhalt{ min-width:0; }
.el-auswahl-inhalt > .fl:first-child, .el-auswahl-inhalt > *:first-child > .fl:first-child{ margin-top:0; }
/* die Spitze: aus der getönten Zeile über die Kartenkante bis an den Rand des Gewählten */
.el-auswahl.mit-wahl .el-auswahl-liste .ist-gewaehlt{ overflow:visible; }
.el-auswahl.mit-wahl .el-auswahl-liste .ist-gewaehlt::after{ content:""; position:absolute; top:50%; right:-14px; width:14px; height:24px; margin-top:-12px;
  background:var(--akzent-weich); clip-path:polygon(0 0, 100% 50%, 0 100%); pointer-events:none; }
.el-auswahl.mit-wahl .el-auswahl-liste .ist-gewaehlt .lz-pfeil{ color:var(--akzent-tief); }
/* die Ansicht füllt die Höhe (Menschen): jede Spalte rollt in sich */
.el-auswahl.fuellt{ height:100%; min-height:0; }
.el-auswahl.fuellt:not(.mit-wahl){ overflow-y:auto; max-width:none; scrollbar-width:thin; scrollbar-color:var(--kreis) transparent; background:var(--grund); }
.el-auswahl.fuellt:not(.mit-wahl) > .el-auswahl-liste{ max-width:var(--spalte-breite); padding-bottom:12px; }
.el-auswahl.fuellt.mit-wahl{ grid-template-rows:minmax(0, 1fr); align-items:stretch; }
.el-auswahl.fuellt.mit-wahl > .el-auswahl-liste, .el-auswahl.fuellt.mit-wahl > .el-auswahl-detail{ position:relative; top:auto; overflow-y:auto; min-height:0; padding-bottom:12px;
  scrollbar-width:thin; scrollbar-color:var(--kreis) transparent; background:var(--grund); }
.el-auswahl.fuellt.mit-wahl > .el-auswahl-liste{ overflow-x:hidden; padding-left:var(--innen); margin-left:calc(-1 * var(--innen)); }
/* schmal (unter 760 px Inhalt, also 796 px Arbeitsfläche): nur das Gewählte, „Schließen“ führt zur Liste. Dann ist es eine
   Seite mit einer Spalte und steht mittig wie jede andere (gemessen an der Arbeitsfläche, damit Kopf und Inhalt dieselbe
   Grenze haben, mit und ohne Rollbalken) */
@container werkrahmen (max-width: 796px){
  .werk:has(> .werk-buehne > .werk-inhalt:not(.geht) .el-auswahl.mit-wahl) > .werk-kopf, .werk-inhalt:has(.el-auswahl.mit-wahl){ --eine-spalte:1; --spalte-max:var(--spalte-breite); }
  .el-auswahl.mit-wahl{ display:block; max-width:var(--spalte-breite); }
  .el-auswahl.mit-wahl > .el-auswahl-liste{ display:none; }
  .el-auswahl.mit-wahl > .el-auswahl-detail{ padding-left:0; border-left:0; }
  .el-auswahl.fuellt.mit-wahl > .el-auswahl-detail{ height:100%; }
}

/* Flächen, Zeitband, Überschriften und Fußsätze: dieselben Bausteine wie am Handy (css/bausteine.css, css/handy.css), weiße
   Karten auf dem Grund. Am Desktop kommt nur der Zeiger dazu: Zeilen tönen sich leise, wenn er darüber steht. */
.werk-inhalt .zl-haupt:not(.ohne-tun):hover, .werk-inhalt button.lz:not(.ist-gewaehlt):hover, .werk-inhalt button.aktion:hover{ background:var(--mulde); }
.werk-inhalt .fl-zeitband .zl:not(.laeuft):not(.zl-jetzt):hover::after, .werk-inhalt .zl-pille:hover::after{ background:var(--mulde); }

@media (max-width:1200px){ .desk-tag .tag-datum-tag{ font-size:26px; line-height:32px; } }

/* Desktop-Blätter liegen über der ganzen App */
.app-desk > .schleier{ z-index:30; }
.app-desk > .hinweis{ left:auto; right:24px; width:min(440px, 40%); bottom:24px; }

/* „Nur das“ am Desktop: ein ganzer Bildschirm, Datum und Uhrzeit darüber, Knöpfe nebeneinander */
.app-desk > .fokus{ padding:24px 32px 40px; align-items:center; }
.app-desk > .fokus > .fokus-kopf{ width:100%; }
.app-desk > .fokus > .fokus-kopf .wort-knopf{ margin:0; gap:10px; color:var(--neben); }
.app-desk > .fokus > .fokus-mitte{ width:100%; max-width:var(--spalte-breite); padding:0; }
.app-desk > .fokus .fokus-titel{ font-size:calc(var(--t-gross) + 12px); line-height:calc(var(--z-gross) + 12px); letter-spacing:-.022em; }
.app-desk > .fokus .fokus-zusatz{ font-size:var(--t-text); line-height:var(--z-text); margin-top:10px; }
.app-desk > .fokus .fokus-dafuer{ margin-top:26px; }
.app-desk > .fokus > .fokus-fuss{ width:100%; max-width:var(--spalte-breite); flex-direction:row; gap:10px; }
.app-desk > .fokus > .fokus-fuss .kn{ flex:1 1 0; width:auto; }
.fokus-zeit{ font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; color:var(--neben); margin-bottom:12px; }

/* Ziehen im Tag rechts (Runde 12, Schritt 7): die Ablage „Ohne Uhrzeit“ und das Ziel behalten ihren Rand in der Arbeitsfläche */
.werk-inhalt .fl-ohne.tag-ablage > .fl-zeilen{ box-shadow:inset 0 0 0 1.5px var(--kreis); }
.werk-inhalt .fl-ohne.tag-ziel-an > .fl-zeilen{ background:var(--akzent-weich); box-shadow:inset 0 0 0 2px var(--akzent); }

/* ── css/teile/planen.css ── */
/* ==========================================================================
   EasyLife Wolke (aus dem Prototyp design/neustart/runde-12/prototyp/) · Teil „planen“ — Handy und Gemeinsames
   Nur Klassen mit Vorsatz .planen-…; Farben, Größen, Rundungen nur aus tokens.css.
   Köpfe, Zeilen, Leerzustände, Fußsätze und Blätter kommen aus dem Kern
   (bausteine.css); hier steht nur, was der Teil zusätzlich braucht.
   Die Desktop-Werkbank (Woche, Monat, Später, Brett …) liegt in css/teile/planen/werkbank.css.
   ========================================================================== */

/* Woche und Tag am Handy: css/teile/planen/woche.css */
/* Listenzeile zum Aufklappen: der Pfeil dreht sich wie bei der Zeile des Kerns */
.planen-routinen .lz .lz-pfeil svg.i{ transition:transform var(--d-mittel) var(--weich); }
.planen-routinen .lz[aria-expanded="true"] .lz-pfeil svg.i{ transform:rotate(180deg); }

/* ---------- Schritte ‹ › (Werkzeuge im Kopf) ---------- */
.planen-schritte{ display:inline-flex; align-items:center; gap:2px; flex:0 0 auto; }
.planen-schritt{ display:inline-flex; align-items:center; justify-content:center; gap:2px; min-width:44px; min-height:44px; padding:0 6px; border-radius:12px; color:var(--neben); font-size:var(--t-mittel); font-weight:600; }
.planen-schritt svg.i{ width:18px; height:18px; }
@media (hover:hover){ .planen-schritt:hover{ background:var(--mulde); color:var(--tinte); } }
.planen-schritt:active{ background:var(--mulde); }
.planen-schritt.mitte{ padding:0 10px; color:var(--akzent); }
.planen-schritt span{ font-size:var(--t-text); font-weight:600; }

/* ---------- Knopfzeilen in einer Fläche ---------- */
.planen-knopfzeile{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.planen-knopfzeile .wort-knopf{ margin:0 -8px; }
.planen-knopfzeile-innen{ padding:4px 12px 12px var(--innen); }
.planen-knopfzeile .kn{ flex:0 0 auto; }

/* ---------- Blätter des Teils (EL.blatt.mitKopf) ---------- */
.planen-blatt-chips{ padding:0 12px 2px var(--innen); }
.planen-blatt-fuss{ padding:16px 0 0; }
.planen-blatt-info{ display:flex; align-items:flex-start; gap:6px; padding-top:2px; padding-bottom:10px; }
.planen-blatt-info .sym{ padding-top:2px; }
.planen-blatt-info .sym svg.i{ width:15px; height:15px; }
.planen-blatt-info.warn{ color:var(--tinte); font-weight:600; }
.planen-blatt-monat{ padding:4px 4px 4px; }
.planen-stepper{ display:flex; align-items:center; gap:4px; padding:0 0 4px calc(var(--innen) - 12px); }
.planen-stepper-wert{ min-width:120px; text-align:center; font-size:var(--t-text); font-weight:600; }
.planen-feld{ margin:0 0 0; }
.planen-feld-innen{ margin:4px 12px 12px var(--innen); }
/* Neues Projekt aus der Vorlage: der Name ganz (bricht um), darunter „Anlegen“ */
.planen-vn{ display:flex; flex-direction:column; gap:10px; padding:10px 12px 12px var(--innen); }
.planen-vn-feld{ display:block; background:var(--mulde); border-radius:16px; padding:10px 14px; }
.planen-vn-name{ display:block; width:100%; height:auto; min-height:44px; resize:none; line-height:22px; padding:0; field-sizing:content; overflow:hidden; }
.planen-vn-knopf{ align-self:stretch; min-height:48px; }
.planen-blatt .planen-feld + .fl{ margin-top:10px; }

/* ---------- Monatswahl (statt Browser-Datumsfeld), steht immer in einer Fläche ---------- */
.planen-mw{ padding:2px 8px 8px; }
.planen-mw-kopf{ display:flex; align-items:center; justify-content:space-between; padding-left:calc(var(--innen) - 8px); }
.planen-mw-name{ font-size:var(--t-mittel); font-weight:700; }
.planen-mw-raster{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:2px; }
.planen-mw-wt{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); text-align:center; padding:4px 0 2px; }
.planen-mw-tag, .planen-mw-leer{ min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:var(--t-mittel); font-weight:500; font-variant-numeric:tabular-nums; }
@media (hover:hover){ .planen-mw-tag:hover{ background:var(--mulde); } }
.planen-mw-tag.heute{ color:var(--akzent); font-weight:700; }
.planen-mw-tag.an{ background:var(--gedrueckt); box-shadow:var(--schatten-gedrueckt); color:var(--tinte); font-weight:700; }
.planen-mw-tag.an.heute{ color:var(--akzent); }
.planen-mw-tag:disabled{ opacity:1; color:var(--neben); background:none; cursor:default; }

/* ---------- Woche planen (Schritt 1 und 3; Schritt 2 ist die Woche selbst, css/teile/planen/woche.css) ---------- */
.planen-plan-rumpf > .fl + .fl, .planen-plan-rumpf > * + .fl{ margin-top:10px; }
.planen-plan-handy > .fl + .fl, .planen-plan-handy > * + .fl{ margin-top:10px; }
/* Zeilen mit Knöpfen darunter: das Symbol bleibt beim Titel */
.planen-plan .lz.mit-symbol{ align-items:flex-start; }
.planen-plan .lz.mit-symbol > .lz-symbol{ padding-top:2px; }
.planen-plan-fuss{ display:flex; gap:8px; padding:16px 0 4px; }
.planen-plan-weiter{ flex:1 1 auto; }

/* ---------- Monat (Handy) ---------- */
.planen-schwerpunkt{ font-size:var(--t-text); line-height:var(--z-text); font-weight:600; padding:2px 12px 14px var(--innen); text-wrap:pretty; }
.planen-schwerpunkt.ist-leer{ font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:400; color:var(--neben); }
.planen-mtag.ist-heute .lz-zusatz{ color:var(--akzent); font-weight:600; }
.planen-mtag.ist-vorbei .lz-titel{ color:var(--neben); }
.planen-jahr-zeile.ist-jetzt .lz-titel{ font-weight:700; }
.planen-jahr-zeile.ist-vorbei .lz-titel{ color:var(--neben); }

/* ---------- Später ---------- */
.planen-etiketten{ padding:2px 12px 2px var(--innen); }

/* ---------- Projekte (Handy) ---------- */
.fl-zeilen .zl.planen-naechster .zl-titel{ font-weight:700; }
/* zwischen dem letzten Schritt und den Handlungen darunter eine Linie wie zwischen Zeilen */
.planen-projekte .fl-zeilen > .zl + .lz::before, .planen-projekte .fl-zeilen > .zl + .planen-hinzu::before{ content:""; position:absolute; top:0; right:0; left:calc(var(--innen) + var(--kante-b)); height:1px; background:var(--trenner); }
.planen-hinzu{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px 6px var(--innen); }
.planen-hinzu .feld{ margin:0; width:100%; }
.planen-hinzu .wort-knopf{ margin:0 -8px; }

/* ---------- Routinen ---------- */
.planen-r-offen{ padding:0 12px 16px calc(var(--innen) + var(--kante-b)); }
.planen-r-offen + .zl::before{ content:""; position:absolute; top:0; right:0; height:1px; background:var(--trenner); left:calc(var(--innen) + var(--kante-b)); }
.planen-r-anh .lz{ padding-left:0; padding-right:0; }
.planen-r-anh .lz + .lz::before{ left:var(--kante-b); }
.planen-formular{ margin-top:6px; }
.planen-formular-frage{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); margin-bottom:8px; text-wrap:pretty; }
.planen-formular-frage b{ color:var(--tinte); font-weight:600; }
.planen-skala{ display:grid; width:100%; grid-template-columns:repeat(5, minmax(0,1fr)); }
.planen-reihe{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--tinte); margin-top:8px; }
.planen-reihe span{ color:var(--neben); }
.planen-r-schalter{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.planen-r-schalterzeile{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.planen-r-wort{ font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; }
.planen-r-aendern{ display:flex; flex-direction:column; gap:6px; padding-top:2px; }
.planen-r-aendern .ws{ display:grid; width:100%; grid-template-columns:repeat(3, minmax(0,1fr)); }

/* sieben Punkte je Routine */
.planen-raster-zeile{ position:relative; padding:10px 8px 4px var(--innen); }
.planen-raster-zeile + .planen-raster-zeile::before, .planen-punkte-kopf + .planen-raster-zeile::before{ content:""; position:absolute; top:0; left:var(--innen); right:0; height:1px; background:var(--trenner); }
.planen-raster-titel{ font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; }
.planen-raster-titel span{ font-weight:500; color:var(--neben); }
.planen-punkte{ display:grid; grid-template-columns:repeat(7, minmax(44px, 1fr)); }
.planen-punkte-kopf{ padding:4px 8px 0 var(--innen); }
.planen-punkte-kopf span{ text-align:center; font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); }
.planen-punkte-kopf span.ist-heute{ color:var(--akzent); font-weight:700; }
.planen-punkt{ display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; border-radius:12px; }
@media (hover:hover){ button.planen-punkt:hover{ background:var(--mulde); } }
.planen-punkt-i{ width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--kreis); transition:background-color var(--d-mittel) var(--standard), transform var(--d-kurz) var(--weich); }
.planen-punkt.gross .planen-punkt-i{ width:20px; height:20px; }
.planen-punkt.erledigt .planen-punkt-i{ background:var(--neben); box-shadow:none; }
.planen-punkt.heute .planen-punkt-i{ box-shadow:inset 0 0 0 2px var(--akzent); }
.planen-punkt.kommt .planen-punkt-i{ box-shadow:inset 0 0 0 1.5px var(--kreis); opacity:.7; }
.planen-punkt.nicht .planen-punkt-i{ width:12px; height:2px; border-radius:1px; box-shadow:none; background:var(--kreis); opacity:.6; }
.planen-punkt.pause .planen-punkt-i{ width:12px; height:12px; border-radius:3px; box-shadow:inset 0 0 0 1.5px var(--kreis); }
button.planen-punkt:active .planen-punkt-i{ transform:scale(.86); }

/* ---------- Wartet auf ---------- */
.planen-w-zusatz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding:0 12px 0 var(--innen); text-wrap:pretty; }
.planen-wartet .entwurf{ padding-top:2px; }

/* ---------- Modus, Rückblick ---------- */
.planen-modus-an .fl-titel{ color:var(--akzent); }
.planen-lz-schalter .zl-rechts, .planen-lz-schalter > .ws{ flex:0 0 auto; }

/* Ziehen: die gemeinsame Bewegung im Kern (css/ziehen.css, js/kern/ziehen.js) */

@media (prefers-reduced-motion:reduce){
  .planen-punkt-i, .planen-routinen .lz .lz-pfeil svg.i{ transition:none; }
}

/* Monat und Jahr (Wolke, Runde 12, Schritt 7): runde Plakette mit dem Tag bzw. dem Monat; heute blau auf heller blauer
   Plakette wie überall (seit 27.09.2026 nicht mehr dunkel: dunkle Flächen sind Handlungen, Punkt 38) */
.planen-mtag-nr{ font-size:var(--t-klein); line-height:1; font-weight:700; color:var(--tinte); letter-spacing:-.01em; }
.planen-mtag.ist-heute .planen-mtag-nr, .planen-jahr-zeile.ist-jetzt .planen-mtag-nr{ background:var(--akzent-weich); color:var(--akzent); }
.planen-mtag.ist-vorbei .planen-mtag-nr, .planen-jahr-zeile.ist-vorbei .planen-mtag-nr{ color:var(--neben); }

/* Wolke (Plan N2, Stufe 7): die Wochentage beim Ändern einer Routine haben ihre volle Tippfläche (44 px), auch mit kurzen
   Wörtern wie „Di“; die Pille darin bleibt, wie sie ist */
.planen-r-aendern .chip{ min-width:44px; justify-content:center; }

/* ── css/teile/aufraeumen.css ── */
/* ==========================================================================
   EasyLife Wolke (aus dem Prototyp design/neustart/runde-12/prototyp/) · Teil „aufraeumen“
   Handy „Planen › Aufräumen“ und der Sortiertisch am Desktop.
   Nur Klassen mit Vorsatz .aufraeumen-…; Farben, Größen, Rundungen nur aus
   css/tokens.css. Kern-Klassen (.fl, .lz, .kn …) nur innerhalb eigener Behälter.
   Kopf (Titel, Untertitel „1 von 9“, „Beenden“), Überschriften (.abschnitt),
   Listenzeilen, Fußsätze, Leer und Tasten (.taste) kommen aus dem Kern.
   ========================================================================== */

/* ---------- gemeinsam: Karte ---------- */
.aufraeumen-karte{ padding:16px var(--innen) 16px; }
.aufraeumen-karte > .fl-zeilen{ position:static; }
.aufraeumen-wo{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); text-wrap:pretty; }
.aufraeumen-titel{ font-size:var(--t-gross); line-height:var(--z-gross); font-weight:700; letter-spacing:-.018em; margin-top:4px; text-wrap:balance; }
.aufraeumen-dafuer{ margin-top:6px; }
.aufraeumen-schon{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; color:var(--neben); }
.aufraeumen-schon svg.i{ width:16px; height:16px; }

.aufraeumen-vorschlag, .aufraeumen-zusammen, .aufraeumen-app{ margin-top:14px; padding-top:10px; border-top:1px solid var(--trenner); }
.aufraeumen-vorschlag-zeile{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; }
.aufraeumen-vorschlag-satz{ font-size:var(--t-mittel); line-height:var(--z-mittel); }
.aufraeumen-vorschlag-satz span{ color:var(--neben); }
.aufraeumen-vorschlag-satz b{ font-weight:700; }
.aufraeumen-ziel-knopf{ flex:0 0 auto; }
.aufraeumen-grund{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); margin-top:1px; text-wrap:pretty; }
.aufraeumen-ziele{ margin-top:10px; }
.aufraeumen-ziele-satz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.aufraeumen-ziele .chips{ margin-top:2px; }

/* Zusammenhangs-Coach: eine Zeile der App auf der Karte, kein fünftes Wort */
.aufraeumen-zh-kopf{ display:flex; align-items:center; gap:8px; min-height:22px; font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); }
.aufraeumen-zh-kopf svg.i{ width:15px; height:15px; }
.aufraeumen-zh-satz{ font-size:var(--t-text); line-height:var(--z-text); font-weight:600; margin-top:2px; text-wrap:pretty; }
.aufraeumen-zh-liste{ margin:8px 0 8px; }
.aufraeumen-zh-liste li{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; padding:6px 0; border-top:1px solid var(--trenner); }
.aufraeumen-zh-liste li:first-child{ border-top:0; padding-top:2px; }
.aufraeumen-zh-titel{ font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:500; }
.aufraeumen-zh-wo{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.aufraeumen-zh-knoepfe{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.aufraeumen-zh-fuss{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); margin-top:8px; }

/* „Erledigen lassen“ als Zeile der App */
.aufraeumen-app-zeile{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.aufraeumen-app-satz{ display:flex; align-items:flex-start; gap:8px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding:4px 0; flex:1 1 200px; }
.aufraeumen-app-satz svg.i{ width:15px; height:15px; margin-top:1px; }
.aufraeumen-app-zeile .wort-knopf{ margin:0 -8px 0 0; }

/* ---------- Durchgang: Bühne oben, fester Ort unten ----------
   Die Karte steht mittig in der Bühne; ist sie länger, scrollt sie in sich.
   Unten, immer an derselben Stelle: die Rückgängig-Zeile und die vier Wörter.
   Wächst die Rückgängig-Zeile, wächst sie nach oben — die Wörter bleiben stehen. */
.aufraeumen-lauf{ display:flex; flex-direction:column; }
.aufraeumen-buehne{ position:relative; display:flex; flex-direction:column; }
/* Luft über und unter der Karte im Verhältnis 2 : 3 — die Karte steht knapp über der Mitte */
.aufraeumen-buehne::before, .aufraeumen-buehne::after{ content:""; flex:2 1 0; min-height:0; }
.aufraeumen-buehne::after{ flex-grow:3; }
.aufraeumen-buehne > .aufraeumen-karte{ flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--kreis) transparent; }
.aufraeumen-unten{ flex:0 0 auto; }

/* ---------- die vier Wörter ---------- */
.aufraeumen-woerter{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.aufraeumen-wort{ flex-direction:column; gap:1px; min-height:60px; padding:6px 2px; white-space:normal; border-radius:var(--r-pille); font-size:var(--t-text); line-height:var(--z-text); }
/* das Ziel unter „Später“ („Samstag“, „ohne Datum“) bricht nie um: sonst würde die Reihe höher und die Wörter
   sprängen von Karte zu Karte (Befund aus Runde 12, Schritt 1: um etwa 10 px) */
.aufraeumen-wort-ziel{ display:block; font-size:12px; line-height:16px; font-weight:500; white-space:nowrap; }
.kn-ruhig .aufraeumen-wort-ziel{ color:var(--neben); }
.aufraeumen-wort-spalte{ display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.aufraeumen-wort-spalte .taste{ align-self:center; }

/* ---------- Rückgängig-Zeile ---------- */
.aufraeumen-rueck{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0 8px 0 var(--innen); }
.aufraeumen-rueck-text{ flex:1; min-width:0; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); text-wrap:pretty; }
.aufraeumen-rueck-knopf{ flex:0 0 auto; margin:0; }
.aufraeumen-rueck .taste{ flex:0 0 auto; }

/* ---------- Handy ---------- */
.aufraeumen-start-fuss{ margin-top:16px; padding:0 2px; }
.aufraeumen-start-fuss .kn, .aufraeumen-handy .aufraeumen-ende-knoepfe .kn{ min-height:54px; font-size:var(--t-text); border-radius:var(--r-pille); }
/* im Durchgang füllt die Ansicht die Seite unter dem Kopf */
.aufraeumen-handy.im-lauf{ height:100%; display:flex; flex-direction:column; }
.aufraeumen-handy.im-lauf > .aufraeumen-lauf{ flex:1 1 auto; min-height:0; }
.aufraeumen-handy .aufraeumen-buehne{ flex:1 1 auto; min-height:0; padding:0 0 12px; }
.aufraeumen-handy .aufraeumen-rueck{ margin-bottom:8px; }
.aufraeumen-handy .aufraeumen-woerter{ padding:0 2px; }

/* ---------- Zusammenfassung ---------- */
.aufraeumen-ende-knoepfe{ display:flex; flex-direction:column; gap:8px; margin-top:16px; padding:0 2px; }
.aufraeumen-ende > .aufraeumen-rueck{ margin-top:10px; }

/* ==========================================================================
   Desktop: der Sortiertisch (Ansicht mit fuellt: true — füllt die Höhe)
   Wolke (Punkt 45): links alles Offene als Gruppen-Karte (die Überschrift darüber, die Liste rollt in der Karte, deckend
   und ohne Maske), rechts die Karte weiß wie am Handy, darunter an festem Ort Rückgängig und die vier Wörter.
   Die dritte Spalte „Wohin es geht“ ist weg (Punkt 47): wohin etwas ging, steht an seiner Zeile links.
   ========================================================================== */
.aufraeumen-tisch{ display:flex; flex-direction:column; outline:none; }
.aufraeumen-tisch-raster{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(260px, 320px) minmax(0,1fr); gap:0 28px; }
.aufraeumen-tisch-raster > section{ min-height:0; }
.aufraeumen-spalten-kopf{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 4px; }
.aufraeumen-spalten-kopf .abschnitt{ padding:0; }
.aufraeumen-spalten-kopf .wort-knopf{ margin:0 -4px 0 0; }

/* links: alles Offene in einer Gruppen-Karte */
.aufraeumen-eingang{ display:flex; flex-direction:column; }
.aufraeumen-liste{ flex:0 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; margin-top:4px; padding:2px 0; border-radius:var(--r-flaeche);
  background:var(--flaeche); box-shadow:var(--schatten-gruppe); scrollbar-width:thin; scrollbar-color:var(--kreis) transparent; }
.aufraeumen-liste > .lz{ border-radius:var(--r-zeile); }
.aufraeumen-liste > .lz + .lz::before{ right:12px; }
.aufraeumen-zeile.entschieden .lz-titel{ color:var(--neben); }
.aufraeumen-zeile-marke{ color:var(--neben); }
.aufraeumen-zeile-marke svg.i{ width:16px; height:16px; }
.aufraeumen-zeile.ist-gewaehlt .aufraeumen-zeile-marke{ color:var(--akzent-tief); }
.aufraeumen-waehl, .aufraeumen-waehl-leer{ width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.aufraeumen-waehl{ border:1.5px solid var(--kreis); background:var(--flaeche); color:var(--auf-akzent);
  transition:background-color var(--d-kurz) var(--standard), border-color var(--d-kurz) var(--standard); }
.aufraeumen-waehl svg.i{ width:14px; height:14px; stroke-width:3; }
/* gewählt: hell getönt mit Haken, nie eine dunkle Fläche (Punkt 38) */
.aufraeumen-zeile.gewaehlt .aufraeumen-waehl{ background:var(--akzent-weich); border-color:var(--akzent); color:var(--akzent-tief); }
.aufraeumen-auswahl:empty{ display:none; }
.aufraeumen-auswahl{ flex:0 0 auto; margin-top:8px; }
.aufraeumen-auswahl > .fuss-satz{ padding:6px var(--innen) 4px; }
.aufraeumen-auswahl-leiste{ padding:10px 4px 2px; }
.aufraeumen-auswahl-satz{ font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:700; }
.aufraeumen-auswahl-woerter{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; margin:8px 0 4px; }
.aufraeumen-auswahl-wort{ flex-direction:column; gap:0; min-height:48px; padding:4px 6px; white-space:normal; }
.aufraeumen-auswahl .wort-knopf{ margin:0 0 0 -4px; }
.aufraeumen-tipp{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; }
.aufraeumen-tipp-punkt{ margin:0 2px; }

/* rechts: die Karte (weiß wie am Handy), darunter an festem Ort Rückgängig und die vier Wörter */
.aufraeumen-mitte{ display:flex; flex-direction:column; padding:0; overflow-y:auto; overflow-x:hidden; background:var(--grund); scrollbar-width:thin; scrollbar-color:var(--kreis) transparent; }
.aufraeumen-mitte.im-lauf{ overflow:hidden; }
.aufraeumen-mitte > .aufraeumen-lauf{ flex:1 1 auto; min-height:0; width:100%; max-width:560px; margin:0 auto; }
.aufraeumen-mitte > .aufraeumen-ende{ width:100%; max-width:560px; margin:0 auto; padding-top:4px; }
.aufraeumen-tisch .aufraeumen-buehne{ flex:1 1 auto; min-height:0; padding:0 0 16px; }
.aufraeumen-tisch .aufraeumen-karte{ background:var(--flaeche); border-radius:var(--r-flaeche); box-shadow:var(--schatten-gruppe); }
.aufraeumen-tisch .aufraeumen-rueck{ padding:0 4px; margin-bottom:8px; }
.aufraeumen-tisch .aufraeumen-woerter{ gap:10px; }
.aufraeumen-tisch .aufraeumen-wort{ min-height:64px; }
.aufraeumen-tisch .aufraeumen-ende-knoepfe{ flex-direction:row; flex-wrap:wrap; padding:0; }
.aufraeumen-tisch .aufraeumen-ende > .aufraeumen-rueck{ margin-top:12px; }

/* ohne offene Dinge (z. B. „Nur: …“): nur die Mitte mit dem ruhigen Leerzustand */
.aufraeumen-tisch.ist-leer .aufraeumen-tisch-raster{ grid-template-columns:minmax(0,1fr); }
.aufraeumen-tisch.ist-leer .aufraeumen-eingang{ display:none; }
.aufraeumen-tisch.ist-leer .aufraeumen-mitte > .aufraeumen-ende{ max-width:var(--spalte-breite); margin:0; }

/* schmale Arbeitsfläche (z. B. 1024 px Bildschirm): die Liste schmaler, sonst gleich */
@container werk (max-width: 860px){
  .aufraeumen-tisch-raster{ grid-template-columns:minmax(210px, 250px) minmax(0,1fr); gap:0 20px; }
}

/* Wolke (Plan N2, Stufe 7): die Pille „Liegen geblieben · N“ in Heute öffnet das Aufräumen; Form wie „Früher heute“, Haken in der
   Farbe der Aufgaben (der Kern zählt, was seit Tagen überfällig ist) */
.liegen-knopf .frueher-haken{ color:var(--art-aufgabe); }
.liegen-knopf .frueher-pfeil svg.i{ transform:none; }

/* ── css/teile/menschen.css ── */
/* ==========================================================================
   EasyLife Prototyp · Teil „menschen“ (auch die gemeinsamen Formen für „einstellungen“)
   Nur Tokens, keine Farbwerte. Zeilen, Listenzeilen, Leer, Fußsätze, Blätter und
   aufgeklappte Bereiche (.aktion-offen) kommen aus dem Kern. Hier steht nur, was die
   Kern-Formen zusammenfügt: Kante A für Marken und Überschriften, Kante B für Text.
   ========================================================================== */

/* Abstände zwischen Flächen und Fußsätzen setzt der Kern (css/bausteine.css, css/desktop.css) */

/* Trennlinien zwischen Zeilen verschiedener Art und der drehende Pfeil aufklappender Zeilen kommen aus dem Kern (css/bausteine.css) */

/* ---------- aufgeklappt (Kern: .aktion-offen, Text auf Kante B) ---------- */
.menschen-offen .feld-eingabe{ min-width:0; }
.menschen-offen .feld-sag{ padding:0 14px; }
.menschen-offen .ws-wort{ text-align:center; line-height:18px; }
.menschen-offen .ws + .feld{ margin-top:8px; }
.menschen-leise{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding-top:8px; text-wrap:pretty; }
.menschen-leise.erste{ padding-top:0; }
.menschen-leise-kopf{ font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; padding:4px 0 4px; }
.menschen-knoepfe{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.menschen-knoepfe .wort-knopf{ margin:0; padding:0 12px; }
.menschen-laeuft{ padding:0; }

/* „Jetzt an. Neu: …“ — die eine getönte Stelle, wie die laufende Zeile am Tag */
.menschen-jetzt{ margin:0 12px 12px var(--innen); padding:10px 10px 2px 14px; border-radius:var(--r-zeile); background:var(--akzent-weich); color:var(--akzent-tief); }
.menschen-jetzt-text{ font-size:var(--t-mittel); line-height:var(--z-mittel); text-wrap:pretty; }
.menschen-jetzt-text b{ font-weight:700; }
.menschen-jetzt-knoepfe{ display:flex; gap:12px; margin-top:2px; }
.menschen-jetzt-knoepfe .wort-knopf{ color:var(--akzent-tief); margin:0 -8px; }
.menschen-jetzt-knoepfe .wort-knopf:active{ background:var(--flaeche); }

/* ---------- Was bei einem Menschen ansteht (Runde 12, Schritt 5) ----------
   in Worten unter dem Namen, jede Sache eine leise Marke in der hellen Fläche ihrer Art (Person, Geld; Verliehenes grau) */
.menschen-ansteht{ display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:6px; }
.menschen-an{ display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:1px 9px 1px 7px; border-radius:12px;
  font-size:var(--t-klein); line-height:18px; font-weight:500; background:var(--diese-art-grund); color:var(--tinte); }
.menschen-an svg.i{ width:14px; height:14px; flex:0 0 auto; color:var(--diese-art); }
/* ohne Art (Verliehenes): grau, auch wenn die Zeile selbst die Farbe „Person“ trägt */
.menschen-an:not([data-art]){ background:var(--mulde); }
.menschen-an:not([data-art]) svg.i{ color:var(--neben); }
.ist-gewaehlt .menschen-an{ background:var(--flaeche); }

/* ---------- Desktop: die Auswahl (b.auswahl, Kern) füllt die Höhe, jede Spalte rollt in sich ---------- */
.menschen-auswahl.fuellt{ margin-bottom:-18px; }
.menschen-desk-person{ min-width:0; }   /* füllt das Gewählte wie jede andere Auswahl (Sammy, 28.09.: keine leere Seite rechts) */



/* ── css/teile/gedaechtnis.css ── */
/* ==========================================================================
   EasyLife Prototyp · Teil „gedaechtnis“
   Nur Klassen mit Vorsatz .gedaechtnis-…; Farben, Größen, Rundungen und
   Bewegung nur aus css/tokens.css. Seitenkopf, Kopf der Arbeitsfläche,
   Zeilen (auch ohne Zeitspalte), Gewählt, Leer, Fußsätze, Blätter und die
   Druckansicht kommen aus dem Kern und werden hier nicht nachgebaut.
   ========================================================================== */

/* ---------- Seite aus Flächen ---------- */
.gedaechtnis-seite{ display:block; }

/* Text und leise Sätze in einer Fläche, auf Kante A */
.gedaechtnis-satz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); text-wrap:pretty; }
.gedaechtnis-satz.innen{ padding:4px 12px 12px var(--innen); }
.gedaechtnis-text{ font-size:var(--t-text); line-height:var(--z-text); padding:12px 12px 10px var(--innen); text-wrap:pretty; }
.gedaechtnis-text.lesen{ line-height:26px; padding-bottom:4px; }
.gedaechtnis-text.lesen + .gedaechtnis-text.lesen{ padding-top:8px; }
.gedaechtnis-text.lesen + .gedaechtnis-satz.innen{ padding-top:10px; }
.gedaechtnis-gross{ padding:12px 12px 12px var(--innen); }
.gedaechtnis-gross-text{ font-size:var(--t-text); line-height:var(--z-text); font-weight:600; text-wrap:pretty; }
.gedaechtnis-gross .gedaechtnis-satz{ margin-top:2px; }

/* Knöpfe am Ende einer Fläche (Speichern, Verschließen, Anlegen …) */
.gedaechtnis-knoepfe{ display:flex; flex-wrap:wrap; gap:8px; padding:6px 12px 14px var(--innen); }
.gedaechtnis-knopf-reihe{ display:flex; flex-wrap:wrap; gap:8px; padding:4px 12px 12px var(--innen); }
.aktion-offen .gedaechtnis-knopf-reihe{ padding:8px 0 0; }
.aktion-offen .gedaechtnis-satz{ padding-top:2px; }
.gedaechtnis-wortzeile{ padding:0 12px 8px var(--innen); }
.gedaechtnis-chips{ padding:2px 12px 8px var(--innen); }
.gedaechtnis-ws-rahmen{ padding:8px 12px 6px var(--innen); }

/* ---------- Textfelder (Mulde) ---------- */
.gedaechtnis-feldrahmen{ padding:8px 10px 10px; }
.gedaechtnis-feld.feld{ margin-top:0; }
.gedaechtnis-feld .feld-eingabe{ padding-left:12px; }
.gedaechtnis-feld.ohne-knopf .feld-eingabe{ padding-right:12px; }
.gedaechtnis-eingabe{ display:block; width:100%; min-height:128px; border:0; outline:none; resize:none; margin:0;
  background:var(--mulde); color:var(--tinte); border-radius:var(--r-zeile); padding:12px 14px;
  font:inherit; font-size:16px; line-height:var(--z-text); }
.gedaechtnis-eingabe::placeholder{ color:var(--neben); opacity:1; }
.gedaechtnis-eingabe:focus{ box-shadow:inset 0 0 0 1.5px var(--akzent); }
.gedaechtnis-mail .gedaechtnis-eingabe{ min-height:260px; }

/* ---------- Antwort auf der Seite „Fragen“ (wie über dem Feld) ---------- */
.gedaechtnis-antwort{ padding:6px 12px 10px var(--innen); }
.gedaechtnis-antwort .antwort-fuss{ padding-left:0; }
.gedaechtnis-antwort .aufsatz-zeile{ padding-left:0; }

/* neu gemerkte Zeilen tönen sich kurz über die Kern-Klasse .hervor (auch für Listenzeilen) */

/* ---------- Abspielen (ohne Ton) ---------- */
.gedaechtnis-spieler{ display:flex; align-items:center; gap:12px; padding:12px 12px 6px var(--innen); }
.gedaechtnis-spiel-knopf{ min-width:112px; }
.gedaechtnis-spur{ position:relative; flex:1 1 auto; min-width:40px; height:6px; border-radius:3px; background:var(--mulde); overflow:hidden; }
.gedaechtnis-spur-fuellung{ position:absolute; inset:0; background:var(--akzent); transform-origin:left center; transform:scaleX(0); }
.gedaechtnis-spielzeit{ flex:0 0 auto; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); white-space:nowrap; }

/* ---------- Aufnehmen (gespielt, kein Mikrofon) ---------- */
.gedaechtnis-aufnahme{ display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 12px 4px var(--innen); }
.gedaechtnis-aufnahme-wort{ font-size:var(--t-text); font-weight:600; }
.gedaechtnis-aufnahme-zeit{ margin-left:auto; font-size:var(--t-gross); line-height:var(--z-gross); font-weight:600; }

/* ---------- Schalter aus Zahlen (1 bis 5, Kapitel) ---------- */
.gedaechtnis-ws.ws{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); width:100%; max-width:320px; }
.gedaechtnis-ws .ws-wort{ padding:0 6px; }

/* ---------- Desktop: eine oder zwei Spalten ----------
   Flächen tragen in der Arbeitsfläche keinen Grund; Felder und Fußsätze stehen
   deshalb auf derselben Kante A wie Überschriften und Zeilen. */
.werk-inhalt .gedaechtnis-feldrahmen{ padding-left:var(--innen); padding-right:var(--innen); }
/* eine Spalte (Runde 12, Schritt 5): die zwei Teile untereinander; Breite und Lage der Spalte setzt der Kern */
.gedaechtnis-zwei{ display:flex; flex-direction:column; }
.gedaechtnis-zwei > .gedaechtnis-seite:empty{ display:none; }
.gedaechtnis-zwei > .gedaechtnis-seite + .gedaechtnis-seite{ margin-top:20px; }
.werk-inhalt .gedaechtnis-lesen-flaeche .gedaechtnis-text.lesen{ max-width:62ch; }

/* kleine Kurven (nur am Desktop) */
.gedaechtnis-kurve{ padding:2px 12px 12px var(--innen); }
.gedaechtnis-kurve-svg{ display:block; width:100%; height:auto; max-width:520px; }
.gedaechtnis-kurve .k-linie{ fill:none; stroke:var(--neben); stroke-width:2.5; stroke-linejoin:round; }
.gedaechtnis-kurve .k-linie.k-zwei{ stroke:var(--kreis); }
.gedaechtnis-kurve .k-punkt{ fill:var(--flaeche); stroke:var(--neben); stroke-width:2.5; }
.gedaechtnis-kurve .k-punkt.k-zwei{ stroke:var(--kreis); }
.gedaechtnis-kurve .k-saeule{ fill:var(--kreis); opacity:.55; }
.gedaechtnis-kurve .k-saeule.k-spaet{ fill:var(--neben); opacity:1; }
.gedaechtnis-achse{ position:relative; height:22px; max-width:520px; margin-top:4px; }
.gedaechtnis-achse span{ position:absolute; top:0; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); white-space:nowrap; }
.gedaechtnis-kurve .gedaechtnis-satz{ margin-top:2px; }

/* ---------- Druckansicht des Jahresrückblicks (EL.druck): nur die Schlusszeile ---------- */
.druck-papier .gedaechtnis-druck-fuss{ margin:24px 0 0; }

/* ── css/teile/gedaechtnis-zusatz.css ── */
/* ==========================================================================
   EasyLife Prototyp · Teil „gedaechtnis“ · Zusatz
   Geladen aus js/teile/gedaechtnis/mehrfach.js (EL.ladeCss).
   Mehrfachwahl, aufgeklappte Zeilen der Coaches, Beispiel-Fragen unter einer
   Antwort. Farben nur aus Tokens (mit Rückfall), nichts nachgebaut, was der
   Kern schon hat (Zeilen, Chips, Trennlinien, Blätter).
   ========================================================================== */

/* ---------- Mehrfachwahl: Kästchen rechts in der Zeile ----------
   Einfachwahl (G.wahl) zeigt nur einen Haken; die Mehrfachwahl zeigt an jeder
   Zeile ein Kästchen, damit man sieht, dass mehreres geht. */
.gedaechtnis-mehrfach-marke{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:7px; border:1.5px solid var(--kreis); background:var(--flaeche);
  transition:background-color var(--d-kurz) var(--standard), border-color var(--d-kurz) var(--standard), transform var(--d-kurz) var(--weich); }
.gedaechtnis-mehrfach-haken{ width:14px; height:14px; fill:none; stroke:var(--auf-akzent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset var(--d-mittel) var(--weich); }
/* gewählt: hell getönt mit Haken, nie eine dunkle Fläche (Punkt 38) */
.gedaechtnis-mehrfach.ist-an .gedaechtnis-mehrfach-marke{ background:var(--akzent-weich); border-color:var(--akzent); color:var(--akzent-tief); }
.gedaechtnis-mehrfach.ist-an .gedaechtnis-mehrfach-haken{ stroke-dashoffset:0; stroke:var(--akzent-tief); }
.gedaechtnis-mehrfach:active .gedaechtnis-mehrfach-marke{ transform:scale(.9); }
@media (prefers-reduced-motion:reduce){ .gedaechtnis-mehrfach-haken, .gedaechtnis-mehrfach-marke{ transition:none; } }

/* ---------- Coaches: aufgeklappte Zeile (tauschen, Dauer, Tage) ----------
   Liegt in .aktion-offen (Kante B); die Zeilen darin beginnen auf dieser Kante. */
.gedaechtnis-coach-offen > .lz{ padding-left:0; min-height:48px; }
.gedaechtnis-coach-offen > .lz + .lz::before{ left:0; }
.gedaechtnis-coach-offen > .lz.mit-symbol + .lz.mit-symbol::before{ left:30px; }
.gedaechtnis-coach-offen > .gedaechtnis-satz{ padding:2px 0 2px; }
.gedaechtnis-coach-offen > .chips + .chips{ margin-top:0; }
/* Wochentage „Mo“ bis „So“: die Tippfläche bleibt mindestens 44 px breit, die Pille zentriert darin */
.gedaechtnis-coach-offen .chip{ min-width:44px; justify-content:center; }
.gedaechtnis-coach-offen > .ws{ margin-top:2px; }
.gedaechtnis-coach-offen .gedaechtnis-ws.ws{ max-width:100%; }
.gedaechtnis-coach-offen > .gedaechtnis-knopf-reihe{ padding:2px 0 0; }
.gedaechtnis-coach-offen > .gedaechtnis-satz.innen{ padding-left:0; }

/* ---------- Beispiel-Fragen unter „Dazu finde ich nichts“ ---------- */
.gedaechtnis-vorschlaege{ display:flex; flex-wrap:wrap; column-gap:6px; row-gap:0; margin-top:2px; }
.gedaechtnis-vorschlaege-satz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); margin-top:8px; }

/* ── css/teile/gedaechtnis-tagebuch.css ── */
/* ==========================================================================
   EasyLife Wolke · Gedächtnis › Tagebuch mit Leitfaden (Plan N2, Stufe 10)
   Übernommen aus dem Prototyp (design/neustart/runde-12/prototyp/css/teile/gedaechtnis-tagebuch.css), ohne die
   Teile der Vorführung und ohne das Mikrofon (in Wolke nicht gebaut, js/teile/tagebuch.js). Aussehen „Wolke“: weiße
   Karten auf kühlem Grund, runde Knöpfe, viel Luft. Nur Tokens, keine Farbwerte; Tippflächen ≥ 44 px.
   Farbe ordnet hier nichts: das Tagebuch hat keine Art, die Gruppen im Katalog keine eigenen Farben (§7.1).
   ========================================================================== */

/* ---------- Die Seite: oben groß „Heute schreiben“, darunter klein das Set ---------- */
.gedaechtnis-tb-start{ display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:12px 12px 4px var(--innen); }
.gedaechtnis-tb-start .kn.gedaechtnis-tb-gross{ min-height:52px; font-size:var(--t-text); }
.gedaechtnis-tb-start.am-desktop{ align-items:flex-start; }
.gedaechtnis-tb-start.am-desktop .kn.gedaechtnis-tb-gross{ padding:0 26px; }
.gedaechtnis-tb-setzeile{ display:flex; align-items:center; flex-wrap:wrap; column-gap:2px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.gedaechtnis-tb-setzeile .wort-knopf{ margin:0; padding:0 8px; }
.gedaechtnis-tb-start .gedaechtnis-tb-setzeile{ justify-content:center; }
.gedaechtnis-tb-start.am-desktop .gedaechtnis-tb-setzeile{ justify-content:flex-start; padding-left:4px; }
.werk-inhalt .gedaechtnis-tb-start{ padding-left:var(--innen); padding-right:var(--innen); }

/* „Du hattest angefangen. Weiterschreiben · Verwerfen“ */
.gedaechtnis-tb-entwurf{ padding:14px 12px 10px var(--innen); }
.werk-inhalt .gedaechtnis-tb-entwurf{ padding-left:var(--innen); padding-right:var(--innen); }
.gedaechtnis-tb-entwurf-text{ font-size:var(--t-text); line-height:var(--z-text); font-weight:600; }
.gedaechtnis-tb-entwurf-zusatz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); margin-top:2px; }
.gedaechtnis-tb-entwurf-knoepfe{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; margin-top:12px; }
.gedaechtnis-tb-entwurf-knoepfe .wort-knopf{ margin:0; }

/* die erste Frage klein über der ersten Antwort (§7.2) */
.gedaechtnis-tb-frage-klein{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:500; color:var(--neben); margin-bottom:1px; text-wrap:pretty; }

/* ---------- Blatt „Wie möchtest du schreiben?“ ---------- */
.gedaechtnis-tb-erste .lz{ min-height:68px; padding-top:10px; padding-bottom:10px; }
.gedaechtnis-tb-setwahl .lz-was > .lz-zusatz + .lz-zusatz{ margin-top:3px; }
.gedaechtnis-tb-haken{ display:inline-flex; color:var(--akzent-tief); }
.gedaechtnis-tb-haken svg.i{ width:18px; height:18px; }
.gedaechtnis-tb-anaus.ws{ flex:0 0 auto; flex-wrap:nowrap; }

/* ---------- Schreiben: ein Blatt über den ganzen Schirm (Handy) bzw. in der Mitte (Desktop) ---------- */
.blatt-mitte.gedaechtnis-tb-huelle{ width:min(660px, calc(100% - 48px)); }
.gedaechtnis-tb-schreiben, .gedaechtnis-tb-scroll{ overflow-y:auto; overscroll-behavior:contain; min-height:0; padding:0 0 18px; touch-action:pan-y; background:var(--grund); }
/* oben und unten endet der Inhalt weich unter klebenden Kappen (statt einer Maske auf dem Scrollbereich, Punkt 44) */
.gedaechtnis-tb-schreiben::before, .gedaechtnis-tb-scroll::before{ content:""; position:sticky; top:0; display:block; height:10px; margin-bottom:-10px; z-index:3; pointer-events:none;
  background:linear-gradient(to bottom, var(--grund), color-mix(in srgb, var(--grund) 0%, transparent)); }
.gedaechtnis-tb-schreiben::after, .gedaechtnis-tb-scroll::after{ content:""; position:sticky; bottom:-18px; display:block; height:14px; margin-top:-14px; z-index:3; pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--grund) 0%, transparent), var(--grund)); }
.gedaechtnis-tb-schreiben > *:first-child, .gedaechtnis-tb-scroll > *:first-child{ margin-top:4px; }
.gedaechtnis-tb-kopf{ display:flex; align-items:center; gap:8px; padding:0 4px; }
.gedaechtnis-tb-setchip .chip-pille{ gap:4px; padding-right:9px; }
.gedaechtnis-tb-setchip .chip-pille svg.i{ width:15px; height:15px; color:var(--neben); }
.gedaechtnis-tb-schreiben > .gedaechtnis-tb-setzeile{ padding:0 4px; }

/* eine Frage pro Schirm: Frage groß, Hilfezeile grau, darunter leise „Warum diese Frage?“ (§7.2) */
.gedaechtnis-tb-schirm{ display:flex; flex-direction:column; padding-top:14px; }
.gedaechtnis-tb-schirm > .fl + .fl{ margin-top:16px; }
.gedaechtnis-tb-einleitung{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--tinte); background:var(--flaeche); border-radius:var(--r-flaeche); box-shadow:var(--schatten-gruppe);
  padding:14px 16px; margin-bottom:18px; text-wrap:pretty; }
.gedaechtnis-tb-frage{ font-size:22px; line-height:29px; font-weight:700; letter-spacing:-.015em; color:var(--tinte); padding:0 4px; text-wrap:pretty; }
.gedaechtnis-tb-hilfe{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); margin-top:6px; padding:0 4px; text-wrap:pretty; }
.gedaechtnis-tb-warum-zeile{ display:flex; padding:0 4px; margin-top:2px; }
.gedaechtnis-tb-warum-zeile:empty{ display:none; }
.gedaechtnis-tb-warum.wort-knopf{ margin:0 -8px; }
/* in einer Karte („Wie war der Tag?“) steht der Link auf Kante A wie der Satz darüber */
.fl-zeilen > .gedaechtnis-tb-warum-zeile{ padding:0 12px 6px var(--innen); margin-top:-4px; }
.gedaechtnis-tb-vermerk{ font-size:var(--t-klein); line-height:44px; color:var(--neben); font-weight:500; }
.gedaechtnis-tb-schirm > .gedaechtnis-tb-antwort{ margin-top:8px; }

/* das Antwortfeld: weiße Karte, darin die Eingabe (Mulde) */
.gedaechtnis-tb-antwort{ background:var(--flaeche); border-radius:var(--r-flaeche); box-shadow:var(--schatten-gruppe); padding:10px; }
.gedaechtnis-tb-antwort .gedaechtnis-eingabe{ min-height:150px; }
.gedaechtnis-tb-zeilen{ display:flex; flex-direction:column; gap:8px; }
.feld.gedaechtnis-tb-zeile{ margin:0; padding:0 14px; background:var(--mulde); }
.feld.gedaechtnis-tb-zeile:focus-within{ box-shadow:inset 0 0 0 1.5px var(--akzent); }
.gedaechtnis-tb-wd + .gedaechtnis-tb-wd{ margin-top:10px; }
.gedaechtnis-tb-wd-wort{ display:block; font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); padding:0 4px 4px; }
.gedaechtnis-tb-woerter{ padding:0 2px; }
.gedaechtnis-tb-woerter-halter > .feld.gedaechtnis-tb-zeile{ margin-top:6px; }
.gedaechtnis-tb-mehr.wort-knopf{ margin:0 0 0 4px; }
.gedaechtnis-tb-antwort .gedaechtnis-ws-rahmen{ padding:2px 0; }

/* unten fest: Punkte, dann „Überspringen“ links, „Weiter“ rechts (§7.2) */
.gedaechtnis-tb-fuss{ flex:0 0 auto; padding:4px 12px calc(12px + var(--unten-sicher, 0px)); border-top:1px solid var(--trenner); background:var(--grund); }
.blatt-mitte .gedaechtnis-tb-fuss{ padding:8px 20px 16px; }
.gedaechtnis-tb-knoepfe{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; }
.gedaechtnis-tb-knoepfe .kn.gedaechtnis-tb-haupt{ min-height:50px; min-width:132px; font-size:var(--t-text); }
.gedaechtnis-tb-leise.wort-knopf{ margin:0; color:var(--neben); font-weight:600; }
.gedaechtnis-tb-kuerzel{ margin-left:auto; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); white-space:nowrap; }
.gedaechtnis-tb-punkte{ display:flex; justify-content:center; flex-wrap:wrap; min-height:32px; }
.gedaechtnis-tb-punkt{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:22px; }
span.gedaechtnis-tb-punkt{ width:22px; height:32px; }
.gedaechtnis-tb-punkt-i{ width:8px; height:8px; border-radius:4px; background:var(--kreis); opacity:.55; transition:width var(--d-mittel) var(--weich), opacity var(--d-kurz) var(--standard); }
.gedaechtnis-tb-punkt.an .gedaechtnis-tb-punkt-i{ width:22px; background:var(--tinte); opacity:1; }
button.gedaechtnis-tb-punkt:active{ background:var(--mulde); }
.gedaechtnis-tb-hilfezeile{ display:flex; align-items:center; flex-wrap:wrap; column-gap:4px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding:2px 0 0; text-wrap:pretty; }
.gedaechtnis-tb-hilfezeile .wort-knopf{ margin:0; padding:0 6px; }

/* nach der letzten Frage: die Antworten zum Durchsehen */
.lz.gedaechtnis-tb-antwortzeile .lz-titel{ white-space:pre-line; font-weight:500; }

/* ---------- Desktop: alle Fragen untereinander, jede als Karte ---------- */
.gedaechtnis-tb-schreiben.am-desktop .fl + .fl, .gedaechtnis-tb-schreiben.am-desktop .gedaechtnis-tb-einleitung + .fl{ margin-top:16px; }
.gedaechtnis-tb-schreiben.am-desktop > .gedaechtnis-tb-kopf + *{ margin-top:14px; }
.fl.gedaechtnis-tb-karte > .fl-zeilen{ padding:16px 14px 14px; }
.fl.gedaechtnis-tb-karte .gedaechtnis-tb-frage{ font-size:17px; line-height:24px; padding:0 2px; }
.fl.gedaechtnis-tb-karte .gedaechtnis-tb-hilfe{ font-size:var(--t-klein); line-height:var(--z-klein); margin-top:3px; padding:0 2px; }
.fl.gedaechtnis-tb-karte .gedaechtnis-tb-warum-zeile{ padding:0 2px; margin-top:2px; }
.fl.gedaechtnis-tb-karte .gedaechtnis-tb-antwort{ box-shadow:none; padding:4px 0 0; }
.fl.gedaechtnis-tb-karte .gedaechtnis-tb-antwort .gedaechtnis-eingabe{ min-height:96px; }
.gedaechtnis-tb-schreiben.am-desktop .gedaechtnis-tb-einleitung{ margin:14px 0 0; }

/* Einträge lesen: Listen je Zeile */
.gedaechtnis-tb-liste{ padding:10px 14px 10px var(--innen); display:flex; flex-direction:column; gap:6px; }
.gedaechtnis-tb-liste li{ position:relative; padding-left:16px; font-size:var(--t-text); line-height:var(--z-text); text-wrap:pretty; }
.gedaechtnis-tb-liste li::before{ content:""; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--kreis); }

/* ---------- Zusammenstellen: „Deine Fragen“ ---------- */
.chips.gedaechtnis-tb-ausgang{ padding:0 12px 10px var(--innen); }
.lz.gedaechtnis-tb-wahlzeile .lz-symbol{ background:transparent; color:var(--kreis); }
.lz.gedaechtnis-tb-wahlzeile{ touch-action:manipulation; }
.gedaechtnis-tb-wahl-knoepfe{ display:flex; flex-wrap:wrap; gap:0 18px; padding:0 12px 6px calc(var(--innen) + var(--kante-b)); }
.gedaechtnis-tb-wahl-knoepfe .wort-knopf{ margin:0 -8px; }
.lz.gedaechtnis-tb-fest .lz-titel{ color:var(--neben); font-weight:500; }
.lz.gedaechtnis-tb-gruppe .lz-titel{ font-weight:600; }
.lz.gedaechtnis-tb-katzeile{ align-items:flex-start; padding-left:calc(var(--innen) + 12px); }
.lz.gedaechtnis-tb-katzeile .lz-titel{ font-weight:500; }
.lz.gedaechtnis-tb-katzeile > .gedaechtnis-tb-wort, .lz.gedaechtnis-tb-katzeile > .gedaechtnis-tb-dabei{ margin-top:-2px; }
.gedaechtnis-tb-kat-warum{ display:flex; margin-top:0; }
.gedaechtnis-tb-kat-warum .wort-knopf{ margin:0 -8px; }
.gedaechtnis-tb-katsatz.el-leise{ padding-left:calc(var(--innen) + 12px); padding-bottom:10px; }
.gedaechtnis-tb-wort.wort-knopf{ margin:0 -8px 0 0; flex:0 0 auto; }
.gedaechtnis-tb-dabei{ display:inline-flex; align-items:center; gap:5px; min-height:44px; flex:0 0 auto; font-size:var(--t-mittel); font-weight:600; color:var(--akzent-tief); white-space:nowrap; }
.gedaechtnis-tb-dabei svg.i{ width:16px; height:16px; }
.gedaechtnis-tb-wie{ padding:10px 10px 6px; }
.gedaechtnis-tb-wie-ws.ws{ display:flex; width:100%; flex-wrap:nowrap; }
.gedaechtnis-tb-wie-ws .ws-wort{ flex:1 1 0; padding:0 8px; font-size:var(--t-klein); white-space:nowrap; }
.gedaechtnis-tb-summe-text{ font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; color:var(--tinte); }
.gedaechtnis-tb-druck-schalter{ padding:0 var(--innen) 12px; }

@media (prefers-reduced-motion:reduce){
  .gedaechtnis-tb-punkt-i{ transition:none; }
}

/* ── css/teile/einstellungen.css ── */
/* ==========================================================================
   EasyLife Prototyp · Teil „einstellungen“
   Nur Tokens. Seiten, aufgeklappte Bereiche und „Jetzt an“ kommen aus
   css/teile/menschen.css (derselbe Agent, gemeinsame Hilfen EL.mwz); Zeilen,
   Schalter, Leer und Fußsätze aus dem Kern.
   ========================================================================== */

/* Datenschutz: ein Absatz in der Fläche, auf Kante A */
.einstellungen-absatz{ font-size:var(--t-text); line-height:var(--z-text); padding:0 12px 14px var(--innen); max-width:52ch; text-wrap:pretty; }

/* Schalter-Zeilen (wie die Referenz „Pakete“: Listenzeile, rechts der Wortschalter) */
.einstellungen-schalter .lz-was{ padding-top:1px; }
.einstellungen-hervor{ animation:einstellungen-hervor 2200ms var(--standard) 300ms both; border-radius:var(--r-zeile); }
/* Pakete (Plan N2, Szenario 99): ein Paket, das noch nicht fertig ist, trägt statt des Schalters ein leises „kommt“ —
   im Nebentext, nicht in der Farbe des Pakets: Es ist ein Zustand, keine Handlung */
.lz.paket-kommt[data-art] .lz-hinten{ color:var(--neben); font-weight:500; }
@keyframes einstellungen-hervor{ 0%, 40%{ background:var(--akzent-weich); } 100%{ background:transparent; } }

/* Uhrzeit unter einer Mitteilung, Trennlinie danach wie zwischen zwei Zeilen */
.einstellungen-um{ display:flex; align-items:center; gap:12px; padding:0 12px 12px var(--innen); }
.einstellungen-um-wort{ font-size:var(--t-mittel); font-weight:600; color:var(--neben); }
.einstellungen-um + .lz::before{ content:""; position:absolute; top:0; right:0; left:var(--innen); height:1px; background:var(--trenner); }
.einstellungen-um + .lz.mit-symbol::before{ left:calc(var(--innen) + var(--kante-b)); }

/* Auswahl mit Haken (Limit) */
.einstellungen-wahl.ist-an .lz-titel{ font-weight:600; }
.einstellungen-haken{ color:var(--akzent); display:inline-flex; }
.einstellungen-haken svg.i{ width:18px; height:18px; }

/* Zuletzt geändert: Zurückgenommenes tritt zurück */
.einstellungen-zurueck .lz-titel{ color:var(--neben); font-weight:400; }
.einstellungen-zurueck .lz-symbol{ color:var(--kreis); }

/* Export-Vorschau; Vorschläge aus einer Datei stehen als Zeilen über die ganze Fläche */
.einstellungen-export{ font-size:var(--t-klein); line-height:var(--z-klein); }
.einstellungen-vorschlag-liste{ margin:0 -12px 0 calc(-1 * (var(--innen) + var(--kante-b))); }

@media (prefers-reduced-motion:reduce){
  .einstellungen-hervor{ animation:none; background:var(--akzent-weich); }
}

/* ======================================================================
   Erster Start (Vorschau über der App)
   ====================================================================== */
.einstellungen-start{ position:absolute; inset:0; z-index:35; background:var(--grund); opacity:0; transition:opacity var(--d-mittel) var(--standard); outline:none; }
.einstellungen-start.auf{ opacity:1; }
.einstellungen-start .statusleiste{ z-index:2; }
.einstellungen-start-ende{ color:var(--neben); gap:6px; }
.einstellungen-start-ende svg.i{ width:16px; height:16px; }
.einstellungen-start-titel{ margin-bottom:0; font-size:var(--t-seite); line-height:var(--z-seite); font-weight:700; letter-spacing:-.02em; color:var(--tinte); }
.einstellungen-start-schutz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding:8px 10px 4px 12px; text-wrap:pretty; }
.einstellungen-start-feld .feld-eingabe{ padding-left:0; }
.einstellungen-start-feld .feld-eingabe::placeholder{ color:var(--neben); }

/* Handy */
.einstellungen-start.handy .einstellungen-start-tag{ position:absolute; top:var(--status-h); left:0; right:0; bottom:0; overflow-y:auto; overflow-x:hidden;
  padding:0 var(--rand) calc(var(--start-dock, 170px) + 48px + var(--unten-sicher)); scrollbar-width:none; }
.app-handy.vollbild .einstellungen-start.handy .einstellungen-start-tag{ top:var(--oben-sicher); }

/* Desktop: erst eine Spalte in der Mitte, nach dem ersten Eintrag links mit Arbeitsfläche */
.einstellungen-start.desk{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; }
.einstellungen-start.desk.mit-werk{ grid-template-columns:clamp(320px, 27vw, 404px) minmax(0,1fr); justify-items:stretch; }
.einstellungen-start-spalte{ position:relative; display:flex; flex-direction:column; min-height:0; height:100%; width:clamp(320px, 27vw, 404px); padding:12px 12px 16px 16px; }
.einstellungen-start.desk.mit-werk .einstellungen-start-spalte{ width:auto; }
.einstellungen-start.desk .einstellungen-start-tag{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:0 0 12px; }
.einstellungen-start.desk .tag-kopf{ padding-left:var(--innen); }
.einstellungen-start.desk .tag-flaechen{ margin-top:12px; }
.einstellungen-start.desk .dock{ position:relative; left:auto; right:auto; bottom:auto; padding:8px; border-radius:var(--r-dock); }
.einstellungen-start.desk > .hinweis{ left:auto; right:24px; width:min(440px, 40%); bottom:24px; }

/* ---------- Schalter-Zeile (Wolke, Runde 12, Schritt 7) ----------
   Plakette · Titel · Schalter in einer Zeile, der Satz darunter über die ganze Breite; so bricht nichts neben dem
   Schalter in drei Zeilen um, und die Zeile hat Luft. */
.lz.einstellungen-schalter{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:2px; align-items:center; padding-top:10px; padding-bottom:12px; }
.lz.einstellungen-schalter.mit-symbol{ grid-template-columns:var(--plakette) minmax(0,1fr) auto; }
.lz.einstellungen-schalter > .lz-was{ display:contents; }
.lz.einstellungen-schalter .lz-titel{ grid-column:1; grid-row:1; }
.lz.einstellungen-schalter .lz-zusatz{ grid-column:1 / -1; grid-row:2; margin-top:0; }
.lz.einstellungen-schalter > .ws{ grid-column:2; grid-row:1; margin:0; }
.lz.einstellungen-schalter.mit-symbol > .lz-symbol{ grid-column:1; grid-row:1; }
.lz.einstellungen-schalter.mit-symbol .lz-titel{ grid-column:2; }
.lz.einstellungen-schalter.mit-symbol .lz-zusatz{ grid-column:2 / -1; }
.lz.einstellungen-schalter.mit-symbol > .ws{ grid-column:3; }

/* Apple Kalender (Einstellungen › Verbindungen, 08.10.2026): die Beschriftung über einem Feld im aufgeklappten Bereich,
   mit Luft zum Satz davor (die Felder selbst wie bei „Konto löschen“: .neu-rahmen > .feld.neu-feld) */
.apple-feld-kopf{ display:block; padding-top:10px; }

/* ── css/teile/desktop.css ── */
/* ==========================================================================
   EasyLife Prototyp · Teil „desktop“
   Eigene Klassen beginnen mit .desktop-…. Das ruhigere Gespräch, die
   Tasten-Zeile unter dem Feld, „Nur das“ am Desktop und die Tasten (.taste)
   stehen seit der Zusammenführung im Kern (css/desktop.css, css/bausteine.css).
   Farben, Größen, Rundungen nur aus css/tokens.css.
   ========================================================================== */

/* ---------- Übersicht der Tasten (Blatt mit Kopf des Kerns) ---------- */
.desktop-tasten{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.desktop-tasten-wort{ font-size:var(--t-klein); color:var(--neben); margin:0 2px; }
.desktop-tasten-blatt .lz{ min-height:48px; padding-top:8px; padding-bottom:8px; }

/* ---------- ein Tag in der Arbeitsfläche ----------
   Flächen ohne eigenen Grund (macht der Kern); eine Spalte wie Heute (Runde 12, Schritt 5), Breite und Lage vom Kern. */
.desktop-tag .tag-flaechen{ margin-top:0; }
/* Blättern im Kopf der Arbeitsfläche: dieselben Tag-Schritte wie links über dem Tag */
.desktop-tag-schritte{ margin-right:-8px; }

/* ---------- Fokuszeit: „Nur das“ mit Wecker als ganzer Bildschirm ----------
   Der Kern (css/desktop.css) legt Rand, Breite und die Knopfreihe fest; hier kommt der Ring dazu.
   Mit Wecker steht alles mittig, die Knöpfe bilden eine Reihe (Erledigt · Pause · Abbrechen). */
.app-desk > .fokus .fokus-uhr{ --ring:clamp(170px, 30cqh, 300px); margin-top:26px; }
.app-desk > .fokus.mit-uhr > .fokus-mitte{ align-items:center; text-align:center; max-width:600px; }
.app-desk > .fokus.mit-uhr .fokus-zeit{ margin-bottom:10px; }
.app-desk > .fokus .fokus-dafuer{ max-width:440px; }
.app-desk > .fokus > .fokus-fuss .fokus-fuss-reihe{ display:contents; }
.app-desk > .fokus.mit-uhr > .fokus-fuss{ max-width:600px; }
.app-desk > .fokus .fokus-wahl.im-schirm{ max-width:520px; }
.app-desk > .fokus .fokus-projekt{ max-width:520px; }
.app-desk > .fokus .fokus-kopf-rechts{ gap:20px; }
.app-desk > .fokus > .hinweis{ left:auto; right:24px; width:min(440px, 40%); bottom:24px; }
/* Fokuszeit oben links auf Heute: Zeiger reagiert wie auf die Zeilen */
.desk-tag .fokus-banner{ transition:background-color var(--d-kurz) var(--standard); }
.desk-tag .fokus-banner:hover{ background:color-mix(in srgb, var(--akzent) 8%, transparent); }

/* ── css/teile/erster-start.css ── */
/* ==========================================================================
   EasyLife Wolke · Erster Start (js/teile/erster-start.js; Plan N2, Stufe 6)

   Der echte Erste Start in derselben Form wie die Vorschau des Prototyps (css/teile/einstellungen.css, „Erster Start
   (Vorschau über der App)“; in Wolke ebenda für die Vorschau unter Einstellungen): nur die Mitte und das Feld. Am Handy
   ist es das Heute ohne Tag-Schritte und Flächen, im Dock der Datenschutz-Satz statt der Reiter. Am Desktop steht die
   Tagesspalte allein in der Mitte (so breit wie später links), unten das Feld als weiße Leiste; die Arbeitsfläche ist zu.
   ========================================================================== */

/* der Kopf: „Sag, was ansteht.“ an der Stelle des Datums (eine Überschrift, sonst wie .tag-datum) */
.erster-start-titel{ margin:0; font:inherit; color:var(--tinte); }
.erster-start-kopf .tag-lage{ margin-top:6px; }

/* der Datenschutz-Satz unter dem Feld, darunter der Weg zur Datenschutzerklärung (Tippfläche 44 px) */
.erster-start-schutz{ padding:8px 10px 0 12px; }
.erster-start-schutz-satz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); text-wrap:pretty; }
.erster-start-schutz .erster-start-schutz-link{ margin:0 0 0 -8px; }
.einstellungen-start .erster-start-schutz{ padding-bottom:0; }

/* ---------- Desktop: erst eine Spalte in der Mitte ---------- */
.app-desk.erster-start{ grid-template-columns:minmax(0,1fr); justify-items:center; }
.app-desk.erster-start > .werk{ display:none; }
.app-desk.erster-start > .desk-links{ width:clamp(320px, 27vw, 404px); }
.app-desk.erster-start .desk-auf, .app-desk.erster-start .desk-zu, .app-desk.erster-start .desk-tipp{ display:none !important; }
.app-desk.erster-start .desk-tag{ display:block !important; }
.app-desk.erster-start .desk-links > .desk-erfassen{ margin-top:4px; }
.app-desk.erster-start .desk-links > .desk-erfassen .dock{ position:relative; left:auto; right:auto; bottom:auto; }
/* beim Gleiten an den Platz in der Leiste gehen Klappen ohne Bewegung zu (js/desktop/geruest.js, ersterStartVorbei) */
.app-desk.ohne-uebergang .klappe{ transition:none; }

/* ── css/teile/listen.css ── */
/* ==========================================================================
   EasyLife Wolke · Teil „listen" — nur Klassen mit Vorsatz .listen-… (und .teilen-… für das Teilen-Blatt)
   Übernommen aus dem Prototyp (design/neustart/runde-12/prototyp/css/teile/listen.css; Plan N2, Stufe 9), nur was die
   Listen dieser Stufe brauchen: der Kopf „Erledigt“, die Zeile „Hinzufügen“, Knöpfe und Fragen in Blättern. Die Teile
   für Familie und Haushalt, Geld und Papierkram kommen mit den Paketen (Stufe 13).
   Farben, Größen, Rundungen und Bewegung nur über css/tokens.css. Köpfe, Zeilen, Leerzustände, Blätter, Druckansicht
   und Fußsätze zeichnet der Kern (css/bausteine.css, css/desktop.css).
   Kanten: Marke auf Kante A, Text auf Kante B (A + 30 px).
   ========================================================================== */

/* ---------- Seite ---------- */
.listen-seite{ display:flex; flex-direction:column; min-width:0; }

/* ---------- Kopf „Erledigt · N“ (Nutzerprüfung Runde 12, Befund 4) ----------
   Ein eigener Kopf zwischen den offenen Punkten und der Gruppe „Erledigt“. Ist die Gruppe außer Sicht,
   bleibt er unten am Rand stehen (über dem Dock) und bekommt einen weißen Grund; ein abgehakter Punkt
   gleitet hinein, die Zahl hebt sich kurz. Antippen holt die Gruppe ins Bild. */
.listen-erledigt-kopf{ position:sticky; bottom:16px; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:16px 0 8px; min-height:44px; padding:0 0 0 4px; border-radius:22px;
  transition:background-color var(--d-kurz) var(--standard), box-shadow var(--d-kurz) var(--standard), padding var(--d-kurz) var(--standard); }
/* der Bereich hat unten schon Innenabstand für das Dock (dock-h + 48 px); Chrome rechnet „bottom“ von dort */
.app-handy .listen-erledigt-kopf{ bottom:-36px; }
/* steht unten ein Hinweis, bekommt der Bereich Luft (EL.hinweis); der Kopf steht dann über dem Hinweis */
.app-handy .hinweis-luft .listen-erledigt-kopf{ bottom:0; }
.listen-erledigt-kopf.klebt{ background:var(--grund); box-shadow:inset 0 0 0 1px var(--trenner), var(--schatten-heben); padding-left:12px; }
.listen-erledigt-knopf{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 8px 0 0; border-radius:12px;
  font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); }
.listen-erledigt-knopf svg{ width:16px; height:16px; color:var(--neben); }
.listen-erledigt-kopf.klebt .listen-erledigt-knopf{ color:var(--tinte); }
.listen-erledigt-zahl{ display:inline-block; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--mulde); color:var(--tinte); text-align:center; line-height:22px; font-weight:700; }
.listen-erledigt-kopf.nimmt-auf .listen-erledigt-zahl{ animation:listen-zahl-hebt 700ms var(--weich); }
@keyframes listen-zahl-hebt{ 0%{ transform:scale(1); } 30%{ transform:scale(1.35); background:var(--akzent-weich); } 100%{ transform:scale(1); } }
.listen-erledigt-kopf + .fl{ margin-top:0; }
@media (prefers-reduced-motion: reduce){ .listen-erledigt-kopf.nimmt-auf .listen-erledigt-zahl{ animation:none; } }

/* ---------- Zeile „Hinzufügen" am Ende einer Fläche ----------
   Plus auf Kante A (so breit wie der Kreis darüber), Text auf Kante B. */
.listen-hinzu{ position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) auto; column-gap:calc(var(--kante-b) - 22px); align-items:center;
  min-height:48px; padding:0 6px 0 calc(var(--innen) - 4px); margin:0 4px; border-radius:var(--r-zeile);
  transition:background-color var(--d-kurz) var(--standard); }
.fl-zeilen:not(:empty) + .listen-hinzu::before{ content:""; position:absolute; top:0; right:-4px; height:1px; background:var(--trenner);
  left:calc(var(--innen) - 4px + var(--kante-b)); }
.listen-hinzu:focus-within{ background:var(--mulde); }
.listen-hinzu:focus-within::before{ opacity:0; }
.listen-hinzu-plus{ display:flex; justify-content:center; color:var(--akzent); }
.listen-hinzu-plus svg.i{ width:20px; height:20px; }
.listen-hinzu-eingabe{ min-width:0; height:44px; border:0; outline:none; background:transparent; padding:0;
  font:inherit; font-size:var(--t-text); color:var(--tinte); }
.listen-hinzu-eingabe::placeholder{ color:var(--neben); opacity:1; }
.listen-hinzu-knopf{ min-height:44px; padding:0 12px; border-radius:12px; font-size:var(--t-mittel); font-weight:700; color:var(--akzent); }
.listen-hinzu-knopf:active{ background:var(--akzent-weich); }

/* ---------- Blätter: Frage mit Wortschalter, Knöpfe ---------- */
.listen-wahl{ padding:2px 12px 12px var(--innen); }
.listen-wahl .ws{ margin-top:10px; }
.lz .ws{ flex:0 0 auto; }

/* ---------- Teilen-Blatt (js/teile/teilen.js) ---------- */
/* „Teilen anfangen“: ein Knopf unter der Fläche, Kern-Form (Pille), am Handy über die ganze Breite */
.teilen-knoepfe{ display:grid; gap:8px; padding:14px 0 2px; }
.blatt-mitte .teilen-knoepfe{ display:flex; flex-wrap:wrap; justify-content:flex-end; padding-top:16px; }
/* der Link selbst bricht überall um (er ist ein langes Wort), nichts wird abgeschnitten */
.teilen-link{ overflow-wrap:anywhere; }
.teilen-link-knoepfe{ flex-wrap:wrap; }
.teilen-leise{ padding-top:0; padding-bottom:2px; }

/* ── css/teile/druck.css ── */
/* ==========================================================================
   EasyLife Wolke · Drucken (zu js/teile/druck.js, Plan N2, Stufe 9; die Woche aus Stufe 7 druckt ebenso)
   Beim Drucken aus der Druckansicht kommt nur das Papier aufs Blatt, ohne Rahmen und Schatten.
   ========================================================================== */
@media print{
  html.el-druckt body *{ visibility:hidden !important; }
  html.el-druckt .druck-papier, html.el-druckt .druck-papier *{ visibility:visible !important; }
  html.el-druckt .druck-papier{ position:fixed; left:0; top:0; width:100%; max-width:none; margin:0; padding:0; box-shadow:none; border-radius:0; background:#fff; color:#000; }
}

/* ── css/teile/planen/tiefe.css ── */
/* ==========================================================================
   EasyLife Wolke · Planen › Projekte und Ziele als Karte (Plan N2, Stufe 8)
   Aus dem Prototyp design/neustart/runde-12/prototyp/css/teile/planen/tiefe.css (Variante C, gemeinsame Teile und das
   Desktop-Gerüst; Ordner, Gliederung und die Vorführ-Wahl entfallen). Nur Tokens, keine Farbwerte. Klassen .tiefe-.
   Neu gegenüber dem Prototyp, je markiert: das Ablageziel ohne die Werkbank (.tiefe-ziel-an, wie .planen-ziel-an dort),
   „Erledigt · N“, „…“ im Pfad, eine Karte mit langem Namen über die ganze Breite, wer mitmacht, die Liste für Bildschirmleser.
   ========================================================================== */

/* Handy: Abstände zwischen den Teilen der Seite */
.tiefe-handy > * + *{ margin-top:10px; }
.tiefe-handy .fl-kopf{ min-height:48px; }
.tiefe-handy > .fuss-satz{ margin-top:0; }

/* Zeilen */
.tiefe-blockiert .zl-zusatz{ color:var(--tinte); }
.tiefe-naechster .zl-titel{ font-weight:700; }

/* ---------- Hinzufügen: „+ Unterziel · + Projekt · + Schritt“ (am Desktop als Wort-Knöpfe im Fuß) ---------- */
.tiefe-hinzu{ display:flex; flex-wrap:wrap; align-items:center; column-gap:20px; row-gap:0; padding:2px 12px 4px var(--innen); }
.tiefe-hinzu .wort-knopf{ margin:0 -8px; }
.tiefe-feld{ background:var(--mulde); }
.tiefe-feld-huelle{ padding:4px 10px 10px; }
.tiefe-feld .feld-eingabe{ padding-left:12px; min-width:0; width:0; }
/* neu: der Name wächst mit (ein langer Name steht ganz da, nichts wird abgeschnitten) */
.feld.tiefe-feld{ height:auto; min-height:46px; align-items:flex-end; padding-top:1px; padding-bottom:1px; }
.tiefe-name-eingabe{ display:block; height:auto; min-height:44px; padding:11px 0 11px 12px; line-height:22px; resize:none; overflow:hidden; align-self:stretch; }

/* ---------- Blätter „Ändern“, „Wohin?“, „Der ganze Weg“ ---------- */
.tiefe-wohin .lz{ padding-left:calc(var(--innen) + var(--ebene, 0) * 18px); min-height:48px; }
.tiefe-wohin .lz + .lz::before{ left:calc(var(--innen) + var(--ebene, 0) * 18px); }
.tiefe-wohin .lz.ist-gewaehlt{ background:var(--akzent-weich); padding-left:calc(var(--innen) - 4px + var(--ebene, 0) * 18px); }
.tiefe-wohin .lz.ist-gewaehlt .lz-titel, .tiefe-wohin .lz.ist-gewaehlt .lz-zusatz{ color:var(--akzent-tief); }
.tiefe-gehoert{ display:flex; flex-direction:column; gap:6px; padding-top:4px; }
.tiefe-gehoert .chips{ margin-top:2px; }

/* ======================================================================
   Desktop-Gerüst: Baum (die Karte) oder Brett; „Baum · Brett“ steht im Kopf, am Handy oben
   ====================================================================== */
.tiefe-desk{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.tiefe-desk-koerper{ flex:1 1 auto; min-height:360px; display:flex; flex-direction:column; min-width:0; }
.tiefe-desk-koerper > *{ flex:1 1 auto; min-height:0; }
.tiefe-modus .ws-wort{ font-size:var(--t-mittel); }
.tiefe-modus-zeile .tiefe-modus{ display:flex; width:100%; background:var(--mulde); }
.tiefe-modus-zeile .tiefe-modus .ws-wort{ flex:1 1 0; }

/* ======================================================================
   C · Karte
   ====================================================================== */
/* Ring: wie viel darunter erledigt ist */
.tiefe-ring{ position:relative; display:inline-flex; flex:0 0 auto; }
.tiefe-ring svg{ display:block; overflow:visible; }
.tiefe-ring .spur{ fill:none; stroke:var(--mulde); stroke-width:4; }
.tiefe-ring .bogen{ fill:none; stroke:var(--neben); stroke-width:4; stroke-linecap:round; }
.tiefe-ring.null .bogen{ opacity:0; }
.tiefe-ring.gross .spur, .tiefe-ring.gross .bogen{ stroke-width:5; }
.tiefe-ring .haken{ fill:none; stroke:var(--neben); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.tiefe-ring.zaehlt{ animation:tiefe-puls 760ms var(--weich); }
@keyframes tiefe-puls{ 0%{ transform:scale(1); } 45%{ transform:scale(1.14); } 100%{ transform:scale(1); } }

.tiefe-c{ position:relative; overflow-anchor:none; }
.tiefe-handy{ overflow-anchor:none; }
.tiefe-c-linien{ position:absolute; left:0; top:0; z-index:0; pointer-events:none; overflow:visible; }
.tiefe-c-linien path{ fill:none; stroke:var(--kreis); stroke-width:1.5; stroke-linecap:round; opacity:.6; }
.tiefe-c-linien path.duenn{ stroke-width:1.2; }
.tiefe-c-linien path.weg{ stroke:var(--akzent); stroke-width:2.5; opacity:1; }
.tiefe-c-linien path.weg.duenn{ stroke-width:2; }
.tiefe-c > :not(.tiefe-c-linien):not(.tiefe-c-geist):not(.tiefe-vorlesen){ position:relative; z-index:1; }
.tiefe-c-geist{ position:absolute; z-index:3; margin:0; pointer-events:none; }

/* Pfad: die Ebenen darüber als kleine Ringe (zoomt hinaus) */
.tiefe-c-pfad{ display:flex; flex-wrap:wrap; gap:6px; }
.tiefe-c-pfadteil{ display:inline-flex; align-items:center; gap:6px; min-height:44px; max-width:100%; padding:0 12px 0 6px; border-radius:22px; background:var(--flaeche); box-shadow:var(--schatten-pille);
  font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); text-align:left; }
@media (hover:hover){ .tiefe-c-pfadteil:hover{ color:var(--tinte); } }
.tiefe-c-pfadteil .tiefe-ring svg{ width:28px; height:28px; }
/* neu (Entscheidung 15): „…“ steht für die Ebenen dazwischen und öffnet den ganzen Weg */
.tiefe-c-pfad-mehr{ min-width:44px; justify-content:center; padding:0 14px; font-size:var(--t-mittel); }

/* die Nabe: der Knoten im Blick */
.tiefe-c-nabe{ position:relative; background:var(--flaeche); border-radius:var(--r-flaeche); box-shadow:var(--schatten-gruppe); padding:14px 12px 4px var(--innen); }
.tiefe-c-handy .tiefe-c-pfad + .tiefe-c-nabe{ margin-top:10px; }
.tiefe-c-nabe-kopf{ display:flex; align-items:center; gap:12px; }
.tiefe-c-nabe-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.tiefe-c-nabe-titel{ font-size:var(--t-text); line-height:var(--z-text); font-weight:700; text-wrap:balance; overflow-wrap:break-word; }
.tiefe-c-art{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.tiefe-c-stand{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.tiefe-c-aendern{ position:absolute; top:4px; right:10px; margin:0; }
.tiefe-c-nabe .tiefe-c-nabe-text > .tiefe-c-art{ padding-right:66px; }
.tiefe-c-weg{ margin:12px -12px 0 calc(-1 * var(--innen)); border-top:1px solid var(--trenner); padding-top:4px; }
.tiefe-c-weg-kopf{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:700; color:var(--akzent-tief); padding:6px 12px 0 var(--innen); }
/* neu (Entscheidung 14): mit wem es geteilt ist */
.tiefe-c-geteilt{ display:flex; align-items:flex-start; gap:5px; margin-top:4px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--tinte); }
.tiefe-c-geteilt svg.i{ width:14px; height:14px; margin-top:2px; color:var(--neben); }

/* Äste: Karten, die hineinzoomen */
.tiefe-c-aeste{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 20px; margin-top:28px; }
.tiefe-c-handy .tiefe-c-karte{ position:relative; }
.tiefe-c-handy .tiefe-c-karte > .tiefe-ring{ position:absolute; top:10px; right:10px; }
.tiefe-c-handy .tiefe-c-karte > .tiefe-ring svg{ width:30px; height:30px; }
.tiefe-c-handy .tiefe-c-karte .tiefe-c-art{ min-height:30px; display:flex; align-items:center; padding-right:34px; margin-top:-2px; }
.tiefe-c-aeste.einzeln{ grid-template-columns:minmax(0,1fr); }
/* neu (Entscheidung 15): ein langer Name wird nie gekürzt; seine Karte bekommt am Handy die ganze Breite */
.tiefe-c-handy .tiefe-c-karte.lang{ grid-column:1 / -1; }
.tiefe-c-karte{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; min-height:44px; padding:12px; border-radius:var(--r-zeile); text-align:left;
  background:var(--flaeche); box-shadow:var(--schatten-zeile); transition:background-color var(--d-kurz) var(--standard), opacity 160ms var(--standard); }
@media (hover:hover){ .tiefe-c-karte:hover{ background:var(--mulde); } }
.tiefe-c-karte.auf-weg{ box-shadow:var(--schatten-zeile), inset 0 0 0 2px var(--akzent); }
.tiefe-c-karte.fertig .tiefe-c-titel{ color:var(--neben); }
.tiefe-c-karte.hervor{ animation:hervor-karte 1400ms var(--standard) both; }
.tiefe-c-mitte{ display:flex; flex-direction:column; gap:1px; width:100%; min-width:0; }
.tiefe-c-titel{ font-size:var(--t-mittel); line-height:20px; font-weight:700; color:var(--tinte); overflow-wrap:break-word; hyphens:manual; }
.tiefe-c-naechst{ display:flex; align-items:baseline; gap:6px; margin-top:4px; font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--akzent-tief); }
.tiefe-c-naechst i{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--akzent); transform:translateY(-1px); }
.tiefe-c-wartet{ display:flex; align-items:flex-start; gap:5px; margin-top:4px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--tinte); }
.tiefe-c-wartet svg.i{ width:14px; height:14px; margin-top:2px; color:var(--neben); }
.tiefe-c-zweige{ display:flex; flex-direction:column; gap:1px; margin-top:6px; padding-top:6px; border-top:1px solid var(--trenner); width:100%; }
.tiefe-c-zweig{ display:flex; align-items:baseline; gap:6px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.tiefe-c-zweig i{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--kreis); transform:translateY(-1px); }
.tiefe-c-zweig.fertig i{ background:var(--neben); box-shadow:none; }
.tiefe-c-perlen{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:6px; }
.tiefe-c-perlen i{ width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--kreis); }
.tiefe-c-perlen i.an{ background:var(--neben); box-shadow:none; }
.tiefe-c-perlen i.wartet{ box-shadow:inset 0 0 0 1.5px var(--tinte); background:var(--mulde); }
.tiefe-c-perlen b{ font-size:12px; line-height:12px; font-weight:600; color:var(--neben); }

/* neu (Entscheidung 15): erledigte Äste sammeln sich unter „Erledigt · N“ — dieselbe Pille wie „Früher heute“ */
.tiefe-c-erledigt-kopf{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; margin-top:12px; padding:0 16px; border-radius:22px; background:var(--flaeche); box-shadow:var(--schatten-pille);
  font-size:13.5px; line-height:20px; font-weight:500; color:var(--neben); text-align:left; }
.tiefe-c-erledigt-kopf > .sym:first-child{ color:var(--neben); }
.tiefe-c-erledigt-kopf svg.i{ width:16px; height:16px; }
.tiefe-c-erledigt-kopf .tiefe-c-erledigt-pfeil{ margin-left:auto; }
.tiefe-c-erledigt-kopf .tiefe-c-erledigt-pfeil svg.i{ transition:transform var(--d-mittel) var(--weich); }
.tiefe-c-erledigt-kopf[aria-expanded="true"] .tiefe-c-erledigt-pfeil svg.i{ transform:rotate(180deg); }
.tiefe-c-erledigt-kopf:active{ background:var(--mulde); }
.tiefe-c-aeste-fertig{ margin-top:12px; }

/* Schritte des Knotens im Blick: die Blätter des Baums */
.tiefe-c-schritte{ margin-top:30px; background:var(--flaeche); border-radius:var(--r-flaeche); box-shadow:var(--schatten-gruppe); padding:6px 0 4px; }
.tiefe-c-aeste + .tiefe-c-schritte, .tiefe-c-erledigt-kopf + .tiefe-c-schritte{ margin-top:12px; }
.tiefe-c-schritte-kopf{ display:flex; align-items:baseline; gap:6px; padding:6px 12px 2px var(--innen); font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:700; }
.tiefe-c-schritte-kopf span{ font-weight:500; color:var(--neben); }
.tiefe-c-leer{ margin-top:14px; background:var(--flaeche); border-radius:var(--r-flaeche); box-shadow:var(--schatten-gruppe); }

/* Desktop: von oben nach unten. Oben Pfad und Nabe, darunter die Äste als Säulen; reicht die Breite nicht, beginnt eine
   neue Reihe. Die Fläche scrollt nach unten und lässt sich schieben. */
.tiefe-c-rahmen{ display:flex; flex-direction:column; gap:8px; height:100%; min-height:0; min-width:0; }
.tiefe-c-desktop{ flex:1 1 auto; min-height:0; overflow:auto; border-radius:18px; background:var(--grund); cursor:grab; scrollbar-width:thin; scrollbar-color:var(--kreis) transparent; }
.tiefe-c-desktop.schiebt{ cursor:grabbing; }
.tiefe-c-desktop .tiefe-c-karte, .tiefe-c-desktop .tiefe-c-pfadteil{ cursor:pointer; }
.tiefe-c-desktop .tiefe-c-nabe{ cursor:default; }
.tiefe-c-feld{ display:flex; flex-direction:column; align-items:center; gap:46px; min-width:100%; min-height:100%; padding:16px 24px 28px; }
.tiefe-c-spalte-nabe{ width:min(540px, 100%); display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.tiefe-c-desktop .tiefe-c-pfad{ margin:0; justify-content:center; }
.tiefe-c-desktop .tiefe-c-nabe-titel{ font-size:var(--t-gross); line-height:var(--z-gross); }
.tiefe-c-spalte-aeste{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:40px 20px; width:100%; }
.tiefe-c-reihe{ display:flex; flex-direction:column; align-items:stretch; gap:10px; width:232px; }
.tiefe-c-reihe-schritte{ width:320px; }
.tiefe-c-desktop .tiefe-c-karte{ width:100%; }
.tiefe-c-desktop .tiefe-c-karte:not(.klein){ flex-direction:row; align-items:flex-start; gap:10px; }
.tiefe-c-enkel{ display:flex; flex-direction:column; gap:8px; padding-left:24px; }
.tiefe-c-desktop .tiefe-c-karte.klein{ flex-direction:row; align-items:center; gap:8px; padding:8px 12px 8px 8px; border-radius:var(--r-zeile); }
.tiefe-c-karte.klein .tiefe-ring svg{ width:28px; height:28px; }
.tiefe-c-karte.klein .tiefe-c-titel{ font-size:var(--t-klein); line-height:var(--z-klein); }
.tiefe-c-karte.klein .tiefe-c-stand, .tiefe-c-karte.klein .tiefe-c-art{ font-size:12px; line-height:16px; }
.tiefe-c-desktop .tiefe-c-schritte{ width:100%; margin:0; }
.tiefe-c-desktop .tiefe-c-leer{ margin:0; width:300px; }
.werk-inhalt .tiefe-c-schritte .zl{ padding-right:10px; }
.tiefe-c-fuss{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; column-gap:18px; }
.werk-inhalt .tiefe-c-fuss .tiefe-hinzu{ padding-left:0; }
.werk-inhalt .tiefe-c-hilfe{ padding:0; flex:1 1 320px; text-align:right; }

/* neu (ohne die Werkbank des Prototyps): Ablageziel beim Ziehen, wie .planen-ziel-an dort (css/teile/planen/werkbank.css:13) */
.tiefe-ziel-an{ outline:2px dashed var(--akzent); outline-offset:-2px; background-color:var(--akzent-weich) !important; }
/* abgelegt: die Karte tritt zurück, bis der Kern sie an ihren neuen Platz gelegt hat */
.tiefe-c-geht{ opacity:.3; }

/* neu (Entscheidung 15): der Baum für Bildschirmleser — nur vorgelesen, nie zu sehen */
.tiefe-vorlesen{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

@media (prefers-reduced-motion:reduce){ .tiefe-ring.zaehlt{ animation:none; } .tiefe-c-karte{ transition:none; } }

/* ── css/teile/planen/werkbank.css ── */
/* ==========================================================================
   EasyLife Wolke (aus dem Prototyp design/neustart/runde-12/prototyp/) · Teil „planen“ — Desktop-Werkbank
   Monat und Jahr, Später, Routinen,
   Wartet auf, Vorlagen, Modus, Rückblick. Kopf, Flächen, Zeilen, Leer und
   Fußsätze kommen aus dem Kern; seit Punkt 45 (Wolke am Desktop) stehen sie wie am
   Handy als weiße Karten auf dem Grund; Monat und Jahr sind je eine große Karte. Das Brett: brett.css.
   Nur Tokens.
   ========================================================================== */

/* ---------- gemeinsam ---------- */
.planen-wd-leise{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); text-wrap:pretty; }
.planen-wd-karten{ display:flex; flex-direction:column; gap:6px; }
.planen-ziel-an{ outline:2px dashed var(--akzent); outline-offset:-2px; background-color:var(--akzent-weich) !important; }
/* Überschrift in einer Ablage (Mulde): Form des Flächenkopfs, auf der Kante der Karten */

/* Karte: ein Ding, das man ziehen kann (Ohne Datum, Band, Brett) */
.planen-wk{ display:flex; flex-direction:column; justify-content:center; gap:1px; width:100%; min-height:44px; padding:6px 10px; border-radius:var(--r-block); background:var(--flaeche);
  box-shadow:inset 0 0 0 1px var(--kreis); text-align:left; transition:background-color var(--d-kurz) var(--standard); }
.planen-wk:hover{ background:var(--mulde); }
.planen-wk.ohne-zug{ cursor:pointer; }
.planen-wk-titel{ font-size:var(--t-klein); line-height:17px; font-weight:600; color:var(--tinte); overflow-wrap:break-word; }
.planen-wk-zusatz{ font-size:12px; line-height:16px; color:var(--neben); overflow-wrap:break-word; }
.planen-wk-sym{ display:inline-flex; vertical-align:-2px; margin-right:4px; color:var(--neben); }
.planen-wk-sym svg.i{ width:14px; height:14px; }
.planen-wk.ist-erledigt .planen-wk-titel{ color:var(--neben); font-weight:500; text-decoration:line-through; text-decoration-color:var(--kreis); }
.planen-wk.klein{ padding:4px 7px; }
.planen-wk[data-art] .planen-wk-titel::before{ content:""; display:inline-block; width:8px; height:8px; margin:0 6px 1px 0; border-radius:50%; background:var(--diese-art); vertical-align:middle; }
.planen-wk.ist-erledigt[data-art] .planen-wk-titel::before{ background:var(--diese-art-grund); box-shadow:inset 0 0 0 1.5px var(--diese-art); }
.planen-wk.klein .planen-wk-titel{ font-size:12px; line-height:15px; }

/* Die Woche (Sammlung, Raster, Tag, Woche planen) steht seit Runde 12 in css/teile/planen/woche.css. */

/* ======================================================================
   MONAT UND JAHR: Raster aus Linien (keine Kacheln), heute im Akzent
   ====================================================================== */
.planen-md-monat, .planen-md-jahr{ display:flex; flex-direction:column; gap:14px; }
.planen-md-monat > .fl + *, .planen-md-monat > * + .fuss-satz{ margin-top:0; }
/* Wolke: das Raster ist eine große weiße Karte auf dem Grund (Rundung 22, --schatten-karte); innen nur leise Linien */
.planen-md-raster{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); background:var(--flaeche); border-radius:var(--r-karte); box-shadow:var(--schatten-karte); overflow:hidden; }
.planen-md-raster > :nth-child(7n){ border-right:0; }
.planen-md-raster > :nth-last-child(-n+7){ border-bottom:0; }
.planen-md-wt{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); padding:8px 8px 6px; border-right:1px solid var(--trenner); border-bottom:1px solid var(--trenner); }
.planen-md-tag{ display:flex; flex-direction:column; align-items:stretch; gap:2px; min-height:104px; padding:6px 8px 8px; text-align:left; overflow:hidden; border-right:1px solid var(--trenner); border-bottom:1px solid var(--trenner); border-radius:0; transition:background-color var(--d-kurz) var(--standard); }
.planen-md-tag:hover{ background:var(--mulde); }
.planen-md-kopf{ display:flex; align-items:center; justify-content:space-between; gap:4px; margin-bottom:2px; }
.planen-md-nr{ font-size:var(--t-klein); line-height:22px; font-weight:700; min-width:24px; }
.planen-md-tag.fremd .planen-md-nr, .planen-md-tag.ist-vorbei .planen-md-nr{ color:var(--neben); }
.planen-md-tag.ist-heute .planen-md-nr{ display:inline-flex; justify-content:center; padding:0 6px; border-radius:11px; background:var(--akzent-weich); color:var(--akzent); }
/* die Schicht steht als eigene leise Zeile unter der Zahl und bricht um, statt abgeschnitten zu werden */
.planen-md-schicht{ font-size:12px; line-height:16px; color:var(--neben); overflow-wrap:break-word; text-wrap:pretty; }
.planen-md-ding{ font-size:12px; line-height:16px; color:var(--tinte); overflow-wrap:break-word; }   /* ganz, nie gekürzt (Punkt 42) */
.planen-md-tag.fremd .planen-md-ding{ color:var(--neben); }
.planen-md-ding.ist-erledigt{ color:var(--neben); text-decoration:line-through; }
.planen-md-ding.ist-hinweis{ color:var(--neben); }
.planen-md-zeit{ color:var(--neben); }
.planen-md-mehr{ font-size:12px; line-height:16px; color:var(--neben); }
.planen-jahr-raster{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); background:var(--flaeche); border-radius:var(--r-karte); box-shadow:var(--schatten-karte); overflow:hidden; }
.planen-jahr-raster > :nth-child(4n){ border-right:0; }
.planen-jahr-raster > :nth-last-child(-n+4){ border-bottom:0; }
.planen-jahr-kachel{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:156px; padding:12px 14px; text-align:left; border-right:1px solid var(--trenner); border-bottom:1px solid var(--trenner); border-radius:0; transition:background-color var(--d-kurz) var(--standard); }
.planen-jahr-kachel:hover{ background:var(--mulde); }
.planen-jahr-name{ font-size:var(--t-mittel); font-weight:700; }
.planen-jahr-kachel.ist-jetzt .planen-jahr-name{ color:var(--akzent); }
.planen-jahr-kachel.ist-vorbei .planen-jahr-name{ color:var(--neben); }
.planen-jahr-sp{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--tinte); text-wrap:pretty; }
.planen-jahr-sp.ist-leer{ font-weight:400; color:var(--neben); }
.planen-jahr-kurz{ font-size:12px; line-height:16px; color:var(--neben); margin-top:auto; text-wrap:pretty; }
.planen-mini{ display:grid; grid-template-columns:repeat(7, 7px); gap:4px; margin:2px 0; }
.planen-mini i{ width:7px; height:7px; border-radius:50%; background:var(--trenner); }
.planen-mini i.voll{ background:var(--neben); }
.planen-mini i.schicht{ background:var(--kreis); opacity:.55; }
.planen-mini i.fremd{ visibility:hidden; }
.planen-mini i.heute{ background:var(--akzent); }

/* ======================================================================
   SPÄTER (Desktop): dieselben Flächen wie am Handy, darüber klebt der Streifen der 14 Tage aus weißen Kacheln
   (Form der Tageskacheln in der Woche: weiß, Rundung 16, --schatten-pille; heute blau)
   ====================================================================== */
.planen-sd{ display:flex; flex-direction:column; }
.planen-sd > .fl + .fl, .planen-sd > * + .fl{ margin-top:16px; }
.planen-sd-tagefl{ position:sticky; top:-12px; z-index:6; margin-top:-12px; padding:12px 0 4px; background:var(--grund); }
.planen-sd-tagefl::after{ content:""; position:absolute; left:0; right:0; top:100%; height:14px; pointer-events:none;
  background:linear-gradient(to bottom, var(--grund), color-mix(in srgb, var(--grund) 0%, transparent)); }
.planen-sd-tage{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.planen-sd-tag{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; min-height:56px; padding:6px 10px; border-radius:var(--r-zeile);
  background:var(--flaeche); box-shadow:var(--schatten-pille); text-align:left; transition:background-color var(--d-kurz) var(--standard); }
.planen-sd-tag:hover{ background:var(--mulde); }
.planen-sd-tag-name{ font-size:var(--t-klein); line-height:17px; font-weight:700; }
.planen-sd-tag-zusatz{ font-size:12px; line-height:15px; color:var(--neben); }
.planen-sd-tag.ist-heute .planen-sd-tag-name{ color:var(--akzent); }
.planen-sd .fl.planen-ziel-an{ outline:none; background:none !important; }
.planen-sd .fl.planen-ziel-an > .fl-zeilen{ background:var(--akzent-weich); box-shadow:inset 0 0 0 2px var(--akzent); }

/* PROJEKTE UND ZIELE: Baum und Brett stehen seit Runde 12, Schritt 4 in css/teile/planen/tiefe.css und brett.css. */

/* ======================================================================
   ROUTINEN, WARTET AUF, VORLAGEN, MODUS, RÜCKBLICK (Desktop)
   Links Zeilen (die gewählte getönt), rechts ihr Inhalt in Flächen.
   ====================================================================== */
.planen-rd, .planen-wtd, .planen-vd, .planen-md-modus, .planen-rbd{ display:flex; flex-direction:column; }
/* Routinen, Wartet auf, Vorlagen am Desktop: b.auswahl (Kern, css/desktop.css), Runde 12, Schritt 5 */
.planen-rd-liste > .fl + .fl{ margin-top:18px; }
.planen-rd-detail{ display:flex; flex-direction:column; min-width:0; }
.planen-rd-detail > .fl + .fl, .planen-zwei-rechts > .fl + .fl, .planen-zwei-rechts > * + .fl{ margin-top:18px; }
.planen-rd-innen{ padding:4px 12px 8px var(--innen); }
.planen-rd-innen .planen-punkte-kopf{ padding-left:0; }
.planen-rd-innen .planen-punkte{ max-width:560px; }
.planen-rd-innen .planen-punkte-kopf span{ font-variant-numeric:tabular-nums; }
.planen-rd-innen .planen-skala{ max-width:420px; }
.planen-rd-innen .planen-formular{ margin-top:0; }
.planen-rd-innen .planen-r-schalter{ margin-top:0; max-width:560px; }
.planen-kurve{ margin:12px 0 0; max-width:560px; }
.planen-kurve figcaption{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); margin-bottom:4px; }
.planen-kurve-svg{ display:block; width:100%; height:auto; overflow:visible; }
.planen-kurve-svg .gitter{ stroke:var(--trenner); stroke-width:1; }
.planen-kurve-svg .achse{ fill:var(--neben); font-size:12px; font-family:var(--schrift); }
.planen-kurve-svg .wert{ fill:var(--tinte); font-size:13px; font-weight:700; font-family:var(--schrift); }
.planen-kurve-svg .linie{ fill:none; stroke:var(--tinte); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.planen-kurve-svg .punkt circle:first-child{ fill:var(--flaeche); stroke:var(--tinte); stroke-width:2; }
.planen-kurve-svg .punkt.letzt circle:first-child{ fill:var(--tinte); stroke:var(--flaeche); }
.planen-kurve-svg .treffer{ fill:transparent; stroke:none; }
.planen-kurve-svg .punkt:hover circle:first-child{ stroke-width:3; }
.planen-rr-halter{ display:flex; flex-direction:column; }
.planen-rr{ display:flex; flex-direction:column; }
.planen-rr-zeile{ display:grid; grid-template-columns:minmax(200px, 1.3fr) repeat(7, minmax(56px, 1fr)); align-items:center; min-height:56px; border-top:1px solid var(--trenner); }
.planen-rr-zeile.kopf{ min-height:36px; border-top:0; }
.planen-rr-name{ display:flex; flex-direction:column; padding-right:12px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.planen-rr-name b{ font-size:var(--t-mittel); line-height:20px; font-weight:600; color:var(--tinte); }
.planen-rr-zeile.kopf .planen-rr-name{ font-weight:600; }
.planen-rr-tag{ text-align:center; font-size:var(--t-klein); font-weight:600; color:var(--neben); font-variant-numeric:tabular-nums; }
.planen-rr-tag.ist-heute{ color:var(--akzent); font-weight:700; }
.planen-rr-zelle{ display:flex; justify-content:center; }
.werk-inhalt .planen-rr-gruppe .abschnitt{ display:block; padding:18px 0 6px; }

.planen-zwei-links{ display:flex; flex-direction:column; min-width:0; }
.planen-zwei-rechts{ display:flex; flex-direction:column; min-width:0; }
.planen-w-entwurf{ display:flex; flex-direction:column; gap:10px; padding:4px 12px 8px var(--innen); }
.planen-w-entwurf .knopf-reihe{ display:flex; flex-wrap:wrap; gap:8px; }
.planen-textfeld{ width:100%; min-height:150px; resize:vertical; border:0; outline:none; border-radius:var(--r-zeile); background:var(--mulde); color:var(--tinte); font:inherit; font-size:var(--t-mittel); line-height:var(--z-mittel); padding:12px 14px; }
.planen-textfeld:focus-visible{ box-shadow:inset 0 0 0 1.5px var(--akzent); }
.planen-vd .planen-mw{ max-width:400px; }
.planen-strahl{ position:relative; height:84px; margin:10px 40px 8px calc(var(--innen) + 12px); }
.planen-strahl-linie{ position:absolute; left:0; right:0; top:14px; height:2px; background:var(--trenner); border-radius:1px; }
.planen-strahl-punkt{ position:absolute; top:8px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; }
.planen-strahl-punkt i{ width:14px; height:14px; border-radius:50%; background:var(--flaeche); box-shadow:inset 0 0 0 2px var(--neben); }
.planen-strahl-punkt.ziel i{ background:var(--tinte); box-shadow:none; }
.planen-strahl-punkt.vorbei i{ box-shadow:inset 0 0 0 2px var(--kreis); }
.planen-strahl-text{ display:flex; flex-direction:column; align-items:center; margin-top:6px; font-size:12px; line-height:16px; color:var(--neben); white-space:nowrap; }
.planen-strahl-text b{ color:var(--tinte); font-weight:600; }
.planen-schmal{ display:flex; flex-direction:column; }
.planen-schmal > .fl + .fl{ margin-top:18px; }

/* Fußsätze und Überschriften außerhalb bzw. innerhalb von Flächen setzt der Kern (css/desktop.css) auf ihre Kante */

@media (prefers-reduced-motion:reduce){
  .planen-wb, .planen-wk, .planen-md-tag, .planen-sd-tag, .planen-jahr-kachel{ transition:none; }
}

/* ── css/teile/planen/woche.css ── */
/* ==========================================================================
   EasyLife Wolke (aus dem Prototyp design/neustart/runde-12/prototyp/) · Teil „planen“ — Woche, Tag, Sammlung „Einplanen“, Woche planen (Runde 12, Schritt 2)
   Aussehen „Wolke“: heller Grund, weiße Karten, runde Plaketten, Farben der Arten gedämpft, viel Luft.
   Das Raster lebt statt kalt zu wirken: kaum Linien (nur leise Stundenlinien), Blöcke in der Farbe
   ihrer Art, die laufende Karte füllt sich bis jetzt, die Jetzt-Linie ist dunkel mit der Uhrzeit als Pille.
   Nur Tokens; Bewegung nur transform und opacity (die Werte der Zieh-Bewegung: css/ziehen.css).
   ========================================================================== */

/* ======================================================================
   „Einplanen · N“ und die Sammlung (Handy und Desktop)
   ====================================================================== */
.planen-sammlung-knopf{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px 0 14px; border-radius:var(--r-pille);
  background:var(--flaeche); box-shadow:var(--schatten-pille); color:var(--tinte); font-size:var(--t-mittel); font-weight:650; transition:background-color var(--d-kurz) var(--standard), box-shadow var(--d-kurz) var(--standard); }
.planen-sammlung-knopf svg.i{ width:18px; height:18px; color:var(--neben); }
.planen-sammlung-zahl{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 7px; border-radius:13px;
  background:var(--akzent-flaeche); color:var(--auf-akzent); font-size:var(--t-klein); font-weight:700; }
.planen-sammlung-pfeil{ display:inline-flex; color:var(--neben); transition:transform var(--d-mittel) var(--weich); }
.planen-sammlung-pfeil svg.i{ width:16px; height:16px; }
.planen-sammlung-knopf.offen .planen-sammlung-pfeil{ transform:rotate(180deg); }
@media (hover:hover){ .planen-sammlung-knopf:hover{ background:var(--mulde); } }

.planen-sammlung{ position:relative; border-radius:var(--r-flaeche); transition:background-color var(--d-kurz) var(--standard); }
.planen-sammlung-reihe{ display:flex; align-items:flex-start; gap:22px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; }
.planen-sammlung-reihe::-webkit-scrollbar{ display:none; }
.planen-sammlung-reihe.mehr-rechts{ -webkit-mask-image:linear-gradient(to right, black calc(100% - 44px), transparent); mask-image:linear-gradient(to right, black calc(100% - 44px), transparent); }
.planen-sammlung-reihe.mehr-links.mehr-rechts{ -webkit-mask-image:linear-gradient(to right, transparent, black 32px, black calc(100% - 44px), transparent); mask-image:linear-gradient(to right, transparent, black 32px, black calc(100% - 44px), transparent); }
.planen-sammlung-gruppe{ flex:0 0 auto; display:flex; flex-direction:column; gap:6px; }
.planen-sammlung-titel{ display:flex; align-items:baseline; gap:6px; padding:0 4px; font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); }
.planen-sammlung-titel .fl-kopf-zusatz{ font-weight:500; }
.planen-sammlung-karten{ display:flex; gap:8px; }
.planen-sammlung-leer{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); padding:12px 4px; }
/* eine Karte: runde Plakette, Titel, darunter die Frist oder das Projekt, rechts die Dauer */
.planen-sk{ position:relative; flex:0 0 auto; width:224px; min-height:60px; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; column-gap:10px;
  padding:9px 12px 9px 10px; border-radius:var(--r-zeile); background:var(--flaeche); box-shadow:var(--schatten-zeile); text-align:left; color:var(--tinte);
  transition:box-shadow var(--d-kurz) var(--standard), background-color var(--d-kurz) var(--standard), transform var(--d-kurz) var(--weich); }
@media (hover:hover){ .planen-sk:hover{ box-shadow:var(--schatten-heben), var(--schatten-zeile); } }
.planen-sk-marke{ display:flex; align-items:center; justify-content:center; }
.planen-sk-was{ display:flex; flex-direction:column; min-width:0; }
/* Titel und Zusatz stehen ganz da (nie mit „…“ gekürzt, Punkt 42); die Karte wird dafür höher */
.planen-sk-titel{ font-size:var(--t-mittel); line-height:19px; font-weight:600; overflow-wrap:break-word; }
.planen-sk-zusatz{ font-size:12px; line-height:16px; color:var(--neben); margin-top:1px; overflow-wrap:break-word; }
.planen-sk-dauer{ font-weight:650; color:var(--diese-art-text, var(--neben)); white-space:nowrap; }
.zieh-geist .planen-sk{ background:var(--flaeche); }
/* Ziel „zurück in die Sammlung“: leise getönt, keine gestrichelte Kante */
.planen-sammlung.planen-ziel-an{ outline:none; background-color:var(--akzent-weich) !important; box-shadow:inset 0 0 0 2px var(--akzent); }
.planen-sammlung-knopf.planen-ziel-an{ outline:none; background:var(--akzent-weich) !important; box-shadow:inset 0 0 0 2px var(--akzent); }

/* ======================================================================
   DESKTOP: die Woche füllt die Arbeitsfläche
   ====================================================================== */
.planen-wd{ height:100%; display:flex; flex-direction:column; min-height:0; container:planen-woche / size; }
.planen-wd-oben{ flex:0 0 auto; display:flex; align-items:center; gap:14px; min-height:48px; padding:0 0 10px; }
.planen-wd-satz{ flex:1 1 auto; min-width:0; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.planen-wd-fuell{ flex:1 1 auto; }
/* „Rückgängig“ über den Tagen (Punkt 39): ein ruhiges Wort an fester Stelle; ohne etwas zum Zurücknehmen bleibt der Platz leer */
.planen-rueck{ flex:0 0 auto; white-space:nowrap; }
.planen-rueck.ruht{ visibility:hidden; }
/* am Handy ist die Zeile knapp: ohne etwas zum Zurücknehmen nimmt das Wort keinen Platz („‹ Woche“ steht rechts fest) */
.planen-wo-zeile .planen-rueck.ruht{ display:none; }
/* im Tag stehen „Einplanen“, „Rückgängig“ und „‹ Woche“ in einer Zeile: dann rücken sie zusammen, der Pfeil am Knopf entfällt */
.planen-wo-zeile.eng{ gap:6px; }
.planen-wo-zeile.eng .planen-sammlung-pfeil{ display:none; }
.planen-wo-zeile.eng .planen-sammlung-knopf{ padding-right:10px; }
.planen-rueck.kommt{ animation:planen-rueck-kommt var(--d-mittel) var(--weich) both; }
@keyframes planen-rueck-kommt{ from{ opacity:0; } to{ opacity:1; } }
.planen-wd-tagwahl{ flex:0 0 auto; display:flex; align-items:center; gap:2px; margin-left:auto; }
.planen-wd-tagwahl .wort-knopf{ margin:0; }
.planen-wd > .planen-sammlung{ flex:0 0 auto; margin:0 calc(-1 * var(--werk-rand)) 10px; }
.planen-wd > .planen-sammlung .planen-sammlung-reihe{ padding:0 var(--werk-rand) 6px; }
.planen-wd-koerper{ position:relative; flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; min-height:0; }
.planen-wd-scroll{ position:relative; z-index:1; overflow:auto; min-height:0; scrollbar-width:thin; scrollbar-color:var(--kreis) transparent; }
/* Wolke: das Raster ist eine große weiße Karte auf dem Grund (Rundung 22, --schatten-karte). Deckend und ohne Maske, damit der
   Browser es auch bei Pixeldichte 1 und 1,25 selbst schiebt (Punkt 44; vorher malte er es bei jedem Bild neu). Das Rad
   gibt an der Kante weiter (kein overscroll-behavior). */
.planen-wd-scroll{ background:var(--flaeche); border-radius:var(--r-karte); box-shadow:var(--schatten-karte); padding:0 8px 0 4px; }
.planen-wd-scroll > .planen-wd-kopfzeile{ padding-top:10px; }
/* am klebenden Tageskopf endet das Raster weich: was darunter hindurchrollt (Uhrzeiten, Blöcke), blendet auf 18 px aus,
   statt halb angeschnitten unter der Kante zu stehen (Punkt 42). Die Kappe hängt am klebenden Kopf und rollt nicht mit. */
.planen-wd-scroll > .planen-wd-kopfzeile::after{ content:""; position:absolute; left:0; right:0; top:100%; height:18px; pointer-events:none;
  background:linear-gradient(to bottom, var(--flaeche), color-mix(in srgb, var(--flaeche) 0%, transparent)); }
/* ohne klebenden Tageskopf (das Blatt „Tag und Uhrzeit“) endet es oben weich an einer klebenden Kappe */
.planen-wd-scroll:not(:has(> .planen-wd-kopfzeile))::before{ content:""; position:sticky; top:0; display:block; height:18px; margin-bottom:-18px; pointer-events:none; z-index:8;
  background:linear-gradient(to bottom, var(--flaeche), color-mix(in srgb, var(--flaeche) 0%, transparent)); }
/* unten endet es ebenso weich (eine klebende Kappe am Ende des Inhalts) */
.planen-wd-scroll::after{ content:""; position:sticky; bottom:0; display:block; height:24px; margin-top:-24px; pointer-events:none; z-index:8;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--flaeche) 0%, transparent), var(--flaeche)); }
/* die leise Fläche, die beim Zoomen in den Tag aufgeht (hinter dem Inhalt) */
.planen-zoom{ position:absolute; z-index:0; border-radius:var(--r-flaeche); background:var(--grund); transform-origin:0 0; pointer-events:none; }

/* Tageskopf: klebt oben, trägt Ganztägiges und „ohne Uhrzeit“ */
.planen-wd-kopfzeile, .planen-wd-raster{ display:grid; grid-template-columns:48px repeat(var(--spalten, 7), minmax(0,1fr)); column-gap:6px; }
.planen-wd-kopfzeile{ position:sticky; top:0; z-index:8; background:var(--flaeche); padding-bottom:8px; grid-template-columns:48px repeat(7, minmax(0,1fr)); }
.planen-r-tag .planen-wd-kopfzeile{ grid-template-columns:48px minmax(0,1fr); }
.planen-wd-ecke{ grid-column:1; grid-row:1; }
.planen-wd-tag{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:0; min-height:48px; padding:4px 10px; border-radius:14px; text-align:left;
  transition:background-color var(--d-kurz) var(--standard); container:planen-wd-tag / inline-size; }
@media (hover:hover){ .planen-wd-tag:hover{ background:var(--mulde); } }
.planen-wd-tag-name{ font-size:var(--t-mittel); line-height:20px; font-weight:700; white-space:nowrap; }
.planen-wd-tag-zusatz{ font-size:12px; line-height:16px; font-weight:500; color:var(--neben); overflow-wrap:break-word; max-width:100%; }
.planen-wd-tag.ist-heute .planen-wd-tag-name{ color:var(--akzent); }
.planen-wd-tag.ist-heute .planen-wd-tag-zusatz{ color:var(--akzent); font-weight:700; }
.planen-wd-tag.ist-vorbei .planen-wd-tag-name{ color:var(--neben); font-weight:600; }
.planen-wd-tag.hat-konflikt .planen-wd-tag-zusatz{ color:var(--tinte); font-weight:600; }
/* Überschneidung im Tageskopf: Warnzeichen und das Wort; in einer schmalen Spalte das Zeichen und die Stunden */
.planen-wd-tag-zusatz.mit-warnung{ display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.planen-wd-tag-zusatz.mit-warnung svg.i{ width:13px; height:13px; stroke-width:2.25; }
.planen-wd-tag-kurz{ display:none; }
@container planen-wd-tag (max-width: 112px){
  .planen-wd-tag-lang{ display:none; }
  .planen-wd-tag-kurz{ display:inline; }
}
.planen-r-tag .planen-wd-tag{ flex-direction:row; align-items:baseline; justify-content:flex-start; flex-wrap:wrap; column-gap:12px; row-gap:0; padding:6px 10px; }
@media (hover:hover){ .planen-r-tag .planen-wd-tag:hover{ background:none; } }
.planen-r-tag .planen-wd-tag-name{ font-size:17px; line-height:24px; }
.planen-r-tag .planen-wd-tag-zusatz{ font-size:var(--t-klein); line-height:var(--z-klein); }
.planen-wd-ganz{ display:flex; flex-direction:column; justify-content:center; min-height:44px; margin-top:4px; padding:3px 10px; border-radius:var(--r-block); background:var(--mulde); text-align:left; }
.planen-wd-ganz span{ font-size:var(--t-klein); line-height:17px; font-weight:600; }
.planen-wd-ganz .planen-wd-ganz-zusatz{ font-size:12px; line-height:15px; font-weight:500; color:var(--neben); }
@media (hover:hover){ .planen-wd-ganz:hover{ background:var(--trenner); } }
.planen-wd-band{ display:flex; flex-direction:column; gap:4px; min-height:44px; margin-top:4px; padding:0; border-radius:14px; transition:background-color var(--d-kurz) var(--standard), box-shadow var(--d-kurz) var(--standard); }
html.zieht .planen-wd-band:not(.breit){ box-shadow:inset 0 0 0 1px var(--trenner); }
.planen-wd-band.breit{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; padding:6px 8px; background:var(--grund); }
.planen-wd-band-titel{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); padding:0 6px 0 4px; }
.planen-wd-band-leer{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.planen-wd-band.breit .planen-bandkarte{ width:auto; max-width:320px; }
.planen-wd-mehr{ min-height:44px; padding:0 8px; font-size:12px; line-height:15px; border-radius:var(--r-block); font-weight:600; color:var(--akzent); text-align:left; white-space:nowrap; }
@media (hover:hover){ .planen-wd-mehr:hover{ background:var(--mulde); } }
/* Ziel beim Ziehen: der Tag tönt sich leise */
.planen-wd-band.planen-ziel-an, .planen-wd-tag.planen-ziel-an, .planen-wl-tag.planen-ziel-an, .planen-tag-ohne.planen-ziel-an, .planen-wh-tag.planen-ziel-an{ outline:none; background-color:var(--akzent-weich) !important; box-shadow:inset 0 0 0 2px var(--akzent); }
.planen-wd-band.planen-ziel-vorbei, .planen-wd-tag.planen-ziel-vorbei, .planen-wl-tag.planen-ziel-vorbei, .planen-tag-ohne.planen-ziel-vorbei, .planen-wh-tag.planen-ziel-vorbei{ outline:2px dashed var(--kreis); outline-offset:-2px; }

/* Karte „ohne Uhrzeit“ im Kopf eines Tages: ein Block in der hellen Fläche ihrer Art (wie die Blöcke im Raster), nie umrandet */
.planen-bandkarte{ background:var(--diese-art-grund, var(--grund)); box-shadow:none; border-radius:var(--r-block); }
@media (hover:hover){ .planen-bandkarte:hover{ background:var(--diese-art-flaeche, var(--mulde)); } }

/* das Raster: kaum Linien, die Stunden leise */
.planen-wd-raster{ position:relative; }
.planen-wd-zeiten{ position:relative; grid-column:1; }
.planen-wd-stunde, .planen-wd-jetzt-zeit{ position:absolute; right:6px; transform:translateY(-50%); font-size:12px; line-height:16px; color:var(--neben); }
/* die Uhrzeit von jetzt als dunkle Pille (wie in Heute) */
.planen-wd-jetzt-zeit{ right:0; z-index:9; height:22px; padding:0 7px; border-radius:11px; font-size:12px; line-height:22px; font-weight:600; color:var(--auf-jetzt); background:var(--jetzt); }
.planen-wd-spalte{ position:relative; border-radius:12px;
  background-image:linear-gradient(to bottom, var(--trenner) 1px, transparent 1px); background-size:100% var(--stunde, 46px); background-position:0 -1px; }
.planen-wd-spalte.ist-heute{ background-color:var(--grund); }
.planen-wd-jetzt{ position:absolute; left:-6px; right:0; height:2px; margin-top:-1px; background:var(--jetzt); z-index:7; pointer-events:none; border-radius:1px; }
.planen-wd-jetzt i{ display:none; }

/* Blöcke in der Farbe ihrer Art: Termine in der Fläche der Art, Aufgaben hell mit Ring der Art */
.planen-wb{ position:absolute; left:2px; right:2px; z-index:2; display:flex; align-items:flex-start; gap:8px; padding:5px 8px 6px; border-radius:var(--r-block); overflow:hidden; overflow:clip; text-align:left;
  background:var(--diese-art-flaeche, var(--mulde)); color:var(--tinte); transition:background-color var(--d-kurz) var(--standard), box-shadow var(--d-kurz) var(--standard), opacity 200ms var(--standard),
  transform var(--d-zieh-platz, 300ms) var(--zieh-platz-kurve, var(--weich)); }
.planen-wb-was{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
/* Ist der Anfang eines langen Blocks oben aus dem Bild gerollt (unter den klebenden Tageskopf), bleibt seine Beschriftung
   sichtbar und wandert mit, bis der Block endet: nichts wird abgeschnitten (Punkt 42; Sammys Bild zu „Woche planen“ zeigte
   „07:00–17:00“ halb unter dem Kopf). overflow:clip statt hidden, damit der Block selbst kein Scroll-Behälter ist. */
.planen-wd-scroll .planen-wb.klebt > .planen-wb-was, .planen-wd-scroll .planen-wb.klebt > .planen-wb-marke{ position:sticky; top:calc(var(--kopf-h, 0px) + 6px); }
/* liegt ein eingerückter Block im langen, wandert die Beschriftung nur bis vor ihn: der Rand unten (so hoch wie der Rest des
   Blocks darunter) hält sie dort, denn was klebt, bleibt mit seinem Rand im Block (raster.js, anwenden) */
.planen-wd-scroll .planen-wb.klebt > .planen-wb-was, .planen-wd-scroll .planen-wb.klebt > .planen-wb-marke{ margin-bottom:var(--klebe-rest, 0px); }
.planen-wb.einzug-1{ left:12px; z-index:3; box-shadow:0 0 0 2px var(--flaeche); }
.planen-wb.einzug-2{ left:22px; z-index:4; box-shadow:0 0 0 2px var(--flaeche); }
.planen-wb.haelfte-links{ right:calc(50% + 1px); }
.planen-wb.haelfte-rechts{ left:calc(50% + 1px); z-index:3; }
.planen-wb.oben{ z-index:5; box-shadow:0 0 0 2px var(--flaeche); }
.planen-wd-b-zeit{ display:flex; flex-wrap:wrap; align-items:center; gap:0 3px; font-size:12px; line-height:16px; font-weight:600; color:var(--neben); }
/* der ganze Titel, umbrochen (Trennstellen aus P.trenne, sonst die deutsche Silbentrennung des Browsers — lang="de" —, nur
   ohne sie notfalls mitten im Wort); nie mit „…“ gekürzt (Punkt 42). Seit 09.10.2026 hyphens:auto statt manual: echte Titel wie
   „Kostüm anprobieren“ haben keine Trennstelle aus P.trenne und brachen in schmalen Blöcken als „anprobier / en“ um. Getrennt
   werden nur Wörter ab zehn Buchstaben, mit mindestens vier davor und danach (nicht „Lau-fen“). */
.planen-wd-b-titel{ font-size:var(--t-klein); line-height:16px; font-weight:600; color:var(--tinte); overflow-wrap:anywhere; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:10 4 4; }
/* ein langer Block mit einem kurzen, der früh in ihm beginnt: sein Text steht links, der kurze rechts daneben */
.planen-wb.text-links > .planen-wb-was{ max-width:calc(50% - 10px); }
/* unten liegt der Griff für die Dauer: der Text endet darüber, auch wenn der Block für einen langen Titel wächst */
.planen-wd-spalte > .planen-wb.planen-wb:has(> .planen-wb-griff){ padding-bottom:11px; }
.planen-wd-b-zusatz{ font-size:12px; line-height:15px; color:var(--neben); margin-top:1px; overflow-wrap:break-word; }
.planen-wb.kurz{ padding:5px 8px; }
.planen-wd-b-zeit-inline{ font-size:12px; font-weight:600; color:var(--neben); }
.planen-wb.ist-termin{ cursor:default; }
@media (hover:hover){ .planen-wb.ist-termin:hover{ box-shadow:inset 0 0 0 1.5px var(--diese-art, var(--kreis)); } }
/* die laufende Karte füllt sich bis jetzt */
.planen-wb.laeuft{ background:linear-gradient(to bottom, var(--diese-art-flaeche, var(--mulde)) calc(var(--anteil, 1) * 100%), var(--diese-art-grund, var(--grund)) calc(var(--anteil, 1) * 100%)); }
.planen-wb.unbestaetigt, .planen-wb.unbestaetigt[data-art]{ background:var(--flaeche); box-shadow:inset 0 0 0 1.5px var(--diese-art, var(--kreis)); }
.planen-wb.unbestaetigt .planen-wd-b-titel{ font-weight:500; }
.planen-wb.ist-termin.vorbei{ background:var(--mulde); }
.planen-wb.vorbei .planen-wd-b-titel{ color:var(--neben); font-weight:500; }
.planen-wb.ist-aufgabe{ background:var(--diese-art-grund, var(--flaeche)); box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--diese-art, var(--kreis)) 45%, transparent); cursor:grab; }
@media (hover:hover){ .planen-wb.ist-aufgabe:hover{ background:var(--diese-art-flaeche, var(--mulde)); } }
.planen-wb.ist-aufgabe.einzug-1, .planen-wb.ist-aufgabe.einzug-2, .planen-wb.ist-aufgabe.oben, .planen-wb.ist-aufgabe.haelfte-rechts{ box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--diese-art, var(--kreis)) 45%, transparent), 0 0 0 2px var(--flaeche); }
.planen-wb.ist-aufgabe .planen-wd-b-zeit, .planen-wb.ist-aufgabe .planen-wd-b-zeit-inline{ color:var(--diese-art-text, var(--neben)); }
.planen-wb.ist-erledigt, .planen-wb.ist-aufgabe.ist-erledigt{ background:var(--mulde); box-shadow:none; cursor:pointer; }
.planen-wb.ist-erledigt .planen-wd-b-titel{ color:var(--neben); font-weight:500; text-decoration:line-through; text-decoration-color:var(--kreis); }
.planen-wb.ist-erledigt .planen-wd-b-zeit, .planen-wb.ist-erledigt .planen-wd-b-zeit-inline{ color:var(--neben); }
/* eine Aufgabe, die sich mit einem Termin überschneidet: ein ruhiges Warnzeichen vor der Uhrzeit (Punkt 39) */
.planen-wb-warn{ display:inline-flex; vertical-align:-2px; margin-right:3px; color:var(--tinte); }
.planen-wb-warn svg.i{ width:13px; height:13px; stroke-width:2.25; }
/* was an der Stelle liegt, über die man gerade zieht, macht Platz: Aufgaben rücken ein Stück zur Seite und treten zurück,
   Termine treten nur zurück (sie bleiben, wo sie sind); weich als Feder (Punkt 41) */
.planen-wb.weicht-aus{ opacity:.5; }
.planen-wb.ist-aufgabe.weicht-aus{ transform:translateX(8px); }
/* breit (ein Tag): Plakette vorn, mehr Luft */
.planen-r-tag .planen-wb{ padding:8px 12px 8px 10px; gap:10px; border-radius:14px; }
.planen-r-tag .planen-wd-b-titel{ font-size:var(--t-text); line-height:20px; }
.planen-r-tag .planen-wb.kurz{ align-items:center; padding:4px 12px; }
.planen-r-tag .planen-wd-b-zeit-inline{ font-size:var(--t-klein); margin-right:4px; }
.planen-r-tag .planen-wd-b-zeit{ font-size:var(--t-klein); line-height:18px; }
.planen-r-tag .planen-wd-b-zusatz{ font-size:var(--t-klein); line-height:18px; }
.planen-wb-marke{ flex:0 0 auto; display:flex; }
.planen-wb-marke .zl-symbol{ background:var(--flaeche); }
.planen-wb.ist-aufgabe .planen-wb-marke .kreis{ --diese-art-grund:var(--flaeche); }
.planen-wb.kurz .planen-wb-marke, .planen-r-tag .planen-wb.haelfte-links .planen-wb-marke, .planen-r-tag .planen-wb.haelfte-rechts .planen-wb-marke{ display:none; }

/* der Griff unten am Block: ziehen ändert die Dauer (15-Minuten-Schritte); die Dauer steht dabei am Block */
/* der Griff ist immer zu sehen (ein ruhiger Balken unten in der Mitte) und lässt sich mit Luft greifen (Nutzerprüfung Befund 5) */
.planen-wb-griff{ position:absolute; left:0; right:0; bottom:0; height:16px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:3px; cursor:ns-resize; touch-action:manipulation; z-index:2; -webkit-touch-callout:none; }
.planen-wb-griff i{ width:32px; height:5px; border-radius:3px; background:var(--diese-art, var(--kreis)); opacity:.45; transition:opacity var(--d-kurz) var(--standard), transform var(--d-kurz) var(--standard); }
.planen-wb:focus-visible .planen-wb-griff i{ opacity:.75; }
@media (hover:hover){ .planen-wb:hover .planen-wb-griff i{ opacity:.75; } }
.planen-wb.greift .planen-wb-griff i{ opacity:1; transform:scaleX(1.15); }
@media (hover:hover){ .planen-wb-griff:hover i{ opacity:1; transform:scaleX(1.15); } }
/* auch an kurzen Blöcken bleibt die Greiffläche groß (der Block hat mindestens 44 px) */
.planen-wb.kurz .planen-wb-griff{ padding-bottom:2px; }
.planen-r-tag .planen-wb-griff{ height:20px; }
.planen-r-handy .planen-wb-griff{ height:22px; }
.planen-r-handy .planen-wb-griff i{ opacity:.55; width:36px; }
.planen-wb.greift{ z-index:12; box-shadow:var(--schatten-heben), inset 0 0 0 1.5px var(--diese-art, var(--kreis)); overflow:visible; }
/* Dauer ziehen (Punkt 41): die Fläche liegt in drei Teilen unter dem Inhalt (Kopf und Fuß mit Rundung, dazwischen ein
   Streifen, der sich streckt); der Fuß mit dem gehobenen Schatten und der Griff rücken mit der Kante. Nur transform. */
.planen-wb.dehnt{ background:transparent !important; box-shadow:none !important; isolation:isolate; }
.planen-wb-haut{ position:absolute; left:0; right:0; top:0; height:var(--h0); z-index:-1; pointer-events:none; }
.planen-wb-haut > i{ position:absolute; left:0; right:0; display:block; background:var(--haut, var(--diese-art-grund, var(--flaeche))); --ring:var(--diese-art, var(--kreis)); }
.planen-wb-haut > .oben{ top:0; height:var(--r); border-radius:var(--r) var(--r) 0 0; box-shadow:inset 1.5px 0 0 var(--ring), inset -1.5px 0 0 var(--ring), inset 0 1.5px 0 var(--ring); }
.planen-wb-haut > .mitte{ top:calc(var(--r) - .5px); height:calc(var(--h0) - 2 * var(--r) + 1px); transform-origin:50% 0; will-change:transform; box-shadow:inset 1.5px 0 0 var(--ring), inset -1.5px 0 0 var(--ring); }
.planen-wb-haut > .unten{ top:calc(var(--h0) - var(--r)); height:var(--r); border-radius:0 0 var(--r) var(--r); will-change:transform;
  box-shadow:inset 1.5px 0 0 var(--ring), inset -1.5px 0 0 var(--ring), inset 0 -1.5px 0 var(--ring), var(--schatten-heben); }
.planen-wb.dehnt > .planen-wb-griff{ will-change:transform; }
.planen-wb.dehnt .planen-wb-was > *, .planen-wb.dehnt .planen-wb-marke{ transition:opacity 120ms linear; }
/* wo die Kante einrastet: eine leise Linie quer über den Block */
.planen-wb-einrast{ position:absolute; left:8px; right:8px; top:0; height:2px; border-radius:1px; background:var(--diese-art, var(--akzent)); opacity:0; pointer-events:none; z-index:3;
  transition:transform 140ms var(--zieh-platz-kurve, var(--weich)), opacity 120ms linear; }
.planen-wb.dehnt-an .planen-wb-einrast{ opacity:.5; }
html.greift-dauer, html.greift-dauer *{ cursor:ns-resize !important; -webkit-user-select:none; user-select:none; }
/* die Dauer beim Ziehen: ein Schild über dem Zeiger, wie die Uhrzeit beim Verschieben (css/ziehen.css) */
.planen-wb-dauer{ position:absolute; left:0; top:0; z-index:61; will-change:transform; height:30px; padding:0 12px; border-radius:15px; background:var(--umkehr); color:var(--auf-umkehr);
  font-size:13px; line-height:30px; font-weight:600; white-space:nowrap; pointer-events:none; box-shadow:var(--schatten-pille); }

.planen-wd-vorlauf{ position:absolute; left:2px; right:2px; z-index:1; display:flex; align-items:center; padding:0 8px; border-radius:10px 10px 4px 4px; pointer-events:none;
  background:repeating-linear-gradient(135deg, var(--mulde) 0 5px, transparent 5px 10px); overflow:hidden; }
.planen-wd-vorlauf > span{ font-size:12px; line-height:15px; color:var(--neben); font-weight:500; white-space:nowrap; background:var(--flaeche); padding:0 3px; border-radius:3px; }
/* die Beschriftung steht ganz da oder gar nicht (Punkt 42): schmal ohne die Minuten, im niedrigen Streifen nur als Name */
.planen-wd-vorlauf{ container-type:inline-size; }
.planen-wd-vorlauf.knapp > span{ display:none; }
@container (max-width: 92px){ .planen-wd-vorlauf-min{ display:none; } }
/* Vorschau beim Ziehen: wo es landet, von wann bis wann */
/* die Vorschau gleitet (transform) von Viertelstunde zu Viertelstunde und von Tag zu Tag; sie liegt im Raster, nicht in der Spalte */
.planen-wd-ziel{ position:absolute; left:0; top:0; z-index:9; display:flex; flex-direction:column; gap:1px; padding:5px 8px; border-radius:var(--r-block); pointer-events:none;
  background:var(--akzent-weich); box-shadow:inset 0 0 0 2px var(--akzent); color:var(--akzent-tief); font-size:12px; line-height:16px; font-weight:700;
  will-change:transform; transition:transform 150ms var(--zieh-platz-kurve, var(--weich)); }
.planen-wd-ziel.warn span + span{ font-weight:600; }
.planen-wd-ziel.vorbei{ background:var(--flaeche); box-shadow:inset 0 0 0 2px var(--kreis); color:var(--tinte); }
.planen-wd-ziel.vorbei span + span{ font-weight:600; color:var(--neben); }
.planen-r-tag .planen-wd-ziel{ font-size:var(--t-klein); line-height:18px; padding:8px 12px; }
/* „Vorbei, hier nicht“ steht als Schild über der Karte am Finger (EL.ziehen.sagen, css/ziehen.css) */
/* der Vorschlag aus „Zeit für …“ (Antwort auf eine Frage): gestrichelt, erst „Passt“ legt es fest */
.planen-wd-vorschlag{ position:absolute; left:2px; right:2px; z-index:5; display:flex; flex-direction:column; padding:5px 8px; border-radius:var(--r-block); pointer-events:none;
  background:var(--flaeche); border:1.5px dashed var(--akzent); box-shadow:0 0 0 2px var(--flaeche); }
.planen-wd-vorschlag .planen-wd-b-zeit, .planen-wd-vorschlag .planen-wd-b-titel{ color:var(--akzent-tief); }

/* „Woche planen“ am Desktop, Schritt 1, 3 und Abschluss: eine Spalte wie jede andere Seite (Punkt 43) */
.planen-wd.plant-spalte{ display:block; }
.planen-plan-desk .planen-plan-rumpf{ padding-top:4px; }
/* der Vorschlag aus „Zeit für …“: eine ruhige Leiste über der Woche, nie ein Streifen rechts (Punkt 43) */
.planen-vs-leiste{ flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin:0 0 12px; padding:12px 16px; border-radius:var(--r-zeile);
  background:var(--grund); box-shadow:inset 3px 0 0 var(--akzent); }
.planen-vs-text{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 360px; }
.planen-vs-titel{ display:flex; align-items:baseline; gap:8px; font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:700; }
.planen-vs-satz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.planen-vs-zeiten{ align-self:flex-start; margin-top:4px; max-width:100%; }
.planen-vs-knoepfe{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.planen-vs-knoepfe .wort-knopf{ margin:0; }
.planen-plan-desk .ws{ max-width:100%; }

/* Werkzeuge im Kopf: „ · 3 Schritte“ tritt bei schmalem Fenster zurück, damit der Kopf eine Zeile bleibt */
@media (max-width:1180px){ .planen-wz-extra{ display:none; } }

/* niedrige Arbeitsfläche: die Dinge ohne Uhrzeit stehen im Tag; Ablegen geht auf den Tageskopf. Die Sammlung wird
   eine flache Reihe (Titel und Dauer), damit die Woche Höhe behält */
@container planen-woche (max-height: 540px){
  .planen-r-woche .planen-wd-band, .planen-r-woche .planen-wd-ganz, .planen-r-woche .planen-wd-mehr{ display:none; }
  .planen-wd-kopfzeile{ padding-bottom:2px; }
  .planen-wd-oben{ min-height:44px; padding-bottom:6px; }
  .planen-wd > .planen-sammlung{ margin-bottom:6px; }
  .planen-wd .planen-sammlung-reihe{ align-items:center; gap:14px; }
  .planen-wd .planen-sammlung-gruppe{ flex-direction:row; align-items:center; gap:8px; }
  .planen-wd .planen-sammlung-titel{ white-space:nowrap; }
  .planen-wd .planen-sk{ width:auto; min-height:44px; padding:5px 14px 5px 7px; grid-template-columns:30px auto; }
  .planen-wd .planen-sk-titel{ white-space:nowrap; display:block; overflow:visible; }
  .planen-wd .planen-sk-zusatz{ display:none; }
}
/* schmale Arbeitsfläche (1024 px): engere Spalten. Zwei Blöcke, die sich überschneiden, stehen hier nie nebeneinander;
   der spätere rückt unter den Text des früheren (raster.js, anordnung, ENG) */
@container planen-woche (max-width: 820px){
  .planen-wd-kopfzeile, .planen-wd-raster{ grid-template-columns:44px repeat(var(--spalten, 7), minmax(0,1fr)); column-gap:4px; }
  .planen-wd-kopfzeile{ grid-template-columns:44px repeat(7, minmax(0,1fr)); }
  .planen-r-tag .planen-wd-kopfzeile{ grid-template-columns:44px minmax(0,1fr); }
  .planen-wd-tag{ padding:4px 7px; }
  /* schmale Spalten: etwas weniger Innenabstand, damit ganze Wörter in die Zeile passen */
  .planen-r-woche .planen-wb{ padding-left:6px; padding-right:5px; }
  .planen-r-woche .planen-wb.einzug-1{ left:9px; }
  .planen-r-woche .planen-wb.einzug-2{ left:16px; }
  .planen-sk{ width:196px; }
}

/* ======================================================================
   HANDY: Woche und Tag
   ====================================================================== */
/* oben (klebt beim Scrollen): Einplanen, Sammlung, Wochenleiste — im Tag der Tag und „Ohne Uhrzeit“ */
.planen-wo-kopf{ position:sticky; top:-20px; z-index:6; margin:-20px calc(-1 * var(--rand)) 0; padding:20px var(--rand) 10px; background:var(--grund); display:flex; flex-direction:column; gap:10px; }
.planen-wo-kopf::after{ content:""; position:absolute; left:0; right:0; bottom:-12px; height:12px; background:linear-gradient(to bottom, var(--grund), transparent); pointer-events:none; }
.planen-wo-zeile{ display:flex; align-items:center; gap:10px; min-height:44px; }
.planen-wo-satz{ flex:1 1 auto; min-width:0; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.planen-wo-fuell{ flex:1 1 auto; }
.planen-wo-zurueck{ flex:0 0 auto; margin:0 -8px 0 auto; color:var(--akzent); }
.planen-wo .planen-sammlung{ margin:0 calc(-1 * var(--rand)); }
.planen-wo .planen-sammlung-reihe{ padding:2px var(--rand) 10px; scroll-padding-inline:var(--rand); }
.planen-wo .planen-sk{ width:206px; }
.planen-wo-rumpf{ padding-top:14px; }
.planen-wo-rumpf > .fl + .fl, .planen-wo-rumpf > * + .fl{ margin-top:16px; }
.planen-wh-tag.ist-heute .fl-titel, .planen-wh-tag.ist-heute .fl-kopf-knopf > span:first-child{ color:var(--akzent); }
.planen-wh-tag{ border-radius:var(--r-flaeche); transition:background-color var(--d-kurz) var(--standard); }
.planen-fokus{ animation:planen-fokus 1600ms var(--standard) both; }
@keyframes planen-fokus{ 0%,35%{ box-shadow:0 0 0 2px var(--akzent); } 100%{ box-shadow:0 0 0 2px transparent; } }
.planen-wh .lz .lz-pfeil svg.i{ transition:transform var(--d-mittel) var(--weich); }
.planen-wh .lz[aria-expanded="true"] .lz-pfeil svg.i{ transform:rotate(180deg); }

/* im Tag füllt die Seite die Höhe: der Kopf steht, der Tag rollt darunter (natives Scrollen) */
.planen-wo.fuellt{ display:flex; flex-direction:column; height:100%; min-height:0; }
.planen-wo.fuellt > .planen-wo-kopf{ position:relative; top:auto; flex:0 0 auto; margin-top:-8px; padding-top:8px; }
.planen-wo.fuellt > .planen-wo-rumpf{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; margin:0 calc(-1 * var(--rand)); padding:12px var(--rand) 24px; }
.planen-wo.fuellt > .planen-wo-rumpf::-webkit-scrollbar{ display:none; }
/* oben endet der Tag weich (was hinaufrollt, blendet aus), statt an der Kante angeschnitten zu stehen (Punkt 42) */
.planen-wo.fuellt > .planen-wo-rumpf{ background:var(--grund); }
.planen-wo.fuellt > .planen-wo-rumpf::before{ content:""; position:sticky; top:-12px; display:block; height:14px; margin:-12px calc(-1 * var(--rand)) -2px; z-index:8; pointer-events:none;
  background:linear-gradient(to bottom, var(--grund), color-mix(in srgb, var(--grund) 0%, transparent)); }
.planen-wo-fuss{ flex:0 0 auto; }
.planen-wo-fuss .planen-plan-fuss{ padding:12px 0 2px; }

/* Wochenleiste: sieben Kacheln, die Last des Tages als leiser Balken nach Art */
.planen-wl{ display:flex; flex-direction:column; gap:8px; }
.planen-wl-kopf{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.planen-wl-text{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.planen-wl-text b{ color:var(--tinte); font-weight:600; }
.planen-wl-tage{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.planen-wl-tag{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:58px; padding:6px 0 9px; border-radius:16px;
  background:var(--flaeche); box-shadow:var(--schatten-pille); color:var(--tinte); transition:background-color var(--d-kurz) var(--standard), color var(--d-kurz) var(--standard); }
.planen-wl-wt{ font-size:12px; line-height:16px; font-weight:600; color:var(--neben); }
.planen-wl-nr{ font-size:17px; line-height:22px; font-weight:700; }
.planen-wl-balken{ position:absolute; left:9px; right:9px; bottom:7px; height:3px; border-radius:2px; background:var(--mulde); overflow:hidden; }
.planen-wl-balken i{ position:absolute; left:0; top:0; bottom:0; width:100%; transform-origin:0 0; background:var(--diese-art); }
.planen-wl-tag.ist-heute .planen-wl-wt, .planen-wl-tag.ist-heute .planen-wl-nr{ color:var(--akzent); }
.planen-wl-tag.ist-vorbei{ background:transparent; box-shadow:none; }
.planen-wl-tag.ist-vorbei .planen-wl-nr{ color:var(--neben); font-weight:600; }
.planen-wl-tag.nach-frist .planen-wl-nr{ color:var(--neben); text-decoration:line-through; text-decoration-color:var(--kreis); font-weight:600; }
/* der gewählte Tag: eingedrückt wie ein gedrückter Knopf, nie eine dunkle Fläche (Sammy, 27.09.2026, Punkt 38).
   Heute bleibt daran erkennbar, dass Wochentag und Zahl blau sind; gewählt und heute zugleich: blau und eingedrückt. */
.planen-wl-tag.an{ background:var(--gedrueckt); box-shadow:var(--schatten-gedrueckt); }
.planen-wl-tag.an .planen-wl-nr{ color:var(--tinte); }
.planen-wl-tag.an.ist-heute .planen-wl-wt, .planen-wl-tag.an.ist-heute .planen-wl-nr{ color:var(--akzent); }
.planen-wl-tag.an .planen-wl-balken{ background:color-mix(in oklch, var(--tinte) 9%, transparent); }
/* im Blatt „Tag und Uhrzeit“ (Grund wie jedes Blatt) sind die Tage weiße Kacheln wie in der Woche */

/* der Tag: Titel, „Ohne Uhrzeit“ als weiße Pillen */
.planen-tag-kopf, .planen-ein-tag{ display:flex; align-items:baseline; flex-wrap:wrap; column-gap:10px; row-gap:0; padding:0 4px; }
.planen-tag-titel{ font-size:17px; line-height:24px; font-weight:700; letter-spacing:-.01em; }
.planen-tag-zusatz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.planen-tag-ohne{ display:flex; flex-direction:column; gap:6px; padding:6px; margin:-6px; border-radius:18px; transition:background-color var(--d-kurz) var(--standard); }
.planen-tag-ohne-titel{ padding:0 4px; font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); }
.planen-tag-ohne-leer{ padding:0 4px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.planen-tag-pillen{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--rand) - 6px); padding:2px calc(var(--rand) + 6px) 4px; }
.planen-tag-pillen::-webkit-scrollbar{ display:none; }
.planen-tag-pille{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 7px; border-radius:22px;
  background:var(--flaeche); box-shadow:var(--schatten-pille); font-size:var(--t-mittel); font-weight:600; color:var(--tinte); }
.planen-tag-pille-marke .kreis{ width:28px; height:28px; box-shadow:inset 0 0 0 7px var(--diese-art-grund, var(--mulde)), inset 0 0 0 9px var(--diese-art, var(--kreis)); }
/* der Titel steht ganz da (Punkt 42, Sammys Bild zeigte „Stromrechnung zahl…“); die Reihe gleitet seitlich, wenn sie nicht passt */
.planen-tag-pille-titel{ white-space:nowrap; }
.planen-tag-pille-dauer{ font-size:12px; font-weight:600; color:var(--neben); white-space:nowrap; }
.planen-tag-pille.ist-erledigt .planen-tag-pille-titel{ color:var(--neben); text-decoration:line-through; text-decoration-color:var(--kreis); font-weight:500; }

/* das Raster am Handy: Uhrzeitspalte wie in Heute, Karten weiß (Aufgaben) oder in der Fläche der Art (Termine) */
.planen-r-handy .planen-wd-raster{ grid-template-columns:var(--band-zeit, 60px) minmax(0,1fr); column-gap:0; }
.planen-r-handy .planen-wd-stunde{ right:auto; left:4px; font-size:12px; }
.planen-r-handy .planen-wd-jetzt-zeit{ right:auto; left:0; }
.planen-r-handy .planen-wd-spalte{ background-color:transparent; background-image:linear-gradient(to bottom, color-mix(in oklch, var(--kreis) 22%, transparent) 1px, transparent 1px); }
.planen-r-handy .planen-wd-jetzt{ left:-6px; }
.planen-r-handy .planen-wb{ border-radius:var(--r-zeile); left:0; right:0; }
.planen-r-handy .planen-wb.ist-aufgabe{ background:var(--flaeche); box-shadow:var(--schatten-zeile); }
.planen-r-handy .planen-wb.ist-aufgabe .planen-wb-marke .kreis{ --diese-art-grund:var(--diese-art-grund); }
.planen-r-handy .planen-wb.ist-termin{ box-shadow:var(--schatten-zeile); }
.planen-r-handy .planen-wb.ist-erledigt{ background:var(--flaeche); opacity:.8; }
.planen-r-handy .planen-wb.einzug-1, .planen-r-handy .planen-wb.einzug-2, .planen-r-handy .planen-wb.oben{ box-shadow:var(--schatten-zeile), 0 0 0 2px var(--grund); }
.planen-r-handy .planen-wb.haelfte-links{ right:calc(50% + 3px); }
.planen-r-handy .planen-wb.haelfte-rechts{ left:calc(50% + 3px); }
.planen-r-handy .planen-wd-ziel{ border-radius:var(--r-zeile); }
.planen-r-tag-handy{ margin-top:4px; }

/* ======================================================================
   Das Blatt „Tag und Uhrzeit“
   ====================================================================== */
.blatt-mitte.planen-tp-huelle{ width:min(720px, calc(100% - 64px)); }
.planen-ein{ height:100%; display:flex; flex-direction:column; gap:12px; min-height:0; }
.planen-ein > .planen-wl, .planen-ein > .planen-ein-tag, .planen-ein > .planen-ein-karte, .planen-ein > .planen-ein-knoepfe{ flex:0 0 auto; }
.planen-ein > .planen-wl{ display:flex; flex-direction:column; gap:8px; }
.planen-ein-karte{ width:auto; cursor:grab; background:var(--flaeche); box-shadow:var(--schatten-zeile), inset 0 0 0 1.5px color-mix(in oklch, var(--diese-art, var(--kreis)) 50%, transparent); }
.planen-ein-knoepfe{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:-6px; }
.planen-ein-knoepfe .wort-knopf{ margin:0 -8px; }
.planen-ein > .planen-r{ flex:1 1 auto; min-height:0; }
.planen-r-blatt .planen-wd-spalte{ cursor:copy; }
.planen-r-blatt.planen-r-desktop .planen-wd-raster{ grid-template-columns:48px minmax(0,1fr); }

/* ======================================================================
   Woche planen, Schritt 3: erst zeigen, dann gleiten
   ====================================================================== */
.planen-plan-zustand{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; height:28px; margin-top:6px; padding:0 11px 0 9px; border-radius:14px;
  background:var(--jetzt); color:var(--auf-jetzt); font-size:var(--t-klein); font-weight:600; }
.planen-plan-zustand svg.i{ width:15px; height:15px; }
.planen-plan-weg.wird-weggelegt, .planen-plan-weggelegt.wird-zurueckgeholt{ background:var(--akzent-weich); }
.planen-plan-weg.wird-weggelegt .lz-titel{ color:var(--neben); text-decoration:line-through; text-decoration-color:var(--kreis); }
.planen-plan-weg .ws{ margin-top:8px; align-self:flex-start; }
.planen-plan-weggelegt .lz-titel{ color:var(--neben); }
.planen-plan-zurueck{ flex:0 0 auto; margin:0 -4px 0 0; }
.planen-plan-woche{ height:100%; }
/* „Weggelegt“ klebt unten im Bild: dorthin gleitet, was man weglegt (am Handy über der Leiste mit dem Feld) */
.planen-plan-wegflaeche{ position:sticky; bottom:0; z-index:3; margin-top:16px; }
/* Chromium hält Klebendes um das Innenpolster des Behälters vom Rand weg; der Bereich rückt deshalb um genau dieses
   Polster hinunter und füllt es selbst (sonst schiene darunter die Liste durch) */
.werk-inhalt .planen-plan-desk .fl.planen-plan-wegflaeche{ bottom:-32px; margin-left:-12px; margin-right:-12px; padding:10px 12px 32px; background:var(--grund); box-shadow:0 -14px 16px -12px var(--grund); border-radius:0; }
.seite-inhalt .planen-plan-handy .fl.planen-plan-wegflaeche{ bottom:calc(-28px - var(--unten-sicher, 0px)); margin:16px calc(-1 * var(--rand)) 0; padding:6px var(--rand) calc(38px + var(--unten-sicher, 0px));
  background:var(--grund); box-shadow:0 -14px 16px -12px var(--grund); }
.planen-plan-mehrweg{ padding:4px 12px 10px var(--innen); }

/* „Dauer“ im Eintrag */
.planen-dauer{ display:flex; flex-direction:column; gap:10px; }
.planen-dauer .planen-dauer-ws, .aktion-offen .planen-dauer-ws{ display:grid; width:100%; grid-template-columns:repeat(4, minmax(0,1fr)); }
.planen-dauer .planen-stepper{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; padding:0; gap:8px; }
.planen-dauer .planen-stepper .kn{ padding:0 10px; }
.planen-dauer .planen-stepper-wert{ min-width:88px; }
.planen-dauer-satz{ padding:0; }

@media (prefers-reduced-motion:reduce){
  .planen-sammlung-pfeil, .planen-wd-ziel, .planen-wh .lz .lz-pfeil svg.i, .planen-wb{ transition:none; }
  .planen-wb.ist-aufgabe.weicht-aus{ transform:none; }
  .planen-rueck.kommt{ animation:none; }
  .planen-wb-einrast, .planen-wb.dehnt .planen-wb-was > *{ transition:none; }
  .planen-fokus{ animation:none; }
}

/* ── css/teile/planen/brett.css ── */
/* ==========================================================================
   EasyLife Wolke (aus dem Prototyp design/neustart/runde-12/prototyp/) · Teil „planen“ · Das Brett: Aufgaben nach Zustand (zu js/teile/planen/brett.js)
   Wolke: Handy oben fünf Zahlen als weiße Kacheln, darunter je Zustand eine weiße Karte mit Zeilen;
   Desktop fünf Spalten auf dem Grund (seit Punkt 45 keine Mulden mehr): je Zustand die Überschrift und darunter Band-Karten
   (weiß, Rundung 16, --schatten-zeile), wie die Karten im Zeitband; beim Hineinziehen tönt sich die Spalte.
   Nur Tokens, keine Farbwerte. Aufgaben tragen ihre Artfarbe (Punkt vor dem Titel, Plakette am Handy).
   ========================================================================== */

/* ---------- Handy ---------- */
.planen-brett-handy > * + *{ margin-top:16px; }
.planen-brett-handy > .fuss-satz{ margin-top:8px; }
.planen-brett-leiste{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
.planen-brett-kachel{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:64px; padding:8px 2px;
  border-radius:var(--r-zeile); background:var(--flaeche); box-shadow:var(--schatten-pille); text-align:center;
  transition:background-color var(--d-kurz) var(--standard); }
.planen-brett-zahl{ font-size:20px; line-height:24px; font-weight:700; color:var(--tinte); }
.planen-brett-wort{ font-size:var(--t-reiter); line-height:15px; font-weight:600; color:var(--neben); overflow-wrap:normal; hyphens:none; }
.planen-brett-kachel.ist-leer .planen-brett-zahl{ color:var(--neben); font-weight:600; }
.planen-brett-kachel:active{ background:var(--mulde); }
.planen-brett-kopf-fl .fl-zeilen{ padding:0; }
.planen-brett-kopf{ display:flex; flex-direction:column; gap:4px; padding:6px 12px 10px var(--innen); }
.planen-brett-pfad{ margin-left:-8px; }
.planen-brett-darin{ display:flex; align-items:baseline; flex-wrap:wrap; column-gap:8px; row-gap:2px; }
.planen-brett-darin-wort{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); }
.planen-brett-darin .chips{ flex:1 1 0; min-width:160px; }
.planen-brett-abschnitt.planen-ziel-an{ outline-offset:2px; }
.planen-brett-abschnitt .leer{ padding:12px var(--innen) 14px; }

/* ---------- Desktop ---------- */
.planen-brett-desk{ display:flex; flex-direction:column; gap:12px; height:100%; min-height:0; }
.planen-brett-oben{ flex:0 0 auto; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; column-gap:24px; row-gap:2px; }
.planen-brett-desk .planen-brett-kopf{ flex:1 1 420px; min-width:0; padding:0; gap:2px; }
.planen-brett-menge{ flex:0 0 auto; font-size:var(--t-klein); line-height:44px; color:var(--neben); }
.planen-brett-spalten{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; }
.planen-brett-spalte{ display:flex; flex-direction:column; min-height:0; padding:8px 0 0; border-radius:var(--r-flaeche);
  transition:background-color var(--d-kurz) var(--standard); }
/* die Überschrift einer Spalte in der Form des Flächenkopfs (13 px halbfett, leise), 4 px innerhalb der Kartenkante */
.planen-brett-skopf{ display:flex; align-items:baseline; gap:6px; padding:0 4px; }
.planen-brett-stitel{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--neben); white-space:nowrap; }
.planen-brett-szahl{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:500; color:var(--neben); }
.planen-brett-ssatz{ padding:0 4px 8px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
/* die Karten einer Spalte rollen in sich, deckend im Grund (Punkt 44) */
.planen-brett-karten{ flex:1 1 auto; min-height:44px; display:flex; flex-direction:column; gap:8px; padding:2px 6px 10px; margin:0 -6px; overflow-y:auto; overflow-x:hidden;
  background:var(--grund); scrollbar-width:thin; scrollbar-color:var(--kreis) transparent; }
.planen-brett-karten > *{ flex:0 0 auto; }
.planen-brett-karten .leer{ padding:6px 6px 0; }
.planen-brett-karte{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; min-height:44px; padding:10px 12px 11px; border-radius:var(--r-zeile);
  background:var(--flaeche); box-shadow:var(--schatten-zeile); text-align:left; transition:background-color var(--d-kurz) var(--standard); }
@media (hover:hover){ .planen-brett-karte:hover{ background:var(--mulde); } }
.planen-brett-karte-titel{ font-size:var(--t-mittel); line-height:20px; font-weight:600; color:var(--tinte); overflow-wrap:break-word; max-width:100%; }
.planen-brett-karte[data-art] .planen-brett-karte-titel::before{ content:""; display:inline-block; width:8px; height:8px; margin:0 7px 2px 0; border-radius:50%; background:var(--diese-art); vertical-align:middle; }
.planen-brett-karte-zusatz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); overflow-wrap:break-word; max-width:100%; }
.planen-brett-karte-betrag{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--diese-art-text, var(--tinte)); }
.planen-brett-karte.ist-erledigt .planen-brett-karte-titel{ color:var(--neben); font-weight:500; text-decoration:line-through; text-decoration-color:var(--kreis); }
.planen-brett-karte.ist-erledigt[data-art] .planen-brett-karte-titel::before{ background:var(--diese-art-grund); box-shadow:inset 0 0 0 1.5px var(--diese-art); }
.planen-brett-spalte.planen-ziel-an{ outline-offset:-2px; }
.planen-brett-desk > .fuss-satz{ flex:0 0 auto; padding-top:0; }
@container werk (max-width: 900px){
  .planen-brett-spalten{ gap:6px; }
  .planen-brett-spalte{ padding:8px 0 0; }
  .planen-brett-karte{ padding:8px 9px 9px; }
  .planen-brett-karte-titel{ font-size:var(--t-klein); line-height:18px; }
}

/* ---------- Blätter „Welcher Tag?“ und „Wartet auf …“ ---------- */
.planen-brett-tagwahl .fl-zeilen{ padding:10px 0 12px; }
.planen-brett-tagwahl .planen-wl-kopf{ padding:0 6px 0 var(--innen); }
.planen-brett-tagwahl .planen-wl-tage{ gap:2px; padding:0 2px; }
.planen-brett-tagwahl-satz{ padding:10px 4px 0; }
.planen-blatt-warten .chips{ padding:10px 12px 12px var(--innen); }
.planen-brett-feld{ margin:8px 10px 10px; background:var(--mulde); }
.planen-brett-feld .feld-eingabe{ min-width:0; width:0; flex:1 1 auto; padding-left:12px; }

@media (prefers-reduced-motion:reduce){
  .planen-brett-kachel, .planen-brett-spalte, .planen-brett-karte{ transition:none; }
}
.planen-brett-zeile.tiefe-blockiert .zl-zusatz{ color:var(--tinte); }

/* Wolke (Plan N2, Stufe 7): das Brett als eigene Seite füllt am Desktop die Höhe wie im Prototyp in „Projekte und Ziele“ */
.planen-brett-desk-huelle{ height:100%; min-height:0; display:flex; flex-direction:column; }
.planen-brett-desk-huelle > .planen-brett-desk{ flex:1 1 auto; }

/* ── css/teile/pakete/schulden.css ── */
/* EasyLife Wolke · Aussehen des Teils „Wer schuldet wem“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt 1).
   In Welle 0 vorgemeldet (wolke/index.html; der Server bündelt es). Nur Bausteine nach WOLKE.md im Prototyp.
   Übernommen aus dem Prototyp (design/neustart/runde-12/prototyp/css/teile/listen.css, Abschnitte „Zeile Hinzufügen“,
   „Blätter“, „Wer schuldet wem“), nur was diese Seite braucht und css/teile/listen.css noch nicht hat. Nur Tokens. */

/* Zeile „Hinzufügen“ unter Listenzeilen mit Symbol: Plus so breit wie deren Symbol */
.listen-hinzu-lz{ grid-template-columns:18px minmax(0,1fr) auto; column-gap:12px; }
.listen-hinzu-lz .listen-hinzu-plus{ justify-content:flex-start; }
.listen-hinzu-lz .listen-hinzu-plus svg.i{ width:18px; height:18px; }

/* Blätter: Wortschalter über die ganze Breite, Knöpfe unter einer Fläche (am Handy über die ganze Breite, am Desktop rechts) */
.listen-ws-breit{ display:grid; width:100%; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
.listen-ws-breit .ws-wort{ padding:0 6px; }
.listen-ws-breit.ws-n4{ grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0,1fr)); }
/* Die Knöpfe behalten die Kern-Form (Pille, css/bausteine.css): Der Prototyp rundete sie hier eigens (18 px), der
   Wolke-Vertrag des Prüfstands lässt nur die Kern-Form zu (wie .teilen-knoepfe in css/teile/listen.css). */
.listen-knoepfe{ display:grid; gap:8px; padding:14px var(--innen) 2px; }
.blatt-unten .listen-knoepfe{ padding-left:0; padding-right:0; }
.blatt-mitte .listen-knoepfe, .werk-inhalt .listen-knoepfe{ display:flex; flex-wrap:wrap; }
.blatt-mitte .listen-knoepfe{ justify-content:flex-end; padding-top:16px; }

/* ---------- Wer schuldet wem ---------- */
.listen-klein{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding-top:8px; text-wrap:pretty; }
.listen-klein.erste{ padding-top:0; }
/* „Du“ ist kurz: der Chip bleibt trotzdem 44 px breit */
.chip.listen-chip-du{ min-width:44px; }
.chip.listen-chip-du .chip-pille{ min-width:44px; justify-content:center; padding:0 10px; }

/* Summe oben: „Du bekommst · Du schuldest“ (Desktop dazu „Unterm Strich“) */
.listen-sd-summe{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:16px; padding:12px 12px 14px var(--innen); }
.listen-sd-summe.drei{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.werk-inhalt .listen-sd-summe{ padding-top:2px; }
.listen-sd-spalte{ min-width:0; }
.listen-sd-wort{ font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; color:var(--neben); }
.listen-sd-betrag{ font-size:var(--t-gross); line-height:var(--z-gross); font-weight:700; letter-spacing:-.018em; margin-top:2px; overflow-wrap:anywhere; }
.listen-sd-wer{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); margin-top:2px; text-wrap:pretty; }
.listen-sd-spalte.netto .listen-sd-betrag{ color:var(--art-geld-text); }
/* Handy: „Unterm Strich bekommst du 12.966 ₦.“ unter den zwei Spalten, wenn Geld in beide Richtungen offen ist */
.listen-sd-netto{ grid-column:1 / -1; margin-top:10px; font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); }
.listen-sd-netto b{ font-weight:700; color:var(--art-geld-text); }

/* Felder in Flächen und Blättern (Kern-Form .feld) */
.listen-felder{ display:flex; flex-direction:column; gap:8px; padding:2px 12px 12px var(--innen); }
.listen-felder .feld, .listen-eigene .feld{ margin-top:0; }
.listen-eigene{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.listen-eigene-zeile{ display:grid; grid-template-columns:minmax(0, 132px) minmax(0,1fr); align-items:center; column-gap:10px; }
.listen-eigene-name{ font-size:var(--t-mittel); line-height:var(--z-mittel); font-weight:600; overflow-wrap:anywhere; }

/* aufgeklappt im Blatt: Nachricht, Teilweise bezahlt */
.listen-nachricht .entwurf-text{ margin-top:10px; }
.listen-nachricht-knoepfe{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.listen-teil .chips{ margin:4px 0 2px; }

/* ── css/teile/pakete/geld.css ── */
/* EasyLife Wolke · Aussehen des Pakets „Geld und Papierkram“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt 2).
   In Welle 0 vorgemeldet (wolke/index.html; der Server bündelt es). Nur Bausteine nach WOLKE.md im Prototyp: übernommen aus
   design/neustart/runde-12/prototyp/css/teile/listen.css (Abschnitte „Ausgaben“, „Kurve“, „Kontoauszug“, „Verträge“,
   „Wird geschrieben“), die Klassen mit Vorsatz .geld- statt .listen-. Farben, Größen, Rundungen und Bewegung nur über
   css/tokens.css. Der Briefbogen ist Papier (Inhalt, kein Baustein). */

/* ---------- Knöpfe unter einer Fläche: am Handy über die ganze Breite, am Desktop rechts (Prototyp .listen-knoepfe) ----------
   Rundung: der Prototyp nimmt 18 px bzw. --r-zeile; der Vertrag (WOLKE.md) kennt die dunkle Handlung nur als Pille, wie
   css/teile/aufraeumen.css die großen Knöpfe */
.geld-knoepfe{ display:grid; gap:8px; padding:14px var(--innen) 2px; }
.geld-knoepfe .kn{ min-height:52px; font-size:var(--t-text); border-radius:var(--r-pille); }
.werk-inhalt .geld-knoepfe{ display:flex; flex-wrap:wrap; }
.werk-inhalt .geld-knoepfe .kn{ min-height:44px; font-size:var(--t-mittel); }
.geld-knoepfe-rechts{ justify-content:flex-end; }
/* Wortschalter über die ganze Breite (Prototyp .listen-ws-breit; „Wie früh willst du erinnert werden?“) */
.geld-ws-breit{ display:grid; width:100%; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
.geld-ws-breit .ws-wort{ padding:0 6px; }
.geld-warnung .lz-titel{ font-weight:500; }

/* ---------- Ausgaben: Summe und Balken je Woche ---------- */
.geld-summe{ padding:14px var(--innen) 16px; }
.geld-summe-betrag{ font-size:var(--t-gross); line-height:var(--z-gross); font-weight:700; letter-spacing:-.018em; }
.geld-summe-satz{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); margin-top:2px; text-wrap:pretty; }
.werk-inhalt .geld-summe{ padding-top:0; }
.geld-balken{ display:flex; flex-direction:column; gap:2px; padding:0 12px 12px var(--innen); }
.geld-balken-zeile{ display:grid; grid-template-columns:92px minmax(0,1fr) 84px; align-items:center; column-gap:12px; min-height:30px; }
.geld-balken-name{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); white-space:nowrap; }
.geld-balken-bahn{ display:block; height:8px; border-radius:4px; background:var(--mulde); overflow:hidden; }
.geld-balken-fuellung{ display:block; width:100%; height:100%; border-radius:4px; background:var(--kreis); transform-origin:0 50%; transition:transform 560ms var(--weich); }
.geld-balken-zeile.jetzt .geld-balken-fuellung{ background:var(--akzent); }
.geld-balken-zeile.jetzt .geld-balken-name{ color:var(--akzent-tief); font-weight:600; }
.geld-balken-wert{ font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; text-align:right; white-space:nowrap; }
.geld-ausgaben > .fl + .listen-flaechen{ margin-top:10px; }
.geld-oben:empty{ display:none; }
/* die Frage nach der Währung steht über der Summe: Abstand wie zwischen zwei Flächen (.fl + .fl) */
.geld-oben:not(:empty) + .fl{ margin-top:16px; }
.geld-ausgaben-desk > .geld-oben:not(:empty) + .fl{ margin-top:20px; }
@media (prefers-reduced-motion:reduce){ .geld-balken-fuellung{ transition:none; } }

/* Ausgaben am Desktop: eine Spalte (Summe, je Woche, Kurve, Einträge, Kontoauszug) */
.geld-ausgaben-desk > .fl + .fl, .geld-ausgaben-desk > .fl + .listen-flaechen, .geld-ausgaben-desk > .listen-fuss + .fl{ margin-top:20px; }

/* die Währung: einmal wählen (eigener Teil) */
.geld-waehrung-satz{ font-size:var(--t-mittel); line-height:var(--z-mittel); }
.geld-waehrungen{ margin-top:10px; }

/* ---------- Kurve ---------- */
.geld-kurve{ position:relative; min-height:216px; margin:4px var(--innen) 0; }
.geld-kurve-svg{ display:block; overflow:visible; }
.geld-kurve-gitter{ stroke:var(--trenner); stroke-width:1; }
.geld-kurve-y, .geld-kurve-x{ fill:var(--neben); font-family:var(--schrift); font-size:13px; font-variant-numeric:tabular-nums; }
.geld-kurve-heute{ stroke:var(--akzent); stroke-width:1.5; stroke-dasharray:3 4; }
.geld-kurve-heute-text{ fill:var(--akzent); font-family:var(--schrift); font-size:13px; font-weight:700; }
.geld-kurve-flaeche{ fill:color-mix(in srgb, var(--akzent) 10%, transparent); }
.geld-kurve-linie{ fill:none; stroke:var(--akzent); stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round; }
.geld-kurve-punkt{ fill:var(--flaeche); stroke:var(--akzent); stroke-width:2; }
.geld-kurve-punkt.neu{ fill:var(--akzent); }
.geld-kurve-treffer{ fill:transparent; cursor:pointer; }
.geld-kurve-tipp{ position:absolute; z-index:2; transform:translate(-50%, calc(-100% - 14px)); display:flex; flex-direction:column; gap:1px; padding:8px 12px; border-radius:12px;
  background:var(--umkehr); color:var(--auf-umkehr); font-size:var(--t-klein); line-height:var(--z-klein); white-space:nowrap; pointer-events:none; box-shadow:var(--schatten-heben); }
.geld-kurve-tipp b{ font-weight:700; }
.geld-kurve-tipp-summe{ opacity:.8; }

/* ---------- Kontoauszug: Ablage zum Hineinziehen (eingelassen, Mulde) ---------- */
.geld-ablage{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; margin:4px var(--innen) 0; padding:22px 16px 16px; border-radius:var(--r-flaeche);
  background:var(--mulde); box-shadow:inset 0 0 0 1.5px var(--trenner);
  transition:box-shadow var(--d-kurz) var(--standard), transform var(--d-mittel) var(--weich); }
.geld-ablage.drueber{ box-shadow:inset 0 0 0 1.5px var(--akzent); transform:scale(1.015); }
.geld-ablage-sym{ display:flex; color:var(--neben); }
.geld-ablage-sym svg.i{ width:26px; height:26px; stroke-width:1.75; }
.geld-ablage.drueber .geld-ablage-sym, .geld-ablage.liest .geld-ablage-sym{ color:var(--akzent); }
.geld-ablage.liest .geld-ablage-sym{ animation:geld-atmen 1.2s ease-in-out infinite; }
.geld-ablage-titel{ font-size:var(--t-text); line-height:var(--z-text); font-weight:600; text-wrap:balance; }
.geld-ablage-satz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); max-width:36ch; text-wrap:pretty; }
.geld-ablage-wahl{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 8px; margin-top:6px; }
.geld-ablage .kn-ruhig{ background:var(--flaeche); }
.geld-ablage-neu{ display:flex; flex-direction:column; padding:0 12px 0 var(--innen); }
.geld-ablage-neu li{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t b" "d b"; column-gap:10px; padding:7px 0; border-top:1px solid var(--trenner); }
.geld-ablage-neu li:first-child{ border-top:0; }
.geld-ablage-neu-titel{ grid-area:t; font-size:var(--t-mittel); line-height:20px; font-weight:500; overflow-wrap:anywhere; }
.geld-ablage-neu-datum{ grid-area:d; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.geld-ablage-neu-betrag{ grid-area:b; align-self:center; font-size:var(--t-klein); font-weight:600; }

/* ---------- Verträge: rechts der gewählte Vertrag mit dem Briefbogen ---------- */
.geld-vertrag-rechts{ min-width:0; }
.geld-vertrag-rechts > .geld-brief{ margin-top:18px; }
.geld-vertrag-rechts > .listen-seite + .listen-seite{ margin-top:18px; }
.geld-brief-innen{ padding:4px var(--innen) 8px; }
.geld-brief-innen > .fuss-satz{ padding-left:0; padding-right:0; max-width:640px; }
.geld-brief-innen > .geld-knoepfe{ padding:14px 0 0; max-width:640px; }
.geld-brief-bogen{ max-width:640px; background:var(--papier); color:var(--papier-text); border-radius:var(--r-block); box-shadow:0 0 0 1px var(--papier-strich);
  padding:40px 48px 44px; font-size:var(--t-mittel); line-height:24px; }
.geld-brief-bogen ::selection{ background:color-mix(in srgb, var(--akzent) 26%, transparent); }
.geld-brief-absender{ white-space:pre-line; text-align:right; font-size:var(--t-klein); line-height:19px; margin-bottom:18px; }
.geld-brief-datum{ text-align:right; margin:4px 0 12px; }
.geld-brief-zeile{ display:block; width:calc(100% + 20px); min-height:44px; margin:0 -10px; padding:10px; border:0; border-radius:10px; outline:none; background:transparent;
  font:inherit; color:inherit; transition:background-color var(--d-kurz) var(--standard); }
.geld-brief-betreff{ font-weight:700; }
.geld-brief-feld{ position:relative; margin:6px -10px 0; }
.geld-brief-spiegel, .geld-brief-text{ display:block; width:100%; margin:0; padding:10px; border:0; font:inherit; line-height:24px; letter-spacing:normal;
  white-space:pre-wrap; overflow-wrap:break-word; word-break:normal; }
.geld-brief-spiegel{ position:absolute; inset:0; color:transparent; pointer-events:none; overflow:hidden; }
.geld-brief-marke{ color:transparent; background:color-mix(in srgb, var(--akzent) 24%, transparent); border-radius:4px; box-shadow:0 0 0 2px color-mix(in srgb, var(--akzent) 24%, transparent); }
.geld-brief-text{ position:relative; min-height:220px; resize:none; overflow:hidden; outline:none; background:transparent; color:var(--papier-text); caret-color:var(--akzent); border-radius:10px;
  transition:background-color var(--d-kurz) var(--standard); }
@media (hover:hover){ .geld-brief-zeile:hover, .geld-brief-text:hover{ background:color-mix(in srgb, var(--papier-text) 4%, transparent); } }
.geld-brief-zeile:focus, .geld-brief-text:focus{ background:color-mix(in srgb, var(--akzent) 7%, transparent); }
/* Handy: das Schreiben zum Lesen */
.geld-brief-handy .entwurf-text{ font-size:var(--t-mittel); }
.geld-brief-luecke{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding-top:8px; }

/* ---------- „Wird geschrieben …": ruhige Platzhalterzeilen ---------- */
.geld-schreibt{ display:flex; flex-direction:column; gap:10px; padding:12px var(--innen) 18px; }
.geld-schreibt-satz{ font-size:var(--t-mittel); line-height:var(--z-mittel); color:var(--neben); }
.geld-schreibt i{ display:block; height:10px; border-radius:5px; background:var(--mulde); animation:geld-atmen 1.3s ease-in-out infinite; }
.geld-schreibt i:nth-of-type(1){ width:88%; }
.geld-schreibt i:nth-of-type(2){ width:94%; animation-delay:.15s; }
.geld-schreibt i:nth-of-type(3){ width:72%; animation-delay:.3s; }
.geld-schreibt i:nth-of-type(4){ width:58%; animation-delay:.45s; }
.geld-schreibt i:nth-of-type(5){ width:40%; animation-delay:.6s; }
@keyframes geld-atmen{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .geld-schreibt i, .geld-ablage.liest .geld-ablage-sym{ animation:none; } }

/* ── css/teile/pakete/gesundheit.css ── */
/* EasyLife Wolke · Aussehen des Pakets „Gesundheit“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt 3).
   In Welle 0 vorgemeldet (wolke/index.html; der Server bündelt es). Nur Bausteine nach WOLKE.md im Prototyp. Noch leer. */

/* ── css/teile/pakete/familie.css ── */
/* EasyLife Wolke · Aussehen des Pakets „Familie und Haushalt“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt 4).
   In Welle 0 vorgemeldet (wolke/index.html; der Server bündelt es). Nur Bausteine nach WOLKE.md im Prototyp: übernommen aus
   design/neustart/runde-12/prototyp/css/teile/listen.css (Abschnitte „Blätter“, „Haushalt“, „Essensplan“), die Klassen mit
   Vorsatz .familie- statt .listen-. Farben, Größen, Rundungen und Bewegung nur über css/tokens.css. */

/* ---------- Blätter: Wortschalter über die ganze Breite, Knöpfe unter einer Fläche ----------
   Die Knöpfe behalten die Kern-Form (Pille, css/bausteine.css), wie .geld-knoepfe und .listen-knoepfe in Wolke. */
.familie-ws-breit{ display:grid; width:100%; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
.familie-ws-breit .ws-wort{ padding:0 6px; }
.familie-ws-breit.ws-n4{ grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0,1fr)); }
.familie-knoepfe{ display:grid; gap:8px; padding:14px var(--innen) 2px; }
.blatt-unten .familie-knoepfe{ padding-left:0; padding-right:0; }
.blatt-mitte .familie-knoepfe, .werk-inhalt .familie-knoepfe{ display:flex; flex-wrap:wrap; }
.blatt-mitte .familie-knoepfe{ justify-content:flex-end; padding-top:16px; }

/* Zeile „Hinzufügen“ unter Listenzeilen mit Symbol: Plus so breit wie deren Symbol (Prototyp .listen-hinzu-lz) */
.familie-hinzu-lz{ grid-template-columns:18px minmax(0,1fr) auto; column-gap:12px; }
.familie-hinzu-lz .listen-hinzu-plus{ justify-content:flex-start; }
.familie-hinzu-lz .listen-hinzu-plus svg.i{ width:18px; height:18px; }

/* ---------- Haushaltsaufgaben (eine Spalte, Runde 12, Schritt 5): beim Ziehen wird die andere Person zur Ablage, die unter
   dem Finger bekommt einen Rand in der Akzentfarbe (am Handy weiße Karten, am Desktop ohne Grund: dort eine leise Mulde) */
.familie-haushalt .listen-flaechen > .fl{ transition:background-color var(--d-kurz) var(--standard), box-shadow var(--d-kurz) var(--standard); }
.werk-inhalt .familie-beim-ziehen .listen-flaechen > .fl[data-wer]{ background:var(--mulde); }
.familie-beim-ziehen .listen-flaechen > .fl.familie-ziel > .fl-zeilen{ box-shadow:inset 0 0 0 2px var(--akzent); }
.werk-inhalt .familie-beim-ziehen .listen-flaechen > .fl.familie-ziel{ box-shadow:inset 0 0 0 2px var(--akzent); }
.werk-inhalt .familie-beim-ziehen .listen-flaechen > .fl.familie-ziel > .fl-zeilen{ box-shadow:none; }
.familie-haushalt .zl.zieh-bar .zl-haupt{ cursor:grab; }

/* ---------- Essensplan ---------- */
.lz.familie-frei .lz-titel{ color:var(--neben); font-weight:400; }
.familie-essen-tafel{ display:flex; flex-direction:column; }
.familie-essen-tafel > .fl + .fl, .familie-essen-tafel > * + .fl{ margin-top:10px; }
.werk-inhalt .familie-essen-tafel > .fl + .fl, .werk-inhalt .familie-essen-tafel > * + .fl{ margin-top:18px; }

/* ---------- „Im Familienkalender“ im Eintrags-Blatt ---------- */
.familie-kalender-wahl .ws{ margin-top:2px; }

/* ── css/teile/pakete/musik.css ── */
/* EasyLife Wolke · Aussehen des Pakets „Musik und Kreatives“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt 5).
   In Welle 0 vorgemeldet (wolke/index.html; der Server bündelt es). Nur Bausteine nach WOLKE.md im Prototyp: Die Seite und
   die Blätter nehmen die Formen des Gedächtnisses (css/teile/gedaechtnis.css) und der Blätter „Neue …“ (css/neu.css). Neu
   ist nur der Kalender unter „Anderer Tag“ (weniger Rand als unter Planen, damit jeder Tag am Handy 44 px breit bleibt) im Blatt einer Vorlage (gilt auch für Lernen): derselbe Monat wie unter Planen ›
   Vorlagen (css/teile/planen.css, .planen-mw), hier unter seiner Zeile in der Karte. */
.rueckwaerts-kalender .planen-mw{ max-width:400px; padding:2px 2px 8px; }

/* ── css/teile/pakete/lernen.css ── */
/* EasyLife Wolke · Aussehen des Pakets „Lernen“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt 6).
   In Welle 0 vorgemeldet (wolke/index.html; der Server bündelt es). Die Seite und das Blatt „Lernplan“ nehmen die Formen des
   Gedächtnisses (css/teile/gedaechtnis.css), der Blätter „Neue …“ (css/neu.css) und den Kalender aus
   css/teile/pakete/musik.css (gemeinsam für das Rückwärts-Planen). Eigene Regeln braucht es keine. */

/* ── css/teile/pakete/arbeit.css ── */
/* EasyLife Wolke · Aussehen des Pakets „Arbeit“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt 7).
   In Welle 0 vorgemeldet (wolke/index.html; der Server bündelt es). Nur Bausteine nach WOLKE.md im Prototyp.
   Leer mit Absicht (Welle 2): Gedächtnis › Arbeit, der Entwurf und das Feld zum Bearbeiten nehmen dieselben Klassen wie im
   Prototyp (.entwurf, .entwurf-text, .laeuft-zeile in css/handy.css; .gedaechtnis-feldrahmen, .gedaechtnis-mail,
   .gedaechtnis-knopf-reihe in css/teile/gedaechtnis.css; die Quellen .netz-quellen in css/teile/pakete/netz.css). */

/* ── css/teile/pakete/gedaechtnis.css ── */
/* EasyLife Wolke · Aussehen des Teils „Zeitkapseln, Entscheidungen, Jahresrückblick“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt 8).
   In Welle 0 vorgemeldet (wolke/index.html; der Server bündelt es). Nur Bausteine nach WOLKE.md im Prototyp.
   Keine eigenen Regeln: Die drei Seiten und ihre Blätter nutzen dieselben Klassen wie im Prototyp (gedaechtnis-gross,
   gedaechtnis-lesen-flaeche, gedaechtnis-eingabe, gedaechtnis-chips, gedaechtnis-zwei … in css/teile/gedaechtnis.css). */

/* ── css/teile/pakete/rueckblick.css ── */
/* EasyLife Wolke · Aussehen des Teils „Wochenrückblick“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt 10).
   In Welle 0 vorgemeldet (wolke/index.html; der Server bündelt es). Nur Bausteine nach WOLKE.md im Prototyp. Noch leer. */

/* ── css/teile/pakete/coaches.css ── */
/* EasyLife Wolke · Aussehen des Teils „Coaches“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt 11).
   In Welle 0 vorgemeldet (wolke/index.html; der Server bündelt es). Nur Bausteine nach WOLKE.md im Prototyp. Noch leer. */

/* ── css/teile/pakete/netz.css ── */
/* EasyLife Wolke · Aussehen des Teils „Antworten aus dem Internet“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt B).
   In Welle 0 vorgemeldet (wolke/index.html; der Server bündelt es). Nur Bausteine nach WOLKE.md im Prototyp: Die Quellen
   unter einer Antwort aus dem Netz stehen wie „Frag zum Beispiel:“ mit seinen Sätzen (gedaechtnis-vorschlaege-satz und
   chips, css/teile/gedaechtnis-zusatz.css:38-39) — ein leiser Satz, darunter Chips; keine neue Gestaltung. */
.netz-quellen{ margin-top:8px; }
.netz-quellen-satz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); }
.netz-quellen-chips{ margin-top:2px; }
.ge-antwort .netz-quellen{ margin-top:6px; }

/* ── css/teile/pakete/foto.css ── */
/* EasyLife Wolke · Aussehen des Teils „Fotos lesen“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt A).
   Das Foto-Blatt selbst (.foto-blatt, .foto-kopf, .foto-satz, .gelesen-kopf, .scan, .gelesen) steht seit Stufe 6 in
   css/handy.css (aus dem Prototyp, „Foto: gezeichnete Beispiel-Dokumente“). Hier nur, was das echte Foto braucht: Es
   steht an der Stelle des gezeichneten Blatts (Prototyp .papier.gross, .papier.vorschau), mit derselben Ecke und demselben
   Schatten, aber im Seitenverhältnis des Bildes. */

.foto-bild{ position:relative; width:min(64%, 230px); margin:4px auto 0; border-radius:8px; overflow:hidden; background:var(--papier);
  box-shadow:0 1px 2px rgba(20,30,26,.18), 0 8px 16px -10px rgba(20,30,26,.35); }
.foto-bild img{ display:block; width:100%; height:auto; max-height:min(48vh, 360px); object-fit:contain; background:var(--papier); }
.foto-bild.vorschau{ width:112px; margin:0; flex:0 0 auto; }
.foto-bild.vorschau img{ max-height:150px; }
/* das Lesen dauert länger als im Prototyp (dort 950 ms): der Streifen läuft weiter, bis der Kern antwortet */
.foto-bild .scan{ animation-duration:1400ms; animation-iteration-count:infinite; }

/* was nicht angelegt wurde und warum: leise unter den Zeilen, im Satz des Foto-Blatts (.foto-satz) */
.foto-hinweise{ margin-top:10px; }
.foto-hinweise .foto-satz{ padding:2px 8px 4px; }
.foto-fuss{ padding:10px 8px 0; }
.foto-knoepfe{ display:flex; gap:10px; padding:2px 4px 4px; }

/* Desktop: eine Datei über dem Blatt — es zeigt mit einem Rand in der Akzentfarbe, dass es sie nimmt */
.blatt-foto.foto-ziel .foto-blatt{ box-shadow:inset 0 0 0 2px var(--akzent); border-radius:16px; }

/* Gedächtnis › Fotos: das Bild im Blatt eines Fotos */
.foto-ansicht{ padding:8px; }
/* so hoch, dass darunter noch „Daraus entstanden“ und die Handlungen ins Blatt passen */
.foto-ansicht img{ display:block; width:100%; height:auto; max-height:min(40vh, 400px); object-fit:contain; border-radius:10px; background:var(--papier); }

/* „Foto endgültig löschen“ steht eigens unter den Flächen des Blatts (eine eigene Hülle, damit das Feld beim Tippen bleibt):
   derselbe Abstand wie zwischen zwei Flächen (css/bausteine.css: .blatt-rumpf > .fl + .fl) */
.blatt-rumpf > .foto-endgueltig{ margin-top:16px; }

/* Welle 2: was nicht lesbar war, leise unter dem Bild eines Fotos */
.foto-nicht-lesbar{ padding:2px 12px 12px var(--innen); }

/* ==========================================================================
   Welle 2: Seite „Kassenbon“ (wolke/js/teile/pakete/kassenbon.js). Übernommen aus dem Prototyp
   (design/neustart/runde-12/prototyp/css/teile/listen.css, Abschnitt „Kassenbon“); was Wer schuldet wem schon hat
   (.listen-klein, .listen-eigene, .listen-ws-breit, .listen-knoepfe, .chip.listen-chip-du), kommt aus
   css/teile/pakete/schulden.css. Nur Tokens.
   ========================================================================== */
.listen-bon-fuer.andere{ color:var(--diese-art-text, var(--art-person-text)); font-weight:600; }
.listen-bon-panel{ padding:4px 12px 12px var(--innen); }
.listen-bon-panel .chips{ margin-top:6px; }
.listen-bon-panel .ws{ margin-top:10px; }
.listen-bon-panel-fuss{ display:flex; justify-content:flex-end; margin-top:2px; }
.listen-bon-panel-fuss .wort-knopf{ margin:0 -4px 0 0; }
.listen-bon-satz{ padding:2px 12px 12px var(--innen); }
.listen-bon-satz .feld{ margin-top:0; }
.listen-bon-hinweise{ padding:0 12px 12px calc(var(--innen) + var(--kante-b)); }
.listen-bon-unten{ margin-top:10px; }
.werk-inhalt .listen-bon-unten{ margin-top:18px; }
.listen-bon-status{ padding:12px var(--innen) 0; }
.listen-bon-status .wort-knopf{ margin:4px 0 0 -8px; }
/* der Satz steht als Fußsatz auf dem Grund (Wolke-Vertrag): ohne eigenen Rand, den hat .listen-bon-status */
.listen-bon-status .fuss-satz{ padding:0; }
/* am Desktop liegen Flächen ohne Grund auf dem Inhaltsrand: Satz und Knöpfe darunter auch */
.werk-inhalt .listen-bon-status, .werk-inhalt .listen-bon-knoepfe{ padding-left:0; }

/* Desktop: links der Bon zum Anklicken, rechts das Aufteilen */
.listen-bon-desk{ display:grid; grid-template-columns:minmax(260px, 340px) minmax(0,1fr); column-gap:40px; align-items:start; }
.listen-bon-links{ position:sticky; top:0; min-width:0; }
.listen-bon-links-satz{ padding:0 0 10px; }
.listen-bon-rechts{ min-width:0; max-width:720px; }
/* schmal (unter 856 px Arbeitsfläche) untereinander: dann ist es eine Seite mit einer Spalte und steht mittig wie jede andere */
@container werkrahmen (max-width: 856px){
  .listen-bon-desk{ grid-template-columns:minmax(0,1fr); row-gap:18px; }
  .listen-bon-links{ position:static; max-width:420px; }
  .werk:has(> .werk-buehne > .werk-inhalt:not(.geht) .listen-bon-desk) > .werk-kopf, .werk-inhalt:has(.listen-bon-desk){ --eine-spalte:1; --spalte-max:var(--spalte-breite); }
}
.listen-bon-papier{ background:var(--papier-bon); color:var(--papier-text); border-radius:var(--r-block); box-shadow:0 0 0 1px var(--papier-strich), var(--schatten-heben);
  padding:22px 20px 22px; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:14px; line-height:20px; }
.listen-bon-p-kopf{ font-family:var(--schrift); font-size:var(--t-text); line-height:var(--z-text); font-weight:700; text-align:center; overflow-wrap:anywhere; }
.listen-bon-p-klein{ font-size:13px; line-height:19px; text-align:center; }
.listen-bon-p-strich{ border-top:1.5px dashed var(--papier-strich); margin:12px 0 8px; }
.listen-bon-p-zeile{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-items:baseline; width:calc(100% + 16px); margin:0 -8px; padding:8px;
  min-height:44px; border-radius:8px; text-align:left; font:inherit; color:inherit; transition:background-color var(--d-kurz) var(--standard); }
.listen-bon-p-zeile.listen-bon-paar{ background:color-mix(in srgb, var(--papier-text) 6%, transparent); }
@media (hover:hover){ .listen-bon-p-zeile:hover{ background:color-mix(in srgb, var(--papier-text) 6%, transparent); } }
.listen-bon-p-zeile.an{ background:var(--akzent-weich); color:var(--akzent-tief); }
.listen-bon-p-titel{ min-width:0; overflow-wrap:anywhere; }
.listen-bon-p-betrag{ font-variant-numeric:tabular-nums; }
.listen-bon-p-marken{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.listen-bon-p-marke{ font-family:var(--schrift); font-size:var(--t-klein); line-height:20px; font-weight:600; padding:0 8px; border-radius:10px; background:var(--mulde); color:var(--tinte); }
.listen-bon-p-marke[data-art]{ background:var(--diese-art-grund); color:var(--diese-art-text); }
.listen-bon-p-summe{ display:flex; justify-content:space-between; font-weight:700; padding:2px 0 8px; }
.lz.listen-bon-paar{ background:var(--mulde); border-radius:var(--r-zeile); }

/* ── css/teile/pakete/mitbringen.css ── */
/* EasyLife Wolke · Aussehen des Teils „Alte Notizen, Chat-Verläufe, WhatsApp-Link“ (Plan N2, Stufe 13; docs/PLAN-N2-PAKETE.md, Abschnitt C).
   In Welle 0 vorgemeldet (wolke/index.html; der Server bündelt es). Nur Bausteine nach WOLKE.md im Prototyp.
   „Nachricht vorbereiten“ im Eintrags-Blatt, aufgeklappt unter der Zeile: dieselben Maße wie die Nachricht bei „Wer schuldet
   wem“ (css/teile/pakete/schulden.css, .listen-nachricht); der Text in der Mulde wie jeder Entwurf (.entwurf-text, css/handy.css). */
.mitbringen-nachricht .entwurf-text{ margin-top:2px; }
.mitbringen-knoepfe{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.mitbringen-knoepfe .kn{ flex:0 0 auto; }
.mitbringen-klein{ margin:0; padding-top:8px; font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); text-wrap:pretty; }

/* ── css/teile/pakete/anhaenge.css ── */
/* EasyLife Wolke · Aussehen des Teils „Notiz, Links und Dokumente“ (anhaenge; wolke/js/teile/pakete/anhaenge.js).
   Nur Bausteine nach WOLKE.md im Prototyp: Gruppen-Karte (b.flaeche), Listenzeilen, Felder in der Mulde, Knöpfe. Hier steht
   nur, was diese Zeilen brauchen, damit nichts abgeschnitten wird: eine Notiz behält ihre Zeilen, lange Adressen und
   Dateinamen brechen um. Keine eigenen Rundungen, Schatten oder Farben außer den Tokens. */

/* Die Notiz: wie ein Zeilentitel, aber in der Schrift des Textes, mit ihren Zeilen; Links darin zum Antippen */
.lz.anh-notiz{ align-items:flex-start; padding-top:10px; padding-bottom:10px; }
.lz.anh-notiz .lz-symbol{ margin-top:1px; }
.anh-text{ font-weight:400; white-space:pre-wrap; overflow-wrap:anywhere; }
.anh-link-im-text{ color:var(--akzent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.anh-link-im-text:focus-visible{ outline:2px solid var(--akzent); outline-offset:2px; border-radius:4px; }

/* Links und Dokumente: lange Adressen und Namen brechen um, statt zu verschwinden */
.lz.anh-link .lz-titel, .lz.anh-link .lz-zusatz, .lz.anh-dok .lz-titel, .lz.anh-hoch .lz-titel{ overflow-wrap:anywhere; }
.lz.anh-hoch .lz-zusatz{ color:var(--akzent); }

/* Die Felder zum Schreiben stehen wie eine Zeile: links die Plakette, das Feld auf der Kante des Textes (Kante B) */
.lz.anh-editor{ align-items:flex-start; padding-top:10px; padding-bottom:12px; }
.lz.anh-editor .lz-symbol{ margin-top:6px; }
.anh-editor .gedaechtnis-eingabe{ min-height:104px; }
.anh-link-form{ display:flex; flex-direction:column; gap:8px; }
.anh-link-form .feld{ margin:0; background:var(--mulde); padding:0 14px; }
.anh-link-form .neu-fehler{ padding:0; }
.anh-editor .menschen-knoepfe{ margin-top:10px; }
.anh-zaehler{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding-top:6px; }

/* Leise Sätze unter den Zeilen: wer es sieht, was nicht ging */
.anh-satz{ font-size:var(--t-klein); line-height:var(--z-klein); color:var(--neben); padding:4px 14px 12px var(--innen); text-wrap:pretty; }
.neu-fehler.anh-satz{ color:var(--akzent-tief); font-weight:600; }

/* Am Desktop eine Datei hineinziehen (wie das Foto-Blatt: ein Rand in der Akzentfarbe) */
.fl.anh-flaeche.anh-ziel{ box-shadow:inset 0 0 0 2px var(--akzent); }

/* Die Wege im Eintrags-Blatt („Notiz“, „Link“, „Dokument“) */
.anh-wege{ padding-top:2px; }

/* Ein Bild im Blatt eines Dokuments (wie das Bild eines Fotos) */
.anh-vorschau{ padding:8px; }
.anh-vorschau img{ display:block; width:100%; height:auto; max-height:min(40vh, 400px); object-fit:contain; border-radius:10px; background:var(--papier); }

/* An der Nabe der Karte: was an dem Projekt oder Ziel hängt — unter dem Stand, auf der Kante des Textes */
.tiefe-c-anhang{ display:flex; align-items:center; gap:6px; min-height:44px; margin:0 0 4px calc(54px + 12px); padding:0;
  font-size:var(--t-klein); line-height:var(--z-klein); font-weight:600; color:var(--akzent); text-align:left; }
.tiefe-c-anhang .sym svg.i{ width:15px; height:15px; }
.tiefe-c-anhang span:last-child{ overflow-wrap:anywhere; }
.tiefe-c-anhang:focus-visible{ outline:2px solid var(--akzent); outline-offset:2px; border-radius:6px; }

/* ── css/teile/kalender-im-tag.css ── */
/* ==========================================================================
   EasyLife Wolke · Teil „Kalender im Tag“ (09.10.2026, Variante A, design/neustart/kalender-im-tag/a-farbe-*.png)

   Die Farbe eines Kalenders ordnet wie eine Artfarbe: gedämpft und gleich hell, in denselben Stufen (Marke, helle Fläche,
   Schrift; hell und dunkel). Gerechnet hat sie der Kern (core/kalender-farben.ts); hier stehen nur die Stellen, an denen
   sie zu sehen ist. Eigene Klassen beginnen mit .kal-… (und .zl-kalender an einer Zeile).
   ========================================================================== */

/* die Farben eines Kalenders: hell, und in der dunklen Darstellung (nur als ausdrückliche Wahl) */
.kal-farbig{ --kal-marke:var(--kal-h-marke, var(--neben)); --kal-grund:var(--kal-h-grund, var(--mulde)); --kal-text:var(--kal-h-text, var(--tinte)); }
:root[data-darstellung="dunkel"] .kal-farbig{ --kal-marke:var(--kal-d-marke, var(--neben)); --kal-grund:var(--kal-d-grund, var(--mulde)); --kal-text:var(--kal-d-text, var(--tinte)); }

/* ---------- die Knöpfe im Tag (unter dem Lage-Satz) ----------
   Chip wie im Vertrag (rund, 32 hoch in 44 Tippfläche): an = die helle Fläche des Kalenders (wie „gewählt“ bei einer Art),
   aus = Mulde, durchgestrichen, der Punkt nur als Ring. Die Reihe steht an der Kante der Karten (wie die Pillen darunter). */
.kal-knoepfe{ display:flex; flex-wrap:wrap; column-gap:6px; row-gap:0; margin:6px 0 -6px -4px; }
.kal-knoepfe[hidden]{ display:none; }
.kal-chip .chip-pille{ gap:7px; padding:0 13px 0 11px; font-size:var(--t-klein); font-weight:600; }
.kal-chip.an .chip-pille{ background:var(--kal-grund); color:var(--kal-text); }
.kal-chip.aus .chip-pille{ background:var(--mulde); box-shadow:none; color:var(--neben); text-decoration:line-through; text-decoration-thickness:1.5px; }
.kal-punkt{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--kal-marke); }
.kal-chip.aus .kal-punkt{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--kal-marke); }
.kal-chip:focus-visible{ outline:none; }
.kal-chip:focus-visible .chip-pille{ box-shadow:0 0 0 2px var(--akzent); }
/* der Tag rechts am Desktop (und als Seite am Handy): die Knöpfe stehen über den Flächen, unter dem Kopf der Seite */
.desktop-tag > .kal-knoepfe{ margin:-12px 0 8px; }

/* ---------- die Leiste neben der Termin-Karte (im Zeitband, in der Uhrzeitspalte) ----------
   4 px breit, so hoch wie die Karte, 5 px vor ihrer Kante; die Plakette in der Karte bleibt in der Farbe der Art Termin. */
.zl-kalender{ display:none; }
.fl-zeitband .zl.mit-kalender > .zl-kalender{ display:block; position:absolute; z-index:0; left:calc(var(--band-zeit) - 9px); top:0; bottom:0; width:4px; border-radius:2px;
  background:var(--kal-marke); pointer-events:none; }
.fl-zeitband .zl.mit-kalender.vorbei > .zl-kalender{ opacity:.55; }

/* ---------- außerhalb des Zeitbands („Morgen“): ein Punkt vor dem Titel ---------- */
.zl.mit-kalender:not(.zl-pille) .zl-titel-text::before{ content:""; display:inline-block; width:8px; height:8px; margin:0 7px 1px 0; border-radius:50%; vertical-align:middle;
  background:var(--kal-marke); }
.fl-zeitband .zl.mit-kalender .zl-titel-text::before{ content:none; }

/* ---------- im Blatt des Termins: „Aus dem Kalender „Gemeinsam“ · geteilt“ mit dem Punkt davor ---------- */
.kal-blatt{ display:flex; align-items:center; gap:7px; }

/*# sourceMappingURL=wolke.css.map */