/*
  SwissEntry Landingpage -- Komponenten-CSS, nur fuer Pages/Landing.razor und Layout/LandingLayout.razor.
  Jede Regel steht unter .lp: dieses Blatt laedt in der SPA auf jeder Route, und ohne die
  .lp-Wurzel aus LandingLayout wirkt keine Regel -- Wizard, Portal und Rechtsseiten bleiben unberuehrt.
  Bruchstellen 700px / 1000px (mobil max-width:699px). Konsumiert nur var(--token) aus tokens.css.
  Die Handlungsleiste schaltet ueber das Attribut data-sichtbar statt einer Klasse: Blazor rendert
  das Attribut nie und setzt es deshalb auch nie zurueck (siehe wwwroot/js/handlungsleiste.js).
  Kein scroll-behavior:smooth -- den Sprung zum Anker uebernimmt anker-sprung.js.
*/
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
.lp{margin:0;font-family:var(--sans);font-size:var(--fs-17);line-height:var(--lh-160);color:var(--text);background:var(--weiss);overflow-x:hidden}
/* tokens-ergaenzung.css laedt nach tokens.css und belegt --space-2/4/6/8/10/12 mit der Indexskala
   (8..64px); diese Seite meint die Pixelwerte (2..12px). Zurueckgesetzt wird NUR fuer main, Fuss und
   Handlungsleiste -- nicht auf .lp selbst und nicht im Kopf: Kopf.razor (se-*-Klassen aus
   swissentry.css) und alles ausserhalb der Landingpage rechnen weiter mit der Indexskala. Das
   Anfrageformular stellt die Indexskala fuer sich wieder her (siehe ".lp .anfrage-formular"). */
.lp main,.lp .fuss,.lp .handlungsleiste{--space-2:2px;--space-4:4px;--space-6:6px;--space-8:8px;--space-10:10px;--space-12:12px}
.lp img{display:block;max-width:100%;height:auto}
/* swissentry.css (global) setzt "img, svg {max-width:100%}"; die Pfeil- und Haken-SVGs dieser Seite haben feste
   Abmessungen und duerfen in einem schmalen Knopf nicht gestaucht werden. */
.lp main svg,.lp .fuss svg,.lp .handlungsleiste svg{max-width:none}
.lp h1,.lp h2,.lp h3,.lp p,.lp ul,.lp ol,.lp figure{margin:0}
.lp ul,.lp ol{padding:0;list-style:none}
.lp a{color:inherit}
.lp :focus-visible{outline:var(--border-3) solid var(--rot);outline-offset:var(--space-2)}
.lp .auf-navy :focus-visible,.lp .hero :focus-visible{outline-color:var(--weiss)}
.lp .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lp .wrap{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter-mobil)}
@media (min-width:700px){
  .lp .wrap{padding-inline:var(--gutter-tablet)}
}
@media (min-width:1000px){
  .lp .wrap{padding-inline:var(--gutter-desktop)}
}
.lp .display{font-weight:var(--fw-bold);font-variation-settings:'wdth' var(--wdth-normal);text-transform:uppercase;letter-spacing:var(--ls-display)}
.lp .utility{font-weight:var(--fw-bold);font-variation-settings:'wdth' var(--wdth-signage);font-variant-numeric:tabular-nums}
.lp .eyebrow{display:flex;align-items:center;gap:var(--space-12);font-size:var(--fs-12);line-height:var(--lh-100);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:var(--fw-bold);font-variation-settings:'wdth' var(--wdth-signage);color:var(--navy-700)}
.lp .eyebrow::before{content:"";width:var(--akzentbalken);height:var(--akzentbalken-hoehe);background:var(--rot);flex:none}
.lp .auf-navy .eyebrow,.lp .hero .eyebrow,.lp .schluss .eyebrow{color:var(--on-navy)}
.lp h2.display{font-size:var(--fs-h2);line-height:var(--lh-112)}
.lp h2.display .rot{display:block;color:var(--rot)}
.lp .knopf{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-16);min-height:var(--knopf-hoehe);padding:var(--space-12) var(--space-22);background:var(--rot);color:var(--weiss);font:inherit;font-weight:var(--fw-bold);font-size:var(--fs-16);text-decoration:none;text-align:left;border-radius:var(--radius-0);border:0}
.lp .knopf:hover{background:var(--rot-hover)}
.lp .knopf svg{flex:none}
.lp .knopf-voll{display:flex;width:100%}
@media (min-width:700px){
  .lp .knopf-voll{display:inline-flex;width:auto}
}
.lp .hero{position:relative;display:flex;align-items:flex-end;min-height:max(var(--hero-min-mobil),var(--hero-vh-mobil));background:var(--navy-900);color:var(--on-navy);overflow:hidden;isolation:isolate}
@media (min-width:700px){
  .lp .hero{min-height:max(var(--hero-min-tablet),var(--hero-vh-tablet))}
}
.lp .medium{position:absolute;inset:0;z-index:-2;background:var(--navy-700);overflow:hidden}
.lp .medium img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp .hero .medium img{object-position:var(--fokus-hero-mobil);top:auto;bottom:0;height:var(--hero-bild-hoehe-mobil)}
@media (min-width:700px){
  .lp .hero .medium img{object-position:var(--fokus-hero-tablet);top:0;bottom:auto;height:100%}
}
.lp .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--overlay-hero-mobil)}
@media (min-width:1000px){
  .lp .hero::before{background:var(--overlay-hero-desktop)}
}
.lp .hero-text{padding-top:var(--hero-text-oben);padding-bottom:var(--hero-text-unten-mobil)}
@media (min-width:1000px){
  .lp .hero-text{max-width:var(--mass-hero-text);padding-bottom:var(--hero-text-unten-desktop);margin-left:0}
  .lp .hero .wrap{display:block}
}
.lp .hero h1{font-size:var(--fs-h1);line-height:var(--lh-106);margin:var(--space-20) 0 var(--space-16)}
.lp .hero h1 span{display:block}
@media (min-width:1000px){
  .lp .hero h1{font-size:var(--fs-h1-desktop)}
}
.lp .hero-sub{font-size:var(--fs-17);line-height:var(--lh-150);color:var(--on-navy);margin-bottom:var(--space-24);max-width:var(--mass-hero-sub)}
.lp .hero-klein{margin-top:var(--space-12);font-size:var(--fs-14);color:var(--on-navy-2)}
.lp .ki-hinweis{position:absolute;left:var(--gutter-mobil);bottom:var(--space-8);margin:0;font-size:var(--fs-12);line-height:var(--lh-120);color:var(--on-navy-2)}
@media (min-width:700px){
  .lp .ki-hinweis{left:var(--gutter-tablet)}
}
@media (min-width:1000px){
  .lp .ki-hinweis{left:var(--gutter-desktop)}
}
.lp .hero-text{margin-bottom:var(--space-12)}
.lp .hinweisband{background:var(--navy-900);color:var(--on-navy-2);font-size:var(--fs-15)}
.lp .hinweisband p{padding-block:var(--space-14);line-height:var(--lh-140)}
.lp .hinweisband strong{color:var(--on-navy);font-weight:var(--fw-semi)}
.lp .satz{background:var(--grau-50);padding-block:var(--sektion-mobil)}
@media (min-width:1000px){
  .lp .satz{padding-block:var(--sektion-satz-desktop)}
}
.lp .satz p{font-size:var(--fs-satz);line-height:var(--lh-120);font-weight:var(--fw-semi);max-width:var(--mass-satz);letter-spacing:var(--ls-satz)}
@media (min-width:700px){
  .lp .satz p{max-width:var(--mass-satz-tablet)}
}
.lp .weg{background:var(--blau-50)}
.lp .weg-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.lp .weg-bild{position:relative;isolation:isolate;aspect-ratio:var(--ratio-weg-mobil);background:var(--blau-50)}
.lp .weg-bild .medium{background:var(--linie)}
.lp .weg-bild img{object-position:var(--fokus-weg-mobil)}
.lp .weg-bild .ki-hinweis{left:var(--gutter-mobil);color:var(--weiss);text-shadow:var(--text-schatten-foto);z-index:2}
.lp .weg-text{padding:var(--space-56) var(--space-20) var(--space-64)}
@media (min-width:700px){
  .lp .weg-text{padding:var(--space-72) var(--space-32) var(--space-80)}
  .lp .weg-bild{aspect-ratio:var(--ratio-weg-tablet)}
}
@media (min-width:1000px){
  .lp .weg-grid{grid-template-columns:var(--spalten-weg);min-height:var(--weg-min-desktop)}
  .lp .weg-bild{aspect-ratio:auto}
  .lp .weg-bild img{object-position:var(--fokus-weg-desktop)}
  .lp .weg-text{padding:var(--space-112) var(--space-48) var(--space-112) var(--space-64);max-width:var(--mass-weg-text)}
}
.lp .weg-text h2{margin:var(--space-18) 0 var(--space-12)}
.lp .weg-lead{color:var(--text-2);max-width:var(--mass-weg-lead);margin-bottom:var(--space-40)}
.lp .rail{position:relative}
.lp .etappe{position:relative;display:grid;grid-template-columns:var(--etappe-spalte) minmax(0,1fr);column-gap:var(--space-12);padding-bottom:var(--space-20)}
.lp .etappe::before{content:"";position:absolute;left:var(--etappe-linie-links);top:0;bottom:0;width:var(--etappe-linie-breite);background:var(--linie)}
.lp .etappe:first-child::before{top:var(--etappe-linie-start)}
.lp .etappe:last-child{padding-bottom:0}
.lp .etappe:last-child::before{bottom:auto;height:var(--etappe-linie-start)}
.lp .etappe-nummer{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:var(--etappe-nummer);height:var(--etappe-nummer);margin:var(--etappe-nummer-versatz-oben) 0 0 var(--etappe-nummer-versatz-links);border-radius:var(--radius-voll);background:var(--navy-700);color:var(--weiss);font-size:var(--fs-16);line-height:var(--lh-100)}
.lp .etappe-nummer.rot{background:var(--rot)}
.lp .tafel{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);align-items:center;padding:var(--space-14) calc(var(--tip) + var(--space-14)) var(--space-14) var(--space-16);background:var(--weiss);clip-path:polygon(0 0,calc(100% - var(--tip)) 0,100% 50%,calc(100% - var(--tip)) 100%,0 100%);min-height:var(--tafel-min-hoehe)}
.lp .tafel-spitze{position:absolute;top:0;right:0;bottom:0;width:var(--tip);background:var(--linie)}
.lp .tafel-ziel{font-size:var(--fs-20);line-height:var(--lh-125);overflow-wrap:anywhere;color:var(--navy-700)}
.lp .tafel-rest{font-size:var(--fs-19);line-height:var(--lh-125);color:var(--navy-700);text-align:right;justify-self:end}
@media (min-width:700px){
  .lp .tafel{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-16)}
  .lp .tafel-ziel{white-space:nowrap;overflow-wrap:normal}
}
.lp .tafel.offen{background:var(--weiss)}
.lp .tafel.arbeit{box-shadow:inset var(--border-3) 0 0 var(--navy-700)}
.lp .tafel.arbeit .tafel-spitze{background:var(--navy-700)}
.lp .tafel.erledigt .tafel-spitze{background:var(--rot)}
.lp .tafel.erledigt .tafel-rest{color:var(--text-2)}
.lp .etappe-satz{margin-top:var(--space-10);font-size:var(--fs-15);line-height:var(--lh-150);color:var(--text-2);padding-right:var(--space-8)}
.lp .haken{width:var(--haken);height:var(--haken)}
.lp .bildband{position:relative;display:flex;align-items:flex-end;min-height:min(var(--bildband-min-mobil),var(--bildband-vh-mobil));background:var(--navy-900);color:var(--on-navy);isolation:isolate;overflow:hidden}
@media (min-width:1000px){
  .lp .bildband{min-height:var(--bildband-min-desktop)}
}
.lp .bildband .medium img{object-position:var(--fokus-bildband-mobil)}
@media (min-width:700px){
  .lp .bildband .medium img{object-position:var(--fokus-bildband-tablet)}
}
.lp .bildband::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--overlay-bildband)}
.lp .bildband::after{content:"";position:absolute;inset:auto 0 0 0;height:var(--bildband-fuss-hoehe);z-index:-1;background:var(--overlay-bildband-fuss)}
.lp .bildband-satz{padding-block:var(--space-64) var(--space-56);max-width:var(--mass-bildband);font-size:var(--fs-bildband);line-height:var(--lh-110);font-weight:var(--fw-bold);letter-spacing:var(--ls-satz)}
.lp .bildband-satz span{display:block}
@media (min-width:700px){
  .lp .bildband-satz{max-width:var(--mass-bildband-tablet);padding-block:var(--space-96) var(--space-72)}
}
.lp .bildband .ki-hinweis{bottom:var(--space-10)}
.lp .leistung{padding-block:var(--sektion-mobil);background:var(--weiss)}
@media (min-width:1000px){
  .lp .leistung{padding-block:var(--sektion-leistung-desktop)}
}
.lp .leistung .spalte{max-width:var(--mass-leistung)}
.lp .leistung h2{margin:var(--space-18) 0 var(--space-28)}
.lp .leistung p+p{margin-top:var(--space-20)}
.lp .leistung p{font-size:var(--fs-19);line-height:var(--lh-160)}
.lp .leistung strong{font-weight:var(--fw-bold);color:var(--navy-700)}
.lp .kategorien{background:var(--grau-50);padding-block:var(--sektion-mobil)}
@media (min-width:1000px){
  .lp .kategorien{padding-block:var(--sektion-desktop)}
}
.lp .kategorien h2{margin:var(--space-18) 0 var(--space-16)}
.lp .sektion-lead{color:var(--text-2);max-width:var(--mass-lead);margin-bottom:var(--space-36)}
.lp .kat-liste{display:grid;grid-template-columns:minmax(0,1fr);border-top:var(--border-3) solid var(--navy-700);background:var(--weiss)}
@media (min-width:700px){
  .lp .kat-liste{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.lp .kat{display:grid;grid-template-columns:var(--kat-icon) minmax(0,1fr);column-gap:var(--space-16);padding:var(--space-24) var(--space-20);border-bottom:var(--border-1) solid var(--linie)}
@media (min-width:700px){
  .lp .kat{grid-template-columns:minmax(0,1fr);row-gap:var(--space-16);padding:var(--space-32) var(--space-24);border-bottom:0;border-right:var(--border-1) solid var(--linie)}
  .lp .kat:last-child{border-right:0}
}
.lp .kat-icon{display:flex;align-items:center;justify-content:center;width:var(--kat-icon);height:var(--kat-icon);border:var(--border-1-5) solid var(--navy-700);border-radius:var(--radius-voll);color:var(--navy-700)}
.lp .kat-icon svg{width:var(--kat-icon-glyph);height:var(--kat-icon-glyph)}
.lp .kat h3{font-size:var(--fs-20);line-height:var(--lh-125);font-weight:var(--fw-bold);color:var(--navy-700);margin-bottom:var(--space-8)}
.lp .kat p{font-size:var(--fs-15);line-height:var(--lh-155);color:var(--text-2)}
.lp .kat-fussnote{margin-top:var(--space-24);font-size:var(--fs-16);color:var(--navy-700);max-width:var(--mass-fussnote)}
.lp .preise{background:var(--weiss);padding-block:var(--sektion-mobil)}
@media (min-width:1000px){
  .lp .preise{padding-block:var(--sektion-desktop)}
}
.lp .preise h2{margin:var(--space-18) 0 var(--space-16)}
.lp .preis-liste{display:grid;grid-template-columns:minmax(0,1fr);border-top:var(--border-3) solid var(--navy-700);margin-bottom:var(--space-32)}
@media (min-width:1000px){
  .lp .preis-liste{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.lp .preis{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-28) var(--space-20) var(--space-32);border-bottom:var(--border-1) solid var(--linie)}
@media (min-width:700px){
  .lp .preis{padding:var(--space-36) var(--space-28) var(--space-40)}
}
@media (min-width:1000px){
  .lp .preis{border-bottom:0;border-right:var(--border-1) solid var(--linie)}
  .lp .preis:last-child{border-right:0}
}
.lp .preis.betont{background:var(--blau-50);box-shadow:inset 0 var(--border-3) 0 var(--navy-700);margin-top:calc(-1 * var(--border-3))}
.lp .preis h3{font-size:var(--fs-20);line-height:var(--lh-125);font-weight:var(--fw-bold);color:var(--navy-700)}
.lp .preis-betrag{font-size:var(--fs-preis);line-height:var(--lh-105);color:var(--navy-700);display:flex;align-items:baseline;gap:var(--space-8);flex-wrap:wrap}
.lp .preis-betrag small{font-size:var(--fs-16);font-weight:var(--fw-semi);color:var(--text-2)}
.lp .preis p:last-child{font-size:var(--fs-16);line-height:var(--lh-155);color:var(--text-2);max-width:var(--mass-preis-text)}
.lp .fragen{background:var(--grau-50);padding-block:var(--sektion-mobil)}
@media (min-width:1000px){
  .lp .fragen{padding-block:var(--sektion-desktop)}
  .lp .fragen .wrap{display:grid;grid-template-columns:var(--spalten-fragen);gap:var(--space-64)}
}
.lp .fragen h2{margin:var(--space-18) 0 var(--space-16)}
.lp .fragen .sektion-lead{margin-bottom:0}
.lp .frage summary h3{font-size:inherit;line-height:inherit;font-weight:inherit;margin:0;overflow-wrap:anywhere}
.lp .frage{border-top:var(--border-1) solid var(--linie)}
.lp .frage:last-child{border-bottom:var(--border-1) solid var(--linie)}
.lp .frage summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);min-height:var(--tafel-min-hoehe);padding:var(--space-12) 0;cursor:pointer;list-style:none;font-weight:var(--fw-bold);font-size:var(--fs-19);line-height:var(--lh-130);color:var(--navy-700)}
.lp .frage summary::-webkit-details-marker{display:none}
.lp .frage summary::after{content:"+";flex:none;display:flex;align-items:center;justify-content:center;width:var(--touch-min);height:var(--touch-min);font-size:var(--fs-28);font-weight:var(--fw-regular);line-height:var(--lh-100);color:var(--rot)}
.lp .frage[open] summary::after{content:"\2212"}
.lp .frage p{padding:0 var(--einzug-faq) var(--space-24) 0;color:var(--text-2);max-width:var(--mass-antwort)}
.lp .kontakt{background:var(--navy-900);color:var(--on-navy);padding-block:var(--sektion-mobil)}
@media (min-width:1000px){
  .lp .kontakt{padding-block:var(--sektion-desktop)}
}
.lp .kontakt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-40)}
@media (min-width:1000px){
  .lp .kontakt-grid{grid-template-columns:var(--spalten-kontakt);gap:var(--space-72);align-items:start}
}
.lp .kontakt h2{margin:var(--space-18) 0 var(--space-16);color:var(--on-navy)}
.lp .kontakt h2.display .rot{color:var(--on-navy-2)}
.lp .kontakt .sektion-lead{color:var(--on-navy-2)}
.lp .kontakt-fussnote{margin:0 0 var(--space-28);font-size:var(--fs-15);color:var(--on-navy-2);max-width:var(--mass-kontakt-fussnote)}
/* Das Anfrageformular ist dieselbe Komponente wie im Portal (Components/Anfrageformular.razor, ein
   DOM fuer beide Modi) und rechnet mit der Indexskala aus tokens-ergaenzung.css (--space-4 = 16px).
   "main" oben belegt --space-2..12 fuer die Landingpage mit Pixelwerten (--space-4 = 4px) -- ohne
   diese Rueckstellung schrumpften alle Abstaende des Formulars auf ein Viertel. Der Fokusabstand
   bleibt beim Wert der Landingpage, sonst stuende der Ring 8px neben dem Feld. */
.lp .anfrage-formular{--space-2:8px;--space-4:16px;--space-6:24px;--space-8:32px;--space-10:48px;--space-12:64px;max-width:var(--mass-formular)}
.lp .anfrage-formular :focus-visible{outline-offset:2px}
.lp .kontakt-bild{position:relative;display:none;isolation:isolate;aspect-ratio:var(--ratio-kontakt);background:var(--navy-700);overflow:hidden}
@media (min-width:1000px){
  .lp .kontakt-bild{display:block}
}
.lp .kontakt-bild .medium{inset:0}
.lp .kontakt-bild img{object-position:var(--fokus-kontakt)}
.lp .kontakt-bild .ki-hinweis{left:var(--space-12);z-index:2;text-shadow:var(--text-schatten-foto);color:var(--weiss)}
/* KI-Hinweis auf Weg-/Kontakt-Foto: diese beiden Fotos liegen ohne Overlay, deshalb eine
   navy-900-Hinterlegung (7,27,56) mit Deckkraft .60 (Leitlinie fuer Text auf Foto: >= .55).
   Worst-Case (weisser Bildpunkt dahinter): Weiss auf mix(.60 navy, .40 weiss) = 4,6:1 WCAG AA; auf dunklem Foto hoeher. */
.lp .weg-bild .ki-hinweis,.lp .kontakt-bild .ki-hinweis{background:rgba(7,27,56,.60);padding:2px 6px}
.lp .schluss{position:relative;border-top:var(--border-1) solid var(--linie-auf-navy);background:var(--navy-900);color:var(--on-navy);padding-block:var(--schluss-oben-mobil) var(--schluss-unten-mobil);isolation:isolate;overflow:hidden}
@media (min-width:1000px){
  .lp .schluss{padding-block:var(--schluss-oben-desktop) var(--schluss-unten-desktop)}
}
.lp .schluss .medium{background:var(--navy-900)}
.lp .schluss .medium img{object-position:var(--fokus-schluss)}
.lp .schluss::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--overlay-schluss)}
.lp .schluss h2{margin:var(--space-18) 0 var(--space-28);color:var(--on-navy);max-width:var(--mass-schluss-h2)}
.lp .schluss .tafel{max-width:var(--mass-schluss-tafel);box-shadow:none;margin-bottom:var(--space-32)}
.lp .schluss .tafel-ziel{font-size:var(--fs-26)}
.lp .schluss .tafel-rest{font-size:var(--fs-19)}
.lp .schluss .tafel{padding-left:var(--space-16)}
.lp .schluss-cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.lp .schluss-cta .knopf-voll{max-width:none}
.lp .fuss{background:var(--weiss);border-top:var(--border-1) solid var(--linie);padding-block:var(--space-32) var(--space-40);font-size:var(--fs-15);color:var(--text-2)}
.lp .fuss-in{display:flex;flex-wrap:wrap;gap:var(--space-12) var(--space-32);align-items:center;justify-content:space-between}
.lp .fuss nav{display:flex;flex-wrap:wrap;gap:0 var(--space-8)}
.lp .fuss nav a{display:inline-flex;align-items:center;min-height:var(--touch-min);padding:0 var(--space-8) 0 0;color:var(--navy-700);font-weight:var(--fw-semi)}
.lp .handlungsleiste{display:none}
@media (max-width:699px){
  .lp{padding-bottom:var(--handlungsleiste-hoehe)}
  /* Verborgen heisst hier nicht nur "aus dem Bild geschoben": visibility:hidden nimmt die Leiste
     auch aus der Tab-Reihenfolge und aus dem Vorlesebaum -- sonst landete die Tastatur auf einem
     Link, den niemand sieht. visibility wird mit animiert: ein diskreter Wert bleibt waehrend des
     Uebergangs "visible", die Leiste gleitet also sichtbar hinaus und ist erst danach weg. */
  .lp .handlungsleiste{display:block;position:fixed;inset:auto 0 0 0;z-index:20;padding:var(--space-12) var(--space-20);background:var(--weiss);border-top:var(--border-1) solid var(--linie);visibility:hidden;transform:translateY(var(--handlungsleiste-versatz));transition:transform var(--dauer-zustand),visibility var(--dauer-zustand)}
  .lp .handlungsleiste[data-sichtbar]{visibility:visible;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .lp *{transition-duration:var(--dauer-reduziert)!important;scroll-behavior:auto!important}
}