/* kinderspiel.app — ein Stylesheet, keine Abhängigkeiten, keine Webfonts.
   Die Datei wird beim Bauen unter /assets/site.<hash>.css abgelegt; nur
   deshalb darf sie ein Jahr lang zwischengespeichert werden.

   Die Farben sind aus der App und den App-Store-Bildern gezogen: der
   periwinkleblaue Grund, das Blau der Navigationsleiste, das Orange der
   Kategorie-Nadeln, und die bunten Kacheln der Ausstattungssymbole.

   ⚠ Keine Webfont. Die kursive Serifenschrift der Store-Bilder kommt über
   `ui-serif` — auf Apple-Geräten ist das New York, sonst Georgia. Beide
   sehen kursiv gut aus und kosten kein einziges Byte Ladezeit. */

:root {
  color-scheme: light dark;

  /* Grund und Karten */
  --grund: #e4edff;          /* exakt der Grund der App-Store-Bilder */
  --grund-tief: #d7e2fb;
  --karte: #ffffff;
  --linie: #dbe4f7;

  /* Blau — Navigationsleiste und Knöpfe der App */
  --blau: #2f7cf6;           /* das Blau der App — Kacheln, Marker, Fokusring */
  --blau-fest: #1c68e0;      /* Flächen mit weißer Schrift: 5,1:1 statt 3,9:1 */
  --blau-fest-tief: #1655bd; /* dieselbe Fläche beim Überfahren */
  --blau-tief: #1d63d8;      /* für Text und Verweise, hoher Kontrast */
  --blau-hell: #4a90ff;
  --blau-zart: #e8f0ff;

  /* Orange — die Nadeln, die Pfeile, das Akzentwort */
  --orange: #f97316;
  --orange-tief: #b8490a;    /* für Text, 4,4:1 auf dem Grund */

  /* Die Kachelfarben der Ausstattungssymbole */
  --kachel-orange: #f5a020;
  --kachel-blau: #3b9eff;
  --kachel-gruen: #34c759;
  --kachel-gelb: #ffc93c;
  --kachel-rot: #ff5a4e;
  --kachel-lila: #a855f7;

  --gruen: #15803d;          /* Hakenmarke: weiße Schrift darauf, 5,0:1 */
  --gruen-schrift: #ffffff;
  --gruen-zart: #e4f8ea;

  --text: #0d1220;
  --text-leise: #5b6478;

  --warnung: #8a5a00;
  --warnung-grund: #fff6e2;

  --breite: 70rem;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;

  --radius: 1.25rem;
  --radius-klein: 0.85rem;
  --schatten: 0 1px 2px rgb(13 18 32 / 0.04), 0 8px 24px -8px rgb(13 18 32 / 0.12);
  --schatten-hoch: 0 2px 4px rgb(13 18 32 / 0.06), 0 18px 40px -12px rgb(13 18 32 / 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0e1626;
    --grund-tief: #0a1120;
    --karte: #172033;
    --linie: #263149;

    --blau: #4a90ff;
    --blau-fest: #1c68e0;
    --blau-fest-tief: #2f7cf6;
    --blau-tief: #8ab8ff;
    --blau-hell: #6aa5ff;
    --blau-zart: #16233d;

    --orange: #ff8c3a;
    --orange-tief: #ffa864;

    --gruen: #4ade80;
    --gruen-schrift: #08240f;
    --gruen-zart: #12291c;

    --text: #eef2f8;
    --text-leise: #9fabc2;

    --warnung: #e8bf6a;
    --warnung-grund: #2a2317;

    --schatten: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.5);
    --schatten-hoch: 0 2px 4px rgb(0 0 0 / 0.35), 0 18px 40px -12px rgb(0 0 0 / 0.6);
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

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

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

h1, h2, h3 { letter-spacing: -0.028em; line-height: 1.08; }

/* ⚠ HIG Layout → Guides and safe areas: „Safe areas are essential for
   avoiding a device's interactive and display features, like Dynamic
   Island on mobile devices or the camera housing."
   `viewport-fit=cover` lässt den Grund bis an die Kanten laufen — richtig.
   Ohne diese Insets lag der Inhalt im Querformat aber bei x=0 mit nur
   20 px Polsterung, während die Sensorleiste dort etwa 44 px einnimmt
   (gemessen am 09.09.2026). Außerhalb solcher Geräte löst `env()` zu 0
   auf, kostet also nichts. */
.huelle {
  width: 100%; max-width: var(--breite);
  margin-inline: auto;
  padding-inline:
    max(1.25rem, env(safe-area-inset-left, 0px))
    max(1.25rem, env(safe-area-inset-right, 0px));
}

.springen {
  position: absolute; left: -9999px;
  background: var(--karte); padding: 0.75rem 1rem; border-radius: var(--radius-klein);
}
.springen:focus { left: 1rem; top: 1rem; z-index: 20; }

/* Das Akzentwort der Store-Bilder: kursive Serifenschrift in Orange. */
.akzent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--orange-tief);
  letter-spacing: -0.01em;
}

/* ── Bunte Kacheln (die Ausstattungssymbole der App) ─────────────────── */

.kachel {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 30%;
  font-size: 1.6rem; line-height: 1;
  box-shadow: var(--schatten);
  flex: none;
}
.kachel.orange { background: var(--kachel-orange); }
.kachel.blau   { background: var(--kachel-blau); }
.kachel.gruen  { background: var(--kachel-gruen); }
.kachel.gelb   { background: var(--kachel-gelb); }
.kachel.rot    { background: var(--kachel-rot); }
.kachel.lila   { background: var(--kachel-lila); }

/* ── Kopf ───────────────────────────────────────────────────────────── */

.kopf { padding-block: calc(1rem + env(safe-area-inset-top, 0px)) 1rem; }
.kopf .huelle {
  display: flex; align-items: center; gap: 0.75rem 1.5rem; flex-wrap: wrap;
}
/* ── Trefferflächen ──────────────────────────────────────────────────
   HIG Accessibility → Mobility: mobil sind 44×44 pt die empfohlene und
   28×28 pt die kleinste Größe für ein Bedienelement. Und: „Consider
   spacing between controls as important as size" — etwa 12 pt um
   Elemente mit Rahmen.
   ⚠ Gemessen am 09.09.2026 vor dieser Änderung: Kopf-Navigation und
   Fuß-Verweise 18 pt hoch, FAQ-Aufklapper 27 pt — alle unter der
   Untergrenze; die sechs Sprachpillen standen 2 pt auseinander.
   Die Schriftgrößen bleiben, nur die Fläche wächst. */
.marke {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 2.75rem;
  font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em;
  text-decoration: none; color: var(--text);
}
/* Das App-Icon. Die Datei ist ein volles Quadrat, die Rundung kommt von
   hier — so wie iOS sie auch aufs Icon legt. */
.marke img {
  width: 2rem; height: 2rem; flex: none;
  border-radius: 26%;
  box-shadow: 0 1px 2px rgb(13 18 32 / 0.12);
}
.kopf nav { margin-left: auto; }
.kopf nav ul {
  display: flex; flex-wrap: wrap; gap: 0 1.25rem;
  list-style: none; margin: 0; padding: 0; font-size: 0.95rem; font-weight: 500;
}
.kopf nav a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding-inline: 0.15rem;
  text-decoration: none; color: var(--text-leise);
}
.kopf nav a:hover, .kopf nav a[aria-current="page"] { color: var(--blau-tief); }

.sprachen { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.sprachen > span { color: var(--text-leise); }
/* Sechs Pillen à 44 pt mit 12 pt Abstand brauchen 324 px; bei 375 pt
   Fensterbreite bleiben der Kapsel nur 275. Die Referenz nennt den
   Abstand ausdrücklich so wichtig wie die Größe — also bleibt er bei
   12 pt, und die Breite gibt nach, aber nie unter die 28-pt-Grenze.
   Bei 320 pt reicht auch das nicht; dann bricht die Reihe um, und die
   flachere Rundung lässt zwei Reihen gewollt aussehen. */
.sprachen ul {
  display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none;
  margin: 0; padding: 0.25rem;
  background: var(--karte); border-radius: 1.5rem; box-shadow: var(--schatten);
}
.sprachen a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.125rem; min-height: 2.75rem;
  text-decoration: none; color: var(--text-leise);
  padding-inline: 0.35rem; border-radius: 999px; font-weight: 600;
}
@media (min-width: 44rem) {
  .sprachen ul { border-radius: 999px; }
  .sprachen a { min-width: 2.75rem; }
}
.sprachen a:hover { color: var(--blau-tief); }
.sprachen a[aria-current="true"] { background: var(--blau-fest); color: #fff; }

/* ── Aufhänger ──────────────────────────────────────────────────────── */

.held { position: relative; padding-block: clamp(2rem, 6vw, 4.5rem); overflow: hidden; }
.held .huelle { position: relative; z-index: 1; }
.held h1 { font-size: clamp(2.15rem, 6vw, 3.6rem); font-weight: 800; margin: 0 0 0.5rem; }
.held .unterzeile {
  font-size: clamp(1.5rem, 4.2vw, 2.35rem);
  margin: 0 0 1.5rem;
}
.held p.text {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  max-width: 34rem; margin: 0 0 1.75rem; color: var(--text-leise);
}

/* Die schwebenden Kacheln aus den Store-Bildern. Reine Zierde, aria-hidden.
   ⚠ Sie liegen IN der Hülle, nicht daneben. Vorher waren sie am rechten
   Rand des Fensters verankert — bei 2000 px Fensterbreite endete die
   Textspalte bei 1560 px und die Kacheln klebten am Fensterrand, mit einem
   Loch dazwischen. Als zweite Spalte des Aufhänger-Rasters können sie nicht
   mehr weiter nach außen wandern als die Inhaltsspalte selbst. */

.streu { display: none; }

@media (min-width: 62rem) {
  /* Text links, Zierde rechts — wie in den Store-Bildern. Zwei Rasterfelder,
     nicht sechs: der Text steckt in .wort. ⚠ Das ist der Grund für den
     Wrapper — `grid-row: 1 / -1` bezieht sich auf das EXPLIZITE Raster, und
     ohne grid-template-rows spannt es nur eine Zeile. Die Zierdespalte war
     damit 132 px hoch statt 613, und die Kacheln lagen übereinander. */
  .held .huelle {
    display: grid;
    grid-template-columns: minmax(0, 38rem) 1fr;
    column-gap: 2.5rem;
    align-items: stretch;
  }

  .streu {
    display: block;
    position: relative;
    pointer-events: none;
  }
  /* Ein weicher Schein dahinter, wie der Grund der Store-Bilder. */
  .streu::before {
    content: "";
    position: absolute; inset: -12% -15%;
    background: radial-gradient(58% 52% at 50% 45%, rgb(47 124 246 / 0.10), transparent 70%);
  }
  .streu .kachel {
    position: absolute;
    width: 5rem; height: 5rem; font-size: 2.4rem;
    box-shadow: var(--schatten-hoch);
  }
  .streu .k1 { top: 8%;  left: 26%; rotate: 8deg; }
  .streu .k2 { top: 30%; left: 62%; rotate: -7deg; }
  .streu .k3 { top: 55%; left: 14%; rotate: 12deg; }
  .streu .k4 { top: 72%; left: 50%; rotate: -10deg; }
}

/* ── Knöpfe und Marken ──────────────────────────────────────────────── */

.knopf {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--blau-fest); color: #fff; text-decoration: none;
  font-weight: 700; padding: 0.9rem 1.6rem; border-radius: 999px;
  border: 1px solid transparent; box-shadow: var(--schatten);
}
.knopf:hover { background: var(--blau-fest-tief); color: #fff; }
.knopf.zweit {
  background: var(--karte); color: var(--blau-tief); border-color: var(--linie);
}
.knopf.zweit:hover { background: var(--blau-zart); color: var(--blau-tief); }

a.abzeichen { display: inline-block; text-decoration: none; }

/* Die grüne Hakenmarke der Store-Bilder. */
.marke-gruen {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--gruen); color: var(--gruen-schrift);
  font-weight: 700; font-size: 0.95rem;
  padding: 0.55rem 1.1rem 0.55rem 0.7rem; border-radius: 999px;
  box-shadow: var(--schatten);
  margin: 1.1rem 0 0;
}
.marke-gruen .haken {
  display: grid; place-items: center; flex: none;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: rgb(255 255 255 / 0.28); font-size: 0.8rem; font-weight: 800;
}
@media (prefers-color-scheme: dark) {
  .marke-gruen .haken { background: rgb(0 0 0 / 0.18); }
}

/* ── Ausstattungs-Chips (die Filterchips der App) ────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 999px; padding: 0.4rem 0.85rem;
  font-size: 0.92rem; font-weight: 600;
  box-shadow: 0 1px 2px rgb(13 18 32 / 0.04);
}
.chips .zeichen { font-size: 1.05rem; line-height: 1; }

/* ── Zahlenband ─────────────────────────────────────────────────────── */

.zahlen .huelle { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.zahlen ul {
  display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.zahlen li {
  background: var(--karte); border-radius: var(--radius);
  padding: 1.35rem 1.5rem; box-shadow: var(--schatten);
}
.zahlen b {
  display: block; font-size: clamp(1.9rem, 4.5vw, 2.5rem); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.05;
}
.zahlen li:nth-child(1) b { color: var(--blau-tief); }
.zahlen li:nth-child(2) b { color: var(--orange-tief); }
.zahlen li:nth-child(3) b { color: var(--gruen); }
.zahlen span { color: var(--text-leise); font-size: 0.95rem; }
.zahlen .stand {
  margin: 1rem 0 0; font-size: 0.85rem; color: var(--text-leise);
}

/* ── Abschnitte ─────────────────────────────────────────────────────── */

.abschnitte {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.abschnitt {
  background: var(--karte); border-radius: var(--radius);
  padding: 1.6rem 1.75rem 1.75rem; box-shadow: var(--schatten);
}
.abschnitt .kachel { margin-bottom: 1rem; }
.abschnitt h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 0.85rem; }
.abschnitt ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.55rem; }
.abschnitt li::marker { color: var(--blau); }
.abschnitt p { margin: 0; color: var(--text-leise); }

/* Die zwei Fließtext-Abschnitte laufen über die ganze Breite — dort liegt
   die Kachel neben dem Text, damit die Karte nicht leer wirkt. */
.abschnitt.breit { grid-column: 1 / -1; }
@media (min-width: 44rem) {
  .abschnitt.breit {
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 1.5rem; align-items: start;
  }
  .abschnitt.breit .kachel { margin: 0.2rem 0 0; grid-row: span 2; }
  .abschnitt.breit h2 { margin-bottom: 0.5rem; }
  .abschnitt.breit p { max-width: 52rem; }
}

/* ── Bildschirmfotos ────────────────────────────────────────────────── */

.bilder { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.bilder h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); font-weight: 800; margin: 0 0 1.25rem; }
.bilder ul {
  display: grid; gap: 1.5rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.bilder img { display: block; width: 100%; border-radius: 1.25rem; }

/* Im Hellen verschmelzen die Bilder mit der Seite — ihr eigener Grund ist
   derselbe (#e4edff). Deshalb kein Schatten und kein Rahmen. */
@media (prefers-color-scheme: dark) {
  /* Im Dunkeln wären es helle Rechtecke im Nichts. Eine ruhige Platte in
     der Bildfarbe fasst sie zusammen. */
  .bilder li {
    background: #e4edff;
    border-radius: 1.25rem;
    box-shadow: var(--schatten-hoch);
    overflow: hidden;
  }
}

/* ── Inhaltsseiten (Support, Rechtstexte) ───────────────────────────── */

.seite { padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 3.5rem); }
.seite h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); font-weight: 800; margin: 0 0 1.25rem; }

.inhalt {
  max-width: 48rem;
  background: var(--karte); border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 2.25rem); box-shadow: var(--schatten);
}
.inhalt > :first-child { margin-top: 0; }
.inhalt h2 { font-size: 1.25rem; font-weight: 800; margin: 2rem 0 0.6rem; }
.inhalt h3 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 0.4rem; }
.inhalt p, .inhalt ul, .inhalt ol { margin: 0 0 1rem; }
.inhalt ul, .inhalt ol { padding-left: 1.2rem; }
.inhalt li { margin-bottom: 0.4rem; }
.inhalt li::marker { color: var(--blau); }
.inhalt code {
  background: var(--blau-zart); border-radius: 0.35rem;
  padding: 0.05em 0.35em; font-size: 0.9em;
}
.inhalt blockquote {
  margin: 0 0 1.5rem; padding: 1rem 1.25rem;
  background: var(--warnung-grund); border-left: 4px solid var(--warnung);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
.inhalt blockquote p:last-child { margin-bottom: 0; }

.tabelle { overflow-x: auto; margin: 0 0 1.5rem; }
.inhalt table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.inhalt th, .inhalt td {
  text-align: left; vertical-align: top;
  padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--linie);
}
.inhalt thead th { background: var(--blau-zart); }

.merker {
  max-width: 48rem;
  margin: 0 0 1.25rem; padding: 0.85rem 1.1rem;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--karte); color: var(--text-leise); font-size: 0.95rem;
  box-shadow: var(--schatten);
}

.fragen { display: grid; gap: 0.65rem; margin: 1.25rem 0 0; }
.fragen details {
  background: var(--grund); border: 1px solid var(--linie);
  border-radius: var(--radius-klein); padding: 0.9rem 1.1rem;
}
.fragen summary {
  display: flex; align-items: center;
  min-height: 2.75rem;
  font-weight: 700; cursor: pointer;
}
.fragen details[open] summary { color: var(--blau-tief); }
.fragen details p { margin: 0.6rem 0 0; color: var(--text-leise); }

/* ── Geteilte Links und 404 ─────────────────────────────────────────── */

.mitte {
  min-height: 82vh; display: grid; place-items: center;
  padding: 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.mitte section {
  background: var(--karte); border-radius: 1.75rem;
  box-shadow: var(--schatten-hoch);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  max-width: 34rem; text-align: center;
}
.mitte .kachel { margin: 0 auto 1.25rem; width: 4rem; height: 4rem; font-size: 2rem; }
.mitte h1 { font-size: clamp(1.5rem, 4.5vw, 2.05rem); font-weight: 800; margin: 0 0 0.85rem; }
.mitte p { margin: 0 0 1.35rem; color: var(--text-leise); }
.mitte .leise { font-size: 0.92rem; }
.mitte .knopf { margin-block: 0.35rem; }

/* ── Fuß ────────────────────────────────────────────────────────────── */

.fuss { margin-top: 1rem; font-size: 0.95rem; }
.fuss .huelle { padding-block: 2rem calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
.fuss .spalten {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  padding-top: 1.75rem; border-top: 1px solid var(--linie);
}
.fuss h2 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-leise); margin: 0 0 0.6rem; font-weight: 700;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
/* Nur die Verweise in den Listen sind Bedienelemente und bekommen die
   44 pt. ⚠ Nicht die im Fließtext: WCAG 2.5.8 nimmt Ziele „in a sentence"
   ausdrücklich aus, und eine 44 px hohe Box mitten im Satz („ein Projekt
   von Codemile") zerreißt die Zeile. */
.fuss ul a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
}
.fuss a { color: var(--text); text-decoration: none; }
.fuss a:hover { color: var(--blau-tief); text-decoration: underline; }
.fuss .quellen {
  margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--linie);
  color: var(--text-leise); font-size: 0.85rem;
}
.fuss .quellen p { margin: 0 0 0.35rem; max-width: 46rem; }
.fuss .quellen p:last-child { margin-bottom: 0; }

/* ── Offene Stellen im Entwurfsbau ──────────────────────────────────── */

/* In der Auslieferung kommt <mark> nicht vor — Seiten mit offenen Klammern
   werden dort nicht erzeugt. */
.inhalt mark {
  background: var(--warnung-grund); color: var(--warnung);
  border: 1px dashed var(--warnung); border-radius: 0.3rem;
  padding: 0.05em 0.3em; font-weight: 600;
}

/* ── Bewegung nur, wenn erwünscht ───────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .knopf, .chips li, .abschnitt { transition: transform 0.15s ease, background 0.15s ease; }
  .knopf:hover { transform: translateY(-1px); }
}

/* Das amtliche App-Store-Abzeichen ist schwarze Grafik mit weißer Schrift.
   Auf dem dunklen Grund liest sich die Schrift weiterhin, nur die Kante des
   Abzeichens verschwindet — dafür genügt ein feiner Ring. Keine Änderung an
   der Grafik selbst; kommt die weiße Fassung von Apple dazu, kann das hier
   weg (AUFGABEN-YANNICK.md §4). */
@media (prefers-color-scheme: dark) {
  a.abzeichen {
    display: inline-block; line-height: 0;
    border-radius: 0.6rem;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.28);
  }
}

/* ════════════════════════════════════════════════════════════════════
   Neues Aussehen — seit dem 18.09.2026 dasselbe wie die Web-App
   (src/app/app.css; Yannick: „Rechtstexte und Über die App im neuen
   Aussehen"). Farben, Kopf, Fuß und die Karten der Rechtstexte. Was oben
   steht, bleibt für die Bausteine von „Über die App" und Support; hier wird
   nur überschrieben.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --grund: #F2F2F7; --grund-tief: #E9E9EF; --karte: #FFFFFF; --linie: rgba(60,60,67,.12);
  --blau: #4088FF; --blau-fest: #2F6FD8; --blau-fest-tief: #2459B3; --blau-tief: #2F6FD8; --blau-zart: rgba(64,136,255,.12);
  --text: #1C1C1E; --text-leise: #5C5C61;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --breite: 1240px;
  --radius: 22px; --radius-klein: 14px;
  --schatten: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -8px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #000000; --grund-tief: #0A0A0C; --karte: #1C1C1E; --linie: rgba(255,255,255,.14);
    --blau: #4088FF; --blau-fest: #4088FF; --blau-fest-tief: #2F6FD8; --blau-tief: #7FB0FF; --blau-zart: rgba(64,136,255,.22);
    --text: #F2F2F7; --text-leise: #9E9EA3;
  }
}
body { font-size: 17px; line-height: 1.5; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; }
.luecke { flex: 1; }

/* ── Kopf wie in der Web-App ── */
.kopf {
  position: sticky; top: 0; z-index: 30; padding: env(safe-area-inset-top, 0px) 0 0;
  background: rgba(242,242,247,.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie);
}
@media (prefers-color-scheme: dark) { .kopf { background: rgba(0,0,0,.8); } }
.kopf .huelle { display: flex; align-items: center; gap: 8px clamp(8px, 2vw, 20px); padding-block: 6px; flex-wrap: nowrap; }
.kopf .marke { font-size: 17px; font-weight: 650; letter-spacing: 0; gap: 10px; min-height: 44px; }
.kopf .marke img { width: 30px; height: 30px; border-radius: 8px; box-shadow: none; }
.kopf .reiter { display: flex; gap: 4px; margin: 0; }
.kopf .reiter a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  color: var(--text); font-size: 15px; font-weight: 520; text-decoration: none; white-space: nowrap;
}
.kopf .reiter a:hover { background: rgba(60,60,67,.08); }
.kopf .knopf.klein { min-height: 40px; padding: 8px 18px; font-size: 15px; border-radius: 999px; }
.kopf .menue { display: none; }
@media (max-width: 640px) {
  .kopf .reiter, .kopf .app-laden { display: none; }
  .kopf .menue { display: block; }
  .kopf .menue summary {
    list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  }
  .kopf .menue summary::-webkit-details-marker { display: none; }
  .kopf .menue summary span, .kopf .menue summary span::before, .kopf .menue summary span::after {
    display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--text); position: relative; transition: transform .2s, background .2s;
  }
  .kopf .menue summary span::before, .kopf .menue summary span::after { content: ""; position: absolute; left: 0; }
  .kopf .menue summary span::before { top: -6px; }
  .kopf .menue summary span::after { top: 6px; }
  .kopf .menue[open] summary span { background: transparent; }
  .kopf .menue[open] summary span::before { transform: translateY(6px) rotate(45deg); }
  .kopf .menue[open] summary span::after { transform: translateY(-6px) rotate(-45deg); }
  .kopf .menue nav {
    position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column;
    padding: 6px max(1.25rem, env(safe-area-inset-right, 0px)) 12px max(1.25rem, env(safe-area-inset-left, 0px));
    background: var(--grund); border-bottom: 1px solid var(--linie);
  }
  .kopf .menue nav a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px; color: var(--text); font-size: 17px; font-weight: 520; text-decoration: none; }
  .kopf .menue nav a[aria-current="page"] { background: var(--blau-zart); color: var(--blau-tief); }
}
@media (max-width: 340px) { .kopf .marke { font-size: 0; gap: 0; } }

/* ── Fuß wie in der Web-App ── */
.fuss { margin-top: 48px; font-size: 14px; color: var(--text-leise); }
.fuss .huelle { border-top: 1px solid var(--linie); padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); }
.fuss .spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; margin-bottom: 24px; }
.fuss h2 { font-size: 14px; font-weight: 650; color: var(--text); margin: 0 0 6px; letter-spacing: 0; }
.fuss p { margin: 0; line-height: 1.55; max-width: 32ch; }
.fuss .fuss-marke { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; color: var(--text); margin-bottom: 10px; }
.fuss .fuss-marke img { border-radius: 8px; }
.fuss ul a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--blau-tief); }
.fuss .quellen { border: 0; padding: 0; margin: 0; }
.fuss .unten { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 18px; border-top: 1px solid var(--linie); }

/* ── Rechtstexte: je Abschnitt eine Karte (Entwurf der Web-App) ── */
.rechtstext { max-width: 860px; }
.rechtstext h1 { font-size: clamp(28px, 5vw, 38px); margin: 28px 0 18px; }
/* Die alte `.inhalt` war selbst die weiße Karte — hier trägt sie nur noch die
   Karten; sonst lägen weiße Karten unsichtbar auf Weiß. */
.rechtstext .inhalt { display: flex; flex-direction: column; gap: 14px; max-width: none; background: none; box-shadow: none; padding: 0; border-radius: 0; }
.rechtstext .inhalt h2 { margin-top: 0; }
.text-karte { background: var(--karte); border-radius: var(--radius); padding: 20px clamp(16px, 3.5vw, 24px); }
.text-karte > :first-child { margin-top: 0; }
.text-karte > :last-child { margin-bottom: 0; }
.text-karte h2 { font-size: 19px; font-weight: 650; margin: 0 0 10px; }
.text-karte h3 { font-size: 17px; font-weight: 650; margin: 18px 0 6px; }
.text-karte p, .text-karte li { font-size: 16px; line-height: 1.55; }
.text-karte table { font-size: 15px; }
/* Reste des alten Fußes: die Liste als Raster und Großbuchstaben-Überschriften. */
.fuss .sprachen ul { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.fuss h2, .fuss .quellen h2 { text-transform: none; letter-spacing: 0; font-size: 14px; }
.fuss .quellen p { max-width: 32ch; }
.fuss .sprachen { gap: 10px; }

/* ── „Über die App" im Aufbau des Entwurfs ── */
.ueber { max-width: 860px; }
.ueber-kopf { display: flex; align-items: center; gap: 16px; margin: 28px 0 18px; }
.ueber-kopf img { width: 72px; height: 72px; border-radius: 17px; box-shadow: var(--schatten); flex: none; }
.ueber-kopf h1 { margin: 0 0 4px; font-size: clamp(28px, 5vw, 38px); }
.ueber-kopf p { margin: 0; color: var(--text-leise); font-size: 16px; }
.ueber .inhalt { display: flex; flex-direction: column; gap: 14px; max-width: none; background: none; box-shadow: none; padding: 0; border-radius: 0; }
.ueber .inhalt h2 { margin-top: 0; }
.ueber .lead { font-size: 17px; }
.ueber .text-karte.tint { background: var(--blau-zart); }
.ueber .zwei-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.ueber .bestand ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ueber .bestand li { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.ueber .bestand li::marker { content: none; }
.ueber .bestand b { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.ueber .bestand span { color: var(--text-leise); font-size: 15px; }
.ueber .stand { margin: 10px 0 0; color: var(--text-leise); font-size: 13px; }
.ueber .abzeichen img { height: 48px; width: auto; }