/* ══ RESET ══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --r:#d90429;--r2:#a8001e;--rg:rgba(217,4,41,.12);
  --bk:#0a0a0e;--bk2:#111118;--bk3:#18181f;
  --w:#f2f2f2;--w2:#c0c0cc;--w3:#787888;
  --h:'Montserrat',sans-serif;--b:'Open Sans',sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);
}
html{scroll-behavior:smooth}
body{background:var(--bk);color:var(--w);font-family:var(--b);line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}ul{list-style:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
p{font-size:clamp(.95rem,1.15vw,1.02rem);line-height:1.8;font-weight:300;color:var(--w2)}

/* ── REVEAL ── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv.on{opacity:1;transform:translateY(0)}
.d1{transition-delay:.12s}.d2{transition-delay:.22s}.d3{transition-delay:.34s}.d4{transition-delay:.46s}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--h);font-size:.88rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.9rem 2.2rem;border-radius:2px;cursor:pointer;transition:all .2s var(--ease);border:2px solid transparent;white-space:nowrap}
.btn-r{background:var(--r);color:#fff;border-color:var(--r)}
.btn-r:hover{background:var(--r2);border-color:var(--r2);transform:translateY(-2px);box-shadow:0 8px 28px var(--rg)}
.btn-ol{background:transparent;color:var(--w);border-color:rgba(242,242,242,.22)}
.btn-ol:hover{border-color:var(--r);color:var(--r)}
.cta-block{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-top:2rem}
.cta-meta{display:flex;flex-direction:column;gap:.2rem}
.cta-meta span{font-size:.75rem;color:var(--w3);letter-spacing:.04em}
.cta-meta span:first-child{font-family:var(--h);font-size:.8rem;font-weight:700;color:var(--w2)}

/* ── HEADER ── */
#hdr{position:fixed;top:0;left:0;right:0;z-index:999;padding:1rem 0;transition:background .35s,padding .3s,border-color .35s;border-bottom:1px solid transparent}
#hdr.sc{background:rgba(10,10,14,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:.65rem 0;border-bottom-color:rgba(217,4,41,.15)}
.hi{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo{font-family:var(--h);font-size:1.25rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.logo em{color:var(--r);font-style:normal}
.nd{display:flex;align-items:center;gap:1.6rem}
.nd a{font-family:var(--h);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--w3);transition:color .2s}
.nd a:hover{color:var(--r)}
.brg{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.brg span{display:block;width:24px;height:2px;background:var(--w);transition:all .3s}
.brg.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.brg.on span:nth-child(2){opacity:0}
.brg.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.dov{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:998;opacity:0;pointer-events:none;transition:opacity .35s}
.dov.on{opacity:1;pointer-events:all}
.drw{position:fixed;top:0;right:-100%;bottom:0;width:min(300px,88vw);background:var(--bk2);border-left:1px solid rgba(217,4,41,.15);z-index:999;transition:right .38s var(--ease);padding:5rem 2rem 2rem;display:flex;flex-direction:column;gap:1rem}
.drw.on{right:0}
.drw a{font-family:var(--h);font-size:1.5rem;font-weight:700;text-transform:uppercase;color:var(--w);border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.8rem;transition:color .2s}
.drw a:hover{color:var(--r)}

/* ══════════════════════════
   HERO – wie TPA: zentriert, riesiges H1 in ROT, Tagline, dann großes Bild
══════════════════════════ */
#hero{
  min-height:100vh;padding-top:80px;
  background:var(--bk);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  position:relative;overflow:hidden;
}
/* subtle radial glow wie TPA */
#hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 60%,rgba(217,4,41,.07) 0%,transparent 70%);
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  align-items:center;
  width:100%;
}
.hero-h1{
  font-family:var(--h);
  font-size:clamp(2.8rem,8vw,8rem);
  font-weight:900;
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:-.02em;
  color:var(--r);
  margin-bottom:1rem;
  padding:0 clamp(1rem,4vw,2rem);
}
.hero-tagline{
  font-family:var(--h);
  font-size:clamp(.85rem,1.6vw,1.15rem);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--r);
  margin-bottom:1.4rem;
}
.hero-wlwl{
  font-family:var(--h);
  font-size:clamp(.8rem,1.2vw,.95rem);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--w2);
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
/* Das große Bild / Mockup */
.hero-mockup{
  width:100%;
  max-width:900px;
  margin:0 auto;
  position:relative;
}
.hero-mockup-inner{
  width:100%;
  aspect-ratio:16/9;
  background:linear-gradient(145deg,#0d0005 0%,#1e0008 30%,#150010 60%,#080008 100%);
  border-radius:6px;
  position:relative;
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.8),0 0 0 1px rgba(217,4,41,.08);
}
/* Glow unter dem Mockup */
.hero-mockup::after{
  content:'';
  position:absolute;
  bottom:-60px;left:50%;transform:translateX(-50%);
  width:70%;height:60px;
  background:radial-gradient(ellipse,rgba(217,4,41,.2) 0%,transparent 70%);
  filter:blur(20px);
  pointer-events:none;
}
/* Mockup Inhalt: Social-Media-Karten-Mockup wie TPA */
.mockup-cards{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.5rem,2vw,1.5rem);
  padding:clamp(1rem,3vw,2.5rem);
}
.mock-card{
  background:rgba(255,255,255,.96);
  border-radius:8px;
  flex:1;
  max-width:260px;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  transform-origin:center;
}
.mock-card:nth-child(1){transform:rotate(-4deg) translateY(8px);z-index:1}
.mock-card:nth-child(2){transform:rotate(0deg) translateY(-10px);z-index:3;flex:1.2}
.mock-card:nth-child(3){transform:rotate(3deg) translateY(6px);z-index:2}
.mock-card-hd{
  background:#f5f5f5;
  padding:.5rem .7rem;
  display:flex;align-items:center;gap:.5rem;
  border-bottom:1px solid #e8e8e8;
}
.mock-av{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--r),#ff6b6b);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--h);font-size:.5rem;font-weight:900;color:#fff;
}
.mock-uname{font-family:var(--h);font-size:.6rem;font-weight:700;color:#111;line-height:1.2}
.mock-sub{font-size:.48rem;color:#888;font-family:sans-serif}
.mock-body{padding:.6rem .7rem}
.mock-stat{font-family:var(--h);font-size:1rem;font-weight:900;color:#111;line-height:1}
.mock-stat-l{font-size:.48rem;color:#666;font-family:sans-serif;margin-top:.1rem}
.mock-img{width:100%;height:55px;background:linear-gradient(135deg,rgba(217,4,41,.15),rgba(217,4,41,.05));position:relative;overflow:hidden;margin-top:.4rem;border-radius:3px}
.mock-img::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(217,4,41,.2),transparent)}
.mock-btn{
  display:block;margin:.5rem .7rem .6rem;
  background:var(--r);color:#fff;
  font-family:var(--h);font-size:.55rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:3px;text-align:center;
}
/* SMY Studio Logo watermark im Mockup */
.mockup-wm{
  position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);
  font-family:var(--h);font-size:clamp(.6rem,1.2vw,.85rem);font-weight:900;
  letter-spacing:.3em;text-transform:uppercase;
  color:rgba(217,4,41,.35);
  white-space:nowrap;
  z-index:10;
}
/* Rating unterhalb */
.stars{display:flex;gap:2px}
.st{width:14px;height:14px;fill:var(--r)}
.rating-block{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:clamp(1.5rem,3vw,2.5rem)}
.rating-txt{font-size:.82rem;color:var(--w2);font-weight:300}
.rating-txt strong{color:var(--w);font-weight:600}

/* ── LOGO BAR ── */
.logo-bar{background:var(--bk2);border-top:1px solid rgba(217,4,41,.1);border-bottom:1px solid rgba(217,4,41,.1);padding:1.2rem 0}
.lb-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.lb-label{font-family:var(--h);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--w3);opacity:.5;white-space:nowrap}
.lb-logos{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.5rem);flex-wrap:wrap}
.lb-logos span{font-family:var(--h);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--w3);opacity:.32;transition:opacity .2s}
.lb-logos span:hover{opacity:.7}

/* ══════════════════════════
   MISSION – wie TPA: zentriert, dann CTA
══════════════════════════ */
#mission{background:var(--bk);padding:clamp(5rem,8vw,9rem) 0}
.mission-wrap{max-width:820px;margin:0 auto;text-align:center}
.section-label{font-family:var(--h);font-size:.7rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--r);display:block;margin-bottom:1.2rem}
.mission-h2{font-family:var(--h);font-size:clamp(2rem,4.5vw,3.8rem);font-weight:900;text-transform:uppercase;line-height:1.05;margin-bottom:1.8rem}
.mission-h2 em{color:var(--r);font-style:normal}
.mission-text{font-size:clamp(.95rem,1.2vw,1.05rem);color:var(--w2);line-height:1.85;font-weight:300;margin-bottom:1.2rem}
.mission-text p{margin-bottom:1rem}
.cta-center{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-top:2.2rem}
.cta-badges{display:flex;gap:1.5rem;margin-top:.5rem}
.cta-badge{font-family:var(--h);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--w3)}

/* ══════════════════════════
   BRIDGE TEXT + BEFORE/AFTER
   wie TPA: "ob du am anfang stehst..."
══════════════════════════ */
#bridge{background:var(--bk2);padding:clamp(4rem,7vw,7rem) 0}
.bridge-inner{max-width:760px;margin:0 auto;text-align:center}
.bridge-h3{font-family:var(--h);font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:400;text-transform:lowercase;letter-spacing:.01em;color:var(--w3);margin-bottom:1.5rem;font-style:italic}
.bridge-h3 strong{font-weight:700;color:var(--w);font-style:normal}
.bridge-text{font-size:clamp(.92rem,1.15vw,1rem);color:var(--w3);line-height:1.85;font-weight:300}
/* Pfeil */
.bridge-arrow{display:flex;justify-content:center;margin:2.5rem 0;opacity:.5}
.bridge-arrow svg{fill:var(--r)}
/* Before/After Bilder */
.ba-wrap{display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:3px;overflow:hidden;max-width:900px;margin:0 auto}
.ba-panel{position:relative;overflow:hidden}
.ba-panel.bef{background:linear-gradient(140deg,#0c0c0c,#181010,#100808)}
.ba-panel.aft{background:linear-gradient(140deg,#1e0008,#3a0012,#1c0008)}
.ba-panel svg{position:absolute;inset:0;width:100%;height:100%;opacity:.14}
.ba-label{position:absolute;bottom:1.2rem;left:1.2rem;font-family:var(--h);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.28rem .75rem;border-radius:2px;z-index:1}
.ba-panel.bef .ba-label{background:rgba(255,255,255,.07);color:rgba(242,242,242,.5)}
.ba-panel.aft .ba-label{background:var(--r);color:#fff}
.ba-panel.aft::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--r);z-index:2}

/* ══════════════════════════
   ANGEBOT BLÖCKE – exakt wie TPA
   links Bild, rechts Text ODER umgekehrt
   mit kleinen fetten Features
══════════════════════════ */
.offer-section{padding:clamp(5rem,8vw,8rem) 0;border-top:1px solid rgba(217,4,41,.08)}
.offer-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,7rem);align-items:center}
.offer-layout.flip .offer-img{order:-1}
.offer-img{border-radius:3px;overflow:hidden;position:relative;min-height:clamp(320px,40vw,520px)}
.offer-img svg{position:absolute;inset:0;width:100%;height:100%;opacity:.15}
.offer-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 40%,rgba(217,4,41,.06))}
/* Red top border accent on image */
.offer-img::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--r);z-index:1;opacity:.7}
.offer-label{font-family:var(--h);font-size:.68rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--r);display:block;margin-bottom:.8rem}
.offer-h4{font-family:var(--h);font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:900;text-transform:uppercase;line-height:1.08;margin-bottom:.5rem}
.offer-subtitle{font-family:var(--h);font-size:clamp(.92rem,1.3vw,1rem);font-weight:600;color:var(--w2);margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:.03em}
.offer-text{font-size:clamp(.92rem,1.15vw,1rem);color:var(--w2);line-height:1.85;font-weight:300;margin-bottom:1.8rem}
/* Feature Liste exakt wie TPA: bold label: beschreibung */
.offer-feats{display:flex;flex-direction:column;gap:.8rem;margin-bottom:2rem}
.offer-feats li{font-size:clamp(.88rem,1.1vw,.96rem);color:var(--w2);line-height:1.6;font-weight:300}
.offer-feats li strong{color:var(--w);font-weight:700}

/* ══════════════════════════
   KRISENFEST – Statistik Abschnitt
══════════════════════════ */
#krisenfest{background:var(--bk2);padding:clamp(5rem,8vw,8rem) 0;border-top:1px solid rgba(217,4,41,.08)}
.kf-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,7rem);align-items:center}
.kf-img{border-radius:3px;overflow:hidden;min-height:clamp(320px,38vw,480px);position:relative}
.kf-img svg{position:absolute;inset:0;width:100%;height:100%;opacity:.15}
.kf-img::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--r);opacity:.7}
.kf-h{font-family:var(--h);font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:900;text-transform:uppercase;line-height:1.08;margin-bottom:.5rem}
.kf-sub{font-family:var(--h);font-size:clamp(.88rem,1.2vw,.95rem);font-weight:600;color:var(--w2);margin-bottom:1.8rem;text-transform:uppercase;letter-spacing:.03em}
.kf-stats{display:flex;flex-direction:column;gap:1.4rem;margin-bottom:2rem}
.kf-stat{border-left:3px solid var(--r);padding-left:1.2rem}
.kf-stat-n{font-family:var(--h);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:900;color:var(--r);line-height:1}
.kf-stat-l{font-size:.85rem;color:var(--w2);font-weight:300;margin-top:.2rem}

/* ══════════════════════════
   BRIDGE 2 – "...wenn du noch am Anfang stehst..."
══════════════════════════ */
#bridge2{background:var(--bk);padding:clamp(3rem,5vw,5rem) 0;border-top:1px solid rgba(217,4,41,.08)}
.bridge2-inner{max-width:760px;margin:0 auto;text-align:center}
.bridge2-inner h3{font-family:var(--h);font-size:clamp(1rem,1.6vw,1.3rem);font-weight:400;text-transform:lowercase;color:var(--w3);line-height:1.5;font-style:italic}
.bridge2-inner h3 strong{font-weight:700;color:var(--w);font-style:normal}

/* ══════════════════════════
   TEAM – wie TPA: alternierend Foto + Text
══════════════════════════ */
#team{background:var(--bk2);padding:clamp(5rem,8vw,8rem) 0;border-top:1px solid rgba(217,4,41,.08)}
.team-heading{text-align:center;max-width:680px;margin:0 auto clamp(3rem,5vw,5rem)}
.team-heading h3{font-family:var(--h);font-size:clamp(1.2rem,2vw,1.6rem);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--w);margin-bottom:.5rem}
.team-heading p{font-size:clamp(.9rem,1.1vw,.98rem);color:var(--w3);font-weight:300}
.team-member{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,6rem);align-items:center;padding:clamp(3rem,5vw,5rem) 0;border-top:1px solid rgba(217,4,41,.08)}
.team-member.flip .tm-photo{order:-1}
.tm-photo{border-radius:3px;overflow:hidden;position:relative;min-height:clamp(260px,35vw,440px)}
.tm-photo svg{position:absolute;inset:0;width:100%;height:100%;opacity:.18}
.tm-photo::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--r);opacity:.6;z-index:1}
.tm-role{font-family:var(--h);font-size:.65rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--r);display:block;margin-bottom:.4rem}
.tm-h5{font-family:var(--h);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;text-transform:uppercase;margin-bottom:.3rem}
.tm-title{font-family:var(--h);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--w3);margin-bottom:1.5rem}
.tm-bio{font-size:clamp(.9rem,1.1vw,.98rem);color:var(--w2);line-height:1.8;font-weight:300;margin-bottom:1.5rem}
.tm-creds{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.8rem}
.tm-creds li{font-size:clamp(.88rem,1.05vw,.95rem);color:var(--w2);font-weight:300;line-height:1.5}
.tm-creds li strong{color:var(--w);font-weight:700}
.tm-stat-row{display:flex;align-items:baseline;gap:.5rem;padding-top:1.2rem;border-top:1px solid rgba(217,4,41,.1)}
.tm-stat-n{font-family:var(--h);font-size:clamp(2.5rem,4vw,3.5rem);font-weight:900;color:var(--r);line-height:1}
.tm-stat-l{font-size:.8rem;color:var(--w3);font-weight:300}

/* ══════════════════════════
   KUNDENSTIMMEN – wie TPA: Video-Karten Grid
══════════════════════════ */
#testi{background:var(--bk);padding:clamp(5rem,8vw,8rem) 0;border-top:1px solid rgba(217,4,41,.08)}
.testi-h1{font-family:var(--h);font-size:clamp(2.5rem,5vw,5rem);font-weight:900;text-transform:uppercase;text-align:center;margin-bottom:3rem}
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.tcard{position:relative;border-radius:3px;overflow:hidden;cursor:pointer;transition:transform .3s}
.tcard:hover{transform:translateY(-3px)}
.tcard-bg{height:clamp(160px,20vw,240px);position:relative}
.tcard-bg.ga{background:linear-gradient(140deg,#1e0008,#380012)}
.tcard-bg.gb{background:linear-gradient(140deg,#08000e,#160018)}
.tcard-bg.gc{background:linear-gradient(140deg,#0c0800,#1e1200)}
.tcard-bg.gd{background:linear-gradient(140deg,#04000e,#0e001e)}
.tcard-bg.ge{background:linear-gradient(140deg,#0e0002,#1e0008)}
.tcard-bg.gf{background:linear-gradient(140deg,#060608,#12121e)}
.tcard-bg.gg{background:linear-gradient(140deg,#0a0a00,#181600)}
.tcard-bg svg{position:absolute;inset:0;width:100%;height:100%;opacity:.15}
/* Play button overlay */
.tcard-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.tcard-play-btn{width:48px;height:48px;border-radius:50%;background:rgba(217,4,41,.85);display:flex;align-items:center;justify-content:center;transition:all .25s;border:2px solid rgba(255,255,255,.3)}
.tcard:hover .tcard-play-btn{background:var(--r);transform:scale(1.08);border-color:#fff}
.tcard-play-btn svg{width:16px;height:16px;fill:#fff;margin-left:3px}
.tcard-info{background:var(--bk2);border-top:1px solid rgba(217,4,41,.1);padding:1.1rem 1.2rem}
.tcard-quote{font-size:clamp(.84rem,1.05vw,.92rem);color:var(--w2);font-style:italic;font-weight:300;line-height:1.55;margin-bottom:.8rem}
.tcard-name{font-family:var(--h);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--w);margin-bottom:.15rem}
.tcard-role{font-size:.72rem;color:var(--r);font-weight:300}

/* Weitere Kundenstimmen */
#mehr-stimmen{background:var(--bk2);border-top:1px solid rgba(217,4,41,.1);padding:clamp(4rem,6vw,6rem) 0}
.ms-h1{font-family:var(--h);font-size:clamp(2rem,4vw,4rem);font-weight:900;text-transform:uppercase;text-align:center;margin-bottom:2.5rem}
.ms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.ms-card{background:var(--bk3);border-radius:3px;padding:clamp(1.2rem,2vw,1.8rem);border-top:3px solid transparent;transition:border-color .25s,background .25s}
.ms-card:hover{border-top-color:var(--r);background:var(--bk4,#1c1c25)}
.ms-stars{display:flex;gap:2px;margin-bottom:.8rem}
.ms-quote{font-size:clamp(.84rem,1vw,.9rem);color:var(--w2);font-style:italic;font-weight:300;line-height:1.6;margin-bottom:1rem}
.ms-name{font-family:var(--h);font-size:.8rem;font-weight:700;text-transform:uppercase;color:var(--w)}
.ms-role{font-size:.7rem;color:var(--r);margin-top:.15rem}

/* ── FORM ── */
#ctaform{background:var(--bk);padding:clamp(5rem,8vw,8rem) 0;border-top:1px solid rgba(217,4,41,.08);position:relative;overflow:hidden}
#ctaform::before{content:'';position:absolute;top:-300px;left:50%;transform:translateX(-50%);width:900px;height:900px;background:radial-gradient(circle,rgba(217,4,41,.04) 0%,transparent 60%);pointer-events:none}
.form-cx{max-width:660px;margin:0 auto;text-align:center;position:relative;z-index:1}
.form-cx h2{font-family:var(--h);font-size:clamp(2rem,4vw,3.5rem);font-weight:900;text-transform:uppercase;line-height:1.05;margin-bottom:1rem}
.form-cx h2 em{color:var(--r);font-style:normal}
.form-sub{font-size:clamp(.95rem,1.2vw,1.05rem);color:var(--w2);font-weight:300;line-height:1.65;margin-bottom:.6rem}
.form-micro{font-size:.74rem;color:var(--w3);margin-bottom:2.5rem;letter-spacing:.06em}
.form-micro::before{content:'✦  ';color:var(--r)}
.dfrm{text-align:left}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.9rem}
.ff{display:flex;flex-direction:column;gap:.38rem;margin-bottom:.9rem}
.ff label{font-family:var(--h);font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--w3)}
.ff input,.ff select{background:var(--bk2);border:1.5px solid rgba(242,242,242,.08);border-radius:2px;padding:.82rem 1rem;font-family:var(--b);font-size:.88rem;color:var(--w);transition:border-color .2s;outline:none;width:100%;-webkit-appearance:none;appearance:none}
.ff select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d90429'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
.ff input:focus,.ff select:focus{border-color:var(--r)}
.ff input.er,.ff select.er{border-color:#ff3c5a}
.ferr{font-size:.68rem;color:#ff3c5a;display:none}
.ferr.on{display:block}
.fchk{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:2rem;cursor:pointer}
.fchk input{width:16px;height:16px;flex-shrink:0;accent-color:var(--r);margin-top:3px}
.fchk span{font-size:.76rem;color:var(--w3);line-height:1.5;font-weight:300}
.fchk span a{color:var(--r);text-decoration:underline}
.fsubw{text-align:center}
.fsucc{display:none;text-align:center;padding:3.5rem 1rem}
.fsucc.on{display:block}
.fsico{width:64px;height:64px;border-radius:50%;border:2px solid var(--r);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:1.8rem;color:var(--r)}
.fsucc h3{font-family:var(--h);font-size:2rem;text-transform:uppercase;margin-bottom:.75rem;color:var(--r)}
.fsucc p{font-size:.9rem;color:var(--w3);font-weight:300}

/* ── FOOTER ── */
footer{background:var(--bk2);border-top:1px solid rgba(217,4,41,.1);padding:clamp(3rem,5vw,5rem) 0 2rem}
.ftop{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(2rem,5vw,5rem);margin-bottom:3rem}
.fbrand .logo{font-size:1.1rem;margin-bottom:1rem;display:inline-block}
.fbrand p{font-size:.82rem;color:var(--w3);max-width:28ch;line-height:1.7;margin-bottom:1.8rem;font-weight:300}
.fcol h5{font-family:var(--h);font-size:.62rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--r);margin-bottom:1.2rem}
.flinks{display:flex;flex-direction:column;gap:.55rem}
.flinks a{font-size:.82rem;color:var(--w3);transition:color .2s;font-weight:300}
.flinks a:hover{color:var(--r)}
.fbot{border-top:1px solid rgba(255,255,255,.04);padding-top:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.fbot span{font-size:.7rem;color:rgba(242,242,242,.18);letter-spacing:.05em}
.fbot a{font-size:.7rem;color:rgba(242,242,242,.18);transition:color .2s}
.fbot a:hover{color:var(--r)}

/* ── GRADIENT FILLS ── */
.ga{background:linear-gradient(140deg,#1e0008,#380012,#1a0008)}
.gb{background:linear-gradient(140deg,#08000e,#160018)}
.gc{background:linear-gradient(140deg,#0c0a00,#1e1400)}
.gd{background:linear-gradient(140deg,#040010,#0e001e)}
.ge{background:linear-gradient(140deg,#0e0002,#200008)}
.gf{background:linear-gradient(140deg,#060612,#10101e)}

/* ── DIVIDER ── */
.div{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(217,4,41,.2),transparent)}

/* ══ RESPONSIVE ══ */
@media(max-width:1024px){
  .hero-layout{grid-template-columns:1fr}
  .hero-img{min-height:300px}
  .offer-layout,.offer-layout.flip,.kf-layout,.team-member,.team-member.flip{grid-template-columns:1fr}
  .offer-layout.flip .offer-img,.team-member.flip .tm-photo{order:0}
  .tg{grid-template-columns:1fr 1fr}
  .ms-grid{grid-template-columns:1fr 1fr}
  .ftop{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}
}
@media(max-width:768px){
  .nd,.hdcta{display:none}.brg{display:flex}
  .ba-wrap{grid-template-columns:1fr}
  .bap.bef{display:none}
  .lb-inner{flex-direction:column;align-items:flex-start}
  .tg{grid-template-columns:1fr}
  .ms-grid{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr}
}
@media(max-width:480px){
  .ms-grid{grid-template-columns:1fr}
  .ftop{grid-template-columns:1fr}
  .fbot{flex-direction:column;align-items:flex-start}
  .cta-badges{flex-direction:column;gap:.3rem}
}
/* ══ KOSTENVERGLEICH ══ */
#kostenvergleich{background:var(--bk2);padding:clamp(5rem,8vw,8rem) 0;border-top:1px solid rgba(217,4,41,.08)}
.kv-inner{max-width:900px;margin:0 auto;text-align:center}
.kv-h2{font-family:var(--h);font-size:clamp(2.2rem,5vw,4.5rem);font-weight:900;text-transform:uppercase;line-height:.95;margin-bottom:1rem}
.kv-h2 em{color:var(--r);font-style:normal}
.kv-sub{font-size:clamp(.95rem,1.2vw,1.05rem);color:var(--w2);font-weight:300;margin-bottom:3rem}

.kv-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:start;text-align:left;position:relative}

/* VS Badge */
.kv-vs{
  font-family:var(--h);font-size:1.1rem;font-weight:900;
  color:var(--r);
  width:52px;height:52px;border-radius:50%;
  border:2px solid var(--r);
  display:flex;align-items:center;justify-content:center;
  margin-top:4rem;
  background:var(--bk);
  position:relative;z-index:2;
  flex-shrink:0;
}

.kv-col{
  background:var(--bk3);
  border-radius:4px;
  padding:clamp(1.5rem,3vw,2.5rem);
}
.kv-old{border-top:3px solid rgba(255,255,255,.08)}
.kv-new{border-top:3px solid var(--r);box-shadow:0 0 40px rgba(217,4,41,.08)}

.kv-col-label{
  font-family:var(--h);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--w3);margin-bottom:1.5rem;
}
.kv-col-label-new{color:var(--r)}

.kv-list{display:flex;flex-direction:column;gap:.85rem;margin-bottom:2rem}
.kv-list li{display:flex;align-items:flex-start;gap:.75rem;font-size:clamp(.88rem,1.1vw,.96rem);color:var(--w2);font-weight:300;line-height:1.4}
.kv-list li strong{color:var(--w);font-weight:700}

.kv-x{
  font-size:.75rem;font-weight:700;color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);border-radius:50%;
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;
}
.kv-check{
  font-size:.75rem;font-weight:700;color:var(--r);
  background:rgba(217,4,41,.1);border-radius:50%;
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;
}

.kv-total{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:1.2rem;
  font-family:var(--h);font-size:clamp(1rem,1.8vw,1.3rem);font-weight:700;
  text-transform:uppercase;line-height:1.3;
}
.kv-total span{font-family:var(--b);font-size:.78rem;font-weight:300;text-transform:none;color:var(--w3)}
.kv-total-old{color:rgba(255,255,255,.3)}
.kv-total-old strong{color:rgba(255,255,255,.5)}
.kv-total-new{color:var(--r)}
.kv-total-new span{color:var(--w2)}

@media(max-width:768px){
  .kv-grid{grid-template-columns:1fr;gap:1rem}
  .kv-vs{margin:0 auto}
}

/* ── SMY Agency References ── */
.mission-agency{
  margin-top:1.2rem;
  font-size:clamp(.88rem,1.1vw,.95rem);
  color:var(--w3);
  font-weight:300;
  border-left:3px solid var(--r);
  padding-left:1rem;
}
.mission-agency a{
  color:var(--r);
  text-decoration:none;
  font-weight:600;
  transition:opacity .2s;
}
.mission-agency a:hover{opacity:.75}

.fagency{
  font-size:.75rem;
  color:var(--w3);
  margin-top:.5rem !important;
  font-weight:300;
}
.fagency a{
  color:var(--w3);
  text-decoration:none;
  border-bottom:1px solid rgba(217,4,41,.3);
  transition:color .2s,border-color .2s;
}
.fagency a:hover{color:var(--r);border-color:var(--r)}

/* ── Foto Platzhalter ── */
.ba-img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#111}
.offer-photo{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block}
.tm-img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:4px;display:block}
.tcard-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:4px 4px 0 0}

/* ══ ÜBER MICH ══ */
#team{padding:clamp(5rem,8vw,8rem) 0}
.ueber-mich{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(3rem,6vw,6rem);align-items:center}
.um-photo{border-radius:4px;overflow:hidden;position:relative}
.um-photo::before{content:'';position:absolute;inset:0;border:2px solid rgba(217,4,41,.15);border-radius:4px;z-index:1;pointer-events:none}
.um-img{width:100%;height:auto;display:block;border-radius:4px;object-fit:cover;object-position:top}
.um-h3{font-family:var(--h);font-size:clamp(1.6rem,3vw,2.6rem);font-weight:800;line-height:1.1;margin:0.6rem 0 1.5rem}
.um-h3 em{color:var(--r);font-style:normal}
.um-bio{font-size:clamp(.9rem,1.1vw,.98rem);color:var(--w2);font-weight:300;line-height:1.8;margin-bottom:1rem}
.um-bio a{color:var(--r);text-decoration:none;font-weight:600}
.um-bio a:hover{opacity:.75}
.um-stats{display:flex;gap:2.5rem;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.07)}
.um-stat{display:flex;flex-direction:column;gap:.2rem}
.um-stat-n{font-family:var(--h);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;color:var(--r)}
.um-stat-l{font-size:.78rem;color:var(--w3);text-transform:uppercase;letter-spacing:.1em;font-weight:600}

@media(max-width:768px){
  .ueber-mich{grid-template-columns:1fr}
  .um-photo{max-width:320px;margin:0 auto}
  .um-stats{gap:1.5rem}
}

/* ══ REVIEW CARDS (Google Style) ══ */
.rcard{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
  transition:border-color .2s,transform .2s;
}
.rcard:hover{border-color:rgba(217,4,41,.25);transform:translateY(-3px)}
.rcard-top{display:flex;align-items:center;gap:.8rem}
.rcard-av{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--h);font-size:.72rem;font-weight:700;
  color:#fff;flex-shrink:0;letter-spacing:.03em;
}
.rcard-name{font-family:var(--h);font-size:.88rem;font-weight:700;color:var(--w)}
.rcard-role{font-size:.75rem;color:var(--w3);margin-top:.1rem}
.rcard-g{margin-left:auto;flex-shrink:0;opacity:.7}
.rcard-stars{color:#fbbc04;font-size:1rem;letter-spacing:.1em}
.rcard-quote{font-size:.88rem;color:var(--w2);line-height:1.7;font-weight:300;font-style:italic}

/* ── Mockup Cards mit Fotos ── */
.mock-card-img{padding:0;overflow:hidden;background:none}
.mock-photo{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;min-height:280px}

/* ── Video in Mockup Cards ── */
.mock-card-img video.mock-photo{
  width:100%;height:100%;
  object-fit:cover;display:block;
  border-radius:inherit;min-height:280px;
}

/* ══ KI-VIDEO SECTION ══ */
.video-preview{position:relative}
.video-play-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;
  background:rgba(217,4,41,.9);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 30px rgba(217,4,41,.4);
  pointer-events:none;
}

/* ══ MOBILE RESPONSIVE – COMPLETE OVERHAUL ══ */
@media(max-width:768px){

  /* Hero */
  .hero-inner{padding:6rem 1.2rem 3rem}
  .hero-h1{font-size:clamp(2.2rem,10vw,3.5rem) !important}
  .hero-tagline{font-size:.85rem}
  .hero-wlwl{font-size:.72rem}
  .hero-mockup{display:none} /* hide mockup cards on mobile */
  .rating-block{flex-direction:column;gap:.5rem;text-align:center}

  /* Kostenvergleich */
  .kv-grid{grid-template-columns:1fr !important;gap:1rem}
  .kv-vs{margin:0 auto}
  .kv-h2{font-size:2rem !important}

  /* Mission */
  .mission-wrap{padding:0 1rem}
  .mission-h2{font-size:1.8rem}

  /* Bridge */
  .ba-wrap{grid-template-columns:1fr !important}
  .bridge-inner{padding:0 1rem}

  /* Offer sections */
  .offer-layout{grid-template-columns:1fr !important;gap:2rem}
  .offer-img{min-height:220px;order:-1}
  .offer-h4{font-size:1.6rem}

  /* Krisenfest */
  .kf-layout{grid-template-columns:1fr !important;gap:2rem}
  .kf-img{order:-1;min-height:220px}
  .kf-stats{gap:1.5rem}
  .kf-stat-n{font-size:1.6rem}

  /* Über mich */
  .ueber-mich{grid-template-columns:1fr !important;gap:2rem}
  .um-photo{max-width:280px;margin:0 auto}
  .um-h3{font-size:1.6rem}
  .um-stats{gap:1.2rem;flex-wrap:wrap}

  /* Review cards */
  .tg{grid-template-columns:1fr !important}

  /* Weitere Kundenstimmen */
  .ms-grid{grid-template-columns:1fr !important}

  /* Form */
  .frow{grid-template-columns:1fr !important}
  .form-cx h2{font-size:1.8rem}

  /* Header */
  .hd-nav{display:none}
  .hdcta{display:none}

  /* Footer */
  .ft-grid{grid-template-columns:1fr !important;gap:2rem}

  /* General */
  .wrap{padding:0 1.2rem}
  .section-label{font-size:.6rem}
  .btn{font-size:.82rem;padding:.85rem 1.8rem}
  .cta-badges{flex-wrap:wrap;justify-content:center}

  /* KV */
  .kv-col{padding:1.2rem}
}

@media(max-width:480px){
  .hero-h1{font-size:1.9rem !important}
  .offer-h4{font-size:1.3rem}
  .kv-h2{font-size:1.6rem !important}
  .um-stats{gap:1rem}
  .um-stat-n{font-size:1.8rem}
  .testi-h1,.ms-h1{font-size:1.6rem}
  .form-cx h2{font-size:1.5rem}
  .kf-stat-n{font-size:1.3rem}
}

/* ══ VIDEO TEASER SECTION ══ */
#video-teaser{padding:clamp(4rem,7vw,7rem) 0;background:var(--bk2)}
.vt-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,5vw,6rem);align-items:center}
.vt-h2{font-family:var(--h);font-size:clamp(1.8rem,3.5vw,3rem);font-weight:900;line-height:1.05;margin:.6rem 0 1.2rem}
.vt-h2 em{color:var(--r);font-style:normal}
.vt-sub{font-size:clamp(.9rem,1.1vw,.98rem);color:var(--w2);font-weight:300;line-height:1.8;margin-bottom:1.2rem}
.vt-list{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.vt-list li{font-size:.9rem;color:var(--w2);font-weight:300}
.vt-list li::first-letter{color:var(--r)}

.vt-video{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.vt-vid{width:100%;height:auto;display:block;border-radius:12px}
.vt-badge{
  position:absolute;top:1rem;left:1rem;
  background:rgba(217,4,41,.9);
  color:#fff;font-family:var(--h);font-size:.65rem;font-weight:700;
  padding:.3rem .7rem;border-radius:20px;letter-spacing:.08em;
}

@media(max-width:768px){
  .vt-inner{grid-template-columns:1fr}
  .vt-video{max-width:360px;margin:0 auto}
}

/* ── Mute Button ── */
.vt-mute-btn{
  position:absolute;bottom:1rem;right:1rem;
  display:flex;align-items:center;gap:.4rem;
  background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;font-family:var(--h);font-size:.65rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:20px;
  cursor:pointer;backdrop-filter:blur(4px);
  transition:background .2s;
}
.vt-mute-btn:hover{background:rgba(217,4,41,.8)}

/* ══════════════════════════════════════════════
   SMY STUDIO – MOBILE FIX PATCH
   Ans Ende von style.css einfügen
══════════════════════════════════════════════ */

/* ── FIX 1: rv-Reveal Fallback für iOS Safari ──
   Wenn JS nicht feuert, bleiben alle .rv Elemente opacity:0
   → Nach 1.5s automatisch einblenden                        */
   @media (max-width: 1024px) {
    .rv {
      animation: rv-fallback 0.6s ease 1.5s forwards;
    }
    .rv.on {
      animation: none;
      opacity: 1;
      transform: translateY(0);
    }
    @keyframes rv-fallback {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
  
  /* ── FIX 2: Overflow & Scroll ── */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }
  
  /* ── FIX 3: Hero Section Mobile ── */
  @media (max-width: 768px) {
    #hero {
      min-height: 100svh; /* safe viewport height für iOS */
      padding-top: 70px;
      padding-bottom: 3rem;
    }
  
    .hero-inner {
      padding: 2rem 1.2rem 2rem;
      gap: 1.2rem;
    }
  
    .hero-h1 {
      font-size: clamp(2rem, 11vw, 3rem) !important;
      margin-bottom: 0.8rem;
    }
  
    .hero-tagline {
      font-size: 0.8rem;
      margin-bottom: 0.8rem;
    }
  
    .hero-wlwl {
      font-size: 0.68rem;
      margin-bottom: 1.5rem;
    }
  
    .rating-block {
      margin-top: 1.5rem;
      flex-direction: column;
      gap: 0.4rem;
      text-align: center;
    }
  
    .rating-txt {
      font-size: 0.76rem;
    }
  }
  
  /* ── FIX 4: Video Teaser ── */
  @media (max-width: 768px) {
    #video-teaser {
      padding: 3rem 0;
    }
  
    .vt-inner {
      grid-template-columns: 1fr !important;
      gap: 2rem;
    }
  
    .vt-text {
      order: 1;
    }
  
    .vt-video {
      order: 2;
      max-width: 100%;
      margin: 0;
    }
  
    .vt-vid {
      width: 100%;
      max-height: 280px;
      object-fit: cover;
    }
  
    .vt-h2 {
      font-size: 1.6rem;
    }
  }
  
  /* ── FIX 5: Kostenvergleich ── */
  @media (max-width: 768px) {
    #kostenvergleich {
      padding: 3rem 0;
    }
  
    .kv-grid {
      grid-template-columns: 1fr !important;
      gap: 0;
    }
  
    .kv-col {
      border-radius: 0;
    }
  
    .kv-old {
      border-radius: 4px 4px 0 0;
    }
  
    .kv-vs {
      border-radius: 0;
      width: 100%;
      height: 44px;
      border-left: none;
      border-right: none;
      border-radius: 0;
      font-size: 0.85rem;
    }
  
    .kv-new {
      border-radius: 0 0 4px 4px;
    }
  
    .kv-h2 {
      font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
      line-height: 1.1;
    }
  }
  
  /* ── FIX 6: Offer Sections ── */
  @media (max-width: 768px) {
    .offer-section {
      padding: 3rem 0;
    }
  
    .offer-layout {
      grid-template-columns: 1fr !important;
      gap: 1.5rem;
    }
  
    .offer-img {
      min-height: 220px;
      order: -1 !important;
    }
  
    .offer-h4 {
      font-size: 1.4rem;
    }
  
    .offer-text {
      font-size: 0.92rem;
    }
  
    .offer-feats {
      gap: 0.65rem;
    }
  
    .cta-block {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.8rem;
      margin-top: 1.5rem;
    }
  
    /* Video preview in Angebot-Video Section */
    .video-preview {
      min-height: 240px;
      order: -1 !important;
    }
  
    #angebot-video .offer-layout > div:first-child {
      order: 2;
    }
  }
  
  /* ── FIX 7: Krisenfest ── */
  @media (max-width: 768px) {
    #krisenfest {
      padding: 3rem 0;
    }
  
    .kf-layout {
      grid-template-columns: 1fr !important;
      gap: 1.5rem;
    }
  
    .kf-img {
      order: -1;
      min-height: 200px;
    }
  
    .kf-h {
      font-size: 1.4rem;
    }
  
    .kf-stats {
      gap: 1.2rem;
    }
  
    .kf-stat-n {
      font-size: 1.5rem;
    }
  }
  
  /* ── FIX 8: Team Section ── */
  @media (max-width: 768px) {
    #team {
      padding: 3rem 0;
    }
  
    .team-member {
      grid-template-columns: 1fr !important;
      gap: 1.5rem;
      padding: 2rem 0;
      max-width: 100% !important;
      margin: 0 !important;
    }
  
    .tm-photo {
      min-height: 260px;
      order: -1;
    }
  
    .tm-h5 {
      font-size: 1.6rem;
    }
  
    .tm-stat-row {
      flex-wrap: wrap;
    }
  }
  
  /* ── FIX 9: Kundenstimmen ── */
  @media (max-width: 768px) {
    #testi {
      padding: 3rem 0;
    }
  
    .testi-h1 {
      font-size: 1.8rem;
      margin-bottom: 1.5rem;
    }
  
    .tg {
      grid-template-columns: 1fr !important;
      gap: 0.6rem;
    }
  
    .rcard {
      padding: 1.2rem;
    }
  
    .rcard-quote {
      font-size: 0.84rem;
    }
  }
  
  /* ── FIX 10: Weitere Stimmen ── */
  @media (max-width: 768px) {
    #mehr-stimmen {
      padding: 3rem 0;
    }
  
    .ms-h1 {
      font-size: 1.6rem;
      margin-bottom: 1.5rem;
    }
  
    .ms-grid {
      grid-template-columns: 1fr !important;
      gap: 0.5rem;
    }
  }
  
  /* ── FIX 11: CTA Form ── */
  @media (max-width: 768px) {
    #ctaform {
      padding: 3rem 0;
    }
  
    .form-cx {
      padding: 0;
    }
  
    .form-cx h2 {
      font-size: 1.6rem;
    }
  
    .frow {
      grid-template-columns: 1fr !important;
      gap: 0;
    }
  
    .ff input,
    .ff select {
      font-size: 16px; /* verhindert Auto-Zoom auf iOS! */
    }
  
    .fsubw .btn {
      width: 100%;
      justify-content: center;
    }
  }
  
  /* ── FIX 12: Before/After ── */
  @media (max-width: 768px) {
    .ba-wrap {
      grid-template-columns: 1fr !important;
    }
  
    .ba-img {
      min-height: 200px;
    }
  }
  
  /* ── FIX 13: Bridge Sections ── */
  @media (max-width: 768px) {
    #bridge,
    #bridge2 {
      padding: 2.5rem 0;
    }
  
    .bridge-h3 {
      font-size: 1rem;
    }
  
    .bridge2-inner h3 {
      font-size: 0.95rem;
    }
  }
  
  /* ── FIX 14: Mission ── */
  @media (max-width: 768px) {
    #mission {
      padding: 3rem 0;
    }
  
    .mission-h2 {
      font-size: 1.6rem;
    }
  
    .mission-text {
      font-size: 0.92rem;
    }
  }
  
  /* ── FIX 15: Allgemeine Section Abstände ── */
  @media (max-width: 480px) {
    .section-label {
      font-size: 0.58rem;
      letter-spacing: 0.2em;
    }
  
    .btn {
      font-size: 0.78rem;
      padding: 0.85rem 1.5rem;
    }
  
    .hero-h1 {
      font-size: 1.8rem !important;
      line-height: 1;
    }
  
    .offer-h4,
    .kf-h,
    .tm-h5 {
      font-size: 1.2rem;
    }
  
    .testi-h1,
    .ms-h1 {
      font-size: 1.4rem;
    }
  
    .form-cx h2 {
      font-size: 1.3rem;
    }
  }
  
  /* ── FIX 16: Safe Area für iPhone Notch / Dynamic Island ── */
  @supports (padding-top: env(safe-area-inset-top)) {
    #hdr {
      padding-top: calc(1rem + env(safe-area-inset-top));
    }
  
    #hero {
      padding-top: calc(80px + env(safe-area-inset-top));
    }
  }

  /* ── HERO MOCKUP auf Mobile zeigen ── */
@media (max-width: 768px) {
  .hero-mockup {
    display: block !important;
    max-width: 100%;
    padding: 0 1rem;
    margin-top: 1.5rem;
  }

  .hero-mockup-inner {
    aspect-ratio: auto;
    height: 240px;
    border-radius: 8px;
  }

  .mockup-cards {
    gap: 0.5rem;
    padding: 0.8rem;
  }

  .mock-card {
    max-width: none !important;
    flex: 1 !important;
  }

  .mock-card:nth-child(1) {
    transform: rotate(-4deg) translateY(6px);
  }

  .mock-card:nth-child(2) {
    transform: rotate(0deg) translateY(-8px);
  }

  .mock-card:nth-child(3) {
    transform: rotate(4deg) translateY(5px);
  }

  .mock-photo {
    min-height: 180px !important;
  }
}

@media (max-width: 480px) {
  .hero-mockup-inner {
    height: 200px;
  }

  .mock-photo {
    min-height: 150px !important;
  }
}

 /* ══════════════════════════════════════════════
   IMPRESSUM & DATENSCHUTZ – ans Ende von style.css
══════════════════════════════════════════════ */

.imp-hero {
  padding: clamp(8rem, 12vw, 12rem) 0 clamp(3rem, 5vw, 5rem);
  background: var(--bk);
  border-bottom: 1px solid rgba(217,4,41,.1);
}
.imp-hero h1 {
  font-family: var(--h);
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .95;
  color: var(--r);
  margin-bottom: 1rem;
}
.imp-hero p {
  font-family: var(--h);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--w3);
}
.imp-body {
  background: var(--bk);
  padding: clamp(4rem, 7vw, 7rem) 0;
}
.imp-content {
  max-width: 720px;
}
.imp-content h2 {
  font-family: var(--h);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--r);
  margin: 2.5rem 0 .8rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(217,4,41,.12);
}
.imp-content h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.imp-content p {
  font-size: clamp(.9rem, 1.1vw, 1rem);
  color: var(--w2);
  font-weight: 300;
  line-height: 1.85;
  margin-bottom: .75rem;
}
.imp-content ul {
  margin: .5rem 0 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.imp-content ul li {
  font-size: clamp(.9rem, 1.1vw, 1rem);
  color: var(--w2);
  font-weight: 300;
  line-height: 1.7;
  list-style: disc;
}
.imp-content a {
  color: var(--r);
  text-decoration: none;
  border-bottom: 1px solid rgba(217,4,41,.3);
  transition: border-color .2s;
  word-break: break-all;
}
.imp-content a:hover {
  border-color: var(--r);
}
.imp-content strong {
  color: var(--w);
  font-weight: 600;
}
.imp-widerspruch {
  background: rgba(217,4,41,.05);
  border: 1px solid rgba(217,4,41,.15);
  border-radius: 4px;
  padding: 1.2rem 1.5rem;
  margin: 1rem 0;
}
.imp-widerspruch p {
  font-size: .85rem !important;
  letter-spacing: .03em;
  color: var(--w2) !important;
}
.imp-stand {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: .75rem !important;
  color: var(--w3) !important;
}