/* ══════════════════════════════════════
   VARIABLES & RESET
══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#FAF8F3;
  --ivory:#F5EDE0;
  --gold:#B8920A;
  --gold2:#D4A820;
  --goldl:#F0D060;
  --red:#C0000E;
  --red2:#8B0010;
  --dark:#1A0F05;
  --text:#2A1A0A;
  --text2:#6B5A48;
  --text3:#9A8870;
  --white:#FFFFFF;
  --border:rgba(184,146,10,.18);
  --shadow:rgba(26,15,5,.1);
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--cream);color:var(--text);font-family:'Raleway',sans-serif;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button{border:none;cursor:pointer;font-family:inherit;background:none}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}
::selection{background:rgba(184,146,10,.15)}

/* ══════════════════════════════════════
   TOP ACCENT LINE
══════════════════════════════════════ */
.topline{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:600;
  background:linear-gradient(90deg,var(--red),var(--gold),var(--gold2),var(--red));
  background-size:300% 100%;
  animation:lineMove 4s linear infinite}
@keyframes lineMove{0%{background-position:0%}100%{background-position:300%}}

/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
#nav{
  position:fixed;top:2px;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,60px);
  height:72px;
  background:rgba(250,248,243,0);
  backdrop-filter:blur(0px);
  border-bottom:1px solid transparent;
  transition:background .4s,backdrop-filter .4s,border-color .4s,box-shadow .4s}
#nav.scrolled{
  background:rgba(250,248,243,.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-color:var(--border);
  box-shadow:0 4px 32px rgba(26,15,5,.07)}

.nav-logo{display:flex;align-items:center;gap:11px;flex-shrink:0;cursor:pointer}
.nav-logo-icon{
  width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:var(--red);border:2px solid var(--red);
  box-shadow:0 2px 14px rgba(192,0,14,.25);position:relative}
.nav-logo-icon img{
  width:148%;height:148%;object-fit:cover;object-position:20% 8%;
  position:absolute;top:-7px;left:-12%}
.nav-logo-text{display:flex;flex-direction:column;gap:1px;line-height:1}
.nav-logo-name{
  font-family:'Cinzel Decorative',serif;font-weight:900;
  font-size:20px;letter-spacing:2px;color:var(--dark)}
.nav-logo-sub{
  font-family:'Cinzel',serif;font-size:6.5px;letter-spacing:4px;
  color:var(--gold);text-transform:uppercase;margin-top:3px}

.nav-links{display:flex;align-items:center;gap:clamp(18px,2.8vw,40px);list-style:none}
.nav-links a{
  font-family:'Raleway',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--text2);transition:color .25s;
  position:relative;padding-bottom:4px}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:center;transition:transform .3s}
.nav-links a:hover{color:var(--gold)}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 22px;border:1.5px solid var(--gold);border-radius:4px;
  font-family:'Raleway',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--dark);
  background:transparent;transition:all .3s;
  box-shadow:0 2px 12px rgba(184,146,10,.08)}
.nav-btn:hover{background:var(--gold);color:var(--white);box-shadow:0 6px 24px rgba(184,146,10,.28)}

.hero-title-wrap{
  position:relative;
  margin-bottom:clamp(16px,2.5vh,28px);
  animation:fadeUp .6s ease .9s both}

.hero-price-badge{
  position:absolute;
  right:clamp(-10px,2vw,10px);
  bottom:clamp(-10px,0vw,0px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:clamp(90px,9vw,120px);height:clamp(90px,9vw,120px);border-radius:50%;
  background:linear-gradient(140deg,var(--red),var(--red2));
  border:2.5px solid rgba(184,146,10,.6);
  box-shadow:0 6px 28px rgba(192,0,14,.38),0 0 0 4px rgba(184,146,10,.12);
  animation:priceSpin .7s cubic-bezier(.34,1.56,.64,1) 1.4s both}
.hero-price-badge::before{
  content:'';position:absolute;inset:5px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);pointer-events:none}
@keyframes priceSpin{from{opacity:0;transform:scale(.5) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}

.hpb-uvp{
  font-family:'Cinzel',serif;font-size:clamp(7px,0.8vw,9px);letter-spacing:3px;
  text-transform:uppercase;color:rgba(255,255,255,.75);
  line-height:1;margin-bottom:3px}
.hpb-price{
  font-family:'Playfair Display',serif;font-weight:900;
  font-size:clamp(17px,1.8vw,24px);color:var(--white);line-height:1;
  text-shadow:0 1px 6px rgba(0,0,0,.3)}

.hamburger{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:38px;height:38px;cursor:pointer;
  border:1px solid var(--border);border-radius:4px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(8px)}
.hamburger span{
  display:block;width:18px;height:1.5px;background:var(--text);
  border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mob-nav{
  display:none;position:fixed;top:74px;left:0;right:0;z-index:490;
  background:rgba(250,248,243,.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  box-shadow:0 16px 48px rgba(26,15,5,.09);
  padding:24px clamp(20px,5vw,40px) 28px;
  transform:translateY(-8px);opacity:0;
  transition:transform .3s,opacity .3s;pointer-events:none}
.mob-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mob-nav ul{list-style:none;display:flex;flex-direction:column;margin-bottom:20px}
.mob-nav ul li a{
  display:block;padding:13px 0;
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;
  text-transform:uppercase;color:var(--text2);
  border-bottom:1px solid var(--border);transition:color .2s}
.mob-nav ul li:last-child a{border:none}
.mob-nav ul li a:hover{color:var(--gold)}
.mob-nav-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:15px;background:var(--red);color:var(--white);
  border-radius:3px;font-family:'Raleway',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  box-shadow:0 4px 20px rgba(192,0,14,.28)}

/* ══════════════════════════════════════
   HERO SECTION
══════════════════════════════════════ */
#hero{
  display:grid;
  grid-template-columns:55fr 45fr;
  min-height:100svh;
  padding-top:74px;
  position:relative}

/* Soft gradient transition at bottom of hero */
#hero::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;
  height:clamp(80px,12vw,180px);
  background:linear-gradient(to bottom,transparent,var(--cream));
  z-index:5;pointer-events:none}

/* ── HERO VISUAL (left column) ── */
.hero-visual{
  position:relative;
  overflow:hidden;
  min-height:clamp(360px,calc(100svh - 74px),960px)}

/* Soft right-edge fade so visual blends into text column */
.hero-visual::after{
  content:'';position:absolute;top:0;right:0;bottom:0;
  width:clamp(40px,8%,100px);
  background:linear-gradient(to right,transparent,var(--cream));
  z-index:2;pointer-events:none}

/* The composite scene image */
.hero-scene{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:left center;
  animation:sceneIn 1.1s ease .15s both}
@keyframes sceneIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}

/* ── HERO CONTENT (right column) ── */
.hero-content{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(36px,5svh,80px) clamp(24px,4vw,60px) clamp(36px,5svh,80px) clamp(16px,2vw,32px);
  position:relative;z-index:6;
  animation:contentIn .9s ease .5s both}
@keyframes contentIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

.hero-eyebrow{
  font-family:'Cinzel',serif;font-size:9px;letter-spacing:5px;
  color:var(--gold);text-transform:uppercase;
  display:flex;align-items:center;gap:10px;
  margin-bottom:clamp(16px,2vh,24px);
  animation:fadeUp .6s ease .8s both}
.hero-eyebrow::before,.hero-eyebrow::after{content:'✦';font-size:8px;opacity:.75}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.hero-h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(36px,4.8vw,72px);
  font-weight:900;line-height:1.05;
  margin-bottom:0}
.hero-h1 .l1{display:block;color:var(--dark)}
.hero-h1 .l2{display:block;color:var(--red);font-style:italic}
.hero-h1 .l3{
  display:block;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 45%,var(--goldl) 65%,var(--gold) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hero-divider{
  display:flex;align-items:center;gap:14px;
  margin-bottom:clamp(16px,2.5vh,24px);
  animation:fadeUp .6s ease 1s both}
.hero-divider::before,.hero-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(to right,transparent,rgba(184,146,10,.45))}
.hero-divider::after{background:linear-gradient(to left,transparent,rgba(184,146,10,.45))}
.hero-divider span{color:var(--gold);font-size:11px}

.hero-desc{
  font-size:clamp(14px,1.35vw,16px);line-height:1.9;
  color:var(--text2);max-width:400px;
  margin-bottom:clamp(24px,3.5vh,36px);
  animation:fadeUp .6s ease 1.1s both}

/* Benefit icons in hero */
.hero-bens{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1.4vw,18px);
  margin-bottom:clamp(28px,4vh,40px);
  animation:fadeUp .6s ease 1.2s both}
.hb{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.hb-ico{
  width:clamp(54px,5.5vw,68px);height:clamp(54px,5.5vw,68px);
  border-radius:50%;border:1.5px solid rgba(184,146,10,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(22px,2.3vw,28px);
  background:rgba(255,255,255,.65);backdrop-filter:blur(6px);
  box-shadow:0 2px 14px rgba(184,146,10,.1);transition:all .3s}
.hb:hover .hb-ico{
  border-color:var(--gold);background:rgba(255,248,215,.9);
  box-shadow:0 5px 22px rgba(184,146,10,.22);transform:translateY(-3px)}
.hb-lbl{
  font-family:'Cinzel',serif;font-size:7.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text);font-weight:700;line-height:1.3}
.hb-desc{font-size:10px;color:var(--text3);line-height:1.4}

.hero-cta{
  display:flex;flex-direction:column;gap:14px;
  animation:fadeUp .6s ease 1.3s both}
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:18px clamp(28px,4vw,56px);background:var(--red);color:var(--white);
  font-family:'Raleway',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:3.5px;text-transform:uppercase;border-radius:3px;
  box-shadow:0 6px 32px rgba(192,0,14,.32);
  position:relative;overflow:hidden;transition:all .3s;
  isolation:isolate;align-self:flex-start;cursor:pointer;border:none}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:translateX(-100%);transition:transform .55s}
.btn-primary:hover::before{transform:translateX(100%)}
.btn-primary:hover{box-shadow:0 10px 48px rgba(192,0,14,.5);transform:translateY(-2px) scale(1.02)}
.btn-primary:active{transform:translateY(0) scale(.98)}

.hero-trust{
  font-family:'Cinzel',serif;font-size:8.5px;letter-spacing:3.5px;
  color:var(--gold);text-transform:uppercase}

/* ══════════════════════════════════════
   FLOATING TRUST BAR
══════════════════════════════════════ */
.trust-wrap{
  position:relative;z-index:20;
  padding:0 clamp(16px,5vw,60px);
  margin-top:clamp(-52px,-6vw,-80px)}

.trust-bar{
  max-width:1300px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(184,146,10,.18);border-radius:20px;
  box-shadow:
    0 24px 80px rgba(26,15,5,.09),
    0 4px 24px rgba(184,146,10,.08),
    inset 0 1px 0 rgba(255,255,255,.6)}

.tb-item{
  display:flex;align-items:center;gap:clamp(10px,1.4vw,16px);
  padding:clamp(18px,2.5vw,28px) clamp(14px,2vw,24px);
  border-right:1px solid rgba(184,146,10,.1);
  transition:background .3s}
.tb-item:last-child{border-right:none}
.tb-item:hover{background:rgba(184,146,10,.04)}
.tb-ico{font-size:clamp(22px,2.5vw,30px);flex-shrink:0}
.tb-body{display:flex;flex-direction:column;gap:3px}
.tb-stars{color:var(--gold);font-size:11px;letter-spacing:1px;line-height:1}
.tb-title{
  font-family:'Cinzel',serif;font-size:clamp(7.5px,.85vw,9.5px);
  letter-spacing:2px;text-transform:uppercase;
  color:var(--text);font-weight:700;line-height:1.2}
.tb-desc{font-size:clamp(10px,1.1vw,12px);color:var(--text2);line-height:1.45}

/* ══════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════ */
.sec{padding:clamp(72px,10vw,128px) clamp(16px,5vw,60px)}
.sec-inner{max-width:1200px;margin:0 auto}

.eyebrow{
  font-family:'Cinzel',serif;font-size:9px;letter-spacing:5px;
  text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  gap:12px;margin-bottom:14px}
.eyebrow::before,.eyebrow::after{content:'◆';font-size:7px;opacity:.65}

.sec-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(28px,3.6vw,54px);
  font-weight:900;line-height:1.12;
  text-align:center;color:var(--dark);margin-bottom:12px}
.sec-title em{color:var(--red);font-style:italic}
.sec-title .gd{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.gold-rule{
  width:clamp(40px,6vw,72px);height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:0 auto clamp(12px,2vw,20px)}

.sec-sub{
  text-align:center;font-size:clamp(14px,1.4vw,17px);
  color:var(--text2);line-height:1.85;
  max-width:580px;margin:0 auto clamp(44px,7vw,80px)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal-l{opacity:0;transform:translateX(-30px);transition:opacity .7s ease,transform .7s ease}
.reveal-r{opacity:0;transform:translateX(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.on,.reveal-l.on,.reveal-r.on{opacity:1;transform:translate(0)}

/* ══════════════════════════════════════
   BENEFITS SECTION
══════════════════════════════════════ */
#vorteile{background:var(--cream)}

.ben-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.5vw,32px)}

.ben-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(28px,3.5vw,44px) clamp(18px,2.5vw,32px);
  background:var(--white);
  border:1px solid rgba(184,146,10,.1);border-radius:14px;
  box-shadow:0 4px 24px rgba(26,15,5,.05);
  transition:all .4s;cursor:default}
.ben-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 60px rgba(26,15,5,.1);
  border-color:rgba(184,146,10,.26)}

.ben-ico{
  width:clamp(60px,6.5vw,76px);height:clamp(60px,6.5vw,76px);
  border-radius:50%;border:1.5px solid rgba(184,146,10,.28);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(24px,2.6vw,30px);
  background:linear-gradient(135deg,rgba(255,250,225,.9),rgba(255,240,185,.6));
  box-shadow:0 4px 20px rgba(184,146,10,.11);
  margin-bottom:clamp(16px,2vw,22px);transition:all .35s}
.ben-card:hover .ben-ico{
  border-color:var(--gold);transform:scale(1.08);
  box-shadow:0 8px 32px rgba(184,146,10,.22)}

.ben-title{
  font-family:'Cinzel',serif;font-size:clamp(9px,1vw,11px);
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--text);font-weight:700;margin-bottom:10px}
.ben-desc{
  font-size:clamp(12px,1.25vw,14px);
  color:var(--text2);line-height:1.75}

/* ══════════════════════════════════════
   HOW IT WORKS — CINEMATIC DARK
══════════════════════════════════════ */
#wirkung{
  background:#0D0804;
  position:relative;overflow:hidden}

/* Subtle atmospheric overlay */
#wirkung::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 25% 40%,rgba(184,146,10,.07) 0%,transparent 55%),
    radial-gradient(ellipse at 75% 40%,rgba(192,0,14,.06) 0%,transparent 55%)}

#wirkung::after{display:none}

/* ── Schrittbilder der Wirkungs-Sektion ── */
.wk-card-img{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#111}

/* Vier Einzelbilder statt eines Rasters — sprachunabhaengig, kein eingebrannter Text */
.wk-card-img[data-bg="I"]  {background-image:url('step-01.jpg')}
.wk-card-img[data-bg="II"] {background-image:url('step-02.jpg')}
.wk-card-img[data-bg="III"]{background-image:url('step-03.jpg')}
.wk-card-img[data-bg="IV"] {background-image:url('step-04.jpg')}

#wirkung .sec-inner{position:relative;z-index:2}
#wirkung .eyebrow{color:var(--gold);letter-spacing:7px}
#wirkung .sec-title{color:var(--white)}
#wirkung .sec-title em{color:var(--red)}
#wirkung .sec-sub{color:rgba(255,255,255,.45)}
#wirkung .gold-rule{background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ── Card grid with arrow connectors ── */
.wk-grid{
  display:grid;
  grid-template-columns:1fr 32px 1fr 32px 1fr 32px 1fr;
  align-items:start;
  gap:0 0;
  margin-top:clamp(36px,5vw,60px)}

.wk-arr{
  display:flex;align-items:center;justify-content:center;
  padding-top:calc(clamp(110px,15vw,170px) / 2 - 14px);
  font-size:clamp(20px,2.2vw,28px);
  color:rgba(184,146,10,.45);
  font-family:'Playfair Display',serif;
  pointer-events:none;user-select:none}

/* ── Single card ── */
.wk-card{
  border-radius:14px;
  border:1px solid rgba(184,146,10,.22);
  overflow:hidden;
  background:rgba(18,9,3,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-color .35s,box-shadow .35s}

.wk-card:hover{
  transform:translateY(-8px);
  border-color:rgba(184,146,10,.5);
  box-shadow:0 20px 60px rgba(184,146,10,.15)}

/* Atmospheric gradient image areas — one per step */
.wk-card-img{
  height:clamp(110px,15vw,170px);
  position:relative;overflow:hidden}

.wk-card-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 55%,rgba(13,8,4,.9) 100%)}


/* Large ghost numeral in image bg */
.wk-card-img::before{
  content:attr(data-bg);
  position:absolute;right:-4px;bottom:-8px;
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(64px,11vw,130px);
  font-weight:900;
  color:rgba(255,255,255,.05);
  line-height:1;pointer-events:none;user-select:none}

/* Number badge — floats half into image, half into body */
.wk-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(44px,5.5vw,56px);height:clamp(44px,5.5vw,56px);
  background:linear-gradient(140deg,var(--red),#680008);
  border:1.5px solid rgba(184,146,10,.55);
  border-radius:50%;
  font-family:'Playfair Display',serif;
  font-size:clamp(13px,1.7vw,19px);
  font-weight:700;font-style:italic;
  color:var(--white);
  box-shadow:0 4px 22px rgba(192,0,14,.45);
  margin:calc(clamp(44px,5.5vw,56px) * -.5) 0 clamp(10px,1.2vw,14px) clamp(14px,2vw,20px);
  position:relative;z-index:3;
  flex-shrink:0}

.wk-card-body{
  padding:0 clamp(16px,2vw,22px) clamp(20px,2.5vw,28px);
  display:flex;flex-direction:column;flex:1}

.wk-card-title{
  font-family:'Cinzel',serif;
  font-size:clamp(8.5px,.9vw,10.5px);
  letter-spacing:3px;text-transform:uppercase;
  color:var(--gold2);font-weight:700;
  margin-bottom:clamp(8px,1vw,12px)}

.wk-card-desc{
  font-size:clamp(12px,1.2vw,13.5px);
  color:rgba(255,255,255,.58);
  line-height:1.8;flex:1}

.wk-card-ico{
  font-size:clamp(18px,2.2vw,24px);
  opacity:.5;
  margin-top:clamp(12px,1.8vw,18px)}

/* ── Bottom tagline bar ── */
.wk-tagline{
  margin-top:clamp(44px,6vw,72px);
  padding:clamp(18px,2.5vw,26px) clamp(24px,4vw,48px);
  background:linear-gradient(90deg,rgba(184,146,10,.07),rgba(192,0,14,.07),rgba(184,146,10,.07));
  border-top:1px solid rgba(184,146,10,.18);
  border-bottom:1px solid rgba(184,146,10,.18);
  text-align:center}

.wk-tagline-main{
  font-family:'Cinzel',serif;
  font-size:clamp(10px,1.1vw,12.5px);
  letter-spacing:5px;text-transform:uppercase;
  color:var(--gold);font-weight:700}

.wk-tagline-sub{
  font-family:'Playfair Display',serif;
  font-size:clamp(13px,1.4vw,16px);
  color:rgba(255,255,255,.38);
  font-style:italic;
  margin-top:6px}

/* ══════════════════════════════════════
   COMPARISON SECTION
══════════════════════════════════════ */
#vergleich{
  background:#140C04;
  position:relative;overflow:hidden}
#vergleich::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 22% 50%,rgba(192,0,14,.14) 0%,transparent 55%),
    radial-gradient(ellipse at 78% 50%,rgba(184,146,10,.1) 0%,transparent 55%)}
#vergleich .eyebrow{color:var(--gold)}
#vergleich .sec-title{color:var(--white)}
#vergleich .sec-sub{color:rgba(255,255,255,.5)}
#vergleich .gold-rule{background:linear-gradient(90deg,transparent,var(--gold),transparent)}

.cmp-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.5vw,32px);max-width:860px;margin:0 auto}

.cmp-col{
  border-radius:14px;
  padding:clamp(28px,3.5vw,48px) clamp(22px,3vw,38px)}
.cmp-col.bad{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07)}
.cmp-col.good{
  background:linear-gradient(155deg,rgba(192,0,14,.15),rgba(184,146,10,.1));
  border:1px solid rgba(184,146,10,.3);
  box-shadow:0 8px 48px rgba(184,146,10,.12)}

.cmp-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:clamp(20px,2.5vw,30px);
  padding-bottom:clamp(16px,2vw,22px);
  border-bottom:1px solid rgba(255,255,255,.07)}
.cmp-head-ico{font-size:26px}
.cmp-head-label{
  font-family:'Cinzel',serif;font-size:clamp(9px,1.1vw,12px);
  letter-spacing:2.5px;text-transform:uppercase;font-weight:700}
.bad .cmp-head-label{color:rgba(255,255,255,.45)}
.good .cmp-head-label{color:var(--gold2)}

.cmp-list{list-style:none;display:flex;flex-direction:column;gap:clamp(10px,1.4vw,16px)}
.cmp-list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:clamp(12px,1.3vw,15px);line-height:1.55}
.bad .cmp-list li{color:rgba(255,255,255,.4)}
.good .cmp-list li{color:rgba(255,255,255,.88)}
.cmp-mark{font-size:13px;font-weight:700;flex-shrink:0;margin-top:1px}
.bad .cmp-mark{color:#FF6B6B}
.good .cmp-mark{color:var(--gold2)}

/* ══════════════════════════════════════
   CTA SECTION
══════════════════════════════════════ */
#bestellen{
  background:var(--cream);text-align:center;
  position:relative;overflow:hidden}
#bestellen::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 20%,rgba(184,146,10,.07) 0%,transparent 58%),
    radial-gradient(ellipse at 50% 85%,rgba(192,0,14,.04) 0%,transparent 50%)}

.cta-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 22px;border:1px solid var(--border);
  border-radius:30px;background:rgba(184,146,10,.06);
  font-family:'Cinzel',serif;font-size:8.5px;letter-spacing:4px;
  color:var(--gold);text-transform:uppercase;margin-bottom:clamp(16px,2vh,24px)}

.cta-h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(32px,4vw,60px);
  font-weight:900;line-height:1.1;
  color:var(--dark);margin-bottom:clamp(14px,2vh,20px)}
.cta-h2 em{color:var(--red);font-style:italic}

.cta-sub{
  font-size:clamp(14px,1.5vw,17px);color:var(--text2);
  line-height:1.85;max-width:520px;margin:0 auto clamp(28px,4vh,44px)}

.btn-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:18px clamp(32px,5vw,68px);
  background:var(--red);color:var(--white);
  font-family:'Raleway',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:3.5px;text-transform:uppercase;
  border-radius:3px;cursor:pointer;text-decoration:none;
  box-shadow:0 6px 32px rgba(192,0,14,.32);
  position:relative;overflow:hidden;transition:all .3s;isolation:isolate}
.btn-wa::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:translateX(-100%);transition:transform .55s}
.btn-wa:hover::before{transform:translateX(100%)}
.btn-wa:hover{box-shadow:0 10px 52px rgba(192,0,14,.5);transform:translateY(-2px) scale(1.02)}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer{
  background:#0E0905;color:rgba(255,255,255,.55);
  padding:clamp(48px,7vw,80px) clamp(16px,5vw,60px) clamp(24px,3vw,36px)}

.ft-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(28px,5vw,72px);max-width:1200px;margin:0 auto;
  padding-bottom:clamp(28px,4vw,48px);
  border-bottom:1px solid rgba(255,255,255,.07)}

.ft-brand{display:flex;flex-direction:column;gap:18px}
.ft-logo{
  font-family:'Cinzel Decorative',serif;font-weight:900;
  font-size:clamp(20px,2.5vw,28px);letter-spacing:3px;color:var(--white)}
.ft-logo-sub{
  font-family:'Cinzel',serif;font-size:7px;letter-spacing:4px;
  color:var(--gold);text-transform:uppercase;margin-top:4px}
.ft-brand-desc{
  font-size:clamp(11px,1.2vw,13px);line-height:1.8;
  color:rgba(255,255,255,.38);max-width:280px}
.ft-shipping{
  font-size:clamp(11px,1.2vw,13px);
  color:rgba(255,255,255,.55);line-height:1.8}
.ft-shipping strong{
  color:rgba(255,255,255,.88);font-weight:700}

.ft-col-title{
  font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;
  text-transform:uppercase;color:var(--gold);
  font-weight:700;margin-bottom:20px}
.ft-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.ft-links a{
  font-size:clamp(11px,1.2vw,13px);color:rgba(255,255,255,.4);
  transition:color .2s}
.ft-links a:hover{color:rgba(255,255,255,.8)}

.ft-bottom{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;flex-wrap:wrap;
  max-width:1200px;margin:clamp(20px,3vw,32px) auto 0;
  font-size:10px;color:rgba(255,255,255,.22);font-family:'Raleway',sans-serif}
.ft-legal{max-width:620px;line-height:1.7}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

/* ── Laptop ≤ 1280px ── */
@media(max-width:1280px){
  #hero{grid-template-columns:52fr 48fr}
}

/* ── Tablet ≤ 1024px ── */
@media(max-width:1200px){
  .hamburger{display:flex}
  .nav-links,.nav-btn{display:none}
  .mob-nav{display:block}

  #hero{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    min-height:auto;
    padding-top:60px}
  .hero-visual{
    order:1;
    min-height:clamp(300px,55vw,540px)}
  .hero-content{
    order:2;
    align-items:center;text-align:center;
    padding:clamp(28px,4vw,48px) clamp(20px,6vw,56px)}
  .hero-desc{text-align:center;max-width:540px;margin-left:auto;margin-right:auto}
  .btn-primary{align-self:center}
  .hero-trust,.hero-eyebrow,.hero-divider{justify-content:center}
  .hero-divider{justify-content:center}
  #hero::after{height:60px}

  .trust-wrap{margin-top:clamp(-32px,-4vw,-52px)}
  .trust-bar{grid-template-columns:repeat(2,1fr);border-radius:16px}
  .tb-item:nth-child(2){border-right:none}
  .tb-item:nth-child(3){border-top:1px solid rgba(184,146,10,.08)}

  .ben-grid{grid-template-columns:repeat(2,1fr)}
  .wk-grid{grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,20px) clamp(12px,2vw,20px)}
  .wk-arr{display:none}
  .cmp-grid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
}

/* ── Mobile ≤ 768px ── */
@media(max-width:768px){
  #nav{height:60px}
  .hero-price-badge{width:80px;height:80px;right:-8px;bottom:-8px}
  .hpb-price{font-size:16px}
  .mob-nav{top:62px}
  .nav-logo-name{font-size:17px}
  .nav-logo-icon{width:38px;height:38px}
  .nav-logo-sub{display:none}

  .hero-visual{min-height:clamp(240px,62vw,400px)}

  .hero-h1{font-size:clamp(30px,8vw,52px)}
  .hero-bens{grid-template-columns:repeat(2,1fr);gap:8px}
  .hb-desc{display:none}

  .trust-bar{grid-template-columns:1fr}
  .tb-item{border-right:none;border-bottom:1px solid rgba(184,146,10,.08)}
  .tb-item:last-child{border-bottom:none}
  .trust-wrap{margin-top:-24px}

  .ben-grid{max-width:460px;margin:0 auto}
  .wk-grid{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto;gap:16px}
  .ft-grid{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column;text-align:center}
  .ft-legal{max-width:100%}
}

/* ── Small Mobile ≤ 480px ── */
@media(max-width:480px){
  .hero-visual{min-height:clamp(200px,68vw,320px)}
  .hero-h1{font-size:clamp(26px,9.5vw,44px)}
  .hero-bens{gap:6px}
  .hb-ico{width:50px;height:50px;font-size:20px}
  .cmp-grid{gap:12px}
  .btn-primary,.btn-wa{width:100%;max-width:340px}
}

/* ── Ultra-wide ≥ 1600px ── */
@media(min-width:1600px){
  #hero{grid-template-columns:54fr 46fr}
}

/* ══════════════════════════════════════
   KEYFRAMES (misc)
══════════════════════════════════════ */
@keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(22);opacity:0}}


/* Ripple */
@keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(22);opacity:0}}

/* ── Sprachumschalter / Language switch ── */
.lang-switch{
  display:flex;align-items:center;gap:2px;
  border:1px solid var(--border);
  border-radius:50px;
  padding:3px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
nav .lang-switch{margin-left:auto;margin-right:clamp(12px,1.6vw,22px)}
.lang-btn{
  border:none;cursor:pointer;background:transparent;
  font-family:'Raleway',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:1.2px;
  color:var(--text3);
  padding:6px 12px;border-radius:50px;
  transition:background .25s,color .25s}
.lang-btn:hover{color:var(--gold)}
.lang-btn.active{background:var(--dark);color:var(--white)}

.mob-lang{display:none}
@media(max-width:1200px){
  #nav .lang-switch{display:none}
  .mob-lang{display:flex;width:max-content;margin:22px auto 0}
}

/* ── Impressum Modal ── */
.imp-overlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(10,6,2,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .3s}
.imp-overlay.open{opacity:1;pointer-events:auto}

.imp-modal{
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:16px;
  padding:clamp(32px,5vw,52px);
  max-width:480px;width:100%;
  position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,.25);
  transform:translateY(20px) scale(.97);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.imp-overlay.open .imp-modal{transform:translateY(0) scale(1)}

.imp-close{
  position:absolute;top:18px;right:18px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.06);border:none;cursor:pointer;
  font-size:13px;color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s}
.imp-close:hover{background:var(--red);color:#fff}

.imp-logo{
  font-family:'Cinzel Decorative',serif;font-weight:900;
  font-size:18px;letter-spacing:2px;color:var(--dark);
  margin-bottom:6px}
.imp-title{
  font-family:'Playfair Display',serif;font-size:22px;
  font-weight:700;color:var(--dark);margin-bottom:24px;
  padding-bottom:16px;border-bottom:1px solid var(--border)}
.imp-body{display:flex;flex-direction:column;gap:16px}
.imp-body p{font-size:14px;line-height:1.8;color:var(--text2)}
.imp-body p strong{color:var(--text);font-weight:700}
.imp-body a{color:var(--gold);text-decoration:underline}
.imp-disclaimer{font-size:12px!important;color:var(--text3)!important;
  padding-top:12px;border-top:1px solid var(--border)}

/* ── Floating WhatsApp Button ── */
.wa-float{
  position:fixed;
  right:clamp(16px,2.5vw,28px);
  bottom:clamp(20px,3vw,36px);
  z-index:800;
  display:flex;align-items:center;gap:10px;
  background:#25D366;
  color:#fff;
  padding:14px 20px 14px 16px;
  border-radius:50px;
  box-shadow:0 6px 28px rgba(37,211,102,.45),0 2px 10px rgba(0,0,0,.12);
  text-decoration:none;
  font-family:'Raleway',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),
             box-shadow .3s,
             padding .3s,
             gap .3s;
  overflow:hidden;
  max-width:52px; /* collapsed by default — shows only icon */
  white-space:nowrap}
.wa-float:hover{
  max-width:200px;
  padding:14px 22px 14px 16px;
  box-shadow:0 10px 40px rgba(37,211,102,.55),0 4px 16px rgba(0,0,0,.15);
  transform:translateY(-3px)}
.wa-float-ico{
  width:22px;height:22px;flex-shrink:0;
  transition:transform .3s}
.wa-float:hover .wa-float-ico{transform:scale(1.1)}
.wa-float-label{
  opacity:0;transform:translateX(-8px);
  transition:opacity .25s .05s,transform .25s .05s;
  pointer-events:none}
.wa-float:hover .wa-float-label{opacity:1;transform:translateX(0)}

/* Pulse ring */
.wa-float::before{
  content:'';
  position:absolute;inset:0;border-radius:50px;
  background:rgba(37,211,102,.35);
  animation:waPulse 2.5s ease-out infinite}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.6}
  70%{transform:scale(1.18);opacity:0}
  100%{transform:scale(1.18);opacity:0}}

@media(max-width:480px){
  .wa-float{padding:13px 15px;max-width:50px}
  .wa-float:hover{max-width:180px;padding:13px 18px 13px 15px}
  .wa-float-ico{width:20px;height:20px}
  .wa-float-label{font-size:11px}
}

/* ══════════════════════════════════════
   UNTERSEITEN — ab Multipage-Umbau
══════════════════════════════════════ */
main{display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px}
.sec-page{padding:56px 0 96px}
.sec-page .sec-title{text-align:left;margin-bottom:24px}
.sec-page .sec-eyebrow{text-align:left}

/* Brotkrumen */
.crumbs{max-width:1080px;margin:0 auto;padding:104px 24px 0;font-size:13px;
  color:var(--text3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--gold);font-weight:600}
.crumbs a:hover{text-decoration:underline}
.sec-page{padding-top:24px}
body.p-home .crumbs{display:none}

/* Typografie */
.lead{font-size:clamp(17px,2.1vw,20px);line-height:1.65;color:var(--text2);
  max-width:62ch;margin:0 0 32px}
.sub-h2{font-family:'Playfair Display',serif;font-size:clamp(22px,2.6vw,28px);
  font-weight:700;color:var(--text);margin:44px 0 14px;line-height:1.3}
.sec-page p{line-height:1.75;color:var(--text2);max-width:70ch;margin:0 0 16px}
.sec-page strong{color:var(--text);font-weight:600}
.fine{font-size:13px;color:var(--text3);line-height:1.6}
.placeholder{display:inline-block;background:rgba(184,146,10,.1);
  border:1px dashed var(--gold);border-radius:6px;padding:2px 10px;
  color:var(--gold);font-size:.92em;font-style:italic}

/* Listen */
.tick-list,.warn-list,.step-list{max-width:70ch;margin:0 0 20px;padding:0;list-style:none}
.tick-list li,.warn-list li{position:relative;padding:9px 0 9px 34px;
  line-height:1.7;color:var(--text2);border-bottom:1px solid var(--border)}
.tick-list li::before{content:"✓";position:absolute;left:6px;top:9px;
  color:var(--gold);font-weight:700}
.warn-list li::before{content:"!";position:absolute;left:9px;top:9px;
  color:var(--red);font-weight:800}
.step-list{counter-reset:s}
.step-list li{counter-increment:s;position:relative;padding:14px 0 14px 52px;
  line-height:1.7;color:var(--text2);border-bottom:1px solid var(--border)}
.step-list li::before{content:counter(s);position:absolute;left:0;top:12px;
  width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#fff;font-weight:700;display:grid;place-items:center;font-size:14px}

/* Tabellen */
.spec-table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px;
  background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.spec-table th,.spec-table td{padding:13px 16px;text-align:left;
  border-bottom:1px solid var(--border);vertical-align:top;line-height:1.6}
.spec-table thead th{background:var(--ivory);color:var(--text);
  font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.spec-table tbody th{color:var(--text);font-weight:600;width:38%}
.spec-table td{color:var(--text2)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:none}

/* Hinweisboxen */
.notice{border-radius:14px;padding:20px 22px;margin:0 0 28px;max-width:70ch;
  border-left:4px solid var(--gold);background:rgba(184,146,10,.07)}
.notice strong{display:block;margin-bottom:8px;color:var(--text)}
.notice p{margin:0 0 10px;font-size:14.5px}
.notice p:last-child{margin-bottom:0}

/* FAQ */
.faq-list{max-width:80ch;margin:0 0 40px}
.faq-item{border:1px solid var(--border);border-radius:12px;background:var(--white);
  margin-bottom:12px;overflow:hidden}
.faq-item[open]{border-color:var(--gold)}
.faq-q{cursor:pointer;padding:18px 52px 18px 20px;font-weight:600;color:var(--text);
  font-size:16.5px;position:relative;list-style:none;line-height:1.5}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:24px;color:var(--gold);font-weight:300;line-height:1}
.faq-item[open] .faq-q::after{content:"–"}
.faq-q:hover{background:var(--ivory)}
.faq-a{padding:0 20px 20px;color:var(--text2);line-height:1.75;max-width:70ch}

/* Kontakt */
.contact-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:0 0 20px}
.contact-card{background:var(--white);border:1px solid var(--border);
  border-radius:14px;padding:22px}
.contact-card .sub-h2{margin:0 0 12px;font-size:19px}
.contact-adr{font-style:normal;line-height:1.8;color:var(--text2)}
.contact-card a{color:var(--gold);font-weight:600}
.contact-card a:hover{text-decoration:underline}

/* CTA-Box */
.cta-box{margin:48px 0 0;padding:32px;border-radius:18px;text-align:center;
  background:linear-gradient(135deg,var(--ivory),var(--cream));border:1px solid var(--border)}
.cta-box p{margin:0 0 18px;max-width:none;font-size:17px;color:var(--text)}

.page-img{border-radius:18px;margin:8px 0 28px;width:100%;max-width:640px;
  border:1px solid var(--border)}

/* Aktiver Menuepunkt */
.nav-links a.active{color:var(--gold)}
.nav-links a.active::after{width:100%}
.mob-link.active{color:var(--gold)}

/* Footer-Ergaenzungen */
.ft-adr{font-style:normal;line-height:1.8;font-size:14px;margin:14px 0 0;color:inherit;opacity:.85}
.ft-adr a{color:inherit;text-decoration:underline}
.ft-social{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 0}
.ft-social a{font-size:13px;font-weight:600;opacity:.85}
.ft-social a:hover{opacity:1;text-decoration:underline}

@media(max-width:640px){
  .crumbs{padding-top:88px}
  .spec-table{font-size:14px}
  .spec-table th,.spec-table td{padding:11px 12px}
  .spec-table tbody th{width:44%}
  .cta-box{padding:24px 18px}
}


/* ══════════════════════════════════════
   NAVIGATION — Platz fuer 8 Punkte + 4 Sprachen + CTA
══════════════════════════════════════ */
#nav{gap:16px}
.nav-links{flex:0 1 auto;min-width:0}
.nav-links a{white-space:nowrap}
#nav .lang-switch{flex-shrink:0}
.nav-btn{flex-shrink:0;white-space:nowrap}

/* Zwischen 1200 und 1500px enger setzen, damit nichts herauslaeuft */
@media(min-width:1201px) and (max-width:1500px){
  #nav{padding-left:20px;padding-right:20px;gap:12px}
  .nav-links{gap:16px}
  .nav-links a{font-size:9.5px;letter-spacing:1.6px}
  .lang-btn{font-size:10px;letter-spacing:.6px;padding:4px 7px}
  .nav-btn{font-size:10px;letter-spacing:1.2px;padding:11px 16px}
  .nav-logo-sub{display:none}
}

/* Sprachumschalter: Links statt Buttons, aktive Sprache hervorgehoben */
.lang-btn{display:inline-block;text-decoration:none;padding:5px 9px;border-radius:50px;
  transition:background .2s,color .2s}
.lang-btn:hover{color:var(--gold)}
.lang-btn.active{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#fff}
.mob-lang{margin-top:20px;justify-content:center;align-self:center}

/* ── Schrittbilder auf der Anwendungsseite ── */
.step-gallery{display:grid;gap:12px;margin:8px 0 32px;max-width:720px;
  grid-template-columns:repeat(2,1fr)}
.step-shot{position:relative;margin:0;border-radius:14px;overflow:hidden;
  border:1px solid var(--border);background:#111}
.step-shot img{display:block;width:100%;height:auto}
.step-shot figcaption{position:absolute;left:10px;bottom:10px;
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red2));
  color:#fff;font-family:'Playfair Display',serif;font-weight:700;font-size:14px;
  display:grid;place-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.4)}
@media(max-width:640px){.step-gallery{grid-template-columns:1fr}}