/* ───────────────────────────────────────────────────────────────────────────
   baier.ai — Gestaltungsgesetz in Code.
   Eine Datei, keine externen Requests, keine Schriftdatei von fremden Hosts.

   FARBEN: Palette "Orchidee & Jade", gewaehlt nach Recherche vom 2026-10-09
   (Bericht: scratchpad/recherche-farben.md, 913 Zeilen, Kontraste nachgerechnet).
   Violett fuehrt, Gruen begleitet — "Violett traegt die Marke, Gruen die Aktion".
   Hue 326 Grad liegt in einer in der Schweiz unbesetzten Luecke; Abstand zum
   Stilvorbild calyxos.org (das selbst gruen+violett ist) dE 12.3.

   DREI REGELN, DIE NICHT GESCHMACK SIND:
   1. Helle Flaeche traegt dunkle Schrift, tiefe Flaeche helle Schrift. Nie
      umgekehrt — vertauscht faellt der Kontrast auf 1.99:1 und damit durch.
   2. Nie Gruen auf Violett oder Violett auf Gruen: 1.10:1, unter Deuteranopie
      praktisch 1.0:1. Die beiden Farben sind nahezu gleich hell.
   3. Farbe codiert nie allein eine Information.
   Zu aendern sind nur die drei Bloecke unten, sonst nichts.
   ─────────────────────────────────────────────────────────────────────────── */

/* Die Marke selbst, modusunabhaengig. Diese sechs Werte sind die Marke. */
:root {
  --violett-hell: #e977ed;   /* oklch(74.0% 0.200 326.1) — Leitfarbe dunkel  */
  --violett-tief: #912691;   /* oklch(48.0% 0.186 328.0) — Leitfarbe hell    */
  --gruen-hell:   #81c042;   /* oklch(74.0% 0.170 132.1) — Buntton 132°,     */
  --gruen-tief:   #406c00;   /* oklch(48.0% 0.133 131.8)   gelockt 2026-10-09 */
  --tinte:        #101017;   /* Fast-Schwarz, nie #000 */
  --papier:       #f5f4f1;   /* Fast-Weiss,   nie #fff */
}

/* Dunkel ist der Standard (Gestaltungsgesetz 6). Die Systemeinstellung des
   Besuchers wird absichtlich NICHT ausgewertet: sonst waere nach einem Klick
   auf den Umschalter nicht vorhersagbar, was er sieht. */
:root {
  --violett:  var(--violett-hell);   /* 7.51:1 auf Grund → AAA */
  --gruen:    var(--gruen-hell);     /* 8.62:1 auf Grund → AAA */
  --grund:    var(--tinte);
  --schrift:  var(--papier);         /* 17.22:1 → AAA */
  --leise:    #9a9aab;               /*  6.84:1 → AA, nur fuer Nebensaechliches */
  --auf-flaeche: var(--tinte);       /* Schrift auf der Titelflaeche */

  /* VIER Schriftgroessen im ganzen Auftritt, nicht vier pro Seite. Bis zum
     17.10.2026 waren es drei (h2 und h3 teilten --s-mittel); Entscheid Cedi
     am selben Tag: «ab jetzt sind 4 statt 3 schriftgrössen erlaubt, ich will
     diese trennung». --s-titel ist der h2 auf der Flaeche: deutlich ueber h3,
     deutlich unter h1 (am Laptop etwa 26 / 34 / 51 px). */
  --s-gross:  clamp(1.9rem, 1.2rem + 3.2vw, 3.2rem);
  --s-titel:  clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem);
  --s-mittel: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --s-klein:  1.0625rem;

  /* 88ch, nicht 72: am Laptop darf die Seite breiter sein (Cedi,
     2026-10-09). Gefahrlos, weil `.inhalt p` bei 68ch gedeckelt ist —
     die Zeilenlaenge der Prosa aendert sich dadurch nicht, nur der
     Rahmen fuer Kopf, Tabelle und Fusszeile. */
  --breite:   min(88ch, 100% - 3rem);
  --takt:     1.6;
}

:root[data-farbmodus="hell"] {
  --violett:  var(--violett-tief);   /* 6.61:1 → AA */
  --gruen:    var(--gruen-tief);     /* 5.68:1 → AA */
  --grund:    var(--papier);
  --schrift:  var(--tinte);
  --leise:    #5c5c68;               /*  5.99:1 → AA */
  --auf-flaeche: var(--papier);
}

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

html { color-scheme: dark; }
:root[data-farbmodus="hell"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: var(--s-klein)/var(--takt) system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-wrap: pretty;
}

/* Keine sichtbaren Trennlinien zwischen den Zonen (Gestaltungsgesetz 1).
   Getrennt wird durch Abstand und durch Flaeche, sonst nichts. */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--gruen); }
/* Links auf grauem Grund (Vorspann/Schluss, Fuss, Sprachen, leise Signatur):
   beim Ueberfahren nicht nur die Unterlinie farbig, sondern die Schrift hell
   bzw. dunkel wie der Lauftext (Cedi 2026-10-17: «post@baier.ai on mouseover
   nicht nur grün in der unterlinie, sondern auch weiss / hell»). */
.stand a:hover, .fuss a:hover, .sprachen a:hover, .schluss .zeichen ~ p a:hover { color: var(--schrift); }
/* Fokusring zweifarbig. Begruendung: keine einzelne Markenfarbe erreicht
   3:1 gegen den Seitengrund UND gegen die helle Titelflaeche. Papier aussen,
   Tinte als Ring darunter — damit ist der Fokus auf beidem sichtbar. */
:focus-visible {
  outline: 2px solid var(--papier);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--tinte);
  border-radius: 2px;
}

/* ── Kopf ────────────────────────────────────────────────────────────────── */
/* MITTIG, NICHT AUF DER GRUNDLINIE. Entscheid Cedi 2026-10-09: die Links
   sollen auf halber Hoehe des Schriftzugs stehen, nicht «an der Decke
   kleben». Mit `baseline` taten sie genau das: die Wortmarke war per
   `align-self` aus der Grundlinienreihe genommen, uebrig blieben Menue und
   Schalter — und die richteten sich untereinander aus, oben in der Zeile.
   `center` ist hier zufaellig auch das Richtige fuer das Bild: der Schriftzug
   liegt im Logo auf rund 51 % der Hoehe, Bildmitte ist also Schriftmitte. Ein
   Versatz braucht es nicht; sollte die Marke je neu gesetzt werden, ist das
   die Stelle, an der man es merkt. */
.kopf {
  display: flex;
  align-items: center;
  gap: 1.1rem 1.6rem;
  /* Eine Zeile (Gestaltungsgesetz 2). Der Kopf bricht am breiten Schirm nicht
     um: wird es eng, bricht das Menue in sich (es darf schrumpfen, min-width
     0), der Farbschalter bleibt rechts auf der Zeile der Marke. Vorher stand
     er bei knapper Breite allein unter dem Menue (Cedi 2026-10-17:
     «wie ein Schusterjunge»). Am schmalen Schirm wrappt der Kopf weiterhin. */
  flex-wrap: nowrap;
  width: var(--breite);
  margin: 0 auto;
  padding-block: 1.9rem 3.4rem;
}
.marke { text-decoration: none; font-weight: 700; font-size: var(--s-mittel); letter-spacing: -.01em; }
/* Die Wortmarke bringt ihren eigenen Grund mit, der dem Seitengrund
   entspricht — ihr Rechteck ist also groesser als das, was man sieht.
   `width` statt `height`, weil die Marke in der Breite liest.
   Das frueher noetige `align-self: center` ist weg: der Kopf richtet jetzt
   alles mittig aus, eine Ausnahme fuer die Marke waere eine Regel, die
   nichts mehr tut. */
/* 18rem, nicht 27. Die zweite Vergroesserung um 50 % war am 2026-10-09 zu
   Recht bestellt und am selben Tag zu Unrecht: Cedi hatte die erste nie
   gesehen, weil der Browser ihm eine ein Jahr haltbare Fassung des
   Stylesheets auslieferte (siehe _partials/head.html). Der Auftrag galt also
   einer Aenderung, die laengst da war. Zurueckgenommen auf seine Anweisung.
   `max-width: 100%` bleibt: bei 14.25rem greift es nie, aber es kostet
   nichts und faengt die naechste Vergroesserung ab. */
.marke-bild { display: block; width: 18rem; max-width: 100%; height: auto; }
@media (max-width: 34rem) { .marke-bild { width: 14.25rem; } }
/* Bleibt als Rueckfall, falls irgendwo noch der Textstand steht. */
.marke-text { border-bottom: 2px solid var(--violett); }

.menu { display: flex; gap: 1.1rem; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
/* FAQ und Aktuelles als Block: bricht das Menue, gehen beide zusammen in die
   zweite Zeile, nie «Aktuelles» allein (Cedi 2026-10-17). */
.menu-gruppe { display: inline-flex; gap: 1.1rem; flex-wrap: nowrap; }
.menu a[aria-current="page"] { text-decoration-color: var(--gruen); }
/* DER FARBSCHALTER IST EIN KNOPF. Entscheid Cedi 2026-10-09: wie die Knoepfe
   auf der Angebotsseite, aber gruen statt violett — und woertlich «nur der
   Rand gruen, der bg bleibt wie der bg schon ist». Deshalb kein `background`
   hier: die Flaeche bleibt der Seitengrund, hell oder dunkel, je Farbbaum.
   Gruen ist nicht beliebig gewaehlt: es ist die Farbe der Titelhinterlegung
   und der Linkunterstreichung, violett gehoert den Wahlknoepfen. Zwei
   Bedeutungen, zwei Farben, keine Verwechslung.
   Geometrie identisch zu `.fragen label` — 2 px Rand, 0.35rem Radius,
   2.75rem Mindesthoehe (44 px) —, damit es derselbe Knopf ist und nicht
   bloss einer, der aehnlich aussieht.
   Die Rueckmeldung beim Zeigen ist die Unterstreichung, nicht ein Farb- oder
   Flaechenwechsel: ein gefuellter Grund waere genau das, was er nicht will. */
.modus {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .4rem .9rem;
  border: 2px solid var(--gruen);
  border-radius: .35rem;
  background: transparent;
  color: var(--schrift);
  text-decoration: none;
}
.modus:hover { text-decoration: underline; text-decoration-color: var(--gruen); }
.sprachen { display: flex; gap: .6rem; color: var(--leise); }

/* ── Inhalt ──────────────────────────────────────────────────────────────── */
.inhalt { width: var(--breite); margin: 0 auto; }
.inhalt > * + * { margin-top: 1.15em; }
.inhalt p, .inhalt li { max-width: 68ch; }

/* Das einzige Stilelement: vollflaechige, unifarbene Hinterlegung hinter dem
   Titel. Vorbild calyxos.org. Keine Verlaeufe, keine Transparenz, kein Muster. */
.inhalt h1, .inhalt h2 {
  display: inline-block;
  margin-block: 2.2rem .2rem;
  padding: .14em .42em;
  background: var(--violett);
  color: var(--auf-flaeche);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}
.inhalt h1 { font-size: var(--s-gross); }
.inhalt h2 { font-size: var(--s-titel); background: var(--gruen); }
.inhalt h3 { font-size: var(--s-mittel); font-weight: 700; background: none; padding: 0; }

/* Stand-Angabe direkt unter dem Titel, anstelle eines Datums. Keine neue Farbe
   und keine vierte Schriftgroesse: --leise auf der kleinen Groesse. Der engere
   Abstand ueberschreibt bewusst `.inhalt > * + *`, damit die Zeile zum Titel
   gehoert und nicht als eigener Absatz liest. */
.inhalt > .stand { margin-top: .55rem; color: var(--leise); }

/* Begriffsliste (Markdown-Definitionsliste, Seite «Technik»). Fetter Begriff,
   Erklaerung darunter, Textbreite wie bei Absaetzen. */
.inhalt dl { margin: 0; }
.inhalt dt { font-weight: 700; margin-top: 1.1em; }
.inhalt dd { margin: .2em 0 0; max-width: 68ch; }

/* ── Technik: die Kaesten (Shortcode figur) ─────────────────────────────────
   Neufassung 2026-10-17. Wer in wem steckt, ohne JS und ohne Bild. Vier
   Zwiebelschalen, jede mit eigener Farbe UND eigenem Linienstil, damit die
   Hierarchie auch ohne Farbe lesbar bleibt (FARBEN.md, Regel 3 - jede Linie
   traegt zusaetzlich ihr Etikett):

     Team     violett durchgezogen   3px
     Mensch   violett gestrichelt    2px
     Persona  gruen   durchgezogen   2px
     Agent    gruen   gestrichelt    1px

   Um das Team liegt die Sicherheitsstufe als neutrale Huelle in --leise und
   zaehlt in Linien: Basis eine, Dedicated Cloud zwei, Dedicated Hardware drei
   (die Hardwaregrenze kommt dazu; wo die Maschine steht, sagt das Etikett,
   nicht die Linienzahl - es sind drei Stufen, nicht vier). Neutral, damit
   die Stufe die vier Schalen nicht uebertoent. Die Mehrfachlinien entstehen
   aus box-shadow-Ringen mit Grund dazwischen - Gruen und Violett beruehren
   sich nie direkt (FARBEN.md, Regel 2).

   Etiketten sind Flaechen wie die Titel, aber in der kleinen Schriftgroesse:
   kein fuenftes Mass (Gestaltungsgesetz 3). */
.figur { margin-top: 1.4rem; }
.figur .reihe { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); min-width: 0; }
.figur .notiz { margin: 0 0 .7rem; color: var(--leise); max-width: none; }
.figur .etikett + .notiz { margin-top: 0; }
.figur .legende { margin: .9rem 0 0; color: var(--leise); font-size: var(--s-klein); }

.etikett { display: inline-block; margin: 0 0 .6rem; padding: .1em .45em; font-weight: 700; background: var(--violett); color: var(--auf-flaeche); line-height: 1.25; }
.etikett.gruen { background: var(--gruen); }
.etikett.neutral { background: var(--leise); }
.etikett.hell { background: var(--grund); color: var(--schrift); border: 2px dashed var(--violett); padding: calc(.1em - 2px) calc(.45em - 2px); }

/* Sicherheitsstufe: neutrale Ringe um das Team. */
.stufe { border: 2px solid var(--leise); padding: .75rem; min-width: 0; }
.stufe.l2 { margin: 6px; box-shadow: 0 0 0 4px var(--grund), 0 0 0 6px var(--leise); }
.stufe.l3 { margin: 12px; box-shadow: 0 0 0 4px var(--grund), 0 0 0 6px var(--leise), 0 0 0 10px var(--grund), 0 0 0 12px var(--leise); }

/* Plattform: traegt mehrere Teams, ist selbst kein Team. */
.plattform { border: 2px dotted var(--leise); padding: .9rem; min-width: 0; }

/* Die vier Schalen. */
.team    { border: 3px solid var(--violett); padding: .85rem; min-width: 0; }
.mensch  { border: 2px dashed var(--violett); padding: .7rem; min-width: 0; }
.persona { border: 2px solid var(--gruen);  padding: .6rem; min-width: 0; }
.agent   { border: 1px dashed var(--gruen); padding: .45rem .6rem; margin-top: .6rem; }
.persona > .agent:first-of-type { margin-top: 0; }
.figur .art { font-weight: 700; }
.figur .zugriff { color: var(--leise); }

@media (max-width: 48rem) { .figur .reihe { grid-template-columns: minmax(0, 1fr); } }

.inhalt code, .inhalt pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.inhalt pre { overflow-x: auto; padding: 1rem; background: color-mix(in oklab, var(--schrift) 7%, var(--grund)); }

/* ── Fuss ────────────────────────────────────────────────────────────────── */
.fuss {
  width: var(--breite);
  margin: 0 auto;
  padding-block: 6rem 3rem;
  color: var(--leise);
}
/* Dreispaltig, feste Reihenfolge: links die Anschrift, Mitte Anderswo, rechts
   Datenschutz (Entscheid Cedi 2026-10-17, vorher seit 2026-10-09 die Anschrift
   rechts). `auto-fit` stand hier frueher und brach bei 72ch auf zwei Spalten
   um — die dritte landete darunter. Drei feste Spalten mit kleinerem
   Zwischenraum passen in die Textbreite. Die Adressspalte bekommt `auto`: der
   Block bricht dadurch nie mitten in einer Zeile um, den Rest teilen sich die
   beiden Linkspalten. */
.fuss-raster {
  display: grid;
  gap: 2.4rem 2rem;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
}
/* Der Fuss traegt KEINE Ueberschriften (Entscheid Cedi 2026-10-09). Die frueher
   hier stehende Regel `.fuss-titel` mit gruener Flaeche ist deshalb entfernt;
   im Git liegt sie weiter. */
/* Keine Aufzaehlungspunkte, bei keiner Liste im Fuss (Entscheid Cedi
   2026-10-17: «nimm die aufzählungspunkte weg im footer, bei allen links»).
   Vorher trug nur `.blank` diese Regel, die Seitenliste links hatte Punkte. */
.fuss ul { margin: 0; padding-left: 0; list-style: none; }
.fuss a { color: var(--schrift); }

/* Liniierte Zeichen fuer «Anderswo» (Entscheid Cedi 2026-10-09: «ganz dezenten,
   linierten stil»). Dezent heisst hier: die Zeichen stehen in --leise wie der
   uebrige Fussteil und werden erst beim Zeigen so hell wie die Schrift. Keine
   Flaeche, eine einzige Strichstaerke, Hoehe wie eine Zeile — ein viertes
   Schriftmass entsteht nicht, weil das SVG kein Text ist (Gestaltungsgesetz 3).
   Der Unterstrich fiele unter dem Zeichen als Strich ohne Sinn aus, darum weg;
   die Sichtbarkeit beim Tabben traegt die globale `:focus-visible`-Regel. */
/* Mittig in der mittleren Spalte (Cedi 2026-10-17: «zentriere X und Linkedin
   in der mittleren spalte, sie neigt jetzt zu stark zum adressblock»). Die
   Adressspalte ist `auto`, die Mitte bekommt den halben Rest — linksbuendig
   klebten die zwei Zeichen darum an der Anschrift. Auf dem Telefon, wo die
   Spalten untereinander stehen, bleiben sie links wie alles andere. */
.zeichen { display: flex; gap: 1.1rem; margin-bottom: .6rem; justify-content: center; }
.zeichen a { display: block; color: var(--leise); text-decoration: none; }
.zeichen a:hover { color: var(--schrift); }
.ikon {
  display: block;
  width:  1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.anschrift { margin: 0 0 .7rem; }

/* ── Schmal ──────────────────────────────────────────────────────────────── */
/* Eine Datei, zwei Layouts. Keine serverseitige Geraeteerkennung
   (Gestaltungsgesetz 7). */
@media (max-width: 34rem) {
  :root { --breite: calc(100% - 2rem); --takt: 1.55; }
  .kopf { padding-block: 1.3rem 2.4rem; gap: .7rem 1.1rem; flex-wrap: wrap; }
  .menu { flex-basis: 100%; }
  .modus { margin-left: 0; }
  .fuss { padding-block: 4rem 2.4rem; }
  /* Drei Spalten nebeneinander sind auf dem Telefon keine Spalten mehr, sondern
     drei Schluchten. Untereinander, in der Reihenfolge des Markups. */
  .fuss-raster { grid-template-columns: 1fr; gap: 1.8rem; }
  .zeichen { justify-content: flex-start; }
}

/* ── Angebotsseite: der Entscheidungsbaum, ohne JavaScript ───────────────────
   Pruefbau vom 2026-10-09. Begruendung im Vault: angebot-geruest.md.

   DREI WAHLEN IM ABO-KONFIGURATOR. «Fuer wen» steht in der URL (zwei Seiten),
   «Wer fuehrt» und «Wie abgeschottet» stehen in der Seite als echte
   Radiogruppen. Gefiltert wird mit `:has()` auf dem Behaelter.

   WARUM `:has()` UND NICHT DER GESCHWISTER-SELEKTOR `~`: mit `~` muessten
   alle Felder Geschwister der Inhaltsbloecke sein, also aus ihrem `fieldset`
   heraus und optisch versteckt. Dann verliert man die Gruppenansage im
   Vorleser und den sichtbaren Fokusring — der Fokus saesse auf einem
   unsichtbaren Feld. Das ist ein Zugaenglichkeitsschaden fuer einen
   eingebildeten Gewinn. Mit `:has()` bleiben die Felder dort, wo sie
   hingehoeren: in ihrem `fieldset`, in ihrem `label`, sichtbar.

   WAS OHNE `:has()` PASSIERT: ein Browser, der es nicht kennt, verwirft die
   Regeln unten (ein `:not()` mit unbekanntem Argument macht den ganzen
   Selektor ungueltig) — und dann steht alles da. Genau wie ohne CSS, genau
   wie im Druck. Jede Moeglichkeit ist wahr; es gibt nichts zu verbergen,
   nur zu ordnen. Das ist kein Notfall, das ist der Rueckfall.

   GESCHRIEBEN ALS VERSTECK-, NICHT ALS ZEIG-REGEL. `:not(:has(...))` statt
   `:has(...)`, damit der Rueckfall «alles sichtbar» ist und nicht «alles
   verborgen». Bei der Zeig-Variante waere ein nicht unterstuetzter Selektor
   ein weisser Block.

   KEINE NEUE FARBE, KEINE VIERTE SCHRIFTGROESSE (Gestaltungsgesetz 3).
   Der Zustand eines Feldes wird vom Browser selbst angezeigt — der
   Radioknopf ist gefuellt oder leer. Damit codiert hier nichts Farbe
   allein (Regel 3 oben). */

/* Umschalter «Fuer wen»: zwei gewoehnliche Links auf zwei gebaute Seiten.
   Bis 2026-10-17 stand er als stille Textzeile vor dem Titel; seither ist er
   die erste Wahl im Abo-Konfigurator (Entscheid Cedi) und sieht aus wie die
   Radiokaesten darunter — gleiche Geometrie wie `.fragen label`, die
   aktuelle Seite hinterlegt wie ein gewaehltes Feld. Es bleiben Links, weil
   der Zustand in der URL liegt. */
.fragen .fuerwen { margin-top: 1.4rem; }
.fragen .legende { margin: 0; font-weight: 700; }
.fragen .fuerwen a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .5rem .9rem;
  border: 2px solid var(--leise);
  border-radius: .35rem;
  color: var(--schrift);
  text-decoration: none;
}
.fragen .fuerwen a:hover { border-color: var(--schrift); }
/* Die aktuelle Seite: hinterlegt UND fett — zwei Merkmale, keines allein
   Farbe. Fett verschiebt hier nichts, weil beide Woerter kurz sind. */
.fragen .fuerwen a[aria-current="page"] {
  background: var(--violett);
  border-color: var(--violett);
  color: var(--auf-flaeche);
  font-weight: 700;
}

.baum > section + section { margin-top: 2.2rem; }

/* Die Fragen. `fieldset` bringt von Haus aus einen Rahmen mit, der hier als
   sichtbare Trennlinie zaehlt (Gestaltungsgesetz 1) — also weg. Die Gruppe
   haelt trotzdem zusammen, fuer den Vorleser ueber `legend`, fuer das Auge
   ueber den Abstand. */
.fragen fieldset {
  margin: 1.4rem 0 0;
  padding: 0;
  border: 0;
}
.fragen legend { padding: 0; font-weight: 700; }
/* Die Knopfreihe. Eigener Behaelter statt eines `fieldset` mit display:flex:
   die `legend` ist in einem Flex-Container in jedem Browser ein Sonderfall,
   hier ist sie einfach eine Zeile darueber. */
.fragen .wahl {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}
/* DIE GANZE FLAECHE IST DER KNOPF. Ein Radiofeld ist rund 13 px gross; darauf
   zu zielen ist die haeufigste Aergernis-Quelle solcher Seiten. Das `label`
   umschliesst sein Feld ohnehin — es braucht also nur eine Flaeche darum, und
   schon ist der ganze Kasten klickbar, Beschriftung inbegriffen.
   Mindesthoehe 2.75rem = 44 px; WCAG 2.2 (2.5.8) verlangt 24, Apple empfiehlt
   44, und auf dem Telefon ist der Unterschied spuerbar. */
.fragen label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .5rem .9rem;
  border: 2px solid var(--leise);
  border-radius: .35rem;
  cursor: pointer;
}
.fragen label:hover { border-color: var(--schrift); }

/* Gewaehlt: vollflaechig und unifarben hinterlegt — dasselbe und einzige
   Stilelement wie bei den Titeln, kein zweites erfunden. Die Schriftstaerke
   bleibt, wo sie ist: ein Wechsel auf fett wuerde den Kasten beim Klicken
   breiter machen und die Nachbarn verschieben.
   Dass hier nicht allein die Farbe codiert (Regel 3 ganz oben), traegt das
   Radiofeld selbst: gefuellter gegen leeren Kreis ist eine Form, keine Farbe. */
.fragen label:has(input:checked) {
  background: var(--violett);
  border-color: var(--violett);
  color: var(--auf-flaeche);
}

.fragen input[type="radio"] { accent-color: var(--violett); margin: 0; flex: none; }
/* Auf der violetten Flaeche waere ein violettes Radiofeld unsichtbar. */
.fragen label:has(input:checked) input[type="radio"] { accent-color: var(--auf-flaeche); }

/* Der Fokusring gehoert jetzt um den Kasten, nicht um das kleine Feld darin.
   Nur dort, wo `:has()` wirklich greift — sonst bliebe der eingebaute Ring
   abgeschaltet und es gaebe gar keinen. */
@supports selector(:has(*)) {
  .fragen input[type="radio"]:focus-visible { outline: none; box-shadow: none; }
  .fragen label:has(input:focus-visible) {
    outline: 2px solid var(--papier);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--tinte);
  }
}

/* Auf dem Telefon je eine ganze Zeile pro Wahl, ueber die volle Breite. */
@media (max-width: 34rem) {
  .fragen .wahl { flex-direction: column; align-items: stretch; }
}

/* ── Die Filterregeln. Das ist die ganze Dynamik. ──────────────────────── */
/* Frage «Wer ist Team-Admin?» */
.baum:not(:has(#f-wir:checked))     .wenn-wir     { display: none; }
.baum:not(:has(#f-mit:checked))     .wenn-mit     { display: none; }
.baum:not(:has(#f-selbst:checked))  .wenn-selbst  { display: none; }
/* Frage «Welche Sicherheitsstufe?» — hier wird nicht die Option versteckt, sondern
   der Satz getauscht. Deshalb drei Saetze, von denen einer steht. */
.baum:not(:has(#o-basis:checked))   .wenn-basis   { display: none; }
.baum:not(:has(#o-cloud:checked))   .wenn-cloud   { display: none; }
.baum:not(:has(#o-eigen:checked))   .wenn-eigen   { display: none; }
/* Frage «Und wo steht sie?» — nur bei eigener Hardware. */
.baum:not(:has(#s-wir:checked))     .wenn-s-wir   { display: none; }
.baum:not(:has(#s-du:checked))      .wenn-s-du    { display: none; }

/* ── Ganze Bloecke, die ohne ihre Voraussetzung sinnlos sind. ───────────── */
/* Der Standort-Block erscheint nur bei eigener Hardware: bei Basis und
   Dedicated Cloud gibt es kein Blech, ueber dessen Ort zu reden waere. */
.baum:not(:has(#o-eigen:checked))   .wenn-blech   { display: none; }
/* Open Source: Blech beim Kunden UND Kunde ist Team-Admin. Zwei Zeilen, weil
   die Verneinung einer Und-Bedingung zwei Oder-Faelle sind. Die dritte Zeile
   faengt den Fall ab, dass der Standort noch auf seiner Vorauswahl steht,
   waehrend gar keine eigene Hardware gewaehlt ist. */
.baum:not(:has(#o-eigen:checked))   .wenn-selber  { display: none; }
.baum:not(:has(#s-du:checked))      .wenn-selber  { display: none; }
.baum:not(:has(#f-selbst:checked))  .wenn-selber  { display: none; }
/* Blech beim Kunden, Team-Admin aber bei uns: der Fall der Gemeinschafts-
   praxis. Spiegelbild von «Selber machen», gleiche Bauart. */
.baum:not(:has(#o-eigen:checked))   .wenn-betreut { display: none; }
.baum:not(:has(#s-du:checked))      .wenn-betreut { display: none; }
.baum:has(#f-selbst:checked)        .wenn-betreut { display: none; }
/* Wo der Team-Admin aufhoert und unser Betrieb anfaengt. Erscheint, sobald
   jemand die Rolle selbst uebernimmt — in JEDER Sicherheitsstufe, seit dem
   Entscheid vom 2026-10-17 auch in Basis. Vorher stand hier eine Sperre fuer
   «Basis + Du selbst»; sie verwechselte Plattform-Betreiber mit Team-Admin. */
.baum:not(:has(#f-selbst:checked))  .wenn-selbstverwaltet { display: none; }

/* Der Hinweis zur Grenze des Team-Admins: ein Kasten, keine Farbe, die sonst
   nirgends vorkommt. Linie links, wie ein Zitat. */
.hinweis { border-left: 3px solid var(--violett); padding-left: .8rem; margin: 0; }

/* ── Die Folge haengt an der Ursache. ───────────────────────────────────── */
/* Entscheid Cedi 2026-10-09, woertlich: «Es soll dort passieren, wo es eben
   passiert.» Der Kasten steht unter seiner eigenen Frage.

   UND ER SPRINGT NICHT. Die drei Saetze sind unterschiedlich lang; wuerden
   die unbenutzten verschwinden, veraenderte jeder Klick die Hoehe und
   verschoebe alles darunter — genau die Unruhe, die weg soll. Darum liegen
   alle drei im selben Rasterfeld uebereinander, und die unbenutzten werden
   nicht entfernt, sondern unsichtbar: der Kasten ist immer so hoch wie der
   laengste Satz, und nichts darunter bewegt sich.

   Die Bedingungen sind dieselben wie bei den Filterregeln darueber, nur eine
   Klasse spezifischer — sie kehren die Regel nicht um, sie verfeinern sie.
   `visibility: hidden` nimmt den Satz auch aus dem Vorlesebaum; der Vorleser
   hoert also einen Satz, nicht drei.
   Nur innerhalb von `:has()`-Unterstuetzung, weil ohne sie alle drei Saetze
   stehen bleiben sollen — und drei Saetze uebereinander waeren unlesbar. */
@supports selector(:has(*)) {
  .folge { display: grid; margin-top: .9rem; }
  .folge > p { grid-area: 1 / 1; margin: 0; max-width: 68ch; }
  .baum:not(:has(#f-wir:checked))     .folge > .wenn-wir,
  .baum:not(:has(#f-mit:checked))     .folge > .wenn-mit,
  .baum:not(:has(#f-selbst:checked))  .folge > .wenn-selbst,
  .baum:not(:has(#o-basis:checked))   .folge > .wenn-basis,
  .baum:not(:has(#o-cloud:checked))   .folge > .wenn-cloud,
  .baum:not(:has(#o-eigen:checked))   .folge > .wenn-eigen,
  .baum:not(:has(#s-wir:checked))     .folge > .wenn-s-wir,
  .baum:not(:has(#s-du:checked))      .folge > .wenn-s-du {
    display: block;
    visibility: hidden;
  }
}

/* Der Mundartsatz. Mittlere Groesse, keine vierte. */
.mundart { font-size: var(--s-mittel); text-wrap: balance; }

/* Gedruckt wird der ganze Konfigurator, nicht die gerade gewaehlte Ansicht.
   `!important` ist hier kein Pfusch, sondern die Umkehrung der Filterung:
   die Regeln oben tragen ID-Spezifitaet aus dem `:has()`, dagegen kommt eine
   Klassenregel sonst nicht an. Die Fragen selbst verschwinden im Druck — ein
   Radioknopf auf Papier ist eine Luege. */
@media print {
  .baum [class^="wenn-"] { display: revert !important; }
  .fuerwen, .fragen fieldset { display: none !important; }
  /* Der Standort-Block ist ein `fieldset` UND traegt eine wenn-Klasse. Ohne
     diese Zeile gewaenne die Attributregel darueber nach Spezifitaet und der
     Block stuende als einziger Radiokasten auf dem Papier. */
  .fragen fieldset[class^="wenn-"] { display: none !important; }
  /* Die Stapelung aufloesen, sonst drucken drei Saetze uebereinander — und
     die Unsichtbarkeit aufheben, die `display: revert` nicht mitnimmt. */
  .folge { display: block !important; }
  .folge > p { visibility: visible !important; margin-top: .6rem; }
}

/* ── FAQ: Verzeichnis und Spruenge (2026-10-17) ───────────────────────────
   Eine Seite, Verzeichnis oben, Ruecksprung an jeder Kategorie. Keine neue
   Farbe, keine vierte Schriftgroesse: das Verzeichnis und die
   Ruecksprung-Links stehen in der kleinen Groesse, der Ruecksprung in
   --leise. Das Scrollen ist weich, ausser der Besucher hat Bewegung
   abgeschaltet. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.inhalt [id] { scroll-margin-top: 1.2rem; }

/* Je Kategorie ein <details>: zu = nur die Kategorie, auf = ihre Fragen.
   Kein Skript; der Pfeil ist die Marke des Browsers, nur gedreht statt
   ersetzt. Die Kategorie ist fett (Cedi 2026-10-17), die Fragen normal. */
.verzeichnis details { margin-top: .45rem; }
.verzeichnis details:first-child { margin-top: 0; }
.verzeichnis summary { font-weight: 700; cursor: pointer; padding: .2rem 0; list-style: none; display: flex; gap: .5rem; align-items: baseline; }
.verzeichnis summary::-webkit-details-marker { display: none; }
.verzeichnis summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--leise); transition: transform .15s; }
.verzeichnis details[open] > summary::before { transform: rotate(90deg); }
.verzeichnis summary:hover::before { color: var(--gruen); }
.verzeichnis ul { list-style: none; margin: .15rem 0 .6rem; padding-left: 1.5rem; }
.verzeichnis li { margin-top: .15rem; }
.verzeichnis a:hover { text-decoration-color: var(--gruen); }
@media (prefers-reduced-motion: reduce) { .verzeichnis summary::before { transition: none; } }

/* Kategorie (h2) und Ruecksprung in einer Zeile; die Fragen (h3) tragen
   keinen Ruecksprung mehr (Cedi 2026-10-17: lieber etwas scrollen als
   Nervositaet). Der Pfeil ist ein Inline-SVG aus _partials/ikon.html
   («hoch»: Schaft als Strich, Spitze als Dreieck), weil U+2B06 je nach
   Systemschrift als Rechteck ankam. Der Ruecksprung steht rechts aussen und
   bricht bei schmalem Schirm unter den Titel. */
.sprung { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; margin-top: 3.2rem; }
.sprung h2 { margin: 0; }
.sprung + p { margin-top: .5em; }
.hoch { color: var(--leise); font-size: var(--s-klein); white-space: nowrap; display: inline-flex; align-items: center; gap: .3em; }
.hoch:hover { color: var(--schrift); }
.hoch .ikon { width: 1em; height: 1em; stroke-width: 2.4; }
.hoch .spitze { fill: currentColor; stroke: none; }

@media print {
  .hoch { display: none !important; }
}

/* ── Einschreiben (Aktuelles, Newsletter) ────────────────────────────────── */
/* Reines HTML-Formular, Relais in static/eintragen.php, Shortcode
   layouts/_shortcodes/newsletter-form.html. Dieselbe Geometrie wie die
   Wahlknoepfe und der Farbschalter: 2 px Rand, 0.35rem Radius, 2.75rem
   Mindesthoehe. Das Eingabefeld traegt den Seitengrund und den leisen Rand,
   der Knopf die violette Flaeche — dasselbe und einzige Stilelement wie bei
   den Titeln und beim gewaehlten Radioknopf. */
.eintragen label { display: block; font-weight: 700; }
.eintragen .zeile { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.eintragen input[type="email"] {
  flex: 1 1 18rem;
  min-height: 2.75rem;
  padding: .5rem .9rem;
  border: 2px solid var(--leise);
  border-radius: .35rem;
  background: var(--grund);
  color: var(--schrift);
  font: inherit;
}
.eintragen input[type="email"]:focus { border-color: var(--gruen); outline: none; }
.eintragen button {
  min-height: 2.75rem;
  padding: .5rem .9rem;
  border: 2px solid var(--violett);
  border-radius: .35rem;
  background: var(--violett);
  color: var(--auf-flaeche);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.eintragen button:hover { text-decoration: underline; }
.eintragen .hinweis { margin-top: .6rem; color: var(--leise); font-size: var(--s-klein); max-width: 68ch; }
/* Der Honigtopf: fuer Menschen weg, fuer Formularausfueller da. */
.eintragen .falle { display: none; }
/* Rueckmeldung ohne Skript: das Relais leitet auf #danke oder #fehler, und
   nur das Ziel des Fragments wird sichtbar. Der violette Rand sagt «hier». */
.eintragen .meldung { display: none; }
.eintragen .meldung:target {
  display: block;
  margin-bottom: 1rem;
  padding: .6rem .9rem;
  border: 2px solid var(--violett);
  border-radius: .35rem;
  max-width: 68ch;
}