/* Lentes Lab – gemeinsame Gestaltung, Richtung „Hallenlinie“ (Entscheidung vom 02.10.2026).
   Gilt für alle Apps. Farben tragen Bedeutung, Deko gibt es nicht. */

/* Schriften (OFL), lokal ausgeliefert */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("./fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("./fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("./fonts/BarlowCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Farben, heller Modus */
  --grund: #F4F6F8;          /* Hintergrund */
  --flaeche: #E6EAEE;        /* abgesetzte Fläche, z. B. Filterleiste */
  --text: #14202B;
  --text-leise: #4A5866;     /* Nebeninfo, AA auf --grund */
  --linie: #14202B;          /* Spielfeldlinien, Rahmen */
  --blau: #1F5FBF;           /* Hallenblau: Aktion, Auswahl */
  --auf-blau: #FFFFFF;
  --rot: #C8312B;            /* Linienrot: Ziel „wach“ */
  --gelb: #F2C230;           /* Markierungsgelb: Timer – nur als Fläche, nie als Text auf hell */
  --auf-gelb: #14202B;
  --gruen: #18753F;          /* Feldgrün: Ziel „ruhig“ */
  --auf-rot: #FFFFFF;        /* Linien und Text auf Rot, 5,2:1 */
  --auf-gruen: #FFFFFF;      /* auf Grün, 5,6:1 */
  --fokus: #1F5FBF;

  /* Weitere Leitfarben für Apps (nur Kennzeichen, nie Aktion). Als Linie mindestens 3:1 auf --grund. */
  --petrol: #0B6E79;         /* 5,5:1 */
  --violett: #6A4BB8;        /* 5,9:1 */
  --schiefer: #4B5D72;       /* 6,2:1 */
  --orange: #B4500A;         /* 4,7:1 */
  --auf-leitfarbe-hell: #FFFFFF;

  /* Eisfläche der Startseite (nur Flächen): Eis hellblau-weiß, Puck schwarz in beiden Modi.
     Linien darauf: --rot 4,9:1, --blau 5,8:1; im dunklen Modus 6,2:1 und 5,9:1. */
  --eis: #EAF2F8;
  --puck: #111519;
  /* Räumlichkeit in Spielzügen (Hände, Figuren): Licht oben links, Schatten auf der abgewandten Seite. */
  --licht: rgba(255, 255, 255, 0.9);
  --schatten: rgba(20, 32, 43, 0.16);

  /* Leitfarbe der App, gesetzt über data-leitfarbe (shared/rahmen.js). Standard: Hallenblau. */
  --leitfarbe: var(--blau);
  --auf-leitfarbe: var(--auf-blau);

  /* Schriften */
  --schrift-text: "Atkinson Hyperlegible", system-ui, sans-serif;
  --schrift-titel: "Barlow Condensed", "Arial Narrow", sans-serif;

  /* Größen (fließend von 360 px bis Beamer) */
  --gr-klein: 0.875rem;
  --gr-text: 1rem;
  --gr-gross: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --gr-titel: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
  --gr-beamer: clamp(2rem, 1rem + 4vw, 5rem);        /* Vorlesetext am Beamer */
  --gr-anzeige: clamp(3rem, 1rem + 9vw, 11rem);      /* Timer-Ziffern */

  /* Abstände */
  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 1rem;
  --abstand-4: 1.5rem;
  --abstand-5: 2.5rem;

  /* Linien statt Schatten */
  --linie-duenn: 2px;
  --linie-dick: 4px;
  --ecke: 4px;
  --tippflaeche: 44px;       /* Mindestgröße für Schaltflächen */

  --dauer: 180ms;

  /* Glas für die schwebende Ebene (Leisten, Fenster, Steuerung). Inhalte bleiben deckend.
     Deckkraft 72 %: Text auf Glas bleibt AA, auch wenn dunkler Inhalt dahinter liegt. */
  --glas: rgba(244, 246, 248, 0.72);
  --glas-dicht: rgba(244, 246, 248, 0.88);
  --glas-kante: rgba(255, 255, 255, 0.85);
  --glas-schatten: rgba(20, 32, 43, 0.14);
  --glas-unschaerfe: blur(20px) saturate(1.8);
  /* Leiste: die einzige stark durchscheinende Fläche (Liquid Glass). 50 % Tönung hält Schrift
     mit 4,8:1 auch über der dunkelsten Fläche; die Mini-Kachel für das gewählte Fach ist dichter. */
  --glas-leiste: rgba(244, 246, 248, 0.5);
  --glas-leiste-kachel: rgba(255, 255, 255, 0.8);
  --segment-kachel: #FFFFFF;  /* gewählte Stelle im Umschalter; --blau darauf 6,1:1 */
  --glas-leiste-unschaerfe: blur(28px) saturate(2);
  --rund-gross: 28px;
}

/* Farben, dunkler Modus (System) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #0F1720;
    --flaeche: #1A2430;
    --text: #EEF2F6;
    --text-leise: #A9B6C3;
    --linie: #EEF2F6;
    --blau: #6EA2F2;
    --auf-blau: #0F1720;
    --rot: #FF7A6E;
    --gelb: #F7D35C;
    --auf-gelb: #0F1720;
    --gruen: #5BC98A;
    --auf-rot: #0F1720;
    --auf-gruen: #0F1720;
    --fokus: #F7D35C;
    --petrol: #4CC3CC;
    --violett: #B4A2F2;
    --schiefer: #A3B5CB;
    --orange: #FFA463;
    --auf-leitfarbe-hell: #0F1720;
    --eis: #172331;
    --puck: #05080B;
    --licht: rgba(255, 255, 255, 0.16);
    --schatten: rgba(0, 0, 0, 0.4);
    --glas: rgba(15, 23, 32, 0.72);
    --glas-dicht: rgba(15, 23, 32, 0.88);
    --glas-kante: rgba(255, 255, 255, 0.16);
    --glas-schatten: rgba(0, 0, 0, 0.45);
    --glas-leiste: rgba(15, 23, 32, 0.6);
    --glas-leiste-kachel: rgba(28, 38, 50, 0.85);
  --segment-kachel: #2B3846;
    --segment-kachel: #2B3846;  /* --blau darauf 4,6:1 */
  }
}

/* Farben, dunkler Modus (von Hand gewählt) */
:root[data-theme="dark"] {
  --grund: #0F1720;
  --flaeche: #1A2430;
  --text: #EEF2F6;
  --text-leise: #A9B6C3;
  --linie: #EEF2F6;
  --blau: #6EA2F2;
  --auf-blau: #0F1720;
  --rot: #FF7A6E;
  --gelb: #F7D35C;
  --auf-gelb: #0F1720;
  --gruen: #5BC98A;
  --auf-rot: #0F1720;
  --auf-gruen: #0F1720;
  --fokus: #F7D35C;
  --petrol: #4CC3CC;
  --violett: #B4A2F2;
  --schiefer: #A3B5CB;
  --orange: #FFA463;
  --auf-leitfarbe-hell: #0F1720;
  --eis: #172331;
  --puck: #05080B;
  --licht: rgba(255, 255, 255, 0.16);
  --schatten: rgba(0, 0, 0, 0.4);
  --glas: rgba(15, 23, 32, 0.72);
  --glas-dicht: rgba(15, 23, 32, 0.88);
  --glas-kante: rgba(255, 255, 255, 0.16);
  --glas-schatten: rgba(0, 0, 0, 0.45);
  --glas-leiste: rgba(15, 23, 32, 0.6);
  --glas-leiste-kachel: rgba(28, 38, 50, 0.85);
}

/* Leitfarbe der App (Stellschraube `leitfarbe`, auf <html>) oder eines App-Eintrags (data-leitfarbe am Element). Gelb ist keine Leitfarbe: als Linie auf hellem Grund nur 1,6:1. */
[data-leitfarbe="blau"] { --leitfarbe: var(--blau); --auf-leitfarbe: var(--auf-blau); }
[data-leitfarbe="rot"] { --leitfarbe: var(--rot); --auf-leitfarbe: var(--auf-rot); }
[data-leitfarbe="gruen"] { --leitfarbe: var(--gruen); --auf-leitfarbe: var(--auf-gruen); }
[data-leitfarbe="petrol"] { --leitfarbe: var(--petrol); --auf-leitfarbe: var(--auf-leitfarbe-hell); }
[data-leitfarbe="violett"] { --leitfarbe: var(--violett); --auf-leitfarbe: var(--auf-leitfarbe-hell); }
[data-leitfarbe="schiefer"] { --leitfarbe: var(--schiefer); --auf-leitfarbe: var(--auf-leitfarbe-hell); }
[data-leitfarbe="orange"] { --leitfarbe: var(--orange); --auf-leitfarbe: var(--auf-leitfarbe-hell); }

/* Dichte der App (Stellschraube `dichte`). `gross` sind die Grundwerte oben. */
:root[data-dichte="kompakt"] {
  --abstand-3: 0.75rem;
  --abstand-4: 1.125rem;
  --abstand-5: 1.75rem;
  --gr-gross: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --gr-titel: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}
:root[data-dichte="mittel"] {
  --abstand-4: 1.25rem;
  --abstand-5: 2rem;
  --gr-gross: clamp(1.1875rem, 1rem + 0.75vw, 1.5rem);
  --gr-titel: clamp(1.625rem, 1.2rem + 2vw, 3rem);
}
/* Für Kinder: Tippziele deutlich über 44 px, große Schrift, viel Luft. */
:root[data-dichte="sehr-gross"] {
  --tippflaeche: 72px;
  --gr-text: 1.25rem;
  --gr-gross: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --gr-titel: clamp(2.25rem, 1.6rem + 3vw, 4.5rem);
  --abstand-3: 1.5rem;
  --abstand-4: 2.25rem;
  --abstand-5: 3.5rem;
}

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

/* Grundschrift wächst auf großen Bildschirmen mit (Beamer aus 8 m). */
html {
  -webkit-text-size-adjust: 100%;
  font-size: clamp(100%, 0.6rem + 0.5vw, 125%);
}
/* Beamer-Ansicht (Schalter in der App): alles in rem wächst mit, etwa auf das 1,5-Fache. */
html.beamer-ansicht { font-size: clamp(140%, 0.9rem + 0.8vw, 190%); }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--gr-text);
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
}

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

button, [role="button"], a.knopf {
  min-height: var(--tippflaeche);
  min-width: var(--tippflaeche);
  touch-action: manipulation;
}

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[hidden] { display: none !important; }

a { color: var(--blau); text-underline-offset: 0.15em; }

.versionszeile a { color: inherit; }

.versionszeile {
  font-size: var(--gr-klein);
  color: var(--text-leise);
  text-align: center;
  padding: var(--abstand-3);
}

/* Knöpfe: gefüllt für die Hauptaktion, mit Linie für Nebenaktionen */
.knopf, .knopf-zweit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  padding: var(--abstand-2) var(--abstand-4);
  border: var(--linie-duenn) solid var(--blau);
  border-radius: var(--ecke);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.knopf { background: var(--blau); color: var(--auf-blau); }
.knopf-zweit { background: transparent; color: var(--blau); }
.knopf:disabled, .knopf-zweit:disabled {
  border-color: var(--text-leise);
  background: transparent;
  color: var(--text-leise);
  cursor: not-allowed;
}
@media (hover: hover) {
  .knopf:not(:disabled):hover { filter: brightness(1.1); }
  .knopf-zweit:not(:disabled):hover { background: var(--flaeche); }
}

/* Leiser Knopf für Nebensachen („Zurücksetzen“), Hinweistext */
.knopf-leise {
  background: transparent;
  border: 0;
  color: var(--blau);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
  padding: 0 var(--abstand-2);
}

.hinweis { color: var(--text-leise); }

/* Schalter: an/aus per aria-pressed, in Reihen */
.schalterreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
}
.schalter {
  background: transparent;
  border: var(--linie-duenn) solid var(--linie);
  border-radius: var(--ecke);
  padding: var(--abstand-1) var(--abstand-3);
  cursor: pointer;
}
.schalter[aria-pressed="true"] {
  background: var(--blau);
  border-color: var(--blau);
  color: var(--auf-blau);
  font-weight: 700;
}
@media (hover: hover) {
  .schalter:hover { border-color: var(--blau); }
}

/* ---------- Glas ---------- */
/* Nur für Ebenen, die über dem Inhalt schweben. Text darauf nur in --text oder auf deckendem Blau. */
.glas {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-unschaerfe);
  backdrop-filter: var(--glas-unschaerfe);
  border: 1px solid var(--glas-kante);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 8px 28px var(--glas-schatten);
}
/* Rückfall: ohne Unschärfe, bei „Transparenz reduzieren“ oder „Kontrast erhöhen“ volle Fläche. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas { background: var(--flaeche); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glas {
    background: var(--flaeche);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: var(--linie-duenn) solid var(--linie);
    box-shadow: none;
  }
}

/* Segmentschalter mit gleitender Marke (Tab-Leiste unten, Bereichswahl oben). */
.segmente {
  --anzahl: 2;
  --index: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--anzahl), 1fr);
  padding: 6px;
  border-radius: var(--rund-gross);
}
.segmente-marke {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px) / var(--anzahl));
  border-radius: calc(var(--rund-gross) - 6px);
  background: var(--blau);
  transform: translateX(calc(var(--index) * 100%));
  /* Leichtes Nachfedern zeigt, wohin gewechselt wurde. */
  transition: transform 320ms cubic-bezier(0.3, 1.4, 0.5, 1);
}
.segmente a, .segmente button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tippflaeche);
  padding: 0 var(--abstand-4);
  border: 0;
  border-radius: calc(var(--rund-gross) - 6px);
  background: none;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dauer);
}
.segmente :is([aria-current="page"], [aria-pressed="true"]) { color: var(--auf-blau); }

/* Umschalter im Inhalt (alle .segmente außer der Leiste): graue Spur, die gewählte Stelle ist eine helle,
   leicht schwebende Kachel mit dem Wort in Hallenblau. Mit dem Finger ziehbar (richteSegmentEin). */
.segmente:not(.leiste) {
  padding: 4px;
  background: var(--flaeche);
  border-radius: 999px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.segmente:not(.leiste) .segmente-marke {
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--anzahl));
  border-radius: 999px;
  background: var(--segment-kachel);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 2px 8px var(--glas-schatten);
  transition: transform 320ms cubic-bezier(0.3, 1.4, 0.5, 1), scale 200ms ease-out;
}
.segmente:not(.leiste) :is(a, button) { border-radius: 999px; -webkit-user-drag: none; }
.segmente:not(.leiste) :is([aria-current="page"], [aria-pressed="true"], .unter-finger) { color: var(--blau); }
.segmente:not(.leiste).zieht :is([aria-pressed="true"]:not(.unter-finger)) { color: var(--text); }
/* Ziehen: die Kachel folgt dem Finger und wird etwas größer, wie in der Leiste. */
.segmente:not(.leiste).zieht .segmente-marke { transition: scale 200ms ease-out; scale: 1.06; }
@media (prefers-reduced-motion: reduce) {
  .segmente:not(.leiste).zieht .segmente-marke { scale: none; }
}
@media (prefers-contrast: more) {
  .segmente:not(.leiste) .segmente-marke { box-shadow: inset 0 0 0 var(--linie-duenn) var(--linie); }
}

/* Ansichten schieben sich in Wechselrichtung herein. */
.rein-vor { animation: rein-vor 260ms ease-out; }
.rein-zurueck { animation: rein-zurueck 260ms ease-out; }
@keyframes rein-vor { from { transform: translateX(6%); opacity: 0; } }
@keyframes rein-zurueck { from { transform: translateX(-6%); opacity: 0; } }

/* Kurze Meldung (toast() in shared/ui.js). Apps mit Leiste unten setzen --toast-abstand. */
.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(var(--toast-abstand, 1.5rem) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: var(--abstand-2) var(--abstand-4);
  border-radius: 999px;
  color: var(--text);
  font-weight: 700;
  text-align: center;
  animation: toast-rein var(--dauer) ease-out;
}
@keyframes toast-rein { from { opacity: 0; transform: translate(-50%, 0.5rem); } }