/* =================================================================
   UXOVIA · COMPONENT CLASS LIBRARY
   The brand's framework-free CSS components. Requires the token files.
   React components in /components wrap these same class names.
   ================================================================= */

/* ── 1. TYPOGRAPHY HELPERS ── */
/* Die Sektions-Eyebrow ist dieselbe Glaspille wie .hero-eyebrow im Kopfbereich
   (assets/hero-split.css). Vorher stand hier ein 18px-Strich vor Mono-Versalien;
   der Wechsel macht aus zwei Eyebrow-Sprachen eine. Was die Pille hier bewusst
   NICHT uebernimmt: den pulsenden Punkt und den wandernden Glanz. Beides ist im
   Hero ein Einzelsignal — ueber zehn Sektionen wiederholt waeren es zehn
   blinkende Punkte, die gegen die Ueberschrift daneben antreten. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.035) 30%, rgba(255,255,255,.008) 62%, rgba(255,255,255,.06) 100%),
    linear-gradient(104deg, transparent 14%, rgba(200,218,255,.085) 36%, rgba(255,255,255,.045) 46%, transparent 64%),
    rgba(16, 19, 24, 0.52);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(198, 220, 255, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  font-size: var(--t-small);
  letter-spacing: -0.005em;
  color: var(--text);
  font-weight: var(--w-medium);
}

/* Mittig gesetzte Auszeichnung. Der Basiszustand ist linksbuendig;
   zentriert wird sie nur ueber mittig gesetzten Ueberschriften. */
.eyebrow--mittig { justify-content: center; }

/* Beschriftung INNERHALB einer Sektion (Spaltenkopf, Blocktitel), nicht zu
   verwechseln mit .eyebrow ueber einer Sektionsueberschrift. Die Pille markiert
   den Sektionsanfang und wuerde hier eine Gliederungsebene vortaeuschen, die es
   nicht gibt — deshalb bleibt dieses Label die schlichte Mono-Zeile. */
.label {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-legible);
  font-weight: var(--w-medium);
}
.t-display { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: var(--w-medium); }
.t-h1 { font-size: var(--t-h1); line-height: var(--lh-h);     letter-spacing: var(--tr-h); font-weight: var(--w-medium); }
.t-h2 { font-size: var(--t-h2); line-height: var(--lh-h);     letter-spacing: var(--tr-h); font-weight: var(--w-medium); }
.t-h3 { font-size: var(--t-h3); line-height: var(--lh-tight); letter-spacing: var(--tr-h); font-weight: var(--w-semi); }

.t-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-body); color: var(--text-2); }
/* Zentrierter Fliesstext auf angenehmer Zeilenlaenge. */
.t-body-lg--lesebreite { max-width: 52ch; margin-inline: auto; }
.t-body    { font-size: var(--t-body);    line-height: var(--lh-body); color: var(--text-2); }
.t-small   { font-size: var(--t-small);   line-height: 1.5;            color: var(--text-legible); }
/* Schmale Lesebreite fuer Nebentext unter einer Ueberschrift. */
.t-small--schmal { max-width: 34ch; }

.text-gradient { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-brand { color: var(--brand-text); }
/* Bewusst auf --text-3: nur fuer dekorative Zeichen (Listenstriche), kein Fliesstext. */
.text-faint { color: var(--text-3); }
.italic-serif { font-style: italic; font-weight: var(--w-regular); font-family: var(--font-display); }

/* ── 2. BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-body); font-size: 0.95rem;
  font-weight: var(--w-medium); letter-spacing: -0.005em; line-height: 1;
  color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
  position: relative; isolation: isolate;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-secondary {
  background: var(--surface-2); color: var(--text); border-color: var(--border-strong);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.btn-secondary:hover { background: var(--surface-3); border-color: rgba(255,255,255,.28); }
/* Der Verlauf ist doppelt so breit wie der Knopf und sitzt im Ruhezustand
   links. Beim Ueberfahren wandert er auf die rechte Haelfte: die Farbe
   fliesst durch den Knopf, statt nur heller zu werden. Dazu ein Millimeter
   Anheben und ein zweifarbiger Schein in Kobalt und Violett.
   Bewusst NICHT ueber filter: brightness — das wuerde nur aufhellen und
   waere in einer Sekunde vorbei, ohne dass etwas passiert waere. */
/* Zwei Bewegungen gleichzeitig, exakt nach dem Vorbild ausgemessen:
   1. Der Verlauf ist doppelt so breit wie der Knopf und wandert beim
      Ueberfahren von links nach rechts (0,6s).
   2. Ein Glanzstreifen laeuft in 0,8s quer darueber hinweg. Erst dieser
      zweite Streifen macht den Effekt fliessend; der wandernde Verlauf
      allein wirkt nur wie ein Farbwechsel.
   Zeitfunktion bewusst `ease` und nicht --ease-out: das Vorbild nutzt ease,
   und der Unterschied ist an der langen Strecke deutlich sichtbar. */
.btn-gradient {
  color: var(--text-on-brand); border: none;
  padding: 0.85rem 1.8rem;
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(90deg, var(--brand) 0%, var(--purple) 50%, var(--brand-hover) 100%) 0% 0% / 200%;
  box-shadow: 0 12px 32px -10px rgba(0,85,254,.5), inset 0 1px 0 rgba(255,255,255,.3);
  transition: background-position 0.6s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-gradient::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
}
.btn-gradient:hover::before { transform: translateX(100%); }
.btn-gradient:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow:
    0 12px 32px -10px rgba(0, 85, 254, .60),
    0 6px 18px -8px rgba(124, 92, 191, .45),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gradient:active { transform: translateY(0); }
/* Text und Pfeil ueber den Glanzstreifen heben. */
.btn-gradient > * { position: relative; z-index: 1; }

/* Wer reduzierte Bewegung eingestellt hat, bekommt weder Wanderung noch Glanz. */
@media (prefers-reduced-motion: reduce) {
  .btn-gradient { transition: box-shadow var(--dur-fast) ease; }
  .btn-gradient:hover { background-position: 0% 0%; transform: none; }
  .btn-gradient::before, .btn-gradient:hover::before { transition: none; transform: translateX(-100%); }
}
/* Kleine Groesse nach dem Vorbild ausgemessen: 36 px hoch, 14 px / 600,
   16 px seitliches Polster, 8 px Radius. Die Hoehe steht fest statt aus dem
   Polster zu folgen — so ist der Knopf exakt so hoch wie die Menuepunkte
   daneben und die Leiste bleibt ruhig. */
.btn-sm {
  height: 36px; padding: 0 16px;
  font-size: 0.875rem; font-weight: var(--w-semi);
  border-radius: 8px;
}
.btn-lg { padding: 1.1rem 1.8rem; font-size: var(--t-body-lg); }
.btn-gradient.btn-sm { padding: 0 16px; }
.btn-gradient.btn-lg { padding: 1.1rem 2.2rem; }

/* ── 3. GLASS CARD — the signature component ── */
.glass {
  position: relative; padding: var(--s-6); border-radius: var(--r-lg);
  overflow: hidden; isolation: isolate;
  background:
    radial-gradient(90% 35% at 50% -10%, rgba(0,85,254,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.005) 100%),
    rgba(12,12,18,.72);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 30px 60px -30px rgba(0,0,0,.7);
  transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(70% 100% at 50% 0%, rgba(120,170,255,.55) 0%, rgba(255,255,255,.10) 35%, rgba(255,255,255,.03) 70%, rgba(255,255,255,.05) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1;
}
.glass > * { position: relative; z-index: 2; }
.glass:hover { filter: brightness(1.08); }
.glass-lg { padding: var(--s-7); border-radius: var(--r-xl); }
.glass-sm { padding: var(--s-5); border-radius: var(--r-md); }
.glass-feature {
  padding: var(--s-7); border-radius: var(--r-xl);
  background:
    radial-gradient(120% 80% at 25% -10%, rgba(0,85,254,.35), transparent 55%),
    radial-gradient(90% 60% at 85% 100%, rgba(124,92,191,.14), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%),
    rgba(8,10,18,.7);
}
.card-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.card-eyebrow { margin-bottom: var(--s-4); }
.card-title { font-size: var(--t-h3); font-weight: var(--w-semi); letter-spacing: var(--tr-h); margin-bottom: var(--s-3); }

.metric { display: flex; flex-direction: column; gap: var(--s-2); }
.metric-value {
  font-family: var(--font-display); font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  font-weight: var(--w-medium); line-height: 1; letter-spacing: -0.04em;
  background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metric-label { font-size: var(--t-small); color: var(--text-legible); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); font-family: var(--font-mono); }

/* ── 4. NAVIGATION (floating pill) ── */
/* Durchgehender Balken statt schwebender Pille — dieselbe Kopfleiste wie auf
   der Startseite. Der Balken laeuft ueber die ganze Breite, der Inhalt sitzt
   in 1280px und fluchtet damit zum uebrigen Seiteninhalt.

   Das Einfassen laeuft ueber padding statt ueber einen inneren Container:
   die Nav traegt ihre Kinder direkt, ein zusaetzliches <div> haette jede
   Unterseite einzeln umgebaut werden muessen. max() faengt schmale Fenster
   ab, wo die Rechnung sonst negativ wird. */
.nav-brand { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: var(--w-semi); font-size: 1.05rem; letter-spacing: -0.02em; color: var(--text); flex-shrink: 0; }
/* Brand-Marke: das echte Uxovia-Signet (3D-Verlaufs-U). Der Platzhalter-Buchstabe „U"
   in der Markup-Kindposition wird per text-indent zuverlässig ausgeblendet (auch wenn
   eine Verwendung inline font-size setzt). Größe/Position via width/height am Element. */
.nav-brand-mark { width: 28px; height: 28px; flex-shrink: 0; background: url(/assets/uxovia-signet-color.svg) center / contain no-repeat; overflow: hidden; text-indent: -9999px; white-space: nowrap; border-radius: 0; box-shadow: none; }
/* Wortmarke/Schriftzug: echtes Uxovia-Logotype ersetzt den DM-Sans-Text „Uxovia" (2. Span in .nav-brand).
   Alle Navs/Footer stehen auf Dunkel → weiße Fassung. Der Text bleibt für Screenreader erhalten. */
.nav-brand > span:nth-of-type(2) { display: inline-block; width: 5.15em; height: 1em; flex-shrink: 0; background: url(/assets/uxovia-wordmark-only-white.svg) left center / contain no-repeat; overflow: hidden; text-indent: -9999px; white-space: nowrap; }
@media (max-width: 768px) { }
.input, .textarea, .select {
  width: 100%; padding: 0.9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text); font-family: inherit; font-size: var(--t-body);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--border-strong); }
/* :focus-visible statt :focus — sonst springt der Ring auch beim Mausklick an.
   Der frühere box-shadow aus --brand-faint (Alpha 0,06) erreichte 1,03:1 und war
   kein Fokusindikator. Rahmen und Fuellung bleiben als zusaetzliche Affordanz. */
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--brand); background: rgba(0,85,254,.04);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23ffffff99' stroke-width='1.8' stroke-linecap='round' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 1.1rem center; padding-right: 2.6rem;
}
.check { display: inline-flex; align-items: center; gap: 0.7rem; cursor: pointer; user-select: none; font-size: var(--t-body); color: var(--text-2); }
.check input { appearance: none; width: 18px; height: 18px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); display: grid; place-items: center; cursor: pointer; transition: all var(--dur-fast); }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--brand); border-color: var(--brand); box-shadow: var(--glow-brand-sm); }
.check input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--text-on-brand); border-bottom: 2px solid var(--text-on-brand); transform: rotate(-45deg) translate(1px, -1px); }
.check input[type="radio"]:checked::after { content: ""; width: 6px; height: 6px; background: var(--text-on-brand); border-radius: 50%; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { display: none; }
.switch input:checked ~ .switch-track { background: var(--brand); border-color: var(--brand); }
.switch input:checked ~ .switch-track::after { transform: translateX(20px); }

/* ── 6. BADGES, PILLS, TAGS ── */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.7rem;
  font-size: 0.78rem; font-weight: var(--w-medium); font-family: var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}
/* Der Abstand nach unten stand bis zum 21.08.2026 an allen 16 Vorkommen als
   style-Attribut im HTML — an jedem einzelnen derselbe Wert. */
.badge-brand   { background: var(--brand-soft); border-color: var(--border-brand); color: var(--kobalt-zart); margin-bottom: var(--s-3); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

.pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 0.85rem; color: var(--text-2); backdrop-filter: blur(8px); }
/* Leicht metallisch: drei Lagen uebereinander. Zuunterst der blaue Hauch der
   Marke, darueber ein schraeger Silberstreif, der die Flaeche einmal quer
   aufhellt, ganz oben ein senkrechter Verlauf hell-dunkel-hell. Dazu eine
   Lichtkante an der Oberseite und eine Abdunklung an der Unterseite: erst
   dieses Paar laesst die Flaeche gewoelbt statt flach wirken. */
.pill-glow {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,.015) 62%, rgba(255,255,255,.07) 100%),
    linear-gradient(104deg, transparent 12%, rgba(198,216,255,.10) 34%, rgba(255,255,255,.05) 44%, transparent 62%),
    linear-gradient(180deg, rgba(0,85,254,.16) 0%, rgba(0,85,254,.03) 78%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-md);
  font-size: 0.85rem; color: var(--text); font-weight: var(--w-regular); letter-spacing: -0.005em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(190,215,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 -2px 14px -2px rgba(0,85,254,.3),
    0 8px 20px -8px rgba(0,0,0,.55);
}
.pill-glow .badge-dot { background: var(--brand); box-shadow: 0 0 10px var(--brand); }

.tag { display: inline-flex; align-items: center; padding: 0.55rem 1rem; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); font-size: 0.88rem; color: var(--text); font-weight: var(--w-regular); transition: background var(--dur-fast), border-color var(--dur-fast); cursor: default; white-space: nowrap; }
.tag:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22); }

/* ── 7. SECTION HEADER ── */
/* Der Abstand nach unten ist ueberall derselbe: der Kopf gehoert zu dem, was
   unter ihm steht, und 64 px liessen beides auseinanderfallen. */
.section-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-7); max-width: 720px; }
.section-header.center { margin-inline: auto; text-align: center; align-items: center; }

/* ── 8. HERO PATTERNS ── */
.hero { position: relative; padding-block: clamp(8rem, 14vw, 12rem) clamp(4rem, 8vw, 6rem); text-align: center; overflow: hidden; }
.hero-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-aurora::before, .hero-aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(100px); }
.hero-aurora::before { top: -15%; left: 5%; width: 55%; aspect-ratio: 1; background: radial-gradient(circle, rgba(0,85,254,.45), transparent 65%); animation: hero-aurora-1 28s ease-in-out infinite alternate; }
.hero-aurora::after { top: -8%; right: -5%; width: 50%; aspect-ratio: 1; background: radial-gradient(circle, rgba(124,92,191,.28), transparent 65%); animation: hero-aurora-2 36s ease-in-out infinite alternate; }
@keyframes hero-aurora-1 { from { transform: translate(0,0) scale(1); } to { transform: translate(22%,12%) scale(1.18); } }
@keyframes hero-aurora-2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-18%,10%) scale(1.12); } }
.hero-content { position: relative; z-index: 2; }

/* ── 9. GRIDS ── */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 900px) { }

/* ── 10. ICON CHIP ── */
.icon-chip { width: 48px; height: 48px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--brand); box-shadow: var(--inset-glow); }
.icon-chip.brand { background: var(--brand-soft); border-color: var(--border-brand); box-shadow: var(--glow-brand-sm), var(--inset-glow); }
.icon-chip svg { width: 22px; height: 22px; }
.icon-chip.purple  { background: rgba(124,92,191,.16); border-color: rgba(124,92,191,.4); color: var(--violett-blass); box-shadow: 0 0 20px rgba(124,92,191,.25), var(--inset-glow); }
.icon-chip.cyan    { background: rgba(0,200,238,.14); border-color: rgba(0,200,238,.4); color: var(--cyan-hell); box-shadow: 0 0 20px rgba(0,200,238,.25), var(--inset-glow); }
.icon-chip.success { background: rgba(31,203,122,.14); border-color: rgba(31,203,122,.4); color: var(--gruen-licht); box-shadow: 0 0 20px rgba(31,203,122,.25), var(--inset-glow); }

/* ── 12. TIMELINE / STEPS ── */
.steps { display: flex; flex-direction: column; gap: var(--s-6); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: flex-start; }
.step-number { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-strong); display: grid; place-items: center; font-family: var(--font-mono); font-weight: var(--w-medium); color: var(--brand); font-size: 0.95rem; flex-shrink: 0; }
.step-content > h3 { margin-bottom: var(--s-2); font-size: var(--t-h3); font-weight: var(--w-semi); }

/* ── 13. TESTIMONIAL / QUOTE ── */
.quote { position: relative; padding: var(--s-7); border-radius: var(--r-xl); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid var(--border); }

/* ── 14. CTA BLOCK ── */
.cta { position: relative; padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); border-radius: var(--r-2xl); background: radial-gradient(80% 100% at 50% 0%, rgba(0,85,254,.20) 0%, transparent 60%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid var(--border); text-align: center; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: -1px; background: var(--gradient-border); border-radius: inherit; z-index: -1; filter: blur(0); }
.cta-animated {
  position: relative; padding: clamp(4rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem); border-radius: var(--r-2xl);
  overflow: hidden; isolation: isolate; text-align: center;
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(124,92,191,.18), transparent 60%), var(--bg-ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(120,170,255,.25), 0 40px 100px -40px rgba(0,0,0,.7);
}
.cta-animated::before, .cta-animated::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.cta-animated::before { top: -30%; left: -15%; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(0,85,254,.65), transparent 65%); animation: cta-drift-1 16s ease-in-out infinite alternate; }
.cta-animated::after { bottom: -30%; right: -15%; width: 80%; aspect-ratio: 1; background: radial-gradient(circle, rgba(0,85,254,.55), transparent 65%); animation: cta-drift-2 22s ease-in-out infinite alternate; }
.cta-animated > * { position: relative; z-index: 2; }
/* Flache Variante fuer Buchungszonen mitten auf der Seite: dieselbe Flaeche,
   aber breit und niedrig statt hoch. Der Abschluss unten bleibt die grosse
   Buehne, die Zonen dazwischen ordnen sich ihm unter. */
.cta-animated--flach { padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); }

/* Akzentkontur: traegt genau eine Buchungszone auf der Startseite, die zum
   Ready-Check. Dort steht der teurere der beiden Wege, und der soll sich von
   den ruhigen Zonen unterscheiden — aber nur um eine Kontur, nicht um eine
   Stufe Lautstaerke. Die grosse Buehne am Seitenende bleibt die lauteste. */
.cta-animated--akzent {
  box-shadow: inset 0 0 0 1px var(--border-brand),
              inset 0 1px 0 rgba(120,170,255,.35),
              0 40px 100px -40px rgba(0,0,0,.7);
}

/* Zweispaltig: links die Ansprache, rechts der Knopf. Der Blick laeuft von
   der Frage direkt auf die Antwort, statt erst nach unten zu wandern. */
.cta-zweispaltig {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem); text-align: left;
}
.cta-zweispaltig-text { min-width: 0; }
.cta-zweispaltig-text > p { margin: 0; }
/* Die Frage traegt hier eine echte Ueberschrift-Groesse. Das System setzt
   --t-h3 bewusst auf 18px und laesst die dritte Ebene ueber das Gewicht
   wirken — in dieser Zone stand sie damit aber exakt so gross wie der Satz
   darunter (--t-body-lg, ebenfalls 18px) und las sich wie fetter Fliesstext.
   Die Stufe dazwischen gibt es in der Skala nicht, deshalb steht sie hier
   lokal. */
.cta-zweispaltig-titel {
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: var(--w-semi);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
}
/* Der Satz darunter tritt zurueck, sonst konkurriert er mit der Frage. */
.cta-zweispaltig-text .cta-zweispaltig-sub { color: var(--text-2); }
/* Der rechte Block behaelt seine Breite: der Knopf soll nicht umbrechen,
   wenn die Frage links laenger wird. Ausgerichtet wird er mittig, der
   Untertitel steht also zentriert unter dem Knopf, wie in den uebrigen
   Buchungszonen. */
.cta-zweispaltig .cta-block { flex-shrink: 0; }
/* Ab hier stehen Frage und Knopf zu eng nebeneinander, also untereinander. */
@media (max-width: 860px) {
  .cta-zweispaltig { flex-direction: column; align-items: center; text-align: center; }
}
/* Ein gesetzter Umbruch, der nur steht, solange die Zone zweispaltig ist.
   Einspaltig und zentriert bricht der Satz ohnehin nach Platz um; ein
   zusaetzlicher harter Umbruch liesse dort eine kurze Zeile mitten im Absatz.
   Das Leerzeichen hinter dem <br> bleibt erhalten, der Satz liest sich
   ausgeblendet also unveraendert. */
.umbruch-breit { display: none; }
@media (min-width: 861px) { .umbruch-breit { display: inline; } }
/* Auf schmalen Schirmen bleibt der Rahmen als Innenabstand stehen, der Knopf
   verliert dadurch Breite. Der laengste der drei Beschriftungen bricht sonst
   in zwei Zeilen und faellt aus der Reihe — Michaels Punkt "einheitliche
   Buttongroesse". Weniger Polster statt kleinerer Schrift. */
@media (max-width: 420px) {
  .cta-zweispaltig .btn-lg { padding-inline: 1.25rem; }
}

/* Die Fassung „leise auf dem Smartphone" ist am 21.08.2026 entfallen. Sie
   nahm den beiden Zwischenzonen (Engpaesse, Datenhoheit) auf schmalen
   Schirmen den Rahmen und machte den Knopf zur Textzeile — eine Antwort auf
   Michaels Punkt „ein oder zwei Buttons rausnehmen". Auf Wunsch tragen jetzt
   alle drei Buchungszonen denselben Knopf. Wer die leise Fassung wiederhaben
   will, findet sie in der Versionsgeschichte dieser Datei. */

@keyframes cta-drift-1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(28%,18%) scale(1.12); } }
@keyframes cta-drift-2 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-22%,-22%) scale(1.18); } }

/* ── 14b. KI-HINWEIS UNTER BILDERN ── */
/* Steht unter jeder Bildflaeche, die kein Foto ist. Leise, aber lesbar: der
   Hinweis gehoert zum Bild, nicht zur Gestaltung. */
.ki-hinweis { margin: var(--s-2) 0 0; font-size: var(--t-small); color: var(--text-3); }

/* ── 14c. DATENSCHUTZ-HINWEIS (Overlay) ── */
/* Ein- und Ausblenden mit sanftem Uebergang, wie ueberall auf der Seite.
   Bei reduzierter Bewegung bleibt der Wechsel hart, aber vollstaendig. */
.ds-overlay { position: fixed; inset: 0; z-index: var(--z-modal, 200); display: grid; place-items: center; padding: var(--s-5); }
.ds-overlay[hidden] { display: none; }
.ds-grund {
  position: absolute; inset: 0; background: rgba(3, 4, 8, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.22s var(--ease-out, ease);
}
.ds-karte {
  position: relative; width: min(30rem, 100%);
  padding: var(--s-6); border-radius: var(--r-lg);
  border: 1px solid var(--border-strong); background: var(--kobalt-nacht);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.8);
  opacity: 0; transform: translateY(8px) scale(0.985);
  transition: opacity 0.22s var(--ease-out, ease), transform 0.22s var(--ease-out, ease);
}
.ds-overlay.is-auf .ds-grund { opacity: 1; }
.ds-overlay.is-auf .ds-karte { opacity: 1; transform: none; }
.ds-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.ds-kopf h2 { margin: 0; font-size: var(--t-h3); font-weight: var(--w-semi); color: var(--text); }
.ds-zu {
  flex-shrink: 0; display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: transparent;
  color: var(--text-2); cursor: pointer; padding: 0;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.ds-zu:hover { color: var(--text); border-color: var(--border-strong); }
.ds-zu svg { width: 15px; height: 15px; }
.ds-karte p { margin: 0 0 var(--s-3); font-size: var(--t-small); color: var(--text-2); }
.ds-mehr { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-small); color: var(--kobalt-blass); }
.ds-mehr svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .ds-grund, .ds-karte { transition: none; }
}

/* ── 15. FOOTER ── */
.footer { padding-block: var(--s-9) var(--s-6); border-top: 1px solid var(--border); margin-top: var(--s-10); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-7); margin-bottom: var(--s-8); }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* Unter 480px eine Spalte. Zwei Spalten brauchen zusammen feste 363px, weil
   die Spaltenueberschriften Versalien mit weiter Laufweite tragen und nicht
   schmaler werden koennen. Bei 320px Fensterbreite hat das die ganze Seite
   um 44px seitlich verschoben, bei 360px um 4px — auf allen acht Seiten,
   weil der Fuss ueberall gleich gebaut ist. Gemessen am 21.08.2026. */
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
/* Die drei Linkspalten trugen h4, obwohl die letzte Ueberschrift davor ein
   h2 war: eine uebersprungene Ebene auf jeder Seite. Sie beschriften eine
   Navigation, sie gliedern keinen Inhalt — also ein Absatz, und die Spalte
   wird zur benannten Navigation (aria-label). */
.footer-col-titel { margin: 0 0 var(--s-4); font-size: 0.85rem; text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--text-legible); font-family: var(--font-mono); font-weight: var(--w-medium); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.footer-col a { color: var(--text-2); font-size: 0.95rem; transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; padding-top: var(--s-5); border-top: 1px solid var(--border); color: var(--text-legible); font-size: 0.85rem; }

/* Der Markenclaim schliesst die Seite ab. Er stand hier bisher halbiert und
   in derselben Groesse wie die Copyright-Zeile daneben — ein Claim, den man
   fuer eine Fussnote haelt, ist keiner. Jetzt vollstaendig, eine Spur
   groesser und mit dem Markenverlauf auf dem zweiten Teil. */
.footer-claim {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text-2);
  white-space: nowrap;
}
.footer-claim i {
  font-style: normal;
  color: var(--text-faint);
  margin-inline: 0.15em;
}
@media (max-width: 560px) { .footer-claim { font-size: 0.9rem; } }
kbd { font-family: var(--font-mono); font-size: 0.75em; padding: 0.15em 0.45em; background: var(--surface-3); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; color: var(--text); }

/* ── 18. ANIMATIONS — entrance reveal ── */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes blur-rise { from { opacity: 0; filter: blur(14px); transform: translateY(18px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,85,254,.4); } 50% { box-shadow: 0 0 0 12px rgba(0,85,254,0); } }
.reveal { opacity: 0; animation: rise var(--dur-slow) var(--ease-out) forwards; }
.reveal-1 { animation-delay: 0.05s; } .reveal-2 { animation-delay: 0.15s; } .reveal-3 { animation-delay: 0.25s; }
.reveal-4 { animation-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  /* ensure entrance-reveal content lands in its visible end-state (print, PDF, reduced-motion) */
  .reveal, .reveal-blur, [class*="reveal-"] { opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* ── 19. CHECK LIST — circular blue checkmark bullets ── */
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.check-list li { display: flex; align-items: center; gap: var(--s-3); color: var(--text); font-size: var(--t-body); line-height: 1.4; }
.check-list li::before { content: ""; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 12px no-repeat; box-shadow: 0 0 14px rgba(0,85,254,.55); }
/* Dieselbe Liste fuer Missstaende. Zwei Seiten zaehlen darin auf, was beim
   Kunden schieflaeuft, und trugen bis zum 21.08.2026 trotzdem das blaue
   Erfolgshaken davor: jedes Problem sah aus wie eine erledigte Aufgabe.
   Ursache war ein Schalter --check-negative im style-Attribut, den keine
   Regel je gelesen hat. Statt der Variable jetzt eine Klasse, die auch
   wirkt. Bewusst zurueckhaltend: ein Strich im Ring, kein rotes Kreuz und
   kein Leuchten. Es geht um die Ausgangslage, nicht um einen Alarm. */
.check-list--negativ li::before { background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='3' stroke-linecap='round'><path d='M6 12h12'/></svg>") center / 12px no-repeat; border: 1px solid var(--border); box-shadow: none; }

/* ── 20. MEDIA ── */
.media { position: relative; width: 100%; border-radius: var(--r-xl); overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border); isolation: isolate; }
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(140% 70% at 50% 110%, transparent 60%, rgba(0,0,0,.45) 100%); pointer-events: none; } .media-4-5 { aspect-ratio: 4/5; } .media-16-9 { aspect-ratio: 16/9; }
.media-glow { box-shadow: 0 60px 100px -50px rgba(0,85,254,.35), 0 30px 60px -20px rgba(0,0,0,.8); }
/* Bild schmaler als der Satzspiegel, mittig. Stand vorher als style-Attribut
   an jeder Fundstelle. Nicht .container-narrow verwenden: die setzt zusaetzlich
   ein Innenpolster, und diese Bilder stehen bereits in einem .container. */
.media--schmal { max-width: var(--container-narrow); margin-inline: auto; }
/* Zeile unter einem Bild oder einer Tafel. */
.bildunterschrift { text-align: center; margin-top: var(--s-4); color: var(--text-legible); }

/* ── 21. SPLIT — media + content side-by-side ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.split-media-right > :first-child { order: 2; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: var(--s-7); } .split-media-right > :first-child { order: initial; } }
@keyframes divider-glow-shift { 0% { opacity: 0.55; left: 18%; right: 32%; } 50% { opacity: 1; left: 25%; right: 25%; } 100% { opacity: 0.65; left: 32%; right: 18%; } }
.divider-thin { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%); margin-block: var(--s-5); }

/* ── 23. PATTERN INTERRUPT — statement band ── */
/* Full-bleed, card-less typographic band that breaks the contained-card
   rhythm. Hairlines top + bottom and a faint cobalt radial wash do the
   interrupting; keep the copy to one line with a single italic-gradient accent. */
.statement { position: relative; text-align: center; padding-block: clamp(3.5rem, 8vw, 6.5rem); padding-inline: var(--s-5); overflow: hidden; }
.statement::before, .statement::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: min(620px, 78%); height: 1px; background: linear-gradient(90deg, transparent, rgba(120,170,255,.45), transparent); }
.statement::before { top: 0; }
.statement::after { bottom: 0; }
.statement-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 46% 64% at 50% 50%, rgba(0,85,254,.10), transparent 70%); }
.statement > *:not(.statement-glow) { position: relative; z-index: 1; }
.statement-text { font-family: var(--font-display); font-weight: var(--w-medium); letter-spacing: var(--tr-display); line-height: 1.18; font-size: clamp(1.65rem, 4vw, 3rem); max-width: 24ch; margin: var(--s-4) auto 0; text-wrap: balance; }

/* ── 24. TASTATURFOKUS ── */
/* Bis hierher gab es systemweit keine einzige :focus-visible-Regel — der Tastaturfokus
   lag beim Browser-Standardring, und der ist kobaltblau. Auf .btn-gradient, der bei
   exakt diesem Blau (#0055FE) beginnt, betraegt sein Kontrast zur Buttonflaeche 1:1:
   der Fokus auf dem wichtigsten Element der Seite war unsichtbar.
   Weiss haelt ueberall — min 5,07:1 auf dem Lila-Ende des Gradienten, 21:1 auf der Seite. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ─────────────────── 25. SCHMALE FENSTER ───────────────────
   .btn traegt white-space: nowrap. Bei langen Beschriftungen wie
   „Kostenlosen KI Ready Check buchen" sprengt das auf dem Telefon die
   Fensterbreite: der Knopf wird 540px breit und zieht seinen Container mit.
   Dort darf der Text umbrechen. */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .btn-lg { width: 100%; }
}
/* Auf dem Telefon nimmt die Marke sonst die halbe Bildbreite ein. */
@media (max-width: 560px) {
  .demo-marke {
    top: var(--s-2); right: var(--s-2);
    padding: 2px var(--s-2); letter-spacing: .12em;
  }
}

/* Variante fuer die nachgebauten Fensterleisten der Mockups: dort sitzt die
   Marke in der Leiste selbst. Im Bild wuerde sie die Kennzahlen verdecken. */
.ae-demotag {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 2px var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: var(--w-medium);
  color: var(--text-3);
  white-space: nowrap;
}
.ae-demotag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex: none;
}
/* Wird der Platz knapp, weicht die nachgebaute Adresszeile — sie ist Dekor.
   Die Kennzeichnung bleibt, denn sie ist der Grund fuer die ganze Leiste. */
@media (max-width: 720px) {
  .ae-url { display: none; }
  .ae-demotag { letter-spacing: .1em; }
}

/* ─────────────────── 27. TERMINHINWEIS UNTER BUCHUNGSKNOEPFEN ───────────────────
   Steht unter jedem Knopf, der in den Kalender fuehrt: der Besucher soll vor dem
   Klick wissen, dass er das Haus verlaesst. Leiser als die Zeile mit Dauer und
   Preis darueber, aber im Fliesstext-Token — sie will gelesen werden koennen. */
/* Eine Stufe unter --t-small (14px): die Zeile ist eine rechtliche Randnotiz
   und stand bisher genauso gross wie die Dauerangabe darueber, obwohl sie
   deutlich nachrangig ist. 12px ist die Untergrenze, tiefer geht es nicht,
   ohne die Lesbarkeit zu verlieren — der Datenschutzlink muss klickbar und
   lesbar bleiben. */
.termin-hinweis {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-legible);
}
.termin-hinweis a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
.termin-hinweis a:hover { color: var(--text); text-decoration-color: var(--brand-hover); }

/* Knopf, Aufwandszeile und Rechtshinweis stehen als ein Block untereinander.
   Die beiden Zeilen ruecken enger zusammen als an den Knopf: sie gehoeren
   zueinander, nicht zu ihm. */
.cta-block { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
/* Buchungszone mit Luft nach oben, wenn direkt Inhalt darueber steht. */
.cta-block--abgesetzt { margin-top: var(--s-7); }
.cta-block-fuss { margin: 0; font-size: var(--t-small); line-height: 1.4; color: var(--text); }
.cta-block .termin-hinweis { margin-top: calc(var(--s-3) * -0.55); }