/* ============================================================
   Wasserturmsiedlung — Design-System-Theme (V5)
   Mappt die Bestandspalette und alle Komponenten auf das
   verbindliche WTS-Design-System. Als LETZTES Stylesheet laden.
   DS-Hell ist Standard; Dunkel/Grün (tokens.css) bleiben wählbar,
   daher sind die Farb-Remaps auf das helle Theme gescopet.
   ============================================================ */
:root{
/* DS-Kernpalette */
--ds-beige:#fbfaf5;--ds-sand:#e7e4d3;--ds-sand-light:#f1efe4;--ds-moss:#5a6642;--ds-coral:#fc9571;--ds-pigeon:#546a79;--ds-slate:#36454f;--ds-forest:#152822;--ds-brick:#bc543b;--ds-pine:#445b51;--ds-terracotta:#c98a74;--ds-rust:#94412f;--ds-coral-bright:#e17663;--ds-highlight:#fedf62;--ds-glow:#e5a267;
/* Typografie: Marcellus auch im Fließtext (PFLICHT), feste Größenstufen */
--font-head:'Marcellus',serif;--font-body:'Marcellus',serif;
--fs-body:18px;--lh-body:1.72;--fs-lead:20px;--fs-h3:23px;--fs-h2:30px;--fs-h1:40px;--fs-eyebrow:16px;
/* Form */
--radius-s:12px;--radius-m:12px;--radius-pill:30px;
}
/* Farb-Remap NUR im hellen Theme; Dunkel/Grün behalten ihre Token aus tokens.css */
:root:not([data-theme="dark"]):not([data-theme="project"]){
/* Bestandsprimitives (styles.css) → DS */
--cream:var(--ds-beige);--beige:var(--ds-sand);--beige-warm:var(--ds-sand-light);--beige-soft:var(--ds-sand-light);
--orange:var(--ds-brick);--orange-soft:var(--ds-terracotta);--orange-deep:var(--ds-rust);
--moss:var(--ds-moss);--moss-soft:var(--ds-moss);
--ink:var(--ds-forest);--ink-soft:var(--ds-slate);--dark:var(--ds-slate);
--line:var(--ds-sand);--line-soft:var(--ds-sand-light);--gold:var(--ds-terracotta);
/* Semantische Tokens (tokens.css) → DS, ein Theme */
--bg:var(--ds-beige);--bg-soft:var(--ds-sand-light);
--surface:#fff;--surface-warm:var(--ds-sand-light);--surface-raised:#fff;
--text:var(--ds-forest);--text-soft:var(--ds-slate);--heading:var(--ds-forest);
--accent:var(--ds-brick);--accent-hover:var(--ds-rust);--accent-contrast:var(--ds-beige);
--focus:var(--ds-rust);
--shadow:none;--shadow-raised:0 10px 30px rgba(21,40,34,.16);
--nav-bg:rgba(251,250,245,.94);
--chip-bg:var(--ds-sand-light);--chip-active-bg:var(--ds-forest);--chip-active-tx:var(--ds-beige);
--map-glow:none;
--status-existing:var(--ds-moss);--status-planned:var(--ds-rust);--status-build:var(--ds-pigeon);--status-idea:var(--ds-brick);
color-scheme:light;
}
/* --- Typografie-Pflichten --- */
body{letter-spacing:.5px}
p,li,.lead,.faq-a,.detail-body{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance;letter-spacing:.5px}
h1{line-height:60px}
h2{line-height:45px}
@media(max-width:991px){:root{--fs-h1:30px;--fs-h2:25px}h1{line-height:45px}h2{line-height:38px}}
@media(max-width:479px){:root{--fs-h1:25px}h1{line-height:38px}}
.eyebrow,.h-eyebrow,.gate-eyebrow{font-family:var(--font-body);font-weight:400;letter-spacing:1px;color:var(--accent)}
/* --- Links: Hover per Unterstreichung (PFLICHT), kein reiner Farbwechsel --- */
a{color:var(--accent)}
a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
/* Unterstreichung NUR für Text-Links: klickbare Boxen, Kacheln und Buttons hovern ohne Underline */
a:is(.btn,.btn-orange,.btn-ghost,.btn-cream,.btn-intern-big,.nav-cta-mini,.nav-anmeldung-mini,.we-anmeld,.float-cta,.skip-link,.brand,.hub-tile,.we-card,.unit-card,.card,.tile):hover{text-decoration:none}
.more-btn:hover,details.bg-fold summary:hover{color:var(--accent-hover)}
/* --- Navigation: Rethink Sans NUR hier --- */
.nav a,.nav button,.nav .brand{font-family:'Rethink Sans',sans-serif}
.nav-links a{letter-spacing:.6px;text-decoration:underline;text-underline-offset:12px;text-decoration-thickness:2px;text-decoration-color:transparent;transition:text-decoration-color .15s ease,color .15s ease}
.nav-links a:hover,.nav-links a.active{color:var(--text);text-decoration-color:var(--heading)}
/* Mehr Luft zwischen den Nav-Links (nur in der Desktop-Zeile) */
@media(min-width:1251px){.nav:not(.nav-wide) .nav-links{gap:2.2rem}}
@media(min-width:1451px){.nav-wide .nav-links{gap:2.2rem}}
/* --- Buttons: Pill (PFLICHT), Marcellus, Farbwechsel nach Kontext-Matrix --- */
.btn,.btn-orange,.btn-ghost,.nav-cta-mini,.nav-anmeldung-mini,.btn-intern-big,.we-anmeld,.float-cta{font-family:'Marcellus',serif;font-weight:400;letter-spacing:.6px;border-radius:30px}
.btn-orange,.nav-cta-mini,.we-anmeld,.float-cta,.skip-link{background:var(--ds-moss);color:var(--ds-sand)}
.btn-orange:hover,.nav-cta-mini:hover,.we-anmeld:hover,.float-cta:hover{background:var(--ds-forest);color:var(--ds-sand) !important}
.btn-intern-big{background:var(--ds-sand);color:var(--ds-forest) !important;font-weight:400;box-shadow:none}
.btn-intern-big:hover{background:var(--ds-coral);color:var(--ds-forest) !important}
.btn-intern-big:hover{box-shadow:none;transform:none}
.btn-ghost,.nav-anmeldung-mini{border:1px solid var(--heading);color:var(--heading);background:transparent}
.btn-ghost:hover,.nav-anmeldung-mini:hover{background:var(--heading);color:var(--bg);border-color:var(--heading)}
/* Signature-Wobble (Filter wird von core.js injiziert) */
.btn-orange,.btn-intern-big,.we-anmeld,.float-cta,.btn-ghost{filter:url(#wts-wobble)}
@media (prefers-reduced-motion:reduce){.btn-orange,.btn-intern-big,.we-anmeld,.float-cta,.btn-ghost{filter:none}}
/* --- Cards: Radius 12px, kein generischer Schatten, Hover-Lift --- */
.card,.hub-tile,.matrix-col,.model-block,.rule-card,.sv-card,.unit-card,.form-wrap,.we-card,.detail-box{border-radius:12px}
.card{box-shadow:none;border-color:var(--line)}
.hub-tile:hover,.we-card:hover{transform:translateY(-4px);box-shadow:none}
/* --- FAQ / Accordion: Icon in Terracotta --- */
.acc-head::after{color:var(--gold)}
/* --- Chips --- */
.chip{border-color:var(--line)}
/* --- Platzhalter auf Rechtsseiten --- */
.platzhalter{background:var(--chip-bg);border-bottom-color:var(--gold)}
/* --- Statuschips intern --- */
.u-status.frei{background:var(--chip-bg);color:var(--status-existing)}
.u-status.gespraech{background:var(--chip-bg);color:var(--status-planned)}
.u-status.reserviert{background:var(--chip-bg);color:var(--status-idea)}
#form-error{color:var(--accent)}
/* --- Marcellus im gesamten Fließtext (PFLICHT), Sans nur Nav + Eingabefelder --- */
input,textarea,select{font-family:'Rethink Sans',sans-serif}
/* --- Formulare --- */
.form-wrap input:focus,.form-wrap textarea:focus,.form-wrap select:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(90,102,66,.16)}
/* --- Intro-Gate (dunkler Forest-Kontext) --- */
#wts-gate,.intro-gate{background:var(--ds-forest)}
#wts-gate .gate-eyebrow,.gate-eyebrow{color:var(--ds-terracotta)}
#wts-gate .gate-form input,.gate-form input{border-radius:12px;border-color:var(--ds-pigeon);font-family:'Rethink Sans',sans-serif}
#wts-gate .gate-form input:focus,.gate-form input:focus{border-color:var(--ds-coral);box-shadow:none}
#wts-gate .gate-q-label,.gate-q-label{color:var(--ds-coral)}
#wts-gate .gate-hint a,.gate-hint a{color:var(--ds-sand)}
#wts-gate .gate-chip,.gate-chip{border-color:var(--ds-pigeon);color:var(--ds-sand)}
#wts-gate .gate-chip:hover,.gate-chip:hover{border-color:var(--ds-sand);color:var(--ds-beige)}
#wts-gate .gate-chip.on,.gate-chip.on{background:var(--ds-coral);border-color:var(--ds-coral);color:var(--ds-forest)}
#wts-gate .gate-form .btn,.gate-form .btn{background:var(--ds-coral);color:var(--ds-forest);border-radius:30px;font-family:'Marcellus',serif;border:none}
#wts-gate .gate-form .btn:hover,.gate-form .btn:hover{background:var(--ds-sand);color:var(--ds-forest)}
#wts-gate .gate-error,.gate-error{color:var(--ds-coral)}
#wts-gate .gate-footer a:hover,.gate-footer a:hover{color:var(--ds-coral)}
/* --- Hero-Fallbackfarbe in Forest --- */
.manifesto-hero{background:var(--ds-forest)}
/* --- Hell-Theme: Kontrast-Overrides aus base.css/intern.css auf DS-Farben heben --- */
html[data-theme="light"] .btn-orange,html[data-theme="light"] .skip-link{background:var(--ds-moss);color:var(--ds-sand)}
html[data-theme="light"] .btn-orange:hover{background:var(--ds-forest);color:var(--ds-sand)}
html[data-theme="light"] .eyebrow,html[data-theme="light"] .h-eyebrow,html[data-theme="light"] .r-para{color:var(--accent)}
html[data-theme="light"] :where(p,li,.faq-a,.detail-body,.lead) a:not(.btn),html[data-theme="light"] a.we-anmeld,html[data-theme="light"] a.link-arrow{color:var(--accent)}