/* =========================================
   RESET & BASE
========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Scrollbalken schmal und in Markenfarbe. Chrome und Firefox lesen scrollbar-width/-color,
   Safari nur die -webkit-Pseudoelemente; beide Wege zeigen dasselbe. */
html { scrollbar-width: thin; scrollbar-color: var(--ds-action-brand) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ds-action-brand); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-action-brand-hover); }
body {
  background: var(--ds-color-grey-50);
  color: var(--ds-color-grey-900);
  font-size: var(--ds-type-body-size);
  line-height: var(--ds-type-body-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Sektionsrhythmus: zwei Stufen statt fester 96/64 px (Gestaltgesetz der Naehe: Sektionen weit, Gruppen eng) */
:root { --section-y: clamp(72px, 8vw, 120px); --section-y-sm: clamp(48px, 5.5vw, 72px); }
/* Seitenrand: ein fliessender Wert fuer Inhalt, Kopfzeile und Produktschau (20 px am Handy, 48 px ab rund 960 px), kein Sprung */
:root { --page-gutter: clamp(20px, 5vw, 48px); }
/* Inter: optische Groesse automatisch (opsz). Von den Stilvarianten nur ss03 (runde
   Anfuehrungszeichen und Kommas) in Ueberschriften; cv11 (einstoeckiges a) bewusst nicht. */
body { font-optical-sizing: auto; }
/* Ueberschriften: enge Laufweite aus den Rollen-Tokens (Inter laeuft in grossen Graden weit), knappe Zeilenhoehe, ausgewogener Umbruch */
h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; font-feature-settings: "ss03"; overflow-wrap: break-word; }
h1 { font-size: var(--ds-type-display-l-size); line-height: var(--ds-type-display-l-line-height); font-weight: 700; letter-spacing: var(--ds-type-display-l-tracking); }
h2 { font-size: var(--ds-type-h2-size); line-height: var(--ds-type-h2-line-height); font-weight: 700; letter-spacing: var(--ds-type-h2-tracking); }
h3 { font-size: var(--ds-type-h3-size); line-height: var(--ds-type-h3-line-height); font-weight: 700; letter-spacing: var(--ds-type-h3-tracking); }
h4 { font-family: var(--font-sans); font-size: var(--ds-type-h4-size); line-height: var(--ds-type-h4-line-height); font-weight: 700; letter-spacing: var(--ds-type-h4-tracking); }
p { overflow-wrap: anywhere; }
/* Lange Woerter ausserhalb von <p> (Listen, Tabellenzellen, Hinweise): umbrechen statt ueberstehen.
   break-word greift nur, wenn ein Wort sonst nicht passt. */
body { overflow-wrap: break-word; }
/* Schmale Viewports: deutsche Komposita ("Geschäftsbedingungen", "Reservierungsmanagement") sind
   breiter als die Spalte. Trennen statt abschneiden; nur lange Wörter (ab 12 Zeichen), damit kurze
   Überschriften nicht zerstückelt werden. Sprache kommt aus <html lang>. */
@media (max-width: 760px) {
  h1, h2, h3, h4, .section-title {
    overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5;
  }
  /* Buttons dürfen umbrechen statt über den Rand zu ragen (lange CTA-Beschriftungen) */
  .btn { white-space: normal; max-width: 100%; text-align: center; }
}
/* Zahlen in Text und UI: Tabellenziffern, damit Spalten und Preise nicht springen */
table, .num, [data-num], time { font-variant-numeric: tabular-nums; }
/* Kleinstschrift laeuft im Micro-Schnitt (Eyebrows, Labels, Meta). Zentrale Rolle: */
.eyebrow, .section-label { font: var(--ds-type-eyebrow-weight) var(--ds-type-eyebrow-size) / var(--ds-type-eyebrow-line-height) var(--ds-type-eyebrow-family); letter-spacing: var(--ds-type-eyebrow-tracking); text-transform: uppercase; }
a { text-decoration: none; color: inherit; }
/* <i> dient hier durchgehend als Haken fuer Icons und Produkt-Nachbauten, nie als Kursivtext. Ohne diese
   Regel loest eine einzelne Ziffer in einem <i> den Download von Inter Italic aus (128 KB, hohe Prioritaet). */
i { font-style: normal; }
img { max-width: 100%; height: auto; display: block; }

/* =========================================
   DESIGN TOKENS
   -> design-system/tokens (generiert nach design-system/dist/airlst-ds.css,
      wird vor main.css geladen). Die Aliase --violet, --text, --radius ...
      kommen von dort. Hier nichts mehr definieren.
========================================= */

/* =========================================
   UTILITY
========================================= */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--page-gutter); }

/* Sektionskopf: Eyebrow (Micro) · Titel (Display) · Subline (Text). Abstaende eng, Titel bis 22 Woerter/Zeile. */
.section-label {
  color: var(--violet); margin-bottom: 18px;
  display: block;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--ds-type-h1-size); font-weight: 700;
  letter-spacing: var(--ds-type-h1-tracking); line-height: var(--ds-type-h1-line-height); margin-bottom: 18px;
  color: var(--text); max-width: 22ch; text-wrap: balance;
}
.section-title .light { color: var(--text-muted); font-weight: 300; }
.section-sub {
  font-size: var(--ds-type-body-lg-size); color: var(--text-muted);
  line-height: var(--ds-type-body-lg-line-height); max-width: 58ch;
}

/* =========================================
   BUTTONS -> design-system/src/styles/components/button.css
   (.btn, .btn-primary, .btn-outline, .btn-ghost, .btn-sm, .btn-lg)
========================================= */


/* =========================================
   ANNOUNCEMENT BAR
========================================= */

/* =========================================
   NAVIGATION
========================================= */
#mainNav {
  position: sticky; top: 0; z-index: 200;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  height: var(--nav-h);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--page-gutter);
  height: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
}

.nav-logo {
  display: flex; align-items: center;
  flex-shrink: 0; line-height: 1;
}
/* .nav-logo-mark removed – using inline SVG */

.nav-links {
  display: flex; align-items: center; gap: 2px; list-style: none; flex: 1;
  justify-content: center;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
  position: relative;
  display: flex; align-items: center; gap: 5px;
  font-size: var(--ds-type-ui-size); font-weight: var(--ds-type-ui-weight); line-height: var(--ds-type-ui-line-height); color: var(--text-muted);
  padding: 8px 13px; border-radius: 7px; transition: all 0.15s;
}
.nav-links > li > a:hover { color: var(--text); background: var(--border-light); }

/* Dropdown */
/* Unsichtbare Brücke um Gap zu überbrücken */
.nav-links > li > a[aria-haspopup]::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
}

.nav-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.nav-lang { font-family: var(--font-micro);
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  transition: background 0.15s;
}
.nav-lang:hover { background: var(--border-light); color: var(--text); }

/* Mobile nav */
.nav-mobile-toggle {
  display: none; background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--text); padding: 4px;
}
.nav-mobile-actions { display: none !important; }
@media(max-width: 1000px) {
  .nav-links { display: none; }
  .nav-mobile-toggle { display: block; }
  .nav-actions { display: none; }
  
  /* Mobile menu open state */
  .nav-links.nav-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ds-color-white);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    padding: 16px 20px 24px;
    z-index: 1000;
    max-height: 80vh;
    overflow-y: auto;
  }
  .nav-links.nav-open > li { width: 100%; }
  .nav-links.nav-open > li > a {
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--border-light);
    justify-content: space-between;
  }
  
  /* Mobile menu actions - NUR wenn Menü offen */
  .nav-links.nav-open .nav-mobile-actions {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
    list-style: none;
  }
  .nav-mobile-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
  }
  .nav-mobile-actions .nav-lang {
    text-align: center;
    padding: 10px;
    font-size: 13px;
    display: block;
  }
}

/* =========================================
   HERO
========================================= */
.hero {
  padding: 88px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 700px;
  background: radial-gradient(ellipse at center, rgba(117,49,174,0.07) 0%, transparent 65%);
  pointer-events: none;
}
/* Moving Gradient Orbs - kaum sichtbar */
@keyframes orbFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.15;
  }
  25% {
    transform: translate(25px, -30px) scale(1.03);
    opacity: 0.18;
  }
  50% {
    transform: translate(-15px, 20px) scale(0.97);
    opacity: 0.12;
  }
  75% {
    transform: translate(20px, 25px) scale(1.01);
    opacity: 0.16;
  }
}
/* Gradient Mesh Background */
@keyframes meshShift {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.02) rotate(0.3deg);
  }
}

/* Section Gradient (reusable) */
.has-gradient {
  position: relative;
  overflow: hidden;
}
.has-gradient .container {
  position: relative;
  z-index: 2;
}
/* Inverted colors for light sections */

/* Strong Gradient for App Builder Teaser */
@keyframes orbFloatStrong {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  25% {
    transform: translate(40px, -50px) scale(1.08);
    opacity: 0.6;
  }
  50% {
    transform: translate(-30px, 35px) scale(0.94);
    opacity: 0.45;
  }
  75% {
    transform: translate(35px, 40px) scale(1.04);
    opacity: 0.55;
  }
}
.hero .container {
  position: relative;
  z-index: 2;
}
@keyframes badgePulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.4; transform:scale(0.75); }
}
.hero h1 {
  font-size: var(--ds-type-display-xl-size); font-weight: 700;
  line-height: var(--ds-type-display-xl-line-height); margin-bottom: 6px;
  letter-spacing: var(--ds-type-display-xl-tracking);
  color: var(--text); margin-inline: auto;
}
.hero h1 .light {
  display: block; color: var(--text-muted); font-weight: 300;
}
/* Telefon: lange Komposita (Teilnehmermanagement) duerfen getrennt werden, statt die Schrift unter 34 px zu druecken */
@media (max-width: 520px) { .hero h1 { font-size: clamp(34px, 9.4vw, 44px); hyphens: auto; -webkit-hyphens: auto; } .hero-sub { font-size: 17px; margin-top: 20px; } }
.hero-sub {
  font-size: var(--ds-type-body-lg-size); color: var(--text-muted); max-width: 54ch;
  margin: 26px auto 36px; line-height: var(--ds-type-body-lg-line-height); font-weight: 400;
}
.hero-actions {
  display: flex; gap: 12px; justify-content: center;
  align-items: center; flex-wrap: wrap;
}
/* Grosse Website-Buttons ueberall wie im Hero der Startseite (16 px); das DS-Token button.fontSizeLg
   (18 px) bleibt fuer die Suite (Login-Seiten). Martin, 07.10.2026 */
.btn-lg { font-size: var(--ds-font-size-lg); }

/* =========================================
   CUSTOMER SHOWCASE CAROUSEL
========================================= */

/* Carousel Container */

/* Device Base */
.device {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) { .device:hover { transform: translateY(-8px) scale(1.02); } }

/* Phone Frame */

/* Case Screen */

/* Carousel Navigation */

/* Showcase Responsive */
@media(max-width: 700px) {
  @media (hover: hover) { .device:hover { transform: none; } }
}

/* =========================================
   LOGO MARQUEE
========================================= */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================
   INTRO SECTION
========================================= */

/* Cards grid on the right */

/* =========================================
   FEATURES / CORE FUNCTIONS
========================================= */

/* =========================================
   BACKEND TEASER
========================================= */

/* Dashboard Window Mock */

/* Dashboard Body */

/* Stats Row */

/* Quick Actions */

/* Promo Card */

/* Backend Teaser Responsive */

/* Features with screenshots - tabs */
.tab-nav {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 32px; overflow-x: auto;
}
.tab-btn {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
  padding: 10px 16px; border-bottom: 2px solid transparent;
  transition: all 0.2s; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.tab-btn i { font-size: 12px; }
.tab-btn.active { color: var(--violet); border-bottom-color: var(--violet); }
.tab-btn:hover:not(.active) { color: var(--text); }

.tab-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media(max-width:860px){ .tab-panels { grid-template-columns:1fr; } }

.tab-panel { display: none; }
.tab-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media(max-width:860px){ .tab-panel.active { grid-template-columns:1fr; } }

.tab-screenshot {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  aspect-ratio: 16/10; object-fit: cover; width: 100%;
  background: var(--border-light);
}
.tab-screenshot img { width: 100%; height: 100%; object-fit: cover; }

.tab-content h3 { font-size: 24px; font-weight: 700; letter-spacing: 0; margin-bottom: 12px; }
.tab-content p  { font-size: 16px; color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; }
.tab-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--violet);
  transition: gap 0.15s;
}
.tab-link:hover { gap: 10px; }

/* =========================================
   USE CASES
========================================= */

/* =========================================
   CASE STUDIES
========================================= */

/* =========================================
   STATS
========================================= */
/* =========================================
   APP BUILDER TEASER
========================================= */

/* Builder Steps - Horizontal wie im Bild */

/* Builder Window Mock */
.nav-label {
  font-size: 11px; font-family: var(--font-micro);
  font-weight: 500;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nav-divider {
  color: var(--text-light);
}
.nav-project {
  font-size: 12px; font-family: var(--font-micro);
  font-weight: 700;
  color: var(--text);
}

/* Builder Body */
.panel-title {
  display: block;
  font-size: 10px; font-family: var(--font-micro);
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: var(--ds-type-eyebrow-tracking);
  margin-bottom: 14px;
}

/* Template List */

/* Module List */

/* Phone Preview */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Design System Panel */

/* App Builder Responsive */

/* =========================================
   STATS SECTION
========================================= */

/* =========================================
   TESTIMONIALS
========================================= */

/* =========================================
   DRAG & DROP BUILDER
========================================= */

/* Mock UI */
.ms-label {
  font-size: 9px; font-family: var(--font-micro); font-weight: 600; letter-spacing: var(--ds-type-eyebrow-tracking);
  text-transform: uppercase; color: var(--text-light); padding: 8px 6px 4px;
}
.ms-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 6px; font-size: 11px; font-family: var(--font-micro); color: var(--text-muted);
  cursor: pointer; transition: background 0.15s;
}
.ms-item:hover { background: var(--surface); color: var(--violet); }
.ms-item.active { background: var(--violet-light); color: var(--violet); font-weight: 500; }
.ms-item i, .ms-item:hover i, .ms-item.active i { color: var(--violet); font-size: 11px; }
.ms-item:not(.active) i { color: var(--text-light); }

/* Builder copy */
.checklist { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 13px; }
.checklist li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-muted); }

/* =========================================
   MAGAZINE / BLOG
========================================= */

/* =========================================
   CTA FINAL
========================================= */
.cta-section {
  border-top: 1px solid var(--border);
}

/* =========================================
   PRICING PAGE
========================================= */

/* Pricing Hero */

/* Pricing Tabs */

/* Pricing Section */

/* Pricing Panels */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pricing Grid */

/* Price Card */

/* Popular Badge */

/* Price Header */

/* Price Meta */

/* Price Billing */

/* Price Features Accordion */

/* Price Note */

/* Enterprise Card */

/* Pricing CTA Section */

/* Logos Section on Pricing */

/* Service Packages Section */

/* Service Grid */

/* Service Card */

/* Service Details Accordion */

/* Guest Packages */

/* Platform Fee */

/* Final CTA */

/* Pricing Responsive */

/* =========================================
   FOOTER
========================================= */
footer {
  border-top: 1px solid var(--border);
  padding: 72px 0 32px;
  background: var(--white);
}
.app-badges { display: flex; flex-direction: column; gap: 10px; }
.app-badges-title { font-size: 13px; font-weight: 700; color: var(--text); }
.app-badges-row { display: flex; flex-wrap: wrap; gap: 10px; }
.app-badge { display: block; border-radius: 6px; line-height: 0; transition: opacity .2s; }
.app-badge img { display: block; width: auto; height: 40px; }
.app-badge:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
@media (hover: hover) { .app-badge:hover { opacity: .8; } }
.app-badges--dark .app-badges-title { color: var(--sky-fg, #fff); }
[data-theme="dark"] .app-badges-title { color: var(--text); }

/* =========================================
   SCROLL ANIMATIONS
========================================= */
/* Das Einblenden beim Scrollen ist entfallen: Inhalte stehen sofort da.
   Die Klasse .reveal bleibt im Markup, blendet aber nichts mehr aus. */
/* Erster Bildschirm: nicht auf main.js (defer) und den IntersectionObserver
   warten, sonst wird die Headline erst spaet sichtbar und Lighthouse misst
   den LCP auf einem gedrosselten Handy bei 3 s statt unter 1 s. Die Hero-
   Elemente laufen als reine CSS-Animation sofort nach dem ersten Paint. */
.hero .reveal { opacity: 1; transform: none; transition: none; animation: heroReveal .55s ease both; }
.hero .reveal-delay-1 { animation-delay: .08s; }
.hero .reveal-delay-2 { animation-delay: .16s; }
/* Nur gleiten, nicht einblenden: Text mit Deckkraft 0 zaehlt nicht als LCP-Kandidat, Lighthouse
   griff dann auf spaeter gezeichnete Elemente weiter unten zurueck (mobil 87 bis 100 je Lauf). */
@keyframes heroReveal { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero .reveal { animation: none; } }

/* =========================================
   PAGE HERO (Subpages)
========================================= */
.page-hero {
  padding: 140px 0 80px;
}
/* Seitenkopf der Unterseiten: Eyebrow · H1 (Display L, max. 20 Zeichen breit) · Subline links buendig darunter */
.page-hero > .container > h1 { max-width: 20ch; margin: 0 0 20px; }
.page-hero > .container > .hero-sub { margin: 0; max-width: 58ch; }
.page-hero > .container > .hero-actions { justify-content: flex-start; margin-top: 30px; }
/* Zentrierte Variante (Uebersichtsseiten mit Karten-Karussell) */
.page-hero--center > .container { text-align: center; }
.page-hero--center > .container > h1, .page-hero--center > .container > .hero-sub { margin-inline: auto; }
.page-hero--center > .container > .hero-actions { justify-content: center; }
@media(max-width: 900px) {
  .page-hero { padding: 120px 0 60px; }
}

/* =========================================
   IMAGE FEATURE CARDS (Subpages)
========================================= */

/* =========================================
   EDITOR SECTION
========================================= */
.check-list {
  list-style: none;
  margin-bottom: 28px;
}
/* Eintraege sind Fliesstext mit Links und <strong>: als Block, sonst wird jedes Inline-Stueck
   ein Flex-Element (Luecken um Links, mobil ragen Links ueber den Rand). Flex nur mit Icon vorn. */
.check-list li {
  display: block;
  gap: 12px;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 12px;
}
.check-list li:has(> i:first-child, > .svgicon:first-child) { display: flex; align-items: center; }
.check-list i {
  color: var(--ds-color-marketing-green-bright);
  font-size: 14px;
}

/* =========================================
   ANALYTICS SECTION
========================================= */

/* =========================================
   RELATED FEATURES
========================================= */


/* =========================================
   EVENT MAGAZIN SECTION
========================================= */

/* Magazin Grid */
.magazin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

/* Featured Card (first one) */

/* Magazin Responsive */
@media(max-width: 1000px) {
  .magazin-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media(max-width: 700px) {
  .magazin-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   CTA SECTION
========================================= */
.cta-section {
  padding: var(--section-y-sm) 0;
  background: var(--ds-color-white);
}
.btn-white {
  background: var(--ds-color-white);
  color: var(--violet);
}
.btn-white:hover {
  background: var(--ds-color-marketing-off-white-6);
}

/* =========================================
   PRICING PAGE STYLES
========================================= */

/* Pricing Hero */

/* Pricing Tabs */

/* Pricing Section */

/* Pricing Card */

/* Pricing Card Header */

/* Pricing Highlights */

/* Pricing Billing */

/* Pricing CTA Button */

/* Pricing Features Accordion */

/* Pricing Note */

/* Enterprise Card */

/* Special CTA */

/* Pricing Logos */

/* Service Packages Section */

/* Service Contact Card */

/* Service Packages Grid */

/* Service Package Item */

/* Service Details Accordion */
.btn-sm {
  padding: 8px 16px;
  font-size: 12px; font-family: var(--font-micro);
}

/* Guest Package Items */

/* Platform Fee */

/* Pricing Final CTA */

/* Pricing Responsive */

/* =========================================
   SUBPAGE STYLES (Feature Pages)
========================================= */

/* Subpage Hero */
.subpage-hero {
  padding: 120px 0 80px;
  background: linear-gradient(180deg, var(--bg-light) 0%, var(--ds-color-white) 100%);
}

/* Subpage Intro */

/* Feature Blocks Section */

/* Feature Block */

/* Feature Block Visual */

/* Feature Mock - Form */

/* Feature Mock - Field Types */

/* Feature Mock - Guests */

/* Feature Mock - Changes */

/* Feature Mock - Capacity */

/* Related Features Section */

/* Subpage CTA Section */

/* SEO Text Section */

/* Subpage Responsive */
@media(max-width: 700px) {
  .subpage-hero {
    padding: var(--section-y) 0 var(--section-y-sm);
  }
}

/* =========================================
   ABOUT PAGE STYLES
========================================= */

/* About Hero */

/* Team Section */

/* Team CTA Card */

/* History Section */

/* Timeline */
.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 120px;
  width: 2px;
  height: 100%;
  background: var(--border);
}

/* Timeline Item */

/* Timeline Date */

/* Timeline Content */

/* Timeline with Image */

/* Timeline CTA */

/* About Responsive */
@media(max-width: 900px) {
  .timeline::before {
    left: 24px;
  }
}

/* =========================================
   SOLUTIONS MASONRY GRID
========================================= */

/* Masonry Grid */

/* Solution Card Base */

/* Card Sizes */

/* Card with Background Image */

/* Dark Card (no image) */

/* CTA Card */

/* Card Content */

/* Responsive */

/* =========================================
   FEATURES BENTO GRID (Personio Style)
========================================= */

/* Bento Card Base */

/* Bento Card Sizes */

/* Dark Bento Card */

/* Violet Bento Card */

/* Light Accent Card */

/* Bento Content */

/* Bento Visual Area */

/* ---- UI Mock: Email Builder ---- */

/* ---- UI Mock: Form Builder ---- */

/* ---- UI Mock: Check-In Card ---- */

/* QR Code Badge */

/* ---- UI Mock: Analytics ---- */

/* Stats Mini Cards */

/* ---- UI Mock: Seating ---- */

/* ---- UI Mock: Guest List Flow ---- */

/* Flow Connector Line */

/* Bento Responsive */
/* =========================================
   FEATURES BENTO GRID
   Inspiriert von Personio - verschiedene 
   Kachelgrößen und visuelle Stile
========================================= */

/* Grid Layout */

/* === BENTO CARD BASE === */

/* === CARD SIZES === */

/* === CARD VARIANTS === */

/* Dark Card */

/* Violet/Purple Card */

/* Image Card */

/* === BENTO CONTENT ELEMENTS === */

/* Visual Container */

/* =========================================
   UI MOCK: EMAIL BUILDER
========================================= */

/* =========================================
   UI MOCK: FORM BUILDER
========================================= */

/* =========================================
   UI MOCK: CHECK-IN / IMAGE CARD
========================================= */

/* =========================================
   UI MOCK: ANALYTICS
========================================= */

/* =========================================
   UI MOCK: GUEST LIST FLOW
========================================= */

/* =========================================
   UI MOCK: SEATING / TABLE PLAN
========================================= */

/* =========================================
   WIDE CARD INNER GRID
========================================= */

/* =========================================
   RESPONSIVE
========================================= */


/* =========================================
   BENTO FEATURE GRID - ELEGANT VERSION
   Inspired by Personio Design System
========================================= */

/* =========================================
   BENTO GRID LAYOUT
========================================= */

/* =========================================
   CARD BASE STYLES
========================================= */

/* Card Content Wrapper */

/* =========================================
   CARD SIZES
========================================= */

/* =========================================
   CARD BACKGROUNDS
========================================= */

/* Soft Violet Gradient */

/* White with subtle border */

/* Dark elegant */

/* Image background with overlay */

/* =========================================
   TYPOGRAPHY
========================================= */

/* =========================================
   VISUAL CONTAINERS
========================================= */

/* =========================================
   WORKFLOW CARD (Hero Style)
========================================= */

/* Connection Line */

/* Workflow Items */

/* =========================================
   PROFILE CARD (Recruiting Style)
========================================= */

/* =========================================
   TESTIMONIAL CARD
========================================= */

/* =========================================
   ANALYTICS CARD
========================================= */

/* =========================================
   GUESTLIST CARD
========================================= */

/* =========================================
   INTEGRATION ICONS
========================================= */

/* =========================================
   FLOATING ELEMENTS
========================================= */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* =========================================
   RESPONSIVE
========================================= */

/* =========================================
   BENTO ADDITIONS - More Emotional
========================================= */

/* Improved Image Background Overlay */

/* Feature Icon Cards in Wide Card */

/* New Badge Styling */

/* Floating Badge Improvements */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Responsive adjustments for wide card */

/* =========================================
   BENTO CLEAN ADDITIONS
========================================= */

/* Check-In Visual */

/* Wide Card Inner Layout */

/* Cleaner Image Overlay */

/* Responsive Wide Card */

/* =========================================
   TICKETING VISUAL - Professional Design
========================================= */

/* Ticket Card */

.qr-pattern {
  width: 100%;
  height: 100%;
  color: var(--text);
}

/* Payment Providers */

/* Responsive Ticketing */
/* =========================================
   BENTO PREMIUM - Moving Gradients & App
========================================= */

/* Moving Gradient Background */

@keyframes moveGradient {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(50px, 30px) scale(1.1);
  }
  50% {
    transform: translate(-30px, 60px) scale(0.95);
  }
  75% {
    transform: translate(40px, -20px) scale(1.05);
  }
}

/* Card Size: App (Wide Premium) */

/* Premium Gradient Background */

/* Soft Background */

/* Row Layout for App Card */

/* Premium Label */

/* Compact Content (no collision) */

/* =========================================
   PHONE MOCKUP FOR APP CARD
========================================= */

/* =========================================
   ADJUSTED VISUALS - More Space
========================================= */

/* Guestlist compact */

/* Analytics compact */

/* Check-In compact */

/* Integration compact */

/* Wide Card */

/* =========================================
   RESPONSIVE
========================================= */

/* =========================================
   EMOTIONAL PHONE SCREEN
========================================= */

/* Mercedes Logo Image */
/* =========================================
   FEATURES BENTO GRID
   Inspiriert von Personio - verschiedene 
   Kachelgrößen und visuelle Stile
========================================= */

/* Grid Layout */

/* === BENTO CARD BASE === */

/* === CARD SIZES === */

/* === CARD VARIANTS === */

/* Dark Card */

/* Violet/Purple Card */

/* Image Card */

/* === BENTO CONTENT ELEMENTS === */

/* Visual Container */

/* =========================================
   UI MOCK: EMAIL BUILDER
========================================= */

/* =========================================
   UI MOCK: FORM BUILDER
========================================= */

/* =========================================
   UI MOCK: CHECK-IN / IMAGE CARD
========================================= */

.qr-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  background: var(--ds-color-white);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 2;
}

.qr-badge svg {
  width: 100%;
  height: 100%;
}

/* =========================================
   UI MOCK: ANALYTICS
========================================= */

/* =========================================
   UI MOCK: GUEST LIST FLOW
========================================= */

/* =========================================
   UI MOCK: SEATING / TABLE PLAN
========================================= */

/* =========================================
   WIDE CARD INNER GRID
========================================= */

/* =========================================
   RESPONSIVE
========================================= */

/* =====================================================================
   RELAUNCH-ERGÄNZUNGEN – neue globale Komponenten
   (Basis-Design unverändert; hier nur additive, wiederverwendbare Teile)
   ===================================================================== */

/* --- Typografie: Systemstack statt Webfont (Performance, CLS) --------- */
/* Schrift- und Spacing-Tokens -> design-system */
body { font-family: var(--font-sans); }

/* --- Skip-Link (Accessibility) ---------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--violet); color: var(--ds-color-white); padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- Sichtbare Focus-States ------------------------------------------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Hauptnavigation: Logo + Aktionen + Burger (Overlay-Muster BonSplit) */
body > header { position: sticky; top: 0; z-index: 500; }
#mainNav { background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-light); }
#mainNav.scrolled { box-shadow: var(--shadow-sm); }
#mainNav .nav-inner, .nvo-head .nav-inner { display: flex; align-items: center; gap: 16px;
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--page-gutter); height: var(--nav-h); }
#mainNav .nav-actions, .nvo-head .nav-actions { display: flex; align-items: center; margin-left: auto; }
#mainNav .nav-actions .btn, .nvo-head .nav-actions .btn { white-space: nowrap; }
.nav-burger { display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 18px; cursor: pointer; transition: all .15s; }
.nav-burger:hover { border-color: var(--violet); }
@media (max-width: 560px) { #mainNav .nav-actions .btn-ghost { display: none; } }

/* --- Nav-Overlay (zentrales Mega-Menü, Muster BonSplit) ----------------- */
#navOverlay { position: fixed; inset: 0; right: var(--gutter, 0); z-index: 1200; display: none; justify-content: center; background: rgba(17, 24, 39, .28); }
#navOverlay.is-open { display: flex; }
/* Navigation (nvo): Tabs je Bereich, Inhalte als Kacheln mit den Illustrations-Icons.
   Das Menü hält die Rasterbreite der Seite (--max-w) statt den ganzen Viewport zu
   füllen; außerhalb liegt ein abgedunkelter Hintergrund. */
.nvo { position: relative; width: 100%; max-width: var(--max-w); height: 100dvh; display: flex; flex-direction: column;
  background: var(--ds-color-marketing-off-white-5); color: var(--text); opacity: 0; transform: translateY(-6px);
  transition: opacity .22s ease, transform .26s cubic-bezier(.2,.7,.3,1); overflow: hidden;
  box-shadow: 0 0 0 1px var(--border), 0 30px 80px rgba(17, 24, 39, .25); }
#navOverlay.is-open .nvo { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nvo { transition: none; } }
.nvo-head { flex: 0 0 auto; height: var(--nav-h); padding: 0; border-bottom: 1px solid var(--border); }
.nvo-head .nav-inner { width: 100%; }
.nvo-tabbar { flex: 0 0 auto; display: flex; align-items: center; gap: 20px; padding: 18px 48px 0; }
.nvo-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nvo-alls { margin-left: auto; }
.nvo-all[hidden] { display: none; }
.nvo-tabs::-webkit-scrollbar { display: none; }
.nvo-tab { flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted);
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.012em; cursor: pointer; transition: background .18s ease, color .18s ease; }
.nvo-tab:hover { color: var(--text); background: #EFEDF4; }
.nvo-tab.is-on { background: var(--text); color: var(--ds-color-white); }
.nvo-tab:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

.nvo-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.nvo-panels { flex: 1 1 auto; min-height: 0; position: relative; }
.nvo-panel { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.nvo-panel[hidden] { display: none; }
.nvo-panel-main { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 48px 32px; }

/* Typo-Ebenen */
.nvo-all { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--violet); text-decoration: none; white-space: nowrap; }
.nvo-all:hover { text-decoration: underline; }

/* Kacheln */
.nvo-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nvo-tile { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 16px; min-height: 104px; background: var(--ds-color-white);
  border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
@media (hover: hover) { .nvo-tile:hover { border-color: #D9C7F5; background: #FBF8FF; transform: translateY(-1px); } }
.nvo-tile-ic { flex: none; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--ds-color-admin-line-soft); }
.nvo-tile-ic .illuicon { width: 50px; height: 50px; }
.nvo-tile:hover .nvo-tile-ic { background: var(--ds-color-violet-100); }
.nvo-tile-tx { min-width: 0; }
.nvo-tile-tx b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.018em; line-height: 1.2; margin-bottom: 3px; transition: color .18s ease; }
.nvo-tile-tx small { display: block; font-size: 13px; line-height: 1.35; color: var(--text-muted); }
.nvo-tile:hover b { color: var(--violet); }
.nvo-tile-arrow { margin-left: auto; color: var(--violet); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; flex: none; }
.nvo-tile-arrow svg { width: 15px; height: 15px; }
@media (hover: hover) { .nvo-tile:hover .nvo-tile-arrow { opacity: 1; transform: none; } }

/* Preview rechts (Tab Lösungen) */

/* Skyline und Fuß */
.nvo-foot { --nvo-foot-bg: #F1EEF7; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 12px 48px 16px; background: var(--nvo-foot-bg); }
.nvo-foot .app-badges { flex-direction: row; align-items: center; gap: 14px; }
.nvo-foot-end { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
/* Rechtliches mittig zwischen App-Badges und Termin-Button */
.nvo-legal { flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
/* Gesichter der Beratung, ueberlappend, Ring in Flaechenfarbe */
.nvo-faces { display: inline-flex; flex: none; }
.nvo-faces picture + picture { margin-left: -12px; }
.nvo-faces img { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--nvo-foot-bg); }
/* Ab Desktop drei Spalten: Badges links, Rechtliches exakt mittig, Beratung und Termin rechts */
@media (min-width: 981px) {
  /* 1fr ohne minmax(0, …): die Seitenspalten werden nie schmaler als ihr Inhalt; bei knapper Breite
     weicht der Linkblock etwas aus, statt dass Badges oder Beschriftung umbrechen */
  .nvo-foot { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nvo-foot .app-badges { justify-self: start; white-space: nowrap; }
  .nvo-foot .app-badges-row { flex-wrap: nowrap; }
  .nvo-legal { grid-column: 2; }
  .nvo-foot-end { grid-column: 3; justify-self: end; }
}
/* Schmaler Desktop: Badges, Links und Termin passen nicht nebeneinander; die Badges stehen auch im Seitenfuss */
@media (min-width: 981px) and (max-width: 1240px) { .nvo-foot .app-badges { display: none; } .nvo-legal { gap: 6px 16px; } }
.nvo-legal a { font-size: 12.5px; font-family: var(--font-micro); color: var(--text-muted); text-decoration: none; }
.nvo-legal a:hover { color: var(--violet); }

@media (max-width: 1080px) { .nvo-tiles, .nvo-tiles--loesungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .nvo-tabbar { padding: 12px 20px 0; }
  .nvo-alls { display: none; }
  .nvo-tab { height: 36px; padding: 0 14px; font-size: 14px; }
  .nvo-panel-main { padding: 20px 20px 28px; }
  .nvo-tiles, .nvo-tiles--loesungen { grid-template-columns: 1fr; gap: 8px; }
  .nvo-tile { padding: 12px 14px; min-height: 0; gap: 14px; }
  .nvo-tile-ic { width: 52px; height: 52px; } .nvo-tile-ic .illuicon { width: 40px; height: 40px; } .nvo-tile-tx b { font-size: 15.5px; }
  .nvo-foot { flex-direction: column; align-items: stretch; padding: 14px 20px 20px; gap: 12px; }
}
/* Dark Mode */
[data-theme="dark"] .nvo { background: #121317; color: var(--ds-color-night-50); }
[data-theme="dark"] .nvo-head { border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .nvo-tab:hover { background: rgba(255,255,255,.08); color: var(--ds-color-white); }
[data-theme="dark"] .nvo-tab.is-on { background: var(--ds-color-white); color: #14161C; }
[data-theme="dark"] .nvo-tile { background: #1B1D24; border-color: rgba(255,255,255,.1); color: var(--ds-color-night-50); }
[data-theme="dark"] .nvo-tile:hover { background: #221B2F; border-color: rgba(184,146,248,.4); }
[data-theme="dark"] .nvo-tile-ic { background: rgba(255,255,255,.06); }
[data-theme="dark"] .nvo-foot { --nvo-foot-bg: #0E0F13; color: #3A3F4B; }


/* --- Footer: Münchner Skyline bei Nacht ------------------------------------
   Grafik 2172 x 432 (feste Maße gegen CLS). Darüber SVG im gleichen Koordinaten-
   raum (Sterne, Riesenrad, Free-Fall-Tower, Wiesn-Rauch, Olympiaturm-Feuer) und
   zwei Canvas-Ebenen aus footer-sky.js: Isar (Wasser-Shader in Bildfarben) und
   Allianz Arena (rote Spielbeleuchtung). Das Bild startet hart am Container. --- */
.sky { --sky-ground: #061322; --sky-tile: #143550; --sky-rule: rgba(255,255,255,.10); --sky-fg: #e3e8f2; --sky-soft: #c3cbdb; --sky-muted: #8d97ad;
  position: relative; isolation: isolate; overflow: hidden; line-height: 0; background: var(--sky-ground); color: var(--sky-fg); margin-top: var(--spacing-lg); border-top: 0; padding: 0; }
.sky__stage { position: relative; }
.sky__img { display: block; width: 100%; height: auto; position: relative; }
/* Auslauf unten: Isar und Bäume lösen sich in die Footer-Fläche auf (liegt über den Canvas-Ebenen) */
.sky__stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; height: 18%;
  background: linear-gradient(to bottom, rgba(6,19,34,0) 0%, rgba(6,19,34,.6) 60%, var(--sky-ground) 100%); }
.sky__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.sky__isar, .sky__arena { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.sky__fire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* Riesenrad: Rad dreht, Gondeln bleiben lotrecht, Lampen laufen */
.sky .wheel { transform-box: fill-box; transform-origin: center; animation: skySpin 48s linear infinite; }
@keyframes skySpin { to { transform: rotate(360deg); } }
.sky .gondola { transform-box: fill-box; transform-origin: center; animation: skyCounter 48s linear infinite; }
@keyframes skyCounter { to { transform: rotate(-360deg); } }
.sky .bulb { animation: skyPulse 2.4s ease-in-out infinite; }
.sky .bulb:nth-child(3n+1) { animation-delay: .8s; }
.sky .bulb:nth-child(3n+2) { animation-delay: 1.6s; }
@keyframes skyPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
/* Olympiaturm: Hindernisfeuer blinkt weich */
.sky .beacon { animation: skyBeacon 1.4s ease-in-out infinite; }
@keyframes skyBeacon { 0%,100% { opacity: .25; } 45%,55% { opacity: 1; } }
/* Wiesn-Rauch: steigt langsam, wächst, verweht, löst sich auf */
.sky .puff { animation: skyPuff var(--t) linear infinite; animation-delay: var(--d); opacity: 0; }
@keyframes skyPuff {
  0%   { transform: translate(var(--sx), var(--sy)) scale(.5); opacity: 0; }
  14%  { opacity: .6; }
  60%  { opacity: .32; }
  100% { transform: translate(calc(var(--sx) + 28px), calc(var(--sy) - 70px)) scale(2.3); opacity: 0; }
}
/* Free-Fall-Tower: langsam hoch, kurz halten, fallen, unten warten */
.sky .freefall { animation: skyFreefall 14s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes skyFreefall {
  0%   { transform: translate(1519px, 262px); }
  46%  { transform: translate(1519px, 234px); animation-timing-function: linear; }
  58%  { transform: translate(1519px, 234px); animation-timing-function: cubic-bezier(.55,0,1,.6); }
  63%  { transform: translate(1519px, 262px); animation-timing-function: ease-out; }
  66%  { transform: translate(1519px, 257px); animation-timing-function: ease-in; }
  69%  { transform: translate(1519px, 262px); }
  100% { transform: translate(1519px, 262px); }
}
/* Sterne funkeln */
.sky .stars circle { animation: skyTwinkle 7s ease-in-out infinite; }
.sky .stars circle:nth-child(2n) { animation-delay: 1.3s; animation-duration: 9s; }
.sky .stars circle:nth-child(3n) { animation-delay: 2.6s; animation-duration: 6s; }
@keyframes skyTwinkle { 0%,100% { opacity: 0; } 50% { opacity: .9; } }
.sky-body { background: var(--sky-ground); padding: 50px clamp(20px, 4.6vw, 100px) 0; line-height: 1.5; }
.sky-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr 1fr .75fr; gap: 0; align-items: start; }
.sky-grid > * { padding: 0 clamp(16px, 2.2vw, 44px); min-width: 0; }
.sky-grid > :first-child { padding-left: 0; }
.sky-grid > :last-child { padding-right: 0; }
.sky-brand { border-right: 1px solid var(--sky-rule); }
.sky-loc { border-left: 1px solid var(--sky-rule); }
.sky-brand .nav-logo-svg { color: var(--ds-color-white); height: 40px; margin-bottom: 18px; }
.sky-body p { color: var(--sky-soft); line-height: 1.6; font-size: 13.5px; margin: 0 0 22px; max-width: 38ch; }
.sky-social { display: flex; gap: 10px; }
.sky-social a { width: 40px; height: 40px; border-radius: 6px; background: var(--sky-tile); display: grid; place-items: center; color: var(--ds-color-white); transition: background .15s; }
.sky-social a:hover, .sky-social a:focus-visible { background: var(--violet); outline: none; }
/* Newsletter im Footer (Double-Opt-in, siehe /newsletter/) */
.sky-nl { margin-top: 26px; max-width: 38ch; }
.sky-nl-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sky-nl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sky-nl-row input { flex: 1 1 180px; min-width: 0; height: 40px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--sky-rule); background: var(--sky-tile); color: var(--ds-color-white); font: inherit; font-size: 13.5px; }
.sky-nl-row input::placeholder { color: var(--sky-muted); }
.sky-nl-row input:focus-visible { outline: 2px solid var(--violet-mid); outline-offset: 1px; }
/* iOS zoomt beim Fokus in Felder unter 16px; auf Touch-Breiten deshalb 16px */
@media (max-width: 760px) { .sky-nl-row input { font-size: 16px; } }
.sky-nl-row .btn { height: 40px; background: var(--violet); border-color: var(--violet); color: var(--ds-color-white); }
.sky-nl-row .btn:hover, .sky-nl-row .btn:focus-visible { background: var(--ds-text-brand-hover); border-color: var(--ds-text-brand-hover); color: var(--ds-color-white); }
.sky-body .sky-nl-note { margin: 10px 0 0; font-size: 12px; color: var(--sky-muted); }
.sky-body .sky-nl-note[data-state="ok"] { color: var(--ds-color-green-200); }
.sky-body .sky-nl-note[data-state="error"] { color: var(--ds-color-red-200); }
.sky-nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sky-body h2 { font-size: 11px; font-weight: 700; letter-spacing: var(--ds-type-eyebrow-tracking); text-transform: uppercase; color: #cdd5e5; margin: 0 0 12px; font-family: var(--font-sans); }
.sky-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sky-body ul a { color: var(--sky-fg); text-decoration: none; font-size: 13.5px; }
.sky-body ul a:hover, .sky-body ul a:focus-visible { color: var(--violet-mid); text-decoration: underline; outline: none; }
.sky-loc .loc { color: var(--sky-fg); font-size: 13.5px; line-height: 1.45; margin: 0 0 10px; }
.sky-bottom { margin-top: 38px; padding: 22px 0 26px; border-top: 1px solid var(--sky-rule); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: 12px; font-family: var(--font-micro); color: var(--sky-muted); }
.sky-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.sky-bottom a { color: var(--sky-muted); text-decoration: none; }
.sky-bottom a:hover, .sky-bottom a:focus-visible { color: var(--ds-color-white); text-decoration: underline; outline: none; }
@media (max-width: 980px) {
  .sky-grid { grid-template-columns: 1fr 1fr; gap: 30px 0; }
  .sky-grid > * { padding: 0; }
  .sky-brand { grid-column: 1 / -1; border: 0; }
  .sky-loc { border: 0; }
}
@media (max-width: 520px) { .sky-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .sky .wheel, .sky .gondola, .sky .bulb, .sky .beacon, .sky .puff, .sky .freefall, .sky .stars circle { animation: none; }
  .sky__isar, .sky__arena, .sky__fire { display: none; }
  .sky .stars circle { opacity: .5; }
}

/* --- Breadcrumb -------------------------------------------------------- */
.breadcrumb { padding: 26px 0 0; font-size: 13px; line-height: 1; }
.breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.breadcrumb-list a { text-decoration: none; }   /* 4.8:1 auf Weiss */
[data-theme="dark"] .breadcrumb, [data-theme="dark"] .breadcrumb-list a { color: #9AA2B1; }
[data-theme="dark"] .breadcrumb-list li + li::before { color: #3A3F4B; }

/* --- Hub-Karten-Grid ---------------------------------------------------- */
.hub-grid { display: grid; gap: 16px; margin: var(--spacing-md) 0; }
.hub-grid-2 { grid-template-columns: repeat(2, 1fr); }
.hub-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hub-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .hub-grid-3, .hub-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hub-grid-2, .hub-grid-3, .hub-grid-4 { grid-template-columns: 1fr; } }
.hub-card { display: flex; flex-direction: column; gap: 8px; padding: 22px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--text); transition: border-color .15s, box-shadow .15s, transform .12s; }
@media (hover: hover) { .hub-card:hover { border-color: var(--violet-mid); box-shadow: var(--shadow-md);
  transform: translateY(-2px); text-decoration: none; } }
.hub-card-icon { width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 10px; background: var(--violet-light); color: var(--violet); font-size: 18px; }
.hub-card-title { font-size: 17px; font-weight: 700; }
.hub-card-text { font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.hub-card-link { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--violet); }

/* --- Footer -------------------------------------------------------------- */

/* --- Prose (migrierte Inhalte: Magazin, Legal) -------------------------- */
/* Lesetext (Referenzen, Rechtliches, Kontakt): Textbreite ~66 Zeichen, Ueberschriften mit klarem Abstand nach oben, engem nach unten */
.prose { max-width: 720px; margin: 0 auto; line-height: var(--ds-type-body-line-height); font-size: var(--ds-type-body-size); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--ds-type-h2-size); line-height: var(--ds-type-h2-line-height); margin-top: 2.2em; margin-bottom: .5em; }
.prose h3 { font-size: var(--ds-type-h3-size); line-height: var(--ds-type-h3-line-height); margin-top: 1.8em; margin-bottom: .4em; }
.prose h4 { margin-top: 1.4em; margin-bottom: .3em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose p, .prose li { max-width: 66ch; }
/* Kontaktformular: DS-Felder, zwei Spalten fuer Name/Firma */
.kf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .kf-row { grid-template-columns: 1fr; } }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.prose th { background: var(--surface); }

/* =====================================================================
   KI-Launch – zentrales Prompt-Feld im Hero (Einfallstor zum Studio)
   ===================================================================== */

/* --- Templates über dem Input (Detailgrad-Varianz) --- */

/* --- Hohes Prompt-Feld, Button darunter --- */

/* =====================================================================
   BILDWELT – emotionale Fotoebene (Muster: BonSplit)
   Einheitliche Behandlung: große Radien, violetter Soft-Shadow,
   dezentes Marken-Overlay, Foto-Credit-Pill, sanfter Hover-Zoom.
   ===================================================================== */
.media-banner {
  position: relative; margin: 6px auto 42px; border-radius: 24px; overflow: hidden;
  aspect-ratio: 21 / 8;
  box-shadow: 0 30px 80px rgba(117, 49, 174, 0.12), 0 12px 32px rgba(0, 0, 0, 0.08);
}
.media-banner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) { .media-banner:hover img { transform: scale(1.035); } }
.media-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(117,49,174,0.06) 0%, transparent 35%,
              transparent 65%, rgba(17,24,39,0.28) 100%);
}
.photo-credit {
  position: absolute; bottom: 12px; right: 16px; z-index: 3;
  font-size: 11px; font-family: var(--font-micro); color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.32); padding: 4px 10px; border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.photo-credit a { color: rgba(255,255,255,.9); text-decoration: none; }
.photo-credit a:hover { text-decoration: underline; }

.lifestyle { padding: 56px 0; }
.lifestyle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lifestyle--flip .lifestyle-img { order: 2; }
.lifestyle-img {
  position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; margin: 0;
  box-shadow: 0 30px 80px rgba(117, 49, 174, 0.12), 0 12px 32px rgba(0, 0, 0, 0.08);
}
.lifestyle-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.4, 0, .2, 1); }
@media (hover: hover) { .lifestyle-img:hover img { transform: scale(1.04); } }
.lifestyle-copy h2 { font-size: 30px; letter-spacing: 0; margin-bottom: 14px; }
.lifestyle-copy p { color: var(--text-muted); line-height: 1.7; font-size: 16.5px; }
.lifestyle-quote {
  border-left: 3px solid var(--violet); padding: 8px 0 8px 20px; margin: 22px 0 0;
  font-style: italic; font-size: 19px; line-height: 1.55; color: var(--text);
}
@media (max-width: 900px) {
  .lifestyle-grid { grid-template-columns: 1fr; gap: 28px; }
  .lifestyle--flip .lifestyle-img { order: 0; }
  .media-banner { aspect-ratio: 16 / 9; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .media-banner img, .lifestyle-img img { transition: none; }
  @media (hover: hover) { .media-banner:hover img, .lifestyle-img:hover img { transform: none; } }
}

/* =====================================================================
   SCHRIFT (Inter, Rollen in tokens.css) + SCHWARZE PRIMÄR-CTAS (airlst2027)
   ===================================================================== */

/* h1-h4 in Display: siehe Basis oben. Zahlen: */
.hero h1 { font-family: var(--font-display); }
/* Erster Bildschirm der Startseite (DE und EN, body ohne .is-sub): Kopfzeile, Hero und
   Anlass-Reiter setzen "Inter Hero" (fonts.css, font-display: optional). Die Liste nennt
   bewusst kein "Inter": sonst faellt der Browser bei spaeter Schrift auf Inter (swap)
   zurueck und zeichnet doch wieder um. Die Variablen werden mit ueberschrieben, damit
   auch Bausteine mit var(--font-*) bzw. var(--ds-font-family-*) folgen. Unterseiten und
   der Rest der Startseite bleiben bei Inter mit swap. */
body:not(.is-sub) { --hero-ff: "Inter Hero", "Helvetica Neue", Helvetica, Arial, sans-serif; }
body:not(.is-sub) #mainNav,
body:not(.is-sub) .hero,
body:not(.is-sub) .config-demo .cd-types {
  font-family: var(--hero-ff);
  --font-sans: var(--hero-ff); --font-display: var(--hero-ff); --font-micro: var(--hero-ff);
  --ds-font-family-sans: var(--hero-ff); --ds-font-family-display: var(--hero-ff); --ds-font-family-micro: var(--hero-ff);
  /* Rollen-Tokens des Design Systems (Buttons, Labels, Ueberschriften ...) */
  --ds-type-app-title-family: var(--hero-ff); --ds-type-body-family: var(--hero-ff); --ds-type-body-lg-family: var(--hero-ff);
  --ds-type-body-sm-family: var(--hero-ff); --ds-type-button-family: var(--hero-ff); --ds-type-caption-family: var(--hero-ff);
  --ds-type-display-l-family: var(--hero-ff); --ds-type-display-xl-family: var(--hero-ff); --ds-type-eyebrow-family: var(--hero-ff);
  --ds-type-h1-family: var(--hero-ff); --ds-type-h2-family: var(--hero-ff); --ds-type-h3-family: var(--hero-ff);
  --ds-type-h4-family: var(--hero-ff); --ds-type-label-family: var(--hero-ff); --ds-type-meta-family: var(--hero-ff);
  --ds-type-num-family: var(--hero-ff); --ds-type-ui-family: var(--hero-ff);
}

/* Primaerbutton schwarz: siehe Design System (action.primary) */

/* --- Topbar transparent, Hero-Gradient über den gesamten Bildschirm ---- */
body:has(.hero) #mainNav:not(.scrolled),
body.is-sub #mainNav:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
}

.hero {
  margin-top: calc(-1 * var(--nav-h));
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--nav-h) + 48px);
}

.hero {
  background: linear-gradient(172deg,
    #EDE4FA 0%,
    #F2ECFB 30%,
    #F8F5FD 60%,
    #FDFCFE 100%);
}

/* --- Header-Feinschliff: größeres Logo, reduzierter Burger.
       Höhe und Luft nach oben sind auf allen Seiten gleich (76px), auch auf der Startseite. --- */
/* --nav-h: 76px -> design-system (size.navHeight) */

#mainNav .nav-inner, .nvo-head .nav-inner {
  padding-top: 4px;
}

.nav-logo img {
  height: 42px !important;
  width: auto;
}

/* Termin buchen in der Menue-Fussleiste: gleiche Groesse wie der Kopf-CTA "Kostenlos testen" */
#mainNav .nav-actions .btn-primary, .nvo-head .nav-actions .btn-primary, .nvo-foot .nvo-foot-booking {
  font-size: 15px;
  padding: 12px 26px;
}

#mainNav .nav-actions, .nvo-head .nav-actions {
  gap: 14px;
}

.nav-burger {
  width: auto;
  height: auto;
  padding: 8px 2px;
  border: none;
  background: transparent;
  color: var(--ds-color-grey-900);
}

.nav-burger:hover {
  border: none;
  background: transparent;
  color: var(--ds-color-black);
}

.nav-burger .svgicon {
  width: 26px;
  height: 26px;
}

/* --- Sprachswitch im Header --------------------------------------------- */
.nav-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-color-marketing-grey-muted);
}

.nav-lang a {
  color: var(--ds-color-marketing-grey-muted);
  transition: color 0.15s;
  padding: 4px 2px;
}

.nav-lang a:hover {
  color: var(--ds-color-grey-900);
}

.nav-lang a[aria-current="true"] {
  color: var(--ds-color-grey-900);
  font-weight: 600;
}

/* --- Sprach-Dropdown (Globe, BonSplit-Muster) --------------------------- */
.nav-lang {
  position: relative;
}

.nav-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 2px;
  border: none;
  background: transparent;
  color: var(--ds-color-grey-900);
  cursor: pointer;
  transition: color 0.15s;
}

.nav-lang-btn:hover {
  color: var(--ds-color-black);
}

.nav-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 160px;
  background: var(--ds-color-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 600;
}

.nav-lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s;
}

.nav-lang-menu a:hover {
  background: var(--border-light);
}

.nav-lang-menu a[aria-current="true"] {
  color: var(--violet);
}

.nav-lang-menu a .svgicon {
  color: var(--violet);
}

/* Header-Grid an Inhalts-Container angleichen: Logo auf einer Linie mit dem Content */
#mainNav .nav-inner, .nvo-head .nav-inner {
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* --- Kompakter Header beim Scrollen ------------------------------------- */
#mainNav .nav-inner, .nvo-head .nav-inner {
  transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              padding-top 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

#mainNav.scrolled .nav-inner {
  height: 72px;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Scrolled: auch der Balken selbst schrumpft (nicht nur .nav-inner) */
#mainNav {
  transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

#mainNav.scrolled {
  height: 72px;
}

/* Topbar: Startseite und Unterseiten identisch (siehe Header-Feinschliff oben) */

/* .link-cta -> design-system/src/styles/components/link.css */

/* Header: Login in Harmonie mit Globe */
#mainNav .btn-ghost, .nvo-head .btn-ghost {
  color: var(--ds-color-grey-900);
  font-size: 15px;
  gap: 5px;
}
#mainNav .btn-ghost:hover, .nvo-head .btn-ghost:hover {
  background: transparent;
  color: var(--ds-color-black);
}
#mainNav .btn-ghost .svgicon, .nvo-head .btn-ghost .svgicon { color: var(--ds-color-grey-900); }
#mainNav .btn-ghost:hover .svgicon, .nvo-head .btn-ghost:hover .svgicon { color: var(--ds-color-black); }

/* Header: Beschriftungen stehen mittig in ihrer Flaeche. Die frueheren
   Versatz-Korrekturen (+2px Label, 14/10 Innenabstand im Button) glichen die
   Metrik von Helvetica Now aus; seit der Umstellung auf Inter sassen die
   Texte dadurch sichtbar zu tief. */
#mainNav .nav-actions .btn-primary, .nvo-head .nav-actions .btn-primary, .nvo-foot .nvo-foot-booking { padding-top: 12px; padding-bottom: 12px; }

/* --- Bereiche im Balken: Funktionen, Lösungen, Preise -------------------
   Echte Links auf die Hubs; mit JS öffnen sie das Menü-Overlay auf ihrem Tab.
   Stehen links vom Design-Umschalter, im Header wie im Kopf des Overlays. */
.nav-menu { display: flex; align-items: center; gap: 12px; margin-right: 10px; }
.nav-menu-item {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: var(--ds-font-weight-medium);
  line-height: 1;
  color: var(--ds-color-grey-900);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav-menu-item:hover { color: var(--ds-color-black); background: var(--border-light); }
.nav-menu-item:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
/* aktueller Bereich der Seite */
.nav-menu-item.is-current { color: var(--violet); }
/* im Overlay geöffneter Bereich */
.nav-menu-item.is-on { color: var(--violet); background: var(--violet-light); }
[data-theme="dark"] .nav-menu-item { color: var(--text); }
[data-theme="dark"] .nav-menu-item:hover { background: var(--grey-100); color: var(--text); }
[data-theme="dark"] .nav-menu-item.is-current { color: var(--ds-color-violet-300); background: transparent; }
[data-theme="dark"] .nav-menu-item.is-on { color: var(--ds-color-violet-300); background: var(--grey-100); }
/* Seiten mit dunklem Hero (body.has-dark-hero): Menue steht vor dem Foto, solange nicht gescrollt ist. */
body.has-dark-hero #mainNav:not(.scrolled) .nav-menu-item { color: rgba(255,255,255,.82); }
body.has-dark-hero #mainNav:not(.scrolled) .nav-menu-item:hover { color: #fff; background: rgba(255,255,255,.12); }
body.has-dark-hero #mainNav:not(.scrolled) .nav-menu-item.is-current,
body.has-dark-hero #mainNav:not(.scrolled) .nav-menu-item.is-on { color: #fff; background: rgba(255,255,255,.16); }
/* Schmale Fenster: der Burger trägt die Navigation allein */
@media (max-width: 1000px) { .nav-menu { display: none; } }

/* =====================================================================
   DUNKLES DESIGN
   Umschalter: <html data-theme="dark">. Grundlage sind die Tokens –
   was über var(--text) etc. läuft, kippt automatisch mit.
   --white bleibt bewusst Weiß (dient als Kontrastfarbe auf Violett).
   ===================================================================== */
/* Dark-Tokens -> design-system (tokens.css, :root[data-theme=dark]) */

[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* Kopfzeile */
[data-theme="dark"] #mainNav {
  background: rgba(20, 22, 29, 0.92);
  border-bottom-color: var(--border);
}
[data-theme="dark"] #mainNav .btn-ghost,
[data-theme="dark"] #mainNav .btn-ghost .svgicon,
[data-theme="dark"] .nvo-head .btn-ghost,
[data-theme="dark"] .nvo-head .btn-ghost .svgicon,
[data-theme="dark"] .nav-lang-btn { color: var(--text); }
[data-theme="dark"] #mainNav .btn-ghost:hover,
[data-theme="dark"] #mainNav .btn-ghost:hover .svgicon,
[data-theme="dark"] .nvo-head .btn-ghost:hover,
[data-theme="dark"] .nvo-head .btn-ghost:hover .svgicon,
[data-theme="dark"] .nav-lang-btn:hover { color: var(--ds-color-white); }
[data-theme="dark"] .nav-burger span,
[data-theme="dark"] .nav-burger .svgicon { color: var(--text); }

/* Primär-CTA im dunklen Design: Marken-Violett als Verlauf mit Schein.
   Weißer Text: 7.5:1 am dunklen, 5.2:1 am hellen Ende (Hover 6.2:1 / 4.6:1). */
[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, var(--ds-color-violet-700) 0%, #9146D8 100%);
  color: var(--ds-color-white);
  box-shadow: 0 6px 22px rgba(145, 70, 216, 0.38);
}
[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(135deg, #8438C8 0%, #9950E0 100%);
  color: var(--ds-color-white);
  box-shadow: 0 10px 30px rgba(153, 80, 224, 0.55);
}
[data-theme="dark"] .btn-outline {
  background: transparent; color: var(--text); border-color: var(--border);
}
[data-theme="dark"] .btn-outline:hover { background: var(--grey-100); }

/* Sprachmenü */
[data-theme="dark"] .nav-lang-menu {
  background: var(--grey-50);
  border-color: var(--border);
}
[data-theme="dark"] .nav-lang a { color: var(--text); }
[data-theme="dark"] .nav-lang a:hover { background: var(--grey-100); }

/* Schalter selbst */
.nav-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ds-color-grey-900);
  cursor: pointer;
  border-radius: 9999px;
  transition: color 0.2s, background 0.2s;
}
.nav-theme:hover { background: var(--border-light); }
.nav-theme .svgicon { display: block; }
.nav-theme-sun { display: none; }
[data-theme="dark"] .nav-theme { color: var(--text); }
[data-theme="dark"] .nav-theme:hover { background: var(--grey-100); }
[data-theme="dark"] .nav-theme-moon { display: none; }
[data-theme="dark"] .nav-theme-sun { display: block; }

/* Logo: eine Inline-Grafik, Wortmarke folgt currentColor (spart zwei Abrufe).
   Größe wie zuvor beim <img> – die alte Regel .nav-logo img greift hier nicht. */
.nav-logo-svg { display: block; color: var(--ds-color-grey-dark); height: 42px; width: auto; }
[data-theme="dark"] .nav-logo-svg { color: var(--ds-color-night-50); }   /* wie zuvor beim <img> */

/* Restliche helle Flächen der Startseite */
[data-theme="dark"] .cta-section { background: var(--bg); }
[data-theme="dark"] .platform-card {
  background: #1E1630;
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .platform-cards .platform-card:first-child {
  background: linear-gradient(#241A38 34%, #2E1F4A 100%);
}

/* Dunkles Design – Kontraste nachgezogen (alle Werte gemessen, Ziel 4.5:1) */   /* 5.3:1 auf var(--ds-color-grey-dark) */

/* =====================================================================
   TRUSTBAND — der Schnitt nach der Startseiten-Animation.
   Dunkler Block: Versprechen links, Siegel rechts, darunter die
   Kundenlogos nach Branchen, per Umschalter neu gemischt.
   ===================================================================== */

/* Die Zeile sitzt auf der oberen Kante des Logo-Panels (wie beim Vorbild):
   die Pseudo-Elemente zeichnen die Oberkante samt Ecken, das Panel selbst
   hat keine Oberkante mehr und rueckt um die halbe Zeilenhoehe hoch. */

/* Der Schnitt wie beim Vorbild: der dunkle Grund beginnt schon hinter dem
   unteren Teil der Demo-Karte und laeuft nahtlos in das Trustband. */
.config-demo { position: relative; }
.config-demo::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%); width: 100vw;
  z-index: 0;
}
.config-demo .cd-shell { position: relative; z-index: 2; }
/* Die Glas-Karte braucht auf der dunklen Kante einen opaken Kern,
   sonst schimmert der Grund durch und die Flaechen wirken grau. */
.config-demo .cd-screen { background: #FCFCFE !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.config-demo .cd-side { background: var(--ds-color-marketing-off-white-4) !important; }
@media (max-width: 900px) {
  .config-demo::after { height: 180px; }
}

/* =====================================================================
   OBERE BUEHNE (16.09.2026): Verlauf statt dunkler Flaeche.
   Hinter der Systembuehne laeuft ein Violett-Verlauf (hell -> kraeftig
   -> weiss), das Trustband darunter steht auf Weiss mit dunkler Schrift
   und monochromen Logos. Ersetzt den dunklen Schnitt (.config-demo::after)
   und die dunkle Trustband-Flaeche; Vorbild personio.de.
   ===================================================================== */
/* body-Praefix: showcase.css liegt im Bundle hinter main.css und setzt sonst
   ab 1200px wieder eine Mindesthoehe (Hero fuellt den Viewport). Der Abstand
   zwischen CTA und Eventtyp-Reihe soll knapp sein. */
body .hero { min-height: 0; padding-bottom: 8px; }
body .config-demo { padding-top: 72px; }
/* Die Buehne steht sofort da; das Einfahren beim ersten Scrollen ist entfallen. */
/* Der weisse Ring (20 px + 1 px Linie) gehoert mit ins Raster: Screen um die
   Ringbreite einruecken, damit die Aussenkante des Rings auf der Rasterkante liegt. */
body .config-demo--fp .cd-screen { margin-left: 21px; margin-right: 21px; }

.config-demo { padding-bottom: 170px; }
.config-demo::after {
  top: 40px; bottom: 0; height: auto;
  /* leicht wie die Event-App-Sektion: Lavendel, kein sattes Violett */
  background: linear-gradient(180deg,
    rgba(240, 231, 255, 0) 0%,
    var(--ds-color-marketing-violet-tint-1) 12%,
    var(--ds-color-violet-100) 34%,
    var(--ds-color-violet-200) 56%,
    var(--ds-color-violet-100) 72%,
    var(--ds-color-marketing-violet-tint-3) 86%,
    var(--bg) 100%);
}
/* Schatten und Rundung am Bildschirm selbst, nicht am (eckigen) Wrapper */
.config-demo--fp .cd-screen { border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 16, 40, .05), 0 24px 60px rgba(117, 49, 174, .16); }
/* Dark Theme: die weissen Originale der Siegel */   /* sanftes Graublau statt Lavendel */
/* Panel mit durchgehendem Rahmen; die Umschalter-Zeile liegt wie eine Legende auf der Oberkante */
/* Kundenlogos in Originalfarben; nur die sehr hellen Dateien nachdunkeln */
@media (max-width: 900px) {
  .config-demo { padding-bottom: 40px; }
  .config-demo::after { top: 60px; }
}
[data-theme="dark"] .config-demo::after {
  background: linear-gradient(180deg,
    rgba(42, 23, 64, 0) 0%,
    var(--ds-color-violet-d050) 14%,
    var(--ds-color-violet-d100) 55%,
    var(--ds-color-violet-d050) 78%,
    var(--bg) 100%);
}

/* =====================================================================
   TRUST (16.09.2026, Neubau): Siegelzeile, links Story mit Featured
   Customer und Kennzahlen, rechts Kunden nach Branchen in Tabs.
   Alles auf Tokens; ersetzt das fruehere Trustband (.tb-*).
   ===================================================================== */
.tr { background: var(--bg); padding: 0 0 96px; }

.tr-seals {
  list-style: none; margin: 0 0 72px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 0;
}
.tr-seals li { display: flex; align-items: flex-start; gap: 16px; padding: 0 28px; border-left: 1px solid var(--border); }
.tr-seals li:first-child { padding-left: 0; border-left: 0; }
.tr-seal { flex: none; height: 44px; width: auto; max-width: 84px; object-fit: contain; }
.tr-seals b { display: block; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tr-seals span { display: block; font-size: 13px; line-height: 1.5; color: var(--text-muted); max-width: 24ch; }

.tr-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.tr-story { padding-right: clamp(0px, 3vw, 40px); border-right: 1px solid var(--border); }
.tr-title {
  margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--text);
}
.tr-sub { margin: 0 0 32px; font-size: 17px; line-height: 1.6; color: var(--text-muted); max-width: 52ch; }

.tr-feat { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 24px; align-items: center; }
.tr-feat-logo {
  display: flex; align-items: center; justify-content: center; height: 124px;
  background: var(--ds-color-white); border: 1px solid var(--border); border-radius: var(--ds-radius-lg);
}
.tr-feat-logo img { width: auto; }
.tr-feat-kicker { display: block; font-size: 11px; font-family: var(--font-micro); font-weight: 600; letter-spacing: var(--ds-type-eyebrow-tracking); text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.tr-feat-body b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tr-feat-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }

.tr-kpis { display: flex; margin: 36px 0 0; padding: 26px 0 0; border-top: 1px solid var(--border); }
.tr-kpis div { flex: 1 1 auto; padding: 0 20px; border-left: 1px solid var(--border); }
.tr-kpis div:first-child { padding-left: 0; border-left: 0; }
.tr-kpis dt { white-space: nowrap; font-family: var(--font-display); font-size: clamp(22px, 1.9vw, 28px); font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.tr-kpis dd { margin: 6px 0 0; font-size: 13.5px; color: var(--text-muted); }

/* Branchen-Auswahl: Custom Select mit Fuellspur */
.tr-pick { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; min-height: 44px; }
/* Auswahlzeile auf einer Linie mit der Headline links (Eyebrow 20px + Abstand 14px + halbe Differenz zur Zeilenhoehe) */
.tr-more .tr-pick { margin-top: 35px; }
.tr-pick-link { margin-left: auto; }
.tr-pick-label { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.tr-select { position: relative; display: inline-flex; }
.tr-select-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 700 15px/1.3 var(--font-sans); color: var(--text);
  background: var(--ds-color-white); border: 1px solid var(--border); border-radius: 12px;
  padding: 9px 14px; transition: border-color 160ms ease-out;
}
.tr-select-btn > * { position: relative; }
.tr-select-btn:hover, .tr-select.open .tr-select-btn { border-color: var(--text); }
.tr-select-btn .svgicon { color: var(--text-muted); transition: transform 180ms ease-out; }
.tr-select.open .tr-select-btn .svgicon { transform: rotate(180deg); }
.tr-select-fill { position: absolute !important; top: 0; bottom: 0; left: 0; width: 0; background: var(--ds-color-night-100); pointer-events: none; }
.tr-select-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 100%; margin: 0; padding: 6px; list-style: none;
  background: var(--ds-color-white); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--ds-shadow-lg);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.tr-select.open .tr-select-menu { opacity: 1; transform: none; pointer-events: auto; }
.tr-select-menu li { padding: 9px 12px; border-radius: 9px; cursor: pointer; font: 600 14px/1.3 var(--font-sans); color: var(--text-muted); white-space: nowrap; }
.tr-select-menu li:hover { background: var(--ds-color-grey-100); color: var(--text); }
.tr-select-menu li.is-sel { background: var(--ds-color-violet-100); color: var(--violet); }

/* Logo-Wall: festes Raster 3 x 4 = 12 Kacheln je Seite, alle Kacheln gleich hoch;
   Logos in einer einheitlichen Box (Hoehe/Breite gedeckelt), Feinabgleich je Logo ueber --s */
.tr-logos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 96px; gap: 16px 28px;
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.tr-logos.is-out { opacity: 0; transform: translateY(6px); }
.tr-logos.is-in { opacity: 0; transform: translateY(-6px); transition: none; }
.tr-logos li {
  display: flex; align-items: flex-end; justify-content: center; padding: 0 12px 18px; /* Logos stehen unten auf einer Linie */
}
.tr-logos li[hidden] { display: none; }
.tr-logos img {
  width: auto; height: auto;
  max-height: calc(34px * var(--s, 1)); max-width: calc(128px * var(--s, 1));
  filter: grayscale(1) brightness(.62) contrast(1.05); opacity: .78;
  transition: filter 180ms ease-out, opacity 180ms ease-out;
}
.tr-select-fill[hidden] { display: none; }
.tr-logos li:hover img { filter: none; opacity: 1; }
.tr-logos img[data-mono] { filter: none; }

/* Dark Theme */
[data-theme="dark"] .tr-feat-logo { background: var(--ds-color-night-900); }
[data-theme="dark"] .tr-feat-logo img, [data-theme="dark"] .tr-logos img { filter: brightness(0) invert(1); opacity: .8; }
[data-theme="dark"] .tr-logos img[data-mono] { filter: invert(1); }
[data-theme="dark"] .tr-logos li:hover img { opacity: 1; }
[data-theme="dark"] .tr-select-btn, [data-theme="dark"] .tr-select-menu { background: var(--bg); }
[data-theme="dark"] .tr-select-menu li.is-sel { background: var(--ds-color-violet-d100); }

@media (max-width: 1100px) {
  .tr-seals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .tr-seals li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .tr-grid { grid-template-columns: 1fr; }
  .tr-story { padding-right: 0; border-right: 0; padding-bottom: 36px; border-bottom: 1px solid var(--border); }
}
@media (max-width: 600px) {
  .tr { padding: 24px 0 64px; }
  .tr-seals { grid-template-columns: 1fr; }
  .tr-seals li { padding: 0; border-left: 0; }
  .tr-feat { grid-template-columns: 1fr; }
  .tr-feat-logo { height: 96px; }
  .tr-kpis { flex-wrap: wrap; gap: 18px 0; }
  .tr-kpis div { flex-basis: 50%; }
  .tr-kpis div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .tr-pick, .tr-more .tr-pick { flex-wrap: wrap; margin-top: 0; }
  .tr-pick-link { margin-left: 0; flex-basis: 100%; }
  .tr-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 76px; gap: 8px 16px; }
  .tr-logos li { padding-bottom: 12px; }
  .tr-logos img { max-height: calc(28px * var(--s, 1)); max-width: calc(110px * var(--s, 1)); }
}

/* Prinzip: CTA unter dem Ablauf Anforderung -> Konfiguration -> Loesung */
.principle-cta { margin-top: 28px; }

/* Unterseiten: Hero wie auf der Startseite – weißer Grund, Kopfzeile transparent
   darüber (wird erst beim Scrollen weiß), darunter der violette Schein und die
   weichen Farbflecken. <main> rutscht unter die Kopfzeile wie .hero. */
main:has(> .page-hero), main:has(> .fp > .fp-hero), main:has(> .wp > .wp-head) {
  position: relative;
  margin-top: calc(-1 * var(--nav-h));
  padding-top: var(--nav-h);
  background: var(--ds-color-white);
}
main:has(> .page-hero)::before, main:has(> .fp > .fp-hero)::before, main:has(> .wp > .wp-head)::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -180px; left: 50%; transform: translateX(-50%);
  width: min(1100px, 100%); height: 620px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(117, 49, 165, 0.07) 0%, rgba(117, 49, 165, 0) 70%);
}
main:has(> .page-hero)::after, main:has(> .fp > .fp-hero)::after, main:has(> .wp > .wp-head)::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 0; left: 0; right: 0; height: 900px;
  background:
    radial-gradient(circle at 12% 18%, rgba(117, 49, 165, 0.045), rgba(117, 49, 165, 0) 28%),
    radial-gradient(circle at 88% 38%, rgba(84, 94, 211, 0.04), rgba(84, 94, 211, 0) 26%),
    radial-gradient(circle at 45% 78%, rgba(29, 227, 210, 0.03), rgba(29, 227, 210, 0) 22%);
}
main:has(> .page-hero) > *, main:has(> .fp > .fp-hero) > *, main:has(> .wp > .wp-head) > * { position: relative; z-index: 1; }
.page-hero { background: transparent; }
[data-theme="dark"] main:has(> .page-hero), [data-theme="dark"] main:has(> .fp > .fp-hero), [data-theme="dark"] main:has(> .wp > .wp-head) { background: var(--bg); }

/* --- Header auf schmalen Telefonen: Logo, Sprache, CTA und Burger passen in 360 px;
   der Theme-Schalter wandert ins Menue-Overlay (dort bleibt er sichtbar) --- */
@media (max-width: 480px) {
  #mainNav .nav-inner, .nvo-head .nav-inner { gap: 10px; }
  #mainNav .nav-actions, .nvo-head .nav-actions { gap: 6px; }
  #mainNav .nav-actions .nav-theme, .nvo-head .nav-actions .nav-theme { display: none; }
  #mainNav .nav-actions .btn-primary, .nvo-head .nav-actions .btn-primary { font-size: 13.5px; padding: 10px 12px; }
  #mainNav .nav-logo-svg, .nvo-head .nav-logo-svg { width: 100px; height: 31px; }
}

/* Reduzierte Bewegung: Netz unter den Einzelregeln. Endlos- und Einblendanimationen springen auf
   ihren Endzustand, Uebergaenge entfallen. !important, weil die Einzelregeln der Seitenfamilien
   spaeter laden und sonst gewinnen wuerden. JS-Animationen pruefen die Einstellung selbst. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Menue offen: Seite dahinter fest (html und body, sonst scrollt iOS Safari weiter),
   Chat-Knopf aus, damit er die Aktionsleiste unten nicht verdeckt */
html.nav-open, html.nav-open body { overflow: hidden; }
html.nav-open .alc-launch, html.nav-open .alc-panel { visibility: hidden; }

/* --- Kleinsthandys (<400px, iPhone SE, kleine Android): Kopfzeile nur Logo und Burger.
   Sprache und "Kostenlos testen" liegen dann in der Aktionsleiste des Menues (.nvo-acts). --- */
@media (max-width: 399px) {
  #mainNav .nav-actions .nav-lang, #mainNav .nav-actions .btn-primary { display: none; }
}

/* --- Menue-Overlay schmal: Kopf mit Logo und Schliessen, Aktionen unten in der Daumenzone.
   Vorher brauchte der Kopf 497px und schob Logo und Kacheln links aus dem Bild. --- */
.nvo-acts { display: none; }
@media (max-width: 760px) {
  .nvo-head .nav-actions { display: none; }
  .nvo-head .ano-close { margin-left: auto; }
  .nvo-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .nvo-acts .btn { justify-content: center; min-height: 46px; }
  .nvo-acts-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .nvo-acts-lang { display: flex; gap: 4px; }
  .nvo-acts-lang a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px;
    font-size: 14px; color: var(--text-muted); text-decoration: none; }
  .nvo-acts-lang a[aria-current="true"] { color: var(--text); background: var(--border-light); font-weight: 600; }
  .nvo-acts .nav-theme { width: 44px; height: 44px; }
  /* App-Badges stehen auch im Footer; im Menue brauchen die Kacheln die Hoehe */
  .nvo-foot .app-badges { display: none; }
  .nvo-foot-end { margin-left: 0; justify-content: flex-start; }
  .nvo-foot-booking { flex: 1 1 auto; justify-content: center; min-height: 46px; font-size: 15px; }
}
/* Querformat auf dem Handy: wenig Hoehe, die Kacheln brauchen den Platz */
@media (max-height: 500px) {
  .nvo-foot .app-badges, .nvo-legal { display: none; }
  .nvo-foot { padding-top: 8px; padding-bottom: 8px; }
}

/* Siegel: einheitlich grau statt bunt – ruhiger, professioneller; Farbe erst beim Hover */
.tr-seal { filter: grayscale(1) contrast(.92); opacity: .72; transition: filter .3s, opacity .3s; }
.tr-seals li:hover .tr-seal { filter: none; opacity: 1; }
[data-theme="dark"] .tr-seal { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .tr-seal { transition: none; } }
/* Siegel-Reihe mittig unter der Bühne */
@media (min-width: 901px) { .tr-seals { grid-template-columns: repeat(4, auto); justify-content: center; } .tr-seals li:first-child { padding-left: 0; } .tr-seals li:last-child { padding-right: 0; } }
@media (min-width: 901px) { .tr-seals li { padding: 0 28px; } .tr-seals span { max-width: 20ch; } }

/* Brotkrümel: in gedecktem Petrol, aktuelle Seite betont (Kontrast ≥ 4.5:1 auf Weiß) */
/* Linkfarbe der ganzen Website = Farbe der Brotkrumen (Entscheidung Martin, 07.10.2026) */
:root { --link: #2F6E7E; --link-hover: #255A67; --link-on-dark: #9FD0DA; }
[data-theme="dark"] { --link: #7FB3BF; --link-hover: #9FD0DA; }
.breadcrumb { font: var(--ds-type-meta-weight) 12.5px / 1.4 var(--font-micro); font-family: var(--font-micro); letter-spacing: .01em; color: var(--link); }
.breadcrumb-list li + li::before { content: '/'; margin: 0 12px; color: var(--link); opacity: .8; }
.breadcrumb-list a { color: var(--link); font-weight: 400; }
.breadcrumb-list a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb-list [aria-current="page"] { color: var(--link-hover); font-weight: 700; }
/* Einheitlicher Linkstil im Fliesstext: Petrol, dezent unterstrichen, beim Ueberfahren voll.
   !important, weil die Seitenfamilien (fp, sp, wp, sda, vg) eigene Linkfarben mit hoeherer Spezifitaet setzen;
   so gilt eine Regel statt zehn. Buttons, Navigation (Inhaltsverzeichnisse), Karten-Links (mit Block-Inhalt oder Bild)
   und Links mit Klasse bleiben aussen vor. */
main :is(p, li, td, dd, figcaption, blockquote, small, address, .fp-faq-a, .sp-faq-a, .hub-card-text) a:not([class]):not(nav a):not(:has(div, p, h2, h3, h4, img, svg, picture)) {
  color: var(--link) !important; text-decoration: underline !important; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent) !important;
  text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: inherit;
}
main :is(p, li, td, dd, figcaption, blockquote, small, address, .fp-faq-a, .sp-faq-a, .hub-card-text) a:not([class]):not(nav a):not(:has(div, p, h2, h3, h4, img, svg, picture)):hover {
  color: var(--link-hover) !important; text-decoration-color: currentColor !important;
}
/* Dunkle Flaechen: helles Petrol, damit der Link lesbar bleibt */
main :is(.bp-cond, .bp-cond-note, .wp-bridge, .sp-on-dark, .sda-case-copy, .mcp-notes-more) { --link: var(--link-on-dark); --link-hover: #fff; }


/* ============================================================
   Abschluss-CTA in voller Breite über dem Footer (site-cta, 20.09.2026).
   Dunkle Fläche mit violettem Lichtschein oben rechts, drei Spalten:
   Text mit Aktionen · vier Punkte · Kontaktkarte. Violett nur für Akzent
   und Primäraktion; Weiß/Nacht aus der Footer-Palette.
   ============================================================ */
.site-cta { position: relative; overflow: hidden; color: #fff; padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid rgba(255,255,255,.06); }
.site-cta + .sky { margin-top: 0; }
/* Weicher Übergang CTA-Band → Skyline: Sterne im Band, Nachthimmel blendet oben ins Bandschwarz. */
.site-cta { background: linear-gradient(180deg, #0F0B18 0%, #0F0B18 55%, #131331 100%); border-bottom: 0; }
.site-cta__stars { position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background-image: radial-gradient(1.2px 1.2px at 12% 78%, rgba(255,255,255,.9), transparent 60%), radial-gradient(1px 1px at 31% 88%, rgba(255,255,255,.7), transparent 60%), radial-gradient(1.5px 1.5px at 48% 72%, rgba(255,255,255,.85), transparent 60%), radial-gradient(1px 1px at 57% 93%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1.3px 1.3px at 66% 81%, rgba(255,255,255,.8), transparent 60%), radial-gradient(1px 1px at 79% 90%, rgba(255,255,255,.65), transparent 60%), radial-gradient(1.4px 1.4px at 88% 70%, rgba(255,255,255,.85), transparent 60%), radial-gradient(1px 1px at 94% 84%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1px 1px at 22% 62%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 41% 96%, rgba(255,255,255,.7), transparent 60%), radial-gradient(1.2px 1.2px at 5% 92%, rgba(255,255,255,.75), transparent 60%), radial-gradient(1px 1px at 73% 60%, rgba(255,255,255,.45), transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, transparent 35%, #000 100%); mask-image: linear-gradient(180deg, transparent 35%, #000 100%); }
.site-cta + .sky .sky__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #131331 0%, rgba(19,19,49,.9) 18%, rgba(19,19,49,.5) 50%, rgba(19,19,49,0) 100%); }
.site-cta::before { content: ""; position: absolute; right: -10%; top: -40%; width: 60vw; max-width: 900px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(117,49,174,.55), rgba(117,49,174,.18) 45%, transparent 72%); pointer-events: none; }
.site-cta::after { content: ""; position: absolute; left: -22%; top: -30%; width: 50vw; max-width: 700px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(84,94,211,.28), transparent 70%); pointer-events: none; }
.site-cta__grid { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 1040px) { .site-cta__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, .95fr); gap: clamp(32px, 4vw, 64px); } }
.site-cta__kicker { display: inline-flex; align-items: center; gap: 12px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); font-size: 10.5px; font-family: var(--font-micro); font-weight: 700; letter-spacing: var(--ds-type-eyebrow-tracking); text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 22px; }
.site-cta__kicker::before { content: ""; width: 22px; height: 2px; background: var(--ds-color-marketing-accent, #C79BF0); border-radius: 2px; }
.site-cta h2 { font-family: var(--font-display); font-size: clamp(30px, 3.3vw, 48px); line-height: 1.02; letter-spacing: 0; margin: 0 0 18px; color: #fff; text-wrap: balance; }
.site-cta h2 em { font-style: normal; display: block; background: linear-gradient(90deg, #C9AEF6, #B98BE8 60%, #9FF3EC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-cta__copy > p { margin: 0 0 26px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 52ch; }
.site-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.site-cta__actions .btn-primary { background: var(--violet, #7531AE); border-color: var(--violet, #7531AE); color: #fff; }
.site-cta__actions .btn-primary:hover { background: #8A45C4; border-color: #8A45C4; }
.site-cta__actions .btn-outline { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; }
.site-cta__actions .btn-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); color: #fff; }
.site-cta__proof { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: rgba(255,255,255,.7); }
.site-cta__proof li { display: inline-flex; align-items: center; gap: 7px; }
.site-cta__proof svg { color: #C9AEF6; }

.site-cta__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.site-cta__items li { display: grid; grid-template-columns: 50px 1fr; gap: 14px; align-items: center; }
.site-cta__items i { width: 50px; height: 50px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.site-cta__items i .illuicon { width: 30px; height: 30px; display: block; }
.site-cta__items b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.site-cta__items span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.62); }

.site-cta__card { border-radius: 20px; padding: 26px 26px 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.site-cta__person { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.site-cta__faces { display: inline-flex; flex: none; }
.site-cta__faces picture + picture { margin-left: -18px; }
.site-cta__person img { display: block; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(201,174,246,.7); object-fit: cover; }
.site-cta__hand { font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-size: 19px; line-height: 1.1; color: #C9AEF6; transform: rotate(-4deg); }
.site-cta__card > b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.site-cta__card > p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.66); }
.site-cta__card ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 8px; font-size: 14px; }
.site-cta__card li { display: flex; align-items: center; gap: 10px; }
.site-cta__card li svg { color: #C9AEF6; flex: none; }
.site-cta__card li a { color: #fff; text-decoration: none; }
.site-cta__card li a:hover { text-decoration: underline; }
.site-cta__trust { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 6px; font-size: 12.5px; font-family: var(--font-micro); color: rgba(255,255,255,.62); }
.site-cta__trust span { display: inline-flex; align-items: center; gap: 6px; }
.site-cta__trust svg { color: #F2C879; }
@media (max-width: 1039px) { .site-cta__items { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .site-cta__items { grid-template-columns: 1fr; } .site-cta__actions .btn { width: 100%; justify-content: center; } }
/* Abstand nach oben: der letzte Inhaltsblock braucht keinen eigenen Rand mehr */
main > .fp > :last-child, main > .sp > :last-child { padding-bottom: clamp(40px, 5vw, 72px); }

/* Grosse Buttons immer mit Pfeil (Martin, 07.10.2026): wo im Markup kein Icon steht,
   setzt CSS denselben Pfeil wie svg_icon('arrow-right', 16). Navigation, Login und kleine
   Buttons (.btn-sm) bleiben ohne. */
.btn.btn-lg:not(:has(svg))::after,
.sda-btn:not(:has(svg))::after,
.ds-btn--primary:not(:has(svg))::after,
.ds-btn--secondary:not(:has(svg))::after {
  content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}