/*
    Layout und Bausteine der Website Maklerkauf. Bewusst ohne Framework, wie im Maklerbarometer.

    Vorlage ist das Mock-up vom 30.09.2026 (Ticket #1). Farben aus der PPTX: Königsblau #0f419b
    für Text, Flächen und Buttons, Orange #e9561c für Handlungsaufforderungen, helles Blaugrau
    #f3f5fa als Fläche (royal-blue-5 im Styleguide), Footer #707070 und #404040. Schrift Libre
    Franklin.

    Größen: das Mock-up ist ein A3-Blatt, seine Punktgrößen lassen sich nicht 1:1 übertragen.
    Übernommen sind die Verhältnisse (Überschrift zu Fließtext, Navigation und Buttons etwas
    kleiner als der Text); die Überschriften wachsen mit der Breite des Fensters (clamp).

    Mobil ist im Mock-up nicht gezeichnet. Festgelegt: unter 72rem ein Menü-Button statt der
    Navigationszeile (darunter passen die sechs Menüpunkte nicht in eine Zeile), Spalten stapeln
    sich. Bettina prüft das auf Development. Der Umschaltpunkt steht auch in js/seite.js.

    Die Inhaltsrichtlinie (SicherheitsHeader.cs) lässt nur diese Datei als Stilquelle zu - keine
    style-Attribute im Markup, keine Bilder als data:-Adresse. Häkchen und Pfeile sind deshalb
    mit Rahmenlinien gezeichnet.
*/

/*
    Libre Franklin, selbst ausgeliefert - dieselben Dateien wie im Maklerbarometer und im
    Online Makler. Bewusst kein Google Fonts: das wäre eine Verbindung zu einem Dritten bei
    jedem Seitenaufruf, und die Inhaltsrichtlinie ließe sie nicht zu.
    swap statt block, damit der Text auch dann sofort steht, wenn die Schrift noch lädt.
*/
@font-face {
    font-family: "Libre Franklin";
    src: url("../fonts/libre-franklin-v2-latin-400.woff2") format("woff2"),
         url("../fonts/libre-franklin-v2-latin-400.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Franklin";
    src: url("../fonts/libre-franklin-v2-latin-600.woff2") format("woff2"),
         url("../fonts/libre-franklin-v2-latin-600.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Franklin";
    src: url("../fonts/libre-franklin-v2-latin-700.woff2") format("woff2"),
         url("../fonts/libre-franklin-v2-latin-700.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===== Tokens ============================================================================ */

:root {
    --farbe-text: #0f419b;
    --farbe-primaer: #0f419b;
    --farbe-primaer-dunkel: #0b3277;
    --farbe-akzent: #e9561c;
    --farbe-akzent-dunkel: #c4400d;
    --farbe-hintergrund: #ffffff;
    --farbe-weiss: #ffffff;

    /* Flächen aus dem Mock-up: F3F5FA am häufigsten, E7EBF5 für Infokästen (auch die Schritte und
       Blöcke der Folien 25 bis 27 und, angeglichen von E6EAF4, die Bänder der Folien 29 und 30),
       C7D0E7 für die Kundenübergabe und den Kasten "Referenzmakler" (Folien 8 und 9). */
    --farbe-flaeche: #f3f5fa;
    --farbe-flaeche-kraeftig: #e7ebf5;
    --farbe-flaeche-mittel: #c7d0e7;

    /* Zweites Blau der Startseite (Bestandsverkauf, Verläufe) und das dunklere Blau von
       Play-Button und "Jetzt Policen Direkt Makler kennenlernen" (Folien 6, 7 und 9). */
    --farbe-sekundaer: #5685bf;
    --farbe-tiefblau: #2a4291;
    --farbe-tiefblau-dunkel: #1f3170;

    /* Grau der Wand im Hero-Foto (am linken Bildrand gemessen, Bettinas Fassung vom
       2026-10-13) - das Foto läuft dorthin aus. Königsblau hat darauf 8 : 1. */
    --farbe-held: #ededed;

    /* Modellseiten (Folien 13, 14, 21, 22): Inhalt der Karten "Umdeckung" und "Fahrzeugwechsel",
       Kasten "Beispiel-Rechnung Bestandsverkauf"; in den Diagrammen Cyan und ein helleres Orange als
       das der Buttons - so im Mock-up. */
    --farbe-umdeckung: #c3cfe6;
    --farbe-fahrzeugwechsel: #d9e0ef;
    --farbe-vergleich: #cfdded;
    --farbe-diagramm-cyan: #00b0f0;
    --farbe-diagramm-orange: #ff6600;
    /* Schrift auf dem Diagramm-Orange: Weiß hätte dort nur 2,9 : 1, Königsblau 3,2 : 1. */
    --farbe-auf-diagramm-orange: #000000;

    /* Übertragung, Kunden, Über uns (Folien 25 bis 35): Reiter mit der Dauer der
       Übertragungsschritte, Karten der Werte, Zeitstrahl und Kasten "Pools" (#dce6f2, im Mock-up
       accent1 mit 80 % Aufhellung), die beiden Zweige der Policen Direkt Gruppe. Den hellblauen
       Kasten des Zweigs "Versicherungsmakler" gibt es im Mock-up nicht (Feedback Bettina
       2026-10-12); er ist aus dessen Label so aufgehellt wie der graue aus dem der Portale.
       Königsblau hat auf allen über 5,6 : 1. */
    --farbe-reiter: #b6cbe4;
    --farbe-werte: #dce6f2;
    --farbe-zweig-makler: #cadafa;
    --farbe-zweig-makler-flaeche: #edf2fd;
    --farbe-zweig-portale: #d9d9d9;
    --farbe-zweig-portale-flaeche: #f2f2f2;

    /* Grauer Footer und untere Leiste (Folie 3); dark-gray-75/-100 im Styleguide. Weiß auf
       #707070 hat 4,9 : 1 und reicht damit für Fließtext. */
    --farbe-fuss: #707070;
    --farbe-leiste: #404040;

    /* Formular: Rand der Felder (aus Königsblau aufgehellt, wie im Maklerbarometer) und Rot
       für Fehler (6 : 1 auf der hellen Fläche). */
    --farbe-feld-rahmen: #a8bcdd;
    --farbe-fehler: #b3261e;

    --radius-knopf: 0.5rem;
    --radius-karte: 1.25rem;
    --schatten-karte: 0 0.25rem 1.25rem rgb(15 65 155 / 0.14);

    /* Seitenbreite: 75rem einschließlich Rand, wie .rahmen. */
    --breite-rahmen: 75rem;
    --rand: 1.25rem;
    --abstand-abschnitt: clamp(2.5rem, 2rem + 3vw, 4.5rem);

    --schrift: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
    --groesse-text: 1.0625rem;
    --groesse-klein: 0.875rem;
    --groesse-h1: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
    --groesse-h2: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
    --groesse-h3: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
}

/* ===== Grundlagen ======================================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: var(--groesse-text);
    line-height: 1.6;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1,
h2,
h3 {
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75em;
}

h1 {
    font-size: var(--groesse-h1);
}

h2 {
    font-size: var(--groesse-h2);
}

h3 {
    font-size: var(--groesse-h3);
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--farbe-primaer);
}

img {
    max-width: 100%;
}

/* FocusOnNavigate setzt nach einem Seitenwechsel den Fokus auf die Überschrift, die
   Sprungmarke auf main - für Screenreader. Ein Rahmen darum wäre für alle anderen nur
   störend. */
h1:focus,
.haupt:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 2px;
}

/* Auf den dunklen Flächen weiß: Orange hätte dort gegen Blau 2,6 : 1, gegen #707070 nur
   1,4 : 1 und gegen #404040 2,9 : 1 - für einen Fokusrahmen verlangt WCAG 1.4.11 mindestens
   3 : 1. Weiß kommt auf allen drei über 4,9 : 1. Auf #5685bf (Bestandsverkauf) hat Weiß
   3,8 : 1, Orange nur 1,1 : 1.

   Auf dem Blaugrau #c7d0e7 (Kundenübergabe, Kästen "Referenzmakler", "Warum Policen Direkt"
   und "Übergeben Sie Ihre Kunden in gute Hände" auf Folie 30) reicht weder Orange (2,3 : 1) noch
   Weiß (1,5 : 1); dort Königsblau mit 6 : 1. Die
   Regel steht vor der weißen, damit die blauen Flächen darin (Videokarte) beim Weiß bleiben. */
:is(.kunden-flaeche, .bildkasten--bild-rechts, .warum, .aufruf--kasten) :focus-visible {
    outline-color: var(--farbe-primaer);
}

:is(.band, .fuss-haupt, .fuss-leiste, .abschnitt--blau, .held-frage, .modell-karte, .bildkarte-text,
    .videokarte-text, .konditionen-karte--blau, .rechenbeispiel-band, .manager-band, .idee-band) :focus-visible {
    outline-color: var(--farbe-weiss);
}

/* Innere Breite aller Bereiche; die Bereiche selbst laufen über die volle Breite. */
.rahmen {
    max-width: var(--breite-rahmen);
    margin: 0 auto;
    padding: 0 var(--rand);
}

.haupt {
    flex: 1;
}

/* Erst mit dem Fokus sichtbar. Beim Laden steht der Fokus schon auf der h1 (FocusOnNavigate);
   erreichbar ist die Sprungmarke von oben, mit Umschalt+Tab oder aus der Adressleiste. */
.sprungmarke {
    position: absolute;
    left: -100vw;
    top: 0.5rem;
    z-index: 10;
    padding: 0.5rem 1rem;
    background: var(--farbe-weiss);
    border: 2px solid var(--farbe-primaer);
}

.sprungmarke:focus {
    left: 0.5rem;
}

/* ===== Header (Folie 2) ================================================================== */

.kopf-marke {
    display: inline-block;
    line-height: 0;
}

/* Feste Höhe, damit der Kopfbereich beim Laden nicht springt. Die Vorlage hat 452x140
   Bildpunkte, das trägt die Höhe auch auf hochauflösenden Bildschirmen knapp. */
.kopf-marke img {
    height: 3.5rem;
    width: auto;
}

.kopf-link {
    color: var(--farbe-primaer);
    text-decoration: none;
}

.kopf-link:hover {
    text-decoration: underline;
}

/* Aktiver Menüpunkt fett, wie auf den Unterseiten des Mock-ups (Folie 25, Folie 41). */
.kopf-link.aktiv {
    font-weight: 700;
}

.kopf-telefon {
    color: var(--farbe-primaer);
    text-decoration: none;
    white-space: nowrap;
}

.kopf-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kopf-menueknopf,
.kopf-schliessen {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font: inherit;
    color: var(--farbe-primaer);
    background: transparent;
    border: 1px solid var(--farbe-primaer);
    border-radius: var(--radius-knopf);
    cursor: pointer;
}

.kopf-menueknopf .symbol,
.kopf-schliessen .symbol {
    width: 1.25rem;
    height: 1.25rem;
}

/*
    Breit: zwei Zeilen. Das Raster hat außen zwei Randspalten, die den Inhalt auf die
    Seitenbreite begrenzen (min. --rand, sonst die halbe Restbreite), und innen zwei Spalten für
    Wortmarke und Kontaktzeile. Die Navigation läuft über alle Spalten, damit ihre beiden Linien
    von Rand zu Rand gehen. Der Popover-Rahmen ist hier aufgelöst (display: contents), seine
    Kinder stehen direkt im Raster.

    Umschaltpunkt 72rem (1152 px): die sechs Menüpunkte in 0.9375rem brauchen mit Abständen
    rund 1100 px; darunter liefe die Zeile über den Rand (gemessen im Review, 2026-10-02).
*/
@media (min-width: 72rem) {
    .kopf {
        display: grid;
        grid-template-columns:
            [voll-start] minmax(var(--rand), calc((100% - var(--breite-rahmen)) / 2 + var(--rand)))
            [inhalt-start] auto 1fr [inhalt-end]
            minmax(var(--rand), calc((100% - var(--breite-rahmen)) / 2 + var(--rand))) [voll-end];
        align-items: center;
    }

    .kopf-marke {
        grid-column: 2;
        grid-row: 1;
        padding: 1.25rem 0;
    }

    .kopf-menue {
        display: contents;
    }

    .kopf-menueknopf,
    .kopf-schliessen {
        display: none;
    }

    .kopf-meta {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 2.25rem;
        font-size: 0.9375rem;
    }

    /* Der Header-Button ist im Mock-up nicht fett und etwas zurückgenommen. */
    .kopf-meta .knopf {
        font-size: 0.9375rem;
        font-weight: 400;
        padding: 0.55em 1.25em;
    }

    .kopf-nav {
        grid-column: voll-start / voll-end;
        grid-row: 2;
        border-top: 1px solid var(--farbe-primaer);
        border-bottom: 1px solid var(--farbe-primaer);
    }

    .kopf-nav ul {
        max-width: var(--breite-rahmen);
        margin: 0 auto;
        padding: 0.75rem var(--rand);
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    /* Kleiner als der Fließtext, wie im Mock-up (Navigation 9,5 pt zu Text 14 pt). */
    .kopf-nav a {
        font-size: 0.9375rem;
        white-space: nowrap;
    }
}

/*
    Schmal: Wortmarke und Menü-Button; das Menü öffnet als Seitenleiste von rechts. Geschlossen
    blendet der Browser es selbst aus ([popover]:not(:popover-open) - display: none).
*/
@media (max-width: 71.99rem) {
    .kopf {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.75rem var(--rand);
        border-bottom: 1px solid var(--farbe-primaer);
    }

    .kopf-marke img {
        height: 2.75rem;
    }

    .kopf-menue:popover-open {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(22rem, 100%);
        height: 100%;
        margin: 0;
        padding: 4.5rem 1.5rem 2rem;
        border: 0;
        background: var(--farbe-weiss);
        box-shadow: -0.25rem 0 1.5rem rgb(0 0 0 / 0.2);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .kopf-menue::backdrop {
        background: rgb(0 0 0 / 0.35);
    }

    .kopf-schliessen {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .kopf-nav {
        order: 1;
    }

    .kopf-nav a {
        display: block;
        padding: 0.6rem 0;
        font-size: 1.125rem;
    }

    .kopf-meta {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--farbe-flaeche-kraeftig);
    }
}

/* Schlichtes Layout der Fehlerseite: nur die Wortmarke. */
.kopf.kopf--schlicht {
    display: block;
    padding: 1rem var(--rand);
    border-bottom: 1px solid var(--farbe-primaer);
}

/* ===== Bausteine ========================================================================= */

/* Knopf: Link in Schaltflächenform. Der Pfeil ist eine gedrehte Ecke aus zwei Rahmenlinien. */
.knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.7em 1.4em;
    border: 1px solid transparent;
    border-radius: var(--radius-knopf);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}

.knopf--pfeil::after {
    content: "";
    flex: none;
    width: 0.45em;
    height: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* Doppelte Klasse, damit Linkfarben der Bereiche (etwa weiß im Footer) die Schrift der Knöpfe
   nicht überschreiben - .fuss-haupt a wiegt sonst schwerer als eine einzelne Klasse.

   Weiß auf diesem Orange hat 3,6 : 1 - für normal großen Text unter den 4,5 : 1 der WCAG.
   So im Mock-up und auf policendirekt.de; offen als Frage zur Barrierefreiheit (Ticket #1). */
.knopf.knopf--orange {
    color: var(--farbe-weiss);
    background: var(--farbe-akzent);
}

.knopf.knopf--orange:hover {
    background: var(--farbe-akzent-dunkel);
}

.knopf.knopf--blau {
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
}

.knopf.knopf--blau:hover {
    background: var(--farbe-primaer-dunkel);
}

.knopf.knopf--weiss {
    color: var(--farbe-fuss);
    background: var(--farbe-weiss);
}

.knopf.knopf--weiss:hover {
    background: var(--farbe-flaeche);
}

.knopf.knopf--tiefblau {
    color: var(--farbe-weiss);
    background: var(--farbe-tiefblau);
}

.knopf.knopf--tiefblau:hover {
    background: var(--farbe-tiefblau-dunkel);
}

.knopf.knopf--weiss-blau {
    color: var(--farbe-primaer);
    background: var(--farbe-weiss);
}

.knopf.knopf--weiss-blau:hover {
    background: var(--farbe-flaeche);
}

/* Abschnitt: Fläche über die volle Breite. */
.abschnitt {
    padding-block: var(--abstand-abschnitt);
}

.abschnitt--hell {
    background: var(--farbe-flaeche);
}

.abschnitt--blau {
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
}

.abschnitt--blaugrau {
    background: var(--farbe-flaeche-kraeftig);
}

/* Knöpfe ausgenommen: ein weißer Knopf auf Blau behält seine eigene Schrift. */
.abschnitt--blau :is(h1, h2, h3, a:not(.knopf)) {
    color: var(--farbe-weiss);
}

.unterzeile {
    font-size: var(--groesse-h3);
    font-weight: 700;
}

/* Karte: weiß, große Ecken, weicher Schatten (Folie 5). */
.karte {
    background: var(--farbe-weiss);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
    padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
}

/* Häkchenliste: blauer Kreis mit weißem Haken (Folie 5). */
.haken-liste {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: grid;
    gap: 1.25rem 2.5rem;
}

@media (min-width: 48rem) {
    .haken-liste--zweispaltig {
        grid-template-columns: 1fr 1fr;
    }
}

.haken-liste > li {
    position: relative;
    min-height: 2.75rem;
    padding-left: 3.75rem;
    font-size: var(--groesse-h3);
    font-weight: 700;
    line-height: 1.25;
}

.haken-liste > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--farbe-primaer);
}

.haken-liste > li::after {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: 0.6rem;
    width: 0.65rem;
    height: 1.2rem;
    border-right: 0.22rem solid var(--farbe-weiss);
    border-bottom: 0.22rem solid var(--farbe-weiss);
    transform: rotate(45deg);
}

/* Icons aus Symbol.razor: Größe hier, Farbe vom Text. */
.symbol {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
}

/* ===== Footer (Folie 3) ================================================================== */

/* 1. Spezialisten-Band */
.band {
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
    padding-block: var(--abstand-abschnitt);
}

.band h2 {
    color: var(--farbe-weiss);
}

.band-personen {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 2.5rem 1.5rem;
}

.person {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    text-align: center;
}

.person-foto {
    width: 9rem;
    height: 9rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    object-fit: cover;
}

.person-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.person-funktion {
    margin: 0;
    font-size: 1.125rem;
}

.person-kontakt {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 1rem 0 1.5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.person-kontakt a {
    color: var(--farbe-weiss);
}

.person-telefon {
    text-decoration: none;
}

/* Die Buttons stehen unten bündig, auch wenn eine Funktion zweizeilig ist. */
.person .knopf {
    margin-top: auto;
}

/* 2. Mitgliedschaften: Logos in einheitlicher Höhe; breite Logos werden in die Höchstbreite
   eingepasst, ohne verzerrt zu werden. */
.mitgliedschaften {
    background: var(--farbe-weiss);
    padding-block: var(--abstand-abschnitt);
}

.logo-raster {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem 2.25rem;
}

/* Höhe und Höchstbreite so gewählt, dass auf voller Breite wie im Mock-up sechs Logos in der
   ersten und vier in der zweiten Reihe stehen; schmaler bricht das Raster von selbst um. */
.logo-raster img {
    display: block;
    width: auto;
    height: 4.5rem;
    max-width: 12rem;
    object-fit: contain;
}

/* Auf dem Handy kleiner, damit zwei Logos nebeneinander passen. */
@media (max-width: 47.99rem) {
    .logo-raster {
        gap: 1.5rem 2rem;
    }

    .logo-raster img {
        height: 3rem;
        max-width: 8.5rem;
    }
}

/* 3. Grauer Footer in vier Spalten, schmal gestapelt. */
.fuss-haupt {
    color: var(--farbe-weiss);
    background: var(--farbe-fuss);
    padding-block: 3rem;
}

.fuss-spalten {
    display: grid;
    gap: 2.5rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

@media (min-width: 64rem) {
    .fuss-spalten {
        grid-template-columns: 0.9fr 1.3fr 1.1fr 1.2fr;
    }
}

.fuss-marke img {
    display: block;
    width: min(100%, 15rem);
    height: auto;
}

.fuss-titel {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    color: var(--farbe-weiss);
}

.fuss-haupt a {
    color: var(--farbe-weiss);
}

.fuss-haupt address {
    margin: 0 0 1.75rem;
    font-style: normal;
    line-height: 1.8;
}

.fuss-links {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 2;
}

.fuss-links a {
    text-decoration: none;
}

.fuss-links a:hover {
    text-decoration: underline;
}

.fuss-klein {
    font-size: 0.75rem;
}

/* 4. Untere Leiste */
.fuss-leiste {
    color: var(--farbe-weiss);
    background: var(--farbe-leiste);
    padding-block: 1.5rem;
    font-size: var(--groesse-klein);
    text-align: center;
}

.fuss-leiste a {
    color: var(--farbe-weiss);
}

.fuss-profile {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.fuss-profile a {
    display: inline-flex;
    padding: 0.25rem;
}

.fuss-recht {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.fuss-recht a {
    text-decoration: none;
}

.fuss-recht a:hover {
    text-decoration: underline;
}

.fuss-recht li + li::before {
    content: "|";
    margin: 0 0.6rem;
}

/* Schmal untereinander: beim Umbruch stünde der Trennstrich sonst am Zeilenanfang. */
@media (max-width: 30rem) {
    .fuss-recht {
        flex-direction: column;
        gap: 0.35rem;
    }

    .fuss-recht li + li::before {
        content: none;
    }
}

.fuss-copyright {
    margin: 0;
    font-size: 0.8125rem;
}

/* ===== Kontaktformular (Folie 41) ======================================================== */

/* Formular links, "Besuchen Sie uns" rechts; schmal untereinander. */
.kontakt-raster {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 64rem) {
    .kontakt-raster {
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
        gap: 3.5rem;
    }
}

.feld {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
}

.feld-titel {
    font-size: 1.125rem;
    font-weight: 700;
}

/* Die Frage nach dem Anliegen steht im Mock-up größer, als Unterzeile der Überschrift. */
.feld-titel--anliegen {
    font-size: var(--groesse-h3);
}

/* Felder weiß mit hellblauem Rand auf der hellen Fläche, wie im Mock-up. Mindestens 44 px
   hoch, damit sie auch auf dem Handy gut zu treffen sind. */
.kontakt-formular :is(input:not([type="checkbox"]), select, textarea) {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: var(--farbe-text);
    background: var(--farbe-weiss);
    border: 1px solid var(--farbe-feld-rahmen);
    border-radius: 0.25rem;
}

.kontakt-formular textarea {
    min-height: 10rem;
    resize: vertical;
}

/* Fokus auf den Feldern: statt des orangen Rahmens (der in Chrome um die Auswahllisten auch beim
   Klicken erschien, Feedback Bettina 2026-10-12) ein königsblauer Rand mit Ring - weiter
   sichtbar für alle, die mit der Tastatur durchs Formular gehen (WCAG 2.4.7; Königsblau hat auf
   Weiß 9,3 : 1, auf der hellen Fläche des Formulars 8,6 : 1). */
.kontakt-formular :is(input:not([type="checkbox"]), select, textarea):focus-visible {
    outline: none;
    border-color: var(--farbe-primaer);
    box-shadow: 0 0 0 1px var(--farbe-primaer);
}

/* Ein Feld mit Fehler bleibt rot, auch mit dem Fokus; der Ring wird dann breiter. */
.kontakt-formular :is(input:not([type="checkbox"]), select, textarea).invalid:focus-visible {
    border-color: var(--farbe-fehler);
    box-shadow: 0 0 0 2px var(--farbe-fehler);
}

/* Blazor setzt "invalid" an Felder mit Fehler, "validation-message" an die Meldung darunter.
   #b3261e hat auf der hellen Fläche 6 : 1. */
.kontakt-formular .invalid {
    border-color: var(--farbe-fehler);
    box-shadow: 0 0 0 1px var(--farbe-fehler);
}

.validation-message {
    color: var(--farbe-fehler);
    font-size: 0.9375rem;
    font-weight: 600;
}

.formular-fehler .validation-errors {
    margin: 0 0 1.5rem;
    padding: 1rem 1rem 1rem 2.25rem;
    color: var(--farbe-fehler);
    background: var(--farbe-weiss);
    border: 1px solid var(--farbe-fehler);
    border-radius: 0.25rem;
}

.formular-meldung {
    padding: 1rem;
    color: var(--farbe-fehler);
    background: var(--farbe-weiss);
    border: 1px solid var(--farbe-fehler);
    border-radius: 0.25rem;
    font-weight: 600;
}

.einwilligung {
    border: 0;
    padding: 0;
    margin-inline: 0;
}

.einwilligung legend {
    padding: 0;
    margin-bottom: 0.5rem;
}

.einwilligung-zeile {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.einwilligung-zeile input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    accent-color: var(--farbe-primaer);
}

/* Honigtopf gegen Formular-Bots: aus dem Bild geschoben, nicht per display: none - das
   erkennen manche Bots. Wie im Maklerbarometer. */
.honigtopf {
    position: absolute;
    left: -9999px;
}

.pflicht-hinweis {
    font-size: var(--groesse-klein);
}

/* Rechtsbündig unter den Feldern, wie im Mock-up (Folie 41). */
.knopf--absenden {
    display: flex;
    margin-inline-start: auto;
    min-width: 14rem;
    justify-content: center;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.kontakt-besuch h2 {
    font-size: var(--groesse-h3);
}

.kontakt-besuch address {
    margin: 0 0 1.5rem;
    font-style: normal;
    line-height: 1.8;
}

/* ===== Startseite (Folien 5 bis 10) ====================================================== */

/*
    Breakpoint der Startseite: 56rem (896 px). Darunter stehen Bild und Text untereinander, die
    Karten in einer Spalte - im Mock-up nicht gezeichnet, festgelegt wie beim Layout. Der Hero
    wechselt erst bei 64rem, weil Text und Foto vorher nicht nebeneinander passen.
*/

/* Zwei weiße Abschnitte hintereinander: sonst stünden zwei Abstände übereinander. */
.abschnitt:not(.abschnitt--hell, .abschnitt--blau, .abschnitt--blaugrau) + .abschnitt:not(.abschnitt--hell, .abschnitt--blau, .abschnitt--blaugrau),
.abschnitt:not(.abschnitt--hell, .abschnitt--blau, .abschnitt--blaugrau) + .kunden .kunden-kopf {
    padding-top: 0;
}

/* Endet eine Seite blau (Newsletter-Band auf Folie 10), liefe die Fläche ohne Grenze in das
   blaue Spezialisten-Band des Footers über. Im Mock-up steht darunter Weiß. */
.haupt > :last-child:is(.band, .abschnitt--blau) {
    margin-bottom: var(--abstand-abschnitt);
}

/* Buttons unter Karten und Kästen stehen im Mock-up rechtsbündig. */
.knopf-zeile {
    display: flex;
    justify-content: flex-end;
    margin: 1.5rem 0 0;
}

/* Überschrift mit Unterzeile direkt darunter. */
.mit-unterzeile {
    margin-bottom: 0.3em;
}

.unterzeile-schlicht {
    font-size: var(--groesse-h3);
}

/* "Unsere Makler über uns" ist im Mock-up kleiner als die übrigen Überschriften. */
.h2-klein {
    font-size: clamp(1.3125rem, 1.1rem + 0.8vw, 1.75rem);
}

/* Blocksatz wie auf Folie 5, aber erst ab mittlerer Breite und mit Silbentrennung - schmal
   rissen sonst große Lücken zwischen die Wörter. Die Trennung richtet sich nach lang="de". */
@media (min-width: 48rem) {
    .blocksatz {
        text-align: justify;
        hyphens: auto;
    }
}

/* Aufzählung mit kleinem Quadrat in der Textfarbe (Folien 6 und 9). */
.liste-quadrat {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.liste-quadrat > li {
    position: relative;
    padding-left: 1.5rem;
}

.liste-quadrat > li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.6em;
    width: 0.45em;
    height: 0.45em;
    background: currentColor;
}

/* Bildzeichen aus Zeichen.razor. */
.zeichen {
    display: block;
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
}

.zeichen-aussparung {
    stroke: var(--farbe-weiss);
}

.zeichen-hell {
    stroke: var(--farbe-sekundaer);
}

.zeichen-grund {
    fill: var(--farbe-weiss);
}

.zeichen-tinte {
    fill: none;
    stroke: var(--farbe-primaer);
}

/* --- Hero: Foto rechts, Text und blauer Kasten links. Schmal das Foto oben, der Text darunter. */
.held {
    position: relative;
    overflow: hidden;
    background: var(--farbe-held);
}

.held-bild {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* Das Feld zeigt knapp die Hälfte der Bildbreite; so steht der Mann (49 bis 79 %) mittig. */
    object-position: 76% 0;
}

.held-inhalt {
    padding-block: 2rem 2.5rem;
}

.held h1 {
    font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem);
    margin-bottom: 0.35em;
}

.held .unterzeile {
    font-size: clamp(1.375rem, 1rem + 1.5vw, 2.25rem);
    line-height: 1.25;
    margin-bottom: 1.25em;
}

.held-frage {
    max-width: 36rem;
    padding: 1.25rem 1.5rem 1.5rem;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
    border-radius: var(--radius-karte);
}

.held-frage-text {
    margin: 0 0 0.75rem;
    font-size: var(--groesse-h3);
    font-weight: 700;
}

.held-frage .knopf {
    display: flex;
    justify-content: center;
}

/* Breit: das Foto steht rechts in voller Höhe, sein linker Rand läuft in die Fläche aus
   (Maske), der Text steht davor. Der Text verdeckt den Mann nie (.held-bild).

   Höhe: Beim Öffnen der Seite sollen auf einem Laptop die Überschrift "Ihr Lebenswerk verdient
   einen starken Nachfolger" und die ersten Zeilen darunter zu sehen sein (Feedback Bettina und
   Tajana 2026-10-12). Die Stage hat deshalb keine Mindesthöhe; Schrift und Abstände richten sich
   nach der Fensterhöhe (vh) und erst auf breiten, hohen Bildschirmen nach der Breite (vw). Bei
   den gängigen Laptop-Fenstern - 1920 x 945, 1600 x 760, 1536 x 730 (1080p mit 125 %),
   1440 x 790, 1366 x 657, 1280 x 690, 1280 x 585 (1080p mit 150 %) - stehen so die Überschrift
   und mindestens zwei Zeilen Text im ersten Bild; ab etwa 2560 x 1300 bleibt alles bei den
   Höchstwerten. Der Abstand zur ersten Karte schrumpft mit (.held + .abschnitt). */
@media (min-width: 64rem) {
    .held {
        display: flex;
        align-items: center;
        /* Abfragecontainer, damit .held-bild mit der Breite der Stage ohne Scrollleiste rechnen
           kann (cqw); 100vw enthielte die Scrollleiste. */
        container-type: inline-size;
        /* Lage des Mannes im Foto, in Anteilen der Bildbreite: links von ihm Wand, rechts Fenster
           und Pflanze. Bei einem anderen Foto nur diese beiden Werte und die Maske anpassen. */
        --mann-links: 49%;
        --mann-rechts: 79%;
    }

    .held + .abschnitt {
        padding-top: clamp(1.5rem, 4.5vh, var(--abstand-abschnitt));
    }

    /* Das Foto steht in voller Höhe, vom Kopf bis zu den verschränkten Armen wie im Mock-up
       (Wunsch Bettina 2026-10-14); seine Breite folgt aus der Höhe der Stage, beschnitten wird
       nicht - auch nicht durch die allgemeine Regel img { max-width: 100% }, wenn das Foto
       breiter als die Stage wird (max-width: none). Lage, in zwei Schritten:
       - right: Die rechte Kante des Fotos steht an der Inhaltsspalte, auf schmaleren Fenstern am
         Fensterrand.
       - transform: Das Foto rückt um seinen Hintergrund rechts vom Mann nach rechts, damit der
         Mann an der Inhaltsspalte bzw. am Fensterrand abschließt. Stünde er so näher als 1rem an
         der Textspalte (min(46rem, 55vw), siehe unten) - bei hoher Stage, etwa iPad hochkant oder
         große Bildschirme -, rückt es weiter nach rechts; dann fällt am Fensterrand ein Stück
         Hintergrund oder Arm weg, statt dass der Kasten den Mann verdeckt (Review 2026-10-14).
         Die Prozentwerte im transform beziehen sich auf die Breite des Fotos, 100cqw auf die
         Stage ohne Scrollleiste; die Textspalte rechnet wie ihre Regel mit vw.
       Die Maske läuft links bis 30 % und rechts ab 81 % aus, also nur in Wand und Fenster. */
    .held-bild {
        position: absolute;
        inset: 0 max(0px, calc((100% - var(--breite-rahmen)) / 2 + var(--rand))) 0 auto;
        width: auto;
        max-width: none;
        height: 100%;
        aspect-ratio: 2400 / 850;
        transform: translateX(max(calc(100% - var(--mann-rechts)),
            calc(100% - var(--mann-links) - 100cqw
                + max(0px, (100cqw - var(--breite-rahmen)) / 2 + var(--rand))
                + max(var(--rand), (100cqw - var(--breite-rahmen)) / 2 + var(--rand))
                + min(46rem, 55vw) + 1rem)));
        -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 81%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 30%, #000 81%, transparent);
    }

    .held-inhalt {
        position: relative;
        width: 100%;
        padding-block: clamp(1rem, 3.5vh, 2.5rem);
    }

    .held h1 {
        font-size: clamp(1.75rem, min(1.2rem + 3.6vw, 6vh), 4.25rem);
    }

    .held .unterzeile {
        font-size: clamp(1.125rem, min(1rem + 1.5vw, 3.2vh), 2.25rem);
        margin-bottom: 0.8em;
    }

    .held-frage {
        padding: clamp(0.75rem, 2vh, 1.25rem) 1.5rem;
    }

    .held-frage-text {
        margin-bottom: 0.5rem;
        font-size: clamp(1.0625rem, 2.8vh, 1.375rem);
    }

    .held-inhalt > * {
        max-width: min(46rem, 55vw);
    }
}

/* --- Nachfolgemodelle (Folie 6) */
.modelle {
    display: grid;
    gap: 2.5rem 2rem;
    margin-top: 2.5rem;
}

@media (min-width: 56rem) {
    .modelle {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .modell--breit {
        grid-column: 1 / -1;
    }
}

.modell {
    display: flex;
    flex-direction: column;
}

.modell-titel {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1rem;
    font-size: var(--groesse-h2);
}

.modell--hellblau .modell-titel {
    color: var(--farbe-sekundaer);
}

.modell-karte {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.75rem 1.5rem;
    color: var(--farbe-weiss);
    border-radius: var(--radius-karte);
    background: var(--farbe-primaer);
}

.modell--hellblau .modell-karte {
    background: var(--farbe-sekundaer);
}

/* Verlauf wie in der PPTX: oben rechts hell, unten links dunkel. */
.modell--verlauf .modell-karte {
    background: linear-gradient(225deg, var(--farbe-sekundaer), var(--farbe-primaer) 75%);
}

.modell-vorteil {
    margin: 1.25rem 0 0.5rem;
    font-size: var(--groesse-h3);
}

.modell-knopf {
    display: flex;
    justify-content: flex-end;
    margin: auto 0 0;
    padding-top: 1rem;
}

/* --- Bild neben Text in einer Fläche: Übergangsphase (Folie 6), Referenzmakler (Folie 9). */
.bildkasten {
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-karte);
    background: var(--farbe-flaeche-kraeftig);
}

.bildkasten--bild-rechts {
    background: var(--farbe-flaeche-mittel);
}

.bildkasten-bild {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 50% 25%;
}

.bildkasten-text {
    padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
}

/* Schmal steht das Foto über dem Text, auch beim Referenzmakler, wo es breit rechts steht
   (Feedback Bettina 2026-10-12). Das Foto ist schmückend (alt=""), die Reihenfolge im Markup
   bleibt. */
@media (max-width: 55.99rem) {
    .bildkasten--bild-rechts .bildkasten-bild {
        order: -1;
    }
}

@media (min-width: 56rem) {
    .bildkasten {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .bildkasten--bild-rechts {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .bildkasten-bild {
        aspect-ratio: auto;
    }
}

/* --- Zitat (Folie 7): blaue Karte, großes Anführungszeichen links oben. Das Zeichen ist ein
   Schriftzeichen aus dem CSS, kein Bild - es trägt keine Bedeutung. */
.zitat {
    position: relative;
    margin: 0 0 3rem;
    padding: 5rem clamp(1.25rem, 0.75rem + 3vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
    border-radius: var(--radius-karte);
}

.zitat::before {
    content: "\201D";
    position: absolute;
    left: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
    top: 0.25rem;
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
}

.zitat blockquote {
    margin: 0;
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    font-style: italic;
    line-height: 1.5;
    text-align: center;
}

.zitat blockquote p {
    margin: 0;
}

/* Schmal Foto über dem Text - daneben bliebe für den langen Text nur eine schmale Spalte; ab
   48rem steht der Text rechts neben dem Foto (die linksbündige Karte schon früher, siehe dort). */
.zitat-quelle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

@media (min-width: 48rem) {
    .zitat-quelle {
        flex-direction: row;
        justify-content: center;
        gap: 1.25rem;
        text-align: left;
    }
}

.zitat-quelle img {
    flex: none;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    object-fit: cover;
}

@media (min-width: 56rem) {
    .zitat {
        padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
        padding-left: 9rem;
    }
}

/* --- Video mit Beschriftung daneben (Folien 7 und 9) */
.video-zeile {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    margin: 0 0 3rem;
}

.video-beschriftung {
    margin: 0;
    font-size: var(--groesse-h3);
    line-height: 1.35;
}

@media (min-width: 56rem) {
    .video-zeile {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 2rem;
    }

    .video-zeile .video-beschriftung {
        text-align: right;
    }

    .video-zeile--video-links {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .video-zeile--video-links .video-beschriftung {
        text-align: left;
    }
}

/* Videoplayer.razor: Vorschaubild bzw. Video im Seitenverhältnis 16 : 9. */
.video {
    position: relative;
    overflow: hidden;
    line-height: 0;
    background: #000;
    border-radius: var(--radius-karte);
}

.video :is(video, img) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Fokus auf dem Video (nach dem Start-Button liegt er dort): ein Rahmen außen würde von
   overflow: hidden abgeschnitten. Deshalb ein weißer und ein blauer Ring innen, über dem Bild -
   so bleibt er auf hellen wie dunklen Bildstellen sichtbar. Das Video selbst bekommt den Rahmen
   nur als Rückfall für Browser ohne :has(). */
.video video:focus-visible {
    outline: 3px solid var(--farbe-weiss);
    outline-offset: -3px;
}

.video:has(video:focus-visible) video {
    outline: none;
}

.video:has(video:focus-visible)::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--farbe-weiss);
    border-radius: inherit;
    box-shadow: inset 0 0 0 3px var(--farbe-primaer);
    pointer-events: none;
}

/* Großer runder Start-Button wie im Mock-up. Erst js/seite.js zeigt ihn (ohne Skript bleibt
   die Bedienleiste des Browsers). Der Fokus bekommt einen weißen und einen blauen Ring, damit er
   auf jedem Bildausschnitt sichtbar bleibt. */
.video-start {
    position: absolute;
    inset: 0;
    width: 5.5rem;
    height: 5.5rem;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--farbe-tiefblau);
    cursor: pointer;
}

.video-start[hidden] {
    display: none;
}

.video-start::after {
    content: "";
    position: absolute;
    left: 54%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 1.1rem 0 1.1rem 1.8rem;
    border-color: transparent transparent transparent var(--farbe-weiss);
}

.video-start:hover {
    background: var(--farbe-tiefblau-dunkel);
}

.video-start:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--farbe-weiss), 0 0 0 6px var(--farbe-primaer);
}

.video-folgt {
    position: absolute;
    inset: auto 0 0;
    margin: 0;
    padding: 0.6rem 1rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--farbe-weiss);
    background: rgb(15 65 155 / 0.88);
}

/* --- Teamfoto neben blauer Fläche: "Planen Sie mit uns Ihren Ruhestand" (Folie 7) */
.bildkarte {
    display: grid;
    overflow: hidden;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
    border-radius: var(--radius-karte);
}

.bildkarte-bild {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.bildkarte-text {
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

.bildkarte-text h2 {
    color: var(--farbe-weiss);
    font-size: var(--groesse-h2);
}

@media (min-width: 56rem) {
    .bildkarte {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    }

    .bildkarte-bild {
        aspect-ratio: auto;
    }
}

/* --- Kennzahlenleiste (Folie 7, auch Folie 25): vier Werte mit senkrechten
   Trennlinien, schmal zwei mal zwei. */
.kennzahlen {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 0;
    margin: 1.5rem 0 0;
    padding: 1.5rem 0.5rem;
    color: var(--farbe-weiss);
    text-align: center;
    background: var(--farbe-primaer);
    border-radius: var(--radius-karte);
}

.kennzahlen li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.75rem;
}

.kennzahlen li:nth-child(even) {
    border-left: 2px solid rgb(255 255 255 / 0.85);
}

/* Ohne Umbruch: "> 95%" soll nicht nach dem Zeichen in die nächste Zeile rutschen. Die kleinste
   Größe ist so gewählt, dass der Wert auch bei 320 px in seine Hälfte passt. */
.kennzahl-wert {
    font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.kennzahl-text {
    max-width: 12rem;
    font-weight: 700;
    line-height: 1.3;
}

@media (min-width: 56rem) {
    .kennzahlen {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 2rem 0.5rem;
    }

    .kennzahlen li:nth-child(n + 2) {
        border-left: 2px solid rgb(255 255 255 / 0.85);
    }
}

/* --- Kundenübergabe (Folie 8): Überschrift auf Weiß, darunter die Fläche #c7d0e7. */
.kunden-kopf {
    padding-block: var(--abstand-abschnitt) 1.5rem;
}

.kunden-flaeche {
    padding-block: 2rem var(--abstand-abschnitt);
    background: var(--farbe-flaeche-mittel);
}

.schritte {
    list-style: none;
    counter-reset: schritt;
    display: grid;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.schritt {
    position: relative;
    counter-increment: schritt;
    overflow: hidden;
    background: var(--farbe-weiss);
    border-radius: 0.75rem;
}

/* Die Ziffer im weißen Kreis zählt das CSS mit; die Reihenfolge trägt die Liste selbst (ol). */
.schritt::before {
    content: counter(schritt);
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--farbe-primaer);
    background: var(--farbe-weiss);
    border-radius: 50%;
    box-shadow: 0 0.1rem 0.4rem rgb(0 0 0 / 0.2);
}

.schritt img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 2;
    object-fit: cover;
}

.schritt-text {
    padding: 1.25rem 1.5rem 1.5rem;
    text-align: center;
}

.schritt-text h3 {
    margin-bottom: 0.4em;
}

.schritt-text p {
    margin: 0;
}

@media (min-width: 56rem) {
    .schritte {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .schritt--quer {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
        align-items: center;
    }

    .schritt--quer img {
        height: 100%;
        aspect-ratio: 1;
    }

    .schritt--quer .schritt-text {
        padding: 1.5rem 2.5rem;
        text-align: left;
    }
}

/* Vier weiße Kacheln: Zeichen oder Zahl, darunter der Text. */
.vorteile {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 0;
}

@media (min-width: 56rem) {
    .vorteile {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.vorteile li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem;
    text-align: center;
    background: var(--farbe-weiss);
    border-radius: 1rem;
}

.vorteil-bild {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 3.5rem;
}

.vorteil-bild .symbol {
    width: 3.25rem;
    height: 3.25rem;
}

.vorteil-zahl {
    font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
    font-weight: 700;
    line-height: 1;
}

.vorteil-einheit {
    font-size: 0.55em;
}

.vorteil-text {
    font-weight: 700;
    line-height: 1.3;
}

/* Blaue Karte mit dem Video rechts: "Kunden über uns" (Folie 8). */
.videokarte {
    display: grid;
    overflow: hidden;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
    border-radius: var(--radius-karte);
}

.videokarte-text {
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

.videokarte-text h3 {
    color: var(--farbe-weiss);
}

.videokarte .video {
    border-radius: 0;
}

/* Das Video bleibt bei 16 : 9 und steht mittig. Auf die Höhe des Textes gestreckt, schnitte
   object-fit: cover auch das laufende Video seitlich ab - zwischen 56rem und 72rem, wo der Text
   umbricht, bis zu einem Drittel (Review, 2026-10-02). Ist der Text höher, bleibt über und unter
   dem Video Blau stehen. */
@media (min-width: 56rem) {
    .videokarte {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        align-items: center;
    }

    .videokarte-text {
        text-align: right;
    }
}

/* --- "Übergeben Sie Ihre Kunden in gute Hände" (Folie 8): zentriert, breiter Button ohne Pfeil. */
.aufruf {
    max-width: 52rem;
    margin: 0 auto;
    text-align: center;
}

.aufruf p {
    font-size: var(--groesse-h3);
}

.aufruf .knopf {
    justify-content: center;
    width: min(100%, 36rem);
}

/* --- Stimmen der Makler (Folie 9): weiße Karten mit blauem Rand und Anführungszeichen. */
.stimmen {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.stimme {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 4.75rem 1.75rem 1.75rem;
    background: var(--farbe-weiss);
    border: 1px solid var(--farbe-primaer);
    border-radius: 0.5rem;
    box-shadow: var(--schatten-karte);
}

.stimme::before {
    content: "\201D";
    position: absolute;
    left: 1.5rem;
    top: 0;
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
}

.stimme blockquote {
    margin: 0 0 1.25rem;
}

.stimme blockquote p:last-child {
    margin-bottom: 0;
}

.stimme figcaption {
    margin-top: auto;
    font-weight: 700;
}

.stimme-name {
    display: block;
    font-size: 1.125rem;
}

.stimme-ort {
    display: block;
    font-size: var(--groesse-klein);
}

/* --- Newsletter-Band (Folie 10; Text auch auf Folie 37): Zeichen links, Text rechts. */
/* Live Events (Folie 37): dieselbe Fläche wie "Jetzt Policen Direkt Makler kennenlernen" (Folie 9). */
.newsletter--tiefblau {
    background: var(--farbe-tiefblau);
}

.newsletter-raster {
    display: grid;
    gap: 1.5rem;
}

.newsletter .zeichen {
    width: 5rem;
    height: 5rem;
    color: var(--farbe-weiss);
}

.newsletter h2 {
    font-size: var(--groesse-h2);
}

.newsletter-dachzeile {
    display: block;
    margin-bottom: 0.35em;
    font-size: 0.8em;
}

.newsletter-text p {
    margin-bottom: 0.5em;
}

.newsletter-text .newsletter-schluss {
    margin-top: 1.25em;
}

@media (min-width: 56rem) {
    .newsletter-raster {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        gap: 2rem;
    }

    .newsletter .zeichen {
        width: 6.5rem;
        height: 6.5rem;
    }
}

/* ===== Modellseiten (Folien 12 bis 23) =================================================== */

/* Dachzeile in der Überschrift der Lebensrente mit Anzahlung (Folie 20). */
.dachzeile {
    display: block;
    margin-bottom: 0.25em;
    font-size: 0.62em;
}

/* Abstand zwischen den Blöcken auf der hellen Fläche oben. */
:is(.ablauf, .konditionen, .sinnvoll, .beispielrechnung) {
    margin-top: 2rem;
}

/* --- Blauer Kopf mit Foto (Folien 12, 17, 20). Schmal steht das Foto oben. */
.modellkopf {
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
}

.modellkopf-text {
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
}

.modellkopf-text h2 {
    margin: 1rem 0 1.25rem;
    color: var(--farbe-weiss);
}

.modellkopf-text .liste-quadrat {
    font-size: 1.125rem;
}

.modellkopf-bild {
    display: block;
    order: -1;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 50% 20%;
}

@media (min-width: 56rem) {
    .modellkopf {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }

    .modellkopf-bild {
        order: 0;
        aspect-ratio: auto;
    }
}

/* Gegenfarbe der Modellzeichen auf Blau: Euro und Grund in Königsblau, der Bogen des Mix-Zeichens
   hell. */
.zeichen--auf-blau .zeichen-aussparung {
    stroke: var(--farbe-primaer);
}

.zeichen--auf-blau .zeichen-grund {
    fill: var(--farbe-primaer);
}

.zeichen--auf-blau .zeichen-hell {
    stroke: rgb(255 255 255 / 0.6);
}

/* --- Ablauf mit Ziffern im Kreis (Folien 12, 17, 20) */
.ablauf {
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    background: var(--farbe-flaeche-kraeftig);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
}

.ablauf h2 {
    font-size: var(--groesse-h3);
}

.ablauf-schritte {
    list-style: none;
    counter-reset: ablauf;
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding: 0;
}

.ablauf-schritt,
.ablauf-abschluss {
    position: relative;
    min-height: 2.75rem;
    margin: 0;
    padding-left: 4rem;
    font-size: 1.125rem;
    line-height: 1.45;
}

.ablauf-schritt {
    counter-increment: ablauf;
}

.ablauf-schritt::before {
    content: counter(ablauf);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    font-weight: 700;
    border: 3px solid var(--farbe-primaer);
    border-radius: 50%;
    background: var(--farbe-weiss);
}

.ablauf-abschluss {
    margin-top: 1rem;
}

/* Haken ohne eigenen Text sitzt unter der Ziffer des letzten Schritts (Folien 12, 20). */
.ablauf-schritt--haken {
    min-height: 6rem;
}

.ablauf-haken {
    position: absolute;
    left: 0;
    bottom: 0;
    line-height: 0;
}

.ablauf-abschluss .ablauf-haken {
    top: 0;
    bottom: auto;
}

.ablauf-haken .symbol {
    width: 2.75rem;
    height: 2.75rem;
}

/* --- "Attraktive Konditionen" und "Vorteile" (Folien 12, 17, 21) */
.konditionen {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 56rem) {
    .konditionen {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.konditionen-karte {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--farbe-weiss);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
}

.konditionen-karte--blau {
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
}

.konditionen-karte--blau h2 {
    color: var(--farbe-weiss);
}

.konditionen-karte .zeichen {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1rem;
}

.konditionen-karte h2 {
    font-size: var(--groesse-h2);
}

.konditionen-karte .liste-quadrat {
    font-size: 1.125rem;
}

.konditionen-zwischen {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.125rem;
}

.knopf-zeile--mitte {
    justify-content: center;
}

/* --- "… ist für Sie sinnvoll, wenn …" */
.sinnvoll h2 {
    font-size: var(--groesse-h3);
}

.sinnvoll .liste-quadrat {
    margin-bottom: 0;
    font-size: 1.125rem;
}

/* --- Umdeckung und Fahrzeugwechsel (Folien 13, 22): Kopf blau, Inhalt blaugrau, Pfeil, Haken.

   Breit teilen sich die beiden Karten die Zeilen Kopf, Text, Pfeil und Ergebnis (subgrid): So
   stehen Pfeile und Haken in beiden Karten auf einer Höhe, auch wenn der Text der einen kürzer
   ist (Feedback Tajana 2026-10-12). Ein Rest Abstand zwischen Text und Pfeil bleibt dann nur in
   der Karte mit dem kürzeren Text, so viel, wie ihr zur längeren fehlt. Schmal stehen die Karten
   untereinander, jede für sich. */
.umdeckungen {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 56rem) {
    .umdeckungen {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        row-gap: 0;
    }

    .umdeckungen .umdeckung {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
    }

    .umdeckungen .umdeckung-inhalt {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
    }
}

.umdeckung {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
}

/* Weiß auf #5685bf (Fahrzeugwechsel) hat 3,8 : 1 - genug für große fette Schrift (WCAG: 3 : 1). */
.umdeckung-kopf {
    margin: 0;
    padding: 1.25rem 1.5rem;
    font-size: var(--groesse-h3);
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
}

.umdeckung--hell .umdeckung-kopf {
    background: var(--farbe-sekundaer);
}

.umdeckung-inhalt {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    font-size: 1.125rem;
    background: var(--farbe-umdeckung);
}

.umdeckung--hell .umdeckung-inhalt {
    background: var(--farbe-fahrzeugwechsel);
}

.umdeckung-inhalt .zeichen {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    color: var(--farbe-primaer);
}

.umdeckung--hell .umdeckung-inhalt .zeichen {
    color: var(--farbe-sekundaer);
}

.umdeckung-ergebnis {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin: 0;
}

.umdeckung-haken {
    flex: none;
    line-height: 0;
}

.umdeckung-haken .symbol {
    width: 2.75rem;
    height: 2.75rem;
}

/* --- "Warum Policen Direkt" (Folien 15, 18, 23): Rosette links, Häkchen, Button rechts. */
.warum {
    display: grid;
    gap: 1rem 1.5rem;
    margin-bottom: 2rem;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--farbe-flaeche-mittel);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
}

@media (min-width: 48rem) {
    .warum {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }
}

.warum-rosette .symbol {
    width: 4.5rem;
    height: 4.5rem;
}

.warum h2 {
    font-size: var(--groesse-h3);
}

.liste-haken {
    list-style: none;
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
}

.liste-haken > li {
    position: relative;
    padding-left: 1.75rem;
}

/* Haken wie auf Folie 15 - mit Rahmenlinien, das Zeichen ✓ fehlt in Libre Franklin. */
.liste-haken > li::before {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.2em;
    width: 0.4em;
    height: 0.8em;
    border-right: 0.15em solid currentColor;
    border-bottom: 0.15em solid currentColor;
    transform: rotate(45deg);
}

/* --- Rechenbeispiel "Lebensrente 100" (Folie 14): Überschrift auf Weiß, blaues Band, Kasten. */
.rechenbeispiel {
    padding-bottom: var(--abstand-abschnitt);
}

.rechenbeispiel-band {
    padding-block: 2.5rem;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
}

.rechenbeispiel-band h3 {
    color: var(--farbe-weiss);
}

/* minmax(0, 1fr) auch schmal: sonst wächst die Spalte mit der Tabelle über den Rand. */
.rechenbeispiel-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem 3rem;
}

@media (min-width: 64rem) {
    .rechenbeispiel-raster {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    }
}

.annahmen {
    width: 100%;
    border-collapse: collapse;
    align-self: start;
}

.annahmen th,
.annahmen td {
    padding: 0.6rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

/* Außen bündig mit Überschrift und Diagramm - und schmal 16 px mehr Platz. */
.annahmen tr > :first-child {
    padding-left: 0;
}

.annahmen tr > :last-child {
    padding-right: 0;
}

.annahmen thead th {
    padding-bottom: 2rem;
    font-size: var(--groesse-h3);
}

@media (min-width: 30rem) {
    .annahmen thead th {
        white-space: nowrap;
    }
}

/* Schmal bricht "Gesamtbestandscourtage" am weichen Trennzeichen im Markup um, die Beträge
   bleiben beisammen. */
.annahmen tbody th {
    font-weight: 400;
}

.annahmen td {
    white-space: nowrap;
}

.annahmen tbody tr {
    border-top: 2px solid var(--farbe-weiss);
}

.annahmen tbody tr:last-child {
    border-bottom: 2px solid var(--farbe-weiss);
}

.vergleichskasten {
    margin-top: 2rem;
    padding: 1.25rem clamp(1.25rem, 0.5rem + 4vw, 5rem);
    color: var(--farbe-primaer);
    background: var(--farbe-vergleich);
    border-radius: 0.5rem;
}

.vergleichskasten h3 {
    margin-bottom: 0.4em;
    color: var(--farbe-primaer);
}

.vergleichskasten .liste-quadrat {
    margin: 0;
}

.fussnote {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0 2rem;
    font-size: var(--groesse-klein);
    font-style: italic;
}

.fussnote-zeichen {
    flex: none;
}

/* --- Beispielrechnungen der Lebensrente mit Anzahlung (Folien 21, 22) */
.beispielrechnung h2,
.beispiel-titel {
    font-size: var(--groesse-h3);
}

.beispiel-annahmen {
    font-size: 1.125rem;
}

.beispiel-stichwort {
    font-size: var(--groesse-h3);
}

/* Orange auf Weiß hat 3,6 : 1 - hier große fette Schrift (mindestens 1,25rem, also über 18,66 px
   fett), dafür reicht 3 : 1. */
.beispiel-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 700;
}

.beispiel-kopf .symbol {
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.5rem;
    vertical-align: -0.3em;
}

.beispiel-einmalzahlung {
    color: var(--farbe-akzent);
}

.rechenbeispiel-titel {
    margin-top: 1rem;
}

/* --- Diagramme (Bausteine/Diagramm*.razor): SVG aus den Daten, Farben über Klassen. */
.diagramm {
    margin: 0;
}

.diagramm-svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: var(--schrift);
}

/* Schmal bleiben die beiden breiten Diagramme lesbar groß und lassen sich seitlich verschieben. */
.diagramm-rollbar {
    overflow-x: auto;
}

.diagramm--jahre .diagramm-zeichnung {
    min-width: 44rem;
}

.diagramm--kumuliert .diagramm-zeichnung {
    min-width: 34rem;
}

.d-achse {
    font-size: 17px;
    fill: var(--farbe-primaer);
}

.d-grundlinie {
    stroke: var(--farbe-feld-rahmen);
    stroke-width: 1.5;
}

.d-verlauf-anfang {
    stop-color: var(--farbe-flaeche-mittel);
}

.d-verlauf-ende {
    stop-color: var(--farbe-weiss);
}

.d-saeule-blau {
    fill: var(--farbe-primaer);
}

.d-saeule-orange {
    fill: var(--farbe-diagramm-orange);
}

.d-wert-senkrecht {
    font-size: 14px;
    fill: var(--farbe-primaer);
}

.d-kategorie-schraeg {
    font-size: 14px;
    fill: var(--farbe-primaer);
}

.d-wert-innen {
    font-size: 20px;
    fill: var(--farbe-weiss);
}

.d-wert-innen--auf-orange {
    fill: var(--farbe-auf-diagramm-orange);
}

.d-summe {
    font-size: 24px;
    font-weight: 700;
    fill: var(--farbe-primaer);
}

.d-kategorie-dunkel {
    font-size: 18px;
    font-weight: 700;
    fill: var(--farbe-primaer);
}

/* Rechenbeispiel "Lebensrente 100": Weiß und Cyan auf dem blauen Band. */
.diagramm--lr100 {
    display: grid;
    gap: 1.25rem;
    align-items: center;
}

@media (min-width: 40rem) {
    .diagramm--lr100 {
        grid-template-columns: minmax(0, 1fr) 10rem;
    }
}

.diagramm--lr100 .d-achse {
    font-size: 21px;
    fill: var(--farbe-weiss);
}

.d-gitter {
    stroke: rgb(255 255 255 / 0.85);
    stroke-width: 1.5;
}

.d-saeule-cyan {
    fill: var(--farbe-diagramm-cyan);
}

.d-grund {
    fill: var(--farbe-primaer);
}

.d-wert {
    font-size: 26px;
    font-weight: 700;
    fill: var(--farbe-weiss);
}

.d-einheit {
    font-size: 17px;
}

/* Im Mock-up ist das Kästchen leer und der Faktor steht weiß auf dem Cyan (2,5 : 1); mit der
   blauen Füllung hat er 9,3 : 1. */
.d-faktor {
    fill: var(--farbe-primaer);
    stroke: var(--farbe-weiss);
    stroke-width: 2;
}

.d-faktor-text {
    font-size: 20px;
    font-weight: 700;
    fill: var(--farbe-weiss);
}

.d-kategorie {
    font-size: 22px;
    font-weight: 700;
    fill: var(--farbe-weiss);
}

/* Die Legende steht im Mock-up teils in Cyan; auf dem Blau hätte das nur 3,8 : 1, zu wenig für die
   kleine Schrift - deshalb Weiß. */
.diagramm-legende {
    list-style: none;
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    font-size: var(--groesse-klein);
    line-height: 1.35;
}

.diagramm-legende li {
    display: flex;
    gap: 0.6rem;
}

.legende-saeule,
.legende-faktor {
    flex: none;
    width: 1rem;
    height: 2.5rem;
}

.legende-saeule {
    background: var(--farbe-diagramm-cyan);
}

.legende-faktor {
    border: 2px solid var(--farbe-weiss);
}

/* Linksbündige Zitatkarte (Folie 15): Zitat und Quelle linksbündig, die Quelle größer. Das Foto
   (Feedback Bettina 2026-10-12) steht links unter dem Zitat, der Name rechts daneben (Wunsch
   Bettina 2026-10-14) - schon ab 30rem, weil der Name kurz ist; auf schmalen Handys darunter. */
.zitat--links blockquote {
    text-align: left;
}

.zitat--links .zitat-quelle {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
    font-size: var(--groesse-h3);
    text-align: left;
}

@media (min-width: 30rem) {
    .zitat--links .zitat-quelle {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }
}

/* ===== Übertragung, Kunden, Über uns (Folien 25 bis 35) ================================== */

/* Etwas größerer Einleitungstext unter Überschriften (Folien 25, 30, 34). */
.einleitung {
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
}

.einleitung--eng {
    margin-bottom: 0.3em;
}

.zentriert {
    text-align: center;
}

.kennzahlen + .einleitung {
    margin-top: 1.5rem;
}

/* --- Übertragungsschritte (Folien 25, 26): Ziffer im Kreis links, Karte aus blauem Titelblock mit
   Reiter und blaugrauen Punkten, darunter ein Dreieck zum nächsten Schritt. Schmal steht der
   Titelblock über den Punkten und die Ziffer weiß im Titelblock - links daneben bliebe für den
   Text sonst kaum Platz. */
.prozess {
    list-style: none;
    counter-reset: prozess;
    display: grid;
    gap: 3rem;
    margin: 2.5rem 0 0;
    padding: 0;
}

.prozess-schritt {
    counter-increment: prozess;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.prozess-schritt::before {
    content: counter(prozess);
    position: absolute;
    left: 0.9rem;
    top: 2.35rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--farbe-primaer);
    background: var(--farbe-weiss);
    border-radius: 50%;
    font-size: 1.125rem;
    font-weight: 700;
}

.prozess-schritt:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.5rem;
    border-left: 3rem solid transparent;
    border-right: 3rem solid transparent;
    border-top: 1.5rem solid var(--farbe-flaeche-kraeftig);
    transform: translateX(-50%);
}

.prozess-kopf {
    overflow: hidden;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
    border-radius: var(--radius-karte) var(--radius-karte) 0 0;
}

.prozess-dauer {
    margin: 0;
    padding: 0.2rem 1rem;
    color: var(--farbe-primaer);
    background: var(--farbe-reiter);
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
}

.prozess-titel {
    margin: 0;
    padding: 1rem 1.25rem 1.25rem 4rem;
    color: var(--farbe-weiss);
}

.prozess-punkte.liste-quadrat {
    margin: 0;
    padding: 1.25rem 1.25rem 1.5rem;
    background: var(--farbe-flaeche-kraeftig);
    border-radius: 0 0 var(--radius-karte) var(--radius-karte);
    font-size: 1.0625rem;
}

@media (min-width: 56rem) {
    .prozess-schritt {
        grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
        padding-left: 6rem;
    }

    .prozess-schritt::before {
        left: 0;
        top: 1.5rem;
        width: 4.25rem;
        height: 4.25rem;
        color: var(--farbe-weiss);
        background: var(--farbe-primaer);
        font-size: 1.5rem;
    }

    .prozess-titel {
        padding-left: 1.25rem;
        text-align: center;
    }

    .prozess-schritt:not(:last-child)::after {
        left: calc((100% + 6rem) / 2);
    }

    .prozess-kopf {
        border-radius: var(--radius-karte) 0 0 var(--radius-karte);
    }

    .prozess-punkte.liste-quadrat {
        padding: 1.5rem 2rem 1.75rem;
        border-radius: 0 var(--radius-karte) var(--radius-karte) 0;
    }
}

/* --- "Unser Maklerportal" (Folie 26): die ganze Stage blau. Breit rechts die Anmeldeseite des
   Portals, schmal nur der Text (Feedback Bettina 2026-10-12: "Mobil ist ok").

   Breit teilen sich Text und Bild die Stage 40 : 60 (Feedback Tajana 2026-10-12). Das Bild füllt
   seinen Teil oben, unten und rechts bis zum Rand, die Rundung der Stage schneidet es ab. Die Höhe
   der Stage gibt das Bild in seinem Seitenverhältnis vor; der Text ist dafür niedrig genug
   (Überschrift in h2-Größe, sonst bräche "Maklerportal" in der schmalen Spalte um), damit das Bild
   ganz zu sehen ist. Gemessen von 1024 bis 2560 px Breite: Bild 247 bis 295 px hoch und ganz
   sichtbar, Text 202 bis 208 px. Wird der Text doch höher (große Schrifteinstellung), schneidet
   object-fit rechts einen Streifen ab statt das Bild zu verzerren. Der Schatten der Karten zeigt
   die Kante auch dort, wo der weiße Kopf des Bildschirmfotos an den weißen Grund stößt. */
.portal-stage {
    overflow: hidden;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
}

.portal-stage-text {
    padding: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1rem + 3vw, 4rem);
}

.portal-stage h3 {
    margin-bottom: 0.4em;
    color: var(--farbe-weiss);
    font-size: var(--groesse-h1);
}

.portal-stage p {
    max-width: 40rem;
    margin: 0;
    font-size: var(--groesse-h3);
}

.portal-stage-bild {
    display: none;
}

@media (min-width: 64rem) {
    .portal-stage {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .portal-stage-text {
        align-self: center;
        padding: 1.5rem 2rem 1.5rem clamp(1.5rem, 1rem + 3vw, 4rem);
    }

    .portal-stage h3 {
        font-size: var(--groesse-h2);
    }

    .portal-stage-bild {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center;
    }
}

/* --- Was das Maklerportal leistet (Folie 27): blaue Kopfleiste mit Pfeil, Punkte auf Blaugrau. */
/* minmax(0, 1fr): sonst wüchse die Spalte schmal mit der längsten Kopfzeile über den Rand. */
.infobloecke {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

.infoblock {
    background: var(--farbe-flaeche-kraeftig);
}

.infoblock-kopf {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0.8rem 1.25rem;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
}

.infoblock-kopf .zeichen {
    width: 2.5rem;
    height: 2.5rem;
}

.infoblock .liste-quadrat {
    margin: 0;
    padding: 1.25rem 1.5rem 1.5rem clamp(1.25rem, 0.5rem + 4vw, 5rem);
    font-size: 1.0625rem;
}

/* --- Runde Porträts (Folien 27, 29), Baustein Teamraster. */
.teamkasten {
    padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
    background: var(--farbe-flaeche-kraeftig);
    border-radius: 0.75rem;
}

.team {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
    margin: 0;
    padding: 0;
    text-align: center;
}

@media (min-width: 48rem) {
    .team:not(.team--auf-blau) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Rund auch, wenn die Spalte schmaler ist als 8rem (Team Maklerbetreuung bei 320 px): die Breite
   folgt der Spalte, die Höhe der Breite - mit fester Höhe wurden die Fotos dort oval. Gilt auch für
   den Button, wenn das Foto einen Steckbrief öffnet. */
.team-foto {
    display: block;
    width: 8rem;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    object-fit: cover;
}

/* Lange Bereiche tragen weiche Trennzeichen (Teams.cs); break-word fängt ab, was dann noch nicht
   in die Spalte passt. */
.team-angaben {
    margin: 0;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.team-angaben > span {
    display: block;
}

.team-bereich,
.team-rolle,
.team-name {
    font-weight: 700;
}

/* Auf Blau (Folie 29): immer zwei mal zwei, der Bereich in normaler Stärke. */
.team--auf-blau {
    color: var(--farbe-weiss);
}

.team--auf-blau .team-foto {
    width: 7rem;
}

.team--auf-blau .team-bereich {
    font-weight: 400;
}

/* --- Kopf "Ihre Kunden in guten Händen" (Folie 29): Text links, Foto rechts, schmal untereinander. */
.kunden-held {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.kunden-held-bild {
    display: block;
    width: 100%;
    max-width: 36rem;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
}

@media (min-width: 56rem) {
    .kunden-held {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: 3rem;
    }
}

/* --- "So läuft Ihre Kundenübergabe ab" (Folie 29): zwei Karten mit Foto, Ziffer oben links. */
.uebergabe {
    list-style: none;
    counter-reset: uebergabe;
    display: grid;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

@media (min-width: 56rem) {
    .uebergabe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.uebergabe-karte {
    counter-increment: uebergabe;
    position: relative;
    overflow: hidden;
    background: var(--farbe-weiss);
    border-radius: 0.75rem;
    box-shadow: var(--schatten-karte);
}

.uebergabe-karte::before {
    content: counter(uebergabe);
    position: absolute;
    left: 1rem;
    top: 1rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
}

.uebergabe-karte img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 2;
    object-fit: cover;
}

.uebergabe-text {
    padding: 1.25rem clamp(1.25rem, 1rem + 1.5vw, 2rem) 1.75rem;
}

.uebergabe-text h3 {
    font-size: 1.25rem;
}

.uebergabe-text p:last-child {
    margin-bottom: 0;
}

/* --- Schritt 3 auf Blau (Folie 29): weiße Ziffer, zwei Kennzahl-Karten, Porträts rechts. */
.experten-titel {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.experten-nummer {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    color: var(--farbe-primaer);
    background: var(--farbe-weiss);
    border-radius: 50%;
    font-size: 1.5rem;
}

.experten {
    display: grid;
    gap: 2.5rem;
    margin-top: 2rem;
}

@media (min-width: 64rem) {
    .experten {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: start;
        gap: 4rem;
    }
}

.kennzahl-karten {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1.25rem;
    margin: 0 0 2rem;
    padding: 0;
}

.kennzahl-karten li {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    color: var(--farbe-primaer);
    background: var(--farbe-weiss);
    border-radius: 0.5rem;
}

.kennzahl-karte-wert {
    font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.kennzahl-karte-text {
    font-weight: 700;
    line-height: 1.3;
}

/* --- "Nah am Kunden. Stark im Service." (Folie 30): drei weiße Karten mit Icon. */
.leistungen {
    list-style: none;
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0 0;
    padding: 0;
}

@media (min-width: 56rem) {
    .leistungen {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.leistung {
    padding: 1.5rem;
    background: var(--farbe-weiss);
    border-radius: 0.75rem;
}

.leistung :is(.symbol, .zeichen) {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
}

.leistung h3 {
    font-size: 1.25rem;
}

.leistung .liste-quadrat {
    margin: 0;
}

/* --- Versicherungsmanager (Folie 30): Überschrift auf Weiß, blaues Band mit Smartphone. */
.manager {
    padding-top: var(--abstand-abschnitt);
}

.manager-band {
    margin-top: 1.5rem;
    padding-block: 2.5rem;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
}

.manager-band h3 {
    color: var(--farbe-weiss);
}

.manager-raster {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.manager-bild {
    display: block;
    width: min(15rem, 70%);
    height: auto;
    margin: 0 auto;
}

.manager-text .liste-quadrat {
    font-size: 1.125rem;
}

@media (min-width: 56rem) {
    .manager-raster {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 3rem;
    }

    .manager-bild {
        width: min(17rem, 100%);
    }
}

.bewertungen {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
}

.bewertungen img {
    display: block;
    width: auto;
    height: 4rem;
}

/* --- "Übergeben Sie Ihre Kunden in gute Hände" als Kasten (Folie 30). */
.aufruf--kasten {
    max-width: none;
    padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(1.25rem, 1rem + 3vw, 4rem);
    background: var(--farbe-flaeche-mittel);
}

/* --- Kopf "Über uns" (Folie 32): Teamfoto, darunter der blaue Kasten mit zwei Haken. Schmal
   schneidet das Foto seitlich, damit die Personen nicht winzig werden. */
.ueber-teamfoto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2.2;
    object-fit: cover;
}

@media (min-width: 48rem) {
    .ueber-teamfoto {
        aspect-ratio: auto;
    }
}

.ueber-kasten {
    padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem) clamp(1.25rem, 0.75rem + 3vw, 3rem);
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
}

.ueber-kasten h2 {
    color: var(--farbe-weiss);
    font-size: clamp(1.3125rem, 1.1rem + 0.8vw, 1.75rem);
}

.ueber-haken {
    list-style: none;
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.ueber-haken li {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.ueber-haken .symbol {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: 0.2rem;
}

.ueber-haken p {
    margin: 0;
}

/* --- "Was uns einzigartig macht" (Folie 32) */
.einzigartig {
    padding: clamp(1.25rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 0.75rem + 3vw, 3rem);
    background: var(--farbe-flaeche-mittel);
    border-radius: 0.75rem;
}

.einzigartig-kern {
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
    font-weight: 700;
    line-height: 1.35;
}

.einzigartig .liste-quadrat {
    margin: 0;
}

/* --- Geschäftsleitung (Folie 32): Foto mit runden oberen Ecken, darunter weiße Textkarte.
   Der LinkedIn-Button sitzt unten im Foto, sobald eine Adresse eingetragen ist (Teams.cs).
   Karten 22rem breit statt 34rem, also gut ein Drittel kleiner (Feedback Bettina 2026-10-12:
   "mind. 1/3 bis Hälfte kleiner"); breit stehen die zwei mittig nebeneinander. */
.leitung {
    list-style: none;
    display: grid;
    gap: 2rem;
    margin: 0 0 var(--abstand-abschnitt);
    padding: 0;
}

@media (min-width: 48rem) {
    .leitung {
        grid-template-columns: repeat(2, minmax(0, 22rem));
        justify-content: center;
        gap: 3rem;
    }
}

.leitung-karte {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 22rem;
    margin: 0 auto;
}

.leitung-bild {
    position: relative;
}

.leitung-bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 2rem 2rem 0 0;
}

.leitung-linkedin {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.25rem;
    color: var(--farbe-primaer);
    background: var(--farbe-weiss);
    border-radius: var(--radius-knopf);
    font-weight: 600;
    text-decoration: none;
    transform: translateX(-50%);
}

.leitung-linkedin .symbol {
    width: 1.1rem;
    height: 1.1rem;
}

.leitung-text {
    flex: 1;
    padding: 1.25rem 1.5rem 1.5rem;
    text-align: center;
    background: var(--farbe-weiss);
    box-shadow: var(--schatten-karte);
}

.leitung-text h3 {
    margin-bottom: 0.4em;
    font-size: 1.25rem;
    line-height: 1.3;
}

.leitung-text p {
    margin: 0;
}

/* --- Gründer (Folie 33): drei Karten, Foto oben. */
.gruender {
    list-style: none;
    display: grid;
    gap: 1.5rem;
    margin: 0 0 var(--abstand-abschnitt);
    padding: 0;
}

@media (min-width: 56rem) {
    .gruender {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gruender-karte {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--farbe-weiss);
    border-radius: 1rem 1rem 0 0;
    box-shadow: var(--schatten-karte);
}

.gruender-karte img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center top;
}

.gruender-text {
    padding: 1rem 1.25rem 1.5rem;
}

.gruender-text h3 {
    margin-bottom: 0.3em;
    font-size: 1.375rem;
    text-align: center;
}

.gruender-text p {
    margin: 0;
}

/* --- Policen Direkt Gruppe (Folie 33): Dach mit der Holding, blauer Text, zwei Zweige. */
.gruppe {
    padding: clamp(1rem, 0.75rem + 1.5vw, 2rem);
    background: var(--farbe-weiss);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
}

/* Dach als Fünfeck: oben die Spitze, unten ein Streifen, in dem der Text auch schmal Platz hat. */
.gruppe-dach {
    margin: 0;
    padding: 2.75rem 1rem 0.5rem;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
    clip-path: polygon(50% 0, 100% 55%, 100% 100%, 0 100%, 0 55%);
    line-height: 1.3;
    text-align: center;
}

/* Ein Bildpunkt Überlappung: die geglättete Unterkante des Dachs ließ sonst eine helle Linie stehen. */
.gruppe-text {
    margin: -1px 0 0;
    padding: 0.5rem clamp(1rem, 0.75rem + 1.5vw, 1.5rem) 1.25rem;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
    border-radius: 0 0 0.75rem 0.75rem;
}

.gruppe-zweige {
    display: grid;
    gap: 2rem;
    margin-top: 1.75rem;
}

@media (min-width: 56rem) {
    .gruppe-zweige {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gruppe-zweig {
    position: relative;
}

/* Pfeil vom Text zum Zweig - schmückend. */
.gruppe-zweig::before {
    content: "";
    position: absolute;
    left: calc(50% - 0.5rem);
    top: -1.35rem;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-top: 0.75rem solid var(--farbe-primaer);
}

.gruppe-label {
    margin: 0 0 1rem;
    padding: 0.35rem 1rem;
    font-size: 1.0625rem;
    text-align: center;
    background: var(--farbe-zweig-makler);
    border-radius: 0.35rem;
}

.gruppe-zweig--portale .gruppe-label {
    background: var(--farbe-zweig-portale);
}

/* Schmal untereinander: zwei Firmen nebeneinander ließen dem Text unter 36rem zu wenig Platz.
   Beide Zweige in einem Kasten gleichen Abstands - so stehen die Logos auf einer Höhe. */
.gruppe-firmen {
    list-style: none;
    display: grid;
    gap: 1.5rem 1rem;
    margin: 0;
    padding: 1rem;
    text-align: center;
    background: var(--farbe-zweig-makler-flaeche);
    border-radius: 0.5rem;
}

@media (min-width: 36rem) {
    .gruppe-firmen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gruppe-zweig--portale .gruppe-firmen {
    background: var(--farbe-zweig-portale-flaeche);
}

/* Jedes Logo mittig in einer gleich hohen Zeile, der Text darunter beginnt überall auf einer
   Linie. multiply: das Weiß hinter den Logos verschwindet auf der Fläche der Kästen. */
.gruppe-firmen li {
    display: grid;
    grid-template-rows: 3.5rem auto;
    row-gap: 0.75rem;
}

.gruppe-logo {
    display: block;
    align-self: center;
    justify-self: center;
    width: auto;
    max-width: 100%;
    height: 3rem;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Gleiche Fläche statt gleicher Höhe (Feedback Bettina 2026-10-12: Aventus und covomo waren zu
   groß): bezogen auf das eigentliche Logo ohne den weißen Rand der Dateien rund 4700 px² je
   Logo. policen direkt bleibt bei 3rem - die Datei hat oben und unten viel Rand. Thinksurance
   füllt die Zeile ganz: sein Schriftzug ist neben dem Würfel klein. */
.gruppe-logo--aventus {
    height: 2.25rem;
}

.gruppe-logo--covomo {
    height: 1.85rem;
}

.gruppe-logo--thinksurance {
    height: 3.5rem;
}

.gruppe-firmen p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* --- "Wir leben Unternehmertum" (Folie 33): blauer Text links, Foto rechts, schmal untereinander. */
.unternehmertum {
    display: grid;
    overflow: hidden;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
    border-radius: var(--radius-karte);
}

.unternehmertum-text {
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    font-size: 1.1875rem;
}

.unternehmertum-text p {
    margin: 1.25rem 0 0;
}

.unternehmertum-bild {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (min-width: 56rem) {
    .unternehmertum {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    }

    .unternehmertum-bild {
        aspect-ratio: auto;
    }
}

/* --- Werte (Folie 34): Schlüsselwort fett, Icon links neben dem Text. Die Icons sind PNG mit
   weißem Grund; multiply macht das Weiß durchsichtig, wie PowerPoint es tut. */
.werte {
    list-style: none;
    display: grid;
    gap: 1.5rem 2.5rem;
    margin: 0;
    padding: 0;
}

@media (min-width: 56rem) {
    .werte {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Ganz schmal steht das Icon über dem Text - neben ihm passten Wörter wie
   "Versicherungswirtschaft" nicht in die Karte. */
.wert {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    padding: 1rem 1.5rem 1.25rem;
    background: var(--farbe-werte);
    border-radius: 0.75rem;
    box-shadow: var(--schatten-karte);
}

@media (min-width: 30rem) {
    .wert {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }
}

.wert h3 {
    grid-column: 1 / -1;
    margin: 0;
    font-weight: 400;
}

.wert h3 strong {
    font-weight: 700;
}

.wert-bild {
    width: 3.5rem;
    height: auto;
    mix-blend-mode: multiply;
}

.wert p {
    margin: 0;
    overflow-wrap: break-word;
}

/* --- Zeitstrahl (Folie 34): breit sieben Spalten mit blauen Linien, die Linie vor 2017 kürzer,
   "…" steht für die Jahre dazwischen. Schmaler untereinander, um 90° gedreht: je Jahr eine Zeile
   mit blauer Linie oben, vor 2017 kürzer und mit "…" am Ende (Feedback Bettina 2026-10-12, vorher
   seitlich verschiebbar). */
.zeitstrahl {
    list-style: none;
    display: grid;
    margin: 1.5rem 0 0;
    padding: 0;
    background: var(--farbe-werte);
}

/* Die Jahresspalte wächst mit der Schrift der Jahreszahl: vier fette Ziffern sind in Libre
   Franklin bis 2,75em breit. Eine feste Breite (5rem) brach "2004" ab gut 890 px Fensterbreite
   mitten in der Zahl um. */
.zeitstrahl li {
    position: relative;
    display: grid;
    grid-template-columns: calc(2.8 * var(--groesse-h2)) minmax(0, 1fr);
    column-gap: 1rem;
    align-items: baseline;
    padding: 1rem 1.25rem 0.75rem;
    border-top: 3px solid var(--farbe-primaer);
    font-size: 0.9375rem;
}

.zeitstrahl li > p:not(.zeitstrahl-jahr) {
    grid-column: 2;
}

.zeitstrahl-jahr {
    grid-row: 1 / span 2;
}

@media (min-width: 72rem) {
    .zeitstrahl {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .zeitstrahl li {
        display: block;
        padding: 1.25rem 0.75rem 2.25rem;
        border-top: 0;
        border-left: 3px solid var(--farbe-primaer);
    }
}

.zeitstrahl p {
    margin: 0 0 0.5rem;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.zeitstrahl-jahr {
    font-size: var(--groesse-h2);
    font-weight: 700;
    white-space: nowrap;
    overflow-wrap: normal;
}

.zeitstrahl li.zeitstrahl-nach-luecke {
    border-top-color: transparent;
}

.zeitstrahl-nach-luecke::before {
    content: "";
    position: absolute;
    left: 0;
    top: -3px;
    width: 80%;
    border-top: 3px solid var(--farbe-primaer);
}

.zeitstrahl-luecke {
    position: absolute;
    right: 0.75rem;
    top: -0.6rem;
    font-weight: 700;
    line-height: 1;
}

@media (min-width: 72rem) {
    .zeitstrahl li.zeitstrahl-nach-luecke {
        border-left-color: transparent;
    }

    .zeitstrahl-nach-luecke::before {
        left: -3px;
        top: 0;
        width: auto;
        height: 80%;
        border-top: 0;
        border-left: 3px solid var(--farbe-primaer);
    }

    .zeitstrahl-luecke {
        right: auto;
        left: -0.6rem;
        top: auto;
        bottom: 0.25rem;
    }
}

/* --- "Wie entstand die Idee …" (Folie 35): Überschrift auf Weiß, blaues Band. */
.idee-band {
    padding-block: 2.5rem;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
}

.idee-band .liste-quadrat {
    gap: 1rem;
    margin: 0;
    font-size: 1.1875rem;
}

/* --- "Wie unterscheidet sich Policen Direkt von Pools?" (Folie 35) */
.pools {
    margin-bottom: var(--abstand-abschnitt);
    padding: clamp(1.25rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 0.75rem + 3vw, 3rem);
    background: var(--farbe-werte);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
}

.pools-titel {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    font-size: clamp(1.3125rem, 1.1rem + 0.8vw, 1.75rem);
}

.pools-titel .symbol {
    flex: none;
    width: 4rem;
    height: 4rem;
}

.pools .liste-quadrat {
    margin: 0;
    font-size: 1.125rem;
}

/* ===== Live Events und Presse (Folien 37, 39) ============================================ */

/* --- Aufklappbare Zeilen (details/summary): Veranstaltungen (Folie 37) und "Ältere
   Veröffentlichungen" (Folie 39). Der Pfeil rechts ist eine gedrehte Ecke aus zwei Rahmenlinien,
   wie beim Knopf; offen zeigt er nach oben. */
:is(.termin, .presse-aelter) > summary {
    position: relative;
    padding-right: 3.5rem;
    cursor: pointer;
    list-style: none;
}

:is(.termin, .presse-aelter) > summary::-webkit-details-marker {
    display: none;
}

:is(.termin, .presse-aelter) > summary::after {
    content: "";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    width: 0.7rem;
    height: 0.7rem;
    margin-top: -0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

:is(.termin, .presse-aelter)[open] > summary::after {
    margin-top: -0.15rem;
    transform: rotate(-135deg);
}

/* Unterzeile dicht unter der Überschrift, wie auf Folie 37. */
h1 + .unterzeile-schlicht {
    margin-top: -0.4em;
}

/* --- Veranstaltungen (Folie 37): weiße Zeilen zwischen blauen Linien; Titel, Datum, Ort in einer
   Zeile, schmal Datum und Ort unter dem Titel. Offen stehen Datum und Ort fett, wie im Mock-up. */
.termine {
    margin-top: 1.5rem;
    border-top: 2px solid var(--farbe-primaer);
}

.termin {
    background: var(--farbe-weiss);
    border-bottom: 2px solid var(--farbe-primaer);
}

/* Schmal: Titel oben, Datum und Ort darunter, beide dürfen umbrechen. */
.termin > summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    align-items: baseline;
    padding-block: 1.25rem;
    padding-left: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.termin-titel {
    flex: 1 0 100%;
    font-size: var(--groesse-h3);
    font-weight: 700;
    line-height: 1.3;
}

.termin-datum,
.termin-ort {
    font-size: 1.25rem;
}

.termin[open] :is(.termin-datum, .termin-ort) {
    font-weight: 700;
}

/* Breit in festen Spalten, damit Datum und Ort aller Zeilen untereinander stehen. Die Spalten
   tragen "27/28.10.2026" und "Frankfurt" auch fett und mit den Textabständen aus WCAG 1.4.12
   (0,12em Buchstaben, 0,16em Wörter): 11,2rem bzw. 7,1rem. */
@media (min-width: 48rem) {
    .termin > summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 11.5rem 8rem;
    }
}

.termin-inhalt {
    max-width: 54rem;
    padding: 0 clamp(1rem, 0.5rem + 2vw, 2.5rem) 1.75rem;
}

.termin-unterzeile {
    font-size: var(--groesse-h3);
    font-weight: 700;
    line-height: 1.3;
}

.termin-inhalt .liste-quadrat {
    margin-top: 1rem;
}

/* --- Presse (Folie 39): je Zeitraum eine Überschrift, darunter Karten im blauen Rahmen. */
.presse-zeitraum {
    margin: 2rem 0 1rem;
}

/* minmax(0, 1fr): sonst wächst die Spalte auf das längste Wort ("www.assekuranz-info-portal.de")
   und die Karten ragen bei 320 px in den Rand. */
.presse-liste {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin: 0;
    padding: 0;
}

.pressekarte {
    padding: 1.25rem clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
    border: 2px solid var(--farbe-primaer);
    border-radius: 0.75rem;
    overflow-wrap: break-word;
}

.pressekarte p {
    margin: 0 0 0.75rem;
}

.pressekarte p:last-child {
    margin-bottom: 0;
}

.pressekarte-medium,
.pressekarte-titel {
    font-weight: 700;
}

.presse-aelter {
    margin-top: 2.5rem;
    border-top: 2px solid var(--farbe-primaer);
    border-bottom: 2px solid var(--farbe-primaer);
}

.presse-aelter > summary {
    padding-block: 1.1rem;
    padding-left: 1rem;
    font-size: var(--groesse-h3);
    font-weight: 700;
}

.presse-aelter[open] {
    padding-bottom: 1.5rem;
}

.presse-aelter[open] > summary {
    margin-bottom: -1rem;
}

/* --- Studien (Folie 39): Karte auf Blaugrau, halbe Breite, mittig. */
.studie {
    display: grid;
    justify-items: center;
    gap: 1rem;
    max-width: 36rem;
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--farbe-flaeche);
    border-radius: 0.75rem;
}

.studie img {
    display: block;
    width: 8rem;
    height: auto;
    box-shadow: var(--schatten-karte);
}

.studie-titel {
    margin: 0;
    font-size: var(--groesse-h3);
    font-weight: 700;
    line-height: 1.4;
}

/* ===== Steckbriefe (Folien 43 bis 46) ==================================================== */

/* --- Das Foto als Button (SteckbriefKnopf). Größe, Rand und Rundung kommen von der Klasse des
   Fotos (person-foto, team-foto) bzw. von .leitung-bild, das Bild füllt den Button; nie breiter
   als die Spalte, wie die globale Regel für img. Dass es sich anklicken lässt, zeigt das Mock-up
   nicht; mit der Maus zeigen es Zeiger und ein Ring in der Textfarbe. */
.steckbrief-knopf {
    display: block;
    max-width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: none;
    font: inherit;
    cursor: pointer;
}

.steckbrief-knopf > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.steckbrief-knopf:hover {
    box-shadow: 0 0 0 3px currentColor;
}

.leitung-bild .steckbrief-knopf {
    width: 100%;
    border-radius: 2rem 2rem 0 0;
}

/* --- Der Dialog (SteckbriefDialog). Breite und Schrift im Verhältnis der Folie: Die Aufzählung
   steht dort in 18 pt, anderthalbmal so groß wie der Fließtext, auf rund 34 Zeichenbreiten. Die
   Rundung schneidet der Dialog selbst zu (overflow), Kopf und Aufzählung sind eckig. */
.steckbrief {
    width: min(52rem, 100% - 2 * var(--rand));
    max-width: none;
    max-height: calc(100% - 2 * var(--rand));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 0.75rem;
    color: var(--farbe-text);
    background: transparent;
    overflow: auto;
    overscroll-behavior: contain;
}

/* Abdunklung in Königsblau dunkel (#0b3277) - im Mock-up nicht gezeichnet. */
.steckbrief::backdrop {
    background: rgb(11 50 119 / 0.6);
}

/* Hinter einem offenen Steckbrief scrollt die Seite nicht mit. */
:root:has(.steckbrief:modal) {
    overflow: hidden;
}

/* Kopf auf #e7ebf5, alles mittig. Das X steht rechts oben neben dem Foto, über dem Namen - der
   Name darf also die ganze Breite nutzen (schmal braucht "Vertriebskoordinator" sie). */
.steckbrief-kopf {
    position: relative;
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    background: var(--farbe-flaeche-kraeftig);
}

/* Orange hätte auf #e7ebf5 nur 3,0 : 1, Königsblau 7,8 : 1. */
.steckbrief-kopf :focus-visible {
    outline-color: var(--farbe-primaer);
}

.steckbrief-schliessen-form {
    position: absolute;
    top: 1rem;
    right: 1rem;
    margin: 0;
}

/* X im Kreis wie im Mock-up (PPTX image94): das Schließen-Icon aus Symbol, der Kreis ist ein Rahmen.
   Im Icon der Folien misst das Kreuz rund 40 % des Durchmessers, Ring und Striche je rund 10 %;
   hier 17,5 px Kreuz mit 3,5 px Strich und 4 px Ring bei 44 px. */
.steckbrief-schliessen {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--farbe-primaer);
    background: transparent;
    border: 4px solid var(--farbe-primaer);
    border-radius: 50%;
    cursor: pointer;
}

.steckbrief-schliessen:hover {
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
}

.steckbrief-schliessen .symbol {
    width: 1.75rem;
    height: 1.75rem;
}

/* Rund mit leichtem Schatten nach rechts unten, wie auf den Folien 43 und 46 (4 pt weich, 40 %
   Schwarz) - einheitlich für alle sieben. */
.steckbrief-foto {
    display: block;
    width: clamp(7.5rem, 5rem + 8vw, 11.5rem);
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto 1rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0.15rem 0.15rem 0.35rem rgb(0 0 0 / 0.4);
}

.steckbrief-name {
    margin: 0;
    font-size: var(--groesse-h3);
    line-height: 1.3;
}

/* Breit so groß wie eine h3, schmal wie der Fließtext. Lange Wörter: "Ausschließlichkeitsvertrieb."
   trägt ein weiches Trennzeichen (Steckbriefe.cs); was sonst noch zu breit wird, trennt der
   Browser schmal nach deutschen Regeln (lang="de"), und minmax(0, 1fr) mit break-word hält es im
   Kasten. */
.steckbrief-punkte {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 1.5rem clamp(1.25rem, 0.75rem + 2vw, 2.25rem) 1.75rem;
    color: var(--farbe-weiss);
    background: var(--farbe-primaer);
    font-size: clamp(var(--groesse-text), 0.9rem + 0.6vw, 1.375rem);
    line-height: 1.35;
    overflow-wrap: break-word;
}

@media (max-width: 30rem) {
    .steckbrief-kopf {
        padding: 1.5rem 1rem 1.25rem;
    }

    .steckbrief-punkte {
        hyphens: auto;
    }

    .steckbrief-schliessen-form {
        top: 0.75rem;
        right: 0.75rem;
    }
}

/* ===== Rechtstexte: Impressum, Datenschutz, Info gemäß §15 VersVermV ===================== */

/* Im Mock-up nicht gezeichnet: schlichte Textseiten auf Weiß in Lesebreite. Die Abschnitte einer
   Erklärung sind kleiner gesetzt als die Überschriften der übrigen Seiten - sechzehn h2 in der
   Größe der Startseite wären ein Plakat. Lange Adressen (die Links der Datenschutzerklärung)
   brechen um, wo die Zeile endet; lange Wörter in Überschriften tragen weiche Trennzeichen. */
.rechtstext {
    max-width: 54rem;
    overflow-wrap: break-word;
}

.rechtstext h2 {
    margin-top: 2.5rem;
    font-size: var(--groesse-h3);
}

.rechtstext h3 {
    margin-top: 1.75rem;
    font-size: var(--groesse-text);
}

.rechtstext ul {
    margin: 0 0 1em;
    padding-left: 1.25rem;
}

/* Die Bildquellen standen auf der alten Seite mit Gedankenstrich davor. */
.rechtstext-strichliste {
    list-style-type: "– ";
}

/* Info gemäß §15 VersVermV: auf der alten Seite eine Tabelle aus Bezeichnung und Angabe, hier eine
   Liste (dl) - schmal untereinander, ab 48rem nebeneinander, Zeilen durch feine Linien getrennt. */
.angaben {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 1.5rem 0 0;
    border-bottom: 1px solid var(--farbe-flaeche-mittel);
}

.angaben dt {
    padding-top: 1rem;
    font-weight: 700;
    border-top: 1px solid var(--farbe-flaeche-mittel);
}

.angaben dd {
    margin: 0;
    padding: 0.25rem 0 1rem;
}

.angaben dd > p {
    margin-bottom: 0.75rem;
}

.angaben dd > :last-child {
    margin-bottom: 0;
}

@media (min-width: 48rem) {
    .angaben {
        grid-template-columns: 15rem minmax(0, 1fr);
        column-gap: 2rem;
    }

    .angaben dd {
        padding-top: 1rem;
        border-top: 1px solid var(--farbe-flaeche-mittel);
    }
}

/* ===== Hilfsklassen ====================================================================== */

/* Nur für Screenreader: unsichtbar, aber nicht aus dem Barrierefreiheitsbaum genommen. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Zahlen wie "2-4%" nicht am Bindestrich umbrechen. */
.ohne-umbruch {
    white-space: nowrap;
}

.fehler-kennung {
    font-size: var(--groesse-klein);
}