/* Schichtwunder 3.0 - die Oberflaeche. Gestaltung nach Website-Entwurf E
   (Schichtwunder-Website quelle/schichtwunder-e.html): Tokens, Schrift, Knoepfe,
   Glas und Tab-Leiste von dort. Seit 02.11.2026 (Davids Wahl "Volles Liquid
   Glass"): ein ruhiger Farbschimmer aus den Schichtfarben liegt hinter der
   angemeldeten Oberflaeche, darauf Glas mit Glanzkante auf Leisten, Karten,
   Knoepfen, Feldern und Dialogen; die Seitenleiste klappt zur Symbol-Schiene.
   Keine Bibliothek, keine Scroll-Effekte. CSP: style-src und font-src 'self' -
   kein Inline-Stil, keine fremde Schrift. Kontraste nach WCAG 2.2 AA, gemessen
   am Token (Kommentar), auf Glas am schlimmsten Hintergrund. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;           /* Achse wght 200-800 */
  font-stretch: 75% 100%;         /* Achse wdth - sonst greift font-stretch nicht */
  font-display: swap;
  src: url("fonts/bricolage-latin.woff2") format("woff2");   /* OFL 1.1, fonts/OFL.txt */
}

/* ------------------------------------------------------------ Tokens (E) */

:root {
  color-scheme: light;
  --ground: #EEF2F7;
  --surface: #FFFFFF;
  --surface-2: #E4E9F1;
  --ink: #0D1420;                 /* 16,4:1 auf ground */
  --ink-2: #445166;               /* 7,1:1 auf ground, 6,6:1 auf surface-2 */
  --ink-3: #56647C;               /* 5,3:1 auf ground - nie auf Glas ueber Farbe */
  --linie: rgb(13 20 32 / 0.1);
  --spur: 1px solid var(--linie);
  --fokus: #3E4FB8;               /* 6,2:1 auf ground */

  --frueh: #E39A2B;
  --spaet: #2E9E6B;
  --nacht: #4B5FC4;
  --t-frueh: #B0600C;             /* Schrift in Schichtfarbe: 4,6:1 auf surface */
  --t-spaet: #1C7A50;             /* 5,3:1 auf surface */
  --t-nacht: #3E4FB8;             /* 7,0:1 auf surface */

  /* Neu (nicht aus E): Zustaende mit geprueftem Kontrast */
  --fehler: #B42318;              /* 6,6:1 auf surface, 5,4:1 auf surface-2 */
  --fehler-flaeche: color-mix(in srgb, var(--fehler) 9%, var(--surface));
  --warnung-text: #9A5208;        /* 5,2:1 auf ground, 5,9:1 auf surface */
  --warnung-flaeche: color-mix(in srgb, var(--frueh) 16%, var(--surface));
  --gut-text: var(--t-spaet);
  --gut-flaeche: color-mix(in srgb, var(--spaet) 13%, var(--surface));
  --feld-rand: var(--ink-3);      /* 6,0:1 auf surface - WCAG 1.4.11 */

  --radius: 18px;
  --radius-gross: 28px;
  --radius-feld: 12px;
  --schatten: 0 24px 60px -30px rgb(18 30 55 / 0.45), 0 2px 8px -3px rgb(18 30 55 / 0.14);

  --glas-fuell: rgb(255 255 255 / 0.52);
  --glas-dicht: rgb(255 255 255 / 0.86);
  --glas-rand: rgb(255 255 255 / 0.78);
  --glas-licht: rgb(255 255 255 / 0.98);     /* Glanzkante oben links */
  --glas-unten: rgb(255 255 255 / 0.3);
  --glas-schatten: 0 22px 46px -24px rgb(18 30 55 / 0.42), 0 2px 6px -2px rgb(18 30 55 / 0.1);
  --glas-blur: 22px;
  --glas-satt: 190%;
  --glas-filter: blur(var(--glas-blur)) saturate(var(--glas-satt));   /* ein Schalter fuer alle Glasflaechen (Barrieren: none) */
  --glas-leiste: rgb(255 255 255 / 0.46);     /* Seitenleiste */
  --glas-karte: rgb(255 255 255 / 0.55);      /* Karten: --ink-2 bleibt >= 6:1 */
  --glas-zelle: color-mix(in srgb, var(--surface) 93%, transparent);   /* klebende Plan-Koepfe */
  --glas-feld: rgb(255 255 255 / 0.66);
  --glas-knopf: rgb(255 255 255 / 0.5);
  --glas-licht-2: rgb(255 255 255 / 0.45);
  --glas-glanz: rgb(255 255 255 / 0.32);      /* Glanzflaeche (Verlauf oben) */
  --glas-innen: rgb(255 255 255 / 0.42);      /* inneres Licht */
  --glas-saum: color-mix(in srgb, var(--nacht) 38%, transparent);     /* farbiger Rand unten rechts */
  --glas-saum-2: color-mix(in srgb, var(--frueh) 30%, transparent);
  --glas-linse: linear-gradient(180deg, rgb(255 255 255 / 0.96), rgb(255 255 255 / 0.74));
  --glas-linse-schatten: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / 0.6),
    inset 0 -9px 14px -10px color-mix(in srgb, var(--nacht) 55%, transparent),
    0 8px 18px -10px rgb(18 30 55 / 0.5), 0 1px 2px rgb(18 30 55 / 0.12);
  --glas-mulde: inset 0 1px 3px rgb(18 30 55 / 0.14), inset 0 -1px 0 rgb(255 255 255 / 0.6);
  --glas-hover: rgb(255 255 255 / 0.42);
  --schimmer-a: 0.5; --schimmer-b: 0.36; --schimmer-c: 0.4; --schimmer-d: 0.16;   /* Anteil der Schichtfarbe im Farbschimmer */

  --tag-a: 0.5;
  --tag-b: 0.34;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-schub: cubic-bezier(0.32, 0.72, 0, 1);

  --tab-hoehe: max(50px, 3.125rem);   /* 50 px bei 16 px Schrift, waechst mit Text 200 % */
  /* Bricht eine Tab-Beschriftung bei grosser Schrift auf mehrere Zeilen um,
     wird die Leiste hoeher als --tab-hoehe (Firefox 320 px, 200 %: bis 5
     Zeilen). Reserve dafuer: 0 bei 16 px Schrift, 96 px bei 200 % (NM-1,
     WCAG 2.4.11; 80 px liessen in Firefox 320 px den Fokus zu 26 % verdeckt). */
  --tab-zusatz: max(0px, 6rem - 96px);
  /* Kopfleiste unter 900 px: oben Safe-Area (mind. 0.5rem), der runde
     Knopf (44 px), unten 0.5rem und die Linie. */
  --kopf-hoehe: calc(max(0.5rem, env(safe-area-inset-top)) + 44px + 0.5rem + 1px);
  --seitenleiste: 16rem;
  --seitenleiste-zu: 5.5rem;                 /* 88 px: Schiene 64 px + 2 x 12 px Abstand */
  --leiste-rand: 12px;
  --inhalt-max: 72rem;                       /* eingeklappt 82.5rem = 72 + 16 - 5.5 */
  --liste-spalten: auto-fill;                /* eingeklappt auto-fit: leere dritte Spalte faellt weg */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #080D16;
    --surface: #111A27;
    --surface-2: #172234;
    --ink: #EBF0F7;
    --ink-2: #A9B5C6;
    --ink-3: #8C99AE;             /* 6,1:1 auf surface */
    --linie: rgb(255 255 255 / 0.09);
    --fokus: #9AA8FF;
    --frueh: #F0A845;
    --spaet: #3DB67E;
    --nacht: #6C7FE8;
    --t-frueh: #F4B45A;
    --t-spaet: #4CC98E;
    --t-nacht: #9AA8FF;
    --fehler: #FF8A7A;            /* 7,6:1 auf surface */
    --fehler-flaeche: color-mix(in srgb, var(--fehler) 14%, var(--surface));
    --warnung-text: var(--t-frueh);
    --warnung-flaeche: color-mix(in srgb, var(--frueh) 14%, var(--surface));
    --gut-flaeche: color-mix(in srgb, var(--spaet) 14%, var(--surface));
    --schatten: 0 24px 60px -30px rgb(0 0 0 / 0.85), 0 2px 8px -3px rgb(0 0 0 / 0.5);
    --glas-fuell: rgb(18 26 40 / 0.55);
    --glas-dicht: rgb(17 26 39 / 0.9);
    --glas-rand: rgb(255 255 255 / 0.15);
    --glas-licht: rgb(255 255 255 / 0.34);
    --glas-unten: rgb(255 255 255 / 0.05);
    --glas-schatten: 0 24px 50px -24px rgb(0 0 0 / 0.85), 0 2px 8px -3px rgb(0 0 0 / 0.5);
    --glas-leiste: rgb(16 24 38 / 0.5);
    --glas-karte: rgb(16 24 38 / 0.58);
    --glas-feld: rgb(6 10 18 / 0.42);
    --glas-knopf: rgb(255 255 255 / 0.07);
    --glas-licht-2: rgb(255 255 255 / 0.1);
    --glas-glanz: rgb(255 255 255 / 0.06);
    --glas-innen: rgb(255 255 255 / 0.05);
    --glas-saum: color-mix(in srgb, var(--nacht) 62%, transparent);
    --glas-saum-2: color-mix(in srgb, var(--frueh) 40%, transparent);
    /* dunkler Grund in der Linse: --t-nacht darauf >= 4,5:1 auch ueber dem Amber-Fleck (gemessen, Variante 2) */
    --glas-linse: linear-gradient(180deg, rgb(255 255 255 / 0.17), rgb(255 255 255 / 0.05)) rgb(8 13 24 / 0.55);
    --glas-linse-schatten: inset 0 1px 0 rgb(255 255 255 / 0.38), inset 0 0 0 1px rgb(255 255 255 / 0.12),
      inset 0 -9px 16px -10px color-mix(in srgb, var(--nacht) 80%, transparent),
      0 8px 20px -10px rgb(0 0 0 / 0.75);
    --glas-mulde: inset 0 1px 3px rgb(0 0 0 / 0.45), inset 0 -1px 0 rgb(255 255 255 / 0.07);
    --glas-hover: rgb(255 255 255 / 0.07);
    --schimmer-a: 0.42; --schimmer-b: 0.4; --schimmer-c: 0.6; --schimmer-d: 0.2;
    --tag-a: 0.3;
    --tag-b: 0.24;
  }
}

/* ------------------------------------------------------------ Grundlagen */

/* Uebernommen aus Schichtplan 2.0 @390ca8a: app/static/style.css - eine
   eigene display-Angabe schlaegt sonst [hidden], und die versteckte
   Arbeitsflaeche stand offen unter der Anmeldemaske. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html {
  accent-color: var(--t-nacht);   /* nicht --frueh: Amber hat auf Weiss nur 2,35:1 */
  scrollbar-color: var(--ink-3) transparent;
  /* Platz der Bildlaufleiste immer frei halten (02.11.2026): beim Reiterwechsel ist die Seite kurz
     leer (start.js darstellen), die Leiste verschwand und Tab-Leiste/Inhalt zuckten um 15 px (Windows,
     schmales Fenster). Ueberlagernde Leisten (Android, macOS) betrifft das nicht. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--ink);
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  overflow-x: clip;
}

::selection { background: color-mix(in srgb, var(--frueh) 35%, transparent); color: var(--ink); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
p, li { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

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

.i {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.sprunglink {
  position: fixed; left: max(1rem, env(safe-area-inset-left)); top: 1rem; z-index: 90;
  padding: 0.7rem 1.1rem; border-radius: 999px;
  background: var(--ink); color: var(--ground); font-weight: 650; text-decoration: none;
  translate: 0 -200%;
}
.sprunglink:focus-visible { translate: none; }

/* Seitentitel: Anzeigeschrift wie der Blatt-Titel der Website, fuer eine
   Arbeitsflaeche kleiner. */
.seitentitel {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 800;
  font-stretch: 88%;
  line-height: 1.05;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;   /* 320 px bei Text 200 %: umbrechen statt seitlich rollen (L1, WCAG 1.4.10) */
  hyphens: auto;
}
.abschnitt-titel { font-size: 1.2rem; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; }
.unterzeile { color: var(--ink-2); margin-top: 0.4rem; }
.kleingedruckt { color: var(--ink-2); font-size: 0.9rem; line-height: 1.5; }

/* Logo (E): drei Balken aus CSS, Farben folgen dem Farbschema. */
.logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 800; font-stretch: 90%; font-size: 1.18rem; letter-spacing: -0.03em;
  text-decoration: none; white-space: nowrap;
}
.logo-mark { display: grid; grid-template-rows: repeat(3, 6px); gap: 2px; }
.logo-mark i { display: block; width: 18px; border-radius: 2px; background: var(--frueh); }
.logo-mark i:nth-child(2) { background: var(--spaet); }
.logo-mark i:nth-child(3) { background: var(--nacht); }

/* ---------------------------------------------------------------- Knoepfe */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 44px; padding: 0.7rem 1.3rem;
  border-radius: 999px; border: 1px solid transparent;
  background: var(--ink); color: var(--ground);      /* 16,4:1 */
  font-weight: 650; font-size: 0.97rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center; overflow-wrap: anywhere;   /* bricht um: bei 200 % Text rollt keine Seite (WCAG 1.4.4, 1.4.10) */
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 10px 24px -12px rgb(13 20 32 / 0.55);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
}
.knopf:active { transform: scale(0.97); }
.knopf.gross { min-height: 54px; padding: 0.95rem 1.7rem; font-size: 1.05rem; }
.knopf.breit { width: 100%; }
.knopf.zweit {
  color: var(--ink); border-color: color-mix(in srgb, var(--ink) 20%, transparent);
  background: linear-gradient(180deg, var(--glas-glanz), transparent 70%), var(--glas-knopf);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  box-shadow: inset 1px 1px 0 var(--glas-licht), inset -1px -1px 0 var(--glas-saum), inset 0 0 12px var(--glas-innen), 0 6px 16px -10px rgb(18 30 55 / 0.35);
}
.knopf.gefahr { background: var(--fehler); color: var(--surface); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.knopf .i { width: 1.1em; height: 1.1em; }

.rund {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%; padding: 0;
  background: linear-gradient(180deg, var(--glas-glanz), transparent 70%), var(--glas-knopf);
  box-shadow: inset 0 0 0 1px var(--glas-rand), inset 1px 1px 0 var(--glas-licht), inset -1px -1px 0 var(--glas-saum), 0 6px 14px -9px rgb(18 30 55 / 0.4);
  color: var(--ink); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.rund:active { transform: scale(0.9); }
.rund .i { width: 1.25rem; height: 1.25rem; }

/* Ein Link, der wie Text aussieht, aber gross genug zum Treffen ist. */
.textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); font-weight: 600; background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer;
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.4rem; }

.knopf:focus-visible, .rund:focus-visible, .tab-leiste a:focus-visible,
.seitenleiste a:focus-visible, .leiste-um:focus-visible, .sprunglink:focus-visible { outline-offset: 2px; border-radius: 999px; }

@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background-color: color-mix(in srgb, var(--ink) 86%, var(--ground)); }
  .knopf.zweit:hover { background-color: var(--surface-2); }
  .knopf.gefahr:hover { background-color: color-mix(in srgb, var(--fehler) 88%, var(--ink)); }
  /* Gesperrt bleibt jede Variante bei ihrem Grund - sonst wird der
     Zweitknopf zur Pille in Schriftfarbe. */
  .knopf:disabled:hover { background-color: var(--ink); }
  .knopf.zweit:disabled:hover { background-color: var(--surface); }
  .knopf.gefahr:disabled:hover { background-color: var(--fehler); }
  .rund:hover { background: color-mix(in srgb, var(--surface) 85%, transparent); }
}

/* ----------------------------------------------------------------- Felder */

.formular { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin-top: 1.4rem; }
.feld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }   /* ein Datumsfeld weitet die Spalte sonst ueber den Schirm */
/* Lange Namen (Schicht, Position) und lange Woerter brechen um, statt die
   Spalte ueber den Schirm zu weiten (WCAG 1.4.10, 320 px und Text 200 %). */
.feld > label, .feld > .feld-titel, .feld-hilfe, .haken-zeile > span, .kleingedruckt { overflow-wrap: anywhere; }
.feld > label, .feld > .feld-titel { font-weight: 600; }
.feld-pflicht { font-weight: 400; color: var(--ink-2); }   /* "(Pflicht)" an der Beschriftung: leiser als der Name, aber Text - nie nur Farbe (WCAG 3.3.2, 1.4.1) */
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
  border: 1px solid var(--feld-rand); border-radius: var(--radius-feld);
  background: var(--glas-feld); color: var(--ink); box-shadow: var(--glas-mulde);   /* eingelassenes Glas; Rand bleibt --feld-rand (3:1, WCAG 1.4.11) */
  font-size: max(16px, 1rem);          /* unter 16 px zoomt iOS beim Fokus */
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: 2px solid var(--fokus); outline-offset: 1px; border-color: var(--fokus);
}
/* Auswahlfeld mit eigenem Pfeil (02.11.2026): Chrome unter Windows zeichnete den Knopf der
   Systemliste beim Ueberfahren als hellen Block (David, Dunkelmodus). Das Dreieck aus zwei
   Verlaeufen in --ink-2 (7:1 auf surface, WCAG 1.4.11) folgt dem Farbschema und braucht keine
   Bilddatei; im Kontrastmodus fallen Verlaeufe weg, dort zeichnet das System wieder (unten). */
.feld select {
  -webkit-appearance: none; appearance: none;
  padding-right: 2.6rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 1.3rem center, right 0.9rem center;
  background-size: 0.4rem 0.4rem;
  background-repeat: no-repeat;
}
.feld [aria-invalid="true"] { border-color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler), var(--glas-mulde); }
.feld small, .feld .feld-hilfe { color: var(--ink-2); font-size: 0.88rem; line-height: 1.45; }

/* Passwort mit Auge: der Knopf im Feld, 44 px gross. */
.feld-auge { position: relative; display: block; }
.feld-auge input { padding-right: 3.4rem; }
.knopf-auge {
  position: absolute; right: 2px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer;
}
.knopf-auge svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.knopf-auge[aria-pressed="false"] .auge-strich { display: none; }
@media (hover: hover) and (pointer: fine) { .knopf-auge:hover { color: var(--ink); background: var(--surface-2); } }

.code-feld {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.35rem !important; letter-spacing: 0.16em; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.haken-zeile { display: flex; gap: 0.7rem; align-items: flex-start; min-height: 44px; padding-block: 0.3rem; cursor: pointer; }
.haken-zeile input { width: 1.3rem; height: 1.3rem; margin: 0.18rem 0 0; flex: none; }
.haken-gruppe { display: grid; gap: 0.2rem; border: 0; padding: 0; margin: 0; }
.haken-gruppe legend { font-weight: 600; padding: 0; margin-bottom: 0.35rem; }

/* ----------------------------------------------------------- Meldungen */

/* Leer heisst unsichtbar: Meldungen kommen nur ueber textContent herein.
   role=status bleibt dabei im Barrierefreiheitsbaum (wie .visuell-versteckt,
   ohne Platz im Fluss): die live-Region steht schon, wenn der Text kommt -
   nur so sagen Vorleseprogramme ihn verlaesslich an (B24). role=alert
   wird auch aus display:none angesagt. */
.meldung:empty { display: none; }
.meldung[role="status"]:empty {
  display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.meldung {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.85rem 1rem; border-radius: var(--radius-feld);
  border: 1px solid color-mix(in srgb, var(--frueh) 60%, transparent);
  background: var(--warnung-flaeche); color: var(--ink);
  font-weight: 500; line-height: 1.45;
}
.meldung.fehler { border-color: var(--fehler); background: var(--fehler-flaeche); }
/* Das "!" ist Schmuck: leerer Alternativtext haelt es aus Name und Beschreibung
   (B7-1); Chrome 77, Firefox 128, Safari 17.4 kennen die Syntax. */
.meldung.fehler::before { content: "!" / ""; flex: none; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--fehler); color: var(--surface); font-weight: 800; font-size: 0.85rem; }
.meldung.gut { border-color: color-mix(in srgb, var(--spaet) 60%, transparent); background: var(--gut-flaeche); }

/* Datenschutz-Kurzhinweise an Ort und Stelle (S13b, F49) */
.kurzhinweis { color: var(--ink-2); font-size: 0.88rem; line-height: 1.5; }
.kurzhinweis a { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

/* ------------------------------------------------------------ Karten */

.karte {
  padding: 1.1rem 1.2rem; border: 1px solid var(--glas-rand); border-radius: 22px;   /* konzentrisch zur Leiste (28 px); nicht --radius, der gilt auch den Tasten der Uhr */
  background: linear-gradient(160deg, var(--glas-glanz), transparent 45%), var(--glas-karte);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  box-shadow: inset 1px 1px 0 var(--glas-licht), inset -1px -1px 0 var(--glas-saum), inset 0 0 26px var(--glas-innen), var(--glas-schatten);
}
.karte + .karte { margin-top: 1rem; }
.karte.haupt {
  background: linear-gradient(165deg, color-mix(in srgb, var(--frueh) 16%, transparent), transparent 58%), var(--glas-karte);
  box-shadow: inset 1px 1px 0 var(--glas-licht), inset -1px -1px 0 var(--glas-saum-2), inset 0 0 26px var(--glas-innen), var(--glas-schatten);
}
.leer-hinweis { color: var(--ink-2); max-width: 36rem; overflow-wrap: anywhere; }   /* lange Woerter brechen um: .huelle schneidet seitlich ab (320 px, 200 %) */

/* Marken: kurze Zustaende. Farbe traegt nie allein - der Text sagt es. */
.marke {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.65rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 650; line-height: 1.35; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.marke.laeuft { background: color-mix(in srgb, var(--nacht) 14%, var(--surface)); color: var(--t-nacht); }
.marke.gut { background: var(--gut-flaeche); color: var(--gut-text); }
.marke.warnung { background: var(--warnung-flaeche); color: var(--warnung-text); }
.marke.fehler { background: var(--fehler-flaeche); color: var(--fehler); }
.marke .i { width: 0.95em; height: 0.95em; stroke-width: 2.2; }

/* ------------------------------------------------------------- Glas (E) */

.glas {
  background: linear-gradient(180deg, var(--glas-glanz), transparent 60%), var(--glas-fuell);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-rand);
  box-shadow: inset 1px 1px 0 var(--glas-licht), inset -1px -1px 0 var(--glas-saum), inset 0 0 22px var(--glas-innen), var(--glas-schatten);
  isolation: isolate;
}

/* ------------------------------------------------ Ohne Anmeldung (Karte) */

.oeffentlich {
  position: relative; isolation: isolate;
  min-height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 1.2rem;
  grid-template-columns: minmax(0, 1fr);    /* sonst waechst die Spalte mit einem langen Wort ueber 320 px */
  padding: max(1.2rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
/* Tageslicht der Website, hier ruhig: ohne Scroll-Animation. */
.oeffentlich::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(36vmax 30vmax at 26% 22%, color-mix(in srgb, var(--frueh) calc(var(--tag-a) * 100%), transparent), transparent 72%),
    radial-gradient(34vmax 30vmax at 82% 36%, color-mix(in srgb, var(--spaet) calc(var(--tag-b) * 100%), transparent), transparent 72%),
    radial-gradient(38vmax 32vmax at 62% 86%, color-mix(in srgb, var(--nacht) calc(var(--tag-b) * 100%), transparent), transparent 72%);
}
.oeffentlich-kopf { width: min(28rem, 100%); padding-top: 0.4rem; }
/* Oben ausgerichtet, nicht mittig: die Karte waechst beim Nachladen nach
   unten, statt mit der Ueberschrift nach oben zu springen (CLS).
   overflow-wrap anywhere: lange zusammengesetzte Woerter brechen auch in
   Rastern um (break-word senkt die Mindestbreite nicht). */
.anmelde-karte {
  --glas-fuell: var(--glas-dicht);
  align-self: start;
  margin-top: clamp(0.5rem, 6vh, 4rem);
  width: min(28rem, 100%);
  padding: 1.8rem 1.5rem 1.6rem;
  border-radius: var(--radius-gross);
  overflow-wrap: anywhere;
}
.anmelde-karte.breit { width: min(40rem, 100%); }
.oeffentlich-fuss { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.4rem; font-size: 0.92rem; font-weight: 600; }   /* 320 px bei Text 200 % */
.oeffentlich-fuss a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }

/* ------------------------------------------------------------- Huelle */

/* viewport-fit=cover: seitlich rueckt die Seite selbst von Notch und
   Kamera ab (Telefon quer). */
.kopfleiste {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 0.75rem;
  min-height: var(--kopf-hoehe);
  padding: max(0.5rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) 0.5rem max(1rem, env(safe-area-inset-left));
  border-width: 0 0 1px; border-radius: 0;
}
.kopf-betrieb { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.seitenleiste { display: none; }

/* Die Seitenanimation (start.js darstellen) ragt sonst 18-24 px ueber den
   Rand: Android vergroessert dann den Layout-Viewport, die Tab-Leiste
   rutscht nach unten. clip am body wirkt nicht (geht auf den Viewport ueber),
   hidden machte .huelle zum Scroll-Container (sticky bricht). Im Druck nicht:
   ein breiter Plan wuerde abgeschnitten. */
.huelle { overflow-x: clip; }
@media print { .huelle { overflow-x: visible; } }

/* Farbschimmer (02.11.2026): ruhige Flecken der Schichtfarben hinter der angemeldeten
   Oberflaeche (Leitung und Geraet), fest im Fenster. Die Seite ohne Anmeldung hat ihr
   eigenes Tageslicht (.oeffentlich::before), die Stempeluhr bleibt einfarbig. Rechts weich
   auf --ground auslaufen: die Rinne der Bildlaufleiste (scrollbar-gutter: stable) malt
   Chromium nur in der Grundfarbe, sonst endete der Schimmer dort hart. */
.huelle { isolation: isolate; }
.huelle::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to left, var(--ground), transparent 6rem),
    radial-gradient(38vmax 34vmax at 2% 6%, color-mix(in srgb, var(--frueh) calc(var(--schimmer-a) * 100%), transparent), transparent 70%),
    radial-gradient(36vmax 30vmax at 88% -4%, color-mix(in srgb, var(--nacht) calc(var(--schimmer-c) * 100%), transparent), transparent 70%),
    radial-gradient(42vmax 34vmax at 82% 104%, color-mix(in srgb, var(--spaet) calc(var(--schimmer-b) * 100%), transparent), transparent 70%),
    radial-gradient(34vmax 30vmax at 4% 100%, color-mix(in srgb, var(--nacht) calc(var(--schimmer-b) * 100%), transparent), transparent 70%),
    radial-gradient(30vmax 22vmax at 58% 48%, color-mix(in srgb, var(--nacht) calc(var(--schimmer-d) * 100%), transparent), transparent 70%),
    var(--ground);
}

.inhalt {
  width: 100%; max-width: var(--inhalt-max); margin-inline: auto;
  padding: 1.25rem max(1rem, env(safe-area-inset-right)) calc(var(--tab-hoehe) + var(--tab-zusatz) + 0.6rem + max(0.8rem, env(safe-area-inset-bottom)) + 1.5rem) max(1rem, env(safe-area-inset-left));
}

/* Der Plan nutzt die ganze Breite (S15a): ein Monatsraster passt nicht in 72 rem. */
.inhalt:has(> .plan) { max-width: none; }

/* Kopf- und Tab-Leiste liegen ueber dem Inhalt: der Browser scrollt ein
   fokussiertes Element nur bis an diesen Rand, nicht darunter (WCAG 2.4.11).
   Nur in der Huelle - die Seite ohne Anmeldung hat keine Leisten. */
@media (max-width: 899.98px) {
  html:has(.huelle:not([hidden])) {
    scroll-padding-top: calc(var(--kopf-hoehe) + 0.75rem);
    scroll-padding-bottom: calc(var(--tab-hoehe) + var(--tab-zusatz) + 0.6rem + max(0.8rem, env(safe-area-inset-bottom)) + 0.75rem);
  }
  /* Firefox beachtet das scroll-padding der Wurzel beim Tab nicht (L2):
     derselbe Abstand am Fokus selbst. Nur dort - Chrome zaehlt beides
     zusammen, und ein hoher Knopf bei 200 % passte dann nicht mehr ins
     Bild (gemessen 76 -> 67 % sichtbar).
     ponytail: Feature-Abfrage als Firefox-Weiche; faellt sie weg, gilt
     wieder nur das Polster (2.4.11 bleibt erfuellt). */
  @supports (-moz-appearance: none) {
    html:has(.huelle:not([hidden])) :focus {
      scroll-margin-block: calc(var(--kopf-hoehe) + 0.75rem)
        calc(var(--tab-hoehe) + var(--tab-zusatz) + 0.6rem + max(0.8rem, env(safe-area-inset-bottom)) + 0.75rem);
    }
  }
}

/* Tab-Leiste am Telefon (E), fuenf Eintraege im Raster: bei 320 px ohne
   Ueberlauf. Kein Abtauchen beim Scrollen - Arbeitsnavigation bleibt stehen. */
.tab-leiste {
  position: fixed; z-index: 40;
  left: 50%; bottom: max(0.8rem, env(safe-area-inset-bottom));
  translate: -50% 0;
  width: min(100% - 2 * max(0.75rem, env(safe-area-inset-left), env(safe-area-inset-right)), 30rem);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.1rem;
  padding: 0.3rem; border-radius: 999px;
}
/* Farbiger Rand (1,5 px) aus den Schichtfarben, als Ring per Maske - an Tab- und Seitenleiste. */
.seitenleiste::after, .tab-leiste::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 200deg, color-mix(in srgb, var(--frueh) 70%, transparent), transparent 16%, color-mix(in srgb, var(--spaet) 50%, transparent) 30%, transparent 46%, color-mix(in srgb, var(--nacht) 75%, transparent) 66%, transparent 86%, color-mix(in srgb, var(--frueh) 70%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (prefers-color-scheme: dark) { .tab-leiste { --glas-fuell: rgb(18 26 40 / 0.7); } }
.tab-leiste a {
  position: relative;
  display: grid; justify-items: center; align-content: center; gap: 0.05rem;
  min-height: var(--tab-hoehe); padding: 0.35rem 0.15rem 0.3rem;
  border-radius: 999px; color: var(--ink);
  font-size: 0.75rem; font-weight: 650; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease, background-color 200ms ease;
}
/* Bei grosser Schrift bricht die Beschriftung um, statt gekuerzt zu werden
   (WCAG 1.4.4); die Leiste waechst mit (--tab-hoehe in rem). */
.tab-leiste a span { max-width: 100%; text-align: center; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
.tab-leiste .i { width: 21px; height: 21px; }
/* Die Linse der Website, hier fest: Hintergrund, Farbe UND Punkt. */
.tab-leiste a[aria-current="page"], .tab-leiste a[aria-current="true"] {
  color: var(--t-nacht);
  background: var(--glas-linse);
  box-shadow: var(--glas-linse-schatten);
}
.tab-leiste a[aria-current="page"]::after, .tab-leiste a[aria-current="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; translate: -50% 0;
  width: 4px; height: 4px; border-radius: 50%; background: currentColor;
}

/* Zahl offener Vorgaenge am Navigationseintrag */
.nav-marke {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem;
  border-radius: 999px; background: var(--t-nacht); color: var(--ground);
  font-size: 0.75rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.tab-leiste .nav-marke { position: absolute; top: 2px; left: calc(50% + 4px); }

@media (min-width: 900px) {
  .huelle { display: grid; grid-template-columns: var(--seitenleiste) minmax(0, 1fr); min-height: 100dvh; transition: grid-template-columns 420ms var(--ease-schub); }
  /* Eingeklappt (Umschalter in start.js): schmale Spalte, der Inhalt bekommt die gesparte Breite,
     Listen lassen leere Spalten weg (sonst legt das breitere Raster eine leere dritte Spalte an,
     und zwei Karten werden schmaler statt breiter - gemessen 518 -> 396 px). */
  html[data-leiste="zu"] { --seitenleiste: var(--seitenleiste-zu); --inhalt-max: 82.5rem; --liste-spalten: auto-fit; }
  .kopfleiste, .tab-leiste { display: none; }

  /* Schwebende Glastafel statt Spalte mit Linie. Kein eigenes Rollen: Tooltips ragen hinaus. Ist das
     Fenster sehr niedrig, waechst die Tafel und rollt mit der Seite (Konto am Seitenende). */
  .seitenleiste {
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: var(--leiste-rand); z-index: 20; align-self: start;
    min-height: calc(100dvh - 2 * var(--leiste-rand)); margin: var(--leiste-rand);
    padding: 14px 8px 10px;
    border: 1px solid var(--glas-rand); border-radius: 28px;
    background: linear-gradient(170deg, var(--glas-glanz), transparent 40%), var(--glas-leiste);
    -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
    box-shadow: inset 1px 1px 0 var(--glas-licht), inset -1px -1px 0 var(--glas-saum), inset 0 0 30px var(--glas-innen), var(--glas-schatten);
    transition: border-radius 420ms var(--ease-schub);
  }
  html[data-leiste="zu"] .seitenleiste { border-radius: 32px; }

  /* Eintraege und Umschalter (das Logo, Variante A): 46 px hoch, Symbol 20 px immer auf derselben Achse (8 + 13 + 10 = 31 px) -
     beim Einklappen bewegt sich nichts. */
  .seitenleiste > a, .leiste-um {
    position: relative; display: flex; align-items: center; gap: 0.8rem; width: 100%;
    min-height: 46px; padding: 0.45rem 0.9rem 0.45rem 13px; border: 0; border-radius: 999px;
    background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; text-align: start;
    white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color 200ms ease, color 200ms ease;
  }
  .seitenleiste > a > .i { width: 20px; height: 20px; }
  /* Logo = Umschalter: die Balken (18 px) stehen auf der Symbolachse (8 + 14 + 9 = 31 px), die Wortmarke
     wird beim Einklappen abgedeckt; der Pillen-Text "Einklappen"/"Ausklappen" bleibt ausgeklappt im Knopf,
     aber unsichtbar (1 px, clip-path), eingeklappt wird er zur Glas-Pille wie bei den Eintraegen (unten). */
  .seitenleiste > .logo { margin-bottom: 14px; padding-left: 14px; gap: 0.6rem; font-weight: 800; font-stretch: 90%; font-size: 1.18rem; transition: gap 420ms var(--ease-schub), background-color 200ms ease; }
  .logo-wort { max-width: 13rem; overflow: hidden; transition: max-width 420ms var(--ease-schub); }
  html[data-leiste="zu"] .seitenleiste > .logo { gap: 0; }
  html[data-leiste="zu"] .logo-wort { max-width: 0; }
  /* Winkel hinter der Wortmarke (David 03.11.2026: "ein pfeil neben schichtwunder, um zu zeigen, dass man
     einklappen kann"): wie an den Aufklappern, zeigt nach links; eingeklappt klappt er mit der Wortmarke weg. */
  .seitenleiste > .logo::after {
    content: ""; flex: none; inline-size: 0.95rem; block-size: 0.95rem; background: var(--ink-2);
    clip-path: polygon(25% 13%, 34% 4%, 80% 50%, 34% 96%, 25% 87%, 62% 50%); rotate: 180deg;   /* Winkel, Strich 13 % */
    transition: inline-size 420ms var(--ease-schub), opacity 180ms ease 120ms;
  }
  html[data-leiste="zu"] .seitenleiste > .logo::after { inline-size: 0; opacity: 0; }
  html:not([data-leiste="zu"]) .seitenleiste > .logo > .leiste-um-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .seitenleiste > a .nav-marke { margin-left: auto; }
  .seitenleiste > a > span:not([class]), .leiste-um-text, .konto-kasten > p, .konto-kasten .leiste-text { transition: opacity 180ms ease 200ms; }
  .seitenleiste > a[aria-current="page"], .seitenleiste > a[aria-current="true"] {
    background: var(--glas-linse); color: var(--t-nacht); font-weight: 700; box-shadow: var(--glas-linse-schatten);   /* --t-nacht auf der Linse 7:1 hell, >= 4,5:1 dunkel auch ueber dem Amber-Fleck (Variante 2, gemessen) */
  }
  /* Die Linse wandert wie an der Tab-Leiste (U3-Feder, 420 ms; S88, Davids Wunsch 03.11.2026). Die Eintraege sind
     nicht gleich hoch (200 % Schrift), darum misst start.js (blaseSetzen) den aktiven Eintrag und faehrt das ::before
     per Web Animations (translate, height) dorthin - erst dann traegt das nav "blase"; ohne Messung (kein Layout)
     bleibt die Linse am Eintrag. Hoehe 0 ohne Fahrt: nichts Falsches sichtbar. Breite ueber den Einzug: passt auch
     eingeklappt. Reduzierte Bewegung: start.js faehrt ohne Dauer; erzwungene Farben blenden die Blase aus (unten). */
  .seitenleiste.blase::before {
    content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 0;
    border-radius: 999px; pointer-events: none;
    background: var(--glas-linse);
    box-shadow: var(--glas-linse-schatten);
  }
  /* :where() haelt die Spezifitaet auf 0,2,1 - sonst schluege diese Regel in erzwungenen Farben die Highlight-Flaeche
     am Eintrag (Nachbesserung S88). */
  .seitenleiste:where(.blase) > a[aria-current] { background: none; box-shadow: none; }

  .konto-kasten { margin-top: auto; display: grid; gap: 0.25rem; padding: 0.9rem 0.6rem 0.2rem; border-top: 1px solid var(--glas-rand); }
  .konto-betrieb { font-weight: 700; overflow-wrap: anywhere; }
  .konto-email { color: var(--ink-2); font-size: 0.88rem; overflow-wrap: anywhere; margin-bottom: 0.6rem; }
  .konto-kasten .knopf { transition: width 420ms var(--ease-schub), padding 420ms var(--ease-schub), transform 160ms var(--ease-out), background-color 200ms ease; }
  .inhalt { padding: 2.2rem max(clamp(1.5rem, 3.5vw, 3.5rem), env(safe-area-inset-right)) 3.5rem clamp(1.5rem, 3.5vw, 3.5rem); }

  /* ---- eingeklappt: Symbol-Schiene. Beschriftungen bleiben im Baum (Name, Zaehler-Satz) und werden zur
     Glas-Pille rechts neben der Schiene, sichtbar bei Zeigen und Tastaturfokus. */
  html[data-leiste="zu"] .seitenleiste :is(a, button) > :is(span:not([class]), .leiste-um-text, .leiste-text) {
    position: absolute; left: calc(100% + 18px); top: 50%; translate: -6px -50%;
    padding: 0.35rem 0.8rem; border-radius: 999px; white-space: nowrap;
    background: var(--glas-dicht); color: var(--ink); font-size: 0.9rem; font-weight: 650; line-height: 1.3;
    letter-spacing: normal; font-stretch: normal;   /* die Logo-Pille erbt sonst die enge Wortmarke */
    border: 1px solid var(--glas-rand);
    box-shadow: inset 1px 1px 0 var(--glas-licht), 0 10px 22px -12px rgb(18 30 55 / 0.55);
    opacity: 0; pointer-events: none;
    transition: opacity 150ms ease, translate 150ms var(--ease-out);
  }
  html[data-leiste="zu"] .seitenleiste :is(a, button):is(:hover, :focus-visible) > :is(span:not([class]), .leiste-um-text, .leiste-text) { opacity: 1; translate: 0 -50%; }
  html[data-leiste="zu"] .seitenleiste > a .nav-marke { position: absolute; top: 1px; left: 26px; min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem; font-size: 0.66rem; }
  html[data-leiste="zu"] .konto-kasten { padding-inline: 0; }
  html[data-leiste="zu"] .konto-kasten > p { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
  html[data-leiste="zu"] .konto-kasten .knopf { position: relative; width: 46px; min-height: 46px; padding: 0; justify-self: start; gap: 0; }
  html[data-leiste="zu"] .konto-kasten .knopf .i { width: 20px; height: 20px; }
}
@media (hover: hover) and (pointer: fine) {
  .seitenleiste > a:not([aria-current]):hover, .leiste-um:hover { background: var(--glas-hover); color: var(--ink); }
}

/* ------------------------------------------ Ladeanzeige, Hinweisleiste */

.ladeanzeige {
  position: fixed; z-index: 60; left: 50%; translate: -50% 0;
  bottom: calc(var(--tab-hoehe) + 1.6rem + env(safe-area-inset-bottom));
  padding: 0.55rem 1.1rem; border-radius: 999px;
  background: var(--ink); color: var(--ground); font-size: 0.9rem; font-weight: 600;
  box-shadow: var(--schatten);
}
/* Leer unsichtbar, aber im Barrierefreiheitsbaum (wie .visuell-versteckt):
   die live-Region steht schon, wenn der Text kommt - nur so sagen
   Vorleseprogramme ihn verlaesslich an. */
.ladeanzeige:empty { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.ladeanzeige:not(:empty) { animation: erscheinen 200ms 300ms both; }   /* schnelle Antworten blitzen nicht */
@media (min-width: 900px) { .ladeanzeige { bottom: 1.5rem; } }
@keyframes erscheinen { from { opacity: 0; } }

.leiste-hinweis {
  position: fixed; z-index: 70; top: max(0.6rem, env(safe-area-inset-top)); left: 50%; translate: -50% 0;
  width: min(100% - 2 * max(0.75rem, env(safe-area-inset-left), env(safe-area-inset-right)), 36rem);
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem; border-radius: var(--radius-feld);
  background: var(--ink); color: var(--ground); font-weight: 600; box-shadow: var(--schatten);
}
.leiste-hinweis > p { flex: 1; min-width: 0; overflow-wrap: break-word; }
/* Schliessen: heller Ring auf der dunklen Leiste (16:1 wie die Schrift). */
.leiste-hinweis .rund {
  background: transparent; color: var(--ground);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ground) 45%, transparent);
}
.leiste-hinweis .rund:focus-visible { outline-color: var(--ground); }
/* "Neu laden" (S19d): umgekehrt zur Leiste - Grund hell, Schrift dunkel
   (16:1), 44 px hoch, der Fokusring hell auf der dunklen Leiste. */
.leiste-hinweis .knopf {
  flex: none; padding-inline: 1rem;
  background: var(--ground); color: var(--ink); border-color: transparent; box-shadow: none;
}
.leiste-hinweis .knopf:focus-visible { outline-color: var(--ground); }
@media (hover: hover) and (pointer: fine) {
  .leiste-hinweis .rund:hover { background: color-mix(in srgb, var(--ground) 16%, transparent); }
  .leiste-hinweis .knopf:hover { background-color: color-mix(in srgb, var(--ground) 84%, var(--ink)); }
}

/* ------------------------------------------------ Dialog / Blatt (E) */

dialog.blatt {
  --glas-fuell: var(--glas-dicht);
  width: min(30rem, 100% - 2rem); max-width: none;
  max-height: min(88dvh, 760px);
  padding: 0; margin: auto;
  border-radius: 32px; color: var(--ink); overflow: hidden;
}
dialog.blatt::backdrop { background: rgb(8 13 22 / 0.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.blatt-innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.4rem 1.45rem 1.3rem; max-height: inherit; overflow: auto; overscroll-behavior: contain; }
.blatt-kopf { display: flex; align-items: center; gap: 0.9rem; }
.blatt-kopf .rund { margin-left: auto; }
@media (max-width: 640px) {
  dialog.blatt { width: 100%; margin: auto 0 0; border-radius: 32px 32px 0 0; max-height: 92dvh; }
  /* Das Polster fuer die Gestenleiste gehoert in den rollenden Inhalt: am
     Dialog laege es unter dem Ende von .blatt-innen (max-height: inherit)
     und der letzte Knopf stuende unter der Leiste (S15b E6). */
  dialog.blatt .blatt-innen { padding-bottom: calc(1.3rem + env(safe-area-inset-bottom)); }
}

/* ============================================================ Anmeldung (S14, Gruppe A) */
/* Abschnitt der Anmelde-Ansichten: Zweiter Faktor, QR, Wiederherstellungscodes,
   Rechtstexte. Neue Regeln nur zwischen diesen beiden Zeilen einfuegen. */

/* Der Kasten jeder Anmelde-Ansicht (kopf() in anmeldung.js) */
.anmelde-karte > .meldung { margin-top: 1rem; }
.ablauf { display: grid; gap: 1rem; margin-top: 1rem; min-width: 0; }
.ablauf > .unterzeile, .ablauf > .formular, .ablauf > .knopfreihe { margin-top: 0; }
.blatt-innen .formular { margin-top: 0; }
.blatt-innen .formular > .knopfreihe { margin-top: 0.3rem; }
.blatt-innen .formular > .knopfreihe .knopf { flex: 1 1 10rem; width: auto; }

/* Fest vorgegebene Adresse (Einladung): sichtbar, aber erkennbar nicht zum Tippen */
.ablauf .feld input[readonly] { background: var(--surface-2); color: var(--ink-2); }

/* Linkzeile unter dem Formular: Passwort vergessen, Registrieren, Anmelden */
.karten-links { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
/* "Mit anderem Konto anmelden" der Einrichtung steht ausserhalb des Kastens. */
.anmelde-karte > .karten-links { margin-top: 1rem; }

/* Wiederherstellungscode: 7 x 4 Zeichen passen in der grossen Codeschrift
   nicht in die Karte. */
.code-feld.lang { font-size: max(16px, 1.05rem) !important; letter-spacing: 0.04em; }

/* Einrichtung in drei Schritten */
.schritte { margin: 0; padding-left: 1.5rem; display: grid; gap: 1.5rem; }
.schritte > li { padding-left: 0.3rem; }
.schritte > li::marker { font-weight: 800; color: var(--ink-2); }
.schritte > li > * + * { margin-top: 0.7rem; }
.schritte .knopfreihe { margin-top: 0.7rem; }

/* QR-Code: dunkle Module auf weissem Grund - auch im Dunkelmodus, sonst
   liest die Kamera nichts. Die Ruhezone steckt schon in der viewBox. */
.qr {
  display: block; width: min(14rem, 100%); aspect-ratio: 1; margin-inline: auto;
  padding: 0.3rem; border-radius: 12px; background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--linie);
}
.qr path { fill: #0D1420; shape-rendering: crispEdges; }

.geheimnis {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.05rem; font-weight: 650; letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
  padding: 0.6rem 0.8rem; border-radius: var(--radius-feld); background: var(--surface-2); color: var(--ink);
  user-select: all; -webkit-user-select: all; overflow-wrap: anywhere;
}

/* Wiederherstellungscodes: so viele Spalten, wie nebeneinander passen - in
   der Karte eine, auf breiten Flaechen zwei. Zu schmal: Umbruch am
   Bindestrich statt Querscrollen (WCAG 1.4.10). */
.codes {
  margin: 0; padding: 0.9rem 1rem 0.9rem 2.6rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.4rem 3rem;
  background: var(--surface); border: var(--spur); border-radius: var(--radius-feld);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.codes li { overflow-wrap: anywhere; }
.codes li::marker { color: var(--ink-2); }

@media (forced-colors: active) {
  .qr { forced-color-adjust: none; }
}

/* Startbildschirm der App (willkommen.js), Gestaltung 3 "Drei Seiten zum Wischen" (Davids Wahl 31.10.2026):
   ganzflaechig statt in der Karte. .wk-modus setzt start.js nur fuer diese Ansicht an #oeffentlich; Kopf (Logo)
   und Fuss (Impressum, Datenschutz) aus index.html bleiben, dazwischen fuellt die Ansicht den Bildschirm. Neue
   Tokens nur hier unter .wk-modus. Bewegung nur per CSS und nur ohne "reduzierte Bewegung"; Seite 2 und 3 spielen
   sie erst, wenn sie ins Bild kommen (.wk-an). Wie die ganze Oberflaeche braucht der Block color-mix() und dvh
   (WebView ab 111, docs/betrieb/android-app.md); ohne Container-Abfragen rollt eine zu hohe Seite in sich. */
.oeffentlich.wk-modus {
  --deko: 0.9;
  --wk-aus: cubic-bezier(0.25, 1, 0.5, 1);       /* power3.out */
  --wk-feder: cubic-bezier(0.34, 1.56, 0.64, 1); /* back.out */
  /* Raender samt Safe-Area; als Variable, damit eine Probe die Notch nachstellen kann */
  --wk-oben: max(0.75rem, env(safe-area-inset-top));
  --wk-unten: env(safe-area-inset-bottom, 0px);
  --wk-links: max(clamp(1rem, 5vw, 1.25rem), env(safe-area-inset-left));
  --wk-rechts: max(clamp(1rem, 5vw, 1.25rem), env(safe-area-inset-right));
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: stretch;
  gap: 0;
  padding: 0;
  line-height: 1.5;
}
@media (prefers-color-scheme: dark) { .oeffentlich.wk-modus { --deko: 0.62; } }
.wk-modus::before { display: none; }   /* das Tageslicht zeichnet die Ansicht selbst (.wk-licht) */
.wk-modus > .oeffentlich-kopf { width: auto; padding: var(--wk-oben) var(--wk-rechts) 0 var(--wk-links); }
.wk-modus > .oeffentlich-kopf .logo { min-height: 36px; }
/* Ohne Isolation: sonst laege das Licht (fest, z-index -1) im Stapel der Karte und damit vor Kopf und Fuss. */
.wk-modus > .anmelde-karte {
  align-self: stretch; min-height: 0; width: auto; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; isolation: auto;
}
/* Impressum und Datenschutz bleiben auf dem Startbildschirm (unter "Registrieren", leise wie dessen Satz). */
.wk-modus > .oeffentlich-fuss {
  font-weight: 500;
  padding: 0 var(--wk-rechts) var(--wk-unten) var(--wk-links);
}
/* Fokusring innen wie bei "Registrieren": ohne Rand unten schnitte der Bildschirm ihn sonst ab */
.wk-modus > .oeffentlich-fuss a { padding-inline: 0.3rem; color: var(--ink-2); text-underline-offset: 0.2em; }
.wk-modus > .oeffentlich-fuss a:focus-visible { outline-offset: -2px; border-radius: 10px; }

/* Rahmen: Band und Fuss */

.wk-start { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }   /* wie .oeffentlich: 320 px bei Text 200 % */

.wk-band {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.wk-band::-webkit-scrollbar { display: none; }
.wk-band:focus-visible { outline-offset: -3px; border-radius: 24px; }

.wk-seite {
  position: relative;
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0.9rem var(--wk-rechts) 0.4rem var(--wk-links);
  container-type: size;
}

.wk-fuss { display: flex; flex-direction: column; align-items: center; padding: 0 var(--wk-rechts) 0 var(--wk-links); }

/* Tageslicht: Toenung wechselt je Seite */

.wk-licht { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.wk-licht i { position: absolute; inset: -20vmax; transition: opacity 900ms ease; }
.wk-licht-1 {
  background:
    radial-gradient(36vmax 30vmax at 26% 26%, color-mix(in srgb, var(--frueh) calc(var(--tag-a) * 100%), transparent), transparent 72%),
    radial-gradient(34vmax 30vmax at 80% 36%, color-mix(in srgb, var(--spaet) calc(var(--tag-b) * 100%), transparent), transparent 72%),
    radial-gradient(30vmax 26vmax at 44% 74%, color-mix(in srgb, var(--frueh) calc(var(--tag-b) * 60%), transparent), transparent 72%);
}
.wk-licht-2 {
  opacity: 0;
  background:
    radial-gradient(36vmax 30vmax at 30% 30%, color-mix(in srgb, var(--spaet) calc(var(--tag-a) * 100%), transparent), transparent 72%),
    radial-gradient(32vmax 28vmax at 78% 66%, color-mix(in srgb, var(--frueh) calc(var(--tag-b) * 70%), transparent), transparent 72%),
    radial-gradient(30vmax 26vmax at 70% 22%, color-mix(in srgb, var(--nacht) calc(var(--tag-b) * 60%), transparent), transparent 72%);
}
.wk-licht-3 {
  opacity: 0;
  background:
    radial-gradient(38vmax 32vmax at 70% 62%, color-mix(in srgb, var(--nacht) calc(var(--tag-a) * 100%), transparent), transparent 72%),
    radial-gradient(30vmax 26vmax at 22% 40%, color-mix(in srgb, var(--spaet) calc(var(--tag-b) * 90%), transparent), transparent 72%),
    radial-gradient(28vmax 24vmax at 50% 20%, color-mix(in srgb, #8A5CF0 calc(var(--tag-b) * 70%), transparent), transparent 72%);
}
.wk-s2 .wk-licht-1, .wk-s3 .wk-licht-1 { opacity: 0; }
.wk-s2 .wk-licht-2, .wk-s3 .wk-licht-3 { opacity: 1; }

/* Die drei Balken des Logos, schraeg - Kulisse fuers Glas. Liegen fest hinter dem Band (sonst schneidet es sie ab)
   und wechseln mit der Seite. */
.wk-balken {
  position: absolute;
  height: clamp(3.4rem, 8.5vw, 7rem);
  border-radius: 999px;
  opacity: 0;
  rotate: -14deg;
  translate: 3rem 0;
  transition: opacity 900ms ease, translate 900ms var(--ease-out);
}
.wk-s1 .wk-b1, .wk-s2 .wk-b2, .wk-s3 .wk-b3 { opacity: var(--deko); translate: none; }
.wk-balken.wk-f { background: linear-gradient(100deg, var(--frueh), color-mix(in srgb, var(--frueh) 55%, #FFE7B8)); }
.wk-balken.wk-s { background: linear-gradient(100deg, var(--spaet), color-mix(in srgb, var(--spaet) 55%, #C9F2DC)); }
.wk-balken.wk-n { background: linear-gradient(100deg, var(--nacht), color-mix(in srgb, var(--nacht) 55%, #D5DBFF)); }
/* Die Punkte stehen 2 rem hoeher als in v3 (Zeile Impressum und Datenschutz): Balken neben ihnen bleiben hoechstens
   so tief, dass kein Punkt darauf liegt (min), sonst wie in v3. */
/* Oberer Balken ueber der Ueberschrift wie auf der Website (top -2 %): weiter unten laege "Knopfdruck." darauf */
.wk-b1.wk-f { top: -2%; right: -8%; width: 48%; }
.wk-b1.wk-n { top: min(71%, calc(100% - 14rem - var(--wk-unten))); right: -14%; width: 50%; }
@media (max-height: 700px) { .wk-b1.wk-n { top: min(64%, calc(100% - 14rem - var(--wk-unten))); } }   /* sonst liegt der dritte Seitenpunkt auf dem Balken */
.wk-b2.wk-s { top: 3%; right: -18%; width: 46%; }
.wk-b2.wk-f { top: min(70%, calc(100% - 12rem - var(--wk-unten))); left: -16%; width: 52%; }
.wk-b3.wk-n { top: -2%; right: -10%; width: 44%; }
.wk-b3.wk-s { top: min(67%, calc(100% - 15.5rem - var(--wk-unten))); right: -16%; width: 56%; }

/* Glas */

.wk-glas {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), transparent 55%), var(--glas-fuell);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-satt));
  backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-satt));
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-licht), inset 0 -1px 0 var(--glas-unten), var(--glas-schatten);
}

/* Text einer Seite */

.wk-text { display: flex; flex-direction: column; align-items: flex-start; }

.wk-pille {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0.9rem;
  padding: 0.38rem 0.9rem 0.38rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  border: var(--spur);
  font-size: 0.88rem; font-weight: 600; color: var(--ink-2);
}
.wk-pille .logo-mark { grid-template-rows: repeat(3, 4px); gap: 1.5px; }
.wk-pille .logo-mark i { width: 13px; border-radius: 1.5px; }
.wk-pille .wk-i { width: 1.05em; height: 1.05em; }
.wk-seite-2 .wk-pille .wk-i { color: var(--t-spaet); }
.wk-seite-3 .wk-pille .wk-i { color: var(--t-nacht); }

.wk-titel {
  font-size: clamp(2.3rem, 11.2vw, 3.3rem);
  font-weight: 800;
  font-stretch: 88%;
  line-height: 0.94;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.wk-zeile { display: block; }
.wk-wort { display: inline-block; }
.wk-farbig {
  display: inline-block;
  background: linear-gradient(92deg, var(--t-frueh) 0%, var(--t-spaet) 52%, var(--t-nacht) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}

.wk-vorspann { margin-top: 0.8rem; font-size: 1.12rem; line-height: 1.45; color: var(--ink-2); max-width: 22em; text-wrap: pretty; }
/* Seite 2 liegt hell auf dem gruenen Licht: mit --ink-2 stellenweise nur 4,2:1, etwas dunkler mindestens 5,5:1 */
@media (prefers-color-scheme: light) { .wk-seite-2 .wk-vorspann { color: color-mix(in srgb, var(--ink-2) 70%, var(--ink)); } }

.wk-stichworte { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.85rem 0 0; padding: 0; list-style: none; }
.wk-stichworte li {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 32px; padding: 0.2rem 0.7rem 0.2rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  border: var(--spur);
  font-size: 0.88rem; font-weight: 600;
}
.wk-stichworte .wk-i { color: var(--t-spaet); width: 1em; height: 1em; stroke-width: 2.4; }

/* Buehne fuellt den Rest der Seite und mittelt die Abbildung darin */
.wk-buehne {
  flex: 1 0 auto;
  pointer-events: none;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding-block: 1rem 0.5rem;
}

/* Seite 1: Plankarte */

.wk-planrahmen { position: relative; width: min(100%, 22rem); padding-bottom: 1.35rem; }
.wk-plan {
  background: var(--surface);
  border: var(--spur);
  border-radius: var(--radius-gross);
  padding: 1rem 1rem 2.2rem;
  box-shadow: 0 18px 40px -24px rgb(18 30 55 / 0.42), 0 2px 8px -3px rgb(18 30 55 / 0.14);
}
.wk-plan-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0 0.2rem 0.7rem; }
.wk-plan-titel { font-weight: 750; font-size: 1.08rem; letter-spacing: -0.02em; }
.wk-plan-stand { font-size: 0.82rem; color: var(--ink-3); }

.wk-raster { display: grid; grid-template-columns: 2.7rem repeat(3, minmax(0, 1fr)); gap: 5px; }
.wk-reihe { display: contents; }
.wk-kopfzelle { font-size: 0.72rem; color: var(--ink-3); font-weight: 600; padding: 0 0 0.1rem 0.2rem; }
.wk-plan-tag { display: flex; align-items: center; gap: 0.25rem; font-size: 0.76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wk-plan-tag.wk-feiertag { color: var(--t-frueh); font-weight: 700; }
.wk-plan-tag.wk-feiertag::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.wk-zelle {
  height: 28px; display: flex; align-items: center;
  padding-inline: 0.6rem; border-radius: 9px;
  background: var(--p, var(--surface-2)); color: var(--p-text, transparent);
  font-size: 0.78rem; font-weight: 650; white-space: nowrap; overflow: hidden;
}

.wk-p-anna  { --p: #A33BBE; --p-text: #FFFFFF; }
.wk-p-bernd { --p: #E39A2B; --p-text: #1A1206; }
.wk-p-clara { --p: #2E9E6B; --p-text: #04150D; }
.wk-p-doris { --p: #0E93AB; --p-text: #02171B; }
.wk-p-erik  { --p: #C23A2F; --p-text: #FFFFFF; }
.wk-p-frank { --p: #2E3A8C; --p-text: #EEF1FF; }

.wk-urteil {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0.5rem 1.15rem 0.5rem 0.95rem;
  border-radius: 999px; white-space: nowrap;
  font-weight: 650; font-size: 0.93rem;
}
.wk-urteil .wk-i { color: var(--t-spaet); stroke-width: 2.6; }
/* flacher Schatten: der Bandrand darunter wuerde einen tiefen abschneiden */
.wk-urteil { --glas-schatten: 0 6px 16px -10px rgb(18 30 55 / 0.35); }
@media (prefers-color-scheme: dark) { .wk-urteil { --glas-schatten: 0 6px 16px -10px rgb(0 0 0 / 0.6); } }

/* Seite 2: Mein Monat und Mitteilungen */

.wk-stapel { display: grid; justify-items: center; width: min(100%, 22rem); }
.wk-monat {
  width: calc(100% - 1.5rem);
  background: var(--surface);
  border: var(--spur);
  border-radius: var(--radius-gross);
  padding: 0.95rem 0.95rem 2.4rem;
  box-shadow: 0 18px 40px -24px rgb(18 30 55 / 0.42), 0 2px 8px -3px rgb(18 30 55 / 0.14);
}
.wk-kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wk-wt { text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--ink-3); }
.wk-kal-tag {
  display: grid; justify-items: center; gap: 3px;
  padding: 0.3rem 0 0.38rem;
  border-radius: 9px;
  font-size: 0.82rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2;
  color: var(--ink-3);
}
.wk-kal-tag::after { content: ""; width: 56%; height: 4px; border-radius: 99px; }
.wk-kal-tag.wk-frueh, .wk-kal-tag.wk-spaet, .wk-kal-tag.wk-nacht { color: var(--ink); }
.wk-kal-tag.wk-frueh { background: color-mix(in srgb, var(--frueh) 20%, var(--surface)); }
.wk-kal-tag.wk-spaet { background: color-mix(in srgb, var(--spaet) 18%, var(--surface)); }
.wk-kal-tag.wk-nacht { background: color-mix(in srgb, var(--nacht) 18%, var(--surface)); }
.wk-kal-tag.wk-frueh::after { background: var(--frueh); }
.wk-kal-tag.wk-spaet::after { background: var(--spaet); }
.wk-kal-tag.wk-nacht::after { background: var(--nacht); }
.wk-kal-tag.wk-urlaub { color: var(--ink); background: var(--surface-2); }
.wk-kal-tag.wk-urlaub::after { background: repeating-linear-gradient(90deg, var(--ink-3) 0 3px, transparent 3px 6px); }

.wk-mitteilung {
  position: relative;
  width: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.75rem 0.65rem 0.65rem;
  border-radius: 22px;
  --glas-fuell: var(--glas-dicht);
}
.wk-mitteilung + .wk-mitteilung { margin-top: 0.5rem; }
.wk-monat + .wk-mitteilung { margin-top: -1.7rem; }
.wk-sym { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 13px; }
.wk-sym.wk-ton-s { color: var(--t-spaet); background: color-mix(in srgb, var(--spaet) 20%, var(--surface)); }
.wk-sym.wk-ton-f { color: var(--t-frueh); background: color-mix(in srgb, var(--frueh) 22%, var(--surface)); }
.wk-mitteilung-text { display: grid; line-height: 1.3; min-width: 0; }
.wk-mitteilung-text b { font-size: 0.95rem; font-weight: 700; }
.wk-mitteilung-text span { font-size: 0.84rem; color: var(--ink-2); }

/* Seite 3: Stempeluhr */

.wk-geraet { position: relative; width: min(100%, 22rem); padding-bottom: 4.9rem; }
.wk-tablet { border-radius: 28px; padding: 8px; }
.wk-schirm { background: var(--surface); border-radius: 21px; padding: 0.95rem 0.85rem 0.9rem; }
.wk-schirm-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0 0.15rem 0.8rem; }
.wk-uhr { font-size: 2.2rem; font-weight: 800; font-stretch: 88%; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.wk-datum { font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.wk-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.wk-kachel {
  display: flex; align-items: flex-end;
  height: 3.5rem; padding: 0.45rem 0.6rem;
  border-radius: 13px;
  background: var(--p); color: var(--p-text);
  font-size: 0.88rem; font-weight: 700;
}
.wk-kachel.wk-gewaehlt { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }

.wk-pin {
  position: absolute; right: -0.35rem; bottom: 0;
  width: min(13.5rem, 72%);
  display: grid; gap: 0.6rem;
  padding: 0.85rem 1rem 0.9rem;
  border-radius: 24px;
  --glas-fuell: var(--glas-dicht);
}
.wk-pin-name { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 700; }
.wk-pin-name i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--p); }
.wk-pin-punkte { display: flex; gap: 0.7rem; }
.wk-pin-punkte i { width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--ink); }
.wk-pin-ok { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.86rem; font-weight: 650; }
.wk-pin-ok .wk-i { color: var(--t-spaet); stroke-width: 2.6; }

/* Fuss: Punkte, Knoepfe, Registrieren */

.wk-punkte { display: flex; justify-content: center; }
.wk-punkt {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wk-punkt::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--ink-3);
  transition: width 320ms var(--ease-out), background-color 320ms ease;
}
.wk-punkt[aria-current]::before { width: 24px; background: var(--ink); }

.wk-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; max-width: 30rem; }
.wk-knopf {
  flex: 1 1 8.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0.9rem clamp(0.8rem, 4vw, 1.4rem);
  border-radius: 999px; border: 1px solid transparent;
  background: var(--ink); color: var(--ground);
  font-weight: 650; font-size: clamp(0.95rem, 4.2vw, 1.03rem); line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 10px 24px -12px rgb(13 20 32 / 0.55);
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.wk-knopf:active { transform: scale(0.97); }
.wk-knopf.wk-glas {
  color: var(--ink);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), transparent 55%), var(--glas-fuell);
  border-color: var(--glas-rand);
}
.wk-knopf:focus-visible, .wk-punkt:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .wk-knopf:hover { background-color: color-mix(in srgb, var(--ink) 86%, var(--ground)); }
  .wk-knopf.wk-glas:hover { background: linear-gradient(180deg, rgb(255 255 255 / 0.16), transparent 55%), var(--glas-dicht); }
}

.wk-neu { margin-top: 0.15rem; font-size: 0.92rem; color: var(--ink-2); text-align: center; }
.wk-neu a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.3rem;
  color: var(--ink); font-weight: 650;
  text-underline-offset: 0.2em; text-decoration-thickness: 1px;
}
.wk-neu a:focus-visible { outline-offset: -2px; border-radius: 10px; }

/* Wenig Hoehe: weniger zeigen statt rollen. Gemessen an der Seite selbst, also nach Notch, Fuss und Schriftgroesse;
   nur in einer Spalte (breit steht der Text neben der Abbildung, s. u.). Stufen und Schritte aus v3; die Schwellen
   nach dem gemessenen Bedarf der drei Seiten bei 320-412 px Breite, weil die Zeile mit Impressum und Datenschutz
   44 px kostet. Unter v3s kleinster Stufe vier weitere (Planzeilen 4 und 3, die zweite Reihe Namen, Woche 1):
   so passen 320 x 640 und 360 x 640 samt Leisten ganz, erst unter etwa 340 px Seitenhoehe rollt eine Seite. */

@container (max-height: 614px) and (max-width: 44rem) {
  .wk-reihe:nth-of-type(6) { display: none; }
}
@container (max-height: 581px) and (max-width: 44rem) {
  .wk-titel { font-size: clamp(2.2rem, 10.4vw, 3rem); }
  .wk-pille { margin-bottom: 0.75rem; }
  .wk-buehne { padding-top: 0.9rem; }
  .wk-stichworte { display: none; }
  .wk-kal-tag { padding-block: 0.22rem 0.3rem; }
}
@container (max-height: 555px) and (max-width: 44rem) {
  .wk-kal-woche-2 { display: none; }
}
@container (max-height: 520px) and (max-width: 44rem) {
  .wk-reihe:nth-of-type(5) { display: none; }
  .wk-titel { font-size: clamp(2rem, 9.6vw, 2.6rem); }
  .wk-vorspann { font-size: 1.02rem; margin-top: 0.6rem; }
  .wk-buehne { padding-top: 0.7rem; }
  .wk-kachel { height: 2.9rem; }
}
@container (max-height: 494px) and (max-width: 44rem) {
  .wk-mitteilung + .wk-mitteilung { display: none; }
}
@container (max-height: 470px) and (max-width: 44rem) {
  .wk-pille { display: none; }
}
@container (max-height: 406px) and (max-width: 44rem) {
  .wk-kachel { height: 2.4rem; }
  .wk-schirm-kopf { padding-bottom: 0.6rem; }
  .wk-uhr { font-size: 1.9rem; }
}
@container (max-height: 392px) and (max-width: 44rem) {
  .wk-reihe:nth-of-type(4) { display: none; }
}
@container (max-height: 382px) and (max-width: 44rem) {
  .wk-kachel:nth-child(n+4) { display: none; }
}
@container (max-height: 376px) and (max-width: 44rem) {
  .wk-kal-woche-1 { display: none; }
}
@container (max-height: 362px) and (max-width: 44rem) {
  .wk-reihe:nth-of-type(3) { display: none; }
}
/* Breit zaehlt nur die hoehere Spalte, die Abbildung: eigene, niedrigere Schwellen (Tablet quer mit Leisten). */
@container (max-height: 330px) and (min-width: 44rem) {
  .wk-reihe:nth-of-type(6), .wk-kal-woche-2 { display: none; }
}
@container (max-height: 296px) and (min-width: 44rem) {
  .wk-reihe:nth-of-type(5), .wk-mitteilung + .wk-mitteilung { display: none; }
  .wk-kachel { height: 2.9rem; }
}
@container (max-height: 274px) and (min-width: 44rem) {
  .wk-stichworte, .wk-reihe:nth-of-type(4), .wk-kachel:nth-child(n+4) { display: none; }
}

/* Grosse Flaechen (Tablet als Stempeluhr, Fold): hochkant eine Spalte in der Mitte, quer Text neben der Abbildung.
   Auto-Raender statt Zentrieren: reicht die Hoehe nicht, rollt die Seite, statt oben abzuschneiden. */
@media (min-width: 40rem) {
  .wk-seite > * { width: min(100%, 22rem); margin-inline: auto; }
  .wk-text { margin-top: auto; }
  .wk-buehne { flex-grow: 0; margin-bottom: auto; }
}
@media (min-width: 48rem) and (orientation: landscape) {
  .wk-seite {
    display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 24rem);
    justify-content: center; align-items: center; column-gap: clamp(2rem, 6vw, 5rem);
  }
  .wk-seite > * { width: auto; margin: auto 0; }
  .wk-buehne { padding-block: 0; }
}
/* Telefon quer: fuer den festen Fuss fehlt die Hoehe (die Seite behielte kaum 130 px, v3 kannte nur Hochformat).
   Dann rollt die ganze Ansicht wie Anmelden, und jede Seite zeigt alles - nichts endet mitten in einer Zeile. */
@media (orientation: landscape) and (max-height: 32rem) {
  .oeffentlich.wk-modus { height: auto; min-height: 100dvh; }
  .wk-start { height: auto; min-height: 100%; }
  .wk-seite { container-type: normal; }
}

/* Bewegung */

@keyframes wk-auf { from { opacity: 0; transform: translateY(14px); } }
@keyframes wk-wort { from { opacity: 0; transform: translateY(55%); filter: blur(10px); } }
@keyframes wk-heran { from { opacity: 0; transform: translateY(36px); } }
@keyframes wk-zelle { from { opacity: 0; transform: scale(0.6); } }
@keyframes wk-plopp { from { opacity: 0; transform: translateY(-14px) scale(0.95); } }
@keyframes wk-ziffer { from { background-color: transparent; transform: scale(0.75); } }
@keyframes wk-tippen {
  0% { transform: none; box-shadow: none; }
  45% { transform: scale(0.93); box-shadow: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Seite 1 beim Start */
  .wk-seite-1 .wk-pille { animation: wk-auf 500ms var(--wk-aus) 100ms both; }
  .wk-seite-1 .wk-wort { animation: wk-wort 850ms var(--wk-aus) both; }
  .wk-seite-1 .wk-wort:nth-of-type(1) { animation-delay: 300ms; }
  .wk-seite-1 .wk-zeile + .wk-zeile .wk-wort:nth-of-type(1) { animation-delay: 380ms; }
  .wk-seite-1 .wk-zeile + .wk-zeile .wk-wort:nth-of-type(2) { animation-delay: 460ms; }
  .wk-seite-1 .wk-vorspann { animation: wk-auf 600ms var(--wk-aus) 620ms both; }
  .wk-seite-1 .wk-stichworte li { animation: wk-auf 600ms var(--wk-aus) 670ms both; }
  .wk-seite-1 .wk-stichworte li:nth-child(2) { animation-delay: 715ms; }
  .wk-seite-1 .wk-stichworte li:nth-child(3) { animation-delay: 760ms; }
  .wk-seite-1 .wk-stichworte li:nth-child(4) { animation-delay: 805ms; }
  .wk-seite-1 .wk-planrahmen { animation: wk-heran 1000ms var(--wk-aus) 700ms both; }
  .wk-zelle { animation: wk-zelle 420ms var(--wk-feder) calc(1250ms + (var(--r) + var(--s)) * 90ms) both; }
  .wk-reihe:nth-of-type(1) { --r: 0; }
  .wk-reihe:nth-of-type(2) { --r: 1; }
  .wk-reihe:nth-of-type(3) { --r: 2; }
  .wk-reihe:nth-of-type(4) { --r: 3; }
  .wk-reihe:nth-of-type(5) { --r: 4; }
  .wk-reihe:nth-of-type(6) { --r: 5; }
  .wk-zelle:nth-child(2) { --s: 0; }
  .wk-zelle:nth-child(3) { --s: 1; }
  .wk-zelle:nth-child(4) { --s: 2; }
  .wk-urteil { animation: wk-auf 500ms var(--wk-aus) 2150ms both; }

  .wk-punkte { animation: wk-auf 600ms var(--wk-aus) 780ms both; }
  .wk-knoepfe { animation: wk-auf 600ms var(--wk-aus) 830ms both; }
  .wk-neu, .wk-modus > .oeffentlich-fuss { animation: wk-auf 600ms var(--wk-aus) 880ms both; }

  /* Seite 2 und 3 spielen, sobald sie ins Bild kommen (willkommen.js setzt .wk-an) */
  .wk-monat { animation: wk-heran 800ms var(--wk-aus) 60ms both; }
  .wk-mitteilung { animation: wk-plopp 520ms var(--wk-feder) 420ms both; }
  .wk-mitteilung + .wk-mitteilung { animation-delay: 620ms; }
  .wk-geraet { animation: wk-heran 800ms var(--wk-aus) 60ms both; }
  .wk-kachel.wk-gewaehlt { animation: wk-tippen 380ms var(--ease-out) 520ms both; }
  .wk-pin { animation: wk-plopp 520ms var(--wk-feder) 720ms both; }
  .wk-pin-punkte i { animation: wk-ziffer 180ms var(--wk-aus) 1050ms both; }
  .wk-pin-punkte i:nth-child(2) { animation-delay: 1200ms; }
  .wk-pin-punkte i:nth-child(3) { animation-delay: 1350ms; }
  .wk-pin-punkte i:nth-child(4) { animation-delay: 1500ms; }
  .wk-pin-ok { animation: wk-auf 480ms var(--wk-feder) 1720ms both; }
  .wk-seite:not(.wk-an) * { animation-play-state: paused; }
}

/* Weniger Transparenz, mehr Kontrast, erzwungene Farben */

@media (prefers-reduced-transparency: reduce) {
  .wk-glas { --glas-fuell: var(--surface); --glas-dicht: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .wk-glas { --glas-fuell: var(--surface); --glas-dicht: var(--surface); --glas-rand: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .wk-glas, .wk-knopf { border: 1px solid CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .wk-farbig { color: CanvasText; background: none; }
  .wk-licht { display: none; }
  .wk-punkt::before { forced-color-adjust: none; background: CanvasText; }
}

/* Drucken der Codes: nur die Liste, alles andere unsichtbar (visibility,
   damit die Liste in ihrem Vorfahren sichtbar bleiben darf). */
@media print {
  html.druck-codes body { visibility: hidden; }
  html.druck-codes .codes {
    visibility: visible; position: absolute; top: 0; left: 0; width: 100%;
    border: 0; background: none; color: #0D1420; font-size: 12pt;     /* Papier ist hell, auch im Dunkelmodus */
    grid-template-columns: repeat(2, max-content);
  }
  html.druck-codes .codes::before {
    content: "Schichtwunder – Wiederherstellungscodes"; grid-column: 1 / -1; margin-bottom: 0.8rem;
    font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; font-weight: 700; font-size: 14pt;
  }
}

/* ============================================================ Ende Anmeldung */

/* ============================================================ Heute (S14, Gruppe B) */
/* Abschnitt der Ansicht Heute und von Mehr. Neue Regeln nur zwischen diesen
   beiden Zeilen einfuegen. */

/* Je Standort eine Karte; ab 900 px zwei nebeneinander, sobald je Karte
   22rem Platz sind. Der Abstand kommt dann vom Raster, nicht von .karte + .karte. */
.heute-fehler { margin-top: 1rem; }
.heute-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.4rem; align-items: start; }
.heute-karten > .karte + .karte { margin-top: 0; }
@media (min-width: 900px) {
  .heute-karten { grid-template-columns: repeat(var(--liste-spalten), minmax(min(22rem, 100%), 1fr)); }
}
/* anywhere (erbt auf Kopf, Namen, Abwesende): ein langer Standort- oder
   Schichtname bricht um, statt die Karte bei 320 px zu sprengen. */
.heute-karte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; align-content: start; overflow-wrap: anywhere; }

/* Eine Schicht: Kopfzeile und je Platz eine Zeile. Die laufende traegt den
   Balken in Nachtblau und eine leichte Toenung - dazu die Marke "läuft",
   Farbe allein sagt nichts. Der Balken ist ein Rand, kein Schatten: der
   bleibt auch bei erzwungenen Farben stehen. */
.heute-schicht {
  padding: 0.2rem 0.75rem 0.2rem 0.65rem;
  border-left: 4px solid transparent;
  border-radius: 12px;
}
.heute-schicht.laeuft {
  border-left-color: var(--nacht);
  background: color-mix(in srgb, var(--nacht) 6%, var(--surface));   /* --ink-2 darauf 7,4:1 hell, 7,8:1 dunkel */
}
.heute-kopf, .heute-zeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.35rem 0.9rem; min-height: 44px; padding-block: 0.35rem;
}
.heute-kopf strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.heute-zeile { border-top: var(--spur); }
.heute-zeile > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.heute-zeile .unbesetzt { color: var(--ink-2); font-style: italic; }   /* 8,0:1 auf surface */
.heute-marken { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* "noch nicht gestempelt" ist bei Text 200 % breiter als die Karte (NM-2). */
.heute-marken .marke { white-space: normal; border-radius: 0.75rem; }

/* "Wartet auf Sie" */
.heute-wartet { margin-top: 1rem; }
.heute-vorgaenge { list-style: none; margin: 0.8rem 0; padding: 0; }
.heute-vorgaenge li { padding-block: 0.6rem; border-top: var(--spur); overflow-wrap: anywhere; }
.heute-vorgaenge li:last-child { border-bottom: var(--spur); }

/* Ohne Hintergruende waeren Marken nur noch Text neben dem Namen. */
@media (forced-colors: active) {
  .heute-schicht { border-left-color: Canvas; }      /* transparent wird hier CanvasText - dann traege jede den Balken */
  .heute-schicht.laeuft { border-left-color: Highlight; }
  .heute-schicht .marke { border: 1px solid CanvasText; }
}

/* Mehr: Konto als Liste von Angaben, Rechtstexte als Links. */
.mehr-konto { margin-top: 1.4rem; }
.mehr-konto .knopfreihe { margin-top: 1rem; }
.mehr-angaben {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem 1.4rem; margin: 0.9rem 0 0;
}
.mehr-angaben dt { color: var(--ink-2); }                              /* 8,0:1 auf surface */
.mehr-angaben dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .mehr-angaben { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .mehr-angaben dd + dt { margin-top: 0.6rem; }
}
.mehr-links { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.mehr-links li + li { border-top: var(--spur); }
.mehr-links a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--ink); font-weight: 600; overflow-wrap: anywhere;
}
.mehr-fassung { margin-top: 0.8rem; }
.mehr-dazu { margin-top: 0.8rem; }
/* Auswahl der Mitteilungen (U2 P8) unter dem Push-Schalter von Mehr (Leitung und Person). */
.push-auswahl { margin-top: 0.6rem; }
.push-auswahl .feld-hilfe { display: block; margin-bottom: 0.2rem; color: var(--ink-2); font-size: 0.88rem; line-height: 1.45; }

/* ============================================================ Ende Heute */

/* ============================================================ Geraet und Stempeluhr (S18, Fundament) */
/* #geraet traegt die Klasse .huelle und erbt Kopf-, Seiten- und Tab-Leiste
   samt scroll-padding. Die Stempeluhr ist ein Kiosk: volle Breite, eigener
   Grund, keine Leisten; touch-action gilt fuer alles darin (kein
   Doppeltipp-Zoom, keine 300-ms-Verzoegerung). */
.stempeluhr { min-height: 100dvh; background: var(--surface); touch-action: manipulation; }
.uhr-inhalt {
  width: 100%; min-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

/* Die Gruppen der Stufe 2 schreiben nur zwischen ihre Marken. */

/* ==== Mitarbeiter A (S18) */
/* Mein Plan (Liste oder Tabelle), Mehr, Meine Zeiten, Datenschutz (ma-plan.js, ma-mehr.js).
   Zustaende nie nur ueber Farbe: gewaehlt = gefuellt, fett und Haken
   (aria-pressed), heute = Balken plus das Wort "heute", der eigene Name =
   ganz gefuellt und fett plus "(du)" fuer Vorleseprogramme. */
.ma-fehler { margin-top: 1rem; }
.ma-liste { margin-top: 1.2rem; }

/* Ansicht, Standort und Monat als Knopfgruppe */
/* Eine Glas-Rinne, der gewaehlte Knopf ist die Linse. Haken und Fettschrift bleiben (nie nur Farbe). */
.ma-reiter {
  display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; margin-top: 1.2rem;
  padding: 4px; border-radius: 26px; border: 1px solid var(--glas-rand);
  background: color-mix(in srgb, var(--surface) 30%, transparent); box-shadow: var(--glas-mulde);
}
.ma-reiter + .ma-reiter { margin-top: 0.6rem; }
/* Lange Standortnamen (bis 80 Zeichen) brechen um statt abgeschnitten zu
   werden - bei 320 px bzw. 400 % Zoom (WCAG 1.4.10). */
.ma-reiter .knopf {
  padding-inline: 1rem; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: start;
  background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ma-reiter .knopf[aria-pressed="true"] { background: var(--glas-linse); color: var(--t-nacht); border-color: var(--glas-rand); box-shadow: var(--glas-linse-schatten); font-weight: 750; }
.ma-reiter .knopf[aria-pressed="true"]::before { content: "✓" / ""; }
@media (hover: hover) and (pointer: fine) {
  .ma-reiter .knopf[aria-pressed="false"]:hover { background: var(--glas-hover); }
  .ma-reiter .knopf[aria-pressed="true"]:hover { background: var(--glas-linse); }
}

/* Tage als Liste: Kopf (Datum, "heute") links, Inhalt rechts. */
.ma-tage {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: var(--spur); border-radius: var(--radius); overflow: hidden;
}
.ma-tag { display: flex; gap: 0.3rem 1rem; padding: 0.75rem 1rem; border-top: var(--spur); overflow-wrap: anywhere; }
.ma-tag:first-child { border-top: 0; }
.ma-tag.wochenende { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.ma-tag.heute {
  background: color-mix(in srgb, var(--nacht) 8%, var(--surface));   /* --ink-2 darauf ueber 7:1 */
  box-shadow: inset 4px 0 0 var(--nacht);
}
.ma-tag-kopf {
  flex: 0 0 6.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
  margin: 0; font-size: 1rem; line-height: 1.35; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ma-tag-inhalt { flex: 1; min-width: 0; display: grid; gap: 0.35rem; align-content: start; }

.ma-eintrag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.7rem; }
.ma-eintrag strong { font-weight: 700; }
.ma-zeit { font-variant-numeric: tabular-nums; }
.ma-position { font-weight: 600; }   /* S88: die Position des Platzes, wie .plan-position */
.ma-ort { color: var(--ink-2); }
.ma-abwesend strong { font-weight: 650; font-style: italic; }

.ma-schicht-name { color: var(--ink-2); font-size: 0.93rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.ma-namen { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* Namensfelder (Davids Wahl 24.10.2026): kleine Ecken statt Pille - bei 999px lag die Schrift
   zweizeiliger Namen in den runden Ecken. Keine Silbentrennung: Namen bleiben ganz; ein sehr langes
   Wort weitet die Spalte, dann rollt der Rahmen seitlich (.ma-tabelle). */
.ma-name { padding: 0.15rem 0.65rem; border-radius: 6px; background: var(--surface-2); font-size: 0.93rem; }
.ma-name.offen { background: transparent; color: var(--ink-2); font-style: italic; outline: 1px dashed var(--feld-rand); outline-offset: -1px; }
/* Eigener Name ganz gefuellt in der Akzentfarbe, Schrift in der Flaechenfarbe (hell 7,0:1, dunkel 7,8:1;
   die Flaeche gegen die Zelle ebenso, an Wochenend-Zeilen 6,3:1 bzw. 7,5:1, 1.4.11) und fett.
   Fett ohne Breitenzuwachs: 750 bei font-stretch 94 % (Achse wdth) ist so breit wie 400 - sonst
   weitet der eigene Name die Spalte und der Rahmen rollt (Schrift 115 %: "Hoffmann" 84,8 statt 80,1 px). */
.ma-name.ich { background: var(--t-nacht); color: var(--surface); font-weight: 750; font-stretch: 94%; }

/* Meine Zeiten: Monat mit Blaettern, Tabelle darf seitlich rollen (1.4.10) */
.ma-monat-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-top: 1.2rem; }
.ma-monat-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* position: relative - sonst nehmen die .visuell-versteckt-Texte ("(du)", "keine Schicht") ihren Bezug
   ausserhalb des rollenden Rahmens und machen die Seite breiter als den Schirm: die Tab-Leiste rutscht
   rechts aus dem Bild (320 px, lange Namen, ab 4 Schichtarten, Schrift 130 %). */
.ma-tabelle { position: relative; overflow-x: auto; background: var(--surface); border: var(--spur); border-radius: var(--radius); }
/* Der Rahmen ist per Tastatur erreichbar (tabindex 0) - man sieht, wo man ist. */
.ma-tabelle:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.ma-zeiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ma-zeiten th, .ma-zeiten td { padding: 0.6rem 0.7rem; text-align: left; vertical-align: top; border-top: var(--spur); }
.ma-pause { display: block; white-space: nowrap; }
.ma-zeiten thead th { border-top: 0; color: var(--ink-2); font-size: 0.88rem; font-weight: 650; }
.ma-zeiten tbody th { font-weight: 650; }
.ma-zeiten tbody th .marke { margin-left: 0.4rem; }

/* K7 im Dialog, Datenschutz */
.ma-k7 a, .ma-datenschutz a { font-weight: 600; overflow-wrap: anywhere; }
.ma-datenschutz { margin-top: 1.4rem; display: grid; gap: 0.8rem; overflow-wrap: anywhere; }
.ma-datenschutz .mehr-links, .ma-wege .mehr-links { margin-top: 0; }

/* Teamplan als Tabelle (U1 E1): senkrecht rollt die Seite, seitlich nur der
   Rahmen (.ma-tabelle, ohne max-height); Tag-Spalte schmal und klebend,
   Wochentag ueber Datum. Lange Feiertags- und Namenswoerter brechen ueber
   .kleingedruckt (overflow-wrap: anywhere, app.css:261). */
.ma-teamplan { margin-top: 1.2rem; }
.ma-teamtabelle { border-collapse: separate; border-spacing: 0; min-width: 100%; font-variant-numeric: tabular-nums; }
.ma-teamtabelle caption { text-align: left; font-weight: 700; padding: 0.6rem 0.7rem 0.2rem; }
.ma-teamtabelle th, .ma-teamtabelle td { padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; border-top: var(--spur); }
.ma-teamtabelle thead th { border-top: 0; color: var(--ink-2); font-size: 0.88rem; font-weight: 650; min-width: 7rem; }
.ma-teamtabelle thead th small, .ma-tt-zeit { display: block; color: var(--ink-2); font-size: 0.82rem; font-weight: 600; }
.ma-teamtabelle thead th:first-child, .ma-teamtabelle tbody th { min-width: 4.5rem; width: 4.5rem; }
.ma-teamtabelle tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); border-right: var(--spur); font-weight: 700; }
.ma-tt-wt, .ma-tt-dat { display: block; }
.ma-teamtabelle tbody th > .marke, .ma-teamtabelle tbody th > .kleingedruckt { display: block; width: fit-content; margin-top: 0.2rem; white-space: normal; hyphens: auto; }   /* "ab-wesend:" statt "abwes|end:"; overflow-wrap: anywhere bleibt Rueckfall */
/* "heute" bricht nicht um: mit 0.65rem Polster waere die Marke 57 px breit
   und die Tag-Spalte 78 statt 72 px; so rund 47 px in 51,8 px Inhalt. */
.ma-teamtabelle tbody th > .marke { padding-inline: 0.35rem; }
.ma-teamtabelle tr.wochenende > * { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.ma-teamtabelle tr.heute > th { box-shadow: inset 4px 0 0 var(--nacht); }
.ma-teamtabelle .ma-namen { margin: 0; }
/* Telefon: drei Schichtarten passen ohne seitliches Rollen in den Rahmen
   (412 px: 72 + 3 x 96 = 360 <= 378 px). Die Spalte waechst sonst auf das
   laengste Namenswort samt Polster, daher wenig Polster an Zelle und Namen:
   auch bei Schrift 115 % passt "Schneider" (81 + 10 + 10 = 101 px), der Rahmen
   rollt mit den Probedaten nicht. Mehr Arten rollen weiter seitlich. */
@media (max-width: 640px) {
  .ma-teamtabelle thead th { min-width: 6rem; }
  .ma-teamtabelle td, .ma-teamtabelle thead th:not(:first-child) { padding-inline: 0.3rem; }
  .ma-teamtabelle .ma-name { padding-inline: 0.3rem; }
}

@media (forced-colors: active) {
  .ma-reiter .knopf[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .ma-tag.heute { outline: 2px solid Highlight; outline-offset: -2px; }
  .ma-teamtabelle tr.heute > th { outline: 2px solid Highlight; outline-offset: -2px; }
  .ma-name, .ma-tag .marke { border: 1px solid CanvasText; }
  .ma-name.ich { outline: 3px solid Highlight; }   /* die Fuellung faellt weg */
}
/* ==== Ende Mitarbeiter A */

/* ==== Mitarbeiter B (S18) */
/* Urlaub, Tausch, Wuensche: Abschnitte als Karten, Vorgaenge als Liste. */
.abschnitt-karte { margin-top: 1.4rem; display: grid; gap: 0.8rem; min-width: 0; }
.abschnitt-karte + .abschnitt-karte { margin-top: 1rem; }
.abschnitt-karte > .formular { margin-top: 0; }
.vorgang-liste { list-style: none; margin: 0; padding: 0; }
/* align-content: start - ab 900 px streckt die Rasterzeile die kuerzere Karte auf die Hoehe der Nachbarin; ohne
   das verteilte sich die Resthoehe auf ihre Zeilen (wie bei .heute-karte). */
.vorgang { display: grid; align-content: start; gap: 0.3rem; padding-block: 0.8rem; border-top: var(--spur); overflow-wrap: anywhere; }
.vorgang:last-child { padding-bottom: 0; }
.vorgang-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.vorgang-kopf strong { font-weight: 650; min-width: 0; font-variant-numeric: tabular-nums; }
.vorgang .knopfreihe, .abschnitt-karte > div > .knopfreihe { margin-top: 0.4rem; }
.antrag-zeiten { display: grid; gap: 1.1rem; }
.abschnitt-karte textarea, dialog.blatt textarea { resize: vertical; line-height: 1.45; }
.tausch-erledigt { display: grid; gap: 0.4rem; margin-top: 1rem; }
.tausch-erledigt-titel { font-size: 1rem; font-weight: 700; color: var(--ink-2); }
/* Wuensche: je Schicht ein Rang und sieben Tage nebeneinander (je 44 px). */
.wunsch-schicht { display: grid; gap: 0.8rem; border: 0; margin: 0; padding: 0.9rem 0 0; border-top: var(--spur); min-width: 0; }
.wunsch-schicht > legend { float: left; width: 100%; padding: 0; font-weight: 750; font-size: 1.05rem; }
.wunsch-schicht > .feld { max-width: 16rem; }
.wunsch-tage-reihe { display: flex; flex-wrap: wrap; gap: 0 0.3rem; }
.wunsch-tage-reihe .haken-zeile { min-width: 44px; align-items: center; gap: 0.4rem; padding-inline: 0.3rem 0.5rem; }
.wunsch-tage-reihe .haken-zeile input { margin: 0; }
/* ==== Ende Mitarbeiter B */

/* ==== Stempeluhr (S18) */
/* Kiosk (uhr.js): jeder Knopf mindestens 80 px hoch (Namen 96, Tasten 88,
   Aktionen 104; nur Datenschutz und Menue im Fuss bleiben bei 64), auch in
   der Rueckfrage, die im body haengt (Schliessen 80); das Tastenfeld
   im 3er-Raster ohne Glas. Zustand nie allein ueber Farbe: die Punkte sind
   gefuellt oder hohl, daneben steht "n von 4 Ziffern". Alle Farben aus den
   Tokens - hell und dunkel mit gemessenem Kontrast. */
.uhr {
  display: flex; flex-direction: column; gap: 1.2rem;
  width: min(64rem, 100%); min-height: calc(100dvh - 2rem); margin-inline: auto;
  overflow-wrap: anywhere;
}
.uhr > .knopfreihe { margin-top: 0.2rem; }
.uhr button { -webkit-user-select: none; user-select: none; }
.uhr .knopf, .stempeluhr:not([hidden]) ~ dialog.blatt .knopf { min-height: 80px; font-size: 1.2rem; }
.stempeluhr:not([hidden]) ~ dialog.blatt .rund { width: 80px; height: 80px; }   /* Schliessen der Rueckfrage */
/* Glas (02.11.2026) gilt nicht am Kiosk: die Uhr bleibt deckend wie zuvor. :where() haelt die
   Spezifitaet bei der von .knopf.zweit und .rund, damit :hover (Z. 292, 299) weiter gewinnt. */
:where(.uhr) .knopf.zweit, :where(.stempeluhr:not([hidden]) ~ dialog.blatt) .knopf.zweit, :where(.stempeluhr:not([hidden]) ~ dialog.blatt) .rund {
  background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 var(--glas-licht);
}
.uhr-fuss .knopf { min-height: 64px; font-size: 0.97rem; }   /* Datenschutz und Menue bleiben 64 px (E10) */
/* Nur meine Zeiten ansehen (U1 E9): an = gefuellt mit Haken, nicht allein ueber Farbe.
   Mit .knopf.zweit (0,4,0): sonst gewinnt .knopf.zweit:hover den Grund, die Schrift bliebe hell. */
.knopf.zweit.uhr-umschalter[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.uhr-umschalter[aria-pressed="true"]::before { content: "✓" / ""; }

.uhr-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.4rem 1.5rem; }
.uhr-zeit {
  font-size: clamp(3.4rem, 12vw, 8rem); font-weight: 800; font-stretch: 88%;   /* David 14.10.2026: groesser (vorher hoechstens 5rem) */
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.uhr-datum { color: var(--ink-2); margin-top: 0.35rem; font-variant-numeric: tabular-nums; }   /* 8,0:1 hell, 8,4:1 dunkel */

.uhr-namen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
/* Startseite quer (David 23.10.2026): Ort, Uhrzeit, Datenschutz und Menue in die Ecken wie im
   Hochformat; Hinweis, Meldungen und Namen bleiben in der 64-rem-Spalte. Passen die Namen dort
   nicht auf die Seite, setzt uhr.js .breit: links und rechts je eine Spalte mehr, gleich grosse
   Knoepfe (6 x 15,4375rem + 5 x 0,75rem Luecke = 96,375rem). Hochformat: 100 % = 64 rem, unveraendert.
   Leere nicht: die leere Statuszeile ist fuer Vorleser absolut versteckt (.meldung[role="status"]:empty). */
.uhr:has(> .uhr-namen-kasten) { width: 100%; }
.uhr:has(> .uhr-namen-kasten) > :not(.uhr-kopf, .uhr-fuss, :empty) { width: min(64rem, 100%); margin-inline: auto; }
.uhr:has(> .uhr-namen-kasten.breit) > :not(.uhr-kopf, .uhr-fuss, :empty) { width: min(96.375rem, 100%); }
.knopf.uhr-name, .knopf.uhr-erneut {
  position: relative; width: 100%; min-height: 96px; padding: 0.8rem 1rem 0.8rem 1.6rem;
  border-radius: var(--radius); font-size: 1.5rem; white-space: normal; text-align: center;
}
.knopf.uhr-erneut { font-size: 1.2rem; }
/* Personenfarbe (U1 E8, Form „10b fließend weich“, David 17.10.2026; ersetzt die C-Form vom 14.10.):
   kraeftige Farbe am linken Rand mit leichter „(“-Kerbe, die ohne Stufe in einen leisen Hauch uebergeht.
   Zwei Masken, addiert: (1) der linke Rand einer grossen Ellipse (1000 px, in der Mitte 9 px zurueck)
   blendet nach 6 px voller Farbe ueber 42 px auf einer S-Kurve aus; (2) ein Hauch von 15 % laeuft ueber 230 px aus.
   Viele Stuetzstellen statt weniger, damit keine Kante sichtbar ist. Die Farbe bleibt allein in der Klassenregel. */
.uhr-name .farbe-muster {
  position: absolute; inset: 0; inline-size: auto; block-size: auto;
  border: 0; border-radius: calc(var(--radius) - 1px);
  -webkit-mask-image: radial-gradient(ellipse 1000px 358.6px at 1006px 50%,
      rgb(0 0 0 / 0.000) 95.80%, rgb(0 0 0 / 0.001) 95.97%, rgb(0 0 0 / 0.005) 96.15%, rgb(0 0 0 / 0.016) 96.33%,
      rgb(0 0 0 / 0.035) 96.50%, rgb(0 0 0 / 0.065) 96.67%, rgb(0 0 0 / 0.104) 96.85%, rgb(0 0 0 / 0.152) 97.03%,
      rgb(0 0 0 / 0.210) 97.20%, rgb(0 0 0 / 0.275) 97.38%, rgb(0 0 0 / 0.347) 97.55%, rgb(0 0 0 / 0.422) 97.72%,
      rgb(0 0 0 / 0.500) 97.90%, rgb(0 0 0 / 0.578) 98.08%, rgb(0 0 0 / 0.653) 98.25%, rgb(0 0 0 / 0.725) 98.42%,
      rgb(0 0 0 / 0.790) 98.60%, rgb(0 0 0 / 0.848) 98.78%, rgb(0 0 0 / 0.896) 98.95%, rgb(0 0 0 / 0.935) 99.12%,
      rgb(0 0 0 / 0.965) 99.30%, rgb(0 0 0 / 0.984) 99.47%, rgb(0 0 0 / 0.995) 99.65%, rgb(0 0 0 / 0.999) 99.83%,
      rgb(0 0 0 / 1.000) 100.00%),
    linear-gradient(to right,
      rgb(0 0 0 / 0.150) 0.0px, rgb(0 0 0 / 0.130) 14.4px, rgb(0 0 0 / 0.112) 28.8px, rgb(0 0 0 / 0.095) 43.1px,
      rgb(0 0 0 / 0.080) 57.5px, rgb(0 0 0 / 0.066) 71.9px, rgb(0 0 0 / 0.053) 86.2px, rgb(0 0 0 / 0.042) 100.6px,
      rgb(0 0 0 / 0.033) 115.0px, rgb(0 0 0 / 0.024) 129.4px, rgb(0 0 0 / 0.017) 143.8px, rgb(0 0 0 / 0.012) 158.1px,
      rgb(0 0 0 / 0.007) 172.5px, rgb(0 0 0 / 0.004) 186.9px, rgb(0 0 0 / 0.002) 201.2px, rgb(0 0 0 / 0.000) 215.6px,
      rgb(0 0 0 / 0.000) 230.0px);
  -webkit-mask-composite: source-over;
  mask-image: radial-gradient(ellipse 1000px 358.6px at 1006px 50%,
      rgb(0 0 0 / 0.000) 95.80%, rgb(0 0 0 / 0.001) 95.97%, rgb(0 0 0 / 0.005) 96.15%, rgb(0 0 0 / 0.016) 96.33%,
      rgb(0 0 0 / 0.035) 96.50%, rgb(0 0 0 / 0.065) 96.67%, rgb(0 0 0 / 0.104) 96.85%, rgb(0 0 0 / 0.152) 97.03%,
      rgb(0 0 0 / 0.210) 97.20%, rgb(0 0 0 / 0.275) 97.38%, rgb(0 0 0 / 0.347) 97.55%, rgb(0 0 0 / 0.422) 97.72%,
      rgb(0 0 0 / 0.500) 97.90%, rgb(0 0 0 / 0.578) 98.08%, rgb(0 0 0 / 0.653) 98.25%, rgb(0 0 0 / 0.725) 98.42%,
      rgb(0 0 0 / 0.790) 98.60%, rgb(0 0 0 / 0.848) 98.78%, rgb(0 0 0 / 0.896) 98.95%, rgb(0 0 0 / 0.935) 99.12%,
      rgb(0 0 0 / 0.965) 99.30%, rgb(0 0 0 / 0.984) 99.47%, rgb(0 0 0 / 0.995) 99.65%, rgb(0 0 0 / 0.999) 99.83%,
      rgb(0 0 0 / 1.000) 100.00%),
    linear-gradient(to right,
      rgb(0 0 0 / 0.150) 0.0px, rgb(0 0 0 / 0.130) 14.4px, rgb(0 0 0 / 0.112) 28.8px, rgb(0 0 0 / 0.095) 43.1px,
      rgb(0 0 0 / 0.080) 57.5px, rgb(0 0 0 / 0.066) 71.9px, rgb(0 0 0 / 0.053) 86.2px, rgb(0 0 0 / 0.042) 100.6px,
      rgb(0 0 0 / 0.033) 115.0px, rgb(0 0 0 / 0.024) 129.4px, rgb(0 0 0 / 0.017) 143.8px, rgb(0 0 0 / 0.012) 158.1px,
      rgb(0 0 0 / 0.007) 172.5px, rgb(0 0 0 / 0.004) 186.9px, rgb(0 0 0 / 0.002) 201.2px, rgb(0 0 0 / 0.000) 215.6px,
      rgb(0 0 0 / 0.000) 230.0px);
  mask-composite: add;
}
/* Druck auf den Namen (David 17.10.2026, Variante D, etwas langsamer): Finger drauf hebt den Knopf
   (200 ms) und laesst die Personenfarbe vom Bogen aus ueber den Knopf fluten (400 ms); Loslassen
   oeffnet ihn zur PIN (View Transition, 460 ms; ein Druck beendet sie, auf dem Namen erst nach
   300 ms, uhr.js UEBERGANG_FREI_MS). Klassen .gedrueckt/.oeffnet setzt uhr.js.
   Die Farbschichten liegen hinter dem Namen (isolation + z-index), nur transform/opacity bewegen sich. */
.knopf.uhr-name {
  isolation: isolate;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms ease;
}
.knopf.uhr-name:active { transform: none; }
.uhr-name .farbe-muster { z-index: -1; }
.uhr-name .farbe-muster.uhr-flut {
  -webkit-mask-image: none; mask-image: none;
  opacity: 0; transform: scaleX(0.08); transform-origin: left center;
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .knopf.uhr-name.gedrueckt {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 var(--glas-licht), 0 18px 32px -14px rgb(13 20 32 / 0.6);
  }
  .uhr-name.gedrueckt .uhr-flut, .uhr-name.oeffnet .uhr-flut { opacity: 0.22; transform: none; }
}
/* Die PIN-Ansicht waechst aus dem Namen: alter Zustand = Knopf, neuer = .uhr (uhr.js setzt die Klassen
   nur bei erlaubter Bewegung); der Rest der Seite blendet ueber. */
.knopf.uhr-name.oeffnet, .uhr.aus-name { view-transition-name: uhr-pin; }
.uhr.aus-name { background: var(--surface); }
::view-transition-group(uhr-pin) { animation-duration: 460ms; animation-timing-function: var(--ease-out); }
::view-transition-old(uhr-pin) { animation-duration: 120ms; }
::view-transition-new(uhr-pin) { animation-duration: 320ms; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }

.uhr-fuss { margin-top: auto; display: grid; gap: 0.6rem; }
.uhr-fuss .knopfreihe { margin-top: 0; justify-content: space-between; }
.uhr-status { color: var(--ink-2); font-size: 0.95rem; }
/* Leer unsichtbar, aber im Barrierefreiheitsbaum (wie .ladeanzeige:empty):
   die Region steht schon, wenn eine verspaetete Buchung gemeldet wird. */
.uhr-status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* PIN: vier Punkte und das Tastenfeld */
.uhr-punkte { display: flex; justify-content: center; gap: 1.1rem; margin-top: 0.4rem; }
.uhr-punkte span { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--ink); }
.uhr-punkte span.voll { background: var(--ink); }
.uhr-ziffern, .uhr-vergessen { text-align: center; }
.uhr-tasten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;
  width: min(27rem, 100%); margin-inline: auto;
}
.uhr-taste {
  min-height: 88px; padding: 0.4rem; border-radius: var(--radius); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: var(--surface-2); color: var(--ink);                      /* 15,1:1 hell, 13,9:1 dunkel */
  font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), background-color 150ms ease;
}
.uhr-taste.neben { background: var(--surface); font-size: 1.3rem; font-weight: 650; }
.uhr-taste:active { background: color-mix(in srgb, var(--ink) 14%, var(--surface-2)); }
/* Das Eindruecken nur ohne "Bewegung reduzieren". */
@media (prefers-reduced-motion: no-preference) { .uhr-taste:active { transform: scale(0.96); } }
.uhr-taste:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .uhr-taste:hover { background: color-mix(in srgb, var(--ink) 8%, var(--surface-2)); }
}

/* Aktionen, Bestaetigung (das Ergebnis als zweite Zeile im h1) und Warnung */
.uhr-aktionen { display: grid; gap: 0.9rem; }
.knopf.uhr-aktion, .knopf.uhr-weiter { min-height: 104px; border-radius: var(--radius); font-size: 1.7rem; white-space: normal; }
.knopf.uhr-weiter { min-width: min(18rem, 100%); }
.uhr-gross, .uhr-ergebnis { font-size: clamp(1.3rem, 3.5vw, 1.8rem); font-weight: 650; font-variant-numeric: tabular-nums; }
.uhr-ergebnis { display: block; margin-top: 0.6rem; font-stretch: normal; letter-spacing: normal; line-height: 1.25; }
.uhr-abschnitt { display: grid; gap: 0.5rem; }

/* Meine Zeiten: die Tabelle aus ma.js (Regeln bei Mitarbeiter A), hier mit
   sichtbarem Monat. */
.uhr .ma-zeiten caption { text-align: left; font-weight: 700; padding: 0.6rem 0.7rem 0.2rem; }

@media (forced-colors: active) {
  .uhr-taste { border: 1px solid CanvasText; }
  .uhr-punkte span { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .uhr-punkte span.voll { background: CanvasText; }
}
/* ==== Ende Stempeluhr */

/* ==== Plan: Raster (S15a P1) */
/* plan.js: Werkzeugleiste, Monatsraster, Sprungknoepfe, Druck. Zustaende nie
   nur ueber Farbe: Verstoss = roter Rand UND Warnzeichen UND Label, von Hand
   "·", Ausnahme "*", leer "frei", heute = Balken UND Marke "heute",
   Wochenende/Feiertag/geschlossen stehen als Text im Zeilenkopf.
   Ideen aus Schichtplan 2.0 @390ca8a: app/static/style.css (Plan-Tabelle,
   Zellen). */
.plan { display: grid; gap: 1rem; min-width: 0; container: plan / inline-size; }   /* Breite fuer das Raster (U1 E3) */
.plan > .unterzeile { margin-top: 0; }
.plan-werkzeug { display: grid; gap: 0.8rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.plan-wahl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1.2rem; }
.plan-wahl .feld { flex: 0 1 20rem; min-width: min(14rem, 100%); }
.plan-monate { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* Feste Breite: die Pfeile stehen in jedem Monat an derselben Stelle. */
.plan-monat { font-weight: 750; font-variant-numeric: tabular-nums; min-width: 9rem; text-align: center; }
.plan-werkzeug .knopfreihe { margin-top: 0; gap: 0.5rem; }
/* Kompakte Knoepfe (U3, Davids Wahl 8): kleinere Schrift, weniger Innenabstand,
   die Hoehe bleibt 44 px (.knopf). Nur hier und in der Knopfreihe der
   Standortkarten - nicht fuer jeden .knopf ("Zeit nachtragen" und "Neuer
   Standort" bleiben); die Monatsleiste der Zeiten hat nur Pfeile. */
.plan-werkzeug .knopf, .standorte-liste .knopfreihe .knopf { font-size: 0.9rem; padding-inline: 0.8rem; }
/* Monatspfeile in Plan und Zeiten: rund, 44 x 44, nur das Symbol (Name per
   aria-label); links ist i-rechts gespiegelt. Steht nach der Kompakt-Regel
   (gleiches Gewicht), damit padding: 0 gilt. */
.knopf.monat-pfeil { width: 44px; padding: 0; flex: none; }
.knopf.monat-pfeil .i { width: 1.3rem; height: 1.3rem; }
.knopf.monat-pfeil .i.links { transform: scaleX(-1); }
/* Der alte Monatsname beim Wechsel (monat-bewegung.js, U3 Wahl 2): eine Kopie
   ueber der Leiste; ihre Lage traegt die Animation (transform). */
.monat-alt { position: absolute; pointer-events: none; }
/* Aktionen am Monat als offener Block mit Titel (U1 E5). */
.plan-aktionen { display: grid; gap: 0.6rem; min-width: 0; }
.plan-aktionen-titel { margin: 0; font-size: 1.02rem; }
.plan-saetze { display: grid; gap: 0.3rem; }
.plan-saetze:empty { display: none; }

/* Sprungknoepfe: unsichtbar, bis sie den Fokus haben (wie .sprunglink). */
.plan-sprung:not(:focus) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.plan-sprung { justify-self: start; }

/* Monat (U1 E3): senkrecht rollt die Seite, nie der Rahmen. Passt das Raster
   in die Breite, klebt die Kopfzeile an der Seite (unter der Kopfleiste,
   ab 900 px oben); sonst rollt nur der Rahmen seitlich, die Tagspalte klebt
   links, die Kopfzeile nicht (WCAG 1.4.10, Datentabelle). "Passt" je
   Spaltenzahl (.spalten-N aus plan.js) per Container-Abfrage an .plan:
   Tagspalte 4rem + N x 7rem + 2 px Rahmen (aufgerundet 0.125rem).
   Knapp darunter (U3, Fold7 aussen 411 px: .plan 379 px, drei Schichten
   brauchten 402 px) passt es mit 6.5rem je Spalte (--raster-spalte), wenn
   Kaertchen und Spaltenkopf seitlich nur 0.3rem Polster haben
   (--raster-innen): 6.5rem - 2 x 4 px Zelle - 2 x 1 px Rand - 2 x 0.3rem
   = 84.4 px Text, so viel wie in 7rem mit 0.55rem Polster - kein Wort
   bricht frueher um. Ab 7rem je Spalte bleibt alles wie bisher.
   Ohne Container-Abfragen bleibt es beim seitlichen Rollen. Niedriges
   Fenster (400 % Zoom): Kopfzeile nie klebend (R5).
   Am Ende des seitlichen Rollwegs (U3, Fold7 aussen, vier Schichten: nur
   135 px) gab der Rahmen einen weiteren Wisch im Daumenbogen oder schraeg
   ab 40 Grad an die Seite weiter: sie stand kurz und rutschte dann 61 bis
   270 px senkrecht weg. overscroll-behavior-x behaelt die Geste im Rahmen
   wie mitten im Rollweg (Nachbau 4 und 5 Schichten: Seite bewegt in 0 statt
   16 von 92 Gesten je Fall). none, nicht contain: mit contain federte der
   Rahmen am Fold7 ~1,4 s nach einem Wisch ans Ende ~40 px nach und zurueck
   (Rueckfeder-Effekt des Rahmens, David 24.10.: "springt verzoegert");
   none haelt die Geste ebenso und zeigt keinen Effekt (Fold7: 0 px Seite
   bei Wischen bis 45 Grad an beiden Enden, kein Nachfedern). Nur
   waagerecht: steiler rollt weiter die Seite. */
.plan-rahmen {
  overflow-x: var(--raster-x, auto);
  background: var(--glas-dicht); border: 1px solid var(--glas-rand); border-radius: 22px;
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  box-shadow: inset 1px 1px 0 var(--glas-licht), inset -1px -1px 0 var(--glas-saum), var(--glas-schatten);
  scroll-padding-left: 4.5rem;
  overscroll-behavior-x: none;
}
@container plan (min-width: 11.125rem) { .plan-rahmen.spalten-1 { --raster-x: visible; --raster-kopf: sticky; } }
@container plan (min-width: 18.125rem) { .plan-rahmen.spalten-2 { --raster-x: visible; --raster-kopf: sticky; } }
@container plan (min-width: 25.125rem) { .plan-rahmen.spalten-3 { --raster-x: visible; --raster-kopf: sticky; } }
@container plan (min-width: 32.125rem) { .plan-rahmen.spalten-4 { --raster-x: visible; --raster-kopf: sticky; } }
@container plan (min-width: 39.125rem) { .plan-rahmen.spalten-5 { --raster-x: visible; --raster-kopf: sticky; } }
@container plan (min-width: 46.125rem) { .plan-rahmen.spalten-6 { --raster-x: visible; --raster-kopf: sticky; } }
@container plan (10.625rem <= width < 11.125rem) { .plan-rahmen.spalten-1 { --raster-x: visible; --raster-kopf: sticky; --raster-spalte: 6.5rem; --raster-innen: 0.3rem; } }
@container plan (17.125rem <= width < 18.125rem) { .plan-rahmen.spalten-2 { --raster-x: visible; --raster-kopf: sticky; --raster-spalte: 6.5rem; --raster-innen: 0.3rem; } }
@container plan (23.625rem <= width < 25.125rem) { .plan-rahmen.spalten-3 { --raster-x: visible; --raster-kopf: sticky; --raster-spalte: 6.5rem; --raster-innen: 0.3rem; } }
@container plan (30.125rem <= width < 32.125rem) { .plan-rahmen.spalten-4 { --raster-x: visible; --raster-kopf: sticky; --raster-spalte: 6.5rem; --raster-innen: 0.3rem; } }
@container plan (36.625rem <= width < 39.125rem) { .plan-rahmen.spalten-5 { --raster-x: visible; --raster-kopf: sticky; --raster-spalte: 6.5rem; --raster-innen: 0.3rem; } }
@container plan (43.125rem <= width < 46.125rem) { .plan-rahmen.spalten-6 { --raster-x: visible; --raster-kopf: sticky; --raster-spalte: 6.5rem; --raster-innen: 0.3rem; } }
/* Schiebe-Hinweis (U3): rollt der Rahmen seitlich, liegt am rechten Rand
   ein schmaler Schatten UEBER den Zellen, sobald geschoben ist auch rechts
   neben der klebenden Tagspalte. Als Hintergrund des Rahmens (background-
   attachment: local) verdeckten ihn die farbigen Zellen. Rechts klebt eine
   Leiste (sticky) im selben Rasterfeld wie die Tabelle, links haengt sie
   an jedem Zeilenkopf. Beide blenden mit dem Schiebestand ein und aus
   (Scroll-Zeitleiste --plan-x). Ohne Zeitleiste (iOS < 26, Firefox) und
   wenn nichts rollt (Zeitleiste inaktiv) bleiben sie unsichtbar, wie
   bisher. Erzwungene Farben: der Verlauf entfaellt (background-image). */
.plan-rahmen { display: grid; grid-template-columns: minmax(min-content, 1fr); scroll-timeline: --plan-x x; }   /* Feld so breit wie die Tabelle */
.plan-rahmen > *, .plan-rahmen::after { grid-area: 1 / 1; }
.plan-rahmen::after, .plan-tabelle tbody th::after {
  content: ""; width: 0.9rem; opacity: 0; pointer-events: none;
  --rand: color-mix(in srgb, var(--ink) 20%, transparent);
}
@media (prefers-color-scheme: dark) { .plan-rahmen::after, .plan-tabelle tbody th::after { --rand: color-mix(in srgb, var(--ground) 85%, transparent); } }
.plan-rahmen::after { position: sticky; right: 0; z-index: 4; justify-self: end; background: linear-gradient(to left, var(--rand), transparent); }
.plan-tabelle tbody th::after { position: absolute; top: 0; bottom: 0; left: 100%; background: linear-gradient(to right, var(--rand), transparent); }
@keyframes plan-rand { to { opacity: 1; } }
@supports (animation-timeline: scroll()) {
  .plan-rahmen::after, .plan-tabelle tbody th::after { animation-name: plan-rand; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --plan-x; }
  .plan-tabelle tbody th::after { animation-range: 0 1rem; }
  .plan-rahmen::after { animation-direction: reverse; animation-range: calc(100% - 1rem) 100%; }
}
/* Ohne Zeitleiste, wo der Browser den Scroll-Zustand abfragen kann (Chromium
   133+, also auch die App-WebView): am Fold7 (David 24.10.2026, "haengt")
   hielten die scroll-gebundenen Animationen der Leisten jeden Wisch mit
   Schwung ~0,4 s an, dann sprang der Plan 66-93 px weiter (frischer App-Start,
   je 2 Reihen: mit Zeitleiste 6 von 6 Gesten, ohne 0 von 6). Die Abfrage
   zeigt die rechte Leiste, solange rechts noch etwas kommt, die an den
   Zeilenkoepfen, sobald geschoben ist. */
@supports (container-type: scroll-state) {
  .plan-rahmen { container: plan-x / scroll-state; }
  .plan-rahmen::after, .plan-tabelle tbody th::after { animation: none; }
  @container plan-x scroll-state(scrollable: right) { .plan-rahmen::after { opacity: 1; } }
  @container plan-x scroll-state(scrollable: left) { .plan-tabelle tbody th::after { opacity: 1; } }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (container-type: scroll-state) { .plan-rahmen::after, .plan-tabelle tbody th::after { transition: opacity 150ms; } }
}
@media (max-height: 30rem) {
  .plan-rahmen .plan-tabelle thead th { position: static; }
}
.plan-rahmen:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

.plan-tabelle { border-collapse: separate; border-spacing: 0; min-width: 100%; font-variant-numeric: tabular-nums; }
.plan-tabelle caption { caption-side: top; text-align: left; font-weight: 700; padding: 0.8rem 0.9rem 0.5rem; }
.plan-tabelle th, .plan-tabelle td { padding: 3px 4px; text-align: left; vertical-align: top; border-top: var(--spur); }
.plan-tabelle thead th {
  position: var(--raster-kopf, static); top: 0; z-index: 2; background: var(--glas-zelle);
  padding: 0.5rem var(--raster-innen, 0.6rem); border-top: 0; border-bottom: var(--spur);
  font-size: 0.92rem; font-weight: 700; min-width: var(--raster-spalte, 7rem);
  overflow-wrap: anywhere; hyphens: auto;   /* langer Schichtname weitet die Spalte nicht ueber die Mindestbreite, sonst stimmt die Schwelle nicht */
}
@media (max-width: 899.98px) { .plan-tabelle thead th { top: var(--kopf-hoehe); } }
.plan-tabelle thead th small { display: block; color: var(--ink-2); font-weight: 600; }   /* 8,0:1 auf surface */
/* Tagspalte (U1 E4, U2 P1): fest 4rem so breit wie das Datum (min-width und
   width: bekommt keinen Ueberschuss ab). Gemessen in Chrome mit Bricolage
   Grotesque 650: "00.00." 3,10rem (49,6 px bei 17 px Schrift) + Polster
   0.7rem + Rand 1 px = 3,86rem, aufgerundet auf 0.25rem. "Mo" steht ueber
   "05.10." (zwei Bloecke in .plan-tag). */
.plan-tabelle tbody th {
  position: sticky; left: 0; z-index: 1; background: var(--surface);   /* deckend: beim seitlichen Rollen scheint nichts durch (S21b O4) */
  min-width: 4rem; width: 4rem; padding: 0.4rem 0.25rem 0.4rem 0.45rem; border-right: var(--spur); font-weight: 650;
}
.plan-tabelle thead th:first-child { left: 0; z-index: 3; min-width: 4rem; width: 4rem; background: var(--surface); }
.plan-tabelle tbody th > * { display: block; width: fit-content; }
.plan-tabelle tbody th > * + * { margin-top: 0.2rem; }
.plan-tabelle tbody th .plan-tag { width: min-content; }
.plan-tabelle tbody th .plan-tag > * { display: block; }
.plan-tabelle tbody th .marke { padding: 0.1rem 0.35rem; font-size: 0.72rem; }
.plan-tagtext { color: var(--ink-2); font-size: 0.72rem; font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
/* Ein Knopf im Raster, an den die Seite rollt (Zellen und "n abwesend" im
   Tageskopf, beide in der Pfeiltasten-Navigation), liegt nie unter der
   klebenden Kopfzeile, auch wenn ein Schichtname zweizeilig ist (WCAG 2.4.11). */
.plan-tabelle tbody button { scroll-margin-top: 5.5rem; }
.plan-tabelle td > * + * { margin-top: 6px; }      /* Abstand: der Fokusring sitzt nie auf der Nachbarzelle (K21) */

/* Zeilen: Toenung hilft, der Text im Kopf sagt es. */
.plan-tabelle tr.wochenende > *, .plan-tabelle tr.feiertag > * { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.plan-tabelle tr.geschlossen > * { background: var(--surface-2); }
.plan-tabelle tr.heute > th { box-shadow: inset 4px 0 0 var(--nacht); }

/* Zellknoepfe: mindestens 44 x 44 px (WCAG 2.5.8). */
.plan-zelle, .plan-plus, .plan-frei, .plan-abwesend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.35rem;
  width: 100%; min-width: 44px; min-height: 44px; padding: 0.3rem var(--raster-innen, 0.55rem);
  border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); color: var(--ink);                     /* 15,1:1 */
  font-size: 0.92rem; line-height: 1.25; text-align: left; overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
.plan-name { font-weight: 650; }
.plan-zeit, .plan-position { flex-basis: 100%; font-size: 0.8rem; font-weight: 600; }
.plan-vermerk { font-weight: 800; }
.plan-zelle .i { width: 1em; height: 1em; stroke-width: 2.3; }
.plan-zelle.leer { background: transparent; color: var(--ink-2); font-style: italic; border: 1px dashed var(--feld-rand); }
.plan-zelle.verstoss { border: 0; box-shadow: inset 0 0 0 3px var(--fehler); }
.plan-zelle.hilfe { border-style: dashed; border-color: var(--feld-rand); }
.plan-plus, .plan-frei { width: 44px; justify-content: center; background: transparent; border-color: var(--feld-rand); font-weight: 750; }
.plan-frei { color: var(--ink-2); }
.plan-abwesend { width: auto; min-height: 44px; padding-inline: 0.6rem; font-size: 0.82rem; font-weight: 650; border-color: var(--feld-rand); background: var(--surface); }
.plan-tabelle .plan-abwesend {   /* Zeichen und Zahl nebeneinander, mittig in 4rem (U1 E4, U2 P1) */
  display: flex; justify-content: center; align-items: center; gap: 0.2rem;
  padding-inline: 0.3rem; font-size: 0.82rem; text-align: center; overflow-wrap: normal;
}
.plan-abwesend .i { width: 1.1rem; height: 1.1rem; }
.plan-tagmarke { white-space: normal; }

/* Fokus im Raster: doppelter Ring - Flaeche dicht am Knopf, darauf der Ring
   in --fokus. So bleibt er auch neben Personenfarben sichtbar (K21). Die
   Regel schlaegt [tabindex="-1"]:focus. */
.plan-rahmen button:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--surface); }
.plan-rahmen .plan-zelle.verstoss:focus-visible { box-shadow: inset 0 0 0 3px var(--fehler), 0 0 0 2px var(--surface); }
@media (hover: hover) and (pointer: fine) {
  .plan-plus:hover, .plan-frei:hover, .plan-abwesend:hover, .plan-zelle.leer:hover { background: var(--surface-2); }
}

/* Personenfarben (K1): Flaeche aus db.FARBEN, Schrift weiss oder schwarz
   nach pdf._dunkel - jede Klasse mindestens 4,5:1, hell und dunkel gleich
   (tests/test_plan_oberflaeche.py rechnet nach). */
.plan-zelle.farbe-0, .farbe-muster.farbe-0 { background: #546e7a; color: #ffffff; }
.plan-zelle.farbe-1, .farbe-muster.farbe-1 { background: #7cb342; color: #000000; }
.plan-zelle.farbe-2, .farbe-muster.farbe-2 { background: #3949ab; color: #ffffff; }
.plan-zelle.farbe-3, .farbe-muster.farbe-3 { background: #2e7d32; color: #ffffff; }
.plan-zelle.farbe-4, .farbe-muster.farbe-4 { background: #8e24aa; color: #ffffff; }
.plan-zelle.farbe-5, .farbe-muster.farbe-5 { background: #f57c00; color: #000000; }
.plan-zelle.farbe-6, .farbe-muster.farbe-6 { background: #1e88e5; color: #000000; }
.plan-zelle.farbe-7, .farbe-muster.farbe-7 { background: #e53935; color: #000000; }
.plan-zelle.farbe-8, .farbe-muster.farbe-8 { background: #0097a7; color: #000000; }
.plan-zelle.farbe-9, .farbe-muster.farbe-9 { background: #6d4c41; color: #ffffff; }
.plan-zelle.farbe-10, .farbe-muster.farbe-10 { background: #f9a825; color: #000000; }
.plan-zelle.farbe-11, .farbe-muster.farbe-11 { background: #d81b60; color: #ffffff; }

.plan-druckhinweis { display: none; }

@media (forced-colors: active) {
  .plan-zelle, .plan-plus, .plan-frei, .plan-abwesend { border: 1px solid ButtonText; }
  .plan-zelle.verstoss { border: 3px solid CanvasText; }
  .plan-tabelle tr.heute > th { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Druck (K5): nur das Raster samt Caption und der Hinweis auf das PDF -
   keine Werkzeugleiste, keine Pruefhinweise, keine Stunden, keine
   Bedienknoepfe ("+", "n abwesend"). Browser drucken ohne Hintergruende:
   Personenfarben werden schwarze Schrift auf Weiss mit Rand, der Verstoss
   ein roter Rand statt des Schattens (Zeichen und Label tragen ihn auch). */
@media print {
  .plan-werkzeug, .plan-sprung, .plan > .meldung, .plan-befunde, .plan-stunden, .plan-legende,
  .plan-plus, .plan-abwesend { display: none !important; }
  .plan-rahmen { display: block; overflow: visible; max-height: none; border: 0; }
  .plan-rahmen::after, .plan-tabelle tbody th::after { display: none; }
  .plan-tabelle thead th, .plan-tabelle tbody th { position: static; }
  .plan-zelle { background: none !important; color: #000000 !important; border: 1px solid #000000; box-shadow: none; }
  .plan-zelle.verstoss { border: 3px solid #b42318 !important; }
  .plan-druckhinweis { display: block; margin-top: 0.8rem; }
  /* Druckt der Browser im Dunkelschema, blieben Titel, Kopf und Tagspalte
     hellgrau auf Papier. */
  .plan, .plan * { color: #000000 !important; background: none !important; }
}
/* ==== Ende Plan: Raster */

/* ==== Plan: Blatt (S15a P2) */
/* Das Zellen-Blatt (plan-blatt.js): Abschnitte als details, Vorschlaege als
   Knoepfe von mindestens 44 px. Farbe traegt nie allein: die Marken haben
   Text, die Auswahl ein Haken-Symbol und einen dickeren Rand. */
.blatt-titel { font-size: 1rem; font-weight: 700; line-height: 1.3; margin: 0; }
.blatt-stand p, .blatt-bereich p { margin: 0; }
.blatt-stand { display: grid; gap: 0.35rem; }
.blatt-bereich { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }   /* das Suchfeld weitet die Spalte sonst ueber den Abschnitt (320 px, 200 %) */

.blatt-abschnitt {
  border: 1px solid var(--glas-rand); border-radius: var(--radius-feld);
  background: linear-gradient(180deg, var(--glas-glanz), transparent 70%), color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: inset 1px 1px 0 var(--glas-licht-2), inset -1px -1px 0 var(--glas-saum);
  padding: 0 1rem; overflow-wrap: anywhere;
}
.blatt-abschnitt[open] { padding-bottom: 1rem; }
.blatt-abschnitt > summary {
  display: block; min-height: 44px; padding-block: max(0px, (44px - 1.55em) / 2); padding-inline-end: 1.2rem;   /* eine Zeile = 44 px; rechts Platz fuer den Winkel */
  cursor: pointer; font-weight: 650; overflow-wrap: anywhere;
}
.blatt-abschnitt > :not(summary) { margin-top: 0.8rem; margin-bottom: 0; }
.blatt-abschnitt > .knopfreihe { margin-top: 1rem; }

.vorschlag-suche {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
  border: 1px solid var(--feld-rand); border-radius: var(--radius-feld);
  background: var(--glas-feld); color: var(--ink); box-shadow: var(--glas-mulde); font: inherit; font-size: max(16px, 1rem);
}
.vorschlag-suche:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; border-color: var(--fokus); }
.vorschlagsliste { display: grid; gap: 0.5rem; }
.vorschlag {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem;
  width: 100%; min-height: 44px; padding: 0.65rem 0.9rem; text-align: start;
  font: inherit; line-height: 1.35; color: var(--ink); cursor: pointer; overflow-wrap: anywhere;   /* Knopf erbt es nicht vom Abschnitt */
  background: var(--surface); border: 1px solid var(--feld-rand); border-radius: var(--radius-feld);
}
.vorschlag strong { font-weight: 700; overflow-wrap: anywhere; }
.vorschlag .i { width: 1.1em; height: 1.1em; flex: none; }
.vorschlag.ist-ueberstunden { border-inline-start: 4px solid var(--warnung-text); }
.vorschlag-grund { flex: 1 1 100%; color: var(--ink-2); font-size: 0.9rem; line-height: 1.4; }
.vorschlag[aria-pressed="true"] {
  background: var(--surface-2); border-width: 2px; border-color: var(--ink);
  padding: calc(0.65rem - 1px) calc(0.9rem - 1px);
}
.vorschlag:disabled { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .vorschlag:hover:not(:disabled) { background: var(--surface-2); } }
@media (forced-colors: active) { .vorschlag[aria-pressed="true"] { border-color: Highlight; } }

.abgelehnt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.abgelehnt-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.abgelehnt-text { flex: 1 1 12rem; overflow-wrap: anywhere; }

.abschnitt-liste { display: grid; gap: 0.7rem; }
.abschnitt-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 0.7rem; }   /* bei 200 % Text eine Spalte (1.4.10) */
.blatt-tage { display: flex; flex-wrap: wrap; gap: 0.1rem 1.1rem; }
.blatt-tage legend { flex: 1 1 100%; }
/* ==== Ende Plan: Blatt */

/* ==== Plan: Befunde (S15a P3) */
/* Befunde und Stunden: Klassen setzt plan-befunde.js selbst (.plan-befunde,
   .plan-stunden). Die Stufe steht immer als Text-Marke da; Rand und Farbe
   helfen nur. */
.plan-befunde, .plan-stunden { display: grid; gap: 0.8rem; min-width: 0; }
.plan-befunde h3, .plan-befunde h4 { margin: 0; line-height: 1.25; }
.befund-gruppentitel { font-size: 1.02rem; font-weight: 750; margin-top: 0.4rem; }
.befund-schichttitel { font-size: 0.95rem; font-weight: 700; color: var(--ink-2); }
.befund-hinweis { margin: 0; max-width: 60rem; color: var(--ink-2); overflow-wrap: anywhere; }

.befund-legende { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.9rem; align-items: start; margin: 0; }
.befund-legende dt, .befund-legende dd { margin: 0; }
.befund-legende dd { color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 640px) { .befund-legende { grid-template-columns: 1fr; gap: 0.2rem; } .befund-legende dd { margin-bottom: 0.4rem; } }

.befund-schicht { display: grid; gap: 0.5rem; }
.befund-person { border: var(--spur); border-radius: var(--radius-feld); background: var(--surface); }
.befund-person > summary { min-height: 44px; padding: 0.55rem 0.8rem; cursor: pointer; overflow-wrap: anywhere; }
.befund-person > summary .marke { margin-left: 0.5rem; vertical-align: middle; }
.befund-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.befund-person > .befund-liste { padding: 0 0.8rem 0.8rem; }

.befund-zeile { padding: 0.65rem 0.8rem; border-radius: var(--radius-feld); background: var(--surface-2); border-left: 4px solid var(--ink-3); min-width: 0; }
.befund-zeile.stufe-fehler { border-left-color: var(--fehler); }
.befund-zeile.stufe-warnung { border-left-color: var(--warnung-text); }
.befund-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0 0 0.3rem; }
.befund-text { margin: 0; overflow-wrap: anywhere; }
.befund-norm { margin: 0.25rem 0 0; color: var(--ink-2); font-size: 0.88rem; }
.befund-zeile .meldung { margin-top: 0.5rem; }

.befund-orte { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.befund-einzel { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.knopf.befund-ort { min-height: 44px; padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.befund-tage { margin-top: 0.5rem; }
.befund-tage > summary { min-height: 44px; padding: 0.5rem 0; padding-inline-end: 1.2rem; cursor: pointer; font-weight: 650; }

.plan-stunden .ma-zeiten th, .plan-stunden .ma-zeiten td { overflow-wrap: anywhere; }
/* Marken im Blatt und in der Stundenliste brechen um: bei 200 % Text rollt nichts seitlich (WCAG 1.4.10, S15b N1/N3) */
.blatt-bereich .marke, .plan-stunden .marke { white-space: normal; }

@media (forced-colors: active) {
  .plan-befunde .marke { border: 1px solid CanvasText; }
  .befund-zeile, .befund-person { border: 1px solid CanvasText; }
}
/* Gedruckt wird nur das Raster (Entscheidungen K5). */
@media print { .plan-befunde, .plan-stunden { display: none; } }
/* ==== Ende Plan: Befunde */

/* ==== Tagesgeschaeft: gemeinsam (S16 P0) */
/* Gemeinsam fuer antraege, abwesenheiten, zeiten, pruefungen, protokoll:
   lange Marken brechen um (Kennzeichen-Texte; auch in Blaettern, die ausserhalb
   von .tg am body haengen, K6), Verweise sind 44 px hohe Zeilen,
   Werkzeugzeilen brechen um. Kein Umbruchverbot, keine feste Hoehe. */
.tg .marke, dialog.blatt .marke { white-space: normal; overflow-wrap: anywhere; }
.tg .vorgang, .tg .vorgang-kopf { min-width: 0; overflow-wrap: anywhere; }
.tg-verweis { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* Unten buendig wie .plan-wahl (U1 E7): Knoepfe und Verweise stehen auf
   der Linie des Auswahlfelds, nicht hoeher. */
.tg-werkzeug { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.8rem; }
/* Abstand unter dem Titel: eine Regel fuer alle Ansichten (nur Standorte hat ein eigenes Mass). Die Jahreszeile in
   "Abwesend" steht in einem Abschnitt, nicht direkt in .tg. */
.tg > .tg-werkzeug { margin-top: 1rem; }
.tg-pin { font-size: 2rem; font-weight: 700; letter-spacing: 0.3em; margin: 0.4rem 0; }
/* Erzwungene Farben: ohne Hintergrund bliebe von einer Marke nur Text (E2, V5).
   Druck: keine Bedienelemente (Bauplan 3.2), der Inhalt bleibt. */
@media (forced-colors: active) { .tg .marke, dialog.blatt .marke { border: 1px solid CanvasText; } }
@media print { .tg .knopf, .tg .knopfreihe, .tg .tg-verweis, .tg .feld, .tg input, .tg select { display: none; } }
/* ==== Ende Tagesgeschaeft: gemeinsam */

/* ==== Antraege (S16 P2) */
/* Vorgaenge als Karten: am Handy eine Spalte, ab 900 px nebeneinander;
   Knopfreihen brechen um (.knopfreihe). */
.tg-antraege .vorgang-liste { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.6rem; }
@media (min-width: 900px) {
  .tg-antraege .vorgang-liste { grid-template-columns: repeat(var(--liste-spalten), minmax(min(22rem, 100%), 1fr)); }
}
.tg-antraege > .blatt-abschnitt { margin-top: 1rem; }
.antr-warnungen { margin: 0.4rem 0 0; padding-left: 1.3rem; overflow-wrap: anywhere; }
/* ==== Ende Antraege */

/* ==== Abwesenheiten (S16 P2) */
/* Baustein in "Anträge und Abwesenheiten" (U2 P4): der Abschnitt "Abwesend" mit Jahreswahl, dahinter die
   Aufklapper "Urlaubskonto" und "Vergangen". */
.abw-jahr { align-items: center; margin-top: 0; }
.abw-jahr-text { min-width: 3.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.tg-abwesenheiten .vorgang-liste { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.6rem; }
@media (min-width: 900px) {
  .tg-abwesenheiten .vorgang-liste { grid-template-columns: repeat(var(--liste-spalten), minmax(min(22rem, 100%), 1fr)); }
}
.abw-konto-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; overflow-wrap: anywhere; }
.abw-gruppe-titel { font-size: 1rem; margin: 0.4rem 0 0.2rem; }
.tg-abwesenheiten div[data-gruppe] + div[data-gruppe] { margin-top: 1.2rem; }
.tg-abwesenheiten > .blatt-abschnitt { margin-top: 1rem; }
/* ==== Ende Abwesenheiten */

/* ==== Zeiten (S16 P3) */
/* Karten je Person statt einer breiten Tabelle (E6, WCAG 1.4.10): ein DOM
   fuer alle Breiten, ab 900 px nebeneinander. Aufklapper sind 44 px hoch. */
/* Die Monatsnavigation bleibt eine Zeile (flex: none) und bricht erst bei
   schmaler Breite in sich um (max-width), U1 E7. Pfeile wie im Plan
   (.knopf.monat-pfeil, U3). */
.zeiten-monat { position: relative; flex: none; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* Fest 9rem auf jeder Breite: ein Prozent zaehlte bei der Eigenbreite der
   Navigation als 0, sie wuerde zu schmal und braeche bei kurzen Monaten um
   (Q.2 F8). Mit den Pfeilen passt die Zeile ab 320 px (2 x 44 px + 9rem). */
.zeiten-monat .abschnitt-titel { margin: 0; min-width: 9rem; text-align: center; }
/* Suche ueber der Personenliste (U3): Feld und "Keine Treffer." in einer Zeile. */
.zeiten-suche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.8rem; margin-top: 1rem; }
.zeiten-suche .feld { flex: 0 1 16rem; min-width: min(12rem, 100%); }
.zeiten-suche .meldung { margin: 0; }
.zeiten-bedenken:empty { display: none; }
.zeiten-bedenken { margin-top: 0.8rem; color: var(--warnung-text); overflow-wrap: anywhere; }
.zeiten-bedenken p, .zeiten-bedenken ul { margin: 0; }
.zeiten-bedenken ul { padding-left: 1.2rem; }
.zeiten-sollist > .vorgang-liste { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.2rem; }
@media (min-width: 900px) {
  .zeiten-sollist > .vorgang-liste { grid-template-columns: repeat(var(--liste-spalten), minmax(min(22rem, 100%), 1fr)); }
}
.zeiten-person > p, .zeiten-eintrag > p, .tg-zeiten .vorgang > p { margin: 0; overflow-wrap: anywhere; }
/* Umschalter Mitarbeiter | Standorte (U2 P2): wie .ma-reiter, eigene Klasse - eine Glas-Rinne,
   der gewaehlte Knopf ist die Linse. Haken und Fettschrift bleiben (nie nur Farbe). */
.zeiten-sicht {
  display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; margin-top: 1rem;
  padding: 4px; border-radius: 26px; border: 1px solid var(--glas-rand);
  background: color-mix(in srgb, var(--surface) 30%, transparent); box-shadow: var(--glas-mulde);
}
.zeiten-sicht .knopf {
  padding-inline: 1rem; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: start;
  background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.zeiten-sicht .knopf[aria-pressed="true"] { background: var(--glas-linse); color: var(--t-nacht); border-color: var(--glas-rand); box-shadow: var(--glas-linse-schatten); font-weight: 750; }
.zeiten-sicht .knopf[aria-pressed="true"]::before { content: "✓" / ""; }
@media (hover: hover) and (pointer: fine) {
  .zeiten-sicht .knopf[aria-pressed="false"]:hover { background: var(--glas-hover); }
  .zeiten-sicht .knopf[aria-pressed="true"]:hover { background: var(--glas-linse); }
}
@media (forced-colors: active) {
  .zeiten-sicht .knopf[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
/* Namens-Koepfe (je Person, je Standort, Pruefhinweise je Person): Flex-Kopf, der Winkel haengt am Namen
   (Sammelregel im Team-Abschnitt), Marken daneben, die Differenz rechts; eng rutschen Marken und Differenz
   in die naechste Zeile, statt den Namen mitten im Wort zu trennen (320 px, Text 200 %). */
.zeiten-auf > summary, .tg-zeiten .befund-person > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.zeiten-auf > :not(summary) { margin: 0 0 0.3rem; overflow-wrap: anywhere; }
.zeiten-auf > .zeiten-ortpersonen { margin-top: 0.4rem; }
.zeiten-diff { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.tg-zeiten details > summary { min-height: 44px; padding: 0.3rem 0; cursor: pointer; font-weight: 650; overflow-wrap: anywhere; }
/* Text-Koepfe (Dateien, Stempelungen, Storniert, Nicht geprueft): Block, der Winkel haengt am letzten Wort. */
.tg-zeiten details:not(.zeiten-auf):not(.befund-person) > summary { display: block; padding-block: max(0px, (44px - 1.55em) / 2); padding-inline-end: 1.2rem; }
/* Pruefhinweise je Person stehen in einem Kasten mit Rand: der Name haelt Abstand dazu wie die Liste darunter
   (die Regel oben nahm .befund-person > summary sein seitliches Polster, der Name stiess an den Rand). */
.tg-zeiten .befund-person > summary { padding-inline: 0.8rem; }
.zeiten-eintraege { margin: 0; padding: 0; }
.zeiten-eintrag:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: var(--radius-feld); }
.zeiten-storniert, .zeiten-dateien { margin-top: 1rem; }
.zeiten-befunde { display: grid; gap: 0.8rem; min-width: 0; margin-top: 1.4rem; }
.zeiten-befunde .abschnitt-titel { margin: 0; }
.tg-zeiten > .tg-verweis { margin-top: 1rem; }
.zeiten-dateien > .kleingedruckt { margin: 0.6rem 0 0; }
/* Druck: ohne Suche, ohne die einzelnen Stempelungen und Stornierten (auch
   wenn am Schirm aufgeklappt, LB 4.6), und alle Personen stehen da - auch die,
   die die Suche am Schirm versteckt ([hidden] ist sonst !important). */
@media print { .zeiten-dateien, .zeiten-befunde, .zeiten-suche, .zeiten-stempelungen, .zeiten-storniert { display: none; } .zeiten-person[hidden] { display: block !important; } }
/* ==== Ende Zeiten */

/* ==== Zeiten: Blatt (S16 P3) */
/* Pausen-Editor und Verlauf im Blatt; Zeilen brechen bei 320 px und 200 %
   Text untereinander um. */
.zeiten-pausen { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; min-width: 0; }
.zeiten-pausen legend { font-weight: 600; padding: 0; margin-bottom: 0.2rem; }
.zeiten-pausen > p { margin: 0; overflow-wrap: anywhere; }
.zeiten-pausenliste { display: grid; gap: 0.6rem; }
.zeiten-pause { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 0.5rem;
  align-items: end; }
.zeiten-verlauf { display: grid; gap: 0.6rem; min-width: 0; overflow-wrap: anywhere; }
.zeiten-verlauf-titel { margin: 0.4rem 0 0; font-size: 1rem; }
.zeiten-verlauf-liste { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.zeiten-verlauf p, .zeiten-verlauf ul { margin: 0; }
.zeiten-verlauf-kopf { font-weight: 650; }
/* ==== Ende Zeiten: Blatt */

/* ==== Prueffaelle (S16 P4) */
/* pruefungen.js: Karten wie die Vorgaenge (ma.js), die Sammel-Karte als
   getoente Flaeche, Kennzeichen als Marken, die umbrechen. */
.tg-pruefungen .vorgang p { margin: 0; }
.pruef-sammel { display: grid; gap: 0.5rem; min-width: 0; padding: 0.8rem; border: var(--spur); border-radius: var(--radius-feld); background: var(--surface-2); overflow-wrap: anywhere; }
.pruef-sammel h3 { margin: 0; font-size: 1.02rem; }
.pruef-sammel p, .pruef-sammel .knopfreihe { margin: 0; }
.pruef-sammel + .vorgang-liste { margin-top: 0.6rem; }
.pruef-marken { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pruef-eingaenge > summary { display: block; min-height: 44px; padding-block: max(0px, (44px - 1.55em) / 2); padding-inline-end: 1.2rem; cursor: pointer; font-weight: 650; overflow-wrap: anywhere; }
.pruef-eingaenge ol { margin: 0.2rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.35rem; overflow-wrap: anywhere; }
@media (forced-colors: active) { .pruef-sammel { border: 1px solid CanvasText; } }
/* ==== Ende Prueffaelle */

/* ==== Protokoll (S16 P4) */
/* protokoll.js: eine Liste, neueste oben; der erste nachgeladene Eintrag
   bekommt den Fokus (tabindex -1) - sein Ring muss zu sehen sein. */
.protokoll-liste { margin-top: 1rem; }
.protokoll-liste > li { min-width: 0; overflow-wrap: anywhere; }
.protokoll-liste p { margin: 0; }
.protokoll-liste > li:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
/* ==== Ende Protokoll */

/* ==== Einrichtung: gemeinsam (S17a P0) */
/* Gemeinsam fuer team, standorte, einstellungen, abweichungen (S17a E2):
   Werte als Raster aus Beschriftung und Wert (bricht um, bei 320 px eine
   Spalte), der Kopplungscode wie die PIN, das Farbmuster einer Person. Die
   Flaechen des Farbmusters stehen bei den Personenfarben (.plan-zelle.farbe-i,
   erweitert um .farbe-muster.farbe-i): eine Wahrheit, vom Test dort geprueft.
   Kein Umbruchverbot, keine feste Hoehe. */
.ein-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.6rem 1.2rem; margin: 0; }
.ein-werte > div { min-width: 0; }
.ein-werte dt { color: var(--ink-2); font-size: 0.9rem; overflow-wrap: anywhere; }
.ein-werte dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.tg-code { font-size: 2rem; font-weight: 700; letter-spacing: 0.15em; margin: 0.4rem 0; overflow-wrap: anywhere; }
/* Das Muster ist nie die einzige Angabe: daneben steht "Farbe 1" ... "Farbe 12". */
.farbe-muster { display: inline-block; inline-size: 1.5rem; block-size: 1.5rem; flex: none; border: 2px solid var(--ink); border-radius: 6px; vertical-align: middle; }
@media (forced-colors: active) { .farbe-muster { forced-color-adjust: none; border-color: CanvasText; } }
/* ==== Ende Einrichtung: gemeinsam */

/* ==== Team (S17a P2) */
/* team.js, team-blatt.js: Karten je Person wie die Vorgaenge (am Handy eine
   Spalte, ab 900 px nebeneinander); im Blatt die Farbwahl als umbrechendes
   Raster, je Standort ein umrandeter Abschnitt, Wochentage nebeneinander.
   Fieldsets duerfen schrumpfen (sonst min-content: seitliches Rollen bei 320 px). */
.tg-team .tg-werkzeug .feld { flex: 0 1 18rem; min-width: min(12rem, 100%); }
.team-uebersicht { margin: 0.4rem 0 0; overflow-wrap: anywhere; }
.tg-team .vorgang-liste { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.6rem; }
@media (min-width: 900px) {
  .tg-team .vorgang-liste { grid-template-columns: repeat(var(--liste-spalten), minmax(min(22rem, 100%), 1fr)); }
}
.tg-team .vorgang p { margin: 0; overflow-wrap: anywhere; }
.tg-team .blatt-abschnitt { margin-top: 1.2rem; }
/* Personenkarte als Aufklapper (U3, Davids Wahl 4 + S, 22.10.2026): die summary ist die ganze
   Kopfzeile (Treffer >= 44 px) aus Farbfeld, Name und Stunden, ihr Name beginnt mit dem Personennamen
   (2.5.3); die Marken stehen erst aufgeklappt. Rechts die Stunden ("38 h/Woche" bzw. "80 h/Monat"),
   letztes Element im umbrechenden Kopf: ist kein Platz, rutscht es rechtsbuendig in die naechste Zeile.
   Der Kopf ist mindestens 10em breit, sonst zerlegt der Umbruch den Namen in Silben (320 px bei Text 200 %).
   Der Winkel haengt am Namen (Sammelregel unten). */
.team-auf > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; min-height: 44px;
  cursor: pointer; overflow-wrap: anywhere;
}
.team-auf > summary > .vorgang-kopf { flex: 1 1 10em; min-width: 0; }
.team-stunden { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.team-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; min-width: 0; }
.tg-team .team-auf > p, .team-marken { margin-top: 0.15rem; }
.tg-team .team-marken + p { margin-top: 0.5rem; }
.tg-team .team-auf > .knopfreihe { margin-top: 0.7rem; }
/* Winkel hinter dem Text an JEDEM Aufklapper (Davids Wahl C, 02.11.2026): ein schlanker Strich, per CSS
   gezeichnet (Zeichen wie ▸ sind je nach Systemschrift winzig); content "" wird nicht vorgelesen. Zu zeigt
   er nach rechts, offen um 90 Grad gedreht nach unten. Text-Koepfe (Abschnitte, Dateien, Stempelungen,
   Zeitraster, Eingaenge, einzelne Tage, Nicht geprueft) fliessen als Block, der Winkel haengt am letzten
   Wort; Namens-Koepfe (Team, Zeiten je Person und Standort, Pruefhinweise je Person) bleiben Flex, der
   Winkel haengt am Namen, Stunden und Differenz bleiben rechts. Kein Umbruch vor dem Winkel: er ist ein
   Inline-Block mit Nettobreite 0 (Rand innen +0.25rem, aussen -1.2rem) und malt in den Platz, den
   padding-inline-end 1.2rem freihaelt - so bleibt er in der Zeile des letzten Worts und im Fokusring.
   Grafik 1.4.11: --ink-2 hat 7:1 auf surface. */
.blatt-abschnitt > summary, .team-auf > summary, .tg-zeiten details > summary, .pruef-eingaenge > summary, .raster-tag > summary,
.befund-person > summary, .befund-tage > summary, .befund-nicht > summary { list-style: none; }
.blatt-abschnitt > summary::-webkit-details-marker, .team-auf > summary::-webkit-details-marker, .tg-zeiten details > summary::-webkit-details-marker,
.pruef-eingaenge > summary::-webkit-details-marker, .raster-tag > summary::-webkit-details-marker, .befund-person > summary::-webkit-details-marker,
.befund-tage > summary::-webkit-details-marker, .befund-nicht > summary::-webkit-details-marker { display: none; }
.team-auf > summary > .vorgang-kopf > strong, .zeiten-auf > summary > strong:first-child, .befund-person > summary > strong:first-child { padding-inline-end: 1.2rem; }
.blatt-abschnitt > summary::after, .tg-zeiten details:not(.zeiten-auf):not(.befund-person) > summary::after, .pruef-eingaenge > summary::after,
.raster-tag > summary::after, .befund-tage > summary::after, .befund-nicht > summary::after,
.team-auf > summary > .vorgang-kopf > strong::after, .zeiten-auf > summary > strong:first-child::after, .befund-person > summary > strong:first-child::after {
  content: ""; display: inline-block; vertical-align: -0.1em;
  inline-size: 0.95rem; block-size: 0.95rem; margin-inline: 0.25rem -1.2rem;
  background: var(--ink-2);
  clip-path: polygon(25% 13%, 34% 4%, 80% 50%, 34% 96%, 25% 87%, 62% 50%);   /* Winkel, Strich 13 % */
  transition: transform 200ms var(--ease-out);
}
.blatt-abschnitt[open] > summary::after, .tg-zeiten details[open]:not(.zeiten-auf):not(.befund-person) > summary::after, .pruef-eingaenge[open] > summary::after,
.raster-tag[open] > summary::after, .befund-tage[open] > summary::after, .befund-nicht[open] > summary::after,
.team-auf[open] > summary > .vorgang-kopf > strong::after, .zeiten-auf[open] > summary > strong:first-child::after, .befund-person[open] > summary > strong:first-child::after { transform: rotate(90deg); }
@media (forced-colors: active) {
  .blatt-abschnitt > summary::after, .tg-zeiten details:not(.zeiten-auf):not(.befund-person) > summary::after, .pruef-eingaenge > summary::after,
  .raster-tag > summary::after, .befund-tage > summary::after, .befund-nicht > summary::after,
  .team-auf > summary > .vorgang-kopf > strong::after, .zeiten-auf > summary > strong:first-child::after, .befund-person > summary > strong:first-child::after { forced-color-adjust: none; background: CanvasText; }
}
/* Sanftes Auf/Zu, wo ::details-content geht (Chromium 131+, Safari 18.4+; html hat interpolate-size),
   nur ohne prefers-reduced-motion; aeltere WebViews klappen ohne Bewegung. Der Clip liegt an der
   Polsterkante: 0.5rem Polster unten nimmt den Fokusring (2 px + 2 px Abstand) der untersten Knopfreihe
   auf, der negative Rand gleicht es aus - Hoehe wie ohne. Es gilt der Uebergang des Zielzustands: beim
   Aufklappen gleitet nur die Hoehe und der Inhalt ist sofort da - mit content-visibility im Uebergang
   naehme ein Knopf darin erst einen Frame spaeter den Fokus (karteAuf + focus() in team.js griffe nicht,
   der Fokus bliebe, wo er war); beim Zuklappen bleibt der Inhalt bis zum Ende sichtbar (allow-discrete). */
@media (prefers-reduced-motion: no-preference) {
  .team-auf::details-content {
    block-size: 0; overflow-y: clip; padding-bottom: 0.5rem; margin-bottom: -0.5rem;
    transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete;
  }
  .team-auf[open]::details-content { block-size: auto; transition-property: block-size; }
}
.team-farben { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); column-gap: 0.8rem; min-width: 0; }
.team-farben legend { grid-column: 1 / -1; }
.team-farben .haken-zeile { align-items: center; }
.team-farben .haken-zeile input { margin: 0; }
.team-ort { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; min-width: 0; margin: 0; padding: 0.8rem; border: var(--spur); border-radius: var(--radius-feld); }
.team-ort > legend { font-weight: 650; padding: 0 0.3rem; overflow-wrap: anywhere; }
.team-ort .kleingedruckt, .team-anspruch p { margin: 0; overflow-wrap: anywhere; }
.team-tage { grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); min-width: 0; }
.team-tage legend { grid-column: 1 / -1; }
.team-anspruch { display: grid; gap: 0.4rem; justify-items: start; margin-top: 0.5rem; }
@media (forced-colors: active) { .team-ort { border: 1px solid CanvasText; } }
/* ==== Ende Team */

/* ==== Standorte (S17a P3) */
/* standorte.js: Karten wie die Vorgaenge, am Handy eine Spalte, ab 900 px
   nebeneinander; im Standort-Blatt Namenslisten und Pausenlage als Raster,
   das bei 320 px untereinander umbricht. */
.tg-standorte .tg-werkzeug { margin-top: 1.2rem; }
.standorte-liste { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.6rem; margin-top: 1rem; }
@media (min-width: 900px) {
  .standorte-liste { grid-template-columns: repeat(var(--liste-spalten), minmax(min(22rem, 100%), 1fr)); }
}
.standorte-liste .vorgang > p { margin: 0; overflow-wrap: anywhere; }
.standorte-liste .knopfreihe { gap: 0.5rem; }   /* kompakt wie die Plan-Werkzeugleiste (U3) */
.standorte-kiosk { margin-top: 1.4rem; }
.standorte-kiosk ol { margin: 0.2rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.4rem; overflow-wrap: anywhere; }
.standort-haken { display: grid; gap: 0.2rem; min-width: 0; }
.standort-namen, .standort-pausen { min-width: 0; }
.standort-namen > .knopfreihe { margin-top: 0.4rem; }
.standort-namen > p, .standort-pausen > p { margin: 0.4rem 0 0; overflow-wrap: anywhere; }
.standort-namenliste, .standort-pausenlage { display: grid; gap: 0.6rem; min-width: 0; }
.standort-pause { border: 0; padding: 0; margin: 0; min-width: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 0.5rem; align-items: end; }
.standort-pause > legend { font-weight: 600; padding: 0; overflow-wrap: anywhere; }
.standort-pause > .knopfreihe { grid-column: 1 / -1; }
/* ==== Ende Standorte */

/* ==== Zeitraster (S17a P3) */
/* standort-raster.js: ein Stapel je Tag statt einer Tabelle (R9) - bei
   320 px stehen die Felder untereinander, nichts rollt seitlich. */
.raster-tage { display: grid; gap: 0.8rem; min-width: 0; }
.raster-tag { border: var(--spur); border-radius: var(--radius-feld); padding: 0 0.8rem; margin: 0; min-width: 0; }
.raster-tag[open] { padding-bottom: 0.8rem; }
.raster-tag > summary { display: block; min-height: 44px; padding-block: max(0px, (44px - 1.55em) / 2); padding-inline-end: 1.2rem; cursor: pointer; font-weight: 700; overflow-wrap: anywhere; }
.raster-tag-inhalt { border: 0; padding: 0; margin: 0; min-width: 0; }
.raster-schicht { border: 0; padding: 0; margin: 0.6rem 0 0; min-width: 0; }
.raster-schicht > legend { font-weight: 600; padding: 0; overflow-wrap: anywhere; }
.raster-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: 0.5rem; align-items: end; }
.raster-felder input[readonly] { background: var(--surface-2); color: var(--ink-2); }
.raster > p { overflow-wrap: anywhere; }
@media (forced-colors: active) { .raster-tag { border: 1px solid CanvasText; } }
/* ==== Ende Zeitraster */

/* ==== Feiertage (S17a P3) */
/* feiertage.js: Abweichungen und einzelne Tage als Zeilen aus Feld und
   Knopf, die umbrechen. */
.ft-titel { font-size: 1rem; margin: 0.6rem 0 0.2rem; }
.ft-abweichungen > p { margin: 0 0 0.4rem; }
.ft-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; min-width: 0; }
.ft-zeile { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.8rem; min-width: 0; overflow-wrap: anywhere; }
.ft-zeile > .feld { flex: 1 1 12rem; min-width: 0; }
.ft-hinzu { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.8rem; margin-top: 0.6rem; }
.ft-hinzu > .feld { flex: 1 1 12rem; min-width: 0; }
.ft-hinzu > p { margin: 0; }
.ft-tage { margin-top: 0.4rem; }
.ft-tage > p { margin: 0.2rem 0 0.6rem; overflow-wrap: anywhere; }
/* ==== Ende Feiertage */

/* ==== Einstellungen (S17a P4) */
/* einstellungen.js: Abschnitte als Karten untereinander; der Dauerhinweis zur
   gesetzlichen Grenze steht klein unter dem Wert, die Auswertungen als Liste.
   Alles bricht um (320 px, 200 % Text). */
.ein-karten { display: grid; gap: 1.2rem; margin-top: 1.2rem; min-width: 0; }
/* Im Raster fallen Raender nicht zusammen: der Aussenabstand der Karten (.abschnitt-karte) kaeme zum gap dazu. */
.ein-karten > .abschnitt-karte { margin-top: 0; }
.ein-karten > .abschnitt-karte > p { margin: 0.6rem 0 0; overflow-wrap: anywhere; }
.ein-werte dd.kleingedruckt { font-weight: 400; margin-top: 0.2rem; }
.ein-auswertungen { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.8rem; overflow-wrap: anywhere; }
.ein-auswertungen p { margin: 0.2rem 0 0; }
.ein-vorgaben { display: grid; gap: 0.4rem; min-width: 0; padding: 0.8rem; border: var(--spur); border-radius: var(--radius-feld); background: var(--surface-2); overflow-wrap: anywhere; }
.ein-vorgaben p, .ein-vorgaben-liste { margin: 0; }
.ein-vorgaben-liste { padding-left: 1.2rem; }
.tg-einstellungen .haken-gruppe .feld-hilfe { margin: 0 0 0.6rem 2rem; }
@media (forced-colors: active) { .ein-vorgaben { border: 1px solid CanvasText; } }
/* ==== Ende Einstellungen */

/* ==== Abweichungen (S17a P4) */
/* abweichungen.js: Karten wie die Vorgaenge (ma.js); Wirkungen als Liste. */
.tg-abweichungen .abschnitt-karte { margin-top: 1.2rem; }
.tg-abweichungen .vorgang p { margin: 0; overflow-wrap: anywhere; }
.abwg-wirkungen { margin: 0.2rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; overflow-wrap: anywhere; }
.abwg-wahl p { margin: 0; }
/* Ein Blatt je Art (S07b P4): fieldset ohne Rahmen, die Legende ist der Titel. */
.abwg-satz { border: 0; padding: 0; margin: 0; min-width: 0; }
.abwg-satz > legend { font-weight: 600; padding: 0; margin-bottom: 0.6rem; overflow-wrap: anywhere; }
.abwg-satz p { margin: 0; overflow-wrap: anywhere; }
/* ==== Ende Abweichungen */
/* ==== Nicht geprueft (S07b P4) */
/* plan-befunde.js und zeiten.js: "Was das Programm nicht prueft", aufklappbar unter der Ueberschrift mit dem i. */
.befund-nicht { margin: 0.4rem 0 0; }
.befund-nicht > summary { min-height: 44px; padding-block: max(0px, (44px - 1.55em) / 2); padding-inline-end: 1.2rem; cursor: pointer; font-weight: 600; }
.befund-nicht p { margin: 0.4rem 0 0; overflow-wrap: anywhere; }
/* ==== Ende Nicht geprueft */

/* ==== Konto (S17b P1) */
/* konto.js: Karten untereinander (.karte + .karte), Sitzungen als Liste wie die
   Vorgaenge; Marken und Saetze brechen um (.tg .marke). Kein Umbruchverbot,
   keine feste Hoehe. */
.tg-konto .vorgang p { margin: 0; overflow-wrap: anywhere; }
.tg-konto .vorgang .knopfreihe { margin-top: 0.4rem; }
.konto-codes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0; overflow-wrap: anywhere; }   /* "Wiederherstellungscodes:" bricht um, .huelle schneidet seitlich ab */
.tg-konto .abschnitt-karte > .knopfreihe, .tg-konto .abschnitt-karte > div > .knopfreihe { margin-top: 0.8rem; }
/* ==== Ende Konto */

/* ==== Leitungen und Geräte (S17b P2) */
/* leitungen.js, geraete.js: Karten je Mitglied, Einladung und Gerät wie die
   Vorgaenge (am Handy eine Spalte, ab 900 px nebeneinander); E-Mail-Adressen
   und Namen brechen um (320 px). Der Dauerhinweis "Uhr offline" in Warnfarbe. */
.tg-leitungen .abschnitt-karte, .tg-geraete .abschnitt-karte { margin-top: 1.2rem; }
.tg-leitungen .vorgang-liste, .tg-geraete .vorgang-liste { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.6rem; }
@media (min-width: 900px) {
  .tg-leitungen .vorgang-liste, .tg-geraete .vorgang-liste { grid-template-columns: repeat(var(--liste-spalten), minmax(min(22rem, 100%), 1fr)); }
}
.tg-leitungen .vorgang strong, .tg-geraete .vorgang strong { overflow-wrap: anywhere; min-width: 0; }
.tg-leitungen .vorgang p, .tg-geraete .vorgang p { margin: 0; overflow-wrap: anywhere; }
.tg-geraete .meldung.warnung { border-color: var(--warnung-text); background: var(--warnung-flaeche); color: var(--warnung-text); }
/* ==== Ende Leitungen und Geräte */

/* ==== Abo und Daten (S17b P3) */
/* (leer) */
/* ==== Ende Abo und Daten */

/* ==== Einstellungen Anschrift (S17b P4) */
/* (leer) */
/* ==== Ende Einstellungen Anschrift */

/* ==== U1: gemeinsam (U1 P0) */
/* Infoknopf (el.js info, U1 E6): Titel und "i" in einer Zeile; 44 px
   Treffer ueber .rund, sichtbar ein kleiner Kreis; der Text darunter ist
   zu, bis man tippt. Das Geraet hat vier Reiter (U1 E1).
   --kopf-hoehe (ueberschreibt :root oben, U1 E3): die Kopfleiste waechst
   mit der Schrift (Zeile "Betrieb"), gemessen 85,8 px bei 200 % Text statt
   77 px; bei 16 px Schrift weiter 61 px. Die klebende Kopfzeile des Plans
   und das scroll-padding unter 900 px sitzen damit an der Kopfleiste. */
:root { --kopf-hoehe: calc(max(0.5rem, env(safe-area-inset-top)) + max(44px, 1.65rem) + 0.5rem + 1px); }
.info-kopf { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.info-kopf > :first-child { min-width: 0; }
/* Der 44-px-Knopf am Seitentitel macht die Zeile nicht hoeher als den Titel (-22px = halbe Knopfhoehe je Seite):
   Titel mit und ohne "i" stehen auf einer Hoehe, beim Wechsel der Reiter springt nichts. Raender verkleinern die
   Trefferflaeche nicht, sie bleibt 44 x 44 px. */
.seitentitel + .info-knopf { margin-block: -22px; }
.rund.info-knopf { background: none; box-shadow: none; color: var(--ink-2); }
.rund.info-knopf .i { width: 1.35rem; height: 1.35rem; }
.rund.info-knopf[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.info-text { display: grid; gap: 0.4rem; max-width: 60rem; margin-top: 0.2rem; color: var(--ink-2); overflow-wrap: anywhere; }
.info-text > * { margin: 0; }
/* Der geoeffnete Kreis ragt unter die Titelzeile: halbe Knopfhoehe minus halbe Titelzeile, hoechstens 22px - 0.84rem
   (halbe Zeile der kleinsten Titelschrift, 1.6rem x 1.05), also 8.6 px bei 16 px Schrift. Der Abstand zur Erklaerung
   rechnet das ein, sonst liegt die graue Scheibe auf ihrer ersten Zeile; bei grosser Schrift ragt nichts (max). Zu
   bleibt alles, wie es ist: der Text ist dann hidden. */
.info-kopf:has(> .seitentitel) + .info-text { margin-top: calc(0.2rem + max(0px, 22px - 0.84rem)); }
#geraet .tab-leiste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Die Blase wandert (U3, Davids Wahl "2": Feder mit leichtem Ueberschwingen,
   420 ms): eine Spalte breit unter den Reitern, um ganze Spalten verschoben.
   Ohne :has bleibt die Flaeche am Reiter selbst; ohne linear() gilt die
   Bezier-Kurve davor. Reduzierte Bewegung: der Block unten kuerzt sie. */
@supports selector(:has(a)) {
  .tab-leiste::before {
    content: ""; position: absolute; top: 0.3rem; bottom: 0.3rem; left: 0.3rem;
    width: calc((100% - 0.6rem - 4 * 0.1rem) / 5);
    border-radius: 999px; pointer-events: none;
    background: var(--glas-linse);
    box-shadow: var(--glas-linse-schatten);
    transition: translate 420ms cubic-bezier(0.34, 1.3, 0.64, 1);
    transition: translate 420ms linear(0, 0.18 7%, 0.56 18%, 0.86 30%, 1.02 42%, 1.05 50%, 1.03 60%, 1 74%, 1);
  }
  #geraet .tab-leiste::before { width: calc((100% - 0.6rem - 3 * 0.1rem) / 4); }
  .tab-leiste:has(> a:nth-of-type(2)[aria-current])::before { translate: calc(100% + 0.1rem) 0; }
  .tab-leiste:has(> a:nth-of-type(3)[aria-current])::before { translate: calc(2 * (100% + 0.1rem)) 0; }
  .tab-leiste:has(> a:nth-of-type(4)[aria-current])::before { translate: calc(3 * (100% + 0.1rem)) 0; }
  .tab-leiste:has(> a:nth-of-type(5)[aria-current])::before { translate: calc(4 * (100% + 0.1rem)) 0; }
  .tab-leiste a[aria-current="page"], .tab-leiste a[aria-current="true"] { background: none; box-shadow: none; }
}
@media (hover: hover) and (pointer: fine) { .rund.info-knopf:hover { background: var(--surface-2); color: var(--ink); } }
@media print { .info-knopf { display: none; } }
/* ==== Ende U1: gemeinsam */

/* ==== Einführung (Entwurf r1) */
/* Einführung (r1 "Scheinwerfer mit Glaskarte", einfuehrung.js): dunkler Schleier mit Ausschnitt um das Ziel (SVG-Maske, gleitet mit
   der Feder der Tab-Blase), daneben eine Glaskarte mit Pfeil (CSS Anchor Positioning, ohne: Karte fest oben/unten).
   Erste Schritte: Glaskarte im Tageslicht oben auf Heute, Fortschritt aus Logo-Balken. Nur Tokens aus app.css. */

:root {
  --ef-schleier: rgb(13 20 32 / 0.7);
  --ef-karte: color-mix(in srgb, var(--surface) 92%, transparent);
  --ef-licht: var(--frueh);
  --ef-breite: min(24rem, 100vw - 2rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ef-schleier: rgb(2 5 10 / 0.7);
    --ef-karte: color-mix(in srgb, var(--surface-2) 92%, transparent);
  }
}

/* ------------------------------------------------------------ Rundgang: Dialog ueber allem */

dialog.ef-tour {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: none; color: var(--ink); overflow: visible;
}
dialog.ef-tour::backdrop { background: none; }
/* Waehrend des Rundgangs unter 900 px: Platz unter dem Inhalt, damit ein Ziel weit unten (Team 5 "Mitteilungen")
   nach oben rollen kann und die Karte darunter ganz ins Bild passt (320 x 640). */
@media (max-width: 899.98px) {
  html.ef-laeuft .huelle .inhalt { padding-bottom: calc(var(--tab-hoehe) + var(--tab-zusatz) + 2rem + 60dvh); }
}

.ef-schleier { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
.ef-dunkel { fill: var(--ef-schleier); }
.ef-maske-voll { fill: #fff; }
.ef-maske-loch { fill: #000; }
.ef-maske-hof { fill: #8c8c8c; filter: blur(12px); }
.ef-ring { fill: none; stroke: var(--ef-licht); stroke-width: 2.5px; transition: opacity 160ms ease; }
.ef-ring.ef-aus { opacity: 0; }
.ef-puls { fill: none; stroke: var(--ef-licht); stroke-width: 2px; opacity: 0; }

/* Tageslicht der Startseite (app.css .oeffentlich::before) hinter der Karte, wenn sie mittig steht. */
dialog.ef-tour::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background:
    radial-gradient(34vmax 26vmax at 22% 26%, color-mix(in srgb, var(--frueh) 30%, transparent), transparent 70%),
    radial-gradient(32vmax 26vmax at 82% 42%, color-mix(in srgb, var(--spaet) 24%, transparent), transparent 70%),
    radial-gradient(36vmax 28vmax at 50% 88%, color-mix(in srgb, var(--nacht) 28%, transparent), transparent 70%);
  transition: opacity 420ms ease;
}
dialog.ef-tour[data-seite="mitte"]::after { opacity: 1; }

/* ---- Glaskarte */
.ef-karte {
  position: fixed; z-index: 2; box-sizing: border-box;
  width: var(--ef-breite); max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain;
  padding: 0.35rem 1.25rem 1.1rem; border-radius: 26px;
  background: var(--ef-karte);
  -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%);
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-licht), 0 30px 70px -26px rgb(0 0 0 / 0.6), 0 2px 10px -4px rgb(0 0 0 / 0.25);
  overflow-wrap: anywhere;
}
.ef-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 44px; margin-right: -0.6rem; }
.ef-punkte { display: flex; align-items: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ef-punkte li {
  width: 6px; height: 6px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  transition: width 360ms var(--ease-out), background-color 240ms ease;
}
.ef-punkte li.vorbei { background: color-mix(in srgb, var(--ink) 42%, transparent); }
/* Der jetzige Schritt ist ein Logo-Balken (18 x 6, Radius 2) in seiner Schichtfarbe. */
.ef-punkte li.jetzt { width: 18px; background: var(--frueh); }
.ef-punkte li.jetzt[data-farbe="spaet"] { background: var(--spaet); }
.ef-punkte li.jetzt[data-farbe="nacht"] { background: var(--nacht); }
.ef-ueber {
  min-height: 44px; margin-left: auto; padding: 0 0.6rem; border: 0; border-radius: 999px; background: none;
  color: var(--ink-2); font-size: 0.92rem; font-weight: 650; cursor: pointer;
}
.ef-titel { margin-top: 0.15rem; font-size: 1.5rem; font-weight: 800; font-stretch: 88%; line-height: 1.08; letter-spacing: -0.03em; }
.ef-text { display: grid; gap: 0.55rem; margin-top: 0.5rem; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.ef-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.15rem; }
.ef-luecke { flex: 1; }
.ef-fuss .knopf { padding-inline: 1.15rem; overflow-wrap: normal; }
/* 320 px: "Spaeter" und "Einschalten" passen nicht in eine Zeile - nie mitten im Wort trennen, sondern umbrechen. */
@media (max-width: 359.98px) {
  .ef-luecke { display: none; }
  .ef-fuss .knopf { flex: 1 0 auto; }
}
.ef-karte .rund { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
.ef-zurueck .i { scale: -1 1; }
@media (hover: hover) and (pointer: fine) {
  .ef-ueber:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .ef-karte .rund:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
}
.ef-ueber:focus-visible { outline-offset: 0; }

/* Willkommen und Fertig: groesser, mit Zeichen */
.ef-karte.ef-gross { padding-bottom: 1.3rem; }
.ef-gross .ef-titel { font-size: clamp(1.7rem, 6.4vw, 2.05rem); }
.ef-deko { margin: 0.6rem 0 0.9rem; }
.ef-deko .logo-mark { grid-template-rows: repeat(3, 11px); gap: 4px; }
.ef-deko .logo-mark i { width: 40px; border-radius: 3px; transform-origin: left center; }
.ef-info {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, var(--nacht) 14%, var(--surface)); color: var(--t-nacht);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nacht) 30%, transparent);
}
.ef-info .i { width: 28px; height: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .ef-deko .logo-mark i { animation: ef-balken 620ms var(--ease-out) both; }
  .ef-deko .logo-mark i:nth-child(1) { animation-delay: 140ms; }
  .ef-deko .logo-mark i:nth-child(2) { animation-delay: 220ms; }
  .ef-deko .logo-mark i:nth-child(3) { animation-delay: 300ms; }
  .ef-info { animation: ef-auf 520ms 120ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
}
@keyframes ef-balken { from { transform: scaleX(0); } }
@keyframes ef-auf { from { transform: scale(0.5); opacity: 0; } }

/* ---- Lage: mittig ohne Ziel; sonst am Ziel (anchor), Pfeil dazwischen */
dialog.ef-tour[data-seite="mitte"] .ef-karte {
  --ef-breite: min(26rem, 100vw - 2rem);
  inset: 0; margin: auto; height: fit-content;
}
/* Ohne backdrop-filter: unter einer Transformation ignoriert Chrome sonst den clip-path der Unterlage (Rechteck). */
.ef-pfeil { position: fixed; z-index: 2; display: none; width: 22px; height: 12px; background: var(--ef-karte); }

@supports (anchor-name: --ef) {
  .ef-ziel { anchor-name: --ef-ziel; }
  dialog.ef-tour .ef-karte, dialog.ef-tour .ef-pfeil { position-anchor: --ef-ziel; }
  dialog.ef-tour:is([data-seite="oben"], [data-seite="unten"], [data-seite="rechts"]) .ef-pfeil { display: block; }
  /* Polster 6 px + 4 px Luft = Pfeilspitze; Pfeil 12 px; Karte ueberlappt ihn 1 px. */
  dialog.ef-tour[data-seite="oben"] .ef-karte {
    bottom: calc(anchor(top) + 21px);
    left: clamp(1rem, calc(anchor(center) - var(--ef-breite) / 2), calc(100vw - 1rem - var(--ef-breite)));
  }
  dialog.ef-tour[data-seite="unten"] .ef-karte {
    top: calc(anchor(bottom) + 21px);
    left: clamp(1rem, calc(anchor(center) - var(--ef-breite) / 2), calc(100vw - 1rem - var(--ef-breite)));
  }
  dialog.ef-tour[data-seite="rechts"] .ef-karte {
    left: calc(anchor(right) + 21px);
    top: max(1rem, calc(anchor(top) - 1.4rem));
  }
  dialog.ef-tour[data-seite="oben"] .ef-pfeil {
    left: calc(anchor(center) - 11px); bottom: calc(anchor(top) + 10px);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  dialog.ef-tour[data-seite="unten"] .ef-pfeil {
    left: calc(anchor(center) - 11px); top: calc(anchor(bottom) + 10px);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  dialog.ef-tour[data-seite="rechts"] .ef-pfeil {
    width: 12px; height: 22px; left: calc(anchor(right) + 10px); top: calc(anchor(center) - 11px);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
  }
}
/* Ohne Anchor Positioning (aeltere WebViews): Karte fest am Rand gegenueber dem Ziel, kein Pfeil. */
@supports not (anchor-name: --ef) {
  dialog.ef-tour[data-seite="oben"] .ef-karte { top: max(1rem, env(safe-area-inset-top)); left: 0; right: 0; margin-inline: auto; }
  dialog.ef-tour[data-seite="unten"] .ef-karte { bottom: calc(var(--tab-hoehe) + 2rem); left: 0; right: 0; margin-inline: auto; }
  dialog.ef-tour[data-seite="rechts"] .ef-karte { top: 1.5rem; left: calc(var(--seitenleiste) + 1.5rem); }
}

/* ---- Stempeluhr: eine Karte, Kiosk-Groessen */
dialog.ef-uhr .ef-karte { --ef-breite: min(30rem, 100vw - 2rem); padding: 1.1rem 1.5rem 1.4rem; font-size: 1.08rem; }
dialog.ef-uhr .ef-kopf { display: none; }
dialog.ef-uhr .ef-titel { font-size: 1.75rem; }
dialog.ef-uhr .ef-text { color: var(--ink); font-size: 1.08rem; gap: 0.7rem; margin-top: 0.7rem; }
dialog.ef-uhr .ef-fuss .knopf { min-height: 64px; padding-inline: 2.2rem; font-size: 1.15rem; }
.ef-uhr-liste, .ef-ablauf { margin: 0; padding: 0; list-style: none; }
.ef-uhr-liste { display: grid; gap: 0.45rem; }
.ef-uhr-liste li { display: flex; align-items: flex-start; gap: 0.7rem; }
.ef-nr {
  flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-top: 0.05rem;
  border-radius: 7px; background: var(--frueh); color: #0D1420; font-size: 0.9rem; font-weight: 800;
}
.ef-nr[data-farbe="spaet"] { background: var(--spaet); }
.ef-nr[data-farbe="nacht"] { background: var(--nacht); color: #fff; }
@media (prefers-color-scheme: dark) { .ef-nr[data-farbe="nacht"] { color: #0D1420; } }   /* Weiss auf hellem Nacht: 3,6:1 */
.ef-uhr-so { margin-top: 0.3rem; color: var(--ink-2); }
.ef-ablauf { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ef-ablauf li {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0.3rem 0.9rem; border-radius: 999px;
  background: color-mix(in srgb, var(--frueh) 16%, var(--surface)); font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frueh) 45%, transparent);
}
.ef-ablauf li[data-farbe="spaet"] { background: color-mix(in srgb, var(--spaet) 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--spaet) 45%, transparent); }
.ef-ablauf li[data-farbe="nacht"] { background: color-mix(in srgb, var(--nacht) 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nacht) 45%, transparent); }
.ef-ablauf { column-gap: 1.6rem; }
.ef-ablauf li { position: relative; }
.ef-ablauf li + li::before { content: "→" / ""; position: absolute; left: -1.25rem; color: var(--ink-2); font-weight: 600; }

/* Ziel nach "Einschalten": kurz im Licht */
@media (prefers-reduced-motion: no-preference) {
  .ef-hier { animation: ef-hier 1400ms ease-out; }
}
@keyframes ef-hier { 0%, 30% { box-shadow: 0 0 0 3px var(--ef-licht), 0 0 24px 2px color-mix(in srgb, var(--ef-licht) 50%, transparent); } }

/* ------------------------------------------------------------ Erste Schritte (Heute) */

.ef-start {
  position: relative; margin-top: 1.4rem; padding: 1.1rem 1.25rem 0.5rem; border-radius: var(--radius-gross);
  background:
    radial-gradient(26rem 13rem at 0% 0%, color-mix(in srgb, var(--frueh) calc(var(--tag-a) * 36%), transparent), transparent 72%),
    radial-gradient(22rem 12rem at 100% 0%, color-mix(in srgb, var(--spaet) calc(var(--tag-b) * 36%), transparent), transparent 72%),
    radial-gradient(30rem 14rem at 75% 100%, color-mix(in srgb, var(--nacht) calc(var(--tag-b) * 40%), transparent), transparent 72%),
    var(--glas-dicht);
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-licht), var(--schatten);
  overflow-wrap: anywhere;
}
@media (prefers-color-scheme: light) { .ef-start { border-color: color-mix(in srgb, var(--ink) 8%, transparent); } }
.ef-start-kopf { display: flex; align-items: center; gap: 0.75rem; margin-right: -0.6rem; }
.ef-start-titel { font-size: 1.35rem; font-weight: 800; font-stretch: 88%; letter-spacing: -0.025em; line-height: 1.15; }
.ef-start-aus {
  min-height: 44px; margin-left: auto; padding: 0 0.6rem; border: 0; border-radius: 999px; background: none;
  color: var(--ink-2); font-size: 0.92rem; font-weight: 650; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}
.ef-start-stand { color: var(--ink-2); font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Fortschritt aus Logo-Balken: je zwei Schritte eine Schichtfarbe. */
.ef-balken { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 0.55rem 0 0.4rem; }
.ef-balken i { display: block; height: 6px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 11%, transparent); transform-origin: left center; }
.ef-balken i.an { background: var(--frueh); }
.ef-balken i.an[data-farbe="spaet"] { background: var(--spaet); }
.ef-balken i.an[data-farbe="nacht"] { background: var(--nacht); }

.ef-start-liste { margin: 0; padding: 0; list-style: none; }
.ef-punkt {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 0.35rem 0.85rem; min-height: 60px; padding: 0.65rem 0; border-top: var(--spur);
}
.ef-start-liste > .ef-punkt:first-child { border-top: 0; }
.ef-haken {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 26%, transparent);
  color: var(--ink-2); font-size: 0.88rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.ef-punkt.fertig .ef-haken { background: var(--spaet); box-shadow: none; color: var(--surface); }   /* hell 3,4:1, dunkel 7:1 (1.4.11) */
.ef-punkt.fertig .ef-haken .i { width: 18px; height: 18px; stroke-width: 2.6; }
.ef-punkt-rumpf { display: grid; gap: 0.1rem; min-width: 0; }
.ef-punkt-titel {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; width: fit-content;
  color: var(--ink); font-weight: 650; line-height: 1.3; text-decoration: none;
}
.ef-punkt-titel::after { content: ""; position: absolute; inset: 0; }   /* die ganze Zeile fuehrt hin */
.ef-punkt.fertig .ef-punkt-titel { color: var(--ink-2); font-weight: 600; }
.ef-punkt-hilfe { color: var(--ink-2); font-size: 0.9rem; line-height: 1.4; }
.ef-optional { font-weight: 600; }
.ef-erledigt { position: relative; z-index: 1; min-height: 44px; padding: 0.5rem 1rem; font-size: 0.9rem; }
.ef-weiter { color: var(--ink-3); width: 1.1rem; height: 1.1rem; margin-right: 0.15rem; }
/* Schmal: "Erledigt" unter den Text, damit der Titel die ganze Breite hat. */
@media (max-width: 559.98px) { .ef-erledigt { grid-column: 2; justify-self: start; } }
@media (hover: hover) and (pointer: fine) {
  .ef-punkt:not(.fertig):hover .ef-punkt-titel { text-decoration: underline; }
  .ef-punkt:hover .ef-weiter { color: var(--ink); }
  .ef-start-aus:hover { color: var(--ink); }
}
.ef-start-titel:focus { outline: none; }
.ef-start-titel:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 6px; }
.ef-balken[data-anzahl="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }   /* Leitung ohne Punkt 2 */
@media (min-width: 900px) {
  .ef-start { padding: 1.3rem 1.6rem 0.6rem; }
  .ef-balken { max-width: 22rem; }
  .ef-start-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 2.4rem; }
  .ef-start-liste > .ef-punkt:nth-child(4) { border-top: 0; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .ef-karte, .ef-pfeil { --ef-karte: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  dialog.ef-tour::after { display: none; }
}
@media (forced-colors: active) {
  .ef-karte { border: 1px solid CanvasText; background: Canvas; }
  .ef-pfeil, dialog.ef-tour::after { display: none; }
  .ef-ring { stroke: Highlight; filter: none; }
  .ef-punkte li, .ef-balken i, .ef-nr { forced-color-adjust: none; }
}
/* ==== Ende Einführung */

/* ---------------------------------------------- Bewegung und Barrieren */

@media (prefers-reduced-motion: no-preference) {
  dialog.blatt[open] { animation: blatt-auf 340ms var(--ease-schub); }
}
@keyframes blatt-auf { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
@media (max-width: 640px) { @keyframes blatt-auf { from { transform: translateY(100%); } } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  /* Die Wartezeit der Ladeanzeige ist keine Bewegung: ohne sie blitzt die
     Pille bei jeder schnellen Antwort auf. */
  .ladeanzeige:not(:empty) { animation-delay: 300ms !important; }
}

/* Deckend statt Glas, ohne Farbschimmer (E). Ohne backdrop-filter (alte WebViews) ebenso:
   sonst laege Text auf halb durchsichtigem Weiss ueber den Farbflecken. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glas-leiste: var(--surface); --glas-karte: var(--surface); --glas-zelle: var(--surface);
    --glas-feld: var(--surface); --glas-knopf: var(--surface); --glas-fuell: var(--surface); --glas-dicht: var(--surface);
  }
  .glas, dialog.blatt, .tab-leiste { --glas-fuell: var(--surface); --glas-dicht: var(--surface); }   /* am Element: .tab-leiste setzt --glas-fuell selbst */
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --glas-filter: none; --glas-leiste: var(--surface); --glas-karte: var(--surface); --glas-zelle: var(--surface);
    --glas-feld: var(--surface); --glas-knopf: var(--surface);
    --glas-glanz: transparent; --glas-innen: transparent; --glas-saum: transparent; --glas-saum-2: transparent;
  }
  .glas, dialog.blatt, .tab-leiste { --glas-fuell: var(--surface); --glas-dicht: var(--surface); }   /* am Element: .tab-leiste setzt --glas-fuell selbst */
  dialog.blatt::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .huelle::before, .seitenleiste::after, .tab-leiste::after { display: none; }
  .zeiten-sicht, .ma-reiter { background: var(--surface-2); }
}
@media (prefers-contrast: more) {
  :root { --glas-rand: var(--ink); }
  .knopf.zweit, .feld input, .feld select, .feld textarea { border-color: var(--ink); }
}
@media (forced-colors: active) {
  .feld select { -webkit-appearance: auto; appearance: auto; padding-right: 0.9rem; }
  .glas, dialog.blatt, .seitenleiste, .karte, .plan-rahmen, .blatt-abschnitt { border: 1px solid CanvasText; background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .rund, .knopf.zweit { border: 1px solid CanvasText; }
  .leiste-um { border: 1px solid ButtonText; }
  html[data-leiste="zu"] .seitenleiste :is(a, button) > :is(span:not([class]), .leiste-um-text, .leiste-text) { forced-color-adjust: none; background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .seitenleiste > .logo::after { forced-color-adjust: none; background: CanvasText; }
  .leiste-hinweis .rund:focus-visible, .leiste-hinweis .knopf:focus-visible { outline: 2px solid CanvasText; }
  /* Aktiv = Flaeche in Systemfarbe, Fokus = allein der Ring. Der Ring in
     CanvasText steht mit Abstand neben der Highlight-Flaeche. */
  .tab-leiste a[aria-current="page"], .seitenleiste > a[aria-current="page"],
  .tab-leiste a[aria-current="true"], .seitenleiste > a[aria-current="true"] {
    forced-color-adjust: none; background: Highlight; color: HighlightText; box-shadow: none;
  }
  .tab-leiste a[aria-current="page"] .nav-marke, .seitenleiste > a[aria-current="page"] .nav-marke,
  .tab-leiste a[aria-current="true"] .nav-marke, .seitenleiste > a[aria-current="true"] .nav-marke { background: HighlightText; color: Highlight; }
  .tab-leiste a[aria-current="page"]:focus-visible, .seitenleiste > a[aria-current="page"]:focus-visible,
  .tab-leiste a[aria-current="true"]:focus-visible, .seitenleiste > a[aria-current="true"]:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  .logo-mark i { forced-color-adjust: none; }
  .oeffentlich::before, .tab-leiste::before, .seitenleiste::before, .huelle::before, .seitenleiste::after, .tab-leiste::after { display: none; }
}

@media print {
  .kopfleiste, .tab-leiste, .seitenleiste, .ladeanzeige, .sprunglink, .oeffentlich-fuss { display: none !important; }
  /* Ohne Seitenleiste bliebe vom Raster ab 900 px Seitenbreite (A4 quer) nur die schmale erste Spalte fuer den
     Inhalt. Steht hinter dem Raster: gleiche Spezifitaet, die spaetere gewinnt. Gilt auch fuer #geraet. */
  .huelle { display: block; }
  .huelle::before { display: none; }
  body, .oeffentlich::before { background: none; }
  .glas { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; background: none; }
  .karte, .plan-rahmen, .knopf.zweit { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
}