/* bauteile.css - die Bauteile (Werte uebernommen aus dem bisherigen Programm, Stand
   21.09.2026): Grundlagen, Knopf, Eingabe, Schalter, Chip, Menue, Meldung, Banner,
   Zustaende. Nur Tokens aus tokens.css; Abstaende, Schriftgroessen und Rundungen nie als
   feste Pixel (erlaubt sind 0, 1 und 2 fuer Linien). */

/* ── Grundlagen ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--grund); color: var(--tinte); font: var(--normal) var(--groesse-3)/var(--zeile) var(--schrift); -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--rundung-klein); }
/* Fokus (17.10.2026): heller Abstand plus voller Ring; die durchsichtige Kontur zeigt ihn auch im Kontrastmodus von Windows. */
button:focus-visible, a:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--fokus-ring) !important; }
.leiste :focus-visible, .start-buehne :focus-visible, .lotse-kopf :focus-visible, .meldung :focus-visible, .fokus-dunkel :focus-visible { box-shadow: var(--fokus-ring-dunkel) !important; }
/* Zum Inhalt springen: erstes Ziel der Tastatur, nur sichtbar, wenn es den Fokus hat (WCAG 2.4.1). */
.sprung-link { position: fixed; min-height: var(--treffer-min); left: var(--r-3); top: calc(var(--sicher-oben) + var(--r-3)); z-index: var(--ebene-geist); padding: var(--r-2) var(--r-4); border-radius: var(--rundung-mittel); background: var(--petrol); color: var(--weiss); font-weight: var(--fett); transform: translateY(-200%); }
.sprung-link:focus-visible { transform: none; }
button:disabled { cursor: default; opacity: .55; }
input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.leise { color: var(--tinte-leise); font-size: var(--groesse-2); }
.ic { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.zahl { font-variant-numeric: tabular-nums; }

/* ── Knopf ─────────────────────────────────────────────────────────── */
.knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--r-2); min-height: var(--hoehe-bedien); padding: 0 var(--r-4); border-radius: var(--rundung-klein); font-size: var(--groesse-2); font-weight: var(--halbfett); white-space: nowrap; text-decoration: none; transition: background var(--dauer-kurz), color var(--dauer-kurz), box-shadow var(--dauer-kurz); }
.knopf.primaer { background: var(--petrol); background-image: linear-gradient(180deg, var(--glanz), transparent); color: var(--creme); box-shadow: var(--hebung-1); }
.knopf:active:not(:disabled) { transform: translateY(1px); }
.knopf.primaer:hover { background: var(--petrol-dunkel); }
.knopf.leise { color: var(--tinte-leise); }
.knopf.leise:hover { background: var(--flaeche-leise); color: var(--tinte); }
.knopf.sekundaer { border: 1px solid var(--linie-stark); background: var(--flaeche); }
.knopf.sekundaer:hover { background: var(--flaeche-leise); }
.knopf.gefaehrlich { color: var(--fehler); }
.knopf.akzent { background: var(--tonerde-dunkel); color: var(--weiss); box-shadow: var(--schatten-akzent); }
.knopf.akzent:hover { background: var(--tonerde-text); }
.knopf.klein { min-height: 32px; padding: 0 var(--r-3); font-size: var(--groesse-1); }

/* ── Eingabe ───────────────────────────────────────────────────────── */
.eingabe { min-height: var(--hoehe-eingabe); padding: 0 var(--r-3); border: 1px solid var(--rand-bedienung); border-radius: var(--rundung-klein); background: var(--flaeche); color: var(--tinte); outline: none; font-size: var(--groesse-2); width: 100%; transition: border-color var(--dauer-kurz), box-shadow var(--dauer-kurz); }
.eingabe:focus { border-color: var(--petrol); box-shadow: var(--fokus-ring); }
.eingabe:hover:not(:disabled):not(:focus) { border-color: var(--tinte-leise); }
/* Gesperrt sieht gesperrt aus: Sandgrund, gestrichelter Rand, kein Zeiger (das Wort dazu steht im Feldnamen oder der Hilfe). */
.eingabe:disabled, .eingabe[readonly] { background: var(--sand-hell); color: var(--tinte-leise); border-style: dashed; cursor: not-allowed; }
.eingabe[aria-invalid="true"] { border-color: var(--fehler); }
input[type=checkbox], input[type=radio] { accent-color: var(--petrol); width: 18px; height: 18px; }
.feld { display: flex; flex-direction: column; gap: var(--r-1); margin-bottom: var(--r-4); }
.feld-name { font-size: var(--groesse-2); font-weight: var(--halbfett); color: var(--tinte); }
.feld-hilfe { font-size: var(--groesse-1); color: var(--tinte-leise); }
.feld-fehler { font-size: var(--groesse-1); color: var(--fehler); }
.haken-zeile { display: flex; align-items: center; gap: var(--r-2); min-height: 24px; font-size: var(--groesse-2); margin-bottom: var(--r-4); cursor: pointer; }
.haken-zeile input { width: 18px; height: 18px; margin: 0; }

/* ── Schalter (an/aus): der Knopf ist die Trefferflaeche, die Spur das Bild ── */
.schalter { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hoehe-bedien); min-width: var(--hoehe-bedien); padding: 0 var(--r-1); flex: 0 0 auto; }
.schalter-spur { position: relative; display: block; width: 44px; height: 26px; border-radius: var(--rundung-pille); background: var(--rand-bedienung); transition: background var(--dauer-kurz); }
.schalter-spur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--flaeche); box-shadow: var(--hebung-1); transition: transform var(--dauer-kurz) var(--kurve); }
.schalter[aria-checked="true"] .schalter-spur { background: var(--petrol); }
.schalter[aria-checked="true"] .schalter-spur::after { transform: translateX(18px); }

/* ── Chip ──────────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: var(--r-1); padding: 0 var(--r-2); border-radius: var(--rundung-pille); font-size: var(--groesse-1); min-height: 24px; flex: 0 0 auto; line-height: var(--zeile); background: var(--flaeche-leise); color: var(--tinte); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip.ok { background: var(--ok-flaeche); color: var(--ok); }
.chip.warnung { background: var(--warnung-flaeche); color: var(--warnung); }
.chip.fehler-chip { background: var(--fehler-flaeche); color: var(--fehler); }

/* ── Meldung und Banner ────────────────────────────────────────────── */
.meldung { position: fixed; left: 50%; bottom: var(--r-5); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve); background: var(--petrol-dunkel); color: var(--creme); padding: var(--r-3) var(--r-3) var(--r-3) var(--r-4); border-radius: var(--rundung); box-shadow: var(--hebung-3); display: flex; gap: var(--r-4); align-items: center; z-index: var(--ebene-meldung); font-size: var(--groesse-2); max-width: calc(100vw - 2 * var(--r-4)); }
.meldung.da { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; visibility: visible; }
/* Unsichtbar heisst auch nicht fokussierbar (17.10.2026): nach dem Ausblenden verschwindet die Meldung ganz. */
.meldung:not(.da) { visibility: hidden; transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), visibility 0s linear var(--dauer); }
.meldung.fehlt { background: var(--fehler); }
.meldung button { color: var(--leiste-akzent); font-weight: var(--fett); padding: var(--r-1) var(--r-2); border-radius: var(--rundung-klein); white-space: nowrap; }
.meldung.fehlt button { color: var(--creme); }
.meldung button:hover { background: var(--glanz); }

/* ── Zustaende: leer, laden, Fehler, Hinweis ───────────────────────── */
.leer { display: flex; flex-direction: column; align-items: center; gap: var(--r-2); padding: var(--r-6) var(--r-4); text-align: center; color: var(--tinte-leise); font-size: var(--groesse-2); }
.leer .ic { color: var(--tinte-ganz-leise); }
.leer p { margin: 0; max-width: 46ch; }
.laden { display: flex; flex-direction: column; gap: var(--r-2); padding: var(--r-3) 0; }
.laden span { display: block; height: var(--r-4); border-radius: var(--rundung-klein); background: linear-gradient(90deg, var(--flaeche-leise), var(--sand), var(--flaeche-leise)); background-size: 200% 100%; animation: laden 1.2s linear infinite; }
@keyframes laden { to { background-position: -200% 0; } }
.fehler { display: flex; align-items: center; gap: var(--r-3); padding: var(--r-3) var(--r-4); border-radius: var(--rundung); background: var(--fehler-flaeche); color: var(--fehler); font-size: var(--groesse-2); }
.fehler .knopf { margin-left: auto; }
.hinweis { display: flex; align-items: flex-start; gap: var(--r-3); padding: var(--r-3) var(--r-4); border-radius: var(--rundung); background: var(--warnung-flaeche); border: 1px solid var(--tonerde); color: var(--tinte); font-size: var(--groesse-2); margin-bottom: var(--r-3); }
.hinweis .ic { color: var(--tonerde-text); margin-top: 2px; }
.hinweis b { font-weight: var(--fett); }
.hinweis p { margin: 0; }

/* ── Handy ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  input, select, textarea, .eingabe { font-size: var(--groesse-handy-eingabe); }
  .knopf, .knopf.klein, .eingabe, .haken-zeile, .schalter { min-height: var(--treffer-min); }
  .knopf { white-space: normal; text-align: center; }
}

/* ── Sanfte Bewegung (Gesamtdurchsicht 17.10.2026) ──────────────────────
   Nur beim Wechsel auf eine neue Seite (Klasse .rein am Blatt, gesetzt von Kern.seitenRahmen): die Teile der Seite gleiten
   nacheinander herein, Balken fuellen sich. Beim Neuzeichnen derselben Seite (Abhaken, Rueckgaengig) bewegt sich nichts.
   prefers-reduced-motion: die Regel ganz oben schaltet alles ab. */
@keyframes rein { from { opacity: 0; transform: translateY(var(--rein-weg)); } }
@keyframes balken-rein { from { transform: scaleX(0); } }
.blatt.rein .seite-koerper > * { animation: rein var(--dauer-lang) var(--kurve-weich) both; }
.blatt.rein .seite-koerper > :nth-child(2) { animation-delay: 40ms; }
.blatt.rein .seite-koerper > :nth-child(3) { animation-delay: 80ms; }
.blatt.rein .seite-koerper > :nth-child(4) { animation-delay: 120ms; }
.blatt.rein .seite-koerper > :nth-child(5) { animation-delay: 160ms; }
.blatt.rein .seite-koerper > :nth-child(n+6) { animation-delay: 200ms; }
.blatt.rein .mini-balken span, .blatt.rein .kz-balken span { transform-origin: left center; animation: balken-rein var(--dauer-lang) var(--kurve-weich) both; animation-delay: 220ms; }

/* ── Tipp mit "Nicht mehr anzeigen" (Kern.tipp) ───────────────────────── */
.tipp { display: flex; align-items: flex-start; gap: var(--r-3); margin: 0 0 var(--r-4); padding: var(--r-3) var(--r-3) var(--r-3) var(--r-4); border-radius: var(--rundung-panel); background: var(--verlauf-nebel); border: 1px solid var(--rand-nebel); color: var(--tinte); font-size: var(--groesse-2); }
.tipp > .ic { color: var(--petrol); margin-top: 2px; }
.tipp-text { flex: 1 1 auto; min-width: 0; }
.tipp-text p { margin: 0; }
.tipp-text b { font-weight: var(--fett); }
.tipp-weg { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 767px) { .tipp { flex-wrap: wrap; } .tipp-weg { margin-left: auto; } }
/* Ueberschriften, auf die das Programm den Fokus setzt (Lotse, Zum Inhalt, Sprung zur Liste): kein Rahmen um den Text. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus, .blatt:focus { outline: none; box-shadow: none; }
/* In Karten, die ihren Rand beschneiden (overflow: hidden), liegt der Ring innen, sonst waere er abgeschnitten (17.10.2026). */
:is(.karte, .wk-karte, .start-bereich, .liste-karte, .heute-kachel, .tag-gruppe, .fin-tabelle-rahmen) :focus-visible:not(input):not(select):not(textarea) { box-shadow: inset 0 0 0 2px var(--petrol), inset 0 0 0 4px var(--weiss) !important; }