/* Halloween-Special (/halloween) · Spec 033
   Horror-Ebene auf der Basis style.css + back-to-work.css + modelle.css + btw-special.css.
   Jasper 27.09.2026: Gestaltung wie im Briefing (Versalien-Badge, Glitch, Dauer-Animationen, Blut, Risskanten),
   nur auf dieser Seite. Unveraendert: Knoepfe 6 px, keine Gedankenstriche, KI-Kennzeichnung,
   prefers-reduced-motion ohne Bewegung, kein horizontales Scrollen. Praefix hw-. */

@font-face { font-family: "Pirata One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/pirata-one-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Pirata One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/pirata-one-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: "Nosifer"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/nosifer-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nosifer"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/nosifer-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ------------------------------------------------------------------ Grundlagen */
.btw.hw, .hw.hw-lb {
  --hw-nacht: #07060a;
  --hw-pakete: #07060a;
  --hw-faq: #07060a;
  --hw-schluss: #07060a;
  --hw-flaeche: #140e12;
  --hw-flaeche2: #1c1318;
  --hw-knochen: #efe6d8;
  --hw-knochen2: #e4d8c4;
  --hw-text: #f1ebe4;
  --hw-weich: #bdb1b4;
  --hw-leise: #8f8387;
  --hw-linie: rgba(255, 255, 255, 0.1);
  --hw-linie2: rgba(255, 255, 255, 0.2);
  --hw-blut: #7d0a0a;
  --hw-blut2: #5b0710;
  --hw-glut: #ff1f3d;
  --hw-glut2: #ff5a4f;
  --hw-mond: #9fb6d9;
  --hw-gotisch: "Pirata One", "UnifrakturMaguntia", Georgia, "Times New Roman", serif;
  --hw-tropf: "Nosifer", "Pirata One", Georgia, serif;
  --hw-zahl: "Archivo", "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --hw-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--hw-sans);
  background: var(--hw-nacht);
  color: var(--hw-text);
  overflow-x: clip;
}
.hw p, .hw li, .hw small, .hw summary, .hw button, .hw a, .hw legend, .hw label { font-family: var(--hw-sans); }
.hw h1, .hw h2, .hw h3 { text-transform: none; hyphens: manual; }
.hw p { max-inline-size: none; }
.hw a { color: var(--hw-glut2); }
.hw section { position: relative; }
.hw .lx-container { position: relative; z-index: 2; }
html:lang(ru) .hw, html:lang(ar) .hw, html:lang(hi) .hw { --hw-gotisch: Georgia, "Times New Roman", serif; --hw-tropf: Georgia, serif; }

body.hw-seite { background: #07060a; }
body.hw-seite::before { display: none; }
body.hw-seite nav.nav { background: #07060a; border-block-end-color: rgba(255, 31, 61, 0.22); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.hw-seite nav.nav .nav-links > li > button { color: #f1ebe4; }
body.hw-seite nav.nav .nav-links > li > button:hover,
body.hw-seite nav.nav .nav-links > li > button[aria-expanded="true"] { color: #ff5a4f; }
body.hw-seite nav.nav a.nav-cta { background: #b3001b; color: #fff; border-color: #b3001b; border-radius: 6px; }
body.hw-seite nav.nav a.nav-cta:hover { background: #ff1f3d; border-color: #ff1f3d; color: #fff; }
body.hw-seite nav.nav .lang-switch, body.hw-seite nav.nav .lang-switch-btn { color: #f1ebe4; background: transparent; border-color: rgba(255, 255, 255, 0.3); }
body.hw-seite nav.nav .nav-mobile-toggle { color: #f1ebe4; border-color: rgba(255, 255, 255, 0.3); }
body.hw-seite footer.footer { background: #050406; margin-top: 0; }

/* ------------------------------------------------------------------ Schrift */
.hw .hw-h1 {
  font-family: var(--hw-gotisch);
  font-weight: 400;
  font-size: clamp(3rem, 1.6rem + 6vw, 6.6rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  color: var(--hw-knochen);
  margin: 0.35em 0 0.3em;
}
.hw .hw-h1 > span { display: block; }
.hw .hw-h1__zwei {
  font-family: var(--hw-tropf);
  font-size: 0.52em;
  line-height: 1.25;
  color: var(--hw-glut);
  letter-spacing: 0.02em;
  margin-block-start: 0.18em;
}
.hw .hw-h2 {
  font-family: var(--hw-gotisch);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.2rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--hw-knochen);
  margin: 0.15em 0 0;
}
.hw .hw-h2--gross { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem); }
.hw .hw-eyebrow { font-size: 0.95rem; font-weight: 600; color: var(--hw-glut2); margin: 0; letter-spacing: 0.01em; }
.hw .hw-lead { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--hw-weich); max-inline-size: 38rem; }
.hw .hw-text { color: var(--hw-weich); line-height: 1.6; max-inline-size: 34rem; margin: 0; }
.hw .hw-fein { font-size: 0.82rem; line-height: 1.55; color: var(--hw-leise); max-inline-size: 60rem; margin: 1.6rem 0 0; }
.hw .hw-fein a { color: var(--hw-weich); }
.hw .hw-kopfzeile { display: grid; gap: 1rem 3rem; align-items: end; margin-block-end: clamp(1.6rem, 3vw, 2.6rem); }
@media (min-width: 60rem) { .hw .hw-kopfzeile { grid-template-columns: 1.3fr 1fr; } }

/* Glitch: zwei versetzte Kopien (Text per JS in data-glitch), Ausbrueche in kurzen Fenstern; Flackern bei Hover */
.hw .hw-glitch { position: relative; display: block; }
.hw .hw-glitch::before, .hw .hw-glitch::after {
  content: attr(data-glitch);
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
}
.hw .hw-glitch::before { color: #ff1f3d; animation: hw-glitch-a 6.5s steps(1, end) infinite; }
.hw .hw-glitch::after { color: #7fd6ff; animation: hw-glitch-b 6.5s steps(1, end) infinite; mix-blend-mode: screen; }
.hw .hw-h1__zwei.hw-glitch::before { color: #fff; }
.hw .hw-glitch:hover { animation: hw-flacker 0.9s steps(1, end) 1; }
@keyframes hw-glitch-a {
  0%, 88%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  89% { opacity: 0.9; transform: translate(-4px, 1px); clip-path: inset(10% 0 62% 0); }
  90% { opacity: 0.9; transform: translate(5px, -1px); clip-path: inset(55% 0 20% 0); }
  91% { opacity: 0.85; transform: translate(-2px, 0); clip-path: inset(30% 0 45% 0); }
  92% { opacity: 0; }
  96% { opacity: 0.8; transform: translate(3px, 2px); clip-path: inset(72% 0 6% 0); }
  97% { opacity: 0; }
}
@keyframes hw-glitch-b {
  0%, 88%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  89.5% { opacity: 0.8; transform: translate(4px, -1px); clip-path: inset(40% 0 35% 0); }
  90.5% { opacity: 0.8; transform: translate(-5px, 1px); clip-path: inset(8% 0 78% 0); }
  91.5% { opacity: 0; }
  96.5% { opacity: 0.7; transform: translate(-3px, 0); clip-path: inset(18% 0 60% 0); }
  97.5% { opacity: 0; }
}
@keyframes hw-flacker {
  0% { opacity: 1; } 8% { opacity: 0.25; } 12% { opacity: 1; } 20% { opacity: 0.5; } 23% { opacity: 1; }
  48% { opacity: 0.15; } 52% { opacity: 1; } 70% { opacity: 0.7; } 72% { opacity: 1; } 100% { opacity: 1; }
}

/* ------------------------------------------------------------------ Knoepfe */
.hw .hw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-block-size: 3rem; padding: 0.7em 1.35em;
  border-radius: 6px; border: 0; cursor: pointer;
  font-weight: 600; font-size: 1rem; line-height: 1.15; text-decoration: none; text-align: center;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.hw .hw-btn--glut {
  background: linear-gradient(180deg, #e0142f 0%, #a3001a 100%);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 90, 79, 0.55), 0 0 22px rgba(255, 31, 61, 0.45), 0 8px 26px rgba(120, 0, 16, 0.55);
  animation: hw-glimmen 2.8s ease-in-out infinite;
}
.hw .hw-btn--glut:hover, .hw .hw-btn--glut:focus-visible {
  background: linear-gradient(180deg, #ff2d47 0%, #c0001f 100%);
  box-shadow: 0 0 0 1px rgba(255, 140, 130, 0.8), 0 0 38px rgba(255, 31, 61, 0.75), 0 8px 26px rgba(120, 0, 16, 0.6);
  color: #fff;
}
.hw .hw-btn--glut:hover span { animation: hw-flacker 0.8s steps(1, end) 1; }
.hw .hw-btn--gross { min-block-size: 3.5rem; font-size: 1.08rem; padding-inline: 1.6em; }
.hw .hw-btn--leer { background: transparent; color: var(--hw-text); box-shadow: inset 0 0 0 1px var(--hw-linie2); }
.hw .hw-btn--leer:hover { box-shadow: inset 0 0 0 1px var(--hw-text); }
.hw .hw-btn:focus-visible, .hw [role="tab"]:focus-visible, .hw input:focus-visible + span { outline: 2px solid #ffd9d9; outline-offset: 3px; }
@keyframes hw-glimmen {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 90, 79, 0.55), 0 0 18px rgba(255, 31, 61, 0.35), 0 8px 26px rgba(120, 0, 16, 0.5); }
  50% { box-shadow: 0 0 0 1px rgba(255, 120, 110, 0.75), 0 0 34px rgba(255, 31, 61, 0.7), 0 8px 26px rgba(120, 0, 16, 0.6); }
}
.hw .hw-pfeil { inline-size: 1.1em; block-size: 1.1em; flex: none; }
.hw .hw-textlink { display: inline-flex; align-items: center; gap: 0.4em; color: var(--hw-weich); font-weight: 600; text-decoration: none; }
.hw .hw-textlink:hover { color: var(--hw-text); }
.hw .hw-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; margin: 1.3rem 0 0; }
.hw .hw-ctas--mitte { justify-content: center; }
.hw .hw-icon { inline-size: 1.75rem; block-size: 1.75rem; flex: none; }
.hw .hw-icon--wackel { transform-origin: 50% 80%; animation: hw-wackel 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.7s); }
@keyframes hw-wackel {
  0%, 62%, 100% { transform: rotate(0); }
  66% { transform: rotate(-9deg); } 70% { transform: rotate(7deg); } 74% { transform: rotate(-5deg); } 78% { transform: rotate(3deg); } 82% { transform: rotate(0); }
}

/* ------------------------------------------------------------------ Handgezeichnete, animierte Icons */
.hw-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.hw .hw-gi { inline-size: 3.2rem; block-size: 3.2rem; flex: none; overflow: visible; }
.hw .hw-gi--klein { inline-size: 2rem; block-size: 2rem; }
.hw .hw-gi--netz { overflow: hidden; }
.hw .hw-gi * { transform-box: fill-box; }
.hw .hw-gi__zitter { transform-origin: 50% 50%; animation: hw-gi-zitter 3.4s ease-in-out infinite; }
.hw .hw-gi__tropfen { transform-origin: 50% 0; animation: hw-gi-tropfen 2.4s cubic-bezier(0.55, 0, 0.9, 0.4) infinite; }
.hw .hw-gi__tropfen--2 { animation-delay: -1.2s; animation-duration: 3s; }
.hw .hw-gi__kratzer { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hw-gi-kratz 3.6s cubic-bezier(0.2, 0.9, 0.3, 1) infinite; animation-delay: calc(var(--k, 0) * 0.11s); }
.hw .hw-gi__ranke { stroke-dasharray: 1; animation: hw-gi-ranke 5s ease-in-out infinite; }
.hw .hw-gi__spinne { animation: hw-gi-seil 3.8s ease-in-out infinite; }
.hw .hw-gi__kiefer { animation: hw-gi-klapper 2.6s steps(1, end) infinite; }
.hw .hw-gi__auge { animation: hw-glutpuls 1.6s ease-in-out infinite; }
.hw .hw-gi__fluegel--l { transform-origin: 100% 30%; animation: hw-gi-flattern-l 0.42s ease-in-out infinite alternate; }
.hw .hw-gi__fluegel--r { transform-origin: 0% 30%; animation: hw-gi-flattern-r 0.42s ease-in-out infinite alternate; }
.hw .hw-gi__koerper { animation: hw-gi-schweben 0.84s ease-in-out infinite; }
.hw .hw-gi--fledermaus { animation: hw-gi-flug 5s ease-in-out infinite; }
.hw .hw-gi__sand-oben { transform-origin: 50% 100%; animation: hw-gi-sand-oben 5s linear infinite; }
.hw .hw-gi__sand-unten { transform-origin: 50% 100%; animation: hw-gi-sand-unten 5s linear infinite; }
.hw .hw-gi__strom { stroke-dasharray: 2 3; animation: hw-gi-strom 0.4s linear infinite; }
.hw .hw-gi__deckel { transform-origin: 20% 90%; animation: hw-gi-deckel 4.5s ease-in-out infinite; }
.hw .hw-gi--sarg .hw-gi__auge { animation: hw-gi-augen-sarg 4.5s ease-in-out infinite; }
.hw .hw-gi__flamme { transform-origin: 50% 100%; animation: hw-gi-flamme 0.9s ease-in-out infinite alternate; }
.hw .hw-gi__schein { animation: hw-glutpuls 1.3s ease-in-out infinite; }
.hw .hw-gi__glut { animation: hw-gi-glut 2.2s steps(1, end) infinite; }
.hw .hw-gi__flieger { animation: hw-gi-flieger 6s ease-in-out infinite; }
@keyframes hw-gi-zitter { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-6deg); } 78% { transform: rotate(5deg); } 82% { transform: rotate(-3deg); } 86% { transform: rotate(0); } }
@keyframes hw-gi-tropfen { 0%, 20% { transform: translateY(0) scaleY(0.6); opacity: 0; } 30% { opacity: 1; transform: translateY(0) scaleY(1); } 75% { transform: translateY(0) scaleY(1.25); opacity: 1; } 100% { transform: translateY(18px) scaleY(1.1); opacity: 0; } }
@keyframes hw-gi-kratz { 0% { stroke-dashoffset: 1; opacity: 1; } 16% { stroke-dashoffset: 0; } 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes hw-gi-ranke { 0% { stroke-dashoffset: 1; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes hw-gi-seil { 0%, 100% { transform: translateY(-12px); } 45% { transform: translateY(6px); } 55% { transform: translateY(3px); } 62% { transform: translateY(6px); } }
@keyframes hw-gi-klapper { 0%, 58%, 100% { transform: translateY(0); } 62%, 70%, 78% { transform: translateY(2.5px); } 66%, 74% { transform: translateY(0); } }
@keyframes hw-gi-flattern-l { from { transform: rotate(-8deg) scaleY(1); } to { transform: rotate(26deg) scaleY(0.55); } }
@keyframes hw-gi-flattern-r { from { transform: rotate(8deg) scaleY(1); } to { transform: rotate(-26deg) scaleY(0.55); } }
@keyframes hw-gi-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes hw-gi-flug { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(3px, -4px) rotate(4deg); } 60% { transform: translate(-3px, 2px) rotate(-5deg); } }
@keyframes hw-gi-sand-oben { 0% { transform: scaleY(1); } 90%, 100% { transform: scaleY(0.05); } }
@keyframes hw-gi-sand-unten { 0% { transform: scaleY(0.1); } 90%, 100% { transform: scaleY(1); } }
@keyframes hw-gi-strom { to { stroke-dashoffset: -5; } }
@keyframes hw-gi-deckel { 0%, 45%, 100% { transform: rotate(0) translate(0, 0); } 55%, 80% { transform: rotate(-10deg) translate(3px, -1px); } 58% { transform: rotate(-12deg) translate(4px, -1px); } }
@keyframes hw-gi-augen-sarg { 0%, 48%, 88%, 100% { opacity: 0; } 58%, 80% { opacity: 1; } }
@keyframes hw-gi-flamme { 0% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(0.92, 1.08) skewX(4deg); } 70% { transform: scale(1.05, 0.94) skewX(-5deg); } 100% { transform: scale(0.96, 1.1) skewX(2deg); } }
@keyframes hw-gi-glut { 0%, 100% { opacity: 1; } 12% { opacity: 0.55; } 14% { opacity: 1; } 47% { opacity: 0.75; } 49% { opacity: 1; } 71% { opacity: 0.4; } 73% { opacity: 1; } }
@keyframes hw-gi-flieger { 0% { transform: translate(6px, 44px) scale(0.6); opacity: 0; } 12% { opacity: 1; } 60% { transform: translate(40px, 16px) scale(1); opacity: 1; } 75%, 100% { transform: translate(62px, 4px) scale(0.7); opacity: 0; } }

/* ------------------------------------------------------------------ Blut (Karten, Badge) */
.hw .hw-blut { display: block; inline-size: 100%; block-size: auto; pointer-events: none; transform-origin: 50% 0; animation: hw-sickern 9s ease-in-out infinite alternate; }
.hw .hw-blut--spiegel { scale: -1 1; }
@keyframes hw-sickern { from { transform: scaleY(0.94); } to { transform: scaleY(1.07); } }
.hw .hw-tropfen path { transform-box: fill-box; transform-origin: 50% 0; animation: hw-tropf var(--dauer, 5s) ease-in var(--verz, 0s) infinite; }
.hw .hw-tropfen__fall { opacity: 0; transform-box: fill-box; animation: hw-fall var(--dauer, 5s) ease-in var(--verz, 0s) infinite; }
@keyframes hw-tropf { 0% { transform: scaleY(0.3); } 72% { transform: scaleY(1); } 78% { transform: scaleY(0.82); } 100% { transform: scaleY(0.36); } }
@keyframes hw-fall { 0%, 72% { opacity: 0; transform: translateY(0); } 74% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(140%) translateY(24px); } }

/* ------------------------------------------------------------------ Uebergaenge: generiertes Blut (keine CSS-Kanten) */
.hw .hw-blutband {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: -2px; inline-size: 100%;
  block-size: clamp(150px, 23vw, 360px); object-fit: fill; pointer-events: none;
  transform-origin: 50% 0; animation: hw-sickern 11s ease-in-out infinite alternate;
}
/* ------------------------------------------------------------------ Nebel, Monster, Schatten, Flackern */
.hw .hw-nebel { position: absolute; inset-inline: 0; overflow: hidden; pointer-events: none; will-change: transform; }
.hw .hw-nebel::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 200%;
  background: url("/assets/img/halloween/nebel-a.webp?v=202609271930") repeat-x 0 100% / 50% 100%;
  animation: hw-nebel 90s linear infinite;
}
.hw .hw-nebel--hinten { inset-block-end: 12%; block-size: 55%; opacity: 0.45; }
.hw .hw-nebel--hinten::before { background-image: url("/assets/img/halloween/nebel-b.webp?v=202609271930"); animation-duration: 140s; animation-direction: reverse; }
.hw .hw-nebel--vorn { inset-block-end: -6%; block-size: 46%; opacity: 0.7; z-index: 2; }
.hw .hw-nebel--boden { inset-block-start: 0; block-size: 38%; opacity: 0.22; transform: scaleY(-1); }
@keyframes hw-nebel { to { transform: translateX(-50%); } }

.hw .hw-monster { position: absolute; pointer-events: none; }
.hw .hw-monster__kopf { position: relative; transform-origin: 62% 70%; animation: hw-kippen 11s cubic-bezier(0.5, 0, 0.2, 1) infinite; }
.hw .hw-monster img {
  display: block; inline-size: 100%; block-size: auto;
  -webkit-mask-image: radial-gradient(closest-side at 62% 45%, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side at 62% 45%, #000 55%, transparent 100%);
}
.hw .hw-monster__auge {
  position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y);
  inline-size: 7%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(closest-side, #fff4cf 0, #ff4a36 26%, rgba(255, 31, 61, 0.55) 48%, rgba(255, 31, 61, 0) 100%);
  mix-blend-mode: screen; border-radius: 50%;
  animation: hw-blinzeln var(--dauer, 5s) ease-in-out var(--verz, 0s) infinite, hw-glutpuls 2.4s ease-in-out var(--verz, 0s) infinite;
}
@keyframes hw-kippen {
  0%, 100% { transform: rotate(0) translate(0, 0); }
  30% { transform: rotate(-3deg) translate(-0.5%, 0.4%); }
  34% { transform: rotate(-8deg) translate(-1.2%, 1%); }      /* ruckartiges Abknicken */
  55% { transform: rotate(-7deg) translate(-1%, 0.8%); }
  58% { transform: rotate(-9.5deg) translate(-1.4%, 1.2%); }
  80% { transform: rotate(-2deg) translate(0, 0.2%); }
}
@keyframes hw-blinzeln { 0%, 90%, 100% { scale: 1 1; } 93% { scale: 1.1 0.06; } 96% { scale: 1 1; } }
@keyframes hw-glutpuls { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; filter: brightness(1.35); } }

.hw .hw-schatten { position: absolute; inset-inline: 0; inset-block-end: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.hw .hw-figur > path { fill: #020103; opacity: 0.78; }
.hw .hw-augen { transform-box: fill-box; transform-origin: center; animation: hw-blinzeln var(--dauer, 4s) ease-in-out var(--verz, 0s) infinite, hw-glutpuls 1.9s ease-in-out var(--verz, 0s) infinite; }
.hw .hw-parallax { position: absolute; inset: 0; pointer-events: none; will-change: transform; }

.hw .hw-flackern { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 0%, rgba(170, 200, 255, 0.16), transparent 60%); mix-blend-mode: screen; opacity: 0; animation: hw-neon 7s steps(1, end) infinite; pointer-events: none; }
@keyframes hw-neon { 0%, 100% { opacity: 0.55; } 6% { opacity: 0.1; } 7% { opacity: 0.6; } 9% { opacity: 0; } 10% { opacity: 0.55; } 52% { opacity: 0.5; } 53% { opacity: 0.05; } 54.5% { opacity: 0.55; } 81% { opacity: 0.2; } 82% { opacity: 0.55; } }

.hw .hw-spinnen { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 4; pointer-events: none; }

/* ------------------------------------------------------------------ Hintergrund-Geister (randlose Grusel-Videos)
   Die Szenen laufen in reines Schwarz aus; screen macht Schwarz durchsichtig, die Maske verwischt jede Kante. */
.hw .hw-geist { position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: var(--o, 0.85); }
.hw .hw-geist__film {
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover; filter: contrast(1.06);
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, rgba(0, 0, 0, 0.55) 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 50%, rgba(0, 0, 0, 0.55) 72%, transparent 100%);
}
.hw .hw-geist--pakete { --o: 0.8; inset-block-start: clamp(4rem, 9vw, 9rem); inset-inline-end: -7vw; inline-size: min(52vw, 46rem); aspect-ratio: 1; }
.hw .hw-pakete .hw-kopfzeile .hw-text { position: relative; isolation: isolate; color: #e9e1da; font-weight: 500; }
.hw .hw-pakete .hw-kopfzeile .hw-text::before { content: ""; position: absolute; inset: -1.4rem -1.8rem; z-index: -1; background: radial-gradient(closest-side, rgba(7, 6, 10, 0.88) 55%, rgba(7, 6, 10, 0) 100%); pointer-events: none; }
.hw .hw-szene { background: var(--hw-nacht); position: relative; isolation: isolate; overflow: hidden; min-block-size: clamp(26rem, 56vw, 52rem); display: grid; align-items: end; padding: 0 0 clamp(2.5rem, 5vw, 4.5rem); }
.hw .hw-geist--szene { --o: 1; inset: 0; margin-inline: auto; inline-size: min(100%, 110rem); }
.hw .hw-geist--szene .hw-geist__film {
  -webkit-mask-image: radial-gradient(60% 62% at 50% 46%, #000 55%, rgba(0, 0, 0, 0.5) 78%, transparent 100%);
  mask-image: radial-gradient(60% 62% at 50% 46%, #000 55%, rgba(0, 0, 0, 0.5) 78%, transparent 100%);
}
.hw .hw-szene__inhalt { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; }
.hw .hw-szene .hw-h2 { text-shadow: none; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.9)); }
.hw .hw-warum { position: relative; isolation: isolate; overflow: hidden; }
.hw .hw-warum > .lx-container { z-index: 1; }
.hw .hw-geist--warum-l { --o: 0.95; inset-block-start: -2rem; inset-inline-start: 2vw; inline-size: clamp(240px, 30vw, 560px); aspect-ratio: 3 / 4; }
.hw .hw-geist--warum-r { --o: 0.95; inset-block-start: -1rem; inset-inline-end: 2vw; inline-size: clamp(230px, 28vw, 520px); aspect-ratio: 3 / 4; }
.hw .hw-faq-sec { position: relative; isolation: isolate; overflow: hidden; }
.hw .hw-faq-sec > .lx-container { z-index: 1; }
.hw .hw-geist--faq { --o: 0.75; inset-block-start: -3rem; inset-inline-end: -5vw; inline-size: clamp(240px, 30vw, 520px); aspect-ratio: 9 / 16; }
.hw .hw-geist--schluss-l { --o: 0.85; inset-block-end: 0; inset-inline-start: -4vw; inline-size: clamp(220px, 32vw, 520px); aspect-ratio: 1; z-index: 1; }
.hw .hw-geist--schluss-r { --o: 0.85; inset-block-end: -2rem; inset-inline-end: -3vw; inline-size: clamp(200px, 27vw, 440px); aspect-ratio: 3 / 4; z-index: 1; }
@media (min-width: 48rem) { .hw section.hw-warum { padding-block-start: clamp(12rem, 20vw, 20rem); } }
@media (max-width: 47.99rem) {
  .hw .hw-geist--pakete { --o: 0.55; inset-block-start: 5rem; inset-inline-end: -28vw; inline-size: 95vw; }
  .hw .hw-geist--warum-l, .hw .hw-geist--schluss-l { display: none; }
  .hw .hw-geist--warum-r { --o: 0.7; inset-block-start: 0; inset-inline-end: -12vw; inline-size: 60vw; }
  .hw section.hw-warum { padding-block-start: 14rem; }
  .hw .hw-geist--faq { --o: 0.5; inset-block-start: -1rem; inset-inline-end: -18vw; inline-size: 62vw; }
  .hw .hw-geist--schluss-r { --o: 0.6; inset-inline-end: -14vw; inline-size: 58vw; }
  .hw .hw-szene { min-block-size: 30rem; }
  .hw .hw-geist--szene { inset-inline: -35%; inline-size: 170%; }
}

/* ------------------------------------------------------------------ Hero */
.hw .hw-hero { background: var(--hw-nacht); isolation: isolate; overflow: hidden; padding: clamp(1.4rem, 3vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hw .hw-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hw .hw-atmo, .hw .hw-atmo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hw .hw-atmo { filter: saturate(0.55) brightness(0.52) contrast(1.12); }
.hw .hw-atmo--film { opacity: 0; transition: opacity 1.2s; }
.hw .hw-atmo--film.is-laeuft { opacity: 1; }
.hw .hw-hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(90% 70% at 30% 45%, rgba(7, 6, 10, 0.2), rgba(7, 6, 10, 0.78) 80%),
    linear-gradient(180deg, rgba(7, 6, 10, 0.55) 0%, rgba(7, 6, 10, 0) 25%, rgba(7, 6, 10, 0) 55%, rgba(7, 6, 10, 0.97) 94%, #07060a 100%);
}
.hw .hw-monster--hero { z-index: 1; inset-block-start: -4%; inset-inline-end: -8%; inline-size: min(64vw, 60rem); opacity: 1; }
.hw .hw-monster--hero img { opacity: 0.58; }
.hw .hw-schatten--hero { z-index: 1; opacity: 0.9; }
.hw .hw-hero__inhalt { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
@media (min-width: 62rem) { .hw .hw-hero__inhalt { grid-template-columns: 1.08fr 0.92fr; min-block-size: min(82svh, 52rem); } }

.hw .hw-badge { position: relative; display: inline-block; margin: 0; max-inline-size: 100%; }
.hw .hw-badge__text {
  display: inline-block; position: relative; z-index: 1;
  font-family: var(--hw-tropf); font-size: clamp(0.72rem, 0.62rem + 0.5vw, 0.98rem); line-height: 1.5; letter-spacing: 0.04em;
  color: #fff3ea; padding: 0.55em 0.9em 0.7em;
  background: linear-gradient(180deg, #3a0409 0%, #1a0205 100%);
  border: 2px solid #9d0b17; border-radius: 4px;
  box-shadow: 0 0 18px rgba(255, 31, 61, 0.35), inset 0 0 14px rgba(255, 31, 61, 0.25);
}
.hw .hw-badge .hw-blut { position: absolute; inset-inline: -6px; inset-block-start: calc(100% - 10px); inline-size: calc(100% + 12px); }
html:not([lang="de"]) .hw .hw-badge__text { font-size: clamp(0.7rem, 0.6rem + 0.45vw, 0.92rem); }

.hw .hw-deal {
  position: relative; margin-block-start: 1.6rem; max-inline-size: 36rem; padding: 0.3rem 0.9rem 0.5rem;
  border: 34px solid transparent; border-image: var(--papier) 96 fill / 34px / 0 stretch;
  rotate: -1.3deg; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.7)); color: #2b1510;
}
.hw .hw-deal__kopf { margin: 0; font-size: 0.92rem; font-weight: 600; color: #5a3a30; }
.hw .hw-deal__preis { margin: 0.1rem 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.45rem; }
.hw .hw-deal__zahl { font-family: var(--hw-zahl); font-weight: 800; font-size: clamp(2.8rem, 1.9rem + 3.8vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; color: #6a0710; font-variant-numeric: tabular-nums; rotate: -1deg; display: inline-block; }
.hw .hw-deal__monat { font-family: var(--hw-zahl); font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); color: #8a0a12; }
.hw .hw-deal__raten { margin: 0.45rem 0 0; color: #2b1510; line-height: 1.5; font-size: 0.98rem; }
.hw .hw-deal__raten s, .hw .hw-stufe__statt s { color: #6d5a50; text-decoration-color: #b3001b; text-decoration-thickness: 2px; }
.hw .hw-deal__unter { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; color: #1f6b3a; font-weight: 700; font-size: 0.95rem; }
.hw .hw-deal__rabatt { background: #b3001b; color: #fff; font-family: var(--hw-zahl); font-weight: 800; padding: 0.15em 0.5em; border-radius: 4px; rotate: -3deg; display: inline-block; }
.hw .hw-deal .hw-uhr__label { color: #3b2520; }
.hw .hw-deal .hw-uhr__z { background: none; border: 0; border-block-end: 2px solid rgba(106, 7, 16, 0.55); border-radius: 0; padding-inline: 0.1rem; }
.hw .hw-deal .hw-uhr__z:nth-child(odd) { rotate: -2deg; } .hw .hw-deal .hw-uhr__z:nth-child(even) { rotate: 2deg; }
.hw .hw-deal .hw-uhr__z b { color: #6a0710; font-size: 1.55rem; }
.hw .hw-deal .hw-uhr__z i { color: #6d5a50; }
.hw .hw-deal .hw-textlink { color: #6a0710; }
.hw .hw-deal .hw-textlink:hover { color: #1f0d0a; }
.hw .hw-uhr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 1rem 0 0; }
.hw .hw-uhr__label { font-size: 0.9rem; font-weight: 600; color: var(--hw-weich); }
.hw .hw-uhr__zellen { display: flex; gap: 0.4rem; }
.hw .hw-uhr__z { display: grid; justify-items: center; min-inline-size: 3.1rem; padding: 0.35rem 0.3rem 0.3rem; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 31, 61, 0.35); border-radius: 6px; }
.hw .hw-uhr__z b { font-family: var(--hw-zahl); font-weight: 800; font-size: 1.35rem; line-height: 1.1; color: #ff4a58; font-variant-numeric: tabular-nums; }
.hw .hw-uhr__z i { font-style: normal; font-size: 0.7rem; color: var(--hw-leise); }
.hw .hw-uhr--klein { justify-content: center; }

.hw .hw-kv { margin: 0; position: relative; }
.hw .hw-kv__rahmen {
  position: relative; aspect-ratio: 1080 / 1340; max-block-size: 78svh; margin-inline: auto;
  clip-path: polygon(3% 1.5%, 18% 0, 22% 2.2%, 41% 0.4%, 47% 2.6%, 63% 0, 79% 1.8%, 84% 0.2%, 97% 2%, 100% 14%, 98.4% 31%, 100% 46%, 98.2% 63%, 100% 79%, 98.6% 98%, 83% 100%, 77% 97.8%, 60% 100%, 51% 98%, 36% 100%, 21% 97.6%, 14% 100%, 1.6% 98.4%, 0 83%, 1.8% 66%, 0 49%, 1.4% 30%, 0 12%);
  background: #120b0e;
}
.hw .hw-kv::before {
  content: ""; position: absolute; inset: -6%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 31, 61, 0.42), rgba(255, 31, 61, 0) 72%);
  animation: hw-glutpuls 3.2s ease-in-out infinite;
}
.hw .hw-kv__film { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hw .hw-kv figcaption, .hw .hw-fig-unter { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: 0.6rem; font-size: 0.8rem; color: var(--hw-leise); }
.hw .hw-ki { flex: none; }

.hw .hw-fakten { position: relative; z-index: 2; list-style: none; display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; margin-block: clamp(1.4rem, 3vw, 2.4rem) 0; padding: 0; color: var(--hw-weich); font-size: 0.95rem; }
.hw .hw-fakten li { display: flex; align-items: center; gap: 0.55rem; }
.hw .hw-fakten .hw-gi { color: #f3eadf; }

/* ------------------------------------------------------------------ Pakete */
.hw .hw-pakete { background: var(--hw-pakete); padding: clamp(10rem, 24vw, 21rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hw .hw-pakete > .lx-container, .hw .hw-schluss > .lx-container { z-index: 2; }
.hw .hw-pakete .hw-nebel::before { animation-duration: 120s; }
.hw .hw-tabs { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-block-end: clamp(2rem, 4vw, 3rem); background: #070507; border: 1px solid rgba(255, 31, 61, 0.35); border-radius: 8px; box-shadow: 0 0 24px rgba(255, 31, 61, 0.12); }
.hw .hw-tabs [role="tab"] {
  position: relative; z-index: 1; min-inline-size: 8.5rem; min-block-size: 2.9rem; padding: 0.5rem 1.2rem;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  font-family: var(--hw-gotisch); font-size: 1.45rem; line-height: 1; color: var(--hw-weich);
  transition: color 0.25s;
}
.hw .hw-tabs [role="tab"][aria-selected="true"] { color: #fff; }
.hw .hw-tabs__glut {
  position: absolute; inset-block: 4px; inset-inline-start: 4px; inline-size: calc(50% - 4px); border-radius: 6px;
  background: linear-gradient(180deg, #d0122c, #8c0016); box-shadow: 0 0 20px rgba(255, 31, 61, 0.55);
  transition: transform 0.45s cubic-bezier(0.6, -0.3, 0.3, 1.4);
}
.hw [data-hw-gender="damen"] .hw-tabs__glut { transform: translateX(100%); }
[dir="rtl"] .hw [data-hw-gender="damen"] .hw-tabs__glut { transform: translateX(-100%); }

.hw [data-hw-gender="herren"] .hw-g-d, .hw [data-hw-gender="damen"] .hw-g-h,
.hw-lb[data-gender="herren"] .hw-g-d, .hw-lb[data-gender="damen"] .hw-g-h { display: none !important; }

.hw .hw-karten {
  list-style: none; margin: 0; padding: 1.2rem 0 3rem;
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
}
@media (min-width: 75rem) {
  /* fuenf Karten nebeneinander: die Reihe ragt beidseitig ueber die Textspalte hinaus (bis 86rem) */
  .hw .hw-karten { grid-template-columns: repeat(5, 1fr); margin-inline: calc(50% - min(50vw - var(--lx-gutter), 43rem)); }
  .hw .hw-karte__name { font-size: 1.45rem; }
  .hw .hw-karte__preis > span { font-size: 1.5rem; }
  .hw .hw-karte__cta { font-size: 0.92rem; padding-inline: 0.8em; white-space: nowrap; }
}
@media (max-width: 47.99rem) {
  .hw .hw-karten {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--lx-gutter)); padding-inline: var(--lx-gutter); scroll-padding-inline: var(--lx-gutter);
    scrollbar-width: none;
  }
  .hw .hw-karten::-webkit-scrollbar { display: none; }
  .hw .hw-karte { scroll-snap-align: start; rotate: calc(var(--dreh, 0deg) * 0.5); }
}
/* Karten: Bild oben, darunter ein eigenes, gekipptes Papyrusblatt (border-image haelt die gerissenen Raender) */
.hw .hw-karte { position: relative; display: flex; flex-direction: column; rotate: var(--dreh, 0deg); transition: rotate 0.35s, translate 0.35s; }
.hw .hw-karte:hover { rotate: 0deg; translate: 0 -4px; }
.hw .hw-karte__bild {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0a0709;
  clip-path: polygon(0 0, 100% 0, 100% 93%, 90% 96%, 79% 92%, 66% 97%, 52% 93%, 38% 98%, 24% 93%, 11% 97%, 0 94%);
}
.hw .hw-karte__bild img, .hw .hw-karte__bild video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hw .hw-karte__bild video { opacity: 0; transition: opacity 0.6s; }
.hw .hw-karte__bild video.is-da { opacity: 1; }
.hw .hw-karte__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 60%, rgba(10, 5, 8, 0.85) 100%); pointer-events: none; }
.hw .hw-karte__bild > img.hw-blut { position: absolute; z-index: 3; inset: 0 0 auto 0; inline-size: 100%; block-size: auto; object-fit: fill; }
.hw .hw-karte__rabatt { position: absolute; z-index: 4; inset-block-start: 2.2rem; inset-inline-end: 0.7rem; background: #b3001b; color: #fff; font-family: var(--hw-zahl); font-weight: 800; font-size: 0.95rem; padding: 0.2em 0.5em; border-radius: 4px; box-shadow: 0 0 14px rgba(255, 31, 61, 0.5); rotate: 4deg; }
.hw .hw-karte__deal { position: absolute; z-index: 4; inset-block-start: 2.3rem; inset-inline-start: 0.7rem; background: rgba(0, 0, 0, 0.72); color: #ffb3b3; font-size: 0.78rem; font-weight: 600; padding: 0.3em 0.6em; border-radius: 4px; border: 1px solid rgba(255, 31, 61, 0.5); rotate: -3deg; }
.hw .hw-karte__emblem { position: absolute; z-index: 4; inset-inline-start: 0.6rem; inset-block-end: 2.6rem; rotate: -7deg; color: #f3eadf; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.95)); }
.hw .hw-karte__emblem .hw-gi { inline-size: 3.6rem; block-size: 3.6rem; }
.hw .hw-karte__papier {
  position: relative; z-index: 5; flex: 1; display: flex; flex-direction: column; gap: 0.3rem;
  margin: -2.4rem -0.35rem 0; padding: 0.35rem 0.45rem 0.6rem;
  border: 24px solid transparent; border-image: var(--papier) 84 fill / 24px / 0 stretch;
  rotate: var(--dreh2, 0deg); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6));
  color: #2b1510;
}
.hw .hw-karte__name { margin: 0; font-family: var(--hw-gotisch); font-weight: 400; font-size: 1.65rem; line-height: 1; color: #5b0a0e; letter-spacing: 0; }
.hw .hw-karte__zonen { margin: 0; font-size: 0.84rem; line-height: 1.42; color: #4a3530; min-block-size: 3.6em; }
.hw .hw-karte__preis { margin: 0.25rem 0 0; display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap; }
.hw .hw-karte__preis > span { font-family: var(--hw-zahl); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; color: #1f0d0a; }
.hw .hw-karte__preis small { font-size: 0.85rem; color: #5a4540; }
.hw .hw-karte__statt { margin: 0; font-size: 0.8rem; color: #5a4540; line-height: 1.4; }
.hw .hw-karte__statt s { color: #6d5a50; text-decoration-color: #b3001b; }
.hw .hw-karte__cta { margin-block-start: auto; inline-size: 100%; font-size: 0.95rem; }
.hw .hw-karte__statt + .hw-karte__cta { margin-block-start: 0.8rem; }

/* Lesbarkeit auf Papyrus (Jasper 27.09.2026: "feine Texte nicht lesbar"): die Blattmitte wird unter dem Text
   beruhigt (helle Lasur, Raender bleiben roh), Tinte dunkel und kraeftig, keine duennen Schnitte */
.hw .hw-karte__papier, .hw .hw-deal, .hw .hw-stufe__box, .hw .lx-faq details { isolation: isolate; }
.hw .hw-karte__papier::before, .hw .hw-deal::before, .hw .hw-stufe__box::before, .hw .lx-faq details::before {
  content: ""; position: absolute; inset: -4px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 72% 70% at 50% 50%, rgba(247, 238, 220, 0.86) 0%, rgba(245, 234, 212, 0.72) 58%, rgba(245, 234, 212, 0) 100%);
}
.hw .hw-karte__zonen { font-size: 0.9rem; font-weight: 600; color: #2a140e; line-height: 1.4; }
.hw .hw-karte__preis small { font-size: 0.9rem; font-weight: 600; color: #3b2019; }
.hw .hw-karte__statt { font-size: 0.86rem; font-weight: 600; color: #2a140e; }
.hw .hw-karte__statt s, .hw .hw-stufe__statt s, .hw .hw-deal__raten s { color: #4a3530; }
.hw .hw-stufe__zahl small { font-size: 0.84rem; font-weight: 700; color: #2a140e; }
.hw .hw-stufe__preis small { font-size: 0.9rem; font-weight: 600; color: #3b2019; }
.hw .hw-stufe__info { font-size: 0.86rem; font-weight: 600; color: #2a140e; }
.hw .hw-stufe__statt { font-size: 0.84rem; font-weight: 600; color: #2a140e; }
.hw .hw-stufe__spar, .hw .hw-deal__unter { font-size: 0.92rem; font-weight: 800; color: #125228; }
.hw .hw-deal__kopf { font-size: 0.95rem; font-weight: 700; color: #3b1a12; }
.hw .hw-deal__raten { font-size: 1rem; font-weight: 600; color: #1a0c08; }
.hw .hw-deal .hw-uhr__label { font-weight: 700; color: #2a140e; }
.hw .hw-deal .hw-uhr__z i { font-weight: 700; color: #3b2019; }
.hw .lx-faq summary { font-size: 1rem; font-weight: 700; color: #1a0c08; }
.hw .lx-faq .lx-faq__body p { font-size: 0.96rem; font-weight: 500; color: #24120c; }

/* ------------------------------------------------------------------ Warum jetzt (Knochen-Papier) */
.hw .hw-warum { background: var(--hw-nacht); color: #1a0c08; padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem); }
.hw .hw-warum__blatt {
  position: relative; isolation: isolate; padding: 0.6rem 1.4rem 1.2rem;
  border: 64px solid transparent; border-image: var(--papier) 150 fill / 64px / 0 stretch;
  rotate: -0.7deg; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.75));
}
.hw .hw-warum__blatt::before { content: ""; position: absolute; inset: -10px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(247, 238, 220, 0.72), rgba(247, 238, 220, 0) 100%); }
.hw .hw-warum__blut { position: absolute; z-index: 2; inset-block-start: -82px; inset-inline: -40px; inline-size: calc(100% + 80px); block-size: clamp(110px, 16vw, 230px); object-fit: fill; pointer-events: none; transform-origin: 50% 0; animation: hw-sickern 10s ease-in-out infinite alternate; }
.hw .hw-warum .hw-kopfzeile { position: relative; z-index: 3; padding-block-start: clamp(4rem, 9vw, 8rem); }
.hw .hw-warum .hw-h2 { color: #3b0a0e; }
.hw .hw-warum .hw-eyebrow { color: #8a0a12; font-weight: 700; }
.hw .hw-warum .hw-text { color: #2a140e; font-weight: 600; }
@media (max-width: 47.99rem) {
  .hw .hw-warum__blatt { border-width: 32px; border-image-width: 32px; padding: 0.2rem 0.3rem 0.6rem; rotate: -0.4deg; }
  .hw .hw-warum__blut { inset-block-start: -40px; inset-inline: -18px; inline-size: calc(100% + 36px); }
}
.hw .hw-gruende { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.hw .hw-grund { position: relative; z-index: 3; padding: 0.4rem 0 0; }
.hw .hw-grund .hw-gi { color: #2b1510; inline-size: 3.4rem; block-size: 3.4rem; --hw-gi-fuellung: #e9dfcf; --hw-gi-mond: #2b1510; }
.hw .hw-grund h3 { font-family: var(--hw-gotisch); font-weight: 400; font-size: 1.9rem; line-height: 1; margin: 0.6rem 0 0.2rem; color: #1a0a0d; }
.hw .hw-grund__kurz { font-weight: 800; margin: 0 0 0.4rem; color: #7d0a0a; }
.hw .hw-grund p { color: #24120c; font-weight: 500; line-height: 1.55; margin: 0; }

/* ------------------------------------------------------------------ FAQ */
.hw .hw-faq-sec { background: var(--hw-faq); padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem); }
.hw .lx-faq { gap: 0.9rem 1.4rem; }
.hw .lx-faq details, .hw .lx-faq details[open] {
  background: none; border-radius: 0; border: 18px solid transparent; border-image: var(--papier) 64 fill / 18px / 0 stretch;
  rotate: var(--dreh, 0deg); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55)); color: #2b1510;
}
.hw .lx-faq summary { color: #2b1510; font-weight: 700; padding: 0.45rem 1.1rem 0.45rem 1.3rem; }
.hw .lx-faq summary::after { border-color: #8a0a12; }
.hw .lx-faq .lx-faq__body { padding: 0 1.2rem 0.6rem 1.3rem; }
.hw .lx-faq .lx-faq__body p { color: #4a3530; line-height: 1.6; }

/* ------------------------------------------------------------------ Schluss */
.hw .hw-schluss { background: var(--hw-schluss); padding: clamp(10rem, 18vw, 15rem) 0 clamp(4rem, 8vw, 7rem); overflow: hidden; text-align: center; isolation: isolate; }
.hw .hw-monster--schluss { z-index: 0; inset-block-start: 8%; inset-inline-start: 50%; translate: -48% 0; inline-size: min(110vw, 64rem); }
.hw .hw-monster--schluss img { opacity: 0.5; }
.hw .hw-parallax--schluss { z-index: 1; opacity: 0.8; }
.hw .hw-schluss::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 60% at 50% 60%, rgba(6, 5, 7, 0.55), rgba(6, 5, 7, 0.1)); pointer-events: none; }
.hw .hw-schluss__inhalt { z-index: 2; display: grid; justify-items: center; }
.hw .hw-schluss .hw-lead { margin-inline: auto; color: var(--hw-text); }
.hw .hw-schluss .hw-eyebrow { display: flex; flex-wrap: wrap; justify-content: center; }

/* ------------------------------------------------------------------ Leiste */
.hw .hw-sticky { background: rgba(7, 6, 10, 0.94); border-block-start-color: rgba(255, 31, 61, 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hw .hw-sticky .btw-sticky__text b { font-family: var(--hw-zahl); color: #fff; }
.hw .hw-sticky .btw-sticky__text small { color: var(--hw-weich); }
.hw .hw-sticky .hw-btn { margin-inline-start: auto; min-block-size: 2.75rem; }
.hw .btw-cta-kurz { display: none; }
@media (max-width: 30rem) { .hw .btw-cta-lang { display: none; } .hw .btw-cta-kurz { display: inline; } }

/* ------------------------------------------------------------------ Buchungs-Modal */
html.hw-lb-offen, html.hw-lb-offen body { overflow: hidden; }
/* site-weite Einblendungen (Band, Siegel, Modelle-Stoerer) liegen sonst ueber dem Modal */
html.hw-lb-offen .lz-ribbon, html.hw-lb-offen .pe-pro-seal, html.hw-lb-offen .lz-models-badge { display: none !important; }
.hw.hw-lb {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: clamp(0rem, 2vw, 1.5rem);
  background: radial-gradient(80% 70% at 50% 40%, rgba(40, 3, 10, 0.72), rgba(2, 1, 3, 0.94));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s;
}
.hw.hw-lb[hidden] { display: none; }
.hw.hw-lb.is-offen { opacity: 1; }
.hw .hw-lb__panel {
  position: relative; display: grid; grid-template-rows: auto 1fr auto;
  inline-size: min(100%, 62rem); block-size: min(100%, 56rem); max-block-size: 100dvh;
  background: linear-gradient(180deg, #150c11 0%, #0b070a 100%);
  border: 1px solid rgba(255, 31, 61, 0.6); border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(20, 0, 5, 0.9), 0 0 0 5px rgba(255, 31, 61, 0.28), 0 0 60px rgba(255, 31, 61, 0.35);
  animation: hw-rahmen 3.4s ease-in-out infinite;
  transform: translateY(14px) scale(0.985); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hw.hw-lb.is-offen .hw-lb__panel { transform: none; }
@keyframes hw-rahmen {
  0%, 100% { box-shadow: 0 0 0 4px rgba(20, 0, 5, 0.9), 0 0 0 5px rgba(255, 31, 61, 0.25), 0 0 44px rgba(255, 31, 61, 0.28); }
  50% { box-shadow: 0 0 0 4px rgba(20, 0, 5, 0.9), 0 0 0 5px rgba(255, 31, 61, 0.5), 0 0 76px rgba(255, 31, 61, 0.5); }
}
.hw .hw-lb__ecke { position: absolute; inline-size: 34px; block-size: 34px; border: 2px solid #ff3b4e; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 31, 61, 0.9)); }
.hw .hw-lb__ecke--lo { inset-block-start: -6px; inset-inline-start: -6px; border-inline-end: 0; border-block-end: 0; }
.hw .hw-lb__ecke--ro { inset-block-start: -6px; inset-inline-end: -6px; border-inline-start: 0; border-block-end: 0; }
.hw .hw-lb__ecke--lu { inset-block-end: -6px; inset-inline-start: -6px; border-inline-end: 0; border-block-start: 0; }
.hw .hw-lb__ecke--ru { inset-block-end: -6px; inset-inline-end: -6px; border-inline-start: 0; border-block-start: 0; }
.hw .hw-lb__kopf { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.6rem 1rem; padding: 1rem 1.2rem 0.9rem; border-block-end: 1px solid rgba(255, 31, 61, 0.22); }
.hw .hw-lb__titel { margin: 0; font-family: var(--hw-gotisch); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1; color: var(--hw-knochen); }
.hw .hw-lb__zu { grid-column: 2; grid-row: 1; inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; background: transparent; border: 1px solid var(--hw-linie2); border-radius: 6px; color: var(--hw-text); cursor: pointer; }
.hw .hw-lb__zu:hover { border-color: var(--hw-glut); color: #fff; }
.hw .hw-lb__zu .hw-icon { inline-size: 1.3rem; block-size: 1.3rem; }
.hw .hw-lb__schritte { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; counter-reset: none; }
.hw .hw-lb__schritte li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--hw-leise); padding-block-start: 0.5rem; border-block-start: 2px solid rgba(255, 255, 255, 0.1); transition: color 0.3s, border-color 0.3s; min-inline-size: 0; }
.hw .hw-lb__schritte li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw .hw-lb__schritte b { font-family: var(--hw-zahl); font-weight: 800; }
.hw .hw-lb__schritte li.is-fertig { color: var(--hw-weich); border-color: rgba(255, 31, 61, 0.5); }
.hw .hw-lb__schritte li.is-aktiv { color: #fff; border-color: var(--hw-glut); }
.hw .hw-lb__koerper { overflow-y: auto; overscroll-behavior: contain; padding: 1.2rem; min-block-size: 0; }
.hw .hw-lb__schritt { animation: hw-auftauchen 0.4s ease-out; }
@keyframes hw-auftauchen { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.hw .hw-lb__gruppe { border: 0; margin: 0 0 1.3rem; padding: 0; min-inline-size: 0; }
.hw .hw-lb__frage { display: block; margin: 0 0 0.5rem; padding: 0; font-family: var(--hw-gotisch); font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.05; color: var(--hw-knochen); }
.hw .hw-lb__hinweis { margin: 0 0 0.9rem; color: var(--hw-weich); font-size: 0.9rem; line-height: 1.5; }
.hw-lb input[type="radio"] { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.hw-lb label { position: relative; }
.hw-lb label { display: block; cursor: pointer; }
/* Schritt 1: Geschlecht als zwei grosse Bildkacheln, ein Tipp fuehrt weiter */
.hw .hw-gender { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; max-inline-size: 34rem; }
.hw .hw-gender__box {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #0a0709;
  box-shadow: inset 0 0 0 1px var(--hw-linie2); transition: box-shadow 0.25s, transform 0.25s;
}
.hw .hw-gender__box img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.8); transition: filter 0.3s, transform 0.6s; }
.hw .hw-gender__box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(8, 3, 5, 0.92) 100%); }
.hw .hw-gender__box b { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0.8rem; text-align: center; font-family: var(--hw-gotisch); font-weight: 400; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); color: var(--hw-knochen); }
.hw .hw-gender__karte:hover .hw-gender__box img { filter: saturate(1) brightness(0.95); transform: scale(1.03); }
.hw .hw-gender__karte:hover .hw-gender__box { box-shadow: inset 0 0 0 1px rgba(255, 31, 61, 0.6), 0 0 26px rgba(255, 31, 61, 0.3); }
.hw .hw-gender input:checked + .hw-gender__box { box-shadow: inset 0 0 0 2px var(--hw-glut), 0 0 34px rgba(255, 31, 61, 0.5); }
.hw .hw-gender input:checked + .hw-gender__box b { color: #fff; animation: hw-flacker 0.8s steps(1, end) 1; }

.hw .hw-lb__kontext { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--hw-weich); }
.hw .hw-lb__kontext b { color: var(--hw-text); font-weight: 600; }
.hw .hw-lb__aendern { background: none; border: 0; padding: 0.25rem 0; font: inherit; font-size: 0.85rem; color: var(--hw-glut2); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.hw .hw-lb__aendern:hover { color: #fff; }
.hw .hw-lb__fein { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--hw-leise); }

.hw .hw-stufen, .hw .hw-studios { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.hw-lb .hw-blut { position: absolute; z-index: 2; inset-inline: 0; inset-block-start: -12px; inline-size: 100%; block-size: 38px; object-fit: fill; opacity: 0; transition: opacity 0.25s; animation: none; }
.hw input:checked + span > .hw-blut { opacity: 1; }
.hw .hw-haken { position: absolute; z-index: 3; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--hw-glut); color: #fff; opacity: 0; transform: scale(0.6); transition: all 0.2s; box-shadow: 0 0 12px rgba(255, 31, 61, 0.8); }
.hw .hw-haken__icon { inline-size: 1rem; block-size: 1rem; }
.hw input:checked + span .hw-haken { opacity: 1; transform: none; }

/* Schritt 2: Sitzungen als Grabplatten in einer Liste */
.hw .hw-stufe__box {
  position: relative; display: grid; grid-template-columns: 5rem 1fr auto; align-items: center; gap: 0.3rem 1rem;
  padding: 0.3rem 1.1rem 0.9rem 0.9rem; border: 22px solid transparent; border-image: var(--papier) 70 fill / 22px / 0 stretch;
  rotate: var(--dreh, 0deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); color: #2b1510;
  transition: filter 0.25s, rotate 0.25s, translate 0.25s;
}
.hw label:hover .hw-stufe__box { filter: drop-shadow(0 0 12px rgba(255, 31, 61, 0.55)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); rotate: 0deg; translate: 3px 0; }
.hw input:checked + .hw-stufe__box { filter: drop-shadow(0 0 2px #ff1f3d) drop-shadow(0 0 2px #ff1f3d) drop-shadow(0 0 20px rgba(255, 31, 61, 0.7)); rotate: 0deg; }
.hw .hw-stufe__box > .hw-blut { inset-block-start: -24px; inset-inline: -14px; inline-size: calc(100% + 28px); block-size: 40px; }
.hw .hw-stufe__zahl { display: grid; justify-items: center; line-height: 1; }
.hw .hw-stufe__zahl b { font-family: var(--hw-gotisch); font-weight: 400; font-size: 3.4rem; line-height: 0.95; color: #3b1a14; }
.hw input:checked + .hw-stufe__box .hw-stufe__zahl b { color: #8a0a12; }
.hw .hw-stufe__zahl small { margin-block-start: 0.25rem; font-size: 0.78rem; color: #5a4540; }
.hw .hw-stufe__mitte { display: grid; gap: 0.15rem; min-inline-size: 0; }
.hw .hw-stufe__tipp { justify-self: start; font-size: 0.74rem; font-weight: 700; color: #8a0a12; border: 1.5px solid #8a0a12; padding: 0.05em 0.45em; border-radius: 3px; rotate: -3deg; }
.hw .hw-stufe__tipp--best { color: #1f6b3a; border-color: #1f6b3a; rotate: 2deg; }
.hw .hw-stufe__preis { line-height: 1.1; }
.hw .hw-stufe__preis > span { font-family: var(--hw-zahl); font-weight: 800; font-size: 1.65rem; color: #1f0d0a; letter-spacing: -0.02em; }
.hw .hw-stufe__preis small { color: #5a4540; font-size: 0.88rem; }
.hw .hw-stufe__info { font-size: 0.8rem; color: #5a4540; line-height: 1.35; }
.hw .hw-stufe__rechts { display: grid; justify-items: end; gap: 0.2rem; text-align: end; padding-inline-end: 2.2rem; }
.hw .hw-stufe__rabatt { background: #b3001b; color: #fff; font-family: var(--hw-zahl); font-weight: 800; font-size: 1rem; padding: 0.12em 0.5em; border-radius: 4px; box-shadow: 0 0 14px rgba(255, 31, 61, 0.45); }
.hw .hw-stufe__spar { font-size: 0.84rem; font-weight: 700; color: #1f6b3a; white-space: nowrap; }
.hw .hw-stufe__statt { font-size: 0.78rem; color: #3b2520; white-space: nowrap; }
.hw .hw-stufe__balken { position: absolute; inset-inline: 1rem; inset-block-end: 0.2rem; block-size: 5px; border-radius: 3px; background: rgba(60, 30, 20, 0.18); }
.hw .hw-stufe__balken > span {
  position: relative; display: block; block-size: 100%; inline-size: 0; border-radius: 3px;
  background: linear-gradient(90deg, #5b0710, #d1102a 70%, #ff3b4e); box-shadow: 0 0 10px rgba(255, 31, 61, 0.6);
  transition: inline-size 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hw .hw-stufe__balken > span::after { content: ""; position: absolute; inset-inline-end: 1px; inset-block-start: 3px; inline-size: 5px; block-size: 9px; border-radius: 0 0 3px 3px / 0 0 6px 6px; background: #d1102a; }
@media (max-width: 34rem) {
  .hw .hw-stufe__box { grid-template-columns: 3.4rem 1fr; padding: 0.3rem 0.8rem 0.9rem 0.7rem; gap: 0.25rem 0.7rem; border-width: 18px; border-image-width: 18px; }
  .hw .hw-stufe__zahl b { font-size: 2.6rem; }
  .hw .hw-stufe__rechts { grid-column: 2; justify-items: start; text-align: start; padding-inline-end: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
  .hw .hw-stufe__preis > span { font-size: 1.4rem; }
  .hw .hw-stufe__mitte { padding-inline-end: 1.6rem; }
}

/* Schritt 3: Studios als Fotokarten im Halloween-Look */
.hw .hw-studios { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: 0.9rem; }
.hw .hw-studio__box {
  position: relative; display: grid; overflow: hidden; border-radius: 8px; background: #0d080b;
  box-shadow: inset 0 0 0 1px var(--hw-linie); transition: box-shadow 0.25s, transform 0.25s;
}
.hw .hw-studio__bild { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 90%, 88% 94%, 76% 90%, 63% 96%, 49% 91%, 35% 97%, 22% 92%, 10% 96%, 0 91%); }
.hw .hw-studio__bild img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.82); transition: transform 0.7s, filter 0.3s; }
.hw .hw-studio__bild::after { content: ""; position: absolute; inset: 0; background: radial-gradient(100% 90% at 50% 40%, transparent 50%, rgba(5, 2, 4, 0.7) 100%); }
.hw .hw-studio__text { display: grid; gap: 0.1rem; padding: 0.35rem 0.9rem 0.9rem; }
.hw .hw-studio__stadt { font-size: 0.78rem; color: var(--hw-glut2); font-weight: 600; }
.hw .hw-studio__name { font-family: var(--hw-gotisch); font-weight: 400; font-size: 1.5rem; line-height: 1.05; color: var(--hw-knochen); }
.hw .hw-studio__box small { color: var(--hw-leise); font-size: 0.78rem; }
.hw label:hover .hw-studio__box { box-shadow: inset 0 0 0 1px rgba(255, 31, 61, 0.5), 0 0 28px rgba(255, 31, 61, 0.22); transform: translateY(-2px); }
.hw label:hover .hw-studio__bild img { transform: scale(1.05); filter: saturate(1) brightness(0.95); }
.hw label:hover .hw-studio__name { animation: hw-flacker 0.8s steps(1, end) 1; }
.hw input:checked + .hw-studio__box { box-shadow: inset 0 0 0 2px var(--hw-glut), 0 0 34px rgba(255, 31, 61, 0.45); }
@media (max-width: 34rem) {
  .hw .hw-studios { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .hw .hw-studio__name { font-size: 1.2rem; }
  .hw .hw-studio__text { padding: 0.3rem 0.6rem 0.7rem; }
  .hw .hw-studio__box small { font-size: 0.7rem; }
}
.hw .hw-lb__fuss { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.2rem calc(0.85rem + env(safe-area-inset-bottom)); border-block-start: 1px solid rgba(255, 31, 61, 0.22); background: rgba(0, 0, 0, 0.35); }
.hw .hw-lb__zusammen { flex: 1; margin: 0; min-inline-size: 0; font-size: 0.85rem; color: var(--hw-weich); line-height: 1.35; }
.hw .hw-lb__fuss .hw-btn { min-block-size: 2.9rem; flex: none; }
.hw .hw-lb__fuss [data-lb-weiter][hidden], .hw .hw-lb__fuss [data-lb-zurueck][hidden] { display: none; }
@media (max-width: 34rem) {
  .hw .hw-lb__zusammen { font-size: 0.76rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .hw .hw-lb__koerper { padding: 1rem 0.9rem; }
  .hw .hw-lb__hinweis { font-size: 0.84rem; }
  .hw .hw-lb__fuss .hw-btn { padding-inline: 0.9rem; }
  .hw .hw-lb__schritte li span { display: none; }
  .hw .hw-lb__schritte li.is-aktiv span { display: inline; }
}
@media (max-width: 47.99rem) {
  .hw.hw-lb { padding: 0; }
  .hw .hw-lb__panel { inline-size: 100%; block-size: 100dvh; border-radius: 0; border-inline: 0; }
  .hw .hw-lb__ecke { display: none; }
}
/* Schritt 4: der Buchungsfunnel fuellt das Modal */
.hw-lb[data-schritt="4"] .hw-lb__koerper { padding: 0; overflow: hidden; }
.hw .hw-lb__schritt--termin, .hw .hw-lb__rahmen { block-size: 100%; }
.hw .hw-lb__rahmen { position: relative; background: #fff; }
.hw .hw-lb__rahmen iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; }
.hw .hw-lb__laden { position: absolute; inset: 0; z-index: 1; margin: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; background: #0b070a; color: var(--hw-weich); font-family: var(--hw-gotisch); font-size: 1.6rem; transition: opacity 0.5s; }
.hw .hw-lb__laden.is-weg { opacity: 0; pointer-events: none; }
.hw .hw-lb__puls { inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: radial-gradient(closest-side, #fff4cf, #ff3b2f 40%, rgba(255, 31, 61, 0) 100%); animation: hw-glutpuls 1s ease-in-out infinite, hw-blinzeln 2.2s ease-in-out infinite; }
.hw .hw-lb__notfall { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0; margin: 0; padding: 0.7rem 1rem; background: #1a0b10; color: var(--hw-weich); font-size: 0.9rem; text-align: center; }

/* ------------------------------------------------------------------ Frist, Bewegung */
html.hw-vorbei .hw [data-hw-frist] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hw *, .hw *::before, .hw *::after { animation: none !important; transition: none !important; }
  .hw .hw-glitch::before, .hw .hw-glitch::after { display: none; }
  .hw .hw-spinnen { display: none; }
  .hw .hw-atmo--film { display: none; }
}

/* ================================================================== Spec 036 (01.10.2026): Minimal Horror
   Jasper: "ultra hochwertig, mystisch, psycho, minimalistisch, nichts Comichaftes". Titel als generierte
   Horror-Typografie (fal.ai), feine Papiere, feines Blut, dunkle minimale Knoepfe mit subtilem Glimmen und
   echten Tropfen, fotorealistische Hintergrund-Schleifen, Staub statt Glitch. Ueberschreibt die Regeln oben. */
.btw.hw, .hw.hw-lb {
  --hw-gotisch: "Archivo", "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --hw-tropf: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --hw-nacht: #050406; --hw-pakete: #050406; --hw-faq: #050406; --hw-schluss: #050406;
}
body.hw-seite, body.hw-seite nav.nav { background: #050406; }

/* Titel: Bild fuer Deutsch, Text fuer alle anderen Sprachen (und immer fuer Screenreader) */
.hw .hw-typo { position: relative; }
.hw .hw-typo__bild { display: block; }
.hw .hw-typo__bild img { display: block; inline-size: 100%; block-size: auto; }
html:lang(de) .hw .hw-typo__text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html:not(:lang(de)) .hw .hw-typo__bild { display: none; }
.hw .hw-h1.hw-typo { margin: 1.1rem 0 1rem; max-inline-size: 36rem; }
.hw .hw-h1__g1 { inline-size: min(100%, 34rem); filter: drop-shadow(0 6px 22px rgba(255, 31, 61, 0.22)); }
.hw .hw-h1__g2 { inline-size: min(78%, 24rem); margin: 0.9rem 0 0 0.3rem; filter: drop-shadow(0 0 14px rgba(160, 230, 255, 0.35)); animation: hw-atmen 6s ease-in-out infinite; }
@keyframes hw-atmen { 0%, 100% { opacity: 0.88; } 50% { opacity: 1; filter: drop-shadow(0 0 22px rgba(160, 230, 255, 0.55)); } }
.hw .hw-h2.hw-typo .hw-typo__bild img { inline-size: min(100%, 44rem); }
.hw .hw-h2--gross.hw-typo .hw-typo__bild img { inline-size: min(100%, 52rem); margin-inline: auto; }
.hw .hw-h2.hw-typo { margin: 0.2rem 0 0; }
html:not(:lang(de)) .hw .hw-h2, html:not(:lang(de)) .hw .hw-h1 .hw-typo__text { font-family: var(--hw-sans); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.15; }
html:not(:lang(de)) .hw .hw-h2 { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); color: #e8f4ff; text-shadow: 0 0 18px rgba(160, 230, 255, 0.35); }
html:not(:lang(de)) .hw .hw-h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); color: #ff2d47; letter-spacing: 0.04em; }
.hw .hw-glitch::before, .hw .hw-glitch::after { content: none; }
.hw .hw-eyebrow { font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.74rem; color: #ff5a4f; }
.hw .hw-lead, .hw .hw-text { color: #c9c2c6; font-weight: 400; }

/* Stempel-Badge */
.hw .hw-badge.hw-typo { display: block; max-inline-size: 15.5rem; rotate: -2.5deg; margin: 0 0 0.4rem -0.4rem; }
.hw .hw-badge .hw-typo__bild img { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8)); }
html:not(:lang(de)) .hw .hw-badge__text { background: none; border: 1px solid rgba(255, 31, 61, 0.55); box-shadow: none; font-family: var(--hw-sans); letter-spacing: 0.14em; font-weight: 600; }

/* Knoepfe: dunkel, minimal, glimmend, blutend */
.hw .hw-btn--glut {
  position: relative; isolation: isolate; overflow: visible;
  background: #0d0a0c; color: #fff; font-weight: 500; letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 1px rgba(255, 31, 61, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 31, 61, 0.18);
  animation: hw-glimmen2 4.2s ease-in-out infinite;
}
.hw .hw-btn--glut::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: radial-gradient(120% 100% at 50% 120%, rgba(255, 31, 61, 0.45), rgba(255, 31, 61, 0) 60%); opacity: 0.8; }
.hw .hw-btn--glut:hover, .hw .hw-btn--glut:focus-visible { background: #16090c; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 90, 79, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 31, 61, 0.4); }
.hw .hw-btn--glut:hover span { animation: none; }
.hw .hw-btn--glut > span:first-of-type { text-shadow: 0 0 10px rgba(255, 31, 61, 0.35); }
@keyframes hw-glimmen2 {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 31, 61, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 31, 61, 0.14); }
  50% { box-shadow: inset 0 0 0 1px rgba(255, 60, 80, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 31, 61, 0.32); }
}
.hw .hw-btn__blut { position: absolute; inset-inline: 0; inset-block-start: 100%; block-size: 0; pointer-events: none; z-index: 2; }
.hw .hw-btn__blut i {
  position: absolute; inset-inline-start: var(--x, 30%); inset-block-start: -3px; inline-size: 7px; block-size: 46px;
  background: var(--t) center top / 100% auto no-repeat; transform-origin: 50% 0;
  animation: hw-tropfen var(--d, 8s) cubic-bezier(0.6, 0, 0.9, 0.3) var(--v, 0s) infinite;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
@keyframes hw-tropfen {
  0% { transform: scaleY(0.12); opacity: 0; }
  10% { opacity: 1; }
  62% { transform: scaleY(0.55); opacity: 1; }
  78% { transform: scaleY(1); opacity: 1; }
  86% { transform: translateY(26px) scaleY(1.05); opacity: 0.9; }
  100% { transform: translateY(48px) scaleY(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hw .hw-btn__blut i { animation: none; transform: scaleY(0.5); opacity: 1; } .hw .hw-btn--glut, .hw .hw-h1__g2 { animation: none; } }
.hw .hw-btn--leer { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }

/* Hero */
.hw .hw-atmo { filter: saturate(0.35) brightness(0.42) contrast(1.15); }
.hw .hw-geist--hero { --o: 0.7; inset-block-end: -4%; inset-inline-start: 50%; translate: -50% 0; inline-size: min(100%, 80rem); aspect-ratio: 16 / 9; z-index: 1; }
.hw .hw-geist--hero .hw-geist__film { -webkit-mask-image: radial-gradient(70% 70% at 50% 60%, #000 35%, rgba(0, 0, 0, 0.5) 65%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 60%, #000 35%, rgba(0, 0, 0, 0.5) 65%, transparent 100%); }
.hw .hw-staub { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 3; pointer-events: none; mix-blend-mode: screen; }
.hw .hw-kv__rahmen { clip-path: none; border-radius: 8px; background: #0a0709; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.7); aspect-ratio: 4 / 5; }
.hw .hw-kv::before { background: radial-gradient(closest-side, rgba(255, 31, 61, 0.22), rgba(255, 31, 61, 0) 72%); animation-duration: 6s; }
.hw .hw-fakten { font-size: 0.86rem; letter-spacing: 0.02em; color: #a9a0a4; }
.hw .hw-fakten li::before { content: ""; inline-size: 18px; block-size: 1px; background: rgba(255, 31, 61, 0.7); flex: none; }

/* Deal-Papier: feiner, weniger Neigung */
.hw .hw-deal { rotate: -0.8deg; border-width: 30px; border-image-width: 30px; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.8)); }
.hw .hw-deal::before { background: radial-gradient(ellipse 74% 72% at 50% 50%, rgba(247, 238, 220, 0.6) 0%, rgba(245, 234, 212, 0.45) 60%, rgba(245, 234, 212, 0) 100%); }

/* Zonen-Karten: klare Kanten, Laserlicht-Shots, keine Risskante */
.hw .hw-karte__bild { clip-path: none; border-radius: 6px 6px 0 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.hw .hw-karte__bild::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 55%, rgba(5, 4, 6, 0.9) 100%); }
.hw .hw-karte__rabatt { inset-block-start: 0.7rem; background: rgba(5, 4, 6, 0.82); color: #ff4a58; box-shadow: inset 0 0 0 1px rgba(255, 31, 61, 0.6); font-weight: 700; rotate: 0deg; }
.hw .hw-karte__deal { inset-block-start: 0.8rem; background: rgba(5, 4, 6, 0.82); color: #e8f4ff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem; }
.hw .hw-karte__papier { border-width: 22px; border-image-width: 22px; margin-block-start: -1.6rem; }
.hw .hw-karte__name { font-family: var(--hw-sans); font-weight: 700; font-size: 1.15rem; line-height: 1.15; letter-spacing: -0.01em; color: #3b0a0e; }
@media (min-width: 75rem) { .hw .hw-karte__name { font-size: 1.12rem; } }
.hw .hw-karte { rotate: calc(var(--dreh, 0deg) * 0.45); }
.hw .hw-tabs { background: #0b090b; border-color: rgba(255, 255, 255, 0.14); }
.hw .hw-tabs [role="tab"] { font-family: var(--hw-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; }
.hw .hw-tabs__glut { background: #1a0a0e; box-shadow: inset 0 0 0 1px rgba(255, 31, 61, 0.7), 0 0 16px rgba(255, 31, 61, 0.25); }
.hw .hw-pakete { padding-block-start: clamp(8rem, 18vw, 16rem); }
.hw .hw-blutband { opacity: 0.9; block-size: clamp(120px, 18vw, 300px); animation: none; }
.hw .hw-geist--pakete { aspect-ratio: 3 / 4; inline-size: min(40vw, 36rem); inset-inline-end: -4vw; inset-block-start: 2rem; --o: 0.75; }

/* Szene */
.hw .hw-szene .hw-h2 { filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.95)); }

/* Warum: Papier mit Text-Titel (dunkle Tinte), feines Blut */
.hw .hw-warum .hw-h2 { font-family: var(--hw-sans); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.08; }
.hw .hw-warum__blut { opacity: 0.95; block-size: clamp(90px, 12vw, 170px); }
.hw .hw-grund h3 { font-family: var(--hw-sans); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; margin-top: 0.2rem; }
.hw .hw-grund::before { content: ""; display: block; inline-size: 2.2rem; block-size: 1px; background: #8a0a12; margin-block-end: 0.8rem; }
.hw .hw-geist--warum-l, .hw .hw-geist--warum-r { aspect-ratio: 3 / 4; }

/* FAQ */
.hw .hw-geist--faq { aspect-ratio: 3 / 4; --o: 0.7; inline-size: clamp(240px, 26vw, 460px); }
.hw .lx-faq summary { font-family: var(--hw-sans); }

/* Schluss */
.hw .hw-geist--schluss-m { --o: 0.85; inset-block-end: -6%; inset-inline-start: 50%; translate: -50% 0; inline-size: min(70vw, 46rem); aspect-ratio: 3 / 4; z-index: 1; }
.hw .hw-geist--schluss-r { --o: 0.6; }
.hw .hw-schluss .hw-lead { color: #d9d2d5; }
@media (max-width: 47.99rem) {
  .hw .hw-h1__g2 { inline-size: 70%; }
  .hw .hw-badge.hw-typo { max-inline-size: 12.5rem; }
  .hw .hw-geist--schluss-m { inline-size: 110vw; inset-block-end: 0; }
  .hw .hw-geist--hero { inline-size: 150%; }
  .hw .hw-karte__name { font-size: 1.1rem; }
}
/* Feinjustierung nach erstem Bau (01.10.2026) */
.hw .hw-h1__g1 { inline-size: min(100%, 38rem); }
.hw .hw-szene .hw-h2--gross.hw-typo .hw-typo__bild img { inline-size: min(88%, 34rem); }
.hw .hw-szene { align-items: end; }
.hw .hw-schluss .hw-h2--gross.hw-typo .hw-typo__bild img { inline-size: min(100%, 46rem); }
.hw .hw-faq-sec .hw-h2.hw-typo .hw-typo__bild img { inline-size: min(100%, 40rem); }
.hw .hw-pakete .hw-h2.hw-typo .hw-typo__bild img { inline-size: min(100%, 38rem); }
.hw .hw-blutband--schluss { opacity: 0.75; block-size: clamp(100px, 14vw, 220px); }
.hw .hw-blutband--pakete { opacity: 0.8; }
.hw .hw-schluss { padding-block-start: clamp(8rem, 14vw, 12rem); }
/* Jasper 01.10.2026: keine halbtransparenten Kaesten um die Papiere. Die Lesbarkeits-Lasur liegt jetzt nur noch
   innen im Blatt (laeuft vor dem Rand aus), Papier-Innenabstand am Handy groesser, Schatten weicher. */
.hw .hw-karte__papier::before, .hw .hw-deal::before, .hw .hw-stufe__box::before, .hw .lx-faq details::before {
  inset: 10% 7%; background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(247, 238, 220, 0.62) 0%, rgba(245, 234, 212, 0.4) 55%, rgba(245, 234, 212, 0) 100%);
}
.hw .hw-warum__blatt::before { inset: 9% 7%; background: radial-gradient(ellipse 72% 70% at 50% 50%, rgba(247, 238, 220, 0.55), rgba(247, 238, 220, 0.3) 60%, rgba(247, 238, 220, 0) 100%); }
.hw .lx-faq details, .hw .lx-faq details[open] { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.7)); }
.hw .lx-faq summary { padding-inline: 1.4rem 1.3rem; }
.hw .lx-faq .lx-faq__body { padding-inline: 1.4rem 1.3rem; }
@media (max-width: 47.99rem) {
  .hw .hw-warum__blatt { border-width: 34px; border-image-width: 34px; padding: 0.8rem 0.9rem 1.2rem; }
  .hw .hw-warum .hw-kopfzeile { padding-block-start: clamp(3rem, 12vw, 5rem); }
  .hw .hw-karte__papier { border-width: 20px; border-image-width: 20px; padding: 0.4rem 0.5rem 0.7rem; }
  .hw .hw-deal { border-width: 26px; border-image-width: 26px; padding: 0.4rem 0.6rem 0.6rem; rotate: -0.5deg; }
  .hw .lx-faq details, .hw .lx-faq details[open] { border-width: 16px; border-image-width: 16px; rotate: calc(var(--dreh, 0deg) * 0.6); }
  .hw .lx-faq summary { padding-inline: 1.1rem 1.6rem; }
  .hw .hw-szene .hw-geist__film { object-position: 50% 15%; }
  .hw .hw-szene .hw-h2--gross.hw-typo .hw-typo__bild img { inline-size: 78%; }
  .hw .hw-szene { min-block-size: 34rem; }
  .hw .hw-h1__g1 { inline-size: 100%; }
}
/* Szene mit Original-Handstueck (16:9): Strahl laeuft nach rechts, Titel sitzt links unten im Dunst */
.hw .hw-geist--szene .hw-geist__film { -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 50%, rgba(0, 0, 0, 0.5) 78%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 50%, rgba(0, 0, 0, 0.5) 78%, transparent 100%); object-position: 50% 50%; }
.hw .hw-szene { min-block-size: clamp(26rem, 50vw, 46rem); }
@media (max-width: 47.99rem) { .hw .hw-szene .hw-geist__film { object-position: 30% 50%; } .hw .hw-szene { min-block-size: 30rem; } }

/* ================================================================== Spec 036, Runde 2 (Jasper: "viel krasser, psycho,
   modern, grosse BG-Animationen"): Vollbildfilme je Abschnitt, Laser-Scanline, Herzschlag-Vignette, Filmkorn,
   Kratzer, Flackern, Zucken der Headline, Riesen-Wort im Hero-Hintergrund. Alles aus bei reduzierter Bewegung. */
.hw .hw-film { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hw .hw-film__v { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: var(--fo, 0.75); filter: contrast(1.08) saturate(0.9); }
.hw .hw-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #050406 0%, rgba(5, 4, 6, 0) 16%, rgba(5, 4, 6, 0) 80%, #050406 100%); }
.hw .hw-film--hero .hw-film__v { --fo: 0.95; object-position: 72% 50%; }
.hw .hw-film--hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5, 4, 6, 0.92) 0%, rgba(5, 4, 6, 0.72) 38%, rgba(5, 4, 6, 0.2) 62%, rgba(5, 4, 6, 0.05) 100%); }
.hw .hw-film--pakete .hw-film__v { --fo: 0.6; }
.hw .hw-film--warum .hw-film__v { --fo: 0.7; object-position: 50% 40%; }
.hw .hw-film--faq .hw-film__v { --fo: 0.7; }
.hw .hw-film--schluss .hw-film__v { --fo: 0.9; object-position: 50% 100%; }
.hw .hw-film--schluss::after { background: linear-gradient(180deg, #050406 0%, rgba(5, 4, 6, 0.2) 30%, rgba(5, 4, 6, 0) 70%, rgba(5, 4, 6, 0.6) 100%); }
.hw .hw-hero__bg::after { background: linear-gradient(180deg, rgba(5, 4, 6, 0.4) 0%, rgba(5, 4, 6, 0) 25%, rgba(5, 4, 6, 0) 60%, rgba(5, 4, 6, 0.97) 94%, #050406 100%); }
.hw .hw-geist--hero { --o: 0.45; }
.hw .hw-hero__wort { position: absolute; z-index: 0; inset-inline-start: 50%; inset-block-start: 42%; inline-size: max(140%, 70rem); translate: -50% -50%; opacity: 0.1; mix-blend-mode: screen; pointer-events: none; animation: hw-treiben 48s ease-in-out infinite alternate; }
@keyframes hw-treiben { from { translate: -52% -50%; } to { translate: -48% -47%; } }
.hw .hw-geist--szene { inset: 0; inline-size: 100%; margin: 0; }
.hw .hw-geist--szene .hw-geist__film { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.hw .hw-warum__blatt, .hw .hw-pakete > .lx-container, .hw .hw-faq-sec > .lx-container, .hw .hw-schluss__inhalt { position: relative; z-index: 2; }
.hw .hw-pakete .hw-text::before { background: radial-gradient(closest-side, rgba(5, 4, 6, 0.92) 55%, rgba(5, 4, 6, 0) 100%); }
.hw .hw-faq-sec .hw-kopfzeile, .hw .hw-faq-sec .lx-faq, .hw .hw-faq-sec .hw-fein { position: relative; z-index: 2; }

/* Psycho-Ebene: liegt fix ueber der Seite, unter Navigation und Modal, ohne Klicks zu fangen */
.hw-psy { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.hw-psy__scan { position: absolute; inset-inline: -2%; inset-block-start: -6px; block-size: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, #ff1f3d 15%, #ffb3a7 50%, #ff1f3d 85%, transparent);
  box-shadow: 0 0 22px 5px rgba(255, 31, 61, 0.55), 0 0 60px 14px rgba(255, 31, 61, 0.22);
  animation: hw-scan 13s linear infinite; }
@keyframes hw-scan { 0%, 84% { inset-block-start: -6px; opacity: 0; } 84.5% { opacity: 1; } 99.5% { inset-block-start: 100%; opacity: 1; } 100% { opacity: 0; } }
.hw-psy__puls { position: absolute; inset: 0; background: radial-gradient(115% 85% at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(110, 0, 18, 0.5) 100%); animation: hw-herz 1.25s ease-in-out infinite; }
@keyframes hw-herz { 0%, 100% { opacity: 0.3; } 10% { opacity: 0.85; } 22% { opacity: 0.35; } 34% { opacity: 0.7; } 50% { opacity: 0.3; } }
.hw-psy__korn { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0.085; mix-blend-mode: screen; image-rendering: pixelated; }
.hw-psy__kratzer { position: absolute; inset: -8% 0; background: var(--k) center / cover no-repeat; opacity: 0.16; mix-blend-mode: screen; animation: hw-kratzer 6s steps(5, end) infinite; }
@keyframes hw-kratzer { 0% { transform: translateY(0); } 40% { transform: translateY(-5%) scaleX(-1); } 70% { transform: translateY(3%); } 100% { transform: translateY(-2%) scaleX(-1); } }
body.hw-seite main.hw { animation: hw-flackern2 21s steps(1, end) infinite; }
@keyframes hw-flackern2 { 0%, 100% { filter: none; } 37% { filter: brightness(0.45); } 37.4% { filter: none; } 37.9% { filter: brightness(0.6); } 38.3% { filter: none; } 71% { filter: brightness(0.5) contrast(1.2); } 71.2% { filter: none; } 71.5% { filter: brightness(0.7); } 71.8% { filter: none; } }
.hw .hw-h1__g1 { animation: hw-zucken 9s steps(1, end) infinite; }
@keyframes hw-zucken { 0%, 96%, 100% { transform: none; } 96.3% { transform: translate(-4px, 1px) skewX(-3deg); } 96.7% { transform: translate(3px, -1px); } 97.1% { transform: translate(-1px, 0); } }
.hw .hw-karte__bild::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(255, 31, 61, 0) 0%, rgba(255, 31, 61, 0.12) 50%, rgba(255, 31, 61, 0) 52%); background-size: 100% 300%; animation: hw-kartenscan 7s linear infinite; animation-delay: calc(var(--i, 0) * -1.3s); pointer-events: none; }
@keyframes hw-kartenscan { from { background-position: 0 -100%; } to { background-position: 0 200%; } }
@media (prefers-reduced-motion: reduce) {
  .hw-psy { display: none; }
  body.hw-seite main.hw, .hw .hw-h1__g1, .hw .hw-hero__wort, .hw .hw-karte__bild::before { animation: none; }
}
@media (max-width: 47.99rem) {
  .hw .hw-film--hero .hw-film__v { object-position: 78% 50%; --fo: 0.8; }
  .hw .hw-film--hero::before { background: linear-gradient(180deg, rgba(5, 4, 6, 0.55) 0%, rgba(5, 4, 6, 0.75) 60%, rgba(5, 4, 6, 0.9) 100%); }
  .hw .hw-hero__wort { inline-size: 220%; inset-block-start: 30%; }
  .hw-psy__puls { background: radial-gradient(120% 80% at 50% 50%, rgba(0, 0, 0, 0) 45%, rgba(110, 0, 18, 0.5) 100%); }
}

/* ================================================================== Spec 036, Runde 2: Buchungs-Modal im selben Stil
   (Jasper: "Funnel und Location-Karten auch neu gestalten"): tiefes Schwarz, duenne rote Linien, keine Papyrusstreifen,
   keine Blutkanten, Studio-Karten mit den neuen Psycho-Fotos, Laserlicht-Scan auf den Karten. */
.hw.hw-lb { background: radial-gradient(80% 70% at 50% 40%, rgba(30, 2, 8, 0.8), rgba(2, 1, 3, 0.96)); }
.hw .hw-lb__panel { background: #050406; border: 1px solid rgba(255, 31, 61, 0.55); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 80px rgba(255, 31, 61, 0.22), 0 40px 80px rgba(0, 0, 0, 0.8); animation: none; }
.hw .hw-lb__ecke { inline-size: 18px; block-size: 18px; border-width: 1px; filter: drop-shadow(0 0 4px rgba(255, 31, 61, 0.8)); }
.hw .hw-lb__kopf { border-block-end-color: rgba(255, 255, 255, 0.08); }
.hw .hw-lb__titel { font-family: var(--hw-sans); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: #ff5a4f; }
.hw .hw-lb__schritte li { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; border-block-start-width: 1px; }
.hw .hw-lb__schritte b { font-weight: 600; color: #ff5a4f; }
.hw .hw-lb__frage { font-family: var(--hw-sans); font-weight: 700; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); letter-spacing: -0.02em; color: #f4f0f2; }
.hw .hw-lb__hinweis { color: #a9a0a4; }
.hw .hw-lb__koerper { background: radial-gradient(70% 50% at 50% 0%, rgba(255, 31, 61, 0.06), transparent 70%); }

/* Fuer wen: die Laserlicht-Shots, duenne Linie, Scan */
.hw .hw-gender__box { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.hw .hw-gender__box img { filter: saturate(0.9) brightness(0.85); }
.hw .hw-gender__box b { font-family: var(--hw-sans); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; }
.hw .hw-gender__box::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(255, 31, 61, 0) 0%, rgba(255, 31, 61, 0.14) 50%, rgba(255, 31, 61, 0) 52%); background-size: 100% 300%; animation: hw-kartenscan 6s linear infinite; pointer-events: none; }
.hw .hw-gender__karte:nth-child(2) .hw-gender__box::before { animation-delay: -3s; }
.hw .hw-gender input:checked + .hw-gender__box { box-shadow: inset 0 0 0 1px var(--hw-glut), 0 0 30px rgba(255, 31, 61, 0.35); }
.hw .hw-gender input:checked + .hw-gender__box b { animation: none; }

/* Sitzungen: dunkle Platten statt Papyrus */
.hw .hw-stufe__box { border: 0; border-image: none; background: #0b0809; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 0.9rem 1.2rem 1.1rem 1rem; rotate: 0deg; filter: none; color: #f1ebe4; }
.hw .hw-stufe__box::before { content: none; }
.hw label:hover .hw-stufe__box { filter: none; rotate: 0deg; translate: 0; box-shadow: inset 0 0 0 1px rgba(255, 31, 61, 0.6), 0 0 24px rgba(255, 31, 61, 0.18); }
.hw input:checked + .hw-stufe__box { filter: none; box-shadow: inset 0 0 0 1px var(--hw-glut), 0 0 30px rgba(255, 31, 61, 0.3); background: #120709; }
.hw .hw-stufe__zahl b { font-family: var(--hw-zahl); font-weight: 800; font-size: 2.6rem; color: #f4f0f2; letter-spacing: -0.03em; }
.hw input:checked + .hw-stufe__box .hw-stufe__zahl b { color: #ff4a58; }
.hw .hw-stufe__zahl small { color: #a9a0a4; font-weight: 500; }
.hw .hw-stufe__tipp { color: #ff5a4f; border-color: rgba(255, 31, 61, 0.6); rotate: 0deg; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem; }
.hw .hw-stufe__tipp--best { color: #9fe8b8; border-color: rgba(120, 220, 160, 0.5); rotate: 0deg; }
.hw .hw-stufe__preis > span { color: #fff; }
.hw .hw-stufe__preis small, .hw .hw-stufe__info, .hw .hw-stufe__statt { color: #a9a0a4; font-weight: 500; }
.hw .hw-stufe__statt s, .hw .hw-stufe__statt s { color: #8f8387; }
.hw .hw-stufe__rabatt { background: rgba(255, 31, 61, 0.14); color: #ff6a74; box-shadow: inset 0 0 0 1px rgba(255, 31, 61, 0.5); }
.hw .hw-stufe__spar { color: #9fe8b8; }
.hw .hw-stufe__balken { background: rgba(255, 255, 255, 0.08); block-size: 2px; inset-block-end: 0.45rem; }
.hw .hw-stufe__balken > span::after { content: none; }
.hw .hw-stufe__balken > span { box-shadow: 0 0 12px rgba(255, 31, 61, 0.8); }

/* Studios: Psycho-Fotos, klare Kante, Scan */
.hw .hw-studio__box { background: #0b0809; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.hw .hw-studio__bild { clip-path: none; }
.hw .hw-studio__bild img { filter: saturate(0.9) brightness(0.9); }
.hw .hw-studio__bild::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(255, 31, 61, 0) 0%, rgba(255, 31, 61, 0.12) 50%, rgba(255, 31, 61, 0) 52%); background-size: 100% 300%; animation: hw-kartenscan 8s linear infinite; pointer-events: none; }
.hw .hw-studio:nth-child(2n) .hw-studio__bild::before { animation-delay: -2.7s; } .hw .hw-studio:nth-child(3n) .hw-studio__bild::before { animation-delay: -5.1s; }
.hw .hw-studio__stadt { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.66rem; }
.hw .hw-studio__name { font-family: var(--hw-sans); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.hw label:hover .hw-studio__name { animation: none; }
.hw input:checked + .hw-studio__box { box-shadow: inset 0 0 0 1px var(--hw-glut), 0 0 30px rgba(255, 31, 61, 0.35); }
.hw .hw-haken { border-color: rgba(255, 31, 61, 0.7); background: #050406; }
.hw .hw-lb__rahmen { border: 1px solid rgba(255, 31, 61, 0.4); border-radius: 6px; overflow: hidden; }
.hw .hw-lb__fuss { border-block-start: 1px solid rgba(255, 255, 255, 0.08); }
.hw .hw-lb__fein, .hw .hw-lb__kontext { color: #a9a0a4; }

/* Jasper 01.10.2026: Bildrauschen und Kratzer-Overlay entfernt */
.hw-psy__korn, .hw-psy__kratzer { display: none; }

/* ================================================================== Jasper 01.10.2026: "super smooth, null Ruckeln".
   Nur noch Compositor-Animationen (transform/opacity), kein Blend-Modus auf Videos, kein Filter auf <main>,
   kein backdrop-filter, Scanline und Kartenscan ueber transform. */
.hw .hw-geist { mix-blend-mode: normal; }
.hw .hw-geist__film { filter: none; will-change: transform; transform: translateZ(0); }
.hw .hw-film__v { will-change: transform; transform: translateZ(0); }
.hw .hw-sticky { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 4, 6, 0.97); }
body.hw-seite main.hw { animation: none; filter: none; }
.hw-psy__dunkel { position: absolute; inset: 0; background: #000; opacity: 0; animation: hw-flackern3 21s steps(1, end) infinite; }
@keyframes hw-flackern3 { 0%, 100% { opacity: 0; } 37% { opacity: 0.55; } 37.4% { opacity: 0; } 37.9% { opacity: 0.4; } 38.3% { opacity: 0; } 71% { opacity: 0.5; } 71.2% { opacity: 0; } 71.5% { opacity: 0.3; } 71.8% { opacity: 0; } }
.hw-psy__scan { inset-block-start: 0; animation: hw-scan2 13s linear infinite; will-change: transform; transform: translateY(-6px); }
@keyframes hw-scan2 { 0%, 84% { transform: translateY(-6px); opacity: 0; } 84.5% { opacity: 1; } 99.5% { transform: translateY(100vh); opacity: 1; } 100% { opacity: 0; } }
.hw-psy__puls { will-change: opacity; }
.hw .hw-karte__bild::before, .hw .hw-gender__box::before, .hw .hw-studio__bild::before {
  background: linear-gradient(180deg, rgba(255, 31, 61, 0) 0%, rgba(255, 31, 61, 0.14) 50%, rgba(255, 31, 61, 0) 100%);
  background-size: 100% 100%; inset: -100% 0 auto 0; block-size: 100%; animation-name: hw-kartenscan2; will-change: transform;
}
@keyframes hw-kartenscan2 { from { transform: translateY(0); } to { transform: translateY(300%); } }
.hw .hw-h1__g1, .hw .hw-h1__g2, .hw .hw-hero__wort, .hw .hw-btn__blut i { will-change: transform, opacity; }
.hw .hw-h1__g1 { filter: none; }
.hw .hw-h1__g2 { animation-name: hw-atmen2; filter: none; }
@keyframes hw-atmen2 { 0%, 100% { opacity: 0.86; } 50% { opacity: 1; } }
.hw .hw-kv::before { animation: none; opacity: 0.8; }
.hw .hw-btn--glut { animation: none; }
.hw .hw-btn--glut::after { content: ""; position: absolute; inset: 0; border-radius: 6px; box-shadow: 0 0 26px rgba(255, 31, 61, 0.38); opacity: 0.5; animation: hw-glimmen3 4.2s ease-in-out infinite; pointer-events: none; z-index: -1; }
@keyframes hw-glimmen3 { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.hw .hw-nebel::before { will-change: transform; }
.hw .hw-blutband { will-change: auto; }
@media (prefers-reduced-motion: reduce) { .hw-psy__dunkel, .hw .hw-btn--glut::after { animation: none; } }

/* ---- Fakten als Marquee mit Tusche-Icons (Jasper 01.10.2026) ---- */
.hw .hw-fakten-bahn { position: relative; z-index: 2; overflow: hidden; margin-block: clamp(1.4rem, 3vw, 2.4rem) 0; }
.hw .hw-fakten { margin-block: 0; flex-wrap: nowrap; gap: 2.4rem; inline-size: max-content; }
.hw .hw-fakten li::before { display: none; }
.hw .hw-fakten li { white-space: nowrap; gap: 0.7rem; }
.hw .hw-fakt-icon { inline-size: 2.3rem; block-size: 2.3rem; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 31, 61, 0.25)); animation: hwIconBob 3.4s ease-in-out infinite; }
.hw .hw-fakt-icon--monate { animation-delay: -0.9s; } .hw .hw-fakt-icon--studios { animation-delay: -1.7s; } .hw .hw-fakt-icon--laser { animation-delay: -2.5s; animation-name: hwIconPuls; }
@keyframes hwIconBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes hwIconPuls { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 31, 61, 0.2)); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(255, 31, 61, 0.6)); } }
@media (max-width: 52rem) {
  .hw .hw-fakten-bahn { margin-inline: calc(-1 * var(--lx-pad, 1.25rem)); padding-inline: 0; mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
  .hw .hw-fakten { animation: hwTick 26s linear infinite; padding-inline-start: 1.25rem; }
  @keyframes hwTick { to { transform: translateX(-50%); } }
  /* Film hinter den Paketen: feste Hoehe und weicher Auslauf, sonst steht eine Kante hinter der Headline */
  .hw .hw-film--pakete { inset: 0 0 auto; block-size: min(72vh, 560px); }
  .hw .hw-film--pakete::after { background: linear-gradient(180deg, #050406 0%, rgba(5, 4, 6, 0) 16%, rgba(5, 4, 6, 0.15) 40%, rgba(5, 4, 6, 0.85) 70%, #050406 100%); }
}
@media (min-width: 52.01rem) {
  .hw .hw-fakten { flex-wrap: wrap; inline-size: auto; }
  .hw .hw-fakten li.hw-dup { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hw .hw-fakten { animation: none; inline-size: auto; flex-wrap: wrap; }
  .hw .hw-fakten li.hw-dup { display: none; }
  .hw .hw-fakt-icon { animation: none; }
}

/* ---- Kanten weg (Jasper 01.10.2026 abends, iPhone): Poster als Hintergrund der Container, Masken auf den Containern ---- */
.hw .hw-film { background: var(--poster) var(--bgpos, 50% 50%) / cover no-repeat; }
.hw .hw-film--hero { --bgpos: 72% 50%; }
.hw .hw-film--warum { --bgpos: 50% 40%; }
.hw .hw-film--schluss { --bgpos: 50% 100%; }
.hw .hw-geist { background: var(--poster) 50% 50% / cover no-repeat; -webkit-mask-image: radial-gradient(closest-side, #000 48%, rgba(0, 0, 0, 0.5) 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 48%, rgba(0, 0, 0, 0.5) 72%, transparent 100%); }
.hw .hw-geist__film { -webkit-mask-image: none; mask-image: none; }
.hw .hw-geist--hero .hw-geist__film { -webkit-mask-image: none; mask-image: none; }
.hw .hw-warum__blatt > .hw-warum__blut { inset-inline: 3%; inline-size: 94%; }
.hw .hw-fakt-icon { filter: none; }
@media (max-width: 52rem) {
  .hw .hw-film--hero { --bgpos: 78% 50%; }
  .hw .hw-film:not(.hw-film--hero) { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 74%, transparent 100%); }
  .hw .hw-badge.hw-typo { margin-inline-start: 0.35rem; rotate: -2deg; max-inline-size: 12rem; }
  .hw .hw-warum__blatt > .hw-warum__blut { inset-inline: 2.5%; inline-size: 95%; inset-block-start: -34px; }
}

/* ---- Karten-CTA unter dem Papier, Modal Schritt 2 kompakt (Jasper 01.10.2026 21:20) ---- */
.hw .hw-karte__papier { padding-block-end: 0.9rem; }
.hw .hw-karte__fuss { position: relative; z-index: 5; margin-block-start: 0.6rem; padding-inline: 0.15rem; }
.hw .hw-karte__fuss .hw-karte__cta { inline-size: 100%; margin: 0; font-size: 0.95rem; }
.hw .hw-lb__kontext { font-size: 0.95rem; margin-block-end: 0.75rem; }
.hw .hw-lb__kontext b { font-weight: 700; color: #f4f0f2; }
.hw .hw-lb__aendern[hidden] { display: none; }
.hw .hw-lb__hinweis { margin-block-end: 0.7rem; }
.hw .hw-stufen { gap: 0.5rem; }
.hw .hw-stufe__box { grid-template-columns: 3.6rem 1fr auto; gap: 0.1rem 0.7rem; padding: 0.25rem 0.9rem 0.55rem 0.7rem; }
.hw .hw-stufe__zahl b { font-size: 2.5rem; }
.hw .hw-stufe__zahl small { font-size: 0.72rem; }
.hw .hw-stufe__preis > span { font-size: 1.5rem; }
.hw .hw-stufe__spar, .hw .hw-stufe__statt, .hw .hw-stufe__balken { display: none; }
.hw .hw-stufe__rechts { padding-inline-end: 1.9rem; }
.hw .hw-stufe__tipp { font-size: 0.68rem; }
@media (max-width: 52rem) {
  .hw .hw-lb__schritte li span { display: inline; font-size: 0.68rem; }
  .hw .hw-lb__schritte li b { font-size: 0.72rem; }
  .hw .hw-stufe__box { padding-inline: 0.6rem 0.7rem; }
  .hw .hw-stufe__rechts { padding-inline-end: 1.7rem; }
  .hw .hw-stufe__info { font-size: 0.76rem; }
}

/* ---- Hero-Schlagzeile als ein Block (Jasper 01.10.2026 21:28, Vorbild Plakat): Badge, Titel, Unterzeile dicht aufeinander ---- */
.hw .hw-badge.hw-typo { margin-block-end: 0; }
.hw .hw-h1.hw-typo { margin: 0.15rem 0 0.7rem; }
.hw .hw-h1__g1 { display: block; margin-inline-start: -0.4rem; }
.hw .hw-h1__g2 { display: block; inline-size: min(60%, 19rem); margin: -1.1rem 0 0 0.9rem; }
.hw .hw-hero__text .hw-lead { margin-block-start: 0.4rem; }
@media (max-width: 52rem) {
  .hw .hw-badge.hw-typo { margin-block-end: 0.1rem; }
  .hw .hw-h1.hw-typo { margin: 0 0 0.6rem; }
  .hw .hw-h1__g2 { inline-size: 58%; margin: -0.9rem 0 0 0.7rem; }
}

/* ---- Karten als Ganzes klickbar, Reihe senkrecht scrollbar (Jasper 01.10.2026 21:35) ---- */
.hw .hw-karte { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hw .hw-karte:focus-visible { outline: 2px solid var(--hw-glut2, #ff1f3d); outline-offset: 4px; border-radius: 6px; }
.hw .hw-karte__tipp { margin: 0.55rem 0 0; display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 700; color: #8a0a12; }
.hw .hw-karte__tipp svg { inline-size: 1em; block-size: 1em; }
.hw .hw-karte__papier { padding-block-end: 0.8rem; }
@media (max-width: 47.99rem) {
  .hw .hw-karten { overflow-y: hidden; touch-action: pan-x pan-y; }
  .hw .hw-karte:hover { translate: 0 0; }
}

/* ---- iOS-Kanten (Jasper 01.10.2026 21:36): WebKit hebt Video-Ebenen ueber Masken/Verlaeufe und zeigt object-fit:cover teils als contain.
   Deshalb: Videos per Mindestmassen auf "cover" gezogen, Ueberblendungen als eigene, mitkomponierte Ebenen ueber dem Video, keine Masken. ---- */
.hw .hw-film { overflow: hidden; }
.hw .hw-film__v, .hw .hw-geist__film {
  position: absolute; inset: 50% auto auto 50%; inline-size: auto; block-size: auto; min-inline-size: 100%; min-block-size: 100%; max-inline-size: none; max-block-size: none;
  object-fit: cover; transform: translate(-50%, -50%) translateZ(0); z-index: 1;
}
.hw .hw-film--hero .hw-film__v { inset: 50% auto auto 72%; transform: translate(-72%, -50%) translateZ(0); }
.hw .hw-film--schluss .hw-film__v { inset: 100% auto auto 50%; transform: translate(-50%, -100%) translateZ(0); }
.hw .hw-film::before, .hw .hw-film::after { z-index: 2; transform: translateZ(0); pointer-events: none; }
.hw .hw-film::after { content: ""; position: absolute; inset: -1px; }
.hw .hw-geist { overflow: hidden; -webkit-mask-image: none; mask-image: none; }
.hw .hw-geist::after { content: ""; position: absolute; inset: -1px; z-index: 2; transform: translateZ(0); pointer-events: none;
  background: radial-gradient(closest-side, rgba(5, 4, 6, 0) 38%, rgba(5, 4, 6, 0.55) 66%, rgba(5, 4, 6, 0.92) 88%, #050406 100%); }
.hw .hw-geist--szene::after, .hw .hw-geist--hero::after { background: linear-gradient(180deg, #050406 0%, rgba(5, 4, 6, 0) 18%, rgba(5, 4, 6, 0) 82%, #050406 100%),
  linear-gradient(90deg, #050406 0%, rgba(5, 4, 6, 0) 14%, rgba(5, 4, 6, 0) 86%, #050406 100%); }
@media (max-width: 52rem) {
  .hw .hw-film:not(.hw-film--hero) { -webkit-mask-image: none; mask-image: none; }
  .hw .hw-film--hero .hw-film__v { inset: 50% auto auto 78%; transform: translate(-78%, -50%) translateZ(0); }
}

/* ---- Geister: auf dem Telefon nur die grossen Szenen (kleine Clips wuerden ueber den Filmen als dunkle Kaesten stehen), auf dem Rechner wieder per Maske ---- */
@media (max-width: 52rem) {
  .hw .hw-geist--pakete, .hw .hw-geist--faq, .hw .hw-geist--warum-r, .hw .hw-geist--warum-l, .hw .hw-geist--schluss-r, .hw .hw-geist--schluss-l, .hw .hw-geist--hero { display: none; }
}
@media (min-width: 52.01rem) {
  .hw .hw-geist { overflow: visible; -webkit-mask-image: radial-gradient(closest-side, #000 48%, rgba(0, 0, 0, 0.5) 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 48%, rgba(0, 0, 0, 0.5) 72%, transparent 100%); }
  .hw .hw-geist--szene, .hw .hw-geist--hero { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
  .hw .hw-geist::after { display: none; }
}

/* ---- Hero-Lettering: leuchtende Pinselschrift, flackert wie eine leicht defekte Leuchtroehre (Jasper 01.10.2026 21:52) ---- */
.hw .hw-h1__g1 { inline-size: min(100%, 30rem); margin-inline-start: 0; filter: drop-shadow(0 0 18px rgba(255, 120, 60, 0.35)); animation: hw-neon 9s linear infinite; }
.hw .hw-h1__g2 { inline-size: min(66%, 20rem); margin: -0.2rem 0 0 0.6rem; filter: drop-shadow(0 0 10px rgba(255, 120, 60, 0.3)); animation: hw-neon2 13s linear infinite; }
@keyframes hw-neon {
  0%, 18% { opacity: 1; filter: drop-shadow(0 0 18px rgba(255, 120, 60, 0.35)) brightness(1); }
  18.6% { opacity: 0.55; filter: drop-shadow(0 0 6px rgba(255, 120, 60, 0.15)) brightness(0.75); }
  19% { opacity: 1; filter: drop-shadow(0 0 22px rgba(255, 120, 60, 0.45)) brightness(1.08); }
  19.5% { opacity: 0.7; filter: brightness(0.8); }
  20% , 54% { opacity: 1; filter: drop-shadow(0 0 18px rgba(255, 120, 60, 0.35)) brightness(1); }
  54.3% { opacity: 0.25; filter: brightness(0.5); }
  54.6% { opacity: 1; filter: drop-shadow(0 0 24px rgba(255, 120, 60, 0.5)) brightness(1.1); }
  55% { opacity: 0.8; }
  55.4%, 82% { opacity: 1; filter: drop-shadow(0 0 18px rgba(255, 120, 60, 0.35)) brightness(1); }
  82.2% { opacity: 0.6; filter: brightness(0.7); }
  82.5%, 100% { opacity: 1; filter: drop-shadow(0 0 18px rgba(255, 120, 60, 0.35)) brightness(1); }
}
@keyframes hw-neon2 {
  0%, 36% { opacity: 1; }
  36.4% { opacity: 0.35; }
  36.8% { opacity: 1; }
  37.2% { opacity: 0.6; }
  37.6%, 71% { opacity: 1; }
  71.2% { opacity: 0.2; }
  71.6%, 100% { opacity: 1; }
}
@media (max-width: 52rem) {
  .hw .hw-h1__g1 { inline-size: 100%; }
  .hw .hw-h1__g2 { inline-size: 64%; margin: -0.15rem 0 0 0.4rem; }
}
@media (prefers-reduced-motion: reduce) { .hw .hw-h1__g1, .hw .hw-h1__g2 { animation: none; } }

/* Unterzeile dicht unter den Titel (Leuchthof im Artwork ausgleichen) */
.hw .hw-h1__g2 { margin: -1.9rem 0 0 0.5rem; }
.hw .hw-hero__text .hw-lead { margin-block-start: 0; }
@media (max-width: 52rem) { .hw .hw-h1__g2 { margin: -1.5rem 0 0 0.3rem; } }

/* ---- Telefon: keine Nebel-Ebenen (ihre Kacheln standen auf iOS als heller Streifen mit Kanten und Naht), Filme als ruhige Posterbilder ---- */
@media (max-width: 52rem) {
  .hw .hw-nebel { display: none; }
  .hw .hw-film__v { display: none; }
}

/* Badge weg (Jasper 01.10.2026 21:58): Titel rueckt nach oben */
.hw .hw-h1.hw-typo { margin-block-start: 0.6rem; }
@media (max-width: 52rem) { .hw .hw-h1.hw-typo { margin-block-start: 0.4rem; } }

/* Telefon: Paket-Abschnitt oben komplett schwarz (kein Film hinter Band und Headline), Film erst hinter den Karten nicht noetig */
@media (max-width: 52rem) { .hw .hw-film--pakete { display: none; } }