/*
 * werben.css — Landingpage /werben/
 *
 * Regeln, die hier gelten:
 * - ausschliesslich Token aus `css/variables.css`, keine harten Hex-Werte
 * - Radien konzentrisch (--radius-sm/md/lg/xl), keine Zwischenwerte
 * - Dunkelmodus wird in diesem Theme ueber die Klasse `.dark-mode` an
 *   `html`/`body` geschaltet, NICHT ueber `prefers-color-scheme`. Farben
 *   werden deshalb ueber Token gefuehrt; wo eine Flaeche modusabhaengig
 *   anders wirken muss, steht direkt daneben ein `.dark-mode`-Block.
 * - abgesetzte Container sind halbtransparent mit `backdrop-filter`
 *   (Referenz: `.article-app-qr__card` in `css/article.css`), nie deckend
 */

/* ---------------------------------------------------------------------------
 * Seitenrahmen
 * ------------------------------------------------------------------------ */

.werben-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-3) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    color: var(--color-text-primary);
}

.werben-page > section {
    scroll-margin-top: calc(var(--site-header-height, 118px) + var(--space-3));
}

.werben-section__title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.4375rem, 1.15rem + 1.2vw, 1.8125rem);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.werben-section__lead {
    margin: 0;
    max-width: 62ch;
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Schaltflaechen
 *
 * Satt orange gefuellte Buttons tragen laut Brand Guide ausnahmslos
 * `--color-accent-primary` mit `--color-accent-primary-contrast` (Weiss).
 * Weil diese Kombination nur 3,29:1 erreicht, ist die Beschriftung
 * mindestens 19 px gross und fett gesetzt — kompakte Normaltextgroessen
 * sind fuer diese Fuellung nicht zulaessig.
 * ------------------------------------------------------------------------ */

.werben-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    transition:
        transform var(--motion-fast) var(--animation-curve-smooth),
        box-shadow var(--motion-fast) var(--animation-curve-smooth),
        border-color var(--motion-fast) var(--animation-curve-smooth);
}

.werben-button--primary {
    background: var(--color-accent-primary);
    color: var(--color-accent-primary-contrast);
    box-shadow: var(--elevation-1);
}

.werben-button--secondary {
    /* Halbtransparent statt deckend — dieselbe Materialitaet wie die
       uebrigen abgesetzten Container auf dieser Seite. */
    background: var(--glass-bg);
    border-color: var(--glass-border);
    color: var(--color-text-primary);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: var(--elevation-1);
}

/* Hover veraendert Schatten und Lage, nie den Markenfarbton. */
@media (hover: hover) and (pointer: fine) {
    .werben-button:hover {
        transform: translateY(-2px);
        box-shadow: var(--elevation-2);
    }
}

/* Schriftfarbe in ALLEN Zustaenden festschreiben.
   WARUM: Die Hauptschaltflaechen sind Links. Eine globale Theme-Regel faerbt
   jeden Link beim Ueberfahren in den Markenton — auf einer orange gefuellten
   Flaeche wurde die Beschriftung dadurch orange auf Orange und war praktisch
   nicht mehr lesbar. Die Regel oben aendert die Farbe zwar nicht, sie setzt
   sie aber auch nicht neu, und damit gewann die allgemeinere Link-Regel.
   Auf gefuelltem Orange gilt immer Weiss, auf der hellen Sekundaerflaeche
   immer die primaere Textfarbe. */
.werben-button--primary,
.werben-button--primary:link,
.werben-button--primary:visited,
.werben-button--primary:hover,
.werben-button--primary:focus,
.werben-button--primary:focus-visible,
.werben-button--primary:active {
    color: var(--color-accent-primary-contrast);
}

.werben-button--secondary,
.werben-button--secondary:link,
.werben-button--secondary:visited,
.werben-button--secondary:hover,
.werben-button--secondary:focus,
.werben-button--secondary:focus-visible,
.werben-button--secondary:active {
    color: var(--color-text-primary);
}

.werben-button:focus-visible {
    outline: 3px solid var(--color-text-primary);
    outline-offset: 2px;
}

.werben-button:active {
    transform: translateY(0);
}

/* ---------------------------------------------------------------------------
 * 1 — Hero
 * ------------------------------------------------------------------------ */

.werben-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
}

.werben-hero__kicker {
    margin: 0 0 var(--space-1);
    color: var(--color-accent-primary-text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.werben-hero h1 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.8125rem, 1.3rem + 2.4vw, 2.9375rem);
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

.werben-hero__lead {
    margin: 0 0 var(--space-3);
    max-width: 56ch;
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    line-height: 1.6;
}

.werben-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.werben-hero__note {
    margin: var(--space-2) 0 0;
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Vorschau-Container (Hero und Konfigurator teilen sich das Bauteil)
 * ------------------------------------------------------------------------ */

.werben-previewcard {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow: var(--elevation-2);
}

.werben-previewcard__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.werben-previewcard__eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-accent-primary);
}

.werben-previewcard__hint {
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.55;
}

/* -------------------------------------------------------------------------
   Vorschau: Glasrahmen aussen, definierte Leseflaeche innen
   -------------------------------------------------------------------------
   Drei Ebenen mit eigener Bedeutung, statt drei uebereinanderliegender
   Transparenzen:

     1. `.werben-preview`          Rahmen — Glas wie jeder andere Container
     2. `__article` / `.news-card` Leseflaeche — so wie im echten Produkt
     3. Anzeige beziehungsweise Karte  der Inhalt selbst

   Warum die mittlere Ebene deckend sein MUSS: Die Vorschau behauptet, das
   echte Layout zu zeigen. Eine durchscheinende Beitragsflaeche gibt es im
   Produkt nirgends — dort liegt Text immer auf einer ruhigen Leseflaeche.
   Als reines Glas-in-Glas wirkte die Vorschau ausgewaschen, der Text verlor
   Kontrast, und die Anzeige liess sich von ihrem Untergrund kaum noch
   unterscheiden. Genau das soll sie ja zeigen.
   ---------------------------------------------------------------------- */

.werben-preview {
    /* KEINE eigene Flaeche.
       Den Glasrahmen traegt `.werben-previewcard` — sie umschliesst
       Beschriftung, Vorschau und Hinweis. Trug `.werben-preview` zusaetzlich
       eine Flaeche, standen zwei fast gleich aussehende Container ineinander
       und die Vorschau wirkte doppelt gerahmt. Dies hier ist nur der
       Inhaltsbereich der Karte. */
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: none;
}

/* NUR die Inline-Vorschau bekommt eine eigene Leseflaeche: Dort liegt echter
   Beitragstext um die Anzeige herum, und Text ohne ruhige Flaeche darunter
   gibt es im Produkt nicht.
   Die PR-Vorschau bekommt bewusst KEINE: `.news-card` bringt ihre eigene,
   echte Kartengestaltung mit. Eine zusaetzliche Flaeche darunter erzeugte
   vier ineinanderliegende Rundungen — das wirkte fusselig statt hochwertig
   und zeigte ausserdem eine Karte, die es so im Produkt nicht gibt. */
/* Die Vorschauflaeche traegt EXAKT denselben Flaechenverlauf wie eine echte
   Beitragsseite — dieselben Farbstopps, dieselben Token wie in `base.css`
   und `critical-single.css`. Aendert sich der Verlauf dort, wandert er hier
   mit, ohne dass jemand daran denken muss.

   Warum keine eigene deckende Flaeche: In echt liegt der Beitragstext direkt
   auf diesem Verlauf. Eine erfundene dunkle Karte zeigte eine Darstellung,
   die es im Produkt nirgends gibt — und die Vorschau behauptet, das echte
   Layout zu zeigen. */
/* KEINE eigene Flaeche und kein eigener Rahmen.
   Den Container stellt `.werben-previewcard` — sie traegt Glas, Rahmen und
   Beschriftung. Eine zweite Flaeche darin ergab zwei fast gleich aussehende
   Kaesten ineinander. Der Inhalt liegt jetzt direkt auf dem Glas, und weil das
   Glas den Seitenverlauf durchscheinen laesst, entspricht der Untergrund genau
   dem, was im echten Beitrag zu sehen ist. */
.werben-preview__article {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* -------------------------------------------------------------------------
   PR-Beitrag als Beitragsansicht
   ---------------------------------------------------------------------- */

.werben-preview__headline {
    margin: var(--space-1) 0 0;
    color: var(--color-text-primary);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.werben-preview__byline {
    margin: 6px 0 var(--space-2);
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
}

.werben-preview__figure {
    margin: 0 0 var(--space-2);
}

/* Der Vorspann ist bei Nachrichten.jetzt in jedem Beitrag fett. Die Vorschau
   zeigt das unmittelbar — sonst waere die Regel, die den Kunden hier
   interessiert, nicht sichtbar. */
.werben-preview__para--lead {
    color: var(--color-text-primary);
    font-weight: 700;
}

.werben-preview__meta {
    margin: var(--space-2) 0 0;
    color: var(--color-text-tertiary);
    font-size: 0.8125rem;
}

.werben-textarea--body {
    min-height: 150px;
    line-height: 1.6;
    resize: vertical;
}

.werben-preview__para {
    margin: 0 0 var(--space-2);
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
    line-height: 1.7;
}

.werben-preview__para:last-child {
    margin-bottom: 0;
}

.werben-preview__para--headline {
    color: var(--color-text-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Die Inline-Anzeige uebernimmt das echte Markup aus `css/ads.css`. Die
   Flaechen-Variablen werden hier gespiegelt, weil `.nj-ad-inline` sie sonst
   nur im Beitragskontext gesetzt bekommt. */
.werben-preview__ad {
    margin: var(--space-2) 0;
}

/* Neutraler Platzhalter statt Bild-Upload. Die Flaeche uebernimmt die Groesse
   und den Radius der echten Anzeigenbildflaeche aus `css/ads.css`. */
.werben-preview__adthumb {
    background:
        linear-gradient(135deg,
            var(--color-accent-primary-alpha-10) 0%,
            transparent 62%),
        var(--nj-inline-ad-surface-light, var(--color-bg-tertiary));
}

.dark-mode .werben-preview__adthumb {
    background:
        linear-gradient(135deg,
            var(--color-accent-primary-alpha-10) 0%,
            transparent 62%),
        var(--color-bg-tertiary);
}

/* -------------------------------------------------------------------------
   Schwebende Verknuepfung zum Formular
   ---------------------------------------------------------------------- */

.werben-fab {
    position: fixed;
    right: clamp(var(--space-2), 3vw, var(--space-4));
    /* Sichere Bereiche mitrechnen: Auf iPhones liegt sonst die Geste-Leiste
       ueber der Flaeche. */
    bottom: calc(clamp(var(--space-2), 3vw, var(--space-4)) + var(--safe-area-inset-bottom, 0px));
    z-index: 120;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px Mindestflaeche nach WCAG 2.2 — auch bei kurzer Beschriftung. */
    min-height: 48px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-xl);
    background: var(--color-accent-primary);
    color: var(--color-accent-primary-contrast);
    box-shadow: var(--elevation-3);
    font-family: inherit;
    /* 19px fett ist Pflicht, nicht Geschmack: Weiss auf `--color-accent-primary`
       erreicht 3,29:1. Diese Kombination besteht WCAG AA nur als Grosstext
       (>= 18,66 px fett). Bei den vorherigen 15 px galt die 4,5:1-Schwelle —
       die Beschriftung war damit nicht konform. Gleiche Groesse wie
       `.werben-button`, das ist zugleich die ruhigere Loesung. */
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    /* Erst unsichtbar; `is-visible` blendet ein. Kein `display: none`, damit
       der Uebergang laufen kann. */
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition:
        opacity var(--motion-standard) var(--animation-curve-smooth),
        transform var(--motion-standard) var(--animation-curve-smooth),
        box-shadow var(--motion-fast) var(--animation-curve-smooth);
}

/* Die Schriftfarbe in allen Zustaenden festschreiben — dieselbe Begruendung
   wie bei den Hauptschaltflaechen: Eine globale Link-Regel des Themes faerbt
   Links beim Ueberfahren orange, hier waere das Orange auf Orange. */
.werben-fab,
.werben-fab:link,
.werben-fab:visited,
.werben-fab:hover,
.werben-fab:focus,
.werben-fab:focus-visible,
.werben-fab:active {
    color: var(--color-accent-primary-contrast);
}

.werben-fab.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
    .werben-fab.is-visible:hover {
        transform: translateY(-2px);
        box-shadow: var(--elevation-4);
    }
}

.werben-fab:focus-visible {
    outline: 3px solid var(--color-text-primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .werben-fab {
        transition: none;
        transform: none;
    }

    .werben-fab.is-visible {
        transform: none;
    }
}

/* -------------------------------------------------------------------------
   Foto fuer die Vorschau — rein lokal
   ---------------------------------------------------------------------- */

/* Traegt der Platzhalter ein Foto, verschwindet der Farbverlauf: Er wuerde
   sonst durch transparente Bildbereiche schimmern. */
.werben-preview__adthumb[data-has-photo],
.dark-mode .werben-preview__adthumb[data-has-photo],
.werben-preview__thumb[data-has-photo],
.dark-mode .werben-preview__thumb[data-has-photo] {
    background: var(--color-bg-tertiary);
}

/* Der leere Bildplatz traegt eine ruhige Beschriftung. Ohne sie ist er der
   groesste Block der Karte und liest sich wie ein Ladefehler. */
.werben-preview__adthumb,
.werben-preview__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bildplatz: ruhige Flaeche mit gestricheltem Rahmen und zentrierter
   Beschriftung — die uebliche Formensprache fuer „hier kommt etwas hin".
   Eine gefuellte graue Flaeche ohne Zeichen liest sich dagegen wie ein Bild,
   das nicht geladen hat. */
.werben-preview__adthumb:not([data-has-photo]),
.werben-preview__thumb:not([data-has-photo]) {
    flex-direction: column;
    gap: var(--spacing-xxs);
    border: 1px dashed var(--glass-border);
    /* `--color-bg-tertiary` traegt seinen eigenen Dunkelwert (#1d2128) und
       braucht deshalb keinen zweiten Block darunter. Der frueher hier
       stehende Festwert `rgba(127,140,158,.06)` war der einzige erfundene
       Farbwert der Datei — und im Dunkelmodus nur per Zweitregel zu retten. */
    background: var(--color-bg-tertiary);
}

.werben-preview__slotIcon {
    display: block;
    margin: 0 auto 6px;
    opacity: 0.72;
}

/* Kleine Bildflaeche der Inline-Anzeige: nur das Symbol.
   Die Flaeche ist dort rund 90x64 Pixel gross — die Beschriftung brach darin
   auf drei Zeilen um und fuellte den ganzen Platz. Das Symbol allein sagt
   dasselbe; die Erklaerung steht ohnehin im Konfigurator daneben. */
.werben-preview__adthumb .werben-preview__slottext {
    display: none;
}

.werben-preview__adthumb .werben-preview__slotIcon {
    width: 20px;
    height: 20px;
    margin: 0;
}

.werben-preview__slotlabel {
    display: block;
    padding: 0 var(--space-1);
    color: var(--color-text-tertiary);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
}

/* Mit Foto verschwindet die Beschriftung samt Zentrierung — das Bild fuellt
   die Flaeche dann vollstaendig. */
.werben-preview__adthumb[data-has-photo],
.werben-preview__thumb[data-has-photo] {
    display: block;
}

.werben-preview__photo {
    display: block;
    width: 100%;
    height: 100%;
    /* Zuschnitt statt Verzerrung — die echte Anzeige beschneidet genauso. */
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

.werben-control--photo .werben-photo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

/* Das Dateifeld selbst ist unsichtbar, aber bedienbar: Die Beschriftung ist
   der Knopf. So bleibt die Optik bei allen Browsern gleich, ohne dass die
   Tastaturbedienung verloren geht. */
.werben-photo__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* `[hidden]` muss gewinnen.
   Das Attribut wirkt nur ueber die Standardregel `display: none` des Browsers
   — eine eigene `display`-Angabe schlaegt sie mit hoeherer Spezifitaet. Ohne
   diese Zeile stand „Foto entfernen" dauerhaft da, obwohl gar kein Foto
   gewaehlt war. Dieselbe Falle hat auf dieser Seite schon einmal einen
   leeren Produktschalter stehen lassen. */
.werben-page [hidden] {
    display: none !important;
}

.werben-photo__button,
.werben-photo__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        box-shadow var(--motion-fast) var(--animation-curve-smooth),
        border-color var(--motion-fast) var(--animation-curve-smooth);
}

.werben-photo__remove {
    font-weight: 500;
    color: var(--color-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
    .werben-photo__button:hover,
    .werben-photo__remove:hover {
        box-shadow: var(--elevation-2);
    }
}

/* Sichtbarer Fokus auch dann, wenn der Fokus technisch auf dem verborgenen
   Dateifeld liegt.
   Der frueher hier stehende Nachbar-Selektor
   `.werben-photo__input:focus-visible + .werben-photo__buttontext` konnte NIE
   greifen: Im Markup steht die Beschriftung VOR dem Dateifeld, `+` waehlt aber
   das folgende Geschwister. Uebrig blieb `:focus-within` — das zeigt den Ring
   auch beim Mausklick. `:has()` prueft genau das Richtige: Ring nur, wenn das
   Dateifeld selbst tastaturfokussiert ist.
   Bewusst als EIGENE Regel: Ein Parser ohne `:has()` verwirft die gesamte
   Selektorliste, in der es steht — der Ring des Entfernen-Knopfes daneben
   verschwaende dann mit. */
.werben-photo__button:has(.werben-photo__input:focus-visible) {
    outline: 3px solid var(--color-text-primary);
    outline-offset: 2px;
}

.werben-photo__remove:focus-visible {
    outline: 3px solid var(--color-text-primary);
    outline-offset: 2px;
}

/* Die Feedkarte der PR-Vorschau steht ausserhalb eines `.news-grid`.
   `.news-card` bringt `height: 100%` mit; ohne Rasterzelle bleibt die Hoehe
   sonst an der Elternhoehe haengen. */
.werben-preview__cardwrap .news-card {
    height: auto;
    min-height: 0;
    /* Breite einer echten Feedkarte im Dreierraster. Ohne Deckel waechst die
       Karte auf die volle Vorschaubreite, und das 16:9-Bild wird zum Plakat —
       die Vorschau zeigt dann eine Groesse, die es im Produkt nicht gibt. */
    max-width: 420px;
    margin-inline: auto;
}

.werben-preview__thumb {
    /* KEIN `display` hier. Diese Regel steht spaeter in der Datei als die
       Zentrierung des leeren Bildplatzes weiter oben und wuerde deren
       `display: flex` bei gleicher Spezifitaet ueberschreiben — die
       Beschriftung klebte dann oben am Rand statt in der Mitte zu stehen.
       Wer hier wieder ein `display` einsetzt, bricht die Zentrierung. */
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background:
        linear-gradient(135deg,
            var(--color-accent-primary-alpha-10) 0%,
            transparent 60%),
        var(--color-bg-tertiary);
}

.werben-preview__cardwrap .news-image {
    padding: 0;
}

.werben-preview__unavailable {
    margin: 0;
    padding: var(--space-3) var(--space-2);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    text-align: center;
}

/* ---------------------------------------------------------------------------
 * 2 — Produktkarten
 * ------------------------------------------------------------------------ */

.werben-products__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.werben-product {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: var(--elevation-1);
    transition:
        transform var(--motion-standard) var(--animation-curve-smooth),
        box-shadow var(--motion-standard) var(--animation-curve-smooth);
}

/* Kein Hover-Lift auf Touch-Geraeten: Dort bleibt der Zustand nach dem
   Antippen haengen und die Karte sieht dauerhaft angehoben aus. */
@media (hover: hover) and (pointer: fine) {
    .werben-product:hover {
        transform: translateY(-2px);
        box-shadow: var(--elevation-2);
    }
}

.werben-product__title {
    margin: 0;
    font-size: 1.4375rem;
    line-height: 1.25;
    font-weight: 700;
}

.werben-product__what {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.werben-product__where {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.werben-product__where li {
    position: relative;
    padding-left: var(--space-3);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.werben-product__where li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    /* Petrol = Orientierung und ruhige Struktur, nicht Aktivierung. */
    background: var(--color-accent-secondary);
}

.werben-product__price {
    margin: auto 0 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.werben-product__price .werben-price__unit {
    display: block;
    margin-top: 2px;
    color: var(--color-text-tertiary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.werben-product__cta {
    align-self: flex-start;
}

/* ---------------------------------------------------------------------------
 * 3 — Konfigurator
 * ------------------------------------------------------------------------ */

.werben-configurator__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.werben-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow: var(--elevation-1);
}

.werben-control {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.werben-control__label,
.werben-field__label {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.werben-input,
.werben-select,
.werben-textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--space-1) var(--space-2);
    /* Bedienelement-Linie statt der Zierlinie `--color-border`: Auf der
       weissen Feldfuellung kam die Zierlinie nur auf 1,29:1 und verfehlte
       damit WCAG 2.2 SC 1.4.11 (3:1 fuer Bedienelement-Umrandungen).
       `--color-field-border` erreicht hier 3,37:1 gegen
       --color-reading-surface (#ffffff). */
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-md);
    background: var(--color-reading-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    appearance: none;
    transition:
        border-color var(--motion-fast) var(--animation-curve-smooth),
        box-shadow var(--motion-fast) var(--animation-curve-smooth);
}

.werben-textarea {
    min-height: 120px;
    padding: var(--space-2);
    resize: vertical;
}

.werben-select {
    /* Eigener Pfeil statt der Systemgrafik: `appearance: none` entfernt den
       nativen Pfeil, und ohne Ersatz sieht ein Auswahlfeld aus wie ein
       Textfeld. Der Pfeil kommt als SVG-Pfad in der Huelle daneben — nie als
       Textglyphe, die sitzt schriftabhaengig neben der Mitte. */
    padding-right: var(--space-4);
    background-image: none;
}

.werben-select-shell {
    position: relative;
    display: block;
}

.werben-select-shell__chevron {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-tertiary);
}

.werben-input:focus-visible,
.werben-select:focus-visible,
.werben-textarea:focus-visible {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px var(--color-text-primary);
}

.werben-input::placeholder,
.werben-textarea::placeholder {
    color: var(--color-text-tertiary);
}

/* Segmentierte Produktauswahl. Der aktive Zustand ist satt gefuellt mit
   weisser Schrift — dieselbe Sprache wie der aktive Bezirks-Chip. */
.werben-segmented {
    /* `grid-auto-flow: column` statt einer festen Spaltenzahl: Wird ein
       Produkt in einer Region nicht angeboten, faellt sein Schalter per
       `hidden` aus dem Layout — und die verbleibende Auswahl fuellt die Zeile.
       Mit `repeat(2, 1fr)` blieb an seiner Stelle eine leere Haelfte stehen,
       und die sah aus wie ein Darstellungsfehler. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--spacing-xxs);
    padding: var(--spacing-xxs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.werben-segmented__option {
    /* Zentriert und umbruchfaehig: Die Beschriftung steht seit der
       Kontrastkorrektur auf 19 px und kann auf schmalen Geraeten zweizeilig
       werden. Ohne Flex-Zentrierung klebte die zweite Zeile am oberen Rand. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--spacing-xxs) var(--space-1);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    /* Der aktive Schalter ist satt orange gefuellt und traegt weisse Schrift
       (3,29:1). Diese Fuellung ist nur als Grosstext AA-konform, deshalb
       19 px fett — und zwar auf ALLEN Schaltern, sonst springt die Zeile beim
       Umschalten. */
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition:
        background-color var(--motion-fast) var(--animation-curve-smooth),
        color var(--motion-fast) var(--animation-curve-smooth);
}

/* Gleiche Absicherung wie bei den Schaltflaechen: Auf gefuelltem Orange
   bleibt die Beschriftung in jedem Zustand weiss. */
.werben-segmented__option[aria-checked="true"],
.werben-segmented__option[aria-checked="true"]:hover,
.werben-segmented__option[aria-checked="true"]:focus,
.werben-segmented__option[aria-checked="true"]:focus-visible,
.werben-segmented__option[aria-checked="true"]:active {
    color: var(--color-accent-primary-contrast);
}

.werben-segmented__option[aria-checked="true"] {
    background: var(--color-accent-primary);
    color: var(--color-accent-primary-contrast);
    box-shadow: var(--elevation-1);
}

.werben-segmented__option:focus-visible {
    outline: 3px solid var(--color-text-primary);
    outline-offset: 1px;
}

.werben-segmented__option[hidden] {
    display: none;
}

/* Preisblock. Die Hoehe steht fest, damit der Wechsel von einer Zahl auf
   „Preis auf Anfrage" das Layout nicht springen laesst. */
.werben-pricebox {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Feste Mindesthoehe: Der Wechsel von einer Zahl auf „Preis auf Anfrage"
       und das Erscheinen der Laufzeitzeile duerfen das Layout nicht
       verschieben. */
    min-height: 124px;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.werben-pricebox__label {
    color: var(--color-text-tertiary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.werben-pricebox__value {
    color: var(--color-text-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.werben-pricebox__value.is-request {
    font-size: 1.25rem;
}

.werben-pricebox__unit {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Laufzeithinweis. Eine Vertragsbedingung, keine Warnung — deshalb ruhig in
   der tertiaeren Textfarbe und ohne Signalfarbe. */
.werben-pricebox__term,
.werben-price__term {
    display: block;
    margin-top: 2px;
    color: var(--color-text-tertiary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
}

.werben-pricebox__term:empty,
.werben-price__term:empty {
    display: none;
}

.werben-field__hint {
    margin: 2px 0 0;
    color: var(--color-text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Zwei Bauteile, zwei Namen — beide werden im Markup verwendet:
   `.werben-control__note` steht INNERHALB eines `.werben-control` (Hinweis
   unter Beitragstext und Fotoauswahl), `.werben-controls__note` steht direkt
   in `.werben-controls` (USt.-Hinweis unter dem Preis). Bis hierher gab es
   nur die Pluralform; die beiden Hinweise im Konfigurator standen deshalb
   ungestylt in voller Textgroesse und in der Primaerfarbe da. */
.werben-control__note,
.werben-controls__note {
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.werben-controls__cta {
    align-self: stretch;
}

/* ---------------------------------------------------------------------------
 * 4 — Warum hier, Reichweite
 * ------------------------------------------------------------------------ */

.werben-reach {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: var(--elevation-1);
    text-align: center;
}

.werben-reach__value {
    margin: 0;
    color: var(--color-text-primary);
    font-size: clamp(2.125rem, 1.4rem + 3vw, 3.25rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.werben-reach__label {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
}

.werben-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.werben-why__item {
    padding: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: var(--elevation-1);
}

.werben-why__item h3 {
    margin: 0 0 var(--space-1);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.werben-why__item p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * 5 — Ablauf
 * ------------------------------------------------------------------------ */

.werben-steps__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: werben-step;
}

.werben-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: var(--elevation-1);
}

.werben-step__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    /* Markenorange. Die drei Ziffern fuehren durch den Ablauf und sind damit
       Teil der Markenfuehrung, nicht bloss eine Aufzaehlung. Weisse Ziffer auf
       gefuelltem Orange ist die festgelegte Kombination. */
    background: var(--color-accent-primary);
    color: var(--color-accent-primary-contrast);
    /* Auch hier gilt die Grosstext-Schwelle: 16 px fett auf Orange sind
       3,29:1 gegen eine 4,5:1-Anforderung. 19 px fett besteht. */
    font-size: 1.1875rem;
    font-weight: 700;
}

.werben-step h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.werben-step p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.werben-steps__rail {
    position: relative;
    height: 4px;
    margin-top: var(--space-3);
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

.werben-steps__railfill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--color-accent-primary);
    transform-origin: left center;
}

/* ---------------------------------------------------------------------------
 * 6 — Formular
 * ------------------------------------------------------------------------ */

.werben-notice {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    line-height: 1.55;
}

.werben-notice--success {
    border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
    color: var(--color-text-primary);
}

.werben-notice--error {
    border-color: color-mix(in srgb, var(--color-error) 46%, transparent);
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-text-primary);
}

.werben-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow: var(--elevation-1);
}

.werben-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

.werben-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.werben-field--full {
    grid-column: 1 / -1;
}

/* Honigtopf: nie `display:none` — manche Skripte werten das als „ignorieren".
   Aus dem Sichtfeld geschoben, aus dem Fokusfluss genommen. */
.werben-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.werben-form__more-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.werben-form__more-toggle:focus-visible {
    outline: 3px solid var(--color-text-primary);
    outline-offset: 2px;
}

.werben-form__more-chevron {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    transition: transform var(--motion-standard) var(--animation-curve-smooth);
}

.werben-form__more-toggle[aria-expanded="true"] .werben-form__more-chevron {
    transform: rotate(180deg);
}

/* Der Bereich ist ohne JavaScript offen. `werben.js` setzt `is-collapsible`
   und uebernimmt danach die Hoehensteuerung. */
.werben-form__more.is-collapsible {
    overflow: hidden;
}

/* Erst der vollstaendig geschlossene Zustand nimmt die Felder aus der
   Tabulatorreihenfolge. `height: 0` allein reicht dafuer nicht — Eingabefelder
   in einem null Pixel hohen Kasten bleiben fokussierbar, und der Fokus springt
   dann in unsichtbare Felder. */
.werben-form__more.is-collapsible.is-collapsed {
    visibility: hidden;
}

.werben-form__turnstile {
    min-height: 65px;
}

.werben-form__privacy {
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.werben-form__privacy a {
    color: var(--color-accent-primary-text);
    text-underline-offset: 2px;
}

.werben-form__actions {
    display: flex;
}

.werben-form__submit {
    width: 100%;
}

.werben-form__submit[disabled] {
    opacity: 0.72;
    cursor: progress;
}

.werben-form__result {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 1rem;
    line-height: 1.55;
}

.werben-form__result.is-success {
    border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent);
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
}

.werben-form__result.is-error {
    border: 1px solid color-mix(in srgb, var(--color-error) 46%, transparent);
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
}

/* ---------------------------------------------------------------------------
 * 7 — FAQ
 * ------------------------------------------------------------------------ */

.werben-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.werben-faq__item {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: var(--elevation-1);
    overflow: hidden;
}

.werben-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.werben-faq__question::-webkit-details-marker {
    display: none;
}

.werben-faq__question:focus-visible {
    outline: 3px solid var(--color-text-primary);
    outline-offset: -3px;
}

.werben-faq__chevron {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--color-text-tertiary);
    transition: transform var(--motion-standard) var(--animation-curve-smooth);
}

.werben-faq__item[open] .werben-faq__chevron {
    transform: rotate(180deg);
}

.werben-faq__answer {
    padding: 0 var(--space-3) var(--space-3);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.65;
}

.werben-faq__answer p {
    margin: 0;
    max-width: 68ch;
}

.werben-faq__item[open] .werben-faq__answer {
    animation: werbenFaqReveal var(--motion-standard) var(--animation-curve-smooth) both;
}

@keyframes werbenFaqReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
 * Motion-Startzustaende
 *
 * Die Startzustaende gelten erst, wenn `werben.js` `is-motion-ready` gesetzt
 * hat. Ohne JavaScript — oder wenn das Modul nicht laedt — bleibt jeder
 * Inhalt sichtbar. Ein per CSS unsichtbar gestellter Abschnitt, der auf ein
 * Skript wartet, ist sonst eine leere Seite ohne Fehlermeldung.
 * ------------------------------------------------------------------------ */

.werben-page.is-motion-ready [data-werben-reveal] {
    opacity: 0;
    transform: translateY(14px);
}

.werben-page.is-motion-ready [data-werben-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

.werben-page.is-motion-ready .werben-hero__copy > *,
.werben-page.is-motion-ready .werben-hero__preview {
    opacity: 0;
}

.werben-page.is-motion-ready .werben-hero.is-revealed .werben-hero__copy > *,
.werben-page.is-motion-ready .werben-hero.is-revealed .werben-hero__preview {
    opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Breakpoints
 * ------------------------------------------------------------------------ */

@media (min-width: 641px) {
    .werben-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .werben-form__submit {
        width: auto;
        min-width: 260px;
    }
}

@media (min-width: 768px) {
    .werben-page {
        padding: var(--space-4) var(--space-4) var(--space-5);
        gap: var(--space-5);
    }

    .werben-products__grid,
    .werben-why__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .werben-steps__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .werben-hero {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
        gap: var(--space-4);
        align-items: center;
    }

    .werben-configurator__grid {
        grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
        align-items: start;
    }

    .werben-previewcard--large {
        position: sticky;
        top: calc(var(--site-header-height, 118px) + var(--space-2));
    }
}

/* ---------------------------------------------------------------------------
 * Dunkelmodus
 *
 * Das Theme schaltet ueber `.dark-mode` an `html`/`body`. Die meisten Flaechen
 * folgen bereits den Token; hier stehen nur die Stellen, an denen der
 * Dunkelmodus eine andere Materialitaet braucht.
 * ------------------------------------------------------------------------ */

.dark-mode .werben-preview {
    /* Auch im Dunkelmodus keine eigene Flaeche — siehe oben. */
    background: none;
    border: 0;
}

.dark-mode .werben-input,
.dark-mode .werben-select,
.dark-mode .werben-textarea,
.dark-mode .werben-segmented,
.dark-mode .werben-pricebox,
.dark-mode .werben-form__more-toggle {
    /* `--standalone-input-fill` ist das Eingabeflaechen-Token des Themes und
       traegt im Dunkelmodus rgba(255,255,255,.065) — der handgeschriebene
       Wert 0.06 war eine Kopie davon ohne Anbindung. */
    background: var(--standalone-input-fill);
}

/* Die Umrandung ist hier bewusst geteilt: Nur die drei echten Eingabefelder
   bekommen die kraeftigere Bedienelement-Linie. Segmentierte Auswahl,
   Preisbox und Mehr-Schalter behalten die zarte Glaslinie — ihr Zustand wird
   nicht ueber die Kontur gelesen, sondern ueber die gefuellte Auswahl bzw.
   den Inhalt, und eine harte Kontur wuerde die ruhige Flaeche zerschneiden. */
.dark-mode .werben-segmented,
.dark-mode .werben-pricebox,
.dark-mode .werben-form__more-toggle {
    border-color: var(--glass-border);
}

/* `--glass-border` erreichte auf der Feldfuellung nur 1,97:1;
   `--color-field-border` kommt auf 3,16:1. */
.dark-mode .werben-input,
.dark-mode .werben-select,
.dark-mode .werben-textarea {
    border-color: var(--color-field-border);
}

.dark-mode .werben-preview__thumb {
    background:
        linear-gradient(135deg,
            var(--color-accent-primary-alpha-10) 0%,
            transparent 60%),
        var(--color-bg-tertiary);
}

/* ---------------------------------------------------------------------------
 * Reduzierte Bewegung
 *
 * Keine Bewegung, aber auch kein verstecktes Element: Alle Startzustaende
 * werden aufgehoben, damit jeder Inhalt vollstaendig sichtbar bleibt.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .werben-page.is-motion-ready [data-werben-reveal],
    .werben-page.is-motion-ready .werben-hero__copy > *,
    .werben-page.is-motion-ready .werben-hero__preview {
        opacity: 1;
        transform: none;
    }

    .werben-button,
    .werben-product,
    .werben-form__more-chevron,
    .werben-faq__chevron,
    .werben-input,
    .werben-select,
    .werben-textarea,
    .werben-segmented__option {
        transition: none;
    }

    .werben-faq__item[open] .werben-faq__answer {
        animation: none;
    }

    @media (hover: hover) and (pointer: fine) {
        .werben-button:hover,
        .werben-product:hover {
            transform: none;
        }
    }
}