/* ============================================================
   THIRD EYE STUDIO · VARIANTE B (/variante-b/)
   Listicle nach Matt Clark: Versprechen → 10 Gründe → Beweis →
   Alleinstellung → Alles auf einen Blick → Fragen → Angebot.
   Ergänzt lebendig.css, gleiche Tokens und Bausteine.
   ============================================================ */

/* ── Kopf ── */
.vb-hero .hero__grid { padding-bottom:120px; }
.vb-hero h1 { font-size:clamp(32px,3.5vw,50px); line-height:1.04; }
.vb-hero h1 .accent { color:var(--coral); }
.vb-proof { display:flex; gap:16px; align-items:flex-start; max-width:560px; border-left:2px solid var(--coral); padding:4px 0 4px 18px; }
.vb-proof img { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.vb-proof blockquote { margin:0; font-size:15px; line-height:1.55; color:var(--white); }
.vb-proof cite { display:block; margin-top:6px; font-style:normal; font-size:13px; color:var(--silver); }
.vb-down { color:var(--white); font-weight:700; font-size:16px; display:inline-flex; gap:8px; align-items:center; border-bottom:1.5px solid var(--coral); padding-bottom:4px; align-self:flex-start; }
.vb-down:hover { color:var(--coral); }

/* ── Gründe ── */
.reasons { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:144px; }
.reason { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:56px 80px; align-items:center; }
.reason:nth-child(even) .reason__media { order:-1; }
.reason__copy { position:relative; }
/* Große Kontur-Ziffer als redaktionelles Element hinter dem Text */
.reason__n { position:absolute; top:-0.62em; left:-0.06em; z-index:0; font-family:var(--f-head); font-weight:800; font-size:clamp(120px,13vw,190px); line-height:1; letter-spacing:-0.05em; color:transparent; -webkit-text-stroke:1.5px rgba(185,78,30,.28); pointer-events:none; user-select:none; }
.reason__copy > :not(.reason__n) { position:relative; z-index:1; }
.reason p.reason__kicker { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-ink); display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.reason__kicker::before { content:""; width:32px; height:1.5px; background:var(--coral); }
.reason__kicker b { color:var(--navy); background:var(--coral); border-radius:999px; padding:4px 10px; letter-spacing:.1em; }
.reason h3 { font-size:clamp(28px,2.8vw,40px); line-height:1.06; letter-spacing:-0.032em; margin-bottom:18px; text-wrap:balance; }
.reason p { font-size:17px; line-height:1.7; color:var(--slate); text-wrap:pretty; }
.reason ul { list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.reason li { display:flex; gap:12px; font-size:15px; font-weight:500; color:var(--navy); }
.reason li::before { content:"✓"; color:var(--coral-ink); font-weight:700; }
.reason__price { margin-top:24px; display:inline-block; font-size:14px !important; font-weight:600; color:var(--slate); border-top:1px solid var(--line); padding-top:14px; }
.reason__price b { color:var(--navy); }

/* Medien: Foto mit versetztem Linienrahmen und Symbol-Plakette */
.reason__media { position:relative; }
.rm { position:relative; }
.rm--photo .rm__frame { position:absolute; inset:-16px; border:1px solid rgba(45,49,66,.22); border-radius:32px; transform:rotate(2.5deg); pointer-events:none; }
.reason:nth-child(even) .rm--photo .rm__frame { transform:rotate(-2.5deg); }
.rm__clip { position:relative; border-radius:28px; overflow:hidden; box-shadow:0 30px 60px rgba(45,49,66,.18); }
.rm__clip .photo { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.rm__badge { position:absolute; right:-26px; bottom:-30px; width:116px; height:116px; border-radius:50%; background:var(--navy); color:var(--coral); display:grid; place-items:center; box-shadow:0 20px 40px rgba(45,49,66,.28); z-index:2; }
.reason:nth-child(even) .rm__badge { right:auto; left:-26px; }
.rm__badge img { width:70%; height:auto; grid-area:1/1; }
.rm__badge-ring { grid-area:1/1; width:100%; height:100%; }

/* Kachel: Sternbild, rotierende Ringe und das Linien-Symbol */
.rm--tile { aspect-ratio:4/3; border-radius:28px; background:radial-gradient(120% 90% at 80% 100%, rgba(239,131,84,.28), transparent 55%), radial-gradient(90% 80% at 10% 0%, rgba(79,93,117,.7), transparent 60%), var(--navy); display:grid; place-items:center; overflow:hidden; box-shadow:0 30px 60px rgba(45,49,66,.22); }
.rm--tile > * { grid-area:1/1; }
.rm__stars { width:150%; max-width:none; height:auto; opacity:.16; }
.rm__rings { width:min(78%,400px); height:auto; color:rgba(239,131,84,.7); }
.rm__icon { width:44%; height:auto; position:relative; filter:drop-shadow(0 0 18px rgba(255,255,255,.18)); }
.rm__icon--wide { width:86%; }

@media (max-width:560px) {
  .reasons { gap:112px; }
  .rm__badge { width:88px; height:88px; right:-8px; bottom:-24px; }
  .reason:nth-child(even) .rm__badge { left:-8px; }
  .rm--photo .rm__frame { inset:-10px; }
  .reason__copy { padding-top:48px; }
  .reason:nth-child(odd) .reason__copy { padding-top:40px; }
  .reason__n { font-size:104px; top:-.08em; }
}

/* ── Beweis ── */
.vb-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:32px 24px; margin:0 0 64px; }
.vb-stats div { display:flex; flex-direction:column; gap:6px; }
.vb-stats dd { margin:0; order:-1; font-family:var(--f-head); font-weight:800; font-size:clamp(34px,3.2vw,46px); line-height:1; letter-spacing:-0.04em; color:var(--coral); }
.vb-stats dt { font-size:14px; font-weight:600; color:var(--silver); }
.vb-voices { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:20px; align-items:start; }
.vb-voices .quote { width:auto; background:rgba(255,255,255,.04); border-color:rgba(191,192,192,.2); color:var(--white); }
.vb-voices .quote__role { color:var(--silver); }
.vb-video { margin-bottom:20px; }
.vb-tools { margin-top:48px; font-size:14px; color:var(--silver); line-height:1.8; }
.vb-tools b { color:var(--white); font-weight:600; }

/* ── Alleinstellung: Vergleich ── */
.compare { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:20px; }
.compare__col { border-radius:24px; padding:36px 32px; }
.compare__col--typ { background:var(--white); border:1px solid var(--line); }
.compare__col--te { background:var(--navy); color:var(--white); position:relative; overflow:hidden; }
.compare__col h3 { font-size:24px; letter-spacing:-0.02em; margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.compare__col h3 img { width:44px; height:44px; }
.compare__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.compare__col li { display:flex; gap:12px; font-size:16px; line-height:1.5; }
.compare__col--typ li { color:var(--slate); }
.compare__col--typ li::before { content:"·"; font-weight:800; color:var(--muted-tool); width:10px; flex-shrink:0; }
.compare__col--te li { color:var(--silver); }
.compare__col--te li b { color:var(--white); }
.compare__col--te li::before { content:"✓"; color:var(--coral); font-weight:700; width:10px; flex-shrink:0; }

/* ── Alles auf einen Blick ── */
.overview { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:760px) { .overview { grid-template-columns:repeat(2,1fr); } }
.ov { background:var(--white); border:1px solid var(--line); border-radius:24px; padding:32px 28px; display:flex; flex-direction:column; gap:14px; }
.ov > p.ov__tag { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-ink); }
.ov h3 { font-size:24px; letter-spacing:-0.025em; line-height:1.1; }
.ov > p { font-size:15px; color:var(--slate); line-height:1.55; }
.ov ul { list-style:none; margin:4px 0 0; padding:14px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.ov li { display:flex; justify-content:space-between; gap:12px; font-size:14px; font-weight:500; color:var(--navy); }
.ov li span:last-child { color:var(--slate); white-space:nowrap; font-weight:600; }
.ov li.ov__li--wrap span:last-child { white-space:normal; text-align:right; max-width:45%; }
.overview-note { margin-top:32px; font-size:15px; color:var(--slate); max-width:760px; }

/* ── Angebot: drei Wege ── */
.ways { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:20px; align-items:stretch; counter-reset:way; }
.way { border-radius:24px; padding:36px 30px; display:flex; flex-direction:column; gap:12px; background:rgba(255,255,255,.04); border:1px solid rgba(191,192,192,.2); position:relative; }
.way--start { background:var(--coral); border-color:var(--coral); color:var(--navy); }
.way p.way__step { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--coral); }
.way--start p.way__step { color:var(--navy); }
.way h3 { font-size:30px; letter-spacing:-0.03em; line-height:1.05; }
.way p.way__price { font-family:var(--f-head); font-weight:800; font-size:24px; color:var(--coral); }
.way--start p.way__price { color:var(--navy); }
.way p { font-size:15px; line-height:1.55; color:var(--silver); }
.way--start p { color:var(--navy); }
.way ul { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; }
.way li { display:flex; gap:10px; font-size:14px; color:var(--silver); }
.way li::before { content:"✓"; color:var(--coral); font-weight:700; }
.way--start li { color:var(--navy); }
.way--start li::before { color:var(--navy); }
.vb-invite { margin-top:56px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:32px 64px; align-items:center; }
.vb-invite__copy { display:flex; flex-direction:column; gap:16px; }
.vb-invite__copy .hand { font-size:clamp(30px,3vw,40px); color:var(--white); line-height:1.15; }
.vb-invite__copy p:not(.hand) { color:var(--silver); font-size:16px; line-height:1.65; }
.vb-invite__cta { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.vb-invite__cta .btn { font-size:18px; padding:20px 36px; animation:hwPulse 2.4s infinite; }
.vb-invite__cta .sig { height:60px; width:auto; transform:rotate(-4deg); opacity:.95; }
.vb-side { font-size:14px; color:var(--silver); line-height:1.7; }
.vb-side a { color:var(--white); font-weight:600; border-bottom:1px solid rgba(239,131,84,.6); }
.vb-side a:hover { color:var(--coral); }
@media (max-width:560px) { .vb-invite__cta .btn { width:100%; } }

/* ── Entwurfsleiste (nur zum Vergleichen der Varianten) ── */
.draftbar { position:fixed; right:16px; bottom:16px; z-index:60; display:flex; align-items:center; gap:10px; background:var(--white); color:var(--navy); border:1px solid var(--line); border-radius:999px; padding:8px 10px 8px 16px; box-shadow:0 20px 40px rgba(45,49,66,.2); font-size:13px; max-width:calc(100% - 32px); }
.draftbar b { font-weight:700; white-space:nowrap; }
.draftbar select { font:inherit; font-size:13px; color:var(--navy); border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:var(--mist); max-width:240px; min-width:0; }
.draftbar code { font-size:12px; color:var(--slate); white-space:nowrap; }
@media (max-width:560px) { .draftbar code { display:none; } .draftbar select { max-width:200px; } }
@media print { .draftbar { display:none; } }

/* ============================================================
   PREMIUM-SCHICHT · Grafik und Bewegung
   Alle Bewegungen sind selten (Scroll-Einstieg, einmal je Besuch)
   oder konstant und dekorativ (Ringe, Kompass: linear, sehr langsam).
   Kurve: --ease aus dem Design System. Nur transform, opacity, clip-path.
   ============================================================ */

/* Kapitel-Labels mit feiner Linie */
.intro .eyebrow { display:inline-flex; align-items:center; gap:14px; }
.intro .eyebrow::before { content:""; width:32px; height:1.5px; background:currentColor; opacity:.8; }

/* Kopf: Kompass dreht sich langsam hinter dem Porträt */
.hero__visual { isolation:isolate; }
.vb-orbit { position:absolute; left:50%; top:50%; width:150%; max-width:none; height:auto; opacity:.22; z-index:-1; pointer-events:none; transform:translate(-50%,-50%); animation:vbSpin 160s linear infinite; }
@keyframes vbSpin { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }
.vb-hero .hero__mark svg { bottom:-.1em; }

/* Zahlen mit Haarlinien dazwischen */
.vb-stats div { border-left:1px solid rgba(191,192,192,.2); padding-left:20px; }

/* Überblick: Symbol-Plakette je Thema */
.ov { position:relative; }
.ov__badge { position:absolute; top:22px; right:22px; width:64px; height:64px; border-radius:50%; background:var(--navy); display:grid; place-items:center; box-shadow:0 12px 24px rgba(45,49,66,.18); }
.ov__badge img { width:72%; height:auto; }
.ov > p.ov__tag, .ov h3 { padding-right:76px; }

/* Vergleich: Kompass in der Third-Eye-Spalte */
.compare__orbit { position:absolute; right:-130px; bottom:-150px; width:400px; height:auto; opacity:.1; pointer-events:none; animation:vbTurn 200s linear infinite; }
@keyframes vbTurn { to{transform:rotate(360deg)} }
.compare__col--te > :not(.compare__orbit) { position:relative; }

/* Sofort buchen */
.shop { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:20px; align-items:stretch; }
.shop__card { border-radius:24px; padding:30px 26px; display:flex; flex-direction:column; gap:10px; background:rgba(255,255,255,.04); border:1px solid rgba(191,192,192,.2); color:var(--white); }
.shop__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.shop__badge { width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(191,192,192,.25); display:grid; place-items:center; flex-shrink:0; }
.shop__badge img { width:74%; height:auto; }
.shop__tag { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--coral); }
.shop__card h3 { font-size:24px; letter-spacing:-0.025em; line-height:1.1; }
.shop__price { font-family:var(--f-head); font-weight:800; font-size:46px; line-height:1; letter-spacing:-0.04em; color:var(--coral); margin-top:4px; }
.shop__meta { font-size:13px; font-weight:600; color:var(--silver); }
.shop__card ul { list-style:none; margin:8px 0 0; padding:14px 0 0; border-top:1px solid rgba(191,192,192,.18); display:flex; flex-direction:column; gap:9px; flex:1; }
.shop__card li { display:flex; gap:10px; font-size:14px; line-height:1.45; color:var(--silver); }
.shop__card li::before { content:"✓"; color:var(--coral); font-weight:700; }
.shop__btn { margin-top:16px; width:100%; font-size:15px; padding:14px 18px; color:var(--white); border:1.5px solid rgba(191,192,192,.4); }
.shop__note { margin-top:32px; font-size:14px; color:var(--silver); }

/* ── Einstieg der Gründe beim Scrollen (Zweck: Erklärung, einmal je Grund) ── */
.vb-in .reason__copy > * { transition:opacity .8s var(--ease), transform .8s var(--ease); }
.vb-in .reason__copy > :nth-child(2) { transition-delay:.06s; }
.vb-in .reason__copy > :nth-child(3) { transition-delay:.12s; }
.vb-in .reason__copy > :nth-child(4) { transition-delay:.18s; }
.vb-in .reason__copy > :nth-child(n+5) { transition-delay:.24s; }
.js .vb-in:not(.is-in) .reason__copy > * { opacity:0; transform:translateY(24px); }
.js .vb-in:not(.is-in) .reason__copy > .reason__n { transform:translateY(40px); }

/* Foto öffnet sich aus der Mitte, das Bild setzt sich dabei ab */
.vb-in .rm__clip { transition:clip-path 1s var(--ease); clip-path:inset(0 round 28px); }
.vb-in .rm__clip .photo { transition:transform 1.4s var(--ease); }
.js .vb-in:not(.is-in) .rm__clip { clip-path:inset(10% 10% 10% 10% round 28px); }
.js .vb-in:not(.is-in) .rm__clip .photo { transform:scale(1.12); }
.vb-in .rm__frame { transition:opacity .9s var(--ease) .25s; }
.js .vb-in:not(.is-in) .rm__frame { opacity:0; }
.vb-in .rm__badge { transition:opacity .6s var(--ease) .45s, transform .6s var(--ease) .45s; }
.js .vb-in:not(.is-in) .rm__badge { opacity:0; transform:scale(.9); }

/* Kachel: Symbol erscheint kreisförmig aus der Mitte */
.vb-in .rm__icon { transition:clip-path 1.2s var(--ease) .2s, opacity .6s var(--ease) .2s; clip-path:circle(75% at 50% 50%); }
.js .vb-in:not(.is-in) .rm__icon { clip-path:circle(0% at 50% 50%); opacity:0; }
.vb-in .rm--tile { transition:opacity .8s var(--ease); }
.js .vb-in:not(.is-in) .rm--tile { opacity:0; }

/* Konstante, langsame Drehung der Ringe (dekorativ, linear) */
.rm__rings { animation:vbTurn 90s linear infinite; }
.rm__badge-ring { animation:vbTurn 24s linear infinite; }

/* Hover nur mit echter Maus */
@media (hover:hover) and (pointer:fine) {
  .shop__btn { transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
  .shop__btn:hover { background:var(--coral); border-color:var(--coral); color:var(--navy); }
  .shop__card { transition:transform .3s var(--ease), box-shadow .3s ease, background-color .3s ease; }
  .shop__card:hover { background:rgba(255,255,255,.07); }
  .reason:hover .rm__clip .photo { transform:scale(1.03); }
}

/* Weniger Bewegung: alles sichtbar, nichts dreht sich */
@media (prefers-reduced-motion: reduce) {
  .vb-orbit, .compare__orbit, .rm__rings, .rm__badge-ring { animation:none !important; }
  .vb-in .reason__copy > *, .vb-in .rm__clip, .vb-in .rm__clip .photo, .vb-in .rm__frame, .vb-in .rm__badge, .vb-in .rm__icon, .vb-in .rm--tile { opacity:1 !important; transform:none !important; clip-path:none !important; }
}

/* Sprungmarken für Links auf Abschnitte der früheren Startseite */
.anchor-alias { position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none; }

/* Kontaktformular */
.kontakt__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:48px 72px; align-items:start; }
.kontakt__copy { display:flex; flex-direction:column; gap:20px; }
.kontakt__copy .intro, .kontakt__copy { max-width:520px; }
.kontakt__copy .eyebrow { display:inline-flex; align-items:center; gap:14px; }
.kontakt__copy .eyebrow::before { content:""; width:32px; height:1.5px; background:currentColor; opacity:.8; }
.kontakt__me { display:flex; align-items:center; gap:18px; margin-top:12px; padding-top:24px; border-top:1px solid var(--line); }
.kontakt__me img { width:64px; height:64px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.kontakt__me p { font-size:15px; line-height:1.6; color:var(--slate); }
.kontakt__me a { color:var(--navy); font-weight:600; border-bottom:1.5px solid var(--coral); }
.kontakt__card { position:relative; background:var(--mist); border:1px solid var(--line); border-radius:24px; padding:clamp(24px,4vw,40px); }
.kontakt__card::before { content:""; position:absolute; top:-1px; left:32px; right:32px; height:3px; border-radius:0 0 3px 3px; background:var(--coral); }
.kform { display:flex; flex-direction:column; gap:18px; }
.kform__row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:18px; }
.kform__field label { display:block; font-size:14px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.kform__field input, .kform__field textarea { width:100%; font:inherit; font-size:16px; color:var(--navy); background:var(--white); border:1.5px solid var(--line); border-radius:12px; padding:13px 15px; transition:border-color .2s ease, box-shadow .2s ease; }
.kform__field textarea { resize:vertical; min-height:150px; line-height:1.55; }
.kform__field textarea::placeholder { color:var(--muted-tool); }
.kform__field input:focus, .kform__field textarea:focus { outline:0; border-color:var(--coral); box-shadow:0 0 0 3px rgba(239,131,84,.25); }
.kform__note { font-size:13px; line-height:1.55; color:var(--slate); }
.kform__note a, .kform__status a { color:var(--navy); font-weight:600; text-decoration:underline; text-decoration-color:var(--coral); text-underline-offset:2px; }
.kform__btn { align-self:flex-start; border:0; cursor:pointer; font-family:inherit; font-size:17px; padding:17px 32px; }
.kform__btn:disabled { opacity:.6; cursor:progress; }
.kform__status { font-size:14px; color:var(--coral-ink); min-height:1px; }
.kform__trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.kform__done { display:flex; flex-direction:column; gap:12px; padding:12px 0; outline:0; }
.kform__done[hidden] { display:none; }
.kform__done img { width:150px; height:auto; transform:rotate(-4deg); margin-bottom:4px; }
.kform__done h3 { font-family:var(--f-head); font-size:26px; letter-spacing:-.02em; line-height:1.15; color:var(--navy); }
.kform__done p { color:var(--slate); line-height:1.6; }
@media (max-width:560px) { .kform__btn { align-self:stretch; } }

/* Link vom Themen-Überblick auf die Leistungsseite (28.10.2026) */
.ov__more { display:inline-flex; gap:6px; margin-top:14px; font-weight:700; color:var(--coral-ink); }
.ov__more:hover { color:var(--navy); }

/* Leistung in der Preisliste verlinkt (28.10.2026) */
.ov li a { color:inherit; text-decoration:underline; text-decoration-color:var(--coral); text-underline-offset:3px; }
.ov li a:hover { color:var(--coral-ink); }

/* Handy: H1 eine Stufe kleiner, damit die Kundenstimme in den ersten Bildschirm rückt (28.10.2026) */
@media (max-width:560px) {
  .vb-hero h1 { font-size:27px; line-height:1.08; }
  .vb-hero .hero__lead { font-size:17px; line-height:1.55; }
}