/* =====================================================================
   Make It Film · v2.css · Seite nach Vorlage ecom-mails.de (Aufbau) und grundwerk.digital (Leistungs-Kacheln, Ablauf)
   Ruhig: ein großer Satz und ein echter Beweis je Abschnitt, Orange nur als Akzent und im Rechner.
   Baut auf core.css (Tokens, .wrap, .btn, .h2) und sections.css (Kopf, Fuß, FAQ) auf.
   ===================================================================== */

/* ---------- Gemeinsame Bausteine ---------- */
.v-eyebrow{margin:0 0 18px;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.v-eyebrow--dark{color:#1a0d00}
.v-head{max-width:820px;margin-bottom:clamp(40px,5vw,72px)}
.v-head .h2{font-weight:700;letter-spacing:-.035em}
.v-sub{margin-top:clamp(16px,2vw,24px);max-width:56ch;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.55;color:var(--fg-2)}
.v-checks{display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:.9375rem;color:var(--fg-2)}
.v-checks li{display:flex;align-items:center;gap:8px}
.v-checks--col{flex-direction:column;gap:14px;font-size:1.0625rem;color:var(--fg)}
.v-check{width:20px;height:20px;flex:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.v-check circle{fill:rgba(255,137,0,.14);stroke:none}
.v-check path{stroke:var(--accent);stroke-width:1.8}
.btn--light{--btn-bg:#fff;--btn-fg:#0b0b0c}

/* ---------- 1 Hero ---------- */
.vh{position:relative;overflow:hidden;min-height:min(100svh,980px);display:flex;align-items:center;
  padding-top:calc(var(--hdr-h) + clamp(32px,5vw,72px));padding-bottom:clamp(56px,7vw,96px)}
.vh__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.vh__collage{position:absolute;top:-6%;bottom:-6%;right:-2%;width:58%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  transform:rotate(-6deg);opacity:.62}
.vh__col{display:flex;flex-direction:column;gap:14px;animation:vh-up 60s linear infinite}
.vh__col--2{animation-duration:72s;animation-direction:reverse;margin-top:-12%}
.vh__col--3{animation-duration:66s;margin-top:-4%}
.vh__col img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover;object-position:top;border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 50px -30px #000}
@keyframes vh-up{to{transform:translateY(-30%)}}
.vh__fade{position:absolute;inset:0;background:
  linear-gradient(90deg,var(--bg) 0%,var(--bg) 38%,rgba(11,11,12,.86) 52%,rgba(11,11,12,.25) 78%,rgba(11,11,12,.55) 100%),
  linear-gradient(0deg,var(--bg) 0%,rgba(11,11,12,0) 22%),linear-gradient(180deg,var(--bg) 0%,rgba(11,11,12,0) 18%)}
.vh__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--gap);align-items:end;width:100%}
.vh__text{max-width:680px;padding-bottom:clamp(8px,2vw,32px)}
.vh__h1{font-size:clamp(2.75rem,6vw,6rem);font-weight:800;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.vh__h1 em{font-style:normal;color:var(--accent)}
.vh__sub{margin:clamp(20px,2.4vw,30px) 0 clamp(26px,3vw,36px);max-width:34em;font-size:clamp(1.125rem,1.45vw,1.375rem);line-height:1.5;color:var(--fg-2)}
.vh__shavis{position:relative;margin:0;justify-self:end;width:min(100%,400px)}
.vh__shavis img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 80px -40px #000;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.vh__shavis figcaption{position:absolute;left:18px;bottom:16px;display:flex;flex-direction:column;font-size:.875rem;color:var(--fg-2)}
.vh__shavis figcaption strong{font-size:1.125rem;color:var(--fg)}

/* ---------- 2 Kundenband ---------- */
.band{padding:clamp(28px,3.5vw,44px) 0;border-block:1px solid var(--line);overflow:hidden}
.band__k{margin:0 0 18px;text-align:center;font-size:.875rem;color:var(--fg-3)}
.band__run{display:flex;width:max-content;animation:band 40s linear infinite}
.band__list{display:flex;gap:clamp(40px,6vw,88px);margin:0;padding:0 clamp(20px,3vw,44px);list-style:none}
.band__list li{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:700;letter-spacing:-.02em;white-space:nowrap;color:rgba(243,239,232,.55)}
@keyframes band{to{transform:translateX(-50%)}}

/* ---------- 3 Problem: nicht nur die Krise + drei Irrtümer ---------- */
.problem .v-ps,.azubi .v-ps{margin-top:clamp(18px,2.2vw,28px);display:grid;gap:10px;max-width:44ch}
.problem .v-ps p,.azubi .v-ps p{margin:0;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.5;color:var(--fg-2)}
.problem .h2 em,.azubi .h2 em{font-style:normal;color:var(--accent)}
.irrtum__h{margin:0 0 22px;font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.02em}
.irrtum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin:0;padding:0;list-style:none}
.irrtum__c{position:relative;padding:clamp(24px,2.6vw,34px);border-radius:16px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.irrtum__n{display:grid;place-items:center;width:34px;height:34px;margin-bottom:20px;border-radius:50%;background:rgba(255,137,0,.12);color:var(--accent);font-weight:700}
.irrtum__q{margin:0 0 14px;font-size:clamp(1.125rem,1.5vw,1.375rem);font-weight:700;line-height:1.3;letter-spacing:-.015em;
  text-decoration:line-through;text-decoration-color:rgba(255,137,0,.85);text-decoration-thickness:2px}
.irrtum__a{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--fg-2)}

/* ---------- 3b Azubi: der falsche Ausweg ---------- */
.azubi__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center}
.azubi__text .h2{font-weight:700;letter-spacing:-.035em}
.azubi__q{margin:clamp(26px,3vw,36px) 0 0;padding:20px 24px;border-left:3px solid var(--accent);border-radius:0 14px 14px 0;background:var(--bg-2)}
.azubi__q p{margin:0;font-size:clamp(1.125rem,1.6vw,1.4rem);font-weight:600;line-height:1.4;letter-spacing:-.01em}
.azubi__q cite{display:block;margin-top:8px;font-style:normal;font-size:.875rem;color:var(--fg-2)}
.azubi__fazit{margin:22px 0 0;font-size:clamp(1.125rem,1.5vw,1.3rem);font-weight:700;color:var(--accent)}
.azubi__ph{justify-self:center;width:min(100%,340px);margin:0;padding:9px;border-radius:44px;background:linear-gradient(145deg,#2c2c31,#0f0f11);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 60px 80px -40px #000;transform:rotate(2.5deg)}
.azubi__screen{position:relative;overflow:hidden;border-radius:36px;aspect-ratio:9/16;background:#222}
.azubi__screen img{display:block;width:100%;height:100%;object-fit:cover}
.azubi__ui{position:absolute;right:12px;bottom:70px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;font-size:1.25rem;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.azubi__ui i{font-style:normal}.azubi__ui b{margin-bottom:10px;font-size:.75rem;font-weight:600}
.azubi__cap{position:absolute;left:14px;right:60px;bottom:22px;color:#fff;font-size:.875rem;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.7)}

/* ---------- 3 Problem (Agentur-Report bleibt, Kopf wie ecom) ---------- */
.agenturen .v-ps{margin-top:clamp(18px,2.2vw,28px);display:grid;gap:10px;max-width:40ch}
.agenturen .v-ps p{margin:0;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.5;color:var(--fg-2)}

/* ---------- 4 Rechner (Orange-Band wie das Blau bei ecom) ---------- */
.rechner{background:var(--accent);color:#140a00;padding-block:clamp(64px,8vw,112px)}
.rechner__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.rechner__h2{font-size:clamp(2.25rem,4.4vw,4.25rem);font-weight:800;line-height:1;letter-spacing:-.04em;color:#fff;text-wrap:balance}
.rechner__sub{margin:18px 0 36px;max-width:42ch;font-size:1.125rem;line-height:1.5;color:rgba(20,10,0,.78)}
.rechner__f{margin-top:26px}
.rechner__f label{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px;font-size:.9375rem;font-weight:600}
.rechner__f output{font-weight:700;font-variant-numeric:tabular-nums}
.rechner__f input[type=range]{width:100%;height:6px;-webkit-appearance:none;appearance:none;border-radius:6px;cursor:pointer;
  background:linear-gradient(90deg,#140a00 0 var(--p,20%),rgba(20,10,0,.22) var(--p,20%) 100%)}
.rechner__f input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #140a00;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.rechner__f input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #140a00}
.rechner__f input[type=range]:focus-visible{outline:2px solid #fff;outline-offset:6px}
.rechner__out{padding:clamp(28px,3.5vw,44px);border-radius:20px;background:#0b0b0c;color:var(--fg);box-shadow:0 50px 80px -40px rgba(60,25,0,.8)}
.rechner__k{margin:0;font-size:1rem;font-weight:600;color:var(--fg-2)}
.rechner__v{margin:8px 0 22px;font-size:clamp(3rem,6vw,5.5rem);font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff}
.rechner__y{display:flex;justify-content:space-between;gap:16px;margin:0 0 26px;padding-top:18px;border-top:1px solid var(--line-2);font-size:1.0625rem;font-weight:600}
.rechner__y b{font-variant-numeric:tabular-nums}
.rechner__out .btn{width:100%;justify-content:center}
.rechner__note{margin:16px 0 0;font-size:.8125rem;line-height:1.5;color:var(--fg-3)}

/* ---------- 5 Wege ---------- */
.wege__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.weg{padding:clamp(24px,2.6vw,34px);border-radius:16px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.weg:hover{box-shadow:inset 0 0 0 1px rgba(255,137,0,.45);transform:translateY(-2px)}
.weg__ico{display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;border-radius:12px;background:rgba(255,137,0,.12)}
.weg__ico svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.weg__t{margin:0 0 8px;font-size:1.25rem;font-weight:700;letter-spacing:-.015em}
.weg__p{margin:0;font-size:1rem;line-height:1.5;color:var(--fg-2)}

/* ---------- 6 Ablauf ---------- */
.ablauf2{background:var(--bg-2);border-block:1px solid var(--line)}
.schritte2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;counter-reset:none}
.schritt2{padding:clamp(26px,3vw,38px);border-radius:16px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.schritt2__n{display:block;margin-bottom:22px;font-size:clamp(3rem,4.5vw,4.25rem);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--accent)}
.schritt2__t{margin:0 0 8px;font-size:1.375rem;font-weight:700;letter-spacing:-.015em}
.schritt2__p{margin:0;font-size:1.0625rem;line-height:1.5;color:var(--fg-2)}

/* ---------- 7 Arbeiten ---------- */
.arbeiten__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.arb{display:flex;flex-direction:column}
.arb__vis{position:relative;aspect-ratio:16/11;border-radius:18px;overflow:hidden;background:radial-gradient(120% 100% at 30% 0%,#2a1a0c,var(--bg-2) 60%);
  box-shadow:inset 0 0 0 1px var(--line)}
.arb__br{position:absolute;left:6%;top:9%;width:74%;bottom:-6%;border-radius:10px 10px 0 0;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 60px -30px #000}
.arb__bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:#18181b}
.arb__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.arb__bar span{margin:0 auto;padding:3px 14px;border-radius:99px;background:rgba(255,255,255,.07);font-size:.6875rem;color:rgba(243,239,232,.75)}
.arb__br img{display:block;width:100%;height:calc(100% - 28px);object-fit:cover;object-position:top;transition:object-position 6s linear}
.arb:hover .arb__br img{object-position:50% 40%}
.arb__ph{position:absolute;right:5%;top:20%;width:26%;aspect-ratio:9/19;padding:5px;border-radius:22px;background:linear-gradient(145deg,#2c2c31,#0f0f11);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 50px -24px #000}
.arb__ph img{display:block;width:100%;height:100%;border-radius:17px;object-fit:cover;object-position:top}
.arb__tag{position:absolute;right:4%;top:11%;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:99px;
  background:rgba(11,11,12,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:.8125rem;font-weight:600}
.arb__ig{width:14px;height:14px;border-radius:4px;background:radial-gradient(circle at 30% 110%,#fdd96a 0,#f8763b 30%,#d6249f 60%,#6b3ee6 100%)}
.arb--heft .arb__foto{position:absolute;inset:6% 0;width:100%;height:88%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.arb__name{margin:22px 0 6px;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.arb__text{margin:0;max-width:52ch;font-size:1.0625rem;line-height:1.5;color:var(--fg-2)}

/* ---------- 8 Gründer ---------- */
.gruender__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.gruender__img img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 0 0 1px var(--line),0 50px 80px -40px #000}
.gruender__text .h2{font-weight:700;letter-spacing:-.035em;margin-bottom:24px}
.gruender__text p{max-width:52ch;margin:0 0 14px;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.6;color:var(--fg-2)}

/* ---------- 9 Termin ---------- */
.cta2__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
.cta2__l .h2{font-weight:800;letter-spacing:-.04em}
.cta2__l .v-checks{margin-top:30px}
.cta2__box{padding:clamp(28px,3.5vw,44px);border-radius:20px;background:var(--bg-2);box-shadow:inset 0 0 0 1px rgba(255,137,0,.35),0 40px 80px -40px rgba(255,137,0,.25)}
.cta2__k{margin:0 0 6px;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.cta2__p{margin:0 0 26px;color:var(--fg-2)}
.cta2__box .btn{width:100%;justify-content:center}
.cta2__box .cta-note{margin-top:16px}

/* ---------- Schmal ---------- */
@media (max-width:899px){
  .vh{min-height:0;align-items:flex-start}
  .vh__collage{width:110%;right:-30%;opacity:.28}
  .vh__fade{background:linear-gradient(180deg,rgba(11,11,12,.6),var(--bg) 85%)}
  .vh__in{grid-template-columns:1fr}
  .vh__shavis{justify-self:start;width:min(70%,280px);margin-top:12px}
  .rechner__in,.gruender__in,.cta2__in{grid-template-columns:1fr}
  .wege__grid,.schritte2{grid-template-columns:1fr 1fr}
  .arbeiten__grid{grid-template-columns:1fr}
  .irrtum{grid-template-columns:1fr}
  .azubi__in{grid-template-columns:1fr}
  .azubi__ph{width:min(78%,320px)}
}
@media (max-width:599px){
  .wege__grid,.schritte2{grid-template-columns:1fr}
  .vh__shavis{display:none}
}

/* ---------- Bewegung aus ---------- */
@media (prefers-reduced-motion:reduce){
  .vh__col,.band__run{animation:none}
  .arb__br img{transition:none}
}
html.reduced .vh__col,html.reduced .band__run{animation:none}