/* pxmedia.ai — Seitenfamilie „Leistungen“ (Zettel UPDATE_2026-10-14_Leistungsseiten-Vorschau, Konzept 14.10.2026):
   Video-Ausschnitte der Betriebszentrale im eigenen Rahmen (Gerätefenster wie die Workspace-Szene), Leiter der vier Stufen,
   Paare aus Ausschnitt und Erklärung. Farben: Cyan = KI, Lila = Mensch. Keine Karten-Reflexe: große Ausschnitte, knapper Text. */

/* ---- Clip im Gerätefenster ---- */
.clip{position:relative;margin:0;border:1px solid var(--c-linie-2);border-radius:var(--radius-gross);overflow:hidden;background:#0e0e10;box-shadow:var(--schatten)}
.clip__kopf{display:flex;align-items:center;gap:.5rem;height:2.2rem;padding:0 .9rem;font-size:.78rem;letter-spacing:.06em;color:var(--c-text-3);border-bottom:1px solid rgba(255,255,255,.07);background:rgba(10,10,12,.85)}
.clip__kopf i{width:.62rem;height:.62rem;border-radius:50%;background:rgba(255,255,255,.14)}
.clip__kopf i:first-child{background:var(--c-ki)}
.clip__kopf span{margin-left:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip video{display:block;width:100%;height:auto;background:#0e0e10}
.clip__marke{position:absolute;right:.9rem;top:2.9rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ki);background:rgba(10,10,12,.7);border:1px solid var(--c-ki-linie);border-radius:999px;padding:.25rem .6rem}
.clip figcaption{padding:.85rem 1rem 1rem;color:var(--c-text-2);font-size:var(--fs-klein);line-height:1.5;border-top:1px solid rgba(255,255,255,.07)}
.clip figcaption b{color:var(--c-text);font-weight:var(--fw-bold)}
.clip--handy{width:min(100%,300px);margin-inline:auto;border-radius:2.2rem;border-width:6px;border-color:#2a2a2a;box-shadow:var(--schatten),0 0 0 1px #3d3d3d}
.clip--handy .clip__kopf{display:none}
.clip--handy video{border-radius:1.8rem}
.clip--handy figcaption{text-align:center}

/* ---- Paar: Ausschnitt + Erklärung ---- */
.lz-paar{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-block:var(--raum-block)}
.lz-paar--tausch .lz-paar__text{order:-1}
.lz-paar__text h2,.lz-paar__text h3{margin:0 0 .6rem}
.lz-paar__text p{color:var(--c-text-2);max-width:58ch}
.lz-paar__text .kicker{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-ki);margin-bottom:.5rem}
.lz-nutzen{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.45rem}
.lz-nutzen li{position:relative;padding-left:1.4rem;color:var(--c-text-2);font-size:var(--fs-klein)}
.lz-nutzen li::before{content:"";position:absolute;left:0;top:.5em;width:.6rem;height:.6rem;border-radius:50%;background:var(--c-mensch)}
.lz-nutzen li b{color:var(--c-text)}
.lz-beispiel{margin-top:1rem;padding:.8rem 1rem;border-left:2px solid var(--c-ki-linie);color:var(--c-text-2);font-size:var(--fs-klein)}
.lz-beispiel b{color:var(--c-ki)}

/* ---- Leiter der Stufen ---- */
.lz-leiter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:var(--raum-block)}
.lz-stufe{display:flex;flex-direction:column;gap:.6rem;padding:1.2rem;border:1px solid var(--c-linie);border-radius:var(--radius);background:var(--c-flaeche-1);color:var(--c-text);text-decoration:none;transition:border-color var(--dauer) var(--kurve),transform var(--dauer) var(--kurve)}
.lz-stufe:hover,.lz-stufe:focus-visible{border-color:var(--c-ki-linie);transform:translateY(-2px);outline:none}
.lz-stufe--auskopplung{border-color:var(--c-mensch-linie);background:var(--c-mensch-weich)}
.lz-stufe img{display:block;width:100%;height:auto;border-radius:calc(var(--radius) - 4px);border:1px solid var(--c-linie-2)}
.lz-stufe .kicker{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-text-3)}
.lz-stufe h3{margin:0;font-size:var(--fs-h3)}
.lz-stufe p{margin:0;color:var(--c-text-2);font-size:var(--fs-klein);flex:1}
.lz-stufe .lz-stufe__mehr{color:var(--c-ki);font-weight:var(--fw-bold);font-size:var(--fs-klein)}
.lz-stufe--auskopplung .lz-stufe__mehr{color:var(--c-mensch)}

/* ---- Branchen, Weg, Aufruf ---- */
.lz-branchen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;padding:0;list-style:none}
.lz-branchen li{padding:.5rem .9rem;border:1px solid var(--c-linie-2);border-radius:999px;font-size:var(--fs-klein);color:var(--c-text-2)}
.lz-branchen li[data-stand="beispiel"]{border-color:var(--c-ki-linie);color:var(--c-text)}
.lz-weg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:var(--raum-block);counter-reset:schritt}
.lz-weg li{list-style:none;padding:1.2rem;border:1px solid var(--c-linie);border-radius:var(--radius);background:var(--c-flaeche-1)}
.lz-weg li::before{counter-increment:schritt;content:counter(schritt);display:inline-flex;width:2rem;height:2rem;align-items:center;justify-content:center;border-radius:50%;background:var(--c-ki-weich);color:var(--c-ki);font-weight:var(--fw-bold);margin-bottom:.7rem}
.lz-weg b{display:block;margin-bottom:.3rem}
.lz-weg p{margin:0;color:var(--c-text-2);font-size:var(--fs-klein)}
.lz-weg a{display:inline-block;margin-top:.7rem;color:var(--c-ki);font-weight:var(--fw-bold);font-size:var(--fs-klein);text-decoration:none}
.lz-weg a:hover,.lz-weg a:focus-visible{text-decoration:underline;outline:none}
.lz-aufruf{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.lz-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:var(--raum-block)}
.lz-raster--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---- Startseiten-Sektion #betrieb ---- */
.betrieb{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.betrieb__klein{display:grid;gap:.9rem}
.betrieb__klein .lz-stufe{flex-direction:row;align-items:center;gap:.9rem;padding:.8rem}
.betrieb__klein .lz-stufe img{width:38%;flex:none}
.betrieb__klein .lz-stufe p{font-size:.84rem}

/* ---- Runde 2 (17.10.2026, Sichtung Michael): stehende Bilder — Medien bleiben kleben, der Text scrollt daneben; ab 900 px ---- */
.lz-paar{align-items:start}
.lz-paar__medien{position:sticky;top:calc(77px + 1rem);align-self:start}
.abschnitt[id]{scroll-margin-top:92px}
.lz-paar__medien .clip video{max-height:min(62vh,620px);width:auto;max-width:100%;margin-inline:auto}   /* Bild bleibt im Sichtfeld, der längere Text scrollt daneben */
.lz-paar--handy .clip--handy video{max-height:min(70vh,700px)}
.lz-paar__text{padding-block:.5rem}
.lz-paar__text p{font-size:1.06em;line-height:1.65}
.lz-paar__text .lz-nutzen li{font-size:1em}
.lz-paar__text h3{margin:0 0 .6rem;font-size:var(--fs-h2)}
.lz-paar--handy{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.lz-paar--handy .lz-paar__medien{display:flex;justify-content:center}
.lz-paar--handy.lz-paar--tausch .lz-paar__medien{justify-content:center}
.lz-mehr__titel{margin:1.8rem 0 0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-text-3)}
/* ---- Startseite: „… und vieles mehr“ — Kacheln auf die Anker der Tool-Seite ---- */
.lz-mehr{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.lz-mehr a{display:flex;flex-direction:column;gap:.5rem;padding:.6rem;border:1px solid var(--c-linie);border-radius:var(--radius);background:var(--c-flaeche-1);color:var(--c-text);text-decoration:none;font-size:.84rem;transition:border-color var(--dauer) var(--kurve),transform var(--dauer) var(--kurve)}
.lz-mehr a:hover,.lz-mehr a:focus-visible{border-color:var(--c-ki-linie);transform:translateY(-2px);outline:none}
.lz-mehr img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:calc(var(--radius) - 4px);border:1px solid var(--c-linie-2)}
.lz-mehr b{display:block;color:var(--c-text)}
.lz-mehr span{color:var(--c-text-3);font-size:.78rem}
.betrieb__klein{grid-template-columns:repeat(2,minmax(0,1fr))}
.betrieb__klein .lz-stufe{flex-direction:column;align-items:stretch;gap:.5rem;padding:.7rem}
.betrieb__klein .lz-stufe img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.betrieb__klein .lz-stufe h3{font-size:1rem}

/* ---- Tool-Seite: Anker-Leiste, Vierer-Raster (Konzept 17.10.2026) ---- */
.lz-anker{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.lz-anker a{padding:.45rem .85rem;border:1px solid var(--c-linie-2);border-radius:999px;font-size:var(--fs-klein);color:var(--c-text-2);text-decoration:none;transition:border-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
.lz-anker a:hover,.lz-anker a:focus-visible{border-color:var(--c-ki-linie);color:var(--c-text);outline:none}
.lz-raster--vier{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---- Leistungen: zwei Säulen (Beratung über ONFYR = Mensch-Lila, Umsetzung = KI-Cyan) ---- */
.lz-saeulen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.2rem,3vw,2.5rem);align-items:start;margin-top:var(--raum-block)}
.lz-saeule{padding:clamp(1.2rem,3vw,2rem);border:1px solid var(--c-mensch-linie);border-radius:var(--radius-gross);background:var(--c-flaeche-1)}
.lz-saeule--umsetzung{border-color:var(--c-ki-linie)}
.lz-saeule .kicker{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-mensch);margin-bottom:.5rem}
.lz-saeule--umsetzung .kicker{color:var(--c-ki)}
.lz-saeule h2{margin:0 0 .6rem}
.lz-saeule>p{color:var(--c-text-2)}
.lz-bausteine{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.lz-bausteine a{display:flex;gap:.8rem;align-items:center;min-height:5.2rem;padding:.6rem;border:1px solid var(--c-linie);border-radius:var(--radius);color:var(--c-text);text-decoration:none;transition:border-color var(--dauer) var(--kurve),transform var(--dauer) var(--kurve)}
.lz-bausteine a:hover,.lz-bausteine a:focus-visible{border-color:var(--c-ki-linie);transform:translateY(-2px);outline:none}
.lz-bausteine img{width:34%;flex:none;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:calc(var(--radius) - 4px);border:1px solid var(--c-linie-2)}
.lz-bausteine span{font-size:.84rem;color:var(--c-text-2);line-height:1.4}
.lz-bausteine b{display:block;color:var(--c-text);margin-bottom:.15rem}

@media(max-width:1100px){.lz-leiter,.lz-raster--vier{grid-template-columns:repeat(2,minmax(0,1fr))}.lz-mehr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .lz-paar,.betrieb,.lz-paar--handy{grid-template-columns:minmax(0,1fr)}
  .lz-paar__medien{position:static}
  .betrieb__klein{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lz-paar--tausch .lz-paar__text{order:0}
  .lz-weg,.lz-raster,.lz-saeulen,.lz-bausteine{grid-template-columns:minmax(0,1fr)}
  .lz-raster--vier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .betrieb__klein .lz-stufe img{width:32%}
}
@media(max-width:600px){.lz-leiter,.lz-raster--vier,.betrieb__klein{grid-template-columns:minmax(0,1fr)}.lz-mehr{grid-template-columns:repeat(2,minmax(0,1fr))}.lz-paar{margin-block:2rem}}
@media(prefers-reduced-motion:reduce){.lz-stufe,.lz-stufe:hover,.lz-bausteine a,.lz-bausteine a:hover{transition:none;transform:none}}

/* ---- Runde 3 (20.10.2026, Ansage Michael): vier Kernthemen oben, Fachbereiche unten, Telefon-Kachel, Weg in zwei Teilen, Scroll-Bühne ---- */
.lz-weg--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.lz-weg .kicker{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-text-3);margin-bottom:.4rem}
.lz-mehr{grid-auto-flow:dense}
.lz-mehr--handy{grid-row:span 2}
.lz-mehr--handy a{height:100%}
.lz-mehr__telefon{display:flex;justify-content:center;align-items:stretch;flex:1;min-height:0;padding:.5rem .6rem;border-radius:calc(var(--radius) - 4px);background:linear-gradient(160deg,var(--c-flaeche-2),var(--c-grund));border:1px solid var(--c-linie-2)}
.lz-mehr__telefon img{height:100%;width:auto;max-height:360px;aspect-ratio:640/1383;object-fit:cover;object-position:top;border-radius:1.1rem;border:3px solid #2a2a2a;box-shadow:0 0 0 1px #3d3d3d,var(--schatten);background:#0e0e10}
.weg2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,2.2rem);margin-top:var(--raum-block)}
.weg2__teil{display:flex;flex-direction:column;gap:.8rem;padding:clamp(1.2rem,3vw,2rem);border:1px solid var(--c-mensch-linie);border-radius:var(--radius-gross);background:var(--c-flaeche-1)}
.weg2__teil--umsetzung{border-color:var(--c-ki-linie)}
.weg2__teil .kicker{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-mensch)}
.weg2__teil--umsetzung .kicker{color:var(--c-ki)}
.weg2__teil h3{margin:0;font-size:var(--fs-h3)}
.weg2__schritte{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.75rem;counter-reset:weg2;flex:1}
.weg2__schritte li{display:grid;grid-template-columns:2rem 1fr;gap:.15rem .7rem;align-items:start}
.weg2__schritte li::before{grid-row:1 / span 2}
.weg2__schritte b,.weg2__schritte span{grid-column:2}
.weg2__schritte li::before{counter-increment:weg2;content:counter(weg2);display:inline-flex;width:2rem;height:2rem;align-items:center;justify-content:center;border-radius:50%;background:var(--c-mensch-weich);color:var(--c-mensch);font-weight:var(--fw-black);font-size:.9rem}
.weg2__teil--umsetzung .weg2__schritte li::before{background:var(--c-ki-weich);color:var(--c-ki)}
.weg2__schritte b{display:block;color:var(--c-text)}
.weg2__schritte span{color:var(--c-text-2);font-size:var(--fs-klein)}
.weg2__teil>a{align-self:flex-start;margin-top:.6rem}
.lz-eyecatcher{margin-top:var(--raum-block)}
.lz-eyecatcher .clip video{max-height:min(78vh,860px);width:auto;max-width:100%;margin-inline:auto}
.lz-eyecatcher figcaption{font-size:var(--fs-text)}
@media(max-width:1100px){.weg2,.lz-weg--zwei{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.lz-mehr--handy{grid-row:auto}.lz-mehr__telefon img{max-height:220px}}

/* ---- Runde 4 (21.10.2026, Ansage Michael): Tool-Seite — der Clip steht MITTIG, der Text scrollt vorbei (js/paare.js setzt --lz-mitte,
   den Laufweg und den Partikel-Anker); hinter jedem Fenster ein Icon aus Partikeln (data-staub-form am Paar, Anker .lz-staub) ---- */
.lz-paar[data-staub-form]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lz-paar--handy[data-staub-form]{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.lz-paar[data-staub-form] .lz-paar__medien{top:var(--lz-mitte,calc(77px + 1rem));padding-inline-start:clamp(48px,9vw,130px)}
.lz-paar--tausch[data-staub-form] .lz-paar__medien{padding-inline-start:0;padding-inline-end:clamp(48px,9vw,130px)}
.lz-staub{position:absolute;pointer-events:none}
/* Beratung (Runde 4): Beratung zuerst, Förderung, Weg, Umsetzung, Ausblick AI Workspace */
.kopfzeile--breit{max-width:78ch}
.bt-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.bt-zwei--umsetzung{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}
.bt-zwei--umsetzung .kopfzeile{margin-bottom:0}
.bt-block h2{font-size:var(--fs-h3);margin:0 0 .4rem}
.bt-zwischen{margin:var(--raum-block) 0 0;font-size:var(--fs-h3)}
.bt-zwischen+.lz-weg{margin-top:1.2rem}
.bt-foerderung{max-width:min(100%,640px)}
.bt-foerderung .kopfzeile{margin-bottom:1rem}
.bt-foerderung__liste{margin-top:0}
.bt-bausteine{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.bt-bausteine{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .lz-paar[data-staub-form],.lz-paar--handy[data-staub-form]{grid-template-columns:minmax(0,1fr)}
  .lz-paar__medien,.lz-paar[data-staub-form] .lz-paar__medien{position:relative;top:auto}
  .lz-paar[data-staub-form] .lz-paar__medien,.lz-paar--tausch[data-staub-form] .lz-paar__medien{padding-inline:0}
  .lz-staub{top:-12%;right:0;width:40%;aspect-ratio:1}
  .bt-zwei,.bt-zwei--umsetzung,.bt-bausteine{grid-template-columns:minmax(0,1fr)}
}

/* ---- Runde 5 (22.10.2026, Ansage Michael): Band auf der Startseite, größere Fenster mit längeren Texten, mobile Fenster im Telefonrahmen,
   Beratung mit Bildmarke, Lupe, zwei Ebenen und Icons statt Mini-Screenshots ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Band: Spur über die volle Breite, Karten 72 % der Inhaltsbreite (die nächste ragt herein), Scroll-Snap, Pfeile + Zähler */
.band{position:relative;margin-top:var(--raum-block)}
.band__leiste{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.band__zaehler{font-size:var(--fs-klein);letter-spacing:.08em;color:var(--c-text-3);font-variant-numeric:tabular-nums}
.band__pfeile{display:flex;gap:.6rem}
.band__pfeil{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--c-linie-2);background:var(--c-flaeche-1);color:var(--c-text);cursor:pointer;transition:border-color var(--dauer) var(--kurve),background-color var(--dauer) var(--kurve),opacity var(--dauer) var(--kurve)}
.band__pfeil svg{width:22px;height:22px}
.band__pfeil:hover,.band__pfeil:focus-visible{border-color:var(--c-ki-linie);background:var(--c-ki-weich);outline:none}
.band__pfeil:disabled{opacity:.3;cursor:default;border-color:var(--c-linie)}
.band:not(.band--bereit) .band__leiste{display:none}
.band__spur{list-style:none;margin:0;display:flex;gap:clamp(1rem,2vw,1.6rem);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:.25rem max(var(--rand),calc((100% - var(--breite)) / 2)) 1rem;scroll-padding-inline:max(var(--rand),calc((100% - var(--breite)) / 2));
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.band__spur::-webkit-scrollbar{display:none}
.band__spur:focus-visible{outline:2px solid var(--c-ki);outline-offset:-2px}
.band__karte{position:relative;flex:0 0 72%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}   /* position:relative: absolute Kinder (sr-only, Marke) bleiben in der Spur — sonst wachsen sie in den Scrollbereich der Seite (Gate 22.10.: body.scrollWidth 10.610 px) */
.band__bild{margin:0}
.band__rahmen{aspect-ratio:16/9;overflow:hidden;background:#0e0e10}
.band__rahmen img,.band__rahmen video{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.band__rahmen--3d video{object-position:center}
.band__rahmen--handy{display:flex;justify-content:center;align-items:flex-end;padding-top:4%;background:radial-gradient(ellipse at 50% 120%,rgba(6,182,212,.22),transparent 60%),linear-gradient(160deg,var(--c-flaeche-2),var(--c-grund))}
.band__rahmen--handy .band__handy{width:auto;height:100%;max-height:100%;object-fit:cover;object-position:top;border:4px solid #2a2a2a;border-bottom:0;border-radius:1.6rem 1.6rem 0 0;box-shadow:0 0 0 1px #3d3d3d,var(--schatten);background:#0e0e10}
.band__text{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;padding:1.1rem .2rem 0}
.band__text>div{flex:1 1 auto;min-width:0;max-width:66%}
.band__text b{display:block;font-size:1.15rem;line-height:1.3;color:var(--c-text)}
.band__text p{margin:.35rem 0 0;color:var(--c-text-2);font-size:var(--fs-klein);line-height:1.5}
.band__mehr{flex:none;white-space:nowrap}
.band__karte:not(.band__karte--aktiv) .band__text{opacity:.72;transition:opacity .4s var(--kurve)}
/* Tool-Seite: Fenster füllen die Spalte (13 : 11), Video bis Fensterhöhe minus Kopfzeile; das Icon sitzt außen, zu 62 % außerhalb */
.lz-paar[data-staub-form]{grid-template-columns:minmax(0,13fr) minmax(0,11fr)}
.lz-paar--tausch[data-staub-form]{grid-template-columns:minmax(0,11fr) minmax(0,13fr)}
.lz-paar--handy[data-staub-form]{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.lz-paar--handy.lz-paar--tausch[data-staub-form]{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.lz-paar[data-staub-form] .lz-paar__medien{padding-inline-start:clamp(48px,5vw,80px)}
.lz-paar--tausch[data-staub-form] .lz-paar__medien{padding-inline-start:0;padding-inline-end:clamp(48px,5vw,80px)}
.lz-paar[data-staub-form] .lz-paar__medien .clip video{max-height:calc(100vh - 170px)}
.lz-paar__text p{max-width:62ch}
/* Beratung: Hero mit Bildmarke rechts, Lupe, zwei Ebenen, Icons */
.bt-hero .innen{min-height:min(68vh,620px);display:flex;flex-direction:column;justify-content:center}
.bt-hero__kopf{max-width:56ch;margin-bottom:0}
.bt-hero__kopf .lz-aufruf{margin-top:2rem}
.bt-leistet{list-style:none;margin:0;padding:0;display:grid;gap:1rem;max-width:40rem;counter-reset:bt}
.bt-leistet li{display:grid;grid-template-columns:2.6rem 1fr;gap:.15rem .9rem;align-items:start}
.bt-leistet li::before{counter-increment:bt;content:counter(bt);grid-row:1 / span 2;display:inline-flex;width:2.6rem;height:2.6rem;align-items:center;justify-content:center;border-radius:50%;background:var(--c-ki-weich);color:var(--c-ki);font-weight:var(--fw-black);border:1px solid var(--c-ki-linie)}
.bt-leistet b{grid-column:2;font-size:1.12rem;color:var(--c-text)}
.bt-leistet span{grid-column:2;color:var(--c-text-2);line-height:1.55}
.bt-themen{max-width:min(100%,68ch)}   /* Runde 8: Ebenen-Grafik weg, rechts steht die Partikel-Form „strategie“ */
.bt-themen__text .kopfzeile{margin-bottom:1.2rem}
.bt-bausteine a{align-items:center}
.bt-bausteine .ikon{width:3.4rem;height:3.4rem;flex:none;padding:.7rem;border-radius:calc(var(--radius) - 4px);background:var(--c-ki-weich);border:1px solid var(--c-ki-linie);color:var(--c-ki)}
@media(max-width:1100px){.band__karte{flex-basis:80%}}
@media(max-width:900px){
  .band__karte{flex-basis:86%}
  .band__text{flex-direction:column;gap:.8rem}
  .band__text>div{max-width:none}
  .band__mehr{align-self:flex-start}
  .lz-paar[data-staub-form],.lz-paar--tausch[data-staub-form],.lz-paar--handy[data-staub-form],.lz-paar--handy.lz-paar--tausch[data-staub-form]{grid-template-columns:minmax(0,1fr)}
  .lz-paar[data-staub-form] .lz-paar__medien,.lz-paar--tausch[data-staub-form] .lz-paar__medien{padding-inline:0}
  .lz-paar__medien.ist-mobil{display:flex;justify-content:center}
  .lz-paar__medien.ist-mobil .clip--handy{width:min(100%,330px)}
  .lz-paar__medien.ist-mobil .clip--handy video{max-height:none}
  .bt-hero .innen{min-height:0}
}
@media(prefers-reduced-motion:reduce){.band__spur{scroll-behavior:auto}.band__karte:not(.band__karte--aktiv) .band__text{transition:none}}

/* ---- Runde 6 (Ansage Michael 22.10.2026): Rad auf der Startseite — 12 Karten je 30°, aktive oben, Nachbarn nach unten geknickt, untere Hälfte verborgen ---- */
.rad{position:relative;margin-top:var(--raum-block);--rad-w:min(92vw,calc(var(--breite) * .92));--rad-r:calc(var(--rad-w) * 1.8);--rad-rand:max(24px,calc((100vw - var(--breite)) / 2));--rad-kopf:2.2rem;--rad-h:calc(var(--rad-w) * 9 / 16 + var(--rad-kopf) + 2px)}
.rad__buehne{position:relative;overflow:hidden;height:calc(var(--rad-h) + clamp(70px,9vw,140px));outline:none;touch-action:pan-y;cursor:grab}
/* Runde 7: Nachbarn laufen zu den Seiten und nach unten aus (Overlays zur Grundfarbe) */
.rad__buehne::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to right,var(--c-grund),transparent var(--rad-rand),transparent calc(100% - var(--rad-rand)),var(--c-grund))}
.rad__buehne::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(80px,10vw,160px);z-index:3;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--c-grund) 85%)}
.rad__buehne:active{cursor:grabbing}
.rad__buehne:focus-visible{box-shadow:inset 0 0 0 2px var(--c-ki)}
.rad__scheibe{list-style:none;margin:0;padding:0;position:absolute;left:50%;top:0;width:var(--rad-w);height:var(--rad-h);margin-left:calc(var(--rad-w) / -2);transform-origin:50% var(--rad-r);transform:rotate(calc(var(--k, 0) * -30deg));transition:transform .7s var(--kurve)}
.rad__karte{position:absolute;left:0;top:0;width:100%;height:var(--rad-h);transform-origin:50% var(--rad-r);transform:rotate(calc(var(--i, 0) * 30deg));transition:opacity .5s var(--kurve),filter .5s var(--kurve)}
.rad__karte--nah{opacity:.5;filter:blur(2.5px) brightness(.72)}
.rad__karte--fern{opacity:0;pointer-events:none}
.rad__karte--aktiv{opacity:1;filter:none;z-index:2}
.rad__bild{margin:0;height:100%}
.rad__rahmen{aspect-ratio:16/9;overflow:hidden;background:#0e0e10}
.rad__rahmen img,.rad__rahmen video{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.rad__rahmen--3d video{object-position:center}
.rad__rahmen--handy{display:flex;justify-content:center;align-items:flex-end;padding-top:4%;background:radial-gradient(ellipse at 50% 120%,rgba(6,182,212,.22),transparent 60%),linear-gradient(160deg,var(--c-flaeche-2),var(--c-grund))}
.rad__rahmen--handy .rad__handy{width:auto;height:100%;max-height:100%;object-fit:cover;object-position:top;border:4px solid #2a2a2a;border-bottom:0;border-radius:1.6rem 1.6rem 0 0;box-shadow:0 0 0 1px #3d3d3d,var(--schatten);background:#0e0e10}
.rad__fuss{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pfeile pfeile" "text mehr";gap:1rem 1.4rem;align-items:center;margin-top:.6rem}
.rad__pfeile{grid-area:pfeile;justify-content:center}
.rad__text{grid-area:text}
.rad__mehr{grid-area:mehr}
.rad__pfeile{display:flex;gap:1.2rem}
.rad__pfeil{width:58px;height:58px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--c-linie-2);background:var(--c-flaeche-1);color:var(--c-text);cursor:pointer;transition:border-color var(--dauer) var(--kurve),background var(--dauer) var(--kurve)}
.rad__pfeil svg{width:28px;height:28px}
.rad__pfeil:hover,.rad__pfeil:focus-visible{border-color:var(--c-ki-linie);background:var(--c-ki-weich);outline:none}
.rad__zaehler{display:block;font-size:var(--fs-klein);letter-spacing:.08em;color:var(--c-text-3);font-variant-numeric:tabular-nums;margin-bottom:.25rem}
.rad__text b{display:block;font-size:1.15rem;line-height:1.3;color:var(--c-text)}
.rad__text p{margin:.35rem 0 0;color:var(--c-text-2);font-size:var(--fs-klein);line-height:1.5;max-width:60ch}
.rad__mehr{white-space:nowrap}
.rad:not(.rad--bereit) .rad__pfeile{visibility:hidden}
@media(prefers-reduced-motion:reduce){.rad__scheibe,.rad__karte{transition:none}}
@media(max-width:900px){.rad{--rad-w:90vw;--rad-r:calc(var(--rad-w) * 1.8);--rad-rand:16px}.rad__buehne{height:calc(var(--rad-h) + 60px)}.rad__fuss{grid-template-columns:minmax(0,1fr);grid-template-areas:"pfeile" "text" "mehr";gap:.9rem}.rad__mehr{white-space:normal;justify-self:start}}

/* ---- Runde 6: Beratungsteil mit stehendem Text — links bleibt der Text kleben, rechts scrollen Boxen mit Bildern vorbei ---- */
.bt-wir{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.bt-wir__text{position:sticky;top:calc(77px + 2rem)}
.bt-wir__titel{font-size:var(--fs-h1);line-height:1.05;margin:.3rem 0 1rem}
.bt-wir__lead{font-size:var(--fs-lead);color:var(--c-text);max-width:34ch}
.bt-wir__text>p{max-width:40ch}
.bt-wir__boxen{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.bt-wir__box{border:1px solid var(--c-linie-2);border-radius:var(--radius-gross);background:var(--c-flaeche-1);overflow:hidden;box-shadow:var(--schatten)}
.bt-wir__box--umsetzung{border-color:var(--c-ki-linie)}
.bt-wir__bild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.bt-wir__box>div:last-child{padding:1.2rem 1.4rem 1.4rem}
.bt-wir__box .kicker{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-ki)}
.bt-wir__box--umsetzung .kicker{color:var(--c-mensch)}
.bt-wir__box b{display:block;font-size:var(--fs-h3);margin:.35rem 0 .5rem;color:var(--c-text)}
.bt-wir__box p{margin:0;color:var(--c-text-2);line-height:1.55}
@media(max-width:900px){.bt-wir{grid-template-columns:minmax(0,1fr)}.bt-wir__text{position:static}.bt-wir__titel{font-size:var(--fs-h2)}}

/* ---- Runde 6: Fenster der Paare bis an den Rand — kein Außen-Innenabstand mehr, der Partikel-Anker bleibt außen (paare.js klemmt ihn am Fensterrand) ---- */
.lz-paar[data-staub-form] .lz-paar__medien,.lz-paar--tausch[data-staub-form] .lz-paar__medien{padding-inline:0}

/* ---- Runde 7: Umsetzungs-Weiche im Beratungsteil ---- */
.bt-wir__box--umsetzung>div{padding:1.2rem 1.4rem 1.4rem}
.bt-wir__box--umsetzung>div>p{margin:.2rem 0 0}
.bt-wir__wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}
.bt-wir__wege>div{padding:1rem 1.1rem;border:1px solid var(--c-linie);border-radius:var(--radius);background:var(--c-flaeche-2)}
.bt-wir__wege b{font-size:1.05rem;margin:0 0 .4rem}
.bt-wir__wege p{font-size:var(--fs-klein)}
.bt-wir__wege a{display:inline-block;margin-top:.8rem}
@media(max-width:600px){.bt-wir__wege{grid-template-columns:minmax(0,1fr)}}

/* ---- Runde 7: Call-to-Action-Sektion #jetzt — das letzte Argument vor dem Ratgeber ---- */
.cta{max-width:64rem}
.cta__titel{font-size:var(--fs-h1);line-height:1.05;margin:.3rem 0 1rem}
.cta__lead{font-size:var(--fs-lead);color:var(--c-text);max-width:60ch}
.cta__punkte{list-style:none;margin:1.6rem 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.cta__punkte li{padding:1rem 1.1rem;border:1px solid var(--c-linie);border-radius:var(--radius);background:var(--c-flaeche-1)}
.cta__punkte b{display:block;color:var(--c-mensch);margin-bottom:.3rem}
.cta__punkte span{color:var(--c-text-2);font-size:var(--fs-klein);line-height:1.5}
@media(max-width:900px){.cta__punkte{grid-template-columns:minmax(0,1fr)}.cta__titel{font-size:var(--fs-h2)}}