/* ==========================================================================
   BASH BOOM BANG – zentrales Design-System
   Farben & Schrift übernommen aus den Elementor-Globals der Agentur.
   Änderungen an den Tokens wirken auf alle Seiten.
   ========================================================================== */

:root{
  --bg:        #011619;   /* Hintergrund (dunkles Petrol) */
  --bg-soft:   #04222a;   /* leicht hellere Fläche für Karten */
  --text:      #ffffff;
  --muted:     rgba(255,255,255,.75);
  --primary:   #F525EF;   /* Magenta */
  --secondary: #1C88C1;   /* Blau */
  --accent:    #80dbc3;   /* BBB-Türkis: Haken, kleine Überschriften, Akzente */
  --violet:    #4F056A;
  --cyan:      #00b1ff;

  /* Hausschriften aus der Angebotsvorlage: League Gothic (Headlines) + Karla (Text).
     Zum Zurückwechseln auf den Agentur-Font einfach 'Chakra Petch' einsetzen. */
  --font: 'Karla', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'League Gothic', 'Arial Narrow', sans-serif;
  --container: 1200px;
  --radius: 14px;
  --section-y: clamp(64px, 9vw, 120px);
}

/* ---- Schriften (lokal, DSGVO-konform) ---- */
@font-face{ font-family:'Karla'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/karla-400.woff2') format('woff2'); }
@font-face{ font-family:'Karla'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/karla-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Karla'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/karla-700.woff2') format('woff2'); }
@font-face{ font-family:'Karla'; font-style:italic; font-weight:700; font-display:swap;
  src:url('../fonts/karla-700-italic.woff2') format('woff2'); }
@font-face{ font-family:'Karla'; font-style:italic; font-weight:800; font-display:swap;
  src:url('../fonts/karla-800-italic.woff2') format('woff2'); }
@font-face{ font-family:'League Gothic'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/league-gothic-400.woff2') format('woff2'); }

@font-face{ font-family:'Chakra Petch'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/chakra-petch-400.woff2') format('woff2'); }
@font-face{ font-family:'Chakra Petch'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/chakra-petch-500.woff2') format('woff2'); }
@font-face{ font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/chakra-petch-600.woff2') format('woff2'); }
@font-face{ font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/chakra-petch-700.woff2') format('woff2'); }

/* ---- Basis ---- */
*,
*::before,
*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:135px; } /* Sticky-Header (bis ~120px) + Luft: Anker-Sprünge schneiden nichts mehr ab */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--text); }
p{ margin:0 0 1em; }
p a{ color:#fff; text-decoration:none; border-bottom:1px solid #fff; transition:.2s ease-in-out all; }
p a:hover{ border-bottom-color:var(--accent); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:1.02;
  letter-spacing:.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(46px, 7vw, 88px); }
h2{ font-size:clamp(36px, 5vw, 62px); }
h3{ font-size:clamp(24px, 2.8vw, 32px); }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }
section{ padding-block:var(--section-y); position:relative; }
/* Ausbalancierte Umbrüche: keine einsamen Wörter in zweiten Zeilen */
h1, h2, h3, .section-kicker, .hero .lead.hero-lead{ text-wrap:balance; }

.section-kicker{
  display:block;
  font-size:clamp(17px, 1.6vw, 21px); font-weight:800; font-style:italic; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}
.lead{ color:var(--muted); max-width:62ch; }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }

/* ---- Seiten-Rhythmus: wichtige Bühnen leicht abgesetzt,
       verwandte Blöcke rücken zusammen ---- */
#formate, #faq{
  background:
    radial-gradient(110% 120% at 50% 0%, rgba(28,136,193,.10), rgba(1,22,25,0) 60%),
    var(--bg-soft);
}
/* Kundenstimmen und die 8 Gründe gehören zusammen (beides Beweis-Führung) */
#gruende{ padding-top:clamp(48px, 6vw, 76px); }

/* ---- Scroll-Reveals (dezenter Fade-up, Klassen setzt main.js) ---- */
.rv{ opacity:0; transform:translateY(18px); }
.rv-in{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease; }

/* ---- 2-Schritt-Formular ---- */
.form-step[hidden]{ display:none; }
.form-step > .form-actions{ margin-top:32px; }
.step-hinweis{ margin:0 0 20px; color:var(--muted); font-size:15px; }
.step-hinweis .step-nr{
  color:var(--accent); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:12.5px;
}
.step-frei{ color:var(--muted); font-size:13.5px; }
.trust-box .google-badge{ align-self:flex-start; margin-bottom:6px; }
.trust-box .google-badge .gb-logo svg{ width:24px; height:24px; }
.trust-box .google-badge .gb-score{ font-size:17px; }
.trust-box .google-badge .gb-stars{ font-size:14px; }
.trust-box .google-badge .gb-count{ font-size:12px; }

/* ---- Konfetti + 10-Sekunden-Challenge ---- */
.konfetti{ position:fixed; inset:0; pointer-events:none; z-index:400; }
.challenge{
  margin-top:34px; padding:28px 26px; text-align:center;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(245,37,239,.12), rgba(1,22,25,0) 60%),
    var(--bg-soft);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
}
.ch-titel{
  margin:0 0 10px; color:var(--accent); font-weight:800; font-style:italic;
  letter-spacing:.18em; text-transform:uppercase; font-size:15px;
}
.ch-text{ margin:0 auto 18px; color:var(--muted); font-size:15px; max-width:56ch; }
.ch-zeit{
  font-family:var(--font-display); font-size:clamp(56px, 8vw, 88px); line-height:1;
  color:#fff; margin-bottom:18px; font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px rgba(245,37,239,.55);
}
.ch-ergebnis{ margin:18px 0 0; color:var(--muted); font-size:15.5px; }
.ch-ergebnis .ch-code{
  color:var(--primary); font-size:19px; letter-spacing:.12em;
}
.challenge-modal{
  position:fixed; inset:0; z-index:360;
  display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(1,12,14,.82); backdrop-filter:blur(4px);
  overflow-y:auto;
}
.challenge-modal .challenge{
  position:relative; margin:auto; width:100%; max-width:540px; overflow:hidden;
  box-shadow:0 24px 90px rgba(0,0,0,.65), 0 0 70px -14px rgba(245,37,239,.45);
  animation:ch-pop .35s cubic-bezier(.2,1.4,.4,1);
}
.challenge-modal .challenge::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
}
.ch-logo{ display:block; width:58px; height:auto; margin:4px auto 14px; }
.ch-marke{
  margin:0 0 14px; font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(36px, 6vw, 48px); line-height:.92; color:#fff; letter-spacing:.01em;
}
.ch-marke span{ display:block; color:var(--primary); }
@keyframes ch-pop{
  from{ transform:scale(.86); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .challenge-modal .challenge{ animation:none; }
}
.ch-schliessen{
  position:absolute; top:8px; right:12px;
  background:none; border:0; padding:6px; cursor:pointer;
  color:rgba(255,255,255,.55); font-size:30px; line-height:1;
}
.ch-schliessen:hover{ color:#fff; }

/* ---- Consent-Banner (Cookies) ---- */
.consent-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:var(--bg-soft); border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -10px 40px rgba(0,0,0,.45);
}
.cb-inner{
  max-width:1200px; margin-inline:auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.cb-text{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.5; max-width:62ch; }
.cb-text a{ color:#fff; }
.cb-buttons{ display:flex; gap:12px; flex-wrap:wrap; }
.cb-buttons .btn{ padding:12px 22px; font-size:14px; }
@media (max-width: 700px){
  .cb-inner{ flex-direction:column; align-items:stretch; text-align:center; }
  .cb-buttons .btn{ flex:1; }
}

/* ---- Karriere / Arbeitgebermarke (Über-uns) ---- */
.karriere{
  padding-block:clamp(52px, 7vw, 96px);
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(245,37,239,.14), rgba(1,22,25,0) 62%),
    var(--bg-soft);
}
.karriere .karriere-text{ max-width:64ch; margin-top:18px; }
.karriere .karriere-sub{ color:var(--accent); font-weight:600; margin:18px auto 4px; max-width:60ch; }
.karriere .btn-primary{ margin-top:24px; }

/* ---- Spotlight-Effekt (Signatur der Agentur: Neon-Lichtkegel hinter Headlines) ----
   Bewegen sich, wenn der Cursor über der Überschrift steht (Original-Verhalten).
   Ohne eigenen Stacking-Kontext rutschen die Kegel hinter den gesamten
   Seiteninhalt und können nie Text überlagern. */
.spotlight{ position:relative; }
.spotlight::after{
  content:''; position:absolute; width:250px; height:250px; top:-60px; left:20px;
  background:radial-gradient(circle, var(--primary) 0%, rgba(0,22,25,0) 65%);
  mix-blend-mode:screen; z-index:-1; pointer-events:none;
  transition:all .6s ease-in-out;
}
.spotlight::before{
  content:''; position:absolute; width:250px; height:250px; top:0; left:-40px;
  background:radial-gradient(circle, var(--cyan) 0%, var(--cyan) 11%, rgba(0,22,25,0) 60%);
  mix-blend-mode:screen; z-index:-1; pointer-events:none;
  transition:all .3s ease-in-out;
}
.spotlight:hover::after{ transform:translate(15%,-30%); }
.spotlight:hover::before{ transform:translate(-50%,-60%); }

/* ---- Headline-Akzent + inszenierte Film-Zeile (Hero) ---- */
.hl-magenta{ color:var(--primary); }
/* ---- Bühnen-Breaker: vollformatiges Bild mit einer einzigen Zeile ---- */
.buehne{
  position:relative; min-height:clamp(300px, 44vw, 520px);
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:60px 24px;
}
.buehne::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 85% at 10% 100%, rgba(245,37,239,.30), transparent 60%),
    radial-gradient(60% 85% at 90% 0%, rgba(0,177,255,.26), transparent 60%),
    linear-gradient(180deg, rgba(1,22,25,.9), rgba(1,22,25,.45) 38%, rgba(1,22,25,.45) 62%, rgba(1,22,25,.94));
}
.buehne-zeile{
  position:relative; margin:0; max-width:960px;
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(36px, 6vw, 78px); line-height:1.04; letter-spacing:.02em; color:#fff;
  text-shadow:0 4px 34px rgba(0,0,0,.6);
}
.buehne.kompakt{ min-height:clamp(230px, 30vw, 380px); }
.buehne.kompakt .buehne-zeile{ font-size:clamp(32px, 5vw, 62px); }

/* Inhalts-Bühne: echte Inhalte auf vollflächigem Bild, Karten in Glas-Optik */
.buehne-inhalt{
  position:relative; background-size:cover; background-position:center;
  padding-block:clamp(64px, 8vw, 110px);
}
.buehne-inhalt::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(55% 80% at 8% 100%, rgba(245,37,239,.26), transparent 60%),
    radial-gradient(55% 80% at 92% 0%, rgba(0,177,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(1,22,25,.92), rgba(1,22,25,.72) 45%, rgba(1,22,25,.94));
}
.buehne-inhalt > .container{ position:relative; }
.buehne-inhalt .benefit{
  background:rgba(1,22,25,.58);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.16); box-shadow:none;
}
.buehne-inhalt .benefit:hover{ transform:none; }

/* Zitat-Bühne: ein großes Kundenzitat auf Vollbild */
.buehne-zitat{ max-width:880px; margin-inline:auto; text-align:center; position:relative; }
.buehne-zitat .stars{ color:#FBBC05; letter-spacing:4px; font-size:22px; display:block; margin-bottom:18px; }
.buehne-zitat blockquote{
  margin:0 0 22px; color:#fff; font-size:clamp(20px, 2.6vw, 30px); line-height:1.45; font-weight:600;
  text-shadow:0 3px 24px rgba(0,0,0,.5);
}
.buehne-zitat cite{ font-style:normal; color:rgba(255,255,255,.85); font-size:15.5px; }
.buehne-zitat cite span{ display:block; color:var(--muted); font-size:13.5px; margin-top:2px; }

/* ---- Video-Hero (Produktseiten): die Show läuft ab Sekunde 1 ---- */
.hero.video-hero{
  position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:min(92vh, 880px); padding-block:clamp(72px, 9vw, 120px) clamp(56px, 7vw, 96px);
}
.video-hero .hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.video-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(1,22,25,.94) 0%, rgba(1,22,25,.78) 42%, rgba(1,22,25,.38) 75%, rgba(1,22,25,.28) 100%),
    linear-gradient(180deg, rgba(1,22,25,.6), transparent 26%, transparent 68%, var(--bg) 100%);
}
.video-hero .container{ position:relative; z-index:2; }
.video-hero .hero-text{ max-width:660px; }
@media (max-width:700px){
  .hero.video-hero{ min-height:88vh; }
  .video-hero::after{
    background:
      linear-gradient(180deg, rgba(1,22,25,.72), rgba(1,22,25,.55) 40%, rgba(1,22,25,.82) 78%, var(--bg) 100%);
  }
}

/* ---- Statement-Grid: Vorteile als selbstbewusste Aussagen ---- */
.statement-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:30px 54px;
  max-width:1020px; margin:clamp(40px, 5vw, 56px) auto 0;
}
.statement{ border-left:2px solid var(--primary); padding-left:20px; }
.statement b{ display:block; font-size:18.5px; color:#fff; margin-bottom:6px; }
.statement p{ margin:0; color:var(--muted); font-size:15.5px; line-height:1.55; }
@media (max-width:760px){ .statement-grid{ grid-template-columns:1fr; gap:24px; } }

/* ---- Versus-Duell: Standard-Teamevent gegen die Show ---- */
.versus{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:26px;
  max-width:1020px; margin:44px auto 0;
}
.vs-panel{ border-radius:var(--radius); padding:30px 28px; }
.vs-panel h3{ font-size:clamp(20px, 2vw, 25px); margin-bottom:18px; }
.vs-panel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.vs-panel li{ position:relative; padding-left:28px; font-size:15.5px; line-height:1.5; }
.vs-panel li::before{ position:absolute; left:0; top:0; font-weight:700; }
.vs-alt{ background:rgba(255,255,255,.035); border:1px dashed rgba(255,255,255,.22); }
.vs-alt h3{ color:var(--muted); }
.vs-alt li{ color:rgba(255,255,255,.55); }
.vs-alt li::before{ content:'✕'; color:rgba(255,255,255,.38); }
.vs-bbb{
  background:var(--bg-soft); border:1px solid rgba(245,37,239,.5);
  box-shadow:0 0 48px -10px rgba(245,37,239,.45);
}
.vs-bbb h3{ color:var(--primary); }
.vs-bbb li{ color:rgba(255,255,255,.94); }
.vs-bbb li::before{ content:'✓'; color:var(--accent); }
.vs-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:60px; height:60px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:25px; letter-spacing:.05em;
  box-shadow:0 0 32px rgba(245,37,239,.75);
}
@media (max-width:820px){
  .versus{ display:flex; flex-direction:column; gap:14px; }
  .vs-badge{ position:static; transform:none; margin:0 auto; flex:none; }
}

/* ---- Drei Akte: der Abend als Bildergeschichte ---- */
.akt{
  display:grid; grid-template-columns:repeat(12, 1fr); align-items:center;
}
.akt + .akt{ margin-top:clamp(56px, 7vw, 110px); }
.akt-media{ grid-column:1 / 10; grid-row:1; }
.akt-media img{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius);
  box-shadow:0 26px 70px -18px rgba(0,0,0,.65);
}
/* Hochformatigere Bilder: links andocken, rechts in Dunkel auslaufen (statt Beschnitt) */
.akt-media.auslauf-rechts{
  aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  background:#010a0d; box-shadow:0 26px 70px -18px rgba(0,0,0,.65);
}
.akt-media.auslauf-rechts img{
  height:100%; width:auto; max-width:none; aspect-ratio:auto; border-radius:0; box-shadow:none;
  -webkit-mask-image:linear-gradient(to right, #000 82%, transparent 100%);
  mask-image:linear-gradient(to right, #000 82%, transparent 100%);
}
.akt-text{
  grid-column:8 / 13; grid-row:1; position:relative; z-index:2;
  background:rgba(3,30,35,.93); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-left:4px solid var(--primary); border-radius:var(--radius);
  padding:clamp(24px, 2.6vw, 40px);
  box-shadow:0 20px 55px -12px rgba(0,0,0,.6), -20px 20px 70px -22px rgba(245,37,239,.35);
}
.akt.gespiegelt .akt-media{ grid-column:4 / 13; }
.akt.gespiegelt .akt-text{ grid-column:1 / 6; box-shadow:0 20px 55px -12px rgba(0,0,0,.6), 20px 20px 70px -22px rgba(28,136,193,.4); }
.akt-nr{
  display:block; font-family:var(--font-display); font-size:clamp(52px, 6vw, 84px); line-height:1;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.85); letter-spacing:.03em; margin-bottom:10px;
}
.akt-nr::after{ content:'.'; -webkit-text-stroke:0; color:var(--primary); text-shadow:0 0 20px rgba(245,37,239,.75); }
.akt h3{
  font-size:clamp(25px, 2.7vw, 35px); line-height:1.05; margin-bottom:12px;
}
.akt p{ color:var(--text); font-size:clamp(15px, 1.3vw, 17px); margin:0; max-width:46ch; }
@media (max-width:820px){
  .akt{ display:block; }
  .akt-media img{ aspect-ratio:16/10; }
  .akt-media.auslauf-rechts{ aspect-ratio:16/10; }
  .akt-media.auslauf-rechts img{ aspect-ratio:auto; }
  .akt-text{ width:min(91%, 540px); margin:-46px auto 0; padding:24px 22px; }
}

/* ---- Abgesetzte Sektion: weicher Hintergrund + Trennlinien (wie Fakten-Band) ---- */
.abgesetzt{ background:var(--bg-soft); border-block:1px solid rgba(255,255,255,.1); }
.spielmodi .modi-abspann{ margin-top:0; }
.modi-abspann{ margin-top:clamp(56px, 7vw, 100px); }
.modi-abspann h3{ font-size:clamp(26px, 3.2vw, 42px); line-height:1.05; }
.modi-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 24px);
  margin-top:clamp(28px, 3.5vw, 44px);
}
.modus{
  background:rgba(3,30,35,.93); border-left:4px solid var(--primary); border-radius:var(--radius);
  padding:clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 28px);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.55);
}
.modus h4{
  font-family:var(--font-display); font-size:clamp(23px, 2.3vw, 31px); line-height:1;
  text-transform:uppercase; letter-spacing:.02em; margin:0 0 6px;
}
.modus-fuer{
  display:block; color:var(--accent); font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:10px;
}
.modus p{ color:var(--muted); font-size:15px; margin:0; }
.modi-schluss{ color:var(--muted); margin:clamp(22px, 3vw, 32px) auto 0; }
@media (max-width:820px){
  .modi-grid{ grid-template-columns:1fr; }
}
/* Einschweben beim Scrollen: die Klasse .schwebt vergibt NUR das JS (kein JS = alles sofort sichtbar) */
@media (prefers-reduced-motion: no-preference){
  .schwebt{
    opacity:0; transform:translateX(-56px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .schwebt.von-rechts{ transform:translateX(56px); }
  .schwebt.angekommen{ opacity:1; transform:none; }
}

/* ---- Fakten-Band (Produktseiten): die harten Zahlen auf einen Blick ---- */
.fakten-band{
  background:var(--bg-soft);
  border-block:1px solid rgba(255,255,255,.1);
  margin-top:clamp(48px, 6vw, 80px);
}
.fakten-band .inner{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:22px clamp(34px, 5vw, 72px); padding-block:28px;
}
.fakt{ text-align:center; }
.fakt b{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(26px, 2.8vw, 36px); line-height:1.1; color:var(--accent); letter-spacing:.02em;
}
.fakt span{
  color:var(--muted); font-size:13.5px; letter-spacing:.08em; text-transform:uppercase;
}

/* ---- Landingpage-Hero: Luft zwischen den Textblöcken ---- */
.hero .section-kicker{ margin-bottom:clamp(16px, 2.2vw, 24px); }
.hero h1{ margin:0 0 clamp(24px, 3vw, 36px); }
.hero .hero-checks{ margin-top:clamp(26px, 3vw, 34px); gap:11px; }
.hero .hero-ctas{ margin-top:clamp(32px, 3.6vw, 46px); }
.hero .hero-trust{ margin-top:20px; }
@media (max-width: 700px){
  .hero{ padding-block:44px 0; }
  .hero .section-kicker{ font-size:14.5px; letter-spacing:.17em; }
  .hero h1{ font-size:clamp(33px, 10vw, 44px); }
  .hero .film-zeile{ font-size:15.5px; }
  .hero .lead.hero-lead{ font-size:clamp(20px, 5.6vw, 23px); }
  .hero .hero-checks li{ font-size:15.5px; line-height:1.45; }
  .hero-grid{ gap:40px; }
}

/* Drei Stimmen im Hero: Schreibmaschine (leise, dokumentarisch) →
   Versprechen (laute Show-Ansage) → Checks (sachliche Beweise) */
.film-zeile{
  color:rgba(255,255,255,.68); font-family:'Courier New', Courier, monospace;
  font-style:italic; font-weight:700; font-size:17px; line-height:1.6;
  margin:0 0 clamp(16px, 2.2vw, 24px); max-width:56ch;
}
.film-zeile strong{ color:var(--primary); text-transform:uppercase; letter-spacing:.04em; }
.hero .lead.hero-lead{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(23px, 2.6vw, 29px); line-height:1.12; letter-spacing:.015em;
  color:#fff; font-weight:400; margin-bottom:10px;
}
.tipp-cursor{
  display:inline-block; width:2px; height:1.05em; background:var(--accent);
  margin-left:3px; vertical-align:-2px; animation:tipp-blinken 1s steps(1) infinite;
}
@keyframes tipp-blinken{ 50%{ opacity:0; } }

/* ---- Buttons ---- */
.btn{
  display:inline-block;
  font-family:var(--font-display); font-size:19px; font-weight:400; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border-radius:0;
  padding:14px 30px; transition:.2s ease-in-out all;
}
.btn-primary{
  background:var(--primary); color:var(--bg); border:2px solid var(--primary);
}
.btn-primary:hover{
  background:transparent; color:#fff;
  box-shadow:0 0 26px 0 rgba(245,37,239,.55);
}
.btn-ghost{
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55);
}
.btn-ghost:hover{ border-color:var(--accent); box-shadow:0 0 22px 0 rgba(128,219,195,.45); }
.btn-line{
  background:none; border:none; padding:4px 0; color:#fff;
  border-bottom:1px solid #fff; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; transition:.2s ease-in-out all;
}
.btn-line:hover{ border-bottom-color:var(--accent); }

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(1,22,25,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:118px;
}
/* Prominentes Logo (ohne Glow) */
.site-logo{ display:block; }
.site-logo img{ height:96px; width:auto; }
@media (max-width: 700px){
  .site-header .container{ min-height:88px; }
  .site-logo img{ height:66px; }
}
.main-nav ul{ list-style:none; display:flex; gap:30px; margin:0; padding:0; }
.main-nav a{
  text-decoration:none; font-weight:500; font-size:15.5px; letter-spacing:.04em; text-transform:uppercase;
  transition:.2s ease-in-out all;
}
.main-nav a:hover{ color:var(--primary); }
.main-nav a[aria-current="page"]{ color:var(--primary); }
.header-cta{ display:flex; align-items:center; gap:18px; }
.header-phone{ text-decoration:none; font-weight:600; font-size:15px; white-space:nowrap; }
.header-phone:hover{ color:var(--accent); }
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{ display:block; width:26px; height:2px; background:#fff; margin:6px 0; transition:.2s all; }

@media (max-width: 980px){
  .nav-toggle{ display:block; }
  .header-phone{ display:none; }
  /* Mobil übernimmt die Sticky-Leiste unten den CTA – kein Doppel im Header */
  .header-cta .btn{ display:none; }
  .main-nav{
    position:fixed; inset:88px 0 auto 0; background:var(--bg);
    border-bottom:1px solid rgba(255,255,255,.1);
    padding:24px; display:none;
  }
  .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:18px; }
}

/* ---- Hero ---- */
.hero{ padding-block:clamp(56px, 8vw, 110px) 0; }
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
/* 3 Zonen: Kopf (Kicker+H1) / Bild / Rest – Desktop 2-spaltig, mobil Bild direkt nach der H1.
   Nur auf Grids mit der Klasse .dreizonen – Produktseiten u. a. behalten das klassische Layout. */
.hero-grid.dreizonen{
  grid-template-areas:"kopf media" "rest media";
  row-gap:0; align-items:center;
}
.hero-grid.dreizonen .hero-kopf{ grid-area:kopf; align-self:end; }
.hero-grid.dreizonen .hero-rest{ grid-area:rest; align-self:start; }
.hero-grid.dreizonen .hero-media{ grid-area:media; }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-grid.dreizonen{ grid-template-areas:"kopf" "media" "rest"; row-gap:30px; }
  .hero-grid.dreizonen .hero-media img,
  .hero-grid.dreizonen .hero-media > video{ aspect-ratio:16/10; }
  .hero-grid.dreizonen .hero-kopf h1{ margin-bottom:0; }
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-top:30px; }
.hero-media{ position:relative; }
.hero-media img,
.hero-media > video{
  border-radius:var(--radius); width:100%; object-fit:cover; aspect-ratio:4/4.6; display:block;
  box-shadow:-14px -14px 44px -6px rgba(245,37,239,.45), 14px 14px 44px -6px rgba(28,136,193,.45);
}
.ton-btn{
  position:absolute; right:14px; bottom:14px; z-index:2;
  width:46px; height:46px; border-radius:50%; padding:0;
  background:rgba(3,30,35,.72); border:1px solid rgba(255,255,255,.4);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s ease, border-color .2s ease;
}
.ton-btn:hover{ background:rgba(3,30,35,.95); border-color:var(--accent); }
.ton-btn svg{ width:22px; height:22px; fill:currentColor; display:block; }
.ton-btn .ton-an{ display:none; }
.ton-btn.aktiv .ton-an{ display:block; }
.ton-btn.aktiv .ton-aus{ display:none; }
/* Pause/Play-Knopf: sitzt links neben dem Ton-Knopf */
.pause-btn{ right:70px; }
.pause-btn .pv-play{ display:none; }
.pause-btn.pausiert .pv-play{ display:block; }
.pause-btn.pausiert .pv-pause{ display:none; }
/* Vergrößern-Knopf: sitzt links neben dem Pause-Knopf */
.gross-btn{ right:126px; }
.gross-btn svg{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.video-frame:fullscreen{ border-radius:0; }
.video-frame:fullscreen video{ width:100%; height:100%; object-fit:contain; aspect-ratio:auto; }
/* Vergrößert ohne echtes Vollbild (iPhone, eingebettete Browser): bildschirmfüllende Ebene */
.video-frame.video-gross{
  position:fixed; inset:0; z-index:520; border-radius:0;
  background:rgba(1,12,14,.96);
  display:flex; align-items:center; justify-content:center;
}
.video-frame.video-gross video{ width:100%; height:100%; object-fit:contain; aspect-ratio:auto; }
/* Lautstärkeregler: erscheint links neben den Knöpfen, sobald der Ton an ist */
.laut-regler{
  position:absolute; right:184px; bottom:30px; z-index:2;
  width:96px; accent-color:var(--primary); cursor:pointer;
  display:none;
}
.ton-aktiv .laut-regler{ display:block; }

/* ---- Vollflächiger Hero (Startseite) ---- */
.hero-full{
  position:relative;
  min-height:clamp(560px, 90vh, 860px);
  display:flex; align-items:flex-end;
  padding:0;
  overflow:hidden;
}
.hero-full .hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%; z-index:0;
}
.hero-full .hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(1,22,25,.97) 0%, rgba(1,22,25,.9) 22%, rgba(1,22,25,.68) 38%, rgba(1,22,25,.3) 52%, rgba(1,22,25,0) 64%),
    linear-gradient(0deg, rgba(1,22,25,.9) 0%, rgba(1,22,25,.32) 26%, rgba(1,22,25,0) 50%);
}
.hero-full .hero-inner{
  position:relative; z-index:2; width:100%;
  padding-block:clamp(48px, 7vw, 92px);
}
.hero-full .hero-text{
  max-width:clamp(440px, 56vw, 700px);
  /* Lesbarkeits-Netz unabhängig vom Bildmotiv */
  text-shadow:0 1px 3px rgba(1,22,25,.6), 0 4px 18px rgba(1,22,25,.4);
}
.hero-full h1{ margin-bottom:.35em; font-size:clamp(46px, 7vw, 88px); }
.hero-full .lead{
  color:rgba(255,255,255,.9); font-size:clamp(16.5px, 1.5vw, 19px); max-width:46ch;
}
.hero-checks{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-direction:column; gap:11px;
}
.hero-checks li{
  position:relative; padding-left:30px;
  color:rgba(255,255,255,.94); font-size:clamp(16px, 1.45vw, 18.5px); line-height:1.4;
}
.hero-checks li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--accent); font-weight:700; font-size:18px;
}
.hero-full .hero-ctas{ margin-top:32px; }
.hero-trust{
  margin:16px 0 0; color:rgba(255,255,255,.85); font-size:14.5px; letter-spacing:.02em;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.hero-trust .ht-g svg{ width:17px; height:17px; display:block; }
.hero-trust .ht-stars{ color:#FBBC05; letter-spacing:2px; }
.hero-trust strong{ color:#fff; }
@media (max-width: 700px){
  .hero-full{ min-height:auto; }
  .hero-full .hero-bg{ position:relative; height:52vw; min-height:280px; }
  .hero-full .hero-overlay{
    background:linear-gradient(0deg, rgba(1,22,25,1) 6%, rgba(1,22,25,.5) 40%, rgba(1,22,25,.15) 100%);
  }
  .hero-full{ display:block; }
  .hero-full .hero-inner{ margin-top:-14%; padding-top:0; }
  .hero-full h1{ font-size:clamp(30px, 11vw, 46px); }
}

/* ---- Regions-Karten (Städte-Landingpages) ----
   Die Karte teilt sich die Sektion mit dem Regions-Text: Sie ist größer als
   ihre Spalte und läuft mit dem ausgefadeten Rand unter den Text – so
   verzahnen sich Karte und Inhalt, statt nebeneinander zu schweben. */
.karte-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  align-items:center;
}
.karte-media{ position:relative; min-width:0; }
.karte-media svg{
  display:block; width:126%; height:auto; overflow:visible;
  margin:-50px 0 -50px -13%;
}
.region-text{ position:relative; z-index:1; padding-left:12px; }
@media (max-width: 900px){
  .karte-grid{ grid-template-columns:1fr; gap:8px; }
  /* Näher an die Region ran: Karte vergrößern, Ränder (laufen ohnehin ins Transparente) abschneiden.
     Mittig zwischen Logoband und Überschrift setzen, nach außen samt Gitter ausfaden. */
  .karte-media{
    overflow:hidden; margin:-36px 0 36px;
    -webkit-mask-image:radial-gradient(75% 75% at 50% 50%, #000 55%, transparent 98%);
    mask-image:radial-gradient(75% 75% at 50% 50%, #000 55%, transparent 98%);
  }
  .karte-media svg{ width:100%; margin:-24px 0 -24px; transform:scale(1.6); transform-origin:50% 48%; }
  .region-text{ padding-left:0; }
}
/* Mobil: Karte bleibt als Stimmungselement sichtbar, Orts-Chips liefern die Namen */
.region-chips{ display:none; flex-wrap:wrap; gap:8px; margin:20px 0 4px; }
.region-chips span{
  border:1px solid rgba(255,255,255,.28); border-radius:99px;
  padding:5px 13px; font-size:13.5px; color:var(--muted);
}
@media (max-width: 700px){
  .region-chips{ display:flex; }
}

/* ---- Presse-/Kundenlogos ---- */
.logo-band{ padding-block:44px; }
.logo-band .label{
  text-align:center; font-size:clamp(17px, 1.6vw, 21px); font-weight:800; font-style:italic;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  margin-bottom:26px;
}
.logo-row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:40px 56px;
}
.logo-row img{
  height:34px; width:auto; max-width:150px; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.66; transition:.2s opacity;
}
.logo-row img:hover{ opacity:1; }

/* ---- Referenzlogo-Band (Kundenlogos, wiederverwendbar auf jeder Seite) ---- */
/* Logoband: weicher Verlauf statt harter Trennlinien, mit Luft nach oben */
.client-band{
  margin-top:26px; padding-block:64px;
  background:linear-gradient(180deg,
    rgba(8,52,63,0) 0%, rgba(8,52,63,.55) 26%,
    rgba(8,52,63,.55) 74%, rgba(8,52,63,0) 100%);
}
.client-band .label{
  text-align:center; font-size:clamp(17px, 1.6vw, 21px); font-weight:800; font-style:italic;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  margin:0 0 30px;
}
.marquee{ overflow:hidden; position:relative; }
/* Weiches Auslaufen an den Rändern über feststehende Farbverlauf-Overlays.
   Bewusst KEINE mask-image-Lösung (WebKit-Fehler) und bewusst am Eltern-Band
   verankert, damit die Overlays nicht mit dem scrollenden Band mitwandern. */
.client-band{ position:relative; }
.client-band::before, .client-band::after{
  content:''; position:absolute; bottom:64px; height:84px;
  width:16%; min-width:64px; max-width:110px;
  z-index:2; pointer-events:none;
}
.client-band::before{ left:0; background:linear-gradient(90deg, #05262e, rgba(5,38,46,0)); }
.client-band::after{ right:0; background:linear-gradient(270deg, #05262e, rgba(5,38,46,0)); }
.marquee-track{
  display:flex; gap:20px; width:max-content; padding-inline:10px;
  /* Bewegung übernimmt main.js per Scrolling (iOS-fest), keine CSS-Animation */
}
@media (prefers-reduced-motion: reduce){
  /* Band steht und ist wischbar; die weiche Randblende bleibt, damit
     angeschnittene Logos nicht kaputt wirken */
  .marquee{ overflow-x:auto; }
  .marquee-track{ animation:none; }
}
.client-chip{
  background:#fff; border-radius:var(--radius); height:84px; min-width:150px; padding:12px 26px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.client-chip img{ max-height:52px; max-width:180px; width:auto; height:auto; object-fit:contain; }
/* Sehr breite Wortmarken brauchen mehr Breite, um lesbar zu bleiben */
.client-chip img.logo-wide{ max-width:240px; }

/* ---- Zähler ---- */
.counters{
  border-block:1px solid rgba(255,255,255,.1);
  background:linear-gradient(90deg, rgba(79,5,106,.35), rgba(28,136,193,.18));
}
.counter-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; text-align:center;
}
@media (max-width: 900px){ .counter-grid{ grid-template-columns:repeat(2, 1fr); } }
.counter .prefix{
  display:block; font-size:14px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}
.counter .value{
  font-family:var(--font-display);
  font-size:clamp(52px, 6vw, 84px); font-weight:400; color:#fff; line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.counter .value .accent{ color:var(--primary); }
.counter .caption{
  display:block; font-size:15px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}

/* ---- Video ---- */
.video-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
@media (max-width: 900px){ .video-grid{ grid-template-columns:1fr; } }

/* ---- Video-Bühne: Video vollflächig bis zum Rand, Text im rechten Drittel ---- */
.video-buehne{ display:grid; grid-template-columns:1.75fr 1fr; align-items:stretch; padding-block:0; min-height:clamp(440px, 46vw, 600px); }
.video-buehne .vb-text h2{ font-size:clamp(26px, 2.4vw, 36px); }
.video-buehne .video-frame{ border-radius:0; box-shadow:none; min-height:clamp(300px, 26vw, 420px); }
.video-buehne .video-frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; aspect-ratio:auto; }
.video-buehne .vb-text{ align-self:center; padding:clamp(36px, 4.5vw, 64px) clamp(28px, 4vw, 80px); }
.video-buehne .vb-text .lead{ max-width:44ch; }
.video-buehne .vb-text .btn{ margin-top:24px; }
@media (max-width:900px){
  .video-buehne{ display:block; min-height:0; }
  .video-buehne .video-frame{ min-height:0; }
  .video-buehne .video-frame video{ position:static; height:auto; aspect-ratio:16/9; }
  .video-buehne .vb-text{ padding:40px 24px 56px; max-width:640px; margin-inline:auto; }
}

/* ---- Wer-wir-sind-Video (Über-uns): 16:9 Desktop / 9:16 Mobil ---- */
.wer-wir-media{ display:flex; flex-direction:column; align-items:center; }
.video-shell{
  position:relative; width:100%; aspect-ratio:16/9; /* Desktop: Querformat */
  border-radius:var(--radius); overflow:hidden; background:var(--bg-soft);
  box-shadow:-14px -14px 44px -6px rgba(245,37,239,.45), 14px 14px 44px -6px rgba(28,136,193,.45);
}
.wer-wir-video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-sound{
  position:absolute; right:14px; bottom:14px; z-index:2;
  width:44px; height:44px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(1,22,25,.62); border:1px solid rgba(255,255,255,.35); color:#fff;
  cursor:pointer; transition:.2s background, .2s border-color;
}
.video-sound:hover{ background:rgba(1,22,25,.85); border-color:var(--accent); }
.video-sound svg{ width:22px; height:22px; }
.video-sound .icon-sound{ display:none; }
.video-sound.sound-on .icon-sound{ display:block; }
.video-sound.sound-on .icon-muted{ display:none; }
@media (max-width: 900px){
  /* Mobil: Hochformat */
  .video-shell{ width:min(76%, 330px); aspect-ratio:9/16; }
}
.video-frame{ position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  box-shadow:0 0 60px -10px rgba(28,136,193,.5); }
.video-frame video{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
.video-frame .play-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(1,22,25,.35); transition:.2s all; border:none; cursor:pointer; width:100%;
}
.video-frame .play-overlay:hover{ background:rgba(1,22,25,.15); }
.video-frame .play-overlay img{ width:min(320px, 58%); height:auto; transition:.2s transform; }
.video-frame .play-overlay:hover img{ transform:scale(1.06); }
.video-frame.playing .play-overlay{ display:none; }

/* ---- Video-Momente: drei YouTube-Kacheln mit Klick-Fassade ---- */
.video-momente{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(18px, 2.4vw, 32px);
  margin-top:clamp(36px, 5vw, 52px);
}
.video-momente .yt-kachel:last-child:nth-child(odd){
  grid-column:1 / -1; justify-self:center; width:calc(50% - clamp(9px, 1.2vw, 16px));
}
@media (max-width:900px){
  .video-momente{ grid-template-columns:1fr; max-width:640px; margin-inline:auto; }
  .video-momente .yt-kachel:last-child:nth-child(odd){ grid-column:auto; width:100%; }
}
.yt-kachel{
  margin:0; border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(255,255,255,.1); background:rgba(3,30,35,.93);
}
.yt-medien{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:#000;
}
.yt-medien iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-fassade{ position:absolute; inset:0; width:100%; padding:0; border:0; cursor:pointer; background:none; }
.yt-fassade > img{ width:100%; height:100%; object-fit:cover; display:block; }
.yt-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(1,22,25,.35); transition:.2s background;
}
.yt-fassade:hover .yt-play{ background:rgba(1,22,25,.15); }
.yt-play img{ width:min(88px, 22%); height:auto; transition:.2s transform; }
.yt-fassade:hover .yt-play img{ transform:scale(1.06); }
.yt-kachel figcaption{
  margin:0; padding:13px 16px 15px; text-align:center;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(19px, 1.8vw, 23px); line-height:1.1; color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
}
.yt-hinweis{ color:var(--muted); font-size:12.5px; margin:clamp(20px, 3vw, 28px) auto 0; }
.yt-hinweis a{ color:var(--muted); }

/* ---- Produkte (Gameshow / Quizshow) ---- */
.product-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:44px; }
@media (max-width: 860px){ .product-grid{ grid-template-columns:1fr; } }
.product-card{
  position:relative;
  background:var(--bg-soft); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,.08);
  transition:.25s transform, .25s box-shadow;
}
/* BBB-Logo dezent oben rechts auf jeder Produktkarte */
.product-card::after{
  content:''; position:absolute; top:16px; right:16px;
  width:42px; height:58px;
  background:url('/assets/img/logo.svg') no-repeat center / contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.65));
  pointer-events:none;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:-10px -10px 30px -8px var(--primary), 10px 10px 30px -8px var(--secondary);
}
.product-card img{ aspect-ratio:16/9.5; object-fit:cover; width:100%; }
.product-card .body{ padding:30px 30px 34px; display:flex; flex-direction:column; gap:12px; flex:1; }
.product-card h3{ margin:0; }
.product-card p{ color:var(--muted); margin:0; }
.produkt-preis,
.product-card .body p.produkt-preis{
  margin:2px 0 12px; color:var(--accent); font-weight:800; font-size:15px; letter-spacing:.04em;
}
.preis-hinweis{
  margin:16px 0 0; text-align:center; color:var(--muted); font-size:13px;
}
.product-card .checks{
  list-style:none; margin:6px 0 0; padding:0;
  display:flex; flex-direction:column; gap:9px; flex:1;
}
.product-card .checks li{
  position:relative; padding-left:28px;
  color:var(--muted); font-size:15.5px; line-height:1.45;
}
.product-card .checks li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--accent); font-weight:700; font-size:16px;
}
.product-card .btn-line{ align-self:flex-start; margin-top:14px; }

/* ---- Vorteils-Checkliste (Produkt- und Landingpages) ---- */
.check-grid{
  list-style:none; margin:34px auto 0; padding:0; max-width:1080px;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 40px;
}
@media (max-width: 700px){ .check-grid{ grid-template-columns:1fr; } }
.check-grid li{
  position:relative; padding-left:32px;
  color:var(--muted); font-size:16px; line-height:1.5;
}
.check-grid li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--accent); font-weight:700; font-size:18px;
}
/* Aufklappbare Punkte: kurzer Text erst per Klick (Progressive Disclosure) */
.check-grid details summary{ cursor:pointer; list-style:none; }
.check-grid details summary::-webkit-details-marker{ display:none; }
.check-grid details summary::after{
  content:'+'; color:var(--accent); font-weight:700; margin-left:8px;
  display:inline-block; transition:transform .2s ease;
}
.check-grid details[open] summary::after{ content:'−'; }
.check-grid details summary:hover{ color:#fff; }
.check-grid details p{ margin:8px 0 0; color:var(--muted); font-size:15px; line-height:1.55; }

/* ---- Ablauf-Schritte (Produktseiten) ---- */
.step-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; margin-top:48px; }
@media (max-width: 1000px){ .step-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 600px){ .step-grid{ grid-template-columns:1fr; } }
.step{
  background:rgba(3,30,35,.93); border-left:4px solid var(--primary); border-radius:var(--radius);
  padding:clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 26px);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.55);
}
.step .no{
  display:block; font-family:var(--font-display); font-size:56px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.85);
  margin-bottom:12px;
}
.step .no::after{ content:'.'; -webkit-text-stroke:0; color:var(--primary); text-shadow:0 0 18px rgba(245,37,239,.75); }
.step h3{ font-size:clamp(21px, 1.8vw, 25px); color:var(--primary); margin-bottom:8px; }
.step p{ color:var(--muted); font-size:15.5px; margin:0; }

/* ---- Kundenstimmen ---- */
.quotes{ background:linear-gradient(180deg, rgba(79,5,106,.22), transparent 70%); }
.quote-track{
  display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:18px; scrollbar-width:thin; scrollbar-color:var(--secondary) transparent;
}
.quote-card{
  flex:0 0 min(520px, 88%); scroll-snap-align:start;
  background:var(--bg-soft); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  padding:30px 32px; display:flex; flex-direction:column; gap:18px;
}
.quote-card blockquote{ margin:0; font-size:16.5px; color:var(--muted); flex:1; }
.quote-card .stars{ color:var(--primary); letter-spacing:4px; font-size:18px; }
.quote-card figcaption{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.quote-card .ref-logo{
  background:#fff; border-radius:var(--radius); height:48px; min-width:64px; padding:8px 12px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.quote-card .ref-logo{ overflow:hidden; }
.quote-card .ref-logo img{ width:96px; height:30px; object-fit:contain; }
.quote-card cite{ font-style:normal; font-weight:600; font-size:15px; flex:1; min-width:160px; }
.quote-card cite span{ display:block; font-weight:400; color:var(--accent); font-size:13.5px; overflow-wrap:anywhere; }
.quote-nav{ display:flex; gap:12px; justify-content:flex-end; margin-top:8px; }
.quote-nav button{
  background:none; border:1px solid rgba(255,255,255,.4); color:#fff; width:46px; height:46px;
  font-size:20px; cursor:pointer; transition:.2s all;
}
.quote-nav button:hover{ border-color:var(--primary); color:var(--primary); }
.mid-cta{
  text-align:center; margin-top:34px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.mid-cta p{ margin:0; color:var(--muted); font-size:17px; font-weight:600; }

/* ---- 8 gute Gründe (Glow-Karten wie im Agentur-Theme) ---- */
.benefit-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:34px; margin-top:52px; }
.benefit-grid.dreier{ grid-template-columns:repeat(3, 1fr); max-width:1020px; margin-left:auto; margin-right:auto; }
@media (max-width: 1100px){ .benefit-grid, .benefit-grid.dreier{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 640px){ .benefit-grid, .benefit-grid.dreier{ grid-template-columns:1fr; } }
.benefit{
  background:var(--bg); border-radius:var(--radius); padding:28px 26px;
  box-shadow:-10px -10px 30px -14px var(--primary), 10px 10px 30px -14px var(--secondary);
  transition:.25s box-shadow, .25s transform;
}
.benefit:hover{
  transform:translateY(-3px);
  box-shadow:-10px -10px 34px -10px var(--primary), 10px 10px 34px -10px var(--secondary);
}
.benefit .no{
  display:block; font-family:var(--font-display); font-size:64px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.85);
  letter-spacing:.03em; margin-bottom:16px;
}
.benefit .no::after{
  content:'.'; -webkit-text-stroke:0; color:var(--primary);
  text-shadow:0 0 18px rgba(245,37,239,.75);
}
.benefit:hover .no{ -webkit-text-stroke-color:var(--primary); transition:.3s -webkit-text-stroke-color; }
.benefit h3{ font-size:22px; line-height:1.1; margin-bottom:10px; color:var(--primary); }
.benefit p{ color:var(--muted); font-size:15.5px; margin:0; }

/* ---- Spielkarten (8 gute Gründe): vorn Titel + Logo, Klick/Hover dreht zur Textseite ---- */
.spielkarten{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:26px;
  margin-top:52px;
}
.spielkarte{
  position:relative; aspect-ratio:5/7; cursor:pointer;
  perspective:1200px; outline:none; -webkit-tap-highlight-color:transparent;
  border-radius:var(--radius);
  /* Neon-Schein liegt auf dem ruhenden Rahmen, nicht auf den rotierenden Flächen:
     verhindert Render-Flackern beim Umdrehen in Chrome */
  box-shadow:-10px -10px 30px -14px var(--primary), 10px 10px 30px -14px var(--secondary);
}
.sk-innen{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; will-change:transform;
  transition:transform .75s cubic-bezier(.35,.1,.25,1);
}
.spielkarte.gedreht .sk-innen{ transform:rotateY(180deg); }
@media (hover:hover){
  .spielkarte:not(.gedreht):hover .sk-innen{ transform:rotateY(180deg); }
  /* Rückdrehen leicht verzögert: beim Wechsel auf die nächste Karte dreht nicht
     alles gleichzeitig, das Hindrehen bleibt sofort */
  .sk-innen{ transition-delay:.45s; }
  .spielkarte:hover .sk-innen,
  .spielkarte.gedreht .sk-innen{ transition-delay:0s; }
}
.spielkarte:focus-visible{ outline:2px solid var(--secondary); outline-offset:4px; border-radius:var(--radius); }
.sk-vorn, .sk-hinten{
  position:absolute; inset:0; border-radius:var(--radius);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--bg);
  display:flex; flex-direction:column; padding:22px 20px;
  overflow:hidden;
}
.sk-vorn{ transform:rotateY(0deg); }
/* Innenrahmen wie bei einer echten Spielkarte */
.sk-vorn::after, .sk-hinten::after{
  content:''; position:absolute; inset:9px; border-radius:9px;
  border:1px solid rgba(255,255,255,.16); pointer-events:none;
}
.sk-hinten{ transform:rotateY(180deg); justify-content:center; gap:10px; }
/* Eck-Indizes wie Kartenwerte: oben links, gespiegelt unten rechts */
.sk-index{
  position:absolute; top:16px; left:18px;
  font-family:var(--font-display); font-size:30px; line-height:1;
  color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.85); letter-spacing:.03em;
}
.sk-index::after{ content:'.'; -webkit-text-stroke:0; color:var(--primary); text-shadow:0 0 14px rgba(245,37,239,.75); }
.sk-index.unten{ top:auto; left:auto; bottom:16px; right:18px; transform:rotate(180deg); }
.sk-vorn h3{
  margin:auto 0; text-align:center; color:var(--primary);
  font-size:clamp(26px, 2.4vw, 34px); line-height:1.08; letter-spacing:.04em;
  text-shadow:0 0 24px rgba(245,37,239,.4);
}
.sk-logo{
  order:-1; margin:24px auto 0; width:22%; max-width:54px;
  filter:none;
}
.sk-titel{
  display:block; font-family:var(--font-display); text-transform:uppercase;
  color:var(--primary); font-size:clamp(26px, 2.4vw, 34px); line-height:1.08; letter-spacing:.04em; text-align:center;
}
.sk-hinten p{ color:var(--muted); font-size:14.5px; line-height:1.5; margin:0; text-align:center; }
.sk-hinweis{ text-align:center; color:var(--muted); font-size:13.5px; margin:24px 0 0; letter-spacing:.04em; }
/* Bildunterschrift unter frei stehenden Videos */
.video-untertitel{
  margin:14px 2px 0; color:var(--muted); font-size:14.5px;
  letter-spacing:.02em; text-align:center;
}
@media (max-width:1100px){
  .spielkarten{ grid-template-columns:repeat(2, 1fr); max-width:640px; margin-inline:auto; }
}
@media (max-width:640px){
  .spielkarten{ gap:14px; }
  .spielkarte{ aspect-ratio:2/3; }
  .sk-vorn, .sk-hinten{ padding:16px 12px; }
  .sk-vorn h3{ font-size:20px; }
  .sk-logo{ width:38px; margin-top:18px; }
  .sk-titel{ font-size:20px; }
  .sk-hinten p{ font-size:12.5px; line-height:1.45; }
  .sk-index{ font-size:24px; top:12px; left:13px; }
  .sk-index.unten{ top:auto; left:auto; bottom:12px; right:13px; }
}
@media (prefers-reduced-motion: reduce){
  .sk-innen{ transition:none; }
}

/* BBB-Logo dezent oben rechts auf den USP-Karten der Anlassseiten */
.usp-mit-logo .benefit{ position:relative; }
.usp-mit-logo .benefit::after{
  content:''; position:absolute; top:24px; right:22px;
  width:32px; height:44px;
  background:url('/assets/img/logo.svg') no-repeat center / contain;
  opacity:.9; pointer-events:none;
}

/* Benefit-Karten mit Foto-Hintergrund: Bild + dunkler Verlauf, Text bleibt vorn */
.benefit.benefit-bild{ position:relative; overflow:hidden; background-size:cover; background-position:center; }
.benefit.benefit-bild::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(1,13,16,.66), rgba(1,13,16,.92) 78%);
}
.benefit.benefit-bild > *{ position:relative; z-index:1; }
.benefit.benefit-bild p{ color:rgba(255,255,255,.88); }

/* ---- CTA-Band ---- */
.cta-band{
  background:linear-gradient(100deg, rgba(79,5,106,.55), rgba(28,136,193,.3));
  border-block:1px solid rgba(255,255,255,.1);
}
.guarantee-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:24px 32px;
}
.cta-band h2{ margin:0; flex:1 1 100%; font-size:clamp(40px, 5.4vw, 72px); line-height:1.02; }
.cta-band h2 .g-line{
  display:inline-block; white-space:nowrap; color:#fff;
  padding-bottom:.1em; border-bottom:5px solid var(--primary);
}
.cta-band h2 .g-rest{
  display:block; margin-top:.28em;
  font-size:.62em; line-height:1.05; color:rgba(255,255,255,.9);
}
@media (max-width: 560px){ .cta-band h2 .g-line{ white-space:normal; } }
.guarantee-cta{ margin-top:34px; }
.google-badge{
  display:inline-flex; align-items:center; gap:14px; text-decoration:none; flex:none;
  padding:12px 18px; border-radius:var(--radius);
  background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  transition:transform .2s, box-shadow .2s;
}
.google-badge:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.36); }
.google-badge .gb-logo svg{ width:30px; height:30px; display:block; }
.google-badge .gb-body{ display:flex; flex-direction:column; gap:2px; }
.google-badge .gb-top{ display:flex; align-items:center; gap:8px; }
.google-badge .gb-score{ color:#202124; font-size:20px; font-weight:800; line-height:1; }
.google-badge .gb-stars{ color:#FBBC05; font-size:17px; letter-spacing:1px; line-height:1; }
.google-badge .gb-count{ color:#5f6368; font-size:13px; line-height:1.1; }

/* ---- Google-Bewertungs-Slider (sekundär, kompakt) ---- */
.greviews{ margin-top:26px; }
.greview-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.5) transparent; }
.greview-card{
  flex:0 0 min(300px, 82%); scroll-snap-align:start;
  background:#fff; border-radius:var(--radius); padding:16px 18px;
  display:flex; flex-direction:column; gap:10px; box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.grev-head{ display:flex; align-items:center; gap:10px; }
.grev-avatar{ width:34px; height:34px; border-radius:50%; flex:none; color:#fff; font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center; font-family:var(--font); }
.grev-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.grev-name{ color:#202124; font-weight:700; font-size:14px; line-height:1.15; }
.grev-date{ color:#5f6368; font-size:11.5px; }
.grev-g{ flex:none; }
.grev-g svg{ width:18px; height:18px; display:block; }
.grev-stars{ color:#FBBC05; letter-spacing:1.5px; font-size:14px; line-height:1; }
.greview-card blockquote{ margin:0; color:#3c4043; font-size:13px; line-height:1.45; font-family:var(--font); }
@media (max-width: 720px){
  .cta-band h2{ flex-basis:100%; }
}

/* ---- Event-Kacheln ---- */
.container-breit{ max-width:1460px; }
.event-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin-top:52px; }
@media (max-width: 1250px){ .event-grid{ grid-template-columns:repeat(2, 1fr); gap:30px; } }
@media (max-width: 640px){ .event-grid{ grid-template-columns:1fr; } }
.event-card{
  position:relative; border-radius:var(--radius); overflow:hidden; text-decoration:none;
  display:flex; flex-direction:column; justify-content:flex-end; min-height:400px;
  border:1px solid rgba(255,255,255,.08);
}
.event-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:.4s transform ease-in-out;
}
.event-card:hover img{ transform:scale(1.05); }
.event-card .overlay{
  position:relative; z-index:1; padding:26px;
  background:linear-gradient(180deg, rgba(1,22,25,0) 0%, rgba(1,22,25,.88) 42%, rgba(1,22,25,.97) 100%);
  display:flex; flex-direction:column; gap:8px; padding-top:80px;
}
.event-card h3{ margin:0; }
/* Feste 3-Zeilen-Höhe, damit die Kachel-Überschriften im Raster auf einer Linie sitzen */
.event-card p{ color:var(--muted); font-size:15px; margin:0; line-height:1.55; min-height:calc(3 * 1.55em); }
.event-card .more{
  margin-top:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:14px;
  color:var(--secondary); transition:.2s color;
}
.event-card:hover .more{ color:var(--primary); }

/* ---- Über uns / Galerie ---- */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
@media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; } }
.about-grid img{ border-radius:var(--radius);
  box-shadow:-14px -14px 44px -8px rgba(79,5,106,.7), 14px 14px 44px -8px rgba(28,136,193,.5); }
/* ---- Eindrücke-Collage (angelehnt an die Angebotsvorlage) ---- */
.collage{
  display:grid; grid-template-columns:repeat(12, 1fr); gap:18px;
  grid-auto-rows:215px;
  max-width:1060px; margin-inline:auto;
}
.collage a{
  display:block; border-radius:var(--radius); overflow:hidden; cursor:zoom-in;
  transition:.25s box-shadow;
}
.collage a:hover{ box-shadow:0 0 34px -6px rgba(245,37,239,.55); }
.collage a:hover img{ transform:scale(1.03); }
.collage a:focus-visible{ outline:2px solid var(--secondary); outline-offset:4px; }
.collage img{ width:100%; height:100%; object-fit:cover; display:block; transition:.25s transform; }
/* Treppenartig nach rechts versetzte Reihen: lockert das Raster auf,
   gleiche Abstände und die bündige rechte Kante halten die Ordnung */
.collage .c-1{ grid-column:1/5;  grid-row:1; }
.collage .c-text{
  grid-column:5/9; grid-row:1;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
}
.collage .c-2{ grid-column:9/13; grid-row:1/3; }
.collage .c-3{ grid-column:2/9;  grid-row:2; }
.collage .c-4{ grid-column:3/7;  grid-row:3; }
.collage .c-5{ grid-column:7/13; grid-row:3; }
.collage .c-text h2{ margin-bottom:8px; font-size:clamp(32px, 3.6vw, 48px); }
.collage .c-text p{ color:var(--muted); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin:0; }
@media (max-width: 860px){
  .collage{ grid-template-columns:1fr 1fr; gap:12px; grid-auto-rows:130px; }
  .collage .c-text{ grid-row:auto; height:auto; }
  .collage .c-text{ grid-column:1/-1; grid-row:auto; order:-1; padding:0; }
  .collage .c-1, .collage .c-2, .collage .c-3, .collage .c-4, .collage .c-5{
    grid-column:auto; grid-row:auto; transform:none;
  }
  .collage .c-3{ grid-column:1/-1; }
  /* Hochkant-Foto: in der flachen Mobil-Kachel den Ausschnitt aufs Gesicht legen */
  .collage .c-2 img{ object-position:50% 26%; }
}

/* Eindrücke: BBB-Logo als schwaches Wasserzeichen-Muster über den ganzen Hintergrund.
   background-repeat:space verteilt die Logos mit gleichmäßigen Lücken, auf jeder Bildschirmbreite */
#eindruecke{ position:relative; overflow:hidden; }
#eindruecke::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image:url('/assets/img/logo.svg');
  background-size:clamp(72px, 8vw, 110px) auto;
  background-repeat:space;
  opacity:.05; pointer-events:none;
}
#eindruecke > .container{ position:relative; z-index:1; }

/* ---- Lightbox (Großansicht bei Klick) ---- */
.lightbox{
  /* über dem Consent-Banner (300), damit die Pfeile am Handy nicht verdeckt werden */
  position:fixed; inset:0; z-index:320; background:rgba(1,12,14,.94);
  display:flex; align-items:center; justify-content:center; padding:34px;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:min(1400px, 94vw); max-height:88vh; border-radius:var(--radius);
  box-shadow:0 0 80px -10px rgba(245,37,239,.4); }
.lightbox .lb-close{
  position:absolute; top:18px; right:22px;
  background:none; border:none; color:#fff; font-size:44px; line-height:1;
  cursor:pointer; font-family:var(--font); padding:6px 12px;
}
.lightbox .lb-close:hover{ color:var(--primary); }
.lightbox .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:1px solid rgba(255,255,255,.4); color:#fff;
  width:52px; height:52px; font-size:22px; cursor:pointer; transition:.2s all;
}
.lightbox .lb-nav:hover{ border-color:var(--primary); color:var(--primary); }
.lightbox .lb-prev{ left:22px; }
.lightbox .lb-next{ right:22px; }
/* Handy hochkant: Pfeile als Daumen-Buttons unten mittig, Bild bekommt mehr Platz */
@media (max-width: 700px){
  .lightbox{ padding:16px; }
  .lightbox img{ max-height:76vh; }
  .lightbox .lb-nav{
    top:auto; bottom:20px; transform:none;
    width:60px; height:46px; border-radius:10px;
    background:rgba(3,30,35,.85);
  }
  .lightbox .lb-prev{ left:calc(50% - 70px); }
  .lightbox .lb-next{ right:calc(50% - 70px); }
}

/* ---- Formular ---- */
.contact{ background:linear-gradient(180deg, transparent, rgba(79,5,106,.3)); padding-top:calc(var(--section-y) * .45); }
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:start; margin-top:clamp(80px, 10vw, 150px); }
@media (max-width: 940px){ .contact-grid{ grid-template-columns:1fr; } }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; }
@media (max-width: 640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column-reverse; align-items:start; }
.field.full{ grid-column:1 / -1; }
.field label{
  margin-top:6px; color:var(--accent); font-size:13.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
.field input,
.field select,
.field textarea{
  width:100%; background:transparent; border:none; border-bottom:1.5px solid rgba(255,255,255,.45);
  color:#fff; font-family:var(--font); font-size:16.5px; padding:10px 2px; border-radius:0;
  transition:.2s border-color;
}
.field select{ color-scheme:dark; }
/* Dropdown-Liste: explizite Farben, sonst weiße Schrift auf weißem Popup */
.field select option{ background:#fff; color:#0d1b1e; }
.field textarea{ min-height:110px; resize:vertical; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(255,255,255,.38); font-size:14px; }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--primary); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{ outline:2px solid var(--secondary); outline-offset:4px; }
.consent{ display:flex; gap:12px; align-items:flex-start; grid-column:1 / -1; font-size:14px; color:var(--muted); }
.consent input{ width:20px; height:20px; accent-color:var(--primary); margin-top:2px; flex:none; }
.form-actions{ grid-column:1 / -1; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.form-status{ font-size:15px; font-weight:600; }
.form-status.ok{ color:var(--accent); }
.form-status.err{ color:#ff7a6e; }
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

.trust-box{
  background:var(--bg-soft); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  padding:32px; display:flex; flex-direction:column; gap:24px;
}
.trust-box .stars{ color:var(--primary); letter-spacing:4px; font-size:20px; }
.trust-box blockquote{ margin:0; color:var(--muted); font-size:15.5px; }
.trust-box cite{ font-style:normal; font-weight:600; font-size:14.5px; }
.trust-box cite span{ display:block; font-weight:400; color:var(--accent); font-size:13px; }
.trust-facts{ display:grid; grid-template-columns:1fr 1fr; gap:18px; border-top:1px solid rgba(255,255,255,.1); padding-top:22px; }
.trust-facts .fact b{ display:block; font-size:26px; font-weight:700; color:#fff; }
.trust-facts .fact span{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.trust-contact{ font-size:15.5px; }
.trust-contact a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); }
.trust-contact a:hover{ border-bottom-color:var(--secondary); }

/* ---- FAQ ---- */
.faq-liste{ max-width:880px; margin:48px auto 0; }
.faq-item{
  border-bottom:1px solid rgba(255,255,255,.14);
}
.faq-item summary{
  display:flex; align-items:flex-start; gap:18px; justify-content:space-between;
  padding:22px 4px; cursor:pointer; list-style:none;
  transition:.2s color;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{
  margin:0; font-family:var(--font); font-size:clamp(17px, 1.8vw, 20px); font-weight:700;
  text-transform:none; letter-spacing:0; line-height:1.4; color:#fff;
  transition:.2s color;
}
.faq-item summary::after{
  content:'+'; flex:none; font-family:var(--font-display); font-size:32px; line-height:.8;
  color:var(--accent); transition:.25s transform, .2s color;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item summary:hover h3,
.faq-item[open] summary h3{ color:var(--accent); }
.faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.faq-antwort{ padding:0 44px 26px 4px; }
.faq-antwort p{ color:var(--muted); margin:0; max-width:72ch; }
.faq-antwort strong{ color:#fff; }
.faq-mehr{ text-align:center; margin-top:40px; }
@media (max-width: 700px){
  .faq-item summary{ padding:18px 2px; gap:12px; }
  .faq-antwort{ padding:0 2px 22px; }
}

/* FAQ-Seite: Gruppen */
.faq-seite{ padding-top:48px; }
.faq-gruppe + .faq-gruppe{ margin-top:76px; }
.faq-gruppe > h2{ margin-bottom:0; }
.faq-gruppe .faq-liste{ margin-top:26px; }

/* ---- Zitat-Raster (Referenzen-Seite) ---- */
.quote-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:28px; margin-top:48px; }
@media (max-width: 900px){ .quote-grid{ grid-template-columns:1fr; } }

/* ---- Rechtsseiten & Ratgeber-Text ---- */
.legal{ padding-block:64px 96px; }
.legal .container{ max-width:820px; }
.legal h1{ margin-bottom:.8em; }
.legal h2{ font-size:clamp(24px, 2.6vw, 32px); margin:1.8em 0 .5em; }
.legal h3{
  font-family:var(--font); font-size:18px; font-weight:700; text-transform:none;
  letter-spacing:0; color:var(--accent); margin:1.6em 0 .4em;
}
.legal p{ color:var(--muted); max-width:72ch; }
.legal ul{ color:var(--muted); max-width:72ch; margin:0 0 1.2em; padding-left:22px; }
.legal li{ margin-bottom:.4em; }
.legal a{ color:#fff; }
.legal .legal-quelle{ margin-top:2.4em; font-size:14px; opacity:.7; }
.legal .legal-stand{
  margin:-.4em 0 2em; font-size:14.5px; letter-spacing:.04em;
  color:var(--accent);
}

/* ---- Footer ---- */
.site-footer{
  border-top:1px solid rgba(255,255,255,.1); padding-block:64px 40px;
  background:#010f11;
}
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:44px; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ font-size:15px; letter-spacing:.16em; color:var(--accent); margin-bottom:16px; }
.site-footer h4.footer-sub{ margin-top:34px; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ border-bottom:1px dashed rgba(255,255,255,.16); }
.site-footer li:last-child{ border-bottom:none; }
.site-footer li a{
  display:block; padding:9px 0; text-decoration:none; font-size:15px; transition:.2s all;
}
.site-footer li a:hover{ color:var(--primary); letter-spacing:.06em; }
.hero-trust .ht-link{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:7px; border-bottom:none; }
.hero-trust .ht-link:hover{ border-bottom:none; }
.hero-trust .ht-link:hover strong{ text-decoration:underline; text-underline-offset:3px; }
.footer-social{ display:flex; gap:14px; margin-top:16px; }
.footer-social a{ color:var(--muted); display:inline-flex; width:22px; height:22px; transition:.2s color; }
.footer-social a:hover{ color:var(--primary); }
.footer-social svg{ width:100%; height:100%; fill:currentColor; }
.footer-hint{ margin:14px 0 0; font-size:13.5px; line-height:1.5; color:var(--muted); }
.footer-logo img{ height:52px; width:auto; margin-bottom:18px; }
.footer-meta{
  margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  font-size:13.5px; color:var(--muted);
}
.footer-meta a{ color:var(--muted); text-decoration:none; }
.footer-meta a:hover{ color:#fff; }

/* ---- Mobiler Sticky-CTA ---- */
.sticky-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
}
.sticky-cta a{
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; font-size:15px;
  display:flex; align-items:center; justify-content:center; padding:15px 10px;
}
.sticky-cta .sticky-angebot{ flex:1.6; background:var(--primary); color:var(--bg); }
.sticky-cta .sticky-tel{ flex:1; background:var(--bg-soft); color:#fff; border-top:1px solid rgba(255,255,255,.16); }
.sticky-cta .sticky-tel::before{ content:'📞'; margin-right:8px; }
@media (max-width: 980px){
  .sticky-cta{ display:flex; }
  body{ padding-bottom:56px; }
}

/* ---- Collage-Sticker (aus der Angebotsvorlage) ----
   Großflächig und angeschnitten wie im Angebot: ragen über den Seitenrand
   hinaus bzw. über Bildkanten – liegen aber nie über Text. */
.sticker{
  position:absolute; z-index:2; pointer-events:none; user-select:none;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.55));
}
.sticker-kamera{
  width:clamp(340px, 32vw, 470px);
  top:36px; left:-110px;
  /* gespiegelt, damit das Objektiv zum Video zeigt */
  transform:scaleX(-1) rotate(-8deg);
}
.sticker-herzhaende{
  width:clamp(400px, 38vw, 580px);
  top:-50px; right:-160px;
  transform:rotate(-6deg);
}
.sticker-lupe{
  width:clamp(360px, 34vw, 520px);
  bottom:-70px; left:-140px;
  transform:rotate(-9deg);
}
@media (max-width: 1100px){ .sticker{ display:none; } }

/* ---- Hilfsklassen ---- */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--primary); color:var(--bg);
  padding:10px 18px; z-index:200; font-weight:700;
}
.skip-link:focus{ left:0; }