/* ══════════════════════════════════════
   CLARITY360 THEMES (gemeinsam für alle Seiten)
   Light ist Standard und greift auch ohne JavaScript (:root ohne Attribut).
   Dark kommt über data-theme="dark" auf <html> und entspricht exakt den
   bisherigen Werten. Einbinden vor dem seiteneigenen <style>.
══════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Palette (in beiden Modi gleich) ── */
  --c-midnight: #0D1B2A;
  --c-navy: #1A3A5C;
  --c-teal: #00C2A8;
  --c-teal-400: #2DD4BD;
  --c-teal-50: rgba(0,194,168,0.08);
  --c-amber: #E8A23D;
  --c-pink: #E8417A;
  --c-pink-400: #F26A98;
  --c-pink-50: rgba(232,65,122,0.08);
  --c-white: #F4F6F8;
  --c-fog: #C7D0DA;
  --c-slate: #8595A8;
  --c-slate-dim: #4A5A70;
  --c-hairline: rgba(244,246,248,0.08);
  --c-hairline-strong: rgba(244,246,248,0.16);

  /* ── Flächen & Text (Light) ── */
  --bg-canvas: #F5F8FA;
  --bg-card: #FFFFFF;
  --bg-tint: rgba(13,27,42,0.03);

  --fg-1: rgba(13,27,42,0.92);
  --fg-2: rgba(13,27,42,0.62);
  --fg-3: rgba(13,27,42,0.62);
  --fg-disabled: rgba(13,27,42,0.62);

  --border: rgba(13,27,42,0.14);        /* Linien im Inneren */
  --border-card: rgba(13,27,42,0.22);   /* Kartenränder */
  --border-strong: rgba(13,27,42,0.34); /* Hover */
  --shadow-hover: 0 12px 32px -12px rgba(13,27,42,0.12);
  --shot-border: rgba(13,27,42,0.22);   /* Rand um App-Screenshots */

  /* ── Säulen-Ink: Textfarbe der Säulen auf hellem Grund ── */
  --teal-ink: #00796B;
  --amber-ink: #9A6206;
  --pink-ink: #CE2360;
  /* Kennzahlen (im Dark die hellere Stop-Variante) */
  --teal-bright: var(--teal-ink);
  --amber-bright: var(--amber-ink);
  --pink-bright: var(--pink-ink);
  --c-amber-text: var(--amber-ink);
  /* Icon-Kästchen Amber */
  --amber-box: rgba(232,162,61,0.16);

  /* ── Struktur ── */
  --section-rule: transparent;          /* keine Trennstriche zwischen Sections */
  --nav-bg: rgba(245,248,250,0.92);
  --nav-bg-scrolled: #F5F8FA;
  --hamburger: var(--teal-ink);
  --wordmark-accent: var(--teal-ink);
  --link: #00796B;
  --link-hover: #005A4F;
  --btn-primary-hover: #00AE96;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas: #0D1B2A;
  --bg-card: #14283F;
  --bg-tint: rgba(255,255,255,0.03);

  --fg-1: #F4F6F8;
  --fg-2: #C7D0DA;
  --fg-3: #8595A8;
  --fg-disabled: #4A5A70;

  --border: rgba(244,246,248,0.08);
  --border-card: rgba(244,246,248,0.08);
  --border-strong: rgba(244,246,248,0.16);
  --shadow-hover: 0 12px 40px -12px rgba(0,0,0,0.5);
  --shot-border: rgba(244,246,248,0.08);

  --teal-ink: #00C2A8;
  --amber-ink: #E8A23D;
  --pink-ink: #E8417A;
  --teal-bright: #2DD4BD;
  --amber-bright: #F0C078;
  --pink-bright: #F26A98;
  --c-amber-text: #F0C078;
  --amber-box: rgba(232,162,61,0.12);

  --section-rule: rgba(244,246,248,0.08);
  --nav-bg: transparent;
  --nav-bg-scrolled: #0D1B2A;
  --hamburger: #00C2A8;
  --wordmark-accent: #00C2A8;
  --link: #00C2A8;
  --link-hover: #2DD4BD;
  --btn-primary-hover: #2DD4BD;
}

/* Wechsel ohne Überblenden: theme.js setzt die Klasse für zwei Frames. */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after { transition: none !important; }

/* ── Navbar-Layout mit Umschalter ── */
.nav-links { margin-inline: auto; }
.theme-toggle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-left: -12px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 200ms cubic-bezier(0.22,1,0.36,1);
}
.theme-toggle:hover { color: var(--fg-1); }
.theme-toggle:focus-visible { outline: 2px solid var(--pillar-ink, var(--teal-ink)); outline-offset: 2px; }
.theme-toggle svg { display: block; width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
@media (max-width: 860px) {
  .nav-links + .btn-teal { margin-left: auto; }
  .theme-toggle { margin-right: -12px; }
}
@media (max-width: 768px) {
  .theme-toggle { margin-left: auto; }
}

/* ══════════════════════════════════════
   NUR LIGHT (greift auch ohne JavaScript)
══════════════════════════════════════ */
:root:not([data-theme="dark"]) ::selection { background: rgba(0,194,168,0.28); color: #0D1B2A; }

/* Primary: Teal-Fläche, Text Midnight, 1px Rand in Teal-Ink (inset, damit
   sich die Buttongröße gegenüber Dark nicht ändert). Kein Schein. */
:root:not([data-theme="dark"]) .btn-teal,
:root:not([data-theme="dark"]) .btn-calendly,
:root:not([data-theme="dark"]) .btn-hero-primary,
:root:not([data-theme="dark"]) .mobile-menu .btn-mobile-cta { box-shadow: inset 0 0 0 1px #00796B; }

/* Outline: Text und Rand Teal-Ink, Hover füllt mit Teal 12 %. */
:root:not([data-theme="dark"]) .btn-hero-outline { color: var(--teal-ink); border-color: var(--teal-ink); }
:root:not([data-theme="dark"]) .btn-hero-outline:hover { color: var(--teal-ink); border-color: var(--teal-ink); background: rgba(0,194,168,0.12); }

/* Leuchteffekte sind auf Papier unsichtbar und entfallen. */
:root:not([data-theme="dark"]) .subhero-glow,
:root:not([data-theme="dark"]) .hero-glow,
:root:not([data-theme="dark"]) .contact-glow { display: none; }

/* ══════════════════════════════════════
   MOTION-CLIP (stummer Loop als eigene Bühne)
   Dunkel in beiden Modi. Radius und Rand wie Karten (DESIGN.md Abschnitt 7),
   kein Ruheschatten. Abstände kommen von den Nachbar-Sections.
══════════════════════════════════════ */
.motion-stage { max-width: 960px; margin: 0 auto; }
.motion-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0D1B2A;
  border: 1px solid var(--border-card);
  border-radius: 10px;
}
.motion-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Pause/Play: klein unten rechts, bei Pause größer, damit das Poster lesbar bleibt */
.motion-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #F4F6F8;
  background: rgba(13,27,42,0.72);
  border: 1px solid rgba(244,246,248,0.24);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 200ms cubic-bezier(0.22,1,0.36,1), background 200ms cubic-bezier(0.22,1,0.36,1);
}
.motion-toggle:hover { opacity: 1; background: rgba(13,27,42,0.9); }
.motion-toggle:focus-visible { outline: 2px solid #00C2A8; outline-offset: 2px; opacity: 1; }
.motion-toggle svg { display: block; width: 16px; height: 16px; }
.motion-toggle .icon-play { display: none; }
.motion-frame.is-paused .motion-toggle .icon-pause { display: none; }
.motion-frame.is-paused .motion-toggle .icon-play { display: block; }
.motion-frame.is-paused .motion-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  opacity: 1;
}
.motion-frame.is-paused .motion-toggle svg { width: 22px; height: 22px; }

/* Dezenter Textlink unter der Bühne */
.motion-link { display: flex; justify-content: center; margin-top: 14px; font-size: 14px; line-height: 1.4; }
.motion-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 4px;
  transition: color 200ms cubic-bezier(0.22,1,0.36,1), text-decoration-color 200ms cubic-bezier(0.22,1,0.36,1);
}
.motion-link a:hover { color: var(--fg-1); text-decoration-color: currentColor; }
.motion-link a:focus-visible { outline: 2px solid var(--pillar-ink, var(--teal-ink)); outline-offset: 3px; border-radius: 4px; }
.motion-link svg { display: block; width: 12px; height: 12px; flex-shrink: 0; }

/* Nur für Screenreader sichtbar */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .motion-toggle, .motion-link a { transition: none; }
}