/*
 * Bausteine der Seite: Kopf, Brotkrume, Fuss und die Inhaltselemente.
 *
 * Kein einziger Farbwert - alles kommt aus tokens.css. Wer hier eine Farbe
 * eintraegt, hat den Zweck der Trennung aufgehoben: acht Auftritte, eine
 * Datei, drei Werte Unterschied.
 */

/* ----------------------------------------------------------------- Kopf */

.kopf {
    border-bottom: 1px solid var(--line);
    padding-block: var(--space-4);
}

.kopf__reihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.kopf__marke {
    font-weight: 600;
    font-size: var(--text-gross);
    text-decoration: none;
    /* Zielgroesse: der Verweis ist mindestens 44px hoch anklickbar. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.kopf__navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
}

.kopf__navigation a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
}

.kopf__navigation a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

/* Die aktuelle Seite ist nicht nur farbig markiert - Farbe allein waere
 * kein Unterscheidungsmerkmal (WCAG 1.4.1). */
.kopf__navigation a[aria-current="page"] {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

/* ----------------------------------------------------------- Brotkrume */

/* Sichtbar seit 21.09.2026 (Partial Seite/Brotkrume). Verweise 44 px hoch:
 * Die Erklaerungen zur Barrierefreiheit sagen "Schaltflaechen und Verweise
 * sind mindestens 44 x 44 Pixel gross" - das gilt auch hier. Der Pfeil
 * zwischen den Eintraegen ist eine gedrehte Kante, kein Zeichen im Text:
 * "›" als content wuerde von manchen Vorleseprogrammen mitgelesen. */
.brotkrume {
    padding-block: var(--space-2) 0;
    font-size: var(--text-klein);
    color: var(--muted);
}

.brotkrume ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
}

.brotkrume li {
    display: flex;
    align-items: center;
}

.brotkrume li + li::before {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-inline: 0.5em 0.75em;
}

.brotkrume a,
.brotkrume [aria-current] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.brotkrume a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.brotkrume [aria-current] {
    color: var(--ink);
}

/* ----------------------------------------------------------------- Fuss */

.fuss {
    margin-top: var(--space-8);
    border-top: 1px solid var(--line);
    padding-block: var(--space-6);
    font-size: var(--text-klein);
}

.fuss__reihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    justify-content: space-between;
}

.fuss__block p {
    margin: 0 0 var(--space-2);
}

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

.fuss__block li + li {
    margin-top: var(--space-2);
}

/* 44 px, nicht 32: Die Erklaerungen zur Barrierefreiheit sagen "mindestens
 * 44 x 44 Pixel" fuer alle Verweise. WCAG verlangt 24 - versprochen sind 44,
 * also gelten 44. (Aufgefallen am 21.09.2026, als der Fuss erstmals
 * Eintraege zeigte.) */
.fuss__block a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.fuss__block li + li {
    margin-top: 0;
}

.fuss__traeger {
    color: var(--muted);
}

.fuss__betreiber {
    margin-top: var(--space-5);
    color: var(--muted);
}

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

.aufmacher__raster {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 900px) {
    .aufmacher__raster {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }
}

.aufmacher__kicker {
    margin: 0 0 var(--space-2);
    color: var(--muted);
    font-size: var(--text-klein);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.aufmacher__antwort {
    font-size: var(--text-gross);
}

.aufmacher__verweis {
    margin-top: var(--space-5);
}

/* ------------------------------------------------------------ Belegband */

.belegband__liste {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    max-width: none;
}

@media (min-width: 640px) {
    .belegband__liste {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

.belegband__eintrag {
    border-top: 3px solid var(--accent-kontur);
    padding-top: var(--space-3);
}

.belegband__zahl {
    font-size: var(--h2);
    font-weight: 600;
    line-height: var(--zeile-titel);
}

.belegband__text {
    margin: var(--space-2) 0 0;
    color: var(--muted);
}

.belegband__quelle {
    margin-top: var(--space-5);
    font-size: var(--text-klein);
    color: var(--muted);
}

/* ---------------------------------------------------------- Schwester */

.schwester__innen {
    border-top: 1px solid var(--line);
    padding-top: var(--space-6);
    max-width: var(--spalte);
}

.schwester h2 {
    margin-top: 0;
    font-size: var(--h3);
}

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

.bild {
    margin: 0;
}

.bild img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-2);
}

/* ------------------------------------------------------- Leistungsfelder */

.leistungsfelder__raster {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 640px) {
    .leistungsfelder__raster {
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    }
}

.leistungsfeld h3 {
    margin-top: 0;
}

/* ------------------------------------------------------------------ Fall */

.fall__innen {
    max-width: var(--spalte);
    border-left: 3px solid var(--accent-kontur);
    padding-left: var(--space-5);
}

.fall__hinweis {
    color: var(--muted);
    font-size: var(--text-klein);
}

/* ---------------------------------------------------------- Einstieg */

.einstieg__innen {
    max-width: var(--spalte);
}

.einstieg__preis {
    margin-top: var(--space-5);
}

.einstieg__betrag {
    font-size: var(--h2);
    font-weight: 600;
}

.einstieg__zusatz {
    display: block;
    color: var(--muted);
    font-size: var(--text-klein);
}

/* ------------------------------------------------------------ Entlastung */

.entlastung__innen {
    max-width: var(--spalte);
}

.entlastung__liste {
    list-style: none;
    padding: 0;
}

.entlastung__liste li {
    position: relative;
    padding-left: var(--space-5);
    margin-bottom: var(--space-3);
}

/* Der Punkt ist Schmuck und wird fuer Screenreader ausgeblendet -
 * vorgelesen wird der Text, nicht "Aufzaehlungszeichen". */
.entlastung__liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--accent-kontur);
}

/* ------------------------------------------------------------ Versprechen */

.versprechen__innen {
    max-width: var(--spalte);
}

.versprechen__satz {
    font-size: var(--h2);
    line-height: var(--zeile-titel);
    margin: 0;
}

.versprechen__zusatz {
    margin-top: var(--space-4);
    color: var(--muted);
}

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

.ablauf__innen {
    max-width: var(--spalte);
}

.ablauf__liste {
    counter-reset: schritt;
    list-style: none;
    padding: 0;
}

.ablauf__liste li {
    counter-increment: schritt;
    position: relative;
    padding-left: var(--space-7);
    margin-bottom: var(--space-5);
    min-height: 2.5rem;
}

.ablauf__liste li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent-kontur);
    border-radius: 50%;
    font-weight: 600;
}

/* ---------------------------------------------------------------- Pakete */

.pakete__raster {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 640px) {
    .pakete__raster {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }
}

/* Alle Pakete sehen gleich aus. Keine Hervorhebung, keine "Empfehlung" -
 * die Entscheidung gehoert dem Leser. */
.paket {
    border: 1px solid var(--line);
    border-radius: var(--radius-2);
    padding: var(--space-5);
}

/* Die Ebene der Paketueberschrift richtet sich nach der Gliederung der
 * Seite (h2 oder h3), die Groesse nicht: Ein Paket sieht immer gleich
 * aus. Ebene ist Bedeutung, Groesse ist Gestaltung - wer beides koppelt,
 * waehlt die Ueberschriftenebene nach dem Aussehen und baut damit die
 * Sprungmarken kaputt, von denen Screenreader leben. */
.paket__name {
    margin-top: 0;
    font-size: var(--h3);
}

.paket__betrag {
    font-size: var(--h3);
    font-weight: 600;
}

.paket__intervall {
    color: var(--muted);
}

.paket__leistungen {
    margin: var(--space-4) 0 0;
    padding-left: var(--space-5);
}

.pakete__fussnote {
    margin-top: var(--space-5);
    font-size: var(--text-klein);
    color: var(--muted);
}

/* ------------------------------------------------------------------- FAQ */

.faq__innen {
    max-width: var(--spalte);
}

.faq__eintrag {
    border-bottom: 1px solid var(--line);
}

.faq__eintrag summary {
    padding: var(--space-4) 0;
    cursor: pointer;
    font-weight: 600;
    /* Zielgroesse: die ganze Zeile ist anklickbar, mindestens 44px hoch. */
    min-height: 44px;
    display: flex;
    align-items: center;
}

.faq__antwort {
    padding-bottom: var(--space-4);
}

/* --------------------------------------------------------------- Tabellen */

/* Bei schmalem Fenster rollt die Tabelle waagerecht - der Bereich ist
 * fokussierbar (tabindex="0"), sonst kaeme man per Tastatur nicht an den
 * abgeschnittenen Teil (WCAG 2.1.1). */
.tabelle__rollbereich {
    overflow-x: auto;
}

.tabelle {
    border-collapse: collapse;
    width: 100%;
    max-width: none;
}

.tabelle caption {
    text-align: left;
    color: var(--muted);
    font-size: var(--text-klein);
    padding-bottom: var(--space-3);
}

.tabelle th,
.tabelle td {
    border-bottom: 1px solid var(--line);
    padding: var(--space-3);
    text-align: left;
    vertical-align: top;
}

.tabelle thead th {
    border-bottom-width: 2px;
}

/* ------------------------------------------------------------ Forschung */

.fragehero__innen,
.ergebnisse__innen {
    max-width: var(--spalte);
}

.ergebnis {
    margin-bottom: var(--space-6);
}

.ergebnis__liste dt {
    font-weight: 600;
    margin-top: var(--space-3);
}

.ergebnis__liste dd {
    margin: 0;
}

/* ---------------------------------------------------------------- Zitat */

.zitat__innen {
    max-width: var(--spalte);
}

.zitat__figur {
    margin: 0;
}

.zitat__text {
    margin: 0;
    font-size: var(--text-gross);
    border-left: 3px solid var(--accent-kontur);
    padding-left: var(--space-5);
}

.zitat__person {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-left: var(--space-5);
}

.zitat__person .bild img {
    width: 4rem;
    border-radius: 50%;
}

.zitat__name {
    font-weight: 600;
}

.zitat__rolle {
    color: var(--muted);
}

/* -------------------------------------------------------------- Kontakt */

.kontakt__innen {
    max-width: var(--spalte);
}

.kontakt__wege {
    list-style: none;
    padding: 0;
}

.kontakt__wege a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--text-gross);
}

.kontakt--direkt .kontakt__wege a {
    font-size: var(--h3);
}

.kontakt__name {
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.kontakt__hinweis {
    color: var(--muted);
    font-size: var(--text-klein);
}

.kontakt--persoenlich .bild img {
    width: 8rem;
    border-radius: 50%;
}

/* --------------------------------------------------------- Platzhalter */

.platzhalter__innen {
    max-width: var(--spalte);
    padding-block: var(--space-7);
}

.platzhalter__satz {
    font-size: var(--text-gross);
}

.platzhalter__traeger {
    color: var(--muted);
}

/* ------------------------------------------- Standardelemente (fsc) */

/* Text, Bild und Liste kommen aus fluid_styled_content und bringen ihr
 * eigenes Markup mit ("frame"). Sie bekommen hier dasselbe Raster wie die
 * eigenen Elemente - sonst laufen sie ueber die volle Fensterbreite,
 * waehrend alles andere in der Spalte steht. */
.frame {
    width: 100%;
    max-width: var(--seite);
    margin-inline: auto;
    padding-inline: var(--space-4);
    padding-block: var(--space-5);
}

@media (min-width: 640px) {
    .frame { padding-inline: var(--space-5); }
}

.frame > header > h2 {
    margin-top: 0;
}

/* Verweise im Fliesstext sind unterstrichen - Farbe allein waere kein
 * Unterscheidungsmerkmal (WCAG 1.4.1), und in diesen Texten steht der
 * wichtigste Konversionspunkt als Verweis mitten im Absatz. */
.frame p a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

/* Logo im Kopf. Die Hoehe ist fest, damit beim Laden nichts springt; die
 * Breite ergibt sich aus dem Seitenverhaeltnis, das width und height im
 * Markup vorgeben. */
.kopf__logo {
    width: auto;
    height: 40px;
    margin-right: var(--space-3);
}

/* Logo mit Namen: Die Anzeigehoehe kommt aus dem Site Set. Bei der
 * Werkstattmarke steht der Schriftzug unter Zahnrad und Auto - auf 40 px
 * waere er rund 8 px hoch und damit unlesbar. */
.kopf__logo--wortmarke {
    height: var(--logo-hoehe, 40px);
    max-width: 100%;
    margin-right: 0;
}

@media (max-width: 639px) {
    .kopf__logo--wortmarke {
        height: calc(var(--logo-hoehe, 40px) * 0.8);
    }
}

.kopf__marke {
    gap: 0;
}

/* ======================================================================
 * Bildwelten
 *
 * Acht Auftritte teilen sich dieses Stylesheet. Was sie unterscheidet,
 * ist die Farbwelt aus dem Site Set - und dieser Abschnitt: wie eine
 * Marke Flaechen, Linien und Hintergruende setzt. Der Rumpf traegt dafuer
 * data-motiv; der Wert kommt aus stil.motiv im Site Set.
 *
 * Keine Farbwerte. Jede Regel arbeitet mit den Tokens, deshalb traegt
 * dieselbe Regel in jeder Marke deren eigene Farbe.
 * ================================================================== */

/* --- haarlinie: das Technikhaus --------------------------------------
 * Weiss, viel Luft, Haarlinien statt Schatten. Zurueckhaltung ist hier
 * das Kompetenzsignal - eine Flaeche zu viel, und es sieht nach Agentur
 * aus statt nach Werkstatt fuer Software. */

[data-motiv="haarlinie"] .block + .block > .abschnitt:not(.abschnitt--flaeche):not(.abschnitt--akzent) {
    border-top: 1px solid var(--line);
}

[data-motiv="haarlinie"] .aufmacher {
    padding-block: var(--space-8) var(--space-7);
}

[data-motiv="haarlinie"] .leistungsfelder__raster {
    gap: 0;
}

[data-motiv="haarlinie"] .leistungsfeld {
    border-top: 1px solid var(--line);
    padding: var(--space-5) var(--space-5) var(--space-5) 0;
}

@media (min-width: 640px) {
    /* Vier schmale Spalten mit Haarlinien getrennt, keine Karten. */
    [data-motiv="haarlinie"] .leistungsfeld + .leistungsfeld {
        border-left: 1px solid var(--line);
        padding-left: var(--space-5);
    }
}

[data-motiv="haarlinie"] .paket {
    border-radius: 0;
    border-width: 0;
    border-top: 2px solid var(--ink);
}

/* --- flaeche: das Marketinghaus --------------------------------------
 * Warmes Papier, weiche Flaechen, groessere Schrift. Wo das Technikhaus
 * eine Linie zieht, legt dieses Haus eine Flaeche darunter. */

[data-motiv="flaeche"] .leistungsfeld,
[data-motiv="flaeche"] .paket {
    background: var(--flaeche);
    border: 0;
    border-radius: var(--radius-2);
    padding: var(--space-5);
}

[data-motiv="flaeche"] .abschnitt--flaeche {
    border-radius: var(--radius-2);
}

[data-motiv="flaeche"] .entlastung__liste li {
    padding-block: var(--space-2);
}

[data-motiv="flaeche"] .schwester__innen {
    border-top: 0;
    background: var(--accent-soft);
    border-radius: var(--radius-2);
    padding: var(--space-6);
    max-width: none;
}

/* --- kante: die Werkstattmarke ---------------------------------------
 * Hoher Kontrast, kraeftige Flaechen, Kanten statt Rundungen. Die Sprache
 * der Marke ist kurz und direkt; die Gestaltung ist es auch. */

[data-motiv="kante"] .paket,
[data-motiv="kante"] .leistungsfeld,
[data-motiv="kante"] .bild img {
    border-radius: 0;
}

[data-motiv="kante"] .paket {
    background: var(--panel);
    color: var(--panel-text);
    border: 0;
}

[data-motiv="kante"] .paket__intervall,
[data-motiv="kante"] .paket .paket__hinweis {
    /* Auf der dunklen Flaeche traegt die gedaempfte Textfarbe nicht -
     * sie ist fuer helles Papier gerechnet. Dort steht die volle
     * Textfarbe der Flaeche. */
    color: var(--panel-text);
}

[data-motiv="kante"] .paket :focus-visible {
    outline-color: var(--panel-text);
}

[data-motiv="kante"] .aufmacher {
    border-bottom: 4px solid var(--accent);
}

[data-motiv="kante"] .belegband__eintrag {
    border-top-width: 4px;
}

[data-motiv="kante"] .kontakt--direkt .kontakt__wege a {
    font-size: var(--h2);
    font-family: var(--schrift-zahl);
}

/* --- luft: die Sorgenfrei-Marke --------------------------------------
 * Viel Raum, weiche Rundungen, keine harten Kanten und kein einziges
 * Ausrufezeichen. Die Marke verspricht Ruhe; eine gedraengte Seite
 * widerspraeche dem Versprechen, bevor der erste Satz gelesen ist. */

[data-motiv="luft"] .abschnitt {
    padding-block: var(--space-8);
}

[data-motiv="luft"] .paket,
[data-motiv="luft"] .leistungsfeld {
    border-radius: var(--radius-2);
    padding: var(--space-6);
}

[data-motiv="luft"] .aufmacher {
    background: var(--accent-soft);
    border-radius: var(--radius-2);
    padding: var(--space-7) var(--space-5);
}

[data-motiv="luft"] .faq__eintrag summary {
    padding-block: var(--space-5);
}

/* --- raster: die Plattform -------------------------------------------
 * Ein feines Linienraster, an Kartenprojektionen erinnernd - der Name
 * der Marke kommt von einer. Sehr dezent: die Linien liegen bei rund
 * 6 % Deckkraft und treten hinter jedem Text zurueck.
 *
 * Schmuck, kein Inhalt: Wer das Raster nicht sieht, verpasst nichts. */

[data-motiv="raster"] .aufmacher,
[data-motiv="raster"] .abschnitt--flaeche {
    background-image:
        repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 64px);
    background-position: center;
}

[data-motiv="raster"] .aufmacher__raster,
[data-motiv="raster"] .kennzahlen__innen {
    position: relative;
}

[data-motiv="raster"] .kennzahlen .belegband__zahl,
[data-motiv="raster"] .tabelle td {
    font-variant-numeric: tabular-nums;
}

/* --- papier: Forschung und Coaching ----------------------------------
 * Ein einspaltiger Textkoerper mit grosszuegigem Satzspiegel, wie ein
 * gut gesetztes Papier. Keine Karten, keine Symbole, keine Farbflaechen.
 * Der einzige Schmuck ist eine Haarlinie. */

[data-motiv="papier"] .abschnitt {
    padding-block: var(--space-6);
}

[data-motiv="papier"] .block + .block > .abschnitt {
    border-top: 1px solid var(--line);
}

[data-motiv="papier"] .abschnitt--flaeche {
    background: transparent;
}

[data-motiv="papier"] .leistungsfelder__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    max-width: var(--spalte);
}

[data-motiv="papier"] .leistungsfeld h3 {
    font-size: var(--h3);
}

[data-motiv="papier"] p {
    line-height: 1.7;
}

/* ======================================================================
 * Bildplatz
 *
 * Eine beschriftete Flaeche dort, wo spaeter eine echte Aufnahme steht.
 * Sie ist kein Platzhalterbild und kein Stockfoto, sondern eine
 * Verabredung: Hier gehoert dieses Motiv hin, und bis es da ist, sieht
 * man, dass es fehlt.
 *
 * Nach Artikel 50 der KI-Verordnung duerfen an diesen Stellen - Person,
 * Arbeitsplatz, Werkstatt - keine erzeugten Bilder stehen. Deshalb bleibt
 * die Flaeche leer, statt sich mit etwas Erfundenem zu fuellen.
 * ================================================================== */

/* Seit 22.09.2026 fuer Bild, Video und Ton gleich (Partial Medienplatz):
 * die Flaeche hat das Seitenverhaeltnis der spaeteren Aufnahme, damit die
 * Seite schon so aussieht wie mit Bild - ein "Testbild" in der Markenfarbe,
 * nicht ein grauer Kasten. Die Schraffur ist ein Hintergrund, kein Bild. */
.medienplatz {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-2);
    /* Ohne width laesst aspect-ratio die Breite aus der Hoehe wachsen. */
    width: 100%;
    padding: var(--space-5);
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 9%, transparent) 0 2px,
            transparent 2px 14px),
        color-mix(in srgb, var(--accent) 7%, var(--paper));
    border: 1px dashed var(--accent-kontur);
    border-radius: var(--radius-2);
    color: var(--muted);
    font-size: var(--text-klein);
    overflow-wrap: anywhere;
}

/* min-height gibt es nur ohne Seitenverhaeltnis.
 *
 * Gemessen am 21.09.2026, Strukturpruefstand: min-height 14rem zusammen
 * mit aspect-ratio 16:9 rechnet eine Breite von 398px - auf einem 375px
 * breiten Telefon ragten 23px heraus (WCAG 1.4.10). */
.medienplatz--breit { aspect-ratio: 16 / 9; }
.medienplatz--hoch { aspect-ratio: 3 / 4; max-width: 30rem; }
.medienplatz--quadrat { aspect-ratio: 1; max-width: 30rem; }
.medienplatz--frei { min-height: 9rem; }

/* Auf dem Telefon ist 16:9 zu niedrig fuer Zeichen und Auftrag. */
@media (max-width: 40em) {
    .medienplatz--breit { aspect-ratio: 4 / 3; }
    /* Auf dem Telefon reicht die Hoehe nicht fuer Zeichen UND Auftrag
     * uebereinander in der Mitte - das Zeichen lag auf dem Text
     * (Bildschirmfoto 22.09.2026). Also: Zeichen oben, Text unten. */
    .medienplatz { justify-content: space-between; }
    .medienplatz .medienplatz__zeichen { position: static; margin: 0; width: 2.5rem; }
}

.medienplatz__zeichen {
    position: absolute;
    inset: 0;
    margin: auto;
    width: clamp(2.5rem, 12%, 4.5rem);
    height: auto;
    color: var(--accent-kontur);
    opacity: 0.55;
}

.medienplatz--audio .medienplatz__zeichen,
.medienplatz--frei .medienplatz__zeichen {
    position: static;
    margin: 0;
    width: 3rem;
}

.medienplatz__motiv {
    position: relative;
    margin: 0;
    color: var(--ink);
    max-width: 60ch;
}

.medienplatz__art {
    font-weight: 600;
}

.medienplatz__hinweis {
    position: relative;
    margin: 0;
    max-width: 60ch;
}

/* Im Aufmacher auf dunklem Grund (kontrast, kante): Schrift hell. */
.startseite > .block:first-child > .aufmacher .medienplatz {
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 16%, transparent) 0 2px,
            transparent 2px 14px),
        color-mix(in srgb, var(--accent) 10%, var(--paper));
}
[data-motiv="kontrast"] .startseite > .block:first-child > .aufmacher .medienplatz,
[data-motiv="kante"] .startseite > .block:first-child > .aufmacher .medienplatz {
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 22%, transparent) 0 2px,
            transparent 2px 14px),
        color-mix(in srgb, var(--panel-text) 6%, var(--panel));
    border-color: var(--accent);
    color: var(--panel-text);
}
[data-motiv="kontrast"] .startseite > .block:first-child > .aufmacher .medienplatz__motiv,
[data-motiv="kante"] .startseite > .block:first-child > .aufmacher .medienplatz__motiv {
    color: var(--panel-text);
}
[data-motiv="kontrast"] .startseite > .block:first-child > .aufmacher .medienplatz__zeichen,
[data-motiv="kante"] .startseite > .block:first-child > .aufmacher .medienplatz__zeichen {
    color: var(--accent);
}

/* ------------------------------------------------------ Video und Ton */

.medium__innen > * + * {
    margin-top: var(--space-4);
}

.medium__beschreibung {
    max-width: var(--spalte);
    font-size: var(--text-gross);
}

.medium__rahmen {
    margin: var(--space-5) 0 0;
}

.medium__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--panel);
    border-radius: var(--radius-2);
}

.medium__audio {
    display: block;
    width: 100%;
    max-width: 40rem;
}

/* Fokus auf dem Abspieler. Die Knoepfe des Browsers (Abspielen, Ton,
 * Vollbild) liegen in seinem eigenen Schatten-DOM und zeigen den Fokus
 * je nach Browser kaum - auf dem Telefon gar nicht (Tastaturpruefung
 * 22.09.2026: "kein Fokusring: video", dreimal hintereinander). Der
 * Rahmen um den ganzen Abspieler macht sichtbar, wo man steht (2.4.7). */
.medium__video:focus,
.medium__video:focus-within,
.medium__audio:focus,
.medium__audio:focus-within {
    outline: var(--fokus-breite) solid var(--fokus-farbe);
    outline-offset: var(--fokus-abstand);
}

.medium__angaben {
    margin-top: var(--space-2);
    color: var(--muted);
    font-size: var(--text-klein);
}

.medium__text {
    max-width: var(--spalte);
    border-top: 1px solid var(--line);
    padding-top: var(--space-3);
}

.medium__text summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    cursor: pointer;
}

.medium__sprechtext {
    max-width: var(--spalte);
}

.medium__sprechtext--offen {
    margin-top: var(--space-5);
    padding: var(--space-5);
    background: var(--flaeche);
    border-radius: var(--radius-2);
}

.medium__sprechtext--offen h3 {
    margin-top: 0;
    font-size: var(--text-basis);
}

/* ======================================================================
 * Vertiefung: laengere Texte auf den Unterseiten
 *
 * Die Startseite antwortet in einem Satz. Die Unterseiten erklaeren -
 * fuer Leser, die es genau wissen wollen, und fuer Systeme, die aus
 * diesen Seiten Antworten bauen. Beide brauchen zusammenhaengenden Text
 * mit Ueberschriften, nicht Stichworte in Kacheln.
 * ================================================================== */

.vertiefung__innen {
    max-width: var(--spalte);
}

.vertiefung h2 {
    margin-top: 0;
}

.vertiefung h3 {
    margin-top: var(--space-6);
}

.vertiefung__einstieg {
    font-size: var(--text-gross);
}

/* Frage-und-Antwort im Fliesstext: die Frage ist eine Ueberschrift, die
 * Antwort steht darunter. So findet sie auch, wer die Seite nicht liest,
 * sondern durchsucht. */
.vertiefung dl dt {
    font-weight: 600;
    margin-top: var(--space-5);
}

.vertiefung dl dd {
    margin: var(--space-2) 0 0;
    max-width: var(--spalte);
}

/* Menue auf dem Telefon: eine Zeile zum Wischen statt zwei bis drei
 * umbrochener Zeilen. Gemessen am 21.09.2026 (Bildschirmfotos 390 px):
 * Bei WWE Media standen drei Menuezeilen vor der Hauptaussage.
 *
 * Kein JavaScript, kein Aufklappmenue. Schatten am Rand zeigen, dass es
 * weitergeht - als Hintergrund, nicht als ueberlagerndes Element: Ein
 * Verlauf ueber dem Text wuerde den Fokus des letzten sichtbaren Eintrags
 * verdecken (WCAG 2.4.11), ein Hintergrund liegt dahinter.
 * (Technik: "scroll shadows", Hintergruende mit attachment local/scroll.) */
@media (max-width: 47.99em) {
    .kopf {
        padding-block: var(--space-2);
    }
    .kopf__reihe {
        gap: 0;
    }
    .kopf__navigation {
        width: 100%;
    }
    .kopf__navigation ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: var(--space-5);
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        background:
            linear-gradient(to right, var(--paper) 30%, transparent) left / 2rem 100% no-repeat local,
            linear-gradient(to left, var(--paper) 30%, transparent) right / 2rem 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.16), transparent) left / 0.75rem 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.16), transparent) right / 0.75rem 100% no-repeat scroll;
    }
    .kopf__navigation ul::-webkit-scrollbar {
        display: none;
    }
    .kopf__navigation li {
        flex: none;
    }
}

/* Aufmacher der Startseite in der Markenfarbe (Entscheidung 21.09.2026).
 * Bis dahin war nur internet-sorgenfrei.de eingefaerbt; die uebrigen
 * Startseiten begannen weiss, die Marke zeigte sich nur am Knopf.
 *
 * Flaeche: --accent-soft, die helle Toenung jeder Marke - Schrift und
 * gedaempfte Schrift sind darauf gerechnet (Kontraste im Site Set).
 * Kante und Knopfrand: --accent-kontur, die Fassung der Markenfarbe, die
 * als Linie 3:1 erreicht. Das helle Orange von WWE Media oder das Gelb der
 * Kfz-Webstatt waeren als Rand auf der Toenung kaum zu sehen.
 *
 * Ausnahmen: "luft" (Internet Sorgenfrei) hat seine Karte schon, "kante"
 * (Kfz-Webstatt) behaelt seine gelbe Kante - das Erkennungszeichen der
 * Live-Seite. Maverick RDD beginnt mit der Frage statt dem Aufmacher und
 * wird genauso eingefaerbt. My-Sportsportal bleibt neutral: Eine geparkte
 * Seite in Markenfarbe saehe nach einem Angebot aus, das es nicht gibt. */
body:not([data-motiv="luft"]) .startseite > .block:first-child > .aufmacher,
.startseite > .block:first-child > .fragehero {
    background-color: var(--accent-soft);
}
body:not([data-motiv="luft"]):not([data-motiv="kante"]):not([data-motiv="kontrast"]) .startseite > .block:first-child > .aufmacher,
.startseite > .block:first-child > .fragehero {
    border-bottom: 4px solid var(--accent-kontur);
}
.startseite > .block:first-child > .aufmacher .knopf,
.startseite > .block:first-child > .fragehero .knopf {
    border-color: var(--accent-kontur);
}
/* --- kontrast: WWE Media nach dem Figma-Entwurf -------------------------
 * Figma "wwe-media.de" (Entwurf, gesichtet 21.09.2026): dunkles Petrol
 * (#0D1C24) im Wechsel mit hellen Abschnitten, Orange (#FF8400) als
 * einziger Akzent, grosse orange Kennzahlen auf Dunkel, Fragen als graue
 * Karten mit rundem Knopf, dunkler Kontaktblock und Fuss.
 *
 * Kontraste (gerechnet):
 *   Orange auf Petrol  7,1:1   - Kennzahlen, Kicker, Knopf-Rand
 *   Petrol auf Orange  7,1:1   - Knopfschrift (akzent_text)
 *   Weiss auf Petrol  17,2:1   - Text auf dunklen Flaechen
 *   Weiss auf Orange   2,4:1   - NICHT benutzt
 *   Orange auf Weiss   2,4:1   - NICHT benutzt; Linien auf Hell tragen
 *                               akzent_kontur (#A85400)
 * Auf den dunklen Flaechen steht die volle helle Textfarbe, nie
 * --muted: die ist fuer helles Papier gerechnet. */

body[data-motiv="kontrast"] .startseite > .block:first-child > .aufmacher,
[data-motiv="kontrast"] .belegband,
[data-motiv="kontrast"] .kontakt,
[data-motiv="kontrast"] .fuss {
    background: var(--panel);
    color: var(--panel-text);
}

body[data-motiv="kontrast"] .startseite > .block:first-child > .aufmacher {
    padding-block: var(--space-8);
}

/* Orange nur auf Dunkel. Auf den hellen Unterseiten traegt der Kicker die
 * dunklere Fassung (akzent_kontur, 5,3:1 auf Weiss) - das reine Orange
 * haette dort 2,4:1 (axe, /forschung, 21.09.2026). */
[data-motiv="kontrast"] .aufmacher__kicker {
    color: var(--accent-kontur);
}
[data-motiv="kontrast"] .startseite > .block:first-child > .aufmacher .aufmacher__kicker,
[data-motiv="kontrast"] .belegband__zahl {
    color: var(--accent);
}

[data-motiv="kontrast"] .belegband__zahl {
    font-size: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
    font-weight: 300;
    letter-spacing: -0.01em;
}

[data-motiv="kontrast"] .belegband__eintrag {
    border-top-color: var(--accent);
}

[data-motiv="kontrast"] .belegband__text,
[data-motiv="kontrast"] .belegband__quelle,
[data-motiv="kontrast"] .kontakt__hinweis,
[data-motiv="kontrast"] .fuss__traeger,
[data-motiv="kontrast"] .fuss__betreiber,
[data-motiv="kontrast"] .kontakt a,
[data-motiv="kontrast"] .fuss a {
    color: var(--panel-text);
}

[data-motiv="kontrast"] .startseite > .block:first-child > .aufmacher .knopf,
[data-motiv="kontrast"] .kontakt .knopf {
    border-color: var(--accent);
}

[data-motiv="kontrast"] .startseite > .block:first-child > .aufmacher :focus-visible,
[data-motiv="kontrast"] .belegband :focus-visible,
[data-motiv="kontrast"] .kontakt :focus-visible,
[data-motiv="kontrast"] .fuss :focus-visible {
    outline-color: var(--panel-text);
}

[data-motiv="kontrast"] .fuss {
    margin-top: 0;
    border-top: 0;
}

/* Fragen als graue Karten mit rundem Knopf (Figma). Das Plus ist Schmuck:
 * "content: … / ''" gibt ihm einen leeren Vorlesetext, sonst sagte ein
 * Vorleseprogramm vor jeder Frage "plus". Geoeffnet: Kreuz auf Orange. */
[data-motiv="kontrast"] .faq__eintrag {
    background: var(--flaeche);
    border: 0;
    border-radius: var(--radius-2);
    margin-bottom: var(--space-3);
    padding-inline: var(--space-5);
}

[data-motiv="kontrast"] .faq__eintrag summary {
    list-style: none;
    justify-content: space-between;
    gap: var(--space-4);
}

[data-motiv="kontrast"] .faq__eintrag summary::-webkit-details-marker {
    display: none;
}

[data-motiv="kontrast"] .faq__eintrag summary::after {
    content: "+" / "";
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--panel);
    color: var(--panel-text);
    font-weight: 400;
    line-height: 1;
}

[data-motiv="kontrast"] .faq__eintrag[open] summary::after {
    content: "\00D7" / "";
    background: var(--accent);
    color: var(--accent-text);
}
/* Kontakt als Knopf im Kopf (Figma: orange Schaltflaeche oben rechts).
 * Nur beim Motiv "kontrast", und nur fuer den letzten Menuepunkt - der ist
 * auf wwe-media.de "Kontakt". Petrol auf Orange 7,1:1. */
@media (min-width: 48em) {
    [data-motiv="kontrast"] .kopf__navigation li:last-child a {
        background: var(--accent);
        color: var(--accent-text);
        border-radius: var(--radius-2);
        padding-inline: var(--space-4);
        text-decoration: none;
    }
    [data-motiv="kontrast"] .kopf__navigation li:last-child a:hover {
        background: var(--ink);
        color: var(--paper);
    }
    /* Logo und Menue in einer Zeile, wie im Entwurf. */
    [data-motiv="kontrast"] .kopf__reihe {
        flex-wrap: nowrap;
    }
    [data-motiv="kontrast"] .kopf__navigation ul {
        justify-content: flex-end;
        gap: var(--space-2) var(--space-4);
    }
}

/* Der Kennzahlenstreifen folgt auf der Startseite direkt dem dunklen
 * Aufmacher. Ein eigener Ton trennt beide - sonst stand ein einziger
 * dunkler Block da (Bildschirmfoto 21.09.2026). Weiss auf dem helleren
 * Petrol: 14,6:1, Orange darauf 6,0:1. */
[data-motiv="kontrast"] .belegband {
    background: color-mix(in srgb, var(--panel) 88%, var(--panel-text));
}
/* WWE Media: Menue auf grossen Bildschirmen eine Stufe kleiner, damit
 * sieben Punkte und der Kontakt-Knopf in einer Zeile neben dem Logo
 * stehen (Figma). Mit Hind in Grundgroesse brach "Kontakt" um. */
@media (min-width: 48em) {
    [data-motiv="kontrast"] .kopf__navigation {
        font-size: var(--text-klein);
    }
}

/* Bis echte Fotos da sind (Figma: dunkles Bild rechts im Aufmacher):
 * die Bildmarke gross und rein schmueckend in der rechten Spalte. Als
 * Hintergrund einer Pseudo-Flaeche - kein Bild im Inhalt, nichts fuer
 * Vorleseprogramme. Grau der Marke auf Petrol 5,2:1, Orange 6,6:1. */
@media (min-width: 900px) {
    [data-marke="wwe_media"] .startseite > .block:first-child > .aufmacher .aufmacher__raster:not(:has(.medienplatz, .bild))::after {
        content: "";
        justify-self: center;
        width: min(22rem, 80%);
        aspect-ratio: 1;
        background: url('../Logos/wwe-media-bildmarke.svg') center / contain no-repeat;
        opacity: 0.9;
    }
}
/* Kfz-Webstatt: Aufmacher der Startseite auf dem dunklen Panel.
 * Lovable-Vorgabe der Marke: "hoher Kontrast, kraeftige Flaechen, dunkle
 * Panels". Die gelbe Toenung (21.09.2026 vormittags) war dafuer zu leise.
 * Kontraste: Weiss auf Panel (#00344D) 12,6:1, Gelb (#EEBB2E) auf Panel
 * 7,5:1 (Kicker, Kante), Knopf Panelblau auf Gelb 7,5:1. */
body[data-motiv="kante"] .startseite > .block:first-child > .aufmacher {
    background: var(--panel);
    color: var(--panel-text);
    border-bottom: 6px solid var(--accent);
    padding-block: var(--space-8);
}
body[data-motiv="kante"] .startseite > .block:first-child > .aufmacher .aufmacher__kicker {
    color: var(--accent);
    font-family: var(--schrift-zahl);
    font-weight: 500;
}
body[data-motiv="kante"] .startseite > .block:first-child > .aufmacher h1 {
    font-weight: 700;
    letter-spacing: -0.01em;
}
body[data-motiv="kante"] .startseite > .block:first-child > .aufmacher .knopf {
    border-color: var(--accent);
}
body[data-motiv="kante"] .startseite > .block:first-child > .aufmacher :focus-visible {
    outline-color: var(--panel-text);
}
/* Stand der Seite, unter dem Inhalt (Layout Default). Leise, aber
 * gedaempft mit 4,5:1 - es ist Information, kein Schmuck. */
.seitenstand {
    margin-block: var(--space-6) var(--space-4);
    color: var(--muted);
    font-size: var(--text-klein);
}
.seitenstand p {
    margin: 0;
}

/* ======================================================================
 * Darstellung: die vier Einstellungen an jedem Inhaltselement
 * (ContentBlocks/Basics/Darstellung.yaml, Huelle aus setup.typoscript).
 *
 * Nur Ton, Breite, Abstand und Sprungmarke. Farben und Schriften bleiben
 * beim Site Set - sonst gaelten die gemessenen Kontraste nicht mehr.
 * ================================================================== */

.sprungziel {
    display: block;
    height: 0;
    /* Ueber dem Ziel bleibt Luft, damit die Ueberschrift nach dem Sprung
     * nicht am oberen Rand klebt. */
    scroll-margin-top: var(--space-6);
}

/* --- Ton: die Flaeche des Abschnitts --------------------------------- */

.block[data-ton="flaeche"] > .abschnitt {
    background: var(--flaeche);
}

.block[data-ton="weich"] > .abschnitt {
    background: var(--accent-soft);
}

.block[data-ton="panel"] > .abschnitt {
    background: var(--panel);
    color: var(--panel-text);
}

/* Auf der dunklen Flaeche bekommen die gedaempften Texte, Linien und der
 * Fokusring eigene Werte - sonst faellt der Kontrast unter 4,5:1. */
.block[data-ton="panel"] .kicker,
.block[data-ton="panel"] .aufmacher__kicker,
.block[data-ton="panel"] figcaption,
.block[data-ton="panel"] .medium__angaben {
    color: color-mix(in srgb, var(--panel-text) 78%, var(--panel));
}

.block[data-ton="panel"] :focus-visible {
    outline-color: var(--panel-text);
}

.block[data-ton="panel"] a:not(.knopf) {
    color: var(--panel-text);
}

.block[data-ton="linie"] > .abschnitt {
    border-top: 1px solid var(--line);
}

/* Zwei gleiche Toene hintereinander sollen nicht zu einem Block
 * verschmelzen: Der zweite ruecken zusammen, statt doppelt zu polstern. */
.block[data-ton="flaeche"] + .block[data-ton="flaeche"] > .abschnitt,
.block[data-ton="panel"] + .block[data-ton="panel"] > .abschnitt,
.block[data-ton="weich"] + .block[data-ton="weich"] > .abschnitt {
    padding-block-start: 0;
}

/* --- Breite ---------------------------------------------------------- */

.block[data-breite="schmal"] .seite {
    max-width: calc(var(--spalte) + 2 * var(--space-5));
}

.block[data-breite="breit"] .seite {
    max-width: 90rem;
}

/* Randlos: nur fuer Bilder und Flaechen gedacht. Der Rand von 16 px
 * entfaellt, die Breite bleibt bei 100 % - kein waagerechtes Scrollen. */
.block[data-breite="voll"] .seite {
    max-width: none;
    padding-inline: 0;
}

/* --- Abstand --------------------------------------------------------- */

.block[data-abstand="eng"] > .abschnitt { padding-block: var(--space-5); }
.block[data-abstand="weit"] > .abschnitt { padding-block: var(--space-8); }
.block[data-abstand="ohne"] > .abschnitt { padding-block: 0; }

/* --- Mehrzeilige Ueberschrift ----------------------------------------
 *
 * Eine h1 aus mehreren Zeilen, jede mit eigener Farbe, Schrift, Schnitt
 * und Groesse (hero-claim, Feld "Ueberschrift in Zeilen"). Die Auswahl
 * ist absichtlich klein: Alles kommt aus den Marken-Rollen, damit die
 * gemessenen Kontraste gelten.
 *
 * "akzent" nimmt auf hellem Grund die dunklere Fassung der Markenfarbe
 * (akzent_kontur, mindestens 4,5:1), auf dunklen Flaechen die helle -
 * dort traegt sie (z. B. Orange auf Petrol 7,1:1).
 */
.titelzeile {
    display: block;
}

.titelzeile[data-betonung="akzent"] { color: var(--accent-kontur); }
.titelzeile[data-betonung="gedaempft"] { color: var(--muted); }

[data-motiv="kontrast"] .startseite > .block:first-child > .aufmacher .titelzeile[data-betonung="akzent"],
[data-motiv="kante"] .startseite > .block:first-child > .aufmacher .titelzeile[data-betonung="akzent"],
.block[data-ton="panel"] .titelzeile[data-betonung="akzent"] {
    color: var(--accent);
}
[data-motiv="kontrast"] .startseite > .block:first-child > .aufmacher .titelzeile[data-betonung="gedaempft"],
[data-motiv="kante"] .startseite > .block:first-child > .aufmacher .titelzeile[data-betonung="gedaempft"],
.block[data-ton="panel"] .titelzeile[data-betonung="gedaempft"] {
    color: color-mix(in srgb, var(--panel-text) 78%, var(--panel));
}

.titelzeile[data-schrift="text"] { font-family: var(--schrift-text); }
.titelzeile[data-schrift="zahl"] { font-family: var(--schrift-zahl); }

.titelzeile[data-gewicht="leicht"] { font-weight: 300; }
.titelzeile[data-gewicht="fett"] { font-weight: 700; }

/* Groessen bleiben in der Titelskala: eine Stufe kleiner ist die
 * Vorzeile, eine Stufe groesser die Schlagzeile. */
.titelzeile[data-groesse="klein"] {
    font-size: var(--h3);
    letter-spacing: 0.01em;
}
.titelzeile[data-groesse="gross"] {
    font-size: calc(var(--h1) * 1.2);
}

/* Die Huelle selbst ist nur ein Traeger: Sie darf im Raster nichts
 * ausrichten und nichts abschneiden (22.09.2026, nach dem Einbau der
 * Darstellungsoptionen - der dunkle Aufmacher der Werkstattmarke fiel
 * aus, weil .startseite > .aufmacher:first-child nicht mehr zutraf). */
.block {
    display: block;
}

/* ======================================================================
 * Einwilligung in die Messung (Partial Seite/Messung, Js/messung.js)
 *
 * Unten angeheftet, ueber dem Inhalt, aber nicht als Sperre: Man kann die
 * Seite weiter lesen und scrollen. Zustimmen und Ablehnen sehen gleich
 * aus - ein hervorgehobener Zustimmungsknopf waere keine freiwillige
 * Einwilligung.
 * ================================================================== */

.einwilligung {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    background: var(--panel);
    color: var(--panel-text);
    border-top: 3px solid var(--accent);
    padding-block: var(--space-5);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
}

.einwilligung__innen {
    display: grid;
    gap: var(--space-3);
}

.einwilligung__titel {
    margin: 0;
    font-size: var(--h3);
}

.einwilligung__text {
    margin: 0;
    max-width: var(--spalte);
    font-size: var(--text-klein);
}

.einwilligung__knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* Beide Knoepfe gleich: gleiche Farbe, gleiche Groesse, nebeneinander. */
.einwilligung .knopf {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
}

.einwilligung__mehr {
    color: var(--panel-text);
}

.einwilligung :focus-visible {
    outline-color: var(--panel-text);
}

/* Der Widerruf im Fuss sieht aus wie die uebrigen Fussverweise. */
.fuss__widerruf {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ======================================================================
 * Anfrageformular (ContentBlocks/anfrage, Classes/Formular/Anfrage.php)
 *
 * Schlicht und breit genug zum Tippen: Felder 44 px hoch, Beschriftung
 * darueber (nicht daneben - auf dem Telefon bleibt sonst nichts uebrig),
 * Fehlermeldung vor dem Formular.
 * ================================================================== */

.anfrage__formular {
    display: grid;
    gap: var(--space-4);
    max-width: var(--spalte);
    margin-top: var(--space-5);
}

.anfrage__feld {
    display: grid;
    gap: var(--space-2);
}

.anfrage__feld label {
    font-weight: 600;
}

.anfrage__feld input,
.anfrage__feld textarea {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--accent-kontur);
    border-radius: var(--radius-1);
}

.anfrage__feld textarea {
    min-height: 8rem;
    resize: vertical;
}

/* Das Häkchen steht neben seiner Beschriftung, nicht darunter. */
.anfrage__feld--haken {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
}

.anfrage__feld--haken input {
    width: 1.5rem;
    height: 1.5rem;
    min-height: 0;
    margin-top: 0.15rem;
    accent-color: var(--accent-kontur);
}

.anfrage__feld--haken label {
    font-weight: 400;
}

.anfrage__hinweis {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-klein);
}

.anfrage__meldung {
    margin: var(--space-4) 0 0;
    padding: var(--space-4);
    background: var(--accent-soft);
    border-left: 4px solid var(--accent-kontur);
    border-radius: var(--radius-1);
    font-size: var(--text-gross);
}

.anfrage__meldung--fehler {
    background: var(--flaeche);
    border-left-color: var(--ink);
}

/* Der Honigtopf: aus dem Blick, aber nicht display:none - manche
 * Maschinen fuellen nur, was im Markup sichtbar erscheint. */
.anfrage__falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Nur fuer Vorleseprogramme: "Stern" statt eines vorgelesenen Zeichens. */
.anfrage__nurvorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}