/* Der Ring: wie weit die Ziele der Woche sind. */
.pl-ring{
  --gr:74px;
  flex:none;position:relative;display:grid;place-items:center;
  width:var(--gr);height:var(--gr);border-radius:50%;
  background:conic-gradient(var(--farbe, var(--accent)) calc(var(--anteil) * 360deg), var(--line) 0);
}
.pl-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface);}
.pl-ring > span{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1;}
.pl-ring b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;}
.pl-ring small{font-size:10.5px;font-weight:600;color:var(--ink-soft);margin-top:3px;}
.pl-ring.voll{background:var(--ok);}
.pl-ring.klein{--gr:40px;}
.pl-ring.klein::before{inset:4px;}
.pl-ring.klein > span{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;}

/* Der Umschalter steht ganz unten in dieser Datei (Abschnitt "Organisation: Umschalter …"). */
.pl-t-z{display:flex;} .pl-t-z svg{width:13px;height:13px;}

.pl-feld{
  padding:14px 12px 6px;border-radius:22px;margin:0 0 14px;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), 0 10px 26px -20px rgba(0,0,0,.3);
}
.pl-feld .af-zeile{background:var(--surface-2);background:color-mix(in srgb, var(--ground) 40%, var(--surface));}

/* Eintragen: ein Feld, ein Knopf, darunter "Wann?" als Chips. */
.pl-neu{margin:0 0 14px;}
.pl-neu-zeile{display:flex;gap:8px;align-items:center;}
.pl-neu-zeile input{
  flex:1;min-width:0;font:inherit;font-size:15px;color:var(--ink);
  padding:11px 15px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ground) 55%, var(--surface));
}
.pl-neu-zeile input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.pl-neu-zeile .btn{flex:none;width:44px;height:44px;padding:0;border-radius:50%;}
.pl-neu-zeile .btn svg{width:18px;height:18px;}
.pl-wann{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0 0 7px;}
.pl-wann-wort{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-right:2px;}

/* Die Gruppen: ein farbiger Punkt, das Wort, die Anzahl. */
.pl-gruppe{margin:0 0 12px;}
.pl-g-kopf{display:flex;align-items:center;gap:7px;margin:0 2px 7px;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);}
.pl-g-punkt{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none;}
.pl-g-zahl{margin-left:auto;font-variant-numeric:tabular-nums;padding:1px 8px;border-radius:999px;background:var(--surface-2);letter-spacing:0;}
.pl-g-ueber .pl-g-kopf{color:var(--alert);}
.pl-g-ueber .pl-g-punkt{background:var(--alert);}
.pl-g-ueber .af-zeile{border-color:color-mix(in srgb, var(--alert) 35%, transparent);
  background:color-mix(in srgb, var(--alert) 7%, var(--surface));}
.pl-g-heute .pl-g-kopf{color:var(--accent-deep);}
.pl-g-heute .pl-g-punkt{background:var(--accent);}
.pl-g-bald .pl-g-punkt{background:var(--ok);}
.pl-g-ohne .pl-g-punkt{background:color-mix(in srgb, var(--ink) 30%, transparent);}
.pl-f-aufgaben .af-liste{margin-bottom:0;}

.pl-leer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:18px 10px 16px;}
.pl-leer strong{font-size:14.5px;}
.pl-leer-text{font-size:12.5px;line-height:1.5;color:var(--ink-soft);max-width:32ch;}

/* Ziele: die Woche zum Blaettern, darunter der grosse Ring. */
.pl-woche{display:flex;align-items:center;gap:8px;margin:0 0 12px;}
.pl-woche-txt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;}
.pl-woche-txt strong{font-size:15px;}
.pl-woche-txt span{font-size:11.5px;color:var(--ink-soft);}
.pl-zurueck{background:none;border:none;padding:2px 6px;cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px;}
.pl-ziel-kopf{
  --dreh:40;--farbe:var(--accent);
  display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:12px;border-radius:18px;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--farbe) 9%, var(--surface));
}
@supports (color: oklch(from red l c h)){
  .pl-ziel-kopf{--farbe:oklch(from var(--accent) l calc(c + .07) calc(h + var(--dreh, 0)));}
}
.pl-ziel-kopf .pl-ring::before{background:color-mix(in srgb, var(--farbe) 9%, var(--surface));}
.pl-ziel-kopf p{margin:0;font-size:13.5px;line-height:1.45;font-weight:600;color:var(--ink);}

/* Notizen: "Neue Notiz" ist selbst die erste Karte. */
.pl-nz-neu{
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-color:color-mix(in srgb, var(--accent) 28%, transparent);
}
.pl-nz-plus{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;margin-bottom:2px;
  background:var(--accent);color:var(--on-accent);}
.pl-nz-plus svg{width:15px;height:15px;}
.pl-f-notizen .nz-liste{margin-bottom:8px;}
.pl-f-notizen .search-wrap{margin-bottom:10px;}

/* ---------- Offen und erledigt bei Aufgaben und Zielen ----------
   Offen: eine Uhr vorn, darunter rechts der Knopf "Erledigt". Die Uhr ist
   kein Knopf - sie sagt nur, dass noch etwas zu tun ist. */
.af-zeile.mit-tun{flex-wrap:wrap;row-gap:6px;}
.af-uhr{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--wait-soft);color:var(--wait);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wait) 30%, transparent);
}
.af-uhr svg{width:16px;height:16px;}
.af-uhr.faellig{background:var(--warn-soft);color:var(--alert);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--alert) 32%, transparent);}
.af-tun{
  flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-left:39px;min-width:0;
}
.btn.subtle.af-fertig{
  flex:none;gap:5px;padding:6px 12px;min-height:32px;
  background:var(--ok-soft);color:var(--ok);font-weight:700;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent);
}
.af-fertig svg{width:14px;height:14px;}
.btn.subtle.af-fertig:active{transform:scale(.95);}
@media (hover:hover) and (pointer:fine){
  .btn.subtle.af-fertig:hover:not([disabled]){background:var(--ok-soft);background:color-mix(in srgb, var(--ok) 24%, var(--surface));}
}

/* ---------- Das Kaestchen zum Abhaken ----------
   Ein eckiges Feld: leer heisst offen, gefuellt mit Haken heisst erledigt -
   so hat Evi es fuer die Schritte gewollt. Wer irgendwo etwas zum Abhaken
   braucht, nimmt dieses Kaestchen. Getippt wird die ganze Zeile, nicht nur
   das kleine Feld - so trifft der Daumen sicher. */
.kaestchen{
  flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  border:2px solid var(--line);
  border-color:color-mix(in srgb, var(--ink) 38%, transparent);
  background:var(--surface);color:transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-schnell) var(--ease-feder);
}
.kaestchen svg{width:14px;height:14px;stroke-width:3;}
.kaestchen.an{background:var(--ok);border-color:var(--ok);color:var(--surface);}
.af-schritt-tipp{
  flex:1;min-width:0;display:flex;align-items:center;gap:11px;
  padding:7px 6px;margin:-2px 0;border:none;border-radius:10px;background:none;cursor:pointer;
  font-family:var(--font-body);color:var(--ink);text-align:left;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.af-schritt-tipp:active .kaestchen{transform:scale(.88);transition-duration:.06s;}
.af-schritt-tipp:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
@media (hover:hover) and (pointer:fine){
  .af-schritt-tipp:hover .kaestchen:not(.an){border-color:var(--ok);}
}

/* Neben der Zahl der Schritte zeigt ein Pfeil, dass sich darunter eine
   Liste oeffnet - so hat Evi es gewollt, die Zahl allein sah nicht nach
   einem Knopf aus. Offen dreht er sich nach oben. */
.af-zahl.knopf{display:inline-flex;align-items:center;gap:5px;padding-right:7px;}
.af-pfeil{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);
  transition:transform var(--dur-ruhig) var(--ease);}
.af-zahl .af-pfeil svg{width:13px;height:13px;stroke-width:2.4;}
.af-zahl.knopf.on .af-pfeil{transform:rotate(180deg);}
/* Unter 360 px faellt das Wort "Schritte" weg - Zahl und Pfeil bleiben. */
.af-zahl .af-n{display:inline;}
.af-zahl .af-pfeil{display:grid;}

/* Links unter der Aufgabe: Zahl mit Pfeil und daneben "+ Schritt
   hinzufuegen". Wird es eng, rutscht "Erledigt" in die naechste Zeile und
   bleibt rechts. */
/* Alles in einer Zeile - so hat Evi es gewollt, "Erledigt" rutschte sonst
   nach unten. Die Zeile misst sich selbst (auch bei grosser Schrift) und
   beginnt buendig mit der Karte; wird es eng, heisst der Knopf "+ Schritt". */
.af-tun{container:aftun/inline-size;flex-wrap:nowrap;padding-left:0;gap:6px;}
.af-tun-links{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap;}
.af-tun .af-fertig{margin-left:auto;}
.af-tun .btn.subtle.af-fertig{padding:6px 11px 6px 9px;}
.af-schritt-dazu{
  flex:none;display:inline-flex;align-items:center;gap:4px;
  padding:5px 11px 5px 8px;min-height:30px;border-radius:999px;cursor:pointer;
  font-family:var(--font-body);font-size:11.5px;font-weight:700;color:var(--accent-deep);
  background:transparent;border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--accent) 38%, transparent);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background var(--dur) var(--ease), transform var(--dur-schnell) var(--ease-feder);
}
.af-schritt-dazu svg{width:12px;height:12px;flex:none;}
.af-schritt-dazu:active{transform:scale(.95);transition-duration:.06s;}
.af-schritt-dazu.on{background:var(--accent-soft);}
@media (hover:hover) and (pointer:fine){
  .af-schritt-dazu:hover{background:var(--accent-soft);}
}
/* Vor der Zahl steht, wofuer sie steht - so hat Evi es gewollt, "0/1" allein
   verstand beim ersten Mal niemand. Wird es eng, faellt erst "anzeigen"
   weg, ganz zuletzt das Wort "Unteraufgaben". Bei erledigten Aufgaben steht
   nur die Zahl.
   Mit dem Wort passt der Knopf nicht mehr neben "+ Schritt" und "Erledigt"
   (allein rund 220 px) - darum eine eigene Zeile, direkt ueber der Liste,
   die er oeffnet. */
.af-unter{flex:1 1 100%;display:flex;min-width:0;}
.af-zahl .af-wort, .af-zahl .af-wort-zu{display:inline;white-space:nowrap;}
.af-zahl .af-wort{margin-right:1px;}
.af-unter.knapp .af-wort-zu{display:none;}
.af-unter.mini .af-wort{display:none;}
.af-zeile.fertig > .af-zahl .af-wort{display:none;}
.af-tun.kurz .af-schritt-dazu .lang{display:none;}
.af-tun.winzig .af-schritt-dazu > span{display:none;}
.af-tun.winzig .af-schritt-dazu{padding:5px 8px;}
.af-tun.winzig .af-schritt-dazu svg{width:14px;height:14px;}
@container aftun (max-width:260px){
  .af-tun, .af-tun-links{gap:4px;}
  .af-tun .af-zahl.knopf{padding-left:7px;padding-right:4px;gap:3px;}
  .af-schritt-dazu{padding:5px 8px 5px 6px;gap:3px;}
  .af-tun .btn.subtle.af-fertig{padding:5px 8px 5px 7px;gap:4px;}
}

/* ---------- Tagesverlauf und Ausblick im Wochenplan ----------
   Der Tag bekommt eine schmale Zeitleiste: Termine im Akzent, freie
   Zeitfenster in Gruen, das Vergangene heute leise abgedeckt, "jetzt" als
   feine Linie mit Punkt. Darunter die freien Zeiten als Chips. */
.tv{margin:4px 2px 12px;}
.tv-bahn{position:relative;height:10px;border-radius:999px;overflow:visible;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ink) 8%, transparent);}
.tv-vorbei{position:absolute;left:0;top:0;bottom:0;border-radius:999px 0 0 999px;
  background:var(--line);
  background:color-mix(in srgb, var(--ink) 9%, transparent);}
.tv-block{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--accent);
  box-shadow:0 0 0 1.5px var(--surface);}
.tv-block.fenster{background:var(--ok);opacity:.7;}
.tv-jetzt{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;border-radius:2px;background:var(--ink);}
.tv-jetzt::before{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 2px var(--surface);}
.tv-stunden{position:relative;height:15px;margin-top:5px;}
.tv-stunden span{position:absolute;top:0;transform:translateX(-50%);font-size:10px;font-weight:600;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.tv-stunden span:first-child{transform:none;} .tv-stunden span:last-child{transform:translateX(-100%);}
.tv-frei{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;}
.tv-frei-wort{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-right:2px;}
.tv-frei-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px 5px 8px;border-radius:999px;cursor:pointer;
  font-family:var(--font-body);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ok);
  background:var(--ok-soft);
  background:color-mix(in srgb, var(--ok) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--ok) 32%, transparent);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder), background var(--dur) var(--ease);}
.tv-frei-chip svg{width:11px;height:11px;flex:none;}
.tv-frei-chip:active{transform:scale(.95);transition-duration:.06s;}
.tv-frei-mehr{font-size:11.5px;font-weight:700;color:var(--ink-soft);}
@media (hover:hover) and (pointer:fine){ .tv-frei-chip:hover{background:var(--ok-soft);} }


/* ---------- Der Planer (drittes Gewand) ----------
   So hat Evi es gewollt: ruhiger, klarer, schoener. Oben eine Karte "Dein
   Tag" mit Ring, darunter der Umschalter. Kein grosses Feld mehr um alles
   herum - jede Aufgabe ist eine eigene Karte, das Handeln ("+ Unteraufgabe",
   "Erledigt") liegt in ihrer Fussleiste, immer an derselben Stelle. Die
   Gruppen tragen ihr Wort als Glaspille. Steht ganz unten, damit es ueber
   den frueheren Regeln gilt; Wochenplan und Ausblick bleiben, wie sie sind. */
.pl-held{
  --farbe:var(--accent);
  margin:0 0 14px;padding:16px 14px 14px;border-radius:26px;
  background:var(--surface);
  background:radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--farbe) 16%, transparent), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, color-mix(in srgb, var(--rose, var(--accent)) 9%, transparent), transparent 65%), var(--surface);
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--farbe) 24%, var(--line));
  box-shadow:inset 0 1px 0 var(--glanz), 0 14px 30px -22px rgba(0,0,0,.45);
}
.ph-oben{display:flex;align-items:center;gap:15px;min-width:0;}
.pl-ring.ph-ring{--gr:86px;}
.pl-ring.ph-ring::before{inset:8px;background:var(--surface);}
.pl-ring.ph-ring b{font-size:26px;letter-spacing:-.02em;}
.pl-ring.ph-ring small{font-size:11px;}
.ph-ruhe{display:grid;place-items:center;color:var(--accent-deep);}
.ph-ruhe svg{width:26px;height:26px;}
.ph-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.ph-gruss{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  overflow-wrap:anywhere;}
.ph-satz{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.2;letter-spacing:-.015em;color:var(--ink);}
.ph-warn{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:3px 9px 3px 6px;border-radius:999px;
  border:0;cursor:pointer;font-family:var(--font-body);font-size:11.5px;font-weight:700;color:var(--alert);
  background:var(--warn-soft);-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ph-warn svg{width:12px;height:12px;}
.ph-unter{font-size:12.5px;line-height:1.4;color:var(--ink-soft);}
.pl-held.fertig .ph-satz{color:var(--ok);}
.ph-pillen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px;}
.ph-pille{
  --farbe:var(--accent);
  display:flex;align-items:center;gap:9px;min-width:0;padding:8px 10px 8px 8px;border-radius:16px;cursor:pointer;
  text-align:left;font-family:var(--font-body);color:var(--ink);
  background:var(--surface-2);
  background:color-mix(in srgb, var(--farbe) 9%, color-mix(in srgb, var(--ground) 35%, var(--surface)));
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--farbe) 20%, transparent);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder), background var(--dur) var(--ease);
}
.ph-pille:active{transform:scale(.96);transition-duration:.06s;}
.ph-p-termin{--dreh:200;} .ph-p-ziel{--dreh:40;}
@supports (color: oklch(from red l c h)){
  .ph-pille{--farbe:oklch(from var(--accent) l calc(c + .07) calc(h + var(--dreh, 0)));}
}
.ph-p-z{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--farbe) 18%, transparent);color:var(--farbe);}
.ph-p-z svg{width:15px;height:15px;}
.ph-p-txt{min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.ph-p-txt b{font-size:12.5px;font-weight:700;overflow-wrap:anywhere;}
.ph-p-txt small{font-size:11px;font-weight:600;color:var(--ink-soft);overflow-wrap:anywhere;}
@media (hover:hover) and (pointer:fine){
  .ph-pille:hover{background:color-mix(in srgb, var(--farbe) 15%, var(--surface));}
}
@media (max-width:360px){
  .pl-held{padding:14px 12px 12px;}
  .ph-oben{gap:12px;}
  .pl-ring.ph-ring{--gr:74px;}
  .pl-ring.ph-ring b{font-size:22px;}
  .ph-satz{font-size:17px;}
  .ph-p-z{display:none;}
  .ph-pille{padding:8px 10px;}
}


/* ---------- Die To-Do-Liste ----------
   Ruhig wie ein Zettel, so hat Evi es gewollt: je Liste eine Karte, die
   Punkte darin nur durch feine Linien getrennt, kein Schatten auf den
   Zeilen. Abgehakt wird mit dem Kaestchen der Unteraufgaben; die Zeile
   streicht sich durch und gleitet dann weg. */
.td-gruppe{
  margin:12px 0 0;padding:4px 6px 4px;border-radius:22px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), 0 10px 24px -20px rgba(0,0,0,.4);
}
.td-kopf{display:flex;align-items:center;gap:8px;padding:9px 8px 8px 8px;
  font-size:13.5px;font-weight:700;color:var(--ink);}
.td-kopf-z{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--surface-2);background:color-mix(in srgb, var(--ink) 7%, transparent);color:var(--ink-soft);}
.td-kopf-z svg{width:14px;height:14px;}
.td-g-einkauf .td-kopf-z{background:var(--ok-soft);color:var(--ok);}
.td-kopf-t{min-width:0;}
.td-zahl{min-width:20px;padding:1px 7px;border-radius:999px;text-align:center;font-size:11px;font-variant-numeric:tabular-nums;
  background:var(--surface-2);background:color-mix(in srgb, var(--ink) 8%, transparent);}
.td-teilen{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 9px;border-radius:999px;cursor:pointer;
  font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--ink-soft);
  background:none;border:1px solid var(--line);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.td-teilen svg{width:13px;height:13px;flex:none;}
.td-teilen:active{transform:scale(.95);}
.td-liste{display:flex;flex-direction:column;}
.td-zeile{display:flex;align-items:center;gap:2px;padding:3px 2px 3px 4px;border-top:1px solid var(--line);
  border-top-color:color-mix(in srgb, var(--line) 70%, transparent);
  transition:opacity var(--dur-ruhig) var(--ease), transform var(--dur-ruhig) var(--ease);}
.td-g-fertig .td-zeile:first-child{border-top:0;}
.td-tipp{padding:9px 6px;}
.td-text{min-width:0;font-size:14.5px;line-height:1.35;overflow-wrap:anywhere;
  text-decoration:line-through transparent;transition:color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);}
.td-zeile.fertig .td-text{color:var(--ink-soft);text-decoration-color:currentColor;}
.td-zeile.geht{opacity:0;transform:translateX(10px);transition-delay:.18s;}
.td-zeile.wichtig .td-text{font-weight:650;}
/* Ein To-do mit Unterpunkten ist eine Ueberschrift: kraeftiger, daneben der
   Zaehler. Darunter stehen die Unterpunkte eingerueckt unter dem Kaestchen,
   ganz unten leise "+ Unterpunkt". Die Zeile bricht dafuer um. */
.td-zeile{flex-wrap:wrap;}
.td-zeile.mit-punkten .td-text{font-weight:650;}
.td-n{flex:none;margin-left:2px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink-soft);
  background:var(--surface-2);background:color-mix(in srgb, var(--ink) 8%, transparent);}
.td-n.voll{color:var(--ok);background:var(--ok-soft);}
.td-unter{flex:1 0 100%;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:0 6px 9px 17px;}
.td-unter .af-schritte{align-self:stretch;margin:0;}
.td-unter .af-neu.klein input{flex:1;min-width:0;}
.td-punkt-dazu{margin-left:21px;min-height:26px;padding:3px 10px 3px 7px;opacity:.85;}
.td-unter .af-schritte + .td-punkt-dazu{margin-left:21px;}
.td-stern{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:none;border-radius:50%;
  background:none;color:var(--ink-soft);opacity:.35;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.td-stern svg{width:15px;height:15px;}
.td-stern.an{opacity:1;color:var(--wait);}
.td-stern.an svg{fill:currentColor;}
.td-zeile .weg-kreuz{opacity:.6;}
.pl-x-einkauf input{pointer-events:none;}
.pl-x-einkauf:has(input:checked){color:var(--ok);border-color:var(--ok);
  background:var(--ok-soft);background:color-mix(in srgb, var(--ok) 12%, var(--surface));}
.td-g-fertig{margin-top:0;box-shadow:none;background:color-mix(in srgb, var(--surface) 80%, transparent);}
@media (hover:hover) and (pointer:fine){
  .td-stern:hover{opacity:.8;}
  .td-zeile .weg-kreuz:hover{opacity:1;}
}
@media (prefers-reduced-motion:reduce){ .td-zeile.geht{opacity:.4;transform:none;} }

/* Kein grosses Feld mehr - die Karten liegen direkt auf der Seite. */
.pl-feld{padding:0;background:none;border:0;box-shadow:none;border-radius:0;}

/* Eine neue Aufgabe: eine eigene, leicht getoente Karte. */
.pl-feld .pl-neu{
  margin:0 0 6px;padding:12px 12px 12px;border-radius:22px;
  background:var(--surface);
  background:linear-gradient(170deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 75%);
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow:inset 0 1px 0 var(--glanz), 0 10px 24px -20px rgba(0,0,0,.4);
}
.pl-wann{gap:7px;margin:0 2px 10px;}
.pl-wann-z{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);flex:none;}
.pl-wann-z svg{width:12px;height:12px;stroke-width:2.6;}
.pl-wann-wort{font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:700;}
.pl-wann-frage{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
/* Statt "Wann?" steht dort der gewaehlte Tag als Pille - oder der Hinweis,
   ihn oben im Wochenband zu waehlen. */
.pl-wann .pl-wann-frage{letter-spacing:0;text-transform:none;font-size:12px;padding:3px 10px;border-radius:999px;
  background:var(--surface-2);background:color-mix(in srgb, var(--ink) 7%, transparent);}
.pl-wann .pl-wann-frage.an{background:var(--ink);color:var(--ground);}
/* "Neue Aufgabe hinzufuegen" soll ganz dastehen: wird die Zeile eng
   (320 px, grosse Schrift), bekommt das Feld die ganze Breite und der
   Plus-Knopf rutscht darunter, rechts. */
[data-aufg-form], [data-td-form]{container:aufgneu / inline-size;}
@container aufgneu (max-width:290px){
  .pl-neu-zeile{flex-wrap:wrap;justify-content:flex-end;}
  .pl-neu-zeile input{flex-basis:100%;font-size:13.5px;padding-left:12px;padding-right:12px;}
}

/* Die Gruppen: das Wort als Glaspille, lesbar auch ueber den Bergen. */
.pl-gruppe{margin:14px 0 0;}
.pl-g-kopf{
  display:inline-flex;width:auto;max-width:100%;gap:7px;margin:0 0 8px;padding:5px 6px 5px 10px;border-radius:999px;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz);
}
.pl-g-zahl{margin-left:6px;min-width:20px;text-align:center;padding:1px 7px;background:var(--surface-2);
  background:color-mix(in srgb, var(--ink) 8%, transparent);color:var(--ink);}
.pl-g-ueber .pl-g-kopf{border-color:color-mix(in srgb, var(--alert) 40%, var(--line));}
.pl-g-ueber .pl-g-zahl{background:var(--warn-soft);color:var(--alert);}
.pl-g-heute .pl-g-kopf{color:var(--ink);}
.pl-feld .af-liste{gap:8px;margin:0;}

/* Die Karte einer Aufgabe: oben der Text, darunter die Unteraufgaben, unten
   die Fussleiste zum Handeln. */
.af-karte{
  gap:0;overflow:hidden;border-radius:18px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), 0 8px 20px -16px rgba(0,0,0,.4);
}
.pl-feld .af-karte .af-zeile, .pl-g-ueber .af-karte .af-zeile{
  border:0;border-radius:0;background:none;padding:10px 8px 9px 12px;gap:11px;
}
.af-karte .af-was{font-size:14.5px;line-height:1.3;}
.af-karte .af-wann{display:inline-flex;align-self:flex-start;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:11px;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ink) 6%, transparent);}
.af-karte .af-wann.faellig{background:var(--warn-soft);}
.af-karte .af-uhr{width:32px;height:32px;}
.af-karte .st-btn.del{opacity:.55;}
.af-karte.ueber{
  border-color:color-mix(in srgb, var(--alert) 38%, var(--line));
  background:linear-gradient(170deg, color-mix(in srgb, var(--alert) 8%, var(--surface)), var(--surface) 70%);
}
.af-karte .af-unter{padding:0 12px 9px 55px;margin-top:-2px;}
.af-karte .af-tun .btn.subtle.af-fertig{min-height:30px;}
.af-karte .af-schritt-dazu{min-height:30px;}
.af-karte .af-schritte{margin:0 12px 10px 27px;}
.af-karte .af-tun{
  padding:5px 7px 5px 8px;margin:0;
  border-top:1px solid var(--line);
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ink) 3.5%, transparent);
}
.af-karte.ueber .af-tun{border-top-color:color-mix(in srgb, var(--alert) 22%, var(--line));}
.af-karte .af-schritt-dazu{
  border-color:transparent;
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 11%, transparent);
}
.af-karte .af-schritt-dazu.on{background:color-mix(in srgb, var(--accent) 22%, transparent);}
.af-karte.fertig{box-shadow:none;background:color-mix(in srgb, var(--surface) 80%, transparent);}
.af-karte.fertig .af-zeile{padding-top:9px;padding-bottom:9px;}
.af-karte.fertig .af-zeile.fertig{opacity:.75;}
@media (hover:hover) and (pointer:fine){
  .af-karte .st-btn.del:hover{opacity:1;}
}

/* Die erledigten: eine ruhige Leiste zum Aufklappen. */
.pl-feld .af-erledigt-kopf{
  margin:18px 0 8px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--ink);
}
.pl-feld .af-erledigt + .af-leer{margin:8px 4px 6px;}
.pl-feld .af-weg{margin:0 0 10px;}
.pl-leer{margin-top:12px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--glanz);}

/* Ziele: Woche und Ring zusammen auf einer Karte. */
.pl-ziel-karte{
  margin:0 0 12px;padding:12px;border-radius:22px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), 0 10px 24px -20px rgba(0,0,0,.4);
}
.pl-ziel-karte .pl-ziel-kopf{margin:0;}
.pl-f-ziele .pl-neu{margin-top:12px;}
.pl-f-ziele > .af-leer{margin:12px 4px;}

/* Notizen: jede in ihrer eigenen Farbe, wie Zettel an einer Wand. */
.nz-ton{
  --farbe:var(--accent);
  background:var(--surface);
  background:linear-gradient(165deg, color-mix(in srgb, var(--farbe) 14%, var(--surface)), var(--surface) 70%);
  border-color:color-mix(in srgb, var(--farbe) 26%, var(--line));
  box-shadow:inset 0 1px 0 var(--glanz), 0 8px 18px -16px rgba(0,0,0,.4);
}
@supports (color: oklch(from red l c h)){
  .nz-ton{--farbe:oklch(from var(--accent) l calc(c + .08) calc(h + var(--dreh, 0)));}
}
.nz-ton .nz-titel::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 6px 1px 0;background:var(--farbe);vertical-align:middle;}
.pl-f-notizen .nz-karte{padding:12px 13px;border-radius:18px;width:100%;}
.pl-f-notizen .pl-nz-neu{min-height:108px;}
.pl-f-notizen .pl-nz-neu{border-style:solid;}

/* ---------- Planer: Wischen, Wichtig, Uhrzeit, Wiederholen ----------
   So hat Evi es gewollt. Die Karte liegt auf einem Grund, der beim Wischen
   sichtbar wird: links gruen "Erledigt", rechts rot "Loeschen". Ab der
   Schwelle wird der Grund satt - man spuert, dass es jetzt gilt. */
.af-wisch{position:relative;touch-action:pan-y;border-radius:18px;}
.af-wisch .af-karte{position:relative;z-index:1;transition:transform .34s var(--ease-feder);will-change:transform;}
.af-wisch.zieht .af-karte{transition:none;}
/* Hinaus: die Karte gleitet mit dem Schwung des Fingers ganz aus dem Bild,
   danach schliesst sich die Luecke weich (Hoehe und Abstand auf null). */
.af-wisch.fort .af-karte{transition:transform .3s cubic-bezier(.25,.8,.35,1), opacity .3s ease-in;opacity:.5;}
.af-wisch.zu{transition:height .26s cubic-bezier(.4,0,.2,1), margin-bottom .26s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  overflow:hidden;opacity:0;}
/* Zurueck (nach "Rueckgaengig"): die Karte waechst an ihrem Platz auf. */
@keyframes afRein{from{opacity:0;transform:scale(.96);max-height:0;}to{opacity:1;transform:none;max-height:600px;}}
.af-wisch.rein{animation:afRein .38s cubic-bezier(.22,.9,.3,1) both;}
.af-wisch-grund{
  position:absolute;inset:1px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;opacity:0;font-size:13px;font-weight:700;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.af-wisch.zieht .af-wisch-grund, .af-wisch.fort .af-wisch-grund{opacity:1;}
.af-wisch-grund span{display:inline-flex;align-items:center;gap:7px;opacity:0;transform:scale(.85);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease-feder);}
.af-wisch-grund svg{width:18px;height:18px;}
.af-wisch.nach-rechts .af-wisch-grund{background:var(--ok-soft);color:var(--ok);}
.af-wisch.nach-links .af-wisch-grund{background:var(--warn-soft);color:var(--warn);}
/* Jede Richtung zeigt nur ihr eigenes Wort - sonst stand beim Loeschen,
   sobald die Karte ganz hinaus war, links auch "Erledigt". */
.af-wisch.nach-rechts .aw-links, .af-wisch.nach-links .aw-rechts{opacity:.75;}
.af-wisch.nach-rechts.reif .aw-links, .af-wisch.nach-links.reif .aw-rechts{transform:scale(1.08);opacity:1;}
.af-wisch.nach-rechts .aw-rechts, .af-wisch.nach-links .aw-links{opacity:0 !important;}
.af-wisch.nach-rechts.reif .af-wisch-grund{background:var(--ok);color:var(--surface);}
.af-wisch.nach-links.reif .af-wisch-grund{background:var(--warn);color:var(--surface);}
.pl-wisch-tipp{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 2px;
  font-size:11.5px;font-weight:600;color:var(--ink-soft);text-align:center;}
.pl-wisch-tipp{gap:12px;}
.pl-wisch-tipp b{font-weight:600;}
.pl-wisch-tipp span{display:inline-flex;align-items:center;gap:4px;font-weight:700;}
.pl-wisch-tipp svg{width:13px;height:13px;}
.pwt-weg{color:var(--warn);} .pwt-ok{color:var(--ok);}

/* Der Text ist der Knopf zum Bearbeiten, darunter die Pillen. */
.af-mitte{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.af-tippen{border:0;background:none;padding:0;margin:0;text-align:left;cursor:pointer;font-family:var(--font-body);color:inherit;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.af-tippen:active .af-was{opacity:.6;}
.af-tippen:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
.af-meta{display:flex;flex-wrap:wrap;gap:5px;}
.af-karte .af-wann{margin-top:0;}
.af-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:650;
  font-variant-numeric:tabular-nums;color:var(--ink-soft);
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ink) 6%, transparent);}
.af-pill svg{width:11px;height:11px;flex:none;}
.af-p-zeit{color:var(--ink);}
.af-p-wdh{color:var(--accent-deep);background:var(--accent-soft);background:color-mix(in srgb, var(--accent) 12%, transparent);}
.af-schieb{border:0;cursor:pointer;font-family:var(--font-body);color:var(--on-accent);background:var(--accent);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--dur-schnell) var(--ease-feder);}
.af-schieb:active{transform:scale(.93);transition-duration:.06s;}
.af-stern{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:none;color:var(--ink-soft);opacity:.55;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder), color var(--dur) var(--ease), opacity var(--dur) var(--ease);}
.af-stern svg{width:17px;height:17px;}
.af-stern:active{transform:scale(.8);transition-duration:.06s;}
.af-stern.an{color:var(--wait);opacity:1;}
.af-stern.an svg{fill:currentColor;}
@media (hover:hover) and (pointer:fine){ .af-stern:hover{opacity:1;} }
.af-wichtig-z{display:inline-flex;vertical-align:-2px;margin-right:5px;color:var(--wait);}
.af-wichtig-z svg{width:14px;height:14px;fill:currentColor;}
.af-karte.wichtig{
  border-color:color-mix(in srgb, var(--wait) 45%, var(--line));
  box-shadow:inset 0 1px 0 var(--glanz), 0 0 0 3px color-mix(in srgb, var(--wait) 10%, transparent), 0 8px 20px -16px rgba(0,0,0,.4);
}
.af-karte.wichtig:not(.ueber){background:linear-gradient(170deg, color-mix(in srgb, var(--wait) 7%, var(--surface)), var(--surface) 60%);}
.af-karte .af-stern + .st-btn.del{margin-left:-4px;}

/* Ueberfaellig: "Alle auf heute" neben dem Wort. */
.pl-g-zeile{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;}
.pl-g-zeile .pl-g-kopf{margin:0;}
.pl-g-alle{display:inline-flex;align-items:center;gap:5px;padding:6px 11px 6px 9px;border-radius:999px;cursor:pointer;
  font-family:var(--font-body);font-size:11.5px;font-weight:700;color:var(--alert);
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb, var(--alert) 40%, var(--line));
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--dur-schnell) var(--ease-feder);}
.pl-g-alle svg{width:12px;height:12px;}
.pl-g-alle:active{transform:scale(.95);transition-duration:.06s;}

/* Beim Eintragen: drei kleine Chips. Das echte Feld liegt unsichtbar
   darueber, damit ein Tipp die Auswahl des Handys oeffnet. */
.pl-extras{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.pl-x{position:relative;display:inline-flex;align-items:center;gap:5px;padding:6px 11px 6px 8px;border-radius:999px;cursor:pointer;
  font-size:12px;font-weight:700;color:var(--ink-soft);
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ground) 45%, var(--surface));
  border:1px solid var(--line);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.pl-x-z{display:flex;} .pl-x-z svg{width:13px;height:13px;}
.pl-x input, .pl-x select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;
  font-size:16px;-webkit-appearance:none;appearance:none;background:none;color:transparent;}
.pl-x-wichtig input{pointer-events:none;}
.pl-x.an, .pl-x-wichtig:has(input:checked){color:var(--ink);border-color:var(--ink);
  background:var(--surface);}
.pl-x-wichtig:has(input:checked){color:var(--wait);border-color:var(--wait);
  background:color-mix(in srgb, var(--wait) 12%, var(--surface));}
.pl-x-wichtig:has(input:checked) svg{fill:currentColor;}
.pl-x:has(:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.pl-x-zeit .pl-x-w{font-variant-numeric:tabular-nums;}

/* Im Tagesverlauf: eine Aufgabe mit Uhrzeit als kleine Raute. */
.tv-aufg{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;transform:rotate(45deg);border-radius:2px;
  background:var(--wait);box-shadow:0 0 0 1.5px var(--surface);z-index:1;}

/* Rueckgaengig in der Meldung unten. */
.toast.mit-knopf{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;}
.toast.mit-knopf.show{pointer-events:auto;}
.toast-rueck{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--font-body);font-size:12.5px;font-weight:700;color:var(--ink);
  background:var(--ground);white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.toast-rueck:active{transform:scale(.95);}
.toast-rueck svg{width:13px;height:13px;}

/* Der Bogen "Aufgabe bearbeiten". */
.ag-kopf{display:flex;align-items:center;gap:13px;margin:0 44px 18px 0;min-width:0;}
.ag-kopf-z{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;
  background:var(--wait-soft);color:var(--wait);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wait) 30%, transparent);}
.ag-kopf-z.fertig{background:var(--ok-soft);color:var(--ok);}
.ag-kopf-z svg{width:22px;height:22px;}
.modal.ag .ag-kopf h3{margin:0;font-size:21px;line-height:1.15;}
.ag-was{--dreh:40;} .ag-wann{--dreh:130;} .ag-wdh{--dreh:250;}
.ag-wichtig{display:flex;align-items:center;gap:11px;margin:0 0 14px;padding:10px 12px;border-radius:14px;cursor:pointer;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ground) 55%, var(--surface));
  -webkit-tap-highlight-color:transparent;}
.ag-wichtig input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.ag-w-z{flex:none;display:flex;color:var(--ink-soft);} .ag-w-z svg{width:20px;height:20px;}
.ag-w-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;}
/* Lange Woerter (Gesundheitsangaben, „Fotoeinwilligung …“) liefen bei 320 px und grosser
   Schrift unter den Schalter: erst Silbentrennung, sonst Umbruch im Wort - nie ueberlaufen. */
.ag-w-txt b,.ag-w-txt small{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;}
.ag-w-txt b{font-size:14px;} .ag-w-txt small{font-size:12px;color:var(--ink-soft);}
.ag-schalter{flex:none;position:relative;width:42px;height:25px;border-radius:999px;background:var(--line);transition:background var(--dur) var(--ease);}
.ag-schalter::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--dur) var(--ease-feder);}
.ag-wichtig:has(input:checked) .ag-schalter{background:var(--wait);}
.ag-wichtig:has(input:checked) .ag-schalter::after{transform:translateX(17px);}
.ag-wichtig:has(input:checked) .ag-w-z{color:var(--wait);}
.ag-wichtig:has(input:checked) .ag-w-z svg{fill:currentColor;}
/* Derselbe Schalter in Gruen (Einverstaendnis fuer Fotos) - ohne gefuelltes Zeichen. */
.ag-wichtig.ok:has(input:checked) .ag-schalter{background:var(--ok);}
.ag-wichtig.ok:has(input:checked) .ag-w-z{color:var(--ok);}
.ag-wichtig.ok:has(input:checked) .ag-w-z svg{fill:none;}
.kf .ag-wichtig{margin:4px 0 0;}
/* In der Kundenakte ueber den Bildern: liegt das Einverstaendnis vor? */
.ka-fotook{display:flex;align-items:flex-start;gap:7px;margin:0 0 12px;font-size:12.5px;line-height:1.45;color:var(--wait);}
.ka-fotook.ok{color:var(--ok);}
/* Fehlt eine Einwilligung, steht der Vermerk in Rot (so hat Evi es gewollt). */
.ka-fotook.fehlt{color:var(--danger);}
.ka-fotook[hidden]{display:none;}
.field .ka-fotook.fehlt{margin:7px 0 0;}
.field textarea:disabled{opacity:.55;cursor:not-allowed;}
.ka-fotook svg{flex:none;width:15px;height:15px;margin-top:1px;}
.ag-wichtig:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.ag-schnell{margin-bottom:12px;}
.ag-felder{flex-wrap:nowrap;gap:10px;}
.ag-felder .field{min-width:0;flex:1 1 0;}
.ag-felder .field.schmal{flex:0 0 126px;}
.ag-hinweis{margin:-4px 2px 14px;font-size:12.5px;line-height:1.45;color:var(--ink-soft);}
.modal.ag > .ag-weg{width:100%;margin-top:4px;gap:6px;}
.ag-weg svg{width:14px;height:14px;}

/* Notizen anheften: Knopf im Dialog, Nadel an der Karte. */
.nz-pin{float:right;display:inline-flex;align-items:center;gap:5px;height:32px;margin-right:8px;padding:0 12px 0 9px;
  border:1px solid var(--line);border-radius:999px;cursor:pointer;background:var(--surface);
  font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--ink-soft);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.nz-pin svg{width:14px;height:14px;}
.nz-pin.an{color:var(--on-accent);background:var(--accent);border-color:var(--accent);}
.nz-pin.an svg{fill:currentColor;}
.nz-karte{position:relative;}
.nz-angeheftet{border-width:1.5px;border-color:color-mix(in srgb, var(--farbe) 50%, var(--line));}
.nz-pin-z{position:absolute;top:9px;right:9px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--farbe);color:var(--surface);transform:rotate(20deg);box-shadow:0 3px 8px -3px rgba(0,0,0,.4);}
.nz-pin-z svg{width:13px;height:13px;fill:currentColor;}
.nz-angeheftet .nz-titel{padding-right:22px;}

/* Ziele: Woche oder Monat, dazu zwei schmale Balken. */
.pl-zielart{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;margin:0 0 12px;border-radius:999px;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ground) 50%, var(--surface));}
.pl-zielart button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 8px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--font-body);font-size:12.5px;font-weight:700;color:var(--ink-soft);background:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--dur) var(--ease), color var(--dur) var(--ease);}
.pl-zielart button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14), inset 0 1px 0 var(--glanz);}
.pl-zielart .cnt{min-width:18px;padding:0 5px;border-radius:999px;font-size:10.5px;line-height:17px;text-align:center;
  background:var(--accent-soft);color:var(--accent-deep);}
.pl-za-monat .pl-ziel-kopf{--dreh:300;}
.pl-zk-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;}
.pl-zb{display:flex;flex-direction:column;gap:5px;}
.pl-zb-zeile{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:7px;font-size:10.5px;font-weight:700;color:var(--ink-soft);}
.pl-zb-zeile i{height:6px;border-radius:999px;overflow:hidden;background:var(--line);
  background:color-mix(in srgb, var(--ink) 10%, transparent);}
.pl-zb-zeile b{display:block;height:100%;border-radius:999px;background:color-mix(in srgb, var(--ink) 35%, transparent);}
.pl-zb-zeile.ziel b{background:var(--farbe);}
.pl-zb-zeile em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;}
@media (max-width:360px){
  .pl-ziel-kopf{gap:11px;}
  .pl-ziel-kopf .pl-ring{--gr:64px;}
  .pl-extras{gap:5px;}
  .pl-x{padding:6px 9px 6px 7px;font-size:11.5px;}
}


/* ======================================================================
   Organisation: Umschalter, leere Seiten, Listen, Notizwand, Suche, Rueckblick
   So hat Evi es gewollt: schoener, ansprechender, seriös. Werte aus der
   Politur (--dur, --ease, --ease-feder); Farben nur ueber var(--...).
   ====================================================================== */

/* ---- Umschalter: Zeichen ueber dem Wort, der offene liegt auf einer Pille,
   die beim Wechsel hinuebergleitet (--von/--nach setzt viewPlaner(), die
   Bewegung ist reine Animation - jedes Zeichnen baut die Leiste neu). ---- */
.pl-teile{
  --luecke:4px;
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--luecke);
  padding:4px;margin:0 0 12px;border-radius:22px;overflow:visible;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz);
}
.pl-pille{
  position:absolute;top:4px;bottom:4px;left:4px;pointer-events:none;
  width:calc((100% - 8px - 2 * var(--luecke)) / 3);border-radius:18px;
  background:var(--ink);box-shadow:0 8px 16px -10px rgba(0,0,0,.5);
  transform:translateX(calc(var(--nach) * (100% + var(--luecke))));
  animation:plPille .38s var(--ease-feder) both;
}
@keyframes plPille{ from{ transform:translateX(calc(var(--von) * (100% + var(--luecke)))); } }
.pl-teile .cf-chip{
  position:relative;z-index:1;flex-direction:column;justify-content:center;gap:4px;
  min-width:0;min-height:56px;padding:9px 4px 8px;border-radius:18px;
  font-size:11.5px;font-weight:700;white-space:nowrap;
  background:transparent;border-color:transparent;color:var(--ink-soft);
  transition:color var(--dur) var(--ease), transform var(--dur-schnell) var(--ease-feder);
}
.pl-teile .cf-chip.on{background:transparent;border-color:transparent;color:var(--ground);}
.pl-teile .cf-chip:active{transform:scale(.95);transition-duration:.06s;}
.pl-teile .pl-t-z{position:relative;display:flex;}
.pl-teile .pl-t-z svg{width:20px;height:20px;}
.pl-teile .pl-t-z .cnt{position:absolute;top:-7px;left:calc(100% - 3px);min-width:17px;height:17px;padding:0 4px;font-size:10px;}
@media (max-width:360px){
  .pl-teile{--luecke:2px;padding:3px;}
  .pl-pille{top:3px;bottom:3px;left:3px;width:calc((100% - 6px - 2 * var(--luecke)) / 3);}
  .pl-teile .cf-chip{font-size:11px;}
}
/* Der neue Teil kommt aus der Richtung herein, in die man gewischt oder getippt
   hat. */
@keyframes plFeldRein{ from{ opacity:0; transform:translateX(var(--vx)); } to{ opacity:1; transform:none; } }
.pl-feld.von-rechts{--vx:26px;animation:plFeldRein .3s var(--ease) both;}
.pl-feld.von-links{--vx:-26px;animation:plFeldRein .3s var(--ease) both;}
@media (prefers-reduced-motion:reduce){
  .pl-pille, .pl-feld.von-rechts, .pl-feld.von-links{animation:none;}
}

/* ---- Leere Seiten: ein kleines Bild, ein Satz, Beispiele zum Antippen ---- */
.pl-leer{padding:20px 14px 18px;gap:5px;}
.pl-leer-bild{display:block;width:128px;max-width:58%;margin:0 0 6px;color:var(--ink-soft);}
.lb{display:block;width:100%;height:auto;overflow:visible;}
.lb-f1{fill:currentColor;opacity:.09;}
.lb-f2{fill:currentColor;opacity:.16;}
.lb-karte{fill:var(--surface);stroke:currentColor;stroke-opacity:.28;stroke-width:1.6;}
.lb-s{fill:none;stroke:currentColor;stroke-opacity:.5;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.lb-s2{fill:none;stroke:currentColor;stroke-opacity:.5;stroke-width:6;stroke-linecap:round;}
.lb-o{fill:none;stroke:currentColor;stroke-opacity:.4;stroke-width:2;}
.lb-a{fill:var(--accent);}
.lb-ok{fill:var(--ok);}
.lb-h{fill:none;stroke:var(--on-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.pl-leer-ok .lb-h{stroke:var(--surface);}
.pl-leer-bsp{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;}
.pl-leer-bsp .cf-chip{max-width:100%;white-space:normal;text-align:center;}
.pl-leer-knopf{margin-top:12px;}
.pl-leer-knopf svg{width:15px;height:15px;}
.pl-leer + .pl-neu{margin-top:12px;}

/* ---- To-Do-Listen ---- */
.td-listen{margin:0 0 10px;}
.td-listen .cf-chip .pl-t-z svg{width:13px;height:13px;}
.td-liste-neu{background:transparent;color:var(--ink-soft);}
.td-liste-neu svg{width:13px;height:13px;}
.td-g-tun{--farbe:var(--accent);}
.td-g-liste{--farbe:var(--accent);}
@supports (color: oklch(from red l c h)){
  .td-g-liste{--farbe:oklch(from var(--accent) l calc(c + .08) calc(h + var(--dreh, 0)));}
}
.td-g-liste{border-color:color-mix(in srgb, var(--farbe) 24%, var(--line));}
.td-g-liste .td-kopf-z{background:color-mix(in srgb, var(--farbe) 16%, transparent);color:var(--farbe);}
.td-liste-edit{padding:5px 9px;}
.td-liste-edit svg{width:14px;height:14px;}
.td-fort{display:flex;align-items:center;gap:9px;padding:0 8px 7px;font-size:10.5px;font-weight:700;color:var(--ink-soft);}
.tf-bahn{flex:1;height:5px;border-radius:999px;overflow:hidden;background:var(--line);
  background:color-mix(in srgb, var(--ink) 10%, transparent);}
.tf-bahn > span{display:block;height:100%;border-radius:inherit;background:var(--farbe, var(--accent));}
.tf-text{font-variant-numeric:tabular-nums;white-space:nowrap;}
.td-balken{flex:1 0 calc(100% - 46px);max-width:calc(100% - 46px);height:4px;margin:0 8px 9px 38px;border-radius:999px;overflow:hidden;
  background:var(--line);background:color-mix(in srgb, var(--ink) 9%, transparent);}
.td-balken b{display:block;height:100%;border-radius:inherit;background:var(--accent);}
.td-balken.voll b{background:var(--ok);}
.td-noch-leer{margin:0;padding:12px 10px 14px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
/* Auf der Einkaufsliste gibt es keine eigene Liste - sie ist selbst eine. */
.td-neu:has(.pl-x-einkauf input:checked) .pl-x-liste{display:none;}

/* ---- Notizen als Wand ---- */
.nz-karte{order:var(--o, 0);}
.nz-titel{display:flex;align-items:flex-start;gap:6px;white-space:normal;overflow:visible;line-height:1.3;}
.nz-ton .nz-titel::before{content:"";display:block;flex:none;width:7px;height:7px;margin:.5em 0 0;border-radius:50%;background:var(--farbe);vertical-align:baseline;}
.nz-titel-t{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;}
.pl-nz-neu .nz-titel::before{display:none;}
.nz-rest{-webkit-line-clamp:var(--z, 3);}
.nz-punkte{display:flex;flex-direction:column;gap:5px;width:100%;margin:2px 0 1px;}
.nz-pkt{display:flex;align-items:flex-start;gap:7px;min-width:0;font-size:12px;line-height:1.35;color:var(--ink);}
.nz-pkt i{flex:none;display:grid;place-items:center;width:14px;height:14px;margin-top:1px;border-radius:50%;font-style:normal;
  border:1.5px solid var(--line);border-color:color-mix(in srgb, var(--farbe) 55%, var(--line));color:transparent;}
.nz-pkt i svg{width:9px;height:9px;}
.nz-pkt.on i{background:var(--ok);border-color:var(--ok);color:var(--surface);}
.nz-pkt > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nz-pkt.on > span{color:var(--ink-soft);text-decoration:line-through;}
.nz-mehr{padding-left:21px;font-size:11px;font-weight:650;color:var(--ink-soft);}
.nz-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:auto;padding-top:4px;}
.nz-fuss .nz-wann{margin:0 0 0 auto;}

/* ---- Suche ueber alles ---- */
.ck-such{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;cursor:pointer;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--glanz);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder), background var(--dur) var(--ease), color var(--dur) var(--ease);}
.ck-such svg{width:19px;height:19px;}
.ck-such:active{transform:scale(.92);transition-duration:.06s;}
.ck-such.on{color:var(--ground);background:var(--ink);border-color:var(--ink);}
.org-suche{margin:0 0 12px;}
.org-anzahl{margin:0 4px 10px;font-size:12px;font-weight:650;color:var(--ink-soft);}
.org-gruppe{margin:0 0 14px;}
.org-liste{display:flex;flex-direction:column;gap:6px;}
.org-zeile{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:16px;cursor:pointer;text-align:left;
  font-family:var(--font-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz);-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder);}
.org-zeile:active{transform:scale(.985);transition-duration:.06s;}
.org-z{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--accent-soft);color:var(--accent-deep);}
.org-z svg{width:17px;height:17px;}
.org-mitte{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.org-text{font-size:13.5px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;}
.org-text mark{color:inherit;border-radius:4px;padding:0 2px;background:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 24%, transparent);}
.org-meta{font-size:11.5px;line-height:1.35;color:var(--ink-soft);overflow-wrap:anywhere;}
.org-zeile.fertig .org-text{color:var(--ink-soft);text-decoration:line-through;text-decoration-thickness:1.3px;}
.org-pfeil{flex:none;display:flex;color:var(--ink-soft);}
.org-pfeil svg{width:15px;height:15px;}
@media (hover:hover) and (pointer:fine){ .org-zeile:hover{border-color:var(--accent);} .ck-such:hover{border-color:var(--accent);} }
/* Ein Treffer leuchtet einmal auf, nachdem man zu ihm gesprungen ist. */
@keyframes orgBlitz{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%{ box-shadow:0 0 0 10px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.org-blitz{animation:orgBlitz 1.1s ease-out 1;}
.td-zeile.org-blitz{border-radius:12px;}
.af-wisch.org-blitz{border-radius:18px;}

/* ---- Wochenrueckblick ---- */
.pl-rueck{
  margin:0 0 12px;padding:14px;border-radius:22px;
  background:var(--surface);
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 11%, var(--surface)), var(--surface) 70%);
  border:1px solid var(--line);border-color:color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow:inset 0 1px 0 var(--glanz), 0 10px 24px -20px rgba(0,0,0,.4);
}
.pr-kopf{display:flex;align-items:center;gap:12px;margin:0 0 12px;}
.pr-bild{flex:none;width:62px;color:var(--ink-soft);}
.pr-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.pr-wort{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-deep);}
.pr-titel{font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.15;}
.pr-spanne{font-size:12px;color:var(--ink-soft);}
.pr-kopf .weg-kreuz{flex:none;align-self:flex-start;}
.pr-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px;}
.pr-z{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 4px 9px;border-radius:16px;
  background:var(--surface-2);background:color-mix(in srgb, var(--ground) 40%, var(--surface));border:1px solid var(--line);}
.pr-z b{font-size:22px;line-height:1;font-variant-numeric:tabular-nums;}
.pr-z small{font-size:11px;font-weight:650;color:var(--ink-soft);}
.pr-z.voll{background:var(--ok-soft);border-color:color-mix(in srgb, var(--ok) 45%, var(--line));}
.pr-z.voll b{color:var(--ok);}
.pr-satz{margin:0 0 12px;font-size:13.5px;line-height:1.5;font-weight:600;}
.pr-knoepfe{display:flex;flex-wrap:wrap;gap:8px;}
.pr-knoepfe .btn{flex:1 1 auto;justify-content:center;gap:7px;}
.pr-knoepfe .btn svg{width:15px;height:15px;flex:none;}
@media (max-width:360px){ .pr-bild{width:52px;} .pr-titel{font-size:16.5px;} }

/* Der Bogen "Liste": Loeschen darunter, mit einem Satz, was dann passiert. */
.modal.tf > .ag-weg{width:100%;margin-top:4px;gap:6px;}
.modal.tf > .ag-hinweis{margin:8px 4px 0;text-align:center;}

/* Wird es eng (320 px, grosse Schrift), rutscht "Teilen" bzw. der Stift unter
   den Namen der Liste - der Name bleibt ganz. */
.td-kopf{flex-wrap:wrap;row-gap:4px;}
.td-kopf-t{flex:0 1 auto;}

/* ---- Etwas Neues kommt herein: kurz aufpoppen (neuAnimieren() in js/04-zeichnen.js).
   Nur die Bewegung an der Karte selbst, nie an einem Behaelter von Glasflaechen. ---- */
@keyframes neuRein{
  0%{ opacity:0; transform:translateY(22px) scale(.88); }
  45%{ opacity:1; }
  70%{ transform:translateY(-2px) scale(1.015); }
  100%{ opacity:1; transform:none; }
}
/* Ohne Ueberschwingen bei der Deckkraft (die Feder-Kurve machte sie in 0,1 s voll und
   die Bewegung kaum sichtbar): ruhig ausklingend, 0,6 s. */
.neu-rein{animation:neuRein .6s cubic-bezier(.22,1,.36,1) both;}
@media (prefers-reduced-motion:reduce){ .neu-rein{animation:none;} }