/* ═══════════════════════════════════════════════════════════
   avui.io – Homepage  |  style.css
   CI: #6E2654 (primary) · #993371 (accent) · #F4F4F4 (bg)
═══════════════════════════════════════════════════════════ */

/* ── 1. FONTS ── */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Richmond Display';
  src: url('fonts/Richmond-Display-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ── 2. CUSTOM PROPERTIES ── */
:root {
  --primary:   #6E2654;
  --accent:    #993371;
  --gradient:  linear-gradient(135deg, #6E2654 0%, #993371 100%);
  --bg:        #F4F4F4;
  --white:     #FFFFFF;
  --black:     #000000;
  --text:      #1A1A1A;
  --muted:     #666666;
  --border:    #E2E2E2;

  --font:      'Poppins', system-ui, sans-serif;
  --font-deco: 'Richmond Display', Georgia, serif;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.07);
  --shadow-md: 0 4px 20px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(110,38,84,.18);

  --trans: 200ms ease;

  /* Typografie – nur zwei Copy-Größen, alles andere ist Heading/Eyebrow/Deko */
  --fs-body: 1.05rem;  /* 16.8 px – Standard-Copy */
  --fs-meta: 0.9rem;   /* 14.4 px – Labels, Captions, Footer, kleine Beschreibungen */
}

/* ── 3. RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html.nav-open,
body.nav-open {
  overflow: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { appearance: none; -webkit-appearance: none; font-family: inherit; }
textarea { resize: vertical; }

/* ── 4. LAYOUT ── */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   ANIMATIONEN
═══════════════════════════════════════════════════════════ */

/* ── 5. SCROLL REVEAL ──
   Elemente starten unsichtbar.
   JS fügt .is-visible hinzu wenn sie ins Bild kommen.
   Transition ist nur auf .is-visible definiert → kein Flackern beim Laden.
*/
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
/* Gestaffelte Verzögerungen zusätzlich zur Basis-0.1s */
[data-reveal][data-delay="60"].is-visible  { transition-delay: 0.16s; }
[data-reveal][data-delay="100"].is-visible { transition-delay: 0.2s;  }
[data-reveal][data-delay="120"].is-visible { transition-delay: 0.22s; }
[data-reveal][data-delay="180"].is-visible { transition-delay: 0.28s; }
[data-reveal][data-delay="200"].is-visible { transition-delay: 0.3s;  }
[data-reveal][data-delay="240"].is-visible { transition-delay: 0.34s; }
[data-reveal][data-delay="300"].is-visible { transition-delay: 0.4s;  }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-visible {
    opacity: 1; transform: none; transition: none;
  }
}

/* ── 6. HERO EINGANGSANIMATIONEN (CSS, kein JS nötig) ── */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroScale {
  from { opacity: 0; transform: scale(0.96) translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Float-Animationen für die Badges */
@keyframes floatA {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
@keyframes floatC {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* Orb-Puls */
@keyframes orbPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.1); }
}

/* Hero-Text gestaffelt */
.hero-eyebrow  { animation: heroUp 0.5s ease 0.05s both; }
.hero-headline { animation: heroUp 0.5s ease 0.18s both; }
.hero-sub      { animation: heroUp 0.5s ease 0.3s  both; }
.hero-ctas     { animation: heroUp 0.5s ease 0.42s both; }

/* Hero-Bild */
.hero-mockup-img { animation: heroScale 0.6s ease 0.35s both; }

/* Badges: erst rein, dann floaten (endlos) */
.hero-badge--1 { animation: heroUp 0.5s ease 0.55s both, floatA 4s ease-in-out 1.1s infinite; }
.hero-badge--2 { animation: heroUp 0.5s ease 0.68s both, floatB 5s ease-in-out 1.2s infinite; }
.hero-badge--3 { animation: heroUp 0.5s ease 0.8s  both, floatC 4.5s ease-in-out 1.3s infinite; }

/* Orbs */
.hero-orb--1 { animation: orbPulse 7s ease-in-out infinite; }
.hero-orb--2 { animation: orbPulse 9s ease-in-out 2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-headline, .hero-sub, .hero-ctas,
  .hero-mockup-img, .hero-badge--1, .hero-badge--2, .hero-badge--3,
  .hero-orb--1, .hero-orb--2 { animation: none; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT & KOMPONENTEN
═══════════════════════════════════════════════════════════ */

/* ── 7. TYPOGRAFIE ── */
.section-eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
}
.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .75rem;
}
.section-title em {
  font-family: var(--font-deco);
  font-style: italic;
  font-weight: 400;
  font-size: 110%;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  padding: 0.12em 0.3em 0.05em 0.1em;
  margin: -0.12em -0.2em -0.05em -0.1em;
}
.section-desc { font-size: var(--fs-body); color: var(--muted); max-width: 52ch; }
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header .section-desc { margin-inline: auto; }

/* ── 8. BUTTONS ── */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--gradient);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-meta);
  font-weight: 600;
  padding: .85rem 1.75rem;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: box-shadow var(--trans), transform var(--trans);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  text-decoration: none;
}
.cta-button svg { width: 18px; height: 18px; flex-shrink: 0; }
.cta-button:hover { box-shadow: 0 12px 40px rgba(110,38,84,.28); transform: translateY(-1px); }
.cta-button:active { transform: translateY(0); }
.cta-button:disabled { opacity: .6; pointer-events: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text);
  font-weight: 600;
  font-size: var(--fs-meta);
  padding: .85rem 1.5rem;
  border: 2px solid var(--border);
  border-radius: 100px;
  background: var(--white);
  transition: border-color var(--trans), color var(--trans);
  text-decoration: none;
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

.btn-nav {
  display: inline-flex;
  align-items: center;
  background: var(--gradient);
  color: var(--white);
  font-weight: 600;
  font-size: var(--fs-meta);
  padding: .55rem 1.2rem;
  border-radius: 100px;
  transition: box-shadow var(--trans);
  white-space: nowrap;
  text-decoration: none;
}
.btn-nav:hover { box-shadow: var(--shadow-lg); }

/* ── 9. HEADER ── */
.site-header {
  position: fixed;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 100px;
  width: min(1300px, calc(100vw - 2rem));
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.site-header.light {
  background: rgba(255, 255, 255, 0.93);
  border-color: rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}
.header-inner {
  display: flex; align-items: center; gap: 2rem;
  padding-block: .875rem;
  max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem;
  position: relative;
}
.header-logo img { height: 30px; width: auto; display: block; }
.header-logo img.logo-on-dark  { display: block; }
.header-logo img.logo-on-light { display: none; }
.site-header.light .header-logo img.logo-on-dark  { display: none; }
.site-header.light .header-logo img.logo-on-light { display: block; }
.header-nav {
  display: flex; align-items: center; gap: 1.75rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header-nav a { font-size: var(--fs-meta); font-weight: 500; color: rgba(255,255,255,.8); transition: color var(--trans); }
.header-nav a:hover { color: #fff; }
.site-header.light .header-nav a { color: var(--muted); }
.site-header.light .header-nav a:hover { color: var(--primary); }
.header-inner > .btn-nav { margin-left: auto; }
.site-header .nav-toggle span { background: var(--white); }
.site-header.light .nav-toggle span { background: var(--text); }

.nav-toggle {
  display: none;
  flex-direction: column;
  position: relative;
  z-index: 999;
  gap: 5px;
  padding: .5rem;
  margin-left: auto;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform var(--trans), opacity var(--trans);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Fullscreen Mobile Nav Overlay ── */
.mobile-nav {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 9999;
  background: #ffffff;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.mobile-nav.open {
  opacity: 1;
  width: 100vw;
  height: 100vh;
  margin: -18px 0 0 -18px;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}

/* ── Close-Button: sitzt visuell auf der Position des Burger-Icons ── */
.mobile-nav-close {
  position: absolute;
  top: 1.1rem;
  right: 1rem;
  padding: .875rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10001 !important;
  margin-top: 8px;
}
.mobile-nav-close span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--trans), opacity var(--trans);
}
.mobile-nav-close span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-close span:nth-child(2) { opacity: 0; }
.mobile-nav-close span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Items hängen direkt im .mobile-nav (kein <nav>-Wrapper mehr — MENU.md-Vertrag) */
.mobile-nav { gap: 1.5rem; padding: 2rem; }

/* Top-Level-Anker + Anker innerhalb von <summary> teilen sich denselben Look */
.mobile-nav > a:not(.btn-nav),
.mobile-nav > details > summary > a {
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: color var(--trans), opacity .3s ease, transform .3s ease;
}
.mobile-nav > a:not(.btn-nav):hover,
.mobile-nav > details > summary > a:hover { color: var(--primary); }
.mobile-nav.open > a:not(.btn-nav),
.mobile-nav.open > details > summary > a { opacity: 1; transform: translateY(0); }

/* <details>-Akkordeon (vom CMS gerendert: <details><summary><a></a></summary>…</details>) */
.mobile-nav > details { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.mobile-nav > details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.mobile-nav > details > summary::-webkit-details-marker,
.mobile-nav > details > summary::marker { display: none; content: ''; }
.mobile-nav.open > details > summary { opacity: 1; transform: translateY(0); }
.mobile-nav > details > summary::after {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translateY(-.15em);
  transition: transform .2s ease;
}
.mobile-nav > details[open] > summary::after { transform: rotate(-135deg) translateY(-.15em); }

/* Submenu-Items (direkte <a>-Kinder im <details>) */
.mobile-nav > details > a:not(.btn-nav) {
  font-size: clamp(1.2rem, 4.8vw, 2rem);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
.mobile-nav > details > a:not(.btn-nav):hover { color: var(--primary); }

.mobile-nav .btn-nav {
  width: 100%;
  max-width: 480px;
  justify-content: center;
  padding: 1rem;
  font-size: var(--fs-body);
  border-radius: 9999px;
  background: #822C61;
  border: none;
  color: #ffffff;
  opacity: 0;
  transform: translateY(8px);
  transition: box-shadow var(--trans), opacity .3s ease .30s, transform .3s ease .30s;
}
.mobile-nav .btn-nav:hover { box-shadow: var(--shadow-lg); }
.mobile-nav.open .btn-nav { opacity: 1; transform: translateY(0); }

/* ── 10. HERO ── */
.hero-section {
  background: #0e0e0e;
  padding: 0;
  height: 90vh;
  min-height: 600px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

/* Hintergrund-Orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}
.hero-orb--1 {
  width: 700px; height: 700px;
  top: -200px; right: -100px;
  background: radial-gradient(circle, rgba(153,51,113,.28) 0%, transparent 70%);
}
.hero-orb--2 {
  width: 450px; height: 450px;
  bottom: -180px; left: -80px;
  background: radial-gradient(circle, rgba(110,38,84,.2) 0%, transparent 70%);
}

/* Dark hero – text colour overrides */
.hero-section .hero-inner { padding-top: 80px; }
.hero-section .hero-eyebrow { color: rgba(220, 150, 190, 1); }
.hero-section .hero-headline { color: var(--white); }
.hero-section .hero-headline em { background: linear-gradient(135deg, #d46aab 0%, #f0a0cc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-section .hero-sub { color: rgba(255, 255, 255, 0.65); }
.hero-section .btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--white);
}
.hero-section .btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.65);
  color: var(--white);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-eyebrow {
  display: inline-block;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}
.hero-headline {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700; line-height: 1.15; margin-bottom: 1.25rem;
}
.hero-headline em {
  font-family: var(--font-deco); font-style: italic; font-weight: 400; font-size: 110%;
  background: var(--gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub { font-size: var(--fs-body); color: var(--muted); line-height: 1.7; max-width: 48ch; margin-bottom: 2rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ── Hero Visual: Mockup-Bild + schwebende Badges ── */
.hero-visual { display: flex; justify-content: center; align-items: center; }

.hero-mockup-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
}
.hero-mockup-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  /* leichter Schatten damit das Bild vom Hintergrund abhebt */
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.14));
}

/* Floating Badges – absolut über dem Bild */
.hero-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: .65rem 1rem;
  font-size: var(--fs-meta);
  font-weight: 600;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  /* z-index damit Badges über dem Bild liegen */
  z-index: 2;
}
.hero-badge svg { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; }

/* Positionierung der 3 Badges rund ums Bild */
.hero-badge--1 { top: 12%;  left: -28px; }
.hero-badge--2 { top: 52%;  right: -32px; }
.hero-badge--3 { bottom: 8%; left: 16px; }

/* ── 10b. PAGE HERO (Unsere Vision, Referenzen, …) ── */
.hero-section.page-hero {
  height: auto;
  min-height: 60vh;
  padding: 7rem 0 7.5rem;
  align-items: center;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  padding-top: 60px;
}
.page-hero-inner .hero-sub { margin-inline: auto; }

/* ── 11. PROBLEM / LÖSUNG ── */
.problem-section {
  padding: 7.5rem 0;
  background:
    linear-gradient(rgba(20, 8, 16, 0.35), rgba(20, 8, 16, 0.35)),
    url('assets/images/agentur-falle-bg-v1.webp') center/cover no-repeat;
}
.problem-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.problem-text { color: var(--white); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.problem-text .section-eyebrow { color: rgba(255, 255, 255, 0.85); }
.problem-text .section-title { color: var(--white); margin-bottom: 1rem; }
.problem-text .section-title em {
  background: linear-gradient(135deg, #d46aab 0%, #f0a0cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.problem-text p { color: rgba(255, 255, 255, 0.95); line-height: 1.75; margin-bottom: 1rem; }
.problem-text p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .problem-section {
    background:
      linear-gradient(rgba(20, 8, 16, 0.45), rgba(20, 8, 16, 0.45)),
      url('assets/images/mobile/agentur-falle-bg-v1.webp') center/cover no-repeat;
  }
}

.problem-cards { display: flex; flex-direction: column; gap: 1rem; }
.problem-card { background: var(--white); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.problem-card-label { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .9rem; }
.problem-card--bad .problem-card-label { color: #999; }
.problem-card--good .problem-card-label { color: var(--accent); }
.problem-card ul { display: flex; flex-direction: column; gap: .5rem; }
.problem-card li { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-meta); }
.icon-x { color: #ccc; font-style: normal; }
.icon-check { color: var(--primary); font-style: normal; }
.problem-card--good { border: 1.5px solid rgba(110,38,84,.2); }

/* ── 12. LEISTUNGEN ── */
.leistungen-section { padding: 7.5rem 0; background: var(--white); }
.leistungen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.leistung-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; position: relative;
  transition: box-shadow var(--trans), transform var(--trans);
}
.leistung-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.leistung-card--featured { background: var(--white); border-color: rgba(110,38,84,.25); box-shadow: var(--shadow-md); }

.leistung-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gradient); color: var(--white);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .9rem; border-radius: 100px; white-space: nowrap;
}
.leistung-card-header { display: flex; align-items: flex-start; gap: 1rem; }
.leistung-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: rgba(110,38,84,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.leistung-icon svg { width: 22px; height: 22px; color: var(--primary); }
.leistung-name { font-size: var(--fs-body); font-weight: 700; margin-bottom: .2rem; }
.leistung-price { font-size: var(--fs-body); font-weight: 600; color: var(--primary); }
.leistung-note { font-size: var(--fs-meta); font-weight: 400; color: var(--muted); }
.leistung-desc { font-size: var(--fs-meta); color: var(--muted); line-height: 1.65; flex: 1; }

.leistung-features { display: flex; flex-direction: column; gap: .45rem; }
.leistung-features li { font-size: var(--fs-meta); display: flex; align-items: center; gap: .5rem; }
.leistung-features li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gradient); flex-shrink: 0;
}
.btn-leistung {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-meta); font-weight: 600; color: var(--primary);
  transition: gap var(--trans), color var(--trans); text-decoration: none;
}
.btn-leistung svg { width: 16px; height: 16px; }
.btn-leistung:hover { gap: .75rem; color: var(--accent); }

.leistungen-cta {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.leistungen-cta-text {
  font-size: var(--fs-body);
  color: var(--muted);
  max-width: 42ch;
}

/* ── 12b. UNSER PRODUKT ── */
.produkt-section { padding: 7.5rem 0; background: var(--bg); }
.produkt-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.produkt-text .section-title { margin-bottom: .75rem; }
.produkt-lead {
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 2rem;
  max-width: 48ch;
}
.produkt-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  list-style: none;
  padding-top: .5rem;
}
.produkt-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.produkt-item-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: rgba(110,38,84,.08);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.produkt-item-icon svg { width: 20px; height: 20px; }
.produkt-item strong {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 700;
  margin-bottom: .2rem;
}
.produkt-item p {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ── 13. VORTEILE ── */
.vorteile-section { padding: 7.5rem 0; background: var(--white); }
.vorteile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.vorteil-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--trans), transform var(--trans);
}
.vorteil-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.vorteil-num {
  position: absolute;
  top: 1rem; right: 1.25rem;
  font-size: clamp(4.5rem, 7vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.1;
  user-select: none;
  pointer-events: none;
}
.vorteil-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(110,38,84,.08);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.vorteil-icon svg { width: 24px; height: 24px; }
.vorteil-title { font-size: var(--fs-body); font-weight: 700; margin-bottom: .65rem; line-height: 1.3; }
.vorteil-desc { font-size: var(--fs-meta); color: var(--muted); line-height: 1.7; }

/* ── 14. ABLAUF (Horizontal Timeline) ── */
.ablauf-section { padding: 7.5rem 0; background: var(--bg); }
.ablauf-section .section-header { margin-bottom: 2.5rem; }

.ablauf-track-outer {
  position: relative;
  margin-bottom: 1.5rem;
}
.ablauf-track-outer::before,
.ablauf-track-outer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--trans);
}
.ablauf-track-outer::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.ablauf-track-outer::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.ablauf-track-outer.at-start::before { opacity: 0; }
.ablauf-track-outer.at-end::after { opacity: 0; }

.ablauf-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .5rem .25rem 1.5rem;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.ablauf-track::-webkit-scrollbar { display: none; }
.ablauf-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.ablauf-card {
  flex: 0 0 320px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: box-shadow var(--trans);
}
.ablauf-card:hover { box-shadow: var(--shadow-md); }

.ablauf-step {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gradient);
  color: var(--white);
  font-size: var(--fs-meta);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: .25rem;
}
.ablauf-title { font-size: var(--fs-body); font-weight: 700; line-height: 1.3; }
.ablauf-desc { font-size: var(--fs-meta); color: var(--muted); line-height: 1.65; flex: 1; }
.ablauf-meta { font-size: .78rem; font-weight: 600; color: var(--accent); letter-spacing: .04em; }

.ablauf-controls {
  display: flex;
  gap: .75rem;
  justify-content: center;
  padding-top: .25rem;
}
.ablauf-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--trans), color var(--trans), box-shadow var(--trans);
}
.ablauf-btn svg { width: 20px; height: 20px; }
.ablauf-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow-sm); }
.ablauf-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── 14. WARUM / DREIECK ── */
.warum-section {
  padding: 7.5rem 0;
  background: #0e0e0e;
  color: rgba(255,255,255,.78);
  position: relative;
  overflow: hidden;
}
.warum-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  z-index: 0;
}
.warum-orb--1 {
  width: 700px; height: 700px;
  top: -220px; right: -120px;
  background: radial-gradient(circle, rgba(153,51,113,.28) 0%, transparent 70%);
}
.warum-orb--2 {
  width: 500px; height: 500px;
  bottom: -200px; left: -100px;
  background: radial-gradient(circle, rgba(110,38,84,.22) 0%, transparent 70%);
}
.warum-section > .container { position: relative; z-index: 1; }
.warum-section .section-eyebrow { color: rgba(220, 150, 190, 1); }
.warum-section .section-title { color: var(--white); }
.warum-section .section-title em {
  background: linear-gradient(135deg, #d46aab 0%, #f0a0cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.warum-section .section-desc { color: rgba(255,255,255,.7); }
.warum-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; }

/* Desktop: Text links, Grafik rechts */
.dreieck-visual { display: flex; justify-content: center; align-items: center; order: 2; }
.warum-punkte { order: 1; }
.dreieck-img {
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 32px rgba(153,51,113,.25));
}

.warum-punkte { display: flex; flex-direction: column; gap: 2rem; }
.warum-punkt { display: flex; gap: 1.25rem; align-items: flex-start; }
.warum-punkt-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: rgba(153,51,113,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.warum-punkt-icon svg { width: 22px; height: 22px; color: #d46aab; }
.warum-punkt h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: .35rem; color: var(--white); }
.warum-punkt p { font-size: var(--fs-meta); color: rgba(255,255,255,.7); line-height: 1.65; }

/* ── 15. KONTAKT ── */
.kontakt-section { padding: 7.5rem 0; background: var(--white); }
.kontakt-inner { max-width: 720px; }
.kontakt-header { margin-bottom: 2.5rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group--full { grid-column: 1 / -1; }
.form-group label { font-size: var(--fs-meta); font-weight: 600; }
.required { color: var(--primary); font-weight: 700; }
.optional { font-weight: 400; color: var(--muted); font-size: var(--fs-meta); }

.form-group input, .form-group textarea {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: .75rem 1rem; font-size: var(--fs-meta); color: var(--text);
  transition: border-color var(--trans), box-shadow var(--trans); width: 100%;
}
.form-group input:focus, .form-group textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(110,38,84,.12);
}
.form-group input.invalid, .form-group textarea.invalid { border-color: #c0392b; }
.field-error { font-size: var(--fs-meta); color: #c0392b; min-height: 1.2em; }

.checkbox-label {
  display: flex; align-items: flex-start; gap: .75rem;
  cursor: pointer; font-size: var(--fs-meta); color: var(--muted); line-height: 1.5;
}
.checkbox-label a { color: var(--primary); text-decoration: underline; }
.addon-checkbox-wrap { position: relative; flex-shrink: 0; }
.addon-checkbox-wrap input[type="checkbox"] {
  width: 20px; height: 20px; opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; z-index: 1;
}
.custom-checkbox {
  display: block; width: 20px; height: 20px;
  border: 1.5px solid var(--border); border-radius: 4px; background: var(--bg);
  transition: border-color var(--trans), background var(--trans); position: relative;
}
.addon-checkbox-wrap input[type="checkbox"]:checked + .custom-checkbox {
  background: var(--gradient); border-color: var(--primary);
}
.addon-checkbox-wrap input[type="checkbox"]:checked + .custom-checkbox::after {
  content: ''; position: absolute; left: 5px; top: 2px; width: 6px; height: 10px;
  border: 2px solid var(--white); border-top: none; border-left: none; transform: rotate(45deg);
}

.form-submit { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.submit-note { font-size: var(--fs-meta); color: var(--muted); }

.spinner { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.success-banner {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(110,38,84,.06); border: 1.5px solid rgba(110,38,84,.2);
  border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin-bottom: 2rem;
  font-size: var(--fs-meta);
}
.success-banner svg { width: 28px; height: 28px; color: var(--primary); flex-shrink: 0; }
.success-banner strong { color: var(--primary); }

/* ── 17. FOOTER ── */
.site-footer { background: var(--text); color: rgba(255,255,255,.8); padding: 3.5rem 0 2rem; }
.footer-top {
  display: grid; grid-template-columns: auto 1fr; gap: 3rem;
  margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.footer-logo { height: 28px; width: auto; }
.footer-tagline { font-size: var(--fs-meta); color: rgba(255,255,255,.5); }
.footer-email { font-size: var(--fs-meta); color: rgba(255,255,255,.7); transition: color var(--trans); }
.footer-email:hover { color: var(--white); }
.footer-links { display: flex; gap: 3rem; justify-content: flex-end; }
.footer-col { display: flex; flex-direction: column; gap: .5rem; }
.footer-col-title { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: .25rem; }
.footer-col a { font-size: var(--fs-meta); color: rgba(255,255,255,.65); transition: color var(--trans); }
.footer-col a:hover { color: var(--white); }
.footer-bottom { text-align: center; }
.footer-copy { font-size: var(--fs-meta); color: rgba(255,255,255,.35); }

/* ── 18. RESPONSIVE ── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: flex; margin-top: 2rem; justify-content: center; }
  .hero-mockup-wrap { max-width: 520px; }
  .problem-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .warum-grid { grid-template-columns: 1fr; }
  .dreieck-visual { order: unset; }
  .warum-punkte { order: unset; }
  .dreieck-img { max-width: 340px; }
  .produkt-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 860px) {
  .problem-section,
  .leistungen-section,
  .warum-section,
  .vorteile-section,
  .produkt-section,
  .ablauf-section,
  .kontakt-section,
  .faq-section { padding: 3.5rem 0; }
  .vorteile-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

@media (max-width: 640px) {
  .header-inner { padding-inline: 1rem; gap: 1rem; }
  .hero-badge { display: none; }
  .hero-mockup-wrap { max-width: 100%; }
  .hero-headline { font-size: 1.9rem; }
  .section-title { font-size: clamp(1.6rem, 6vw, 2rem); }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .dreieck-img { max-width: 280px; }
  .ablauf-card { flex: 0 0 280px; }
  .ablauf-track { padding-inline: 1.5rem; }
  .problem-section,
  .leistungen-section,
  .warum-section,
  .vorteile-section,
  .produkt-section,
  .ablauf-section,
  .kontakt-section,
  .faq-section { padding: 3rem 0; }
}

/* ── 19. KONTAKT CTA BLOCK (index.html) ── */
.kontakt-section { padding: 7.5rem 0; background: var(--white); }
.kontakt-cta-block {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.kontakt-cta-text {
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: 1.7;
  max-width: 48ch;
}
.kontakt-cta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  margin-top: .25rem;
}
.kontakt-cta-meta span {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--muted);
}
.kontakt-cta-meta svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ── 20. FAQ ── */
.faq-section { padding: 7.5rem 0; background: var(--bg); }
.faq-list {
  max-width: 780px;
  margin-inline: auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { display: none; }

.faq-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--primary);
  transition: transform 0.3s ease;
}
details[open] > .faq-question .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding-bottom: 1.25rem;
  padding-right: 2rem;
}
.faq-answer p {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.75;
}

/* ── 21. KONTAKT-SEITE (kontakt.html) ── */
.kontakt-page-section { padding: 7.5rem 0; background: var(--bg); }
.kontakt-page-inner { max-width: 1080px; }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 2rem;
  transition: color var(--trans);
  text-decoration: none;
}
.btn-back svg { width: 18px; height: 18px; }
.btn-back:hover { color: var(--primary); }

.kontakt-page-header { margin-bottom: 2.5rem; }

/* Zwei-Spalten-Layout */
.kontakt-two-col {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 2rem;
  align-items: start;
}

/* Info-Karten (linke Spalte) */
.kontakt-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.kontakt-info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  transition: box-shadow var(--trans);
}
.kontakt-info-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }

.kontakt-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kontakt-card-icon svg { width: 22px; height: 22px; }
.kontakt-info-card--whatsapp .kontakt-card-icon { background: rgba(37,211,102,.12); color: #25D366; }
.kontakt-info-card--email .kontakt-card-icon { background: rgba(110,38,84,.1); color: var(--primary); }
.kontakt-info-card--hours .kontakt-card-icon { background: rgba(110,38,84,.1); color: var(--primary); }

.kontakt-card-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .35rem;
}
.kontakt-card-value {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
}
a.kontakt-card-value:hover { color: var(--primary); }
.kontakt-card-sub {
  display: block;
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-top: .25rem;
}

/* Formular-Karte (rechte Spalte) */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.form-card-title {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.75rem;
}

/* Danke-Nachricht (nach Formular-Submit) */
.danke-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  gap: 1.25rem;
  min-height: 320px; /* verhindert dass form-card kollabiert */
}
.danke-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(130,44,97,.1);
  color: #822C61;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.danke-icon svg { width: 26px; height: 26px; color: #822C61; }
.danke-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}
.danke-text {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.7;
  max-width: 36ch;
}

/* ── 22. LEGAL-SEITEN (impressum.html, datenschutz.html) ── */
.legal-section { padding: 7rem 0 7.5rem; background: var(--bg); }
.legal-inner { max-width: 720px; }
.legal-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 2.5rem;
  color: var(--text);
}
.legal-content h2 {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 2rem 0 .6rem;
  color: var(--text);
}
.legal-content h3 {
  font-size: var(--fs-body);
  font-weight: 600;
  margin: 1.25rem 0 .4rem;
  color: var(--text);
}
.legal-content p {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: .75rem;
}
.legal-content a { color: var(--primary); text-decoration: underline; }
.legal-stand { font-size: var(--fs-meta); color: var(--border); margin-top: 2rem; }

/* ── RESPONSIVE ERGÄNZUNGEN ── */
@media (max-width: 860px) {
  .kontakt-two-col { grid-template-columns: 1fr; }
  .form-card { padding: 1.75rem; }
}
@media (max-width: 640px) {
  .kontakt-cta-meta { flex-direction: column; align-items: center; }
  .faq-question { font-size: var(--fs-meta); }
}
@media (max-width: 860px) {
  .leistungen-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; flex-wrap: wrap; gap: 2rem; }
}
@media (max-width: 1024px) {
  .header-nav { display: none; }
  .header-inner > .btn-nav { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 640px) {
  .hero-section { height: auto; min-height: 100svh; padding: 7rem 0 3rem; align-items: flex-start; }
  .hero-section .hero-inner { padding-top: 0; }

  .form-grid { grid-template-columns: 1fr; }
  .section-header { text-align: left; }
  .section-header .section-desc { margin-inline: 0; }
  .footer-links { flex-direction: column; gap: 1.5rem; }

  .cookie-banner-inner { flex-direction: column; gap: 1.25rem; }
  .cookie-banner-buttons { flex-direction: column; width: 100%; }
  .cookie-banner-buttons .btn-cookie-accept,
  .cookie-banner-buttons .btn-cookie-decline { width: 100%; justify-content: center; }
}

/* ── COOKIE BANNER ── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(0,0,0,.08);
  transform: translateY(100%);
  transition: transform .4s ease, opacity .4s ease;
  opacity: 0;
}
.cookie-banner.visible {
  transform: translateY(0);
  opacity: 1;
}
.cookie-banner.hiding {
  transform: translateY(100%);
  opacity: 0;
}
.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 0;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.cookie-banner-text {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.6;
  max-width: 65ch;
}
.cookie-banner-text a { color: var(--primary); text-decoration: underline; }
.cookie-banner-buttons {
  display: flex;
  gap: .75rem;
  flex-shrink: 0;
  align-items: center;
}
.btn-cookie-accept {
  display: inline-flex;
  align-items: center;
  background: var(--gradient);
  color: var(--white);
  font-weight: 600;
  font-size: var(--fs-meta);
  padding: .65rem 1.4rem;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow var(--trans);
}
.btn-cookie-accept:hover { box-shadow: var(--shadow-lg); }
.btn-cookie-decline {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-meta);
  padding: .65rem 1.4rem;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--trans), color var(--trans);
}
.btn-cookie-decline:hover { border-color: var(--primary); color: var(--primary); }

/* ═══════════════════════════════════════════════════════════
   25. UNSERE-VISION-SEITE
═══════════════════════════════════════════════════════════ */

/* ── Hero: Split-Layout (Text links, Bild rechts) ── */
.vision-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
  max-width: none;
  text-align: left;
  margin-inline: 0;
}
.vision-hero-text {
  max-width: 540px;
}
.vision-hero-inner .hero-sub { margin-inline: 0; }
.vision-hero .hero-headline { font-size: clamp(1.85rem, 4.4vw, 3rem); }
.vision-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vision-hero-visual img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}

/* ── Pain Points: Split-Layout — Bild links bündig zur nächsten Section ── */
.vision-pain-section {
  padding-top: 7.5rem;
  padding-bottom: 0;
  background: var(--white);
}
.vision-pain-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4rem;
  align-items: center;
}
.vision-pain-visual {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
}
.vision-pain-visual img {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
}
.vision-pain-text {
  max-width: 520px;
  padding-bottom: 7.5rem;
}
.vision-pain-text .section-desc { margin-inline: 0; }
.vision-pain-list {
  list-style: none;
  margin-top: 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.vision-pain-list li {
  font-size: var(--fs-meta);
  color: var(--text);
  line-height: 1.5;
  padding-left: 1.5rem;
  position: relative;
}
.vision-pain-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 2px;
  background: var(--gradient);
  border-radius: 2px;
}

/* ── Belief & Promise: dunkel mit Glows ── */
.vision-belief-section,
.vision-promise-section {
  padding: 7.5rem 0;
  background: #0e0e0e;
  color: rgba(255,255,255,.78);
  position: relative;
  overflow: hidden;
}
.vision-belief-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  z-index: 0;
}
.vision-belief-orb--1 {
  width: 700px; height: 700px;
  top: -220px; right: -120px;
  background: radial-gradient(circle, rgba(153,51,113,.28) 0%, transparent 70%);
}
.vision-belief-orb--2 {
  width: 500px; height: 500px;
  bottom: -200px; left: -100px;
  background: radial-gradient(circle, rgba(110,38,84,.22) 0%, transparent 70%);
}
.vision-belief-section > .container,
.vision-promise-section > .container { position: relative; z-index: 1; }

.vision-belief-section .section-eyebrow { color: rgba(220,150,190,1); }
.vision-belief-section .section-title { color: var(--white); }
.vision-belief-section .section-title em {
  background: linear-gradient(135deg, #d46aab 0%, #f0a0cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Belief: Split-Layout — Text links, 2x2-Tiles rechts */
.vision-belief-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: center;
}
.vision-belief-intro { text-align: left; }
.vision-belief-intro .section-title { margin-bottom: 1rem; }
.vision-belief-intro-text {
  font-size: var(--fs-body);
  color: rgba(255,255,255,.7);
  line-height: 1.75;
  max-width: 44ch;
}
.vision-belief-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.vision-belief-tile {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color var(--trans), background var(--trans), transform var(--trans);
}
.vision-belief-tile:hover {
  border-color: rgba(220,150,190,.3);
  background: rgba(255,255,255,.06);
  transform: translateY(-2px);
}
.vision-belief-num {
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #d46aab 0%, #f0a0cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-feature-settings: 'tnum';
}
.vision-belief-tile p {
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  margin: 0;
}

/* ── Werte: 6 Cards in 3×2, graue Section, weiße Cards ── */
.vision-werte-section { padding: 7.5rem 0; background: var(--bg); }
.vision-werte-grid { grid-template-columns: repeat(3, 1fr); }
.vision-werte-section .vorteil-card { background: var(--white); }

/* ── Wer wir nicht sind: 3 offene Spalten + Erwartungs-Block ── */
.vision-anti-section { padding: 7.5rem 0; background: var(--white); }

.vision-anti-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.vision-anti-col {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
  text-align: center;
  padding-inline: .5rem;
}
.vision-anti-cross {
  width: 56px;
  height: 56px;
  color: #ef4444;
  margin-bottom: .25rem;
}
.vision-anti-name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: .25rem;
}
.vision-anti-desc {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: .25rem;
  max-width: 30ch;
}
.vision-anti-stamp {
  display: inline-block;
  align-self: center;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(110,38,84,.09);
  padding: .4rem 1rem;
  margin-top: .5rem;
  border-radius: 100px;
  width: fit-content;
}
.vision-anti-our {
  font-size: var(--fs-meta);
  color: var(--text);
  line-height: 1.6;
  margin-top: .35rem;
  max-width: 30ch;
}

/* Erwartungs-Block: schwarze Box, Inhalt hell */
.vision-anti-positive {
  margin-top: 4rem;
  padding: 2.75rem 3rem;
  background: #0e0e0e;
  color: rgba(255,255,255,.78);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: center;
}
.vision-anti-positive-head .section-eyebrow { color: rgba(220,150,190,1); }
.vision-anti-positive-title {
  color: var(--white);
  font-size: clamp(1.55rem, 2.9vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  margin-top: .5rem;
  max-width: 20ch;
}
.vision-anti-positive-title em {
  font-family: var(--font-deco);
  font-style: italic;
  font-weight: 400;
  font-size: 110%;
  background: linear-gradient(135deg, #d46aab 0%, #f0a0cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  padding-inline: 0.12em;
  margin-inline: -0.12em;
}
.vision-anti-positive-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
  margin: 0;
}
.vision-anti-positive-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: rgba(255,255,255,.88);
}
.vision-anti-positive-list strong { color: var(--white); }
.vision-anti-positive-list strong { font-weight: 700; }
.vision-anti-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gradient);
  color: var(--white);
  flex-shrink: 0;
  margin-top: 1px;
}
.vision-anti-check svg { width: 14px; height: 14px; }

/* ── Best-of-all-worlds ── */
.vision-best-section { padding: 7.5rem 0; background: var(--bg); }
.vision-best-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.vision-best-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: box-shadow var(--trans), transform var(--trans);
}
.vision-best-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.vision-best-tag {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(153,51,113,.08);
  padding: .35rem .75rem;
  border-radius: 100px;
}
.vision-best-title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: .25rem;
}
.vision-best-card p {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.7;
}

/* ── Promise / Versprechen ── */
.vision-promise-inner {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.vision-promise-section .section-eyebrow { color: rgba(220,150,190,1); }
.vision-promise-quote {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  margin: .75rem 0 1.5rem;
}
.vision-promise-quote em {
  font-family: var(--font-deco);
  font-style: italic;
  font-weight: 400;
  font-size: 110%;
  background: linear-gradient(135deg, #d46aab 0%, #f0a0cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  padding-inline: 0.12em;
  margin-inline: -0.12em;
}
.vision-promise-text {
  font-size: var(--fs-body);
  color: rgba(255,255,255,.7);
  line-height: 1.75;
  max-width: 56ch;
  margin-inline: auto;
}

/* ── CTA — Text links, Foto-Kachel mit Buttons rechts ── */
.vision-cta-section { padding: 7.5rem 0; background: var(--white); }
.vision-cta-split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3.5rem;
  align-items: center;
}
.vision-cta-content { text-align: left; }
.vision-cta-content .section-title { margin-bottom: 1rem; }
.vision-cta-content .kontakt-cta-text {
  margin-bottom: 1.5rem;
  max-width: 48ch;
}
.vision-cta-expects {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: 0;
  margin: 0;
}
.vision-cta-expects li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: center;
  font-size: var(--fs-meta);
  color: var(--text);
}

/* Rechte Kachel mit Foto, Name & Buttons */
.vision-cta-card {
  width: 320px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  box-shadow: var(--shadow-md);
}
.vision-cta-card-photo {
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: .5rem;
  border: 2px solid rgba(110, 38, 84, 0.18);
  box-shadow: 0 0 0 4px rgba(110, 38, 84, 0.04);
}
.vision-cta-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vision-cta-card-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  align-items: center;
}
.vision-cta-card-name {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
}
.vision-cta-card-role {
  font-size: var(--fs-meta);
  color: var(--muted);
}
.vision-cta-card-actions {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: 100%;
  margin-top: .25rem;
}
.vision-cta-card-actions .cta-button,
.vision-cta-card-actions .btn-secondary {
  width: 100%;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   26. REFERENZEN-SEITE
═══════════════════════════════════════════════════════════ */

/* ── Case-Galerie ── */
.case-section { padding: 7.5rem 0; background: var(--white); }
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.case-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
}
.case-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.case-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg);
}
.case-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.case-card:hover .case-card-image img { transform: scale(1.04); }
.case-card-body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  flex: 1;
}
.case-card-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(153,51,113,.08);
  padding: .35rem .7rem;
  border-radius: 100px;
}
.case-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: .25rem;
}
.case-card-desc {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.7;
  flex: 1;
}
.case-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
  margin-top: .5rem;
}
.case-card-meta span {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--muted);
}

/* ── Referenzen-Hero: Split-Layout ── */
.referenzen-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
  max-width: none;
  text-align: left;
  margin-inline: 0;
}
.referenzen-hero-text { max-width: 540px; }
.referenzen-hero-inner .hero-sub { margin-inline: 0; }
.referenzen-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.referenzen-hero-visual img {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
}

/* ── Was Kunden eint + Weitere Projekte folgen ── */
.thread-section { padding: 7.5rem 0; background: var(--bg); }
.thread-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-inline: 2rem;
}

/* Schwarze "Weitere Projekte folgen"-Box */
.thread-coming-soon {
  margin-top: 4rem;
  padding: 2.75rem 3rem;
  background: #0e0e0e;
  color: rgba(255,255,255,.78);
  border-radius: var(--radius-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.thread-coming-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem 1rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(220,150,190,1);
  margin-bottom: .25rem;
}
.thread-coming-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(220,150,190,1);
  animation: comingSoonPulse 2s ease-in-out infinite;
}
.thread-coming-title {
  color: var(--white);
  font-size: clamp(1.55rem, 2.9vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  margin: .25rem 0 .25rem;
  max-width: 22ch;
}
.thread-coming-title em {
  font-family: var(--font-deco);
  font-style: italic;
  font-weight: 400;
  font-size: 110%;
  background: linear-gradient(135deg, #d46aab 0%, #f0a0cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  padding-inline: 0.12em;
  margin-inline: -0.12em;
}
.thread-coming-text {
  font-size: var(--fs-body);
  color: rgba(255,255,255,.7);
  line-height: 1.7;
  max-width: 56ch;
  margin-inline: auto;
}
.thread-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}
.thread-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(110,38,84,.08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .5rem;
}
.thread-icon svg { width: 24px; height: 24px; }
.thread-item h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
}
.thread-item p {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.7;
}

/* ── Mehr in Kürze ── */
.coming-soon-section { padding: 7.5rem 0; background: var(--white); }
.coming-soon-block {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem 1rem;
  background: rgba(153,51,113,.08);
  border: 1px solid rgba(153,51,113,.18);
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .25rem;
}
.coming-soon-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: comingSoonPulse 2s ease-in-out infinite;
}
@keyframes comingSoonPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .55; transform: scale(1.4); }
}
.coming-soon-block .section-desc { margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════
   27. RESPONSIVE — Vision & Referenzen
═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .vision-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .vision-hero-text { max-width: none; }
  .vision-hero-visual img { max-width: 360px; }

  .vision-pain-section { padding-bottom: 4rem; }
  .vision-pain-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 560px; margin-inline: auto; }
  .vision-pain-text { max-width: none; padding-bottom: 0; }
  .vision-pain-visual { align-items: center; align-self: auto; }
  .vision-werte-grid { grid-template-columns: repeat(2, 1fr); }
  .vision-belief-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .vision-best-grid { grid-template-columns: 1fr; max-width: 580px; }
  .vision-anti-cols { grid-template-columns: 1fr; max-width: 480px; gap: 2.5rem; }
  .vision-anti-positive { grid-template-columns: 1fr; gap: 1.75rem; padding: 2rem 1.75rem; }
  .vision-anti-positive-title { max-width: none; }
  .referenzen-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .referenzen-hero-text { max-width: none; }
  .referenzen-hero-visual img { max-width: 380px; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .thread-grid { grid-template-columns: 1fr; max-width: 560px; }
  .thread-coming-soon { padding: 2rem 1.75rem; }
  .vision-cta-split { grid-template-columns: 1fr; gap: 2.5rem; max-width: 560px; }
  .vision-cta-card { width: 100%; max-width: 360px; margin-inline: auto; }
}

@media (max-width: 760px) {
  .vision-pain-section,
  .vision-werte-section,
  .vision-anti-section,
  .vision-best-section,
  .vision-cta-section,
  .case-section,
  .thread-section,
  .coming-soon-section { padding: 3.5rem 0; }
  .vision-belief-section,
  .vision-promise-section { padding: 4.5rem 0; }
  .vision-werte-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .vision-belief-tiles { grid-template-columns: 1fr; gap: 1rem; }
  .case-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .vision-hero-visual,
  .referenzen-hero-visual { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   28. TERMIN-SEITE
═══════════════════════════════════════════════════════════ */
.termin-section {
  padding: 9rem 0 7.5rem;
  background: var(--white);
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
}
.termin-redirect {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* === CMS-MENU-STYLES === */
/* === Menü: hauptmenu === */
.cms-menu{display:flex;list-style:none;margin:0;padding:0;gap:2rem;}
.cms-menu-item{margin:0;padding:0;}
.cms-has-children{position:relative;}
.cms-has-children>a{padding-bottom:16px;}
.cms-has-children>a::after{content:'';display:inline-block;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:8px;margin-top:-4px;transition:transform 0.2s ease;vertical-align:middle;}
.cms-has-children:hover>a::after,.cms-has-children:focus-within>a::after{transform:rotate(225deg);margin-top:2px;}
.cms-submenu{list-style:none;position:absolute;top:100%;left:0;min-width:220px;margin:0;padding:8px 0;display:none;white-space:nowrap;background:var(--white,var(--bg,#fff));border-radius:var(--radius-md,var(--radius,inherit));box-shadow:var(--shadow-md,0 6px 20px rgba(0,0,0,.08));}
.cms-has-children:hover .cms-submenu,.cms-has-children:focus-within .cms-submenu{display:block;}
.cms-submenu .cms-menu-item{margin:0;padding:0;}
.cms-submenu a{display:block;padding:10px 16px;color:inherit;text-decoration:none;font:inherit;}
.cms-submenu a:hover{background:rgba(0,0,0,.05);}
@media(max-width:768px){.cms-submenu{position:static;white-space:normal;box-shadow:none;background:transparent;padding:4px 0 4px 12px;display:none;}.cms-has-children:focus-within .cms-submenu,.cms-has-children.is-open .cms-submenu{display:block;}}
/* === END CMS-MENU-STYLES === */

/* === Header-Submenu Overrides (außerhalb des CMS-Blocks, damit sie nicht regeneriert werden) === */
/* Vertikales Padding an allen Menu-Items — sorgt für Submenu-Abstand & Hover-Bridge */
.cms-menu-item { margin: 0; padding: 10px 0; }
/* Submenu-Items selbst ohne Padding (sonst doppelter Abstand) */
.cms-has-children .cms-menu-item { padding: 0; }
/* Submenu selbst ohne eigenes Padding */
.site-header .cms-submenu { padding: 0; }
/* Schriftgröße wie im Hauptmenü */
.site-header .cms-submenu a { font-size: var(--fs-meta); }
/* Hover ohne Hintergrund-Highlight — Effekt geht nur über die Textfarbe */
.site-header .cms-submenu a:hover { background: transparent; }
/* Über dem Hero (Header im dunklen Modus): Submenu dunkel mit heller Schrift */
.site-header:not(.light) .cms-submenu {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
.site-header:not(.light) .cms-submenu a { color: rgba(255, 255, 255, 0.8); }
.site-header:not(.light) .cms-submenu a:hover {
  color: #fff;
  border-radius: 13px;
}