/* ── Runde 6 (14.10.2026) · Turbo-Feedback ──
   1 Ablauf ohne Karten: kompakt, kein Wasserzeichen, kein CTA
   2 Preise: beide Karten weiß, Linie umschließt Komplett (.is-top)
   3 Beispiele: Lupe auf den Screens, CTAs blau
   4 Founder statt „Warum“ (echtes Foto, keine KI-Bilder)
   5 FAQ ohne Foto, Kontakt mit Torben persönlich */

/* 1 · Ablauf */
.process .proc-stage{padding:clamp(56px,7vw,96px) 0 0;overflow:visible}
.process .proc-head{margin-bottom:0;justify-content:flex-start}
.process .proc-head h2{font-size:clamp(34px,4.4vw,64px);line-height:1.05;max-width:none}
.work{padding-bottom:clamp(40px,5vw,72px)}
.pricing{padding-top:clamp(40px,4vw,56px)}

/* 2 · Preise: beide weiß, Komplett hervorgehoben */
.price-card.is-top{background:#fff;color:#000}
.price-card.is-top h3{color:#000}
.price-card.is-top .price-pill{background:var(--spark);color:#fff}
.price-card .pill-spark{background:var(--spark);color:#fff}
.price-card .pill-spark .rd{background:#fff}
.price-grid:not(.pl-on) .price-card.is-top{box-shadow:inset 0 0 0 2px var(--spark),0 1px 2px rgba(0,0,0,.04),0 14px 36px rgba(0,0,0,.06)}
.price-grid:not(.pl-on) .price-card:not(.is-top){box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 36px rgba(0,0,0,.06)}
.price-grid:not(.pl-on) .price-card:not(.is-top)::after{display:none}
/* gestapelt: Komplett zuerst, damit die Linie nicht durch Basis läuft */
@media(max-width:900px){.price-card.is-top{order:-1}}

/* 3 · Beispiele: Lupe + blaue CTAs */
.btn-spark{background:var(--spark);color:#fff}
.btn-spark:hover{background:#2f6cf0}
.btn-spark .dot{background:#fff}
.wc-screen[data-bx]{cursor:zoom-in}
.wc-lens{position:absolute;left:50%;top:50%;z-index:2;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;
  display:grid;place-items:center;background:var(--spark);color:#fff;
  box-shadow:0 0 0 10px rgba(61,125,255,.22),0 18px 40px rgba(0,0,0,.35);transition:transform .35s var(--ease),box-shadow .35s;pointer-events:none}
.wc-lens svg{width:46px;height:46px}
.wc-lens::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(61,125,255,.55);animation:lensPulse 2.2s ease-out infinite}
@keyframes lensPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.45);opacity:0}}
.wc-screen[data-bx]:hover .wc-lens{transform:scale(1.08)}
.wc-bx-hint{background:var(--spark);color:#fff}
.wc-bx-hint svg{color:#fff}
.wc-screen[data-bx]:hover img{filter:brightness(.7)}
@media(max-width:767px){.wc-lens{width:72px;height:72px;margin:-36px 0 0 -36px}.wc-lens svg{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.wc-lens::after{animation:none;opacity:0}}

/* 4 · Founder */
.founder{background:#f2f2f2}
.fd-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:center}
.fd-photo{position:relative;margin:0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;background:#ddd}
.fd-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.fd-photo figcaption{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:100px;background:rgba(255,255,255,.92);font-size:15px;font-weight:500;color:#000}
.fd-live{width:8px;height:8px;border-radius:50%;background:var(--spark)}
.fd-text h2{font-size:clamp(40px,4.6vw,68px);line-height:1.02;letter-spacing:-.035em;margin:16px 0 28px}
.fd-lead{font-size:clamp(20px,1.7vw,24px);line-height:1.45;color:#222;max-width:30em;margin-bottom:36px}
.fd-facts{list-style:none;padding:0;margin:0 0 32px;border-top:1px solid rgba(0,0,0,.12)}
.fd-facts li{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:20px;padding:18px 0;border-bottom:1px solid rgba(0,0,0,.12);align-items:baseline}
.fd-facts b{font-family:"Satoshi",system-ui,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;color:#000}
.fd-facts span{font-size:17px;line-height:1.45;color:rgba(0,0,0,.66)}
.fd-mail{display:inline-block;font-family:"Satoshi",system-ui,sans-serif;font-size:clamp(22px,2vw,28px);font-weight:500;color:#000;border-bottom:2px solid var(--spark);padding-bottom:2px}
.fd-mail:hover{color:var(--spark)}
@media(max-width:900px){
  .fd-grid{grid-template-columns:1fr}
  .fd-photo{aspect-ratio:4/5;max-height:72svh}
  .fd-facts li{grid-template-columns:1fr;gap:4px}
}

/* 5 · FAQ einspaltig */
.faq-grid{grid-template-columns:minmax(0,1fr);max-width:none}

/* 5 · Kontakt: persönliche Karte */
.contact-card.cc-person{min-height:0;flex-direction:column;justify-content:space-between;gap:32px;padding:32px;background:#111;border:1px solid rgba(255,255,255,.1);color:#fff}
.contact-card.cc-person::before{display:none}
.cc-top{display:flex;align-items:center;gap:18px}
.contact-card .cc-avatar{position:static;width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--spark)}
.contact-card .cc-name{font-family:"Satoshi",system-ui,sans-serif;font-size:24px;font-weight:700;letter-spacing:-.02em}
.contact-card .cc-role{font-size:16px;color:rgba(255,255,255,.6);margin-top:2px}
.contact-card .cc-quote{font-family:"Satoshi",system-ui,sans-serif;font-size:clamp(24px,2.2vw,32px);line-height:1.25;letter-spacing:-.02em;font-weight:500}
.cc-steps{list-style:none;padding:0;margin:0;border-top:1px solid rgba(255,255,255,.14)}
.cc-steps li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:18px}
.cc-steps span{font-family:ui-monospace,monospace;font-size:14px;color:var(--spark);min-width:2ch}
.cc-mail{font-size:16px;color:rgba(255,255,255,.7)}
.cc-mail:hover{color:#fff}

.contact .form .btn{background:var(--spark);color:#fff;min-height:64px;font-size:19px;padding:0 28px}
.contact .form .btn .dot{background:#fff}
@media(max-width:767px){.contact-card.cc-person{padding:22px;gap:24px}.contact .form .btn{width:100%;justify-content:space-between}}

/* 3b · Lupe + Vorher/Nachher-Pill im Apple-Glass-Look (Turbo 14.10.)
   Getönt-dunkles Glas, damit Weiß auf hellen UND dunklen Screens lesbar bleibt.
   Beide Elemente sind absolut positioniert (Block-Box) → kein iOS-Streifen-Bug bei backdrop-filter. */
.wc-lens,.wc-bx-hint{
  background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.08) 48%,rgba(255,255,255,.04) 100%),rgba(14,16,22,.46);
  -webkit-backdrop-filter:blur(16px) saturate(170%) brightness(.92);backdrop-filter:blur(16px) saturate(170%) brightness(.92);
  border:1px solid rgba(255,255,255,.38);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 0 20px rgba(255,255,255,.10),0 14px 34px rgba(0,0,0,.30);
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.wc-lens{overflow:visible}
.wc-lens::before{content:"";position:absolute;left:18%;right:18%;top:7%;height:34%;border-radius:50% 50% 45% 45%/70% 70% 30% 30%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.wc-lens::after{border-color:rgba(255,255,255,.55)}
.wc-lens svg,.wc-bx-hint svg{color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.wc-screen[data-bx]:hover .wc-lens{transform:scale(1.08);background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.10)),rgba(61,125,255,.38)}
.wc-screen[data-bx]:hover .wc-bx-hint{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.10)),rgba(61,125,255,.45);color:#fff;scale:1.04}
.wc-screen[data-bx]:hover img{filter:brightness(.85)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wc-lens,.wc-bx-hint{background:rgba(18,20,26,.72)}}

/* 3c · Turbo 14.10.: runde Lupe weg, Glass-Pill mittig auf dem Screen */
.wc-lens{display:none}
.wc-bx-hint{top:50%;bottom:auto;left:50%;translate:-50% -50%;min-height:56px;padding:0 26px 0 20px;font-size:17px}
.wc-bx-hint svg{width:22px;height:22px}
@media(max-width:767px){.wc-bx-hint{min-height:46px;font-size:15px;padding:0 18px 0 14px}.wc-bx-hint svg{width:18px;height:18px}}
.pricing{padding-top:clamp(56px,7vw,96px)}

/* 3d · Turbo 15.10.: Beispiel-Text + CTA mittig, wenn er unter dem Screen steht */
@media(max-width:1100px){
  .wc-info{text-align:center;align-items:center}
  .wc-sentence{max-width:34em;margin:0 auto}
  .wc-foot{align-items:center}
}

/* 3e · Turbo 15.10.: Glass-Pill aus dem Screen in die Mitte der linken weißen Fläche (über dem CTA) */
.wc-info .wc-bx-hint.wc-bx-btn{position:static;translate:none;left:auto;top:auto;bottom:auto;align-self:center;
  font:inherit;font-size:17px;font-weight:600;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.02) 100%),rgba(18,20,28,.82)}
.wc-info .wc-bx-hint.wc-bx-btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08)),var(--spark);scale:1.03}
.wc-info .wc-bx-hint.wc-bx-btn:focus-visible{outline:2px solid var(--spark);outline-offset:3px}
@media(max-width:1100px){.wc-info .wc-bx-hint.wc-bx-btn{align-self:center}}
@media(max-width:767px){.wc-info .wc-bx-hint.wc-bx-btn{font-size:15px}}

/* 3f · Turbo 15.10.: keine blauen CTAs in den Beispiel-Karten, kein CTA im Vorher/Nachher-Pop-up */
.wc-info{justify-content:flex-start;gap:28px}
.wc-info .wc-bx-hint.wc-bx-btn{margin-top:auto;margin-bottom:auto}
@media(max-width:1100px){.wc-info .wc-bx-hint.wc-bx-btn{margin:0}}
.bx-foot{justify-content:center}
@media(max-width:767px){.bx-foot{display:none}}
/* Pop-up offen: Sticky-CTA der Seite nicht über das Pop-up legen */
html.bx-lock .sticky-cta{visibility:hidden;transform:translateY(120%)}
/* Handy-Rahmen: Safari clippt skalierte iframes nicht sauber an border-radius → clip-path */
.bx[data-view=phone] .bx-scr{clip-path:inset(0 round 33px);isolation:isolate}
.bx[data-view=desk] .bx-scr{clip-path:inset(0 round 0 0 12px 12px);isolation:isolate}
.fd-lead+.fd-lead{margin-top:-20px}

/* 5b · Turbo 15.10.: Kontakt-Kopf zentriert, Avatar größer (Kopf + Schultern) */
.contact-card .cc-top{flex-direction:column;justify-content:center;text-align:center;gap:16px}
.contact-card .cc-avatar{width:140px;height:140px;object-position:50% 40%}
.contact-card .cc-quote{text-align:left;text-wrap:pretty}
@media(max-width:767px){.contact-card .cc-avatar{width:112px;height:112px}}
.contact-card .cc-mail{text-align:center;align-self:center}

/* ── Audit-Runde (15.10.): Formular, Preise, Hero-Vertrauen ── */
.f input[type=email]{width:100%;height:60px;border:0;border-radius:var(--r-field);background:rgba(255,255,255,.08);padding:0 20px;font:inherit;font-size:17px;color:#fff;outline:0;transition:background .25s,box-shadow .25s}
.f input[type=email]:focus{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.fx-slot .f input[type=email]{height:56px}
.f-hint{display:block;margin-top:8px;font-size:15px;color:rgba(255,255,255,.55)}
.f-opt{font-style:normal;font-weight:400;color:rgba(255,255,255,.55)}
.f input:user-invalid{box-shadow:inset 0 0 0 2px #ff6b5b}
.contact .note{font-size:16px;line-height:1.5}
/* Preise */
.price-cta{font-size:16px;font-weight:500;color:var(--spark);margin-top:-8px;border-bottom:1px solid currentColor;padding-bottom:1px}
.price-cta:hover{color:#2f6cf0}
.price-card .foot-note.fn-strong{font-size:17px;color:#111}
.price-card .foot-note.fn-strong b{font-weight:700;color:var(--spark)}
.price-pay{text-align:center;font-size:17px;color:#333;margin:28px auto 0;max-width:1120px}
/* Hero: Vertrauenszeile */
.hero-copy .hero-trust{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:15px;line-height:1.4;color:rgba(255,255,255,.75)}
.hero-trust b{color:#fff;font-weight:600}
.hero-trust img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 40%;box-shadow:0 0 0 2px var(--spark);flex:none}
@media(max-width:767px){.hero-copy .hero-trust{font-size:14px;gap:12px;margin-top:16px}.hero-trust img{width:42px;height:42px}}

/* Pro-Karte: Platzhalter hält Titel auf Höhe von Basis; gestapelt unnötig */
.h3-spacer{visibility:hidden}
@media(max-width:900px){.h3-spacer{display:none!important}}

/* Hero-Vertrauenszeile Desktop +20 % */
@media(min-width:768px){.hero-copy .hero-trust{font-size:18px;gap:17px;margin-top:26px}.hero-copy .hero-trust img{width:58px;height:58px}}

/* Founder-Foto: Pill mittig mit Logo · Preise netto im schwarzen Kasten */
.fd-photo figcaption{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;width:max-content;max-width:calc(100% - 24px);gap:12px;padding:10px 18px}
.fd-photo .fd-logo{height:22px;width:auto;object-fit:contain;flex:none;display:block}
.fd-sep{width:1px;height:18px;background:rgba(0,0,0,.2)}
.extras-net{margin:0;padding:16px 0 14px;border-top:1px solid rgba(255,255,255,.12);font-size:15px;color:rgba(255,255,255,.6);text-align:center}
@media(max-width:767px){.fd-photo figcaption{font-size:14px;gap:10px;padding:9px 14px}.fd-photo .fd-logo{height:18px}}

/* Hero-Textblock größer auf Desktop (Turbo 15.10. 03:07); Wand rückt dafür etwas nach rechts */
@media (min-width:1024px){
  .hA-wallwrap{width:52%;right:-8%}
  .hA-copy{max-width:min(680px,44vw);gap:clamp(24px,3.4vh,36px)}
  .hA .hero-tag{font-size:19px}
  .hA .hero-h1{font-size:clamp(60px,5.8vw,92px)}
  .hA .hero-copy{max-width:none;gap:28px}
  .hA .hero-copy p{font-size:clamp(20px,1.45vw,22px)}
  .hA .btn-row .btn{min-height:58px;padding:0 22px;font-size:18px}
  .hA .btn-row{flex-wrap:nowrap}
}