/* Teambegleitung: Aussehen nach den gewählten Skizzen vom 03.11.2026 (Schlank, GespraechPlan,
   NotizPlan auf der Leinwand «Georgs App»), Look «Waldnacht» wie die Umfrage.

   Grundsätze
   - Dunkles Waldgrün, helle Schrift, Flächen aus dunklem Glas, Auswahl und Buttons hell.
     Systemschrift, nur zwei Grössen: 34 px für Titel (fett), 17 px für alles andere. Grössen in
     rem (1rem = 17 px): Auf dem iPhone folgt die Schrift der Textgrösse in den iOS-Einstellungen.
   - Verlauf oben rechts wie in den Skizzen: radialer Verlauf mit fester Höhe von 340 px, ohne
     Lichtkugel, ohne Bewegung. Er scrollt mit und liegt nur hinter Titeln und Glasflächen.
   - Bausteine aus nativen Formularelementen: Das Feld liegt unsichtbar über der ganzen Fläche
     (bedienbar und für Hilfsprogramme da), den Zustand zeigt «input:checked + label».
   - Masse aus den Skizzen: Radien 14 (Listen, Buttons), 12 (Zahlenfelder), 11 (Segment) und 999
     (Chips). Zeilen 52, Zahlenfelder 52, Chips 44, Segment 48, Speichern 56, Hauptbutton 64.
     Jede Tippfläche ist mindestens 44 px hoch.
   - «Speichern» haftet unten am Bildschirm, der Inhalt läuft dahinter durch (deckender Grund
     mit weichem Übergang nach oben).

   Kontraste nachgerechnet wie in umfrage-app/docs/kontraste.md (WCAG-Formel, durchsichtige
   Flächen gemischt wie im Browser, ohne Unschärfe). Neu gegenüber der Umfrage:
   - Schalter an #36a874 gegen die Zeile aus Glas über dem Grund (#1d332d): 4,47:1 (Schwelle 3:1)
   - Knopf des Schalters #ffffff gegen die Zeile: 13,38:1, gegen das Grün: 2,996:1 (Grenzwert,
     auf zwei Stellen 3,00:1). Den Zustand zeigt zusätzlich die Lage des Knopfs.
   - Schalter aus (22 % Weiss, #4f605b) gegen die Zeile: 2,01:1. Nur Fläche: Den Schalter und
     seinen Zustand zeigt der weisse Knopf (links aus, rechts an), wie bei iOS. Knopf gegen
     die Fläche aus: 6,65:1.
   - Spur des Reglers und Pfeile #8db2a2 auf Glas: 5,75:1, Füllung #e3f0e8 auf Glas: 11,40:1,
     Knopf #ffffff gegen Glas: 13,38:1. Knopf vor der ersten Eingabe (matt, Farbe der Spur)
     gegen Glas: 5,75:1, gegen den hellen Knopf danach: 2,33:1 (der Zustand steht zusätzlich als
     «offen» oder Zahl daneben)
   - Punkte der Gruppen (Tagesnotiz, Farben wie im Dashboard) auf Glas über dem Grund: Fachärzte
     #5b8def 4,14:1, Assistenz #db6d58 4,04:1 (Schwelle 3:1). Näher an der hellen Stelle oben
     rechts fielen sie unter 3:1 (bei 60 % des Wegs 2,94:1 und 2,87:1). Die Punkte stehen links
     in den Karten, dort ist der Grund dunkel. Der Test misst jeden Punkt an seiner Stelle, der
     Name der Gruppe steht immer daneben.
   - Platzhalter der Textfelder in Sekundärfarbe #b5cdc1 auf Glas über dem Grund: 7,94:1
   - Meldung unten (#1d332d): Text 12,40:1, «Rückgängig» #e3f0e8 11,44:1
   - Sekundärtext #b5cdc1 liegt nie auf der hellsten Stelle des Verlaufs: Die nächste Zeile
     (Datumszeile) liegt bei mindestens 45 % des Wegs nach aussen (5,95:1, auf Glas 4,87:1).
   test/screens-look.test.mjs rechnet die Paare nach und misst den Verlauf hinter jeder Zeile.

   Regeln: keine Inline-Styles (CSP: style-src 'self'), keine Schriften zu laden, keine
   fremde Adresse, keine importierten Stylesheets, kein Verweis auf eine Datei, keine Bewegung. */

:root {
  --nacht: #0c241d; /* Grund aussen, Überscrollen */
  --wald: #173f33; /* Verlauf bei 60 % */
  --licht: #2f6b52; /* hellste Stelle des Verlaufs */
  --text: #f2f7f4;
  --text-2: #b5cdc1; /* Sekundärtext, nie auf der hellsten Stelle */
  --glas: rgba(255, 255, 255, 0.07);
  --glas-kante: rgba(255, 255, 255, 0.16);
  --hell: #e3f0e8; /* Auswahl, Buttons, Links */
  --hell-gedrueckt: #cfe3d8;
  --auf-hell: #0d2620; /* Schrift auf hell */
  --rand: #8db2a2; /* Pfeile, Spur des Reglers (3:1) */
  --fokus: #f2f7f4;
  --sys: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --schalter: #36a874; /* Schalter an */
  --schalter-aus: rgba(255, 255, 255, 0.22);
  --gruppe-fa: #5b8def; /* Fachärzte, blau wie im Dashboard */
  --gruppe-as: #db6d58; /* Assistenz, koralle wie im Dashboard */
  --trenner: rgba(255, 255, 255, 0.12); /* Linie zwischen den Zeilen einer Liste */
  --flaeche: #1d332d; /* Glas über dem Grund, deckend: Meldung unten */
  --verlauf: radial-gradient(90% 340px at 85% 0, var(--licht) 0%, var(--wald) 60%, var(--nacht) 100%);

  /* zwei Schriftgrössen, 1rem = 17 px */
  --gr-titel: 2rem; /* 34 px */
  --gr-text: 1rem; /* 17 px */
  --zh: 1.3; /* Zeilenhöhe wie in den Skizzen */
  --zh-titel: 1.2;

  --zeile: 52px;
  --knopf: 56px; /* Speichern, Link kopieren */
  --knopf-gross: 64px; /* Gespräch notieren */
  --chip: 44px;
  --segment: 48px;
  --zahl: 52px;
  --radius: 14px;
  --radius-zahl: 12px;
  --radius-segment: 11px;

  /* Innenabstand der Seite: mindestens so gross wie der Bereich von Notch und Home-Anzeige */
  --innen-l: max(20px, env(safe-area-inset-left));
  --innen-r: max(20px, env(safe-area-inset-right));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Grundschrift 17 px über rem. Auf dem iPhone folgt sie der Textgrösse in den iOS-Einstellungen
   (wie in der Umfrage). Danach die Schriftfamilie neu setzen. */
html {
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html {
    font: -apple-system-body;
  }
}
/* Der Grund liegt auf html: Er füllt die ganze Leinwand, auch beim Überscrollen und unter
   der Statusleiste (apple-mobile-web-app-status-bar-style: black-translucent). Der Verlauf
   liegt auf body und scrollt mit. */
html {
  background-color: var(--nacht);
  color-scheme: dark;
  font-family: var(--sys);
  /* Kein Nachfedern am Rand (iOS): Die Seite lässt sich nicht über den oberen Rand hinausziehen
     (Remo im iPhone-Test, 03.11.2026). Scrollen in langen Screens bleibt. */
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overscroll-behavior: none;
  background: var(--verlauf) no-repeat;
  color: var(--text);
  font-size: var(--gr-text);
  line-height: var(--zh);
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h1,
h2,
p,
ol,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: var(--gr-titel);
  line-height: var(--zh-titel);
  font-weight: 700;
  letter-spacing: 0.01em;
}

h2 {
  font-size: var(--gr-text);
}

button,
input,
textarea,
output {
  font: inherit;
  color: inherit;
}

fieldset {
  min-width: 0;
  min-inline-size: 0;
  border: 0;
}

/* ---------------------------------------------------------------- Seite und Screens */

/* Die Spalte ist höchstens 35rem breit und steht in der Mitte. */
.seite {
  width: 100%;
  max-width: 35rem;
  margin: 0 auto;
  padding: 0 var(--innen-r) 0 var(--innen-l);
}

/* Ein Screen: Kopf und Teile untereinander, 24 px dazwischen wie in den Skizzen. Unterscreens
   beginnen 56 px unter dem oberen Rand (auf dem iPhone 8 px unter der Statusleiste). */
.screen {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 56px;
  padding-top: max(56px, calc(env(safe-area-inset-top) + 8px));
  padding-bottom: 32px;
  padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 16px));
}
/* Startseite und Anleitung: grosser Titel ohne Weg zurück, 32 px zwischen den Teilen */
.screen-oben {
  gap: 32px;
  padding-top: 88px;
  padding-top: max(88px, calc(env(safe-area-inset-top) + 32px));
  padding-bottom: 40px;
  padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 16px));
}
/* Formulare: Unten schliesst der haftende Bereich mit «Speichern» ab */
.screen-formular {
  padding-bottom: 0;
}
/* Tagesnotiz: 20 px zwischen den Teilen wie in der Skizze NotizPlan (Gespräch: 24 px) */
.screen-notiz,
.screen-notiz .formular {
  gap: 20px;
}

.kopf {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kopf-start {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.unterzeile {
  color: var(--text-2);
}
/* «Ohne Namen.» bleibt beisammen und rutscht als Ganzes auf die nächste Zeile */
.beisammen {
  white-space: nowrap;
}

.gruppe {
  display: flex;
  flex-direction: column;
}
.stapel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Etikett über einer Gruppe: 17 px, normal, Sekundärfarbe, 16 px eingerückt wie die Zeilen */
.etikett {
  margin: 0 0 8px;
  padding: 0 0 0 16px;
  color: var(--text-2);
  font-weight: 400;
}
legend.etikett {
  float: left;
  width: 100%;
}
legend.etikett + * {
  clear: both;
}

.hinweis {
  padding: 0 16px;
  color: var(--text-2);
}

/* «Start» mit Pfeil nach links: 44 px hohe Tippfläche */
.zurueck {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-width: 44px;
  min-height: 44px;
  margin: 0 -8px;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--hell);
  text-decoration: none;
}
.chevron {
  flex: none;
  display: block;
  width: 10px;
  height: 17px;
  margin-right: 6px;
}

/* Textknopf in der Zeile («Datum ändern»): unterstrichen, Tippfläche 44 px ohne den
   Zeilenabstand zu ändern */
.textknopf {
  display: inline-block;
  min-height: 44px;
  margin: -11px 0;
  padding: 11px 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.textknopf-hell {
  margin: 0;
  padding: 0 12px;
  color: var(--hell);
  font-weight: 600;
  text-decoration: none;
}

/* ---------------------------------------------------------------- Listen und Zeilen */

/* Gruppierte Liste: eine Glasfläche, Zeilen ab 52 px, Linien 16 px eingerückt */
.liste {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glas-kante);
  border-radius: var(--radius);
  background: var(--glas);
  overflow: hidden;
}
.liste > * {
  position: relative;
}
.liste > * + *::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 16px;
  right: 0;
  height: 1px;
  background: var(--trenner);
  pointer-events: none;
}

.zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--zeile);
  padding: 7px 16px;
  color: var(--text);
  text-decoration: none;
}
a.zeile:active {
  background: rgba(255, 255, 255, 0.1);
}
.pfeil {
  flex: none;
  display: block;
  width: 8px;
  height: 14px;
  color: var(--rand);
}
.zeile-feld > label {
  flex: 1 1 auto;
}

/* Buttons: hell, Radius 14. Links, die wie Buttons aussehen, gehören dazu. */
.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--knopf);
  margin: 0;
  padding: 7px 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--hell);
  color: var(--auf-hell);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.knopf:active {
  background: var(--hell-gedrueckt);
}
/* Noch nicht bereit: Glas statt hell, kein Zeiger */
.knopf:disabled {
  background: var(--glas);
  box-shadow: inset 0 0 0 1px var(--glas-kante);
  color: var(--text-2);
  cursor: default;
}
.knopf-gross {
  min-height: var(--knopf-gross);
}

/* Zeile im Problemfall unter dem Titel der Startseite */
.problem {
  border: 1px solid var(--glas-kante);
  border-radius: var(--radius);
  background: var(--glas);
  color: var(--text);
}
a.problem,
.problem > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--zeile);
  padding: 7px 16px;
  color: var(--text);
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}
.problem > summary::-webkit-details-marker {
  display: none;
}
.problem-text {
  flex: 1 1 auto;
  min-width: 0;
}
.achtung {
  flex: none;
  display: block;
  width: 22px;
  height: 22px;
  color: var(--hell);
}
.problem[open] .pfeil {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.problem-mehr {
  padding: 0 16px 14px 50px;
  color: var(--text-2);
}

/* ---------------------------------------------------------------- Auswahl */

/* Das native Feld liegt unsichtbar über der ganzen Fläche, das Label zeigt den Zustand */
.wahl {
  position: relative;
}
.wahl > input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.wahl > label {
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.wahl > input:focus + label {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}
.wahl > input:focus:not(:focus-visible) + label {
  outline: none;
}

/* Einzelwahl-Liste mit Häkchen (Rolle der Person) */
.auswahl .wahl > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--zeile);
  padding: 7px 16px;
}
.haken {
  flex: none;
  display: block;
  width: 16px;
  height: 12px;
  color: var(--hell);
  visibility: hidden;
}
.wahl > input:checked + label .haken {
  visibility: visible;
}
/* In Listen schneidet die Glasfläche den Rand ab: Fokus innen */
.liste .wahl > input:focus + label {
  outline-offset: -3px;
}

/* Chips: Kapsel, 44 px hoch, einzeln (Zeitpunkt) oder mehrfach (Stichworte) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip > label {
  display: inline-flex;
  align-items: center;
  min-height: var(--chip);
  padding: 0 16px;
  border: 1px solid var(--glas-kante);
  border-radius: 999px;
  background: var(--glas);
  color: var(--text);
  font-weight: 600;
}
.chip > input:checked + label {
  border-color: var(--hell);
  background: var(--hell);
  color: var(--auf-hell);
}

/* Zahlenraster 5 mal 2: 1 bis 5 oben, 6 bis 10 unten */
.raster {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.zahl > label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--zahl);
  border: 1px solid var(--glas-kante);
  border-radius: var(--radius-zahl);
  background: var(--glas);
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.zahl > input:checked + label {
  border-color: var(--hell);
  background: var(--hell);
  color: var(--auf-hell);
}

/* Skalenenden: «1 = …» unter der 1, «10 = …» unter der 10 */
.enden {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-top: 8px;
  padding: 0 4px;
  color: var(--text-2);
}
.enden > span:last-child {
  text-align: right;
}

/* Ja/Nein-Segment: zwei Felder in einer Glasfläche, gewählt hell */
.segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--glas-kante);
  border-radius: var(--radius);
  background: var(--glas);
}
.segment .wahl > label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--segment);
  border-radius: var(--radius-segment);
  font-weight: 600;
}
.segment .wahl > input:checked + label {
  background: var(--hell);
  color: var(--auf-hell);
}

/* Auf hellen Flächen: dunkler Fokusring innen */
.chip > input:checked:focus + label,
.zahl > input:checked:focus + label,
.segment .wahl > input:checked:focus + label {
  outline-color: var(--hell);
  box-shadow: inset 0 0 0 3px var(--auf-hell);
}
.chip > input:checked:focus:not(:focus-visible) + label,
.zahl > input:checked:focus:not(:focus-visible) + label,
.segment .wahl > input:checked:focus:not(:focus-visible) + label {
  box-shadow: none;
}

/* Schalterzeile: Text links, Schalter 51 × 31 rechts, die ganze Zeile ist tippbar. 76 px hoch
   wie in der Skizze (dort 60 px Inhalt und 8 px Rand oben und unten): Zweizeilige Texte haben
   oben und unten Luft, längere Texte machen die Zeile höher. */
.schalter-zeile > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 76px;
  padding: 8px 16px;
}
.schalter {
  position: relative;
  flex: none;
  display: block;
  width: 51px;
  height: 31px;
  border-radius: 16px;
  background: var(--schalter-aus);
}
.schalter::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.wahl > input:checked + label .schalter {
  background: var(--schalter);
}
.wahl > input:checked + label .schalter::after {
  left: 22px;
}

/* ---------------------------------------------------------------- Tagesnotiz: Karten und Regler */

/* «Mein Eindruck heute»: je Messgrösse eine Karte, darin zwei Regler (Fachärzte, Assistenz).
   12 px zwischen den Karten wie zwischen Button und Liste auf der Startseite. */
.karten {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Oben 12 px bis zum Titel, unten 12 px vom Knopf bis zum Rand der Karte */
.karte-titel {
  padding: 12px 16px 0;
  font-weight: 600;
}
/* Der Titel ist keine Zeile: eine Linie nur zwischen den beiden Reglern */
.karte > .karte-titel + .regler-zeile::before {
  content: none;
}

/* Zeile: Gruppe links, Wert rechts, darunter der Regler */
.regler-zeile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px 4px;
}
.regler-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.regler-kopf > label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Punkt in der Gruppenfarbe, 10 px wie im Dashboard. Die Schrift bleibt in Textfarbe. */
.punkt {
  flex: none;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.punkt-fa {
  background: var(--gruppe-fa);
}
.punkt-as {
  background: var(--gruppe-as);
}
/* Wert rechts: zuerst «offen» in Sekundärfarbe, nach der ersten Eingabe die Zahl */
.regler-wert {
  flex: none;
  min-width: 1.5em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.regler-wert.offen {
  color: var(--text-2);
  font-weight: 400;
}

/* Fläche um den Regler: Sie nimmt Tippen und Ziehen an (app.js), nach oben und unten scrollt
   die Seite wie überall. Der Regler selbst nimmt keine Berührung an. Safari auf dem iPhone
   bewegt einen Regler sonst nur, wenn der Finger auf dem Knopf beginnt. Dann kann Safari auch
   eine Bewegung nach oben oder unten als Ziehen nehmen: Scrollen über den Knopf setzte einen Wert. */
.regler-spur {
  cursor: pointer;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Spur 4 px, Knopf 28 px, Tippfläche 44 px. Ohne Vorwert: Bis zur ersten Eingabe steht der
   Knopf matt bei 5, in der Farbe der Spur und ohne Schatten. Danach ist er hell mit Schatten
   wie bei iOS (Klasse beruehrt aus app.js), die Füllung bis zum Knopf kommt aus der Klasse
   wert-1 bis wert-10. */
.regler {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.regler:focus {
  outline: none;
}
.regler::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--rand);
}
.regler::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -12px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.regler:not(.beruehrt)::-webkit-slider-thumb {
  background: var(--rand);
  box-shadow: none;
}
.regler:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--nacht), 0 0 0 6px var(--fokus);
}
.regler::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--rand);
}
.regler::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.regler:not(.beruehrt)::-moz-range-thumb {
  background: var(--rand);
  box-shadow: none;
}
.regler:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--nacht), 0 0 0 6px var(--fokus);
}
.regler.beruehrt::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--hell);
}
.regler.wert-1::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--hell) 14px, var(--rand) 14px);
}
.regler.wert-2::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--hell) calc(14px + (100% - 28px) * 0.1111), var(--rand) 0);
}
.regler.wert-3::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--hell) calc(14px + (100% - 28px) * 0.2222), var(--rand) 0);
}
.regler.wert-4::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--hell) calc(14px + (100% - 28px) * 0.3333), var(--rand) 0);
}
.regler.wert-5::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--hell) calc(14px + (100% - 28px) * 0.4444), var(--rand) 0);
}
.regler.wert-6::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--hell) calc(14px + (100% - 28px) * 0.5556), var(--rand) 0);
}
.regler.wert-7::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--hell) calc(14px + (100% - 28px) * 0.6667), var(--rand) 0);
}
.regler.wert-8::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--hell) calc(14px + (100% - 28px) * 0.7778), var(--rand) 0);
}
.regler.wert-9::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--hell) calc(14px + (100% - 28px) * 0.8889), var(--rand) 0);
}
.regler.wert-10::-webkit-slider-runnable-track {
  background: var(--hell);
}

/* ---------------------------------------------------------------- Textfelder */

.formular {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.textfeld {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.textfeld > label {
  padding-left: 16px;
  color: var(--text-2);
}
textarea,
.feld {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--glas-kante);
  border-radius: var(--radius);
  background: var(--glas);
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
textarea {
  min-height: 80px;
  line-height: 1.4;
  resize: none;
  field-sizing: content;
}
/* «Tippen oder diktieren»: Sekundärfarbe, voll deckend (Firefox blendet Platzhalter sonst ab) */
textarea::placeholder {
  color: var(--text-2);
  opacity: 1;
}
.feld {
  min-height: var(--zeile);
}
.feld-schluessel {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
textarea:focus,
.feld:focus {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* Datum im Kopf von «Gespräch notieren»: natives Feld in einer Zeile */
.datum {
  flex: none;
  min-height: 44px;
  max-width: 60%;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}
/* Wert rechtsbündig wie in den Einstellungen des iPhones (nur Safari auf iOS kennt das Teil) */
.datum::-webkit-date-and-time-value {
  text-align: right;
}

/* Meldung beim Button und beim Schlüssel */
.meldung {
  padding: 0 16px;
  color: var(--text);
  font-weight: 600;
}

/* Haftender Bereich für «Speichern»: am unteren Rand, solange das Formular weiterläuft.
   Deckender Grund, seitlich bis an den Rand der Seite, darüber 24 px Übergang wie in der
   Umfrage (Tagesnotiz 20 px). Der Übergang ist so hoch wie der Abstand davor: Am Ende des
   Formulars liegt er über keinem Feld. */
.aktionen {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 calc(0px - var(--innen-r)) 0 calc(0px - var(--innen-l));
  padding: 0 var(--innen-r) 16px var(--innen-l);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--nacht);
}
.aktionen::before {
  content: '';
  position: absolute;
  top: -24px;
  right: 0;
  left: 0;
  height: 24px;
  background: linear-gradient(to bottom, rgba(12, 36, 29, 0), var(--nacht));
  pointer-events: none;
}
.screen-notiz .aktionen::before {
  top: -20px;
  height: 20px;
}
/* Ein Feld mit dem Fokus (Tabulator, Diktat, VoiceOver) bleibt über dem haftenden Bereich
   (WCAG 2.2, 2.4.11): so hoch wie Button, Rand unten und Übergang, mit etwas Luft */
.formular input,
.formular textarea {
  scroll-margin-bottom: 104px;
  scroll-margin-bottom: calc(104px + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------- Umfrage zeigen */

/* QR auf weisser Kachel mit weissem Rand (Ruhezone), so gross wie die Spalte */
.qr-kachel {
  align-self: center;
  width: 100%;
  max-width: 22rem;
  padding: 16px;
  border-radius: var(--radius);
  background: #ffffff;
}
.qr-kachel > img {
  display: block;
  width: 100%;
  height: auto;
}
.adresse {
  padding: 0 8px;
  color: var(--text);
  text-align: center;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Anleitung */

.schritte {
  list-style: none;
  counter-reset: schritt;
}
.schritte > li {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  counter-increment: schritt;
}
.schritte > li::after {
  content: counter(schritt);
  order: -1;
  flex: none;
  min-width: 1.1em;
  color: var(--hell);
  font-weight: 600;
}

/* ---------------------------------------------------------------- Meldung unten */

/* «Gespeichert. Rückgängig» und «Link kopiert.»: Zeile unten in der Mitte, über allem,
   ohne den Inhalt zu verschieben */
.meldung-unten {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0 var(--innen-r) 24px var(--innen-l);
  padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 8px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: calc(35rem - 40px);
  min-height: var(--zeile);
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--glas-kante);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--text);
  pointer-events: auto;
}
.toast > .textknopf {
  flex: none;
}

/* Kopierfeld für ältere Browser ohne Zwischenablage-Schnittstelle: ausserhalb des Bilds */
.kopierfeld {
  position: fixed;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ---------------------------------------------------------------- Fokus */

/* 3 px hell auf dunklem Grund. Ältere Browser ohne :focus-visible zeigen ihn bei jedem Fokus. */
a:focus,
button:focus,
summary:focus {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none;
}
.liste a:focus,
.problem > summary:focus {
  outline-offset: -3px;
}
.knopf:focus {
  outline-offset: 3px;
}
/* Überschrift als Ziel des Fokus beim Wechsel des Screens: kein Rahmen bei Touch */
[tabindex='-1']:focus {
  outline: none;
}
[tabindex='-1']:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Nach einem Tipp oder einem Wechsel der App von selbst: Fokus für Vorlesehilfen, aber ohne Rahmen
   (Klasse aus app.js, nur mit der Tastatur zeigt der Titel den Rahmen) */
[tabindex='-1'].fokus-still:focus-visible {
  outline: none;
}

/* ---------------------------------------------------------------- Geräte */

/* Zeigen mit der Maus: nur wo es eine gibt. Auf dem iPhone bliebe der Zustand nach dem Tippen stehen. */
@media (hover: hover) and (pointer: fine) {
  .zurueck:hover span {
    text-decoration: underline;
  }
  a.zeile:hover,
  .wahl > input:hover + label {
    background-color: rgba(255, 255, 255, 0.05);
  }
  .knopf:not(:disabled):hover {
    background: #ffffff;
  }
}

/* Kontrastmodus von Windows: Systemfarben statt Glas und Verlauf */
@media (forced-colors: active) {
  body {
    background: Canvas;
  }
  .liste,
  .chip > label,
  .zahl > label,
  .segment,
  .problem,
  .toast,
  .schalter {
    border: 1px solid CanvasText;
  }
  .chip > input:checked + label,
  .zahl > input:checked + label,
  .segment .wahl > input:checked + label,
  .wahl > input:checked + label .schalter {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .knopf {
    border: 2px solid ButtonText;
  }
  /* Die Gruppenfarben bleiben, sie verbinden die Tagesnotiz mit dem Dashboard */
  .punkt {
    forced-color-adjust: none;
  }
}