/* ==========================================================================
   /website/ (LP-WEB, Video mit Manuel: neue Website). Nur seitenspezifisch, lädt nach css/lpx.css.
   Mobile first. Klassen mit Präfix web-. Farben nur Tokens, Grün nur WhatsApp.
   Runde 2 (26.10.): 9 Abschnitte (Kennst du das? im ersten Eindruck, Ablauf im ersten Schritt, Zusammenarbeit im Team),
   Mono nur für Dachzeile, Kapitel-Nummern, Vermerk, Adresszeile, Referenz-Etiketten. Kopfzeile, Dock, Cookie-Banner,
   Absende-Knopf, Ziffer im ersten Schritt und Dock-Ausweichen kommen aus dem System (css/lpx.css, js/lpx.js).
   ========================================================================== */

/* ---------- Sprachwelle (Zeichen für „Sprachnachricht“) ---------- */
.web-welle { display: inline-flex; flex: none; align-items: center; gap: 2px; height: 1em; }
.web-welle i { display: block; width: 2px; height: calc(var(--h, 0.5) * 100%); border-radius: 2px; background: var(--accent-ink); transform-origin: 50% 50%; }
.web-welle i:nth-child(3n) { background: var(--c-ring2); }
.web-welle--mini { height: 0.95rem; margin-top: 0.16rem; }
@media (prefers-reduced-motion: no-preference) {
  .web-welle i { animation: web-welle 1.5s ease-in-out infinite; }
  .web-welle i:nth-child(2) { animation-delay: -0.3s; }
  .web-welle i:nth-child(3) { animation-delay: -0.6s; }
  .web-welle i:nth-child(4) { animation-delay: -0.9s; }
  .web-welle i:nth-child(5) { animation-delay: -1.2s; }
}
@keyframes web-welle { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.42); } }

/* Label in Listen: Archivo statt Mono */
.web-label { margin: 0 0 0.8rem; font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--accent-ink); }

/* Knopf-Beschriftung wechselt (data-label-an): neuer Text gleitet kurz ein */
@media (prefers-reduced-motion: no-preference) {
  .web-label-knopf.is-neu { display: inline-block; animation: web-neu 0.28s var(--ease) both; }
}
@keyframes web-neu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Lange Zweizeiler: am Computer etwas kleiner, damit ein Titel nicht den ganzen ersten Bildschirm füllt */
@media (min-width: 901px) { .lp--website .chapter__title { font-size: min(clamp(2.6rem, 4.6vw, 5rem), 4.4rem); } }

/* Handy: knappere Abstände zwischen den Kapiteln (Seite kürzer, Haarlinie und Nummer gliedern schon) */
@media (max-width: 700px) {
  .lp--website .chapter { padding-top: 2.6rem; padding-bottom: 1.4rem; }
  .lp--website .chapter__head { gap: 1rem; }
  .lp--website .lpx-schluss { padding-top: 2.4rem; padding-bottom: 4.6rem; }
  .lp--website .lpx-schluss__buehne { min-height: 0; height: 10.5rem; }
}

/* Telefonnummer bricht nie mitten in der Nummer um */
.web-tel { white-space: nowrap; }

/* ---------- Hero: Satz der Anzeige, Knopf, dann Manuel im Ring (dasselbe Gesicht wie im Reel) ---------- */
.web-hero { overflow-x: clip; }
.web-hero .eyebrow { align-items: center; }
.lp--website .web-hero .lpx-mikro { font-size: 0.9375rem; line-height: 1.4; color: var(--fg-muted); text-wrap: balance; }
@media (max-width: 900px) {
  /* Handy: Dachzeile, H1, Knopf, Mikro, dann sofort Manuels Video (Gesicht auch im Instagram-Fenster),
     danach Gesichter, Video-Knopf und Lead. DOM-Reihenfolge bleibt (Screenreader), nur die Anzeige ordnet um. */
  .web-hero { gap: 0.7rem; }
  .web-hero > .eyebrow { order: 1; }
  .web-hero > .hero__title { order: 2; }
  .web-hero > .lpx-hero__cta { order: 3; }
  .web-hero > .lpx-mikro { order: 4; }
  .web-hero > .web-medien { display: contents; }
  .web-medien > .web-medien__rahmen { order: 5; margin: 0.55rem auto 0.35rem; }
  .web-hero > .lpx-hero__vertrauen { order: 6; justify-content: center; }
  .web-medien > .web-video__cta { order: 7; }
  .web-hero > .lpx-hero__lead { order: 8; }
  .web-medien > .web-video__wer { display: none; }
}
@media (max-width: 700px) {
  /* Dachzeile, H1 und grüner Knopf enden über dem Cookie-Banner */
  .web-hero { padding-top: 4.55rem; padding-bottom: 1.6rem; }
  .web-hero .hero__title { font-size: clamp(1.65rem, 7.6vw, 2.3rem); line-height: 1.04; }
  .web-hero .lpx-hero__cta { margin-top: 0.15rem; }
  .web-hero .lpx-hero__cta .btn--big { min-height: 56px; padding-block: 0.9rem; }
}
@media (max-width: 359px) { .web-hero .hero__title { font-size: clamp(1.6rem, 8.2vw, 1.9rem); } .lp--website .web-hero .lpx-mikro { font-size: 0.875rem; } }

/* Video mit Manuel; das Lichtpunkt-Zeichen läuft hinter dem Rahmen durch, nie über seinem Gesicht */
.web-medien { position: relative; display: grid; justify-items: center; gap: 0.9rem; margin: 0.7rem 0 0.3rem; }
.web-medien__rahmen { position: relative; width: min(300px, 78vw); }
.web-medien__buehne { position: absolute; inset: 0; z-index: 0; min-height: 0; }
.web-medien__ring.lpx-buehne__bild { inset: auto; left: -40%; top: 50%; width: 180%; max-width: none; max-height: none; margin: 0; transform: translateY(-50%); opacity: 0.85; }
.web-medien__ring ellipse { stroke-width: 0.34; stroke-dasharray: 0.01 0.555; }
.web-video__box { position: relative; z-index: 1; width: 100%; max-width: none; margin: 0; aspect-ratio: 4 / 5; box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.85); }
.web-video__box video { object-position: 50% 28%; }
/* Start-Knopf unten im Bild, damit nichts über Manuels Gesicht liegt */
.web-video__box .lpx-video__start { align-content: end; padding-bottom: 3.3rem; background: linear-gradient(180deg, rgba(11, 15, 23, 0) 55%, rgba(11, 15, 23, 0.78)); }
.web-video__box .lpx-video__start::before { width: 3.4rem; box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-accent) 22%, transparent); }
.web-video__box .lpx-video__start::after { top: auto; bottom: 5rem; width: 1.15rem; transform: translate(-38%, 50%); }
.web-video__wer { margin: 0; max-width: 24rem; text-align: center; font-family: var(--font-body); font-weight: 500; font-size: 0.875rem; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--fg-muted); }
.web-video__cta { width: 100%; }
@media (max-width: 900px) {
  /* Am Handy zeichnet die Szene keine Ringe hinter dem Video (Leistung): das Zeichen um Manuel bleibt als SVG stehen */
  html.szene-an .web-medien__buehne.is-live .lpx-buehne__bild { opacity: 0.85; }
}
/* Ohne WebGL: das Lichtpunkt-Handy um das Video als gepunktete Linie */
html.no-webgl .web-medien__rahmen::after { content: ""; position: absolute; z-index: 2; inset: -22px -7px -7px; border: 2px dotted color-mix(in srgb, var(--c-accent) 70%, transparent); border-radius: 22px; pointer-events: none; }
@media (min-width: 901px) {
  /* Knopf direkt unter der H1: er endet bei 1440 x 900 deutlich über dem Cookie-Banner (ab y 599) */
  .web-hero > * { order: 3; }
  .web-hero > .eyebrow, .web-hero > .hero__title { order: 0; }
  .web-hero > .lpx-hero__cta { order: 1; }
  .web-hero > .lpx-mikro { order: 2; margin-top: -0.4rem; }
  .web-hero > .lpx-hero__lead { order: 3; }
  .web-hero > .lpx-hero__vertrauen { order: 5; }
  .web-hero > .web-medien { grid-column: 2; grid-row: 1 / span 8; align-self: center; margin: 0; }
  .web-medien__rahmen { width: min(100%, 25rem); }
  .web-video__cta { display: none; }
  .web-hero .hero__title { font-size: clamp(2.5rem, 4.4vw, 5rem); }
  .lp--website .web-hero .lpx-mikro { font-size: 0.95rem; }
  html.no-webgl .web-medien__rahmen::after { inset: -30px -8px -8px; border-radius: 26px; }
}

/* ---------- Laufband: bei reduzierter Bewegung jedes Wort nur einmal (styles.css blendet erst ab dem 8. aus) ---------- */
@media (prefers-reduced-motion: reduce) {
  .web-band .marquee__track span:nth-child(n + 7) { display: none; }
  .web-band .marquee__track span:nth-child(6)::after { content: none; }
}
.web-band + .chapter .chapter__head { border-top: 0; }

/* ---------- Erzählung mit Bühne (Erster Eindruck, Ablauf) ---------- */
.web-erz { position: relative; }
.web-erz__buehne { min-height: 0; margin: 0 0 0.4rem; }
.web-erz--eindruck .web-erz__buehne { height: 15rem; }
.web-erz--ablauf .web-erz__buehne { height: 12.5rem; }
/* Vermerk oben rechts IN der Bühne, nie darunter im Fließtext */
.lp--website .web-erz__buehne .lpx-buehne__vermerk { top: 0.6rem; bottom: auto; right: 0; }
.web-zustaende { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.web-zustand { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.6rem; padding: 1rem 0; border-top: 1px solid var(--line); transition: opacity 0.5s var(--ease); }
.web-zustand__num { padding-top: 0.45em; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--fg-muted); }
.web-zustand h3 { margin: 0 0 0.3rem; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--fg); }
.web-zustand p { margin: 0; max-width: 32rem; color: var(--fg-muted); }
.web-zustand--neu .web-zustand__num { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); letter-spacing: 0.04em; }
.web-zustand--neu h3 { color: var(--fg); }
.web-zustand--neu h3::after { content: ""; display: block; width: 3.2rem; height: 2px; margin-top: 0.45rem; border-radius: 2px; background: var(--c-accent); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  html.szene-an .web-zustand--neu h3::after { transform: scaleX(0); transition: transform 0.8s var(--ease); }
  html.szene-an .web-zustand--neu.is-aktiv h3::after { transform: scaleX(1); }
}
.web-satz { margin: 1.6rem 0 0; max-width: 24ch; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--fg); text-wrap: balance; }
.web-satz span { color: var(--accent-ink); }

/* Ablauf-Schritte: am Handy ohne Mindesthöhe, Schritt 01 trägt Liste und Knopf */
.web-weg__schritte { gap: 0; }
.web-weg__schritte .lpx-schritt { padding: 0.15rem 0 1.4rem; }
.web-weg__schritte .lpx-schritt:last-child { padding-bottom: 0.2rem; }
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* Handy: nur die Bühne im Ablauf klebt, klein und gut gefüllt. seite.js blendet jeden Teil aus, sobald er in die Bühne
     läuft, und wählt den Schritt für die Szene. --web-ende kürzt den Klebebereich, damit die Bühne mit dem letzten
     Schritt wegscrollt und nie leer stehen bleibt. */
  html.szene-an .web-erz--ablauf .web-erz__buehne { position: sticky; top: 4.2rem; z-index: 0; }
  html.szene-an .web-erz--ablauf { display: flow-root; margin-bottom: var(--web-ende, 0px); }
  html.szene-an .web-erz--ablauf > ol { margin-bottom: calc(-1 * var(--web-ende, 0px)); }
  /* Die senkrechte Linie läuft nicht durch die Bühne: sie beginnt an deren Unterkante (--web-schnitt aus seite.js) */
  html.szene-an .web-erz--ablauf .lpx-ablauf::before {
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--web-schnitt, 0px) - 0.6rem), #000 calc(var(--web-schnitt, 0px) - 0.6rem + 24px));
    mask-image: linear-gradient(to bottom, transparent calc(var(--web-schnitt, 0px) - 0.6rem), #000 calc(var(--web-schnitt, 0px) - 0.6rem + 24px));
  }
  html.szene-an .web-erz--ablauf .lpx-ablauf::after {
    -webkit-mask-image: linear-gradient(to bottom, transparent calc((var(--web-schnitt, 0px) - 0.6rem) / max(var(--lpx-p, 1), 0.02)), #000 calc((var(--web-schnitt, 0px) - 0.6rem + 24px) / max(var(--lpx-p, 1), 0.02)));
    mask-image: linear-gradient(to bottom, transparent calc((var(--web-schnitt, 0px) - 0.6rem) / max(var(--lpx-p, 1), 0.02)), #000 calc((var(--web-schnitt, 0px) - 0.6rem + 24px) / max(var(--lpx-p, 1), 0.02)));
  }
}
@media (min-width: 901px) {
  .web-erz { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .web-erz > ol { grid-column: 1; grid-row: 1; }
  .web-erz__buehne, .web-erz--eindruck .web-erz__buehne, .web-erz--ablauf .web-erz__buehne { grid-column: 2; grid-row: 1; height: 60vh; min-height: 360px; margin: 0; }
  .web-zustand { grid-template-columns: 3.4rem minmax(0, 1fr); padding: 1.6rem 0; }
  .web-zustand h3 { font-size: 1.75rem; }
  .web-weg__schritte .lpx-schritt { padding-bottom: 2rem; }
  .web-weg__schritte .lpx-schritt__t { font-size: 1.75rem; }
  @media (prefers-reduced-motion: no-preference) {
    html.szene-an .web-erz__buehne { position: sticky; top: calc(5.5rem + 2vh); }
    html.szene-an .web-erz--ablauf .web-erz__buehne { top: 12vh; height: 52vh; }
    html.szene-an .web-zustand { min-height: 34vh; align-content: center; }
    html.szene-an .web-weg__schritte .lpx-schritt { min-height: 40vh; }
    html.szene-an .web-zustand:not(.is-aktiv) h3, html.szene-an .web-weg__schritte .lpx-schritt:not(.is-aktiv) .lpx-schritt__t { opacity: 0.5; transition: opacity 0.4s var(--ease); }
  }
}
/* Firmenzeile im Team: voller Name als lesbarer Text statt 12-px-Mono (Fließtext mindestens 1.0625rem) */
.lp--website .lpx-firma { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; letter-spacing: 0; text-transform: none; }

/* ---------- Kennst du das? (Block im ersten Eindruck, antippbar) ---------- */
.web-halt { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.web-halt__titel { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--fg); text-wrap: balance; }
.web-halt__titel span { display: block; color: var(--accent-ink); }
.web-halt__intro { margin: 0.7rem 0 1.1rem; max-width: 30rem; color: var(--fg-muted); }
.web-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--lpx-gap); border-top: 1px solid var(--line-strong); }
.web-check li { border-bottom: 1px solid var(--line-strong); }
.web-check__punkt { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.9rem; align-items: center; width: 100%; min-height: 56px; padding: 0.7rem 0; border: 0; text-align: left; color: var(--fg); font: 500 1.0625rem/1.35 var(--font-body); cursor: pointer; transition: color 0.3s var(--ease); }
.web-check__box { position: relative; width: 1.4rem; height: 1.4rem; border-radius: 0.35rem; border: 1px solid var(--line-strong); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.web-check__box::after { content: ""; position: absolute; left: 0.38rem; top: 0.3rem; width: 0.5rem; height: 0.28rem; border-left: 2px solid var(--c-on-accent); border-bottom: 2px solid var(--c-on-accent); transform: rotate(-45deg); clip-path: inset(0 100% 0 0); transition: clip-path 0.35s var(--ease); }
.web-check__punkt[aria-pressed="true"] .web-check__box { background: var(--c-accent); border-color: var(--c-accent); transform: scale(1.06); }
.web-check__punkt[aria-pressed="true"] .web-check__box::after { clip-path: inset(0); }
.web-check__punkt:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 0.4rem; }
@media (hover: hover) and (pointer: fine) { .web-check__punkt:hover .web-check__box { border-color: var(--c-accent); } }
.web-check__antwort { margin: 0.9rem 0 0; font-size: 1rem; line-height: 1.4; color: var(--fg-muted); }
.web-check__antwort:empty { margin: 0; }
.web-halt .lpx-cta { margin-top: 1rem; }
@media (min-width: 901px) {
  .web-halt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); margin-top: 3rem; padding-top: 2.2rem; }
  .web-halt__kopf { grid-column: 1 / span 5; }
  .web-halt__liste { grid-column: 6 / span 7; }
  .web-halt__titel { font-size: 1.9rem; }
  .web-check { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-check__punkt { font-size: 1.15rem; }
  .web-satz { font-size: clamp(1.9rem, 3vw, 2.8rem); margin-top: 2.4rem; }
}

/* ---------- Dein erster Schritt (Sprachnachricht) ---------- */
.web-sprach__dialekt { display: flex; align-items: center; gap: 0.6rem; margin: 0.3rem 0 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: 0; text-transform: none; color: var(--fg); }
.web-sprach__liste { gap: 0.6rem; }
.web-sprach__liste li { font-size: 1.0625rem; }
.web-sprach__ruhig { margin: 1rem 0 0 !important; max-width: 34rem; color: var(--fg-muted); }
.web-sprach__cta { margin-top: 1.2rem; }
.web-risiko { margin: 1.6rem 0 0; max-width: 34rem; padding-left: 1rem; border-left: 2px solid var(--c-accent); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); }
.web-risiko em { font-style: normal; color: var(--accent-ink); }
.web-notiz { margin: 1.2rem 0 0; max-width: 34rem; font-size: 1rem; line-height: 1.5; color: var(--fg-muted); }
.web-notiz a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 0.25em; }
@media (min-width: 901px) { .web-risiko { font-size: 1.5rem; margin-top: 2.4rem; } }

/* ---------- Gefühl: Auswahl, Vorschau (DOM), Bühne (Szene) ---------- */
.web-gefuehl__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.web-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.web-wahl__chip { position: relative; display: grid; align-content: center; gap: 0.25rem; min-height: 52px; padding: 0.55rem 0.9rem; border: 1px solid var(--line-strong); border-radius: 1.2rem; text-align: left; color: var(--fg); cursor: pointer; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.12s var(--ease); }
.web-wahl__chip b { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.1; letter-spacing: -0.01em; }
.web-wahl__chip b::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color 0.3s, border-color 0.3s; }
.web-wahl__chip span { font-size: 1rem; line-height: 1.35; color: var(--fg-muted); }
.web-wahl__chip:active { transform: scale(0.97); }
.web-wahl__chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.web-wahl__chip.is-vorschau { border-color: color-mix(in srgb, var(--c-accent) 55%, var(--line-strong)); }
.web-wahl__chip[aria-pressed="true"] { border-color: var(--c-accent); background: var(--accent-soft); color: var(--accent-ink); }
.web-wahl__chip[aria-pressed="true"] b::before, .web-wahl__chip.is-vorschau b::before { background: var(--c-accent); border-color: var(--c-accent); }
@media (hover: hover) and (pointer: fine) { .web-wahl__chip:hover { border-color: var(--c-accent); } }
.web-wahl__info { min-height: 1.5em; margin: 0; font-weight: 500; font-size: 1rem; line-height: 1.45; color: var(--fg-muted); }
.web-gefuehl__antwort { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: var(--accent-ink); }
.web-gefuehl__antwort:empty { display: none; }
.web-gefuehl__ende .lpx-cta { margin-top: 0.8rem; }
.web-gefuehl__antwort:empty + .lpx-cta { margin-top: 0; }
@media (max-width: 700px) {
  /* Handy: ein Bildschirm für die ganze Mechanik. Beispiel-Seite oben, darunter alle sechs Chips, Erklärung, Knopf */
  .web-gefuehl__spiel { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 0.8rem; }
  .web-gefuehl__spiel .web-probe { order: 1; }
  .web-gefuehl__spiel .web-wahl { order: 2; width: 100%; }
  .web-gefuehl__spiel .web-wahl__info { order: 3; justify-self: stretch; }
  .web-wahl__chip span { display: none; }
  .web-gefuehl .chapter__head { margin-bottom: 1rem; }
}
@media (max-width: 359px) { .web-wahl { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 701px) {
  .web-wahl__info { display: none; }
  .web-wahl__chip { min-height: 78px; padding: 0.8rem 0.9rem 0.85rem; border-radius: 1rem; align-content: start; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .web-gefuehl__spiel { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 1.4rem; align-items: start; }
  .web-gefuehl__spiel .web-probe { grid-column: 1; grid-row: 1; width: 15rem; margin: 0; }
  .web-gefuehl__spiel .web-wahl { grid-column: 2; grid-row: 1; }
}

/* Vorschau: kleines Handy mit einer Beispiel-Seite, ändert Schrift, Form und Bewegung */
.web-probe { margin: 0 auto; width: 15rem; }
.web-probe__geraet { position: relative; padding: 0.45rem; border-radius: 1.4rem; border: 1px solid var(--line-strong); background: var(--c-panel); box-shadow: 0 36px 70px -36px rgb(0 0 0 / 0.8); }
.web-probe__leiste { display: flex; align-items: center; gap: 0.25rem; height: 1.3rem; padding: 0 0.55rem; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.06em; color: var(--fg-muted); }
.web-probe__leiste i { width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--line-strong); }
.web-probe__leiste span { margin-left: auto; }
.web-probe__seite {
  --p-r: 0.9rem; --p-bg: color-mix(in srgb, var(--bg) 88%, var(--fg)); --p-fg: var(--fg); --p-akz: var(--c-accent);
  position: relative; display: flex; flex-direction: column; gap: 0.55rem; aspect-ratio: 3 / 3.55; padding: 0.9rem 0.85rem; overflow: hidden;
  border-radius: calc(var(--p-r) + 0.3rem); background: var(--p-bg); color: var(--p-fg);
  transition: background-color 0.6s var(--ease), border-radius 0.6s var(--ease), color 0.6s var(--ease);
}
.web-probe__seite > * { flex: none; }   /* nichts wird gestaucht, sonst rutscht der Titel ins Bild */
/* Nur das Bild gibt nach, damit der Knopf „Anfragen“ in jedem Gefühl ganz im Rahmen steht */
.web-probe__seite > .web-probe__bild { flex: 0 1 auto; min-height: 1.6rem; }
.web-probe__nav { display: flex; align-items: center; gap: 0.3rem; }
.web-probe__logo { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--p-akz); margin-right: auto; transition: border-radius 0.6s var(--ease), background-color 0.6s; }
.web-probe__nav i { width: 1.1rem; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.5; }
.web-probe__bild { position: relative; aspect-ratio: 16 / 10; border-radius: var(--p-r); background: linear-gradient(135deg, color-mix(in srgb, var(--p-akz) 45%, transparent), color-mix(in srgb, var(--c-ring2) 18%, transparent)); transition: border-radius 0.6s var(--ease), aspect-ratio 0.6s var(--ease), background 0.6s, opacity 0.6s; overflow: hidden; }
.web-probe__portrait { position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--fg) 70%, transparent) 0 18%, transparent 19%), radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in srgb, var(--fg) 60%, transparent) 0 70%, transparent 71%), color-mix(in srgb, var(--p-akz) 35%, var(--p-bg)); box-shadow: 0 0 0 2px var(--p-akz); transition: transform 0.6s var(--ease); }
.web-probe__titel { margin: 0.15rem 0 0; font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1; letter-spacing: -0.03em; transition: font-size 0.5s var(--ease), letter-spacing 0.5s var(--ease), font-weight 0.5s; }
.web-probe__text { margin: 0; font-size: 0.72rem; line-height: 1.35; opacity: 0.75; }
.web-probe__knopf { align-self: flex-start; display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0 0.8rem; border-radius: 999px; background: var(--p-akz); color: var(--c-on-accent); font: 600 0.68rem/1 var(--font-body); transition: border-radius 0.6s var(--ease), background-color 0.6s, color 0.6s, padding 0.5s; }
.web-probe__zeilen { display: grid; gap: 0.35rem; margin-top: 0.2rem; }
.web-probe__zeilen i { height: 2px; border-radius: 2px; background: currentColor; opacity: 0.22; }
.web-probe__zeilen i:nth-child(2) { width: 80%; } .web-probe__zeilen i:nth-child(3) { width: 62%; }
.web-probe__cap { width: max-content; max-width: min(22rem, 90vw); margin: 0.7rem 0 0 50%; transform: translateX(-50%); text-align: center; font-family: var(--font-body); font-weight: 500; font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--fg-muted); }

/* Die sechs Gefühle */
.web-probe[data-gefuehl="ruhig"] .web-probe__seite { --p-r: 0.2rem; padding: 1.2rem 1rem; gap: 0.8rem; }
.web-probe[data-gefuehl="ruhig"] .web-probe__bild { aspect-ratio: 4 / 3.4; background: linear-gradient(160deg, color-mix(in srgb, var(--fg) 16%, transparent), color-mix(in srgb, var(--fg) 4%, transparent)); }
.web-probe[data-gefuehl="ruhig"] .web-probe__titel { font-weight: 300; font-size: 1rem; letter-spacing: 0.24em; text-transform: uppercase; }
.web-probe[data-gefuehl="ruhig"] .web-probe__knopf { background: transparent; color: var(--p-fg); box-shadow: inset 0 0 0 1px currentColor; border-radius: 0; }
.web-probe[data-gefuehl="ruhig"] .web-probe__logo { background: var(--p-fg); border-radius: 0; width: 0.6rem; height: 0.6rem; }
.web-probe[data-gefuehl="modern"] .web-probe__seite { --p-r: 1rem; }
.web-probe[data-gefuehl="modern"] .web-probe__titel { font-size: 1.6rem; letter-spacing: -0.045em; }
.web-probe[data-gefuehl="modern"] .web-probe__bild { background: linear-gradient(120deg, var(--c-accent), var(--c-ring2) 45%, color-mix(in srgb, var(--c-accent) 30%, transparent)); background-size: 220% 100%; }
.web-probe[data-gefuehl="boden"] .web-probe__seite { --p-r: 0.35rem; }
.web-probe[data-gefuehl="boden"] .web-probe__bild { aspect-ratio: 16 / 11; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--fg) 14%, transparent) 0 22%, color-mix(in srgb, var(--fg) 8%, transparent) 22% 44%), color-mix(in srgb, var(--fg) 6%, transparent); }
.web-probe[data-gefuehl="boden"] .web-probe__titel { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; }
.web-probe[data-gefuehl="boden"] .web-probe__knopf { background: var(--p-fg); color: var(--bg); border-radius: 0.3rem; }
.web-probe[data-gefuehl="warm"] .web-probe__seite { --p-r: 1.4rem; --p-akz: var(--c-ring2); }
.web-probe[data-gefuehl="warm"] .web-probe__bild { aspect-ratio: 16 / 9; background: transparent; }
.web-probe[data-gefuehl="warm"] .web-probe__portrait { transform: translate(-50%, -50%) scale(1); }
.web-probe[data-gefuehl="warm"] .web-probe__titel { font-weight: 600; font-size: 1.3rem; letter-spacing: -0.015em; text-align: center; }
.web-probe[data-gefuehl="warm"] .web-probe__text { text-align: center; font-size: 0.78rem; }
.web-probe[data-gefuehl="warm"] .web-probe__knopf { align-self: center; }
.web-probe[data-gefuehl="klar"] .web-probe__seite { --p-r: 0.1rem; gap: 0.45rem; }
.web-probe[data-gefuehl="klar"] .web-probe__bild { aspect-ratio: 16 / 6; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 35%, transparent); }
.web-probe[data-gefuehl="klar"] .web-probe__titel { font-family: var(--font-mono); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; }
.web-probe[data-gefuehl="klar"] .web-probe__knopf { border-radius: 0.15rem; background: transparent; color: var(--p-fg); box-shadow: inset 0 0 0 1px currentColor; font-family: var(--font-mono); }
.web-probe[data-gefuehl="klar"] .web-probe__zeilen i { opacity: 0.5; height: 1px; width: 100%; }
.web-probe[data-gefuehl="laut"] .web-probe__seite { --p-bg: var(--c-accent); --p-fg: var(--c-on-accent); --p-akz: var(--c-on-accent); --p-r: 0.5rem; }
.web-probe[data-gefuehl="laut"] .web-probe__bild { aspect-ratio: 16 / 5; background: var(--c-on-accent); }
.web-probe[data-gefuehl="laut"] .web-probe__titel { font-weight: 900; font-size: 1.85rem; line-height: 0.88; letter-spacing: -0.04em; text-transform: uppercase; }
.web-probe[data-gefuehl="laut"] .web-probe__knopf { background: var(--c-on-accent); color: var(--c-accent); padding: 0 1.1rem; min-height: 1.9rem; font-size: 0.78rem; }
@media (prefers-reduced-motion: no-preference) {
  .web-probe[data-gefuehl="modern"] .web-probe__bild { animation: web-verlauf 5s ease-in-out infinite alternate; }
  .web-probe.is-wechsel .web-probe__seite > * { animation: web-auf 0.55s var(--ease) both; }
  .web-probe.is-wechsel .web-probe__seite > :nth-child(2) { animation-delay: 0.04s; } .web-probe.is-wechsel .web-probe__seite > :nth-child(3) { animation-delay: 0.08s; }
  .web-probe.is-wechsel .web-probe__seite > :nth-child(4) { animation-delay: 0.12s; } .web-probe.is-wechsel .web-probe__seite > :nth-child(5) { animation-delay: 0.16s; }
}
@keyframes web-verlauf { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes web-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 901px) {
  .web-gefuehl__spiel { display: contents; }
  .web-gefuehl__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 4vw, 4rem); row-gap: 1.6rem; align-items: start; }
  .web-wahl { grid-column: 1; grid-row: 1; }
  .web-gefuehl__ende { grid-column: 1; grid-row: 2; }
  .web-gefuehl__buehne { grid-column: 2; grid-row: 1 / span 2; min-height: clamp(420px, 58vh, 560px); align-self: stretch; }
  .web-probe { grid-column: 2; grid-row: 1 / span 2; z-index: 2; align-self: end; justify-self: start; width: 12.5rem; margin: 0 0 -1rem -0.5rem; }
  .web-wahl__chip { min-height: 92px; padding: 1rem 1.1rem; }
  .web-wahl__chip b { font-size: 1.1rem; }
}

/* ---------- Echte Projekte: Handy-Rahmen mit echten Bildschirmfotos, Fußzeile als Bild ---------- */
.web-beweis__wer { margin: 0 0 1.2rem; font-family: var(--font-body); font-weight: 500; font-size: 1rem; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--fg-muted); }
.web-refs { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 1rem; margin-inline: calc(-1 * var(--pad)); padding: 0.4rem var(--pad) 0.8rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.web-refs::-webkit-scrollbar { display: none; }
.web-ref { scroll-snap-align: start; display: grid; align-content: start; gap: 1rem; }
.web-ref__handy { position: relative; margin: 0; aspect-ratio: 260 / 400; overflow: hidden; border-radius: 1.6rem; border: 5px solid var(--c-panel); box-shadow: 0 0 0 1px var(--line-strong), 0 40px 80px -44px rgb(0 0 0 / 0.9); background: var(--card); }
.web-ref__handy img { display: block; width: 100%; height: auto; transition: transform 4s var(--ease); }
.web-ref__text { display: grid; gap: 0.4rem; justify-items: start; }
.web-ref__text .lpx-ref__art { margin: 0; }
.web-ref__text .lpx-ref__marke { font-size: 1.5rem; }
.web-ref__text .lpx-ref__text { font-size: 1.0625rem; }
.web-ref--eigen .lpx-ref__art { color: var(--fg-muted); }
.web-ref__fuss { display: grid; gap: 0.35rem; justify-items: start; margin: 0.5rem 0 0; }
.web-ref__fuss img { display: block; width: auto; max-width: 100%; height: auto; max-height: 2.6rem; border-radius: 0.4rem; border: 1px solid var(--line); }
.web-ref__fuss figcaption { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.web-refs__stand { display: flex; align-items: center; gap: 0.8rem; margin: 0.2rem 0 0; }
.web-refs__punkte { display: inline-flex; gap: 0.35rem; }
.web-refs__punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.web-refs__punkte i.is-an { background: var(--c-accent); }
.web-refs__wisch { font-size: 0.875rem; line-height: 1.45; color: var(--fg-muted); }
.web-eigen { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line-strong); }
.web-eigen .lpx-ref__art { margin: 0 0 0.5rem; color: var(--fg-muted); }
.web-eigen__satz { margin: 0; max-width: 46rem; font-size: 1.0625rem; color: var(--fg-muted); }
.web-eigen__satz b { color: var(--fg); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .web-ref:hover .web-ref__handy img { transform: translateY(calc(-1 * var(--web-weg, 0px))); } }
@media (max-width: 359px) { .web-refs { grid-auto-columns: 84%; } }
@media (min-width: 701px) { .web-refs { grid-auto-columns: 42%; } }
@media (min-width: 1001px) {
  .web-refs { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; overflow: visible; gap: clamp(1.4rem, 2.4vw, 2.4rem); }
  .web-ref__handy { aspect-ratio: auto; height: min(29rem, 56vh); }
  .web-ref__text .lpx-ref__marke { font-size: 1.75rem; }
}

/* ---------- Was deine Website kann: zwei Punkte-Listen ---------- */
.web-was__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
.web-was__titel { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.8rem; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--fg); }
.web-was__titel .sigmark { width: 1em; height: 1em; flex: none; }
.web-was__titel .sigmark ellipse { fill: none; stroke: var(--c-accent); stroke-width: 2.4; }
.web-was .lpx-punkte > li { padding: 0.9rem 0; }
.web-was .lpx-punkte b { font-size: 1.125rem; }
.web-was .lpx-punkte p { font-size: 1rem; }
.web-was__gruppe--wunsch .lpx-punkte { counter-reset: lpxp 4; }
.web-was__gruppe--wunsch .lpx-punkte b { color: var(--fg-muted); }
.web-was__gruppe--wunsch .web-was__titel .sigmark ellipse { stroke: var(--fg-muted); }
@media (min-width: 901px) {
  .web-was__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .web-was__titel { font-size: 1.9rem; }
  .web-was .lpx-punkte b { font-size: 1.3rem; }
}

/* ---------- Team, darin „Wie wir zusammenarbeiten“ ---------- */
.web-person__marke { grid-column: 2; display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 !important; font-family: var(--font-body); font-weight: 600; font-size: 0.875rem !important; letter-spacing: 0; text-transform: none; color: var(--accent-ink) !important; }
.web-person__marke::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.web-team .lpx-person__foto { border-radius: 1rem; grid-row: span 4; }
.web-zusammen { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.web-zusammen__titel { margin: 0; }
.web-zusammen__text { margin: 1.1rem 0 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.5; color: var(--fg-muted); }
@media (min-width: 901px) {
  .web-zusammen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); margin-top: 3.4rem; padding-top: 2.2rem; }
  .web-zusammen .web-label { grid-column: 1 / -1; }
  .web-zusammen .lpx-zitat { grid-column: 1 / span 8; }
  .web-zusammen__text { grid-column: 8 / span 5; margin-top: 1.8rem; font-size: 1.15rem; }
}

/* ---------- Fragen: leiser Weg zum Schreiben ---------- */
.web-weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; margin: clamp(1.4rem, 4vh, 2.2rem) 0 0; color: var(--fg-muted); }
.web-weiter a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--wa); text-underline-offset: 0.3em; }
.web-weiter .ico-wa { width: 1.25em; height: 1.25em; margin-right: 0.45em; color: var(--wa); }

/* ---------- Schluss ---------- */
.web-schluss__claim { margin: 1.1rem auto 1.6rem; text-align: center; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }

/* ---------- Rückfall-Bilder der Bühnen (Lichtpunkt-Sprache wie .nav__mark) ---------- */
.web-fb { width: min(94%, 460px); max-height: 94%; }
.web-fb * { fill: none; stroke: var(--c-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.01 6.5; }
.web-fb .web-fb__ring ellipse { stroke-width: 2.6; stroke-dasharray: 0.01 8; opacity: 0.55; }
.web-fb .web-fb__ring .web-fb__w { stroke: var(--c-ring2); }
.web-fb .web-fb__flaeche { stroke-dasharray: 0.01 4.4; opacity: 0.75; }
.web-fb .web-fb__dicht { stroke-dasharray: 0.01 3.4; }
.web-fb .web-fb__dick { stroke-width: 4.5; stroke-dasharray: 0.01 4; }
.web-fb .web-fb__knopf { stroke: var(--fg); stroke-dasharray: 0.01 3.4; }
.web-fb .web-fb__haken * { stroke-dasharray: none; stroke-width: 2.4; }
.web-fb--klone .web-fb__klone * { stroke: var(--fg); opacity: 0.5; stroke-dasharray: 0.01 4; }
.web-fb__klone--h { display: none; }
@media (max-width: 900px) { .web-fb__klone--d { display: none; } .web-fb__klone--h { display: inline; } }
.web-fb .web-fb__welle line { stroke-width: 3.4; stroke-dasharray: 0.01 5.4; }
.web-fb .web-fb__welle line:nth-child(3n) { stroke: var(--c-ring2); }
.web-fb .web-fb__pillen rect { stroke: var(--c-ring2); }
.web-fb__vibe { opacity: 0; transition: opacity 0.45s var(--ease); }
body:not([data-vibe]) .web-fb__vibe[data-vibe="klar"], body[data-vibe="klar"] .web-fb__vibe[data-vibe="klar"], body[data-vibe="kraeftig"] .web-fb__vibe[data-vibe="kraeftig"], body[data-vibe="persoenlich"] .web-fb__vibe[data-vibe="persoenlich"] { opacity: 1; }
/* Am Handy füllt das Rückfall-Bild die flache Bühne */
@media (max-width: 900px) { .web-erz__buehne .web-fb { width: auto; height: 100%; max-width: 100%; max-height: none; } }

@media (prefers-reduced-motion: reduce) {
  .web-probe__seite, .web-probe__seite * { transition: none !important; animation: none !important; }
  .web-ref__handy img { transition: none; }
  .web-check__box::after { transition: none; }
}

/* Lesetexte nie unter 1.0625rem (SYSTEM 3), Mikrozeilen dürfen kleiner sein */
.lp--website .lpx-mikro { font-size: 1rem; line-height: 1.45; }

/* Aktiver Zustand im ersten Eindruck: Nummer leuchtet (auch am Handy, wo die Bühne nicht klebt) */
.web-zustand.is-aktiv .web-zustand__num { color: var(--accent-ink); }
.web-zustand--neu.is-aktiv .web-zustand__num { color: var(--c-on-accent); }