/* StudySwiss — was die Website lebendig macht
   ==================================================================
   Diese Datei erfindet KEINE Farbe und KEINE Schrift. Jeder Wert kommt
   aus `marke.css`; es bleibt bei Bitter und Nunito Sans, bei Papier,
   Karte und dem Karoraster, bei den Radien 16/18/14/9 und bei «kein
   Schatten» (§5.3). Was hier dazukommt, ist ausschliesslich RHYTHMUS:
   Grössen, die mitwachsen, Abschnitte, die sich abwechseln, und
   Bewegung, die man abschalten kann.

   Warum es das braucht: Die Seite benutzte das Design-System statisch.
   34-Pixel-Überschriften auf 1400 Pixel Bildschirm, überall dieselben
   64 Pixel Abstand, eine einzige Oberfläche (Karte auf Papier) und
   keine einzige Bewegung. Jeder Wert für sich war richtig, und trotzdem
   sah alles gleich aus — das Karoraster lag gleichmässig über allem und
   wirkte dadurch wie Rauschen statt wie Marke.

   Die App bleibt davon unberührt. §5.6: «Sie wächst mit, statt zu
   spiegeln» — unter 900 px ist sie die App, darüber darf sie die
   Mittel eines grossen Bildschirms benutzen.                          */

/* --- Typografie, die mitwächst ---------------------------------------
   In der App sind die Grade fest, weil ein Telefon eine bekannte Breite
   hat. Ein Laptop hat das nicht. `clamp` nimmt als Untergrenze genau
   den Wert der App — auf schmalen Schirmen ändert sich also nichts. */
@media (min-width:900px){
  h1{font-size:clamp(34px,4.1vw,52px);line-height:1.06;letter-spacing:-1.4px}
  h2{font-size:clamp(27px,2.5vw,36px);line-height:1.14;letter-spacing:-.7px}
  h3{font-size:clamp(20px,1.5vw,22px)}
  .aufmacher h1{font-size:clamp(38px,4.7vw,60px)}
  .aufmacher .bd{font-size:clamp(17px,1.35vw,19px);line-height:1.62}
}

/* --- Abschnittsrhythmus ----------------------------------------------
   Vorher: jeder Abschnitt 64 px, jeder auf Papier. Jetzt atmet der
   Abstand mit der Breite, und die Oberfläche wechselt. */
.band{padding:clamp(56px,6.4vw,104px) var(--rand)}
.band.schmal{padding:clamp(40px,4vw,60px) var(--rand)}

/* Ein Abschnitt auf Kartenfläche. Er nimmt dem Karoraster die Fläche
   und gibt ihm dadurch erst seine Wirkung: Das Raster ist die Marke,
   und eine Marke, die ununterbrochen läuft, sieht niemand mehr. */
.band.hell{background:var(--card);background-image:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Ein Abschnitt, der an den vorherigen anschliesst, statt neu zu
   beginnen — nur eine Haarlinie dazwischen. */
.band.naht{border-top:1px solid var(--line)}

/* Die dunkle Fläche bekommt aussen Luft und innen ihren Radius, statt
   randlos über die ganze Breite zu laufen. Das ist dieselbe «dunkle
   Karte» wie in der App (Radius 18, §5.3), nur gross. */
@media (min-width:900px){
  .band.dunkelband{border-radius:var(--r-dunkel);
    max-width:calc(var(--spalte) + 2 * var(--rand));
    margin:0 auto;padding-left:clamp(32px,4vw,64px);padding-right:clamp(32px,4vw,64px)}

  /* Der letzte Abschnitt darf nicht am Fuss kleben.
     ==============================================================
     Die dunkle Fläche ist hier eine KARTE: abgerundet, schmaler als
     die Seite, auf dem Papier liegend. Ihre Luft nach oben und unten
     kommt vom Innenabstand der Nachbarabschnitte — nur ganz unten
     gibt es keinen Nachbarn mehr, sondern den Fuss. Der ist selbst
     dunkel und läuft über die ganze Breite: Die beiden Flächen
     stiessen aneinander, und die runden Ecken endeten im Nichts.

     Darum greift die Regel NUR beim letzten Kind von `#inhalt` —
     eine dunkle Fläche zwischen zwei Papierabschnitten hat ihre Luft
     bereits und bekäme sonst unten mehr als oben. `<main id="inhalt">`
     und `<footer class="fuss">` sind KEINE Geschwister (der Fuss steht
     ausserhalb von `main`), ein Nachbarschaftswähler `+ .fuss` träfe
     also nie. */
  #inhalt > .band.dunkelband:last-child{margin-bottom:clamp(36px,4.5vw,72px)}
}

/* --- Aufmacher zweispaltig -------------------------------------------
   Links der Satz, rechts ein Schaustück. Unter 900 px fällt es
   untereinander, wie alles andere auch. */
.aufmacher{padding:clamp(52px,5.4vw,88px) var(--rand) clamp(48px,4.6vw,72px)}
.aufmacher.gross .innen{display:grid;gap:clamp(32px,4vw,64px);
  grid-template-columns:1.06fr .94fr;align-items:center}
.aufmacher.gross h1{max-width:16ch}
@media (max-width:900px){
  .aufmacher.gross .innen{grid-template-columns:1fr}
}

/* Das Schaustück: eine echte Aufgabe mit echter Rückmeldung, aus den
   echten Bauteilen gebaut.

   Bewusst KEIN Bildschirmfoto. Das der alten Website zeigte eine App
   mit einem Tab «Erkunden» und einem Suchfeld — beides gibt es nicht
   mehr, und ein Foto veraltet beim nächsten Screen wieder. Was hier
   steht, ist dieselbe Karte, die das Kind später wirklich sieht; sie
   kann gar nicht auseinanderlaufen. */
.schaustueck{position:relative;display:grid;gap:12px}
.schaustueck .karte{padding:22px}
.schaustueck .stamm{font:600 17px/1.42 'Bitter',Georgia,serif;color:var(--ink);
  margin:12px 0 16px}
.schaustueck .wahlzeile{display:flex;align-items:center;gap:11px;padding:11px 14px;
  border:1.5px solid var(--line);border-radius:12px;
  font:400 15px 'Nunito Sans';color:var(--ink5);background:var(--paper)}
.schaustueck .wahlzeile+.wahlzeile{margin-top:8px}
.schaustueck .wahlzeile.falsch{border-color:var(--red);background:var(--red1);color:var(--red7)}
.schaustueck .wahlzeile .kugel{width:24px;height:24px;border-radius:50%;flex:none;
  border:1.5px solid var(--tan3);display:flex;align-items:center;justify-content:center;
  font:700 12px/1 'Nunito Sans';color:var(--tan6);background:var(--card)}
.schaustueck .wahlzeile.falsch .kugel{border-color:var(--red);color:var(--red)}
/* Das Rückmeldungsblatt, das in der App von unten hereinfährt. Hier
   steht es darunter — es IST die Aussage der Startseite. */
.schaustueck .blattprobe{background:var(--red1);border:1px solid var(--red1);
  border-radius:var(--r-karte);padding:18px 20px}
.schaustueck .blattprobe .eyebrow{color:var(--red7)}
.schaustueck .blattprobe p{margin:0;font:400 14px/1.55 'Nunito Sans';color:var(--red7)}

/* --- Enthüllen beim Scrollen -----------------------------------------
   Gestaffelt, kurz, einmalig. Kein Hineinfliegen von der Seite, kein
   Springen: 16 Pixel nach oben und aufblenden, mehr nicht.

   Das Attribut am `<body>` ist die Sicherung, und sie ist der ganze
   Punkt: Gesetzt wird es NUR von `lebenWecken()`, und nur dann, wenn es
   im Browser wirklich einen `IntersectionObserver` gibt. Ohne
   JavaScript — und im Prüflauf, wo `dom.js` keinen kennt — greift diese
   Regel gar nicht erst, und jeder Abschnitt steht sichtbar da. Eine
   Enthüllung, die hängen bleibt, wäre eine leere Seite (§5.6). */
body[data-leben=an] .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .68s cubic-bezier(.16,1,.3,1),
             transform .68s cubic-bezier(.16,1,.3,1)}
body[data-leben=an] .reveal.da{opacity:1;transform:none}
body[data-leben=an] .reveal.s1{transition-delay:.07s}
body[data-leben=an] .reveal.s2{transition-delay:.14s}
body[data-leben=an] .reveal.s3{transition-delay:.21s}

/* --- Laufband ---------------------------------------------------------
   Die Partnerlogos laufen, wie sie auf der alten Website liefen. Zwei
   Zugeständnisse, die dort schon standen und die zählen: Es hält an,
   sobald die Maus darüber liegt, und es läuft gar nicht erst, wenn
   jemand im System weniger Bewegung eingestellt hat.

   Die Spur wird im MARKUP verdoppelt, nicht von JavaScript. Ein
   Laufband, das erst durch ein Skript entsteht, steht ohne Skript
   halbleer da — und das Skript müsste im Prüflauf abgesichert werden,
   für reine Zierde. */
.laufband{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.laufband-spur{display:flex;align-items:center;gap:clamp(36px,5vw,64px);
  width:max-content;animation:laufband 42s linear infinite}
.laufband:hover .laufband-spur{animation-play-state:paused}
.laufband img{height:38px;width:auto;flex:none;filter:grayscale(1);opacity:.6;
  transition:opacity .2s,filter .2s}
.laufband img:hover{filter:grayscale(0);opacity:1}
@keyframes laufband{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* --- Kacheln für die Kantone -----------------------------------------
   Vorher standen die zwölf als Chips nebeneinander — richtig, aber
   stumm. Eine Kachel mit dem Kürzel im Kreis ist dasselbe Bauteil, das
   die App im Fortschritt benutzt (`.kuerzel`), nur eine Nummer grösser. */
.kachelgitter{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.kachel{display:flex;align-items:center;gap:12px;padding:13px 15px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-karte);
  font:600 14px/1.3 'Nunito Sans';color:var(--ink);
  transition:border-color .16s,transform .16s}
a.kachel:hover{border-color:var(--tan);transform:translateY(-2px);text-decoration:none}
.kachel .kuerzel{width:34px;height:34px;font-size:13px;background:var(--tan1)}

/* Das Kantonswappen.
   ==================================================================
   Quadratisch, weil die Schweizer Kantonsfahnen quadratisch sind — ein
   auf 3:2 gezogenes Wappen wäre schlicht falsch. Ein Haar Rahmen in
   `--line`, damit die hellen (Luzern, Solothurn, Basel) nicht in der
   Kartenfläche verschwinden, und ein kleiner Radius, damit es zu den
   übrigen Bauteilen passt statt als Fremdkörper dazuliegen.

   `alt=""` ist Absicht: Der Kantonsname steht als Text daneben. Ein
   Vorleseprogramm, das «Wappen des Kantons Zürich» und danach «Zürich»
   sagt, nennt dieselbe Sache zweimal. */
.wappen{width:34px;height:34px;flex:none;display:block;object-fit:cover;
  border-radius:6px;border:1px solid var(--line);background:var(--card)}
.wappen.gross{width:44px;height:44px;border-radius:8px}
/* Auf der hellen Fläche hebt sich die Karte nicht ab — dort bekommt die
   Kachel das Papier als Grund, damit der Unterschied bleibt. */
.band.hell .kachel{background:var(--paper)}

/* --- Akkordeon für die Fragen ----------------------------------------
   `<details>` statt vier gestapelter Karten: Die alte Website hatte
   Akkordeons, und für eine Fragenliste sind sie das richtige Bauteil —
   man sieht alle Fragen auf einmal und öffnet die eine, die einen
   angeht. Es braucht dafür kein JavaScript. */
.frage{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-karte);overflow:hidden}
.frage+.frage{margin-top:10px}
.band.hell .frage{background:var(--paper)}
.frage>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:18px 20px;font:600 17px/1.34 'Bitter',Georgia,serif;color:var(--ink)}
.frage>summary::-webkit-details-marker{display:none}
.frage>summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;
  border-right:2px solid var(--tan6);border-bottom:2px solid var(--tan6);
  transform:rotate(45deg);transition:transform .24s;margin-top:-4px}
.frage[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.frage>summary:hover{background:var(--tan1)}
.frage[open]>summary{border-bottom:1px solid var(--line)}
.frage-text{padding:16px 20px 20px;font:400 14px/1.6 'Nunito Sans';color:var(--ink5)}
.frage-text>*+*{margin-top:10px}

/* --- Karten, die auf den Zeiger reagieren ----------------------------
   Zwei Pixel nach oben und ein wärmerer Rahmen. KEIN Schatten (§5.3) —
   die Erhebung entsteht aus der Bewegung, nicht aus einem Schlagschatten. */
a.karte,button.karte,.karte{transition:border-color .16s,background .16s,transform .16s}
a.karte:hover,button.karte:hover{transform:translateY(-2px)}

/* --- Bildflächen ------------------------------------------------------
   Ein festes Seitenverhältnis, damit beim Laden nichts springt, und
   `cover`, damit nichts verzerrt. */
.bildflaeche{border-radius:var(--r-karte);overflow:hidden;border:1px solid var(--line);
  background:var(--tan1);aspect-ratio:4/3}
.bildflaeche img{display:block;width:100%;height:100%;object-fit:cover}
.portraet.gross{width:104px;height:104px}

/* --- Kennzahlen -------------------------------------------------------
   Sie standen als vier kleine Kästchen in einer Reihe. Jetzt teilen sie
   sich die Breite und tragen ihre Zahl gross genug, dass man sie von
   weitem liest. */
.kennzahlen{gap:12px;margin-top:clamp(26px,3vw,38px)}
.kennzahl{flex:1 1 150px;padding:18px 20px}
.kennzahl .num2{font-size:clamp(28px,2.6vw,36px)}

/* --- Anker unter der klebenden Kopfzeile ------------------------------
   Ohne `scroll-padding-top` verschwindet jedes Sprungziel hinter der
   68 px hohen Kopfzeile. */
html{scroll-behavior:smooth;scroll-padding-top:86px}

/* --- Wer weniger Bewegung eingestellt hat, bekommt weniger ------------
   Und zwar wirklich keine: kein Laufband, kein Enthüllen, kein Heben,
   kein weiches Rollen. Die Seite verliert dabei nichts ausser der
   Bewegung — jeder Inhalt steht vollständig da. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .laufband-spur{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .laufband{-webkit-mask-image:none;mask-image:none}
  body[data-leben=an] .reveal{opacity:1;transform:none;transition:none}
  a.karte:hover,button.karte:hover,a.kachel:hover{transform:none}
  .frage>summary::after{transition:none}
  .laufband img{transition:none}
}

/* --- Das Logo in lesbarer Grösse --------------------------------------
   Die Wortmarke ist 776 × 357; bei 30 px Höhe war der Schriftzug kaum
   breiter als ein Daumen und am Telefon kaum lesbar. */
.logo svg{height:38px}

/* --- Häkchenlisten: Symbol und Text auf einer Linie ------------------ */
.stapel p:has(> svg:first-child){display:flex;gap:8px;align-items:flex-start}
.stapel p:has(> svg:first-child) > svg{flex:none;margin-top:2px}

/* --- Telefon: dichter und proportional (21. September 2026) -----------
   Unter 600 px stand jede Karte mit einem grossen Symbol über der
   Überschrift, mit Desktop-Abständen darum; die Startseite war zehn
   Bildschirme lang, und zwölf Kantone standen als zwölf volle Zeilen da.
   Jetzt steht das Symbol neben der Überschrift, die Abstände werden
   kleiner, und lange Wörter trennen sich an der Silbe statt irgendwo
   («Prüfungsvorbereitu-ng»). */
@media (max-width:600px){
  .band{padding:36px var(--rand)}
  .aufmacher{padding:30px var(--rand) 28px}
  .aufmacher h1{max-width:none}
  h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal}
  /* Eine Hauptüberschrift trennt nie mitten im Wort («Prüfungsvor-
     bereitung»); stattdessen wird sie auf schmalen Geräten etwas
     kleiner, sodass auch das längste Wort auf eine Zeile passt. */
  .aufmacher h1{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;
    font-size:clamp(22px,7.4vw,29px)}
  .aufmacher .bd{font-size:16px;line-height:1.55}

  .raster{gap:12px}
  .raster.drei:has(> .karte > .ic){grid-template-columns:1fr}
  .karte{padding:18px}

  /* Symbol links, Überschrift rechts daneben, Text darunter über die
     ganze Breite. Nur wo die Überschrift direkt auf das Symbol folgt —
     eine Karte mit Eyebrow dazwischen bleibt, wie sie ist. */
  .karte:has(> .ic:first-child + h3){display:grid;grid-template-columns:auto 1fr;
    column-gap:14px;align-items:center}
  .karte:has(> .ic:first-child + h3) > .ic{width:40px;height:40px;border-radius:11px}
  .karte:has(> .ic:first-child + h3) > h3{margin-top:0 !important}
  .karte:has(> .ic:first-child + h3) > :not(.ic):not(h3){grid-column:1 / -1}

  /* Zwölf Kantone in zwei Spalten statt zwölf Zeilen. */
  .kachelgitter{grid-template-columns:1fr 1fr;gap:8px}
  .kachel{padding:10px 11px;gap:9px;font-size:13px}
  .kachel .wappen{width:28px;height:28px}

  .portraet{width:64px;height:64px}
  .frage>summary{padding:15px 16px;font-size:16px}
  .fuss{padding-bottom:80px}   /* Platz für den Hilfe-Knopf */
}

/* Rechtsseite: Die Tabellen (Daten, Dienstleister, Produkte) sind breiter
   als ein Telefon und wurden abgeschnitten, ohne dass man es sah. Jetzt
   scrollen sie für sich, und die Seite bleibt, wo sie ist. */
.rechtstext table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:600px){.rechtstext table{font-size:13px}}

/* Übersicht für Schulen: Die Code-Tabelle war am Telefon zu eng — Codes
   auf drei Zeilen, «Sperren» rechts abgeschnitten. Jetzt bleibt ein Code
   auf einer Zeile, und die Tabelle scrollt für sich, wenn es nicht reicht. */
.tabellenrahmen{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
#codeTabelle td:first-child{white-space:nowrap}
@media (max-width:600px){
  #codeTabelle .klassenfeld{width:64px !important}
  #codeTabelle th,#codeTabelle td{padding-left:6px;padding-right:6px}
}