/* Wer hat's gesagt? – Gestaltung (Palette siehe :root).
   Schriften: Archivo und IBM Plex Mono, sobald selbst gehostet (static/fonts);
   bis dahin Systemschriften. Keine Einbindung von Google-Servern (DSGVO). */

:root {
  /* Palette: Pflaume #741164, Koralle #E16241, Grün #48EB33, Blau #3488D5,
     Erdbraun #362B21, Rosé #B17777. Für Text werden dunklere Stufen verwendet,
     damit der Kontrast mindestens 4,5:1 erreicht. */
  --grund: #F7F3EF;
  --karte: #FFFFFF;
  --linie: #E6DDD5;
  --linie-leise: #EFE8E2;
  --rand: #B17777;
  --text: #362B21;
  --leise: #5E5047;
  --leiser: #5E5047;
  --akzent: #741164;
  --akzent-dunkel: #5A0D4E;
  --akzent-grund: #F6E8F3;
  --koralle: #E16241;
  --gruen: #48EB33;
  --blau: #3488D5;
  --rose: #B17777;
  --richtig-text: #1F7A12;
  --falsch-text: #A63E1F;
  --falsch-grund: #FCEAE4;
  --hinweis-grund: #F8EDED;
  --hinweis-linie: #E2C6C6;
  --hinweis-text: #6E3F3F;
  --online-grund: #E6F8E3;
  --online-text: #1F7A12;
  --vorb-grund: #FFF1CC;
  --vorb-text: #6B4E00;
  --geplant-grund: #EFE8E2;
  --trusted-grund: #E7F0FA;
  --info-text: #1F64A6;
  /* Skala von linksextrem (−10) bis rechtsextrem (+10) */
  --skala-1: #0E4F5C;
  --skala-2: #2B8794;
  --skala-3: #9CCAD0;
  --skala-4: #D5D8D2;
  --skala-5: #EDBB91;
  --skala-6: #C9672A;
  --skala-7: #7A3510;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --breite: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--sans); line-height: 1.4; }
a { color: var(--text); }
a:hover { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rahmen { max-width: var(--breite); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.mono { font-family: var(--mono); }
.zahl { font-variant-numeric: tabular-nums; }

/* Kopf */
.kopf { background: var(--karte); border-bottom: 1px solid var(--linie); }
.kopf .rahmen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 12px; padding-bottom: 12px; }
.marke { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.marke-name { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.marke-zeile { display: block; font-family: var(--mono); font-size: 12px; color: var(--leiser); letter-spacing: 0.04em; }
.hauptnavigation { display: flex; flex-wrap: wrap; gap: 4px; }
.hauptnavigation a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 8px; text-decoration: none; font-size: 15px; font-weight: 600; }
.hauptnavigation a[aria-current="page"] { background: var(--akzent); color: #FFFFFF; }
.hauptnavigation a.umrandet { border: 1px solid var(--rand); }
.ton-schalter { min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; font-size: 20px; cursor: pointer; }
.ton-schalter:hover { background: var(--akzent-grund); }
.bonus-uhr { height: 4px; border-radius: 2px; background: var(--linie); overflow: hidden; }
.bonus-uhr span { display: block; width: 100%; height: 100%; background: var(--koralle); transition: width .1s linear; }
.kaestchen.erscheint { animation: feld-auf .35s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes feld-auf { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.antwort.gewaehlt { background: var(--akzent); border-color: var(--akzent); color: #FFFFFF; }

.hinweis { background: var(--hinweis-grund); border-bottom: 1px solid var(--hinweis-linie); color: var(--hinweis-text); font-size: 14px; }
.hinweis .rahmen { padding-top: 10px; padding-bottom: 10px; display: flex; gap: 10px; align-items: center; }
.entwurf { background: var(--falsch-grund); border-bottom-color: #F0C2B4; color: var(--falsch-text); }

/* Inhalt */
.inhalt { padding-top: 40px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 40px; }
.oberzeile { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--leiser); text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(32px, 5vw, 48px); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; }
h2 { margin: 0; font-size: 22px; font-weight: 700; }
h3 { margin: 0; font-size: 17px; font-weight: 700; }
.einleitung { margin: 0; font-size: 18px; line-height: 1.5; color: var(--leise); max-width: 860px; }
.text-leise { color: var(--leise); }
.klein { font-size: 13px; }
.abschnitt { display: flex; flex-direction: column; gap: 16px; }
.kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 22px; }
.karte-gross { padding: 28px; }
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kachel { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--linie); background: var(--karte); text-decoration: none; height: 100%; }
a.kachel { border: 2px solid var(--akzent); }
.kachel-titel { font-size: 18px; font-weight: 700; line-height: 1.25; }
.reihe { display: flex; flex-wrap: wrap; gap: 16px; }
.reihe > * { flex: 1 1 280px; }

.pille { align-self: flex-start; display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--geplant-grund); color: var(--leise); }
.pille.online { background: var(--online-grund); color: var(--online-text); }
.pille.vorbereitung { background: var(--vorb-grund); color: var(--vorb-text); }
.pille.trusted { background: var(--trusted-grund); color: var(--info-text); }

.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 10px; border: 0; background: var(--akzent); color: #FFFFFF; text-decoration: none; font: 700 16px var(--sans); cursor: pointer; }
.knopf:hover { color: #FFFFFF; background: var(--akzent-dunkel); }
.knopf.hell { background: var(--karte); color: var(--akzent); border: 1px solid var(--rand); font-weight: 600; }
.knopf.hell:hover { background: var(--akzent-grund); color: var(--akzent); }

.suche { display: flex; flex-wrap: wrap; gap: 8px; }
.suche input { flex: 1 1 320px; min-height: 52px; padding: 0 16px; border: 1px solid var(--rand); border-radius: 10px; background: var(--karte); font: 17px var(--sans); color: var(--text); }

/* Brotkrumen */
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--leise); }
.brotkrumen li + li::before { content: "›"; margin-right: 6px; color: var(--rand); }

/* Tabellen */
.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linie-leise); vertical-align: top; }
th { font-size: 13px; color: var(--leise); font-weight: 600; background: var(--grund); }
tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; }

/* Skala */
.skala { position: relative; height: 30px; }
.skala-band { position: absolute; left: 0; right: 0; top: 13px; height: 4px; display: flex; border-radius: 2px; overflow: hidden; opacity: 0.55; }
.skala-band span:nth-child(1) { width: 10%; background: var(--skala-1); }
.skala-band span:nth-child(2) { width: 10%; background: var(--skala-2); }
.skala-band span:nth-child(3) { width: 20%; background: var(--skala-3); }
.skala-band span:nth-child(4) { width: 20%; background: var(--skala-4); }
.skala-band span:nth-child(5) { width: 20%; background: var(--skala-5); }
.skala-band span:nth-child(6) { width: 10%; background: var(--skala-6); }
.skala-band span:nth-child(7) { width: 10%; background: var(--skala-7); }
.skala-punkt { position: absolute; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--text); border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px var(--text); }
.skala-achse { position: relative; height: 16px; font-family: var(--mono); font-size: 12px; color: var(--leiser); }
.skala-achse span { position: absolute; transform: translateX(-50%); }
.skala-zeile { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 64px; gap: 16px; align-items: center; min-height: 40px; }

.gesperrt { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px dashed var(--rand); border-radius: 12px; background: var(--grund); color: var(--leise); }

/* Liste von Aussagen */
.aussagen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.aussage { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.aussage blockquote { margin: 0; font-size: 15px; line-height: 1.55; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--leise); }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; }
.kennzahlen div { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; }
.kennzahlen dt { font-size: 13px; color: var(--leise); }
.kennzahlen dd { margin: 4px 0 0; font-family: var(--mono); font-size: 22px; font-weight: 600; }

/* Freigaben */
.pille.extrem { background: var(--falsch-grund); color: var(--falsch-text); }
.kontext { margin: 0; font-size: 14px; line-height: 1.5; color: var(--leiser); }
.aussage blockquote { border-left: 3px solid var(--akzent); padding-left: 12px; }
.belege, .laeufe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; }
.belege li { background: var(--vorb-grund); color: var(--vorb-text); border-radius: 8px; padding: 8px 12px; }
.laeufe li { border-top: 1px solid var(--linie-leise); padding-top: 8px; }
details summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.entscheidung { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--linie-leise); }
.entscheidung label { font-size: 14px; font-weight: 600; }
.entscheidung textarea { font: 15px var(--sans); padding: 10px 12px; border: 1px solid var(--rand); border-radius: 8px; resize: vertical; }
.reihe-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.meldungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.meldung { padding: 12px 16px; border-radius: 10px; background: var(--online-grund); color: var(--online-text); font-weight: 600; }
.meldung.error { background: var(--falsch-grund); color: var(--falsch-text); }

/* Quiz */
.knopf.gross { min-height: 56px; padding: 0 28px; font-size: 18px; align-self: flex-start; }
.quiz-held h1 { font-size: clamp(40px, 7vw, 64px); }
.quiz-frage { max-width: 860px; }
.fortschritt { height: 6px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.fortschritt span { display: block; height: 100%; background: var(--akzent); }
.zitat { margin: 0; padding: 28px 28px 28px 32px; background: var(--karte); border: 1px solid var(--linie); border-left: 5px solid var(--akzent); border-radius: 12px; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.5; font-weight: 500; hyphens: auto; overflow-wrap: break-word; }
.antworten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.antwort { min-height: 60px; padding: 0 16px; border: 2px solid var(--text); border-radius: 12px; background: var(--karte); color: var(--text); font: 700 17px var(--sans); cursor: pointer; transition: background .12s, color .12s, transform .08s; }
.antwort:hover, .antwort:focus-visible { background: var(--akzent); border-color: var(--akzent); color: #FFFFFF; }
.antwort:active { transform: scale(0.98); }
.ergebnis-titel { font-size: clamp(28px, 4vw, 40px); }
.ergebnis-titel.richtig { color: var(--richtig-text); }
.ergebnis-titel.falsch { color: var(--falsch-text); }
.quelle { margin: 0; font-size: 16px; line-height: 1.5; }
.balken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.balken li { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 56px; gap: 12px; align-items: center; }
.balken-spur { height: 14px; border-radius: 7px; background: var(--grund); overflow: hidden; }
.balken-spur span { display: block; height: 100%; background: var(--rose); border-radius: 7px; }
.balken li.ist-richtig .balken-spur span { background: var(--gruen); }
.balken li.ist-richtig .balken-name { font-weight: 700; }
.balken .mono { text-align: right; }
.rangliste, .liste-schlicht, .antwortliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rangliste li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie-leise); }
.rangliste li:first-child { border-top: 0; }
.liste-schlicht { gap: 8px; }
.antwortliste li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--linie-leise); font-size: 15px; line-height: 1.4; }
.antwortliste li.richtig > span:first-child { color: var(--richtig-text); font-weight: 800; }
.antwortliste li.falsch > span:first-child { color: var(--falsch-text); font-weight: 800; }
.antwortliste li.leer { display: block; color: var(--leise); }
.fehlertext { margin: 0; color: var(--falsch-text); font-weight: 600; }

/* Verwechslungen: Stapelbalken je Fraktion */
.legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.legende li { display: flex; align-items: center; gap: 6px; }
.legende i { width: 12px; height: 12px; }
.stapel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.stapel li { display: flex; flex-direction: column; gap: 6px; }
.stapel-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
.stapel-balken { display: flex; height: 30px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--grund); }
.stapel-balken span { display: flex; align-items: center; justify-content: center; min-width: 0; font: 700 12px var(--mono); }
.stapel-balken span.richtig { box-shadow: inset 0 -4px 0 rgba(255, 255, 255, .55); }

/* Konto */
.konto-schmal { max-width: 560px; }
.knopf.breit { width: 100%; gap: 10px; }
.feld { min-height: 48px; padding: 0 14px; border: 1px solid var(--rand); border-radius: 10px; background: var(--karte); font: 17px var(--sans); color: var(--text); }
.haken { display: flex; gap: 10px; align-items: center; font-size: 15px; min-height: 44px; }
.haken input { width: 20px; height: 20px; }
.trenner { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--leise); font-size: 14px; }
.trenner::before, .trenner::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }

.allauth h1 { font-size: clamp(28px, 4vw, 40px); }
.allauth form { display: flex; flex-direction: column; gap: 10px; }
.allauth button, .allauth input[type="submit"] { min-height: 48px; padding: 0 22px; border-radius: 10px; border: 0; background: var(--akzent); color: #FFFFFF; font: 700 16px var(--sans); cursor: pointer; align-self: flex-start; }

.stufe { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--trusted-grund); color: var(--info-text); font-size: 12px; font-weight: 600; vertical-align: middle; }
.rangliste li.eigen { background: var(--hinweis-grund); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.rangliste li.luecke { justify-content: center; color: var(--leise); border-top: 0; padding: 0; }
.rang-platz { color: var(--leise); margin-right: 4px; }
.fortschritt-stufe { height: 10px; border-radius: 5px; background: var(--grund); overflow: hidden; }
.fortschritt-stufe span { display: block; height: 100%; background: var(--blau); border-radius: 5px; }
.karte.aufstieg { border: 2px solid var(--blau); background: var(--trusted-grund); }

.teilen-text { margin: 0; padding: 14px 16px; background: var(--grund); border-radius: 10px; font: 15px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; }
.teilen-kanaele { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.teilen-kanaele a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--rand); border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 600; }
.ergebnis-reihe, .duell-reihe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ergebnis-reihe .kaestchen { width: 40px; height: 40px; }
.kaestchen { display: block; width: 28px; height: 28px; border-radius: 8px; }
.kaestchen.gut { background: var(--gruen); }
.kaestchen.schlecht { background: var(--koralle); }
.duell-reihe li { display: flex; flex-direction: column; gap: 4px; }
.duell-stand { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duell-stand div { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 10px; background: var(--grund); }
.duell-stand strong { font-size: 28px; }

/* Ladebild beim Start */
.startbild { display: none; }
.mit-start .startbild { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--grund); transition: opacity .35s ease; }
.start-fertig .startbild { opacity: 0; pointer-events: none; }
.startbild-logo { overflow: visible; }
.sb-blase { transform-box: fill-box; transform-origin: 20% 100%; animation: sb-plopp .55s cubic-bezier(.34, 1.7, .5, 1) both; }
.sb-frage { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sb-zeichnen .5s .4s ease-out forwards; }
.sb-punkt { transform-box: fill-box; transform-origin: center; animation: sb-plopp .3s .85s cubic-bezier(.34, 1.7, .5, 1) both; }
.sb-akzent { transform-box: fill-box; transform-origin: center; animation: sb-huepfen .6s 1s cubic-bezier(.34, 1.7, .5, 1) both; }
.startbild-name { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; animation: sb-auftauchen .5s .55s ease-out both; }
.startbild-reihe { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.startbild-reihe li { width: 18px; height: 18px; border-radius: 5px; background: var(--linie); animation: sb-fuellen .3s ease-out both; }
.startbild-reihe li:nth-child(1) { animation-delay: .9s; --farbe: var(--gruen); }
.startbild-reihe li:nth-child(2) { animation-delay: 1.05s; --farbe: var(--gruen); }
.startbild-reihe li:nth-child(3) { animation-delay: 1.2s; --farbe: var(--koralle); }
.startbild-reihe li:nth-child(4) { animation-delay: 1.35s; --farbe: var(--gruen); }
.startbild-reihe li:nth-child(5) { animation-delay: 1.5s; --farbe: var(--akzent); }
@keyframes sb-plopp { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sb-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes sb-huepfen { 0% { transform: translateY(-14px) scale(0); } 60% { transform: translateY(2px) scale(1.25); } 100% { transform: none; } }
@keyframes sb-auftauchen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sb-fuellen { from { transform: scale(.4); background: var(--linie); } 60% { transform: scale(1.2); } to { transform: scale(1); background: var(--farbe); } }
@media (prefers-reduced-motion: reduce) {
  .mit-start .startbild * { animation: none !important; stroke-dashoffset: 0; }
  .startbild-reihe li { background: var(--farbe); }
}

/* Installieren */
.installieren[hidden] { display: none; }

/* Fuß */
.fuss { background: var(--karte); border-top: 1px solid var(--linie); font-size: 14px; color: var(--leise); }
.fuss .rahmen { padding-top: 24px; padding-bottom: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 16px; }
.fuss-marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; color: var(--text); }
.nur-schmal { display: none; }
.konto-link { gap: 6px; }
.cta-leiste { display: flex; }

@media (max-width: 600px) {
  .rahmen { padding-left: 16px; padding-right: 16px; }
  .inhalt { padding-top: 16px; gap: 20px; }
  /* Kopf: eine Zeile, nur Navigation (Marke steht im Ladebild und im Fuß) */
  .kopf .marke { display: none; }
  .kopf .rahmen { padding-top: 6px; padding-bottom: 6px; justify-content: center; }
  .hauptnavigation { flex-wrap: nowrap; gap: 2px; width: 100%; justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
  .hauptnavigation::-webkit-scrollbar { display: none; }
  .hauptnavigation > * { flex-shrink: 0; }
  .hauptnavigation a { padding: 0 10px; font-size: 14px; }
  .nur-schmal { display: inline; }
  .nur-breit, .hauptnavigation a.nur-breit { display: none; }
  .konto-link { padding: 0 10px; }
  /* Quiz: Zitat kompakter, Antworten in drei Spalten */
  .abschnitt { gap: 12px; }
  .quiz-held h1 { font-size: 40px; }
  .einleitung { font-size: 16px; }
  .zitat { padding: 16px 16px 16px 18px; border-left-width: 4px; font-size: 17px; line-height: 1.45; }
  .antworten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .antwort { min-height: 52px; padding: 0 6px; font-size: 15px; }
  .ergebnis-titel { font-size: 26px; }
  .quelle { font-size: 15px; }
  /* Wichtigste Aktion bleibt am unteren Rand sichtbar */
  .cta-leiste { position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--grund); border-top: 1px solid var(--linie); }
  .cta-leiste .knopf { width: 100%; align-self: stretch; }
  .karte-gross { padding: 20px; }
  .skala-zeile { grid-template-columns: 1fr 56px; }
  .skala-zeile .skala { grid-column: 1 / -1; grid-row: 2; }
}
/* Sehr schmale Handys: Kopf passt in eine Zeile (nach den 600-px-Regeln, damit sie gewinnen) */
@media (max-width: 380px) {
  .hauptnavigation a { padding: 0 7px; font-size: 13px; }
  .konto-link, .ton-schalter { min-width: 40px; padding: 0 8px; }
}