/* MEYNEXA Relaunch: Scroll-Effekte und Vorführungen. Baut auf relaunch.css auf. */

/* ---------------------------------------------------------------- Schritte als Karten, die sich übereinanderschieben */
.schrittfolge { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.schritt {
  position: sticky; top: calc(108px + var(--i, 0) * 14px);
  display: grid; grid-template-columns: 72px minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(20px, 3.5vw, 56px); align-items: start;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-buehne);
  padding: clamp(26px, 3.4vw, 46px); min-height: min(62vh, 520px);
  box-shadow: 0 -18px 50px -40px rgba(7, 28, 43, 0.55);
  transform-origin: 50% 0; transform: scale(var(--klein, 1)); transition: transform 0.15s linear;
}
.schritt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--navy); opacity: var(--dunkel, 0); pointer-events: none; transition: opacity 0.15s linear; }
.schritt-nr {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: var(--weiss); font-weight: 900; font-size: 1.4rem;
}
.schritt-kopf h2 { font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.04; letter-spacing: -0.04em; margin: 12px 0 0; }
.schritt-text > p { font-size: 1.08rem; margin: 0 0 22px; max-width: 58ch; }
.schritt-ergebnis { display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--radius); background: rgba(0, 113, 188, 0.06); border-left: 3px solid var(--blau); }
.schritt-ergebnis strong { color: var(--tinte); }

/* ---------------------------------------------------------------- Vorschau am Computer und am Handy */
.vorschau-raster { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.vorschau-geraete { position: relative; padding-bottom: 40px; }
.vg-schirm { border-radius: 16px; overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); box-shadow: 0 40px 80px -50px rgba(7, 28, 43, 0.6); }
.vg-leiste { height: 32px; display: flex; gap: 6px; align-items: center; padding: 0 12px; background: #E9EEF3; }
.vg-leiste i { width: 9px; height: 9px; border-radius: 50%; background: #C7D3DE; }
.vg-leiste b { margin-left: 12px; font: 400 0.7rem var(--mono); color: var(--grau); }
.vg-bild { overflow: hidden; position: relative; }
.vg-schirm .vg-bild { aspect-ratio: 16 / 10; }
.vg-bild img { width: 100%; height: auto; animation: vg-fahrt 26s ease-in-out infinite alternate; }
.vg-handy {
  position: absolute; right: -14px; bottom: 0; width: 26%; border-radius: 26px; padding: 8px; background: var(--navy);
  box-shadow: 0 30px 60px -30px rgba(7, 28, 43, 0.8);
}
.vg-handy .vg-bild { aspect-ratio: 9 / 19; border-radius: 19px; background: var(--weiss); }
.vg-handy .vg-bild img { animation-duration: 30s; }
@keyframes vg-fahrt { 0%, 8% { transform: translateY(0); } 100% { transform: translateY(calc(-100% + var(--sicht, 60%))); } }
.vg-schirm .vg-bild img { --sicht: 0px; }

/* ---------------------------------------------------------------- Sätze, die sich Wort für Wort einfärben */
[data-woerter] .wort { color: rgba(31, 31, 31, 0.16); transition: color 0.35s ease; }
[data-woerter] .wort.an { color: inherit; }
.abschluss [data-woerter] .wort { color: rgba(255, 255, 255, 0.22); }
.abschluss [data-woerter] .wort.an { color: var(--weiss); }

/* ---------------------------------------------------------------- Vorführung mit Klickpunkten */
.demo { margin-top: 28px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-buehne); overflow: hidden; }
.demo-reiter { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--linie); background: var(--papier-hell); }
.demo-reiter button {
  font: 700 0.88rem var(--schrift); color: var(--navy); cursor: pointer; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--weiss);
}
.demo-reiter button[aria-selected="true"] { background: var(--navy); color: var(--weiss); border-color: var(--navy); }
.demo-ansicht { display: none; }
.demo-ansicht.an { display: block; }
.demo-bild { position: relative; }
.demo-bild img { width: 100%; height: auto; display: block; }
.demo-punkt {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--weiss); background: var(--blau); color: var(--weiss);
  font: 800 0.85rem var(--schrift); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 6px 16px -6px rgba(7, 28, 43, 0.5); transition: background 0.2s, transform 0.3s var(--kurve), box-shadow 0.3s;
}
.demo-punkt:hover { transform: translate(-50%, -50%) scale(1.12); }
.demo-punkt[aria-pressed="true"] { background: var(--navy); animation: none; box-shadow: 0 0 0 6px rgba(0, 113, 188, 0.25); }
/* Nur ein ruhiger Ring beim ersten Punkt, bis jemand tippt */
.demo:not(.benutzt) .demo-ansicht.an .demo-punkt:first-of-type::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(0, 113, 188, 0.45);
  animation: punkt-ring 3.6s ease-out infinite; pointer-events: none;
}
@keyframes punkt-ring { 0%, 55% { transform: scale(0.8); opacity: 0; } 70% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.demo-erklaerung { padding: 20px 24px 24px; border-top: 1px solid var(--linie); min-height: 128px; }
.demo-erklaerung h4 { font-size: 1.15rem; margin: 8px 0 6px; color: var(--tinte); }
.demo-erklaerung p { margin: 0; max-width: 66ch; }
.demo-hinweis { font: 400 0.7rem var(--mono); color: var(--grau); padding: 0 24px 18px; }

@media (max-width: 760px) {
  .schritt { grid-template-columns: minmax(0, 1fr); position: static; min-height: 0; transform: none; }
  .schritt::after { display: none; }
  .schritt-nr { width: 46px; height: 46px; font-size: 1.1rem; }
  .vorschau-raster { grid-template-columns: minmax(0, 1fr); }
  .vg-handy { width: 32%; right: 0; }
  .demo-punkt { width: 28px; height: 28px; font-size: 0.75rem; border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-bild img, .demo-punkt { animation: none; }
  .schritt { transform: none !important; }
  [data-woerter] .wort { color: inherit; }
}

/* Funnel auf der Startseite */
.funnel-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
/* Trichter beginnt auf Höhe der Überschrift und läuft neben der Liste mit, statt mittig tief zu hängen */
.funnel-raster > .funnel-figur { position: sticky; top: 110px; }
.funnel-figur { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-buehne); padding: 26px 26px 14px; margin: 0 0 26px; }
.funnel-figur canvas { display: block; width: 100%; height: 380px; }
.funnel-hinweis { margin: 8px 0 0; font: 400 0.7rem var(--mono); color: var(--grau); text-align: center; }
.funnel-stufen-liste { list-style: none; padding: 0; margin: 26px 0 26px; counter-reset: f; border-top: 1px solid var(--linie); }
.funnel-stufen-liste li { counter-increment: f; display: grid; gap: 2px; padding: 14px 0 14px 46px; position: relative; border-bottom: 1px solid var(--linie); }
.funnel-stufen-liste li::before { content: counter(f); position: absolute; left: 0; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 113, 188, calc(0.15 + var(--s, 0) * 0.25)); color: var(--navy); font-weight: 800; font-size: 0.85rem; display: grid; place-items: center; }
.funnel-stufen-liste li:nth-child(2)::before { background: rgba(0, 113, 188, 0.35); }
.funnel-stufen-liste li:nth-child(3)::before { background: rgba(0, 113, 188, 0.6); color: var(--weiss); }
.funnel-stufen-liste li:nth-child(4)::before { background: var(--blau); color: var(--weiss); }
.funnel-stufen-liste strong { color: var(--tinte); }
/* Fünf Schritte kurz auf der Startseite */
.kurz-schritte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; }
.kurz-schritte li { display: grid; gap: 6px; align-content: start; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 20px; font-size: 0.95rem; }
.kurz-schritte b { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--weiss); display: grid; place-items: center; margin-bottom: 8px; }
.kurz-schritte strong { color: var(--tinte); font-size: 1.08rem; }
.js .kurz-schritte li.zeigen:nth-child(2) { transition-delay: 0.08s; }
.js .kurz-schritte li.zeigen:nth-child(3) { transition-delay: 0.16s; }
.js .kurz-schritte li.zeigen:nth-child(4) { transition-delay: 0.24s; }
.js .kurz-schritte li.zeigen:nth-child(5) { transition-delay: 0.32s; }
@media (max-width: 1080px) { .kurz-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .funnel-raster { grid-template-columns: minmax(0, 1fr); }
  .funnel-figur canvas { height: 300px; }
  .kurz-schritte { grid-template-columns: minmax(0, 1fr); }
}

.buendel-kachel.breit { margin-top: clamp(16px, 2vw, 26px); min-height: 0; background: var(--navy); color: rgba(255, 255, 255, 0.85); border-color: var(--navy); }
.buendel-kachel.breit h2 { color: var(--weiss); }
.buendel-kachel.breit .vermerk { color: var(--hell); }
.buendel-kachel.breit li { background: rgba(255, 255, 255, 0.1); color: var(--weiss); }
.buendel-kachel.breit .weiter { color: var(--hell); }
.buendel-kachel.breit p { max-width: 70ch; }
.leistung-text .demo + .beleg { margin-top: 18px; }

/* Foto von Tim */
.portraet-foto { margin: 0; position: relative; border-radius: var(--radius-buehne); overflow: hidden; aspect-ratio: 4 / 5; background: var(--navy); box-shadow: 0 40px 80px -50px rgba(7, 28, 43, 0.6); }
.portraet-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; transform: scale(1.06); transition: transform 1.6s var(--kurve); }
.portraet-foto.da img { transform: none; }
.portraet-foto figcaption {
  position: absolute; left: 16px; bottom: 16px; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px;
  background: rgba(250, 252, 253, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.portraet-foto figcaption strong { color: var(--tinte); }
.portraet-foto figcaption span { font: 400 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--grau); }
@media (max-width: 760px) { .portraet-foto { max-width: 360px; } }

/* ---------------------------------------------------------------- Runde 6: ruhige Knöpfe, weiche Übergänge, Handy-Knöpfe im 3D-System */
/* Leuchtknöpfe der alten Seite: kein Blinken mehr, gleiche Form wie alle Knöpfe */
.baustein .btn-leuchten::before { display: none; }
.baustein .btn-leuchten.btn-primary, .baustein .btn-leuchten.btn-primary:hover, .baustein .btn-leuchten.btn-primary:active {
  background: var(--blau); border: 0; text-shadow: none; transform: none; box-shadow: none; border-radius: 999px;
}
.baustein .btn-leuchten.btn-primary:hover { background: var(--navy); }

/* Weiche Übergänge: der helle Grund der 3D-Abschnitte läuft oben und unten in die Seitenfarbe aus */
.baustein .system3d-abschnitt, .baustein .produkt3d-abschnitt { background: none; position: relative; isolation: isolate; }
.baustein .system3d-abschnitt::before, .baustein .produkt3d-abschnitt::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 260px, #000 calc(100% - 260px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 260px, #000 calc(100% - 260px), transparent 100%);
}
.baustein .system3d-abschnitt::before {
  background: radial-gradient(1100px 640px at 62% 58%, rgba(47, 147, 214, 0.16) 0%, rgba(47, 147, 214, 0) 70%), linear-gradient(175deg, #f8fbfd 0%, #eaf1f7 100%);
}
.baustein .produkt3d-abschnitt::before {
  background: radial-gradient(900px 540px at 72% 48%, rgba(47, 147, 214, 0.14) 0%, rgba(47, 147, 214, 0) 70%), linear-gradient(170deg, #f7fafc 0%, #eef3f8 100%);
}
/* Die 3D-Bühne selbst blendet beim Hinein- und Hinausfahren weich ein und aus */
.baustein .produkt3d-buehne canvas {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
/* Das System füllt die ganze Breite, Bodenraster und Lichtpunkte reichen bis an den Rand der Bühne. Mit nur 12 Prozent
   brachen sie beim Hinein- und Hinausfahren an einer harten Linie ab (Tim, 27.10.2026). Jetzt laufen sie über
   30 Prozent aus, festgeheftet wirkt das wie eine weiche Vignette, das Modell in der Mitte bleibt voll sichtbar. */
.baustein .system3d-leinwand {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 12%, #000 30%, #000 70%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 12%, #000 30%, #000 70%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
}

@media (max-width: 760px) {
  /* Feste Knöpfe für die Module unter der Szene, weil die Module am Handy eng stehen */
  .baustein .system3d-abschnitt .system3d-tasten {
    clip-path: none; width: auto; height: auto; overflow: visible; white-space: normal;
    top: auto; bottom: 150px; left: 12px; right: 12px; transform: none; max-width: none;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
  .baustein .system3d-abschnitt .system3d-tasten button { font-size: 0.86rem; padding: 12px 10px; min-height: 44px; }
  .baustein .system3d-abschnitt .system3d-tasten button[data-system3d-taste="kern"] { grid-column: 1 / -1; }
  .baustein .system3d-abschnitt.panel-offen .system3d-tasten { opacity: 0; pointer-events: none; }
  .baustein .system3d-abschnitt .system3d-marke { display: none; }
}

/* Zielkreis am Mauszeiger: folgt der Maus und rastet auf Knöpfen und Links ein wie eine Zielerfassung,
   passend zu dem, was die Seite verkauft: Kunden treffen. Über Projekten, Büchern und 3D steht, was ein Klick tut.
   Nur mit Maus, nicht bei "weniger Bewegung". Der normale Zeiger bleibt. */
.zielkreis {
  position: fixed; left: 0; top: 0; z-index: 9000; pointer-events: none; width: 34px; height: 34px;
  border: 1.5px solid rgba(47, 147, 214, 0.55); border-radius: 50%; opacity: 0;
  transition: opacity 0.25s, border-color 0.25s, background-color 0.25s;
}
.zielkreis.an { opacity: 1; }
.zielkreis i { position: absolute; width: 8px; height: 8px; border: 0 solid var(--hell); transition: opacity 0.25s; opacity: 0; }
.zielkreis i:nth-child(1) { left: -2px; top: -2px; border-left-width: 2px; border-top-width: 2px; border-top-left-radius: 3px; }
.zielkreis i:nth-child(2) { right: -2px; top: -2px; border-right-width: 2px; border-top-width: 2px; border-top-right-radius: 3px; }
.zielkreis i:nth-child(3) { left: -2px; bottom: -2px; border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: 3px; }
.zielkreis i:nth-child(4) { right: -2px; bottom: -2px; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 3px; }
.zielkreis.erfasst { border-color: transparent; }
.zielkreis.erfasst i { opacity: 1; }
.zielkreis span {
  position: absolute; inset: 0; display: grid; place-items: center; font: 800 0.72rem var(--schrift, inherit);
  letter-spacing: 0.02em; color: var(--weiss); opacity: 0; transition: opacity 0.2s;
}
.zielkreis.mit-text { background: var(--blau); border-color: var(--blau); }
.zielkreis.mit-text span { opacity: 1; }
.zielkreis.aus { opacity: 0 !important; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .zielkreis { display: none; } }

/* Funnel am Handy (Tim, 27.10.2026): der große Trichter stand vor der Überschrift und wiederholte die Liste darunter.
   Jetzt ist die Liste selbst der Trichter, links schmale Bänder mit den Beispielzahlen, die sich nach unten verengen. */
@media (max-width: 760px) {
  .funnel-raster > .funnel-figur { display: none; }
  .funnel-raster .funnel-stufen-liste { border-top: 0; margin-top: 30px; }
  .funnel-raster .funnel-stufen-liste li { padding: 16px 0 16px 98px; min-height: 86px; align-content: center; border-bottom: 0; }
  .funnel-raster .funnel-stufen-liste li + li { border-top: 1px solid var(--linie); }
  .funnel-raster .funnel-stufen-liste li::before {
    content: attr(data-zahl); left: 0; top: 3px; bottom: 3px; width: 82px; height: auto; border-radius: 0;
    display: grid; place-items: center; font: 800 0.86rem var(--schrift); letter-spacing: 0.02em;
    clip-path: polygon(var(--o) 0, calc(100% - var(--o)) 0, calc(100% - var(--u)) 100%, var(--u) 100%);
  }
  .funnel-raster .funnel-stufen-liste li:nth-child(1)::before { --o: 0%; --u: 8%; background: rgba(0, 113, 188, 0.16); color: var(--navy); }
  .funnel-raster .funnel-stufen-liste li:nth-child(2)::before { --o: 8%; --u: 16%; background: rgba(0, 113, 188, 0.34); color: var(--navy); }
  .funnel-raster .funnel-stufen-liste li:nth-child(3)::before { --o: 16%; --u: 24%; background: rgba(0, 113, 188, 0.62); color: var(--weiss); }
  .funnel-raster .funnel-stufen-liste li:nth-child(4)::before { --o: 24%; --u: 30%; background: var(--blau); color: var(--weiss); }
  .funnel-raster .funnel-stufen-liste::after { content: 'Beispielwerte: von 1.000 Besuchern zu 18 Kunden'; display: block; margin-top: 10px; font: 400 0.7rem var(--mono); color: var(--grau); }
}

/* Play-Knopf auf Videos */
.video-huelle { position: relative; }
.video-huelle video { display: block; cursor: pointer; }
.play-knopf {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; z-index: 2;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--blau); color: var(--weiss); box-shadow: 0 0 0 8px rgba(0, 113, 188, 0.22), 0 18px 40px -14px rgba(7, 28, 43, 0.6);
  transition: transform 0.25s var(--kurve), opacity 0.25s, background 0.2s;
}
.play-knopf svg { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }
.play-knopf:hover { background: var(--navy); transform: scale(1.06); }
.play-knopf:focus-visible { outline: 3px solid var(--hell); outline-offset: 4px; }
.video-huelle.laeuft .play-knopf { opacity: 0; transform: scale(0.8); pointer-events: none; }
@media (max-width: 760px) { .play-knopf { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .play-knopf svg { width: 26px; height: 26px; } }