/**
 * FRAU NETZWERKT — Design-Tokens
 * Quelle: 03_Design/design-reference.md, 01_Brand/Farben.md, 01_Brand/Typografie.md
 * (Brandbook + Workshop 28.04.2026). Werte mit "Vorschlag" oder "Ableitung" sind
 * von der Kundin nicht abgefragt bzw. noch nicht bestätigt.
 *
 * Regel: Hex-Werte stehen NUR hier. Block-CSS nutzt ausschließlich var(--fn-…).
 * Auch das eigene Theme (fraunetzwerkt-theme, FN-19) wiederholt keine Werte:
 * seine theme.json verweist per var(--fn-…) hierher und legt nur fest, was
 * Daisy im Editor auswählen darf. Diese Datei bleibt die eine Quelle, solange
 * das Plugin auch unter Astra laufen muss (Rückweg bis zum Launch).
 *
 * Breakpoints (in Media Queries keine Variablen möglich, deshalb nur als Liste):
 * 480px Mobile groß · 768px Tablet · 1024px Desktop · 1440px Wide
 */

/*
 * Jost als Variable Font, lokal (DSGVO). Eigener Familienname, damit die
 * OMGF-Einbindung von Astra (nur Jost 400) unberührt bleibt, bis das eigene
 * Theme kommt. Lizenz: assets/fonts/OFL.txt
 */
@font-face {
    font-family: "FN Jost";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "FN Jost";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/jost-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Markenfarben (Brandbook) */
    --fn-color-honey-melon: #E8CBA2;
    --fn-color-honey-melon-dark: #C9A876; /* Vorschlag Hover/Active */
    --fn-color-white: #FFFFFF;
    --fn-color-charcoal: #474747;
    --fn-color-text: #2D2D2D;

    /* Sekundärpalette (bestätigt 28.04.2026) */
    --fn-color-cream: #FCF8F3;
    --fn-color-soft-peach: #F1E2CB;
    --fn-color-apricot: #E7CFB5;
    --fn-color-rose-greige: #C4B7AF;
    --fn-color-warm-greige: #CEC9C3;

    /* Grauskala (Ableitung) */
    --fn-color-gray-700: #6E6E6E; /* Sekundärtext */
    --fn-color-gray-500: #9A9A9A; /* Captions, Placeholder — nicht für Fließtext */
    --fn-color-gray-300: #D4D0CB;
    --fn-color-gray-100: #EBE7E1; /* Disabled */

    /* Funktionsfarben (bestätigt) */
    --fn-color-success: #839979;
    --fn-color-warning: #D9A864;
    --fn-color-error: #B85C5C;      /* Rahmen, Icons */
    --fn-color-error-text: #A04A4A; /* Ableitung: Fehlertext mit AA-Kontrast */

    /* Rollen — Blöcke nutzen diese, Bänder biegen sie um (siehe unten) */
    --fn-text: var(--fn-color-text);
    --fn-heading: var(--fn-color-charcoal);
    --fn-muted: var(--fn-color-gray-700);
    --fn-border: var(--fn-color-warm-greige);
    --fn-surface: var(--fn-color-white); /* Karten-Fläche */
    --fn-accent-line: var(--fn-color-honey-melon); /* Zeitleiste, Hervorhebung */
    --fn-focus: var(--fn-color-charcoal);
    /* Hero „Bild": Verlauf von links, wo der Text steht (Daisy, 12.10.: Verlauf bleibt, sieht schöner aus).
       Mobil gleichmäßig, weil der Text dort über die volle Breite läuft */
    --fn-overlay-bild: linear-gradient(90deg, rgb(45 45 45 / 0.72) 0%, rgb(45 45 45 / 0.35) 70%, rgb(45 45 45 / 0.2) 100%);
    --fn-overlay-bild-mobil: rgb(45 45 45 / 0.6);
    /* Hero hell abgetönt: Cream-Schleier (Daisy, 12.10.: dunkel und hell wählbar) */
    --fn-overlay-bild-hell: linear-gradient(90deg, rgb(252 248 243 / 0.92) 0%, rgb(252 248 243 / 0.7) 60%, rgb(252 248 243 / 0.25) 100%);
    --fn-overlay-bild-hell-mobil: rgb(252 248 243 / 0.85);

    /* Typografie: Jost, Headlines Medium in Versalien */
    --fn-font: "FN Jost", "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fn-weight-light: 300;
    --fn-weight-regular: 400;
    --fn-weight-medium: 500;

    /*
     * Größen und Abstände in px, nicht rem: Astra setzt html auf 93,75 % und
     * kleiner (mobil gemessen 13,7 px statt 16 px), rem-Werte schrumpften
     * dadurch um bis zu 15 %. Unter dem eigenen Theme ist html wieder 100 %
     * (1rem = 16 px); umgestellt wird erst, wenn Astra weg ist (FN-19).
     */
    --fn-size-h1: clamp(32px, 22.4px + 2.2vw, 48px);
    --fn-size-h2: clamp(26px, 20.8px + 1.2vw, 36px);
    --fn-size-h3: clamp(20px, 17.6px + 0.5vw, 24px);
    --fn-size-body: clamp(16px, 15.2px + 0.25vw, 18px);
    --fn-size-small: clamp(13px, 12.6px + 0.1vw, 14px);

    --fn-leading-h1: 1.15;
    --fn-leading-h2: 1.2;
    --fn-leading-h3: 1.3;
    --fn-leading-body: 1.6;
    --fn-leading-small: 1.5;

    --fn-tracking-heading: 0.04em; /* bestätigt */
    --fn-tracking-small: 0.02em;
    --fn-tracking-eyebrow: 0.12em; /* Ableitung: Dachzeile über Headlines */

    /* Abstände: 4 · 8 · 16 · 24 · 32 · 48 · 64 · 96 px (Vorschlag) */
    --fn-space-1: 4px;
    --fn-space-2: 8px;
    --fn-space-3: 16px;
    --fn-space-4: 24px;
    --fn-space-5: 32px;
    --fn-space-6: 48px;
    --fn-space-7: 64px;
    --fn-space-8: 96px;
    --fn-section-space: clamp(64px, 48px + 3.4vw, 96px); /* Abstand zwischen Sektionen; mobil 64 px laut Referenzen-Analyse 10.10. */

    /* Layout (Vorschlag) */
    --fn-container: 1280px;
    --fn-measure: 640px; /* Textbreite für gute Lesbarkeit */
    --fn-measure-wide: 880px; /* fn/text „breit" (Vorschlag) */
    --fn-size-statement: clamp(24px, 19.2px + 1.1vw, 36px); /* fn/text Stil „Statement" (Referenzen-Analyse 10.10.) */
    --fn-size-zitat: clamp(22px, 18.4px + 0.8vw, 30px); /* fn/stimmen „Einzeln groß": 24–30 px Light (Referenzen-Analyse 10.10.) */
    --fn-gutter: clamp(16px, 8px + 2vw, 24px);

    /* Header (Vorschlag FN-39, Referenzen-Analyse §Header: Desktop ≈ 80 px, mobil ≈ 64 px).
       Menüschrift, Abstände und Logo wachsen von 1024 bis 1280 px und bleiben dann
       stehen — genau wie --fn-container. Wuchsen sie weiter (früher bis 1440 px),
       passte die Leiste bei großen Fenstern nicht mehr in den Container und header.js
       schaltete dort wieder auf Burger (Julio, 14.10.). Heute (7 Punkte + Club-Login
       + „Member werden“) passt das Menü ab ~1.190 px in eine Zeile, darunter Burger. */
    --fn-header-hoehe: 80px;
    --fn-header-hoehe-mobil: 64px;
    --fn-size-nav: clamp(14px, 10px + 0.390625vw, 15px); /* 14 px bei 1024, 15 px ab 1280 */
    --fn-nav-abstand: clamp(6px, -2px + 0.78125vw, 8px); /* Innenabstand je Menüpunkt links/rechts; 6 → 8 px */
    --fn-logo-breite: clamp(180px, 20px + 15.625vw, 220px); /* 180 px bei 1024, 220 px ab 1280 */
    --fn-logo-breite-mobil: 180px;

    /* Formen */
    --fn-radius: 4px;
    --fn-border-width: 1px;
    --fn-linie: 1px; /* Unterstreichungen und Zierlinien (Daisy, 12.10.: vorher 2 px, zu dick). Fokus-Rahmen bleibt 2 px */
    --fn-transition: 0.15s ease;
    --fn-touch-target: 44px;
}

/*
 * Bänder: Hintergrund einer Sektion. Die Liste (hell/warm/dunkel) steht in
 * fn_module_baender() in der Plugin-Hauptdatei, die Klassen vergibt
 * fn_module_band(). Ein dunkles Band schaltet über --invert die Textrollen
 * um — Blöcke müssen dafür nichts wissen.
 */
.fn-band--hell { background-color: var(--fn-color-white); }
.fn-band--warm { background-color: var(--fn-color-cream); }
.fn-band--dunkel { background-color: var(--fn-color-charcoal); }
.fn-band--akzent { background-color: var(--fn-color-honey-melon); }

.fn-band--invert {
    --fn-text: var(--fn-color-white);
    --fn-heading: var(--fn-color-white);
    --fn-muted: var(--fn-color-cream);
    --fn-focus: var(--fn-color-white);
    --fn-border: rgb(255 255 255 / 0.3);
    --fn-surface: transparent;
    color: var(--fn-text);
}

/* Auf Honey Melon hätte Grau nur 3,3:1 → Charcoal (5,97:1) */
.fn-band--akzent {
    --fn-muted: var(--fn-color-charcoal);
    --fn-accent-line: var(--fn-color-charcoal);
    --fn-border: rgb(71 71 71 / 0.35); /* Warm Greige verschwände auf Honey Melon */
}

/* Buttons: Primary = Honey Melon mit Charcoal-Text, Secondary = Outline */
.fn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--fn-touch-target);
    padding: 14px 28px;
    border: var(--fn-border-width) solid transparent;
    border-radius: var(--fn-radius);
    font-family: var(--fn-font);
    font-size: var(--fn-size-body);
    font-weight: var(--fn-weight-medium);
    line-height: 1.2;
    text-decoration: none;
    color: var(--fn-color-charcoal);
    transition: background-color var(--fn-transition), border-color var(--fn-transition), color var(--fn-transition);
}

/* Beim Hovern unterstreicht die globale Link-Regel (theme.json) auch Buttons — dünn halten (Daisy, 12.10.) */
.fn-btn:hover {
    text-decoration-thickness: var(--fn-linie);
    text-underline-offset: 4px;
}

.fn-btn:focus-visible {
    outline: 2px solid var(--fn-focus);
    outline-offset: 3px;
}

.fn-btn--primary {
    background: var(--fn-color-honey-melon);
}

/* Text auf dem Hover-Ton in #2D2D2D: Charcoal hätte dort nur 4,14:1 (AA verlangt 4,5:1) */
.fn-btn--primary:hover {
    background: var(--fn-color-honey-melon-dark);
    color: var(--fn-color-text);
}

.fn-btn--secondary {
    background: transparent;
    border-color: var(--fn-color-charcoal);
}

.fn-btn--secondary:hover {
    background: var(--fn-color-honey-melon);
    color: var(--fn-color-charcoal);
}

.fn-band--invert .fn-btn--secondary {
    color: var(--fn-color-white);
    border-color: var(--fn-color-white);
}

.fn-band--invert .fn-btn--secondary:hover {
    color: var(--fn-color-charcoal);
    border-color: var(--fn-color-honey-melon);
}

/* Auf dem Akzent-Band verschwände der Primary-Button in der Fläche → Charcoal */
.fn-band--akzent .fn-btn--primary {
    background: var(--fn-color-charcoal);
    color: var(--fn-color-white);
}

.fn-band--akzent .fn-btn--primary:hover {
    background: var(--fn-color-text);
    color: var(--fn-color-white);
}

.fn-band--akzent .fn-btn--secondary:hover {
    background: var(--fn-color-white);
}

.fn-container {
    width: 100%;
    max-width: var(--fn-container);
    margin-inline: auto;
    padding-inline: var(--fn-gutter);
    box-sizing: border-box;
}

/*
 * Sektion: gemeinsame Basis aller Inhaltsblöcke (fn/text, fn/media-text, fn/cta …).
 * Der Hero hat eigene Regeln. Astra setzt Abstände an .entry-content-Kinder,
 * darum mit .fn-section davor.
 */
.fn-section {
    position: relative;
    width: 100%;
    margin-block: 0;
    padding-block: var(--fn-section-space);
    font-family: var(--fn-font);
    color: var(--fn-text);
    box-sizing: border-box;
}

/* Randlos: unter Astra per assets/css/astra-bruecke.css (100vw), unter dem
   eigenen Theme über alignfull und den Seiten-Innenabstand (Theme-CSS). */

/* Zwei Sektionen mit gleichem Band hintereinander: Abstand nicht verdoppeln */
.fn-section.fn-band--hell + .fn-section.fn-band--hell,
.fn-section.fn-band--warm + .fn-section.fn-band--warm,
.fn-section.fn-band--dunkel + .fn-section.fn-band--dunkel,
.fn-section.fn-band--akzent + .fn-section.fn-band--akzent {
    padding-top: 0;
}

/* Abschnittskopf: Dachzeile + H2 (+ Einleitung) */
.fn-section .fn-section__kopf {
    max-width: var(--fn-measure);
    margin: 0 0 var(--fn-space-5);
}

.fn-section .fn-section__eyebrow {
    margin: 0 0 var(--fn-space-3);
    font-size: var(--fn-size-small);
    font-weight: var(--fn-weight-medium);
    line-height: var(--fn-leading-small);
    letter-spacing: var(--fn-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--fn-muted);
}

.fn-section .fn-section__titel {
    margin: 0;
    font-family: var(--fn-font);
    font-size: var(--fn-size-h2);
    font-weight: var(--fn-weight-medium);
    line-height: var(--fn-leading-h2);
    letter-spacing: var(--fn-tracking-heading);
    text-transform: uppercase;
    color: var(--fn-heading);
    overflow-wrap: break-word;
    hyphens: auto;
}

.fn-section .fn-section__intro {
    margin: var(--fn-space-4) 0 0;
    font-size: var(--fn-size-body);
    font-weight: var(--fn-weight-light);
    line-height: var(--fn-leading-body);
}

/*
 * Fließtext aus InnerBlocks: Regular für lange Texte (Typografie.md).
 * SCF legt im Frontend und Editor .acf-innerblocks-container dazwischen —
 * die Abstandsregeln gelten deshalb für beide Ebenen.
 */
.fn-section .fn-prose {
    font-size: var(--fn-size-body);
    font-weight: var(--fn-weight-regular);
    line-height: var(--fn-leading-body);
    color: var(--fn-text);
}

/*
 * Editor: Astra gibt jedem Absatz Schriftart, -größe, -stärke und Zeilenhöhe
 * fest vor (.block-editor-block-list__block p, class-gutenberg-editor-css.php).
 * Ohne diese Regel zeigt der Editor z. B. den Stil „Statement" nicht an, das
 * Frontend schon. Doppelte Klasse für Vorrang vor
 * .edit-post-visual-editor.editor-styles-wrapper p; im Frontend erben die
 * Absätze ohnehin, dort ändert sich nichts.
 */
.fn-section .fn-prose.fn-prose :is(p, ul, ol, li) {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.fn-section :is(.fn-prose, .fn-prose > .acf-innerblocks-container) > * {
    margin-block: 0;
}

.fn-section :is(.fn-prose, .fn-prose > .acf-innerblocks-container) > * + * {
    margin-top: var(--fn-space-4);
}

.fn-section .fn-prose :is(h2, h3, h4) {
    font-family: var(--fn-font);
    font-weight: var(--fn-weight-medium);
    letter-spacing: var(--fn-tracking-heading);
    text-transform: uppercase;
    color: var(--fn-heading);
}

.fn-section .fn-prose h2 {
    font-size: var(--fn-size-h2);
    line-height: var(--fn-leading-h2);
}

.fn-section .fn-prose :is(h3, h4) {
    font-size: var(--fn-size-h3);
    line-height: var(--fn-leading-h3);
}

.fn-section :is(.fn-prose, .fn-prose > .acf-innerblocks-container) > * + :is(h2, h3, h4) {
    margin-top: var(--fn-space-6);
}

.fn-section :is(.fn-prose, .fn-prose > .acf-innerblocks-container) > :is(h2, h3, h4) + * {
    margin-top: var(--fn-space-3);
}

.fn-section .fn-prose :is(ul, ol) {
    margin-left: 0;
    padding-left: 1.25em;
}

.fn-section .fn-prose li + li {
    margin-top: var(--fn-space-2);
}

.fn-section .fn-prose strong {
    font-weight: var(--fn-weight-medium);
}

.fn-section .fn-prose a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--fn-color-honey-melon);
    text-decoration-thickness: var(--fn-linie, 1px);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--fn-transition);
}

.fn-section .fn-prose a:hover,
.fn-band--akzent .fn-prose a {
    text-decoration-color: currentColor;
}

.fn-section .fn-prose a:focus-visible {
    outline: 2px solid var(--fn-focus);
    outline-offset: 2px;
}

.fn-section .fn-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fn-space-3);
}

/*
 * Karten und Raster (fn/karten, fn/liste, fn/preise). Karten: mit Rahmen,
 * ohne Schatten, 4 px Radius (design-reference §Komponenten).
 */
.fn-section .fn-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fn-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .fn-section .fn-raster--2,
    .fn-section .fn-raster--3,
    .fn-section .fn-raster--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .fn-section .fn-raster--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fn-section .fn-raster--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.fn-section .fn-raster > li {
    margin: 0;
}

/*
 * Slider: Reihe zum Durchschieben, überall gleich (Karten, Galerie-Streifen;
 * Daisy, 13.10.). Kein Scrollbalken, stattdessen Pfeile darunter, rechtsbündig
 * (Markup: fn_module_slider_pfeile(), Skript: assets/js/slider.js). Wischen und
 * Scrollen per Trackpad bleiben. Breite der Einträge legt der Block fest.
 */
.fn-section .fn-slider__reihe {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.fn-section .fn-slider__reihe::-webkit-scrollbar {
    display: none;
}

.fn-section .fn-slider__reihe:focus-visible {
    outline: 2px solid var(--fn-focus);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    .fn-section .fn-slider__reihe {
        scroll-behavior: smooth;
    }
}

/*
 * Raster als Slider (Karten, Stimmen): eine Reihe statt Umbruch.
 * Handy: ein Eintrag + Anschnitt des nächsten, Tablet: zwei, Computer: so viele wie Spalten.
 */
.fn-section .fn-raster.fn-slider__reihe {
    --fn-slider-luecke: var(--fn-space-5);
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: var(--fn-slider-luecke);
    padding-bottom: 2px; /* Fokus-Rahmen der Einträge nicht abschneiden */
}

.fn-section .fn-raster.fn-slider__reihe > li {
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .fn-section .fn-raster.fn-slider__reihe {
        grid-auto-columns: calc((100% - var(--fn-slider-luecke)) / 2);
    }
}

@media (min-width: 1024px) {
    .fn-section .fn-raster--3.fn-slider__reihe {
        grid-auto-columns: calc((100% - 2 * var(--fn-slider-luecke)) / 3);
    }

    .fn-section .fn-raster--4.fn-slider__reihe {
        grid-auto-columns: calc((100% - 3 * var(--fn-slider-luecke)) / 4);
    }
}

.fn-section .fn-slider__pfeile {
    display: flex;
    justify-content: flex-end;
    gap: var(--fn-space-3);
    margin-top: var(--fn-space-5);
}

.fn-section .fn-slider__pfeile[hidden] {
    display: none;
}

.fn-section .fn-slider__pfeil {
    display: inline-grid;
    place-items: center;
    width: var(--fn-touch-target);
    height: var(--fn-touch-target);
    padding: 0;
    border: var(--fn-border-width) solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: var(--fn-heading);
    cursor: pointer;
    transition: background-color var(--fn-transition), opacity var(--fn-transition);
}

.fn-section .fn-slider__pfeil:hover:not(:disabled) {
    background: var(--fn-color-honey-melon);
    border-color: var(--fn-color-honey-melon);
    color: var(--fn-color-charcoal);
}

.fn-section .fn-slider__pfeil:focus-visible {
    outline: 2px solid var(--fn-focus);
    outline-offset: 2px;
}

.fn-section .fn-slider__pfeil:disabled {
    opacity: 0.3;
    cursor: default;
}

.fn-section .fn-karte {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--fn-surface);
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius);
    overflow: hidden;
    box-sizing: border-box;
}

/* Kartentitel: Versalien wie alle Headlines, eine Stufe unter H2 */
.fn-section .fn-karte__titel {
    margin: 0;
    font-family: var(--fn-font);
    font-size: var(--fn-size-h3);
    font-weight: var(--fn-weight-medium);
    line-height: var(--fn-leading-h3);
    letter-spacing: var(--fn-tracking-heading);
    text-transform: uppercase;
    color: var(--fn-heading);
    overflow-wrap: break-word;
    hyphens: auto;
}

.fn-section .fn-karte__meta {
    margin: var(--fn-space-2) 0 0;
    font-size: var(--fn-size-small);
    line-height: var(--fn-leading-small);
    letter-spacing: var(--fn-tracking-small);
    color: var(--fn-muted);
}

.fn-section .fn-karte__text {
    margin: var(--fn-space-3) 0 0;
    font-size: var(--fn-size-body);
    line-height: var(--fn-leading-body);
}

/* Textlink mit Pfeil (Karten, Listen) */
/* inline-block statt flex: sonst wird der Pfeil mit unterstrichen */
.fn-section .fn-textlink {
    display: inline-block;
    padding-block: 10px; /* Touch-Fläche ≥ 44 px */
    font-weight: var(--fn-weight-medium);
    color: var(--fn-heading);
    text-decoration: underline;
    text-decoration-color: var(--fn-color-honey-melon);
    text-decoration-thickness: var(--fn-linie, 1px);
    text-underline-offset: 4px;
    transition: text-decoration-color var(--fn-transition);
}

/* Pfeil ist Deko: zweite Zeile blendet ihn für Screenreader aus (ältere Browser nehmen die erste) */
.fn-section .fn-textlink::after {
    content: "→";
    content: "→" / "";
    display: inline-block;
    margin-left: var(--fn-space-2);
}

.fn-section .fn-textlink:hover,
.fn-band--akzent .fn-textlink {
    text-decoration-color: currentColor;
}

.fn-section .fn-textlink:focus-visible {
    outline: 2px solid var(--fn-focus);
    outline-offset: 2px;
}

.fn-section .fn-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: none;
}

.fn-section .fn-fussnote {
    margin: var(--fn-space-5) 0 0;
    font-size: var(--fn-size-small);
    line-height: var(--fn-leading-small);
    color: var(--fn-muted);
}

.fn-editor-hinweis p {
    margin: 0;
    font-size: var(--fn-size-small);
}