/* Beat On Wheels · gemeinsame Bausteine der Angebots-Unterseiten (ergänzt legal.css) */
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--magenta)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--magenta)}
.crumbs [aria-current]{color:var(--magenta)}
.lede{font-size:clamp(17px,1.6vw,20px);color:#FFFFFF}
.titelbild{margin:34px 0 8px;border-radius:24px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 0 90px -30px rgba(255,45,149,.45)}
.titelbild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.titelbild.leer{aspect-ratio:16/9;display:grid;place-items:center;background:var(--surface);color:var(--muted);font-size:14px}
main h2{font-size:clamp(22px,2.4vw,28px)}
main p a{color:var(--cyan)}
.faq{margin-top:8px;display:grid;gap:12px}
.faq details{border:1px solid var(--line2);border-radius:18px;background:var(--surface);transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:rgba(0,229,240,.45);box-shadow:0 0 40px -18px rgba(0,229,240,.5)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:600;font-size:17px;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--magenta);color:var(--magenta);font-size:18px;line-height:1}
.faq details[open] summary::after{content:"\2013";border-color:var(--cyan);color:var(--cyan)}
.faq summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:18px}
.faq summary h3{margin:0;font-size:inherit;font-weight:inherit}
.faq .a{padding:0 22px 20px}
.cta{margin-top:48px;padding:28px;border-radius:22px;border:1px solid rgba(255,45,149,.4);background:linear-gradient(120deg,rgba(255,45,149,.1),rgba(0,229,240,.06))}
.cta h2{border:0;padding:0;margin:0 0 8px}
.cta .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.cta a.b{display:inline-flex;align-items:center;height:50px;padding:0 24px;border-radius:99px;font-weight:600;text-decoration:none}
.cta a.p{background:var(--cyan);color:#111}
.cta a.s{border:1px solid var(--line2);color:#fff}
.cta a.p:hover{box-shadow:0 0 0 4px rgba(0,229,240,.18),0 0 40px rgba(0,229,240,.4)}
.cta a.s:hover{border-color:var(--cyan)}
.angebote{margin-bottom:14px}
.angebote span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);margin-bottom:6px}
/* Kartenblock "Passt auch zu eurer Feier" */
.verwandt{margin-top:48px}
.verwandt .karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px}
.karte{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:20px;overflow:hidden;background:var(--surface);color:#fff;text-decoration:none;transition:border-color .3s,box-shadow .3s,transform .3s}
.karte img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.karte .k-text{display:flex;flex-direction:column;gap:6px;padding:16px 20px 20px}
.karte strong{font-size:18px}
.karte .k-text>span:not(.k-mehr){color:var(--muted)}
.karte .k-mehr{margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.karte:hover,.karte:focus-visible{border-color:rgba(0,229,240,.55);box-shadow:0 0 40px -16px rgba(0,229,240,.6);transform:translateY(-2px)}
.karte:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.karte{transition:none}.karte:hover{transform:none}}

/* ===== Landing Pages: Einstieg, Vertrauen, Ablauf, Anfrage-Leiste (Grundsätze im Kopf von werkzeuge/seiten.py) ===== */
.crumbs{font-size:12px;margin-bottom:12px}
main>h1{margin-bottom:18px}
/* Buttons wie im Abschluss, an allen Stellen gleich */
.lp-cta a.b,.lp-knopf a.b,.m-leiste a.b{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border-radius:99px;font-weight:600;text-decoration:none}
.lp-cta a.p,.lp-knopf a.p,.m-leiste a.p{background:var(--cyan);color:#111}
.lp-cta a.s{border:1px solid var(--line2);color:#fff}
.lp-cta a.p:hover,.lp-knopf a.p:hover{box-shadow:0 0 0 4px rgba(0,229,240,.18),0 0 40px rgba(0,229,240,.4)}
.lp-cta a.s:hover{border-color:var(--cyan)}
/* Vertrauenszeile wie im Startbereich der Startseite */
.lp-vertrauen{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 20px;padding:0;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF}
.lp-vertrauen li{margin:0;white-space:nowrap;color:inherit}
.lp-vertrauen li::before{content:"·";margin-right:8px;color:var(--magenta)}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:6px}
.lp-knopf{margin:22px 0 0}
/* Ablauf in drei Schritten */
.lp-ablauf ol{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;counter-reset:none}
.lp-ablauf li{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;padding:18px 20px;border-radius:18px;border:1px solid var(--line2);background:var(--surface)}
.lp-ablauf li:last-child{border-color:rgba(255,45,149,.45);box-shadow:0 0 40px -18px rgba(255,45,149,.5)}
.lp-ablauf .nr{grid-row:span 2;font-family:var(--mono);font-weight:600;font-size:30px;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--magenta)}
.lp-ablauf strong{color:#fff;font-size:17px}
.lp-ablauf li>span:last-child{color:#FFFFFF;font-size:15.5px;line-height:1.6}
/* Echtes Foto im Abschluss */
.lp-foto{display:block;margin:-28px -28px 22px;border-radius:22px 22px 0 0;overflow:hidden}
.lp-foto img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:40% 45%}
/* Anfrage-Leiste unten am Handy (wie Startseite); erscheint nach dem Einstieg, verschwindet am Abschluss */
.m-leiste{display:none}
@media (max-width:700px){
  .m-leiste{display:flex;gap:10px;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:44;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,12,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line2);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .m-leiste.show{transform:none}
  .m-leiste a.b{flex:1}
  .m-wa{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:rgba(255,255,255,.04)}
  .m-wa svg{width:22px;height:22px;fill:#25D366}
  .lp-cta a.b{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.m-leiste{transition:none}}
/* Bilderband "Eindrücke": zum Wischen, eigene Fotos zuerst */
.lp-band{display:flex;gap:12px;margin:40px -16px 0;padding:4px 16px 14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.lp-band picture{flex:none;scroll-snap-align:start}
.lp-band img{display:block;height:260px;width:auto;border-radius:18px;border:1px solid var(--line2);object-fit:cover}
.lp-band:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:18px}
@media (min-width:821px){.lp-band{margin:40px 0 0;padding:4px 0 14px}.lp-band img{height:300px}}
/* Kurzes Video ohne Ton: lädt erst, wenn es sichtbar wird */
.lp-video{margin:34px 0 8px;border-radius:24px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 0 90px -30px rgba(0,229,240,.4);background:#000}
.lp-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* Seite "Über uns": Personen mit Foto (Text und Bild nebeneinander ab Tablet quer, darunter gestapelt) */
.uu-person{display:grid;gap:18px;margin-top:40px;align-items:center}
.uu-person h2{margin-top:0}
.uu-bild{display:block;border-radius:22px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 0 70px -30px rgba(255,45,149,.45)}
.uu-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (min-width:821px){.uu-person{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px}.uu-person.uu-links{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.uu-person.uu-links .uu-bild{order:-1}.uu-bild img{aspect-ratio:4/5}.uu-quer .uu-bild img{aspect-ratio:4/3}}
/* Vertrauensbaustein im Abschluss der Angebots-Unterseiten */
.lp-wir{margin:0 0 14px;color:#FFFFFF;font-size:17px}
/* ON-Schalter in drei Stufen wie auf der Startseite: aus, halb, an (mit ON) */
.lp-ablauf .nr{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.lp-ablauf .tg{position:relative;flex:none;display:block;width:66px;height:32px;border-radius:99px;background:var(--cyan)}.lp-ablauf .tg::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--magenta)}.lp-ablauf .half .tg{background:linear-gradient(90deg,var(--magenta) 0 50%,var(--cyan) 50% 100%)}.lp-ablauf .half .tg::after{left:21px;background:linear-gradient(90deg,var(--cyan) 0 50%,var(--magenta) 50% 100%);box-shadow:0 0 0 2px #141418}.lp-ablauf .on .tg{background:var(--magenta);box-shadow:0 0 18px rgba(255,45,149,.55)}.lp-ablauf .on .tg::after{left:38px;background:var(--cyan)}.lp-ablauf .on .tg::before{content:"ON";position:absolute;left:8px;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:21px;font-weight:400;font-style:normal;line-height:1;color:#111;-webkit-text-stroke:0;text-shadow:none;letter-spacing:.01em}.lp-ablauf .on:hover .tg::after{animation:tg_flick .5s ease}@keyframes tg_flick{0%{transform:translateX(0)}35%{transform:translateX(-36px)}65%{transform:translateX(3px)}100%{transform:translateX(0)}}@media (prefers-reduced-motion:reduce){.lp-ablauf .on:hover .tg::after{animation:none}}
/* ===== Stil 2: Unterseiten im Aufbau der Startseite (Musterseite Hochzeits-DJ, 09.10.2026; Generator werkzeuge/stil2.py) ===== */
main.lp2{width:100%;max-width:none;margin:0;padding:0 0 120px}
.lp2 .x-wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.lp2 h2{border:0;padding:0;margin:0 0 16px;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1;font-size:clamp(32px,4.6vw,58px)}
.lp2 .x-text p{margin:0 0 14px}
.lp2 .x-text p:last-child{margin-bottom:0}
/* Startbereich: Foto über die ganze Breite, die Kopfzeile liegt darüber */
.x-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:min(100vh,920px);min-height:min(100svh,920px);margin-top:-86px;padding:130px 0 44px;overflow:hidden}
.x-hero-bild{position:absolute;inset:0;z-index:-2}
.x-hero-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.x-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,12,.6) 0%,rgba(10,10,12,.1) 28%,rgba(10,10,12,.45) 58%,rgba(10,10,12,.97) 100%)}
.x-hero h1{margin:6px 0 18px;font-size:clamp(42px,7.4vw,92px);max-width:15ch;text-shadow:0 4px 30px rgba(0,0,0,.65)}
.x-hero .crumbs{margin-bottom:4px}
.x-hero .lp-vertrauen{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.85)}
@media (max-width:700px){.x-hero{margin-top:-76px;min-height:100vh;min-height:100svh;padding:110px 0 28px}}
/* Bänder über die ganze Breite im Wechsel */
.x-band{padding:clamp(56px,8vw,112px) 0;border-top:1px solid var(--line)}
.x-band.x-alt{background:#111111}
.x-intro{border-top:0;padding-top:clamp(28px,4vw,56px)}
.x-intro .lede{max-width:46ch;margin:0;font-size:clamp(19px,2.1vw,25px);line-height:1.6;color:#fff}
.x-head,.x-split{display:grid;gap:22px}
.x-split{align-items:center}
.x-bild{display:block;border-radius:24px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 0 90px -30px rgba(255,45,149,.45)}
.x-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.lp2 .lp-knopf{margin-top:24px}
@media (min-width:900px){
  .x-head{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:64px;align-items:start}
  .x-head>h2{position:sticky;top:112px}
  .x-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px}
  .x-split.x-rechts .x-bild{order:-1}
}
/* Ablauf als drei Karten nebeneinander */
.x-ablauf .lp-ablauf{margin:0}
@media (min-width:900px){
  .lp2 .lp-ablauf ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .lp2 .lp-ablauf li{display:flex;flex-direction:column;gap:10px;padding:28px 26px}
  .lp2 .lp-ablauf .nr{flex-direction:row;align-items:center;gap:16px;font-size:46px}
}
.x-breit .lp-video,.x-breit .titelbild{margin:clamp(40px,6vw,72px) 0 0}
.lp2 .verwandt{margin-top:clamp(56px,8vw,96px)}
/* Abschluss: Foto und Text nebeneinander */
.x-cta{margin-top:clamp(56px,8vw,100px)}
@media (min-width:900px){
  .x-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:center;padding:0;overflow:hidden}
  .x-cta .lp-foto{margin:0;height:100%;border-radius:22px 0 0 22px}
  .x-cta .lp-foto img{height:100%;aspect-ratio:auto;min-height:420px}
  .x-cta-text{padding:44px 44px 44px 0}
}
@media (min-width:900px){.x-bild.x-hoch img{aspect-ratio:4/5}}
/* ===== Startbereich der Unterseiten wie auf der Startseite (Grundregel 6, präzisiert 09.10.2026; Generator stil2.py: CLAIMS, FOKUS) =====
   Großer Claim mit ON-Schalter, darunter klein die H1, ein Button + WhatsApp als Textlink, Vertrauenszeile, alles mittig.
   Das Foto liegt oben bündig; je Foto stehen in --kopf und --schulter die Anteile der Bildhöhe (Oberkante Kopf, Schulterlinie)
   und in --fx der Gesichtspunkt waagerecht. Daraus ergibt sich nur per CSS (kein JavaScript, svh bleibt ruhig):
   --top  = so weit nach unten, dass der Kopf unter der Kopfzeile frei steht
   --H    = angezeigte Bildhöhe (Bild füllt Breite und Höhe)
   Schrift beginnt an der Schulterlinie: --top + --schulter * --H. */
.sb{--kz:96px;--top:max(0px,calc((var(--kz) - var(--kopf) * 100svh) / (1 - var(--kopf))));
  --H:max(calc(100svh - var(--top)),calc(100vw / var(--ar)));
  position:relative;isolation:isolate;overflow:hidden;min-height:100svh;margin-top:-86px;
  --inhalt:calc(2.3 * var(--hfs) + 230px);padding:max(var(--kz),min(calc(var(--top) + var(--schulter) * var(--H) - 4px),calc(100svh - var(--inhalt)))) 0 clamp(28px,5svh,56px);
  --hfs:clamp(38px,12vw,80px)}
.sb-foto img{position:absolute;z-index:-2;top:var(--top);left:0;display:block;width:100%;height:var(--H);max-width:none;
  object-fit:cover;object-position:var(--fx) 0;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
/* oben dunkel für die Kopfzeile, Gesicht frei, ab der Schulter so dunkel wie für die Schrift nötig */
.sb::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,12,.5) 0,rgba(10,10,12,0) 12%)}
.sb::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;top:min(calc(var(--top) + var(--schulter) * var(--H) - 14svh),calc(100svh - var(--inhalt) - 14svh));pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,0) 0,rgba(10,10,12,.5) 22%,rgba(10,10,12,.72) 60%,var(--bg) 100%)}
.sb-in{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.lp2 .sb-in{width:min(1480px,100% - 32px)}
.sb-claim{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95;font-size:var(--hfs);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55),0 6px 30px rgba(0,0,0,.6)}
.sb-claim .z{display:block}
.sb-h1{margin:0;max-width:40ch;font-family:var(--sans);font-weight:500;text-transform:none;letter-spacing:normal;line-height:1.5;font-size:clamp(17px,1.5vw,20px);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 16px rgba(0,0,0,.85)}
.sb-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 28px;margin:0}
.sb-cta a.b{flex:none}
.sb-link{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.sb-link:hover,.sb-link:focus-visible{color:var(--cyan);border-color:var(--cyan);outline:none}
.sb .lp-vertrauen{justify-content:center;margin:2px 0 0;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 16px rgba(0,0,0,.85)}
/* ON-Schalter im Claim wie auf der Startseite (Pille 98 : Schrift 72 : Knopf 74), schaltet nach dem Laden einmal wie das Logo */
.sb-claim .on{position:relative;display:inline-flex;align-items:center;justify-content:space-between;vertical-align:.12em;height:.8em;width:1.63em;margin:0 0 0 .18em;padding:0 .06em 0 .17em;border-radius:99px;background:var(--magenta);box-shadow:0 0 30px rgba(255,45,149,.45),0 0 90px rgba(255,45,149,.22)}
.sb-claim .on s{text-decoration:none;font-size:.59em;line-height:1;color:#111}
.sb-claim .on i{display:block;width:.6em;height:.6em;border-radius:50%;background:var(--cyan);animation:sb_knopf .5s ease 1s both}
.sb-claim .on::after{content:"";position:absolute;left:50%;top:50%;width:.98em;height:.98em;margin:-.49em 0 0 -.49em;border-radius:50%;border:.033em solid var(--cyan);box-sizing:border-box;opacity:0;pointer-events:none;animation:sb_ring .7s ease-out 1.3s both}
@keyframes sb_knopf{0%{transform:translateX(0)}35%{transform:translateX(-.88em)}65%{transform:translateX(.07em)}100%{transform:translateX(0)}}
@keyframes sb_ring{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
@media (prefers-reduced-motion:reduce){.sb-claim .on i,.sb-claim .on::after{animation:none}}
.sb-claim .z-on{white-space:nowrap}
@media (orientation:portrait){.sb{--hfs:clamp(36px,11vw,72px)}.sb-claim{text-wrap:balance}.sb-claim .z-on{display:flex;justify-content:center;align-items:center;gap:.22em;margin-top:.06em}.sb-claim .on{margin:0;vertical-align:baseline}}
@media (max-width:700px){.sb{--kz:84px;margin-top:-76px}.sb-cta{flex-direction:column}.sb-cta a.b{width:100%}}
/* Hochkant mit wenig Höhe */
@media (orientation:portrait) and (max-height:700px){.sb{--hfs:clamp(34px,10.6vw,44px)}.sb-in{gap:12px}.sb-h1{font-size:15.5px}}
/* Quer: Claim in einer Zeile */
@media (orientation:landscape){.sb{--hfs:clamp(30px,min(4.6vw,8svh),84px)}.sb-claim .z{display:inline}.sb-claim .nach{display:block;margin-top:.08em}.sb-claim{text-wrap:balance}}
/* Quer mit wenig Höhe (Handy quer): nur Botschaft und Button, wie auf der Startseite */
@media (orientation:landscape) and (max-height:520px){.sb{--kz:80px;--hfs:clamp(26px,8svh,40px);--inhalt:calc(2.3 * var(--hfs) + 120px)}.sb-in{gap:10px}.sb-h1{font-size:14.5px;line-height:1.45}.sb-link,.sb .lp-vertrauen{display:none}}
.sb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Desktop und Tablet quer (mit Thomas 09.10.2026): Foto füllt den ganzen ersten Bildschirm, kein grauer Verlauf,
   Schrift unten am Ende des Bildes (Gesichter stehen oben frei). Nur so viel Abdunklung unten wie für die Lesbarkeit nötig. */
@media (orientation:landscape) and (min-width:1024px){
  .sb{--top:0px;display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;padding:var(--kz) 0 clamp(32px,5svh,64px)}
  .sb-foto img{top:0;height:100%;object-position:var(--fx) 0;-webkit-mask-image:none;mask-image:none}
  .sb::after{top:auto;height:52%;background:linear-gradient(180deg,rgba(10,10,12,0) 0,rgba(10,10,12,.32) 50%,rgba(10,10,12,.62) 100%)}
}
/* Hochformat-Fotos am Desktop: senkrechter Ausschnitt je Foto (--fy, FOKUS y in stil2.py) */
@media (orientation:landscape) and (min-width:1024px){.sb-foto img{object-position:var(--fx) var(--fy,0)}}
/* Fotos mit mehreren Personen nebeneinander (FOKUS ganz): am Handy hochkant die ganze Bildbreite zeigen statt seitlich abzuschneiden */
@media (orientation:portrait){.sb-ganz{--H:max(calc(100vw / var(--ar)),58svh);--top:max(0px,calc(var(--kz) - var(--kopf) * var(--H)))}}
/* Handy quer (flach): wie Desktop. Foto füllt den Bildschirm, auf das Gesicht ausgerichtet (--fy), Schrift unten (Thomas 09.10.2026) */
@media (orientation:landscape) and (max-height:520px){.sb{--top:0px;display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;padding:var(--kz) 0 14px}.sb-foto img{top:0;height:100%;object-position:var(--fx) var(--fy,0);-webkit-mask-image:none;mask-image:none}.sb::after{top:auto;height:62%;background:linear-gradient(180deg,rgba(10,10,12,0) 0,rgba(10,10,12,.45) 45%,rgba(10,10,12,.78) 100%)}}
@media (orientation:landscape) and (max-height:520px){.sb-foto img{object-position:var(--fx) max(0%,calc(var(--fy,0%) - 14%))}}
/* Eigener Song als Hörprobe (Über uns): ON-Schalter als Abspielknopf, spielt nur auf Klick, Equalizer läuft beim Abspielen */
/* Song-Karte (Thomas 09.10.2026): rundes Reifen-Logo als Abspielknopf. Ruhe = Schalter AUS, beim Abspielen springt er auf AN und das Profil dreht ruhig */
.song{margin-top:28px;max-width:560px;min-width:0}
.song-sw{display:flex;align-items:center;gap:clamp(14px,4vw,26px);width:100%;min-width:0;padding:16px clamp(14px,4vw,22px) 16px clamp(12px,3vw,16px);border-radius:28px;border:1px solid var(--line2);background:#141418;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .3s,box-shadow .3s}
.song-sw:hover,.song-sw:focus-visible{outline:none;border-color:rgba(255,45,149,.6);box-shadow:0 0 0 4px rgba(255,45,149,.12),0 0 34px rgba(255,45,149,.3)}
.rf{position:relative;flex:none;width:clamp(96px,min(30vw,28svh),176px);aspect-ratio:1}
.rf svg{display:block;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 30px rgba(255,45,149,.25);transition:box-shadow .4s}
.rf-zahn{transform-box:view-box;transform-origin:50% 50%}
.rf-pille{fill:#00E5F0;transition:fill .3s}
.rf-knopf{fill:#FF2D95;transform-box:view-box;transition:transform .5s cubic-bezier(.3,1.6,.5,1),fill .3s}
.rf-on{opacity:0;transition:opacity .2s .15s}
.rf-ring{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.song.spielt .rf svg{box-shadow:0 0 0 1px rgba(255,45,149,.5),0 0 44px rgba(255,45,149,.55)}
.song.spielt .rf-pille{fill:#FF2D95}
.song.spielt .rf-knopf{fill:#00E5F0;transform:translateX(240px)}
.song.spielt .rf-on{opacity:1}
.song.spielt .rf-ring{animation:bowh_ring .7s ease-out .3s}
.song.spielt .rf-zahn{animation:rf_dreh 4s linear infinite}
@keyframes rf_dreh{to{transform:rotate(360deg)}}
.song-t{flex:1 1 0;display:flex;flex-direction:column;gap:4px;line-height:1.3;min-width:0}
.song-k{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta)}
.song-t strong{font-family:var(--display);font-weight:400;font-size:clamp(24px,6.4vw,34px);line-height:1.05;color:#fff;text-transform:uppercase;letter-spacing:.01em}
.song-t>span:not(.song-k):not(.song-z){color:#9A9A9A;font-size:15px}
.song-z{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:10px}
.song-play{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px 0 16px;border-radius:99px;background:var(--cyan);color:#111;box-shadow:0 0 0 4px rgba(0,229,240,.15),0 0 24px rgba(0,229,240,.4)}
.song-play b{font-weight:700;font-size:16px}.song-play .s-aus,.song.spielt .song-play .s-an{display:none}.song.spielt .song-play .s-aus{display:inline}
.song-play i{position:relative;width:14px;height:16px}
.song-play i::before{content:"";position:absolute;left:1px;top:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #111}
.song.spielt .song-play i::before{left:1px;top:0;width:4px;height:16px;border:0;background:#111;box-shadow:8px 0 0 #111}
.song-eq{display:flex;align-items:flex-end;gap:3px;height:20px}
.song-eq i{display:block;width:4px;height:4px;border-radius:2px;background:var(--magenta)}
.song-eq i:nth-child(2n){background:var(--cyan)}
.song.spielt .song-eq i{animation:song_eq .7s ease-in-out infinite alternate}
.song.spielt .song-eq i:nth-child(2){animation-delay:.25s}.song.spielt .song-eq i:nth-child(3){animation-delay:.1s}.song.spielt .song-eq i:nth-child(4){animation-delay:.35s}.song.spielt .song-eq i:nth-child(5){animation-delay:.18s}
@keyframes song_eq{from{height:4px}to{height:20px}}
@media (prefers-reduced-motion:reduce){.song.spielt .rf-zahn,.song.spielt .rf-ring,.song.spielt .song-eq i{animation:none}.song.spielt .song-eq i{height:12px}.rf-knopf{transition:fill .3s}}
/* Laufband wie auf der Startseite (Über uns): läuft durch, hält beim Zeigen an, bei reduzierter Bewegung wischbar */
.lp-lauf{margin-top:40px;overflow:hidden;padding:4px 0 14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lp-lauf-track{display:flex;width:max-content;animation:lp_lauf 70s linear infinite}
.lp-lauf:hover .lp-lauf-track,.lp-lauf:focus-within .lp-lauf-track{animation-play-state:paused}
.lp-lauf:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:18px}
.lp-lauf picture{flex:none;display:block;margin-right:14px}
.lp-lauf img{display:block;height:260px;width:auto;border-radius:18px;border:1px solid var(--line2);object-fit:cover}
@media (min-width:821px){.lp-lauf img{height:320px}}
@keyframes lp_lauf{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.lp-lauf{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.lp-lauf-track{animation:none}}

/* Nach-oben-Button wie auf der Startseite (gleiche Komponente, festgelegt 09.10.2026) */
.bow-top{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom));z-index:45;width:68px;height:68px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:var(--magenta);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px rgba(255,45,149,.22),0 0 34px rgba(255,45,149,.75),0 10px 30px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transform:translateY(20px) scale(.9);transition:opacity .35s,transform .35s,box-shadow .3s,background .3s;animation:topPuls 2.6s ease-in-out infinite}
.bow-top.show{opacity:1;pointer-events:auto;transform:none}
@keyframes topPuls{0%,100%{box-shadow:0 0 0 6px rgba(255,45,149,.22),0 0 30px rgba(255,45,149,.65),0 10px 30px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 10px rgba(255,45,149,.12),0 0 48px rgba(255,45,149,.95),0 10px 30px rgba(0,0,0,.5)}}
.bow-top svg{width:24px;height:42px;display:block;overflow:visible}
.bow-top .trk{fill:#00E5F0;stroke:#111111;stroke-width:2;transition:fill .25s}
.bow-top .kn{fill:#FF2D95;transform:translateY(0);transition:fill .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.bow-top .arr{stroke:#FFFFFF;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.bow-top:hover,.bow-top:focus-visible{outline:none;box-shadow:0 0 0 6px rgba(0,229,240,.25),0 0 46px rgba(0,229,240,.8),0 10px 30px rgba(0,0,0,.5);animation:none}
.bow-top:hover .trk,.bow-top:focus-visible .trk,.bow-top.go .trk{fill:#FF2D95}.bow-top:hover .kn,.bow-top:focus-visible .kn,.bow-top.go .kn{fill:#00E5F0}
.bow-top:hover .kn,.bow-top:focus-visible .kn,.bow-top.go .kn{transform:translateY(-20px)}
.bow-top:hover .arr,.bow-top:focus-visible .arr{opacity:1;transform:none}
@media (max-width:700px){
  .bow-top{width:48px;height:48px;bottom:calc(84px + env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right))}
  .bow-top svg{width:18px;height:32px}
}
@media (prefers-reduced-motion:reduce){.bow-top{animation:none;transition:opacity .2s}}

/* Menü auf den Unterseiten (Thomas 09.10.2026): kleiner Knopf in der Kopfzeile, gleiches Menü wie die Startseite am Handy.
   Die Anfrage bleibt die einzige Cyan-Aktion; bei offenem Menü verschwinden Kopfzeilen-Button, Leiste und Nach-oben-Button. */
.menu-btn{display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(255,45,149,.5);background:rgba(255,45,149,.1);cursor:pointer;transition:border-color .3s,box-shadow .3s}
.menu-btn:hover,.menu-btn:focus-visible{outline:none;border-color:var(--magenta);box-shadow:0 0 0 4px rgba(255,45,149,.15),0 0 24px rgba(255,45,149,.4)}
.menu-btn i{position:relative;display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:background .2s}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
.menu-open .menu-btn i{background:transparent}
.menu-open .menu-btn i::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn i::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:620px){.menu-btn{width:44px;height:44px}}
.mmenu{position:fixed;inset:0;z-index:46;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top) + 110px) max(20px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  background:radial-gradient(ellipse 70% 45% at 0% 10%,rgba(0,229,240,.14),transparent 70%),radial-gradient(ellipse 70% 45% at 100% 95%,rgba(255,45,149,.2),transparent 70%),rgba(10,10,12,.95);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menu-open .mmenu{opacity:1;visibility:visible;transition:opacity .35s,visibility 0s}
.menu-open{overflow:hidden}
.menu-open .kopf-cta,.menu-open .m-leiste,.menu-open .bow-top{visibility:hidden}
.mm-in{min-height:100%;width:min(100%,880px);margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,4svh,36px);
  opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1)}
.menu-open .mm-in{opacity:1;transform:none}
.mm-gruppen{display:grid;align-items:end;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(18px,3svh,28px) clamp(28px,5vw,56px)}
.mm-gruppe>span{display:block;margin:0 0 6px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta)}
.mm-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(140px,calc(50% - 10px)),1fr));column-gap:20px}
.mm-l a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;border-bottom:1px solid var(--line);color:#fff;text-decoration:none;transition:color .25s}
.mm-l a::after{content:"→";color:var(--muted);font-family:var(--sans);font-size:15px;transition:color .25s,transform .25s}
.mm-l a:hover,.mm-l a:focus-visible,.mm-l a[aria-current]{outline:none;color:var(--magenta)}
.mm-l a:hover::after,.mm-l a:focus-visible::after{color:var(--magenta);transform:translateX(3px)}
.mm-seite a{font-family:var(--sans);font-weight:700;font-size:clamp(19px,min(5.2vw,3.8svh),28px);line-height:1.15;letter-spacing:-.01em}
.mm-ang a{font-family:var(--sans);font-size:clamp(17px,2.2vw,19px);font-weight:600}
@media (orientation:portrait){.mm-gruppen{grid-template-columns:1fr}}
.mm-cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
.mm-cta a.p{background:var(--cyan);color:#111}
.mm-cta a.b{grid-column:1/-1;display:flex;align-items:center;justify-content:center;width:100%;height:52px;border-radius:99px;font-weight:600;text-decoration:none}
.mm-soc{display:contents}
.mm-soc a{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:99px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.mm-soc svg{width:20px;height:20px}
.mm-soc .wa svg{fill:#25D366}.mm-soc .ig svg{fill:#fff}
.mm-tel{grid-column:1/-1;text-align:center;color:var(--muted);font-size:15px;margin:0}
.mm-tel a{color:#fff}
@media (min-width:640px){.mm-cta{grid-template-columns:2fr 1fr 1fr}.mm-cta a.b{grid-column:auto}}
@media (max-height:520px){.mmenu{padding-top:calc(env(safe-area-inset-top) + 90px)}.mm-l a{min-height:44px}.mm-in{gap:18px}}
@media (prefers-reduced-motion:reduce){.mm-in{transition:none;transform:none}}

/* Laufband direkt unter der Song-Karte (Thomas 09.10.2026): Karte und Fotos passen gemeinsam auf einen Bildschirm, Höhe nur per CSS (svh) */
.lp-lauf-nah .lp-lauf{margin-top:clamp(18px,3svh,32px)}
.lp-lauf-nah .lp-lauf img{height:clamp(120px,34svh,320px)}
/* Handy quer (wenig Höhe): Karte kompakter, damit Karte und Laufband zusammen sichtbar sind */
@media (max-height:500px) and (orientation:landscape){
  .song{margin-top:20px}
  .song-sw{padding:8px 16px 8px 8px}
  .song-t{gap:2px}
  .song-t strong{font-size:24px}
  .song-z{margin-top:6px}
  .song-play{height:40px}
  .lp-lauf-nah .lp-lauf{margin-top:12px;padding-bottom:6px}
  .lp-lauf-nah .lp-lauf img{height:max(96px,27svh)}
}

/* FAQ (Thomas 09.10.2026): kürzerer Startbereich, damit die Antworten am Handy schneller erreichbar sind (bewusste Ausnahme von Grundregel 6a nur für die FAQ).
   Am Handy näher heran (--zoom), Kopf direkt unter der Kopfzeile, Schrift ab der Schulter. */
@media (orientation:portrait){
  .sb-kurz{--H:calc(var(--zoom,1) * 100vw / var(--ar));--top:min(0px,calc(var(--kz) + 16px - var(--kopf) * var(--H)));min-height:0;
    padding-top:max(var(--kz),calc(var(--top) + var(--schulter) * var(--H) - 4px))}
  .sb-kurz::after{top:calc(var(--top) + var(--schulter) * var(--H) - 14svh)}
}
@media (orientation:landscape) and (min-width:1024px){.sb-kurz{min-height:72svh}}
/* Sprungmarken zu den Themen */
.faq-sprung{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.faq-sprung a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:99px;border:1px solid var(--line2);background:#141418;color:#fff;font-weight:600;font-size:15px;text-decoration:none;transition:border-color .25s,color .25s}
.faq-sprung a:hover,.faq-sprung a:focus-visible{outline:none;border-color:var(--magenta);color:var(--magenta)}
.x-faq[id]{scroll-margin-top:96px}
@media (orientation:landscape) and (max-height:520px){.sb-kurz .sb-foto img{object-position:var(--fx) var(--fy,0)}}

/* Desktop und Tablet quer: Foto bei Bedarf nach oben ziehen (FOKUS hoch in stil2.py), damit oben weniger Hintergrund
   zu sehen ist und die Gesichter über dem Claim stehen. Das Foto wird dafür um diesen Betrag höher als der Bildschirm. */
@media (orientation:landscape) and (min-width:1024px){.sb-foto img{top:calc(-1 * var(--hoch,0px));height:calc(100% + var(--hoch,0px))}}

/* Über uns: Name als Kennzeichen über den Abschnitten, in denen die Person selbst spricht (Thomas 09.10.2026) */
.x-wer{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.x-kopf{flex:none;display:block;width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid var(--magenta);box-shadow:0 0 0 4px rgba(255,45,149,.14),0 0 22px rgba(255,45,149,.35)}
.x-kopf img{display:block;width:100%;height:100%;object-fit:cover}
.x-wer .eyebrow{font-weight:600}

/* KI-Kennzeichnung direkt am Bild (Art. 50 Abs. 4 KI-VO, Thomas 26.10.2026): kleiner Text in der Bildecke, beim ersten Anblick sichtbar */
.ki{position:absolute;right:10px;bottom:10px;z-index:2;margin:0;padding:3px 9px;border-radius:999px;background:rgba(10,10,12,.78);color:#fff;font:inherit;font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.02em;pointer-events:none}
.x-bild.ki-fig{position:relative;margin:0}
.x-bild.ki-fig picture{display:block}
.lp-video{position:relative}
.sb .ki-hero{top:calc(var(--kz) + 10px);bottom:auto;right:12px}

.karte{position:relative}
.ki-karte{top:10px;right:10px;bottom:auto}