/* Karten-Apps (Warm-up, Cool-down): Filter, Übersicht, Zufall, Detail, Merkliste und Beamer-Modus.
   Verhalten in shared/karten-app.js. Kopf, Leiste, Fenster, Glas-Icons und Kacheln kommen aus
   shared/bausteine.css, alle Werte aus shared/design.css. Die Farbe je Eintrag setzt die App (--akzent). */

/* Filter */
.filtergruppe {
  border: 0;
  margin: 0 0 var(--abstand-3);
  padding: 0;
}
.filtergruppe legend {
  font-size: var(--gr-klein);
  font-weight: 700;
  color: var(--text-leise);
  margin-bottom: var(--abstand-1);
  padding: 0;
}

.mehr { margin-bottom: var(--abstand-3); }
.mehr summary {
  min-height: var(--tippflaeche);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
  color: var(--blau);
}
.mehr[open] summary { margin-bottom: var(--abstand-2); }

/* Ergebnis */
.trefferzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  border-top: var(--linie-duenn) solid var(--linie);
  padding-top: var(--abstand-2);
}
.trefferzeile h2 { font-size: var(--gr-gross); }


.niveau { letter-spacing: 0.05em; }

/* Schnellfilter direkt über der Übersicht */
.schnellfilter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-3);
}
/* Luft zwischen zwei Schnellfiltern (z. B. Dauer und Niveau) */
.schnellfilter .schnell-neu { margin-left: var(--abstand-3); }

/* Detail */
.detail { max-width: 48rem; }
.detail:focus { outline: none; }
.detail-kopf {
  display: flex;
  align-items: flex-end;
  gap: var(--abstand-3);
  margin-top: var(--abstand-3);
}
.detail-ikon {
  flex: none;
  /* Breite und Höhe ausdrücklich gleich: Safari streckte das Icon über aspect-ratio in die Höhe. */
  width: clamp(4.5rem, 3rem + 6vw, 8rem);
  height: clamp(4.5rem, 3rem + 6vw, 8rem);
  padding: 0.9rem;
  border-radius: 24%;
}
.detail-titel {
  flex: 1;
  min-width: 0;
  font-size: var(--gr-titel);
  padding-bottom: var(--abstand-2);
  border-bottom: var(--linie-dick) solid var(--akzent);
}
.detail-titel:focus { outline: none; }
.detail-info { color: var(--text-leise); margin: var(--abstand-2) 0 var(--abstand-4); }

.vorlesen {
  margin: 0 0 var(--abstand-4);
  padding: var(--abstand-3);
  background: var(--flaeche);
  border-left: var(--linie-dick) solid var(--blau);
}
.vorlesen-label {
  display: block;
  font-size: var(--gr-klein);
  font-weight: 700;
  color: var(--text-leise);
}
.vorlesen p { margin: var(--abstand-1) 0 0; font-size: var(--gr-gross); line-height: 1.35; }

.abschnitt { margin-bottom: var(--abstand-4); }
.abschnitt h3 { font-size: var(--gr-gross); margin-bottom: var(--abstand-2); }
.abschnitt p, .abschnitt ul { margin: 0; }

.schritte {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}
.schritte li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-2);
  font-size: var(--gr-gross);
  line-height: 1.35;
}
.schritte li::before {
  content: counter(schritt);
  font-family: var(--schrift-titel);
  font-weight: 700;
  color: var(--blau);
  font-size: 1.3em;
  line-height: 1;
}

.begriffe { margin: 0; }
.begriffe dt { font-weight: 700; }
.begriffe dd { margin: 0 0 var(--abstand-2); }

/* Ab Tablet/Beamer: Filter links, Inhalt rechts */
@media (min-width: 900px) {
  .buehne {
    display: grid;
    grid-template-columns: minmax(18rem, 26rem) 1fr;
    gap: var(--abstand-5);
    align-items: start;
  }
  .filter { position: sticky; top: var(--abstand-3); }
  .ergebnis, .detail { grid-column: 2; grid-row: 1; }
}

/* Am Handy verdrängt das Detail die Filter, damit es sofort oben steht. */
@media (max-width: 899px) {
  .zeigt-detail .filter { display: none; }
}

/* „Gib mir einen“ / „Gib mir eine“: Hauptaktion, volle Breite der Ergebnisspalte */
.knopf-ziehen {
  width: 100%;
  min-height: 3.5rem;
  margin-bottom: var(--abstand-3);
  font-family: var(--schrift-titel);
  font-size: var(--gr-gross);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Zufall: die Trommel läuft groß, bis der gezogene Titel stehen bleibt. */
.zufall {
  /* Die Trommel steht in der Bildmitte, die Fußzeile bleibt unten. */
  min-height: calc(100dvh - 16rem);
  display: grid;
  place-items: center;
}
/* Fenster „Zufall einstellen“: Wahl je App, auf dem Gerät gespeichert */
.zufall-wahl-titel { margin: var(--abstand-3) 0 var(--abstand-1); font-weight: 700; }
.zufall-segmente button { padding: 0 var(--abstand-2); font-size: var(--gr-klein); }
.zufall-ziehung { display: grid; justify-items: center; gap: var(--abstand-3); }
.zufall-ikon {
  width: 7rem;
  aspect-ratio: 1;
  padding: 1rem;
  border-radius: 24%;
}
.zufall-ikon:empty { visibility: hidden; }
.zufall-trommel {
  margin: 0;
  max-width: 100%;
  text-align: center;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: var(--gr-titel);
  line-height: 1.1;
}
.zufall-trommel.dreht { color: var(--text-leise); }
.zufall-trommel.steht {
  color: var(--blau);
  border-bottom: var(--linie-dick) solid var(--blau);
}
.zufall-trommel.ist-leer {
  font-family: var(--schrift-text);
  font-size: var(--gr-gross);
  color: var(--text-leise);
}

/* Aktionen im Detail */
.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-4);
}

/* ---------- Beamer ---------- */
/* Kopf, Leiste und Fußzeile blendet `vollbild` aus (shared/bausteine.css). */
.zeigt-beamer .buehne { display: none; }

.beamer {
  /* Füllt genau den Bildschirm; der Schritt nimmt den Platz, der übrig bleibt. */
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "kopf" "buehne" "blaettern" "uhr";
  gap: var(--abstand-3);
  padding: var(--abstand-3);
  background: var(--grund);
}

.beamer-kopf {
  grid-area: kopf;
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  border-bottom: var(--linie-dick) solid var(--akzent);
  padding-bottom: var(--abstand-2);
}
.beamer-titel { font-size: var(--gr-titel); flex: 1; min-width: 0; }
.beamer-ikon {
  flex: none;
  width: calc(var(--gr-titel) * 1.3);
  aspect-ratio: 1;
  padding: 0.35rem;
  border-radius: 24%;
}
.beamer-stand {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: var(--gr-gross);
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.beamer-buehne {
  grid-area: buehne;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.beamer-bild {
  width: 100%;
  border-left: var(--linie-dick) solid var(--akzent);
  padding-left: var(--abstand-4);
}
.beamer-bild.ist-einstieg { border-left-color: var(--blau); }
.beamer-label {
  display: block;
  font-weight: 700;
  font-size: var(--gr-gross);
  color: var(--text-leise);
  margin-bottom: var(--abstand-2);
}
.beamer-text {
  margin: 0;
  font-size: clamp(1.5rem, min(4.2vw, 7.5vh), 5rem);
  line-height: 1.3;
  max-width: 30em;
}
/* Szene: Animation des Eintrags groß, daneben (quer) oder darunter (hochkant) der Text.
   Ohne Linie links, die Szene trägt die Akzentfarbe selbst. */
.beamer-bild.ist-szene {
  border-left: 0;
  padding-left: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-3);
  text-align: center;
}
/* Hochkant nimmt die Szene den Platz, den der Text übrig lässt (höchstens 40 % der Höhe). */
.beamer-szene {
  flex: 1 1 0;
  min-height: 0;
  max-height: 40vh;
  width: 100%;
  color: var(--akzent);
}
.beamer-szene .ikon { stroke-width: 3; overflow: visible; }
.ist-szene .beamer-text { max-width: 22em; }
@media (min-aspect-ratio: 1/1) {
  .beamer-bild.ist-szene { flex-direction: row; text-align: left; gap: var(--abstand-5); }
  .beamer-szene { flex: none; width: min(50%, 62vh); height: 100%; max-height: none; }
  .ist-szene .beamer-textblock { flex: 1; min-width: 0; }
}

/* Umschalter der Beamer-Modi (z. B. „Nur Bild“ und „Mit Text“) */
.beamer-kopf .beamer-modus { flex: none; width: auto; }
.beamer-modus button { padding: 0 var(--abstand-3); font-size: var(--gr-klein); white-space: nowrap; }

.beamer-nr {
  font-family: var(--schrift-titel);
  color: var(--blau);
  margin-right: 0.35em;
}

.beamer-blaettern {
  grid-area: blaettern;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--abstand-2);
  padding: 6px;
  border-radius: var(--rund-gross);
}
.beamer-blaettern button { border-radius: calc(var(--rund-gross) - 6px); }
.beamer-blaettern button { min-height: 3.25rem; font-size: var(--gr-gross); }
/* Tempo-Regler über Zurück und Weiter, nur bei Kommandos im Takt (Mitmachen); groß genug für Schülerhände. */
.beamer-tempo { grid-column: 1 / -1; }
.beamer-blaettern:not(.mit-tempo) .beamer-tempo { display: none; }
.beamer-tempo button { padding: 0 var(--abstand-2); font-size: var(--gr-text); }

/* ---------- Ablauf (shared/ablauf.js) ---------- */
/* Ein Bild als Folge von Schlägen: großes Wort, Countdown, Denkzeit, Punkte, Antworten in den Ecken.
   Größen richten sich nach der Bühne (Containerquery), damit es neben der Uhr wie im Vollbild passt.
   Keine Flächen, die aufblitzen: Bewegung nur an Wörtern, Zahlen und der Szene. */
.beamer-bild.ist-ablauf { height: 100%; border-left: 0; padding-left: 0; }
.ablauf {
  position: relative;
  height: 100%;
  container-type: size;
}
.ablauf-mitte {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-3);
  text-align: center;
}
.mit-ecken .ablauf-mitte { padding: clamp(3rem, 20cqh, 8rem) clamp(3rem, 16cqw, 10rem); }
.ablauf-szene {
  flex: 1 1 0;
  min-height: 0;
  max-height: 38cqh;
  width: 100%;
  color: var(--akzent);
}
/* Gedrehte Teile (Daumen runter) dürfen über die Zeichnung hinausragen. */
.ablauf-szene .ikon { stroke-width: 3; overflow: visible; }
@container (min-aspect-ratio: 1/1) {
  .mit-szene .ablauf-mitte { flex-direction: row; text-align: left; gap: var(--abstand-5); }
  .mit-szene .ablauf-szene { flex: none; width: min(36%, 62cqh); height: 100%; max-height: none; }
  .mit-szene .ablauf-block { flex: 1; justify-items: start; }
}
.ablauf-block { min-width: 0; max-width: 100%; display: grid; justify-items: center; gap: var(--abstand-3); }
.ablauf-label { font-weight: 700; font-size: var(--gr-gross); color: var(--text-leise); }
.ablauf-label:empty { display: none; }
.ablauf-text { max-width: 100%; }
.ablauf-wort, .ablauf-zahl {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.02;
  text-wrap: balance;
}
.ablauf-wort { font-size: clamp(2rem, min(10cqw, 20cqh), 10rem); }
.mit-szene .ablauf-wort { font-size: clamp(1.75rem, min(6.5cqw, 14cqh), 7rem); }
.mit-ecken .ablauf-wort { font-size: clamp(1.5rem, min(7cqw, 12cqh), 6rem); }
.ablauf-wort.ist-einzeln { font-size: clamp(1.75rem, min(16cqw, 34cqh, 180cqw / var(--zeichen)), 14rem); }
.ablauf-wort.ist-signal {
  font-size: clamp(2.25rem, min(10cqw, 20cqh), 9rem);
  text-decoration: underline var(--akzent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}
/* Kommandos einer Folge: alle gleich groß, auch das Signal (Maß: längstes Wort der Folge, bis drei Zeilen). */
.ablauf-wort.ist-kommando { font-size: clamp(1.5rem, min(13cqw, 24cqh, 150cqw / var(--zeichen)), 11rem); }
.ablauf-zahl {
  font-size: clamp(5rem, min(30cqw, 56cqh), 22rem);
  line-height: 0.9;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
/* Ruhig: jedes Wort hebt sich nacheinander. Takt: harter Schnitt mit kurzem Ruck. */
@keyframes ablauf-heben { from { opacity: 0; transform: translateY(0.3em); } }
@keyframes ablauf-ruck { from { transform: scale(1.14); } }
.ablauf[data-tempo="ruhig"] .ablauf-wort span { display: inline-block; animation: ablauf-heben 900ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 200ms) both; }
.ablauf[data-tempo="ruhig"] .schnitt { animation: ablauf-heben 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ablauf[data-tempo="takt"] .schnitt { animation: ablauf-ruck 180ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }

/* Punkte nacheinander, der aktuelle kräftig */
.ablauf-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); text-align: left; }
.ablauf-punkte li {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(1.5rem, min(6cqw, 11cqh), 5rem);
  line-height: 1.1;
  border-left: var(--linie-dick) solid var(--akzent);
  padding-left: 0.4em;
  color: var(--text-leise);
  animation: ablauf-heben 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.ablauf-punkte li.ist-jetzt { color: var(--text); }

/* Denkzeit: Ring wie die Uhr, Sekunden darin */
.ablauf-denkzeit { display: flex; align-items: center; gap: var(--abstand-3); }
.ablauf-denkzeit[hidden] { display: none; }
.ablauf-uhr {
  position: relative;
  width: clamp(4rem, min(14cqw, 22cqh), 9rem);
  aspect-ratio: 1;
  container-type: inline-size;
}
.ablauf-ring { width: 100%; height: 100%; display: block; }
.ablauf-ring-spur { fill: none; stroke: var(--flaeche); stroke-width: 10; }
.ablauf-ring-rest { fill: none; stroke: var(--blau); stroke-width: 10; transition: stroke-dashoffset 200ms linear; }
.ablauf-sek {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 42cqi;
  font-variant-numeric: tabular-nums;
}
.ablauf-denk-text { font-weight: 700; font-size: var(--gr-gross); color: var(--text-leise); }
.ablauf-denkzeit.ist-um .ablauf-denk-text { color: var(--text); }

/* Reduzierte Bewegung: Wörter, Zahlen und Punkte stehen sofort da (ablauf.js zeigt Wort für Wort dann als ganze Zeile). */
@media (prefers-reduced-motion: reduce) {
  .ablauf-wort span, .ablauf .schnitt, .ablauf-punkte li { animation: none !important; }
  .ablauf-ring-rest { transition: none; }
}

/* Sehr niedrige Bühne (kleines iPhone hochkant, Handy quer): alles enger, Ring klein neben dem Wort „Denkzeit“. */
@container (max-height: 260px) {
  .ablauf-block { gap: var(--abstand-1); }
  /* Die Szene läuft klein im Beamer-Kopf mit; hier braucht der Satz die ganze Breite. */
  .mit-szene .ablauf-szene { display: none; }
  .mit-ecken .ablauf-wort { font-size: clamp(1.25rem, min(7cqw, 12cqh), 6rem); }
  .ablauf-label, .ablauf-denk-text { font-size: var(--gr-text); }
  .ablauf-uhr { width: 2.75rem; }
  .ablauf-denkzeit { gap: var(--abstand-2); }
  /* Mit Ecken bleibt die Mitte frei für den Satz; der kleine Hinweis darüber entfällt hier. */
  .ablauf-ecke { font-size: 1.5rem; }
  .ablauf-ecke.ist-lang { font-size: var(--gr-text); }
  .mit-ecken .ablauf-mitte { padding: 1.5rem 3rem 2rem; }
  .mit-ecken .ablauf-uhr { width: 2.25rem; }
  .mit-ecken .ablauf-label { display: none; }
}

/* Antworten in den vier Ecken (im Uhrzeigersinn), mit Eckwinkel wie im Sucher */
.ablauf-ecke {
  position: absolute;
  padding: 0.2em 0.35em;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(1.75rem, min(9cqw, 15cqh), 6rem);
  line-height: 1;
  border: 0 solid var(--akzent);
}
/* Längere Antworten (z. B. Pole „gar nicht“ und „voll und ganz“) kleiner und umbrechend. */
.ablauf-ecke.ist-lang { max-width: 40cqw; font-size: clamp(1.125rem, min(5cqw, 9cqh), 3.5rem); }
.ecke-1 { top: 0; left: 0; border-width: var(--linie-dick) 0 0 var(--linie-dick); }
.ecke-2 { top: 0; right: 0; border-width: var(--linie-dick) var(--linie-dick) 0 0; }
.ecke-3 { bottom: 0; right: 0; border-width: 0 var(--linie-dick) var(--linie-dick) 0; }
.ecke-4 { bottom: 0; left: 0; border-width: 0 0 var(--linie-dick) var(--linie-dick); }

/* Uhr */
/* Handy: Ring links klein, Bedienung rechts daneben. */
.uhr {
  grid-area: uhr;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ring modus" "ring start" "knoepfe knoepfe";
  align-items: center;
  gap: var(--abstand-2) var(--abstand-3);
  padding: var(--abstand-3);
  border-radius: var(--rund-gross);
}
.uhr-modus { grid-area: modus; flex-wrap: nowrap; }
.uhr-modus .schalter { flex: 1; }
.uhr-anzeige {
  grid-area: ring;
  position: relative;
  width: min(9rem, 36vw);
  aspect-ratio: 1;
  container-type: inline-size;
}
.uhr-ring { width: 100%; height: 100%; display: block; }
.uhr-spur { fill: none; stroke: var(--flaeche); stroke-width: 10; }
.uhr-rest {
  fill: none;
  stroke: var(--blau);
  stroke-width: 10;
  stroke-linecap: butt;
  transition: stroke-dashoffset 200ms linear;
}
.ist-stoppuhr .uhr-rest { stroke: var(--gruen); transition: none; }
.uhr-ziffern {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 30cqi;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Letzte 10 Sekunden: Innenfläche wird gelb. */
.knapp .uhr-spur { fill: var(--gelb); }
.knapp .uhr-ziffern { color: var(--auf-gelb); }
/* Ende: ganze Uhr deckend gelb (kein Glas), kurzes dreimaliges Pulsieren. */
.uhr.ende {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--gelb);
  border-color: var(--gelb);
  color: var(--auf-gelb);
  animation: puls 600ms ease-in-out 3;
}
.uhr.ende .uhr-spur { stroke: var(--auf-gelb); stroke-opacity: 0.25; }
.uhr.ende .knopf-zweit, .uhr.ende .schalter { color: var(--auf-gelb); border-color: var(--auf-gelb); }
.uhr.ende .schalter[aria-pressed="true"] { background: var(--auf-gelb); color: var(--gelb); }
.uhr.ende .knopf { background: var(--auf-gelb); border-color: var(--auf-gelb); color: var(--gelb); }
@keyframes puls { 50% { transform: scale(1.03); } }

.uhr-knoepfe {
  grid-area: knoepfe;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-2);
}
.ist-stoppuhr .uhr-minuten { display: none; }
.uhr-knoepfe button, .uhr-modus .schalter { padding: var(--abstand-1) var(--abstand-2); }
.uhr-start { grid-area: start; min-height: 3.5rem; font-size: var(--gr-gross); }
/* Der Stand („läuft“, „Zeit ist um“) wird immer vorgelesen. Sichtbar steht er nur am breiten Bildschirm;
   sonst zeigen ihn Ring, gelbe Fläche und Knopfbeschriftung. */
.uhr-status {
  grid-area: status;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: 0;
  font-weight: 700;
  font-size: var(--gr-gross);
}

/* Querformat ab Tablet und Beamer: Schritt links groß, Uhr rechts. */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .beamer {
    grid-template-columns: 1fr minmax(16rem, 24rem);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "kopf kopf" "buehne uhr" "blaettern uhr";
    gap: var(--abstand-4);
    padding: var(--abstand-4) var(--abstand-5);
  }
  .uhr {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "modus" "ring" "start" "knoepfe" "status";
    justify-items: center;
    align-content: center;
  }
  .uhr-knoepfe, .uhr-modus { width: 100%; }
  .uhr-start { width: 100%; }
  .uhr-status { position: static; width: auto; height: auto; overflow: visible; clip: auto; min-height: 1.5em; text-align: center; }
  .uhr-anzeige { width: min(100%, 38vh); }
}

/* ---------- Leiste, Filterknopf, Filterfenster ---------- */
/* Grundgestalt aus shared/bausteine.css; hier nur, was die Ansichten der Karten-Apps betrifft. */

@media (max-width: 899px) {
  .zeigt-detail .kopf-marke { display: none; }
  /* Ohne Marke rückt der erste Kopfknopf (Zahnrad oder Beamer-Ansicht) nach rechts. */
  .zeigt-detail .kopf-marke + * { margin-left: auto; }
  /* Im Detail führt der Kopf zurück, der Textknopf wäre doppelt. */
  #zurueck { display: none; }
  .detail-titel { margin-top: var(--abstand-2); }

  /* Am Handy übernimmt der Bereich „Zufall“ den Knopf. */
  .knopf-ziehen { display: none; }
  .filter { display: block; }
}

/* Auf Glas nur kräftiger Text. */
.fenster .filtergruppe legend { color: var(--text); }

/* Ab 900 px stehen die Filter in der Seitenspalte (das Filterfach blendet karten-app.js aus). */
@media (min-width: 900px) {
  .zufall { grid-column: 2; grid-row: 1; }
}

/* ---------- Merkliste ---------- */

/* Lesezeichen-Ecke auf gemerkten Kacheln: Markierungsgelb mit Linie, hält auch auf gelben Icons. */
.merk-ecke {
  position: absolute;
  top: -2px;
  right: 10%;
  width: 22%;
  min-width: 0.7rem;
  fill: var(--gelb);
  stroke: var(--linie);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ist-kacheln .merk-ecke { width: 12%; right: 12%; }

/* Merken-Knopf im Detail: Zeichen hohl, gemerkt gefüllt. */
.knopf-merken .merk-zeichen {
  width: 0.85em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.knopf-merken[aria-pressed="true"] { background: var(--gelb); border-color: var(--gelb); color: var(--auf-gelb); }
.knopf-merken[aria-pressed="true"] .merk-zeichen { fill: currentColor; }
/* Einrasten: zeigt, dass gespeichert wurde. */
.knopf-merken.rastet .merk-zeichen { animation: einrasten 320ms cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes einrasten { from { transform: translateY(-0.35em) scale(0.7); } }

.merk-leer { margin: var(--abstand-3) 0; display: grid; justify-items: start; gap: var(--abstand-2); }
.merk-leer .hinweis { margin: 0; font-size: var(--gr-gross); }
.merk-sichern {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin-top: var(--abstand-5);
  padding-top: var(--abstand-3);
  border-top: var(--linie-duenn) solid var(--linie);
}

/* In der Merkliste gibt es keine Filter; Übersicht und Detail nutzen die volle Breite. */
.zeigt-merkliste .filter { display: none; }
@media (min-width: 900px) {
  .zeigt-merkliste :is(.merkliste, .detail) { grid-column: 1 / -1; grid-row: 1; }
}

/* ---------- Beamer-Ansicht ---------- */
/* Die Grundschrift wächst (shared/design.css); der Beamer-Modus ist Vollbild und behält seine Größen. */
/* Ab 900 px: keine Filterspalte, die Filter liegen im Fenster. */
@media (min-width: 900px) {
  .beamer-ansicht .buehne { grid-template-columns: minmax(0, 1fr); }
  .beamer-ansicht :is(.ergebnis, .detail, .zufall, .merkliste) { grid-column: 1; }
}

/* ---------- Handy hochkant: Schrift im Beamer-Modus richtet sich auch nach der Höhe (kleine iPhones) ---------- */
@media (max-width: 699px) and (orientation: portrait) {
  .beamer-text { font-size: clamp(1.25rem, min(6.4vw, 3vh), 2rem); }
  .beamer-kopf:has(.beamer-modus) { flex-wrap: wrap; }
  .beamer-kopf .beamer-modus { order: 1; flex: 1 0 100%; }
  .beamer-kopf:has(.beamer-modus) .beamer-titel { font-size: var(--gr-gross); }
}

/* ---------- Tablet hochkant (iPad mini) ---------- */
@media (min-width: 700px) and (max-width: 899px) and (orientation: portrait) {
  .vorlesen p, .schritte li { font-size: 1.6rem; }

  .beamer { padding: var(--abstand-4); gap: var(--abstand-4); }
  .beamer-text { font-size: clamp(2rem, 5.5vw, 3.5rem); }
  .uhr {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ring modus" "ring start" "ring knoepfe";
    gap: var(--abstand-3) var(--abstand-4);
    padding: var(--abstand-4);
  }
  .uhr-anzeige { width: 16rem; }
  .uhr-knoepfe button, .uhr-modus .schalter { min-height: 3rem; font-size: var(--gr-text); }
}

/* ---------- Flach: Handy quer ---------- */
/* Wenig Höhe: Bereiche oben im Kopf, Filterknopf in der Ecke, Beamer-Modus in zwei Spalten. */
@media (max-height: 500px) and (orientation: landscape) {
  /* Auch ab 900 px Breite (große iPhones quer): keine Filterspalte, Filter im Fenster. */
  .buehne { display: block; }
  .knopf-ziehen { display: none; }
  .zufall { min-height: calc(100dvh - 9rem); }

  /* Beamer-Modus: links Kopf, Schritt und Blättern, rechts die Uhr. Alles ohne Scrollen. */
  .beamer {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "kopf uhr" "buehne uhr" "blaettern uhr";
    gap: var(--abstand-2) var(--abstand-3);
    padding: var(--abstand-2) calc(var(--abstand-3) + env(safe-area-inset-right)) var(--abstand-2) calc(var(--abstand-3) + env(safe-area-inset-left));
  }
  .beamer-kopf { gap: var(--abstand-2); padding-bottom: var(--abstand-1); }
  .beamer-titel { font-size: var(--gr-gross); }
  .beamer-ikon { width: 2.25rem; padding: 0.2rem; }
  .beamer-stand { font-size: var(--gr-text); }
  .beamer-label { font-size: var(--gr-klein); margin-bottom: var(--abstand-1); }
  .beamer-text { font-size: clamp(1.15rem, min(3.4vw, 7vh), 2.5rem); }
  .beamer-blaettern { padding: 4px; }
  .beamer-blaettern button { min-height: var(--tippflaeche); font-size: var(--gr-text); }

  .uhr {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "modus" "ring" "start" "knoepfe";
    justify-items: center;
    align-content: center;
    gap: var(--abstand-2);
    padding: var(--abstand-2);
  }
  .uhr-anzeige { width: min(100%, 36vh); }
  .uhr-start { width: 100%; min-height: var(--tippflaeche); font-size: var(--gr-text); }
  .uhr-knoepfe { width: 100%; gap: var(--abstand-1); }
  /* Auch bei großen iPhones quer (ab 900 px) bleibt der Stand unsichtbar, sonst fehlt Höhe. */
  .uhr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .uhr-knoepfe button, .uhr-modus .schalter { padding: 0 var(--abstand-2); font-size: var(--gr-klein); }
}

/* ---------- Ordner (Darstellung „Ordner“ in karten-app.js) ---------- */
/* Wie ein Ordner auf dem iPhone: eine ruhige Fläche mit vier kleinen Motiven daraus, darunter Name,
   eine kurze Zeile und die Zahl der passenden Karten. Die Farbe kommt nur von den Motiven. */
.liste.ist-ordner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--abstand-4) var(--abstand-3);
}
.ist-ordner .eintrag { display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--abstand-2); padding: 0; }
.ordner-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 9%;
  aspect-ratio: 1;
  padding: 11%;
  border-radius: 22%;
  background: var(--flaeche);
  border: 1px solid var(--glas-kante);
  box-shadow: inset 0 1px 0 var(--glas-kante);
}
.ordner-mini { display: block; aspect-ratio: 1; padding: 18%; border-radius: 24%; }
.ordner-mini .ikon { stroke-width: 4.5; }
.ist-ordner .eintrag-kurz { display: block; }
.ist-ordner .eintrag-kurz::after { content: none; }
.ist-ordner .eintrag-info { display: block; }
@media (hover: hover) {
  .ist-ordner .eintrag:hover .ordner-raster { outline: 3px solid var(--blau); outline-offset: 3px; }
}
.ist-ordner .eintrag:focus-visible { outline: none; }
.ist-ordner .eintrag:focus-visible .ordner-raster { outline: 3px solid var(--fokus); outline-offset: 3px; }
@media (min-width: 900px) {
  .liste.ist-ordner { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}

/* Geöffneter Ordner: zurück zu allen, großes Motiv, Name und Zeile */
.ordner-kopf { display: grid; justify-items: start; gap: var(--abstand-2); margin: var(--abstand-2) 0 var(--abstand-3); }
.ordner-kopf[hidden] { display: none; }
.ordner-zurueck { min-height: var(--tippflaeche); display: inline-flex; align-items: center; padding-inline: 0; }
.ordner-titel { display: flex; align-items: center; gap: var(--abstand-3); }
.ordner-titel h3 { margin: 0; font-family: var(--schrift-titel); font-size: var(--gr-titel); line-height: 1.1; }
.ordner-info { color: var(--text-leise); }
.ordner-ikon { flex: none; width: 3.5rem; padding: 0.55rem; border-radius: 24%; }

/* Im Detail: in welchem Ordner die Karte steht (führt hinein) */
.detail-ordner {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--tippflaeche);
  margin: calc(var(--abstand-2) * -1) 0 var(--abstand-3);
  color: var(--text);
  text-decoration: none;
}
.detail-ordner strong { color: var(--blau); }
.detail-ordner-ikon { flex: none; width: 2rem; padding: 0.3rem; border-radius: 24%; }
@media (hover: hover) { .detail-ordner:hover strong { text-decoration: underline; } }

/* ---------- Spielzug (shared/spielzug.js) ---------- */
/* Kurzer Film aus SVG: Spielfläche von oben (Halle, Rasen, Hof) oder Hände von vorn. Zwei Teamfarben
   (Blau und Rot), Hütchen orange, Ball gelb (nur als Fläche mit Rand). Hände räumlich mit Licht und Schatten. */
.detail-spielzug { margin: 0 0 var(--abstand-4); max-width: 48rem; }
.spielzug { margin: 0; display: grid; gap: var(--abstand-2); min-width: 0; }
.spielzug-buehne {
  aspect-ratio: 16 / 9;
  border-top: var(--linie-duenn) solid var(--linie);
  border-bottom: var(--linie-duenn) solid var(--linie);
  min-height: 0;
}
.sz-bild { display: block; width: 100%; height: 100%; overflow: visible; transition: opacity 200ms ease; }
.spielzug.ist-schnitt .sz-bild { opacity: 0; }

.spielzug-leiste { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--abstand-2) var(--abstand-3); }
.spielzug-leiste .spielzug-text { grid-column: 1 / -1; }
.spielzug-marken { display: flex; gap: 6px; }
.spielzug-marke { flex: 1; min-width: 6px; max-width: 4rem; height: 4px; border-radius: 2px; background: var(--text-leise); opacity: 0.35; }
.spielzug-marke.ist-jetzt { background: var(--text); opacity: 1; }
.spielzug-text {
  min-width: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  line-height: 1.05;
}
.spielzug-knoepfe { display: flex; gap: var(--abstand-2); }
.spielzug-knoepfe button { padding-inline: var(--abstand-3); }

/* Spielflächen: Halle mit Linien wie im Sportunterricht, Rasen mit Kreide, Hof als Asphalt */
.sz-feld :is(line, circle, path, rect:not(.sz-boden)) { fill: none; }
.feld-halle .sz-boden { fill: var(--flaeche); }
.feld-rasen .sz-boden { fill: var(--gruen); fill-opacity: 0.2; }
.feld-raum .sz-boden { fill: var(--flaeche); }
.sz-tafel { fill: var(--text) !important; opacity: 0.75; }
.sz-tisch { fill: var(--grund) !important; stroke: var(--linie); stroke-width: 0.7; opacity: 0.7; }
.feld-hof .sz-boden { fill: var(--text-leise); fill-opacity: 0.16; }
.sz-linie { stroke: var(--linie); stroke-width: 0.9; opacity: 0.55; }
.sz-hallenblau { stroke: var(--blau); stroke-width: 0.9; opacity: 0.6; }
.sz-hallenrot { stroke: var(--rot); stroke-width: 0.9; opacity: 0.55; }
.sz-kreide { stroke: var(--linie); stroke-width: 1; opacity: 0.45; stroke-dasharray: 3 1.2; }

/* Personen von oben wie im Alltag: Pulli, Hände, Kopf mit Haaren hinten (Blickrichtung) */
.sz-schultern { stroke: var(--grund); stroke-width: 0.9; }
.sz-haut-oben { fill: var(--flaeche); stroke: var(--linie); stroke-width: 0.6; }
.sz-person.team-0 .sz-schultern { fill: var(--schiefer); }
.sz-person.team-1 .sz-schultern { fill: var(--blau); }
.sz-person.team-2 .sz-schultern { fill: var(--rot); }
.sz-person.team-3 .sz-schultern { fill: var(--gruen); }
.sz-person.team-4 .sz-schultern { fill: var(--petrol); }
.sz-person.team-5 .sz-schultern { fill: var(--violett); }
.sz-person.team-6 .sz-schultern { fill: var(--orange); }
.sz-hand-oben { fill: var(--flaeche); stroke: var(--linie); stroke-width: 0.8; }
.sz-kopf { fill: var(--text); stroke: var(--grund); stroke-width: 1; }
.sz-gesicht { fill: var(--flaeche); }
/* Laufweg: gepunktet wie Schritte, in der Teamfarbe */
.sz-spur { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.1 4; opacity: 0.75; }
.sz-spur { stroke: var(--schiefer); }
.sz-spur.team-1 { stroke: var(--blau); }
.sz-spur.team-2 { stroke: var(--rot); }
.sz-stopp path { fill: none; stroke: var(--text-leise); stroke-width: 1.2; stroke-linecap: round; transform-box: fill-box; transform-origin: left center; animation: sz-auf 300ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.sz-huetchen path { fill: var(--orange); stroke: var(--grund); stroke-width: 1; stroke-linejoin: round; }
.sz-reifen circle { fill: none; stroke: var(--violett); stroke-width: 2.2; }
.sz-zone circle { fill: none; stroke: var(--text-leise); stroke-width: 1.4; stroke-dasharray: 3 2.5; }
.sz-marke text { font-family: var(--schrift-titel); font-size: 13px; fill: var(--text-leise); }
.sz-blatt rect { fill: var(--flaeche); stroke: var(--linie); stroke-width: 1; }
.sz-blatt path { fill: none; stroke: var(--text-leise); stroke-width: 0.8; }
.sz-band path { fill: var(--gelb); stroke: var(--linie); stroke-width: 0.6; }
.sz-signal circle { fill: var(--gelb); stroke: var(--linie); stroke-width: 0.8; }
.sz-signal path { stroke: var(--text); stroke-width: 1.2; stroke-linecap: round; }
.sz-bodenlinie line { stroke: var(--text-leise); stroke-width: 1.6; stroke-linecap: round; }
.sz-ampel rect { fill: var(--text); }
.sz-licht { fill: var(--grund); opacity: 0.35; }
.sz-licht.ist-an { opacity: 1; }
.sz-licht.licht-rot.ist-an { fill: var(--rot); }
.sz-licht.licht-gelb.ist-an { fill: var(--gelb); }
.sz-licht.licht-gruen.ist-an { fill: var(--gruen); }
.sz-zeichnung { stroke: var(--blau); stroke-width: 2.2; stroke-dasharray: none; opacity: 0.85; }
.sz-pulli { fill: var(--petrol); }
.sz-haare-vorn { fill: var(--text); }
.sz-auge { fill: var(--text); }
.sz-nase { fill: none; stroke: var(--linie); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.feld-tafel .sz-boden { fill: var(--grund); }
.sz-tafelflaeche { fill: var(--flaeche) !important; stroke: var(--linie); stroke-width: 1.4; }
.sz-ablage { fill: var(--text-leise) !important; opacity: 0.6; }
.sz-marke.ist-klein text { font-family: var(--schrift-text); font-size: 6px; }
.sz-punkt circle { stroke: var(--grund); stroke-width: 0.6; }
.sz-punkt.team-0 circle { fill: var(--schiefer); } .sz-punkt.team-1 circle { fill: var(--blau); } .sz-punkt.team-2 circle { fill: var(--rot); }
.sz-punkt.team-3 circle { fill: var(--gruen); } .sz-punkt.team-4 circle { fill: var(--petrol); } .sz-punkt.team-5 circle { fill: var(--violett); } .sz-punkt.team-6 circle { fill: var(--orange); }
.sz-zettel rect { fill: var(--flaeche); stroke: var(--linie); stroke-width: 0.6; }
.sz-zettel path { fill: none; stroke: var(--text-leise); stroke-width: 0.5; }
.sz-karte rect { stroke: var(--linie); stroke-width: 0.5; }
.sz-karte .licht-rot { fill: var(--rot); } .sz-karte .licht-gelb { fill: var(--gelb); } .sz-karte .licht-gruen { fill: var(--gruen); }
.sz-koffer rect { fill: var(--orange); stroke: var(--linie); stroke-width: 0.8; }
.sz-koffer path { fill: none; stroke: var(--linie); stroke-width: 0.9; }
.sz-eimer circle { fill: var(--schiefer); stroke: var(--linie); stroke-width: 0.8; }
.sz-eimer .sz-eimer-innen { fill: var(--text); opacity: 0.5; }
.sz-wuerfel rect { fill: var(--flaeche); stroke: var(--linie); stroke-width: 0.8; }
.sz-wuerfel circle { fill: var(--text); }
.sz-seil path { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; }
.sz-bild g { transition: opacity 400ms ease; }
.sz-bild .ist-weg { opacity: 0; }
.sz-ball circle { fill: var(--gelb); stroke: var(--linie); stroke-width: 1; }
.sz-ball .sz-ball-naht { fill: none; stroke: var(--linie); stroke-width: 0.6; opacity: 0.6; }

/* Hand mit Körper: Haut, Wölbung aus Licht und Schatten (Verläufe nur aus Tokens), Schlagschatten,
   Sehnen, Fingergelenke, Nägel; Unterarm mit Ärmel. */
.art-haende, .sz-bild { overflow: hidden; }
.sz-haut { fill: var(--flaeche); }
.sz-rand { stroke: var(--linie); stroke-width: 1.7; stroke-linejoin: round; }
.sz-volumen, .sz-aermel-volumen { stroke: none; }
.sz-stopp-licht { stop-color: var(--licht); }
.sz-stopp-leer { stop-color: var(--licht); stop-opacity: 0; }
.sz-stopp-schatten { stop-color: var(--schatten); }
.sz-schlagschatten { fill: var(--schatten); }
.sz-rand-flaeche { fill: var(--linie); stroke: var(--linie); stroke-width: 3.4; stroke-linejoin: round; }
.sz-glanz { fill: none; stroke: var(--licht); stroke-linecap: round; opacity: 0.75; }
.sz-tiefe { fill: none; stroke: var(--schatten); stroke-linecap: round; opacity: 0.55; }
.sz-aermel { fill: var(--text-leise); fill-opacity: 0.55; stroke: var(--linie); stroke-width: 1.7; }
.sz-knochen { fill: none; stroke: var(--licht); stroke-width: 2.2; stroke-linecap: round; }
.sz-knochen[data-innen="ja"] { fill: var(--licht); fill-opacity: 0.55; stroke: none; }
.sz-mulde { fill: none; stroke: var(--schatten); stroke-width: 1.8; stroke-linecap: round; }
.sz-mulde[data-innen="ja"] { fill: var(--schatten); fill-opacity: 0.35; stroke: none; }
.sz-sehne { fill: none; stroke: var(--schatten); stroke-width: 1.2; stroke-linecap: round; opacity: 0.6; }
.sz-gelenk { fill: none; stroke: var(--linie); stroke-width: 0.8; stroke-linecap: round; opacity: 0.55; }
.sz-nagel { fill: var(--licht); stroke: var(--linie); stroke-width: 0.7; stroke-opacity: 0.6; }

/* Zeichen: gewonnen (Ring bleibt), angetippt (Ring springt auf), Klatschen (Strahlen) */
.sz-ring, .sz-tipp { fill: none; transform-box: fill-box; transform-origin: center; }
.sz-ring { stroke: var(--gruen); stroke-width: 2; animation: sz-auf 400ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.sz-tipp { stroke: var(--rot); stroke-width: 2.4; animation: sz-auf 300ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.sz-klatsch path { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; transform-origin: center bottom; animation: sz-auf 300ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
@keyframes sz-auf { from { transform: scale(0.4); opacity: 0; } }

/* Bildfolge bei reduzierter Bewegung: jede Phase als Standbild mit ihren Wörtern */
.spielzug-folge { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--abstand-3); }
.spielzug-folge li { display: grid; gap: var(--abstand-1); }
.spielzug-folge .sz-bild { aspect-ratio: 16 / 9; height: auto; border-top: var(--linie-duenn) solid var(--linie); }
.spielzug-folge .spielzug-text { font-size: var(--gr-gross); }

/* Am Beamer füllt der Film die Bühne; Wörter und Knöpfe darunter. */
.beamer-bild.ist-spielzug { height: 100%; border-left: 0; padding-left: 0; display: flex; }
.ist-spielzug .spielzug { flex: 1; height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
.ist-spielzug .spielzug-buehne { aspect-ratio: auto; border: 0; }
.ist-spielzug .spielzug-text { font-size: clamp(1.75rem, min(5vw, 8vh), 6rem); }
.ist-spielzug .spielzug-folge { align-content: center; }
@media (prefers-reduced-motion: reduce) {
  .sz-ring, .sz-tipp, .sz-klatsch path, .sz-stopp path { animation: none; }
  .sz-bild { transition: none; }
}
/* Die Spielfläche hat ihren eigenen Rand; die Linien oben und unten entfallen dort. */
.spielzug[data-art="draufsicht"] .spielzug-buehne { border: 0; }