/*
 * Grundlage: die Farbpalette und Schriften, die Astra auf quaris.ch gesetzt
 * hatte (global-color-palette, Poppins/Open Sans). Damit sieht die neue Seite
 * aus wie die alte, ohne dass ein Theme mitgeschleppt werden muss.
 */
:root {
    --primaer:        #1a5ce0;
    --primaer-dunkel: #083999;
    --titel:          #000f23;
    --text:           #67757f;
    --flaeche:        #f7f8f8;
    --dunkel:         #242a36;
    --weiss:          #ffffff;
    --linie:          #e6e6e6;

    --schrift-titel: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --schrift-text:  'Open Sans', system-ui, -apple-system, sans-serif;

    --breite: 1200px;
    --radius: 4px;
}

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

/* [hidden] setzt der Browser über display:none durch — eine Klasse mit
   eigenem display sticht das aber aus. Das traf die Formularknöpfe: .knopf
   ist inline-flex, also stand "zurück" schon im ersten Schritt da. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--schrift-text);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    background: var(--weiss);
}

h1, h2, h3, h4 {
    font-family: var(--schrift-titel);
    font-weight: 700;
    color: var(--titel);
    line-height: 1.2;
    margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); }

a { color: var(--primaer); }
a:hover { color: var(--primaer-dunkel); }

img { max-width: 100%; height: auto; }

.bahn { width: 100%; padding: 4rem 1.25rem; }

/* Trägt eine Bahn nur die Seitenüberschrift, braucht sie unten keinen
   vollen Abstand: zusammen mit dem der nächsten Bahn stünden sonst rund
   250 Pixel Leere zwischen Titel und erstem Satz. Das betrifft die 39
   Seiten, deren eigene Überschrift zur h1 erhoben wurde. */
.bahn:has(> .innen > h1:only-child) { padding-bottom: 1rem; }
.bahn:has(> .innen > h1:only-child) h1 { margin-bottom: 0; }
.bahn--flaeche { background: var(--flaeche); }
.bahn--dunkel  { background: var(--dunkel); color: #cfd6dd; }
.bahn--dunkel h2, .bahn--dunkel h3 { color: var(--weiss); }
.innen { max-width: var(--breite); margin-inline: auto; }

/* Deutsche Komposita sind laenger als jede Spalte auf einem Handy:
   "Betriebsunterbruchversicherung" steht in einer Ueberschrift und laesst
   sich nicht umbrechen. Silbentrennung (das Dokument ist als de-CH
   ausgezeichnet) und im Notfall ein harter Umbruch. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; }

/* Jedes <summary> im Nachbau bringt sein Zeichen selbst mit (::after) oder
   braucht keins -- der native Marker muss also weg, und zwar ueber
   ::marker. list-style: none nimmt ihm nur das Listenzeichen, nicht den
   Platz: sein Inhalt bleibt "normal", und Safari zeichnet ihn weiterhin
   als inline-block im Textfluss. Bei einem summary mit display: block --
   den Menuepunkten auf schmalen Schirmen -- rutscht er dort auf eine
   eigene Zeile, sichtbar bei "Versicherungsbroker". Chrome zeichnet ihn
   nicht, weshalb das lange unbemerkt blieb.
   ::-webkit-details-marker bleibt fuer Safari vor Fassung 17. */
summary {
    /* Der eigentliche Hebel in WebKit: appearance nimmt dem <summary> seine
       native Darstellung mitsamt Dreieck. list-style und ::marker allein
       genügten dort nicht -- Stefan sah das Zeichen weiterhin, erst links
       vom Text auf eigener Zeile, nach dem Umbau auf display: flex dann
       vor dem ersten Eintrag der aufgeklappten Klappe ("Dienstleistungen").
       Verschoben, nicht verschwunden. */
    appearance: none;
    -webkit-appearance: none;
    list-style: none;
}
summary::marker { content: ""; }
summary::-webkit-details-marker { display: none; }

.knopf {
    display: inline-block;
    padding: 16px 24px;
    border: 0;
    border-radius: var(--radius);
    background: var(--primaer);
    color: var(--weiss);
    font: 600 1rem/1 var(--schrift-titel);
    text-decoration: none;
    cursor: pointer;
}
.knopf:hover { background: var(--primaer-dunkel); color: var(--weiss); }

/* ------------------------------------------------------------- Rechner */

.rechner {
    background: var(--flaeche);
    border-radius: 8px;
    padding: 1.5rem;
}

.rechner__felder {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
}

.feld { display: flex; flex-direction: column; gap: .4rem; }
.feld > label { font-weight: 600; color: var(--titel); font-size: .95rem; }
.feld select, .feld input {
    padding: 12px 14px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    font: inherit;
    color: var(--titel);
}

.hinweis { font-size: .85rem; margin-top: 1rem; }

/* Vergleichsrechner: bis zu zehn Auswahlfelder, die je nach Wahl
   auftauchen und verschwinden. Ein festes Raster wäre entweder zu eng
   oder halb leer. */
.vergleich__felder {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: end;
}
.angebot__anbieter small {
    display: block;
    font-family: var(--schrift-text);
    font-weight: 400;
    color: var(--text);
    font-size: .8rem;
}

/* Betrag: Regler fuer grob, Feld fuer genau, Knoepfe fuer die haeufigen Werte.
   Der Regler ist nur eine zweite Bedienung desselben Feldes und deshalb
   bewusst ohne eigenes name-Attribut -- abgeschickt wird immer das Feld. */
.feld--betrag { gap: .6rem; }

.regler {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--linie);
    cursor: pointer;
}
.regler::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--primaer);
    box-shadow: 0 1px 4px rgb(0 15 35 / .3);
    cursor: grab;
}
.regler::-moz-range-thumb {
    width: 22px; height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--primaer);
    box-shadow: 0 1px 4px rgb(0 15 35 / .3);
    cursor: grab;
}
.regler:focus-visible { outline: 2px solid var(--primaer); outline-offset: 4px; }

.regler__skala {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--text);
}

.vorwahl { display: flex; flex-wrap: wrap; gap: .4rem; }
.vorwahl__knopf {
    padding: 6px 12px;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--weiss);
    font: 600 .8rem/1 var(--schrift-titel);
    color: var(--titel);
    cursor: pointer;
}
.vorwahl__knopf:hover { border-color: var(--primaer); color: var(--primaer); }
.vorwahl__knopf.istGewaehlt {
    background: var(--primaer);
    border-color: var(--primaer);
    color: var(--weiss);
}

/* Rechnet das Skript mit, ist der Absende-Knopf ueberfluessig. Ohne JS
   bleibt er stehen und das Formular geht wie bisher an den Server. */
.rechner--lebendig .feld--absenden { display: none; }

/* Der Betrag darf mehr Platz haben als die Auswahl daneben. */
@media (min-width: 801px) {
    .rechner__felder { grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.4fr) auto; }
}

/* Ergebnisliste: auf breiten Schirmen eine Tabelle, auf schmalen Karten. */
.angebote { margin-top: 2rem; display: grid; gap: .75rem; }

.angebot {
    display: grid;
    /* Die Filterrechner haben je nach Sparte verschieden viele Spalten und
       geben sie in --spalten mit. Als Inline-Style geschrieben schlug das
       die Mobilfassung weiter unten -- die Ergebnisliste stand dann sieben
       Spalten breit auf einem 390 Pixel schmalen Schirm. */
    grid-template-columns: var(--spalten, 2fr repeat(3, 1fr) auto);
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 8px;
}
.angebot--kopf {
    background: transparent;
    border: 0;
    padding-block: 0;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.angebot__anbieter { font-family: var(--schrift-titel); font-weight: 600; color: var(--titel); }
.angebot__wert { font-family: var(--schrift-titel); font-weight: 600; color: var(--titel); white-space: nowrap; }
.angebot__wert small { display: block; font-family: var(--schrift-text); font-weight: 400; color: var(--text); font-size: .78rem; }
.angebot--bestes { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); }
.marke { display: inline-block; margin-left: .5rem; padding: 2px 8px; border-radius: 999px;
         background: var(--primaer); color: var(--weiss); font-size: .7rem; letter-spacing: .03em; }

@media (max-width: 800px) {
    .angebot { grid-template-columns: 1fr 1fr; }
    .angebot--kopf { display: none; }
    .angebot__anbieter { grid-column: 1 / -1; }
    /* Ohne den Tabellenkopf steht eine Zahl ohne Bezeichnung da. Bei der
       Lebensversicherung waeren das fuenf Zahlen nebeneinander -- welche
       davon die Praemie ist, koennte niemand sagen. Die Bezeichnung kommt
       aus dem Attribut und nicht aus einer zweiten Fassung im Markup. */
    .angebot__wert[data-titel]::before {
        content: attr(data-titel);
        display: block;
        font: 400 .72rem/1.3 var(--schrift-text);
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text);
        margin-bottom: .15rem;
    }
    .angebot .knopf { width: 100%; text-align: center; }
    .angebot > :last-child { grid-column: 1 / -1; }
}

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

.satz { max-width: 42em; }
.liste { padding-left: 1.2em; }

/* "Ihre Vorteile": im Original ein Häkchen aus Font Awesome vor jedem
   Punkt. Ein ganzer Zeichensatz für ein Zeichen wäre unverhältnismässig —
   hier steht es als SVG im Hintergrund. */
.vorteile {
    display: grid;
    gap: .6rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    list-style: none;
    padding: 0;
    margin: 0;
}
.vorteile li {
    padding-left: 1.9rem;
    background: no-repeat left .1em/1.15rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231a5ce0'%3E%3Cpath d='M10 0a10 10 0 100 20 10 10 0 000-20zm-1.2 14.6l-4-4 1.4-1.4 2.6 2.6 5.4-5.4 1.4 1.4-6.8 6.8z'/%3E%3C/svg%3E");
}
.trenner { border: 0; border-top: 2px solid var(--primaer); width: 60px; margin: 1.5rem 0; }

.aufklappen { border-top: 1px solid var(--linie); }
.aufklappen details { border-bottom: 1px solid var(--linie); }
.aufklappen summary {
    cursor: pointer;
    padding: 1rem 2.5rem 1rem 0;
    position: relative;
    font: 600 1.05rem/1.4 var(--schrift-titel);
    color: var(--titel);
    list-style: none;
}

/* Eigenes Zeichen statt des voreingestellten Dreiecks: das steht links vor
   dem Text und rückt ihn bei jedem Öffnen um seine Breite ein. */
.aufklappen summary::after {
    content: "";
    position: absolute;
    right: .5rem;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--primaer);
    border-bottom: 2px solid var(--primaer);
    translate: 0 -70%;
    rotate: 45deg;
    transition: rotate .15s;
}
.aufklappen details[open] > summary::after { rotate: -135deg; }
.aufklappen summary:hover { color: var(--primaer); }
.aufklappen details > .satz { padding-bottom: 1.25rem; }

/* Innerhalb der Klappen stehen Listen und Tabellen, kein Fliesstext — die
   Lesebreite von 42em würde sie unnötig hoch machen. */
.aufklappen .satz { max-width: none; }

/* Aus WordPress bringen die Inhalte ein Spaltenraster mit (row/col-4).
   Ohne Entsprechung im Stylesheet stapelte sich alles einspaltig: die
   Produktliste unter "Versicherungsthemen" war so allein 1700 Pixel hoch.
   Statt der starren Zwölftel von Bootstrap richtet sich das Raster hier
   nach der verfügbaren Breite. */
.row {
    display: grid;
    gap: 1rem 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.row h5 { margin-bottom: .5rem; font-size: .95rem; }
.row ul { margin: 0; }

/* Eine Bahn mit Spaltenraster darin ist keine Textspalte mehr. */
.satz:has(.row) { max-width: none; }

.angebot__logo {
    display: block;
    max-width: 150px;
    max-height: 52px;
    width: auto;
    margin-bottom: .35rem;
    object-fit: contain;
}

/* ------------------------------------------------------- Kopf und Menü */

/* Der Kopf bleibt beim Blaettern stehen. Die Hauptnavigation ist der
   einzige Weg zwischen 56 Seiten -- sie jedes Mal zurueckzuscrollen waere
   der haeufigste Handgriff der Seite. */
.kopf { position: sticky; top: 0; z-index: 30; }

.kopf__marke { background: var(--weiss); }
.kopf__innen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    padding-block: .9rem;
}

/* Nicht .marke nennen: die Klasse traegt im Rechner das
   "bester Zins"-Abzeichen und faerbte die Wortmarke sonst blau ein. */
.wortmarke { display: block; line-height: 0; }
.wortmarke img { width: 200px; height: auto; }
.wortmarke--fuss { width: 180px; height: auto; margin-bottom: .75rem; }

/* Das Navigationsband. Im Original liegt hinter dem Verlauf noch ein
   Zickzackmuster; es traegt nichts und faellt hier weg. */
.kopf__band {
    background: linear-gradient(90deg, var(--primaer) 0%, var(--primaer-dunkel) 100%);
}

/* Die Klappmenüs sind <details>: sie funktionieren ohne JavaScript, auf dem
   Handy als Ziehharmonika, ab Tablet als aufklappende Leiste. */
.navi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 2rem;
}
.navi__punkt { position: relative; }
.navi__oben {
    display: inline-block;
    padding: .85rem 0;
    font: 600 .95rem/1.4 var(--schrift-titel);
    color: var(--weiss);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}
.navi__punkt[open] > .navi__oben,
.navi__oben:hover { color: #cfe0ff; }

.navi__klappe { padding-block: 1rem; background: var(--weiss); }
.navi__gruppen {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    padding: 0;
}
.navi__titel {
    font: 600 .75rem/1 var(--schrift-titel);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text);
    margin: 0 0 .6rem;
}
.navi__gruppen ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.navi__gruppen a { text-decoration: none; font-size: .92rem; }
.navi__gruppen a:hover { text-decoration: underline; }
.navi__uebersicht { grid-column: 1 / -1; margin: 0; font-weight: 600; }

/* Der Menueknopf. Auf breiten Schirmen loest sich das <details> in Luft
   auf (display: contents), womit die Nebenseiten wieder als Flex-Kind der
   Markenzeile stehen -- genau wie vor dem Knopf. */
.kopf__menue { display: contents; }
.kopf__knopf { display: none; }

.navi-schmal { display: flex; gap: 1rem; flex-wrap: wrap; }
.navi-schmal a { font-size: .85rem; text-decoration: none; color: var(--text); }
.navi-schmal a:hover { color: var(--primaer); }
.navi-schmal__punkt { position: relative; }
.navi-schmal__punkt > summary {
    cursor: pointer;
    font-size: .85rem;
    color: var(--text);
    list-style: none;
    padding-right: .8rem;
    position: relative;
}
.navi-schmal__punkt > summary::after {
    content: "";
    position: absolute;
    right: 0;
    top: .35em;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate: 45deg;
}
.navi-schmal__punkt[open] > summary,
.navi-schmal__punkt > summary:hover { color: var(--primaer); }
.navi-schmal__klappe { display: grid; gap: .3rem; padding: .6rem 0 0; }

@media (min-width: 901px) {
    .navi-schmal__klappe {
        position: absolute;
        z-index: 25;
        top: 100%;
        right: 0;
        min-width: 13rem;
        padding: .9rem 1.1rem;
        background: var(--weiss);
        border: 1px solid var(--linie);
        border-radius: 8px;
        box-shadow: 0 12px 32px rgb(0 15 35 / .12);
    }
}

/* Bis 900 Pixel ist das Hauptmenue eine Ziehharmonika: jeder Punkt eine
   eigene Zeile, die Klappe darunter in voller Breite.

   Ohne diesen Block sprengte sie den Schirm. Die Gruppen stehen in einem
   Raster aus minmax(190px, 1fr), das unter 190 Pixel je Spalte nicht geht;
   fuenf Gruppen ergaben 1046 Pixel, und weil .navi ein Flex-Container ist,
   wuchs der Punkt einfach mit. Auf 390 Pixel Breite lag die aufgeklappte
   Klappe dann bei x = -328: links und rechts abgeschnitten, die Seite
   seitlich scrollbar. */
@media (max-width: 900px) {
    .navi { flex-direction: column; gap: 0; }
    .navi__punkt { width: 100%; min-width: 0; }
    /* Wieder block: als flex rutschte das native Zeichen in WebKit aus dem
       summary heraus und stand vor dem ersten Eintrag der Klappe. Weg ist
       es jetzt über appearance (siehe oben), einen Umbruchschutz braucht
       es dann nicht mehr. */
    /* Jeder Punkt mit Untermenue traegt rechts einen Pfeil, wie im
       Original. Dort sitzt er allerdings auf right: -15px und haengt damit
       aus der Zeile heraus -- genau der Fehler, den Stefan gemeldet hat.
       Hier steht er innen und dreht sich beim Aufklappen. */
    .navi__oben {
        position: relative;
        display: block;
        width: 100%;
        padding: .9rem 2.5rem .9rem 1rem;
        min-height: 44px;
    }
    .navi__punkt > .navi__oben::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 1.1rem;
        width: 8px;
        height: 8px;
        margin-top: -6px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        rotate: 45deg;
        transition: rotate .15s;
    }
    .navi__punkt[open] > .navi__oben::after { margin-top: -2px; rotate: -135deg; }
    .navi__punkt + .navi__punkt > .navi__oben,
    .navi__punkt + a.navi__oben,
    a.navi__oben + .navi__punkt > .navi__oben { border-top: 1px solid rgb(255 255 255 / .18); }
    .navi__klappe { padding: 1rem; }
    .navi__gruppen { grid-template-columns: 1fr; gap: 1.25rem; }
    /* Die Verweise sind hier das, was man mit dem Daumen trifft. */
    .navi__gruppen a { display: block; padding-block: .45rem; }

    /* Der Kopf klebt oben fest, auch hier: zugeklappt sind es 84 Pixel,
       und damit ist das Menue von jeder Stelle der Seite aus erreichbar.
       Vor dem Knopf waren es 400 -- die halbe Bildschirmhoehe, dauerhaft
       belegt; deshalb stand hier eine Weile position: static. */
    .kopf__innen { padding-block: .6rem; gap: .75rem 1.5rem; }
    .wortmarke img { width: 160px; }

    /* Der Knopf sitzt rechts neben der Wortmarke, die Klappe faellt darunter
       auf. Beides steckt im selben <details>, also nimmt das eine ganze
       Zeile ein und der Knopf wird daraus herausgeloest -- sonst schoebe
       sich die aufgeklappte Navigation zwischen Marke und Knopf. */
    .kopf__menue { display: block; flex-basis: 100%; order: 2; }
    .kopf__innen { position: relative; justify-content: flex-start; }
    /* Wie im Original: ein blauer Kasten mit drei Strichen, kein Wort
       daneben. Die Beschriftung bleibt fuer Vorlesegeraete im Markup. */
    .kopf__knopf {
        position: absolute;
        top: 50%;
        right: .25rem;
        translate: 0 -50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: var(--primaer);
        border-radius: 5px;
        cursor: pointer;
        list-style: none;
    }
    .kopf__knopf-wort {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Drei Striche aus einem Element: der mittlere ist der Rahmen, die
       beiden aeusseren sind Schatten. */
    .kopf__striche,
    .kopf__striche::before,
    .kopf__striche::after {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--weiss);
        border-radius: 2px;
    }
    .kopf__striche { position: relative; }
    .kopf__striche::before,
    .kopf__striche::after { content: ""; position: absolute; left: 0; }
    .kopf__striche::before { top: -7px; }
    .kopf__striche::after  { top: 7px; }

    /* Zugeklappt wird zum Kreuz. */
    .kopf__menue[open] .kopf__striche { background: transparent; }
    .kopf__menue[open] .kopf__striche::before { top: 0; rotate: 45deg; }
    .kopf__menue[open] .kopf__striche::after  { top: 0; rotate: -45deg; }

    /* Das blaue Band steht in einer eigenen Zeile und kann deshalb nicht im
       selben <details> stecken. Es haengt am selben Zustand. */
    .kopf:has(.kopf__menue:not([open])) .kopf__band { display: none; }

    /* Die vier Nebenseiten bleiben eine umbrechende Zeile: als Liste
       untereinander kosteten sie allein 180 Pixel Kopfhoehe, und ihre
       Beschriftungen sind kurz genug fuer zwei Zeilen. */
    .navi-schmal { justify-content: center; gap: .5rem 1.25rem; padding-block: .5rem 0; }
    .navi-schmal > a,
    .navi-schmal__punkt > summary {
        display: block;
        padding: .5rem .25rem;
        min-height: 40px;
    }
    /* Der Pfeil sitzt am rechten Rand der Zeile und nicht mehr direkt
       hinter dem Wort, also muss er auch mittig zur Zeile stehen. */
    .navi-schmal__punkt > summary { padding-right: 1.2rem; }
    .navi-schmal__punkt > summary::after { top: 50%; margin-top: -5px; right: .25rem; }
    .navi-schmal__klappe { padding: .2rem 0 .6rem 1rem; }
    .navi-schmal__klappe a { display: block; padding-block: .45rem; }
}

@media (min-width: 901px) {
    .navi__klappe {
        position: absolute;
        z-index: 20;
        top: 100%;
        left: 50%;
        translate: -50% 0;
        width: min(var(--breite), 92vw);
        background: var(--weiss);
        border: 1px solid var(--linie);
        border-radius: 8px;
        box-shadow: 0 12px 32px rgb(0 15 35 / .12);
        padding: 1.5rem;
    }
}

/* ------------------------------------------------------------ Aufmacher */

/* Bildschirmbreit, mit einer hellen Karte über dem Bild — wie im Original.
   Die Höhe ist an den Sichtbereich gekoppelt, aber gedeckelt: auf einem
   hohen Bildschirm soll der Aufmacher nicht die ganze Seite füllen und den
   Inhalt darunter verstecken. */
.aufmacher {
    position: relative;
    display: grid;
    min-height: clamp(320px, 48vh, 520px);
}

/* Alle Folien liegen in derselben Rasterzelle übereinander. So bestimmt die
   höchste die Höhe des Aufmachers, und beim Wechsel springt nichts. */
.aufmacher__folie {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    background: var(--dunkel) center/cover no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s;
}
.aufmacher__folie.istSichtbar { opacity: 1; visibility: visible; }

/* Ohne Skript bleibt die erste Folie stehen; die übrigen sollen dann gar
   nicht erst Platz beanspruchen. */
.aufmacher:not(.aufmacher--lebendig) .aufmacher__folie:not(.istSichtbar) { display: none; }

/* Ohne Breitenangabe schrumpft die Bahn als Flex-Element auf ihren Inhalt
   und landet durch margin-inline:auto in der Mitte. Die Karte gehört aber
   an den linken Rand, wie im Original. */
.aufmacher__folie > .innen { width: 100%; }

.aufmacher__karte {
    max-width: 30rem;
    margin-block: 3rem;
    padding: 2rem;
    background: rgb(255 255 255 / .92);
    border-radius: 8px;
    backdrop-filter: blur(2px);
}
.aufmacher__titel {
    margin: 0 0 1rem;
    font: 700 clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem)/1.2 var(--schrift-titel);
    color: var(--titel);
}
/* Der farbige Strich unter dem Titel, den auch das Original setzt. */
.aufmacher__titel::after {
    content: "";
    display: block;
    width: 60px;
    margin-top: 1rem;
    border-top: 2px solid var(--primaer);
}
.aufmacher__karte p { margin: 0 0 1.25rem; }

/* Bedienung. Sie entsteht erst im Skript — ohne Skript gäbe es nichts zu
   bedienen, und ein toter Pfeil ist schlimmer als keiner. */
.aufmacher__steuer {
    position: absolute;
    inset: auto 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    pointer-events: none;
}
.aufmacher__steuer > * { pointer-events: auto; }

.aufmacher__pfeil {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .85);
    cursor: pointer;
    position: relative;
}
.aufmacher__pfeil::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--titel);
    border-right: 2px solid var(--titel);
}
.aufmacher__pfeil--vor::before     { rotate: 45deg;   translate: -3px 0; }
.aufmacher__pfeil--zurueck::before { rotate: -135deg; translate: 3px 0; }
.aufmacher__pfeil:hover { background: var(--weiss); }
.aufmacher__pfeil:focus-visible { outline: 2px solid var(--primaer); outline-offset: 2px; }

.aufmacher__punkte { display: flex; gap: .25rem; }
/* Der Punkt bleibt 11 Pixel gross, seine Flaeche zum Antippen nicht: mit
   dem Daumen trifft niemand elf Pixel. Der Rand ist durchsichtig, also
   sieht man nur den Punkt. */
.aufmacher__punkt {
    width: 11px;
    height: 11px;
    box-sizing: content-box;
    padding: 8px;
    border: 0;
    background: rgb(255 255 255 / .6) content-box;
    border-radius: 50%;
    cursor: pointer;
}
.aufmacher__punkt.istGewaehlt { background: var(--primaer) content-box; }
.aufmacher__punkt:focus-visible { outline: 2px solid var(--weiss); outline-offset: 2px; }

@media (max-width: 700px) {
    .aufmacher__karte { margin-block: 2rem 4rem; padding: 1.5rem; }
}

/* Wer Bewegung abbestellt hat, bekommt auch keine Blende. */
@media (prefers-reduced-motion: reduce) {
    .aufmacher__folie { transition: none; }
}

/* ------------------------------------------------------------- Bausteine */

/* Kachelband: die übrigen Versicherungen auf einen Blick. */
.band {
    display: grid;
    gap: .75rem;
    /* Etwas breiter als noetig: bei 150px trennt der Umbruch fast jede
       zweite Beschriftung ("Reiseversicherun-gen"). */
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
}

/* ------------------------------------------------------------ Laufbänder */

/* Kundenstimmen, Partnerlogos und Kachelreihen laufen seitlich, wie im
   Original. Getragen wird das vom Browser: eine überlaufende Fläche mit
   Einrastpunkten. Ohne JavaScript lässt sie sich wischen, schieben und mit
   der Tastatur durchlaufen — es fehlen nur die Pfeile, die das Skript
   nachträgt. */
[data-karussell] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: .25rem;
    scrollbar-width: thin;
    padding-bottom: .5rem;
}
[data-karussell] > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

/* Wie viele Stücke nebeneinander stehen, entscheidet der Bandtyp. Auf
   schmalen Schirmen wird daraus jeweils eines mehr als eine Ahnung des
   nächsten, damit erkennbar ist, dass es weitergeht. */
.folien[data-karussell] > *  { width: min(88%, 21rem); }
.logos[data-karussell] > *   { width: clamp(120px, 14vw, 160px); }
.band[data-karussell] > *    { width: clamp(150px, 16vw, 185px); }

.laufband { position: relative; }

.laufband__pfeil {
    position: absolute;
    top: calc(50% - 22px);
    width: 44px;
    height: 44px;
    border: 1px solid var(--linie);
    border-radius: 50%;
    background: rgb(255 255 255 / .95);
    box-shadow: 0 2px 10px rgb(0 15 35 / .12);
    cursor: pointer;
    z-index: 2;
}
.laufband__pfeil--zurueck { left: -14px; }
.laufband__pfeil--vor     { right: -14px; }
.laufband__pfeil::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--titel);
    border-right: 2px solid var(--titel);
}
.laufband__pfeil--vor::before     { rotate: 45deg;   translate: -3px 0; }
.laufband__pfeil--zurueck::before { rotate: -135deg; translate: 3px 0; }
.laufband__pfeil:hover { border-color: var(--primaer); }
.laufband__pfeil:focus-visible { outline: 2px solid var(--primaer); outline-offset: 2px; }

/* Am Rand ist auf schmalen Schirmen kein Platz für einen Pfeil, der
   halb daneben hängt. */
@media (max-width: 900px) {
    .laufband__pfeil--zurueck { left: 2px; }
    .laufband__pfeil--vor     { right: 2px; }
}
.band__kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1.25rem 1rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    font: 600 .85rem/1.3 var(--schrift-titel);
    color: var(--titel);
}
.band__kachel:hover { border-color: var(--primaer); color: var(--primaer); }
.band__kachel img { width: 56px; height: 56px; object-fit: contain; }
/* "Rechtsschutzversicherung" ist breiter als die Kachel und liesse sich
   ohne Trennung nicht umbrechen. */
.band__kachel span { hyphens: auto; overflow-wrap: anywhere; }

/* Kundenstimmen und Aufmacher, im Original ein Karussell. */
.folien { gap: 1rem; }
.folie {
    margin: 0;
    padding: 1.5rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 8px;
}
.folie img { border-radius: 8px; }
.folie__text h5 { margin: .75rem 0 .25rem; font-size: 1rem; }
.folie__text img { max-height: 120px; width: auto; border-radius: 50%; }

/* Sparten-Uebersicht auf der Startseite und bei den Firmenkunden.
   Im Original feste Dreierzeilen, hier ein Raster, das sich nach der
   Fensterbreite richtet -- die Aufteilung von 2023 war an eine
   Bildschirmgroesse gebunden, die Reihenfolge der Sparten nicht. */
.kacheln {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.kacheln__kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 190px;
    padding: 2rem 1.5rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgb(0 15 35 / .06);
    text-align: center;
    text-decoration: none;
    color: var(--titel);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.kacheln__kachel:hover,
.kacheln__kachel:focus-visible {
    border-color: var(--primaer);
    box-shadow: 0 6px 20px rgb(0 15 35 / .12);
    transform: translateY(-2px);
}
.kacheln__kachel img { width: 64px; height: 64px; object-fit: contain; }

/* Kacheln mit Foto statt Piktogramm (/ratgeber/): das Bild sitzt oben und
   fuellt die Kachelbreite, die Beschriftung steht darunter. Mit der
   Symbolgroesse waeren die Fotos briefmarkengross gewesen. */
.kacheln--foto .kacheln__kachel {
    justify-content: flex-start;
    gap: 0;
    padding: 0 0 1.25rem;
    overflow: hidden;
}
.kacheln--foto .kacheln__kachel img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin-bottom: 1rem;
}
.kacheln--foto .kacheln__kachel span { padding-inline: 1rem; }
.kacheln__kachel span {
    font: 700 1rem/1.3 var(--schrift-titel);
    hyphens: auto;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .navi__punkt > .navi__oben::after { transition: none; }
    .kacheln__kachel { transition: none; }
    .kacheln__kachel:hover, .kacheln__kachel:focus-visible { transform: none; }
}

/* Partnerlogos: dicht gesetzt, ohne Kartenrahmen. Sie tragen keinen Text,
   also braucht es auch keine Karte darum. */
.logos { gap: .5rem; list-style: none; padding: 0; margin: 0; }
.logos li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}
.logos img { max-height: 42px; width: auto; object-fit: contain; }

.kachel {
    display: block;
    padding: 1.5rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
.kachel:hover { border-color: var(--primaer); }
.kachel img { border-radius: 8px; margin-bottom: 1rem; }
.kachel h3 { margin-bottom: .25rem; }
.kachel__anspruch { margin: 0 0 .75rem; font-weight: 600; color: var(--primaer); }

.beitraege {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* Das Beitragsbild sitzt bündig oben in der Karte, im festen Verhältnis —
   die Vorlagen haben unterschiedliche Zuschnitte. */
.beitrag__bild {
    display: block;
    aspect-ratio: 16 / 9;
    margin: -1.25rem -1.5rem 1rem;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: var(--flaeche);
}
.beitrag__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.beitrag {
    overflow: hidden;
    padding: 1.25rem 1.5rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
.beitrag:hover { border-color: var(--primaer); }
.beitrag h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.beitrag time { font-size: .8rem; color: var(--text); }
.beitrag__rubrik {
    display: inline-block;
    margin-bottom: .5rem;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--flaeche);
    font: 600 .7rem/1.6 var(--schrift-titel);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
}
.beitrag__anriss { margin: 0 0 .6rem; font-size: .9rem; }

/* Fremdinhalte (Kartenausschnitt, Krankenkassenrechner) bekommen eine feste
   Höhe, damit die Seite beim Nachladen nicht springt. */
.einbettung iframe { width: 100%; min-height: 420px; border: 0; border-radius: 8px; }

/* ------------------------------------------------------------ Fusszeile */

.fuss {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.fuss a { color: #cfd6dd; text-decoration: none; font-size: .88rem; }
.fuss a:hover { color: var(--weiss); }
.fuss__titel { font: 600 .95rem/1 var(--schrift-titel); color: var(--weiss); margin: 0 0 .75rem; }
.fuss__titel a { color: var(--weiss); font-size: inherit; }

/* Fuenfundvierzig Verweise von je zwanzig Pixeln Hoehe trifft man mit dem
   Daumen nicht zuverlaessig. */
@media (max-width: 800px) {
    .fuss ul { gap: 0; }
    .fuss li a { display: block; padding-block: .45rem; }
}

/* ------------------------------------------------------------- Formulare */

.formular {
    background: var(--flaeche);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 56rem;
}
.formular__felder {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.formular__schritt { border: 0; padding: 0; margin: 0; }

/* Ohne Skript stehen alle Schritte untereinander; dann braucht jeder seine
   Überschrift. Läuft das Skript, zeigt die Reiterleiste, wo man steht, und
   die Legende wäre doppelt. */
.formular__schritt legend { font: 600 1.05rem/1.4 var(--schrift-titel); color: var(--titel); padding: 1rem 0 .5rem; }
.formular--lebendig .formular__schritt legend { display: none; }

.formular__reiter-leiste { display: none; }
.formular--lebendig .formular__reiter-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    counter-reset: schritt;
}
.formular__reiter {
    flex: 1 1 10rem;
    padding: .6rem .9rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    font: 600 .85rem/1.3 var(--schrift-titel);
    color: var(--text);
    counter-increment: schritt;
}
.formular__reiter::before { content: counter(schritt) ". "; }
.formular__reiter.istAktiv { background: var(--primaer); border-color: var(--primaer); color: var(--weiss); }
.formular__reiter.istErledigt { color: var(--titel); border-color: var(--primaer); cursor: pointer; }

.formular .feld > label { font-size: .9rem; }
.formular__datenschutz { margin: 1.25rem 0 0; font-size: .82rem; color: var(--text); }
.formular__knoepfe { display: flex; gap: .75rem; margin-top: 1rem; }
.knopf--still { background: var(--weiss); color: var(--titel); border: 1px solid var(--linie); }
.knopf--still:hover { background: var(--flaeche); color: var(--titel); }

.feld--fehler input, .feld--fehler select { border-color: #c0392b; }
.feld__fehler { margin: .3rem 0 0; font-size: .8rem; color: #c0392b; }
.formular__hinweis { margin: 0 0 1rem; color: #c0392b; font-size: .9rem; }

.formular--fertig { border-left: 3px solid var(--primaer); }
.formular--fertig h3 { margin-top: 0; }

/* Der Honigtopf muss für Menschen unsichtbar sein, aber für Bots im
   Dokument stehen — display:none würden viele überspringen. */
.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------- Verweis auf ein Angebot */

.angebot-verweis {
    max-width: 44rem;
    padding: 2rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-left: 4px solid var(--primaer);
    border-radius: 8px;
}
.angebot-verweis__marke {
    margin: 0 0 .5rem;
    font: 600 .75rem/1 var(--schrift-titel);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primaer);
}
.angebot-verweis h3 { margin: 0 0 .75rem; }
.angebot-verweis .vorteile { margin: 1.25rem 0; }

/* Die drei Schritte sind eine Reihenfolge, keine Aufzählung — die Nummern
   gehören dazu und stehen deshalb sichtbar davor. */
.angebot-verweis__schritte {
    counter-reset: schritt;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: .5rem;
}
.angebot-verweis__schritte li {
    counter-increment: schritt;
    padding-left: 2.2rem;
    position: relative;
}
.angebot-verweis__schritte li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: -.1em;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--flaeche);
    color: var(--titel);
    font: 600 .8rem/1.6rem var(--schrift-titel);
    text-align: center;
}
.angebot-verweis .hinweis { margin-bottom: 0; }

/* ------------------------------------------------- Bahn mit Hintergrundbild */

/* Fast jede Seite hat oben ein bildschirmbreites Bild mit dem Seitentitel
   darauf. Der Schleier liegt hier und nicht in den Daten: welches Bild
   kommt, entscheidet die Redaktion, und ohne ihn stünde die weisse Schrift
   irgendwann auf hellem Himmel. */
/* Gemeinsam ist beiden das Bild und der Schleier darüber: welches Bild
   kommt, entscheidet die Redaktion, und ohne ihn stünde weisse Schrift
   irgendwann auf hellem Himmel. */
.bahn--kopf,
.bahn--bild {
    position: relative;
    background: var(--dunkel) center/cover no-repeat;
    color: var(--weiss);
}
.bahn--kopf::before,
.bahn--bild::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 15 35 / .5);
}
.bahn--kopf > .innen,
.bahn--bild > .innen { position: relative; width: 100%; }
.bahn--kopf :is(h1, h2, h3),
.bahn--bild :is(h1, h2, h3) { color: var(--weiss); }
.bahn--kopf .satz,
.bahn--bild .satz { color: rgb(255 255 255 / .9); }
/* Links auf dem Bild: das Blau der Marke steht auf dem dunklen Schleier
   kaum lesbar da -- auf /kontakt/ sind Telefonnummer und Adresse solche
   Links, und genau die soll man finden. */
.bahn--kopf a:not(.knopf),
.bahn--bild a:not(.knopf) { color: var(--weiss); text-decoration-thickness: 1px; }

/* Der Seitenkopf: eine hohe Bahn mit dem Titel in der Mitte. */
.bahn--kopf {
    display: flex;
    align-items: center;
    min-height: clamp(220px, 30vh, 340px);
}
.bahn--kopf > .innen { text-align: center; }
.bahn--kopf :is(h1, h2, h3) { margin: 0; }
.bahn--kopf .satz { margin-inline: auto; }
.bahn--kopf .trenner { margin-inline: auto; }

/* Eine Inhaltsbahn mit Bild dahinter. Hier steht Fliesstext, eine
   Aufzählung oder ein Kachelband — zentriert gesetzt ergäbe das Zeilen mit
   Aufzählungspunkten daneben, wie auf /geschaftssachversicherung/ gesehen.
   Also linksbündig und im normalen Fluss, nur der Grund ist anders. */
.bahn--bild :is(a:not(.knopf), li, strong) { color: inherit; }

/* ------------------------------------------------------ Text neben Bild */

/* Der abwechselnde Rhythmus des Originals: Text und Bild nebeneinander,
   die Seite wechselt von Abschnitt zu Abschnitt. Die Reihenfolge im
   Dokument entspricht der sichtbaren — auf schmalen Schirmen stapelt es
   sich in derselben Folge. */
.paar {
    display: grid;
    gap: 1.5rem 2.5rem;
    /* minmax(0, 1fr) und nicht 1fr: ein Rasterfeld schrumpft sonst nicht
       unter die Breite seines laengsten Wortes, und davon gibt es hier
       reichlich -- "Berufshaftpflichtversicherung" als Ueberschrift machte
       die Spalte 424 Pixel breit und den Schirm seitlich scrollbar. */
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}
.paar + .paar { margin-top: 3rem; }
.paar__text > :first-child { margin-top: 0; }
.paar__text .satz { max-width: none; }

/* Ein fester Rahmen für alle Bilder: die Vorlagen haben unterschiedliche
   Seitenverhältnisse, nebeneinander fiele das als Unruhe auf. */
.paar__bild {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 8px;
    background: var(--flaeche);
}
.paar__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 801px) {
    .paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}