/* Laser Season Start 2026 (Spec 096, 02.11.2026) · Sommer-Collage, Praefix ss-
   Jasper 02.11.: 1000 % Fokus auf den Weg zum Ziel. Darum: Karten stehen im ersten Bildschirm, nichts doppelt, kaum scrollen, oben ein Umschalter zwischen Gratis und Pakete.
   Eine Grundfarbe je Seite (Plakatlogik): Gratis Himmelblau, Pakete Sonnengelb. Meer und Duene nur am Seitenende, die letzte Welle laeuft in den Fuss.
   Schriften: Bricolage Grotesque (Display), Instrument Serif kursiv (Akzent), Figtree (Text), Shadows Into Light Two (Post-its).
   Papier, Tape, Post-its, Sonne, Wellen sind generierte Grafiken, Schatten in die Textur gebacken, kein filter an Collage-Teilen.
   Bewegung im Stop-Motion-Takt (steps), Figuren per Stacked-Alpha-Clip, Karten-Physik in season-start-spiel.js. Keine Versalien, kein Gedankenstrich, Radien hoechstens 8 px, Knoepfe 6 px. */

@font-face { font-family: "SS Display"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "SS Display"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "SS Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/ru-onest-var.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "SS Display"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/lalezar-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "SS Akzent"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "SS Akzent"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "SS Sans"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "SS Sans"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "SS Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/ru-onest-var.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "SS Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/noto-naskh-arabic-500-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "SS Stift"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/shadows-into-light-two-400.woff2") format("woff2"); }
@font-face { font-family: "SS StiftX"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/caveat-v23-latin_latin-ext-700.woff2") format("woff2"); }
@font-face { font-family: "SS StiftX"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/caveat-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "SS StiftAr"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/aref-ruqaa-700-arabic.woff2") format("woff2"); }
@font-face { font-family: "SS StiftHi"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/kalam-700-devanagari.woff2") format("woff2"); }

body.ss-seite {
  --navy: #0b2a5b; --navy-2: #123a78; --weiss: #fffdf6; --rot: #d90f2a; --pink: #e6007e; --pink-d: #c2006a;
  --grund: #54c6f5; --text-2: rgba(11, 42, 91, 0.84); --fuss: #224473;
  /* Lightbox */
  --t: #0b2a5b; --c: #fffdf6; --c-2: rgba(255, 253, 246, 0.82); --c-3: rgba(255, 253, 246, 0.6); --b: #e6007e; --b-d: #c2006a; --b-h: #ffd23f;
  --karte: #fffdf6; --karte-2: #f4efe3; --tinte: #0b2a5b; --tinte-2: #48587a;
  --knopf: var(--pink); --knopf-h: var(--pink-d); --knopf-t: #fff; --ss-puls: #ff5a1f;
  --rand: clamp(0.85rem, 3vw, 2.25rem); --max: 84rem;
  --display: "SS Display", "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --akzent: "SS Akzent", "Times New Roman", serif;
  --sans: "SS Sans", "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --stift: "SS Stift", "SS StiftX", "Caveat", cursive;
  background: var(--grund); }
body.ss-seite--pakete { --grund: #ffcf33; --knopf: var(--navy); --knopf-h: var(--navy-2); --b: #d90f2a; --b-d: #ab0a20; }
body.ss-seite::before { display: none; }
html:has(body.ss-seite--gratis) { background: #54c6f5; }
html:has(body.ss-seite--pakete) { background: #ffcf33; }

/* Menueleiste ueber der Grundfarbe, kein Balken */
body.ss-seite nav.nav, body.ss-seite.ss-nav-fest nav.nav, body.ss-seite.nav-open nav.nav { background: transparent; border-block-end: 0; box-shadow: none; }
body.ss-seite nav.nav { -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color 0.3s ease, backdrop-filter 0.3s ease; }
body.ss-seite.ss-nav-fest nav.nav, body.ss-seite.nav-open nav.nav { background: color-mix(in srgb, var(--grund) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
body.ss-seite nav.nav .nav-logo img { filter: brightness(0) saturate(100%) invert(12%) sepia(44%) saturate(2800%) hue-rotate(205deg) brightness(94%); }
body.ss-seite nav.nav .nav-links > li > button { color: var(--navy); font-weight: 700; }
body.ss-seite nav.nav a.nav-cta { background: var(--navy); color: #fff; border-color: var(--navy); border-radius: 6px; }
body.ss-seite nav.nav a.nav-cta:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
body.ss-seite nav.nav .lang-switch, body.ss-seite nav.nav .lang-switch-btn { color: var(--navy); background: transparent; border-color: rgba(11, 42, 91, 0.35); }
body.ss-seite nav.nav .nav-mobile-toggle { color: var(--navy); border-color: rgba(11, 42, 91, 0.35); }
body.ss-seite footer.footer { background: var(--fuss); margin-top: 0; border-top: 0; }

.ss { position: relative; background: transparent; color: var(--navy); font-family: var(--sans); font-weight: 500; -webkit-font-smoothing: antialiased; overflow-x: clip; text-transform: none; }
.ss *, .ss *::before, .ss *::after { box-sizing: border-box; }
.ss :where(p, h1, h2, h3, ul, ol, figure) { margin: 0; }
.ss :where(p, li) { color: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; }
.ss :where(h1, h2, h3) { color: inherit; letter-spacing: 0; font-family: var(--display); }
.ss :where(ul, ol) { padding: 0; list-style: none; }
.ss img { max-inline-size: none; }
.ss :where(section) { padding: 0; }
.ss a:focus-visible, .ss button:focus-visible, .ss summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.ss-innen { position: relative; z-index: 2; inline-size: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--rand); }
.ss-t { position: absolute; display: block; block-size: auto; pointer-events: none; }
.ss-seite .ss::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.06; mix-blend-mode: multiply; background: url("/assets/img/season-start/korn.webp?v=20261102a") 0 0 / 220px 220px repeat; }

/* Stop-Motion: Papierteile zittern im Puppentrick-Takt */
@keyframes ss-boil { 0%, 100% { translate: 0 0; rotate: -0.6deg; } 33% { translate: 0.6px -0.8px; rotate: 0.5deg; } 66% { translate: -0.7px 0.5px; rotate: -0.2deg; } }
.ss-boil { animation: ss-boil 0.72s steps(1) infinite; }
@keyframes ss-wackel { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.ss-wackel { animation: ss-wackel 1.5s steps(5) infinite alternate; transform-origin: 50% 100%; }
@keyframes ss-huepf { 0%, 100% { translate: 0 0; rotate: -6deg; } 50% { translate: 0 -0.9rem; rotate: 8deg; } }
.ss-huepf { animation: ss-huepf 1.1s steps(7) infinite; }
@keyframes ss-dreh { to { rotate: 360deg; } }
@keyframes ss-zieh { from { translate: 0 0; } to { translate: var(--weg, 3rem) 0; } }
@keyframes ss-flug { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 1.4rem -0.7rem; rotate: 3deg; } }

/* Knoepfe */
.ss-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-block-size: 3rem; padding: 0.7rem 1.25rem; border: 0; border-radius: 6px; background: var(--knopf); color: var(--knopf-t);
  font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.1; text-align: center; cursor: pointer; text-decoration: none; transition: background-color 0.18s ease, transform 0.18s ease; -webkit-tap-highlight-color: transparent; }
.ss-btn:hover { background: var(--knopf-h); transform: translateY(-1px); color: var(--knopf-t); }
.ss-btn:active { transform: translateY(1px); }
.ss-btn--breit { inline-size: 100%; padding-inline: 0.4rem; font-size: clamp(0.92rem, 3.8vw, 1rem); }
.ss-btn--klein { min-block-size: 2.75rem; padding: 0.5rem 1rem; font-size: 0.94rem; white-space: nowrap; }
.ss-link { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; white-space: nowrap; }
.ss-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }

/* Riesenzahlen aus Papierbuchstaben */
.ss-zeichen { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ss-z { display: block; block-size: 1em; inline-size: auto; margin-inline-end: -0.06em; }
.ss-z--0 { rotate: -4deg; }
.ss-z--1 { rotate: 3deg; translate: 0 -0.03em; }
.ss-z--2 { rotate: -2deg; translate: 0 0.03em; }
.ss-z--3 { rotate: 5deg; }
.ss-z--minus { block-size: 0.34em; margin-inline-end: 0.02em; }
[dir="rtl"] .ss-zeichen { direction: ltr; }

/* ------------------------------------------------------------ Himmel */
.ss-himmel { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.ss-wolke { inline-size: clamp(5rem, 13vw, 13rem); }
.ss-wolke--1 { inset-block-start: 20rem; inset-inline-start: -1.2rem; --weg: 2.4rem; animation: ss-zieh 22s steps(22) infinite alternate; }
.ss-wolke--2 { display: none; inset-block-start: 5.4rem; inset-inline-start: 57%; inline-size: clamp(5rem, 10vw, 10rem); --weg: -2.5rem; animation: ss-zieh 30s steps(26) infinite alternate; }
.ss-moewe { inline-size: clamp(2rem, 3.6vw, 3.8rem); animation: ss-flug 6s steps(14) infinite; }
.ss-moewe--1 { inset-block-start: 4.4rem; inset-inline-start: 50%; }
.ss-moewe--2, .ss-moewe--3 { display: none; }

/* ------------------------------------------------------------ Erster Bildschirm: Kopf + Karten */
.ss-hero { position: relative; isolation: isolate; margin-block-start: calc(-1 * var(--ss-nav, 4.5rem)); padding-block: calc(var(--ss-nav, 4.5rem) + 0.15rem) 1rem; }
.ss-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
/* Runder Sonnen-Badge: antippen oeffnet die Erklaerung */
.ss-warum-knopf { position: absolute; z-index: 5; inset-block-start: -1.5rem; inset-inline-end: 0.5rem; inline-size: 5.4rem; aspect-ratio: 1; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; animation: ss-ruf 2.4s steps(6) infinite; }
.ss-warum-knopf__strahlen { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; animation: ss-dreh 40s steps(80) infinite; pointer-events: none; }
.ss-warum-knopf__kern { position: relative; display: grid; place-items: center; inline-size: 66%; aspect-ratio: 1; background: url("/assets/img/season-start/sonne-kern.webp?v=20261102a") center / 100% 100% no-repeat; color: var(--navy); font-family: var(--display); font-weight: 800; font-size: 0.8rem; line-height: 0.98; letter-spacing: -0.02em; text-align: center; transition: scale 0.18s ease; }
.ss-seite--pakete .ss-warum-knopf__kern { background-image: url("/assets/img/season-start/sonne-klein.webp?v=20261102a"); }
.ss-warum-knopf:hover .ss-warum-knopf__kern { scale: 1.07; }
.ss-warum-knopf:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 50%; }
@keyframes ss-ruf { 0%, 70%, 100% { rotate: 0deg; scale: 1; } 78% { rotate: -7deg; scale: 1.06; } 86% { rotate: 6deg; scale: 1.06; } 94% { rotate: -3deg; scale: 1.02; } }
.ss-praes { display: inline-block; padding: 0.22rem 0.8rem 0.26rem; font-family: var(--display); font-weight: 700; font-size: clamp(0.72rem, 1.5vw, 0.92rem); line-height: 1.1; background: url("/assets/img/season-start/tape-gelb.webp?v=20261102a") center / 100% 100% no-repeat; rotate: -1.4deg; color: var(--navy); }
.ss-seite--pakete .ss-praes { background-image: url("/assets/img/season-start/tape-aqua.webp?v=20261102a"); }
.ss-titel { margin-block-start: 0.2rem; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 9vw, 4.6rem); line-height: 0.98; letter-spacing: -0.035em; font-variation-settings: "opsz" 96; }
.ss-titel em { font-family: var(--akzent); font-style: italic; font-weight: 400; letter-spacing: -0.015em; font-size: 1.14em; line-height: 0.8; color: var(--pink); }
.ss-seite--pakete .ss-titel em { color: var(--rot); }
.ss-claim { margin-block-start: 0.42rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.02rem, 4.1vw, 1.5rem); line-height: 1.12; letter-spacing: -0.015em; }
.ss-claim .ss-zeichen { font-size: 1.7em; margin-block: -0.3em; margin-inline: 0.06em; vertical-align: middle; }
.ss-kopf__aktion { display: grid; gap: 0.7rem; margin-block-start: 0.35rem; }
.ss-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
.ss-tab { appearance: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; min-block-size: 2.85rem; padding: 0.35rem 0.5rem; border-radius: 6px; font-family: var(--display); font-weight: 700; font-size: clamp(0.92rem, 3.8vw, 1.06rem); line-height: 1.05; text-align: center; text-decoration: none; background: rgba(255, 253, 246, 0.72); color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; transition: background-color 0.18s ease; }
.ss-tab:hover { background: #fff; color: var(--navy); }
.ss-tab[aria-current="page"] { background: var(--navy); color: #fff; }
.ss-tab[aria-current="page"]:hover { background: var(--navy-2); color: #fff; }
.ss-frist { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; font-weight: 700; font-size: 0.86rem; line-height: 1.15; }
.ss-frist__uhr { font-family: var(--display); font-weight: 800; font-size: 1.06rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.ss-frist__uhr span { display: inline-block; min-inline-size: 1.25ch; text-align: center; }
.ss-frist__uhr .ss-frist__cs { color: var(--pink); min-inline-size: 2.2ch; text-align: start; }
.ss-seite--pakete .ss-frist__uhr .ss-frist__cs { color: var(--rot); }

/* Karten */
.ss-raster-titel { margin-block: 0.8rem 0.15rem; font-family: var(--sans); font-weight: 700; font-size: clamp(0.84rem, 3.4vw, 1.02rem); line-height: 1.2; letter-spacing: 0; }
.ss-karten { display: grid; gap: 0.65rem 0.55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-platz { --fh: 9.6rem; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding-block-start: var(--fh); rotate: var(--tilt, 0deg); isolation: isolate; }
.ss-karten > .ss-platz:nth-child(1) { --tilt: 0.4deg; }
.ss-karten > .ss-platz:nth-child(2) { --tilt: -0.6deg; }
.ss-karten > .ss-platz:nth-child(3) { --tilt: 0.6deg; }
.ss-karten > .ss-platz:nth-child(4) { --tilt: -0.4deg; }
.ss-karten > .ss-platz:nth-child(5) { --tilt: 0.5deg; }
.ss-collage { position: absolute; z-index: 0; inset-block-start: 0; inset-inline: 0; block-size: var(--fh); pointer-events: none; }
.ss-collage img { position: absolute; display: block; block-size: auto; inline-size: auto; }
.ss-collage__foto { block-size: 74% !important; inset-block-end: 3%; inset-inline-start: 4%; rotate: -6deg; }
.ss-collage__ding { block-size: 30% !important; inset-block-end: 8%; inset-inline-end: 3%; rotate: 8deg; }
.ss-platz:nth-child(even) .ss-collage__foto { inset-inline-start: auto; inset-inline-end: 4%; rotate: 6deg; }
.ss-platz:nth-child(even) .ss-collage__ding { inset-inline-end: auto; inset-inline-start: 3%; rotate: -9deg; }
.ss-figur { position: absolute; inset: 0; pointer-events: none; }
.ss-figur__bild, .ss-figur__film { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
.ss-figur__film { opacity: 0; }
.ss-figur.ist-an .ss-figur__film { opacity: 1; }
.ss-figur.ist-an .ss-figur__bild { opacity: 0; }
.ss-figur__quelle { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.ss-springer { position: absolute; z-index: 2; inset-block-start: 0; left: var(--fx, 50%); translate: -50% 0; block-size: calc(var(--fh) + 0.3rem); aspect-ratio: var(--w) / var(--h); transform-origin: 50% 100%; cursor: pointer; }
.ss-spiel .ss-platz:not(.ist-gelandet) .ss-springer { opacity: 0; }
.ss-marke { position: absolute; z-index: 3; display: block; block-size: auto; transform: translate(-50%, -50%); pointer-events: none; }
.ss-spiel .ss-platz:not(.ist-gelandet) .ss-marke { opacity: 0; }
.ss-karte { --riss: 1.35rem; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 0.2rem; padding: 0.55rem 0.6rem 0.45rem; border-style: solid; border-width: 0 0 var(--riss); border-image: var(--papier) 0 0 100 0 fill / 0 0 var(--riss) 0 stretch; transform-origin: 50% 0; will-change: transform; color: var(--navy); }
.ss-karte__name { display: flex; align-items: flex-start; gap: 0.3rem; font-family: var(--display); font-weight: 800; font-size: clamp(0.98rem, 4.1vw, 1.25rem); line-height: 1.02; letter-spacing: -0.02em; }
.ss-ico { display: block; flex: 0 0 auto; inline-size: var(--ico, 1.35em); block-size: var(--ico, 1.35em); object-fit: contain; }
.ss-karte__name .ss-ico { --ico: 1.45em; margin-block-start: -0.22em; }
.ss-btn .ss-ico { --ico: 1.4em; margin-block: -0.2em; }
.ss-tab { gap: 0.32rem; }
.ss-tab .ss-ico { --ico: 1.5em; }
.ss-h2 .ss-ico { --ico: 1.1em; display: inline-block; vertical-align: -0.16em; margin-inline-end: 0.2em; }
.ss-frist > span:first-child { display: inline-flex; align-items: center; gap: 0.25rem; }
.ss-frist .ss-ico { --ico: 1.5em; }
/* Fakten als Icon-Zeile */
.ss-fakten { display: flex; flex-wrap: wrap; gap: 0.2rem 0.55rem; margin-block: 0.1rem 0.25rem; font-weight: 700; font-size: clamp(0.72rem, 3vw, 0.98rem); line-height: 1.1; }
.ss-fakten li { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.ss-fakten .ss-ico { --ico: 1.5em; }
@media (max-width: 39.99rem) {
  .ss-karten--pakete .ss-platz:not(.ss-platz--top) .ss-karte__name { font-size: 0.92rem; gap: 0.22rem; }
  .ss-karten--pakete .ss-platz:not(.ss-platz--top) .ss-karte__name .ss-ico { --ico: 1.25em; margin-block-start: -0.08em; }
  .ss-karten--pakete .ss-platz:not(.ss-platz--top) .ss-schild__rab { inline-size: 3.15rem; font-size: 0.62rem; inset-block-start: -0.85rem; inset-inline-end: -0.6rem; }
}
.ss-karte__zonen { display: none; }
.ss-zone--herren { display: none; }
main[data-g="herren"] .ss-zone--damen { display: none; }
main[data-g="herren"] .ss-zone--herren { display: inline; }
.ss-preis { display: flex; align-items: center; gap: 0.4rem; align-self: center; transform-origin: 30% 60%; }
.ss-zeichen--null { font-size: clamp(3rem, 13.5vw, 4.4rem); margin-block: 0.05rem; }
.ss-statt { display: grid; font-size: clamp(0.8rem, 3.2vw, 0.98rem); font-weight: 700; line-height: 1.1; color: var(--navy); }
.ss-strich { position: relative; font-family: var(--display); font-weight: 800; font-size: 1.14em; color: var(--rot); text-decoration: none; white-space: nowrap; }
.ss-strich::after { content: ""; position: absolute; inset-inline: -8%; inset-block-start: 50%; block-size: 0.95em; translate: 0 -50%; background: url("/assets/img/season-start/strich-rot.webp?v=20261102a") center / 100% 100% no-repeat; }
.ss-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; }
.ss-wahl__k { min-block-size: 2.75rem; padding: 0.2rem; font-size: 0.86rem; overflow-wrap: anywhere; }

/* Funken beim Landen */
.ss-funken { position: absolute; z-index: 4; inset-block-start: var(--fh); inset-inline: 0; block-size: 0; pointer-events: none; }
.ss-funke { position: absolute; display: block; inline-size: 1.4rem; block-size: auto; opacity: 0; }
.ss-funke--0 { left: 12%; } .ss-funke--1 { left: 30%; inline-size: 1.2rem; } .ss-funke--2 { left: 52%; inline-size: 1.05rem; } .ss-funke--3 { left: 72%; inline-size: 1.15rem; } .ss-funke--4 { left: 88%; inline-size: 1rem; }
@keyframes ss-funke { 0% { opacity: 0; translate: 0 0; scale: 0.3; } 20% { opacity: 1; scale: 1.1; } 100% { opacity: 0; translate: var(--fx2, 0) var(--fy2, -3.4rem); scale: 0.7; rotate: var(--fr, 90deg); } }
.ss-funken.ist-an .ss-funke { animation: ss-funke 0.72s steps(9) both; }
.ss-funke--0 { --fx2: -1.4rem; --fy2: -2.6rem; --fr: -80deg; } .ss-funke--1 { --fx2: -0.5rem; --fy2: -4rem; } .ss-funke--2 { --fx2: 0.3rem; --fy2: -3.2rem; --fr: 120deg; } .ss-funke--3 { --fx2: 0.8rem; --fy2: -4.2rem; --fr: -60deg; } .ss-funke--4 { --fx2: 1.4rem; --fy2: -2.8rem; }

/* Preisschild Pakete: Prospekt-Mechanik als Collage */
.ss-schild { position: relative; display: grid; justify-items: start; margin-block-start: 0.3rem; padding: 0.35rem 0.4rem 0.4rem; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgba(11, 42, 91, 0.08); transform-origin: 40% 60%; align-self: start; }
.ss-schild__rab { position: absolute; z-index: 2; inset-block-start: -0.55rem; inset-inline-end: -0.55rem; display: grid; place-items: center; inline-size: clamp(3.3rem, 14vw, 4.3rem); aspect-ratio: 1; background: var(--bild) center / 100% 100% no-repeat; rotate: 9deg; color: var(--rot); font-family: var(--display); font-size: clamp(0.74rem, 3vw, 0.96rem); font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.ss-schild__rab b { font-weight: 800; color: inherit; }
.ss-schild__statt { font-size: 0.76rem; font-weight: 700; color: var(--navy); line-height: 1.15; }
.ss-schild__preis { display: flex; align-items: flex-start; color: var(--rot); line-height: 0.92; margin-block-start: 0.05rem; font-family: var(--display); }
.ss-schild__ab { align-self: flex-end; margin-inline-end: 0.18rem; margin-block-end: 0.22rem; font-size: 0.82rem; font-weight: 800; }
.ss-schild__preis b { font-weight: 800; font-size: clamp(2.05rem, 9.8vw, 2.9rem); letter-spacing: -0.05em; color: inherit; }
.ss-schild__preis sup { font-size: 1rem; font-weight: 800; line-height: 1.1; margin-inline-start: 0.08rem; vertical-align: baseline; }
.ss-schild__einheit { font-size: 0.74rem; font-weight: 700; color: var(--navy); line-height: 1.15; }
.ss-schild__spar { margin-block-start: 0.2rem; padding: 0.12rem 0.32rem; background: var(--rot); color: #fff; font-size: 0.74rem; font-weight: 800; border-radius: 3px; line-height: 1.2; white-space: nowrap; }
.ss-schild__spar b { font-weight: 800; color: #fff; }
.ss-basis { font-size: 0.72rem; font-weight: 700; line-height: 1.2; color: var(--text-2); margin-block-start: 0.1rem; }
.ss-basis__raten { display: none; }
.ss-karten--pakete .ss-karte { grid-template-rows: minmax(2rem, auto) auto auto 1fr; gap: 0.15rem; }
.ss-karten--pakete .ss-btn { align-self: end; margin-block-start: 0.25rem; }
/* Top-Paket auf dem Handy: volle Breite, Name steht frei neben der Figur */
.ss-karten--pakete .ss-platz--top { grid-column: 1 / -1; --fh: 8.2rem; --fx: 76%; }
.ss-karten--pakete .ss-platz--top .ss-karte { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.7rem; align-items: end; }
.ss-karten--pakete .ss-platz--top .ss-karte__name { position: absolute; inset-block-end: calc(100% + 0.5rem); inset-inline-start: 0.1rem; max-inline-size: 56%; font-size: 1.5rem; }
.ss-karten--pakete .ss-platz--top .ss-schild { grid-row: 1 / 3; }
.ss-karten--pakete .ss-platz--top .ss-basis { grid-column: 2; }
.ss-karten--pakete .ss-platz--top .ss-btn { grid-column: 2; }
.ss-karten--pakete .ss-platz--top .ss-collage__foto { display: none; }
@media (min-width: 40rem) { .ss-karten--pakete .ss-platz--top .ss-collage__foto { display: block; } }

/* Post-its: Kugelschreiber-Tinte auf Papier */
.ss-postit { display: grid; place-items: center; inline-size: 7rem; aspect-ratio: 1; padding: 0.7rem; background: var(--bild) center / 100% 100% no-repeat; text-align: center; font-family: var(--stift); font-size: 1.5rem; line-height: 1.04; color: #1f2c6e; }
.ss-postit--breit { inline-size: 11.4rem; aspect-ratio: 560 / 300; padding: 0.5rem 1.1rem 0.8rem; font-size: 1.5rem; }
.ss-postit__text { display: block; rotate: -1.2deg; color: color-mix(in srgb, #1f2c6e 74%, transparent); mix-blend-mode: multiply;
  text-shadow: 0.75px 0.45px 0 color-mix(in srgb, #1f2c6e 52%, transparent), -0.6px 0.85px 0 color-mix(in srgb, #1f2c6e 40%, transparent), 0.35px -0.7px 0 color-mix(in srgb, #1f2c6e 28%, transparent), 1.3px 1px 0 color-mix(in srgb, #1f2c6e 16%, transparent);
  -webkit-mask: url("/assets/img/season-start/ink-mask.png") 0 0 / 130px 130px repeat; mask: url("/assets/img/season-start/ink-mask.png") 0 0 / 130px 130px repeat; }
html[lang="tr"] .ss-postit, html[lang="ru"] .ss-postit { font-family: "SS StiftX", "Caveat", cursive; font-weight: 700; }
html[lang="ar"] .ss-postit { font-family: "SS StiftAr", serif; font-weight: 700; font-size: 1.15rem; }
html[lang="hi"] .ss-postit { font-family: "SS StiftHi", serif; font-weight: 700; font-size: 1.1rem; }

/* ------------------------------------------------------------ Warum jetzt + Laser */
.ss-mehr { padding-block: 0.6rem 0.9rem; }
.ss-mehr__innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.ss-h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.45rem, 5.6vw, 2.2rem); line-height: 1; letter-spacing: -0.03em; font-variation-settings: "opsz" 96; }
.ss-zeit__reihe { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-block-start: 0.5rem; }
.ss-zeit__punkt { position: relative; display: grid; justify-items: center; }
.ss-zeit__punkt .ss-postit { inline-size: 100%; max-inline-size: 15rem; font-size: clamp(1.02rem, 4.2vw, 1.34rem); line-height: 1.02; padding: 0.25rem 0.5rem 0.5rem; }
.ss-zeit__punkt:nth-child(odd) .ss-postit { rotate: -1.8deg; }
.ss-zeit__punkt:nth-child(even) .ss-postit { rotate: 1.4deg; }
.ss-zeit__bild { position: absolute; z-index: 2; inline-size: clamp(2.1rem, 8vw, 3rem); inset-block-start: -0.6rem; inset-inline-end: 0; }
.ss-laser__reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; margin-block-start: 0.4rem; align-items: end; }
.ss-laser__teil { position: relative; --fh: clamp(9.4rem, 40vw, 15rem); padding-block-start: var(--fh); display: grid; }
.ss-laser__teil .ss-springer { max-inline-size: 118%; }
.ss-laser__bild { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; object-position: 50% 100%; }
.ss-laser__teil figcaption { position: relative; z-index: 3; margin-block-start: 0.3rem; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(0.7rem, 2.6vw, 0.92rem); line-height: 1.08; }

/* ------------------------------------------------------------ FAQ auf Haarlinien */
.ss-faq { padding-block: 0.4rem 0.6rem; }
.ss-fragen { margin-block-start: 0.35rem; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2rem; border-block-start: 2px solid rgba(11, 42, 91, 0.25); }
.ss-frage { border-block-end: 2px solid rgba(11, 42, 91, 0.25); }
.ss-frage summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.62rem 0; font-family: var(--display); font-weight: 700; font-size: clamp(0.96rem, 2.4vw, 1.08rem); line-height: 1.15; }
.ss-frage summary::-webkit-details-marker { display: none; }
.ss-frage summary::after { content: "+"; flex: 0 0 auto; font-weight: 800; font-size: 1.4rem; line-height: 1; transition: rotate 0.25s ease; }
.ss-frage[open] summary::after { rotate: 45deg; }
.ss-frage p { padding-block-end: 0.75rem; font-size: 0.95rem; line-height: 1.42; color: var(--text-2); font-weight: 500; }

/* ------------------------------------------------------------ Seitenende: Duene und Meer */
.ss-schluss { position: relative; padding-block-start: 0.7rem; isolation: isolate; }
.ss-schluss__inhalt { z-index: 4; }
.ss-schluss .ss-h2 { font-size: clamp(1.6rem, 6.4vw, 2.8rem); }
.ss-schluss .ss-knoepfe { margin-block-start: 0.5rem; }
.ss-strand { position: relative; z-index: 1; block-size: clamp(12.5rem, 28vw, 21rem); margin-block-start: -0.6rem; pointer-events: none; }
.ss-sand { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 16%; block-size: 62%; background: url("/assets/img/season-start/sand.webp?v=20261102a") 0 0 / auto 100% repeat-x; }
.ss-welle { position: absolute; inset-inline: 0; background-repeat: repeat-x; background-position: 0 0; background-size: auto 100%; }
.ss-welle--1 { z-index: 4; inset-block-end: 22%; block-size: clamp(3rem, 6vw, 5rem); background-image: url("/assets/img/season-start/meer-1.webp?v=20261102a"); animation: ss-wellen 7s steps(7) infinite alternate; }
.ss-welle--2 { z-index: 6; inset-block-end: 13%; block-size: clamp(3rem, 6vw, 5rem); background-image: url("/assets/img/season-start/meer-2.webp?v=20261102a"); animation: ss-wellen 5.4s steps(6) infinite alternate-reverse; }
.ss-welle--3 { z-index: 7; inset-block-end: 6%; block-size: clamp(3rem, 6vw, 5rem); background-image: url("/assets/img/season-start/meer-3.webp?v=20261102a"); animation: ss-wellen 6.4s steps(6) infinite alternate; }
.ss-welle--4 { z-index: 8; inset-block-end: -1px; block-size: clamp(3rem, 6.6vw, 5.6rem); background-image: url("/assets/img/season-start/meer-4.webp?v=20261102a"); animation: ss-wellen 4.8s steps(5) infinite alternate-reverse; }
@keyframes ss-wellen { from { background-position-x: 0; } to { background-position-x: 5rem; } }
.ss-strand__schirm { z-index: 2; inline-size: clamp(6rem, 15vw, 13rem); inset-block-end: 34%; inset-inline-end: 5%; rotate: 5deg; }
.ss-strand__ball { z-index: 3; inline-size: clamp(2.4rem, 5vw, 4.2rem); inset-block-end: 40%; inset-inline-end: 27%; }
.ss-strand__stern { z-index: 3; inline-size: clamp(1.9rem, 3.8vw, 3.2rem); inset-block-end: 38%; inset-inline-start: 24%; }
.ss-strand__flip { z-index: 3; inline-size: clamp(1.5rem, 2.6vw, 2.5rem); inset-block-end: 40%; inset-inline-start: 36%; rotate: 24deg; }
.ss-strand__palme { z-index: 0; inline-size: clamp(6.5rem, 17vw, 16rem); }
.ss-strand__palme--1 { inset-block-end: 44%; inset-inline-start: -1%; rotate: -14deg; }
.ss-strand__palme--2 { inset-block-end: 50%; inset-inline-start: 11%; rotate: 16deg; inline-size: clamp(5rem, 12vw, 11rem); }
.ss-strand__boot { z-index: 5; inline-size: clamp(2.6rem, 5vw, 4.6rem); inset-block-end: 24%; inset-inline-start: 12%; animation: ss-flug 8s steps(16) infinite; }
.ss-strand__figur { position: absolute; z-index: 5; inset-block-end: 9%; left: 60%; translate: -50% 0; block-size: 94%; aspect-ratio: var(--w) / var(--h); pointer-events: none; }

/* ------------------------------------------------------------ Mitlaufende Leiste */
.ss-leiste { position: fixed; z-index: 1000; inset-inline: 0; inset-block-end: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem var(--rand); padding-block-end: calc(0.45rem + env(safe-area-inset-bottom, 0px)); background: var(--navy); color: #fff; translate: 0 110%; transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.ss-leiste.ist-sichtbar { translate: 0 0; }
.ss-leiste__text { display: grid; line-height: 1.1; min-inline-size: 0; color: #fff; }
.ss-leiste__label { font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.78); }
.ss-leiste__uhr { font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 4.3vw, 1.25rem); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; color: #fff; direction: ltr; unicode-bidi: isolate; }
.ss-leiste .ss-btn { background: var(--pink); color: #fff; }
.ss-seite--pakete .ss-leiste .ss-btn { background: #ffcf33; color: var(--navy); }
body.ss-leiste-an footer.footer { padding-block-end: 4.5rem; }

/* ------------------------------------------------------------ Tablet */
@media (min-width: 40rem) {
  .ss-karten--gratis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ss-karten--pakete { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ss-karten--pakete .ss-platz--top { grid-column: auto; --fx: 50%; --fh: 9.6rem; }
  .ss-karten--pakete .ss-platz--top .ss-karte { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(2rem, auto) auto auto 1fr; }
  .ss-karten--pakete .ss-platz--top .ss-karte__name { position: static; max-inline-size: none; font-size: clamp(0.98rem, 4.1vw, 1.25rem); }
  .ss-karten--pakete .ss-platz--top .ss-schild, .ss-karten--pakete .ss-platz--top .ss-basis, .ss-karten--pakete .ss-platz--top .ss-btn { grid-column: auto; grid-row: auto; }
  .ss-zeit__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-basis__raten { display: inline; }
}
/* ------------------------------------------------------------ Desktop: alles Wichtige ohne Scrollen */
@media (min-width: 64rem) {
  .ss-hero { padding-block: calc(var(--ss-nav, 4.5rem) + 0.25rem) 0.8rem; }
  .ss-kopf { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 2rem; padding-inline-end: 15rem; }
  .ss-kopf__aktion { gap: 0.5rem; inline-size: 25rem; margin-block-start: 0; }
  .ss-titel { font-size: clamp(3.2rem, 4.7vw, 4.9rem); white-space: nowrap; }
  .ss-claim { font-size: clamp(1.25rem, 1.75vw, 1.7rem); }
  .ss-warum-knopf { inset-block-start: -1.4rem; inset-inline-end: 2rem; inline-size: clamp(10.5rem, 12vw, 12.5rem); }
  .ss-warum-knopf__kern { font-size: clamp(1.5rem, 1.75vw, 1.9rem); }
  .ss-wolke--1 { inset-block-start: 6%; inset-inline-start: 32%; }
  .ss-wolke--2 { display: block; }
  .ss-moewe--1 { inset-block-start: 4.8rem; inset-inline-start: 46%; }
  .ss-moewe--2 { display: block; inset-block-start: 4.7rem; inset-inline-start: 22%; animation-delay: -2s; }
  .ss-raster-titel { margin-block: 0.45rem 0.1rem; }
  .ss-karten { gap: 1rem; }
  .ss-karten--pakete { gap: 0.8rem; }
  .ss-platz, .ss-karten--pakete .ss-platz--top { --fh: clamp(11rem, calc(100vh - 32.5rem), 22rem); }
  .ss-karten--pakete .ss-platz, .ss-karten--pakete .ss-platz--top { --fh: clamp(9.5rem, calc(100vh - 35.5rem), 19rem); }
  .ss-karte { --riss: 2.3rem; padding: 0.75rem 0.85rem 0.35rem; gap: 0.25rem; }
  .ss-karte__name { font-size: 1.3rem; }
  .ss-zeichen--null { font-size: clamp(4.6rem, 6.2vw, 6.4rem); }
  .ss-statt { font-size: 1.02rem; }
  .ss-schild { padding: 0.45rem 0.55rem 0.5rem; }
  .ss-schild__preis b { font-size: clamp(2.6rem, 3.5vw, 3.4rem); }
  .ss-schild__statt, .ss-schild__einheit { font-size: 0.82rem; }
  .ss-schild__spar { font-size: 0.8rem; }
  .ss-basis { font-size: 0.76rem; }
  .ss-wahl__k { min-block-size: 2.6rem; font-size: 0.92rem; }
  .ss-mehr__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: start; }
  .ss-zeit__reihe { gap: 0.6rem; }
  .ss-laser__teil { --fh: 15.5rem; }
  .ss-fragen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-schluss__inhalt { display: flex; align-items: center; gap: 1.5rem; }
  .ss-schluss .ss-knoepfe { margin-block-start: 0; }
}
/* Grosse Fenster: alles waechst mit, die Seite bleibt gesetzt */
@media (min-width: 110rem) { html:has(body.ss-seite) { font-size: 110%; } }
@media (min-width: 150rem) { html:has(body.ss-seite) { font-size: 122%; } }
@media (min-width: 185rem) { html:has(body.ss-seite) { font-size: 140%; } }
@media (max-width: 95.99rem) { body.ss-seite .lz-ribbon { display: none !important; } }
html[lang="ru"] .ss-titel, html[lang="hi"] .ss-titel { font-size: clamp(2rem, 8.6vw, 4rem); }
html[lang="ar"] .ss-titel em { font-family: inherit; font-style: normal; font-weight: inherit; font-size: 1em; }
html[lang="ru"] .ss-titel em, html[lang="hi"] .ss-titel em { font-family: inherit; font-style: normal; font-weight: inherit; font-size: 1em; }
@media (prefers-reduced-motion: reduce) {
  .ss-boil, .ss-wackel, .ss-huepf, .ss-sonne__strahlen, .ss-wolke, .ss-moewe, .ss-welle, .ss-strand__boot { animation: none !important; }
}

/* ------------------------------------------------------------ Buchungs-Lightbox (Spec 044): helles Panel, Navy-Kopf, Akzent je Seite */
html.ss-lb-offen, html.ss-lb-offen body { overflow: hidden; }
.ss-lb { position: fixed; inset: 0; z-index: 2147483500; display: grid; place-items: center; padding: 1rem; background: rgba(11, 42, 91, 0.72);
  opacity: 0; transition: opacity 0.28s ease; overscroll-behavior: contain; color: var(--tinte); font-family: var(--sans); }
.ss-lb.ist-offen { opacity: 1; }
.ss-lb[hidden] { display: none; }
.ss-lb__panel { position: relative; inline-size: min(100%, 52rem); block-size: auto; max-block-size: min(92vh, 56rem); min-block-size: 22rem;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--karte); color: var(--tinte); border-radius: 8px; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); transform: translateY(14px) scale(0.985); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.ss-lb.ist-offen .ss-lb__panel { transform: none; }
.ss-lb[data-schritt="4"] .ss-lb__panel { inline-size: min(94vw, 960px); block-size: min(94vh, 900px); max-block-size: none; }
.ss-lb__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.9rem 1rem 0.9rem 1.2rem; background: var(--t); color: var(--c); }
.ss-lb__kicker { font-size: 0.78rem; font-weight: 700; color: var(--b-h); }
.ss-lb__titel { font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1.05; color: var(--c); margin-block-start: 0.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-lb__preis { margin-block-start: 0.2rem; font-size: 0.85rem; color: var(--c-2); }
.ss-lb__preis b { font-weight: 900; font-size: 1.2rem; color: var(--c); font-variant-numeric: tabular-nums; }
.ss-lb__statt { margin-inline-start: 0.4rem; white-space: nowrap; }
.ss-lb__preis s { text-decoration-color: var(--b-h); text-decoration-thickness: 2px; }
.ss-lb__zu { appearance: none; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 6px; border: 2px solid rgba(246, 238, 227, 0.35); background: transparent;
  color: var(--c); cursor: pointer; display: grid; place-items: center; transition: background-color 0.2s ease; }
.ss-lb__zu:hover { background: rgba(246, 238, 227, 0.12); }
.ss-lb__zu svg, .ss-lb__zurueck svg, .ss-kachel__haken svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ss-lb__punkte { list-style: none; margin: 0; padding: 0.85rem 1.2rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.ss-lb__punkte li { position: relative; padding-block-start: 0.6rem; font-size: 0.74rem; font-weight: 700; color: rgba(11, 42, 91, 0.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-lb__punkte li::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 4px; border-radius: 2px; background: rgba(11, 42, 91, 0.14); transition: background-color 0.3s ease; }
.ss-lb__punkte li.ist-fertig { color: rgba(11, 42, 91, 0.7); }
.ss-lb__punkte li.ist-fertig::before { background: var(--t); }
.ss-lb__punkte li.ist-aktiv { color: var(--tinte); }
.ss-lb__punkte li.ist-aktiv::before { background: var(--b); }
.ss-lb[data-schritt="4"] .ss-lb__kopf, .ss-lb[data-schritt="4"] .ss-lb__punkte, .ss-lb[data-schritt="4"] .ss-lb__fuss { display: none; }
.ss-lb[data-schritt="4"] .ss-lb__panel { grid-template-rows: minmax(0, 1fr); }
.ss-lb__zu--termin { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; z-index: 3; background: rgba(255, 255, 255, 0.94); color: #0a2540;
  border-color: rgba(10, 37, 64, 0.12); box-shadow: 0 4px 14px -6px rgba(6, 16, 40, 0.35); }
.ss-lb__zu--termin:hover { background: #f2f5f9; }
.ss-lb__koerper { position: relative; overflow: auto; -webkit-overflow-scrolling: touch; }
.ss-lb__schritt { padding: 1.1rem 1.2rem 1.3rem; }
.ss-lb__schritt[hidden] { display: none; }
.ss-js .ss-lb__schritt { opacity: 0; transform: translateY(10px); transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.ss-js .ss-lb__schritt.ist-rein, .ss-js .ss-lb__schritt--termin { opacity: 1; transform: none; }
.ss-lb__frage { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.02; color: var(--tinte); letter-spacing: 0; }
.ss-lb__hinweis { margin: 0.45rem 0 1.1rem; font-size: 0.9rem; color: var(--tinte-2); line-height: 1.5; }
.ss-lb__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ss-kachel { position: relative; display: block; cursor: pointer; border-radius: 8px; background: var(--karte-2); border: 2px solid rgba(11, 42, 91, 0.16);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; -webkit-tap-highlight-color: transparent; }
.ss-kachel input { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ss-kachel:hover { border-color: var(--t); transform: translateY(-1px); }
.ss-kachel:has(input:focus-visible) { outline: 3px solid var(--b); outline-offset: 3px; }
.ss-kachel__text { display: block; padding: 1rem 2.8rem 1.05rem 1rem; }
.ss-kachel__text b { display: block; font-weight: 900; font-size: 1.3rem; line-height: 1.05; color: var(--tinte); }
.ss-kachel__text small { display: block; margin-block-start: 0.35rem; font-size: 0.8rem; line-height: 1.4; color: var(--tinte-2); }
.ss-kachel__text em { display: block; margin-block-start: 0.3rem; font-style: normal; font-weight: 700; font-size: 0.78rem; color: var(--b-d); }
.ss-kachel__haken { position: absolute; inset-block-start: 0.7rem; inset-inline-end: 0.7rem; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--c); color: var(--b); opacity: 0; transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.ss-kachel.ist-gewaehlt, .ss-kachel:has(input:checked) { border-color: var(--b); background: var(--b); }
.ss-kachel.ist-gewaehlt .ss-kachel__text b, .ss-kachel:has(input:checked) .ss-kachel__text b,
.ss-kachel.ist-gewaehlt .ss-kachel__text small, .ss-kachel:has(input:checked) .ss-kachel__text small,
.ss-kachel.ist-gewaehlt .ss-kachel__text em, .ss-kachel:has(input:checked) .ss-kachel__text em { color: var(--c); }
.ss-kachel.ist-gewaehlt .ss-kachel__haken, .ss-kachel:has(input:checked) .ss-kachel__haken { opacity: 1; transform: none; }
.ss-lb__kacheln--g .ss-kachel__text { padding-block: 1.3rem 1.35rem; }
.ss-lb__kacheln--g .ss-kachel__text b { font-size: 1.7rem; }
@media (max-width: 47.99rem) {
  .ss-lb__kacheln--studio { gap: 0.55rem; }
  .ss-kachel--studio .ss-kachel__text { padding: 0.75rem 2.5rem 0.8rem 0.85rem; }
  .ss-kachel--studio .ss-kachel__text b { font-size: 1.12rem; }
}
@media (min-width: 48rem) {
  .ss-lb__kacheln--studio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ss-lb__kacheln--g { max-inline-size: 40rem; }
}
.ss-lb__stufen { border: 2px solid rgba(11, 42, 91, 0.16); border-radius: 8px; overflow: hidden; background: var(--karte-2); }
.ss-lb-stufe { position: relative; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 0.85rem 2.9rem 0.85rem 0.9rem;
  cursor: pointer; transition: background-color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.ss-lb-stufe + .ss-lb-stufe { border-block-start: 2px solid rgba(11, 42, 91, 0.1); }
.ss-lb-stufe[hidden] { display: none; }
.ss-lb-stufe input { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ss-lb-stufe:hover { background: rgba(11, 42, 91, 0.05); }
.ss-lb-stufe:has(input:focus-visible) { outline: 3px solid var(--b); outline-offset: -3px; }
.ss-lb-stufe__n { display: grid; justify-items: center; }
.ss-lb-stufe__n b { font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--tinte); }
.ss-lb-stufe__n small { font-size: 0.66rem; font-weight: 700; color: var(--tinte-2); }
.ss-lb-stufe__mitte { display: grid; gap: 0.12rem; min-inline-size: 0; }
.ss-lb-stufe__preis b { font-weight: 900; font-size: 1.4rem; line-height: 1; color: var(--tinte); font-variant-numeric: tabular-nums; }
.ss-lb-stufe__preis small { margin-inline-start: 0.2rem; font-size: 0.82rem; font-weight: 700; color: var(--tinte-2); }
.ss-lb-stufe__info { font-size: 0.76rem; color: var(--tinte-2); line-height: 1.4; }
.ss-lb-stufe__info s { text-decoration-color: var(--b); text-decoration-thickness: 1.5px; }
.ss-lb-stufe__spar { font-size: 0.8rem; font-weight: 800; color: var(--tinte); }
.ss-lb-stufe__tag { margin-inline-start: 0.6rem; font-size: 0.74rem; font-weight: 800; color: var(--b); white-space: nowrap; vertical-align: 0.15em; }
.ss-lb-stufe .ss-kachel__haken { inset-block-start: 50%; inset-inline-end: 0.75rem; transform: translateY(-50%) scale(0.6); }
.ss-lb-stufe.ist-gewaehlt, .ss-lb-stufe:has(input:checked) { background: var(--b); }
.ss-lb-stufe.ist-gewaehlt :is(b, small, .ss-lb-stufe__info, .ss-lb-stufe__spar, .ss-lb-stufe__tag),
.ss-lb-stufe:has(input:checked) :is(b, small, .ss-lb-stufe__info, .ss-lb-stufe__spar, .ss-lb-stufe__tag) { color: var(--c); }
.ss-lb-stufe:has(input:checked) .ss-lb-stufe__info s { text-decoration-color: var(--c); }
.ss-lb-stufe.ist-gewaehlt .ss-kachel__haken, .ss-lb-stufe:has(input:checked) .ss-kachel__haken { opacity: 1; transform: translateY(-50%); }
.ss-lb__schritt--termin { padding: 0; block-size: 100%; }
.ss-lb__rahmen { position: relative; block-size: 100%; min-block-size: 24rem; background: #fff; }
.ss-lb__rahmen iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; background: #fff; }
.ss-lb__laden { position: absolute; inset: 0; z-index: 1; margin: 0; display: grid; place-content: center; justify-items: center; gap: 1.1rem; background: var(--t);
  color: var(--c); font-family: var(--display); font-weight: 800; font-size: 1.5rem; transition: opacity 0.45s ease; }
.ss-lb__laden.ist-weg { opacity: 0; pointer-events: none; }
.ss-lb__strahl { position: relative; display: block; inline-size: 9rem; block-size: 4px; background: rgba(246, 238, 227, 0.16); overflow: hidden; border-radius: 2px; }
.ss-lb__strahl::after { content: ""; position: absolute; inset-block: 0; inline-size: 40%; background: var(--b-h); animation: ss-strahl 1.3s ease-in-out infinite; }
@keyframes ss-strahl { from { transform: translateX(-120%); } to { transform: translateX(300%); } }
.ss-lb__notfall { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; margin: 0; padding: 0.8rem 1rem; font-size: 0.85rem; text-align: center;
  background: var(--t); color: var(--c-2); }
.ss-lb__notfall[hidden] { display: none; }
.ss-lb__link { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; color: var(--c); text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.ss-lb__fuss { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1.2rem; border-block-start: 2px solid rgba(11, 42, 91, 0.1); min-block-size: 3.2rem; }
.ss-lb__zurueck { appearance: none; display: inline-flex; align-items: center; gap: 0.3rem; border: 2px solid var(--t); border-radius: 6px; background: transparent;
  color: var(--tinte); font: inherit; font-size: 0.88rem; font-weight: 700; padding: 0.45rem 0.85rem 0.45rem 0.6rem; cursor: pointer; white-space: nowrap; }
.ss-lb__zurueck:hover { background: rgba(11, 42, 91, 0.07); }
.ss-lb__zurueck[hidden] { display: none; }
.ss-lb__zusammen { font-size: 0.84rem; color: var(--tinte-2); line-height: 1.5; min-inline-size: 0; }
.ss-lb__chip { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; font-size: 0.84rem; font-weight: 700; color: var(--tinte); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-decoration-color: rgba(11, 42, 91, 0.5); text-underline-offset: 0.25em; }
.ss-lb__chip:hover { color: var(--b); text-decoration-color: var(--b); }
@media (max-width: 47.99rem) {
  .ss-lb { padding: 0; }
  .ss-lb__panel, .ss-lb[data-schritt="4"] .ss-lb__panel { inline-size: 100%; block-size: 100%; block-size: 100dvh; max-block-size: none; border-radius: 0; box-shadow: none; }
  .ss-lb__kopf { padding-block-start: calc(0.9rem + env(safe-area-inset-top)); }
  .ss-lb__fuss { padding-block-end: calc(0.7rem + env(safe-area-inset-bottom)); }
}


@media (prefers-reduced-motion: reduce) {
  .ss-btn, .ss-kachel, .ss-kachel__haken, .ss-lb-stufe, .ss-lb, .ss-lb__panel, .ss-lb__laden, .ss-leiste { transition: none; }
    .ss-js .ss-lb__schritt { opacity: 1; transform: none; transition: none; }
  .ss-lb__strahl::after { animation: none; inline-size: 100%; }
  .ss-schild__rab.ist-wackel { animation: none; }
}
.ss-lb__punkte--drei { grid-template-columns: repeat(3, 1fr); }


/* Erklaerung hinter dem Sonnen-Badge */
html.ss-warum-offen, html.ss-warum-offen body { overflow: hidden; }
.ss-warum { inline-size: min(calc(100vw - 1.5rem), 34rem); max-block-size: calc(100dvh - 1.5rem); padding: 0; border: 0; border-radius: 8px; background: var(--grund, #54c6f5); color: var(--navy); font-family: var(--sans); box-shadow: 0 30px 80px -24px rgba(6, 16, 40, 0.65); overflow: auto; overscroll-behavior: contain; }
.ss-warum::backdrop { background: rgba(11, 42, 91, 0.66); }
.ss-warum[open] { animation: ss-warum-rein 0.34s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes ss-warum-rein { from { opacity: 0; transform: translateY(14px) scale(0.94) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
.ss-warum__panel { position: relative; display: grid; gap: 0.6rem; padding: 1rem 1rem 1.1rem; }
.ss-warum__zu { position: absolute; inset-block-start: 0.55rem; inset-inline-end: 0.55rem; inline-size: 2.6rem; block-size: 2.6rem; display: grid; place-items: center; border: 0; border-radius: 6px; background: var(--navy); color: #fff; cursor: pointer; }
.ss-warum__zu svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ss-warum__titel { padding-inline-end: 3rem; font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 7vw, 2.3rem); line-height: 1; letter-spacing: -0.03em; }
.ss-warum__lead { margin-block-start: -0.25rem; font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 4vw, 1.2rem); line-height: 1.15; }
.ss-plan { display: grid; gap: 0.2rem; padding: 0.65rem 0.65rem 0.75rem; background: var(--weiss); border-radius: 6px; }
.ss-plan__zeile { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)) 4.1rem; align-items: center; column-gap: 0.12rem; }
.ss-plan__monat { font-size: 0.72rem; font-weight: 700; line-height: 1.1; text-align: center; color: var(--text-2); }
.ss-plan__monat--jetzt { color: var(--pink); font-weight: 800; }
.ss-plan__monat--ziel { font-family: var(--display); font-weight: 800; color: var(--navy); font-size: 0.8rem; }
.ss-plan__titel { margin-block-start: 0.35rem; font-family: var(--display); font-weight: 800; font-size: 0.92rem; line-height: 1.1; }
.ss-plan__zelle { display: grid; place-items: center; block-size: 1.7rem; background: rgba(11, 42, 91, 0.06); }
.ss-plan__zelle--an { background: #ffd23f; }
.ss-plan__zeile--spaet .ss-plan__zelle--an { background: #ffb4a8; }
.ss-plan__zelle img { display: block; inline-size: 1rem; block-size: auto; }
.ss-plan__ziel { display: grid; place-items: center; block-size: 1.7rem; font-family: var(--display); font-weight: 800; font-size: 0.82rem; line-height: 1; border-radius: 0 4px 4px 0; }
.ss-plan__ziel--gut { background: var(--navy); color: #fff; }
.ss-plan__ziel--schlecht { color: var(--rot); }
.ss-warum__gruende { display: grid; gap: 0.4rem; font-size: 0.95rem; line-height: 1.26; }
.ss-warum__gruende li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); column-gap: 0.5rem; align-items: start; }
.ss-warum__gruende .ss-ico { --ico: 2.1rem; }
.ss-warum__gruende b { font-family: var(--display); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .ss-warum-knopf, .ss-warum-knopf__strahlen, .ss-warum[open] { animation: none; } }
.ss-kachel--studio .ss-kachel__text b { display: inline-flex; align-items: center; gap: 0.3rem; }
.ss-kachel--studio .ss-ico { --ico: 1.15em; }
.ss-laser__teil figcaption .ss-ico { display: none; }
@media (min-width: 64rem) {
  html[lang="ru"] .ss-karten--pakete .ss-platz, html[lang="tr"] .ss-karten--pakete .ss-platz, html[lang="en"] .ss-karten--pakete .ss-platz { --fh: clamp(9rem, calc(100vh - 38.5rem), 19rem); }
  html[lang="ru"] .ss-karten--pakete .ss-karte__name { font-size: 1.12rem; }
  html[lang="ru"] .ss-karten--gratis .ss-platz { --fh: clamp(10rem, calc(100vh - 34.5rem), 22rem); }
}
/* Schwebendes Bewertungssiegel verdeckte Karte und Knopf (Codex-Pruefung 02.11.): auf diesen Seiten aus, die Bewertung steht im Fuss */
body.ss-seite .pe-pro-seal { display: none !important; }