/* 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: drei gleich breite Teile, der offene gefuellt. */
.pl-teile{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;overflow:visible;
  padding:4px;margin:0 0 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz);
}
.pl-teile .cf-chip{justify-content:center;border-color:transparent;background:transparent;padding:9px 6px;font-size:12.5px;min-width:0;}
.pl-teile .cf-chip.on{background:var(--ink);border-color:var(--ink);color:var(--ground);}
.pl-t-z{display:flex;} .pl-t-z svg{width:13px;height:13px;}
@media (max-width:360px){
  .pl-t-z{display:none;}
  .pl-teile{gap:2px;padding:3px;}
  .pl-teile .cf-chip{font-size:12px;padding:8px 4px;gap:4px;}
  .pl-teile .cf-chip .cnt{min-width:18px;padding:0 5px;}
}

.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-z{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:4px;
  background:var(--ok-soft);color:var(--ok);}
.pl-leer-z svg{width:20px;height:20px;}
.pl-leer strong{font-size:14.5px;}
.pl-leer span:last-child{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;}
}

/* Der Umschalter mit drei Teilen: jeder so breit, wie sein Wort braucht -
   "To-Do-Liste" ist laenger als "Ziele" und soll ganz dastehen. */
.pl-teile{display:flex;}
.pl-teile .cf-chip{flex:1 1 auto;white-space:nowrap;}

/* ---------- 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{min-height:108px;padding:12px 13px;border-radius:18px;}
.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;}
.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);}
.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;}
}