/* ============================================================
   gurado — Design System / zentrale Steuerung
   Single source of truth. Wird von der Landingpage UND der
   Design-System-Uebersicht geladen. Token hier aendern
   => beide Seiten aktualisieren sich automatisch.
   ============================================================ */
/* ============================================================
   VARIANTE „NAH" — VERSION 02  (Live-Arbeitsstand)
   v01 eingefroren unter: _versionen/v01 — Nah und Mutig/
   ------------------------------------------------------------
   MIX (2 × 3) — WARM × BOLD
   Warm & menschlich (Foto, Creme, Rundungen) + selbstbewusst
   (große Typo, Geometrie, kräftiger Kontrast). Hell & luftig.
   Farben & Quicksand bleiben (gurado CI)
   ============================================================ */
:root{
  --green:#8bc220; --green-press:#6fa018;
  --cyan:#25b4de; --cyan-deep:#1b97bd;
  --amber:#efa81e; --red:#ff5541; --purple:#9b8fd4;
  --ink:#1c1a14; --text:#5a554c; --muted:#6b6560;
  --bg:#f9f9f9; --cream:#f0f0f0; --green-soft:#eef6dc; --cyan-soft:#e2f3fa; --amber-soft:#fbeecb; --red-soft:#fce8e7; --purple-soft:#ede8f9;
  --surface:#ffffff;
  --bg-dark:#2e2c2a;
  --line:rgba(40,34,22,.12); --line-2:rgba(40,34,22,.20);
  --shadow-s:0 2px 8px rgba(60,48,24,.06), 0 14px 30px -16px rgba(60,48,24,.2);
  --shadow-m:0 4px 16px rgba(60,48,24,.08), 0 40px 70px -30px rgba(60,48,24,.32);
  --r:18px; --rl:30px;
  --head:"Quicksand",system-ui,sans-serif;
  --mono:"Quicksand",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;font-family:var(--head);font-weight:500;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5;overflow-x:clip;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.02;letter-spacing:-.03em;margin:0;color:var(--ink);}
.wrap{width:min(1600px,100% - 56px);margin-inline:auto;}

/* ---------- LEAD · einheitlicher Section-Subtitle ---------- */
.lead{margin:18px auto 0;font-size:clamp(1.04rem,1.25vw,1.22rem);font-weight:600;color:var(--text);line-height:1.5;max-width:34em;text-wrap:pretty;}
.lead b{color:var(--ink);font-weight:700;}
/* helle Schrift auf dunklen Sektionen */
.modules .lead,.faq .lead,.cta-band .lead,.integ-in .lead{color:rgba(255,255,255,.74);}
.modules .lead b,.faq .lead b,.cta-band .lead b,.integ-in .lead b{color:#fff;}
/* Modul-Layouts mit hellem Hintergrund → wieder dunkle Schrift */
.modules[data-mlayout="hoch"] .lead,.modules[data-mlayout="bentohell"] .lead{color:var(--text);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--head);
  font-weight:700;font-size:1.02rem;padding:15px 26px;border-radius:999px;border:1.5px solid transparent;
  line-height:1;white-space:nowrap;transition:transform .14s,box-shadow .2s,background .2s,border-color .2s;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--head);
  font-weight:700;font-size:1.02rem;padding:15px 26px;border-radius:999px;border:1.5px solid transparent;
  line-height:1;white-space:nowrap;box-shadow:var(--shadow-s);
  transition:transform .14s,box-shadow .2s,background .2s,border-color .2s;}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-m);}
.btn-primary{background:var(--green);color:#fff;}
.btn-primary:hover{background:var(--green-press);}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{background:var(--green-press);}
.btn-cyan{background:var(--cyan);color:#fff;}
.btn-cyan:hover{background:var(--cyan-deep);}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-lg{padding:17px 30px;font-size:1.06rem;}
.btn-sm{padding:11px 20px;}

/* ---------- HEADER ---------- */
.hdr{position:sticky;top:2rem;z-index:50;margin-top:3rem;}
/* Topbar */
.hdr-topbar{background:transparent;border-bottom:none;position:relative;z-index:201;transition:color .25s ease;}
.hdr-topbar-in{display:flex;align-items:center;justify-content:flex-end;gap:4px;height:38px;padding-right:4px;}
.hdr-topbar-in .login{font-size:.88rem;font-weight:600;color:var(--text);padding:6px 12px;transition:color .25s ease;}
.hdr-topbar-in .lang-toggle{padding:4px 12px;font-size:.88rem;}
.hdr-topbar-in .btn-sm{font-size:.88rem;padding:6px 18px;}
/* On-dark: service-navi invertiert sich, wenn sie über dunklem Hintergrund schwebt */
.hdr-topbar.on-dark .tb-mini-btn,
.hdr-topbar.on-dark .login{color:rgba(255,255,255,.82);}
.hdr-topbar.on-dark .tb-mini-btn:hover{color:#fff;}
.hdr-topbar.on-dark .tb-mini-btn:hover,
.hdr-topbar.on-dark .lang-toggle:hover{background:rgba(255,255,255,.12);}
.hdr-topbar.on-dark .lang-toggle{color:rgba(255,255,255,.82);}
.hdr-topbar.on-dark .lang-active{color:#fff;}
.hdr-topbar.on-dark .lang-sep,
.hdr-topbar.on-dark .lang-other{color:rgba(255,255,255,.55);}
/* Main nav bar */
.hdr-in{display:grid;grid-template-columns:1fr auto auto;align-items:center;height:74px;padding:0 64px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-s);margin:8px auto 6px;
  max-width:1200px;width:calc(100% - 56px);}
.hdr-in .nav{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-right:24px;}
.hdr-actions{display:flex;align-items:center;gap:8px;}
.hdr-in .nav,.hdr-actions{align-self:center;}
.hdr-cta{flex-shrink:0;}
.gift{position:relative;display:grid;grid-template-columns:repeat(4,7px);grid-auto-rows:7px;gap:2px;}
.gift i{display:block;width:7px;height:7px;border-radius:2px;background:var(--gc,#8bc220);}
.gift::before,.gift::after{content:"";position:absolute;top:-5px;width:7px;height:7px;border-radius:3px 3px 0 3px;background:var(--cyan);}
.gift::before{left:8px;transform:rotate(-18deg);}
.gift::after{right:8px;transform:rotate(18deg) scaleX(-1);}
.brand-word{font-family:var(--head);font-weight:700;font-size:2.6rem;letter-spacing:-.02em;color:var(--ink);line-height:1;}
.nav{display:flex;align-items:center;gap:2px;}
.nav a:not(.btn){font-size:1.1rem;font-weight:700;color:var(--ink);padding:9px 15px;border-radius:999px;transition:background .2s;}
.nav a:not(.btn):hover{background:var(--cream);}
.nav .btn{margin-left:10px;}
.hdr-right{display:none;}
/* Language Toggle */
.lang-toggle{display:flex;align-items:center;gap:4px;font-family:var(--head);font-weight:700;font-size:.9rem;
  background:transparent;border:none;border-radius:999px;padding:6px 14px;cursor:pointer;
  color:var(--ink);transition:color .18s,background .18s;}
.lang-toggle:hover{background:var(--cream);}
.lang-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.lang-active{color:var(--ink);}
.lang-sep{color:var(--muted);margin:0 1px;}
.lang-other{color:var(--muted);}
/* Blue Login Button — siehe einheitliche .btn-cyan oben */

/* ---------- MEGA MENU ---------- */
.nav-item{display:flex;align-items:center;}
.nav-btn{font:inherit;font-size:1.1rem;font-weight:700;color:var(--ink);
  padding:9px 15px;border-radius:999px;background:none;border:0;
  display:flex;align-items:center;gap:5px;cursor:pointer;line-height:1;
  transition:background .2s;}
.nav-btn:hover,.nav-item.open .nav-btn{background:var(--cream);}
.nav-chevron{display:none;}
.nav-item.open .nav-chevron{transform:rotate(180deg);}

/* Panel wrapper — floating card below header */
.mega-panel{
  position:absolute;top:100%;left:50%;
  width:min(1280px,calc(100vw - 48px));
  transform:translateX(-50%) translateY(-8px);
  z-index:200;padding-top:8px;
  opacity:0;pointer-events:none;
  transition:opacity .22s,transform .26s cubic-bezier(.4,0,.2,1);}
.mega-panel.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.mega-panel-bd{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow-m);
  padding:28px 32px;}

/* 3-column inner grid */
.mega-inner{
  display:grid;
  grid-template-columns:280px 1fr 380px;
  gap:24px;
  align-items:start;}

/* ── Left: Visual placeholder ── */
.mega-visual{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  align-self:stretch;
  min-height:250px;
  background:var(--cream);}
.mega-vis-slot{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .38s ease;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:22px;}
.mega-vis-slot.active{opacity:1;}
.mega-vis-bg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;}
.mega-vis-caption{
  position:relative;z-index:1;
  font-family:var(--mono);font-size:.64rem;font-weight:700;line-height:1.55;
  color:var(--text);
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.07);
  border-radius:12px;
  padding:12px 16px;
  max-width:230px;
  text-align:center;}
.mega-vis-caption strong{display:block;color:var(--ink);margin-bottom:5px;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;}

/* ── Middle: Products ── */
.mega-products{display:flex;flex-direction:column;gap:2px;}
.mega-hed{font-size:3.1rem;font-weight:700;color:var(--ink);letter-spacing:-.035em;margin:0 0 12px;line-height:1.02;}
.mega-card{
  display:block;text-decoration:none;
  padding:11px 14px;border-radius:14px;
  border:1.5px solid transparent;
  transition:background .16s,border-color .16s;}
.mega-card:hover,.mega-card.hi{background:var(--bg);border-color:var(--line);}
/* Category tag — small mono colored label (inspired by .mod-cat) */
.mega-card-cat{
  display:flex;align-items:flex-end;gap:9px;
  font-family:var(--head);font-size:1.2rem;
  letter-spacing:-.01em;text-transform:none;font-weight:700;
  color:var(--ink);line-height:1.2;
  margin-bottom:3px;}
/* Subline — muted and smaller */
.mega-card-title{font-size:1rem;font-weight:500;color:var(--muted);line-height:1.35;margin:0;}
/* Akzentpunkt vor dem Label — Farbe ohne Kontrastproblem */
.mega-card-cat::before{ content:none; display:none; }
.mega-card[data-color="green"]  .mega-card-cat{--dot-c:var(--green);}
.mega-card[data-color="amber"]  .mega-card-cat{--dot-c:var(--amber);}
.mega-card[data-color="purple"] .mega-card-cat{--dot-c:var(--purple);}
.mega-card[data-color="dark"]   .mega-card-cat{--dot-c:var(--red);}
.mega-card[data-color="cyan"]   .mega-card-cat{--dot-c:var(--cyan);}
.mega-card[data-color="red"]    .mega-card-cat{--dot-c:var(--red);}
/* Branchen-Mega: alle Akzentpunkte in Blau */
#mega-branchen .mega-card-cat{--dot-c:var(--cyan);}
/* Branchen-Mega: mittlere Spalte zweispaltig füllen */
#mega-branchen .mega-products{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;align-content:start;}
#mega-branchen .mega-hed{grid-column:1 / -1;}

/* ── Right: Features ── */
.mega-features{border-left:1px solid var(--line);padding-left:32px;}
.mega-feat-hed{font-size:.95rem;font-weight:800;color:var(--ink);letter-spacing:.04em;
  text-transform:uppercase;margin:2px 0 16px;padding-left:12px;}
.mega-feat-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;}
.mega-feat-list li a{
  font-size:.92rem;font-weight:500;color:var(--text);
  display:block;padding:7px 12px;border-radius:8px;
  text-decoration:none;
  transition:background .15s,color .15s;}
.mega-feat-list li a:hover{background:var(--cream);color:var(--ink);}
.mega-feat-list li.feat-bold a{font-weight:700;color:var(--ink);}
.mega-feat-list li.feat-sep{height:10px;}
/* Branchen-Mega: zwei Listengruppen + etwas breitere rechte Spalte */
#mega-branchen .mega-inner{grid-template-columns:280px 1fr 300px;}
.mega-feat-grp + .mega-feat-grp{margin-top:22px;}

/* ── Mini-Mega Menus (Topbar) ── */
.topbar-item{position:relative;}
.tb-mini-btn{background:none;border:none;border-radius:999px;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--text);padding:6px 12px;display:flex;align-items:center;gap:3px;font-family:inherit;line-height:1;transition:color .25s ease,background .18s ease;}
.tb-mini-btn:hover{color:var(--ink);}
.mini-panel{
  position:absolute;top:calc(100% + 6px);right:0;
  width:600px;z-index:200;
  opacity:0;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .22s,transform .26s cubic-bezier(.4,0,.2,1);}
.mini-panel.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.mini-panel-bd{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow-m);
  padding:28px 32px;}
.mini-inner{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.mini-col{display:flex;flex-direction:column;gap:14px;}
.mini-col-left{padding-right:32px;}
.mini-col-right{border-left:1px solid var(--line);padding-left:32px;}
.mini-col-hed{font-family:var(--head);font-size:1rem;font-weight:700;color:var(--ink);margin:0;line-height:1.2;}
.mini-col-body{font-size:.92rem;color:var(--muted);line-height:1.6;margin:0;flex:1;}
.mini-col-body strong{color:var(--ink);}
.mini-col-contact{display:flex;align-items:center;gap:9px;font-size:.95rem;color:var(--muted);margin:0;line-height:1.4;text-decoration:none;}
.mini-col-contact:hover{color:var(--ink);}
.mini-col-contact strong{color:var(--ink);font-weight:700;}
.mini-col-cta{width:100%;text-align:center;margin-top:auto;}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;
  padding:clamp(14px,1.8vw,26px) 0 clamp(8px,1.2vw,16px);}
@media (min-width:900px){.hero-in{min-height:65vh;padding-top:clamp(10px,1.5vw,20px);}}
.hero h1{font-size:clamp(2.9rem,5.8vw,4.9rem);letter-spacing:-.035em;margin-top:26px;}
.hero h1 .hl{color:var(--green);}
.hero h1 .box{display:inline-block;background:var(--cyan);color:#fff;padding:0 .1em;border-radius:14px;transform:rotate(-1.5deg);}
.hero h1 .nb{white-space:nowrap;}
.hero-sub{margin:28px 0 0;font-size:clamp(1.08rem,1.4vw,1.32rem);line-height:1.55;color:var(--text);max-width:27em;font-weight:600;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;}
.hero-trust{display:flex;align-items:center;gap:13px;margin-top:38px;}
.avatars{display:flex;}
.avatars i{width:36px;height:36px;border-radius:50%;border:3px solid var(--bg);margin-left:-12px;
  background:repeating-linear-gradient(135deg,#dfe7c8 0 6px,#eef6dd 6px 12px);}
.avatars i:first-child{margin-left:0;}
.avatars i:nth-child(2){background:repeating-linear-gradient(135deg,#cfe9f3 0 6px,#e1f3fa 6px 12px);}
.avatars i:nth-child(3){background:repeating-linear-gradient(135deg,#f3e3c2 0 6px,#fbf2dc 6px 12px);}
.avatars i{overflow:hidden;}
.avatars i img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-trust .tx{font-size:.9rem;font-weight:600;color:var(--muted);line-height:1.25;}
.hero-trust .tx b{color:var(--ink);}

/* hero visual: warm photo + bold frame + geometry */
.shot{position:relative;min-height:440px;display:grid;place-items:center;}
/* ── Hero großer Platzhalter ── */
.hero-ph{width:100%;min-height:clamp(440px,42vw,560px);border-radius:24px;
  background:repeating-linear-gradient(135deg,#e7e7e7 0 16px,#f2f2f2 16px 17px),var(--cream);
  border:1px solid var(--line);display:grid;place-items:center;}
.hero-ph-lab{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:rgba(255,255,255,.82);border:1.5px solid var(--line-2);
  padding:9px 18px;border-radius:999px;}
/* ── Hero-Bild + schwebende Quadrate ── */
.hero-vis{position:relative;width:calc(100% + clamp(48px,8vw,160px));max-width:none;margin-right:calc(-1 * clamp(48px,8vw,160px));margin-bottom:-72px;transform:translate(-50px,78px) scale(1.1);transform-origin:center bottom;}
.hero-img{width:100%;height:auto;display:block;}
.hero-sq{position:absolute;border-radius:24%;box-shadow:0 7px 18px -7px rgba(30,40,20,.3);will-change:transform;}
/* Positionen passend zur neuen header.png: Handy links, Karten rechts, Bubbles verteilt */
.hero-sq.s1{width:22px;height:22px;background:var(--green);top:2%;left:62%;--r:-9deg;}
.hero-sq.s2{width:14px;height:14px;background:#a8d63a;top:7%;left:76%;--r:6deg;}
.hero-sq.s3{width:19px;height:19px;background:var(--cyan);top:5%;left:6%;--r:5deg;}
.hero-sq.s4{width:16px;height:16px;background:var(--red);top:44%;left:-2%;--r:-6deg;}
.hero-sq.s5{width:24px;height:24px;background:var(--amber);top:91%;left:10%;--r:8deg;}
.hero-sq.s6{width:15px;height:15px;background:var(--purple);top:87%;left:62%;--r:-5deg;}
.hero-sq.s7{width:18px;height:18px;background:var(--cyan);top:48%;left:94%;--r:4deg;}
@media (prefers-reduced-motion:no-preference){
  .hero-sq{animation:heroSqFloat 7s ease-in-out infinite;}
  .hero-sq.s2{animation-duration:8.4s;animation-delay:-1.5s;}
  .hero-sq.s3{animation-duration:6.6s;animation-delay:-3s;}
  .hero-sq.s4{animation-duration:8s;animation-delay:-2.2s;}
  .hero-sq.s5{animation-duration:7.4s;animation-delay:-4s;}
  .hero-sq.s6{animation-duration:9s;animation-delay:-1s;}
  .hero-sq.s7{animation-duration:8.2s;animation-delay:-2.8s;}
}
@keyframes heroSqFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}
  50%{transform:translateY(-12px) rotate(calc(var(--r,0deg) + 7deg));}}
@media (max-width:560px){.hero-sq{display:none;}}
/* Große Desktops: Hero breiter & größer, damit es nicht leer wirkt */
@media (min-width:1500px){
  .hero .wrap{width:min(1880px,100% - 80px);}
  .hero-in{gap:clamp(20px,2vw,40px);min-height:60vh;grid-template-columns:1.05fr 1fr;}
  .hero h1{font-size:clamp(4.9rem,5.5vw,6.4rem);}
  .hero-sub{font-size:1.5rem;max-width:30em;margin-top:34px;}
  .hero-cta{margin-top:46px;}
  .hero-vis{margin-bottom:-100px;width:calc(100% + clamp(80px,10vw,200px));margin-right:calc(-1 * clamp(80px,10vw,200px));transform:translate(-60px,82px) scale(1.1);transform-origin:center bottom;}
}

/* ── Hero Platzhalter (siehe oben) ── */
.photo{position:relative;z-index:2;width:min(390px,100%);aspect-ratio:4/4.5;border-radius:var(--rl);overflow:hidden;
  background:repeating-linear-gradient(135deg,#e7e7e7 0 14px,#f2f2f2 14px 15px),var(--cream);
  border:1px solid var(--line);box-shadow:var(--shadow-m);display:grid;place-items:center;}
/* ── Unified photo placeholder label ── */
.photo .ph-lab,
.feat-media .lab,
.blog-media .lab {
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.03em;
  color:var(--text);background:rgba(255,255,255,.94);
  border:1px solid var(--line);padding:8px 14px;border-radius:999px;
  box-shadow:0 2px 8px rgba(60,48,24,.07);
}
.photo .ph-lab::before,
.feat-media .lab::before,
.blog-media .lab::before {
  content:"";flex-shrink:0;
  display:block;width:16px;height:12px;
  border:1.5px solid var(--muted);border-radius:3px;
  position:relative;
}
/* small lens dot inside the frame icon */
.photo .ph-lab::before{
  background:radial-gradient(circle at 38% 40%,var(--muted) 2.5px,transparent 2.5px);
}
.feat-media .lab::before,
.blog-media .lab::before {
  background:radial-gradient(circle at 38% 40%,var(--muted) 2.5px,transparent 2.5px);
}
/* ── Real photo fill ── */
.photo>img,.feat-media>img,.blog-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;}
.photo.has-img,.feat-media.has-img,.blog-media.has-img{background:#e7e7e7;}
.chip{position:absolute;z-index:3;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-m);padding:12px 15px;display:flex;align-items:center;gap:12px;}
.chip .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:1.05rem;flex-shrink:0;}
.chip .ct{display:flex;flex-direction:column;white-space:nowrap;}
.chip .t1{font-size:.9rem;font-weight:700;color:var(--ink);line-height:1.15;}
.chip .t2{font-size:.75rem;font-weight:700;color:var(--muted);}
.chip-sale{top:34px;left:-26px;}
.chip-sale .ic{background:var(--green-soft);}
.chip-bonus{bottom:42px;right:-22px;}
.chip-bonus .ic{background:var(--cyan-soft);}
.chip-bonus .mini{display:flex;gap:4px;margin-top:6px;}
.chip-bonus .mini i{width:11px;height:11px;border-radius:50%;background:var(--green);}
.chip-bonus .mini i.off{background:var(--line-2);}

/* ---------- BONUS TEASER (Stempelkarte · full-bleed, dunkel) ---------- */
.teaser{position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--bg-dark);color:#fff;
  overflow-x:clip;overflow-y:visible;padding:clamp(32px,3.5vw,52px) 0;}
.teaser::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;}
.teaser .wrap{position:relative;z-index:2;}
.teaser-band{background:transparent;border-radius:0;padding:0;color:#fff;position:static;overflow:visible;
  display:grid;grid-template-columns:minmax(auto,520px) minmax(auto,420px);justify-content:center;gap:clamp(24px,3vw,48px);align-items:center;}
.teaser-band .deco{display:none;}
.teaser-band .deco2{display:none;}
@media (max-width:760px){.teaser-band{grid-template-columns:1fr;gap:32px;}}
.tease-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:var(--ink);background:var(--green);padding:6px 13px;border-radius:999px;margin-bottom:16px;}
.teaser h2{font-size:clamp(1.7rem,2.9vw,2.4rem);letter-spacing:-.03em;color:#fff;position:relative;}
.teaser h2 .hl{color:#fff;}
.teaser p{margin:13px 0 0;font-size:1.02rem;line-height:1.55;color:rgba(255,255,255,.74);max-width:32em;position:relative;}
.teaser-link{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-weight:700;color:var(--cyan);position:relative;}
.btn.teaser-link{color:#fff;}
.teaser-link .arr{transition:transform .2s;}.teaser-link:hover .arr{transform:translateX(4px);}

/* Wallet-Verfügbarkeit (Apple / Google Wallet) */
.wallet-strip{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:clamp(28px,3.5vw,48px);padding-top:clamp(24px,3vw,36px);
  border-top:1px solid rgba(255,255,255,.1);text-align:center;}
.wallet-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.55);}
.wallet-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.wallet-chip{display:inline-flex;align-items:center;gap:11px;
  padding:10px 18px 10px 13px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font-family:var(--head);font-weight:600;font-size:1rem;color:#fff;letter-spacing:-.01em;}
.wallet-chip img{height:28px;width:auto;display:block;border-radius:7px;}
/* Variante für hellen Grund: links ausgerichtet, ohne Trennlinie */
.wallet-strip--light{align-items:flex-start;text-align:left;margin-top:0;padding-top:0;border-top:0;}
.wallet-strip--light .wallet-label{color:var(--muted);}
.wallet-strip--light .wallet-chips{justify-content:flex-start;}
.wallet-strip--light .wallet-chip{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-s);}

.bcard-wrap{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;overflow:visible;}
.bcard-wrap img{height:min(920px,95vw);width:auto;max-width:none;object-fit:contain;display:block;margin:-200px 0 -80px;}
.bcard{width:min(340px,100%);background:#fff;border-radius:22px;box-shadow:0 26px 52px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);padding:20px;color:var(--text);}
.bcard-ph{width:min(492px,100%);aspect-ratio:7/5;border-radius:22px;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,#e7e7e7 0 15px,#f2f2f2 15px 16px);border:1px solid var(--line);
  color:var(--muted);font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 26px 52px -24px rgba(0,0,0,.45);}
.bc-h{display:flex;align-items:center;gap:12px;margin-bottom:15px;}
.bc-logo{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--amber),#f6c25a);display:grid;place-items:center;font-size:1.3rem;}
.bc-name{font-family:var(--head);font-weight:700;color:var(--ink);font-size:1.08rem;line-height:1.1;}
.bc-sub{font-size:.82rem;color:var(--muted);font-weight:600;}
.bc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
.stp{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:2px dashed var(--line-2);color:var(--muted);font-weight:800;}
.stp.on{border:0;background:var(--green);color:#fff;box-shadow:0 5px 14px -5px rgba(120,170,30,.9);}
.stp.rw{border:2px solid var(--amber);background:var(--amber-soft);color:#c9870f;font-size:1.4rem;position:relative;}
.stp.rw::after{content:"GRATIS";position:absolute;bottom:-7px;font-family:var(--mono);font-size:.46rem;letter-spacing:.05em;font-weight:700;background:var(--amber);color:#fff;padding:2px 6px;border-radius:999px;}
.bc-f{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.9rem;font-weight:700;color:var(--ink);}
.bc-f .pill{margin-left:auto;font-family:var(--mono);font-size:.72rem;background:var(--green-soft);color:var(--green-press);padding:5px 11px;border-radius:999px;}

/* ---------- LOGO BANNER (full-bleed, durchlaufend) ---------- */
.logos{width:100vw;margin-left:calc(50% - 50vw);
  background:var(--bg-dark);color:#fff;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);overflow:hidden;position:relative;
  height:clamp(7rem,10vw,10rem);display:flex;align-items:center;margin-top:0;}
.logos::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;}
.logos>*{position:relative;z-index:1;}
.logos-lead{position:absolute;left:0;top:0;z-index:3;height:100%;margin:0;
  display:flex;align-items:center;
  inline-size:min(36rem,56%);padding-left:clamp(22px,5vw,72px);padding-right:clamp(40px,7vw,110px);
  background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 56%,transparent 100%);}
.logos-lead span{text-align:left;text-wrap:balance;
  font-size:clamp(.95rem,1.25vw,1.2rem);font-weight:700;line-height:1.32;letter-spacing:-.012em;color:#fff;}
.logos-lead b{font-weight:700;}
.logos-lead .n-green{color:#a9da4e;}
.logos-lead .n-cyan{color:#4ec7e8;}
.marquee{width:100%;margin:0;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.marquee-track{display:flex;align-items:center;gap:clamp(48px,6vw,80px);width:max-content;
  animation:scroll-x 46s linear infinite;will-change:transform;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;}}
@keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.logo-item{flex:0 0 auto;width:auto;display:flex;align-items:center;justify-content:center;height:clamp(46px,6vw,64px);}
/* Fixed HEIGHT + width:auto: box hugs the logo, gaps stay constant.
   A definite height also lets viewBox-only SVGs (Dorint/Hardeck/Dinzler/Tee) compute their width
   instead of collapsing to 0. No max-width → no floating ink → no uneven gaps. */
.logo-item img{height:clamp(30px,3.4vw,42px);width:auto;
  filter:grayscale(1) brightness(0) invert(1);opacity:1;}
/* Optical normalisation: tame very wide wordmarks, lift very compact marks.
   Done via HEIGHT only, so width:auto keeps hugging the ink and gaps remain even. */
.logo-item img[alt="Burlington"],
.logo-item img[alt="Tee Gschwender"]{height:clamp(19px,2.1vw,26px);}
.logo-item img[alt="Sonnentor"],
.logo-item img[alt="Falke"]{height:clamp(24px,2.7vw,33px);}
.logo-item img[alt="sonnenklar.TV"],
.logo-item img[alt="Lotto Bayern"]{height:clamp(27px,3vw,37px);}
.logo-item img[alt="Snow Dome Bispingen"],
.logo-item img[alt="Dinzler Kaffeerösterei"],
.logo-item img[alt="Megazoo"],
.logo-item img[alt="Espitas"]{height:clamp(34px,3.9vw,48px);}

/* ---------- USP-BLOCK (Feature-Spalten) ---------- */
.usps{padding:clamp(50px,6vw,98px) 0 clamp(24px,3vw,46px);}
.usps-head{text-align:center;max-width:32em;margin:0 auto clamp(34px,4.2vw,60px);}
.usps-head h2{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em;line-height:1.05;text-wrap:balance;}
.usps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.8vw,44px);}
.feat{display:flex;flex-direction:column;}
.feat-media{aspect-ratio:4/3;border-radius:18px;overflow:hidden;position:relative;margin-bottom:clamp(16px,1.6vw,22px);
  border:1px solid var(--line);box-shadow:var(--shadow-s);display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,#e7e7e7 0 14px,#f2f2f2 14px 15px),var(--cream);}
.feat h3{font-size:clamp(1.2rem,1.5vw,1.5rem);letter-spacing:-.02em;color:var(--ink);line-height:1.14;text-wrap:balance;}
.feat p{margin:11px 0 0;font-size:1rem;line-height:1.55;color:var(--text);font-weight:500;text-wrap:pretty;}
@media (max-width:760px){.usps-grid{grid-template-columns:1fr;gap:38px;}}

/* Vorteile-Karten (2 groß + 3) */
.adv-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,1.8vw,22px);}
.adv{grid-column:span 2;display:flex;flex-direction:column;gap:clamp(13px,1.4vw,17px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);
  padding:clamp(22px,2.4vw,32px);transition:transform .16s,box-shadow .22s,border-color .2s;}
.adv:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--line-2);}
.adv-lg{grid-column:span 3;}
.adv-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex-shrink:0;
  background:var(--soft,var(--green-soft));color:var(--acc,var(--green-press));}
.adv-ic svg{width:26px;height:26px;}
.adv h3{font-size:clamp(1.18rem,1.5vw,1.5rem);letter-spacing:-.02em;color:var(--ink);line-height:1.12;text-wrap:balance;}
.adv p{margin:0;font-size:1rem;line-height:1.55;color:var(--text);font-weight:500;text-wrap:pretty;}
@media (max-width:880px){.adv-grid{grid-template-columns:1fr 1fr;}.adv,.adv-lg{grid-column:auto;}}
@media (max-width:540px){.adv-grid{grid-template-columns:1fr;}}

/* Vorteile · Aufklapp-Galerie — Nah-Styling (hell & warm, weiße Karten, grüner Akzent) */
.vgal{display:flex;gap:14px;margin-top:clamp(34px,4vw,50px);height:520px;}
.vcard{position:relative;flex:1 1 0;min-width:88px;border-radius:var(--rl);overflow:hidden;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
  transition:flex-grow .55s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .2s,transform .25s cubic-bezier(.4,0,.2,1);}
.vcard:not(.open):hover{box-shadow:var(--shadow-m);transform:translateY(-5px);}
.vcard.open{flex-grow:3.4;cursor:default;box-shadow:var(--shadow-m);}
.vcard:not(.open){background:#e7e7e7;}
.vc-photo{position:absolute;inset:0;background:#e7e7e7;transition:opacity .4s;}
.vc-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;}
/* geschlossene Karte: Foto sichtbar mit dunklem Verlauf für Lesbarkeit */
.vcard:not(.open) .vc-photo::after{display:none;}
.vcard:not(.open) .vc-photo .corner{opacity:0;}
.vc-photo .corner{position:absolute;top:0;right:0;display:grid;grid-template-columns:repeat(3,8px);grid-auto-rows:8px;gap:3px;padding:14px;z-index:1;}
.vc-photo .corner i{width:8px;height:8px;border-radius:2px;background:var(--green);}
.vc-photo .corner i:nth-child(odd){opacity:.4;}
/* offene Karte: weiße Textkarte über dem Foto */
.vc-inner{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.55);border-radius:18px;box-shadow:var(--shadow-s);padding:22px 24px 30px;}
.vcard:not(.open) .vc-inner{top:50%;bottom:14px;left:14px;right:auto;width:52px;padding:0 0 18px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:rgba(255,255,255,.65);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.7);border-radius:16px;box-shadow:var(--shadow-s);}
.vcard:not(.open) .vc-num{display:none;}
.vcard:not(.open) .vc-head{position:relative;top:auto;bottom:auto;left:auto;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:clamp(1.25rem,1.7vw,1.6rem);font-weight:800;line-height:1;color:var(--ink);text-shadow:none;letter-spacing:-.01em;flex:none;}
.vcard:not(.open) .vc-detail{display:none;}
.vc-num{display:none;}
.vcard:not(.open) .vc-short{display:inline;}
.vcard:not(.open) .vc-long{display:none;}
.vcard.open .vc-short{display:none;}
.vcard.open .vc-long{display:inline;}
.vc-head{display:block;font-family:var(--head);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.12;font-size:1.2rem;}
.vcard.open .vc-head{font-size:clamp(1.35rem,1.9vw,1.8rem);max-width:18ch;}
.vc-detail{display:block;overflow:hidden;max-height:0;opacity:0;margin-top:0;max-width:46ch;transition:max-height .5s,opacity .4s,margin .4s;}
.vcard.open .vc-detail{max-height:280px;opacity:1;margin-top:12px;}
.vc-detail p{font-size:1rem;color:#33302a;margin:0;line-height:1.55;font-weight:500;}
.vc-more{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-family:var(--head);font-weight:700;font-size:.94rem;color:#fff;background:var(--green);border-radius:999px;padding:11px 18px;box-shadow:none;transition:transform .14s;}
.vc-more:hover{transform:translateY(-1px);}
.vc-more .a{transition:transform .2s;} .vc-more:hover .a{transform:translateX(3px);}
.vc-more{display:none!important;}
.vc-photo .corner{display:none;}
.vc-arrow{position:absolute;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);color:var(--ink);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-s);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;z-index:3;transition:opacity .3s,transform .2s;}
.vcard:hover .vc-arrow{transform:scale(1.06);}
.vcard.open .vc-arrow{opacity:0;pointer-events:none;}
@media(max-width:860px){
  .vgal{flex-direction:column;height:auto;}
  /* Mobile: alle Karten immer vollständig offen – kein Klapp-Muster */
  .vcard{flex:none;height:auto;min-height:300px;cursor:default;transition:none;}
  .vcard:not(.open) .vc-inner{
    top:auto;left:14px;right:14px;bottom:14px;width:auto;
    flex-direction:column;align-items:flex-start;
    padding:18px 20px 22px;
    background:rgba(255,255,255,.82);
  }
  .vcard:not(.open) .vc-head{
    writing-mode:horizontal-tb;transform:none;
    position:static;white-space:normal;
    font-size:clamp(1.1rem,4vw,1.4rem);font-weight:800;
    color:var(--ink);letter-spacing:-.02em;line-height:1.15;
  }
  .vcard:not(.open) .vc-detail{display:block;max-height:300px;opacity:1;margin-top:8px;}
  .vcard:not(.open) .vc-short{display:none;}
  .vcard:not(.open) .vc-long{display:inline;}
  .vc-detail,.vcard .vc-head{max-width:none;}
  .vc-inner{left:14px;right:14px;bottom:14px;}
  .vc-arrow{display:none;}
}

/* Vorteile / Conversion-Band (eigene Section, cremefarben abgesetzt) */
.conv{width:100vw;margin-left:calc(50% - 50vw);background:#f0f0f0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(54px,6.5vw,104px) 0;}
.conv .usps-head{margin-bottom:clamp(30px,3.8vw,52px);}
.conv .eyebrow{margin-bottom:18px;}

/* ---------- FLOW / KAUFPROZESS (Slider + Laptop-Mockup) ---------- */
.flow{padding:clamp(46px,5.6vw,90px) 0 clamp(28px,3.6vw,54px);}
.flow-head{text-align:center;max-width:42em;margin:0 auto clamp(24px,3vw,40px);}
.flow-head h2{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em;line-height:1.05;margin-top:16px;}
.flow-head p{margin:15px auto 0;color:var(--text);font-weight:600;font-size:clamp(1.02rem,1.2vw,1.16rem);max-width:30em;}

/* Tab-Leiste */
.flow-tabs{display:flex;gap:12px;max-width:1140px;margin:0 auto clamp(18px,2vw,26px);flex-wrap:wrap;}
.flow-tab{position:relative;flex:1 1 0;min-width:140px;display:flex;align-items:center;
  padding:16px 20px 17px;border-radius:16px;border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow-s);cursor:pointer;font:inherit;text-align:left;overflow:hidden;
  transition:flex-grow .45s cubic-bezier(.65,0,.22,1),background .25s,border-color .25s;}
.flow-tab .flow-tab-lb{font-family:var(--mono);font-weight:700;font-size:.84rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s;}
.flow-tab:hover{border-color:color-mix(in srgb,var(--green) 40%,var(--line));}
.flow-tab[aria-selected="true"]{flex-grow:2.4;background:var(--green-soft);
  border-color:color-mix(in srgb,var(--green) 55%,var(--line));}
.flow-tab[aria-selected="true"] .flow-tab-lb{color:var(--ink);}
.flow-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--green) 18%,transparent);}
.flow-prog-fill{display:block;height:100%;width:100%;background:var(--green);transform:scaleX(0);transform-origin:left;}
.flow-tab[aria-selected="false"] .flow-prog{opacity:0;}

/* Panel */
.flow-stage{max-width:1140px;margin:0 auto;}
.flow-panel{position:relative;display:flex;border-radius:24px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 34px 78px -38px rgba(30,60,55,.42);
  min-height:clamp(340px,37vw,460px);}
.flow-slide{display:none;flex:1;grid-template-columns:minmax(260px,40%) 1fr;}
.flow-slide.is-active{display:grid;}
.flow-panel-copy{padding:clamp(28px,3.6vw,56px);display:flex;flex-direction:column;justify-content:center;z-index:2;}
.flow-panel-copy h3{font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.06;margin:0 0 16px;color:var(--ink);}
.flow-panel-copy p{font-size:clamp(1.04rem,1.25vw,1.22rem);color:var(--text);font-weight:600;
  line-height:1.5;margin:0;max-width:22em;text-wrap:pretty;}
.flow-panel-vis{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--cyan),var(--cyan-deep));}
.flow-shot{position:absolute;top:clamp(26px,3vw,42px);left:clamp(20px,2.4vw,38px);width:106%;
  border-radius:12px;border:1px solid var(--line);
  box-shadow:0 26px 56px -20px rgba(30,22,8,.4),0 2px 8px rgba(0,0,0,.08);display:block;}
@media (prefers-reduced-motion:no-preference){
  .flow-slide.is-active .flow-panel-copy>*{animation:capfade .5s ease both;}
}
@keyframes capfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:760px){
  .flow-tabs{gap:8px;}
  .flow-tab{flex:1 1 calc(50% - 4px);min-width:0;padding:12px 14px;}
  .flow-tab[aria-selected="true"]{flex-grow:1;}
  .flow-panel{display:block;min-height:0;}
  .flow-slide{grid-template-columns:1fr;}
  .flow-slide.is-active{display:block;}
  .flow-panel-copy{padding:24px 22px 6px;}
  .flow-panel-vis{padding:16px 0 24px 18px;}
  .flow-shot{position:relative;top:0;left:0;width:114%;max-width:none;}
}

/* generic pane bits */
.fp-tag{position:absolute;top:14px;left:16px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);padding:5px 10px;border-radius:999px;z-index:3;}

/* 1 — Editor */
.ed{display:grid;grid-template-columns:150px 1fr;gap:clamp(14px,2vw,26px);width:100%;height:100%;}
.ed-side{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:9px;}
.ed-h{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.ed-thumb{height:30px;border-radius:7px;background:var(--cream);border:1px solid var(--line);}
.ed-thumb.sel{border:1.5px solid var(--green);background:var(--green-soft);}
.ed-sw{display:flex;gap:8px;flex-wrap:wrap;}
.ed-sw i{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);}
.ed-sw i.sel{box-shadow:0 0 0 2px var(--ink);}
.ed-canvas{position:relative;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;
  background:repeating-linear-gradient(45deg,#fff 0 11px,#f4f4f4 11px 12px);}
.voucher{width:min(270px,82%);background:linear-gradient(140deg,var(--ink),#2b2b2b);color:#fff;border-radius:16px;padding:20px;box-shadow:var(--shadow-m);}
.v-top{display:flex;justify-content:space-between;align-items:center;}
.v-brand{font-weight:700;font-size:.9rem;color:#fff;}
.v-chip{font-family:var(--mono);font-size:.54rem;text-transform:uppercase;letter-spacing:.1em;background:var(--green);color:var(--ink);padding:4px 9px;border-radius:999px;font-weight:700;}
.v-amount{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;margin:14px 0 6px;color:#fff;font-family:var(--head);}
.v-foot{font-size:.72rem;color:rgba(255,255,255,.7);font-weight:600;}
.ed-hint{position:absolute;bottom:10px;right:12px;font-family:var(--mono);font-size:.56rem;color:var(--muted);background:#fff;border:1px solid var(--line);padding:4px 8px;border-radius:999px;}

/* 2 — Shop */
.shop{display:grid;place-items:center;width:100%;}
.shop-card{display:grid;grid-template-columns:170px 1fr;gap:22px;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-m);padding:18px;width:min(560px,100%);}
.shop-thumb{border-radius:13px;background:linear-gradient(140deg,var(--cyan-soft),var(--green-soft));display:grid;place-items:center;
  font-family:var(--head);font-weight:700;font-size:2rem;color:var(--ink);border:1px solid var(--line);min-height:150px;}
.shop-info{display:flex;flex-direction:column;}
.shop-title{font-family:var(--head);font-weight:700;font-size:1.18rem;color:var(--ink);}
.shop-sub{font-size:.82rem;color:var(--muted);font-weight:600;margin-top:3px;}
.shop-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0 14px;}
.qty{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:700;color:var(--ink);}
.qty span{color:var(--muted);font-size:1.1rem;}
.price{font-family:var(--head);font-weight:700;font-size:1.3rem;color:var(--ink);}
.shop-buy{background:var(--green);color:#fff;border:0;border-radius:999px;padding:13px;font-family:var(--head);font-weight:700;font-size:1rem;
  box-shadow:0 12px 24px -12px rgba(120,170,30,.8);}
.pay{display:flex;align-items:center;gap:7px;margin-top:13px;}
.pay i{width:30px;height:20px;border-radius:5px;background:var(--cream);border:1px solid var(--line);}
.pay span{font-family:var(--mono);font-size:.58rem;color:var(--muted);font-weight:700;margin-left:4px;}

/* 3 — E-Mail */
.mail{display:grid;place-items:center;width:100%;}
.mail-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-m);width:min(540px,100%);overflow:hidden;}
.mail-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);}
.mail-ava{width:40px;height:40px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:1.1rem;}
.mail-from{font-size:.82rem;color:var(--muted);font-weight:700;}
.mail-subj{font-family:var(--head);font-weight:700;color:var(--ink);font-size:1.02rem;}
.mail-time{margin-left:auto;font-family:var(--mono);font-size:.6rem;color:var(--muted);font-weight:700;}
.mail-body{padding:16px 18px 18px;}
.mail-body p{margin:0 0 14px;font-size:.9rem;color:var(--text);font-weight:500;line-height:1.5;}
.mail-att{display:flex;align-items:center;gap:12px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:11px 13px;}
.att-ic{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:1.1rem;}
.att-tx{display:flex;flex-direction:column;}
.att-tx b{font-size:.86rem;color:var(--ink);}
.att-tx span{font-family:var(--mono);font-size:.58rem;color:var(--muted);font-weight:700;}
.att-dl{margin-left:auto;font-weight:700;font-size:.82rem;color:var(--green-press);}
.mail-btns{display:flex;gap:9px;margin-top:14px;}
.mb{font-family:var(--head);font-weight:700;font-size:.86rem;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);}
.mb.green{background:var(--green);color:#fff;border-color:transparent;}

/* 5 — Dashboard (echter Produkt-Screenshot im Fenster) */
.dash-pane{padding:0;align-items:stretch;justify-content:stretch;}
.gd-shot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}

/* ---------- STATEMENT (full-bleed, design-forward) ---------- */
.statement{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
  background:var(--bg-dark);color:#fff;padding:clamp(74px,11vw,164px) 0;}
.statement::before{content:"";position:absolute;inset:0;z-index:0;}
.statement::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%);}
.statement .wrap{position:relative;z-index:3;text-align:center;}
.st-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--green);margin-bottom:clamp(26px,3.2vw,44px);}
.st-eyebrow::before,.st-eyebrow::after{content:"";width:30px;height:1px;background:rgba(255,255,255,.28);}
.st-quote{font-family:var(--head);font-weight:700;letter-spacing:-.042em;line-height:1.05;
  font-size:clamp(2.4rem,6vw,5.3rem);color:#fff;max-width:15.5em;margin:0 auto;text-wrap:balance;}
.st-quote .g{color:var(--green);}
.tok{display:inline-block;border-radius:.26em;padding:0 .16em;line-height:1.08;}
.tok-cyan{background:var(--cyan);color:#fff;transform:rotate(-1.5deg);}
.tok-green{background:var(--green);color:var(--ink);transform:rotate(1.6deg);}

.st-grid{position:absolute;z-index:1;display:grid;grid-template-columns:repeat(4,var(--s));grid-auto-rows:var(--s);gap:5px;--s:18px;opacity:.5;}
.st-grid i{border-radius:5px;}
.st-grid-tr{top:9%;right:6%;transform:rotate(-8deg);}
.st-grid-bl{left:5%;bottom:11%;transform:rotate(7deg);--s:14px;opacity:.42;}
.st-pix{position:absolute;z-index:1;width:20px;height:20px;border-radius:6px;}
@media (prefers-reduced-motion:no-preference){
  .st-float{animation:st-floaty 7s ease-in-out infinite;}
  .st-float.b{animation-duration:9s;animation-delay:-2s;}
  .st-float.c{animation-duration:8s;animation-delay:-4s;}
}
@keyframes st-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- MODULE-GRID (dynamisch, dunkel) ---------- */
.modules{position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--bg-dark);color:#fff;
  padding:clamp(66px,8vw,124px) 0;overflow:hidden;}
.modules .wrap{position:relative;z-index:2;}
.mods-head{text-align:center;max-width:40em;margin:0 auto clamp(34px,4vw,58px);}
.mods-head h2{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em;color:#fff;line-height:1.05;text-wrap:balance;}
.mods-head h2 .g{color:var(--green);}
.mods-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,1.8vw,24px);}
.mod-card.c1{grid-column:span 4;} .mod-card.c2{grid-column:span 2;}
.mod-card.c3{grid-column:span 2;} .mod-card.c4{grid-column:span 4;}
.mod-card{position:relative;display:flex;flex-direction:column;text-align:left;font:inherit;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:0 0 24px;overflow:hidden;
  opacity:0;transform:translateY(26px);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s,border-color .25s,background .25s,box-shadow .25s;}
.mod-card.in{opacity:1;transform:translateY(0);}
.mod-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.07);
  border-color:color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:0 34px 64px -34px var(--acc);}
.mod-vis{position:relative;flex:1 1 auto;min-height:clamp(140px,14vw,172px);overflow:hidden;display:grid;place-items:center;padding:clamp(18px,2.4vw,34px);
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 40%,#1c1a14),#1c1a14 80%);}
.mod-card.feature .mod-vis{min-height:clamp(200px,22vw,290px);}
.mod-card.feature .mod-title{font-size:clamp(1.45rem,2.1vw,2rem);}
.mod-card.feature .mk{width:min(60%,300px);}
.mod-vis::after{content:"";position:absolute;inset:0;
  background:radial-gradient(64% 64% at 28% 18%,color-mix(in srgb,var(--acc) 46%,transparent),transparent 72%);}
@media (prefers-reduced-motion:no-preference){
  .mod-vis::after{animation:mod-glow 12s ease-in-out infinite;}
  .mk{animation:mk-float 7s ease-in-out infinite;}
  .mod-card:nth-child(2) .mk{animation-delay:-1.6s;animation-duration:8.2s;}
  .mod-card:nth-child(3) .mk{animation-delay:-3.1s;animation-duration:6.6s;}
  .mod-card:nth-child(4) .mk{animation-delay:-2.3s;animation-duration:8.8s;}
}
@keyframes mod-glow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,5%) scale(1.06)}}
@keyframes mk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* motif mockups */
.mk{position:relative;z-index:2;display:flex;justify-content:center;width:min(82%,250px);}
.mk-card{width:100%;background:#fff;border-radius:16px;box-shadow:0 22px 44px -22px rgba(0,0,0,.65);transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.mod-card:hover .mk-card{transform:scale(1.045);}
.mk-voucher{display:flex;flex-direction:column;gap:11px;padding:18px;}
.mkv-chip{align-self:flex-start;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;background:var(--acc);color:#1c1a14;padding:4px 9px;border-radius:999px;}
.mkv-amt{font-family:var(--head);font-weight:700;font-size:2.1rem;color:#1c1a14;letter-spacing:-.03em;line-height:1;}
.mkv-code{height:9px;border-radius:4px;background:repeating-linear-gradient(90deg,#1c1a14 0 3px,transparent 3px 7px);opacity:.45;}
.mk-coupon{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 18px;border-top:2px dashed rgba(28,26,20,.18);}
.mkc-pct{font-family:var(--head);font-weight:700;font-size:2.3rem;color:var(--acc);letter-spacing:-.03em;line-height:1;}
.mkc-code{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.14em;color:#1c1a14;background:#f0f0f0;padding:5px 11px;border-radius:6px;}
.mk-stamp{display:flex;flex-direction:column;gap:13px;padding:18px;}
.mks-dots{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;}
.mks-dots i{aspect-ratio:1;border-radius:50%;border:2px dashed rgba(28,26,20,.22);display:grid;place-items:center;font-size:.62rem;font-style:normal;color:var(--acc);}
.mks-dots i.on{border:0;background:var(--acc);color:#fff;}
.mks-dots i.rw{border:0;background:color-mix(in srgb,var(--acc) 22%,#fff);}
.mks-lbl{font-family:var(--mono);font-size:.58rem;font-weight:700;color:#1c1a14;letter-spacing:.08em;}
.mk-ticket{display:flex;align-items:center;gap:14px;padding:15px;}
.mkt-qr{width:60px;height:60px;flex-shrink:0;border-radius:8px;background:repeating-conic-gradient(#1c1a14 0% 25%,#fff 0% 50%) 0 0/12px 12px;}
.mkt-info{display:flex;flex-direction:column;gap:3px;}
.mkt-info b{font-family:var(--head);font-size:1.05rem;color:#1c1a14;letter-spacing:-.01em;}
.mkt-info span{font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.08em;color:#8a8478;}
.mod-exp{position:absolute;z-index:3;top:14px;right:14px;width:34px;height:34px;border-radius:11px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;
  color:#fff;font-size:.95rem;transition:background .2s,color .2s;}
.mod-card:hover .mod-exp{background:var(--acc);color:var(--ink);border-color:transparent;}
.mod-body{display:block;padding:20px clamp(20px,2vw,26px) 0;}
.mod-cat{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--acc);font-weight:700;}
.mod-title{display:block;font-family:var(--head);font-weight:700;font-size:clamp(1.18rem,1.5vw,1.42rem);letter-spacing:-.02em;margin:10px 0 0;color:#fff;line-height:1.13;}
.mod-teaser{display:block;margin:9px 0 0;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.64);font-weight:500;}

/* Modal */
.mod-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;}
.mod-modal[hidden]{display:none;}
.mod-backdrop{position:absolute;inset:0;background:rgba(14,11,6,.62);backdrop-filter:blur(7px);opacity:0;transition:opacity .26s;}
.mod-modal.open .mod-backdrop{opacity:1;}
.mod-dialog{position:relative;z-index:2;width:min(640px,100%);max-height:88vh;overflow:auto;background:var(--bg);color:var(--ink);
  border-radius:24px;box-shadow:var(--shadow-m);transform:translateY(18px) scale(.97);opacity:0;
  transition:transform .32s cubic-bezier(.2,.85,.2,1),opacity .26s;}
.mod-modal.open .mod-dialog{transform:none;opacity:1;}
.mod-dh{position:relative;padding:28px clamp(24px,3vw,32px);border-bottom:1px solid var(--line);
  background:var(--bg);}
.mod-dh .cat{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:color-mix(in srgb,var(--acc) 72%,var(--ink));}
.mod-dh h3{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.028em;margin:10px 0 0;color:var(--ink);max-width:14em;}
.mod-dh h3 .box{display:inline-block;background:var(--acc);color:#fff;padding:0 .18em .04em;border-radius:10px;transform:rotate(-1.2deg);white-space:nowrap;}
.mod-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);
  background:#fff;color:var(--ink);font-size:1rem;display:grid;place-items:center;transition:transform .14s,border-color .2s;}
.mod-close:hover{transform:rotate(90deg);border-color:var(--ink);}
.mod-db{padding:24px clamp(24px,3vw,32px) 30px;}
.mod-db .lead{font-size:1.06rem;line-height:1.55;color:var(--text);font-weight:500;margin:0 0 20px;}
.mod-feats{list-style:none;margin:0;padding:0;display:grid;gap:13px;}
.mod-feats li{display:flex;gap:13px;align-items:flex-start;font-size:1rem;color:var(--ink);font-weight:600;line-height:1.4;}
.mod-feats .ck{width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--acc) 16%,var(--bg));color:var(--acc);
  display:grid;place-items:center;flex-shrink:0;font-weight:800;font-size:.76rem;margin-top:1px;}
.mod-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.mod-cta .btn-cyan{background:var(--acc);color:#fff;border-color:transparent;}
.mod-cta .btn-cyan:hover{background:color-mix(in srgb,var(--acc) 85%,#000);}
@media (max-width:980px){.mods-grid{grid-template-columns:1fr 1fr;}.mod-card.c1,.mod-card.c2,.mod-card.c3,.mod-card.c4{grid-column:span 1;}}
@media (max-width:600px){.mods-grid{grid-template-columns:1fr;}}

/* ── Module-Layout: Große Typo-Liste (C1, dunkel · Foto-Platzhalter) ── */
.mod-layout[hidden]{display:none;}
.mlist{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.16);margin-top:clamp(20px,2.4vw,34px);}
.lrow{position:relative;display:grid;grid-template-columns:64px 1fr 0px auto;align-items:center;column-gap:24px;
  width:100%;text-align:left;font:inherit;color:#fff;cursor:pointer;background:none;
  border:0;border-bottom:1px solid rgba(255,255,255,.16);padding:0 14px;min-height:132px;overflow:hidden;isolation:isolate;
  transition:padding .45s cubic-bezier(.2,.8,.2,1),grid-template-columns .5s cubic-bezier(.2,.8,.2,1);}
.lrow::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 22%,transparent),transparent 60%);}
.lrow:hover::before,.lrow:focus-visible::before{opacity:1;}
.lrow:hover,.lrow:focus-visible{padding-left:28px;outline:none;grid-template-columns:64px 1fr 172px auto;}
.lnum{font-family:var(--mono);font-size:.82rem;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.42);transition:color .35s;}
.lrow:hover .lnum,.lrow:focus-visible .lnum{color:var(--acc);}
.lname{font-family:var(--head);font-weight:700;font-size:clamp(2.1rem,5vw,4.2rem);letter-spacing:-.04em;line-height:.95;
  color:rgba(255,255,255,.13);transition:color .4s;}
.lrow:hover .lname,.lrow:focus-visible .lname{color:var(--acc);}
.lmain{display:flex;flex-direction:column;justify-content:center;min-width:0;}
.lteaser{display:block;max-height:0;opacity:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:1rem;font-weight:600;line-height:1.3;color:rgba(255,255,255,.74);
  transition:max-height .42s cubic-bezier(.2,.8,.2,1),opacity .35s,margin-top .42s;}
.lrow:hover .lteaser,.lrow:focus-visible .lteaser{max-height:2.2em;opacity:1;margin-top:9px;}
.lvis{overflow:hidden;width:100%;display:flex;align-items:center;justify-content:flex-start;opacity:0;transition:opacity .42s;}
.lrow:hover .lvis,.lrow:focus-visible .lvis{opacity:1;}
.lphoto{position:relative;width:172px;height:104px;border-radius:14px;overflow:hidden;flex-shrink:0;
  background:repeating-linear-gradient(135deg,#33312b 0 14px,#2a2823 14px 15px),#262420;
  border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;box-shadow:0 16px 34px -18px rgba(0,0,0,.7);}
.lphoto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lph-lab{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.03em;
  color:rgba(255,255,255,.82);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);padding:6px 11px;border-radius:999px;}
.lph-lab::before{content:"";width:14px;height:11px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;
  background:radial-gradient(circle at 38% 40%,rgba(255,255,255,.6) 2.2px,transparent 2.2px);}
.larrow{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.5);
  transition:background .3s,color .3s,border-color .3s,transform .4s cubic-bezier(.2,.8,.2,1);transform:translateX(8px) scale(.85);}
.larrow svg{width:22px;height:22px;}
.lrow:hover .larrow,.lrow:focus-visible .larrow{background:var(--acc);border-color:transparent;color:var(--ink);transform:none;}
@media (prefers-reduced-motion:reduce){.lrow,.lname,.lmid,.lvis,.larrow,.lrow::before{transition:none;}}
@media (max-width:760px){
  .lrow{grid-template-columns:42px 1fr auto;min-height:96px;column-gap:14px;padding:0 4px;}
  .lrow:hover,.lrow:focus-visible{grid-template-columns:42px 1fr auto;padding-left:4px;}
  .lname{font-size:clamp(1.7rem,9vw,2.6rem);}
  .lvis{display:none;}
  .lteaser{max-height:2.4em;opacity:1;margin-top:6px;white-space:normal;}
  .larrow{width:46px;height:46px;transform:none;opacity:.85;}
}

/* ── Module-Layout: Bento Hell (2×2, gleiche Größe, hell, Foto-Platzhalter) ── */
.modules[data-mlayout="bentohell"]{background:linear-gradient(160deg,#f4f4f4 0%,var(--bg) 40%,#ececec 100%);}
.modules[data-mlayout="bentohell"] .mods-head h2{color:var(--ink);}
.bhgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(20px,2.4vw,34px);max-width:85%;margin-inline:auto;}
.bhcard{position:relative;display:block;text-align:left;font:inherit;
  color:var(--ink);cursor:pointer;background:var(--bg-dark);
  border:3px solid var(--acc,var(--green));
  border-radius:22px;overflow:hidden;box-shadow:var(--shadow-s);padding:0;
  min-height:clamp(300px,28vw,390px);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
  opacity:0;transform:translateY(24px);}
.bhcard.in{opacity:1;transform:translateY(0);}
.bhcard:hover{transform:translateY(-5px);box-shadow:0 12px 36px -8px color-mix(in srgb,var(--acc,var(--green)) 35%,rgba(0,0,0,.15));
  border-color:color-mix(in srgb,var(--acc,var(--green)) 50%,transparent);}
/* Foto-Platzhalter oben */
.bh-vis{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc,var(--green)) 14%,var(--cream)),var(--cream) 80%);
  display:grid;place-items:center;}
.bh-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.bh-vis::after{display:none;}
.bh-vis-inner{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;}
.bh-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.6rem;
  font-weight:700;letter-spacing:.04em;color:var(--text);background:rgba(255,255,255,.78);
  border:1.5px solid var(--line-2);padding:7px 13px;border-radius:999px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.bh-pill::before{content:"";width:15px;height:12px;border:1.5px solid var(--muted);border-radius:3px;
  background:radial-gradient(circle at 38% 40%,var(--muted) 2.4px,transparent 2.4px);}
.bh-hint{font-family:var(--mono);font-size:.58rem;line-height:1.55;letter-spacing:.02em;color:var(--muted);text-align:center;max-width:22em;}
.bh-exp{position:absolute!important;top:14px!important;right:14px!important;width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.82);border:1.5px solid var(--line-2);z-index:3;
  display:grid;place-items:center;color:var(--muted);transition:background .2s,color .2s,border-color .2s;}
.bh-exp svg{width:16px;height:16px;}
.bhcard:hover .bh-exp{background:var(--acc,var(--green));color:#fff;border-color:transparent;}
/* Text-Bereich unten */
.bh-body{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;
  padding:clamp(14px,1.6vw,22px);
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:16px;
  display:flex;flex-direction:column;gap:6px;}
.bh-cat{font-family:var(--head);font-size:.82rem;letter-spacing:.01em;
  color:var(--acc,var(--green));font-weight:700;}
.bh-title{font-family:var(--head);font-weight:800;font-size:clamp(1.35rem,1.8vw,1.75rem);
  letter-spacing:-.028em;line-height:1.08;color:var(--ink);}
.bh-teaser{font-size:.95rem;font-weight:600;color:var(--text);line-height:1.5;margin-top:4px;}
.bh-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:.85rem;
  font-weight:700;color:var(--acc,var(--green));}
.bh-link::after{content:"→";}
@media (max-width:720px){.bhgrid{grid-template-columns:1fr;}}

/* ── Module-Layout: Hochkant-Karten (Klick öffnet Produkt-Modal · Foto-Platzhalter) ── */
.mtall{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,22px);
  margin-top:clamp(20px,2.4vw,34px);}
.tcard{position:relative;display:flex;flex-direction:column;text-align:left;font:inherit;cursor:pointer;
  background:var(--surface);border:none;border-radius:22px;
  overflow:hidden;transform:translateZ(0);min-height:clamp(440px,44vw,600px);padding:0;
  transition:flex-grow .55s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .25s;}
.tcard:hover{flex-grow:2.5;
  box-shadow:0 30px 60px -24px color-mix(in srgb,var(--acc) 55%,rgba(0,0,0,.25));
  border-color:color-mix(in srgb,var(--acc) 55%,transparent);}
/* ── Hochkant: Foto-Vollbild ── */
.tc-photo{position:absolute;inset:0;}
.tc-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* ── Frosted Glass Panel: klein by default, 70 % auf Hover ── */
.tc-glass{position:absolute;top:70%;bottom:0;left:0;right:0;z-index:2;
  padding:clamp(18px,2vw,28px) clamp(16px,1.8vw,24px) clamp(74px,7vw,88px);
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border-top:1px solid rgba(255,255,255,.55);
  display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;
  overflow:hidden;
  transform:translateZ(0);
  transition:top .55s cubic-bezier(.4,0,.2,1);}
.tcard:hover .tc-glass{top:calc(70% - 60px);}
@keyframes tc-glass-reveal{
  from{transform:translateY(28px);opacity:0;}
  to{transform:translateY(0);opacity:1;}}
/* ── Plus-Button (erscheint auf Hover) ── */
.tc-cta{
  position:absolute;bottom:clamp(14px,1.6vw,22px);left:50%;
  width:54px;height:54px;border-radius:50%;
  background:#fff;border:none;cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.14);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  opacity:0;transform:translateX(-50%) scale(0);
  pointer-events:none;}
.tcard:hover .tc-cta{
  pointer-events:auto;
  animation:tc-plus-pop .52s .3s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes tc-plus-pop{
  0%  {opacity:0;transform:translateX(-50%) scale(0.3) rotate(-20deg);}
  55% {opacity:1;transform:translateX(-50%) scale(1.18) rotate(8deg);}
  78% {transform:translateX(-50%) scale(0.91) rotate(-4deg);}
  100%{opacity:1;transform:translateX(-50%) scale(1) rotate(0deg);}}
/* ── Pill-Headline ── */
.tc-pill{display:inline-block;background:var(--acc,var(--green));color:#fff;
  padding:8px 20px;border-radius:14px;
  font-family:var(--head);font-weight:800;font-size:clamp(1.3rem,1.7vw,1.75rem);
  letter-spacing:-.025em;line-height:1.1;transform:rotate(-1.5deg);}
/* ── Subtext (versteckt by default, auf Hover sichtbar) ── */
.tc-sub{display:block;font-size:clamp(1rem,1.15vw,1.15rem);font-weight:600;color:var(--text);line-height:1.45;
  margin-top:12px;text-align:center;text-wrap:balance;opacity:1;}
/* keep space for old tc-top rules */
.tc-top{display:none;}.tc-vis{display:none;}
.tc-head{display:block;font-family:var(--head);font-weight:700;font-size:clamp(1.18rem,1.5vw,1.6rem);letter-spacing:-.022em;
  line-height:1.13;color:#fff;text-wrap:pretty;min-height:calc(1.13em * 3);padding-right:52px;overflow-wrap:break-word;}
@media (max-width:980px){.tc-head{min-height:0;}}
.tc-exp{position:absolute;top:0;right:0;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#fff;
  transition:background .2s,color .2s,border-color .2s;}
.tc-exp svg{width:18px;height:18px;}
.tcard:hover .tc-exp{background:var(--acc);color:var(--ink);border-color:transparent;}
.tc-vis{position:relative;flex:1 1 auto;margin-top:clamp(18px,1.8vw,26px);border-radius:16px;overflow:hidden;min-height:0;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 30%,#211f1a),#1b1915 82%);}
.tc-photo{position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 15px,rgba(255,255,255,0) 15px 16px);}
.tc-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tc-ph-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:11px;
  text-align:center;padding:18px;max-width:92%;}
.tc-lab{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.04em;
  color:rgba(255,255,255,.86);background:rgba(28,26,20,.40);border:1px solid rgba(255,255,255,.24);
  padding:7px 13px;border-radius:999px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.tc-lab::before{content:"";width:15px;height:12px;border:1.5px solid rgba(255,255,255,.64);border-radius:3px;
  background:radial-gradient(circle at 38% 40%,rgba(255,255,255,.64) 2.4px,transparent 2.4px);}
.tc-hint{font-family:var(--mono);font-size:.6rem;line-height:1.5;letter-spacing:.02em;color:var(--muted);}
@media (max-width:980px){.mtall{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.mtall{grid-template-columns:1fr;}.tcard{min-height:380px;}
  .tc-glass{top:55% !important;transition:none;}
  .tc-cta{display:none !important;}
  .tcard:hover{flex-grow:1;}
}

/* ── Hochkant auf HELL ── */
.modules[data-mlayout="hoch"]{background:var(--surface);}
.modules[data-mlayout="hoch"] .mods-head h2{color:var(--ink);}
.modules[data-mlayout="hoch"] .tcard{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);}

/* ── In-Page-Umschalter: Modul-Layout vergleichen ── */
/* ---------- INTEGRATION / SCHNITTSTELLEN ---------- */
.integ{padding:clamp(58px,7vw,112px) 0 clamp(56px,6vw,92px);background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;}
.integ-in{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding-bottom:clamp(80px,9vw,140px);}
/* Stimmungsfoto: gleichmäßig leicht geblurrt + neutral abgedunkelt (kein Grünstich, kein Split) */
.integ-in::before{content:"";position:absolute;z-index:0;left:calc(50% - 50vw);
  top:calc(-1 * clamp(58px,7vw,112px));bottom:clamp(-180px,-14vw,-240px);width:100vw;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,10,12,.55) 0%,rgba(9,10,12,.42) 40%,rgba(9,10,12,.6) 68%,rgba(9,10,12,0) 100%),
    url("/uploads/integ-bg-blur.webp") center 40%/cover no-repeat;}
.integ-in::after{display:none;}
.integ-in > *{position:relative;z-index:1;}
/* Text hell auf dunklem Zentrum */
.integ-in .integ-lead h2{color:#fff;}
.integ .istep-txt{color:#fff;}
.integ-in .integ-lead h2,.integ-in .lead,.integ .istep-txt{text-shadow:0 2px 16px rgba(0,0,0,.55);}
.integ h2{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em;margin-top:0;line-height:1.05;text-wrap:balance;max-width:18em;margin-inline:auto;}
.integ-lead{margin-bottom:clamp(44px,5vw,72px);}
.integ-steps{width:min(1120px,100%);}
/* Schnittstellen-Features als eigenständige Chips: Icon über Text, quadratisch, alle nebeneinander */
.integ-steps{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.2vw,18px);position:relative;}
.istep{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
  gap:clamp(12px,1.1vw,18px);aspect-ratio:1/1;
  padding:clamp(16px,1.6vw,24px) clamp(12px,1vw,16px);
  background:rgba(255,255,255,.07);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.16);border-radius:18px;
  position:relative;z-index:1;
  transition:background .25s,border-color .25s,transform .3s cubic-bezier(.34,1.56,.64,1);}
.istep-ico{display:grid;place-items:center;flex-shrink:0;position:relative;z-index:2;
  width:clamp(46px,3.4vw,56px);height:clamp(46px,3.4vw,56px);border-radius:13px;
  color:var(--green-press);background:var(--green-soft);
  border:1px solid color-mix(in srgb,var(--green) 28%,transparent);
  transition:background .25s,color .25s,transform .3s cubic-bezier(.34,1.56,.64,1);}
.istep-ico svg{width:52%;height:52%;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}
.istep-txt{font-size:clamp(.98rem,1.05vw,1.14rem);font-weight:600;color:#fff;
  letter-spacing:-.01em;line-height:1.28;text-wrap:balance;}
.istep:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);transform:translateY(-3px);}
.istep:hover .istep-ico{background:var(--green);color:#fff;transform:scale(1.06);}
/* CTA */
.integ-cta{text-align:center;margin-top:clamp(28px,3vw,44px);position:relative;z-index:2;}
/* ── Scroll-Eintrittsanimation ── */
@keyframes istep-fadein{
  from{opacity:0;transform:translateY(30px);}
  to  {opacity:1;transform:translateY(0);}}
@keyframes ico-pop{
  0%  {opacity:0;transform:scale(.45);}
  65% {transform:scale(1.15);}
  82% {transform:scale(.94);}
  100%{opacity:1;transform:scale(1);}}
.istep.is-hidden{opacity:0;}
.istep.is-visible{animation:istep-fadein .55s cubic-bezier(.22,.8,.36,1) both;}
.istep.is-visible .istep-ico{animation:ico-pop .5s cubic-bezier(.22,.8,.36,1) both;}
.integ-vis{position:relative;display:grid;place-items:center;padding:clamp(24px,3.4vw,50px) clamp(12px,2vw,34px);}
.integ-vis .blob{position:absolute;inset:5% 2% 5% 2%;z-index:0;border-radius:46% 54% 52% 48%/52% 48% 52% 48%;
  background:linear-gradient(150deg,var(--green-soft),var(--cyan-soft));}
.bw{position:relative;z-index:2;width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-m);overflow:hidden;}
.bw-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--cream);border-bottom:1px solid var(--line);}
.bw-bar .d{width:10px;height:10px;border-radius:50%;background:var(--line-2);}
.bw-bar .u{margin-left:10px;flex:1;height:22px;border-radius:999px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;padding:0 12px;font-family:var(--mono);font-size:.6rem;color:var(--muted);}
.bw-body{padding:16px;display:flex;flex-direction:column;gap:14px;}
.bw-head{display:flex;align-items:center;justify-content:space-between;}
.bw-head .lg{width:64px;height:12px;border-radius:6px;background:var(--cream);}
.bw-head .nv{display:flex;gap:7px;}
.bw-head .nv i{width:26px;height:8px;border-radius:5px;background:var(--cream);}
.bw-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;}
.bw-tx{display:flex;flex-direction:column;gap:8px;}
.bw-tx .l{height:9px;border-radius:5px;background:var(--cream);}
.bw-tx .l.w2{width:82%;} .bw-tx .l.w3{width:58%;}
.widget{border:1.5px solid color-mix(in srgb,var(--green) 50%,var(--line));border-radius:14px;padding:14px;background:var(--green-soft);box-shadow:0 10px 24px -14px rgba(120,170,30,.7);}
.widget .wt{font-family:var(--mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--green-press);}
.widget .wa{font-family:var(--head);font-weight:700;font-size:1.06rem;color:var(--ink);margin:6px 0 10px;}
.widget .wb{display:block;text-align:center;background:var(--green);color:#fff;border-radius:999px;padding:9px;font-weight:700;font-size:.8rem;}
.ichip{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-m);border-radius:999px;padding:9px 14px;font-weight:700;font-size:.82rem;color:var(--ink);white-space:nowrap;}
.ichip::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c,var(--green));flex-shrink:0;}
.ichip-cms{top:3%;left:-3%;--c:var(--cyan);}
.ichip-pos{top:33%;right:-5%;--c:var(--amber);}
.ichip-pay{bottom:17%;left:-5%;--c:var(--purple);}
.ichip-app{bottom:3%;right:1%;--c:var(--green);}
@media (prefers-reduced-motion:no-preference){
  .ichip{animation:mk-float 7s ease-in-out infinite;}
  .ichip-pos{animation-duration:8.4s;animation-delay:-1.5s;}
  .ichip-pay{animation-duration:6.6s;animation-delay:-3s;}
  .ichip-app{animation-duration:8s;animation-delay:-2.2s;}
}
@media (max-width:900px){
  .integ-steps{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .integ-steps{grid-template-columns:1fr;}
  .istep{aspect-ratio:auto;flex-direction:row;align-items:center;text-align:left;gap:14px;padding:16px;}
}
@media (max-width:520px){.ichip-pos,.ichip-pay{display:none;}}

/* logo wall (Integrationen — modernes Grid) */
.logowall{position:relative;z-index:2;width:100%;margin:clamp(-120px,-8vw,-80px) auto 0;
  background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 34px 70px -30px rgba(18,26,14,.5),0 4px 14px -8px rgba(18,26,14,.2);}
.lw-box{width:100%;}
.lw-head{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(20px,2vw,30px) clamp(24px,3vw,48px);border-bottom:1px solid var(--line);}
.lw-head .t{display:block;font-family:var(--head);font-weight:700;font-size:clamp(1.1rem,1.55vw,1.55rem);color:var(--ink);letter-spacing:-.02em;line-height:1.1;margin:0;white-space:nowrap;}
@media(max-width:680px){.lw-head .t{white-space:normal;}}
.lw-grid{display:grid;grid-template-columns:repeat(5,1fr);}
.lw-cell{display:flex;align-items:center;justify-content:center;
  min-height:clamp(72px,8vw,108px);padding:clamp(14px,1.8vw,24px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.lw-cell:nth-child(5n){border-right:0;}
.lw-cell:nth-last-child(-n+5){border-bottom:0;}
.lw-cell img{max-height:clamp(34px,3.6vw,48px);max-width:100%;width:auto;height:auto;object-fit:contain;display:block;
  filter:brightness(0);opacity:.48;transition:opacity .25s;}
.lw-cell:hover img{opacity:.9;}
@media (max-width:860px){
  .lw-grid{grid-template-columns:repeat(4,1fr);}
  .lw-cell:nth-child(5n){border-right:1px solid var(--line);}
  .lw-cell:nth-child(4n){border-right:0;}
  .lw-cell:nth-last-child(-n+5){border-bottom:1px solid var(--line);}
  .lw-cell:nth-last-child(-n+4){border-bottom:0;}}
@media (max-width:520px){
  .lw-grid{grid-template-columns:repeat(2,1fr);}
  .lw-cell:nth-child(4n){border-right:1px solid var(--line);}
  .lw-cell:nth-child(2n){border-right:0;}
  .lw-cell:nth-last-child(-n+4){border-bottom:1px solid var(--line);}
  .lw-cell:nth-last-child(-n+2){border-bottom:0;}}

@media (max-width:680px){
  .ed{grid-template-columns:1fr;} .ed-side{display:none;}
  .shop-card{grid-template-columns:1fr;} .shop-thumb{min-height:96px;}
  .scan-toast{position:static;margin-top:14px;}
  .redeem{flex-direction:column;}
  .flow-pane{aspect-ratio:auto;min-height:300px;}
  .st-grid-tr,.st-grid-bl{opacity:.3;}
}

@media (max-width:920px){
  .nav .nav-item,.nav a:not(.btn),.hdr-right .login,.lang-toggle{display:none;}
  .nav{margin-left:auto;}
  .hero-in,.teaser-band{grid-template-columns:1fr;gap:48px;}
  .chip-sale{left:6px;} .chip-bonus{right:6px;}
}
/* ---------- FAQ ---------- */
.faq{padding:clamp(56px,7vw,108px) 0;position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--bg-dark);color:#fff;}
.faq .wrap{width:80%;max-width:1200px;}
.faq-head{text-align:center;max-width:34em;margin:0 auto clamp(32px,4vw,52px);}
.faq-head h2{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em;line-height:1.05;margin-top:16px;color:#fff;}

.faq-list{max-width:100%;margin:0 auto;column-count:2;column-gap:12px;}
.faq-item{break-inside:avoid;margin-bottom:12px;}
@media (max-width:760px){.faq-list{column-count:1;}}
.faq-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:none;overflow:hidden;break-inside:avoid;margin-bottom:12px;}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;background:none;border:0;
  padding:20px 22px;font-family:var(--head);font-weight:700;font-size:clamp(1.02rem,1.2vw,1.16rem);color:#fff;cursor:pointer;line-height:1.3;}
.faq-q .ic{width:30px;height:30px;border-radius:50%;background:var(--cyan-soft);color:var(--cyan-deep);display:grid;place-items:center;flex-shrink:0;font-size:1.3rem;line-height:1;transition:transform .3s;}
.faq-item.open .faq-q .ic{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-item.open .faq-a{max-height:340px;}
.faq-a p{margin:0;padding:0 22px 22px;color:rgba(255,255,255,.66);font-weight:500;line-height:1.6;font-size:1.02rem;}

/* ---------- KONTAKT + CTA ---------- */
.cta{padding:clamp(16px,2vw,30px) 0 clamp(56px,7vw,104px);}
.cta-band{position:relative;overflow:hidden;background:var(--bg-dark);border-radius:32px;color:#fff;padding:clamp(44px,5.5vw,82px) clamp(28px,4vw,64px);text-align:center;}
.cta-band>*{position:relative;z-index:1;}
.cta-band h2{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em;color:#fff;line-height:1.05;text-wrap:balance;}
.cta-band h2 .g{color:var(--green);}

.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px;}
.cta-contact{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;margin-top:30px;font-weight:700;font-size:.95rem;}
.cta-contact a{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.82);}
.cta-contact a:hover{color:#fff;}
.cta-contact a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,var(--green));}

/* ---------- FOOTER ---------- */
.foot{background:#161410;color:rgba(255,255,255,.62);position:relative;}

/* Crown — conveyor band only, no tall amber area */
.foot-crown{
  background:var(--amber);
  overflow:hidden;
}
.foot-conveyor-wrap{
  height:52px;overflow:hidden;
  background:rgba(0,0,0,.1);
  display:flex;align-items:center;
}
.foot-conveyor{
  display:flex;gap:0;align-items:center;
  width:max-content;
  animation:fconv 24s linear infinite;
}
@keyframes fconv{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.foot-cv{
  flex-shrink:0;width:92px;height:40px;
  margin-right:16px; /* margin statt gap — nahtlose Loop-Berechnung */
  background:rgba(255,255,255,.18);border:1.5px dashed rgba(255,255,255,.45);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.62rem;font-weight:700;
  color:rgba(255,255,255,.8);letter-spacing:.1em;
  text-transform:uppercase;
}
/* Voucher — outside overflow:hidden, absolute to footer */
.foot-anim-wrap{
  position:absolute;top:0;left:50%;
  transform:translateX(-50%);
  width:220px;
  pointer-events:none;
  z-index:20;
}
.foot-main-v{
  width:162px;
  margin:0 auto;
  position:relative;z-index:3;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.32));
  transform:translateY(200px);
  opacity:0;
}
.foot-coins-stage{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:0;height:0;pointer-events:none;z-index:4;
}
@keyframes coin-burst{
  0%  {opacity:1;transform:translate(0,0) scale(.3) rotate(0deg);}
  45% {opacity:1;}
  100%{opacity:0;transform:translate(var(--cx),var(--cy)) scale(1) rotate(var(--cr));}
}
.foot-coin{
  position:absolute;
  width:28px;height:28px;top:-14px;left:-14px;
  border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#ffe567,#f4a800);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#7a4e00;
  box-shadow:0 3px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.38);
  animation:coin-burst var(--cd,.9s) cubic-bezier(.2,.9,.35,1) var(--cdelay,0s) both;
}

/* Dark footer body */
.foot-body{padding-top:clamp(44px,5vw,72px);}
.foot-links{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,3vw,44px);
  padding-bottom:clamp(28px,3.5vw,48px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.foot-col h4{margin:0 0 13px;color:#fff;font-family:var(--head);font-weight:700;font-size:.96rem;}
.foot-col a{display:block;padding:6px 0;color:rgba(255,255,255,.62);font-weight:500;font-size:.94rem;transition:color .2s;}
.foot-col a:hover{color:#fff;}

/* Giant logo */
.foot-giant-wrap{overflow:hidden;text-align:center;padding-top:clamp(8px,1.2vw,18px);line-height:1;}
.foot-giant-logo{
  display:block;margin:0 auto;
  width:min(88%, 1100px);
  height:auto;
  filter:brightness(0) invert(1);
  opacity:.12;
  user-select:none;
}

/* Bottom bar */
.foot-btm{
  display:flex;flex-wrap:wrap;gap:12px 22px;
  justify-content:space-between;align-items:center;
  padding:clamp(12px,1.5vw,18px) 0 clamp(22px,2.5vw,32px);
  font-size:.85rem;color:rgba(255,255,255,.58);
}
.foot-btm .lg{display:flex;flex-wrap:wrap;gap:18px;}
.foot-btm a{color:rgba(255,255,255,.58);}
.foot-btm a:hover{color:rgba(255,255,255,.9);transition:color .2s;}

/* brand mark (also used in header) */
.brand-mark{height:46px;width:auto;display:block;}

@media(max-width:860px){.foot-links{grid-template-columns:1fr 1fr;gap:34px;}}
@media(max-width:480px){.foot-links{grid-template-columns:1fr;}.foot-giant{font-size:clamp(3rem,18vw,5.5rem);}}
/* ---------- BRANCHEN ---------- */
.branchen{padding:calc(clamp(40px,5vw,72px) + 90px) 0 clamp(58px,7vw,108px);position:relative;overflow:hidden;width:100vw;margin-top:0;margin-left:calc(50% - 50vw);background:var(--bg-dark);color:#fff;}
.branchen .wrap{position:relative;z-index:2;}
.branchen h2{text-align:center;max-width:20em;margin:0 auto;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em;color:#fff;line-height:1.05;text-wrap:balance;}
.branchen h2 .g{color:var(--green);}
.branchen h3{text-align:center;max-width:26em;margin:0 auto;font-size:clamp(1.4rem,2.2vw,2rem);letter-spacing:-.025em;color:#fff;line-height:1.1;text-wrap:balance;font-weight:700;}
.branchen-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:clamp(30px,3.6vw,48px) auto 0;max-width:62em;}
.branchen .bx,.hero .bx{position:absolute;z-index:1;border-radius:6px;}
@media (prefers-reduced-motion:no-preference){
  .branchen .bx,.hero .bx{
    animation: bx-drop 0.9s cubic-bezier(.22,.61,.36,1) both, bx-float 4.2s ease-in-out 0.9s infinite;
  }
  .branchen .bx:nth-of-type(2),.hero .bx:nth-of-type(2){animation-delay:0.15s,1.05s;animation-duration:0.9s,5.4s;}
  .branchen .bx:nth-of-type(3),.hero .bx:nth-of-type(3){animation-delay:0.28s,1.18s;animation-duration:0.9s,3.8s;}
  .branchen .bx:nth-of-type(4),.hero .bx:nth-of-type(4){animation-delay:0.42s,1.32s;animation-duration:0.9s,5s;}
  .branchen .bx:nth-of-type(5),.hero .bx:nth-of-type(5){animation-delay:0.55s,1.45s;animation-duration:0.9s,4.6s;}
  .branchen .bx:nth-of-type(6),.hero .bx:nth-of-type(6){animation-delay:0.68s,1.58s;animation-duration:0.9s,6s;}
}
@keyframes bx-drop{
  0%   {transform:translateY(-50px) scale(0.7); opacity:0;}
  55%  {transform:translateY(8px)   scale(1.15,0.85); opacity:1;}
  75%  {transform:translateY(-12px) scale(0.96,1.04);}
  90%  {transform:translateY(3px)   scale(1.05,0.97);}
  100% {transform:translateY(0)     scale(1); opacity:1;}
}
@keyframes bx-float{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-16px) scale(1.05);}
}
@media (max-width:560px){.branchen .bx,.hero .bx{display:none;}}
/* ---------- TRUST / BRANCHEN-SLIDER (dunkel, full-bleed) ---------- */
.trust{position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--bg-dark);color:#fff;
  padding:clamp(62px,8vw,122px) 0;overflow:hidden;}
.trust::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 70% at 88% -6%,rgba(37,180,222,.14),transparent 60%),
             radial-gradient(50% 64% at 6% 108%,rgba(139,194,32,.13),transparent 60%);}
.trust .wrap{position:relative;z-index:2;}
.trust .eyebrow{background:rgba(139,194,32,.16);border-color:rgba(139,194,32,.42);color:#a9da4e;}
.trust-head{max-width:54em;}
.trust-head h2{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em;line-height:1.05;color:#fff;
  text-wrap:balance;margin-top:18px;max-width:17em;}
.trust-head h2 .g{color:var(--green);}
.trust-head p{margin:18px 0 0;font-size:clamp(1.06rem,1.3vw,1.28rem);line-height:1.55;
  color:rgba(255,255,255,.72);font-weight:600;max-width:40em;text-wrap:pretty;}

.trust-slider{margin-top:clamp(34px,4.4vw,58px);}
.tstage{position:relative;aspect-ratio:16/8.2;border-radius:var(--rl);overflow:hidden;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 50px 92px -42px rgba(0,0,0,.8);background:#100f0b;}
@media(max-width:680px){.tstage{aspect-ratio:4/4.3;}}

.tscene{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.045);
  transition:opacity .8s ease,transform 1.3s ease,visibility .8s;}
.tscene.is-active{opacity:1;visibility:visible;transform:scale(1);}
@media (prefers-reduced-motion:reduce){.tscene{transition:opacity .45s;transform:none;}.tscene.is-active{transform:none;}}
.tscene-art{position:absolute;inset:0;overflow:hidden;}
.art-hotel{background:radial-gradient(125% 105% at 80% -4%,#3c2c16,#16110a 70%);}
.art-gastro{background:radial-gradient(125% 105% at 18% 6%,#27330f,#12110a 72%);}
.art-wellness{background:radial-gradient(128% 112% at 76% 2%,#103a4c,#0b1417 72%);}
.art-retail{background:radial-gradient(125% 105% at 24% -2%,#2d2843,#121017 72%);}
.art-event{background:radial-gradient(128% 112% at 70% -4%,#3c1612,#170d0c 72%);}

/* soft scene light + grounding */
.t-orb{position:absolute;border-radius:50%;filter:blur(34px);pointer-events:none;mix-blend-mode:screen;opacity:.78;}
.t-floor{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.5));}
.t-shape{position:absolute;pointer-events:none;}
.tscene-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.tscene-shade{position:absolute;inset:0;background:
  radial-gradient(440px 320px at 80% 24%,color-mix(in srgb,var(--acc) 24%,transparent),transparent 72%),
  linear-gradient(118deg,rgba(16,11,6,.86) 0%,rgba(16,11,6,.42) 46%,rgba(16,11,6,.8) 100%);}
.tscene-art:has(.tscene-photo) .t-shape{display:none;}

/* generic prop card (voucher / loyalty) */
.tprop{position:absolute;z-index:4;background:#fff;color:var(--text);border-radius:20px;
  box-shadow:0 38px 72px -28px rgba(0,0,0,.82),0 0 0 1px rgba(255,255,255,.05);
  padding:18px 19px;width:min(330px,70%);}
.tprop .gm{display:flex;align-items:center;gap:8px;}
.tprop .gm .brand-word{font-size:1.12rem;}
.tprop .gm .v{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.05em;
  color:#fff;background:var(--acc);padding:5px 11px;border-radius:999px;white-space:nowrap;}
.tprop .amount{font-family:var(--head);font-weight:700;font-size:clamp(1.9rem,2.4vw,2.5rem);color:var(--ink);
  letter-spacing:-.04em;line-height:1;margin-top:15px;}
.tprop .tt{margin-top:7px;font-family:var(--head);font-weight:700;font-size:1.18rem;color:var(--ink);
  letter-spacing:-.02em;line-height:1.1;}
.tprop .mt{margin-top:6px;font-size:.86rem;font-weight:600;color:var(--muted);}
.tprop .redeemed{display:inline-flex;align-items:center;gap:8px;margin-top:15px;font-weight:700;font-size:.84rem;
  color:var(--green-press);background:var(--green-soft);padding:7px 12px;border-radius:999px;}
.tprop .redeemed .ck{width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:.62rem;flex-shrink:0;}
.tprop .stamps{display:flex;gap:7px;margin-top:15px;}
.tprop .stamps i{width:22px;height:22px;border-radius:50%;background:var(--green);box-shadow:0 4px 10px -4px rgba(120,170,30,.9);}
.tprop .stamps i.off{background:transparent;border:2px dashed var(--line-2);}
.tprop .code{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mono);font-weight:700;
  font-size:.82rem;color:var(--ink);background:var(--cream);border:1px dashed var(--line-2);padding:8px 13px;border-radius:10px;}

/* ticket prop (event) */
.tprop-ticket{display:flex;padding:0;overflow:hidden;width:min(372px,78%);}
.tt-main{flex:1;padding:17px 18px;}
.tt-stub{width:108px;flex-shrink:0;background:var(--acc);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;padding:14px 10px;position:relative;}
.tt-stub::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,#fff 0 7px,transparent 7px 14px);}
.qr{width:60px;height:60px;border-radius:8px;background:#fff;position:relative;
  background-image:linear-gradient(90deg,#13110c 50%,transparent 0),linear-gradient(0deg,#13110c 50%,transparent 0);
  background-size:11px 11px;background-clip:padding-box;border:5px solid #fff;}
.tt-stub .el{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;font-weight:700;text-transform:uppercase;}

/* slider controls */
.ts-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--ink);border:0;display:grid;place-items:center;font-size:1.7rem;
  line-height:1;box-shadow:0 12px 26px -8px rgba(0,0,0,.65);transition:transform .14s,background .2s;}
.ts-arrow:hover{transform:translateY(-50%) scale(1.09);background:#fff;}
.ts-prev{left:clamp(12px,1.6vw,22px);}.ts-next{right:clamp(12px,1.6vw,22px);}
@media(max-width:560px){.ts-arrow{width:42px;height:42px;font-size:1.35rem;}}

.ts-bar{display:flex;align-items:center;gap:16px;margin-top:clamp(18px,2vw,26px);flex-wrap:wrap;}
.ts-dots{display:flex;gap:9px;}
.ts-dot{width:30px;height:6px;border-radius:999px;background:rgba(255,255,255,.2);border:0;padding:0;cursor:pointer;
  transition:background .25s,width .25s;}
.ts-dot:hover{background:rgba(255,255,255,.4);}
.ts-dot.is-active{background:var(--green);width:46px;}
.ts-label{margin-left:auto;font-family:var(--mono);font-size:.78rem;font-weight:700;color:rgba(255,255,255,.62);
  letter-spacing:.04em;}
.ts-label b{color:#fff;}

/* microcopy + stats */
.trust-foot{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(26px,4vw,60px);align-items:center;
  margin-top:clamp(34px,4.4vw,56px);padding-top:clamp(28px,3.4vw,44px);border-top:1px solid rgba(255,255,255,.13);}
.trust-foot .mc{font-size:clamp(1.05rem,1.4vw,1.32rem);font-weight:600;line-height:1.5;
  color:rgba(255,255,255,.82);max-width:30em;text-wrap:pretty;}
.trust-foot .mc b{color:#fff;font-weight:700;}
.trust-stats{display:flex;gap:clamp(30px,4vw,58px);justify-content:flex-end;flex-wrap:wrap;}
.tstat .num{font-family:var(--head);font-weight:700;font-size:clamp(2.3rem,3.4vw,3.1rem);letter-spacing:-.045em;
  color:#fff;line-height:1;}
.tstat .num .g{color:var(--green);}
.tstat .lb{margin-top:9px;font-size:.92rem;font-weight:600;color:rgba(255,255,255,.6);line-height:1.3;max-width:13em;}
@media(max-width:760px){.trust-foot{grid-template-columns:1fr;}.trust-stats{justify-content:flex-start;}}

/* ---------- BLOG ---------- */
.blog{padding:clamp(56px,7vw,104px) 0;}
.blog-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(34px,4.2vw,54px);}
.blog h2{text-align:left;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em;line-height:1.05;margin:0;}
.blog-nav-btns{display:flex;gap:10px;flex-shrink:0;}
.blog-arrow{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:background .18s,border-color .18s,transform .18s;}
.blog-arrow:hover{background:var(--cream);border-color:var(--line-2);transform:scale(1.08);}
.blog-arrow svg{width:20px;height:20px;}
.blog-slider-outer{overflow:hidden;padding:20px 0 36px;}
.blog-grid{display:flex;gap:clamp(20px,2.4vw,30px);will-change:transform;}
.blog-card{flex:0 0 auto;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 14px 36px -18px rgba(0,0,0,.16);transition:transform .18s,box-shadow .22s,border-color .2s;text-decoration:none;}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 22px 48px -20px rgba(0,0,0,.2);border-color:var(--line-2);}
/* Full-bleed frosted glass layout for cards WITH image */
.blog-card:has(.has-img){position:relative;aspect-ratio:1/1;min-height:0;}
.blog-card:has(.has-img) .blog-media{position:absolute;inset:0;aspect-ratio:unset;border-bottom:none;}
.blog-card:has(.has-img) .blog-body{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border-top:1px solid rgba(255,255,255,.4);
  padding:18px 22px 22px;gap:10px;}
.blog-media{aspect-ratio:16/11;position:relative;display:grid;place-items:center;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(135deg,#e7e7e7 0 14px,#f2f2f2 14px 15px),var(--cream);}
.blog-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;}
.blog-media.has-img{background:#e7e7e7;}
.blog-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:16px;flex:1;}
.blog-title{font-family:var(--head);font-weight:700;font-size:clamp(1.12rem,1.35vw,1.32rem);color:var(--ink);line-height:1.25;letter-spacing:-.015em;text-wrap:balance;}
.blog-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;font-size:1rem;color:var(--green-press);}
.blog-more .arr{transition:transform .2s;}
.blog-card:hover .blog-more .arr{transform:translateX(4px);}
.blog-dots{display:flex;justify-content:center;gap:8px;margin-top:28px;}.blog-dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--line-2);cursor:pointer;padding:0;transition:background .2s,transform .2s;}
.blog-dot.active{background:var(--ink);transform:scale(1.35);}
/* Pfeil-Button (wie .vc-arrow) unten rechts auf der Karte */
.blog-card{position:relative;}
.blog-arrow-btn{position:absolute;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;
  background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-s);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;z-index:3;transition:transform .2s;}
.blog-card:hover .blog-arrow-btn{transform:scale(1.06);}
.blog-card:has(.has-img) .blog-body{padding-right:74px;}
@media (max-width:640px){.blog-slider-outer{padding-left:16px;padding-right:16px;}}
/* end */

/* ─── TESTIMONIAL SLIDER ─────────────────────────────────────────────────── */
.ts-section{padding:96px 0 0;--ts-bg:var(--bg);width:100vw;margin-left:calc(50% - 50vw);background:linear-gradient(to bottom,var(--ts-bg) calc(100% - 72px),var(--bg-dark) calc(100% - 72px));overflow:visible;position:relative;z-index:2;}
.ts-hd{text-align:center;margin-bottom:60px;}
.ts-hd h2{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em;line-height:1.05;margin-bottom:14px;}


.ts-stage{position:relative;margin-bottom:-90px;}
.ts-viewport{overflow:hidden;padding:40px 0 0;position:relative;}
.ts-viewport::before,.ts-viewport::after{
  content:"";position:absolute;top:0;bottom:0;width:130px;z-index:10;pointer-events:none;}
.ts-viewport::before{left:0;background:linear-gradient(90deg,var(--ts-bg) 0%,transparent 100%);bottom:72px;}
.ts-viewport::after {right:0;background:linear-gradient(-90deg,var(--ts-bg) 0%,transparent 100%);bottom:72px;}

@keyframes ts-marquee{
  0%  { transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

.ts-track{
  display:flex;gap:20px;align-items:center;
  width:max-content;
  animation: ts-marquee 32s linear infinite;
  will-change:transform;}
.ts-track.paused{ animation-play-state:paused; }

.ts-card{
  flex-shrink:0;width:340px;border-radius:var(--r);overflow:hidden;cursor:pointer;
  box-shadow:0 4px 14px rgba(60,48,24,.08),0 16px 36px -14px rgba(60,48,24,.18);}
.ts-card.ts-near{}
.ts-card.ts-active{cursor:default;}

.ts-photo{height:460px;overflow:hidden;background:var(--cream);}
.ts-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .5s ease;}
.ts-card:hover .ts-photo img{transform:scale(1.04);}

.ts-footer{
  background:var(--ink);height:72px;
  display:flex;align-items:center;justify-content:center;padding:0 24px;}
.ts-logo{
  max-height:38px;max-width:188px;width:auto;height:auto;display:block;
  filter:brightness(0) invert(1);object-fit:contain;}
.ts-logo-text{
  color:#fff;font-family:var(--head);font-weight:700;font-size:.88rem;
  letter-spacing:.12em;text-transform:uppercase;}

.ts-arrow{
  flex-shrink:0;width:52px;height:52px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);cursor:pointer;
  box-shadow:var(--shadow-s);
  transition:background .2s,color .2s,transform .2s,box-shadow .2s;
  z-index:20;}
.ts-arrow:hover{background:var(--ink);color:#fff;box-shadow:var(--shadow-m);transform:scale(1.08);}
.ts-prev{margin-right:16px;}.ts-next{margin-left:16px;}

@media(max-width:900px){
  .ts-card{width:280px;}
  .ts-photo{height:380px;}
}
@media(max-width:640px){
  .ts-section{padding:64px 0 0;}
  .ts-arrow{display:none;}
  .ts-card{width:240px;}
  .ts-photo{height:320px;}
  .ts-viewport::before,.ts-viewport::after{width:40px;}
}
/* end testimonial-slider */

/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMIERUNG — Breakpoint ≤ 768 px  (375 px Zielgröße)
   Vollständige Neudefinition: Typo · Buttons · Nav · Abstände · Stacking
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. TYPOGRAFIE — H1→H4 Hierarchie ───────────────────── */

  /* H1 — Seitenhaupttitel */
  .hero h1,
  h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
    letter-spacing: -0.034em;
    line-height: 1.08;
    margin-top: 8px;
  }

  /* H2 — alle Abschnittsüberschriften */
  .mods-head h2,
  .faq-head h2,
  .branchen h2,
  .usps-head h2,
  .flow-head h2,
  .trust-head h2,
  .ts-hd h2,
  .cta-band h2,
  .integ h2,
  .blog h2,
  .blog-head-row h2,
  .conv .usps-head h2 {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
    letter-spacing: -0.028em;
    line-height: 1.1;
  }
  .teaser h2 {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    letter-spacing: -0.028em;
    line-height: 1.1;
  }

  /* H3 — Karten- & Unterüberschriften */
  .feat h3,
  .adv h3,
  .flow-panel-copy h3,
  .branchen h3,
  .mod-dh h3 {
    font-size: clamp(1.15rem, 5.2vw, 1.5rem);
    letter-spacing: -0.02em;
    line-height: 1.18;
  }

  /* H4 — Labels / Footer-Spalten */
  .foot-col h4 {
    font-size: clamp(0.96rem, 4.2vw, 1.1rem);
    letter-spacing: -0.01em;
    line-height: 1.3;
  }

  /* Statement-Zitat */
  .st-quote {
    font-size: clamp(1.9rem, 8vw, 3rem);
    letter-spacing: -0.04em;
  }

  /* Lead-Text */
  .lead {
    font-size: clamp(0.96rem, 4vw, 1.08rem);
    margin-top: 12px;
    max-width: none;
  }

  /* Hero-Subline */
  .hero-sub {
    font-size: clamp(0.95rem, 4vw, 1.08rem);
    margin-top: 14px;
  }

  /* Body-Text in Karten / Panels */
  .feat p,
  .adv p,
  .vc-detail p,
  .mod-teaser,
  .faq-a p,
  .trust-head p,
  .flow-head p {
    font-size: 0.97rem;
    line-height: 1.55;
  }

  /* Kleine Labels */
  .mod-cat    { font-size: 0.6rem; }
  .bh-cat     { font-size: 0.8rem; }
  .tease-tag  { font-size: 0.65rem; }

  /* ── 2. BUTTONS — min. 44 px Höhe ────────────────────────── */

  .btn {
    min-height: 44px;
    font-size: 0.98rem;
    padding: 12px 24px;
  }
  .btn-sm {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 0.92rem;
  }
  .btn-lg {
    min-height: 52px;
    padding: 14px 28px;
    font-size: 1.04rem;
  }

  /* ── 3. NAVIGATION ────────────────────────────────────────── */

  .hdr { top: 0; margin-top: 0; }
  .hdr-topbar { display: none; }

  .hdr-in {
    border-radius: 0 !important;
    border-left: none;
    border-right: none;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: 58px;
    padding: 0 12px 0 16px !important;
    box-shadow: none;
    grid-template-columns: auto 1fr auto !important;
  }

  .nav .nav-item,
  .nav a:not(.btn),
  .lang-toggle { display: none; }

  .brand-mark { height: 34px; }

  /* Mega-Panels auf Mobile komplett verstecken */
  .mega-panel { display: none !important; }

  /* "Kostenlos starten" im Header ausblenden — Login + Burger bleiben */
  .hdr-actions .btn-primary.hdr-cta { display: none; }

  /* Hamburger-Button */
  .hdr-ham {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: 1.5px solid var(--line-2);
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
  }
  .hdr-ham span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
  }

  /* ── 4. ABSTÄNDE — reduziert aber luftig ─────────────────── */

  .wrap { width: calc(100% - 32px); }

  .usps       { padding: clamp(40px, 9vw, 64px) 0 clamp(20px, 5vw, 36px); }
  .modules    { padding: clamp(44px, 9vw, 72px) 0; }
  .faq        { padding: clamp(44px, 9vw, 72px) 0; }
  .branchen   { padding: calc(clamp(36px, 8vw, 64px) + 90px) 0 clamp(36px, 8vw, 64px); }
  .conv       { padding: clamp(44px, 9vw, 72px) 0; }
  .integ      { padding: clamp(44px, 9vw, 72px) 0 clamp(40px, 8vw, 64px); }
  .blog       { padding: clamp(44px, 9vw, 72px) 0; }
  .ts-section { padding: clamp(44px, 9vw, 72px) 0 0; }
  .teaser     { padding: clamp(40px, 8vw, 64px) 0; }
  .cta        { padding: clamp(16px, 3vw, 28px) 0 clamp(44px, 9vw, 72px); }
  .flow       { padding: clamp(40px, 8vw, 64px) 0 clamp(24px, 5vw, 40px); }
  .trust      { padding: clamp(52px, 9vw, 80px) 0; }
  .statement  { padding: clamp(60px, 10vw, 100px) 0; }

  /* ── 5. LAYOUT-STACKING ───────────────────────────────────── */

  /* 5a — Hero: Bild oben, full-bleed, leicht unter Navi */
  .hero { overflow: visible; }

  .hero-in {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
    padding-bottom: 32px;
    min-height: unset;
  }

  /* Bild vor Text, breiter als Viewport, ragt links+rechts raus */
  .shot.hero-vis {
    order: -1;
    width: calc(100% + 96px) !important;
    max-width: none !important;
    margin-left: -48px !important;
    margin-right: 0 !important;
    margin-top: -18px;
    margin-bottom: 28px;
    transform: none !important;
  }

  .hero-img {
    border-radius: 0;
    width: 100%;
    display: block;
  }

  .shot { min-height: 0; }
  .hero-copy { padding-top: 4px; }
  .hero-cta { flex-direction: column; gap: 10px; margin-top: 22px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-trust { flex-wrap: wrap; gap: 10px; margin-top: 24px; }

  /* 5b — Teaser (Stempelkarte) */
  .teaser-band { grid-template-columns: 1fr; gap: 28px; }

  /* 5c — USPs / Features */
  .usps-grid { grid-template-columns: 1fr; gap: 32px; }
  .usps-head { margin-bottom: clamp(24px, 5vw, 36px); }

  /* 5d — Vorteile-Karten */
  .adv-grid { grid-template-columns: 1fr; }
  .adv, .adv-lg { grid-column: auto; }

  /* 5e — Vorteile-Galerie */
  .vgal { flex-direction: column; height: auto; gap: 10px; margin-top: 28px; }
  .vcard { flex: none; height: 100px; transition: height 0.5s cubic-bezier(.4,0,.2,1); }
  .vcard.open { height: auto; min-height: 300px; }
  .vcard:not(.open) .vc-head {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: clamp(1rem, 4vw, 1.2rem);
  }
  .vcard:not(.open) .vc-inner { top: auto; right: 14px; }
  .vc-inner { left: 14px; right: 14px; bottom: 14px; }

  /* 5f — Flow / Kaufprozess */
  .flow-tabs { gap: 8px; }
  .flow-tab { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 12px 14px; }
  .flow-tab[aria-selected="true"] { flex-grow: 1; }
  .flow-panel { display: block; min-height: 0; }
  .flow-slide { grid-template-columns: 1fr; }
  .flow-slide.is-active { display: block; }
  .flow-panel-copy { padding: 24px 22px 6px; }
  .flow-panel-vis { padding: 16px 0 24px 18px; }
  .flow-shot { position: relative; top: 0; left: 0; width: 114%; max-width: none; }
  .flow-head { text-align: left; }

  /* 5g — Module-Grid (dunkel) */
  .mods-grid { grid-template-columns: 1fr; }
  .mod-card.c1, .mod-card.c2,
  .mod-card.c3, .mod-card.c4 { grid-column: span 1; }

  /* 5h — Hochkant-Karten (Branchen/Produkte) */
  .mtall { grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 14px); }
  .tcard { min-height: 340px; }

  /* 5i — Bento-Grid (hell) */
  .bhgrid { grid-template-columns: 1fr; max-width: 100%; }

  /* 5j — Integration / Schnittstellen */
  .integ-in { padding-bottom: clamp(36px, 5vw, 60px); }
  .integ-steps { grid-template-columns: 1fr; }
  .istep { aspect-ratio: auto; flex-direction: row; text-align: left; gap: 14px; padding: 16px; }
  .logowall { margin-top: clamp(-36px, -3vw, -20px); }

  /* 5k — Logo Wall: 3 Spalten */
  .lw-grid { grid-template-columns: repeat(3, 1fr); }
  .lw-cell:nth-child(5n)        { border-right: 1px solid var(--line); }
  .lw-cell:nth-last-child(-n+5) { border-bottom: 1px solid var(--line); }
  .lw-cell:nth-child(3n)        { border-right: 0; }
  .lw-cell:nth-last-child(-n+3) { border-bottom: 0; }

  /* 5l — Trust Slider */
  .trust-foot { grid-template-columns: 1fr; gap: 28px; }
  .trust-stats { justify-content: flex-start; gap: 24px; }
  .tstat .num { font-size: clamp(2rem, 7vw, 2.6rem); }

  /* 5m — Testimonials */
  .ts-hd { margin-bottom: 32px; padding: 0 16px; }
  .ts-card { width: 260px; }
  .ts-photo { height: 360px; }

  /* 5n — FAQ */
  .faq .wrap { width: calc(100% - 32px); }
  .faq-list { column-count: 1; }
  .faq-q { font-size: clamp(0.96rem, 4vw, 1.06rem); padding: 17px 20px; }

  /* 5o — Blog */
  .blog-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: clamp(24px, 5vw, 40px);
  }

  /* 5p — Branchen-Tags */
  .branchen-tags { gap: 10px; margin-top: clamp(22px, 4vw, 36px); }
  .branchen-tags .btn { font-size: 0.9rem; padding: 11px 20px; }

  /* 5q — CTA-Band */
  .cta-band { border-radius: 22px; padding: clamp(36px, 7vw, 56px) clamp(20px, 5vw, 40px); }
  .cta-actions { flex-direction: column; gap: 10px; margin-top: 24px; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  .cta-contact { flex-direction: column; align-items: center; gap: 10px; }

  /* 5r — Footer */
  .foot-links { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-btm { flex-direction: column; align-items: flex-start; gap: 8px; }
  .foot-body { padding-top: clamp(32px, 6vw, 56px); }
}


/* ---------- STEPPER · nummerierte Schritte + Connector + Fertig-Banner (wiederverwendbar) ---------- */
.stepper{display:grid;grid-template-columns:repeat(var(--stepper-cols,4),1fr);gap:clamp(16px,2vw,30px);align-items:start;}
.step{position:relative;display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);}
.step-thumb{position:relative;aspect-ratio:16/11;border-radius:14px;border:1px solid var(--line);overflow:hidden;
  background:repeating-linear-gradient(135deg,#e7e7e7 0 14px,#f2f2f2 14px 15px),var(--cream);
  display:grid;place-items:center;box-shadow:var(--shadow-s);}
.step-thumb-lab{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.03em;color:var(--muted);
  background:rgba(255,255,255,.9);border:1px solid var(--line);padding:7px 13px;border-radius:999px;text-align:center;max-width:82%;line-height:1.4;}
.step-thumb::after{content:"";position:absolute;top:50%;right:-19px;z-index:3;width:13px;height:13px;
  border-top:2px solid var(--line-2);border-right:2px solid var(--line-2);transform:translateY(-50%) rotate(45deg);}
.step:last-child .step-thumb::after{display:none;}
.step-row{display:flex;align-items:center;gap:12px;}
.step-num{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;
  font-family:var(--head);font-weight:700;font-size:1rem;display:grid;place-items:center;}
.step-title{font-family:var(--head);font-weight:700;font-size:clamp(1.05rem,1.2vw,1.2rem);letter-spacing:-.02em;color:var(--ink);line-height:1.15;}
.step-desc{margin:0;font-size:.95rem;line-height:1.5;color:var(--text);font-weight:500;text-wrap:pretty;}
.step.is-done .step-num{background:var(--green);box-shadow:0 6px 14px -6px rgba(120,170,30,.9);}
.step.is-done .step-title{color:var(--green-press);}
.stepper-done{display:flex;align-items:center;justify-content:center;gap:13px;
  margin-top:clamp(20px,2.4vw,32px);padding:clamp(16px,1.9vw,24px);
  background:var(--green-soft);border:1px solid color-mix(in srgb,var(--green) 45%,var(--line));
  border-radius:var(--r);color:var(--green-press);font-family:var(--head);font-weight:700;
  font-size:clamp(1.02rem,1.3vw,1.2rem);text-align:center;text-wrap:balance;}
.stepper-done .ck{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:.85rem;}
@media (max-width:860px){.stepper{grid-template-columns:1fr 1fr;}.step-thumb::after{display:none;}}
@media (max-width:520px){.stepper{grid-template-columns:1fr;}}

/* ============================================================
   ICON-FLÄCHE (global, verbindlich) — .icb
   Einheitliche Sprache für "Icon in Fläche". Immer diese Klassen
   verwenden, keine neuen Ad-hoc-Icon-Container mehr anlegen.
   Markup: <span class="icb icb-md"><svg ...></svg></span>
   Größen: .icb-sm 30 · .icb 38 (Default) · .icb-md 46 · .icb-lg 52
   Form:   Default abgerundetes Quadrat (Radius skaliert mit Größe) · .icb-round = Kreis (Ausnahme)
           .icb-confirm (Häkchen) ist immer rund
   Töne (heller Grund): Default grün · .icb-cyan .icb-amber
                        .icb-purple .icb-red
   Dunkler Grund:       .icb-on-dark (Glasfläche, hellgrünes Icon)
   ============================================================ */
.icb{--icb-size:38px;--icb-radius:11px;--icb-icon:20px;--icb-bg:var(--green-soft);--icb-fg:var(--green-press);
  width:var(--icb-size);height:var(--icb-size);border-radius:var(--icb-radius);
  background:var(--icb-bg);color:var(--icb-fg);display:grid;place-items:center;flex-shrink:0;}
.icb svg{width:var(--icb-icon);height:var(--icb-icon);display:block;}
.icb-sm{--icb-size:30px;--icb-icon:16px;--icb-radius:9px;}
.icb-md{--icb-size:clamp(42px,3.2vw,46px);--icb-icon:22px;--icb-radius:13px;}
.icb-lg{--icb-size:52px;--icb-icon:26px;--icb-radius:15px;}
/* .icb-square bleibt als Alias (entspricht jetzt dem Default) */
.icb.icb-round{--icb-radius:50%;}
/* Häkchen/Bestätigung bleiben rund */
.icb.icb-confirm{--icb-radius:50%;}
.icb-cyan{--icb-bg:var(--cyan-soft);--icb-fg:var(--cyan-deep);}
.icb-amber{--icb-bg:var(--amber-soft);--icb-fg:#c9870f;}
.icb-purple{--icb-bg:var(--purple-soft);--icb-fg:#6b5cb8;}
.icb-red{--icb-bg:var(--red-soft);--icb-fg:#d93a26;}
.icb-on-dark{--icb-bg:rgba(255,255,255,.13);--icb-fg:#5ec9ec;}
.icb-confirm{--icb-bg:var(--green-soft);--icb-fg:var(--green-press);}
.icb-on-dark.icb-confirm{--icb-bg:rgba(255,255,255,.13);--icb-fg:#a8d63a;}


/* ---------- AKTIVER MENÜPUNKT (gesetzt von gurado-nav.js) ---------- */
.nav a[aria-current="page"]:not(.btn),
.nav-btn.nav-btn-current{background:#e2f3fa;color:#1b97bd;}
.mega-card[aria-current="page"]{background:#e2f3fa;}
.mega-card[aria-current="page"] .mega-card-cat{color:#1b97bd;}
.mega-feat-list li a[aria-current="page"]{background:#e2f3fa;color:#1b97bd;font-weight:700;}
.ham-sub-item[aria-current="page"]{background:#e2f3fa;}
.ham-sub-item[aria-current="page"] .ham-sub-cat{color:#1b97bd;}
.ham-nav-item[aria-current="page"]{color:#1b97bd;}

/* ============================================================
   SCHRITT-BÜHNE (.sb) · Schritte links, mitwachsendes Objekt rechts
   Ersetzt Screenshot-Stepper. Markup: section[data-sb] > .sb-in >
   ol.sb-steps (button.sb-step[data-chip]) + .sb-stage
   Zustände an .sb-stage: .is-sN (genau Schritt N) · .onN (Schritt ≥ N)
   Helfer: [data-scr="N"] = Screen nur in Schritt N · [data-on="N"] = ab Schritt N aktiv
   (.sb-hid zusätzlich = bis dahin unsichtbar statt ausgegraut) · .sk = Skeleton-Text
   JS: gurado-steps.js
   ============================================================ */
.sb-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3.6vw,64px);align-items:center;}
.sb-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.sb-step{all:unset;box-sizing:border-box;width:100%;cursor:pointer;position:relative;overflow:hidden;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;align-items:center;padding:16px 20px;border-radius:18px;border:1px solid transparent;transition:background .25s,border-color .25s;}
.sb-step:hover{background:rgba(255,255,255,.06);}
.sb-step:focus-visible{outline:2px solid #5ec9ec;outline-offset:2px;}
.sb-step .step-num{transition:background .25s,color .25s;}
.sb-step .step-title{color:rgba(255,255,255,.72);transition:color .25s;}
.sb-step .step-desc{grid-column:2;max-height:0;opacity:0;overflow:hidden;color:rgba(255,255,255,.72);transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .3s,margin .3s;}
.sb-step[aria-current="step"]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);}
.sb-step[aria-current="step"] .step-num{background:#fff;color:var(--ink);}
.sb-step[aria-current="step"] .step-title{color:#fff;}
.sb-step[aria-current="step"] .step-desc{max-height:9em;opacity:1;margin-top:8px;}
.sb-step.is-past .step-num{background:rgba(255,255,255,.3);}
.sb-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:#5ec9ec;}
.is-auto .sb-step[aria-current="step"] .sb-prog{animation:sb-fill 4.8s linear forwards;}
@keyframes sb-fill{to{width:100%;}}
.sb-stage,.sb-dev{position:relative;}
.sb-win{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -34px rgba(0,0,0,.55);}
.sb-top{display:flex;align-items:center;gap:6px;padding:11px 16px;background:#f0f0f0;border-bottom:1px solid var(--line);}
.sb-top i{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.14);}
.sb-url{flex:1;max-width:62%;margin-inline:auto;background:#fff;border-radius:999px;padding:5px 12px;font-size:.74rem;font-weight:600;color:var(--muted);text-align:center;}
.sb-body{position:relative;aspect-ratio:16/11;background:#f9f9f9;overflow:hidden;font-family:var(--head);color:var(--ink);}
.sb-scr{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(18px,2.4vw,34px);opacity:0;transform:translateY(10px);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none;}
.is-s1 [data-scr="1"],.is-s2 [data-scr="2"],.is-s3 [data-scr="3"],.is-s4 [data-scr="4"]{opacity:1;transform:none;}
.sb-stage [data-on]{transition:opacity .5s,filter .5s,transform .55s cubic-bezier(.2,.8,.2,1);}
.sb-stage [data-on]:not([data-on="1"]){opacity:.25;filter:grayscale(1);}
.sb-stage .sb-hid[data-on]:not([data-on="1"]){opacity:0;filter:none;transform:translateY(10px);}
.on2 [data-on="2"],.on3 [data-on="3"],.on4 [data-on="4"]{opacity:1!important;filter:none!important;transform:none!important;}
.sk{color:transparent!important;background:rgba(0,0,0,.09);border-radius:5px;transition:color .45s,background .45s;}
.sb-chip{position:absolute;right:-22px;top:64px;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;background:var(--ink);border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 20px 40px -18px rgba(0,0,0,.6);font-weight:700;font-size:.92rem;color:#fff;white-space:nowrap;}
.sb-chip.pop{animation:sb-pop .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes sb-pop{from{opacity:0;transform:translateY(10px) scale(.96);}}
.sb-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-s);}
.sb-lab{font-size:.7rem;font-weight:700;color:var(--muted);}
.sb-pill{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;padding:5px 11px;border-radius:999px;background:#f0f0f0;color:var(--ink);white-space:nowrap;}
.sb-pill.is-ok{background:var(--green-soft);color:var(--green-press);}
.sb-pill.is-cy{background:var(--cyan-soft);color:var(--cyan-deep);}
.sb-line{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.84rem;font-weight:600;padding:9px 0;border-bottom:1px solid var(--line);}
.sb-line:last-child{border-bottom:0;}
.sb-line em{font-style:normal;color:var(--muted);}
/* Gerät: Smartphone */
.sb-phone{position:relative;width:min(290px,80%);margin-inline:auto;aspect-ratio:9/18.5;border-radius:44px;background:#1c1a14;padding:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12);}
.sb-phone::before{content:"";position:absolute;top:20px;left:50%;width:80px;height:22px;margin-left:-40px;border-radius:999px;background:#1c1a14;z-index:3;}
.sb-phone .sb-body{aspect-ratio:auto;height:100%;border-radius:35px;background:#fff;}
.sb-phone .sb-scr{justify-content:flex-start;padding:56px 18px 22px;}
.sb-dev-phone .sb-dev{width:min(290px,80%);margin-inline:auto;}
.sb-dev-phone .sb-phone{width:100%;}
.sb-dev-phone .sb-chip{right:auto;left:calc(100% - 40px);top:90px;bottom:auto;}
@media(max-width:980px){.sb-in{grid-template-columns:1fr;}.sb-stage{order:-1;}.sb-chip{right:12px;top:auto;bottom:-18px;}.sb-dev-phone .sb-chip{left:auto;right:-16px;top:auto;bottom:-18px;}}
@media(max-width:560px){.sb-dev-phone .sb-dev{width:min(250px,76%);}.sb-chip{font-size:.84rem;}}
@media(prefers-reduced-motion:reduce){.sb-scr,.sb-stage [data-on],.sk{transition:none;}}