/* Die Bauteile des Design-Vertrags V1.
 *
 * Farben, Radien und Glas kommen als Token von `js/design.js` (das sie aus `pouch-themes.js`
 * rechnet). Hier steht **kein** Farbwert — §1: „Kein Hexwert außerhalb von pouch-themes.js."
 *
 * Warum Klassen statt der Inline-Styles der Vorlage: Die Vorlage ist ein Export aus dem
 * Design-Canvas, dort ist jeder Wert am Element. Für eine Seite, die gepflegt wird, wäre das
 * 60 kB HTML, in dem eine Änderung an dreißig Stellen nachzuziehen ist.
 */

/* ---------- Grundlage ------------------------------------------------------------------- */

/* Ohne diese drei Zeilen stimmt kein einziges gezeichnetes Mass. Gefunden am 03.08. als Wurzel
   zweier sichtbarer Fehler: Der Kopf-Knopf wurde 60 px hoch statt 42 (40 Mindesthöhe + 18
   Innenabstand + 2 Rand addieren sich im `content-box`-Modell), und das Einstellungsmenü 354 px
   breit statt 320. Man sieht die Ursache dem Ergebnis nicht an — man sieht nur, dass es plump
   wirkt. */
*, *::before, *::after { box-sizing: border-box; }

/* Bedienelemente erben die Schrift UND die Farbe der Seite.
 *
 * GEFUNDEN AM 04.08.2026, gemeldet von Markus: *„ich kann die namen der karten nicht lesen"* —
 * in der Stil-Galerie standen elf Themen-Namen **weiss auf hell**, unlesbar. Nur „Material You"
 * war zu sehen.
 *
 * Die Ursache ist keine Farbe, die falsch gesetzt war, sondern eine, die **gar nicht** gesetzt
 * war: Die Kacheln sind `<button>`-Elemente, und ein Knopf ohne eigene Farbe nimmt die des
 * Browsers (`buttontext`). Die folgt dem **System**-Farbschema — nicht dem, das die Seite gerade
 * anzeigt. Am Gerät nachgemessen: System dunkel, Seite hell, `buttontext` = `rgb(255,255,255)`.
 *
 * Deshalb fiel es hier nie auf: Wer System und Seite gleich stehen hat, sieht nichts davon. Der
 * Fehler zeigt sich **nur**, wenn beide auseinandergehen — und genau das tut jeder, der den
 * Schalter der Seite benutzt.
 *
 * Als Element-Regel (Spezifitaet 0-0-1), damit jede Klasse sie weiter ueberstimmt. */
button, input, select, textarea { color: inherit; font: inherit; }

/* §4 wörtlich: „Fokus: Akzentkante + 3 px weicher Ring. Nie nur Farbe als Signal."
 *
 * Vorher gab es genau zwei Fokusregeln auf der ganzen Seite — Knöpfe, Navigationslinks,
 * Theme-Kacheln, Zahnrad, Regler und Statusanzeiger hatten keine. Wer mit der Tastatur geht, sah
 * nicht, wo er steht: bedienbar, aber blind.
 *
 * `:focus-visible` statt `:focus` — der Browser entscheidet, ob die Eingabeart einen Ring
 * verdient. Ein Mausklick auf einen Knopf soll keinen hinterlassen. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--accent-soft);
}
/* Bei runden Bauteilen folgt `outline` dem Radius von selbst; der weiche Ring ebenfalls, weil er
   ein Schatten ist. Nur wo schon ein Schatten liegt, muss er danebengestellt werden. */
.karte:focus-visible, .knopf:focus-visible {
  box-shadow: var(--shadow), 0 0 0 5px var(--accent-soft);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  line-height: 1.6;
  overflow-x: clip;
  /* §6: Der Stilwechsel überblendet, er springt nicht. */
  transition: background .45s ease, color .45s ease;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---------- Glas (§3) ------------------------------------------------------------------- */

.glas {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  position: relative;
  /* **Die Lichtkante als Innenschatten, nicht als Element.**
   *
   * Die erste Fassung setzte ein `::before` mit `height: 1px` und `border-radius: inherit`. Eine
   * Fläche von einem Pixel Höhe kann einen Radius von 20 Pixeln aber nicht darstellen — sie
   * bleibt ein gerader Strich und ragt über die Rundung hinaus. Genau das hat Markus am 03.08.
   * gesehen: „an manchen stellen habe ich so striche obwohl es nur rundlich sein soll."
   *
   * `inset`-Schatten folgen dem `border-radius` von selbst. Ein Wert, kein Element, kein
   * Stapelkontext — und die Kante hört dort auf, wo die Ecke beginnt. */
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
}

.glas-stark { background: var(--glass-strong); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); }

/* Die dritte Glasstufe — und der Grund, warum es sie gibt, steht als Satz auf der Seite: „Je
 * privater die Stufe, desto weniger Glas in der Karte."
 *
 * Gebaut waren Privat und Öffentlich identisch (beide `rgba(255,255,255,0.094)`, beide
 * `blur(18px)`); die Fussnote behauptete damit etwas, das man daneben widerlegen konnte. Hier ist
 * das Material die Aussage, nicht die Dekoration: weniger Füllung, halber Blur, gewöhnliche
 * Linie statt Glaskante — offen, nicht kostbar. */
.glas-leise {
  background: color-mix(in srgb, var(--glass) 45%, transparent);
  border-color: var(--line);
  backdrop-filter: blur(calc(var(--blur) / 2)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(calc(var(--blur) / 2)) saturate(var(--sat));
  box-shadow: none;
}
.karte.glas-leise:hover, .karte.glas-leise:focus-within { box-shadow: var(--shadow); }

/* **Geheimes ist opak.** §7, Klausel 4 — die einzige Ausnahme vom Glas, und sie ist keine
   Geschmacksfrage: Was das Gerät nicht verlässt, schimmert auch nicht durch. Wer hier
   `backdrop-filter` einschaltet, bricht die sichtbare Entsprechung einer Zusage. */
.opak {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Geheimes trägt keine Lichtkante — aber es liegt trotzdem auf der Seite, nicht darin.
 *
 * Erste Fassung war `box-shadow: none`, und die war an zwei Enden falsch. Im Hellen verschwand
 * die Karte fast: Fläche gegen Grund 1.13:1, Linie 1.33:1 — eine Karte, die man suchen muss.
 * Ein **Aussen**schatten hebt sie an, ohne etwas durchscheinen zu lassen; verboten ist nur der
 * `inset`-Anteil, denn der ist das Licht, das durch Glas fällt.
 *
 * Und die Hover-Regel weiter unten (`.karte:hover`, Spezifität 0-2-0) schlug diese hier (0-1-0):
 * Beim Überfahren bekam die Geheim-Karte ihre Lichtkante doch. Eine Zusage über den Datenfluss
 * gilt auch 200 Millisekunden lang. */
.opak { box-shadow: var(--shadow); }
.karte.opak:hover, .karte.opak:focus-within { box-shadow: var(--shadow-lg); }

/* ---------- Typografie (§2) ------------------------------------------------------------- */

.kicker {
  font-family: var(--font-status);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.abschnitt-kopf { max-width: 62ch; margin-bottom: 40px; }
.abschnitt-kopf h2 { font-family: var(--font-titel); font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 14px; }
.abschnitt-kopf p { color: var(--ink2); font-size: 17px; }

/* Der Stilwechsel ueberblendet — nicht nur der Hintergrund der Seite.
 *
 * GEMELDET AM 04.08.2026 von Markus: *„stile umschalten soll auch langsam gehen"*. Bis dahin lag
 * der Uebergang **nur auf `body`** (Hintergrund und Textfarbe). Beim Wechsel von Pouch nach Bronze
 * blendete also die Seite weich um, waehrend jede Karte, jede Kachel, jeder Chip und jede Linie im
 * selben Moment umsprang. Das sieht nicht nach einem Wechsel aus, sondern nach einem Ruckler.
 *
 * Aufgezaehlt statt `*`: Ein globaler Uebergang auf allem laesst auch Dinge mitwandern, die gar
 * keine Themenfarbe tragen, und kostet bei jedem Scrollen Rechenzeit. Hier stehen die Flaechen,
 * die ihre Farbe wirklich aus der Welt beziehen.
 *
 * „Ruhig" schaltet das ab — die Regel dafuer steht weiter oben und gilt global (`transition: none
 * !important`), diese Zeile muss davon nichts wissen. */
.stil-kachel, .stil-probe, .stil-flaeche, .stil-akzent, .stil-zeile,
.stufe, .form-karte, .form-chip, .site-header, .einstellungen-panel {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease;
}

/* ---------- Karten mit Hover (§6: Hub max. 4 px) ---------------------------------------- */

.karte {
  padding: 26px;
  /* Markus: „wenn ich zb bei den drei schritten drüber fahre dann hebt sich das etwas ab, diese
     sanfte animation soll bei jedem feld auf der homepage sein." — deshalb an der Kartenklasse
     und nicht an einzelnen Abschnitten. */
  /* Zwei Geschwindigkeiten in einer Zeile, mit Absicht: Was beim Ueberfahren passiert, muss
     sofort antworten (200 ms); was beim STILWECHSEL passiert, soll ueberblenden (450 ms,
     §6). Beides in dieselbe Dauer zu zwingen macht entweder den Hover traege oder den
     Stilwechsel hart. */
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease,
              background-color .45s ease, color .45s ease;
}

.karte:hover, .karte:focus-within {
  transform: translateY(-4px);   /* der Vertrag sagt: höchstens vier */
  /* Den Innenschatten mitnehmen — ohne ihn verlöre die Karte beim Überfahren ihre Lichtkante. */
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi);
  border-color: var(--accent-soft);
}

.karte h3 { font-family: var(--font-titel); font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.karte p { color: var(--ink2); font-size: 15.5px; margin: 0; }

.raster { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* **Vier Sorten Inhalt stehen zu zweit in zwei Reihen.**
 *
 * `auto-fit` verteilte sie auf drei oben und eine unten — die Freunde-Karte stand allein neben
 * zwei leeren Plätzen und sah aus wie vergessen, nicht wie geordnet. Vier ist eine gerade Zahl,
 * und ein 2×2 zeigt das. Schmal wird daraus untereinander. */
.raster-vier { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .raster-vier { grid-template-columns: 1fr; } }

/* ---------- Stufen-Chips (§4) ----------------------------------------------------------- */

.stufe {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-family: var(--font-status);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* „Geheim trägt die stärkste Fläche, Öffentlich die leiseste" (§4). */
.stufe-geheim { background: var(--ink); color: var(--bg); }
.stufe-privat { background: var(--accent-soft); color: var(--ink); }
.stufe-oeffentlich { background: transparent; border: 1px solid var(--line); color: var(--ink3); }

/* ---------- Knöpfe (§4: eine Primäraktion pro Ansicht) ---------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-titel);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  /* Nie unter 44 px hoch — der Vertrag verlangt es für die App, und ein Finger auf einer
     Website ist derselbe Finger. */
  min-height: 44px;
  /* Ein Knopf wird nie unterstrichen — egal, wo er steht (Markus, 05.08.2026, aus dem mobilen
     Firefox).
     `.karte a { text-decoration: underline }` weiter unten meint Fliesstext-Links in Karten und
     traf jeden Knopf mit, der in einer Karte sass: „Alle Fragen ansehen" und das zweite „Auf die
     Warteliste". Sie sahen dadurch aus wie rohe Links statt wie Knöpfe.
     **Nicht browserabhängig**, obwohl es dort auffiel — im Chromium ist es genauso, nur zeichnet
     Firefox die Linie in der Textfarbe statt in der kaum sichtbaren `--line`. Der Unterschied
     machte den Fehler sichtbar; da war er längst da.
     Die Regel steht hier und nicht als Ausnahme bei `.karte`, weil sie zum Knopf gehört: Wer den
     nächsten Knopf irgendwohin setzt, soll nicht daran denken müssen. */
  text-decoration: none;
}

.knopf:hover { transform: translateY(-2px); }
/* Verlauf und Innenlicht, nicht Fläche. Dieselbe Materiallogik wie die Lichtkante der Karten:
   Licht kommt von oben. Ein flacher Knopf fällt aus dem System, in dem alles andere steht. */
.knopf-primaer {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, white), var(--accent));
  border-color: color-mix(in oklab, var(--accent) 75%, white);
  color: var(--accent-ink);
  box-shadow: 0 14px 38px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,0.35);
}
.knopf-leise { background: var(--glass); border-color: var(--glass-edge); color: var(--ink); }

/* Der sekundäre Knopf: durchsichtig, Akzentrand, Akzentschrift (05.08.2026).
 *
 * Anlass: Der FAQ-Knopf trug `knopf-leise` — und der ist Glas. Auf einer Glaskarte ist das Glas
 * auf Glas: Markus sah einen grauen Knopf, der aussah wie ausgegraut. Genau die Verwechslung, die
 * ein sekundärer Knopf nie auslösen darf, denn „leise" heisst nachrangig, nicht deaktiviert.
 *
 * Kein zweiter gefüllter Knopf: Auf der Startseite ist „Auf die Warteliste" die Primäraktion, und
 * §4 lässt nur eine je Ansicht zu. Der Rand trägt hier die Zugehörigkeit, die Füllung bleibt der
 * Hauptsache vorbehalten. */
.knopf-sekundaer {
  background: transparent;
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  color: var(--accent);
}
.knopf-sekundaer:hover,
.knopf-sekundaer:focus-visible {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

/* ---------- Schwebende Flächen (§6: Deko, nie Inhalte) ---------------------------------- */

.orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(52px); }
.orb-1 { top: -160px; left: -120px; width: 640px; height: 640px;
  background: radial-gradient(closest-side, var(--orb1), transparent 72%); animation: schweben-1 13s ease-in-out infinite; }
.orb-2 { top: 220px; right: -180px; width: 720px; height: 720px;
  background: radial-gradient(closest-side, var(--orb2), transparent 72%); animation: schweben-2 17s ease-in-out infinite; }
.orb-3 { bottom: -220px; left: 30%; width: 560px; height: 560px;
  background: radial-gradient(closest-side, var(--orb3), transparent 72%); animation: schweben-1 19s ease-in-out infinite; }

@keyframes schweben-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(34px, -26px) scale(1.07); } }
@keyframes schweben-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-28px, 20px) scale(.95); } }

/* ---------- Scroll-Aufbau (§6: 650 ms, 26 px, 80 ms Staffel) ---------------------------- */

@media (prefers-reduced-motion: no-preference) {
  [data-auftritt] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .65s cubic-bezier(.2, .7, .2, 1), transform .65s cubic-bezier(.2, .7, .2, 1);
  }
  [data-auftritt].da { opacity: 1; transform: none; }
  /* Die Staffel: jede weitere Karte einer Reihe kommt 80 ms später. */
  .raster > :nth-child(2) { transition-delay: .08s; }
  .raster > :nth-child(3) { transition-delay: .16s; }
  .raster > :nth-child(4) { transition-delay: .24s; }
}

/* §6, letzte Zeile: „Ruhig-Modus stoppt alles — ohne Ausnahme." Auch die Orbs, auch das Logo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-auftritt] { opacity: 1 !important; transform: none !important; }
}

:root[data-bewegung="ruhig"] *,
:root[data-bewegung="ruhig"] *::before,
:root[data-bewegung="ruhig"] *::after { animation: none !important; transition: none !important; }
:root[data-bewegung="ruhig"] [data-auftritt] { opacity: 1 !important; transform: none !important; }

/* ---------- Der Durchlass ----------------------------------------------------------------
 *
 * Die einzige Bewegung auf dieser Seite, die etwas AUSSAGT statt zu begrüßen. Markus am
 * 03.08.2026: „bei der durchlass animation prallt geheim passend an wand durch, alle die immer
 * durchgehen sollen öffentlich heissen, bei privatem soll man sehen dass die freigabe
 * entscheidet ob gegen wand oder durch lücke".
 *
 * Drei Punkte, drei Verhalten — und das ist genau das Modell:
 *
 * **Öffentlich** geht immer durch. Kein Zögern, keine Frage.
 * **Geheim** prallt an die Wand und bleibt davor. Nicht „meistens", nicht „außer wenn" — die App
 *   kennt für diese Stufe keinen Weg nach draußen.
 * **Privat** ist der interessante Fall: derselbe Punkt, mal durch die Lücke, mal gegen die Wand.
 *   Was entscheidet, ist die Freigabe — und dass man beides sieht, ist der Punkt. Ein Privat, das
 *   immer durchginge, wäre Öffentlich; eines, das nie durchginge, wäre Geheim.
 *
 * **Zweite Fassung (05.08.2026): Die Bahnen sind jetzt gezeichnet, nicht nur gefahren.**
 *
 * Die erste Fassung trug ihre ganze Aussage in der Bewegung — still war sie drei Punkte neben
 * einer Linie, und wer den Ruhig-Modus nutzt, bekam die dünnste Seite des Abschnitts. Jetzt
 * steht jedes Verhalten als Linie im Bild: Öffentlichs Bahn führt sichtbar durch die Lücke und
 * läuft rechts aus, Geheims Bahn endet stumpf an der Wand, und Privats Bahn **gabelt sich** —
 * ein Ast durch die Lücke, einer an die Wand. Die Gabel ist das Bild für „die Freigabe
 * entscheidet"; sie braucht keine Bewegung, um gelesen zu werden. Die Punkte fahren die
 * gezeichneten Bahnen nur noch ab.
 *
 * Dabei fiel ein Fehler der ersten Fassung auf: Öffentlich lief auf 34 % Höhe — mitten durch
 * das obere **Wandsegment** (0–38 %). Ein Punkt, der durch Mauerwerk geistert, sagt das
 * Gegenteil des Gemeinten. Jetzt führt jeder Weg nach draußen durch die eine Lücke: Öffentlich
 * biegt oben ein, Privat unten, die Pille sitzt zwischen beiden Strömen. Dass alles, was das
 * Gerät verlässt, durch genau einen kontrollierten Durchlass muss, ist keine Zeichenvereinfachung
 * — es ist das Produkt.
 */

.durchlass {
  position: relative;
  height: clamp(230px, 36vw, 300px);
  margin: 40px 0 8px;
  padding: 18px;
  /* Die Zimmerfläche links (::before) soll an der Panelrundung enden, nicht über sie hinaus. */
  overflow: hidden;
}

/* **Zwei Räume, eine Wand.** Links das Gerät: eine Spur dichter, denn dort liegt alles —
 * auch Geheimes. Rechts der Anbieter: bleibt reines Glas, offen. Das ist dieselbe
 * Materialsprache wie bei den drei Stufenkarten darüber („je privater, desto weniger Glas"),
 * nur als Raum statt als Karte. Ohne diese Fläche war die Wand eine Linie im Nichts; mit ihr
 * ist sie die Kante von etwas.
 *
 * `top: 1px`, nicht 0: Die Lichtkante des Glases ist ein 1-px-Innenschatten, und eine
 * Pseudo-Fläche ab 0 deckt ihre linke Hälfte zu. */
.durchlass::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 0;
  left: 0;
  width: 42%;
  background: color-mix(in srgb, var(--bg2) 55%, transparent);
  pointer-events: none;
}

/* **Warum ein SVG, wo vorher Divs standen:** Die Gabel und die Einbiegung in die Lücke sind
 * Kurven, und Kurven kann CSS nicht zeichnen. `preserveAspectRatio="none"` macht die
 * Koordinaten des viewBox (1000×300) zu Prozenten der Fläche — dieselbe Sprache, in der die
 * Punkte (als HTML-Spans in %-Keyframes) fahren. `vector-effect="non-scaling-stroke"` hält
 * dabei jede Strichstärke in echten Pixeln, egal wie schmal das Telefon ist.
 *
 * Die Punkte bleiben bewusst HTML: SVG-Kreise würden beim nichtuniformen Skalieren zu
 * Ellipsen, und `offset-path` rechnet in festen Pixeln statt in Prozenten — beides bräche
 * genau dort, wo es keiner sieht: auf dem schmalen Gerät. */
.durchlass-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  color: var(--ink3);
}

/* `--ink2` statt `--ink3`, 3 px statt 2: Die Wand ist der Gegenstand des Bildes, nicht sein
 * Beiwerk. Gegen die dichtere Fläche links braucht sie das Gewicht — die erste Fassung war so
 * leise, dass die Punkte gegen nichts zu prallen schienen. */
.durchlass-bild .wand { stroke: var(--ink2); stroke-width: 3; }

/* Die Bahnen: leise Infrastruktur in einer Farbe — die Identität tragen die Punkte. Zwei
 * Endarten, zwei Bedeutungen: `bahn-weiter` läuft rechts über einen Verlauf ins Nichts aus
 * (der Weg geht weiter, das Bild hört nur auf), `bahn-endet` hört wirklich auf — an der Wand,
 * mit rundem Strichende. Das Aufhören IST hier die Aussage. */
.bahn { fill: none; stroke-width: 2; stroke-linecap: round; }
.bahn-endet { stroke: currentColor; stroke-opacity: .5; }
.bahn-weiter { stroke: url(#bahn-verlauf); }

/* Die zwei Enden glimmen — eine Kante, die etwas durchlässt, ist warm, keine Abbruchstelle.
   Die Lücke liegt im viewBox bei y 110–190 von 300, daher die krummen Prozente. */
.luecken-ende {
  position: absolute;
  left: 42%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
}
.luecken-ende.oben  { top: 36.667%; }
.luecken-ende.unten { top: 63.333%; }

/* Was durch die Lücke geht, hat einen Namen. Die Pille sitzt in der Lücke selbst — sie ist die
   Antwort auf die Frage, die das Loch aufwirft. */
.durchlass-pille {
  position: absolute;
  left: 42%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--bg2);
  border: 1px solid var(--accent-soft);
  font-family: var(--font-status);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink2);
  white-space: nowrap;
  z-index: 2;
}

/* Schmal wird die Pille kompakter: Bei 375 px nahm sie sonst über 40 % der Breite ein und
   drängte sich zwischen die beiden Ströme, die durch die Lücke laufen. */
@media (max-width: 560px) {
  .durchlass-pille { font-size: 8px; padding: 3px 8px; letter-spacing: 0.09em; }
}

.durchlass-seite {
  position: absolute;
  top: 0;
  font-family: var(--font-status);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
}

.durchlass-seite.links { left: 0; }
.durchlass-seite.rechts { right: 0; }

/* **Die Punktformen sprechen dieselbe Sprache wie die Stufen-Chips** weiter oben: Öffentlich
 * ist ein Umriss (wie der Öffentlich-Chip — nichts zu verbergen, nichts gefüllt), Privat trägt
 * den Akzent, Geheim die volle Schriftfarbe (wie der Geheim-Chip und die opake Karte — die
 * stärkste, dichteste Fläche). Und nur was hinaus will, glüht; Geheim strahlt nichts aus.
 *
 * Zentriert über Margins statt `translate`: Die Keyframes fahren `left`/`top`, und die
 * Ruhig-Regeln räumen an anderer Stelle mit `transform: none` auf — ein Punkt, der seine
 * Mitte per Transform hält, hat dann zwei Herren. */
.punkt {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
}
.punkt-oeffentlich { border: 2px solid var(--accent2); background: transparent; box-shadow: 0 0 10px var(--glow); }
.punkt-privat { background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.punkt-geheim { background: var(--ink); }

/* **Ohne Bewegung stehen die Punkte dort, wo ihre Aussage sitzt** — und zwar als Grundstellung,
 * nicht als Sonderfall: Öffentlich jenseits der Wand auf seiner auslaufenden Bahn, Geheim
 * zurückgeprallt vor der Wand, Privat auf seiner Bahn **vor der Gabel** — an der Stelle, an der
 * die Freigabe entscheidet; die beiden gezeichneten Äste zeigen die zwei Ausgänge. Die
 * Animation überschreibt diese Stellungen nur; schaltet der Ruhig-Modus sie ab (globales
 * `animation: none`), fällt das Bild von selbst in seine lesbare Ruhelage zurück. */
.punkt-oeffentlich { left: 70%; top: 34%; }
/* 16 %, nicht direkt an der Gabel (24 %): Auf 375 px ist die Pille breiter als ihr Anteil an
   der Fläche, und ein Ruhepunkt bei 20 % kroch dort unter ihre linke Kante — gemessen, nicht
   geschätzt. Weiter vorn auf der geraden Bahn sagt er dasselbe: unterwegs, vor der Entscheidung. */
.punkt-privat { left: 16%; top: 53.333%; }
.punkt-geheim { left: 38.2%; top: 80%; }

/* Die Beschriftung sitzt **unter** ihrer Bahn, nicht darauf.
 *
 * Vorher stand sie bei `left: 2%` mit `translateY(-50%)` — also mittig auf der Höhe, auf der der
 * Punkt entlangläuft. Der Punkt startet bei 4 % und fuhr damit quer durch sein eigenes Wort;
 * schmal reichte „Öffentlich" bis fast ein Viertel der Breite. Eine Bahn und ihre Beschriftung
 * dürfen sich nicht dieselbe Zeile teilen. Abstand als `margin-top` statt `translate` — Gründe
 * wie beim Punkt. */
.punkt-label {
  position: absolute;
  left: 0;
  margin-top: 12px;
  font-family: var(--font-status);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink3);
}
/* Die Höhen sind die Startzeilen der Bahnen im viewBox (80/160/240 von 300). */
.label-oeffentlich { top: 26.667%; }
.label-privat { top: 53.333%; }
.label-geheim { top: 80%; }

/* **Der Aufprall bekommt einen Ort:** ein Ring, der an der Einschlagstelle aufgeht und
 * verklingt. Grundzustand unsichtbar — im Ruhig-Modus existiert er schlicht nicht, die stumpf
 * endende Bahn trägt die Aussage allein. Geheims Ring in Bahnfarbe (dort glüht nichts),
 * Privats im Akzent: Es war ja auf dem Weg nach draußen. */
.prall {
  position: absolute;
  left: 42%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.prall-geheim { top: 80%; border-color: var(--ink3); }
.prall-privat { top: 70.667%; }

@media (prefers-reduced-motion: no-preference) {
  /* Öffentlich fährt linear — kein Zögern ist auch ein Tempo. Privat und Geheim setzen an und
     bremsen (ease), sie „versuchen" es. Drei Zyklusdauern ohne gemeinsamen Takt, damit das
     Ensemble nicht nach Schleife aussieht. Der Prall-Ring läuft auf derselben Dauer wie sein
     Punkt — gleiche Dauer, gleicher Start beim Laden, also bleiben beide für immer synchron. */
  .punkt-oeffentlich { animation: bahn-oeffentlich 5.6s linear infinite; }
  .punkt-privat { animation: bahn-privat 11s ease-in-out infinite; }
  .punkt-geheim { animation: bahn-geheim 6.8s ease-in-out infinite; }
  .prall-geheim { animation: aufprall-geheim 6.8s linear infinite; }
  .prall-privat { animation: aufprall-privat 11s linear infinite; }
}

/* Die Keyframe-Stützpunkte sind aus den SVG-Bahnen abgelesen (x/10 → left %, y/3 → top %) und
   nach Weglänge auf die Zeit verteilt — der Punkt bleibt dadurch auch in den Kurven auf seiner
   gezeichneten Linie, statt sie zu schneiden. */
@keyframes bahn-oeffentlich {
  0%   { left: 4%;    top: 26.667%; opacity: 0; }
  6%   { left: 13.5%; top: 26.667%; opacity: 1; }
  23%  { left: 25%;   top: 26.667%; }
  34%  { left: 34.3%; top: 33.3%; }
  43%  { left: 42%;   top: 42%; }
  56%  { left: 52.4%; top: 39.8%; }
  69%  { left: 65%;   top: 34%; }
  93%  { left: 89%;   top: 34%; opacity: 1; }
  100% { left: 94.5%; top: 34%; opacity: 0; }
}

/* Anlauf, Aufprall, Rückstoß — und dann bleibt er liegen. Der kurze Rücksprung ist es, was den
   Aufprall lesbar macht; ohne ihn sieht es aus, als sei die Bewegung nur zu Ende. */
@keyframes bahn-geheim {
  0%   { left: 4%;    top: 80%; opacity: 0; }
  9%   { left: 13%;   top: 80%; opacity: 1; }
  55%  { left: 40.6%; top: 80%; }
  61%  { left: 36.8%; top: 80%; }
  68%  { left: 38.2%; top: 80%; }
  90%  { left: 38.2%; top: 80%; opacity: 1; }
  100% { left: 38.2%; top: 80%; opacity: 0; }
}

/* Ein Durchlauf, zwei Ausgänge. Erste Hälfte: freigegeben, also den Durch-Ast entlang. Zweite
   Hälfte: nicht freigegeben, also den Wand-Ast — Aufprall, Rückstoß, liegen bleiben. Derselbe
   Punkt, dieselbe Stufe, dieselbe Gabel: die Freigabe entscheidet. */
@keyframes bahn-privat {
  0%   { left: 4%;    top: 53.333%; opacity: 0; }
  4%   { left: 12%;   top: 53.333%; opacity: 1; }
  10%  { left: 24%;   top: 53.333%; }
  14%  { left: 34%;   top: 56%; }
  18%  { left: 42%;   top: 59.333%; }
  23%  { left: 52%;   top: 62.4%; }
  29%  { left: 64%;   top: 66.667%; }
  40%  { left: 89%;   top: 66.667%; opacity: 1; }
  42%  { left: 93%;   top: 66.667%; opacity: 0; }
  48%  { left: 4%;    top: 53.333%; opacity: 0; }
  53%  { left: 12%;   top: 53.333%; opacity: 1; }
  65%  { left: 24%;   top: 53.333%; }
  74%  { left: 32.9%; top: 59.3%; }
  81%  { left: 41.4%; top: 70.667%; }
  85%  { left: 38.9%; top: 67%; }
  90%  { left: 39.8%; top: 68.1%; }
  97%  { left: 39.8%; top: 68.1%; opacity: 1; }
  100% { left: 39.8%; top: 68.1%; opacity: 0; }
}

/* Die Ringe erscheinen im Moment des Einschlags ihres Punktes (Geheim 55 %, Privat 81 %) und
   weiten sich beim Verklingen — ein Schlag, kein Blinken. */
@keyframes aufprall-geheim {
  0%, 54% { opacity: 0;  transform: scale(.3); }
  56%     { opacity: .7; transform: scale(.45); }
  72%     { opacity: 0;  transform: scale(1.5); }
  100%    { opacity: 0;  transform: scale(1.5); }
}
@keyframes aufprall-privat {
  0%, 80% { opacity: 0;  transform: scale(.3); }
  82%     { opacity: .7; transform: scale(.45); }
  95%     { opacity: 0;  transform: scale(1.5); }
  100%    { opacity: 0;  transform: scale(1.5); }
}

/* ---------- Die Marke, und was sie tut, wenn man sie anfasst -----------------------------
 *
 * Markus: „mach es wieder hüpfend im header und footer und wo es sonst zu sehen ist, auch inapp
 * bei touch usw.... es sollte nicht nur hüpfen sondern random verschiedene nette sachen machen".
 *
 * **Sechs Reaktionen, nicht eine.** Das ist der Unterschied zwischen einer Marke, die eine
 * Animation hat, und einer, die Laune hat: Wer zweimal hinfasst und zweimal dasselbe bekommt,
 * hat einen Schalter gefunden. Wer etwas anderes bekommt, hat jemanden getroffen.
 *
 * Keine davon dauert länger als 900 ms, keine verschiebt Nachbarn (alle arbeiten mit `transform`),
 * und alle halten §5 ein: nie mehrfarbig, nie verzerrt bis zur Unkenntlichkeit.
 */

.marke { display: inline-flex; color: var(--accent); transform-origin: 50% 60%; }
.marke svg { display: block; }

/* Das Grundverhalten ohne Zutun: ein leises Heben beim Überfahren. */
.marke:hover { animation: marke-huepfer .5s ease; }

/* Die sechs. `js/seite.js` setzt `data-laune` beim Antippen auf eine davon.
   Das grosse Zeichen im Auftakt spielt dieselben Launen — deshalb steht es in jedem Selektor
   daneben. Es hat bewusst nicht die Klasse `.marke`: die bringt `display: inline-flex` und den
   Ueberfahr-Huepfer mit, und beides will man an einem Bild nicht haben. */
.marke[data-laune="huepfer"],  .marke-gross[data-laune="huepfer"]  { animation: marke-huepfer .5s ease; }
.marke[data-laune="drehung"],  .marke-gross[data-laune="drehung"]  { animation: marke-drehung .7s cubic-bezier(.2,.7,.2,1); }
.marke[data-laune="wackeln"],  .marke-gross[data-laune="wackeln"]  { animation: marke-wackeln .6s ease-in-out; }
.marke[data-laune="pumpen"],   .marke-gross[data-laune="pumpen"]   { animation: marke-pumpen .55s cubic-bezier(.3,1.4,.4,1); }
.marke[data-laune="nicken"],   .marke-gross[data-laune="nicken"]   { animation: marke-nicken .65s ease-in-out; }
.marke[data-laune="taumeln"],  .marke-gross[data-laune="taumeln"]  { animation: marke-taumeln .9s cubic-bezier(.2,.7,.2,1); }

@keyframes marke-huepfer {
  0%, 100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-7px) scale(1.04, .96); }
  55%      { transform: translateY(0) scale(.97, 1.03); }
  75%      { transform: translateY(-2px) scale(1); }
}

@keyframes marke-drehung {
  0%   { transform: rotate(0) scale(1); }
  60%  { transform: rotate(374deg) scale(1.06); }   /* ein Stück über die Runde hinaus … */
  100% { transform: rotate(360deg) scale(1); }      /* … und zurück: das macht es lebendig */
}

@keyframes marke-wackeln {
  0%, 100% { transform: rotate(0); }
  15%  { transform: rotate(-9deg); }
  35%  { transform: rotate(7deg); }
  55%  { transform: rotate(-5deg); }
  75%  { transform: rotate(3deg); }
}

@keyframes marke-pumpen {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.18); }
  70%      { transform: scale(.95); }
}

/* Ein Nicken: die Schlaufen kippen nach vorn, als würde jemand zustimmen. */
@keyframes marke-nicken {
  0%, 100% { transform: perspective(200px) rotateX(0); }
  40%      { transform: perspective(200px) rotateX(28deg) translateY(2px); }
  70%      { transform: perspective(200px) rotateX(-8deg); }
}

@keyframes marke-taumeln {
  0%   { transform: translateY(0) rotate(0); }
  25%  { transform: translateY(-9px) rotate(-12deg); }
  50%  { transform: translateY(-3px) rotate(10deg); }
  75%  { transform: translateY(-6px) rotate(-5deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* Das große Zeichen über „Die KI fragt." — es schwebt, statt zu springen: An dieser Stelle ist
   es Bild, nicht Knopf. Der Scroll-Aufbau gilt trotzdem (Markus: „mit der scroll regel"). */
.marke-gross { width: clamp(96px, 14vw, 168px); height: auto; transform-origin: 50% 60%; }
@media (prefers-reduced-motion: no-preference) {
  .marke-gross { animation: marke-schweben 8s ease-in-out infinite; }
}

@keyframes marke-schweben {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-12px) rotate(1.5deg); }
}

/* ---------- Kopf ------------------------------------------------------------------------- */

/* Eine schwebende Pille, kein Balken über die volle Breite.
 *
 * Zwei Gründe, und der zweite ist der wichtigere. Erstens ist sie das erste Glas-Bauteil, das man
 * sieht — sie sagt in der ersten Sekunde, woraus diese Seite gebaut ist. Zweitens hat ein Balken
 * **keine Kante**: Er läuft links und rechts aus dem Bild, oben schliesst er mit dem Fensterrand
 * ab. An einem Bauteil ohne Ecken kann eine Formsprache nichts zeigen — Markus am 03.08.: „der
 * stil soll auch am header funktionieren". Eckig, abgerundet und rundlich sieht man erst, seit
 * der Kopf vier Ecken hat.
 *
 * `pointer-events` trennt Träger und Pille: Der fixierte Rahmen liegt über der ganzen Breite,
 * fängt aber nichts ab — sonst wäre der Streifen links und rechts der Pille eine unsichtbare
 * Wand über den Inhalten.
 */
.kopf {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;
}

.kopf-inner {
  pointer-events: auto;
  width: min(1060px, calc(100% - 32px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 9px 9px 20px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
}

/* Der Raum, den die fixierte Pille beansprucht. `seite.js` misst ihn und schreibt
   `--kopf-hoehe` — hier steht nur ein Rückfallwert für den Fall, dass kein Skript läuft. */
body { padding-top: calc(var(--kopf-hoehe, 62px) + 26px); }
.marke-zeile { display: inline-flex; align-items: center; gap: 10px; }
.marke-name { font-family: var(--font-titel); font-weight: 700; font-size: 19px; }

/* `nowrap` auch hier — und das ist der Punkt, an dem die Messung überhaupt erst greift.
   Umgebrochen ist nicht die Kopfzeile, sondern die Leiste in sich: Bei 1000 px stand der
   Kopf auf 104 px, während `scrollWidth === clientWidth` brav „passt" meldete. Wer prüfen
   will, ob etwas zu breit ist, muss es zuerst zu breit werden lassen. */
.haupt-nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: nowrap; white-space: nowrap; }
.haupt-nav a { font-size: 14.5px; color: var(--ink2); padding: 4px 0; border-bottom: 2px solid transparent; }
.haupt-nav a:hover { color: var(--ink); }

/* Der Section-Watcher setzt `aria-current` — die Auszeichnung ist damit zugleich die
   Barrierefreiheits-Information und der Anker fürs Aussehen. Kein zweiter Zustand daneben. */
.haupt-nav a[aria-current="true"] { color: var(--accent); border-bottom-color: var(--accent); }

.kopf-cta { padding: 9px 18px; font-size: 14px; min-height: 40px; white-space: nowrap; }

/* Unter 900 px passt die Abschnittsnavigation nicht mehr neben Marke, Status, Zahnrad und CTA.
 * Sie umbrechen zu lassen war die schlechteste der drei Möglichkeiten: Der Kopf wuchs auf 236 px
 * und blieb dabei klebend — knapp ein Drittel des Telefonbildschirms, dauerhaft belegt.
 *
 * Sie verschwindet also, und die Sprünge stehen im Einstellungsmenü, das ohnehin schon zu Theme
 * und Stil springt. Ein zweites Menü daneben wäre ein zweiter Ort für dieselbe Sache. */
/* **Die Zeile bricht nicht — sie wird eng.**
 *
 * `nowrap` ist die Voraussetzung dafür, dass `seite.js` die Enge überhaupt messen kann: Bricht
 * die Leiste um, passt sie ja immer, nur eben auf zwei Zeilen. Genau so wuchs der Kopf auf 236 px
 * und stand mit „Zugang" allein in der zweiten Reihe.
 *
 * Die feste Grenze bei 900 px ist damit weg. Wann es klemmt, hängt an der Sprache, der
 * Schriftgrösse des Systems und daran, wie viele Abschnitte es gerade gibt — geraten wird das
 * nicht mehr. */
.kopf-inner { flex-wrap: nowrap; }
.kopf[data-eng="true"] .haupt-nav,
.kopf[data-eng="voll"] .haupt-nav { display: none; }
.kopf[data-eng="true"] .kopf-inner,
.kopf[data-eng="voll"] .kopf-inner { gap: 12px; padding-left: 16px; }
.kopf[data-eng="true"] .marke-zeile,
.kopf[data-eng="voll"] .marke-zeile { margin-right: auto; }

/* **Die zweite Engestufe** (Knut, 04.08.2026).
 *
 * Auf einem 375er-Telefon reichte das Ausblenden der Abschnittsleiste nicht: Der Kopf brauchte
 * gemessen 456 px bei 341 px Platz, und vom Knopf „Tester werden" blieben 18 von 132 px im Bild.
 *
 * Hier weicht deshalb Beiwerk, in dieser Reihenfolge: das **Wort** am Dienstpunkt (der Punkt
 * bleibt und sagt dasselbe), dann Polster. Der Knopf selbst wird nur enger, nicht kürzer — er
 * ist die Handlung, um die die Seite bittet, und das Letzte, was gehen darf.
 *
 * Der Punkt behält seine Vorlesbarkeit: `.relay-wort` verschwindet optisch, die Bedeutung steht
 * weiterhin im `aria-label` des Knopfes. */
.kopf[data-eng="voll"] .relay-wort { display: none; }
.kopf[data-eng="voll"] .kopf-inner { gap: 6px; padding-left: 10px; padding-right: 6px; }
/* Der Knopf wird enger und eine Spur kleiner, aber sein Text bleibt vollständig: „Tester
   werden" sagt, was passiert; ein abgekürztes „Tester" wäre eine Beschriftung ohne Verb.
   Auf 320 px reichten Polster allein nicht — dort fehlten nach allen anderen Schritten noch
   20 px. */
.kopf[data-eng="voll"] .kopf-cta { padding: 8px 10px; font-size: 13px; }
/* Zuletzt weicht das Markenwort — das Zeichen daneben trägt die Marke allein weiter, und auf
   einem 375er-Telefon ist genau das die übliche Lösung. Gemessen brachte das die letzten 62 px,
   die noch fehlten: 378 px Inhalt auf 341 px Platz gingen damit auf 316 px zurück. */
.kopf[data-eng="voll"] .marke-name { display: none; }

/* **Zwei Knöpfe, zwei Blätter.**
 *
 * Erst hatte ich beides in einen Knopf gelegt — Zahnrad bei Platz, Burger bei Enge, dahinter
 * dasselbe Blatt. Markus hat das zurückgedreht, und der Grund ist sauber: Abschnitte sind der
 * **Weg** durch die Seite, Sprache und Glas sind ihr **Aussehen**. Wer zu „Umfang" will, sucht
 * keine Einstellungen.
 *
 * Der Burger steht deshalb daneben statt anstelle — und nur dann, wenn die Leiste nicht mehr in
 * die Zeile passt. Bei Platz wäre er die dritte Stelle für dieselben sieben Ziele. */
.abschnitts-menue { position: relative; display: none; }
.kopf[data-eng="true"] .abschnitts-menue,
.kopf[data-eng="voll"] .abschnitts-menue { display: block; }
.einstellungen { position: relative; }

/* Ganz schmal trägt der Statusanzeiger nur noch den Punkt — das Wort steht im Menü. */
@media (max-width: 520px) {
  .kopf-cta { padding: 9px 14px; }
}

/* ---------- Der Statusanzeiger ------------------------------------------------------------
 *
 * Rot oder grün — **fest**, nicht aus der Farbwelt. Markus am 03.08.: „der punkt soll rot oder
 * grün sein, jetzt wechselt er mit dem farb theme." Ein Betriebszustand ist keine Geschmacksfrage;
 * er muss in jedem Stil dasselbe heißen.
 */
.relay-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 4px 8px;
  color: var(--ink3);
  font-family: var(--font-status);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.relay-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--status-unbekannt); flex: 0 0 auto; }
.relay-status[data-zustand="live"] .relay-punkt { background: var(--status-gruen); }
.relay-status[data-zustand="angeschlagen"] .relay-punkt { background: var(--status-gelb); }
/* Wartung ist ein eigener Betriebszustand, kein halbes Grün und kein halbes Rot: blau —
   die einzige Statusfarbe, die hier sonst nicht vorkommt, damit sie niemand mit einer
   Störung verwechselt (09.08.2026). */
.relay-status[data-zustand="wartung"] .relay-punkt { background: var(--status-blau, #4a7fd4); }
.relay-status[data-zustand="aus"] .relay-punkt { background: var(--status-rot); }

/* Ein Anzeiger, den man antippen kann, um sofort neu zu prüfen, braucht auch eine Fläche dafür.
   22 px hoch waren die Hälfte der 44, die der Vertrag für Berührungsziele nennt. */
.relay-status { min-height: 44px; }

/* Schmal wird das Wort kurz statt still. Ein nackter 8-px-Punkt ohne Beschriftung sagt nur
   „irgendein Zustand" — die Farbe allein ist nach §4 nie das Signal. `js/seite.js` setzt den
   Kurztext aus derselben Wortliste. */
@media (max-width: 720px) {
  .relay-wort { font-size: 10px; letter-spacing: 0.06em; }
}

/* ---------- Hero -------------------------------------------------------------------------- */

.hero { padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 88px); }

/* Zweispaltig ab 920 px: links das Wort, rechts das Telefon. Darunter untereinander und
   mittig — auf einem Telefon ein Telefon neben Text zu stellen ergibt zwei zu schmale Spalten. */
/* **Das Gerät steht unter dem Auftakt, nicht daneben** (Markus, 03.08.).
 *
 * Zweispaltig hatte es eine unangenehme Folge: Das Wort musste sich die Breite teilen, und die
 * Überschrift brach schon bei 1100 px in drei Zeilen. Untereinander bekommt beides die volle
 * Breite — erst die Behauptung, dann der Beleg. Das ist ohnehin die Reihenfolge, in der man
 * liest. */
.hero-inner { display: grid; gap: 44px; justify-items: center; text-align: center; }
.hero-wort { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 62ch; }

/* Die Phasenmarke steht **oben**, nicht unter dem Knopf: Sie ist die Bedingung, unter der alles
   Folgende gilt — wer sie erst hinterher liest, hat den Knopf schon gedrückt. */
.hero-marke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  font-family: var(--font-status);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink2);
}
.hero-marke::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--glow);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-marke::before { animation: puls 2.4s ease-out infinite; }
}
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 var(--glow); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Die Überschrift trägt einen Verlauf von der Schriftfarbe in den Akzent.
 *
 * **Beide Enden sind gemessen**, und das ist der Grund, warum genau diese zwei: `--ink` ist die
 * Textfarbe, `--accent` wurde heute in allen acht Welten auf ≥ 4.5:1 gebracht. Ein Verlauf, der
 * in `--accent2` ausläuft, sähe in Neon schöner aus und wäre an seinem hellen Ende nicht mehr
 * belegt — bei einer Überschrift in 74 px ist das die Grenze zwischen Wirkung und Behauptung.
 *
 * `color` bleibt gesetzt: Browser ohne `background-clip: text` zeigen dann die Schriftfarbe statt
 * einer unsichtbaren Überschrift. */
/* **Der Verlauf gehört jetzt allen Überschriften** (Markus, 04.08.2026: „die dicke Überschrift
 * farblich mehr abstufen. diese abstufungen bekommen die kleineren überschriften darunter auch
 * alle").
 *
 * Vorher trug ihn nur die Hero-Überschrift, und mit drei Stops: Zwei Drittel des Weges blieben
 * nahe an der Schriftfarbe, der Akzent kam erst ganz am Ende. Auf einer kurzen Zeile sah man
 * davon kaum etwas — der Verlauf war eher Idee als Wirkung.
 *
 * Fünf gleichmässige Stufen statt drei ungleicher: Damit ist die Staffelung auch über zwei, drei
 * Wörter zu sehen, und sie wirkt bei jeder Zeilenlänge gleich.
 *
 * **Warum das auch bei 19 px trägt.** Beide Enden sind gemessen: `--ink` ist die Textfarbe,
 * `--accent` steht in allen acht Welten auf ≥ 4.5:1. Ein Verlauf, der in `--accent2` ausliefe,
 * sähe in Neon reizvoller aus und wäre an seinem hellen Ende unbelegt. Deshalb genau diese zwei
 * Enden — und deshalb dürfen auch die kleinen Überschriften mit. */
:root { --titel-verlauf: linear-gradient(168deg,
    var(--ink) 0%,
    color-mix(in oklab, var(--ink) 75%, var(--accent)) 25%,
    color-mix(in oklab, var(--ink) 50%, var(--accent)) 50%,
    color-mix(in oklab, var(--ink) 25%, var(--accent)) 75%,
    var(--accent) 100%); }

.hero h1,
.abschnitt-kopf h2,
.karte h3 {
  /* `color` bleibt gesetzt: Browser ohne `background-clip: text` zeigen dann die Schriftfarbe
     statt einer unsichtbaren Überschrift. */
  color: var(--ink);
  background: var(--titel-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero h1 {
  font-family: var(--font-titel);
  font-size: clamp(42px, 5.6vw, 74px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0;
}
@supports not (background-clip: text) {
  .hero h1,
  .abschnitt-kopf h2,
  .karte h3 { -webkit-text-fill-color: currentColor; }
}
.hero-text { max-width: 56ch; color: var(--ink2); font-size: 17.5px; }
/* Die drei Zusagen als eigene Pillen, nicht als Aufzählung.
 *
 * Eine Liste mit Punkten liest sich als Fortsetzung des Absatzes darüber — hier sind es aber
 * drei einzelne Aussagen, jede für sich vollständig. Als getrennte Flächen sieht man das: drei
 * Dinge, nicht ein Satz in drei Zeilen.
 *
 * `align-items: flex-start` statt `stretch`: Jede Pille ist so breit wie ihr Text. Gleich breite
 * Pillen wären wieder eine Tabelle — die unterschiedlichen Längen sind der Beleg, dass es drei
 * Aussagen sind und keine Rubriken. */
.hero-punkte {
  list-style: none;
  /* Luft darüber und darunter: Die drei Zusagen sind der Übergang vom Fliesstext zum Knopf —
     ohne Abstand kleben sie an beidem und lesen sich als Fortsetzung des Absatzes. */
  margin: 14px 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Mittig, auch am breiten Schirm: Sie gehören zur Mitte der Seite, nicht an ihre linke Kante. */
  align-items: center;
  gap: 14px;
  text-align: left;
}
.hero-punkte li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 22px 12px 18px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
  color: var(--ink2);
  font-size: 16px;
}
/* Derselbe Puls wie an der Phasenmarke — es ist derselbe Gedanke: Hier läuft etwas.
 *
 * Versetzt, nicht im Gleichtakt: Drei Punkte, die zusammen blinken, sind ein Signal; drei, die
 * nacheinander atmen, sind drei Aussagen. 0,8 s Abstand bei 2,4 s Dauer heisst, dass immer genau
 * einer in der Bewegung ist. */
.hero-punkte li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--glow);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-punkte li::before { animation: puls 2.4s ease-out infinite; }
  .hero-punkte li:nth-child(2)::before { animation-delay: .8s; }
  .hero-punkte li:nth-child(3)::before { animation-delay: 1.6s; }
}

/* Mittig bleibt mittig: Solange das Wort zentriert steht, stehen auch die Pillen in der Mitte. */
.hero-aktion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }

/* ---------- Das Telefon im Auftakt ---------------------------------------------------------
 *
 * Kein Bild, sondern gebaute Bauteile: Es trägt dieselben Karten, Chips und Knöpfe wie der Rest
 * der Seite und wechselt deshalb mit Farbwelt, Formsprache und Glas mit. Ein PNG hätte in sieben
 * von acht Welten falsch ausgesehen — und wäre bei jeder Änderung an den Stufen veraltet.
 *
 * Die Freunde-Zeile ist `opak`. Das ist der Kern des Bildes: Was auf Geheim steht, schimmert
 * nicht — auch nicht im Schaubild.
 */
/* Es schwebt — dieselbe ruhige Bewegung wie das grosse Zeichen darüber, nur langsamer und mit
   einer Spur Neigung. Nicht synchron zum Logo: Zwei Dinge, die im Gleichtakt wippen, sehen aus
   wie ein Bauteil; leicht gegeneinander versetzt sehen sie aus, als lägen sie im Raum. */
@media (prefers-reduced-motion: no-preference) {
  .telefon { animation: telefon-schweben 11s ease-in-out infinite; }
}
/* Die Bewegung ist eine Lage im Raum, keine Auf-und-ab-Schleife: Es kippt ein Achtel Grad,
   wandert dabei ein paar Pixel und kommt nie exakt an denselben Punkt zurück — deshalb drei
   ungleiche Stationen statt zwei. `perspective` macht aus dem Kippen eine Drehung im Raum
   statt einer Scherung in der Fläche. */
@keyframes telefon-schweben {
  0%, 100% { transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg); }
  28%      { transform: perspective(1400px) translate3d(-3px, -12px, 0) rotateX(1.4deg) rotateZ(-0.5deg); }
  55%      { transform: perspective(1400px) translate3d(2px, -5px, 0) rotateX(-0.8deg) rotateZ(0.35deg); }
  78%      { transform: perspective(1400px) translate3d(-1px, -9px, 0) rotateX(0.6deg) rotateZ(-0.15deg); }
}

.telefon {
  width: min(340px, 100%);
  padding: 16px 14px 14px;
  border-radius: calc(var(--r-lg) + 14px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;

  /* **Ein Rahmen, kein Strich.**
   *
   * Ein Gerät hat eine Kante mit Dicke: Oben fängt sie Licht, unten gibt sie es zurück. Drei
   * Innenschatten bilden das ab — heller Lichtsaum oben, dunkler Fussschatten unten, dazu ein
   * schmaler Ring, der die ganze Kante umläuft. Ein einzelner `border` wäre eine Linie um eine
   * Fläche; das hier ist eine Kante um einen Körper.
   *
   * Und darunter zwei Schatten statt einem: ein enger, harter direkt an der Unterkante (das
   * Gerät berührt etwas) und ein weiter, weicher darunter (es steht davon ab). Ein einzelner
   * Schatten sieht immer aus wie aufgeklebt — die Tiefe entsteht aus dem Abstand zwischen beiden. */
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1.5px 0 var(--glass-hi),
    inset 0 -1.5px 0 rgb(0 0 0 / 0.16),
    inset 0 0 0 1px rgb(255 255 255 / 0.06),
    0 4px 10px -4px rgb(0 0 0 / 0.35),
    0 34px 60px -18px rgb(0 0 0 / 0.42);
}
.telefon-leiste {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-status);
  font-size: 10px;
  color: var(--ink3);
  padding: 0 6px 2px;
}
.telefon-kopf { display: flex; align-items: center; gap: 9px; padding: 0 6px 4px; color: var(--accent); }
.telefon-kopf strong { font-family: var(--font-titel); font-size: 17px; color: var(--ink); }

.telefon-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.telefon-liste li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  font-size: 14.5px;
}
.telefon-liste li.opak { background: var(--bg2); border-color: var(--line); }
.telefon-liste .zahl { color: var(--ink3); font-family: var(--font-status); font-size: 12px; }
.telefon-liste .stufe { margin-left: auto; font-size: 8.5px; padding: 4px 8px; }

/* Die vier Zeichen sind Geometrie, keine Illustrationen (§7, Klausel 07) — und dieselben
   Grundformen tauchen im Abschnitt „Was im Beutel liegt" wieder auf. */
.tp { flex: 0 0 auto; width: 11px; height: 11px; }
.tp-voll { border-radius: 50%; background: var(--accent); }
.tp-ring { border-radius: 50%; border: 2.5px solid var(--accent); }
.tp-balken { height: 4px; border-radius: 2px; background: var(--accent); }
.tp-leer { border-radius: 50%; background: var(--ink3); }

.telefon-anfrage { padding: 13px; border-radius: var(--r-md); display: flex; flex-direction: column; gap: 9px; }
.anfrage-kopf {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-status);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.anfrage-kopf em { margin-left: auto; font-style: normal; color: var(--ink3); text-transform: none; letter-spacing: 0.04em; }
.telefon-anfrage p { margin: 0; font-size: 14px; color: var(--ink2); }
.telefon-anfrage strong { color: var(--ink); }
.anfrage-knoepfe { display: flex; gap: 8px; }
/* Attrappen: `span`, kein `button`. Ein Knopf, der nichts tut, gehört nicht in die Tabreihenfolge. */
.anfrage-knoepfe .knopf { flex: 1; padding: 10px 12px; font-size: 13px; text-align: center; justify-content: center; cursor: default; }
.anfrage-knoepfe .knopf:hover { transform: none; }
.telefon-fuss {
  margin: 2px 0 0;
  text-align: center;
  font-family: var(--font-status);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
}
/* FB23: Der Satz unter dem Telefon (05.08.2026).
   Bewusst leise — er soll erklären, nicht ablenken, und schon gar nicht wie eine Entschuldigung
   aussehen. Steht ausserhalb der Telefonkarte, weil er über sie spricht und nicht in ihr. */
.telefon-hinweis {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink3);
}

.hero-meta { font-family: var(--font-status); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); margin: 0; }

/* ---------- Abschnitte -------------------------------------------------------------------- */

/* Der Takt: gezeichnet waren konstant 130 px zwischen den Abschnitten, gebaut kamen 192–207
   heraus (oben und unten je ein `clamp`, das sich addiert). Der Unterschied klingt klein und ist
   er nicht: 200 px zerreissen die Erzählung in Einzelfolien, 130 halten die Abschnitte so dicht,
   dass sie sich noch aufeinander beziehen. Nur oben, damit sich nichts addiert. */
section { padding: clamp(88px, 10vw, 130px) 0 0; position: relative; z-index: 1; }
/* Der letzte Abschnitt braucht seinen Fuss trotzdem — sonst klebt er an der Fusszeile. */
main > section:last-of-type { padding-bottom: clamp(72px, 8vw, 110px); }

/* Ein Ankersprung landet sonst unter der schwebenden Pille — bei 768 px verschwanden 40 px des
   Abschnittskopfs, auf dem Telefon rund 140. Jeder Klick auf die eigene Navigation hätte damit
   vorgeführt, dass die Seite ihre eigene Navigation nicht mitgedacht hat. */
section[id], [id].abschnitt { scroll-margin-top: calc(var(--kopf-hoehe, 62px) + 26px); }
.wrap.schmal { max-width: 760px; }
/* Die Schrittzahlen tragen den Verlauf als Text — grösser und mit Farbverlauf gehören sie zur
   Marke, flach und einfarbig waren sie Nummerierung. `background-clip: text` braucht eine
   Rückfallfarbe für Browser, die es nicht können: erst `color`, dann überschreiben. */
.schritt-nr {
  font-family: var(--font-titel);
  font-size: 38px;
  font-weight: 800;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
  line-height: 1;
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .schritt-nr { -webkit-text-fill-color: currentColor; }
}
.zeichen { width: 26px; height: 26px; color: var(--accent); display: block; margin-bottom: 12px; }
.fussnote { margin-top: 22px; color: var(--ink3); font-size: 14.5px; max-width: 62ch; }
.liste { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; color: var(--ink2); font-size: 15px; }
.liste li { display: flex; align-items: baseline; gap: 9px; }
.liste li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.liste a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); }

/* **Ein Ausschluss trägt keinen Akzentpunkt.**
 *
 * „Kein CrewPouch" stand mit demselben gefüllten Punkt da wie „Verschlüsseltes Backup" — die
 * Aufzählung behauptete damit das Gegenteil des Textes. Ein Hohlring in leiserer Farbe sagt beim
 * Überfliegen, was Sache ist, bevor man das Wort „kein" gelesen hat. */
.liste li.fehlt { color: var(--ink3); }
.liste li.fehlt::before {
  background: transparent;
  border: 1.5px solid var(--ink3);
  width: 7px;
  height: 7px;
}

/* Die Empfehlung — ohne sie waren die drei Karten gleich stark und die Seite sagte nicht, womit
   man anfängt. Der Chip schwebt auf der oberen Kante, weil er zur Karte gehört, aber nicht in
   ihre Reihenfolge. */
.tarif-empfohlen {
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi);
}
.tarif-chip {
  position: absolute;
  top: 0;
  left: 26px;
  transform: translateY(-50%);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-status);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Ohne den Zuschlag stünde die Überschrift der Pro-Karte höher als die der beiden Nachbarn: Sie
   hat keinen Kicker mehr, sondern den schwebenden Chip. */
.tarif-empfohlen { padding-top: 36px; }
.tarif-unter { color: var(--ink2); font-size: 15px; margin: 0 0 4px; }
.liste a:hover { color: var(--accent); }

/* ---------- Stil-Kacheln ------------------------------------------------------------------ */

/* **Neun Kacheln, drei mal drei.**
 *
 * `auto-fill` füllte die Breite und ergab vier, vier, eine — die neunte stand allein in einer
 * Reihe mit drei leeren Plätzen daneben. Neun ist eine Quadratzahl, und drei Reihen zu dritt
 * zeigen das; die Formsprache hat drei Kacheln und passt in dieselbe Spaltenbreite.
 *
 * Zwei feste Stufen darunter, keine automatische: Bei `auto-fill` entscheidet die Fensterbreite,
 * wie viele Reihen entstehen — und damit sähe die Aufteilung auf jedem Bildschirm anders aus. */
.stil-raster { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .stil-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stil-raster { grid-template-columns: 1fr; } }
.stil-kachel { text-align: left; background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--r-lg); cursor: pointer; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.stil-kachel[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.stil-probe { display: block; height: 68px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); padding: 10px; overflow: hidden; }

/* Die neunte Kachel wählt man nicht aus — sie sagt, dass es diese Farbwelt gibt und wo.
   Gestrichelt und ohne Zeiger: was nicht klickbar ist, soll auch nicht danach aussehen. */
.stil-nur-app { border-style: dashed; cursor: default; opacity: 0.9; }
.stil-nur-app:hover { transform: none; }
/* Der Farbkreis kommt aus der Token-Quelle wie jede andere Farbe auch — §1 kennt keine
   Ausnahme für Verläufe. */
.stil-probe-system { background: var(--system-rad); }
.stil-flaeche { display: block; height: 100%; background: var(--bg2); border-radius: var(--r-sm); padding: 8px; }
.stil-akzent { display: block; width: 26px; height: 6px; border-radius: 3px; background: var(--accent); margin-bottom: 7px; }
.stil-zeile { display: block; height: 5px; border-radius: 3px; background: var(--ink); opacity: .28; margin-bottom: 5px; }
.stil-zeile.kurz { width: 58%; }
.stil-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stil-name { font-family: var(--font-titel); font-weight: 600; font-size: 15px; }
.stil-tarif[data-tarif="Gratis"] { background: transparent; border: 1px solid var(--line); color: var(--ink3); }
.stil-tarif[data-tarif="Pro"] { background: var(--accent-soft); color: var(--ink); }
.stil-tarif[data-tarif="Max"] { background: var(--accent); color: var(--accent-ink); }
.stil-hinweis { font-size: 13px; color: var(--ink3); }

/* ---------- Fußzeile und der Pfeil nach oben ---------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); padding: 40px 0; position: relative; z-index: 1; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-titel); font-weight: 700; }
.footer-brand svg { width: 24px; height: 24px; color: var(--accent); }
.footer-meta { color: var(--ink3); font-size: 13.5px; margin: 8px 0 0; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.footer-links a { color: var(--ink2); }
.footer-links a:hover { color: var(--accent); }

.nach-oben {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  /* Unsichtbar, aber nicht `display:none` — sonst gäbe es keinen Übergang, und der Knopf
     erschiene mit einem Ruck. */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.nach-oben.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben svg { width: 20px; height: 20px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-md); }

a { color: inherit; text-decoration: none; }
/* `:not(.knopf)` ist der Kern der Sache (Markus, 05.08.2026, aus dem mobilen Firefox).
   Gemeint sind Fliesstext-Links in Karten. Ohne die Ausnahme traf die Regel auch jeden Knopf, der
   in einer Karte sass — „Alle Fragen ansehen" und das zweite „Auf die Warteliste" sahen dadurch
   aus wie rohe Links.
   Ein `text-decoration: none` beim Knopf selbst genügt NICHT: `.karte a` wiegt (0,1,1) und schlägt
   `.knopf` mit (0,1,0). Die Ausnahme gehört deshalb hierher, wo zu viel eingesammelt wird — und
   sie sagt zugleich, was die Regel meint. */
.abschnitt-kopf a, .karte a:not(.knopf) { text-decoration: underline; text-decoration-color: var(--line); }

/* ---------- Die Formkacheln (Stil) ------------------------------------------------------- */

.form-probe { display: flex; align-items: center; gap: 10px; height: 68px; padding: 12px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md); }
.form-karte { flex: 1; height: 100%; background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: var(--r-lg); }
.form-knopf { width: 46px; height: 26px; background: var(--accent); border-radius: var(--r-pill); }
.form-chip { width: 22px; height: 22px; background: var(--ink); opacity: .3; border-radius: var(--r-sm); }

/* ---------- Das Einstellungsmenü ---------------------------------------------------------- */

.einstellungen { position: relative; }

.e-knopf {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--ink2);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.e-knopf:hover { color: var(--ink); border-color: var(--accent-soft); }
.e-knopf svg { width: 19px; height: 19px; }

/* **`[hidden]` muss gewinnen.** `display: flex` unten hat höhere Spezifität als das
   Browser-Standardverhalten von `[hidden]` (`display: none`) — ohne diese Zeile bleibt das Panel
   sichtbar, egal was das Attribut sagt. Genau so am 03.08. passiert: Das Menü liess sich nicht
   wegklicken, weil es nie versteckt war.

   Die Regel steht VOR der Hauptregel, damit sie bei gleicher Spezifität nicht gewinnt — sie
   gewinnt über das Attribut, das eine Spezifitätsstufe mehr trägt. */
.e-panel[hidden] { display: none; }

.e-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(320px, calc(100vw - 32px));
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* **Ein Menü ist kein Fenster.**
   *
   * Es stand auf `--glass-strong` und war damit an den Glasregler gekoppelt — bei 10 blieben im
   * Dunkeln 21 % Deckkraft, und man las die Überschrift dahinter mitten durch die Schaltflächen.
   * Markus: „egal wie ich den regler stelle es ist bei diesen menüs immer der text dahinter ein
   * problem".
   *
   * Der Regler bestimmt, wie durchsichtig **Flächen** sind, auf denen etwas steht. Ein Blatt, das
   * sich über den Inhalt legt, ist etwas anderes: Es verdeckt, sonst wäre es keins. Deshalb 96 %
   * Deckkraft, unabhängig vom Regler — der Blur bleibt und trägt den Glascharakter weiter, aber
   * er ist jetzt Beiwerk statt Voraussetzung für die Lesbarkeit.
   *
   * Das ist keine Ausnahme vom Vertrag, sondern §4: „Nie nur Farbe als Signal" hat dieselbe
   * Wurzel — was man lesen können muss, wird nicht zur Geschmacksfrage gemacht. */
  background: color-mix(in srgb, var(--bg2) 96%, transparent);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(calc(var(--blur) + 6px)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(calc(var(--blur) + 6px)) saturate(var(--sat));
}

/* Auf dem Telefon hing das Panel an `right: 0` des Zahnrads — und weil das in der umgebrochenen
 * Kopfzeile links stand, begann es bei `left: -282px`: vier Fünftel ausserhalb des Bildes,
 * unbedienbar. Ausgerechnet dort ist es der einzige Zugang zu Sprache, Modus und Glas.
 *
 * Schmal wird daraus ein eigenes Blatt, das an beiden Fensterrändern hängt statt an einem Knopf.
 * `dvh` statt `vh`, weil die Adressleiste auf dem Telefon mitwandert. */
@media (max-width: 720px) {
  .e-panel {
    position: fixed;
    top: calc(var(--kopf-hoehe, 62px) + 22px);
    left: 16px;
    right: 16px;
    width: auto;
    max-height: calc(100dvh - var(--kopf-hoehe, 62px) - 44px);
    overflow-y: auto;
  }
}

.e-zeile { display: flex; flex-direction: column; gap: 7px; }
.e-titel { font-family: var(--font-status); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
/* Der Wert steht rechts in der Beschriftungszeile — im Akzent, weil er das Einzige darin ist,
   das sich ändert. */
.e-glas-wert { color: var(--accent); font-variant-numeric: tabular-nums; }

.e-reihe { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--glass-edge); border-radius: var(--r-pill); background: var(--glass); }
.e-reihe button, .e-reihe a {
  flex: 1;
  appearance: none; border: 0; background: none;
  padding: 7px 10px; min-height: 34px;
  border-radius: var(--r-pill);
  color: var(--ink2);
  font-family: var(--font-titel); font-size: 12.5px; font-weight: 600;
  text-align: center; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.e-reihe button:hover, .e-reihe a:hover { color: var(--ink); }
.e-reihe button[aria-pressed="true"], .e-reihe a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }

.e-glas { display: flex; flex-direction: column; gap: 4px; }
.e-glas input[type="range"] { width: 100%; accent-color: var(--accent); }
.e-glas-marken { display: flex; justify-content: space-between; font-family: var(--font-status); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }

/* Theme und Stil sind hier Sprünge, keine Auswahl — beide brauchen eine Vorschau, um wählbar
   zu sein, und die steht im Abschnitt. */
.e-spruenge { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.e-spruenge a { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: var(--r-md); transition: background .18s ease; }
.e-spruenge a:hover { background: var(--glass); }
/* Man ist schon da. Dieselbe Aussage wie das aria-current in der Leiste, nur an einem Ort, wo
   der Eintrag zwei Zeilen hat — deshalb eine Marke an der Kante statt einer Unterstreichung. */
.e-spruenge a[aria-current="true"] { background: var(--glass); box-shadow: inset 2px 0 0 var(--accent); }
.e-spruenge a[aria-current="true"] strong { color: var(--accent); }
.e-spruenge strong { font-family: var(--font-titel); font-size: 14px; font-weight: 600; color: var(--ink); }
.e-spruenge span { font-size: 12.5px; color: var(--ink3); }

/* Die Abschnittsliste im Menü — nur da, wo die Leiste im Kopf fehlt (siehe `einstellungen.js`).
   Zwei Spalten, weil sieben Ziele untereinander das Blatt auf dem Telefon länger machen als der
   Bildschirm hoch ist. */
.e-abschnitte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.e-abschnitte[hidden] { display: none; }
.e-abschnitte a {
  padding: 10px 11px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--r-md);
  font-size: 14.5px;
  color: var(--ink2);
  transition: background .18s ease, color .18s ease;
}
.e-abschnitte a:hover { background: var(--glass); color: var(--ink); }
/* Wo man gerade ist — dieselbe Aussage wie die Unterstreichung in der Leiste, nur als
   Flaeche, weil eine Liste keine Unterkante zum Markieren hat. */
.e-abschnitte a[aria-current="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

/* Sprungliste der FAQ-Sektion auf der Startseite (05.08.2026).
 *
 * Fünf Gruppen nebeneinander, umbrechend — keine Aufzählungspunkte, weil es keine Aufzählung ist,
 * sondern fünf Türen. Sie sehen aus wie Etiketten, nicht wie Fliesstext-Links: Wer eine konkrete
 * Frage hat, soll sie mit den Augen finden, ohne zu lesen. */
.faq-sprungliste {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.faq-sprungliste a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink2);
  transition: border-color 200ms cubic-bezier(.2,.7,.2,1), color 200ms cubic-bezier(.2,.7,.2,1);
}
.faq-sprungliste a:hover,
.faq-sprungliste a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .faq-sprungliste a { transition: none; }
}