/* /halloween2026 (Spec 042, Fassung 2 nach Spec 043) · Halloween-Special als Psychothriller-Filmplakat · Praefix h26-
   Fast schwarz, Knochenweiss, Laserrot; Sektionen in Blutrot, Petrol, Knochenweiss und Anthrazit mit geschwungenen Diagonalkanten (SVG).
   Buttons 6 px, Radius hoechstens 8 px, kein text-shadow, keine farbigen Kanten an Boxen, Icons frei ohne Kasten, kein KI-Hinweis (Jasper 07.10.).
   Hintergrundvideos nach dem iPhone-Rezept (kein poster-Attribut, Poster als CSS-Hintergrund, Video absolut zentriert, Verlauf als ::after). */

@font-face { font-family: "H26 Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/anton-v27-latin-400.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+2212; }
@font-face { font-family: "H26 Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/anton-v27-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "H26 Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-sans-v4-latin_latin-ext-regular.woff2") format("woff2"); }
@font-face { font-family: "H26 Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/instrument-sans-v4-latin_latin-ext-500.woff2") format("woff2"); }
@font-face { font-family: "H26 Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/instrument-sans-v4-latin_latin-ext-600.woff2") format("woff2"); }
@font-face { font-family: "H26 Zahl"; font-style: normal; font-weight: 900; font-stretch: 86% 900; font-stretch: 80% 100%; font-display: swap;
  src: url("/assets/fonts/archivo-zahl-wght800-900-wdth80-100.woff2") format("woff2"); }   /* Archivo variabel, Preise 900 bei 86 % Breite */

body.h26-seite {
  --h26-s: #070708; --h26-k: #ece7df; --h26-g: #8d877f; --h26-r: #e3261c; --h26-gruen: #3ddc84; --h26-gruen-d: #1b8a4b;
  --h26-l: rgba(236, 231, 223, 0.13); --h26-rand: 1.25rem; --h26-max: 74rem; --h26-kante: 2rem; --h26-blende: 6rem;
  background: var(--h26-s);
}
body.h26-seite::before { display: none; }

/* ------------------------------------------------------------ Menueleiste: oben durchsichtig ueber dem Video, danach dunkel */
body.h26-seite nav.nav { background: transparent; border-block-end-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color 0.35s ease, border-color 0.35s ease; }
body.h26-seite.h26-nav-fest nav.nav, body.h26-seite.nav-open nav.nav { background: rgba(7, 7, 8, 0.94); border-block-end-color: rgba(236, 231, 223, 0.08); }
body.h26-seite nav.nav .nav-links > li > button { color: var(--h26-k); }
body.h26-seite nav.nav .nav-links > li > button:hover,
body.h26-seite nav.nav .nav-links > li > button[aria-expanded="true"] { color: #fff; }
body.h26-seite nav.nav a.nav-cta { background: var(--h26-k); color: var(--h26-s); border-color: var(--h26-k); border-radius: 6px; }
body.h26-seite nav.nav a.nav-cta:hover { background: #fff; border-color: #fff; color: var(--h26-s); }
body.h26-seite nav.nav .lang-switch, body.h26-seite nav.nav .lang-switch-btn { color: var(--h26-k); background: transparent; border-color: rgba(255, 255, 255, 0.3); }
body.h26-seite nav.nav .nav-mobile-toggle { color: var(--h26-k); border-color: rgba(255, 255, 255, 0.3); }
body.h26-seite footer.footer { background: #050506; margin-top: 0; }

.h26 { background: var(--h26-s); color: var(--h26-k); font-family: "H26 Sans", "Instrument Sans", system-ui, sans-serif; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
.h26 *, .h26 *::before, .h26 *::after { box-sizing: border-box; }
.h26 :where(p, h1, h2, h3, ul, ol) { margin: 0; }   /* :where, damit die Abstaende der Bausteine greifen */
.h26 img { max-inline-size: 100%; }
.h26 :where(section) { padding: 0; }
.h26 a:focus-visible, .h26 button:focus-visible, .h26 summary:focus-visible { outline: 2px solid var(--h26-r); outline-offset: 3px; }

/* ------------------------------------------------------------ Hintergrundfilme */
.h26-film { position: absolute; inset: 0; overflow: hidden; background: var(--h26-s) var(--poster) 50% 28% / cover no-repeat; }
@media (min-width: 56rem) { .h26-film[data-name-d] { background-image: var(--poster-d); background-position: 50% 50%; } }
/* Video exakt wie das Poster skaliert (cover, gleiche Position): vorher lief es in Originalgroesse und sprang beim Start gegenueber dem Poster */
.h26-film__v { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 28%;
  transform: translateZ(0); z-index: 1; opacity: 0; transition: opacity 1.4s ease; }
@media (min-width: 56rem) { .h26-film[data-name-d] .h26-film__v { object-position: 50% 50%; } }
.h26-film__v.ist-an { opacity: 1; }
.h26-film::after { content: ""; position: absolute; inset: 0; z-index: 2; transform: translateZ(0); pointer-events: none; }

/* ------------------------------------------------------------ Farbige Sektionen und weiche Blenden (Spec 045: keine Diagonalkanten)
   ::before blendet oben aus der Vorgaengerfarbe (--h26-vor, als "r g b"), ::after unten in die Folgefarbe (--h26-nach). Geeaste Stopps,
   damit kein harter Rand entsteht. Inhalt liegt per z-index ueber den Blenden und ueber dem Plakat-Hintergrund (.h26-plakat). */
.h26-farbe { position: relative; isolation: isolate; background: var(--h26-s); }   /* Spec 045b: durchgehend Schwarz, nur die Motive loesen sich auf */
.h26-farbe > * { position: relative; z-index: 2; }
.h26-farbe::before, .h26-farbe::after { content: ""; position: absolute; inset-inline: 0; block-size: var(--h26-blende); z-index: 1; pointer-events: none; display: none; }
.h26-farbe::before { inset-block-start: 0; background: linear-gradient(to bottom, rgb(var(--h26-vor)) 0%, rgb(var(--h26-vor) / 0.78) 18%,
  rgb(var(--h26-vor) / 0.5) 40%, rgb(var(--h26-vor) / 0.24) 64%, rgb(var(--h26-vor) / 0.07) 86%, rgb(var(--h26-vor) / 0) 100%); }
.h26-farbe::after { inset-block-end: 0; background: linear-gradient(to top, rgb(var(--h26-nach)) 0%, rgb(var(--h26-nach) / 0.78) 18%,
  rgb(var(--h26-nach) / 0.5) 40%, rgb(var(--h26-nach) / 0.24) 64%, rgb(var(--h26-nach) / 0.07) 86%, rgb(var(--h26-nach) / 0) 100%); }
.h26-top { --h26-vor: 7 7 8; }
.h26-pakete { --h26-vor: 35 6 6; --h26-nach: 226 226 224; }   /* unten ins Hellgrau des Stille-Motivs */
.h26-faq { --h26-vor: 243 238 224; --h26-nach: 7 7 8; }
/* keine Farbblenden mehr (Jasper 07.10.: sahen billig aus); die Plakate laufen per Maske ins Schwarz */
.h26-farbe > .h26-plakat { position: absolute; inset: 0; z-index: 0; background: var(--bild) var(--lage, 50% 50%) / cover no-repeat; opacity: var(--deckung, 0.5);
  pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 70%, transparent 100%); }
@media (min-width: 56rem) { .h26-farbe > .h26-plakat { background-image: var(--bild-d); background-position: var(--lage-d, 50% 50%); } }
}
.h26-farbe--blut { --h26-oben: #4b0c0b; --h26-unten: #230606; }
.h26-farbe--petrol { --h26-oben: #0e2a2e; --h26-unten: #071618; }
.h26-farbe--knochen { --h26-oben: #ece7df; --h26-unten: #ddd5c8; color: #15100e; }
.h26-farbe--nacht { --h26-oben: #18191c; --h26-unten: #0f1012; }
.h26-farbe--creme { --h26-oben: #f8f5e6; --h26-unten: #f3eee0; color: #15100e; }   /* Papierton der Ausschnitt-Grafik (Spec 045) */
@media (min-width: 48rem) { body.h26-seite { --h26-blende: 10rem; } }
@media (min-width: 120rem) { body.h26-seite { --h26-blende: 14rem; } }

/* ------------------------------------------------------------ Buttons, Links, Stempel */
.h26-btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 3.25rem; padding: 0 2.1rem; border-radius: 6px;
  background: var(--h26-k); color: var(--h26-s); font-weight: 600; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer;
  transition: background-color 0.25s ease; text-align: center; }
.h26-btn:hover { background: #fff; color: var(--h26-s); }
.h26-btn--breit { inline-size: 100%; }
.h26-btn--rot { background: var(--h26-r); color: #fff; }
.h26-btn--rot:hover { background: #ff3a2e; color: #fff; }
.h26-link { color: var(--h26-k); font-size: 0.95rem; text-decoration: underline; text-decoration-color: rgba(236, 231, 223, 0.35);
  text-underline-offset: 0.3em; }
.h26-link:hover { text-decoration-color: var(--h26-r); color: #fff; }
.h26-stempel { display: inline-block; background: var(--h26-r); color: #fff; font-family: "H26 Anton", "Anton", Impact, sans-serif; font-weight: 400;
  font-size: 1.5rem; line-height: 1; padding: 0.3em 0.45em 0.26em; border-radius: 4px; transform: rotate(-5deg); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.h26-stempel.ist-wackel { animation: h26-wackel 0.7s ease-in-out 1; }
@keyframes h26-wackel { 0%, 100% { transform: rotate(-5deg) scale(1); } 30% { transform: rotate(-10deg) scale(1.12); }
  60% { transform: rotate(-2deg) scale(1.05); } }

/* ------------------------------------------------------------ Hero: Filmplakat unter der Menueleiste */
.h26-hero { position: relative; margin-block-start: calc(-1 * var(--h26-nav, 64px)); min-block-size: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; isolation: isolate; }
.h26-hero__film::after { background: linear-gradient(to bottom, rgba(7, 7, 8, 0.6) 0%, rgba(7, 7, 8, 0) 16%, rgba(7, 7, 8, 0) 34%,
  rgba(7, 7, 8, 0.8) 58%, #0d0505 86%, #1c0606 100%); }
@media (max-width: 55.99rem) {
  /* Telefon: Film oben verankert und kuerzer, damit Achsel und Handstueck ueber dem Titel stehen; darunter laeuft der Verlauf in die Grundfarbe */
  /* Telefon: das Plakat (Ensemble oben, Duenen unten) fuellt den Bildschirm, Titel und Preis beginnen in der Bildmitte ueber den Duenen */
  .h26-hero { background: var(--h26-s); align-items: flex-start; }
  .h26-hero__film { inset: 0 0 auto 0; block-size: 100svh; }
  .h26-hero__film, .h26-hero__film .h26-film__v { background-position: 50% 0; object-position: 50% 0; }
  .h26-hero__film::after { background: linear-gradient(to bottom, rgba(7, 7, 8, 0.3) 0%, rgba(7, 7, 8, 0) 16%, rgba(7, 7, 8, 0) 46%, rgba(7, 7, 8, 0.72) 66%, #070708 100%); }
}
.h26-hero__inhalt { position: relative; z-index: 4; inline-size: 100%; max-inline-size: var(--h26-max); margin: 0 auto;
  padding: 45svh var(--h26-rand) 2.5rem; text-align: center; }   /* Telefon: Titel direkt unter dem Ensemble, Preis bei rund 60 % (Jasper 07.10.) */
.h26-praes { font-size: 0.8125rem; font-weight: 500; color: rgba(236, 231, 223, 0.7); letter-spacing: 0.02em; }
.h26-titel { margin: 0.55rem auto 0; line-height: 0; }
.h26-titel img { display: block; inline-size: min(100%, 52rem); block-size: auto; margin: 0 auto; }
.h26-tagline { margin-block-start: 0.9rem; font-size: clamp(1.1rem, 4.4vw, 1.5rem); line-height: 1.35; color: var(--h26-k); }
.h26-tagline strong { color: #fff; font-weight: 600; white-space: nowrap; }
.h26-tagline__preis { display: block; margin-block-start: 0.15rem; font-family: "H26 Zahl", system-ui, sans-serif; font-weight: 900; font-stretch: 86%;
  font-size: clamp(2.6rem, 12vw, 3.6rem); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.h26-tagline__preis small { font-family: "H26 Sans", system-ui, sans-serif; font-weight: 600; font-size: 0.42em; margin-inline-start: 0.12em; }
.h26-deal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 0.7rem; margin-block-start: 0.7rem; }
.h26-deal__preis { font-size: 0.9rem; color: rgba(236, 231, 223, 0.75); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h26-deal__preis s { font-weight: 500; color: rgba(236, 231, 223, 0.8);
  text-decoration-color: var(--h26-r); text-decoration-thickness: 2px; margin-inline-end: 0.2rem; }
.h26-deal__spar { color: var(--h26-gruen); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.h26-release { margin-block-start: 0.55rem; font-size: 0.9rem; color: #ff4b3f; font-weight: 500; }
.h26-release__uhr { color: rgba(236, 231, 223, 0.7); font-variant-numeric: tabular-nums; margin-inline-start: 0.35rem; font-weight: 400; }
.h26-hero__knoepfe { display: flex; gap: 1.2rem; align-items: center; justify-content: center; margin-block-start: 0.9rem; }
.h26-hero__knoepfe .h26-btn { flex: 0 1 15rem; min-inline-size: 0; }
.h26-hero__knoepfe .h26-link { white-space: nowrap; }
.h26-stempel--hero { font-size: 1.25rem; }

/* Billing Block: Zeilen per JS auf gleiche Breite, ohne JS zentriert */
.h26-billing { inline-size: min(100%, 30rem); margin: 2rem auto 0; font-family: "H26 Anton", "Anton", Impact, sans-serif; font-weight: 400;
  text-align: center; letter-spacing: 0.03em; }
.h26-billing__z { display: block; white-space: nowrap; line-height: 1.12; color: rgba(236, 231, 223, 0.66); font-size: 0.82rem; }
.h26-billing__in { display: inline-block; }
.h26-billing__z i { font-style: normal; opacity: 0.4; margin: 0 0.45em; }
.h26-billing__z--klein { color: rgba(236, 231, 223, 0.55); }
.h26-billing__z--paket { color: #fff; font-size: 1.7rem; line-height: 1.02; margin-block: 0.12em 0.1em; }
.h26-billing__z--datum { color: #ff4b3f; font-size: 1.2rem; margin-block-start: 0.15em; }

@media (min-width: 56rem) {
  .h26-hero { min-block-size: min(100svh, 64rem); align-items: center; }
  .h26-hero__film::after { background: linear-gradient(to bottom, rgba(7, 7, 8, 0.55) 0%, rgba(7, 7, 8, 0) 14%),
    linear-gradient(to right, #070708 0%, rgba(7, 7, 8, 0.88) 30%, rgba(7, 7, 8, 0.12) 58%, rgba(7, 7, 8, 0) 70%),
    linear-gradient(to bottom, rgba(7, 7, 8, 0) 72%, #1c0606 100%); }
  .h26-hero__inhalt { padding: calc(var(--h26-nav, 72px) + 3rem) var(--h26-rand) calc(var(--h26-kante) + 2rem); text-align: start; display: grid;
    justify-items: start; }
  .h26-hero__inhalt > * { max-inline-size: 36rem; }
  .h26-titel { margin-inline: 0; }
  .h26-titel img { margin: 0; inline-size: 36rem; }
  .h26-deal, .h26-hero__knoepfe { justify-content: flex-start; }
  .h26-billing { margin-inline: 0; inline-size: 28rem; }
}
@media (min-width: 120rem) { .h26-hero__inhalt > *, .h26-titel img { max-inline-size: 44rem; inline-size: 44rem; } .h26-billing { inline-size: 34rem; } }

/* ------------------------------------------------------------ Hauptpaket (Blutrot): eine Produktkarte, Knappheit offen darunter */
.h26-top__innen { max-inline-size: var(--h26-max); margin: 0 auto; padding: 1.8rem var(--h26-rand) 3.2rem; }
.h26-top__kicker { margin-block-end: 0.8rem; }
.h26 .h26-nur-herren { display: none; }
.h26[data-g="herren"] .h26-nur-herren { display: block; }
.h26[data-g="herren"] .h26-nur-damen { display: none; }
.h26-kicker { font-size: 0.8125rem; font-weight: 600; color: #ff4b3f; letter-spacing: 0.02em; }

.h26-h2 { font-family: "H26 Anton", "Anton", Impact, sans-serif; font-weight: 400; font-size: clamp(2.3rem, 8.4vw, 3.9rem); line-height: 1.02;
  color: var(--h26-k); margin: 0.4rem 0 1.1rem; letter-spacing: 0; }
.h26-h2--klein { font-size: clamp(1.7rem, 5.6vw, 2.5rem); margin: 0; }

/* Die Produktkarte: alles, was zum Paket gehoert, auf einer hellen Flaeche */
.h26-produkt { display: grid; background: #f2ede5; color: #141010; border-radius: 8px; overflow: hidden; }
.h26-produkt__bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; }
@media (max-width: 55.99rem) {
  /* Telefon: Kartenvideo samt Poster naeher heran, damit Achsel und Hueftlinie gross genug sind */
  .h26-produkt .h26-top__film { transform: scale(1.35); transform-origin: 52% 16%; }
  .h26-produkt .h26-stempel--bild { font-size: 1.9rem; inset-block-start: 0.8rem; inset-inline-start: 0.8rem; }
}
.h26-top__film::after { background: linear-gradient(to bottom, rgba(7, 7, 8, 0) 75%, rgba(7, 7, 8, 0.35) 100%); }
.h26-stempel--bild { position: absolute; z-index: 5; inset-block-start: 1rem; inset-inline-start: 1rem; font-size: clamp(2.2rem, 10vw, 3.4rem); }
.h26-produkt__text { padding: 1.1rem 1.15rem 1.2rem; }
.h26-produkt__name { font-family: "H26 Anton", "Anton", Impact, sans-serif; font-weight: 400; font-size: clamp(1.55rem, 7.2vw, 3.2rem); line-height: 1.02;
  color: #120d0b; letter-spacing: 0; white-space: nowrap; }
.h26-produkt__zonen { margin-block-start: 0.3rem; color: #5b524b; line-height: 1.4; font-size: 0.8125rem; }
.h26-produkt__preis { margin-block: 0.9rem 0.9rem; }
.h26-produkt__statt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; font-size: 0.95rem; color: #5b524b; margin-block-start: 0.2rem; }
.h26-spar { font-weight: 700; color: var(--h26-gruen-d); white-space: nowrap; }
.h26-spar span { display: inline-block; }
.h26 .h26-produkt s { color: #5b524b; text-decoration-color: var(--h26-r); text-decoration-thickness: 2px; }
.h26-produkt__zahl { font-family: "H26 Zahl", "Archivo", system-ui, sans-serif; font-weight: 900; font-stretch: 86%; font-size: clamp(2.9rem, 14vw, 5.2rem); line-height: 0.95;
  color: #0d0a09; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.h26-produkt__zahl span { display: inline-block; transform-origin: 0 60%; }
.h26-produkt__zahl small { font-family: "H26 Sans", system-ui, sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: 0; color: #2a2421; }
.h26-produkt__gesamt { font-size: 0.8125rem; color: #6b625a; line-height: 1.45; margin-block-start: 0.15rem; }
.h26-produkt__klein { margin-block-start: 0.55rem; font-size: 0.8125rem; color: #6b625a; text-align: center; }

/* Knappheit: EIN Zeitstrahl. Balken = Halloween-Zeitraum (gefuellt = verstrichen), daneben ein kurzes Stueck „ab 1. November“;
   darunter der Preis jetzt (gross, weiss) und der Preis danach (grau). */
.h26-knapp { margin-block-start: 2.4rem; }
.h26-knapp__titel { font-size: 1rem; color: rgba(236, 231, 223, 0.8); }
.h26-knapp__titel b { color: #fff; font-weight: 600; }
.h26-strahl { display: grid; grid-template-columns: minmax(0, 1fr) 7.6rem; column-gap: 4px; row-gap: 0.8rem; margin-block-start: 0.8rem; }
.h26-strahl__spur, .h26-strahl__danach { block-size: 0.75rem; border-radius: 3px; }
.h26-strahl__spur { position: relative; overflow: hidden; background: rgba(236, 231, 223, 0.16); }
.h26-strahl__spur i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w, 0%); border-radius: 3px;
  background: linear-gradient(to right, #9d120c, #ff3a2e); transition: inline-size 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.h26-strahl__danach { background: rgba(236, 231, 223, 0.42); }
.h26-strahl__preis { display: grid; gap: 0.1rem; font-size: 0.8125rem; color: rgba(236, 231, 223, 0.7); }
.h26-strahl__preis b { font-family: "H26 Zahl", system-ui, sans-serif; font-weight: 900; font-stretch: 86%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h26-strahl__preis small { font-family: "H26 Sans", system-ui, sans-serif; font-weight: 500; font-size: 0.8rem; }
.h26-strahl__preis--jetzt b { font-size: clamp(1.7rem, 7.5vw, 2.4rem); color: #fff; }
.h26-strahl__preis--danach b { font-size: clamp(1.1rem, 4.6vw, 1.45rem); color: rgba(236, 231, 223, 0.6); }
.h26-strahl__preis--danach small { font-size: 0.7rem; }
@media (min-width: 56rem) {
  .h26-produkt { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .h26-produkt__bild { aspect-ratio: auto; min-block-size: 100%; }
  .h26-produkt__text { padding: 2.4rem 2.6rem 2.4rem; align-self: center; }
  .h26-knapp { max-inline-size: 46rem; margin-block-start: 3rem; }
  .h26-strahl { grid-template-columns: minmax(0, 1fr) 11rem; }
  .h26-top__innen { padding-block: 3rem 6rem; }
}

/* ------------------------------------------------------------ Alle Pakete als Produktkarten (Petrol) */
.h26 .h26-pakete { padding: 2rem var(--h26-rand) calc(var(--h26-kante) + 2.5rem); }
.h26-pakete__kopf { display: grid; gap: 0.9rem; max-inline-size: var(--h26-max); margin: 0 auto 1.4rem; }
.h26-pakete__hinweis { color: rgba(236, 231, 223, 0.72); font-size: 0.9rem; }
.h26-karten { display: grid; gap: 1.25rem; max-inline-size: var(--h26-max); margin: 0 auto; }
.h26-karte { position: relative; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden;
  background: linear-gradient(165deg, #153a40 0%, #0b2226 60%, #091b1e 100%); border: 1px solid rgba(236, 231, 223, 0.09); }
.h26-karte--top { background: linear-gradient(165deg, #5a100e 0%, #320807 60%, #230606 100%); }
.h26-karte__bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1f22; }
.h26-karte__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s ease; }
.h26-karte:hover .h26-karte__img { transform: scale(1.06); }
.h26-karte__bild::after { content: ""; position: absolute; inset: auto 0 0 0; block-size: 40%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(9, 27, 30, 0), rgba(11, 34, 38, 0.95)); }
.h26-karte--top .h26-karte__bild::after { background: linear-gradient(to bottom, rgba(50, 8, 7, 0), rgba(70, 12, 11, 0.95)); }
.h26-karte .h26-stempel { position: absolute; z-index: 2; inset-block-start: 0.9rem; inset-inline-start: 0.9rem; font-size: 2rem; }
.h26-karte__text { display: flex; flex-direction: column; flex: 1; padding: 0.3rem 1.15rem 1.2rem; }
.h26-karte__kicker { font-size: 0.75rem; font-weight: 600; color: #ff8a7e; letter-spacing: 0.02em; }
.h26-karte__name { font-family: "H26 Anton", "Anton", Impact, sans-serif; font-weight: 400; font-size: clamp(1.3rem, 5.9vw, 2rem); line-height: 1.05;
  color: #fff; margin-block-start: 0.2rem; letter-spacing: 0; }
.h26-karte__zonen { font-size: 0.8125rem; color: rgba(236, 231, 223, 0.7); line-height: 1.4; margin-block-start: 0.25rem; }
.h26-infos { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.8rem; margin-block: 0.8rem 0.9rem; }
.h26-infos li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.45rem; align-items: center; font-size: 0.8125rem; color: rgba(236, 231, 223, 0.88); white-space: nowrap; }
.h26-infos li[hidden] { display: none; }
.h26-icon { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: #ff8a7e; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.h26-karte__preis { margin-block-start: auto; padding-block: 0.8rem 0.9rem; border-block-start: 1px solid rgba(236, 231, 223, 0.12); }
.h26-karte__statt { font-size: 0.875rem; color: rgba(236, 231, 223, 0.7); margin-inline-start: 0.35rem; }
.h26 .h26-karte s { color: rgba(236, 231, 223, 0.75); text-decoration-color: var(--h26-r); text-decoration-thickness: 2px; }
.h26-karte__haupt { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; margin-block-start: 0.1rem; }
.h26-karte__zahl { font-family: "H26 Zahl", system-ui, sans-serif; font-weight: 900; font-stretch: 86%; font-size: clamp(2.4rem, 11vw, 2.9rem); line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; display: inline-block; transform-origin: 0 70%; }
.h26-karte__haupt small { font-size: 0.875rem; color: rgba(236, 231, 223, 0.72); }
.h26-karte__gesamt { display: flex; flex-wrap: wrap; gap: 0 0.6rem; font-size: 0.8125rem; color: rgba(236, 231, 223, 0.72); margin-block-start: 0.3rem; }
.h26-karte .h26-spar { color: var(--h26-gruen); }
/* Einblenden: herauszoomen (nur mit JS) */
.h26-js .h26-karte { opacity: 0; transform: scale(1.07); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--h26-verz, 0s); }
.h26-js .h26-karte.ist-da { opacity: 1; transform: none; }
@media (min-width: 48rem) {
  .h26-pakete__kopf { grid-template-columns: 1fr auto; align-items: end; gap: 2rem; }
  .h26-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75rem) {
  .h26-karten { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .h26-karte { grid-column: span 2; }
  .h26-karte:nth-child(4), .h26-karte:nth-child(5) { grid-column: span 3; }
  .h26-karte:nth-child(4) .h26-karte__bild, .h26-karte:nth-child(5) .h26-karte__bild { aspect-ratio: 16 / 9; }
}

/* ------------------------------------------------------------ Szene (Stille-Motiv auf Schwarz, Text links bzw. unten) */
.h26-szene { position: relative; min-block-size: 72svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.h26-szene__film::after { background: linear-gradient(to bottom, rgba(7, 7, 8, 0.6) 0%, rgba(7, 7, 8, 0) 16%, rgba(7, 7, 8, 0) 50%, rgba(7, 7, 8, 0.85) 80%, #070708 100%); }
.h26-szene__text { position: relative; z-index: 4; inline-size: 100%; max-inline-size: var(--h26-max); margin: 0 auto;
  padding: 0 var(--h26-rand) 3rem; }
.h26-zitat { font-family: "H26 Anton", "Anton", Impact, sans-serif; font-size: clamp(2.1rem, 9vw, 5.6rem); line-height: 0.98; color: var(--h26-k); }
.h26-szene__sub { margin-block-start: 1rem; color: rgba(236, 231, 223, 0.7); font-size: 0.95rem; }
@media (min-width: 56rem) {
  .h26-szene { min-block-size: min(90vh, 60rem); align-items: center; }
  .h26-szene__film::after { background: linear-gradient(to right, #070708 0%, rgba(7, 7, 8, 0.7) 24%, rgba(7, 7, 8, 0) 52%),
    linear-gradient(to bottom, rgba(7, 7, 8, 0.5) 0%, rgba(7, 7, 8, 0) 18%, rgba(7, 7, 8, 0) 80%, #070708 100%); }
  .h26-szene__text { padding-block: 3rem; }
  .h26-szene__text > * { max-inline-size: 40rem; }
}

/* ------------------------------------------------------------ Countdown und Fakten (Knochenweiss) */
.h26-zeit__innen { max-inline-size: var(--h26-max); margin: 0 auto; padding: 2.4rem var(--h26-rand) 3rem; text-align: center; }
.h26-zeit .h26-kicker { color: #ff4b3f; }
.h26-uhr { display: flex; justify-content: center; gap: clamp(0.9rem, 5vw, 3.5rem); margin-block-start: 1.1rem; }
.h26-uhr__feld { display: grid; justify-items: center; min-inline-size: 3.2ch; }
.h26-uhr__z { font-family: "H26 Zahl", system-ui, sans-serif; font-weight: 900; font-stretch: 86%; font-size: clamp(2.8rem, 13vw, 6rem); line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; }
.h26-uhr__l { margin-block-start: 0.45rem; font-size: 0.75rem; color: rgba(236, 231, 223, 0.6); }
.h26-fakten { list-style: none; padding: 1.6rem 0 0; margin-block-start: 2rem; border-block-start: 1px solid var(--h26-l);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1.2rem; text-align: start; }
.h26-fakten strong { display: block; font-family: "H26 Anton", "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.7rem; color: var(--h26-k); line-height: 1.05; }
.h26-fakten span { display: block; margin-block-start: 0.35rem; font-size: 0.8125rem; color: rgba(236, 231, 223, 0.66); line-height: 1.45; }
@media (min-width: 56rem) { .h26-fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); } .h26-zeit__innen { padding-block: 4.5rem 5.5rem; } }

/* ------------------------------------------------------------ FAQ (Anthrazit) */
.h26-faq__innen { max-inline-size: 52rem; margin: 0 auto; padding: 2rem var(--h26-rand) calc(var(--h26-kante) + 2.5rem); }
.h26-fragen { margin-block-start: 1.2rem; border-block-start: 1px solid var(--h26-l); }
.h26-frage { border-block-end: 1px solid var(--h26-l); }
.h26-frage summary { list-style: none; cursor: pointer; position: relative; padding: 0.9rem 2.2rem 0.9rem 0; font-weight: 500; color: var(--h26-k); line-height: 1.4; }
.h26-frage summary::-webkit-details-marker { display: none; }
.h26-frage summary::after { content: "+"; position: absolute; inset-inline-end: 0.2rem; inset-block-start: 0.75rem; font-size: 1.3rem; line-height: 1;
  color: #ff4b3f; transition: transform 0.25s ease; }
.h26-frage[open] summary::after { transform: rotate(45deg); }
.h26-frage p { padding: 0 0 1.25rem; color: rgba(236, 231, 223, 0.66); line-height: 1.65; max-inline-size: 44rem; }

/* ------------------------------------------------------------ Schluss */
.h26-schluss { position: relative; min-block-size: 70svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; text-align: center; }
.h26-schluss__film::after { background: linear-gradient(to bottom, rgba(7, 7, 8, 0.5) 0%, rgba(7, 7, 8, 0) 24%, rgba(7, 7, 8, 0) 45%, rgba(7, 7, 8, 0.82) 75%, #070708 100%); }
.h26-schluss__inhalt { position: relative; z-index: 4; inline-size: 100%; max-inline-size: var(--h26-max); margin: 0 auto; padding: 0 var(--h26-rand) 4rem; }
.h26-schluss__titel { font-family: "H26 Anton", "Anton", Impact, sans-serif; font-weight: 400; font-size: clamp(2rem, 9.2vw, 6.4rem); line-height: 1; white-space: nowrap;
  color: var(--h26-k); }
.h26-schluss__sub { margin-block-start: 0.8rem; color: rgba(236, 231, 223, 0.7); }
.h26-nur-schmal { display: inline; }
@media (min-width: 56rem) {
  .h26-schluss { min-block-size: min(88vh, 58rem); align-items: center; text-align: start; }
  .h26-schluss__inhalt { padding-block: 4rem 6rem; }
  .h26-schluss__inhalt > * { max-inline-size: 36rem; }
  .h26-schluss .h26-hero__knoepfe { justify-content: flex-start; }
  .h26-schluss .h26-hero__knoepfe .h26-btn { flex: 0 0 auto; white-space: nowrap; }
  .h26-schluss__film::after { background: linear-gradient(to right, rgba(7, 7, 8, 0.75) 0%, rgba(7, 7, 8, 0) 45%), linear-gradient(to bottom, rgba(7, 7, 8, 0.4) 0%, rgba(7, 7, 8, 0) 25%); }
  .h26-nur-schmal { display: none; }
}

/* ------------------------------------------------------------ Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  .h26-film__v { display: none; }
  .h26-btn, .h26-frage summary::after, .h26-karte__img, .h26-strahl__spur i { transition: none; }
  .h26-js .h26-karte { opacity: 1; transform: none; transition: none; }
  .h26-stempel.ist-wackel { animation: none; }
}

/* ------------------------------------------------------------ Buchungs-Modal (Spec 044): Geschlecht > Studio > Sitzungen > Kalender
   Dunkle Flaeche im Look der Seite, Fragen als Kacheln, ein Tipp schaltet weiter. Radius hoechstens 8 px, Knoepfe 6 px, kein text-shadow. */
html.h26-lb-offen, html.h26-lb-offen body { overflow: hidden; }
.h26-lb { position: fixed; inset: 0; z-index: 2147483500; display: grid; place-items: center; padding: 1rem;
  background: rgba(7, 7, 8, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.28s ease; overscroll-behavior: contain; }
.h26-lb.ist-offen { opacity: 1; }
.h26-lb[hidden] { display: none; }
.h26-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: #1a2a31 linear-gradient(180deg, #223840 0%, #182a30 45%, #121f24 100%); color: var(--h26-k); border: 1px solid rgba(236, 231, 223, 0.16);
  border-radius: 8px; overflow: hidden; transform: translateY(14px) scale(0.985); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.h26-lb__panel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.32;
  background: var(--h26-lb-nebel) 50% 30% / cover no-repeat; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); }
.h26-lb__panel > * { position: relative; z-index: 1; }
.h26-lb.ist-offen .h26-lb__panel { transform: none; }
.h26-lb[data-schritt="4"] .h26-lb__panel { block-size: min(92vh, 56rem); }   /* nur der Kalender fuellt die ganze Hoehe */
.h26-lb__kopf { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.9rem 1rem;
  border-block-end: 1px solid rgba(236, 231, 223, 0.1); }
.h26-lb__motiv { inline-size: 4.6rem; block-size: 3.45rem; object-fit: cover; border-radius: 6px; display: block; background: #0f1a1e; }
.h26-lb__kicker { font-size: 0.75rem; font-weight: 600; color: #ff8a7e; }
.h26-lb__titel { font-family: "H26 Anton", "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.3rem; line-height: 1.05; color: #fff; margin-block-start: 0.1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h26-lb__preis { margin-block-start: 0.15rem; font-size: 0.8125rem; color: rgba(236, 231, 223, 0.72); }
.h26-lb__preis b { font-family: "H26 Zahl", system-ui, sans-serif; font-weight: 900; font-stretch: 86%; font-size: 1.1rem; color: #fff; font-variant-numeric: tabular-nums; }
.h26-lb__statt { margin-inline-start: 0.4rem; white-space: nowrap; }
.h26-lb__preis s { text-decoration-color: var(--h26-r); text-decoration-thickness: 2px; }
.h26-lb__zu { appearance: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 6px; border: 1px solid rgba(236, 231, 223, 0.18); background: transparent;
  color: var(--h26-k); cursor: pointer; display: grid; place-items: center; transition: background-color 0.2s ease; }
.h26-lb__zu:hover { background: rgba(236, 231, 223, 0.1); }
.h26-lb__zu svg, .h26-lb__zurueck svg, .h26-kachel__haken svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Fortschritt: vier Striche mit Beschriftung, keine Punkte */
.h26-lb__punkte { list-style: none; margin: 0; padding: 0.75rem 1rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.h26-lb__punkte li { position: relative; padding-block-start: 0.55rem; font-size: 0.7rem; color: rgba(236, 231, 223, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h26-lb__punkte li::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; border-radius: 2px; background: rgba(236, 231, 223, 0.16); transition: background-color 0.3s ease; }
.h26-lb__punkte li.ist-fertig { color: rgba(236, 231, 223, 0.7); }
.h26-lb__punkte li.ist-fertig::before { background: rgba(236, 231, 223, 0.55); }
.h26-lb__punkte li.ist-aktiv { color: #fff; }
.h26-lb__punkte li.ist-aktiv::before { background: var(--h26-r); }
/* Kalender (Schritt 4): fuellt die ganze Lightbox, ohne Kopf, Schrittleiste und Fuss (Jasper 07.10.); nur ein Schliessen-Knopf ueber dem Rahmen */
.h26-lb[data-schritt="4"] .h26-lb__kopf, .h26-lb[data-schritt="4"] .h26-lb__punkte, .h26-lb[data-schritt="4"] .h26-lb__fuss { display: none; }
.h26-lb[data-schritt="4"] .h26-lb__panel { grid-template-rows: minmax(0, 1fr); }
.h26-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); }
.h26-lb__zu--termin:hover { background: #f2f5f9; }
.h26-lb__koerper { position: relative; overflow: auto; -webkit-overflow-scrolling: touch; }
.h26-lb__schritt { padding: 1.1rem 1rem 1.3rem; }
.h26-lb__schritt[hidden] { display: none; }
.h26-js .h26-lb__schritt { opacity: 0; transform: translateY(10px); transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.h26-js .h26-lb__schritt.ist-rein, .h26-js .h26-lb__schritt--termin { opacity: 1; transform: none; }
.h26-lb__frage { font-family: "H26 Anton", "Anton", Impact, sans-serif; font-weight: 400; font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.05; color: #fff; letter-spacing: 0; }
.h26-lb__hinweis { margin: 0.4rem 0 1rem; font-size: 0.875rem; color: rgba(236, 231, 223, 0.66); line-height: 1.5; }
/* Kacheln */
.h26-lb__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.h26-kachel { position: relative; display: block; cursor: pointer; border-radius: 8px; overflow: hidden; background: rgba(236, 231, 223, 0.07); border: 1px solid rgba(236, 231, 223, 0.16);
  transition: border-color 0.2s ease, transform 0.25s ease; -webkit-tap-highlight-color: transparent; }
.h26-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; }
.h26-kachel:hover { border-color: rgba(236, 231, 223, 0.4); }
.h26-kachel:has(input:focus-visible) { outline: 2px solid var(--h26-r); outline-offset: 3px; }
.h26-kachel__bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0f1a1e; }
.h26-kachel__bild img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s ease; }
.h26-kachel:hover .h26-kachel__bild img { transform: scale(1.06); }
.h26-kachel__text { display: block; padding: 0.7rem 0.8rem 0.85rem; }
.h26-kachel__text b { display: block; font-family: "H26 Anton", "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.25rem; line-height: 1.05; color: #fff; }
.h26-kachel__text small { display: -webkit-box; margin-block-start: 0.3rem; font-size: 0.78rem; line-height: 1.4; color: rgba(236, 231, 223, 0.66);
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h26-kachel__text em { display: block; margin-block-start: 0.3rem; font-style: normal; font-size: 0.75rem; color: #ff8a7e; }
.h26-kachel__haken { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--h26-k); color: var(--h26-s); opacity: 0; transform: scale(0.6); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.h26-kachel.ist-gewaehlt, .h26-kachel:has(input:checked) { border-color: var(--h26-k); }
.h26-kachel.ist-gewaehlt .h26-kachel__haken, .h26-kachel:has(input:checked) .h26-kachel__haken { opacity: 1; transform: none; }
/* Studios auf dem Telefon als Zeilen mit Foto links (sechs Kacheln passen so ohne Scrollen), ab 48 rem als Kacheln */
@media (max-width: 47.99rem) {
  .h26-lb__kacheln--studio { grid-template-columns: 1fr; gap: 0.5rem; }
  .h26-kachel--studio { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); align-items: center; }
  .h26-kachel--studio .h26-kachel__bild { aspect-ratio: auto; block-size: 100%; min-block-size: 4.1rem; }
  .h26-kachel--studio .h26-kachel__text { padding: 0.55rem 2.6rem 0.6rem 0.8rem; }
  .h26-kachel--studio .h26-kachel__text b { font-size: 1.1rem; }
  .h26-kachel--studio .h26-kachel__text small { margin-block-start: 0.15rem; }
  .h26-kachel--studio .h26-kachel__haken { inset-block-start: 50%; transform: translateY(-50%) scale(0.6); }
  .h26-kachel--studio.ist-gewaehlt .h26-kachel__haken, .h26-kachel--studio:has(input:checked) .h26-kachel__haken { transform: translateY(-50%); }
}
@media (min-width: 48rem) {
  .h26-lb__kacheln--studio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h26-lb__kacheln--g { max-inline-size: 36rem; }
}
/* Sitzungen als eine Liste mit Trennlinien, gewaehlte Zeile hervorgehoben */
.h26-lb__stufen { border: 1px solid rgba(236, 231, 223, 0.16); border-radius: 8px; overflow: hidden; background: rgba(236, 231, 223, 0.07); }
.h26-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; }
.h26-lb-stufe + .h26-lb-stufe { border-block-start: 1px solid rgba(236, 231, 223, 0.1); }
.h26-lb-stufe[hidden] { display: none; }
.h26-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; }
.h26-lb-stufe:hover { background: rgba(236, 231, 223, 0.06); }
.h26-lb-stufe:has(input:focus-visible) { outline: 2px solid var(--h26-r); outline-offset: -2px; }
.h26-lb-stufe__n { display: grid; justify-items: center; }
.h26-lb-stufe__n b { font-family: "H26 Zahl", system-ui, sans-serif; font-weight: 900; font-stretch: 86%; font-size: 1.9rem; line-height: 1; color: #fff; }
.h26-lb-stufe__n small { font-size: 0.65rem; color: rgba(236, 231, 223, 0.6); }
.h26-lb-stufe__mitte { display: grid; gap: 0.1rem; min-inline-size: 0; }
.h26-lb-stufe__preis b { font-family: "H26 Zahl", system-ui, sans-serif; font-weight: 900; font-stretch: 86%; font-size: 1.35rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.h26-lb-stufe__preis small { margin-inline-start: 0.2rem; font-size: 0.8rem; color: rgba(236, 231, 223, 0.7); }
.h26-lb-stufe__info { font-size: 0.75rem; color: rgba(236, 231, 223, 0.6); line-height: 1.4; }
.h26-lb-stufe__info s { text-decoration-color: var(--h26-r); text-decoration-thickness: 1.5px; }
.h26-lb-stufe__spar { font-size: 0.78rem; font-weight: 600; color: var(--h26-gruen); }
.h26-lb-stufe__tag { margin-inline-start: 0.6rem; font-family: "H26 Sans", system-ui, sans-serif; font-size: 0.72rem; font-weight: 600; color: #ff8a7e; white-space: nowrap; vertical-align: 0.15em; }
.h26-lb-stufe .h26-kachel__haken { inset-block-start: 50%; inset-inline-end: 0.75rem; transform: translateY(-50%) scale(0.6); }
.h26-lb-stufe.ist-gewaehlt, .h26-lb-stufe:has(input:checked) { background: rgba(236, 231, 223, 0.16); }
.h26-lb-stufe.ist-gewaehlt .h26-kachel__haken, .h26-lb-stufe:has(input:checked) .h26-kachel__haken { opacity: 1; transform: translateY(-50%); }
/* Kalender fuellt den Koerper */
.h26-lb__schritt--termin { padding: 0; block-size: 100%; }
.h26-lb__rahmen { position: relative; block-size: 100%; min-block-size: 24rem; background: #fff; }
.h26-lb__rahmen iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; background: #fff; }
.h26-lb__laden { position: absolute; inset: 0; z-index: 1; margin: 0; display: grid; place-content: center; justify-items: center; gap: 1.1rem; background: #182a30;
  color: var(--h26-k); font-family: "H26 Anton", "Anton", Impact, sans-serif; font-size: 1.35rem; transition: opacity 0.45s ease; }
.h26-lb__laden.ist-weg { opacity: 0; pointer-events: none; }
.h26-lb__strahl { position: relative; display: block; inline-size: 9rem; block-size: 2px; background: rgba(236, 231, 223, 0.14); overflow: hidden; border-radius: 1px; }
.h26-lb__strahl::after { content: ""; position: absolute; inset-block: 0; inline-size: 40%; background: var(--h26-r); animation: h26-strahl 1.3s ease-in-out infinite; }
@keyframes h26-strahl { from { transform: translateX(-120%); } to { transform: translateX(300%); } }
.h26-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: #182a30; color: rgba(236, 231, 223, 0.8); border-block-start: 1px solid rgba(236, 231, 223, 0.12); }
.h26-lb__notfall[hidden] { display: none; }
.h26-lb__link { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; color: #fff; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
/* Fuss: Zurueck und Zusammenfassung, jede Antwort ist ein Knopf zum Aendern */
.h26-lb__fuss { display: flex; align-items: center; gap: 0.9rem; padding: 0.65rem 1rem; border-block-start: 1px solid rgba(236, 231, 223, 0.1); min-block-size: 3.1rem; }
.h26-lb__zurueck { appearance: none; display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid rgba(236, 231, 223, 0.18); border-radius: 6px; background: transparent;
  color: var(--h26-k); font: inherit; font-size: 0.85rem; font-weight: 500; padding: 0.45rem 0.8rem 0.45rem 0.55rem; cursor: pointer; white-space: nowrap; }
.h26-lb__zurueck:hover { background: rgba(236, 231, 223, 0.1); }
.h26-lb__zurueck[hidden] { display: none; }
.h26-lb__zusammen { font-size: 0.8125rem; color: rgba(236, 231, 223, 0.6); line-height: 1.5; min-inline-size: 0; }
.h26-lb__chip { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; font-size: 0.8125rem; color: var(--h26-k); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-decoration-color: rgba(236, 231, 223, 0.5); text-underline-offset: 0.25em; }
.h26-lb__chip:hover { color: #fff; text-decoration-color: var(--h26-r); }
@media (max-width: 47.99rem) {
  .h26-lb { padding: 0; }
  .h26-lb__panel, .h26-lb[data-schritt="4"] .h26-lb__panel { inline-size: 100%; block-size: 100%; block-size: 100dvh; max-block-size: none; border-radius: 0; border: 0; }
  .h26-lb__kopf { padding-block-start: calc(0.9rem + env(safe-area-inset-top)); }
  .h26-lb__fuss { padding-block-end: calc(0.65rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .h26-lb, .h26-lb__panel, .h26-kachel, .h26-kachel__bild img, .h26-kachel__haken, .h26-lb-stufe, .h26-lb__laden { transition: none; }
  .h26-js .h26-lb__schritt { opacity: 1; transform: none; transition: none; }
  .h26-lb__strahl::after { animation: none; inline-size: 100%; }
}