/* AP-1: bewusst schlank, ohne Framework. Responsiv und kontraststark (E5). */
:root {
  color-scheme: light dark;
  --fg: #16181d;
  --fg-leise: #5b6270;
  --bg: #fbfbfc;
  --flaeche: #ffffff;
  --linie: #b9bec9;
  --akzent: #1f6f5c;
  --knopf-text: #ffffff;
  /*
    EINE Bedienhöhe für Felder UND Knöpfe (UX-0724-b).

    Vorher hatte jedes Bedienelement seine Höhe als Nebenprodukt aus Zeilenhöhe
    + Polster + Rahmen — Ergebnis: drei „Speichern"-Knöpfe in drei Höhen (45/47/48
    px), weil `.zeile` ohne `align-items` auf `stretch` steht und ein Knopf die
    Höhe seines größten Nachbarn erbt. `min-height` statt `height`: bei 200 %
    Zoom darf der Inhalt die Box wachsen lassen, statt abgeschnitten zu werden.
    2,75rem = 44px trifft WCAG 2.5.5 / Apple-HIG und liegt mitten in den alten
    Werten — es verschiebt fast nichts, macht sie nur gleich.
  */
  --bedienhoehe: 2.75rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #eceef2;
    --fg-leise: #a2a9b8;
    --bg: #14161a;
    --flaeche: #1c1f25;
    --linie: #4a515d;
    --akzent: #4bbf9f;
    /* Dunkler Text auf dem hellen Akzentgrün: weiß darauf sind nur ~2,3:1 und
       damit unter WCAG AA (4,5:1) — ausgerechnet am meistgeklickten Element. */
    --knopf-text: #10241d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.5rem 1rem 3rem;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fg);
  background: var(--bg);
}

header, main { max-width: 40rem; margin: 0 auto; }

h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }
.claim { margin: 0.25rem 0 1.75rem; color: var(--fg-leise); }

.kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.abschnitt-kopf h2 { margin: 0; }

section {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.events { list-style: none; margin: 0; padding: 0; }
.event {
  display: grid;
  /* Mittlere Spalte waechst mit: Seit der C4-Kennzeichnung (UX-0721-5) steht
     in dieser Zelle nicht nur die Bezeichnung, sondern ggf. auch der Marker.
     Bei festen 7rem bräche er um und säße unter dem Wort statt daneben. */
  grid-template-columns: 4.5rem minmax(7rem, max-content) 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linie);
}
.event:last-child { border-bottom: 0; }
.zeit { font-variant-numeric: tabular-nums; font-weight: 600; }
.art { color: var(--akzent); font-weight: 600; }
.roh { color: var(--fg-leise); overflow-wrap: anywhere; }

/* C6: Bearbeiten/Stornieren je Eintrag. Eigene Zeile über die volle Breite —
   die Werkzeuge stehen unter der Zeile, nicht gedrängt daneben. Dezent, damit
   sie die Liste nicht dominieren; sichtbar genug, um gefunden zu werden. */
.event-werkzeuge {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.event-werkzeuge button {
  background: none;
  border: 1px solid var(--linie);
  color: var(--fg-leise);
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0.4rem;
  cursor: pointer;
}
.event-werkzeuge button:hover { color: var(--fg); border-color: var(--akzent); }
.event-stornieren:hover { color: var(--warnung, #b23); border-color: var(--warnung, #b23); }

/* C6: Nachtrag-/Bearbeiten-Formular. Felder nebeneinander, auf Schmal umbrechend. */
#korrektur-bereich { margin-top: 1.2rem; padding-top: 0.8rem; border-top: 1px solid var(--linie); }
.korrektur { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: end; }
.korrektur .feld { display: flex; flex-direction: column; gap: 0.25rem; }
.korrektur label { font-size: 0.85rem; color: var(--fg-leise); }
.korrektur-knoepfe { display: flex; gap: 0.5rem; }

/* Der Dev-Hinweis muss auffallen, ohne die Seite zu übernehmen: Wer ihn sieht,
   schaut auf Testdaten und eine passwortlose Session. */
.dev-banner {
  margin: 0 0 1.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--akzent);
  border-left-width: 4px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--fg);
}

.leer, .hilfe, .status { color: var(--fg-leise); margin: 0.5rem 0 0; }
.hilfe { font-size: 0.9rem; margin-bottom: 0.9rem; }

label { display: block; font-size: 0.9rem; color: var(--fg-leise); margin-bottom: 0.35rem; }
/*
  `align-items: center` (UX-0724-b): Ohne diese Zeile steht `.zeile` auf dem
  Default `stretch` — ein Label neben einem Feld wurde auf Feldhöhe gedehnt und
  klebte oben, während der Feldinhalt mittig saß. Zentriert stehen Beschriftung,
  Feld und Knopf auf einer Linie.
*/
.zeile { display: flex; gap: 0.5rem; align-items: center; }

/*
  Ein Feld MIT übergestellter Beschriftung (`<label class="feld"><span>…</span>
  <input></label>`) — bis UX-0724-a hatte `.feld` gar keine Regel und erbte als
  Block-Label die 0,9rem des Label-Stils an sein Eingabefeld weiter (das neue
  Nummernfeld war dadurch als einziges 14,4px statt 16px). Als Spalte gestellt
  steht die Beschriftung über dem Feld, und das Feld füllt die Zeilenbreite.
*/
.feld { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.feld > span { font-size: 0.9rem; color: var(--fg-leise); }

/* Eine Zeile aus zwei Knöpfen ohne schrumpfendes Eingabefeld daneben (anders
   als `.zeile` mit Eingabefeld+Knopf, wo das Feld selbst schrumpft) — ohne
   Umbruch überliefe das schmalste Layout (360 px, TC-E5.x) bei zwei längeren
   Beschriftungen wie "Ich habe geantwortet, weiter" + "Andere Nummer". */
.zeile-knopfe { flex-wrap: wrap; }

/*
  NUR Textfelder, nicht Radio/Checkbox (UX-0724-b): `min-height: 44px` auf einem
  Radio-Knopf bläht die Pille auf, in der er steckt (die Rundungs- und
  Ansicht-Optionen sind Labels mit einem Radio darin). Die Auswahlknöpfe behalten
  ihre native Größe; nur was man beschriftet oder anklickt wie ein Feld, bekommt
  die einheitliche Höhe.
*/
input:not([type="radio"]):not([type="checkbox"]) {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--bedienhoehe);
  padding: 0.5rem 0.7rem;
  /*
    Größe EXPLIZIT, nicht `font: inherit` (UX-0724-a/c): Ein in ein `.feld`-Label
    geschachteltes Feld erbte sonst dessen 0,9rem. 1rem = 16px behebt nebenbei
    einen echten Handy-Fehler — iOS-Safari zoomt beim Antippen eines Feldes unter
    16px hinein und verschiebt das Layout.
  */
  font-family: inherit;
  font-size: 1rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: 8px;
}
input:focus-visible, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

button {
  min-height: var(--bedienhoehe);
  padding: 0.5rem 1.1rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--knopf-text);
  background: var(--akzent);
  /*
    Rahmen `transparent` statt `0` (UX-0724-b): Der Zweitknopf (`.sekundaer`)
    trägt einen 1px-Rahmen, der Hauptknopf hatte `border: 0` — 2px Höhenunterschied
    bei jedem Knopfpaar. Ein durchsichtiger Rahmen gleicht die Box an, ohne
    sichtbar zu sein.
  */
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button[disabled] { opacity: 0.6; cursor: progress; }

/* Zweitrangige Knöpfe (Abmelden, Wochen-Navigation): sichtbar, aber nicht so
   laut wie der Haupt-Akzent — sonst konkurriert jede Ansicht mit sich selbst. */
button.sekundaer {
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--linie);
}
button.sekundaer:hover { filter: none; background: var(--bg); }

/* Ein Knopf, der wie ein Link aussieht ("andere Adresse verwenden") — bleibt
   aber ein <button>, damit Tastatur/Screenreader ihn als Aktion erkennen. */
button.link-knopf {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.3rem 0;
  font-weight: 500;
  color: var(--akzent);
  background: none;
  text-decoration: underline;
}
button.link-knopf:hover { filter: none; text-decoration: none; }

.bot { margin: 0.9rem 0 0; padding: 0.7rem 0.8rem; background: var(--bg); border-radius: 8px; min-height: 1.5rem; }
.bot:empty { display: none; }

@media (max-width: 30rem) {
  .event { grid-template-columns: 4rem 1fr; }
  .roh { grid-column: 1 / -1; }
}

/* Tag/Woche-Umschalter: ein <fieldset> mit Radios, aber als Segmented Control
   gezeichnet. Radios statt Tabs, weil sie ohne eigenes ARIA-Rollenspiel schon
   vollständig tastaturbedienbar sind (Pfeiltasten, Space) — ein Tab-Pattern
   nachzubauen hätte nur Fehlerfläche hinzugefügt, ohne mehr zu können. */
.ansicht-umschalter {
  display: inline-flex;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
  padding: 0.25rem;
  border: 1px solid var(--linie);
  border-radius: 10px;
}
.ansicht-umschalter legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ansicht-option {
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.ansicht-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ansicht-option span {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 7px;
  color: var(--fg-leise);
  /*
    „5 Min." bleibt auf EINER Zeile (UX-0724-b): In der schmalen Pille brach der
    Text sonst auf zwei Zeilen um und machte die Pille doppelt so hoch wie „Aus"
    daneben. Erst durch das neue `align-items: center` fiel es auf — vorher zog
    `stretch` alle Pillen gemeinsam auf die Höhe der umgebrochenen, also gleich
    hoch und gleich falsch.
  */
  white-space: nowrap;
}
.ansicht-option input:checked + span {
  color: var(--knopf-text);
  background: var(--akzent);
  font-weight: 600;
}
.ansicht-option input:focus-visible + span {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

.woche-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.woche-nav button {
  padding: 0.5rem 0.8rem;
  font-weight: 500;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--linie);
}
.woche-nav button:hover { filter: none; background: var(--bg); }

/* Kennzahlen der Woche als <dl>: Bezeichnung/Wert-Paare, die auch ohne
   Sehsinn eindeutig zusammengehören — kein reines Layout aus <div>s. */
.kennzahlen {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem;
  margin: 0;
}
.kennzahlen dt { color: var(--fg-leise); }
.kennzahlen dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.hinweis-vorlaeufig {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--linie);
  border-left-width: 4px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--fg);
}

.woche-tage {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.woche-tage > li + li { margin-top: 0.5rem; }

.wochentag {
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 0 0.1rem;
}
.wochentag[open] { padding-bottom: 0.4rem; }
.wochentag summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  list-style: none;
}
/* Chrome zeichnet zusätzlich zum ::marker-Ersatz unten ein natives Dreieck;
   das wird hier vereinheitlicht, damit beide Engines gleich aussehen. */
.wochentag summary::-webkit-details-marker { display: none; }
.wochentag summary::marker { content: ""; }
.wochentag summary::before {
  content: "▸";
  color: var(--fg-leise);
  margin-right: 0.6rem;
}
.wochentag[open] summary::before { content: "▾"; }
.wochentag summary:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: -2px;
}
.tag-datum { font-weight: 600; }
.tag-ist { font-variant-numeric: tabular-nums; color: var(--fg-leise); }
.wochentag .events { padding: 0 0.8rem 0.4rem; }
.wochentag .leer { padding: 0 0.8rem 0.6rem; margin: 0; }
/* In der Woche gibt es keinen Rohtext (der Kontrakt liefert ihn hier nicht) —
   zwei Spalten statt drei. */
.wochentag .event { grid-template-columns: 4.5rem 1fr; }

/* Kennzeichnung auffälliger Buchungen (C4, UX-0721-5).
   Bewusst kein Rot und keine Warnfarbe: Die Buchung ist gültig, nur
   ungewöhnlich. Rot hieße "Fehler" und widerspräche "warnen statt
   blockieren" — die Person hat recht, bis sie widerspricht. */
.event .marke {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--linie);
  color: var(--fg-leise);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Profil / Stammdaten (B1, DOM-0722-1)
   -------------------------------------------------------------------------- */

/* Jede Einstellung als eigener Block — ohne die Trennung liest sich die Seite
   als eine lange Liste, in der niemand findet, wonach er sucht. */
.profil-block {
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 1rem;
  margin: 0 0 1.25rem;
  background: var(--flaeche);
}
.profil-block legend {
  font-weight: 600;
  padding: 0 0.4rem;
}
.profil-block .zeile { margin-bottom: 0.6rem; }
.profil-block .zeile:last-child { margin-bottom: 0; }

/* Der Verlauf der Soll-Regeln: eine vorgemerkte Änderung, die man nicht sieht,
   ist von einer verlorenen nicht zu unterscheiden. */
.verlauf {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--fg-leise);
}
.verlauf li {
  padding: 0.35rem 0;
  border-top: 1px solid var(--linie);
}

.identitaeten {
  list-style: none;
  margin: 0;
  padding: 0;
}
.identitaeten li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--linie);
  flex-wrap: wrap;
}
.identitaeten li:first-child { border-top: none; }

/* Das Deaktivieren bekommt einen eigenen Rahmen, aber KEINE Warnfarbe auf dem
   Knopf: Die Handlung ist legitim und umkehrbar-genug (die Zeiten bleiben) —
   ein roter Alarmknopf wäre Dramatik, die der Sache nicht entspricht. */
.profil-block.gefahr { border-color: var(--fg-leise); }

/* Statuszeile im Fehlerfall. Nicht allein über Farbe erkennbar (E5/WCAG): Der
   Text selbst sagt bereits, was schiefging. */
.status.fehler { color: var(--fg); font-weight: 600; }

.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Verlauf der Soll-Regeln: was gilt, was kommt, was galt (B1). */
.verlauf li.gilt-jetzt { color: var(--fg); font-weight: 500; }
/* Vorgemerkt bewusst OHNE Warnfarbe — eine geplante Aenderung ist kein
   Problemzustand, sie ist der Normalfall beim Wechsel der Arbeitszeit. */
.verlauf li.vorgemerkt { color: var(--fg); }
.verlauf li.vorgemerkt strong::before { content: "→ "; color: var(--akzent); }