/* ============================================================
   miraTEQ – style.css
   Mobile First | Professionelle Webdesign Agentur 2026 v2
   ============================================================ */

/* ── 1. ROOT VARIABLES ───────────────────────────────────── */
:root {
  --primary:       #6592E6;
  --primary-dark:  #2260D2;
  --primary-light: #EEF2FF;
  --accent:        #47B5ED;
  --dark:          #0F172A;
  --dark-2:        #1E293B;
  --dark-3:        #334155;
  --gray-700:      #374151;
  --gray-500:      #6B7280;
  --gray-300:      #D1D5DB;
  --gray-100:      #F3F4F6;
  --gray-50:       #F8FAFC;
  --white:         #FFFFFF;
  --success:       #10B981;
  --whatsapp:      #25D366;

  /* Neues Farbsystem – Helles Design */
  --bg-warm-white: #faf9f7;
  --bg-warm-gray:  #f0ede8;
  --bg-dark:       #1a2540;
  --bg-darkest:    #111827;
  --text-dark:     #1f2937;
  --text-mid:      #4b5563;
  --accent-blue:   #5b9cf6;

  --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-thai: 'Sarabun', system-ui, sans-serif;

  --radius:    10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
  --shadow:    0 4px 24px rgba(0,0,0,0.09);
  --shadow-md: 0 8px 40px rgba(0,0,0,0.12);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.16);
  --transition: 0.25s ease;
  --container: 1180px;
  --build: 20260422;
}

/* ── 2. RESET & BASE ─────────────────────────────────────── */
/* Universal-Reset in @layer reset wrappen — sonst gewinnt es bei Normal-Cascade
   gegen ALLES in hero-legacy/components-Layern (unlayered > layered).
   Welle 5.13.1: gefixt nachdem v2-Components UND hero-CTA-Padding kaputt waren. */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* overflow-x: clip statt hidden — verhindert horizontal-scroll OHNE
     containing-block-Kontext zu erzeugen (dieser bricht position:sticky
     für Cinema-Section). Browser-Support: Chrome 90+, Safari 16+, Firefox 81+.
     Fallback: ältere Browser fallen auf overflow:visible zurück. */
  overflow-x: clip;
}

body {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  /* Welle 5.25 v8: Continuous Light Base. Page-Level atmospheric Mesh via
     body::before (Apple Vision Pro / Stripe Atlas / GitHub Pattern 2026).
     Section-BGs sind alle transparent → page-mesh schimmert durch alle. */
  background: #FAFBFD;
  overflow-x: clip;
  position: relative;
}

/* ════════════════════════════════════════════════════════════════════════
   Welle 5.25 v10 — FINAL Apple/Stripe/Bangkok-Premium-Pattern
   ────────────────────────────────────────────────────────────────────────
   Body solid Continuous Light. Hero hat eigene WebGL-Caustic (peak only).
   Body-Sections clean transparent. KEINE background-animation pro Section.
   Premium-Wow kommt durch CONTENT + POLISH (Hover-Glows, Section-Reveals,
   Card-Animations) — NICHT durch Background-Drama.
   ════════════════════════════════════════════════════════════════════════ */
body.is-dark-bg {
  background-color: #0A1B33;
}

/* ════════════════════════════════════════════════════════════════════════
   Welle 5.25 v8 — ALLE Section-Aurora-Overlays deaktiviert.
   Page-Mesh übernimmt — kein per-Section-Aurora mehr nötig.
   ════════════════════════════════════════════════════════════════════════ */
.atelier-aurora,
.ref-portfolio__aurora,
.process-aurora,
.pricing-cloud,
.about-ambient,
.contact-aurora {
  display: none !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--primary-dark); }

ul { list-style: none; }

/* ── 2b. THAI TEXT-WRAPPING (Welle 5.27 v43, 2026-05-23) ───────────────────
   Thai-Schrift hat KEINE Word-Spaces. iOS Safari (WebKit) nutzt internen
   ICU-Thai-Word-Breaker, ABER nur wenn der Container overflow-wrap erlaubt.
   Chrome DevTools iPhone-Simulator nutzt Blink (Desktop-Chromium) → break-
   Behavior unterschiedlich → DevTools zeigt korrektes Layout, echtes iPhone
   überläuft. Plus: Sarabun font-display:optional → iOS-Fallback auf
   Sukhumvit (andere Char-Widths) → zusätzliche Layout-Drift.

   Fix: globaler overflow-wrap auf Text-Containern. Min-width:0 für Flex-
   Children damit Wrapping greift (default min-content sonst).

   Betrifft alle Sprachen (DE, EN, TH) — harmless für Latin, kritisch für TH. */
p, h1, h2, h3, h4, h5, h6, li, dd, dt, blockquote, figcaption, span, a,
.lede, [class*="title"], [class*="sub"], [class*="text"], [class*="desc"] {
  overflow-wrap: break-word;
  word-wrap: break-word; /* legacy alias für ältere WebKit */
}
/* Flex/Grid-Children müssen min-width:0 haben damit overflow-wrap greift —
   default ist min-content (= "Wort darf nicht abgeschnitten werden"). */
main > *, section > *, .container > * {
  min-width: 0;
}

/* ── 2c. THAI HEADLINE LINE-HEIGHT (Welle 5.27 v46, 2026-05-23) ───────────
   WebKit/iOS Safari rendert für Thai-Text automatisch ~35-40% mehr
   line-height als für Latin (Auto-Akkommodation für Vokal-Marks).
   Mit unitless line-height:1.05 wird Thai effektiv auf 1.45 inflated.
   Verifizierter Wert (gemessen mit playwright-webkit auf iPhone-15):
     EN line-height: 1.05 ratio → 1.05 effektiv
     TH line-height: 1.05 ratio → 1.45 effektiv (zu viel space!)
   Fix: explizit kleinerer ratio für html[lang="th"]. Top/Bottom-Marks
   bleiben sichtbar weil Sarabun Mark-aware ist. */
html[lang="th"] .wd-hero-h1,
html[lang="th"] .hero-h1 {
  line-height: 1;
}
html[lang="th"] .wd-section-title,
html[lang="th"] .section-title,
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3 {
  line-height: 1.15;
}

/* ── 3. TYPOGRAPHY ───────────────────────────────────────── */
/* In @layer base damit Component-Overrides aus layer(hero-legacy) +
   layer(components) durchschlagen können. Vorher unlayered → blockierte
   z.B. .notification-title { color: #fff } im Hero-Mobile (Welle 5.14). */
@layer base {
  h1, h2, h3, h4, h5 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--dark);
  }
  h1 { font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 800; }
  h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
  h3 { font-size: clamp(1.1rem, 3vw, 1.3rem); }
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 0.75rem;
}
.section-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1rem;
}
.section-sub {
  font-size: 1.05rem;
  color: var(--gray-500);
  max-width: 560px;
}
.section-header { margin-bottom: 3rem; }
.section-header.centered { text-align: center; }
.section-header.centered .section-sub { margin: 0 auto; }

/* ── 4. LAYOUT ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}
section { padding: 5rem 0; }

/* ── 5. BUTTONS ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  min-height: 48px;
  text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, #0082c0 0%, #00b4d4 100%);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 0 20px rgba(0,170,210,0.40), 0 0 40px rgba(0,170,210,0.15), 0 4px 20px rgba(0,0,0,0.4);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.9rem 2.2rem;
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.5s ease;
}
.btn-primary:hover::after { left: 150%; }
.btn-primary:hover {
  background: linear-gradient(135deg, #0093d0 0%, #00c8e8 100%);
  border-color: transparent;
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 0 30px rgba(0,190,230,0.60), 0 0 60px rgba(0,190,230,0.22), 0 8px 30px rgba(0,0,0,0.4);
}
.btn-ghost {
  background: rgba(255,255,255,0.07);
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.8);
  color: var(--white);
}
.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: var(--white);
}
.btn-dark {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}
.btn-dark:hover {
  background: var(--dark-2);
  border-color: var(--dark-2);
  color: var(--white);
  transform: translateY(-1px);
}
.btn-whatsapp {
  background: var(--whatsapp);
  color: var(--white);
  border-color: var(--whatsapp);
}
.btn-whatsapp:hover {
  background: #1da851;
  border-color: #1da851;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,211,102,0.4);
}
.btn-lg {
  padding: 1rem 2.25rem;
  font-size: 1.05rem;
  min-height: 56px;
}
.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0;
}
#hero .cta-group { justify-content: space-between; align-items: center; width: 100%; flex-wrap: nowrap; }

/* ── 6. NAVIGATION ───────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0.75rem 0;
  background: #080f1e;
  transition: all 0.3s ease;
}
#navbar.scrolled {
  background: rgba(8, 15, 30, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0.5rem 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-logo {
  flex-shrink: 0;
}
.nav-logo img {
  height: 52px;
  width: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  transition: box-shadow var(--transition), transform var(--transition);
}
.nav-logo:hover img {
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}
.nav-tagline {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #60a5fa;
  opacity: 0.85;
  border-top: 1px solid rgba(96,165,250,0.4);
  padding-top: 4px;
  margin-top: 4px;
}
.nav-links {
  display: none;
  gap: 0.25rem;
}
.nav-links a {
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  border-radius: 6px;
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-links a:hover {
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.07);
}
#navbar.scrolled .nav-links a { color: rgba(255,255,255,0.85); }
#navbar.scrolled .nav-links a:hover { color: #ffffff; background: rgba(255,255,255,0.1); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.lang-switcher {
  display: none;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.lang-switcher a {
  padding: 0.3rem 0.4rem;
  color: rgba(255,255,255,0.65);
  transition: color var(--transition);
}
.lang-switcher a:hover { color: rgba(255,255,255,0.9); }
.lang-switcher a.active { color: #ffffff; font-weight: 600; }
#navbar.scrolled .lang-switcher a { color: rgba(255,255,255,0.65); }
#navbar.scrolled .lang-switcher a:hover { color: rgba(255,255,255,0.9); }
#navbar.scrolled .lang-switcher a.active { color: #ffffff; }
.lang-sep { color: rgba(255,255,255,0.3); font-weight: 300; }
#navbar.scrolled .lang-sep { color: rgba(255,255,255,0.3); }

.nav-cta { display: none; }
.nav-cta,
.nav-cta.btn,
.nav-cta.btn-primary {
  box-shadow: none !important;
  background: transparent;
  color: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  /* Welle 5.27 v41 (2026-05-23): Touch-Target-Compliance (Apple HIG 44×44 min)
     + Premium-Tier-Lesbarkeit (Stripe/Linear: font 14-15px, padding ~10×20px).
     Vorher: 0.35rem × 0.95rem (5.6×15.2px, font 12.8px) = 34px Höhe — unter
     Touch-Min, gequetscht. Jetzt: 0.7rem × 1.4rem (~11×22px, font 14.7px) = ~42px. */
  padding: 0.7rem 1.4rem !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  min-height: unset !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}
.nav-cta:hover,
.nav-cta.btn:hover,
.nav-cta.btn-primary:hover {
  box-shadow: none !important;
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.6) !important;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background var(--transition);
}
.hamburger:hover { background: rgba(255,255,255,0.1); }
#navbar.scrolled .hamburger:hover { background: rgba(255,255,255,0.1); }
.hamburger span {
  display: block;
  height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: all 0.3s ease;
}
#navbar.scrolled .hamburger span { background: rgba(255,255,255,0.85); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ── Nav Dropdown ──────────────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: flex !important;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}
.nav-dropdown-arrow {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
  opacity: 0.6;
}
.nav-dropdown.open .nav-dropdown-arrow { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.4rem;
  min-width: 190px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  z-index: 100;
  list-style: none;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu li { list-style: none; }
.nav-dropdown-menu a {
  display: block;
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1a2540;
  border-radius: 8px;
  transition: all 0.15s;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  color: #2563eb;
  background: rgba(37,99,235,0.07);
}

/* ── MOBILE MENU — Linear meets miraTEQ Sheet (Welle 5.1d) ─── */

.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-backdrop.open {
  display: block;
  opacity: 1;
}

.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 999;
  height: 100vh;
  height: 100dvh;            /* Dynamic viewport for iOS Safari toolbar */
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  background: rgba(252, 248, 240, 0.96);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
  transform: translateY(-100%);
  pointer-events: none;
  transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
}
.mobile-menu.open {
  transform: translateY(0);
  pointer-events: auto;
}
body.is-dark-bg .mobile-menu {
  background: rgba(15, 23, 42, 0.94);
  border-bottom-color: rgba(245, 232, 214, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu    { transition: none; }
  .mobile-backdrop { transition: none; }
}

/* Sheet Header */
.mobile-menu-header {
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  height: 60px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
}
body.is-dark-bg .mobile-menu-header {
  border-bottom-color: rgba(245, 232, 214, 0.08);
}
.mobile-menu-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.mobile-menu-logo .nav-clean-logo-img {
  height: 26px;
  width: auto;
}

/* Nav Groups */
.mobile-menu-nav {
  flex: 1;
  padding: 0.5rem 0;
  overflow-y: auto;
}
.mobile-menu-section {
  padding: 1rem 0 0.5rem;
}
.mobile-menu-section + .mobile-menu-section {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  margin-top: 0.25rem;
}
body.is-dark-bg .mobile-menu-section + .mobile-menu-section {
  border-top-color: rgba(245, 232, 214, 0.08);
}
.mobile-menu-section-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.35);
  padding: 0 1.5rem 0.5rem;
}
body.is-dark-bg .mobile-menu-section-label {
  color: rgba(245, 232, 214, 0.35);
}
.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu-link {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 1.5rem;
  height: 52px;
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.75);
  text-decoration: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, color 0.18s ease, padding-left 0.18s ease;
}
.mobile-menu-link::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 1.4rem;
  border-radius: 2px;
  background: linear-gradient(180deg, #c9a96e 0%, #e8c87a 100%);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mobile-menu.open .mobile-menu-link {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(var(--i, 0) * 60ms + 80ms);
}
.mobile-menu-link:hover,
.mobile-menu-link[aria-current="page"] {
  color: rgba(15, 23, 42, 0.95);
  padding-left: 2rem;
}
.mobile-menu-link:hover::before,
.mobile-menu-link[aria-current="page"]::before {
  transform: translateY(-50%) scaleY(1);
}
body.is-dark-bg .mobile-menu-link {
  color: rgba(245, 232, 214, 0.7);
}
body.is-dark-bg .mobile-menu-link:hover,
body.is-dark-bg .mobile-menu-link[aria-current="page"] {
  color: rgba(245, 232, 214, 0.95);
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-link { opacity: 1; transform: none; transition: color 0.18s ease, padding-left 0.18s ease; }
  .mobile-menu.open .mobile-menu-link { transition-delay: 0ms; }
}

/* Bottom Bar */
.mobile-menu-bottom {
  flex-shrink: 0;
  padding: 0.55rem 1.25rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body.is-dark-bg .mobile-menu-bottom {
  border-top-color: rgba(245, 232, 214, 0.08);
}
.mobile-menu-bottom-controls {
  display: flex;
  align-items: center;
}
.mobile-menu-lang-pills {
  display: flex;
  gap: 0.4rem;
}
.mobile-menu-lang-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  border: 1.5px solid rgba(15, 23, 42, 0.15);
  color: rgba(15, 23, 42, 0.5);
  text-decoration: none;
  transition: all 0.2s ease;
}
.mobile-menu-lang-pill.is-active {
  border-color: #c9a96e;
  color: #8b6914;
  background: rgba(201, 169, 110, 0.1);
}
body.is-dark-bg .mobile-menu-lang-pill {
  border-color: rgba(245, 232, 214, 0.2);
  color: rgba(245, 232, 214, 0.5);
}
body.is-dark-bg .mobile-menu-lang-pill.is-active {
  border-color: #c9a96e;
  color: #e8c87a;
  background: rgba(201, 169, 110, 0.15);
}
.mobile-menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: rgb(15, 23, 42);
  color: rgb(245, 232, 214);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius, 8px);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.mobile-menu-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(245, 232, 214, 0.07) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.mobile-menu-cta:hover::after { transform: translateX(100%); }
body.is-dark-bg .mobile-menu-cta {
  background: rgba(245, 232, 214, 0.95);
  color: rgb(15, 23, 42);
}
body.is-dark-bg .mobile-menu-cta::after {
  background: linear-gradient(105deg, transparent 40%, rgba(15, 23, 42, 0.07) 50%, transparent 60%);
}

/* WhatsApp FAB */
.whatsapp-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  transition: all var(--transition);
}
.whatsapp-fab:hover {
  background: #1da851;
  color: var(--white);
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37,211,102,0.55);
}
.whatsapp-fab svg { width: 28px; height: 28px; }

/* ── 7. HERO – Dark Design ───────────────────────────────── */
/* Welle 5.27 v45 (2026-05-23): Hero-Gradient farblich aligned zum Caustic-
   Endstand statt navy-blue. mesh-caustics.js rendert "warm cream + amber"
   (light) bzw "warm twilight + gold + pink" (dark). Vorher Hero=navy-blue
   → User sah "blau-Flash" während Canvas-Init (300-500ms). Jetzt: Hero ist
   schon im Caustic-Color-Space → Übergang zum Canvas nahezu unmerklich.
   Light-Mode default, Dark-Mode override unten. */
#hero {
  position: relative;
  background:
    radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(ellipse 70% 55% at 75% 15%, rgba(252, 211, 77, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 15% 85%, rgba(251, 191, 36, 0.10) 0%, transparent 60%),
    linear-gradient(155deg, #fdf6e8 0%, #f8ecd3 50%, #fcecd0 100%);
  background-size: 28px 28px, 100% 100%, 100% 100%, 100% 100%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  min-height: auto;
  padding: clamp(6rem, 9vw, 8rem) 0 clamp(4rem, 6vw, 6rem);
}
body.is-dark-bg #hero {
  background:
    radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(ellipse 70% 55% at 75% 15%, rgba(255, 198, 99, 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 15% 85%, rgba(255, 138, 173, 0.12) 0%, transparent 60%),
    linear-gradient(155deg, #1f1424 0%, #2a1d2e 50%, #1f1424 100%);
  background-size: 28px 28px, 100% 100%, 100% 100%, 100% 100%;
}

/* ── Hero Caustics Canvas — Smooth Fade-In (Welle 5.27 v44, 2026-05-23) ────
   mesh-caustics.js setzt `.is-loaded` auf dem Canvas beim ersten gerenderten
   Frame (Zeile 446). Vorher war kein CSS-Hookup → Canvas poppte plötzlich
   ohne Transition rein (User: "kurz blau, dann Animation pop").
   Jetzt: Canvas opacity:0 default, smooth fade-in nach first-paint.
   Underlying Hero-Gradient (oben) ist visuell ähnlich → kein jarring switch. */
#mesh-canvas {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#mesh-canvas.is-loaded {
  opacity: 1;
}
#hero::before { display: none; }
#hero::after  { display: none; }
#hero > .container {
  width: 100%;
  flex: 1 1 auto;
}
/* Glow-Kreise */
.hero-glow {
  position: absolute;
  top: -15%;
  right: 5%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(245,158,11,0.05) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero-glow-2 {
  position: absolute;
  bottom: 5%;
  left: -8%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(34,96,210,0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero-glow-3 {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(71,181,237,0.1) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
/* Hero-Inner: einfache Spalte, hero-content übernimmt das Grid auf Desktop */
.hero-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* M-Container: Mobile ganz oben im Hero, groß und zentriert */
#hero-m {
  width: clamp(150px, min(50vw, 28svh), 220px);
  aspect-ratio: 10 / 11;
  height: auto;
  margin: 0 auto 1rem;
  flex-shrink: 0;
  position: relative;
}

/* Spotlight-Effekt hinter dem M */
#hero-m::before {
  content: '';
  position: absolute;
  inset: -65% -55%;
  background: radial-gradient(ellipse at 50% 55%, rgba(80,140,255,0.22) 0%, rgba(40,90,200,0.10) 35%, transparent 68%);
  z-index: -1;
  pointer-events: none;
}
/* Spotlight auf Desktop: nur nach oben/unten, nicht seitlich in Textspalte */
@media (min-width: 768px) {
  #hero-m::before {
    inset: -70% -20%;
  }
}

/* Single-column, linksbündig (Linear/Framer-Stil) */
.hero-content {
  position: relative;
  z-index: 3;
  text-align: left;
  max-width: 760px;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}
/* Eigene Margins entfernen – gap regelt den Abstand */
#hero .hero-content > * { margin-top: 0; margin-bottom: 0; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 0 0 1.5rem;
  border-left: 1px solid rgba(255,255,255,0.18);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.02em;
  margin-bottom: 0;
  white-space: nowrap;
}
.hero-badge .badge-flags { font-size: 1.1rem; letter-spacing: 0.2em; }
.hero-badge::before { display: none; }
.hero-h1 {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1.5rem;
}

/* Zeile 1: mittelgroß, Blau→Gold – fließender Gradient */
.h1-premise {
  display: block;
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #93c5fd 0%, #d4a84b 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}
@keyframes headline-flow {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Beam Container */
.h1-beam {
  display: block;
  margin: 4px 0 8px 0;
  overflow: visible;
  position: relative;
  animation: beam-pulse 4s ease-in-out 4s infinite;
}

/* brightness statt opacity → kein Sprung beim Animationsstart */
@keyframes beam-pulse {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.35); }
}

/* ── Schlüsselwörter: leuchten kurz auf wenn das M fertig ist ── */
/* Wichtig: h1-premise nutzt -webkit-text-fill-color: transparent (Gradient-Text)
   → color allein reicht nicht, -webkit-text-fill-color muss überschrieben werden */
.key-word {
  display: inline;
  transition: color 0.5s ease, -webkit-text-fill-color 0.5s ease, text-shadow 0.5s ease;
}
.key-word.m-lit {
  -webkit-text-fill-color: #c8eaff !important;
  color: #c8eaff;
  text-shadow:
    0 0 8px  rgba(180,225,255,0.95),
    0 0 22px rgba(140,200,255,0.65),
    0 0 50px rgba(100,170,255,0.30);
}
/* Sanfter langer Ausklang nach dem Aufleuchten */
.key-word.m-fade {
  transition: color 1.6s ease, -webkit-text-fill-color 1.6s ease, text-shadow 1.6s ease;
}

/* ── Hero-Scanner: fährt einmalig über den gesamten Hero (nur Desktop) ──
   Positioniert als direktes Kind von #hero → z-index: 50 → erscheint
   über allen Hero-Inhalten (z-index:1).
   Nutzt transform statt clip-path → kein animation-fill-mode Konflikt. */
.hero-scanner {
  display: none; /* Mobile: deaktiviert */
}

@media (min-width: 1024px) {
  .hero-scanner {
    display: block;
    position: absolute;
    top: 0; bottom: 0;
    left: -280px;
    width: 280px;
    pointer-events: none;
    z-index: 50;
    /* Vertikaler Lichtstreifen mit Gradient */
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(59,130,246,0.04) 25%,
      rgba(96,165,250,0.14) 50%,
      rgba(167,139,250,0.22) 68%,
      rgba(196,181,253,0.10) 88%,
      transparent 100%
    );
    /* Phase 1: Sweep right 2.1s, Phase 2: Float back 0.9s → Gesamt 3.0s */
    animation: hero-scanner-sweep 3.0s linear 0.3s both;
  }
  /* Scharfe Führungskante des Scanners */
  .hero-scanner::after {
    content: '';
    position: absolute;
    top: 5%; bottom: 5%;
    right: 0;
    width: 2px;
    background: linear-gradient(180deg,
      transparent            0%,
      rgba(96,165,250, 0.5) 20%,
      rgba(167,139,250, 0.9) 50%,
      rgba(96,165,250, 0.5) 80%,
      transparent           100%
    );
    box-shadow:
      0 0 12px rgba(96,165,250,0.55),
      0 0 40px rgba(167,139,250,0.28);
  }
  @keyframes hero-scanner-sweep {
    /* ── Phase 1: Sweep von links nach rechts (0% → 70%) ── */
    0% {
      transform: translateX(0);
      opacity: 1;
      animation-timing-function: cubic-bezier(0.4, 0, 0.15, 1);
    }
    /* Scanner hat den Hero vollständig überquert */
    70% {
      transform: translateX(calc(100vw + 280px));
      opacity: 1;
      animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1);
    }
    /* ── Phase 2: Zurückfloten nach links (70% → 100%) ── */
    /* Blendet während des Zurückfloatens leicht aus */
    88% { opacity: 0.4; }
    100% {
      transform: translateX(-280px);
      opacity: 0;
    }
  }
}

/* Ruhender Beam: sofort sichtbar, zeichnet sich früh auf */
.beam-svg {
  width: min(680px, 100%);
  height: 28px;
  display: block;
  overflow: visible;
  opacity: 1;
}

/* Beam: startet unsichtbar – GSAP zeichnet ihn via Komet-Partikel */
.beam-path {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
}

/* Sparkle Kern-Kreis */
.spark-core {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: spark-core-burst 0.75s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1.7s forwards;
}
@keyframes spark-core-burst {
  0%   { opacity: 0;   transform: scale(0); }
  20%  { opacity: 1;   transform: scale(2.8); }
  55%  { opacity: 0.8; transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(0.3); }
}

/* Sparkle Strahlen */
.spark-ray {
  opacity: 0;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: spark-ray-shoot 0.55s ease-out 1.7s forwards;
}
@keyframes spark-ray-shoot {
  0%   { opacity: 0;   stroke-dashoffset: 16; }
  15%  { opacity: 1; }
  55%  { stroke-dashoffset: 0; }
  100% { opacity: 0;   stroke-dashoffset: -6; }
}

/* Zeile 2: GROSS, weiß, kraftvoll – sofort sichtbar, Glow via GSAP */
.h1-payoff {
  display: block;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.0;
  letter-spacing: -0.03em;
  white-space: nowrap;
  margin-bottom: 0;
  opacity: 1;
}
@keyframes payoff-flash {
  0%   { text-shadow: none; filter: brightness(1); }
  12%  {
    text-shadow: 0 0 30px rgba(245,158,11,0.2);
    filter: brightness(1.08);
  }
  45%  {
    text-shadow:
      0 0 8px rgba(255,255,255,0.5),
      0 0 20px rgba(196,181,253,0.4);
    filter: brightness(1.1);
  }
  100% { text-shadow: none; filter: brightness(1); }
}

/* Alte H1-Klassen neutralisieren */
.h1-line, .h1-line--start, .h1-line--end,
.h1-connector, .connector-svg, .connector-path,
.headline-accent, .h1-line1, .hero-arrow-wrap {
  display: none !important;
}
.headline-accent {
  background: none;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
  font-weight: 800;
  filter: none;
}
/* ── Service Chips ─── */
.service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.chip {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
}
.chip--primary {
  background-color: #2563eb;
  color: #ffffff;
}
.chip--outline {
  background: transparent;
  border: 1px solid rgba(96,165,250,0.45);
  color: #93c5fd;
}
.hero-sub {
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  color: rgba(255,255,255,0.7);
  margin-bottom: 2.5rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.hero-subline {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
  white-space: normal;
  opacity: 1;
  margin-bottom: 0;
  font-weight: 500;
  max-width: 560px;
  letter-spacing: 0.01em;
}
.br-mobile { display: none; }
.br-desktop { display: block; }
.hero-services {
  font-size: 0.82rem;
  color: rgba(96,165,250,0.8);
  letter-spacing: 0.04em;
  opacity: 1;
  margin-bottom: 36px;
}
/* Text-Link statt Ghost-Button */
.hero-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.65);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition);
  padding: 0.5rem 0;
}
.hero-text-link:hover { color: var(--white); }
.hero-text-link span { transition: transform var(--transition); }
.hero-text-link:hover span { transform: translateX(4px); }
.hero-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 2rem;
  margin-top: 2rem;
  opacity: 1;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
}
.hero-trust-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--success); }

/* ── 7b. FILM GRAIN OVERLAY ──────────────────────────────────── */
.hero-grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 5;
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grain-shift 0.7s steps(2) infinite;
  animation-play-state: paused;
}
body.animations-ready .hero-grain {
  animation-play-state: running;
}
@keyframes grain-shift {
  0%         { transform: translate(0, 0); }
  10%        { transform: translate(-4%, -6%); }
  20%        { transform: translate(-9%,  4%); }
  30%        { transform: translate( 4%, -8%); }
  40%        { transform: translate(-4%, 12%); }
  50%        { transform: translate(-8%,  4%); }
  60%        { transform: translate(12%,  0%); }
  70%        { transform: translate( 0%,  8%); }
  80%        { transform: translate(-12%, 0%); }
  90%        { transform: translate( 8%,  4%); }
  100%       { transform: translate(0, 0); }
}

/* ── 7c. HERO AURORA BACKGROUND ─────────────────────────────── */
.hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.18;
  mix-blend-mode: screen;
  animation: aurora-float 12s ease-in-out infinite;
  animation-play-state: paused;
}
body.animations-ready .aurora-blob {
  animation-play-state: running;
}
.aurora-blob--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #2563eb, #d97706);
  top: -200px; left: -100px;
  animation-duration: 14s;
}
.aurora-blob--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #06b6d4, #2563eb);
  top: 100px; right: 0px;
  animation-duration: 10s;
  animation-delay: -4s;
}
.aurora-blob--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #d97706, #f59e0b);
  bottom: 0px; left: 40%;
  animation-duration: 16s;
  animation-delay: -8s;
}
@keyframes aurora-float {
  0%, 100% { transform: translate(0, 0)       scale(1); }
  33%       { transform: translate(120px, -80px) scale(1.08); }
  66%       { transform: translate(-80px, 60px)  scale(0.94); }
}

/* ── Hero-Inhalte über Aurora ── */
#hero .container { z-index: 1; }

/* ── SUB-HERO AURORA (Unterseiten) ──────────────────────────── */
.sub-hero { position: relative; overflow: hidden; }
.sub-hero-blob {
  position: absolute;
  top: -120px; left: -100px;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, #2563eb, #1e40af);
  filter: blur(90px);
  opacity: 0.12;
  pointer-events: none;
  animation: aurora-float 18s ease-in-out infinite;
}

/* ── Hero Fade-in Animationen ── */
/* ── Geschwungener Pfeil ── */
/* S-Kurven Pfeil zwischen H1-Zeilen */

/* Hero Fade-up — erscheint nach der Sweep-Sequenz */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-services { animation: none; }

/* ── Service Pills ── */
.hero-services { letter-spacing: 0; margin-bottom: 36px; }
.service-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,0.25);
  background: rgba(96,165,250,0.06);
  color: rgba(96,165,250,0.9);
  font-size: 0.78rem;
  margin: 3px;
  transition: border-color 0.2s, background 0.2s;
}
.service-pill:hover {
  border-color: rgba(96,165,250,0.6);
  background: rgba(96,165,250,0.12);
}

/* ── 7c. HERO GLASSMORPHISM CARDS ─────────────────────────────── */
@keyframes heroFloat {
  from { transform: translateY(0px); }
  to   { transform: translateY(-12px); }
}
/* Beam-Linie zeichnet sich von links nach rechts */
@keyframes beam-draw-mobile {
  0%   { stroke-dashoffset: 322; opacity: 0; }
  5%   { opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 1; }
}
/* Glow-Strich schiesst nach unten aus dem Beam-Ende ins Payoff */
@keyframes dive-line-m {
  0%   { height: 0;    opacity: 0; }
  10%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { height: 88px; opacity: 0; }
}
/* Payoff: Flash-Explosion wenn Beam-Strich eintrifft */
@keyframes payoff-flash-pop {
  0%   { opacity: 0; transform: scale(0.65) translateY(8px);
         filter: drop-shadow(0 0 0px transparent); }
  30%  { opacity: 1; transform: scale(1.08) translateY(-4px);
         filter: drop-shadow(0 0 35px rgba(96,165,250,1))
                 drop-shadow(0 0 70px rgba(167,139,250,0.7))
                 drop-shadow(0 0 100px rgba(96,165,250,0.4)); }
  55%  { transform: scale(0.96);
         filter: drop-shadow(0 0 10px rgba(96,165,250,0.2)); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: none; }
}
/* Chip 1 (Webdesign, oben-links): kommt von oben-rechts mit Rotation */
@keyframes chip-fly-1 {
  0%   { opacity: 0; transform: translateX(70px) translateY(-140px) rotate(32deg) scale(0.1); }
  55%  { opacity: 1; transform: translateX(-4px) translateY(5px) rotate(-3deg) scale(1.12); }
  75%  { transform: translateX(2px) translateY(-2px) rotate(1deg) scale(0.96); }
  100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
}
/* Chip 2 (Marketing, oben-rechts): kommt von oben-links mit Rotation */
@keyframes chip-fly-2 {
  0%   { opacity: 0; transform: translateX(-70px) translateY(-140px) rotate(-32deg) scale(0.1); }
  55%  { opacity: 1; transform: translateX(4px) translateY(5px) rotate(3deg) scale(1.12); }
  75%  { transform: translateX(-2px) translateY(-2px) rotate(-1deg) scale(0.96); }
  100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
}
/* Chip 3 (Consulting, unten-links): kommt von oben-mitte-rechts */
@keyframes chip-fly-3 {
  0%   { opacity: 0; transform: translateX(55px) translateY(-110px) rotate(24deg) scale(0.1); }
  55%  { opacity: 1; transform: translateX(-3px) translateY(4px) rotate(-2deg) scale(1.1); }
  75%  { transform: translateX(1px) translateY(-1px) rotate(0.5deg) scale(0.97); }
  100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
}
/* Chip 4 (Ab €29, unten-rechts): kommt von oben-mitte-links */
@keyframes chip-fly-4 {
  0%   { opacity: 0; transform: translateX(-55px) translateY(-110px) rotate(-24deg) scale(0.1); }
  55%  { opacity: 1; transform: translateX(3px) translateY(4px) rotate(2deg) scale(1.1); }
  75%  { transform: translateX(-1px) translateY(-1px) rotate(-0.5deg) scale(0.97); }
  100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
}

/* ── Card-Burst: fliegen als winziger Punkt aus der Beam-Explosion heraus ── */
/* Koordinaten: Startpunkt ist der Beam/Payoff-Explosionspunkt über dem Cards-Grid.
   Jede Card startet als winziger Punkt (~4% Grösse) an der Explosionsposition
   und fliegt mit leichtem Überschwinger zu ihrer finalen Grid-Position. */
@keyframes card-burst-1 {
  /* Webdesign (oben-links): kommt von oben-rechts – Explosionspunkt */
  0%   { opacity: 0; transform: translateX(95px) translateY(-210px) scale(0.04); }
  12%  { opacity: 1; }
  65%  { transform: translateX(-5px) translateY(6px) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
@keyframes card-burst-2 {
  /* Marketing (oben-rechts): kommt von oben-links */
  0%   { opacity: 0; transform: translateX(-95px) translateY(-210px) scale(0.04); }
  12%  { opacity: 1; }
  65%  { transform: translateX(5px) translateY(6px) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
@keyframes card-burst-3 {
  /* Ab €29 (unten-links): kommt von oben-rechts, groesserer Y-Abstand */
  0%   { opacity: 0; transform: translateX(95px) translateY(-330px) scale(0.04); }
  12%  { opacity: 1; }
  65%  { transform: translateX(-5px) translateY(6px) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
@keyframes card-burst-4 {
  /* Consulting (unten-rechts): kommt von oben-links, groesserer Y-Abstand */
  0%   { opacity: 0; transform: translateX(-95px) translateY(-330px) scale(0.04); }
  12%  { opacity: 1; }
  65%  { transform: translateX(5px) translateY(6px) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}

/* ── Mobile Beam-Leuchtpunkt – Position wird per JS gesetzt ── */
.beam-spark {
  display: none;
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(147,197,253,0.9) 35%, transparent 70%);
  box-shadow: 0 0 8px 5px rgba(96,165,250,1),
              0 0 20px 10px rgba(167,139,250,0.6);
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* ── Mobile Beam-Tauchstrich (nur Mobile) ────────────────── */
.beam-dive-m {
  display: none;
  position: absolute;
  width: 3px; height: 0;
  right: 0; top: 50%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.9) 0%,
    rgba(96,165,250,1) 30%,
    rgba(167,139,250,0.6) 70%,
    transparent 100%);
  box-shadow: 0 0 10px 4px rgba(96,165,250,0.8),
              0 0 20px 8px rgba(96,165,250,0.3);
  border-radius: 2px;
}

/* ── Hero Service Strip ─────────────────────────────────────────── */
.hero-strip {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
.hero-strip-item {
  padding: 1.3rem 1.4rem 1.1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.hero-strip-item:hover {
  background: rgba(96,165,250,0.08);
  border-color: rgba(96,165,250,0.45);
  transform: translateY(-3px);
}
.hero-strip-item:hover .hero-strip-icon svg {
  filter: drop-shadow(0 0 10px rgba(0,196,240,0.75));
}
.hero-strip-item:hover .hero-strip-arrow {
  transform: translateX(4px);
  color: rgba(255,255,255,0.95);
}
.hero-strip-arrow {
  position: absolute;
  bottom: 1rem;
  right: 1.25rem;
  color: rgba(255,255,255,0.4);
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.25s ease, color 0.25s ease;
}
.hero-strip-icon svg {
  width: 26px; height: 26px;
  color: #00c4f0;
  margin-bottom: 0.25rem;
  filter: drop-shadow(0 0 6px rgba(0,196,240,0.5));
  transition: filter 0.25s ease;
}
.hero-strip-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255,255,255,0.96);
  letter-spacing: -0.01em;
}
.hero-strip-desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── GSAP Beam Partikel ─────────────────────────────────────────── */
/* ── Beam-Partikel (Kopf des Kometen) ── */
.gsap-beam {
  position: absolute;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  background: radial-gradient(circle, #ffffff 0%, #c4b5fd 45%, transparent 80%);
  box-shadow:
    0 0  4px  2px rgba(255,255,255,1.00),
    0 0 12px  5px rgba(196,181,253,0.95),
    0 0 24px  9px rgba(167,139,250,0.75),
    0 0 44px 15px rgba(96,165,250,0.45),
    0 0 70px 24px rgba(96,165,250,0.20);
  will-change: transform, opacity;
}

/* ── Explosion-Sparks ── */
.gsap-spark {
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 201;
}

/* ── Explosions-Ring ── */
.gsap-burst-ring {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 201;
}

/* ── 8. SERVICES ─────────────────────────────────────────── */
/* Legacy-Background nur für DE-Site (noch ohne .atelier-Klasse).
   COM-Site nutzt .atelier (Welle 5.16+) mit eigenem Editorial-BG in
   services-atelier.css. */
#services:not(.atelier) {
  background: linear-gradient(180deg, #eef4ff 0%, #f5f9ff 50%, #f8faff 100%);
  position: relative;
}
#services:not(.atelier)::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(91,156,246,0.06) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none; z-index: 0;
}
.services-intro {
  font-size: 1.05rem;
  color: var(--gray-500);
  margin-bottom: 3rem;
  max-width: 600px;
}
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.service-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all var(--transition);
}
.service-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.service-icon {
  width: 44px; height: 44px;
  background: rgba(91,156,246,0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--accent-blue);
}
.service-icon svg { width: 22px; height: 22px; }
.service-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--text-dark);
}
.service-card p {
  font-size: 0.85rem;
  color: var(--text-mid);
  line-height: 1.5;
}
/* Highlight-Karte: Mehrsprachig */
.service-card--highlight {
  border-color: rgba(91,156,246,0.35);
  background: linear-gradient(135deg, #f0f6ff 0%, #e8f2ff 100%);
  position: relative;
}
.service-card--highlight::before {
  content: 'Unser USP';
  position: absolute; top: -10px; right: 14px;
  background: var(--primary); color: white;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
}
.service-card-lang {
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
}
/* Services Statement */
.services-statement {
  margin-top: 3rem;
  text-align: center;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, rgba(91,156,246,0.08), rgba(139,92,246,0.08));
  border: 1px solid rgba(91,156,246,0.2);
  border-radius: var(--radius-lg);
}
.services-statement-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
}
.services-statement-text {
  font-size: 1.05rem;
  color: var(--gray);
  margin-bottom: 1.5rem;
}

/* Preis-Info-Balken */
.services-price-info {
  margin-top: 2.5rem;
  background: white;
  border: 1px solid rgba(91,156,246,0.2);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.spi-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.spi-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
}
.spi-price span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-mid);
}
.spi-sep { color: var(--gray-300); font-weight: 300; }
.spi-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}
.spi-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-mid);
  line-height: 1.5;
}
.spi-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--accent-blue); }

/* ── Hero Mobile: Headline oben, CTA unten, Karten direkt dran ── */
@media (max-width: 639px) {
  #hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-top: 6.25rem;
    padding-bottom: 2rem;
  }
  #hero > .container { flex: 1; display: flex; flex-direction: column; }
  /* Grid auf Mobile deaktivieren → wieder Flex-Column */
  #hero .hero-content { display: flex; flex: 1; flex-direction: column; justify-content: flex-start; gap: 0.5rem; max-width: 100%; }
  #hero .cta-group { margin-top: auto; margin-bottom: 0; }
  #hero .hero-strip { margin-top: 1rem; }
  #hero-m { width: clamp(150px, min(50vw, 28svh), 220px); aspect-ratio: 10/11; height: auto; margin: 0 auto 1rem; }
  .hero-trust { display: none; }
  .hero-strip { grid-template-columns: 1fr; gap: 0.6rem; }
  .hero-strip-item {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.9rem;
    padding: 0.95rem 1.25rem;
  }
  .hero-strip-icon { grid-column: 1; grid-row: 1 / 3; align-self: center; flex-shrink: 0; }
  .hero-strip-icon svg { margin-bottom: 0; width: 22px; height: 22px; }
  .hero-strip-name { grid-column: 2; grid-row: 1; }
  .hero-strip-desc { grid-column: 2; grid-row: 2; white-space: normal; overflow: visible; text-overflow: clip; }
  .hero-strip-arrow { position: static; grid-column: 3; grid-row: 1 / 3; align-self: center; }
}


/* ── Bento Grid (Services) ───────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}
.bento-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: box-shadow var(--transition), transform var(--transition);
}
.bento-card:hover {
  box-shadow: 0 6px 24px rgba(91,156,246,0.12);
  transform: translateY(-2px);
}
.bento-card--main {
  background: linear-gradient(135deg, #1a2540 0%, #0f172a 100%);
  border-color: transparent;
  color: white;
}
.bento-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.75rem;
}
.bento-card--main h3 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 800;
  color: white;
  margin-bottom: 1.25rem;
  line-height: 1.3;
}
.bento-card--main h3 em { color: #a5c3fa; font-style: normal; }
.bento-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.bento-card-tags span {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.bento-card--sm { padding: 1.5rem; }
.bento-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #eef4ff, #e0eaff);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-blue);
  margin-bottom: 0.85rem;
}
.bento-icon svg { width: 20px; height: 20px; }
.bento-card--sm h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.45rem;
  line-height: 1.35;
}
.bento-card--sm p {
  font-size: 0.83rem;
  color: var(--text-mid);
  line-height: 1.55;
  margin-bottom: 0.65rem;
}
.bento-fachbegriff {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Accent Card: ∞ */
.bento-card--accent {
  background: linear-gradient(135deg, #1a2540 0%, #0f172a 100%);
  border-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
}
.bento-accent-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: #a5c3fa;
  line-height: 1;
}
.bento-accent-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  line-height: 1.45;
}
/* Compare Strip */
.bento-compare-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.bento-compare-strip::before,
.bento-compare-strip::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(91,156,246,0.25);
}
.bento-compare-strip span {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}
.bento-cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Booking Teaser Strip (Homepage) ─────────────────────── */
.booking-teaser-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, #eef4ff 0%, #e8f0fe 100%);
  border: 1px solid rgba(91,156,246,0.25);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
}
.booking-teaser-strip:hover {
  box-shadow: 0 4px 20px rgba(91,156,246,0.15);
  transform: translateY(-1px);
}
.booking-teaser-icon { font-size: 1.4rem; flex-shrink: 0; }
.booking-teaser-text {
  flex: 1;
  font-size: 0.925rem;
  color: var(--dark);
  line-height: 1.4;
}
.booking-teaser-cta {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

/* ── Booking Addon Section (Webdesign page) ───────────────── */
.booking-addon-section {
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,0.07);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding: 4rem 0;
}
.booking-addon-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.booking-addon-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--dark);
  margin: 0.5rem 0 1rem;
  line-height: 1.25;
}
.booking-addon-sub {
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
}
.booking-addon-benefits {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.25rem;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  text-align: left;
}
.booking-addon-benefits li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--dark);
}
.benefit-icon { font-size: 1.1rem; flex-shrink: 0; }
.booking-addon-hint {
  font-size: 0.825rem;
  color: var(--text-mid);
  margin-bottom: 1.75rem;
}
.booking-addon-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.booking-addon-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.booking-addon-link:hover { text-decoration: underline; }

/* ── Hub-Sektion (Mehr als Webdesign) ────────────────────── */
#mehr-als-webdesign {
  background: linear-gradient(150deg, #111c35 0%, #1a2540 50%, #111c35 100%);
}
#mehr-als-webdesign .section-label { color: var(--accent-blue); }
#mehr-als-webdesign .section-title { color: white; }
#mehr-als-webdesign .section-sub { color: rgba(255,255,255,0.65); }
#mehr-als-webdesign .hub-header h3 { color: white; }
#mehr-als-webdesign .hub-problem { color: rgba(255,255,255,0.85); }
#mehr-als-webdesign .hub-fach { color: rgba(255,255,255,0.5); }
#mehr-als-webdesign .hub-preis { color: rgba(255,255,255,0.65); }
#mehr-als-webdesign .hub-link { color: var(--accent-blue); }
#mehr-als-webdesign .hub-trenner { background: rgba(255,255,255,0.08); }
#mehr-als-webdesign .hub-icon { background: rgba(255,255,255,0.1); border: none; }
#mehr-als-webdesign .hub-liste li::before { color: var(--accent-blue); }
.hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}
.hub-spalte { padding: 2rem; }
.hub-trenner {
  height: 1px;
  background: rgba(0,0,0,0.07);
}
.hub-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.hub-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #eef4ff, #e0eaff);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-blue);
  flex-shrink: 0;
}
.hub-icon svg { width: 20px; height: 20px; }
.hub-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
}
.hub-liste {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.hub-liste li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-left: 1rem;
  position: relative;
}
.hub-liste li::before {
  content: '→';
  position: absolute; left: 0;
  color: var(--accent-blue);
  font-weight: 700;
  font-size: 0.8rem;
  top: 0.1rem;
}
.hub-problem {
  font-size: 0.88rem;
  color: var(--text-dark);
  font-weight: 500;
}
.hub-fach {
  font-size: 0.75rem;
  color: var(--text-mid);
}
.hub-preis {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-light);
  border: 1px solid rgba(101,146,230,0.2);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 0.85rem;
}
.hub-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.hub-link:hover { color: var(--primary-dark); text-decoration: underline; }
.hub-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Service Teaser (Mehr als Webdesign) ──────────────────── */
.service-teaser-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.service-teaser-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.service-teaser-card:hover {
  box-shadow: 0 6px 24px rgba(91,156,246,0.12);
  transform: translateY(-2px);
}
.service-teaser-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.service-teaser-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(91,156,246,0.1);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}
.service-teaser-preis {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
  flex-shrink: 0;
}
.service-teaser-question {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}
.service-teaser-geo {
  display: block;
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.75rem;
  letter-spacing: 0.01em;
}
.service-teaser-geo:empty {
  display: none;
}
.service-teaser-answer {
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.service-teaser-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  margin-top: auto;
}
.service-teaser-chips span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-mid);
  background: var(--bg-warm-gray);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(0,0,0,0.06);
}
.service-teaser-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.service-teaser-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* ── 9. DIGITAL MARKETING ────────────────────────────────── */

/* ── 10. UNTERNEHMENSBEGLEITUNG ──────────────────────────── */
#begleitung {
  background:
    radial-gradient(ellipse 50% 60% at 100% 30%, rgba(101,146,230,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 0% 80%, rgba(71,181,237,0.06) 0%, transparent 60%),
    #ffffff;
}

/* ── Gemeinsame Styles: Angebot-Sektionen (5 + 6) ─────────── */
.angebot-basis {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--text-mid);
  background: rgba(91,156,246,0.07);
  border: 1px solid rgba(91,156,246,0.15);
  border-radius: var(--radius);
  padding: 0.65rem 1.1rem;
  margin-bottom: 2.5rem;
}
.angebot-basis strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-dark);
}
.angebot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.angebot-karte {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: all var(--transition);
}
.angebot-karte:hover {
  border-color: rgba(91,156,246,0.3);
  box-shadow: 0 4px 20px rgba(91,156,246,0.1);
  transform: translateY(-2px);
}
.angebot-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #eef4ff 0%, #e0eaff 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-blue);
  flex-shrink: 0;
  margin-bottom: 0.25rem;
}
.angebot-icon svg { width: 20px; height: 20px; }
.angebot-karte h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}
.angebot-karte p {
  font-size: 0.83rem;
  color: var(--text-mid);
  line-height: 1.55;
  flex: 1;
}
.angebot-preis {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-light);
  border: 1px solid rgba(101,146,230,0.2);
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  margin-top: auto;
  align-self: flex-start;
}
.angebot-preis--kostenlos {
  color: #166534;
  background: #dcfce7;
  border-color: rgba(22,101,52,0.2);
}
.angebot-karte--kostenlos { border-color: rgba(22,101,52,0.15); }
.angebot-karte--kostenlos .angebot-icon {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
}

/* Kombinationen */
.kombi-section {
  margin-bottom: 2.5rem;
}
.kombi-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mid);
  margin-bottom: 1rem;
}
.kombi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.kombi-karte {
  background: linear-gradient(135deg, #f8faff 0%, #f0f5ff 100%);
  border: 1px solid rgba(101,146,230,0.2);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.kombi-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-dark);
  background: rgba(101,146,230,0.15);
  padding: 0.2rem 0.7rem;
  border-radius: 20px;
  margin-bottom: 0.85rem;
}
.kombi-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.kombi-items li {
  font-size: 0.88rem;
  color: var(--text-dark);
  padding-left: 1.1rem;
  position: relative;
}
.kombi-items li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.8rem;
}
.kombi-preiszeile {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.kombi-preis {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--dark);
}
.kombi-ersparnis {
  font-size: 0.82rem;
  color: var(--text-mid);
}
.kombi-ersparnis--durchstrich { text-decoration: line-through; }

/* CTAs */
.angebot-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── 11. WHY MIRATEQ (USP) ───────────────────────────────── */
#why {
  background:
    radial-gradient(ellipse 70% 60% at 90% 50%, rgba(71,181,237,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 50%, rgba(101,146,230,0.07) 0%, transparent 60%),
    linear-gradient(160deg, #ffffff 0%, #edf3ff 60%, #e6f0ff 100%);
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 3rem;
}
.why-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.why-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.why-num {
  width: 40px; height: 40px;
  min-width: 40px;
  background: var(--primary);
  color: var(--white);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
}
.why-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--text-dark);
}
.why-card p {
  font-size: 0.875rem;
  color: var(--text-mid);
  line-height: 1.55;
}

/* ── 10. PORTFOLIO ───────────────────────────────────────── */
#portfolio {
  background: linear-gradient(180deg, #f0f6ff 0%, #e8f1ff 50%, #f0f5ff 100%);
  position: relative;
}
#portfolio::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(91,156,246,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,156,246,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none; z-index: 0;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}
.portfolio-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition);
}
.portfolio-card:hover {
  border-color: rgba(91,156,246,0.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.browser-chrome {
  background: var(--dark-3);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.browser-dots {
  display: flex;
  gap: 5px;
}
.browser-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.browser-dots span:nth-child(1) { background: #FF5F57; }
.browser-dots span:nth-child(2) { background: #FEBC2E; }
.browser-dots span:nth-child(3) { background: #28C840; }
.browser-url {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border-radius: 5px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  font-family: monospace;
}
.browser-screen {
  height: 180px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.browser-screen-bar {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
}
.browser-screen-logo {
  width: 60px; height: 14px;
  background: rgba(255,255,255,0.7);
  border-radius: 3px;
}
.browser-screen-nav {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.browser-screen-nav span {
  width: 32px; height: 8px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
}
.browser-screen-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1.25rem;
  gap: 6px;
}
.bs-h {
  height: 12px;
  background: rgba(255,255,255,0.85);
  border-radius: 3px;
  width: 55%;
}
.bs-p { height: 7px; background: rgba(255,255,255,0.4); border-radius: 3px; width: 75%; }
.bs-p2 { height: 7px; background: rgba(255,255,255,0.3); border-radius: 3px; width: 60%; }
.bs-btn {
  height: 22px;
  width: 90px;
  border-radius: 5px;
  background: rgba(255,255,255,0.9);
  margin-top: 4px;
}
.portfolio-info { padding: 1.5rem; }
.portfolio-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 0.5rem;
}
.portfolio-info h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.4rem;
}
.portfolio-info p {
  font-size: 0.85rem;
  color: var(--text-mid);
  line-height: 1.5;
}
/* Farben je Portfolio-Karte */
.portfolio-card:nth-child(1) .browser-screen { background: linear-gradient(135deg, #1a3a4a 0%, #0d2233 100%); }
.portfolio-card:nth-child(2) .browser-screen { background: linear-gradient(135deg, #3a1a1a 0%, #2d0f0f 100%); }
.portfolio-card:nth-child(3) .browser-screen { background: linear-gradient(135deg, #1a2e1a 0%, #0f2010 100%); }
.portfolio-card:nth-child(1) .browser-screen-bar { background: rgba(71,181,237,0.15); }
.portfolio-card:nth-child(2) .browser-screen-bar { background: rgba(230,101,101,0.15); }
.portfolio-card:nth-child(3) .browser-screen-bar { background: rgba(101,230,150,0.15); }

/* ── 11. PRICING — Welle 5.25 v4: Tier 6 "Reverse Aurora" ─────
   Continuous-Dark Pattern: BG-Color #FAFBFD (identisch zu allen anderen
   Body-Sections), aber dark mesh-gradient Overlay (3-Layer animated) macht
   Section dark. Subtle Light-Leak an Edges = atmospheric depth.
   Premium-Differentiator 2026 — kein Konkurrent macht das so.
   ──────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════════
   PRICING — Welle 5.25 v7: Tier-6 "Dark Premium Cloud" (schwebende Insel)
   ────────────────────────────────────────────────────────────────────────
   Continuous Light-BG (matches alle anderen Sections). Dark-Cloud-Overlay
   schwebt in Section-Mitte mit ausgeprägtem mask-fade an Edges →
   sichtbare Continuous-Architektur: User sieht Light-BG durch die Edges
   schimmern. Premium-Differentiator 2026.
   ════════════════════════════════════════════════════════════════════════ */
#pricing {
  position: relative;
  background-color: transparent;
  /* Atelier-Token-Aliases — damit `.atelier-eyebrow`/`.atelier-title` greifen */
  --at-mocha: #1498D5;
  --at-ink: #0A1B33;
  --at-ink-soft: rgba(10, 27, 51, 0.65);
  --at-font-body: var(--font-main, 'Inter', system-ui, sans-serif);
  --at-font-display: var(--font-main, 'Inter', system-ui, sans-serif);
}
body.is-dark-bg #pricing {
  --at-mocha: #3EB6F0;
  --at-ink: #F0F4FA;
  --at-ink-soft: rgba(240, 244, 250, 0.65);
}
/* Pricing — Pure Light + Premium Conic-Mesh-Aurora
   Animated rotating conic-gradient + intense aurora-glows. Continuous
   Light-BG (matches other sections). Premium dramatic — Pricing als
   visuelle "Premium Energy Source" mitten in der Page.
   Stripe Atlas / GitHub Pattern 2026. */
.pricing-cloud {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Layer 1: intense aurora-glows als premium foundation */
  background-image:
    radial-gradient(ellipse 70% 55% at 25% 45%, rgba(255, 122, 77, 0.32), transparent 65%),
    radial-gradient(ellipse 65% 50% at 75% 55%, rgba(20, 152, 213, 0.28), transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(212, 161, 78, 0.18), transparent 70%);
  background-size: 200% 200%, 200% 200%, 200% 200%;
  background-position: 0% 50%, 100% 50%, 50% 50%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 120px, black calc(100% - 120px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 120px, black calc(100% - 120px), transparent 100%);
  animation: pricing-aurora-drift 30s ease-in-out infinite;
}

/* Layer 2 (::before): Conic-gradient rotating slowly für Premium-Drama */
.pricing-cloud::before {
  content: '';
  position: absolute;
  inset: -25%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 122, 77, 0.10),
    rgba(212, 161, 78, 0.08),
    rgba(20, 152, 213, 0.10),
    rgba(255, 122, 77, 0.07),
    rgba(255, 122, 77, 0.10)
  );
  filter: blur(60px);
  animation: pricing-conic-rotate 60s linear infinite;
  pointer-events: none;
}

@keyframes pricing-aurora-drift {
  0%, 100% { background-position: 0% 50%, 100% 50%, 50% 50%; }
  33%      { background-position: 100% 30%, 0% 70%, 60% 40%; }
  66%      { background-position: 50% 80%, 50% 20%, 40% 60%; }
}
@keyframes pricing-conic-rotate {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-cloud { animation: none; }
  .pricing-cloud::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-cloud { animation: none; }
}
body.is-dark-bg #pricing { background-color: #0A1B33; }

/* Pricing-Text-Colors: dark da Section jetzt Light-BG (Pure Continuous) */
#pricing .section-label { color: var(--accent-blue); }
#pricing .section-title { color: var(--dark); }
#pricing .section-sub { color: var(--text-mid); }

/* Welle 5.26 v42: Pricing Dark-Mode Lesbarkeits-Fixes — Title + Eyebrow waren
   im Dark-Mode kaum lesbar weil section-title color: var(--dark) explicit dunkel.
   Override mit hellen Farben aus den at-ink Tokens die im Dark-Mode bereits
   richtig (light) gesetzt sind. */
body.is-dark-bg #pricing .section-title,
body.is-dark-bg #pricing .atelier-title {
  color: var(--at-ink, #F0F4FA) !important;
}
body.is-dark-bg #pricing .atelier-eyebrow-num,
body.is-dark-bg #pricing .atelier-eyebrow-label {
  color: rgba(240, 244, 250, 0.65);
}
body.is-dark-bg #pricing .atelier-eyebrow-line {
  background: linear-gradient(90deg, rgba(62, 182, 240, 0.35), transparent);
}

/* Pricing-Trio Logos: invert-Filter im Dark-Mode wirkt bei farbigen 3D-Renders
   schlecht (Webdesign wird gelb, Marketing-Globus wird orange-cyan). Statt
   Invert nur leicht dimmen — die Logos bleiben in ihrer Original-Farbe. */
body.is-dark-bg #pricing .pricing-trio-logo {
  filter: brightness(0.95) saturate(0.92);
}
/* Zwei-Spalten Layout */
.pricing-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  align-items: stretch;
}
.pricing-main-card,
.pricing-addons {
  height: 100%;
  box-sizing: border-box;
}
/* Linke Karte: Hauptpreis */
.pricing-main-card {
  background: rgba(91,156,246,0.1);
  border: 1px solid var(--accent-blue);
  border-radius: var(--radius-xl);
  padding: 2rem;
  position: relative;
  box-shadow: 0 8px 48px rgba(91,156,246,0.25);
  text-align: center;
}
.pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: 50px;
  white-space: nowrap;
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  justify-content: center;
  margin-bottom: 0.35rem;
}
.pricing-price .amount {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.pricing-price .currency { font-size: 1.4rem; font-weight: 700; color: var(--white); }
.pricing-price .period { font-size: 0.95rem; color: rgba(255,255,255,0.45); }
.pricing-monthly {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1.25rem;
}
.pricing-monthly strong { color: var(--white); }
.pricing-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 1.25rem 0;
}
.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8);
}
.pricing-features li svg {
  width: 15px; height: 15px;
  color: var(--success);
  flex-shrink: 0;
  margin-top: 3px;
}
.pricing-main-card .btn { width: 100%; justify-content: center; }
.pricing-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}
.pricing-laufzeit {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}
/* Rechte Karte: Zusatzoptionen */
.pricing-addons {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: 2rem;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.pricing-addons h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--white);
}
.addons-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1.25rem;
}
.addons-list {
  border-top: 1px solid rgba(255,255,255,0.08);
}
.addon-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.addon-row-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  min-width: 130px;
  flex-shrink: 0;
}
.addon-row-desc {
  flex: 1;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.4;
}
.addon-row-price {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-blue);
  white-space: nowrap;
  flex-shrink: 0;
}
.addons-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.addons-footer p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.75rem;
}
.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.82rem;
}

/* Pricing Toggle – über dem Grid, linksbündig */
#pricing .pricing-toggle {
  margin: 2.5rem 0 2rem;
}

/* ── Pricing Open – Zwei-Spalten, kein Kartenrahmen ──────────── */
.pricing-open {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
  position: relative;
  z-index: 1;
}
/* Links: Preis + CTA */
.pricing-open-left { display: flex; flex-direction: column; align-items: flex-start; }
.pricing-open-price {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
  margin-bottom: 0.4rem;
}
.pricing-open-currency {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  margin-top: 0.75rem;
}
.pricing-open-amount {
  font-size: 5.5rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.04em;
}
.pricing-open-period {
  font-size: 1rem;
  color: rgba(255,255,255,0.35);
  margin-top: 0.75rem;
  margin-left: 0.15rem;
}
.pricing-open-sub {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.38);
  margin-bottom: 2rem;
}
.pricing-open-left .btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 1rem;
}
.pricing-open-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.22);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.pricing-details-link {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  transition: color 0.2s;
}
.pricing-details-link:hover { color: var(--accent-blue); }

/* Rechts: Feature-Liste vertikal */
.pricing-open-right { padding-top: 0.5rem; }
.pricing-open-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.pricing-open-features li {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1.4;
}
.pricing-open-features li::before {
  content: '✓';
  color: #22c55e;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Marketing + Consulting Blöcke */
.pricing-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  position: relative;
  z-index: 1;
}
.pricing-service-block {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pricing-service-block-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-blue);
}
.pricing-service-block-price {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
}
.pricing-service-block-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  margin-bottom: 0.4rem;
}
.pricing-service-block-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}
.pricing-service-block-list li {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  display: flex;
  gap: 0.6rem;
  line-height: 1.4;
}
.pricing-service-block-list li::before {
  content: '→';
  color: rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.pricing-service-block-link {
  font-size: 0.82rem;
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 600;
  margin-top: auto;
}
.pricing-service-block-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .pricing-open { grid-template-columns: 1fr; gap: 2.5rem; }
  .pricing-open-amount { font-size: 4.5rem; }
  .pricing-services-grid { grid-template-columns: 1fr; }
}

/* Pricing Toggle */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  padding: 4px;
  width: fit-content;
  margin: 0 auto 2.5rem;
  position: relative;
  z-index: 1;
}
.pricing-toggle-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
}
.pricing-toggle-btn.active {
  background: rgba(255,255,255,0.12);
  color: var(--white);
}
.pricing-save-badge {
  background: #22c55e;
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 50px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Marketing + Consulting Mini-Karten in Pricing */
.pricing-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
  position: relative;
  z-index: 1;
}
.pricing-service-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.pricing-service-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-blue);
  display: block;
  margin-bottom: 0.5rem;
}
.pricing-service-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.pricing-service-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.pricing-service-link {
  font-size: 0.82rem;
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 600;
}
.pricing-service-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .pricing-services { grid-template-columns: 1fr; }
}

/* ── 12. PROCESS — Welle 5.25 v4: Tier 3 (Trust/Data) ──────────
   Continuous BG identisch zu allen anderen Body-Sections.
   2-Layer subtle Glow, KEIN Animation, KEIN Grid.
   ──────────────────────────────────────────────────────────── */
/* Welle 5.25 v8: Sections transparent → page-mesh schimmert durch */
#process {
  position: relative;
  background-color: transparent;
  /* Atelier-Token-Aliases — damit `.atelier-eyebrow`/`.atelier-title` Klassen
     (definiert lokal im .atelier-Scope) auch hier greifen. Ohne diese fallen
     Number + Line zurück auf inherited Body-Color (dark gray) statt Brand-Blau. */
  --at-mocha: #1498D5;
  --at-ink: #0A1B33;
  --at-ink-soft: rgba(10, 27, 51, 0.65);
  --at-font-body: var(--font-main, 'Inter', system-ui, sans-serif);
  --at-font-display: var(--font-main, 'Inter', system-ui, sans-serif);
}
body.is-dark-bg #process {
  --at-mocha: #3EB6F0;
  --at-ink: #F0F4FA;
  --at-ink-soft: rgba(240, 244, 250, 0.65);
}
/* Process — Vercel-Style Dot-Grid + minimal Blue Glow
   Tech-Aesthetic Differentiation zu Aurora-Glows der anderen Sections.
   Static (kein animation drift) → Process = "stabiler Prozess" Signal. */
.process-aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* Layer 1: dot-grid pattern (tech-signal) */
    radial-gradient(circle, rgba(20, 152, 213, 0.16) 1px, transparent 1.4px),
    /* Layer 2: subtle blue glow center */
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(20, 152, 213, 0.08), transparent 70%);
  background-size: 28px 28px, 200% 200%;
  background-position: 0 0, 50% 50%;
  /* Dot-grid mask fade an Edges + horizontal fade an Sides für seamless */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 100px, black calc(100% - 100px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, black 100px, black calc(100% - 100px), transparent 100%);
}
body.is-dark-bg #process { background-color: #0A1B33; }

/* ═══════════════════════════════════════════════════════════════════════════
   Welle 5.27 v21: Caustic-Mesh-Fall Wrapper (Index-Page)
   Canvas + Lai-Thai werden per JS aus #hero in <main> gehoben + in diesen
   Wrapper gepackt. Beim Scroll wird canvas/lai per GSAP-ScrollTrigger nach
   unten translated (yPercent) + opacity gefadet → wirkt wie "rinnt runter
   in die nächste section".
   z-index: 0 = behind allen Section-Inhalten (mit z >= 1), aber über page-bg.
   ═══════════════════════════════════════════════════════════════════════════ */
.wd-mesh-fall-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.wd-mesh-fall-wrap .hero-mesh,
.wd-mesh-fall-wrap .hero-lai-thai {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  will-change: transform, opacity;
}

body.is-dark-bg .process-aurora {
  background-image:
    radial-gradient(circle, rgba(62, 182, 240, 0.18) 1px, transparent 1.4px),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(62, 182, 240, 0.10), transparent 70%);
}
.process-track {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* Vertikale Verbindungslinie – Mobile */
.process-track::before {
  content: '';
  position: absolute;
  top: 1.75rem;
  bottom: 1.75rem;
  left: 1.75rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--primary), var(--accent) 70%, #10B981);
  opacity: 0.18;
}
.process-node {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
}
.process-node:last-child { border-bottom: none; }
.process-node-num {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--white);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.process-node--last .process-node-num {
  background: linear-gradient(135deg, #059669, #10B981);
}
.process-node-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.process-node-text {
  font-size: 0.875rem;
  color: var(--text-mid);
  line-height: 1.65;
}
/* Tablet: 2-Spalten-Grid */
@media (min-width: 640px) {
  .process-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .process-track::before { display: none; }
  .process-node {
    flex-direction: column;
    gap: 1.25rem;
    padding: 2.5rem 2.5rem 2.5rem 0;
    border-bottom: none;
    border-right: 1px solid rgba(0,0,0,0.06);
  }
  .process-node:nth-child(even) {
    padding-left: 2.5rem;
    padding-right: 0;
    border-right: none;
  }
  .process-node:nth-last-child(-n+2) { border-top: 1px solid rgba(0,0,0,0.06); }
  /* 5. Node allein in letzter Reihe */
  .process-node:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-right: none;
    flex-direction: row;
    gap: 1.5rem;
    padding: 2rem 0 0;
  }
  .process-node:last-child .process-node-body {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
  }
}
/* Desktop: horizontal, alle 5 in einer Reihe */
@media (min-width: 1024px) {
  .process-track {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
    position: relative;
  }
  /* Horizontale Verbindungslinie */
  .process-track::before {
    display: block;
    position: absolute;
    top: 1.75rem;
    bottom: auto;
    left: 1.75rem;
    right: 1.75rem;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 70%, #10B981 100%);
    opacity: 0.18;
  }
  .process-node {
    flex: 1;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0;
    border-bottom: none;
    border-right: none;
    border-top: none !important;
  }
  .process-node:nth-child(even) {
    padding-left: 0;
    border-left: none;
  }
  .process-node:last-child {
    grid-column: auto;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0;
    border-top: none;
  }
  .process-node:last-child .process-node-body {
    display: block;
  }
}

/* ── 13. TESTIMONIALS ────────────────────────────────────── */
#testimonials {
  background:
    radial-gradient(ellipse 55% 60% at 15% 40%, rgba(101,146,230,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 55% 60% at 85% 60%, rgba(71,181,237,0.08) 0%, transparent 60%),
    linear-gradient(135deg, #edf3ff 0%, #f6f9ff 50%, #e8f2ff 100%);
}
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 3rem;
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.testimonial-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.stars {
  display: flex;
  gap: 3px;
  margin-bottom: 1rem;
  color: #F59E0B;
}
.stars svg { width: 18px; height: 18px; }
.testimonial-text {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.author-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--white);
  flex-shrink: 0;
}
.author-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
}
.author-role {
  font-size: 0.78rem;
  color: var(--text-mid);
}
.testimonials-note {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.82rem;
  color: var(--gray-500);
  font-style: italic;
}

/* ── 14. ABOUT — Welle 5.25 v4: Tier 4 (Story) ─────────────────
   Continuous BG. Single ambient Layer, Whitespace-dominant.
   ──────────────────────────────────────────────────────────── */
#about {
  position: relative;
  background-color: transparent;
  /* Atelier-Token-Aliases — damit `.atelier-eyebrow`/`.atelier-title` greifen */
  --at-mocha: #1498D5;
  --at-ink: #0A1B33;
  --at-ink-soft: rgba(10, 27, 51, 0.65);
  --at-font-body: var(--font-main, 'Inter', system-ui, sans-serif);
  --at-font-display: var(--font-main, 'Inter', system-ui, sans-serif);
}
body.is-dark-bg #about {
  --at-mocha: #3EB6F0;
  --at-ink: #F0F4FA;
  --at-ink-soft: rgba(240, 244, 250, 0.65);
}
.about-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(20, 152, 213, 0.08), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 100px, black calc(100% - 100px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, black 100px, black calc(100% - 100px), transparent 100%);
}
body.is-dark-bg #about { background-color: #0A1B33; }
body.is-dark-bg .about-ambient {
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(62, 182, 240, 0.10), transparent 70%);
}
#about .section-title { color: var(--dark); }
#about .section-sub { color: var(--text-mid); }
#about .section-label { color: var(--accent-blue); }
#about .trust-fact-title { color: var(--dark); }
#about .trust-fact-desc { color: var(--text-mid); }
#about .trust-fact-icon svg { color: var(--accent-blue); }

/* About Split Layout (Text links + Facts rechts) */
.about-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
.about-split-left .section-title { margin-bottom: 1rem; }
.about-split-left .section-sub { margin-bottom: 1.5rem; }
.about-teaser-link {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent-blue);
  text-decoration: none;
  transition: opacity 0.2s;
}
.about-teaser-link:hover { opacity: 0.7; }

/* Trust Facts in rechter Spalte – alle nth-child Overrides zurücksetzen */
.about-split-right .trust-fact,
.about-split-right .trust-fact:nth-child(n),
.about-split-right .trust-fact:nth-child(2n),
.about-split-right .trust-fact:nth-child(3n),
.about-split-right .trust-fact:nth-last-child(n),
.about-split-right .trust-fact:nth-last-child(-n+2),
.about-split-right .trust-fact:nth-last-child(-n+3) {
  border-right: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-radius: 0;
  padding: 1.5rem 0;
}
.about-split-right .trust-fact:first-child { padding-top: 0; }
.about-split-right .trust-fact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .about-split { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

/* Team-Karten */
.about-team {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}
.team-card {
  background: white;
  border: 1px solid rgba(91,156,246,0.15);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.team-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: rgba(91,156,246,0.3);
}
.team-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.team-avatar svg { width: 32px; height: 32px; opacity: 0.5; }
.team-avatar--david {
  background: linear-gradient(135deg, var(--primary-light) 0%, #d0e0ff 100%);
  color: var(--primary);
}
.team-avatar--sirochita {
  background: linear-gradient(135deg, #fff0e8 0%, #ffe0cc 100%);
  color: #c97a3a;
}
.team-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 2px;
}
.team-role {
  font-size: 0.82rem;
  color: var(--text-mid);
  margin-bottom: 6px;
}
.team-lang {
  font-size: 0.78rem;
  color: var(--accent-blue);
  font-weight: 600;
}
.team-note {
  font-size: 0.75rem;
  color: var(--gray-500);
  text-align: center;
  font-style: italic;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
.about-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--primary-light) 0%, #dde8ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-img-placeholder {
  text-align: center;
  color: var(--primary);
}
.about-img-placeholder svg { width: 80px; height: 80px; opacity: 0.4; }
.about-img-placeholder p { font-size: 0.8rem; color: var(--gray-500); margin-top: 0.75rem; }
.about-content .section-label { margin-bottom: 0.5rem; }
.about-content h2 { margin-bottom: 1.25rem; }
.about-content p {
  font-size: 0.975rem;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.stat-item {
  text-align: center;
}
.stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.stat-label {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
}

/* ── 15. FAQ ─────────────────────────────────────────────── */
#faq {
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(101,146,230,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #f8f9ff 0%, #f0f5ff 100%);
}
.faq-list {
  max-width: 760px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item.open { border-color: var(--primary); }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition);
}
.faq-question:hover { color: var(--primary); }
.faq-icon {
  width: 24px; height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  color: var(--gray-500);
}
.faq-item.open .faq-icon {
  background: var(--primary);
  color: var(--white);
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-answer-inner {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9rem;
  color: var(--gray-500);
  line-height: 1.7;
  border-top: 1px solid var(--gray-100);
  padding-top: 1rem;
}
.faq-item.open .faq-answer { max-height: 400px; }

/* ── 15b. REFERENZEN — Welle 5.25: ersetzt durch referenzen-portfolio.css ─ */
/* Alte ref-teaser-* Styles entfernt (Welle 5.25). Neue Premium-Portfolio-
   Section liegt in _shared/css/components/referenzen-portfolio.css und wird
   in index-com.html nach services-atelier.css inkludiert. */

/* ── 16. CONTACT — Welle 5.25 v4: Tier 5 (Conversion Close) ────
   Continuous BG. Aurora kehrt zurück (4-Layer wie Services aber sanfter
   und langsamer) als emotional Close vor dem Footer.
   ──────────────────────────────────────────────────────────── */
#contact {
  position: relative;
  background-color: transparent;
  /* Atelier-Token-Aliases — damit `.atelier-eyebrow`/`.atelier-title` greifen */
  --at-mocha: #1498D5;
  --at-ink: #0A1B33;
  --at-ink-soft: rgba(10, 27, 51, 0.65);
  --at-font-body: var(--font-main, 'Inter', system-ui, sans-serif);
  --at-font-display: var(--font-main, 'Inter', system-ui, sans-serif);
}
body.is-dark-bg #contact {
  --at-mocha: #3EB6F0;
  --at-ink: #F0F4FA;
  --at-ink-soft: rgba(240, 244, 250, 0.65);
}
.contact-aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 40%, rgba(20, 152, 213, 0.14), transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 60%, rgba(255, 122, 77, 0.10), transparent 65%),
    radial-gradient(ellipse 50% 45% at 70% 35%, rgba(20, 152, 213, 0.12), transparent 65%),
    radial-gradient(ellipse 55% 50% at 25% 65%, rgba(255, 122, 77, 0.08), transparent 65%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%;
  background-position: 0% 50%, 100% 50%, 50% 100%, 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 120px, black calc(100% - 120px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, black 120px, black calc(100% - 120px), transparent 100%);
  animation: contact-aurora-drift 30s ease-in-out infinite;
}
@keyframes contact-aurora-drift {
  0%, 100% { background-position: 0% 50%, 100% 50%, 50% 100%, 50% 0%; }
  50%      { background-position: 100% 50%, 0% 50%, 50% 0%, 50% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-aurora { animation: none; }
}
body.is-dark-bg #contact { background-color: #0A1B33; }
body.is-dark-bg .contact-aurora {
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 40%, rgba(62, 182, 240, 0.18), transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 60%, rgba(255, 148, 102, 0.13), transparent 65%),
    radial-gradient(ellipse 50% 45% at 70% 35%, rgba(62, 182, 240, 0.15), transparent 65%),
    radial-gradient(ellipse 55% 50% at 25% 65%, rgba(255, 148, 102, 0.10), transparent 65%);
}
#contact::before { display: none; }
#contact .section-label { color: var(--accent-blue); }
#contact .section-title { color: var(--dark); }
#contact .section-sub { color: var(--text-mid); }

/* Welle 5.26 v37: Contact-Section komplett zentriert (Closing-Climax-Ausnahme
   vom Editorial-Links-Pattern — User-Wunsch, da Contact als CTA-Schluss
   visuell stärker als Statement wirkt wenn zentriert).
   v42: section-sub explicit centered (text-align reicht nicht, weil
   .section-sub max-width: 560px hat → ohne margin: auto bleibt sie links). */
#contact .atelier-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#contact .atelier-eyebrow {
  justify-content: center;
}
#contact .section-sub {
  margin-left: auto;
  margin-right: auto;
}
#contact .btn-white-outline {
  border-color: var(--dark);
  color: var(--dark);
  background: transparent;
}
#contact .btn-white-outline:hover {
  background: var(--dark);
  color: white;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 3rem;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.contact-item-icon {
  width: 44px; height: 44px;
  min-width: 44px;
  background: rgba(101,146,230,0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.contact-item-icon svg { width: 20px; height: 20px; }
.contact-item-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.2rem;
}
.contact-item-value {
  font-size: 0.95rem;
  color: var(--white);
  font-weight: 500;
}
.contact-item-value a { color: var(--white); }
.contact-item-value a:hover { color: var(--primary); }
.contact-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

/* Formular */
.contact-form-wrap {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: 2rem;
}
.contact-form-wrap h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1.5rem;
}
.form-group {
  margin-bottom: 1.1rem;
}
.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  font-family: var(--font-main);
  font-size: 0.9rem;
  color: var(--white);
  transition: all var(--transition);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.3); }
.form-group select option { background: var(--dark-2); color: var(--white); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  background: rgba(101,146,230,0.1);
  box-shadow: 0 0 0 3px rgba(101,146,230,0.15);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-privacy {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.form-privacy a { color: rgba(255,255,255,0.55); text-decoration: underline; }
.form-privacy a:hover { color: var(--white); }
.contact-form-wrap .btn { width: 100%; justify-content: center; }
#form-message { display: none; }
#form-message.visible { display: block; }
.form-success {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}
.form-success svg { width: 2.5rem; height: 2.5rem; margin: 0 auto 0.75rem; display: block; fill: none; stroke: #16a34a; }
.form-success svg path { stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.form-success h3 { font-size: 1.1rem; font-weight: 700; color: #15803d; margin-bottom: 0.4rem; }
.form-success p { font-size: 0.88rem; color: #166534; line-height: 1.55; margin: 0; }

/* ── 17. FOOTER ──────────────────────────────────────────── */
footer {
  background: var(--bg-darkest);
  padding: 3rem 0 1.5rem;
  color: rgba(255,255,255,0.65);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand .nav-logo img {
  height: 2.4rem;
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.footer-brand p {
  font-size: 0.85rem;
  margin-top: 0.75rem;
  line-height: 1.6;
  max-width: 260px;
}
.footer-contact {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.footer-contact a {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: color var(--transition);
}
.footer-contact a:hover { color: var(--accent-blue); }
.footer-hours-text {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.50);
}
.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.footer-social--spaced { margin-top: 2.5rem; }
.footer-social-link {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.footer-social-link:hover { background: rgba(255,255,255,0.2); }
.footer-social-link svg { width: 18px; height: 18px; fill: rgba(255,255,255,0.8); }
.footer-col h3,
.footer-col h4 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col ul a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  transition: color var(--transition);
}
.footer-col ul a:hover { color: var(--white); }
.footer-regionen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 1rem 0;
}
.footer-regionen-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cbd5e1;  /* a11y: explizit hex, contrast 10.7:1 vs #111827 (war 3.21:1) */
  white-space: nowrap;
}
.footer-regionen-links { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.footer-regionen-link {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.15s;
}
.footer-regionen-link:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.1); }
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
  padding-top: 1.5rem;
  font-size: 0.8rem;
}
.footer-legal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-legal a {
  color: rgba(255,255,255,0.65);
  font-size: 0.8rem;
}
.footer-legal a:hover { color: var(--white); }

/* ── 18. LEGAL PAGES ─────────────────────────────────────── */
.legal-page { padding-top: 8rem; padding-bottom: 5rem; }
.legal-page h1 { margin-bottom: 2rem; }
.legal-page h2 {
  font-size: 1.1rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.legal-page p, .legal-page li {
  font-size: 0.93rem;
  color: var(--gray-700);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}
.legal-page strong { color: var(--dark); }

/* ── 19. SCROLL REVEALS — DISABLED (Welle 5.21, 2026 premium-discipline)
   Apple/Stripe/Linear/Framer machen KEINE generic fade-up-on-scroll. Premium-
   Standard 2026 = "content is here, motion supports interaction not theatre".
   `.reveal` HTML-Klassen bleiben (155 stück site-weit) aber CSS-neutralisiert,
   damit content sofort sichtbar ist. premium-polish.js setupScrollReveals()
   ist ebenfalls deaktiviert. Behalten: hover-affordances, magnetic buttons,
   number-countup (purpose-driven), View Transitions, live data animations. */
.reveal,
.reveal-delay-1,
.reveal-delay-2,
.reveal-delay-3,
.reveal-delay-4,
.reveal-delay-5,
.reveal-delay-6 {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ── 20. MEDIA QUERIES – TABLET (768px) ──────────────────── */
@media (min-width: 768px) {
  section { padding: 6rem 0; }
  /* Hero→Services Übergang: gradient macht die Trennung, kein extra Luft nötig */
  #services:not(.atelier) { padding-top: 2.5rem; }

  /* Nav-Links erst ab Desktop (1024px) – Tablets nutzen Hamburger */

  /* .hero-h1 font-size wird jetzt per clamp in .h1-premise / .h1-payoff gesteuert */

  .services-grid { grid-template-columns: repeat(3, 1fr); }

  /* Angebot-Grid: 2→3 Spalten auf Tablet */
  .angebot-grid { grid-template-columns: repeat(3, 1fr); }
  .kombi-grid { grid-template-columns: 1fr 1fr; }
  .angebot-ctas { flex-direction: row; }

  .why-grid { grid-template-columns: 1fr 1fr; }

  .portfolio-grid { grid-template-columns: 1fr 1fr; }

  .pricing-layout { grid-template-columns: 1fr 1fr; }


  .testimonials-grid { grid-template-columns: 1fr 1fr; }

  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .contact-grid { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ── Nav-CTA ab 768px sichtbar (Tablet: Hamburger + CTA-Button) ── */
@media (min-width: 768px) {
  .nav-cta { display: inline-flex; }
}
/* ── Volle Nav-Links erst ab 1024px ── */
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .hamburger { display: none; }
  .lang-switcher { display: flex; }
}

/* ── Hero: sanftes Einblenden beim Seitenaufruf ── */
@keyframes hero-content-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}
#hero .hero-content {
  animation: hero-content-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Beam-Pulse startet nach der M-Animation (≈6.5s) damit kein Konflikt entsteht */
.h1-beam      { animation: beam-pulse 4s ease-in-out 6.5s infinite; }
/* Beam wird per GSAP von links nach rechts gezeichnet (hero-animation.js) */
/* Scanner deaktiviert */
.hero-scanner { display: none !important; }

/* ── Kleine Screens ── */
@media (max-width: 480px) {
  .beam-svg { width: 100%; }
  .hero-badge { white-space: normal; }
  .hero-subline { white-space: normal; }
  .h1-payoff { white-space: normal; font-size: clamp(2.2rem, 10.5vw, 2.85rem); }
  .br-mobile { display: block; }
  .br-desktop { display: none; }
}

/* ── Sehr schmale Screens (≤ 359px, z.B. Galaxy Z Fold) ── */
@media (max-width: 359px) {
  #hero .hero-content { gap: 0.875rem; }
  .h1-premise { font-size: clamp(1.6rem, 7vw, 2.5rem); }
  .h1-payoff  { font-size: clamp(2rem, 9vw, 3.5rem); white-space: normal; }
  .hero-badge { font-size: 0.56rem; }
  .cta-group  { width: 100%; max-width: 100%; }
  /* Button darf nicht über den Rand – volle Breite */
  .cta-group .btn { width: 100%; justify-content: center; }
}

/* ── Fade-out Gradient nach unten: auf Mobile zu Services-Hintergrund überblenden ── */
@media (max-width: 767px) {
  #hero::after {
    height: 36px;
    background: linear-gradient(to bottom, transparent, #eef4ff);
  }
  /* Badge unter dem CTA-Button: eine Zeile, kleiner Font */
  .hero-badge {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border-left: none;
    padding-left: 0;
    font-size: 0.72rem;
    white-space: nowrap;
    gap: 0.3rem;
  }
  .hero-badge .badge-flags { font-size: 0.9rem; letter-spacing: 0.1em; }
  .hero-badge .badge-text { display: inline; }
  #hero .cta-group {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  #services:not(.atelier)::before { display: none; }
  #services:not(.atelier) .container { position: relative; z-index: 1; }
}

/* ── Sehr große Phones (≥900px Höhe, z.B. iPhone 14 Pro Max) ── */
@media (max-width: 639px) and (min-height: 900px) {
  .hero-strip-item { padding: 1.1rem 0; }
}

/* ── Große Phones (≥750px Höhe, z.B. iPhone 12 Pro, 14, 15) ── */
@media (max-width: 639px) and (min-height: 750px) {
  .hero-trust { display: flex; flex-direction: column; gap: 5px; }
}

/* ── Hero: Tablet/Desktop – hero-content als 2-Spalten-Grid ─── */
@media (min-width: 768px) {
  /* hero-content wird zum Grid: M links | Text rechts */
  .hero-content {
    display: grid;
    grid-template-columns: clamp(240px, 28vw, 325px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 1.75rem;
    max-width: none;
    align-items: start;
  }
  /* Alle hero-content-Kinder außer hero-m in Spalte 2 */
  .hero-content > :not(#hero-m) { grid-column: 2; }
  /* M in Spalte 1, vertikal zentriert über alle Zeilen */
  #hero-m {
    grid-column: 1;
    grid-row: 1 / 5;
    width: clamp(195px, 22vw, 265px);
    height: clamp(250px, 28vw, 340px);
    margin: 0 auto 0 0;
    align-self: center;
    justify-self: start;
    position: relative;
  }
}

/* ── 21. MEDIA QUERIES – DESKTOP (1024px) ────────────────── */
@media (min-width: 1024px) {
  section { padding: 7rem 0; }
  #hero .hero-content { gap: 1rem; justify-content: center; }
  #hero .hero-h1 { margin-bottom: 0.5rem; }
  #hero .cta-group { margin-top: 1rem; }
  #hero .hero-strip { margin-top: 2rem; }
  /* Größeres M auf Desktop – M links */
  .hero-content { grid-template-columns: clamp(310px, 32vw, 415px) minmax(0, 1fr); }
  #hero-m { width: clamp(245px, 26vw, 335px); height: clamp(315px, 33vw, 430px); }

  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

  /* Bento Grid Desktop: 3 Spalten, asymmetrisch */
  .bento-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .bento-card--main { grid-column: 1 / 3; }
  .bento-card--wide { grid-column: 2 / 4; }
  .bento-cta { flex-direction: row; }

  /* Hub Grid Desktop: 2 Spalten nebeneinander */
  .hub-grid { grid-template-columns: 1fr auto 1fr; }
  .hub-trenner { width: 1px; height: auto; }
  .hub-ctas { flex-direction: row; }

  /* Service Teaser Desktop: 2 Spalten */
  .service-teaser-grid { grid-template-columns: 1fr 1fr; }

  /* Angebot-Grid: 4 Spalten auf Desktop */
  .angebot-grid { grid-template-columns: repeat(4, 1fr); }
  .kombi-grid { grid-template-columns: 1fr 1fr; }
  .angebot-ctas { flex-direction: row; }

  .why-grid { grid-template-columns: repeat(3, 1fr); }

  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }

  .browser-screen { height: 200px; }

  .testimonials-grid { grid-template-columns: repeat(3, 1fr); }

  .about-grid { grid-template-columns: 5fr 6fr; gap: 5rem; }
}

/* ── Kleiner Desktop (1024px–1279px): Nav-Elemente verkleinern ── */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-inner { gap: 0.4rem; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 0.4rem 0.55rem; font-size: 0.82rem; }
  .nav-right { gap: 0.5rem; flex-shrink: 0; }
  .nav-cta { padding: 0.35rem 0.85rem !important; font-size: 0.78rem !important; }
}
/* ── Tablet (768px–1023px): nur CTA + Hamburger ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav-right { gap: 0.5rem; }
  .nav-cta { padding: 0.35rem 0.9rem !important; font-size: 0.8rem !important; }
}

/* ── Sehr kurze Screens (z.B. Nest Hub 1024×600px): kompakterer Hero ── */
@media (min-width: 768px) and (max-height: 680px) {
  #hero { padding: 4.8rem 0 2rem; }
  #hero::after { height: 0; }
  .hero-badge { display: none; }
  .h1-premise { font-size: clamp(1.6rem, 3vw, 2.8rem); }
  .h1-payoff  { font-size: clamp(2rem, 5vw, 4rem); }
  #hero .hero-content { gap: 0.6rem; }
  .hero-trust { gap: 4px 16px; }
  .hero-strip-item { padding: 0.8rem 0; }
}

/* ── Trust Items: ab 900px alle 4 nebeneinander ── */
@media (min-width: 900px) {
  .hero-trust {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
  }
}

/* ── 22. UTILITIES ───────────────────────────────────────── */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }

/* ── 23. RECHTLICHE SEITEN ───────────────────────────────── */
.legal-page {
  padding-top: 8rem;
  padding-bottom: 5rem;
  min-height: 80vh;
}
.legal-page h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}
.legal-subtitle {
  color: var(--gray-500);
  font-size: 0.9rem;
  margin-bottom: 3rem;
}
.legal-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--gray-100);
}
.legal-section:last-of-type {
  border-bottom: none;
}
.legal-section h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.75rem;
}
.legal-section p {
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 0.75rem;
}
.legal-section ul {
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}
.legal-section ul li {
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 0.3rem;
}
.legal-section a {
  color: var(--primary);
  text-decoration: underline;
}
.legal-section a:hover {
  color: var(--primary-dark);
}
.legal-back {
  margin-top: 3rem;
}
.legal-back a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.legal-back a:hover {
  color: var(--primary-dark);
}


/* ════════════════════════════════════════════════════════════
   TRUST FACTS SECTION
════════════════════════════════════════════════════════════ */
.trust-facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 3rem;
}
.trust-fact {
  padding: 2rem 1.75rem;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.trust-fact:nth-child(2n) { border-right: none; }
.trust-fact:nth-last-child(-n+2) { border-bottom: none; }
.trust-fact-icon svg {
  width: 28px; height: 28px;
  color: #60a5fa;
  margin-bottom: 0.25rem;
}
.trust-fact-title {
  font-size: 1rem;
  font-weight: 800;
  color: white;
  letter-spacing: -0.01em;
}
.trust-fact-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}
@media (min-width: 768px) {
  .trust-facts-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-fact:nth-child(2n) { border-right: 1px solid rgba(255,255,255,0.08); }
  .trust-fact:nth-child(3n) { border-right: none; }
  .trust-fact:nth-last-child(-n+3) { border-bottom: none; }
  .trust-fact:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .trust-fact:last-child { border-bottom: none; }
}

/* ════════════════════════════════════════════════════════════
   FOOTER MOBILE
════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-sprachen {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════
   STICKY MOBILE CTA
════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   Welle 5.7.48: Floating LINE Chat Button (Thai-Concierge-Pattern)
   Ersetzt den klassischen Marketing-Funnel-Sticky-CTA.
   Vorbild: Premium-Thai-Hotels (Mandarin Oriental, Anantara Concierge-Chat).
   Recherche (2026): Premium-SaaS-Brands (Stripe/Linear/Vercel) nutzen KEINE
   Sticky-Funnel-CTAs. Thai-Markt erwartet aber LINE als direkten Action-Anker.
   Lösung: subtiler 56px Floating-Icon-Button unten rechts — Thai-Standard,
   premium-konzern-tauglich, kein Marketing-Sprech.
   ════════════════════════════════════════════════════════════ */
.floating-line-btn {
  display: none;
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  right: 1rem;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  background: #06C755;
  color: #ffffff;
  border-radius: 50%;
  text-decoration: none;
  box-shadow:
    0 4px 12px rgba(6, 199, 85, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.10);
  z-index: 990;
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.floating-line-btn:active {
  transform: scale(0.94);
  box-shadow:
    0 2px 6px rgba(6, 199, 85, 0.30),
    0 1px 2px rgba(0, 0, 0, 0.08);
}
.floating-line-btn:focus-visible {
  outline: 2px solid #06C755;
  outline-offset: 3px;
}
.floating-line-icon {
  width: 30px;
  height: 30px;
  display: block;
}

/* Mobile + Tablet: zeigt den Button. Desktop: Header-CTA reicht. */
@media (max-width: 1023px) {
  .floating-line-btn { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-line-btn { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   DEPRECATED (Welle 5.7.48): Sticky Marketing-CTA — entfernt durch
   Floating-LINE-Button (siehe oben). CSS-Regeln bleiben für Notfall,
   greifen aber nicht mehr da HTML-Element nicht mehr existiert.
   ════════════════════════════════════════════════════════════ */
/* Welle 5.1f: Glass-Atelier-Redesign — matches Hero-CTA + Tab-Pills.
   Floating mit Side-Margins (premium, nicht edge-to-edge), Cream-Glass-Container,
   Gold-Border-Akzent, Dark-CTA-Button mit warm Glow. */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  left: 0.75rem; right: 0.75rem;
  padding: 0.4rem 0.5rem 0.35rem;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(252, 247, 234, 0.85) 100%);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(212, 165, 116, 0.40);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 6px rgba(82, 60, 30, 0.08),
    0 10px 24px -4px rgba(82, 60, 30, 0.20),
    0 0 50px -10px rgba(212, 165, 116, 0.22);
  z-index: 990;
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 280ms ease;
  transform: translateY(120%);
  opacity: 0;
  will-change: transform, opacity;
}
.sticky-cta.visible {
  transform: translateY(0);
  opacity: 1;
}
.sticky-cta .btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  background: linear-gradient(135deg, #1a1410 0%, #2a1f1a 100%);
  color: white;
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 12px;
  text-decoration: none;
  letter-spacing: -0.005em;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, 0.30),
    0 0 0 1px rgba(212, 165, 116, 0.50),
    0 6px 14px rgba(184, 137, 90, 0.28),
    0 0 30px -8px rgba(255, 200, 140, 0.40);
  -webkit-tap-highlight-color: transparent;
  transition: background 280ms ease, transform 200ms ease;
}
.sticky-cta .btn:active {
  background: linear-gradient(135deg, #6592e6 0%, #2260d2 100%);
  transform: scale(0.98);
}
.sticky-hours {
  text-align: center;
  font-size: 0.62rem;
  color: var(--text-soft, #6b7280);
  margin: 0.32rem 0 0;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
}

/* Dark-mode (body.is-dark-bg) — Cream-Glass wird zu Dark-Glass mit Gold-CTA */
body.is-dark-bg .sticky-cta {
  background:
    linear-gradient(135deg,
      rgba(20, 28, 44, 0.85) 0%,
      rgba(15, 23, 38, 0.92) 100%);
  border-color: rgba(212, 165, 116, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, 0.10),
    0 14px 32px -4px rgba(0, 0, 0, 0.45),
    0 0 60px -10px rgba(212, 165, 116, 0.30);
}
body.is-dark-bg .sticky-cta .btn {
  background: linear-gradient(135deg, #d4a574 0%, #b8895a 100%);
  color: #0f172a;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.45),
    0 0 0 1px rgba(184, 137, 90, 0.65),
    0 8px 20px rgba(184, 137, 90, 0.45),
    0 0 40px -8px rgba(255, 200, 140, 0.50);
}
body.is-dark-bg .sticky-hours {
  color: rgba(255, 240, 215, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: opacity 0.01ms; }
}
/* DEPRECATED (Welle 5.7.48): Sticky-Bar entfernt, ersetzt durch Floating-LINE-Button.
   Padding-bottom auf main brauchen wir nicht mehr (Floating-Btn ist 56px icon-only
   unten rechts, kein full-width-Bar mehr → kein Content-Blocking). */
@media (max-width: 1023px) {
  /* .sticky-cta { display: block; } — DEPRECATED, Element existiert nicht mehr */
  /* main { padding-bottom: 96px; } — DEPRECATED, Floating-Btn braucht keinen Spacer */
}

/* ════════════════════════════════════════════════════════════
   768px FEINSCHLIFF
════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Bento Grid: 2 Spalten auf Tablet */
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-card--main { grid-column: 1 / -1; }
  .bento-card--wide { grid-column: 1 / -1; }

  /* Service Teaser: 2 Spalten nebeneinander */
  .service-teaser-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════
   HERO TYPEWRITER
════════════════════════════════════════════════════════════ */
.hero-typewriter {
  min-height: 2em;
  display: flex;
  align-items: center;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.hero-typewriter-text {
  color: rgba(255,255,255,0.65);
}
.hero-typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: #60a5fa;
  margin-left: 3px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: tw-blink 0.85s ease-in-out infinite;
}
@keyframes tw-blink {
  0%, 45%  { opacity: 1; }
  55%, 100% { opacity: 0; }
}
@media (max-width: 639px) {
  .hero-typewriter { font-size: 0.9rem; min-height: 1.8em; }
}

/* ══════════════════════════════════════════════════════════
   HERO – SPLIT LAYOUT (Light, 2026)
   ══════════════════════════════════════════════════════════ */

/* Split: Text links · Mockup rechts */
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  max-width: 700px;
}

/* Text-Spalte */
.hero-text {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2vw, 1.6rem);
  align-items: flex-start;
}

/* Thai Badge */
.thai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #f59e0b;
  color: #78350f;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 99px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  box-shadow: 0 1px 6px rgba(245, 158, 11, 0.2);
}

/* H1 neu – linksbündig, dunkelblau/grau */
.hero-h1 {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0;
}
.hero-h1-premise {
  display: block;
  font-size: clamp(2.4rem, 4.5vw, 4.4rem);
  font-weight: 800;
  color: #2563eb;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.hero-h1-payoff {
  display: block;
  font-size: clamp(3.2rem, 6.5vw, 6rem);
  font-weight: 900;
  color: #1a2540;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

/* Subline */
.hero-subline {
  font-size: clamp(0.98rem, 1.6vw, 1.15rem);
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  max-width: 560px;
  font-weight: 400;
  margin-bottom: 0;
  white-space: normal;
  opacity: 1;
}

/* Trust Row */
.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.8rem;
  color: #374151;
  font-weight: 500;
}
.hero-trust-row span::before {
  content: '✓ ';
  color: #16a34a;
  font-weight: 700;
}

/* CTA-Gruppe */
.hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: 0.25rem;
}
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #2563eb;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.9rem 1.9rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 16px rgba(37,99,235,0.3);
  white-space: nowrap;
}
.btn-hero-primary:hover {
  background: #1d4ed8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.4);
}
.hero-price-link {
  font-size: 0.88rem;
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
  padding: 0.2rem 0;
  border-bottom: 1px solid #d1d5db;
  transition: color 0.2s, border-color 0.2s;
}
.hero-price-link:hover {
  color: #1a2540;
  border-color: #1a2540;
}

/* ══ Laptop-Mockup (Pure CSS) ══ */
.hero-mockup-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}
.laptop {
  width: 100%;
  max-width: 480px;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.14)) drop-shadow(0 6px 16px rgba(0,0,0,0.08));
}
.laptop-lid {
  background: #d1d5db;
  border-radius: 14px 14px 4px 4px;
  padding: 10px 10px 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
  aspect-ratio: 16/10;
  position: relative;
}
.laptop-lid::before {
  /* Camera dot */
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  background: #9ca3af;
  border-radius: 50%;
}
.laptop-screen {
  background: #f8fafc;
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,0.06);
}
.mockup-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.mockup-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mockup-dot--red    { background: #f87171; }
.mockup-dot--yellow { background: #fbbf24; }
.mockup-dot--green  { background: #4ade80; }
.mockup-urlbar {
  margin-left: 6px;
  flex: 1;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  height: 14px;
  font-size: 7px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  padding: 0 6px;
  max-width: 140px;
  font-family: var(--font-main);
}
.mockup-page {
  flex: 1;
  background: #f8fafc;
  overflow: hidden;
  display: block;
  position: relative;
}
.mockup-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.mockup-nav-stripe {
  background: #1a2540;
  height: 20px;
  flex-shrink: 0;
}
.mockup-hero-block {
  background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 60%, #fef3c7 100%);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.mockup-line {
  border-radius: 3px;
  flex-shrink: 0;
}
.mockup-line--h1-a  { height: 9px;  width: 70%; background: #1a2540; }
.mockup-line--h1-b  { height: 9px;  width: 55%; background: #1a2540; opacity: 0.8; }
.mockup-line--sub   { height: 5px;  width: 85%; background: #64748b; margin-top: 3px; }
.mockup-cta-pill    { width: 68px;  height: 13px; background: #2563eb; border-radius: 5px; margin-top: 6px; }
.mockup-cards-row {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  background: #f8fafc;
  flex-shrink: 0;
}
.mockup-card {
  flex: 1;
  height: 36px;
  background: white;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}
.mockup-card:first-child::after {
  content: '';
  display: block;
  margin: 8px 8px 4px;
  height: 4px;
  background: #2563eb;
  border-radius: 2px;
  width: 50%;
}
.mockup-text-block {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mockup-line--text-a { height: 4px; width: 90%; background: #d1d5db; }
.mockup-line--text-b { height: 4px; width: 75%; background: #d1d5db; }
.mockup-line--text-c { height: 4px; width: 82%; background: #d1d5db; }
.laptop-base {
  background: #e5e7eb;
  border-radius: 0 0 10px 10px;
  height: 12px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(0,0,0,0.08);
}
.laptop-notch {
  width: 72px;
  height: 5px;
  background: #9ca3af;
  border-radius: 4px 4px 0 0;
}

/* Mobile: Mockup kleiner */
@media (max-width: 1023px) {
  .hero-mockup-wrap { padding: 0; }
  .laptop { max-width: 340px; }
}
@media (max-width: 480px) {
  .laptop { max-width: 280px; }
}

/* ══ Services Bar (direkt unter Hero) ══ */
.services-bar {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.services-bar-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .services-bar-grid { grid-template-columns: repeat(3, 1fr); }
}
.services-bar-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.75rem;
  text-decoration: none;
  color: #1a2540;
  border-bottom: 1px solid #e2e8f0;
  transition: background 0.18s ease;
}
@media (min-width: 640px) {
  .services-bar-card {
    border-bottom: none;
    border-right: 1px solid #e2e8f0;
    padding: 1.5rem 2rem;
  }
  .services-bar-card:last-child { border-right: none; }
}
.services-bar-card:last-child { border-bottom: none; }
.services-bar-card:hover { background: #f1f5f9; }
.services-bar-icon {
  width: 38px; height: 38px;
  background: #eff6ff;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #2563eb;
  transition: background 0.18s;
}
.services-bar-icon svg { width: 20px; height: 20px; }
.services-bar-card:hover .services-bar-icon { background: #dbeafe; }
.services-bar-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.services-bar-text strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a2540;
}
.services-bar-text span {
  font-size: 0.78rem;
  color: #64748b;
}
.services-bar-arrow {
  font-size: 0.9rem;
  color: #94a3b8;
  transition: transform 0.18s, color 0.18s;
  flex-shrink: 0;
}
.services-bar-card:hover .services-bar-arrow {
  transform: translateX(3px);
  color: #2563eb;
}

/* ── SECTION HINTERGRÜNDE ────────────────────────────────── */
.bg-light          { background: #faf9f7; }
.bg-blue-light     { background: #f0f4ff; }
.bg-white          { background: white; }
.bg-gradient-light { background: linear-gradient(180deg, #eef4ff 0%, #f8faff 100%); }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer-sprachen h3 { margin-top: 1.25rem; }

/* ── KONTAKTFORMULAR ─────────────────────────────────────── */
#submit-btn   { width: 100%; }
#form-message { display: none; margin-top: 1rem; }

/* ── SUB-CTA FLEX ────────────────────────────────────────── */
.sub-cta-buttons { justify-content: center; }

/* ════════════════════════════════════════════════════════════
   MOBILE FIXES
════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .trust-item { width: 100%; border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.12); white-space: normal; }
  .trust-item:last-child { border-bottom: none; }
  .einzel-header::before, .einzel-header::after { display: none !important; }
  .einzel-header { justify-content: center; }
  .einzel-header-text { white-space: normal !important; text-align: center; letter-spacing: 0.05em; }
}

/* ════════════════════════════════════════════════════════════
   GEO PATTERNS (TL;DR · Byline · Q&A · Definitions)
════════════════════════════════════════════════════════════ */
.tldr {
  background: #f7f5f0;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dark);
  max-width: 720px;
}
.tldr-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
}
.tldr ul { padding-left: 1rem; margin: 0.4rem 0 0; }
.tldr li { list-style: disc; margin: 0.3rem 0; }

.byline {
  font-size: 0.85rem;
  color: var(--text-mid);
  margin: -0.5rem 0 1.5rem;
}
.byline a { color: var(--primary-dark); font-weight: 600; }
.byline a:hover { text-decoration: underline; }
.byline-sep { margin: 0 0.4rem; opacity: 0.5; }

.qa-section { background: var(--bg-warm-white); padding: 4rem 0; }
.qa-section h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--bg-dark);
  margin-bottom: 2rem;
  text-align: center;
}
.qa-list { max-width: 760px; margin: 0 auto; }
.qa-item {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 0.85rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.qa-item:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(34,96,210,0.08); }
.qa-item h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bg-dark);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.qa-item p {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--text-mid);
  margin: 0;
}

.definitions {
  margin: 3rem 0;
  max-width: 760px;
}
.definitions-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary-dark);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.definitions-label::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.definitions dl {
  display: grid;
  grid-template-columns: minmax(130px, 28%) 1fr;
  margin: 0;
}
.definitions dt {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-dark);
  padding: 1.4rem 1.5rem 1.4rem 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin: 0;
  align-self: start;
  overflow-wrap: break-word;
  hyphens: auto;
  min-width: 0;
}
.definitions dd {
  font-size: 0.93rem;
  color: var(--text-mid);
  line-height: 1.7;
  margin: 0;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.definitions dt:first-child,
.definitions dt:first-child + dd { border-top: none; padding-top: 0.75rem; }

/* TL;DR Stat-Bar (Option B): integriert in sub-hero, nutzt pricing-teaser-Stil
   Standardmäßig hidden — wird per Translation-Key tldr_stats_state="on" aktiviert.
   Aktuell: nur com-site/webdesign verwendet diese Variante. */
.tldr-stats { display: none; }
.tldr-stats.on {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 2rem 0 1.5rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  max-width: 720px;
}
.tldr-stat-col { padding: 1.1rem 1.5rem; text-align: left; flex: 1; }
.tldr-stat-divider { height: 1px; background: rgba(255,255,255,0.08); }
.tldr-stat-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: white;
  line-height: 1.15;
  margin-bottom: 0.3rem;
  letter-spacing: -0.5px;
}
.tldr-stat-value-icon { color: #fbbf24; margin-right: 0.15rem; }
.tldr-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
}
.tldr-stat-summary {
  margin: 0 0 1.5rem;
  font-size: 0.97rem;
  color: rgba(255,255,255,0.7);
  max-width: 540px;
  line-height: 1.6;
}
@media (min-width: 640px) {
  .tldr-stats.on { flex-direction: row; }
  .tldr-stat-divider { width: 1px; height: auto; min-height: 60px; }
}

/* Wenn Stat-Bar aktiv ist, alte TL;DR-Box ausblenden */
.tldr-classic-section.hide { display: none; }

/* Hero-Trust-Band — voll-breite Glass-Bar IM Hero am Bottom
   Schmal, mit Brand-Beam oben + unten als "Card-Rahmen"-Effekt
   Glass-Effect lässt den Hero-Background sanft durchscheinen */

/* Bar schließt den Hero direkt ab — kein Hero-Background unter der Bar.
   Margin-top hält Abstand zum hero-strip, Hero-Bottom-Padding ist 0. */
#hero:has(.hero-trust-band) { padding-bottom: 0; }

.hero-trust-band {
  position: relative;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  /* Aus container ausbrechen → voll-breit */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  /* Glass-Effekt: semi-transparent dunkel mit blur */
  background: rgba(8, 14, 26, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* Brand-Beam top — prominent mit Glow (Card-Top-Border) */
.hero-trust-band::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(96,165,250,0) 0%,
    rgba(96,165,250,0.95) 22%,
    rgba(251,191,36,1) 60%,
    rgba(245,158,11,0.3) 100%);
  box-shadow: 0 0 14px rgba(96,165,250,0.55), 0 0 6px rgba(251,191,36,0.45);
  z-index: 2;
}
/* Brand-Beam bottom — dezenter (Card-Bottom-Border) */
.hero-trust-band::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(96,165,250,0) 0%,
    rgba(96,165,250,0.35) 30%,
    rgba(251,191,36,0.45) 65%,
    rgba(245,158,11,0.12) 100%);
}

/* Mobile-First: 3 Cells horizontal mit Trennlinien (deutlich anders als hero-strip),
   Inhalt pro Cell vertikal gestapelt (Wert oben, Label unten) */
.hero-trust-band-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1rem;
}
.hero-trust-cell {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 0.4rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
}
.hero-trust-cell:last-child { border-right: 0; }
.hero-trust-main {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}
.hero-trust-icon {
  color: #fbbf24;
  font-size: 0.85rem;
  line-height: 1;
  align-self: center;
  filter: drop-shadow(0 0 5px rgba(251,191,36,0.55));
}
/* Wenn Icon-Span leer ist (z.B. .de hat keinen Icon in Cell 3), nicht rendern */
.hero-trust-icon:empty { display: none; }
/* SVG-Flagge in Trust-Cell — klein, gerundete Ecken, dezente Border */
.hero-trust-flag {
  width: 18px;
  height: 11px;
  border-radius: 1.5px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.18);
  flex-shrink: 0;
  filter: none;
}
.hero-trust-value {
  font-weight: 700;
  color: white;
  font-size: 0.82rem;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.hero-trust-label {
  color: rgba(255,255,255,0.55);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* Desktop ≥768px: ~52px hoch, Inhalt pro Cell horizontal inline */
@media (min-width: 768px) {
  .hero-trust-band-inner { padding: 0 1.25rem; }
  .hero-trust-cell {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 1.1rem 1.5rem;
  }
  .hero-trust-main {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }
  .hero-trust-icon { font-size: 0.95rem; align-self: center; }
  .hero-trust-value { font-size: 1rem; align-self: center; line-height: 1.2; }
  .hero-trust-label { font-size: 0.82rem; align-self: center; line-height: 1.2; }
}

/* ───────── Related Pages (Welle 3) ───────── */
.related-pages {
  background: var(--bg-warm-gray);
  border-top: 1px solid rgba(0,0,0,0.07);
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.related-pages-title {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-mid);
  text-align: center;
  padding: 1.5rem 0 1.25rem;
  opacity: 0.7;
}
.related-cards {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.related-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  color: var(--dark);
  text-decoration: none;
  transition: color 0.18s ease;
}
.related-card:last-child { border-bottom: none; }
.related-card:hover { color: var(--primary-dark); }
.related-card::before { display: none; }
.related-card-title {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.05rem;
  font-weight: 700;
}
.related-card-desc {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.83rem;
  color: var(--text-mid);
  line-height: 1.4;
}
.related-card-arrow {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--primary);
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}
.related-card:hover .related-card-arrow { transform: translateX(4px); }
@media (min-width: 768px) {
  .related-pages-title { padding: 2rem 0 1.75rem; }
  .related-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .related-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 2.5rem 2.5rem;
    border-bottom: none;
    border-right: 1px solid rgba(0,0,0,0.07);
  }
  .related-card:first-child { padding-left: 0; }
  .related-card:last-child { border-right: none; padding-right: 0; }
  .related-card-arrow {
    position: static;
    transform: none;
    margin-top: auto;
    align-self: flex-start;
  }
  .related-card:hover .related-card-arrow { transform: translateX(4px); }
}


/* ============================================================================
   NAV CLEAN — Stripe-Style Premium Navigation (com-site V3, Welle 5.1a)
   ----------------------------------------------------------------------------
   Quiet premium pattern: full-width edge-to-edge, transparent over the hero,
   solidifies smoothly on scroll. Strong typography carries the premium tone,
   not visual effects. No floating, no glass pills, no iridescent rims.

   Following the pattern used by Stripe, Linear, Vercel, Notion, Framer and
   Apple's marketing site (Apple iOS 26 Liquid Glass is for native iOS
   apps, not for stripe.com / apple.com / linear.app etc).

   Scoped to `#navbar.nav-clean` so the de-site nav (no class) keeps its
   classic dark top-bar styling untouched.
   ============================================================================ */

#navbar.nav-clean,
#navbar.nav-clean.menu-open {
  /* Welle 5.22.10 — Full-Width Apple-Style: Wrapper trägt den BG über
     die ganze Bildschirmbreite. Border-Radius 0, schmal, subtle hairline. */
  background: rgba(253, 250, 245, 0.98) !important;
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  padding: 0 !important;
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: none;
  transition: background 0.35s ease, border-bottom-color 0.35s ease;
}

#navbar.nav-clean .nav-clean-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  /* Welle 5.27 v41 (2026-05-23): padding-y hochgezogen für Premium-Tier 2026
     (Stripe/Linear/Vercel: 64-72px navbar). 0.75rem × Logo 44px → ~64px Höhe.
     Plus Touch-Target-Compliance (Apple HIG 44×44 min) für mobile Thai-Markt. */
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* Kein eigenes BG mehr — Wrapper trägt jetzt den BG (full-width). */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wenn Mega-Menu offen: Hairline-Border raus damit Navbar + Mega visuell
   zu einer Fläche verschmelzen (kein doppelter Strich zwischen ihnen). */
#navbar.nav-clean.menu-open {
  border-bottom-color: transparent !important;
}

/* ----- LOGO ----- */
#navbar.nav-clean .nav-clean-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
#navbar.nav-clean .nav-clean-logo {
  position: relative;
  isolation: isolate;
}
#navbar.nav-clean .nav-clean-logo img {
  /* Welle 5.27 v41/v42: 40 → 44 → 48px für noch klarere Logo-Präsenz (User-
     Feedback "ein bisschen größer"). Scrolled 36 → 40px (kompakter aber
     immer noch sichtbar). */
  height: 48px;
  width: auto;
  display: block;
  position: relative;
  z-index: 1;
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.34, 1.16, 0.64, 1);
}
/* THEME-AWARE LOGO SWITCH — dark serif logo on light bg, white on dark.
   Both images live in the DOM (same dimensions, no layout shift), CSS
   shows whichever matches the active body.is-dark-bg state. The selector
   includes `img` so it outranks the generic `.nav-clean-logo img` rule
   above (which sets display: block at the same class-count). */
#navbar.nav-clean .nav-clean-logo img.nav-clean-logo-img--for-dark { display: none; }
body.is-dark-bg #navbar.nav-clean .nav-clean-logo img.nav-clean-logo-img--for-light { display: none; }
body.is-dark-bg #navbar.nav-clean .nav-clean-logo img.nav-clean-logo-img--for-dark  { display: block; }
/* MOVE 1 — Logo radial glow on hover. Subtle warm halo behind the logo,
   matches the Glass-Atelier hero's gold-cream palette. */
#navbar.nav-clean .nav-clean-logo::after {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(212, 165, 116, 0.32) 0%,
    rgba(212, 165, 116, 0.10) 35%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
#navbar.nav-clean .nav-clean-logo:hover::after { opacity: 1; }
#navbar.nav-clean .nav-clean-logo:hover img { transform: scale(1.04); }

/* ----- LINKS ----- */
#navbar.nav-clean .nav-clean-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.1rem;
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
  position: relative; /* Anchor for the magic pill */
}
#navbar.nav-clean .nav-clean-links li { list-style: none; }

#navbar.nav-clean .nav-clean-link {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0.95rem;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(15, 23, 42, 0.72);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 7px;
  z-index: 1; /* Sits above the magic pill */
  transition: color 0.25s ease;
}
#navbar.nav-clean .nav-clean-link:hover { color: #0f172a; }
#navbar.nav-clean .nav-clean-link[aria-current="page"] { color: #0f172a; }
/* MOVE 5a — subtle press-down on click feedback */
#navbar.nav-clean .nav-clean-link:active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

/* ----- MAGIC PILL — slides between links on hover (Apple-Music / iOS-Tab pattern).
   Position + width set by main.js. The pill stays on the active link by
   default, jumps to whichever link the cursor is over, snaps back on
   mouseleave. Pure transform + width animation = compositor-only, 60fps. */
#navbar.nav-clean .nav-clean-magic-pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 32px;
  width: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
  background: rgba(212, 165, 116, 0.14);
  transform: translate3d(0, -50%, 0);
  opacity: 0;
  transition:
    transform 0.42s cubic-bezier(0.34, 1.16, 0.64, 1),
    width 0.42s cubic-bezier(0.34, 1.16, 0.64, 1),
    opacity 0.25s ease,
    background 0.3s ease;
}
#navbar.nav-clean .nav-clean-magic-pill.is-visible { opacity: 1; }
#navbar.nav-clean .nav-clean-magic-pill.is-hovered {
  background: rgba(212, 165, 116, 0.22);
}

/* ----- RIGHT GROUP — lang / toggle / CTA / hamburger ----- */
#navbar.nav-clean .nav-clean-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ----- LANGUAGE SWITCHER — Stripe/Apple-style dropdown (rev 2)
   Was a pill-toggle, but pills imply "switch in place" while changing
   language actually loads a new page. A dropdown trigger ("EN ▾") makes
   the navigation intent obvious. Click opens a small menu with the
   languages spelled out in their own script. */
#navbar.nav-clean .nav-clean-lang {
  display: none;
  position: relative;
}
#navbar.nav-clean .nav-clean-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.42rem 0.55rem 0.42rem 0.7rem;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(15, 23, 42, 0.65);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
#navbar.nav-clean .nav-clean-lang-trigger:hover {
  background: rgba(15, 23, 42, 0.05);
  color: #0f172a;
}
#navbar.nav-clean .nav-clean-lang-trigger[aria-expanded="true"] {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}
#navbar.nav-clean .nav-clean-lang-trigger:active { transform: scale(0.96); transition: transform 0.08s ease; }

#navbar.nav-clean .nav-clean-lang-chevron {
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform 0.3s cubic-bezier(0.34, 1.16, 0.64, 1);
}
#navbar.nav-clean .nav-clean-lang-trigger[aria-expanded="true"] .nav-clean-lang-chevron {
  transform: rotate(180deg);
}

#navbar.nav-clean .nav-clean-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: rgba(255, 252, 246, 0.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 8px 24px -6px rgba(15, 23, 42, 0.18),
    0 22px 48px -12px rgba(15, 23, 42, 0.12);
  z-index: 100;
  /* Animate via .is-open class — `hidden` keeps it out of the flow when shut */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.16, 0.64, 1);
}
#navbar.nav-clean .nav-clean-lang-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#navbar.nav-clean .nav-clean-lang-menu li { list-style: none; }

#navbar.nav-clean .nav-clean-lang-option {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  color: rgba(15, 23, 42, 0.78);
  border-radius: 7px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
#navbar.nav-clean .nav-clean-lang-option:hover {
  background: rgba(212, 165, 116, 0.12);
  color: #0f172a;
}
#navbar.nav-clean .nav-clean-lang-option.is-active {
  background: rgba(212, 165, 116, 0.14);
  color: #1a1410;
}
#navbar.nav-clean .nav-clean-lang-code {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(15, 23, 42, 0.42);
  min-width: 22px;
}
#navbar.nav-clean .nav-clean-lang-option.is-active .nav-clean-lang-code {
  color: var(--gold-deep, #b8895a);
}
#navbar.nav-clean .nav-clean-lang-name { font-weight: 500; }

/* ----- THEME TOGGLE — prominent icon button (rev 2) -----
   Was a transparent icon — too subtle, users didn't notice. Now a
   pill-button with a soft solid resting-state and a clear hover lift,
   so it reads as "this is interactive". GitHub / Linear / Notion all
   give their theme toggles this kind of presence. */
/* ============================================================================
   THEME SWITCHER — Segmented Control (Welle 5.22.5)
   Vercel Geist / Linear-Pattern: 3 buttons in a pill (Light / System / Dark).
   Selbsterklärend, kein Tooltip nötig. Active-State via miraTEQ-Blau-Tint.
   ============================================================================ */
#navbar.nav-clean .theme-switcher {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
}
#navbar.nav-clean .theme-switcher-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(15, 23, 42, 0.52);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
}
#navbar.nav-clean .theme-switcher-btn:hover {
  color: rgba(15, 23, 42, 0.92);
}
#navbar.nav-clean .theme-switcher-btn:active { transform: scale(0.93); transition: transform 0.08s ease; }
/* Active state via body.theme-mode-X class (statt nur aria-pressed) damit
   das Inline-FOUC-Script direkt nach body-open das active-button korrekt
   highlighten kann — bevor JS die aria-pressed attribute synct. */
body.theme-mode-light  #navbar.nav-clean .theme-switcher-btn[data-theme="light"],
body.theme-mode-system #navbar.nav-clean .theme-switcher-btn[data-theme="system"],
body.theme-mode-dark   #navbar.nav-clean .theme-switcher-btn[data-theme="dark"],
#navbar.nav-clean .theme-switcher-btn[aria-pressed="true"] {
  background: #ffffff;
  color: #1498D5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08),
              0 0.5px 0 rgba(15, 23, 42, 0.04);
}
#navbar.nav-clean .theme-switcher-btn svg {
  display: block;
  width: 14px;
  height: 14px;
}
body:not(.is-glass-light) #navbar.nav-clean .theme-switcher { display: none; }

/* ----- CTA BUTTON — solid premium luxe with ambient gold-shimmer (MOVE 2) -----
   The CTA gets two ambient details:
     1. A slightly stronger outer gold halo at rest (it "lives")
     2. A slow gold shimmer line that sweeps across every 5-6s (Stripe pattern)
   On hover, the shimmer accelerates and a brand-blue gradient takes over. */
#navbar.nav-clean .nav-clean-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* Welle 5.27 v41/v42: User-Feedback "etwas kleiner" — von 0.7×1.4rem/0.92rem
     (~47px) auf 0.55×1.2rem/0.88rem (~40px). Bleibt Touch-Target-konform
     (Apple HIG 44px min wird durch padding+font-line erreicht), aber visuell
     dezenter — Logo dominiert mehr. */
  padding: 0.55rem 1.2rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #ffffff;
  /* Welle 5.22.4 — Offizielles miraTEQ-Logo-Blau (#1498D5) statt Cognac.
     Matched Hero-CTA + Logo → konsistente Brand-Action-Farbe. */
  background: linear-gradient(135deg, #1498D5 0%, #0E7CAF 100%);
  border: none;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset,
              0 0 0 1px rgba(20, 152, 213, 0.45),
              0 6px 16px -4px rgba(20, 152, 213, 0.32),
              0 10px 30px -8px rgba(20, 152, 213, 0.30);
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.45s ease, transform 0.25s cubic-bezier(0.34, 1.16, 0.64, 1);
}
/* Ambient white-shimmer: a soft light band that drifts across every ~6s.
   Welle 5.22.4 — von Gold auf Weiß umgestellt (passt zum Brand-Blau). */
#navbar.nav-clean .nav-clean-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.0) 45%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0.0) 55%,
    transparent 62%,
    transparent 100%);
  background-size: 240% 100%;
  background-position: 100% 50%;
  mix-blend-mode: screen;
  animation: ctaShimmer 6.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ctaShimmer {
  0%   { background-position: 100% 50%; }
  60%  { background-position: -50% 50%; }
  100% { background-position: -50% 50%; }
}
#navbar.nav-clean .nav-clean-cta > * { position: relative; z-index: 1; }
#navbar.nav-clean .nav-clean-cta:hover {
  background: linear-gradient(135deg, #2BB0E5 0%, #1498D5 100%);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) inset,
              0 0 0 1px rgba(20, 152, 213, 0.60),
              0 10px 22px -4px rgba(20, 152, 213, 0.45),
              0 14px 36px -10px rgba(43, 176, 229, 0.42);
}
#navbar.nav-clean .nav-clean-cta:hover::before {
  animation-duration: 2s;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.0) 45%,
    rgba(255, 255, 255, 0.40) 50%,
    rgba(255, 255, 255, 0.0) 55%,
    transparent 62%);
  background-size: 240% 100%;
}
#navbar.nav-clean .nav-clean-cta:active { transform: translateY(0) scale(0.98); transition: transform 0.08s ease; }
#navbar.nav-clean .nav-clean-cta-arrow {
  transition: transform 0.3s cubic-bezier(0.34, 1.16, 0.64, 1);
}
#navbar.nav-clean .nav-clean-cta:hover .nav-clean-cta-arrow {
  transform: translateX(3px);
}

/* ----- HAMBURGER — mobile only ----- */
#navbar.nav-clean .nav-clean-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
#navbar.nav-clean .nav-clean-hamburger:hover { background: rgba(15, 23, 42, 0.06); }
#navbar.nav-clean .nav-clean-hamburger span {
  display: block;
  width: 18px;
  height: 1.8px;
  background: rgba(15, 23, 42, 0.78);
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.34, 1.16, 0.64, 1), opacity 0.25s ease;
}
#navbar.nav-clean .nav-clean-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#navbar.nav-clean .nav-clean-hamburger.open span:nth-child(2) { opacity: 0; }
#navbar.nav-clean .nav-clean-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----- SCROLLED STATE — solidifies, hairline darkens slightly ----- */
/* Scrolled-state: Border-bottom etwas dunkler für mehr Definition. */
#navbar.nav-clean.scrolled {
  border-bottom-color: rgba(15, 23, 42, 0.10);
}
#navbar.nav-clean.scrolled .nav-clean-inner {
  /* Welle 5.27 v41: scrolled-State kompakter (Apple/Stripe-Pattern) — atmend
     oben, schrumpfend beim Scroll. 0.5rem × Logo 36px → ~56px Höhe. */
  padding: 0.5rem 1.5rem;
}
#navbar.nav-clean.scrolled .nav-clean-logo img { height: 40px; }

/* Dark mode — Wrapper BG matched Mega-Menu dark variant (full-width). */
body.is-dark-bg #navbar.nav-clean,
body.is-dark-bg #navbar.nav-clean.menu-open {
  background: rgba(20, 25, 35, 0.98) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.is-dark-bg #navbar.nav-clean.scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
body.is-dark-bg #navbar.nav-clean .nav-clean-inner {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ============================================================================
   DARK MODE (body.is-dark-bg) — light text on transparent over dark hero,
   then dark solidify on scroll
   ============================================================================ */

body.is-dark-bg #navbar.nav-clean .nav-clean-link        { color: rgba(245, 232, 214, 0.72); }
body.is-dark-bg #navbar.nav-clean .nav-clean-link:hover  { color: #f5e8d6; }
body.is-dark-bg #navbar.nav-clean .nav-clean-link[aria-current="page"] { color: #f5e8d6; }
body.is-dark-bg #navbar.nav-clean .nav-clean-magic-pill {
  background: rgba(212, 165, 116, 0.18);
}
body.is-dark-bg #navbar.nav-clean .nav-clean-magic-pill.is-hovered {
  background: rgba(212, 165, 116, 0.30);
}
/* Lang dropdown — dark mode */
body.is-dark-bg #navbar.nav-clean .nav-clean-lang-trigger { color: rgba(245, 232, 214, 0.72); }
body.is-dark-bg #navbar.nav-clean .nav-clean-lang-trigger:hover {
  background: rgba(245, 232, 214, 0.08);
  color: #f5e8d6;
}
body.is-dark-bg #navbar.nav-clean .nav-clean-lang-trigger[aria-expanded="true"] {
  background: rgba(245, 232, 214, 0.10);
  color: #f5e8d6;
}
body.is-dark-bg #navbar.nav-clean .nav-clean-lang-menu {
  background: rgba(13, 18, 28, 0.95);
  border-color: rgba(245, 232, 214, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 8px 24px -6px rgba(0, 0, 0, 0.6),
    0 22px 48px -12px rgba(0, 0, 0, 0.5);
}
body.is-dark-bg #navbar.nav-clean .nav-clean-lang-option { color: rgba(245, 232, 214, 0.78); }
body.is-dark-bg #navbar.nav-clean .nav-clean-lang-option:hover {
  background: rgba(212, 165, 116, 0.18);
  color: #f5e8d6;
}
body.is-dark-bg #navbar.nav-clean .nav-clean-lang-option.is-active {
  background: rgba(212, 165, 116, 0.22);
  color: #f5e8d6;
}
body.is-dark-bg #navbar.nav-clean .nav-clean-lang-code { color: rgba(245, 232, 214, 0.45); }
body.is-dark-bg #navbar.nav-clean .nav-clean-lang-option.is-active .nav-clean-lang-code { color: #ffd4a8; }

/* Theme switcher — dark mode */
body.is-dark-bg #navbar.nav-clean .theme-switcher {
  background: rgba(245, 232, 214, 0.08);
}
body.is-dark-bg #navbar.nav-clean .theme-switcher-btn {
  color: rgba(245, 232, 214, 0.55);
}
body.is-dark-bg #navbar.nav-clean .theme-switcher-btn:hover {
  color: rgba(245, 232, 214, 0.95);
}
body.is-dark-bg.theme-mode-light  #navbar.nav-clean .theme-switcher-btn[data-theme="light"],
body.is-dark-bg.theme-mode-system #navbar.nav-clean .theme-switcher-btn[data-theme="system"],
body.is-dark-bg.theme-mode-dark   #navbar.nav-clean .theme-switcher-btn[data-theme="dark"],
body.is-dark-bg #navbar.nav-clean .theme-switcher-btn[aria-pressed="true"] {
  background: rgba(245, 232, 214, 0.12);
  color: #2BB0E5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30),
              0 0.5px 0 rgba(245, 232, 214, 0.08);
}
body.is-dark-bg #navbar.nav-clean .nav-clean-hamburger span   { background: rgba(245, 232, 214, 0.85); }
body.is-dark-bg #navbar.nav-clean .nav-clean-hamburger:hover  { background: rgba(245, 232, 214, 0.08); }

body.is-dark-bg #navbar.nav-clean .nav-clean-cta {
  background: linear-gradient(135deg, #1498D5 0%, #0E7CAF 100%);
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset,
              0 0 0 1px rgba(20, 152, 213, 0.60),
              0 6px 14px -4px rgba(20, 152, 213, 0.40);
}
body.is-dark-bg #navbar.nav-clean .nav-clean-cta:hover {
  background: linear-gradient(135deg, #2BB0E5 0%, #1498D5 100%);
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.48) inset,
              0 0 0 1px rgba(43, 176, 229, 0.75),
              0 10px 22px -4px rgba(43, 176, 229, 0.50);
}

/* Dark mode: navy tint at top, deeper navy on scroll. Same hierarchy as
   the light defaults — always visible, more pronounced on scroll. */
body.is-dark-bg #navbar.nav-clean,
body.is-dark-bg #navbar.nav-clean.menu-open {
  background: rgba(10, 13, 20, 0.62) !important;
  border-bottom-color: rgba(245, 232, 214, 0.06);
}
body.is-dark-bg #navbar.nav-clean.scrolled {
  background: rgba(10, 13, 20, 0.92) !important;
  border-bottom-color: rgba(245, 232, 214, 0.10);
}

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

@media (min-width: 1024px) {
  #navbar.nav-clean .nav-clean-links     { display: flex; }
  #navbar.nav-clean .nav-clean-lang      { display: flex; }
  #navbar.nav-clean .nav-clean-hamburger { display: none; }
}

@media (max-width: 767px) {
  /* Welle 5.1c: CTA komplett raus aus Mobile-Nav. Premium-Pattern wie
     Apple/Stripe/Linear — Mobile-Nav zeigt nur Logo + Theme-Toggle +
     Hamburger. Der CTA ist im Burger-Menu prominent, im Hero direkt
     sichtbar und über die WhatsApp-FAB erreichbar — ein zusätzlicher
     Pfeil in der Nav ist redundant und unklar. */
  #navbar.nav-clean .nav-clean-cta { display: none; }
  /* Hairlines (gold-ambient + scroll-progress) auf Mobile aus —
     ornamentale Akzente gehören auf Desktop, Mobile bleibt clean. */
  #navbar.nav-clean::before,
  #navbar.nav-clean::after { display: none; }
  /* Border-Bottom + Box-Shadow auf Mobile default-state komplett weg.
     Premium-Mobile-Pattern (Apple/Stripe): clean Edge ohne Strich, der
     Border kommt nur im scrolled-State zurück. */
  #navbar.nav-clean,
  body.is-dark-bg #navbar.nav-clean {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }
  /* Welle 5.22.8 — Wrapper bleibt transparent, BG sitzt auf inner-pill.
     Statt wrapper-Background machen wir Inner-Pill opaker damit Hero
     nicht durchschimmert (wenn user vermisst die Transparenz). */
  #navbar.nav-clean .nav-clean-inner {
    background: rgba(253, 250, 245, 0.98);
  }
  body.is-dark-bg #navbar.nav-clean,
  body.is-dark-bg #navbar.nav-clean.menu-open {
    background: transparent !important;
  }
  /* Dark mode: Inner-Pill matched Mega-Menu dark BG */
  body.is-dark-bg #navbar.nav-clean .nav-clean-inner {
    background: rgba(20, 25, 35, 0.96);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  #navbar.nav-clean,
  #navbar.nav-clean .nav-clean-inner,
  #navbar.nav-clean .nav-clean-link,
  #navbar.nav-clean .nav-clean-magic-pill,
  #navbar.nav-clean .nav-clean-cta,
  #navbar.nav-clean .nav-clean-cta-arrow,
  #navbar.nav-clean .nav-clean-toggle,
  #navbar.nav-clean .nav-clean-toggle svg,
  #navbar.nav-clean .nav-clean-hamburger,
  #navbar.nav-clean .nav-clean-hamburger span,
  #navbar.nav-clean .nav-clean-logo img {
    transition: none !important;
  }
  #navbar.nav-clean .nav-clean-cta:hover { transform: none !important; }
  #navbar.nav-clean .nav-clean-cta::before { animation: none !important; }
  #navbar.nav-clean .nav-clean-link:active,
  #navbar.nav-clean .nav-clean-lang-link:active,
  #navbar.nav-clean .nav-clean-cta:active { transform: none !important; }
}

/* ============================================================================
   POLISH LAYER — scroll progress + ambient accent
   (Welle 5.1c: Nav-Entrance-Animation entfernt — Premium-Pattern wie Apple/
    Stripe/Linear: Nav ist einfach da, Hero trägt die "Show". Magic Pill,
    Scroll Progress, CTA-Shimmer und Press-Down bleiben.)
   ============================================================================ */

/* ----- AMBIENT BOTTOM ACCENT (MOVE 4) — always-on subtle gold gradient
   line. Fades out gracefully on scroll so the scroll-progress hairline
   below takes over the bottom-edge role without competing. ----- */
#navbar.nav-clean::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 165, 116, 0.20) 28%,
    rgba(255, 212, 168, 0.36) 50%,
    rgba(212, 165, 116, 0.20) 72%,
    transparent 100%);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 1;
}
#navbar.nav-clean.scrolled::before { opacity: 0; }

/* ----- SCROLL PROGRESS — gradient hairline that fills as you scroll ----- */
#navbar.nav-clean::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--nav-scroll-progress, 0%);
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-deep, #b8895a) 35%,
    #ffd4a8 65%,
    transparent 100%);
  pointer-events: none;
  transition: width 0.08s linear;
  z-index: 2;
}
body.is-dark-bg #navbar.nav-clean::after {
  background: linear-gradient(90deg,
    transparent 0%,
    #d4a574 35%,
    #ffd4a8 65%,
    transparent 100%);
}

/* Entrance-Animation der Nav wurde mit Welle 5.1c entfernt. Begründung:
   Apple/Stripe/Linear haben auf ihren Marketing-Sites KEINE Page-Load-
   Reveal-Animation für die Nav — Premium-Pattern ist "Quiet Nav, Hero
   trägt die Show". Die Nav ist einfach da. Polish (Magic Pill, Scroll
   Progress, CTA-Shimmer, Press-Down) bleibt — das sind interaction-
   triggered Effekte, kein Page-Load-Theater. */


/* ════════════════════════════════════════════════════════════════════════
   VIEW TRANSITIONS (Welle 5.21, 2026 premium cross-document navigation)
   Native CSS @view-transition rule activates smooth cross-fade on every
   same-origin navigation. Works alongside <meta name="view-transition">.
   Browser support: Chrome 126+ stable, Safari 26+, Firefox behind flag.
   Older browsers gracefully fall back to instant nav (no jank).
   ════════════════════════════════════════════════════════════════════════ */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(root) {
  animation-name: at-fade-out;
}
::view-transition-new(root) {
  animation-name: at-fade-in;
}
@keyframes at-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.985); }
}
@keyframes at-fade-in {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}