/* ════════════════════════════════════════════════════════════
   SONORA DESIGN SYSTEM - SaaS Edition
   Layer 1: Primitive Tokens
   Layer 2: Semantic Tokens  (Blau = Default, Gold via [data-theme])
   Layer 3: Komponenten
   Theme-Lock: Light. Eine Akzentfarbe pro Seite.
════════════════════════════════════════════════════════════ */

/* ── Layer 0: Schrift ────────────────────────────────────────
   Geist wird von der eigenen Domain geladen, nicht von Google.
   Zwei Gruende: es spart den Verbindungsaufbau zu zwei fremden
   Servern vor dem ersten Textbild, und es sendet keine IP-Adresse
   der Besucher an Google (LG Muenchen, 3 O 17493/20).
   Eine Variable-Font-Datei deckt 400 bis 700 ab.
   font-display: swap zeigt sofort die Ersatzschrift, damit der
   Text nie unsichtbar ist.
──────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ── Layer 1: Primitives ─────────────────────────────────── */
:root {
  /* Blue scale (Brand) */
  --blue-50: #eef6ff;
  --blue-100: #d9ecff;
  --blue-200: #b6d9fb;
  --blue-500: #2b7fe0;
  --blue-600: #1e63c4;
  --blue-700: #155bb5;
  --blue-900: #0e2f5c;

  /* Gold scale (Beauty-Branche) */
  --gold-50: #faf4e3;
  --gold-100: #f3e6c3;
  --gold-200: #e7d9b0;
  --gold-500: #c19a3f;
  --gold-600: #8a6720;
  --gold-700: #6f5319;
  --gold-900: #3d2d0d;

  /* Neutral scale (kühles Grau, kein Reinschwarz/-weiß) */
  --gray-0: #ffffff;
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #e4e7ec;
  --gray-300: #d0d5dd;
  --gray-500: #667085;
  --gray-700: #344054;
  --gray-900: #101828;
  --gray-950: #0b1220;

  /* Type */
  --font-sans: "Geist", "Segoe UI", -apple-system, system-ui, sans-serif;

  /* Radius-System: Buttons/Inputs 10, Karten 16, Panels 20 */
  --radius-btn: 10px;
  --radius-card: 16px;
  --radius-panel: 20px;

  /* Spacing / Layout */
  --container: 1120px;
  --nav-h: 68px;
  --section-y: clamp(4rem, 8vw, 6.5rem);
}

/* ── Layer 2: Semantic (Default = Blau) ──────────────────── */
:root {
  color-scheme: light;

  --brand: var(--blue-500);
  --brand-strong: var(--blue-600);
  --brand-deep: var(--blue-700);
  --brand-soft: var(--blue-50);
  --brand-tint: var(--blue-100);
  --brand-line: var(--blue-200);
  /* Textfarbe für kleine Schrift und Icons: --brand erreicht auf Weiß nur 3,98:1,
     --brand-text erreicht 6,5:1 und erfüllt damit WCAG AA. */
  --brand-text: var(--blue-700);

  --ink: var(--gray-900);
  --ink-2: var(--gray-700);
  --ink-3: var(--gray-500);

  --surface: var(--gray-0);
  --surface-2: var(--gray-50);
  --surface-raised: var(--gray-0);
  --line: var(--gray-200);
  --line-2: var(--gray-300);

  --cta-dark-bg: var(--gray-950);
  --cta-dark-glow: rgba(43, 127, 224, .28);

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, .04), 0 12px 24px -8px rgba(16, 24, 40, .10);
  --shadow-lg: 0 4px 8px rgba(16, 24, 40, .04), 0 28px 56px -16px rgba(16, 24, 40, .18);
  --ring: 0 0 0 3px var(--brand-tint);
}

/* Gold-Theme für Branchenseite Beauty */
[data-theme="gold"] {
  --brand: var(--gold-600);
  --brand-strong: var(--gold-700);
  --brand-deep: var(--gold-700);
  --brand-soft: var(--gold-50);
  --brand-tint: var(--gold-100);
  --brand-line: var(--gold-200);
  --brand-text: var(--gold-700);
  --cta-dark-glow: rgba(193, 154, 63, .30);
  --ring: 0 0 0 3px var(--gold-100);
}

/* ── Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* Sprunglink für Tastatur- und Screenreader-Nutzung */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-btn);
  padding: .7rem 1.1rem;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* ── Typografie ──────────────────────────────────────────── */
h1, h2, h3 { font-weight: 650; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }

.h1 {
  font-size: clamp(2.05rem, 4.2vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.03em;
}

/* hält zusammengesetzte Wörter zusammen, damit die Headline nicht
   nach einem Bindestrich umbricht */
.nowrap { white-space: nowrap; }

.h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.12;
}

.h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }

.lead {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  color: var(--ink-2);
  max-width: 58ch;
}

.accent { color: var(--brand); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface-2); }
.section-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .lead { margin-top: .9rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  padding: .85rem 1.35rem;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn:active { transform: translateY(1px) scale(.99); }

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--brand-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--secondary:hover { border-color: var(--ink-3); transform: translateY(-1px); }

.btn--on-dark {
  background: #fff;
  color: var(--gray-950);
}
.btn--on-dark:hover { background: var(--gray-100); transform: translateY(-1px); }

.btn--ghost-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
.btn--ghost-dark:hover { border-color: rgba(255, 255, 255, .7); transform: translateY(-1px); }

.btn--lg { padding: 1rem 1.6rem; font-size: 1rem; }

/* ── Navigation ──────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.is-scrolled { border-bottom-color: var(--line); background: rgba(255, 255, 255, .95); }

.nav .container { display: flex; align-items: center; gap: 1.5rem; width: 100%; }

.nav-logo {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em;
  text-decoration: none; color: var(--ink);
  /* Der volle Name "Sonora Solutions" darf unter keinen Umständen
     umbrechen — eine zweizeilige Wortmarke sieht nach Fehler aus. */
  white-space: nowrap;
}
.nav-logo-mark {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  position: relative;
}
.nav-logo-mark::after {
  content: ""; position: absolute; inset: 7px; border-radius: 3px; background: rgba(255, 255, 255, .92);
}

.nav-menu { margin-left: auto; display: flex; align-items: center; }
.nav-links { display: flex; align-items: center; gap: .25rem; list-style: none; }
.nav-links a {
  display: block; padding: .5rem .8rem; border-radius: 8px;
  font-size: .92rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
  transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--ink); background: var(--gray-100); }
.nav-links .btn { margin-left: .6rem; padding: .65rem 1.1rem; font-size: .9rem; }
.nav-links .btn:hover { color: #fff; background: var(--brand-deep); }

.nav-burger {
  display: none; margin-left: auto;
  flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 10px;
}
.nav-burger span { width: 22px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s, opacity .25s; }
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(900px 480px at 85% -10%, var(--brand-soft), transparent 65%),
    var(--surface);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-copy .h1 { margin-bottom: 1.1rem; }
.hero-copy .lead { margin-bottom: 1.8rem; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-media { position: relative; }

/* Foto-Hero (Branchenseite) */
.hero-photo {
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* ── Chat-/Call-Demo-Panel (echtes Funktions-Preview) ────── */
.demo-panel {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.demo-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.demo-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .72rem; font-weight: 700;
}
.demo-title { font-size: .88rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.demo-sub { font-size: .74rem; color: var(--ink-3); }
.demo-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 600; color: var(--brand-text);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 999px; padding: .28rem .65rem;
}
.demo-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--brand-tint); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.demo-body { padding: 1rem; display: flex; flex-direction: column; gap: .55rem; min-height: 220px; }

.demo-msg {
  max-width: 85%;
  padding: .6rem .85rem;
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.demo-msg.is-shown { opacity: 1; transform: none; }
.demo-msg--in { align-self: flex-start; background: var(--gray-100); color: var(--ink); border-bottom-left-radius: 4px; }
.demo-msg--out { align-self: flex-end; background: var(--brand-strong); color: #fff; border-bottom-right-radius: 4px; }

.demo-typing {
  align-self: flex-end;
  display: inline-flex; gap: 4px;
  padding: .65rem .8rem;
  background: var(--brand-strong);
  border-radius: 14px; border-bottom-right-radius: 4px;
}
.demo-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.85); animation: bounce 1.1s infinite; }
.demo-typing i:nth-child(2) { animation-delay: .14s; }
.demo-typing i:nth-child(3) { animation-delay: .28s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .55; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.demo-result {
  margin: 0 1rem 1rem;
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem .9rem;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  opacity: 0; transition: opacity .4s ease;
}
.demo-result.is-shown { opacity: 1; }
.demo-result-check {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-strong); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.demo-result b { display: block; font-size: .86rem; font-weight: 600; color: var(--ink); }
.demo-result span { font-size: .76rem; color: var(--ink-3); }

/* ── Kanal-Band (Anruf/WhatsApp/E-Mail → Sonora → Ergebnis) ─ */
.channels {
  border-block: 1px solid var(--line);
  background: var(--surface-2);
  padding-block: 1.4rem;
}
/* Drei Spalten, damit der Sonora-Kern exakt auf der Seitenachse sitzt —
   und damit auf einer Linie mit dem Orb im "Teste mich"-Abschnitt darunter.
   Bei einer flachen Flex-Reihe zog die schmalere linke Chip-Gruppe den Kern
   sonst nach links. */
.channels-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(.5rem, 1.2vw, 1rem);
}
.channels-side {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(.5rem, 1.2vw, 1rem);
}
.channels-side--in { justify-content: flex-end; }
.channels-side--out { justify-content: flex-start; }

/* Die gleich breiten Seitenspalten brauchen etwas mehr Platz als der
   Textcontainer — das Band ist eine eigene, volle Fläche, die Chips dürfen
   darin breiter laufen. */
.channels .container { max-width: 1240px; }

/* Unter ~1200px passen die drei Spalten nicht mehr nebeneinander — statt
   eines schiefen Umbruchs stapeln wir Eingang → Sonora → Ergebnis. */
@media (max-width: 1199px) {
  .channels-row { grid-template-columns: 1fr; justify-items: center; row-gap: .75rem; }
  .channels-side--in, .channels-side--out { justify-content: center; }
  .channel-arrow { display: none; }
}
.channel-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .88rem; font-weight: 500; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: .5rem .9rem;
  box-shadow: var(--shadow-sm);
}
.channel-chip svg { width: 15px; height: 15px; color: var(--brand-text); }
.channel-arrow { color: var(--gray-300); flex-shrink: 0; }
.channel-core {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand-strong), var(--brand-deep));
  border-radius: 999px; padding: .55rem 1.1rem;
  box-shadow: var(--shadow-md);
}

/* ── Karten & Grids ──────────────────────────────────────── */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.6rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.card { text-decoration: none; display: block; }
.card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand-text);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.card .h3 { margin-bottom: .45rem; }
.card p { font-size: .93rem; color: var(--ink-2); }
.card-link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: 1rem; font-size: .9rem; font-weight: 600; color: var(--brand-text);
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }

/* Produkt-Bento: 2 große + 2 kleine Zellen */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.bento-feature {
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-radius: var(--radius-card);
  border: 1px solid var(--brand-line);
  background: linear-gradient(160deg, var(--brand-soft), var(--surface) 70%);
  display: flex; flex-direction: column; align-items: flex-start;
  transition: box-shadow .2s ease, transform .2s ease;
}
.bento-feature:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bento-feature .h3 { font-size: 1.35rem; margin-bottom: .55rem; }
.bento-feature p { color: var(--ink-2); max-width: 46ch; }
.bento-feature .card-link { margin-top: auto; padding-top: 1.2rem; }

/* ── Schritte ────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; counter-reset: step; }
.step {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.6rem;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand-strong); color: #fff;
  font-weight: 700; font-size: .95rem;
  margin-bottom: 1rem;
}
.step .h3 { margin-bottom: .4rem; }
.step p { font-size: .93rem; color: var(--ink-2); }

/* ── Rechner ─────────────────────────────────────────────── */
.calc {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.calc-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

.range { margin-bottom: 1.35rem; }
.range:last-child { margin-bottom: 0; }
.range-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.range-top .rl { font-size: .92rem; font-weight: 500; color: var(--ink-2); min-width: 0; }
.range-top .rv { font-size: 1.02rem; font-weight: 650; color: var(--brand-text); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }

input[type=range] {
  width: 100%; height: 6px; border-radius: 999px;
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(to right, var(--brand) 0%, var(--gray-200) 0%);
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 4px solid var(--brand);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 4px solid var(--brand);
  box-shadow: var(--shadow-sm); cursor: pointer;
}

.calc-res {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.4rem;
  display: flex; flex-direction: column; gap: .8rem;
  align-self: start;
}
.res-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .92rem; color: var(--ink-2); }
.res-line strong { font-weight: 650; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.res-divider { height: 1px; background: var(--line); }
.res-save {
  background: var(--gray-950);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  color: #fff;
}
.res-save .sl { display: block; font-size: .78rem; font-weight: 500; color: var(--gray-300); margin-bottom: .3rem; }
.res-save .sv { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.res-note { font-size: .78rem; color: var(--ink-3); }

/* ── Check-Liste ─────────────────────────────────────────── */
.checks { list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.checks li { display: flex; gap: .75rem; align-items: flex-start; }
.checks .ck {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-text);
  display: flex; align-items: center; justify-content: center;
}
.checks b { display: block; font-weight: 600; color: var(--ink); }
.checks span { font-size: .92rem; color: var(--ink-2); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

/* ── Branchen-Marquee ────────────────────────────────────── */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex; gap: .8rem; width: max-content;
  animation: marquee 30s linear infinite;
  padding-block: .25rem;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-chip {
  white-space: nowrap;
  font-size: .92rem; font-weight: 500; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: .55rem 1.05rem;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list { max-width: 720px; margin-inline: auto; }
.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  margin-bottom: .7rem;
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq.is-open { border-color: var(--brand-line); }
.faq-q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
  padding: 1.05rem 1.2rem;
}
.faq-ic {
  flex-shrink: 0; width: 20px; height: 20px; position: relative;
  transition: transform .3s ease;
}
.faq-ic::before, .faq-ic::after {
  content: ""; position: absolute; background: var(--brand-text); border-radius: 2px;
}
.faq-ic::before { top: 9px; left: 3px; right: 3px; height: 2px; }
.faq-ic::after { left: 9px; top: 3px; bottom: 3px; width: 2px; transition: transform .3s ease; }
.faq.is-open .faq-ic::after { transform: scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { padding: 0 1.2rem 1.15rem; font-size: .94rem; color: var(--ink-2); }

/* ── Dunkles CTA-Band (eine bewusste Ausnahme vom Light-Lock) ── */
.cta-band {
  margin: 0 clamp(.75rem, 2vw, 1.5rem) clamp(.75rem, 2vw, 1.5rem);
  border-radius: clamp(20px, 3vw, 28px);
  background:
    radial-gradient(640px 320px at 50% -10%, var(--cta-dark-glow), transparent 65%),
    var(--cta-dark-bg);
  color: #fff;
  overflow: hidden;
}
.cta-band-inner {
  text-align: center;
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 3rem);
}
.cta-band .h2 { color: #fff; margin-bottom: .8rem; }
.cta-band p { color: var(--gray-300); max-width: 48ch; margin: 0 auto 1.8rem; }
.cta-band .hero-cta { justify-content: center; }

/* Zusätzlicher Weg in den Webchat, bewusst als Textzeile und nicht als
   dritter Knopf: Die Knopfreihe im Abschluss-Band ist auf schmalen
   Schirmen auf genau zwei nebeneinander ausgelegt (flex-wrap: nowrap,
   flex: 1 1 0, siehe Medienabfrage weiter unten). Ein dritter Knopf
   drückte alle drei unter die Mindestbreite für Tippflächen. */
.cta-chat {
  margin: 1.3rem auto 0;
  font-size: .92rem;
  color: var(--gray-300);
}
.cta-chat a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.cta-chat a:hover { color: var(--gray-300); }

/* ── Footer ──────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  padding-block: 2.2rem;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; }
.footer-nav a { font-size: .88rem; color: var(--ink-3); text-decoration: none; transition: color .15s; }
.footer-nav a:hover { color: var(--ink); }

/* ── Reveal-Animationen ──────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .07s; }
.reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .demo-live i, .demo-typing i { animation: none; }
  .btn, .card, .bento-feature { transition: none; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-grid, .split, .calc-body { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .steps { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }

  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: .5rem 1.25rem 1.25rem;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .nav-links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links li:not(:last-child) { border-bottom: 1px solid var(--line); }
  .nav-links a { padding: .95rem .25rem; font-size: 1rem; border-radius: 0; }
  .nav-links .btn { margin: 1rem 0 0; border-radius: var(--radius-btn); text-align: center; justify-content: center; padding: .9rem 1.1rem; }
  .nav-burger { display: flex; }

  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.97); }
}

@media (max-width: 640px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════
   PREMIUM-LAYER: Sonora-Kugel, Waveform, Entrance, Atmosphäre
════════════════════════════════════════════════════════════ */

/* ── Sonora-Kugel (Orb) ──────────────────────────────────── */
.orb {
  --orb-size: 120px;
  position: relative;
  width: var(--orb-size);
  height: var(--orb-size);
  flex-shrink: 0;
}

.orb-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 72% 80%, var(--brand-deep), transparent 62%),
    linear-gradient(135deg, var(--brand-tint), var(--brand) 55%, var(--brand-deep));
  box-shadow:
    inset calc(var(--orb-size) * -.07) calc(var(--orb-size) * -.1) calc(var(--orb-size) * .2) rgba(11, 18, 32, .22),
    inset calc(var(--orb-size) * .05) calc(var(--orb-size) * .07) calc(var(--orb-size) * .16) rgba(255, 255, 255, .38),
    0 calc(var(--orb-size) * .16) calc(var(--orb-size) * .4) calc(var(--orb-size) * -.12) var(--cta-dark-glow);
  animation: orbBreathe 5.5s ease-in-out infinite;
  overflow: hidden;
}

/* wandernder Lichtschleier auf der Kugel */
.orb-core::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg,
    transparent 0deg 120deg,
    rgba(255, 255, 255, .38) 165deg,
    transparent 210deg 360deg);
  filter: blur(calc(var(--orb-size) * .06));
  animation: orbSwirl 9s linear infinite;
  mix-blend-mode: soft-light;
}

/* weicher Farb-Glow hinter der Kugel */
.orb-glow {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--cta-dark-glow), transparent 72%);
  animation: orbGlow 5.5s ease-in-out infinite;
  pointer-events: none;
}

/* Sonar-Ringe */
.orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--brand-line);
  opacity: 0;
  animation: orbPing 3.6s ease-out infinite;
  pointer-events: none;
}
.orb-ring--2 { animation-delay: 1.8s; }

@keyframes orbBreathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.035) translateY(-2%); }
}
@keyframes orbSwirl { to { transform: rotate(360deg); } }
@keyframes orbGlow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.06); }
}
@keyframes orbPing {
  0% { transform: scale(1); opacity: .7; }
  80% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ── Sprech-Zustand ───────────────────────────────────────────
   Bewusst KEIN Austausch der Keyframe-Animation am Kern: ein Wechsel
   zwischen zwei laufenden Animationen springt sichtbar. Stattdessen
   skaliert der Container per Transition (weich) und eine zusätzliche
   Glut-Ebene wird eingeblendet. Dadurch bleibt das Atmen ungestört. */
.orb {
  transition: transform .55s cubic-bezier(.34, 1.4, .64, 1);
}
.orb.is-speaking { transform: scale(1.045); }

.orb-pulse {
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--cta-dark-glow), transparent 68%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.orb.is-speaking .orb-pulse {
  opacity: 1;
  animation: orbBeat 1.5s ease-in-out infinite;
}

@keyframes orbBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Größen */
.orb--sm { --orb-size: 34px; }
.orb--sm .orb-ring { display: none; }
.orb--md { --orb-size: 72px; }
.orb--lg { --orb-size: clamp(120px, 16vw, 168px); margin-inline: auto; }

/* Kugel im dunklen CTA-Band */
.cta-band .orb { margin-bottom: 1.6rem; }
.cta-band .orb-ring { border-color: rgba(255, 255, 255, .22); }

/* ── Waveform (spricht mit der Kugel) ────────────────────── */
.wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}
.wave i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleY(.25);
  transform-origin: center;
  transition: transform .3s ease;
}
.is-speaking .wave i, .wave.is-speaking i { animation: waveBar 1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .12s; }
.wave i:nth-child(3) { animation-delay: .24s; }
.wave i:nth-child(4) { animation-delay: .36s; }
@keyframes waveBar {
  0%, 100% { transform: scaleY(.25); }
  50% { transform: scaleY(1); }
}

/* ── Hero-Atmosphäre: driftende Farbflächen ──────────────── */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }
.hero::before, .hero::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--brand-tint), transparent 70%);
  opacity: .55;
  pointer-events: none;
  will-change: transform;
}
.hero::before {
  top: -220px; right: -140px;
  animation: drift1 16s ease-in-out infinite;
}
.hero::after {
  bottom: -300px; left: -180px;
  opacity: .35;
  animation: drift2 20s ease-in-out infinite;
}
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-36px, 28px); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(44px, -24px); }
}

/* ── Hero-Entrance (Load-in, gestaffelt) ─────────────────── */
.anim-up {
  opacity: 0;
  transform: translateY(18px);
  animation: animUp .75s cubic-bezier(.16, 1, .3, 1) forwards;
}
.anim-d1 { animation-delay: .1s; }
.anim-d2 { animation-delay: .2s; }
.anim-d3 { animation-delay: .32s; }
@keyframes animUp { to { opacity: 1; transform: none; } }

/* ── Feinschliff ─────────────────────────────────────────── */
.btn--primary { background: linear-gradient(135deg, var(--brand-strong), var(--brand-deep)); }
.btn--primary:hover { background: linear-gradient(135deg, var(--brand-deep), var(--brand-deep)); }

.demo-panel {
  box-shadow: var(--shadow-lg), 0 24px 64px -20px var(--cta-dark-glow);
  animation: panelFloat 7s ease-in-out infinite;
}
@keyframes panelFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.hero-photo { box-shadow: var(--shadow-lg), 0 24px 64px -20px var(--cta-dark-glow); }

/* ════════════════════════════════════════════════════════════
   BÜHNE: Gespräch im Stil der iPhone-Nachrichten-App.
   Kundennachrichten blau rechts, Sonora grau links mit kleinem
   Sonora-Bildzeichen neben der Blase. Kein Rahmen um das Ganze.
════════════════════════════════════════════════════════════ */
:root {
  /* iOS-Nachrichtenfarben. Das Blau ist bewusst etwas dunkler als Apples
     #007AFF: weißer Text darauf erreicht nur 4,05:1 und liegt damit unter
     der Lesbarkeitsschwelle. Dieses Blau erreicht 4,93:1. */
  --imsg-in: #e9e9eb;
  --imsg-in-ink: #1c1c1e;
  --imsg-out: #0a6ce0;
  --imsg-dot: #8e8e93;
}

.stage { display: flex; flex-direction: column; }

/* Verlauf wächst von unten nach oben wie in der Nachrichten-App.
   Feste Mindesthöhe, damit beim Wachsen nichts springt. */
/* Der Verlauf beginnt oben und wächst nach unten in den reservierten
   Platz hinein. Dadurch bleibt die Höhe des Hero konstant. */
.imsg {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .3rem;
  /* gemessener Höchstwert des längsten Gesprächs samt Zustellhinweis
     (319px) plus Reserve. Verhindert, dass der Hero seine Höhe ändert. */
  min-height: 20.5em;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", var(--font-sans);
}

.imsg-row { display: flex; align-items: flex-end; gap: .45rem; }
.imsg-row--in { justify-content: flex-start; }
.imsg-row--out { justify-content: flex-end; margin-top: .4rem; }

/* kleine Sonora neben der Blase.
   display:block ist nötig, weil beide Elemente <span> sind und ein
   Inline-Element Breite und Höhe ignorieren würde. */
.imsg-avatar { display: block; flex-shrink: 0; margin-bottom: 2px; }
.imsg-avatar .orb { --orb-size: 30px; display: block; }
.imsg-avatar .orb-ring { display: none; }

.imsg-name {
  display: block;
  font-size: .7rem;
  color: var(--ink-3);
  margin: 0 0 .2rem .8rem;
}

.imsg-bubble {
  position: relative;
  max-width: 27ch;
  padding: .5rem .8rem;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  border-radius: 18px;
  animation: bubbleIn .36s cubic-bezier(.2, 1.25, .4, 1) both;
}

.imsg-bubble--in {
  background: var(--imsg-in);
  color: var(--imsg-in-ink);
  border-bottom-left-radius: 5px;
  transform-origin: bottom left;
}
.imsg-bubble--out {
  background: var(--imsg-out);
  color: #fff;
  border-bottom-right-radius: 5px;
  transform-origin: bottom right;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: scale(.88) translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Blasen-Zipfel über eine Maske: funktioniert auf jedem Hintergrund,
   ohne die Hintergrundfarbe nachbauen zu müssen. */
.imsg-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 13px;
  height: 13px;
}
.imsg-bubble--in::after {
  left: -6px;
  background: var(--imsg-in);
  -webkit-mask: radial-gradient(circle 13px at 0 0, transparent 98%, #000 100%);
  mask: radial-gradient(circle 13px at 0 0, transparent 98%, #000 100%);
}
.imsg-bubble--out::after {
  right: -6px;
  background: var(--imsg-out);
  -webkit-mask: radial-gradient(circle 13px at 100% 0, transparent 98%, #000 100%);
  mask: radial-gradient(circle 13px at 100% 0, transparent 98%, #000 100%);
}

/* Tippanzeige: drei laufende Punkte in einer grauen Blase */
.imsg-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: .66rem .8rem;
}
.imsg-typing i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--imsg-dot);
  animation: imsgDot 1.3s ease-in-out infinite;
}
.imsg-typing i:nth-child(2) { animation-delay: .18s; }
.imsg-typing i:nth-child(3) { animation-delay: .36s; }

/* Punkte in der blauen Blase brauchen eine helle Farbe */
.imsg-typing--out i { background: rgba(255, 255, 255, .85); }

@keyframes imsgDot {
  0%, 60%, 100% { opacity: .38; transform: scale(.9); }
  30% { opacity: 1; transform: scale(1.05) translateY(-2px); }
}

/* Zustellhinweis wie in der Nachrichten-App */
.imsg-meta {
  align-self: flex-end;
  font-size: .68rem;
  color: var(--ink-3);
  margin: .1rem .35rem 0 0;
  animation: bubbleIn .3s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .imsg-bubble, .imsg-meta { animation: none; }
  .imsg-typing i { animation: none; opacity: .6; }
  .orb.is-speaking { transform: none; }
  .orb.is-speaking .orb-pulse { animation: none; }
}

@media (max-width: 960px) {
  .stage { margin-top: 1.5rem; }
  .imsg { min-height: 0; }
}

/* ── Headline-Kanalwechsler ──────────────────────────────────
   Erzählt in einem Blick: ein Assistent, alle Kanäle.
   Das letzte Wort ist eine Kopie des ersten, dadurch läuft die
   Schleife ohne sichtbaren Sprung. Die Höhe von 1.22em lässt
   Platz für die Unterlänge von "WhatsApp". */
.rotator {
  display: block;
  overflow: hidden;
  height: 1.22em;
}

.rotator-track {
  display: block;
  animation: rotatorSlide 10.5s cubic-bezier(.72, 0, .24, 1) 1.2s infinite;
}

.rotator-word {
  display: block;
  height: 1.22em;
  line-height: 1.22em;
}

/* Verschiebung in em, nicht in Prozent: Prozentwerte beziehen sich auf
   die Höhe der gesamten Wortliste, nicht auf ein einzelnes Wort. */
@keyframes rotatorSlide {
  0%, 24% { transform: translateY(0); }
  33%, 57% { transform: translateY(-1.22em); }
  66%, 90% { transform: translateY(-2.44em); }
  100% { transform: translateY(-3.66em); }
}

/* Screenreader-Text: liest die Kanäle als vollständigen Satz */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Glasschimmer über dem Hero-Foto.
   Bewusst nicht über dem Chat-Panel: dort würde der Lichtstreifen
   den Nachrichtentext überstrahlen und die Lesbarkeit senken. */
.hero-photo { position: relative; }

.hero-photo::after {
  content: "";
  position: absolute;
  inset: -20% -40%;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, .34) 48%,
    transparent 58%);
  transform: translateX(-115%);
  animation: sheen 11s ease-in-out 3s infinite;
}

@keyframes sheen {
  0% { transform: translateX(-115%); }
  22%, 100% { transform: translateX(115%); }
}

/* ── Dritte Aurora-Fläche für mehr Tiefe im Hero ─────────── */
.hero-aurora {
  position: absolute;
  top: 34%;
  right: 24%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--brand-soft), transparent 72%);
  opacity: .75;
  pointer-events: none;
  animation: drift3 26s ease-in-out infinite;
  will-change: transform;
}

@keyframes drift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-52px, 36px) scale(1.08); }
  66% { transform: translate(30px, -28px) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .rotator { height: auto; }
  .rotator-track { animation: none; }
  .rotator-word:not(:first-child) { display: none; }
  .hero-photo::after { display: none; }
  .hero-aurora { animation: none; }
}

@media (max-width: 960px) {
  .hero-aurora { display: none; }
}

/* ── Anwendungsfälle: Liste mit wanderndem Highlight ─────── */
.uc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, 1.5vw, 1.1rem);
}

/* Karte hat dauerhaft Innenabstand und eine transparente Fläche, die beim
   Hover eingefärbt wird. So entsteht kein Layoutsprung. */
.uc {
  padding: 1.1rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: transparent;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.uc:hover, .uc:focus-within {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  transform: translateY(-2px);
}

.uc-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .55rem;
}

.uc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.uc p { font-size: .93rem; color: var(--ink-2); max-width: 40ch; }
.uc .h3 { transition: color .35s ease; }

.uc:hover .uc-icon, .uc:focus-within .uc-icon {
  background: linear-gradient(135deg, var(--brand-strong), var(--brand-deep));
  border-color: transparent;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 8px 22px -6px var(--cta-dark-glow);
}
.uc:hover .h3, .uc:focus-within .h3 { color: var(--brand-text); }

/* ── Integrations-Orbit ──────────────────────────────────── */
/* Die Logo-Chips sitzen auf dem äußeren Ring und ragen konstruktionsbedingt
   über die Kreisfläche hinaus. --os lässt dafür Rand, sonst entsteht auf
   schmalen Displays horizontaler Überlauf. */
.orbit {
  --os: min(430px, 78vw);
  position: relative;
  width: var(--os);
  height: var(--os);
  margin-inline: auto;
}

.orbit-circle {
  position: absolute;
  border: 1px dashed var(--line-2);
  border-radius: 50%;
  pointer-events: none;
}
.orbit-circle--1 { inset: 19%; }
.orbit-circle--2 { inset: 4%; }

.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.orbit-rotor {
  position: absolute;
  inset: 0;
  animation: orbitSpin 48s linear infinite;
}
.orbit-rotor--rev {
  animation-duration: 64s;
  animation-direction: reverse;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  margin: -27px;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
}

.orbit-chip {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: orbitSpin 48s linear infinite reverse;
}
.orbit-rotor--rev .orbit-chip { animation-duration: 64s; animation-direction: normal; }
.orbit-chip img { width: 24px; height: 24px; object-fit: contain; }

/* ── "Teste mich"-Sektion ────────────────────────────────── */
.test-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  margin-bottom: 2.2rem;
}
.test-head .lead { text-align: center; }

.test-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  max-width: 760px;
  margin-inline: auto;
}

.demo-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.4rem;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.demo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px 140px at 0% 50%, var(--brand-soft), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.demo-card:hover {
  border-color: var(--brand-line);
  box-shadow: var(--shadow-md), 0 14px 36px -14px var(--cta-dark-glow);
  transform: translateY(-3px);
}
.demo-card:hover::before { opacity: 1; }

/* Icon-Tile mit Tiefe: Verlauf, innere Lichtkante und farbiger Schlagschatten */
.demo-card-icon {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  flex-shrink: 0;
  background: linear-gradient(150deg, var(--brand-strong), var(--brand-deep));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 8px 18px -6px var(--cta-dark-glow);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* WhatsApp bekommt seine eigene Markenfarbe, dadurch ist der Kanal sofort erkennbar */
.demo-card-icon--wa {
  background: linear-gradient(150deg, #34d977, #0f8a48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 8px 18px -6px rgba(15, 138, 72, .45);
}

/* ruhiger Lichtring, der langsam nach außen läuft */
.demo-card-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: 0;
  animation: iconRing 3.6s ease-out infinite;
}
.demo-card:nth-child(2) .demo-card-icon::after { animation-delay: 1.8s; }

@keyframes iconRing {
  0% { transform: scale(1); opacity: .5; }
  70%, 100% { transform: scale(1.32); opacity: 0; }
}

.demo-card:hover .demo-card-icon {
  transform: scale(1.06) rotate(-2deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 12px 26px -8px var(--cta-dark-glow);
}

.demo-card b { display: block; font-weight: 650; color: var(--ink); }
.demo-card span { font-size: .88rem; color: var(--ink-2); position: relative; }
.demo-card-arrow {
  margin-left: auto;
  color: var(--brand-text);
  flex-shrink: 0;
  transition: transform .25s ease;
}
.demo-card:hover .demo-card-arrow { transform: translateX(5px); }

/* Entrance-Varianten: von links/rechts hereingleiten */
.reveal.from-left { transform: translateX(-22px); }
.reveal.from-right { transform: translateX(22px); }
.reveal.from-left.is-in, .reveal.from-right.is-in { transform: none; }

@media (max-width: 640px) {
  .test-actions { grid-template-columns: 1fr; }
}

/* ── Calendly-Einbettung ─────────────────────────────────── */
/* Calendly stellt seine Buchungsseite ab etwa 980px Rahmenbreite zweispaltig
   dar (Termindetails links, Kalender rechts) und braucht dann rund 700px
   Höhe. Darunter stapelt es und wird deutlich höher. Der Rahmen war mit
   780px/580px in beiden Fällen zu klein — deshalb der Scrollbalken im
   Rahmen. Breite und Höhen sind jetzt auf die jeweilige Darstellung
   abgestimmt; zusätzlich meldet Calendly seine Inhaltshöhe per
   postMessage, siehe site.js. */
.calendly-frame {
  max-width: 1040px;
  margin-inline: auto;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.calendly-frame .calendly-inline-widget { min-width: 320px; height: 720px; }

/* Ab hier reicht die Breite nicht mehr für die zweispaltige Darstellung —
   Calendly stapelt und braucht entsprechend mehr Höhe. */
@media (max-width: 1080px) {
  .calendly-frame .calendly-inline-widget { height: 1000px; }
}
@media (max-width: 640px) {
  .calendly-frame .calendly-inline-widget { height: 1080px; }
}

/* ── "Warum Sonora"-Panel ────────────────────────────────── */
.why-panel {
  border-radius: var(--radius-panel);
  border: 1px solid var(--brand-line);
  background: linear-gradient(150deg, var(--brand-soft), var(--surface) 75%);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}
.why-panel .h2 { margin-bottom: 1rem; }
.why-panel .lead { max-width: 46ch; }
.why-panel .checks { gap: 1.15rem; }

/* ── Reduced Motion: alles Neue abschalten ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .orb-core, .orb-core::before, .orb-glow, .orb.is-speaking .orb-core { animation: none; }
  .orb-ring { display: none; }
  .wave i, .is-speaking .wave i { animation: none; transform: scaleY(.45); }
  .hero::before, .hero::after { animation: none; }
  .anim-up { animation: none; opacity: 1; transform: none; }
  .demo-panel { animation: none; }
  .orbit-rotor, .orbit-chip { animation: none; }
  .uc:hover .uc-icon, .uc:focus-within .uc-icon { transform: none; }
  .demo-card-icon::after { animation: none; opacity: 0; }
  .demo-card::before { transition: none; }
}

@media (max-width: 960px) {
  .uc-grid { grid-template-columns: 1fr 1fr; }
  .why-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .uc-grid { grid-template-columns: 1fr; }
  .orbit-item { width: 44px; height: 44px; margin: -22px; }
  .orbit-chip img { width: 20px; height: 20px; }
}

/* Mobile: teure Dauer-Animationen reduzieren */
@media (max-width: 960px) {
  .demo-panel { animation: none; }
  .hero::after { display: none; }
}

/* ===========================================================================
   SaaS-Ausbau: Produktoberfläche im Hero, Bewegung, Bedienhilfen
   Neue Klassen, additiv — bestehende Seiten bleiben unberührt.
   =========================================================================== */

/* --- Anruf-Panel: fasst das Gespräch in eine Produktoberfläche ------------ */
.callpanel {
  background: var(--gray-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.callpanel::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.callpanel-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--gray-25), var(--gray-0));
  font-size: .8rem;
}
.callpanel-live {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--brand-strong);
  letter-spacing: .04em; text-transform: uppercase; font-size: .68rem;
}
.callpanel-live i {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #16a34a; position: relative; flex: none;
}
.callpanel-live i::after {
  content: ""; position: absolute; inset: -.28rem;
  border-radius: 50%; border: 1px solid #16a34a;
  animation: cpPing 2s ease-out infinite;
}
@keyframes cpPing {
  0%   { transform: scale(.7); opacity: .9 }
  100% { transform: scale(1.5); opacity: 0 }
}
.callpanel-who { color: var(--text-muted); margin-right: auto }
.callpanel-timer {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted); font-size: .78rem;
}

.callpanel .stage { padding: 1.1rem 1.1rem .35rem }
.callpanel .imsg { min-height: 19rem }

.callpanel-foot {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1.1rem;
  border-top: 1px solid var(--line);
  background: var(--gray-25);
  font-size: .78rem; color: var(--text-muted);
}
.callpanel-foot svg { width: .95rem; height: .95rem; color: #16a34a; flex: none }

/* --- Vertrauenszeile unter den Hero-Knöpfen ------------------------------- */
.hero-trust {
  list-style: none; margin: 1.9rem 0 0; padding: 0;
  display: grid; gap: .6rem;
}
.hero-trust li {
  display: flex; align-items: center; gap: .6rem;
  font-size: .88rem; color: var(--text-muted);
}
.hero-trust svg { width: 1rem; height: 1rem; color: var(--brand); flex: none }

/* --- Lesefortschritt am oberen Rand -------------------------------------- */
.progressbar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  /* über der Kopfleiste (50), aber unter dem Einwilligungs-Dialog (101) */
  z-index: 60; background: transparent; pointer-events: none;
}
.progressbar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--blue-700));
  transition: width .1s linear;
}

/* --- Kompakte Aktionsleiste, sobald der Hero weggescrollt ist ------------- */
.stickycta {
  /* unter dem Einwilligungs-Dialog (101), sonst liegt sie darüber */
  position: fixed; z-index: 90;
  left: 50%; bottom: clamp(1rem, 3vh, 1.5rem);
  transform: translate(-50%, 150%);
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem .8rem .7rem 1.3rem;
  background: var(--gray-950); color: var(--gray-0);
  border-radius: 100px;
  box-shadow: 0 18px 40px -18px rgba(11, 18, 32, .65);
  transition: transform .55s cubic-bezier(.22,.8,.3,1);
  max-width: calc(100% - 2rem);
}
.stickycta.is-in { transform: translate(-50%, 0) }
.stickycta p { margin: 0; font-size: .88rem; font-weight: 500; white-space: nowrap }
.stickycta .btn { flex: none }
@media (max-width: 640px) {
  .stickycta { gap: .6rem; padding-left: 1rem; width: calc(100% - 2rem); justify-content: space-between }
  .stickycta p { white-space: normal; font-size: .8rem }
}

/* --- Gestaffeltes Einblenden von Karten-Gruppen --------------------------- */
.stagger > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.8,.3,1), transform .7s cubic-bezier(.22,.8,.3,1);
}
.stagger.is-in > * { opacity: 1; transform: none }
.stagger.is-in > *:nth-child(1) { transition-delay: 0ms }
.stagger.is-in > *:nth-child(2) { transition-delay: 70ms }
.stagger.is-in > *:nth-child(3) { transition-delay: 140ms }
.stagger.is-in > *:nth-child(4) { transition-delay: 210ms }
.stagger.is-in > *:nth-child(5) { transition-delay: 280ms }
.stagger.is-in > *:nth-child(6) { transition-delay: 350ms }

/* --- Zahlen, die hochzählen ---------------------------------------------- */
[data-count] { font-variant-numeric: tabular-nums }

/* --- Ersatzinhalt, wenn der Kalender-Einbau nicht lädt -------------------- */
.calendly-fallback {
  display: none;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.calendly-frame.is-empty { min-height: 0 }
.calendly-frame.is-empty .calendly-inline-widget { display: none }
.calendly-frame.is-empty .calendly-fallback { display: block }
.calendly-fallback p { color: var(--text-muted); margin: .6rem auto 1.6rem; max-width: 46ch }

@media (prefers-reduced-motion: reduce) {
  .callpanel-live i::after { animation: none }
  .progressbar span { transition: none }
  .stickycta { transition: none }
  .stagger > * { opacity: 1; transform: none; transition: none }
}

/* ===========================================================================
   Bestehender Fehler: seitliches Scrollen auf schmalen Schirmen
   Die Umlaufbahn dreht sich; das umschließende Rechteck eines gedrehten
   Quadrats ist bis zu 1,41-mal so breit wie das Quadrat selbst. Dieses
   unsichtbare Rechteck machte die Seite bei 390 px um 23 px zu breit.
   'clip' schneidet nur das Phantom-Rechteck ab, nichts Sichtbares.
   =========================================================================== */
#integrationen { overflow-x: clip }

/* ===========================================================================
   Überarbeitung: Farbflächen, Kopfleiste, Chat-Panel, zentrierte Überschriften
   =========================================================================== */

/* --- 1 · Farbflächen ------------------------------------------------------
   Vorher: neutrales Grau (#f9fafb) und schwarzgraue Schatten. Das wirkt
   stumpf. Jetzt leicht kühl getönte Flächen und Schatten in der Markenfarbe —
   dadurch stehen Weiß, Fläche und Blau in einer Familie. */
:root {
  --surface-2: #f4f7fb;          /* statt neutralem Grau */
  --surface-3: #eef3fa;          /* zweite, tiefere Stufe */
  --line: #e2e8f2;               /* Linien kühler statt grau */
  --line-2: #ccd7e8;

  /* Schatten in Markenfarbe statt Schwarzgrau — wirkt sauberer auf Blau */
  --shadow-sm: 0 1px 2px rgba(20, 52, 102, .06);
  --shadow-md: 0 2px 6px rgba(20, 52, 102, .05), 0 14px 28px -10px rgba(20, 52, 102, .12);
  --shadow-lg: 0 4px 10px rgba(20, 52, 102, .05), 0 30px 60px -18px rgba(20, 52, 102, .20);
  --shadow-panel:
    0 1px 1px rgba(20, 52, 102, .04),
    0 4px 8px rgba(20, 52, 102, .05),
    0 18px 30px -12px rgba(20, 52, 102, .12),
    0 48px 80px -32px rgba(20, 52, 102, .26);
}

/* Abgesetzte Abschnitte bekommen zusätzlich eine Haarlinie — der Übergang
   war bei so geringem Helligkeitsunterschied sonst kaum zu erkennen. */
.section--alt {
  background: var(--surface-2);
  border-block: 1px solid var(--line);
}

/* --- 2 · Überschriften zentriert ---------------------------------------- */
.section-head {
  margin-inline: auto;
  text-align: center;
}
.section-head .lead { margin-inline: auto }

/* Die Knopfreihe im einspaltigen Hero (Branchen- und Regionalseiten) sitzt
   direkt im .section-head. Sie folgt dem text-align darüber aber nicht:
   .hero-cta ist ein Flex-Container, und auf dessen Kinder wirkt text-align
   nicht — sie richten sich nach justify-content, das ohne Angabe
   flex-start ist. Die Knöpfe standen dadurch linksbündig unter mittiger
   Überschrift.
   Direktes Kind (>), damit die Regel nicht auf die Knopfreihe im
   Abschluss-Band greift; die zentriert sich bereits über .cta-band. */
.section-head > .hero-cta { justify-content: center; }

/* --- 3 · Zweispaltige Abschnitte auf schmalen Schirmen -------------------
   .split und .why-panel klappen bei 960 px auf eine Spalte um. Die
   Textspalte behielt dabei aber ihre linksbündige Ausrichtung aus dem
   zweispaltigen Zustand, während jeder Abschnitt mit .section-head mittig
   steht. Auf dem Telefon standen dadurch abwechselnd zentrierte und
   linksbündige Überschriften untereinander — etwa "Verbindet sich mit
   deinen Systemen" auf der Startseite.

   Zentriert wird nur das erste Kind: Das ist in allen Vorkommen die
   Textspalte mit Überschrift, Lead und gegebenenfalls einem Knopf. Die
   zweite Spalte trägt Häkchenlisten oder Grafiken. Eine zentrierte Liste
   mit vorangestellten Symbolen läse sich schlechter, nicht besser —
   deshalb bleibt sie linksbündig.

   Auf dem Desktop ändert sich nichts: Dort steht der Text neben der
   Grafik, und linksbündig ist dort die richtige Wahl. */
@media (max-width: 960px) {
  .split > :first-child,
  .why-panel > :first-child {
    text-align: center;
  }
  .split > :first-child .lead,
  .why-panel > :first-child .lead {
    margin-inline: auto;
  }
}

/* --- 4 · Nischen-Auswahl in der Kopfleiste ------------------------------ */
.nav-drop { position: relative }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  padding: 0;
}
.nav-drop-btn svg { width: .85rem; height: .85rem; transition: transform .25s ease }
.nav-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg) }

.nav-drop-menu {
  position: absolute; top: calc(100% + 1.1rem); left: 50%;
  transform: translateX(-50%);
  min-width: 17rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: .5rem;
  display: grid; gap: 1px;
  z-index: 60;
}
.nav-drop-menu[hidden] { display: none }
.nav-drop-menu a {
  display: block; padding: .6rem .8rem;
  border-radius: 8px;
  font-size: .92rem; color: var(--ink-2); text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.nav-drop-menu a:hover { background: var(--surface-2); color: var(--ink) }
.nav-drop-menu a b { display: block; font-weight: 600; color: var(--ink) }
.nav-drop-menu a small { display: block; font-size: .78rem; color: var(--ink-3); margin-top: .1rem }
.nav-drop-all {
  margin-top: .3rem; border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px !important;
  color: var(--brand-text) !important; font-weight: 600;
}

/* --- 5 · Chat-Panel: deutlich vom Hintergrund abgehoben ----------------- */
.callpanel {
  background: linear-gradient(180deg, #fff, var(--surface-2) 140%);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-panel);
  transform: perspective(1400px) rotateY(-3.2deg) rotateX(1.4deg);
  transform-origin: 60% 50%;
  transition: transform .7s cubic-bezier(.22,.8,.3,1), box-shadow .7s cubic-bezier(.22,.8,.3,1);
}
/* Beim Überfahren stellt sich das Panel gerade — kleine Belohnung, die zeigt,
   dass es eine Oberfläche und kein Bild ist. */
.callpanel:hover {
  transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-4px);
  box-shadow:
    0 2px 2px rgba(20, 52, 102, .04),
    0 8px 16px rgba(20, 52, 102, .06),
    0 28px 44px -14px rgba(20, 52, 102, .16),
    0 64px 100px -36px rgba(20, 52, 102, .30);
}
/* weicher Lichtschein hinter dem Panel, damit es aus der Fläche heraustritt */
.hero-media { isolation: isolate }
.hero-media::after {
  content: "";
  position: absolute; z-index: -1;
  left: 8%; right: 8%; bottom: -6%; height: 42%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 127, 224, .22), transparent 72%);
  filter: blur(18px);
  pointer-events: none;
}
.callpanel-head {
  background: linear-gradient(180deg, #fff, #f8fafd);
  border-bottom: 1px solid var(--line);
}
.callpanel-foot {
  background: linear-gradient(180deg, #f8fafd, #f2f6fc);
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  /* auf dem Handy gerade stellen — gekippt wirkt es dort schief, nicht edel */
  .callpanel, .callpanel:hover { transform: none }
}
@media (prefers-reduced-motion: reduce) {
  .callpanel { transition: none }
  .callpanel, .callpanel:hover { transform: none }
}

/* Sicherung gegen seitliches Scrollen: Einblend-Animationen starten außerhalb
   des Bildes, das Laufband ist absichtlich überbreit, und die gedrehte
   Umlaufbahn hat ein zu breites Hüllrechteck. 'clip' schneidet nur ab, ohne
   einen Scrollbereich zu erzeugen — 'hidden' würde die mitlaufende
   Kopfleiste (position: sticky) außer Funktion setzen. */
.section, .channels { overflow-x: clip }

/* ===========================================================================
   Farbrichtung C · Anthrazit & Elektroblau

   Wichtig: --brand-strong/--brand-deep bleiben BLAU. An diesen beiden Tokens
   hängen Chat-Blasen, Häkchen, Schritt-Nummern, der „Sonora“-Chip und die
   Symbolkacheln. Wären sie anthrazit, verlöre die Seite jede Farbe.
   Für das dunkle Blech (Knöpfe, Markenzeichen) gibt es eigene Tokens.
   =========================================================================== */
/* Die Blautöne gelten nur für Seiten ohne eigenes Thema. Die Beauty-Seite
   trägt data-theme="gold" und behält ihre Goldpalette. */
:root:not([data-theme]) {
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-deep: #1b3a8f;
  --brand-text: #1d4ed8;        /* 6,3:1 auf Weiß, erfüllt AA für kleine Schrift */
  --brand-soft: #eaf0ff;
  --brand-tint: #dbe6ff;
  --brand-line: #cddcff;

  /* Anthrazit — nur Knöpfe und Markenzeichen */
  --chrome: #2b3038;
  --chrome-deep: #14181e;
}

/* Flächen, Linien, Schrift und Schatten gelten für beide Themen. */
:root {
  --ink: #0f1319;
  --ink-2: #333b47;
  --ink-3: #5f6875;

  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --surface-3: #edf0f5;
  --line: #e2e6ec;
  --line-2: #cbd2dc;

  --cta-dark-bg: #0f1319;
  --cta-dark-glow: rgba(37, 99, 235, .26);

  --shadow-sm: 0 1px 2px rgba(15, 19, 25, .06);
  --shadow-md: 0 2px 6px rgba(15, 19, 25, .05), 0 14px 28px -10px rgba(15, 19, 25, .12);
  --shadow-lg: 0 4px 10px rgba(15, 19, 25, .05), 0 30px 60px -18px rgba(15, 19, 25, .20);
  --shadow-panel:
    0 1px 1px rgba(15, 19, 25, .04),
    0 4px 8px rgba(15, 19, 25, .05),
    0 18px 30px -12px rgba(15, 19, 25, .12),
    0 48px 80px -32px rgba(15, 19, 25, .24);
  --ring: 0 0 0 3px var(--brand-tint);
}

/* Knöpfe und Markenzeichen in Anthrazit, mit Lichtkante oben — das
   „Glänzende“, das der flachen Vollfläche gefehlt hat. */
:root:not([data-theme]) .btn--primary {
  background: linear-gradient(135deg, var(--chrome), var(--chrome-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 1px 2px rgba(15, 19, 25, .18),
    0 8px 18px -8px rgba(15, 19, 25, .34);
}
:root:not([data-theme]) .btn--primary:hover {
  background: linear-gradient(135deg, #333944, var(--chrome-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 2px 4px rgba(15, 19, 25, .2),
    0 14px 26px -10px rgba(15, 19, 25, .4);
}
:root:not([data-theme]) .nav-logo-mark {
  background: linear-gradient(135deg, var(--chrome), var(--chrome-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 6px rgba(15, 19, 25, .28);
}

/* Symbolkachel bleibt blau — neben der grünen WhatsApp-Kachel wirkte
   Anthrazit wie ein Fehler, und die Seite verlor ihren Farbklang. */
/* :not(...) — sonst überschreibt diese Regel die grüne WhatsApp-Kachel,
   weil sie später im Stylesheet steht. */
:root:not([data-theme]) .demo-card-icon:not(.demo-card-icon--wa) {
  background: linear-gradient(150deg, #3b82f6, var(--brand-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 8px 18px -6px rgba(37, 99, 235, .45);
}

.callpanel-live { color: var(--brand-text) }
.progressbar span { background: linear-gradient(90deg, var(--brand), var(--brand-deep)) }
.hero-media::after { background: radial-gradient(closest-side, rgba(37, 99, 235, .2), transparent 72%) }
.section--alt { background: var(--surface-2); border-block: 1px solid var(--line) }

/* ===========================================================================
   Farbabgleich C · Nachzügler
   =========================================================================== */

/* Knopf in der Kopfleiste: '.nav-links a' (0,1,1) schlug '.btn--primary'
   (0,1,0) und färbte die Schrift dunkel. Weiß kam nur über die Hover-Regel.
   '.nav-links .btn' hat (0,2,0) und gewinnt in beiden Zuständen. */
.nav-links .btn { color: #fff }
.nav-links .btn--secondary { color: var(--ink) }

/* Sprechblase des Anrufers auf den neuen Blauton. Die graue Blase von Sonora
   bleibt unverändert. */
:root:not([data-theme]) { --imsg-out: #2563eb }

/* Gefüllte Markenflächen in Anthrazit wie Knöpfe und Markenzeichen */
:root:not([data-theme]) .channel-core {
  background: linear-gradient(135deg, var(--chrome), var(--chrome-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow-md);
}
:root:not([data-theme]) .demo-card-icon:not(.demo-card-icon--wa) {
  background: linear-gradient(150deg, var(--chrome), var(--chrome-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 8px 18px -6px rgba(15, 19, 25, .38);
}
/* Symbol sicher weiß — die Kachel erbte sonst die Textfarbe der Karte */
.demo-card-icon svg { color: #fff; stroke: currentColor }

/* ===========================================================================
   Flächenwirkung: Material, Licht und Tiefe statt flachem Grau
   ---------------------------------------------------------------------------
   Vorher lagen die abgesetzten Abschnitte als eine einzige, absolut ebene
   Fläche (#f4f7fb) zwischen weißen Abschnitten, getrennt durch eine harte
   Haarlinie. Große, völlig gleichmäßige Flächen wirken auf Bildschirmen
   billig: es fehlt jede Materialität, und in flachen Verläufen wird die
   Farbabstufung sichtbar (Banding). Vier Eingriffe, alle unterhalb der
   Wahrnehmungsschwelle für einzelne Pixel, in Summe aber deutlich:

     1. Korn  — ein feines, farbloses Rauschen als oberste Hintergrundebene.
     2. Licht — die Fläche wird von oben aufgehellt und nach unten leicht
                abgesetzt, dazu zwei sehr große, sehr blasse Markenschimmer.
     3. Kante — statt einer durchgehenden 1px-Linie eine Haarlinie, die zu
                den Rändern hin ausläuft.
     4. Raster — ein kaum sichtbares Punktraster in den leeren Randzonen der
                Abschnitte mit schmalem, zentriertem Inhalt.
   =========================================================================== */

:root {
  /* Farbloses Korn (feColorMatrix saturate 0), gekachelt über 160px.
     Die Stärke steckt in der opacity des Rechtecks — nicht am Element
     regeln, sonst müsste eine zusätzliche Ebene darüberliegen. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");

  /* Markenschimmer und Rasterpunkt als Token, damit die Gold-Branchenseite
     nicht plötzlich blau leuchtet. */
  --glow-1: rgba(43, 127, 224, .075);
  --glow-2: rgba(43, 127, 224, .055);
  --grid-dot: rgba(20, 52, 102, .07);

  --alt-top: #f9fcff;
  --alt-mid: var(--surface-2);
  --alt-bottom: #eff4fb;
}

[data-theme="gold"] {
  --glow-1: rgba(193, 154, 63, .10);
  --glow-2: rgba(193, 154, 63, .07);
  --grid-dot: rgba(109, 82, 26, .09);
  --alt-top: #fefcf7;
  --alt-mid: #faf6ec;          /* warm — --surface-2 ist kühl und würde
                                  die Mitte des Verlaufs ins Blaue ziehen */
  --alt-bottom: #f6f1e6;
}

/* --- 1+2 · Abgesetzte Flächen: Korn, Licht von oben, zwei Schimmer -------- */
.section--alt,
.channels {
  position: relative;
  border-block: 0;
  background:
    var(--grain),
    radial-gradient(900px 420px at 12% -15%, var(--glow-1), transparent 62%),
    radial-gradient(760px 400px at 88% 115%, var(--glow-2), transparent 62%),
    linear-gradient(180deg, var(--alt-top) 0%, var(--alt-mid) 45%, var(--alt-bottom) 100%);
}

/* Das schmale Kanal-Band braucht den vollen Verlauf nicht — es ist zu
   niedrig, um ihn zu zeigen, und würde nur oben hell abreißen. */
.channels {
  background:
    var(--grain),
    radial-gradient(620px 220px at 50% -40%, var(--glow-1), transparent 64%),
    linear-gradient(180deg, var(--alt-mid), var(--alt-bottom));
}

/* Weiße Abschnitte bekommen dasselbe Korn, damit das Material über die
   ganze Seite hinweg gleich bleibt. */
.section:not(.section--alt),
.hero {
  background-image: var(--grain);
}
.hero {
  background-image:
    var(--grain),
    radial-gradient(900px 480px at 85% -10%, var(--brand-soft), transparent 65%);
}

/* --- 3 · Kanten, die zu den Rändern hin auslaufen ------------------------- */
.section--alt::before,
.section--alt::after,
.channels::before,
.channels::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.section--alt::before, .channels::before { top: 0; }
.section--alt::after,  .channels::after  { bottom: 0; }

/* --- 4 · Punktraster in den leeren Randzonen ------------------------------
   Nur dort, wo der Inhalt schmal und mittig sitzt und links und rechts
   große leere Flächen bleiben. Die Maske blendet das Raster zur Mitte hin
   vollständig aus, damit es nie hinter Text liegt. */
#teste-mich,
#termin,
#faq {
  position: relative;
  isolation: isolate;
}
#teste-mich > .bg-grid,
#termin > .bg-grid,
#faq > .bg-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(62% 78% at 50% 50%, transparent 42%, #000 100%);
          mask-image: radial-gradient(62% 78% at 50% 50%, transparent 42%, #000 100%);
}

/* Unter 1100px gibt es keine leeren Randzonen mehr — das Raster käme dem
   Inhalt zu nah und würde als Störung gelesen. */
@media (max-width: 1100px) {
  #teste-mich > .bg-grid,
  #termin > .bg-grid,
  #faq > .bg-grid { display: none; }
}

/* --- 5 · Dunkles Abschlussband ------------------------------------------- */
/* Auf dunklen Flächen ist Banding am sichtbarsten; hier darf das Korn
   kräftiger sein. */
.cta-band {
  background:
    var(--grain-dark),
    radial-gradient(640px 320px at 50% -10%, var(--cta-dark-glow), transparent 65%),
    var(--cta-dark-bg);
}

/* ===========================================================================
   Nachschärfung zur Flächenwirkung: erhabene Karten, Lichtquelle hinter der
   Umlaufbahn, verankerter Kalender
   =========================================================================== */

:root {
  --card-bottom: #fbfcfe;
  /* Eigener, kräftigerer Wert als --glow-1: hier ist der Schein das einzige,
     was die große leere Fläche neben dem Text füllt. */
  --glow-orb: rgba(43, 127, 224, .12);
}
[data-theme="gold"] {
  --card-bottom: #fdfbf6;
  --glow-orb: rgba(193, 154, 63, .16);
}

/* --- 1 · Karten bekommen Körper ------------------------------------------
   Eine weiße Karte auf hellgrauer Fläche, getrennt nur durch eine 1px-Linie,
   liest sich als ausgeschnittenes Rechteck — nicht als Objekt, das auf der
   Fläche liegt. Ein ruhender Schatten und ein Hauch Verlauf im Inneren
   geben ihr Tiefe, ohne dass die Karte lauter wird. Die kräftigeren
   Hover-Schatten stehen weiter oben und gewinnen über die Spezifität. */
.card,
.faq,
.demo-card,
.mq-chip {
  background-image: linear-gradient(180deg, var(--surface-raised), var(--card-bottom));
}
.card,
.faq,
.demo-card {
  box-shadow: var(--shadow-sm);
}

/* --- 2 · Lichtquelle hinter der Umlaufbahn -------------------------------
   Der Abschnitt "Verbindet sich mit deinen Systemen" ist die letzte große
   leere Fläche. Ein weicher Schein hinter der Umlaufbahn füllt sie, ohne
   Inhalt hinzuzufügen, und macht die Kugel zur Lichtquelle der Szene. */
.orbit::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-orb), transparent 70%);
}

/* --- 3 · Kalender verankern ----------------------------------------------
   Ein großes helles Rechteck auf heller Fläche hatte nur den mittleren
   Schatten und schwebte dadurch unentschieden. Der Panel-Schatten stellt
   es als eigenständige Ebene auf die Seite. */
.calendly-frame {
  box-shadow: var(--shadow-panel);
}

/* ===========================================================================
   Farbabgleich D · Abschnittsfläche und Chat-Blasen
   ---------------------------------------------------------------------------
   Gemessen in OKLCh, weil sich Helligkeit, Sättigung und Farbton dort
   getrennt beurteilen lassen — in Hex sieht man keinen der drei Fehler:

     · Die Fläche lag bei Helligkeit 97,2, Weiß liegt bei 100. Knapp drei
       Punkte Abstand liest man nicht als Entscheidung, sondern als Zufall.
       Jetzt 96,4 — der Abstand verdoppelt sich, die Fläche wird gewollt.
     · Der Verlauf war in sich unsauber: Sättigung 0,005 → 0,0045 → 0,011,
       Farbton dabei von 248° auf 257°. Jetzt monoton 0,007 → 0,009 → 0,010
       bei durchgehend 255°.
     · 255° ist exakt der Farbton der Marke. Das Grau ist damit kein
       fremdes Neutral, sondern eine stark abgeschwächte Markenfarbe.
     · Die Chat-Blase war Apples #e9e9eb: Farbton 286°, Sättigung 0,003 —
       also außerhalb dieser Palette. Neben der blauen Blase (Sättigung
       0,19) las sie sich wie „ausgegraut“. Jetzt derselbe Farbton wie alles
       andere, damit sie als zweite Stimme auftritt. Die Schreibpunkte
       ziehen mit, sie standen ebenfalls auf 286°.

   Vergleich aller geprüften Varianten: /neu/_farbvorschlaege-flaechen.html
   =========================================================================== */

:root {
  --surface-2: #eff4f9;   /* L 96,4  C 0,009  H 255 */
  --surface-3: #ebf0f6;   /* L 95,2  C 0,010  H 255 */
  --line:      #dee5ed;   /* L 91,8  C 0,014  H 255 */
  --line-2:    #c9d3df;   /* L 86,2  C 0,020  H 255 */

  --alt-top:    #f6fafe;  /* L 98,3  C 0,007  H 255 */
  --alt-mid:    var(--surface-2);
  --alt-bottom: #eaeff5;  /* L 95,0  C 0,010  H 255 */
  --card-bottom: #fbfdff; /* L 99,2  C 0,004  H 255 */

  --imsg-in:     #dfe6ee; /* L 92,1  C 0,014  H 255 */
  --imsg-in-ink: #17212f; /* 13,6:1 auf der Blase */
  --imsg-dot:    #7d8794; /* L 62,0  C 0,022  H 255 */
}

/* Die Gold-Branchenseite steht weiter oben im Stylesheet und würde vom Block
   darüber überschrieben (gleiche Spezifität, spätere Regel gewinnt). Hier
   dieselbe Helligkeits- und Sättigungstreppe, nur auf Farbton 92° gedreht. */
[data-theme="gold"] {
  --alt-top:     #fbf9f6;  /* L 98,3  C 0,005  H 92 */
  --alt-mid:     #f5f3ee;  /* L 96,4  C 0,007  H 92 */
  --alt-bottom:  #f0eee9;  /* L 95,0  C 0,008  H 92 */
  --card-bottom: #fdfcfa;  /* L 99,2  C 0,003  H 92 */

  --imsg-in:     #e7e5de;
  --imsg-in-ink: #211e18;
  --imsg-dot:    #8a867a;
}

/* ===========================================================================
   Höhenstaffel · Tiefe über Licht statt über Linien
   ---------------------------------------------------------------------------
   Die getönten Flächen bleiben (sie tragen den Kapitelrhythmus über zwölf
   Bildschirmhöhen), die Container bekommen dafür echte Höhe.

   Der entscheidende Punkt: ein einzelner mittlerer Schatten sieht immer nach
   Aufkleber aus. Glaubwürdige Höhe braucht zwei Schatten — einen engen,
   dunklen Kontaktschatten direkt unter dem Objekt, der es am Boden
   verankert, und einen weiten, hellen Umgebungsschatten als Streulicht des
   Raums. Ab Stufe 2 kommt eine dritte, sehr weite Ebene dazu.

   Die Schattenfarbe ist nicht Schwarz, sondern abgedunkeltes Markenblau.
   Neutrales Grau wirkt auf hellen Flächen schmutzig, weil ihm der Farbton
   der Umgebung fehlt.
   =========================================================================== */

:root {
  --h0:                                      /* Chips, kleine Pillen */
    0 1px 1px rgba(20, 52, 102, .05),
    0 2px 6px -2px rgba(20, 52, 102, .08);
  --h1:                                      /* Karten in Ruhe */
    0 1px 2px rgba(20, 52, 102, .07),
    0 4px 12px -4px rgba(20, 52, 102, .10);
  --h2:                                      /* Karten im Hover, große Flächen */
    0 1px 2px rgba(20, 52, 102, .06),
    0 8px 20px -6px rgba(20, 52, 102, .12),
    0 24px 48px -20px rgba(20, 52, 102, .16);
  --h3:                                      /* Panels: Chat, Kalender */
    0 1px 2px rgba(20, 52, 102, .05),
    0 12px 28px -8px rgba(20, 52, 102, .13),
    0 40px 72px -28px rgba(20, 52, 102, .22);

  --kante: rgba(16, 40, 82, .09);

  /* Der Verlauf im Inneren der Container ist der eigentliche 3D-Anteil:
     oben reines Weiß, unten leicht abgesetzt. Die Karte sieht dadurch aus,
     als würde sie von oben angeleuchtet, statt eine gleichmäßig helle
     Platte zu sein. Deutlich tiefer als der bisherige Wert. */
  --card-bottom: #f7fafd;
}

[data-theme="gold"] {
  --h0:
    0 1px 1px rgba(80, 60, 24, .05),
    0 2px 6px -2px rgba(80, 60, 24, .08);
  --h1:
    0 1px 2px rgba(80, 60, 24, .07),
    0 4px 12px -4px rgba(80, 60, 24, .10);
  --h2:
    0 1px 2px rgba(80, 60, 24, .06),
    0 8px 20px -6px rgba(80, 60, 24, .12),
    0 24px 48px -20px rgba(80, 60, 24, .16);
  --h3:
    0 1px 2px rgba(80, 60, 24, .05),
    0 12px 28px -8px rgba(80, 60, 24, .13),
    0 40px 72px -28px rgba(80, 60, 24, .22);

  --kante: rgba(64, 48, 18, .10);
  --card-bottom: #faf7f1;
}

/* --- Stufe 0 · Chips ----------------------------------------------------- */
.channel-chip,
.mq-chip {
  background-image: linear-gradient(180deg, var(--surface-raised), var(--card-bottom));
  border-color: var(--kante);
  box-shadow: var(--h0);
}

/* --- Stufe 1 · Karten ---------------------------------------------------- */
.card,
.faq,
.demo-card,
.bento-feature {
  border-color: var(--kante);
  box-shadow: var(--h1);
}
.bento-feature { border-color: var(--brand-line); }

.card:hover,
.bento-feature:hover { box-shadow: var(--h2); }
.demo-card:hover { box-shadow: var(--h2), 0 14px 36px -14px var(--cta-dark-glow); }

/* --- Stufe 2 · Große Flächen --------------------------------------------- */
.why-panel,
.calc-body { box-shadow: var(--h2); }

/* --- Stufe 3 · Panels ---------------------------------------------------- */
.callpanel,
.calendly-frame { box-shadow: var(--h3); }

/* --- Bodenkontakt für Symbolkacheln --------------------------------------
   Sie hatten nur eine innere Lichtkante und schwebten dadurch in der Karte,
   statt auf ihr aufzuliegen. */
.card-icon,
.uc-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 6px -2px rgba(20, 52, 102, .18);
}

/* --- Text ----------------------------------------------------------------
   Bewusst nur hier: auf hellem Grund kostet ein Textschatten Kontrast und
   wirkt veraltet. Auf der dunklen Fläche dagegen ist das kein Schlagschatten,
   sondern die Kante, an der Licht von oben auf eine erhabene Form trifft. */
.cta-band .h2 {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .16),
    0 2px 12px rgba(0, 0, 0, .35);
}

/* ===========================================================================
   Flächen auf Weiß · Gliederung allein über Höhe
   ---------------------------------------------------------------------------
   Die abgesetzten Abschnitte und das Kanalband werden weiß. Die Seite ist
   damit ein durchgehendes Blatt, auf dem die Container liegen — die
   Höhenstaffel darüber trägt die gesamte Gliederung.

   Zwei Dinge bleiben bewusst erhalten:

     · Das Korn. Ohne es bekommt man zwölf Bildschirmhöhen reines #ffffff,
       und genau daran erkennt man unfertige Seiten.
     · Die auslaufende Haarlinie. Sie ist jetzt die einzige verbliebene
       Kapitelmarke; ohne sie verschmelzen die Abschnitte zu einer
       endlosen Bahn. Sie wird aber leiser, weil sie allein steht.

   Nicht betroffen sind die getönten Zonen *innerhalb* von Containern
   (.demo-head, .calc-res, der Verlauf im Chat-Panel, der Menü-Hover) —
   die geben ihren Panels die Binnengliederung und sind keine Seitenflächen.
   =========================================================================== */

.section--alt,
.channels {
  background: var(--grain), var(--surface);
}

.section--alt::before, .section--alt::after,
.channels::before,    .channels::after {
  background: linear-gradient(90deg, transparent, var(--kante), transparent);
}

/* ===========================================================================
   Höhenstaffel · Nachtrag für die Unterseiten
   ---------------------------------------------------------------------------
   Die Staffel weiter oben deckte nur die Bausteine der Startseite ab. Die
   Unterseiten (KI-Telefonassistent, WhatsApp-KI, Beauty-Studios) haben
   eigene Container, die dadurch flach auf der jetzt weißen Fläche lagen:

     .step        die drei Schritt-Karten — hatten überhaupt keinen Schatten
     .demo-panel  das Demo-Panel im Hero — hing noch am alten --shadow-lg
     .hero-photo  das Studio-Bild der Beauty-Seite — dito
     .checks .ck  die Häkchen-Kreise — ohne Bodenkontakt

   Auf Weiß fällt das doppelt auf: dort trennt nur noch der Schatten.
   =========================================================================== */

/* Schritt-Karten auf Kartenhöhe, mit demselben Innenverlauf wie alle
   anderen Container. */
.step {
  background-image: linear-gradient(180deg, var(--surface-raised), var(--card-bottom));
  border-color: var(--kante);
  box-shadow: var(--h1);
}

/* Die beiden Hero-Objekte der Unterseiten auf Panel-Höhe — sie entsprechen
   dem Chat-Panel der Startseite. Der farbige Schein bleibt: er trennt sie
   vom rein neutralen Schatten der Karten darunter. */
.demo-panel {
  box-shadow: var(--h3), 0 24px 64px -20px var(--cta-dark-glow);
}
.hero-photo {
  border-color: var(--kante);
  box-shadow: var(--h3), 0 24px 64px -20px var(--cta-dark-glow);
}

/* Häkchen-Kreise wie die Symbolkacheln: innere Lichtkante plus
   Bodenkontakt, damit sie auf der Fläche aufliegen. */
.checks .ck {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 1px 3px -1px rgba(20, 52, 102, .22);
}

/* Auf der Goldseite hatte das Studio-Bild einen blauen Schein: --cta-dark-glow
   wird oben im Gold-Block warm gesetzt, ein späterer :root-Block für "beide
   Themen" überschreibt ihn aber wieder mit Blau. Der Token wird an zwei
   Stellen zugleich gebraucht — für den blauen Hof der Sonora-Kugel (dort ist
   Blau richtig, die Kugel ist auf beiden Seiten blau) und als Akzentschein
   der Seite. Deshalb hier nur das Bild korrigiert statt den Token; die Kugel
   bleibt unangetastet. */
[data-theme="gold"] .hero-photo {
  box-shadow: var(--h3), 0 24px 64px -20px rgba(193, 154, 63, .32);
}

/* ===========================================================================
   Terminseite
   =========================================================================== */

/* Der Hero dieser Seite ist einspaltig und mittig — .section-head ist auf
   640px ausgelegt, was für eine H1 zu eng wird. */
.hero .section-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }

/* Merkmalszeile unter der Überschrift. Nutzt die Chips des Kanalbands, damit
   kein zweites Pillen-Muster entsteht. */
.termin-marken {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.5rem, 1.2vw, .8rem);
}

/* Kopfblock über dem Kalender. Ersetzt das, was Calendly sonst im iframe
   zeigt (Name, Dauer, Format, Beschreibung) — dort ließ es sich nicht
   zentrieren, hier schon. Reihenfolge wie bei Calendly: Überschrift, dann
   die Eckdaten, dann der Text. */
.termin-kopf {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.termin-kopf .h2 { margin-bottom: 1.1rem; }
.termin-kopf .termin-marken { margin-bottom: 1.2rem; }
.termin-kopf p {
  max-width: 62ch;
  margin-inline: auto;
  color: var(--ink-2);
  font-size: clamp(.98rem, 1.2vw, 1.05rem);
}

/* Auf Telefonbreite lief der Absatz über neun zentrierte Zeilen. Zentrierter
   Fließtext hat an beiden Rändern einen flatternden Ansatz; das Auge verliert
   beim Zeilenwechsel den Einstieg. Ab hier linksbündig — Überschrift und
   Pillen bleiben mittig. */
@media (max-width: 640px) {
  .termin-kopf p { text-align: left; }
}

/* Sprungziele lagen bisher unter der klebenden Kopfleiste: ein Klick auf
   "#kalender", "#branchen" oder "#faq" scrollte die Überschrift exakt hinter
   die Leiste. scroll-padding-top gehört auf den Scroll-Container, nicht auf
   die Ziele — damit gilt es für jeden Anker der Seite auf einmal. */
html { scroll-padding-top: calc(var(--nav-h) + 1rem); }

/* Mehr Luft zwischen den Punkten der Kopfleiste. Der Abstand saß bei .25rem;
   zusammen mit dem Innenabstand der Verweise standen die Beschriftungen
   dadurch fast aneinander. Erhöht wird der Zwischenraum, nicht der
   Innenabstand — sonst wächst die Hover-Fläche mit und die Leiste wirkt
   schwerer. Ab 960px übernimmt ohnehin das Klappmenü. */
.nav-links { gap: clamp(.5rem, 1.4vw, 1.15rem); }
.nav-links .btn { margin-left: clamp(.6rem, 1.2vw, 1rem); }

/* ===========================================================================
   Kalenderrahmen · neu bemessen
   ---------------------------------------------------------------------------
   Die Werte weiter oben (1040 × 720/1000/1080 px) waren auf Calendlys volle
   Darstellung ausgelegt: Termindetails links, Kalender rechts. Seit der
   Kopfblock ausgeblendet ist (hide_event_type_details=1) und die Angaben
   über dem Rahmen stehen, zeigt das iframe nur noch die Terminauswahl —
   Monatsraster, danach die Uhrzeitenspalte daneben. Das ist deutlich
   kompakter, und der alte Rahmen ließ den Kalender darin verloren wirken.

   Die drei Höhenstufen für Calendlys gestapeltes Layout entfallen damit;
   die Auswahl selbst stapelt erst auf Telefonbreite. Zusätzlich meldet
   Calendly seine Inhaltshöhe per postMessage (siehe site.js) — greift das,
   wächst der Rahmen ohnehin exakt mit.
   =========================================================================== */

.calendly-frame { max-width: 680px; }
.calendly-frame .calendly-inline-widget { height: 640px; }

@media (max-width: 1080px) {
  .calendly-frame .calendly-inline-widget { height: 640px; }
}
@media (max-width: 640px) {
  .calendly-frame .calendly-inline-widget { height: 780px; }
}

/* ===========================================================================
   Kalender: nur noch ein Kasten
   ---------------------------------------------------------------------------
   Calendly bringt im iframe eine eigene weiße Karte mit Rahmen und Radius
   mit. Zusammen mit unserem .calendly-frame standen dadurch zwei Kästen
   ineinander. Unserer zeichnet sich deshalb nicht mehr selbst — er dient nur
   noch als Breitenbegrenzung und Zentrierung. Sichtbar ist allein Calendlys
   Karte.

   Ausnahme: fällt der Kalender aus, ist auch Calendlys Karte weg. Dann
   braucht der Ersatzinhalt wieder einen eigenen Kasten — .is-empty hat die
   höhere Spezifität und holt ihn zurück.
   =========================================================================== */

.calendly-frame {
  max-width: 580px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Etwas mehr Höhe als die Monatsansicht braucht. Das kostet jetzt nichts:
   Ohne eigenen Kasten ist ungenutzte Höhe nicht mehr als leerer weißer
   Block sichtbar, sondern geht im Abschnitt auf. Nach der Tagesauswahl
   blendet Calendly die Uhrzeiten ein — bei 580px Breite untereinander
   statt daneben. Der Vorrat verhindert, dass dabei ein Scrollbalken im
   iframe auftaucht. */
.calendly-frame .calendly-inline-widget { height: 720px; }
@media (max-width: 640px) {
  .calendly-frame .calendly-inline-widget { height: 820px; }
}

.calendly-frame.is-empty {
  background: var(--surface-raised);
  border: 1px solid var(--kante);
  border-radius: var(--radius-panel);
  box-shadow: var(--h2);
}

/* ===========================================================================
   Kalender: ein Rahmen, der trägt
   ---------------------------------------------------------------------------
   Ohne eigenen Kasten stand Calendlys Karte blass auf der hellen Fläche —
   weiß auf fast weiß, ohne Kante. Der Rahmen kommt deshalb zurück, aber als
   der einzige: 'overflow: hidden' zusammen mit unserem Radius schneidet die
   eckigen Kanten des iframes auf unsere Rundung. Dadurch liegt die Karte
   nicht mehr sichtbar *in* einem zweiten Kasten, sondern die beiden fallen
   zu einem zusammen.

   Rahmen und Schatten kommen aus der Höhenstaffel der Seite, damit der
   Kalender dieselbe Tiefe hat wie Karten und Panels ringsum.
   =========================================================================== */

.calendly-frame {
  background: var(--surface-raised);
  border: 1px solid var(--kante);
  border-radius: var(--radius-panel);
  box-shadow: var(--h2);
  overflow: hidden;
}

/* ===========================================================================
   Lichtfluss über die ganze Seite
   ---------------------------------------------------------------------------
   Bisher gab es die driftende Lichtfläche nur im Hero (.hero-aurora). Jetzt
   liegt sie hinter der kompletten Seite.

   Der Haken dabei: seit die Abschnitte weiß sind, sind sie *deckend* weiß —
   eine Schicht dahinter wäre unsichtbar. Das Weiß wandert deshalb auf den
   Körper der Seite, die Abschnitte behalten nur noch ihr Korn und werden
   durchsichtig. Erst dadurch kann das Licht überhaupt durchscheinen.

   Bewegt wird ausschließlich 'transform' auf zwei festsitzenden Flächen —
   das läuft auf der Grafikkarte und löst kein Neuzeichnen aus. Über
   Hintergrundpositionen animiert müsste der Browser bei jedem Einzelbild
   die ganze Sichtfläche neu malen.
   =========================================================================== */

:root {
  --flow-1: rgba(43, 127, 224, .10);
  --flow-2: rgba(43, 127, 224, .075);
}
[data-theme="gold"] {
  --flow-1: rgba(193, 154, 63, .13);
  --flow-2: rgba(193, 154, 63, .10);
}

/* Abschnitte durchsichtig — das Weiß trägt jetzt der Seitenkörper. */
.section--alt,
.channels {
  background-color: transparent;
  background-image: var(--grain);
}
.hero { background-color: transparent; }
.footer { background-color: transparent; }

/* Die beiden Lichtflächen. z-index -1 setzt sie hinter den Inhalt, aber vor
   die weiße Fläche des Seitenkörpers. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}
body::before {
  top: -14vh;
  left: -10vw;
  width: min(78vw, 940px);
  height: min(78vw, 940px);
  background: radial-gradient(closest-side, var(--flow-1), transparent 70%);
  animation: flowA 46s ease-in-out infinite;
}
body::after {
  bottom: -20vh;
  right: -12vw;
  width: min(70vw, 860px);
  height: min(70vw, 860px);
  background: radial-gradient(closest-side, var(--flow-2), transparent 70%);
  animation: flowB 61s ease-in-out infinite;
}

/* Ungerade Laufzeiten (46s und 61s), damit die beiden nie in einen
   gemeinsamen Takt fallen und das Muster erkennbar wird. */
@keyframes flowA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(7vw, 5vh) scale(1.12); }
  66%      { transform: translate(-4vw, 9vh) scale(.94); }
}
@keyframes flowB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-8vw, -6vh) scale(1.1); }
  75%      { transform: translate(3vw, -11vh) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; }
}

/* ===========================================================================
   Rechtstexte · Impressum, Datenschutz, AGB
   ---------------------------------------------------------------------------
   Die Inhalte sind wortgleich aus den bestehenden Seiten übernommen, samt
   ihrer Klassennamen (.legal-block, .legal-content, .toc-list). Umgeschrieben
   wurde nur die Hülle — an Rechtstexten ändert man nichts, wenn man nur ein
   Layout tauscht.

   Datenschutz und AGB sind lange Fließtexte. Entscheidend dafür ist nicht
   Gestaltung, sondern Lesbarkeit: begrenzte Zeilenlänge, großzügige
   Zeilenhöhe, klare Abstufung der Überschriften.
   =========================================================================== */

/* Rechtsseiten haben keinen Bildteil — der Hero darf kürzer sein. */
.hero--schmal { padding-bottom: clamp(1rem, 2vw, 2rem); }
.hero--schmal .section-head { margin-bottom: 0; }
.hero--schmal .channel-chip { margin-bottom: 1.1rem; }

.legal-card {
  max-width: 820px;
  margin-inline: auto;
  background: var(--surface-raised);
  border: 1px solid var(--kante);
  border-radius: var(--radius-panel);
  box-shadow: var(--h1);
  overflow: hidden;
}

.legal-top {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.1rem clamp(1.4rem, 4vw, 2.6rem);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.legal-label { font-size: .9rem; font-weight: 650; color: var(--ink); }
.legal-date { font-size: .82rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.legal-content { padding: clamp(1.6rem, 4vw, 2.8rem); }

/* Abstand zwischen den Blöcken trägt die Gliederung — nicht Linien. */
.legal-block + .legal-block { margin-top: clamp(2rem, 4vw, 2.8rem); }

/* Die Datenschutzseite nummeriert ihre Abschnitte mit einem eigenen <span>
   in der Überschrift ("01", "02", …). Ohne Flex-Layout klebt die Ziffer
   direkt am Text ("01Einleitung"). Der Zwischenraum kommt deshalb aus 'gap',
   nicht aus einem Leerzeichen im Quelltext — so bleibt der Text unangetastet. */
.legal-content h2 {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.25;
  margin-bottom: .9rem;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.legal-content h2 > span {
  flex: 0 0 auto;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--brand-text);
}
.legal-content h3 {
  font-size: 1.02rem;
  font-weight: 650;
  margin: 1.6rem 0 .6rem;
  color: var(--ink);
}
.legal-content p,
.legal-content li {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 72ch;
}
.legal-content p + p { margin-top: .9rem; }
.legal-content ul,
.legal-content ol { margin: .9rem 0 .9rem 1.2rem; }
.legal-content li + li { margin-top: .45rem; }
.legal-content a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--brand-deep); }
.legal-content strong, .legal-content b { color: var(--ink); font-weight: 650; }
.legal-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.legal-content th, .legal-content td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }

/* Inhaltsverzeichnis der AGB */
.toc-block { background: var(--surface-2); border-radius: var(--radius-card); padding: 1.2rem 1.4rem; }
.toc-list { columns: 2; column-gap: 2rem; margin-left: 1.1rem; }
.toc-list li { break-inside: avoid; }
@media (max-width: 640px) { .toc-list { columns: 1; } }

/* ===========================================================================
   Klebende Aktionsleiste · kompakter
   ---------------------------------------------------------------------------
   Der lange Satz ("Hör dir Sonora einfach selbst an.") zwang die Leiste auf
   Telefonbreite über die volle Breite und in zwei Zeilen. Mit "Direkt testen"
   passt alles in eine Zeile, und die Leiste kann eine schmale Pille bleiben
   statt eines Balkens.
   =========================================================================== */

.stickycta {
  gap: .7rem;
  padding: .5rem .55rem .5rem 1.1rem;
}
.stickycta p { font-size: .84rem; }
.stickycta .btn { padding: .5rem .95rem; font-size: .84rem; }

@media (max-width: 640px) {
  .stickycta {
    width: auto;
    max-width: calc(100% - 1.5rem);
    gap: .55rem;
    padding: .4rem .45rem .4rem .95rem;
  }
  .stickycta p { white-space: nowrap; font-size: .8rem; }
  /* Zielkonflikt: die Leiste soll klein sein, der Knopf ist aber die
     Haupthandlung und lag mit 30 px unter dem Mindestmaß für Tippflächen.
     min-height statt mehr Innenabstand — der Knopf bleibt optisch schlank,
     die Fläche stimmt trotzdem. Die Leiste ist damit rund 52 px hoch statt
     der 30 px, aber immer noch gut ein Drittel niedriger als vorher, wo der
     lange Satz sie über zwei Zeilen zog. */
  .stickycta .btn { padding: .48rem .95rem; font-size: .8rem; min-height: 44px; }
}

/* ===========================================================================
   Mobil · Tippflächen
   ---------------------------------------------------------------------------
   Gemessen in einem echten 390-px-Fenster. Gefunden und hier behoben:

     · Die vier Schieberegler des Rechners waren 285 × 6 px groß. Sechs Pixel
       Höhe trifft auf einem Telefon niemand zuverlässig. Das Eingabefeld ist
       jetzt 44 px hoch, die sichtbare Bahn bleibt 6 px — gezeichnet über
       ::-webkit-slider-runnable-track statt über den Hintergrund des Feldes.
     · Menüknopf 42 × 36, Nischen-Knopf 78 × 26, Bildzeichen 90 × 26 und die
       Fußzeilenverweise 23 px hoch — alle unter dem Mindestmaß von 44 px.

   44 px ist keine gerundete Zahl, sondern das von Apple dokumentierte
   Mindestmaß; Material nennt 48 dp. Vergrößert wird die Fläche über
   Innenabstand, nicht über Schriftgröße — das Aussehen bleibt.
   =========================================================================== */

input[type=range] {
  height: 44px;
  background: transparent;
  border-radius: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--brand) var(--fuell, 0%), var(--gray-200) var(--fuell, 0%));
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -7px;   /* zentriert den 20-px-Daumen auf der 6-px-Bahn */
}
input[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--brand) var(--fuell, 0%), var(--gray-200) var(--fuell, 0%));
}

/* Kopfleiste: Menüknopf und Bildzeichen auf Mindestmaß */
.nav-burger { width: 44px; height: 44px; }
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 960px) {
  /* Der Nischen-Knopf steht im aufgeklappten Menü und war nur 26 px hoch. */
  .nav-drop-btn { min-height: 44px; width: 100%; justify-content: space-between; }
  .nav-drop-menu a { padding-block: .7rem; }
}

@media (max-width: 640px) {
  /* Fußzeilenverweise standen mit 23 px zu eng beieinander. */
  .footer-nav { gap: .2rem 1.1rem; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Verweise in den Karten ebenso. */
  .card-link { min-height: 44px; align-items: center; }
}

/* Lange Netzadressen und E-Mail-Adressen im Fließtext der Rechtsseiten
   ragten über den rechten Rand und wurden dort abgeschnitten, weil die
   Textkarte ihren Überlauf verbirgt. */
.legal-content a,
.legal-content p,
.legal-content li { overflow-wrap: anywhere; }

/* ===========================================================================
   Mobil · Kopfbereich entlasten, Leiste entzerren, Kanalband weglassen
   ---------------------------------------------------------------------------
   Gemessen bei 390 px Breite und 844 px Bildschirmhöhe:
     Kopfbereich 1065 px, Kanalband 239 px.
   Der Kopfbereich allein war also länger als der Bildschirm — man scrollte
   einmal komplett, bevor überhaupt ein zweiter Abschnitt begann.
   =========================================================================== */

/* --- 1 · Aktionsleiste auf dem Telefon: nur der Knopf ---------------------
   Ohne die Beschriftung "Direkt testen" bliebe von der Leiste eine dunkle
   Pille übrig, in der ein anthrazitfarbener Knopf steckt — zwei dunkle
   Flächen ineinander, die sich kaum unterscheiden. Deshalb entfällt die
   Pille auf dem Telefon ganz: kein Hintergrund, kein Innenabstand, kein
   Schatten. Übrig bleibt der Knopf allein, der seinen eigenen Schatten
   mitbekommt, weil ihn sonst nichts mehr von der Seite abhebt. */
@media (max-width: 640px) {
  .stickycta {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    gap: 0;
    width: auto;
  }
  .stickycta p { display: none; }
  .stickycta .btn {
    min-height: 48px;
    padding: .8rem 1.5rem;
    font-size: .9rem;
    box-shadow:
      0 2px 6px rgba(15, 19, 25, .25),
      0 14px 32px -10px rgba(15, 19, 25, .55);
  }
}

/* --- 2 · Kanalband nur auf großen Schirmen -------------------------------
   Waagerecht erzählt das Band eine Bewegung: drei Kanäle laufen in Sonora
   hinein, drei Ergebnisse heraus. Gestapelt geht genau diese Aussage
   verloren — übrig bleiben drei Pillenreihen ohne Richtung, die 239 px
   kosten. Deshalb auf dem Telefon weg statt umgebaut. */
@media (max-width: 640px) {
  .channels { display: none; }
}

/* --- 3 · Kopfbereich gestrafft ------------------------------------------- */
@media (max-width: 640px) {
  .hero {
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-bottom: 2rem;
  }
  .hero-grid { gap: 1.5rem; }

  /* Die beiden Knöpfe standen untereinander und kosteten 112 px. Nebeneinander
     sind es 52 px — beide bleiben über der Mindestbreite für Tippflächen. */
  .hero-cta { gap: .6rem; flex-wrap: nowrap; }
  .hero-cta .btn { flex: 1 1 0; padding-inline: .8rem; white-space: nowrap; }

  /* Vertrauenszeile enger an den Text gerückt. */
  .hero-trust { margin-top: 1.15rem; gap: .45rem; }
  .hero-trust li { font-size: .84rem; }
}

/* ===========================================================================
   WhatsApp-Akzent · nur auf /whatsapp-ki/
   ---------------------------------------------------------------------------
   WhatsApps Markengrün #25d366 ist als Schriftfarbe unbrauchbar: auf Weiß
   erreicht es 1,98:1, weiße Schrift darauf ebenfalls 1,98:1 — beides weit
   unter den geforderten 4,5:1. Deshalb eine Treppe statt einer Farbe:
   das Markengrün bleibt für rein dekorative Flächen, für Schrift und
   gefüllte Blasen kommen abgedunkelte Werte aus derselben Familie.

     --wa         #25d366  nur Dekor (Ausschlagbalken), nie Text darauf
     --wa-text    #0e7a41  Schrift auf Weiß         5,41:1
     --wa-strong  #0b6b38  gefüllte Blase, weiß     6,62:1
   =========================================================================== */

:root {
  --wa:        #25d366;   /* Markengrün, nur Dekor */
  --wa-tint:   #a7e8c2;
  --wa-soft:   #eefbf4;   /* heller als zuvor, damit die Schrift darauf heller sein darf */
  --wa-line:   #c7edd8;
  --wa-bright: #1a9c4d;   /* Großschrift: 3,56:1 — Überschriften ab 24px brauchen 3:1 */
  --wa-text:   #12833f;   /* Kleinschrift: 4,83:1 auf Weiß, 4,54:1 auf --wa-soft */
  --wa-strong: #188741;   /* gefüllte Blase, weiße Schrift: 4,58:1 */
  --wa-deep:   #0b6b38;
}

/* Die beiden hervorgehobenen Wörter in der Überschrift. Sie dürfen heller
   sein als der übrige grüne Text: die Überschrift ist 33 bis 48 px groß und
   fällt damit unter die Großschrift-Regel, die 3:1 statt 4,5:1 verlangt. */
[data-akzent="wa"] .hero-copy .accent { color: var(--wa-bright); }

/* Das Chat-Panel: statt jedes Element einzeln umzufärben, werden hier die
   Marken-Token lokal überschrieben. Blasen, Live-Marke, Häkchen und die
   Ausschlagbalken greifen alle darauf zu und ziehen automatisch mit. */
[data-akzent="wa"] .demo-panel {
  --brand:        var(--wa);
  --brand-strong: var(--wa-strong);
  --brand-deep:   var(--wa-deep);
  --brand-tint:   var(--wa-tint);
  --brand-soft:   var(--wa-soft);
  --brand-line:   var(--wa-line);
  --brand-text:   var(--wa-text);
}

/* --cta-dark-glow wird hier bewusst NICHT überschrieben: dieser Wert treibt
   den farbigen Hof unter dem Panel. Bliebe er grün, leuchtete das Panel —
   so behält es denselben ruhigen Schatten wie auf den anderen Seiten. */

/* Die Sonora-Kugel bleibt blau. Sie erbt die grünen Token von oben, deshalb
   werden sie hier auf die Primitivwerte der Marke zurückgesetzt. Das
   Bildzeichen ist die Konstante über alle Seiten hinweg — grün wäre es auf
   genau einer Unterseite ein anderes Produkt. */
[data-akzent="wa"] .demo-panel .orb {
  --brand:        var(--blue-500);
  --brand-deep:   var(--blue-700);
  --brand-tint:   var(--blue-100);
  --cta-dark-glow: rgba(43, 127, 224, .28);
}

/* ===========================================================================
   Haken im Ergebnisstreifen „Termin gebucht"
   ---------------------------------------------------------------------------
   Der Haken wurde grau statt weiß gezeichnet und war auf der farbigen Scheibe
   kaum zu sehen. Ursache ist ein Spezifitätskonflikt, kein Farbfehler:

     .demo-result span      (0,1,1)  setzt color: var(--ink-3)
     .demo-result-check     (0,1,0)  setzt color: #fff

   Der Haken sitzt in einem <span> innerhalb von .demo-result, also greift die
   erste Regel — sie ist spezifischer und steht außerdem später. Das SVG zieht
   seine Strichfarbe über currentColor und wurde damit grau. Betraf beide
   Seiten mit Demo-Panel, nicht nur die grüne.

   Die Regel unten gewinnt mit (0,2,0). Dazu ein etwas größeres Zeichen und
   eine Strichstärke, die auf 26 px Scheibe sauber ausläuft.
   =========================================================================== */

.demo-result .demo-result-check {
  color: #fff;
  font-size: 0;                      /* erbt sonst .76rem und verschiebt das SVG */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.demo-result .demo-result-check svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 3.2;
  display: block;
}

/* ===========================================================================
   WhatsApp-Blasen · kräftig statt blass
   ---------------------------------------------------------------------------
   Der Versuch mit blassgrünen Blasen und dunkler Schrift wirkte durchsichtig:
   die Blase hatte kaum noch Gewicht gegenüber der weißen Fläche des Panels.
   Zurück auf weiße Schrift auf gefüllter Fläche — aber nicht einfach auf den
   alten Wert, sondern optimiert.

   Der Spielraum liegt nicht in der Helligkeit (die ist durch die 4,5:1 für
   14-px-Schrift festgenagelt), sondern in der Sättigung: bei gleicher
   Helligkeit lässt sich das Grün von 70 % auf 78 % Sättigung ziehen, ohne den
   Kontrast anzutasten. Das Ergebnis wirkt lebendiger und näher an WhatsApp,
   ohne heller zu werden.

     #11883d, weiße Schrift = 4,55:1

   Dazu ein leichter Verlauf und eine innere Lichtkante an der Oberkante —
   dieselbe Behandlung wie bei allen anderen Flächen der Seite. Wichtig dabei:
   der hellste Punkt des Verlaufs bestimmt den Kontrast, deshalb steht #11883d
   oben und der dunklere Ton unten, nicht umgekehrt.
   =========================================================================== */

:root {
  --wa-blase:      #11883d;   /* oben im Verlauf, hellster Punkt */
  --wa-blase-tief: #0c7434;   /* unten, 5,89:1 */
}

[data-akzent="wa"] .demo-msg--out {
  background: linear-gradient(180deg, var(--wa-blase), var(--wa-blase-tief));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Die Schreibanzeige ist dieselbe Blase, nur mit Punkten statt Text. */
[data-akzent="wa"] .demo-typing {
  background: linear-gradient(180deg, var(--wa-blase), var(--wa-blase-tief));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
[data-akzent="wa"] .demo-typing i { background: rgba(255, 255, 255, .85); }

/* ===========================================================================
   Kalenderhöhe · nachgemessen am echten Widget
   ---------------------------------------------------------------------------
   Bisher waren die Höhen geschätzt, weil Calendly im Testbrowser nie über den
   Ladespinner hinauskam. Auf der WhatsApp-Seite hat es jetzt geladen und ließ
   sich ausmessen: bei 720 px Rahmenhöhe blieben unter dem Kalender 120 px
   leere graue Fläche stehen (rgb(230,230,230), das ist der Hintergrund des
   iframes, nicht unserer). Die Monatsansicht braucht also rund 600 px.

   Wichtig dazu: die automatische Höhennachführung greift nicht. Ich habe im
   laufenden Widget auf Meldungen von calendly.com gehorcht — es kommt keine
   einzige. Der postMessage-Empfänger in site.js läuft also ins Leere, die
   Höhe hängt allein an diesen Werten. Nach dem Anklicken eines Tages wächst
   der Inhalt und Calendly scrollt intern; das ist der Preis dafür, dass im
   Normalzustand keine leere Fläche steht.

   Kurze Monate (fünf statt sechs Wochenzeilen) sind rund 40 px flacher.
   =========================================================================== */

.calendly-frame .calendly-inline-widget { height: 600px; }

@media (max-width: 640px) {
  /* Aus derselben Messung abgeleitet, auf dem Telefon nicht direkt geprüft. */
  .calendly-frame .calendly-inline-widget { height: 700px; }
}

/* Stoßen zwei abgesetzte Abschnitte direkt aneinander, liegen dort die
   untere Haarlinie des ersten und die obere des zweiten übereinander — die
   Trennung wird doppelt so kräftig wie überall sonst. Auf der Startseite ist
   das seit der Umstellung der Reihenfolge der Fall (Einstieg vor Kalender).
   Die obere Linie des nachfolgenden Abschnitts entfällt deshalb. */
.section--alt + .section--alt::before { display: none; }