/* Einbürgerung Schweiz · Gestaltung
   ------------------------------------------------------------------
   Diese App sieht bewusst anders aus als die übrigen withira-Apps:
   heller Grund statt Dunkelheit, Quantico statt Systemschrift,
   abgeschrägte Ecken statt runder, Grossbuchstaben mit engem
   Zeilenabstand. Die Vorlage dafür ist Maksyms Targo-Beispiel.

   Die Schrift liegt lokal im Ordner schrift/ (SIL Open Font License,
   siehe schrift/OFL.txt) — die App läuft offline, also darf sie nicht
   von Google Fonts abhängen.
   ------------------------------------------------------------------ */

@font-face{
  font-family:"Quantico";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("schrift/quantico-400.woff2") format("woff2");
}
@font-face{
  font-family:"Quantico";
  font-style:normal; font-weight:700; font-display:swap;
  src:url("schrift/quantico-700.woff2") format("woff2");
}

:root{
  /* Umgestellt am 27.08.2026 auf eine dunkle, geschichtete Oberfläche.
     Die Variablennamen sind absichtlich geblieben — nur ihre Bedeutung hat
     sich gedreht: --weiss ist jetzt die durchscheinende Glasfläche, --linie
     ihre Kante aus Licht statt aus Grau. So bleibt der Rest der Datei gültig. */
  --akzent:#38cff2;
  --akzent-hell:#7fe4ff;
  --akzent-kante:rgba(56,207,242,.55);
  --grund:#080b14;          /* Tiefster Grund, hinter allem */
  --grund-2:#0c1020;        /* Zweite Ebene, kaum unterscheidbar — nur Tiefe */
  --tinte:#eef2f8;          /* Fliesstext auf dunklem Grund */
  --tinte-2:#c9d2e0;
  --grau:rgba(238,242,248,.58);
  --linie:rgba(255,255,255,.14);   /* Glaskante */
  --weiss:rgba(255,255,255,.055);  /* Glasfläche — wird mit Blur hinterlegt */
  --glas-hoch:rgba(255,255,255,.085);
  --rot:#d8232a;            /* Schweizer Rot, nur für das Kreuz */
  --schnitt:12px;           /* Grösse der abgeschrägten Ecke */
  --blur:18px;              /* Milchglas-Stärke, aus der Referenz übernommen */
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;min-height:100%;}
[hidden]{display:none !important;}

body{
  background:var(--grund);
  color:var(--tinte);
  font-family:"Quantico","Arial Narrow",Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}

/* Alles Inhaltliche liegt über dem 3D-Raum. */
.deck{position:relative;z-index:1;}

h1,h2,h3,.gross{
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.98;
  font-weight:700;
  margin:0;
}

a{color:var(--tinte-2);text-decoration:none;}
a:hover{color:#000;}

/* ---------- Schrägschnitt-Ecken (die Signatur dieses Designs) ---------- */
.kante{
  clip-path:polygon(0 0, calc(100% - var(--schnitt)) 0, 100% var(--schnitt),
                    100% 100%, var(--schnitt) 100%, 0 calc(100% - var(--schnitt)));
}
.kante-gross{--schnitt:16px;}

/* ---------- Kopf ---------- */
.kopf{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:clamp(14px,4vw,40px);flex-wrap:wrap;
  padding:clamp(16px,3vw,30px) clamp(16px,4vw,44px) 0;
}
.marke{display:flex;align-items:center;gap:10px;font-weight:700;font-size:clamp(19px,4.4vw,26px);
  color:#111;letter-spacing:-.5px;text-transform:none;}
.marke__zeichen{width:34px;height:34px;border-radius:50%;background:#111;display:grid;place-items:center;flex:none;}
.marke__kreuz{width:16px;height:16px;position:relative;display:block;}
.marke__kreuz::before,.marke__kreuz::after{content:"";position:absolute;background:#fff;border-radius:1px;}
.marke__kreuz::before{left:6px;top:1px;width:4px;height:14px;}
.marke__kreuz::after{left:1px;top:6px;width:14px;height:4px;}

.nav{display:flex;gap:clamp(14px,3vw,30px);margin-left:auto;flex-wrap:wrap;}
.nav a{font-weight:700;font-size:clamp(11px,2.2vw,14px);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}

/* Sprachwahl — fünf Sprachen, immer sichtbar */
.sprachen{display:flex;gap:4px;background:var(--weiss);border:1px solid var(--linie);padding:4px;}
.sprachen button{
  appearance:none;border:none;cursor:pointer;font:inherit;font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;background:transparent;color:var(--grau);
}
.sprachen button.an{background:var(--akzent);color:#0d2126;}
.sprachen button:hover{color:#000;}

/* ---------- Knopf ---------- */
.knopf{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  appearance:none;font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(12px,2.2vw,15px);padding:16px 30px;
  background:var(--akzent);border:1px solid var(--akzent-kante);color:#1a1c1e;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow:0 0 0 1px rgba(21,188,223,.35), 0 10px 30px -12px rgba(15,163,194,.6);
  transition:background .15s ease, box-shadow .15s ease;
}
.knopf:hover{background:var(--akzent-hell);box-shadow:0 0 0 1px rgba(21,188,223,.5), 0 14px 34px -12px rgba(15,163,194,.75);}
.knopf__strich{width:22px;height:1px;background:#1a1c1e;display:block;}
.knopf--leer{background:transparent;border:1px solid var(--linie);color:var(--tinte-2);box-shadow:none;}
.knopf--leer:hover{background:var(--glas-hoch);color:var(--akzent-hell);}
.knopf--klein{padding:11px 18px;font-size:12px;letter-spacing:.1em;}

/* ---------- Aufhänger ---------- */
.hero{position:relative;min-height:86svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(30px,7vw,90px) clamp(16px,4vw,44px) clamp(24px,5vw,60px);}
/* Der 3D-Raum liegt hinter dem Text. Damit die Treppen-Überschrift auf
   jedem Untergrund lesbar bleibt, liegt ein heller Schleier dazwischen —
   links dicht, nach rechts auslaufend, wie im Vorbild. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--grund) 0%,rgba(8,11,20,.92) 46%,rgba(8,11,20,.55) 72%,rgba(8,11,20,0) 100%);}
.hero>*{position:relative;}
@media (max-width:700px){
  .hero::before{background:linear-gradient(180deg,rgba(8,11,20,.72) 0%,rgba(8,11,20,.86) 70%,rgba(8,11,20,.97) 100%);}
}
.hero__augen{font-size:clamp(11px,2.2vw,13px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--akzent-kante);margin:0 0 clamp(14px,3vw,26px);}
.treppe{font-size:clamp(30px,7.4vw,78px);}
.treppe span{display:block;}
.treppe .ein{padding-left:min(238px,28vw);}
.treppe .akz{color:var(--akzent);}
.hero__satz{max-width:540px;margin:clamp(18px,4vw,34px) 0 0 min(238px,28vw);
  font-size:clamp(14px,1.7vw,17px);line-height:1.7;color:var(--grau);text-transform:none;}
.hero__tat{margin:clamp(22px,4vw,40px) 0 0 min(238px,28vw);display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- Abschnitte ---------- */
.teil{padding:clamp(48px,9vw,120px) clamp(16px,4vw,44px);position:relative;}
.teil--hell{background:linear-gradient(180deg,rgba(12,16,32,0) 0%,var(--grund-2) 14%,var(--grund-2) 100%);}
/* Auch die Abschnitts-Überschriften stehen über dem 3D-Raum. Ein weicher,
   nach rechts auslaufender Grund hält sie auf jedem Untergrund lesbar. */
.teil::before{content:"";position:absolute;left:0;right:0;top:0;height:min(420px,58%);pointer-events:none;
  background:linear-gradient(90deg,var(--grund) 0%,rgba(8,11,20,.92) 52%,rgba(8,11,20,0) 100%);}
.teil--hell::before{background:linear-gradient(90deg,var(--grund-2) 0%,rgba(12,16,32,.92) 52%,rgba(12,16,32,0) 100%);}
.teil>*{position:relative;}

.teil__augen{font-size:clamp(11px,2.2vw,13px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--akzent-kante);margin:0 0 14px;}
.teil__titel{font-size:clamp(26px,5.4vw,58px);}
.teil__titel .ein{display:block;padding-left:min(160px,18vw);color:var(--akzent);}
.teil__satz{max-width:620px;margin:22px 0 0;color:var(--grau);font-size:clamp(14px,1.6vw,17px);
  line-height:1.7;text-transform:none;}

/* ---------- Karten ---------- */
.gitter{display:grid;gap:clamp(12px,2vw,20px);margin-top:clamp(26px,5vw,46px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));}
.karte{background:var(--weiss);border:1px solid var(--linie);padding:22px 22px 24px;position:relative;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition:transform .18s ease, border-color .18s ease;}
.karte:hover{transform:translateY(-3px);border-color:var(--akzent);}
.karte__num{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--akzent-kante);}
.karte__t{font-size:clamp(16px,2.4vw,20px);margin:10px 0 10px;}
.karte__p{margin:0;color:var(--grau);font-size:14.5px;line-height:1.65;text-transform:none;}
.karte__fund{margin:14px 0 0;font-size:12px;color:var(--akzent-kante);font-weight:700;letter-spacing:.04em;}

/* ---------- Kantons-Raster ---------- */
.kantone{display:grid;gap:8px;margin-top:clamp(24px,4vw,40px);
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr));}
.kanton{appearance:none;cursor:pointer;font:inherit;font-weight:700;text-transform:uppercase;
  background:var(--weiss);border:1px solid var(--linie);color:var(--tinte);padding:14px 6px;
  display:flex;flex-direction:column;align-items:center;gap:5px;letter-spacing:.06em;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition:background .15s ease,color .15s ease,transform .15s ease;}
.kanton:hover{background:var(--akzent);color:#0d2126;transform:translateY(-2px);}
.kanton.an{background:var(--akzent);color:#0d2126;}
.kanton__k{font-size:17px;}
.kanton__n{font-size:9.5px;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--grau);}
.kanton:hover .kanton__n,.kanton.an .kanton__n{color:#0d2126;}

/* ---------- Tafel (Detail eines Kantons) ---------- */
.tafel{background:var(--weiss);border:1px solid var(--linie);margin-top:22px;padding:clamp(20px,3.4vw,34px);
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));}
.tafel__kopf{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.tafel__k{font-size:clamp(28px,6vw,52px);color:var(--akzent);}
.tafel__n{font-size:clamp(15px,2.6vw,20px);}
.zeilen{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:2px;}
.zeile{border-top:1px solid var(--linie);padding:14px 0;display:grid;gap:6px;
  grid-template-columns:minmax(120px,190px) 1fr;}
.zeile__lab{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--akzent-kante);}
.zeile__wert{margin:0;font-size:15px;line-height:1.6;text-transform:none;color:var(--tinte);}
.zeile__quelle{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;color:var(--grau);text-transform:none;}
.linkreihe{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;}

/* ---------- Übungstest ---------- */
.pruef{background:var(--weiss);border:1px solid var(--linie);padding:clamp(20px,3.4vw,34px);margin-top:26px;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));}
.pruef__zaehler{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--akzent-kante);text-transform:uppercase;}
.pruef__frage{font-size:clamp(17px,2.8vw,24px);margin:14px 0 22px;text-transform:none;line-height:1.35;}
.antworten{display:grid;gap:9px;}
.antwort{appearance:none;cursor:pointer;font:inherit;text-align:left;background:var(--grund);
  border:1px solid var(--linie);color:var(--tinte);padding:15px 17px;font-size:15px;line-height:1.5;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition:background .14s ease,border-color .14s ease;}
.antwort:hover{border-color:var(--akzent);background:var(--weiss);}
.antwort.richtig{background:#e7f7ec;border-color:#37a05a;}
.antwort.falsch{background:#fdeceb;border-color:#d8232a;}
.antwort:disabled{cursor:default;}
.erklaerung{margin:20px 0 0;padding:16px 18px;background:var(--grund);border-left:3px solid var(--akzent);
  font-size:14.5px;line-height:1.65;text-transform:none;color:var(--tinte-2);}
.erklaerung strong{color:var(--tinte);}
.balken{height:5px;background:var(--linie);margin:20px 0 0;overflow:hidden;}
.balken__fuell{height:100%;background:var(--akzent);width:0;transition:width .3s ease;}

/* ---------- Hinweiskasten ---------- */
.hinweis{border:1px solid var(--linie);background:var(--weiss);padding:18px 20px;margin-top:26px;
  display:flex;gap:14px;align-items:flex-start;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));}
.hinweis__z{width:26px;height:26px;flex:none;display:grid;place-items:center;background:var(--akzent);
  font-weight:700;font-size:14px;color:#0d2126;}
.hinweis__t{margin:0;font-size:14px;line-height:1.65;color:var(--grau);text-transform:none;}
.hinweis--rot .hinweis__z{background:var(--rot);color:#fff;}

/* ---------- Schranke (nach der Gratiszeit) ---------- */
.schranke{position:fixed;inset:0;z-index:60;background:rgba(8,11,20,.86);display:flex;
  align-items:center;justify-content:center;padding:24px;}
.schranke__karte{max-width:520px;background:var(--weiss);border:1px solid var(--linie);padding:clamp(24px,4vw,40px);
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));}
.schranke__h{font-size:clamp(22px,4.4vw,34px);margin:0 0 16px;}
.schranke__t{margin:0 0 22px;color:var(--grau);font-size:15px;line-height:1.7;text-transform:none;}

/* ---------- Fuss ---------- */
.fuss{padding:clamp(34px,6vw,70px) clamp(16px,4vw,44px);border-top:1px solid var(--linie);
  color:var(--grau);font-size:13px;line-height:1.7;text-transform:none;background:var(--grund-2);}
.fuss a{color:var(--akzent-kante);font-weight:700;}

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

/* ---------- Kleine Geräte ---------- */
@media (max-width:700px){
  .nav{display:none;}
  .treppe .ein{padding-left:min(90px,16vw);}
  .hero__satz,.hero__tat{margin-left:0;}
  .teil__titel .ein{padding-left:min(70px,12vw);}
  .zeile{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

@media print{
  #raum3d,.nav,.sprachen,.knopf,.schranke{display:none !important;}
  body{background:#fff;color:#111;}
  .karte,.tafel,.pruef{clip-path:none;border:1px solid #bbb;break-inside:avoid;}
}

/* ==================================================================
   NEUGESTALTUNG 27.08.2026 — Vorbild: die Motionsites-Lektion
   ------------------------------------------------------------------
   Vier Dinge machen den Unterschied zum alten, flachen Hellgrau:

   1. TIEFE statt Flächen. Hinter allem liegt ein dunkles Bergbild,
      darüber Schichten aus Milchglas. Das Bild bleibt beim Scrollen
      stehen — der Inhalt zieht darüber hinweg.
   2. MILCHGLAS statt weisser Kästen. backdrop-filter mit 18px Blur,
      eine Kante aus Licht statt aus Grau, und ein heller Innenrand,
      der die Fläche wie eine Scheibe wirken lässt.
   3. LEICHTE, GROSSE SCHRIFT. Die Schlagzeile war eine kondensierte
      Techno-Versalie — das ist das Altmodischste an der alten Fassung.
      Sie wird gross und dünn; Quantico bleibt für die kleinen
      Auszeichnungen, weil es dort Charakter gibt statt Lärm.
   4. BEWEGUNG beim Scrollen. Abschnitte blenden gestaffelt ein,
      statt einfach dazustehen. Wer «Bewegung reduzieren» eingestellt
      hat, sieht alles sofort und ruhig.

   Alles ohne Bibliothek und ohne Netz — die App muss offline laufen.
   ================================================================== */

/* ---- 1. Der Grund: Bild, Schleier, Tiefe ---- */
body{
  background:var(--grund);
  color:var(--tinte);
}
/* Drei Ebenen, und die Reihenfolge ist der ganze Trick:
   ganz hinten das Bergbild, davor die schwebenden Flächen aus raum3d.js,
   davor der Schleier, der beides beruhigt — und erst darauf der Text.
   raum3d.js zeichnet mit clearRect, seine Fläche ist also durchsichtig und
   kann dazwischenliegen. Ohne diese Umsortierung lag sie über allem und das
   Bild war unsichtbar. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-3;
  background:url("berge.jpg") center 42% / cover no-repeat;
  opacity:1;
}
canvas{ z-index:-2 !important; opacity:.34; }
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1;
  /* Oben durchscheinend, damit die Bergkette wirklich zu sehen ist; nach
     unten dichter, damit der Fliesstext ruhig steht. */
  background:
    /* Links dichter als rechts: Die Schlagzeile steht links und braucht
       Ruhe, die Bergkette rechts darf atmen. */
    linear-gradient(100deg, rgba(8,11,20,.80) 0%, rgba(8,11,20,.52) 32%, rgba(8,11,20,.10) 58%, rgba(8,11,20,0) 100%),
    linear-gradient(180deg, rgba(8,11,20,0) 0%, rgba(8,11,20,.08) 40%, rgba(8,11,20,.74) 68%, var(--grund) 88%);
}

/* ---- 2. Milchglas für alle Flächen ---- */
.karte, .tafel, .pruef, .hinweis, .schranke__karte, .sprachen, .kanton, .antwort{
  background:var(--weiss);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  border:1px solid var(--linie);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 40px -24px rgba(0,0,0,.85);
}
.karte:hover, .kanton:hover, .antwort:hover{
  background:var(--glas-hoch);
  border-color:rgba(56,207,242,.42);
}
.kanton.an{
  background:linear-gradient(180deg, rgba(56,207,242,.20), rgba(56,207,242,.07));
  border-color:var(--akzent);
  color:var(--akzent-hell);
}
.tafel__kopf, .zeile{ border-color:var(--linie); }
.zeile__lab{ color:var(--grau); }
.zeile__wert{ color:var(--tinte); }
.karte__num{ color:var(--akzent); opacity:.85; }
.karte__fund, .zeile__quelle{ color:var(--grau); }

/* ---- 3. Kopf: fest, schwebend, durchscheinend ---- */
.kopf{
  position:sticky; top:0; z-index:50;
  background:rgba(8,11,20,.55);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--linie);
}

/* ---- 4. Typografie: gross und leicht ---- */
.treppe{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:250;
  letter-spacing:-.022em;
  line-height:1.06;
  font-size:clamp(38px,7.4vw,86px);
  text-transform:none;
  color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.teil__titel{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:280;
  letter-spacing:-.018em;
  line-height:1.12;
  text-transform:none;
  color:#fff;
}
.hero__satz, .teil__satz{
  color:var(--tinte-2);
  font-weight:350;
  font-size:clamp(15.5px,1.7vw,19px);
  line-height:1.62;
  max-width:62ch;
}
/* Quantico bleibt — aber nur dort, wo eine kleine Versalie Charakter gibt. */
.hero__augen, .teil__augen, .marke, .knopf, .kanton__k, .pruef__zaehler{
  font-family:"Quantico","Arial Narrow",Arial,sans-serif;
}
.hero__augen, .teil__augen{ color:var(--akzent); letter-spacing:.14em; }

/* ---- 5. Knöpfe ---- */
.knopf{
  background:linear-gradient(180deg, rgba(56,207,242,.96), rgba(20,160,196,.96));
  color:#04121a; border:0;
  box-shadow:0 10px 30px -12px rgba(56,207,242,.7);
}
.knopf:hover{ filter:brightness(1.08); }
.knopf--leer{
  background:var(--weiss); color:var(--tinte);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
  border:1px solid var(--linie); box-shadow:none;
}

/* ---- 6. Bewegung beim Scrollen ---- */
[data-auf]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--verzug, 0ms);
}
[data-auf].ist-da{ opacity:1; transform:none; }

/* ---- 7. Rücksicht ----
   Wer Bewegung reduziert, bekommt alles sofort und ohne Verschiebung —
   und das Hintergrundbild wird ruhiger, damit nichts flimmert. */
@media (prefers-reduced-motion: reduce){
  [data-auf]{ opacity:1; transform:none; transition:none; }
  body::before{ opacity:.55; }
}
/* Auch die kleineren Überschriften folgen der neuen Handschrift.
   Vorher standen sie in schmaler Versalschrift — genau das liess die
   App alt aussehen. Sie bleiben h2/h3, nur ihr Auftritt ändert sich. */
.karte__t, .schranke__h, .pruef__frage{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:450;
  letter-spacing:-.005em;
  line-height:1.28;
  text-transform:none;
  color:#fff;
}
.karte__t{ font-size:clamp(17px,2.4vw,21px); }
.schranke__h{ font-weight:350; letter-spacing:-.012em; }
.pruef__frage{ font-weight:350; }

/* Die Fundstellen sind Belege, keine Schlagzeilen — leiser setzen. */
.karte__fund, .zeile__lab, .pruef__zaehler{
  font-weight:600;
  letter-spacing:.05em;
  text-transform:none;
}

/* Schriftrollen neu verteilt. Quantico bleibt der App erhalten, aber
   als Auszeichnungsschrift: Navigation, Augenbrauen, Kürzel, Zähler.
   Alles, was man wirklich liest, bekommt die ruhige Systemschrift —
   Quantico ist eine schmale Technik-Schrift und ermüdet im Fliesstext. */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.marke, .nav a, .sprachen button, .hero__augen, .teil__augen,
.kanton, .karte__num, .knopf, .hinweis__z, .zeile__lab, .pruef__zaehler{
  font-family:"Quantico","Arial Narrow",Arial,sans-serif;
}

/* Wo Milchglas fehlt, muss die Fläche trotzdem lesbar sein. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .karte,.tafel,.pruef,.hinweis,.schranke__karte,.sprachen,.kanton,.antwort,.kopf{
    background:rgba(16,21,38,.94);
  }
}

/* ---- 8. Druck: wieder hell und ohne Bild ---- */

/* ---- 9. Die Wortmarke ----
   Sie hatte eine fest verdrahtete dunkle Farbe und verschwand im neuen
   Grund. Der Kreis wird rot: Das ist die Schweizer Fahne, weisses Kreuz auf
   rotem Feld — richtiger als schwarz und auf dunklem Grund sofort sichtbar. */
.marke{ color:#fff; }
.marke__zeichen{
  background:var(--rot);
  box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 6px 18px -8px rgba(216,35,42,.9);
}
.nav a, .nav button{ color:var(--tinte-2); }
.nav a:hover, .nav button:hover{ color:var(--akzent-hell); }
.sprachen button{ color:var(--tinte-2); }
.fuss{ color:var(--grau); border-top-color:var(--linie); }

/* ==================================================================
   11. THEMENLEISTE des Übungstests
   Der Fragenpool ist gewachsen; wer nur Geschichte üben will, soll
   nicht durch die Verfassung müssen. Die Zahl am Knopf sagt, wie
   viele Fragen dahinterstehen — sonst klickt man blind.
   ================================================================== */
.themen{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:clamp(22px,3.4vw,34px) 0 clamp(18px,2.6vw,26px);
}
.thema{
  appearance:none; cursor:pointer; font:inherit; font-size:13.5px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; color:var(--tinte-2);
  background:var(--weiss); border:1px solid var(--linie);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.thema:hover{ color:var(--tinte); border-color:var(--akzent); }
.thema.ist-da{
  color:var(--grund); background:var(--akzent); border-color:var(--akzent);
  font-weight:500;
}
.thema__n{
  font-family:"Quantico","Arial Narrow",Arial,sans-serif;
  font-size:11px; letter-spacing:.06em; opacity:.72;
  font-variant-numeric:tabular-nums;
}
.thema.ist-da .thema__n{ opacity:.62; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .thema{ background:rgba(16,21,38,.94); }
  .thema.ist-da{ background:var(--akzent); }
}

/* ==================================================================
   10. DRUCK — ganz am Schluss, und das ist kein Zufall.
   Ein Druckblock weiter oben nützt nichts: jede spätere Regel ohne
   Medienabfrage überholt ihn. Genau daran ist der erste Versuch
   gescheitert — der Ausdruck kam schwarz auf schwarz heraus.
   Wer eine Frist oder eine Fundstelle mit aufs Amt nimmt, soll ein
   sauberes weisses Blatt bekommen.
   ================================================================== */
@media print{
  body::before, body::after, canvas, #raum3d{ display:none !important; }
  .nav, .sprachen, .knopf, .schranke, .themen{ display:none !important; }

  html, body{ background:#fff !important; color:#111 !important; }
  .teil, .teil--hell, .hero, .deck{ background:none !important; }
  /* Die Schleier vor Hero und Abschnitten sind ::before-Flächen. Sie zu
     entfärben genügt nicht — sie müssen ganz weg, sonst legt sich ein
     grauer Verlauf über den Text. */
  .hero::before, .teil::before, .teil--hell::before{ display:none !important; }

  .karte, .tafel, .pruef, .hinweis, .kanton, .antwort, .sprachen, .schranke__karte{
    background:#fff !important;
    border:1px solid #bbb !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    clip-path:none !important;
    break-inside:avoid;
  }

  .treppe, .teil__titel, .karte__t, .pruef__frage, .schranke__h,
  .zeile__wert, .karte__p, .hero__satz, .teil__satz, .marke{ color:#111 !important; }
  .treppe .akz, .teil__titel .akz, .hero__augen, .teil__augen,
  .karte__num, .karte__fund, .zeile__lab{ color:#0b6b80 !important; }

  /* Der weiche Textschatten der Schlagzeile wird im PDF zu grauen Kästen —
     im Druck braucht ihn ohnehin niemand. Die Kopfleiste ebenso entglasen. */
  .treppe, .teil__titel{ text-shadow:none !important; }
  .kopf{ background:#fff !important; border-bottom:1px solid #bbb !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    box-shadow:none !important; position:static !important; }

  /* Die Wortmarke behält ihr rotes Feld — das ist die Fahne, nicht Dekor. */
  .marke__zeichen{ background:#d8232a !important; color:#fff !important; box-shadow:none !important; }

  /* Eingeblendetes muss auf Papier sichtbar sein, auch ohne Scrollen. */
  [data-auf]{ opacity:1 !important; transform:none !important; }
}