/* ============================================================
   PRAXIS-STUDIO · KAMMERTON — Motion-/Design-Layer (Praxislogo)
   Aufbauschicht über leistung.css. Konzept "Kammerton":
   Inhalte werden BELICHTET (Masken/Deckkraft), nicht eingeblendet;
   bewusster Hell-Dunkel-Atem; Bordeaux fast nur gerichtete Bewegung.
   Palette strikt: Dunkel #050505 · Cream #F8F6F1 · Akzent Bordeaux #6E2F3F.
   ------------------------------------------------------------
   DEFENSIV: Alle Reveal-Startzustände NUR unter html.kammerton.
   Ohne JS / bei GSAP-Fehler ist alles sichtbar (kein Blank-Screen).
   ============================================================ */

/* ---- Reveal-Startzustände nur wenn JS+GSAP aktiv (html.kammerton) ---- */
html.kammerton .kt-fade      { opacity: 0; }
html.kammerton .kt-fade-up   { opacity: 0; transform: translateY(34px); }
html.kammerton .kt-clip-up   { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(20px); }
html.kammerton .kt-split-chars .char { will-change: transform, opacity; }

/* Hero-spezifische Startzustände */
html.kammerton .svc-hero h1            { opacity: 1; }            /* H1 selbst sichtbar, chars werden animiert */
html.kammerton .svc-hero .kt-split-chars { display: inline-block; }
html.kammerton .svc-hero .svc-hero-sub,
html.kammerton .svc-hero .svc-cta-row,
html.kammerton .svc-hero .svc-breadcrumb,
html.kammerton .svc-hero .svc-hero-meta li,
html.kammerton .svc-hero .svc-scroll-cue { opacity: 0; }

/* Hero-Ring: Selbst-Zeichnung vorbereiten (JS misst pathLength) */
html.kammerton .svc-hero-mark [data-kt-draw] { }

/* ---- Generischer Belichtungs-Reveal (für spätere Sektionen) ---- */
html.kammerton .kt-reveal { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(24px); }

/* prefers-reduced-motion: keine Bewegung, sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  html.kammerton .kt-fade, html.kammerton .kt-fade-up, html.kammerton .kt-clip-up,
  html.kammerton .kt-reveal,
  html.kammerton .svc-hero .svc-hero-sub, html.kammerton .svc-hero .svc-cta-row,
  html.kammerton .svc-hero .svc-breadcrumb, html.kammerton .svc-hero .svc-hero-meta li,
  html.kammerton .svc-hero .svc-scroll-cue {
    opacity: 1 !important; clip-path: none !important; transform: none !important;
  }
}

/* ============================================================
   HERO — Belichtungs-Aufstieg, Ring-Selbstzeichnung, Bordeaux-Funke
   ============================================================ */
.svc-hero h1 .kt-split-chars { display: inline-block; }
/* Der Bordeaux-Mittelpunkt des Rings = einzige Akzentfläche im Hero (Funke) */
.svc-hero-mark .kt-spark { fill: var(--accent); }
html.kammerton .svc-hero-mark .kt-spark { opacity: 0; transform-box: fill-box; transform-origin: center; }

/* dezenter, entkoppelter Parallax-Container */
.kt-parallax { will-change: transform; }

/* ============================================================
   CREAM-INSEL — heller Atem (Beispiele, Leistungsumfang)
   Hintergrundwechsel getriggert (nicht scrub) → kein Flackern.
   ============================================================ */
.svc-sec.kt-island { transition: background-color .9s var(--ease), color .9s var(--ease); }
/* is-cream unter html.kammerton, damit es die Default-Dunkelheit sicher schlägt */
html.kammerton .svc-sec.kt-island.is-cream,
.svc-sec.kt-island.is-cream { background-color: var(--cream); }

/* Im Cream-Zustand: Schrift + Linien dunkel, Bilder/Logos invertieren via currentColor */
.kt-island.is-cream .svc-h2,
.kt-island.is-cream .svc-lead,
.kt-island.is-cream .svc-body,
.kt-island.is-cream .svc-logo-name { color: #0a0708; }
.kt-island.is-cream .svc-lead,
.kt-island.is-cream .svc-body { color: rgba(10,7,8,0.72); }
.kt-island.is-cream .svc-logo-field { color: rgba(10,7,8,0.55); }
.kt-island.is-cream .svc-logo-card { background: #efece3; border-color: rgba(10,7,8,0.12); }
.kt-island.is-cream .svc-logo-card:hover { background: #e8e4d9; border-color: rgba(10,7,8,0.28); }

/* Logo-SVGs nutzen currentColor → folgen automatisch hell/dunkel.
   Bordeaux-Detailpunkte bleiben Bordeaux (eigener fill im Markup). */
.svc-logo-card svg { color: var(--cream); }
.kt-island.is-cream .svc-logo-card svg { color: #0a0708; }

/* No-JS / reduced-motion: Cream-Insel sofort hell darstellen */
html:not(.kammerton) .svc-sec.kt-island { background-color: var(--cream); }
html:not(.kammerton) .svc-sec.kt-island .svc-h2,
html:not(.kammerton) .svc-sec.kt-island .svc-lead,
html:not(.kammerton) .svc-sec.kt-island .svc-body,
html:not(.kammerton) .svc-sec.kt-island .svc-logo-name { color: #0a0708; }
html:not(.kammerton) .svc-sec.kt-island .svc-logo-card { background: #efece3; border-color: rgba(10,7,8,0.12); }
html:not(.kammerton) .svc-sec.kt-island .svc-logo-card svg { color: #0a0708; }
@media (prefers-reduced-motion: reduce) {
  html.kammerton .svc-sec.kt-island { background-color: var(--cream); }
}

/* FOUC-Gate: Beispiele-Inhalte vor JS-Reveal verstecken (nur unter kammerton) */
html.kammerton #beispiele .svc-h2,
html.kammerton #beispiele .svc-lead,
html.kammerton #beispiele .svc-logo-card { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.kammerton #beispiele .svc-h2,
  html.kammerton #beispiele .svc-lead,
  html.kammerton #beispiele .svc-logo-card { opacity: 1 !important; }
}