/* porzellan.css - Design C "Porzellan" (Plan 033, 18.10.2026). Wird als letzte Stildatei des Kerns geladen und
   aendert nur das Aussehen: Flaechen, Tiefe, Schrift der Zahlen und Titel, Symbole als plastische Kugeln, Rillen,
   satiniertes Petrol. Inhalt, Reihenfolge und Bedienung bleiben, wie sie sind. Nur Tokens aus tokens.css. */

/* ── Grund und Schrift ──────────────────────────────────────────────── */
body { background: var(--grund); }
.seite-titel, .gruss-titel, .abschnitt-kopf h2, .anmelden-titel {
  font-family: var(--schrift-kopf); font-weight: var(--normal); font-variation-settings: var(--zahl-form); letter-spacing: -.01em; }
.seite-titel { font-size: var(--groesse-8); line-height: 1.08; }
.abschnitt-kopf h2 { font-size: var(--groesse-6); }
.gruss-titel { font-size: var(--groesse-8); line-height: 1.08; }
.gruss-titel .gruss-name { font-weight: var(--normal); font-variation-settings: var(--zahl-form); background: var(--rosegold-schrift); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Grosse Zahlen in der feinen Serifenschrift */
.tile-wert, .kachel-wert, .heute-kachel-wert, .blick-wert, .bereich-karte-zahl, .kz .heute-kachel-wert {
  font-family: var(--schrift-zahl); font-weight: var(--normal); font-variation-settings: var(--zahl-form); letter-spacing: -.01em; }
.tile-wert small { font-family: var(--schrift); }
/* Etiketten: Work Sans mit Laufweite, nicht in Grossbuchstaben gezwungen (Markenrichtlinie) */
.kachel-titel, .heute-kachel-titel, .schnell-leiste-titel, .bereiche-titel, .leiste-abschnitt, .einst-abschnitt, .suche-gruppe {
  text-transform: none; letter-spacing: var(--etikett-weite); font-weight: var(--halbfett); }

/* ── Porzellan-Flaechen: Karten, Kacheln, Felder ───────────────────── */
.karte, .tile, .kachel, .heute-kachel, .liste-karte, .blick-kachel, .bereich-karte, .start-bereich, .heute-geschafft,
.heute-morgen, .warnungen, .wahl-karte, .anmelden-kasten, .seitenfeld, .klapp-feld, .suche, .neu {
  background-color: var(--flaeche); background-image: var(--porzellan); border-color: var(--linie-zart); box-shadow: var(--schatten-panel); }
.tile.v-sand { background-image: var(--verlauf-sand); border-color: var(--rand-sand); }
.tile.v-salbei { background-image: var(--verlauf-salbei); border-color: var(--rand-salbei); }
.tile.v-rose { background-image: var(--verlauf-rose); border-color: var(--rand-rose); }
.tile.v-nebel { background-image: var(--verlauf-nebel); border-color: var(--rand-nebel); }
.karte, .liste-karte, .blick-kachel, .heute-kachel, .tile, .kachel, .bereich-karte { border-radius: var(--rundung-panel); }
a.tile:hover, a.kachel:hover, a.heute-kachel:hover, .start-bereich:hover, a.bereich-karte:hover { box-shadow: var(--hebung-hover); transform: translateY(calc(-1 * var(--r-1) + 1px)); }
.karte-kopf { border-bottom-color: var(--linie-zart); }
.karte-kopf h2 { font-weight: var(--halbfett); }
/* Kacheln im Daily und Kennzahlen: Farbe der Kachel kraeftiger, Streifen oben bleibt */
.heute-kachel::after { background: linear-gradient(160deg, var(--kf-zart, transparent) 0%, transparent 62%); opacity: 1; }
.heute-kachel::before { height: 3px; }

/* ── Symbole als plastische Kugeln ─────────────────────────────────── */
.symbol-quadrat, .heute-kachel-symbol, .schnell-knopf-symbol {
  border-radius: 50%; color: var(--weiss);
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--k) 38%, var(--weiss)) 0%, var(--k) 52%, color-mix(in srgb, var(--k) 70%, var(--schwarz-voll)) 100%);
  box-shadow: inset 0 calc(-1 * var(--r-1)) var(--r-2) var(--kugel-tiefe), inset 0 2px 3px var(--kugel-licht), 0 var(--r-1) var(--r-3) calc(-1 * var(--r-1)) color-mix(in srgb, var(--k) 60%, transparent); }
.symbol-quadrat { --k: var(--sym-nebel); width: 34px; height: 34px; }
.symbol-quadrat.f-sand, .symbol-quadrat.s-sand { --k: var(--sym-sand); }
.symbol-quadrat.f-salbei, .symbol-quadrat.s-salbei { --k: var(--sym-salbei); }
.symbol-quadrat.f-rose, .symbol-quadrat.s-rose { --k: var(--sym-rose); }
.symbol-quadrat.f-nebel, .symbol-quadrat.s-nebel { --k: var(--sym-nebel); }
.heute-kachel-symbol { --k: var(--kf); width: 28px; height: 28px; }
.schnell-knopf-symbol { --k: var(--kf); width: 24px; height: 24px; }

/* ── Knoepfe ───────────────────────────────────────────────────────── */
.knopf { border-radius: var(--rundung-mittel); }
.knopf.primaer { background: var(--petrol); background-image: var(--petrol-satin); box-shadow: var(--satin-schatten); }
.knopf.primaer:hover { background-image: none; background-color: var(--petrol-dunkel); }
.knopf.sekundaer, .zeile-knopf.start, .zeile-knopf.gelesen, .schnell-knopf, .chip-knopf {
  background-color: var(--flaeche); background-image: var(--porzellan); border-color: var(--linie); box-shadow: var(--hebung-1); }
.knopf.akzent { background-image: var(--rosegold); }
.zeile-knopf { border-radius: var(--rundung-mittel); }

/* ── Felder, Umschalter, Reiter ────────────────────────────────────── */
.eingabe { border-radius: var(--rundung-mittel); }
.wahl { background: var(--mulde); box-shadow: var(--mulde-schatten); border-color: transparent; border-radius: var(--rundung-gross); padding: var(--r-1); }
.wahl-knopf { border-radius: var(--rundung-mittel); }
.wahl-knopf[aria-pressed="true"], .wahl-knopf.aktiv { background-color: var(--flaeche); background-image: var(--porzellan); box-shadow: var(--hebung-2); }
.schalter[aria-checked="true"] .schalter-spur { background-image: var(--petrol-satin); }
.schalter-spur { box-shadow: var(--mulde-schatten); }

/* ── Chips mit Status bekommen einen Punkt (das Wort bleibt) ───────── */
.chip.ok::before, .chip.warnung::before, .chip.fehler-chip::before, .chip.fertig::before, .chip.warnt::before, .chip.laeuft::before,
.chip.naechstes::before, .chip.art-einnahme::before, .chip.art-pflege::before, .chip.art-termin::before, .chip.art-geld::before, .chip.art-aufgabe::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* ── Balken als Rillen ─────────────────────────────────────────────── */
.mini-balken, .kz-balken, .heute-kachel-balken { background: var(--rille); box-shadow: var(--rille-schatten); }
.kz-balken span, .heute-kachel-balken span { background: linear-gradient(90deg, color-mix(in srgb, var(--kf) 55%, var(--weiss)), var(--kf)); }

/* ── Seitenleiste: satiniertes Petrol mit Glanz, gewaehlte Seite als Porzellan-Pille ── */
.leiste { background-image: var(--leiste-verlauf); box-shadow: var(--schatten-leiste); }
.leiste::before { content: ""; position: absolute; top: -40%; right: -60%; width: 300px; height: 300px; border-radius: 50%; background: var(--leiste-glanz); pointer-events: none; z-index: 0; }
.leiste-punkt.aktiv { background: var(--leiste-pille); box-shadow: var(--leiste-pille-schatten); }
.leiste-punkt.aktiv::before { display: none; }
.leiste-punkt.aktiv .leiste-titel, .leiste-gruppe.hier > .leiste-punkt.aktiv .leiste-titel { color: var(--leiste-pille-text); font-weight: var(--fett); }
.leiste-punkt.aktiv .leiste-symbol, .leiste-gruppe.hier > .leiste-punkt.aktiv .leiste-symbol { color: var(--leiste-pille-symbol); }
.leiste-punkt.aktiv .leiste-zahl.leise { background: var(--nebel); color: var(--leiste-pille-text); }
.leiste-punkt.aktiv .leiste-klapp, .leiste-punkt.aktiv .leiste-pfeil { color: var(--leiste-pille-text); }
.leiste-punkt.aktiv :focus-visible { box-shadow: var(--fokus-ring) !important; }

/* ── Kopfzeile: Suche, Glocke, Konto als Porzellan ─────────────────── */
.kopf-suche, .kopf-rund { background-color: var(--flaeche); background-image: var(--porzellan); border-color: transparent; box-shadow: var(--hebung-1); border-radius: var(--rundung-gross); }
.kopf-suche:hover, .kopf-rund:hover { border-color: transparent; box-shadow: var(--hebung-hover); }
.kopf-ich { background: linear-gradient(180deg, var(--weiss), var(--tonerde-zart)); color: var(--rose-tief); box-shadow: var(--hebung-1); }
.kopf-neu.knopf.primaer, .kopf-neu { border-radius: var(--rundung-gross); }

/* ── Reiter als Porzellan-Mulde ────────────────────────────────────── */
.reiter { border-bottom: 0; background: var(--mulde); box-shadow: var(--mulde-schatten); border-radius: var(--rundung-gross); padding: var(--r-1); display: inline-flex; max-width: 100%; }
.reiter-punkt { border-bottom: 0; border-radius: var(--rundung-mittel); min-height: 36px; }
.reiter-punkt.aktiv { color: var(--tinte); background-color: var(--flaeche); background-image: var(--porzellan); box-shadow: var(--hebung-2); }

/* ── Handy: Tab-Leiste in satiniertem Petrol, gewaehlter Punkt als Pille ── */
@media (max-width: 767px) {
  .kopf { background-color: var(--flaeche); background-image: var(--porzellan); border-bottom-color: var(--linie-zart); }
  .kopf-rund { box-shadow: none; background: none; }
  .tab-leiste { background: var(--petrol); background-image: var(--petrol-satin); border-top: 0; box-shadow: var(--schatten-leiste); }
  .tab-leiste .tab { color: var(--leiste-text); }
  .tab-leiste .tab.aktiv { color: var(--leiste-text-an); }
  .tab-leiste .tab.aktiv .tab-symbol { background: var(--leiste-pille); color: var(--leiste-pille-symbol); box-shadow: var(--leiste-pille-schatten); }
  .tab-leiste :focus-visible { box-shadow: var(--fokus-ring-dunkel) !important; }
  .neu-rund { background-image: var(--petrol-satin); box-shadow: var(--satin-schatten), var(--hebung-3); }
  .seite-titel, .gruss-titel { font-size: var(--groesse-7); }
  .reiter { display: flex; }
  .reiter-punkt { min-height: var(--treffer-min); }
  .kachel-titel, .heute-kachel-titel, .schnell-leiste-titel, .bereiche-titel { letter-spacing: .03em; }
}

/* ══ Abschnitt 2: Kern (Startseite, Daily, Hilfe, Einstellungen, Verlauf, Papierkorb, Anmeldung, Lotse, Willkommen) ══ */
/* Startseite und Willkommensseiten: Buehne in satiniertem Petrol mit Glanz */
.start-buehne { background-image: var(--leiste-glanz-buehne), var(--buehne-verlauf); box-shadow: var(--schatten-leiste), var(--schatten-buehne); border-radius: var(--rundung-leiste); }
.heute-karte { background-color: var(--flaeche); background-image: var(--porzellan); box-shadow: var(--hebung-3); border-radius: var(--rundung-schwebe); }
.heute-karte-los { background-image: var(--petrol-satin); box-shadow: var(--satin-schatten); }
.start-bereich-bild { background-image: var(--verlauf-bereich-porzellan); }
/* Kleine Zahlenfelder in "Auf einen Blick": Porzellan-Mulden statt Farbstrich am Rand; Status als Punkt vor dem Namen */
.blick-zahlen div { border-left: 0; background: var(--rille); box-shadow: var(--mulde-schatten); border-radius: var(--rundung-mittel); }
.blick-zahlen div.ok dt::before, .blick-zahlen div.warnt dt::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: var(--r-1); border-radius: 50%; vertical-align: middle; background: var(--st-fertig); }
.blick-zahlen div.warnt dt::before { background: var(--tonerde); }
.blick-zahlen dd { font-family: var(--schrift-zahl); font-weight: var(--normal); font-variation-settings: var(--zahl-form); font-size: var(--groesse-4); }
.blick-kopf .p3d { filter: var(--schatten-bild-zart); }
/* Auf einen Blick, Variante C (18.10.2026): Karten aus Porzellan, Kacheln als Mulden, Zahlen in der Zahlenschrift. */
.blick-karte { background: var(--porzellan); border-color: transparent; box-shadow: var(--schatten-panel); }
.blick-teil-kacheln a { background: var(--rille); box-shadow: var(--mulde-schatten); }
.blick-teil-kacheln a:hover { box-shadow: var(--mulde-schatten), 0 0 0 1px var(--linie-stark); }
.blick-karte-wert, .blick-k-wert { font-family: var(--schrift-zahl); font-weight: var(--normal); font-variation-settings: var(--zahl-form); }
.blick-karte-kopf .p3d { filter: var(--schatten-bild-zart); }
.blick-teil-liste .mini-balken { height: 5px; background: var(--rille); box-shadow: var(--rille-schatten); }
/* Sprungleiste der Anleitungen: Porzellan-Pillen */
.wk-sprung-chip { background-color: var(--flaeche); background-image: var(--porzellan); border-color: transparent; box-shadow: var(--hebung-1); }
.wk-sprung-chip:hover { border-color: transparent; box-shadow: var(--hebung-hover); }
.wk-sprung-chip.leise { background-image: none; box-shadow: none; border-color: var(--linie); }
.wk-seite { background-color: var(--flaeche); box-shadow: var(--hebung-1); border-color: var(--linie-zart); }
/* Einstellungen: gewaehlte Seite als Porzellan-Pille mit Rosegold-Symbol */
.einst-thema.aktiv { background-image: var(--porzellan); box-shadow: var(--hebung-2); }
.einst-thema.aktiv .ic { color: var(--rose-tief); }
/* Lotse: Kopf in satiniertem Petrol, Kasten als schwebendes Porzellan */
.lotse { border-radius: var(--rundung-schwebe); box-shadow: var(--hebung-3); }
.lotse-kopf { background-image: var(--petrol-satin); }
/* Anmeldung: Elfenbein mit Licht von oben */
.anmelden-seite { background: var(--grund); background-image: var(--app-grund); }
.anmelden-kasten { border-radius: var(--rundung-schwebe); box-shadow: var(--hebung-3); }
/* Verlauf und Papierkorb: Tagesgruppen ruhig */
.tag-gruppe { border-radius: var(--rundung-panel); }

/* ── Daily auf Wunsch (18.10.2026): Kopf mit Tageskarte darunter (Variante A), Tagesband, "Heute dran" nach Tageszeit ── */
.heute-oben.mit-karte .heute-tageskarte { margin: 0 0 var(--r-4); }   /* Kopf A (Wahl 18.10.2026): Karte als flache Leiste ueber die volle Breite unter dem Titel */
.dran-liste .dran-gruppe { padding: var(--r-3) var(--r-4) var(--r-1); background: var(--flaeche-leise); border-top: 1px solid var(--linie-zart); }
.dran-liste .dran-gruppe:first-child { border-top: 0; }
.dran-gruppe h3 { margin: 0; font: var(--halbfett) var(--groesse-1)/var(--zeile-eng) var(--schrift); letter-spacing: var(--etikett-weite); color: var(--tinte-leise); }
.tagesband { margin: 0 0 var(--r-4); padding: var(--r-4) var(--r-5) var(--r-5); border-radius: var(--rundung-panel); background-color: var(--flaeche); background-image: var(--porzellan); box-shadow: var(--schatten-panel); }
.tagesband-titel { margin: 0 0 var(--r-6); font: var(--halbfett) var(--groesse-1)/var(--zeile-eng) var(--schrift); letter-spacing: var(--etikett-weite); color: var(--tinte-leise); }
.tagesband-achse { position: relative; height: var(--tagesband-hoehe); border-radius: var(--rundung-gross); background: var(--tagesband-verlauf); box-shadow: var(--rille-schatten); }
.tagesband-stunde { position: absolute; top: calc(-1 * var(--r-5)); transform: translateX(-50%); font-size: var(--groesse-0); color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.tagesband-punkt { position: absolute; top: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%); border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--weiss), 0 2px 5px var(--kugel-tiefe); }
.tagesband-punkt.art-einnahme { color: var(--art-einnahme-text); } .tagesband-punkt.art-pflege { color: var(--art-pflege-text); }
.tagesband-punkt.art-termin { color: var(--art-termin-text); } .tagesband-punkt.art-geld { color: var(--art-geld-text); }
.tagesband-punkt.art-aufgabe { color: var(--art-aufgabe-text); }
.tagesband-jetzt { position: absolute; top: calc(-1 * var(--r-2)); bottom: calc(-1 * var(--r-2)); width: 2px; transform: translateX(-50%); border-radius: 2px; background: var(--rose-tief); }
.tagesband-jetzt b { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; font-size: var(--groesse-0); font-weight: var(--fett); color: var(--rose-tief); white-space: nowrap; }
@media (max-width: 767px) { .tagesband { padding: var(--r-3) var(--r-4) var(--r-5); } .tagesband-stunde:nth-child(even) { visibility: hidden; } }

/* ── Drucken (Notfallblatt, Zettel): keine Schatten und Verlaeufe auf Papier ── */
@media print {
  .karte, .tile, .kachel, .heute-kachel, .liste-karte, .blick-kachel, .blick-karte, .bereich-karte, .start-bereich, .wahl-karte { box-shadow: none; background-image: none; }
  .symbol-quadrat, .heute-kachel-symbol, .schnell-knopf-symbol { box-shadow: none; }
}