/*
 * Versicherungsagentur Hausin — Gestaltung
 *
 * ## Die These
 *
 * Das Geschäftsproblem ist der ABBRUCH, nicht die Vollständigkeit. Also darf
 * sich die Seite nicht wie ein Versicherungsformular anfühlen: dicht, amtlich,
 * blau. Sie soll sich anfühlen wie ein Gespräch mit jemandem aus dem Ort.
 *
 * ## Die Farben sind jetzt die des Brand-Kits, nicht mehr abgelesene
 *
 * Bis hierhin waren die Blautöne vom Agenturplakat abgelesen — mit dem
 * Vermerk, die verbindlichen Werte kämen aus dem Markenportal und seien vor
 * Livegang abzugleichen. Sie liegen jetzt vor (`ressources/brandkit_2408.pdf`)
 * und stehen unten als `--primaer`, `--tuerkis`, `--nacht`, `--schrift-grau`.
 * Alles andere ist daraus abgeleitet, und jede Ableitung sagt hier, warum sie
 * nicht der reine Markenwert ist.
 *
 * Neu dabei ist das Türkis. Es hatte im abgelesenen Satz keine Entsprechung
 * und ist deshalb die auffälligste Änderung: Es trägt die Akzente auf dunklem
 * Grund — und NUR dort. Auf Weiß liegt es bei 1,7 : 1; als Textfarbe auf
 * hellem Grund wäre es unlesbar, egal wie gut es aussieht.
 *
 * ## Die Frage ist der Held
 *
 * Versicherungsformulare setzen ihre Fragen in 14 px fett grotesk. Hier steht
 * die Frage groß — wie eine Person, die sie stellt. Alles andere bleibt ruhig.
 *
 * ## EINE Schrift, obwohl das Brand-Kit zwei nennt
 *
 * Das Brand-Kit nennt Georgia als Designschrift und Arial als Hauptschrift.
 * Umgesetzt war das auch: Georgia trug Titel und Fragen, Arial den Rest.
 *
 * Der Auftraggeber hat es am 31.08.2026 gesehen und den Wechsel wieder
 * abbestellt — zum zweiten Mal. Schon im August lautete sein Wunsch
 * „Schriftart überall gleich"; die Umsetzung des Brand-Kits hatte ihn
 * überstimmt, und beim Betrachten ist ihm derselbe Punkt wieder aufgefallen:
 * „da ist doch jetzt die Überschrift was anderes wie der Text".
 *
 * Also alles in ARIAL, der Hauptschrift des Kits. Georgia kommt auf der Seite
 * nicht mehr vor. Damit muss die Hierarchie die Schrift allein tragen — über
 * Größe, Gewicht, Farbe und Abstand. Das ist mehr Arbeit als ein
 * Schriftwechsel und weniger auffällig, aber es funktioniert, solange die
 * Sprünge groß genug sind. Sie sind es: 1,0625 → 1,375 → 1,75 rem, jeweils
 * rund ein Drittel mehr.
 *
 * Weiterhin kein Webfont. Arial ist auf dem Gerät oder wird ersetzt.
 *
 * Alle Hex-Werte stehen ausschließlich in :root. Die Kontraste sind gerechnet,
 * nicht geschätzt.
 */

:root {
    /* SIGNAL IDUNA · Brand-Kit 2408 -------------------------------------
       Die vier verbindlichen Werte, unverändert aus dem Brand-Kit. Sie stehen
       hier ohne Verwendungszweck: Was sie tragen, steht in den abgeleiteten
       Tokens darunter. Kommt eine neue Fassung des Kits, sind es diese vier
       Zeilen. */
    --primaer:      #1a3691;  /* Primär Blau    · 10,6 : 1 auf Weiß */
    --tuerkis:      #49d8d7;  /* Sekundär Türkis·  6,3 : 1 auf --nacht */
    --nacht:        #183d6a;  /* Sekundär Blau  · 11,0 : 1 zu Weiß — die
                                 Akzentfläche des Banners, nicht sein Grund:
                                 auf der Seite die Randspalte des Backends */
    --schrift-grau: #7a8196;  /* Schrift Grau   ·  3,9 : 1 auf Weiß */

    /* Abgeleitet ---------------------------------------------------------
       Was die Marke offenlässt, ist hier gerechnet und nicht geschätzt. */

    /* Textfarbe: Das Kit nennt keine. Kein Schwarz, sondern das Sekundär-Blau
       bis fast an die Sättigungsgrenze abgedunkelt — dieselbe Familie, damit
       Fließtext neben dem Logo nicht wie ein Fremdkörper steht. */
    --tinte:        #0f1e3c;  /* 16,5 : 1 auf Weiß */

    /* „Schrift Grau" pur trägt auf Weiß nur 3,9 : 1 und fällt damit unter die
       4,5 : 1, die Fließtext braucht. Für Hilfetexte und Zweitzeilen deshalb
       dieselbe Farbe, abgedunkelt bis sie trägt: 6,1 : 1. Der reine Markenwert
       bleibt oben stehen und liegt in den Haarlinien — dort, wo er auch im
       Logo liegt. */
    --tinte-leise:  #59627a;

    --strom:        var(--primaer);
    --strom-tief:   #12265f;  /* 14,3 : 1 — Hover; das Sekundär-Blau taugt
                                 dafür nicht: es ist genauso hell wie Primär,
                                 der Zeigezustand wäre unsichtbar. */
    --strom-hauch:  #e8eefb;  /* Primär darauf: 9,1 : 1 */
    --kiesel:       #eef2f8;  /* Seitengrund */
    --papier:       #ffffff;  /* Karten */
    --stein:        #d7dfec;  /* Kanten */
    --stein-kraft:  #6c778d;  /*  4,5 : 1 — Eingabefeldkanten, nötig sind 3 */

    /* Helles Blau für Text auf dunklem Grund (5,3 : 1 auf --nacht). Nie auf
       Weiß: dort trägt es 2,3 : 1. */
    --himmel:       #9fb4de;

    --warnung:      #7a4a00;
    --warnung-grund:#fff6e6;
    --fehler:       #a3241c;  /*  6,9 : 1 */
    --fehler-grund: #fdeceb;
    --erfolg:       #0f6039;
    --erfolg-grund: #e7f3ec;

    /* Schrift ------------------------------------------------------------
       Nur EINE Familie ist im Einsatz, siehe oben. Georgia steht trotzdem
       hier: Das Brand-Kit nennt sie, und wenn der Auftraggeber es sich ein
       drittes Mal überlegt, ist es eine Zeile und keine Suche. UNBENUTZT —
       wer sie einsetzt, ändert eine Absprache. */
    --serife:  Georgia, "Times New Roman", "Liberation Serif", serif;
    --grotesk: Arial, "Helvetica Neue", Helvetica, "Liberation Sans",
               system-ui, sans-serif;

    /* 17 px Grundtext. Unter 16 px zoomt iOS beim Fokus in die Seite.

       Die Stufen bleiben weit auseinander, obwohl der Schriftwechsel wieder da
       ist: Er trennt Frage von Fließtext, aber innerhalb einer Familie muss
       die Größe weiter allein arbeiten. */
    --fs-klein: .875rem;
    --fs-text:  1.0625rem;
    --fs-gross: 1.25rem;
    --fs-frage: 1.375rem;
    --fs-titel: 1.75rem;

    /* Gewichte an einer Stelle. Ein Systemstapel hat nicht überall dieselben
       Zwischenschnitte; 600 und 700 sind die beiden, auf die man sich
       verlassen kann. */
    --gew-halb: 600;
    --gew-fett: 700;

    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
    --sp-4: 1rem;    --sp-6: 1.5rem;  --sp-8: 2rem;
    --sp-12: 3rem;   --sp-16: 4rem;

    --r-md: 10px;
    --r-lg: 16px;
    --tap: 44px;
}

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

body {
    margin: 0;
    background: var(--kiesel);
    color: var(--tinte);
    font-family: var(--grotesk);
    font-size: var(--fs-text);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;

    /* Traegt das Randlose der unteren Leiste: `margin-inline: calc(50% - 50vw)`
       ist um die Breite des Rollbalkens breiter als der sichtbare Bereich.
       `clip` und nicht `hidden` - `hidden` an einem Vorfahren macht
       `position: sticky` wirkungslos. */
    overflow-x: clip;
}

/* DER FUSS SITZT AM UNTEREN RAND, AUCH WENN DIE SEITE KURZ IST.

   Vorher hing er dort, wo der Inhalt aufhoerte, und darunter stand auf einem
   grossen Bildschirm ein handbreiter grauer Streifen. Der Auftraggeber hat es
   als "echt doof" gemeldet, und es sieht auch so aus: Ein Seitenfuss, unter
   dem noch etwas kommt, wirkt wie ein Fehler beim Laden.

   Der Weg ist der uebliche und der langweiligste: Der Koerper ist eine Spalte,
   der Inhalt darf wachsen, alles andere behaelt seine Hoehe. Auf langen Seiten
   aendert sich dadurch nichts.

   ## Was das mit der Aktionsleiste macht - und was nicht

   "Weiter" und "Anfrage absenden" kleben mit `position: sticky` am unteren
   Rand. Ein klebendes Element kann seinen eigenen Kasten nicht verlassen: Die
   Leiste steht im Formular, und wenn das Formular kurz ist, hoert sie mit ihm
   auf. Sie rutscht also NICHT vor den Fuss, wenn der nach unten wandert -
   sie bleibt, wo der Inhalt endet, und dazwischen ist Weissraum statt einer
   Luecke unter dem Abschluss.

   ## dvh, nicht nur vh

   Auf dem Telefon ist `100vh` die Hoehe OHNE die ein- und ausfahrende
   Adressleiste - der Fuss haenge dann dauerhaft ein Stueck unter dem
   Bildschirmrand. `dvh` ist die tatsaechlich sichtbare Hoehe. Die
   vh-Zeile bleibt als Rueckfall fuer Browser, die dvh nicht kennen. */
.pult { min-height: 100vh; }

body:not(.pult) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Der Inhalt waechst, der Rest nicht. `flex-basis: auto` ist dabei wichtig:
   Mit dem Standardwert 0 wuerde die Spalte den Inhalt nach ihrer eigenen
   Rechnung stauchen statt ihn zu lassen, wie er ist. */
body:not(.pult) > .seite { flex: 1 0 auto; }
body:not(.pult) > .markenleiste,
body:not(.pult) > .signalband,
body:not(.pult) > .fusszeile { flex: none; }

.seite { max-width: 40rem; margin: 0 auto; padding: var(--sp-8) var(--sp-4) var(--sp-16); }

/* HIER STAND eine Vergroesserung der Wurzelschrift auf breiten Bildschirmen.
   Sie war fuer die Kundenstrecke gedacht und traf das Backend mit - dort wurde
   daraus "die Schriften sind zu gross". Ein Werkzeug, mit dem jemand acht
   Stunden arbeitet, will KLEINE Schrift und viel auf einen Blick; das Gegenteil
   der Kundenstrecke. Beides aus einer Schriftgroesse zu bedienen geht nicht,
   also hat das Backend jetzt seine eigene (siehe .pult). */

/* HIER STAND EINE REGEL, die h1, h2 und h3 die Designschrift gab.

   Die Überschriften standen in Georgia. Der Auftraggeber wollte es einheitlich
   (siehe oben) — jetzt erbt alles die Grotesk vom body, und die Hierarchie
   tragen Größe, Gewicht und Farbe. */

h1 {
    font-size: var(--fs-titel);
    /* 700 statt 400: Ohne Schriftwechsel muss das Gewicht die Arbeit machen,
       die die Serife tat. */
    font-weight: var(--gew-fett);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 var(--sp-4);
}
h2 {
    font-size: var(--fs-gross); font-weight: var(--gew-halb);
    letter-spacing: -.01em; margin: 0 0 var(--sp-3);
}
p, li { max-width: 34rem; }
a { color: var(--strom); text-underline-offset: .2em; }
a:hover { color: var(--strom-tief); }

/* Fokus sichtbar auf JEDER Fläche. Die weiße zweite Kante trägt den Ring
   auch dann, wenn er auf einer farbigen Fläche liegt. */
:focus-visible { outline: 3px solid var(--strom); outline-offset: 2px; box-shadow: 0 0 0 5px var(--papier); }

.nur-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.nur-sr:focus {
    position: static; width: auto; height: auto; margin: 0; clip-path: none;
    display: inline-block; padding: var(--sp-2) var(--sp-3);
    background: var(--strom); color: var(--papier);
}

/* ---------------------------------------------------------- Markenleiste

   HIER STAND NICHTS.

   Die Kundenstrecke trug bis hierhin keinen Kopf: Wer mitten im Formular
   stand, sah nirgends, bei wem er gerade Daten einträgt — der Name der Agentur
   stand nur auf der Startseite und klein im Fuß. Bei einem Formular, das nach
   Geburtsdatum und Vorschäden fragt, ist das die falsche Sparsamkeit.

   Jetzt steht das offizielle Logo auf jeder Seite, und daneben die Nummer.
   Beides zusammen ist der Ausweis der Seite: Marke links, Weg zum Menschen
   rechts.

   Die Leiste ist WEISS und nicht blau. Eine blaue Kopfleiste unter einem
   blauen Logo verschluckt es; das Brand-Kit zeigt das Logo auf Weiß, und die
   weiße Fassung ist ausdrücklich für dunkle Flächen gedacht — hier gibt es
   keine.                                                                    */

.markenleiste {
    background: var(--papier);
    border-bottom: 1px solid var(--stein);
}

.markenleiste__spur {
    max-width: 74rem;
    margin: 0 auto;
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

/* Die Trefferfläche ist das Logo selbst, deshalb `display: flex` statt inline:
   Ein inline-Element wäre um die Zeilenhöhe herum größer als das Bild. */
.markenleiste__logo { display: flex; align-items: center; }

.markenleiste__logo img {
    display: block;
    /* Höhe statt Breite: Das Logo trägt drei Zeilen übereinander (Name,
       Haarlinie, Schriftzug). Unter 34 px wird die graue Namenszeile zu einem
       Strich. */
    height: 42px;
    width: auto;
}

/* Die Nummer, nicht die Adresse: Wer im Formular hängen bleibt, will anrufen,
   nicht vorbeikommen. Die Adresse steht im Fuß. */
.markenleiste__ruf {
    font-weight: var(--gew-halb);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    /* Der Abstand zwischen Hoerer und Zahl. Enger als ein Leerzeichen, damit
       beides als EIN Element liest und nicht als Zeichen neben einer Zahl. */
    gap: .45em;
    min-height: var(--tap);
}
/* Unterstrichen wird die ZAHL, nicht das Zeichen: Ein unterstrichenes Icon
   sieht aus wie ein Kaestchen. Deshalb liegt der Strich auf dem Text und nicht
   auf dem Verweis. */
.markenleiste__ruf:hover span { text-decoration: underline; }

.markenleiste__hoerer {
    /* `flex: none` haelt das Zeichen rund: Ohne die Zeile drueckt der
       Flex-Algorithmus es bei schmalen Leisten schmaler als hoch. */
    flex: none;
    /* Der Hoerer sitzt optisch zu hoch, wenn er auf der Grundlinie ausgerichtet
       wird - er hat oben mehr Luft als unten. Ein Haar nach unten. */
    transform: translateY(.5px);
}

/* DAS SIGNALBAND — das eine wiederkehrende Zeichen dieser Seite.

   Vier Pixel, zwei Farben, harte Kante: das Primärblau des Konzerns, und am
   Ende das Türkis. Es ist die Haarlinie aus dem Logo, weitergedacht — dort
   trennt eine Linie den Namen der Agentur vom Namen der Gesellschaft.

   Es liegt an GENAU ZWEI Stellen: unter der Markenleiste und über dem Fuß. Die
   Seite bekommt damit oben und unten dieselbe Kante, und dazwischen ist Ruhe.
   Jede weitere Wiederholung machte daraus ein Muster statt eines Zeichens. */
.signalband {
    height: 4px;
    background: linear-gradient(90deg,
        var(--primaer) 0 72%, var(--tuerkis) 72% 100%);
}

@media (max-width: 30rem) {
    /* Auf dem Telefon steht die Nummer unter dem Logo statt daneben: Beides in
       einer Zeile drückte das Logo auf eine Höhe, in der der Name nicht mehr
       lesbar ist. */
    .markenleiste__spur { flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
    .markenleiste__logo img { height: 36px; }
    .markenleiste__ruf { font-size: var(--fs-klein); min-height: 2rem; gap: .35em; }
    .markenleiste__hoerer { width: 17px; height: 17px; }
}

/* ------------------------------------------------------------- Startseite */

/* Struktur des Agenturplakats: grosses Wort links, Person rechts.

   Das Foto ist kein Firmenportraet, sondern ein Moment: Er laechelt, schaut an
   der Kamera vorbei, links steht unscharf jemand. Genau das traegt die Seite -
   deshalb bekommt es Flaeche und keinen Rahmen.

   WAS HIER VORHER FALSCH WAR:

   Ein Kreis, ausgeschnitten aus der Bildmitte. Sein Gesicht sitzt aber oben
   rechts; die Mitte ist die Krawatte. Der Kreis schnitt den Kopf an und zeigte
   Anzug. Dazu ein weisser Ring mit blauem Hof - ein Sticker-Raendchen auf einem
   dunklen Foto, das aussieht wie ein Profilbild in einem Verzeichnis.

   Jetzt: Hochformat 4:5, Ausschnitt auf das Gesicht gelegt, weiche Ecken, kein
   Ring. Und ein warmer Grund unter dem Ganzen.                              */

/* DER AUFTAKT LIEGT AUF DEM PRIMÄRBLAU — dem des Banners.

   Vorher ein warmer Sandton, mit der Begründung, ein Porträt mit Hauttönen auf
   kühlem Blau wirke nüchtern. Das Brand-Kit kennt keinen warmen Ton — es
   kennt zwei Blau, ein Türkis und ein Grau. Eine erfundene fünfte Farbe an der
   auffälligsten Stelle der Seite wäre genau die Abweichung, die ein Brand-Kit
   verhindern soll.

   Der Einwand bleibt trotzdem richtig, und die Antwort darauf ist: Das Blau
   liegt NUR hier. Der Auftakt ist die einzige große Farbfläche der Seite;
   alles darunter steht auf Weiß und Kiesel.

   ## Und zwar PRIMÄR, nicht sekundär

   Eine Fassung lang lag er auf dem Sekundärblau. Das war der falsche der
   beiden Werte, und das Banner sagt es eindeutig: Ausgemessen trägt seine
   große Fläche — links, in der Kontaktleiste, unter dem Logo — #1D3A89, also
   das Primärblau. Das Sekundärblau kommt dort nur einmal vor, als schmaler
   Keil oben in der Mitte. Es ist die Akzentfläche, nicht der Grund; auf der
   Seite trägt es deshalb die Randspalte des Backends und sonst nichts.

   Der Auftraggeber hat den Unterschied im Browser gesehen, bevor eine Messung
   ihn bestätigt hat. Genau dafür geht die Fassung zuerst an ihn. */
.auftakt {
    background: var(--primaer);
    color: var(--papier);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    margin-bottom: var(--sp-12);

    display: grid;
    gap: var(--sp-6);
    justify-items: start;
}

/* Auf dem Telefon zuerst das Gesicht, dann der Text. Wer eine Versicherungs-
   seite oeffnet, entscheidet in zwei Sekunden, ob ihn das anspricht. */
.auftakt__bild-rahmen { order: -1; }

.auftakt__text { min-width: 0; }

/* HIER STAND EINE TÜRKISE ZEILE „VERSICHERUNGEN AM HOCHRHEIN".

   Sie ist mit dem Wortlaut des Banners weggefallen: Der Ort steht jetzt in der
   Schlagzeile selbst („am Hochrhein!"), und zweimal dasselbe übereinander ist
   keine Hierarchie, sondern ein Echo. */

/* DIE SCHLAGZEILE IST DAS BANNER, ZEILE FÜR ZEILE.

   Auf dem Bauzaunbanner steht sie als Treppe: „ICH GEBE EIN" klein, „SIGNAL"
   riesig, darunter „AM HOCHRHEIN!" als dunkelblaue Versalien auf weissem Block
   mit einem türkisen Balken darunter. Genau das steht hier — nicht als
   Nachempfindung, sondern als dieselbe Anordnung.

   ## Warum die Schlagzeile in der HAUPTschrift steht

   Der Rest der Seite folgt der Regel „Georgia spricht, Arial verwaltet". Hier
   nicht: Das Banner ist die Fassung, die Kunden zuerst sehen, und es setzt
   seine Schlagzeile in gesperrten Versalien der Hauptschrift. Wer am Bauzaun
   vorbeigeht und danach die Seite öffnet, soll dieselbe Zeile wiedererkennen.
   Wiedererkennung schlägt Systemtreue — aber nur an dieser einen Stelle, und
   deshalb steht sie hier begründet und nicht als stille Ausnahme.

   Die Versalien kommen aus dem CSS, nicht aus dem Quelltext (siehe
   start.blade.php): Eine Sprachausgabe liest „SIGNAL" sonst als Buchstaben. */
.auftakt__titel {
    text-transform: uppercase;
    font-weight: var(--gew-fett);
    line-height: 1;
    margin: 0 0 var(--sp-6);

    /* `align-items: flex-start` ist Pflicht, nicht Kosmetik: Ohne die Zeile
       zöge sich der weisse Block der Ortszeile über die volle Spaltenbreite,
       und aus dem Wort würde ein Balken. */
    display: flex; flex-direction: column; align-items: flex-start; gap: .1em;
}

/* Der Anlauf. Klein und gesperrt - er holt Luft, er sagt noch nichts. */
.auftakt__anlauf {
    font-size: clamp(1rem, 3.2vw, 1.375rem);
    letter-spacing: .05em;
    color: var(--papier);
}

/* Das Wort. Es ist beides: die Ansage und der Name der Gesellschaft - und der
   einzige Grund, warum dieser Satz funktioniert. Also so gross, wie die Spalte
   es hergibt. */
.auftakt__signal {
    font-size: clamp(2.75rem, 10.5vw, 4.5rem);
    line-height: .92;
    letter-spacing: -.005em;
    color: var(--papier);
}

/* Der Ort, umgedreht: dunkelblau auf weiss (10,6 : 1), darunter der türkise
   Balken des Banners. Der Balken ist ein `border-bottom` und kein zweites
   Element - er gehört zum Block und soll mit ihm wachsen. */
.auftakt__ort {
    font-size: clamp(1.375rem, 5.2vw, 2.125rem);
    letter-spacing: .01em;
    background: var(--papier);
    color: var(--primaer);
    padding: .1em .3em .12em;
    border-bottom: .16em solid var(--tuerkis);
}

/* Der Zusatz des Banners. Weiss wie die Schlagzeile, weil er zu ihr gehört -
   getrennt wird er nur durch Grösse und Sperrung. */
.auftakt__claim {
    margin: 0 0 var(--sp-8);
    text-transform: uppercase;
    font-weight: var(--gew-fett);
    font-size: clamp(.9375rem, 2.8vw, 1.125rem);
    letter-spacing: .06em;
    line-height: 1.5;
    color: var(--papier);
    display: flex; flex-direction: column;
}

/* Person und Rolle sind EIN Block. Die Linie bindet sie zusammen und trennt
   sie vom Titel - billiger als Weissraum und deutlicher. */
.auftakt__person {
    border-left: 3px solid var(--tuerkis);
    padding-left: var(--sp-4);
    margin: 0 0 var(--sp-8);
    display: flex; flex-direction: column; gap: .15em;
}

/* Die Gesellschaft über dem Namen, klein und gesperrt: Sie sagt, in wessen
   Auftrag hier jemand steht. Nicht türkis - das Türkis gehört an dieser Stelle
   dem Balken unter der Ortszeile und dem Marker, und eine dritte türkise Zeile
   machte aus dem Akzent ein Muster. */
.auftakt__agentur {
    font-size: var(--fs-klein); font-weight: var(--gew-halb);
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--himmel); margin: 0 0 .15em;
}

.auftakt__name {
    font-size: var(--fs-gross); font-weight: var(--gew-fett);
    letter-spacing: -.01em; line-height: 1.2; margin: 0;
}

.auftakt__rolle {
    font-size: var(--fs-text); line-height: 1.45;
    color: var(--himmel); margin: 0; max-width: 26rem;
}

/* Der Satz, der das Geschäft beschreibt. Weiss statt Himmelblau: Er ist die
   Aussage des Blocks, die Rollenzeile darüber nur ihre Einleitung. */
.auftakt__versprechen {
    font-size: var(--fs-text); font-weight: var(--gew-halb); line-height: 1.45;
    color: var(--papier); margin: var(--sp-3) 0 0; max-width: 30rem;
    /* `balance` teilt den Satz auf zwei gleich lange Zeilen - und der Bruch
       faellt dabei auf den Gedankenstrich, also auf die Stelle, an der der
       Satz ohnehin kippt. Ohne die Zeile stuende „Probleme." allein. */
    text-wrap: balance;
}

/* „Dein" ist eine BETONUNG IM SATZ - das eine Wort, das aus einer
   Rollenbeschreibung ein Versprechen macht.

   Deshalb nur so viel Kasten, wie ein hervorgehobenes Wort vertraegt: knappes
   Polster, kleiner Radius, dieselbe Zeilenhoehe wie der Text drumherum. Mit
   dem Polster eines Knopfes saehe es aus, als koennte man daraufklicken. */
/* Türkis auf Blau, dunkler Text darauf (9,5 : 1). Auf der blauen Fläche wäre
   ein blauer Marker unsichtbar — und das Türkis hebt genau das eine Wort
   heraus, um das es geht. */
.auftakt__marker {
    background: var(--tuerkis); color: var(--tinte);
    font-weight: var(--gew-fett);
    /* Versalien wie auf dem Banner, aber aus dem CSS: Im Quelltext steht
       „Dein", damit eine Sprachausgabe das Wort spricht und nicht buchstabiert. */
    text-transform: uppercase; letter-spacing: .03em;
    padding: .05em .3em .1em; border-radius: 3px;
    white-space: nowrap;
}

/* --------------------------------------------------------- Faktencheck

   Der Aufruf bekommt eine eigene Flaeche, weil er eine andere Aufgabe hat als
   alles darueber: Er sagt, was zu tun ist.

   Der Reiter sitzt auf der oberen Kante, wie der Aufkleber auf einer Akte.
   Das ist der zweite blaue Marker, und er sieht bewusst anders aus als der
   erste - ein Etikett ist keine Betonung. Zwei gleich aussehende Marker mit
   verschiedenen Aufgaben wirken beliebig; genau das war der Fehler des ersten
   Anlaufs.                                                                 */

/* HIER SASS DAS ETIKETT AUF DER KANTE - wie der Aufkleber auf einer Akte,
   halb ueber dem oberen Rand der Karte.

   Das funktionierte, solange der Auftakt hell war: ein blaues Schildchen, das
   ueber eine weisse Kante auf einen Sandgrund ragte. Seit die Flaeche das
   Primaerblau traegt, ragt es aus dem Weiss in ein Blau derselben Farbe - und
   ein blaues Schild auf blauem Grund ist kein Aufkleber mehr, sondern ein Loch
   mit Text darin. Der Auftraggeber hat es als erstes bemerkt.

   Das Etikett bleibt also blau hinterlegt (so wollte er es), rueckt aber GANZ
   auf die weisse Karte. Damit steht es wieder auf dem einzigen Grund, auf dem
   ein blaues Schild lesbar ist - 10,6 : 1 -, und die Karte braucht kein
   Extra-Polster mehr fuer etwas, das ueber ihre Kante ragt. */
.faktencheck {
    background: var(--papier);
    /* Keine Kante: Die Karte liegt auf Blau, dort trennt der Helligkeitssprung
       schon deutlich genug. Eine Kante darum sähe aus wie ein zweiter Rahmen
       um einen Rahmen. */
    border: 0;
    border-radius: var(--r-md);
    color: var(--tinte);
    padding: var(--sp-4);
    margin: 0;
    max-width: 27rem;
    /* Auf der blauen Flaeche traegt ein heller Schatten nichts; er ist
       tiefer und dunkler, damit die Karte darauf liegt statt darin zu
       kleben. */
    box-shadow: 0 6px 22px rgba(6, 16, 36, .28);
}

.faktencheck__etikett {
    /* inline-block, damit das Schild nur so breit ist wie sein Wort. Als
       Absatz in voller Breite waere es ein Balken. */
    display: inline-block;
    margin: 0 0 var(--sp-3);
    background: var(--strom); color: var(--papier);
    font-size: var(--fs-klein); font-weight: var(--gew-halb);
    letter-spacing: .02em;
    padding: .25em .7em .3em;
    border-radius: 3px;
}

.faktencheck__satz {
    margin: 0; color: var(--tinte-leise);
    font-size: var(--fs-text); line-height: 1.5;
}

/* Das Bild ---------------------------------------------------------------- */

.auftakt__bild-rahmen {
    /* margin: 0 ist Pflicht - der Browser gibt einem figure von sich aus
       1em 40px, und das verschoebe das Bild aus dem Raster. */
    position: relative; margin: 0; width: 100%; max-width: 18rem;
}

.auftakt__bild {
    /* `height: auto` ist hier PFLICHT und nicht Kosmetik.
       Das <img> traegt width="960" height="1280" als Attribut - noetig, damit
       der Browser den Platz reserviert und der Text beim Laden nicht springt.
       Diese Attribute wirken aber wie CSS-Angaben: Ohne `height: auto` steht
       die Box auf 1280 Pixel Hoehe, egal wie breit sie ist, und `aspect-ratio`
       kommt gar nicht zum Zug. Auf dem Telefon war der Auftakt daraufhin
       ueber tausend Pixel hoch. */
    display: block; width: 100%; height: auto;
    /* Hochformat statt Quadrat: Ein Mensch ist hoeher als breit. */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* Der Ausschnitt liegt auf dem GESICHT - aber mit Luft darueber. 22 % war
       zu hoch: Der Kopf stiess an die Kante und unten stand nur Anzug. */
    object-position: 52% 32%;
    border-radius: var(--r-lg);
    box-shadow: 0 12px 34px rgba(6, 16, 36, .38);
}

/* HIER SASS DER NAME AUF DEM BILD, unten links in einem hellen Kasten.

   Er ist mit der Textueberarbeitung in den Fliesstext gewandert: Der
   Auftraggeber hat „Adrian Hausin" und „Dein Ansprechpartner …" als
   zusammenhaengende Zeilen notiert, und „Dein" gehoert blau hinterlegt. In
   einem Kasten ueber dem Foto haette das wie ein Aufkleber gewirkt - und der
   Name stuende zweimal auf derselben Seite. */

@media (min-width: 48rem) {
    .auftakt {
        /* Feste Spur statt auto: Das Bild traegt width:100%, und eine
           auto-Spalte, die sich nach einem Prozentwert richtet, der sich nach
           der Spalte richtet, ist zirkulaer. */
        grid-template-columns: minmax(0, 1fr) 18rem;
        align-items: center;
        gap: var(--sp-8);
        padding: var(--sp-8);
    }
    /* Breit steht der Text wieder links und das Bild rechts. */
    .auftakt__bild-rahmen { order: 0; }
}

/* --------------------------------------------------------------- Sparten

   Der eigentliche Einstieg. Sie beantworten die erste Frage eines Besuchers -
   "machen die ueberhaupt, was ich brauche?" - und sparen einen Schritt, weil
   der Link die Sparte gleich mitwaehlt.                                    */

.sparten { margin-bottom: var(--sp-16); }
.sparten__titel { font-size: var(--fs-frage); margin-bottom: var(--sp-4); }

.sparten__liste {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* DREI SPALTEN, nicht auto-fit.

   Es sind sechs Kacheln. auto-fit machte daraus auf breiten Bildschirmen
   4 + 2 - eine zerrissene zweite Zeile mit einer Luecke rechts. Sechs geteilt
   durch drei ist zwei volle Zeilen. */
@media (min-width: 62rem) {
    .seite--auftritt .sparten__liste { grid-template-columns: repeat(3, 1fr); }
}
.sparten__liste li { max-width: none; }

/* AUS DEN KARTEN SIND ZEILEN GEWORDEN.

   Vorher: eine Karte je Weg, zweizeilig - Name, darunter ein erklaerender
   Halbsatz -, unten links ein Pfeil, beim Zeigen hob sie sich mit Schatten.

   Der Auftraggeber wollte es am 31.08.2026 schlicht und klein, ohne zweite
   Zeile. Das ist mehr als Geschmack: Die sechs Punkte sind kein Angebot, das
   verglichen wird, sondern sechs Tueren in dasselbe Formular. Eine hohe Karte
   mit Erklaerung laedt zum Lesen ein; eine Zeile mit einem Winkel rechts laedt
   zum Antippen ein. Das Zweite ist hier richtig.

   Was bleibt: weisse Flaeche, ruhige Kante, 3,25rem Mindesthoehe (ueber den
   44 Pixeln, die ein Finger braucht) - und der Winkel, der sagt, dass es
   weitergeht. */
.sparten__liste a {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: 3.25rem;
    text-decoration: none; color: inherit;
    background: var(--papier); border: 1px solid var(--stein);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-4);
    transition: background-color .15s ease, border-color .15s ease;
}

/* Kein Heben und kein Schatten mehr: Eine Zeile, die sich hebt, wackelt. Der
   Zeigezustand ist jetzt eine getoente Flaeche und eine blaue Kante - ruhiger
   und auf einer kleinen Flaeche deutlicher als eine Bewegung. */
.sparten__liste a:hover {
    border-color: var(--strom);
    background: var(--strom-hauch);
}

/* DIESELBE SCHRIFT WIE DIE SCHRITTTITEL UNTER „SO LAEUFT ES AB".

   Der Auftraggeber hat es an diesen Bloecken festgemacht: Was dort eine
   Ueberschrift ist, steht in der Designschrift - und das soll ueberall so
   sein. Er hat recht, es war ohnehin nur halb durchgezogen: Die
   Abschnittstitel standen in Georgia, die Kachelbeschriftungen und die Zusage
   daneben in Arial, obwohl sie dieselbe Aufgabe haben.

   Was Georgia traegt, ist damit ueberall dasselbe: der Titel eines Blocks.
   Was Arial traegt, auch: alles, was erklaert, bedient oder zaehlt. */
.sparten__name {
    /* Zurueck auf die Groesse des Fliesstextes: Die Verkleinerung auf 1rem war
       noetig, solange hier Georgia stand - die traegt breiter und liess
       „Bestehende Versicherung vergleichen" umbrechen. */
    font-weight: var(--gew-halb); font-size: var(--fs-text); line-height: 1.3;
}

/* HIER STAND `.sparten__zusatz` - die zweite Zeile der Kachel. Sie ist mit dem
   Text aus dem Markup verschwunden; eine Regel fuer eine Klasse, die es nicht
   mehr gibt, waere eine Falle fuer den Naechsten, der sie sucht. */

/* Der Winkel sagt, dass hier etwas passiert. Als ::after und nicht im Markup:
   Er ist Dekoration, und eine Sprachausgabe soll ihn nicht vorlesen.

   Rechts statt unten: Seit die Kachel nur noch eine Zeile hoch ist, gibt es
   kein Unten mehr - und rechts ist ohnehin die Richtung, in die es geht. */
.sparten__liste a::after {
    content: '';
    flex: none; margin-left: auto;
    width: .5rem; height: .5rem;
    border-right: 2px solid var(--strom);
    border-bottom: 2px solid var(--strom);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.sparten__liste a:hover::after { transform: rotate(-45deg) translate(2px, 2px); }

/* Wer die Bewegung abgestellt hat, bekommt sie nicht (WCAG 2.3.3). Die
   Rueckmeldung bleibt trotzdem - ueber Kante und Flaeche. */
@media (prefers-reduced-motion: reduce) {
    .sparten__liste a, .sparten__liste a::after { transition: none; }
    .sparten__liste a:hover::after { transform: rotate(-45deg); }
}


/* ------------------------------------------------------------------ Ablauf */

.ablauf { margin-bottom: var(--sp-16); }
.ablauf__titel { font-size: var(--fs-frage); margin-bottom: var(--sp-6); }

.ablauf__schritte { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.ablauf__schritte li {
    display: flex; gap: var(--sp-4); max-width: none;
    padding-bottom: var(--sp-6); margin-bottom: var(--sp-6);
    border-bottom: 1px solid var(--stein);
}
.ablauf__schritte li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
/* Der Schritttitel - die Vorlage, an der der Auftraggeber den Stil
   festgemacht hat: Designschrift, fett, in Groesse des Fliesstextes. */
.ablauf__schritte h3 { font-weight: var(--gew-fett); font-size: var(--fs-text); margin: 0 0 var(--sp-1); }
.ablauf__schritte p { margin: 0; color: var(--tinte-leise); }

.ablauf__nummer {
    flex: none; width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-gross);
    background: var(--strom-hauch); color: var(--strom);
    border-radius: 50%; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ Zusage */

.zusage {
    background: var(--strom); color: var(--papier);
    border-radius: var(--r-lg); padding: var(--sp-8);
    margin-bottom: var(--sp-12);
}
.zusage p { max-width: 32rem; }
.zusage__satz {
    font-size: var(--fs-frage); font-weight: var(--gew-fett);
    margin: 0 0 var(--sp-3); line-height: 1.3;
}
.zusage p + p { margin: 0; color: var(--himmel); }
/* Der dritte Absatz - die eigentliche Zusage - braucht Luft nach oben. Ohne
   sie klebte er am Satz davor und waere ein Zeilenumbruch statt eines eigenen
   Gedankens. */
.zusage p + p + p { margin-top: var(--sp-3); }

/* ------------------------------------------------------------------ Person */

.person {
    display: flex; align-items: center; gap: var(--sp-6);
    background: var(--papier); border: 1px solid var(--stein);
    border-radius: var(--r-lg); padding: var(--sp-6);
    margin-bottom: var(--sp-8);
}
.person__bild {
    flex: none; width: 6.5rem; height: 6.5rem; border-radius: 50%;
    object-fit: cover; border: 3px solid var(--strom-hauch);
}
.person__name { font-size: var(--fs-frage); margin: 0; }
.person__rolle { color: var(--tinte-leise); margin: 0 0 var(--sp-2); }
.person__ruf { margin: 0; }

@media (max-width: 26rem) {
    /* Auf schmalen Geräten untereinander: Nebeneinander bliebe für den Text
       weniger als die halbe Zeile, und der Name bräche um. */
    .person { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}

/* ------------------------------------------------------------- Rubriken

   HIER STAND DIE FORTSCHRITTSANZEIGE.

   Eine Linie mit einer Marke je Schritt und daneben "Schritt 5 von 12". Der
   Gedanke: Die Zahl sagt, dass es ein Ende gibt, und das ist die
   angstloesendste Information auf einem Versicherungsformular.

   Der Auftraggeber hat aus der Praxis widersprochen. Sie sagt eben auch, wie
   viel noch kommt - "wie lange ist die Liste denn noch?" -, und zwoelf ist
   dafuer zu viel. Jetzt stehen die Themen da: Es sind vier, sie haben Namen,
   und man kann sie anspringen.

   Es sind Knoepfe, keine Verweise (siehe rubrikenleiste.blade.php). Sie sehen
   nicht danach aus - und sollen es auch nicht: Was hier zaehlt, ist die
   Reihe von Themen, nicht eine Reihe von Schaltflaechen.                   */

.rubriken {
    margin: 0 0 var(--sp-6);
    /* Bei vielen Sparten passt die Reihe nicht mehr in eine Zeile. Waagerecht
       schieben statt umbrechen: Eine zweispaltige Leiste liest sich nicht mehr
       als Weg von links nach rechts. */
    overflow-x: auto;
    /* Der Fokusrahmen des ersten Knopfes wuerde sonst am Rand abgeschnitten. */
    padding: 3px 0;
    scrollbar-width: thin;
}

.rubriken__liste {
    display: flex; gap: var(--sp-1);
    list-style: none; padding: 0; margin: 0;
    min-width: max-content;
}

.rubriken__punkt { max-width: none; }

.rubriken__knopf {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    min-height: 2.5rem; padding: var(--sp-2) var(--sp-3);
    background: transparent; border: 1px solid transparent;
    border-radius: var(--r-md);
    font: inherit; font-size: var(--fs-klein); font-weight: var(--gew-halb);
    color: var(--tinte-leise); white-space: nowrap; cursor: pointer;
}
.rubriken__knopf:hover { background: var(--papier); color: var(--tinte); }

/* Die aktuelle Rubrik traegt Farbe, keine Umrandung: Eine Umrandung sieht aus
   wie ein Eingabefeld, und daneben steht gleich das erste. */
.rubriken__punkt--hier .rubriken__knopf {
    background: var(--strom); color: var(--papier);
}
.rubriken__punkt--hier .rubriken__knopf:hover { background: var(--strom-tief); color: var(--papier); }

.rubriken__punkt--erledigt .rubriken__knopf { color: var(--strom); }
.rubriken__haken { font-size: 1em; }
/* --------------------------------------------------------- Abschnitte

   HIER STAND EINMAL EIN AKKORDEON.

   Bis hierhin stand ein Abschnitt offen, die anderen klappten zu einer Zeile
   mit den gegebenen Antworten zusammen - die Antwort auf eine Schadenmeldung
   mit 41 Eingabefeldern auf 5100 Pixeln. Seit Schaden und Vertrag auf den
   Spartenseiten stehen und die Beratungsfragen in "Feinheiten" gewandert
   sind, traegt die laengste Seite siebzehn Felder: eine dritte Klappebene
   spart nichts mehr, und jeder Abschnitt steht jetzt offen untereinander. */

.teile { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-8); }

.teil {
    border: 1px solid var(--stein);
    border-radius: var(--r-md);
    background: var(--papier);
    padding: var(--sp-4);
}

/* Eine Versalzeile, die einen Abschnitt benennt - klein, gesperrt, blau. */
.teil__titel {
    font-size: var(--fs-klein); font-weight: var(--gew-halb);
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--strom);
}

/* Eine Zeile unter der Abschnittsueberschrift. "Feinheiten" braucht sie:
   Die Ueberschrift allein sagt nicht, dass nichts davon noetig ist. */
.teil__hilfe {
    margin: -0.25rem 0 1rem;
    color: var(--tinte-leise);
    font-size: 0.9375rem;
}

/* Das fieldset ist nur da, um alles darin auf einmal abschalten zu koennen
   (eine <section> kann das nicht). Es soll nichts aussehen.

   Kein horizontales Padding mehr: Das liefert seit W1 (Fixrunde 1) .teil
   selbst. Zwei Innenabstaende nebeneinander haetten Titel und Felder
   gegeneinander verschoben. */
/* ------------------------------------------------- Abschnitt hinter Klappe

   Freiwillige Angaben, die der Kunde nur aufmacht, wenn er sie zur Hand hat.

   ## Warum der Kopf anders aussieht als jede andere Abschnittsueberschrift

   Der erste Anlauf gab ihm dieselbe kleine blaue Versalzeile wie allen
   Abschnitten, dazu ein blasses Winkelzeichen in der Ecke. Ergebnis: Er sah
   aus wie eine Karte, auf der der Text fehlt - nichts daran sagte, dass sich
   etwas dahinter aufmacht. Der Auftraggeber hat ihn als "zu unauffaellig"
   gemeldet.

   Jetzt tragen ihn drei Unterschiede statt keinem: ein getoenter Grund, die
   Ueberschrift in Fragengroesse statt als Versalzeile, und ein beschrifteter
   Knopf. Ein Winkelzeichen allein ist zu wenig - "Ausklappen" steht da. */
.teil--klappe {
    padding: 0;
    /* Haelt den getoenten Kopf innerhalb der abgerundeten Ecken. */
    overflow: hidden;
}

.teil__klappkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--strom-hauch);
    cursor: pointer;
    list-style: none;
}

.teil__klappkopf::-webkit-details-marker { display: none; }

.teil__klappkopf:hover { background: color-mix(in srgb, var(--strom-hauch) 88%, var(--strom)); }

.teil__klappkopf:focus-visible { outline: 3px solid var(--strom); outline-offset: -3px; }

.teil__klapptext { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }

/* In Fragengroesse und in Tinte, nicht als kleine blaue Versalzeile: Das ist
   der Unterschied, der aus einer Ueberschrift eine Einladung macht. */
.teil__klapptitel {
    font-size: var(--fs-frage);
    font-weight: var(--gew-halb);
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--tinte);
}

.teil__klapphilfe {
    font-size: 0.9375rem;
    color: var(--tinte-leise);
    line-height: 1.45;
}

.teil__klappknopf {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--strom);
    border-radius: var(--r-md);
    background: var(--papier);
    color: var(--strom);
    font-size: var(--fs-klein);
    font-weight: var(--gew-halb);
    white-space: nowrap;
}

/* Das Winkelzeichen dreht sich beim Aufklappen. Kein Skript - `details[open]`
   ist ein Zustand, den der Browser selbst fuehrt. */
.teil__klappknopf::after {
    content: "";
    width: .45rem; height: .45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.12em) rotate(45deg);
    transition: transform 120ms ease;
}

.teil--klappe[open] .teil__klappknopf::after { transform: translateY(.08em) rotate(-135deg); }

@media (prefers-reduced-motion: reduce) {
    .teil__klappknopf::after { transition: none; }
}

/* Zwei Beschriftungen, eine davon jeweils versteckt. Der Browser fuehrt
   `open` selbst; es braucht kein Skript, das Text austauscht. */
.teil--klappe:not([open]) .teil__klappknopf .zu,
.teil--klappe[open]      .teil__klappknopf .auf { display: none; }

/* DER GRUND, WARUM DAS HIER STEHT: `.teil__felder` hat bewusst kein
   seitliches Padding - das liefert sonst `.teil`. Die Klappe nimmt der Karte
   ihr Padding weg, damit der getoente Kopf bis an die Kante reicht; ohne
   diese Zeile liefen die Felder darunter aus der Karte heraus. Genau so ist
   es beim ersten Anlauf ausgeliefert worden. */
.teil--klappe .teil__felder {
    padding: var(--sp-6) var(--sp-4) var(--sp-4);
}

@media (max-width: 32rem) {
    .teil__klappkopf { flex-direction: column; align-items: stretch; }
    .teil__klappknopf { justify-content: center; }
}

.teil__felder {
    border: 0; margin: 0; min-width: 0;
    padding: var(--sp-6) 0 0;
    border-top: 1px solid var(--stein);
}

/* ---------------------------------------------------------------- Felder */

.feld { margin: 0 0 var(--sp-8); }

/* Die Frage ist der Held: groß und kräftig, wie gesprochen.

   Sie steht in der Designschrift, der Hilfetext darunter in der Hauptschrift.
   Das ist der Unterschied, für den das Brand-Kit zwei Schriften vorsieht, und
   die Frage ist die Stelle, an der er im Formular am meisten trägt: Was
   gefragt wird, spricht — was erklärt, verwaltet.

   Größe (1,375 zu 1,0625 rem), Gewicht und Farbe bleiben trotzdem, wie sie
   waren. Sie mussten den Wechsel eine Fassung lang allein ersetzen und sind
   deshalb weit auseinander; zusammen mit der Serife ist die Frage jetzt
   unübersehbar, und genau das soll sie sein. */
.feld__label {
    display: block;
    font-size: var(--fs-frage);
    font-weight: var(--gew-halb); line-height: 1.3;
    letter-spacing: -.01em; margin-bottom: var(--sp-2);
}
/* Der Zusatz „(Pflicht)" ist kein Teil der Frage, sondern eine Angabe über
   sie: kleiner, leichter, leiser. */
.feld__pflicht {
    font-size: var(--fs-klein);
    font-weight: 400; color: var(--tinte-leise);
}
.feld__hilfe { color: var(--tinte-leise); font-size: var(--fs-text); margin: 0 0 var(--sp-3); }
.feld__fehler {
    color: var(--fehler); font-weight: 600; margin: 0 0 var(--sp-3);
    padding-left: var(--sp-3); border-left: 3px solid var(--fehler);
}

.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"],
.feld input[type="date"], .feld input[type="password"], .feld textarea, .feld select {
    width: 100%; min-height: var(--tap); padding: var(--sp-3);
    font: inherit; color: inherit; background: var(--papier);
    border: 1px solid var(--stein-kraft); border-radius: var(--r-md);
}
.feld textarea { min-height: 8rem; resize: vertical; }
.feld--fehler input, .feld--fehler textarea, .feld--fehler select, .feld--fehler .wahl {
    border-color: var(--fehler); border-width: 2px;
}

/* ------------------------------------------------ Auswahl und Mehrfachwahl */

.wahl { border: 0; padding: 0; margin: 0; }
.wahl .feld__label { padding: 0; }

.wahl__option {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: 3.25rem; padding: var(--sp-3) var(--sp-4);
    background: var(--papier); border: 1px solid var(--stein);
    border-radius: var(--r-md); margin-bottom: var(--sp-2); cursor: pointer;
}
.wahl__option:hover { border-color: var(--strom); }
.wahl__option input { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--strom); }
.wahl__option:has(input:checked) {
    background: var(--strom-hauch); border-color: var(--strom);
    box-shadow: inset 3px 0 0 var(--strom);
}

/* ---------------------------------------------------------------- Knöpfe */

.knopf {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap); padding: var(--sp-3) var(--sp-6);
    border: 1px solid transparent; border-radius: var(--r-md);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.knopf--haupt { background: var(--strom); color: var(--papier); }
.knopf--haupt:hover { background: var(--strom-tief); }
.knopf--leise { background: transparent; color: var(--strom); border-color: var(--stein-kraft); }
.knopf--leise:hover { background: var(--papier); border-color: var(--strom); }

.knopf--still {
    background: var(--papier); color: var(--strom); border-color: var(--stein);
    font-weight: 400;
}
.knopf--still:hover { border-color: var(--strom); }

/* Die Aktionsleiste unter den Abschnitten - die beiden Auswege.

   "Weiter" steht hier NICHT mehr. Es stand frueher zweimal auf der Seite,
   weil eine Rubrik fuenf Bildschirmlaengen lang war. Seit die Abschnitte
   nacheinander kommen, sitzt es am Ende des offenen Abschnitts, dort wo der
   Kunde gerade ist. Zwei gleich beschriftete Hauptknoepfe auf einem Bildschirm
   sind eine Frage, keine Fuehrung.

   "Zurueck" links und leise, "Anfrage absenden" rechts und ebenfalls leise:
   Es ist ein Ausgang, keine Empfehlung.                                     */
.aktionen { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.aktionen__absenden { margin-left: auto; }

/* ------------------------------------------------------ Die untere Leiste

   Sie klebt am unteren Rand, solange das Formular sichtbar ist, und gibt sich
   am Seitenende von selbst wieder frei.

   ## Warum sticky und nicht fixed

   `fixed` nimmt das Element aus dem Fluss: Der Seitenfuß liefe dahinter, und
   der Ausgleich waere ein Innenabstand am Seitenende, dessen richtiger Wert
   von der Hoehe der Leiste abhaengt - die mit der Textmenge und der
   Fenstergroesse schwankt. `sticky` reserviert seinen Platz selbst.

   ## Warum jetzt auf ALLEN Bildschirmen

   Vorher nur bis 48rem, mit der Begruendung, auf grossen Bildschirmen sehe man
   den Seitenfuss ohnehin. Das stimmt fuer eine kurze Seite. Eine Kfz-Rubrik
   beim Vergleich traegt vierzehn Felder, und dann steht "Weiter" auch am
   Schreibtisch ausserhalb des Sichtfelds.

   Nur die Anfragestrecke: Im Backend gibt es ebenfalls `.aktionen` (siehe
   `.pult`), und dort waere eine klebende Leiste falsch - die Seiten sind kurz. */
/* ------------------------------------------------------ Die untere Leiste

   Wege und Zusage, immer im Bild, solange das Formular laeuft.

   ## Was hier NICHT mehr steht

   Die drei Pflichtseiten. Sie standen eine Fassung lang mit in der Leiste -
   und darunter im Seitenfuss noch einmal, keine zwei Zentimeter entfernt. Das
   sah aus wie ein Fehler. Der Versuch, den Fuss dafuer abzuschalten, machte es
   schlimmer: Die Seite endete mit einer schwebenden weissen Karte und darunter
   grauer Leere.

   Der Grund war ein Denkfehler, kein Stilfehler. Eine Aktionsleiste und ein
   Seitenfuss sind zwei Bauteile mit zwei Aufgaben: Die Leiste ist dauerhaft,
   flach und funktional; der Fuss ist statisch, auskunftgebend und steht am
   Ende. Impressum, Datenschutz und Erstinformation muessen ERREICHBAR sein,
   nicht dauerhaft sichtbar - dafuer ist der Fuss da, und dort stehen sie
   wieder.

   ## Randlos

   Eine Leiste, die vor dem Fensterrand aufhoert, liest sich als Karte, nicht
   als Leiste. `margin-inline: calc(50% - 50vw)` zieht sie ueber die volle
   Breite; das Innenpolster holt den Inhalt wieder auf die Spalte zurueck, so
   dass er mit dem Formular flucht.

   `100vw` ist um die Breite des Rollbalkens groesser als der sichtbare
   Bereich - deshalb `overflow-x: clip` am body (siehe dort). `clip` und nicht
   `hidden`: `hidden` an einem Vorfahren macht `position: sticky` wirkungslos.

   ## sticky, nicht fixed

   `fixed` nimmt das Element aus dem Fluss: Der Seitenfuss liefe dahinter, und
   der Ausgleich waere ein Innenabstand, dessen richtiger Wert von der
   Leistenhoehe abhaengt - die mit Textmenge und Fenstergroesse schwankt.
   `sticky` reserviert seinen Platz selbst.

   Nur die Anfragestrecke: Im Backend gibt es ebenfalls `.aktionen` (siehe
   `.pult`), und dort waere eine klebende Leiste falsch - die Seiten sind kurz. */
/* Die Rubrikseite endet mit der Leiste. Das uebliche untere Polster stuende
   zwischen ihr und dem Fuss als grauer Streifen - der Auftraggeber hat ihn als
   Loch gelesen, und genau so sieht er auch aus. */
.seite--leiste { padding-bottom: 0; }

form[data-bedingungen] .leiste-unten {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: var(--sp-8);
    margin-inline: calc(50% - 50vw);
    /* Aussen bis zum Fensterrand, innen buendig mit der 40rem-Spalte. */
    padding: var(--sp-3) max(var(--sp-4), calc(50vw - 20rem));
    padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
    /* Weiss, nicht --kiesel: Kiesel ist der Seitengrund. Eine Leiste in der
       Farbe des Grundes, auf dem sie liegt, ist ein grauer Fleck mit Kante. */
    background: var(--papier);
    border-top: 1px solid var(--stein);
    box-shadow: 0 -8px 20px rgba(16, 32, 46, .10);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-6);
}

/* Hinweis links, Wege rechts - und zwar ueber die Reihenfolge im Dokument,
   nicht ueber `order`. So laufen Auge und Tastatur denselben Weg: erst die
   Zusage, dann die Knoepfe. */


/* Kleiner als der Fliesstext: Was dauerhaft dasteht, darf nicht so laut sein
   wie die Frage, um die es geht.

   `flex: 1 1 20rem` ist die Lehre aus dem ersten Anlauf: Dort stand der Satz in
   einer Rasterspalte, die neben drei Knoepfen auf elf Zeichen zusammenfiel -
   sechs Zeilen fuer einen Satz. Jetzt bekommt er entweder seine 20rem oder er
   nimmt sich eine eigene Zeile. */
.leiste-unten__zusage {
    margin: 0;
    flex: 1 1 20rem;
    font-size: var(--fs-klein);
    line-height: 1.4;
    color: var(--tinte-leise);
}

.leiste-unten__zusage a { font-weight: 600; white-space: nowrap; }

form[data-bedingungen] .leiste-unten .aktionen {
    flex: 0 0 auto;
    gap: var(--sp-2);
}

/* In der eigenen Spalte braucht "Absenden" keinen Schub nach rechts. */
form[data-bedingungen] .leiste-unten .aktionen__absenden { margin-left: 0; }

/* Auf schmalen Geraeten: Zusage oben, Knoepfe darunter ueber die volle Zeile. */
@media (max-width: 33.999rem) {
    form[data-bedingungen] .leiste-unten .aktionen { flex: 1 1 100%; }
    form[data-bedingungen] .leiste-unten .knopf { flex: 1 1 auto; min-width: 0; }
}

/* -------------------------------------------------------- Wiederholgruppe */

.gruppe {
    border: 1px solid var(--stein); border-radius: var(--r-lg);
    padding: var(--sp-4); margin: 0 0 var(--sp-8); background: var(--papier);
}
.gruppe__eintrag { border-top: 1px solid var(--stein); padding-top: var(--sp-4); margin-top: var(--sp-4); }
.gruppe__eintrag:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--sp-4); }
.gruppe__nummer {
    color: var(--strom); font-size: var(--fs-klein); font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--sp-3);
}
.gruppe .feld { margin-bottom: var(--sp-4); }
.gruppe .feld__label { font-size: var(--fs-text); font-weight: 600; }
.gruppe__mehr { margin-top: var(--sp-3); }

/* ----------------------------------------------------------- Einwilligung */

.einwilligung {
    border: 1px solid var(--stein); border-radius: var(--r-md);
    padding: var(--sp-4); margin-bottom: var(--sp-3); background: var(--papier);
}
.einwilligung--fehler { border-color: var(--fehler); border-width: 2px; }
.einwilligung__zeile {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: var(--tap); font-weight: 600; cursor: pointer;
}
.einwilligung__zeile input { width: 1.375rem; height: 1.375rem; flex: none; accent-color: var(--strom); }
.einwilligung__text {
    white-space: pre-line; color: var(--tinte-leise);
    font-size: var(--fs-klein); line-height: 1.6; margin: var(--sp-3) 0 0;
}

/* ------------------------------------------------------------- Meldungen */

.meldung {
    border-radius: var(--r-md); padding: var(--sp-4);
    margin: 0 0 var(--sp-6); border-left: 4px solid;
}
.meldung ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-6); }
.meldung--fehler  { background: var(--fehler-grund);  border-color: var(--fehler);  color: var(--fehler); }
.meldung--hinweis { background: var(--warnung-grund); border-color: var(--warnung); }
.meldung--erfolg  { background: var(--erfolg-grund);  border-color: var(--erfolg);  color: var(--erfolg); }

/* --------------------------------------------------------- Zusammenfassung */

.abschnitt {
    background: var(--papier); border: 1px solid var(--stein);
    border-radius: var(--r-lg); padding: var(--sp-6); margin-bottom: var(--sp-4);
}
.abschnitt__titel { display: flex; align-items: baseline; gap: var(--sp-3); }
.abschnitt__aendern { margin-left: auto; font-size: var(--fs-klein); }

.uebersicht { margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-1); }
.uebersicht dt { color: var(--tinte-leise); font-size: var(--fs-klein); }
.uebersicht dd { margin: 0 0 var(--sp-4); }
@media (min-width: 40rem) {
    .uebersicht { grid-template-columns: 16rem 1fr; gap: var(--sp-3) var(--sp-6); }
    .uebersicht dd { margin-bottom: 0; }
}

.vorgangsnummer {
    font-size: 2rem; letter-spacing: .08em;
    color: var(--strom); margin: 0 0 var(--sp-2); font-variant-numeric: tabular-nums;
}

.fortsetzlink {
    display: block; width: 100%; font-family: ui-monospace, Consolas, monospace;
    font-size: var(--fs-klein); word-break: break-all; padding: var(--sp-3);
    background: var(--strom-hauch); border: 1px solid var(--strom);
    border-radius: var(--r-md);
}

/* -------------------------------------------------------------- Dokumente */

.dateiliste { list-style: none; padding: 0; margin: 0; }
.dateiliste li {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--stein);
}
.dateiliste li > span:first-child { flex: 1; }
.dateiliste__groesse { color: var(--tinte-leise); font-size: var(--fs-klein); }

/* Das Unterlagenangebot steht unter den Fragen, die das Dokument
   beantwortet — abgesetzt, aber nicht als Kasten: Es ist ein Angebot,
   keine Warnung. --linie/--gedaempft aus dem Entwurf gibt es hier nicht;
   --stein und --tinte-leise tragen dieselbe Rolle schon bei .dateiliste. */
.unterlagen-block {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--stein);
}

.unterlagen-block__titel {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
}

.unterlagen-block__hilfe {
    margin: 0 0 0.75rem;
    color: var(--tinte-leise);
    font-size: 0.9375rem;
}

.unterlagen-block__liste {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- Backend */

.filter {
    background: var(--papier); border: 1px solid var(--stein);
    border-radius: var(--r-lg); padding: var(--sp-6); margin-bottom: var(--sp-8);
}
.filter .feld__label { font-size: var(--fs-text); font-weight: 600; }
.filter__zeile { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.filter__zeile .feld { flex: 1 1 8rem; margin-bottom: 0; }

.tabelle { width: 100%; border-collapse: collapse; background: var(--papier); border-radius: var(--r-lg); overflow: hidden; }
.tabelle th, .tabelle td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--stein); }
.tabelle th {
    color: var(--tinte-leise); font-size: var(--fs-klein);
    text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.tabelle tbody tr:hover { background: var(--strom-hauch); }
.tabelle td:first-child { font-variant-numeric: tabular-nums; }

.version { color: var(--tinte-leise); font-size: var(--fs-klein); }

.kacheln {
    display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.kachel {
    display: block; text-decoration: none; color: inherit;
    background: var(--papier); border: 1px solid var(--stein);
    border-radius: var(--r-lg); padding: var(--sp-4);
}
.kachel:hover { border-color: var(--strom); background: var(--strom-hauch); }
.kachel__zahl {
    display: block; font-size: 2.25rem;
    line-height: 1.1; color: var(--strom); font-variant-numeric: tabular-nums;
}
.kachel__wort { display: block; color: var(--tinte-leise); font-size: var(--fs-klein); }

.betrieb { margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-1); }
.betrieb dt { color: var(--tinte-leise); font-size: var(--fs-klein); }
.betrieb dd { margin: 0 0 var(--sp-4); }
.betrieb__erklaerung { display: block; color: var(--tinte-leise); font-size: var(--fs-klein); }
.betrieb--warnung strong { color: var(--fehler); }
.betrieb--warnung .betrieb__erklaerung { color: var(--fehler); }
@media (min-width: 40rem) {
    .betrieb { grid-template-columns: 12rem 1fr; gap: var(--sp-3) var(--sp-6); }
    .betrieb dd { margin-bottom: 0; }
}

.notiz {
    border-left: 3px solid var(--stein); padding-left: var(--sp-4);
    margin-top: var(--sp-4);
}
.notiz__kopf { color: var(--tinte-leise); font-size: var(--fs-klein); margin: 0 0 var(--sp-1); }
.notiz__text { white-space: pre-line; margin: 0; }

/* Der Wortlaut der Mail steht zugeklappt da: Ausgeklappt bestuende die
   Zeitleiste aus lauter vollen Mails, und die eine Zeile, auf die es ankommt,
   waere nicht mehr zu finden. Ohne Skript - das kann `details` selbst. */
.wortlaut { margin-top: var(--sp-2); }
.wortlaut summary {
    cursor: pointer; color: var(--tinte-leise); font-size: var(--fs-klein);
}
.wortlaut__text {
    white-space: pre-line; margin: var(--sp-2) 0 0;
    padding: var(--sp-3); background: var(--kiesel); border-left: 3px solid var(--stein);
    font-size: var(--fs-klein);
}

/* Der Loeschbereich hebt sich ab, ohne zu schreien: Ein roter Kasten mitten
   in der Seite wuerde bei jedem Aufruf Alarm auslosen, obwohl nichts ist. */
.abschnitt--gefahr { border-color: var(--fehler); }
/* Der PDF-Versand steht hinter einer Klappe: Er ist der eine Weg im Backend,
   auf dem Kundendaten das Haus verlassen (siehe VorgangController::pdfSenden).
   Was zugeklappt ist, klickt niemand aus Versehen an - und wer ihn braucht,
   findet ihn an der Stelle, an der auch die Zustaendigkeit steht. */
.pdfversand { margin-top: var(--sp-4); border-top: 1px solid var(--stein); padding-top: var(--sp-3); }
.pdfversand > summary { cursor: pointer; font-weight: var(--gew-halb); color: var(--strom); }
.pdfversand > summary::marker { color: var(--stein-kraft); }
.pdfversand form { margin-top: var(--sp-3); }

/* Die Frage des zweiten Schrittes. Sie steht in der Fehlerfarbe, obwohl kein
   Fehler vorliegt: Es ist die einzige Stelle im Backend, an der etwas
   unwiederbringlich verschwindet, und die Farbe ist dafuer reserviert. */
.loeschfrage { color: var(--fehler); font-weight: var(--gew-halb); margin: 0 0 var(--sp-3); }
.abschnitt--gefahr h2 { color: var(--fehler); }
.knopf--gefahr { background: var(--fehler); color: var(--papier); }
.knopf--gefahr:hover { background: #7f1c16; }

.codeliste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.codeliste code { font-size: var(--fs-gross); letter-spacing: .1em; }

/* ---------------------------------------------------- Backend: Werkbank

   Zwei Spalten erst, wenn wirklich Platz ist: Links das, was der Vorgang
   SAGT, rechts das, was man mit ihm TUT. Darunter wieder eine Spalte - eine
   gequetschte Randspalte ist schlechter als gar keine.

   Die Reihenfolge im Quelltext ist die inhaltliche: Tastatur und
   Sprachausgabe laufen die Angaben vor den Werkzeugen ab, egal wie breit
   der Bildschirm ist.                                                     */

.werkbank { display: grid; gap: var(--sp-6); align-items: start; }

/* Kein sticky an der Randspalte: Sie wird laenger als der Bildschirm, und ein
   festgeklebter Kasten, dessen Unterkante man nie erreicht, ist schlimmer als
   einer, der mitscrollt. */
@media (min-width: 68rem) {
    .werkbank { grid-template-columns: minmax(0, 1.35fr) minmax(24rem, 1fr); gap: var(--sp-8); }

    /* Spalten fest zugeordnet statt der Quelltextreihenfolge ueberlassen: Auf
       der Zugangsseite steht das Anlegeformular bewusst VOR der Kontenliste
       (im schmalen Layout ist es sonst unerreichbar weit unten), gehoert
       breit aber trotzdem nach rechts. */
    .werkbank__haupt { grid-column: 1; grid-row: 1; }
    .werkbank__rand  { grid-column: 2; grid-row: 1; }
}

.werkbank__haupt > .abschnitt:first-child,
.werkbank__rand > .abschnitt:first-child { margin-top: 0; }

/* Angaben in zwei Spalten, sobald der Kasten es hergibt - dafuer der
   Containerbezug statt einer Bildschirmbreite: Dieselbe Liste steht mal in
   der breiten, mal in der schmalen Spalte. */
.uebersicht--schmal { grid-template-columns: 1fr !important; gap: var(--sp-1) !important; }
.uebersicht--schmal dd { margin-bottom: var(--sp-3); }

/* Breite Tabellen scrollen in SICH, nicht die Seite: Eine waagerecht
   verschobene Seite verliert die Kopfzeile mit nach links. */
.tabelle__rahmen { overflow-x: auto; border-radius: var(--r-lg); }
.tabelle__rahmen .tabelle { min-width: 44rem; }

/* Die Kundenliste traegt acht Spalten und in einigen davon zwei Zeilen. Ein
   engerer Zeilenabstand und eine kleinere Zweitzeile halten sie ueberschaubar,
   ohne dass die Schrift unlesbar wird. */
.tabelle--kunden { min-width: 68rem; }
.tabelle--kunden th, .tabelle--kunden td { padding: var(--sp-2) var(--sp-3); vertical-align: top; }
.zeile__zweit { display: block; color: var(--tinte-leise); font-size: var(--fs-klein); }

/* ------------------------------------------------------------- Rechtstext */

.rechtstext h1 { font-size: var(--fs-titel); }
.rechtstext h2 { margin-top: var(--sp-12); }
.rechtstext code { background: var(--kiesel); padding: 0 .3em; border-radius: 3px; font-size: .9em; }
.rechtstext blockquote {
    margin: var(--sp-6) 0; padding: var(--sp-4);
    background: var(--strom-hauch); border-left: 4px solid var(--strom); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.rechtstext blockquote p { margin: 0; }
.rechtstext table { border-collapse: collapse; width: 100%; }
.rechtstext td, .rechtstext th {
    text-align: left; padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
    border-bottom: 1px solid var(--stein); vertical-align: top;
}

/* --------------------------------------------------------------- Über uns

   Ein Text, den jemand von oben nach unten liest — kein Schaufenster. Deshalb
   die schmale Spalte der Formularstrecke und keine breite Fassung: Fliesstext
   liest sich ab etwa 75 Zeichen je Zeile schlechter, und diese Seite ist fast
   nur Fliesstext.

   Die Gestaltung hat hier genau drei Eingriffe. Alles andere ist Absatz:

     1. Der Kopf mit dem Portraet — wer „Ueber uns" oeffnet, will sehen, um
        wen es geht, bevor er liest.
     2. EIN Zitat auf blauer Flaeche: der Satz, um den die Seite gebaut ist.
     3. Zwei Aussagen mit blauer Linie — Saetze, die einen Abschnitt
        zusammenfassen statt einen zu eroeffnen. Eine Ueberschrift waeren sie
        falsch, ein normaler Absatz zu wenig.

   Mehr waere Dekoration. Ein Lebenslauf mit Zeitstrahl, Zahlenkacheln
   („36 Jahre", „8 Jahre") oder drei Wertekacheln haetten sich angeboten - und
   haetten aus einem persoenlichen Text eine Unternehmensbroschuere gemacht. */

/* DAS FOTO STAND IN EINER RASTERSPALTE NEBEN DER ANREDE.

   Das Raster gab ihm eine feste Spalte und der Anrede den Rest. Nur ist die
   Anrede drei Zeilen lang und das Portraet siebzehn - daneben stand eine
   halbe Bildschirmhoehe Leere, und darunter ging der Text in voller Breite
   weiter. Das Bild sass in einem Loch.

   Jetzt laeuft der Text daran vorbei: Das Foto steht rechts im Fluss, die
   Absaetze fuellen die Luecke von selbst, egal wie lang sie sind. Auf
   schmalen Geraeten faellt der Umfluss weg - unter 34rem bliebe fuer den Text
   daneben keine lesbare Zeilenbreite. */
.ueber__bild-rahmen { margin: 0 0 var(--sp-6); max-width: 13rem; }

.ueber__bild {
    /* `height: auto` ist Pflicht: Das <img> traegt width/height als Attribut,
       damit beim Laden nichts springt - ohne diese Zeile wirken sie wie eine
       feste Groesse und `aspect-ratio` kommt nicht zum Zug. */
    display: block; width: 100%; height: auto;
    /* KEIN `aspect-ratio` und kein `object-fit`: Die beiden Bilder haben
       verschiedene Formate - Hochkant fuer das Portraet, Querformat fuer das
       Gespraech -, und beide werden ganz gezeigt. Den Platz reservieren die
       width/height-Attribute am <img>; `height: auto` darueber macht daraus
       ein Verhaeltnis statt einer festen Hoehe. */
    border-radius: var(--r-md);
    box-shadow: 0 10px 30px rgba(15, 30, 60, .16);
}


.ueber__titel {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    margin-bottom: var(--sp-6);
    /* Drei Saetze aus je einem Wort: `balance` verteilt sie auf zwei
       gleich lange Zeilen, statt „Mit" allein stehen zu lassen. */
    text-wrap: balance;
}

.ueber__anrede {
    font-size: var(--fs-gross);
    line-height: 1.45;
    margin: 0;
}

/* Derselbe Marker wie im Auftakt, aber BLAU statt tuerkis: Dort liegt er auf
   einer blauen Flaeche, hier auf Weiss. Tuerkis auf Weiss traegt 1,7 : 1 und
   waere nicht zu lesen - dieselbe Rolle, andere Farbe, weil der Grund ein
   anderer ist. */
.ueber__marker {
    background: var(--strom); color: var(--papier);
    font-weight: var(--gew-fett);
    text-transform: uppercase; letter-spacing: .03em;
    padding: .05em .3em .1em; border-radius: 3px;
    white-space: nowrap;
}

@media (min-width: 34rem) {
    .ueber__bild-rahmen {
        float: right;
        max-width: 16rem;
        margin: .35rem 0 var(--sp-4) var(--sp-8);
    }

    /* Das zweite Motiv steht links, der Text rechts daneben - abwechselnd wie
       in einer Zeitschrift. Zwei Bilder am selben Rand lesen sich wie eine
       Spalte, die zufaellig Luecken hat.

       DIESE REGEL MUSS NACH DER OBIGEN STEHEN: Beide sind gleich spezifisch,
       und bei Gleichstand gewinnt die spaetere. Stand sie vorher, blieb das
       Bild rechts - genau so ist es im ersten Anlauf ausgeliefert worden. */
    /* HIER SCHWAMM DAS ZWEITE BILD LINKS IM TEXT MIT.

       Es ist ein Querformat, und daneben blieben vom Absatz vierzig Zeichen
       je Zeile - ausgerechnet bei dem Absatz, der die Zusage der Seite
       traegt. Jetzt steht es ueber die volle Spalte: Das Bild bekommt seine
       Breite, der Text seine.

       Die Regel steht trotzdem HIER, hinter `float: right` - sie hebt es auf,
       und bei gleicher Spezifitaet gewinnt die spaetere. */
    .ueber__bild-rahmen--band {
        float: none;
        max-width: none;
        margin: var(--sp-6) 0;
    }
}

.ueber h2 {
    /* `clear`, damit keine Überschrift neben dem umflossenen Foto beginnt -
       sie eröffnet einen Abschnitt und braucht die ganze Breite. */
    clear: both;
    font-size: var(--fs-frage);
    margin: var(--sp-12) 0 var(--sp-4);
}

.ueber p { margin: 0 0 var(--sp-4); }

/* Das Zitat - die einzige Farbflaeche der Seite.

   Der tuerkise Strich darueber ist der Anschlag, kein Schmuck: Er nimmt das
   Signalband der Kopfleiste auf, verkuerzt auf die Breite eines Wortes. Ein
   Anfuehrungszeichen in Uebergroesse haette dasselbe gesagt und dabei nach
   Zitatvorlage ausgesehen. */
.ueber__zitat {
    /* `clear` haelt die blaue Flaeche vom Foto frei: Neben dem Umfluss waere
       sie eine schmale Saeule statt einer Flaeche. Das Foto steht zwar erst
       darunter - aber wenn jemand den Text spaeter umstellt, soll die Regel
       schon da sein. */
    clear: both;
    margin: var(--sp-8) 0;
    padding: var(--sp-6);
    background: var(--primaer);
    color: var(--papier);
    border-radius: var(--r-lg);
}

.ueber__zitat::before {
    content: '';
    display: block;
    width: 2.5rem; height: 4px;
    background: var(--tuerkis);
    margin-bottom: var(--sp-4);
}

.ueber__zitat p {
    margin: 0;
    max-width: none;
    font-size: clamp(1.25rem, 4.2vw, 1.625rem);
    font-weight: var(--gew-halb);
    line-height: 1.35;
}

/* Saetze, die einen Abschnitt zusammenfassen. Die Linie steht links, weil sie
   den Satz an den Absatz davor bindet - eine Ueberschrift wuerde ihn vom
   Folgenden trennen, und das waere das Gegenteil.

   BLAU und nicht tuerkis: auf Weiss traegt Tuerkis nichts (siehe --tuerkis in
   :root). */
.ueber__aussage {
    /* `flow-root` und nicht nur Umfluss: Der Rahmen eines Absatzes umschliesst
       auch neben einem Bild die VOLLE Spaltenbreite - nur die Zeilen ruecken
       ein. Die blaue Linie stuende dann links vom Bild und der Satz rechts
       davon, mit einer Bildbreite Abstand dazwischen. Ein eigener
       Formatierungskontext haelt Linie und Text zusammen. */
    display: flow-root;
    font-size: var(--fs-gross);
    font-weight: var(--gew-halb);
    line-height: 1.45;
    border-left: 3px solid var(--strom);
    padding-left: var(--sp-4);
    margin: var(--sp-6) 0 !important;
}

.ueber__unterschrift {
    margin-top: var(--sp-12);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--stein);
    display: flex; flex-direction: column; gap: .15em;
    color: var(--tinte-leise);
    font-size: var(--fs-klein);
}

.ueber__unterschrift-name {
    font-size: var(--fs-gross);
    font-weight: var(--gew-fett);
    color: var(--tinte);
}

/* --------------------------------------------------------------- Fußzeile */

/* Kein Strich mehr oben: Dort liegt jetzt das Signalband, und zwei Kanten
   uebereinander sind eine zu viel. */
.fusszeile {
    background: var(--papier);
    padding: var(--sp-6) var(--sp-4); color: var(--tinte-leise); font-size: var(--fs-klein);
}
.fusszeile p, .fusszeile__wege { max-width: 40rem; margin: 0 auto; }

/* Die Anschrift stand in einer Zeile, mit Mittelpunkten getrennt. Auf dem
   Telefon brach sie um, und dann standen die Punkte am Zeilenanfang wie
   Aufzaehlungszeichen, die keine sind - der Auftraggeber hat genau das
   bemaengelt. Jetzt vier Zeilen, und ab 34rem wieder eine.

   Vier statt drei, seit der Name der Generalagentur vor dem Personennamen
   steht. */
.fusszeile__anschrift { display: flex; flex-direction: column; gap: 2px; }
.fusszeile__anschrift { margin-bottom: var(--sp-2) !important; }

/* HIER HIESS DIESE REIHE `fusszeile__rechtliches` und trug drei Verweise.
   Seit Startseite und „Ueber uns" danebenstehen, ist sie die Wegweisung der
   Seite und kein Rechtliches-Block mehr. */
.fusszeile__wege { display: flex; flex-wrap: wrap; gap: 0 var(--sp-6); }
/* Trefferflächen auf --tap: Fuenf kurze Links nebeneinander sind auf dem
   Telefon sonst nicht sicher zu treffen. */
.fusszeile__wege a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
/* Die Seite, auf der man steht, ist kein Weg mehr - sie steht da, aber ohne
   Unterstreichung und in der ruhigen Farbe. */
.fusszeile__wege [aria-current="page"] { color: var(--tinte-leise); text-decoration: none; }

.fusszeile__kontakt { margin-top: var(--sp-3) !important; }
.fusszeile__hinweis { margin-top: var(--sp-1) !important; }

@media (min-width: 34rem) {
    .fusszeile__anschrift { flex-direction: row; flex-wrap: wrap; gap: 0 var(--sp-2); }
    .fusszeile__anschrift span + span::before { content: '· '; color: var(--stein-kraft); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   DAS PULT — die Arbeitsoberfläche des Backends

   Getrennt vom Rest, und zwar bewusst gegensätzlich. Die Kundenstrecke kämpft
   gegen den Abbruch: viel Luft, große Fragen, ein Schritt nach dem anderen.
   Hier sitzt jemand acht Stunden und will das Gegenteil — kleine Schrift, viele
   Zeilen auf einen Blick, kurze Wege. Was dort Ruhe ist, ist hier Leerlauf.

   Die Randspalte statt einer Kopfleiste: Sie trägt die Orientierung ohne
   waagerechten Platz zu kosten, den die Tabellen brauchen, und sie bleibt beim
   Scrollen stehen. Auf schmalen Geräten klappt sie nach oben um.
   ========================================================================== */

.pult {
    /* 15 px statt 17. Die iOS-Zoom-Regel (mindestens 16 px) gilt für
       Eingabefelder — die behalten sie unten ausdrücklich. */
    font-size: .9375rem;
    line-height: 1.5;
    background: var(--kiesel);

    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
}

/* HIER STAND EINE AUSNAHME FUER DAS BACKEND.

   Solange die Kundenstrecke zwei Schriften trug, musste das Backend sich die
   Designschrift ausdruecklich abbestellen: Georgia in einer Zeile mit
   15-px-Tabellentext saesse sichtbar tiefer und liesse jede Ueberschrift
   verrutscht aussehen.

   Seit ueberall dieselbe Schrift steht, ist die Ausnahme gegenstandslos. */

/* ------------------------------------------------------------ Randspalte */

/* Das Sekundär-Blau des Brand-Kits, dieselbe Fläche wie im Auftakt der
   Kundenstrecke. Die weiße Fassung des Logos ist genau dafür da. */
.pult__rand {
    background: var(--nacht);
    color: var(--papier);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* HIER STAND DER NAME ALS TEXT: „Agentur Hausin / Vorgangsverwaltung".

   Jetzt das offizielle Logo in der weißen Fassung. Der Zusatz bleibt: Er sagt,
   WELCHES der beiden Häuser man vor sich hat — dieselbe Marke trägt außen die
   Kundenstrecke und hier drinnen das Werkzeug. */
.pult__marke {
    display: block; padding: var(--sp-4) var(--sp-4) var(--sp-6);
    text-decoration: none; color: var(--papier);
}
.pult__marke img { display: block; width: 184px; height: auto; }
.pult__marke-zusatz {
    display: block; margin-top: var(--sp-2);
    font-size: .75rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--himmel);
}

.pult__menue { list-style: none; margin: 0; padding: 0; flex: 1; }
.pult__menue li { max-width: none; }

.pult__menue a {
    display: block; padding: var(--sp-3) var(--sp-4);
    color: var(--papier); text-decoration: none;
    border-left: 3px solid transparent;
}
/* Aufhellen statt umfärben: Primär- und Sekundärblau sind fast gleich hell,
   ein Wechsel zwischen ihnen wäre als Zeigezustand nicht zu sehen. */
.pult__menue a:hover { background: rgba(255, 255, 255, .09); color: var(--papier); }

/* Die aktuelle Seite trägt eine Kante UND eine Fläche, nicht nur eine Farbe:
   Ein reiner Farbunterschied ist für Farbfehlsichtige keine Auskunft
   (WCAG 1.4.1). aria-current sagt dasselbe der Sprachausgabe. */
.pult__menue [aria-current="page"] {
    background: rgba(255, 255, 255, .15);
    border-left-color: var(--tuerkis);
    font-weight: 600;
}

.pult__fuss { border-top: 1px solid rgba(255, 255, 255, .18); padding: var(--sp-3) var(--sp-4); }
.pult__konto { display: block; color: var(--papier); text-decoration: none; margin-bottom: var(--sp-2); }
.pult__konto:hover { color: var(--himmel); }
.pult__konto-name { display: block; font-weight: 600; }
.pult__konto-rolle { display: block; font-size: .75rem; color: var(--himmel); }

.pult__abmelden {
    background: none; border: 0; padding: var(--sp-1) 0;
    color: var(--himmel); font: inherit; cursor: pointer; text-decoration: underline;
}
.pult__abmelden:hover { color: var(--papier); }
.pult__rand form { margin: 0; }

/* ------------------------------------------------------------- Inhalt */

.pult__inhalt { padding: var(--sp-6) var(--sp-6) var(--sp-16); min-width: 0; }

.pult__kopf {
    display: flex; align-items: flex-start; gap: var(--sp-4);
    flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.pult__kopf h1 {
    font-size: 1.375rem; font-weight: 600;
    letter-spacing: 0; margin: 0;
}
.pult__unterzeile { color: var(--tinte-leise); font-size: .8125rem; margin: var(--sp-1) 0 0; max-width: none; }
.pult__werkzeuge { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.pult__werkzeuge form { margin: 0; }

/* Fliesstext bleibt lesbar begrenzt, Tabellen und Raster nicht. */
.pult p, .pult li { max-width: 42rem; }

.pult h2 {
    font-size: 1rem; font-weight: 600;
    margin: 0 0 var(--sp-3);
}

/* Kästen enger: Die Polsterung der Kundenstrecke ergibt hier Seiten, auf denen
   vier Angaben einen ganzen Bildschirm füllen. */
.pult .abschnitt { padding: var(--sp-4); margin-bottom: var(--sp-4); border-radius: var(--r-md); }
.pult .feld { margin-bottom: var(--sp-4); }
.pult .feld__hilfe { font-size: .8125rem; margin-bottom: var(--sp-2); }
.pult .feld__label { font-size: .8125rem; font-weight: var(--gew-halb); text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-leise); }
.pult .aktionen { margin-top: var(--sp-4); }
.pult .meldung { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.pult .filter { padding: var(--sp-4); margin-bottom: var(--sp-4); border-radius: var(--r-md); }
.pult .kacheln { gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pult .kachel { padding: var(--sp-3); }
.pult .kachel__zahl { font-size: 1.75rem; }
.pult .abschnitt + .abschnitt { margin-top: 0; }

/* 16 px in Eingabefeldern bleiben: Darunter zoomt iOS beim Fokus in die Seite,
   und dann sitzt der Bearbeiter am Telefon in einer verschobenen Ansicht. */
.pult .feld input, .pult .feld select, .pult .feld textarea {
    font-size: 1rem; padding: var(--sp-2) var(--sp-3);
}
.pult .feld textarea { min-height: 5rem; }
.pult .knopf { padding: var(--sp-2) var(--sp-4); font-size: .875rem; min-height: 2.25rem; }

.pult .tabelle th, .pult .tabelle td { padding: var(--sp-2) var(--sp-3); }
.pult .tabelle th { font-size: .75rem; }

/* Zwei Spalten im Inhalt: links was der Vorgang SAGT, rechts was man mit ihm
   TUT. Enger als in der Kundenstrecke und ohne deren Umbruchpunkt. */
.pult .werkbank { gap: var(--sp-4); }
@media (min-width: 78rem) {
    .pult .werkbank { grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 1fr); gap: var(--sp-6); }
}

/* Angaben als enge Definitionsliste - die Kundenfassung ist hier zu luftig. */
.pult .uebersicht { gap: var(--sp-1) var(--sp-4); }
.pult .uebersicht dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 40rem) {
    .pult .uebersicht { grid-template-columns: 11rem 1fr; }
}
.pult .betrieb dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 40rem) {
    .pult .betrieb { grid-template-columns: 9rem 1fr; gap: var(--sp-2) var(--sp-4); }
}

/* ------------------------------------------------ Das Pult wird leiser

   Die Kundenstrecke spricht mit dem Kunden: grosse Felder, deutliche
   Beschriftungen, viel Luft. Das Pult wird BENUTZT, acht Stunden am Tag, und
   hat dieselben Masse geerbt. Neun Angaben zu einem Kunden fuellten damit
   einen ganzen Bildschirm. Was hier steht, nimmt sie zurueck - nicht ins
   Winzige, sondern auf Schreibtischmass. */

/* Eingabefelder auf Schreibtischmass. Die 44 Pixel sind ein Touch-Ziel und
   kommen aus der Kundenstrecke; hier sitzt jemand mit einer Maus davor und hat
   zehn Felder untereinander. Auf schmalen Bildschirmen bleiben sie stehen -
   dort wird wirklich getippt. Die Schriftgroesse bleibt ueberall bei 16px,
   sonst zoomt iOS beim Fokus in die Seite. */
@media (min-width: 48rem) {
    .pult .feld input, .pult .feld select { min-height: 2.25rem; }
    .pult .feld { margin-bottom: var(--sp-3); }
}

/* Beschriftungen in normaler Schreibweise.

   Grossbuchstaben mit Sperrung schreien jede Angabe gleich laut heraus, und
   "ANREDE" ist nicht wichtiger als der Name, der darunter steht - eher
   umgekehrt. Eine kleine, leise Beschriftung ueber einem kraeftigen Wert sagt
   dasselbe und laesst den Blick am Inhalt haengen statt an der Aufschrift. */
.pult .feld__label,
.pult .uebersicht dt,
.pult .betrieb dt,
.pult .tabelle th { text-transform: none; letter-spacing: 0; }

/* Angaben zweispaltig, sobald der Kasten es hergibt.

   dt und dd wechseln sich ab, vier Spalten fuellen also zwei Paare je Zeile.
   Bezeichnung schmal, Wert dehnbar - und minmax(0, 1fr), damit eine lange
   Strasse die Spalte weitet statt aus dem Kasten zu laufen. */
@container (min-width: 46rem) {
    .pult .uebersicht {
        grid-template-columns: 8.5rem minmax(0, 1fr) 8.5rem minmax(0, 1fr);
        gap: var(--sp-2) var(--sp-4);
    }
}

/* --------------------------------------------------- Schmale Bildschirme */

@media (max-width: 62rem) {
    .pult { grid-template-columns: 1fr; }

    .pult__rand {
        position: static; height: auto;
        flex-direction: row; flex-wrap: wrap; align-items: center;
        padding: 0 var(--sp-3);
    }
    .pult__marke { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; }
    .pult__marke img { width: 132px; }
    .pult__marke-zusatz { display: none; }
    .pult__menue { display: flex; flex: 1 1 100%; order: 3; margin: 0 calc(var(--sp-3) * -1); }
    .pult__menue a { border-left: 0; border-bottom: 3px solid transparent; }
    .pult__menue [aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--tuerkis); }
    .pult__fuss { border-top: 0; margin-left: auto; display: flex; gap: var(--sp-3); align-items: center; }
    .pult__konto { margin-bottom: 0; }
    .pult__inhalt { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
}

/* Zweispaltiges Feldraster im Backend: Zehn Kontaktfelder untereinander sind
   ein Bildschirm Scrollen fuer das, was auf eine Karteikarte passt. Ab 46rem
   Containerbreite - nicht Bildschirmbreite, denn dasselbe Raster steht mal in
   der breiten und mal in der schmalen Spalte. */
/* Der Container ist der ABSCHNITT, nicht das Raster selbst.
   Hier stand `.pult .raster { container-type: inline-size; }`, und die Regel
   darunter griff nie: Eine Container-Anfrage misst immer einen VORFAHREN, und
   ein Element kann nicht sein eigener Container sein. Die Zweispaltigkeit war
   damit seit ihrer Einfuehrung tot - in der Kundenakte wie auf der
   Bearbeiten-Seite des Vorgangs, jeweils zehn Felder in einer Kolonne, waehrend
   die halbe Breite leer danebenstand. */
.pult .abschnitt { container-type: inline-size; }

@container (min-width: 46rem) {
    .raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
    .raster__breit { grid-column: 1 / -1; }
}

/* Rueckfallebene fuer Browser ohne Container-Anfragen: dort entscheidet die
   Bildschirmbreite. Schlechter, aber nie schlimmer als eine Spalte. */
@supports not (container-type: inline-size) {
    @media (min-width: 78rem) {
        .pult .raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
        .pult .raster__breit { grid-column: 1 / -1; }
    }
}

/* Tabellen im Rechtstext - etwa die Aufbewahrungsfristen. Schmal genug, dass
   sie auf dem Telefon nicht ausbrechen, und mit Trennlinien statt Rahmen: Die
   Angabe soll sich lesen wie eine Liste, nicht wie ein Formular. */
.rechtstext table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; }
.rechtstext th, .rechtstext td {
    text-align: left; padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
    border-bottom: 1px solid var(--stein); vertical-align: top;
}
.rechtstext td:last-child { white-space: nowrap; color: var(--tinte-leise); }

/* ==========================================================================
   DIE STARTSEITE AUF BREITEN BILDSCHIRMEN

   Die 40rem der Formularschritte sind dort richtig - eine Frage nach der
   anderen, Fliesstext in lesbarer Zeilenlaenge. Die Startseite hat aber ein
   Bild, sechs Kacheln und drei Ablaufschritte, und die standen auf einem
   grossen Monitor als schmale Saeule in der Mitte, mit Wueste links und rechts.

   Der Text bleibt trotzdem begrenzt: Gewachsen ist das LAYOUT, nicht die
   Zeilenlaenge.
   ========================================================================== */

.seite--auftritt { max-width: 74rem; }

@media (min-width: 62rem) {
    /* Der Auftakt als echtes Zweispaltenbild: Text links, Person rechts, und
       das Portrait so gross, dass es ein Gesicht ist und kein Icon. Es ist der
       Grund, warum jemand ein Formular mit Geburtsdaten ueberhaupt anfaengt. */
    /* DAS BILD BLEEDET IN DIE FLAECHE.

       Vorher: Text mittig, Bild als eigener Kasten daneben - und weil das Bild
       hoeher ist als der Text, klaffte links unten ein leeres Viertel. Der
       Auftakt sah aus wie eine Box mit einem Loch.

       Jetzt fuellt das Foto seine Spalte ganz aus und traegt nur aussen runde
       Ecken. Flaeche und Bild sind ein Objekt, und der Text steht mittig in
       seiner Haelfte, ohne dass darunter etwas fehlt. */
    .seite--auftritt .auftakt {
        grid-template-columns: minmax(0, 1fr) 24rem;
        gap: 0;
        padding: 0;
        align-items: stretch;
        margin-bottom: var(--sp-16);
        overflow: hidden;
        box-shadow: 0 4px 24px rgba(15, 30, 60, .18);
    }
    .seite--auftritt .auftakt__text {
        padding: var(--sp-16) var(--sp-12);
        align-self: center;
    }
    .seite--auftritt .auftakt__bild-rahmen { max-width: none; height: 100%; }
    .seite--auftritt .auftakt__bild {
        height: 100%;
        aspect-ratio: auto;
        border-radius: 0;
        box-shadow: none;
    }
    /* Keine Titelgroesse mehr an dieser Stelle: Seit die Schlagzeile drei
       Zeilen mit eigenen Groessen hat, wuerde sie hier nichts mehr aendern
       ausser Verwirrung stiften. Was bleibt, ist der Abstand nach unten. */
    .seite--auftritt .auftakt__titel { margin-bottom: var(--sp-6); }
    .seite--auftritt .auftakt__claim { margin-bottom: var(--sp-12); }

    /* Auf dem breiten Bildschirm darf die Schlagzeile groesser werden als die
       vw-Formel es zulaesst: Sie steht dann in einer halben Seitenbreite und
       nicht in der ganzen. Die VERHAELTNISSE bleiben die des Banners -
       „SIGNAL" gut doppelt so gross wie die Ortszeile, der Anlauf gut ein
       Drittel davon. Ohne diese Staffelung waeren es drei Zeilen Text; mit ihr
       ist es die Treppe vom Bauzaun. */
    .seite--auftritt .auftakt__anlauf { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
    .seite--auftritt .auftakt__signal { font-size: clamp(3.5rem, 6.6vw, 5.25rem); }
    .seite--auftritt .auftakt__ort    { font-size: clamp(1.75rem, 3.1vw, 2.5rem); }
    .seite--auftritt .auftakt__person { margin-bottom: var(--sp-12); }
    .seite--auftritt .auftakt__name { font-size: 1.375rem; }
    .seite--auftritt .auftakt__rolle { font-size: 1.0625rem; max-width: 28rem; }
    .seite--auftritt .faktencheck__satz { font-size: 1.0625rem; }

    /* Die drei Schritte nebeneinander statt untereinander: Sie sind eine
       Reihenfolge, und nebeneinander sieht man sie als eine. Die Trennlinien
       der schmalen Fassung wuerden hier quer laufen - deshalb Karten. */
    .seite--auftritt .ablauf__schritte {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
    }
    .seite--auftritt .ablauf__schritte li {
        flex-direction: column; gap: var(--sp-3);
        border-bottom: 0; padding: var(--sp-6); margin: 0;
        background: var(--papier); border: 1px solid var(--stein);
        border-radius: var(--r-lg);
    }


    /* Die Zusage und der Anruf teilen sich eine Zeile: Beide sind Ausgaenge -
       weitermachen oder anrufen - und gehoeren nebeneinander, nicht
       hintereinander. */
    .seite--auftritt .abschluss {
        display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
        gap: var(--sp-4); align-items: stretch;
    }
    .seite--auftritt .abschluss .zusage { margin-bottom: 0; }
}

/* Der Anruf-Kasten. In der schmalen Fassung ist er eine Zeile, breit wird er
   die zweite Karte neben der Zusage. */
.anrufkarte {
    background: var(--papier); border: 1px solid var(--stein);
    border-radius: var(--r-lg); padding: var(--sp-6);
    display: flex; flex-direction: column; justify-content: center;
    margin-bottom: var(--sp-12);
}
.anrufkarte p { margin: 0 0 var(--sp-2); }
/* „Lieber anrufen?" eroeffnet die Karte - dasselbe Gewicht wie ein
   Schritttitel. Die Schrift ist ueberall dieselbe, also traegt das Gewicht. */
.anrufkarte p:first-child { font-weight: var(--gew-fett); }
.anrufkarte__nummer {
    font-size: var(--fs-frage);
    display: block; margin-bottom: var(--sp-1);
}
.anrufkarte__zeit { color: var(--tinte-leise); font-size: var(--fs-klein); }

@media (min-width: 62rem) {
    .anrufkarte { margin-bottom: 0; }
}

/* ------------------------------------------------ Kacheln und kurze Felder

   Zwei Darstellungsvarianten aus der Rueckmeldung des Auftraggebers.

   KACHELN: Die beiden Einstiegsfragen - Anliegen und Thema - haben sechs und
   acht Moeglichkeiten. Als Liste kleiner Kreise untereinander "erschlaegt"
   das, wie er es nannte; als Kacheln ist es dieselbe Information auf halber
   Hoehe und sieht aus wie eine Auswahl statt wie ein Fragebogen. Es ist
   dieselbe Optik wie auf der Startseite, und das ist Absicht: Wer dort auf
   eine Kachel getippt hat, findet hier wieder Kacheln.

   KURZ: HSN und TSN stehen im Fahrzeugschein nebeneinander und haben zusammen
   sieben Zeichen. Ein Feld ueber die volle Zeilenbreite fuer vier Zeichen
   sieht aus, als gehoerte mehr hinein - und genau das hat vorher dazu
   gefuehrt, dass Leute die ganze Nummer in ein Feld getippt haben.         */

.wahl--kacheln {
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Frage und Hilfetext ueber die volle Breite, nicht in einer Spalte. */
.wahl--kacheln > legend,
.wahl--kacheln > .feld__hilfe,
.wahl--kacheln > .feld__fehler { grid-column: 1 / -1; }

/* DIESELBE KACHEL WIE AUF DER STARTSEITE.

   Der Auftraggeber hat es so verlangt, und es ist mehr als Geschmack: Wer auf
   der Startseite eine Kachel antippt, landet im Formular vor derselben Frage.
   Sieht sie dort anders aus, zweifelt er, ob es dieselbe ist - und die erste
   Frage eines Formulars ist die, bei der am meisten abgebrochen wird.

   Der Unterschied zur Startseite ist nur der Knopf: Dort ist es ein Verweis,
   hier ein Auswahlfeld, das angekreuzt bleibt. */
.wahl--kacheln .wahl__option {
    align-items: flex-start;
    gap: var(--sp-3);
    /* Gleich hohe Kacheln in einer Zeile, auch wenn eine Beschriftung
       umbricht - sonst steht die Reihe wie eine Skyline. */
    height: 100%;
    margin: 0;
    padding: var(--sp-4);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wahl--kacheln .wahl__option:hover {
    border-color: var(--strom);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 32, 46, .10);
}
.wahl--kacheln .wahl__option input { margin-top: .1875rem; }

/* KACHELN OHNE ZWEITE ZEILE.

   Die Anliegenfrage hat ihre Halbsaetze am 31.08.2026 verloren (siehe
   `config/modules/anliegen/v1.php`), die Spartenfrage hat ihre behalten.
   Beide laufen durch dieselben Regeln - ohne diese hier behielte die
   einzeilige Kachel die Masse der zweizeiligen: ein Polster, das fuer zwei
   Zeilen gerechnet ist, und ein Knopf, der oben klebt statt neben seinem Wort
   zu stehen.

   `:has()` und nicht eine zweite Klasse im Markup: Ob eine Kachel zweizeilig
   ist, entscheidet die Moduldefinition. Eine Klasse dafuer muesste die
   Vorlage aus dem Vorhandensein des Zusatzes ableiten - also genau das, was
   der Selektor hier selbst sieht. */
.wahl--kacheln .wahl__option:not(:has(.wahl__zusatz)) {
    align-items: center;
    min-height: 3.25rem;
    padding: var(--sp-2) var(--sp-4);
}
.wahl--kacheln .wahl__option:not(:has(.wahl__zusatz)) input { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .wahl--kacheln .wahl__option { transition: none; }
    .wahl--kacheln .wahl__option:hover { transform: none; }
}

/* Zwei Zeilen in der Kachel: Name und darunter der Halbsatz. */
.wahl__text { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.wahl--kacheln .wahl__name { font-weight: var(--gew-halb); line-height: 1.3; }
.wahl__zusatz {
    color: var(--tinte-leise); font-size: var(--fs-klein); line-height: 1.4;
}

/* In der Listendarstellung bleibt es einzeilig - dort gibt es keine Zusaetze,
   und ein flex-Container um einen einzelnen Text aendert nichts. */
.wahl--standard .wahl__text { flex-direction: row; }

/* Kurze Felder stehen nebeneinander - aber in einem echten Raster.

   HIER STAND `display: inline-block` MIT FESTER BREITE. Die Felder standen
   damit zwar nebeneinander, aber die Beschriftungen liefen ineinander: Aus
   "Schadenfreiheitsklasse Haftpflicht" und "Schadenfreiheitsklasse Vollkasko"
   wurde auf dem Bildschirm "SchadenfreiheitsklasSchadenfreiheitsklasse". Ein
   einzelnes langes Wort passt nicht in elf Zeichenbreiten und ragt aus einem
   inline-block heraus, statt umzubrechen.

   Das Raster gibt jeder Spalte gleich viel Platz und laesst die Beschriftung
   INNERHALB ihrer Spalte umbrechen. Welche Felder eine Reihe bilden, entsteht
   in Abschnitt::reihen() - das ist eine Aussage ueber ihre Beziehung und
   gehoert nicht in eine Breitenangabe. */
.feldpaar {
    display: grid;
    gap: var(--sp-3) var(--sp-4);
    margin: 0 0 var(--sp-8);
}
.feldpaar .feld { margin: 0; min-width: 0; }

/* Schmal: HSN neben TSN, die beiden SF-Klassen, eine Zahl. */
.feldpaar--kurz {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    max-width: 28rem;
}

/* Halbe Zeile: Vorname neben Nachname, Postleitzahl neben Ort.

   Zwei Felder, die man ohnehin in einem Zug ausfuellt, brauchen keine zwei
   vollen Zeilen. Unter 30rem fallen sie untereinander - auf einem Telefon ist
   ein halbes Eingabefeld schmaler als die Tastatur darunter. */
.feldpaar--paar { grid-template-columns: 1fr; }

@media (min-width: 30rem) {
    .feldpaar--paar { grid-template-columns: repeat(2, 1fr); }

    /* DIE EINGABEFELDER STEHEN AUF EINER LINIE, auch wenn nur eines der
       beiden einen Hilfetext hat.

       Ohne das saessen sie versetzt: "E-Mail-Adresse" traegt zwei Zeilen
       Erklaerung, "Telefonnummer" keine - und die beiden Kaesten standen
       treppenfoermig nebeneinander. Das Raster macht die Spalten ohnehin
       gleich hoch; `margin-top: auto` schiebt das Eingabefeld ans untere Ende
       seiner Spalte, und damit liegen beide auf derselben Linie. */
    .feldpaar--paar .feld { display: flex; flex-direction: column; }
    .feldpaar--paar .feld > input,
    .feldpaar--paar .feld > select,
    .feldpaar--paar .feld > textarea { margin-top: auto; }
}

/* Die Beschriftung eines schmalen Feldes darf nicht groesser sein als die
   Spalte, in der sie steht. `hyphens` bricht lange Zusammensetzungen an einer
   sinnvollen Stelle - "Schadenfrei-heitsklasse" statt eines Ueberlaufs. */
.feld--kurz .feld__label {
    font-size: var(--fs-text); line-height: 1.25;
    hyphens: auto; overflow-wrap: break-word;
}
.feld--kurz .feld__hilfe { font-size: var(--fs-klein); line-height: 1.4; }
.feld--kurz input { width: 100%; }

/* Grossbuchstaben und gleich breite Ziffern: Eine Schluesselnummer wird
   verglichen, nicht gelesen. Gilt nur fuer Text, nicht fuer Zahlenfelder wie
   die Mitarbeitendenzahl. */
.feld--kurz input[type="text"] {
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

/* --------------------------------------------------------- Ablaufbilder */