/* ==========================================================================
   /website-modernisieren/ (LP-MOD) · nur diese Seite. Lädt nach css/lpx.css. Mobile first (390 px), dann 561 / 701 / 901 px.
   Bausteine: Adressleiste (.mod-bar), antippbare Warnsignale, Video mit Sprungmarken, Vorher/Jetzt, Referenzen mit Screens.
   ========================================================================== */

/* Falle: .lpx button setzt den Grund auf transparent, das gilt auch für Knöpfe mit Akzentfläche */
.lp--website-modernisieren button.btn--primary { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) { .lp--website-modernisieren button.btn--primary:hover { background: var(--fg); color: var(--bg); } }

/* ---------- Hero ---------- */
.mod-hero { padding-top: 4.1rem; gap: 0.8rem; }
.mod-hero .eyebrow { font-size: 0.7rem; letter-spacing: 0.12em; }
.mod-hero .hero__title { font-size: clamp(1.8rem, 8.3vw, 2.4rem); line-height: 1; letter-spacing: -0.035em; }
/* Unterzeile (Satz 2 und 3 der Anzeige: gezielt erneuern, Google) direkt unter der H1, also im ersten Bildschirm.
   Sie fährt nicht ein (kein data-hero), damit sie am Handy sofort steht wie die H1. */
.mod-hero .lpx-hero__lead { max-width: 34rem; }
.mod-hero__mikro { margin-top: -0.3rem; font-size: 0.88rem; }
.mod-hero__check { margin: -0.3rem 0 0; }
.mod-hero__check .mod-textlink { padding: 0.5rem 0; }
.mod-hero__vertrauen .lpx-gesichter img { width: 40px; height: 40px; }
@media (min-width: 641px) { .mod-hero .hero__title { font-size: clamp(2.4rem, 5vw, 5.6rem); } }
@media (min-width: 901px) {
  .mod-hero { row-gap: 1.25rem; }
  .mod-hero > .lpx-hero__buehne { grid-row: 3 / span 6; }
  .mod-hero .hero__title { font-size: clamp(2.8rem, 4.45vw, 5.2rem); line-height: 0.98; }
  .mod-hero__mikro { margin-top: -0.4rem; }
}
@media (min-width: 1240px) { .mod-hero .hero__title .line__inner { white-space: nowrap; } }
@media (max-width: 900px) {
  .mod-hero > .lpx-hero__buehne { min-height: 0; height: clamp(170px, 48vw, 210px); margin: -0.2rem 0 -0.1rem; }
  .mod-hero > .lpx-hero__buehne .lpx-buehne__bild { width: auto; height: 100%; max-height: 100%; }
}
/* Kleine Handys: der grüne Knopf bleibt über dem Cookie-Banner (gemessen: 390x844 ab y 523, 390x664 ab 421,
   375x667 ab 423, 360x640 ab 377, 320x568 ab 326). Dachzeile bis 400 px einzeilig, kürzere Fenster dichter.
   Unter 660 px Höhe (360x640, 320x568) rückt die Unterzeile optisch unter den Knopf; im DOM bleibt sie direkt nach der H1. */
@media (max-width: 400px) { .mod-hero .eyebrow { font-size: 0.64rem; letter-spacing: 0.08em; } }
@media (max-width: 700px) and (max-height: 700px) { .lpx .mod-hero { gap: 0.7rem; } }
@media (max-width: 700px) and (max-height: 660px) {
  .mod-hero > .lpx-hero__lead { order: 1; }
  .mod-hero > .mod-hero__vertrauen, .mod-hero > .mod-hero__check, .mod-hero > .lpx-hero__buehne { order: 2; }
}
@media (max-width: 359px), (max-width: 700px) and (max-height: 600px) {
  .mod-hero .mod-bar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Adressleiste: sieht aus wie die Adresszeile im Browser, Knopf ist ein echter WhatsApp-Link ---------- */
.mod-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; width: 100%; min-width: 0; max-width: 38rem; margin: 0; }
/* Beschriftung in Archivo (im Hero steht nur eine Mono-Zeile: die Dachzeile) */
.mod-bar__label { font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--fg-muted); }
.mod-bar__label span { opacity: 0.75; }
.mod-bar__zeile {
  display: flex; align-items: center; gap: 0.45rem; min-width: 0; height: 54px; padding: 0 4px 0 0.8rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--c-panel);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.mod-bar__zeile:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.mod-bar__zeichen { display: inline-flex; flex: none; }
.mod-bar__zeichen .sigmark { width: 1.15rem; height: 1.15rem; vertical-align: 0; }
.mod-bar__input {
  flex: 1 1 0; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  color: var(--fg); font: 500 16px/1.2 var(--font-body); letter-spacing: 0;
}
.mod-bar__input::placeholder { color: var(--fg-muted); opacity: 0.85; }
.mod-bar__go { flex: none; height: 46px; min-height: 46px; padding: 0 0.95rem; border-radius: 999px; font-size: 0.95rem; white-space: nowrap; }
.mod-bar__go .ico-wa { width: 1.15em; height: 1.15em; margin-right: 0.45em; }
.mod-bar__lang { display: none; }
.mod-bar__fehler { margin: 0; min-height: 0; font-size: 0.85rem; line-height: 1.35; color: #ff9a8e; }
.mod-bar__fehler:empty { display: none; }
.mod-bar__go:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
@media (min-width: 561px) { .mod-bar__kurz { display: none; } .mod-bar__lang { display: inline; } }
@media (min-width: 901px) { .mod-bar__zeile { height: 66px; padding-left: 1.1rem; } .mod-bar__go { height: 54px; padding: 0 1.4rem; font-size: 1.02rem; } .mod-bar__input { font-size: 1.1rem; } }
/* Ohne JavaScript wandert nichts in die Nachricht: dann nur der Knopf */
html:not(.js) .mod-bar__input, html:not(.js) .mod-bar__label { display: none; }
html:not(.js) .mod-bar__zeile { justify-content: flex-end; }
.mod-bar--gross { max-width: 40rem; margin: 0 auto 1.2rem; }
.mod-bar--gross .mod-bar__label { text-align: left; }
@media (min-width: 901px) { .mod-bar--gross .mod-bar__zeile { height: 74px; } .mod-bar--gross .mod-bar__go { height: 62px; } }

/* Textlinks: ruhig, unterstrichen, WhatsApp-Variante in Grün mit Symbol */
.mod-textlink { display: inline-block; padding: 0.6rem 0; line-height: 1.45; color: var(--fg); font-size: 0.98rem; text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 0.28em; transition: color 0.3s var(--ease); }
.mod-textlink:hover { color: var(--accent-ink); }
.mod-textlink--wa { color: var(--fg); text-decoration-color: var(--wa); }
.mod-textlink--wa .ico-wa { display: inline-block; width: 1.1em; height: 1.1em; margin: 0 0.45em 0 0; vertical-align: -0.18em; color: var(--wa); }
.mod-textlink--wa:hover { color: var(--wa); }
.mod-pfeil-link { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; color: var(--fg); font-weight: 500; text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 0.25em; }
.mod-pfeil-link::after { content: ""; width: 0.6em; height: 0.6em; border-top: 1.5px solid var(--accent-ink); border-right: 1.5px solid var(--accent-ink); transform: rotate(45deg); transition: transform 0.3s var(--ease); }
.mod-pfeil-link:hover::after { transform: translateX(3px) rotate(45deg); }

/* Bühnen dieser Seite (Höhen am Handy, Lage am Desktop) */
.mod-buehne { min-height: 0; height: 250px; }
.mod-buehne .lpx-buehne__bild { width: min(86%, 400px); }
.mod-buehne--scan { height: 210px; }
.mod-buehne--guss { aspect-ratio: auto; height: 180px; }
/* Handy: die Bühnen in #mehr und #was-bleibt etwas niedriger (Seitenlänge) */
@media (max-width: 900px) { .mod-buehne--mehr, .mod-buehne--umbau { height: 200px; } }
@media (min-width: 901px) {
  .mod-buehne { height: auto; }
  .mod-buehne--umbau { top: 16vh; height: 64vh; }
  .mod-buehne--netz, .mod-buehne--form { min-height: 440px; }
  .mod-buehne--guss { aspect-ratio: 1; height: auto; }
}

/* ---------- Video: am Handy hochkant wie im Reel, am Desktop mit Sprungmarken ---------- */
.mod-video .mod-video__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1.1rem; margin-bottom: 1.2rem; border-top: 1px solid var(--line); }
.mod-video__marke { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); text-align: right; }
.mod-video__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.mod-video__box { max-width: none; aspect-ratio: 4 / 5; }
.mod-video__box video { object-position: 50% 30%; }
.mod-video__schild { position: absolute; right: 0.8rem; top: 0.8rem; z-index: 3; padding: 0.4rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--c-panel) 88%, transparent); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); pointer-events: none; transition: opacity 0.4s var(--ease); }
.mod-video__box.is-cta .mod-video__schild { opacity: 0; }
/* Knopf unter dem Video: Kontur (das Dock-WhatsApp darunter ist schon grün), ab dem Hinweis im Video voll grün */
.mod-video__knopf.is-zeigen { background: var(--wa); color: var(--wa-ink); border-color: var(--wa); }
.mod-video__knopf.is-zeigen .ico-wa { color: var(--wa-ink); }
.mod-marken { display: none; }
.mod-video__cta { margin-top: 1.2rem; }
@media (min-width: 901px) {
  .mod-video__raster { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(1.6rem, 3vw, 3rem); align-items: center; }
  .mod-video__box { aspect-ratio: 16 / 9; }
  .mod-marken { display: grid; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .mod-marken li { border-bottom: 1px solid var(--line); }
  .mod-marke { display: grid; gap: 0.4rem; width: 100%; padding: 1.1rem 0; border: 0; text-align: left; color: var(--fg-muted); font: 400 1.02rem/1.45 var(--font-body); cursor: pointer; transition: color 0.3s var(--ease); }
  .mod-marke__zeit { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent-ink); }
  .mod-marke:hover, .mod-marke.is-jetzt { color: var(--fg); }
  .mod-marke.is-jetzt .mod-marke__zeit::after { content: " · läuft"; color: var(--fg-muted); }
  .mod-marke:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 0.3rem; }
}

/* ---------- Warnsignale: antippbar, wandern in die WhatsApp-Nachricht ---------- */
.mod-signale__feld { position: relative; }
.mod-signale__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line-strong); }
.mod-signale__liste li { border-bottom: 1px solid var(--line-strong); }
.mod-signal {
  display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) 2rem; align-items: center; gap: 0.7rem; width: 100%; min-height: 64px; padding: 0.85rem 0;
  border: 0; text-align: left; cursor: pointer; color: var(--fg-muted); font: 600 1.08rem/1.3 var(--font-display); letter-spacing: -0.01em;
  transition: color 0.3s var(--ease);
}
.mod-signal__num { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em; color: var(--accent-ink); }
.mod-signal__t { color: var(--fg); }
.mod-signal__haken { position: relative; justify-self: end; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease); }
.mod-signal__haken::after { content: ""; position: absolute; left: 50%; top: 46%; width: 0.62rem; height: 0.32rem; border-left: 2px solid var(--c-on-accent); border-bottom: 2px solid var(--c-on-accent); transform: translate(-50%, -50%) rotate(-45deg) scale(0); transition: transform 0.35s var(--ease); }
.mod-signal[aria-pressed="true"] .mod-signal__haken { background: var(--c-accent); border-color: var(--c-accent); transform: scale(1.06); }
.mod-signal[aria-pressed="true"] .mod-signal__haken::after { transform: translate(-50%, -50%) rotate(-45deg) scale(1); }
.mod-signal[aria-pressed="true"] { background: linear-gradient(90deg, var(--accent-soft), transparent 75%); }
.mod-signal:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; border-radius: 0.4rem; }
@media (hover: hover) and (pointer: fine) { .mod-signal:hover .mod-signal__haken { border-color: var(--c-accent); } .mod-signal:hover .mod-signal__t { color: var(--accent-ink); } }
/* Prüf-Linie: fährt einmal über die Liste, wenn sie ins Bild kommt (data-spiel, js/lpx.js) */
.mod-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.mod-scan::before { content: ""; position: absolute; left: -2%; right: -2%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c-ring2) 20%, var(--c-ring2) 80%, transparent); box-shadow: 0 0 16px 1px var(--c-ring2); }
.mod-signale__feld.is-spiel .mod-scan { animation: mod-scan 2.4s cubic-bezier(0.65, 0, 0.35, 1) 1 both; }
.mod-signale__feld.is-spiel .mod-signal__num { animation: mod-num 0.9s ease-out 1 both; animation-delay: calc(var(--i) * 0.27s + 0.15s); }
@keyframes mod-scan { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(100%); } }
@keyframes mod-num { 0% { color: var(--accent-ink); text-shadow: none; } 35% { color: #fff; text-shadow: 0 0 10px var(--c-ring2); } 100% { color: var(--accent-ink); text-shadow: none; } }
.mod-signale__satz { margin: 1.3rem 0 0; max-width: 38rem; font-size: 1.08rem; color: var(--fg); }
html.js .mod-signale__satz { display: none; }
html.js .mod-signale.is-gewaehlt .mod-signale__satz { display: block; animation: mod-ein 0.5s var(--ease) 1 both; }
.mod-signale__zahl { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.mod-signale__zahl:empty { display: none; }
@keyframes mod-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 901px) {
  .mod-signale__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
  .mod-signal { min-height: 76px; font-size: 1.25rem; }
  .mod-signale__feld.is-spiel .mod-signal__num { animation-delay: calc(var(--r) * 0.5s + 0.2s); }
}

/* ---------- Es geht um mehr ---------- */
.mod-punkte > li:last-child b { color: var(--accent-ink); }

/* #mehr und #check: Die Bühne ist direktes Kind ihres Klebebereichs (js/lpx-szene.js misst sticky Bühnen am Elternelement).
   In #mehr ist das .mod-mehr__oben: so klebt die Schichten-Bühne nur über den vier Punkten und läuft am Handy nicht über
   die Weitergabe (.mod-netz) darunter. Handy: Bühne über den Punkten, #check Bühne unter dem Text. Desktop: Kopf über die
   ganze Breite (Haarlinie), Text links, Bühne rechts ab der Überschrift, klebt senkrecht mittig, unten rechts bleibt Platz fürs Dock. */
.mod-buehne--mehr, .mod-buehne--scan { margin-top: clamp(1.6rem, 4vh, 3rem); }
@media (min-width: 901px) {
  .mod-mehr__oben, #check { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .mod-mehr__oben > .chapter__head, #check > .chapter__head { grid-column: 1 / -1; grid-row: 1; }
  .mod-mehr__oben > .chapter__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4rem); row-gap: 1.4rem; }
  .mod-mehr__oben > .chapter__head > * { grid-column: 1; }
  .mod-mehr__oben > .lpx-inhalt, #check > .lpx-inhalt { grid-column: 1; grid-row: 2; }
  .mod-buehne--mehr, .mod-buehne--scan {
    grid-column: 2; grid-row: 1 / span 2; align-self: start;
    --h: min(58vh, 560px); top: calc(46vh - var(--h) / 2); height: var(--h); min-height: 340px;
    margin-top: clamp(2.4rem, 6vh, 4rem);
  }
}

/* ---------- #mehr, zweite Hälfte: die Website gibt weiter (Desktop mit Netz-Bühne, Handy nur Text, Szene bleibt bei mehr) ---------- */
.mod-netz { margin-top: clamp(1.4rem, 4vh, 2.4rem); gap: 1.4rem; }
.mod-netz__text { display: grid; align-content: center; gap: 1rem; }
.mod-netz__satz { margin: 0; max-width: 32rem; color: var(--fg); font-size: 1.0625rem; }
@media (min-width: 901px) { .mod-netz { margin-top: clamp(2.4rem, 7vh, 4.5rem); } .mod-netz__satz { font-size: 1.2rem; } }
/* Beispiele als ruhige Liste (keine Pillen: sie sähen aus wie Knöpfe, sind aber nicht antippbar) */
.mod-netz__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; }
.mod-netz__liste li { position: relative; padding-left: 1.05rem; font-size: 1.0625rem; line-height: 1.5; color: var(--fg); }
.mod-netz__liste li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--c-ring2); box-shadow: 0 0 8px var(--c-ring2); }
.mod-netz .lpx-cta { margin-top: 0.4rem; }
@media (min-width: 901px) { .mod-netz { align-items: center; } }

/* ---------- Vorher / Jetzt ---------- */
.mod-vn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
.mod-vn__titel, .mod-zwei__titel { margin: 0 0 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); }
.mod-vn__spalte--jetzt .mod-vn__titel, .mod-zwei__titel--neu { color: var(--accent-ink); border-bottom-color: color-mix(in srgb, var(--c-accent) 45%, transparent); }
.mod-vn__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.mod-vn__liste li { position: relative; padding-left: 2.2rem; color: var(--fg-muted); line-height: 1.45; }
.mod-vn__liste li::before { content: ""; position: absolute; left: 0.3rem; top: 0.45em; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--fg-muted); opacity: 0.7; }
@media (min-width: 701px) { .mod-vn { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 3rem); } }
.mod-chip { display: inline-flex; align-items: center; gap: 0.5em; min-height: 48px; padding: 0.5rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--fg); font-weight: 500; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.mod-chip::after { content: ""; width: 0.5em; height: 0.5em; border-top: 1.5px solid var(--accent-ink); border-right: 1.5px solid var(--accent-ink); transform: rotate(45deg); }
.mod-chip:hover { border-color: var(--c-accent); color: var(--accent-ink); }
@media (max-width: 700px) { .lpx-cta .mod-chip { justify-content: center; } }

/* ---------- Was bleibt, was neu wird ---------- */
.mod-zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
@media (min-width: 701px) { .mod-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 3rem); } }
.mod-lead { margin: 2rem 0 0; max-width: 32rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 5vw, 1.8rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--fg); text-wrap: balance; }
.mod-weiter { margin: 1rem 0 0; }

/* ---------- Website-Check ---------- */
.mod-check__text { display: grid; gap: 0.9rem; align-content: start; }
.mod-marke-klein { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.mod-marke-klein .beta { vertical-align: 0.1em; }
.mod-check__satz { margin: 0; max-width: 36rem; color: var(--fg-muted); }
.mod-feld__label { margin-top: 0.4rem; font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; line-height: 1.3; color: var(--fg-muted); }
.mod-check__form { margin-top: -0.4rem; }
.mod-check__form input { font-size: 16px; }
.mod-check__wa { margin: 0; color: var(--fg-muted); }
.mod-check__bild { margin: 0.8rem 0 0; max-width: 36rem; }
.mod-check__bild img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: 0.9rem; }
.mod-check__bild figcaption { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); line-height: 1.5; }

/* ---------- Ablauf ---------- */
.mod-schritt--wa .lpx-schritt__num, .lpx-schritt.mod-schritt--wa.is-an .lpx-schritt__num { background: var(--wa); border-color: var(--wa); color: var(--wa-ink); font-weight: 600; }
.mod-ablauf__satz { margin: 2rem 0 0; max-width: 28rem; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); }

/* ---------- #vorher-nachher, zweiter Teil: echte Bildschirme von NABBA, dann weitere Arbeiten als kompakte Liste ---------- */
.mod-fall { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: clamp(2rem, 5vh, 3rem); }
.mod-fall__nabba { display: grid; gap: 1rem; }
.mod-fall__link { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
.mod-fall__titel { margin: 0 0 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.015em; color: var(--fg); }
.mod-weitere { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mod-weitere > li { display: grid; gap: 0.6rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.mod-weitere__name { display: block; margin-bottom: 0.2rem; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.015em; color: var(--fg); }
.mod-weitere p { margin: 0; color: var(--fg-muted); }
.mod-weitere__link { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.mod-weitere__link .mod-chip { min-height: 44px; padding: 0.35rem 0.95rem; font-size: 0.95rem; }
.mod-weitere small.lpx-ref__beleg { display: block; }
.mod-chip--intern::after { content: none; }
@media (min-width: 901px) {
  .mod-fall { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
}
.mod-ref__bilder { position: relative; padding-right: 16%; padding-bottom: 10%; }
.mod-ref__bilder .lpx-ref__screen { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); }
.mod-ref__handy { position: absolute; right: 0; bottom: 0; width: 30%; margin: 0; border: 1px solid var(--line-strong); border-radius: 0.9rem; overflow: hidden; background: var(--card); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85); }
.mod-ref__handy img { display: block; width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .mod-ref__bilder .lpx-ref__screen, .mod-ref__handy { transition: transform 0.6s var(--ease); }
  .mod-fall__nabba:hover .lpx-ref__screen { transform: translateY(-4px); }
  .mod-fall__nabba:hover .mod-ref__handy { transform: translateY(-10px); }
}
.mod-refs__klein { margin: 1.4rem 0 0; max-width: 44rem; font-size: 0.92rem; color: var(--fg-muted); }

/* ---------- Team und Zusammenarbeit ---------- */
.mod-person__marke { display: block; margin-bottom: 0.25rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.mod-team__satz { margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1rem; color: var(--fg); }
.mod-zusammen { margin-top: clamp(3rem, 8vh, 5rem); padding-top: clamp(1.6rem, 4vh, 2.4rem); border-top: 1px solid var(--line); }
.mod-zusammen .chapter__num { display: block; margin-bottom: 1rem; }
.mod-zusammen__text { margin: 1.2rem 0 0; max-width: 36rem; color: var(--fg-muted); }
@media (min-width: 901px) { .mod-zusammen { align-items: center; } }

/* ---------- Fragen ---------- */
.mod-fragen__mehr { margin: 1.6rem 0 0; color: var(--fg-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; }
.mod-quer { margin: 0.6rem 0 0; color: var(--fg-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; }

/* ---------- Schluss ---------- */
.mod-schluss .contact__title { text-wrap: balance; }
@media (min-width: 901px) { .mod-schluss .contact__title { max-width: 20ch; font-size: clamp(2.6rem, 4.6vw, 5rem); } .mod-schluss .lpx-schluss__buehne { height: clamp(150px, 20svh, 220px); } }
.mod-schluss .contact__buttons { justify-content: center; }
.mod-schluss__risiko { color: var(--fg); }
.mod-schluss .contact__hint { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem; }
@media (max-width: 700px) { .mod-schluss .contact__buttons .btn { width: 100%; } }

/* ---------- Handy: Dock und Kopfzeile ganz deckend (in Aufnahmen schien Text durch 96 % bzw. 94 %) ---------- */
@media (max-width: 700px) {
  .lp--website-modernisieren .dock { background: var(--c-panel); }
  .lp--website-modernisieren .dock__form { background: color-mix(in srgb, var(--c-light) 8%, var(--c-panel)); }
  .lp--website-modernisieren .nav::before { background: var(--bg); }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  /* #mehr: das Bild mit den auseinandergezogenen Schichten bleibt stehen (die Szene tritt dort zurück, seite.js) */
  html.szene-an .mod-buehne--mehr.is-live .lpx-buehne__bild, .mod-buehne--mehr .lpx-buehne__bild { opacity: 0.85; }
  /* #was-bleibt: ohne Bewegung zeigt das Bild alt und neu nebeneinander (szene-umbau.svg) statt des fertigen Hero-Bilds */
  html.szene-an .mod-buehne--umbau.is-live .lpx-buehne__bild, .mod-buehne--umbau .lpx-buehne__bild { opacity: 0.85; }
  .mod-signale__feld.is-spiel .mod-scan, .mod-signale__feld.is-spiel .mod-signal__num, html.js .mod-signale.is-gewaehlt .mod-signale__satz { animation: none; }
  .mod-signal, .mod-signal__haken, .mod-signal__haken::after, .mod-bar__zeile { transition: none; }
}