/* SoS v1 Redesign — Foundation Layer (Todo #986, Phase 1)
 * Geteilte Basis fuer ALLE v1-Redesign-Templates.
 * Architektur (User-Entscheid 2026-06-28): bestehendes Theme erweitern, NICHT
 * neues Theme. Rollout Seite-fuer-Seite. Darum ist alles ausser den reinen
 * Design-Tokens unter `.sos-v1` gescoped — Seiten OHNE body.sos-v1 bleiben
 * voellig unberuehrt (Warenkorb, Danke-Seiten, Checkout, Legacy-Pages).
 * Werte-Quelle: redesign-mockups/home-v1.html + _v1base.py (1:1).
 * Nav/Footer (Markup+CSS) + Page-Komponenten folgen in eigenen Bausteinen.
 */

/* ===== Design-Tokens (global, reine CSS-Variablen — stylen nichts direkt) ===== */
:root{
  --o:#ffa000; --o-d:#ff8b00;      /* Amber = einzige Klick-/CTA-Farbe */
  --teal:#0d7d7d;                  /* Content-/Metadaten-Akzent (nicht klickbar) */
  --anthra:#2e3440;                /* neutrale UI-Chrome */
  --ink:#1c1c1c; --mut:#6a6a6a; --line:#ececec;
  --bg:#f6f6f6; --page:#fff; --card:#fff; --peach:#fff7ee;
}
:root[data-theme="dark"]{
  --ink:#e9eaec; --mut:#9aa1ab; --line:#2a2f37;
  --bg:#14171c; --page:#0f1216; --card:#1c212b; --peach:#241b10;
  --teal:#34c5c0; --anthra:#3a4250;
}

/* ===== Base (gescoped) ===== */
.sos-v1{
  margin:0;                /* body-Default-Margin (8px) zuruecksetzen — general.min.css ist
                              auf v1-Seiten dequeued, also bringt die Foundation den Reset selbst.
                              Sonst Rand rundum (Mockup-Base: *{margin:0;padding:0}). */
  font-family:'Roboto',system-ui,sans-serif;
  color:var(--ink); background:var(--page); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* Mockup-Base-Reset gespiegelt (_v1base.CSS: *{box-sizing;margin:0;padding:0}).
   Admin-Bar (#wpadminbar …) gewinnt per ID-Spezifitaet, bleibt unberuehrt. */
.sos-v1 *,.sos-v1 *::before,.sos-v1 *::after{ box-sizing:border-box; margin:0; padding:0; }
.sos-v1 img{ max-width:100%; height:auto; display:block; }
/* Mockup-Base (_v1base.CSS): a{color:inherit} — Links sind kontextuell (Nav=ink, etc.),
   NICHT global orange. Orange kommt aus spezifischen Regeln (.cta-*, .nav-links a:hover, …). */
.sos-v1 a{ color:inherit; text-decoration:none; }

/* Section-System */
.sos-v1 section{ padding:64px 6vw; }
.sos-v1 .section-gray{ background:var(--bg); }
.sos-v1 .sec-head{ font-size:30px; font-weight:700; text-align:center; }
.sos-v1 .sec-sub{ color:var(--mut); text-align:center; margin:8px auto 40px; max-width:640px; }
.sos-v1 .kicker{ color:var(--teal); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:13px; }

/* ===== CTA-System (vereinheitlicht: 1 gefuellter Primaer + Outline-Alternativen) ===== */
.sos-v1 .mini-cta{
  display:inline-block; background:var(--o); color:#fff; text-decoration:none;
  font-weight:800; font-size:19px; padding:17px 44px; border-radius:11px;
  transition:background .15s,box-shadow .15s,transform .15s;
}
.sos-v1 .mini-cta:hover{ background:var(--o-d); box-shadow:0 10px 26px rgba(255,160,0,.42); transform:translateY(-2px); }
.sos-v1 .cta-bar{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:stretch; }
.sos-v1 .cta-alt{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--o); border:2px solid var(--o);
  font-weight:700; font-size:16px; padding:0 26px; border-radius:11px;
  text-decoration:none; transition:background .15s,color .15s;
}
.sos-v1 .cta-alt:hover{ background:var(--o); color:#fff; }
@media(max-width:560px){
  .sos-v1 .cta-bar{ flex-direction:column; align-items:stretch; gap:10px; max-width:340px; margin-left:auto; margin-right:auto; }
  .sos-v1 .cta-bar .mini-cta,.sos-v1 .cta-bar .cta-alt{ display:block; width:100%; text-align:center; padding:15px 20px; font-size:16px; line-height:1.3; }
}

/* ===== Dark-Mode Foundation (Token-Layer + globale Chrome-Fixes) ===== */
.sos-v1 [data-theme="dark"] .foot-logo,
:root[data-theme="dark"] .sos-v1 .logo img{ filter:invert(1); }

/* Theme-Toggle (Sonne/Mond) */
.sos-v1 .theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--ink); padding:6px; margin-left:2px;
}
.sos-v1 .theme-toggle svg{ width:30px; height:30px; stroke-width:2.5; }
.sos-v1 .theme-toggle .ico-sun{ display:none; }
:root[data-theme="dark"] .sos-v1 .theme-toggle .ico-moon{ display:none; }
:root[data-theme="dark"] .sos-v1 .theme-toggle .ico-sun{ display:inline-flex; }

/* ===== Foto-/Video-Grade (Hausstil-Filter, on-hover volle Farbe) ===== */
.sos-v1 .nw-img,.sos-v1 .ccard-img,.sos-v1 .km-img,.sos-v1 .kh-img,.sos-v1 .loc-img,
.sos-v1 .learn-img,.sos-v1 .begcard-img,.sos-v1 .art-hero,.sos-v1 .hero-img,.sos-v1 .equip-img,
.sos-v1 .km-video,.sos-v1 .ko-vid,.sos-v1 .video,.sos-v1 .video-wrap,.sos-v1 .z-hasvid{
  filter:saturate(.5) contrast(1.12); transition:filter .25s;
}
.sos-v1 *:hover > .nw-img,.sos-v1 *:hover > .ccard-img,.sos-v1 *:hover > .km-img,
.sos-v1 *:hover > .kh-img,.sos-v1 *:hover > .loc-img,.sos-v1 *:hover > .learn-img,
.sos-v1 *:hover > .begcard-img,.sos-v1 *:hover > .art-hero,.sos-v1 *:hover > .hero-img,
.sos-v1 *:hover > .equip-img,.sos-v1 *:hover > .z-hasvid,
.sos-v1 .km-video:hover,.sos-v1 .ko-vid:hover,.sos-v1 .video:hover,.sos-v1 .video-wrap:hover{
  filter:none;
}