/* Die Produktseite folgt der gleichen Auswahl wie der Arbeitsplatz. */
:root[data-design] {
    --tinte: var(--vm-ink);
    --gruen: var(--vm-accent);
    --hellgruen: var(--vm-soft);
    --text: var(--vm-muted);
    --linie: var(--vm-line);
    --weiss: var(--vm-surface);
    --papier: var(--vm-bg);
}
body { font-family: var(--vm-body); background: var(--vm-bg); }
h1, h2, .bildtext h3, .werk-karte h3 { font-family: var(--vm-heading); }
h1 em { font-family: inherit; }
.kopf, .sprung, .handy-text, .tarif, .zugang,
.umschalter a[aria-current], .werk-karte header, .volumen-preise a,
.bildschirm, .fensterrand, .funktionen article { background: var(--vm-surface); }
.hero, .werk-bild { background: linear-gradient(125deg, var(--vm-bg) 28%, var(--vm-soft)); }
.galerie, .hero-text .kicker, .umschalter { background: var(--vm-soft); border-color: var(--vm-line); }
.auswahl, .bildschirm, .werk-bild img, .sekund { border-color: var(--vm-line); }
.auswahl a, .hinweis, .fensterrand span { color: var(--vm-muted); }
.auswahl a:hover { background: var(--vm-surface); }
.signet, .primaer, .auswahl a[aria-selected=true], .tarifband .volumen-fuss .primaer {
    background: var(--vm-accent); color: var(--vm-on-accent);
}
.primaer:hover { background: var(--vm-accent); filter: brightness(.94); }
.kicker span, .fensterrand i { background: var(--vm-accent); }
.tarifband { background: var(--vm-brand); color: var(--vm-on-brand); }
.tarifband :is(.kicker, .titelzeile p, .volumen-fuss p) { color: var(--vm-on-brand); }
.tarifband .kicker span { background: var(--vm-on-brand); }
.auswahl a, .knopf, .zugang, .studio, .ablaufbild, .werk-karte, .funktionen article,
.volumen-preise a, .galerie, .signet { border-radius: var(--vm-radius); }
.zugang input:not([type=hidden]) { color: var(--vm-ink); background: var(--vm-surface); border-color: var(--vm-line); }
.meldung.error { color: var(--vm-error); background: var(--vm-error-bg); }
:focus-visible { outline: 3px solid var(--vm-focus); outline-offset: 3px; }
.stilwahl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vm-muted); }
.stilwahl select { font: inherit; min-height: 36px; border: 1px solid var(--vm-line); border-radius: var(--vm-radius); color: var(--vm-ink); background: var(--vm-surface); padding: 4px; }
.stil-feedback:empty { display: none; }
.stil-feedback { color: var(--vm-error); font-size: 12px; }
html[data-design="kontor"] .hero-text { border-left: 4px solid var(--vm-accent); padding-left: clamp(12px,2vw,28px); }
@media (max-width: 1050px) { .kapitel { display: none; } }
@media (max-width: 740px) { .stilwahl>span { display: none; } }
@media (max-width: 560px) {
    .kopfzeile { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding-block: 7px; }
    .stilwahl { justify-self: end; }
    .kundenlinks { grid-column: 1/-1; justify-content: flex-end; border-top: 1px solid var(--vm-line); padding-top: 4px; }
    html { scroll-padding-top: 110px; }
}