@import url("assets/fonts.css");

/* =========================================================================
   Civara — Entwurf v13
   Zusammenführung: Substanz und Strenge von civara-v12, Sektionsvielfalt
   und Wärme von civara-website, dazu eine bildstärkere, modernere
   Oberfläche: Produktansicht im Hero, Bildband über die ganze Breite,
   schwebende Quellen, grosse Porträts.
   Alles Aussehen steht als Token in diesem Block. Wer etwas ändert,
   ändert es hier, nicht verstreut.
   ========================================================================= */

:root {
  /* --- Farben: dunkel (Hero, Bildband, Abschluss, Fuss) --- */
  --ink:            #062a31;
  /* Der Hero-Grund. Schnyders Verlauf ist der hellste, auf dem Weiss noch
     ueberall traegt: 14.47 / 8.44 / 5.31 gegen die drei Stopps. */
  --petrol-tief:    #072e35;
  --petrol:         #0a5659;
  --petrol-hell:    #127967;
  --grad-hero:      linear-gradient(118deg, var(--petrol-tief) 0%, var(--petrol) 46%, var(--petrol-hell) 100%);
  --ink-2:          #0a3a42;
  /* Navigation: durchgehend der Ton des Startscreens, die erste Farbe des
     Hero-Verlaufs (Nutzerentscheid 2026-09-23). Gilt fuer die gescrollte
     Leiste und das aufgeklappte Menue auf Handy und Tablet. */
  --nav:            #04354c;
  --nav-rgb:        4, 53, 76;
  /* Der Hero-Verlauf, einmal definiert: der Hero und die gescrollte
     Navigation zeigen denselben. */
  --verlauf-hero:   linear-gradient(170deg, #04354c 0%, #043e45 12%, #045053 25%, #046361 38%, #047b6c 50%, #049075 62%, #04a279 75%, #04ab7d 88%, #04b27f 100%);
  --auf-ink:        #eef5f1;
  /* still lag bei 0.50 auf ink-2 (#0a3a42) bei 4.02 und fiel durch.
       --auf-ink-leise  6.59 auf ink-2 / 7.73 auf ink
       --auf-ink-still  5.06 auf ink-2 / 5.27 auf ink  */
  --auf-ink-leise:  rgba(238, 245, 241, 0.72);
  --auf-ink-still:  rgba(238, 245, 241, 0.60);
  --ink-linie:      rgba(238, 245, 241, 0.14);
  --ink-glas:       rgba(238, 245, 241, 0.07);

  /* --- Farben: hell (die Sektionen dazwischen) --- */
  --papier:         #f5f7f4;
  --papier-tief:    #ebf0ec;
  --karte:          #fbfcfb;   /* kein reines Weiss, Regel aus v12 */
  --auf-papier:     #0b2f36;
  /* Deckkraft ist die haeufigste Kontrastfalle: rgba(11,47,54,0.52) sieht
     im Code nach "gedaempft" aus und misst auf Papier-tief 3.08. Beide
     Sekundaertoene stehen darum deckend da, mit gemessenem Wert.
       --auf-papier-leise  5.11 Papier-tief / 5.29 Papier / 5.54 Karte
       --auf-papier-still  5.54 Papier-tief / 5.93 Papier / 6.21 Karte  */
  --auf-papier-leise: #3d585c;
  --auf-papier-still: #486465;
  --papier-linie:   rgba(11, 47, 54, 0.11);

  /* --- Akzente ---------------------------------------------------------
     Ein Akzent, zwei Helligkeiten: eine fuer hellen Grund, eine fuer dunklen.
     Gemessen (Canvas-normalisiert, Selbsttest 21.00 / 4.54):

       --akzent      #0a6b5e   5.95 Papier / 6.23 Karte / 5.56 Papier-tief
       --akzent-tief #075a4e   7.55 / 7.91 / 7.05   Hover, Kontrast steigt
       --mint        #4be79a   9.54 auf Ink         Akzent auf Dunkel
       --mint-hell   #baf0d7  11.95 auf Ink         Flaeche, nicht Schrift

     Der frueher gefuehrte Akzent #0e8c78 lag auf Papier bei 3.87 und fiel
     damit an rund 25 Textstellen durch. --smaragd #17c695 trug dort nur
     2.04 und ist als eigener Akzent gestrichen; er lebt nur noch als
     Tonung in --mint-zart weiter. DESIGN.md nennt dieselbe Bauart:
     ein Ton auf Paper, ein Ton auf Ink, nie derselbe fuer beides. */
  --akzent:         #0a6b5e;
  --akzent-tief:    #075a4e;
  --mint:           #4be79a;
  --mint-hell:      #baf0d7;
  --mint-zart:      rgba(10, 107, 94, 0.10);
  --warn:           #a8321c;

  /* --- Verläufe ---
     Zwei, und beide sind Flaeche, nicht Schrift. Verlaufsschrift ist raus:
     der Kontrast ist ueber die Laufweite nicht konstant. */
  --grad-mint:  linear-gradient(103deg, #4be79a 0%, #17c695 100%);
  --grad-tief:  linear-gradient(168deg, var(--ink-2) 0%, var(--ink) 72%);

  /* --- Form --- */
  --r-s:   8px;
  --r-m:  14px;
  --r-l:  20px;
  --r-xl: 28px;
  --r-pille: 999px;

  /* --- Tiefe: getönt, nie grau --- */
  --sh-1: 0 1px 2px rgba(6, 42, 49, 0.04), 0 4px 14px rgba(6, 42, 49, 0.05);
  --sh-2: 0 2px 4px rgba(6, 42, 49, 0.05), 0 14px 36px rgba(6, 42, 49, 0.08);
  --sh-3: 0 4px 10px rgba(6, 42, 49, 0.06), 0 26px 60px rgba(10, 107, 94, 0.18);
  --sh-ink: 0 18px 60px rgba(3, 20, 24, 0.40);
  --sh-glas: 0 30px 80px rgba(3, 20, 24, 0.55);

  /* --- Bewegung --- */
  --e-aus:   cubic-bezier(0.23, 1, 0.32, 1);
  --e-sanft: cubic-bezier(0.2, 0, 0, 1);

  /* Fokusring. Ueberall dort neu gesetzt, wo eine dunkle Flaeche beginnt. */
  --fokus:          var(--akzent);

  --maxw: 1180px;
  --kopfhoehe: 72px;
  /* Avenir Next ist kommerziell (Monotype) und laeuft hier als Systemschrift.
     Fuer eine Veroeffentlichung braucht es eine Weblizenz und echte woff2;
     siehe LIESMICH. Die Monospace traegt die Beschriftungen. */
  --font:      "Avenir Next", "Avenir", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* --font-mono ist entfallen: seit die Beschriftungen in Avenir laufen,
     wird keine Monospace mehr gebraucht. */
}

/* ========================================================== Grundlagen */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopfhoehe) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--auf-papier);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* Drei Stufen, mehr nicht. Avenir traegt bei gleichem Zahlenwert deutlich
   mehr Farbe als eine Grotesk: 800 trifft Heavy und laeuft in den
   Innenraeumen zu.
     400  Fliesstext
     500  Titel und grosse Aussagen
     600  Auszeichnung, Beschriftung, Bedienelemente
   Frueher standen hier 400, 500, 600, 650, 700 und 800 nebeneinander, und
   eine Korrektur am Dateiende zog nur einen Teil davon herunter: 24 Stellen
   liefen weiter auf Heavy, darunter ein 30-px-Titel neben einem H2 in
   Medium. Darum steht die Skala jetzt an der Quelle. */
h1, h2, h3, h4 {
  margin: 0; font-weight: 500; letter-spacing: -0.022em; line-height: 1.06;
  /* Ohne das bricht der Browser dort um, wo die Zeile gerade voll ist, und
     laesst gern ein einzelnes Woertchen wie „ein" am Zeilenende stehen.
     balance verteilt die Zeilen einer Ueberschrift gleichmaessig. */
  text-wrap: balance;
}
b, strong { font-weight: 600; }
/* pretty verhindert die Schusterjunge-Zeile: ein einzelnes Wort allein in der
   letzten Zeile eines Absatzes. */
p, li, dd { text-wrap: pretty; }
p { margin: 0; }
ul, dl { margin: 0; padding: 0; list-style: none; }

a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-tief); }

/* Der Ring hing an #17c695 und mass auf Papier 2.04, gefordert sind 3.
   Jetzt folgt er dem Grund: dunkler Akzent auf Hell, Mint auf Dunkel. */
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
::selection { background: var(--mint-hell); color: var(--ink); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 18px; border-radius: var(--r-s);
  background: var(--ink); color: var(--auf-ink); font-weight: 600;
}
.skip:focus { top: 12px; color: var(--auf-ink); }

.container {
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px);
}

.sektion { padding: clamp(72px, 9vw, 132px) 0; }
.sektion--tief { background: var(--papier-tief); }

.auf-ink, .hero, .kopf, .kachel--grund, .demo, .fuss, .mockup__flaeche, .formular { --fokus: var(--mint); }
.auf-ink { background: var(--ink); color: var(--auf-ink); }
.auf-ink h1, .auf-ink h2, .auf-ink h3 { color: var(--auf-ink); }

/* ========================================================== Typografie */

h1 { font-size: clamp(36px, 4.6vw, 64px); }
h2 { font-size: clamp(28px, 4vw, 50px); }
h3 { font-size: clamp(19px, 1.5vw, 22px); letter-spacing: -0.02em; }

/* Die zweite Zeile eines Titels traegt den Akzent. Frueher lief das ueber
   einen Verlauf mit background-clip: text. Verlaufsschrift steht auf der
   Anti-Tell-Liste, sie bringt drei Probleme mit: der Kontrast ist ueber die
   Laufweite nicht konstant, das Shorthand background setzt background-clip
   zurueck und macht aus der Schrift einen Farbbalken, und Auswahl und
   Vorlesewerkzeuge kommen mit transparenter Schrift schlecht zurecht.
   Eine Farbe tut dasselbe und ist messbar. */
.leuchte { color: var(--mint); }
/* Auf hellem Grund die dunkle Fassung des Verlaufs. Und: nur background-image
   anfassen, nie das Shorthand. background setzt background-clip zurueck, dann
   wird aus der Leuchtschrift ein Farbbalken. */
.leuchte--dunkel { color: var(--akzent); }

/* Der Punkt vor dem Eyebrow war Dekoration ohne Zustand und ist entfernt.
   Statt seiner traegt die Zeile die Monospace, wie eine Beschriftung im
   Aktendeckel. */
.eyebrow {
  display: inline-flex; align-items: center;
  margin: 0 0 20px;
  /* Avenir statt Monospace. Die Mono war als Beschriftungsstimme gedacht,
     las sich neben einer humanistischen Sans aber als Kostuem. Avenir traegt
     die Beschriftung mit, braucht dafuer etwas mehr Gewicht und Laufweite:
     eine Sans in Versalien verliert ohne beides an Praesenz. */
  font-family: var(--font);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--akzent);
}
.auf-ink .eyebrow { color: var(--mint); }
/* Mint liegt am hellen Ende des Hero-Verlaufs bei 3.34. Mint-hell nimmt das
   Risiko heraus, ohne die Wirkung zu aendern: 4.18 bis 11.39. */
.hero .eyebrow { color: var(--mint-hell); }

.lead {
  margin-top: 20px;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.58;
  color: var(--auf-papier-leise); max-width: 62ch;
}
.auf-ink .lead { color: var(--auf-ink-leise); }

.sektion__kopf { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sektion__kopf--schmal { max-width: 620px; margin-bottom: clamp(24px, 3vw, 36px); }

.hinweis { margin-top: 18px; max-width: 62ch; font-size: 13.5px; line-height: 1.5; color: var(--auf-papier-still); }
.auf-ink .hinweis { color: var(--auf-ink-still); }
.platzhalter {
  padding: 1px 7px; border-radius: var(--r-pille);
  background: var(--mint-zart); color: var(--akzent);
  font-weight: 600; font-size: 12.5px;
}

/* ========================================================== Knöpfe */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 13px 26px;
  border: 1px solid transparent; border-radius: var(--r-pille);
  font-family: var(--font); font-size: 15.5px; font-weight: 600;
  letter-spacing: -0.005em; text-align: center;
  /* white-space: nowrap machte aus „Diese Zusammenstellung besprechen" einen
     379 px breiten Knopf in einer 238 px schmalen Spalte. Zwischen 320 und
     429 px Viewport war die Dokumentbreite dadurch konstant 420 px: die Seite
     liess sich seitlich wegschieben, und wer den Knopf antippte, verschob sie.
     Ab 430 px war der Effekt weg, darum fiel er auf groesseren Geraeten nicht
     auf. Kurze Beschriftungen brechen ohnehin nicht um; lange duerfen es. */
  cursor: pointer; max-width: 100%;
  transition: transform 0.22s var(--e-aus), box-shadow 0.22s var(--e-aus),
              background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.97); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--klein { min-height: 40px; padding: 9px 18px; font-size: 14px; }

/* Der Akzentknopf steht auf hellem Grund: deckende Akzentflaeche, helle
   Schrift (5.79), Kante gegen Papier 5.95 und gegen die Mintkachel 5.55.
   Auf dunklem Grund uebernimmt .btn--mint, sonst faellt die Kante weg. */
.btn--akzent { background: var(--akzent); color: var(--auf-ink); }
.btn--akzent:hover { background: var(--akzent-tief); color: var(--auf-ink); }

.btn--mint { background: var(--mint-hell); color: var(--ink); }
/* Gruen getoente Schatten erzeugen auf hellem Grund einen Halo, der wie ein
   Rahmen hinter dem Knopf aussieht. Schatten werden auf den Hintergrundton
   getoent, nie auf die Akzentfarbe. */
.btn--mint:hover { background: #cdf5e3; color: var(--ink); box-shadow: 0 8px 22px rgba(11, 47, 54, 0.12); }

.btn--glas {
  background: var(--ink-glas); color: var(--auf-ink); border-color: var(--ink-linie);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--glas:hover { background: rgba(238, 245, 241, 0.14); color: var(--auf-ink); }

/* ========================================================== Kopf */

.fortschritt {
  position: fixed; inset: 0 auto auto 0; z-index: 60;
  height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--grad-mint);
}

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Am Seitenanfang steht der Kopf auf dem Hero-Verlauf. Rechts, wo Sprache
   und Knopf sitzen, ist der Verlauf am hellsten (#0e6760 bei 1440 px): die
   Navigationslinks massen dort 4.40, die Sprachkuerzel 3.39. Ein Schleier,
   der nach unten ausblendet, gibt dem Kopf einen verlaesslichen Grund,
   ohne als Balken zu erscheinen. Gemessen an der Textzeile: 4.88. */
.kopf::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 132px; z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 42, 49, 0.42) 0%, rgba(6, 42, 49, 0) 100%);
  transition: opacity 0.3s ease;
}
.kopf.ist-gescrollt::before { opacity: 0; }
.kopf.ist-gescrollt {
  background: rgba(6, 42, 49, 0.93);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--ink-linie);
}

.nav { display: flex; align-items: center; gap: 20px; min-height: var(--kopfhoehe); }
.nav__logo { flex: none; display: block; }
.nav__logo img { width: 116px; }

.nav__links { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
/* a ist inline: vertikales Padding malt, zaehlt aber nicht zur Hoehe, darum
   massen die Links 23 px. inline-flex behebt das, das horizontale Padding
   muss dabei stehen bleiben, sonst kleben die Links aneinander. */
.nav__links a {
  display: inline-flex; align-items: center; min-height: 24px;
  padding: 8px 12px; border-radius: var(--r-s);
  font-size: 14.5px; font-weight: 600; color: var(--auf-ink-leise);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav__links a:hover { color: var(--auf-ink); background: var(--ink-glas); }
.nav__links a.ist-aktiv { color: var(--mint); }

.nav__ende { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.sprache { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.sprache a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px;
  color: var(--auf-ink-leise); padding: 4px 2px;
}
.sprache a:hover { color: var(--auf-ink); }
.sprache a[aria-current] { color: var(--mint); }
.sprache span { color: var(--auf-ink-leise); }

.burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: var(--ink-glas); border: 1px solid var(--ink-linie);
  border-radius: var(--r-s); cursor: pointer;
}
.burger span {
  display: block; width: 18px; height: 2px; margin: 3.5px auto;
  background: var(--auf-ink); border-radius: 2px;
  transition: transform 0.25s var(--e-aus), opacity 0.2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.menue { display: none; border-top: 1px solid var(--ink-linie); background: rgba(var(--nav-rgb), 0.97); }
.menue.ist-offen { display: block; }
.menue nav { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; padding-bottom: 20px; }
.menue nav > a {
  padding: 13px 4px; font-size: 17px; font-weight: 600;
  color: var(--auf-ink); border-bottom: 1px solid var(--ink-linie);
}
.menue__ende { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }

/* ========================================================== 1. Hero */

.hero {
  position: relative; isolation: isolate;
  margin-top: calc(-1 * var(--kopfhoehe));
  padding: calc(var(--kopfhoehe) + clamp(40px, 5vw, 76px)) 0 clamp(56px, 7vw, 100px);
  background: var(--grad-hero); color: var(--auf-ink);
  overflow: hidden;
  /* Der Start fuellt eine Bildschirmhoehe, ohne auf kleinen Laptops
     ueberzulaufen. svh statt vh: die iOS-Adressleiste soll nicht springen. */
  min-height: 100svh;
  display: flex; align-items: center;
}
.hero h1 { color: var(--auf-ink); }

.hero__deko { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* DESIGN.md: kein radialer Glow ueber dem Verlauf, der Verlauf bleibt linear.
   Frueher lagen hier zwei radiale Lichter und zwei geblurrte Blasen darueber.
   Was bleibt, ist eine lineare Abdunklung nach unten, damit der Text auf der
   linken Haelfte sicher steht. */
.hero__deko::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(170deg, var(--ink-2) 0%, rgba(6, 42, 49, 0.72) 54%, rgba(6, 42, 49, 0.18) 100%);
}
/* Die Gemeindeansicht liegt hinter allem und verliert sich nach oben. */
/* Entfernt: Die Gemeindeansicht lag hinter dem Mockup. Weil Glasflaechen nur
   7 Prozent decken, zeichneten sich ihre eckigen Hausformen als dunkle Kaesten
   in Buttons und Fenster ab. Das Bild traegt die Bildband-Sektion. */
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.2fr);
  gap: clamp(36px, 4.5vw, 72px); align-items: center;
}
.hero__wort { max-width: 620px; }
.hero h1 { margin-bottom: 24px; font-size: clamp(34px, 3.8vw, 55px); line-height: 1.04; }
.hero__lead { max-width: 46ch; font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.56; color: var(--auf-ink-leise); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* --- Produktansicht: Rahmen, Leiste, laufende Antwort --- */

.mockup { position: relative; }

.mockup__flaeche {
  position: relative; z-index: 1;
  border: 1px solid rgba(238, 245, 241, 0.16); border-radius: var(--r-xl);
  /* War heller Schleier (13 bis 4 Prozent). Das Panel steht auf der hellen
     Haelfte des Verlaufs, dort mass der Fliesstext 3.81 und die Quellzeile
     2.65. Dunkles Glas dreht das um, ohne die Durchsicht zu verlieren:
     Fliesstext 8.37 bis 13.40, Quelle 5.83 bis 9.32. Die helle Fassung
     baut das Panel schon so; jetzt sind beide gleich konstruiert. */
  background: linear-gradient(158deg, rgba(6, 42, 49, 0.62), rgba(6, 42, 49, 0.52));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: var(--sh-glas);
  overflow: hidden;
  /* Die Browserleiste mit Ampelpunkten und URL ist entfernt: sie versprach
     einen Screenshot und lieferte eine Zeichnung. */
  padding-top: 0;
}
.mockup__app { padding: clamp(22px, 2.6vw, 32px); }
.mockup__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.mockup__tabs span {
  padding: 6px 12px; border-radius: var(--r-pille);
  font-size: 11.5px; font-weight: 600; color: var(--auf-ink-leise);
  background: rgba(238, 245, 241, 0.06);
}
.mockup__tabs span { transition: background-color 0.2s var(--e-aus), color 0.2s var(--e-aus); }
.mockup__tabs .ist-aktiv { background: rgba(75, 231, 154, 0.16); color: var(--mint-hell); }
.mockup__fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid rgba(238, 245, 241, 0.12);
  font-size: 11.5px; font-weight: 600; color: var(--auf-ink-leise);
}
.mockup__marke {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pille);
  background: rgba(75, 231, 154, 0.16); color: var(--mint-hell); font-weight: 600;
}
.mockup__marke svg { width: 12px; height: 12px; }

/* --- Der laufende Beleg, jetzt im Rahmen statt auf nackter Fläche --- */
.beleg__titel {
  display: flex; align-items: center; margin-bottom: 16px;
  font-family: var(--font);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--auf-ink-leise);
}

.schub { position: relative; overflow: hidden; min-height: 14rem; }
.lage { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 12px; }
.lage .frage { font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--auf-ink-leise); }
.lage .antwort { font-size: clamp(15.5px, 1.3vw, 18px); font-weight: 500; line-height: 1.55; color: var(--auf-ink); }
.lage .quelle { margin-top: 14px; }

.quelle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 12.5px; }
.quelle b { position: relative; display: inline-block; padding-bottom: 3px; font-weight: 600; color: var(--mint); }
/* Die Beleguhr laeuft nach rechts leer, also sitzt der Ankerpunkt rechts. */
.strich { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; }
.quelle > span { color: var(--auf-ink-leise); font-weight: 400; }

/* ================================================== 2. Der Alltag heute

   Eigene Layoutfamilie: Protokollzeilen. Links der Satz, rechts die Zahl in
   der Monospace, dazwischen eine Haarlinie. Grosse Displayziffern mit
   Akzentfarbe waeren die Vorlage, die jede zweite Landingpage benutzt; eine
   Zahl in der Monospace liest sich als Messwert und passt zur Aktenwelt,
   in der diese Seite spielt.
   ====================================================================== */

/* Lauftext in zwei Spalten, wie im Blatt. Der Block ist kurz genug, dass
   beide Spalten auf einen Bildschirm passen; sonst waere zweispaltiger
   Fliesstext im Web ein Lesefehler, weil man zum Spaltenwechsel
   zurueckscrollen muss. */
/* Drei Spalten statt Fliesstext (Layoutwechsel auf Nutzer-Wunsch, nach dem
   Stil einer Referenzseite): kurzer Titel, kurzer Text, eine duenne
   Akzentlinie traegt statt eines Kastens die Abgrenzung. Tabellenziffern
   fuer die Zahl im Text, damit sie ruhig im Satz sitzt. */
.alltag__pains {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(28px, 3.2vw, 40px);
}
.pain { padding-top: 16px; border-top: 2px solid var(--akzent); }
/* Kennzahl als Blickfang ueber jedem Titel (Nutzer-Entscheid 2026-09-23).
   Achtung beim Pflegen: 60 % und <1 Min. stammen aus den bisherigen Texten;
   "0 Ordner" ist eine Prinzip-Aussage (man durchsucht keine Ablage mehr),
   KEIN Messwert. Eine unbelegte Zahl als Messwert auszugeben ist genau das,
   was mit dem Pilotbetrieb-Satz entfernt wurde. */
.pain__zahl {
  margin: 0 0 4px; font-size: clamp(40px, 4.2vw, 54px); font-weight: 700;
  line-height: 1; letter-spacing: -0.02em; color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.pain__zahl span { font-size: 0.42em; font-weight: 600; margin-left: 3px; letter-spacing: 0; }
.pain--zahl .pain__titel { margin-top: 2px; }
.pain__titel {
  margin: 0 0 8px; font-size: clamp(17px, 1.4vw, 19px); font-weight: 600;
  letter-spacing: -0.01em; color: var(--auf-papier);
}
.pain__text {
  margin: 0; font-size: 15px; line-height: 1.55; color: var(--auf-papier-leise);
}
.pain__text b { font-weight: 600; color: var(--akzent); font-variant-numeric: tabular-nums; }

/* Die vierte Aussage der frueheren Fassung -- Grenze, kein geloestes
   Problem, siehe Kommentar im HTML -- in derselben Stimme wie zuvor der
   letzte Lauftext-Absatz. */
.alltag__heikel {
  margin-top: clamp(24px, 2.8vw, 36px); max-width: 68ch;
  font-size: clamp(16px, 1.3vw, 17px); line-height: 1.6;
  color: var(--auf-papier);
}

/* Die Antwort auf die Frage, die jede Gemeinde zuerst stellt. Sie ist nicht
   der vierte Punkt einer Aufzaehlung, sondern die Aussage des Abschnitts,
   und steht darum allein und gross. */
.alltag__satzung {
  max-width: 44ch;
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 2px solid var(--akzent);
  font-size: clamp(24px, 3vw, 38px); font-weight: 500;
  letter-spacing: -0.022em; line-height: 1.22;
  color: var(--auf-papier);
}

/* Das Bild sass mit Aussenabstand mitten im Abschnitt und darunter kam noch
   dessen Fusspolster: es schwamm. Jetzt sitzt es buendig an der Unterkante,
   der Abschnitt hat dort kein Polster mehr, und der Verlauf blendet in den
   Grund der naechsten Sektion aus. So traegt das Bild den Uebergang, wie es
   in v14 der Fall war. */
.alltag { padding-bottom: 0; }
.bildband__streifen { position: relative; margin: clamp(40px, 4.5vw, 64px) 0 0; }
.bildband__streifen img {
  width: 100%; height: clamp(230px, 28vw, 420px);
  object-fit: cover; object-position: center 58%;
}
.bildband__streifen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(235, 240, 236, 0.45) 58%, var(--papier-tief) 100%);
}
.bildband__streifen figcaption {
  position: absolute; right: clamp(16px, 4vw, 40px); bottom: 14px;
  padding: 6px 13px; border-radius: var(--r-pille);
  background: var(--ink);
  font-family: var(--font);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--auf-ink-leise);
}

/* ========================================================== 3. Belegspur */

.spur__gitter {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}

/* Drei Quellen, gestapelt und leicht verdreht: Weisung, Protokoll,
   Reglement. Das oberste Blatt ist das, aus dem die Antwort stammt. */
/* Die Versaetze standen in Prozent der Stapelhoehe. Weil die Karten je nach
   Spaltenbreite unterschiedlich hoch werden, deckte das vordere Blatt den
   Titel des hinteren mal ab und mal nicht. Feste Versaetze messen das, was
   sichtbar bleiben muss: Beschriftung und Titel jedes Blattes. */
.quellenstapel { position: relative; min-height: 448px; }
.blatt {
  position: absolute; width: 78%; padding: 20px 22px;
  display: grid; gap: 9px; align-content: start;
  background: var(--karte); border: 1px solid var(--papier-linie);
  border-radius: var(--r-l); box-shadow: var(--sh-2);
}
.blatt i { display: block; height: 7px; border-radius: 4px; background: rgba(11, 47, 54, 0.09); }
.blatt i:nth-of-type(2) { width: 88%; }
.blatt i:nth-of-type(3) { width: 62%; }
.blatt i.ist-hell { background: rgba(10, 107, 94, 0.26); }
.blatt__marke {
  justify-self: start; padding: 4px 11px; border-radius: var(--r-pille);
  background: rgba(11, 47, 54, 0.07);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--auf-papier-still);
}
/* Weiss auf dem hellen Akzentverlauf mass 1.03. Deckende Akzentflaeche
   mit heller Schrift: 5.79. Gilt fuer alle vier Zustandspillen. */
.blatt__marke--akzent { background: var(--akzent); color: var(--auf-ink); }
.blatt__titel { font-size: 16.5px; font-weight: 500; letter-spacing: -0.02em; }
.blatt__art { font-size: 13.5px; font-weight: 600; color: var(--akzent); }
.blatt__fuss { margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--auf-papier-still); }
/* Drei Quellen, gestapelt und leicht verdreht. Sie standen frueher in einer
   Dauerschleife von 18 bis 26 Sekunden. Perpetuelle Mikro-Loops sind ein
   Tell: sie bewegen sich, ohne etwas zu bedeuten. */
.blatt--3 { left: 2%; top: 0; transform: rotate(-7deg); }
.blatt--2 { left: 14%; top: 118px; transform: rotate(4.5deg); }
.blatt--1 { left: 5%; top: 222px; transform: rotate(-1.5deg); box-shadow: var(--sh-3); }

.aufdecker {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--papier-linie); border-radius: var(--r-xl);
  background: var(--karte); box-shadow: var(--sh-2);
}
.aufdecker__frage { max-width: 62ch; font-size: 14px; font-weight: 500; color: var(--auf-papier-still); margin-bottom: 16px; }
.aufdecker__antwort { font-size: clamp(18px, 1.7vw, 23px); font-weight: 500; line-height: 1.5; letter-spacing: -0.016em; }

/* Die Unterstreichung lief ueber border-bottom. Bei einem Satz, der ueber
   mehrere Zeilen umbricht, zeichnet der Rahmen eine Linie ueber die ganze
   Spaltenbreite und sieht aus wie ein Zeilentrenner. text-decoration folgt
   dem Text statt dem Kasten. */
.satz {
  display: inline; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0; cursor: pointer; border-radius: 2px;
  text-decoration: underline 2px rgba(10, 107, 94, 0.35);
  text-underline-offset: 4px;
  transition: background-color 0.24s ease, text-decoration-color 0.24s ease, box-shadow 0.24s ease;
}
.satz:hover { text-decoration-color: var(--akzent); }
.satz.ist-belegt {
  background: rgba(10, 107, 94, 0.13); text-decoration-color: var(--akzent);
  box-shadow: 0 0 0 4px rgba(10, 107, 94, 0.13);
}

.belege { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.belege__label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--auf-papier-still); margin-right: 4px;
}
.belegknopf {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--akzent); cursor: pointer;
  background: var(--mint-zart);
  border: 1px solid rgba(10, 107, 94, 0.22); border-radius: var(--r-pille);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--e-aus);
}
.belegknopf:hover { background: rgba(10, 107, 94, 0.16); border-color: var(--akzent); transform: translateY(-1px); }
.belegknopf svg { width: 12px; height: 12px; flex: none; transition: transform 0.28s var(--e-aus); }
.belegknopf[aria-expanded="true"] { background: var(--akzent); color: var(--auf-ink); border-color: transparent; }
.belegknopf[aria-expanded="true"] svg { transform: rotate(135deg); }

/* Zugeklappt war das Original zwar unsichtbar, stand aber weiter im
   Barrierefreiheitsbaum: der Knopf meldete aria-expanded="false", und das
   Vorleseprogramm las den Artikeltext trotzdem. visibility: hidden nimmt
   ihn heraus. Die Verzoegerung laesst die Aufklappbewegung zu Ende laufen,
   bevor er beim Schliessen verschwindet. */
.original { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s var(--e-sanft); }
.original.ist-offen { grid-template-rows: 1fr; }
.original__innen { overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.34s; }
.original.ist-offen .original__innen { visibility: visible; transition-delay: 0s; }
.original__text {
  margin-top: 22px; padding: 24px;
  border-radius: var(--r-l); background: var(--papier-tief);
  font-size: 15.5px; line-height: 1.68; color: var(--auf-papier-leise);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.26s ease 0.04s, transform 0.26s var(--e-sanft) 0.04s;
}
.original.ist-offen .original__text { opacity: 1; transform: none; }
.original__text b { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 600; color: var(--akzent); letter-spacing: 0.02em; }
mark { background: rgba(10, 107, 94, 0.16); color: var(--auf-papier); font-weight: 600; border-radius: 3px; padding: 1px 3px; margin: 0 -3px; }

/* ========================================================== 4. Gegenprobe */

.gegenueber { display: grid; grid-template-columns: 1fr 1fr; gap: 4px clamp(12px, 2vw, 24px); align-items: stretch; }
.gegenueber--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seite { padding: clamp(22px, 2.6vw, 34px); }
.seite__kopf {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--auf-papier-still); margin-bottom: 14px;
}
/* Die mittlere Bezeichnung ("Allgemeine KI befuellt mit eigenen Daten")
   bricht nebeneinander auf zwei Zeilen um. Alle Koepfe reservieren darum
   zwei Zeilen, sonst stehen die Titel darunter nicht auf einer Hoehe. */
@media (min-width: 761px) {
  .gegenueber--drei > .seite:nth-child(-n+3) .seite__kopf { min-height: 2lh; }
}
/* Zwischen 761 und 900 px sind die Spalten so schmal, dass die franzoesische
   Bezeichnung ("IA generaliste alimentee par vos donnees") auf drei Zeilen
   umbricht (gemessen bei 761 und 780 px; ab ca. 880 px zwei). */
@media (min-width: 761px) and (max-width: 900px) {
  .gegenueber--drei > .seite:nth-child(-n+3) .seite__kopf { min-height: 3lh; }
}
.seite__titel { font-size: clamp(21px, 2.3vw, 30px); font-weight: 500; letter-spacing: -0.024em; line-height: 1.12; }
.seite__titel em { font-style: normal; }
.seite__lead { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: var(--auf-papier-leise); }
.seite__frage { font-size: 15px; font-weight: 600; line-height: 1.45; margin-bottom: 14px; }
.seite__text { font-size: 16px; line-height: 1.62; color: var(--auf-papier-leise); }

/* Drei Flaechen, eine Abstufung: die allgemeine KI am flachsten, das
   selbst befuellte GPT dazwischen, Civara als einzige auf heller Karte.
   Der Unterschied traegt ueber die Flaeche, nicht ueber eine Farbe. */
.seite.welt { background: rgba(11, 47, 54, 0.05); }
.seite.selbst { background: rgba(11, 47, 54, 0.05); }
/* Die beiden Vergleichsspalten sind Beiwerk: sie zeigen, was die Frage
   sonst ergibt. Sie treten deshalb zurueck, statt dass Civara lauter wird. */
.seite.welt, .seite.selbst { color: var(--auf-papier-still); }
.seite.welt .seite__titel, .seite.selbst .seite__titel { font-weight: 400; color: var(--auf-papier-leise); }
.seite.gemeinde { background: var(--karte); }
/* Akzentkante statt Rahmen: eine Linie an der Oberkante der Spalte fuehrt
   das Auge, ohne die Karte einzuzaeunen. */
.gegenueber--drei > .seite.gemeinde:nth-child(3) { border-top: 3px solid var(--akzent); }
.gegenueber--drei > .seite:nth-child(-n+3) { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.gegenueber--drei > .seite:nth-child(n+4) { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.gegenueber--drei > .seite.gemeinde:nth-child(3) { box-shadow: 0 -2px 4px rgba(6, 42, 49, 0.04), 0 -10px 30px rgba(6, 42, 49, 0.05); }
.gegenueber--drei > .seite.gemeinde:nth-child(6) { box-shadow: 0 10px 34px rgba(6, 42, 49, 0.08); }
.seite.gemeinde .seite__kopf, .seite.gemeinde .seite__titel em { color: var(--akzent); }
.quelle--alt b { color: var(--auf-papier-still); border-bottom-color: rgba(72, 100, 101, 0.4); }
.urteil--alt { background: rgba(72, 100, 101, 0.10); color: var(--auf-papier-leise); }

/* Der Einwand, der im Gemeinderat tatsaechlich kommt. Zwei Spalten,
   Haarlinie zwischen den Zeilen: eine Spezifikationsliste, keine Karten. */
/* Fuenf gleich breite Spalten unter einer Ueberschrift sind die Vorlage, die
   jede zweite Seite benutzt, und zwangen die Texte ausserdem in Spalten von
   180 px. Jetzt ist es, was es inhaltlich ist: eine Frage und ihre Antworten.
   Links steht die Frage, rechts die Synopse. */
.einwand {
  --fokus: var(--mint);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(20px, 2.4vw, 30px);
  padding: clamp(28px, 3.4vw, 46px);
  border-radius: var(--r-xl);
  background: var(--grad-tief); color: var(--auf-ink);
  box-shadow: var(--sh-ink);
}
.einwand__frage { align-self: start; }
.einwand h3 { font-size: clamp(21px, 2.1vw, 28px); color: var(--auf-ink); }
.einwand__frage p { margin-top: 14px; max-width: 46ch; font-size: 15.5px; line-height: 1.55; color: var(--auf-ink-leise); }
.einwand__argument { display: grid; gap: clamp(16px, 1.8vw, 22px); align-self: center; }
.einwand__argument p { max-width: 56ch; font-size: 15.5px; line-height: 1.6; color: var(--auf-ink-leise); }
.einwand__argument b { color: var(--mint-hell); font-weight: 600; }

.gegenueber .quelle { margin-top: 16px; font-size: 13px; }
.gegenueber .quelle b { color: var(--akzent); border-bottom: 2px solid rgba(10, 107, 94, 0.4); padding-bottom: 2px; }
.gegenueber .quelle > span { color: var(--auf-papier-still); }
.quelle--offen b { color: var(--warn); border-bottom-color: rgba(168, 50, 28, 0.42); }

/* Zwei Belege untereinander: Reglement und Beschluss. Der Abstand zwischen
   ihnen ist kleiner als der zum Text, damit sie als ein Block lesen. */
.gegenueber .quellen .quelle + .quelle { margin-top: 8px; }

/* Der Umschalter bis 760 px. Gestapelt ist die Gegenueberstellung zweierlei
   schlecht: sehr hoch und ohne das Nebeneinander, das den Vergleich ausmacht.
   seite.js baut die Leiste zur Laufzeit, darum steht sie in keinem Markup. */
.gegenschalter {
  display: flex; gap: 4px; margin-bottom: 18px; padding: 4px;
  background: rgba(11, 47, 54, 0.06); border-radius: var(--r-pille);
}
.gegenschalter__btn {
  flex: 1; min-height: 44px; padding: 10px 14px;
  font-family: var(--font); font-size: 14.5px; font-weight: 600;
  color: var(--auf-papier-leise); cursor: pointer;
  background: transparent; border: 0; border-radius: var(--r-pille);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.gegenschalter__btn[aria-pressed="true"] { background: var(--karte); color: var(--akzent); box-shadow: var(--sh-1); }

.urteil {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 7px 15px; border-radius: var(--r-pille);
  font-size: 13.5px; font-weight: 600;
}
.welt .urteil { background: rgba(168, 50, 28, 0.09); color: var(--warn); }
.gemeinde .urteil { background: var(--mint-zart); color: var(--akzent); }

/* ========================================================== 5. Module */

/* Die Rollenwahl.

   Erste Fassung waren Textschalter an einer Unterstreichung, um die
   Pillenleiste des Teamfilters nicht zu wiederholen. Das war der falsche
   Grund: Wiederholung stuetzt das Wiedererkennen, und zwei Filter, die
   dasselbe tun, sollen auch gleich aussehen. Vor allem aber sah ein
   Textschalter nicht nach Schalter aus — und ein Bedienelement, das man
   fuer Text haelt, wird nicht bedient.

   Jetzt dieselbe Sprache wie der Teamfilter: Pille, eigene Flaeche, Rand,
   Hover, deutlicher Aktivzustand. DESIGN.md verlangt fuer Bedienelemente
   ohnehin die Pillenform. */
.rollen { margin: clamp(10px, 1.4vw, 18px) 0 clamp(14px, 1.8vw, 22px); }
.rollen__frage { font-size: 15.5px; font-weight: 600; color: var(--auf-papier); }
.rollen__wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rolle {
  min-height: 40px; padding: 9px 18px;
  font-family: var(--font); font-size: 14.5px; font-weight: 600;
  color: var(--auf-papier-leise); cursor: pointer;
  background: var(--karte);
  border: 1.5px solid var(--papier-linie); border-radius: var(--r-pille);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.rolle:hover { border-color: var(--akzent); color: var(--akzent); }
.rolle[aria-pressed="true"] {
  background: var(--akzent); color: var(--auf-ink); border-color: transparent;
}
.rolle[aria-pressed="true"]:hover { background: var(--akzent-tief); color: var(--auf-ink); }
.rollen__satz { margin-top: 14px; max-width: 62ch; font-size: 14px; color: var(--auf-papier-still); }

.kacheln { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.4vw, 18px); }
/* minmax(0, 1fr) ist noetig: ohne Spaltenvorgabe misst die Spur ihren
   breitesten Inhalt, und die einzeilige Rollenleiste auf dem Handy zog das
   ganze Raster auf 870 px. */
.kachel__kern { height: 100%; }

.kachel--grund .kachel__kern {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 3.6vw, 56px); padding: clamp(26px, 3.2vw, 44px);
  border-radius: var(--r-xl);
  background: var(--grad-tief);
  color: var(--auf-ink); box-shadow: var(--sh-ink);
}
.kachel--grund h3 { color: var(--auf-ink); font-size: clamp(23px, 2.2vw, 30px); }
.kachel--grund .kachel__wort > p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--auf-ink-leise); }
.kachel--grund .marke {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 6px 14px; border-radius: var(--r-pille); background: rgba(75, 231, 154, 0.16);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint);
}
.kachel--grund dl { display: grid; gap: 2px; align-content: start; }
.kachel--grund dt { margin-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--mint-hell); }
.kachel--grund dt:first-of-type { margin-top: 0; }
.kachel--grund dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--auf-ink-leise); }
.kachel--grund .unten {
  grid-column: 1 / -1; max-width: 62ch; margin-top: 8px; padding-top: 20px;
  border-top: 1px solid var(--ink-linie);
  font-size: 14.5px; font-weight: 600; color: var(--auf-ink);
}

.module__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }

.modul {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; height: 100%; padding: clamp(20px, 2.2vw, 26px);
  font-family: var(--font); text-align: left; cursor: pointer;
  background: var(--karte);
  border: 1.5px solid var(--papier-linie); border-radius: var(--r-l);
  box-shadow: var(--sh-1);
  transition: transform 0.24s var(--e-aus), box-shadow 0.24s var(--e-aus),
              border-color 0.22s ease, background-color 0.22s ease;
}
.modul:hover { border-color: rgba(10, 107, 94, 0.45); }
.modul__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.modul__kopf b { font-size: 19px; font-weight: 500; letter-spacing: -0.022em; color: var(--auf-papier); }
.modul__stand {
  flex: none; padding: 4px 11px; border-radius: var(--r-pille);
  background: rgba(11, 47, 54, 0.06);
  font-size: 11.5px; font-style: normal; font-weight: 600; letter-spacing: 0.04em;
  color: var(--auf-papier-still);
  transition: background-color 0.22s ease, color 0.22s ease;
}
.modul__art { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--akzent); }
.modul__text { margin-top: 12px; font-size: 14.5px; line-height: 1.58; color: var(--auf-papier-leise); }
.modul__text:last-child { margin-bottom: 2px; }
.modul[aria-pressed="true"] {
  background: linear-gradient(160deg, rgba(10, 107, 94, 0.09), rgba(10, 107, 94, 0.03));
  border-color: var(--akzent);
  box-shadow: 0 2px 6px rgba(11, 47, 54, 0.08), 0 14px 34px rgba(11, 47, 54, 0.10);
}
.modul[aria-pressed="true"] .modul__stand { background: var(--akzent); color: var(--auf-ink); }

/* Gedaempft wird ueber die Flaeche, nicht ueber die Deckkraft: eine
   Kachel ohne eigenen Grund tritt zurueck, ihre Schrift behaelt aber den
   vollen Kontrast. Deckkraft auf dem ganzen Block waere der bequeme Weg und
   zieht jedes Mal den Text mit unter die Grenze. */
.modul.ist-leise { background: transparent; border-color: var(--papier-linie); box-shadow: none; }
.modul.ist-leise:hover { transform: none; box-shadow: none; }
.modul.ist-passend { border-color: var(--akzent); }

/* Der Preisrechner ist ausgebaut. An seiner Stelle steht eine Zeile: der
   Satz zur Preisbildung links, der Knopf ins Formular rechts. Flache Zeile
   mit Oberlinie, keine dritte Kachel. */
.modulzeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--papier-linie);
}
.modulzeile__satz { flex: 1 1 26rem; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--auf-papier-leise); }
.wechsel { animation: wechsel 0.32s var(--e-sanft) both; }
@keyframes wechsel { from { opacity: 0.35; transform: translateY(4px); } to { opacity: 1; transform: none; } }

select, input, textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-family: var(--font); font-size: 16px; color: var(--auf-papier);
  background: var(--karte); border: 1.5px solid var(--papier-linie); border-radius: var(--r-m);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px rgba(10, 107, 94, 0.20);
}
.rechner select { border-color: rgba(10, 107, 94, 0.28); }

/* ========================================================== 6. Schweiz */

/* Als schmale Spalte stand der Abschnitt mit leerer rechter Haelfte da und
   sah aus wie die dritte Haarlinienliste in Folge. Jetzt traegt links die
   Aussage, rechts die drei pruefbaren Punkte. Der tiefere Grund setzt ihn
   ausserdem von den beiden Papier-Abschnitten davor ab. */
.schweiz__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
/* Die Karte bildet die linke Spalte. Senkrecht mittig, damit der Weissraum
   ueber und unter ihr als Absicht liest: eine Bildspalte, die frueher endet
   als eine Textspalte, ist normal — ein Bild, das unter drei Textbloecken
   haengt, sieht nach Nachtrag aus. */
.schweiz__bild { align-self: center; display: grid; gap: clamp(22px, 2.6vw, 34px); }
.schweiz__bild h2 { max-width: 15ch; }
.schweiz__karte { margin: 0; }
.schweiz__karte svg { width: 100%; height: auto; display: block; }
.karte__land { fill: rgba(11, 47, 54, 0.045); stroke: rgba(11, 47, 54, 0.30); stroke-width: 3.5; stroke-linejoin: round; }
.karte__punkte circle { fill: rgba(11, 47, 54, 0.20); }
/* Der Sitz in Bern. Ring und Punkt in der Akzentfarbe, statisch: ein
   pulsierender Ring waere eine Dauerschleife ohne Aussage. */
.karte__hier { fill: var(--akzent); }
.karte__ring { fill: none; stroke: var(--akzent); stroke-width: 3.5; opacity: 0.45; }


/* Datenschutz als Grundlage sichtbar (Feedback Christian). Eckig mit
   getoentem Rand statt rundem Siegel (Seitenstreifen steht auf der
   Anti-Tell-Liste): ein Siegel behauptet eine Zertifizierung,
   die es nicht gibt. Der Satz darin ist belegbar: Datenhaltung und
   Sprachmodell laufen in der Schweiz (Bestaetigung Mischa, 2026-09-23). */
.schutzmarke {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-radius: var(--r-m);
  background: var(--karte); border: 1px solid rgba(10, 107, 94, 0.28);
  font-size: 14.5px; line-height: 1.5; color: var(--auf-papier-leise);
}
.schutzmarke svg { flex: none; width: 30px; height: 30px; margin-top: 2px; color: var(--akzent); }
.schutzmarke b { display: block; font-size: 16px; font-weight: 600; color: var(--auf-papier); }

.schweiz__fuss { margin-top: 22px; max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--auf-papier-still); }
.schweiz__lead { margin-top: 20px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--auf-papier-leise); }
.schweiz__punkte { display: grid; gap: 0; margin-top: clamp(28px, 3.2vw, 40px); padding-top: clamp(24px, 2.8vw, 34px); border-top: 1px solid var(--papier-linie); }
.schweiz__punkte li {
  padding: 0 0 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--papier-linie);
}
.schweiz__punkte li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.schweiz__punkte b { display: block; font-size: 16px; font-weight: 600; color: var(--auf-papier); margin-bottom: 6px; }
.schweiz__punkte span { display: block; max-width: 56ch; font-size: 14.5px; line-height: 1.58; color: var(--auf-papier-leise); }

/* ========================================================== 7. Team */

.team__kopf { max-width: 720px; margin-bottom: 30px; }
.felder { display: flex; flex-wrap: wrap; gap: 8px; }
.feld {
  min-height: 44px; padding: 10px 20px;
  font-family: var(--font); font-size: 14.5px; font-weight: 600;
  color: var(--auf-papier-leise); cursor: pointer;
  background: var(--karte); border: 1.5px solid var(--papier-linie); border-radius: var(--r-pille);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--e-aus);
}
.feld:hover { transform: translateY(-2px); border-color: rgba(10, 107, 94, 0.3); color: var(--akzent); }
.feld[aria-pressed="true"] { background: var(--akzent); color: var(--auf-ink); border-color: transparent; }
.team__satz { margin-top: 18px; max-width: 62ch; font-size: 15px; font-weight: 400; color: var(--auf-papier-leise); }

/* Grosse Porträts statt kleiner Kreise: das Bild trägt die Sektion. */
/* Neun Menschen fuellen nur ein Dreierraster restlos. Kleinere Portraits
   entstehen deshalb ueber die Rasterbreite, nicht ueber mehr Spalten: das
   Team stuetzt das Vertrauen, es soll aber nicht die Seite dominieren. */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin-top: 36px; max-width: 820px; margin-inline: auto; }
/* Filterleiste und Zaehlsatz folgen der Rasterbreite, sonst steht die
   Bedienung links und die Portraits mittig. Ueberschrift und Lead bleiben
   linksbuendig wie in allen anderen Abschnitten. */
.team-sektion .felder, .team-sektion .team__satz { max-width: 820px; margin-inline: auto; }
.team > div { transition: opacity 0.3s ease, transform 0.3s var(--e-aus), filter 0.3s ease; }
.team__bild {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: var(--r-l);
  background: var(--papier-tief); box-shadow: var(--sh-1);
}
.team__bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 8%;
  filter: grayscale(1) contrast(1.04);
  transition: transform 0.5s var(--e-aus), filter 0.4s ease;
}
.team__bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 42, 49, 0.42) 0%, rgba(6, 42, 49, 0.06) 42%, transparent 62%);
  transition: background 0.35s ease;
}
.team > div:hover .team__bild::after { background: linear-gradient(to top, rgba(6, 42, 49, 0.52) 0%, rgba(10, 107, 94, 0.10) 44%, transparent 62%); }
.team b { display: block; margin-top: 16px; font-size: 16px; font-weight: 600; letter-spacing: -0.018em; }
.team span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--auf-papier-still); }
.team > div.ist-leise { opacity: 0.3; filter: saturate(0.4); }
.team > div.ist-passend { transform: none; }
.team > div.ist-passend .team__bild { box-shadow: 0 0 0 2px var(--akzent), 0 18px 40px rgba(10, 107, 94, 0.22); }

/* ========================================================== 8. Demo */

.demo { position: relative; isolation: isolate; overflow: hidden; }
.demo__deko { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.demo__deko::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grad-tief);
}
.demo__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.demo__wort h2 em { font-style: normal; }
.demo__wort > p { margin-top: 20px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--auf-ink-leise); }

.formular {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: clamp(22px, 2.8vw, 34px);
  border: 1px solid var(--ink-linie); border-radius: var(--r-xl);
  background: linear-gradient(150deg, rgba(238, 245, 241, 0.10), rgba(238, 245, 241, 0.04));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--sh-ink);
}
/* Die Zusammenstellung aus der Modulwahl, noch einmal im Formular. Wer von
   „Diese Zusammenstellung besprechen" hierher springt, sieht sonst nur leere
   Felder und muss zurueckscrollen, um zu pruefen, worueber er eine Demo
   anfragt. Der Block ist kein zweites Bedienelement: geaendert wird oben,
   der Verweis fuehrt dorthin zurueck. */
.wahl {
  grid-column: 1 / -1;
  /* Sprungziel von „Diese Zusammenstellung besprechen". Der Block traegt
     tabindex="-1", damit beim Sprung auch der Tastaturfokus mitgeht; einen
     Fokusring soll er dabei nicht zeigen, er ist kein Bedienelement. */
  scroll-margin-top: calc(var(--kopfhoehe) + 24px);
  padding: 18px 20px; border-radius: var(--r-m);
  /* Der Block liegt im Glas des Formulars, also auf einer ohnehin schon
     aufgehellten Flaeche. Eine zweite helle Schicht drueckte den
     Sekundaertext auf 4.51, einen Hundertstel ueber der Grenze. Ein dunkler
     Einzug dreht das um: schlechtester Wert im Block jetzt 6.08. */
  background: rgba(6, 42, 49, 0.35); border: 1px solid rgba(238, 245, 241, 0.12);
}
.wahl:focus { outline: none; }
.wahl__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.wahl__label {
  font-family: var(--font); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint);
}
.wahl__aendern {
  flex: none; display: inline-flex; align-items: center; min-height: 24px;
  font-size: 13px; font-weight: 600; color: var(--mint-hell);
  text-decoration: underline 1px currentColor; text-underline-offset: 4px;
}
.wahl__aendern:hover { color: var(--auf-ink); }
.wahl__liste { margin-top: 12px; display: grid; }
.wahl__liste li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; font-size: 14.5px;
}
.wahl__liste li + li { border-top: 1px solid rgba(238, 245, 241, 0.18); }
.wahl__liste b { font-weight: 600; color: var(--auf-ink); }
.wahl__liste span { flex: none; font-variant-numeric: tabular-nums; color: var(--auf-ink-leise); }
.wahl__leer { color: var(--auf-ink-leise); font-style: normal; }

.feldgruppe { display: grid; gap: 7px; }
.feldgruppe--breit { grid-column: 1 / -1; }
.feldgruppe__frei { font-weight: 400; color: var(--auf-ink-still); }
.formular textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

/* Der Honigtopf darf nicht display:none sein, sonst fuellen ihn manche
   Roboter gerade deshalb nicht aus. Er steht ausserhalb des Bildschirms und
   ist fuer Tastatur und Vorleseprogramm nicht erreichbar. */
.honigtopf {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.feldgruppe label { font-size: 13.5px; font-weight: 600; color: var(--auf-ink-leise); }
/* textarea fehlte in dieser Aufzaehlung und behielt darum den hellen
   Kartengrund aus der Grundregel: ein weisses Feld zwischen lauter dunklen.

   Der Rand stand auf --ink-linie (14 Prozent) und mass damit 1.5 gegen die
   Formularflaeche. Ein Eingabefeld muss mit 3:1 erkennbar sein, und hier
   traegt allein der Rand diese Aufgabe: zwei dunkle Flaechen uebereinander
   kommen ueber die Fuellung nie auf 3, dafuer muesste das Feld die Farbe
   wechseln. Mit 55 Prozent sind es 3.42. Die Fuellung ist zugleich dunkler,
   das hebt Eingabetext auf 11.11 und den Platzhalter auf 5.06. */
.formular input, .formular select, .formular textarea { background: rgba(6, 42, 49, 0.55); color: var(--auf-ink); border-color: rgba(238, 245, 241, 0.55); }
.formular input:focus, .formular select:focus, .formular textarea:focus { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(75, 231, 154, 0.18); }
.formular textarea::placeholder { color: var(--auf-ink-still); }
.formular select option { color: #0b2f36; }
.fehler { font-size: 12.5px; font-weight: 600; color: #ffb4ab; }
.feldgruppe.ist-fehlerhaft input, .feldgruppe.ist-fehlerhaft select { border-color: #ffb4ab; }
.formular__fuss {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--ink-linie);
}
.formular__meldung { flex: 1 1 14rem; font-size: 13px; line-height: 1.5; color: var(--auf-ink-still); }
.formular__meldung.ist-gut { color: var(--mint-hell); }
.formular__meldung.ist-fehler { color: #ffb4ab; }

/* ========================================================== Fuss */

.fuss { padding: clamp(48px, 5vw, 72px) 0 32px; border-top: 1px solid var(--ink-linie); }
.fuss__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); }
.fuss__marke img { width: 124px; margin-bottom: 14px; }
.fuss__marke p { font-size: 14px; color: var(--auf-ink-leise); }
.fuss__spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fuss__spalte { display: grid; gap: 9px; align-content: start; }
.fuss__spalte b {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--auf-ink-still); margin-bottom: 4px;
}
.fuss a { display: inline-flex; align-items: center; min-height: 24px; }
.fuss__spalte a { align-self: flex-start; font-size: 14.5px; color: var(--auf-ink-leise); }
.fuss__spalte a:hover { color: var(--mint); }
.fuss__unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: clamp(32px, 4vw, 52px); padding-top: 22px;
  border-top: 1px solid var(--ink-linie); font-size: 13px; color: var(--auf-ink-still);
}
.fuss__unten a { color: var(--auf-ink-still); }
.fuss__unten a:hover { color: var(--mint); }

/* Umschalter zwischen den beiden Farbfassungen. Entwurfshilfe, darum steht er
   im Fuss und nicht im Kopf: er gehoert nicht zur Seite, sondern zur Arbeit
   an ihr. Beim Ausliefern faellt er weg. */

/* ========================================================== Einblenden */

[data-auf] {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s var(--e-aus), transform 0.5s var(--e-aus);
  transition-delay: calc(var(--i, 0) * 60ms);
}
[data-auf].ist-sichtbar { opacity: 1; transform: none; }

/* ========================================================== Breiten */

@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 64px); }
  .hero__wort { max-width: 700px; }
  .mockup { max-width: 680px; }
}

/* Belegspur: zweispaltig bis 900 px. Vorher kippte sie schon bei 1100 in
   den Stapel, und auf dem Tablet quer stand das Beispiel anderthalb
   Bildschirme unter seiner Ueberschrift. */
@media (max-width: 900px) {
  .spur__gitter { grid-template-columns: minmax(0, 1fr); }
  /* width: 100% ist hier kein Zierrat. margin-inline: auto hebt das Strecken
     des Grid-Elements auf, und weil im Stapel nur absolut positionierte
     Blaetter liegen, bleibt ohne Breitenangabe kein Inhalt uebrig, der eine
     Breite ergaebe: der Stapel mass 0 px, die Blaetter fielen auf ihre
     Mindestbreite zusammen und wuchsen ineinander. */
  .quellenstapel { width: 100%; max-width: 420px; margin-inline: auto; }
}

@media (max-width: 1040px) {
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rollen__wahl { gap: 7px; }
}

/* Module: drei Spalten bis 900 px. Bei 1024 standen sie zweispaltig, der
   Abschnitt brauchte zweieinhalb Bildschirme. */
@media (max-width: 900px) {
  .module__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sechs Kacheln (seit 2026-09-24) gehen in zwei Spalten ohne Rest auf.
     Bei neun spannte die offene Kachel („Individueller Prozess“) ueber die
     ganze Zeile; bei sechs liesse das neben der fuenften ein Loch. */
}

/* Burger ab 1100 px. Bei 1024 lief der Kopf mit sechs Links, Sprache und
   Knopf 22 px ueber den Rand, die Seite liess sich seitlich schieben. */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .burger { display: block; }
}

@media (max-width: 900px) {
  .kachel--grund .kachel__kern { grid-template-columns: minmax(0, 1fr); }
  .demo__inner { grid-template-columns: minmax(0, 1fr); }
  .fuss__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .schweiz__inner { grid-template-columns: minmax(0, 1fr); }
  .schweiz__bild { gap: clamp(18px, 2.2vw, 26px); }
  .schweiz__karte { max-width: 460px; }
  .schweiz__bild h2 { max-width: 20ch; }
  .schweiz__lead { max-width: 62ch; }
}

@media (max-width: 900px) {
  .einwand { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 32px); }
  .einwand__frage p { max-width: 62ch; }
}

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  /* Die beiden Knoepfe unter der Ueberschrift nur auf Laptop und Tablet
     (Entscheid Mischa 2026-09-25): auf dem Handy nehmen sie den ersten
     Bildschirm ein, Demo und Module sind ueber Menue und Scrollen erreichbar. */
  .hero__actions { display: none; }
  /* Satz und Zahl untereinander: nebeneinander bliebe fuer die Zahl keine
     Spalte mehr uebrig, die sich als Spalte liest. */
  /* Zweispaltiger Lauftext braucht Breite. Darunter eine Spalte. */
  .alltag__pains { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 28px); }
  .alltag__satzung { max-width: 20ch; }
  .modulzeile { display: grid; }
  .modulzeile .btn { justify-self: start; }
  .schub { min-height: 16rem; }
  .gegenueber, .gegenueber--drei { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gegenueber--drei > .seite { border-radius: 0; }
  .gegenueber--drei > .seite:first-child { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .gegenueber--drei > .seite:last-child { border-radius: 0 0 var(--r-xl) var(--r-xl); }
  .gegenueber > .seite.gemeinde { box-shadow: none !important; }
  .gegenueber.hat-schalter { grid-template-columns: minmax(0, 1fr); }
  .gegenueber.hat-schalter[data-zeigt="welt"] .gemeinde,
  .gegenueber.hat-schalter[data-zeigt="welt"] .selbst,
  .gegenueber.hat-schalter[data-zeigt="selbst"] .welt,
  .gegenueber.hat-schalter[data-zeigt="selbst"] .gemeinde,
  .gegenueber.hat-schalter[data-zeigt="gemeinde"] .welt,
  .gegenueber.hat-schalter[data-zeigt="gemeinde"] .selbst { display: none; }
  .gegenueber.hat-schalter .seite:first-of-type { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .gegenueber.hat-schalter .seite:last-of-type { border-radius: 0 0 var(--r-xl) var(--r-xl); }
  .formular { grid-template-columns: minmax(0, 1fr); }
  .wahl__liste li { flex-wrap: wrap; gap: 2px 12px; }
  .module__raster { grid-template-columns: minmax(0, 1fr); }
  .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Der Start fuellt eine Bildschirmhoehe. Auf kurzen Laptops darf der Inhalt
   atmen, statt von einer festen Hoehe abgeschnitten zu werden. */
@media (max-height: 760px) {
  .hero { min-height: auto; padding-top: calc(var(--kopfhoehe) + 32px); padding-bottom: 48px; }
}

/* Trefferflaechen: am Zeigergeraet 24 px, auf Touch 44 px. */
/* Frueher bekamen hier alle Elemente dasselbe Polster von 18 px zur Seite.
   Das ruckte das Logo aus der Flucht, zog DE und FR auseinander und
   rueckte die Fusslinks ein. Die Trefferflaeche braucht Hoehe; zur Seite
   nur dort Polster, wo die Flaeche sichtbar ist (Pillen, Menueeintraege). */
@media (max-width: 1100px), (pointer: coarse) {
  .nav__links a, .sprache a, .fuss a, .nav__logo, .wahl__aendern, .rolle { min-height: 44px; }
  .nav__links a { padding: 11px 10px; }
  .rolle { padding: 11px 18px; }
  .sprache a { min-width: 44px; padding: 11px 6px; }
  .nav__logo { display: flex; align-items: center; }
  .btn--klein { min-height: 44px; }
}

@media (max-width: 520px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .nav__ende .btn { display: none; }
  .schub { min-height: 18rem; }
  /* Die Versaetze standen in Prozent der Stapelhoehe. Auf schmalen Breiten
     brechen die Titel der Blaetter auf zwei Zeilen, die Karten werden hoeher,
     und das vordere Blatt deckte den Titel des hinteren mitten im Wort ab.
     Feste Versaetze sind hier verlaesslicher: sie messen das, was sichtbar
     bleiben muss, naemlich Beschriftung und Titel. */
  .blatt { width: 82%; padding: 16px 18px; }
}

/* ========================================================== Rücksicht */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-auf] { opacity: 1 !important; transform: none !important; }
  .strich { transform: scaleX(1) !important; }
  .blatt { animation: none; }
}

@media print {
  .kopf, .fortschritt, .menue, .hero__deko, .demo__deko { display: none; }
  body { background: #fff; color: #000; }
}

/* ========================================================== Nebenseiten
   Impressum, Datenschutz, französische Fassung. Ein schmaler Textblock,
   dieselben Token, kein eigenes Aussehen. */

.neben { padding-top: clamp(48px, 6vw, 88px); }
.neben .container { max-width: 760px; }
.neben h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 26px; }
.neben h2 { font-size: clamp(20px, 2vw, 25px); margin: 40px 0 12px; }
.neben p { margin-top: 14px; font-size: 16.5px; line-height: 1.68; color: var(--auf-papier-leise); }
.neben__lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.58; color: var(--auf-papier-leise); }
/* Inhalt einer langen Rechtsseite. Zweispaltig, damit die acht Punkte auf
   einen Blick zu ueberschauen sind statt als lange Liste zu laufen. Die
   Nummern kommen aus dem <ol>, nicht aus dem Text. */
.neben__inhalt {
  margin-top: 30px; padding: 22px clamp(18px, 3vw, 28px);
  border-radius: var(--r-l); background: var(--papier-tief);
}
.neben__inhalt ol {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px; margin: 0; padding-left: 20px;
}
.neben__inhalt li { font-size: 15px; line-height: 1.5; color: var(--auf-papier-still); }
.neben__inhalt a { color: var(--auf-papier); text-decoration: none; border-bottom: 1px solid var(--papier-linie); }
.neben__inhalt a:hover { color: var(--akzent); border-bottom-color: var(--akzent); }
@media (max-width: 560px) { .neben__inhalt ol { grid-template-columns: minmax(0, 1fr); } }
.neben__liste {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0;
  margin-top: 28px; border-top: 1px solid var(--papier-linie);
}
.neben__liste dt {
  padding: 16px 0; border-bottom: 1px solid var(--papier-linie);
  font-size: 14px; font-weight: 600; color: var(--auf-papier);
}
.neben__liste dd {
  margin: 0; padding: 16px 0; border-bottom: 1px solid var(--papier-linie);
  font-size: 15.5px; color: var(--auf-papier-leise);
}
@media (max-width: 560px) {
  .neben__liste { grid-template-columns: minmax(0, 1fr); }
  .neben__liste dt { border-bottom: 0; padding-bottom: 2px; }
}

/* =========================================================================
   Browserflächen
   Was der Browser von sich aus zeichnet: Knopfgrund, Fokusring, Auswahlfeld.
   Alles andere in dieser Datei ist gestaltet; diese Flächen muss man dem
   Browser ausdrücklich abnehmen, sonst zeichnet er seine eigene Fassung.
   ========================================================================= */

/* Safari und Firefox zeichnen <button> mit nativem Erscheinungsbild, solange
   appearance nicht zurueckgesetzt ist. Bei einem Knopf mit eigenem Grund
   bleibt darunter der Systemknopf stehen und schaut als leicht eckiger
   Kasten hervor. In Chromium passiert das nicht, darum war der Fehler in
   den Messungen unsichtbar. Das ist die Ursache des Rahmens hinter dem Knopf. */
button,
.btn, .feld, .modul, .gegenschalter__btn, .burger, .belegknopf, .satz {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
/* Beim Klick mit der Maus setzen beide zusaetzlich einen eigenen Ring. Der
   Fokusring der Tastatur bleibt davon unberuehrt: :focus-visible steht nur
   bei Tastaturfokus. */
button:focus:not(:focus-visible),
button:active,
.feld:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.modul:focus:not(:focus-visible) { outline: none; }

/* Der Fokusring folgt der Form des Elements. Eine pauschale Radiusangabe
   ergibt bei runden Knoepfen einen eckigen Ring um eine runde Form. */
.feld:focus-visible, .btn:focus-visible, .modul:focus-visible { border-radius: var(--r-pille); }

/* --- Auswahlfelder ---------------------------------------------------------
   Gestalten laesst sich das geschlossene Feld: eigener Pfeil statt des
   System-Dreiecks, Innenabstand, Fokus. Die aufgeklappte Liste zeichnet das
   Betriebssystem, sie ist per CSS nicht erreichbar. Das ist Absicht der
   Browser und auf dem Telefon ein Vorteil: iOS und Android zeigen dort ein
   Rad beziehungsweise ein Vollbildmenue, das sich besser bedienen laesst als
   jeder Nachbau. Ein eigenes Menue waere nur mit ARIA-Listbox, vollstaendiger
   Tastaturfuehrung und Touch-Logik korrekt, also viel Flaeche fuer Fehler. */
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%230a6b5e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
select:hover { border-color: rgba(10, 107, 94, 0.45); }
/* Auf dunklem Grund braucht der Pfeil die helle Fassung. */
.formular select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%234be79a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
/* Die Liste selbst: wenigstens Schriftgroesse und Farbe mitgeben, soweit die
   Browser das durchreichen. */
select option { font-size: 15px; color: var(--auf-papier); background: var(--karte); }

/* ========================================================= 1b. Hero-Buehne

   Seit 2026-09-23: Der Verlauf bleibt aussen, die Schweiz ist hell gefuellt,
   Text und Beispiel-Animation stehen im Landesinneren. Die Umrisslinie ist
   dieselbe wie in der Karten-Sektion (Pfad aus dem Markup, keine eigene
   Grafik). Alle Groessen haengen an der Kartenbreite (cqw), damit der Inhalt
   mit der Karte schrumpft und nie ueber die Grenze laeuft; die Positionen
   sind aus dem Grenzpfad berechnet, nicht geschaetzt. Wer Text laenger
   macht, muss nachmessen -- der Textbereich ist zu 96 Prozent belegt. */

/* Rueckfall unter 1200 px: Schweiz als helles Zeichen ueber dem Text, Text
   wie bisher hell auf dunkel. Die Animation steht auch hier auf der Karte,
   an derselben Stelle wie am Desktop -- nur so klein wie die Karte. */
.land {
  position: relative; width: min(100%, var(--breite, 1180px)); margin-inline: auto;
  padding-inline: var(--rand, 20px); display: flex; flex-direction: column;
}
.land__karte {
  order: -1; position: relative; container-type: inline-size;
  width: min(100%, 520px); aspect-ratio: 1000 / 639;
  margin: 0 auto clamp(28px, 6vw, 44px);
}
.land__form { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.land__flaeche { fill: var(--papier); opacity: 0.14; }
.land__rand { fill: none; stroke: var(--mint-hell); stroke-opacity: 0.55; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.land__inhalt { display: grid; }

/* Animation: rechts auf der Karte, darf oben rechts ueber die Grenze ragen.
   Alle Masse in cqw der Karte -- am Desktop wie am Handy dieselbe Stelle und
   dieselben Proportionen.
   Kontrast nachgerechnet fuer den schlechtesten Fall (Panel ueber der
   hellen Fuellung, Deckkraft 0.70): Antwort 5.4, Nebenschrift 0.92 bei
   4.9, Quelle in Mint-hell 4.7. Unter 0.70 faellt die Schrift unter 4.5
   -- transparenter geht nur mit groesserer Schrift. */
.land .mockup {
  position: absolute; left: 60%; top: 43.5%; width: 30.5%; translate: 0 -50%;
  --auf-ink-leise: rgba(238, 245, 241, 0.92);
}
.land .quelle b { color: var(--mint-hell); }
/* Petrol statt Ink (2026-09-23): Ink mit 0.70 Deckkraft mischte sich ueber
   der weissen Landflaeche zu Schiefergrau (Saettigung 17 %), dem einzigen
   grauen Ton der Seite. #034a47 bei 0.86 ergibt #24625f, 177 Grad,
   Saettigung 45 %. Kontrast schlechtester Fall: Antwort 6.3, Frage 5.6,
   Quelle 5.5. Unter 0.86 faellt die Quelle unter 4.5. */
.land .mockup__flaeche {
  background: linear-gradient(158deg, rgba(3, 74, 71, 0.88), rgba(3, 74, 71, 0.86));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: rgba(238, 245, 241, 0.22); border-radius: 1.4cqw;
}
.land .mockup__app { padding: 1.5cqw 1.6cqw; }
.land .mockup__tabs { margin-bottom: 1.1cqw; gap: 0.4cqw; }
.land .mockup__tabs span { font-size: 0.82cqw; padding: 0.35cqw 0.8cqw; }
.land .beleg__titel { font-size: 0.78cqw; margin-bottom: 0.9cqw; }
.land .schub { min-height: 0; }
.land .lage { gap: 0.8cqw; }
.land .lage .frage { font-size: 0.98cqw; }
.land .lage .antwort { font-size: 1.12cqw; line-height: 1.5; }
.land .lage .quelle { margin-top: 0.7cqw; }
.land .quelle { font-size: 0.88cqw; gap: 0.4cqw 1cqw; }
.land .quelle b { padding-bottom: 0.2cqw; }
.land .strich { height: 0.15cqw; }
.land .mockup__fuss { font-size: 0.82cqw; margin-top: 1.1cqw; padding-top: 0.8cqw; gap: 0.8cqw; }
.land .mockup__marke { padding: 0.3cqw 0.75cqw; gap: 0.4cqw; }
.land .mockup__marke svg { width: 0.85cqw; height: 0.85cqw; }

@media (min-width: 1200px) {
  .hero--land { padding-top: calc(var(--kopfhoehe) + 20px); padding-bottom: 28px; }
  .land {
    display: block; container-type: inline-size; padding: 0;
    /* Breite aus der sichtbaren Hoehe, damit die Karte auf niedrigen
       Laptop-Fenstern ganz sichtbar bleibt (1536x730 schnitt vorher 98 px
       ab, 1366x633 195 px). Alles in der Karte ist in cqw gesetzt und
       schrumpft mit, es verschiebt sich also nichts. Untergrenze 900 px:
       darunter faellt der Lauftext unter ca. 12 px; auf noch niedrigeren
       Fenstern wird unten wieder etwas abgeschnitten. (2026-09-25) */
    width: min(1350px, 94vw, max((100svh - var(--kopfhoehe) - 48px) * 1.565, 900px));
    aspect-ratio: 1000 / 639;
  }
  .land__karte { position: absolute; inset: 0; width: 100%; margin: 0; aspect-ratio: auto; }
  .land__form { filter: drop-shadow(0 24px 48px rgba(3, 24, 28, 0.35)); }
  .land__flaeche { opacity: 1; }
  .land__rand { stroke-opacity: 0.9; stroke-width: 2; }

  /* Die Textebene liegt ueber der ganzen Karte, faengt aber keine Klicks ab
     ausser dort, wo wirklich Text und Buttons stehen. */
  .land__inhalt { position: absolute; inset: 0; display: block; z-index: 1; pointer-events: none; }

  /* Text: Innenbereich x 245-585 (von 1000 x 639), 73 Einheiten tiefer als
     der rein rechteckige Bereich. Gemessen an den echten Zeilen- und
     Buttonumrissen: dort ist der kleinste Abstand zur Grenze am groessten
     (52 statt 18 Einheiten) -- die schmalen Buttons duerfen tiefer als die
     breiten Textzeilen, weil die Grenze unten links tiefer liegt als bei
     Domodossola. */
  .land .hero__wort {
    --fokus: var(--akzent); pointer-events: auto;
    position: absolute; left: 24.5%; top: 34.11%; width: 34%; height: 42.57%;
    max-width: none; display: flex; flex-direction: column; justify-content: center;
  }
  .land .eyebrow { font-size: 0.9cqw; margin-bottom: 1.1cqw; color: var(--akzent-tief); }
  .land h1 { font-size: 3.3cqw; line-height: 1.04; margin-bottom: 1.2cqw; color: var(--auf-papier); }
  .land h1 .leuchte { color: var(--akzent); }
  .land .hero__lead { font-size: 1.36cqw; line-height: 1.45; color: var(--auf-papier); }
  .land .hero__actions { flex-direction: column; align-items: flex-start; gap: 0.7cqw; margin-top: 1.8cqw; }
  .land .btn { min-height: 3.6cqw; padding: 0.85cqw 1.6cqw; font-size: 1.2cqw; gap: 0.6cqw; }
  .land .btn svg { width: 1.15cqw; height: 1.15cqw; }
  .land .btn--mint { background: var(--akzent); color: var(--auf-ink); }
  .land .btn--mint:hover { background: var(--akzent-tief); color: var(--auf-ink); }
  .land .btn--glas { background: transparent; color: var(--auf-papier); border: 1.5px solid rgba(11, 47, 54, 0.45); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Verlauf nach Referenzbild (aus dem Bild gefittet: 170 Grad, neun Stopps,
   mittlere Abweichung 5.8 von 255). Die Navigation bleibt oben transparent
   und liegt auf diesem Verlauf -- dadurch ist sie automatisch Ton in Ton. */
.hero--land {
  background: var(--verlauf-hero);
}
@media (min-width: 1200px) {
  .hero--land .hero__deko::before { display: none; }
}
/* Gescrollter Kopf in der Anfangsfarbe des Hero-Verlaufs, damit er beim
   ersten Scrollen Ton in Ton ueber dem Verlauf steht. Mit dem alten Ink-Ton
   (#062a31) entstand ueber dem neuen, blaueren Verlauf eine sichtbare Kante. */
/* Gescrollt sieht die Leiste genau so aus wie beim Laden (Nutzerentscheid
   2026-09-23): derselbe Schleier (0.42 oben, bei 72 px noch 0.19, siehe
   .kopf::before) ueber dem Anfang des Hero-Verlaufs (#04354c, bei 72 px
   #043a48). Deckend, ohne Trennlinie und ohne Weichzeichner, damit der
   Ton auf hellen Sektionen nicht aufhellt. */
.kopf.ist-gescrollt {
  /* Der Verlauf in Hero-Groesse (eine Bildschirmhoehe), oben angesetzt:
     die Leiste zeigt damit genau den Streifen, den sie beim Laden zeigt,
     links dunkel, nach rechts gruener. Ein einfarbiger Balken in #04354c
     las sich als Blau (Nutzerfeedback 2026-09-23). */
  background:
    linear-gradient(to bottom, rgba(6, 42, 49, 0.42), rgba(6, 42, 49, 0.19)) 0 0 / 100% 100% no-repeat,
    var(--verlauf-hero) 0 0 / 100% 100svh no-repeat;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}

/* ============================================================ Handy

   Nutzerwunsch 2026-09-23: auf dem Handy kompakter.
   - Quellenstapel (Belegspur) kleiner: zoom statt transform, damit auch der
     Platz schrumpft, den er in der Seite belegt.
   - Module in zwei Spalten ohne Beschreibung, damit mehrere auf einen
     Bildschirm passen. Titel und Zielgruppe bleiben; der Knopf "Dazunehmen"
     steht unten, damit er in jeder Kachel auf gleicher Hoehe sitzt. */
@media (max-width: 760px) {
  .quellenstapel { zoom: 0.72; }

  .module__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .modul { padding: 14px 14px 12px; }
  .modul__kopf { display: contents; }
  /* Lange Einwortnamen ("Dokumentenuebersicht") liefen in der schmalen
     Kachel ueber den Rand: Silbentrennung nach Dokumentsprache erlauben. */
  .modul__kopf b { font-size: 15.5px; line-height: 1.25; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; max-width: 100%; }
  .modul__art { margin: 6px 0 12px; font-size: 12.5px; line-height: 1.35; }
  .modul__stand { order: 3; margin-top: auto; }
  .modul__text { display: none; }
}

/* ============================================================ Responsive
   Stand 2026-09-23. Ziel: auf dem Handy traegt jede Sektion ihre Aussage in
   etwa einer Bildschirmhoehe, statt ueber zwei bis drei zu laufen. Vorher
   brauchte die Seite auf 375 x 812 gut 15 Bildschirme, Module allein 2.7,
   Team 2.5, der Fuss eine volle Hoehe.

   Drei Mittel, in dieser Reihenfolge:
   1. Rhythmus: weniger Polster zwischen und in den Sektionen.
   2. Nebeneinander statt untereinander, wo die Breite reicht (Kennzahl
      neben Text, Karte neben Titel, drei Portraits pro Zeile).
   3. Filterleisten laufen in einer Zeile seitlich, statt in vier Zeilen
      umzubrechen. Ein angeschnittener letzter Schalter zeigt, dass es
      weitergeht.
   Inhalt faellt dabei keiner weg, ausser Erlaeuterungen, die die
   Ueberschrift schon sagt (Grundmodul-Details). */

/* --- Hero auf dem Tablet quer: Text links, Karte rechts ----------------
   Zwischen 900 und 1199 stand die Karte ueber dem Text, die Knoepfe lagen
   bei 1024 x 768 unter dem Falz. */
@media (min-width: 901px) and (max-width: 1199px) and (orientation: landscape) {
  .land { flex-direction: row; align-items: center; gap: clamp(28px, 4vw, 56px); padding-inline: clamp(24px, 4vw, 40px); }
  .land__inhalt { flex: 1 1 44%; min-width: 0; }
  .land__karte { order: 2; flex: 1 1 56%; width: auto; margin: 0; }
  .hero h1 { font-size: clamp(34px, 4vw, 46px); }
}

/* --- Hero auf dem Tablet hoch: Karte gross ueber dem Text -------------
   Auf iPads im Hochformat stand die Karte mit 520 px mittig in viel
   Verlauf (834 x 1210: je rund 250 px leer ueber der Karte und unter den
   Knoepfen). Die Mini-Animation ist in cqw der Karte gesetzt und waechst
   mit. Das 12.9"-iPad hoch (1024 x 1366) bekommt dieselbe gestapelte
   Ansicht statt Text neben kleiner Karte. (2026-09-25) */
@media (min-width: 701px) and (max-width: 1199px) and (orientation: portrait) {
  .land__karte { width: min(100%, 820px); }
}

/* Kein Doppeltipp-Zoom auf Bedienelementen: der Browser wartet sonst
   300 ms, ob ein zweiter Tipp kommt. Zoomen mit zwei Fingern bleibt. */
a, button, input, select, textarea, label { touch-action: manipulation; }

/* --- Ausklappmenue: auf dem Handy quer passt es sonst nicht --------------- */
.menue.ist-offen { max-height: calc(100svh - var(--kopfhoehe)); overflow-y: auto; overscroll-behavior: contain; }

/* --- Seitlich laufende Filterleiste (Rollen, Team) --------------------- */
@media (max-width: 760px) {
  .rollen__wahl, .team-sektion .felder {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
    /* Bis an den Bildschirmrand laufen lassen, sonst endet die Leiste an
       der Satzkante und niemand sieht den angeschnittenen Schalter. */
    margin-inline: calc(-1 * clamp(16px, 4vw, 40px));
    /* Oben und unten 6 px: overflow-x schneidet sonst den Fokusring ab
       (2 px Linie plus 3 px Versatz). */
    padding: 6px clamp(16px, 4vw, 40px);
    margin-block: -4px;
    scroll-padding-inline: clamp(16px, 4vw, 40px);
  }
  .rollen__wahl::-webkit-scrollbar, .felder::-webkit-scrollbar { display: none; }
  .rolle, .feld { flex: none; scroll-snap-align: start; white-space: nowrap; }
}

/* --- Handy ------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Rhythmus */
  .sektion { padding: 56px 0; }
  .alltag { padding-bottom: 0; }
  .sektion__kopf, .sektion__kopf--schmal { margin-bottom: 24px; }
  .lead { margin-top: 12px; font-size: 16.5px; line-height: 1.55; }
  .eyebrow { margin-bottom: 12px; }

  /* Alltag: Kennzahl links, Titel und Satz rechts. Untereinander stand
     jede Zahl als eigene Zeile ueber ihrem Text, drei Mal. */
  .alltag__pains { gap: 18px; margin-top: 20px; }
  .pain { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); column-gap: 14px; padding-top: 14px; }
  .pain__zahl { grid-row: 1 / span 2; margin: 0; font-size: 34px; }
  .pain__zahl span { display: block; margin: 4px 0 0; font-size: 13px; }
  .pain__titel { margin: 0 0 4px; font-size: 16.5px; }
  .pain__text { font-size: 14.5px; line-height: 1.5; }
  .alltag__heikel { margin-top: 22px; font-size: 15.5px; line-height: 1.55; }
  .alltag__satzung { margin-top: 28px; padding-top: 18px; font-size: 24px; }
  .bildband__streifen { margin-top: 32px; }
  .bildband__streifen img { height: 150px; }

  /* Gegenprobe: der Schalter traegt den Vergleich, die Flaechen werden
     knapper. */
  .gegenschalter { margin-bottom: 12px; }
  /* Drei Schalter auf 340 px: mit weniger Polster bleibt jede Beschriftung
     einzeilig, zweizeilige Tabs lesen sich wie Text statt wie Schalter. */
  .gegenschalter__btn { padding: 10px 6px; font-size: 13.5px; line-height: 1.2; }
  .seite { padding: 20px; }
  .seite__lead { margin-top: 8px; font-size: 15px; }
  .seite__frage { margin-bottom: 10px; }
  .seite__text { font-size: 15.5px; line-height: 1.55; }
  .urteil { margin-top: 14px; }
  .einwand { gap: 16px; margin-top: 16px; padding: 22px 20px; }
  .einwand__frage p { margin-top: 10px; font-size: 15px; }
  .einwand__argument { gap: 12px; }
  .einwand__argument p { font-size: 15px; line-height: 1.55; }

  /* Belegspur: Stapel enger gefuehrt. Sichtbar bleiben muessen nur
     Beschriftung und Titel der hinteren Blaetter. */
  .spur__gitter { gap: 16px; }
  .quellenstapel { zoom: 0.66; min-height: 392px; }
  .blatt--2 { top: 78px; }
  .blatt--1 { top: 158px; }
  .aufdecker { padding: 22px 20px; }
  .aufdecker__antwort { font-size: 18px; }
  .belege { margin-top: 18px; gap: 8px; }
  .original__text { margin-top: 16px; padding: 18px; font-size: 15px; }

  /* Module: Grundmodul ohne Einzelzeilen. Titel und Satz nennen Quellen,
     Rollen und Beleg schon; darunter stehen die drei als Marken. */
  .kachel--grund .kachel__kern { gap: 14px; padding: 22px 20px; }
  .kachel--grund .marke { margin-bottom: 12px; }
  .kachel--grund .kachel__wort > p { margin-top: 10px; font-size: 15px; line-height: 1.55; }
  .kachel--grund dl { display: flex; flex-wrap: wrap; gap: 6px; }
  .kachel--grund dt {
    margin: 0; padding: 5px 12px; border-radius: var(--r-pille);
    background: rgba(238, 245, 241, 0.08); font-size: 13px;
  }
  .kachel--grund dd { display: none; }
  .kachel--grund .unten { margin-top: 0; padding-top: 14px; font-size: 14px; }
  .modul { padding: 12px 12px 10px; }
  .modul__art { margin: 4px 0 10px; }
  .rollen { margin: 18px 0 14px; }
  .rollen__wahl { margin-top: 10px; }
  .rollen__satz { margin-top: 8px; }
  .modulzeile { gap: 14px; margin-top: 18px; padding-top: 18px; }
  .modulzeile__satz { font-size: 14.5px; line-height: 1.5; }
  .modulzeile .btn { justify-self: stretch; }

  /* Schweiz: Karte klein neben dem Titel. Allein stand sie als
     220 px hoher Block ueber einer Ueberschrift, die ihr erst die Bedeutung
     gibt. */
  .schweiz__inner { gap: 0; }
  .schweiz__bild { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: center; gap: 18px; }
  .schweiz__karte { max-width: none; }
  .schweiz__bild h2 { max-width: none; font-size: 25px; line-height: 1.12; }
  .schutzmarke { margin-top: 22px; padding: 14px 16px; font-size: 14px; }
  .schutzmarke svg { width: 26px; height: 26px; }
  .schweiz__lead { margin-top: 18px; font-size: 16px; }
  .schweiz__punkte { margin-top: 20px; padding-top: 18px; }
  .schweiz__punkte li { padding-bottom: 14px; margin-bottom: 14px; }
  .schweiz__punkte b { margin-bottom: 3px; font-size: 15.5px; }
  .schweiz__punkte span { font-size: 14px; line-height: 1.5; }
  .schweiz__fuss { margin-top: 16px; font-size: 13.5px; }

  /* Team: drei Portraits pro Zeile, neun Menschen in drei Zeilen statt
     fuenf. Die Rolle bleibt, kleiner gesetzt. */
  .team__kopf { margin-bottom: 18px; }
  .team__satz { margin-top: 10px; font-size: 14px; }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; margin-top: 18px; }
  .team__bild { border-radius: var(--r-m); }
  .team b { margin-top: 8px; font-size: 13.5px; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  .team span { margin-top: 3px; font-size: 12px; line-height: 1.35; hyphens: auto; -webkit-hyphens: auto; }
  .team > div.ist-passend { transform: none; }

  /* Demo */
  .demo__inner { gap: 24px; }
  .demo__wort > p { margin-top: 14px; font-size: 16px; }
  .formular { gap: 12px; padding: 18px; }
  .wahl { padding: 14px 16px; }
  .formular__fuss { padding-top: 16px; }
  .formular__fuss .btn { flex: 1 1 100%; }

  /* Fuss: Seitenlinks laufen als Zeile, Kontakt und Rechtliches daneben.
     Vorher sechs Links untereinander, je 44 px plus Abstand, und der Fuss
     war so hoch wie der Bildschirm. */
  .fuss { padding: 40px 0 24px; }
  .fuss__grid { gap: 22px; }
  .fuss__marke { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .fuss__marke img { width: 104px; margin: 0; }
  .fuss__marke p { font-size: 13px; text-align: right; }
  .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .fuss__spalte { gap: 0; }
  .fuss__spalte:first-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; column-gap: 20px; }
  .fuss__spalte:first-child b { flex: 1 0 100%; }
  .fuss__spalte b { margin-bottom: 0; }
  .fuss__unten { margin-top: 20px; padding-top: 14px; }
}

/* --- Hero-Animation auf dem Handy -------------------------------------
   Als Miniatur im Desktop-Massstab stand die Antwort in 3.6 px Schrift:
   Bewegung ohne lesbaren Inhalt. Hier doppelt so breit und mit rund 9 px
   Antwortschrift. Tab-Leiste und Fusszeile fallen weg, sie waeren in
   dieser Groesse nur Kruemel und kosten Hoehe.
   Deckkraft wie am Desktop (0.72 bis 0.70): seit die Landflaeche auch hier
   hell gefuellt ist, faellt die Schrift darunter unter 4.5 (bei 0.60
   Frage 3.65, Quelle 3.48). */
@media (max-width: 760px) {
  .land .mockup { left: 37%; width: 61%; top: 52%; }
  .land .mockup__flaeche {
    background: linear-gradient(158deg, rgba(3, 74, 71, 0.88), rgba(3, 74, 71, 0.86));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-color: rgba(238, 245, 241, 0.26); border-radius: 3cqw;
    box-shadow: 0 12px 32px rgba(3, 20, 24, 0.30);
  }
  .land .mockup__app { padding: 3.4cqw 3.6cqw; }
  .land .mockup__tabs, .land .mockup__fuss { display: none; }
  .land .beleg__titel { font-size: 1.95cqw; margin-bottom: 1.8cqw; }
  .land .lage { gap: 1.6cqw; }
  .land .lage .frage { font-size: 2.45cqw; line-height: 1.35; }
  .land .lage .antwort { font-size: 2.85cqw; line-height: 1.4; }
  .land .lage .quelle { margin-top: 1.2cqw; }
  .land .quelle { font-size: 2.2cqw; gap: 0.6cqw 2cqw; }
  .land .quelle b { padding-bottom: 0.5cqw; }
  .land .strich { height: 0.45cqw; }
}

/* Schmale Handys (bis 380 px): Kennzahlspalte und Karte etwas knapper. */
@media (max-width: 380px) {
  .pain { grid-template-columns: 5.4rem minmax(0, 1fr); }
  .schweiz__bild h2 { font-size: 22px; }
  .team { gap: 16px 8px; }
}

/* --- Hero unter 1200 px: Schweiz wieder hell gefuellt ------------------
   Nutzerwunsch 2026-09-23: auf Handy und Tablet dieselbe helle Buehne wie am
   Desktop, statt der 14-Prozent-Fuellung. Der Text steht hier neben oder
   unter der Karte auf dem Verlauf und bleibt hell. */
@media (max-width: 1199px) {
  .land__form { filter: drop-shadow(0 14px 30px rgba(3, 24, 28, 0.32)); }
  .land__flaeche { opacity: 1; }
  .land__rand { stroke-opacity: 0.9; stroke-width: 1.5; }
}

/* --- Kopf und Menue auf Handy und Tablet (bis 1100 px) -----------------
   Nutzerfeedback 2026-09-23: das Menue stand in #04354c und las sich als
   Blau, und ganz oben geoeffnet schob es den Hero nach unten, sodass hinter
   dem durchsichtigen Kopf der helle Seitengrund lag (grauer Kopf).
   Jetzt: Leiste gescrollt, Leiste bei offenem Menue und Menue selbst in
   einem Gruen, #073b3a, der Navigationsfarbe der App-Vorlage
   (Civara_Webdummy.html, --nav). Das Menue liegt ueber der Seite statt sie
   zu verschieben. Sprache steht nur noch im Kopf, nicht doppelt im Menue.
   Am Desktop gilt weiter der Verlauf aus dem Startscreen. */
@media (max-width: 1100px) {
  .kopf.ist-gescrollt, .kopf.hat-menue {
    background: #073b3a;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom-color: transparent;
  }
  .kopf.hat-menue::before { opacity: 0; }
  .menue {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #073b3a; border-top: 1px solid var(--ink-linie);
    box-shadow: 0 24px 48px rgba(3, 20, 24, 0.35);
  }
  .menue .sprache { display: none; }
  .menue__ende .btn { flex: 1 1 auto; }
}

/* ============================================================ Abnahme v21
   Befunde aus dem Audit vom 23. September 2026 (web-interface-guidelines,
   impeccable critique und typeset, review-animations, Pre-Flight). */

/* Ebenen, von unten nach oben: Deko -1, Inhalt 1 bis 2, Kopf 50,
   Fortschritt 60, Skip-Link 100. Neue Ebenen hier einordnen. */

/* Hover-Bewegung nur mit Maus. Auf Touch blieb eine angetippte Kachel oder
   ein Knopf angehoben stehen, bis man woanders hintippte. */
@media (hover: none) {
  .btn:hover, .feld:hover, .belegknopf:hover { transform: none; }
}

/* Hero unter 1200 px: Lead und Glasknopf lagen auf dem hellen Ende des
   Verlaufs bei 3.7 bis 4.4. Lead voll deckend, Glasknopf mit dunklem Grund
   statt hellem Schleier. */
@media (max-width: 1199px) {
  .hero .hero__lead { color: var(--auf-ink); }
  .hero .btn--glas { background: rgba(3, 24, 28, 0.34); border-color: rgba(238, 245, 241, 0.34); }
  .hero .btn--glas:hover { background: rgba(3, 24, 28, 0.48); }
}

/* Teamfilter: gedaempft wird das Bild, nicht der Text. Mit Deckkraft 0.3
   auf der ganzen Karte fielen Name und Rolle auf 1.8 und 1.5. */
.team > div.ist-leise { opacity: 1; filter: none; }
.team > div.ist-leise .team__bild { opacity: 0.32; filter: saturate(0.4); }
.team > div.ist-leise b { color: var(--auf-papier-still); }
.team .team__bild { transition: opacity 0.3s ease; }

/* Formularfelder: zusaetzlich zum Randwechsel ein Fokusring, der Wechsel
   allein mass 1.65:1. */
.formular input:focus, .formular select:focus, .formular textarea:focus {
  outline: 2px solid var(--mint); outline-offset: 2px;
}

/* Trefferflaechen: Fusslinks und Links auf den Rechtsseiten. */
.fuss__spalte a { min-width: 44px; }
@media (pointer: coarse) {
  .neben__inhalt a, .neben__liste a { display: inline-flex; align-items: center; min-height: 44px; }
}