/* Lentes Lab – gemeinsame Bausteine für alle Apps: Kopf, Leiste, Pille, Fenster, Glas-Icons, Kacheln.
   Werte aus shared/design.css. Das Verhalten (JS) steht in shared/ui.js.
   Grenzen: Handy unter 900 px · „flach“ = Handy quer (höchstens 500 px hoch) · Tablet hochkant 700–899 px · breit ab 900 px.
   Body-Klassen: `vollbild` blendet Kopf, Leiste, Pille und Fußzeile aus; `titel-im-kopf` setzt titelImKopf(). */

/* ---------- Kopf ---------- */
/* Schwebende Glas-Kapsel wie die Leiste: App-Icon (trägt die Leitfarbe), Titel, „Lentes Lab“, Beamer-Schalter.
   Gleiches Glas wie die Leiste (--glas-leiste), Kontrast dort gemessen; Aktionen bleiben Hallenblau. */
.kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin: var(--abstand-2) var(--abstand-3) 0;
  padding: 4px var(--abstand-2) 4px 6px;
  min-height: 3.25rem;
  border-radius: 999px;
  background: var(--glas-leiste);
  -webkit-backdrop-filter: var(--glas-leiste-unschaerfe);
  backdrop-filter: var(--glas-leiste-unschaerfe);
  border: 1px solid var(--glas-kante);
  box-shadow:
    inset 0 1px 0 var(--glas-kante),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 10px 30px var(--glas-schatten);
}
/* Zeilenhöhe 1.25: Mit overflow: hidden schnitte die knappe Titel-Zeilenhöhe sonst Unterlängen (g, p) ab. */
.kopf h1 { font-size: var(--gr-titel); line-height: 1.25; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* App-Icon (ikon.svg der App) */
.kopf-ikon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 24%;
}
.kopf-zurueck {
  min-height: var(--tippflaeche);
  background: none;
  border: 0;
  padding: 0 var(--abstand-1) 0 var(--abstand-2);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
/* Kleiner Titel im Kopf, erscheint erst, wenn die große Überschrift weggescrollt ist. */
.kopf-titel {
  display: none;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: var(--gr-gross);
}
@keyframes titel-rein { from { opacity: 0; transform: translateY(0.4em); } }
.kopf-marke {
  order: 2;
  margin-left: auto;
  font-size: var(--gr-klein);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  min-height: var(--tippflaeche);
  display: inline-flex;
  align-items: center;
}

/* Schalter Beamer-Ansicht im Kopf (richteBeamerAnsichtEin) */
/* Zahnrad (Einstellungen, wo eine App sie hat) steht davor und sieht gleich aus. */
.kopf-beamer, .kopf-einstellungen {
  order: 3;
  flex: none;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: var(--linie-duenn) solid transparent;
  border-radius: var(--ecke);
  background: none;
  color: var(--text);
  cursor: pointer;
}
.kopf-beamer svg, .kopf-einstellungen svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kopf-beamer[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: var(--auf-blau); }
@media (hover: hover) {
  .kopf-beamer[aria-pressed="false"]:hover, .kopf-einstellungen:hover { border-color: var(--blau); }
}

.buehne {
  padding: var(--abstand-3);
  max-width: 90rem;
  margin: 0 auto;
  /* Beim Hereinschieben der Bereiche keine waagerechte Scrollleiste; clip lässt sticky intakt. */
  overflow-x: clip;
}

/* ---------- Glas-Icons ---------- */
/* Wie bei iOS: Akzentfarbe als Grund, Lichtkante oben, heller Schimmer in der oberen Hälfte,
   farbiger Schein darunter. Das Piktogramm (.ikon) liegt als eigene Ebene mit leichtem Schatten darauf.
   Die Linien halten 3:1 auch im Schimmer. Größe und Rundung setzt die App. */
.glas-ikon {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 48%),
    var(--akzent);
  color: var(--auf-akzent);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 8px 18px -8px var(--akzent);
}
.glas-ikon .ikon {
  /* Feste Größe aus der Breite: Safari gibt einem SVG ohne width/height sonst 150 px Höhe. */
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  stroke-width: 3.6;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.22));
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glas-ikon { background: var(--akzent); box-shadow: none; }
  .glas-ikon .ikon { filter: none; stroke-width: 4; }
}

/* Akzentfarben mit passender Linienfarbe darauf */
.akzent-rot { --akzent: var(--rot); --auf-akzent: var(--auf-rot); }
.akzent-gruen { --akzent: var(--gruen); --auf-akzent: var(--auf-gruen); }
.akzent-blau { --akzent: var(--blau); --auf-akzent: var(--auf-blau); }
.akzent-gelb { --akzent: var(--gelb); --auf-akzent: var(--auf-gelb); }
.akzent-petrol { --akzent: var(--petrol); --auf-akzent: var(--auf-leitfarbe-hell); }
.akzent-violett { --akzent: var(--violett); --auf-akzent: var(--auf-leitfarbe-hell); }
.akzent-schiefer { --akzent: var(--schiefer); --auf-akzent: var(--auf-leitfarbe-hell); }
.akzent-orange { --akzent: var(--orange); --auf-akzent: var(--auf-leitfarbe-hell); }
.akzent-leitfarbe { --akzent: var(--leitfarbe); --auf-akzent: var(--auf-leitfarbe); }

/* ---------- Kacheln und Liste (kachel(), fuelleListe()) ---------- */
.liste {
  list-style: none;
  margin: var(--abstand-3) 0 0;
  padding: 0;
}

/* Listenansicht: kleines Icon links, Text rechts */
.eintrag {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--abstand-3);
  align-items: center;
  padding: var(--abstand-2) 0;
  color: var(--text);
  text-decoration: none;
  min-height: var(--tippflaeche);
}
.eintrag-ikon {
  position: relative;
  display: block;
  aspect-ratio: 1;
  padding: 16%;
  border-radius: 24%;
}
.eintrag-text { display: block; min-width: 0; }
.eintrag-titel {
  display: block;
  font-weight: 700;
  font-size: var(--gr-gross);
  line-height: 1.2;
}
.eintrag-kurz, .eintrag-info {
  display: block;
  color: var(--text-leise);
  font-size: var(--gr-klein);
}
.eintrag-kurz { display: inline; }
.eintrag-kurz::after { content: " · "; }
.eintrag-info { display: inline; }
@media (hover: hover) {
  .eintrag:hover .eintrag-titel { color: var(--blau); }
}

/* Kachelansicht: quadratische Kacheln wie iOS-Kurzbefehle. Das Glas-Icon füllt die ganze Kachel,
   das Symbol steht oben links, Titel und Info unten in --auf-akzent (mindestens 4,5:1).
   Die Kurzbeschreibung steht nur in der Liste. Zu viel Text macht die Kachel höher statt ihn abzuschneiden. */
.liste.ist-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--abstand-3);
}
.ist-kacheln .eintrag {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template: 1fr / 1fr;
  gap: 0;
  padding: 0;
  border-radius: 22%;
  color: var(--auf-akzent);
  container-type: inline-size;
}
/* Mindestens quadratisch: Platzhalter so hoch wie breit in derselben Zelle wie der Text. */
.ist-kacheln .eintrag::before { content: ""; grid-area: 1 / 1; padding-top: 100%; }
.ist-kacheln .eintrag-text {
  grid-area: 1 / 1;
  align-self: end;
  padding: var(--abstand-3);
  /* Oben Platz für das Symbol (40 % der Innenbreite), damit Text es nie überdeckt. */
  margin-top: calc(var(--abstand-3) * 0.2 + 0.4 * 100% + var(--abstand-1));
}
.ist-kacheln .eintrag-ikon {
  position: absolute;
  inset: 0;
  /* Größe allein aus inset: Safari rechnet sonst mit aspect-ratio aus der Liste und macht das Glas kleiner als die Kachel. */
  width: auto;
  height: auto;
  aspect-ratio: auto;
  z-index: -1;
  padding: var(--abstand-3);
  border-radius: inherit;
}
.ist-kacheln .eintrag-ikon > :first-child { width: 40%; height: auto; }
.ist-kacheln .eintrag-titel {
  /* Wächst mit der Kachel statt mit dem Bildschirm, zwischen den Stufen Text und Groß. */
  font-size: clamp(var(--gr-text), 12cqi, var(--gr-gross));
  line-height: 1.15;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.ist-kacheln .eintrag-kurz { display: none; }
.ist-kacheln .eintrag-info { display: block; color: inherit; }
@media (hover: hover) {
  .ist-kacheln .eintrag:hover .eintrag-titel { color: inherit; }
  .ist-kacheln .eintrag:hover { outline: 3px solid var(--akzent); outline-offset: 3px; }
}

/* Umschalter Kacheln | Liste (richteDarstellungEin) */
.ansicht-wahl { margin-left: auto; }
.ansicht-wahl button { padding: 0 var(--abstand-3); font-size: var(--gr-klein); }

/* ---------- Vollbild: nur der Inhalt, genau ein Bildschirm ---------- */
/* Geregelte Ausnahme vom Rahmen, nur für die Vollbild-Arten `beamer` und `spiel` (Stellschraube `vollbild`).
   Den Kopf blendet sie nur aus, wenn `kopfImVollbild: 'ausblenden'` gewählt ist. */
html body.vollbild { padding-bottom: 0; }
.vollbild :is(.leiste, .pille, .versionszeile) { display: none; }
html:not([data-kopf-im-vollbild="zeigen"]) .vollbild .kopf { display: none; }
/* Ein Vollbild ist schon groß gebaut, die Beamer-Ansicht vergrößert es nicht weiter. */
html.beamer-ansicht:has(body.vollbild) { font-size: clamp(100%, 0.6rem + 0.5vw, 125%); }

/* ---------- Fenster von unten (richteFensterEin) ---------- */
.fenster {
  position: fixed;
  inset: auto 0 0 0;
  width: min(100%, 40rem);
  max-width: none;
  max-height: 85dvh;
  margin: 0 auto;
  padding: 0 var(--abstand-3) calc(var(--abstand-3) + env(safe-area-inset-bottom));
  border-radius: var(--rund-gross) var(--rund-gross) 0 0;
  background: var(--glas-dicht);
  color: var(--text);
  overflow: auto;
  transition: transform var(--dauer) ease-out;
}
.fenster[open] { display: flex; flex-direction: column; animation: hoch 280ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.fenster::backdrop { background: rgba(0, 0, 0, 0.35); }
@keyframes hoch { from { transform: translateY(100%); } }
.fenster-griff {
  flex: none;
  height: var(--tippflaeche);
  cursor: grab;
  touch-action: none;
  display: grid;
  place-items: center;
}
.fenster-griff::before {
  content: "";
  width: 3rem;
  height: 5px;
  border-radius: 3px;
  background: var(--text);
  opacity: 0.4;
}
.fenster-inhalt { flex: 1; overflow: auto; }
.fenster-fuss {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--abstand-3);
  padding-top: var(--abstand-2);
  border-top: var(--linie-duenn) solid var(--linie);
}
.fenster-fuss .knopf { flex: 1; min-height: max(3.25rem, var(--tippflaeche)); border-radius: calc(var(--rund-gross) - 6px); }

/* ---------- Leiste (richteLeisteEin) ---------- */
/* Fächer: Links mit data-bereich (Bereiche) oder Knöpfe .leiste-fach mit data-aktion (öffnen z. B. ein Fenster).
   Jedes Fach: <span class="leiste-ikon">SVG + optional <span class="leiste-zahl"></span></span><span>Wort</span>.
   Liquid Glass: die einzige stark durchscheinende Fläche; die Mini-Kachel (Marke) liegt hinter dem gewählten Bereich. */
.leiste {
  background: var(--glas-leiste);
  -webkit-backdrop-filter: var(--glas-leiste-unschaerfe);
  backdrop-filter: var(--glas-leiste-unschaerfe);
  border: 1px solid var(--glas-kante);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 var(--glas-kante),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 10px 30px var(--glas-schatten);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.leiste .segmente-marke {
  border-radius: 999px;
  background: var(--glas-leiste-kachel);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 2px 10px var(--glas-schatten);
  transition: transform 320ms cubic-bezier(0.3, 1.4, 0.5, 1), scale 200ms ease-out;
}
/* Ziehen: die Kachel folgt dem Finger und wird etwas größer, wie die Linse bei iOS. */
.leiste.zieht .segmente-marke { transition: scale 200ms ease-out; scale: 1.08; }
.leiste :is(a, .leiste-fach) {
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--gr-klein);
  font-weight: 700;
  line-height: 1.1;
  -webkit-user-drag: none;
}
/* Gewählt: Wort bleibt dunkel (Kontrast auf der Kachel), das Symbol wird Hallenblau. */
.leiste :is([aria-current="page"], [aria-pressed="true"]) { color: var(--text); }
.leiste [aria-current="page"] .leiste-ikon { color: var(--blau); }
.leiste .unter-finger { color: var(--text); }
.leiste .unter-finger .leiste-ikon { color: var(--blau); }
.leiste-ikon {
  position: relative;
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}
.leiste-ikon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.leiste-ikon .f { fill: currentColor; stroke: none; }
/* Abzeichen auf dem Symbol: Markierungsgelb mit dunkler Zahl */
.leiste-zahl {
  position: absolute;
  top: -0.3rem;
  right: -0.7rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--gelb);
  color: var(--auf-gelb);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2rem;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .leiste.zieht .segmente-marke { scale: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf, .leiste { background: var(--flaeche); }
  .leiste .segmente-marke { background: var(--grund); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .kopf,
  .leiste {
    background: var(--flaeche);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: var(--linie-duenn) solid var(--linie);
    box-shadow: none;
  }
  .leiste .segmente-marke { background: var(--grund); box-shadow: inset 0 0 0 var(--linie-duenn) var(--linie); }
}

/* ---------- Pille ---------- */
/* Pille: schwebender Knopf aus Glas (z. B. „Filter“). */
.pille {
  position: fixed;
  z-index: 6;
  padding: 0 var(--abstand-4);
  border-radius: 999px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

/* Handy und Tablet hochkant: Leiste unten, Pille darüber, Kopf schwebt oben. */
@media (max-width: 899px) {
  body {
    --toast-abstand: 6rem;
    padding-bottom: calc(6rem + env(safe-area-inset-bottom));
  }

  .kopf {
    position: sticky;
    top: calc(var(--abstand-2) + env(safe-area-inset-top));
    z-index: 5;
    margin-top: calc(var(--abstand-2) + env(safe-area-inset-top));
  }
  /* Ist die große Überschrift weggescrollt, tritt ihr Titel an die Stelle des App-Namens. */
  .titel-im-kopf .kopf h1 { display: none; }
  .titel-im-kopf .kopf-titel { display: block; opacity: 1; transform: none; animation: titel-rein var(--dauer) ease-out; }

  .leiste {
    position: fixed;
    z-index: 6;
    left: var(--abstand-3);
    right: var(--abstand-3);
    /* Dicht über dem Rand bzw. der Safari-Leiste; als App vom Home-Bildschirm etwas in den Bereich
       des Home-Balkens hinein, wie bei iOS-Apps. */
    bottom: max(var(--abstand-2), calc(env(safe-area-inset-bottom) - var(--abstand-2)));
    max-width: 28rem;
    margin: 0 auto;
  }
  .leiste :is(a, .leiste-fach) { min-height: max(3.875rem, var(--tippflaeche)); }

  .pille {
    left: 50%;
    bottom: calc(5.75rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
  }
}

/* Ab 900 px: Leiste als Schalter oben in der Mitte, Zurück steht nicht im Kopf. */
@media (min-width: 900px) {
  /* Die Leiste sitzt mittig in der Kopf-Kapsel: Kapsel fest 4,25rem hoch (der Titel darf sie nicht strecken),
     Leiste mit gleichem Abstand oben und unten. Auf großen Bildschirmen rückt die Kapsel vom Rand ab, damit
     App-Icon und Symbole rechts nicht in den Ecken kleben (Mac, Beamer). */
  .kopf {
    height: 4.25rem;
    min-height: 0;
    margin-inline: max(var(--abstand-3), 4vw);
    padding-inline: var(--abstand-2) var(--abstand-3);
  }
  .kopf h1 { font-size: min(var(--gr-titel), 2.5rem); }
  .leiste {
    position: absolute;
    /* Höhe und Abstand in rem wie die Kapsel: So bleibt die Leiste auch mit Beamer-Ansicht genau mittig. */
    top: calc(var(--abstand-2) + 0.375rem);
    height: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    min-width: 22rem;
  }
  /* Breit und flach: Symbol links vom Wort, eine Zeile */
  .leiste :is(a, .leiste-fach) { flex-direction: row; gap: 0.45rem; padding: 0 var(--abstand-3); }
  /* Symbol neben dem Wort: Platz für das Abzeichen, sonst ragt es ins Wort. */
  .leiste .leiste-ikon:has(.leiste-zahl:not([hidden])) { margin-right: 0.6rem; }
  .leiste .leiste-ikon { width: 1.3rem; height: 1.3rem; }
  .pille {
    left: 50%;
    bottom: var(--abstand-4);
    transform: translateX(-50%);
  }
  .kopf-zurueck { display: none; }
  /* Die Grundschrift wächst hier mit; breitere Kacheln halten Titel in zwei Zeilen. */
  .liste.ist-kacheln { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}

/* ---------- Seitenleiste (Stellschraube navigation: 'seitenleiste') ---------- */
/* Dasselbe Markup wie die Leiste. Unter 900 px ist sie die Leiste unten (Handy quer: oben im Kopf);
   ab 900 px und mehr als 500 px Höhe eine feste Spalte links,
   Fächer untereinander. Statt der gleitenden Mini-Kachel trägt das gewählte Fach eine Hallenblau-Linie.
   Unter den Fächern darf ein Zusatz stehen (.leiste-zusatz, z. B. die Ordner in Gameplan): Gruppen mit kleinem Titel
   und Links ohne `data-bereich`; er scrollt in der Spalte und fehlt, solange die Leiste unten steht. */
.leiste-zusatz { display: none; }
@media (min-width: 900px) and (min-height: 501px) {
  html[data-navigation="seitenleiste"] body { padding-left: 15rem; }
  html[data-navigation="seitenleiste"] .leiste {
    position: fixed;
    z-index: 6;
    top: var(--abstand-3);
    bottom: var(--abstand-3);
    left: var(--abstand-3);
    transform: none;
    width: 13rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--abstand-2);
    border-radius: var(--rund-gross);
    touch-action: auto;
  }
  html[data-navigation="seitenleiste"] .leiste .segmente-marke { display: none; }
  html[data-navigation="seitenleiste"] .leiste :is(a, .leiste-fach) {
    flex: none;
    justify-content: flex-start;
    gap: var(--abstand-2);
    min-height: max(2.75rem, var(--tippflaeche));
    padding: 0 var(--abstand-3);
    border-radius: calc(var(--rund-gross) - 10px);
    font-size: var(--gr-text);
  }
  html[data-navigation="seitenleiste"] .leiste [aria-current="page"] {
    background: var(--glas-leiste-kachel);
    box-shadow: inset var(--linie-dick) 0 0 var(--blau);
  }
  html[data-navigation="seitenleiste"] .leiste .leiste-ikon { width: 1.3rem; height: 1.3rem; }
  html[data-navigation="seitenleiste"] .leiste-zusatz {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: var(--abstand-2);
    padding-top: var(--abstand-2);
    border-top: var(--linie-duenn) solid var(--linie);
  }
  html[data-navigation="seitenleiste"] .leiste-zusatz:empty { display: none; }
  .leiste-gruppe + .leiste-gruppe { margin-top: var(--abstand-2); }
  .leiste-gruppe-titel {
    display: flex;
    align-items: center;
    gap: var(--abstand-2);
    margin: 0;
    padding: var(--abstand-1) var(--abstand-3);
    color: var(--text-leise);
    font-size: var(--gr-klein);
    font-weight: 700;
  }
  html[data-navigation="seitenleiste"] .leiste .leiste-zusatz a {
    display: block;
    line-height: max(2.75rem, var(--tippflaeche));
    padding: 0 var(--abstand-3) 0 calc(var(--abstand-3) + 0.75rem + var(--abstand-2));
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media (min-width: 900px) and (min-height: 501px) and (hover: hover) {
  html[data-navigation="seitenleiste"] .leiste :is(a, .leiste-fach):not([aria-current="page"]):hover { background: var(--glas-leiste-kachel); }
}
@media (min-width: 900px) and (min-height: 501px) and ((prefers-reduced-transparency: reduce) or (prefers-contrast: more)) {
  html[data-navigation="seitenleiste"] .leiste { border-radius: var(--ecke); }
  html[data-navigation="seitenleiste"] .leiste [aria-current="page"] { background: var(--grund); }
}

/* ---------- Tablet hochkant (iPad mini) ---------- */
@media (min-width: 700px) and (max-width: 899px) and (orientation: portrait) {
  .liste.ist-kacheln { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
  .leiste { max-width: 34rem; }
}

/* ---------- Flach: Handy quer ---------- */
/* Wenig Höhe: Die Leiste wird eine Säule am rechten Rand (Fächer übereinander, dort liegt der Daumen),
   der Kopf bleibt oben frei, der Inhalt rückt um die Säule nach links. Kopf schwebt nicht. */
@media (max-height: 500px) and (orientation: landscape) {
  body {
    --toast-abstand: 1.5rem;
    --saeule: 5.5rem;
    --saeule-rand: calc(var(--abstand-2) + env(safe-area-inset-right));
    /* Platz rechts für Säule und Abstand */
    --neben-saeule: calc(var(--saeule) + var(--saeule-rand) + var(--abstand-3));
    padding-bottom: calc(var(--abstand-4) + env(safe-area-inset-bottom));
  }
  /* Kamera-Aussparung links frei lassen, rechts die Säule */
  .buehne, .versionszeile {
    padding-left: calc(var(--abstand-3) + env(safe-area-inset-left));
    padding-right: var(--neben-saeule);
  }
  .kopf {
    position: relative;
    top: auto;
    margin-left: calc(var(--abstand-3) + env(safe-area-inset-left));
    margin-right: calc(var(--saeule) + var(--saeule-rand) + var(--abstand-2));
    min-height: 3.25rem;
  }
  .kopf h1 { font-size: var(--gr-gross); }
  /* Der Kopf schwebt hier nicht, also bleibt der App-Name stehen. */
  .titel-im-kopf .kopf h1 { display: block; }
  .titel-im-kopf .kopf-titel { display: none; }

  .leiste {
    position: fixed;
    top: calc(var(--abstand-2) + env(safe-area-inset-top));
    bottom: calc(var(--abstand-2) + env(safe-area-inset-bottom));
    left: auto;
    right: var(--saeule-rand);
    transform: none;
    width: var(--saeule);
    min-width: 0;
    max-width: none;
    margin: 0;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--anzahl), 1fr);
    border-radius: 1.75rem;
  }
  .leiste .segmente-marke {
    width: calc(100% - 12px);
    height: calc((100% - 12px) / var(--anzahl));
    bottom: auto;
    border-radius: 1.4rem;
    transform: translateY(calc(var(--index) * 100%));
  }
  .leiste :is(a, .leiste-fach) { flex-direction: column; gap: 2px; min-height: var(--tippflaeche); padding: 4px 2px; border-radius: 1.4rem; }
  .leiste .leiste-ikon { width: 1.4rem; height: 1.4rem; }
  .leiste .leiste-ikon:has(.leiste-zahl:not([hidden])) { margin-right: 0; }

  .pille {
    left: auto;
    right: var(--neben-saeule);
    bottom: calc(var(--abstand-3) + env(safe-area-inset-bottom));
    transform: none;
  }
  .fenster { max-height: 92dvh; }
}

/* ---------- Rückmeldung (in der Versionszeile, shared/rahmen.js) ---------- */
.versionszeile .rueckmeldung {
  min-height: var(--tippflaeche);
  min-width: 0;
  padding: 0 var(--abstand-1);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.fenster-titel { font-size: var(--gr-gross); margin-bottom: var(--abstand-1); }
/* Fenster ohne Griff (z. B. Rückmeldung) brauchen oben Luft. */
.rueckmeldung-fenster { padding-top: var(--abstand-4); }

/* ---------- Elternsperre (elternsperre() in shared/rahmen.js) ---------- */
/* Vor geschützten Bereichen, z. B. dem Elternbereich von Rookie. Mitte statt unten, damit Kinder nicht wischen. */
.sperre {
  position: fixed;
  inset: 0;
  width: min(100% - 2rem, 26rem);
  height: fit-content;
  margin: auto;
  padding: var(--abstand-4);
  border-radius: var(--rund-gross);
  background: var(--glas-dicht);
  color: var(--text);
}
.sperre::backdrop { background: rgba(0, 0, 0, 0.55); }
.sperre h2 { font-size: var(--gr-gross); margin-bottom: var(--abstand-2); }
.sperre-aufgabe { margin: 0 0 var(--abstand-3); font-size: var(--gr-gross); font-weight: 700; }
.sperre-eingabe {
  min-height: 1.5em;
  margin: 0 0 var(--abstand-3);
  font-family: var(--schrift-titel);
  font-size: var(--gr-titel);
  letter-spacing: 0.3em;
  text-align: center;
}
.sperre-tasten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-3);
}
.sperre-tasten button { min-height: 3.5rem; font-size: var(--gr-gross); }
.sperre-tasten button:last-child { grid-column: 2; }

/* ---------- Fehler in der App-Konfiguration (nur auf localhost sichtbar) ---------- */
.konfig-fehler {
  position: fixed;
  z-index: 30;
  inset: auto var(--abstand-3) var(--abstand-3) var(--abstand-3);
  margin: 0;
  padding: var(--abstand-3);
  border: var(--linie-dick) solid var(--rot);
  border-radius: var(--ecke);
  background: var(--grund);
  color: var(--text);
  font-weight: 700;
  white-space: pre-line;
}

/* ---------- Druck (Stellschraube `druck: 'ja'`) ---------- */
.druck-kopf { display: none; }
@media print {
  html[data-druck="ja"] {
    --grund: #FFFFFF;
    --flaeche: #FFFFFF;
    --text: #000000;
    --text-leise: #333333;
    --linie: #000000;
    --leitfarbe: #000000;
    font-size: 11pt;
  }
  html[data-druck="ja"] body { padding: 0; background: #FFFFFF; color: #000000; }
  /* Schwebendes und Bedienung gehören nicht aufs Papier. */
  html[data-druck="ja"] :is(.leiste, .pille, .fenster, .toast, .kopf-beamer, .kopf-einstellungen, .kopf-zurueck, .konfig-fehler, button) { display: none !important; }
  html[data-druck="ja"] .glas { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border: 0; }
  html[data-druck="ja"] .kopf { position: static; margin: 0; padding: 0 0 0.5em; border-radius: 0; }
  html[data-druck="ja"] .kopf-ikon { display: none; }
  html[data-druck="ja"] .druck-kopf { display: block; margin: 0 0 1em; font-size: 9pt; }
  html[data-druck="ja"] a { color: inherit; text-decoration: none; }
  html[data-druck="ja"] table { width: 100%; border-collapse: collapse; }
  html[data-druck="ja"] thead { display: table-header-group; }
  html[data-druck="ja"] tr, html[data-druck="ja"] li { break-inside: avoid; }
}

/* ---------- Animierte Ikonen (Motive in apps/<app>/ikonen.js, Animationen in apps/<app>/ikonen.css) ----------
   Hier, nicht in karten.css: auch die Startseite spielt die Motive der Apps.
   Jede Animation beginnt und endet im stillen Zustand.
   Sie läuft nur, wenn ein Vorfahr .spielt (einmal) oder .schleife (dauernd) trägt. */

.ikon {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ikon .f { fill: currentColor; stroke: none; }
.ikon * { transform-box: fill-box; transform-origin: center; }

.spielt { --ik-n: 1; }
.schleife { --ik-n: infinite; }
:is(.spielt, .schleife) .ikon { --ik-t: 1.6s; }

/* Hilfsmuster: Punkte laufen auseinander und sammeln sich wieder (--dx, --dy je Punkt). */
@keyframes ik-streu {
  0%, 100% { transform: none; }
  35%, 55% { transform: translate(var(--dx), var(--dy)); }
}
@keyframes ik-pop {
  0%, 100% { transform: none; opacity: 1; }
  10% { transform: scale(0.2); opacity: 0; }
  45% { transform: scale(1.12); opacity: 1; }
  60% { transform: none; }
}
@keyframes ik-blinken {
  0%, 100% { opacity: 1; }
  15% { opacity: 0; }
  45% { opacity: 1; }
  60% { opacity: 0; }
  85% { opacity: 1; }
}
@keyframes ik-huepfen {
  0%, 100% { transform: none; }
  50% { transform: translateY(-8px); }
}

/* Hilfsmuster Tauschen: zwei Zustände eines Motivs (z. B. Hände wechseln die Rolle).
   Still steht Zustand a; die Animation zeigt a, dann b, dann wieder a. */
.ikon .wechsel-b { opacity: 0; }
@keyframes ik-wechsel-a { 0%, 44%, 96%, 100% { opacity: 1; } 47%, 93% { opacity: 0; } }
@keyframes ik-wechsel-b { 0%, 44%, 96%, 100% { opacity: 0; } 47%, 93% { opacity: 1; } }
:is(.spielt, .schleife) .wechsel-a { animation: ik-wechsel-a var(--ik-t) linear var(--ik-n); }
:is(.spielt, .schleife) .wechsel-b { animation: ik-wechsel-b var(--ik-t) linear var(--ik-n); }

/* Wer Bewegung reduziert, sieht nur den stillen, aussagekräftigen Zustand. */
@media (prefers-reduced-motion: reduce) {
  .ikon * { animation: none !important; }
}