/* ============================================================================
   Dark-Mode — page-wide coverage (Welle 5.14)
   ----------------------------------------------------------------------------
   Erweitert den `is-dark-bg`-Toggle (in glass-tuning.js, setzt
   `body.is-dark-bg`) auf ALLE Sections der Homepage. Vorher nur Hero +
   Trust-Strip + Suite + Footer. Jetzt auch: Referenzen, Process, About,
   Contact + alle inneren Cards.

   Palette aligned mit Hero-Dark-Theme:
   - Body BG:     #0a0d14 (sehr dunkel navy)
   - Section-1:   #111827 (etwas heller — gradient-stop)
   - Card-BG:     rgba(255,255,255, 0.04) (subtle elevation)
   - Card-Border: rgba(255,255,255, 0.08)
   - Text-strong: #f5e8d6 (cream, aus Hero)
   - Text-mid:    rgba(255,255,255, 0.65)
   - Text-soft:   rgba(255,255,255, 0.50)
   - Accent:      var(--accent-blue), bleibt
   ============================================================================ */

/* ─── Section-Backgrounds ─────────────────────────────────────────────── */
/* Welle 5.25 v4: #services Dark-BG-Override entfernt — services-atelier.css
   bringt eigenen Dark-Mode (#0A1B33 = Midnight Navy, matcht alle anderen
   Body-Sections für Continuous-System). */
body.is-dark-bg #services .suite-bento-title,
body.is-dark-bg #services .section-title {
  color: #f5e8d6 !important;
}
body.is-dark-bg #services .section-eyebrow-number,
body.is-dark-bg #services .section-eyebrow-label {
  color: rgba(255, 255, 255, 0.55);
}
body.is-dark-bg #services .section-eyebrow-line {
  background: rgba(255, 255, 255, 0.20);
}

/* Welle 5.25 v4: Continuous-Background-System.
   Alle Body-Sections (#referenzen, #process, #about, #contact) bringen
   ihren eigenen Dark-Mode mit (in referenzen-portfolio.css und style.css).
   Pricing hat eigenes Tier-6 "Reverse Aurora" Pattern, permanent dunkel
   via Mesh-Overlay, kein Dark-Mode-Override nötig. */

/* ─── Section-Headers (label / title / sub) ───────────────────────────── */
body.is-dark-bg #referenzen .section-title,
body.is-dark-bg #process .section-title,
body.is-dark-bg #about .section-title,
body.is-dark-bg #contact .section-title {
  color: #f5e8d6 !important;
}

body.is-dark-bg #referenzen .section-label,
body.is-dark-bg #process .section-label,
body.is-dark-bg #about .section-label,
body.is-dark-bg #contact .section-label {
  color: var(--accent-blue, #6592E6) !important;
}

body.is-dark-bg #referenzen .section-sub,
body.is-dark-bg #process .section-sub,
body.is-dark-bg #about .section-sub,
body.is-dark-bg #contact .section-sub {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ─── Section-Eyebrow-Premium (Welle 5.9 Style) ───────────────────────── */
body.is-dark-bg #referenzen .section-eyebrow-number,
body.is-dark-bg #process .section-eyebrow-number,
body.is-dark-bg #about .section-eyebrow-number,
body.is-dark-bg #contact .section-eyebrow-number {
  color: rgba(255, 255, 255, 0.55);
}
body.is-dark-bg #referenzen .section-eyebrow-line,
body.is-dark-bg #process .section-eyebrow-line,
body.is-dark-bg #about .section-eyebrow-line,
body.is-dark-bg #contact .section-eyebrow-line {
  background: rgba(255, 255, 255, 0.20);
}
body.is-dark-bg #referenzen .section-eyebrow-label,
body.is-dark-bg #process .section-eyebrow-label,
body.is-dark-bg #about .section-eyebrow-label,
body.is-dark-bg #contact .section-eyebrow-label {
  color: rgba(255, 255, 255, 0.55);
}

/* ─── Referenzen-Cards: Welle 5.25 — Dark-Mode in referenzen-portfolio.css ─ */
/* Alte .ref-teaser-card Dark-Styles entfernt; die neuen .ref-portfolio__*
   Klassen bringen ihren eigenen body.is-dark-bg Dark-Mode mit. */

/* ─── Process-Section v2 (Steps) ──────────────────────────────────────── */
body.is-dark-bg .process-step,
body.is-dark-bg .process-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}
body.is-dark-bg .process-step-title,
body.is-dark-bg .process-step h3,
body.is-dark-bg .process-step h4 {
  color: #f5e8d6;
}
body.is-dark-bg .process-step-body,
body.is-dark-bg .process-step p {
  color: rgba(255, 255, 255, 0.70);
}
body.is-dark-bg .process-step .day-badge {
  background: rgba(212, 161, 78, 0.15);
  color: #f5e8d6;
  border-color: rgba(212, 161, 78, 0.40);
}

/* ─── About-Section (Team-Cards v2) ───────────────────────────────────── */
body.is-dark-bg .team-card,
body.is-dark-bg .team-card-v2 {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}
body.is-dark-bg .team-card .team-name,
body.is-dark-bg .team-card h3 {
  color: #f5e8d6;
}
body.is-dark-bg .team-card .team-role,
body.is-dark-bg .team-card .team-bio,
body.is-dark-bg .team-card p {
  color: rgba(255, 255, 255, 0.70);
}

/* Trust-Facts in About (falls vorhanden) */
body.is-dark-bg #about .trust-fact-title { color: #f5e8d6 !important; }
body.is-dark-bg #about .trust-fact-desc { color: rgba(255, 255, 255, 0.70) !important; }

/* ─── Pricing-Cards (im permanent-dark Pricing-Section) ────────────────
   Pricing-Section ist immer dunkel. Im Dark-Mode harmonisieren wir die
   Cards auch (statt weiß auf dunkel). Featured-Card behält Akzent. */
body.is-dark-bg #pricing .pricing-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.85);
}
body.is-dark-bg #pricing .pricing-card .pricing-card-label,
body.is-dark-bg #pricing .pricing-card .pricing-card-eyebrow {
  color: rgba(255, 255, 255, 0.55);
}
body.is-dark-bg #pricing .pricing-card .pricing-card-price,
body.is-dark-bg #pricing .pricing-card .pricing-card-name,
body.is-dark-bg #pricing .pricing-card h3 {
  color: #f5e8d6;
}
body.is-dark-bg #pricing .pricing-card .pricing-card-sub,
body.is-dark-bg #pricing .pricing-card .pricing-card-period,
body.is-dark-bg #pricing .pricing-card p {
  color: rgba(255, 255, 255, 0.65);
}
/* Featured-Card behält Cream/Gold-Tint als Akzent */
body.is-dark-bg #pricing .pricing-card.pricing-card--featured {
  background: linear-gradient(180deg, rgba(212, 161, 78, 0.16) 0%, rgba(212, 161, 78, 0.06) 100%) !important;
  border-color: rgba(212, 161, 78, 0.35) !important;
}

/* ─── Contact-Section (Channel-Cards) ─────────────────────────────────── */
body.is-dark-bg .contact-channel {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
body.is-dark-bg .contact-channel:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
body.is-dark-bg .contact-channel-label {
  color: rgba(255, 255, 255, 0.55) !important;
}
body.is-dark-bg .contact-channel-value {
  color: #f5e8d6 !important;
}
body.is-dark-bg .contact-channel-hint {
  color: rgba(255, 255, 255, 0.60) !important;
}

body.is-dark-bg #contact .btn-white-outline {
  border-color: rgba(255, 255, 255, 0.40) !important;
  color: #f5e8d6 !important;
}
body.is-dark-bg #contact .btn-white-outline:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ─── Image-loading-Smooth bleibt bei Reduced-Motion sauber ────────────── */
@media (prefers-reduced-motion: reduce) {
  body.is-dark-bg { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Welle 5.26 v41: Cross-Section Hairlines im Dark-Mode entfernen
   ────────────────────────────────────────────────────────────────────────
   User-Report: dünne helle Linien zwischen den Sections (oben + unten)
   sichtbar im Dark-Mode, im Light-Mode nicht. Im Light passt die
   Linienfarbe zur hellen Body-BG, im Dark sticht sie hervor.
   Defensive Fix: alle potenziellen border-top/-bottom und subtle
   inset-Highlight-Shadows auf Top-Level Sections/Asides + ihren
   Pseudoelementen unterdrücken.
   ════════════════════════════════════════════════════════════════════════ */
body.is-dark-bg main > section,
body.is-dark-bg main > aside,
body.is-dark-bg main > section > .container,
body.is-dark-bg main > aside > .container,
body.is-dark-bg main > section > .container > :last-child,
body.is-dark-bg main > section > :last-child {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* Pseudo-elements an Section/Aside Edges: explicit transparent borders */
body.is-dark-bg main > section::before,
body.is-dark-bg main > section::after,
body.is-dark-bg main > aside::before,
body.is-dark-bg main > aside::after {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}