/* ============================================================
   Vonderbank Visuals · Analyse-Termin-Funnel
   Eigenstaendiges Stylesheet, bewusst getrennt von css/style.css
   der Hauptseite (siehe README-ANLEITUNG unten). Gleiche Tokens,
   damit die Marke wiedererkennbar bleibt, aber ohne Abhaengigkeit.
   ============================================================ */

/* ---------- 01 Fonts ---------- */
@font-face {
  font-family: "Anybody";
  src: url("../../fonts/anybody.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../../fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- 02 Tokens ---------- */
:root {
  --bg:          #0c0c0c;
  --bg-lift:     #131313;
  --ink:         #f0ece4;
  --ink-2:       #b5b0a7;
  --muted:       #888888;
  --line:        rgba(240, 236, 228, 0.14);
  --line-soft:   rgba(240, 236, 228, 0.07);

  --accent:      #1f6b00;
  --accent-hi:   #2d8c00;
  --accent-btn:  #227500;
  --accent-lift: #5bbd2e;

  --good:        #5bbd2e;
  --bad:         #6c7479;

  --f-display: "Anybody", "Helvetica Neue", Arial, sans-serif;
  --f-text:    "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-h1:      clamp(2.3rem, 6.5vw, 4.6rem);
  --t-h2:      clamp(1.8rem, 4.4vw, 3.1rem);
  --t-h3:      clamp(1.25rem, 2.4vw, 1.7rem);
  --t-lead:    clamp(1.05rem, 1.6vw, 1.35rem);
  --t-body:    clamp(1rem, 1.05vw, 1.09rem);
  --t-meta:    clamp(0.68rem, 0.78vw, 0.75rem);

  --maxw: 860px;
  --pad:  clamp(1.25rem, 5vw, 3rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 03 Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 74px; /* Platz fuer Sticky-Bar auf Mobile */
}
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); color: var(--ink); text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

/* ---------- 04 Typografie ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-lift);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent-lift);
}
h1.h1 {
  font-size: var(--t-h1);
  font-weight: 600;
  font-stretch: 108%;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
h2.h2 {
  font-size: var(--t-h2);
  font-weight: 600;
  font-stretch: 106%;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.lead {
  font-size: var(--t-lead);
  color: var(--ink-2);
  max-width: 46ch;
  line-height: 1.5;
}
.body-list p, .body-list li { color: var(--ink-2); }

/* ---------- 05 Layout / Sections ---------- */
section { padding-block: clamp(3.5rem, 9vh, 6.5rem); border-bottom: 1px solid var(--line-soft); }
section:last-of-type { border-bottom: none; }

/* ---------- 06 Header (Logo, nicht klickbar) ---------- */
.funnel-head {
  padding-block: clamp(1.5rem, 4vh, 2.25rem);
  text-align: center;
}
.funnel-head img { height: 34px; width: auto; margin-inline: auto; opacity: 0.92; }

/* ---------- 07 Hero ---------- */
.hero {
  text-align: center;
  padding-top: clamp(1rem, 3vh, 2rem);
}
.hero .eyebrow { justify-content: center; }
.hero .eyebrow::before { display: none; }
.hero h1 { margin-bottom: 1.25rem; }
.hero .lead { margin-inline: auto; margin-bottom: 2.25rem; }

.proof-strip {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  padding-top: clamp(1.5rem, 4vh, 2rem);
  border-top: 1px solid var(--line-soft);
}
.proof-strip .cap {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.proof-names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.8rem;
}
.proof-names span {
  font-family: var(--f-display);
  font-weight: 550;
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* ---------- 08 Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 2.1rem;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--accent-btn); border-color: var(--accent-btn); transform: translateY(-2px); }
.btn-wrap { display: flex; justify-content: center; }

/* Zeeg-Popup-Button uebernimmt sein eigenes Aussehen per JS-Parametern
   (siehe index.html) -- dieser Rahmen sorgt nur fuer Abstand/Zentrierung. */
.zeeg-btn-slot { display: flex; justify-content: center; margin-block: 0.5rem; }

/* ---------- 09 Pain-Sektion ---------- */
.pain-block { margin-bottom: clamp(2rem, 5vh, 2.75rem); }
.pain-block:last-of-type { margin-bottom: 0; }
.pain-block h3.h3 { margin-bottom: 0.6rem; font-weight: 560; }
.pain-block p { color: var(--ink-2); max-width: 62ch; }

.pain-list {
  list-style: none;
  margin: clamp(2rem, 5vh, 2.75rem) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pain-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.pain-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-lift);
}
.pain-close {
  margin-top: clamp(2rem, 5vh, 2.5rem);
  font-family: var(--f-display);
  font-weight: 550;
  font-size: 1.2rem;
  color: var(--ink);
}

/* ---------- 10 Vergleichstabelle ---------- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: clamp(2rem, 5vh, 2.75rem);
  font-size: 0.95rem;
}
.compare-table th, .compare-table td {
  padding: 0.95rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.compare-table thead th {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.compare-table thead th:not(:first-child) { text-align: center; }
.compare-table tbody th {
  font-family: var(--f-text);
  font-weight: 400;
  color: var(--ink-2);
  width: 52%;
}
.compare-table td { text-align: center; font-family: var(--f-mono); font-size: 1.05rem; }
/* Farbe folgt der Spalte (immer "gekaufte Leads" = neutral/schwach,
   "eigene Sichtbarkeit" = gruen), nicht dem Symbol -- ein Haekchen in
   der schlechten Spalte ist inhaltlich negativ und darf nicht gruen wirken. */
.compare-table td.col-bad { color: var(--muted); }
.compare-table td.col-good { color: var(--bad); }
.compare-table td.col-good[aria-label="Ja"] { color: var(--good); }
.compare-close {
  margin-top: clamp(1.75rem, 4vh, 2.25rem);
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 550;
  color: var(--accent-lift);
}
@media (max-width: 560px) {
  .compare-table { font-size: 0.85rem; }
  .compare-table th, .compare-table td { padding: 0.7rem 0.4rem; }
}

/* ---------- 11 Beweis / Video-Facaden ----------
   Gleiche Zwei-Klick-Technik wie auf der Hauptseite: Standbild + Button,
   erst beim Klick wird ein YouTube-nocookie-iframe eingesetzt (siehe
   Skript unten im HTML). Kein Request an YouTube vor dem Klick. */
.proof-grid {
  margin-top: clamp(2rem, 5vh, 2.5rem);
}
/* Die zwei Reels (9:16) nebeneinander -- so gross wie moeglich,
   ohne dass sie riesig auf schmalen Screens werden. */
.proof-portrait-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
/* Die Objektfilme (16:9) jeweils in voller Breite, damit auf dem
   Standbild wirklich etwas zu erkennen ist -- keine Briefmarken. */
.proof-wide {
  width: 100%;
  margin-top: 1.25rem;
}
.video-facade {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #101010;
  border: 1px solid var(--line);
  overflow: hidden;
}
.video-facade.r169 { aspect-ratio: 16 / 9; }
.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.12) brightness(0.72);
}
.video-facade.is-playing img { display: none; }
.video-facade .yt-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-facade .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.video-facade .play span {
  width: clamp(50px, 12vw, 64px);
  aspect-ratio: 1;
  border: 1px solid rgba(240, 236, 228, 0.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  backdrop-filter: blur(3px);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.video-facade .play:hover span,
.video-facade .play:focus-visible span {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.06);
}

.yt-note-funnel {
  margin-top: 1rem;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.yt-note-funnel a { color: var(--muted); }

.screens-strip {
  margin-top: clamp(2.5rem, 6vh, 3rem);
}
.screens-strip .cap {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
/* Verstreute Collage statt Reihe -- handgesetzte Positionen (Desktop),
   auf Mobile faellt es zu einer ruhigen, leicht gedrehten Stapelliste
   zusammen (echtes Ueberlappen ist auf schmalen Screens kaum lesbar). */
.collage {
  position: relative;
  min-height: clamp(460px, 50vw, 580px);
}
.c-item {
  position: absolute;
  width: 42%;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6);
  background: var(--bg-lift);
}
.c-1 { width: 33%; top: 2%;  left: 0%;   transform: rotate(-3deg); z-index: 2; }
.c-2 { width: 31%; top: 0%;  left: 37%;  transform: rotate(3deg);  z-index: 3; }
.c-7 { width: 27%; top: 5%;  left: 70%;  transform: rotate(-2deg); z-index: 4; }
.c-3 { width: 26%; top: 30%; left: 29%;  transform: rotate(-2deg); z-index: 6; }
.c-4 { width: 29%; top: 48%; left: 0%;   transform: rotate(2deg);  z-index: 2; }
.c-8 { width: 29%; top: 44%; left: 33%;  transform: rotate(-2.5deg); z-index: 3; }
.c-5 { width: 29%; top: 50%; left: 68%;  transform: rotate(3deg);  z-index: 2; }
.c-6 { width: 31%; top: 68%; left: 21%;  transform: rotate(2deg);  z-index: 7; }

/* Nachgebaute "Screenshots" fuer die zwei Zitate ohne echtes Bild --
   eigene, an die Markenfarben angelehnte Optik, keine 1:1-Kopie einer
   echten App-Oberflaeche. */
.fake-shot {
  /* Kein eigenes position:relative -- .c-item setzt bereits position:absolute
     auf demselben Element, das reicht auch als Anker fuer .fw-time unten.
     Ein zusaetzliches position hier wuerde je nach Kaskaden-Reihenfolge
     das absolute Layout der Collage brechen (siehe Notiz vom Test). */
  padding: 0.9rem 1rem 1.3rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
}
.fake-wa {
  background: #17301c;
  color: #f0ece4;
}
.fake-wa p { margin: 0; }
.fake-wa .fw-time {
  position: absolute;
  right: 0.7rem;
  bottom: 0.5rem;
  font-size: 0.6rem;
  color: #9fcf9f;
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
}
.fake-ig { padding-bottom: 0.9rem; }
.fake-ig .fi-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.fake-ig .fi-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-lift), var(--accent));
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fake-ig .fi-who { font-size: 0.72rem; font-weight: 600; color: var(--ink); }
.fake-ig .fi-who i { display: block; font-style: normal; font-weight: 400; font-size: 0.62rem; color: var(--muted); margin-top: 1px; }
.fake-ig p { margin: 0 0 0.5rem; color: var(--ink-2); }
.fake-ig .fi-actions {
  display: flex; align-items: center;
  font-size: 0.6rem; letter-spacing: 0.01em; color: var(--muted);
}
.fake-ig .fi-heart { margin-left: auto; color: #e0505a; }

@media (max-width: 700px) {
  .collage { min-height: 0; display: flex; flex-direction: column; gap: 1.1rem; align-items: center; }
  .c-item {
    position: static;
    width: 88% !important;
    transform: none !important;
  }
  .c-item:nth-child(odd)  { transform: rotate(-1.3deg) !important; }
  .c-item:nth-child(even) { transform: rotate(1.3deg) !important; }
}

.screen-ph {
  aspect-ratio: 3 / 4;
  background: var(--bg-lift);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 0.5rem;
}

/* ---------- 12 Loesung ---------- */
.solution-body p {
  color: var(--ink-2);
  max-width: 62ch;
  margin-bottom: 1.15rem;
}
.solution-body p:last-child { margin-bottom: 0; }
.solution-body strong { color: var(--ink); font-weight: 550; }

/* ---------- 13 Ablauf ---------- */
.steps {
  margin-top: clamp(2rem, 5vh, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.step { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; }
.step .n {
  font-family: var(--f-mono);
  font-size: 0.85rem;
  color: var(--accent-lift);
  padding-top: 0.2rem;
}
.step h3.h3 { font-size: 1.05rem; margin-bottom: 0.4rem; font-weight: 560; }
.step p { color: var(--ink-2); }
.process-close {
  margin-top: clamp(2rem, 5vh, 2.5rem);
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* ---------- 14 FAQ ---------- */
.faq-list { margin-top: clamp(1.5rem, 4vh, 2rem); }
details.faq {
  border-top: 1px solid var(--line);
}
details.faq:last-child { border-bottom: 1px solid var(--line); }
details.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-display);
  font-weight: 550;
  font-size: 1.02rem;
  color: var(--ink);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .ic { font-family: var(--f-mono); color: var(--accent-lift); transition: transform 0.25s var(--ease); flex-shrink: 0; }
details.faq[open] summary .ic { transform: rotate(45deg); }
details.faq .a { padding: 0 0 1.5rem; color: var(--ink-2); max-width: 62ch; }

/* ---------- 15 Finaler CTA ---------- */
.final-cta { text-align: center; background: var(--bg-lift); }
.final-cta h2.h2 { margin-bottom: 1rem; }
.final-cta .lead { margin-inline: auto; margin-bottom: 1.75rem; }
.scarcity {
  max-width: 50ch;
  margin: 0 auto clamp(2rem, 5vh, 2.5rem);
  font-size: 0.95rem;
  color: var(--ink-2);
  font-style: italic;
  font-family: var(--f-text);
}
.risk-reversal {
  margin-top: clamp(1.75rem, 4vh, 2.25rem);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Inline-Kalender-Widget: eigener, ruhiger Rahmen */
.booking-embed-wrap {
  margin-top: clamp(2.5rem, 6vh, 3rem);
  border: 1px solid var(--line);
  background: var(--bg);
  padding: clamp(0.75rem, 2vw, 1.25rem);
}

/* ---------- 16 Footer (minimal, rechtlich noetig) ---------- */
footer.funnel-foot {
  padding-block: 2rem 6rem;
  text-align: center;
}
footer.funnel-foot .links {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}
footer.funnel-foot a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
footer.funnel-foot a:hover { color: var(--ink-2); border-color: var(--line); }

/* ---------- 17 Sticky Mobile-Bar ---------- */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: none;
  background: var(--bg-lift);
  border-top: 1px solid var(--line);
  padding: 0.75rem var(--pad);
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
.sticky-bar .zeeg-btn-slot { margin: 0; }
.sticky-bar .btn { width: 100%; justify-content: center; }
@media (max-width: 720px) {
  .sticky-bar { display: block; }
}
@media (min-width: 721px) {
  body { padding-bottom: 0; }
}

/* ---------- 18 Reveal-on-Scroll (progressive enhancement) ---------- */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }