/* Stundenabrechnung Antje – Gestaltung */
:root {
  --hintergrund: #f3f5f3;
  --flaeche: #ffffff;
  --flaeche-2: #f1f4f2;
  --linie: #e1e6e3;
  --text: #1c2530;
  --text-2: #3a4652;
  --leise: #66727d;
  --primaer: #3b5876;
  --primaer-dunkel: #2b4259;
  --primaer-hell: #edf2f7;
  --gut: #4f7a35;
  --warnung: #b45309;
  --fehler: #dc2626;
  --radius: 14px;
  --radius-klein: 10px;
  --schatten: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-gruss: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --verlauf-1: #4f7396; --verlauf-2: #3b5876; --verlauf-3: #5d7a3e;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); font-size: 15px; line-height: 1.5; color: var(--text); background: var(--hintergrund); }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
.leise { color: var(--leise); margin: .25rem 0 .75rem; }
.klein { font-size: .82rem; }

/* ---------- Symbole ---------- */
[data-symbol] { display: inline-flex; width: 18px; height: 18px; flex: none; }
[data-symbol] svg { width: 100%; height: 100%; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 42px; padding: .55rem 1rem; border-radius: var(--radius-klein); border: 1px solid transparent;
  background: var(--flaeche-2); color: var(--text-2); font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
  white-space: nowrap;
}
.knopf:hover { background: #e2e8f0; }
.knopf:active { transform: translateY(1px); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.knopf-primaer { background: var(--primaer); color: #fff; }
.knopf-primaer:hover { background: var(--primaer-dunkel); }
.knopf-rahmen { background: var(--flaeche); border-color: var(--linie); }
.knopf-rahmen:hover { background: var(--flaeche-2); }
.knopf-leise { background: transparent; }
.knopf-leise:hover { background: var(--flaeche-2); }
.knopf-gefahr { background: #fef2f2; color: var(--fehler); }
.knopf-gefahr:hover { background: #fee2e2; }
.knopf.breit { width: 100%; }
.symbol-knopf { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--leise); cursor: pointer; }
.symbol-knopf:hover { background: var(--flaeche-2); color: var(--text); }
.symbol-knopf:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- Eingaben ---------- */
.eingabe {
  width: 100%; min-height: 42px; padding: .55rem .8rem; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); transition: border-color .15s, box-shadow .15s;
}
.eingabe:focus { outline: none; border-color: var(--primaer); box-shadow: 0 0 0 3px rgba(59, 88, 118, .15); }
textarea.eingabe { resize: vertical; }
.feld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.feld.schmal { max-width: 420px; }
.feld-beschriftung { font-size: .82rem; font-weight: 500; color: var(--text-2); }

/* Zahlenfeld mit − und + */
.zahl { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.zahl-zeile { display: flex; align-items: stretch; height: 42px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); overflow: hidden; transition: border-color .15s, box-shadow .15s, background .15s; }
.zahl-zeile:focus-within { border-color: var(--primaer); box-shadow: 0 0 0 3px rgba(59, 88, 118, .15); }
.zahl-zeile.geaendert { background: var(--primaer-hell); border-color: #9fb4ca; }
.zahl input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 .75rem; font-variant-numeric: tabular-nums; font-weight: 600; outline: none; -moz-appearance: textfield; }
.zahl input::-webkit-outer-spin-button, .zahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zahl button { width: 38px; border: 0; border-left: 1px solid var(--linie); background: transparent; color: var(--text-2); cursor: pointer; font-size: 1.1rem; font-weight: 600; }
.zahl button:hover { background: var(--flaeche-2); color: var(--primaer); }
.zahl button:disabled { color: #cbd5e1; cursor: default; background: transparent; }

/* Schalter (Checkbox) */
.schalter { display: flex; align-items: center; gap: .65rem; cursor: pointer; font-weight: 500; color: var(--text-2); }
.schalter.oben { align-self: end; min-height: 42px; }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter span { position: relative; width: 40px; height: 22px; flex: none; border-radius: 999px; background: #cbd5e1; transition: background .2s; }
.schalter span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.schalter input:checked + span { background: var(--primaer); }
.schalter input:checked + span::after { transform: translateX(18px); }
.schalter input:focus-visible + span { box-shadow: 0 0 0 3px rgba(59, 88, 118, .25); }

.auswahl-gruppe { display: flex; flex-wrap: wrap; gap: .5rem; }
.auswahl-gruppe label { display: flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); cursor: pointer; font-weight: 500; }
.auswahl-gruppe input { accent-color: var(--primaer); }
.auswahl-gruppe label:has(input:checked) { border-color: var(--primaer); background: var(--primaer-hell); color: var(--primaer-dunkel); }

.segmente { display: inline-flex; padding: 3px; border-radius: var(--radius-klein); background: var(--flaeche-2); gap: 2px; flex-wrap: wrap; }
.segmente button { border: 0; background: transparent; padding: .45rem .8rem; border-radius: 8px; font-weight: 500; color: var(--leise); cursor: pointer; }
.segmente button.aktiv { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,.1); }

/* ---------- Anmeldeseite ---------- */
/* Karte links und kompakt, damit das Foto im Hintergrund wirkt (Nutzerwunsch v4.15.0); Handy: unten. */
.anmeldung {
  position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: flex-start; padding: 5vh 16px 5vh clamp(16px, 6vw, 96px);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.28) 0, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 88% 82%, rgba(255,255,255,.2) 0, rgba(255,255,255,0) 42%),
    linear-gradient(135deg, var(--verlauf-1) 0%, var(--verlauf-2) 50%, var(--verlauf-3) 100%);
  background-attachment: fixed;
}
.anmeldung-karte {
  position: relative; z-index: 2; width: 100%; max-width: 340px; padding: 1.5rem 1.5rem 1.1rem; text-align: center;
  background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.6); border-radius: 22px; box-shadow: 0 18px 50px rgba(15,23,42,.28), 0 1px 4px rgba(15,23,42,.1);
  animation: auftauchen .5s ease-out both;
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Große Bildschirme (v4.24.0, Nutzerwunsch "automatisch an den Bildschirm anpassen"): app.js (passeSkalaAn) setzt
   --skala aus der Fenstergröße (1 bis 2). zoom vergrößert Schrift, Abstände, Felder und Bilder gemeinsam.
   Achtung in JS: getBoundingClientRect liefert dann vergrößerte Werte, offsetWidth/clientWidth die unvergrößerten. */
#app, .anmeldung-karte, .dialog, .toasts { zoom: var(--skala, 1); }
.anmeldung-symbol { width: 52px; height: 52px; margin: 0 auto .6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--verlauf-1), var(--verlauf-3)); box-shadow: 0 8px 20px rgba(15,23,42,.2); }
.anmeldung-symbol svg { width: 28px; height: 28px; }
.anmeldung-app { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--verlauf-2); }
.anmeldung-gruss { margin: .2rem 0 .1rem; font-family: var(--schrift-gruss); font-size: 2.1rem; font-weight: 700; line-height: 1.1; }
.anmeldung-zusatz { margin: 0 0 .9rem; color: var(--leise); font-size: .9rem; }
.anmeldung-spruch { margin: 0 0 1rem; padding: .65rem .85rem; border-radius: 14px; font-style: italic; font-weight: 500; font-size: .92rem; color: #1e293b; background: rgba(241,245,249,.75); border: 1px solid var(--linie); }
#anmeldung-formular { text-align: left; }
.passwort-feld { position: relative; margin: .3rem 0 1rem; }
.passwort-feld input { width: 100%; height: 50px; padding: 0 3rem 0 1rem; border: 1px solid transparent; border-radius: 14px; background: var(--flaeche-2); font-size: 1.02rem; }
.passwort-feld input:focus { outline: none; border-color: var(--verlauf-2); box-shadow: 0 0 0 3px rgba(59, 88, 118, .15); background: #fff; }
.passwort-feld .symbol-knopf { position: absolute; right: 7px; top: 7px; }
.knopf-anmelden { width: 100%; height: 50px; border: 0; border-radius: 14px; color: #fff; font-size: 1.02rem; background: linear-gradient(90deg, var(--verlauf-1), var(--verlauf-3)); box-shadow: 0 10px 24px rgba(15,23,42,.18); }
.knopf-anmelden:hover { filter: brightness(1.06); background: linear-gradient(90deg, var(--verlauf-1), var(--verlauf-3)); }
.formular-fehler { margin: -.4rem 0 .9rem; padding: .55rem .8rem; border-radius: var(--radius-klein); background: #fef2f2; color: var(--fehler); font-size: .9rem; }
.anmeldung-fuss { margin-top: 1rem; font-size: .75rem; color: #94a3b8; }

/* ---------- Diashow ---------- */
.diashow { overflow: hidden; pointer-events: none; }
.diashow-voll { position: fixed; inset: 0; z-index: 0; }
.diashow-karte { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.dia-bild { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; opacity: 0; transition-property: opacity, transform; transition-timing-function: ease-in-out; will-change: opacity, transform; }
.dia-bild.aktiv { opacity: 1; }
.diashow[data-uebergang="zoom"] .dia-bild { transform: scale(1); }
.diashow[data-uebergang="zoom"] .dia-bild.aktiv { transform: scale(1.1); }
.diashow[data-uebergang="schieben"] .dia-bild { opacity: 1; transform: translateX(100%); }
.diashow[data-uebergang="schieben"] .dia-bild.aktiv { transform: translateX(0); }
.diashow[data-uebergang="schieben"] .dia-bild.raus { transform: translateX(-100%); }
.diashow[data-uebergang="ohne"] .dia-bild { transition: none !important; }
.dia-schleier { position: absolute; inset: 0; background: rgba(15, 23, 42, var(--abdunklung, .25)); }
.dia-titel { position: fixed; right: 1.2rem; bottom: 1rem; z-index: 1; padding: .3rem .85rem; border-radius: 999px; background: rgba(15,23,42,.5); color: #fff; font-size: .85rem; backdrop-filter: blur(4px); }

/* ---------- Kopfleiste ---------- */
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.88); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: 1240px; margin: 0 auto; padding: .55rem 16px; display: flex; align-items: center; gap: 1rem; }
.marke { display: flex; align-items: center; gap: .55rem; font-weight: 700; white-space: nowrap; }
.marke-symbol { width: 32px; height: 32px; padding: 6px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--verlauf-1), var(--verlauf-3)); }
.reiter { display: flex; gap: .25rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter button { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border: 0; border-radius: 9px; background: transparent; color: var(--leise); font-weight: 500; cursor: pointer; white-space: nowrap; }
.reiter button:hover { background: var(--flaeche-2); color: var(--text); }
.reiter button.aktiv { background: var(--primaer-hell); color: var(--primaer-dunkel); font-weight: 600; }

/* ---------- Inhalt ---------- */
.inhalt { max-width: 1240px; margin: 0 auto; padding: 1.2rem 16px 3rem; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.25rem; }
.abschnitt-titel { margin: 1.6rem 0 .6rem; font-size: 1.05rem; }
.abschnitt-titel.gross { font-size: 1.35rem; margin-top: 2rem; }
.ansicht > .abschnitt-titel.gross:first-child { margin-top: .3rem; }

/* Kopfbereich der neuen Ansicht: links Begrüßung, rechts Platz für Bilder */
/* Das Foto ist das Wichtigste: feste Höhe (--bild-h / --bild-h-hoch), die Breite des Bildrahmens ergibt sich aus dem
   Format des gerade gezeigten Fotos (--bild-format = Breite/Höhe, setzt app.js; quer z. B. 1.5, hoch 0.67).
   So wird das Foto nicht beschnitten; die Begrüßung nimmt den restlichen Platz. */
/* Links Begrüßung und darunter die Datumszeile (.tag-kopf, von app.js hierher gesetzt), rechts das Foto über die volle Höhe. */
/* Die Begrüßung ist nur so hoch wie ihr Inhalt; das Foto bestimmt die Höhe: --bild-h (quer) bzw. --bild-h-hoch (hochformat,
   Klasse .hoch, setzt app.js). Unter der Begrüßung stehen Datumszeile, Hinweis und Stundenplan-Knopf (.tag-oben). */
.hero { --bild-h: 310px; --bild-h-hoch: 400px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1rem; margin-bottom: 1.2rem; }
.hero.ohne-bild { grid-template-columns: 1fr; }
.hero.ohne-bild .hero-bild { display: none; }
.hero-links { min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.hero-links .tag-oben { display: flex; flex-direction: column; gap: .75rem; }
.hero-links .tag-kopf, .hero-links #tag-geladen { margin: 0; }
/* Statuszeile: links der Hinweis, rechts "Gespeicherte Summe 2 h 15 min" – in einer Zeile */
.tag-status { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .2rem 1rem; }
.tag-status-summe { margin-left: auto; white-space: nowrap; font-size: .85rem; }
.tag-status-summe b { margin-left: .35rem; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.tag-status.leer { background: var(--flaeche); border-color: var(--linie); color: var(--leise); }
/* alte Ansicht wie früher: nur der Hinweis, und nur wenn gespeichert */
body.ansicht-alt .tag-status-summe, body.ansicht-alt .tag-status.leer { display: none; }
#tag-geladen-text .kurz { display: none; }
@media (max-width: 560px) {
  .summe-lang, #tag-geladen-text .lang { display: none; }
  #tag-geladen-text .kurz { display: inline; }
  .tag-status { font-size: .82rem; padding: .55rem .75rem; column-gap: .6rem; }
  .tag-status-summe b { font-size: .98rem; margin-left: .25rem; }
}
/* Kurzwerte Woche / Monat / Schuljahr kompakt unter der Datumszeile */
.hero-links #uebersicht-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
/* Mehrarbeit unter den Kurzwerten Woche / Monat (terrakotta wie überall); ohne Mehrarbeit grau */
.kennzahl-mehr { margin-top: .3rem; font-size: .8rem; font-weight: 650; color: #b5532a; }
.kennzahl-mehr.keine { color: var(--leise); font-weight: 500; }
.kennzahl-mehr-detail { font-size: .74rem; color: #b5532a; opacity: .85; }
.hero-links #uebersicht-kennzahlen .kennzahl { padding: .55rem .85rem .6rem; box-shadow: none; }
.hero-links #uebersicht-kennzahlen .kennzahl-name { font-size: .76rem; }
.hero-links #uebersicht-kennzahlen .kennzahl-wert { font-size: 1.15rem; }
.hero-links #uebersicht-kennzahlen .kennzahl-zusatz { font-size: .74rem; }
.hero-text { display: flex; flex-direction: column; justify-content: center; padding: 1.15rem 1.6rem 1.25rem; border-radius: 20px; color: #fff; background: linear-gradient(120deg, var(--verlauf-1) 0%, var(--verlauf-2) 55%, var(--verlauf-3) 100%); box-shadow: 0 12px 28px rgba(15,23,42,.15); }
.gruss-titel { font-family: var(--schrift-gruss); font-size: 2.3rem; font-weight: 700; line-height: 1.1; }
/* kleines Herz hinter der Grußzeile (v4.25.0, Nutzerwunsch): auf dem farbigen Kopf zartes Korall, auf der hellen
   Anmeldekarte Terrakotta; schlägt sanft (nicht bei "Bewegung reduzieren") */
/* v4.27.0: Herz aus kleinen Herzen (Positionen auf der Herzkurve setzt app.js, grussMitHerz). Ein helles Herz läuft
   den Umriss entlang, dahinter werden die Herzen kleiner und blasser (Kometenspur); das ganze Herz ist leicht nach
   rechts geneigt. Bei "Bewegung reduzieren" steht das Herz ruhig, alle kleinen Herzen gleich. */
/* Größe: etwa so hoch wie die Kleinbuchstaben der Grußschrift (v4.27.1 – 1,3 em wirkte dem Nutzer "etwas zu groß") */
.herz-spur { position: relative; display: inline-block; width: 1.1em; height: .98em; margin-left: .32em; vertical-align: -.12em; transform: rotate(10deg); }
/* v4.28.0: eine Vektorgrafik (app.js, grussMitHerz) – scharf in jeder Größe, kein Unschärfe-Filter mehr.
   Farbe je Herz aus --farbton (Pink → Rosé → Korall → Orangerot entlang des Umrisses), kräftig und klar;
   dahinter ein zart gefülltes großes Herz (.herz-grund). */
.herz-spur svg { display: block; width: 100%; height: 100%; overflow: visible; }
.herz-grund { fill: rgba(255, 150, 170, .22); stroke: rgba(255, 190, 200, .35); stroke-width: .6; }
.herz { fill: hsl(var(--farbton, 355) 95% var(--hell, 62%)); stroke: hsl(var(--farbton, 355) 100% 84%); stroke-width: 1; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center;
  animation: herzlauf var(--dauer, 3.6s) linear var(--verzug, 0s) infinite; }
.gruss-ende { white-space: nowrap; }
.anmeldung-gruss .herz-spur { margin-left: .25em; }
.anmeldung-gruss .herz-grund { fill: rgba(225, 70, 105, .12); stroke: rgba(225, 70, 105, .25); }
.anmeldung-gruss .herz { fill: hsl(var(--farbton, 355) 85% var(--hell-dunkel, 50%)); stroke: hsl(var(--farbton, 355) 85% 38%); }
@keyframes herzlauf {
  0% { opacity: 1; transform: scale(1.5); }
  12% { opacity: 1; transform: scale(1.15); }
  50% { opacity: .72; transform: scale(.8); }
  100% { opacity: .72; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) { .herz { animation: none; opacity: .9; } }
.gruss-spruch { margin-top: .35rem; font-style: italic; opacity: .96; }
.hero-bild { position: relative; overflow: hidden; height: var(--bild-h); width: calc(var(--bild-h) * var(--bild-format, 1.5)); max-width: 48vw; border-radius: 20px; background: #e2e8f0; box-shadow: 0 12px 28px rgba(15,23,42,.12); transition: width .7s ease, height .7s ease; }
.hero-bild.hoch { height: var(--bild-h-hoch); width: calc(var(--bild-h-hoch) * var(--bild-format, .75)); }
.bild-platzhalter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: 1rem; text-align: center; color: var(--leise); border: 2px dashed #cbd5e1; border-radius: 20px; background: repeating-linear-gradient(135deg, #f8fafc 0 14px, #f1f5f9 14px 28px); }
.bild-platzhalter [data-symbol] { width: 38px; height: 38px; color: #94a3b8; }
.bild-platzhalter strong { color: var(--text-2); }
.bild-platzhalter span:last-child { font-size: .85rem; max-width: 260px; }

/* Umschalter Alte / Neue Ansicht */
.ansicht-wahl { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 500; color: var(--leise); white-space: nowrap; }
.ansicht-wahl .ansicht-name.aktiv { color: var(--text); font-weight: 600; }
.marke-alt, .nur-alt { display: none; }

.hinweis { margin: 0 0 1rem; padding: .7rem 1rem; border-radius: var(--radius-klein); border: 1px solid; font-size: .92rem; }
.hinweis-info { background: #eef3f8; border-color: #c8d5e3; color: #2b4259; }
.hinweis-gut { background: #f1f7ec; border-color: #cfe0bf; color: #3d5a26; }
.hinweis-warnung { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.hinweis-fehler { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Datum */
/* Tageskopf in einer Zeile: links die Datumswahl, rechts die gespeicherte Summe. Das Datum steht nur einmal da:
   der Knopf .datum-anzeige zeigt "Samstag, 14.11.2026" und öffnet den Kalender des unsichtbaren Datumsfelds. */
.tag-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; margin: 0 0 1rem; }
/* Das Datumsfeld ist nie schmaler als sein Text (max-content); reicht der Platz nicht, rutscht die Summe in die nächste Zeile */
.datum-leiste { flex: 1 1 0; min-width: min-content; display: grid; grid-template-columns: auto minmax(max-content, 19rem) auto auto; gap: .5rem; }
.datum-feld { font-weight: 600; text-align: center; }
.datum-wahl { position: relative; min-width: 0; }
.datum-wahl .datum-feld { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.datum-anzeige { display: flex; align-items: center; justify-content: center; gap: .5rem; padding-left: 1rem; padding-right: 1rem; font: inherit; font-size: 1rem; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; }
.datum-anzeige:hover { border-color: #cbd5e1; background: #f8fafc; }
.datum-anzeige [data-symbol] { color: var(--leise); }
.tag-kopf .kennzahl { flex: none; margin-left: auto; white-space: nowrap; text-align: right; }
.tag-kopf .kennzahl-name { line-height: 1.2; }
.tag-kopf .kennzahl-wert { line-height: 1.2; }
/* Browser ohne Kalender-Aufruf (showPicker): normales Datumsfeld zeigen */
.datum-wahl.nativ .datum-feld { position: static; opacity: 1; pointer-events: auto; }
.datum-wahl.nativ .datum-anzeige { display: none; }

/* Formular */
.formular h3 { margin: 1.1rem 0 .6rem; font-size: .98rem; font-weight: 600; }
.formular h3:first-child, .formular-spalten > div > h3:first-child { margin-top: 0; }
/* Tagesformular farbig gegliedert: jeder Abschnitt ein leicht getöntes Feld mit farbigem Rand links und Punkt vor der Überschrift.
   Unterricht blau, Pausenaufsichten orange, Sonstiges violett, Weitere Tätigkeiten türkis. Anordnung und Beschriftung bleiben. */
#tag-formular .formular-spalten { gap: .9rem 1rem; }
#tag-formular .formular-spalten > div { display: flex; flex-direction: column; gap: .9rem; }
#tag-formular .formular-spalten > div + div { padding-left: 0; border-left: 0; margin-top: 0; }
.gruppe { padding: .8rem .95rem .95rem; border: 1px solid var(--rand); border-left: 4px solid var(--farbe); border-radius: 12px; background: var(--toenung); }
#tag-formular .gruppe h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; color: var(--farbe-text); }
.gruppe h3::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--farbe); }
.gruppe-unterricht { --farbe: #3b5876; --farbe-text: #2b4259; --toenung: #f3f6f9; --rand: #d6e0ea; }
.gruppe-pausen     { --farbe: #5f7a35; --farbe-text: #3d5022; --toenung: #f5f8ef; --rand: #dbe5c8; }
.gruppe-sonstiges  { --farbe: #66727d; --farbe-text: #3a4652; --toenung: #f5f6f7; --rand: #dfe3e6; }
.gruppe-weitere    { --farbe: #8a6a43; --farbe-text: #5a4329; --toenung: #faf6f0; --rand: #ebdfcd; }
/* Neue Ansicht: "Sonstiges" ist mit "Weitere Tätigkeiten" zusammengelegt (app.js ordneFelder), der eigene Abschnitt entfällt.
   Abschnitte, deren Felder alle in den Favoriten stehen, fallen weg (.leer). */
body:not(.ansicht-alt) .gruppe-sonstiges, .gruppe.leer:not(.gruppe-favoriten) { display: none; }
/* Favoriten: gelbes Kästchen über allen Abschnitten */
/* Favoriten in Salbeigrün (Farbpalette aus dem See-Foto, kein Gelb), aktive Sterne in derselben Farbe */
.gruppe-favoriten  { --farbe: #4d7c73; --farbe-text: #2f504a; --toenung: #f1f7f5; --rand: #cfe2dd; margin-bottom: .9rem; }
#tag-formular .gruppe-favoriten h3::before { display: none; }
.favoriten-symbol { display: inline-flex; width: 17px; height: 17px; color: var(--farbe); }
.favoriten-symbol svg { width: 100%; height: 100%; fill: currentColor; }
.favoriten-hinweis { margin: 0; font-size: .85rem; color: #2f504a; }
.raster-favoriten { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
.gruppe-favoriten.leer .raster-favoriten { display: none; }
.feld-herkunft { display: none; }
#feld-gruppe-favoriten .feld-herkunft { display: inline; }
/* Stern an jedem Feld (rechts neben der Beschriftung) */
.feld-kopf { display: flex; align-items: flex-end; gap: .3rem; }
.feld-kopf .feld-beschriftung { flex: 1; min-width: 0; }
#tag-formular .zahl .stern { flex: none; width: 24px; height: 24px; margin: -2px -3px 0 0; padding: 3px; border: 0; border-radius: 6px; background: none; color: #c4cbd6; font-size: 0; cursor: pointer; }
#tag-formular .zahl .stern svg { width: 100%; height: 100%; display: block; }
#tag-formular .zahl .stern:hover { color: #4d7c73; background: rgba(77, 124, 115, .12); }
#tag-formular .zahl .stern.an { color: #4d7c73; }
#tag-formular .zahl .stern.an svg { fill: currentColor; }
body.ansicht-alt .gruppe-favoriten, body.ansicht-alt #tag-formular .zahl .stern { display: none; }
/* Sprechblase = Kommentar zum Feld (v4.17.0): wie der Stern ein kleines Symbol im Feldkopf, nimmt keinen Platz weg.
   Mit Kommentar gefüllt seeblau; blass, wenn das Feld 0 ist (Kommentar wird dann nicht gespeichert). */
/* ohne Kommentar: dezent – Linie in hellem Blaugrau, kein Hintergrund (v4.22.1: der hellblaue Grund von v4.17.2 war
   dem Nutzer "zu aufdringlich", grau wie der Stern zu unauffällig). Mit Kommentar: kräftiges seeblaues Kästchen (.an). */
#tag-formular .zahl .notiz-knopf { flex: none; width: 24px; height: 24px; margin: -2px -1px 0 0; padding: 4px; border: 0; border-radius: 6px; background: none; color: #8fa7c0; font-size: 0; cursor: pointer; }
#tag-formular .zahl .notiz-knopf svg { width: 100%; height: 100%; display: block; stroke-width: 2; }
#tag-formular .zahl .notiz-knopf:hover { color: var(--primaer); background: rgba(59, 88, 118, .12); }
/* mit Kommentar: kräftig gefüllt (seeblau) auf hellem Grund – soll sofort auffallen (Nutzerwunsch v4.17.1) */
#tag-formular .zahl .notiz-knopf.an { color: #fff; background: var(--primaer); box-shadow: 0 1px 3px rgba(43, 66, 89, .35); }
#tag-formular .zahl .notiz-knopf.an svg { fill: currentColor; stroke: currentColor; }
#tag-formular .zahl .notiz-knopf.an:hover { color: #fff; background: var(--primaer-dunkel, #2b4259); }
#tag-formular .zahl .notiz-knopf.ruht { opacity: .45; }
/* noch nicht gespeichert: zusätzlich ein heller Ring */
#tag-formular .zahl .notiz-knopf.geaendert { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primaer); }
.kommentar-dialog textarea { width: 100%; resize: vertical; min-height: 4.5rem; font: inherit; }
.kommentar-fuss { display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem; font-size: .82rem; }
/* geänderte Felder deutlich vom getönten Hintergrund abheben */
#tag-formular .zahl-zeile.geaendert { background: #e1e9f2; border-color: #7e98b5; }
.formular-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
.formular-spalten > div + div { padding-left: 2.2rem; border-left: 1px solid var(--linie); }
.raster { display: grid; gap: .8rem; }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formular > .knopf, .formular > .feld { margin-top: 1.1rem; }
.formular > .raster + .feld, .formular > .feld + .raster, .formular > .raster + .raster { margin-top: 1rem; }
.bilder-raster > p { grid-column: 1 / -1; }
.speichern-knopf { margin-top: 1.4rem !important; min-height: 48px; border: 1px solid var(--linie); background: var(--flaeche); }
.speichern-knopf.offen { background: var(--primaer); border-color: var(--primaer); color: #fff; box-shadow: 0 8px 20px rgba(59, 88, 118, .25); animation: pulsieren 2.2s ease-in-out infinite; }
.speichern-knopf.offen:hover { background: var(--primaer-dunkel); }
@keyframes pulsieren { 0%, 100% { box-shadow: 0 8px 20px rgba(59, 88, 118, .25); } 50% { box-shadow: 0 8px 28px rgba(59, 88, 118, .45); } }
.formular-notiz { margin-top: .5rem; font-size: .85rem; color: var(--leise); text-align: center; }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
.kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .9rem 1.1rem; box-shadow: var(--schatten); }
.kennzahl.klein { background: transparent; border: 0; box-shadow: none; padding: 0; text-align: right; }
.kennzahl-name { font-size: .8rem; color: var(--leise); font-weight: 500; }
.kennzahl-wert { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kennzahl-zusatz { font-size: .82rem; font-weight: 600; }
.kennzahl-zusatz.plus { color: var(--gut); }
.kennzahl-zusatz.minus { color: var(--fehler); }

/* Kacheln der Auswertung: Überblick (3 große) und je Kategorie eine Kachel in der Farbe des Diagramms */
.kacheln-ueberblick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.kacheln-kategorien { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .7rem; }
.kachel { position: relative; overflow: hidden; padding: .85rem 1rem .9rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.kachel-name { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 500; color: var(--leise); }
.kachel-wert { margin-top: .15rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.kachel-unter { font-size: .8rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.kachel-hinweis { margin-top: .4rem; font-size: .76rem; line-height: 1.35; color: var(--leise); }
.kachel-gesamt { background: linear-gradient(135deg, #edf2f7 0%, #fff 75%); border-color: #d6e0ea; }
.kachel-gesamt .kachel-wert { font-size: 1.85rem; color: #2b4259; }
.kachel-regulaer .kachel-wert { font-size: 1.85rem; }
.kachel.kachel-mehr { background: linear-gradient(135deg, #fbefe8 0%, #fff 75%); border-color: #f2d6c8; }
.kachel-mehr .kachel-wert { font-size: 1.85rem; color: #b5532a; }
.kachel-mehr .kachel-name { color: #b5532a; font-weight: 600; }
.kachel-kat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--kat-farbe); }
.kachel-kat .kachel-name { color: var(--text-2); }
.kachel-kat .kachel-name i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--kat-farbe); }
.kachel-balken { height: 5px; margin-top: .55rem; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.kachel-balken span { display: block; height: 100%; border-radius: inherit; background: var(--kat-farbe); }
.kachel-mehrteil { margin-top: .45rem; font-size: .76rem; font-weight: 600; color: #b5532a; }

/* Überschrift "Verlauf" mit dem Darstellungs-Schalter rechts daneben */
.verlauf-kopf { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; margin: 1.6rem 0 .6rem; }
.verlauf-kopf .abschnitt-titel { margin: 0; }

/* Tabellen */
.tabelle-huelle { overflow: auto; max-height: 560px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: .55rem .8rem; border-bottom: 1px solid var(--linie); text-align: left; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 1; background: #f8fafc; font-weight: 600; color: var(--text-2); }
td.zahl-zelle, th.zahl-zelle { text-align: right; font-variant-numeric: tabular-nums; }

/* Reiter Export: nur die Zusammenfassung über den Knöpfen (die Vorschau-Liste hat der Nutzer in v4.20.1 entfernen lassen) */
.mehr-text { color: #b5532a; font-weight: 600; }
#exp-text { margin: .2rem 0 .8rem; font-size: 1rem; color: var(--text); }

/* ---------- Wochenraster (neue Ansicht, v4.19.0): Tage als Spalten, Zeiten in h/min, Bemerkungen darunter ---------- */
.nur-alt-inline { display: none; }
body.ansicht-alt .nur-alt-inline { display: inline; }
body.ansicht-alt .nur-neu { display: none; }
.wochen-raster-huelle { max-height: none; }
.wochen-raster { font-size: .9rem; }
.wochen-raster th, .wochen-raster td { padding: .5rem .6rem; }
.wochen-raster thead th { text-align: center; vertical-align: bottom; }
.wochen-raster thead th.ecke { text-align: left; }
.wochen-raster tbody th, .wochen-raster tfoot th { position: sticky; left: 0; top: auto; z-index: 1; background: var(--flaeche); font-weight: 500; color: var(--text); white-space: normal; min-width: 11rem; }
.wochen-raster thead th.ecke { position: sticky; left: 0; z-index: 2; }
.wochen-raster td { text-align: right; font-variant-numeric: tabular-nums; min-width: 4.6rem; }
/* Farbpunkt links fest, damit er bei umbrechenden Namen nicht in eine eigene Zeile rutscht */
.wochen-raster tbody th { padding-left: 1.55rem; hyphens: auto; }
.wochen-raster .kat-punkt { position: absolute; left: .6rem; top: calc(.5rem + .42em); width: .6rem; height: .6rem; border-radius: 3px; }
.wochen-raster .tag-sprung { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: .2rem .45rem; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; }
.wochen-raster .tag-sprung:hover { background: var(--primaer-hell); }
.wochen-raster .tag-name { font-weight: 700; }
.wochen-raster .tag-datum { font-size: .75rem; font-weight: 500; color: var(--leise); }
.wochen-raster .wochenende { background: rgba(148, 163, 184, .06); }
.wochen-raster .frei { color: var(--leise); }
.wochen-raster thead th.gewaehlt { background: var(--primaer-hell); }
.wochen-raster thead th.gewaehlt .tag-name, .wochen-raster thead th.gewaehlt .tag-datum { color: var(--primaer); }
.wochen-raster td.gewaehlt { background: rgba(59, 88, 118, .06); }
.wochen-raster thead th.heute .tag-datum::after { content: " · heute"; }
.wochen-raster .woche-summe { font-weight: 700; border-left: 1px solid var(--linie); background: #f8fafc; }
.wochen-raster tbody tr:hover td, .wochen-raster tbody tr:hover th { background: #f5f8fb; }
.wochen-raster tfoot tr.summe th, .wochen-raster tfoot tr.summe td { font-weight: 700; border-top: 2px solid var(--linie); background: #f8fafc; }
.wochen-raster tfoot tr.mehr th, .wochen-raster tfoot tr.mehr td { color: #b5532a; background: #fbefe8; font-weight: 600; border-bottom: 0; }
.wochen-raster .zelle-notiz { display: inline-block; width: 15px; height: 15px; margin-left: .3rem; padding: 2px; border-radius: 4px; vertical-align: -.2em; color: #fff; background: var(--primaer); cursor: help; }
.wochen-raster .zelle-notiz svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.wochen-bemerkungen { margin-top: .9rem; padding: .8rem 1rem; border: 1px solid var(--linie); border-left: 4px solid var(--primaer); border-radius: var(--radius); background: var(--flaeche); }
.wochen-bemerkungen h4 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: .95rem; color: var(--primaer); }
.wochen-bemerkungen h4 svg { width: 16px; height: 16px; }
.wochen-bemerkungen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.wochen-bemerkungen li { display: grid; grid-template-columns: 5.5rem minmax(8rem, 14rem) 1fr; gap: .6rem; align-items: baseline; font-size: .9rem; }
.wochen-bemerkungen .tag-sprung { padding: 0; border: 0; background: none; color: var(--primaer); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.wochen-bemerkungen .tag-sprung:hover { text-decoration: underline; }
.wochen-bemerkungen .bem-kat { color: var(--leise); }
@media (max-width: 720px) {
  .wochen-raster { font-size: .84rem; }
  .wochen-raster tbody th, .wochen-raster tfoot th { min-width: 8.5rem; max-width: 9.5rem; }
  .wochen-raster td { min-width: 4rem; }
  .wochen-bemerkungen li { grid-template-columns: auto 1fr; }
  .wochen-bemerkungen .bem-text { grid-column: 1 / -1; }
}
tbody tr:hover { background: #f8fafc; }
tbody tr:last-child td { border-bottom: 0; }
tr.summe td { font-weight: 700; background: #f8fafc; }

/* Listen */
.liste { display: flex; flex-direction: column; gap: .6rem; }
.listen-eintrag { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.listen-eintrag .text { flex: 1; min-width: 0; }
.listen-eintrag .titel { font-weight: 600; }
.listen-eintrag .unter { font-size: .85rem; color: var(--leise); overflow: hidden; text-overflow: ellipsis; }
.marker { display: inline-block; margin-left: .4rem; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #fbefe8; color: #b5532a; }


/* Auswertung, Export */
.steuerung { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.steuerung .feld { min-width: 210px; }
.diagramm-karte { padding: 1rem 1.2rem .8rem; }
.diagramm { width: 100%; overflow-x: auto; }
.diagramm svg text { font-family: var(--schrift); fill: var(--leise); font-size: 11px; }
.legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .6rem; font-size: .82rem; color: var(--text-2); }
.legende span { display: inline-flex; align-items: center; gap: .4rem; }
.legende i { width: 10px; height: 10px; border-radius: 3px; }
.balken-anteil { display: flex; align-items: center; gap: .6rem; }
.balken-anteil div { height: 8px; border-radius: 99px; background: var(--primaer); min-width: 2px; }
/* Reiter Export (v4.22.0): Kacheln für den Zeitraum, darunter je Format eine Download-Karte */
.export-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0 1.4rem; }
.export-kacheln .kachel { border-top: 4px solid var(--primaer); }
.export-kacheln .kachel.zeitraum { border-top-color: #6f8aa6; }
.export-kacheln .kachel.mehr { border-top-color: #b5532a; background: #fbefe8; }
.export-kacheln .kachel.mehr .kachel-name, .export-kacheln .kachel.mehr .kachel-wert { color: #b5532a; }
.export-kacheln .kachel.mehr.keine { background: var(--flaeche); border-top-color: var(--linie); }
.export-kacheln .kachel.mehr.keine .kachel-wert { color: var(--leise); }
.export-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: .4rem 0 .9rem; }
.export-karte { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); color: var(--text); text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.export-karte:hover { border-color: var(--primaer); box-shadow: 0 6px 18px rgba(43, 66, 89, .14); transform: translateY(-1px); }
.export-karte:focus-visible { outline: 3px solid rgba(59, 88, 118, .35); outline-offset: 2px; }
.export-karte[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }
.export-symbol { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; color: #fff; }
.export-symbol svg { width: 24px; height: 24px; }
.export-karte.excel .export-symbol { background: #2f7d4f; }   /* Excel-Grün, damit man das Format sofort erkennt */
.export-karte.pdf .export-symbol { background: #b23a3a; }     /* PDF-Rot */
.export-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.export-text b { font-size: 1.05rem; }
.export-text span { font-size: .87rem; color: var(--leise); }
.export-laden { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .75rem; border-radius: 999px; background: var(--primaer-hell); color: var(--primaer); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.export-laden svg { width: 16px; height: 16px; }
.export-karte:hover .export-laden { background: var(--primaer); color: #fff; }
.export-roh { margin-top: .2rem; }
@media (max-width: 900px) {
  .export-karten { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .export-kacheln { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .export-kacheln .kachel.zeitraum { grid-column: 1 / -1; }
  .export-kacheln .kachel { padding: .65rem .8rem; }
  .export-kacheln .kachel-wert { font-size: 1.2rem; }
  .export-karte { grid-template-columns: auto 1fr; }
  .export-laden { grid-column: 2; justify-self: start; }
}

/* Admin-Bereich (kompakt: Hochladen und Ordner nebeneinander, Bilder als schmale Zeilen) */
.klein-text { font-size: .85rem; font-weight: 400; }
.admin-kopf .abschnitt-titel.gross { margin-bottom: .2rem; }
.admin-kopf p { margin: 0; }
.admin-quellen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: .8rem; }
.admin-quellen .hinweis { margin: 0; font-size: .85rem; line-height: 1.5; }
.ablage-text { display: flex; flex-direction: column; gap: .1rem; font-size: .88rem; }
.ablage-text .leise { font-size: .8rem; }
.ordner-hinweis code, .dialog code { padding: .05rem .35rem; border-radius: 6px; background: rgba(15,23,42,.07); font-size: .85em; word-break: break-all; }
.bild-hinweis { margin-left: auto; align-self: center; font-size: .75rem; color: var(--leise); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.formular > h3 + .feld, .formular > h3 + .raster { margin-top: 0; }
.formular > .raster + h3 { margin-top: 1.5rem; }
.ablage { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 2px dashed #cbd5e1; border-radius: var(--radius); background: var(--flaeche); cursor: pointer; transition: border-color .15s, background .15s; }
.ablage:hover, .ablage.ziehen { border-color: var(--primaer); background: var(--primaer-hell); }
.ablage-symbol { flex: none; width: 28px; height: 28px; color: var(--primaer); }
.bilder-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .7rem; }
.bild-karte { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-areas: "bild felder" "bild aktionen"; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.bild-karte.inaktiv .bild-vorschau { filter: grayscale(1) opacity(.55); }
/* Vorschau zeigt das ganze Foto (quer oder hoch) */
.bild-vorschau { grid-area: bild; position: relative; min-height: 104px; background: #e2e8f0 center / contain no-repeat; }
.bild-vorschau .nummer { position: absolute; left: .4rem; top: .4rem; padding: 0 .45rem; border-radius: 999px; background: rgba(15,23,42,.65); color: #fff; font-size: .72rem; font-weight: 600; }
.bild-felder { grid-area: felder; display: flex; flex-direction: column; gap: .4rem; padding: .55rem .65rem .2rem; }
.bild-felder .eingabe { min-height: 34px; padding: .3rem .6rem; font-size: .88rem; }
.bild-zeile { display: flex; align-items: center; gap: .6rem; }
.bild-zeile .schalter { flex: none; font-size: .85rem; gap: .45rem; }
.bild-zeile select { flex: 1; min-width: 0; }
.bild-aktionen { grid-area: aktionen; display: flex; align-items: center; gap: .1rem; padding: 0 .35rem .3rem .45rem; }
.bild-aktionen .symbol-knopf { width: 32px; height: 32px; }
.bild-aktionen .symbol-knopf:last-child { margin-left: auto; color: var(--fehler); }

/* Dialog, Toasts, Fuß */
.dialog { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 30px 80px rgba(15,23,42,.35); }
.dialog::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.dialog form { padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
#dialog-inhalt { display: flex; flex-direction: column; gap: .8rem; }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: .5rem; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: .5rem; }
.toast { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: 12px; background: #0f172a; color: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.3); font-weight: 500; animation: auftauchen .25s ease-out both; }
.toast.fehler { background: #991b1b; }
.toast [data-symbol] { color: #b5d38f; }
.toast.fehler [data-symbol] { color: #fecaca; }
.fuss { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--linie); color: var(--leise); font-size: .8rem; }

/* Kopfzeile: bei mittlerer Breite Platz für alle Menüpunkte schaffen */
.kopf-innen { gap: .7rem; }
.reiter { gap: .1rem; }
.reiter button { padding: .5rem .6rem; gap: .4rem; }
.ansicht-wahl { gap: .35rem; font-size: .78rem; }
#abmelden { padding-left: .6rem; padding-right: .6rem; }
@media (max-width: 1280px) {
  .marke-neu { display: none; }
}
body.ansicht-alt .marke-alt { display: inline; }
/* Umbrechende Beschriftungen: Eingabefelder einer Zeile bleiben auf gleicher Höhe */
.zahl { justify-content: flex-end; }
.zahl button, .knopf, .symbol-knopf, .reiter button { touch-action: manipulation; }
html { -webkit-tap-highlight-color: transparent; }

/* =====================================================================
   KLEINE BILDSCHIRME
   Geprüft über die Geräte-Vorschau der Testumgebung (/test/geraete):
   kleiner Laptop 1366 × 768 und 1280 × 720, iPad quer 1024 × 768,
   iPad hoch 768 × 1024, Handy 390 × 844.
   ===================================================================== */

/* ---------- Niedrige Bildschirme (kleiner Laptop, iPad quer): alles etwas kompakter ---------- */
@media (max-height: 820px) and (min-width: 721px) {
  .inhalt { padding-top: .9rem; }
  .hero { --bild-h: 288px; --bild-h-hoch: 350px; margin-bottom: .9rem; }
  .hero-text { padding: .95rem 1.4rem 1.05rem; }
  .gruss-titel { font-size: 2.1rem; }
  .tag-kopf { margin: 0 0 .7rem; }
  .kennzahl.klein .kennzahl-wert { font-size: 1.3rem; }
  #tag-formular { padding: 1rem 1.1rem; }
  .formular h3 { margin: .8rem 0 .45rem; }
  #tag-formular .raster { gap: .6rem .8rem; }
  #tag-formular .zahl-zeile { height: 38px; }
  .speichern-knopf { margin-top: 1rem !important; min-height: 44px; }
}

/* ---------- Bis 1100 px (iPad quer, kleine Fenster): Kopfzeile sparsamer ---------- */
@media (max-width: 1100px) {
  .ansicht-wahl .ansicht-name { display: none; }
  .ansicht-wahl .ansicht-name.aktiv { display: inline; }
  .nur-breit { display: none; }
  /* Datumszeile neben dem Foto: "Tag zurück" / "Tag vor" nur als Pfeil (Text als Tooltip) */
  #tag-zurueck, #tag-vor { font-size: 0; gap: 0; padding-left: .7rem; padding-right: .7rem; }
  .datum-leiste { grid-template-columns: auto minmax(max-content, 1fr) auto auto; }
  .formular-spalten { gap: 1.4rem; }
  .formular-spalten > div + div { padding-left: 1.4rem; }
}

/* ---------- Bis 900 px (iPad hoch): Kopfzeile zweizeilig, Formular einspaltig ---------- */
@media (max-width: 900px) {
  .kopf-innen { flex-wrap: wrap; row-gap: .25rem; padding-bottom: .3rem; }
  .marke { flex: 1; }
  .marke-neu { display: inline; }
  .reiter { order: 3; flex: 0 0 100%; }
  .reiter button { flex: 1 0 auto; justify-content: center; }
  body.ansicht-alt .reiter button { flex: 0 0 auto; }
  /* Kopfbereich: oben Begrüßung und Foto nebeneinander, die Datumszeile darunter über die volle Breite */
  .hero { --bild-h: 230px; --bild-h-hoch: 300px; grid-template-areas: "text bild" "kopf kopf"; row-gap: .75rem; }
  .hero.ohne-bild { grid-template-areas: "text" "kopf"; }
  .hero-links { display: contents; }
  .hero-text { grid-area: text; align-self: stretch; }
  .hero-bild { grid-area: bild; max-width: 58vw; }
  .hero-links .tag-oben { grid-area: kopf; }
  .hero { grid-template-areas: "text bild" "kopf kopf" "zahlen zahlen"; }
  .hero.ohne-bild { grid-template-areas: "text" "kopf" "zahlen"; }
  .hero-links #uebersicht-kennzahlen { grid-area: zahlen; }
  /* Hochformat-Foto: Begrüßung, Datumszeile und Kurzwerte links daneben, die Begrüßung bleibt kompakt */
  .hero:has(.hero-bild.hoch) { grid-template-areas: "text bild" "kopf bild" "zahlen bild"; align-items: start; }
  .hero:has(.hero-bild.hoch) .hero-text { align-self: start; }
  .hero:has(.hero-bild.hoch) .tag-kopf { flex-wrap: wrap; row-gap: .35rem; }
  .hero:has(.hero-bild.hoch) .tag-kopf .datum-leiste { flex: 1 1 100%; }
  .hero:has(.hero-bild.hoch) .tag-kopf .kennzahl.klein { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
  .datum-leiste { flex: 1 1 auto; }
  .admin-quellen { grid-template-columns: 1fr; }
  .formular-spalten { grid-template-columns: 1fr; gap: 0; }
  .formular-spalten > div + div { padding-left: 0; border-left: 0; margin-top: 1.2rem; }
}

/* ---------- Bis 720 px (Handy): alles untereinander ---------- */
@media (max-width: 720px) {
  body { font-size: 14px; }
  /* Begrüßung oben, Foto darunter in seinem Format (höchstens 55 % der Bildschirmhöhe) */
  .hero, .hero.ohne-bild, .hero:has(.hero-bild.hoch) { grid-template-columns: 1fr; grid-template-areas: "text" "bild" "kopf" "zahlen"; }
  .hero-links #uebersicht-kennzahlen .kennzahl-wert { font-size: 1rem; }
  .hero-links #uebersicht-kennzahlen .kennzahl-name { font-size: .7rem; }
  .hero-text { padding: 1rem 1.2rem; }
  .hero-bild, .hero-bild.hoch { justify-self: center; height: auto; width: min(100%, calc(55vh * var(--bild-format, 1.5))); max-width: 100%; aspect-ratio: var(--bild-format, 1.5); transition: none; }
  /* Datumswahl über die volle Breite (Datum oben, darunter zurück / vor / heute), Summe in einer Zeile darunter */
  .tag-kopf { flex-wrap: wrap; }
  .datum-leiste { flex: 1 1 100%; grid-template-columns: 1fr 1fr 1fr; gap: .45rem; }
  .datum-leiste .knopf { padding-left: .4rem; padding-right: .4rem; }
  #tag-zurueck, #tag-vor { font-size: inherit; gap: .45rem; }
  .datum-wahl { grid-column: 1 / -1; order: -1; }
  .tag-kopf .kennzahl.klein { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; }
  .bild-karte { grid-template-columns: 96px minmax(0, 1fr); }
  .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kacheln-ueberblick { grid-template-columns: 1fr; }
  .kacheln-kategorien { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel-wert { font-size: 1.25rem; }
  #feld-gruppe-pausen { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 10/15/30 bleiben nebeneinander */
  /* Handy: Karte unten über die Breite, oben bleibt das Foto frei; Bildtitel dann oben */
  .anmeldung { align-items: flex-end; justify-content: center; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); }
  .anmeldung-karte { max-width: 400px; padding: 1.2rem 1.2rem 1rem; }
  .anmeldung-gruss { font-size: 2.1rem; }
  .anmeldung .dia-titel { bottom: auto; top: 1rem; }
  .gruss-titel { font-size: 1.9rem; }
  .admin-kopf .knopf { width: 100%; }
}
@media (max-width: 560px) {
  /* Menü: nur der aktive Punkt zeigt seinen Namen, die übrigen ihr Symbol */
  body:not(.ansicht-alt) .reiter button { font-size: 0; gap: 0; flex: 1 0 auto; }
  body:not(.ansicht-alt) .reiter button.aktiv { font-size: .9rem; gap: .4rem; }
  /* Pausenaufsichten auf dem Handy (v4.29.1): drei Spalten waren zu eng – Beschriftung brach um, die Sprechblase lag
     auf dem Text, die Zahl war nicht zu sehen. Jetzt je Feld eine Zeile: links Beschriftung mit Symbolen, rechts
     das Zahlenfeld in fester Breite. */
  #feld-gruppe-pausen { grid-template-columns: 1fr; gap: .5rem; }
  #feld-gruppe-pausen .zahl { flex-direction: row; align-items: center; justify-content: space-between; gap: .6rem; }
  #feld-gruppe-pausen .zahl .feld-kopf { flex: 1; min-width: 0; align-items: center; }
  #feld-gruppe-pausen .zahl .zahl-zeile { flex: none; width: 7.75rem; }
  #feld-gruppe-pausen .zahl button[data-schritt] { width: 38px; }
  #feld-gruppe-pausen .zahl input { padding: 0 .5rem; text-align: center; }
  #feld-gruppe-pausen .zahl .feld-kopf { gap: .15rem; }
  #feld-gruppe-pausen .zahl .stern, #feld-gruppe-pausen .zahl .notiz-knopf { margin: 0; }
  .marke-neu { display: none; }   /* Platz für Umschalter und Abmelden in einer Zeile */
}
@media (max-width: 420px) {
  .raster-2 { grid-template-columns: 1fr; }
}

/* ---------- Bedienung mit dem Finger (iPad, Handy): größere Tippflächen ---------- */
@media (pointer: coarse) {
  #tag-formular .zahl .stern, #tag-formular .zahl .notiz-knopf { width: 34px; height: 34px; padding: 7px; margin: -8px -6px -4px 0; }
  #tag-formular .zahl-zeile, .zahl-zeile { height: 48px; }
  .zahl button { width: 48px; font-size: 1.3rem; }
  @media (max-width: 560px) {   /* Handy, Pausenaufsichten in Zeilen: schmalere Knöpfe und Symbole, sonst reicht der Platz nicht */
    #tag-formular #feld-gruppe-pausen .zahl button[data-schritt] { width: 38px; }
    #tag-formular #feld-gruppe-pausen .zahl .stern, #tag-formular #feld-gruppe-pausen .zahl .notiz-knopf { width: 30px; height: 34px; padding: 7px 5px; margin: 0; }
  }
  .eingabe, .knopf { min-height: 46px; }
  .symbol-knopf { width: 44px; height: 44px; }
  .reiter button { padding-top: .7rem; padding-bottom: .7rem; }
  /* Unter 16 px vergrößert Safari die Seite beim Antippen eines Feldes */
  input, select, textarea { font-size: 16px; }
}

/* =====================================================================
   ALTE ANSICHT (Umschalter in der Kopfzeile): schlicht wie die erste Fassung der App –
   Titel, Reiter mit Unterstrich, alle Abschnitte untereinander über die volle Breite,
   graue Eingabefelder, keine Karten. Nur Gestaltung; Funktionen sind dieselben.
   ===================================================================== */
body.ansicht-alt { background: #ffffff; font-family: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif; color: #262730; }
body.ansicht-alt .nur-alt { display: block; margin-bottom: .3rem; }
body.ansicht-alt #gruss-karte { display: none !important; }

body.ansicht-alt .kopf { position: static; background: #ffffff; border-bottom: 0; backdrop-filter: none; }
body.ansicht-alt .kopf-innen { max-width: none; padding: 2.2rem 2.5rem 0; display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "marke wahl abmelden" "reiter reiter reiter"; gap: .7rem 1rem; }
body.ansicht-alt .marke { grid-area: marke; }
body.ansicht-alt .ansicht-wahl { grid-area: wahl; }
body.ansicht-alt #abmelden { grid-area: abmelden; }
body.ansicht-alt .marke-symbol, body.ansicht-alt .marke-neu { display: none; }
body.ansicht-alt .marke-alt { display: inline; font-size: 2.1rem; font-weight: 700; letter-spacing: -.01em; }
body.ansicht-alt .reiter { grid-area: reiter; gap: 1.1rem; border-bottom: 1px solid #e6e9ef; }
body.ansicht-alt .reiter [data-symbol] { display: none; }
body.ansicht-alt .reiter button { padding: .45rem 0; border-radius: 0; background: none; font-size: .9rem; font-weight: 400; color: #31333f; border-bottom: 2px solid transparent; }
body.ansicht-alt .reiter button:hover { background: none; color: #ff4b4b; }
body.ansicht-alt .reiter button.aktiv { background: none; color: #ff4b4b; border-bottom-color: #ff4b4b; font-weight: 400; }
body.ansicht-alt .reiter button span:not([data-symbol]) { display: inline; }

body.ansicht-alt .inhalt { max-width: none; padding: 1.2rem 2.5rem 3rem; }
body.ansicht-alt .karte, body.ansicht-alt .kennzahl, body.ansicht-alt .tabelle-huelle, body.ansicht-alt .listen-eintrag, body.ansicht-alt .bild-karte { box-shadow: none; }
body.ansicht-alt .karte, body.ansicht-alt .tabelle-huelle, body.ansicht-alt .listen-eintrag { border-radius: 8px; border-color: #e6e9ef; }
body.ansicht-alt .eingabe { background: #f0f2f6; border-color: transparent; border-radius: 8px; }
body.ansicht-alt .knopf { border-radius: 8px; font-weight: 400; }
body.ansicht-alt .abschnitt-titel { font-weight: 600; }
body.ansicht-alt .abschnitt-titel.gross { font-size: 1.45rem; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid #e6e9ef; }
body.ansicht-alt .ansicht > .abschnitt-titel.gross:first-child { margin-top: .3rem; padding-top: 0; border-top: 0; }

/* Tageseingabe */
body.ansicht-alt .datum-leiste { display: block; margin-bottom: .6rem; }
body.ansicht-alt .datum-leiste .knopf { display: none; }
body.ansicht-alt .datum-feld { text-align: left; font-weight: 400; }
/* alte Ansicht: vom Tageskopf bleibt nur das Datumsfeld (Titel und Summe ausgeblendet, wie in der ersten Fassung) */
body.ansicht-alt .tag-kopf { display: block; margin: 0; }
body.ansicht-alt .tag-kopf .kennzahl, body.ansicht-alt .datum-anzeige { display: none; }
body.ansicht-alt .datum-wahl .datum-feld { position: static; opacity: 1; pointer-events: auto; }
body.ansicht-alt #tag-formular { border: 0; padding: 0; background: none; }
body.ansicht-alt #tag-formular .formular-spalten { display: block; }
body.ansicht-alt #tag-formular .formular-spalten > div + div { padding-left: 0; border-left: 0; margin-top: 0; }
/* alte Ansicht ohne farbige Felder */
body.ansicht-alt #tag-formular .formular-spalten > div { display: block; }
body.ansicht-alt .gruppe { padding: 0; border: 0; border-radius: 0; background: none; }
body.ansicht-alt .gruppe h3::before { display: none; }
body.ansicht-alt #tag-formular .gruppe h3 { display: block; color: inherit; }
body.ansicht-alt #tag-formular h3, body.ansicht-alt #tag-formular .formular-spalten > div > h3:first-child { margin: 1.6rem 0 .9rem; padding-top: 1.6rem; border-top: 1px solid #e6e9ef; font-size: 1.45rem; font-weight: 600; }
body.ansicht-alt #feld-gruppe-sonstiges, body.ansicht-alt #feld-gruppe-weitere { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.ansicht-alt .raster { gap: .9rem 1rem; }
body.ansicht-alt .zahl-zeile { height: 40px; background: #f0f2f6; border-color: transparent; border-radius: 8px; }
body.ansicht-alt .zahl-zeile.geaendert, body.ansicht-alt #tag-formular .zahl-zeile.geaendert { background: #e8f0fe; border-color: #93c5fd; }
body.ansicht-alt .zahl input { font-weight: 400; }
body.ansicht-alt .zahl button { width: 32px; border-left: 0; }
body.ansicht-alt .speichern-knopf { margin-top: 1.8rem !important; min-height: 40px; border-color: #d5d8df; }
body.ansicht-alt .speichern-knopf.offen { font-weight: 600; animation: none; }

/* Übersicht */
body.ansicht-alt .kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.ansicht-alt .kennzahl { border: 0; padding: 0; background: none; }
body.ansicht-alt .kennzahl-wert { font-size: 1.9rem; font-weight: 400; }
body.ansicht-alt th { background: #fafafa; font-weight: 400; color: #6b6f7b; }
body.ansicht-alt .fuss { border-top-color: #e6e9ef; }

@media (max-width: 720px) {
  body.ansicht-alt .kopf-innen { padding: 1.2rem 16px 0; grid-template-columns: 1fr auto; grid-template-areas: "marke abmelden" "wahl wahl" "reiter reiter"; }
  body.ansicht-alt .marke-alt { font-size: 1.5rem; white-space: normal; }
  body.ansicht-alt .inhalt { padding: 1rem 16px 3rem; }
  body.ansicht-alt #feld-gruppe-sonstiges, body.ansicht-alt #feld-gruppe-weitere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ansicht-alt .kennzahlen { grid-template-columns: 1fr; }
  /* alle fünf Menüpunkte sichtbar halten: bei Platzmangel umbrechen statt seitlich wegschieben */
  body.ansicht-alt .reiter { flex-wrap: wrap; overflow: visible; gap: .1rem .9rem; }
}