/* ==========================================================================
   /angebote/ (P4, Angebote per Sprachnachricht). Nur diese Seite, lädt nach css/lpx.css.
   Leitidee: Aus Stimme wird Papier. Einziges helles Objekt der LPs ist das Blatt „Angebot · Entwurf“,
   Gelb (--markiert) nur als Markierung auf dem Papier. Mobile first, Erweiterungen ab 701 / 901 / 1101 px.
   Startzustände der Einmal-Bewegungen nur unter html.lpx-anim (setzt js/lpx.js, nicht bei reduzierter Bewegung).
   ========================================================================== */

.lp--angebote {
  --markiert: #f5b84b;
  --p4-paper: color-mix(in srgb, var(--c-light) 93%, var(--c-accent));
  --p4-ink: var(--c-dark);
  --p4-ink-2: color-mix(in srgb, var(--c-dark) 62%, var(--p4-paper));
  --p4-rule: color-mix(in srgb, var(--c-dark) 12%, transparent);
  --p4-cursor: var(--c-accent-steel, #185f99);
}

/* Gelb der Lichtpunkt-Markierungen: heller und satter als das Papier-Gelb, damit es auf dunklem Grund leuchtet */
:root:has(> body.lp--angebote) { --markiert: #ffd23f; }

/* ---------- Kopfzeile und Dock am Handy (Prüfung 1) ---------- */
@media (max-width: 700px) { .lp--angebote.lpx .nav::before { background: var(--bg); } }
@media (max-width: 400px) {
  .lp--angebote .dock__wa, .lp--angebote .dock__form { padding-inline: 0.5rem; font-size: 0.9rem; white-space: nowrap; }
  .lp--angebote .dock__form { gap: 0.45rem; }
}
/* Dock am Handy voll deckend (Prüfung 2): kein Fließtext scheint durch, auch nicht unter „Anfrage stellen“ */
@media (max-width: 700px) {
  .lp--angebote.lpx .dock { background: var(--c-panel); }
  .lp--angebote.lpx .dock__form, .lp--angebote.lpx .dock__form:hover { background: color-mix(in srgb, var(--c-light) 8%, var(--c-panel)); }
}

/* ---------- Cookie-Banner am Handy kompakt (Banner aus js/tracking.js, hier nur Optik) ----------
   Auf kurzen Handy-Höhen (Instagram-Fenster 390 x 664, iPhone SE) bleiben H1 und grüner Hero-Knopf über dem Banner frei.
   Ganzer Text bleibt lesbar, die drei Knöpfe bleiben gleichwertig in einer Zeile, das Dock darunter bleibt tippbar. */
@media (max-width: 700px) {
  .lp--angebote .consent { left: 0.6rem; right: 0.6rem; width: auto; bottom: calc(5.3rem + env(safe-area-inset-bottom, 0px)); max-height: 52svh; padding: 0.8rem 0.9rem 0.85rem; border-radius: 1.05rem; }
  .lp--angebote .consent h2 { margin: 0 0 0.3rem; font-size: 1rem; line-height: 1.2; }
  .lp--angebote .consent p { margin: 0; font-size: 0.76rem; line-height: 1.42; }
  .lp--angebote .consent__wahl { margin: 0.6rem 0 0; }
  .lp--angebote .consent__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.6rem; }
  .lp--angebote .consent .btn { min-height: 44px; padding: 0.4rem 0.3rem; font-size: 0.8rem; line-height: 1.15; white-space: normal; text-align: center; }
}
@media (max-width: 700px) and (max-height: 600px) {
  .lp--angebote .consent { padding: 0.65rem 0.8rem 0.7rem; }
  .lp--angebote .consent h2 { font-size: 0.95rem; margin-bottom: 0.2rem; }
  .lp--angebote .consent p { font-size: 0.72rem; line-height: 1.36; }
  .lp--angebote .consent__actions { margin-top: 0.5rem; }
}

/* ---------- Text-Knopf (WhatsApp ruhig, grün) ---------- */
.p4-textcta {
  display: inline-flex; align-items: center; gap: 0.55em; min-height: 44px; padding: 0.2rem 0;
  color: var(--wa); font-weight: 600; font-size: 1.0625rem; line-height: 1.3;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: currentColor !important;
  transition: text-decoration-thickness 0.3s, text-underline-offset 0.3s, color 0.3s;
}
.p4-textcta .ico-wa { width: 1.15em; height: 1.15em; flex: none; }
.p4-textcta:hover { color: var(--wa-hover); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.p4-textcta--form { color: var(--fg); text-decoration-color: var(--c-accent) !important; }
.p4-cta-leise { margin-top: clamp(1.4rem, 3vh, 2.2rem); }
/* WhatsApp-Textknöpfe sind seit Abschluss-Fix 1 der System-Baustein .lpx-textcta, hier nur die Schriftgröße wie bisher */
.lp--angebote .lpx-textcta { font-size: 1.0625rem; line-height: 1.3; }
/* Handy: kein großes Loch unter den ruhigen Textknöpfen am Abschnittsende (Abschluss-Prüfung 1) */
@media (max-width: 700px) { .lp--angebote .p4-problem, .lp--angebote #fragen { padding-bottom: 1.25rem; } }

.p4-symbol { display: block; margin-top: 0.6rem; font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); opacity: 0.75; text-align: right; }

/* ---------- Hero ---------- */
.p4-hero { padding-top: 4.6rem; gap: 0.85rem; }
.p4-hero .eyebrow { max-width: 34rem; }
@media (max-width: 640px) {
  .p4-hero .hero__title { font-size: clamp(1.6rem, 7.05vw, 2.5rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: pretty; }
  .p4-hero .eyebrow { font-size: 0.7rem; letter-spacing: 0.12em; }
}
@media (max-width: 700px) {
  /* Dachzeile einzeilig, Knopf kompakt: der Hero-Knopf soll über dem Cookie-Banner stehen */
  .p4-eyebrow__rest { display: none; }
  .p4-hero .eyebrow { align-items: center; }
  .p4-hero .eyebrow .sigmark { margin-top: 0; }
  .p4-hero { padding-top: 4.3rem; gap: 0.75rem; }
  .p4-hero .lpx-hero__cta { margin-top: 0.15rem; }
  .p4-hero #heroWa { min-height: 56px; padding-block: 0.95rem; }
  .p4-hero__mikro { font-size: 0.82rem; margin-top: -0.3rem; }
  .p4-hero .lpx-hero__lead { font-size: 1.0625rem; }
  .p4-textcta--form { margin-top: -0.5rem; }
}
/* Kleine Handys (360 x 780, 375 x 667, 360 x 640): H1 etwas kleiner. Die Dachzeile bleibt mit dem Anzeigenwort
   „Angebote per Sprachnachricht“ (Prüfung 2), nur der Zusatz fällt weg (siehe oben). Die H1 ist wortgleich mit der Anzeige. */
@media (max-width: 700px) and (max-height: 800px) {
  .p4-hero { padding-top: 3.9rem; gap: 0.6rem; }
  .p4-hero .eyebrow { font-size: 0.66rem; }
  .p4-hero .hero__title { font-size: clamp(1.5rem, 6.7vw, 2.4rem); line-height: 1.01; }
}
/* Nur sehr kurze Fenster (320 x 568): Dachzeile weg, sonst rutscht der grüne Knopf unter das Cookie-Banner */
@media (max-width: 700px) and (max-height: 600px) { .p4-hero > .eyebrow { display: none; } }
/* Handy: Reihenfolge wie im DOM (Design-Plan 6). Die Bühne mit der Hero-Geschichte steht direkt unter Knopf und
   Mikrozeile, flach (390 px: rund 199 px hoch inklusive Schritt-Zeile, Design-Plan 6, Abschluss-Prüfung 2), damit Bühne und Schritt-Zeile noch über
   der Banner-Oberkante (y 532) liegen und ohne Banner Lead, Gesichter und der Formular-Link über dem Dock (y 765) enden. */
.p4-hero__stage { position: relative; display: grid; gap: 0.4rem; margin-top: 0.6rem; }
.p4-hero__buehne { min-height: clamp(240px, 70vw, 290px); }
.p4-hero__buehne .lpx-buehne__bild { width: min(62%, 300px); }
@media (max-width: 700px) {
  .p4-hero__stage { margin-top: 0; }
  .p4-hero__buehne { height: clamp(176px, 51vw, 204px); min-height: 0; }
  /* Schritt-Zeile liegt IN der Bühne unten (Design-Plan 6). Die Szene lässt dafür unten Platz (boxH am #hero mit
     Versatz nach oben), das Rückfall-Bild endet über der Zeile. Vermerk „Symbolbild“ rechts oben. */
  .p4-hero__stage .p4-schritte { position: absolute; left: 0; right: 0; bottom: 0.4rem; z-index: 1; }
  .p4-hero__buehne .lpx-buehne__bild { inset: 0 0 1.7rem; width: auto; height: 78%; max-height: none; }
  .p4-hero__buehne .lpx-buehne__vermerk { top: 0; bottom: auto; }
}
@media (max-width: 700px) and (max-height: 800px) { .p4-hero__buehne { height: clamp(170px, 46vw, 190px); } }
@media (max-width: 700px) and (max-height: 700px) { .p4-hero__buehne { height: clamp(160px, 44vw, 180px); } }
@media (max-width: 700px) and (max-height: 600px) { .p4-hero__buehne { height: 150px; } }

/* Begleitzeile der Hero-Geschichte (stimme.js setzt .is-aktiv) */
.p4-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem; font: 500 0.7rem/1.3 var(--font-mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-muted); }
.p4-schritte li { position: relative; padding-bottom: 0.45rem; opacity: 0.55; transition: opacity 0.4s var(--ease), color 0.4s var(--ease); }
.p4-schritte li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.p4-schritte li.is-aktiv { opacity: 1; color: var(--fg); }
.p4-schritte li.is-aktiv::after { transform: scaleX(1); transition: transform 2.4s linear; }
/* ohne WebGL am Desktop alle drei Schritte ruhig sichtbar (nebeneinander). Am Handy liegen sie übereinander, dort gilt der Block darunter. */
@media (min-width: 701px) { html.no-webgl .p4-schritte li { opacity: 1; } }
/* Handy: nur der aktive Schritt, einzeilig an derselben Stelle (Motion-Plan 4).
   Wechsel nacheinander (Prüfung 2): die alte Zeile blendet in 0,2 s ganz aus (danach visibility hidden),
   erst dann blendet die neue ein. So liegen nie zwei Texte lesbar übereinander. */
@media (max-width: 700px) {
  .p4-schritte { display: grid; justify-items: center; }
  .p4-schritte li { grid-area: 1 / 1; opacity: 0; visibility: hidden; white-space: nowrap; transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s, color 0.2s var(--ease); }
  .p4-schritte li.is-aktiv { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease) 0.22s, visibility 0s linear 0.22s, color 0.3s var(--ease) 0.22s; }
  /* ohne laufende Szene (kein WebGL, Laden): der Schritt, den das Rückfall-Bild zeigt */
  html:not(.szene-an) .p4-schritte li[data-schritt="2"] { opacity: 1; visibility: visible; color: var(--fg); }
  /* ohne WebGL: nie mehrere Schritte übereinander, nur Schritt 2 (passt zum Rückfall-Bild) */
  html.no-webgl .p4-schritte li { opacity: 0; visibility: hidden; }
  html.no-webgl .p4-schritte li[data-schritt="2"] { opacity: 1; visibility: visible; color: var(--fg); }
}
@media (prefers-reduced-motion: reduce) { .p4-schritte li, .p4-schritte li::after { transition: none !important; } }

@media (min-width: 901px) {
  /* Bühne über die rechte Hälfte (Spalten 7 bis 12), deutlich größer */
  .p4-hero { row-gap: 1.2rem; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .p4-hero .eyebrow { max-width: none; }
  .p4-hero .hero__title { font-size: clamp(3.2rem, 4.9vw, 6rem); line-height: 0.98; max-width: 24ch; }
  .lpx-hero > .p4-hero__stage { grid-column: 2; grid-row: 3 / span 8; align-self: stretch; display: flex; flex-direction: column; margin-top: 0; }
  .p4-hero__stage .p4-hero__buehne { flex: 1; min-height: clamp(420px, 47svh, 600px); }
  .p4-hero__buehne .lpx-buehne__bild { width: min(60%, 360px); }
  .p4-schritte { font-size: 0.72rem; }
}

/* ---------- Laufband aus Angebotszeilen ---------- */
.p4-band .marquee { padding: 1.1rem 0; }
.p4-band .marquee__track span { gap: 0.9rem; align-items: baseline; }
.p4-band .marquee__track span::after { align-self: center; margin-left: 1.6rem; }
.p4-band b { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--fg-muted); }
.p4-band i, .p4-band em { font-style: normal; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.p4-band i { color: var(--fg); }
.p4-band em { color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .p4-band .marquee__track { animation: none; flex-wrap: wrap; width: auto; padding-inline: var(--pad); gap: 0.6rem 2rem; } .p4-band .marquee__track span:nth-child(n+6) { display: none; } }

/* ---------- Das Blatt (gemeinsam für Problem und Lösung) ---------- */
.p4-doc {
  position: relative; display: block; width: 100%; max-width: 34rem; padding: 1.15rem 1.2rem 1rem; border-radius: 1.1rem;
  background: var(--p4-paper); color: var(--p4-ink); font-family: var(--font-body); text-align: left;
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.05);
}
.p4-doc__head { display: block; margin: 0 0 0.35rem; font: 500 0.72rem/1.2 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--p4-ink-2); }
.p4-doc__rows { display: block; }
.p4-doc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(5.4rem, max-content); column-gap: 0.7rem; align-items: baseline; padding: 0.68rem 0; border-top: 1px solid var(--p4-rule); font-weight: 700; font-size: 1rem; line-height: 1.25; color: var(--p4-ink); }
.p4-doc__name { min-width: 0; }
.p4-doc__qty, .p4-doc__price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p4-doc__price { justify-self: end; }
/* „Preis offen“ passt in die Preisspalte (Prüfung 1): etwas kleiner, schmaler Innenabstand */
.p4-doc__price mark.p4-mark { padding-inline: 0.3em; font-size: 0.86em; }
.p4-doc__hint { grid-column: 1 / -1; margin-top: 0.3rem; font: 500 0.72rem/1.3 var(--font-mono); letter-spacing: 0.05em; color: var(--p4-ink-2); }
.p4-doc__hint::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; border-radius: 50%; background: var(--markiert); vertical-align: 0.05em; }
mark.p4-mark { display: inline-block; padding: 0.08em 0.42em; border-radius: 0.35em; background: var(--markiert); color: var(--p4-ink); font: inherit; line-height: 1.25; }
.p4-doc__foot { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 0.4rem; padding-top: 0.85rem; border-top: 1px solid var(--p4-rule); }
.p4-doc__pdf { font: 500 0.74rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--p4-ink-2); }
.p4-doc__ok { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 42px; padding: 0.55rem 1.05rem; border-radius: 0.75rem; background: var(--c-dark); color: var(--c-accent); font-weight: 700; font-size: 1rem; }
.p4-doc__ok svg { width: 1.15em; height: 1.15em; }
@media (min-width: 701px) { .p4-doc { padding: 1.5rem 1.7rem 1.2rem; } .p4-doc__row { font-size: 1.05rem; } }
@media (max-width: 360px) { .p4-doc__row { grid-template-columns: minmax(0, 1fr) auto minmax(4.8rem, max-content); column-gap: 0.55rem; font-size: 0.95rem; } }

/* ---------- Problem: Uhr, leeres Blatt, Tage ---------- */
.p4-clock { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8rem; }
.p4-clock__time { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 4.75rem; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--fg); }
.p4-clock__item--frueh .p4-clock__time { color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); }
.p4-clock__lab { display: block; margin-top: 0.6rem; font: 500 0.8rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.p4-clock__item--frueh { position: relative; padding-bottom: 1.8rem; }
.p4-clock__item--frueh::after { content: ""; position: absolute; left: 0.2rem; bottom: -0.9rem; width: 1px; height: 2.4rem; background: linear-gradient(var(--line-strong), transparent); }
.p4-doc--leer { margin-top: 1.2rem; max-width: 22rem; padding-bottom: 1.3rem; }
.p4-leer__zeile { display: flex; align-items: center; height: 1.6rem; margin: 0.6rem 0 0.9rem; border-bottom: 1px solid var(--p4-rule); }
.p4-cursor { display: inline-block; width: 2px; height: 1.15em; background: var(--p4-cursor); }
@media (prefers-reduced-motion: no-preference) { .p4-cursor { animation: p4-blink 1.1s steps(1) infinite; } }
@keyframes p4-blink { 50% { opacity: 0; } }
.p4-leer__linie { display: block; width: 72%; height: 0.55rem; margin-top: 0.6rem; border-radius: 0.3rem; background: var(--p4-rule); }
.p4-leer__linie--kurz { width: 44%; }

.p4-uhr { display: grid; gap: 0.2rem; justify-items: center; }
@media (max-width: 900px) { .p4-uhr { display: none; } }   /* die große Mono-Uhr trägt die Aussage, Szene hier aus (data-szene-op-h="0") */
.p4-uhr__buehne { width: 100%; height: 240px; min-height: 0; }
.p4-uhr__buehne .lpx-buehne__bild { width: auto; height: 86%; }
.p4-uhr__anzeige { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--fg); }
@media (min-width: 901px) {
  .p4-clock { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
  .p4-clock__time { font-size: clamp(4.4rem, 6.2vw, 7rem); }
  .p4-clock__item--frueh { padding-bottom: 0; }
  .p4-clock__item--frueh::after { left: auto; right: -0.2rem; top: 2.4rem; bottom: auto; width: clamp(0.8rem, 1.6vw, 2rem); height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
  .p4-uhr__buehne { height: auto; aspect-ratio: 1; max-height: 64svh; }
  .p4-uhr__anzeige { font-size: clamp(2.6rem, 3.4vw, 3.6rem); }
  /* Nur eine Uhrzeit auf einmal (Prüfung 2): solange die Uhr rechts läuft, steht links noch keine feste „23:30“.
     Sie blendet ein, sobald die laufende Anzeige bei 23:30 ankommt (seite.js setzt .p4-uhr-laeuft und .is-spaet).
     Ohne JS, bei reduzierter Bewegung und am Handy (dort gibt es keine laufende Anzeige) steht sie immer. */
  .p4-abend.p4-uhr-laeuft .p4-clock__item--spaet .p4-clock__time { opacity: 0; transform: translateY(0.12em); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
  .p4-abend.p4-uhr-laeuft.is-spaet .p4-clock__item--spaet .p4-clock__time { opacity: 1; transform: none; }
}

.p4-verlust { margin-top: clamp(3rem, 7vh, 4.5rem); padding-top: clamp(1.6rem, 3.5vh, 2.4rem); border-top: 1px solid var(--line); row-gap: 1.6rem; align-items: center; }
.p4-verlust__title { margin: 0; max-width: 20ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 6.4vw, 2rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--accent-ink); text-wrap: balance; }
.p4-verlust__satz { margin: 1rem 0 0; max-width: 32rem; color: var(--fg-muted); font-size: 1.0625rem; }
.p4-tage { display: grid; gap: 1rem; justify-items: start; }
.p4-days { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.5rem; }
.p4-days li { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 4.4rem; min-height: 38px; padding: 0.3rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 999px; font: 500 0.8rem/1 var(--font-mono); letter-spacing: 0.06em; color: var(--fg-muted); white-space: nowrap; }
.p4-days li:last-child { border-color: var(--c-accent); color: var(--fg); }
.p4-msg { position: relative; margin: 0; padding: 0.8rem 1.15rem; max-width: 18rem; border: 1px solid var(--line); border-radius: 1.2rem 1.2rem 1.2rem 0.3rem; background: var(--c-panel); color: var(--fg); font-size: 1.125rem; line-height: 1.35; }
.p4-tage .p4-symbol { justify-self: start; margin-top: -0.2rem; }
@media (min-width: 901px) {
  .p4-verlust__text { grid-column: 1 / span 6; }
  .p4-tage { grid-column: 8 / span 5; }
  .p4-verlust__title { font-size: clamp(2rem, 3.4vw, 3.2rem); }
}
@media (max-width: 380px) { .p4-days { gap: 0.35rem; } .p4-days li { min-width: 0; flex: 1; padding-inline: 0.4rem; font-size: 0.74rem; } }
/* Tage laufen ab (einmal, beim Sichtbarwerden) */
html.lpx-anim .p4-tage:not(.is-spiel) .p4-msg { opacity: 0; transform: translateY(12px); }
/* Takt 0,25 s je Tag, die Nachricht steht nach rund 1 s (Prüfung 1: bei schnellem Scrollen nicht verpassen) */
.p4-tage.is-spiel .p4-days li { animation: p4-tag 0.3s var(--ease) both; animation-delay: calc(var(--i) * 0.25s); }
.p4-tage.is-spiel .p4-days li:last-child { animation: p4-tag 0.3s var(--ease) 0.75s both, p4-tag-weg 0.35s var(--ease) 1.25s forwards; }
.p4-tage.is-spiel .p4-msg { animation: p4-rein 0.4s var(--ease) 0.95s both; }
@keyframes p4-tag { from { background: transparent; color: var(--fg-muted); } to { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); } }
@keyframes p4-tag-weg { to { background: transparent; border-color: var(--line-strong); color: var(--fg-muted); } }
@keyframes p4-rein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Lösung: drei Schritte, jedes mit eigenem Bild ---------- */
.p4-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.p4-step { padding: 1.5rem 0 2.2rem; border-top: 1px solid var(--line); }
.p4-step__num { display: block; font: 500 0.8rem/1 var(--font-mono); letter-spacing: 0.16em; color: var(--accent-ink); }
.p4-step__title { margin: 0.7rem 0 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--fg); text-wrap: balance; }
.p4-step__text { margin: 0; max-width: 34rem; color: var(--fg-muted); font-size: 1.0625rem; }
.p4-step__bild { display: block; margin-top: 1.3rem; max-width: 34rem; }
.p4-step.is-aktiv .p4-step__num { color: var(--fg); }
@media (min-width: 701px) { .p4-step__title { font-size: 1.5rem; } }
@media (min-width: 901px) {
  .p4-step { min-height: 68vh; padding: 2rem 0 3rem; }
  .p4-step__title { font-size: 1.6rem; }
  .p4-loesung__buehne { top: 16vh; height: 68vh; }
  .p4-loesung__buehne .lpx-buehne__bild { width: min(64%, 340px); }
  /* Vermerk „Symbolbild“ nur, solange die Szene in dieser Bühne zeichnet (Prüfung 2). seite.js setzt .p4-szene-hier.
     Ohne WebGL bleibt das Rückfall-Bild stehen und der Vermerk mit ihm. */
  .p4-loesung__buehne .lpx-buehne__vermerk { transition: opacity 0.5s var(--ease); }
  html.szene-an .p4-loesung__buehne:not(.p4-szene-hier) .lpx-buehne__vermerk { opacity: 0; }
  /* Abschluss-Prüfung 1: am Ende des Abschnitts schiebt die klebende Bühne nach oben weg, ihr Vermerk stand dann allein
     über leerer Fläche. Er steht nur, solange die Bühne mindestens zur Hälfte im Bild ist (.is-sicht setzt die Engine). */
  html.szene-an .p4-loesung__buehne:not(.is-sicht) .lpx-buehne__vermerk { opacity: 0; }
}

/* Video aus der Werbung (Design-Plan 6.4): Poster klein neben dem Text, beim Abspielen groß */
.p4-video { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 1rem 1.2rem; max-width: 40rem; margin-top: clamp(2rem, 5vh, 3rem); padding-top: 1.4rem; border-top: 1px solid var(--line); }
.p4-video .lpx-video--hoch { width: 100%; max-width: none; border-color: var(--line); border-radius: 0.9rem; }
.p4-video .lpx-video__start::before { width: 44px; background: transparent; border: 2px solid var(--c-accent); box-shadow: none; }
.p4-video .lpx-video__start::after { width: 0.85rem; background: var(--c-accent); transform: translate(-38%, -50%); }
.p4-video .lpx-video__start span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.p4-video__titel { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.25; color: var(--fg); }
.p4-video__meta { margin: 0.4rem 0 0; font: 500 0.72rem/1.5 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.p4-video.is-offen { grid-template-columns: minmax(0, 1fr); justify-items: start; }
.p4-video.is-offen .lpx-video--hoch { width: min(100%, 320px); }
@media (min-width: 901px) { .p4-video { grid-template-columns: 9.4rem minmax(0, 1fr); } }
/* Desktop: grüner Knopf und Video-Zeile nebeneinander statt der Video-Zeile allein auf leerer Breite (Abschluss-Prüfung 2) */
@media (min-width: 901px) {
  .p4-loesung__ende { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-top: clamp(1.8rem, 4vh, 2.8rem); }
  .p4-loesung__ende > .lpx-cta { margin-top: 0; }
  .p4-loesung__ende > .p4-video { margin-top: 0; max-width: none; padding: 0 0 0 clamp(1.5rem, 3vw, 2.5rem); border-top: 0; border-left: 1px solid var(--line); }
}

/* Sprachnachricht aus Lichtpunkt-Säulen */
.p4-voice { display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 22rem; height: 64px; padding: 0 1rem 0 0.7rem; border: 1px solid var(--line); border-radius: 1.4rem 1.4rem 1.4rem 0.4rem; background: var(--c-panel); }
.p4-voice__play { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c-accent); }
.p4-voice__play::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 12px; transform: translate(-38%, -50%); background: var(--c-on-accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.p4-voice__wave { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 2px; height: 40px; min-width: 0; }
.p4-voice__wave i { display: block; flex: 0 0 4px; height: var(--h); color: var(--c-accent); background: radial-gradient(circle at 50% 50%, currentColor 1.35px, transparent 1.75px) 50% 50% / 4px 5px repeat-y; }
.p4-voice__wave i:nth-child(-n+11) { color: #fff; }
.p4-voice__time { flex: none; font: 500 0.8rem/1 var(--font-mono); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .p4-voice__wave i:nth-child(n+23) { display: none; } }
.p4-said { display: block; margin-top: 1rem; padding: 0.15rem 0 0.15rem 1rem; border-left: 2px solid var(--c-accent); font: 400 0.92rem/1.6 var(--font-mono); color: var(--fg-muted); }
html.lpx-anim .p4-bild-1:not(.is-spiel) .p4-voice__wave i { color: var(--c-accent); }
html.lpx-anim .p4-bild-1:not(.is-spiel) .p4-said { opacity: 0; transform: translateY(10px); }
.p4-bild-1.is-spiel .p4-voice__wave i { animation: p4-gespielt 0.2s linear both; animation-delay: calc(0.3s + var(--i) * 0.085s); }
.p4-bild-1.is-spiel .p4-said { animation: p4-rein 0.6s var(--ease) 0.9s both; }
@keyframes p4-gespielt { from { color: var(--c-accent); } to { color: #fff; } }

/* Entwurf baut sich auf, Markierungen wischen ein */
html.lpx-anim .p4-bild-2:not(.is-spiel) .p4-doc__row { opacity: 0; transform: translateY(10px); }
html.lpx-anim .p4-bild-2:not(.is-spiel) mark.p4-mark { background-size: 0% 100%; }
.p4-bild-2 mark.p4-mark { background: linear-gradient(var(--markiert), var(--markiert)) 0 0 / 100% 100% no-repeat; }
.p4-bild-2.is-spiel .p4-doc__row { animation: p4-rein 0.5s var(--ease) both; animation-delay: calc(var(--i) * 0.09s); }
.p4-bild-2.is-spiel mark.p4-mark { animation: p4-wisch 0.45s cubic-bezier(0.3, 0.7, 0.2, 1) both; animation-delay: 0.75s; }
.p4-bild-2.is-spiel .is-offen + .is-offen mark.p4-mark { animation-delay: 0.95s; }
@keyframes p4-wisch { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* Du trägst selbst ein, gibst frei, PDF fertig */
.p4-tausch { display: inline-grid; justify-items: end; }
.p4-tausch > * { grid-area: 1 / 1; }
.p4-tausch__alt { visibility: hidden; }
.p4-tausch__neu { box-shadow: inset 0 -2px 0 var(--markiert); }
html.lpx-anim .p4-bild-3:not(.is-spiel) .p4-tausch__alt { visibility: visible; }
html.lpx-anim .p4-bild-3:not(.is-spiel) .p4-tausch__neu { opacity: 0; }
html.lpx-anim .p4-bild-3:not(.is-spiel) .p4-doc__pdf { opacity: 0; }
.p4-bild-3.is-spiel .p4-tausch__alt { visibility: visible; animation: p4-raus 0.25s var(--ease) 0.9s both; }
.p4-bild-3.is-spiel .p4-tausch__neu { animation: p4-rein-k 0.3s var(--ease) 1.1s both; }
.p4-bild-3.is-spiel .p4-tausch--2 .p4-tausch__alt { animation-delay: 1.5s; }
.p4-bild-3.is-spiel .p4-tausch--2 .p4-tausch__neu { animation-delay: 1.7s; }
.p4-bild-3.is-spiel .p4-doc__ok { animation: p4-druck 0.45s var(--ease) 2.3s both; }
.p4-bild-3.is-spiel .p4-doc__ok path { stroke-dasharray: 24; animation: p4-haken 0.45s var(--ease) 2.45s both; }
.p4-bild-3.is-spiel .p4-doc__pdf { animation: p4-rein-k 0.4s var(--ease) 2.8s both; }
@keyframes p4-raus { to { opacity: 0; transform: translateY(-6px); } }
@keyframes p4-rein-k { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes p4-druck { 0% { transform: scale(1); } 30% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes p4-haken { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* ---------- Kontrolle: „du.“ mit Ring ---------- */
.p4-du { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 11vw, 3.4rem); line-height: 0.98; letter-spacing: -0.035em; color: var(--fg); text-wrap: balance; }
.p4-du__wort { position: relative; display: inline-block; color: var(--accent-ink); padding: 0 0.12em; }
.p4-du__ring { position: absolute; left: 50%; top: 50%; width: 2.05em; height: 0.92em; transform: translate(-50%, -46%); overflow: visible; pointer-events: none; }
.p4-du__ring ellipse { fill: none; stroke: var(--c-ring2); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0.01 6.5; opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) { .p4-du__ring ellipse { animation: mark-fluss 9s linear infinite; } }
.p4-punkte { margin-top: clamp(1.8rem, 4vh, 2.6rem); gap: 1.3rem; }
.p4-punkte li { padding-left: 2.4rem; }
.p4-punkte b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.015em; color: var(--fg); }
.p4-punkte li small { font-size: 1.0625rem; line-height: 1.5; margin-top: 0.3rem; }
.p4-kontrolle__buehne { max-height: 70svh; }
@media (max-width: 900px) { .p4-kontrolle__buehne { aspect-ratio: auto; height: 230px; } .p4-kontrolle .lpx-inhalt { margin-top: 1rem; } }
@media (min-width: 901px) {
  .p4-du { font-size: clamp(3.6rem, 6.6vw, 7rem); }
  .p4-punkte b { font-size: 1.4rem; }
  .p4-kontrolle .lpx-split { align-items: center; }
  .p4-kontrolle .p4-punkte { margin-top: 0; }
}

/* ---------- Ablauf ---------- */
.p4-wer { display: inline-flex; align-items: center; min-height: 24px; margin-bottom: 0.55rem; padding: 0.15rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.p4-ablauf .lpx-schritt .lpx-textcta { margin-top: 0.4rem; }
/* Schritt 01 ist gefüllt: Nummer bleibt dunkel, auch wenn lpx.js .is-an setzt (siehe system-wuensche.md) */
.p4-ablauf .lpx-schritt--eins .lpx-schritt__num, .p4-ablauf .lpx-schritt--eins.is-an .lpx-schritt__num { color: var(--on-accent, var(--c-dark)); }
.p4-aufwand { margin: clamp(1.8rem, 4vh, 2.6rem) 0 0; padding-top: 1.1rem; max-width: 46rem; border-top: 1px solid var(--line); font: 400 0.9rem/1.6 var(--font-mono); color: var(--fg-muted); }

/* ---------- Referenzen ---------- */
.p4-ref { display: block; padding: 0; border: 0; }
.p4-ref .lpx-ref__marke { margin-top: 0.35rem; }
.p4-ref .lpx-ref__art { margin: 0.9rem 0 0; }
.p4-ref .lpx-ref__text { margin-top: 0.6rem; font-size: 1.0625rem; }
.p4-ref .lpx-ref__link { margin-top: 0.4rem; }
.p4-ref .lpx-ref__beleg { margin-top: 0.1rem; line-height: 1.5; }
/* Außen-Symbol statt Pfeil-Zeichen */
.lp--angebote .lpx-ref__link::after { content: ""; width: 0.8em; height: 0.8em; background: var(--accent-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2h8v8M14 2 5 11M3 5v8h8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2h8v8M14 2 5 11M3 5v8h8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* interner Link (dpw-digital.at, href="/") ohne Außen-Symbol (SYSTEM 0: kein Pfeil an internen Links) */
.lp--angebote .lpx-ref__link[href^="/"]::after, .lp--angebote .lpx-ref__link[href^="#"]::after { content: none; }
.p4-ref__shot { position: relative; margin: 0; overflow: hidden; aspect-ratio: 390 / 640; border: 1px solid var(--line-strong); border-radius: 1.1rem; background: var(--card); }
.p4-ref__shot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 6px; background: var(--c-panel); }
.p4-ref__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.p4-ref--gross { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding-bottom: clamp(2rem, 5vh, 3rem); border-bottom: 1px solid var(--line); }
.p4-ref--gross .p4-ref__shot { width: min(74%, 300px); }
.p4-ref--gross .lpx-ref__marke { font-size: clamp(2rem, 8vw, 2.6rem); }
.p4-refs { display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: 0.9rem; margin: clamp(2rem, 5vh, 3rem) calc(-1 * var(--pad)) 0; padding: 0 var(--pad) 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; scrollbar-width: none; }
.p4-refs::-webkit-scrollbar { display: none; }
.p4-refs > .p4-ref { scroll-snap-align: start; min-width: 0; }
.p4-ref-eigen { margin-top: clamp(2rem, 5vh, 3rem); padding-top: 1.2rem; border-top: 1px solid var(--line); display: grid; gap: 0.9rem; }
.p4-ref-eigen p { margin: 0; max-width: 46rem; color: var(--fg-muted); }
.p4-ref-eigen b { color: var(--fg); font-family: var(--font-display); font-weight: 800; margin-right: 0.35rem; }
.p4-ref-eigen .lpx-ref__link { min-height: 44px; margin-left: 0.2rem; }
.p4-start { font: 400 0.9rem/1.6 var(--font-mono); }
@media (min-width: 901px) {
  .p4-ref--gross { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .p4-ref--gross .p4-ref__shot { width: min(100%, 300px); justify-self: end; }
  .p4-ref--gross .lpx-ref__marke { font-size: clamp(2.6rem, 4vw, 4rem); }
  .p4-refs { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: clamp(1.5rem, 3vw, 3rem); margin-inline: 0; padding: 0; overflow: visible; }
  .p4-refs .p4-ref__shot { max-height: 520px; }
  .p4-ref-eigen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
}
@media (hover: hover) and (pointer: fine) {
  .p4-ref__shot img { transition: transform 1.2s var(--ease); }
  .p4-ref:hover .p4-ref__shot img { transform: scale(1.03); }
}

/* ---------- Team ---------- */
.p4-team__satz { margin: 1.8rem 0 0; max-width: 40rem; font-size: 1.125rem; color: var(--fg); }

/* ---------- Zusammenarbeit ---------- */
.p4-zusammen__text { margin-top: 1.6rem; }
.p4-zusammen__text p { font-size: 1.0625rem; }
@media (min-width: 901px) { .p4-zusammen .lpx-split { align-items: center; } .p4-zusammen__buehne { max-height: 62svh; } }

/* ---------- Datenschutz ---------- */
.p4-daten__liste p { color: var(--fg); }
.p4-daten__link { margin: 1.2rem 0 0; color: var(--fg-muted); }
@media (min-width: 901px) { .p4-daten__buehne { min-height: 300px; align-self: center !important; } }
/* Szenenstufe „statisch“ (schwache Geräte, zweite Wächter-Stufe): dort zeichnet die Szene die Welle nicht zu Ende,
   die Bühne bliebe leer (Prüfung 2). Dann bleibt das Rückfall-Bild der Welle stehen. */
html[data-szene="statisch"] .p4-daten__buehne .lpx-buehne__bild { opacity: 0.85; }

/* ---------- Für wen: Gewerk wählen ---------- */
.p4-gewerk { background: color-mix(in srgb, var(--c-dark) 94%, var(--c-accent)); }
.p4-gewerk .chapter__head { border-top-color: transparent; }
.p4-gewerk__wahl { display: grid; gap: 0.7rem; margin-bottom: 0.6rem; }
.p4-gewerk__wahl .btn { width: 100%; min-height: 56px; }
@media (min-width: 701px) { .p4-gewerk__wahl { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; } .p4-gewerk__wahl .btn { width: auto; min-width: 15rem; } }

/* ---------- FAQ, Schluss, Panel ---------- */
@media (min-width: 901px) { .p4-faq { max-width: 75%; } }
/* Ab 1101 px gibt lpx.css der FAQ rechts 17rem Platz für das Dock. Die Haarlinie oben lief dadurch weiter als die
   Trennlinien der Fragen (Abschluss-Prüfung 1). Hier stattdessen schmaler, alle Linien gleich lang, Dock bleibt frei. */
@media (min-width: 1101px) { .p4-faq { padding-right: 0; max-width: min(75%, calc(100% - 20rem)); } }
/* Handy und Tablet: die Schluss-Bühne füllt die Szene erst im Zustand „kontakt“ (Abschnitt kreuzt die Bildmitte).
   Bis dahin steht das ruhige Orbit-Zeichen da statt einer leeren Fläche (seite.js setzt .p4-szene-hier). */
@media (max-width: 900px) {
  html.szene-an .lpx-schluss__buehne.is-live:not(.p4-szene-hier) .lpx-buehne__bild { opacity: 0.8; }
}
.p4-meta { font-size: 0.8rem; }
.p4-meta a, .p4-sheet__meta a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.p4-sheet__meta { margin: 0.6rem 0 0; font-size: 0.8rem; }
.lp--angebote .chips-field { margin: 0.2rem 0 0.4rem; }
.lp--angebote textarea::placeholder { color: var(--fg-muted); opacity: 0.8; }
/* „Cookie-Einstellungen“ im Fuß (Knopf aus js/tracking.js): Tippfläche mindestens 44 px (Prüfung 2, Systemwunsch eingetragen) */
.lp--angebote .footer__links .footer__consent { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .p4-tage .p4-days li, .p4-bild-1 *, .p4-bild-2 *, .p4-bild-3 * { animation: none !important; }
}

/* Team am Handy: Rollen bei beiden Personen untereinander (vorher Manuel untereinander, Julian nebeneinander) */
@media (max-width: 640px) { .lp--angebote .lpx-person .person__role { flex-direction: column; flex-wrap: nowrap; gap: 0.05rem; } }