/*
 * 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);

    /* EINE SPALTE BRAUCHT GENAUSO EINE GRENZE WIE ZWEI (28.10.2026)
     *
     * Ein Rasterkind darf von sich aus nicht schmaler werden als sein
     * Inhalt ("min-width: auto"). Beim Bildplatz ist dieser Inhalt
     * nicht Text, sondern ein SEITENVERHAELTNIS: Zeichen und Auftrag
     * uebereinander ergeben eine Hoehe, und 4:3 rechnet daraus eine
     * Breite zurueck.
     *
     * Gemessen auf wwe-media.de in einem 320-Punkte-Fenster: Spalte
     * 354,6 Punkte, verfuegbar 288. Die Startseite liess sich 50
     * Punkte waagerecht schieben. Isoliert nachgewiesen - ohne
     * "aspect-ratio" am Bildplatz 288, mit "min-width: 0" an ihm 288,
     * ohne den Bildplatz 288; am Text lag es nicht.
     *
     * Dieselbe Familie wie zwei bereits behobene Stellen: "width: 100%"
     * am Bildplatz (siehe dort) und die entfernte min-height neben
     * aspect-ratio (21.09.2026). Ab 900 Punkten stand die Grenze
     * laengst da - "minmax(0, 1fr)" zweimal. Nur die eine Spalte
     * darunter hatte sie nie. */
    grid-template-columns: minmax(0, 1fr);
}

@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(--nav-verlauf, var(--paper)) 30%, transparent) left / 2rem 100% no-repeat local,
            linear-gradient(to left, var(--nav-verlauf, 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:not(.aufmacher--bildgrund),
.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:not(.aufmacher--bildgrund),
.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. */

/* Die Ausspraegung "bildgrund" ist hier ausgenommen: Dort IST das Bild
 * der Grund, und der Fliesstext darunter steht im Entwurf auf hellem
 * Papier. Eine Flaeche darueber wuerde beides zudecken. Kein anderer
 * Auftritt benutzt die Ausspraegung, also aendert die Ausnahme dort
 * nichts - am 28.10.2026 gegen wwe-media.de nachgemessen. */
body[data-motiv="kontrast"] .startseite > .block:first-child > .aufmacher:not(.aufmacher--bildgrund),
[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:not(.aufmacher--bildgrund) {
    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,
 * "Bild 2 von 4" an einem Punkt des Bilderwechslers. Die zweite,
 * namenlose Klasse kam am 28.10.2026 dazu - gebraucht wird dasselbe an
 * mehr als einer Stelle, und display:none oder visibility:hidden waere
 * es NICHT: Beides nimmt den Text auch den Vorleseprogrammen weg. */
.anfrage__nurvorlesen,
.nurvorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ------------------------------------------- Leistungsfelder als Karten */

/* Die Ausspraegung "karten" des Bausteins Leistungsfelder, seit dem
 * 27.10.2026. Gebaut fuer den Figma-Entwurf von wwe-media.eu: umrandete
 * Flaeche je Feld, Knopf buendig am unteren Rand.
 *
 * Die Regeln haengen NICHT an einer Marke. Wer die Ausspraegung waehlt,
 * bekommt die Karten - wer sie nicht waehlt, merkt nichts davon. Darum
 * aendert sich an wwe-media.de nichts: dort steht ueberall "raster".
 *
 * Der Knopf steht auf "margin-top: auto", damit bei unterschiedlich
 * langen Texten alle Knoepfe auf einer Linie liegen. Das ist der Grund
 * fuer flex statt einfachem Fluss. */
.leistungsfelder--karten .leistungsfeld {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-2);
}

.leistungsfelder--karten .leistungsfeld > p:first-of-type {
    margin-block: 0;
}

.leistungsfelder--karten .leistungsfeld__weg {
    margin-block: 0;
    margin-top: auto;
    padding-top: var(--space-4);
}

.leistungsfelder--karten .leistungsfeld__weg .knopf {
    width: 100%;
}

/* Auf der dunklen Flaeche: Die Kontur der Karte traegt dort das Orange
 * gedaempft - die helle Linienfarbe (#C6C6DC) waere auf Petrol zu laut,
 * und reines Orange zieht die Aufmerksamkeit vom Knopf weg. Die
 * Ueberschrift der Karte steht im Entwurf in Orange; auf dem Panel
 * traegt sie 7,1:1 und ist damit auch als Text zulaessig. */
.block[data-ton="panel"] .leistungsfelder--karten .leistungsfeld {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--panel));
    background: color-mix(in srgb, var(--panel-text) 4%, var(--panel));
}

.block[data-ton="panel"] .leistungsfelder--karten .leistungsfeld h2,
.block[data-ton="panel"] .leistungsfelder--karten .leistungsfeld h3 {
    color: var(--accent);
}

/* ------------------------------------------------ Vertiefung als Reiter */

/* Die Ausspraegung "reiter", gebaut mit details/summary und gemeinsamem
 * name - der Browser laesst nur eines offen. Die Begruendung steht im
 * Baustein; hier steht nur, wie es aussieht.
 *
 * Auf breiten Fenstern stehen die Beschriftungen nebeneinander wie ein
 * Reiterwerk. Das geht ohne Umbau des Markups: Der Behaelter wird zum
 * Raster, und jedes offene details spannt sich ueber die ganze zweite
 * Zeile. Schmale Fenster behalten die Liste untereinander - drei Reiter
 * nebeneinander waeren auf dem Telefon je 7 Zeichen breit. */
.vertiefung__reiter {
    margin-block: var(--space-5);
}

.reiter > summary {
    cursor: pointer;
    padding-block: var(--space-3);
    border-bottom: 2px solid transparent;
}

.reiter > summary h3 {
    display: inline;
    margin: 0;
    font-size: var(--text-basis);
}

.reiter[open] > summary {
    border-bottom-color: var(--accent);
}

.reiter__inhalt {
    padding-block: var(--space-3) var(--space-4);
}

/* Die Haekchen des Entwurfs. Sie stehen nicht im Text, sondern kommen
 * aus der Gestaltung - ein Haekchen, das jemand vorgelesen bekommt,
 * traegt keine Bedeutung, die der Satz nicht schon haette. */
.reiter__inhalt ul {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: var(--space-4);
}

.reiter__inhalt ul li {
    position: relative;
    padding-left: var(--space-6);
}

.reiter__inhalt ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 1rem;
    height: 0.55rem;
    border-left: 2px solid var(--accent-kontur);
    border-bottom: 2px solid var(--accent-kontur);
    transform: rotate(-45deg);
}

/* Das Dreieck vor dem summary gehoert zu einer Aufklappliste, nicht zu
 * einem Reiterwerk - der Entwurf zeigt nur die Beschriftung und einen
 * Strich unter der offenen. Beide Schreibweisen, weil ::marker und
 * ::-webkit-details-marker sich die Browser teilen. */
.reiter > summary {
    list-style: none;
}

.reiter > summary::marker,
.reiter > summary::-webkit-details-marker {
    display: none;
    content: "";
}

/* Ab Tablettbreite stehen die Beschriftungen in einer Zeile und der
 * offene Inhalt darunter ueber die volle Breite - das Reiterwerk des
 * Entwurfs. Dafuer wird der Behaelter zum Raster, jedes <details> loest
 * seine eigene Box auf (display: contents), und die Zuordnung steht
 * ausdruecklich da:
 *
 *   alle summary  ->  Zeile 1, eine Spalte je Reiter
 *   alle Inhalte  ->  Zeile 2, ueber alle Spalten
 *
 * WARUM ::details-content UND NICHT .reiter__inhalt
 *
 * Am 27.10.2026 gemessen: Mit "grid-row: 2" auf dem eigenen div passiert
 * nichts - der Browser steckt den Inhalt eines <details> in ein eigenes
 * Fach (::details-content), und DAS ist das Rasterfeld, nicht das div
 * darin. Die Beschriftungen standen danach in einer Zeile und der
 * Inhalt daneben statt darunter.
 *
 * WARUM @supports DARUM HERUM
 *
 * Browser, die ::details-content nicht kennen, wuerden die Regel
 * ueberspringen, aber das Raster trotzdem bauen - und dann steht der
 * Inhalt neben den Reitern, schmal und halb abgeschnitten. Genau dieser
 * Zustand war das Zwischenergebnis der Messung. Mit @supports faellt die
 * ganze Reiterzeile weg, und es bleibt eine Aufklappliste
 * untereinander: andere Form, voller Inhalt. */
@supports selector(::details-content) {
    @media (min-width: 720px) {
        .vertiefung__reiter {
            display: grid;
            grid-template-columns: repeat(var(--reiter-spalten, 3), max-content);
            align-items: start;
            column-gap: var(--space-5);
        }

        .reiter {
            display: contents;
        }

        .reiter > summary {
            grid-row: 1;
            white-space: nowrap;
        }

        .reiter::details-content {
            grid-row: 2;
            grid-column: 1 / -1;
        }

        .reiter__inhalt {
            border-top: 1px solid var(--line);
        }
    }
}

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

/* ------------------------------------------ wwe-media.eu: eigenes Design */

/* Seit dem 27.10.2026 traegt wwe-media.eu einen eigenen Markenschluessel
 * (Set WweMediaEu), weil ihre Gestaltung dem Figma-Entwurf folgen soll
 * und die der Schwester nicht. Alles, was NUR fuer die .eu gilt, steht
 * hier - und nur hier.
 *
 * Die Regel [data-marke="wwe_media"] weiter oben (schmueckende Bildmarke
 * im Aufmacher, solange kein Foto da ist) greift damit nicht mehr fuer
 * die .eu. Das ist Absicht: Der Entwurf setzt dort ein Foto, und bis es
 * da ist, steht an der Stelle der beschriftete Medienplatz mit dem
 * Bildauftrag - sichtbar, statt mit einem Zierbild ueberdeckt. */
[data-marke="wwe_media_eu"] .leistungsfelder--karten .leistungsfeld h2,
[data-marke="wwe_media_eu"] .leistungsfelder--karten .leistungsfeld h3 {
    font-weight: 400;
}

/* ------------------------------------------- Vertiefung mit Bild */

/* Der Entwurf von wwe-media.eu setzt im Abschnitt "Gruender und
 * Geschaeftsfuehrer" ein Portraet neben den Text. Ohne Bild bleibt alles,
 * wie es war - die Klasse steht nur dann im Markup, wenn ein Bild oder
 * ein Bildauftrag da ist.
 *
 * Auf dem Telefon untereinander, Bild zuerst: Ein Portraet, das nach vier
 * Absaetzen kommt, hat seinen Zweck verfehlt. */
.vertiefung__raster {
    display: grid;
    gap: var(--space-6);
}

.vertiefung--mit-bild .vertiefung__innen {
    order: 2;
}

.vertiefung--mit-bild .vertiefung__bildspalte {
    order: 1;
    align-self: start;
}

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

    /* Ab hier steht der Text wieder links. */
    .vertiefung--mit-bild .vertiefung__innen {
        order: 1;
    }

    .vertiefung--mit-bild .vertiefung__bildspalte {
        order: 2;
    }
}

/* ------------------------------------- Vertiefung: Seite und Breite des Bildes */

/* Seit dem 28.10.2026. Vorher stand das Bild immer rechts und immer auf
 * einem Drittel - das war fuer das Portraet auf "Wer wir sind" richtig
 * und fuer die vier Projektbloecke falsch: Der Entwurf stellt sie
 * untereinander, Bild abwechselnd rechts und links, etwa halb so breit.
 *
 * Die Vorgaben bleiben, was vorher fest verdrahtet war - jedes
 * bestehende Element sieht aus wie zuvor. */
@media (min-width: 900px) {
    .vertiefung--bild-gleich .vertiefung__raster {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Beide Klassen, nicht nur die zweite: Sonst entscheidet allein die
     * Reihenfolge in dieser Datei, welche Regel gewinnt - und die ist
     * beim naechsten Umsortieren dahin. */
    .vertiefung--mit-bild.vertiefung--bild-links .vertiefung__innen {
        order: 2;
    }

    .vertiefung--mit-bild.vertiefung--bild-links .vertiefung__bildspalte {
        order: 1;
    }

    /* Die Lesebreite gilt fuer Text, der die ganze Spalte fuellt. Steht
     * er in der halben Breite, schneidet sie ein zweites Mal - der
     * Absatz wird schmaler als die Spalte und das Raster faellt
     * auseinander. */
    .vertiefung--bild-gleich .vertiefung__innen {
        max-width: none;
    }
}

/* ------------------------------------------------------------- Logoband */

/* Die Kundenlogos. Im Entwurf von wwe-media.eu: helle Kacheln im
 * Verhaeltnis 294 : 155 auf der dunklen Flaeche, fuenf nebeneinander,
 * das Logo darin eingepasst und zentriert.
 *
 * WARUM DIE KACHEL IMMER HELL IST, AUCH AUF HELLEM GRUND
 *
 * Ein Logo ist fremdes Material. Es traegt seine eigenen Farben und
 * darf nicht umgefaerbt werden; viele sind fuer weissen Grund gebaut
 * und verschwinden auf Petrol. Die helle Kachel ist darum keine
 * Zierde, sondern die Bedingung, unter der ein fremdes Logo richtig
 * aussieht - und sie ist auf jedem Ton dieselbe. */
.logoband__ueberschrift {
    margin-top: 0;
    margin-bottom: var(--space-5);
    text-align: center;
}

.logoband__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 560px) {
    .logoband__liste {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .logoband__liste {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.logoband__eintrag {
    margin: 0;
}

.logoband__kachel {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 294 / 155;
    padding: var(--space-4);
    border-radius: var(--radius-2);
    background: var(--logo-grund, #EBEBEB);
}

/* Das Logo fuellt die Kachel nie ganz: Es behaelt sein Verhaeltnis und
 * bekommt Luft. object-fit: contain, damit ein breites und ein hohes
 * Logo nebeneinander gleich gross WIRKEN, statt gleich gross zu SEIN. */
.logoband__kachel .bild {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
}

.logoband__kachel img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Fehlt die Datei noch, steht der Name in der Kachel - lesbar auf
 * hellem Grund, also in der dunklen Schriftfarbe der Seite und nicht in
 * der des Abschnitts. Auf der dunklen Flaeche waere geerbtes Weiss auf
 * Hellgrau unlesbar. */
.logoband__name {
    color: var(--ink);
    font-size: var(--text-klein);
    text-align: center;
    overflow-wrap: anywhere;
}

/* Der Verweis steht INNERHALB der Kachel und fuellt sie aus - warum
 * nicht umgekehrt, steht in der Vorlage des Bausteins. Damit die ganze
 * Kachel anfassbar ist, spannt sich das a ueber ihre volle Flaeche.
 * Ohne Verweis gibt es kein a, und :has() laesst die Hervorhebung dann
 * von selbst weg. */
.logoband__kachel a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.logoband__kachel:has(a) {
    transition: box-shadow 120ms ease-out;
}

.logoband__kachel:has(a:hover),
.logoband__kachel:has(a:focus-visible) {
    box-shadow: 0 0 0 2px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .logoband__kachel:has(a) {
        transition: none;
    }
}

.logoband__hinweis {
    margin-top: var(--space-5);
    font-size: var(--text-klein);
    text-align: center;
}

/* ------------------------------------------- Kontaktblock mit Bild */

/* Seit dem 28.10.2026 darf der Kontaktblock in jeder Ausspraegung ein
 * Bild tragen (Begruendung in seiner Vorlage). Hat er eines, steht es
 * im Entwurf von wwe-media.eu rechts neben den Angaben.
 *
 * Die Regel greift NUR, wenn ein Bild da ist - :has() statt einer
 * eigenen Klasse. Ohne Bild bleibt der Block Zeichen fuer Zeichen das,
 * was er an den anderen Marken schon ist. */
@media (min-width: 900px) {
    .kontakt__innen:has(> .bild, > .bildflaeche) {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: var(--space-6);
        align-items: start;
    }

    /* Die Ueberschrift steht ueber beiden Spalten, das Bild ganz
     * rechts und ueber die volle Hoehe der Angaben. */
    .kontakt__innen:has(> .bild, > .bildflaeche) > h2 {
        grid-column: 1;
    }

    .kontakt__innen:has(> .bild, > .bildflaeche) > .bild,
    .kontakt__innen:has(> .bild, > .bildflaeche) > .bildflaeche {
        grid-column: 2;
        grid-row: 1 / -1;
        margin: 0;
    }
}

/* ------------------------------------------- Aufmacher mit Bild im Grund */

/* Die Form des Figma-Entwurfs von wwe-media.eu: Das Bild fuellt die
 * ganze Breite, die Ueberschrift steht darin unten links, der Kopf der
 * Seite liegt darueber. Der Fliesstext folgt darunter auf dem Papierton.
 *
 * DAS BILD BLEIBT EIN img, KEIN background-image
 *
 * Ein CSS-Hintergrund kann keinen Alternativtext tragen, keine
 * AVIF/WebP-Auswahl treffen und keine srcset-Breiten anbieten. Also
 * steht es als img im Markup und wird nur nach hinten gelegt. Der Preis
 * ist eine Regel mehr; der Gewinn ist, dass die Seite auch ohne Bilder
 * und mit Vorleseprogramm vollstaendig ist. */
.aufmacher--bildgrund {
    padding-block: 0;
}

.aufmacher__buehne {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* Dasselbe Verhaeltnis wie im Entwurf: 2200 zu 1290. Die Grenzen
     * halten den Aufmacher auf dem Telefon lesbar und auf einem sehr
     * breiten Schirm im Blickfeld. */
    aspect-ratio: 2200 / 1290;
    min-height: 26rem;
    max-height: 82vh;

    /* DIESE ZEILE IST NICHT ZIERDE (28.10.2026)
     *
     * Ein Seitenverhaeltnis und eine Hoehengrenze zusammen rechnen
     * auf die BREITE zurueck. Die Breite war vorher "auto", also nicht
     * festgelegt - und damit hat das Verhaeltnis gewonnen, in beide
     * Richtungen:
     *
     *   Fenster 1920 x 906: max-height (82vh) = 743, daraus 743 x 1,705
     *   = 1267 Punkte Breite statt 1905. Rechts daneben standen 638
     *   Punkte leerer dunkler Grund, der Kopfbalken schwebte darueber
     *   hinaus. Das trifft jeden Schirm, der breiter ist als das
     *   1,7-fache seiner Hoehe - also fast jeden Arbeitsplatz.
     *
     *   Fenster 320: min-height (26rem) = 416, daraus 709 Punkte
     *   Breite in einem 305 Punkte breiten Fenster. Die ganze Seite
     *   liess sich waagerecht schieben - gegen die eigene Hausregel
     *   "kein waagerechtes Scrollen bis 320 Punkte".
     *
     * Beides am 28.10.2026 gemessen, nachdem der Aufmacher auf dem
     * Schirm von Stefan Muhlack nur zwei Drittel der Breite einnahm.
     *
     * Eine festgelegte Breite beendet die Rueckrechnung: Das
     * Verhaeltnis bestimmt dann nur noch die Hoehe, und die Grenzen
     * beschneiden sie. Was dabei am Bild zu viel ist, beschneidet
     * "object-fit: cover" - genau dafuer steht es da. */
    width: 100%;

    overflow: hidden;
    background: var(--panel);
}

.aufmacher__buehne > .bild,
.aufmacher__buehne > .medienplatz {
    position: absolute;
    inset: 0;
    margin: 0;
}

.aufmacher__buehne > .bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DER VERLAUF IST EINE RECHNUNG, KEIN GESCHMACK
 *
 * Weisse Schrift auf einem Foto ist nur so lange lesbar, wie das Foto
 * dunkel ist - und welches Foto die Redaktion einsetzt, weiss dieses
 * Stylesheet nicht. Darum deckt der Verlauf dort, wo Text steht,
 * mindestens zu 92 Prozent ab. Gerechnet fuer den schlimmsten Fall,
 * ein reinweisses Bild:
 *
 *   Grund  rgb(46, 51, 54)   (Panel #1C2124 zu 92 % auf Weiss)
 *   weiss  12,8 : 1          Schwelle 4,5 (WCAG 2.2, 1.4.3)
 *   Akzent  4,8 : 1          Schwelle 4,5
 *
 * Auf einem dunklen Foto - und das sind alle sechs des Entwurfs - ist
 * der Verlauf praktisch der Panelton, dort liegen die Werte hoeher.
 * Oben bleibt das Bild frei, damit es Bild bleibt. */
.aufmacher__buehne::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(28, 33, 36, 0) 0%,
        rgba(28, 33, 36, 0.35) 42%,
        rgba(28, 33, 36, 0.92) 70%,
        rgba(28, 33, 36, 0.95) 100%
    );
}

.aufmacher__ueber {
    position: relative;
    z-index: 1;
    padding-bottom: var(--space-7);
    /* Nie hoeher als 70 Prozent der Buehne - darueber traegt der
     * Verlauf die gerechneten Werte nicht mehr. */
    max-height: 30%;
}

.aufmacher__ueber h1 {
    margin: 0;
    color: #FFFFFF;
}

.aufmacher--bildgrund .aufmacher__kicker {
    color: rgba(255, 255, 255, 0.86);
}

/* Der Pfeil sitzt am linken Rand, auf halber Hoehe der unteren
 * Haelfte - wie im Entwurf. Auf schmalen Schirmen ist dafuer kein
 * Platz; dort entfaellt er, weil er nichts traegt. */
.aufmacher__pfeil {
    display: none;
}

@media (min-width: 900px) {
    .aufmacher__pfeil {
        position: absolute;
        left: var(--space-4);
        bottom: var(--space-7);
        z-index: 1;
        color: var(--accent);
        font-size: var(--text-gross);
        line-height: 1;
    }
}

.aufmacher__nach {
    padding-block: var(--space-7);
}

.aufmacher__nach > :first-child {
    margin-top: 0;
}

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

/* DER KOPF LIEGT AUF DEM BILD
 *
 * Nur dort, wo der Aufmacher mit Bildgrund das ERSTE Element der Seite
 * ist - auf einer Seite mit Brotkrume stuende der Kopf sonst ueber
 * einer Brotkrume statt ueber einem Bild. :has() prueft genau das.
 *
 * Der Kopf behaelt seinen eigenen Hintergrund (die Leiste des
 * Entwurfs), damit Logo und Menue nicht vom Foto abhaengen. */
body:has(main > .block:first-child > .aufmacher--bildgrund) .kopf {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 3;
    background: transparent;
    border-bottom: 0;
}

body:has(main > .block:first-child > .aufmacher--bildgrund) .kopf__reihe {
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--panel) 78%, transparent);
    padding-block: var(--space-3);
    margin-top: var(--space-4);

    /* Der Verlauf am Rand des Wischmenues (siehe "Menue auf dem
     * Telefon" weiter oben) ist sonst WEISS - die Vorgabe ist die
     * Papierfarbe, und auf dieser dunklen Leiste stand dadurch ein
     * weisser Klotz ueber dem ersten Menuepunkt. Am 28.10.2026 auf
     * einem 375er Schirm gesehen: "Wer wir sind" war zu "er wir sind"
     * verdeckt.
     *
     * Eine Eigenschaft statt einer zweiten Verlaufsliste: Der Verlauf
     * wird an EINER Stelle beschrieben, die Farbe dort, wo sie anders
     * ist. */
    --nav-verlauf: var(--panel);
}

body:has(main > .block:first-child > .aufmacher--bildgrund) .kopf a {
    color: var(--panel-text);
}

body:has(main > .block:first-child > .aufmacher--bildgrund) .kopf :focus-visible {
    outline-color: var(--panel-text);
}

/* ------------------------------------------------------ Leistungskarten */

/* Die versetzte Kartenwand des Entwurfs: zwei Spalten, die rechte um
 * eine knappe Kartenhoehe nach unten geschoben.
 *
 * Der Versatz kommt aus einem margin-top auf jedem zweiten Eintrag,
 * nicht aus festen Rasterplaetzen. Feste Plaetze (grid-area je
 * nth-child) saehen im Entwurf richtig aus und braechen bei der achten
 * Leistung - und eine achte Leistung ist eine Redaktionsentscheidung,
 * keine Stylesheet-Aenderung. */
.leistungskarten__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-5);

    /* AUCH IN EINER SPALTE BRAUCHT DAS RASTER EINE GRENZE
     *
     * Ohne diese Zeile bemisst sich die eine Spalte nach dem
     * LAENGSTEN WORT der breitesten Karte. "Suchmaschinenoptimierung"
     * misst in dieser Ueberschrift 271 px, die Karte wurde damit 319
     * px breit - in einem 320-px-Fenster, in dem 273 zur Verfuegung
     * standen. Gemessen am 28.10.2026: 30 px waagerecht schiebbar.
     *
     * "overflow-wrap: break-word" an der Ueberschrift allein reicht
     * dagegen NICHT: Es bricht ein Wort erst in der zugeteilten
     * Breite, aendert aber die Mindestbreite nicht, nach der sich die
     * Spalte bemisst. Erst die Grenze hier macht die Zuteilung klein
     * genug, damit das Umbrechen ueberhaupt greift. Beides gehoert
     * zusammen. */
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
    .leistungskarten__liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-6);
        align-items: start;
    }

    .leistungskarte:nth-child(even) {
        margin-top: var(--space-8);
    }
}

.leistungskarte {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-2);
    background: var(--flaeche);
}

/* Das Zeichen sitzt in einem eigenen Kasten - so steht es im Entwurf.
 * Der Kasten ist etwas heller als die Karte, nicht umrandet: Eine
 * Kontur mehr neben der Kartenkontur waere eine Linie zu viel. */
.leistungskarte__symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    aspect-ratio: 170 / 186;
    margin-bottom: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--ink);
}

.leistungskarte__symbol svg {
    display: block;
    width: 100%;
    height: 100%;
}

.leistungskarte__titel {
    margin: 0;
    color: var(--accent-kontur);
}

.leistungskarte__einstieg {
    margin: 0;
    font-weight: 600;
}

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

.leistungskarte__text > :first-child {
    margin-top: 0;
}

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

/* Auf der dunklen Flaeche - so steht es im Entwurf. Die Karte hebt
 * sich dort durch einen Hauch Aufhellung ab, nicht durch eine Kontur;
 * die Ueberschrift darf das reine Orange tragen, weil sie auf Panel
 * 7,1 : 1 haelt (Build/kontraste-pruefen.php). */
.block[data-ton="panel"] .leistungskarte {
    background: color-mix(in srgb, var(--panel-text) 5%, var(--panel));
}

.block[data-ton="panel"] .leistungskarte__titel {
    color: var(--accent);
}

.block[data-ton="panel"] .leistungskarte__symbol {
    background: color-mix(in srgb, var(--panel-text) 7%, transparent);
    color: var(--panel-text);
}

.block[data-ton="panel"] .leistungskarte__text {
    color: color-mix(in srgb, var(--panel-text) 72%, var(--panel));
}

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

/* Die Form des Figma-Entwurfs: links der Zuruf und die Bildmarke, in
 * der Mitte und rechts je zwei Spalten uebereinander - Unternehmen und
 * Anschrift, Rechtliches und Kontakt. Darunter der Weg nach oben.
 *
 * Nur wirksam, wenn das Site Set den Zuruf setzt; ohne ihn bleibt der
 * Fuss, was er auf allen acht Auftritten ist. */
.fuss__reihe--weit {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
}

@media (min-width: 720px) {
    .fuss__reihe--weit {
        /* Der Zuruf nimmt die Haelfte, die vier Spalten teilen sich den
         * Rest zu zweit in zwei Zeilen. */
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
        column-gap: var(--space-7);
    }

    .fuss__claim {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .fuss__nach-oben {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

.fuss__zuruf {
    margin: 0 0 var(--space-4);
    font-family: var(--schrift-titel);
    font-size: var(--h2);
    font-weight: 600;
    line-height: 1.2;
}

/* Die beiden Zeilen stehen untereinander, aber als EIN Satz. Darum
 * zwei span in einem Absatz und kein br: Ein Vorleseprogramm liest den
 * Satz dann als Satz, nicht als zwei Bruchstuecke. */
.fuss__zuruf-eins,
.fuss__zuruf-zwei {
    display: block;
}

.fuss__zuruf-eins {
    color: var(--accent);
}

.fuss__zuruf-weg {
    margin: 0 0 var(--space-6);
}

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

/* Die Spaltenueberschriften sind klein gesetzt, aber echte
 * Ueberschriften: Wer die Ueberschriftenliste aufruft, findet den Fuss
 * gegliedert vor - "Unternehmen", "Rechtliches", "Anschrift",
 * "Kontakt" - statt vier namenlose Linklisten. */
.fuss__ueberschrift {
    margin: 0 0 var(--space-3);
    font-size: var(--text-klein);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.72;
}

.fuss__reihe--weit .fuss__block ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.fuss__nach-oben {
    margin: 0;
}

.fuss__nach-oben a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    /* Mindestens 44 Pixel hoch - sonst ist der Weg nach oben auf dem
     * Telefon nicht zu treffen (WCAG 2.2, 2.5.8). */
    min-height: 44px;
    padding-inline: var(--space-3);
    border: 1px solid currentColor;
    border-radius: 999px;
    text-decoration: none;
}

.fuss__nach-oben a:hover,
.fuss__nach-oben a:focus-visible {
    border-color: var(--accent);
}

/* ------------------------------------------- Zwei Abschnitte nebeneinander */

/* d_breite = "halb". Zwei aufeinanderfolgende halbe Abschnitte stehen
 * nebeneinander - gebraucht auf der Karriereseite von wwe-media.eu, wo
 * der Entwurf zwei Listen mit je einem Sinnspruch nebeneinander setzt.
 *
 * WARUM KEIN NEUES FELD
 *
 * "Wie breit der Inhalt steht" ist genau die Frage, die d_breite schon
 * stellt. Ein zweites Feld daneben haette dieselbe Frage ein zweites
 * Mal gestellt - und haette ausserdem eine Spalte in tt_content und ein
 * data-Attribut an JEDEM Block aller acht Auftritte gekostet.
 *
 * WARUM :has() UND KEIN RASTER AUF JEDEM main
 *
 * main zum Raster zu machen aendert, wie Abstaende zwischen den
 * Bloecken zusammenfallen - auf allen acht Auftritten, fuer eine
 * Ausnahme auf einer Seite. So greift die Regel nur dort, wo wirklich
 * ein halber Abschnitt steht. */
@media (min-width: 720px) {
    main:has(> .block[data-breite="halb"]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    main:has(> .block[data-breite="halb"]) > * {
        grid-column: 1 / -1;
    }

    main:has(> .block[data-breite="halb"]) > .block[data-breite="halb"] {
        grid-column: span 1;
    }
}

/* -------------------------------- Bildspalte, Bildunterschrift, Projektkarte */

/* Das Bild liegt seit dem 28.10.2026 in einer eigenen Spalte, weil im
 * Entwurf von wwe-media.eu etwas darunter stehen kann: Name und Rolle
 * unter dem Portraet. */
.vertiefung__bildspalte > .bild,
.vertiefung__bildspalte > .medienplatz {
    margin: 0;
}

/* Name und Rolle unter dem Portraet. Die h2 steht hier klein und wirkt
 * wie eine Bildunterschrift - sie IST aber die Ueberschrift des
 * Abschnitts und zaehlt in der Gliederung. Der Entwurf setzt den Namen
 * fett und die Rolle darunter leichter. */
.vertiefung__bildtitel {
    margin-top: var(--space-3);
}

.vertiefung__bildtitel h2 {
    margin: 0;
    font-size: var(--text-gross);
}

.vertiefung__bildtitel .label {
    margin: 0;
    color: var(--muted);
}

/* DIE PROJEKTBLOECKE ALS KARTEN
 *
 * Der Entwurf stellt jeden Projektblock als abgerundete Flaeche auf die
 * dunkle Seite, etwas heller als der Grund. Es gilt nur fuer
 * Vertiefungen MIT Bild auf dunklem Ton - der Unternehmensabschnitt der
 * Startseite steht auf "Flaeche" und bleibt, was er ist. */
.block[data-ton="panel"] > .vertiefung--mit-bild {
    padding-block: var(--space-4);
}

.block[data-ton="panel"] > .vertiefung--mit-bild > .vertiefung__raster {
    padding: var(--space-6);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--panel-text) 5%, var(--panel));
}

/* ----------------------------------------------------------- Bildflaeche */

/* Foto als Grund, Bildmarke darueber - so setzt der Entwurf von
 * wwe-media.eu die Gebaeudeaufnahme ein.
 *
 * Die Abdunklung ist nicht Geschmack, sondern Bedingung: Das Zeichen
 * ist weiss und orange, und ob das Foto darunter hell oder dunkel ist,
 * weiss dieses Stylesheet nicht. 62 Prozent Deckung mit dem Panelton
 * ergeben selbst auf einem reinweissen Bild einen Grund von
 * rgb(114, 117, 119) - darauf traegt Weiss 4,9:1. Fuer ein Zeichen
 * ohne Aussage waeren 3:1 (WCAG 1.4.11) genug; es sind mehr. */
.bildflaeche {
    position: relative;
    isolation: isolate;
    border-radius: var(--radius-2);
    overflow: hidden;
}

.bildflaeche > .bild {
    margin: 0;
}

.bildflaeche > .bild img {
    display: block;
    width: 100%;
    height: auto;
}

.bildflaeche::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--panel) 62%, transparent);
}

/* Das Zeichen ist eine Flaeche, kein Bild: Es sagt nichts, was nicht
 * schon im Kopf der Seite steht. Welche Datei, entscheidet die Marke -
 * ohne Regel bleibt die Flaeche leer und das Foto steht fuer sich.
 *
 * Der Pfad ist relativ zu DIESER Datei. Damit braucht es weder die
 * Kennung des _assets-Ordners noch eine Einstellung, die bis ins
 * Inhaltselement durchgereicht werden muesste - und genau daran war der
 * erste Versuch am 28.10.2026 gescheitert. */
.bildflaeche__zeichen {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 1;
    width: 40%;
    max-width: 7.5rem;
    aspect-ratio: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

[data-marke="wwe_media"] .bildflaeche__zeichen,
[data-marke="wwe_media_eu"] .bildflaeche__zeichen {
    background-image: url("../Logos/wwe-media-bildmarke.svg");
}

/* ------------------------------------------------------ Bilderwechsler */

/* Seit dem 28.10.2026, fuer die Projektbloecke von wwe-media.eu. Der
 * Entwurf setzt unter jedes Projektbild eine Punktleiste.
 *
 * Gebaut als rollbare Bahn mit Einrastpunkten, nicht als Stapel mit
 * Ein- und Ausblendung. Der Unterschied ist nicht optisch: Eine Bahn
 * kann der Browser wischen, rollen und mit den Pfeiltasten bedienen,
 * und sie funktioniert ohne eine Zeile JavaScript. Ein Stapel waere
 * ohne Skript entweder leer oder vollstaendig uebereinander.
 *
 * Das Seitenverhaeltnis kommt als "--wechsler-mass" aus dem Datensatz,
 * siehe Partials/Bilderwechsler.html. Ohne Angabe bleibt jede Folie so
 * hoch, wie sie ist. */
.wechsler {
    display: grid;
    gap: var(--space-3);
}

.wechsler__bahn {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;

    /* Sonst zieht das Wischen auf dem Telefon am Ende der Bahn die
     * ganze Seite mit - und auf dem Rechner blaettert ein waagerechtes
     * Rad den Verlauf zurueck. */
    overscroll-behavior-x: contain;

    /* Die Punktleiste ist die Anzeige; eine Rollleiste quer unter dem
     * Bild waere eine zweite, haesslichere. Erreichbar bleibt die Bahn
     * trotzdem: Sie traegt tabindex und bekommt den Fokusring aus
     * tokens.css. */
    scrollbar-width: none;
}

/* Ohne Skript ist ein Punkt ein Verweis auf eine Sprungmarke, und der
 * Sprung ist hart. Hier nicht - aber nur fuer die, die Bewegung nicht
 * abgestellt haben. */
@media (prefers-reduced-motion: no-preference) {
    .wechsler__bahn {
        scroll-behavior: smooth;
    }
}

.wechsler__bahn::-webkit-scrollbar {
    display: none;
}

.wechsler__folien {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wechsler__folie {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    aspect-ratio: var(--wechsler-mass, auto);
}

/* Die erste Folie gibt die Form vor, die uebrigen werden darin
 * beschnitten - mittig, weil das Motiv dort steht. */
.wechsler__folie > .bild,
.wechsler__folie > .bildflaeche {
    height: 100%;
    margin: 0;
}

.wechsler__folie img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* DIE PUNKTLEISTE
 *
 * Das Zeichen hat die Groesse des Entwurfs: ein Punkt von rund acht
 * Bildpunkten, der aktuelle als Strich von 42. Die TREFFFLAECHE darum
 * ist 24 Bildpunkte im Quadrat, wie es WCAG 2.2 (2.5.8) verlangt.
 * Dadurch stehen die Punkte weiter auseinander als im Entwurf, wo
 * fuenf Bildpunkte zwischen ihnen liegen. Ein Ziel von acht
 * Bildpunkten ist mit dem Daumen nicht zu treffen; das ist keine
 * Geschmacksfrage.
 *
 * Die Farbe ist currentColor und nicht eine Marken-Farbe: Die Leiste
 * steht im Entwurf auf dunkler Karte, kann aber ueberall stehen. So
 * stimmt der Kontrast in beiden Welten von selbst. */
.wechsler__punkte {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wechsler__punkt {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    text-decoration: none;
}

.wechsler__punkt::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.45;
    transition: width 160ms ease, opacity 160ms ease, background-color 160ms ease;
}

.wechsler__punkt:hover::before {
    opacity: 0.75;
}

.wechsler__punkt[aria-current="true"]::before {
    width: 2.625rem;
    background: var(--accent);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .wechsler__punkt::before {
        transition: none;
    }
}

/* -------------------------------------------------------------- Zaehler */
/*
 * Eine Zahl, die laeuft. Zwei Dinge sind daran heikel.
 *
 * ERSTENS SPRINGT SIE. Ziffern sind in einer Proportionalschrift
 * verschieden breit; bei jeder Sekunde ruckt die ganze Zeile. Dagegen
 * hilft font-variant-numeric: tabular-nums - dieselbe Breite fuer jede
 * Ziffer, ohne die Schrift zu wechseln.
 *
 * ZWEITENS BRICHT SIE UM. "6.251 Tage 3 Stunden 17 Minuten 4 Sekunden"
 * ist auf dem Telefon laenger als die Zeile. Umbrechen darf sie - aber
 * nicht mitten in einer Angabe, deshalb steht jede Einheit zusammen.
 */
.zaehler__innen {
    text-align: center;
}

.zaehler__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.35em;
    margin: 0;
}

.zaehler__vorsatz,
.zaehler__nachsatz {
    color: var(--muted);
}

.zaehler__wert {
    font-family: var(--schrift-zahl);
    font-variant-numeric: tabular-nums;
    /* Keine feste Breite: die Zahl waechst mit den Jahren, und eine
       Breite, die heute passt, schneidet in zehn Jahren ab. */
    font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
    color: var(--ink);
}

/*
 * Ohne JavaScript steht hier ein Datum statt der Zahl. Es soll dann nicht
 * wie ein abgeschnittener Zaehler aussehen, sondern wie eine Angabe -
 * also dieselbe Ruhe wie der uebrige Text.
 */
.zaehler__wert time {
    font-size: 1rem;
    font-family: inherit;
}