/* =====================================================================
   HC24 Corporate-Site — Stylesheet
   Aufbauend auf den HC24-Design-Tokens (app/services/design_tokens.py).
   Dark-Mesh-Look, Glas-Karten, Bento-Grid, Cyan/Violett-Akzente.
   Bewegte Elemente: Mesh-Animation, Konstellations-Canvas, Scroll-Reveal,
   Tilt, Parallax, animierte Counter — alle prefers-reduced-motion-sicher.
   ===================================================================== */

:root {
  --bg-0: #0a0e1a;
  --bg-1: #0f1626;
  --bg-2: #161f33;
  --surface: rgba(255, 255, 255, .04);
  --surface-strong: rgba(255, 255, 255, .07);
  --surface-edge: rgba(255, 255, 255, .08);
  --ink: #f8fafc;
  --ink-soft: #cbd5e1;
  --ink-muted: #94a3b8;
  --accent: #22d3ee;
  --accent-2: #a78bfa;
  --accent-3: #f59e0b;
  --accent-glow: rgba(34, 211, 238, .32);
  --ok: #34d399;
  --danger: #f87171;

  --page-max: 1180px;
  --page-pad-x: 24px;
  --section-gap: 96px;
  --card-pad: 24px;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-btn: 14px;
  --radius-input: 11px;

  --t-fast: 160ms cubic-bezier(.32, .72, 0, 1);
  --t-med: 280ms cubic-bezier(.32, .72, 0, 1);
  --t-slow: 520ms cubic-bezier(.16, 1, .3, 1);

  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg-0);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ---------- Animierter Hintergrund (Mesh + Canvas) ---------- */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(34, 211, 238, .16), transparent 60%),
    radial-gradient(900px 700px at 92% 8%, rgba(167, 139, 250, .15), transparent 60%),
    radial-gradient(800px 800px at 50% 120%, rgba(34, 211, 238, .08), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 60%, var(--bg-0));
}
.bg-fx__blob {
  position: absolute;
  width: 46vw; height: 46vw;
  max-width: 720px; max-height: 720px;
  border-radius: 50%;
  /* KEIN filter: blur() — die Blobs sind bereits weiche Radial-Verläufe.
     Der zusätzliche 80px-Weichzeichner musste bei JEDEM Bild der laufenden
     drift-Animation über ~720px neu gerastert werden und war damit der
     Hauptgrund für hakeliges Scrollen (gemessen: 81 ms -> 27 ms pro Bild).
     Die weicheren Verlaufs-Stopps unten gleichen die Optik aus. */
  opacity: .5;
  mix-blend-mode: screen;
  animation: drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
/* Mehrstufige Verläufe ersetzen den früheren Blur-Filter — gleich weicher
   Eindruck, aber ohne Neuberechnung pro Bild. */
.bg-fx__blob--a { top: -10%; left: -8%; background: radial-gradient(circle closest-side, var(--accent) 0%, rgba(34,211,238,.45) 35%, rgba(34,211,238,.14) 62%, transparent 85%); }
.bg-fx__blob--b { top: 20%; right: -12%; background: radial-gradient(circle closest-side, var(--accent-2) 0%, rgba(167,139,250,.45) 35%, rgba(167,139,250,.14) 62%, transparent 85%); animation-delay: -8s; }
.bg-fx__blob--c { bottom: -18%; left: 30%; background: radial-gradient(circle closest-side, #2563eb 0%, rgba(37,99,235,.42) 35%, rgba(37,99,235,.13) 62%, transparent 85%); animation-delay: -16s; }
#constellation { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; }

@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(4%, 6%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, -4%, 0) scale(.96); }
}
/* Toggle „Animationen aus" (html.motion-off) — Marken-Animationen laufen
   sonst immer, unabhängig von der System-Einstellung. */
html.motion-off .bg-fx__blob { animation: none; }
html.motion-off #constellation { display: none; }
html.motion-off *, html.motion-off *::before, html.motion-off *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}

/* ---------- Layout-Helfer ---------- */
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad-x); }
.section { padding-block: clamp(56px, 8vw, var(--section-gap)); position: relative; }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px; }
h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; }
.h-display { font-size: clamp(40px, 6.2vw, 84px); font-weight: 800; letter-spacing: -.028em; line-height: 1.04; text-wrap: balance; }
.h-section { font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.lede { font-size: clamp(17px, 2vw, 21px); font-weight: 450; color: var(--ink-soft); max-width: 64ch; }
/* Tabular-Ziffern, damit Counter/Preise beim Hochzählen nicht springen */
.stat__v, .plan__price, .chart__labels b, .hero__meta b { font-variant-numeric: tabular-nums; }
.text-grad {
  background: linear-gradient(100deg, #e8fbff 0%, var(--accent) 45%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.muted { color: var(--ink-muted); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  --b: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--radius-btn);
  font-weight: 650; font-size: 15px; cursor: pointer; border: 1px solid transparent;
  transition: transform var(--t-fast), box-shadow var(--t-med), background var(--t-fast), border-color var(--t-fast);
  will-change: transform; white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #04121a; box-shadow: 0 12px 34px -12px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 18px 48px -12px var(--accent-glow); transform: translateY(-2px); }
.btn-glass {
  background: var(--surface-strong); color: var(--ink); border-color: var(--surface-edge);
  backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255,255,255,.12); border-color: rgba(34,211,238,.45); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { color: var(--ink); }
.btn-lg { padding: 16px 28px; font-size: 16px; }
/* Drei marschierende Chevrons „›››" — eine Helligkeitswelle läuft durch */
.btn .ar { display: inline-flex; align-items: center; margin-left: 2px; }
.btn .ar i { width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .3; animation: chevrun 1.9s linear infinite; }
.btn .ar i + i { margin-left: -3px; }
.btn .ar i:nth-child(2) { animation-delay: .32s; }
.btn .ar i:nth-child(3) { animation-delay: .64s; }
.btn:hover .ar i { animation-duration: 1.2s; }
@keyframes chevrun { 0%, 55%, 100% { opacity: .3; } 28% { opacity: 1; } }
html.motion-off .btn .ar i { animation: none; opacity: .85; }

/* Lauf-Chevrons als universeller Pfeil/Verbinder (Flow-Stationen, zwischen Blöcken) */
.flow-ar { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.flow-ar i { width: 13px; height: 13px; border-top: 2.5px solid var(--accent); border-right: 2.5px solid var(--accent); transform: rotate(45deg); opacity: .22; animation: chevrun 2.2s linear infinite; }
.flow-ar i + i { margin-left: -5px; }
.flow-ar i:nth-child(2) { animation-delay: .28s; }
.flow-ar i:nth-child(3) { animation-delay: .56s; }
.flow-ar i:nth-child(4) { animation-delay: .84s; }
html.motion-off .flow-ar i { animation: none; opacity: .8; }
/* Chevron-Trenner zwischen Sektionen */
.block-divider { display: flex; justify-content: center; padding: 6px 0 2px; }
.block-divider .flow-ar { width: auto; }
.block-divider .flow-ar i { width: 14px; height: 14px; }

/* ---------- CH-Hinweis-Banner ---------- */
.region-hint {
  position: relative; z-index: 55;
  background: linear-gradient(120deg, rgba(34,211,238,.14), rgba(167,139,250,.14));
  border-bottom: 1px solid var(--surface-edge);
}
.region-hint__inner { display: flex; align-items: center; gap: 16px; padding-block: 10px; font-size: 14px; color: var(--ink-soft); }
.region-hint__inner > span { flex: 1; min-width: 0; }
.region-hint .btn { padding: 8px 14px; font-size: 13.5px; }
.region-hint__close { background: transparent; border: 0; color: var(--ink-muted); cursor: pointer; display: grid; place-items: center; padding: 4px; border-radius: 8px; }
.region-hint__close:hover { color: var(--ink); background: var(--surface); }
@media (max-width: 600px) { .region-hint__inner { flex-wrap: wrap; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  transition: background var(--t-med), border-color var(--t-med), backdrop-filter var(--t-med);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(10, 14, 26, .72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--surface-edge);
}
.nav { display: flex; align-items: center; gap: 18px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; letter-spacing: -.02em; font-size: 19px; }
.brand svg { height: 30px; width: auto; color: var(--ink); }
.brand .dot { color: var(--accent); }
.nav__spacer { flex: 1; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 9px 13px; border-radius: 10px; color: var(--ink-soft);
  font-size: 15px; font-weight: 550; transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover, .nav__item:hover .nav__link, .nav__link.is-active { color: var(--ink); background: var(--surface); }
.nav__link .chev { width: 14px; height: 14px; opacity: .7; transition: transform var(--t-fast); }
.nav__item:hover .chev { transform: rotate(180deg); }
.nav__drop {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px;
  background: rgba(15, 22, 38, .96); backdrop-filter: blur(16px);
  border: 1px solid var(--surface-edge); border-radius: var(--radius-md);
  padding: 8px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__drop a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink-soft); font-size: 14.5px; transition: background var(--t-fast), color var(--t-fast); }
.nav__drop a:hover { background: var(--surface); color: var(--ink); }
.nav__drop a small { display: block; color: var(--ink-muted); font-size: 12.5px; font-weight: 400; }

/* flex:none — sonst quetscht der Flex-Container die Kopf-Aktionen bei knappem
   Platz zusammen und der Sprachumschalter wurde angeschnitten („D" statt „DE"). */
.lang { display: inline-flex; flex: none; border: 1px solid var(--surface-edge); border-radius: 999px; overflow: hidden; }
.lang a { white-space: nowrap; }
.region-switch, .nav__login, .nav__tv { flex: none; }
.lang a { padding: 6px 11px; font-size: 13px; font-weight: 650; color: var(--ink-muted); transition: background var(--t-fast), color var(--t-fast); }
.lang a.is-active { background: var(--surface-strong); color: var(--ink); }

.nav__toggle { display: none; background: var(--surface); border: 1px solid var(--surface-edge); color: var(--ink); width: 42px; height: 42px; border-radius: 11px; cursor: pointer; align-items: center; justify-content: center; }
.nav__toggle svg { width: 22px; height: 22px; }

/* Mobile-Drawer-Navigation */
.mobile-nav {
  position: fixed; inset: 0; z-index: 80; visibility: hidden;
}
.mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(4,8,16,.6); opacity: 0; transition: opacity var(--t-med); }
.mobile-nav__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92vw);
  background: var(--bg-1); border-left: 1px solid var(--surface-edge);
  padding: 24px; overflow-y: auto; transform: translateX(100%); transition: transform var(--t-slow);
  display: flex; flex-direction: column; gap: 6px;
}
.mobile-nav.is-open { visibility: visible; }
.mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; }
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav a { padding: 13px 12px; border-radius: 12px; color: var(--ink-soft); font-size: 17px; font-weight: 600; }
.mobile-nav a:hover { background: var(--surface); color: var(--ink); }
.mobile-nav__group { color: var(--ink-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 14px 12px 4px; }
.mobile-nav__close { align-self: flex-end; background: var(--surface); border: 1px solid var(--surface-edge); color: var(--ink); width: 42px; height: 42px; border-radius: 11px; cursor: pointer; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(64px, 11vw, 150px) clamp(48px, 7vw, 96px); }
/* Default: eine volle Spalte -> Headline nutzt die ganze Breite (kein leerer Rechts-Raum). */
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
/* Zwei Spalten nur, wenn rechts ein Anzeige-Element (Showcase) steht. */
.hero--split .hero__grid { grid-template-columns: 1.15fr .85fr; }
/* Platin-Partner-Box: bleibt beim Scrollen stehen und fährt bis zum nächsten Abschnitt mit */
.hero--split .hero__media { position: sticky; top: 96px; align-self: start; }
@media (max-width: 860px) { .hero--split .hero__grid { grid-template-columns: 1fr; } .hero--split .hero__media { position: static; } }
.pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px;
  border: 1px solid var(--surface-edge); border-radius: 999px; background: var(--surface);
  font-size: 13px; color: var(--ink-soft); font-weight: 600; margin-bottom: 22px;
}
.pill .live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55);} 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0);} 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0);} }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; color: var(--ink-muted); font-size: 14px; }
.hero__meta b { color: var(--ink); }

/* ---------- Hero-Variante: Fokus-CTA-Spot ---------- */
/* Kopf linksbündig wie auf allen anderen Seiten (User-Vorgabe 05.08.2026);
   nur das Auswahl-Rad (Spot) bleibt mittig. */
.hero--focus .hero__grid { grid-template-columns: 1fr; justify-items: stretch; text-align: left; }
/* Kopftext über die volle Breite (User-Vorgabe 06.08.2026), Auswahl-Rad mittig
   darunter — die Überschrift soll nicht auf halber Strecke umbrechen. */
.hero--focus .hero__copy { max-width: none; display: flex; flex-direction: column; align-items: flex-start; }
.hero--focus .hero__copy .lede { max-width: 90ch; }
.hero--focus .hero__media { justify-self: center; }
.hero-spot {
  position: relative; margin-top: clamp(40px, 6vw, 60px);
  width: clamp(250px, 34vw, 322px); height: clamp(250px, 34vw, 322px);
  --spot-color: var(--accent); --spot-color-a: rgba(34, 211, 238, .30);
}
/* Kanal-/Item-Farben (gelten für Segmente, Icon-Labels, Satelliten) */
.hero-spot [data-channel="termin"]   { --c: var(--accent);   }
.hero-spot [data-channel="whatsapp"] { --c: #25d366;         }
.hero-spot [data-channel="phone"]    { --c: var(--accent-2); }
.hero-spot [data-channel="mail"]     { --c: var(--accent-3); }
/* Generische Item-Farben nach Position (Produkte/Leistungen ohne festen Kanal) */
.hero-spot__seg:nth-of-type(1), .hero-spot__seglabel--0 { --c: var(--accent); }
.hero-spot__seg:nth-of-type(2), .hero-spot__seglabel--1 { --c: #25d366; }
.hero-spot__seg:nth-of-type(3), .hero-spot__seglabel--2 { --c: var(--accent-2); }
.hero-spot__seg:nth-of-type(4), .hero-spot__seglabel--3 { --c: var(--accent-3); }
/* Pulsierende Ringe (transform/opacity-only, GPU) */
.hero-spot__ring { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--spot-color-a); transform: translate(-50%, -50%) scale(.82); animation: spot-ring 3s ease-out infinite; pointer-events: none; }
.hero-spot__ring:nth-child(2) { animation-delay: 1s; }
.hero-spot__ring:nth-child(3) { animation-delay: 2s; }
@keyframes spot-ring { 0% { opacity: .55; transform: translate(-50%, -50%) scale(.82); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16); } }
/* Donut / Kuchenstücke */
.hero-spot__pie { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); }
.hero-spot__seg { fill: var(--ink); fill-opacity: .05; stroke: var(--bg-0); stroke-width: 2.5; cursor: pointer; transition: fill-opacity var(--t-fast); }
.hero-spot__seg:hover, .hero-spot__seg.is-hot { fill: var(--c); fill-opacity: .34; }
/* Icon-Labels auf den Stücken (mid-angle bei r≈38% vom Zentrum) */
.hero-spot__seglabels { position: absolute; inset: 0; pointer-events: none; }
.hero-spot__seglabel { position: absolute; width: 32px; height: 32px; transform: translate(-50%, -50%); display: grid; place-items: center; color: var(--ink-soft); transition: color var(--t-fast), transform var(--t-fast); }
.hero-spot__seglabel svg { width: 21px; height: 21px; }
.hero-spot__seglabel--0 { left: 76.9%; top: 23.1%; }
.hero-spot__seglabel--1 { left: 76.9%; top: 76.9%; }
.hero-spot__seglabel--2 { left: 23.1%; top: 76.9%; }
.hero-spot__seglabel--3 { left: 23.1%; top: 23.1%; }
/* 3-Segment-Variante (ohne WhatsApp): Drittel-Kuchen, Labels auf 60/180/300 Grad, Farben ohne WhatsApp-Grün */
.hero-spot--3 .hero-spot__seglabel--0 { left: 82.9%; top: 31%; }
.hero-spot--3 .hero-spot__seglabel--1 { left: 50%; top: 88%; }
.hero-spot--3 .hero-spot__seglabel--2 { left: 17.1%; top: 31%; }
.hero-spot--3 .hero-spot__seg:nth-of-type(2), .hero-spot--3 .hero-spot__seglabel--1 { --c: var(--accent-2); }
.hero-spot--3 .hero-spot__seg:nth-of-type(3), .hero-spot--3 .hero-spot__seglabel--2 { --c: var(--accent-3); }
.hero-spot.is-hot-0 .hero-spot__seglabel--0,
.hero-spot.is-hot-1 .hero-spot__seglabel--1,
.hero-spot.is-hot-2 .hero-spot__seglabel--2,
.hero-spot.is-hot-3 .hero-spot__seglabel--3 { color: var(--c); transform: translate(-50%, -50%) scale(1.16); }
/* Core (Donut-Loch) */
.hero-spot__core {
  position: absolute; inset: 22%; border-radius: 50%; cursor: pointer; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: 5px; text-align: center; padding: 12px; color: var(--ink);
  background: radial-gradient(120% 120% at 30% 24%, var(--spot-color-a), rgba(15, 22, 38, .94) 72%);
  border: 1px solid var(--spot-color); border-color: var(--spot-color-a);
  box-shadow: 0 0 0 6px rgba(15, 22, 38, .55), 0 18px 44px -18px var(--spot-color-a);
  transition: border-color var(--t-med), box-shadow var(--t-med), background var(--t-med), transform var(--t-fast);
}
.hero-spot__core:hover { transform: scale(1.03); }
.hero-spot__ic { width: 44px; height: 44px; display: none; place-items: center; border-radius: 13px; background: linear-gradient(135deg, var(--spot-color), var(--accent-2)); color: #04121a; box-shadow: 0 10px 24px -12px var(--spot-color-a); }
.hero-spot__ic.is-on { display: grid; }
.hero-spot__ic svg { width: 25px; height: 25px; stroke-width: 2; }
.hero-spot__corelabel { display: none; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.18; }
.hero-spot__corelabel.is-on { display: block; }
.hero-spot__sub { font-size: 12px; color: var(--ink-muted); }
/* Satelliten-Reihe (a11y + Mobile-Fallback) */
.hero-spot__sats { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero-spot__sat { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-edge); color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 600; transition: border-color var(--t-fast), transform var(--t-fast), color var(--t-fast); }
.hero-spot__sat:hover { border-color: var(--c); color: var(--ink); transform: translateY(-2px); }
.hero-spot__sat .ic { display: grid; place-items: center; color: var(--c); }
.hero-spot__sat .ic svg { width: 16px; height: 16px; }
html.motion-off .hero-spot__ring { animation: none; opacity: 0; }

/* Showcase-Card mit Tilt */
.showcase {
  position: relative; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface-strong), var(--surface));
  border: 1px solid var(--surface-edge); padding: 28px;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.7);
  transform-style: preserve-3d; transition: transform var(--t-med);
  overflow: hidden;
}
.showcase::after { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at var(--mx,70%) var(--my,18%), rgba(34,211,238,.18), transparent 60%); pointer-events: none; }
.showcase__badge { display: flex; align-items: center; gap: 14px; }
.showcase__badge img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.showcase__rows { margin-top: 22px; display: grid; gap: 12px; }
.showcase__row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--surface-edge); transform: translateZ(30px); }
.showcase__row .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(167,139,250,.2)); color: var(--accent); flex: none; }
.showcase__row b { font-size: 14.5px; }
.showcase__row span { font-size: 13px; color: var(--ink-muted); }

/* ---------- Karten / Bento ---------- */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative; background: var(--surface); border: 1px solid var(--surface-edge);
  border-radius: var(--radius-md); padding: var(--card-pad);
  transition: transform var(--t-med), border-color var(--t-med), background var(--t-med);
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-med);
  background: radial-gradient(360px 200px at var(--mx,50%) var(--my,0%), rgba(34,211,238,.14), transparent 60%);
  pointer-events: none;
}
.card:hover { transform: translateY(-4px); border-color: rgba(34,211,238,.4); background: var(--surface-strong); }
.card:hover::before { opacity: 1; }
.card__ic {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(167,139,250,.18));
  border: 1px solid var(--surface-edge); color: var(--accent);
}
.card__ic svg { width: 26px; height: 26px; }
.card h3 { font-size: 20px; margin-bottom: 8px; }
.card p { color: var(--ink-soft); margin: 0; font-size: 15px; }
.card__num { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: .1em; }
.card--link { cursor: pointer; }
.card--link .card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--accent); font-weight: 650; font-size: 14px; }
/* Karte als Button (Add-on → Chat): UA-Button-Stile neutralisieren */
button.card--chat { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; display: block; }
.card__img { margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 18px; aspect-ratio: 16/10; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.card:hover .card__img img { transform: scale(1.06); }
/* News-Cover (1200x630-SVGs mit eingebackenem Text): volles Motiv zeigen, kein 16:10-Crop, kein Hover-Zoom */
.card__img--cover { aspect-ratio: 1200/630; }
.card:hover .card__img--cover img { transform: none; }

/* ---------- Split-Section ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.split--rev .split__media { order: 2; }
.split__media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--surface-edge); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.split__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.split li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); }
.split li .ck { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: rgba(52,211,153,.15); color: var(--ok); margin-top: 2px; }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--surface-edge);
  border-radius: var(--radius-md); padding: 26px; transition: transform var(--t-med), border-color var(--t-med);
}
.plan:hover { transform: translateY(-4px); border-color: rgba(167,139,250,.45); }
.plan--feature { border-color: rgba(34,211,238,.5); background: linear-gradient(180deg, rgba(34,211,238,.07), var(--surface)); }
.plan__name { font-size: 18px; font-weight: 750; }
.plan__note { color: var(--ink-muted); font-size: 13.5px; min-height: 38px; }
.plan__price { font-size: 30px; font-weight: 800; margin: 14px 0 2px; }
.plan__unit { color: var(--ink-muted); font-size: 12.5px; }
.plan ul { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; flex: 1; }
.plan li { display: flex; gap: 9px; font-size: 14px; color: var(--ink-soft); }
.plan li::before { content: "✓"; color: var(--accent); font-weight: 800; }
.price-note { color: var(--ink-muted); font-size: 13px; margin-top: 16px; text-align: center; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq__item { border: 1px solid var(--surface-edge); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; transition: border-color var(--t-fast); }
.faq__item[open] { border-color: rgba(34,211,238,.4); }
.faq__q { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 650; font-size: 16.5px; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .pm { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-strong); display: grid; place-items: center; transition: transform var(--t-fast); color: var(--accent); }
.faq__item[open] .pm { transform: rotate(45deg); }
.faq__a { padding: 0 22px 20px; color: var(--ink-soft); }
.faq__a p { margin: 0 0 10px; }

/* ---------- Quote ---------- */
.quote { max-width: 880px; margin-inline: auto; text-align: center; }
.quote p { font-size: clamp(20px, 2.6vw, 30px); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.quote .qm { font-size: 64px; color: var(--accent); line-height: 0; opacity: .5; }
.quote cite { display: block; margin-top: 18px; color: var(--ink-muted); font-style: normal; font-size: 15px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { text-align: center; padding: 26px 16px; border: 1px solid var(--surface-edge); border-radius: var(--radius-md); background: var(--surface); }
.stat__v { font-size: clamp(30px, 4vw, 46px); font-weight: 800; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__l { color: var(--ink-muted); font-size: 14px; margin-top: 4px; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.member { display: flex; align-items: center; gap: 18px; padding: 22px; border: 1px solid var(--surface-edge); border-radius: var(--radius-md); background: var(--surface); transition: transform var(--t-med), border-color var(--t-med); }
.member:hover { transform: translateY(-3px); border-color: rgba(34,211,238,.4); }
.member__ph { flex: none; width: 104px; height: 116px; border-radius: 16px; object-fit: cover; object-position: center; background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(167,139,250,.25)); display: grid; place-items: center; font-size: 30px; font-weight: 800; color: var(--ink); }
/* Org-Einheiten-Gruppen im Team */
.team-group { margin-top: 30px; }
.team-group__title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.team-group__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--surface-edge), transparent); }
.member h3 { margin: 0 0 2px; font-size: 18px; }
.member .role { color: var(--accent); font-size: 13.5px; font-weight: 650; }
.member p { color: var(--ink-soft); font-size: 14px; margin: 8px 0 0; }
.member a { display: flex; align-items: center; gap: 7px; color: var(--ink-muted); font-size: 13.5px; margin-top: 4px; }
.member a svg { width: 15px; height: 15px; flex: none; }
.member a:hover { color: var(--accent); }
.member > div { min-width: 0; }
.member a { overflow-wrap: anywhere; }

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: start; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-input);
  background: var(--bg-1); border: 1px solid var(--surface-edge); color: var(--ink); font-size: 15px; font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.field textarea { min-height: 130px; resize: vertical; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field--check { display: flex; gap: 10px; align-items: flex-start; }
.field--check input { width: auto; margin-top: 3px; }
.hp { position: absolute; left: -9999px; }
.info-card { border: 1px solid var(--surface-edge); border-radius: var(--radius-md); background: var(--surface); padding: 24px; display: grid; gap: 16px; }
.info-row { display: flex; gap: 13px; align-items: flex-start; }
.info-row .ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(167,139,250,.18)); color: var(--accent); }
.info-row b { display: block; font-size: 14.5px; }
.info-row span, .info-row a { color: var(--ink-muted); font-size: 14px; }
.info-row a:hover { color: var(--accent); }

/* ---------- CTA-Band ---------- */
.cta-band {
  position: relative; border-radius: var(--radius-lg); padding: clamp(36px, 5vw, 64px);
  background: linear-gradient(120deg, rgba(34,211,238,.16), rgba(167,139,250,.16)); border: 1px solid var(--surface-edge);
  text-align: center; overflow: hidden;
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% -20%, rgba(34,211,238,.25), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band .hero__cta { justify-content: center; }

/* ---------- Prose / Legal ---------- */
.prose { max-width: 820px; }
.prose h2 { font-size: 24px; margin-top: 1.6em; }
.prose h3 { font-size: 19px; margin-top: 1.4em; }
.prose p, .prose li { color: var(--ink-soft); }
.prose a { color: var(--accent); }
.prose ul { padding-left: 20px; }

/* ---------- News ---------- */
.article { max-width: 760px; margin-inline: auto; }
.article__meta { color: var(--ink-muted); font-size: 14px; margin-bottom: 8px; }
/* News-Cover (1200x630-SVG) in voller Breite und natürlichem Seitenverhältnis — kein 4:3-Crop wie .split__media */
.article__cover { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--surface-edge); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.article__cover img { display: block; width: 100%; height: auto; }
/* Produktlogos als Titelbild: Landingpages führen im Cover ein quadratisches
   SVG-Logo statt eines Fotos. Mit width:100% wurde ein 150px-Logo auf 758px
   aufgeblasen (gemessen auf /lp/giphone). Logos bleiben deshalb klein und
   mittig, der Rahmen tritt zurück — ein Logo ist kein Titelbild. */
.article__cover:has(img[src$=".svg"]) {
  border: 0; box-shadow: none; background: none; overflow: visible;
}
.article__cover img[src$=".svg"] {
  width: auto; max-width: min(220px, 60%); max-height: 220px; margin-inline: auto;
}
.article__body { color: var(--ink-soft); font-size: 17px; }
.article__body p { margin: 0 0 1.1em; }
.article__body h2 { color: var(--ink); font-size: 24px; margin: 1.5em 0 .5em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--surface-edge); margin-top: 40px; padding-block: 56px 30px; background: linear-gradient(180deg, transparent, rgba(15,22,38,.5)); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.footer__brand p { color: var(--ink-muted); font-size: 14px; max-width: 34ch; }
.footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer a { color: var(--ink-soft); font-size: 14px; }
.footer a:hover { color: var(--accent); }
.footer__social { display: flex; gap: 10px; margin-top: 16px; }
.footer__social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--surface-edge); display: grid; place-items: center; color: var(--ink-soft); transition: all var(--t-fast); }
.footer__social a:hover { color: var(--accent); border-color: rgba(34,211,238,.5); transform: translateY(-2px); }

/* ---------- Act!-Versions-Changelog (Timeline) ---------- */
.changelog { list-style: none; margin: 0; padding: 0; position: relative; }
.changelog::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--surface-edge); }
.changelog__item { position: relative; padding: 0 0 26px 34px; }
.changelog__item:last-child { padding-bottom: 0; }
.changelog__marker { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-1); border: 3px solid var(--accent); }
.changelog__item--fix .changelog__marker { border-color: var(--ok, #34d399); }
.changelog__item--info .changelog__marker { border-color: var(--accent-2, #a78bfa); }
.changelog__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.changelog__tag { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; color: #04121a; background: var(--accent); }
.changelog__tag--fix { background: var(--ok, #34d399); }
.changelog__tag--info { background: var(--accent-2, #a78bfa); }
.changelog__date { font-size: 13px; color: var(--ink-muted); }
.changelog__title { font-size: 18px; margin: 0 0 4px; }
.changelog__text { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* ---------- Mobile-/Touch-Feinschliff (zentral) ----------
   Befunde kommen aus scripts/corporate_mobile_audit.py — Fixes gehören
   hierher, NICHT als Sonderlocken in einzelne Seiten/Blöcke. */
@media (hover: none), (max-width: 840px) {
  /* Touch-Ziele: Link-Listen (Footer/Navigation) auf >=44px Trefferhöhe */
  .footer li a { display: inline-block; padding-block: 12px; padding-inline: 6px; margin-inline: -6px 0; }
  .footer__social a { width: 44px; height: 44px; }
  .footer__bottom a { display: inline-block; padding-block: 12px; padding-inline: 6px; }
  .motion-toggle { min-height: 44px; padding-block: 10px; }
  .brand { padding-block: 7px; }
  /* Inhalts-Links (Artikel-/LP-Bodys, Karten-Aktionen) komfortabel antippbar */
  .article__body a, .card__more { display: inline-block; padding-block: 8px; }
  /* Buchungs-Chips + Kontakt-Links in Karten auf Touch-Höhe */
  .booking__chip { min-height: 44px; }
  .member a, .info-row a { padding-block: 8px; }
}
@media (max-width: 640px) {
  /* Überschriften: lange (deutsche) Wörter sauber trennen statt bis an den
     Rand zu laufen; Kanten-Luft für den Lesefluss */
  .h-section, .hero h1, .pin-station h3 { overflow-wrap: break-word; hyphens: auto; }
  /* CTA-Buttons: volle Touch-Höhe, große CTAs über die ganze Breite */
  .btn { min-height: 44px; }
  .btn-lg { width: 100%; justify-content: center; }
}
.footer__bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--surface-edge); color: var(--ink-muted); font-size: 13px; }
.footer__bottom nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.motion-toggle { background: transparent; border: 1px solid var(--surface-edge); color: var(--ink-muted); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); }
.motion-toggle:hover { color: var(--ink); border-color: rgba(34, 211, 238, .45); }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
html.motion-off .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- Rotierende Weltkugel (Brand) ---------- */
.globe { position: relative; width: 32px; height: 32px; flex: none; }
.globe__sphere {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 28%, #a5f3fc 0%, #22d3ee 42%, #0e7490 80%, #083344 100%);
  box-shadow: inset -4px -5px 9px rgba(0,0,0,.5), 0 0 14px var(--accent-glow);
}
/* Meridiane scrollen seitlich (Transform = flüssig & zuverlässig) */
.globe__sphere::before {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 200%;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 6px, rgba(255,255,255,.34) 6px 7.5px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 7px, rgba(255,255,255,.14) 7px 8px);
  animation: globe-spin 3.4s linear infinite;
}
/* Kugel-Schattierung obenauf */
.globe__sphere::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 70% 78%, transparent 52%, rgba(0,0,0,.42) 100%);
}
.globe__ring {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid transparent; border-top-color: rgba(167,139,250,.75); border-right-color: rgba(34,211,238,.55);
  animation: globe-orbit 4.5s linear infinite;
}
@keyframes globe-spin { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes globe-orbit { to { transform: rotate(360deg); } }
html.motion-off .globe__sphere::before, html.motion-off .globe__ring { animation: none; }

/* ---------- Animiertes HC24-Symbol (originalgetreue Geometrie, atmend) ---------- */
.mol { width: 100%; height: 100%; display: block; overflow: visible; }
.mol__pulse { transform-box: view-box; transform-origin: 6.5px 6.5px; animation: mol-breathe 3.8s ease-in-out infinite; }
@keyframes mol-breathe { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.05); } }
html.motion-off .mol__pulse { animation: none; }
.showcase__mol { position: absolute; right: -14px; top: -14px; width: 150px; height: 150px; opacity: .55; pointer-events: none; z-index: 0; filter: drop-shadow(0 6px 20px var(--accent-glow)); }
.showcase__badge, .showcase__rows { position: relative; z-index: 1; }

/* ---------- Region-Switch (diskret) ---------- */
.region-switch { display: flex; align-items: center; }
.region-switch__btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--ink-muted);
  padding: 8px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  transition: color var(--t-fast), background var(--t-fast);
}
.region-switch__btn:hover, .nav__item:hover .region-switch__btn { color: var(--ink); background: var(--surface); }
.region-switch__btn svg:first-child { width: 17px; height: 17px; opacity: .85; }
.region-switch__drop { min-width: 200px; right: 0; left: auto; }
.region-switch__drop a.is-active-region { color: var(--accent); background: var(--surface); }

/* TeamViewer-Button im Header (kompakt) */
.nav__tv { padding: 9px 14px; font-size: 14px; }

/* ---------- Klickspot (Floating Quick-Contact) ---------- */
.klickspot { position: fixed; right: 22px; bottom: 22px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.klickspot__btn {
  position: relative; width: 60px; height: 60px; border-radius: 50%; cursor: pointer;
  border: none; color: #04121a; background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 38px -10px var(--accent-glow); display: grid; place-items: center;
  transition: transform var(--t-med);
}
.klickspot__btn:hover { transform: scale(1.06); }
.klickspot__btn svg { width: 26px; height: 26px; grid-area: 1/1; transition: opacity var(--t-fast), transform var(--t-fast); }
.klickspot__close { opacity: 0; transform: rotate(-90deg); }
.klickspot.is-open .klickspot__open { opacity: 0; transform: rotate(90deg); }
.klickspot.is-open .klickspot__close { opacity: 1; transform: rotate(0); }
.klickspot__pulse { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 var(--accent-glow); animation: ks-pulse 2.4s infinite; }
.klickspot.is-open .klickspot__pulse { animation: none; }
@keyframes ks-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,211,238,.5);} 70% { box-shadow: 0 0 0 16px rgba(34,211,238,0);} 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0);} }
.klickspot__menu { display: grid; gap: 8px; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96); transform-origin: bottom right; transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med); }
.klickspot.is-open .klickspot__menu { opacity: 1; visibility: visible; transform: none; }
.klickspot__item { display: flex; align-items: center; gap: 10px; background: rgba(15,22,38,.96); backdrop-filter: blur(12px); border: 1px solid var(--surface-edge); color: var(--ink); padding: 10px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 16px 34px -18px rgba(0,0,0,.7); transition: border-color var(--t-fast), transform var(--t-fast); }
.klickspot__item:hover { border-color: rgba(34,211,238,.5); transform: translateX(-3px); }
.klickspot__ic { display: grid; place-items: center; color: var(--accent); }
.klickspot__ic svg { width: 18px; height: 18px; }
html.motion-off .klickspot__pulse { animation: none; }

/* ---------- Website-Chatbot ---------- */
/* Kein eigener Launcher — geöffnet über den Klickspot-Eintrag „Live-Chat" */
.sitechat { position: fixed; right: 22px; bottom: 90px; z-index: 75; }
.sitechat__panel { position: absolute; right: 0; bottom: 0; width: min(370px, calc(100vw - 32px)); height: min(520px, calc(100vh - 170px)); display: flex; flex-direction: column; background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border: 1px solid var(--surface-edge); border-radius: var(--radius-lg); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85); overflow: hidden; }
.sitechat:not(.is-open) .sitechat__panel { display: none; }
.sitechat__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: rgba(34, 211, 238, .08); border-bottom: 1px solid var(--surface-edge); }
.sitechat__head b { display: block; font-size: 15px; }
.sitechat__head span { font-size: 12px; color: var(--ink-muted); }
.sitechat__x { background: none; border: none; color: var(--ink-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; }
.sitechat__x svg { width: 18px; height: 18px; }
.sitechat__log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sitechat__msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.sitechat__msg--bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--surface-edge); color: var(--ink-soft); border-bottom-left-radius: 4px; }
.sitechat__msg--user { align-self: flex-end; background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #04121a; border-bottom-right-radius: 4px; }
.sitechat__msg--typing { color: var(--ink-muted); font-style: italic; }
.sitechat__quick { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 14px 8px; }
.sitechat__chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-edge); color: var(--ink-soft); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.sitechat__chip:hover { border-color: rgba(34, 211, 238, .5); color: var(--ink); }
.sitechat__chip svg { width: 14px; height: 14px; color: var(--accent); }
.sitechat__form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--surface-edge); }
.sitechat__form input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--surface-edge); background: var(--surface); color: var(--ink); font-size: 14px; }
.sitechat__form input:focus { outline: none; border-color: rgba(34, 211, 238, .6); }
.sitechat__form button { flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; color: #04121a; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.sitechat__form button svg { width: 20px; height: 20px; }
.sitechat__handoff { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--surface-edge); border-radius: 12px; padding: 12px; }
.sitechat__handoff input { padding: 9px 12px; border-radius: 9px; border: 1px solid var(--surface-edge); background: var(--bg-0); color: var(--ink); font-size: 13.5px; }
.sitechat__handoff input:focus { outline: none; border-color: rgba(34, 211, 238, .6); }
.sitechat__handoff button { padding: 10px; border-radius: 9px; border: none; cursor: pointer; background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #04121a; font-weight: 700; }
@media (max-width: 600px) { .sitechat { right: 16px; bottom: 84px; } }

/* ---------- Zentrales Kontakt-Panel (Slide-in von rechts) ---------- */
.cpanel { position: fixed; inset: 0; z-index: 120; }
.cpanel[hidden] { display: none; }
.cpanel__backdrop { position: absolute; inset: 0; background: rgba(5, 8, 16, .6); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--t-med); }
.cpanel.is-open .cpanel__backdrop { opacity: 1; }
.cpanel__sheet {
  position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw);
  display: flex; flex-direction: column; padding: 26px 26px 32px; overflow-y: auto;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-left: 1px solid var(--surface-edge);
  box-shadow: -40px 0 90px -40px rgba(0, 0, 0, .8);
  transform: translateX(100%); transition: transform var(--t-slow);
}
.cpanel.is-open .cpanel__sheet { transform: none; }
.cpanel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cpanel__title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 0; }
.cpanel__close { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--surface); border: 1px solid var(--surface-edge); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: border-color var(--t-fast), background var(--t-fast); }
.cpanel__close:hover { border-color: rgba(34, 211, 238, .5); background: var(--surface-strong); }
.cpanel__close svg { width: 20px; height: 20px; }
.cpanel__form { display: grid; gap: 13px; }
.cpanel__msg { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--surface-edge); font-size: 14px; }
.cpanel__msg[hidden] { display: none; }
.cpanel__msg.is-ok { border-color: rgba(52, 211, 153, .5); color: var(--ok); background: rgba(52, 211, 153, .08); }
.cpanel__msg.is-err { border-color: rgba(248, 113, 113, .5); color: var(--danger); background: rgba(248, 113, 113, .08); }
.cpanel__alt { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--surface-edge); }
.cpanel__alt a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: color var(--t-fast); }
.cpanel__alt a:hover { color: var(--ink); }
.cpanel__alt svg { width: 16px; height: 16px; color: var(--accent); }
html.motion-off .cpanel__backdrop, html.motion-off .cpanel__sheet { transition: none; }

/* ---------- CTA-Spot-Popover (kompakter Klick-Spot-Wähler) ---------- */
.cta-spot-pop { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; }
.cta-spot-pop[hidden] { display: none; }
.cta-spot-pop__backdrop { position: absolute; inset: 0; background: rgba(5, 8, 16, .62); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--t-med); }
.cta-spot-pop.is-open .cta-spot-pop__backdrop { opacity: 1; }
.cta-spot-pop__inner {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; padding: 28px 26px 30px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border: 1px solid var(--surface-edge);
  border-radius: var(--radius-lg); box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .85);
  transform: translateY(12px) scale(.96); opacity: 0; transition: transform var(--t-slow), opacity var(--t-med);
}
.cta-spot-pop.is-open .cta-spot-pop__inner { transform: none; opacity: 1; }
.cta-spot-pop__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); text-align: center; }
.cta-spot-pop__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; background: var(--surface); border: 1px solid var(--surface-edge); color: var(--ink); display: grid; place-items: center; transition: border-color var(--t-fast), background var(--t-fast); }
.cta-spot-pop__close:hover { border-color: rgba(34, 211, 238, .5); background: var(--surface-strong); }
.cta-spot-pop__close svg { width: 18px; height: 18px; }

/* Mini-Variante des Pie-Spots (halbe Größe, im Popover) */
.hero-spot--mini { margin-top: 4px; width: clamp(220px, 62vw, 280px); height: clamp(220px, 62vw, 280px); }
.hero-spot--mini .hero-spot__corelabel { font-size: 14px; }
.hero-spot--mini .hero-spot__ic { width: 40px; height: 40px; }
.hero-spot--mini .hero-spot__ic svg { width: 22px; height: 22px; }
/* Neutraler Kern: Default zeigt alle Optionen; Hover maximiert ein Kuchenteil in den Kreis */
.hero-spot__neutral { display: none; gap: 3px; text-align: center; color: var(--ink); }
.hero-spot__neutral.is-on { display: grid; justify-items: center; }
.hero-spot__neutral-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #04121a; margin: 0 auto 2px; }
.hero-spot__neutral-ic svg { width: 22px; height: 22px; }
.hero-spot__neutral b { font-size: 15px; font-weight: 800; }
.hero-spot__neutral-sub { font-size: 11.5px; color: var(--ink-muted); }
/* „Termin buchen"-Option im CTA-Spot + Kontaktpanel */
.cta-spot-pop__book { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--surface-edge); background: var(--surface); transition: border-color var(--t-fast), color var(--t-fast); }
.cta-spot-pop__book:hover { border-color: rgba(34, 211, 238, .5); color: var(--ink); }
.cta-spot-pop__book svg { width: 17px; height: 17px; color: var(--accent); }
/* TeamViewer QS: nur das Fernwartungs-Tool — bewusst dezenter Neben-Link */
.cta-spot-pop__tv { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ink-muted); font-size: 12.5px; text-decoration: none; transition: color var(--t-fast); }
.cta-spot-pop__tv:hover { color: var(--ink-soft); }
.cta-spot-pop__tv svg { width: 14px; height: 14px; }
.cpanel__book { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 700; }
.cpanel__book:hover { text-decoration: underline; }
.cpanel__book svg { width: 17px; height: 17px; }

/* ---------- Cookie-Zustimmung ---------- */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 75; max-width: 760px; margin-inline: auto;
  background: rgba(15,22,38,.97); backdrop-filter: blur(16px); border: 1px solid var(--surface-edge);
  border-radius: var(--radius-md); box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); animation: cookie-in var(--t-slow); }
.cookie__inner { display: flex; align-items: center; gap: 18px; padding: 16px 20px; }
.cookie__inner p { margin: 4px 0 0; color: var(--ink-muted); font-size: 13.5px; }
.cookie__inner a { color: var(--accent); }
.cookie .btn { white-space: nowrap; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .cookie__inner { flex-direction: column; align-items: stretch; } }

/* ---------- Extra-Bewegung: Gradient-Shimmer + Button-Shine ---------- */
.text-grad { background-size: 200% auto; animation: grad-shift 8s ease infinite; }
@keyframes grad-shift { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); }
.btn-primary:hover::after { animation: shine .9s ease; }
@keyframes shine { to { left: 130%; } }
html.motion-off .text-grad { animation: none; } html.motion-off .btn-primary:hover::after { animation: none; }

/* ---------- Scroll-Progress-Bar ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90; pointer-events: none; background: rgba(255,255,255,.05); }
.scroll-progress span { display: block; height: 100%; transform: scaleX(var(--p, 0)); transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* ---------- Horizontale Scroll-Galerie (full-bleed, Seiten-Pfeile) ---------- */
.hscroll-wrap { position: relative; margin-top: 34px; }
/* Volle Bildschirmbreite ausbrechen (aus der zentrierten .wrap heraus). */
.hscroll-wrap--bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.hscroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86vw, 360px); gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* Erste Karte am zentrierten Textrand beginnen lassen — rechts reicht ein
     kleiner Auslauf. Symmetrisch war es ein Eigentor: Der Abstand wächst mit
     dem Fenster und schnürte den nutzbaren Bereich auf --page-max ein. Auf
     einem 3840er Schirm blieben so 3 sichtbare Karten und 2660px Leerraum zum
     Durchblättern (Befund 12.08.2026). */
  padding-inline: max(var(--page-pad-x), calc(50vw - var(--page-max) / 2)) var(--page-pad-x);
  scroll-padding-inline: max(var(--page-pad-x), calc(50vw - var(--page-max) / 2)) var(--page-pad-x);
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-block: 8px 16px;
}
/* Breite Schirme: Der Innenabstand oben wächst mit dem Fenster (bei 3840px sind
   das 1330px je Seite) und zählt voll zur Scrollbreite. Auf einem Ultrawide
   blätterte man dadurch durch reinen Leerraum, obwohl längst alle Karten im
   Bild waren — der Zähler stand still, es „lief nichts" (Befund 12.08.2026).
   Passt der Kartensatz ins Fenster, wird er deshalb einfach zentriert. */
.hscroll.is-zentriert {
  padding-inline: var(--page-pad-x); justify-content: center;
  overflow-x: hidden; scroll-snap-type: none;
}
.hscroll::-webkit-scrollbar { display: none; }
/* Greifbar machen — sonst sieht man der Leiste nicht an, dass man sie ziehen kann
   (die Scrollbar ist ausgeblendet). */
.hscroll:not(.is-zentriert) { cursor: grab; }
.hscroll.is-dragging { cursor: grabbing; user-select: none; }
.hscroll > .card { scroll-snap-align: start; }
/* Moderne, runde Seiten-Pfeile (overlaid, vertikal zentriert) */
.hscroll__side {
  position: absolute; top: calc(50% + 4px); transform: translateY(-50%); z-index: 5;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer; color: var(--ink);
  display: grid; place-items: center;
  background: rgba(15, 22, 38, .72); border: 1px solid var(--surface-edge);
  backdrop-filter: blur(10px); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .7);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), opacity var(--t-med);
}
.hscroll__side svg { width: 24px; height: 24px; }
.hscroll__side:hover { background: rgba(34, 211, 238, .18); border-color: rgba(34, 211, 238, .6); transform: translateY(-50%) scale(1.08); }
/* Pfeile in den freien Randbereich neben dem Inhalt (überdecken keine Karte). */
.hscroll__side--prev { left: max(14px, calc(50vw - var(--page-max) / 2 - 64px)); }
.hscroll__side--next { right: max(14px, calc(50vw - var(--page-max) / 2 - 64px)); }
.hscroll__side[hidden] { display: none; }
/* Nur anzeigen, wenn seitlich genug Platz ist (sonst Wischen); sonst überdecken sie Karten. */
@media (max-width: 1320px) { .hscroll__side { display: none; } }
@media (max-width: 700px) { .hscroll { grid-auto-columns: 82vw; } }
html.motion-off .hscroll { scroll-behavior: auto; }

/* ---------- Online-Terminbuchung ---------- */
.booking { max-width: 760px; margin: 34px auto 0; }
/* Auswahl-Chips: Termin-Typ + Consultant — in EINER Zeile (umbruchfähig auf Mobil) */
.booking__pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 36px; margin-bottom: 18px; }
.booking__pickrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.booking__picklabel { color: var(--ink-muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.booking__chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.booking__chip { padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-edge); color: var(--ink-soft); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.booking__chip:hover { border-color: rgba(34, 211, 238, .5); color: var(--ink); }
.booking__chip.is-active { background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-color: transparent; color: #04121a; }
.booking__status { color: var(--ink-soft); background: var(--surface); border: 1px solid var(--surface-edge); border-radius: var(--radius-md); padding: 18px 20px; text-align: center; }
.booking__days { display: grid; gap: 18px; }
.booking__day-label { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.booking__slots { display: flex; flex-wrap: wrap; gap: 8px; }
.booking__slot { padding: 9px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--surface-edge); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
.booking__slot:hover { border-color: rgba(34, 211, 238, .5); transform: translateY(-2px); }
.booking__slot.is-sel { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #04121a; border-color: transparent; }
.booking__form { margin-top: 24px; display: grid; gap: 13px; background: var(--surface); border: 1px solid var(--surface-edge); border-radius: var(--radius-lg); padding: 24px; }
.booking__chosen { font-weight: 700; color: var(--accent); }
.booking__msg { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--surface-edge); font-size: 14px; }
.booking__msg.is-ok { border-color: rgba(52, 211, 153, .5); color: var(--ok); background: rgba(52, 211, 153, .08); }
.booking__msg.is-err { border-color: rgba(248, 113, 113, .5); color: var(--danger); background: rgba(248, 113, 113, .08); }

/* ---------- Kalender-Rad (radialer Terminpicker) ---------- */
.bookwheel { margin: 30px auto 0; max-width: 480px; text-align: center; }
.bookwheel[hidden] { display: none; }
.bookwheel__head { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.bookwheel__month { font-size: 17px; font-weight: 700; min-width: 170px; }
.bookwheel__nav { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--surface-edge); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: border-color var(--t-fast), transform var(--t-fast); }
.bookwheel__nav:hover { border-color: rgba(34, 211, 238, .5); transform: scale(1.06); }
.bookwheel__nav svg { width: 20px; height: 20px; }
.bookwheel__dial { position: relative; width: min(440px, 88vw); height: min(440px, 88vw); margin: 0 auto; }
.bookwheel__ring { position: absolute; inset: 0; }
.bookwheel__node { position: absolute; transform: translate(-50%, -50%) scale(.55); opacity: 0; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); border: 1px solid var(--surface-edge); color: var(--ink); cursor: pointer; transition: transform var(--t-med), opacity var(--t-med), border-color var(--t-fast), background var(--t-fast); }
.bookwheel__node.is-in { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.bookwheel__node:hover { border-color: rgba(34, 211, 238, .75); background: linear-gradient(135deg, rgba(34, 211, 238, .2), rgba(167, 139, 250, .2)); transform: translate(-50%, -50%) scale(1.13); z-index: 2; }
.bookwheel__node small { display: block; font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.bookwheel__node b { font-size: 17px; line-height: 1.1; }
.bookwheel__node--time b { font-size: 15px; }
.bookwheel__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44%; height: 44%; border-radius: 50%; border: 1px solid var(--surface-edge); background: radial-gradient(120% 120% at 30% 25%, rgba(34, 211, 238, .16), rgba(15, 22, 38, .92) 70%); color: var(--ink); display: grid; place-content: center; gap: 3px; padding: 12px; box-shadow: 0 0 0 7px rgba(15, 22, 38, .5); cursor: default; font: inherit; }
.bookwheel__center b { font-size: 17px; }
.bookwheel__center span { font-size: 12px; color: var(--ink-muted); }
.bookwheel__center.is-back { cursor: pointer; }
.bookwheel__center.is-back:hover { border-color: rgba(34, 211, 238, .55); }
.bookwheel__empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 74%; color: var(--ink-muted); font-size: 13.5px; }
.bookwheel__emptyc { font-size: 12.5px; line-height: 1.35; color: var(--ink-muted); }
.bookwheel__hint { color: var(--ink-muted); font-size: 13px; margin-top: 12px; min-height: 1.2em; }
html.motion-off .bookwheel__node { transition: none; opacity: 1; transform: translate(-50%, -50%); }

/* ---------- CRM-Prozesskette (Flow, React-Flow-inspiriert) ---------- */
.flow { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.flow__node { flex: 1; min-width: 168px; max-width: 230px; background: var(--surface); border: 1px solid var(--surface-edge); border-radius: var(--radius-md); padding: 22px 18px; text-align: center; position: relative; transition: opacity var(--t-slow), transform .6s cubic-bezier(.34, 1.56, .64, 1), border-color var(--t-med); }
.flow__node:hover { border-color: rgba(34, 211, 238, .45); transform: translateY(-4px); }
.flow__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #04121a; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.flow__ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(167, 139, 250, .18)); color: var(--accent); margin-top: 4px; }
.flow__ic svg { width: 24px; height: 24px; }
.flow__node b { display: block; font-size: 16px; margin: 10px 0 4px; }
.flow__node > span:last-child { color: var(--ink-muted); font-size: 13px; }
.flow__edge { flex: 0 0 92px; align-self: center; height: 22px; }
.flow__edge svg { width: 100%; height: 100%; overflow: visible; }
/* Verbindungs-Sequenz: blasse Schiene + helle Zeichenlinie + laufender Pfeil + Erfolg */
.flow__rail { stroke: var(--surface-edge); stroke-width: 2; stroke-linecap: round; }
.flow__line { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke .6s ease, filter .6s ease; }
.flow__arrow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .6s ease; }
/* Beim Eintritt ins Viewport: Pfeil läuft links→rechts, Linie zeichnet sich nach (gestaffelt). */
[data-flow].is-animating .flow__line,
[data-pin].is-animating .flow__line { animation: flow-draw .9s ease-out backwards; animation-delay: calc(var(--edge-i, 0) * .6s); }
[data-flow].is-animating .flow__arrow,
[data-pin].is-animating .flow__arrow { animation: flow-arrow-run .9s ease-out backwards; animation-delay: calc(var(--edge-i, 0) * .6s); }
@keyframes flow-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes flow-arrow-run { 0% { transform: translateX(-64px); opacity: 0; } 14% { opacity: 1; } 100% { transform: translateX(0); opacity: 1; } }
/* Alle Stationen verbunden -> Linien & Pfeile wechseln auf Erfolgsfarbe. */
[data-flow].is-connected .flow__line,
[data-pin].is-connected .flow__line { stroke: var(--ok); filter: drop-shadow(0 0 3px rgba(52, 211, 153, .55)); }
[data-flow].is-connected .flow__arrow,
[data-pin].is-connected .flow__arrow { stroke: var(--ok); }
[data-flow].is-connected .flow__node,
[data-pin].is-connected .pin-station { border-color: rgba(52, 211, 153, .38); }
@media (max-width: 760px) {
  .flow { flex-direction: column; align-items: center; }
  .flow__node { max-width: 340px; width: 100%; }
  .flow__edge { flex-basis: 30px; width: 22px; height: 36px; transform: rotate(90deg); }
}
html.motion-off .flow__line, html.motion-off .flow__arrow { animation: none; }

/* ---------- Pin & Translate (Premium: vertikal scrollen -> horizontal) ---------- */
.pinwrap { position: relative; }
.pinwrap__stage { display: flex; align-items: center; overflow: hidden; }
/* width:max-content + flex:none — der Track darf nie auf Stage-Breite schrumpfen,
   sonst stimmt die berechnete Scroll-Strecke nicht und die Kette stoppt zu früh. */
.pinwrap__track { display: flex; flex: none; width: max-content; align-items: stretch; gap: 12px; padding-inline: var(--page-pad-x); }
/* Karten-Variante (z. B. Services-Sektion): gleiche Kartenbreite wie in den Galerien */
.pinwrap__track--cards { gap: 22px; padding-block: 8px; }
.pinwrap__track--cards .card { flex: 0 0 min(86vw, 360px); }
/* Fallback (nicht gepinnt: mobil / motion-off / kein JS): horizontal wischbar */
.pinwrap:not(.is-pinned) .pinwrap__stage { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-block: 8px; }
.pinwrap:not(.is-pinned) .pinwrap__stage::-webkit-scrollbar { display: none; }
/* Fallback ist per Mausrad + Ziehen bedienbar (corporate.js) — Grab-Cursor signalisiert das */
.pinwrap:not(.is-pinned) .pinwrap__stage { cursor: grab; }
.pinwrap:not(.is-pinned) .pinwrap__stage.is-dragging { cursor: grabbing; user-select: none; }
.pinwrap:not(.is-pinned) .pin-station { scroll-snap-align: center; }
/* Gepinnt: Bühne klebt, Track wird per JS horizontal verschoben.
   Die Wrap-Höhe (= Pin-Strecke) setzt das JS passend zur Track-Breite. */
.pinwrap.is-pinned .pinwrap__stage { position: sticky; top: 0; height: 100vh; }
.pinwrap.is-pinned .pinwrap__track { will-change: transform; }
.pin-station {
  flex: 0 0 min(82vw, 420px); align-self: center; background: var(--surface-strong); border: 1px solid var(--surface-edge);
  border-radius: var(--radius-lg); padding: 40px 34px; box-shadow: 0 40px 90px -50px rgba(0,0,0,.7); position: relative;
}
.pin-station__no { font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--accent); }
.pin-station__ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; margin: 14px 0; background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(167,139,250,.2)); border: 1px solid var(--surface-edge); color: var(--accent); }
.pin-station__ic svg { width: 32px; height: 32px; }
.pin-station h3 { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 8px; }
.pin-station p { color: var(--ink-soft); margin: 0; font-size: 16px; }
/* Zwei Pin-Sektionen direkt hintereinander: Ohne Puffer wechselt die erste
   abrupt von „klebt" zu „fließt", während die zweite schon anfängt zu kleben —
   das erzeugt den gemeldeten Ruck. Etwas Luft entkoppelt die Übergabe. */
/* Luft nach unten, damit sich zwei aufeinanderfolgende Scroll-Sektionen nicht
   ins Gehege kommen: Ohne den Abstand stand der Kopftext der nächsten Sektion
   schon im Bild, während die vorige noch bedienbar wirkte (Befund 12.08.2026). */
.pinwrap { margin-block: 10px clamp(56px, 7vw, 120px); }
/* Randverlauf als Hinweis „hier geht es weiter", wenn die Kette NICHT gepinnt
   fährt (breite Fenster, Touch, motion-off) und trotzdem Überhang hat. */
.pinwrap:not(.is-pinned) .pinwrap__stage { position: relative; }
.pinwrap:not(.is-pinned).has-overflow .pinwrap__stage::after {
  content: ""; position: sticky; right: 0; top: 0; align-self: stretch;
  flex: 0 0 56px; margin-left: -56px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bg-0));
}
/* Blätter-Knöpfe + Stationsanzeige — in BEIDEN Zuständen. Gepinnt schwebt die
   Leiste unten in der klebenden Bühne mit (sonst wäre sie erst nach der ganzen
   Pin-Strecke erreichbar), ungepinnt steht sie fest unter der Galerie. */
.pinnav { display: none; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; }
.pinwrap.has-nav .pinnav { display: flex; }
.pinwrap.is-pinned .pinnav {
  position: absolute; left: 0; right: 0;
  /* --pin-nav-top wird in size() aus der Trackhöhe gerechnet: direkt unter den
     Karten statt am Viewport-Boden (dort lag sie unter dem Cookie-Hinweis). */
  top: var(--pin-nav-top, auto); bottom: auto;
  margin-top: 0; z-index: 3; pointer-events: none;
}
.pinwrap.is-pinned .pinnav > * { pointer-events: auto; }
/* Stationsanzeige „2 / 5": macht die Länge der Kette sichtbar, damit niemand
   mitten in der Geschichte weiterscrollt, weil er das Ende nicht kennt. */
.pinnav__step {
  font-size: .82rem; font-variant-numeric: tabular-nums; letter-spacing: .06em;
  color: var(--ink-muted); min-width: 4.5ch; text-align: center;
}
/* Katalog-Galerien: Knöpfe unter der Leiste. Passt der ganze Kartensatz ins
   Fenster, blendet das JS sie per [hidden] aus — die Regel muss danach kommen,
   sonst gewinnt display:flex gegen das Attribut. */
.pinnav--static { display: flex; }
.pinnav--static[hidden] { display: none; }
.pinnav__btn[disabled] { opacity: .35; cursor: default; }
.pinnav__btn[disabled]:hover { color: var(--ink-soft); border-color: var(--surface-edge); }
.pinnav__btn {
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--surface-edge); color: var(--ink-soft);
  cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast);
}
.pinnav__btn:hover { color: var(--accent); border-color: rgba(34,211,238,.5); }
.pinnav__btn svg { width: 20px; height: 20px; }
.pin-edge { flex: 0 0 120px; align-self: center; height: 26px; }
.pin-edge svg { width: 100%; height: 100%; overflow: visible; }

/* ---------- Sticky-Szene (scrollytell) ---------- */
.scrolly__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* Höhe gedeckelt: 66vh sind auf einem 1600px hohen Schirm über 1000px Kasten
   für rund 250px Inhalt — die Szene wirkte dort ausgestorben. */
.scrolly__stage { position: sticky; top: calc(var(--header-h) + 24px); height: clamp(340px, 66vh, 560px); border-radius: var(--radius-lg); border: 1px solid var(--surface-edge); background: linear-gradient(160deg, var(--surface-strong), var(--surface)); overflow: hidden; }
.scrolly__vis { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; gap: 14px; text-align: center; padding: 32px; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity var(--t-slow), transform var(--t-slow); }
.scrolly__vis.is-active { opacity: 1; transform: none; }
.scrolly__vis .sv-ic { width: 96px; height: 96px; border-radius: 26px; display: grid; place-items: center; margin: 0 auto; background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(167,139,250,.2)); border: 1px solid var(--surface-edge); color: var(--accent); }
.scrolly__vis .sv-ic svg { width: 46px; height: 46px; }
.scrolly__vis b { font-size: clamp(20px, 2.4vw, 28px); }
.scrolly__vis span { color: var(--ink-soft); max-width: 32ch; margin: 0 auto; }
.scrolly__steps { display: flex; flex-direction: column; }
/* Ebenfalls gedeckelt — sonst kostet jede Station auf hohen Schirmen über
   1000px Scrollweg, und die Szene zieht sich endlos. */
.scrolly__step { min-height: clamp(300px, 64vh, 620px); display: flex; flex-direction: column; justify-content: center; opacity: .45; transition: opacity var(--t-med); }
.scrolly__step.is-active { opacity: 1; }
.scrolly__step h3 { font-size: clamp(22px, 2.8vw, 34px); margin: 10px 0 10px; }
.scrolly__step p { color: var(--ink-soft); max-width: 46ch; }
.scrolly__vis-m { display: none; }
@media (max-width: 960px) {
  .scrolly__grid { grid-template-columns: 1fr; gap: 0; }
  .scrolly__stage { display: none; }
  .scrolly__step { min-height: 0; opacity: 1; padding-block: 28px; }
  .scrolly__vis-m { display: grid; place-items: center; gap: 10px; text-align: center; margin-top: 16px; padding: 24px; border: 1px solid var(--surface-edge); border-radius: var(--radius-md); background: var(--surface); }
  .scrolly__vis-m .sv-ic { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(167,139,250,.2)); color: var(--accent); }
  .scrolly__vis-m .sv-ic svg { width: 36px; height: 36px; }
}

/* ---------- Charts (Recharts-inspiriert) ---------- */
.chart { margin-top: 30px; background: var(--surface); border: 1px solid var(--surface-edge); border-radius: var(--radius-md); padding: 22px; }
.chart__svg { width: 100%; height: 230px; display: block; }
.chart__axis { stroke: var(--surface-edge); stroke-width: .4; }
.chart__bar { fill: url(#chartgrad); transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.chart.is-in .chart__bar { transform: scaleY(1); }
.chart__line { stroke: url(#chartgrad); stroke-width: 1.6; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s ease; vector-effect: non-scaling-stroke; }
.chart.is-in .chart__line { stroke-dashoffset: 0; }
.chart__dot { fill: #fff; opacity: 0; transition: opacity .3s ease; }
.chart.is-in .chart__dot { opacity: 1; }
.chart__labels { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.chart__labels span { flex: 1; text-align: center; color: var(--ink-muted); font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.chart__labels b { color: var(--ink); font-size: clamp(16px, 2vw, 20px); }
html.motion-off .chart__bar { transform: none; } html.motion-off .chart__line { stroke-dashoffset: 0; } html.motion-off .chart__dot { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero__grid, .split, .contact { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .grid--3, .grid--4, .price-grid, .stats, .team { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav__links, .lang, .region-switch, .nav__tv, .nav__login { display: none; }
  .nav__toggle { display: inline-flex; }
}
@media (max-width: 600px) {
  .grid--3, .grid--4, .price-grid, .stats, .team, .grid--2, .field--row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  :root { --section-gap: 64px; }
}

/* ---------- Programmstände auf Landingpages ---------- */
/* Liste der letzten Versionen. Der aktuelle Stand steht oben und ist
   hervorgehoben; ältere bleiben erreichbar, ohne sich vorzudrängen. */
.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dl-item {
  border: 1px solid var(--surface-edge); border-radius: var(--radius-md);
  background: var(--surface); padding: 18px 20px;
}
.dl-item--aktuell { border-color: rgba(34, 211, 238, .45); background: var(--surface-strong); }
.dl-item__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dl-item__ver { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dl-item__flag {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bg-0); background: var(--accent); border-radius: 999px; padding: 3px 10px;
}
.dl-item__kanal {
  font-size: .72rem; letter-spacing: .06em; color: var(--ink-muted);
  border: 1px solid var(--surface-edge); border-radius: 999px; padding: 2px 9px;
}
.dl-item__datum { font-size: .85rem; color: var(--ink-muted); margin-left: auto; }
.dl-item__notiz { color: var(--ink-soft); margin: 10px 0 0; font-size: .92rem; }
.dl-item__dateien { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* Als Knopf lesbar machen: .btn-primary ist auf breite Flächen ausgelegt und
   wirkte um kurzen Dateinamen herum wie eine Texthervorhebung. */
.dl-item__btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 999px; line-height: 1.2;
}
.dl-item__btn svg { width: 18px; height: 18px; }
.dl-item__groesse { font-style: normal; opacity: .7; font-size: .84rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .dl-item__datum { margin-left: 0; width: 100%; }
  .dl-item__btn { width: 100%; justify-content: center; }
}

/* ---------- Inhalts-Banner (docs/NEWS_BANNER_KONZEPT.md) ---------- */
.banner {
  position: relative; display: flex; align-items: center; gap: 14px;
  border-block: 1px solid var(--surface-edge); background: var(--surface);
  padding: 10px max(var(--page-pad-x), calc(50vw - var(--page-max) / 2));
  overflow: hidden;
}
.banner__viewport { flex: 1 1 auto; overflow: hidden; }
.banner__track { display: flex; align-items: center; gap: 40px; width: max-content; }
.banner__slide {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: .94rem; color: var(--ink-soft);
}
.banner__slide b { color: var(--ink); font-weight: 650; }
.banner__link { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.banner__link:hover b, .banner__link:hover .banner__cta { color: var(--accent); }
.banner__cta { color: var(--accent); font-weight: 600; }
.banner__flag {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bg-0); background: var(--accent); border-radius: 999px; padding: 3px 9px;
}
.banner__ic { display: grid; place-items: center; color: var(--accent); }
.banner__ic svg { width: 20px; height: 20px; }
.banner__temp { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.banner__bild { height: 34px; width: auto; border-radius: 6px; display: block; }
.banner__rahmen { border: 0; width: 320px; max-width: 60vw; display: block; }

/* Laufband: Bewegung ueber transform (nicht left), damit sie fluessig bleibt.
   Die Spur wird im JS verdoppelt, damit der Umlauf nahtlos wirkt. */
.banner--laufband .banner__track { animation: banner-lauf var(--banner-dauer, 60s) linear infinite; }
.banner--laufband.is-paused .banner__track { animation-play-state: paused; }
.banner--laufband:hover .banner__track,
.banner--laufband:focus-within .banner__track { animation-play-state: paused; }
@keyframes banner-lauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--banner-weg, 50%)), 0, 0); }
}

/* Karussell: eine Ansicht zur Zeit, blaetterbar. */
.banner--karussell .banner__track { transition: transform var(--t-med); gap: 0; }
.banner--karussell .banner__slide { width: var(--banner-breite, 100%); flex: 0 0 var(--banner-breite, 100%); justify-content: center; }

.banner__steuer { display: flex; align-items: center; gap: 6px; flex: none; }
.banner__btn {
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--surface-edge); color: var(--ink-muted);
  cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast);
}
.banner__btn:hover { color: var(--accent); border-color: rgba(34,211,238,.5); }
.banner__btn svg { width: 15px; height: 15px; }
/* Eine allgemeine svg-Regel setzt display:block und sticht damit das
   hidden-Attribut aus — sonst stehen Pause- und Play-Symbol uebereinander. */
.banner__btn svg[hidden] { display: none; }
.banner__btn[hidden] { display: none; }

/* Wer Bewegung abbestellt hat, bekommt eine ruhige Liste statt eines Laufbands. */
@media (prefers-reduced-motion: reduce) {
  .banner--laufband .banner__track { animation: none; }
  .banner__viewport { overflow-x: auto; }
}
.motion-off .banner--laufband .banner__track { animation: none; }
.motion-off .banner__viewport { overflow-x: auto; }

@media (max-width: 700px) {
  .banner { padding-inline: var(--page-pad-x); }
  .banner__rahmen { width: 240px; }
}