/* Mentoki — Grundlage: Farben, Typografie, Raster, Bausteine.
 *
 * Leitidee: Die Seite ist weiss und still, und alles Farbige steckt in einem
 * einzigen Objekt — dem gefalteten Papier, das beim Scrollen durch sechs
 * Formen geht. Das ist dieselbe Aufteilung, mit der Apple seine Produktseiten
 * baut: Die Flaeche haelt sich vollstaendig zurueck, damit ein Gegenstand
 * darin wirken kann.
 *
 * Daraus folgt die Typografie: EINE Grotesk fuer alles, sehr gross, eng
 * laufend, in einem fast schwarzen Grau. Vorher standen hier zwei Familien —
 * Fraunces als warme Serife fuer die Ueberschriften, IBM Plex Sans fuer den
 * Fliesstext. Die Paarung war stimmig, aber redaktionell: Sie erzaehlte
 * „Zeitschrift", nicht „Geraet". Inter ist die naechste frei lizenzierte
 * Verwandte von Apples SF Pro und traegt beide Rollen allein.
 *
 * ── Kontrast, und warum das hier ausnahmsweise wichtig ist ──
 * Auf weissem Grund traegt von der Markenrampe nur das dunkle Ende:
 *
 *     Himbeerrot #B2244B auf Weiss   6,9:1   Text erlaubt
 *     Petrol     #1F6F78 auf Weiss   5,3:1   Text erlaubt
 *     Orange     #FF7A2F auf Weiss   2,6:1   NUR grosse Headlines und Flaechen
 *     Amber      #FFD152 auf Weiss   1,3:1   NUR als Papierfarbe, nie als Schrift
 *
 * Wer Orange oder Amber fuer Fliesstext verwendet, macht die Seite unlesbar.
 * Beide kommen deshalb ausschliesslich im Papier vor, nie als Schriftfarbe.
 */

/* ═══ Farbwerte und Masse ═══════════════════════════════════════════════ */

:root {
  /* Markenrampe, unveraendert aus mentoki-logo-amber.svg uebernommen */
  --himbeer:  #B2244B;
  --orange:   #FF7A2F;
  --amber:    #FFD152;
  --punkt:    #E01B4C;
  /* Kuehler Gegenpol. Er ist der Grund, warum die warme Rampe freundlich
     wirkt und nicht wie Feuer — im Papierschnitt steckt er als kleiner
     Akzent, hier als Farbe fuer Verweise. */
  --petrol:   #1F6F78;

  /* Weiss, und zwar konsequent. Ein Papierfoto als Grund gab es hier frueher —
     es machte die Seite monoton, weil dann alles dieselbe Farbe hatte. Jetzt
     traegt der weisse Grund, und die Farbe sitzt konzentriert im Papier.

     Die Neutralen sind bewusst kuehl statt warmbraun wie zuvor: Ein warmer
     Grauton neben dem amberfarbenen Papier laesst beide schmutzig aussehen,
     weil sie in dieselbe Richtung ziehen. Kuehles Grau gibt dem Warmen erst
     seine Waerme. */
  --grund:        #FFFFFF;
  --grund-tief:   #F5F5F7;   /* die eine ruhige Absetzflaeche */
  --schrift:      #1D1D1F;
  --schrift-still:#6E6E73;   /* 5,3:1 auf --grund, also AA fuer Fliesstext */
  --linie:        rgb(0 0 0 / .10);

  /* Vom Drehbuch gesetzt (js/drehbuch.js). Die Werte hier sind der Zustand
     ohne JavaScript: eine ruhige, mittlere Schichtung. */
  --ton: .45;
  --i-himbeer: .30;
  --i-orange:  .55;
  --i-amber:   .35;
  /* Wie stark die Markenrampe im Grund durchscheinen darf: gar nicht.
     Zwei fruehere Staende sind daran gescheitert, dass Farbe in der FLAECHE
     lag — vollflaechige Bloecke sahen nach Praesentationsvorlage aus, ein
     Papierfoto machte die Seite monoton. Jetzt liegt die gesamte Marke im
     gefalteten Papier, und der Grund haelt sich vollstaendig heraus.
     Wer die Seite waermer haben will, dreht diesen einen Wert auf. */
  --farbwaesche: 0;
  /* Ohne JavaScript bleibt es bei 0 — dann traegt das SVG-Origami den Effekt
     und die Bildschicht bleibt unsichtbar. */
  --bild-deckkraft: 0;
  /* Seitenfortschritt 0..1 fuer die Haarlinie im Kopf. Ohne JavaScript bleibt
     sie bei 0 und damit unsichtbar — richtig, denn dann misst niemand mit. */
  --seite: 0;

  --bahn: 76rem;
  --bahn-text: 61.25rem;     /* 980 px — so breit laesst Apple Textspalten werden */
  --rand: clamp(1.25rem, 5vw, 4.5rem);
  --radius-knopf: 980px;

  --schnell: .18s;
  --ruhig: .6s;
  /* Apples Standardkurve. Sie startet weicher und laeuft ruhiger aus als die
     vorige — bei kurzen Wegen von 10 px ist das der ganze Unterschied
     zwischen „bewegt sich" und „gleitet". */
  --kurve: cubic-bezier(.25, .1, .25, 1);
}

/* ═══ Grundeinstellungen ════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  /* Anker nicht unter den festen Kopf schieben. Waechst mit der Leiste mit:
     3,75 rem Leiste plus 3 rem Luft. */
  scroll-padding-top: 6.75rem;
  -webkit-text-size-adjust: 100%;
}
/* Steht HIER und nicht nur in css/buehne.css: Die Rechtsseiten laden
   buehne.css nicht, und dort galt das weiche Scrollen bis hierher auch fuer
   Nutzer mit „Bewegung reduzieren" — etwa beim Sprung ueber die Sprungmarke. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.47;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: color-mix(in srgb, var(--amber) 55%, transparent); color: var(--schrift); }

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

/* Ueberschriften: dieselbe Familie, nur schwerer, groesser und enger.
   Das negative Sperren ist kein Schmuck — Inter laeuft bei grossen Graden
   sonst zu locker und die Zeile faellt auseinander. Je groesser, desto enger:
   deshalb sitzt bei h1 unten -.035em und bei h3 nur -.02em. */
h1, h2, h3 {
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
em { font-style: normal; color: var(--himbeer); }
a { color: inherit; }

/* ═══ Hilfsmittel ═══════════════════════════════════════════════════════ */

.nurlesbar {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprungmarke {
  position: fixed; top: .75rem; left: .75rem; z-index: 100;
  transform: translateY(-160%);
  padding: .7rem 1.1rem; border-radius: 3px;
  background: var(--himbeer); color: #fff;
  font-weight: 600; text-decoration: none;
  transition: transform var(--schnell) var(--kurve);
}
.sprungmarke:focus { transform: none; }

.bahn {
  width: 100%; max-width: var(--bahn);
  margin-inline: auto; padding-inline: var(--rand);
}
.bahn--mitte { text-align: center; max-width: var(--bahn-text); }

/* ═══ Kopfbereich ═══════════════════════════════════════════════════════ */

/* Die Kopfleiste steht IMMER.
   Vorher verschwand sie beim Runterscrollen und kam beim Hochscrollen zurueck.
   Das spart Flaeche, aber es bewegt sich dauernd etwas am oberen Rand, und
   genau das lenkt von einem Hintergrund ab, der sich ohnehin schon verwandelt.
   Apple laesst die Leiste stehen und macht sie stattdessen sehr flach. */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  /* 3 rem war Apples Masz und dafuer gemacht, dass die Leiste verschwindet.
     Sie steht hier aber dauerhaft und traegt die Marke — bei 48 px wirkte das
     eher wie eine Werkzeugleiste. 3,75 rem geben Logo und Navigation Luft,
     ohne dass die Leiste zum Balken wird. */
  height: 3.75rem;
  padding-inline: var(--rand);
  /* saturate vor dem blur ist der Grund, warum Apples Leisten lebendig wirken
     statt milchig: Was durchscheint, behaelt seine Farbigkeit. */
  background: rgb(255 255 255 / .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background var(--ruhig) var(--kurve),
              border-color var(--ruhig) var(--kurve);
}
.kopf[data-sichtbar] { border-bottom-color: var(--linie); }

/* Ganz oben schwebt die Leiste, statt als Balken aufzutreten. */
.kopf[data-oben] {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.kopf__marke { display: flex; text-decoration: none; }
/* Das Seitenverhaeltnis steht im img-Attribut (164 x 40, also 4,1:1) — bei
   1,75 rem Hoehe sind das 115 px Breite. width: auto laesst es der Datei. */
.kopf__logo { width: auto; height: 1.75rem; }

/* Die Fortschrittslinie unter der Kopfleiste.
 *
 * Hier wird die Markenrampe zum ersten Mal auf der Seite sichtbar — als 2 px
 * hohe Linie, nicht als Flaeche. --farbwaesche bleibt bei 0: Farbe in der
 * FLAECHE ist genau das, woran zwei fruehere Staende gescheitert sind. Zwei
 * Pixel sind das Gegenteil davon.
 *
 * Der Verlauf steht FEST ueber die volle Breite und wird nur freigegeben, nicht
 * gestaucht. Damit gehoert eine Farbe zu einer festen Seitenposition: Amber
 * heisst immer „Seitenende". Mit scaleX waere der Verlauf mitgewandert und die
 * Farbe haette nichts bedeutet.
 *
 * Absolut, damit sie nicht zum Flex-Kind der Leiste wird. Kein transition —
 * der Wert kommt pro Bild aus der rAF-Schleife und waere sonst doppelt
 * geglaettet (die Schleife glaettet bereits). */
.kopf__fortschritt {
  position: absolute; inset: auto 0 -1px; height: 2px;
  background: linear-gradient(90deg, var(--himbeer), var(--orange), var(--amber));
  clip-path: inset(0 calc((1 - var(--seite, 0)) * 100%) 0 0);
  pointer-events: none;
}

.kopf__nav {
  display: flex; align-items: center; gap: clamp(1.15rem, 2.1vw, 2.1rem);
  /* Mit der Schrift waechst der Abstand mit: Bei 15 px in gleichem Abstand
     wie zuvor 13 px waeren die Punkte als Block zusammengerueckt. */
  font-size: .9375rem; font-weight: 500;
  letter-spacing: -.005em;
}
.kopf__nav a {
  position: relative; color: var(--schrift-still);
  text-decoration: none; padding-block: .35rem;
  transition: color var(--schnell) var(--kurve);
}
.kopf__nav a::after {
  content: ''; position: absolute; inset: auto 0 0;
  height: 1px; background: var(--himbeer);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--ruhig) var(--kurve);
}
.kopf__nav a:hover, .kopf__nav a:focus-visible { color: var(--schrift); }
.kopf__nav a:hover::after { transform: none; }

/* „Kontakt" ist der einzige Menuepunkt, der zu einer Handlung fuehrt — und auf
   dem Telefon der einzige, der ueberhaupt steht. Deshalb eine Pille statt einer
   Haarlinie: Der erste Bildschirm zeigt damit einen Weg zur Anfrage, ohne dass
   der Hero eine Zeile hergeben muesste. Dort ist naemlich keine: Zwischen
   Untertitel und Scrollhinweis bleiben auf 1440 x 640 nur 26 px, auf 1024 x 768
   38 px — eine Zeile mit Abstand braucht rund 44. Weiss auf Himbeer steht bei
   6,9:1 (Tabelle im Kopf der Datei).

   Der Selektor traegt das `a` mit Absicht: `.kopf__nav a` setzt padding-block
   und Farbe mit (0,1,1) und wuerde die blosse Klasse schlagen. Die Farbe bleibt
   !important, weil `.kopf__nav a:hover` gleich stark ist wie diese Regel. */
.kopf__nav a.kopf__nav-betont {
  color: #fff !important; font-weight: 500;
  background: var(--himbeer);
  padding: .45rem .95rem; border-radius: var(--radius-knopf);
  transition: background var(--schnell) var(--kurve);
}
.kopf__nav a.kopf__nav-betont::after { display: none; }
.kopf__nav a.kopf__nav-betont:hover,
.kopf__nav a.kopf__nav-betont:focus-visible {
  background: color-mix(in srgb, var(--himbeer) 85%, #000);
}

/* Der laufende Abschnitt markiert sich selbst.
   Kostet kein JavaScript: js/hintergrund-buehne.js fuehrt den aktiven Akt
   ohnehin als html[data-akt='…'], und die Haarlinie liegt als ::after schon
   da — sie wartete bisher nur auf den Zeiger. Dieselbe Linie, dieselbe Kurve,
   ein anderer Ausloeser.

   Hero und Claim haben keinen Menuepunkt und tauchen deshalb nicht auf. */
html[data-akt='leistungen']   .kopf__nav a[href='#leistungen']::after,
html[data-akt='fachdidaktik'] .kopf__nav a[href='#fachdidaktik']::after,
html[data-akt='ueberuns']     .kopf__nav a[href='#ueberuns']::after {
  transform: none;
}
html[data-akt='leistungen']   .kopf__nav a[href='#leistungen'],
html[data-akt='fachdidaktik'] .kopf__nav a[href='#fachdidaktik'],
html[data-akt='ueberuns']     .kopf__nav a[href='#ueberuns'] {
  color: var(--schrift);
}
/* Die Kontakt-Pille markiert sich im eigenen Akt nicht noch einmal: Ein Knopf
   ist bereits die staerkste Hervorhebung, die die Leiste hat. */

@media (max-width: 40rem) {
  .kopf__nav a:not(.kopf__nav-betont) { display: none; }
}

/* ═══ Hero ══════════════════════════════════════════════════════════════ */

/* Der Hero steht mittig und in der UNTEREN Haelfte der Buehne.
   Beides haengt zusammen: Der Papierflieger schwebt im oberen Drittel, und
   linksbuendiger Text lief mitten durch ihn hindurch. Text ueber farbigem
   Papier ist nicht nur unschoen, er verliert seinen Kontrast. Die Seite
   bekommt dadurch die Aufteilung, die Apple fuer Produktseiten benutzt:
   Gegenstand oben, Aussage darunter. */
.hero {
  max-width: min(56rem, 100%);
  margin-inline: auto;
  text-align: center;
}

.hero__vorlauf {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--himbeer);
}
/* Die beiden Striche links und rechts sind entfallen — auf einer Seite, deren
   ganze Aussage in einem einzigen Gegenstand steckt, ist jede zusaetzliche
   Linie eine Behauptung zu viel. Die Regel bleibt stehen, damit das Markup
   nicht bricht. */
.hero__vorlauf span { display: none; }

.hero__titel {
  /* Die Groesse haengt an der Fensterbreite UND an der Fensterhoehe.
     Nur an der Breite war ein Fehler: Im Hero steht der Flieger ueber dem
     Text, und wie viel Platz darunter bleibt, entscheidet die Hoehe. Auf
     einem 1440 x 687 grossen Fenster — der Normalfall auf einem 900er
     Bildschirm mit Browserleisten — wuchs die Zeile auf 100 px, waehrend nur
     noch Platz fuer 76 war, und die Ueberschrift lief in den Schlagschatten.
     Bei 900 px Fensterhoehe aendert die Deckelung nichts (11vh = 99 px). */
  font-size: min(clamp(2.75rem, 1.2rem + 6.4vw, 6.25rem), 11vh);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.hero__zeile { display: block; }

/* Der Kontrast zwischen den Zeilen traegt die Aussage: „KI verstehen" steht
   noch zurueck, „Lernen gestalten" tritt hervor. Bewusst ohne Farbverlauf in
   der Schrift — der war der lauteste Griff der Seite und liess sie nach
   Vorlage aussehen. Ein einziger praeziser Farbeinsatz wirkt staerker.

   Das vormalige warme Grau #B4A99C ist einem neutralen gewichen: Neben dem
   amberfarbenen Papier zog es ins Schmutzige. */
.hero__zeile--dunkel { color: #86868B; }
.hero__zeile--hell { color: var(--himbeer); }

.hero__unter {
  max-width: 34ch;
  margin-inline: auto;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--schrift-still);
}

.hero__hinweis {
  position: absolute; left: 50%; translate: -50% 0;
  bottom: clamp(1.75rem, 4vh, 3rem);
  display: flex; align-items: center; gap: .85rem;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--schrift-still);
}
.hero__strich {
  display: block; width: 4.5rem; height: 1px;
  background: linear-gradient(90deg, var(--linie), transparent);
  position: relative; overflow: hidden;
}
.hero__strich::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--himbeer), transparent);
  animation: wandern 2.6s var(--kurve) infinite;
}
@keyframes wandern {
  from { transform: translateX(-100%); }
  60%, to { transform: translateX(100%); }
}

/* ═══ Einleitung und Claim ══════════════════════════════════════════════ */

.einleitung {
  max-width: 46ch;
  font-size: clamp(1.1875rem, 1rem + .95vw, 1.9rem);
  line-height: 1.45;
}

.claim {
  margin: clamp(3rem, 8vh, 6rem) 0 0;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--linie);
}
.claim p {
  font-size: clamp(1.75rem, 1rem + 3.4vw, 4rem);
  font-weight: 600;
  line-height: 1.1; letter-spacing: -.03em;
  text-wrap: balance;
}
.claim span { color: var(--schrift-still); }

/* ═══ Abschnitte ════════════════════════════════════════════════════════ */

.abschnitt { padding-block: clamp(6rem, 16vh, 12rem); }
/* Unten kuerzer als oben, und das ist Statik, nicht Geschmack: Wer in der
   Leiste auf „Kontakt" klickt, landet am SEITENENDE — der Abschnitt ist zu
   kurz, um den Ankersprung aufzunehmen. Was dann zu sehen ist, bestimmt allein,
   was unter der Vorzeile liegt: Inhalt (≈ 380 px), dieses Polster und der Fuss
   (≈ 190 px). Mit 20 vh stand die Vorzeile „KONTAKT" auf 1440 x 900 bei 122 px
   und die Sprechblase sass darauf; auf 1440 x 687 lag sie bei −1 px, also unter
   der Leiste. Mit 6 vh: 248 / 175 / 95 px auf 900 / 768 / 687 px Fensterhoehe.
   Der Kontakttext ist dafuer auf drei Zeilen begrenzt (index.html). Auf dem
   Telefon schrumpft zugleich der leere Streifen zwischen Anschrift und Fuss.
   Rechnung und Grenzen: CLAUDE.md, „Das Seitenende". */
.abschnitt--kontakt { padding-block: clamp(7rem, 20vh, 14rem) clamp(2.5rem, 6vh, 6rem); }

.marke {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1.25rem;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--himbeer);
}
.marke::before { content: ''; width: 1.5rem; height: 1px; background: var(--himbeer); }
.bahn--mitte .marke { justify-content: center; }

.ueberschrift {
  font-size: clamp(1.9rem, 1.2rem + 2.7vw, 3.5rem);
  letter-spacing: -.03em;
  max-width: 20ch;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.ueberschrift--gross { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.5rem); }
.bahn--mitte .ueberschrift { margin-inline: auto; }

.fliess {
  max-width: 58ch; color: var(--schrift-still);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
}
.fliess--weit { max-width: 62ch; }
.bahn--mitte .fliess { margin-inline: auto; }

/* ═══ Was wir tun — redaktioneller Index statt Kartenraster ═════════════ */

.felder { list-style: none; margin: 0; padding: 0; }

.feld {
  display: grid; gap: .5rem 2rem;
  padding-block: clamp(2rem, 4vh, 3.25rem);
  border-top: 1px solid var(--linie);
}
.feld:last-child { border-bottom: 1px solid var(--linie); }

@media (min-width: 56rem) {
  .feld {
    grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr);
    align-items: start; gap: 2.5rem;
  }
}

.feld__nr {
  font-size: .9375rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--himbeer);
  padding-top: .1em;
}
.feld__titel { font-size: clamp(1.3125rem, 1rem + 1.1vw, 1.875rem); font-weight: 500; }
.feld__text { color: var(--schrift-still); max-width: 54ch; }

/* Der vierte Punkt steht bewusst leiser: die Software soll sichtbar sein,
   ohne das Profil zu dominieren. „Leiser" heisst hier: der Titel in Grau
   statt Schwarz und kleiner. Vorher lag die ganze Zeile auf opacity .68 —
   damit fiel der Text auf 2,7:1 und unter das Lesbare (AA verlangt 4,5:1).
   --schrift-still bleibt bei voller Deckkraft ueber 5:1. */
.feld--leise .feld__titel {
  font-size: clamp(1.1875rem, 1rem + .7vw, 1.5rem);
  color: var(--schrift-still);
}

/* ═══ Fachdidaktik ══════════════════════════════════════════════════════ */

.satzbau {
  max-width: 60ch;
  display: grid; gap: clamp(1.25rem, 3vh, 2rem);
  color: var(--schrift-still);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
}
.satzbau__betont {
  font-size: clamp(1.4375rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2; letter-spacing: -.025em;
  color: var(--schrift);
  padding-block: clamp(.5rem, 2vh, 1.25rem);
}

/* ═══ Für wen ═══════════════════════════════════════════════════════════
   Vier Zielgruppen als 2×2-Raster mit Haarlinie oben — dieselbe Sprache wie
   der Index in „Was wir tun", nur ohne Nummern. Bewusst zwei feste Spalten
   statt auto-fit: drei nebeneinander saehen nach Kartenraster aus, und genau
   das ist die Aesthetik, die die Seite vermeidet. */

.zielgruppen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.5rem, 3vh, 2.25rem) 2rem;
}
@media (min-width: 40rem) {
  .zielgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.zielgruppe { padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.zielgruppe__titel {
  font-size: clamp(1.1875rem, 1rem + .7vw, 1.5rem); font-weight: 500;
  margin-bottom: .5rem;
}
.zielgruppe__text { color: var(--schrift-still); }
/* Der zweite Handlungsaufruf der Seite. Vorher gab es genau einen, ganz unten
   — zwischen Hero und Kontakt lagen mehrere Bildschirmhoehen ohne Weg. */
.zielgruppen__weg { margin-top: clamp(2.25rem, 5vh, 3.25rem); }

/* ═══ Über uns ══════════════════════════════════════════════════════════ */

/* Die beiden Gründer als gefaltetes Papier.
 *
 * Dieselbe Breite wie die Namensliste darunter, damit die beiden Köpfe ungefähr
 * über den beiden Namen stehen — das Bild erklärt sich dadurch selbst, ohne
 * Bildunterschrift.
 *
 * Kein `mix-blend-mode` und kein Freistellen nötig: Der Weisspunkt der Bilder
 * ist auf 255 gezogen (werkzeuge/weisspunkt.py), und der Seitengrund ist
 * ebenfalls reinweiss. Die Kante verschwindet dadurch von selbst.
 *
 * Diese Bilder sind der Grund, warum „Über uns" keine Haftbühne mehr ist: In
 * eine Bildschirmhöhe passt der Abschnitt damit nicht. Gemessen auf 1440 x 900
 * standen 591 px Text bei 684 px Platz. */
.gruender {
  list-style: none; margin: clamp(2.5rem, 6vh, 4rem) 0 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  max-width: 44rem;
}

/* Der Kopf steht ÜBER der Haarlinie, nicht darunter: Die Linie trennt Bild und
   Name, statt über einem frei schwebenden Kopf zu liegen — dort sähe sie aus
   wie ein abgeschnittener Rahmen. Deshalb wandert der Rahmen von der Zelle auf
   den Namen. */
.gruender__kopf {
  display: block;
  width: 100%; max-width: 12rem; height: auto;
  margin-bottom: clamp(1rem, 2.5vh, 1.5rem);
}
.gruender__name {
  padding-top: 1.1rem; border-top: 1px solid var(--linie);
  font-size: 1.1875rem; font-weight: 600; letter-spacing: -.02em;
  /* Ein h3, kein p mehr: Als Ueberschrift der Person liest auch eine
     Maschine den Namen als Person. Die Ueberschriften-Zeilenhoehe 1.06 waere
     fuer eine Namenszeile aber zu eng. */
  line-height: 1.3;
}
.gruender__rolle { color: var(--schrift-still); font-size: .9375rem; }

/* Die Faktenzeile unter dem Fliesstext — dieselbe Stimme wie die Rollenzeile.
   Gegruendet, Sitz, Reichweite: drei Angaben, die eine Suche zitieren kann. */
.ueber__fakten { margin-top: 1.25rem; color: var(--schrift-still); font-size: .9375rem; }

/* ═══ Häufige Fragen ════════════════════════════════════════════════════
   <details>/<summary> ohne eigene Technik: Der Browser klappt auf, das
   Attribut name="fragen" macht daraus ein exklusives Akkordeon. Die Antworten
   stehen im DOM und sind damit fuer Suche und KI-Suche lesbar, auch wenn sie
   zugeklappt sind. Kein Dreieck, stattdessen ein Plus, das sich zum Kreuz
   dreht — dieselbe Geste wie Apples Aufklapplisten. */

.fragen { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage__titel {
  cursor: pointer;
  /* display: flex nimmt Safari das Dreieck, list-style: none den anderen. */
  list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.5vh, 1.5rem);
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); font-weight: 500;
  letter-spacing: -.015em;
}
.frage__titel::-webkit-details-marker { display: none; }
.frage__titel::after {
  content: '+'; flex: none;
  color: var(--himbeer); font-weight: 400;
  transition: transform var(--ruhig) var(--kurve);
}
.frage[open] .frage__titel::after { transform: rotate(45deg); }
.frage__antwort {
  color: var(--schrift-still); max-width: 58ch;
  padding-bottom: clamp(1.25rem, 3vh, 1.75rem);
}
.frage__antwort a { color: var(--petrol); text-underline-offset: .2em; }
.frage__antwort a:hover { color: var(--himbeer); }

/* ═══ Kontakt ═══════════════════════════════════════════════════════════ */

.kontakt__weg { margin-top: clamp(2.25rem, 5vh, 3.25rem); }

.knopf {
  display: inline-block;
  padding: .75rem 1.375rem; border-radius: var(--radius-knopf);
  background: var(--himbeer);
  color: #fff; font-weight: 500; font-size: 1.0625rem;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: transform var(--schnell) var(--kurve),
              box-shadow var(--ruhig) var(--kurve);
}
.knopf:hover, .knopf:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 .75rem 2.25rem -.6rem color-mix(in srgb, var(--himbeer) 60%, transparent);
}

.kontakt__neben { margin-top: 1.5rem; color: var(--schrift-still); font-size: .9375rem; }
.kontakt__neben a {
  color: var(--petrol);
  text-decoration-color: color-mix(in srgb, var(--petrol) 40%, transparent);
  text-underline-offset: .25em;
}
.kontakt__neben a:hover { color: var(--himbeer); }

/* ═══ Rechtsseiten ══════════════════════════════════════════════════════
   Impressum und Datenschutz brauchen kein Bild und keine Buehne — nur
   ruhigen, gut lesbaren Fliesstext. */

.rechtsseite { background: var(--grund); }

.rechtstext { padding-block: clamp(7rem, 16vh, 11rem) clamp(4rem, 10vh, 7rem); }
.rechtstext .bahn { max-width: 46rem; }
.rechtstext .ueberschrift { margin-bottom: clamp(2rem, 5vh, 3rem); }

.rechtstext h2 {
  font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem);
  margin: clamp(2.5rem, 6vh, 3.5rem) 0 .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}
.rechtstext p, .rechtstext ul { color: var(--schrift-still); }
.rechtstext p + p { margin-top: 1rem; }
.rechtstext ul { margin: 1rem 0; padding-left: 1.25rem; }
.rechtstext li { margin-bottom: .35rem; }
.rechtstext a { color: var(--petrol); text-underline-offset: .2em; }
.rechtstext a:hover { color: var(--himbeer); }
.rechtstext strong { color: var(--schrift); }

/* Ohne Deckkraft: Bei opacity .85 fiel die kleine Schrift auf 3,7:1. */
.rechtstext .klein { font-size: .875rem; margin-top: .75rem; }

/* ═══ Fussbereich ═══════════════════════════════════════════════════════
   Frueher ein dunkler Block, der die helle Seite unten abschloss. Der Riegel
   war ein harter Schnitt und hat die Seite beendet, statt sie ausklingen zu
   lassen — und ausgerechnet dort steigt das Papier aus dem Bild.

   Jetzt Apples Muster: dieselbe helle Flaeche, nur eine Spur abgesetzt, mit
   kleiner grauer Schrift. Der Fussbereich soll gefunden werden, wenn man ihn
   sucht, und sonst nicht auffallen. */

.fuss {
  position: relative;
  padding-block: clamp(2.5rem, 6vh, 3.5rem);
  background: var(--grund-tief);
  border-top: 1px solid var(--linie);
  color: var(--schrift-still);
  font-size: .75rem;
  line-height: 1.6;
}
.fuss__bahn { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; }
.fuss__marke {
  display: flex; align-items: center; gap: .6rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--schrift);
}
.fuss__nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-left: auto; }
/* Auf der Startseite stehen zwei Navigationen: erst die Sprungliste zu den
   Abschnitten, dann Impressum und Datenschutz. Nur die erste schiebt sich nach
   rechts, die zweite folgt ihr im Abstand des Zeilenrasters. Auf den
   Rechtsseiten gibt es nur die zweite — dort bleibt sie rechts. */
.fuss__nav--seite + .fuss__nav { margin-left: 0; }
.fuss__nav a {
  text-decoration-color: var(--linie);
  text-underline-offset: .25em;
}
.fuss__nav a:hover { color: var(--himbeer); }
/* Firma, Anschrift, E-Mail — sichtbar, weil sie auch im JSON-LD stehen. */
.fuss__adresse { flex-basis: 100%; }
.fuss__adresse a {
  text-decoration-color: var(--linie);
  text-underline-offset: .25em;
}
.fuss__adresse a:hover { color: var(--himbeer); }
/* Ohne Deckkraft: Mit opacity .8 lag ausgerechnet die Datenschutzzusage der
   Seite bei 3,2:1 — die schlechtest lesbare Zeile der ganzen Seite. */
.fuss__hinweis { flex-basis: 100%; }

@media (max-width: 44rem) { .fuss__nav { margin-left: 0; } }

/* ═══ Die Textspalte und das Papier teilen sich die Breite ══════════════
 *
 * Steht am Dateiende, und das mit Absicht: Diese Regeln muessen die
 * Grundmasse der Abschnitte weiter oben ueberschreiben. Weiter vorn platziert
 * gewannen dort `.satzbau { max-width: 60ch }` und `.fliess--weit`, und die
 * Spalten blieben zu breit.
 *
 * Warum es sie ueberhaupt braucht: Das gefaltete Papier steht in den
 * Textabschnitten in der rechten Spalte. Laeuft Text darunter durch, verliert
 * er genau den Kontrast, den die Tabelle im Kopf dieser Datei sichert — auf
 * dem Himbeerrot der Faltschatten sinkt er auf 2,3:1, und das ist unlesbar.
 * Gemessen, bevor diese Regeln standen: In den Akten 2 bis 6 lagen zwischen
 * 29 % und 45 % der Textflaeche auf dem Papier.
 *
 * Die Loesung ist keine Notmassnahme, sondern die bessere Gestaltung: Die Bahn
 * ist 1216 px breit, und Fliesstext ueber die volle Breite laufen zu lassen
 * ist ohnehin zu viel. Apple begrenzt Textspalten bei rund 980 px, einzelne
 * Absaetze deutlich frueher. Was entsteht, ist eine asymmetrische Aufteilung:
 * Text links, Gegenstand rechts.
 *
 * `.bahn--mitte` ist ausgenommen — das ist der Kontaktabschnitt, und dort
 * parkt die Sprechblase ueber der Ueberschrift statt daneben.
 *
 * Nur ab 64rem. Darunter gibt es keine zweite Spalte; dort weicht das Papier
 * nicht aus, sondern wird blass (siehe css/buehne.css). */

@media (min-width: 64rem) {
  .bahn:not(.bahn--mitte) .ueberschrift { max-width: 16ch; }
  .bahn:not(.bahn--mitte) .fliess       { max-width: 42ch; }
  .bahn:not(.bahn--mitte) .einleitung   { max-width: 30ch; }
  .bahn:not(.bahn--mitte) .satzbau      { max-width: 44ch; }
  .bahn:not(.bahn--mitte) .gruender     { max-width: 34rem; }
  /* Gerechnet fuer 1024 x 768, den engsten Zweispaltenfall: Die Gluehbirne ist
     schmal und steht bei x >= 60 — bei 36rem bleiben 111 px Luft. Das Netz ist
     die breiteste Form und steht in „Fragen" genau dort, wo es auch bei
     .gruender steht — dieselben 34rem; 36rem waeren nur 25 px vom Papier. */
  .bahn:not(.bahn--mitte) .zielgruppen  { max-width: 36rem; }
  .bahn:not(.bahn--mitte) .fragen       { max-width: 34rem; }
  .bahn:not(.bahn--mitte) .claim p      { max-width: 26ch; }
  .bahn:not(.bahn--mitte) .feld {
    /* 13rem statt 11: bei 11 brach „Fortbildung und Weiterbildung" dreizeilig. */
    grid-template-columns: 3.5rem minmax(0, 13rem) minmax(0, 22rem);
  }
}