/* ==========================================================================
   funnels — Stylesheet der öffentlichen Funnel-Seite

   Hier gilt das Thema des KUNDEN, nicht die Handschrift von Buerostark. Die
   Farben, die Schrift und der Eckradius kommen aus dem erzeugten Stylesheet
   je Fassung; hier steht nur die Form.

   Unsere Handschrift steckt nicht in der Farbe, sondern im Verhalten: der
   geneigten Fortschrittsanzeige, dem Aufbau der Seite, dem Anfassgefühl der
   Kacheln. Das darf wiedererkennbar sein, ohne den Kunden zu überdecken.
   ========================================================================== */

:root {
    --fn-grund: #FFFFFF;
    --fn-akzent: #1553C4;
    --fn-dunkel: #0E2A47;
    --fn-text: #111111;
    --fn-schrift: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fn-schrift-titel: var(--fn-schrift);
    --fn-radius: 14px;

    --fn-breite: 620px;
    --fn-a1: 10px;
    --fn-a2: 18px;
    --fn-a3: 30px;
    --fn-neigung: -11deg;
}

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

html { background: var(--fn-grund); }

body.fn-koerper {
    /* Versalziffern: Mit der Syne im Thema stünden sonst Mediävalziffern da. */
    font-variant-numeric: lining-nums;
    margin: 0;
    padding: var(--fn-a3) var(--fn-a2) var(--fn-a3);
    background: var(--fn-grund);
    color: var(--fn-text);
    font-family: var(--fn-schrift);
    font-size: 17px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

.fn-buehne {
    max-width: var(--fn-breite);
    margin: 0 auto;
}

/* ==========================================================================
   Fortschrittsanzeige

   Geneigte Segmente auf einer Schiene. Erledigte sind voll, das laufende
   füllt sich beim Aufbau der Seite von links. Darunter steht der Stand als
   Bruch. Das ist das Element, an dem man unsere Funnels erkennt.
   ========================================================================== */

.fn-fortschritt {
    margin-bottom: var(--fn-a3);
}

.fn-schiene {
    display: flex;
    gap: 5px;
    height: 8px;
}

.fn-segment {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: color-mix(in srgb, var(--fn-text) 12%, transparent);
    transform: skewX(var(--fn-neigung));
    border-radius: 2px;
}

.fn-segment.fn-voll {
    background: var(--fn-akzent);
}

/* Das laufende Segment füllt sich einmal beim Aufbau. Kein Dauerzappeln: Eine
   Animation, die nie aufhört, ist nach zwei Sekunden nur noch Unruhe. */
.fn-segment.fn-laeuft::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--fn-akzent);
    transform-origin: left center;
    animation: fn-fuellen .55s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes fn-fuellen {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.fn-schrittzahl {
    margin: var(--fn-a1) 0 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: color-mix(in srgb, var(--fn-text) 55%, transparent);
}

.fn-jetzt { color: var(--fn-akzent); }
.fn-strich { margin: 0 3px; opacity: .5; }

/* ==========================================================================
   Seite und Blöcke
   ========================================================================== */

/* Der Seitenwechsel. Kurz, einmal, ohne Zirkus.
 *
 * Ohne `both`: Der sichtbare Zustand ist der Normalzustand, die Animation
 * blendet ihn nur ein. Mit `both` läge vor dem Start `opacity: 0` an — wer die
 * Animation nicht ausführt, sähe eine leere Seite. Der Inhalt darf nie davon
 * abhängen, dass etwas animiert wird. */
.fn-seite {
    animation: fn-auf .38s cubic-bezier(.22, .61, .36, 1);
}

@keyframes fn-auf {
    from { opacity: .001; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fn-seite, .fn-segment.fn-laeuft::after { animation: none; }
}

/* Der Abstand gehört zwischen die Blöcke, nicht in sie. */
.fn-block + .fn-block { margin-top: var(--fn-a2); }
.fn-block:first-child { margin-top: 0; }

.fn-mitte { text-align: center; }
.fn-links { text-align: left; }

.fn-ueberschrift {
    margin: 0;
    font-weight: 700;
    line-height: 1.15;
    color: var(--fn-dunkel);
}

h1.fn-ueberschrift { font-size: clamp(26px, 6vw, 34px); }
h2.fn-ueberschrift { font-size: clamp(21px, 5vw, 27px); }
h3.fn-ueberschrift { font-size: 19px; }

.fn-text { margin: 0; }

.fn-text.fn-auf-dunkel {
    background: var(--fn-dunkel);
    color: #fff;
    padding: var(--fn-a2);
    border-radius: var(--fn-radius);
}

.fn-logo img, .fn-bild img { display: block; max-width: 100%; height: auto; }
.fn-logo { text-align: center; }
.fn-logo img { margin: 0 auto; max-height: 64px; width: auto; }
.fn-bild img { width: 100%; border-radius: var(--fn-radius); }

.fn-abstand-klein { height: var(--fn-a1); }
.fn-abstand-mittel { height: var(--fn-a3); }
.fn-abstand-gross { height: calc(var(--fn-a3) * 2); }

/* Liste */
.fn-listeneintrag {
    display: flex;
    gap: var(--fn-a2);
    align-items: flex-start;
    text-align: left;
}

.fn-listeneintrag + .fn-listeneintrag { margin-top: var(--fn-a2); }
.fn-symbol { font-size: 26px; line-height: 1.2; flex: none; }

/* Aufklappbereich */
.fn-aufklapp {
    border-radius: var(--fn-radius);
    background: color-mix(in srgb, var(--fn-text) 5%, transparent);
    padding: var(--fn-a2);
    text-align: left;
}

.fn-aufklapp summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--fn-dunkel);
    list-style: none;
}

.fn-aufklapp summary::-webkit-details-marker { display: none; }
.fn-aufklapp summary::after { content: " +"; float: right; opacity: .5; }
.fn-aufklapp[open] summary::after { content: " –"; }
.fn-aufklapp-inhalt { margin-top: var(--fn-a1); }

/* ==========================================================================
   Schaltflächen und Auswahl
   ========================================================================== */

.fn-buttonzeile { text-align: center; }

.fn-button {
    display: inline-block;
    width: 100%;
    border: 0;
    border-radius: var(--fn-radius);
    background: var(--fn-akzent);
    color: #fff;
    font: 700 18px/1.3 var(--fn-schrift);
    padding: 16px 24px;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

.fn-button:hover { filter: brightness(1.08); }
.fn-button:active { transform: translateY(1px); }

/* Auswahlkacheln. Das Anfassgefühl ist Teil der Handschrift: Die Kachel hebt
   sich beim Überfahren leicht an und bekommt eine Kante in der Akzentfarbe. */
.fn-auswahl {
    display: grid;
    gap: var(--fn-a1);
}

.fn-spalten-1 { grid-template-columns: 1fr; }
.fn-spalten-2 { grid-template-columns: repeat(2, 1fr); }
.fn-spalten-3 { grid-template-columns: repeat(3, 1fr); }

.fn-kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Ohne min-width bekommt eine Rasterzelle die Breite ihres längsten
       Wortes. Eine Kachel „Immobilienwirtschaftlich" schob damit das ganze
       Raster über den rechten Rand des Telefons hinaus. */
    min-width: 0;
    overflow-wrap: break-word;
    gap: var(--fn-a1);
    padding: var(--fn-a2) var(--fn-a1);
    border: 2px solid color-mix(in srgb, var(--fn-text) 12%, transparent);
    border-radius: var(--fn-radius);
    background: var(--fn-grund);
    color: var(--fn-dunkel);
    font: 600 16px/1.3 var(--fn-schrift);
    cursor: pointer;
    transition: transform .14s cubic-bezier(.22, .61, .36, 1), border-color .14s ease;
}

.fn-kachel:hover {
    border-color: var(--fn-akzent);
    transform: translateY(-2px);
}

.fn-kachel-symbol { font-size: 34px; line-height: 1; }

/* Mehrfachauswahl als Zeilen mit Punkt am Rand */
.fn-mehrfach { display: grid; gap: var(--fn-a1); }

.fn-zeile {
    display: flex;
    align-items: center;
    gap: var(--fn-a2);
    padding: 14px var(--fn-a2);
    border: 2px solid color-mix(in srgb, var(--fn-text) 12%, transparent);
    border-radius: var(--fn-radius);
    cursor: pointer;
    text-align: left;
}

.fn-zeilentext { flex: 1; }
.fn-haken { position: absolute; opacity: 0; pointer-events: none; }

.fn-punkt {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--fn-text) 25%, transparent);
    transition: background-color .14s ease, border-color .14s ease;
}

.fn-zeile:has(.fn-haken:checked) { border-color: var(--fn-akzent); }

.fn-zeile:has(.fn-haken:checked) .fn-punkt {
    background: var(--fn-akzent);
    border-color: var(--fn-akzent);
    box-shadow: inset 0 0 0 3px var(--fn-grund);
}

.fn-hinweis {
    margin: 0 0 var(--fn-a1);
    font-size: 15px;
    opacity: .7;
}

/* Felder */
.fn-feldrahmen {
    display: flex;
    align-items: center;
    gap: var(--fn-a1);
    border: 2px solid color-mix(in srgb, var(--fn-text) 12%, transparent);
    border-radius: var(--fn-radius);
    padding: 0 var(--fn-a2);
    background: var(--fn-grund);
}

.fn-feldrahmen:focus-within { border-color: var(--fn-akzent); }

.fn-feldrahmen input,
.fn-feldrahmen select {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fn-text);
    /* Nie unter 16 Pixel: Darunter zoomt das iPhone beim Antippen. */
    font: 400 17px/1.5 var(--fn-schrift);
    padding: 15px 0;
    min-width: 0;
}

.fn-zustimmung { font-size: 15px; text-align: left; }
.fn-zustimmung label { display: flex; gap: var(--fn-a1); align-items: flex-start; }
.fn-zustimmung a { color: var(--fn-akzent); }

.fn-mangel {
    background: color-mix(in srgb, #C0392B 12%, transparent);
    color: #8B1F1F;
    border-radius: var(--fn-radius);
    padding: var(--fn-a2);
    margin-bottom: var(--fn-a2);
    text-align: left;
}

.fn-mangel p { margin: 0; }
.fn-mangel p + p { margin-top: 6px; }

/* Video */
.fn-video {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--fn-radius);
    background: #000;
    aspect-ratio: 16 / 9;
}

.fn-vh-16-9 { aspect-ratio: 16 / 9; }
.fn-vh-9-16 { aspect-ratio: 9 / 16; }
.fn-vh-4-3 { aspect-ratio: 4 / 3; }
.fn-vh-1-1 { aspect-ratio: 1 / 1; }
.fn-vh-4-5 { aspect-ratio: 4 / 5; }
.fn-vh-21-9 { aspect-ratio: 21 / 9; }

.fn-video video, .fn-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.fn-videostart {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: #111 center/cover no-repeat;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fn-a1);
}

.fn-abspielen {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--fn-akzent);
    position: relative;
}

.fn-abspielen::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
}

.fn-videohinweis { font-size: 13px; opacity: .8; max-width: 22em; }

.fn-fuss {
    margin-top: var(--fn-a3);
    text-align: center;
    font-size: 13px;
    /* Zurückgenommen wird die Schriftfarbe, nicht die ganze Fusszeile: Eine
       Deckkraft auf dem Element bleicht auch die Marke aus, und das Logo soll
       zeigen, was es ist. */
    color: color-mix(in srgb, var(--fn-text) 60%, transparent);
}

.fn-fuss a { color: inherit; }

.fn-schlicht .fn-seite { text-align: center; }

@media (max-width: 420px) {
    .fn-spalten-3 { grid-template-columns: repeat(2, 1fr); }
    .fn-kachel-symbol { font-size: 28px; }
}

/* Feste Teile der Seite: Logo oben, Fusszeile unten */
.fn-kopf {
    display: flex;
    justify-content: center;
    padding: var(--fn-a2) 0;
}

.fn-logo {
    max-height: 52px;
    max-width: 70%;
    width: auto;
    height: auto;
}

.fn-marke {
    display: block;
    margin: 0 auto;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Die Marke des Werkzeugs steht auf jeder Seite jedes Funnels: eine eigene
   Zeile unter den Rechtstexten, klein und zentriert. Die Fusszeile nimmt ihr
   mit ihrer Deckkraft die Aufmerksamkeit; auf dunklem Grund dreht das Thema
   das Logo um, siehe Thema::stylesheet. */
.fn-marke-logo {
    display: block;
    width: auto;
    height: 14px;
    margin: 10px auto 0;
}

.fn-anfragedank {
    margin: 6px 0 0;
}

.fn-anfrage {
    width: min(420px, calc(100vw - 32px));
    border: 0;
    border-radius: 16px;
    padding: 22px;
    color: var(--fn-text);
    background: var(--fn-grund);
}

.fn-anfrage::backdrop { background: rgba(0, 0, 0, .5); }

.fn-anfrage h2 { margin: 0 0 6px; font-size: 20px; }
.fn-anfrage p { margin: 0 0 14px; font-size: 14px; }

.fn-anfrage label {
    display: block;
    margin: 10px 0 4px;
    font-size: 13px;
    font-weight: 600;
}

.fn-anfrage input,
.fn-anfrage textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 10px;
    padding: 9px 11px;
    font: inherit;
    font-size: 15px;
}

/* Für Maschinen sichtbar, für Menschen nicht. */
.fn-falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.fn-anfragefuss {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.fn-abbruch {
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: inherit;
    opacity: .7;
    cursor: pointer;
}

/* Nach dem Absenden: wie es weitergeht */
.fn-weiter {
    margin-top: var(--fn-a3);
    padding-top: var(--fn-a3);
    border-top: 1px solid rgba(17, 17, 17, .1);
    text-align: center;
}

.fn-weiter h2 {
    margin: 0 0 6px;
    font-size: 20px;
}

.fn-weiter p { margin: 0; }

.fn-kanaele {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--fn-a1);
    margin-top: var(--fn-a2) !important;
}

.fn-kanal {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--fn-akzent);
    border-radius: 999px;
    color: var(--fn-akzent);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.fn-kanal:hover {
    background: var(--fn-akzent);
    color: #fff;
}

/* ==========================================================================
   Bausteine für Landeseiten
   ========================================================================== */

/* Vorzeile: kurz, gesperrt, in Grossbuchstaben */
.fn-label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .65;
}

/* Stichworte */
.fn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fn-chips.fn-mitte { justify-content: center; }
.fn-chips.fn-links { justify-content: flex-start; }

.fn-chip {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid rgba(17, 17, 17, .16);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.3;
}

.fn-chips.fn-aufdunkel .fn-chip {
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

/* Kachelraster mit Eckdaten */
.fn-faktraster {
    display: grid;
    gap: var(--fn-a2);
}

.fn-faktraster-2 { grid-template-columns: repeat(2, 1fr); }
.fn-faktraster-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 760px) {
    .fn-faktraster-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .fn-faktraster-2,
    .fn-faktraster-3 { grid-template-columns: 1fr; }
}

.fn-fakt {
    padding: var(--fn-a2);
    border: 1px solid rgba(17, 17, 17, .1);
    border-radius: var(--fn-radius);
    text-align: left;
}

.fn-faktsymbol { font-size: 24px; line-height: 1; }

.fn-fakttitel {
    margin: 8px 0 4px;
    font-size: 17px;
    font-weight: 700;
}

.fn-fakttext {
    margin: 0;
    font-size: 15px;
    opacity: .8;
}

/* Auftakt: Bild, Text darüber, eine Schaltfläche */
.fn-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--fn-radius);
    background: var(--fn-dunkel);
    color: #fff;
    isolation: isolate;
    /* Inhalt in der Mitte, waagrecht wie senkrecht: Bei fester Höhe steht er
       dadurch im Zentrum der Fläche und nicht am oberen Rand. */
    display: flex;
    align-items: center;
    justify-content: center;
}

.fn-herobild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* Ein Verlauf, damit die Schrift auf jedem Bild lesbar bleibt. */
.fn-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .72) 100%);
    z-index: -1;
}

.fn-heroinhalt {
    padding: var(--fn-a3) var(--fn-a2);
    width: 100%;
    text-align: center;
}

.fn-herovorzeile {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .85;
}

.fn-herotitel {
    margin: 0;
    font-size: clamp(28px, 6vw, 46px);
    line-height: 1.08;
    letter-spacing: -.01em;
}

.fn-herotext {
    margin: 12px 0 0;
    font-size: 17px;
    opacity: .9;
}

.fn-heroknopf { margin-top: var(--fn-a2); }
.fn-heroknopf.fn-heroknopf-oben { margin: 0 0 var(--fn-a2); }

.fn-hero .fn-herotext { margin-left: auto; margin-right: auto; max-width: 46ch; }

/* Farbband: Die Fläche trägt ihre eigene Farbe (Regel im erzeugten
   Stylesheet), ohne den Verlauf, der sonst ein Bild lesbar macht. Die
   Schaltfläche ist weiss, sonst verschwände sie in einem Band in der
   Akzentfarbe. */
.fn-hero-band { border-radius: 0; }
.fn-hero-band::after { content: none; }
.fn-hero-band .fn-heroinhalt { padding: var(--fn-a2); }
.fn-hero-band .fn-heroknopf { background: #fff; color: var(--fn-text); }

/* Auf dem Telefon läuft das Band von Rand zu Rand, wie bei Perspective. Die
   Breite ist die der Bühne plus beide Seitenränder des Körpers. */
@media (max-width: 656px) {
    .fn-hero-band,
    .fn-flaeche,
    .fn-galerie-voll,
    .fn-textband,
    .fn-bild-randlos,
    .fn-stimme {
        margin-left: calc(-1 * var(--fn-a2));
        margin-right: calc(-1 * var(--fn-a2));
    }
}

/* Blöcke auf eigener Farbfläche. Die Farbe setzt das erzeugte Stylesheet,
   die Schrift wird auf dunklen Flächen weiss. */
.fn-textband,
.fn-flaeche { padding: 14px var(--fn-a2); }
.fn-flaeche.fn-ueberschrift { padding-top: var(--fn-a3); }
.fn-flaeche:not(:has(+ .fn-flaeche)) { padding-bottom: var(--fn-a3); }
.fn-auf-farbe .fn-aufklapp { background: #f2f2f2; color: var(--fn-text); }
.fn-auf-farbe,
.fn-auf-farbe .fn-ueberschrift,
.fn-ueberschrift.fn-auf-farbe { color: #fff; }

/* Farbige Leiste am Fuss einer Auswahlkachel */
.fn-kachel:has(.fn-kachelleiste) { padding-bottom: 0; overflow: hidden; }
.fn-kachelleiste {
    align-self: stretch;
    margin: 0 calc(-1 * var(--fn-a1));
    padding: 12px var(--fn-a1);
    font-weight: 400;
    font-size: 15px;
}

/* Bilderreihe als Vollbild: ein Bild je Ansicht, randlos, wechselt von selbst
   (funnel.js). */
.fn-galerie.fn-galerie-voll { grid-auto-columns: 100%; gap: 0; padding-bottom: 0; scrollbar-width: none; }
.fn-galerie-voll::-webkit-scrollbar { display: none; }
.fn-galerie-voll .fn-galeriebild img { aspect-ratio: auto; height: auto; border-radius: 0; }
/* Bilder verschiedener Höhe: die Reihe richtet sich nach dem höchsten, die
   übrigen stehen oben. Beschnitten wird nichts, ein Bild mit Schrift bleibt lesbar. */
.fn-galerie-voll { align-items: start; }

/* Schaltfläche mit eigener Farbe: auf heller Fläche dunkle Schrift. */
.fn-button.fn-button-hell { color: var(--fn-text); }
a.fn-button { display: block; text-align: center; text-decoration: none; }

.fn-bild-randlos img { border-radius: 0; }

/* Stimme: Foto über die ganze Breite, unten in den Grund ausgeblendet, das
   Zitat darauf. */
/* Nur seitlich null: Eine figure hat eigene Ränder, oben und unten gilt der
   Blockabstand. Auf dem Telefon randlos wie Band und Bild. */
.fn-stimme { margin-left: 0; margin-right: 0; margin-bottom: 0; text-align: center; }

@media (max-width: 656px) {
    .fn-stimme {
        margin-left: calc(-1 * var(--fn-a2));
        margin-right: calc(-1 * var(--fn-a2));
    }
}
.fn-stimmebild { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.fn-stimmetext {
    position: relative;
    margin-top: -38%;
    padding: 90px var(--fn-a2) 0;
    background: linear-gradient(180deg, transparent 0, var(--fn-grund) 70%);
}
.fn-stimme-ohnebild .fn-stimmetext { margin-top: 0; padding-top: 0; background: none; }
.fn-zitat { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.45; color: var(--fn-text); }
.fn-stimmename { display: block; margin-top: 12px; font-style: normal; font-weight: 700; font-size: 14px; }
.fn-stimmezusatz { display: block; font-size: 14px; opacity: .75; }

/* Grosses Symbol, etwa über einer Ergebnisseite */
.fn-grosssymbol { text-align: center; line-height: 1; }

/* Auswahl im Eingabefeld: eigener Pfeil statt des Systemknopfs, der auf
   jedem Telefon anders aussieht. */
.fn-feldrahmen select { appearance: none; min-width: 0; cursor: pointer; }
.fn-feldrahmen:has(select)::after { content: "▾"; margin-left: 8px; opacity: .6; }
.fn-grosssymbol-gross { font-size: 72px; }
.fn-grosssymbol-mittel { font-size: 48px; }

.fn-hero-mittel .fn-herotitel { font-size: clamp(21px, 5vw, 27px); line-height: 1.25; }

/* Bilderreihe */
.fn-galerie {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: var(--fn-a1);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
}

.fn-galeriebild {
    margin: 0;
    scroll-snap-align: start;
}

.fn-galeriebild img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--fn-radius);
    display: block;
}

.fn-galeriebild figcaption {
    margin-top: 6px;
    font-size: 13px;
    opacity: .7;
}

/* Überschriften dürfen eine eigene Schrift tragen. */
.fn-ueberschrift,
.fn-herotitel,
.fn-fakttitel {
    font-family: var(--fn-schrift-titel);
}

/* Eine Vorzeile eröffnet einen Abschnitt: davor mehr Luft als zwischen
   gewöhnlichen Blöcken. */
.fn-block.fn-label { margin-top: 48px; }

.fn-seite > .fn-label:first-child { margin-top: 0; }

/* Sichtbare Beschriftung über einem Eingabefeld */
.fn-feldname {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    opacity: .75;
}

/* Durchsicht durch den Kunden: ansehen, nicht abschicken. Aufklappbereiche
   und das Video bleiben bedienbar, sie schicken nichts. */
.fn-nurlesen button:not(.fn-videostart),
.fn-nurlesen input,
.fn-nurlesen select,
.fn-nurlesen textarea {
    pointer-events: none;
}

.fn-leerseite {
    margin: 40px 0;
    text-align: center;
    opacity: .6;
}


/* ==========================================================================
   Hinweisseite eines nicht erreichbaren Funnels
   Eigene Gestaltung in Buerostark-Farben: Die Seite gehört zu keinem Thema.
   ========================================================================== */
.fn-hinweisseite {
    --fn-grund: #EFEFEF;
    --fn-akzent: #000000;
    --fn-dunkel: #111111;
    --fn-text: #1F1F1F;
    --fn-radius: 999px;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.fn-hinweis-buehne { width: 100%; max-width: 520px; margin: 0 auto; text-align: center; }

.fn-hinweis-karte {
    background: #fff;
    border-radius: 24px;
    padding: 36px 28px 30px;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .08);
}

.fn-hinweis-logo { display: block; margin: 0 auto 28px; height: 26px; width: auto; }
.fn-hinweis-symbol { display: block; font-size: 44px; line-height: 1; margin-bottom: 14px; }
.fn-hinweis-karte h1 { margin: 0 0 12px; font-size: clamp(22px, 5vw, 28px); line-height: 1.25; color: var(--fn-dunkel); }
.fn-hinweis-karte > p { margin: 0; color: #555; }

.fn-hinweis-betreiber {
    margin-top: 24px;
    padding: 18px;
    border-radius: 16px;
    background: #F6F6F6;
    font-size: 15px;
}

.fn-hinweis-betreiber p { margin: 0 0 14px; }
.fn-hinweis-betreiber .fn-button { display: block; text-decoration: none; }
.fn-hinweis-fuss { margin: 18px 0 0; font-size: 13px; color: #888; }