/* =========================================================
   GymClub – Website Entwurf
   Palette: Schwarz / Weiß + Blau
   ========================================================= */

:root{
  --ink:        #0B0B0C;
  --ink-2:      #141417;
  --ink-3:      #1E1E23;
  --paper:      #FFFFFF;
  --paper-2:    #F5F6F8;
  --paper-3:    #EDEFF3;
  --line:       #E4E6EB;
  --line-dark:  rgba(255,255,255,.12);
  --muted:      #6C7280;
  --muted-dark: rgba(255,255,255,.62);

  --blue:       #1B5CFF;
  --blue-600:   #1445CC;
  --blue-300:   #6D93FF;
  --blue-tint:  #EEF3FF;

  --radius:     18px;
  --radius-lg:  26px;
  --container:  1180px;

  --shadow-sm:  0 1px 2px rgba(11,11,12,.06), 0 8px 24px rgba(11,11,12,.05);
  --shadow-lg:  0 30px 70px rgba(11,11,12,.14);
  --shadow-xl:  0 40px 100px rgba(0,0,0,.45);

  --ease: cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* height:auto ist Pflicht, sobald die Bilder width/height-Attribute tragen:
   sonst wirkt das height-Attribut als fixe Höhe und das Bild wird verzerrt,
   sobald die CSS-Breite von der Originalbreite abweicht. */
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

h1,h2,h3,h4{
  margin:0;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.04;
}
h1{ font-size:clamp(2.7rem,5.6vw,4.5rem); }
h2{ font-size:clamp(2rem,3.6vw,3.05rem); line-height:1.08; }
h3{ font-size:1.28rem; letter-spacing:-.02em; line-height:1.25; }
p{ margin:0; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.72rem 1.25rem;
  border:1px solid transparent;
  border-radius:999px;
  font-size:.95rem; font-weight:650; letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:.95rem 1.7rem; font-size:1.02rem; }
.btn-block{ display:flex; width:100%; }

.btn-primary{
  background:var(--blue); color:#fff;
  box-shadow:0 10px 26px rgba(27,92,255,.32);
}
.btn-primary:hover{ background:var(--blue-600); box-shadow:0 14px 34px rgba(27,92,255,.42); }

.btn-ghost{
  background:transparent; color:#fff;
  border-color:rgba(255,255,255,.28);
}
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.07); }

.btn-ghost--dark{ color:var(--ink); border-color:var(--line); background:#fff; }
.btn-ghost--dark:hover{ border-color:var(--ink); }

/* ---------- Eyebrow / Section heads ---------- */
.eyebrow{
  font-size:.76rem; font-weight:750; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-300); margin-bottom:1.1rem;
}
.eyebrow--dark{ color:var(--blue); }

.section{ padding:clamp(80px,10vw,140px) 0; }
.section--paper{ background:var(--paper-2); }
.section--dark{ background:var(--ink); color:#fff; }

.section-head{ max-width:800px; margin:0 auto clamp(48px,6vw,72px); text-align:center; }
.section-head--left{ text-align:left; margin-inline:0; }
.section-sub{ margin-top:1.1rem; color:var(--muted); font-size:1.08rem; }
.section-head--light .section-sub,
.section--dark .section-sub{ color:var(--muted-dark); }

.num{
  display:inline-block;
  font-size:.8rem; font-weight:750; letter-spacing:.12em;
  color:var(--blue); margin-bottom:.85rem;
  font-variant-numeric:tabular-nums;
}

.ticks{ list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.6rem; }
.ticks li{
  position:relative; padding-left:1.7rem;
  font-size:.95rem; color:var(--muted);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:14px; height:8px;
  border-left:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}
.ticks--light li{ color:var(--muted-dark); }
.ticks--light li::before{ border-color:var(--blue-300); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(11,11,12,.78);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line-dark);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; height:76px;
}

.brand{ display:inline-flex; align-items:center; color:#fff; }
/* Weiße Wortmarke auf transparentem Grund – funktioniert nur auf dunklem
   Untergrund, und der Header ist in jedem Zustand dunkel. */
.brand-logo{ height:26px; width:auto; display:block; }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{
  font-size:.94rem; font-weight:550; color:rgba(255,255,255,.72);
  transition:color .18s var(--ease);
}
.nav a:hover{ color:#fff; }
.nav-cta{ color:#fff !important; margin-left:.4rem; }

.nav-toggle{
  display:none; width:44px; height:44px; border:0; background:transparent;
  cursor:pointer; padding:0; place-items:center;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .25s var(--ease), opacity .2s;
}
.nav-toggle span+span{ margin-top:6px; }
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  padding-top:150px;
}
.hero-glow{
  position:absolute; z-index:0; pointer-events:none;
  width:900px; height:900px; right:-260px; top:-380px;
  background:radial-gradient(circle at center, rgba(27,92,255,.34), rgba(27,92,255,0) 62%);
  filter:blur(10px);
}
.hero-grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 40% 30%, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 40% 30%, #000 35%, transparent 78%);
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,70px);
  align-items:center;
  padding-bottom:clamp(80px,9vw,120px);
}
.hero h1 .accent{ color:var(--blue-300); }
.hero .lead{
  margin-top:1.6rem; max-width:33rem;
  font-size:clamp(1.05rem,1.5vw,1.24rem); color:rgba(255,255,255,.72);
}
.hero-points{
  list-style:none; margin:1.7rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem;
  font-size:.92rem; color:rgba(255,255,255,.62);
}
.hero-points li{ display:flex; align-items:center; gap:.55rem; }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--blue-300); }

.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.3rem; }

.hero-meta{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.4rem; margin-top:3rem; padding-top:1.8rem;
  border-top:1px solid var(--line-dark);
  max-width:36rem;
}
.hero-meta div{ display:flex; flex-direction:column; }
.hero-meta strong{ font-size:.95rem; font-weight:650; }
.hero-meta span{ font-size:.84rem; color:rgba(255,255,255,.5); }

/* Phone mockup */
.hero-visual{ position:relative; display:flex; justify-content:center; }
.phone{
  position:relative;
  width:min(320px,80%);
  aspect-ratio:702/1520;
  border-radius:44px;
  padding:9px;
  background:linear-gradient(160deg,#3a3a40,#0d0d10 45%,#2a2a2f);
  box-shadow:var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.07);
}
.phone-screen{
  height:100%; border-radius:36px; overflow:hidden; background:#fff;
}
.phone-screen img{ width:100%; height:100%; object-fit:cover; object-position:top; }

.float-card{
  position:absolute; z-index:3;
  background:rgba(255,255,255,.96);
  color:var(--ink);
  border-radius:16px;
  padding:.85rem 1rem;
  box-shadow:0 20px 45px rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
  animation:floaty 6s ease-in-out infinite;
}
.float-card--load{ left:-10%; top:30%; width:196px; }
.float-card--revenue{ right:-10%; top:56%; width:172px; animation-delay:-2s; }
.float-card--door{
  left:2%; bottom:9%; display:flex; align-items:center; gap:.7rem;
  animation-delay:-4s;
}
.fc-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.fc-label{ font-size:.72rem; font-weight:650; color:var(--muted); letter-spacing:-.01em; }
.fc-value{ font-size:1.45rem; font-weight:800; letter-spacing:-.03em; margin-top:.15rem; }
.fc-value span{ font-size:.72rem; font-weight:600; color:var(--muted); letter-spacing:0; }
.fc-value--blue{ color:var(--blue); }
.float-card--door strong{ display:block; font-size:.86rem; }
.float-card--door span{ font-size:.74rem; color:var(--muted); }
.fc-icon{
  width:34px; height:34px; border-radius:10px; background:var(--ink); color:#fff;
  display:grid; place-items:center; flex:none;
}
.pill{
  font-size:.6rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  padding:.18rem .45rem; border-radius:999px; background:var(--paper-3); color:var(--muted);
}
.pill--live{ background:var(--blue-tint); color:var(--blue); }
.bar{ height:6px; border-radius:99px; background:var(--paper-3); margin-top:.6rem; overflow:hidden; }
.bar i{ display:block; height:100%; width:var(--w); background:var(--ink); border-radius:99px; }
.bar--blue i{ background:var(--blue); }

@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%   { transform:translateY(-10px); }
}

/* Audience strip */
.audience{
  position:relative; z-index:1;
  border-top:1px solid var(--line-dark);
  background:rgba(255,255,255,.02);
}
.audience-inner{
  display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
  padding-block:22px;
}
.audience-label{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
.audience ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
}
.audience li{
  font-size:.86rem; font-weight:600; color:rgba(255,255,255,.8);
  padding:.35rem .85rem; border:1px solid var(--line-dark); border-radius:999px;
}

/* =========================================================
   PROBLEME
   ========================================================= */
.problem-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;
}
.problem{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px 24px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.problem:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:#d5d8e0; }
.problem h3{ margin-bottom:.6rem; }
.problem p{ font-size:.95rem; color:var(--muted); }
.problem > p:not(.solution){ margin-bottom:1.1rem; }
.solution{
  margin-top:auto !important; padding-top:1.1rem;
  border-top:1px dashed var(--line);
  color:var(--ink) !important; font-size:.9rem !important;
}
.solution span{
  display:block; font-size:.68rem; font-weight:750; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); margin-bottom:.3rem;
}

/* =========================================================
   BENTO / PLATTFORM
   ========================================================= */
.bento{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.bento-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bento-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.bento-card p{ color:var(--muted); font-size:.97rem; margin-top:.6rem; }
.bento-card--wide{
  grid-column:span 3;
  display:grid; grid-template-columns:1fr .85fr; gap:32px; align-items:center;
  padding:44px;
  background:linear-gradient(120deg,#fff, #fbfcff);
}
.bento-visual{
  display:flex; justify-content:center; align-items:flex-end;
  min-height:300px; overflow:hidden;
}
.bento-visual img{
  width:min(260px,80%);
  filter:drop-shadow(0 30px 60px rgba(11,11,12,.22));
  transform:translateY(14px);
}
.bento-card--dark{
  background:var(--ink); color:#fff; border-color:var(--ink);
}
.bento-card--dark p{ color:var(--muted-dark); }
.bento-card--dark .num{ color:var(--blue-300); }

/* =========================================================
   CLUBZONE TABS
   ========================================================= */
.tablist{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem;
  padding:.4rem; margin:0 auto 40px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-dark);
  border-radius:999px;
  width:max-content; max-width:100%;
}
.tab{
  border:0; background:transparent; color:rgba(255,255,255,.68);
  padding:.6rem 1.15rem; border-radius:999px; cursor:pointer;
  font-size:.92rem; font-weight:600; letter-spacing:-.01em;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.tab:hover{ color:#fff; }
.tab.is-active{ background:#fff; color:var(--ink); }

.tabpanel{ display:none; }
.tabpanel.is-active{ display:block; animation:fadeUp .45s var(--ease); }
.tabpanel-text{ max-width:640px; margin:0 auto 32px; text-align:center; }
.tabpanel-text p{ margin-top:.7rem; color:var(--muted-dark); }
.tabpanel figure{
  margin:0; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(180deg, rgba(27,92,255,.16), rgba(27,92,255,0) 65%);
  padding:clamp(12px,3vw,34px) clamp(12px,3vw,34px) 0;
}
.tabpanel figure img{
  width:100%;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.5));
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* =========================================================
   COACHING
   ========================================================= */
.coach-layout{
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,5vw,64px);
  align-items:center;
}
.coach-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
.coach-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.coach-card:hover{ border-color:var(--ink); transform:translateY(-3px); }
.coach-card p{ margin-top:.45rem; font-size:.92rem; color:var(--muted); }

.coach-phones{ position:relative; min-height:520px; display:grid; place-items:center; }
.phone-shot img{ filter:drop-shadow(0 30px 60px rgba(11,11,12,.25)); }
.phone-shot--back{
  position:absolute; width:66%; left:2%; top:2%;
  transform:rotate(-7deg); opacity:.92;
}
.phone-shot--front{
  position:relative; width:70%; right:-8%; top:6%;
  transform:rotate(4deg);
}

/* =========================================================
   WHITELABEL
   ========================================================= */
.whitelabel-inner{
  display:grid; grid-template-columns:1fr .8fr; gap:clamp(32px,5vw,72px);
  align-items:center;
}
.whitelabel h2{ margin-top:.2rem; }
.whitelabel .btn{ margin-top:2rem; }
.whitelabel-visual{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
.wl-tile{
  aspect-ratio:1; border-radius:var(--radius);
  border:1px solid var(--line-dark);
  background:rgba(255,255,255,.05);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
  font-size:.88rem; font-weight:650; color:rgba(255,255,255,.72);
  transition:transform .3s var(--ease);
}
.wl-tile:hover{ transform:translateY(-5px); }
.wl-icon{
  width:64px; height:64px; border-radius:16px;
  display:grid; place-items:center;
  font-style:normal; font-weight:800; font-size:1.15rem; letter-spacing:-.02em;
  background:rgba(255,255,255,.12); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.wl-tile--blue{ background:var(--blue); border-color:var(--blue); color:rgba(255,255,255,.9); }
.wl-tile--blue .wl-icon{ background:#fff; color:var(--blue); }
.wl-tile--dark{ background:#fff; border-color:#fff; color:var(--muted); }
.wl-tile--dark .wl-icon{ background:var(--ink); color:#fff; }

/* =========================================================
   PREISE
   ========================================================= */
.pricing{
  display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:start;
}
.price-side{ display:grid; gap:20px; }
.price-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px;
}
.price-card header p{ margin-top:.4rem; color:var(--muted); font-size:.95rem; }
.price-card--main{ border-color:var(--ink); box-shadow:var(--shadow-lg); }
.price-card--dark{ background:var(--ink); color:#fff; border-color:var(--ink); }
.price-card--dark header p{ color:var(--muted-dark); }

.price-tag{ margin-top:1.5rem; display:flex; flex-direction:column; }
.price-tag strong{ font-size:2.4rem; font-weight:800; letter-spacing:-.04em; }
.price-tag span{ font-size:.88rem; color:var(--muted); }
.price-tag--light span{ color:var(--muted-dark); }

/* Rechner */
.calc{
  margin-top:1.7rem; padding:22px; border-radius:var(--radius);
  background:var(--paper-2); border:1px solid var(--line);
}
.calc-row{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:.9rem; font-weight:600; margin-bottom:.5rem;
}
.calc-row output{ font-size:1.05rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.calc input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:99px; background:var(--paper-3);
  margin:0 0 1.5rem; cursor:pointer;
}
.calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--blue); border:3px solid #fff;
  box-shadow:0 3px 10px rgba(27,92,255,.45);
}
.calc input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--blue); border:3px solid #fff;
  box-shadow:0 3px 10px rgba(27,92,255,.45);
}
.calc input[type=range]:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; }

.calc-result{ border-top:1px solid var(--line); padding-top:1rem; }
.calc-lines div{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.88rem; color:var(--muted); margin-bottom:.35rem;
}
.calc-lines b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.calc-total{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line);
}
.calc-total span{ font-size:.9rem; font-weight:650; }
.calc-total strong{ font-size:2rem; font-weight:800; letter-spacing:-.04em; color:var(--blue); font-variant-numeric:tabular-nums; }

.tiers{ width:100%; border-collapse:collapse; margin:1.5rem 0; }
.tiers th, .tiers td{
  text-align:left; padding:.62rem .2rem; font-size:.92rem;
  border-bottom:1px solid var(--line); font-weight:500; color:var(--muted);
}
.tiers td{ text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.tiers tr.is-active th, .tiers tr.is-active td{ color:var(--blue); font-weight:750; }

.price-note{
  margin-top:1.6rem; text-align:center; font-size:.84rem; color:var(--muted);
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-layout{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,6vw,80px);
  align-items:start;
}
.faq-layout .section-head{ margin-bottom:0; position:sticky; top:110px; }
.faq-layout .btn{ margin-top:1.8rem; }
.faq-list details{
  border-bottom:1px solid var(--line);
  padding:.4rem 0;
}
.faq-list summary{
  list-style:none; cursor:pointer;
  padding:1.05rem 2.4rem 1.05rem 0;
  font-size:1.02rem; font-weight:650; letter-spacing:-.02em;
  position:relative;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:""; position:absolute; right:6px; top:1.85rem;
  width:11px; height:11px; margin-top:-8px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.faq-list details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-list details[open] summary{ color:var(--blue); }
.faq-list details[open] summary::after{ border-color:var(--blue); }
.faq-list details p{
  padding:0 2.4rem 1.2rem 0; color:var(--muted); font-size:.97rem;
}

/* =========================================================
   CTA
   ========================================================= */
.cta{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  padding:clamp(84px,10vw,140px) 0;
  text-align:center;
}
.cta-glow{
  position:absolute; inset:auto 50% -420px auto; transform:translateX(50%);
  width:1000px; height:700px; pointer-events:none;
  background:radial-gradient(circle at center, rgba(27,92,255,.38), rgba(27,92,255,0) 60%);
}
.cta-inner{ position:relative; z-index:1; max-width:680px; }
.cta .section-sub{ margin-inline:auto; max-width:34rem; }

.cta-form{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  margin-top:2.4rem; text-align:left; align-items:end;
}
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{
  font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  display:flex; align-items:baseline; gap:.5rem;
}
.field .opt{
  font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:none;
  color:rgba(255,255,255,.32);
}
.field input:user-invalid{ border-color:#FF6B6B; }
.field input{
  background:rgba(255,255,255,.06); border:1px solid var(--line-dark);
  color:#fff; border-radius:999px; padding:.85rem 1.2rem;
  font-size:.98rem; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder{ color:rgba(255,255,255,.35); }
.field input:focus{ outline:none; border-color:var(--blue-300); background:rgba(255,255,255,.1); }
.cta-form .btn{ height:52px; }
.form-note{
  grid-column:1/-1; font-size:.82rem; color:rgba(255,255,255,.45); text-align:center; margin-top:.2rem;
}
.form-note a{ color:rgba(255,255,255,.7); border-bottom:1px solid rgba(255,255,255,.3); }
.form-note.is-ok{ color:var(--blue-300); }
.form-note.is-error{ color:#FF8A8A; }

/* Honeypot: aus dem Blickfeld, aber nicht display:none – manche Bots
   erkennen und überspringen ausgeblendete Felder. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.cta-form.is-sending{ opacity:.6; pointer-events:none; }
.cta-alt{ margin-top:2rem; font-size:.94rem; color:rgba(255,255,255,.55); }
.cta-alt a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.35); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--ink-2); color:#fff; padding:64px 0 28px; }
.footer-inner{
  display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px;
  padding-bottom:44px; border-bottom:1px solid var(--line-dark);
}
.footer-brand p{ margin-top:1rem; font-size:.9rem; color:rgba(255,255,255,.5); max-width:22rem; }
.footer-brand .brand-logo{ height:24px; }
.footer-col h4{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:1rem; font-weight:700; }
.footer-col{ display:flex; flex-direction:column; gap:.6rem; }
.footer-col a{ font-size:.92rem; color:rgba(255,255,255,.72); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding-top:22px; font-size:.82rem; color:rgba(255,255,255,.4);
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .hero-inner{ grid-template-columns:1fr; text-align:left; }
  .hero-visual{ margin-top:40px; }
  .phone{ width:min(300px,66%); }
  .float-card--load{ left:2%; }
  .float-card--revenue{ right:2%; }
  .problem-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bento-card--wide{ grid-column:span 2; }
  .coach-layout{ grid-template-columns:1fr; }
  .coach-phones{ min-height:440px; order:-1; }
  .phone-shot--front{ right:0; }
  .whitelabel-inner{ grid-template-columns:1fr; }
  .pricing{ grid-template-columns:1fr; }
  .faq-layout{ grid-template-columns:1fr; }
  .faq-layout .section-head{ position:static; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:820px){
  .nav{
    position:fixed; inset:76px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(11,11,12,.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line-dark);
    padding:14px 24px 26px;
    transform:translateY(-120%); opacity:0; pointer-events:none;
    transition:transform .35s var(--ease), opacity .25s var(--ease);
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:.85rem 0; font-size:1.05rem; border-bottom:1px solid var(--line-dark); }
  .nav-cta{ margin-top:1rem; border-bottom:0 !important; justify-content:center; }
  .nav-toggle{ display:grid; }
  .site-header{ background:rgba(11,11,12,.86); backdrop-filter:blur(16px); }
}

@media (max-width:680px){
  body{ font-size:16px; }
  .hero{ padding-top:120px; }
  .hero-meta{ grid-template-columns:1fr; gap:.9rem; }
  .hero-actions .btn{ flex:1 1 100%; }
  .problem-grid,
  .bento,
  .coach-grid{ grid-template-columns:1fr; }
  .bento-card--wide{ grid-column:span 1; grid-template-columns:1fr; padding:28px; }
  .bento-visual{ min-height:auto; }
  .bento-visual img{ width:min(220px,70%); }
  .tablist{ width:100%; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; border-radius:16px; }
  .tab{ flex:none; }
  /* Dashboard-Screenshots bleiben auf dem Handy lesbar: seitlich scrollbar */
  .tabpanel figure{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tabpanel figure img{ min-width:620px; }
  .cta-form{ grid-template-columns:1fr; }
  .cta-form .btn{ width:100%; }
  .footer-inner{ grid-template-columns:1fr; gap:28px; }
  .float-card--revenue{ top:auto; bottom:22%; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* =========================================================
   RECHTSTEXTE (Impressum, Datenschutz, AGB)
   ========================================================= */
.legal{ background:var(--paper); padding:calc(76px + clamp(48px,7vw,90px)) 0 clamp(64px,8vw,110px); }
.legal-inner{ max-width:48rem; margin-inline:auto; }
.legal .eyebrow{ margin-bottom:.9rem; }
.legal h1{ font-size:clamp(2.1rem,4vw,3rem); margin-bottom:1.2rem; }
.legal .updated{ color:var(--muted); font-size:.9rem; margin-bottom:3rem;
  padding-bottom:1.4rem; border-bottom:1px solid var(--line); }
.legal h2{
  font-size:1.35rem; letter-spacing:-.02em; line-height:1.3;
  margin:3rem 0 1rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.legal h2:first-of-type{ border-top:0; padding-top:0; }
.legal h3{ font-size:1.05rem; margin:2rem 0 .6rem; }
.legal p, .legal li{ color:#3F434C; font-size:1rem; }
.legal p{ margin-bottom:1rem; }
.legal ul, .legal ol{ margin:0 0 1.4rem; padding-left:1.3rem; }
.legal li{ margin-bottom:.5rem; }
.legal a{ color:var(--blue); overflow-wrap:anywhere; }
.legal a:hover{ text-decoration:underline; }
.legal strong{ color:var(--ink); }

/* Adressblock */
.legal address{
  font-style:normal; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 24px; margin-bottom:1.6rem;
  line-height:1.7;
}

/* Hinweiskasten */
.legal .callout{
  background:var(--blue-tint); border:1px solid #D3E0FF;
  border-radius:var(--radius); padding:20px 24px; margin:1.6rem 0;
}
.legal .callout p:last-child{ margin-bottom:0; }
.legal .callout strong{ color:var(--blue-600); }

/* Nummerierte Vertragsklauseln */
.clauses{ counter-reset:clause; list-style:none; padding-left:0; }
.clauses > li{
  counter-increment:clause; position:relative; padding-left:3rem; margin-bottom:1rem;
}
.clauses > li::before{
  content:counter(clause,decimal) "."; position:absolute; left:0; top:0;
  font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600;
}
.legal .back{ display:inline-block; margin-top:3rem; font-weight:600; color:var(--blue); }

@media (max-width:680px){
  .legal{ padding-top:calc(76px + 44px); }
}