/* Dark-Mode-Ergänzung für Projekt-Unterseiten: Headlines werden hell.
   Eigene Datei, damit case.css / case-stage-ramona.css unberührt bleiben. */
html.dark main h1, html.dark main h2, html.dark main h3,
html.dark .cs-head h1, html.dark .cs-copy h2, html.dark .cs-copy h3,
html.dark .cs-txt h2, html.dark .sv-related h2 { color:#F4F4F2; }
html.dark .cs-eyebrow { color:rgba(244,244,242,.45); }
html.dark .cs-meta dt { color:rgba(244,244,242,.4); }
html.dark .cs-meta dd { color:rgba(244,244,242,.85); }
html.dark .cs-lead { color:rgba(244,244,242,.68); }

/* Sektions-Headlines auf den Projektseiten in Zitat-Groesse */
/* Projektseiten-Ueberschriften 10.08.2026: 54px bei 1440px, damit sie
   naeher an den Leistungsseiten (74/64) liegen. */
.cs-txt h2, .cs-copy h2, .sv-related h2 { font-size:clamp(28px,3.75vw,54px); line-height:1.18; }

/* Sublines/Eyebrows ueberall einheitlich wie auf der Startseite:
   12px / 600 / .18em / 45% Grau (".cs-txt p" hat hoehere Spezifitaet, daher p.cs-eyebrow) */
.cs-txt p.cs-eyebrow { font-size:12px; letter-spacing:.18em; color:rgba(11,12,14,.45); }
html.dark .cs-txt p.cs-eyebrow { color:rgba(244,244,242,.45); }
.cs-quote .cs-eyebrow, .cs-cta .cs-eyebrow { font-size:12px; }

/* Menue-Hover im neuen hellen Gruen (gilt auf allen Seiten, die diese Datei laden) */
.nav-menu-link:hover { color:#10B981; }
#nav-menu #nav-cta:hover { background:#10B981; }

/* ── Einheitliche Abstaende um Textsektionen: oben wie unten ──────────────
   Der Eyebrow oben hat weniger optische Luft als der Absatz unten, daher
   oben etwas mehr Padding, damit beide Abstaende gleich WIRKEN. */
.cs-txt { padding-top:clamp(52px,9vh,132px); padding-bottom:clamp(42px,7.2vh,106px); }
/* ── Fliesstext etwas weiter vom Rand als die Bilder ── */
.cs-txt, .cs-quote { padding-left:clamp(0px,2.6vw,46px); }
.cs-txt { max-width:calc(820px + clamp(0px,2.6vw,46px)); }
@media (max-width:720px) { .cs-txt, .cs-quote { padding-left:0; } }

/* ══════════ Dark Mode: sichtbare Kanten (10.08.2026) ══════════
   Der schwarze CTA-Kasten (.cs-cta--dark, #0B0C0E) liegt im Dark Mode auf
   einem fast gleich dunklen Seitenhintergrund (#0E0F11) und verschwindet
   als Flaeche. Ein feiner heller Rand grenzt ihn wieder ab, ohne den
   bewusst schwarzen Charakter zu aendern. */
html.dark .cs-cta--dark { box-shadow:inset 0 0 0 1px rgba(244,244,242,.14); }

/* ══════════ Dark Mode: Projektseiten-Nachzuegler (12.08.2026) ══════════
   Elemente, die nie eine Dark-Regel bekommen haben und deshalb im
   Dunkeln unsichtbar oder dunkelgruen standen. */

/* Subline unter dem Titel: grau statt Dunkelgruen - derselbe Ton wie die
   Sublines der Leistungsseiten. */
html.dark .cs-sub { color:rgba(244,244,242,.68); }

/* Kennzahlen (100+ / 30+ / 10+): die Ziffern erbten Schriftschwarz.
   Deckt mb-kpi (Mercedes), hk-kpi (Heineken) und kuenftige *-kpi-Bloecke. */
html.dark [class*="-kpi"] .z { color:#F4F4F2; }

/* Vor/Zurueck-Navigation am Seitenende */
html.dark .cs-next .cs-next-back { color:rgba(244,244,242,.55); }
html.dark .cs-next .cs-next-proj small { color:rgba(244,244,242,.45); }
html.dark .cs-next .cs-next-proj strong { color:#F4F4F2; }
html.dark .cs-next a:hover strong, html.dark .cs-next a:hover .cs-next-proj strong { color:#6FD4A4; }

/* Breadcrumbs: gleicher Grauton wie .ld-crumb auf den Leistungsseiten */
html.dark .sv-breadcrumb { color:rgba(244,246,243,.45); }