/* ============ UNTERSEITE NFC / ROEMA WELCOME (Umbau 31.10.2026, Auftrag Inhaber Abschnitt 11) ============
   Nur für nfc.html (body.sn-seite). Gleiche Sprache wie die neue Startseite (css/start.css): Creme und Dunkelblau,
   Orange nur als feine Linie und Akzent, Cinzel in Versalien für Titel, Cormorant kursiv für Leitsätze, Inter im
   Fließtext, schräge Bildflächen mit runden Ecken und überlappende cremefarbene Karten.
   Bewegung nur über transform und opacity; bei „Bewegung reduzieren“ steht alles still, ohne Skript ist alles sichtbar. */

body.sn-seite{
  --sn-creme:#F1EEE6;
  --sn-creme-2:#E8E3D7;
  --sn-navy:#172C50;
  --sn-nacht:#0c1830;
  --sn-orange:#E87536;
  --sn-orange-h:#ef8a50;
  --sn-text:#2b3852;
  --sn-leise:#4a5568;
  --sn-linie:rgba(23,44,80,.18);
  --sn-titel:'Cinzel','Cormorant Garamond',Georgia,serif;
  --sn-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sn-kurve:cubic-bezier(.2,.7,.2,1);
  --sn-schatten:0 24px 48px -26px rgba(23,44,80,.45);
  background:var(--sn-creme);color:var(--sn-navy);overflow-x:clip}
body.sn-seite main.pl-solo{background:transparent;color:var(--sn-navy)}
body.sn-seite .lp-krume{color:var(--sn-leise)}
body.sn-seite .lp-krume a{color:var(--sn-navy)}
body.sn-seite .lp-panel.sn{position:relative}

/* gemeinsame Bausteine: schräge Bildfläche und überlappende Karte (wie .st-bild / .st-karte der Startseite) */
.sn-schraeg{--schief:-7deg;--zurueck:7deg;position:relative;overflow:hidden;border-radius:22px;transform:skewX(var(--schief));
  background:var(--sn-creme-2);box-shadow:var(--sn-schatten)}
.sn-schraeg > video,.sn-schraeg > img{position:absolute;top:0;left:-14%;width:128%;max-width:none;height:100%;object-fit:cover;
  transform:skewX(var(--zurueck));display:block;border-radius:0}
.sn-karte{position:absolute;z-index:2;--schief:-7deg;--zurueck:7deg;transform:skewX(var(--schief));background:var(--sn-creme);
  border-radius:16px;box-shadow:0 18px 40px -22px rgba(23,44,80,.5),0 1px 0 rgba(255,255,255,.7) inset;margin:0}
.sn-karte__in{display:block;transform:skewX(var(--zurueck));padding:clamp(16px,1.8vw,26px) clamp(18px,2.2vw,30px)}
.sn-karte__in::before{content:"";display:block;width:34px;height:2px;margin-bottom:12px;background:var(--sn-orange)}

/* ── I. Titel ───────────────────────────────────────────────────────────────── */
.sn-held{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:center;gap:clamp(36px,6vw,96px);
  margin:clamp(8px,2vw,24px) 0 clamp(90px,11vw,160px)}
body.sn-seite .sn-held p.sn-kenn{margin:0 0 18px;display:flex;align-items:center;gap:14px;font-family:var(--sn-titel);font-size:12px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--sn-navy)}
.sn-kenn::before{content:"";width:34px;height:2px;background:var(--sn-orange)}
body.sn-seite .sn-held h1{position:static;display:block;min-height:0;margin:0;padding:0;border-radius:0;overflow:visible;background:none;
  text-align:left;text-shadow:none;font-family:var(--sn-titel);font-weight:600;font-size:clamp(30px,.8rem + 2.7vw,60px);line-height:1.08;
  letter-spacing:.05em;text-transform:uppercase;color:var(--sn-navy);text-wrap:balance}
body.sn-seite .sn-held h1::before,body.sn-seite .sn-held h1::after{content:none}
.sn-held h1 .nw{white-space:nowrap}
body.sn-seite .sn-held p.sn-leit{margin:clamp(18px,2.4vw,30px) 0 0;max-width:20em;font-family:var(--sn-serif);font-style:italic;font-weight:500;
  font-size:clamp(23px,1rem + 1.2vw,36px);line-height:1.2;color:var(--sn-text)}
.sn-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:clamp(26px,3vw,40px);
  padding:12px 24px;border:0;border-radius:6px;background:var(--sn-orange);color:var(--sn-nacht);font:600 15px/1.2 Inter,system-ui,sans-serif;
  letter-spacing:.01em;cursor:pointer;transition:background-color .2s ease,transform .2s var(--sn-kurve)}
.sn-knopf:hover{background:var(--sn-orange-h)}
.sn-knopf:active{transform:translateY(1px)}
.sn-knopf:focus-visible{outline:2px solid var(--sn-navy);outline-offset:4px}

body.sn-seite .pl-solo .sn-held__bild{position:relative;margin:0;border:0;padding:0 0 clamp(40px,5vw,70px);display:block;text-align:left}
.sn-held__bild .sn-schraeg{width:74%;margin-left:auto;margin-right:4%;aspect-ratio:4/5}
body.sn-seite .sn-held__bild .nfc-echt-v{width:128%;border:0;border-radius:0;box-shadow:none;aspect-ratio:auto;background:var(--sn-creme-2)}
.sn-held__bild .sn-karte{left:0;bottom:0;width:min(58%,360px)}
body.sn-seite .sn-held__bild .nfc-echt-t{display:block;min-height:0;padding:0}
body.sn-seite .sn-held__bild .nfc-echt-p{display:block;margin:0;max-width:none;font-family:var(--sn-serif);font-style:italic;font-weight:500;
  font-size:clamp(19px,.9rem + .6vw,24px);line-height:1.3;color:var(--sn-navy);letter-spacing:0;text-wrap:balance}

/* ── II. Verbindung Aufsteller, Handy, Welcome Site ─────────────────────────── */
.sn-weg{display:grid;grid-template-columns:minmax(0,220px) minmax(60px,1fr) minmax(0,240px);align-items:center;
  gap:clamp(12px,3vw,40px);max-width:860px;margin:0 auto clamp(100px,12vw,170px)}
.sn-weg__glied{margin:0;text-align:center}
.sn-weg__glied figcaption{margin-top:18px;font-family:var(--sn-titel);font-weight:600;font-size:clamp(12px,.7rem + .3vw,15px);
  letter-spacing:.18em;text-transform:uppercase;color:var(--sn-navy)}
.sn-ziffer{color:var(--sn-orange);margin-right:.35em}
.sn-weg__glied--steller img{display:block;width:auto;max-width:100%;height:clamp(200px,30vw,380px);margin:0 auto;object-fit:contain;
  filter:drop-shadow(0 22px 26px rgba(23,44,80,.28))}
.sn-handy{position:relative;width:100%;max-width:240px;margin:0 auto;aspect-ratio:9/19.2;padding:3.2%;border-radius:15%/7%;
  background:#0b0c0f;box-shadow:0 0 0 1px #3d4452,var(--sn-schatten)}
.sn-handy img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:12%/5.6%}
.sn-weg__linie{position:relative;height:14px;overflow:hidden}
.sn-weg__linie::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--sn-navy);opacity:.45}
.sn-weg__linie::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  border:1px solid var(--sn-navy);background:var(--sn-creme)}
.sn-weg__punkt{position:absolute;inset:0;transform:translateX(-50%)}
.sn-weg__punkt::before{content:"";position:absolute;right:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--sn-orange)}
@media(prefers-reduced-motion:no-preference){
  .sn-weg__punkt{animation:snWeg 3.6s var(--sn-kurve) infinite}
}
@keyframes snWeg{
  0%{transform:translateX(-100%);opacity:0}
  12%{opacity:1}
  80%{opacity:1}
  100%{transform:translateX(-4px);opacity:0}
}

/* ── III. Die Karte (#karte-videos, Grundregeln in css/karte-video.css) ──────── */
body.sn-seite .kv{max-width:640px;margin:0 auto clamp(100px,12vw,170px);padding:0}
body.sn-seite .kv__h,body.sn-seite .sn-refs .lp-refs-h{margin:0 0 14px;font-family:var(--sn-titel);font-weight:600;
  font-size:clamp(22px,1rem + 1.3vw,36px);line-height:1.15;letter-spacing:.12em;text-transform:uppercase;color:var(--sn-navy);text-align:center}
body.sn-seite .kv__h::after,body.sn-seite .sn-refs .lp-refs-h::after{content:"";display:block;width:56px;height:2px;margin:16px auto 0;background:var(--sn-orange)}
body.sn-seite .kv__h{padding-bottom:0;border:0}
body.sn-seite .kv__p{margin:0 auto 30px;max-width:30em;color:var(--sn-text)}
body.sn-seite .kv__reihe{gap:clamp(16px,3vw,32px)}
body.sn-seite .kv__f{flex-basis:230px}
body.sn-seite .kv__b{border-radius:20px;background:var(--sn-navy);box-shadow:var(--sn-schatten);transition:transform .5s var(--sn-kurve)}
body.sn-seite .kv__f:nth-child(2) .kv__b{transform:translateY(clamp(16px,3vw,40px))}
body.sn-seite .kv__f:nth-child(2) figcaption{transform:translateY(clamp(16px,3vw,40px))}
body.sn-seite .kv__f figcaption{margin-top:14px;font-family:var(--sn-titel);font-weight:600;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sn-navy)}

/* ── IV. Vorteile: dunkelblaues Band über die ganze Breite ──────────────────── */
body.sn-seite .pl-solo .nfc-sinn.sn-vorteile{position:relative;margin:0 0 clamp(100px,12vw,170px);padding:clamp(64px,8vw,110px) 0;
  border:0;color:var(--sn-creme);isolation:isolate}
body.sn-seite .sn-vorteile::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:var(--sn-navy)}
body.sn-seite .sn-vorteile::after{content:"";position:absolute;z-index:-1;left:0;top:clamp(64px,8vw,110px);width:56px;height:2px;
  margin-top:-18px;background:var(--sn-orange)}
body.sn-seite .pl-solo .sn-vorteile .nfc-sinn-k{margin:0 0 clamp(28px,4vw,48px);font-family:var(--sn-titel);font-weight:600;
  font-size:clamp(22px,1rem + 1.3vw,36px);letter-spacing:.12em;line-height:1.15;color:var(--sn-creme)!important}
body.sn-seite .pl-solo .sn-vorteile .nfc-sinn-l{gap:clamp(22px,3vw,40px) clamp(18px,2.4vw,34px)}
body.sn-seite .pl-solo .sn-vorteile .nfc-sinn-l li{padding:18px 0 0!important;border-top:1px solid rgba(241,238,230,.22)!important}
body.sn-seite .pl-solo .sn-vorteile .nfc-sinn-l li::before{display:block;margin:0 0 10px;font-family:var(--sn-titel);font-size:13px;
  letter-spacing:.14em;color:var(--sn-orange)!important}
body.sn-seite .pl-solo .sn-vorteile .nfc-sinn-l b{display:block;font-family:var(--sn-serif);font-weight:500;
  font-size:clamp(20px,.9rem + .7vw,26px);line-height:1.2;color:var(--sn-creme)}
body.sn-seite .pl-solo .sn-vorteile .nfc-sinn-l span{margin-top:8px;font-size:15px;line-height:1.55;color:rgba(241,238,230,.82)}

/* ── V. Echte Kundenbeispiele (eingebettete Welcome Sites) ──────────────────── */
body.sn-seite .sn-refs{position:relative;margin:0 0 clamp(100px,12vw,170px);padding:0;isolation:isolate}
body.sn-seite .sn-refs::before{content:"";position:absolute;z-index:-1;left:50%;top:clamp(120px,14vw,190px);bottom:-30px;
  width:min(760px,92%);border-radius:28px;background:var(--sn-creme-2);transform:translateX(-50%) skewX(-7deg)}
body.sn-seite .sn-refs .lp-refs-h{margin-bottom:clamp(36px,5vw,64px)}
body.sn-seite .pl-solo .lp-vorschauen.sn-refs__reihe{display:grid;grid-template-columns:repeat(2,minmax(0,280px));justify-content:center;
  column-gap:clamp(18px,7vw,110px);row-gap:0;width:auto;margin:0;--p:auto}
body.sn-seite .pl-solo .sn-refs__reihe .lp-vorschau{grid-column:auto;grid-row:auto;margin:0;min-width:0}
body.sn-seite .pl-solo .sn-refs__reihe .lp-vorschau:nth-child(2){transform:translateY(clamp(20px,4vw,60px))}
body.sn-seite .pl-solo .sn-refs__reihe .lp-handy{width:100%;max-width:280px}
body.sn-seite .pl-solo .sn-refs__reihe .ref-slide-cap{display:block;min-height:0;margin:18px 0 0;padding:0;text-align:center;
  font-family:var(--sn-titel);font-weight:600;font-size:12.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--sn-navy)}

/* ── VI. Pflege-Video ───────────────────────────────────────────────────────── */
body.sn-seite .pl-solo .hs-clip{max-width:980px;margin:clamp(110px,13vw,190px) auto clamp(100px,12vw,170px)}
body.sn-seite .pl-solo .hs-clip figcaption{margin:0 0 22px;font-family:var(--sn-serif);font-style:italic;font-weight:500;
  font-size:clamp(23px,1rem + 1.1vw,34px);line-height:1.2;color:var(--sn-navy);text-align:center}
body.sn-seite .pl-solo .hs-clip-rahmen{border-radius:22px;overflow:hidden;box-shadow:var(--sn-schatten)}

/* ── VIII. Abo und Preis ────────────────────────────────────────────────────── */
body.sn-seite .pl-solo .lp-zusatz-h{margin:0 0 clamp(28px,4vw,48px);padding:0;border:0;font-family:var(--sn-titel);font-weight:600;
  font-size:clamp(22px,1rem + 1.3vw,36px);line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--sn-navy);text-wrap:balance}
body.sn-seite .pl-solo .lp-zusatz-h::after{content:"";display:block;width:56px;height:2px;margin-top:16px;background:var(--sn-orange)}
body.sn-seite .pl-solo .pk-tier .pk-h{font-family:var(--sn-serif);font-style:italic;font-weight:500;font-size:clamp(23px,1rem + 1vw,32px);
  color:var(--sn-navy);margin:0 0 18px}
body.sn-seite .pl-solo .lw-verbund .pk-feats{gap:12px clamp(20px,3vw,44px)}
body.sn-seite .pl-solo .lw-verbund .pk-feats li{color:var(--sn-text);line-height:1.55}
body.sn-seite .pl-solo .lw-verbund .pk-feats li strong{color:var(--sn-navy);font-weight:600}
body.sn-seite .pl-solo .lw-verbund .pk-feats li .li-mehr{color:var(--sn-leise)}
body.sn-seite .pl-solo .lw-verbund .pk-feats li::before{color:var(--sn-orange);border-color:var(--sn-orange)}
body.sn-seite .pl-solo .lw-verbund{padding:clamp(26px,3.4vw,44px) 0 0;border-top:1px solid var(--sn-linie)}
body.sn-seite .pl-solo .lwp-hinten{background:linear-gradient(180deg,#e4dfd2 0%,var(--sn-creme-2) 100%);border-color:var(--sn-linie)}
body.sn-seite .pl-solo .lwp .lwp-n{font-family:var(--sn-titel);font-weight:600;font-size:clamp(12px,1.4vw,17px);letter-spacing:.1em;text-transform:uppercase;color:var(--sn-navy)}
body.sn-seite .pl-solo .lwp-preis .lwz-betrag{font-family:var(--sn-serif);font-weight:500;color:var(--sn-navy)}
body.sn-seite .pl-solo .lwp-preis .from{font-family:Inter,system-ui,sans-serif;color:var(--sn-text)}
body.sn-seite .pl-solo .lwz-f{color:var(--sn-leise)}

body.sn-seite .pl-solo .pk-tiers.pk-tiers-single{margin-top:0}
body.sn-seite .pl-solo .pk-tiers-single .pk-tier{padding-top:0!important;margin-top:0}
body.sn-seite .pl-solo .lwp-vorn{background:var(--sn-creme);border-color:var(--sn-linie)}

/* Anfrage-Bereich unter dem Panel: auf dieser Seite in der Farbwelt der Startseite */
body.sn-seite main.pl-solo > .anfrage{border-top:1px solid var(--sn-linie)}
body.sn-seite main.pl-solo > .anfrage .anfrage-k{color:#a64b17}
body.sn-seite main.pl-solo > .anfrage .anfrage-h{font-family:var(--sn-titel);font-weight:600;font-size:clamp(24px,1rem + 1.4vw,38px);
  line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--sn-navy)}

/* ── Tablet und Handy ───────────────────────────────────────────────────────── */
@media(max-width:900px){
  .sn-held{grid-template-columns:1fr;gap:clamp(36px,8vw,56px)}
  .sn-held__bild .sn-schraeg{width:80%}
  .sn-held__bild .sn-karte{width:min(70%,340px)}
  body.sn-seite .pl-solo .sn-vorteile .nfc-sinn-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.sn-seite .pl-solo .sn-vorteile .nfc-sinn-l li,
  body.sn-seite .pl-solo .sn-vorteile .nfc-sinn-l li:nth-of-type(n+4){grid-column:auto}
}
@media(max-width:600px){
  .sn-schraeg,.sn-karte{--schief:-5deg;--zurueck:5deg}
  .sn-held__bild .sn-schraeg{width:84%}
  .sn-held__bild .sn-karte{width:78%}
  .sn-weg{grid-template-columns:minmax(0,96px) minmax(28px,1fr) minmax(0,150px);gap:10px}
  .sn-weg__glied--steller img{height:190px}
  .sn-weg__glied figcaption{font-size:11px;letter-spacing:.12em;margin-top:12px}
  body.sn-seite .pl-solo .sn-vorteile .nfc-sinn-l{grid-template-columns:1fr}
  body.sn-seite .pl-solo .lp-vorschauen.sn-refs__reihe{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  body.sn-seite .pl-solo .sn-refs__reihe .ref-slide-cap{font-size:10.5px;letter-spacing:.08em}
  body.sn-seite .sn-refs::before{width:96%}
  body.sn-seite .kv__f:nth-child(2) .kv__b,body.sn-seite .kv__f:nth-child(2) figcaption{transform:translateY(16px)}
}
@media(prefers-reduced-motion:reduce){
  .sn-knopf,body.sn-seite .kv__b{transition:none}
}

/* DESIGNSPRACHE §11: H1 so groß, wie „NFC-Aufsteller“ ungebrochen in die Spalte passt (Ausnahme zu §11 wegen langer Wörter, 31.10.2026) */
body.sn-seite .sn-held h1{font-size:clamp(30px,1rem + 3.2vw,62px)}

/* Design-Prüfer 31.10.2026 (DESIGNSPRACHE §11): Zwischenüberschriften mindestens 30 px am Handy und bis 48 px am Rechner, Fließtext höchstens 68 Zeichen breit, Abschnitte mit Luft oben und unten */
body.sn-seite .kv__h{font-size:clamp(30px,1.1rem + 2.2vw,48px)}
body.sn-seite .kv__p{max-width:min(30em,68ch)}
/* Ansage Inhaber 01.11.2026: das Titelvideo füllt seine Fläche ganz (style.css setzte height:auto, darunter blieb ein heller Streifen);
   „So sehen die Seiten aus“ mit den echten Welcome Sites steht an der Stelle der früheren Kartenvideos */
body.sn-seite .sn-held__bild .sn-schraeg > .nfc-echt-v{height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 50%}
body.sn-seite .sn-refs .lp-refs-h{text-align:center}
body.sn-seite .sn-refs__p{text-align:center;margin:0 auto 34px;max-width:30em}
/* Prüfung 01.11.2026 Teil 2: Titel ohne einzelnes „&“ in einer Zeile (Textspalte am Rechner breiter), Produktfoto und Titelbild
   kleiner (Dateien 1280 px, am Rechner sonst unscharf), Überschrift „Roema welcome“ näher an „Das ist im Abo drin“, die helle Fläche
   hinter den eingebetteten Welcome Sites beginnt unter dem Einleitungssatz und reicht unter beide Bildunterschriften,
   Fließtext am Handy 16 px. */
@media(min-width:900px){
  .sn-held{grid-template-columns:minmax(0,1.22fr) minmax(0,.88fr)}
}
body.sn-seite .pl-solo .lp-zusatz-h{margin-bottom:clamp(18px,2vw,26px)}
body.sn-seite .pl-solo .lw-verbund{padding-top:clamp(20px,2.2vw,30px)}
body.sn-seite .sn-refs::before{display:none}
body.sn-seite .pl-solo .lp-vorschauen.sn-refs__reihe{position:relative;isolation:isolate}
body.sn-seite .pl-solo .sn-refs__reihe::before{content:"";position:absolute;z-index:-1;left:50%;top:clamp(36px,6vw,90px);
  bottom:calc(-1 * clamp(20px,4vw,60px) - 36px);width:min(760px,96%);border-radius:28px;background:var(--sn-creme-2);
  transform:translateX(-50%) skewX(-7deg);pointer-events:none}
body.sn-seite .pl-solo .sn-refs__reihe .ref-slide-cap{text-wrap:balance}
@media(max-width:560px){
  body.sn-seite .pl-solo .sn-refs__reihe .ref-slide-cap{letter-spacing:.05em;line-height:1.45}
  body.sn-seite .pl-solo .sn-refs__reihe::before{transform:translateX(-50%) skewX(-4deg)}
  body.sn-seite .pl-solo .sn-vorteile .nfc-sinn-l span{font-size:16px}
  body.sn-seite .pl-solo .lw-verbund .pk-feats li{font-size:15.5px}
}

/* 01.11.2026 (Ansage Inhaber, logische Reihenfolge): Überschrift „So funktioniert es“ über der Verbindung
   Aufsteller › Welcome Site, die jetzt unter den Vorteilen steht */
body.sn-seite .pl-solo .sn-weg-h{text-align:center}
body.sn-seite .pl-solo .sn-weg-h::after{margin-left:auto;margin-right:auto}

/* 02.11.2026 (Ansage Inhaber: „die Welcome Sites zum Ausprobieren spinnen rum, man kann gar nicht testen“).
   Gemessen: das Fenster blieb live unsichtbar und mit pointer-events:none gesperrt (Handschlag in js/demo.js verworfen),
   dazu ein auf 69 % verkleinertes Fenster (transform:scale), die zweite Karte versetzt und eine schräge Fläche dahinter.
   Jetzt: beide Rahmen gerade und ruhig nebeneinander, so groß wie ein echtes Handy, soweit der Bildschirm es zulässt
   (Höhe passt ganz ins Fenster); das eingebettete Fenster ohne transform in seiner echten Breite, so tippt und
   scrollt es sich wie am Telefon. Am Handy untereinander, mit Rand links und rechts zum Weiterscrollen der Seite. */
body.sn-seite .pl-solo .sn-refs__reihe::before{display:none}
body.sn-seite .pl-solo .lp-vorschauen.sn-refs__reihe{--sn-handy:min(372px,calc((100svh - 100px) * 9 / 19.2));
  grid-template-columns:repeat(2,minmax(0,var(--sn-handy)));column-gap:clamp(28px,6vw,96px);row-gap:56px}
body.sn-seite .pl-solo .sn-refs__reihe .lp-vorschau:nth-child(2){transform:none}
body.sn-seite .pl-solo .sn-refs__reihe .lp-handy{width:100%;max-width:var(--sn-handy)}
body.sn-seite .sn-refs .lp-handy-schirm iframe{transform:none;width:100%;height:calc(100% - var(--kopf));overscroll-behavior:contain}
body.sn-seite .sn-refs__oeffnen{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 18px;
  border:1px solid rgba(15,35,65,.24);border-radius:999px;font-size:14px;line-height:1.2;letter-spacing:.02em;
  color:var(--sn-navy);text-decoration:none;background:transparent}
body.sn-seite .sn-refs__oeffnen:hover{background:rgba(15,35,65,.05);border-color:rgba(15,35,65,.4)}
body.sn-seite .sn-refs__oeffnen:focus-visible{outline:2px solid var(--sn-orange);outline-offset:3px}
@media(max-width:700px){
  body.sn-seite .pl-solo .lp-vorschauen.sn-refs__reihe{grid-template-columns:minmax(0,1fr);row-gap:56px}
  body.sn-seite .pl-solo .sn-refs__reihe .lp-handy{width:min(340px,100% - 32px);max-width:none;aspect-ratio:auto;
    height:min(640px,calc(100svh - 120px))}
  body.sn-seite .pl-solo .sn-refs__reihe .ref-slide-cap{font-size:11.5px}
}