/* ============================================================
   FONTS (lokal, kein Dritt-Load)
   ============================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-var.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-var.woff2') format('woff2');}

/* ============================================================
   TOKENS  (Hell-Variante, gleiche Geometrie wie v1-setrex)
   ============================================================ */
:root{
  --black:#0B0B12;            /* Ink: Text + die beiden dunklen Flaechen */
  --page:#F5F5F7;             /* Seiten-Grundton */
  --bg-color:#FFFFFF;         /* zweiter Flaechenton (Wechsel-Sektionen) */
  --card-bg:#FFFFFF;
  --investor-bg:#FFFFFF;
  --white:#ffffff;
  --grey:#5A5A66;             /* Fliesstext */
  --grey-soft:#82828E;        /* Labels, Rollen, Captions */
  --white-70:#5A5A66;
  --stroke-white:rgba(11,11,18,.10);
  --stroke-soft:rgba(11,11,18,.06);
  --shadow-card:0 1px 2px rgba(11,11,18,.04),0 14px 30px -22px rgba(11,11,18,.20);
  --star-1:rgba(11,11,18,.14);
  --star-2:rgba(11,11,18,.09);
  --accent:#6D49FF;
  --planet-size:1060px; --planet-top:180px;
  --grad:linear-gradient(90deg,#5170ff 0%,#8b5cf6 46%,#ff66c4 100%);
  --accent-hover:#9B7FFF;
  --label:#E4DCFF;
  --label-2:#DCD3FF;

  --h1-fs:62px; --h1-lh:70px;
  --h2-fs:52px; --h2-lh:60px;
  --h3-fs:42px; --h3-lh:50px;
  --h4-fs:32px; --h4-lh:40px;
  --h5-fs:24px; --h5-lh:36px;
  --h6-fs:20px; --h6-lh:30px;
  --p1-fs:18px; --p1-lh:28px;
  --p2-fs:16px; --p2-lh:24px;
  --p3-fs:14px; --p3-lh:24px;
  --tag1-fs:16px; --tag1-lh:22px;
  --tag2-fs:14px; --tag2-lh:22px;
  --btn-fs:18px; --btn-lh:28px;

  --ls6:-.045em; --ls3:-.03em; --ls2:-.02em; --ls1:-.01em;

  --pad160:160px; --pad100:100px; --pad60:60px;
  --mar160:160px; --mar80:80px; --mar60:60px;
  --r7:7px; --r12:12px; --r16:16px; --r20:20px; --r24:24px; --r30:30px; --r100:100px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background-color:var(--page);
  color:var(--black);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:var(--p2-fs);line-height:var(--p2-lh);font-weight:400;letter-spacing:var(--ls1);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.page-wrapper{position:relative;overflow-x:clip}

/* ---------- Typo-Skala ---------- */
h1,h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6,
.text-style-h1,.text-style-h3,.text-style-h4,.text-style-h5,.text-style-h6{
  font-family:'Manrope','Inter',sans-serif;font-weight:700;letter-spacing:var(--ls6);margin:0;
}
h1,.text-style-h1{font-size:var(--h1-fs);line-height:var(--h1-lh)}
h2,.h2{font-size:var(--h2-fs);line-height:var(--h2-lh)}
.h2-xl{font-size:calc(var(--h2-fs) * 1.18);line-height:calc(var(--h2-lh) * 1.14);letter-spacing:-.02em}
h3,.h3,.text-style-h3{font-size:var(--h3-fs);line-height:var(--h3-lh)}
h4,.h4,.text-style-h4{font-size:var(--h4-fs);line-height:var(--h4-lh)}
h5,.h5,.text-style-h5{font-size:var(--h5-fs);line-height:var(--h5-lh);letter-spacing:var(--ls2)}
h6,.h6,.text-style-h6{font-size:var(--h6-fs);line-height:var(--h6-lh);letter-spacing:var(--ls2)}
.paragraph-02{font-size:var(--p2-fs);line-height:var(--p2-lh);letter-spacing:var(--ls1)}
.paragraph-03{font-size:var(--p3-fs);line-height:var(--p3-lh);letter-spacing:var(--ls1)}
.tagline-01{font-size:var(--tag1-fs);line-height:var(--tag1-lh);font-weight:400}
.tagline-02{font-size:var(--tag2-fs);line-height:var(--tag2-lh);font-weight:500;letter-spacing:var(--ls2)}
.text-center{text-align:center}
.text-grey{color:var(--grey)}
.text-soft{color:var(--grey-soft)}
.text-white-70{color:var(--white-70)}
.text-on-accent{color:var(--white)}
.text-on-accent-70{color:rgba(255,255,255,.78)}
.subtitle{color:var(--grey);text-align:center}
.tagline{color:var(--grey)}

/* ---------- Layout ---------- */
.container{z-index:2;width:100%;max-width:1320px;margin:0 auto;padding:0 20px;position:relative}
.container.hero{height:100%}
.section-header-content{width:100%;max-width:660px;margin:0 auto}
.section-header-content.large{max-width:800px}
.section-header-content.left{margin-left:0;margin-right:0}
.section-header-text-wrap{display:flex;flex-flow:column;justify-content:flex-start;align-items:center;gap:20px}
.section-header-text-wrap.left{align-items:flex-start;max-width:554px}
.section-header-wrap.flex{display:flex;flex-flow:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.heading-wrap.small{max-width:560px}
.heading-wrap.medium{max-width:480px}
.subtitle-wrap.small{width:100%;max-width:603px;margin:0 auto}
.section-button-wrap{margin-top:40px}
.section-button-wrap.cta-button{display:flex;flex-flow:wrap;align-items:center;gap:20px}

/* ---------- Card-Outline (1.5px Kante wie im Original, jetzt dunkel) ---------- */
.card-outline{opacity:1;pointer-events:none;position:absolute;inset:0;border-radius:inherit;
  background-image:linear-gradient(rgba(11,11,18,.13),rgba(11,11,18,.07) 40% 60%,rgba(11,11,18,.11))}

/* ---------- Labels ---------- */
.label-wrap{background-color:var(--label);border-radius:4px;padding:4px 15px;display:inline-block}
.label-wrap.shadow{box-shadow:0 10px 24px -14px rgba(11,11,18,.35)}
.label-wrap.light-green{background-color:var(--label-2)}
.label-wrap .tagline-02{color:#150E33}

/* ---------- Badge ---------- */
.badge-wrap{border-radius:var(--r7);padding:1.5px;position:relative;overflow:hidden}
.badge-wrap.transparent{border:1px solid rgba(11,11,18,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background-color:rgba(255,255,255,.55)}
.badge-inner-wrap{z-index:1;border-radius:var(--r7);background-color:var(--card-bg);padding:8.5px 18.5px;position:relative;overflow:hidden}
.badge-wrap.transparent .badge-inner-wrap{background-color:transparent}
.badge-content{z-index:1;display:flex;justify-content:center;align-items:center;gap:10px;position:relative}
.badge-dot{background-color:var(--accent);border-radius:20px;flex:none;width:7px;height:7px;box-shadow:0 0 10px rgba(109,73,255,.55)}
.badge-inner-bg{position:absolute;inset:0;background-color:transparent}
.badge-outline{opacity:1;position:absolute;inset:0;background-image:linear-gradient(rgba(11,11,18,.13),rgba(11,11,18,.06) 40% 60%,rgba(11,11,18,.10))}
.badge-wrap.transparent .badge-outline{display:none}
.badge-text{color:var(--black)}

/* ---------- Buttons ---------- */
.primary-button-text{font-size:var(--btn-fs);line-height:var(--btn-lh);font-weight:600;letter-spacing:var(--ls3);
  font-family:'Manrope','Inter',sans-serif;white-space:nowrap}
.button-01,.button-02,.button-03{display:inline-flex;justify-content:center;align-items:center;border-radius:var(--r100);
  gap:10px;text-decoration:none;transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.button-01{background-color:var(--accent);color:var(--white);padding:15px 32px;
  background-image:linear-gradient(120deg,#6D49FF 0%,#8B5CF6 60%,#EC4899 145%)}
.button-01:hover{background-color:var(--accent-hover);
  background-image:linear-gradient(120deg,#7E5DFF 0%,#9B6FF8 60%,#F06AB4 145%)}
.button-02{border:1px solid rgba(11,11,18,.18);padding:15px 35px;gap:8px;color:var(--black);background-color:transparent}
.button-02:hover{background-color:rgba(11,11,18,.04);border-color:rgba(11,11,18,.34)}
.button-03{background-color:transparent;border:1px solid rgba(11,11,18,.20);color:var(--black);padding:14px 41px}
.button-03:hover{background-color:rgba(11,11,18,.04);border-color:rgba(11,11,18,.34)}
.button-03.nav{padding:10px 23px;background-color:var(--black);border-color:var(--black);color:var(--white)}
.button-03.nav:hover{background-color:#24242F;border-color:#24242F}
.button-03.nav .primary-button-text{font-size:16px;line-height:24px;letter-spacing:var(--ls2)}
.button-03.nav .btn-text-wrap{height:24px}
.btn-text-wrap{height:var(--btn-lh);overflow:hidden}
.btn-text-group{display:flex;flex-flow:column;transition:transform .45s var(--ease)}
.button-01:hover .btn-text-group,.button-02:hover .btn-text-group,.button-03:hover .btn-text-group{transform:translateY(-50%)}
.btn-arrow-wrap{width:24px;height:24px;overflow:hidden;flex:none}
.btn-arrow-group{display:flex;justify-content:flex-end;transition:transform .45s var(--ease)}
.button-01:hover .btn-arrow-group,.button-02:hover .btn-arrow-group{transform:translateX(-24px)}
.btn-arrow{width:24px;height:24px;flex:none}
.btn-arrow svg{width:24px;height:24px;display:block}

/* ============================================================
   NAVBAR — sticky, liegt ueber dem dunklen Hero jeder Seite
   ============================================================ */
.navbar{z-index:9999;width:100%;position:fixed;top:0;left:0;right:0;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease)}
.navbar.is-stuck{background-color:rgba(11,11,18,.88);border-bottom-color:rgba(255,255,255,.09);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.nav-container{z-index:2;width:100%;max-width:1320px;margin:0 auto;position:relative}
.navbar-wrap{z-index:10;padding-top:20px;padding-bottom:20px;position:relative;
  transition:padding .35s var(--ease)}
.navbar.is-stuck .navbar-wrap{padding-top:12px;padding-bottom:12px}
.navbar-desktop-wrap{z-index:10;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 20px}
.navbar-desktop-left{display:flex;align-items:center;gap:30px;flex:1}
.navbar-desktop-center{flex:1;display:flex;justify-content:center;align-items:center}
.navbar-desktop-right{display:flex;align-items:center;gap:30px;flex:1;justify-content:flex-end}
.navbar-brand{flex:none;display:inline-flex;align-items:center}
/* Wortmarke als Text */
.brand-mark{display:inline-flex;align-items:baseline;font-family:'Manrope','Inter',sans-serif;font-weight:800;
  font-size:26px;line-height:1;letter-spacing:-.045em;color:var(--black)}
.brand-mark .amp{color:var(--accent)}
.brand-mark .dot{color:var(--accent)}
.brand-sub{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:8.5px;line-height:1;
  letter-spacing:.16em;color:rgba(11,11,18,.45);margin-top:5px;text-transform:uppercase}
.brand-lock{display:inline-flex;flex-flow:column;align-items:flex-start}
.nav-left-menu-wrap{display:flex;align-items:center;gap:38px;position:relative;white-space:nowrap}
.nav-text{font-size:16px;line-height:24px;letter-spacing:var(--ls1);transition:color .3s}
.dropdown-toggle{display:inline-flex;align-items:center;gap:8px;font-size:16px;line-height:24px;
  letter-spacing:var(--ls1);transition:color .3s}
.dropdown-toggle svg{width:10px;height:6px;opacity:.6}
.navbar-mobile-wrap{display:none;padding:0 20px}
.navbar-top-wrap{display:flex;justify-content:space-between;align-items:center}
.navbar-menu-box{width:44px;height:44px;display:flex;flex-flow:column;justify-content:center;align-items:center;gap:5px;
  border-radius:var(--r7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.navbar-menu-box span{width:18px;height:1.5px;display:block}
.mobile-dropdown-wrap{overflow:hidden;max-height:0;transition:max-height .45s var(--ease)}
.mobile-dropdown-wrap.open{max-height:460px}
.mobile-dropdown-list{display:flex;flex-flow:column;padding:18px 0 8px}
.mobile-menu{padding:12px 0}

/* --- Nav-Farbwelt: immer hell auf dunklem Grund --- */
.navbar .brand-mark{color:var(--white)}
.navbar .brand-sub{color:rgba(255,255,255,.42)}
.navbar .nav-text,.navbar .dropdown-toggle{color:var(--white)}
.navbar .nav-menu:hover .nav-text,.navbar .dropdown-toggle:hover{color:var(--accent-hover)}
.navbar .nav-menu.current .nav-text{color:var(--accent-hover)}
.navbar .dropdown-toggle svg{opacity:.85}
.navbar .button-03.nav{background-color:var(--white);border-color:var(--white);color:var(--black)}
.navbar .button-03.nav:hover{background-color:#EAE4FF;border-color:#EAE4FF}
.navbar .navbar-menu-box{border:1px solid rgba(255,255,255,.18);background-color:rgba(255,255,255,.06)}
.navbar .navbar-menu-box span{background:var(--white)}
.navbar .mobile-menu{color:var(--white);border-bottom:1px solid rgba(255,255,255,.12)}
.navbar.is-stuck .mobile-dropdown-wrap.open{padding-bottom:6px}
/* offenes Mobile-Menue deckt den Hintergrund komplett ab */
.navbar.menu-open{background-color:var(--black);border-bottom-color:rgba(255,255,255,.09)}

/* ============================================================
   HERO
   ============================================================ */
.hero-v1{display:flex;flex-flow:column;height:100vh;min-height:860px;position:relative;overflow:hidden}
.hero-v1-wrap{flex:1;position:relative;z-index:3}
.hero-v1-main-wrap{padding-top:var(--pad100);padding-bottom:var(--pad100);display:flex;flex-flow:column;
  justify-content:center;align-items:stretch;width:100%;max-width:800px;height:100%;margin:0 auto}
.hero-badge-wrap{display:flex;justify-content:center;align-items:flex-end;margin-bottom:20px}
.hero-text-wrap{display:flex;flex-flow:column;align-items:center;gap:20px}
.hero-v1 h1{font-size:56px;line-height:62px;text-align:center}
.hero-subtitle{color:var(--grey);text-align:center;max-width:640px;margin:0 auto}
.hero-button-wrap{display:flex;flex-flow:wrap;justify-content:center;align-items:center;gap:20px;margin-top:40px}
.hero-micro{margin-top:24px;text-align:center;color:var(--grey);font-size:14px;line-height:22px}

/* Punkt-Raster (auf Hell die dezente Entsprechung zum Sternenfeld) */
.starfield{position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 8%,var(--star-1),transparent 60%),
    radial-gradient(1px 1px at 27% 22%,var(--star-2),transparent 60%),
    radial-gradient(1.6px 1.6px at 44% 5%,var(--star-1),transparent 60%),
    radial-gradient(1px 1px at 61% 16%,var(--star-2),transparent 60%),
    radial-gradient(1.3px 1.3px at 78% 10%,var(--star-1),transparent 60%),
    radial-gradient(1px 1px at 91% 27%,var(--star-2),transparent 60%),
    radial-gradient(1.5px 1.5px at 6% 41%,var(--star-1),transparent 60%),
    radial-gradient(1px 1px at 34% 52%,var(--star-2),transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 63%,var(--star-1),transparent 60%),
    radial-gradient(1px 1px at 70% 47%,var(--star-2),transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 58%,var(--star-1),transparent 60%),
    radial-gradient(1px 1px at 17% 71%,var(--star-2),transparent 60%),
    radial-gradient(1.3px 1.3px at 40% 84%,var(--star-1),transparent 60%),
    radial-gradient(1px 1px at 64% 91%,var(--star-2),transparent 60%),
    radial-gradient(1.4px 1.4px at 82% 79%,var(--star-1),transparent 60%),
    radial-gradient(1px 1px at 96% 88%,var(--star-2),transparent 60%);
  background-size:720px 560px;background-repeat:repeat;opacity:.75;
  animation:twinkle 7s ease-in-out infinite alternate}
.starfield._02{background-size:430px 380px;opacity:.4;animation-duration:11s;animation-delay:-3s}
@keyframes twinkle{0%{opacity:.4}100%{opacity:.8}}

/* Planet (CSS-Halbkugel) */
.planet-wrap{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.planet{position:absolute;left:50%;top:var(--planet-top);width:var(--planet-size);height:var(--planet-size);transform:translateX(-50%);
  border-radius:50%;
  background-image:
    radial-gradient(62% 30% at 50% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),
    radial-gradient(120% 92% at 50% -8%,rgba(109,73,255,.22) 0%,rgba(109,73,255,.15) 14%,
      rgba(109,73,255,.09) 30%,rgba(109,73,255,.04) 50%,rgba(109,73,255,0) 70%),
    radial-gradient(closest-side at 50% 50%,#ECE7FF 0%,#EFEBFF 40%,#F3F1FA 72%,#F5F5F7 100%);
  animation:planet-drift 34s ease-in-out infinite alternate}
.planet::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side at 50% 50%,transparent 0 96.4%,rgba(109,73,255,.42) 97.4%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 26%,transparent 52%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 26%,transparent 52%)}
.planet::after{content:'';position:absolute;inset:0;border-radius:50%;
  background-image:
    radial-gradient(120px 50px at 34% 10%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(180px 60px at 62% 7%,rgba(255,255,255,.45),transparent 72%),
    radial-gradient(96px 38px at 47% 17%,rgba(109,73,255,.10),transparent 70%),
    radial-gradient(150px 52px at 20% 22%,rgba(109,73,255,.08),transparent 74%),
    radial-gradient(140px 48px at 76% 19%,rgba(109,73,255,.08),transparent 74%),
    radial-gradient(210px 70px at 50% 29%,rgba(109,73,255,.05),transparent 76%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 28%,transparent 52%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 28%,transparent 52%)}
@keyframes planet-drift{0%{transform:translateX(-50%) translateY(0)}100%{transform:translateX(-50%) translateY(-26px)}}
.hero-glow{position:absolute;left:50%;top:120px;width:1300px;height:700px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 40%,rgba(109,73,255,.10),transparent 70%);pointer-events:none;z-index:1}
.hero-bottom-shadow{background-image:linear-gradient(rgba(245,245,247,0),var(--page));height:220px;
  position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none}

/* ============================================================
   BRANDS-MARQUEE
   ============================================================ */
.brands{padding-top:var(--pad60)}
.brands-main-wrap{width:100%;max-width:1085px;margin:48px auto 0}
.brands-marquee-wrap{display:flex;justify-content:flex-start;align-items:center;position:relative;overflow:hidden}
.brands-list{flex:none;display:flex;align-items:center;animation:marquee-left 38s linear infinite}
.brand-logo{flex:none;margin-right:100px;font-family:'Manrope','Inter',sans-serif;font-weight:600;font-size:22px;
  letter-spacing:var(--ls2);color:var(--grey-soft);white-space:nowrap}
.brands-marquee-wrap:hover .brands-list{animation-play-state:paused}
.brands-left-shadow{background-image:linear-gradient(90deg,var(--page) 5%,rgba(245,245,247,0));width:200px;height:140%;
  position:absolute;top:-20%;bottom:0;left:-1px;z-index:2}
.brands-right-shadow{background-image:linear-gradient(90deg,rgba(245,245,247,0),var(--page) 95%);width:200px;height:140%;
  position:absolute;top:-20%;bottom:0;right:-1px;z-index:2}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes marquee-right{from{transform:translateX(-100%)}to{transform:translateX(0)}}

/* ============================================================
   INTRO — Zitat-Highlight + Stats mit Zähler
   ============================================================ */
.intro{padding-top:var(--pad160)}
.intro-main-wrap{margin-top:var(--mar80);display:flex;gap:12px}
.intro-left{border-radius:var(--r24);width:100%;max-width:800px;padding:1.5px;position:relative;overflow:hidden}
.intro-left{box-shadow:var(--shadow-card)}
.intro-card{z-index:2;border-radius:var(--r24);background-color:var(--card-bg);padding:60px;position:relative;overflow:hidden;
  background-image:radial-gradient(80% 90% at 0% 0%,rgba(109,73,255,.10),transparent 70%)}
.intro-top-wrap{display:flex;flex-flow:column;align-items:flex-start;gap:30px}
.intro-bottom-wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:60px}
.intro-info-wrap{display:flex;justify-content:flex-start;align-items:center;gap:12px}
.intro-image{flex:none;width:58px;height:58px;border-radius:50%;object-fit:cover}
.intro-logo{font-size:24px;opacity:.85}
.intro-right{display:flex;flex-flow:column;gap:12px;width:100%;max-width:470px}
.intro-statistics-list{border-radius:var(--r24);flex:1;padding:1.5px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-card)}
.intro-statistics-card{z-index:2;display:flex;flex-flow:column;justify-content:space-between;gap:16px;
  border-radius:var(--r24);background-color:var(--card-bg);height:100%;padding:20px 26px;position:relative}
.intro-statistics-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.intro-statistics-bottom{max-width:387px}
.statistics-number-wrap{height:var(--h1-lh);display:flex;overflow:hidden;align-items:flex-start}
.reel-col{display:inline-block;overflow:hidden;vertical-align:top}
.reel-inner{display:flex;flex-flow:column;transform:translateY(0);will-change:transform}
.js .reel-inner{transition:transform 1.9s cubic-bezier(.22,.9,.16,1)}
.reel-d{flex:none;text-align:center}

/* ============================================================
   FEATURES
   ============================================================ */
.features-v1{padding-top:var(--pad160)}
.features-v1-main-wrap{margin-top:var(--mar80);display:flex;flex-flow:column;gap:22px}
.features-v1-card-01{border-radius:var(--r24);padding:1.5px;position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
.features-v1-card-01-inner{z-index:1;display:flex;justify-content:space-between;align-items:stretch;gap:48px;
  border-radius:var(--r24);background-color:var(--card-bg);padding-left:80px;position:relative;overflow:hidden}
.features-v1-card-01-left{display:flex;flex-flow:column;justify-content:center;align-items:flex-start;gap:20px;
  width:100%;max-width:392px;padding:24px 0}
.features-v1-text-wrap{display:flex;flex-flow:column;gap:20px}
.features-v1-card-01-right{display:flex;justify-content:flex-end;align-items:flex-end;width:100%;max-width:634px;margin-top:60px}
.features-v1-image-01{width:100%;filter:drop-shadow(0 18px 26px rgba(11,11,18,.14));border-top-left-radius:var(--r12)}
.features-v1-bottom-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.features-v1-card-02{border-radius:var(--r24);width:100%;padding:1.5px;position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
.features-v1-card-02-inner{z-index:1;display:flex;flex-flow:column;justify-content:space-between;gap:32px;
  border-radius:var(--r24);background-color:var(--card-bg);height:100%;position:relative;overflow:hidden}
.features-v1-card-02-inner._01{background-image:radial-gradient(58% 52% at 32% 24%,rgba(109,73,255,.12),transparent 70%)}
.features-v1-card-text-wrap{display:flex;flex-flow:column;gap:20px;padding:0 60px 60px}

/* Orbit-Visual (ersetzt das Lottie) */
.orbit{position:relative;height:470px;overflow:hidden}
.orbit-ring{position:absolute;left:34%;top:52%;transform:translate(-50%,-50%);border:1px solid rgba(11,11,18,.08);
  border-radius:50%}
.orbit-ring.r1{width:200px;height:200px}
.orbit-ring.r2{width:330px;height:330px}
.orbit-ring.r3{width:470px;height:470px}
.orbit-ring.r4{width:620px;height:620px}
.orbit-core{position:absolute;left:34%;top:52%;width:74px;height:74px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 46px rgba(109,73,255,.35)}
.orbit-core svg{width:32px;height:32px}
.orbit-node{position:absolute;width:52px;height:52px;border-radius:50%;background:#FFFFFF;
  border:1px solid rgba(11,11,18,.10);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px -14px rgba(11,11,18,.45);color:var(--black);font-family:'Manrope','Inter',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:-.02em}
.orbit-node.n1{left:16%;top:20%;animation:float-a 6s ease-in-out infinite alternate}
.orbit-node.n2{left:44%;top:13%;animation:float-b 7.5s ease-in-out infinite alternate}
.orbit-node.n3{left:57%;top:44%;animation:float-a 8s ease-in-out infinite alternate -2s}
.orbit-node.n4{left:24%;top:64%;animation:float-b 6.8s ease-in-out infinite alternate -1s}
.orbit-node.n5{left:48%;top:82%;animation:float-a 7.2s ease-in-out infinite alternate -3s}
@keyframes float-a{0%{transform:translateY(-8px)}100%{transform:translateY(10px)}}
@keyframes float-b{0%{transform:translateY(9px)}100%{transform:translateY(-9px)}}

/* Ghost-Zahl-Karte (ersetzt "24/7") */
.ghost-card{position:relative;height:470px;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;padding-top:170px}
.ghost-number{position:absolute;top:34%;left:0;right:0;transform:translateY(-50%);text-align:center;
  font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:270px;line-height:1;letter-spacing:-.07em;
  color:rgba(11,11,18,.06);white-space:nowrap}
.ghost-pill{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;background:var(--accent);
  color:#fff;border-radius:var(--r100);padding:16px 34px;font-family:'Manrope','Inter',sans-serif;font-weight:600;
  font-size:24px;letter-spacing:var(--ls2);box-shadow:0 18px 44px -20px rgba(109,73,255,.65)}
.ghost-pill svg{width:26px;height:26px}

/* ============================================================
   INVESTOR / PERSONEN-MARQUEE
   ============================================================ */
.investor{padding-top:var(--pad160)}
.investor-main-wrap{margin-top:var(--mar80);position:relative;overflow:hidden}
.investor-marquee{display:flex;flex-flow:column;gap:20px}
.investor-list-wrap{display:flex;justify-content:flex-start;align-items:center}
.investor-track{flex:none;display:flex;align-items:center;animation:marquee-left 52s linear infinite}
.investor-track.rev{animation:marquee-right 52s linear infinite}
.investor-main-wrap:hover .investor-track{animation-play-state:paused}
.investor-list{flex:none;margin-right:20px}
.investor-card{border-radius:26px;width:310px;padding:1.33px;position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
.investor-card-inner{z-index:1;display:flex;justify-content:flex-start;align-items:center;gap:20px;
  background-color:var(--investor-bg);border-radius:26px;padding:25px;position:relative}
.investor-image{flex:none;width:78px;height:78px;border-radius:50%;object-fit:cover}
.investor-info-wrap{min-width:0}
.investor-info-wrap .h6{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.investor-info-wrap .paragraph-02{font-size:14px;line-height:20px}
.investor-card-color{opacity:1;pointer-events:none;position:absolute;inset:0;border-radius:inherit;
  background-image:linear-gradient(rgba(11,11,18,.13),rgba(11,11,18,.07) 40% 60%,rgba(11,11,18,.11))}
.investor-side-shadow{position:absolute;top:0;bottom:0;width:180px;z-index:3;pointer-events:none}
.investor-side-shadow.l{left:0;background-image:linear-gradient(90deg,var(--page) 10%,rgba(245,245,247,0))}
.investor-side-shadow.r{right:0;background-image:linear-gradient(90deg,rgba(245,245,247,0),var(--page) 90%)}

/* ============================================================
   CAPABILITIES (6er-Grid)
   ============================================================ */
.capabilities{padding-top:var(--pad160);padding-bottom:var(--pad160)}
.capabilities-main-wrap{margin-top:var(--mar80);display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.capabilities-card{border-radius:var(--r24);padding:1.5px;position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
.capabilities-card-inner{z-index:1;border-radius:var(--r24);background-color:var(--card-bg);height:100%;padding:32px;
  position:relative;overflow:hidden;transition:background-color .4s var(--ease)}
.capabilities-icon svg{width:40px;height:40px;display:block}
.capabilities-text-wrap{display:flex;flex-flow:column;gap:16px;margin-top:46px}
.cap-num{font-family:'Manrope','Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;
  color:var(--accent);display:block;margin-bottom:4px}

/* ============================================================
   INTEGRATION
   ============================================================ */
.integration-v1{padding-top:var(--pad100);background-color:var(--bg-color);overflow:hidden}
.integration-v1-main-wrap{padding-top:var(--pad100);overflow:hidden}
.integration-marquee-wrap{border-top:1px solid var(--stroke-white);border-bottom:1px solid var(--stroke-white);
  border-left:1px solid var(--stroke-white);display:flex}
.integration-marquee-list{flex:none;display:flex;animation:marquee-left 34s linear infinite}
.integration-marquee-wrap:hover .integration-marquee-list{animation-play-state:paused}
.integration-marquee-item{border-right:1px solid var(--stroke-white);flex:none;display:flex;flex-flow:column;
  justify-content:center;align-items:center;gap:12px;width:150px;height:120px;transition:background-color .4s var(--ease)}
.integration-marquee-item:hover{background-color:rgba(109,73,255,.05)}
.tool-mark{width:44px;height:44px;border-radius:50%;border:1px solid rgba(109,73,255,.20);display:flex;
  align-items:center;justify-content:center;font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:-.02em;color:#fff;background-image:linear-gradient(150deg,#7D5CFF,#6D49FF)}
.tool-name{font-size:12px;line-height:16px;color:var(--grey);letter-spacing:0}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testimonial{padding-top:var(--pad160)}
.fit-cover{object-fit:cover;width:100%;height:100%}
.tst-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.tst-head .dim{color:var(--grey-soft)}
.tst-proof{display:flex;align-items:center;gap:12px;flex:none}
.ava-stack{display:flex;align-items:center}
.ava-stack img{width:32px;height:32px;border-radius:var(--r100);object-fit:cover;
  box-shadow:0 0 0 2px var(--page);margin-left:-10px}
.ava-stack img:first-child{margin-left:0}
.tst-stars{display:flex;gap:2px;margin-bottom:5px}
.tst-stars svg{width:12px;height:12px;fill:var(--accent)}
.tst-proof-label{font-size:var(--p3-fs);line-height:var(--p3-lh);color:var(--grey);letter-spacing:var(--ls1)}
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.tst{background:var(--card-bg);border:1px solid var(--stroke-white);border-radius:var(--r16);
  padding:22px;display:flex;flex-flow:column;justify-content:space-between;gap:32px;box-shadow:var(--shadow-card);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.tst:hover{border-color:rgba(109,73,255,.45);transform:translateY(-3px)}
.tst .qm{font-family:'Manrope','Inter',sans-serif;font-size:30px;font-weight:700;line-height:.55;color:var(--accent)}
.tst .tst-body{font-size:15px;line-height:1.5;letter-spacing:var(--ls1);color:var(--grey);margin-top:16px}
.tst .tst-body strong{color:var(--black);font-weight:600}
.tst .who{display:flex;align-items:center;gap:10px}
.tst .who img{width:34px;height:34px;border-radius:var(--r100);object-fit:cover;flex:none}
.tst .who .n{font-size:13px;font-weight:600;letter-spacing:var(--ls1);color:var(--black)}
.tst .who .r{font-size:12px;font-weight:500;letter-spacing:var(--ls1);color:var(--grey-soft);margin-top:2px}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-v2{padding-top:var(--pad160);padding-bottom:var(--pad160)}
.pricing-v2-main-wrap{margin-top:var(--mar80)}
.pricing-wrap{width:100%;max-width:1123px;margin:0 auto}
.switch-wrap{display:flex;justify-content:center;align-items:center;gap:12px}
.switch-note{color:var(--grey)}
.switch-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.pricing-main-wrap{margin-top:var(--mar60)}
.pricing-list.single{grid-template-columns:1fr;max-width:660px;margin:0 auto}
.pricing-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-radius:var(--r30);
  background-color:var(--bg-color);padding:20px 20px 20px 0;box-shadow:var(--shadow-card);
  background-image:radial-gradient(60% 70% at 0% 0%,rgba(109,73,255,.09),transparent 70%)}
.pricing-item{border-radius:var(--r12);padding:40px}
.pricing-item.popular{background:linear-gradient(135deg,#6D49FF 0%,#EC4899 100%);box-shadow:0 20px 44px -26px rgba(109,73,255,.85)}
.pricing-item:not(.popular) .plan-icon svg path{stroke:var(--black)}
.pricing-item:not(.popular) .pricing-features-icon svg circle{stroke:rgba(11,11,18,.22)}
.pricing-item:not(.popular) .pricing-features-icon svg path{stroke:var(--accent)}
.plan-info-wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;height:36px}
.plan-icon svg{width:34px;height:34px;display:block}
.plan-badge{border-radius:var(--r7);background-color:var(--white);padding:6px 14px;color:#150E33}
.plan-text-wrap{display:flex;flex-flow:column;justify-content:flex-start;align-items:flex-start;gap:12px;
  width:100%;max-width:402px;margin-top:24px}
.price-wrap{display:flex;justify-content:flex-start;align-items:flex-end;gap:10px;
  border-top:1px solid var(--stroke-white);border-bottom:1px solid var(--stroke-white);
  margin-top:64px;margin-bottom:48px;padding:18px 0}
.price-wrap._02{border-top-color:rgba(255,255,255,.28);border-bottom-color:rgba(255,255,255,.28)}
.duration{color:var(--white-70);padding-bottom:2px}
.duration.on-accent{color:rgba(255,255,255,.8)}
.pricing-features-wrap{display:flex;flex-flow:column;gap:12px;margin-top:24px}
.pricing-features-list{display:flex;justify-content:flex-start;align-items:center;gap:10px}
.pricing-features-icon{flex:none}
.pricing-features-icon svg{width:20px;height:20px;display:block}
.pricing-button-wrap{margin-top:64px}
.pricing-button-wrap .button-02,.pricing-button-wrap .button-03{width:100%}
/* Start-Termin direkt unter dem CTA, auf der Akzent-Karte in Weiss */
.pricing-start{margin-top:14px;text-align:center;font-size:13px;line-height:19px;
  letter-spacing:var(--ls1);color:var(--grey)}
.pricing-item.popular .pricing-start{color:rgba(255,255,255,.75)}
.button-03.on-accent{background-color:var(--white);border-color:var(--white);color:var(--black)}
.button-03.on-accent:hover{background-color:#F0ECFF;border-color:#F0ECFF}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding-top:var(--pad100);padding-bottom:var(--pad100);background-color:var(--bg-color)}
.faq-main-wrap{margin-top:var(--mar80);width:100%;max-width:980px;margin-left:auto;margin-right:auto}
.faq-list{display:flex;flex-flow:column;gap:20px}
.faq-item{border:1px solid var(--stroke-white);border-radius:var(--r7);background-color:transparent;
  padding:22px 30px 22px 40px;display:block;width:100%;text-align:left;
  transition:border-color .35s var(--ease),background-color .35s var(--ease)}
.faq-item:hover{border-color:rgba(11,11,18,.24)}
.faq-item.is-open{background-color:rgba(109,73,255,.04);border-color:rgba(109,73,255,.28)}
.faq-question-wrap{display:flex;justify-content:space-between;align-items:center;gap:10px}
.faq-question{color:var(--black)}
.faq-arrow{flex:none;width:16px;height:10px;display:block;transition:transform .4s var(--ease);color:var(--grey-soft)}
.faq-arrow svg{width:16px;height:10px;display:block}
.faq-item.is-open .faq-arrow{transform:rotate(180deg);color:var(--accent)}
.faq-answer-wrap{width:100%;max-width:764px;display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease)}
.faq-item.is-open .faq-answer-wrap{grid-template-rows:1fr}
.faq-answer-inner{overflow:hidden;min-height:0}
.faq-answer{color:var(--grey);padding-top:16px}
.no-js .faq-answer-wrap{grid-template-rows:1fr}

/* ============================================================
   BLOG
   ============================================================ */
.blog-v2{padding-top:var(--pad160)}
.blog-v2-main-wrap{margin-top:var(--mar80)}
.blog-collection-list{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:20px;row-gap:40px}
/* Gestapelte Variante (Danke-Seite): eine Karte pro Zeile, schmaler gesetzt (2026-09-02) */
.blog-collection-list.stacked{grid-template-columns:1fr;max-width:620px;margin-inline:auto;row-gap:48px}
.blog-collection-list.stacked .blog-image-wrap{height:260px}
.blog-link{color:var(--black);width:100%;display:block}
.blog-image-wrap{border-radius:var(--r12);width:100%;height:352px;overflow:hidden;position:relative;
  box-shadow:inset 0 0 0 1px rgba(11,11,18,.07)}
.blog-thumb{width:100%;height:100%;position:relative;overflow:hidden;transition:transform .6s var(--ease)}
.blog-link:hover .blog-thumb{transform:scale(1.04)}
/* Newsletter-Cover: gemalte Gouache-Motive statt Platzhalter-Gradienten */
.blog-thumb{background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:#0B0B12}
.blog-thumb._01{background-image:url('img/nl-cover-datenschutz.jpg')}
.blog-thumb._02{background-image:url('img/nl-cover-hebel.jpg')}
.blog-thumb._03{background-image:url('img/nl-cover-surfen.jpg')}
.blog-thumb-grid{display:none}
.blog-thumb-mark{position:absolute;left:24px;bottom:20px;font-family:'Manrope','Inter',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.1em;color:rgba(255,255,255,.62)}
.blog-info-wrap{display:flex;flex-flow:wrap;justify-content:flex-start;align-items:center;gap:10px;margin-top:20px}
.blog-date-wrap,.writer-wrap{display:flex;justify-content:flex-start;align-items:center;gap:10px;
  border-radius:var(--r100);background-color:var(--bg-color);border:1px solid var(--stroke-soft);padding:2px 15px}
.writer-wrap{padding:2px 15px 2px 5px}
.writer-image{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.blog-info{color:var(--grey)}
.blog-date-wrap svg{width:16px;height:16px;flex:none;color:var(--grey-soft)}
.blog-title-wrap{margin-top:16px}
.blog-link .text-style-h6{transition:color .3s}
.blog-link:hover .text-style-h6{color:var(--accent)}
.section-button-right{flex:none}

/* ============================================================
   CTA  — die eine dunkle Akzent-Flaeche der Seite
   ============================================================ */
.cta-v1{margin-top:var(--mar160);border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);
  position:relative;overflow:hidden;background-color:var(--black);color:var(--white);
  --star-1:rgba(255,255,255,.7);--star-2:rgba(255,255,255,.42);
  background-image:radial-gradient(60% 90% at 78% 40%,rgba(109,73,255,.24),transparent 72%),
                   radial-gradient(70% 100% at 8% 100%,rgba(109,73,255,.14),transparent 70%)}
.cta-v1 .badge-wrap .badge-inner-wrap{background-color:rgba(255,255,255,.06)}
.cta-v1 .badge-inner-bg{background-color:rgba(255,255,255,.012)}
.cta-v1 .badge-outline{background-image:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,0) 40% 60%,rgba(255,255,255,.1));opacity:.35}
.cta-v1 .badge-text{color:var(--white)}
.cta-v1 .button-03{background-color:transparent;border-color:rgba(255,255,255,.28);color:var(--white)}
.cta-v1 .button-03:hover{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}
.cta-v1-wrap{display:flex;justify-content:space-between;align-items:flex-end}
.cta-v1-image-wrap{display:flex;flex-flow:column;justify-content:flex-start;align-items:center;width:846px;
  max-width:100%;height:480px;margin-left:-350px;position:relative}
.cta-v1-image-01,.cta-v1-image-02{border-radius:var(--r7);filter:drop-shadow(0 27px 27px rgba(0,0,0,.35));width:100%;
  border:1px solid rgba(255,255,255,.08)}
.cta-v1-image-01{z-index:2;position:relative;transform:rotate(-4.86deg);margin-top:70px;filter:drop-shadow(0 27px 27px rgba(0,0,0,.45)) brightness(.94)}
.cta-v1-image-02{position:absolute;top:0;transform:rotate(4.86deg);opacity:.55;filter:drop-shadow(0 27px 27px rgba(0,0,0,.45)) brightness(.8) saturate(.75)}
.cta-content-wrap{padding-top:var(--pad100);padding-bottom:var(--pad100);display:flex;flex-flow:column;
  justify-content:flex-start;align-items:flex-start;width:605px;max-width:100%;margin-left:60px}
/* CTA ohne Foto (Danke-Seite): zentriert, ohne linken Versatz (2026-09-02) */
.cta-v1-wrap.solo{justify-content:center}
.cta-v1-wrap.solo .cta-content-wrap{align-items:center;text-align:center;margin-left:0;width:720px}
.cta-v1-wrap.solo .cta-text-wrap{align-items:center}
.cta-v1-wrap.solo .cta-button{justify-content:center}
.cta-text-wrap{display:flex;flex-flow:column;justify-content:flex-start;align-items:flex-start;gap:20px;margin-top:20px}
.cta-v1-heading{font-size:48px;line-height:54px}
.cta-subtitle{color:rgba(255,255,255,.72)}
.cta-micro{margin-top:20px;color:rgba(255,255,255,.45);font-size:14px;line-height:22px}

/* ============================================================
   FOOTER  — bleibt dunkel
   ============================================================ */
.footer{padding-top:80px;padding-bottom:40px;background-color:var(--black);color:var(--white)}
.footer .brand-mark{color:var(--white)}
.footer .brand-sub{color:rgba(255,255,255,.45)}
.footer .text-grey{color:rgba(255,255,255,.62)}
.footer-wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.footer-left{display:flex;flex-flow:column;justify-content:flex-start;align-items:flex-start;gap:16px;
  width:100%;max-width:210px}

.footer-right{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;width:100%;max-width:818px}
.footer-column.info{display:flex;flex-flow:column;justify-content:flex-start;align-items:flex-start;gap:60px}
.footer-menu-list{display:flex;flex-flow:column;justify-content:flex-start;align-items:flex-start;gap:16px;margin-top:16px}
.footer-contact-list{display:flex;flex-flow:column;justify-content:flex-start;align-items:flex-start;gap:16px}
.footer-link{color:rgba(255,255,255,.68);transition:color .3s}
.footer-link:hover{color:var(--accent-hover)}
.copyright-wrap{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-top:1px solid rgba(255,255,255,.12);margin-top:80px;padding-top:30px}
.copyright-text{color:rgba(255,255,255,.55)}

/* ============================================================
   REVEALS (nur mit JS)
   ============================================================ */
/* will-change haelt die Compositing-Ebene ueber die ganze Blende stabil.
   Ohne das legt der Browser sie mittendrin neu an, und Gradient-Text mit
   background-clip:text kann dabei kurz als voller Kasten gemalt werden. */
.js .reveal,.js .hero-stagger{opacity:0;transform:translate3d(0,50px,0);
  will-change:opacity,transform;
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
/* Gradient-Text bekommt eine eigene Ebene, damit er nicht mit der
   Transparenzgruppe des Elternteils verrechnet wird. */
.grad,.grad2,.h2 .grad{isolation:isolate}
.js .reveal.is-in,.js .hero-stagger.is-in{opacity:1;transform:translate3d(0,0,0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width:1200px){
  .features-v1-card-01-inner{padding-left:48px}
  .cta-v1-image-wrap{margin-left:-420px}
}
@media screen and (max-width:991px){
  :root{
    --h1-fs:52px;--h1-lh:60px;--h2-fs:42px;--h2-lh:50px;--h3-fs:34px;--h3-lh:42px;
    --h4-fs:28px;--h4-lh:36px;--h5-fs:22px;--h5-lh:30px;--h6-fs:18px;--h6-lh:28px;
    --pad160:100px;--pad100:72px;--pad60:48px;
    --mar160:100px;--mar80:40px;--mar60:40px;
  }
  .navbar-desktop-wrap{display:none}
  .navbar-mobile-wrap{display:block;position:relative}
  .navbar-wrap{padding-top:18px;padding-bottom:0}
  .hero-v1{min-height:auto;height:auto}
  .hero-v1 h1{font-size:44px;line-height:50px}
  .hero-v1-main-wrap{padding-top:120px;padding-bottom:140px}
  :root{--planet-size:1500px;--planet-top:100px}
  .brands-main-wrap{margin-top:40px}
  .brand-logo{margin-right:80px;font-size:20px}
  .brands-left-shadow,.brands-right-shadow{width:150px}
  .intro-main-wrap{flex-flow:column}
  .intro-left{max-width:100%}
  .intro-card{padding:32px}
  .intro-top-wrap{gap:24px}
  .intro-bottom-wrap{margin-top:40px}
  .intro-right{flex-flow:row;max-width:100%}
  .intro-statistics-card{justify-content:flex-start;gap:0}
  .intro-statistics-top{flex-flow:column;align-items:flex-start;gap:20px}
  .intro-statistics-bottom{margin-top:40px}
  .features-v1-main-wrap{gap:20px}
  .features-v1-card-01-inner{flex-flow:column;align-items:flex-end;padding-top:48px;padding-left:32px;gap:40px}
  .features-v1-card-01-left{max-width:100%;padding:0 40px 0 0}
  .features-v1-card-01-right{max-width:100%;margin-top:0}
  .features-v1-bottom-wrap{gap:20px}
  .features-v1-card-text-wrap{padding:0 32px 32px;gap:18px}
  .orbit,.ghost-card{height:380px}
  .ghost-number{font-size:180px}
  .investor-card{border-radius:24px;width:300px}
  .investor-card-inner{border-radius:24px;padding:22px}
  .investor-image{width:64px;height:64px}
  .capabilities-main-wrap{grid-template-columns:1fr 1fr}
  .capabilities-card-inner{padding:28px}
  .capabilities-text-wrap{margin-top:32px}
  .integration-marquee-item{width:140px}
  .tst-grid{grid-template-columns:1fr 1fr}
  .tst-head{flex-flow:column;align-items:flex-start;gap:20px}
  .pricing-list{grid-template-columns:1fr;padding:0 20px 20px}
  .pricing-item{padding:32px 24px}
  .price-wrap{margin-top:32px;margin-bottom:32px;padding:16px 0}
  .pricing-button-wrap{margin-top:32px}
  .faq-item{padding-left:28px;padding-right:28px}
  .blog-collection-list{grid-template-columns:1fr 1fr;row-gap:32px}
  .blog-image-wrap{height:300px}
  .cta-v1-wrap{flex-flow:column-reverse wrap;align-items:center}
  .cta-content-wrap{align-items:center;margin-left:0;text-align:center}
  .cta-v1-heading{font-size:40px;line-height:46px;text-align:center}
  .cta-v1-image-wrap{width:100%;height:300px;margin-left:0}
  .cta-v1-image-01,.cta-v1-image-02{width:78%}
  .section-button-wrap.cta-button{justify-content:center}
  .footer-wrap{flex-flow:column}
  .footer-left{max-width:100%}
  .footer-right{max-width:100%;gap:24px}
  .footer-column.info{gap:40px}
  .copyright-wrap{margin-top:60px;padding-top:28px}
}
@media screen and (max-width:767px){
  :root{
    --h1-fs:44px;--h1-lh:52px;--h2-fs:34px;--h2-lh:42px;--h3-fs:28px;--h3-lh:36px;
    --h4-fs:24px;--h4-lh:32px;--h5-fs:20px;--h5-lh:28px;
    --pad160:80px;--pad100:60px;--pad60:40px;--mar160:80px;--mar80:32px;--mar60:32px;
  }
  .hero-v1 h1{font-size:36px;line-height:42px}
  :root{--planet-size:1200px;--planet-top:100px}
  .features-v1-bottom-wrap{grid-template-columns:1fr}
  .capabilities-main-wrap{grid-template-columns:1fr}
  .tst-grid{grid-template-columns:1fr}
  .blog-collection-list{grid-template-columns:1fr;row-gap:28px}
  .blog-image-wrap{height:260px}
  .footer-right{grid-template-columns:1fr 1fr}
  .copyright-wrap{flex-flow:column;align-items:flex-start}
  .intro-right{flex-flow:column}
  .intro-logo{display:none}
  .testimonial-content-wrap{padding:28px 24px}
  .orbit,.ghost-card{height:320px}
  .ghost-number{font-size:140px}
}
@media screen and (max-width:479px){
  :root{--h1-fs:38px;--h1-lh:46px;--h2-fs:30px;--h2-lh:38px;--h5-fs:18px;--h5-lh:28px;--h6-fs:16px;--h6-lh:24px}
  .container{padding:0 16px}
  .hero-v1 h1{font-size:30px;line-height:36px}
  :root{--planet-size:900px;--planet-top:90px}
  .hero-button-wrap{gap:12px}
  .hero-button-wrap .button-01,.hero-button-wrap .button-03{width:100%}
  .intro-card{padding:24px 20px}
  .intro-image{width:48px;height:48px}
  .intro-statistics-card{padding-left:20px;padding-right:20px}
  .features-v1-card-01-inner{padding-top:28px;padding-left:20px;gap:32px}
  .features-v1-card-01-left{padding-right:20px}
  .features-v1-card-text-wrap{padding:0 20px 24px;gap:12px}
  .capabilities-card-inner{padding:24px 20px}
  .integration-marquee-item{width:110px;height:96px}
  .faq-item{padding:18px 20px}
  .pricing-item{padding:24px 20px}
  /* Preis-Karte muss auf schmalen Screens schrumpfen koennen. Der Button-Text
     "Kostenlosen Automation-Check buchen" stand auf nowrap und erzwang eine
     Mindestbreite von 411px, die der overflow-clip des page-wrapper abgeschnitten hat. */
  .pricing-list,.pricing-item{min-width:0}
  .pricing-button-wrap{min-width:0}
  .pricing-button-wrap .button-03{width:100%;padding-left:18px;padding-right:18px}
  .pricing-button-wrap .primary-button-text{white-space:normal;text-align:center}
  .pricing-button-wrap .btn-text-group .primary-button-text+.primary-button-text{display:none}
  /* Der Wrap begrenzt die Hoehe auf eine Zeile (fuer die Hover-Rolle). Auf Touch gibt es
     keinen Hover, also darf der Text hier zweizeilig laufen, ohne abgeschnitten zu werden. */
  .pricing-button-wrap .btn-text-wrap{height:auto;overflow:visible}
  /* Preis darf nie umbrechen: "3.000" und das Euro-Zeichen bleiben zusammen. */
  .price-wrap .text-style-h3{white-space:nowrap}
  .price-wrap{flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  /* Icon und Badge nebeneinander sprengen die schmale Karte: untereinander stapeln.
     Die feste Hoehe von 36px muss dafuer fallen. */
  .plan-info-wrap{flex-direction:column;align-items:flex-start;height:auto;gap:14px}
  .footer-right{grid-template-columns:1fr}
  .cta-v1-heading{font-size:30px;line-height:36px}
  .brand-logo{margin-right:48px;font-size:18px}
  .primary-button-text{font-size:16px;line-height:24px}
  .btn-text-wrap{height:24px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .js .reveal,.js .hero-stagger{opacity:1!important;transform:none!important;transition:none!important}
  .js .reel-inner{transition:none!important}
  html{scroll-behavior:auto}
}

/* ===== Dunkler Hero (Klammer oben), aus der dunklen Version zurueckgeholt ===== */
/* ============================================================
   HERO
   ============================================================ */
.hero-v1{display:flex;flex-flow:column;height:100vh;min-height:860px;position:relative;overflow:hidden}
.hero-v1-wrap{flex:1;position:relative;z-index:3}
.hero-v1-main-wrap{padding-top:var(--pad100);padding-bottom:var(--pad100);display:flex;flex-flow:column;
  justify-content:center;align-items:stretch;width:100%;max-width:800px;height:100%;margin:0 auto}
.hero-v1 h1{font-size:56px;line-height:62px;text-align:center}
/* ============================================================
   HYBRID — HERO IST DIE DUNKLE KLAMMER OBEN
   (Regeln aus v1-setrex, hier auf .dark-hero gescopet)
   ============================================================ */
.dark-hero{background-color:var(--black);color:var(--white);
  --star-1:rgba(255,255,255,.72);--star-2:rgba(255,255,255,.45)}
.dark-hero .starfield{opacity:.9}
.dark-hero .starfield._02{opacity:.5}
.dark-hero h1{color:var(--white)}
.dark-hero .hero-subtitle{color:rgba(210,210,214,.82)}
.dark-hero .hero-micro{color:rgba(255,255,255,.46)}
.dark-hero .planet{background-image:
    radial-gradient(62% 30% at 50% 0%,rgba(255,255,255,.30),rgba(255,255,255,0) 70%),
    radial-gradient(120% 92% at 50% -8%,rgba(168,152,250,.30) 0%,rgba(96,84,164,.17) 14%,
      rgba(40,35,74,.12) 30%,rgba(16,15,32,.07) 50%,rgba(11,11,18,0) 70%),
    radial-gradient(closest-side at 50% 50%,#141327 0%,#101024 40%,#0C0C16 72%,#0B0B12 100%)}
.dark-hero .planet::before{
  background:conic-gradient(from 270deg at 50% 50%,#5170ff 0deg,#8b5cf6 62deg,#c084fc 108deg,
    #ff66c4 152deg,#ff66c4 208deg,#c084fc 252deg,#8b5cf6 298deg,#5170ff 360deg);
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,transparent 0 96.4%,#000 97.4%,transparent 100%),
                     linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 26%,transparent 52%);
  mask-image:radial-gradient(closest-side at 50% 50%,transparent 0 96.4%,#000 97.4%,transparent 100%),
             linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 26%,transparent 52%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  filter:saturate(1.15);animation:rim-glow 9s ease-in-out infinite alternate}
@keyframes rim-glow{0%{opacity:.62;filter:saturate(1) blur(0)}100%{opacity:1;filter:saturate(1.4) blur(.3px)}}
.dark-hero .planet::after{background-image:
    radial-gradient(120px 50px at 34% 10%,rgba(226,220,255,.24),transparent 70%),
    radial-gradient(180px 60px at 62% 7%,rgba(214,206,255,.18),transparent 72%),
    radial-gradient(96px 38px at 47% 17%,rgba(180,168,240,.15),transparent 70%),
    radial-gradient(150px 52px at 20% 22%,rgba(160,148,224,.11),transparent 74%),
    radial-gradient(140px 48px at 76% 19%,rgba(170,158,232,.11),transparent 74%),
    radial-gradient(210px 70px at 50% 29%,rgba(120,110,180,.08),transparent 76%)}
.dark-hero .hero-glow{background:radial-gradient(50% 50% at 50% 40%,rgba(109,73,255,.16),transparent 70%)}
/* Kante zur hellen Folge-Sektion: bis aufs eigene Dunkel ausblenden, dann sauberer Schnitt */
.dark-hero .hero-bottom-shadow{background-image:linear-gradient(rgba(11,11,18,0),var(--black) 86%,var(--black) 100%)}
.dark-hero .button-03{background-color:transparent;border-color:rgba(255,255,255,.30);color:var(--white)}
.dark-hero .button-03:hover{background-color:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5)}
.dark-hero .badge-wrap.transparent{border-color:rgba(255,255,255,.16);background-color:rgba(255,255,255,.05)}
.dark-hero .badge-text{color:var(--white)}
.dark-hero .hero-micro{margin-top:16px}
@media screen and (max-width:991px){
  .hero-v1{min-height:auto;height:auto}
  .hero-v1 h1{font-size:44px;line-height:50px}
  .hero-v1-main-wrap{padding-top:120px;padding-bottom:140px}
}
@media screen and (max-width:767px){
  .hero-v1 h1{font-size:36px;line-height:42px}
}
@media screen and (max-width:479px){
  .hero-v1 h1{font-size:30px;line-height:36px}
}

/* ============================================================
   PAGE-HERO — kompakte dunkle Klammer fuer Unterseiten
   ============================================================ */
.page-hero{position:relative;overflow:hidden;display:flex;flex-flow:column;justify-content:flex-end;
  min-height:680px;padding-top:190px;padding-bottom:130px}
.page-hero{--planet-size:1420px;--planet-top:520px}
.page-hero .hero-glow{top:60px}
.page-hero .hero-bottom-shadow{height:160px}
.page-hero-inner{position:relative;z-index:3;width:100%;max-width:820px;margin:0 auto;text-align:center;
  display:flex;flex-flow:column;align-items:center;gap:22px}
.page-hero-inner.left{margin-left:0;text-align:left;align-items:flex-start}
.page-hero h1{color:var(--white);font-size:52px;line-height:60px}
.page-hero .page-hero-sub{color:rgba(210,210,214,.82);max-width:620px}
.page-hero .page-hero-micro{color:rgba(255,255,255,.46);font-size:var(--p3-fs);line-height:var(--p3-lh)}
.page-hero .section-button-wrap{margin-top:10px;display:flex;flex-flow:wrap;gap:16px;justify-content:center}
.page-hero-inner.left .section-button-wrap{justify-content:flex-start}

/* ============================================================
   OFFERS — die drei Kernangebote (Home)
   ============================================================ */
.offers{padding-top:var(--pad160)}
.offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.offer{position:relative;border-radius:var(--r24);background-color:var(--card-bg);box-shadow:var(--shadow-card);
  display:flex;flex-flow:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.offer:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(11,11,18,.05),0 26px 48px -26px rgba(11,11,18,.28)}
.offer-inner{padding:32px;display:flex;flex-flow:column;gap:20px;height:100%}
.offer-icon{width:56px;height:56px;border-radius:var(--r16);background-color:rgba(109,73,255,.10);
  display:flex;justify-content:center;align-items:center;flex:none}
.offer-icon svg{width:28px;height:28px}
.offer-kicker{font-size:var(--tag2-fs);line-height:var(--tag2-lh);font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;color:var(--accent)}
.offer h3{font-size:26px;line-height:34px;letter-spacing:var(--ls3)}
.offer-body{color:var(--grey);font-size:var(--p2-fs);line-height:var(--p2-lh)}
.offer-list{display:flex;flex-flow:column;gap:10px;margin-top:2px}
.offer-list li{list-style:none;display:flex;align-items:flex-start;gap:10px;color:var(--grey);
  font-size:var(--p3-fs);line-height:22px}
.offer-list li::before{content:'';flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;
  background:rgba(109,73,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.6 2.6L14.4 7' fill='none' stroke='%236D49FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.offer-foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:8px;color:var(--accent);
  font-family:'Manrope','Inter',sans-serif;font-weight:600;font-size:16px;letter-spacing:var(--ls2)}
.offer-foot svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.offer:hover .offer-foot svg{transform:translateX(4px)}
.offer.is-primary .offer-inner{background-color:var(--black);border-radius:var(--r24);color:var(--white)}
.offer.is-primary h3{color:var(--white)}
.offer.is-primary .offer-body,.offer.is-primary .offer-list li{color:rgba(255,255,255,.72)}
.offer.is-primary .offer-icon{background-color:rgba(255,255,255,.10)}
.offer.is-primary .offer-kicker{color:var(--accent-hover)}
.offer.is-primary .offer-foot{color:var(--accent-hover)}
.offer.is-primary .offer-list li::before{background-color:rgba(255,255,255,.14)}

/* ============================================================
   PROOF-BAND — drei harte Zahlen nebeneinander
   ============================================================ */
.proof-band{margin-top:var(--mar160)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.proof-cell{position:relative;border-radius:var(--r20);background-color:var(--card-bg);box-shadow:var(--shadow-card);
  padding:36px 32px;display:flex;flex-flow:column;gap:12px}
.proof-num{font-family:'Manrope','Inter',sans-serif;font-weight:700;letter-spacing:var(--ls6);
  font-size:56px;line-height:64px;color:var(--black);display:flex;align-items:baseline}
.proof-label{font-size:var(--p2-fs);line-height:var(--p2-lh);font-weight:600}
.proof-note{color:var(--grey);font-size:var(--p3-fs);line-height:22px}

/* ============================================================
   SPLIT — Foto neben Text (Ueber mich, Keynotes)
   ============================================================ */
.split{padding-top:var(--pad160)}
.split-inner{display:flex;align-items:center;gap:72px}
.split-inner.rev{flex-direction:row-reverse}
.split-media{flex:none;width:44%;position:relative}
.split-media img{width:100%;border-radius:var(--r24);box-shadow:0 30px 60px -34px rgba(11,11,18,.42)}
.split-media .media-tag{position:absolute;left:-20px;bottom:28px;background-color:var(--black);color:var(--white);
  border-radius:var(--r16);padding:14px 20px;box-shadow:0 20px 40px -22px rgba(11,11,18,.5);max-width:230px}
.split-media .media-tag .t{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:20px;line-height:26px;
  letter-spacing:var(--ls3)}
.split-media .media-tag .s{color:rgba(255,255,255,.62);font-size:var(--p3-fs);line-height:20px;margin-top:4px}
.split-body{flex:1;display:flex;flex-flow:column;gap:22px}
.split-body p{color:var(--grey);font-size:var(--p1-fs);line-height:var(--p1-lh)}
.split-body p strong{color:var(--black);font-weight:600}

/* ============================================================
   LOGO-STRIP — Konzern-Stationen
   ============================================================ */
.logo-strip{padding-top:var(--pad100)}
.logo-strip-inner{border-top:1px solid var(--stroke-white);border-bottom:1px solid var(--stroke-white);
  padding:36px 0;display:flex;align-items:center;justify-content:center;gap:64px;flex-flow:wrap}
.logo-strip-label{color:var(--grey-soft);font-size:var(--p3-fs);line-height:22px}
.logo-strip img{height:26px;width:auto;opacity:.55;filter:grayscale(1);transition:opacity .3s}
.logo-strip img.wide{height:20px}
.logo-strip img:hover{opacity:.9}

/* ============================================================
   TIMELINE — Stationen
   ============================================================ */
.timeline{padding-top:var(--pad160)}
.timeline-list{margin-top:56px;display:flex;flex-flow:column}
.station{display:flex;gap:40px;padding:32px 0;border-top:1px solid var(--stroke-white);position:relative}
.station:last-child{border-bottom:1px solid var(--stroke-white)}
.station-when{flex:none;width:190px;color:var(--grey-soft);font-size:var(--p2-fs);line-height:var(--p2-lh);
  font-weight:500;padding-top:4px}
.station-body{flex:1;display:flex;flex-flow:column;gap:10px}
.station-body h4{font-size:24px;line-height:32px;letter-spacing:var(--ls3)}
.station-role{color:var(--accent);font-size:var(--p3-fs);line-height:22px;font-weight:600}
.station-body p{color:var(--grey);font-size:var(--p2-fs);line-height:var(--p2-lh);max-width:620px}
.station.now .station-when{color:var(--accent)}

/* ============================================================
   PRINCIPLES — nummerierte Prinzipien
   ============================================================ */
.principles{padding-top:var(--pad160)}
.principles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:56px}
.principle{position:relative;border-radius:var(--r20);background-color:var(--card-bg);box-shadow:var(--shadow-card);
  padding:32px;display:flex;flex-flow:column;gap:14px}
.principle .p-num{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;
  color:var(--accent)}
.principle h4{font-size:22px;line-height:30px;letter-spacing:var(--ls3)}
.principle p{color:var(--grey);font-size:var(--p2-fs);line-height:var(--p2-lh)}

/* ============================================================
   NEWSLETTER — Stats, Ausgaben, Anmeldung
   ============================================================ */
.nl-stats{padding-top:var(--pad100)}
.nl-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.nl-stat{border-radius:var(--r20);background-color:var(--card-bg);box-shadow:var(--shadow-card);padding:28px;
  display:flex;flex-flow:column;gap:6px}
.nl-stat .v{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:42px;line-height:50px;
  letter-spacing:var(--ls6);display:flex;align-items:baseline}
.nl-stat .k{font-size:var(--p2-fs);line-height:var(--p2-lh);font-weight:600}
.nl-stat .n{color:var(--grey-soft);font-size:var(--p3-fs);line-height:20px}
.nl-issues{padding-top:var(--pad160)}
.nl-issue-list{margin-top:48px;display:flex;flex-flow:column}
.nl-issue{display:flex;align-items:center;gap:28px;padding:24px 4px;border-top:1px solid var(--stroke-white);
  transition:padding-left .3s var(--ease)}
.nl-issue:last-child{border-bottom:1px solid var(--stroke-white)}
.nl-issue:hover{padding-left:14px}
.nl-issue .d{flex:none;width:120px;color:var(--grey-soft);font-size:var(--p3-fs);line-height:22px}
.nl-issue .t{flex:1;font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:20px;line-height:28px;
  letter-spacing:var(--ls3)}
.nl-issue .tag{flex:none;background-color:var(--label);border-radius:4px;padding:4px 12px;color:#150E33;
  font-size:var(--tag2-fs);line-height:var(--tag2-lh);font-weight:500}
.nl-signup{padding-top:var(--pad160)}
.nl-box{max-width:660px;margin:48px auto 0;border-radius:var(--r24);background-color:var(--black);color:var(--white);
  padding:48px 40px;text-align:center;display:flex;flex-flow:column;align-items:center;gap:18px;position:relative;overflow:hidden}
.nl-box h3{color:var(--white);font-size:30px;line-height:38px}
.nl-box p{color:rgba(255,255,255,.68);font-size:var(--p2-fs);line-height:var(--p2-lh);max-width:440px}
.nl-consent{color:rgba(255,255,255,.42);font-size:var(--p3-fs);line-height:20px;max-width:480px;margin-top:6px}
.nl-consent a{color:rgba(255,255,255,.72);text-decoration:underline}
.nl-embed{width:100%;margin-top:8px}
.nl-embed iframe{width:100%;min-height:88px;border:0;border-radius:var(--r12);background:#fff}

/* ============================================================
   KEYNOTES — Themen + Formate
   ============================================================ */
.topics{padding-top:var(--pad160)}
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.topic{position:relative;border-radius:var(--r20);background-color:var(--card-bg);box-shadow:var(--shadow-card);
  padding:32px;display:flex;flex-flow:column;gap:14px;transition:transform .35s var(--ease)}
.topic:hover{transform:translateY(-4px)}
.topic .t-num{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--accent)}
.topic h4{font-size:22px;line-height:30px;letter-spacing:var(--ls3)}
.topic p{color:var(--grey);font-size:var(--p2-fs);line-height:var(--p2-lh)}
.topic .t-for{margin-top:auto;padding-top:14px;color:var(--grey-soft);font-size:var(--p3-fs);line-height:20px}
.formats{padding-top:var(--pad160)}
.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.format{border-radius:var(--r20);border:1px solid var(--stroke-white);padding:32px;display:flex;flex-flow:column;gap:12px}
.format .f-time{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:34px;line-height:42px;
  letter-spacing:var(--ls6);color:var(--accent)}
.format h4{font-size:20px;line-height:28px;letter-spacing:var(--ls3)}
.format p{color:var(--grey);font-size:var(--p3-fs);line-height:22px}

/* ============================================================
   STEPS — nummerierter Ablauf
   ============================================================ */
.steps{padding-top:var(--pad160)}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
/* V6: Ablauf als dunkle Kacheln */
.step-grid.dark{margin-top:40px}
.step-grid.dark .step{background:#0B0B12;border-radius:16px;padding:32px 28px;border:none;
  box-shadow:0 18px 40px -28px rgba(11,11,18,.5)}
.step-grid.dark .s-num{color:#9985FF;font-weight:700}
.step-grid.dark h4{color:#fff;margin-top:10px}
.step-grid.dark p{color:rgba(255,255,255,.72)}
.step-grid.dark .step-done{color:#C9B8FF;font-weight:600;margin-top:14px}
.step{display:flex;flex-flow:column;gap:12px;padding-top:24px;border-top:2px solid rgba(109,73,255,.22)}
.step .s-num{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--accent)}
.step h4{font-size:20px;line-height:28px;letter-spacing:var(--ls3)}
.step p{color:var(--grey);font-size:var(--p3-fs);line-height:22px}
.step .step-done{color:var(--accent);font-weight:600;font-size:var(--p3-fs);line-height:22px;margin-top:auto;padding-top:10px}

/* ============================================================
   CONTACT — Anfrage-Formular
   ============================================================ */
.contact{padding-top:var(--pad100)}
.contact-inner{display:flex;gap:64px;align-items:flex-start}
.contact-form{flex:1;border-radius:var(--r24);background-color:var(--card-bg);box-shadow:var(--shadow-card);padding:40px}
.form-row{display:flex;flex-flow:column;gap:8px;margin-bottom:22px}
.form-row label{font-size:var(--p3-fs);line-height:22px;font-weight:600}
.form-row input,.form-row select,.form-row textarea{width:100%;border:1px solid rgba(11,11,18,.16);border-radius:var(--r12);
  padding:13px 16px;font-family:inherit;font-size:var(--p2-fs);line-height:var(--p2-lh);color:var(--black);
  background-color:#fff;transition:border-color .25s}
.form-row textarea{min-height:150px;resize:vertical}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(109,73,255,.14)}
.form-note{color:var(--grey-soft);font-size:var(--p3-fs);line-height:20px;margin-top:16px}
.form-note a{text-decoration:underline}
.contact-side{flex:none;width:340px;display:flex;flex-flow:column;gap:20px}
.contact-card{border-radius:var(--r20);border:1px solid var(--stroke-white);padding:28px;display:flex;flex-flow:column;gap:10px}
.contact-card h4{font-size:20px;line-height:28px;letter-spacing:var(--ls3)}
.contact-card p{color:var(--grey);font-size:var(--p3-fs);line-height:22px}
.contact-card .lnk{color:var(--accent);font-weight:600;font-size:var(--p2-fs);margin-top:4px}

/* ============================================================
   QUOTE-BAND — grosses Zitat auf dunkel
   ============================================================ */
.quote-band{margin-top:var(--mar160);background-color:var(--black);color:var(--white);
  padding:var(--pad100) 0;position:relative;overflow:hidden}
.quote-band .quote-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;text-align:center;
  display:flex;flex-flow:column;align-items:center;gap:28px}
.quote-band blockquote{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:32px;line-height:44px;
  letter-spacing:var(--ls3);color:var(--white)}
.quote-band blockquote em{color:var(--accent-hover);font-style:normal}
.quote-who{display:flex;align-items:center;gap:14px}
.quote-who img{width:52px;height:52px;border-radius:var(--r100);object-fit:cover}
.quote-who .qn{font-weight:600;font-size:var(--p2-fs);line-height:22px;text-align:left}
.quote-who .qr{color:rgba(255,255,255,.52);font-size:var(--p3-fs);line-height:20px;text-align:left}

/* ============================================================
   SECTION-INTRO — kleiner Eyebrow ueber Ueberschriften
   ============================================================ */
.eyebrow{font-size:var(--tag2-fs);line-height:var(--tag2-lh);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}

/* ============================================================
   RESPONSIVE — neue Komponenten
   ============================================================ */
@media screen and (max-width:991px){
  .page-hero{min-height:auto;padding-top:150px;padding-bottom:130px}
  .page-hero h1{font-size:42px;line-height:50px}
  .page-hero{--planet-size:1000px;--planet-top:430px}
  .offers-grid{grid-template-columns:1fr;gap:16px}
  .proof-grid{grid-template-columns:1fr;gap:16px}
  .split-inner,.split-inner.rev{flex-flow:column;gap:40px}
  .split-media{width:100%;max-width:460px}
  .split-media .media-tag{left:auto;right:20px;bottom:20px}
  .logo-strip-inner{gap:40px}
  .station{flex-flow:column;gap:8px;padding:26px 0}
  .station-when{width:auto}
  .principles-grid{grid-template-columns:1fr}
  .nl-stats-grid{grid-template-columns:1fr 1fr}
  .topic-grid,.format-grid{grid-template-columns:1fr}
  .step-grid{grid-template-columns:1fr 1fr}
  .contact-inner{flex-flow:column;gap:32px}
  .contact-side{width:100%}
  .quote-band blockquote{font-size:26px;line-height:36px}
}
@media screen and (max-width:767px){
  .page-hero h1{font-size:34px;line-height:42px}
  .nl-stats-grid{grid-template-columns:1fr}
  .step-grid{grid-template-columns:1fr}
  .nl-issue{flex-flow:column;align-items:flex-start;gap:8px}
  .nl-issue .d,.nl-issue .t{width:auto}
  .contact-form{padding:28px 22px}
  .nl-box{padding:36px 24px}
  .quote-band blockquote{font-size:22px;line-height:32px}
  .proof-num{font-size:46px;line-height:54px}
}
@media screen and (max-width:479px){
  .page-hero{padding-top:130px;padding-bottom:64px}
  .page-hero h1{font-size:29px;line-height:36px}
  .offer-inner{padding:24px 20px}
  .proof-cell,.principle,.topic{padding:24px 20px}
  .page-hero .section-button-wrap .button-01,.page-hero .section-button-wrap .button-03{width:100%}
}

/* ============================================================
   LEGAL — Impressum, Datenschutz
   ============================================================ */
.legal-hero{min-height:380px;padding-top:170px;padding-bottom:70px}
.legal-hero{--planet-size:1420px;--planet-top:340px}
.legal-hero h1{font-size:44px;line-height:52px}
.legal{padding-top:var(--pad100);padding-bottom:var(--pad100)}
.legal-inner{max-width:760px;margin:0 auto}
.legal-inner h2{font-size:28px;line-height:36px;letter-spacing:var(--ls3);margin-top:48px;margin-bottom:14px}
.legal-inner h2:first-child{margin-top:0}
.legal-inner h3{font-size:20px;line-height:28px;letter-spacing:var(--ls3);margin-top:32px;margin-bottom:10px}
.legal-inner p,.legal-inner li{color:var(--grey);font-size:var(--p2-fs);line-height:26px;margin-bottom:14px}
.legal-inner ul,.legal-inner ol{padding-left:22px;margin-bottom:18px}
.legal-inner li{margin-bottom:8px}
.legal-inner a{color:var(--accent);text-decoration:underline}
.legal-inner strong{color:var(--black);font-weight:600}
.legal-inner table{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:var(--p3-fs)}
.legal-inner th,.legal-inner td{border:1px solid var(--stroke-white);padding:10px 12px;text-align:left;vertical-align:top}
.legal-inner th{font-weight:600;background-color:rgba(11,11,18,.03)}
@media screen and (max-width:767px){
  .legal-hero{min-height:auto;padding-top:140px;padding-bottom:50px}
  .legal-hero h1{font-size:32px;line-height:40px}
  .legal-inner h2{font-size:24px;line-height:32px;margin-top:36px}
}

/* ============================================================
   GRADIENT-SCHRIFT — Markenverlauf auf Text, nie auf Flaechen
   ============================================================ */
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* Descender wie g und p brauchen Luft, sonst schneidet der Clip sie ab */
  padding-bottom:.06em;display:inline-block}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{color:var(--accent-hover);-webkit-text-fill-color:currentColor}
}

/* ============================================================
   UMLAUFBAHN — ein Lichtpunkt wandert auf der Kuppelachse
   ============================================================ */
.orbit-mask{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 22%,transparent 46%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 22%,transparent 46%)}
.orbit-spin{position:absolute;left:50%;top:var(--planet-top);
  width:var(--planet-size);height:var(--planet-size);margin-left:calc(var(--planet-size) / -2);
  animation:orbit 38s linear infinite}
.orbit-spin .spark{position:absolute;top:-5px;left:50%;margin-left:-5px;width:10px;height:10px;
  border-radius:50%;background:#fff;
  box-shadow:0 0 12px 4px rgba(220,212,255,.95),0 0 40px 12px rgba(139,92,246,.6),
             0 0 90px 26px rgba(255,102,196,.24)}
.orbit-spin .spark::after{content:'';position:absolute;left:50%;top:50%;width:170px;height:2px;
  margin:-1px 0 0 -170px;border-radius:2px;
  background:linear-gradient(to right,transparent,rgba(196,182,255,.42));
  transform-origin:100% 50%}
@keyframes orbit{from{transform:rotate(-104deg)}to{transform:rotate(256deg)}}
@media (prefers-reduced-motion:reduce){
  .orbit-spin{animation:none;transform:rotate(-38deg)}
  .dark-hero .planet::before{animation:none;opacity:.85}
}

/* ---------- Final-CTA mit vollem OS-Schaubild (hell, hochformat) ---------- */
/* ============================================================
   CASE-KARTEN als Flip-Cards: vorne die Behauptung, hinten der Output
   ============================================================ */
.capabilities-card{background:none;padding:0;box-shadow:none;overflow:visible;
  perspective:1200px;min-height:272px;cursor:pointer}
.cc-inner{position:relative;width:100%;height:100%;min-height:272px;
  transform-style:preserve-3d;transition:transform .6s var(--ease)}
.capabilities-card.is-flipped .cc-inner{transform:rotateY(180deg)}
.cc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r24);background:var(--card-bg);border:1px solid var(--stroke-white);
  box-shadow:var(--shadow-card);padding:30px;display:flex;flex-flow:column}
.cc-front .capabilities-text-wrap{margin-top:34px}
.cc-back{transform:rotateY(180deg);justify-content:flex-start;align-items:stretch;gap:16px;
  background:linear-gradient(180deg,#FCFBFF 0%,#F7F5FF 100%)}
.cc-back-title{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding-right:44px}
.cc-check{position:absolute;top:16px;right:16px;width:38px;height:38px;z-index:2}
.cc-check svg{width:100%;height:100%;display:block}

/* Bausteine der Output-Mockups */
.mk{display:flex;flex-flow:column;gap:9px;font-size:11.5px;line-height:16px;color:var(--grey)}
.mk i{display:block;height:7px;border-radius:4px;background:rgba(11,11,18,.13)}
.mk i.w34{width:34%} .mk i.w44{width:44%} .mk i.w46{width:46%} .mk i.w48{width:48%}
.mk i.w52{width:52%} .mk i.w58{width:58%} .mk i.w60{width:60%} .mk i.w66{width:66%}
.mk i.w70{width:70%} .mk i.w80{width:80%} .mk i.w82{width:82%} .mk i.w88{width:88%}
.mk i.w90{width:90%} .mk i.w94{width:94%} .mk i.w96{width:96%}
.mk-bars{display:flex;flex-flow:column;gap:6px}
.mk-cap{margin-top:4px;font-size:11px;color:var(--grey-soft);letter-spacing:var(--ls1)}
.mk-head{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--black);
  font-size:12px;padding-bottom:8px;border-bottom:1px solid rgba(11,11,18,.08)}
.mk-dot{width:7px;height:7px;border-radius:50%;background:#16A34A;flex:none}
.mk-row{display:flex;align-items:center;gap:9px}
.mk-ico{width:19px;height:19px;border-radius:6px;background:rgba(109,73,255,.12);
  color:var(--accent);font-size:10.5px;font-weight:700;display:flex;align-items:center;
  justify-content:center;flex:none}
.mk-t{font-size:11.5px}
.mk-av{width:26px;height:26px;border-radius:50%;background:rgba(109,73,255,.2);flex:none;display:block}
.mk-av.sm{width:18px;height:18px}
.mk-post-top{display:flex;align-items:center;gap:9px}
.mk-lines{display:flex;flex-flow:column;gap:5px;flex:1}
.mk-react{margin-top:2px}
.mk-pill{display:inline-block;background:rgba(22,163,74,.12);color:#15803D;font-size:10px;
  font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:var(--r100)}
.mk-tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
.mk-tile{height:52px;border-radius:8px}
.mk-tile.t1{background:linear-gradient(150deg,#6D49FF,#9985FF)}
.mk-tile.t2{background:linear-gradient(150deg,#9985FF,#EC4899)}
.mk-tile.t3{background:linear-gradient(150deg,#5170ff,#8b5cf6)}
.mk-tiles .mk-cap{grid-column:1/-1}
.mk-slides{display:grid;grid-template-columns:2fr 1fr 1fr;gap:7px;align-items:start}
.mk-slide{height:54px;border-radius:8px;background:rgba(11,11,18,.06);
  border:1px solid rgba(11,11,18,.08)}
.mk-slide.big{display:flex;flex-flow:column;gap:6px;justify-content:center;padding:0 10px;
  background:#fff}
.mk-slides .mk-cap{grid-column:1/-1}
.mk-subject{font-weight:600;color:var(--black);font-size:12px;padding-bottom:7px;
  border-bottom:1px solid rgba(11,11,18,.08)}
.mk-idea,.mk-lead{display:flex;align-items:center;gap:9px}
.mk-trend{color:#16A34A;font-size:13px;font-weight:700;flex:none}
.mk-lead i{flex:1}
.mk-score{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:11px;
  color:var(--accent);flex:none}
.mk-doc-head{font-weight:600;color:var(--black);font-size:12px;padding-bottom:8px;
  border-bottom:1px solid rgba(11,11,18,.08)}
.mk-pos{display:flex;align-items:center;gap:10px}
.mk-pos i{flex:1}
.mk-amt{width:34px;height:7px;border-radius:4px;background:rgba(11,11,18,.13);flex:none;display:block}
.mk-amt.strong{background:var(--accent);opacity:.75}
.mk-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:4px;padding-top:8px;border-top:1px solid rgba(11,11,18,.10);
  font-weight:600;color:var(--black);font-size:11.5px}

/* Varianten der Output-Mockups: jede Form nur einmal */
.mk-time .mk-tl{display:flex;flex-flow:column;gap:14px;position:relative;padding-left:6px}
.mk-time .mk-tl::before{content:"";position:absolute;left:47px;top:6px;bottom:6px;width:2px;
  background:rgba(109,73,255,.2)}
.mk-tp{display:flex;align-items:center;gap:12px}
.mk-hh{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:10.5px;
  color:var(--grey-soft);width:34px;flex:none}
.mk-pt{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;z-index:1;
  box-shadow:0 0 0 3px #F7F5FF}
.mk-tt{font-size:11.5px;color:var(--black)}
.mk-eng{display:flex;align-items:center;gap:12px;margin-top:4px}
.mk-e{font-size:11px;color:var(--grey-soft)}
.mk-stack{position:relative;height:112px}
.mk-sl{position:absolute;width:76%;height:74px;border-radius:9px;background:#fff;
  border:1px solid rgba(11,11,18,.10)}
.mk-sl.s1{left:0;top:14px;z-index:3;display:flex;flex-flow:column;gap:7px;justify-content:center;
  padding:0 12px;box-shadow:0 6px 16px -8px rgba(11,11,18,.25)}
.mk-sl.s2{left:9%;top:7px;z-index:2;transform:rotate(3deg);background:#FAF8FF}
.mk-sl.s3{left:17%;top:0;z-index:1;transform:rotate(6deg);background:#F3F0FF}
.mk-stack .mk-cap{position:absolute;bottom:-4px;left:0}
.mk-mailwin{border:1px solid rgba(11,11,18,.10);border-radius:10px;overflow:hidden;background:#fff}
.mk-mw-bar{display:flex;gap:5px;padding:8px 10px;background:rgba(11,11,18,.04);
  border-bottom:1px solid rgba(11,11,18,.07)}
.mk-mw-bar i.d{width:7px;height:7px;border-radius:50%;background:rgba(11,11,18,.16);display:block}
.mk-mw-body{padding:11px 12px;display:flex;flex-flow:column;gap:9px}
.mk-cal{display:flex;gap:14px;align-items:center}
.mk-cal-tile{width:62px;height:66px;border-radius:12px;background:var(--accent);color:#fff;
  display:flex;flex-flow:column;align-items:center;justify-content:center;gap:1px;flex:none}
.mk-cal-d{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.mk-cal-n{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:26px;line-height:28px}
.mk-cal-side{display:flex;flex-flow:column;gap:8px}
.mk-cs{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--black)}
.mk-chart .mk-bars-h{display:flex;align-items:flex-end;gap:9px;height:96px}
.mk-b{flex:1;border-radius:5px 5px 0 0;background:rgba(109,73,255,.22);display:block}
.mk-b.hot{background:var(--accent)}
.mk-radar{align-items:center}
.mk-rad{position:relative;width:104px;height:104px;margin:0 auto}
.mk-ring{position:absolute;border-radius:50%;border:1px solid rgba(109,73,255,.28);
  left:50%;top:50%;transform:translate(-50%,-50%)}
.mk-ring.r1{width:104px;height:104px}
.mk-ring.r2{width:60px;height:60px;border-style:dashed}
.mk-blip{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(109,73,255,.16)}
.mk-blip.b1{left:16%;top:30%}
.mk-blip.b2{right:20%;top:20%}
.mk-blip.b3{right:26%;bottom:22%}
.mk-radar .mk-cap{text-align:center}
.mk-eur{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:11px;
  color:var(--grey);flex:none}
.mk-eur.big{font-size:14px;color:var(--accent)}

/* Beweis-Streifen direkt unter dem Hero: Zahlen + Konzern-Logos */
.proof-strip{padding-top:34px;padding-bottom:34px}
.ps-inner{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.ps-stats{display:flex;gap:52px;flex-wrap:wrap}
.ps-stat b{display:block;font-size:28px;line-height:34px;letter-spacing:var(--ls3)}
.ps-stat span{display:block;font-size:12.5px;line-height:18px;color:var(--grey);margin-top:2px}
.ps-logos{display:flex;flex-flow:column;gap:10px}
.ps-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-soft)}
.ps-logo-row{display:flex;align-items:center;gap:26px}
.ps-logo-row img{height:22px;width:auto;opacity:.6}
.ps-logo-row img.wide{height:17px}
/* Für-wen als Filter direkt vor dem Preis: gleiche Flaeche, feine Oberkante */
.fit.fit-gate{border-top:1px solid var(--stroke-white)}

/* Buehnenfoto auf der Keynote-Seite */
.stage-shot{padding-top:var(--pad100)}
.stage-fig{margin:0;max-width:1080px;margin-left:auto;margin-right:auto}
.stage-img{width:100%;display:block;border-radius:var(--r20);
  border:1px solid var(--stroke-white);box-shadow:var(--shadow-card)}
.stage-cap{margin-top:12px;text-align:center;font-size:12.5px;line-height:18px;
  color:var(--grey-soft);letter-spacing:var(--ls1)}

/* ============================================================
   PJX — Programm-Journey live (ersetzt das PNG-Schaubild)
   ============================================================ */
.pjx{margin-top:48px}
.pjx-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:8px}
.pjx-tab{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.05em;padding:10px 22px;border-radius:var(--r100);cursor:pointer;
  border:1px solid var(--stroke-white);background:var(--card-bg);color:var(--grey);
  transition:all .25s}
.pjx-tab.active{border-color:var(--accent);color:var(--accent);
  background:rgba(109,73,255,.08);box-shadow:0 0 0 3px rgba(109,73,255,.10)}
.pjx .journey{position:relative;height:470px}
.pjx .jline{position:absolute;left:16px;right:16px;top:50%;height:4px;border-radius:2px;
  background:var(--grad);opacity:.85}
.pjx .stations{position:absolute;inset:0;display:flex;justify-content:space-between}
.pjx .stations.sales-set{display:none}
.pjx.show-sales .stations.mk-set{display:none}
.pjx.show-sales .stations.sales-set{display:flex}
.pjx .st{position:relative;flex:1;display:flex;flex-flow:column;align-items:center;min-width:0}
.pjx .st-node{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:var(--card-bg);
  border:2.5px solid var(--accent);display:flex;align-items:center;justify-content:center;
  font-family:'Manrope','Inter',sans-serif;font-weight:800;font-size:14px;color:var(--accent);
  box-shadow:0 0 0 7px rgba(109,73,255,.10);z-index:2}
.pjx .st-node.start{background:var(--accent);color:#fff}
.pjx .st-node.finish{background:var(--black);border-color:var(--black);color:#fff;
  box-shadow:0 0 0 7px rgba(22,163,74,.15)}
.pjx .st-week{position:absolute;left:50%;transform:translateX(-50%);
  font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grey-soft);white-space:nowrap}
.pjx .st.up .st-week{top:calc(50% + 32px)}
.pjx .st.down .st-week{bottom:calc(50% + 32px)}
.pjx .st-card{position:absolute;left:50%;transform:translateX(-50%);width:min(176px,96%);
  background:var(--card-bg);border:1.5px solid rgba(109,73,255,.30);border-radius:14px;
  padding:13px;box-shadow:var(--shadow-card)}
.pjx .st.up .st-card{bottom:calc(50% + 52px)}
.pjx .st.down .st-card{top:calc(50% + 52px)}
.pjx .st-card::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:2px;height:20px;background:rgba(109,73,255,.30)}
.pjx .st.up .st-card::after{top:100%}
.pjx .st.down .st-card::after{bottom:100%}
.pjx .st-t{font-family:'Manrope','Inter',sans-serif;font-weight:800;font-size:14px;line-height:19px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:4px}
.pjx .st-d{font-size:11.5px;line-height:16.5px;color:var(--grey)}
.pjx .st-card.startcard{border-style:dashed}
.pjx .st-card.finishcard{border-color:rgba(22,163,74,.5)}
.pjx .st-card.finishcard .st-t{background:none;-webkit-text-fill-color:#15803D;color:#15803D}
.pjx-meta{display:flex;justify-content:center;gap:28px;margin-top:2px;flex-wrap:wrap}
.pjx-meta .mf{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--grey);
  font-weight:500}
.pjx-meta .mf svg{width:15px;height:15px;flex:none}
.pjx-bars{display:flex;flex-flow:column;gap:8px;margin-top:18px}
.jbar{border:1px solid rgba(109,73,255,.30);border-radius:12px;background:rgba(109,73,255,.08);
  padding:11px 18px;text-align:center;font-size:14px;font-weight:600;letter-spacing:.01em}
.jbar b{color:var(--accent)}
.pjx-powered{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;
  font-size:12px;color:var(--grey-soft)}
.pjx-powered img{width:18px;height:18px;border-radius:50%}

@media screen and (max-width:991px){
  /* Journey mobil: vertikale Timeline */
  .pjx .journey{height:auto;padding-left:6px}
  .pjx .jline{left:21px;right:auto;top:8px;bottom:8px;width:4px;height:auto}
  .pjx .stations{position:static;flex-flow:column;gap:14px}
  .pjx .st{flex-flow:row;align-items:flex-start;gap:14px}
  .pjx .st-node{position:static;transform:none;flex:none;width:38px;height:38px;font-size:13px;
    box-shadow:0 0 0 5px var(--page)}
  .pjx .st-week{display:none}
  .pjx .st-card{position:static;transform:none;width:100%}
  .pjx .st-card::after{display:none}
}

/* Groessere Hero-Subline (Programmseite) */
.hero-sub-big{font-size:20px;line-height:30px;font-weight:500}

.steps-quote{margin-top:48px}

/* Mini-Zitat unter den Preis-Karten: letzter Beweis am Kaufpunkt */
.pricing-quote{display:flex;align-items:center;gap:16px;justify-content:center;
  max-width:560px;margin:40px auto 0;text-align:left}
.pricing-quote img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.pq-text{font-size:16px;line-height:24px;font-weight:500;letter-spacing:var(--ls1)}
.pq-who{display:block;margin-top:4px;font-size:12.5px;font-weight:400;color:var(--grey-soft)}

/* Dezenter LinkedIn-Icon-Link (Ueber-mich-Teaser) */
.li-mini{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:10px;border:1px solid var(--stroke-white);color:var(--grey);
  transition:color .25s,border-color .25s}
.li-mini:hover{color:var(--accent);border-color:rgba(109,73,255,.4)}
.li-mini svg{width:17px;height:17px}
/* Alternativ-Zeile unter dem Final-CTA */
.cta-alt-line{margin-top:14px;font-size:13px;line-height:19px;color:rgba(255,255,255,.55)}
.cta-alt-line a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}
.cta-alt-line a:hover{color:#fff}

/* Kunden-Laufband als Zwischen-Beweis auf der Programm-Seite */
.investor.ks-proof{padding-top:8px;padding-bottom:0}
.investor.ks-proof .section-header-wrap{margin-bottom:26px}
.investor.ks-proof .investor-main-wrap{padding-bottom:96px}

/* Kontakt: Gesicht ueber den Kontakt-Karten */
.contact-me{display:flex;align-items:center;gap:14px;padding:14px 16px;
  background:var(--card-bg);border:1px solid var(--stroke-white);border-radius:var(--r20);
  box-shadow:var(--shadow-card);margin-bottom:16px}
.cm-img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none}
.cm-n{font-weight:600;font-size:15px;line-height:21px;letter-spacing:var(--ls1)}
.cm-r{font-size:13px;line-height:19px;color:var(--grey)}

/* ============================================================
   BILD-PLATZHALTER — muss vor dem Live-Gang ersetzt werden.
   Suche nach "img-ph" im HTML, um alle offenen Stellen zu finden.
   ============================================================ */
.img-ph{position:relative;border:2px dashed rgba(186,117,23,.45);border-radius:var(--r20);
  background:rgba(250,238,218,.5);padding:30px 28px;display:flex;flex-flow:column;gap:8px;
  min-height:220px;justify-content:center}
.img-ph-badge{position:absolute;top:-11px;left:22px;background:#BA7517;color:#fff;
  font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 11px;border-radius:var(--r100)}
.img-ph-title{font-weight:700;font-size:17px;line-height:24px;letter-spacing:var(--ls3);
  color:#5A3A06}
.img-ph p{font-size:14px;line-height:21px;color:#6B4A12;max-width:60ch}
.img-ph-meta{margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:#8A6520;letter-spacing:.02em}

/* ============================================================
   TRAINER — wer das Programm haelt (Trust-Block vor dem Preis)
   ============================================================ */
.trainer{padding-top:var(--pad160)}
.trainer-grid{display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:center;
  max-width:1060px;margin:0 auto}
.trainer-photo{position:relative}
.trainer-photo .tr-img{width:100%;display:block;border-radius:var(--r20);
  border:1px solid var(--stroke-white);box-shadow:var(--shadow-card)}
.tr-tag{position:absolute;left:22px;bottom:22px;background:rgba(11,11,18,.82);
  border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--accent);
  border-radius:12px;padding:10px 16px;backdrop-filter:blur(8px)}
.tr-tag-n{font-weight:600;font-size:14px;line-height:20px;color:#fff;letter-spacing:var(--ls1)}
.tr-tag-r{font-size:12px;line-height:18px;color:rgba(255,255,255,.62)}
.trainer-copy h2{margin-top:14px}
.trainer-text{margin-top:22px;display:flex;flex-flow:column;gap:14px}
.trainer-text p{color:var(--grey);font-size:var(--p2-fs);line-height:var(--p2-lh);max-width:56ch}
.trainer-logos{margin-top:30px}
.tr-logo-label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey-soft);margin-bottom:14px}
.tr-logo-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.tr-logo-row img{height:26px;width:auto;opacity:.62}
.tr-logo-row img.wide{height:20px}
.trainer-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;
  padding-top:26px;border-top:1px solid var(--stroke-white)}
.tr-stat b{display:block;font-size:30px;line-height:36px;letter-spacing:var(--ls3)}
.tr-stat span{display:block;font-size:12.5px;line-height:18px;color:var(--grey);margin-top:3px}

/* page-hero im Duo-Layout (Text + Foto), z.B. Kickstarter-Seite */
.page-hero.tight .hero-duo{padding-top:0}
.page-hero .hero-duo .page-hero-inner{align-items:flex-start;text-align:left;max-width:none}
.page-hero .hero-duo .page-hero-sub{margin-left:0;max-width:52ch}
.page-hero .hero-duo .section-button-wrap{justify-content:flex-start}
.page-hero .hero-duo .hero-photo-wrap{flex:0 0 auto;width:376px;position:relative}
.page-hero.tight .hero-duo .hero-photo-wrap{width:44%;max-width:480px}
.page-hero .hero-duo .hero-photo{width:100%;display:block}
.page-hero .hero-duo .float-card.fc-1{top:8%;left:-38px}
.page-hero .hero-duo .float-card.fc-2{top:auto;bottom:28%;right:-24px;max-width:214px}
.page-hero .hero-duo h1{font-size:48px;line-height:56px}
.page-hero .hero-duo .hero-nametag{bottom:7%}

/* CTA-Visual als Foto-Block (gleiche Optik wie der Hero der Startseite) */
.cta-v1-image-wrap.photo{width:460px;height:auto;align-items:center;justify-content:center;
  margin-left:0;padding-bottom:8px}
.cta-photo{position:relative;width:100%}
.cta-photo .hero-photo{width:100%;display:block}
.cta-photo .float-card{font-size:13px}
.cta-photo .float-card.fc-1{top:6%;left:-34px;animation:float-a 6.5s ease-in-out infinite alternate}
.cta-photo .float-card.fc-2{top:auto;bottom:30%;right:-56px;max-width:224px;
  animation:float-b 7.5s ease-in-out infinite alternate}
.cta-photo .hero-nametag{bottom:8%}

.cta-v1-image-wrap.os{align-items:center;justify-content:center;width:440px;height:auto;
  margin-left:60px;padding:72px 0}
.cta-v1-image-wrap.os .cta-v1-image-01{width:100%;max-width:440px;margin-top:0;transform:rotate(-2.5deg)}
@media screen and (max-width:991px){
  .cta-v1-image-wrap.os{width:100%;max-width:400px;margin:0 auto;padding:40px 0 0}
}

/* ---------- Free Guides: Karten + Gate-Modal ---------- */
.guides-grid{grid-template-columns:repeat(3,1fr)}
.guide-card{text-align:left;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.guide-card:hover{transform:translateY(-3px);box-shadow:0 6px 30px -12px rgba(109,73,255,.35)}
.guide-card .guide-cta,.principle .guide-cta{color:var(--accent);font-weight:600;font-size:var(--p2-fs);margin-top:auto;padding-top:8px}
.guide-cta.guide-soon{color:var(--grey-soft);font-weight:500}
.gate-overlay[hidden]{display:none}
.gate-overlay{position:fixed;inset:0;z-index:60;background:rgba(11,11,18,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px}
.gate-modal{position:relative;background:var(--card-bg);border-radius:var(--r20);box-shadow:var(--shadow-card);
  max-width:480px;width:100%;padding:40px 36px;display:flex;flex-flow:column;gap:16px;align-items:flex-start}
.gate-modal .button-01{width:100%}
.gate-modal .gate-legal a{text-decoration:underline}
.gate-close{position:absolute;top:14px;right:16px;font-size:16px;color:var(--grey-soft);padding:6px}
.gate-close:hover{color:var(--black)}
.gate-form{display:flex;flex-flow:column;gap:12px;width:100%}
.gate-input{padding:14px 16px;border:1px solid var(--stroke-white);border-radius:var(--r12);
  font:inherit;width:100%;background:#fff;color:var(--black)}
.gate-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.gate-honey{position:absolute;left:-9999px;top:-9999px;height:0;width:0;opacity:0;pointer-events:none}
.gate-success{color:var(--black);font-weight:500;background:rgba(109,73,255,.08);
  border:1px solid rgba(109,73,255,.25);border-radius:var(--r12);padding:14px 16px}
.gate-error{color:#B4231F}
.gate-error a{text-decoration:underline}
.nl-box .gate-form{max-width:420px;margin:0 auto}
.nl-box .gate-success,.nl-box .gate-error{max-width:420px;margin:12px auto 0}
@media screen and (max-width:991px){.guides-grid{grid-template-columns:1fr}}
@media screen and (max-width:479px){.gate-modal{padding:28px 22px}}
.step-grid.steps-3{grid-template-columns:repeat(3,1fr)}
@media screen and (max-width:767px){.step-grid.steps-3{grid-template-columns:1fr}}

/* ---------- Chat-Marquee (Kunden-Stimmen als Nachrichten, Float-Card-Look) ---------- */
@keyframes chatScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.chats{position:relative;z-index:4;margin-top:0;padding:20px 0 0}
.chat-marquee-wrap{overflow:hidden;padding:8px 0;
  mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%)}
.chat-marquee-track{display:flex;gap:24px;width:max-content;animation:chatScroll 45s linear infinite}
.chat-marquee-track:hover{animation-play-state:paused}
/* Zitat-Fenster im Laufband: Fenster-Optik statt Sprechblase */
.qcard{flex-shrink:0;width:322px;background:var(--card-bg);border:1px solid var(--stroke-white);
  border-radius:12px;box-shadow:var(--shadow-card);overflow:hidden;
  transition:transform .3s}
.qcard:hover{transform:translateY(-2px)}
.qcard-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;background:var(--page);
  border-bottom:1px solid var(--stroke-soft)}
.qcard-bar i{width:8px;height:8px;border-radius:50%;background:rgba(11,11,18,.14);font-style:normal;
  flex:none}
.qcard-name{font-size:11.5px;font-weight:600;color:var(--grey);margin-left:4px;
  letter-spacing:var(--ls1);white-space:nowrap}
.qcard-meta{margin-left:auto;display:flex;align-items:center;gap:5px;white-space:nowrap}
.qcard-time{font-size:10px;color:var(--grey-soft)}
.qcard-ticks{font-size:11px;color:#16A34A;line-height:1}
.qcard-body{padding:13px 14px;font-size:13px;line-height:19px;color:var(--black);font-weight:600}

.chat-bubble{flex-shrink:0;background:rgba(11,11,18,.86);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r16);padding:14px 20px 10px;white-space:nowrap;position:relative;
  box-shadow:0 18px 40px -18px rgba(11,11,18,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .2s ease}
.chat-bubble:hover{transform:translateY(-2px)}
.chat-bubble .chat-text{font-size:14px;font-weight:400;color:rgba(255,255,255,.92);line-height:1.5;
  display:flex;align-items:center;gap:9px}
.chat-bubble .chat-meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:4px}
.chat-bubble .chat-time{font-size:10px;color:rgba(255,255,255,.38)}
.chat-bubble .chat-ticks{font-size:12px;color:#4ADE80;opacity:.8;line-height:1}
@media (prefers-reduced-motion:reduce){.chat-marquee-track{animation:none}}

/* ============================================================
   PROBLEM-SPIEGEL — Zitat-Karten ohne Personen-Zeile
   ============================================================ */
.mirror{padding-top:var(--pad160)}
.mirror-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.mirror-card{background:var(--card-bg);border:1px solid var(--stroke-white);border-radius:var(--r16);
  padding:24px;display:flex;flex-flow:column;gap:16px;box-shadow:var(--shadow-card)}
.mirror-card .qm{font-family:'Manrope','Inter',sans-serif;font-size:30px;font-weight:700;line-height:.55;color:var(--accent)}
.mirror-card p{font-size:16px;line-height:1.55;letter-spacing:var(--ls1);color:var(--grey);font-style:italic}
.mirror-card p strong{color:var(--black);font-weight:600;font-style:normal}

/* ============================================================
   DREAM-DAY — Tages-Timeline mit Zeit-Kontrast
   ============================================================ */
.dayline{padding-top:var(--pad160)}
.dayline-list{margin-top:56px;display:flex;flex-flow:column;max-width:860px;margin-left:auto;margin-right:auto}
.day-slot{display:flex;gap:40px;padding:32px 0;border-top:1px solid var(--stroke-white)}
.day-slot:last-child{border-bottom:1px solid var(--stroke-white)}
.day-when{flex:none;width:110px;font-family:'Manrope','Inter',sans-serif;font-weight:700;
  font-size:20px;line-height:30px;letter-spacing:var(--ls2);color:var(--accent)}
.day-body{flex:1;display:flex;flex-flow:column;gap:8px}
.day-body h4{font-size:20px;line-height:28px;letter-spacing:var(--ls3)}
.day-body p{color:var(--grey);font-size:var(--p2-fs);line-height:var(--p2-lh);max-width:560px}
.day-time{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:var(--p3-fs);line-height:22px}
.day-time .was{color:var(--grey-soft);text-decoration:line-through}
.day-time .now{color:var(--accent);font-weight:600}

/* ============================================================
   KONTRAST — ✗/✓-Zweispalter
   ============================================================ */
.contrast{padding-top:var(--pad160)}
.contrast-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:56px;
  align-items:stretch}
/* Rahmen auf beiden Karten (transparent links), sonst sind sie 2px unterschiedlich hoch */
.contrast-card{position:relative;border-radius:var(--r20);background-color:var(--card-bg);
  border:1px solid transparent;
  box-shadow:var(--shadow-card);padding:36px 32px;display:flex;flex-flow:column;gap:20px}
.contrast-card.win{border:1px solid rgba(109,73,255,.35)}
.contrast-card .c-label{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.06em;color:var(--grey-soft)}
.contrast-card.win .c-label{color:var(--accent)}
.contrast-list{display:flex;flex-flow:column;gap:14px}
.contrast-item{display:flex;gap:12px;align-items:flex-start;color:var(--grey);
  font-size:var(--p2-fs);line-height:var(--p2-lh)}
.contrast-item .ci{flex:none;width:22px;height:22px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;margin-top:1px;font-size:12px;font-weight:700}
.contrast-item .ci.x{background:rgba(11,11,18,.06);color:var(--grey-soft)}
.contrast-item .ci.ok{background:rgba(109,73,255,.12);color:var(--accent)}
.contrast-card.win .contrast-item{color:var(--black)}

/* ============================================================
   CTA-INLINE — schmales CTA-Band zwischen Sektionen
   ============================================================ */
.cta-inline{margin-top:var(--mar80)}
.cta-inline-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--card-bg);border:1px solid rgba(109,73,255,.25);border-radius:var(--r16);
  padding:24px 32px;box-shadow:var(--shadow-card)}
.cta-inline-text{font-size:var(--p1-fs);line-height:var(--p1-lh);font-weight:600;letter-spacing:var(--ls2);white-space:nowrap}
.cta-inline-wrap .button-01{flex:none;padding:12px 26px}

/* ============================================================
   HERO-DUO — Text links, Foto rechts, Floating-Cards
   ============================================================ */
.hero-duo{display:flex;align-items:center;gap:48px;width:100%;max-width:1180px;margin:0 auto}
.hero-duo .page-hero-inner,.hero-duo .hero-copy{flex:1;margin:0;text-align:left;align-items:flex-start}
.hero-duo .page-hero-sub{margin-left:0}
.hero-duo .section-button-wrap{justify-content:flex-start}
.hero-photo-wrap{flex:none;width:44%;max-width:480px;position:relative;z-index:3}
.hero-photo{width:100%;display:block;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 68%,transparent 100%),
    linear-gradient(to right,transparent 0,#000 38%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 68%,transparent 100%),
    linear-gradient(to right,transparent 0,#000 38%,#000 84%,transparent 100%);
  mask-composite:intersect}
.float-card{position:absolute;background:rgba(11,11,18,.72);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r16);padding:14px 18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -18px rgba(11,11,18,.55);color:var(--white)}
.float-card .fc-num{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:22px;line-height:28px}
.float-card .fc-label{font-size:12px;line-height:18px;color:rgba(255,255,255,.62);letter-spacing:var(--ls1)}
.float-card .fc-row{display:flex;align-items:center;gap:8px;font-size:13px;line-height:20px}
.float-card .fc-dot{width:7px;height:7px;border-radius:50%;background:#4ADE80;flex:none;
  box-shadow:0 0 8px 2px rgba(74,222,128,.5)}
.float-card.fc-1{top:12%;left:-40px;animation:float-a 6.5s ease-in-out infinite alternate}
.float-card.fc-2{top:28%;right:-72px;max-width:250px;animation:float-b 7.5s ease-in-out infinite alternate}
.float-card.fc-2 .fc-row{align-items:flex-start;white-space:normal}
.float-card.fc-2 .fc-dot{margin-top:6px}
.float-card .fc-logo{width:18px;height:18px;flex:none;border-radius:50%}
.hero-nametag{position:absolute;bottom:10%;left:50%;transform:translateX(-50%);text-align:center;
  background:rgba(11,11,18,.78);border-left:3px solid var(--accent);border-radius:10px;padding:10px 20px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-nametag .nt-n{font-weight:600;font-size:14px;line-height:20px;color:#fff;letter-spacing:var(--ls1)}
.hero-nametag .nt-r{font-size:12px;line-height:18px;color:rgba(255,255,255,.6)}
.hero-v1-main-wrap.duo h1{font-size:64px;line-height:72px}
.hero-v1-main-wrap.duo .hero-button-wrap .button-03{padding:11px 22px;font-size:16px}

/* Duo-Variante im Vollhoehen-Hero (Startseite) */
.hero-v1-main-wrap.duo{max-width:1180px;align-items:center;flex-flow:row;gap:48px}
.hero-v1-main-wrap.duo .hero-copy{flex:1}
.hero-duo .hero-badge-wrap,.hero-v1-main-wrap.duo .hero-badge-wrap{justify-content:flex-start}
.hero-duo .hero-text-wrap,.hero-v1-main-wrap.duo .hero-text-wrap{align-items:flex-start}
.hero-duo h1,.hero-v1-main-wrap.duo h1{text-align:left}
.hero-duo .hero-subtitle,.hero-v1-main-wrap.duo .hero-subtitle{text-align:left;margin:0}
.hero-duo .hero-button-wrap,.hero-v1-main-wrap.duo .hero-button-wrap{justify-content:flex-start}
.hero-duo .hero-micro,.hero-v1-main-wrap.duo .hero-micro{text-align:left}

@media screen and (max-width:991px){
  .mirror-grid{grid-template-columns:1fr}
  .contrast-grid{grid-template-columns:1fr}
  .day-slot{gap:20px}
  .day-when{width:76px;font-size:17px}
  .cta-inline-wrap{flex-flow:column;align-items:flex-start;gap:16px}
  .cta-inline-text{white-space:normal}
  .hero-duo{flex-flow:column;gap:40px}
  .hero-duo .page-hero-inner,.hero-duo .hero-copy{text-align:center;align-items:center}
  .hero-duo .section-button-wrap{justify-content:center}
  .hero-v1-main-wrap.duo{flex-flow:column;gap:40px;height:auto;justify-content:flex-start;padding-top:150px}
  .hero-v1-main-wrap.duo .hero-badge-wrap,.hero-duo .hero-badge-wrap{justify-content:center}
  .hero-v1-main-wrap.duo .hero-text-wrap,.hero-duo .hero-text-wrap{align-items:center}
  .hero-v1-main-wrap.duo h1,.hero-duo h1{text-align:center}
  .hero-v1-main-wrap.duo .hero-subtitle,.hero-duo .hero-subtitle{text-align:center;margin:0 auto}
  .hero-v1-main-wrap.duo .hero-button-wrap,.hero-duo .hero-button-wrap{justify-content:center}
  .hero-v1-main-wrap.duo .hero-micro,.hero-duo .hero-micro{text-align:center}
  .hero-v1.dark-hero{height:auto;min-height:auto;padding-bottom:80px}
  .hero-photo-wrap{width:78%;max-width:380px}
  .float-card.fc-1{left:-10px}
  /* fc-2 lag mobil genau auf Augenhoehe: unter das Kinn schieben */
  .float-card.fc-2{left:-10px;right:auto;top:auto;bottom:27%;max-width:236px}
  .float-card.fc-3{right:-6px}
}
@media screen and (max-width:479px){
  .mirror-card{padding:24px 20px}
  .contrast-card{padding:26px 22px}
  .day-slot{flex-flow:column;gap:6px}
  .day-when{width:auto}
  .hero-photo-wrap{width:100%}
  .float-card{padding:10px 14px}
  .float-card .fc-num{font-size:18px;line-height:24px}
}
@media (prefers-reduced-motion:reduce){
  .float-card{animation:none}
}

/* ============================================================
   PAGE-HERO TIGHT — Abstand wie Startseite, ohne Extra-Luecke
   ============================================================ */
/* Programm-Hero sitzt jetzt wie der Index-Hero: fuellt das Fenster,
   Inhalt mittig, Foto links und Text rechts (umgedreht zur Startseite). */
.page-hero.tight{height:100vh;min-height:860px;justify-content:center;
  padding-top:104px;padding-bottom:56px}
.page-hero.tight .hero-duo{flex-flow:row-reverse}
.page-hero.tight .page-hero-inner{gap:24px}
.page-hero.tight h1{font-size:54px;line-height:62px;max-width:1000px}

/* ============================================================
   PAIN-ORBIT — Solopreneur in der Mitte, Gedanken kreisen
   ============================================================ */
.pain{padding-top:var(--pad160)}
/* ============================================================
   PAIN — Single Point of Failure: alle Aufgaben laufen auf einen Knoten
   ============================================================ */
.spf{position:relative;max-width:860px;margin:44px auto 0;height:440px}
.spf-svg{position:absolute;inset:0;width:100%;height:100%}
.spf-node{position:absolute;transform:translate(-50%,-50%);
  background:var(--card-bg);border:1px solid var(--stroke-white);border-radius:12px;
  padding:9px 14px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:var(--ls1);
  box-shadow:var(--shadow-card);white-space:nowrap}
.spf-node span{display:block;font-weight:400;font-size:11px;color:#C42A1D;letter-spacing:.02em}
.spf-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:124px;height:124px;border-radius:50%;background:var(--black);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 10px rgba(255,59,48,.10),0 0 0 22px rgba(255,59,48,.05);
  animation:spf-strain 2.6s ease-in-out infinite}
.spf-core b{font-size:26px;letter-spacing:var(--ls3)}
.spf-label{position:absolute;left:50%;top:calc(50% + 96px);transform:translateX(-50%);
  font-size:10.5px;font-weight:700;color:#C42A1D;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap}
.spf-flow{stroke:#FF3B30;stroke-width:1.6;stroke-dasharray:5 7;opacity:.5;
  animation:spf-dash 1.4s linear infinite}
@keyframes spf-strain{0%,100%{box-shadow:0 0 0 10px rgba(255,59,48,.10),0 0 0 22px rgba(255,59,48,.05)}
  50%{box-shadow:0 0 0 14px rgba(255,59,48,.18),0 0 0 30px rgba(255,59,48,.07)}}
@keyframes spf-dash{to{stroke-dashoffset:-24}}
.pain-close{margin-top:44px;text-align:center;font-size:22px;line-height:32px;font-weight:600;
  letter-spacing:var(--ls2);max-width:640px;margin-left:auto;margin-right:auto}

/* ============================================================
   FUTURE-GRID — 3x3 Zukunftsbild, Kacheln kippen nach vorne
   ============================================================ */
.future{padding-top:var(--pad160)}
.future-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px;
  perspective:1200px}
.ftile{position:relative;background:var(--card-bg);border:1px solid var(--stroke-white);
  border-radius:var(--r20);padding:28px 26px 24px;display:flex;flex-flow:column;gap:10px;
  box-shadow:var(--shadow-card);transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-color .3s}
.ftile:hover{transform:translateY(-8px) rotateX(7deg) scale(1.025);
  border-color:rgba(109,73,255,.45);
  box-shadow:0 3px 6px rgba(11,11,18,.05),0 34px 60px -28px rgba(109,73,255,.45)}
.ft-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(109,73,255,.10);color:var(--accent);margin-bottom:4px}
.ft-icon svg{width:22px;height:22px}
.ftile h4{font-size:19px;line-height:27px;letter-spacing:var(--ls3)}
.ftile p{color:var(--grey);font-size:var(--p3-fs);line-height:22px}
.ft-chip{margin-top:auto;align-self:flex-start;font-size:12px;line-height:18px;font-weight:600;
  letter-spacing:var(--ls1);color:var(--accent);background:rgba(109,73,255,.10);
  border-radius:var(--r100);padding:5px 12px}

/* ============================================================
   LEISTUNGS-BLOECKE — was der Teilnehmer nach 6 Wochen hat.
   Vier Querbloecke innerhalb der Claude-System-Klammer.
   ============================================================ */
.deliver{padding-top:var(--pad160)}
.dblock{padding:52px 0;position:relative}
.dblock + .dblock::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(920px,100%);height:1px;background:rgba(109,73,255,.16)}
.dblock:first-of-type{padding-top:10px}
.dblock-head{display:flex;align-items:baseline;gap:16px;margin-bottom:28px}
.dblock.narrow .dblock-head{max-width:920px;margin-left:auto;margin-right:auto}
.dnum{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.08em;color:var(--accent);flex:none;padding-top:2px}
.dblock-head h3{font-size:28px;line-height:36px;letter-spacing:var(--ls3);font-weight:700;
  max-width:44ch}
.ditems{display:grid;gap:18px;padding-left:29px}
.ditems.four{grid-template-columns:repeat(4,1fr)}
.ditems.three{grid-template-columns:repeat(3,1fr)}
.ditem{background:var(--card-bg);border:1px solid var(--stroke-white);border-radius:var(--r16);
  padding:18px 18px;box-shadow:var(--shadow-card)}
.di-ico{margin-bottom:12px}
.di-ico svg{width:28px;height:28px;display:block}
.di-t{font-weight:600;font-size:15px;line-height:21px;letter-spacing:var(--ls1);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.di-d{margin-top:6px;font-size:13px;line-height:19px;color:var(--grey)}

.case-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-left:29px}
.case-col{background:var(--card-bg);border:1px solid var(--stroke-white);border-radius:var(--r16);
  padding:22px 22px;box-shadow:var(--shadow-card)}
.cc-mod{display:inline-block;font-family:'Manrope','Inter',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  background:rgba(109,73,255,.10);border-radius:var(--r100);padding:5px 12px;margin-bottom:14px}
.case-list{list-style:none;display:flex;flex-flow:column;gap:11px}
.case-list li{position:relative;padding-left:26px;font-size:14px;line-height:21px;color:var(--black)}
.case-list li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;
  border-radius:50%;background:rgba(22,163,74,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' stroke='%2316A34A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat}
.case-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.case-tile{background:var(--page);border:1px solid var(--stroke-soft);
  border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:19px;
  color:var(--black);font-weight:500}
.ct-check{position:absolute;left:13px;top:14px;width:17px;height:17px}
.ct-check svg{width:100%;height:100%;display:block}
.dblock-sub{margin-top:6px;font-size:15px;line-height:22px;color:var(--grey)}
.or-sep{display:flex;align-items:center;gap:16px;margin:2px 0}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:rgba(109,73,255,.22)}
.or-sep span{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  background:rgba(109,73,255,.10);border-radius:var(--r100);padding:6px 16px}

/* Marketing vollbreit, Sales nur als Soon-Zeile */
.case-single{padding-left:0;max-width:920px;margin-inline:auto;display:flex;flex-flow:column;gap:14px}
.case-single .case-col{width:100%}
.case-single .case-cards{grid-template-columns:repeat(5,1fr)}

/* Plastische Case-Karten: Visual + Ergebnis-Satz */
.case-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.case-card{background:var(--page);border:1px solid var(--stroke-soft);border-radius:14px;
  padding:13px;display:flex;flex-flow:column}
.ccv{height:122px;background:#fff;border:1px solid rgba(11,11,18,.07);border-radius:10px;
  padding:12px;display:flex;flex-flow:column;justify-content:center;overflow:hidden;
  margin-bottom:12px}
.ccv .mk{font-size:11px}
.cct{font-weight:700;font-size:14.5px;line-height:20px;letter-spacing:var(--ls1)}
.ccd{font-size:12.5px;line-height:18px;color:var(--grey);margin-top:4px}
/* Website-Mockup */
.mk-web{border:1px solid rgba(11,11,18,.10);border-radius:10px;overflow:hidden;background:#fff}
.mk-web .mk-mw-bar{display:flex;gap:5px;padding:7px 10px;background:rgba(11,11,18,.04);
  border-bottom:1px solid rgba(11,11,18,.07)}
.mk-web-hero{padding:13px 12px;display:flex;flex-flow:column;gap:6px;align-items:flex-start;
  background:linear-gradient(150deg,rgba(109,73,255,.12),rgba(236,72,153,.09))}
.mk-web-hero .wt{display:block;height:7px;border-radius:4px;background:rgba(11,11,18,.22)}
.mk-web-hero .wt.w56{width:56%}
.mk-web-hero .wt.w38{width:38%}
.mk-web-btn{width:58px;height:16px;border-radius:8px;background:var(--accent);margin-top:3px;
  display:block}

.case-note{margin-top:16px;padding-left:0;max-width:920px;margin-inline:auto;font-size:13px;line-height:19px;color:var(--grey)}

.tool-marquee{overflow:hidden;margin-left:29px;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tool-track{display:flex;gap:12px;width:max-content;animation:marquee-left 110s linear infinite}
.tool-marquee:hover .tool-track{animation-play-state:paused}
.tool-chip{display:flex;align-items:center;gap:9px;flex:none;
  background:var(--card-bg);border:1px solid var(--stroke-white);border-radius:var(--r100);
  padding:9px 18px;font-size:14px;font-weight:600;letter-spacing:var(--ls1);
  box-shadow:var(--shadow-card);white-space:nowrap}
.tool-chip img{width:20px;height:20px;border-radius:4px;flex:none}

/* ============================================================
   ZIELBILD-KREIS "Dein AI-Business"
   Ein Kreis aus vier Viertelkreisen, der beim Scrollen in vier
   eigenstaendige Kreise aufbricht (.is-split via site.js).
   Aussen herum schweben Bubbles mit den Bausteinen.
   ============================================================ */
.aibiz{--qd:clamp(280px,58vw,470px);margin-top:56px}
.qstage{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:calc(var(--qd) * 1.46)}
/* Bubble-Ebene liegt deckungsgleich ueber dem Ring, deshalb gelten dieselben Prozente */
.qbubbles{position:absolute;left:50%;top:50%;width:var(--qd);height:var(--qd);
  transform:translate(-50%,-50%);pointer-events:none}
.qring{position:relative;width:var(--qd);height:var(--qd)}

/* Glow hinter dem Kreis */
.qring::before{content:"";position:absolute;left:50%;top:50%;width:154%;height:154%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(109,73,255,.15),transparent 62%);
  opacity:1;transition:opacity .9s var(--ease)}

/* Fugen: machen im Zielbild sichtbar, dass es vier Viertel sind */
.qring::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:50%;
  background:linear-gradient(#fff,#fff) center/3px 100% no-repeat,
             linear-gradient(#fff,#fff) center/100% 3px no-repeat;
  transition:opacity .45s var(--ease)}
.qring.is-split::after{opacity:0}

/* --- die vier Viertel --- */
.qseg{position:absolute;width:50%;height:50%;overflow:hidden;
  background-image:conic-gradient(from 0deg,#4C6BFF,#6D49FF 22%,#8B5CF6 42%,
    #B884FF 58%,#8B5CF6 74%,#4C6BFF 100%);
  background-size:200% 200%;
  transition:transform 1s var(--ease),border-radius 1s var(--ease)}
.qseg.q1{top:0;left:0;border-radius:100% 0 0 0;background-position:0 0}
.qseg.q2{top:0;right:0;border-radius:0 100% 0 0;background-position:100% 0}
.qseg.q3{bottom:0;right:0;border-radius:0 0 100% 0;background-position:100% 100%}
.qseg.q4{bottom:0;left:0;border-radius:0 0 0 100%;background-position:0 100%}

/* Weisse Fuellung, die erst beim Aufbrechen einblendet — Gradient bleibt als Rand */
.qseg::after{content:"";position:absolute;inset:3px;border-radius:inherit;
  background:#fff;opacity:0;transition:opacity .8s var(--ease) .25s}

/* Text in den Vierteln — erst im aufgebrochenen Zustand sichtbar */
.qs-in{position:absolute;inset:0;z-index:2;display:flex;flex-flow:column;
  align-items:center;justify-content:center;gap:7px;text-align:center;
  padding:0 9%;opacity:0;transform:translateY(6px);
  transition:opacity .7s var(--ease) .42s,transform .7s var(--ease) .42s}
.qs-num{font-family:'Manrope','Inter',sans-serif;font-weight:700;
  font-size:clamp(11px,2.4vw,13px);letter-spacing:.14em;color:var(--accent)}
.qs-t{font-family:'Manrope','Inter',sans-serif;font-weight:700;
  font-size:clamp(13px,2.7vw,16px);line-height:1.26;letter-spacing:var(--ls2);
  color:var(--black)}

/* --- Verbindungslinien Kern → Kreise --- */
.qlink{position:absolute;left:50%;top:50%;width:22%;height:1px;z-index:1;
  transform-origin:0 50%;opacity:0;
  background:linear-gradient(90deg,rgba(109,73,255,0),rgba(109,73,255,.55));
  transition:opacity .6s var(--ease) .5s}
.qlink.l1{transform:rotate(225deg)}
.qlink.l2{transform:rotate(315deg)}
.qlink.l3{transform:rotate(45deg)}
.qlink.l4{transform:rotate(135deg)}

/* --- Claude-Kern --- */
.qcore{position:absolute;left:50%;top:50%;z-index:4;
  width:39%;height:39%;border-radius:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-flow:column;align-items:center;justify-content:center;gap:6px;
  background:#0B0B12;border:1px solid rgba(109,73,255,.55);
  box-shadow:0 0 0 7px #fff,0 18px 44px -18px rgba(109,73,255,.55);
  transition:width 1s var(--ease),height 1s var(--ease)}
.qcore-logo{width:clamp(22px,5vw,30px);height:clamp(22px,5vw,30px);border-radius:50%}
.qcore-t,.qcore-s{font-family:'Manrope','Inter',sans-serif;font-weight:700;
  text-align:center;letter-spacing:var(--ls2);line-height:1.2;padding:0 8%;
  transition:opacity .55s var(--ease)}
.qcore-t{font-size:clamp(12px,2.9vw,16px);color:#fff}
.qcore-s{position:absolute;left:0;right:0;top:60%;font-size:clamp(9px,2vw,11px);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-hover);opacity:0}

/* --- Bubbles rund um die vier Kreise --- */
.qb{position:absolute;z-index:5;white-space:nowrap;
  transform:translate(-50%,-50%) scale(.82);opacity:0;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:var(--r100);
  background:#fff;border:1px solid rgba(11,11,18,.09);
  box-shadow:0 2px 4px rgba(11,11,18,.04),0 12px 26px -18px rgba(11,11,18,.45);
  font-size:12.5px;line-height:16px;font-weight:600;letter-spacing:var(--ls1);
  color:var(--black);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.qb::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--accent)}
.aibiz.is-split .qb{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* Je drei Bubbles pro Kreis, symmetrisch auf der Aussenseite:
   senkrecht nach aussen, diagonal, waagerecht nach aussen. */
.qb.g1a{left:17%;top:-14%}    .qb.g1b{left:-4.9%;top:-4.9%}   .qb.g1c{left:-14%;top:17%}
.qb.g2a{left:83%;top:-14%}    .qb.g2b{left:104.9%;top:-4.9%}  .qb.g2c{left:114%;top:17%}
.qb.g3a{left:83%;top:114%}    .qb.g3b{left:104.9%;top:104.9%} .qb.g3c{left:114%;top:83%}
.qb.g4a{left:17%;top:114%}    .qb.g4b{left:-4.9%;top:104.9%}  .qb.g4c{left:-14%;top:83%}

/* Die seitlichen wachsen nach aussen, damit sie nicht in die Kreise laufen */
.qb.g1b,.qb.g1c,.qb.g4b,.qb.g4c{transform:translate(-100%,-50%) scale(.82)}
.aibiz.is-split .qb.g1b,.aibiz.is-split .qb.g1c,
.aibiz.is-split .qb.g4b,.aibiz.is-split .qb.g4c{transform:translate(-100%,-50%) scale(1)}
.qb.g2b,.qb.g2c,.qb.g3b,.qb.g3c{transform:translate(0,-50%) scale(.82)}
.aibiz.is-split .qb.g2b,.aibiz.is-split .qb.g2c,
.aibiz.is-split .qb.g3b,.aibiz.is-split .qb.g3c{transform:translate(0,-50%) scale(1)}

/* leichtes Schweben, sobald sie da sind */
@keyframes qbfloat{from{translate:0 -4px}to{translate:0 5px}}
.aibiz.is-split .qb{animation:qbfloat 5.4s ease-in-out infinite alternate}
.qb.g1b,.qb.g2c,.qb.g3a,.qb.g4b{animation-duration:6.8s;animation-delay:-1.2s}
.qb.g1c,.qb.g2a,.qb.g3b,.qb.g4c{animation-duration:6.2s;animation-delay:-2.6s}

/* ============ aufgebrochener Zustand ============ */
.qring.is-split .qseg{border-radius:50%}
.qring.is-split .q1{transform:translate(-16%,-16%) scale(.93)}
.qring.is-split .q2{transform:translate(16%,-16%)  scale(.93)}
.qring.is-split .q3{transform:translate(16%,16%)   scale(.93)}
.qring.is-split .q4{transform:translate(-16%,16%)  scale(.93)}
.qring.is-split .qseg::after{opacity:1}
.qring.is-split .qs-in{opacity:1;transform:translateY(0)}
.qring.is-split .qlink{opacity:1}
.qring.is-split .qcore{width:31%;height:31%}
.qring.is-split .qcore-t{opacity:0}
.qring.is-split .qcore-s{opacity:1;transition-delay:.5s}
.qring.is-split::before{opacity:.6}

.qcap{margin-top:4px;text-align:center;font-size:15px;line-height:24px;
  font-weight:600;letter-spacing:var(--ls2);color:var(--grey-soft)}

/* Schmale Viewports: rundherum ist kein Platz, deshalb Pillen-Wolke unter dem Kreis */
@media screen and (max-width:900px){
  .aibiz{--qd:clamp(250px,66vw,340px)}
  .qstage{flex-flow:column;min-height:0;padding-bottom:4px}
  .qbubbles{position:static;width:100%;height:auto;transform:none;
    display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:26px}
  .qb{position:static;font-size:11.5px;line-height:15px;padding:5px 11px;gap:6px;
    transform:translateY(8px) scale(1);animation:none!important}
  .aibiz.is-split .qb,
  .aibiz.is-split .qb.g1b,.aibiz.is-split .qb.g1c,
  .aibiz.is-split .qb.g2b,.aibiz.is-split .qb.g2c,
  .aibiz.is-split .qb.g3b,.aibiz.is-split .qb.g3c,
  .aibiz.is-split .qb.g4b,.aibiz.is-split .qb.g4c{
    transform:translateY(0) scale(1)}
  .qb::before{width:5px;height:5px}
}

/* Ohne JS und bei reduzierter Bewegung direkt der aufgebrochene Zustand */
.no-js .qseg,.no-js .qs-in,.no-js .qlink,.no-js .qcore,.no-js .qb{transition:none}
@media (prefers-reduced-motion:reduce){
  .qseg,.qs-in,.qlink,.qcore,.qcore-s,.qseg::after,.qring::before,.qb{transition:none}
  .aibiz.is-split .qb{animation:none}
}

/* ============================================================
   CASE-MOCKUPS: langsame Schleifen
   Laufen erst, wenn der Block sichtbar ist (.dblock.is-in).
   Bewusst lange Zyklen mit Halte-Phasen, damit nichts hektisch wirkt.
   ============================================================ */
.case-card .mk *{transform-origin:left center}

/* 01 LinkedIn Content: Zeilen schreiben sich, dann liegt der Entwurf da */
@keyframes mkLine{0%{transform:scaleX(.06)}18%{transform:scaleX(1)}88%{transform:scaleX(1)}100%{transform:scaleX(.06)}}
@keyframes mkPop{0%,16%{opacity:0;transform:translateY(3px) scale(.94)}
                 30%,90%{opacity:1;transform:translateY(0) scale(1)}
                 100%{opacity:0;transform:translateY(3px) scale(.94)}}
@keyframes mkFade{0%,22%{opacity:0}36%,90%{opacity:1}100%{opacity:0}}
.dblock.is-in .mk-post .mk-bars i{animation:mkLine 11s var(--ease) infinite}
.dblock.is-in .mk-post .mk-bars i:nth-child(2){animation-delay:.7s}
.dblock.is-in .mk-post .mk-e{animation:mkFade 11s var(--ease) infinite}
.dblock.is-in .mk-post .mk-e:nth-of-type(2){animation-delay:.35s}
.dblock.is-in .mk-post .mk-pill{animation:mkPop 11s var(--ease) infinite}

/* 02 Content-Ideen: Balken wachsen von unten, der starke haelt sich */
@keyframes mkBar{0%{transform:scaleY(.12)}22%{transform:scaleY(1)}86%{transform:scaleY(1)}100%{transform:scaleY(.12)}}
.dblock.is-in .mk-chart .mk-b{transform-origin:bottom center;animation:mkBar 12s var(--ease) infinite}
.dblock.is-in .mk-chart .mk-b:nth-child(2){animation-delay:.5s}
.dblock.is-in .mk-chart .mk-b:nth-child(3){animation-delay:1s}
.dblock.is-in .mk-chart .mk-b:nth-child(4){animation-delay:1.5s}
.dblock.is-in .mk-chart .mk-b:nth-child(5){animation-delay:2s}

/* 03 Visuals: die drei Kacheln erscheinen nacheinander */
@keyframes mkTile{0%,6%{opacity:.18;transform:scale(.9)}24%,88%{opacity:1;transform:scale(1)}
                  100%{opacity:.18;transform:scale(.9)}}
.dblock.is-in .mk-tiles .mk-tile{transform-origin:center;animation:mkTile 11s var(--ease) infinite}
.dblock.is-in .mk-tiles .mk-tile.t2{animation-delay:.8s}
.dblock.is-in .mk-tiles .mk-tile.t3{animation-delay:1.6s}

/* 04 Praesentationen: der Stapel faechert leicht auf und legt sich wieder */
@keyframes mkFanA{0%{transform:rotate(3deg) translateX(0)}30%{transform:rotate(7deg) translateX(5px)}
                  70%{transform:rotate(7deg) translateX(5px)}100%{transform:rotate(3deg) translateX(0)}}
@keyframes mkFanB{0%{transform:rotate(6deg) translateX(0)}30%{transform:rotate(13deg) translateX(10px)}
                  70%{transform:rotate(13deg) translateX(10px)}100%{transform:rotate(6deg) translateX(0)}}
.dblock.is-in .mk-stack .mk-sl.s2{transform-origin:bottom left;animation:mkFanA 13s var(--ease) infinite}
.dblock.is-in .mk-stack .mk-sl.s3{transform-origin:bottom left;animation:mkFanB 13s var(--ease) infinite}
.dblock.is-in .mk-stack .mk-sl.s1 i{animation:mkLine 13s var(--ease) infinite}
.dblock.is-in .mk-stack .mk-sl.s1 i:nth-child(2){animation-delay:.6s}

/* 05 Website: Text setzt sich, dann kommt der Button */
.dblock.is-in .mk-web .wt{animation:mkLine 10.5s var(--ease) infinite}
.dblock.is-in .mk-web .wt.w38{animation-delay:.6s}
.dblock.is-in .mk-web .mk-web-btn{transform-origin:center;animation:mkPop 10.5s var(--ease) infinite}

/* 06 Lead-Radar: langsamer Suchlauf, Blips melden sich nacheinander */
@keyframes mkSweep{to{transform:rotate(360deg)}}
@keyframes mkBlip{0%,10%{opacity:.15;transform:scale(.6)}
                  22%{opacity:1;transform:scale(1.25)}
                  34%,88%{opacity:1;transform:scale(1)}
                  100%{opacity:.15;transform:scale(.6)}}
.mk-rad{overflow:hidden;border-radius:50%}
.dblock.is-in .mk-rad::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(109,73,255,.20),transparent 32%);
  animation:mkSweep 14s linear infinite;pointer-events:none}
.dblock.is-in .mk-rad .mk-blip{transform-origin:center;animation:mkBlip 14s var(--ease) infinite}
.dblock.is-in .mk-rad .mk-blip.b2{animation-delay:1.6s}
.dblock.is-in .mk-rad .mk-blip.b3{animation-delay:3.2s}

/* 07 CRM: Zeilen ziehen nach, das neue Label meldet sich zuletzt */
@keyframes mkRow{0%{opacity:0;transform:translateX(-10px)}
                 16%,88%{opacity:1;transform:translateX(0)}
                 100%{opacity:0;transform:translateX(-10px)}}
.dblock.is-in .mk-leads .mk-lead{animation:mkRow 12s var(--ease) infinite}
.dblock.is-in .mk-leads .mk-lead:nth-child(2){animation-delay:.7s}
.dblock.is-in .mk-leads .mk-lead:nth-child(3){animation-delay:1.4s}
.dblock.is-in .mk-leads .mk-lead:nth-child(3) .mk-score{animation:mkPop 12s var(--ease) infinite;
  animation-delay:1.4s;transform-origin:center}

/* 08 Angebote: Position fuellt sich, dann steht die Summe */
.dblock.is-in .mk-doc .mk-pos i{animation:mkLine 11.5s var(--ease) infinite}
.dblock.is-in .mk-doc .mk-pos .mk-eur{animation:mkFade 11.5s var(--ease) infinite}
.dblock.is-in .mk-doc .mk-sum{animation:mkPop 11.5s var(--ease) infinite;animation-delay:.5s;
  transform-origin:center right}

/* 09 Sales-Routinen: Nachricht steht, dann ist sie vorbereitet */
.dblock.is-in .mk-mailwin .mk-bars i{animation:mkLine 10s var(--ease) infinite}
.dblock.is-in .mk-mailwin .mk-bars i:nth-child(2){animation-delay:.6s}
.dblock.is-in .mk-mailwin .mk-pill{animation:mkPop 10s var(--ease) infinite;transform-origin:left center}

/* 10 Sales-Coach: die zwei Punkte haken sich nacheinander ab */
.dblock.is-in .mk-cal .mk-cs{animation:mkRow 11s var(--ease) infinite}
.dblock.is-in .mk-cal .mk-cs:nth-child(2){animation-delay:1.1s}
.dblock.is-in .mk-cal .mk-cal-tile{transform-origin:center;animation:mkPop 11s var(--ease) infinite}

@media (prefers-reduced-motion:reduce){
  .dblock.is-in .mk *,.dblock.is-in .mk-rad::after{animation:none!important}
  .dblock.is-in .mk-rad::after{display:none}
}

/* Klammer um die Kacheln: macht sichtbar, dass alles EIN System ist */
/* ---------- System-Box: bevorzugtes System als Feature, nicht als Bindung (2026-09-01) ---------- */
.sysbox{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  width:fit-content;max-width:min(560px,100%);margin:40px auto 0;padding:18px 28px;
  background:#fff;border:1px solid rgba(109,73,255,.30);border-radius:16px;
  box-shadow:0 12px 30px -22px rgba(11,11,18,.30)}
.sb-main{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.sb-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grey-soft);white-space:nowrap}
.sb-dot{width:8px;height:8px;border-radius:50%;background:#6D49FF;animation:sbBlink 2.6s ease-in-out infinite}
.sb-value{display:inline-flex;align-items:center;gap:9px;
  font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:22px;
  letter-spacing:-.02em;color:var(--black);white-space:nowrap}
.sb-logo{width:26px;height:26px;border-radius:50%}
.sb-note{font-size:13.5px;line-height:21px;color:var(--grey);max-width:54ch}
.sb-note strong{color:var(--black);font-weight:600}
@keyframes sbBlink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.sb-dot{animation:none}}

/* ---------- Zentrale-Punkte als Ghost-Liste (V6 final, 2026-08-22) ---------- */
.zen-row{display:flex;max-width:920px;padding:0 23px;margin:6px auto 0}
.zen-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  background:transparent;border:none;border-left:1px solid rgba(11,11,18,.10);border-radius:0;
  padding:16px 6px;box-shadow:none}
.zen-item:first-child{border-left:none}
.zen-item .ct-ico{width:auto;height:auto;background:transparent;border-radius:0;animation:none;box-shadow:none}
.zen-item .ct-ico svg{width:34px;height:34px}
.zen-item .ct-ico .g-main{fill:#0B0B12}
.zen-item .ct-ico .g-cut{fill:#F5F6FB}
.zen-item .ct-ico .g-acc{fill:#6D49FF}
.zen-l{font-size:12.5px;font-weight:600;line-height:1.25;color:#0B0B12}
@media(max-width:560px){.zen-row{flex-wrap:wrap}.zen-item{flex:1 1 40%}}

/* ---------- Cases als runde schwarze Badges (V6 final, 2026-08-22) ---------- */
.case-icons{display:flex;justify-content:space-between;gap:8px;margin:0}
.case-tile{flex:1;display:flex;flex-direction:column;align-items:center;gap:11px;cursor:pointer;
  background:transparent;border:none;border-radius:0;padding:8px 4px;box-shadow:none;
  font:inherit;color:inherit;line-height:1.25;font-weight:600}
.case-tile:hover{transform:none;border:none;background:transparent}
.case-tile .ct-ico{width:56px;height:56px;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,#5170ff 0%,#8b5cf6 50%,#ff66c4 100%);
  display:flex;align-items:center;justify-content:center;animation:none;
  box-shadow:0 16px 32px -22px rgba(11,11,18,.6);transition:box-shadow .2s}
.case-tile:hover .ct-ico{box-shadow:0 0 0 4px rgba(109,73,255,.16),0 16px 32px -22px rgba(11,11,18,.6)}
.case-tile.active{background:transparent;border:none;box-shadow:none}
.case-tile.active .ct-ico{box-shadow:0 0 0 3px #6D49FF,0 16px 32px -22px rgba(11,11,18,.6)}
.case-tile.active .ct-l{color:#6D49FF}
.ct-ico svg{width:24px;height:24px}
.ct-ico .g-main{fill:#fff}
.ct-ico .g-cut{fill:#0B0B12}
.ct-ico .g-acc{fill:#9985FF}
.ct-l{font-size:12px;font-weight:600;text-align:center;line-height:1.25;color:#0B0B12}
.case-detail{margin:12px 0 0;background:#fff;border:1px solid rgba(109,73,255,.40);border-radius:14px;
  padding:14px 16px}
.cd-t{font-weight:700;font-size:14.5px;margin-bottom:2px}
.cd-d{font-size:14px;line-height:1.5;color:#5A5A66}
.cd-f{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.cd-f li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.45;color:#0B0B12}
.cd-f li::before{content:"✓";position:absolute;left:0;top:0;color:#6D49FF;font-weight:700}

/* Mikro-Animationen IM Icon (Badge steht still) */
.case-tile .ct-ico svg *{transform-box:fill-box}
.case-tile .ct-ico .g-acc{animation:accBreathe 2.6s ease-in-out infinite}
@keyframes accBreathe{0%,100%{opacity:1}50%{opacity:.35}}
.case-tile[data-t="Content-Ideen aus Trends"] rect{transform-origin:center bottom;animation:barGrow 2.8s ease-in-out infinite}
.case-tile[data-t="Content-Ideen aus Trends"] rect:nth-of-type(2){animation-delay:.25s}
.case-tile[data-t="Content-Ideen aus Trends"] rect:nth-of-type(3){animation-delay:.5s}
@keyframes barGrow{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
.case-tile[data-t="LinkedIn-Sales-Routinen"] circle.g-cut{animation:dotBlink 1.6s ease-in-out infinite}
.case-tile[data-t="LinkedIn-Sales-Routinen"] circle.g-cut:nth-of-type(2){animation-delay:.25s}
.case-tile[data-t="LinkedIn-Sales-Routinen"] circle.g-cut:nth-of-type(3){animation-delay:.5s}
@keyframes dotBlink{0%,60%,100%{opacity:1}30%{opacity:.15}}
.case-tile[data-t="Lead-Radar"] circle.g-acc{transform-origin:center;animation:blipPing 2.2s ease-out infinite}
@keyframes blipPing{0%{transform:scale(.6);opacity:1}70%{transform:scale(1.5);opacity:.25}100%{transform:scale(.6);opacity:1}}
.case-tile[data-t="LinkedIn Content"] rect.g-cut,
.case-tile[data-t="Angebote & Rechnungen"] rect.g-cut,
.case-tile[data-t="Präsentationen"] rect.g-cut{animation:lineShimmer 2.8s ease-in-out infinite}
.case-tile[data-t="LinkedIn Content"] rect.g-cut:nth-of-type(2),
.case-tile[data-t="Angebote & Rechnungen"] rect.g-cut:nth-of-type(2),
.case-tile[data-t="Präsentationen"] rect.g-cut:nth-of-type(2){animation-delay:.35s}
@keyframes lineShimmer{0%,100%{opacity:1}50%{opacity:.3}}

@media(max-width:560px){
  .case-tile .ct-ico{width:44px;height:44px}
  .ct-ico svg{width:20px;height:20px}
  .ct-l{font-size:10px}
}
@media (max-width:767px){
  /* Fuenf Kacheln nebeneinander sind auf dem Handy breiter als die Karte: die langen
     Labels ("Praesentationen") erzwingen eine Mindestbreite, die abgeschnitten wurde.
     Deshalb umbrechen, drei pro Reihe. */
  .case-icons{flex-wrap:wrap;justify-content:center;row-gap:14px}
  .case-icons .case-tile{flex:0 0 calc(33.333% - 8px);min-width:0}
  .case-col,.case-single,.dblock.narrow{min-width:0}
}
@media (prefers-reduced-motion:reduce){.case-tile .ct-ico svg *,.case-tile .ct-ico{animation:none!important}}

/* ---------- Bonus-Blöcke (Feedback Irene, 2026-08-21) ---------- */
.pjx-bonus{margin-top:24px;max-width:860px;margin-left:auto;margin-right:auto}
.pjx-bonus-head{text-align:center;font-family:'Manrope','Inter',sans-serif;font-weight:700;
  font-size:14.5px;letter-spacing:-.01em;margin-bottom:10px}
.bonus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:820px){.bonus-grid{grid-template-columns:1fr}}
.bonus-item{background:#fff;border:1px dashed rgba(109,73,255,.45);border-radius:12px;padding:10px 14px}
.bonus-tag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:#0B0B12;border-radius:99px;padding:2px 7px;margin-bottom:5px}
.bonus-t{font-weight:700;font-size:13.5px}
.bonus-d{font-size:12px;line-height:1.45;color:#5A5A66;margin-top:1px}

.system-frame{margin-top:56px;border:1px solid rgba(109,73,255,.30);border-radius:28px;
  padding:26px;background:rgba(109,73,255,.035)}
.system-frame .future-grid{margin-top:0}
.sf-top{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 6px 30px}
.sf-logo{width:30px;height:30px;border-radius:50%;flex:none}
.sf-label{font-family:'Manrope','Inter',sans-serif;font-weight:700;font-size:22px;
  letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
/* Grosse Gradient-Variante als zweite Ueberschrift im Rahmen (2026-08-28) */
.sf-label.big{font-weight:800;font-size:var(--h3-fs);line-height:var(--h3-lh);
  letter-spacing:-.02em;text-transform:none;color:inherit}
.sf-foot{margin-top:24px;padding-top:20px;border-top:1px solid rgba(109,73,255,.16);
  text-align:center;font-size:16px;line-height:24px;font-weight:600;
  letter-spacing:var(--ls2);color:var(--black)}

/* Future-Grid Flip-Cards (Überbegriffe analog Solopreneur-OS-Schaubild) */
.fcard{position:relative;display:flex;min-height:264px;perspective:1200px;outline:none}
.fcard-inner{position:relative;flex:1;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.fcard.is-flipped .fcard-inner{transform:rotateY(180deg)}
.fcard{cursor:pointer}
.fcard-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--card-bg);border:1px solid var(--stroke-white);border-radius:var(--r20);
  padding:28px 26px 24px;display:flex;flex-flow:column;gap:10px;box-shadow:var(--shadow-card)}
/* Überschrift im Markenverlauf, auf beiden Seiten */
.fcard-face h4{font-size:19px;line-height:27px;letter-spacing:var(--ls3);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  padding-bottom:.06em;align-self:flex-start}
/* Vorderseite dunkel, Überschrift schlicht weiss (Gradient bleibt der Rueckseite) */
.fcard-front{background:var(--black);border-color:rgba(255,255,255,.10)}
.fcard-front h4{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--white);-webkit-text-fill-color:var(--white)}
.fcard-front p{color:rgba(255,255,255,.68);font-size:var(--p3-fs);line-height:22px}
.fcard-front .ft-icon{background:rgba(255,255,255,.08);color:var(--accent-hover)}
.fcard-front::after{content:"";position:absolute;right:20px;bottom:20px;width:26px;height:26px;
  border-radius:50%;background:rgba(255,255,255,.10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h14M13 7l5 5-5 5' stroke='%239985FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:14px;background-position:center;background-repeat:no-repeat}
.fcard-back{transform:rotateY(180deg);border-color:rgba(109,73,255,.45);
  box-shadow:0 3px 6px rgba(11,11,18,.05),0 34px 60px -28px rgba(109,73,255,.45)}
.fcard-back ul{display:flex;flex-flow:column;gap:10px;margin:4px 0 0;padding:0;list-style:none}
.fcard-back li{position:relative;padding-left:20px;color:var(--grey);font-size:var(--p3-fs);line-height:21px}
.fcard-back li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;
  background:var(--accent)}

/* Sektions-Bänder: Flächenwechsel Off-White ↔ Weiß für klarere Trennung */
.band{background-color:var(--bg-color);
  border-top:1px solid rgba(11,11,18,.05);border-bottom:1px solid rgba(11,11,18,.05)}
.pb160{padding-bottom:var(--pad160)}
.pb56{padding-bottom:56px}

/* Blueprint als Bild (programm-ueberblick.png) — Scroll-Container aussen, gestylte Box innen */
.bp-scroll{margin:56px auto 0;max-width:1080px}
.bp-illustration{border-radius:var(--r20);overflow:hidden;
  border:1px solid var(--stroke-white);box-shadow:var(--shadow-card);background:#fff}
.bp-illustration img{display:block;width:100%;height:auto}
.bp-hint{display:none;text-align:center;margin-top:10px;font-size:12px;color:var(--grey-soft);
  letter-spacing:var(--ls1)}

/* Claude-Logo im Kontrast-Label */
.contrast-card .c-label{display:flex;align-items:center;gap:9px}
.contrast-card .c-logo{width:18px;height:18px;border-radius:50%;flex:none}

/* ============================================================
   BLUEPRINT — Programm-Schaubild
   ============================================================ */
.blueprint-section .step-grid{margin-top:40px}
/* Abstand + eigene Überschrift zwischen Schaubild und Ablauf-Schritten */
.step-intro{margin-top:112px;text-align:center}
.steps-heading{font-size:34px;line-height:42px;letter-spacing:var(--ls3);font-weight:600}
.bp{margin-top:56px;background:#FAFAFC;border:1px solid var(--stroke-white);
  border-radius:24px;padding:30px 28px 26px;box-shadow:var(--shadow-card)}
.bp-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.bp-title{flex:1;text-align:center;background:var(--card-bg);border-radius:16px;padding:16px 24px;
  box-shadow:var(--shadow-card)}
.bp-t1{font-family:'Manrope','Inter',sans-serif;font-weight:800;font-size:26px;line-height:32px;
  color:var(--accent);letter-spacing:var(--ls3)}
.bp-t2{font-family:'Manrope','Inter',sans-serif;font-weight:800;font-size:22px;line-height:30px;
  color:var(--black);letter-spacing:var(--ls3);margin-top:2px}
.bp-powered{flex:none;display:flex;flex-flow:column;align-items:center;gap:7px}
.bp-powered-label{font-size:12px;line-height:16px;color:var(--grey-soft);letter-spacing:var(--ls1)}
.bp-powered img{width:38px;height:38px;border-radius:10px}
.bp-body{display:grid;grid-template-columns:186px 1fr 186px;gap:22px;align-items:start}
.bp-side{display:flex;flex-flow:column;gap:16px;justify-content:space-between;height:100%}
.bp-cluster{background:var(--card-bg);border:1px solid var(--stroke-white);border-radius:14px;
  padding:14px;display:flex;flex-flow:column;gap:7px}
.bp-cluster-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey-soft);margin-bottom:2px}
.bp-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-radius:9px;padding:7px 11px;font-size:13px;font-weight:600;letter-spacing:var(--ls1)}
.bp-chip.is-live{background:rgba(109,73,255,.10);border:1px solid rgba(109,73,255,.32);color:var(--black)}
.bp-chip.is-soon{background:rgba(11,11,18,.04);border:1px dashed rgba(11,11,18,.16);color:var(--grey-soft)}
.bp-chip-tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.bp-chip.is-live .bp-chip-tag{color:var(--accent)}
.bp-chip.is-soon .bp-chip-tag{color:var(--grey-soft)}
.bp-person{display:flex;flex-flow:column;align-items:center;gap:10px}
.bp-fig{width:84px;display:block}
.bp-fig.win{animation:bp-cheer 4.5s ease-in-out infinite}
.bp-person-box{width:100%;background:var(--card-bg);border:1px solid rgba(109,73,255,.30);
  border-radius:14px;padding:13px 15px}
.bp-person-box.win{border-color:rgba(109,73,255,.55);background:rgba(109,73,255,.05)}
.bp-person-title{font-size:13px;font-weight:700;letter-spacing:var(--ls1);margin-bottom:6px}
.bp-person-box ul{list-style:none;display:flex;flex-flow:column;gap:5px}
.bp-person-box li{position:relative;padding-left:13px;font-size:12.5px;line-height:18px;color:var(--grey)}
.bp-person-box li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
.bp-side.right{justify-content:flex-end}
.bp-track{display:flex;align-items:stretch;gap:6px}
.bp-week{flex:1;min-width:0;display:flex;flex-flow:column;gap:8px}
.bp-week-when{text-align:center;font-size:13px;font-weight:700;letter-spacing:var(--ls1);color:var(--black)}
.bp-week-card{background:var(--card-bg);border:1px solid rgba(109,73,255,.32);border-radius:16px;
  padding:14px 12px;display:flex;flex-flow:column;gap:10px;height:100%;min-height:280px;
  transition:border-color .3s,box-shadow .3s,transform .3s}
.bp-week-card:hover{border-color:rgba(109,73,255,.7);transform:translateY(-4px);
  box-shadow:0 20px 40px -24px rgba(109,73,255,.5)}
.bp-week-title{text-align:center;font-family:'Manrope','Inter',sans-serif;font-weight:800;
  font-size:17px;line-height:23px;letter-spacing:var(--ls3)}
.bp-week-title.accent{color:var(--accent)}
.bp-week-tags{display:flex;flex-flow:column;gap:5px;align-items:center}
.bp-week-tags span{font-size:12.5px;font-weight:600;color:var(--black)}
.bp-week-vision{text-align:center;font-size:12.5px;line-height:18px;color:var(--grey);
  flex:1;display:grid;align-content:center}
.bp-week-vision strong{color:var(--accent)}
.bp-week-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:center;
  flex:1;position:relative;padding-top:4px}
.bp-week-split::before{content:"";position:absolute;top:2px;bottom:2px;left:50%;
  border-left:2px dotted rgba(11,11,18,.18)}
.bp-half{text-align:center;font-size:11.5px;line-height:16px;font-weight:600;color:var(--black);
  display:flex;flex-flow:column;align-items:center;gap:5px;padding:0 2px}
.bp-star svg{width:20px;height:20px;color:var(--black);display:block}
.bp-week-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--stroke-white);
  display:flex;align-items:flex-start;justify-content:center;gap:6px}
.bp-week-foot.single{justify-content:center}
.bp-slot{flex:1;text-align:center;font-size:10.5px;line-height:14px;color:var(--grey);
  display:flex;flex-flow:column;align-items:center;gap:5px}
.bp-week-foot.single .bp-slot{flex:none;max-width:130px}
.bp-slot-ico{width:30px;height:30px;border-radius:50%;background:var(--black);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none}
.bp-slot-ico svg{width:17px;height:17px}
.bp-plus{flex:none;color:var(--accent);font-weight:700;font-size:15px;line-height:30px}
.bp-arrow{flex:none;width:20px;display:flex;align-items:center;justify-content:center;gap:1px;
  padding-top:21px}
.bp-arrow span{width:0;height:0;border-left:8px solid var(--accent);
  border-top:6px solid transparent;border-bottom:6px solid transparent;opacity:.35;
  animation:bp-flow 2.4s ease-in-out infinite}
.bp-arrow span:nth-child(2){animation-delay:.18s}
.bp-track > .bp-arrow:nth-child(4) span{animation-delay:.5s}
.bp-track > .bp-arrow:nth-child(4) span:nth-child(2){animation-delay:.68s}
.bp-track > .bp-arrow:nth-child(6) span{animation-delay:1s}
.bp-track > .bp-arrow:nth-child(6) span:nth-child(2){animation-delay:1.18s}
.bp-bars{margin-top:20px;display:flex;flex-flow:column;gap:9px}
.bp-bar{position:relative;overflow:hidden;background:var(--card-bg);
  border:1px solid rgba(109,73,255,.32);border-radius:12px;padding:13px 18px;text-align:center;
  font-size:14.5px;font-weight:600;letter-spacing:var(--ls1);color:var(--black)}
.bp-bar::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;
  background:linear-gradient(90deg,rgba(109,73,255,0) 0%,rgba(109,73,255,.11) 50%,rgba(109,73,255,0) 100%);
  animation:bp-sweep 6s linear infinite}
.bp-bars .bp-bar:nth-child(2)::after{animation-delay:.8s}
.bp-bars .bp-bar:nth-child(3)::after{animation-delay:1.6s}
@keyframes bp-flow{0%,100%{opacity:.3;transform:translateX(-2px)}50%{opacity:1;transform:translateX(2px)}}
@keyframes bp-sweep{0%{left:-40%}60%,100%{left:110%}}
@keyframes bp-cheer{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Cases direkt an den Inline-CTA anschliessen */
.capabilities.tight-bottom{padding-bottom:0}
.cta-inline.tight{margin-top:52px}

/* ============================================================
   FIT — Fuer wen ist das Ganze
   ============================================================ */
.fit{padding-top:var(--pad160)}
.fit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.fit-card{background:var(--card-bg);border:1px solid var(--stroke-white);border-radius:var(--r20);
  padding:30px 28px;display:flex;flex-flow:column;gap:12px;box-shadow:var(--shadow-card);
  transition:border-color .3s,transform .3s}
.fit-card:hover{border-color:rgba(109,73,255,.4);transform:translateY(-3px)}
.fit-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(109,73,255,.10);color:var(--accent)}
.fit-icon svg{width:23px;height:23px}
.fit-card h4{font-size:21px;line-height:29px;letter-spacing:var(--ls3)}
.fit-card p{color:var(--grey);font-size:var(--p2-fs);line-height:var(--p2-lh)}

/* ============================================================
   VIDEO-TESTIMONIAL — Platzhalter-Kachel
   ============================================================ */
.tst.tst-video{background:var(--black);border-color:rgba(255,255,255,.14);
  justify-content:space-between;gap:16px}
.tst.tst-video:hover{border-color:rgba(109,73,255,.6);transform:translateY(-3px)}
.tstv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;background:#000}
.tstv-frame:has(.tstv-video){aspect-ratio:16/9;flex:initial}
.tstv-frame{position:relative;flex:1;min-height:150px;border-radius:12px;
  background:linear-gradient(140deg,#1A1730 0%,#0B0B12 60%);
  border:1px dashed rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.tstv-play{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 0 rgba(109,73,255,.45);animation:tstv-ring 2.8s ease-out infinite}
.tstv-play svg{width:20px;height:20px;margin-left:3px}
.tstv-dummy{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r100);padding:3px 9px}
.tstv-cap{font-size:13px;font-weight:600;line-height:19px;color:#fff;letter-spacing:var(--ls1)}
.tstv-cap span{font-weight:500;color:rgba(255,255,255,.55)}
@keyframes tstv-ring{0%{box-shadow:0 0 0 0 rgba(109,73,255,.5)}70%{box-shadow:0 0 0 16px rgba(109,73,255,0)}100%{box-shadow:0 0 0 0 rgba(109,73,255,0)}}

/* ============================================================
   RESPONSIVE fuer die neuen Bloecke
   ============================================================ */
@media screen and (max-width:1100px){
  .bp-body{grid-template-columns:1fr;gap:18px}
  .bp-side{flex-flow:row;gap:16px;align-items:stretch}
  .bp-side .bp-cluster,.bp-side .bp-person{flex:1}
  .bp-side.right .bp-person{flex-flow:row;align-items:center;gap:14px}
  .bp-track{align-items:stretch;flex-flow:wrap}
  .bp-week{flex:1 1 45%}
  .bp-arrow{display:none}
}
@media screen and (max-width:991px){
  .future-grid{grid-template-columns:1fr 1fr}
  .fit-grid{grid-template-columns:1fr}
  .page-hero.tight{height:auto;min-height:auto;padding-top:140px;padding-bottom:80px}
  .page-hero.tight h1{font-size:42px;line-height:50px}
  .spf{max-width:640px;height:380px}
  .spf-node{padding:8px 12px;font-size:12px}
  .pain-close{font-size:19px;line-height:28px;margin-top:32px}
  .bp{padding:22px 18px}
  .bp-top{flex-flow:column-reverse;gap:14px}
  .bp-t1{font-size:21px;line-height:27px}
  .bp-t2{font-size:18px;line-height:25px}
}
@media screen and (max-width:991px){
  .ditems.four{grid-template-columns:1fr 1fr}
  .case-cards,.case-single .case-cards{grid-template-columns:1fr 1fr}
  .ditems.three{grid-template-columns:1fr}
  .case-cols{grid-template-columns:1fr}
  .dblock-head h3{font-size:23px;line-height:31px}
}
@media screen and (max-width:991px){
  .ps-inner{flex-flow:column;align-items:flex-start;gap:26px}
  .ps-stats{gap:32px}
  .ps-stat b{font-size:24px;line-height:30px}
}
@media screen and (max-width:991px){
  .trainer-grid{grid-template-columns:1fr;gap:36px;max-width:520px}
  .trainer-text p{max-width:none}
  .trainer-stats{gap:12px;margin-top:28px}
  .tr-stat b{font-size:26px;line-height:32px}
}
@media screen and (max-width:991px){
  .page-hero .hero-duo,.page-hero.tight .hero-duo{flex-flow:column;gap:36px}
  .page-hero .hero-duo .page-hero-inner{align-items:center;text-align:center}
  .page-hero .hero-duo .page-hero-sub{margin-left:auto;margin-right:auto}
  .page-hero .hero-duo .section-button-wrap{justify-content:center}
  .page-hero .hero-duo .hero-photo-wrap,
  .page-hero.tight .hero-duo .hero-photo-wrap{width:100%;max-width:330px;margin:0 auto}
  .page-hero .hero-duo .float-card.fc-1{left:-8px;top:5%}
  .page-hero .hero-duo .float-card.fc-2{left:-8px;right:auto;bottom:25%;max-width:214px}
}
@media screen and (max-width:991px){
  .cta-v1-image-wrap.photo{width:100%;max-width:340px;margin:0 auto;height:auto}
  .cta-photo .float-card.fc-1{left:-8px;top:4%}
  .cta-photo .float-card.fc-2{left:-8px;right:auto;top:auto;bottom:26%;max-width:220px}
  .cta-photo .hero-nametag{bottom:6%}
}
@media screen and (max-width:767px){
  .ditems,.case-cols,.case-note,.case-single{padding-left:0}
  .tool-marquee{margin-left:0}
  .case-tiles{grid-template-columns:1fr}
  .case-cards,.case-single .case-cards{grid-template-columns:1fr}
  .ditems.four{grid-template-columns:1fr}
  .dblock-head{gap:12px;margin-bottom:20px}
  .dblock-head h3{font-size:21px;line-height:29px}
  .dblock{padding:36px 0}
  .tool-chip{font-size:13px;padding:8px 14px}
}
@media screen and (max-width:767px){
  .future-grid{grid-template-columns:1fr}
  .bp-side{flex-flow:column}
  .bp-week{flex:1 1 100%}
  .page-hero.tight h1{font-size:32px;line-height:40px}
  .sysbox{margin-top:28px;padding:16px 20px;gap:8px}
  .sb-main{gap:10px}
  .sb-value{font-size:19px}
  .sb-note{font-size:12.5px;line-height:18px}
  .system-frame{padding:16px;border-radius:20px}
  .sf-top{padding:2px 2px 16px}
  .sf-foot{margin-top:18px;padding-top:16px;font-size:15px;line-height:22px}
  /* Flip-Cards brauchen mobil weniger Bauhöhe, sonst scrollt die Sektion endlos */
  .fcard{min-height:212px}
  .fcard-face{padding:22px 20px 20px}
  /* Breites Programm-Schaubild bleibt lesbar: seitlich wischbar statt zerquetscht */
  .bp-scroll{margin-top:40px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bp-illustration{min-width:720px}
  .bp-hint{display:block}
  /* SPF-Graph: der Kreis passt mobil nicht, wird zu Kern oben + Knoten-Raster */
  .spf{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:auto;max-width:420px;
    margin-top:36px;justify-items:stretch}
  .spf-svg{display:none}
  .spf-core{position:static;order:1;grid-column:1/-1;justify-self:center;transform:none;
    width:112px;height:112px}
  .spf-label{position:static;order:2;grid-column:1/-1;justify-self:center;transform:none;
    margin:14px 0 6px}
  .spf-node{position:static;order:3;transform:none;white-space:normal;text-align:center;
    padding:11px 10px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .bp-arrow span,.bp-bar::after,.bp-fig.win,.tstv-play{animation:none}
  .ftile:hover{transform:none}
  .fcard-inner{transition:none}
  .spf-core,.spf-flow{animation:none}
}

/* ============================================================
   SCROLL-FILM: alte Welt -> neue Welt
   Neun vollflaechige Szenen, sechs Saetze, scroll-gesteuert.
   Ersetzt auf der Programm-Seite die Kontrast-Sektion.
   ============================================================ */
/* ---------- Buehne ---------- */
.film{position:relative;height:520vh}
.film-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#EFEBFA;--p:0}

/* ---------- Szenen ---------- */
.sc{position:absolute;inset:0;opacity:0;will-change:opacity}
.sc-img{position:absolute;inset:-7%;background-size:cover;background-position:center;
  will-change:transform,filter;
  /* --lift laeuft 0..1: 0 = alte Welt gedrueckt, 1 = neue Welt offen */
  filter:brightness(calc(.96 + var(--lift,0) * .10))
         saturate(calc(.70 + var(--lift,0) * .45))
         contrast(calc(1.02 - var(--lift,0) * .02))}
/* Grade je Szene: oben und unten abdunkeln, damit die Schrift immer sitzt */
.sc::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,18,48,.20) 0%,rgba(24,18,48,.02) 40%,rgba(24,18,48,.34) 100%)}
.sc.warm::after{background:linear-gradient(180deg,rgba(24,18,48,.16) 0%,rgba(24,18,48,0) 42%,rgba(24,18,48,.28) 100%)}

.s1 .sc-img{background-image:url('img/film/01b-ueberfordert.png')}
.s2 .sc-img{background-image:url('img/film/02-die-liste.png')}
.s3 .sc-img{background-image:url('img/film/03b-haende-weg.png')}
.s4 .sc-img{background-image:url('img/film/05-das-system.png')}
.s5 .sc-img{background-image:url('img/film/07-freier-morgen.png')}

/* ---------- Marken-Lasur ueber allem ----------
   Zieht die ganze Strecke in AI&DU-Lila, unten waermer werdend.
   --w laeuft 0..1 mit dem Scroll und macht aus kaltem Lila warmes Licht. */
.grade{position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:calc(.35 + var(--lift,0) * .65);
  background:
    radial-gradient(120% 80% at 50% 108%, rgba(109,73,255,calc(.10 + var(--w) * .20)), transparent 66%),
    radial-gradient(90% 70% at 12% 0%,   rgba(109,73,255,calc(.08 + var(--w) * .08)), transparent 68%),
    linear-gradient(180deg, rgba(109,73,255,.07), rgba(109,73,255,.02) 45%, rgba(109,73,255,.10));
  mix-blend-mode:screen}
/* Vignette haelt den Blick in der Mitte */
/* Der Film sitzt in einer hellen Seite: Ober- und Unterkante weich ausblenden,
   damit der Block nicht wie aufgeklebt wirkt. */
.edges{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    linear-gradient(180deg,#F5F5F7 0,rgba(245,245,247,.65) 34px,rgba(245,245,247,0) 108px),
    linear-gradient(0deg,  #F5F5F7 0,rgba(245,245,247,.65) 34px,rgba(245,245,247,0) 108px)}

.vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(78% 76% at 50% 48%, transparent 42%,
    rgba(30,22,60,calc(.22 - var(--lift,0) * .10)) 100%)}
/* Deckel ueber der alten Welt, loest sich beim Wechsel auf */
.dim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:rgba(30,22,60,calc(.07 - var(--lift,0) * .07))}

/* ---------- Saetze ---------- */
.lines{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  padding:0 6vw;pointer-events:none}
.lines::before{content:"";position:absolute;left:0;right:0;top:16%;bottom:12%;
  background:radial-gradient(64% 72% at 50% 50%,rgba(22,16,44,.62),transparent 76%)}
.ln{position:absolute;text-align:center;max-width:19ch;
  font-family:'Manrope','Inter',sans-serif;font-weight:700;
  font-size:clamp(30px,5.4vw,70px);line-height:1.06;letter-spacing:-.045em;
  color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45),0 4px 46px rgba(0,0,0,.6);
  opacity:0;will-change:opacity,transform}
/* laengere Zeilen brauchen mehr Breite und etwas kleinere Schrift */
.ln.wide{max-width:26ch;font-size:clamp(27px,4.4vw,58px);line-height:1.12}
.ln em{font-style:normal;
  background:linear-gradient(90deg,#D8CCFF,#B9A5FF 50%,#8B6BFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(7,7,12,.75)) drop-shadow(0 6px 30px rgba(7,7,12,.6))}
.ln small{display:block;margin-top:22px;font-size:clamp(14px,1.5vw,19px);
  font-weight:600;letter-spacing:var(--ls1);line-height:1.55;
  color:rgba(255,255,255,.92);text-shadow:0 2px 18px rgba(0,0,0,.8);
  max-width:26ch;margin-left:auto;margin-right:auto}

/* ---------- Kapitel oben ---------- */
/* etwas tiefer als im Prototyp: auf der Seite sitzt oben die Navigation */
.chap{position:absolute;left:0;right:0;top:14vh;z-index:5;text-align:center;
  font-family:'Manrope','Inter',sans-serif;font-weight:700;
  letter-spacing:.18em;font-size:12px;text-transform:uppercase}
.chap span{position:absolute;left:0;right:0;opacity:0}
.chap .k1{color:rgba(255,255,255,.82);text-shadow:0 2px 14px rgba(22,16,44,.7)}
.chap .k2{color:#D8CCFF;text-shadow:0 0 26px rgba(153,133,255,.55)}

/* ---------- Taktzeiger: zeigt, wie weit der Film ist ---------- */
.beats{position:absolute;left:50%;bottom:5.5vh;z-index:5;transform:translateX(-50%);
  display:flex;gap:7px;opacity:calc(.25 + var(--w) * .35)}
.beat{width:16px;height:2px;border-radius:2px;background:rgba(255,255,255,.22);
  transition:background .4s linear}
.beat.on{background:#9985FF}

/* Pfeil am Ende: fuehrt aus dem Film zurueck in die Seite */
.outro{position:absolute;left:50%;bottom:12vh;z-index:6;transform:translateX(-50%);
  display:flex;flex-flow:column;align-items:center;gap:10px;
  opacity:0;pointer-events:none;transition:opacity .5s linear}
.outro-t{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.72);text-shadow:0 2px 14px rgba(7,7,12,.8)}
.outro-a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:outroBob 2.4s ease-in-out infinite}
.outro-a svg{width:17px;height:17px;color:#fff}
@keyframes outroBob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}

.hint{position:absolute;left:0;right:0;bottom:11vh;z-index:5;text-align:center;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.35);opacity:calc(1 - var(--p) * 9)}
.bar{position:fixed;left:0;top:0;height:2px;z-index:40;
  background:linear-gradient(90deg,#6D49FF,#C7B6FF);width:calc(var(--gp,0) * 100%)}

@media screen and (max-width:900px){
  .film{height:470vh}
  .ln{max-width:14ch}
  .ln.wide{max-width:19ch}
}
@media (prefers-reduced-motion:reduce){
  .film{height:auto}
  .film-stage{position:static;height:auto}
  .sc{position:relative;height:62vh;opacity:1;margin-bottom:2px}
  .sc-img{inset:0}
  .grade,.vig,.beats,.hint,.outro,.edges{display:none}
  .lines{position:absolute}
  .ln{position:static;opacity:1}
  .ln:not(:first-child){display:none}
}