:root{
  /* Marken-Blau – aus dem Logo abgenommen */
  --blue:#0065af;
  --blue-600:#0075c9;      /* heller als --blue: auf dunklem Grund ist das der Hover */
  --blue-700:#003c6b;
  --blue-400:#3d9fe0;      /* Icons und Linien auf dunklem Grund */
  --blue-200:#7cc0ea;      /* kraeftige Akzentschrift */
  --blue-light:#8ec8ee;
  --blue-100:rgba(0,101,175,.22);
  --blue-50:rgba(0,101,175,.12);
  --blue-glow:rgba(0,101,175,.42);

  /* Flaechen – Carbon statt Weiss */
  --ink:#000000;
  --navy:#000000;
  --navy-700:#0a0a0a;
  --bg:#0d0d0d;          /* Grundflaeche, darunter liegt die Carbon-Struktur */
  --bg-alt:#131313;      /* abgesetzte Abschnitte */
  --card:rgba(255,255,255,.045);
  --card-solid:#161616;

  /* Schrift */
  --heading:#ffffff;
  --text:#eef1f4;
  --text-2:rgba(255,255,255,.68);
  --text-3:rgba(255,255,255,.55);

  --border:rgba(255,255,255,.10);
  --border-strong:rgba(0,101,175,.55);

  --shadow-sm:0 2px 12px rgba(0,0,0,.45);
  --shadow:0 12px 34px rgba(0,0,0,.5);
  --shadow-lg:0 26px 64px rgba(0,0,0,.6);
  --glow:0 8px 26px var(--blue-glow);

  --chrome-h:84px;

  --radius:16px;
  --radius-sm:10px;
  --transition:.35s cubic-bezier(.4,0,.2,1);
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---------- Seitenhintergrund: gerechnete Carbon-Flaeche ----------
   Erzeugt mit tools/carbon.py (numpy + Pillow), kein fremdes Bild.
   Sie liegt als fixierte Ebene hinter allem, bleibt beim Scrollen stehen
   und bekommt einen dunklen Schleier, damit Text sicher lesbar ist. */
html{background-color:#0a0a0c}
.carbon::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  background:url('img/carbon.webp') center center / cover no-repeat;
  pointer-events:none;
}
/* Schleier daruember – ohne ihn flimmert feiner Text auf der Struktur */
.carbon::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(8,8,10,.34) 0%,rgba(8,8,10,.46) 55%,rgba(6,6,8,.62) 100%);
  pointer-events:none;
}
/* Hochformat fuers Handy – quer gerechnete Fassung wuerde dort stark beschnitten */
@media(max-width:700px){
  .carbon::before{background-image:url('img/carbon-hoch.webp')}
}
@media(prefers-reduced-motion:no-preference){
  /* nichts zu tun – die Ebene ist statisch, das spart Rechenzeit beim Scrollen */
}


*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:96px}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--blue-600)}
:focus-visible{outline:3px solid var(--blue-400);outline-offset:3px;border-radius:6px}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Chrome-Effekt fuer Marken-Woerter (wie im Logo) */
.chrome{background:linear-gradient(180deg,#2b3540 0%,#000000 60%,#0065af 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.reveal.show{opacity:1;transform:translateY(0)}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.section-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--blue-400);text-align:center;margin-bottom:10px}
.section-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;text-align:center;margin-bottom:.5em;letter-spacing:-.02em;color:var(--heading)}
.section-title span{color:var(--blue)}
.section-subtitle{text-align:center;color:var(--text-2);font-size:1.05rem;max-width:620px;margin:0 auto 3rem}

/* ---------- Entwurfs-Hinweis ---------- */
.draft-bar{background:linear-gradient(90deg,#000000,#0065af 55%,#000000);color:#fff;font-size:.8rem;text-align:center;padding:7px 16px;letter-spacing:.02em}
.draft-bar strong{color:#fff;font-weight:800;letter-spacing:.08em}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:1000;padding:0 24px;height:84px;display:flex;align-items:center;background:rgba(255,255,255,.90);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:box-shadow var(--transition),background var(--transition)}
.header.scrolled{box-shadow:0 6px 26px rgba(14,30,52,.10);background:rgba(255,255,255,.97)}
.header-inner{max-width:1200px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;z-index:1001}
.logo img{height:58px;width:auto}
.nav-links{display:flex;gap:30px;list-style:none}
.nav-links a{color:var(--text);font-size:.92rem;font-weight:600;position:relative;padding:4px 0}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--blue);border-radius:2px;transition:width var(--transition)}
.nav-links a:hover{color:var(--blue-400)}
.nav-links a:hover::after{width:100%}
.header-right{display:flex;align-items:center;gap:20px}
.nav-book-cta{background:var(--blue);color:#fff;font-weight:700;font-size:.9rem;padding:11px 24px;border-radius:100px;white-space:nowrap;transition:background var(--transition),transform var(--transition),box-shadow var(--transition)}
.nav-book-cta:hover{background:var(--blue-600);color:#fff;transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,101,175,.32)}
.mobile-book-btn{display:none;align-items:center;background:var(--blue);color:#fff;font-weight:700;font-size:.82rem;padding:9px 18px;border-radius:100px;white-space:nowrap}
.mobile-book-btn:hover{background:var(--blue-600);color:#fff}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1001;padding:8px;background:none;border:none}
.hamburger span{display:block;width:26px;height:2.5px;background:var(--text);border-radius:3px;transition:var(--transition);transform-origin:center}
.hamburger.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mobile-nav-overlay{position:fixed;inset:0;z-index:999;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:84px;opacity:0;pointer-events:none;transition:opacity .4s ease}
.mobile-nav-overlay.open{opacity:1;pointer-events:all}
.mobile-nav-links{list-style:none;display:flex;flex-direction:column;align-items:center;gap:22px;margin-bottom:32px}
.mobile-nav-links a{color:var(--heading);font-size:1.4rem;font-weight:800}
.mobile-nav-links a:hover{color:var(--blue-400)}
.mobile-nav-book-btn{background:var(--blue);color:#fff;font-weight:700;font-size:1rem;padding:14px 44px;border-radius:100px;margin-bottom:40px;display:inline-block}
.mobile-nav-book-btn:hover{color:#fff;background:var(--blue-600)}
.mobile-nav-socials{display:flex;gap:16px}
.mobile-nav-social{width:52px;height:52px;border-radius:50%;background:var(--blue-50);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;transition:background var(--transition)}
.mobile-nav-social:hover{background:var(--blue-100)}
.mobile-nav-social svg{width:23px;height:23px;fill:var(--blue)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:calc(100vh - var(--chrome-h));min-height:calc(100svh - var(--chrome-h));display:flex;flex-direction:column;background:#fff url('img/hero.webp') center 46%/cover no-repeat}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.86) 40%,rgba(240,247,253,.95) 100%)}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 56% at 50% 36%,rgba(0,101,175,.10) 0%,transparent 72%);pointer-events:none}
.hero-box{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:880px;width:100%;margin:0 auto;padding:56px 24px 44px;animation:fadeInUp .8s ease-out}
.hero-location-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:100px;padding:8px 20px;font-size:.82rem;font-weight:700;color:var(--blue-200);margin-bottom:26px;box-shadow:var(--shadow-sm)}
.hero-box h1{font-size:clamp(2.3rem,6.4vw,4.2rem);font-weight:900;line-height:1.05;letter-spacing:-.03em;color:var(--heading);margin-bottom:14px;text-transform:uppercase}
.hero-box h1 em{font-style:normal;color:var(--blue)}
.hero-claim{font-size:clamp(.85rem,2.4vw,1.02rem);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600);margin-bottom:18px}
.hero-box p{font-size:clamp(.98rem,2vw,1.12rem);color:var(--text-2);line-height:1.75;margin:0 auto 28px;max-width:580px}
.hero-tags{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.hero-tag{background:#fff;border:1px solid var(--border);border-radius:100px;padding:8px 18px;font-size:.82rem;color:var(--text);font-weight:600;white-space:nowrap;box-shadow:var(--shadow-sm)}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-btn-primary{display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;border:none;font-weight:700;font-size:.97rem;padding:15px 32px;border-radius:100px;transition:all var(--transition);cursor:pointer;text-decoration:none;box-shadow:0 10px 26px rgba(0,101,175,.30)}
.hero-btn-primary:hover{background:var(--blue-600);color:#fff;transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,101,175,.34)}
.hero-btn-primary svg{width:17px;height:17px}
.hero-btn-outline{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--heading);border:1.5px solid var(--border);box-shadow:var(--shadow-sm);font-weight:700;font-size:.97rem;padding:15px 32px;border-radius:100px;transition:all var(--transition);cursor:pointer;text-decoration:none}
.hero-btn-outline:hover{background:var(--blue-50);color:var(--blue-600);border-color:var(--border-strong)}
.hero-btn-outline svg{width:17px;height:17px}

/* ---------- USP-Leiste (aus dem Flyer) – liegt im Hero-Bild ---------- */
.hero-usps{position:relative;z-index:3;flex-shrink:0;width:100%;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--border)}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;margin:0 auto;padding:22px 24px}
.usp-item{display:flex;align-items:center;justify-content:center;gap:13px;text-align:left;padding:0 10px;position:relative}
.usp-item+.usp-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:36px;background:var(--border)}
.usp-icon{width:42px;height:42px;flex-shrink:0;border-radius:50%;background:var(--blue-50);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center}
.usp-icon svg{width:20px;height:20px;stroke:var(--blue);fill:none}
.usp-text{font-size:.73rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--heading);line-height:1.4}

/* Flache Fenster (Laptops): Hero enger setzen, damit die USP-Leiste
   im Bild sichtbar bleibt und nicht unter die Falz rutscht. */
@media(min-width:769px) and (max-height:860px){
  .hero-box{padding:26px 24px 24px}
  .hero-location-pill{margin-bottom:14px;padding:6px 16px;font-size:.78rem}
  .hero-box h1{font-size:clamp(2rem,4.6vw,3.3rem);margin-bottom:10px}
  .hero-claim{margin-bottom:12px;font-size:.86rem}
  .hero-box p{margin-bottom:18px;line-height:1.6}
  .hero-tags{margin-bottom:20px}
  .hero-btn-primary,.hero-btn-outline{padding:12px 26px;font-size:.92rem}
  .usp-grid{padding:14px 24px}
  .usp-icon{width:36px;height:36px}
  .usp-icon svg{width:17px;height:17px}
}
@media(min-width:769px) and (max-height:720px){
  .hero-tags{display:none}
  .hero-box p{display:none}
}

/* ---------- Marken-Marquee ---------- */
.brand-marquee{background:var(--bg);padding:26px 0;border-bottom:1px solid var(--border);overflow:hidden}
.brand-marquee-viewport{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.brand-track{display:flex;flex-wrap:nowrap;width:max-content;animation:brand-scroll 48s linear infinite;will-change:transform}
.brand-marquee-viewport:hover .brand-track{animation-play-state:paused}
.brand-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:32px;padding:0 26px;opacity:.38;transition:opacity .35s ease;filter:grayscale(1) brightness(0)}
.brand-logo:hover{opacity:.9}
.brand-logo img{height:100%;width:auto;display:block}
@keyframes brand-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.brand-track{animation:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;padding:13px 30px;border-radius:100px;border:none;cursor:pointer;transition:all var(--transition);font-family:var(--font);text-decoration:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-600);color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,101,175,.30)}
.btn-outline{background:#fff;color:var(--heading);border:1.5px solid var(--border)}
.btn-outline:hover{background:var(--blue-50);color:var(--blue-600);border-color:var(--border-strong);transform:translateY(-2px)}
.btn-on-dark{background:var(--blue);color:#fff;box-shadow:0 10px 30px rgba(0,101,175,.4)}
.btn-on-dark:hover{background:var(--blue-600);color:#fff;transform:translateY(-2px)}

/* ---------- Ueber uns ---------- */
.about{padding:100px 0;background:var(--bg)}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-text h2{font-size:clamp(1.7rem,3.5vw,2.3rem);font-weight:900;margin-bottom:20px;letter-spacing:-.02em;line-height:1.2;color:var(--heading)}
.about-text h2 span{color:var(--blue)}
.about-text p{color:var(--text-2);font-size:.96rem;line-height:1.85;margin-bottom:14px}
.about-signature{margin-top:18px;font-weight:800;color:var(--heading);font-size:.95rem;line-height:1.5}
.about-signature span{display:block;font-weight:600;color:var(--text-3);font-size:.88rem}
.about-highlights{display:flex;flex-direction:column;gap:10px;margin:24px 0 28px;font-size:.92rem;font-weight:600;color:var(--text-2)}
.about-hl-item{display:flex;align-items:center;gap:12px}
.about-hl-icon{width:36px;height:36px;border-radius:10px;background:var(--blue-50);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.about-hl-icon svg{width:17px;height:17px;stroke:var(--blue);fill:none}
.about-image{position:relative;display:flex;justify-content:center}

/* Karte "Unsere Halle" in "Ueber uns" */
.about-gear{width:100%;max-width:460px;background:var(--card);border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.about-gear-img{position:relative;aspect-ratio:16/10;background:var(--navy)}
.about-gear-img img{width:100%;height:100%;object-fit:cover}
.about-gear-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,7,15,.82) 100%)}
.about-gear-badge{position:absolute;top:14px;left:14px;z-index:2;background:rgba(0,101,175,.92);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:100px}
.about-gear-body{padding:24px 24px 26px}
.about-gear-title{font-size:1.12rem;font-weight:900;color:var(--heading)}
.about-gear-sub{font-size:.85rem;color:var(--blue);font-weight:700;margin-top:2px}
.about-gear-list{list-style:none;margin:16px 0 0;display:flex;flex-direction:column;gap:9px}
.about-gear-list li{display:flex;align-items:flex-start;gap:9px;font-size:.87rem;color:var(--text-2);line-height:1.6}
.about-gear-list li::before{content:'✓';color:var(--blue);font-weight:800;flex-shrink:0}

/* ---------- Warum ---------- */
.whyme{padding:92px 0;background:var(--bg-alt)}
.whyme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.whyme-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;display:flex;flex-direction:column;gap:12px;transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition)}
.whyme-card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.whyme-icon{width:54px;height:54px;border-radius:14px;background:var(--blue-50);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center}
.whyme-icon svg{width:26px;height:26px;stroke:var(--blue);fill:none}
.whyme-title{font-size:1.06rem;font-weight:800;color:var(--heading)}
.whyme-desc{font-size:.89rem;color:var(--text-2);line-height:1.7}

/* ---------- Trust ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1100px;margin:0 auto}
.trust-card{text-align:center;padding:22px 14px;border-radius:14px;background:var(--card);border:1px solid var(--border);transition:transform var(--transition),border-color var(--transition)}
.trust-card:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.trust-num-sm{font-size:1.1rem;font-weight:800;color:var(--heading);line-height:1.25;margin-bottom:4px}
.trust-label{font-size:.82rem;color:var(--text-2);margin-top:8px;font-weight:500}

/* ---------- Leistungs-Chips (5 Services aus dem Flyer) ---------- */

/* ---------- Leistungen / Pakete ---------- */
.packages{padding:100px 0;background:var(--bg)}
.packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1160px;margin:0 auto 32px;align-items:stretch}
.package-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:all var(--transition);position:relative;box-shadow:var(--shadow-sm)}
.package-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.package-card.featured{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 22px 54px rgba(0,101,175,.18)}
.package-card.featured::after{content:'Beliebteste Wahl';position:absolute;top:14px;right:14px;background:var(--blue);color:#fff;font-size:.7rem;font-weight:800;padding:5px 14px;border-radius:100px;z-index:2}
.pkg-tier{height:4px;width:100%;background:var(--border)}
.package-card.featured .pkg-tier{background:linear-gradient(90deg,var(--blue-600),var(--blue-400))}
.package-body{padding:28px 24px;flex:1;display:flex;flex-direction:column}
.pkg-icon-wrap{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--blue-50);border:1px solid var(--border-strong)}
.pkg-icon-wrap svg{width:23px;height:23px;stroke:var(--blue);fill:none}
.package-card.featured .pkg-icon-wrap{background:var(--blue);border-color:var(--blue);box-shadow:var(--glow)}
.package-card.featured .pkg-icon-wrap svg{stroke:#fff}
.package-title{font-size:1.2rem;font-weight:800;color:var(--heading);margin-bottom:6px}
.package-desc{color:var(--text-3);font-size:.85rem;margin-bottom:18px;line-height:1.6}
.package-features{list-style:none;flex:1;margin-bottom:22px}
.package-features li{display:flex;align-items:flex-start;gap:9px;padding:8px 0;font-size:.88rem;color:var(--text-2);border-bottom:1px solid var(--border)}
.package-features li:last-child{border-bottom:none}
.package-features li::before{content:'✓';color:var(--blue);font-weight:800;flex-shrink:0}
.package-price{display:flex;align-items:baseline;gap:6px;margin-bottom:16px}
.package-price-label{font-size:.88rem;font-weight:600;color:var(--text-3)}
.package-price-tag{font-size:2rem;font-weight:900;color:var(--heading);letter-spacing:-.02em}
.pkg-note{display:inline-block;margin-top:2px;font-size:.78rem;color:var(--text-3)}
.pkg-btn{display:flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:10px;font-weight:700;font-size:.9rem;transition:all var(--transition);text-decoration:none;border:1.5px solid var(--border);color:var(--heading);background:#fff}
.pkg-btn:hover{background:var(--blue-50);color:var(--blue-600);border-color:var(--blue)}
.pkg-btn.filled{background:var(--blue);border-color:var(--blue);color:#fff}
.pkg-btn.filled:hover{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.pkg-hint-box{max-width:900px;margin:26px auto 0;background:var(--blue-50);border:1px solid var(--border-strong);border-radius:var(--radius);padding:20px 24px;text-align:center}
.pkg-hint-box strong{color:var(--heading)}
.pkg-hint-box p{color:var(--text-2);font-size:.9rem;line-height:1.75}

/* Platzhalter-Markierung (Entwurf) */
.placeholder-flag{display:inline-flex;align-items:center;gap:6px;background:#fff6e6;border:1px solid #f0c98a;color:#9a6207;font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:100px;margin-bottom:12px}

/* ---------- Parallax / Banner ---------- */
.parallax-section{position:relative;min-height:400px;background:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden}
.parallax-section::before{content:'';position:absolute;inset:0;background:linear-gradient(103deg,#000000 0%,#0d2c46 58%,#0065af 100%)}
.parallax-content{position:relative;z-index:2;text-align:center;max-width:760px;padding:64px 24px}
.parallax-content h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;color:#fff;margin-bottom:16px;letter-spacing:-.02em}
.parallax-content p{font-size:1.04rem;color:rgba(255,255,255,.86);line-height:1.75;margin:0 auto 32px;max-width:620px}
.parallax-claim{display:block;width:fit-content;margin-left:auto;margin-right:auto;font-size:.76rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--blue-light);margin-top:28px;border-top:1px solid rgba(255,255,255,.20);padding-top:18px}

/* ---------- Portfolio / Galerie ---------- */
.gallery{padding:100px 0;background:var(--bg)}
.gallery-outer{margin:0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 12px}
.gallery-carousel{width:100%;max-width:400px;overflow:hidden;border-radius:var(--radius)}
.gallery-track{display:flex;will-change:transform;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.gallery-slide{flex-shrink:0;width:100%}
.gallery-figure{margin:0}
.gallery-frame{position:relative;width:100%;aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--border)}
.gallery-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery-caption{margin-top:14px;text-align:center;font-size:.88rem;color:var(--text-2);font-weight:600}
.gallery-arrow{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition),box-shadow var(--transition);z-index:10;box-shadow:var(--shadow-sm)}
.gallery-arrow:hover{background:var(--blue-50);color:var(--blue);box-shadow:var(--shadow)}
.gallery-arrow svg{width:20px;height:20px;stroke:currentColor;fill:none}
.gallery-arrow-prev{margin-right:18px}
.gallery-arrow-next{margin-left:18px}
.gallery-dots{width:100%;display:flex;justify-content:center;gap:8px;margin-top:22px}
.gallery-dot{width:9px;height:9px;border-radius:50%;background:#d7e0ea;cursor:pointer;transition:all var(--transition);border:none;padding:0}
.gallery-dot.active{background:var(--blue);transform:scale(1.35)}

/* ---------- Videos ---------- */
.videos{padding:100px 0;background:var(--bg-alt)}
.videos-outer{position:relative;max-width:1160px;margin:0 auto}
.videos-viewport{overflow:hidden;border-radius:var(--radius)}
.videos-track{display:flex;gap:22px;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.video-card{flex:0 0 calc((100% - 44px)/3);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition)}
.video-card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.video-frame{position:relative;width:100%;aspect-ratio:9/16;background:var(--navy)}
.video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--navy);display:block}
/* Play-Overlay – das Video startet erst auf Klick, nie automatisch */
.video-play{position:absolute;inset:0;z-index:2;border:none;padding:0;margin:0;cursor:pointer;background:linear-gradient(180deg,rgba(4,7,15,.18) 0%,rgba(4,7,15,.10) 45%,rgba(4,7,15,.72) 100%);display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}
.video-play[hidden]{display:none}
.video-play::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.video-play-btn{width:66px;height:66px;border-radius:50%;background:rgba(0,101,175,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 34px rgba(0,101,175,.55);transition:transform var(--transition),background var(--transition)}
.video-play:hover .video-play-btn{transform:scale(1.09);background:var(--blue-600)}
.video-play-btn svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.video-badge{position:absolute;top:12px;left:12px;z-index:3;background:rgba(4,7,15,.78);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:100px;backdrop-filter:blur(4px);pointer-events:none}
.video-frame.laeuft .video-dauer,.video-frame.laeuft .video-badge{opacity:0;transition:opacity .25s ease}
.video-dauer{position:absolute;bottom:12px;right:12px;z-index:3;background:rgba(4,7,15,.78);color:#fff;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:100px;pointer-events:none}
.video-body{padding:18px 20px 20px}
.video-title{font-size:1rem;font-weight:800;color:var(--heading)}
.video-desc{font-size:.85rem;color:var(--text-2);line-height:1.6;margin-top:5px}
.videos-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:32px}
.videos-arr{width:46px;height:46px;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition),box-shadow var(--transition);box-shadow:var(--shadow-sm);flex-shrink:0}
.videos-arr:hover{background:var(--blue-50);color:var(--blue);box-shadow:var(--shadow)}
.videos-arr svg{width:18px;height:18px;stroke:currentColor;fill:none}
.videos-dots{display:flex;align-items:center;gap:8px}
.videos-dot{width:9px;height:9px;border-radius:50%;background:#d7e0ea;cursor:pointer;transition:all var(--transition);border:none;padding:0}
.videos-dot.active{background:var(--blue);transform:scale(1.35)}
.videos-hint{text-align:center;font-size:.8rem;color:var(--text-3);margin-top:16px}

/* ---------- Bewertungen ---------- */
.reviews{padding:100px 0;background:var(--bg-alt)}
.reviews-stars{display:flex;justify-content:center;gap:5px;margin-bottom:8px}
.reviews-stars svg{width:26px;height:26px;fill:#f5a623}
.reviews-subline{text-align:center;color:var(--text-2);font-size:.95rem;margin-bottom:44px}
.reviews-subline strong{color:var(--heading);font-weight:800}
/* Karussell */
.reviews-track-wrap{position:relative;overflow:hidden;max-width:1100px;margin:0 auto}
.reviews-track{display:flex;gap:20px;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.reviews-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:34px}
.reviews-arr{width:46px;height:46px;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition),box-shadow var(--transition);box-shadow:var(--shadow-sm);flex-shrink:0}
.reviews-arr:hover{background:var(--blue-50);color:var(--blue);box-shadow:var(--shadow)}
.reviews-arr svg{width:18px;height:18px;stroke:currentColor;fill:none}
.reviews-dots{display:flex;align-items:center;gap:8px}
.reviews-dot{width:9px;height:9px;border-radius:50%;background:#d7e0ea;cursor:pointer;transition:all var(--transition);border:none;padding:0}
.reviews-dot.active{background:var(--blue);transform:scale(1.35)}
.review-card{flex:0 0 calc((100% - 40px)/3);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition)}
.review-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.review-header{display:flex;align-items:center;gap:12px}
.review-avatar{width:42px;height:42px;border-radius:50%;background:var(--blue-50);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--blue-600);font-size:.92rem;flex-shrink:0}
.review-name{font-weight:800;font-size:.94rem;color:var(--heading)}
.review-meta{font-size:.78rem;color:var(--text-3);margin-top:1px}
.review-rating{display:flex;gap:2px;margin-top:4px}
.review-rating svg{width:14px;height:14px;fill:#f5a623}
.review-text{color:var(--text-2);font-size:.9rem;line-height:1.75;flex:1}
.review-pkg{display:inline-block;align-self:flex-start;background:var(--blue-50);color:var(--blue-600);border:1px solid var(--border-strong);font-size:.72rem;font-weight:700;padding:4px 11px;border-radius:100px}

/* ---------- Social ---------- */
.social-follow{padding:88px 0;background:var(--bg)}
.social-follow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:820px;margin:40px auto 0}
.social-follow-card{border-radius:20px;padding:34px 22px;text-align:center;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .25s ease,box-shadow .25s ease;color:#fff}
.social-follow-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);color:#fff}
.social-follow-card.insta{background:linear-gradient(135deg,#833ab4 0%,#fd1d1d 50%,#fcb045 100%)}
.social-follow-card.tiktok{background:linear-gradient(135deg,#000000 0%,#2b2b38 100%)}
.social-follow-card.wa{background:linear-gradient(135deg,#128c7e 0%,#25d366 100%)}
.social-follow-icon{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.social-follow-icon svg{width:30px;height:30px;fill:#fff}
.social-follow-name{font-size:1.2rem;font-weight:800;color:#fff}
.social-follow-handle{font-size:.8rem;color:rgba(255,255,255,.82)}
.social-follow-cta{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:#fff;background:rgba(255,255,255,.20);border-radius:100px;padding:7px 18px;transition:background .2s}
.social-follow-card:hover .social-follow-cta{background:rgba(255,255,255,.30)}
.social-follow-cta svg{width:13px;height:13px;stroke:#fff;fill:none}

/* ---------- Kontakt ---------- */
.contact{padding:100px 0 70px;background:var(--bg-alt)}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-badge{display:inline-block;background:var(--blue-50);color:var(--blue-600);font-size:.76rem;font-weight:800;padding:6px 15px;border-radius:100px;margin-bottom:14px;border:1px solid var(--border-strong);letter-spacing:.08em;text-transform:uppercase}
.contact-title{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:900;letter-spacing:-.03em;margin-bottom:12px;color:var(--heading)}
.contact-desc{color:var(--text-2);font-size:.96rem;line-height:1.8;margin-bottom:24px}
.contact-info-card{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:17px 20px;margin-bottom:12px;transition:background var(--transition),transform var(--transition),box-shadow var(--transition)}
.contact-info-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.contact-info-card-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info-card-icon svg{width:24px;height:24px}
.ci-phone,.ci-email,.ci-pin{background:var(--blue-50);color:var(--blue)}
.ci-label{font-size:.72rem;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em}
.ci-value{font-size:.95rem;font-weight:700;color:var(--heading);margin-top:2px;display:block}
a.ci-value:hover{color:var(--blue)}
.contact-follow-label{font-size:.76rem;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin:22px 0 12px}
.contact-follow-icons{display:flex;gap:12px}
.contact-follow-btn{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;transition:transform var(--transition),box-shadow var(--transition)}
.contact-follow-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cf-insta{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.cf-tiktok{background:#000000}
.cf-wa{background:linear-gradient(135deg,#128c7e,#25d366)}
.contact-follow-btn svg{width:25px;height:25px;fill:#fff}

.contact-form-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow)}
.cf-info-box{background:var(--blue-50);border:1px solid var(--border-strong);border-radius:12px;padding:14px 16px;margin-bottom:22px;font-size:.85rem;color:var(--text-2);line-height:1.65}
.cf-info-box strong{color:var(--heading)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-field{margin-bottom:15px}
.cf-label{display:block;font-size:.74rem;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.cf-input{width:100%;background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-family:var(--font);font-size:.92rem;outline:none;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}
.cf-input::placeholder{color:var(--text-3)}
.cf-input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,101,175,.14)}
.cf-input option{background:#fff;color:var(--text)}
.cf-textarea{min-height:112px;resize:vertical}
.cf-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--blue);color:#fff;border:none;border-radius:10px;padding:14px 20px;font-family:var(--font);font-weight:700;font-size:.95rem;cursor:pointer;margin-top:4px;transition:background var(--transition),transform var(--transition),box-shadow var(--transition)}
.cf-btn:hover{background:var(--blue-600);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,101,175,.30)}
.cf-btn svg{width:18px;height:18px;stroke:#fff;fill:none}
.cf-consent{font-size:.78rem;color:var(--text-3);line-height:1.6;margin-top:12px}
.cf-status{margin-top:14px;font-size:.88rem;padding:11px 14px;border-radius:10px;display:none}
.cf-status.ok{display:block;background:var(--blue-50);color:var(--text);border:1px solid var(--border-strong)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);padding:60px 0 0;color:rgba(255,255,255,.70);border-top:none}
.footer a{color:rgba(255,255,255,.66)}
.footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-brand-chip{display:inline-block;margin-bottom:16px}
.footer-brand-chip img{height:64px;width:auto}
.footer-brand-desc{font-size:.88rem;color:rgba(255,255,255,.58);line-height:1.75;margin-bottom:20px;max-width:280px}
.footer-socials{display:flex;gap:10px}
.footer-social-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);transition:all var(--transition)}
.footer-social-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.footer-social-btn svg{width:18px;height:18px;fill:currentColor}
.footer-col-title{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.45);margin-bottom:16px}
.footer-col-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col-links a{font-size:.88rem}
.footer-contact-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:.88rem;color:rgba(255,255,255,.60);line-height:1.5}
.footer-contact-item svg{width:15px;height:15px;flex-shrink:0;margin-top:3px;color:var(--blue-light);stroke:currentColor;fill:none}
.footer-claim{text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.38);padding:22px 0 4px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:8px 0 20px;flex-wrap:wrap;gap:8px}
.footer-copy{font-size:.78rem;color:rgba(255,255,255,.35)}
.footer-credit{font-size:.78rem;color:rgba(255,255,255,.42)}
.footer-credit a{font-weight:600}
.footer-links-legal{display:contents}

/* ---------- WhatsApp Float ---------- */
.wa-float{position:fixed;bottom:22px;right:22px;width:60px;height:60px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(37,211,102,.45);z-index:900;transition:transform var(--transition)}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal{padding:70px 0 90px;background:var(--bg);min-height:60vh}
.legal-inner{max-width:820px;margin:0 auto}
.legal h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:900;color:var(--heading);letter-spacing:-.02em;margin-bottom:10px}
.legal .legal-lead{color:var(--text-2);font-size:1rem;line-height:1.8;margin-bottom:32px}
.legal h2{font-size:1.15rem;font-weight:800;color:var(--heading);margin:34px 0 12px}
.legal p{color:var(--text-2);font-size:.94rem;line-height:1.85;margin-bottom:12px}
.legal ul{margin:0 0 14px 20px;color:var(--text-2);font-size:.94rem;line-height:1.85}
.legal-box{background:var(--blue-50);border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:12px;padding:20px 24px;margin-bottom:28px}
.legal-box strong{color:var(--heading)}
.legal-box p{margin-bottom:0;color:var(--text-2)}
.legal-ph{background:#fff8ec;border:1px dashed #e5b978;border-radius:10px;padding:14px 18px;color:#8a5a06;font-size:.9rem;line-height:1.7;margin-bottom:14px}
.legal-ph code{background:#fdefd6;padding:2px 6px;border-radius:5px;font-size:.86rem;color:#7a4f04}

/* ---------- Buchungsseite: Schritt-fuer-Schritt-Assistent ---------- */
.page-hero{position:relative;padding:74px 24px 56px;text-align:center;background:linear-gradient(180deg,#ffffff 0%,#eef5fb 100%);border-bottom:1px solid var(--border);overflow:hidden}
.page-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(64% 100% at 50% 0%,rgba(0,101,175,.10) 0%,transparent 70%);pointer-events:none}
.page-hero>*{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:900;letter-spacing:-.03em;margin-bottom:12px;color:var(--heading)}
.page-hero h1 span{color:var(--blue)}
.page-hero p{color:var(--text-2);font-size:1.05rem;max-width:580px;margin:0 auto;line-height:1.7}
.page-hero-promo{display:inline-flex;align-items:center;gap:8px;background:var(--blue-50);border:1px solid var(--border-strong);color:var(--text);font-size:.82rem;font-weight:700;padding:8px 18px;border-radius:100px;margin-top:18px}
.page-hero-promo strong{color:var(--blue-600)}

.booking{padding:20px 0 100px;background:var(--bg-alt)}
.booking-tool{max-width:780px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow);animation:fadeInUp .6s ease-out}

.booking-progress{display:flex;align-items:center;justify-content:center;margin-bottom:38px;flex-wrap:wrap;row-gap:14px}
.progress-step{display:flex;align-items:center;gap:8px}
.progress-circle{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;border:2px solid var(--border);color:var(--text-3);transition:all var(--transition)}
.progress-step.active .progress-circle{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 4px rgba(0,101,175,.10)}
.progress-step.done .progress-circle{border-color:var(--blue);background:var(--blue);color:#fff}
.progress-label{font-size:.74rem;color:var(--text-3);font-weight:600;transition:color var(--transition)}
.progress-step.active .progress-label,.progress-step.done .progress-label{color:var(--text-2)}
.progress-line{width:28px;height:2px;background:var(--border);margin:0 10px;transition:background var(--transition)}
.progress-line.done{background:var(--blue)}

.step{display:none}
.step.active{display:block;animation:fadeInUp .5s ease-out}
.step-title{font-size:1.2rem;font-weight:800;margin-bottom:8px;text-align:center;color:var(--heading)}
.step-desc{text-align:center;color:var(--text-2);font-size:.9rem;margin-bottom:28px}

.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:18px 12px;text-align:center;cursor:pointer;transition:all var(--transition);position:relative}
.tile:hover{border-color:var(--border-strong);background:var(--blue-50)}
.tile.selected{border-color:var(--blue);background:var(--blue-50);box-shadow:0 0 0 3px rgba(0,101,175,.12)}
.tile-label{font-weight:800;font-size:.88rem;margin-bottom:4px;letter-spacing:.02em;color:var(--heading)}
.tile-info{font-size:.74rem;color:var(--text-3)}

.pkg-tile-grid{display:grid;grid-template-columns:1fr;gap:16px}
.pkg-tile{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:22px 130px 22px 20px;cursor:pointer;transition:all var(--transition);display:block;position:relative}
.pkg-tile:hover{border-color:var(--border-strong);background:var(--blue-50)}
.pkg-tile.selected{border-color:var(--blue);background:var(--blue-50);box-shadow:0 0 0 3px rgba(0,101,175,.12)}
.pkg-tile.featured{border-color:var(--border-strong)}
.pkg-tile-badge{position:absolute;top:-10px;left:20px;background:var(--blue);color:#fff;font-size:.66rem;font-weight:800;padding:3px 12px;border-radius:100px;text-transform:uppercase;letter-spacing:.06em;z-index:2}
.pkg-tile-info{min-width:0}
.pkg-tile-info h4{font-size:1.02rem;font-weight:800;margin-bottom:8px;color:var(--heading)}
.pkg-tile-features{list-style:none;display:grid;gap:5px;margin-top:4px}
.pkg-tile-features li{font-size:.8rem;color:var(--text-2);padding-left:18px;position:relative;line-height:1.55}
.pkg-tile-features li::before{content:'✓';position:absolute;left:0;top:0;color:var(--blue);font-weight:800;font-size:.85rem}
.pkg-tile-features li strong{color:var(--text)}
.pkg-tile-price{position:absolute;top:22px;right:20px;font-size:1.22rem;font-weight:900;color:var(--blue);white-space:nowrap;line-height:1;z-index:1}
.pkg-tile.deluxe{border-color:var(--border-strong)}
.pkg-tile.deluxe .pkg-tile-badge{background:linear-gradient(135deg,#0065af,#02406d)}

.extras-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.extra-tile{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:16px 14px;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:12px}
.extra-tile:hover{border-color:var(--border-strong);background:var(--blue-50)}
.extra-tile.selected{border-color:var(--blue);background:var(--blue-50);box-shadow:0 0 0 3px rgba(0,101,175,.12)}
.extra-tile.inklusive{border-color:rgba(46,125,50,.35);background:rgba(46,125,50,.06);cursor:default;pointer-events:none}
.extra-tile.inklusive .extra-check{border-color:#4CAF50;background:#4CAF50}
.extra-tile.inklusive .extra-check svg{opacity:1}
.extra-tile.inklusive .extra-price{color:#2e7d32;font-weight:800;font-size:.78rem}
.extra-check{width:22px;height:22px;border-radius:6px;flex-shrink:0;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.extra-tile.selected .extra-check{border-color:var(--blue);background:var(--blue)}
.extra-check svg{width:14px;height:14px;color:#fff;opacity:0;transition:opacity var(--transition)}
.extra-tile.selected .extra-check svg{opacity:1}
.extra-info{flex:1;min-width:0}
.extra-name{font-weight:700;font-size:.88rem;margin-bottom:2px;color:var(--heading)}
.extra-desc{font-size:.73rem;color:var(--text-3)}
.extra-price{font-weight:800;font-size:.92rem;color:var(--blue);white-space:nowrap}
.extras-total{text-align:center;margin-top:16px;padding:12px;border-radius:var(--radius-sm);background:var(--blue-50);border:1px solid var(--border-strong);font-size:.9rem;color:var(--text-2)}
.extras-total strong{color:var(--blue-600);font-size:1.05rem}
.extras-skip{display:block;text-align:center;margin-top:12px;font-size:.82rem;color:var(--text-3);cursor:pointer;transition:color var(--transition)}
.extras-skip:hover{color:var(--blue-600)}

.vehicle-price-live{margin-top:18px;padding:16px 18px;background:var(--blue-50);border:1px solid var(--border-strong);border-radius:var(--radius-sm);text-align:center;transition:all var(--transition)}
.vpl-label{font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;font-weight:700;margin-bottom:4px}
.vpl-price{font-size:1.6rem;font-weight:900;color:var(--blue)}
.vpl-hint{font-size:.72rem;color:var(--text-3);margin-top:2px}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:.78rem;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em}
.form-group input,.form-group textarea,.form-group select{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;font-family:var(--font);font-size:.95rem;color:var(--text);transition:border-color var(--transition),box-shadow var(--transition);outline:none}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-3)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.form-group textarea{resize:vertical;min-height:88px}
.form-group select option{background:#fff;color:var(--text)}
.form-hint{font-size:.75rem;color:var(--text-3);margin-top:4px}

.booking-nav{display:flex;justify-content:space-between;margin-top:28px;gap:12px}
.btn-back{background:#fff;border:1.5px solid var(--border);color:var(--text-2);padding:12px 24px;border-radius:100px;font-family:var(--font);font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition)}
.btn-back:hover{border-color:var(--blue);color:var(--blue-600)}
.btn-next{background:var(--blue);color:#fff;border:none;padding:12px 28px;border-radius:100px;font-family:var(--font);font-size:.9rem;font-weight:700;cursor:pointer;transition:all var(--transition);margin-left:auto}
.btn-next:hover{background:var(--blue-600);box-shadow:0 8px 24px var(--blue-glow)}
.btn-next:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

.booking-summary{background:var(--blue-50);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:20px;margin-bottom:20px}
.booking-summary h4{font-size:.85rem;color:var(--blue-600);font-weight:800;margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:.9rem;gap:12px}
.summary-row:last-child{border-bottom:none}
.summary-label{color:var(--text-2)}
.summary-value{font-weight:700;text-align:right;color:var(--heading)}

.booking-success{text-align:center;padding:40px 20px;display:none}
.booking-success.active{display:block;animation:fadeInUp .6s ease-out}
.success-icon{width:72px;height:72px;margin:0 auto 20px;border-radius:50%;background:var(--blue-50);border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;color:var(--blue);animation:pulse-glow 2s ease-in-out infinite}
.success-icon svg{width:32px;height:32px}
.booking-success h3{font-size:1.4rem;font-weight:800;margin-bottom:8px;color:var(--heading)}
.booking-success p{color:var(--text-2);font-size:.95rem;max-width:520px;margin:0 auto}
.booking-error{background:#fdecea;border:1px solid #f3bdb6;color:#a3271b;border-radius:var(--radius-sm);padding:12px 16px;font-size:.85rem;margin-top:14px;display:none}
.booking-error.active{display:block}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 0 rgba(0,101,175,.24)}50%{box-shadow:0 0 0 14px rgba(0,101,175,0)}}

/* Datumsauswahl */
.date-picker-wrapper{position:relative}
.date-picker-trigger{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;font-family:var(--font);font-size:.95rem;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:border-color var(--transition),box-shadow var(--transition)}
.date-picker-wrapper.open .date-picker-trigger{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.date-picker-trigger svg{width:18px;height:18px;color:var(--text-3);flex-shrink:0}
.dp-display{color:var(--text-3);flex:1;text-align:left}
.dp-display.has-value{color:var(--text)}
.date-picker-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:0 18px 48px rgba(14,30,52,.16);z-index:200;padding:20px;display:none}
.date-picker-wrapper.open .date-picker-panel{display:block}
.dp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dp-nav{background:none;border:1px solid var(--border);border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:1.1rem;color:var(--text-2);transition:all var(--transition);line-height:1;display:flex;align-items:center;justify-content:center}
.dp-nav:hover{border-color:var(--blue);color:var(--blue-600)}
.dp-month-year{font-weight:800;font-size:.95rem;color:var(--heading)}
.dp-day-labels{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:6px}
.dp-day-labels span{font-size:.75rem;color:var(--text-3);font-weight:700;padding:4px 0}
.dp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:14px}
.dp-day{min-height:36px;display:flex;align-items:center;justify-content:center;font-size:.85rem;border-radius:8px;cursor:pointer;transition:background .15s ease;-webkit-user-select:none;user-select:none;color:var(--text)}
.dp-day:empty{cursor:default}
.dp-day:not(:empty):not(.dp-day-disabled):hover{background:var(--blue-50)}
.dp-day.dp-day-today{font-weight:800;color:var(--blue)}
.dp-day.dp-day-disabled{color:var(--text-3);cursor:default}
.dp-day.dp-day-start,.dp-day.dp-day-end{background:var(--blue)!important;color:#fff!important;border-radius:8px!important}
.dp-day.dp-day-in-range{background:var(--blue-50);border-radius:0}
.dp-day.dp-day-start.dp-day-in-range{border-radius:8px 0 0 8px!important}
.dp-day.dp-day-end.dp-day-in-range{border-radius:0 8px 8px 0!important}
.dp-range{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.dp-range-field label{display:block;font-size:.72rem;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.dp-range-field input{width:100%;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;font-family:var(--font);font-size:.85rem;color:var(--text);outline:none}
.dp-actions{display:flex;justify-content:space-between;gap:10px}
.dp-btn-clear{background:none;border:1.5px solid var(--border);color:var(--text-2);padding:9px 20px;border-radius:100px;font-family:var(--font);font-size:.88rem;font-weight:600;cursor:pointer;transition:all var(--transition)}
.dp-btn-clear:hover{border-color:var(--blue);color:var(--blue-600)}
.dp-btn-apply{background:var(--blue);color:#fff;border:none;padding:9px 20px;border-radius:100px;font-family:var(--font);font-size:.88rem;font-weight:700;cursor:pointer;transition:all var(--transition)}
.dp-btn-apply:hover{background:var(--blue-600)}
.checkbox-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.9rem;color:var(--text-2);line-height:1.6;text-transform:none;letter-spacing:normal;font-weight:400}
.checkbox-label input[type="checkbox"]{width:18px;height:18px;flex-shrink:0;accent-color:var(--blue);margin-top:3px;cursor:pointer}

.bk-draft-note{background:var(--blue-50);border:1px solid var(--border-strong);border-left:4px solid var(--blue);border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:26px;font-size:.87rem;color:var(--text-2);line-height:1.65}
.bk-draft-note strong{color:var(--heading)}

/* ---------- Responsive ---------- */
@media(max-width:968px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .packages-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
  .contact-inner,.about-inner{grid-template-columns:1fr;gap:44px}
  .whyme-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .usp-grid{grid-template-columns:repeat(2,1fr);gap:18px 0;padding:18px 16px}
  .usp-item:nth-child(odd)::before{display:none}
  .review-card{flex-basis:calc((100% - 20px)/2)}
  .video-card{flex-basis:calc((100% - 22px)/2)}
  .social-follow-grid{grid-template-columns:1fr;max-width:400px}
  .booking-grid{grid-template-columns:1fr}
  .bk-summary{position:static}
}
@media(max-width:768px){
  /* USP-Leiste nur auf groesseren Bildschirmen – auf dem Handy zu gedraengt */
  .hero-usps{display:none}
  .booking-tool{padding:28px 20px}
  .progress-label{display:none}
  .progress-circle{width:28px;height:28px;font-size:.68rem}
  .progress-line{width:12px;margin:0 2px}
  .tile-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .extras-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .page-hero{padding:52px 20px 40px}
  .hamburger{display:flex}
  .mobile-book-btn{display:flex}
  .nav-book-cta,.nav-links{display:none}
  .hero-tags{display:none}
  .hero-box{padding:64px 16px;margin:0 10px}
  .gallery-outer{position:relative;display:block}
  .gallery-arrow{position:absolute;top:44%;transform:translateY(-50%);margin:0}
  .gallery-arrow-prev{left:2px}
  .gallery-arrow-next{right:2px}
  .cf-row{grid-template-columns:1fr;gap:0}
  .about-image{order:-1}
  .bk-grid2{grid-template-columns:1fr;gap:0}
  .bk-card{padding:24px 20px}
  .bk-option{flex-wrap:wrap}
  .bk-option-price{margin-left:34px;padding-left:0}
  .bk-option-price small{text-align:left}
}
@media(max-width:600px){
  .pkg-tile{padding:26px 16px 18px}
  .pkg-tile-price{position:static;display:block;margin-top:12px;text-align:right;font-size:1.15rem}
  .pkg-tile-badge{left:14px;font-size:.62rem;padding:3px 10px}
  .pkg-tile-features li{font-size:.77rem}
  .review-card{flex-basis:100%}
  .video-card{flex-basis:100%}
  .footer-grid{grid-template-columns:1fr}
  .footer-links-legal{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .footer-bottom{flex-direction:column;text-align:center}
  .footer-claim{letter-spacing:.16em;font-size:.66rem}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:10px;max-width:440px}
  .trust-card{padding:14px 8px}
  .trust-num-sm{font-size:.88rem;line-height:1.2}
  .trust-label{font-size:.7rem;margin-top:4px}
  .wa-float{bottom:16px;right:16px;width:54px;height:54px}
  .wa-float svg{width:26px;height:26px}
  .header{height:74px;padding:0 16px}
  .logo img{height:40px}
}
@media(max-width:440px){
  .hero-box h1{font-size:2rem}
  .tile-grid{grid-template-columns:1fr}
}

/* =========================================================
   Ergaenzungen fuer das helle Alaimo-Layout
   ========================================================= */

/* Vorher-/Nachher-Marker auf den Galeriebildern */
.gallery-frame{background:#eef3f8}
.ba-badge{position:absolute;top:12px;left:12px;z-index:3;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:100px;color:#fff;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.ba-vorher{background:#000000}
.ba-nachher{background:var(--blue)}

/* Videokarten auf hellem Grund */
.video-card{background:#fff}
.video-frame{background:#000}
.videos-hint a{font-weight:700}

/* Der Header traegt das Logo auf Weiss – etwas mehr Luft nach unten */
.header{border-bottom:1px solid var(--border)}
.logo img{height:52px}

/* Marken-Marquee etwas heller absetzen */
.brand-marquee{background:var(--bg-alt);border-top:1px solid var(--border)}

/* Abschnitte klar voneinander trennen, wenn zwei weisse aufeinandertreffen */
.about{border-top:1px solid var(--border)}
.gallery{border-top:1px solid var(--border)}
.videos{background:var(--bg-alt)}
.social-follow{border-top:1px solid var(--border)}

/* Mobiles Menue liegt jetzt auf Weiss */
.mobile-nav-overlay{border-top:1px solid var(--border)}
.mobile-nav-social{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.mobile-nav-social:hover{background:var(--blue-50)}

/* Formularfelder auf Weiss brauchen einen sichtbaren Rand */
.cf-status.ok{display:block;background:var(--blue-50);color:var(--text);border:1px solid var(--border-strong)}

@media(max-width:600px){
  .logo img{height:38px}
}

/* Logo im dunklen Footer: auf weisser Flaeche wie im Profilbild */
.footer-brand-chip{background:#fff;padding:12px 16px;border-radius:16px;line-height:0}
.footer-brand-chip img{height:52px}

/* Markenlogos auf Weiss etwas kraeftiger */
.brand-logo{opacity:.5}

/* Social: nur noch TikTok und Instagram – auch auf dem Handy nebeneinander */
.social-follow-grid{grid-template-columns:repeat(2,1fr);max-width:620px}
@media(max-width:600px){
  .social-follow-grid{gap:12px;max-width:100%}
  .social-follow-card{padding:22px 12px;gap:9px;border-radius:16px}
  .social-follow-icon{width:44px;height:44px}
  .social-follow-icon svg{width:22px;height:22px}
  .social-follow-name{font-size:1rem}
  .social-follow-handle{font-size:.72rem}
  .social-follow-cta{font-size:.76rem;padding:6px 14px}
  .social-follow-cta svg{width:11px;height:11px}
}

/* =========================================================
   ÜBERARBEITUNG: dunkler, hochwertiger Einstieg
   Der Hero und das Banner sind bewusst schwarz-blau wie der
   Flyer. Alles danach bleibt weiss.
   ========================================================= */

/* ---------- Hero: dunkel, mit Tiefe ---------- */
.hero{background:var(--ink) url('img/hero.webp') center 55%/cover no-repeat}
.hero::before{background:
   linear-gradient(180deg,rgba(9,12,16,.94) 0%,rgba(9,12,16,.80) 42%,rgba(6,10,15,.96) 100%),
   linear-gradient(100deg,rgba(0,101,175,.30) 0%,transparent 62%)}
.hero::after{background:
   radial-gradient(58% 46% at 50% 34%,rgba(0,101,175,.34) 0%,transparent 70%)}
.hero-box{max-width:960px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.72rem;font-weight:800;letter-spacing:.30em;text-transform:uppercase;color:var(--blue-light);margin-bottom:22px}
.hero-eyebrow::before,.hero-eyebrow::after{content:'';width:34px;height:1px;background:linear-gradient(90deg,transparent,rgba(159,205,236,.75))}
.hero-eyebrow::after{background:linear-gradient(90deg,rgba(159,205,236,.75),transparent)}
.hero-location-pill{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.20);color:#dbeaf8;box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-box h1{color:#fff;text-shadow:0 6px 44px rgba(0,0,0,.6)}
.hero-box h1 em{color:var(--blue-400)}
.hero-claim{color:var(--blue-light)}
.hero-box p{color:rgba(255,255,255,.80);text-shadow:0 2px 20px rgba(0,0,0,.55)}
.hero-tag{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-btn-outline{background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.34);color:#fff;box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-btn-outline:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff}
.hero-btn-primary{box-shadow:0 14px 40px rgba(0,101,175,.55)}

/* USP-Leiste im dunklen Hero */
.hero-usps{background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.14)}
.usp-item+.usp-item::before{background:rgba(255,255,255,.15)}
.usp-icon{background:rgba(0,101,175,.26);border:1px solid rgba(120,190,240,.42)}
.usp-icon svg{stroke:#bcdff7}
.usp-text{color:#fff}

/* Der weisse Header sitzt direkt ueber dem dunklen Hero */
.header{border-bottom:1px solid var(--border);background:rgba(255,255,255,.94)}

/* ---------- Kurzvorstellung direkt unter dem Hero ---------- */
.intro{padding:76px 0 8px;background:var(--bg)}
.intro-inner{max-width:940px;margin:0 auto;text-align:center}
.intro-kicker{font-size:.74rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.intro-lead{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:700;line-height:1.55;color:var(--heading);letter-spacing:-.01em;margin-bottom:18px}
.intro-lead b{color:var(--blue);font-weight:800}
.intro-text{font-size:1rem;line-height:1.85;color:var(--text-2);max-width:760px;margin:0 auto}
.intro-marks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.intro-mark{display:inline-flex;align-items:center;gap:8px;background:var(--bg-alt);border:1px solid var(--border);border-radius:100px;padding:9px 18px;font-size:.83rem;font-weight:700;color:var(--heading)}
.intro-mark svg{width:15px;height:15px;stroke:var(--blue);fill:none;flex-shrink:0}

/* ---------- Zielgruppen ---------- */
.zielgruppen{padding:92px 0;background:var(--bg-alt);border-top:1px solid var(--border)}
.zg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1120px;margin:44px auto 0}
.zg-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px 26px;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);overflow:hidden}
.zg-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--blue),var(--blue-400));opacity:0;transition:opacity var(--transition)}
.zg-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.zg-card:hover::before{opacity:1}
.zg-icon{width:52px;height:52px;border-radius:14px;background:var(--blue-50);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.zg-icon svg{width:25px;height:25px;stroke:var(--blue);fill:none}
.zg-title{font-size:1.06rem;font-weight:800;color:var(--heading);margin-bottom:7px}
.zg-desc{font-size:.89rem;line-height:1.7;color:var(--text-2)}
.zg-tag{display:inline-block;margin-top:14px;background:var(--blue-50);color:var(--blue-600);border:1px solid var(--border-strong);font-size:.71rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:100px}

/* ---------- Leistungskatalog (ohne Preise) ---------- */
.katalog{padding:96px 0;background:var(--bg)}
.katalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1080px;margin:44px auto 0}
.kat-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px 20px;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}
.kat-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.kat-icon{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:var(--blue-50);display:flex;align-items:center;justify-content:center}
.kat-icon svg{width:20px;height:20px;stroke:var(--blue);fill:none}
.kat-title{font-size:.97rem;font-weight:800;color:var(--heading);margin-bottom:4px}
.kat-desc{font-size:.85rem;line-height:1.65;color:var(--text-2)}
.katalog-note{max-width:900px;margin:32px auto 0;text-align:center;font-size:.92rem;line-height:1.8;color:var(--text-2)}
.katalog-note strong{color:var(--heading)}

/* ---------- Preise ganz unten ---------- */
.preise{padding:96px 0;background:var(--bg-alt);border-top:1px solid var(--border)}
.package-card.featured::after{content:'Alle Leistungen'}
.preis-hinweis{max-width:900px;margin:18px auto 0;text-align:center;font-size:.82rem;color:var(--text-3);line-height:1.7}

@media(max-width:968px){
  .zg-grid{grid-template-columns:repeat(2,1fr)}
  .katalog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .hero-eyebrow{letter-spacing:.22em;font-size:.66rem}
  .hero-eyebrow::before,.hero-eyebrow::after{width:20px}
  .intro{padding:60px 0 4px}
}
@media(max-width:600px){
  .zg-grid{grid-template-columns:1fr;max-width:440px}
  .katalog-grid{grid-template-columns:1fr;max-width:440px}
    }

/* Abschnitte sauber abwechseln: weiss – hell – weiss – hell */
.zielgruppen{background:var(--bg)}
.katalog{background:var(--bg-alt);border-top:1px solid var(--border)}
.ablauf{background:var(--bg)}
.reviews{background:var(--bg)}

/* Lange deutsche Komposita duerfen auf dem Handy trennen */
.hero-box h1{font-size:clamp(1.95rem,6.2vw,4.2rem);overflow-wrap:break-word}
@media(max-width:600px){
  .hero-claim{letter-spacing:.09em;font-size:.8rem}
  .hero-box h1{font-size:1.95rem;line-height:1.1}
}
@media(max-width:440px){
  .hero-box h1{font-size:1.72rem}
  .hero-claim{letter-spacing:.06em}
}

/* Zielgruppen-Chips im Hero sind jetzt Inhalt, nicht Deko – auch auf dem Handy zeigen */
@media(max-width:768px){
  .hero-tags{display:flex;gap:8px;margin-bottom:28px}
  .hero-tag{padding:6px 14px;font-size:.74rem}
}

/* Nach dem Verschieben der Preise: Flaechenwechsel neu ordnen
   weiss – hell – weiss – hell, damit keine zwei gleichen Abschnitte
   aufeinandertreffen. Reihenfolge:
   Intro/Über uns (weiss) · Unterschied (hell) · Für wen (weiss) ·
   Preise (hell) · Leistungen (weiss) · Ablauf (hell) · Banner (dunkel) ·
   Ergebnisse (hell) · Videos (weiss) · Kundenstimmen (hell) ·
   Social (weiss) · Kontakt (hell) · Footer (schwarz) */
.katalog{background:var(--bg);border-top:none}
.ablauf{background:var(--bg-alt)}
.gallery{background:var(--bg-alt);border-top:none}
.videos{background:var(--bg)}
.reviews{background:var(--bg-alt)}
.social-follow{background:var(--bg)}

/* =========================================================
   LIVE-AUSBAU – Marke: Blau #0065AF · Weiss #FFFFFF · Schwarz #000000
   Weiss bleibt die Grundflaeche, aber es gibt mehrere bewusst
   schwarze Baender, damit die Seite nicht durchgehend hell wirkt.
   ========================================================= */

/* ---------- Gemeinsame Basis fuer alle schwarzen Abschnitte ---------- */
.dark-band{position:relative;background:#000;color:rgba(255,255,255,.76);overflow:hidden}
.dark-band::before{content:'';position:absolute;inset:0;background:
   radial-gradient(70% 60% at 12% 0%,rgba(0,101,175,.30) 0%,transparent 64%),
   radial-gradient(60% 70% at 92% 100%,rgba(0,101,175,.20) 0%,transparent 66%);
   pointer-events:none}
.dark-band::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 70% at 92% 100%,rgba(0,101,175,.14) 0%,transparent 66%);pointer-events:none}
.dark-band>*{position:relative;z-index:2}
.dark-band .section-label{color:var(--blue-light)}
.dark-band .section-title{color:#fff}
.dark-band .section-title span{color:var(--blue-400)}
.dark-band .section-subtitle{color:rgba(255,255,255,.66)}

/* ---------- Mein Anspruch ---------- */
.anspruch{padding:100px 0}
.anspruch-kopf{max-width:820px;margin:0 auto 52px;text-align:center}
.anspruch-zitat{font-size:clamp(1.4rem,3.2vw,2.1rem);font-weight:800;line-height:1.4;color:#fff;letter-spacing:-.01em;margin-bottom:18px}
.anspruch-zitat span{color:var(--blue-400)}
.anspruch-text{font-size:1rem;line-height:1.85;color:rgba(255,255,255,.70)}
.anspruch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto}
.anspruch-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:30px 26px;transition:background var(--transition),border-color var(--transition),transform var(--transition)}
.anspruch-card:hover{background:rgba(255,255,255,.08);border-color:rgba(0,101,175,.55);transform:translateY(-4px)}
.anspruch-num{font-size:.72rem;font-weight:800;letter-spacing:.22em;color:var(--blue-400);margin-bottom:14px}
.anspruch-title{font-size:1.1rem;font-weight:800;color:#fff;margin-bottom:9px}
.anspruch-desc{font-size:.91rem;line-height:1.75;color:rgba(255,255,255,.68)}
.anspruch-desc em{font-style:normal;color:#fff;font-weight:600}
.anspruch-signatur{max-width:1080px;margin:40px auto 0;text-align:center;font-size:.8rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* ---------- So einfach geht's: fuenf Schritte ---------- */
.schritte{padding:100px 0}
.schritte-liste{max-width:900px;margin:52px auto 0;display:flex;flex-direction:column;gap:0}
.schritt{position:relative;display:grid;grid-template-columns:92px 1fr;gap:26px;padding:28px 0;border-top:1px solid rgba(255,255,255,.12)}
.schritt:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.schritt-nr{font-size:2.3rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.34);letter-spacing:-.03em;transition:color var(--transition),-webkit-text-stroke-color var(--transition)}
.schritt:hover .schritt-nr{color:var(--blue-400);-webkit-text-stroke-color:var(--blue-400)}
.schritt-titel{font-size:1.12rem;font-weight:800;color:#fff;letter-spacing:.02em;margin-bottom:8px}
.schritt-text{font-size:.94rem;line-height:1.8;color:rgba(255,255,255,.68)}
.schritt-text em{font-style:normal;color:#fff;font-weight:600}

/* ---------- Fahrzeugklassen / Aufpreise ---------- */


/* ---------- Ergebnisse als Raster statt Karussell ---------- */
.ergebnis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1120px;margin:44px auto 0}
.erg-figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition)}
.erg-figure:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.erg-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.erg-figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;font-size:.86rem;font-weight:600;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82))}
.erg-badge{position:absolute;top:12px;left:12px;z-index:2;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:100px;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.erg-vorher{background:#000}
.erg-nachher{background:var(--blue)}
.erg-paar{background:linear-gradient(90deg,#000 0 50%,var(--blue) 50% 100%)}

/* ---------- Haeufige Fragen ---------- */
.faq{padding:96px 0;background:var(--bg)}
.faq-liste{max-width:860px;margin:44px auto 0;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-frage{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;text-align:left;font-family:var(--font);font-size:1.02rem;font-weight:700;color:var(--heading);transition:color var(--transition)}
.faq-frage:hover{color:var(--blue)}
.faq-icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;transition:background var(--transition),transform var(--transition),border-color var(--transition)}
.faq-icon svg{width:14px;height:14px;stroke:var(--blue);fill:none;stroke-width:2.5}
.faq-item.offen .faq-icon{background:var(--blue);border-color:var(--blue);transform:rotate(45deg)}
.faq-item.offen .faq-icon svg{stroke:#fff}
.faq-antwort{overflow:hidden;max-height:0;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
.faq-antwort p{padding:0 4px 22px;font-size:.94rem;line-height:1.85;color:var(--text-2);max-width:720px}
@media(prefers-reduced-motion:reduce){.faq-antwort{transition:none}}

/* ---------- Abschluss-CTA ---------- */
.schluss{padding:96px 0}
.schluss-inner{max-width:820px;margin:0 auto;text-align:center}
.schluss h2{font-size:clamp(1.8rem,4.2vw,2.8rem);font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1.15;margin-bottom:18px}
.schluss h2 span{color:var(--blue-400)}
.schluss-lead{font-size:1.08rem;font-weight:700;color:#fff;margin-bottom:14px}
.schluss p{font-size:.98rem;line-height:1.85;color:rgba(255,255,255,.70);margin:0 auto 10px;max-width:640px}
.schluss-nein{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:24px 0 30px}
.schluss-nein span{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:8px 16px;font-size:.84rem;font-weight:600;color:#fff}
.schluss-nein svg{width:14px;height:14px;stroke:var(--blue-400);fill:none;stroke-width:2.5}
.schluss-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-wa{display:inline-flex;align-items:center;gap:10px;background:#25d366;color:#fff;font-weight:800;font-size:1rem;padding:16px 34px;border-radius:100px;transition:all var(--transition);box-shadow:0 12px 32px rgba(37,211,102,.32)}
.btn-wa:hover{background:#1fb855;color:#fff;transform:translateY(-2px)}
.btn-wa svg{width:20px;height:20px;fill:currentColor}

@media(max-width:968px){
  .anspruch-grid{grid-template-columns:1fr;max-width:520px}
  .ergebnis-grid{grid-template-columns:repeat(2,1fr)}
    }
@media(max-width:600px){
  .ergebnis-grid{grid-template-columns:1fr;max-width:420px}
  .anspruch,.schritte,.schluss{padding:70px 0}
  .schritt{grid-template-columns:62px 1fr;gap:16px;padding:22px 0}
  .schritt-nr{font-size:1.8rem}
      .faq-frage{font-size:.95rem;padding:18px 2px}
}

/* Endgueltiger Flaechenwechsel der Live-Fassung:
   Hero schwarz · Markenband hell · Vorstellung weiss · Mein Anspruch SCHWARZ ·
   Fahrzeuge weiss · Preise hell · Leistungen weiss · Ablauf SCHWARZ ·
   Ergebnisse weiss · Videos hell · Fragen weiss · Social hell ·
   Abschluss SCHWARZ · Kontakt weiss · Footer schwarz */
.gallery{background:var(--bg);border-top:none}
.videos{background:var(--bg-alt)}
.faq{background:var(--bg)}
.social-follow{background:var(--bg-alt);border-top:none}
.contact{background:var(--bg)}

/* Hero: das Bild soll sichtbar bleiben – weniger Schleier als beim Entwurf */
.hero{background-position:center 62%}
.hero::before{background:
   linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.52) 44%,rgba(0,0,0,.90) 100%),
   linear-gradient(100deg,rgba(0,101,175,.34) 0%,transparent 60%)}
.hero::after{background:
   radial-gradient(56% 44% at 50% 36%,rgba(0,0,0,.42) 0%,transparent 72%)}

/* Vier Fahrzeugarten stehen im 2x2-Raster besser als 3+1 */
.zg-grid{grid-template-columns:repeat(2,1fr);max-width:920px}
@media(max-width:700px){.zg-grid{grid-template-columns:1fr;max-width:440px}}

/* Der Hero endet exakt an der Bildschirmkante – der Header ist das einzige,
   was darueber liegt. Unter 600px ist der Header 10px niedriger. */
@media(max-width:600px){:root{--chrome-h:74px}}

/* ---------- Formular: Honigtopf, Einwilligung, Status ---------- */
.cf-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-check{display:flex;align-items:flex-start;gap:10px;margin:4px 0 16px;font-size:.84rem;line-height:1.65;color:var(--text-2);cursor:pointer}
.cf-check input[type="checkbox"]{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--blue);cursor:pointer}
.cf-check a{font-weight:700}
.cf-btn[disabled]{opacity:.6;cursor:progress}
.cf-status{margin-top:14px;font-size:.88rem;line-height:1.65;padding:12px 15px;border-radius:10px;display:none}
.cf-status.ok{display:block;background:rgba(46,125,50,.08);color:#1f5c23;border:1px solid rgba(46,125,50,.35)}
.cf-status.fehler{display:block;background:#fdecea;color:#a3271b;border:1px solid #f3bdb6}
.cf-status.info{display:block;background:var(--blue-50);color:var(--text);border:1px solid var(--border-strong)}
.cf-status a{font-weight:700}

/* =========================================================
   Vorher/Nachher-Schieber
   Zwei Bilder uebereinander, das obere wird beschnitten.
   Der Griff in der Mitte laesst sich ziehen – per Maus,
   Finger, Klick auf die Buehne oder Pfeiltasten.
   ========================================================= */
.vn{max-width:960px;margin:40px auto 0}
.vn-buehne{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow);cursor:ew-resize;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.vn-buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:opacity .35s ease}
.vn-vorher{position:absolute;inset:0;width:50%;overflow:hidden;will-change:width}
/* Das innere Bild behaelt die volle Buehnenbreite, sonst wuerde es gestaucht */
.vn-vorher img{width:var(--vn-breite,960px);max-width:none}

.vn-marke{position:absolute;top:14px;z-index:3;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:7px 15px;border-radius:100px;color:#fff;pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .25s ease}
.vn-m-vorher{left:14px;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.22)}
.vn-m-nachher{right:14px;background:rgba(0,101,175,.88);border:1px solid rgba(255,255,255,.26)}

/* Griff */
.vn-griff{position:absolute;top:0;bottom:0;left:50%;z-index:4;width:56px;transform:translateX(-50%);background:none;border:none;padding:0;cursor:ew-resize;display:flex;align-items:center;justify-content:center;will-change:left}
.vn-griff::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.55)}
.vn-knopf{position:relative;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 6px 22px rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;gap:3px;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.vn-buehne:hover .vn-knopf,.vn-griff:focus-visible .vn-knopf{transform:scale(1.08)}
.vn-knopf svg{width:15px;height:15px;stroke:var(--blue);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* Die Pfeile wippen leicht, damit man sieht: hier kann man ziehen */
.vn-knopf svg:first-child{animation:vn-links 2.4s ease-in-out infinite}
.vn-knopf svg:last-child{animation:vn-rechts 2.4s ease-in-out infinite}
@keyframes vn-links {0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
@keyframes vn-rechts{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.vn-buehne.zieht .vn-knopf svg{animation:none}

/* Einmaliger Hinweis beim ersten Sichtbarwerden */
.vn-buehne.zeigen .vn-vorher{animation:vn-hinweis 2.1s cubic-bezier(.4,0,.2,1) .25s 1}
.vn-buehne.zeigen .vn-griff{animation:vn-hinweis-griff 2.1s cubic-bezier(.4,0,.2,1) .25s 1}
@keyframes vn-hinweis{0%{width:50%}28%{width:68%}62%{width:34%}100%{width:50%}}
@keyframes vn-hinweis-griff{0%{left:50%}28%{left:68%}62%{left:34%}100%{left:50%}}
@media(prefers-reduced-motion:reduce){
  .vn-buehne.zeigen .vn-vorher,.vn-buehne.zeigen .vn-griff{animation:none}
  .vn-knopf svg{animation:none}
}

/* Umschalter fuer die Paare */
.vn-wahl{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.vn-tab{background:#fff;border:1.5px solid var(--border);color:var(--text-2);font-family:var(--font);font-size:.86rem;font-weight:700;padding:10px 20px;border-radius:100px;cursor:pointer;transition:all var(--transition)}
.vn-tab:hover{border-color:var(--border-strong);color:var(--blue-600)}
.vn-tab.aktiv{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(0,101,175,.26)}
.vn-titel{text-align:center;font-size:.95rem;font-weight:700;color:var(--heading);margin-top:16px}


@media(max-width:700px){
  .vn{margin-top:28px}
  .vn-knopf{width:44px;height:44px}
  .vn-tab{font-size:.78rem;padding:8px 15px}
  }

/* Dieselbe Icon-Sprache fuer die haeufigen Fragen */
.faq-icon{border:1.5px solid var(--border-strong)}
.faq-item.offen .faq-icon{transform:none}

/* Scroll-Einblendung etwas ruhiger und gestaffelt (wie in der Vorlage) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-delay-2{transition-delay:.09s}
.reveal-delay-3{transition-delay:.18s}

/* Montserrat laeuft breiter als Inter – Hero-Titel entsprechend nachziehen,
   damit die Zeile "Aufbereitet, wo du bist." wieder einzeilig bleibt. */
.hero-box{max-width:1080px}
.hero-box h1{font-size:clamp(1.8rem,5.4vw,3.65rem);letter-spacing:-.025em}
.hero-claim{font-size:clamp(.78rem,1.9vw,.94rem);letter-spacing:.13em}
.section-title{letter-spacing:-.025em}
@media(max-width:600px){
  .hero-box h1{font-size:1.72rem}
  .hero-claim{letter-spacing:.07em}
}
@media(max-width:440px){
  .hero-box h1{font-size:1.52rem}
}

/* Haupt-Handlungsaufruf auf den dunklen Flaechen */
.btn-buchen{display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#fff;font-weight:800;font-size:1rem;padding:16px 34px;border-radius:100px;transition:all var(--transition);box-shadow:0 12px 32px rgba(0,101,175,.4)}
.btn-buchen:hover{background:var(--blue-600);color:#fff;transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,101,175,.5)}
.btn-buchen svg{width:19px;height:19px}

/* Kompakter Footer: Marke links, drei schmale Spalten rechts */
.footer{padding:52px 0 0}
.footer-grid{grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:34px;padding-bottom:30px}
.footer-marke{max-width:300px}
.footer-brand-chip img{height:44px}
.footer-brand-desc{font-size:.85rem;line-height:1.7;margin-bottom:16px;max-width:280px}
.footer-col-title{margin-bottom:12px}
.footer-col-links{gap:8px}
.footer-bottom{padding:16px 0 20px;border-top:1px solid rgba(255,255,255,.12)}
.footer-links-legal{display:block}
@media(max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-marke{grid-column:1/-1;max-width:none}
}
@media(max-width:600px){
  .footer{padding:40px 0 0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
}

/* Akkordeon-Symbol: Pfeil nach unten, der sich beim Oeffnen nach oben dreht */
.faq-icon,.akk-icon{position:relative;flex-shrink:0;width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;
  transition:background var(--transition),border-color var(--transition),transform var(--transition)}
.faq-icon svg,.akk-icon svg{width:15px;height:15px;stroke:var(--blue);fill:none;stroke-width:2.4;
  transition:transform .35s cubic-bezier(.4,0,.2,1),stroke var(--transition)}
.faq-frage:hover .faq-icon,.akk-kopf:hover .akk-icon{border-color:var(--blue)}
.faq-item.offen .faq-icon,.akk-item.offen .akk-icon{background:var(--blue);border-color:var(--blue);transform:none}
.faq-item.offen .faq-icon svg,.akk-item.offen .akk-icon svg{stroke:#fff;transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.faq-icon svg,.akk-icon svg{transition:none}}

/* ---------- Fahrzeugkarten: Pills sitzen alle auf gleicher Hoehe ---------- */
.zg-grid{align-items:stretch}
.zg-card{display:flex;flex-direction:column}
.zg-desc{flex:1}
.zg-tag{align-self:flex-start;margin-top:18px}

/* ---------- Footer: Agenturnachweis in Markenblau ---------- */
.footer-credit a{color:var(--blue-400);font-weight:800;transition:color var(--transition)}
.footer-credit a:hover{color:#fff}

/* =========================================================
   Ablauf als Zickzack-Zeitstrahl
   Desktop: Schritt 1 links, 2 rechts, 3 links … Die Linie in
   der Mitte fuellt sich beim Scrollen, die Knoten schalten um.
   Handy: Linie links, alle Karten rechts daneben.
   ========================================================= */
.zs-strahl{position:relative;max-width:1020px;margin:54px auto 0}
.zs-linie{position:absolute;left:50%;top:18px;bottom:18px;width:2px;transform:translateX(-50%);
  background:rgba(255,255,255,.16);border-radius:2px;z-index:1}
.zs-fuellung{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--blue-700) 0%,var(--blue) 55%,var(--blue-400) 100%);
  box-shadow:0 0 18px rgba(0,101,175,.55);transition:height .15s linear}

.zs-schritte{position:relative;z-index:2;display:flex;flex-direction:column;gap:34px}
.zs-schritt{display:grid;grid-template-columns:1fr 104px 1fr;align-items:center}

.zs-knoten{grid-column:2;grid-row:1;justify-self:center;width:58px;height:58px;border-radius:50%;
  background:#000;border:2px solid rgba(255,255,255,.22);color:rgba(255,255,255,.45);
  font-weight:900;font-size:.95rem;display:flex;align-items:center;justify-content:center;
  transition:all .45s cubic-bezier(.4,0,.2,1)}
.zs-knoten.erreicht{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 0 0 6px rgba(0,101,175,.16),0 8px 26px rgba(0,101,175,.5);transform:scale(1.06)}

.zs-karte{position:relative;grid-row:1;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:24px 26px;
  transition:transform var(--transition),border-color var(--transition),background var(--transition)}
.zs-karte:hover{transform:translateY(-4px);background:rgba(255,255,255,.08);border-color:rgba(0,101,175,.55)}
.zs-schritt:nth-child(odd)  .zs-karte{grid-column:1;text-align:right;margin-right:24px}
.zs-schritt:nth-child(even) .zs-karte{grid-column:3;text-align:left;margin-left:24px}
/* feiner Steg von der Karte zur Linie */
.zs-karte::after{content:'';position:absolute;top:50%;width:24px;height:1px;background:rgba(255,255,255,.18)}
.zs-schritt:nth-child(odd)  .zs-karte::after{right:-24px}
.zs-schritt:nth-child(even) .zs-karte::after{left:-24px}
.zs-karte h4{font-size:1.08rem;font-weight:800;color:#fff;margin-bottom:9px;letter-spacing:-.01em}
.zs-karte p{font-size:.93rem;line-height:1.8;color:rgba(255,255,255,.68)}
.zs-karte em{font-style:normal;color:#fff;font-weight:600}

@media(max-width:860px){
  /* Linie an den linken Rand, alle Karten rechts daneben */
  .zs-strahl{margin-top:40px}
  .zs-linie{left:27px;transform:none}
  .zs-schritte{gap:20px}
  .zs-schritt{grid-template-columns:56px 1fr}
  .zs-knoten{grid-column:1;width:56px;height:56px;font-size:.88rem}
  .zs-schritt:nth-child(odd) .zs-karte,
  .zs-schritt:nth-child(even) .zs-karte{grid-column:2;text-align:left;margin:0 0 0 20px}
  .zs-schritt:nth-child(odd) .zs-karte::after,
  .zs-schritt:nth-child(even) .zs-karte::after{right:auto;left:-20px;width:20px}
  .zs-karte{padding:20px 22px}
}
@media(prefers-reduced-motion:reduce){.zs-knoten,.zs-fuellung{transition:none}}

/* ---------- Vorstellung: Text links, Arbeitsfotos rechts ---------- */
.intro{padding:88px 0 76px}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;max-width:1160px;margin:0 auto}
.intro-text-spalte{text-align:left}
.intro-kicker{text-align:left}
.intro-lead{font-size:clamp(1.35rem,2.9vw,2rem);font-weight:800;line-height:1.35;margin-bottom:20px}
.intro-text{font-size:.98rem;line-height:1.85;color:var(--text-2);max-width:none;margin:0 0 28px}

.intro-fakten{list-style:none;display:flex;flex-direction:column;gap:16px;margin-bottom:30px}
.intro-fakten li{display:flex;align-items:center;gap:14px}
.if-icon{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--blue-50);
  border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center}
.if-icon svg{width:19px;height:19px;stroke:var(--blue);fill:none}
.intro-fakten b{display:block;font-size:.95rem;font-weight:800;color:var(--heading);line-height:1.3}
.intro-fakten span:last-child{font-size:.84rem;color:var(--text-3)}
.intro-cta{box-shadow:0 10px 26px rgba(0,101,175,.3)}

/* Zwei versetzte Bilder – das kleine ueberlappt das grosse */
.intro-bild-spalte{position:relative;padding-bottom:54px;padding-left:34px}
.intro-bild{position:relative;margin:0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
.intro-bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.intro-bild figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;
  font-size:.82rem;font-weight:600;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82))}
.intro-bild-klein{position:absolute;left:0;bottom:0;width:48%;border:4px solid #fff;border-radius:16px}
.intro-bild-klein img{aspect-ratio:4/3}

@media(max-width:900px){
  .intro{padding:64px 0 56px}
  .intro-grid{grid-template-columns:1fr;gap:40px}
  .intro-bild-spalte{order:-1;padding-left:0;padding-bottom:0;max-width:520px;margin:0 auto}
  .intro-bild-klein{display:none}
}

/* ---------- Mein Anspruch: Wertekarten mit Geisterziffer ---------- */
.anspruch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto}
.wert-karte{position:relative;overflow:hidden;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:34px 28px 30px;
  transition:background var(--transition),border-color var(--transition),transform var(--transition)}
.wert-karte::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-400));transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
.wert-karte:hover{background:rgba(255,255,255,.075);border-color:rgba(0,101,175,.6);transform:translateY(-5px)}
.wert-karte:hover::before{transform:scaleX(1)}
/* grosse, blasse Ziffer im Hintergrund */
.wert-nr{position:absolute;right:14px;bottom:-16px;font-size:5.2rem;font-weight:900;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09);pointer-events:none;
  transition:-webkit-text-stroke-color .45s ease}
.wert-karte:hover .wert-nr{-webkit-text-stroke-color:rgba(0,101,175,.5)}
.wert-icon{position:relative;display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:14px;margin-bottom:18px;
  background:rgba(0,101,175,.2);border:1px solid rgba(120,190,240,.34)}
.wert-icon svg{width:23px;height:23px;stroke:#bcdff7;fill:none}
.wert-titel{position:relative;font-size:1.12rem;font-weight:800;color:#fff;margin-bottom:9px}
.wert-text{position:relative;font-size:.93rem;line-height:1.78;color:rgba(255,255,255,.68)}
.wert-text em{font-style:normal;color:#fff;font-weight:600}

@media(max-width:860px){.anspruch-grid{grid-template-columns:1fr;max-width:520px}}

/* Bildunterschrift nach rechts – links liegt das ueberlappende zweite Bild */
.intro-bild figcaption{text-align:right;padding-right:20px}

/* =========================================================
   Fahrzeugauswahl im Buchungsformular
   Je Klasse eine Zeile: Bild links, Name und Beispielmodelle
   in der Mitte, Preis rechts.
   ========================================================= */
.fz-liste{display:flex;flex-direction:column;gap:10px}
/* Zeilen ohne Bild (die drei Anfrage-Klassen) wuerden sonst deutlich
   flacher ausfallen als die Privatklassen mit Fahrzeugbild. */
.fz-zeile{min-height:94px;display:flex;align-items:center;gap:18px;width:100%;text-align:left;
  background:var(--card);border:1.5px solid var(--border);border-radius:14px;
  padding:12px 20px 12px 12px;cursor:pointer;font-family:var(--font);
  transition:border-color var(--transition),background var(--transition),box-shadow var(--transition),transform var(--transition)}
.fz-zeile:hover{border-color:var(--border-strong);background:var(--blue-50);transform:translateY(-2px)}
.fz-zeile.selected{border-color:var(--blue);background:var(--blue-50);box-shadow:0 0 0 3px rgba(0,101,175,.12)}

/* Weisser Chip – so sitzen freigestellte und weiss hinterlegte Bilder gleich */
.fz-bild{flex-shrink:0;width:112px;height:70px;border-radius:10px;background:#fff;
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden}
.fz-bild img{width:100%;height:100%;object-fit:contain;display:block}

.fz-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fz-name{font-size:1rem;font-weight:800;color:var(--heading);letter-spacing:-.01em}
.fz-beispiel{font-size:.8rem;color:var(--text-3);line-height:1.5}
.fz-preis{flex-shrink:0;font-size:1.05rem;font-weight:900;color:var(--blue);white-space:nowrap}
.fz-zeile.selected .fz-preis{color:var(--blue-600)}

@media(max-width:600px){
  .fz-zeile{min-height:74px;gap:13px;padding:10px 14px 10px 10px}
  .fz-bild{width:84px;height:54px}
  .fz-name{font-size:.92rem}
  .fz-beispiel{font-size:.74rem}
  .fz-preis{font-size:.95rem}
}

/* =========================================================
   Zwei-Fahrzeuge-Aktion – eigenstaendiges Band zwischen
   Preisen und Leistungen, bewusst wie eine Aktion aufgebaut.
   ========================================================= */
.aktion{padding:86px 0}
.aktion-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;max-width:1060px;margin:0 auto}

.aktion-kennzeichen{display:inline-block;background:var(--blue);color:#fff;font-size:.68rem;
  font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:6px 16px;border-radius:100px;margin-bottom:20px}
.aktion-text h2{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:900;color:#fff;
  line-height:1.2;letter-spacing:-.025em;margin-bottom:16px}
.aktion-text h2 span{color:var(--blue-400)}
.aktion-text p{font-size:1rem;line-height:1.8;color:rgba(255,255,255,.72);margin-bottom:28px;max-width:470px}
.aktion-text p b{color:#fff;font-weight:800}
.aktion-cta{box-shadow:0 12px 32px rgba(0,101,175,.45)}

/* Rechnung als Beleg */
.aktion-rechnung{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:18px;padding:28px 30px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ar-kopf{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-light);padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.14)}
.ar-zeile{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:11px 0;font-size:.94rem;color:rgba(255,255,255,.72)}
.ar-zeile b{color:#fff;font-weight:700;white-space:nowrap}
.ar-rabatt{color:var(--blue-light)}
.ar-rabatt b{color:var(--blue-400)}
.ar-summe{display:flex;align-items:baseline;justify-content:flex-end;gap:14px;
  margin-top:10px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.ar-alt{font-size:1.1rem;font-weight:700;color:rgba(255,255,255,.42);text-decoration:line-through}
.ar-neu{font-size:2.5rem;font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1}

.aktion-bedingung{max-width:1060px;margin:34px auto 0;text-align:center;
  font-size:.84rem;line-height:1.8;color:rgba(255,255,255,.5)}
.aktion-bedingung a{color:var(--blue-light);font-weight:700}

@media(max-width:900px){
  .aktion{padding:64px 0}
  .aktion-inner{grid-template-columns:1fr;gap:34px}
  .aktion-text p{max-width:none}
}
@media(max-width:600px){
  .aktion-rechnung{padding:22px 20px}
  .ar-neu{font-size:2.1rem}
}



.extra-tile{gap:13px}

@media(max-width:600px){
}

/* ---------- Wortmarke neben dem Logo ----------
   Ohne den Namen weiss ein neuer Besucher nicht, auf wessen Seite er ist.
   Der Name steht als echter Text da – gut fuer Screenreader und Suche. */
.logo{gap:13px}
.logo-wort{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
.lw-name{font-size:1.28rem;font-weight:900;color:var(--blue);text-transform:uppercase;letter-spacing:.005em}
.lw-zusatz{font-size:.63rem;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.235em;margin-top:5px}

@media(max-width:860px){
  .lw-name{font-size:1.12rem}
  .lw-zusatz{font-size:.57rem;letter-spacing:.21em;margin-top:4px}
}
@media(max-width:600px){
  .logo{gap:9px}
  .lw-name{font-size:.98rem}
  .lw-zusatz{font-size:.5rem;letter-spacing:.18em;margin-top:3px}
}
/* Erst auf sehr schmalen Geraeten weicht der Schriftzug dem Menue */
@media(max-width:340px){
  .logo-wort{display:none}
}

/* ---------- Mobiles Menü: kurz halten ---------- */
.mobile-nav-links{gap:18px;margin-bottom:34px}
.mobile-nav-links a{font-size:1.5rem;font-weight:800;letter-spacing:-.015em}
.mobile-nav-book-btn{margin-bottom:28px}
.mobile-nav-socials{gap:14px}

/* Im offenen Menü steht "Termin buchen" gross – der Header-Knopf kann weg */
.menue-offen .mobile-book-btn{opacity:0;pointer-events:none;transition:opacity .2s ease}
.intro-claim{font-size:1rem;font-weight:800;color:var(--blue);margin:0 0 26px;letter-spacing:-.005em}
.intro-btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Zusatzleistungen als Tabelle ---------- */
.zusatz-tabelle{max-width:620px;margin:34px auto 0;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.zt-kopf{padding:20px 26px 16px;border-bottom:1px solid var(--border)}
.zt-kopf h4{font-size:1.05rem;font-weight:800;color:var(--heading)}
.zt-kopf p{font-size:.85rem;color:var(--text-3);margin-top:3px}
.zusatz-tabelle table{width:100%;border-collapse:collapse}
.zusatz-tabelle td{padding:14px 26px;font-size:.95rem;color:var(--text-2);
  border-bottom:1px solid var(--border)}
.zusatz-tabelle tr:last-child td{border-bottom:none}
.zusatz-tabelle td:last-child{text-align:right;white-space:nowrap}
.zusatz-tabelle b{color:var(--blue);font-weight:800;font-size:1rem}
.zt-fuss{display:flex;align-items:center;gap:10px;padding:16px 26px;
  background:var(--blue-50);border-top:1px solid var(--border);
  font-size:.88rem;color:var(--text-2)}
.zt-fuss strong{color:var(--heading);font-weight:800}
.zt-fuss svg{width:17px;height:17px;flex-shrink:0;stroke:var(--blue);fill:none}
@media(max-width:600px){
  .zusatz-tabelle td{padding:12px 18px;font-size:.88rem}
  .zt-kopf,.zt-fuss{padding-left:18px;padding-right:18px}
}

/* =========================================================
   CARBON-FASSUNG
   Die Seite laeuft jetzt auf dunklem Grund. Hier stehen alle
   Korrekturen fuer Bausteine, die vorher Weiss vorausgesetzt
   haben. Die Abschnitte sind halbtransparent, damit die
   Carbon-Struktur des body durchscheint.
   ========================================================= */

/* ---- Abschnittsflaechen: zwei Tiefen statt Weiss/Hellgrau ---- */
.intro,.zielgruppen,.katalog,.gallery,.faq,.contact,.social-follow,
.preise,.videos,.brand-marquee{background:transparent}
.zielgruppen,.katalog,.videos,.social-follow{background:rgba(255,255,255,.022)}
.preise{background:rgba(255,255,255,.022);border-top:1px solid var(--border)}
.brand-marquee{background:rgba(0,0,0,.4);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.contact{background:rgba(255,255,255,.022)}
.anspruch,.schritte,.schluss,.aktion{background:rgba(0,0,0,.55)}
.dark-band::after{opacity:.5}

/* Markenlogos leuchten jetzt hell statt schwarz */
.brand-logo{filter:brightness(0) invert(1);opacity:.3}
.brand-logo:hover{opacity:.7}

/* ---- Header ---- */
.header{background:rgba(10,10,10,.88);border-bottom:1px solid var(--border)}
.header.scrolled{background:rgba(10,10,10,.97);box-shadow:0 8px 30px rgba(0,0,0,.6)}
.lw-zusatz{color:#fff}
.nav-links a{color:var(--text)}
.hamburger span{background:#fff}

/* ---- Mobiles Menue ---- */
.mobile-nav-overlay{background:#0b0b0b;border-top:1px solid var(--border)}
.mobile-nav-links a{color:#fff}
.mobile-nav-social{background:rgba(255,255,255,.06);border:1px solid var(--border);box-shadow:none}
.mobile-nav-social:hover{background:var(--blue-50)}
.mobile-nav-social svg{fill:#fff}

/* ---- Karten und Chips, die vorher weiss waren ---- */
.zg-card,.kat-card,.video-card,.zusatz-tabelle,.package-card,.whyme-card,
.trust-card,.ablauf-card,.contact-info-card,.contact-form-card,.review-card{
  background:var(--card);border-color:var(--border)}
.zg-card:hover,.kat-card:hover{background:rgba(255,255,255,.07)}
.hero-tag,.hero-location-pill,.hero-btn-outline,.btn-outline,.pkg-btn,.vn-tab,.intro-mark{
  background:rgba(255,255,255,.06);border-color:var(--border);color:var(--text);box-shadow:none}
.hero-tag,.hero-location-pill{color:#fff}
.btn-outline:hover,.pkg-btn:hover,.vn-tab:hover,.hero-btn-outline:hover{
  background:var(--blue-50);border-color:var(--border-strong);color:#fff}
.vn-tab{color:var(--text-2)}
.vn-tab.aktiv{background:var(--blue);border-color:var(--blue);color:#fff}
.if-icon,.zg-icon,.kat-icon,.pkg-icon-wrap,.whyme-icon,.about-hl-icon{
  background:var(--blue-50);border-color:var(--border-strong)}

/* ---- Schrift auf dunklem Grund ---- */
.section-title,.zg-title,.kat-title,.package-title,.video-title,.faq-frage,
.akk-titel,.zt-kopf h4,.contact-title,.intro-lead,.fz-name,.step-title,
.package-price-tag,.trust-num-sm,.whyme-title,.ablauf-card h4,.review-name,
.ci-value,.legal h1,.legal h2,.page-hero h1{color:#fff}
.faq-frage:hover,.akk-kopf:hover .akk-titel{color:var(--blue-200)}
.section-title span,.intro-lead b,.intro-claim{color:var(--blue-400)}
a{color:var(--blue-200)}
a:hover{color:#fff}

/* ---- Formulare ---- */
.cf-input,.form-group input,.form-group textarea,.form-group select,
.date-picker-trigger,.dp-range-field input{
  background:rgba(255,255,255,.05);border-color:var(--border);color:var(--text)}
.cf-input:focus,.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  background:rgba(255,255,255,.08);border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,101,175,.25)}
.cf-input option,.form-group select option{background:#161616;color:var(--text)}
.date-picker-panel{background:#161616;border-color:var(--border);box-shadow:0 18px 48px rgba(0,0,0,.7)}
.dp-day{color:var(--text)}
.btn-back{background:rgba(255,255,255,.06);border-color:var(--border);color:var(--text-2)}
.btn-back:hover{border-color:var(--blue);color:#fff}
.cf-info-box,.bk-draft-note,.booking-summary,.extras-total,.vehicle-price-live,.pkg-hint-box{
  background:var(--blue-50);border-color:var(--border-strong);color:var(--text-2)}
.cf-info-box strong,.bk-draft-note strong,.pkg-hint-box strong{color:#fff}

/* ---- Buchungsformular ---- */
.booking{background:transparent}
.booking-tool{background:var(--card);border-color:var(--border)}
.page-hero{background:rgba(0,0,0,.45);border-bottom:1px solid var(--border)}
.page-hero-promo{background:var(--blue-50);border-color:var(--border-strong);color:#fff}
.tile,.pkg-tile,.extra-tile,.fz-zeile{background:var(--card);border-color:var(--border)}
.tile:hover,.pkg-tile:hover,.extra-tile:hover,.fz-zeile:hover{background:var(--blue-50)}
.tile.selected,.pkg-tile.selected,.extra-tile.selected,.fz-zeile.selected{
  background:var(--blue-50);border-color:var(--blue)}
.progress-circle{border-color:var(--border);color:var(--text-3)}
.pkg-tile-features li strong,.pkg-tile-info h4{color:#fff}
.summary-value{color:#fff}
/* Fahrzeugbilder bleiben auf weissem Chip – sie sind freigestellt */
.fz-bild{background:#fff;border-color:rgba(255,255,255,.2)}

/* ---- Ergebnisse, Videos, Galerie ---- */
.vn-buehne{background:#000}
.erg-badge,.ba-badge{box-shadow:0 4px 14px rgba(0,0,0,.5)}

/* ---- Zusatzleistungs-Tabelle ---- */
.zusatz-tabelle td{color:var(--text-2);border-color:var(--border)}
.zt-fuss{background:var(--blue-50);border-color:var(--border)}
.zt-fuss strong{color:#fff}

/* ---- Rechtstexte ---- */
.legal{background:transparent}
.legal-box{background:var(--blue-50);border-color:var(--border);border-left-color:var(--blue)}
.legal-ph{background:rgba(245,166,35,.08);border-color:rgba(245,166,35,.4);color:#f0c481}
.legal-ph code{background:rgba(245,166,35,.16);color:#ffd79a}
.placeholder-flag{background:rgba(245,166,35,.14);border-color:rgba(245,166,35,.42);color:#f5c26b}

/* ---- Footer: hebt sich jetzt durch reines Schwarz ab ---- */
.footer{background:#000;border-top:1px solid var(--border)}
.footer-brand-chip{background:#fff}

/* ---- Intro-Bilder ---- */
.intro-bild-klein{border-color:#0d0d0d}

/* Statusmeldungen */
.cf-status.ok{background:rgba(46,125,50,.14);color:#9ad79e;border-color:rgba(46,125,50,.45)}
.cf-status.fehler{background:rgba(163,39,27,.16);color:#f3b3ab;border-color:rgba(163,39,27,.5)}
.cf-status.info{background:var(--blue-50);color:var(--text);border-color:var(--border-strong)}
.booking-error{background:rgba(163,39,27,.16);border-color:rgba(163,39,27,.5);color:#f3b3ab}

/* ---- Kontrast: #0065AF ist als Schrift auf Schwarz zu dunkel.
        Als Flaeche bleibt es, als Text und Linie wird es aufgehellt. ---- */
.zusatz-tabelle b,.fz-preis,.zt-fuss svg,.akk-liste li::before,
.faq-icon svg,.akk-icon svg,.vn-hinweis a,.intro-claim,
.kat-icon svg,.zg-icon svg,.if-icon svg,.whyme-icon svg,
.pkg-icon-wrap svg,.about-hl-icon svg,.package-features li::before,
.pkg-tile-features li::before,.extra-price,.vpl-price,.ci-phone,.ci-email,.ci-pin,
.footer-contact-item svg,.section-label,.contact-badge,.zg-tag,.review-pkg,
.booking-summary h4,.extras-total strong,.dp-day.dp-day-today{color:var(--blue-400);stroke:var(--blue-400)}
.akk-liste li::before{background:var(--blue-400)}
.zusatz-tabelle b,.fz-preis,.extra-price,.vpl-price{stroke:none}
.zg-tag,.review-pkg,.contact-badge{background:var(--blue-50);border-color:var(--border-strong)}
.pkg-btn:hover,.btn-outline:hover{color:#fff}
.package-desc,.pkg-note,.preis-hinweis,.vn-hinweis,.extra-desc,.tile-info,
.fz-beispiel,.ci-label,.cf-label,.form-group label{color:var(--text-3)}

/* Markierte Zeilen im Buchungsformular: Preis hell lassen */
.fz-zeile.selected .fz-preis{color:#fff}
.pkg-tile.selected,.extra-tile.selected{box-shadow:0 0 0 3px rgba(0,101,175,.25)}

/* Haken in den Leistungslisten */
.package-features li,.pkg-tile-features li,.akk-liste li{color:var(--text-2)}

/* Trennlinien in Karten etwas sichtbarer */
.package-features li{border-bottom-color:rgba(255,255,255,.07)}

/* ---- Abschnitte enger setzen: vorher war zu viel Luft dazwischen ---- */
.intro{padding:72px 0 64px}
.anspruch,.schritte,.schluss,.aktion{padding:72px 0}
.zielgruppen,.preise,.katalog,.gallery,.videos,.faq,.social-follow{padding:72px 0}
.contact{padding:72px 0 60px}
.section-subtitle{margin-bottom:2.2rem}
.akkordeon{margin-top:34px}
.zg-grid,.ergebnis-grid{margin-top:34px}
.vn{margin-top:30px}
.packages-grid{margin-bottom:24px}
.anspruch-kopf{margin-bottom:40px}
.zs-strahl{margin-top:42px}

/* Handlungsaufruf am Ende eines Abschnitts */
.cta-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
  max-width:760px;margin:38px auto 0;padding:22px 26px;
  background:var(--blue-50);border:1px solid var(--border-strong);border-radius:var(--radius)}
.cta-zeile p{flex:1;min-width:220px;font-size:.96rem;line-height:1.65;color:var(--text-2);margin:0}
.cta-zeile p strong{color:#fff;font-weight:800}
.cta-zeile .btn{flex-shrink:0}
@media(max-width:600px){
  .intro{padding:52px 0 48px}
  .anspruch,.schritte,.schluss,.aktion,.zielgruppen,.preise,.katalog,
  .gallery,.videos,.faq,.social-follow{padding:52px 0}
  .contact{padding:52px 0 44px}
  .cta-zeile{flex-direction:column;text-align:center;padding:20px}
  .cta-zeile p{min-width:0}
}

/* Rechtstexte: dritte und vierte Gliederungsebene */
.legal h3{font-size:1.02rem;font-weight:800;color:#fff;margin:26px 0 10px}
.legal h4{font-size:.95rem;font-weight:800;color:var(--blue-200);margin:20px 0 8px}
.legal ul{margin:0 0 14px 20px;color:var(--text-2);font-size:.94rem;line-height:1.85}
.legal li{margin-bottom:5px}
.legal code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:5px;font-size:.88em}

/* ---- Logo-Variante mit schwarzer Flaeche ----
   Sie geht im dunklen Header und Footer auf; der weisse Chip
   im Footer wird dadurch ueberfluessig. */
.footer-brand-chip{background:transparent;padding:0;border-radius:0}
.footer-brand-chip img{height:56px}

/* =========================================================
   Lesbarkeit auf der Carbon-Flaeche
   Die Abschnitte sind halbdurchlaessig, damit die Struktur
   ueberall leicht durchscheint. Karten mit Fliesstext sind
   kraeftiger hinterlegt – auf dem Gewebe war der Text sonst
   schwer zu lesen.
   ========================================================= */

/* Abschnitte: nur noch ein Hauch Flaeche, der Rest kommt vom Hintergrund */
.intro,.zielgruppen,.katalog,.gallery,.faq,.contact,.social-follow,
.preise,.videos,.brand-marquee{background:transparent}
.zielgruppen,.katalog,.videos,.social-follow,.preise,.contact{background:rgba(8,8,10,.42)}
.brand-marquee{background:rgba(0,0,0,.55)}
.anspruch,.schritte,.schluss,.aktion{background:rgba(5,5,7,.72)}

/* Header und Footer lassen die Struktur durchscheinen */
.header{background:rgba(10,10,12,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.header.scrolled{background:rgba(10,10,12,.93)}
.footer{background:rgba(4,4,6,.88)}
.mobile-nav-overlay{background:rgba(8,8,10,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* Karten: kraeftig genug fuer Fliesstext, aber nicht deckend */
.zg-card,.kat-card,.package-card,.video-card,.zusatz-tabelle,.whyme-card,
.trust-card,.contact-info-card,.contact-form-card,.wert-karte,.zs-karte,
.booking-tool,.tile,.pkg-tile,.extra-tile,.fz-zeile,.aktion-rechnung,
.faq-liste{
  background:rgba(16,16,19,.88);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.zg-card:hover,.kat-card:hover{background:rgba(22,22,26,.92)}
.tile:hover,.pkg-tile:hover,.extra-tile:hover,.fz-zeile:hover{background:rgba(0,101,175,.2)}
.tile.selected,.pkg-tile.selected,.extra-tile.selected,.fz-zeile.selected{background:rgba(0,101,175,.26)}
.package-card.featured{background:rgba(10,22,34,.92)}
/* Akkordeon und Tabelle sind Container – dort reicht ein Rahmen */

/* Textfarben einen Tick heller: auf der Struktur war Grau zu schwach */
:root{
  --text:#f2f4f6;
  --text-2:rgba(255,255,255,.76);
  --text-3:rgba(255,255,255,.62);
}
.section-subtitle,.intro-text,.anspruch-text{color:var(--text-2)}

/* Die beiden Abschnitte, die auf der Struktur am schwersten lesbar waren */
.zg-desc,.package-desc,.kat-desc{color:rgba(255,255,255,.74)}
.pkg-note{color:rgba(255,255,255,.6)}

@media(max-width:700px){
  /* Auf dem Handy ist die Struktur feiner – etwas mehr Schleier hilft */
  .carbon::after{background:linear-gradient(180deg,rgba(8,8,10,.44) 0%,rgba(6,6,8,.66) 100%)}
}

/* =========================================================
   Leistungen: Bild und Text im Wechsel
   Links Bild, rechts Text – in der naechsten Reihe umgekehrt.
   Auf dem Handy steht das Bild immer oben.
   ========================================================= */
.lst-reihen{display:flex;flex-direction:column;gap:72px;max-width:1120px;margin:48px auto 0}
.lst-reihe{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* Jede zweite Reihe gespiegelt */
.lst-reihe:nth-child(even) .lst-bild{order:2}

.lst-bild{position:relative;margin:0;border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.lst-bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.lst-reihe:hover .lst-bild img{transform:scale(1.035)}

.lst-label{display:flex;align-items:center;gap:12px;font-size:.72rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue-400);margin-bottom:14px}
.lst-label::before{content:'';width:30px;height:2px;background:var(--blue);border-radius:2px;flex-shrink:0}
.lst-text h3{font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:900;color:#fff;
  letter-spacing:-.02em;line-height:1.2;margin-bottom:14px}
.lst-text p{font-size:.98rem;line-height:1.8;color:var(--text-2);margin-bottom:22px}

.lst-liste{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.lst-liste li{display:flex;align-items:flex-start;gap:12px;font-size:.92rem;
  line-height:1.65;color:var(--text-2)}
.lr-haken{flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin-top:1px;border-radius:50%;
  background:var(--blue-50);border:1px solid var(--border-strong)}
.lr-haken svg{width:11px;height:11px;stroke:var(--blue-400);fill:none}

.lst-link{display:inline-flex;align-items:center;gap:9px;font-size:.94rem;font-weight:800;
  color:var(--blue-200);transition:color var(--transition),gap var(--transition)}
.lst-link:hover{color:#fff;gap:14px}
.lst-link svg{width:16px;height:16px}

@media(max-width:900px){
  .lst-reihen{gap:52px;margin-top:38px}
  .lst-reihe{grid-template-columns:1fr;gap:24px}
  /* Auf schmalen Bildschirmen steht das Bild immer oben – die
     Spiegelung der geraden Reihen wird dafuer aufgehoben. */
  .lst-reihe:nth-child(even) .lst-bild{order:0}
  .lst-bild{max-width:560px;width:100%}
}
@media(max-width:600px){
  .lst-reihen{gap:44px}
  .lst-text h3{font-size:1.3rem}
  .lst-text p{font-size:.93rem;margin-bottom:18px}
  .lst-liste li{font-size:.88rem}
  .lst-bild{border-radius:16px}
}

/* Auf dem Handy nimmt das Bild im Abschnitt „Über uns" nur Platz weg –
   der Text steht dort ohnehin direkt unter dem Hero. Am Desktop bleibt es. */
@media(max-width:900px){
  .intro-bild-spalte{display:none}
  .intro-grid{gap:0}
}

/* =========================================================
   Google-Rezensionen
   Echte Bewertungen aus dem Google-Profil. Am Desktop sind
   drei Karten zu sehen, am Tablet zwei, am Handy eine.
   Das Karussell laeuft von allein und ist bedienbar.
   ========================================================= */
.reviews{background:transparent;border-top:1px solid var(--border)}
.reviews-stars svg{width:24px;height:24px}
.reviews-subline{margin-bottom:0;color:var(--text-3)}
.reviews-subline strong{color:#fff}

.reviews-outer{margin-top:40px;outline:none}
/* Etwas Luft, damit der Rahmen der aktiven Karte nicht beschnitten wird */
.reviews-track-wrap{padding:6px 2px}
.reviews-track{align-items:stretch}

.review-card{
  background:rgba(16,16,19,.88);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border-color:var(--border);padding:26px 24px;gap:16px}
/* Im Karussell wuerde ein Anheben am Rand abgeschnitten – stattdessen
   hebt sich die Karte ueber Rahmen und Flaeche hervor. */
.review-card:hover{transform:none;background:rgba(22,22,26,.94);
  border-color:var(--border-strong);box-shadow:var(--shadow)}

.review-header{align-items:flex-start}
.review-ident{min-width:0}
.review-avatar{width:40px;height:40px;font-size:.95rem;color:var(--blue-400)}
.review-meta{font-size:.76rem;color:var(--text-3)}
.review-rating{margin-top:6px}
.review-text{color:var(--text-2);font-size:.91rem;line-height:1.78}

/* Hinweis auf gekuerzte Texte – zurueckhaltend, aber eindeutig */
.review-kurz{align-self:flex-start;display:inline-block;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);background:rgba(255,255,255,.06);
  border:1px solid var(--border);border-radius:100px;padding:3px 10px;cursor:help}

.reviews-dot{background:rgba(255,255,255,.22)}
.reviews-dot.active{background:var(--blue-400)}
.reviews-arr{background:rgba(255,255,255,.06);border-color:var(--border);
  color:#fff;box-shadow:none}
.reviews-arr:hover{background:var(--blue-50);border-color:var(--border-strong);color:#fff}

.reviews-fuss{max-width:860px;margin:22px auto 0;text-align:center;
  font-size:.78rem;line-height:1.7;color:var(--text-3)}
.reviews-fuss em{font-style:normal;font-weight:700;color:var(--text-2)}

@media(max-width:968px){
  .review-card{flex-basis:calc((100% - 20px)/2)}
}
@media(max-width:600px){
  .reviews{padding:72px 0}
  .reviews-outer{margin-top:28px}
  .review-card{flex-basis:100%;padding:22px 18px}
  .reviews-stars svg{width:20px;height:20px}
  .reviews-nav{margin-top:24px;gap:10px}
  .reviews-fuss{font-size:.74rem;margin-top:18px}
}

/* =========================================================
   „Fuer wen" – kompaktes Band am Ende der Preise
   Loest die frueher eigene Sektion ueber den Preisen ab. Sie
   wiederholte nur, was der Hero ohnehin sagt, und kostete einen
   ganzen Bildschirm. Hier sind es vier flache Kacheln: Bild,
   Titel, eine Zeile – mehr braucht die Aussage nicht.
   Bewusst anders aufgebaut als die Leistungsreihen weiter unten.
   ========================================================= */
.fuerwen{margin-top:52px;padding-top:40px;border-top:1px solid var(--border)}
.fw-kopf{text-align:center;font-size:1.02rem;font-weight:700;color:var(--text);
  max-width:620px;margin:0 auto 24px;line-height:1.6}

.fw-kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fw-kachel{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:3/2;
  border:1px solid var(--border);background:#0d0d10}
.fw-kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.fw-kachel:hover img{transform:scale(1.06)}
/* Schleier nach unten, damit die Schrift auf jedem Bild sitzt */
.fw-kachel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,9,.06) 0%,rgba(6,6,9,.34) 46%,rgba(5,5,8,.9) 100%)}
.fw-text{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:14px 15px}
.fw-text h4{font-size:.9rem;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-.01em}
.fw-text p{font-size:.73rem;color:rgba(255,255,255,.66);margin-top:3px;line-height:1.35}
/* Blauer Strich als Anker unter dem Titel */
.fw-kachel::before{content:'';position:absolute;left:15px;bottom:0;z-index:2;
  width:26px;height:3px;border-radius:3px 3px 0 0;background:var(--blue);
  transition:width var(--transition)}
.fw-kachel:hover::before{width:52px}

.fw-fuss{margin-top:20px;text-align:center;font-size:.8rem;line-height:1.7;color:var(--text-3)}
.fw-fuss a{color:var(--blue-200);font-weight:700}
.fw-fuss a:hover{color:#fff}

@media(max-width:760px){
  .fuerwen{margin-top:40px;padding-top:32px}
  .fw-kopf{font-size:.95rem;margin-bottom:18px}
  .fw-kacheln{grid-template-columns:1fr 1fr;gap:10px}
  .fw-kachel{aspect-ratio:4/3;border-radius:12px}
  .fw-text{padding:11px 12px}
  .fw-text h4{font-size:.82rem}
  .fw-text p{font-size:.68rem}
  .fw-kachel::before{left:12px;width:20px}
  .fw-fuss{font-size:.75rem;margin-top:16px}
}

/* =========================================================
   Hero-Hintergrundvideo – nur auf dem Handy
   Am Desktop bleibt das Standbild `img/hero.webp`; das Video
   wird dort weder angezeigt noch geladen (siehe Skript in
   index.html). Auf schmalen Bildschirmen legt es sich unter
   die beiden Verlaufsschichten des Heros.
   Stapelung: Video 0 · Verlaeufe 1 · Textblock 2 · USP-Band 3
   ========================================================= */
.hero-video{display:none}

@media(max-width:768px){
  .hero-video{
    display:block;position:absolute;inset:0;z-index:0;
    width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity 1s ease;
    pointer-events:none;background:var(--ink)}
  .hero.hero-video-an .hero-video{opacity:1}

  /* Die Verlaeufe muessen ueber dem Video liegen – ohne z-index
     wuerde das Video sie ueberdecken, weil es spaeter im Markup steht. */
  .hero::before,.hero::after{z-index:1}

  /* Auf bewegtem Bild braucht die Schrift mehr Rueckhalt als auf dem
     ruhigen Standbild: kraeftigerer Schleier, sobald das Video laeuft. */
  .hero.hero-video-an::before{background:
     linear-gradient(180deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.70) 42%,rgba(0,0,0,.94) 100%),
     linear-gradient(100deg,rgba(0,101,175,.30) 0%,transparent 60%)}
  .hero.hero-video-an::after{background:
     radial-gradient(62% 48% at 50% 38%,rgba(0,0,0,.52) 0%,transparent 74%)}
  .hero.hero-video-an .hero-box h1{text-shadow:0 4px 30px rgba(0,0,0,.85)}
  .hero.hero-video-an .hero-box p{text-shadow:0 2px 18px rgba(0,0,0,.8)}
  .hero.hero-video-an .hero-claim{text-shadow:0 2px 14px rgba(0,0,0,.8)}
}

/* Wer Bewegung reduziert haben will, bekommt weiterhin das Standbild */
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none !important}
}