/* Literata (TypeTogether) and Instrument Sans (Rodrigo Fuenzalida, Jordan Egstad), SIL Open Font License 1.1.
   Self-hosted variable subsets. Source: Google Fonts, fetched 2026-09-17. No third-party font requests at runtime. */
@font-face{font-family:'Literata';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/literata-latin.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:'Literata';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/literata-latin-ext.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:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/literata-italic-latin.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:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/literata-italic-latin-ext.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:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/instrument-sans-latin.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:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/instrument-sans-latin-ext.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:'Instrument Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/instrument-sans-italic-latin.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:'Instrument Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/instrument-sans-italic-latin-ext.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;}

/* Hahnenklee Ferienchalets · R05.1 · Premium Hospitality Design System: Typografie-Rollen, ruhiges Linksystem, Spacing-Tokens, Editorial-Flächen (R05-Medienbasis)
   Brand: Warm-Ivory #F3EFE7 / Nachtwald #0E1412 · Literata + Instrument Sans.
   Mobile zuerst; ab 64em eigenständige Desktop-Komposition. Fotografie ist Teil des Layouts. */

:root {
  --ivory: #F3EFE7; --ivory-2: #EBE5D9; --ivory-3: #DED7C7;
  --night: #0E1412; --night-2: #151C19; --night-3: #1C2522;
  --ink: #0E1412; --ink-2: #3B403D; --muted: #6B6F6C; --line: #CFC9BC; --line-dark: rgba(243,239,231,.16);
  --error: #B4271C; --ok: #2E6B3F;
  --font-serif: 'Literata', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --white: #FFFFFF;
  --wrap: 92rem; --narrow: 44rem; --gutter: clamp(1.25rem, 5vw, 4.5rem); /* gemeinsame Inhaltsachse: 20 px mobil, 72 px bei 1440 */
  --header-h: 4.25rem; --ease: cubic-bezier(.22, .61, .21, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* R05.1 Spacing-Tokens: S Text nach Text, M Standard, L Bild -> Story, XL Statement */
  --s-s: 2.5rem; --s-m: 4.5rem; --s-l: clamp(5rem, 8vw, 8rem); --s-xl: clamp(6rem, 10vw, 11rem);
  --pbar-h: 0px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
.main { flex: 1 0 auto; }
img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; margin: 0; line-height: 1.08; letter-spacing: -.01em; text-wrap: pretty; }
h1 { text-wrap: balance; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
strong { font-weight: 600; } address { font-style: normal; } dl, ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 64em) { body { font-size: 1.125rem; } }
.skip { position: absolute; left: 1rem; top: 0; transform: translateY(-110%); background: var(--night); color: var(--ivory); padding: .75rem 1rem; z-index: 300; text-decoration: none; } .skip:focus { top: 1rem; transform: none; }   /* G15-01 (28.09.): um die eigene Höhe versteckt – mit festem -4rem ragte der bei 200 % zweizeilige Link oben ins Bild */

/* ---------- Typografie (R05.1 Rollen: Hero, Statement, Stage, Editorial, Room, Utility, Body, Lead, Label, Eyebrow) ---------- */
.eyebrow { font-family: var(--font-sans); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 1rem; font-weight: 500; }
.sec--dark .eyebrow, .full .eyebrow, .fin .eyebrow, .place .eyebrow, .hero--immersive .eyebrow, .hero--tall .eyebrow, .footer .eyebrow, .menu .eyebrow, .loc .eyebrow, .cm .eyebrow, .nl .eyebrow { color: var(--ivory); }
.h-statement { font-size: clamp(2.6rem, 1.4rem + 4vw, 4.9rem); line-height: 1.04; margin-bottom: 1.5rem; max-width: 15em; }
.h-stage, .h-display--xl { font-size: clamp(2.4rem, 1.3rem + 3.4vw, 4.6rem); margin-bottom: 1.25rem; max-width: 12em; }
.h-editorial, .h-display { font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.7rem); margin-bottom: 1.25rem; max-width: 14em; }
.h-room { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); margin-bottom: 1rem; max-width: 16em; }
.h-utility { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); margin-bottom: 1rem; max-width: 16em; }
.h-editorial.h--long, .h-display.h--long { font-size: clamp(1.8rem, 1.15rem + 1.6vw, 2.8rem); max-width: 18em; }
.h-stage.h--long { font-size: clamp(1.9rem, 1.15rem + 2.4vw, 3.3rem); max-width: 15em; }
.hero__title--long { font-size: clamp(2.4rem, 1.4rem + 3.2vw, 5rem); max-width: 14em; }
.h3 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); margin-bottom: .75rem; }
.lead, .sec__intro { font-size: clamp(1.1rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 36rem; text-wrap: pretty; }
.sec--dark .lead, .sec--dark .sec__intro, .nl .lead { color: rgba(243,239,231,.85); }
/* Textaktion: eine ruhige Linksprache – normal gesetzt, Pfeil, Linie nur bei Hover/Focus */
.tlink { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; text-decoration: none; color: inherit; margin-right: 1.5rem; padding: .35rem 0; min-height: 2.5rem; }
.tlink::after { content: "→"; display: inline-block; transition: transform .35s var(--ease-out); }
.tlink:hover, .tlink:focus-visible { text-decoration: underline; text-underline-offset: .28em; }
.tlink:hover::after { transform: translateX(4px); }
.tlink--light { color: var(--ivory); }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-decoration: none; }
.linklike:hover { text-decoration: underline; text-underline-offset: .2em; }
.tag { display: inline-block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: .2em .55em; border: 1px solid currentColor; vertical-align: middle; font-weight: 600; font-family: var(--font-sans); }
.tag--internal { color: #7A4B00; border-color: #C58A2A; background: #FFF4DF; }
/* Interne Hinweise: geschlossen, klein, außerhalb der Erlebnisfläche */
.internal-note { font-size: .85rem; color: var(--ink-2); margin: 1.25rem 0 0; max-width: 40rem; }
.internal-note summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .5rem; padding: .25rem 0; color: var(--muted); }
.internal-note summary::-webkit-details-marker { display: none; }
.internal-note[open] summary { color: var(--ink-2); }
.internal-note p { margin: .5rem 0 0; padding: .75rem 1rem; background: #FBF3E4; border-left: 3px solid #C58A2A; }
.sec--dark .internal-note, .nl .internal-note { color: rgba(243,239,231,.7); } .sec--dark .internal-note summary, .nl .internal-note summary { color: rgba(243,239,231,.6); } .sec--dark .internal-note p, .nl .internal-note p { color: var(--ink-2); }
.internal-note--legal { margin: 0 0 2rem; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.sec { padding-block: var(--s-m); }
.sec--s { padding-block: var(--s-s); } .sec--l { padding-block: var(--s-l); } .sec--xl { padding-block: var(--s-xl); }
.sec--ivory { background: var(--ivory); } /* Warm-Ivory nur als dezenter Akzent */
.sec--white { background: var(--white); }
.sec--dark { background: var(--night); color: var(--ivory); }
.sec--dark a { color: inherit; }
.sec__more { margin-top: 2.5rem; }

/* ---------- Buttons: drei Typen ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3.25rem; padding: 1rem 1.75rem; font-family: var(--font-sans); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden; transition: color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); -webkit-tap-highlight-color: transparent; }
.btn::after { content: "→"; display: inline-block; transition: transform .45s var(--ease-out); }
.btn:hover::after { transform: translateX(4px); }
.btn--lg { min-height: 3.6rem; padding: 1.15rem 2.1rem; font-size: .86rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--night); color: var(--ivory); border-color: var(--night); }
.btn--primary:hover { background: var(--night-3); }
.btn--primary.btn--light, .sec--dark .btn--primary, .full .btn--primary, .hero--immersive .btn--primary, .hero--tall .btn--primary { background: var(--ivory); color: var(--night); border-color: var(--ivory); }
.btn--primary.btn--light:hover, .sec--dark .btn--primary:hover, .hero--immersive .btn--primary:hover, .hero--tall .btn--primary:hover { background: #fff; }
.btn--outline { background: transparent; color: var(--night); border-color: rgba(14,20,18,.45); }
.btn--outline:hover { border-color: var(--night); }
.btn--outline.btn--light, .sec--dark .btn--outline, .hero--immersive .btn--outline, .hero--tall .btn--outline, .full .btn--outline, .fin .btn--outline { color: var(--ivory); border-color: rgba(243,239,231,.5); }
.btn--outline.btn--light:hover, .sec--dark .btn--outline:hover, .hero--immersive .btn--outline:hover { border-color: var(--ivory); }
.chip { background: transparent; border: 1px solid var(--line); padding: .6rem 1.1rem; font-size: .9rem; font-weight: 500; min-height: 2.75rem; cursor: pointer; color: var(--ink-2); flex-shrink: 0; }
.chip.is-active, .chip[aria-selected="true"] { background: var(--night); color: var(--ivory); border-color: var(--night); }

/* ---------- Bilder: jedes Bild reserviert sein natives Verhältnis (--ar-m mobil, --ar-d ab 48em); kein Beschnitt, kein Hover-Zoom ---------- */
.pic { position: relative; background: var(--ph, var(--ivory-3)); overflow: hidden; aspect-ratio: var(--ar-m, 3/2); width: 100%; }
.pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx-m, 50% 50%); display: block; }
@media (min-width: 48em) { .pic { aspect-ratio: var(--ar-d, 3/2); } .pic img { object-position: var(--fx-d, 50% 50%); } }
.lb-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
figure { margin: 0; }

/* ---------- Reveal / Motion (kein Parallax, kein Hero-Zoom: Bilder bleiben unbeschnitten) ---------- */
html.js .reveal:not(.hero__text) { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
html.js .reveal.in-view { opacity: 1; transform: none; }
/* Bild-Reveal (R05.2): Bilder in Reveal-Blöcken laufen mit einer weichen Maske ein */
html.js .reveal .pic { clip-path: inset(0 0 6% 0); transition: clip-path 1.1s var(--ease-out); }
html.js .reveal.in-view .pic { clip-path: inset(0); }
/* Langsame Bildbewegung (R05.2): große Bühnen skalieren sichtbar von 1.0 auf 1.025 */
@media (prefers-reduced-motion: no-preference) { html.js .full__pic img, html.js .fin__pic img, html.js .hero__pic img { transition: transform 9s linear; } html.js .full.is-inview .full__pic img, html.js .fin.is-inview .fin__pic img, html.js .hero.is-inview .hero__pic img { transform: scale(1.025); } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html.js .reveal .pic { clip-path: none; transition: none; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ---------- Preview-Leiste ---------- */
.pbar { position: relative; z-index: 60; background: #221C1A; color: #F3EFE7; font-size: .85rem; padding: .4rem var(--gutter); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pbar__label { display: inline-flex; align-items: center; gap: .5rem; }
@media (max-width: 47.99em) { .pbar__text { display: none; } .pbar { justify-content: space-between; } }
.pbar__btn { background: transparent; border: 1px solid rgba(243,239,231,.5); color: inherit; padding: .25rem .7rem; font-size: .8rem; cursor: pointer; }
.pbar__status { flex-basis: 100%; } .pbar__status dl { display: grid; gap: .35rem 1rem; grid-template-columns: max-content 1fr; font-size: .78rem; padding: .5rem 0; } .pbar__status div { display: contents; } .pbar__status dt { font-weight: 600; } .pbar__status dd { margin: 0; }

/* ---------- Header ---------- */
.header { position: fixed; top: var(--pbar-h); left: 0; right: 0; z-index: 50; color: var(--ivory); transition: transform .5s var(--ease-out), background-color .4s var(--ease), color .4s var(--ease); }
.header.is-hidden { transform: translateY(-110%); }
.header.is-scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); color: var(--night); box-shadow: 0 1px 0 rgba(14,20,18,.06); }
.header--solid { color: var(--night); background: var(--ivory); }
.header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: var(--gutter); }
.header__brand { display: block; text-decoration: none; }
.logo { height: 1.85rem; width: auto; } .logo--primary { display: none; } .logo--compact { display: block; }
.logo-set--light { display: block; } .logo-set--dark { display: none; }
.header.is-scrolled .logo-set--light, .header--solid .logo-set--light { display: none; }
.header.is-scrolled .logo-set--dark, .header--solid .logo-set--dark { display: block; }
.header__actions { display: flex; align-items: center; gap: 1.75rem; }
.header__link, .header__cta { display: none; }
/* R05.2: kompakter Buchen-Zugang im Mobile-Header (Text, kein Button) */
.header__book { display: inline-block; font-size: .95rem; font-weight: 500; text-decoration: none; padding: .5rem 0; }
@media (min-width: 64em) { .header__book { display: none; } }
.burger { display: inline-flex; align-items: center; gap: .7rem; background: transparent; border: 0; padding: .6rem 0 .6rem .6rem; cursor: pointer; min-height: 2.75rem; color: inherit; }
.burger__label { font-size: .95rem; font-weight: 500; }
.burger__icon { display: inline-flex; flex-direction: column; gap: 5px; width: 1.5rem; } .burger__icon span { display: block; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.burger:hover .burger__icon span:first-child { transform: translateX(-3px); }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 55; pointer-events: none; }
.progress span { display: block; height: 100%; width: 0; background: var(--night); transition: width .12s linear; }
@media (min-width: 64em) {
  :root { --header-h: 5rem; }
  .logo { height: 2.25rem; } .logo--primary { display: block; } .logo--compact { display: none; }
  .header__link { display: inline-block; font-size: 1rem; text-decoration: none; font-weight: 500; padding: .5rem 0; position: relative; }
  .header__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
  .header__link:hover::after, .header__link[aria-current="page"]::after { transform: scaleX(1); }
  .header__cta { display: inline-flex; min-height: 2.9rem; padding: .8rem 1.4rem; font-size: .8rem; }
  .header:not(.is-scrolled):not(.header--solid) .header__cta { background: transparent; color: var(--ivory); border-color: rgba(243,239,231,.55); }
  .header:not(.is-scrolled):not(.header--solid) .header__cta:hover { background: var(--ivory); color: var(--night); }
  .header.is-scrolled .header__cta, .header--solid .header__cta { background: var(--night); color: var(--ivory); border-color: var(--night); }
}

/* ---------- Fullscreen-Menü (R05.2): sechs große Ziele, leise Nebenziele, Service, ein CTA ---------- */
.menu { position: fixed; inset: 0; z-index: 100; background: var(--night); color: var(--ivory); opacity: 0; transition: opacity .4s var(--ease); }
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__panel { height: 100%; display: flex; flex-direction: column; overflow-y: auto; }
.menu__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 var(--gutter); flex-shrink: 0; }
.menu__brand img { height: 1.85rem; width: auto; }
.menu__close { display: inline-flex; align-items: center; gap: .6rem; background: none; border: 0; cursor: pointer; font-size: .95rem; font-weight: 500; min-height: 2.75rem; padding: .5rem 0; }
.menu__body { flex: 1 0 auto; display: grid; gap: 2rem; padding: 1rem var(--gutter) 1.5rem; align-content: start; }
.menu__primary-list { list-style: none; display: grid; gap: .1rem; }
.menu__primary { display: block; font-family: var(--font-serif); font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.4rem); line-height: 1.12; text-decoration: none; color: var(--ivory); padding: .3rem 0; min-height: 3rem; }
html.js .menu.is-open .menu__primary-list li { animation: menuIn .7s var(--ease-out) both; } html.js .menu.is-open .menu__primary-list li:nth-child(2) { animation-delay: .05s; } html.js .menu.is-open .menu__primary-list li:nth-child(3) { animation-delay: .1s; } html.js .menu.is-open .menu__primary-list li:nth-child(4) { animation-delay: .15s; } html.js .menu.is-open .menu__primary-list li:nth-child(5) { animation-delay: .2s; } html.js .menu.is-open .menu__primary-list li:nth-child(6) { animation-delay: .25s; }
@keyframes menuIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.menu__primary.is-active::after { content: " ·"; }
.menu__groups { display: grid; gap: 1.25rem; border-top: 1px solid var(--line-dark); margin-top: 1rem; padding-top: 1.25rem; }
.menu__sub { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1.5rem; }
.menu__sub a { display: block; font-size: 1.05rem; text-decoration: none; color: rgba(243,239,231,.78); padding: .5rem 0; min-height: 2.75rem; }
.menu__sub a:hover, .menu__sub a.is-active { color: var(--ivory); }
.menu__sub a.is-active::before { content: "· "; }
.menu__sub--service a { color: rgba(243,239,231,.62); }
.menu__side { display: contents; }
.menu__fig { display: none; }
.menu__book { position: sticky; bottom: 0; z-index: 2; background: var(--night); margin: 0 calc(-1 * var(--gutter)); padding: .9rem var(--gutter) calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.menu__claim { font-family: var(--font-serif); font-size: 1.15rem; margin: 0; }
.menu__foot { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; padding: .75rem var(--gutter) 1.25rem; font-size: .9rem; }
.menu__foot a { text-decoration: none; color: rgba(243,239,231,.6); padding: .3rem 0; } .menu__foot a:hover { color: var(--ivory); }
.menu__legal { display: inline-flex; gap: 1.25rem; }
body.is-locked { overflow: hidden; }
@media (min-width: 64em) {
  .menu__body { grid-template-columns: 7fr 5fr; gap: 5rem; padding-block: 2.5rem 2.5rem; }
  .menu__nav { display: grid; align-content: start; gap: 2.5rem; }
  .menu__primary-list { grid-template-columns: max-content max-content; gap: 0 4rem; }
  .menu__primary { font-size: clamp(2.4rem, 1.6rem + 2.2vw, 3.6rem); }
  .menu__groups { grid-template-columns: 3fr 2fr; gap: 3rem; margin-top: 0; padding-top: 1.5rem; }
  .menu__sub a { font-size: 1.05rem; padding: .35rem 0; min-height: 2.5rem; }
  .menu__side { display: grid; align-content: start; gap: 0; }
  .menu__fig { display: block; max-height: 48vh; overflow: hidden; opacity: 0; transition: opacity .8s var(--ease-out) .1s; }
  .menu.is-open .menu__fig { opacity: 1; }
  .menu__fig .pic, .menu__fig img { height: 100%; aspect-ratio: auto; }
  .menu__book { position: static; margin: 0; padding: 1.5rem 0 0; border-top: 0; background: transparent; display: grid; gap: .75rem; justify-items: start; }
  .menu__claim { font-size: 1.5rem; margin-bottom: .25rem; }
  .menu__foot { justify-content: flex-end; }
}

/* ---------- Hero (R05, video-first): Poster sofort, H1 und Buchung sofort, Film blendet über dem Poster ein.
   Mobil/Tablet: Bild in voller Breite und nativer Höhe, Textblock legt sich mit lokalem Verlauf über den unteren Bildrand und läuft auf Nachtwald weiter.
   Desktop: eine Bühne (min(100svh, 66.67vw)) – die einzige bewusste Cover-Fläche der Website (Audit CE-01, Verlust 0–16 % Höhe je Viewport). ---------- */
.hero { position: relative; color: var(--ivory); }
.hero--immersive, .hero--tall { background: var(--night); }
.hero__stage { position: relative; }
.hero__media { position: relative; overflow: hidden; background: var(--night); }
.hero__scrim { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to bottom, rgba(8,12,10,.42) 0%, rgba(8,12,10,.12) 18%, rgba(8,12,10,0) 32%),
  linear-gradient(to top, var(--night) 0%, rgba(14,20,18,.94) 9%, rgba(14,20,18,.6) 30%, rgba(14,20,18,0) 58%); }
.hero__content { position: relative; z-index: 1; width: 100%; margin-top: clamp(-9rem, -32vw, -5rem); padding-bottom: 2.25rem; }
.hero__title { font-size: clamp(3rem, 1.6rem + 4.8vw, 6.6rem); line-height: 1.02; max-width: 11em; margin-bottom: 1.1rem; text-shadow: 0 2px 28px rgba(0,0,0,.28); }
.hero__title br { display: none; } @media (min-width: 48em) { .hero__title br { display: inline; } }
.hero__video, .full__video, .rs__video { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; }
.hero__video.is-playing, .full__video.is-playing, .rs__video.is-playing { opacity: 1; }
.hero__video[hidden], .full__video[hidden], .rs__video[hidden] { display: none; }
.hero__video video, .full__video video, .rs__video video { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx-d, 50% 50%); display: block; }
.hero__vbtn { position: absolute; right: var(--gutter); bottom: 1.25rem; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; background: rgba(14,20,18,.45); color: var(--ivory); border: 1px solid rgba(243,239,231,.5); padding: .55rem .9rem; font-size: .85rem; font-weight: 500; cursor: pointer; min-height: 2.75rem; backdrop-filter: blur(6px); } .hero__vbtn[hidden] { display: none; }
.hero__lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); max-width: 34rem; line-height: 1.5; margin-bottom: 1.75rem; color: var(--ivory); text-wrap: pretty; }
.hero__lead br { display: none; } @media (min-width: 48em) { .hero__lead br { display: inline; } }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hero__actions .btn { flex: 1 1 auto; } .hero__actions .tlink { margin: 0; }
.hero__scroll { position: absolute; left: 50%; bottom: 1.4rem; width: 2rem; height: 3.2rem; transform: translateX(-50%); z-index: 1; display: none; }
.hero__scroll span { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: rgba(243,239,231,.55); transform-origin: top; animation: scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero--center .hero__text { text-align: center; margin-inline: auto; } .hero--center .hero__title { margin-inline: auto; } .hero--center .hero__actions { justify-content: center; }
.hero--split { display: grid; color: var(--ink); }
.hero--split .hero__media { position: relative; }
.hero--split .hero__content { padding: 2.5rem var(--gutter) 1rem; margin: 0; }
.hero--split .hero__title, .hero--plain .hero__title { text-shadow: none; }
.hero--split .hero__lead, .hero--plain .hero__lead { color: var(--ink-2); }
.hero--plain { color: var(--ink); padding: calc(var(--header-h) + 3rem) 0 1.5rem; }
.hero--plain .hero__title { max-width: 12em; }
.hero--split .hero__actions .btn, .hero--plain .hero__actions .btn { flex: 0 1 auto; }
@media (min-width: 48em) { .hero__content { margin-top: clamp(-8rem, -22vw, -5rem); } }
@media (min-width: 64em) {
  .hero__stage { height: min(100svh, 66.67vw); min-height: 36rem; display: flex; align-items: flex-end; }
  .hero--tall .hero__stage { height: min(88svh, 66.67vw); }
  .hero__media { position: absolute; inset: 0; }
  .hero__media .pic { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
  .hero__scrim { background:
    linear-gradient(to bottom, rgba(8,12,10,.38) 0%, rgba(8,12,10,.08) 16%, rgba(8,12,10,0) 28%),
    linear-gradient(to top, rgba(8,12,10,.9) 0%, rgba(8,12,10,.7) 26%, rgba(8,12,10,.28) 48%, rgba(8,12,10,0) 64%),
    linear-gradient(to right, rgba(8,12,10,.5) 0%, rgba(8,12,10,.2) 40%, rgba(8,12,10,0) 62%); }
  .hero__content { margin-top: 0; padding-bottom: clamp(4rem, 10vh, 8rem); }
  .hero__title { margin-bottom: 1.5rem; }
  .hero__actions { gap: 1rem; } .hero__actions .btn { flex: 0 1 auto; }
  .hero__scroll { display: block; }
  .hero--split { grid-template-columns: 5fr 7fr; min-height: 100svh; }
  .hero--split .hero__media { order: 2; }
  .hero--split .hero__content { order: 1; display: flex; align-items: flex-end; padding: calc(var(--header-h) + 3rem) clamp(2rem, 5vw, 6rem) 5rem var(--gutter); }
  .hero--plain { padding: calc(var(--header-h) + 5rem) 0 2rem; }
}

/* Lokale Text-Sicherheitszone: weiche Abdunklung nur hinter dem Textblock, kein Kasten, kein flächiges Overlay */
.hero__text, .full__content, .fin__box { position: relative; }
.hero--immersive .hero__text::before, .hero--tall .hero__text::before, .full__content::before, .fin__box::before { content: ""; position: absolute; inset: -3.5rem -5rem -2.5rem -4rem; background: radial-gradient(ellipse at 40% 55%, rgba(8,12,10,.78) 0%, rgba(8,12,10,.55) 45%, rgba(8,12,10,0) 80%); z-index: 0; pointer-events: none; }
/* R05.2: Hero-Textzone frame-unabhängig (späteres Video): dichter lokaler Scrim vom Eyebrow bis zu den Aktionen, nach oben und rechts weich auslaufend */
.hero--immersive .hero__text::before, .hero--tall .hero__text::before { inset: -5rem -8rem -3rem -6rem; background: radial-gradient(ellipse 70% 62% at 38% 52%, rgba(8,12,10,.9) 0%, rgba(8,12,10,.78) 38%, rgba(8,12,10,.42) 66%, rgba(8,12,10,0) 100%); }
.full__content::before { inset: -3.5rem 28% -2.5rem -4rem; }
.full--strong .full__content::before { background: radial-gradient(ellipse at 40% 55%, rgba(8,12,10,.9) 0%, rgba(8,12,10,.7) 50%, rgba(8,12,10,0) 82%); }
.hero .eyebrow, .full .eyebrow, .fin .eyebrow { display: inline-block; text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.7); }
.hero__text .eyebrow + .hero__title, .full__content .eyebrow + h2, .fin__box .eyebrow + h2 { display: block; }
.hero__text > *, .full__content > *, .fin__box > * { position: relative; z-index: 1; }

/* ---------- Statement (Marke): großer ruhiger Editorial-Moment ---------- */
.stmt { padding-block: var(--s-xl); background: var(--white); }
.stmt__grid { display: grid; gap: 1.5rem; }
.stmt__text .h-statement { margin-bottom: 1.25rem; }
.stmt__text .lead { max-width: 34rem; }
.stmt__link { margin-top: 1.25rem; }
.stmt__media { display: none; }
.stmt--media .stmt__media { display: block; }
@media (min-width: 64em) { .stmt__grid { grid-template-columns: 8fr 4fr; } .stmt--media .stmt__grid { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: center; } }

/* ---------- Story (Sticky-Text + Bildfolge) ---------- */
.story { padding-block: clamp(2rem, 5vw, 5rem) clamp(4rem, 8vw, 9rem); }
.story__grid { display: grid; gap: 2.5rem; }
.story__sticky { padding-inline: var(--gutter); }
.story__sticky .h-display { max-width: none; }
.story__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; margin: 2rem 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.story__facts dt { font-family: var(--font-serif); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 3rem); line-height: 1; }
.story__facts dd { margin: .3rem 0 0; font-size: .95rem; color: var(--muted); }
.story__scenes { display: grid; gap: 2.5rem; }
.story__scene { position: relative; }

.story__link { display: block; text-decoration: none; }
.story__cap { display: flex; gap: 1rem; padding: 1rem var(--gutter) 0; font-size: 1rem; color: var(--ink-2); max-width: 34rem; }
.story__num { display: none; }
@media (min-width: 64em) {
  .story__grid { grid-template-columns: 5fr 7fr; gap: 0; }
  .story__text { position: relative; }
  .story__sticky { position: sticky; top: calc(var(--header-h) + 2rem); padding: 2rem var(--gutter) 2rem var(--gutter); }
  .story__scenes { gap: clamp(4rem, 8vw, 9rem); padding-right: var(--gutter); }
  .story__scene { width: 100%; }
  .story__cap { padding-inline: 0; }
}

/* ---------- MediaStage (R05, kein Beschnitt): Bild randlos in nativem Verhältnis; Text mobil unter dem Bild auf Nachtwald (mit Verlauf über den unteren Bildrand), Desktop als lokale Zone unten links ---------- */
.full { position: relative; color: var(--ivory); background: var(--night); }
.full__media { position: relative; overflow: hidden; }
.full__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--night) 0%, rgba(14,20,18,.92) 8%, rgba(14,20,18,.5) 30%, rgba(14,20,18,0) 55%); }
.full--warm { background: #140C06; } .full--warm .full__scrim { background: linear-gradient(to top, #140C06 0%, rgba(20,12,6,.92) 8%, rgba(20,12,6,.5) 30%, rgba(20,12,6,0) 55%); }
.full__content { position: relative; z-index: 1; margin-top: clamp(-7rem, -24vw, -4rem); padding-bottom: clamp(2.5rem, 7vh, 4rem); }
.full__content .h-stage, .full__content .h-display { max-width: 13em; margin-bottom: 1rem; }
.full__text { max-width: 34rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.5; color: var(--ivory); margin-bottom: 1.5rem; text-wrap: pretty; }
.full__links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: .25rem; }
.full__links a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; text-decoration: none; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 500; padding: .25rem 0; }
.full__links a:hover, .full__links a:focus-visible { text-decoration: underline; text-underline-offset: .28em; }
.full__links a span { transition: transform .35s var(--ease-out); } .full__links a:hover span { transform: translateX(4px); }
.full--center .full__content { text-align: center; } .full--center .h-stage, .full--center .full__text { margin-inline: auto; }
.full .hero__vbtn { bottom: 1.25rem; }
@media (min-width: 48em) { .full__content { margin-top: clamp(-7rem, -18vw, -4rem); } }
@media (min-width: 64em) {
  .full:not(.full--below) .full__content { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding-bottom: clamp(2.5rem, 6vh, 5rem); }
  .full:not(.full--below) .full__scrim { background: linear-gradient(to top, rgba(8,12,10,.9) 0%, rgba(8,12,10,.7) 24%, rgba(8,12,10,.28) 44%, rgba(8,12,10,0) 58%), linear-gradient(to right, rgba(8,12,10,.5) 0%, rgba(8,12,10,.2) 40%, rgba(8,12,10,0) 60%); }
  .full--strong:not(.full--below) .full__scrim { background: linear-gradient(to top, rgba(8,12,10,.94) 0%, rgba(8,12,10,.78) 26%, rgba(8,12,10,.32) 48%, rgba(8,12,10,0) 62%), linear-gradient(to right, rgba(8,12,10,.55) 0%, rgba(8,12,10,.25) 40%, rgba(8,12,10,0) 62%); }
  .full--warm:not(.full--below) .full__scrim { background: linear-gradient(to top, rgba(20,12,6,.9) 0%, rgba(20,12,6,.7) 24%, rgba(20,12,6,.28) 44%, rgba(20,12,6,0) 58%), linear-gradient(to right, rgba(20,12,6,.5) 0%, rgba(20,12,6,.2) 40%, rgba(20,12,6,0) 60%); }
  .full--below .full__scrim { display: none; } .full--below .full__content { margin-top: 0; padding-block: 2.5rem 3.5rem; } .full--below .full__content::before { display: none; }
  .full .hero__vbtn { bottom: 1.5rem; }
}
/* Kompakte Faktenzeile am Übergang */
/* Facts Moment (R05.2): vier gleichwertige Werte auf Ivory, mobil 2x2, keine Trennpunkte */
.factline { background: var(--ivory); color: var(--ink); padding-block: var(--s-m); }
.factline__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1.5rem; font-family: var(--font-serif); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.15; }
.factline__list li { padding-top: 1rem; border-top: 1px solid var(--line); }
@media (min-width: 64em) { .factline__list { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

/* ---------- Für wen (R05.1): große Editorial-Kacheln, Caption unter dem Bild, mobil ruhige Wischreihe ---------- */
.strm { overflow: hidden; background: var(--white); color: var(--ink); }
.strm__head { margin-bottom: 2.5rem; }
.strm__head .h-editorial { margin-bottom: .75rem; }
.strm__scroller { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; }
.strm__scroller::-webkit-scrollbar { display: none; }
.strm__track { list-style: none; display: flex; gap: 1rem; width: max-content; }
.strm__item { flex: 0 0 auto; width: min(84vw, 24rem); scroll-snap-align: start; }
html.js .strm__item.reveal { transition-delay: calc(var(--i, 0) * 90ms); }
.strm__card { display: block; text-decoration: none; color: inherit; }
.strm__pic { aspect-ratio: 2/3; }
.strm__cap { display: grid; gap: .3rem; padding: 1.1rem 0 0; position: relative; padding-right: 2rem; }
.strm__title { display: block; font-family: var(--font-serif); font-size: clamp(1.4rem, 1.2rem + .6vw, 1.7rem); line-height: 1.15; }
.strm__text { display: block; font-size: 1rem; color: var(--ink-2); }
.strm__more { position: absolute; right: 0; top: 1.25rem; font-size: 1.2rem; transition: transform .35s var(--ease-out); }
.strm__card:hover .strm__more { transform: translateX(4px); } .strm__card:hover .strm__title { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.strm__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; }
.strm__nav { display: flex; gap: .5rem; }
.strm__btn { width: 3rem; height: 3rem; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; font-size: 1.1rem; transition: border-color .3s var(--ease); }
.strm__btn:hover { border-color: var(--night); }
.strm__extra { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 0; }
.strm__extralabel { color: var(--muted); margin-right: 1.25rem; font-size: 1rem; }
@media (max-width: 63.99em) { .strm__extra .tlink { font-size: .95rem; margin-right: 1.1rem; min-height: 2.25rem; } .strm__extralabel { flex-basis: 100%; margin: 0 0 .1rem; font-size: .9rem; } }
@media (min-width: 64em) {
  .strm__scroller { overflow: visible; }
  .strm__track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; width: auto; max-width: var(--wrap); margin-inline: auto; padding-inline: 0; }
  .strm__title { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.3rem); }
  .strm__text { font-size: 1.1rem; }
  .strm__cap { padding-top: 1.4rem; }
  .strm__item { width: auto; }
  .strm__nav { display: none; }
  .strm__foot { margin-top: 2.5rem; }
}

/* ---------- Place (Harz) ---------- */
.place { position: relative; min-height: 92svh; display: flex; align-items: flex-end; color: var(--ivory); background: var(--night); overflow: hidden; }
.place__media { position: absolute; inset: 0; } .place__media .pic, .place__media img { width: 100%; height: 100%; aspect-ratio: auto; }
.place__scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(14,20,18,.72) 0%, rgba(14,20,18,.35) 55%, rgba(14,20,18,.15) 100%), linear-gradient(to top, rgba(14,20,18,.6), transparent 45%); }
.place__content { position: relative; z-index: 1; display: grid; gap: 2rem; padding-block: 3rem clamp(3rem, 8vh, 6rem); }
.place__text .h-stage, .place__text .h-display { max-width: 13em; } .place__text p { max-width: 30rem; color: rgba(243,239,231,.88); }
.place__list { list-style: none; display: grid; gap: 0; border-top: 1px solid rgba(243,239,231,.3); }
.place__list li { border-bottom: 1px solid rgba(243,239,231,.3); }
.place__list a { display: flex; justify-content: space-between; align-items: baseline; padding: .8rem 0; font-family: var(--font-serif); font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem); text-decoration: none; }
.place__list a:hover span { transform: translateX(6px); } .place__list a span { transition: transform .4s var(--ease-out); font-size: 1.1rem; }
.place__context { font-size: 1rem; color: var(--ivory); margin-bottom: 1rem; }
@media (min-width: 64em) { .place__content { grid-template-columns: 6fr 5fr; gap: 6rem; align-items: end; } }

/* ---------- Pause ---------- */
.pause { background: var(--white); padding-block: clamp(2rem, 5vw, 5rem) 0; }
 .pause__cap { padding: .75rem var(--gutter) 0; font-size: .8rem; color: var(--muted); letter-spacing: .06em; }

/* ---------- Gästestimmen: ruhiger Trust-Moment; mit Daten großes Zitat ---------- */
.rev { padding-block: var(--s-m); }
.rev__grid { display: grid; gap: 2rem; }
.rev__lead .h-editorial { margin-bottom: 1rem; }
.rev__text { max-width: 34rem; color: var(--ink-2); font-size: 1.1rem; margin-bottom: 1rem; }
.rev__list { list-style: none; display: grid; gap: 2rem; }
.rev__quote { margin: 0 0 .75rem; font-family: var(--font-serif); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); line-height: 1.35; }
.rev__meta { font-size: .95rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.rev__summary { font-size: 1rem; color: var(--ink-2); }
@media (min-width: 64em) { .rev--data .rev__grid { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; } .rev__list { grid-template-columns: 1fr; } }

/* ---------- Location ---------- */
.loc { color: var(--ivory); }
.loc__grid { display: grid; }
.loc__text { padding: clamp(3.5rem, 7vw, 7rem) var(--gutter); }
.loc__address { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.35; margin-bottom: 1.25rem; }
.loc__text p { max-width: 32rem; color: rgba(243,239,231,.85); font-size: 1.05rem; }
.loc__map { min-height: 22rem; position: relative; }
.loc__map .pic { height: 100%; aspect-ratio: auto; }
@media (min-width: 64em) { .loc__grid { grid-template-columns: 5fr 7fr; } .loc__map { min-height: 36rem; } }

/* ---------- Kontaktmoment ---------- */
.cm { color: var(--ivory); }
.cm__grid { display: grid; }
.cm__media { position: relative; min-height: 60svh; overflow: hidden; display: grid; }
.cm__media .pic, .cm__media img { width: 100%; height: 100%; position: absolute; inset: 0; aspect-ratio: auto; }
.cm__over { position: relative; z-index: 1; padding: clamp(3rem, 7vw, 6rem) var(--gutter); background: linear-gradient(to top, rgba(14,20,18,.85), rgba(14,20,18,.35) 60%, rgba(14,20,18,.2)); min-height: 60svh; display: flex; flex-direction: column; justify-content: flex-end; }
.cm__over p { max-width: 30rem; color: rgba(243,239,231,.88); }
.cm__direct { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: .95rem; } .cm__direct a { text-decoration: none; border-bottom: 1px solid rgba(243,239,231,.4); }
.cm__form { padding: clamp(3rem, 6vw, 5rem) var(--gutter); background: var(--night-2); }
@media (min-width: 64em) { .cm__grid { grid-template-columns: 5fr 7fr; } .cm__media { min-height: 100%; } .cm__over { min-height: 100%; } .cm__form { padding: clamp(4rem, 7vw, 7rem) clamp(3rem, 6vw, 7rem); } }

/* ---------- Schlussbild (R05, kein Beschnitt): wie MediaStage – mobil Bild + Nachtwald-Fläche, Desktop lokale Zone ---------- */
.fin { position: relative; color: var(--ivory); background: var(--night); }
.fin__media { position: relative; overflow: hidden; }
.fin__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--night) 0%, rgba(14,20,18,.92) 8%, rgba(14,20,18,.5) 30%, rgba(14,20,18,0) 55%); }
.fin__content { position: relative; z-index: 1; margin-top: clamp(-4rem, -14vw, -2rem); padding-bottom: clamp(2.5rem, 7vh, 4rem); }
.fin__box { max-width: 46rem; }
.fin__content .h-stage { margin-bottom: 1rem; }
.fin__text { max-width: 34rem; margin: 0 0 1.5rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--ivory); }
.fin__action { margin-bottom: 1rem; }
.fin__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
@media (min-width: 64em) {
  .fin__content { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding-bottom: clamp(2.5rem, 6vh, 5rem); }
  .fin__scrim { background: linear-gradient(to top, rgba(8,12,10,.9) 0%, rgba(8,12,10,.7) 26%, rgba(8,12,10,.28) 48%, rgba(8,12,10,0) 62%), linear-gradient(to right, rgba(8,12,10,.5) 0%, rgba(8,12,10,.2) 40%, rgba(8,12,10,0) 60%); }
}

/* ---------- Editorial Social Strip (R05.1): drei native Motive, mobil wischbar ---------- */
.band { background: var(--white); overflow: hidden; }
.band__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
.band__head .h-editorial { margin-bottom: 0; }
.band__head p { margin: 0; }
.band__scroller { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: var(--gutter); }
.band__scroller::-webkit-scrollbar { display: none; }
.band__grid { list-style: none; display: flex; gap: 1rem; width: max-content; }
.band__tile { flex: 0 0 auto; width: min(78vw, 26rem); scroll-snap-align: start; }
.band__tile .lb-open { height: auto; }
@media (min-width: 64em) { .band__scroller { overflow: visible; } .band__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; width: auto; max-width: var(--wrap); margin-inline: auto; align-items: start; } .band__tile { width: auto; } }

/* ---------- Raumfolge (R05, kein Beschnitt): 'full' randlos + Text auf der Achse; 'split' Bild neben Text ---------- */
.rs-group { padding-top: clamp(3rem, 6vw, 6rem); }
.rs__head { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.rs { position: relative; display: grid; gap: 1.5rem; padding-block: clamp(2rem, 5vw, 4rem); }
.rs__main { position: relative; }
.rs__main .hero__vbtn { bottom: 1rem; }
.rs__text { padding-inline: var(--gutter); max-width: 36rem; }
.rs__text .h-room { max-width: none; }
.rs__text p { font-size: 1.05rem; color: var(--ink-2); }
.rs.sec--dark .rs__text p { color: rgba(243,239,231,.85); }
@media (min-width: 64em) {
  .rs { grid-template-columns: repeat(12, 1fr); align-items: center; gap: 0 1.5rem; padding-inline: var(--gutter); }
  .rs--full { padding-inline: 0; } .rs--full .rs__main { grid-column: 1 / -1; } .rs--full .rs__text { grid-column: 1 / span 7; padding: 2.25rem var(--gutter) 0; max-width: calc(42rem + 2 * var(--gutter)); }
  .rs--split-left .rs__main { grid-column: 1 / span 7; } .rs--split-left .rs__text { grid-column: 8 / span 5; padding: 0 0 0 clamp(1rem, 3vw, 3rem); }
  .rs--split-right .rs__main { grid-column: 6 / span 7; grid-row: 1; } .rs--split-right .rs__text { grid-column: 1 / span 5; grid-row: 1; padding: 0 clamp(1rem, 3vw, 3rem) 0 0; }
}

/* ---------- Editorial (Text + Bild, natives Verhältnis) ---------- */
/* Calm Narrative (R05.2): Text in breiter Editorial-Achse, Lead-Größe */
.ed--text { padding-block: var(--s-m); }
.ed__narrative { max-width: 52rem; }
.ed--text .ed__text { max-width: none; }
.ed--text .ed__text p { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.6; max-width: 44rem; }
.ed--text .h-editorial { max-width: 16em; }
.ed--stage { display: grid; overflow: hidden; }
.ed__mediaset { position: relative; }
.ed__panel { padding: clamp(3.5rem, 7vw, 7rem) var(--gutter); display: flex; align-items: center; }
.ed__text { max-width: 34rem; } .ed__text p { text-wrap: pretty; font-size: 1.05rem; color: var(--ink-2); }
.ed__text .h-editorial { max-width: none; }
.ed--stage.sec--dark .ed__text p { color: rgba(243,239,231,.85); }
.ed--stage.sec--dark .ed__text p { color: rgba(243,239,231,.85); }
.ed--stage:not(.sec--dark):not(.sec--ivory) .ed__panel { background: var(--ivory); }
.ed__link { margin-top: 1.5rem; }
@media (min-width: 64em) {
  .ed--stage { grid-template-columns: 6fr 6fr; align-items: stretch; }
  .ed--media-text .ed__mediaset { order: 1; } .ed--media-text .ed__panel { order: 2; }
  .ed--text-media .ed__mediaset { order: 2; } .ed--text-media .ed__panel { order: 1; }
  .ed__mediaset { display: flex; align-items: center; } .ed__media { width: 100%; }
  .ed__panel { padding: 5rem clamp(3rem, 6vw, 7rem); }
}

/* ---------- Tips / Facts / FAQ / Steps (lesbar, wenige Linien) ---------- */
.tips__grid, .facts__grid, .faq__grid, .steps__grid, .cinfo__grid, .splan__grid { display: grid; gap: 2rem; }
.tips__head .h-editorial { max-width: 13em; }
.tips__list { list-style: none; border-top: 1px solid var(--line); }
.tips__row { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.tips__num { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tips__title { display: block; font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: .35rem; }
.tips__text { display: block; color: var(--ink-2); font-size: 1.02rem; max-width: 40rem; }
.tips__arrow { transition: transform .4s var(--ease-out); } .tips__row--link:hover .tips__arrow { transform: translateX(6px); }
.facts__list { border-top: 1px solid var(--line); }
.facts__row { display: grid; gap: .3rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.facts__row dt { font-size: .9rem; font-weight: 500; color: var(--muted); } .facts__row dd { margin: 0; font-size: 1.1rem; }
.facts__note { font-size: 1rem; color: var(--ink-2); max-width: 30rem; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.3rem 0; cursor: pointer; font-family: var(--font-serif); font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.3; list-style: none; min-height: 3rem; }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 1rem; height: 1rem; flex-shrink: 0; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: currentColor; left: 0; top: 50%; width: 100%; height: 1px; } .faq__icon::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.faq__item[open] .faq__icon::after { transform: rotate(0); }
.faq__a { padding: 0 0 1.5rem; color: var(--ink-2); max-width: 38rem; font-size: 1.05rem; line-height: 1.6; }
.steps__list { list-style: none; counter-reset: step; display: grid; gap: 1.5rem; }
.steps__item { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.steps__item::before { content: counter(step, decimal-leading-zero); font-size: .85rem; color: var(--muted); padding-top: .5rem; font-variant-numeric: tabular-nums; }
.steps__title { grid-column: 2; display: block; font-family: var(--font-serif); font-size: 1.45rem; margin-bottom: .35rem; } .steps__text { grid-column: 2; display: block; color: var(--ink-2); font-size: 1.02rem; }
@media (min-width: 64em) { .tips__grid, .facts__grid, .faq__grid, .steps__grid, .cinfo__grid, .splan__grid { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; } }
/* Lange Listen (R05.2): Kopf oben, zwei Editorial-Spalten, begrenzte Breite */
.tips--wide .tips__head { max-width: 40rem; }
@media (min-width: 64em) { .tips--wide .tips__grid { grid-template-columns: 1fr; gap: 2.5rem; } .tips--wide .tips__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; border-top: 0; max-width: 78rem; } .tips--wide .tips__list li { border-top: 1px solid var(--line); } .tips--wide .tips__row { border-bottom: 0; } }

/* ---------- Galerie (R05): Spaltensatz mit nativen Verhältnissen, keine Kachelbeschnitte ---------- */
.gal__head { max-width: 40rem; margin-bottom: 2rem; } .gal__head .lead { margin-top: 0; }
.gal__filters { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.5rem; scrollbar-width: none; }
.gal__filters::-webkit-scrollbar { display: none; }
.gal__grid { list-style: none; columns: 2; column-gap: .5rem; }
.gal__item { break-inside: avoid; margin-bottom: .5rem; }
.gal__item[hidden] { display: none; }
html.js .gal:not(.is-expanded) .gal__item--more { display: none; }
html.js .gal.is-expanded [data-gal-more] { display: none; }
@media (min-width: 64em) { .gal__grid { columns: 3; column-gap: 1rem; } .gal__item { margin-bottom: 1rem; } .gal__filters { flex-wrap: wrap; } }

/* ---------- Grundrisse ---------- */
.fp__grid { display: grid; gap: 2rem; }
.fp__text .h-display { max-width: none; }
.fp__tabs { display: flex; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.fp__zoom { position: relative; cursor: zoom-in; background: #fff; }
.fp__pic { background: #fff; } .fp__pic img { object-fit: contain; }
.fp__zoomhint { position: absolute; right: .75rem; bottom: .75rem; background: var(--night); color: var(--ivory); font-size: .8rem; font-weight: 500; padding: .45rem .75rem; }
.fp__desc { margin-top: .85rem; font-size: 1rem; color: var(--ink-2); }
@media (min-width: 64em) { .fp__grid { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }

/* ---------- Location Moment (Home) und Servicebereich (Kontakt) ---------- */
.svc { background: var(--white); }
.svc__grid { display: grid; gap: 2.5rem; }
.svc__info .h-editorial { margin-bottom: 1rem; }
.svc__address { font-family: var(--font-serif); font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); line-height: 1.4; margin: 1.75rem 0 1.5rem; }
.svc__address a { text-decoration: none; } .svc__address a:hover { text-decoration: underline; text-underline-offset: .25em; }
.svc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.svc__direct { display: flex; flex-wrap: wrap; gap: .35rem 1.75rem; font-size: 1rem; color: var(--ink-2); }
.svc__direct a { text-decoration: none; } .svc__direct a:hover { text-decoration: underline; text-underline-offset: .25em; }
.svc__map { min-height: 20rem; }
.svc__media .svc__map { min-height: 22rem; height: 100%; }
.svc__note { font-size: 1rem; color: var(--ink-2); margin-top: 1.25rem; }
.svc__form { padding-top: .5rem; }
.iform__more { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.iform__more summary { cursor: pointer; padding: 1rem 0; font-size: 1rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 3rem; }
.iform__more summary::-webkit-details-marker { display: none; }
.iform__more[open] summary .faq__icon::after { transform: rotate(0); }
.iform__more .iform__moregrid { display: grid; gap: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 64em) {
  .svc__grid { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
  .svc--moment .svc__grid { align-items: stretch; } .svc--moment .svc__media .svc__map { min-height: 30rem; }
  .svc:not(.svc--moment) .svc__map { min-height: 22rem; }
}

/* ---------- Formulare (R05.1): ruhige weiße Felder, lesbare Labels, klare Gruppen ---------- */
.form__stage { max-width: 44rem; }
.iform, .bform { display: grid; gap: 1.5rem; }
.iform__title { margin-bottom: .75rem; }
.field { display: grid; gap: .45rem; min-width: 0; }
.field label { font-size: .95rem; font-weight: 500; color: var(--ink); }
.field__opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; font: inherit; font-size: 1.05rem; min-height: 3.6rem; padding: .8rem 1rem; border: 1px solid var(--ivory-3); background: var(--white); color: inherit; border-radius: 0; transition: border-color .2s var(--ease); }
/* Datumsfelder (R05.2): Browser-Maske im Leerzustand verborgen, „Datum wählen" + Kalenderzeichen */
.field--date { position: relative; }
.field--date input[type=date] { padding-right: 3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%230E1412' stroke-width='1.3'%3E%3Crect x='2.5' y='4' width='15' height='13' rx='1'/%3E%3Cpath d='M2.5 8h15M6.5 2.5v3M13.5 2.5v3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.15rem; }
.field--date input[type=date]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.field--date.is-empty input[type=date]::-webkit-datetime-edit { color: transparent; }
.field--date.is-empty::after { content: "Datum wählen"; position: absolute; left: 1rem; bottom: 1.1rem; font-size: 1.05rem; color: var(--muted); pointer-events: none; }
.field--date.is-empty input:focus::-webkit-datetime-edit { color: inherit; } .field--date.is-empty:has(input:focus)::after { display: none; }
.cm .field--date input[type=date] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23F3EFE7' stroke-width='1.3'%3E%3Crect x='2.5' y='4' width='15' height='13' rx='1'/%3E%3Cpath d='M2.5 8h15M6.5 2.5v3M13.5 2.5v3'/%3E%3C/svg%3E"); }
.sec--white .field input, .sec--white .field select, .sec--white .field textarea, .cinfo .field input { background: var(--ivory); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.25rem; }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--night); outline-offset: 1px; border-color: var(--night); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--error); }
.field__error { color: var(--error); font-size: .92rem; margin: 0; }
.sec--dark .field__error, .cm .field__error { color: #F0A59B; }
.cm .field label { color: rgba(243,239,231,.7); } .cm .field input, .cm .field select, .cm .field textarea { border-color: rgba(243,239,231,.3); background: transparent; color: var(--ivory); color-scheme: dark; }
.field__row { display: grid; gap: 1.5rem; } @media (min-width: 40em) { .field__row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.iform__privacy, .iform__note, .bform__legal, .bform__note { font-size: .95rem; color: var(--ink-2); } .cm .iform__privacy, .cm .iform__note { color: rgba(243,239,231,.6); }
.iform__privacy a { text-decoration: underline; text-underline-offset: .2em; }
.iform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.iform__status { font-size: 1rem; }
.iform__success { border: 1px solid var(--ok); padding: 1.5rem; color: var(--ok); font-size: 1.05rem; } .cm .iform__success { color: #BFE3C7; border-color: #BFE3C7; }
.form__fallback-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Buchungsseite: Modul als ruhiges Panel */
.bpage { padding-block: var(--s-m) var(--s-l); }
.bpage__wrap { display: grid; justify-items: center; }
.bpage__panel { width: 100%; max-width: 58rem; background: var(--white); padding: clamp(1.5rem, 4vw, 3rem); }
.bform__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; }
.bform__actions { display: grid; gap: .75rem; }
.bform__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: 1rem; }
.bform__after { font-size: 1rem; margin-top: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--line); }
.bform__fallback { margin-top: 1.5rem; display: grid; gap: .75rem; }
@media (min-width: 48em) { .bform--page .bform__grid { grid-template-columns: repeat(4, 1fr); } .bform--page .bform__actions { display: flex; } }

/* ---------- Kontaktinfo / Downloads / Extras / Offers / Legal ---------- */
.cinfo__list { display: grid; gap: 1.75rem; } .cinfo__row dt { font-size: .95rem; font-weight: 500; color: var(--muted); margin-bottom: .3rem; } .cinfo__row dd { margin: 0; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); line-height: 1.35; overflow-wrap: anywhere; font-family: var(--font-serif); }
.cinfo__row a { text-decoration: none; } .cinfo__row a:hover, .cinfo__row a:focus-visible { text-decoration: underline; text-underline-offset: .25em; }
.cinfo__social { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
@media (min-width: 64em) { .cinfo__list { grid-template-columns: 1fr 1fr; gap: 2.25rem 3rem; } }
.dl__list { list-style: none; border-top: 1px solid var(--line); margin-top: 1rem; }
.dl__item { display: grid; gap: .85rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.dl__label { display: block; font-family: var(--font-serif); font-size: 1.4rem; } .dl__text { display: block; color: var(--ink-2); font-size: 1rem; } .dl__meta { display: block; font-size: .9rem; color: var(--muted); margin-top: .35rem; }
@media (min-width: 48em) { .dl__item { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; } }
.extras__list { list-style: none; display: grid; gap: 1.5rem; margin-top: 2rem; }
.extras__card { display: grid; grid-template-columns: 34% 1fr; gap: 1.25rem; text-decoration: none; align-items: center; }
.extras__title { display: block; font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: .3rem; } .extras__text { display: block; color: var(--ink-2); font-size: 1rem; margin-bottom: .6rem; }
@media (min-width: 48em) { .extras__list { grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: end; } .extras__card { grid-template-columns: 1fr; align-items: start; } .extras__body { display: block; padding-top: 1rem; } }
.offers__empty { max-width: 40rem; }
.offers__list { list-style: none; display: grid; gap: 1.5rem; } .offer { border: 1px solid var(--line); padding: 1.5rem; } .offer__meta { display: grid; gap: .5rem; margin-bottom: 1rem; } .offer__label { font-weight: 600; margin: 1rem 0 .25rem; }
.prose { max-width: var(--narrow); overflow-wrap: anywhere; min-width: 0; overflow-x: hidden; }
.legal .wrap { min-width: 0; overflow-x: hidden; }
.main { overflow-x: clip; }
.prose h2 { font-size: 1.7rem; margin: 2.25rem 0 .75rem; } .prose h3 { font-size: 1.3rem; margin: 1.75rem 0 .5rem; } .prose h4 { font-family: var(--font-sans); font-weight: 600; font-size: 1rem; margin: 1.25rem 0 .4rem; }
.prose p, .prose li { color: var(--ink-2); } .prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1em; }
.prose table { border-collapse: collapse; width: 100%; max-width: 100%; font-size: .9rem; display: block; overflow-x: auto; } .prose td, .prose th { border: 1px solid var(--line); padding: .5rem; text-align: left; vertical-align: top; } .prose a { word-break: break-word; }
.splan__pending { font-size: .9rem; color: var(--muted); margin-top: 1rem; } 

/* ---------- Embeds ---------- */
.embed { position: relative; background: var(--night); color: var(--ivory); overflow: hidden; min-height: 18rem; }
.embed__poster { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; opacity: .7; filter: saturate(.75); }
.embed__gate { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem clamp(1.25rem, 3vw, 2rem); gap: 1rem; background: linear-gradient(to top, rgba(14,20,18,.88), rgba(14,20,18,.2) 60%, transparent); }
.embed__gate--center { justify-content: center; align-items: flex-start; max-width: none; }
.embed__gate p { max-width: 30rem; font-size: 1rem; color: rgba(243,239,231,.85); }
.embed__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed__error { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem var(--gutter); } .embed__error[hidden] { display: none; }
.embed.is-loaded .embed__gate, .embed.is-loaded .embed__poster { display: none; }
.embed--wide { min-height: 60svh; }
.webcam { padding-bottom: 2rem; }

/* ---------- Footer (R05.1): ruhiger Abschluss, Wortmarke als Brand-Detail, keine permanenten Linien ---------- */
.footer { background: var(--night); color: var(--ivory); margin-top: auto; }
.footer a { text-decoration: none; } .footer a:hover, .footer a:focus-visible { text-decoration: underline; text-underline-offset: .28em; }
.footer__main { display: grid; gap: 2.5rem; padding-block: var(--s-l) 2.5rem; }
.footer__brand { display: grid; gap: 1rem; align-content: start; }
.footer__mark { display: block; width: min(14rem, 60vw); line-height: 0; }
.footer__mark .wm { width: 100%; height: auto; display: block; } .footer__mark .wm path, .footer__mark .wm polygon, .footer__mark .wm rect { fill: #FFFFFF; }
.footer__address { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.45; color: var(--ivory); margin-top: .5rem; }
.footer__lines { display: grid; gap: .35rem; font-size: 1rem; color: rgba(243,239,231,.85); } .footer__lines a { width: max-content; max-width: 100%; }
.footer__nav { display: grid; gap: 0; }
.footer__group { border-top: 1px solid var(--line-dark); }
.footer__label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0; padding: 1rem 0; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; color: var(--ivory); cursor: pointer; list-style: none; min-height: 3rem; }
.footer__label::-webkit-details-marker { display: none; }
.footer__group[open] .footer__label .faq__icon::after { transform: rotate(0); }
.footer__nav ul { list-style: none; padding-bottom: .75rem; }
.footer__nav a { display: block; padding: .4rem 0; font-size: 1rem; color: rgba(243,239,231,.85); }
.footer__nav a[aria-current="page"] { color: var(--ivory); }
.footer__aside { display: grid; gap: .75rem; align-content: start; border-top: 1px solid var(--line-dark); padding-top: 1rem; }
.footer__label--static { pointer-events: none; padding: 0; min-height: 0; color: rgba(243,239,231,.6); font-size: .95rem; }
.footer__social { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: 1rem; color: rgba(243,239,231,.85); }
.footer__book { margin-top: .5rem; }
.footer__bottom { border-top: 1px solid var(--line-dark); padding: 1.1rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; font-size: .9rem; }
.footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; } .footer__legal a, .footer__legal button { padding: .3rem 0; display: inline-block; font-size: .9rem; color: rgba(243,239,231,.75); }
.footer__credit { margin: 0; color: rgba(243,239,231,.5); font-size: .85rem; }
@media (min-width: 48em) {
  .footer__main { grid-template-columns: 5fr 4fr 3fr; gap: 3rem; }
  .footer__nav { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer__group { border-top: 0; }
  .footer__label { pointer-events: none; padding: 0 0 .5rem; min-height: 0; font-size: .95rem; color: rgba(243,239,231,.6); }
  .footer__label .faq__icon { display: none; }
  .footer__nav a { padding: .3rem 0; }
  .footer__aside { border-top: 0; padding-top: 0; }
}
@media (min-width: 64em) { .footer__main { grid-template-columns: 5fr 4fr 3fr; gap: 4rem; padding-block: var(--s-l) 3rem; } .footer__nav { grid-template-columns: 1fr 1fr; gap: 2rem; } .footer__main { grid-template-columns: 4fr 5fr 3fr; } }

/* ---------- Newsletter (Markenmoment, Nachtwald) ---------- */
.nl { padding-block: var(--s-l); }
.nl__grid { display: grid; gap: 2.5rem; }
.nl__text .h-statement { max-width: 12em; }
.nl__row { display: grid; gap: .75rem; }
.nl__row input { width: 100%; min-width: 0; font: inherit; font-size: 1.05rem; min-height: 3.6rem; padding: .75rem 1rem; border: 1px solid rgba(243,239,231,.4); background: transparent; color: var(--ivory); border-radius: 0; }
.nl__row input::placeholder { color: rgba(243,239,231,.6); }
.nl__row input:focus { outline: 2px solid var(--ivory); outline-offset: 1px; }
.nl__row input:disabled, .nl__row button:disabled { opacity: .55; cursor: not-allowed; }
.nl__pending, .nl__note { font-size: .95rem; color: rgba(243,239,231,.7); margin-top: 1rem; max-width: 36rem; }
.nl__note a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 48em) { .nl__row { grid-template-columns: 1fr auto; align-items: stretch; } }
@media (min-width: 64em) { .nl__grid { grid-template-columns: 7fr 5fr; gap: 5rem; align-items: center; } }

/* ---------- Legal-Seiten: ruhig, lesbar, Inhaltsverzeichnis ---------- */
.page--imprint .hero--plain, .page--privacy .hero--plain, .page--terms .hero--plain, .page--participation .hero--plain { padding-bottom: 2rem; }
.legal { background: var(--white); padding-block: 1rem clamp(4rem, 7vw, 7rem); }
.legal__grid { display: grid; gap: 2rem; }
.legal__tocbox { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.legal__tocbox summary { cursor: pointer; padding: .9rem 0; font-size: .95rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 3rem; }
.legal__tocbox summary::-webkit-details-marker { display: none; }
.legal__tocbox[open] summary .faq__icon::after { transform: rotate(0); }
.legal__toc ol { list-style: none; padding: 0 0 .75rem; display: grid; gap: .1rem; }
.legal__toc a { display: block; padding: .35rem 0; font-size: 1rem; text-decoration: none; color: var(--ink-2); }
.legal__toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.legal__stand { font-size: .9rem; color: var(--muted); margin-bottom: 1.5rem; }
.legal__note { border-left: 3px solid #C58A2A; padding: .5rem 1rem; background: #FBF3E4; font-size: .95rem; }
.legal__pending { background: #FBF3E4; color: var(--ink-2); padding: .1em .35em; }
.prose--legal { max-width: 44rem; font-size: 1.05rem; line-height: 1.65; }
.prose--legal h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 2.75rem 0 .9rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose--legal h2:first-child { margin-top: 0; }
.prose--legal h3 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; }
.prose--legal p, .prose--legal li { color: var(--ink); }
.prose--legal a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; word-break: break-word; }
@media (min-width: 64em) {
  .legal__grid { grid-template-columns: 4fr 8fr; gap: 5rem; align-items: start; }
  .legal__toc { position: sticky; top: calc(var(--header-h) + 2rem); }
  .legal__tocbox { border: 0; } .legal__tocbox summary { pointer-events: none; padding: 0 0 .75rem; font-size: .95rem; color: var(--muted); min-height: 0; } .legal__tocbox summary .faq__icon { display: none; }
}

/* ---------- Dialoge / Lightbox ---------- */
.dialog { border: 0; padding: 0; background: var(--ivory); color: var(--ink); width: min(100% - 2rem, 34rem); max-height: min(92dvh, 60rem); box-shadow: 0 30px 80px rgba(14,20,18,.35); margin: auto; overflow: hidden; }
.dialog::backdrop { background: rgba(14,20,18,.6); }
.dialog__body { padding: 1.75rem; overflow-y: auto; max-height: inherit; }
.dialog__close-form { position: absolute; top: .5rem; right: .5rem; margin: 0; } .dialog__close { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.dialog__title { font-size: 1.9rem; margin-bottom: .5rem; padding-right: 2.5rem; } .dialog__intro { color: var(--ink-2); margin-bottom: 1.5rem; } .dialog__status { margin-top: 1rem; font-size: .85rem; color: var(--ink-2); }
@media (min-width: 48em) { .dialog__body { padding: 2.25rem; } }
.cform__cats { display: grid; gap: .75rem; margin-bottom: 1.25rem; } .cform__cats[hidden] { display: none; }
.cform__cat { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; padding: .75rem; border: 1px solid var(--line); } .cform__cat input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; } .cform__cat small { display: block; color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.cform__actions { display: grid; gap: .6rem; } .cform__actions [hidden] { display: none; } @media (min-width: 48em) { .cform__actions { grid-template-columns: 1fr 1fr; } }
.lightbox { border: 0; padding: 0; background: var(--night); color: var(--ivory); width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; }
.lightbox::backdrop { background: var(--night); }
.lightbox form { position: absolute; top: .5rem; right: .5rem; z-index: 2; margin: 0; }
.lightbox__close, .lightbox__nav { width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(14,20,18,.5); color: var(--ivory); border: 1px solid rgba(243,239,231,.3); cursor: pointer; font-size: 1rem; }
.lightbox__figure { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.5rem 1rem; }
.lightbox__figure img { max-width: 100%; max-height: calc(100dvh - 8rem); object-fit: contain; width: auto; height: auto; }
.lightbox__figure figcaption { margin-top: .75rem; font-size: .85rem; color: rgba(243,239,231,.7); text-align: center; max-width: 40rem; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .lightbox__nav--prev { left: .5rem; } .lightbox__nav--next { right: .5rem; } .lightbox__nav[hidden] { display: none; }
.lightbox__count { position: absolute; left: 0; right: 0; bottom: .75rem; text-align: center; font-size: .9rem; margin: 0; color: rgba(243,239,231,.7); }
@media (min-width: 48em) { .lightbox__nav--prev { left: 1.5rem; } .lightbox__nav--next { right: 1.5rem; } }

@media (min-width: 120em) { body { font-size: 1.1875rem; } }

/* ---------- Closing-CTA (R05.2): helles Editorial-CTA 7/5, klar vom dunklen Footer getrennt ---------- */
.cta { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.cta__grid { display: grid; gap: 1.75rem; }
.cta__title { margin-bottom: .75rem; max-width: 14em; }
.cta__text { font-size: 1.1rem; max-width: 36rem; color: var(--ink-2); margin: 0; }
.cta__actions { display: grid; gap: .75rem; align-content: center; justify-items: start; }
.cta__action { margin: 0; }
.cta__links { display: flex; flex-wrap: wrap; gap: .25rem 0; margin: 0; }
@media (min-width: 64em) { .cta__grid { grid-template-columns: 7fr 5fr; gap: 5rem; align-items: center; } .cta__actions { justify-items: end; text-align: right; } .cta__links { justify-content: flex-end; } .cta__links .tlink { margin: 0 0 0 1.5rem; } }
/* Fließtext-Links behalten die Linie */
.prose a, .faq__a a, .lead a, .ed__text p a { text-decoration: underline; }

/* ---------- R05.1 Runde 2 ---------- */
.form__stage { max-width: 44rem; margin-inline: auto; }
.rev__grid .internal-note { grid-column: 1 / -1; }


.bform__actions .btn { text-align: center; line-height: 1.3; }
@media (max-width: 47.99em) {
  .footer__main { gap: 1.75rem; padding-block: var(--s-m) 1.5rem; }
  .footer__aside { gap: .5rem; }
  .footer__bottom { padding-top: 1rem; }
  .btn { letter-spacing: .06em; }
}
@media (max-width: 47.99em) {
  .footer__main { gap: 1.25rem; }
  .footer__brand { gap: .75rem; } .footer__address { margin-top: .25rem; font-size: 1.05rem; }
  .footer__book { display: none; } /* mobil: Buchung über Finale und Floating-Leiste, keine dritte Wiederholung */
  .footer__aside { padding-top: .75rem; }
  .footer__nav ul { padding-bottom: .5rem; }
}
@media (min-width: 64em) { .ed__text p { font-size: 1.15rem; } .ed__text { max-width: 34rem; } }
@media (min-width: 100em) { .ed__text p, .lead, .full__text, .hero__lead { font-size: 1.25rem; } .ed__panel { padding: 6rem clamp(4rem, 7vw, 9rem); } }

/* R05.2: interne Hinweise werden als <template> ausgegeben und nur im Preview-Statusbereich gelistet */
.pbar__status dl + dl { border-top: 1px solid rgba(243,239,231,.2); margin-top: .35rem; padding-top: .35rem; }

/* HAHNENKLEE · V4 (22.09.2026) · wird NACH site.css geladen (nur /__review/v3/). Brand Guide 2026: Warm-Ivory #FFFFFF, Nachtwald #0E1412,
   Literata (Headlines), Instrument Sans (UI, Fließtext). Raster: Inhalt ≤ 1248 px, Rand ≥ 24 px Desktop / 20 px mobil; Fließtext 17–18 px,
   Leads ≤ 19 px; Sektionen 40–88 px. Teil 1: Tokens + Rahmen (Fortschrittslinie, Header 60/56 px, Drawer, Footer) · Teil 2: Homepage
   · Teil 3: Unterseiten (v4-) · Teil 4: Consent-Banner · Teil 5: Archivseite (alte Blöcke) · Teil 6: Motion. */

/* ---------- 1 Tokens ---------- */
:root {
  --wrap: 78rem; --wide: 96rem; --gutter: clamp(1.25rem, 3vw, 2.25rem);
  --header-h: 2.875rem;  /* 46 px (Wunsch 24.09.: noch schmaler) */
  --s-s: 1.5rem; --s-m: clamp(2.5rem, 1.75rem + 2.6vw, 5.5rem); --s-l: clamp(3.5rem, 3rem + 2.5vw, 6rem);
  --fs-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem); --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); --fs-ui: .9375rem;
  --fs-nav: 1.0625rem;   /* Nacharbeit 27.09.: eine Schriftgröße für alle Einträge der Kopfzeile (Hauptpunkte, Sprache, FAQ, Kontakt, Buchen) */
  --fs-h1: clamp(2rem, 1.4rem + 1.9vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.3vw, 2.625rem);
  --fs-h3: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --fs-hero: clamp(2.125rem, 1.4rem + 2.5vw, 4.125rem);
  --ivory-2: rgba(255,255,255,.8); --ivory-3: rgba(255,255,255,.62); --ink-2: rgba(14,20,18,.78); --ink-3: rgba(14,20,18,.62);
  --line: rgba(14,20,18,.14); --line-dark: rgba(255,255,255,.2); --panel: #FFFFFF; /* 30.09. abends (Johannes „alles weiß“): Hinweisflächen weiß mit Linie statt Hellgrau */
  /* Wunsch Johannes 30.09.2026: Seitengrund Weiß statt Warm-Ivory #FFFFFF („weg vom Beige“) – helle Schrift auf Bildern und dunklen Flächen wird
     damit reines Weiß, helle Schaltflächen weiß; Flächen (--panel) ein neutrales, sehr helles Grau statt Beige */
  --ivory: #FFFFFF;
  --txt-scrim: rgba(14,20,18,.74) 0, rgba(14,20,18,.5) 40%, rgba(14,20,18,0) 76%;   /* Wunsch 26.09.: einheitlicher Textgrund auf Bildern (Vorbild Sauna) */
}
@media (max-width: 63.99em) { :root { --header-h: 3rem; } }
html { background: var(--ivory); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.v3-root { background: var(--ivory); color: var(--ink); font-size: var(--fs-body); line-height: 1.55; overflow-x: clip; }
.v3-root .sec--white { background: var(--ivory); }
.v3-wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.v3-wide { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.v3-wide > .v3-sechead, .v3-wide > .v3-stage__text, .v3-wide > .v3-h2 { width: min(100%, var(--wrap)); margin-inline: auto; }
.v3-root :focus-visible { outline: 3px solid var(--night); outline-offset: 3px; border-radius: 2px; }
.v3-hero :focus-visible, .v3-close :focus-visible, .v3-footer :focus-visible, .v4-hero:not(.v4-hero--plain) :focus-visible, .v3-header:not(.is-scrolled):not(.v3-header--solid) :focus-visible, .v3-root .sec--dark :focus-visible, .v4-stage__frame :focus-visible, .v4-duo__item :focus-visible, .v4-cam :focus-visible { outline-color: var(--ivory); }   /* 27.09. abends (Fokusprüfung aller Seiten): Bühnen, Duos und Webcam-Ladekarte stehen auf Nachtgrund – vorher nachtfarbener Rahmen auf Nacht (1:1) */
.v3-root .progress { display: none; }
.v3-root [id] { scroll-margin-top: calc(var(--header-h) + var(--pbar-y, var(--pbar-h)) + 1rem); }
.v3-root h1, .v3-root h2, .v3-root h3 { letter-spacing: -.015em; }
.v3-h2 { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.12; font-weight: 400; margin: 0; max-width: 22ch; }
.v4-h3 { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; font-weight: 400; margin: 1.5rem 0 .35rem; }
.v3-text { font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); max-width: 36em; margin: 0; }
@media (min-width: 64em) { .v3-l { display: block; } }
.v3-nw { white-space: nowrap; }   /* Namen mit Bindestrich nicht trennen (Harz-Urlaubs-Alm) */   /* Wunsch 26.09.: bewusster Zeilenfall (home.ts lines()) nur auf dem Desktop */
.v3-caption { font-size: .875rem; line-height: 1.45; color: var(--ink-3); margin: .6rem 0 0; }
.v4-eyebrow { font-family: var(--font-sans); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); margin: 0; }
.v4-strong { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: 1.5; margin: 0; max-width: 34em; color: var(--ink-2); }
.v4-note { font-size: .9375rem; line-height: 1.5; color: var(--ink-3); margin: .75rem 0 0; max-width: 42em; }
.v3-arrow { display: inline-block; margin-left: .4em; transition: transform .35s var(--ease-out); }
.v3-arrow--ext { margin-left: .3em; font-size: .9em; text-decoration: none; }   /* D05: eigenes Zeichen für externe Ziele, nicht gedreht */
/* 05.10.2026 ~22:25 (Johannes): jeder Textlink auf eine fremde Website öffnet im neuen Tab und zeigt am Ende ↗ – zentral per CSS (Texte und
   Übersetzungen bleiben unverändert). Ausgenommen: Schaltflächen (keine Pfeile an CTAs, 01.10.), Symbole/Logos und Links mit eigenem Pfeil.
   Ohne :has() (sehr alte Browser) entfällt nur der Pfeil. */
a[target="_blank"][href^="http"]:not([class*="btn"]):not([class*="cta"]):not([class*="book"]):not(:has(.v3-arrow--ext, .v3-ext, .v4-rev__arrow, svg, img))::after { content: "\2197"; content: "\2197" / ""; display: inline-block; margin-left: .3em; font-size: .9em; line-height: 1; text-decoration: none; }
.v3-link .v3-ext { margin-left: .3em; }   /* QA 27.09.: Pfeil klebte am Wort („Hahnenklee↗“, „Alm↗“) – Flex-Link verwirft das Leerzeichen */
/* QA 27.09.: Telefonnummern im Fließtext nicht umbrechen („+49 / 5323 …“); Knöpfe behalten ihr eigenes Verhalten */
a[href^="tel:"]:not([class]), .v3-footer__tel, .v4-card__v[href^="tel:"] { white-space: nowrap; }
/* QA 27.09.: keine Einzelwörter in der letzten Zeile von Fragen, Links und Hinweisen – per Umbruchregel statt einzelner Bindungen */
.v3-faq__item > summary > span, .v3-link, .v4-iform__offline p, .v4-hero__lead, .v4-cam__lead { text-wrap: pretty; }
.v3-link:hover .v3-arrow--ext, .v4-rows__row:hover .v3-arrow--ext { transform: translate(2px, -2px); }
.v3-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: rgba(14,20,18,.4); }
.v3-link:hover, .v3-link:focus-visible { text-decoration-color: currentColor; } .v3-link:hover .v3-arrow { transform: translateX(4px); }
.v3-link--light { color: var(--ivory); text-decoration-color: rgba(255,255,255,.45); }
.v3-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .7rem 1.35rem; font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 600; letter-spacing: .01em; line-height: 1.2; text-decoration: none; border: 1px solid transparent; border-radius: 2px; text-align: center; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); -webkit-tap-highlight-color: transparent; }
.v3-btn--lg { min-height: 3.25rem; padding: .95rem 1.8rem; font-size: 1rem; }
.v3-btn--primary { background: var(--night); color: var(--ivory); border-color: var(--night); } .v3-btn--primary:hover { background: #1c2723; border-color: #1c2723; }
.v3-btn--light { background: var(--ivory); color: var(--night); border-color: var(--ivory); } .v3-btn--light:hover { background: #fff; border-color: #fff; }
.v3-btn--outline { background: transparent; color: var(--night); border-color: rgba(14,20,18,.45); } .v3-btn--outline:hover { border-color: var(--night); }
.v3-btn--ghost { background: rgba(14,20,18,.22); color: var(--ivory); border-color: rgba(255,255,255,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .v3-btn--ghost:hover { background: rgba(14,20,18,.42); border-color: var(--ivory); }
.v4-actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin: .25rem 0 0; }
.v4-links { display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; margin: 0; }
.v4-qa { margin: .25rem 0 0; display: grid; gap: .8rem; max-width: 40em; } .v4-qa dt { font-weight: 600; } .v4-qa dd { margin: .2rem 0 0; color: var(--ink-2); }

/* ---------- 1a Lesefortschritt: 2 px, immer sichtbar, nicht vom Header verdeckt ---------- */
.v3-progress { position: fixed; top: calc(var(--pbar-y, var(--pbar-h)) + var(--header-h)); left: 0; right: 0; height: 2px; z-index: 95; pointer-events: none; transition: top .4s var(--ease-out); background: rgba(214,178,110,.16); } /* zweifarbig: helle Spur + leuchtende Füllung, erst wenn der Header fest ist (Wunsch 24.09.) */
html:has(.v3-header.is-hidden) .v3-progress { top: var(--pbar-y, var(--pbar-h)); }
html:has(.v3-header:not(.is-scrolled):not(.v3-header--solid)) .v3-progress { display: none; } /* über dem Film keine sichtbare Abgrenzung */
.v3-progress[hidden] { display: none; }
.v3-progress__bar { position: relative; display: block; height: 100%; width: 0; background: linear-gradient(90deg, #B98A3E 0%, #D9B370 55%, #F6E7C6 100%); box-shadow: 0 0 8px rgba(217,179,112,.7), 0 1px 2px rgba(14,20,18,.2); transition: width .12s linear; will-change: width; }
.v3-progress__bar::after { content: ""; position: absolute; right: 0; top: -1px; bottom: -1px; width: 56px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95)); } /* leuchtende Vorderkante */
@media (prefers-reduced-motion: reduce) { .v3-progress__bar { transition: none; } .v3-progress { transition: none; } }

/* ---------- 1b Header: 60 px Desktop / 56 px mobil, Logo 26–30 px, Navigation 15 px, kompakter CTA ---------- */
.v3-header { position: fixed; top: var(--pbar-h); left: 0; right: 0; z-index: 90; color: var(--ivory); transition: transform .4s var(--ease-out), background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.v3-header__in { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; min-height: var(--header-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }
.v3-header.is-hidden { transform: translateY(-100%); } .v3-header:focus-within { transform: none; }

/* ---------- 1c Black Friday 2026 (05.10.2026): schmale Ankündigungsleiste über dem Kopf, im Seitenfluss (scrollt mit) ----------
   Sichtbar nur bei html[data-promo] (Head-Skript vor dem ersten Bild); Höhe → --pbar-h (Inline-Skript direkt danach, site.js beim Scrollen
   --pbar-y), Kopf und Hero rücken über die vorhandene Mechanik nach – kein Layoutsprung, kein Modal, keine Animation. Nachtgrün mit Goldakzent
   (Farben der Fortschrittslinie und des Schimmers), zentriert; auf dem Telefon bis zwei Zeilen. Countdown: je Resttag ein eigener Satz. */
.v4-promo { display: none; position: relative; z-index: 92; background: #0E1412; color: #fff; font-family: var(--font-sans); font-size: .875rem; line-height: 1.35; }
html[data-promo] .v4-promo { display: block; }
.v4-promo__in { display: none; margin: 0; min-height: 2.75rem; padding: .45rem var(--gutter); align-items: center; justify-content: center; flex-wrap: wrap; gap: .1rem .6rem; text-align: center; }
html[data-promo="pre"] .v4-promo__in--pre, html[data-promo="live"] .v4-promo__in--live { display: flex; }
.v4-promo__k { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E8B85A; }
.v4-promo__t { color: rgba(255,255,255,.94); }
.v4-promo__n > span { display: none; font-weight: 700; color: #F6E7C6; }
html[data-promo-days="1"] .v4-promo__n > [data-d="1"], html[data-promo-days="2"] .v4-promo__n > [data-d="2"], html[data-promo-days="3"] .v4-promo__n > [data-d="3"], html[data-promo-days="4"] .v4-promo__n > [data-d="4"], html[data-promo-days="5"] .v4-promo__n > [data-d="5"], html[data-promo-days="6"] .v4-promo__n > [data-d="6"], html[data-promo-days="7"] .v4-promo__n > [data-d="7"] { display: inline; }
.v4-promo__cta { display: inline-flex; align-items: center; min-height: 2.75rem; margin: -.45rem 0; padding: 0 .35rem; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: #E8B85A; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.v4-promo__cta:hover { color: #F6E7C6; } .v4-promo__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 47.99em) { .v4-promo { font-size: .8125rem; } .v4-promo__in { min-height: 3rem; padding: .4rem 1rem; gap: 0 .45rem; } .v4-promo__k { font-size: .6875rem; letter-spacing: .12em; }
  /* Telefon: zwei ruhige Zeilen statt drei – Vorphase oben „Black Friday · Noch n Tage.“, darunter der Satz; Aktionstag oben Satz, darunter der Knopf */
  .v4-promo__in--pre .v4-promo__k { order: 1; } .v4-promo__in--pre .v4-promo__n { order: 2; } .v4-promo__in--pre .v4-promo__t { order: 3; flex-basis: 100%; } }
@media print { .v4-promo { display: none !important; } }
.v3-header.is-scrolled, .v3-header--solid { background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.v3-header__brand { display: inline-flex; align-items: center; min-height: 2.75rem; }
.v3-logoset { display: inline-flex; align-items: center; } .v3-logoset--dark, .v3-logoset--top { display: none; }   /* --top: nur Startseite, Telefon, ganz oben (v3-mobile.css) */
.v3-header.is-scrolled .v3-logoset--light, .v3-header--solid .v3-logoset--light { display: none; } .v3-header.is-scrolled .v3-logoset--dark, .v3-header--solid .v3-logoset--dark { display: inline-flex; }
.v3-logo { width: auto; height: auto; } .v3-logo--primary { display: none; height: 1.75rem; } .v3-logo--compact { height: 1.625rem; }
.v3-logo--symbol { display: block; height: 1.875rem; width: auto; } /* Startseite: nur das Kleeblatt im Header */
.v3-header .v3-logo--always { display: block !important; height: 1.625rem; width: auto; } /* Startseite gescrollt: Kleeblatt + HAHNENKLEE */
@media (min-width: 48em) { .v3-header .v3-logo--primary { display: block; } .v3-header .v3-logo--compact { display: none; } }
.v3-nav { display: none; justify-self: center; }
.v3-nav ul { list-style: none; display: flex; gap: clamp(.75rem, 1.5vw, 1.75rem); margin: 0; padding: 0; }
/* 30.09. (Befund Johannes, Russisch): längere Begriffe – engere Abstände und etwas kleinere Kopfschrift, rechte Gruppe ohne Umbruch */
html[lang|="ru"] .v3-nav ul { gap: clamp(.35rem, .8vw, .9rem); }
html[lang|="ru"] .v3-header :is(.v3-nav__toggle, .v3-nav > ul > li > a, .v3-header__faq, .v3-header__contact, .v3-lang__btn, .v3-header__cta) { font-size: 1rem; letter-spacing: 0; }
.v3-header__right :is(a, button) { white-space: nowrap; }   /* Nacharbeit 27.09.: etwas engere Abstände der sechs Hauptpunkte */
.v3-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .35rem; font-size: var(--fs-nav); font-weight: 600; letter-spacing: .005em; white-space: nowrap; text-decoration: none; position: relative; transition: opacity .25s var(--ease); }
.v3-nav a:hover { opacity: 1; }
.v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-nav a { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); } /* über dem Film: reines Weiß, nur Lesbarkeitsschatten – der Glow gehört allein der Marke */
.v3-nav a::after { content: ""; position: absolute; left: .35rem; right: .35rem; bottom: .55rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); } /* Hover: feine Unterstreichung wächst von links */
.v3-nav a:hover::after, .v3-nav a:focus-visible::after, .v3-nav a[aria-current="page"]::after { transform: scaleX(1); }
.v3-nav a[aria-current="page"] { font-weight: 600; }
.v3-header__right { display: flex; align-items: center; gap: clamp(.375rem, .8vw, .75rem); justify-self: end; }
.v3-header__cta { min-height: 2.375rem; padding: .45rem 1rem; font-size: var(--fs-nav); }
.v3-header__right .v3-header__cta { margin-left: clamp(.25rem, .6vw, .5rem); }   /* Nacharbeit 27.09.: Buchen etwas abgesetzt von den Textlinks */
.v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-header__cta { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* über dem Hero: heller Umriss, konkurriert nicht mit dem großen Hero-Button */
.v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-header__cta:hover, .v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-header__cta:focus-visible { background: var(--ivory); color: var(--night); border-color: var(--ivory); }
.v3-header__cta-long { display: none; } .v3-header__cta-short { display: inline; }
@media (min-width: 30em) { .v3-header__cta-long { display: inline; } .v3-header__cta-short { display: none; } }
/* Wunsch 26.09.: rechts Sprache · ☎ · ✉ · „Kontakt“ (umrandet, gleiche Höhe wie „Buchen“) · „Buchen“ (gefüllt). Über dem Hero hell umrandet,
   im festen/hellen Kopf dunkel umrandet; Telefon hochkant ohne (mobile Kopfzeile: nur Logo und Menü) */
.v3-header__contact { display: none; min-height: 2.375rem; padding: .45rem 1rem; border-radius: 4px; font-size: var(--fs-nav); }
@media (min-width: 48em) { .v3-header__contact { display: inline-flex; } }
.v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-header__contact { color: #fff; background: transparent; border-color: rgba(255,255,255,.78); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-header__contact:hover, .v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-header__contact:focus-visible { background: rgba(255,255,255,.14); border-color: var(--ivory); }
.v3-header.is-scrolled .v3-header__contact, .v3-header--solid .v3-header__contact { color: var(--night); border-color: rgba(14,20,18,.4); }
.v3-header.is-scrolled .v3-header__contact:hover, .v3-header--solid .v3-header__contact:hover, .v3-header__contact[aria-current="page"] { border-color: var(--night); background: rgba(14,20,18,.04); }
/* Sprachwahl (Wunsch 26.09.): Globus + „DE“ im Kopf ab 64em, Liste mit Eigennamen; noch nicht erzeugte Fassungen „in Vorbereitung“, ein Klick
   zeigt den kurzen Hinweis in der Sprache und auf Deutsch. Menü und Footer: offene, ruhige Liste. Keine Flaggen. */
.v3-lang { position: relative; }
.v3-lang--d { display: none; } @media (min-width: 64em) { .v3-lang--d { display: block; } }
.v3-lang__btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; padding: 0 .35rem; border: 0; border-radius: 4px; background: none; color: #fff; font: 600 var(--fs-nav)/1 var(--font-sans); letter-spacing: .02em; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,.45); transition: opacity .25s var(--ease); }
.v3-header.is-scrolled .v3-lang__btn, .v3-header--solid .v3-lang__btn { color: inherit; text-shadow: none; }
.v3-lang__btn:hover { opacity: .72; } .v3-lang__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.v3-lang__btn[aria-expanded="true"] .v3-nav__chev { transform: rotate(180deg); }
.v3-lang__globe { display: block; flex: none; }
.v3-lang__panel { position: absolute; right: -.5rem; top: calc(100% + .4rem); width: 17.5rem; padding: .35rem 0; background: var(--ivory); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 14px 34px rgba(14,20,18,.18); z-index: 60; text-shadow: none; }
.v3-lang__panel[hidden] { display: none; }
/* 30.09. abends (Johannes): Sprachwahl im Desktop-Kopf wie „Für euch“/„Extras“ – kein weißer Kasten, die Seite tritt unter dem dunklen Schleier
   zurück (v4.js: has-lang-open), Sprachen als weiße Schrift unter dem Knopf, aktuelle Sprache unterstrichen mit Haken */
.v3-lang--d .v3-lang__panel { left: .35rem; right: auto; top: calc(100% + .35rem); width: max-content; min-width: 12rem; max-width: 20rem; padding: 0; background: none; color: #fff; border: 0; border-radius: 0; box-shadow: none; }
.v3-lang--d .v3-lang__list li { animation: hk-drop-item .32s var(--ease-out) both; }
.v3-lang--d .v3-lang__list li:nth-child(2) { animation-delay: .03s; } .v3-lang--d .v3-lang__list li:nth-child(3) { animation-delay: .06s; } .v3-lang--d .v3-lang__list li:nth-child(4) { animation-delay: .09s; } .v3-lang--d .v3-lang__list li:nth-child(5) { animation-delay: .12s; } .v3-lang--d .v3-lang__list li:nth-child(6) { animation-delay: .15s; } .v3-lang--d .v3-lang__list li:nth-child(7) { animation-delay: .18s; }
.v3-lang--d .v3-lang__item { justify-content: flex-start; gap: .55rem; min-height: 2.3rem; padding: 0; color: #fff; font: 600 var(--fs-nav)/1.2 var(--font-sans); letter-spacing: .005em; text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.35); }
.v3-lang--d button.v3-lang__item:hover, .v3-lang--d a.v3-lang__item:hover { background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.v3-lang--d :is(a, button).v3-lang__item:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.v3-lang--d .v3-lang__item.is-current { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
.v3-lang--d .v3-lang__soon { color: rgba(255,255,255,.74); font-weight: 500; }
.v3-lang--d .v3-lang__msg { max-width: 18rem; margin: .5rem 0 0; padding-top: .55rem; border-top: 1px solid rgba(255,255,255,.4); color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.v3-lang--d .v3-lang__msgt { color: #fff; }
@media (prefers-reduced-motion: reduce) { .v3-lang--d .v3-lang__list li { animation: none; } }
.v3-lang__list { list-style: none; margin: 0; padding: 0; }
.v3-lang__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 2.75rem; padding: 0 1rem; border: 0; background: none; color: inherit; font: 500 .9375rem/1.2 var(--font-sans); text-align: left; cursor: pointer; }
button.v3-lang__item:hover { background: rgba(14,20,18,.06); } button.v3-lang__item:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.v3-lang__item.is-current { font-weight: 700; cursor: default; }
.v3-lang__check { flex: none; }
.v3-lang__soon { font-size: .75rem; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.v3-lang__msg { margin: .35rem 1rem .6rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.v3-lang__msg[hidden] { display: none; } .v3-lang__msg span { display: block; } .v3-lang__msgt { margin-bottom: .2rem; font-weight: 600; color: var(--ink); }
.v3-lang__label { display: flex; align-items: center; gap: .45rem; margin: 0 0 .35rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.v3-lang--m, .v3-lang--f { color: inherit; }
.v3-lang--f .v3-lang__list { display: flex; flex-wrap: wrap; gap: 0 .15rem; }
.v3-lang--f .v3-lang__item { width: auto; min-height: 2.75rem; padding: 0 .5rem; gap: .35rem; font-size: .9375rem; color: inherit; opacity: .78; }
.v3-lang--f .v3-lang__item.is-current { opacity: 1; }
.v3-lang--f button.v3-lang__item:hover { background: none; opacity: 1; text-decoration: underline; text-underline-offset: .25em; }
.v3-lang--f button.v3-lang__item:focus-visible { outline-color: currentColor; }
.v3-lang--f .v3-lang__soon, .v3-lang--f .v3-lang__check { display: none; }
.v3-lang--f .v3-lang__msg { margin: .35rem .5rem 0; padding-top: 0; border-top: 0; color: inherit; opacity: .85; }
.v3-lang--f .v3-lang__msgt { color: inherit; }
.v3-footer__bottom .v3-lang--f { flex: 1 1 auto; display: flex; justify-content: center; }
.v3-footer__bottom .v3-lang--f .v3-lang__label { display: none; }
/* Telefon-Icon (tel:-Link) nur im festen/hellen Header ab Tablet-Breite: direkte Erreichbarkeit ohne Unruhe über dem Film */
.v3-header__icon { display: none; align-items: center; justify-content: center; width: 2.75rem; min-height: 2.75rem; color: inherit; border-radius: 4px; transition: opacity .25s var(--ease); } .v3-header__icon svg { display: block; } .v3-header__icon:hover { opacity: .7; } .v3-header__mail { margin-right: .2rem; }
@media (min-width: 48em) { .v3-header.is-scrolled .v3-header__icon, .v3-header--solid .v3-header__icon, .v3-header:not(.v3-header--symbol) .v3-header__icon { display: inline-flex; } } /* Unterseiten: Telefon und E-Mail in jedem Zustand (Anweisung 24.09.); nur der Startseiten-Filmkopf bleibt reduziert */
.v3-burger { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; min-width: 2.75rem; justify-content: center; padding: 0 .25rem; font-size: var(--fs-ui); font-weight: 600; background: none; border: 0; color: inherit; cursor: pointer; }
.v3-burger__icon { display: inline-grid; gap: 5px; } .v3-burger__icon span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px; }
@media (max-width: 29.99em) { .v3-burger__label { display: none; } }
@media (min-width: 80em) { .v3-nav { display: block; } .v3-burger { display: none; } }   /* Nacharbeit 27.09.: sechs Hauptpunkte (Webcam direkt), rechts Sprache · FAQ · Kontakt · Buchen in Navigationsgröße – gemessen: ab 1280 px je 64 px Luft zwischen Marke, Navigation und rechter Gruppe (1440 px: 136 px); darunter rechtzeitig das Menü */
.v3-header__brand { flex-shrink: 0; min-width: max-content; }   /* Logo nie stauchen */
/* Drawer: sechs Hauptziele + dieselben fünf Gruppen wie im Footer */
.v3-menu { position: fixed; inset: 0; z-index: 100; background: var(--ivory); color: var(--ink); opacity: 0; transition: opacity .3s var(--ease); } .v3-menu.is-open { opacity: 1; }
.v3-menu__panel { height: 100%; display: flex; flex-direction: column; width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); overflow-y: auto; }
.v3-menu__head { min-height: var(--header-h); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
.v3-menu__close { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-size: var(--fs-ui); font-weight: 600; background: none; border: 0; cursor: pointer; color: inherit; }
.v3-menu__list { list-style: none; margin: 1rem 0 0; padding: 0; } .v3-menu__list li { border-top: 1px solid var(--line); } .v3-menu__list li:last-child { border-bottom: 1px solid var(--line); }
.v3-menu__list a { display: flex; align-items: center; min-height: 3rem; font-family: var(--font-serif); font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); line-height: 1.2; padding: .55rem 0; text-decoration: none; color: inherit; }
.v3-menu__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; margin-top: 1.5rem; flex: 1; align-content: start; }
.v3-menu__label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); margin: 0 0 .25rem; }
.v3-menu__group ul { list-style: none; margin: 0; padding: 0; }
.v3-menu__group a { display: flex; align-items: center; min-height: 2.5rem; padding: .2rem 0; font-size: 1rem; color: var(--ink-2); text-decoration: none; } .v3-menu__group a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
@media (min-width: 48em) { .v3-menu__groups { grid-template-columns: repeat(3, 1fr); } }
.v3-menu__foot { display: grid; gap: 1rem; padding-top: 1.5rem; justify-items: start; } .v3-menu__meta { display: grid; gap: .3rem; color: var(--ink-2); margin: 0; } .v3-menu__meta a { text-decoration: none; display: inline-flex; align-items: center; min-height: 2.5rem; }

/* ---------- 1c Footer: Buchungsabschluss → Identitätszeile → fünf Gruppen → Abschlusszeile ---------- */
/* Buchungsabschluss (24.09.): Außenmotiv EM05 als Bühne, Text rechts unten über dem ruhigen Weg, Scrim läuft unten in den Footer-Ton */
.v3-close { position: relative; isolation: isolate; color: var(--ivory); background: var(--night); min-height: clamp(34rem, 78vh, 54rem); display: grid; align-items: center; padding: 0; }
.v3-close__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .v3-close__fig { margin: 0; height: 100%; } .v3-close__media .pic { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: var(--focus, 50% 56%); } .v3-close__media .pic img { object-position: var(--fx-d, 50% 56%); } .v3-close--photo .v3-close__media .pic img { filter: saturate(.78) contrast(1.04) brightness(.72) sepia(.12); } /* Filter nur über dem Tages-Gruppenfoto (Versuch 24.09.); Nachtmotiv bleibt ungefiltert */
/* D01 (27.09.): Das KI-Symbol liegt nicht mehr im Bildcontainer (eigener Stapelkontext mit z-index 0, darüber der Verlauf), sondern als
   Geschwister über Verlauf und Text – oben rechts, wo das Motiv noch hell genug ist und keine Schaltfläche liegt */
.v3-close > .v3-ai { z-index: 3; top: 1rem; right: var(--gutter); bottom: auto; }
.v3-close__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(14,20,18,.28) 0, rgba(14,20,18,.10) 34%, rgba(14,20,18,.22) 62%, rgba(14,20,18,.78) 88%, var(--night) 100%), radial-gradient(ellipse 60% 50% at 50% 46%, rgba(14,20,18,.44) 0, rgba(14,20,18,.2) 50%, rgba(14,20,18,0) 78%); } /* Nachtmotiv: leichte Mittenvignette für die Schrift, unten in den Footer laufend; QA 27.09.: etwas kräftiger (helle Fassaden, Kontakt) */
.v3-close__in { position: relative; z-index: 2; display: flex; justify-content: center; padding: clamp(6rem, 16vh, 11rem) 0 clamp(6rem, 14vh, 10rem); }
.v3-close__copy { display: grid; gap: 1.75rem; justify-items: center; text-align: center; max-width: none; }
.v3-close__h { font-family: var(--font-serif); font-size: clamp(2.25rem, 1rem + 5.2vw, 5rem); line-height: 1.02; margin: 0; letter-spacing: -.01em; white-space: nowrap; /* „ihr“ nie allein in einer Zeile */ text-shadow: 0 2px 6px rgba(0,0,0,.4); }
.v3-btn--xl { min-height: 3.75rem; padding: 1.15rem 2.75rem; font-size: 1.125rem; letter-spacing: .02em; }
.v3-close__cta { border-radius: 4px; box-shadow: 0 10px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); transition: background-color .3s var(--ease), transform .3s var(--ease-out), box-shadow .3s var(--ease); }
.v3-close__cta:hover, .v3-close__cta:focus-visible { background: #fff; border-color: #fff; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.12); }
/* Wunsch 26.09.: auf jeder „Auszeit buchen“-Schaltfläche (Klasse aus bookingCta) gleitet regelmäßig ein Lichtschimmer von links nach rechts
   (Takt 4 s, Lauf ≈ 1 s nach 1,4 s Ruhe; Wunsch 28.09.). Wunsch Johannes 01.10.: überall NUR durch die Schrift – kein Lichtband über die Fläche,
   auch nicht im Hero, im Menü und auf dunklen Knöpfen – und alle Schaltflächen im selben Takt: v4.js setzt beim Sichtbarwerden --sheen-delay passend
   zu einer gemeinsamen Seitenuhr; außerhalb des Bildes läuft nichts. Dunkle Schrift (weiße Knöpfe): Markengold; helle Schrift (dunkle Knöpfe,
   Glas im Hero): Weiß mit warmem Gold. Bei reduzierter Bewegung und im Kontrastmodus normale Schrift. */
.v3-sheen { position: relative; }
.v3-sheen .v3-sheen__t { --sh-base: var(--night); --sh-mid: #A9771C; --sh-peak: #E8B85A; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(100deg, var(--sh-base) 0 41%, var(--sh-mid) 46%, var(--sh-peak) 50%, var(--sh-mid) 54%, var(--sh-base) 59% 100%) 100% 0 / 320% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; }
.v3-sheen.is-live .v3-sheen__t { animation: v3SheenText 4s cubic-bezier(.45,.05,.25,1) var(--sheen-delay, 0s) infinite; }
.v3-btn--primary.v3-sheen .v3-sheen__t, .v3-mnav__book.v3-sheen .v3-sheen__t { --sh-base: var(--ivory); --sh-mid: #E8B85A; --sh-peak: #FFF0C9; }   /* helle Schrift auf dunklem Knopf */
@keyframes v3SheenText { 0%, 35% { background-position: 100% 0; } 59%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce), (forced-colors: active) { .v3-sheen .v3-sheen__t { color: inherit; -webkit-text-fill-color: currentColor; background: none; animation: none; } }
.v3-close__ask { font-size: .9375rem; color: rgba(255,255,255,.82); text-shadow: 0 1px 2px rgba(0,0,0,.4); margin-top: -.5rem; }
@media (min-width: 64em) { .v3-close__copy { gap: 2rem; } .v3-btn--xl { min-height: 4rem; padding: 1.25rem 3.25rem; font-size: 1.1875rem; } }
/* Footer (24.09.): Marke groß links, „Kontakt & Anreise“ prominent rechts, fünf klar beschriftete Gruppen, ruhige Rechtszeile */
.v3-footer { background: var(--night); color: var(--ivory); margin-top: auto; padding: clamp(2rem, 3vw, 3rem) 0 calc(1rem + env(safe-area-inset-bottom)); }
/* Nacharbeit 27.09.: ein gemeinsamer, breiterer Inhaltsbereich (max. 90rem ≈ 1440 px, seitlich mind. 48–64 px am Desktop) für alle Footer-Zeilen */
.v3-footer__in { width: min(100% - 2 * clamp(1.25rem, 4vw, 4rem), 90rem); }
.v3-close + .v3-footer { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.v3-footer a { text-decoration: none; color: inherit; }
.v3-footer__id { display: grid; gap: 1.25rem; padding-bottom: clamp(1.25rem, 2vw, 1.75rem); border-bottom: 1px solid var(--line-dark); align-items: center; }
.v3-footer__logo { display: inline-flex; align-items: center; min-height: 2.75rem; } .v3-footer__logo .v3-logo { display: block !important; height: clamp(2.75rem, 2rem + 1.6vw, 3.75rem); width: auto; filter: brightness(1.12) drop-shadow(0 0 5px rgba(255,255,255,.32)); }   /* 27.09.: dasselbe dezente Leuchten wie Startseite, Menü und Telefon-Footer */
.v3-footer__lines { display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; margin: 0; } .v3-footer__lines a { display: inline-flex; align-items: center; min-height: 2.5rem; } .v3-footer__lines a:hover { text-decoration: underline; text-underline-offset: .3em; }
.v3-footer__id { grid-template-columns: 1fr auto; gap: 1.5rem; }
.v3-footer__nav { display: grid; gap: 1.75rem 1.5rem; padding: clamp(1.5rem, 2.5vw, 2.25rem) 0; grid-template-columns: 1fr; }
@media (min-width: 40em) { .v3-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem clamp(1.5rem, 4vw, 3rem); } }   /* Tablet: drei Spalten, zwei Reihen */
/* Desktop: sechs Spalten in Inhaltsbreite über die ganze Breite verteilt (erste bündig links, letzte bündig rechts); lange Einträge in
   „Kontakt & Infos“ und „Rechtliches“ behalten ihre Breite bzw. brechen natürlich um */
@media (min-width: 64em) { .v3-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* 30.09.: sieben Gruppen (Preise wieder eigen) */
@media (min-width: 80em) { .v3-footer__nav { grid-template-columns: repeat(7, auto); justify-content: space-between; column-gap: clamp(1.25rem, 1.8vw, 2.5rem); } }
.v3-footer__label { font-family: var(--font-serif); font-size: 1.1875rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ivory); margin: 0 0 .75rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.14); } /* Kategorie klar erkennbar: Serife, Hairline */
.v3-footer__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* 30.09. (Sprachfassungen, Befund Johannes RU): Rubriklinien stehen in jeder Sprache auf einer Höhe – die Überschriften teilen sich eine
   Rasterzeile (subgrid); bricht eine Überschrift zweizeilig um, rücken die einzeiligen mit Text und Linie nach unten */
@media (min-width: 40em) {
  .v3-footer__group { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .v3-footer__group > ul { align-self: start; align-content: start; }   /* Listen nicht auf die Höhe der längsten Spalte strecken */
  .v3-footer__label { display: flex; align-items: flex-end; }
}
.v3-footer__group a { display: inline-flex; align-items: center; min-height: 0; padding: .5rem 0; line-height: 1.35; font-size: .9375rem; color: var(--ivory-2); transition: color .2s var(--ease); } /* gleicher Abstand bei ein- und zweizeiligen Einträgen */
.v3-footer__group a:hover, .v3-footer__group a:focus-visible { color: var(--ivory); text-decoration: underline; text-underline-offset: .3em; text-decoration-color: rgba(255,255,255,.5); } .v3-footer__group a[aria-current="page"] { color: var(--ivory); }
.v3-footer__bottom { display: grid; gap: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark); font-size: .8125rem; color: var(--ivory-3); }
@media (min-width: 40em) { .v3-footer__bottom { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; } }
.v3-footer__copy { display: inline-flex; align-items: center; min-height: 2.5rem; margin: 0; color: var(--ivory-3); }
.v3-footer__copy { display: inline-flex; align-items: center; gap: .9rem; flex-wrap: wrap; } .v3-footer__sep { display: inline-block; width: 1px; height: 1em; background: rgba(255,255,255,.3); } .v3-footer__tel { color: var(--ivory-2); font-variant-numeric: tabular-nums; } .v3-footer__tel:hover, .v3-footer__mail:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: .3em; } .v3-footer__mail { color: var(--ivory-2); } /* Telefon und E-Mail neben dem Copyright; Adresse wird erst im Browser zusammengesetzt */
.v3-footer__group .v3-footer__btn { display: inline-flex; align-items: center; min-height: 2.4rem; font-size: .9375rem; color: var(--ivory-2); text-align: left; transition: color .2s var(--ease); } .v3-footer__group .v3-footer__btn:hover, .v3-footer__group .v3-footer__btn:focus-visible { color: var(--ivory); text-decoration: underline; text-underline-offset: .3em; text-decoration-color: rgba(255,255,255,.5); }
/* Google-Bewertung im Footer (Wunsch 26.09.): eigene Zeile mit gefüllten Sternen, Wert, Quelle und Stand; getrennt von der DTV-Zeile im Hero */
.v3-footer__id--rating { grid-template-columns: 1fr auto auto; column-gap: .9375rem; }   /* Abstand Bewertung → erstes Symbol wie zwischen den Symbolen (je 26 px von Zeichen zu Zeichen) */
.v3-grate { margin: 0; } .v3-grate a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .15rem .5rem; min-height: 2.75rem; color: var(--ivory); text-decoration: none; font-family: var(--font-sans); font-size: .9375rem; line-height: 1.3; }
.v3-grate__stars { display: inline-flex; gap: .12rem; } .v3-grate__stars svg { display: block; width: .8rem; height: .8rem; fill: var(--ivory); }
.v3-grate__v { font-weight: 700; } .v3-grate__l { font-weight: 600; letter-spacing: .01em; color: var(--ivory); }   /* Wunsch 26.09.: nur „4,9 bei Google“, „bei Google“ kräftiger */ .v3-grate__s { color: var(--ivory-3); font-size: .8125rem; } .v3-grate .v3-ext { color: var(--ivory-3); }
.v3-grate a:hover .v3-grate__l, .v3-grate a:focus-visible .v3-grate__l { text-decoration: underline; text-underline-offset: .2em; } .v3-grate a:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.v3-grate--mfoot { display: none; }
.v3-footer__social { display: flex; gap: .25rem; margin: 0; justify-self: end; } .v3-footer__social a:last-child { margin-left: -.3125rem; }   /* 26.09.: optisch gleiche Abstände – das schmale „f“ rückt um 5 px an Instagram heran */ .v3-footer__ico { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--ivory-3); transition: color .2s var(--ease); } .v3-footer__ico:hover, .v3-footer__ico:focus-visible { color: var(--ivory); } .v3-footer__ico svg { display: block; }
.v3-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; }
.v3-footer__legal a, .v3-footer__btn { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--ivory-3); font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.v3-footer__legal a:hover, .v3-footer__btn:hover { text-decoration: underline; text-underline-offset: .3em; color: var(--ivory); }
/* WEBWUNDER-Credit: „Powered by“ und Wortmarke mit gleicher Versalhöhe (≈ 11 px) auf einer Grundlinie */
.v3-footer__credit { margin: 0; } .v3-footer__credit a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; color: rgba(255,255,255,.5); text-decoration: none; transition: color .25s var(--ease); }   /* Wunsch 26.09.: dezent wie ein Wasserzeichen (Kontrast ≥ 4,5 : 1), beim Überfahren hell und farbig */
.v3-footer__credit a:hover, .v3-footer__credit a:focus-visible { color: rgba(255,255,255,.9); }
.v3-footer__credit-text { font-size: .609375rem; line-height: 1; }   /* Wunsch 26.09.: 25 % kleiner als der Copyright-Hinweis (9,75 statt 13 px); Versalhöhe = Höhe der Wortmarke, Mitte auf einer Linie */
.v3-ww { display: block; height: .461rem; width: auto; position: relative; top: -.0625rem; opacity: .5; filter: grayscale(1); transition: opacity .25s var(--ease), filter .25s var(--ease); } /* Wortmarke 2026 (PNG 3x): Versalhöhe ≈ Fußzeilentext, im Grau der Fußzeile */
.v3-footer__credit a:hover .v3-ww, .v3-footer__credit a:focus-visible .v3-ww { opacity: 1; filter: none; }   /* roter Punkt der Wortmarke erscheint */

/* ---------- 1d Medien mit KI-Kennzeichnung ---------- */
.v3-fig { position: relative; margin: 0; }
.v3-ki--legacy { position: absolute; left: .85rem; bottom: .7rem; z-index: 2; display: inline-block; font-family: var(--font-sans); font-size: .8125rem; line-height: 1.25; font-weight: 400; letter-spacing: .01em; color: rgba(255,255,255,.94); text-shadow: 0 1px 2px rgba(0,0,0,.55); pointer-events: none; } /* Anweisung 24.09.: dezenter Text statt Kasten; Wortlaut aus dem Manifest */
/* Textlabel entfällt (Auftrag 24.09.): einheitliches EU-Symbol über aiMarkRaw() */ /* kleiner lokaler Verlauf nur hinter der Kennzeichnung */
.v3-fig { position: relative; }
.v3-ai.v3-ki--desktop { display: none; }
.v3-gal__item { position: relative; }   /* KI-Symbol der Startseiten-Kacheln als Geschwister des Links */
@media (min-width: 48em) { .v3-ai.v3-ki--desktop { display: grid; } .v3-ai.v3-ki--mobile { display: none; } }

/* ---------- 1e Brotkrumen ---------- */
.v4-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 .5rem; margin: 0; padding: 0; font-size: .875rem; }
.v4-crumbs li { display: inline-flex; align-items: center; min-height: 2rem; } .v4-crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .55; }
.v4-crumbs a { color: inherit; text-decoration: none; } .v4-crumbs a:hover { text-decoration: underline; text-underline-offset: .25em; }
.v4-crumbs a { position: relative; } .v4-crumbs a::after { content: ""; position: absolute; inset: -.3rem -.25rem; }   /* G15-01 (28.09.): unsichtbare Trefferfläche ≈ 32 px hoch statt 22 px; seitlich nur .25rem, bleibt vor dem Trenner „/“ */
.v4-crumbs [aria-current] { opacity: 1; font-weight: 600; }

/* ---------- 2 Homepage ---------- */
.v3-hero { position: relative; min-height: max(38rem, calc(100svh - var(--pbar-h))); background: var(--night); color: var(--ivory); isolation: isolate; display: grid; grid-template-rows: 1fr auto; }
.v3-hero__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.v3-hero__media .pic { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; } .v3-hero__pic img { width: 100%; height: 100%; object-fit: cover; }
.v3-hero__video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none; } .v3-hero__video.is-playing { opacity: 1; } .v3-hero__video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; /* wie Poster-Fokus EM08 (Desktop) */ }
.v3-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 64% 46% at 50% 44%, rgba(14,20,18,.30) 0, rgba(14,20,18,.12) 52%, rgba(14,20,18,0) 76%), linear-gradient(to bottom, rgba(14,20,18,.62) 0, rgba(14,20,18,.18) 22%, rgba(14,20,18,.08) 46%, rgba(14,20,18,.20) 68%, rgba(14,20,18,.94) 100%); } /* Kino-Kontrast nach Skyforest-Vorbild: Verlauf oben (Nav), tonale Vignette hinter dem Titelblock, tiefer Verlauf unten (Fakten), kein flächiges Overlay */
.v3-hero__center { position: relative; z-index: 2; display: grid; justify-items: center; align-content: center; text-align: center; gap: 1.1rem; padding: max(calc(var(--header-h) + var(--pbar-h) + 2.5rem), 10vh) var(--gutter) calc(2.5rem + 5vh); } /* Gruppe sitzt leicht über der Mitte */
.v3-hero__brand { margin: 0; line-height: 0; }
.v3-hero__brand .v3-logo { display: block; width: clamp(18rem, 13rem + 29vw, 44rem); height: auto; filter: brightness(1.12) drop-shadow(0 0 5px rgba(255,255,255,.32)); } /* nur diese Instanz: Elfenbein → Reinweiß per brightness, eng begrenzter weißer Lichtschein, Konturen scharf */
.v3-hero__rule { display: block; width: 1px; height: clamp(1.5rem, 3vh, 2.5rem); background: rgba(255,255,255,.55); }
.v3-hero__claim { font-family: var(--font-serif); font-size: var(--fs-hero); line-height: 1.06; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.35); } .v3-hero__claim span { display: block; }
.v3-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1.5rem; margin-top: 1.5rem; }
.v3-hero__more { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .25rem; color: rgba(255,255,255,.82); font-family: var(--font-sans); font-size: .9375rem; font-weight: 500; letter-spacing: .01em; text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,.35); position: relative; }
.v3-hero__more::after { content: ""; position: absolute; left: .25rem; right: 1.6rem; bottom: .5rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.v3-hero__more:hover::after, .v3-hero__more:focus-visible::after { transform: scaleX(1); } .v3-hero__more:hover .v3-arrow { transform: translateX(4px); }
/* Hero-Buttons und Header-CTA: eckig-modern (4 px), Anheben + weicher Schatten beim Hover, klare Reaktion beim Fokus */
.v3-hero__actions .v3-btn, .v3-header__cta { border-radius: 4px; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease-out), box-shadow .3s var(--ease); }
.v3-hero__actions .v3-btn--lg { padding: 1rem 2.1rem; letter-spacing: .015em; }
.v3-hero__actions .v3-btn:hover, .v3-hero__actions .v3-btn:focus-visible, .v3-header__cta:hover, .v3-header__cta:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.v3-hero__actions .v3-btn:active, .v3-header__cta:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.v3-hero__actions .v3-btn--light:hover { background: #fff; border-color: #fff; }
.v3-hero__actions .v3-btn--ghost { background: rgba(14,20,18,.18); border-color: rgba(255,255,255,.6); }
.v3-hero__actions .v3-btn--ghost:hover, .v3-hero__actions .v3-btn--ghost:focus-visible { background: rgba(255,255,255,.16); border-color: var(--ivory); }
.v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-header__cta:hover { background: #fff; border-color: #fff; }
.v3-header.is-scrolled .v3-header__cta:hover, .v3-header--solid .v3-header__cta:hover { background: #1c2723; box-shadow: 0 10px 24px rgba(14,20,18,.22); }
@media (prefers-reduced-motion: reduce) { .v3-hero__actions .v3-btn:hover, .v3-header__cta:hover { transform: none; } }
.v3-hero__google { margin: .9rem 0 0; font-size: .9375rem; opacity: .88; }
.v3-hero__rating { display: inline-flex !important; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .25rem; color: var(--ivory) !important; text-decoration: none !important; text-shadow: 0 1px 2px rgba(0,0,0,.35) !important; font-family: var(--font-sans); font-size: .9375rem; transition: opacity .25s var(--ease); }
.v3-hero__rating:hover, .v3-hero__rating:focus-visible { opacity: .82; }
.v3-hero__stars { display: inline-flex; gap: .15rem; } .v3-hero__stars svg { width: .8rem; height: .8rem; fill: var(--ivory); display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.v3-hero__rating-value { font-weight: 700; letter-spacing: .01em; }
.v3-hero__rating-label { position: relative; font-weight: 500; color: var(--ivory-2); }
.v3-hero__rating-label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.1rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.v3-hero__rating:hover .v3-hero__rating-label::after, .v3-hero__rating:focus-visible .v3-hero__rating-label::after { transform: scaleX(1); } .v3-hero__google a { display: inline-flex; align-items: center; min-height: 2.75rem; color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: .28em; text-decoration-color: rgba(255,255,255,.5); text-shadow: 0 1px 2px rgba(0,0,0,.35); } .v3-hero__google a:hover { text-decoration-color: currentColor; }
/* 05.10.2026 nachmittags (Kundin, Urkunde): DTV-Klassifizierung 5 Sterne – Hero wieder mit „5-Sterne-Komfort“ wie bis zum Vormittag */
/* C04 (26.09.): DTV-Qualitätszeile – eigene, nicht verlinkte Zeile mit Kontursternen; bewusst anders als die (gefüllte) Google-Pille */
.v3-hero__dtv { display: inline-flex; align-items: center; gap: .55rem; margin: .9rem 0 0; font-family: var(--font-sans); font-size: .875rem; font-weight: 500; line-height: 1.4; letter-spacing: .02em; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.v3-hero__dtvstars { display: inline-flex; gap: .14rem; } .v3-hero__dtvstars svg { width: .9375rem; height: .9375rem; display: block; color: var(--ivory); filter: brightness(1.12) drop-shadow(0 0 3px rgba(255,255,255,.5)) drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }   /* 27.09. (2): gefüllt, 15 statt 12 px; 05.10.2026 (Johannes): Sterne leuchten dezent wie das Kopf-Logo, auf allen Breiten */
.v3-hero__dtv + .v3-hero__google { margin-top: .15rem; }
/* Wunsch 27.09. (2): „Auszeit mit 5-Sterne-Komfort“ in normaler Schreibweise (keine Versalien mehr) */
/* Wunsch 26.09.: DTV-Zeile als Link zur Erklärung des DTV (neuer Tab), 44 px Tippfläche, Unterstrich erst bei Hover/Fokus */
.v3-hero__dtv a { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; color: inherit; text-decoration: none; }
.v3-hero__dtv a:hover .v3-hero__dtvt, .v3-hero__dtv a:focus-visible .v3-hero__dtvt { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.v3-hero__dtv a:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; } .v3-hero__dtv .v3-ext { font-size: .8125rem; opacity: .75; }
html.js:not(.review-static) .v3-hero__dtv { animation-delay: .55s; }
/* Kurzfakten: kleine, zurückhaltende Versalzeile (Instrument Sans), Hairline oben, feine Trennlinien */
.v3-hero__facts { position: relative; z-index: 2; list-style: none; margin: 0 auto; padding: 1.1rem var(--gutter) calc(1.4rem + env(safe-area-inset-bottom)); width: min(100%, var(--wrap)); display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .75rem; font-family: var(--font-sans); font-size: .8125rem; font-weight: 500; line-height: 1.35; letter-spacing: .01em; color: rgba(255,255,255,.85); border-top: 1px solid rgba(255,255,255,.12); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.v3-hero__facts li { text-align: center; }
@media (min-width: 48em) { .v3-hero__facts { grid-template-columns: repeat(4, 1fr); gap: 0; padding-top: 1.15rem; padding-bottom: 1.5rem; font-size: .875rem; } .v3-hero__facts li { position: relative; padding: .1rem 1rem; } .v3-hero__facts li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 1em; width: 1px; background: rgba(255,255,255,.12); } }
/* Hahnenklee-Loader über der Hero-Bühne (nicht über dem fixen Header): schwarz, Kleeblatt atmet, Wortmarke, dezenter Descriptor, 1-px-Linie, Prozent */
.v3-loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: #000; color: var(--ivory); pointer-events: none; transition: opacity .8s var(--ease), visibility 0s linear .8s; animation: v3-loader-kill 0s linear 4s forwards; } /* Vollbild über Header, Navigation und Consent-Banner, solange der Hero lädt */
.v3-loader.is-done { opacity: 0; visibility: hidden; }
html:not(.js) .v3-loader, html.review-static .v3-loader { display: none; }
@keyframes v3-loader-kill { to { opacity: 0; visibility: hidden; } } /* Sicherheitsnetz ohne funktionierendes Script: spätestens nach 4 s weg (Ergänzung 24.09.) */
html.hk-nointro .v3-loader { display: none; } /* kein Intro bei Sprungziel, Zurück, interner Rückkehr, Wiederbesuch in der Sitzung */
.v3-loader__inner { display: grid; justify-items: center; gap: 1rem; padding: 0 var(--gutter); text-align: center; }
@media (max-width: 47.99em) { .v3-loader__inner { gap: .85rem; } }
.v3-loader__mark { display: block; width: clamp(2.375rem, 2rem + 1.2vw, 3.125rem); height: auto; transform-origin: 50% 50%; animation: v3-breathe 3.8s cubic-bezier(.45, 0, .55, 1) infinite; will-change: transform, opacity; }
@keyframes v3-breathe { 0%, 100% { transform: scale(1); opacity: .78; } 50% { transform: scale(1.05); opacity: 1; } }
.v3-loader__word { display: block; margin-top: .25rem; } .v3-loader__wordmark { display: block; width: clamp(11rem, 8.5rem + 10vw, 17rem); height: auto; fill: currentColor; }
.v3-loader__sub { font: 600 .6875rem/1 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ivory-3); margin-top: -.35rem; }
.v3-loader__line { display: block; width: clamp(8rem, 6rem + 8vw, 13rem); height: 1px; margin-top: 1.1rem; background: rgba(255,255,255,.18); overflow: hidden; }
.v3-loader__fill { display: block; height: 100%; width: 100%; background: var(--ivory); transform: scaleX(0); transform-origin: 0 50%; }
.v3-loader__pct { font: 400 .8125rem/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: .1em; color: var(--ivory-2); min-width: 3.5ch; }
@media (prefers-reduced-motion: reduce) { .v3-loader { display: none; } } /* kein Autostart, kein Loader: Poster ist die Bühne, Start nur über die Taste */
/* Pause-Taste: läuft der Film, ist sie nur per Tastaturfokus sichtbar (kein Störelement, aber erreichbar); als Start-Taste (Reduced Motion, Data Saver, blockiert) bleibt sie sichtbar */
/* K13: Pause-Taste dauerhaft sichtbar (s. u.) */
.v3-hero__vbtn { position: absolute; right: var(--gutter); top: calc(var(--header-h) + var(--pbar-h) + 1rem); z-index: 3; color: var(--ivory); border: 1px solid rgba(255,255,255,.6); background: rgba(14,20,18,.3); padding: .5rem .8rem; min-height: 2.75rem; font-size: .875rem; border-radius: 2px; cursor: pointer; }
@media (max-width: 47.99em) { .v3-hero__scrim { background: radial-gradient(ellipse 100% 48% at 50% 46%, rgba(14,20,18,.5) 0, rgba(14,20,18,.24) 55%, rgba(14,20,18,0) 80%), linear-gradient(to bottom, rgba(14,20,18,.66) 0, rgba(14,20,18,.2) 22%, rgba(14,20,18,.1) 46%, rgba(14,20,18,.24) 66%, rgba(14,20,18,.95) 100%); } }
html.js:not(.review-static) .v3-hero__center > * { animation: v3In .9s var(--ease-out) both; } html.js:not(.review-static) .v3-hero__rule { animation-delay: .15s; } html.js:not(.review-static) .v3-hero__claim { animation-delay: .3s; } html.js:not(.review-static) .v3-hero__actions { animation-delay: .45s; } html.js:not(.review-static) .v3-hero__google { animation-delay: .6s; } /* Marke → Strich → Claim → Aktion → Vertrauen, ruhig gestaffelt */
@keyframes v3In { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.v3-sec { padding: var(--s-m) 0 0; } .v3-main > .v3-sec:last-child, .v3-main > .v4-sec:last-child { padding-bottom: var(--s-m); }
.v3-sechead { display: grid; gap: 1rem; justify-items: start; margin-bottom: clamp(1.25rem, 2vw, 2rem); }
.v3-sechead .v3-link { margin-top: .25rem; }

/* Chalets: Interiorgalerie ohne Raumkästen; Wohnen groß mit Text im Bild (Desktop), Räume rechts und darunter; schmale gemeinsame Abstände */
.v3-chalets { padding-top: clamp(.75rem, 1.2vw, 1.25rem); }
.v3-gal { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.v3-gal__item--living { position: relative; }
.v3-gal__copy { display: grid; gap: .8rem; justify-items: start; padding: 1.25rem 0 .5rem; grid-column: 1 / -1; order: -1; }
.v3-gal__h2 { max-width: 22ch; } .v3-gal__text { font-size: var(--fs-body); line-height: 1.5; margin: 0; max-width: 34em; color: var(--ink-2); }
.v3-gal__item--living { grid-column: 1 / -1; }
.v3-gal__link { display: block; color: inherit; text-decoration: none; position: relative; } .v3-gal__fig { position: relative; overflow: hidden; border-radius: 2px; }
.v3-gal__pic img { transition: transform .9s var(--ease-out); } .v3-gal__link:hover .v3-gal__pic img, .v3-gal__link:focus-visible .v3-gal__pic img { transform: scale(1.03); }
.v3-gal .pic { aspect-ratio: var(--ar-m, 3/2); }
@media (min-width: 30em) { .v3-gal .pic { aspect-ratio: 3 / 2; } }
@media (min-width: 64em) {
  .v3-gal { grid-template-columns: repeat(3, 1fr); gap: .875rem; }
  .v3-gal__item--living { grid-column: 1 / 3; grid-row: 1 / 3; display: grid; }
  .v3-gal__item--living .v3-gal__link, .v3-gal__item--living .v3-gal__fig, .v3-gal__item--living .pic { height: 100%; aspect-ratio: auto; }
  .v3-gal__item--living .v3-gal__link { grid-area: 1 / 1; }
  /* Text oben links in der ruhigen Wandfläche: ≈ 420 px breit, 40 px Innenabstand, lokaler Verlauf statt Box; Foto behält seine Helligkeit */
  .v3-gal__copy { grid-area: 1 / 1; align-self: start; justify-self: start; z-index: 2; order: 0; width: min(100%, 27.5rem); padding: 2.5rem 2.5rem 3rem; gap: .9rem; color: var(--ivory); pointer-events: none; }
  .v3-gal__copy > * { pointer-events: auto; }
  /* Wunsch 26.09.: einheitlicher Textgrund auf allen Bildern mit Text (Vorbild Sauna): Verlauf --txt-scrim um die Textecke + weicher Schatten direkt hinter dem Textblock */
  .v3-gal__item--living::before { content: ""; position: absolute; left: 0; top: 0; width: min(100%, 44rem); height: min(100%, 26rem); z-index: 1; pointer-events: none; background: radial-gradient(ellipse 68% 83% at 21% 16%, var(--txt-scrim)); border-radius: 2px 0 0 0; }
  .v3-gal__copy .v3-h2 { font-size: clamp(1.625rem, 1.25rem + 1vw, 2.125rem); color: var(--ivory); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
  .v3-gal__text { color: rgba(255,255,255,.92); font-size: 1.0625rem; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .v3-gal__more { color: var(--ivory); text-decoration-color: rgba(255,255,255,.5); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
}

/* Bühnen (Sauna, Harz): großes Motiv; Harz mit Text darunter, Sauna mit Kopfzeile darüber (Anweisung 24.09.) */
.v3-stage__fig { margin: 0; } .v3-stage__fig .pic { border-radius: 2px; }
.v3-stage__text { display: grid; gap: 1rem; justify-items: start; margin-top: clamp(1.25rem, 2vw, 1.75rem); }
/* Text auf dem Bild (Desktop ab 64em): Block mit lokalem Verlauf, Motiv bleibt hell; auf Mobil normaler Textblock unter dem Bild */
.v3-stage__frame { position: relative; }
.v3-stage__copy { display: grid; gap: .8rem; justify-items: start; padding: clamp(1.25rem, 2vw, 1.75rem) 0 .25rem; }
.v3-stage__p { font-size: var(--fs-body); line-height: 1.5; margin: 0; max-width: 34em; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 64em) {
  .v3-stage__copy { position: absolute; z-index: 2; width: min(100%, 27.5rem); padding: 2.5rem 2.5rem 3rem; gap: .9rem; color: var(--ivory); pointer-events: none; }
  .v3-stage__copy > * { pointer-events: auto; }
  .v3-stage__copy .v3-h2 { font-size: clamp(1.625rem, 1.25rem + 1vw, 2.125rem); color: var(--ivory); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
  .v3-stage__p { color: rgba(255,255,255,.92); font-size: 1.0625rem; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .v3-stage__more { color: var(--ivory); font-size: 1rem; text-decoration-color: rgba(255,255,255,.55); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
  .v3-stage__frame::before { content: ""; position: absolute; z-index: 1; pointer-events: none; width: min(100%, 44rem); height: min(100%, 24rem); border-radius: 2px; }
  /* Sauna: freie Holzwand oben zwischen den beiden Personen (Lampe links, Thermometer rechts bleiben frei) */
  .v3-stage__copy--sauna { left: 0; top: 0; }   /* Wunsch 26.09.: bündig mit „Euer Haus für die Ferien“ (gleiche Kante, gleiche Höhe); Lampe liegt unter dem Textgrund */
  .v3-stage--sauna .v3-stage__frame::before { left: 0; top: 0; background: radial-gradient(ellipse 68% 83% at 21% 16%, var(--txt-scrim)); }
  /* Lage: oben links über Himmel und Baumkante; Autos und Chalets bleiben frei */
  .v3-stage__copy--loc { left: 0; bottom: 0; top: auto; width: min(100%, 38rem); padding-bottom: 2.5rem; }
  .v3-stage--loc .v3-stage__frame::before { left: 0; bottom: 0; top: auto; height: min(100%, 26rem); width: min(100%, 52rem); background: radial-gradient(ellipse 90% 100% at 6% 96%, var(--txt-scrim)); }
  .v3-stage__copy--loc .v3-addr { color: rgba(255,255,255,.94); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .v3-stage__copy--loc .v3-loc__links { gap: .1rem 1.25rem; }
  /* Harz: oben links über dem dunklen Waldufer */
  .v3-stage__copy--harz { left: 0; top: 0; }
  .v3-stage--harz .v3-stage__frame::before { left: 0; top: 0; background: radial-gradient(ellipse 68% 83% at 21% 16%, var(--txt-scrim)); }
  .v3-stage__copy, .v3-gal__copy { isolation: isolate; } .v3-gal__copy { position: relative; }
  .v3-stage__copy::before, .v3-gal__copy::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(14,20,18,.42), rgba(14,20,18,.2) 60%, rgba(14,20,18,0)); }   /* weicher Schatten nur hinter dem Text, keine Kante */
}
/* Master-Auftrag 30.09.: „Vom Wald in die Sauna.“ auf dem Desktop in einer Zeile. Ab etwa 1330 px (Überschrift 33–34 px ≈ 360–368 px breit) reichte der
   Kasten (27,5rem, Innenbreite 360 px) nicht mehr; ab 80em ist nur der Sauna-Kasten 30rem breit (Innenbreite 400 px) – gleiche Schrift, Kante und Höhe.
   Darunter (64–80em) bleibt er 27,5rem: die Überschrift passt dort, und der Text rückt nicht an das Gesicht der Frau im Bild */
@media (min-width: 80em) { .v3-stage__copy--sauna { width: min(100%, 30rem); } }
.v3-stage__head { display: grid; gap: .9rem; margin-bottom: clamp(1.1rem, 1.8vw, 1.75rem); width: min(100%, var(--wrap)); margin-inline: auto; }
.v3-stage__aside { display: grid; gap: .6rem; justify-items: start; }
.v3-stage__fig--wide .pic { aspect-ratio: 16 / 9; max-height: 40rem; } /* breiter Ausschnitt, Fokus auf beide Gesichter (object-position 50 % 42 %) */
@media (min-width: 64em) { .v3-stage__head { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: start; column-gap: 3rem; } .v3-stage__head .v3-h2 { margin: 0; } .v3-stage__aside { gap: .55rem; padding-top: .45rem; } .v3-stage__aside .v3-text { max-width: 28em; } } /* gemeinsame Oberkante: Überschrift links, Kurztext + Link rechts */
.v3-stage--sauna { padding-top: clamp(2rem, 3vw, 3.25rem); }

/* Für euch: sechs gleichwertige 3:2-Kacheln */
.v3-aud__head { position: relative; isolation: isolate; overflow: hidden; border-radius: 2px; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.v3-aud__fig { margin: 0; } .v3-aud__head .pic { display: block; aspect-ratio: 4 / 3; } .v3-aud__head .pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx-d, 50% 42%); filter: saturate(.9) contrast(1.03) brightness(.94); } /* leichter Filter: ruhiger, wärmer */
@media (min-width: 48em) { .v3-aud__head .pic { aspect-ratio: 21 / 9; max-height: 34rem; } }
.v3-aud__head::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 52% 72% at 14% 92%, var(--txt-scrim)); }   /* Wunsch 26.09.: gleicher Textgrund wie Sauna, um die Überschrift unten links */
.v3-aud__copy { position: absolute; z-index: 2; left: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1.1rem, 2.6vw, 2.25rem); right: clamp(1.25rem, 3vw, 2.5rem); }
.v3-aud__h2 { color: var(--ivory); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.75rem); line-height: 1.04; margin: 0; max-width: none; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.v3-aud__copy { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.v3-tile { position: relative; }
/* EU-Basissymbol (Variante black: dunkler Kreis mit weißem AI, Wunsch 24.09.): 32 px Box ≈ 21 px Kreis, waagerecht unten rechts, einheitlicher Abstand; Geometrie und Farben des Originals unverändert */
.v3-ai { position: absolute; right: .5rem; bottom: .5rem; z-index: 3; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: inherit; text-decoration: none; transition: transform .25s var(--ease-out); }
.v3-ai img { display: block; width: 100%; height: 100%; }   /* 01.10. (Johannes): ohne hellen Saum und Schatten – die Kennzeichnung bleibt, leuchtet aber nicht */
.v3-ai:hover, .v3-ai:focus-visible { transform: scale(1.1); }
.v3-ai:focus-visible { outline: 2px solid var(--ivory); outline-offset: 1px; }
.v3-ai--hero { right: var(--gutter); bottom: max(.75rem, env(safe-area-inset-bottom)); } /* Hero-Film: Originalaufnahmen, mit KI bearbeitet */
.v3-stage__frame > .v3-ai { bottom: .6rem; right: .6rem; }
.v3-aud__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 2rem) 1rem; grid-template-columns: 1fr; }
.v3-tile__link { display: grid; gap: .45rem; color: inherit; text-decoration: none; align-content: start; }
.v3-tile__media { display: block; overflow: hidden; border-radius: 2px; } .v3-tile__media .pic { aspect-ratio: 3 / 2; }
.v3-tile__pic img { transition: transform .9s var(--ease-out); } .v3-tile:hover .v3-tile__pic img, .v3-tile:has(.v3-tile__link:focus-visible) .v3-tile__pic img { transform: scale(1.03); }
.v3-tile__frame { position: relative; } .v3-tile__piclink { display: block; }
.v3-tile__title { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; margin-top: .5rem; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color .3s var(--ease); }
.v3-tile:hover .v3-tile__title, .v3-tile__link:focus-visible .v3-tile__title { text-decoration-color: currentColor; }
/* 02.10.2026 (Johannes, Telefon: „beide Zeilen unterstrichen“): Karten mit Aktion unterstreichen nur die Aktion – der Titel nie, auch nicht bei Hover;
   auf Touch-Geräten ohne Hover-Linie (manche Browser halten :hover nach dem Tippen bzw. zeichnen die transparente Linie) */
.v4-xcards .v3-tile__title, .v4-xcards .v3-tile:hover .v3-tile__title, .v4-xcards .v3-tile__link:focus-visible .v3-tile__title { text-decoration: none; }
@media (hover: none) { .v3-tile__title { text-decoration: none; } }
.v3-tile__text { font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); }
@media (min-width: 30em) { .v3-aud__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .v3-aud__grid { grid-template-columns: repeat(3, 1fr); } }
/* 01.10.2026 (Bike-Zielgruppen): 9 Kacheln – am Tablet (2 Spalten) die letzte allein stehende Kachel mittig statt links; Verweiskarten mit Aktion */
@media (min-width: 30em) and (max-width: 63.99em) { .v3-aud__grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .5rem); } }
.v3-tile__cta { justify-self: start; margin-top: .1rem; font-size: .9375rem; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
/* 02.10.2026: Verweiskarten als eigener Abschnitt (v4-xcards; v4-cards gehört den Kontaktkarten): Kopf und Verweise in der Textspalte wie bei
   Duo und Galerie, zwei Karten am Desktop halb/halb statt zwei von drei Spalten */
.v4-xcards__more { width: min(100%, var(--wrap)); margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; } .v4-xcards__more .v4-links { margin: 0; }
@media (min-width: 64em) { .v4-xcards__grid:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Extras: Überschrift über der Sektion, vier Zeilen (Titel · Satz · Pfeil) über die Inhaltsbreite */
.v3-extras .v3-h2 { margin-bottom: clamp(1rem, 1.5vw, 1.5rem); }
.v3-extras__list, .v4-rows__list { list-style: none; margin: 0; padding: 0; } .v3-extras__list li, .v4-rows__list li { border-top: 1px solid var(--line); } .v3-extras__list li:last-child, .v4-rows__list li:last-child { border-bottom: 1px solid var(--line); }
.v3-extras__list a, .v4-rows__row { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: 1.05rem 0; min-height: 3.5rem; text-decoration: none; color: inherit; align-items: center; }
.v3-extras__title, .v4-rows__title { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; }
.v3-extras__text, .v4-rows__text { grid-column: 1; color: var(--ink-2); font-size: var(--fs-body); }
.v3-extras__list .v3-arrow, .v4-rows__row .v3-arrow { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.v3-extras__list a:hover .v3-arrow, .v4-rows__row:hover .v3-arrow { transform: translateX(4px); }
.v3-extras__list a:hover .v3-extras__title, a.v4-rows__row:hover .v4-rows__title { color: var(--ink-2); }
@media (min-width: 64em) { .v3-extras__list a, .v4-rows__row { grid-template-columns: 15rem 1fr auto; padding: 1.15rem 0; } .v3-extras__text, .v4-rows__text { grid-column: 2; } .v3-extras__list .v3-arrow, .v4-rows__row .v3-arrow { grid-column: 3; grid-row: 1; } }

/* Lage: kompakt, Orientierungsbild klein */
.v3-loc__grid { display: grid; gap: 1.5rem; align-items: center; }
.v3-loc__text { display: grid; gap: .9rem; justify-items: start; }
.v3-addr { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.4; display: grid; margin: 0; font-style: normal; }
.v3-loc__links { display: flex; flex-wrap: wrap; gap: .1rem 1.75rem; margin: 0; }
.v3-loc__fig .pic { border-radius: 2px; }
@media (min-width: 64em) { .v3-loc__grid { grid-template-columns: 3fr 2fr; gap: var(--gutter); } }

/* FAQ */
.v3-faq__grid { display: grid; gap: 1rem; }
.v3-faq__item { border-top: 1px solid var(--line); } .v3-faq__item:last-child { border-bottom: 1px solid var(--line); }
.v3-faq__item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; padding: 1rem 0; min-height: 3.25rem; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.3; } .v3-faq__item summary::-webkit-details-marker { display: none; }
.v3-faq__ico { position: relative; width: 1rem; height: 1rem; flex-shrink: 0; }
/* 30.09. (Sprachfassungen): Aufklapp-Symbole stehen immer am Zeilenende – auch wenn eine Übersetzung den Platzhalter vor den Text stellt (EN-Footer „Chalets“) */
.v3-faq__ico, .v3-mfoot__chev, .v3-mnav__chev, .v4-plan__allsum > svg { order: 2; } .v3-faq__ico::before, .v3-faq__ico::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: currentColor; transition: transform .35s var(--ease); } .v3-faq__ico::after { transform: rotate(90deg); } .v3-faq__item[open] .v3-faq__ico::after, details[open] > summary .v3-faq__ico::after { transform: rotate(0); }
.v3-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); } .v3-faq__item[open] .v3-faq__a { grid-template-rows: 1fr; }
.v3-faq__a > p { overflow: hidden; color: var(--ink-2); max-width: 40em; margin: 0; } .v3-faq__item[open] .v3-faq__a > p { padding-bottom: 1rem; } .v3-faq__a a { text-decoration: underline; text-underline-offset: .2em; }
html.review-static .v3-faq__a { grid-template-rows: 1fr; } html.review-static .v3-faq__a > p { padding-bottom: 1rem; }
@media (min-width: 64em) { .v3-faq__grid { grid-template-columns: 2fr 3fr; gap: var(--gutter); align-items: start; } }
/* Wunsch 26.09.: Bild in der linken Spalte (z. B. Massagen) – füllt die Fläche unter Überschrift und Text; auf Telefon und Tablet ausgeblendet */
.v3-faq__media { display: none; }
.v3-faq--media .v4-links { display: grid; justify-items: start; gap: 0; }   /* Verweise untereinander */
@media (min-width: 64em) { .v4-sec--media.v4-sec--top .v4-text { align-items: start; } }   /* Text oben bündig mit dem Bild */
@media (min-width: 64em) { .v3-faq__media { display: block; margin-top: clamp(1.25rem, 2vw, 2rem); max-width: 26rem; } .v3-faq__fig { margin: 0; position: relative; } .v3-faq__media .pic { display: block; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; } .v3-faq__media .pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx-d, 50% 45%); } }
/* C07/C08 (26.09.): Angebotszeilen – Name und Zeitrahmen/Preis geschlossen sichtbar, Beschreibung und Varianten aufgeklappt */
.v3-faq__q { display: grid; gap: .2rem; } .v3-faq__meta { font-family: var(--font-sans); font-size: .875rem; line-height: 1.35; letter-spacing: .01em; color: var(--ink-3); }
.v3-faq__in { overflow: hidden; max-width: 40em; } .v3-faq__item[open] .v3-faq__in { padding-bottom: 1rem; } .v3-faq__in > p { margin: 0; color: var(--ink-2); }
.v3-faq__vars { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: 0; font-variant-numeric: tabular-nums; }
.v3-faq__vars li { padding: .35rem 0; border-top: 1px solid var(--line); } .v3-faq__vars li:first-child { border-top: 0; padding-top: 0; }
html.review-static .v3-faq__in { padding-bottom: 1rem; }
/* C10 (26.09.): Touren nach Gehzeit – einfache Auswahl (nur belegte Kategorien, erst mit JS sichtbar), ruhige Liste mit Weg-/Uhr-/Geländesymbol */
.v4-tours__filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; } .v4-tours__filter[hidden] { display: none; }
.v4-tours__chip { min-height: 2.75rem; padding: .5rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 4px; color: inherit; font: 600 .9375rem/1.2 var(--font-sans); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.v4-tours__chip:hover, .v4-tours__chip:focus-visible { border-color: var(--night); } .v4-tours__chip:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
.v4-tours__chip[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: var(--ivory); }
.v4-tours__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.v4-tour { display: grid; gap: .45rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); } .v4-tour[hidden] { display: none; }
.v4-tour__h { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 400; line-height: 1.3; }
.v4-tour__h a { color: inherit; text-decoration: none; } .v4-tour__h a:hover, .v4-tour__h a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.v4-tour__text { margin: 0; max-width: 42em; color: var(--ink-2); }
.v4-tour__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; font-family: var(--font-sans); font-size: .9375rem; }
.v4-tour__facts li { display: inline-flex; align-items: center; gap: .45rem; } .v4-tour__facts svg { flex: none; color: var(--ink-3); }
.v4-tour__start { margin: 0; font-size: .9375rem; color: var(--ink-3); }
@media (min-width: 64em) { .v4-tour { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); column-gap: var(--gutter); } .v4-tour__h, .v4-tour__text { grid-column: 1; } .v4-tour__facts { grid-column: 2; grid-row: 1; align-self: end; } .v4-tour__start { grid-column: 2; grid-row: 2; } }

/* ---------- 3 Unterseiten (v4-) ---------- */
.v4-sec { padding: var(--s-m) 0 0; }
.v4-hero { position: relative; min-height: clamp(22rem, 58svh, 36rem); display: grid; align-items: end; color: var(--ivory); background: var(--night); isolation: isolate; }
.v4-hero__media { position: absolute; inset: 0; margin: 0; z-index: 0; overflow: hidden; }
.v4-hero__media .pic { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; } .v4-hero__pic img { width: 100%; height: 100%; object-fit: cover; }
.v4-hero > .v3-ai { z-index: 3; right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); bottom: 1rem; }   /* D01: über dem Verlauf statt darunter */
.v4-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(14,20,18,.45) 0, rgba(14,20,18,.06) 30%, rgba(14,20,18,0) 45%), linear-gradient(to top, rgba(14,20,18,.86) 0, rgba(14,20,18,.55) 32%, rgba(14,20,18,0) 66%); }
.v4-hero__in { position: relative; z-index: 2; display: grid; gap: .9rem; justify-items: start; padding: calc(var(--header-h) + var(--pbar-h) + 3rem) 0 2.25rem; }
.v4-hero__h1 { font-family: var(--font-serif); font-size: var(--fs-h1); line-height: 1.08; margin: 0; max-width: 20ch; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.v4-hero__lead { font-size: var(--fs-lead); line-height: 1.5; margin: 0; max-width: 34em; color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.v4-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.v4-hero--plain { background: var(--ivory); color: var(--ink); min-height: 0; align-items: start; }
.v4-hero--plain .v4-hero__in { padding: calc(var(--header-h) + var(--pbar-h) + 2rem) 0 0; }
.v4-hero--plain .v4-hero__h1 { text-shadow: none; max-width: 24ch; } .v4-hero--plain .v4-hero__lead { color: var(--ink-2); text-shadow: none; }
.v4-hero--plain .v4-crumbs, .v4-hero--plain .v4-eyebrow { color: var(--ink-3); }
@media (min-width: 64em) { .v4-hero:not(.v4-hero--plain) { min-height: clamp(26rem, 62svh, 40rem); } .v4-hero:not(.v4-hero--plain) .v4-hero__in { padding-bottom: clamp(2.5rem, 5vh, 4rem); } }
.v4-hero:not(.v4-hero--plain) .v4-crumbs { color: rgba(255,255,255,.85); }
.v4-hero:not(.v4-hero--plain) .v4-eyebrow { color: rgba(255,255,255,.75); }
/* Text (+ Bild) */
.v4-text { display: grid; gap: 1.5rem; }
.v4-text__body { display: grid; gap: 1rem; justify-items: start; max-width: 40rem; }
.v4-text__body .v3-h2 { max-width: 24ch; }
.v4-text__fig .pic { border-radius: 2px; }
@media (min-width: 64em) { .v4-sec--media .v4-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: center; } .v4-sec--left .v4-text__fig { order: -1; } }
/* Galerie mit Gruppen */
.v4-gal__group { margin-top: 1.75rem; } .v4-gal .v3-sechead + .v4-gal__group { margin-top: 0; }
.v4-gal__label { font-family: var(--font-sans); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); margin: 0 0 .75rem; }
.v4-gal__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.v4-gal__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.v4-gal__btn .pic { aspect-ratio: 3 / 2; border-radius: 2px; }
.v4-gal__btn .pic img { transition: transform .9s var(--ease-out); } .v4-gal__btn:hover .pic img, .v4-gal__btn:focus-visible .pic img { transform: scale(1.03); }
@media (min-width: 48em) { .v4-gal__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .v4-gal__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
/* Tabellen */
.v4-tbl__grid { display: grid; gap: 1.5rem; } .v4-tbl__grid > div:first-child { display: grid; gap: 1rem; justify-items: start; }
@media (min-width: 64em) { .v4-tbl__grid { grid-template-columns: 2fr 3fr; gap: var(--gutter); align-items: start; } }
.v4-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: 1.5; }
.v4-table th, .v4-table td { text-align: left; vertical-align: top; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.v4-table thead th { font-family: var(--font-sans); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); padding: 0 0 .5rem; }
.v4-table tbody th { font-weight: 600; width: 36%; padding-right: 1rem; } .v4-table td { color: var(--ink-2); }
.v4-table--status { display: block; overflow-x: auto; font-size: .9375rem; } .v4-table--status th, .v4-table--status td { padding: .6rem .75rem .6rem 0; min-width: 10rem; }
/* Zeilen, Chips */
.v4-rows__grid { display: grid; gap: 1.5rem; } .v4-rows__fig .pic { border-radius: 2px; }
@media (min-width: 64em) { .v4-rows--media .v4-rows__grid { grid-template-columns: 3fr 2fr; gap: var(--gutter); align-items: start; } }
.v4-rows .v4-note, .v4-rows .v4-actions, .v4-rows .v4-links { margin-top: 1rem; }
.v4-chips__list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; }
.v4-chips__list li { border: 1px solid var(--line); border-radius: 2px; padding: .55rem .85rem; font-size: .9375rem; line-height: 1.3; }
/* Kontakt, Anreise, Karte */
/* Kontaktblock (24.09.): Karten statt großer Serif-Zeilen; mit Adresse und Karte auf /kontakt/, ohne auf den Infoseiten */
.v4-contact .v3-sechead { margin-bottom: 1.25rem; }
.v4-contact__grid { display: grid; gap: 1rem; }
@media (min-width: 64em) { .v4-contact--map .v4-contact__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gutter); align-items: stretch; } }
.v4-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; align-content: start; }
@media (min-width: 40em) { .v4-contact:not(.v4-contact--map) .v4-cards { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); max-width: 52rem; } }
.v4-card { display: grid; gap: .35rem; align-content: start; padding: 1.25rem 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
@media (min-width: 64em) { .v4-contact--map .v4-cards { height: 100%; grid-template-rows: repeat(3, minmax(0, 1fr)); } .v4-contact--map .v4-card { align-content: center; } }
.v4-card__k { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-card__v { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); line-height: 1.25; color: inherit; text-decoration: none; width: fit-content; overflow-wrap: anywhere; }
.v4-card__v--mail { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }
a.v4-card__v:hover { text-decoration: underline; text-underline-offset: .2em; }
.v4-card__addr { display: grid; font-style: normal; margin: 0; }
.v4-card__s { font-size: .9rem; color: var(--ink-2); } .v4-card__s a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
/* C02 (26.09.): weitere E-Mail-Adressen (Allgemein, Reservierung, Presse) als schlanke, beschriftete Zeilen unter den Kontaktkarten */
.v4-contact__lines { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 2.25rem; font-size: .9375rem; color: var(--ink-2); }
.v4-contact__lines li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6rem; min-width: 0; }
.v4-contact__lk { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-contact__lines a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
/* K02: .v4-map (später definiert) setzte aspect-ratio 4/3 zurück → bei voller Kartenhöhe 798 px Breite in 727-px-Spalte; höhere Spezifität + Spaltenbreite */
.v4-map.v4-contact__map { aspect-ratio: auto; min-height: 20rem; width: 100%; max-width: 100%; }
.v4-contact__grid > * { min-width: 0; }
@media (min-width: 64em) { .v4-contact__map { height: 100%; } }
/* Kontaktseite: engere Abschnittsabstände */
.page--contact .v4-sec { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
/* Formular (24.09.): ruhige, moderne Felder */
.v4-form__alt { margin: 0; font-size: .9375rem; color: var(--ink-2); } .v4-form__alt a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.v4-iform { gap: 1.1rem; }
.v4-iform .field { gap: .35rem; } .v4-iform .field label { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); } .v4-iform .field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.v4-iform .field input, .v4-iform .field select, .v4-iform .field textarea { min-height: 3.1rem; padding: .7rem .9rem; font-size: 1rem; border: 1px solid rgba(14,20,18,.5); border-radius: 4px; background: #fff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.v4-iform .field input:focus, .v4-iform .field select:focus, .v4-iform .field textarea:focus { outline: none; border-color: var(--night); box-shadow: 0 0 0 3px rgba(14,20,18,.12); }
.v4-iform .field textarea { min-height: 7.5rem; }
.v4-iform .field--date.is-empty::after { bottom: .9rem; font-size: 1rem; }
.v4-iform .field__row { gap: 1rem; }
.v4-iform .iform__more summary { padding: .75rem 0; font-size: .9375rem; }
.v4-iform .iform__more .iform__moregrid { gap: 1rem; padding-bottom: 1.25rem; }
.v4-iform .iform__privacy { font-size: .875rem; }
.v4-iform .iform__actions .v3-btn { border-radius: 4px; }
.v4-addr__grid { display: grid; gap: 1.5rem; } .v4-addr__grid > div:first-child { display: grid; gap: 1rem; justify-items: start; }
@media (min-width: 64em) { .v4-addr__grid { grid-template-columns: 2fr 3fr; gap: var(--gutter); align-items: start; } }
.v4-map { position: relative; aspect-ratio: 4 / 3; min-height: 16rem; background: #fff; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }   /* D07 (27.09.): weiß statt Beige (Entscheidung „keine beigen Flächen“) */
.v4-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v4-map__gate { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); }
.v4-map__gate[hidden] { display: none; } .v4-map__gate p { margin: 0; max-width: 30em; } .v4-map__actions { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
/* Formular */
.v4-form__grid { display: grid; gap: 1.5rem; } .v4-form__grid > div:first-child { display: grid; gap: 1rem; }
@media (min-width: 64em) { .v4-form__grid { grid-template-columns: 2fr 3fr; gap: var(--gutter); align-items: start; } }
.v3-root .field label { font-size: .9375rem; } .v3-root .field input, .v3-root .field select, .v3-root .field textarea { background: #fff; border-color: rgba(14,20,18,.5); font-size: 1rem; min-height: 3.25rem; }   /* D05 (27.09.): Feldgrenze ≈ 3,4:1 zu Elfenbein (vorher ≈ 1,5:1) */
.v3-root .field { scroll-margin-top: calc(var(--header-h) + var(--pbar-y, var(--pbar-h, 0px)) + 1.5rem); }   /* Fehlerfeld samt Beschriftung unter der festen Kopfzeile */
.v3-root .field input:focus, .v3-root .field select:focus, .v3-root .field textarea:focus { outline: 3px solid var(--night); outline-offset: 2px; }
.v3-root .iform__privacy, .v3-root .iform__note { font-size: .9375rem; }
.v4-iform__more summary { font-size: .9375rem; }
.v4-iform__success { border: 1px solid var(--ok); padding: 1.25rem 1.5rem; color: var(--ok); font-size: var(--fs-body); }
.v4-iform__success p { margin: 0; }
/* Angebote, Webcam, Buchung */
.v4-offers__empty { font-family: var(--font-serif); font-size: var(--fs-h3); max-width: 30em; color: var(--ink); }
.v4-offers__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; } .v4-offer { display: grid; gap: 1rem; justify-items: start; padding: 1.5rem; border: 1px solid var(--line); border-radius: 2px; }
.v4-webcam__status { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.3; margin: 0 0 1rem; max-width: 26em; }
/* /buchen/ neu (Wunsch Johannes 27.09.): ruhige Leiste „Auf einen Blick“ unter dem Bild-Hero (ersetzt die mitlaufende Spalte D07) */
.v4-book { padding-top: clamp(1.75rem, 3vw, 2.75rem); }
@media (min-width: 64em) { .page--booking .v4-hero:not(.v4-hero--plain) { min-height: min(88svh, 56.25vw); } }   /* Bild-Hero hoch genug, damit die Köpfe der Familie frei bleiben */
.v4-book__panel { display: grid; gap: 1.1rem; padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); border-bottom: 1px solid var(--line); }
.v4-book__h { margin: 0; font-family: var(--font-sans); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-book__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr)); grid-auto-flow: row dense; gap: 1rem 1.5rem; margin: 0; }   /* 27.09. abends: Spalten nach Schriftgröße – normal zwei, bei großer Schrift eine (kein „Reservierun|g“) */
.v4-book__fact dt { margin: 0 0 .2rem; font-size: .8125rem; font-weight: 600; color: var(--ink-3); }
.v4-book__fact dd { margin: 0; font-size: 1.0625rem; line-height: 1.4; font-weight: 500; color: var(--ink); }
.v4-book__fact:nth-child(4) { grid-column: 1 / -1; }
@media (min-width: 48em) { .v4-book__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v4-book__fact:nth-child(4) { grid-column: auto; } }
@media (min-width: 64em) { .v4-book__facts { grid-template-columns: auto auto minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; }   /* 27.09. abends: sechs Fakten (mit Endreinigung) in einer Zeile */
  .v4-book__fact { padding: 0 clamp(1rem, 2vw, 2rem); border-left: 1px solid var(--line); } .v4-book__fact:first-child { padding-left: 0; border-left: 0; } }
.v4-book__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2rem; }
.v4-book__meta .v4-note { margin: 0; }
/* Tarife am Desktop/Tablet als Vergleichskarten (gleiche Angaben wie die Aufklapper am Telefon); Überschrift über den Karten */
.v4-tbl--cards .v4-tbl__grid { grid-template-columns: 1fr; }
.v4-tbl--cards .v4-tbl__grid > div:first-child .v3-text { max-width: 44em; }
.v4-tcards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); margin-bottom: 1.25rem; }
@media (min-width: 64em) { .v4-tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.v4-tcard { display: flex; flex-direction: column; gap: .45rem; padding: 1.25rem 1.35rem 1.3rem; border: 1px solid var(--line); border-top: 2px solid var(--night); background: rgba(255,255,255,.4); }
.v4-tcard__label { margin: 0; font-size: .875rem; font-weight: 600; color: #6f5219; }   /* Kennzeile ruhig, keine Werbe-Plakette (Bezugsgröße F03 bleibt in der Freigabeliste) */
.v4-tcard__h { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; font-weight: 400; text-wrap: balance; }
.v4-tcard__book { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.v4-tcard__k { margin: .45rem 0 0; font-size: .8125rem; font-weight: 600; color: var(--ink-3); }
.v4-tcard__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.v4-tcard__steps li { position: relative; padding-left: .95rem; } .v4-tcard__steps li::before { content: ""; position: absolute; left: 0; top: .62em; width: .3rem; height: .3rem; border-radius: 50%; background: var(--ink-3); }
.v4-tcard__pay { margin: auto 0 0; padding-top: .75rem; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.45; color: var(--ink-2); } .v4-tcard__pay .v4-tcard__k { margin: 0 .3rem 0 0; }
.v4-book__cta, .v4-book__fallback { margin: 0; } .v4-book__status { margin: 0; font-weight: 600; } .v4-book__status[hidden] { display: none; }
.v4-book__fallback a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }
.v4-book .v4-note a { text-decoration: underline; text-underline-offset: .2em; }
/* Pläne (Pilot): Grundrisse und Lageplan */
.v4-plans__grid { display: grid; gap: 2rem; }
@media (min-width: 64em) { .v4-plans__grid { grid-template-columns: 1fr 1fr; gap: var(--gutter); } }
.v4-plan { display: grid; gap: 1rem; align-content: start; }
.v4-plan__title { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; margin: 0; }
/* Wunsch 26.09.: Geschoss-Titel als dunkle Kopfleiste über dem Plan – hebt Erdgeschoss/Obergeschoss hervor, Ebene rechts */
.v4-plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem 1rem .7rem; background: var(--night); color: var(--ivory); border-radius: 2px; }
.v4-plan__head .v4-plan__title { color: var(--ivory); } .v4-plan__lvl { font-size: .75rem; font-weight: 600; letter-spacing: .12em; color: var(--ivory-3); font-variant-numeric: tabular-nums; }
.v4-plan__zoom { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); background: #fff; border-radius: 2px; cursor: zoom-in; text-align: left; }
.v4-plan__zoom img { display: block; width: 100%; height: auto; }
.v4-plan__hint { position: absolute; right: .75rem; bottom: .75rem; font-family: var(--font-sans); font-size: .8125rem; font-weight: 600; background: rgba(255,255,255,.95); color: var(--ink); padding: .3rem .6rem; border-radius: 2px; }
.v4-plan__rooms { list-style: none; margin: 0; padding: 0; display: grid; font-size: .9375rem; }
.v4-plan__rooms li { display: grid; grid-template-columns: 2rem 1fr auto; gap: .5rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.v4-plan__num { font-weight: 600; color: var(--ink-3); } .v4-plan__meta { color: var(--ink-2); text-align: right; }
.v4-siteplan__grid { display: grid; gap: 1.5rem; }
@media (min-width: 64em) { .v4-siteplan__grid { grid-template-columns: 3fr 2fr; gap: var(--gutter); align-items: start; } }
.v4-siteplan__zoom picture, .v4-siteplan__zoom img { display: block; width: 100%; height: auto; }
.v4-siteplan__text .v4-h3:first-child { margin-top: 0; }
.v4-chalets { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; font-size: .9375rem; }
.v4-chalets li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.v4-chalets__id { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; } .v4-chalets__num { color: var(--ink-3); } .v4-chalets__acc { flex-basis: 100%; font-size: .8125rem; color: var(--ink-2); }
.v4-dist__label { font-family: var(--font-sans); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); margin: .75rem 0 .25rem; }
.v4-dist { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; margin: 0; font-size: .9375rem; } .v4-dist div { display: contents; } .v4-dist dt { color: var(--ink-2); } .v4-dist dd { margin: 0; font-weight: 600; }
/* Rechtstexte */
.v4-legal { padding: var(--s-m) 0; }
.v4-legal__grid { display: grid; gap: 1.5rem; }
.v4-legal__grid--single { grid-template-columns: minmax(0, 44rem); }
@media (min-width: 64em) { .v4-legal__grid { grid-template-columns: 17rem minmax(0, 44rem); gap: 4rem; justify-content: start; } .v4-legal__toc { position: sticky; top: calc(var(--header-h) + var(--pbar-y, var(--pbar-h)) + 1.5rem); align-self: start; max-height: calc(100svh - var(--header-h) - var(--pbar-y, var(--pbar-h)) - 3rem); overflow: auto; } }
.v4-legal__tocbox { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v4-legal__tocbox summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3rem; padding: .5rem 0; font-size: .9375rem; font-weight: 600; } .v4-legal__tocbox summary::-webkit-details-marker { display: none; }
.v4-legal__toc ol { list-style: none; margin: 0; padding: .25rem 0 .75rem; display: grid; gap: .05rem; }
.v4-legal__toc a { display: block; padding: .45rem 0; font-size: .9375rem; line-height: 1.35; color: var(--ink-2); text-decoration: none; } .v4-legal__toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
@media (min-width: 64em) { .v4-legal__tocbox { border: 0; } .v4-legal__tocbox summary { pointer-events: none; min-height: 0; padding: 0 0 .5rem; color: var(--ink-3); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; } .v4-legal__tocbox summary .v3-faq__ico { display: none; } }
.v4-legal__stand { font-size: .875rem; color: var(--ink-3); margin: 0 0 1.25rem; }
.v4-prose { font-size: var(--fs-body); line-height: 1.6; max-width: 44rem; overflow-wrap: anywhere; }
.v4-prose h2 { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; font-weight: 400; margin: 2.5rem 0 .9rem; }
.v4-prose h2:first-child { margin-top: 0; } .v4-prose h3 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; margin: 1.75rem 0 .5rem; }
.v4-prose p { margin: 0 0 1em; } .v4-prose ul { padding-left: 1.25rem; margin: 0 0 1em; } .v4-prose li { margin: 0 0 .35em; }
.v4-prose a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; word-break: break-word; }
/* Wunsch 26.09.: Gestaltungsnachweis im Impressum mit der echten WEBWUNDER-Wortmarke (dunkel, roter Punkt); das Logo ist der Link, ein feiner Pfeil links davon */
.v4-prose .v4-legal__credit a { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; text-decoration: none; }
.v4-legal__ww { display: block; height: 1.125rem; width: auto; }
.v4-legal__arrow { flex: none; width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.v4-prose .v4-legal__credit a:hover .v4-legal__arrow, .v4-prose .v4-legal__credit a:focus-visible .v4-legal__arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .v4-legal__arrow { transition: none; } }

/* Wunsch 26.09.: Bildbänder zwischen „Gut zu wissen“, Newsletter und Partnerresort – breit und ruhig, gleiche Kanten wie die Bühnen */
.v3-band__fig { margin: 0; } .v3-band .pic { display: block; aspect-ratio: 21 / 9; max-height: 36rem; border-radius: 2px; overflow: hidden; }
.v3-band .pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx-d, 50% 55%); }
/* Gutschein-Hinweis der Startseite (Wunsch Johannes 27.09.): langes, flaches Bildband (3:1) nach den Gästestimmen – Text links auf dem dunklen
   Bildrand mit leichtem Verlauf, Link zur Gutscheinseite, KI-Zeichen unten rechts */
.v3-gift { padding-block: clamp(1.25rem, 2.5vw, 2.25rem); }
.v3-gift__in { position: relative; overflow: hidden; border-radius: 2px; }
.v3-gift__fig { margin: 0; } .v3-gift .pic { display: block; aspect-ratio: 3 / 1; min-height: 17rem; max-height: 34rem; }
.v3-gift .pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx-d, 58% 58%); }
.v3-gift__in::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(14,20,18,.55) 0, rgba(14,20,18,.3) 32%, rgba(14,20,18,0) 58%); }
.v3-gift__copy { position: absolute; z-index: 2; top: 0; bottom: 0; left: clamp(1.5rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; width: min(31rem, 44%); color: var(--ivory); }   /* senkrecht mittig (Einblendung liegt am inneren Block); 30.09.: 31rem – „Verschenkt gemeinsame Zeit.“ einzeilig */
.v3-gift__h { margin: 0 0 .5rem; max-width: none; color: var(--ivory); font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.v3-gift__t { margin: 0 0 .5rem; font-size: var(--fs-body); line-height: 1.5; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.v3-gift__cta { margin: 0; }
.v3-gift__in > .v3-fig .v3-ai, .v3-gift .v3-ai { z-index: 3; }
/* ---------- Gästestimmen (Auftrag + Nachträge 26.09.2026): ruhige Bewertungszeile, „Hier will man wieder hin.“; je Stimme nur goldene Sterne,
   kurzes Originalzitat und Name mit feinem Plus – die ganze Stimme öffnet die Detailansicht. Mit JavaScript ein ruhig durchlaufendes Band
   (.is-band), ohne JavaScript eine waagerecht scrollbare Reihe. Keine Kästen: warme Fläche der Seite, feine Linie über jeder Stimme ---------- */
.v4-rev { --rev-gap: clamp(1.5rem, 2.6vw, 2.5rem); --rev-star: #D9A12E; }
.v4-rev__head { margin-bottom: clamp(1.1rem, 2vw, 1.5rem); }
.v4-rev__score { margin: -.55rem 0 -.1rem; font-size: .9375rem; line-height: 1.4; }   /* Wunsch 26.09.: ganze Zeile ist der Link zu allen Bewertungen */
.v4-rev__score-a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; min-height: 2.75rem; color: var(--ink-2); text-decoration: none; }
.v4-rev__glogo { display: block; flex: none; width: 1.05rem; height: 1.05rem; margin-right: -.1rem; }   /* Wunsch 26.09.: offizielles Google-„G“ statt des Wortes (Wort bleibt für Screenreader) */
.v4-rev__score-a .v3-ext { margin-left: -.3rem; font-size: .8125rem; transition: transform .25s var(--ease-out); }
.v4-rev__score-a:hover .v4-rev__score-t, .v4-rev__score-a:focus-visible .v4-rev__score-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.v4-rev__score-a:hover .v3-ext, .v4-rev__score-a:focus-visible .v3-ext { transform: translate(2px, -2px); }
.v4-rev__score-a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.v4-rev__score-stars { display: inline-flex; gap: .14rem; color: var(--rev-star); line-height: 0; } .v4-rev__score-stars svg { width: .95rem; height: .95rem; }   /* Wunsch 26.09.: goldene Sterne vor der Gesamtwertung wie im Footer */
.v4-rev__score-v { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.v4-rev__rail { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.v4-rev__track { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--rev-gap)) / 3); align-items: start; gap: var(--rev-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.v4-rev__track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.v4-rev__item { position: relative; scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--line); transition: border-color .2s var(--ease); }   /* sr-only-Texte bleiben im Band; Bezug der Klickfläche */
.v4-rev__stars { display: flex; gap: .2rem; margin: 0; color: var(--rev-star); line-height: 0; }
.v4-rev__stars svg { width: 1rem; height: 1rem; }
.v4-rev__quote { margin: 0; font-family: var(--font-serif); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.5; color: var(--ink); }
.v4-rev__quote p { margin: 0; text-wrap: pretty; }
.v4-rev__foot { display: flex; align-items: center; justify-content: flex-start; gap: .1rem; min-height: 1.5rem; }
.v4-rev__who { min-width: 0; margin: 0; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
/* ↗ direkt hinter dem Namen (Wunsch 26.09.): zeigt an, dass sich die Stimme öffnen lässt; auch auf Touch sichtbar. Knopf 44 px hoch, die
   Klickfläche reicht über die ganze Stimme */
.v4-rev__open, .v4-rev__src { flex: none; display: inline-flex; align-items: center; height: 2.75rem; margin: -.625rem 0; padding: 0 .4rem 0 .3rem; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: .9375rem; line-height: 1; text-decoration: none; cursor: pointer; }
.v4-rev__open::after, .v4-rev__src::after { content: ""; position: absolute; inset: 0; }
.v4-rev__open[hidden], .v4-rev__src[hidden] { display: none; }
.v4-rev__arrow { display: block; font-size: .875rem; transition: transform .25s var(--ease-out); }
@media (hover: hover) {
  .v4-rev__item:hover { border-top-color: rgba(14,20,18,.55); }
  .v4-rev__item:hover .v4-rev__open, .v4-rev__item:hover .v4-rev__src { color: var(--ink); }
  .v4-rev__item:hover .v4-rev__arrow { transform: translate(2px, -2px); }
}
.v4-rev__open:focus-visible, .v4-rev__src:focus-visible { outline: none; }
.v4-rev__open:focus-visible::after, .v4-rev__src:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 3px; }
.v4-rev__item:has(:focus-visible) { border-top-color: var(--ink); }
/* Unter dem Band rechts nur Pfeil links/rechts (Wunsch 26.09.: „Alle Bewertungen“ steckt in der Bewertungszeile oben) */
.v4-rev__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: clamp(.6rem, 1.2vw, .9rem); }
/* 30.09.: Hinweis „Aus dem Deutschen übersetzt“ nur auf den Sprachfassungen (das Zitat ist dort übersetzt, kein Wortlaut mehr) */
.v4-rev__tr { display: none; margin: .35rem 0 0; font-size: .8125rem; line-height: 1.35; color: var(--ink-3); } html:not([lang|="de"]) .v4-rev__tr { display: block; }
html:not([lang|="de"]) .v4-rev__quote:has([lang="de"]) + .v4-rev__tr { display: none; }   /* Sicherung (30.09. abends): Hinweis „übersetzt“ nur, wenn das Zitat wirklich übersetzt ist (Rückfall markiert lang="de") */
.v4-rev__ask { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 0; font-size: .9375rem; color: var(--ink-2); }   /* Wunsch 26.09.: ruhige zweite Einladung, keine Gegenleistung */
.v4-rev__write { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; font-size: .9375rem; font-weight: 600; color: var(--ink); text-decoration: none; text-underline-offset: .25em; text-decoration-thickness: 1px; }   /* Wunsch 26.09.: ohne Box, nur Text mit ↗ */
.v4-rev__write:hover, .v4-rev__write:focus-visible { text-decoration: underline; }
.v4-rev__write .v3-ext { font-size: .8125rem; transition: transform .25s var(--ease-out); } .v4-rev__write:hover .v3-ext, .v4-rev__write:focus-visible .v3-ext { transform: translate(2px, -2px); }
.v4-rev__write:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.v4-rev__ctrl { display: flex; align-items: center; gap: .25rem; margin-left: auto; margin-right: -.8rem; } .v4-rev__ctrl[hidden] { display: none; }
.v4-rev__nav { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease); }
.v4-rev__nav svg { display: block; width: 1.125rem; height: 1.125rem; }
@media (hover: hover) { .v4-rev__nav:hover { color: var(--ink); background: rgba(14,20,18,.06); } }
.v4-rev__nav:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; color: var(--ink); }
.v4-revdlg__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Band (mit JavaScript): ein Streifen, der langsam nach links läuft; Kopien davor und dahinter für den nahtlosen Umlauf (aria-hidden, ohne
   Tabstopps); Rand weich ausgeblendet. Ziehen mit der Maus zwischen den Stimmen, Klick auf eine Stimme öffnet sie. */
.v4-rev.is-band .v4-rev__viewport { overflow: hidden; padding: 6px 0 10px; margin: -6px 0 -10px; touch-action: pan-y; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%); }
/* 05.10.2026 (Sichttest Retina-Desktop): die Blende liegt im Seitenrand statt über der ersten Stimme – das ruhende Band (Start, Maus, Fokus, Pfeile,
   reduzierte Bewegung) zeigt die linke Stimme ungeschnitten auf der Textkante; Telefon hat eine eigene Regel (v3-mobile.css) */
@media (min-width: 48em) { .v4-rev.is-band .v4-rev__viewport { padding-inline: 1.25rem; margin-inline: -1.25rem; } }
.v4-rev.is-band .v4-rev__track { display: flex; overflow: visible; scroll-snap-type: none; width: 100%; transform: translate3d(0, 0, 0); will-change: transform; user-select: none; -webkit-user-select: none; }
.v4-rev.is-band .v4-rev__item { flex: 0 0 calc((100% - 2 * var(--rev-gap)) / 3); }
.v4-rev.is-dragging .v4-rev__viewport, .v4-rev.is-dragging .v4-rev__open::after { cursor: grabbing; }
.v4-rev.is-band .v4-rev__src { -webkit-user-drag: none; }
@media (min-width: 48em) and (max-width: 63.99em) { .v4-rev__track { grid-auto-columns: calc((100% - var(--rev-gap)) / 2); } .v4-rev.is-band .v4-rev__item { flex-basis: calc((100% - var(--rev-gap)) / 2); } }
/* Wunsch Johannes 27.09.: Stimmenband und Steuerzeile am Desktop so breit wie die Bildbänder der Seite (v3-wide); Überschrift bleibt wie überall auf der Textkante */
@media (min-width: 64em) { .v4-rev .v4-rev__head, .v4-rev .v4-rev__rail, .v4-rev .v4-rev__end, .v4-rev .v4-rev__ig { width: min(100% - 2 * var(--gutter), var(--wide)); } }   /* 27.09.: Kopf (4,9 · Überschrift) bündig mit dem breiteren Band */
.v4-revdlg { width: min(40rem, calc(100% - 2.5rem)); max-height: min(86vh, 46rem); padding: 0; border: 0; border-radius: 4px; background: var(--ivory); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; }
.v4-revdlg[open] { display: flex; flex-direction: column; animation: v4RevIn .22s var(--ease-out); }
.v4-revdlg::backdrop { background: rgba(14,20,18,.62); animation: v4RevFade .22s var(--ease-out); }
@keyframes v4RevIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes v4RevFade { from { opacity: 0; } }
.v4-revdlg__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .2rem 1rem; padding: 1.4rem 1.5rem 1.1rem; border-bottom: 1px solid var(--line); }
.v4-revdlg__kicker { margin: 0 0 .25rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.v4-revdlg__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 1.625rem; line-height: 1.2; }
.v4-revdlg__title:focus { outline: none; }
.v4-revdlg__stars { margin-top: .5rem; }
.v4-revdlg__close { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid rgba(14,20,18,.28); border-radius: 4px; background: transparent; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.v4-revdlg__close:hover { border-color: var(--ink); }
.v4-revdlg__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.2rem 1.5rem 1.4rem; font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.6; }
.v4-revdlg__body p { margin: 0 0 .85em; } .v4-revdlg__body p:last-child { margin-bottom: 0; }
.v4-revdlg__body:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.v4-revdlg__foot { display: grid; justify-items: start; gap: .2rem; padding: .7rem 1.5rem 1.2rem; border-top: 1px solid var(--line); }
.v4-revdlg__hint { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }
html.hk-dialog-open { overflow: hidden; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { .v4-revdlg[open], .v4-revdlg::backdrop { animation: none; } }

/* ---------- 4 Consent-Banner: kompakt (Desktop unten links), Sheet mobil; drei gleichwertige Aktionen ---------- */
.v4-consent { position: fixed; inset: 0; z-index: 200; display: grid; align-items: end; justify-items: start; padding: 1rem; pointer-events: none; }
.v4-consent[hidden] { display: none; }
.v4-consent__box { pointer-events: auto; background: var(--ivory); color: var(--ink); width: min(100%, 30rem); max-height: min(92dvh, 46rem); overflow: auto; padding: 1.25rem; border-radius: 2px; border: 1px solid rgba(14,20,18,.12); box-shadow: 0 24px 60px rgba(14,20,18,.35); font-size: .9375rem; }
@media (max-width: 47.99em) { .v4-consent { background: rgba(14,20,18,.35); pointer-events: auto; padding: 0; } .v4-consent__box { width: 100%; border-radius: 6px 6px 0 0; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); } }
@media (min-width: 48em) { .v4-consent { padding: 1.5rem; } .v4-consent__box { padding: 1.5rem; } }
/* Erster Layer: kompakt */
.v4-consent__title { font-family: var(--font-serif); font-size: 1.3125rem; line-height: 1.2; font-weight: 400; margin: 0 0 .5rem; }
.v4-consent__text { margin: 0 0 1rem; color: var(--ink-2); font-size: .9rem; line-height: 1.45; }
.v4-consent__actions { display: grid; gap: .5rem; }
@media (min-width: 30em) { .v4-consent__actions { grid-template-columns: repeat(3, 1fr); } }
.v4-consent__actions .v3-btn { width: 100%; min-height: 2.6rem; padding: .5rem .6rem; font-size: .875rem; } /* drei gleich gestaltete Schaltflächen, keine Hervorhebung */
.v4-consent__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin: .5rem 0 0; font-size: .8125rem; }
.v4-consent__links a, .v4-consent__back { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: .25em; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* Zweiter Layer: zentrierter Dialog mit Marke, Abdunkelung, alles auf einen Blick; mobil als Vollbild-Sheet */
.v4-consent.is-details { align-items: center; justify-items: center; background: rgba(14,20,18,.55); pointer-events: auto; }
.v4-consent.is-details .v4-consent__box { width: min(100%, 40rem); padding: 1.25rem 1.5rem 1.25rem; }
@media (max-width: 47.99em) { .v4-consent.is-details { padding: 0; } .v4-consent.is-details .v4-consent__box { width: 100%; height: 100dvh; max-height: none; border-radius: 0; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); } }
.v4-consent__brand { display: flex; align-items: center; padding-bottom: .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--line); } .v4-consent__logo { display: block !important; height: 1.5rem; width: auto; }
.v4-consent__step--details .v4-consent__title { font-size: 1.375rem; } .v4-consent__step--details .v4-consent__text { margin-bottom: .75rem; }
.v4-consent__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.v4-consent__item label { display: grid; grid-template-columns: 1fr auto; gap: .9rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.v4-consent__what strong { display: block; font-size: .9rem; line-height: 1.3; } .v4-consent__what small { display: block; color: var(--ink-3); font-size: .78rem; line-height: 1.3; margin-top: .05rem; }
.v4-consent__provider { color: var(--ink-3); }
/* Schalter: natives Kontrollkästchen bleibt bedienbar, visuell als Switch */
.v4-consent__item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.v4-consent__switch { position: relative; width: 2.5rem; height: 1.5rem; border-radius: 999px; background: rgba(14,20,18,.5);   /* D05: Aus-Zustand ≈ 3,4:1 (vorher 1,6:1) */ transition: background .2s var(--ease); flex: none; }
.v4-consent__switch::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s var(--ease-out); }
.v4-consent__item input:checked + .v4-consent__switch { background: var(--night); } .v4-consent__item input:checked + .v4-consent__switch::after { transform: translateX(1rem); }
.v4-consent__item input:focus-visible + .v4-consent__switch { outline: 2px solid var(--night); outline-offset: 2px; }
.v4-consent__item--locked label { cursor: default; } .v4-consent__item--locked .v4-consent__switch { background: rgba(14,20,18,.68); }
@media (max-width: 47.99em) { .v4-consent.is-details .v4-consent__actions { position: sticky; bottom: calc(-1.25rem - env(safe-area-inset-bottom)); background: var(--ivory); padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom)); margin-bottom: calc(-1.25rem - env(safe-area-inset-bottom)); box-shadow: 0 -12px 16px -12px rgba(14,20,18,.25); } } /* Mobil: Schaltflächen bleiben beim Scrollen sichtbar */
.v4-consent__step[hidden], .v4-consent__saved[hidden] { display: none; }
.v4-consent__saved { margin: 0; font-weight: 600; }

/* ---------- 5 Archivseite (Teilnahmebedingungen): bestehende Blöcke im V4-Maß ---------- */
.v3-root .wrap { max-width: var(--wrap); padding-inline: var(--gutter); }
.v3-root .h-editorial, .v3-root .h-display { font-size: var(--fs-h2); }
.v3-root .sec { padding-block: var(--s-m); }
.v3-root .legal { background: var(--ivory); }
.v3-root .prose h2 { font-family: var(--font-serif); font-weight: 400; }
.v3-root .footer, .v3-root .header, .v3-root .menu:not(.v3-menu) { display: none; }
.v4-page--legacy .hero { display: none; }

/* ---------- 6 Motion (dezent) ---------- */
html.js:not(.review-static) .v3-root .reveal:not(.in-view) { opacity: 0; transform: translateY(10px); }
.v3-root .reveal { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.js .v3-root .reveal .pic { clip-path: none; transition: none; }
@media (prefers-reduced-motion: reduce) { html.js .v3-root .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html.js .v3-hero__center > * { animation: none !important; } .v3-root * { transition-duration: 0s !important; } }


/* ===== Master-Korrektur 24.09.: Unterseiten-Raster ===== */
/* Bild/Text-Module: Bildhöhe zum Text passend (Desktop 4:3 statt Hochformat), Fokalpunkt aus dem Manifest */
@media (min-width: 64em) { .v4-sec--media .v4-text__fig .pic { aspect-ratio: 4 / 3; max-height: 32rem; } .v4-sec--media .v4-text__fig .pic img { object-position: var(--fx-d, 50% 50%); } .v4-sec--media .v4-text { align-items: center; } }
/* Tabellen unter ihrer Überschrift über die volle Inhaltsbreite */
@media (min-width: 64em) { .v4-tbl__grid { grid-template-columns: 1fr; gap: 1.25rem; } .v4-table tbody th { width: 22%; } }
/* Kontaktseite: Lageplan links, nur Kennungen rechts, oben ausgerichtet; Karten darunter */
@media (min-width: 64em) { .v4-siteplan__grid { grid-template-columns: 3fr 2fr; align-items: start; } }
.v4-chalets { grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; }
@media (min-width: 40em) { .v4-chalets { grid-template-columns: repeat(2, 1fr); } }
.v4-chalets li { display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: .5rem; padding: .4rem 0; }
.v4-chalets__acc { display: inline-block; flex: none; width: .6rem; height: .6rem; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; vertical-align: middle; }
.v4-chalets__legend { display: block; margin-top: .75rem; max-width: none; }
.v4-cards--3 { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 48em) { .v4-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }
.v4-card__t { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.v4-card .v4-dist { font-size: .9rem; } .v4-card .v4-dist dt:only-child, .v4-card .v4-dist dd:empty { display: none; }
.v4-card .v4-dist div:has(dd:empty) dt { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); margin-top: .5rem; grid-column: 1 / -1; }
/* Themenliste (Mail-Fallback der Anfrage) */
.v4-topics { list-style: none; margin: .75rem 0 1rem; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 40em) { .v4-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v4-topics__item { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.25rem; height: 100%; padding: .6rem .9rem; line-height: 1.3; background: #fff; border: 1px solid var(--line); border-radius: 4px; color: inherit; text-decoration: none; font-size: .9375rem; transition: border-color .2s var(--ease), background .2s var(--ease); }
.v4-topics__item:hover, .v4-topics__item:focus-visible { border-color: var(--night); } .v4-topics__item.is-active { background: var(--night); color: var(--ivory); border-color: var(--night); }
.v4-topics__lead { margin: 0; }
/* Buchungsseite */
.v4-book__voucher { margin: 0; } .v4-book__voucher .v3-link { font-weight: 600; }
/* Gutschein (27.09.): freiwillige Postanschrift erst bei Bedarf (Aufklapper im Formular; Inhalt wird mitgesendet) */
.v4-voucher__post { margin: 0 0 1.25rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v4-voucher__post > summary { display: flex; align-items: center; min-height: 2.75rem; padding: .5rem 0; font-weight: 600; cursor: pointer; list-style: none; }
.v4-voucher__post > summary::-webkit-details-marker { display: none; }
.v4-voucher__post > summary::after { content: "+"; margin-left: auto; font-size: 1.25rem; line-height: 1; color: var(--ink-2); }
.v4-voucher__post[open] > summary::after { content: "–"; }
.v4-voucher__post > summary:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
.v4-voucher__post[open] > .field { margin-top: .25rem; }
.v4-faqhub__allp { margin: 1.5rem 0 0; } .v4-faqhub__allp[hidden] { display: none; } .v4-faqhub__all { width: 100%; justify-content: center; }   /* D04: nur auf dem Telefon sichtbar (Skript) */
/* Partnerhinweis Startseite: ruhige Zeile vor dem Abschluss */
/* N01 (26.09.): Newsletter – ruhiger Abschnitt vor dem Partnerhinweis; Desktop Text links, Formular rechts; Telefon einspaltig */
.v3-news__in { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 2.5vw, 2rem) 0 0; border-top: 1px solid var(--line); }
.v3-news__copy .v3-text { margin: .5rem 0 0; max-width: 34em; }
.v3-news__form { display: grid; gap: .9rem; }
.v3-news__fields { display: grid; gap: .9rem; }
.v3-news__consent { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-3); max-width: 42em; } .v3-news__consent a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.v3-news__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.v3-news__devnote { margin: 0; } .v3-news__status { margin: 0; font-weight: 600; }
@media (min-width: 48em) { .v3-news__fields { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
@media (min-width: 64em) { .v3-news__in { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gutter); align-items: start; } }
/* 30.09. abends (Wunsch Johannes: keine freien Bilder, Text auf Bild – auch Desktop): Newsletter der Startseite auf dem Winterbild, Überschrift
   und Satz unten links, Formular darunter; Instagram-Zeile unten links auf der Blauen Stunde */
@media (min-width: 48em) {
  .v3-news--photo .v3-news__in, .v3-news.v3-news--photo .v3-news__in { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 0; border-top: 0; }
  .v3-news--photo .v3-news__media { display: block; grid-area: 1 / 1; position: relative; }
  .v3-news--photo .v3-news__fig { margin: 0; }
  .v3-news--photo .v3-news__media .pic { display: block; aspect-ratio: 21 / 9; max-height: 36rem; border-radius: 2px; overflow: hidden; }
  .v3-news--photo .v3-news__media .pic img { width: 100%; height: 100%; object-fit: cover; }
  .v3-news--photo .v3-news__media .v3-ai { z-index: 3; }
  .v3-news--photo .v3-news__copy { grid-area: 1 / 1; align-self: end; z-index: 2; padding: 6rem clamp(1.5rem, 4.5vw, 4.5rem) clamp(1.25rem, 3vw, 2.5rem); border-radius: 0 0 2px 2px; background: linear-gradient(to top, rgba(14,20,18,.74) 0, rgba(14,20,18,.4) 45%, rgba(14,20,18,0) 100%); pointer-events: none; }
  .v3-news--photo .v3-news__copy .v3-h2 { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .v3-news--photo .v3-news__copy .v3-text { max-width: 36em; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .v3-news--photo .v3-news__form { grid-row: 2; max-width: 52rem; margin-left: clamp(1.5rem, 4.5vw, 4.5rem); }   /* 01.10. (Johannes): Formular auf der Textkante der Überschrift im Bild – eine linke Achse für Bild, Überschrift und Formular */
  .v3-news--photo > .v3-wrap { width: min(100% - 2 * var(--gutter), var(--wide)); }   /* gleiche Breite wie die Bildbänder davor und danach */
  .v3-band--ig .v3-wide { position: relative; }
  .v3-band--ig .v3-band__over { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 5rem clamp(1.5rem, 4.5vw, 4.5rem) clamp(1rem, 2.4vw, 2rem); border-radius: 0 0 2px 2px; color: #fff; background: linear-gradient(to top, rgba(14,20,18,.7) 0, rgba(14,20,18,.35) 45%, rgba(14,20,18,0) 100%); pointer-events: none; }
  .v3-band--ig .v3-band__over > * { pointer-events: auto; }
  .v3-band--ig .v3-band__over .v4-ig__a { font-size: 1.125rem; color: #fff; }
  .v3-band--ig .v3-band__over .v4-ig__rest { font-size: 1rem; color: rgba(255,255,255,.88); }
  .v3-band--ig .v3-ai { z-index: 3; }
}
/* W01/W02 (26.09.): Panorama-Webcam – lokale Fläche bis zur Aktivierung, danach großzügiger Player (Desktop ab 700 × 370 px, Telefon volle Breite, ~80 % der Höhe) */
.v4-cam { position: relative; min-height: 16rem; background: var(--panel); border-radius: 6px; overflow: hidden; }
.v4-cam--player { aspect-ratio: 16 / 9; min-height: 0; background: var(--night); color: var(--ivory); }   /* Freigabe 26.09.: Fläche = Player (16:9), nichts wird abgeschnitten */
.v4-cam__gate { display: grid; align-content: center; justify-items: start; gap: 1rem; min-height: 16rem; padding: clamp(1.25rem, 3vw, 2rem); } .v4-cam__gate[hidden] { display: none; }
.v4-cam--player .v4-cam__gate { position: absolute; inset: 0; z-index: 1; min-height: 0; justify-items: center; text-align: center; align-content: center; }
/* D07/Webcam (27.09.): Platzhalter vor der Zustimmung bewusst gestaltet – eigenes Ortsfoto stark weichgezeichnet und abgedunkelt (kein
   Kamerabild, keine Anfrage an feratel), darüber kurzer Titel, Hinweis und „Webcam laden“; nach dem Laden liegt der Player darüber */
.v4-cam__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.v4-cam__bg .pic { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.v4-cam__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(10px) saturate(.75) brightness(.45); transform: scale(1.08); }
.v4-cam.is-loaded .v4-cam__bg { display: none; }
.v4-cam__lead { margin: 0; font-family: var(--font-serif); font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.2; color: var(--ivory); }
.v4-cam__note { max-width: 34rem; margin: 0; font-size: .9375rem; line-height: 1.5; color: rgba(255,255,255,.86); } .v4-cam__note a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.v4-cam__actions { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: center; margin: 0; }
.v4-cam.is-loaded { background: #000; } .v4-cam iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v4-cam__more { margin-top: .35rem; }   /* Wunsch 26.09.: Verweis auf die weiteren Webcams von Hahnenklee Tourismus */
.v4-cam__src { margin: .6rem 0 0; font-size: .875rem; color: var(--ink-3); } .v4-cam__src a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(14,20,18,.35); } .v4-cam__src a:hover { color: var(--ink); text-decoration-color: currentColor; }
/* G01/G02 (26.09.): Gutscheinanfrage – schlichte Gutschein-Vorschau (Nachtwald, Logo, Wunschbetrag), Betragsfeld mit €-Zeichen, „noch kein Kauf“ direkt am Button */
.v4-vcard { display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; margin: 1.5rem 0; padding: clamp(1.25rem, 3vw, 1.75rem); width: 100%; max-width: 26rem; aspect-ratio: 1.6 / 1; background: var(--night); color: var(--ivory); border-radius: 6px; box-shadow: 0 18px 40px rgba(14,20,18,.18); }
.v4-vcard__logo { display: block; height: 1.4rem; width: auto; margin-bottom: auto; }
.v4-vcard__k { font-family: var(--font-sans); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-2); }
.v4-vcard__v { font-family: var(--font-serif); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.1; }
.v4-vcard__s { font-size: .875rem; line-height: 1.4; color: var(--ivory-2); }
.v4-voucher__eur { position: relative; max-width: 12rem; } .v4-voucher__eur input { width: 100%; padding-right: 2.25rem; } .v4-voucher__eur span { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.v4-voucher__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.v4-voucher__nobuy { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.v3-partner { padding-bottom: var(--s-m); } .v3-partner__in { display: grid; gap: 1rem; padding: clamp(1.25rem, 2.5vw, 2rem) 0 0; border-top: 1px solid var(--line); }
@media (min-width: 64em) { .v3-partner__in { grid-template-columns: 1fr auto; align-items: end; gap: 2rem; } }
.v3-partner__h { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); margin-bottom: .35rem; max-width: none; } .v3-partner__h { text-wrap: balance; } /* K17: kein erzwungenes nowrap */ .v3-partner__cta { margin: 0; } .v3-ext { font-size: .9em; }
/* Consent: Dienstedetails */
.v4-consent__details { grid-column: 1 / -1; margin: -.15rem 0 .35rem; } .v4-consent__details summary { cursor: pointer; font-size: .78rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: .2em; list-style: none; width: fit-content; } .v4-consent__details summary::-webkit-details-marker { display: none; }
.v4-consent__details ul { margin: .3rem 0 0; padding-left: 1rem; font-size: .78rem; color: var(--ink-2); line-height: 1.4; }
/* Rechtsseiten behalten die schmale Lesespalte (Ausnahme von der Vollbreite) */

/* ===== Legal-Master 24.09.: Vorlage, Seitenleiste, Druck, Prüfmarker ===== */
.v4-legal__grid { grid-template-columns: 1fr; }
@media (min-width: 64em) { .v4-legal__grid { grid-template-columns: 16rem minmax(0, 46rem); gap: 3.5rem; } .v4-legal__toc { max-height: calc(100svh - var(--header-h) - var(--pbar-y, var(--pbar-h)) - 3rem); display: grid; grid-template-rows: auto auto minmax(0, 1fr); } .v4-legal__toc ol { overflow: auto; padding-right: .25rem; } }
@media (min-width: 64em) and (max-width: 79.99em) { .v4-legal__grid { grid-template-columns: 14rem minmax(0, 1fr); gap: 2.5rem; } }
.v4-legal__kicker { margin: 0; font-family: var(--font-sans); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-legal__doc { margin: .15rem 0 .9rem; font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.2; }
@media (max-width: 63.99em) { .v4-legal__kicker, .v4-legal__doc { display: none; } .v4-legal__tocbox { border: 1px solid var(--line); border-radius: 4px; padding: 0 .9rem; } .v4-legal__tocbox summary::before { content: attr(data-doc); } }
.v4-legal__toc a { position: relative; padding: .4rem 0 .4rem .85rem; color: var(--ink-3); }
.v4-legal__toc a::before { content: ""; position: absolute; left: 0; top: .55rem; bottom: .55rem; width: 2px; background: transparent; border-radius: 1px; }
.v4-legal__toc a.is-active { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1.5px; } .v4-legal__toc a.is-active::before { background: var(--ink); }
.v4-prose h2 { scroll-margin-top: calc(var(--header-h) + var(--pbar-y, var(--pbar-h)) + 1.25rem); }
/* Sprungziel (Nachtrag 24.09.): keine Umrandung mehr, s. .is-target-heading */
.v4-legal__draft { margin: 0 0 1rem; padding: .6rem .9rem; border: 1px solid rgba(180,39,28,.35); border-left-width: 4px; background: rgba(180,39,28,.05); color: #7a2118; font-size: .875rem; line-height: 1.45; border-radius: 2px; }
.v4-open { display: inline-block; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: .1rem .45rem; margin: 0 .15rem; border-radius: 2px; background: rgba(180,39,28,.12); color: #7a2118; vertical-align: .1em; white-space: nowrap; }
@media print { .v3-header, .v3-progress, .v3-menu, .v3-footer, .v3-close, .v4-legal__toc, .v4-consent, .v4-hero__actions, .v4-legal__draft, .v3-loader { display: none !important; } .v4-legal__grid { grid-template-columns: 1fr; } .v4-prose { max-width: none; font-size: 11pt; } .v4-prose h2 { break-after: avoid; } .v4-open { border: 1px solid #000; } body { background: #fff; color: #000; } }
/* Vergrößern per Lupe beim Hover statt Textbadge (deckt Logo/Legende nicht ab) */
.v4-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.v4-zoom__ico { position: absolute; top: .75rem; right: .75rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1412' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 1.15rem no-repeat; opacity: 0; transform: scale(.9); transition: opacity .25s var(--ease), transform .25s var(--ease-out); pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.v4-zoom:hover .v4-zoom__ico, .v4-zoom:focus-visible .v4-zoom__ico { opacity: 1; transform: scale(1); }
.v4-plan__hint { display: none; }
/* K17: keine Füllzeilen in den Raumlisten */
.v4-note--wide { max-width: none; margin-top: 1.25rem; }
/* Lageplan inline: Hover-Hervorhebung */
.v4-siteplan__zoom .v4-siteplan__desk { display: none; } .v4-siteplan__zoom .v4-siteplan__mob { display: block; width: 100%; height: auto; }
@media (min-width: 48em) { .v4-siteplan__zoom .v4-siteplan__desk { display: block; } .v4-siteplan__zoom .v4-siteplan__desk svg { display: block; width: 100%; height: auto; } .v4-siteplan__zoom .v4-siteplan__mob { display: none !important; } }
/* K03: ganzes Chalet orange (beide Dachflächen), Kennung dunkel hinterlegt; Auswahl (is-sel) bleibt, Hover/Fokus (is-hot) als Vorschau */
.v4-siteplan__svg .chalet .chalet-roof { transition: fill .2s var(--ease), stroke-width .2s var(--ease); }
.v4-siteplan__svg .chalet.is-hot .chalet-roof { fill: #F0B27A; stroke-width: 2.4; }
.v4-siteplan__svg .chalet.is-sel .chalet-roof, .v4-siteplan__svg .chalet.is-sel.is-hot .chalet-roof { fill: #E07B2E; stroke: #0E1412; stroke-width: 3; }
.v4-siteplan__svg .chalet.is-sel .label-paper { fill: #0E1412; } .v4-siteplan__svg .chalet.is-sel .chalet-number, .v4-siteplan__svg .chalet.is-sel .chalet-secondary { fill: #FFFFFF; }
.v4-siteplan__svg .chalet.is-sel .access-indicator { fill: #0E1412; stroke: #FFFFFF; }
.v4-siteplan__mobwrap { display: block; } .v4-siteplan__mobwrap svg { display: block; width: 100%; height: auto; }
/* 01.10. abends: Titel und Fußzeile des Telefon-Lageplans als übersetzbarer Text an derselben Stelle wie vorher in der Grafik
   (Grafik 710 × 1000: Titel 35 px Literata an x 18 / Grundlinie 47, Fußzeile 23 px an Grundlinie 958 – Maße relativ zur Breite) */
.v4-siteplan__mbox { position: relative; display: block; container-type: inline-size; }
.v4-siteplan__mtitle, .v4-siteplan__mfoot { position: absolute; left: 2.54cqi; right: 2.54cqi; pointer-events: none; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v4-siteplan__mtitle { top: 2.65cqi; font: 400 4.93cqi/1 var(--font-serif); color: var(--ink); }
.v4-siteplan__mfoot { top: 132.3cqi; font: 400 3.24cqi/1 var(--font-sans); color: #404441; }
@media (min-width: 48em) { .v4-siteplan__zoom .v4-siteplan__mbox { display: none; } }
html.js .v4-rates__noscript { display: none; }   /* Ausweichlink ohne JavaScript (vorher <noscript>, das die Übersetzung nicht erreicht) */
.v4-chalets li { display: block; padding: 0; }
.v4-chalets__btn { display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: .5rem; width: 100%; padding: .45rem .5rem; margin: 0; font: inherit; color: inherit; text-align: left; background: transparent; border: 0; border-radius: 3px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.v4-chalets__btn:hover, .v4-chalets__btn.is-hot { background: rgba(224,123,46,.12); }
.v4-chalets__btn:focus-visible { outline: 2px solid var(--night); outline-offset: 1px; }
.v4-chalets__btn[aria-pressed="true"] { background: #E07B2E; color: #0E1412; } .v4-chalets__btn[aria-pressed="true"] .v4-chalets__num { color: #0E1412; } .v4-chalets__btn[aria-pressed="true"] .v4-chalets__acc { border-color: #0E1412; }
.v4-hero__leadlink { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(255,255,255,.6); } .v4-hero__leadlink:hover { text-decoration-color: currentColor; }
.v4-text__frame { position: relative; } .v4-text__frame .v3-ai { right: .6rem; bottom: .6rem; }
@media (min-width: 64em) { .v4-sec--left .v4-text__frame { order: -1; } }
.v4-topics--pick { margin: 0 0 1.25rem; } .v4-topics--pick .v4-topics__item { width: 100%; cursor: pointer; font: inherit; font-size: .9375rem; } .v4-topics--pick .v4-topics__item.is-active { background: var(--night); color: var(--ivory); border-color: var(--night); }

/* K09 (24.09.): themenspezifische Felder, Zuständigkeitshinweis, E-Mail-Hinweis mit Kopierfunktion */
.v4-iform__topicfields { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v4-iform__topicfields:not(:has(> .field:not([hidden]))) { display: none; }
.v4-iform__topicfields > .field[hidden] { display: none; }
.v4-iform .field__hint { margin: .35rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.v4-iform .field__hint[hidden] { display: none; }
.v4-iform__mailhint { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.v4-copy { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.v4-copy__addr { color: var(--ink); font-weight: 600; user-select: all; }
.v4-copy__btn { font: inherit; font-size: .8125rem; padding: .15rem .55rem; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: var(--ink); cursor: pointer; }
.v4-copy__btn:hover, .v4-copy__btn:focus-visible { border-color: var(--night); }
@media (max-width: 29.99em) { .v4-iform__topicfields { grid-template-columns: minmax(0, 1fr); } }

/* K06 (24.09.): Inhaltsbox ist der eine Scrollcontainer der Rechtsnavigation; Kicker und Dokumenttitel bleiben darüber stehen */
@media (min-width: 64em) {
  .v4-legal__toc { overflow: hidden; }
  .v4-legal__tocbox { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .v4-legal__tocbox summary { position: sticky; top: 0; z-index: 1; background: var(--ivory); }
  .v4-legal__toc ol { overflow: visible; }
}

/* Auswahlmenüs „Für euch“/„Extras“ (Wunsch 24.09., spät): nur Text, keine Fläche. Lesbarkeit über einen weichen Schein direkt hinter
   den Buchstaben (über dem Film dunkel, im hellen Header hell), Einträge gleiten gestaffelt herein. Blendet sich nach ~2 s selbst aus,
   solange weder Maus noch Tastaturfokus im Menü sind (v4.js). Aktuelle Unterseite: feine Unterstreichung. */
.v3-nav__group { position: relative; }
.v3-nav__toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 .35rem; font: inherit; font-size: var(--fs-nav); font-weight: 600; letter-spacing: .005em; white-space: nowrap; color: inherit; background: none; border: 0; cursor: pointer; position: relative; }
.v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-nav__toggle { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.v3-nav__toggle::after { content: ""; position: absolute; left: .35rem; right: 1.25rem; bottom: .55rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.v3-nav__toggle:hover::after, .v3-nav__toggle:focus-visible::after, .v3-nav__toggle.is-current::after, .v3-nav__toggle[aria-expanded="true"]::after { transform: scaleX(1); }
.v3-nav__chev { flex: none; opacity: .8; transition: transform .2s var(--ease); } .v3-nav__toggle[aria-expanded="true"] .v3-nav__chev { transform: rotate(180deg); }
/* 30.09. (Sprachfassungen): Pfeil der Hauptpunkte per CSS (::before mit order: 2 – ::after trägt den Unterstrich) statt als Symbol im Text – DeepL setzte sonst Satzzeichen um den Platzhalter
   („Chalets « »“, „Precios de «»“); gleiche Größe, Deckkraft und Drehung wie das bisherige SVG */
.v3-nav__toggle::before { content: ""; order: 2; display: inline-block; flex: none; width: 10px; height: 10px; background: currentColor; opacity: .8; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s var(--ease); } .v3-nav__toggle[aria-expanded="true"]::before { transform: rotate(180deg); }
.v3-nav ul.v3-nav__sub { position: absolute; top: calc(100% - .1rem); left: .35rem; z-index: 5; display: grid; gap: 0; min-width: 14rem; margin: 0; padding: .25rem 0 0; list-style: none; background: none; border: 0; border-radius: 0; box-shadow: none; transition: opacity .35s var(--ease); }
.v3-nav ul.v3-nav__sub[hidden] { display: none; }
.v3-nav ul.v3-nav__sub.is-leaving { opacity: 0; }
.v3-nav ul.v3-nav__sub li { animation: hk-drop-item .32s var(--ease-out) both; }
.v3-nav ul.v3-nav__sub li:nth-child(2) { animation-delay: .04s; } .v3-nav ul.v3-nav__sub li:nth-child(3) { animation-delay: .08s; } .v3-nav ul.v3-nav__sub li:nth-child(4) { animation-delay: .12s; } .v3-nav ul.v3-nav__sub li:nth-child(5) { animation-delay: .16s; } .v3-nav ul.v3-nav__sub li:nth-child(6) { animation-delay: .2s; }
@keyframes hk-drop-item { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .v3-nav ul.v3-nav__sub li { animation: none; } .v3-nav ul.v3-nav__sub { transition: none; } }
.v3-header .v3-nav ul.v3-nav__sub li a[href] { display: inline-flex; align-items: center; min-height: 2.3rem; padding: 0; font-size: var(--fs-nav); font-weight: 600; letter-spacing: .005em; white-space: nowrap; background: none; text-decoration: none; }
.v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-nav ul.v3-nav__sub li a[href] { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.55), 0 0 26px rgba(0,0,0,.4); }
/* Wunsch 26.09.: beim Öffnen eines Auswahlmenüs tritt die Seite mit einem dunklen Schleier zurück (heller Kopf und über dem Hero); die Einträge stehen dann weiß wie über dem Hero – Nur-Text-Optik bleibt, Kontrast ist unabhängig vom Bild gesichert */
.v3-header.is-scrolled .v3-nav ul.v3-nav__sub li a[href], .v3-header--solid .v3-nav ul.v3-nav__sub li a[href] { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.35); }
.v3-navscrim { position: fixed; inset: 0; z-index: 89; background: rgba(14,20,18,.62); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
.v3-header:is(.has-sub-open, .has-lang-open) + .v3-navscrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s var(--ease), visibility 0s linear 0s; }   /* Wunsch 26.09.: auch über dem Hero */
@media (prefers-reduced-motion: reduce) { .v3-navscrim { transition: none; } }
@media (max-width: 47.99em) { .v3-navscrim { display: none; } }
.v3-header .v3-nav ul.v3-nav__sub li a[href]::after { display: none; }
/* 05.10.2026 abends (Johannes; 06.10. für Produktion freigegeben): „Rundgang“ mit kleinem Play-Zeichen – weißer Kreis wie der Play-Knopf auf dem Poster */
.v3-header .v3-nav ul.v3-nav__sub li a.v3-nav__play { gap: .55rem; }
.v3-playmini { display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; color: var(--night); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.v3-playmini svg { display: block; width: .55rem; height: .55rem; margin-left: 1px; }
.v3-header .v3-nav ul.v3-nav__sub li a[href]:hover, .v3-header .v3-nav ul.v3-nav__sub li a[href]:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.v3-header .v3-nav ul.v3-nav__sub li a[href]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.v3-header .v3-nav ul.v3-nav__sub li a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
/* Mobiles Menü: dieselbe Gruppierung als aufklappbare Bereiche */
.v3-menu__acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .55rem 0; font-family: var(--font-serif); font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); line-height: 1.2; cursor: pointer; list-style: none; }
.v3-menu__acc > summary::-webkit-details-marker { display: none; }
.v3-menu__list .v3-menu__sub { list-style: none; margin: 0; padding: 0 0 .85rem .1rem; display: grid; gap: 0; }
.v3-menu__list .v3-menu__sub li, .v3-menu__list .v3-menu__sub li:last-child { border: 0; }
.v3-menu__list .v3-menu__sub a { min-height: 2.6rem; padding: .3rem 0; font-family: var(--font-sans); font-size: 1.0625rem; color: var(--ink-2); }
.v3-menu__list .v3-menu__sub a[aria-current="page"], .v3-menu__list a.menu__primary[aria-current="page"] { color: var(--ink); font-weight: 700; }

/* Nachtrag 24.09.: Sprungziel – Überschrift einmal in der Akzentfarbe (Gold der Fortschrittslinie, abgedunkelt für Lesbarkeit), dann Textfarbe */
/* Punkt 3: eine Sekunde länger, klareres Gold der Marke mit weichem Schein statt Braunton */
@keyframes hk-target-heading { from, 62% { color: #A97B2C; text-shadow: 0 0 .9em rgba(217,179,112,.55); } }
.is-target-heading { animation: hk-target-heading 3.4s cubic-bezier(.4, 0, .2, 1) 1; }
@media (prefers-reduced-motion: reduce) { .is-target-heading { animation: none; } }

/* Nachtrag 24.09.: Sprunglinks ohne Beschreibung – Titel nutzt die volle Zeile, natürliche Umbrüche ohne Einzelwort */
.v4-rows__title { text-wrap: balance; }
@media (min-width: 64em) { .v3-extras__list a.v4-rows__row--solo, .v4-rows__row.v4-rows__row--solo { grid-template-columns: minmax(0, 1fr) auto; } }

/* Nachtrag 24.09.: „Schreibt uns“ – links Erklärung, direkter Kontakt, Themen; rechts Formular */
.v4-form__intro { display: grid; gap: 1rem; align-content: start; }
.v4-form__intro .v3-h2 { margin-bottom: 0; }
.v4-topics__label { margin: .75rem 0 0; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-form__intro .v4-topics { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.v4-form__intro .v4-topics__item { justify-content: flex-start; text-align: left; min-height: 2.75rem; padding: .5rem .8rem; font-size: .9375rem; }
.v4-form__intro .v4-topics__item[aria-pressed="true"] { background: var(--night); color: var(--ivory); border-color: var(--night); }
.v4-form__alt a { white-space: nowrap; }
@media (min-width: 64em) { .v4-form__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .v4-form__intro { position: sticky; top: calc(var(--header-h) + var(--pbar-y, var(--pbar-h)) + 1.5rem); } }
.v4-iform__error { padding: .85rem 1rem; border: 1px solid rgba(180,39,28,.35); border-left-width: 4px; background: rgba(180,39,28,.05); color: #7a2118; font-size: .9375rem; line-height: 1.5; border-radius: 2px; }
.v4-iform__error p { margin: 0; } .v4-iform__error p + p { margin-top: .4rem; } .v4-iform__error a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.v4-iform__error[hidden] { display: none; }

/* Nachtrag 24.09.: Parken, stufenfreier Zugang, Orientierung – kompakter Informationsbereich auf dem Seitenhintergrund, keine Karten */
.v4-arrive { display: grid; gap: 2rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); border-top: 1px solid var(--line); }
.v4-arrive__col + .v4-arrive__col { border-top: 1px solid var(--line); padding-top: 2rem; }
@media (min-width: 48em) { .v4-arrive__col + .v4-arrive__col { border-top: 0; padding-top: 0; border-left: 1px solid var(--line); padding-left: clamp(2rem, 4vw, 4rem); } }
.v4-arrive__item + .v4-arrive__item { border-top: 1px solid var(--line); padding-top: 1.5rem; }
@media (min-width: 48em) { .v4-arrive { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); } }
.v4-arrive__col { display: grid; gap: 1.75rem; align-content: start; }
.v4-arrive__h { margin: 0 0 .5rem; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; }
.v4-arrive__item p { margin: 0; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.55; max-width: 36em; } .v4-arrive__item p + p { margin-top: .5rem; }
.v4-arrive .v4-dist__k { margin: 1rem 0 .25rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); } .v4-arrive .v4-arrive__h + .v4-dist__k { margin-top: .25rem; }
.v4-arrive .v4-dist { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 30rem; }   /* ein Ort pro Zeile (älteres Zwei-Spalten-Raster überschrieben) */
.v4-arrive .v4-dist > div { grid-column: 1; }
.v4-arrive .v4-dist > div { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.v4-arrive .v4-dist > div:last-child { border-bottom: 0; }
.v4-arrive .v4-dist dt { color: var(--ink-2); } .v4-arrive .v4-dist dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* K11 (24.09.): Einlöseweg im Abschluss neben „Fragen? Schreibt uns.“ und im mobilen Menü unter „Buchen“ */
.v3-close__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.75rem; margin: -1rem 0 0; }   /* 27.09.: „Fragen? Schreibt uns.“ näher an „Auszeit buchen“ */
.v3-menu__voucher { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9375rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: .25em; }

/* K15 (24.09.): Sauna-Text auf hellem Holz – feiner Lesbarkeitsschatten zusätzlich zum lokalen Verlauf */
.v3-stage__copy--sauna .v3-h2, .v3-stage__copy--sauna .v3-stage__p, .v3-stage__copy--sauna .v3-stage__more { text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 18px rgba(14,20,18,.35); }
/* K15 → Wunsch 26.09.: der weiche Schatten hinter dem Textblock gilt jetzt für alle Texte auf Bildern (Desktop-Block oben, ab 64em) */

/* Punkt 6 (24.09.): Play/Pause und KI-Symbol als kleine Gruppe unten rechts über der Faktenzeile; je 44 × 44 px Bedienfläche, 28 px sichtbar */
.v3-hero__ctrl { position: absolute; z-index: 3; right: calc(var(--gutter) - .5rem); bottom: calc(4.1rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .125rem; }
@media (min-width: 48em) { .v3-hero__ctrl { bottom: .7rem; } }   /* Wunsch 24.09.: auf Höhe der Faktenzeile („Bis zu 9 Gäste“), rechts daneben */
.v3-hero__ctrl .v3-ai.v3-ai--hero { position: relative; right: auto; bottom: auto; width: 2.75rem; height: 2.75rem; }
.v3-hero__ctrl .v3-ai.v3-ai--hero img { width: 1.5rem; height: 1.5rem; }   /* Wunsch 26.09. (ausdrücklich freigegeben): KI-Symbol so groß wie der Play-/Pause-Kreis daneben */
.v3-hero__ctrl .v3-hero__vbtn { position: relative; top: auto; right: auto; bottom: auto; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; font-size: 0; }
.v3-hero__ctrl .v3-hero__vbtn[hidden] { display: none; }
/* Wunsch 26.09.: Kreis nicht größer als das KI-Symbol daneben – dessen Kreis füllt 64,5 % der 28-px-Grafik (≈ 18 px); 01.10. (Johannes): klarer 1-px-Rand als Bedienelement, kein Schein; 44-px-Tippfläche bleibt */
.v3-hero__ctrl .v3-hero__vbtn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; border-radius: 50%; background: #0E1412; box-shadow: 0 0 0 1px rgba(255,255,255,.75); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.v3-hero__ctrl .v3-hero__vbtn:hover::before { transform: scale(1.1); box-shadow: 0 0 0 1px #fff; }
.v3-hero__ctrl .v3-hero__vbtn:focus-visible { outline: 2px solid var(--ivory); outline-offset: 0; }
/* Wunsch 26.09.: beide Symbole näher zusammen – ab Tablet 26-px-Flächen (über dem WCAG-Minimum von 24 px), Mittelpunkte 26 px auseinander; Telefone behalten 44 px (v3-mobile.css) */
@media (min-width: 48em) { .v3-hero__ctrl { gap: 0; right: calc(var(--gutter) - .3rem); bottom: 1.405rem; }   /* Mitte der Symbole = Mitte der Faktenzeile („Bis zu 10 Gäste“), gemessen 1024–1920 px */ .v3-hero__ctrl .v3-hero__vbtn, .v3-hero__ctrl .v3-ai.v3-ai--hero { width: 1.625rem; height: 1.625rem; } }
.v3-hero__vico { position: relative; width: .5rem; height: .5rem; }   /* 26.09.: Symbol passend zum kleineren Kreis */
.v3-hero__vico--play { display: none; } .v3-hero__vbtn[data-paused="true"] .v3-hero__vico--play { display: block; } .v3-hero__vbtn[data-paused="true"] .v3-hero__vico--pause { display: none; }

/* K14 (24.09.): Kurzhinweis am KI-Symbol bei Hover/Fokus; Symbol in der Lightbox neben der Bildunterschrift */
.v3-ai__tip { position: absolute; right: calc(100% + .4rem); top: 50%; transform: translateY(-50%); padding: .2rem .5rem; border-radius: 3px; background: rgba(14,20,18,.86); color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.v3-ai:hover .v3-ai__tip, .v3-ai:focus-visible .v3-ai__tip { opacity: 1; }
.v3-ai--hero .v3-ai__tip { right: 0; top: auto; bottom: calc(100% + .45rem); transform: none; }   /* Wunsch 26.09. (2. Runde): Hinweis über dem Symbol, verdeckt Play/Pause nicht */
.lightbox__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .9rem; }
/* 05.10.2026 (Johannes): ohne Bildbeschreibung steht „Bild x von y“ direkt unter dem Bild (vorher ganz unten im Dialog) */
.lightbox__cap .lightbox__count { position: static; margin: 0; }
.lightbox__cap .lightbox__count:empty { display: none; }
/* 05.10.2026 abends (Johannes): Ladehinweis – bei langsamer Verbindung erscheint nach 150 ms das Kleeblatt in der Mitte (pulsierend; ruhig bei
   reduzierter Bewegung), das alte Bild tritt zurück */
.lightbox.is-loading [data-lb-img] { opacity: .12; transition: opacity .2s; }
.lightbox.is-loading .lightbox__figure::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3.25rem; height: 3.25rem; margin: -1.625rem 0 0 -1.625rem; background: url("/brand/symbol-light.svg") center / contain no-repeat; animation: lbLoad 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes lbLoad { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: 1; transform: scale(1); } }
/* Wisch-Hinweis (nur Touch, einmal je Seite): Doppelpfeil mit wanderndem Punkt in der unteren Bildhälfte, blendet nach 2,6 s aus */
.lightbox__swipe { position: absolute; left: 50%; bottom: 22%; z-index: 3; transform: translateX(-50%); padding: .55rem .8rem; border-radius: 999px; background: rgba(14,20,18,.55); color: #fff; pointer-events: none; opacity: 0; }
.lightbox__swipe[hidden] { display: none; }
.lightbox__swipe.is-on { animation: lbSwipeIn 2.6s ease both; }
.lightbox__swipe.is-on .lightbox__swipe-dot { animation: lbSwipeDot 1.3s ease-in-out 2; }
@keyframes lbSwipeIn { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lbSwipeDot { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-14px); } 75% { transform: translateX(14px); } }
@media (prefers-reduced-motion: reduce) { .lightbox.is-loading .lightbox__figure::after { animation: none; opacity: .8; } .lightbox__swipe.is-on .lightbox__swipe-dot { animation: none; } }
/* Telefon: Pfeile nicht mehr auf dem Bild, sondern unten links und rechts neben „Bild x von y“; KI-Hinweis darüber */
@media (max-width: 47.99em) {
  .lightbox__figure { padding: 3.5rem .75rem calc(5.25rem + env(safe-area-inset-bottom)); }
  .lightbox__figure img { max-height: calc(100dvh - 9.25rem - env(safe-area-inset-bottom)); }
  .lightbox__cap { position: absolute; left: 0; right: 0; bottom: calc(1rem + env(safe-area-inset-bottom)); margin: 0; flex-direction: column-reverse; gap: .5rem; }
  .lightbox__cap .lightbox__count { display: flex; align-items: center; justify-content: center; min-height: 3rem; font-size: .9375rem; color: rgba(255,255,255,.82); }
  .lightbox__nav { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: none; width: 3rem; height: 3rem; background: transparent; border-color: rgba(255,255,255,.28); border-radius: 50%; }
  .lightbox__nav--prev { left: calc(50% - 8.5rem); } .lightbox__nav--next { right: calc(50% - 8.5rem); }
}
.lightbox__ai { display: inline-flex; align-items: center; gap: .4rem; color: inherit; font-size: .8125rem; text-decoration: underline; text-underline-offset: .2em; opacity: .85; }
.lightbox__ai[hidden] { display: none; } .lightbox__ai img { width: 1.375rem; height: 1.375rem; }
.v4-prose .v4-ai-demo { display: inline-flex; align-items: center; gap: .6rem; margin: .25rem 0 1rem; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 4px; font-size: .9375rem; }
.v4-prose .v4-ai-demo img { width: 1.75rem; height: 1.75rem; }


/* K17 (24.09.): Grundrisse – Titel, Plan und Raumliste beider Ebenen auf gleicher Höhe (Subgrid), Listen ohne Füllzeilen */
@media (min-width: 64em) { .v4-plans__grid { grid-template-rows: auto auto auto; } .v4-plan { grid-row: span 3; grid-template-rows: subgrid; gap: 1rem; } }
/* K17: zwei Textspalten (Teams) */
.v4-cols__grid { display: grid; gap: 2.5rem; }
@media (min-width: 64em) { .v4-cols__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } }
/* einheitlicher Rhythmus wie .v4-text__body: Überschrift → 1rem → Text → 1rem → Liste/Links; gleiche H2-Größe wie alle Abschnitte */
.v4-cols__item { display: grid; gap: 1rem; justify-items: start; align-content: start; max-width: 40rem; }
.v4-cols__item .v3-h2 { max-width: 24ch; }
.v4-cols__body, .v4-cols__head, .v4-cols__rest { display: contents; }   /* 30.09. abends: Hüllen nur fürs Telefon-Bild (Desktop wie bisher) */
.v4-cols__item .v3-text { max-width: 36em; }

/* Nachtrag 24.09.: interner Prüfhinweis zum Formularversand (nur Staging), eine kleine Zeile unter dem Button */


/* Punkt 7 (24.09.): „Rund um euren Aufenthalt“ – Themenlinks kompakt im Einstieg, Listen, Bilder, zwei Spalten */
.v4-jumps { margin-top: 1.5rem; }
.v4-jumps__label { display: none; }   /* sichtbar nur auf dem Telefon (v3-mobile.css); Desktop unverändert */
.v4-jumps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.v4-jumps a { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: .35rem .95rem; border: 1px solid var(--line); border-radius: 999px; font-size: .9375rem; color: var(--ink); text-decoration: none; white-space: nowrap; transition: border-color .2s var(--ease), background .2s var(--ease); }
.v4-jumps a:hover, .v4-jumps a:focus-visible { border-color: var(--night); }
.v4-jumps a .v3-arrow { transform: rotate(90deg); font-size: .85em; }
.v4-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; max-width: 36em; width: 100%; }
.v4-list li { position: relative; padding: .4rem 0 .4rem 1.25rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.v4-list li:last-child { border-bottom: 0; }
.v4-list li::before { content: ""; position: absolute; left: .1rem; top: .95rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--ink-3); }
.v4-cols__item .v4-links, .v4-cols__item .v4-note { margin: 0; }

/* Keine Waisenwörter (Wunsch 24.09.): Fließtext „pretty“, Überschriften ausgeglichen; zusätzlich geschützte Leerzeichen im Build */
.v3-root p, .v3-root li, .v3-root dd, .v3-root figcaption { text-wrap: pretty; }
.v3-root h1, .v3-root h2, .v3-root h3 { text-wrap: balance; }

/* Partnerresort (Wunsch 24.09.): kleines Logo (Originalfarben) rechts neben dem Link, ohne Wasserzeichen und ohne Hover-Bewegung */
.v3-partner__cta { display: flex; align-items: center; gap: .85rem; }
.v3-partner__logo { display: block; height: 2.5rem; width: auto; flex: none; }
.v4-partner { padding-top: clamp(4.5rem, 3rem + 3vw, 6rem); }
.v4-book:has(+ .v4-partner) .v4-book__panel { border-bottom: 0; padding-bottom: 0; } .v4-book + .v4-partner { padding-top: clamp(1.75rem, 3vw, 2.75rem); }   /* /buchen/: Angebots-Hinweis direkt unter „Auf einen Blick“ – eine Trennlinie statt zwei */   /* Kontakt (27.09.): klarer Abstand zum Kaufangebot, damit beide Angebote nicht zusammengehörig wirken */

/* ---------- Wunsch 26.09. (Unterseiten „groß, bildlastig, Text auf dem Bild“): Bühne und Duo. Einheitlicher dunkler Textgrund wie bei der
   Sauna-Bühne der Startseite; Rahmenbreite wie die Bühnen der Startseite (.v3-wide); keine Kästen, dezente 2-px-Kante ---------- */
.v4-stage { padding-block: clamp(.75rem, 1.6vw, 1.5rem); }
.v4-stage__frame { position: relative; overflow: hidden; border-radius: 2px; background: var(--night); isolation: isolate; }
.v4-stage__fig { margin: 0; } .v4-stage__fig .pic { aspect-ratio: 21 / 9; max-height: 44rem; }
.v4-stage__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(14,20,18,.74) 0, rgba(14,20,18,.52) 26%, rgba(14,20,18,.16) 50%, rgba(14,20,18,0) 66%); }
.v4-stage--right .v4-stage__frame::before { background: linear-gradient(270deg, rgba(14,20,18,.74) 0, rgba(14,20,18,.52) 26%, rgba(14,20,18,.16) 50%, rgba(14,20,18,0) 66%); }
.v4-stage__copy { position: absolute; z-index: 2; top: 0; bottom: 0; left: clamp(1.5rem, 4.5vw, 4.5rem); width: min(40%, 31rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .9rem; color: var(--ivory); }
.v4-stage--right .v4-stage__copy { left: auto; right: clamp(1.5rem, 4.5vw, 4.5rem); }
.v4-stage__copy .v3-h2 { margin: 0; color: var(--ivory); font-size: clamp(1.75rem, 1.15rem + 1.5vw, 2.75rem); text-shadow: 0 1px 2px rgba(0,0,0,.3), 0 0 18px rgba(14,20,18,.3); }
.v4-stage__p { margin: 0; max-width: 30em; color: rgba(255,255,255,.93); font-size: 1.0625rem; line-height: 1.55; text-shadow: 0 1px 2px rgba(0,0,0,.4); text-wrap: pretty; }
.v4-stage__copy .v4-links { margin: .1rem 0 0; } .v4-stage__copy .v3-link { color: var(--ivory); text-decoration-color: rgba(255,255,255,.55); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.v4-stage__copy .v4-actions { margin: .2rem 0 0; }
.v4-stage__frame > .v3-ai { z-index: 3; bottom: .6rem; right: .6rem; }
/* D01 (27.09.): Motive ohne ruhige Textzone (Personen über die ganze Breite, helles Laken) – Bild frei, Text darunter auf Nachtgrund */
.v4-stage--below .v4-stage__frame { display: flex; flex-direction: column; }
.v4-stage--below .v4-stage__frame::before { content: none; }
.v4-stage--below .v4-stage__copy { position: static; width: auto; max-width: 46rem; padding: clamp(1.4rem, 2.6vw, 2.25rem) clamp(1.5rem, 4.5vw, 4.5rem) clamp(1.6rem, 3vw, 2.5rem); }
.v4-stage--below .v4-stage__copy .v3-h2, .v4-stage--below .v4-stage__p, .v4-stage--below .v4-stage__copy .v3-link { text-shadow: none; }
.v4-stage--below .v4-stage__frame > .v3-ai { top: .6rem; bottom: auto; }
/* Wunsch Johannes 27.09.: statt Balken unter dem Bild (below) – Bild höher, Text unten auf dem Bild über ruhigen Flächen (Tisch), Gesichter oben frei */
@media (min-width: 48em) {
  .v4-stage--bottom .v4-stage__fig .pic { aspect-ratio: 16 / 9; max-height: 52rem; }
  .v4-stage--bottom .v4-stage__frame::before { background: linear-gradient(0deg, rgba(14,20,18,.84) 0, rgba(14,20,18,.62) 24%, rgba(14,20,18,.2) 44%, rgba(14,20,18,0) 58%); }
  .v4-stage--bottom .v4-stage__copy { top: auto; bottom: 0; left: clamp(1.5rem, 4.5vw, 4.5rem); right: auto; width: min(58%, 40rem); justify-content: flex-end; padding-bottom: clamp(1.5rem, 3vw, 2.75rem); gap: .7rem; }
  .v4-stage--bottom .v4-stage__frame > .v3-ai { top: .6rem; bottom: auto; }
}
/* D01 (27.09.): Abschluss mit Personen in der Bildmitte – Frage und Schaltfläche in der ruhigen oberen Zone, Verlauf oben kräftiger */
@media (min-width: 48em) {
  .v3-close--top { align-items: start; }
  .v3-close--top .v3-close__in { padding-top: clamp(2.5rem, 7vh, 4.5rem); }
  .v3-close--top .v3-close__copy { gap: 1.25rem; }
  .v3-close--top .v3-close__scrim { background: linear-gradient(to bottom, rgba(14,20,18,.74) 0, rgba(14,20,18,.56) 32%, rgba(14,20,18,.1) 58%, rgba(14,20,18,.22) 78%, var(--night) 100%); }   /* QA 27.09.: „Fragen? Schreibt uns.“ auf hellem Himmel (Frühstück) – oben kräftiger */
  /* Wunsch Johannes 27.09. (Korrektur zu D01): Gruppenfoto-Abschluss am Desktop wieder mit Frage und Aktion mittig auf dem Bild (wie FAQ);
     Text über den Personen ist ausdrücklich in Ordnung, das Bild läuft unter dem Text weiter und geht in den dunklen Footer über. Telefon unverändert. */
  .v3-close--photo .v3-close__scrim { background: linear-gradient(to bottom, rgba(14,20,18,.22) 0, rgba(14,20,18,.08) 30%, rgba(14,20,18,.2) 60%, rgba(14,20,18,.74) 86%, var(--night) 100%), radial-gradient(ellipse 58% 46% at 50% 54%, rgba(14,20,18,.5) 0, rgba(14,20,18,.22) 55%, rgba(14,20,18,0) 80%); }
  /* QA 27.09. (D01): „Mit wem kommt ihr?“ – zusätzlicher Textgrund über der hellen Glasbrüstung (unten), Gesichter liegen darüber */
  .v3-aud__head::before { background: radial-gradient(ellipse 52% 72% at 14% 92%, var(--txt-scrim)), linear-gradient(to top, rgba(14,20,18,.6) 0, rgba(14,20,18,.3) 22%, rgba(14,20,18,0) 44%); }
  /* QA 27.09.: Webcam – Kamera früher zeigen, Einstiegsbild kürzer */
  .page--webcam .v4-hero:not(.v4-hero--plain) { min-height: clamp(20rem, 42svh, 27rem); }
}
.v4-duo { padding-block: clamp(.75rem, 1.6vw, 1.5rem); }
.v4-duo__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.v4-duo__item { position: relative; overflow: hidden; border-radius: 2px; background: var(--night); isolation: isolate; }
.v4-duo__fig { margin: 0; } .v4-duo__fig .pic { aspect-ratio: 4 / 5; max-height: 46rem; }
.v4-duo__item::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(14,20,18,.8) 0, rgba(14,20,18,.5) 26%, rgba(14,20,18,0) 52%); }
.v4-duo__copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: .5rem; justify-items: start; padding: clamp(1.25rem, 2.6vw, 2.5rem); color: var(--ivory); }
.v4-duo__h { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 1.05rem + 1.05vw, 2.125rem); line-height: 1.15; color: var(--ivory); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.v4-duo__copy .v3-text { margin: 0; max-width: 30em; color: rgba(255,255,255,.93); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.v4-duo__copy .v4-links { margin: 0; } .v4-duo__copy .v3-link { color: var(--ivory); text-decoration-color: rgba(255,255,255,.55); }
.v4-duo__item > .v3-ai { z-index: 3; top: .6rem; right: .6rem; bottom: auto; }

/* Footer (Wunsch 26.09.): Sprachen rechts in der Abschlusszeile, darunter rechtsbündig „Powered by WEBWUNDER“ (Wasserzeichen); nicht erzeugte
   Sprachen zeigen „Coming soon“ o. Ä. als kleines Etikett (Hover, Fokus, Antippen) – nichts verschiebt sich. „Bewertung schreiben ↗“ neben 4,9. */
@media (min-width: 40em) { .v3-footer__bottom { row-gap: .1rem; } }
.v3-footer__bottom .v3-lang--f { justify-self: end; justify-content: flex-end; }
/* Wunsch Johannes 27.09.: rechts neben dem Trennstrich nur die WEBWUNDER-Wortmarke (ohne „Powered by“), Sprachen rechts; Telefon/E-Mail nicht im Footer.
   Wortmarke (Nachkorrektur „zu hoch“): Buchstaben so hoch wie die Versalien des Copyrights (≈ 9 px = 80 % der PNG-Höhe von 11 px) und auf derselben
   Grundlinie (gemessen bei DPR 1/1,25/2); Helligkeit wie der Copyright-Text; beim Überfahren hell mit rotem Punkt */
.v3-footer__copy .v3-footer__credit a { min-height: 2.5rem; }
.v3-footer__copy .v3-ww { height: .6875rem; top: .0375rem; opacity: .62; }   /* 2. Nachkorrektur: Buchstabenmitte auf die optische Mitte der Kleinbuchstaben (x-Höhe) statt Grundlinie – wirkte zu hoch */
/* Tablet (48–64em): Copyright/Credit und Sprachen passen nicht in eine Zeile – Copyright-Zeile oben (ohne Umbruch), Sprachen darunter linksbündig */
@media (max-width: 63.99em) { .v3-footer__bottom { grid-template-columns: 1fr; row-gap: 0; } .v3-footer__bottom .v3-lang--f { justify-self: start; justify-content: flex-start; margin-left: -.5rem; } .v3-footer__copy { flex-wrap: nowrap; white-space: nowrap; } }
.v3-lang--f button.v3-lang__item { position: relative; }
.v3-lang--f .v3-lang__soon { display: block; position: absolute; left: 50%; bottom: calc(100% - .3rem); z-index: 5; padding: .2rem .5rem; border-radius: 3px; background: var(--ivory); color: var(--night); font-size: .75rem; font-weight: 600; line-height: 1.3; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); text-decoration: none; }
.v3-lang--f button.v3-lang__item:hover .v3-lang__soon, .v3-lang--f button.v3-lang__item:focus-visible .v3-lang__soon, .v3-lang__item.is-flash .v3-lang__soon { opacity: 1; transform: translate(-50%, 0); }
.v3-lang--f button.v3-lang__item:hover { text-decoration: none; }
.v3-grate__write { display: inline-flex; align-items: center; gap: .25rem; min-height: 2.75rem; margin-left: .9rem; color: inherit; font-size: .875rem; font-weight: 500; opacity: .78; text-decoration: none; transition: opacity .2s var(--ease); }
.v3-grate__write:hover, .v3-grate__write:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: .25em; }
.v3-grate__write .v3-ext { font-size: .75rem; }
.v3-grate { display: flex; flex-wrap: wrap; align-items: center; }
/* Bühne/Duo direkt nach einem normalen Abschnitt: großzügiger Abstand; Bühnen untereinander bleiben eng beieinander */
.v4-sec:not(.v4-stage):not(.v4-duo) + .v4-stage, .v4-sec:not(.v4-stage):not(.v4-duo) + .v4-duo { padding-top: clamp(2.25rem, 4.5vw, 4.25rem); }
.v4-stage + .v4-sec:not(.v4-stage):not(.v4-duo), .v4-duo + .v4-sec:not(.v4-stage):not(.v4-duo) { padding-top: clamp(2.75rem, 5vw, 4.75rem); }
.v4-cols__fig { position: relative; margin: 1.25rem 0 0; justify-self: stretch; }   /* QA 30.09.: im Raster mit justify-items:start schrumpfte das Bild auf Tablet auf 0 px */ .v4-cols__fig .pic { aspect-ratio: 3 / 2; border-radius: 2px; }   /* Wunsch 26.09.: Bild unter kurzem Spaltentext statt Leerfläche */

/* Gutscheinkarte als Produktbild (Wunsch 26.09.): Karte leicht gedreht auf dem Umschlag-Foto, dunkles Grün mit feinem Goldrahmen; Betrag live */
.v4-vshot { position: relative; margin: 1.5rem 0 .25rem; max-width: 34rem; border-radius: 4px; overflow: hidden; background: var(--night); }
.v4-vshot .pic { aspect-ratio: 4 / 3; }
.v4-vshot > .v3-ai { z-index: 3; }
.v4-vshot .v4-vcard { position: absolute; left: 50%; top: 46%; z-index: 2; width: 64%; max-width: none; margin: 0; transform: translate(-50%, -50%) rotate(-4deg); background: linear-gradient(135deg, #20302a 0%, #0e1412 58%, #17231e 100%); border: 1px solid rgba(217,161,46,.45); box-shadow: 0 26px 54px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.35); }
.v4-vshot .v4-vcard::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(217,161,46,.3); border-radius: 3px; pointer-events: none; }
.v4-vshot .v4-vcard__k { color: #D9A12E; }
.v4-vshot__note { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 1.4rem 2.75rem .6rem 1rem; font-size: .75rem; line-height: 1.35; color: rgba(255,255,255,.85); background: linear-gradient(0deg, rgba(14,20,18,.7), rgba(14,20,18,0)); }
@media (max-width: 47.99em) { .v4-vshot { max-width: none; } .v4-vshot .v4-vcard { width: 74%; } }

/* Kontaktformular mit Bild (Wunsch 26.09.): ruhiges Motiv oben in der Formularspalte, danach die Eingaben */
.v4-form__media { position: relative; margin: 0 0 clamp(1.25rem, 2.2vw, 2rem); }
.v4-form__fig { margin: 0; }
.v4-form__media .pic { display: block; aspect-ratio: 3 / 2; border-radius: 2px; overflow: hidden; }
.v4-form__media .pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx-m, 50% 50%); }
.v4-form__media .v3-ai { right: .6rem; bottom: .6rem; }
@media (min-width: 64em) { .v4-form__media .pic { aspect-ratio: 16 / 9; } .v4-form__media .pic img { object-position: var(--fx-d, 50% 50%); } }

/* FAQ im Kopf (Wunsch 26.09.): kurzer Text in der Servicegruppe rechts, sichtbar wie Telefon und E-Mail (ab 48em) */
.v3-header__faq { display: none; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .35rem; color: inherit; font-size: var(--fs-nav); font-weight: 600; line-height: 1; letter-spacing: .02em; text-decoration: none; border-radius: 4px; transition: opacity .25s var(--ease); }
.v3-header__faq:hover { opacity: .7; }
.v3-header__faq[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .35em; }
.v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-header__faq { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
@media (min-width: 48em) { .v3-header.is-scrolled .v3-header__faq, .v3-header--solid .v3-header__faq, .v3-header:not(.v3-header--symbol) .v3-header__faq { display: inline-flex; } }
/* Wunsch Johannes 27.09. (nach D07): Startseiten-Filmkopf zeigt dieselben Elemente wie der feste Kopf – FAQ, Telefon und E-Mail sichtbar
   neben der Sprachwahl; gleiche Belegung in beiden Zuständen, daher weiterhin kein seitlicher Sprung der Navigation */
@media (min-width: 48em) { .v3-header--symbol:not(.is-scrolled):not(.v3-header--solid) :is(.v3-header__icon, .v3-header__faq) { display: inline-flex; } }
.v3-header--symbol:not(.is-scrolled):not(.v3-header--solid) .v3-header__icon svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }   /* über dem Film lesbar wie FAQ (Textschatten) */

/* ---------- „Für euch“-Seiten (Wunsch 26.09.: groß, bildlastig, Text auf dem Bild). Gilt nur für die sechs Zielgruppenseiten: die Hero-Klasse
   v4-hero--mstack setzt der Renderer ausschließlich für die Gruppe „fuer-euch“, die übrigen Regeln hängen an den Seitenklassen (:is(…) unten).
   Desktop: höherer Hero, damit Szenen mit Menschen ganz sichtbar bleiben (z. B. der Hund am Boden); Einstieg und Bühnentexte im ruhigen linken
   Bilddrittel der Motive; Textgrund wie bei der Sauna-Bühne, gemessen auf mindestens 4,5:1 (große Schrift 3:1) ---------- */
@media (min-width: 64em) {
  .v4-hero--mstack:not(.v4-hero--plain) { min-height: min(86svh, 56.25vw); }
  .v4-hero--mstack .v4-hero__lead { max-width: 27em; }
  .v4-hero--mstack:not(.v4-hero--plain) .v4-crumbs { color: var(--ivory); }
  .v4-hero--mstack .v4-hero__scrim { background: linear-gradient(to bottom, rgba(14,20,18,.45) 0, rgba(14,20,18,.06) 30%, rgba(14,20,18,0) 45%), radial-gradient(ellipse 70% 100% at 4% 90%, rgba(14,20,18,.8) 0, rgba(14,20,18,.62) 45%, rgba(14,20,18,0) 80%), linear-gradient(to top, rgba(14,20,18,.45) 0, rgba(14,20,18,0) 34%); }
  .page--generations #zusammen .v4-stage__copy { width: min(30%, 21rem); }   /* Tafel: ruhige Zone links nur bis zur Großmutter */
}
:is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-stage__p { max-width: 24em; }
@media (min-width: 48em) {
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-stage__frame::before { background: linear-gradient(90deg, rgba(14,20,18,.8) 0, rgba(14,20,18,.62) 28%, rgba(14,20,18,.24) 50%, rgba(14,20,18,0) 66%); }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-duo__item::before { background: linear-gradient(0deg, rgba(14,20,18,.84) 0, rgba(14,20,18,.6) 30%, rgba(14,20,18,.12) 54%, rgba(14,20,18,0) 62%); }
}
.v4-hero--mstack + .v4-duo:has(.v3-sechead) { padding-top: clamp(2.25rem, 4.5vw, 4.25rem); }   /* Duo mit eigener Überschrift direkt nach dem Hero: Abstand wie nach einem normalen Abschnitt */
/* Tablet und schmale bzw. flache Fenster (48–63.99em): Bild ganz sichtbar oben, Brotkrumen, Titel und Einstieg darunter auf Nachtgrund – in diesen
   Bildformaten läge der Text sonst auf den Menschen (z. B. auf Hund und Großeltern). Telefon quer: Bildhöhe 78svh aus v3-mobile.css */
@media (min-width: 48em) and (max-width: 63.99em) {
  .v4-hero--mstack:not(.v4-hero--plain) { display: block; min-height: 0; }
  .v4-hero--mstack .v4-hero__media { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .v4-hero--mstack .v4-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(14,20,18,.45) 0, rgba(14,20,18,0) 24%, rgba(14,20,18,0) 74%, var(--night) 100%); }
  .v4-hero--mstack .v4-hero__scrim { display: none; }
  .v4-hero--mstack .v4-hero__in { padding: 1rem 0 2.75rem; }
}
/* Tablet und Telefon quer (48–63.99em): Bühnen- und Duo-Motive sind hier zu flach bzw. zu schmal für Text im Bild – das Bild bleibt frei,
   Überschrift und Text stehen direkt darunter auf demselben Nachtgrund (wie der Hero auf dem Telefon) */
@media (min-width: 48em) and (max-width: 63.99em) {
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-stage__frame { display: flex; flex-direction: column; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-stage__frame::before { display: none; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-stage__fig .pic { aspect-ratio: 16 / 9; max-height: 80svh; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-stage__copy { position: static; width: auto; gap: .75rem; padding: 1.4rem clamp(1.25rem, 3.5vw, 2rem) 1.75rem; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-stage__copy .v3-h2 { text-shadow: none; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-stage__frame > .v3-ai { top: .6rem; bottom: auto; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-stage__p { max-width: 36em; text-shadow: none; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-duo__item { display: flex; flex-direction: column; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-duo__item::before { display: none; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-duo__fig .pic { max-height: 80svh; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-duo__copy { position: static; flex: 1; padding: 1.1rem 1.25rem 1.4rem; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-duo__copy :is(.v4-duo__h, .v3-text) { text-shadow: none; }
}

/* ===== KI-Zeichen einheitlich (Wunsch Johannes 27.09.): bei jedem Bild unten rechts, so unauffällig wie möglich (22 px, leicht zurückgenommen) =====
   Ausnahme bleibt der Startseitenfilm (Symbol neben Play/Pause, am 26.09. ausdrücklich so freigegeben). */
.v3-ai:not(.v3-ai--hero) { width: 1.375rem; height: 1.375rem; opacity: .8; }
.v3-ai:not(.v3-ai--hero):hover, .v3-ai:not(.v3-ai--hero):focus-visible { opacity: 1; }
/* G15-01 (28.09.): unsichtbare Trefferfläche um das 22-px-Zeichen auf 32 px (Kreis) – das Symbol bleibt gleich groß; das Zeichen sitzt ≥ .5rem
   vom Bildrand, die Fläche bleibt im Bild. Nicht auf Telefonen (dort 44-px-Tippfeld) und nicht am Startseitenfilm (Pause-Taste direkt daneben) */
@media (min-width: 48em) and (pointer: fine), (min-width: 48em) and (min-height: 31.26em) { .v3-ai:not(.v3-ai--hero)::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; } }
.v3-close > .v3-ai { top: auto; bottom: 1rem; right: var(--gutter); }
.v4-duo__item > .v3-ai, .v4-stage__frame > .v3-ai, .v4-stage--below .v4-stage__frame > .v3-ai, .v4-stage--bottom .v4-stage__frame > .v3-ai { top: auto; bottom: .6rem; right: .6rem; }
/* Tablet (48–63.99em): wo das Bild oben und der Text darunter steht, sitzt das Zeichen unten rechts im Bild, nicht am Textende */
@media (min-width: 48em) and (max-width: 63.99em) {
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-stage__frame > .v3-ai { top: calc(min((100vw - 2 * var(--gutter)) * .5625, 80svh) - 2rem); bottom: auto; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-duo__item { display: grid; grid-template-rows: auto 1fr; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-duo__item > .v3-ai { position: relative; grid-area: 1 / 1; align-self: end; justify-self: end; margin: 0 .6rem .6rem 0; top: auto; right: auto; bottom: auto; }
  .v4-hero--mstack > .v3-ai { top: calc(100vw * .5625 - 2rem); bottom: auto; }
}

/* ===== Neuordnung Kopf und Footer (freigegeben 27.09.2026) =====
   Rechte Kopfseite: Sprache · FAQ · Kontakt · Buchen – Kontakt als gut lesbarer Textlink wie FAQ (keine Umrandung), Telefon/Brief entfallen. */
.v3-header__contact { min-height: 2.75rem; padding: 0 .35rem; border: 0; border-radius: 0; background: none; color: inherit; font-size: var(--fs-nav); font-weight: 600; line-height: 1; letter-spacing: .005em; text-decoration: none; align-items: center; transition: opacity .25s var(--ease); }
.v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-header__contact, .v3-header.is-scrolled .v3-header__contact, .v3-header--solid .v3-header__contact { border: 0; background: none; }
.v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-header__contact { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.v3-header.is-scrolled .v3-header__contact, .v3-header--solid .v3-header__contact { color: var(--night); }
.v3-header__contact:hover { opacity: .7; }
.v3-header .v3-header__contact[aria-current="page"], .v3-header .v3-header__contact:hover { background: none; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .35em; }

/* Sprachschalter „m“ (Nacharbeit 27.09., Johannes): Menü und Telefon-Footer – kompakter Schalter „Globus · Deutsch · Chevron“, die Liste
   erscheint erst nach Betätigung darunter; aktuelle Sprache markiert, noch nicht erzeugte Fassungen sichtbar als „in Vorbereitung“ (kein Link) */
.v3-lang--m { position: relative; }
.v3-lang--m .v3-lang__btn { gap: .5rem; min-height: 2.75rem; padding: 0; color: inherit; text-shadow: none; font: 500 1rem/1.2 var(--font-sans); letter-spacing: 0; }
.v3-lang--m .v3-lang__btn:hover { opacity: 1; text-decoration: underline; text-underline-offset: .28em; }
.v3-lang--m .v3-lang__globe { flex: none; opacity: .8; }
.v3-lang--m .v3-nav__chev { width: 12px; height: 12px; opacity: .7; transition: transform .2s var(--ease); }
.v3-lang--m .v3-lang__btn[aria-expanded="true"] .v3-nav__chev { transform: rotate(180deg); }
.v3-lang--m .v3-lang__panel { position: static; width: auto; margin: 0 0 .25rem; padding: 0 0 0 1.625rem; background: none; color: inherit; border: 0; border-radius: 0; box-shadow: none; }
.v3-lang--m .v3-lang__list { display: grid; gap: 0; margin: 0; padding: 0; }
.v3-lang--m .v3-lang__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--ivory-2); font: 400 1rem/1.3 var(--font-sans); text-align: left; text-decoration: none; }
.v3-lang--m .v3-lang__item.is-current { color: var(--ivory); font-weight: 600; }
.v3-lang--m .v3-lang__check { flex: none; opacity: .85; }
.v3-lang--m .v3-lang__soon { font-size: .8125rem; font-weight: 400; color: var(--ivory-3); }
.v3-lang--m button.v3-lang__item:hover, .v3-lang--m button.v3-lang__item:focus-visible { background: none; color: var(--ivory); }
.v3-lang--m .v3-lang__msg { margin: .25rem 0 .5rem; padding: 0; border: 0; font-size: .875rem; line-height: 1.45; color: var(--ivory-2); }
.v3-lang--m .v3-lang__msgt { display: block; color: var(--ivory); }
.v3-lang--m .v3-lang__msgde { display: block; }
/* Sprach-Kürzelzeile „c“ (Wunsch Johannes 27.09., Menü): Globus · DE EN DA NL FR UK RU – je 44 × 44 px, aktuelle Sprache kräftig mit Linie,
   noch nicht erzeugte Fassungen gedämpft (Antippen zeigt „in Vorbereitung“); die Fläche der letzten Kürzel darf in den Seitenrand reichen */
.v3-lang--c { color: inherit; }
.v3-lang--c .v3-lang__row { display: flex; align-items: center; gap: .375rem; margin-right: -12px; }
.v3-lang--c .v3-lang__globe { flex: none; opacity: .75; }
.v3-lang--c .v3-lang__codes { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.v3-lang--c .v3-lang__code { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: 600 .9375rem/1 var(--font-sans); letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.v3-lang--c .v3-lang__code.is-current { color: var(--ivory); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .4em; cursor: default; }
.v3-lang--c .v3-lang__code.is-soon { color: var(--ivory-3); font-weight: 500; }
.v3-lang--c a.v3-lang__code:hover, .v3-lang--c .v3-lang__code.is-soon:hover, .v3-lang--c .v3-lang__code.is-soon:focus-visible { color: var(--ivory); }
.v3-lang--c .v3-lang__code:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; border-radius: 3px; }
.v3-lang--c .v3-lang__msg { margin: .125rem 0 .5rem; padding: 0; border: 0; font-size: .875rem; line-height: 1.45; color: var(--ivory-2); }
.v3-lang--c .v3-lang__msgt { display: block; color: var(--ivory); }
.v3-lang--c .v3-lang__msgde { display: block; }

/* Hero-Umbau Telefon 27.09.: Kurzfassungen nur auf dem Telefon (v3-mobile.css) */
.v3-hero__dtvs, .v3-hero__more-arr { display: none; }
.v3-hero__subl { display: inline; }

/* Wunsch Johannes 28.09.: „Folgt uns auf Instagram“ (Startseite: Gästestimmen, Harz) – ruhiger Link mit Symbol in Nebeninfo-Größe (15 px), kein Knopf;
   Farbe vom Abschnitt (dunkel auf Creme, hell auf dem Bild). Nur ein Link, keine Einbettung */
.v4-ig { margin: 0; }
.v4-ig__a { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; color: inherit; font-size: .9375rem; line-height: 1.4; text-decoration: none; }
.v4-ig__ico { flex: none; width: 20px; height: 20px; }
.v4-ig__lead { font-weight: 600; }
.v4-ig__h { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: currentColor; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
.v4-ig__a:hover .v4-ig__h, .v4-ig__a:focus-visible .v4-ig__h { text-decoration-color: currentColor; }
.v4-ig__a .v3-ext { margin-left: .3em; font-size: .8125rem; opacity: .75; }
.v4-rev__ig { margin-top: .25rem; } .v4-rev__ig .v4-ig__a { color: var(--ink-2); }
@media (min-width: 64em) { .v3-stage__copy .v4-ig__a { color: var(--ivory); text-shadow: 0 1px 2px rgba(0,0,0,.4); } }   /* hell nur auf dem Bild (Desktop); auf Telefonen steht der Text unter dem Bild */

/* Master-Auftrag Chalets 30.09.: „So fragt ihr es an“ – „Ruft uns an“ als Link (Desktop/Tablet: Kontaktseite #kontakt, Telefon: tel:; je Breite genau einer
   sichtbar und fokussierbar), „Kontaktformular“ zur Anfrage, die Nummer darunter als eigener tel:-Link mit Symbol (Trefferfläche 44 px) */
.v4-call--tel { display: none; }
.v4-qa .v4-call, .v3-faq__a .v4-inl, .v4-qa .v4-inl { position: relative; }
.v4-qa .v4-call::after, .v3-faq__a .v4-inl::after, .v4-qa .v4-inl::after { content: ""; position: absolute; inset: -.17rem -.2rem; }   /* Trefferfläche ≥ 24 px, ohne in die Nachbarzeile zu reichen */
.v4-call__num { display: block; margin-top: .35rem; }
.v4-call__num a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.v4-call__num svg { flex: none; width: 1.125rem; height: 1.125rem; }

/* Sauna & Bad (Master-Auftrag und Hinweise Johannes 30.09.):
   – Galerie „So sieht es bei euch aus.“ so breit wie die Bildbühnen davor und danach (vorher je Seite 60 px eingerückt); Überschrift, Text und
     Bildgruppe bündig an der Kante der Fotos; Abstand darüber wie darunter (vorher 95 zu 65 px)
   – Massage: Text links auf dem Bild über der Treppe, schmaler Kasten, damit das Gesicht der Kundin frei bleibt
   – Duo (Komponente): Überschriften beider Bilder auf einer Höhe – vorher nach Textlänge versetzt (Wellness 28 px, Familie 52 px) */
.v4-gal--wide .v3-wide > .v3-sechead { width: auto; margin-inline: 0; }
@media (min-width: 48em) { .v4-stage + .v4-sec.v4-gal--wide:not(.v4-stage):not(.v4-duo) { padding-top: clamp(1.25rem, 2.3vw, 2.25rem); } }   /* Telefon war schon ausgeglichen */
@media (min-width: 64em) { .page--wellness #massage .v4-stage__copy { width: min(30%, 27rem); } .page--wellness #massage .v4-stage__p { max-width: 25rem; } }   /* Überschrift einzeilig, Absatz bleibt vor dem Gesicht */
@media (min-width: 48em) {
  @supports (grid-template-rows: subgrid) {
    .v4-duo__list { grid-template-rows: 1fr auto; row-gap: 0; }
    .v4-duo__item { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
    .v4-duo__item > .v4-duo__fig { grid-area: 1 / 1 / 3 / 2; }
    .v4-duo__copy { position: relative; grid-area: 2 / 1; align-self: start; }   /* gemeinsame Zeile: beide Texte beginnen auf derselben Höhe */
  }
}

/* Lage & Kontakt 30.09.: Instagram-Hinweis im Partnerstil – kleines Symbol im Link (18 px), kein Social-Media-Kasten */
.v4-social__a { display: inline-flex; align-items: center; gap: .5rem; }
.v4-social__a svg { flex: none; width: 1.125rem; height: 1.125rem; }
.v4-social { padding-bottom: 0; } .v4-social + .v4-partner { padding-top: clamp(1.75rem, 3vw, 2.75rem); }   /* mit dem Partnerhinweis ein ruhiges Paar, getrennt nur durch die Linie */

/* Lage & Kontakt 30.09. (Hinweis Johannes): Plan-Hinweis in der linken Spalte unter „Stufenfreier Zugang“ statt weit unter beiden Spalten;
   Telefon: linke Spalte aufgelöst, der Hinweis bleibt wie bisher am Ende nach „Orientierung“ */
.v4-arrive__note { margin: 0; }
@media (max-width: 47.99em) { .v4-arrive__col:first-child { display: contents; } .v4-arrive__note { order: 1; } }

/* Preise & Buchung (Master-Auftrag 30.09.): Tarifkarten mit fester Reihenfolge – Vorteil als ruhige Kennzeile (Bezugsgröße F03 offen, daher keine
   Rabatt-Plakette), Name mit Zusatz als eigener Zeile, Stornierung als eigener Block mit betonter Gebühr, Zahlung als Fußzeile an gleicher Stelle */
.v4-tcard { gap: .55rem; }
.v4-tcard__badge { align-self: flex-start; margin: 0; padding: .28rem .65rem; border-radius: 999px; background: rgba(111,82,25,.1); color: #5c4414; font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.v4-tcard__h { margin: .1rem 0 0; }
.v4-tcard__sub { display: block; margin-top: .15rem; font-family: var(--font-sans); font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }
.v4-tcard__block { margin-top: .2rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.v4-tcard__k { margin: 0 0 .4rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-tcard__act { margin: .9rem 0 0; } .v4-tcard__cta { width: 100%; }   /* 01.10. (Johannes): Knopf am Kartenende direkt in die Buchung; kein Fett mehr in den Stufen */
.v4-tcard__pay { display: grid; gap: .15rem; } .v4-tcard__pay .v4-tcard__k { margin: 0; } .v4-tcard__pv { color: var(--ink-2); }
/* Zahlungsblock als Info-Raster (2 × 2 ab Tablet) statt Fließtext mit Bettbild */
.v4-sec--facts .v4-text { display: block; } .v4-sec--facts .v4-text__body { max-width: none; }
.v4-facts { margin: .5rem 0 0; display: grid; gap: 0; }
.v4-facts__item { padding: 1rem 0; border-top: 1px solid var(--line); } .v4-facts__item:last-child { border-bottom: 1px solid var(--line); }
.v4-facts dt { margin: 0 0 .3rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-facts dd { margin: 0; max-width: 34em; color: var(--ink-2); line-height: 1.55; }
@media (min-width: 48em) { .v4-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); } .v4-facts__item:nth-last-child(2) { border-bottom: 1px solid var(--line); } }
/* „Noch eine Frage vorab?“: Anrufen / E-Mail schreiben mit sichtbarer Nummer und Adresse (44 px Tippziel) */
.v4-reach { list-style: none; margin: .25rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.v4-reach li { border-bottom: 1px solid var(--line); }
.v4-reach a { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; min-height: 2.75rem; padding: .55rem 0; color: var(--ink); text-decoration: none; }
.v4-reach svg { flex: none; width: 1.125rem; height: 1.125rem; }
.v4-reach__k { font-weight: 600; } .v4-reach__v { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; overflow-wrap: anywhere; }
.v4-reach a:hover .v4-reach__v, .v4-reach a:focus-visible .v4-reach__v { color: var(--ink); }
.v4-cols__item .v4-reach + .v4-cols__fig, .v4-cols__item .v4-reach ~ .v4-cols__fig { margin-top: 1.5rem; }
/* Aktuelle Angebote: Einleitung und „Aktuelle Specials.“ – vorbereitet für Bild und spätere Angebotskarten */
.v4-offers__intro { font-family: var(--font-serif); font-size: var(--fs-h3); max-width: 30em; color: var(--ink); margin: 0; }
.v4-specials { display: grid; gap: 1.25rem; margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.v4-specials:not(.v4-specials--media) { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-top: 2px solid var(--night); }
@media (min-width: 48em) { .v4-specials--media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); } }
.v4-specials__fig { margin: 0; } .v4-specials__fig .pic { aspect-ratio: 4 / 3; border-radius: 2px; }
.v4-specials__copy { display: grid; gap: .8rem; justify-items: start; max-width: 34rem; } .v4-specials__copy .v3-h2 { margin: 0; } .v4-specials__copy .v4-actions { margin: .35rem 0 0; }
.v4-offers__list { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
/* /buchen/ „Unsere Angebote“ als Bildband (gleiche Gestaltung wie der Gutschein-Hinweis der Startseite) */
.v4-book + .v4-offerband { padding-top: clamp(1.75rem, 3vw, 2.75rem); }

/* Wunsch Johannes 30.09.: Sterne der Google-Bewertung im Footer leuchten wie die Sterne im Hero */
.v3-grate__stars svg { filter: brightness(1.12) drop-shadow(0 0 3px rgba(255,255,255,.5)) drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }

/* Master-Auftrag 30.09. „Teams & Tagungen“: Pakete als ruhige Karten (Aufbau wie die Tarifkarten), Leistungen/Snacks als zweite Ebene,
   Bildpause in Bühnenbreite, Walpurgishof als Kontaktkarte, Programmpunkte mit hervorgehobenem Namen */
.v4-pkgs__head { display: grid; gap: 1rem; max-width: 40em; margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
.v4-pkgs__head .v3-h2, .v4-pkgs__head .v3-text { margin: 0; }
.v4-pkgs__head .v4-links { margin: 0; }
.v4-pkgs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 48em) { .v4-pkgs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); } }
.v4-pkg { display: flex; flex-direction: column; gap: .9rem; padding: 1.35rem 1.4rem 1.4rem; border: 1px solid var(--line); border-top: 2px solid var(--night); background: rgba(255,255,255,.4); }
.v4-pkg__h { margin: 0; font-family: var(--font-serif); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: 1.15; font-weight: 400; }
.v4-pkg__rows { margin: 0; display: grid; gap: .85rem; }
.v4-pkg__rows > div { display: grid; gap: .25rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.v4-pkg__rows dt { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-pkg__rows dd { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.v4-pkgs__more { display: grid; gap: 2rem; margin-top: clamp(2.25rem, 4vw, 3.5rem); }
@media (min-width: 64em) { .v4-pkgs__more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } }
.v4-pkgs__h3 { margin: 0 0 .75rem; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; font-weight: 400; }
.v4-pkgs__more .v4-note { font-size: .875rem; }
.v4-break { padding: var(--s-m) 0 0; }
.v4-break__frame { position: relative; overflow: hidden; border-radius: 2px; background: var(--night); isolation: isolate; }
.v4-break__fig { margin: 0; } .v4-break__fig .pic { aspect-ratio: 21 / 9; max-height: 40rem; }
.v4-break__fig .pic img { width: 100%; height: 100%; object-fit: cover; }
/* 30.09. abends (Wunsch Johannes, Desktop: „große Bilder und keinen Text drauf“): ab Tablet trägt die Bildpause die Überschrift des folgenden
   Abschnitts – unten links wie bei den Bühnen, weicher Verlauf von unten; im Abschnitt bleibt sie für Screenreader und Suchmaschinen (sr-only).
   Telefon: gleiche Logik in v3-mobile.css */
@media (min-width: 48em) {
  .v4-break__frame:has(> .v4-break__h)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(14,20,18,.74) 0, rgba(14,20,18,.4) 28%, rgba(14,20,18,0) 56%); }
  .v4-break__frame > .v4-break__h { display: block; position: absolute; left: clamp(1.5rem, 4.5vw, 4.5rem); right: clamp(4rem, 8vw, 8rem); bottom: clamp(1.25rem, 3vw, 2.75rem); z-index: 2; margin: 0; font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; color: #fff; text-wrap: balance; text-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: none; }
  .v4-break__frame > .v3-ai { z-index: 3; }
  .v3-h2.v3-h2--mbreak { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.v4-reachto { margin-top: 1.25rem; max-width: 30em; }
.v4-reachto__n { margin: 0 0 .35rem; font-weight: 600; color: var(--ink); }
.v4-list--lead li strong { font-weight: 600; color: var(--ink); }

/* Wunsch Johannes 30.09.: „Wann kommt ihr?“ überall reinweiß statt Elfenbein; Frage und Aktion einheitlich mittig auf dem Bild (Entscheidung 27.09.) */
.v3-close__h { color: #fff; }

/* 30.09. (Frühstück, Rad, Massagen): Kontaktkarte, Anschriftzeile und Kurzangaben mit Überschrift */
.v4-textmeta { margin: .5rem 0 0; font-size: .9375rem; color: var(--ink-3); }
.v4-reachto__a { margin: 0 0 .5rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.v4-reachto__web { margin: 0 0 .35rem; }
.v4-facts--q { margin-top: 1.25rem; }
.v4-facts--q dt { margin: 0 0 .25rem; font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink); }
.v4-facts--q .v4-facts__item { padding: .85rem 0; }
.v4-facts__meta { display: block; margin-top: .3rem; font-size: .875rem; color: var(--ink-3); }
.v4-text__body > .v4-reachto { margin-top: 1.5rem; }
/* Rad 30.09. (Wunsch Johannes „auf einer Höhe“): Bild so hoch wie der Textblock, oben bündig */
@media (min-width: 64em) {
  .v4-sec--stretch .v4-text { align-items: stretch; }
  .v4-sec--stretch .v4-text__frame, .v4-sec--stretch .lb-open, .v4-sec--stretch .v4-text__fig { height: 100%; }
  .v4-sec--stretch .v4-text__fig .pic { height: 100%; max-height: none; aspect-ratio: auto; min-height: 24rem; }
  .v4-sec--stretch .v4-text__fig .pic img { width: 100%; height: 100%; object-fit: cover; }
}

/* Master-Auftrag Wandern 30.09.: Tourenliste ruhiger – klarer Titel, Fakten rechts untereinander, Start sekundär, mehr Luft */
.v4-tour { padding: 1.5rem 0 1.6rem; gap: .5rem; }
.v4-tour__h { font-size: clamp(1.25rem, 1.12rem + .45vw, 1.5rem); line-height: 1.25; }
.v4-tour__h .v3-ext { font-size: .72em; color: var(--ink-3); }
.v4-tour__start { font-size: .875rem; }
@media (min-width: 64em) {
  .v4-tour { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); row-gap: .45rem; }
  .v4-tour__facts { grid-column: 2; grid-row: 1 / span 3; align-self: start; flex-direction: column; align-items: flex-start; gap: .4rem; padding: .3rem 0 .2rem 1.5rem; border-left: 1px solid var(--line); }
  .v4-tour__start { grid-column: 1; grid-row: 3; }
}

/* Master-Auftrag Massagen 30.09. + Wunsch Johannes: Anwendungen mit Bild, Dauer/Preis als kleine Tabelle */
.v4-treats__head { display: grid; gap: 1rem; max-width: 40em; margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
.v4-treats__head .v3-h2, .v4-treats__head .v3-text, .v4-treats__head .v4-links { margin: 0; }
.v4-treats__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2vw, 1.75rem); }
@media (min-width: 48em) { .v4-treats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .v4-treats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v4-treat { display: flex; flex-direction: column; gap: .95rem; }
.v4-treat__fig { margin: 0; position: relative; } .v4-treat__fig .pic { display: block; aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden; background: var(--night); }
.v4-treat__fig .pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx-d, 50% 50%); }
.v4-treat__h { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; font-weight: 400; }
.v4-treat__meta { margin: .2rem 0 0; font-size: .875rem; color: var(--ink-3); }
.v4-treat__text { margin: .55rem 0 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; max-width: 30em; }
.v4-treat__prices { margin: .85rem 0 0; display: grid; max-width: 15rem; }
.v4-treat__prices > div { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.v4-treat__prices > div:last-child { border-bottom: 1px solid var(--line); }
.v4-treat__prices dt { color: var(--ink-2); } .v4-treat__prices dd { margin: 0; font-weight: 600; color: var(--ink); }

/* Master-Auftrag Gutscheine 30.09.: Zustellung (E-Mail/Post) als ruhige Auswahl, Anschriftfelder, direkter Kontakt nachrangig, Prüfmodus-Hinweis */
.v4-voucher__delivery { border: 0; margin: 0; padding: 0; min-width: 0; }
.v4-voucher__delivery legend { padding: 0; margin: 0 0 .5rem; font-weight: 600; font-size: .9375rem; }
.v4-choice { display: flex; flex-wrap: wrap; gap: .6rem; }
.v4-choice__item { position: relative; display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .55rem 1.1rem .55rem .9rem; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; font-size: .9375rem; }
.v4-choice__item input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--night); }
.v4-choice__item:has(input:checked) { border-color: var(--night); box-shadow: inset 0 0 0 1px var(--night); }
.v4-choice__item:has(input:focus-visible) { outline: 3px solid var(--night); outline-offset: 2px; }
.v4-voucher__delivery .field__hint { margin: .55rem 0 0; }
.v4-voucher__postal { display: grid; gap: .1rem; padding: 1rem 1rem .4rem; border-left: 2px solid var(--night); background: rgba(255,255,255,.45); }
.v4-voucher__postal[hidden] { display: none; }
.v4-voucher__postal-k { margin: 0 0 .5rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
@media (min-width: 30em) { .field__row--zip { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.v4-voucher__direct { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); }
.v4-voucher__direct-k { font-weight: 600; color: var(--ink); }
.v4-voucher__direct a { text-decoration: underline; text-underline-offset: .2em; }
.iform__testnote { margin: .75rem 0 0; font-size: .8125rem; color: var(--ink-3); font-style: italic; }

/* /angebote/ 30.09.: helles Winterbild – kräftigerer Textgrund links, damit Einleitung und Schaltfläche gut lesbar bleiben */
@media (min-width: 48em) {
  .v4-offers.v4-stage .v4-stage__frame::before { width: 100%; height: 100%; background: linear-gradient(90deg, rgba(14,20,18,.78) 0, rgba(14,20,18,.6) 30%, rgba(14,20,18,.18) 56%, rgba(14,20,18,0) 72%); }
}

/* Wunsch Johannes 30.09.: Kontaktkarten mit abgedunkeltem Foto der Anlage, Schrift hell */
.v4-card--bg { position: relative; overflow: hidden; isolation: isolate; background: var(--night); color: var(--ivory); border-color: transparent; min-height: 9rem; }
.v4-card__bg { position: absolute; inset: 0; z-index: -1; }
.v4-card__bg .v4-card__fig, .v4-card__bg .pic { margin: 0; width: 100%; height: 100%; }
.v4-card__bg .pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.v4-card__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,20,18,.84) 0, rgba(14,20,18,.66) 55%, rgba(14,20,18,.52) 100%); }
.v4-card--bg .v4-card__k { color: rgba(255,255,255,.78); }
.v4-card--bg .v4-card__v, .v4-card--bg .v4-card__s, .v4-card--bg .v4-card__s a, .v4-card--bg .v4-card__addr { color: #fff; }
.v4-card--bg .v4-card__s a { text-decoration-color: rgba(255,255,255,.55); }
.v4-card--bg a:focus-visible { outline-color: #fff; }

/* Wünsche Johannes 30.09. (Kontakt): weitere Adressen in der Mailkarte; Anfrageblock ohne Bild – Themenliste links, Formular als Fläche rechts,
   beide oben bündig, nichts läuft mit (kein sticky); Beschriftungen in Satzschreibung, ruhige Felder, klarer Fokus (gilt auch für den Gutschein) */
.v4-card__more { list-style: none; margin: .6rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .3rem; font-size: .9375rem; }
.v4-card__more li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.v4-card__mk { min-width: 7.5rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-card__more a { color: inherit; text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.v4-card--bg .v4-card__more { border-top-color: rgba(255,255,255,.22); } .v4-card--bg .v4-card__mk { color: rgba(255,255,255,.72); } .v4-card--bg .v4-card__more a { color: #fff; }
@media (min-width: 64em) {
  .v4-form__intro { position: static; }
  .v4-form__grid { align-items: start; }
  .v4-form:not(.v4-voucher) .v4-form__intro .v4-topics { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .v4-form:not(.v4-voucher) .v4-form__intro .v4-topics__item { position: relative; min-height: 3rem; padding: .7rem 1rem .7rem 1.1rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 1rem; }
  .v4-form:not(.v4-voucher) .v4-form__intro .v4-topics__item::after { content: "→"; margin-left: auto; opacity: 0; transition: opacity .2s var(--ease); }
  .v4-form:not(.v4-voucher) .v4-form__intro .v4-topics__item:hover { background: rgba(255,255,255,.6); }
  .v4-form:not(.v4-voucher) .v4-form__intro .v4-topics__item:hover::after, .v4-form:not(.v4-voucher) .v4-form__intro .v4-topics__item[aria-pressed="true"]::after { opacity: 1; }
  .v4-form:not(.v4-voucher) .v4-form__intro .v4-topics__item[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--night); }
  .v4-form:not(.v4-voucher) .v4-iform__topicnow { display: block; }
  .v4-form:not(.v4-voucher) .v4-iform [data-field="topic"] { display: none; }
}
.v4-iform__topicnow { display: none; margin: 0 0 .25rem; font-size: .9375rem; color: var(--ink-2); }
.v4-iform__topicnow strong { color: var(--ink); }
.v4-form .v4-iform { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: clamp(1.25rem, 2.4vw, 2rem); }
.v4-iform .field label, .v4-iform .v4-voucher__delivery legend { font-family: var(--font-sans); font-size: .9375rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink); }
.v4-iform .field label .field__opt { font-weight: 400; color: var(--ink-3); }
.v4-iform input:not([type=radio]):not([type=checkbox]), .v4-iform select, .v4-iform textarea { border: 1px solid rgba(14,20,18,.24); border-radius: 6px; background: #fff; }
.v4-iform input:not([type=radio]):not([type=checkbox]), .v4-iform select { min-height: 3rem; }
.v4-iform input:focus-visible, .v4-iform select:focus-visible, .v4-iform textarea:focus-visible { outline: none; border-color: var(--night); box-shadow: 0 0 0 3px rgba(14,20,18,.14); }
.v4-iform .field.is-invalid input, .v4-iform .field.is-invalid select, .v4-iform .field.is-invalid textarea { border-color: #a33a2b; }
.v4-form .v4-iform .iform__actions { margin-top: .25rem; }

/* Instagram-Band der Unterseiten (30.09., Nachbesserung 2): Gestaltung wie „Noch ein bisschen Harz?“ – nur Abstand zum Abschluss */
.v4-social.v4-igband { padding-bottom: var(--s-m); }
.v4-igband__h { font-weight: 600; color: var(--ink); }
.v4-partner + .v4-igband { padding-top: 0; }

/* Wunsch Johannes 30.09. (Kontakt, „Gut ankommen“): Orientierung kompakter (Spalte war ein Raster mit großem Abstand zwischen jeder Zeile);
   Desktop: beide Spalten gleich hoch – oben die Überschriften, unten schließen Hinweis links und Entfernungstabelle rechts auf einer Linie ab */
.v4-arrive__col.v4-arrive__item { gap: 0; }
.v4-arrive .v4-dist__k { margin: .9rem 0 .15rem; }
.v4-arrive .v4-arrive__h + .v4-dist__k { margin-top: .35rem; }
.v4-arrive .v4-dist > div { padding: .38rem 0; }
@media (min-width: 48em) {
  .v4-arrive { align-items: stretch; }
  .v4-arrive__col { display: flex; flex-direction: column; gap: 1.5rem; }
  .v4-arrive__col.v4-arrive__item { gap: 0; }
  .v4-arrive__col:first-child .v4-arrive__note { margin-top: auto; }
  .v4-arrive__col.v4-arrive__item > .v4-dist__k:first-of-type { margin-top: auto; padding-top: .75rem; }
  .v4-arrive .v4-dist > div:last-child { padding-bottom: 0; }
}

/* Wunsch Johannes 30.09. („Gut zu wissen.“ mit Bild): Bild reicht bis zum Ende der Fragenliste, Verweise unten auf dem Bild */
.v3-faq__onpic { display: none; }
@media (min-width: 64em) {
  .v3-faq--media .v3-faq__grid { align-items: stretch; }
  .v3-faq--media .v3-faq__side { display: flex; flex-direction: column; }
  .v3-faq--media .v3-faq__mlinks { display: none; }
  .v3-faq--media .v3-faq__media { position: relative; flex: 1 1 auto; display: flex; max-width: none; min-height: 22rem; margin-top: clamp(1rem, 1.6vw, 1.5rem); border-radius: 2px; overflow: hidden; }
  .v3-faq--media .v3-faq__fig, .v3-faq--media .v3-faq__media .pic { flex: 1 1 auto; height: 100%; aspect-ratio: auto; }
  .v3-faq--media .v3-faq__media .pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .v3-faq__onpic { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 4rem 1.5rem 1.35rem; background: linear-gradient(to top, rgba(14,20,18,.82) 0, rgba(14,20,18,.55) 55%, rgba(14,20,18,0) 100%); }
  .v3-faq__onpic .v4-links { display: grid; justify-items: start; gap: .1rem; margin: 0; }
  .v3-faq__onpic .v3-link { color: #fff; text-decoration-color: rgba(255,255,255,.6); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .v3-faq--media .v3-faq__media > .v3-ai { z-index: 3; top: .6rem; bottom: auto; }
}

/* Wunsch Johannes 30.09. (Kontaktformular): „Gut zu wissen“ je Thema – Desktop links unter den Themen (mit Bild), Telefon kompakt im Formular */
.v4-help { border-radius: 8px; overflow: hidden; background: var(--night); color: var(--ivory); }
.v4-help[hidden] { display: none; }
.v4-help.is-in { animation: v4HelpIn .32s var(--ease-out, ease-out) both; }
@keyframes v4HelpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v4-help.is-in { animation: none; } }
.v4-help__media { position: relative; } .v4-help__fig { margin: 0; } .v4-help__media .pic { display: block; aspect-ratio: 16 / 7; overflow: hidden; }
.v4-help__media .pic img { width: 100%; height: 100%; object-fit: cover; }
.v4-help__body { display: grid; gap: .55rem; padding: 1.15rem 1.35rem 1.3rem; }
.v4-help__k { margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.7); }
.v4-help__h { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; color: #fff; }
.v4-help__facts { list-style: none; margin: .1rem 0 0; padding: 0; display: grid; gap: .4rem; font-size: .9375rem; line-height: 1.45; color: rgba(255,255,255,.92); }
.v4-help__facts li { position: relative; padding-left: 1.5rem; }
.v4-help__facts li::before { content: ""; position: absolute; left: .1rem; top: .38em; width: .8rem; height: .45rem; border-left: 2px solid rgba(255,255,255,.85); border-bottom: 2px solid rgba(255,255,255,.85); transform: rotate(-45deg); }
.v4-help__links { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; margin: .35rem 0 0; }
.v4-help__links .v3-link { color: #fff; text-decoration-color: rgba(255,255,255,.55); }
.v4-help__call { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1rem; border-radius: 999px; background: var(--ivory); color: var(--night); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.v4-help__call svg { width: 1rem; height: 1rem; } .v4-help__call:hover, .v4-help__call:focus-visible { background: #fff; }
.v4-helpbox--m { display: none; }
@media (max-width: 47.99em) {
  .v4-helpbox:not(.v4-helpbox--m) { display: none; }
  .v4-helpbox--m { display: block; }
  .v4-help--m .v4-help__body { padding: 0 1.1rem 1.1rem; }
  /* 30.09. abends: einklappbar – eine Zeile mit Plus, Inhalt nach dem Antippen */
  .v4-help--m > .v4-help__sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; min-height: 3.25rem; padding: .7rem 1.1rem; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
  .v4-help--m > .v4-help__sum::-webkit-details-marker { display: none; }
  .v4-help--m .v4-help__k { grid-column: 1; }
  .v4-help--m .v4-help__h { grid-column: 1; display: block; font-size: 1.125rem; }
  .v4-help--m .v3-faq__ico { grid-column: 2; grid-row: 1 / span 2; color: #fff; }
  .v4-help--m > .v4-help__sum:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
}
@media (min-width: 64em) {
  .v4-form:not(.v4-voucher) .v4-form__grid { align-items: stretch; }
  .v4-form:not(.v4-voucher) .v4-form__intro { display: flex; flex-direction: column; gap: 1rem; }
  .v4-form:not(.v4-voucher) .v4-helpbox:not(.v4-helpbox--m) { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: .75rem; }
  .v4-form:not(.v4-voucher) .v4-helpbox:not(.v4-helpbox--m) .v4-help:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; }
  .v4-form:not(.v4-voucher) .v4-form__stage { display: flex; flex-direction: column; }
  .v4-form:not(.v4-voucher) .v4-iform:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; }
  .v4-form:not(.v4-voucher) .v4-iform [data-field="message"] { flex: 1 1 auto; display: flex; flex-direction: column; }
  .v4-form:not(.v4-voucher) .v4-iform [data-field="message"] textarea { flex: 1 1 auto; min-height: 7.5rem; }
  .v4-form.is-measuring .v4-form__grid { align-items: start !important; }
  .v4-form.is-measuring .v4-iform, .v4-form.is-measuring .v4-iform [data-field="message"], .v4-form.is-measuring .v4-iform textarea { flex: none !important; }
}

/* 30.09.: Hilfekarte je Thema nur einmal sichtbar – ab Tablet links unter den Themen, auf dem Telefon im Formular */
@media (min-width: 48em) { .v4-form .v4-helpbox--m { display: none !important; } }

/* Wunsch Johannes 30.09.: Bestätigung nach dem Speichern der Datenschutz-Einstellungen als kleine Meldung unten (statt leerer Dialogbox) */
.v4-toast { position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom)); z-index: 200; display: inline-flex; align-items: center; gap: .55rem; max-width: calc(100vw - 2rem); padding: .7rem 1.1rem .7rem .95rem; border-radius: 999px; background: var(--night); color: var(--ivory); font-size: .9375rem; line-height: 1.3; box-shadow: 0 10px 30px rgba(14,20,18,.25); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .25s var(--ease-out, ease-out), transform .25s var(--ease-out, ease-out); }
.v4-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.v4-toast svg { flex: none; color: #9fd3a6; }
@media (max-width: 47.99em) { .v4-toast { bottom: calc(5.25rem + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .v4-toast { transition: none; transform: translate(-50%, 0); } }

/* 30.09.: Newsletter-Seite (Bestätigen/Abmelden) und Hinweisband */

.v4-nlact[hidden] { display: none; }


.v3-news__status.is-error { color: #a33a2b; }

.v4-nlpage:not(:has(.v4-nlact:not([hidden]))) { padding-top: 0; }

/* Wunsch Johannes 30.09. (Gutscheine): links ein hohes Bild bis zum Formularende, oben darauf der Gutschein mit dem Wunschbetrag; Formular rechts
   im Stil des Kontaktformulars (weiße Fläche, Beschriftungen in Satzschreibung) */
@media (min-width: 64em) {
  .v4-voucher .v4-form__grid { align-items: stretch; }
  .v4-voucher .v4-form__grid > .v4-form__intro { display: flex; flex-direction: column; gap: 1rem; }   /* schlägt „.v4-form__grid > div:first-child { display: grid }“ */
  .v4-voucher .v4-vshot { flex: 1 1 auto; min-height: 34rem; max-width: none; margin: .5rem 0 0; border-radius: 8px; }
  .v4-voucher .v4-vshot .pic { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .v4-voucher .v4-vshot .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
  .v4-voucher .v4-vshot .v4-vcard { top: 2.5rem; width: 74%; transform: translateX(-50%) rotate(-3deg); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
  .v4-voucher .v4-vshot::after { content: ""; position: absolute; inset: 0 0 auto; height: 55%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(14,20,18,.45), rgba(14,20,18,0)); }
}

/* Gutschein 30.09. (Nachbesserung): Zustellung als schlanker Segmentschalter statt großer Kästen; Wunschbetrag groß (erscheint live auf dem Gutschein) */
.v4-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: .25rem; border-radius: 999px; background: rgba(14,20,18,.06); border: 1px solid var(--line); }
.v4-seg__opt { position: relative; display: block; cursor: pointer; }
.v4-seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.v4-seg__opt span { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .45rem 1.35rem; border-radius: 999px; font-size: .9375rem; font-weight: 600; color: var(--ink-2); transition: background-color .2s var(--ease), color .2s var(--ease); white-space: nowrap; }
.v4-seg__opt input:checked + span { background: var(--night); color: var(--ivory); box-shadow: 0 1px 3px rgba(14,20,18,.2); }
.v4-seg__opt input:focus-visible + span { outline: 3px solid var(--night); outline-offset: 2px; }
.v4-voucher__delivery .field__hint { margin-top: .5rem; }
.v4-voucher__amount .v4-voucher__eur { max-width: 16rem; }
.v4-voucher__amount input { font-family: var(--font-serif); font-size: 1.625rem; min-height: 3.5rem !important; padding-right: 2.5rem; }
.v4-voucher__amount .v4-voucher__eur span { font-size: 1.25rem; }
.v4-voucher__delivery .v4-seg { justify-self: start; width: auto; }

/* Wunsch Johannes 30.09.: Beispielgutschein wie eine echte Geschenkkarte – Logo und „Wertgutschein“ oben, Betrag groß (Platzhalter einzeilig), Goldlinie unten */
.v4-vshot .v4-vcard { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto; align-items: end; gap: .3rem 1rem; aspect-ratio: 1.6 / 1; padding: clamp(1.1rem, 1.6vw, 1.5rem) clamp(1.2rem, 1.8vw, 1.65rem); border-radius: 14px; background: radial-gradient(120% 95% at 0% 0%, #22322b 0%, #121a17 55%, #0e1412 100%); color: var(--ivory); box-shadow: 0 24px 48px rgba(0,0,0,.42), inset 0 0 0 1px rgba(217,161,46,.38); }
.v4-vshot .v4-vcard::before { inset: 9px; border-radius: 9px; border-color: rgba(217,161,46,.18); }
.v4-vshot .v4-vcard__logo { grid-column: 1; grid-row: 1; align-self: start; height: 1.3rem; margin: 0; }
.v4-vshot .v4-vcard__k { grid-column: 2; grid-row: 1; align-self: start; margin-top: .15rem; font-size: .6875rem; letter-spacing: .2em; color: #D9A12E; }
.v4-vshot .v4-vcard__v { grid-column: 1 / -1; grid-row: 3; white-space: nowrap; line-height: 1; font-size: clamp(2.1rem, 1.3rem + 2vw, 3.1rem); letter-spacing: -.01em; }
.v4-vshot .v4-vcard__v.is-empty { font-size: clamp(1.25rem, .9rem + 1vw, 1.75rem); color: rgba(255,255,255,.9); }
.v4-vshot .v4-vcard__s { grid-column: 1 / -1; grid-row: 4; margin-top: .55rem; padding-top: .6rem; border-top: 1px solid rgba(217,161,46,.35); font-size: .8125rem; line-height: 1.35; color: rgba(255,255,255,.78); }
@media (min-width: 64em) { .v4-voucher .v4-vshot .v4-vcard { width: 82%; } }

/* Wunsch Johannes 30.09. (AGB): Ziffern in eigener Spalte, hängender Einzug */
.v4-prose .v4-clause { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); column-gap: .4rem; }
.v4-clause__n { font-family: var(--font-sans); font-size: .875rem; font-weight: 600; line-height: inherit; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: .12em; }
@media (max-width: 47.99em) { .v4-prose .v4-clause { grid-template-columns: 2.6rem minmax(0, 1fr); } }
@media print { .v4-prose .v4-clause { grid-template-columns: 2.6rem 1fr; } }

/* Wunsch Johannes 30.09. (Rechtstexte): nummerierte Kapitelüberschriften mit hängendem Einzug – die zweite Zeile beginnt unter dem Titeltext */
.v4-prose h2.v4-h2n { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); column-gap: .4rem; }   /* gleiches Raster wie die Ziffern 23.1 … – Titel und Folgezeile auf der Textlinie */
@media (max-width: 47.99em) { .v4-prose h2.v4-h2n { grid-template-columns: 2.6rem minmax(0, 1fr); } }

/* Wunsch Johannes 30.09.: Tarife (8.2) und Extras (20.1) in den AGB als ruhige Angabenliste im Ziffernraster statt Aufzählungspunkten –
   Titel und Liste beginnen auf der Textlinie der Klauseln (Ziffernspalte 3.1rem + Abstand .4rem), Bezeichnung links, Wert rechts */
.v4-prose .v4-terms-h { font-size: 1.125rem; margin: 1.5rem 0 .4rem 3.5rem; }
.v4-prose .v4-terms { margin: 0 0 1.25rem 3.5rem; border-top: 1px solid var(--line); }
.v4-terms__row { display: grid; grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr); column-gap: 1.25rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.v4-terms dt { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.v4-terms dd { margin: 0; line-height: 1.5; }
@media (max-width: 47.99em) {
  .v4-prose .v4-terms-h, .v4-prose .v4-terms { margin-left: 3rem; }
  .v4-terms__row { grid-template-columns: minmax(0, 1fr); row-gap: .1rem; }
  .v4-terms dt { font-size: .8125rem; }
}
@media print { .v4-prose .v4-terms-h, .v4-prose .v4-terms { margin-left: 3rem; } }

/* Wunsch Johannes 30.09. (FAQ-Hero): Überschrift bleibt zweizeilig über dem Bild, der kurze Lead steht darunter in zwei ausgewogenen Zeilen
   in derselben Breite – ruhiger Textblock statt einer langen Zeile unter zwei kurzen */
.page--faq .v4-hero__lead { max-width: 21.5em; text-wrap: pretty; margin-top: .15rem; }   /* Umbruch nach „Hund –“: Zeile 1 füllt, Zeile 2 „hier findet ihr die Antworten.“ */

/* Wunsch Johannes 30.09. (Rad, Verleih): Angabenband direkt unter der Bühne – Kurzangaben (zwei Spalten) links, Kontaktkarte rechts, Hinweis darunter */
.v4-stage__info { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start;
  padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.5rem, 4.5vw, 4.5rem) 0; }
.v4-stage__info .v4-facts--q { margin-top: 0; }
.v4-stage__info .v4-reachto { margin-top: 0; padding-top: .85rem; }
/* 02.10.2026 (Wunsch Johannes): Partnerhinweis als letzte Zeile der Kontaktkarte statt loser Zeile unter dem Band */
.v4-reachto__note { margin: .85rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.v4-stage__info .v4-stage__note { grid-column: 1 / -1; margin: 1rem 0 0; }
@media (max-width: 63.99em) { .v4-stage__info { grid-template-columns: minmax(0, 1fr); } .v4-stage__info .v4-reachto { padding-top: 1rem; } }
@media (max-width: 47.99em) { .v4-stage__info { padding: 1.25rem 0 0; } }

/* Wunsch Johannes 30.09. (/buchen/ „Auf einen Blick“): Panel als ruhige Karte; untere Zeile mit drei Angaben im Raster der Eckdaten statt loser Sätze */
.v4-book__panel { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1.25rem, 3vw, 2.5rem); gap: 1.25rem; }
.v4-book:has(+ .v4-partner) .v4-book__panel, .v4-book__panel { border-bottom: 1px solid var(--line); padding-bottom: clamp(1.25rem, 2.4vw, 2rem); }
.v4-book__meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; align-items: start; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.v4-book__mi { min-width: 0; }
.v4-book__ml { margin: 0 0 .2rem; font-size: .8125rem; font-weight: 600; color: var(--ink-3); }
.v4-book__mv { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.v4-book__mv a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(14,20,18,.35); }
.v4-book__mv a:hover { text-decoration-color: currentColor; }
.v4-book__mv.v4-book__voucher .v3-link { text-decoration: none; font-weight: 600; color: var(--ink); }
@media (min-width: 48em) { .v4-book__meta { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .v4-book__mi { padding: 0 clamp(1rem, 2vw, 2rem); border-left: 1px solid var(--line); } .v4-book__mi:first-child { padding-left: 0; border-left: 0; } }

/* ===== 30.09.2026 · Master-Auftrag „Rund um euren Aufenthalt“: neue Bausteine (Schnellnavigation, Kennzahlen, Checkliste, Hilfe-Karten) ===== */
.v4-qnav { padding: clamp(1.25rem, 2.2vw, 2rem) 0 0; }
.v4-qnav__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.v4-qnav__a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.9rem; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 2px; background: rgba(255,255,255,.35); color: var(--ink); text-decoration: none; font-size: .9375rem; font-weight: 600; line-height: 1.25; transition: background-color .2s ease, border-color .2s ease; }
.v4-qnav__a:hover { background: rgba(14,20,18,.035); border-color: rgba(14,20,18,.3); }
.v4-qnav__arr { color: var(--ink-3); font-weight: 400; }
@media (min-width: 48em) { .v4-qnav__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .v4-qnav__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.v4-qnav + .v4-sec { padding-top: clamp(2.5rem, 4.5vw, 4.25rem); }

.v4-figs__head { max-width: 44rem; }
.v4-figs__list { list-style: none; margin: clamp(1.25rem, 2.5vw, 2rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.v4-figs__item { display: grid; gap: .4rem; align-content: start; padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2.5vw, 2.25rem) 0; border-left: 1px solid var(--line); }
.v4-figs__item:first-child { padding-left: 0; border-left: 0; }
.v4-figs__v { font-family: var(--font-serif); font-size: clamp(2.5rem, 1.8rem + 3vw, 4.25rem); line-height: 1; color: var(--ink); }
.v4-figs__l { font-size: 1rem; line-height: 1.45; color: var(--ink-2); max-width: 18em; }
.v4-figs__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem; margin-top: clamp(1.25rem, 2.2vw, 1.75rem); }
.v4-figs__note { margin: 0; color: var(--ink-2); }
.v4-figs__foot .v4-links { margin: 0; }
@media (max-width: 47.99em) {
  .v4-figs__list { grid-template-columns: minmax(0, 1fr); }
  .v4-figs__item { grid-template-columns: 5.25rem minmax(0, 1fr); align-items: baseline; gap: .75rem; padding: .9rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .v4-figs__v { font-size: 2.25rem; }
}

.v4-check__grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (min-width: 64em) { .v4-check__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.v4-check__list { list-style: none; margin: clamp(1rem, 2vw, 1.5rem) 0 0; padding: 0; display: grid; column-gap: 2rem; }
@media (min-width: 40em) { .v4-check__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v4-check__list li { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 0; border-top: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.45; }
.v4-check__ico { flex: none; color: #8a6a1f; margin-top: .05rem; }
.v4-check__aside { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: clamp(1.25rem, 2.4vw, 2rem); }
.v4-check__ah { margin: 0 0 .5rem; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 400; }
.v4-check__at { margin: 0 0 .75rem; }
.v4-check__an { margin: 0 0 1rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.v4-check__rows { margin: 0 0 1rem; border-top: 1px solid var(--line); }
.v4-check__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; line-height: 1.45; }
.v4-check__rows dt { color: var(--ink-2); } .v4-check__rows dd { margin: 0; font-weight: 600; white-space: nowrap; }
.v4-check__aside .v4-links { margin: 0; }
/* 30.09. abends (Johannes: „Vor der Abreise“ besser gestalten): Endreinigung als dunkle Karte – klarer Kontrast zur Checkliste, keine weiße
   Fläche mit Rahmen auf weißem Grund */
.v4-check__aside { background: var(--night); border-color: var(--night); border-radius: 10px; color: #fff; }
.v4-check__aside .v4-check__ah { color: #fff; }
.v4-check__aside .v4-check__at { color: rgba(255,255,255,.92); }
.v4-check__aside .v4-check__an { color: rgba(255,255,255,.72); }
.v4-check__aside .v4-check__rows { border-top-color: rgba(255,255,255,.18); }
.v4-check__aside .v4-check__rows > div { border-bottom-color: rgba(255,255,255,.18); }
.v4-check__aside .v4-check__rows dt { color: rgba(255,255,255,.8); } .v4-check__aside .v4-check__rows dd { color: #fff; }
.v4-check__aside .v3-link { color: #fff; text-decoration-color: rgba(255,255,255,.55); }
.v4-check__aside :focus-visible { outline-color: #fff; }

.v4-helpl__cards { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 48em) { .v4-helpl__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v4-helpl__cards .v4-card { min-height: 11rem; align-content: end; }
/* 05.10.2026: eine öffentliche Nummer – eine breite Karte (Nummer groß, Anliegen darunter) statt dreier Karten mit derselben Nummer */
@media (min-width: 48em) { .v4-helpl__cards--one { grid-template-columns: minmax(0, 1fr); } .v4-helpl__cards--one .v4-card { min-height: 13rem; } }
.v4-helpl__cards--one .v4-card__v { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); }
.v4-helpl__note { display: grid; gap: 1rem 2rem; align-items: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(1.25rem, 2.4vw, 2rem); border: 1px solid var(--line); border-radius: 2px; background: var(--panel); }
@media (min-width: 48em) { .v4-helpl__note { grid-template-columns: minmax(0, 1fr) auto; } }
.v4-helpl__nh { margin: 0 0 .35rem; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 400; }
.v4-helpl__note p { margin: 0; } .v4-helpl__nt p { max-width: 40em; color: var(--ink-2); }

.v4-stage__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; color: rgba(255,255,255,.93); font-size: 1rem; line-height: 1.45; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.v4-stage__list li { position: relative; padding-left: 1.1rem; }
.v4-stage__list li::before { content: ""; position: absolute; left: 0; top: .7em; width: .5rem; height: 1px; background: currentColor; }
.v3-close__sub { margin: .4rem 0 0; color: rgba(255,255,255,.92); font-size: var(--fs-lead); line-height: 1.5; text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* Wunsch Johannes 30.09. (Newsletter): dezentes Laden im Knopf, danach kurze, gestaltete Bestätigung anstelle des Formulars */
.v3-news__submit { display: inline-flex; align-items: center; }
.v3-news__spin { display: none; flex: none; width: .95em; height: .95em; margin-right: .6em; border: 2px solid rgba(255,255,255,.35); border-top-color: var(--ivory); border-radius: 50%; animation: v3NewsSpin .8s linear infinite; }
.v3-news__form.is-sending .v3-news__spin { display: inline-block; }
.v3-news__form.is-sending .v3-news__submit, .v3-news__form.is-sending .v3-news__submit:disabled { opacity: 1; cursor: progress; }
@keyframes v3NewsSpin { to { transform: rotate(360deg); } }
.v3-news__form.is-done > :not([data-news-done]) { display: none; }
.v3-news__done { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.15rem 1.35rem; border: 1px solid var(--line); border-left: 3px solid #D9A12E; border-radius: 2px; background: var(--panel); outline: none; animation: v3NewsIn .45s var(--ease-out, ease-out) both; }
.v3-news__done[hidden] { display: none; }
.v3-news__dico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ivory); color: var(--ink); }
.v3-news__dh { margin: 0; font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.2; color: var(--ink); }
.v3-news__dt { margin: .2rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
@keyframes v3NewsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v3-news__spin { animation-duration: 2.4s; } .v3-news__done { animation: none; } }

/* Wunsch Johannes 30.09.: Bestätigung nach dem Absenden (Kontakt, Gutschein) als ruhige Karte statt einer Textzeile; Themenliste tritt zurück */
.v4-iform__success.v4-done { display: grid; justify-items: start; gap: .6rem; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); border-top: 3px solid #D9A12E; border-radius: 2px; background: var(--panel); color: var(--ink); font-size: var(--fs-body); outline: none; animation: v4DoneIn .5s var(--ease-out, ease-out) both; }
.v4-done[hidden] { display: none; }
.v4-done__ico { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--ivory); color: #8a6a1f; margin-bottom: .2rem; }
.v4-done__h { margin: 0; font-family: var(--font-serif); font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); font-weight: 400; line-height: 1.15; }
.v4-done__t { margin: 0; max-width: 34em; color: var(--ink-2); line-height: 1.55; }
.v4-done__sum { display: grid; gap: .45rem 2rem; margin: .5rem 0 0; padding-top: .85rem; border-top: 1px solid var(--line); width: 100%; }
.v4-done__sum > div { display: grid; gap: .1rem; } .v4-done__sum > div[hidden] { display: none; }
.v4-done__sum dt { font-size: .8125rem; font-weight: 600; color: var(--ink-3); } .v4-done__sum dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (min-width: 40em) { .v4-done__sum { grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; } }
.v4-done__act { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: .9rem 0 0; }
@keyframes v4DoneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v4-iform__success.v4-done { animation: none; } }
/* 01.10. (Johannes, Live-Test auf Staging): nach dem Absenden nur noch die Bestätigung – mittig in der Rahmenbreite, ohne Einleitung, Themenwahl,
   Hilfekarte und Direktkontakt links bzw. darunter; Inhalt der Karte zentriert (Häkchen, Dank, Satz, Zusammenfassung, Knöpfe). Gilt auf allen Breiten. */
section.v4-form.is-sent .v4-form__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; }
section.v4-form.is-sent .v4-form__intro, section.v4-form.is-sent .v4-form__media, section.v4-form.is-sent .v4-voucher__direct { display: none !important; }
section.v4-form.is-sent .v4-form__stage { display: block; width: 100%; max-width: 42rem; align-self: start; }
section.v4-form.is-sent .v4-iform__success.v4-done { justify-items: center; gap: .7rem; text-align: center; padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.25rem, 4vw, 3rem); }
section.v4-form.is-sent .v4-done__ico { margin: 0 auto .35rem; }
section.v4-form.is-sent .v4-done__t { margin-inline: auto; max-width: 30em; }
section.v4-form.is-sent .v4-done__sum { justify-content: center; justify-items: center; max-width: 34rem; }
section.v4-form.is-sent .v4-done__act { justify-content: center; }

/* Wunsch Johannes 30.09. (/newsletter/ Bestätigen/Abmelden): breites Band über die ganze Breite – Text links auf Nachtgrün, Bild rechts,
   goldener Knopf; Anmeldeformular darunter ausgeblendet, solange ein Band offen ist */
.v3-btn--accent { background: #D9A12E; color: var(--night); border-color: #D9A12E; font-weight: 700; } .v3-btn--accent:hover { background: #e7b24a; border-color: #e7b24a; }
.v4-nlact { display: grid; overflow: hidden; border-radius: 2px; background: var(--night); color: var(--ivory); }
.v4-nlact__copy { display: grid; align-content: center; justify-items: start; gap: 1rem; padding: clamp(1.75rem, 4vw, 4rem) clamp(1.5rem, 4.5vw, 4.5rem); }
.v4-nlact .v3-h2 { margin: 0; color: var(--ivory); font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.v4-nlact .v3-text { margin: 0; color: rgba(255,255,255,.88); font-size: var(--fs-lead); max-width: 28em; }
.v4-nlact .v4-actions { margin: .35rem 0 0; }
.v4-nlact__media { position: relative; min-height: 14rem; }
.v4-nlact__fig, .v4-nlact__fig .pic { margin: 0; width: 100%; height: 100%; }
.v4-nlact__fig .pic img { width: 100%; height: 100%; object-fit: cover; }
.v4-nlact__media > .v3-ai { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; }
.v4-nlact__status { margin: 0; font-weight: 600; font-size: 1.0625rem; color: var(--ivory); }
.v4-nlact__status.is-ok { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 2px; background: rgba(217,161,46,.16); border: 1px solid rgba(217,161,46,.55); }
.v4-nlact__status.is-ok::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-8.5' fill='none' stroke='%23D9A12E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (min-width: 48em) { .v4-nlact { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 22rem; } }
.v4-nlpage:has(.v4-nlact:not([hidden])) + .v3-news { display: none; }

/* ===== 30.09.2026 Nachtlauf (Wunsch Johannes: Desktop-Abstände „immer gleich, von der Logik her“) – Abstandssystem aus der Messung aller
   Seiten bei 1280/1440/1920 (docs/DESKTOP-ABSTAENDE-2026-09-30.md): Bild -> Bild 2rem, jeder Übergang mit Text --s-m, Servicebänder 2rem;
   der Abstand gehört dem folgenden Block. Steht bewusst am Ende der Datei (überschreibt die älteren Einzelwerte). ===== */
/* ===== Desktop-Abstandssystem (Vorschlag 30.09.2026, nur >= 64em) =====
   Drei Stufen, gemessen am sichtbaren Rand (Bildkante, Haarlinie, Kastenrand, Schrift):
   S-join  = 2rem (32 px)          Bildblock -> Bildblock, Hero -> erster Bildblock, Hero -> Schnellnavigation
   S-sec   = var(--s-m) (61/65/78) jeder Übergang mit Text: Bild -> Text, Text -> Bild, Text -> Text, letzter Block -> Abschluss/Footer
   S-list  = clamp(1.25rem, 2.5vw, 2rem) (32) Servicebänder untereinander: Text -> 32 -> Linie -> 32 -> Überschrift
   Regel: Der Abstand gehört dem folgenden Block (padding-top); Blöcke haben unten kein eigenes Padding
   (Ausnahme: letzter Block in main über .v3-main > .v3-sec:last-child / .v4-sec:last-child). */
:root { --s-join: 2rem; }
@media (min-width: 64em) {
  /* F1 Bühnen und Duos: nur oben Abstand (vorher padding-block clamp(.75rem, 1.6vw, 1.5rem) oben UND unten -> 2 x 23 = 46 px) */
  .v4-stage { padding-block: var(--s-join) 0; }
  .v4-duo { padding-block: var(--s-join) 0; }

  /* F2 Text -> Bühne/Duo (vorher clamp(2.25rem, 4.5vw, 4.25rem): 65 px bei 1440, aber 68 statt 78 bei 1920) */
  .v4-sec:not(.v4-stage):not(.v4-duo) + .v4-stage, .v4-sec:not(.v4-stage):not(.v4-duo) + .v4-duo { padding-top: var(--s-m); }
  /* F3 Bühne/Duo -> Textabschnitt (vorher clamp(2.75rem, 5vw, 4.75rem) + 23 px Bühnenfuß = 95-103 px sichtbar) */
  .v4-stage + .v4-sec:not(.v4-stage):not(.v4-duo), .v4-duo + .v4-sec:not(.v4-stage):not(.v4-duo) { padding-top: var(--s-m); }
  .v4-stage + .v4-sec.v4-gal--wide:not(.v4-stage):not(.v4-duo) { padding-top: var(--s-m); }   /* Wellness: Galerie beginnt mit Überschrift */

  /* F4 Bild -> Bild bei Pausenbildern und Galerie-Ende */
  :is(.v4-stage, .v4-duo, .v4-break) + .v4-break { padding-top: var(--s-join); }            /* Aufenthalt: Sauna-Bühne -> Wanderbild 88 -> 32 */
  .v4-sec.v4-gal--wide:not(.v4-stage):not(.v4-duo) + :is(.v4-stage, .v4-duo) { padding-top: var(--s-join); }   /* Wellness: Galerie -> Duo 65 -> 32 */

  /* F5 Bildblöcke, die mit Text beginnen oder enden, bekommen den Abschnittsabstand */
  :is(.v4-hero, .v4-crumbs-m, .v4-jumps--m, .v4-stage, .v4-duo, .v4-break) + :is(.v4-stage, .v4-duo):has(.v3-sechead) { padding-top: var(--s-m); }   /* Freizeit: Überschrift 15 px unter dem Hero */
  .v4-stage:has(.v4-stage__info) + :is(.v4-stage, .v4-duo, .v4-break) { padding-top: var(--s-m); }                 /* Mountainbike: Faktenblock -> nächste Bühne 49 -> 65 */

  /* F6 Hero -> erster Block */
  .v4-qnav { padding-top: var(--s-join); }                     /* vorher clamp(1.25rem, 2.2vw, 2rem) = 31.7 */
  .v4-qnav + .v4-sec { padding-top: var(--s-m); }              /* vorher clamp(2.5rem, 4.5vw, 4.25rem) */
  .v4-book { padding-top: var(--s-m); }                        /* Buchen: Hero -> "Auf einen Blick" 43 -> 65 */

  /* F7 Kontakt-Seite: eigener Abschnittswert entfällt (vorher clamp(2.5rem, 1.5rem + 3vw, 4.5rem)) */
  .page--contact .v4-sec { padding-top: var(--s-m); }

  /* F8 Servicebänder (Newsletter-Hinweis, Partnerresort, Instagram) */
  .v4-partner { padding-top: var(--s-m); }                     /* vorher clamp(4.5rem, 3rem + 3vw, 6rem) = 91/96 -> Linie 114 px unter der Bühne */
  .v3-partner { padding-bottom: 0; }                           /* vorher var(--s-m); letzter Block behält --s-m über :last-child */
  .v4-social.v4-igband { padding-bottom: 0; }
  .v3-main > .v3-sec:last-child, .v3-main > .v4-sec:last-child { padding-bottom: var(--s-m); }
  .v4-social + .v4-partner, .v4-partner + .v4-igband, .v3-partner + .v3-partner { padding-top: clamp(1.25rem, 2.5vw, 2rem); }   /* 32 über der Linie = 32 unter der Linie */

  /* F9 Startseite */
  .v3-chalets { padding-top: var(--s-join); }                  /* Hero -> Galerie 17 -> 32 */
  .v3-gift { padding-block: var(--s-m) 0; }                    /* Gästestimmen -> Gutscheinbild 48 -> 65+; Buchen: Panel -> Angebotsbild */
  .v3-stage--sauna { padding-top: var(--s-join); }             /* Gutscheinbild -> Saunabild 79 -> 32 */
  .v3-stage--sauna + .v3-aud { padding-top: var(--s-join); }   /* Saunabild -> Kopfbild Zielgruppen 65 -> 32 */
  .v4-book + .v4-offerband { padding-top: var(--s-m); }        /* Buchen: Panel -> Angebotsbild 43 -> 65 */

  /* F10 Seiten ohne Abschlussbild: letzter Absatz ohne Außenabstand */
  .v4-legal .v4-prose > :last-child { margin-bottom: 0; }
  .v3-main > .legal { padding-block: var(--s-m); }              /* Teilnahmebedingungen: altes .legal-Raster (1rem oben, 7rem unten) */
}
/* F12 Bildpause trägt die Überschrift (Änderung 30.09. abends): leerer Abschnittskopf darf keinen Außenabstand behalten
   (Kontakt „Schon gebucht?“: +28.8 px, Bild -> Liste 94 statt 65) – gleiche Schwelle wie die Regel für .v4-break__h */
@media (min-width: 48em) {
  .v3-sechead:has(> .v3-h2--mbreak:only-child) { margin-bottom: 0; }
}
/* F11 (optional) Unsichtbare Tippfläche am Blockende: 44-px-Mindesthöhe der Textlinks nur für Touch –
   mit Maus/Trackpad fällt sie weg (WCAG 2.5.8 verlangt 24 px, die Zeilenhöhe liefert ~27 px) */
@media (min-width: 64em) and (pointer: fine) {
  .v3-link, .v4-ig__a { min-height: 0; }
}
/* 30.09.2026 Nachtlauf – Desktop-Leerflächen (Audit, Wunsch Johannes „keine weißen Lücken“) */
@media (min-width: 64em) {
  /* „Vor der Abreise“: Checkliste einspaltig – endet auf Höhe der dunklen Endreinigungs-Karte (vorher 152 px Lücke links) */
  .v4-check__grid .v4-check__list { grid-template-columns: minmax(0, 1fr); }
  /* Galerie der Chalet-Seite: Gruppen mit zwei oder drei Fotos füllen die Reihe (vorher halbe Reihe leer) */
  .v4-gal__grid:not(:has(> li:nth-child(4))) { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  /* Abschnittsköpfe über voller Breite: Überschrift links, Einleitung rechts unten bündig, Verweise darunter (vorher rechte Hälfte leer) */
  :is(.v3-sechead, .v4-treats__head, .v4-pkgs__head, .v4-tbl__grid > div:first-child):has(> .v3-h2:not(.v3-h2--mbreak) + *) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); row-gap: .75rem; align-items: end; max-width: none; }
  :is(.v3-sechead, .v4-treats__head, .v4-pkgs__head, .v4-tbl__grid > div:first-child):has(> .v3-h2:not(.v3-h2--mbreak) + *) > .v3-h2 { grid-column: 1; grid-row: 1; align-self: end; margin: 0; }
  :is(.v3-sechead, .v4-treats__head, .v4-pkgs__head, .v4-tbl__grid > div:first-child):has(> .v3-h2:not(.v3-h2--mbreak) + *) > .v3-h2 + * { grid-row: 1; }   /* Einleitung in der Zeile der Überschrift; weitere Absätze/Verweise darunter */
  :is(.v3-sechead, .v4-treats__head, .v4-pkgs__head, .v4-tbl__grid > div:first-child):has(> .v3-h2:not(.v3-h2--mbreak) + *) > :not(.v3-h2) { grid-column: 2; max-width: 40em; margin-top: 0; }
}
/* Kartenfeld vor der Einwilligung (Kontakt, Lage): dunkle Karte wie die Kontaktwege daneben statt leerer weißer Fläche */
.v4-map:not(:has(iframe)) { background: var(--night); border-color: var(--night); color: #fff; }
.v4-map:not(:has(iframe)) .v4-map__gate p { color: rgba(255,255,255,.88); }
.v4-map:not(:has(iframe)) .v4-map__gate .v3-btn--primary { background: #fff; border-color: #fff; color: var(--night); }
.v4-map:not(:has(iframe)) .v4-map__gate .v3-link { color: #fff; }
.v4-map:not(:has(iframe)) :focus-visible { outline-color: #fff; }
/* QA g17: Angaben je Dienst in der Consent-Detailansicht untereinander (vorher „Google MapsAnbieter: …“ ohne Trennung) */
.v4-consent__svc { display: grid; gap: .15rem; } .v4-consent__svc > * { display: block; }
/* ===== Schlussprüfung 01.10.2026 (Nachtlauf, Tablet- und Desktop-Durchsicht): keine Leerflächen, KI-Zeichen am Bild =====
   Gefunden mit Ganzseiten-Aufnahmen 820/1440 px und der Rasterprüfung (letzte Reihe füllt die Breite nicht). Ein Abschnitt statt Einzelblöcke. */
/* Aufenthalt „Im Chalet.“ (WLAN, Küche, Miteinander): letzter Eintrag allein in der Reihe über beide Spalten */
@media (min-width: 48em) { .v4-facts--q > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Tablet (48–63.99em) */
@media (min-width: 48em) and (max-width: 63.99em) {
  /* „Für euch“-Seiten: Duo wieder Bild oben, Text darunter (Anordnung 28.09.; die spätere Subgrid-Regel legte das Bild über beide Zeilen –
     Text stand oben im Bild, KI-Zeichen oben) */
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-duo__item > .v4-duo__fig { grid-area: 1 / 1; }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-duo__item > .v4-duo__copy { grid-area: 2 / 1; align-self: stretch; align-content: start; }   /* Text oben im Nachtfeld, keine gestreckten Zeilen */
  /* Startseiten-Galerie: letztes Bild allein in der Reihe (Terrasse) über die volle Breite */
  .v3-gal > .v3-gal__item:last-child:nth-child(even) { grid-column: 1 / -1; }
  .v3-gal > .v3-gal__item:last-child:nth-child(even) .pic { aspect-ratio: 21 / 9; }
  /* Bildgruppen (Chalets, Sauna): 12er-Raster, die letzte Reihe teilt sich die Breite; breitere Kacheln flacher, Reihen gleich hoch */
  .v4-gal__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .v4-gal__grid > li { grid-column: span 4; }
  .v4-gal__grid:has(> li:last-child:nth-child(3n+2)) > li:nth-last-child(-n+2),
  .v4-gal__grid:has(> li:last-child:nth-child(3n+1)) > li:nth-last-child(-n+4) { grid-column: span 6; }
  .v4-gal__grid:has(> li:last-child:nth-child(3n+2)) > li:nth-last-child(-n+2) .v4-gal__btn .pic,
  .v4-gal__grid:has(> li:last-child:nth-child(3n+1)) > li:nth-last-child(-n+4) .v4-gal__btn .pic { aspect-ratio: 9 / 4; }
  /* Massagen: letzte Anwendung allein in der Reihe (9 in 2 Spalten) als breite Karte – Bild links, Text rechts */
  .v4-treats__list > .v4-treat:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
  .v4-treats__list > .v4-treat:last-child:nth-child(odd) > .v4-treat__body { margin-top: 0; padding-top: 0; }
}
/* Tablet hochkant: Startseiten-Sauna – Text steht unter dem Bild, das KI-Zeichen gehört ins Bildfeld (Raster 1/1), nicht ans Textende */
@media (min-width: 48em) and (max-width: 63.99em) and (min-height: 31.26em) {
  .v3-stage--sauna .v3-stage__frame { display: grid; }
  .v3-stage--sauna .v3-stage__fig { grid-area: 1 / 1; }
  .v3-stage--sauna .v3-stage__frame > .v3-ai { position: relative; grid-area: 1 / 1; align-self: end; justify-self: end; margin: 0 .6rem .6rem 0; inset: auto; }
  .v3-stage--sauna .v3-stage__copy { grid-area: 2 / 1; }
}
/* Desktop (≥64em) */
@media (min-width: 64em) {
  /* Spalte mit Bild (Buchen „Noch eine Frage vorab?“, Chalets „Hund dabei?“) endet bündig mit der Nachbarspalte: das Bild füllt den Rest der
     Spalte statt fester 3:2-Höhe (vorher bis 190 px Lücke unter der kürzeren Spalte) */
  .v4-cols__grid:has(> .v4-cols__item > .v4-cols__fig) { align-items: stretch; }
  .v4-cols__item:has(> .v4-cols__fig) { display: flex; flex-direction: column; align-items: flex-start; }
  .v4-cols__item > .v4-cols__fig { flex: 1 1 0; min-height: 13rem; align-self: stretch; }
  .v4-cols__item > .v4-cols__fig .pic { aspect-ratio: auto; height: 100%; }
  /* Bildgruppen ab 5 Bildern (Sauna & Bad: 4 + 3): 12er-Raster, letzte Reihe füllt die Breite, Reihen gleich hoch */
  .v4-gal__grid:has(> li:nth-child(5)) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .v4-gal__grid:has(> li:nth-child(5)) > li { grid-column: span 3; }
  .v4-gal__grid:has(> li:nth-child(5)):has(> li:last-child:nth-child(4n+3)) > li:nth-last-child(-n+3),
  .v4-gal__grid:has(> li:nth-child(5)):has(> li:last-child:nth-child(4n+1)) > li:nth-last-child(-n+5):nth-last-child(n+3) { grid-column: span 4; }
  .v4-gal__grid:has(> li:nth-child(5)):has(> li:last-child:nth-child(4n+3)) > li:nth-last-child(-n+3) .v4-gal__btn .pic,
  .v4-gal__grid:has(> li:nth-child(5)):has(> li:last-child:nth-child(4n+1)) > li:nth-last-child(-n+5):nth-last-child(n+3) .v4-gal__btn .pic { aspect-ratio: 2 / 1; }
  .v4-gal__grid:has(> li:nth-child(5)):has(> li:last-child:nth-child(4n+2)) > li:nth-last-child(-n+2),
  .v4-gal__grid:has(> li:nth-child(5)):has(> li:last-child:nth-child(4n+1)) > li:nth-last-child(-n+2) { grid-column: span 6; }
  .v4-gal__grid:has(> li:nth-child(5)):has(> li:last-child:nth-child(4n+2)) > li:nth-last-child(-n+2) .v4-gal__btn .pic,
  .v4-gal__grid:has(> li:nth-child(5)):has(> li:last-child:nth-child(4n+1)) > li:nth-last-child(-n+2) .v4-gal__btn .pic { aspect-ratio: 3 / 1; }
}
/* ===== 01.10.2026 (Johannes): /angebote/ – Tarife mit Vorteil als Angebotskarten (Bild, Vorteil, Satz, Bedingungen, Knopf in die Buchung) und
   „Aktuelle Specials.“ als Ausblick „Folgt in Kürze“; /feriendorf/tagungen-im-harz/ – Pakete mit Bild und Pauschale, Zusatzpakete mit Stückpreis,
   Seminarraum-Pakete, Teamprogramm als zwei Karten. Ohne Fett in Bedingungen und Preislisten der neuen Karten (Wunsch 01.10. zu den Tarifkarten). ===== */
.v4-toffers__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.v4-toffer { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); background: #fff; }
.v4-toffer__fig { margin: 0; position: relative; }
.v4-toffer__fig .pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--night); }
.v4-toffer__fig .pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx-d, 50% 50%); }
.v4-toffer__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: .55rem; padding: clamp(1.1rem, 2vw, 1.5rem); }
.v4-toffer__badge { align-self: flex-start; margin: 0; padding: .28rem .65rem; border-radius: 999px; background: rgba(111,82,25,.1); color: #5c4414; font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.v4-toffer__h { margin: .15rem 0 0; font-family: var(--font-serif); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: 1.15; font-weight: 400; text-wrap: balance; }
.v4-toffer__mews { margin: -.2rem 0 0; font-size: .875rem; line-height: 1.4; color: var(--ink-3); }
.v4-toffer__lead { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.v4-toffer__rows { margin: .35rem 0 0; display: grid; }
.v4-toffer__rows > div { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.45; }
.v4-toffer__rows dt { color: var(--ink-3); } .v4-toffer__rows dd { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.v4-toffer__act { margin: auto 0 0; padding-top: .9rem; } .v4-toffer__cta { width: 100%; }
.v4-toffers__note { margin: clamp(1rem, 2vw, 1.5rem) 0 0; }
.v4-toffers .v4-links { margin-top: .5rem; }
@media (min-width: 48em) and (max-width: 63.99em) {
  .v4-toffers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4-toffers__list > .v4-toffer:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* fünfte Karte quer: Bild links, Text rechts – keine Lücke */
  .v4-toffers__list > .v4-toffer:last-child:nth-child(odd) .v4-toffer__fig .pic { aspect-ratio: auto; height: 100%; }
}
@media (min-width: 64em) {
  .v4-toffers__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .v4-toffers__list > .v4-toffer { grid-column: span 2; }
  .v4-toffers__list > .v4-toffer:nth-child(-n+2) { grid-column: span 3; }   /* oben die zwei Prozent-Angebote groß, darunter drei */
  .v4-toffers__list > .v4-toffer:nth-child(-n+2) .v4-toffer__fig .pic { aspect-ratio: 16 / 9; }
}

.v4-soon__head { display: grid; gap: .75rem; max-width: 40em; margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
.v4-soon__head .v3-h2, .v4-soon__head .v3-text { margin: 0; }
.v4-soon__badge { justify-self: start; margin: 0; padding: .3rem .75rem; border: 1px solid rgba(111,82,25,.35); border-radius: 999px; color: #5c4414; font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.v4-soon__title { display: grid; gap: .7rem; justify-items: start; }
@media (min-width: 64em) {
  .v4-soon__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); max-width: none; align-items: center; }   /* Johannes 01.10.: Überschrift und Text mittig zueinander */
  .v4-soon__head > .v3-text { max-width: 40em; }
}
.v4-soon__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.v4-soon__item { min-width: 0; }
.v4-soon__media { position: relative; }
.v4-soon__fig { margin: 0; position: relative; }
.v4-soon__fig .pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--night); }
.v4-soon__fig .pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx-d, 50% 50%); }
.v4-soon__h { margin: .7rem 0 0; font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.25; font-weight: 400; text-wrap: balance; }
.v4-soon__act { margin: clamp(1.25rem, 2.4vw, 2rem) 0 0; }
@media (max-width: 63.99em) {
  .v4-soon__list { display: flex; gap: .75rem; margin: 0 calc(-1 * max(var(--gutter), env(safe-area-inset-left))) 0 calc(-1 * max(var(--gutter), env(safe-area-inset-right))); padding: 0 max(var(--gutter), env(safe-area-inset-right)) .75rem max(var(--gutter), env(safe-area-inset-left)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left)); overscroll-behavior-x: contain; scrollbar-width: none; }
  .v4-soon__list::-webkit-scrollbar { display: none; }
  .v4-soon__item { flex: 0 0 clamp(9rem, 38vw, 15rem); scroll-snap-align: start; }   /* die dritte Kachel lugt herein: wischbar erkennbar */
}

.v4-pkgs__list > .v4-pkg--media { padding: 0; gap: 0; overflow: hidden; background: #fff; }
.v4-pkg__fig { margin: 0; position: relative; }
.v4-pkg__fig .pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--night); }
.v4-pkg__fig .pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx-d, 50% 50%); }
.v4-pkg__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: .8rem; }
.v4-pkg--media .v4-pkg__body { padding: 1.15rem 1.35rem 1.35rem; }
.v4-pkg__code { margin: 0 0 -.45rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #6f5219; }
.v4-pkg__lead { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-3); }
.v4-pkg__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.v4-pkg__list li { position: relative; padding-left: 1rem; text-wrap: pretty; }
.v4-pkg__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: .3rem; height: .3rem; border-radius: 50%; background: var(--ink-3); }
.v4-pkg__price { margin: auto 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.3; color: var(--ink); }
.v4-pkgs__price { display: grid; gap: .2rem; margin: 0; padding: .9rem 1.1rem; border-left: 3px solid #D9A12E; background: var(--panel); }
.v4-pkgs__price-k { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-pkgs__price-v { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; color: var(--ink); }
.v4-pkgs__price-n { font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.v4-pkgs__prices { margin: .25rem 0 0; display: grid; }
.v4-pkgs__prices > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.v4-pkgs__prices > div:last-child { border-bottom: 1px solid var(--line); }
.v4-pkgs__prices dt { color: var(--ink-2); text-wrap: pretty; } .v4-pkgs__prices dd { margin: 0; white-space: nowrap; color: var(--ink); }
/* 01.10. abends (Johannes, Telefon): Preis „2,70 € pro Stück“ wurde abgeschnitten – rückt bei Platzmangel unter den Namen, rechtsbündig, nie gekürzt */
.v4-pkgs__prices > div { flex-wrap: wrap; row-gap: .1rem; } .v4-pkgs__prices dd { margin-left: auto; }
.v4-pkgs__after { display: grid; gap: 1rem; margin-top: clamp(1.25rem, 2.4vw, 2rem); max-width: 46rem; }
.v4-pkgs__after .v4-note { margin: 0; }

@media (min-width: 48em) { .v4-treats--two .v4-treats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v4-treats__note { margin: clamp(1rem, 2vw, 1.5rem) 0 0; }
@media (max-width: 47.99em) {
  .v4-treats--two .v4-treats__list { display: grid; gap: 1rem; margin: 1rem 0 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .v4-treats--two .v4-treats__list > .v4-treat { display: flex; flex-direction: column; flex: none; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
  .v4-treats--two .v4-treats__list .v4-treat__fig .pic { aspect-ratio: 3 / 2; border-radius: 0; }
  .v4-treats--two .v4-treats__list .v4-treat__body { padding: .95rem 1.1rem 1.05rem; }
}
.v4-pkgs__acts, .v4-treats__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 0; }   /* 01.10.: Anfrage/Buchung unter den Karten (Teamseite) */
/* 01.10. (Johannes): aktuelle Seite im Footer wie im Telefon-Menü – Rubrik unterstrichen, feine Linie links neben ihren Einträgen, Eintrag unterstrichen */
.v3-footer__group.is-current .v3-footer__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: rgba(255,255,255,.6); }
.v3-footer__group.is-current > ul { border-left: 2px solid var(--ivory); padding-left: .85rem; }
.v3-footer__group a[aria-current="page"] { color: var(--ivory); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: rgba(255,255,255,.75); }

/* ---------- 01.10.2026 Master-Auftrag „Preise & Angebote“ (/angebote/, /buchen/) ----------
   Featured Special als redaktionelle Bildbühne (kein Rabatt-Look), Live-Tariffinder als ruhige weiße Fläche, Ergebnisse als klare Zeilen mit echtem
   Preis und – nur wenn Mews es hergibt – Vergleichspreis und Ersparnis; Tarifkarten mit Live-Status und Schnellaktion; Stornierung kompakt. */
.v4-feat__frame { position: relative; overflow: hidden; border-radius: 2px; background: var(--night); isolation: isolate; }
.v4-feat__fig { margin: 0; } .v4-feat__fig .pic { aspect-ratio: 16 / 9; max-height: 46rem; }
.v4-feat__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(14,20,18,.8) 0, rgba(14,20,18,.6) 30%, rgba(14,20,18,.18) 56%, rgba(14,20,18,0) 72%); }
.v4-feat__copy { position: absolute; z-index: 2; top: 0; bottom: 0; left: clamp(1.5rem, 4.5vw, 4.5rem); width: min(46%, 35rem); display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; color: var(--ivory); }
.v4-feat__title { display: grid; gap: .7rem; }
.v4-feat__eyebrow { margin: 0; font: 600 .8125rem/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ivory-2); }
.v4-feat__h { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.375rem, 1.5rem + 2.6vw, 4rem); line-height: 1.02; color: var(--ivory); text-shadow: 0 1px 2px rgba(0,0,0,.3), 0 0 18px rgba(14,20,18,.3); }
.v4-feat__lead { margin: 0; max-width: 24em; font-size: var(--fs-lead); line-height: 1.45; color: var(--ivory); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.v4-feat__more { display: grid; gap: .9rem; justify-items: start; }
.v4-feat__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: .15rem 0 0; }
.v4-feat__facts div { display: grid; gap: .1rem; }
.v4-feat__facts dt { font-size: .8125rem; color: var(--ivory-3); }
.v4-feat__facts dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ivory); }
.v4-feat__act { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: .2rem 0 0; }
.v4-feat__check { min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--ivory); font: 500 var(--fs-ui)/1.3 var(--font-sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: rgba(255,255,255,.55); cursor: pointer; }
.v4-feat__check:hover { text-decoration-color: #fff; } .v4-feat__check:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.v4-feat__check[disabled] { opacity: .6; cursor: default; }
.v4-feat__live { max-width: 30rem; font-size: .9375rem; line-height: 1.45; color: var(--ivory); }
/* Nachtrag 01.10. (Featured Special): nach der Live-Prüfung ein ruhiger Preisblock – Vorteil, Vergleichspreis gestrichen, Gesamtpreis groß, Ersparnis,
   Nächte/Gäste und Ø je Nacht; danach „Für … € buchen“ */
.v4-feat__wait { margin: 0; }
.v4-feat.has-price .v4-feat__facts > div:not(:first-child) { display: none; }   /* nach der Prüfung nur noch der Zeitraum über dem Preisblock */
.v4-price--feat { gap: .1rem; margin: 0; }
.v4-price--feat .v4-price__badge { background: rgba(255,255,255,.14); color: var(--ivory); }
.v4-price--feat .v4-price__was { color: var(--ivory-3); }
.v4-price--feat .v4-price__now { font-size: clamp(2.25rem, 1.85rem + 1.1vw, 3rem); color: var(--ivory); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.v4-price--feat .v4-price__save { margin-top: .2rem !important; color: var(--ivory); }
.v4-price--feat .v4-price__meta { color: var(--ivory-2); }
.v4-feat__live strong { font-weight: 600; }
.v4-feat__note { margin: 0; font-size: .8125rem; color: var(--ivory-3); }
.v4-feat__frame > .v3-ai { z-index: 3; bottom: .6rem; right: .6rem; }
@media (min-width: 48em) and (max-width: 63.99em) {
  .v4-feat__fig .pic { aspect-ratio: 4 / 3; }
  .v4-feat__copy { width: min(64%, 31rem); }
  .v4-feat__frame::before { background: linear-gradient(90deg, rgba(14,20,18,.84) 0, rgba(14,20,18,.62) 42%, rgba(14,20,18,.12) 74%, rgba(14,20,18,0) 88%); }
}

/* Live-Tariffinder */
.v4-rates__head { max-width: 40rem; }
.v4-rates__head .v3-text { margin-top: .5rem; }
.v4-rates__panel { margin-top: clamp(1.25rem, 2.5vw, 2rem); padding: clamp(1.25rem, 2.6vw, 2.25rem); border: 1px solid var(--line); border-radius: 2px; background: var(--panel); }
html:not(.js) .v4-rates__form, html:not(.js) .v4-rates__out { display: none; }
.v4-rates__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 64em) { .v4-rates__form { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: end; column-gap: 2rem; } .v4-rates__error, .v4-rates__act, .v4-rates__privacy, .v4-rates__extras { grid-column: 1 / -1; } }
.v4-rates__dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.v4-rates__dates .field { display: grid; gap: .35rem; margin: 0; }
.v4-rates__dates label { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.v4-rates__dates input { width: 100%; min-height: 3.1rem; padding: .6rem .8rem; font: 500 1rem/1.2 var(--font-sans); color: var(--ink); border: 1px solid rgba(14,20,18,.5); border-radius: 4px; background: #fff; }
.v4-rates__dates input:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; }
.v4-rates__guests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .9rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.v4-step { display: grid; gap: .3rem; min-width: 0; }
.v4-step__l { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.v4-step__h { display: block; font-size: .8125rem; font-weight: 400; color: var(--ink-3); }
.v4-step__ctl { display: grid; grid-template-columns: 2.75rem minmax(2.5rem, 1fr) 2.75rem; align-items: stretch; border: 1px solid rgba(14,20,18,.5); border-radius: 4px; background: #fff; overflow: hidden; }
.v4-step__btn { min-height: 2.9rem; border: 0; background: transparent; color: var(--ink); font: 400 1.25rem/1 var(--font-sans); cursor: pointer; }
.v4-step__btn:hover { background: rgba(14,20,18,.05); } .v4-step__btn:focus-visible { outline: 3px solid var(--night); outline-offset: -3px; }
.v4-step__btn[disabled] { color: var(--ink-3); cursor: default; background: transparent; }
.v4-step__ctl input { width: 100%; min-width: 0; border: 0; border-inline: 1px solid var(--line); text-align: center; font: 600 1.0625rem/1 var(--font-sans); color: var(--ink); background: #fff; -moz-appearance: textfield; appearance: textfield; }
.v4-step__ctl input::-webkit-outer-spin-button, .v4-step__ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.v4-step__ctl input:focus-visible { outline: 3px solid var(--night); outline-offset: -3px; }
.v4-rates__error { margin: 0; }
.v4-rates__act { margin: 0; } .v4-rates__act .v3-btn { min-width: 14rem; }
.v4-rates__privacy { margin: 0; max-width: 46em; font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }
/* Final-Pass 01.10. (§2): sichtbar nur der kurze Satz, die technische Erläuterung (Empfänger, IP-Adresse) eine Ebene tiefer – Inhalt unverändert */
.v4-rates__privacy p { margin: 0; }
.v4-rates__dp > summary { display: inline-flex; align-items: center; min-height: 2rem; cursor: pointer; list-style: none; color: var(--ink-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: rgba(14,20,18,.35); }
.v4-rates__dp > summary::-webkit-details-marker { display: none; }
.v4-rates__dp > summary:hover { color: var(--ink-2); } .v4-rates__dp > summary:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; }
.v4-rates__dp a { color: inherit; }
/* Final-Pass §6/§9: „Wer kommt mit?“ und „Noch etwas dazu?“ als eigene Gruppen; Extras nur zur Orientierung (echte Mews-Produkte, Buchung im nächsten Schritt) */
.v4-rates__legend { margin: 0 0 .45rem; padding: 0; font: 400 1.25rem/1.25 var(--font-serif); color: var(--ink); }
.v4-rates__when { display: grid; align-content: end; min-width: 0; }
.v4-rates__span { margin: .5rem 0 0; font-size: .875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* 01.10. (Johannes): Desktop – die Zeile „3 Nächte · So., 04.10. – Mi., 07.10.“ darf die Datumsfelder nicht anheben (Zeile richtet sich unten aus):
   sie steht frei unter den Feldern im festen Abstand, den beide Spalten gleich reservieren – Felder und Gäste-Zähler bleiben auf einer Linie */
@media (min-width: 64em) { .v4-rates__when { position: relative; margin-bottom: 1.25rem; } .v4-rates__guests { margin-bottom: 1.25rem; } .v4-rates__span { position: absolute; left: 0; right: 0; top: 100%; } }
.v4-rates__extras { border-block: 1px solid var(--line); }
.v4-rates__extras > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; cursor: pointer; list-style: none; font: 400 1.25rem/1.25 var(--font-serif); color: var(--ink); }
.v4-rates__extras > summary::-webkit-details-marker { display: none; }
.v4-rates__extras > summary:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; }
.v4-rates__xlist { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); column-gap: 2rem; margin: 0; padding: 0; }
.v4-rates__xlist > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--ink); }
.v4-rates__xlist dd { flex: none; margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.v4-rates__xnote { margin: .4rem 0 1rem; font-size: .875rem; color: var(--ink-3); }
/* Datumsfelder (alle V4-Formulare, Wunsch Johannes 01.10.): leer „Datum wählen“ statt tt.mm.jjjj – auch beim Anklicken; die Maske erscheint nur bei
   Eingabe über die Tastatur (is-typing, v4.js). Firefox kennt ::-webkit-datetime-edit nicht, dort blendet die Textfarbe die Maske aus. */
.field--date.is-empty:not(.is-typing) input[type=date] { color: transparent; }
.field--date.is-empty:not(.is-typing) input[type=date]:focus::-webkit-datetime-edit { color: transparent; }
.field--date.is-empty:not(.is-typing):has(input:focus)::after { display: block; }
.field--date.is-typing::after { display: none; }
.field--date.is-typing input[type=date] { color: var(--ink); }
.v4-rates .field--date.is-empty::after { left: .8rem; bottom: .95rem; font-size: 1rem; line-height: 1.2; color: var(--ink-3); }
/* Final-Pass §11: von einer Tarifkarte gesetzte Daten kurz hervorheben */
.v4-rates .field.is-changed input { animation: v4changed 2.4s ease-out; }
@keyframes v4changed { 0%, 40% { box-shadow: 0 0 0 3px rgba(111,82,25,.5); background-color: #fbf6ea; } 100% { box-shadow: 0 0 0 0 rgba(111,82,25,0); background-color: #fff; } }
@media (prefers-reduced-motion: reduce) { .v4-rates .field.is-changed input { animation: none; box-shadow: 0 0 0 3px rgba(111,82,25,.5); } }
.v4-rates__out { margin-top: 1.25rem; }
.v4-rates__out:empty, .v4-rates__results[hidden] { display: none; }
.v4-rates__status { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: 1rem; color: var(--ink-2); }
.v4-rates__status.is-loading::before { content: ""; flex: none; width: 2.5rem; height: 2px; background: linear-gradient(90deg, rgba(14,20,18,.12) 0, var(--night) 50%, rgba(14,20,18,.12) 100%); background-size: 200% 100%; animation: v4ratesLoad 1.2s linear infinite; }
@keyframes v4ratesLoad { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .v4-rates__status.is-loading::before { animation: none; background: var(--night); } }
.v4-rates__fallback { margin: .9rem 0 0; }
.v4-rates__note { max-width: none; }   /* 01.10. (Johannes): eine Zeile am Desktop, Klammer „(150 € je Chalet und Aufenthalt)“ bricht nie in sich */
.v4-rates__results { display: grid; gap: 1rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.v4-rates__sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; margin: 0; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.v4-rates__sumh { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.25; }
.v4-rates__sumt { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.v4-rates__list { list-style: none; display: grid; gap: .75rem; margin: 0; padding: 0; }
@media (min-width: 48em) { .v4-rates__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } }
/* Final-Pass §5: Ergebniskarten verkaufsstark, aber ruhig – Kennzeichen, Name, gestrichener Vergleichspreis zurückhaltend, Preis groß in der Serife,
   Gesamt/Ø je Nacht, „Ihr spart …“ in Messington statt Signalrot, Stornierung kurz, ein klarer Knopf */
.v4-rate { display: flex; flex-direction: column; gap: .45rem; padding: 1.15rem 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: 2px; background: #fff; }
.v4-rate.is-ref { border-color: rgba(14,20,18,.3); }
.v4-rate.is-private { border-color: var(--night); }
.v4-rate.is-hl { box-shadow: 0 0 0 2px var(--night); }
.v4-rate__badge { align-self: flex-start; margin: 0; padding: .26rem .65rem; border-radius: 999px; background: rgba(111,82,25,.1); color: #5c4414; font-size: .8125rem; font-weight: 600; line-height: 1.25; }
/* Wunsch Johannes 01.10. spät: günstigster Gesamtpreis als „Bestes Angebot“ – dunkles Etikett und kräftigere Kante, sonst gleiche Karte */
.v4-rate__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.v4-rate__best { padding: .26rem .65rem; border-radius: 999px; background: var(--night); color: #fff; font-size: .8125rem; font-weight: 700; line-height: 1.25; letter-spacing: .01em; }
.v4-rate.is-best { border-color: var(--night); box-shadow: inset 0 0 0 1px var(--night); }
.v4-rate.is-ref .v4-rate__badge { background: rgba(14,20,18,.06); color: var(--ink-2); }
.v4-rate__n { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 1.375rem; line-height: 1.2; color: var(--ink); }
.v4-rate__d { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.v4-rate__c { margin: .15rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
/* 05.10.2026 abends (Johannes): Restverfügbarkeit als ruhiger Hinweis über den Ergebniskarten – weiß mit Bernstein-Rand und -Punkt (kein Beige,
   kein Rot, keine Bewegung); echte Zahl aus Mews, Schwelle 3 */
.v4-rates__avail { display: inline-flex; align-items: center; gap: .55rem; justify-self: start; width: fit-content; margin: 0; padding: .4rem .9rem .4rem .75rem; border: 1px solid rgba(178,110,0,.45); border-radius: 999px; background: #fff; color: #7A4300; font: 600 .875rem/1.25 var(--font-sans); }
.v4-rates__avail::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: #D98A00; }
.v4-rate__act { margin: auto 0 0; padding-top: .6rem; } .v4-rate__act .v3-btn { width: 100%; }
.v4-price { display: grid; gap: .15rem; margin: .3rem 0 0; }
/* 05.10.2026 (Johannes): Preise aller Ergebniskarten auf einer Höhe – jede Karte ist ein Teilraster (subgrid) mit festen Zeilen: Kennzeichen ·
   Name · Beschreibung · Vergleichspreis · Preis · Angaben · Stornierung · Knopf. Fehlt etwas in einer Karte, bleibt die Zeile dort leer. */
.v4-rate > .v4-price__was, .v4-rate > .v4-price__now { margin: 0; }
.v4-rate > .v4-price__was { margin-top: .3rem; }
.v4-rate > .v4-price__was + .v4-price__now { margin-top: -.3rem; }   /* Telefon (Spalte mit .45rem Abstand): wie zuvor im Preisblock */
.v4-rate > .v4-price__now + .v4-rate__info { margin-top: -.3rem; }
.v4-rate__info { margin: 0; align-self: start; align-content: start; }   /* nicht auf die Zeilenhöhe strecken (sonst wachsen die Abstände der Angaben) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 48em) {
    .v4-rate { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .v4-rate > * { grid-column: 1; }
    .v4-rate__tags { grid-row: 1; align-self: start; } .v4-rate__n { grid-row: 2; margin-top: .45rem; } .v4-rate__d { grid-row: 3; margin-top: .45rem; }
    .v4-rate > .v4-price__was { grid-row: 4; align-self: end; margin-top: .75rem; }
    .v4-rate > .v4-price__now, .v4-rate > .v4-price__was + .v4-price__now { grid-row: 5; margin-top: .1rem; }
    .v4-rate__info, .v4-rate > .v4-price__now + .v4-rate__info { grid-row: 6; margin-top: .3rem; }
    .v4-rate__c { grid-row: 7; margin-top: .6rem; } .v4-rate__act { grid-row: 8; margin: 0; }
  }
}
/* 05.10.2026 (Johannes): „Bestes Angebot“ farbig – ruhiges Waldgrün (Ersparnis/bestes Angebot, passend zur Harz-Bildwelt; Kontrast 6,5 : 1 auf
   Weiß); Ersparnisse in denselben Grüntönen, „Mehr Flexibilität“ bleibt neutral */
.v4-rates__results { --deal: #1E6B48; --deal-bg: #E6F2EA; }
.v4-rates__results .v4-rate__best { background: var(--deal); color: #fff; }
.v4-rates__results .v4-rate.is-best { border-color: var(--deal); box-shadow: inset 0 0 0 1px var(--deal); }
.v4-rates__results .v4-rate:not(.is-ref) .v4-rate__badge { background: var(--deal-bg); color: var(--deal); }
.v4-rates__results .v4-price__save { color: var(--deal); }
/* 05.10.2026 (Johannes): Tarifkarten – die Knöpfe stehen auf einer Höhe, auch wenn eine Karte darunter „Eine Woche vorbelegen“ zeigt */
@media (min-width: 48em) { .v4-toffer__act { grid-template-rows: auto minmax(2.75rem, auto); align-content: start; } }
/* 05.10.2026 (Kundin): Klassifizierungs-Urkunde – kleines Vorschaubild mit Beschriftung, öffnet den Bildbetrachter */
.v4-cert { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .25rem 0; border: 0; background: none; color: var(--ink); font: 500 .9375rem/1.3 var(--font-sans); text-align: left; cursor: zoom-in; }
.v4-cert__img { flex: none; width: 3.75rem; height: auto; border: 1px solid var(--line); background: #fff; box-shadow: 0 6px 16px -8px rgba(14,20,18,.35); transition: transform .25s var(--ease-out); }
.v4-cert__t { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; text-decoration-color: rgba(14,20,18,.45); }
.v4-cert:hover .v4-cert__t { text-decoration-color: currentColor; }
.v4-cert:hover .v4-cert__img, .v4-cert:focus-visible .v4-cert__img { transform: translateY(-2px); }
.v4-cert:focus-visible { outline: 3px solid var(--night); outline-offset: 3px; }
.v4-links .v4-cert { flex-basis: 100%; }
@media (prefers-reduced-motion: reduce) { .v4-cert__img { transition: none; } }
/* 05.10.2026 abends (Johannes: „zu fett, sieht nach billigem WordPress aus“): schlanke Buchungszeile auf dem Bild „Mit wem kommt ihr?“ –
   Glas statt weißem Block (Nachtgrund 42 %, Unschärfe, feine helle Kante), „Wann kommt ihr?“ · Kalender Anreise ⌄ · Kalender Abreise ⌄ ·
   heller Knopf (8px, fett, Schimmer durch die Schrift). Das Datumsfeld liegt unsichtbar über dem ganzen Eintrag (Klick öffnet den Kalender),
   nach der Wahl steht dort das Datum (v4.js); bei Eingabe über die Tastatur wird das Feld selbst sichtbar (is-typing).
   Tablet: dieselbe Zeile hell unter dem Bild. Telefon: klein unter dem Bild – zwei Felder und Knopf, ohne Überschrift; die untere
   Aktionsleiste tritt zurück, solange die Zeile im Bild ist (v4-mobile.js, hk-bar-end). */
.v3-bookline { position: relative; z-index: 3; display: flex; align-items: center; max-width: 100%; margin: 0; padding: .3125rem .3125rem .3125rem 1.25rem; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; background: rgba(14,20,18,.42); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); color: #fff; box-shadow: 0 18px 40px -24px rgba(0,0,0,.7); }
.v3-bookline__h { flex: 0 1 auto; min-width: 0; margin: 0; padding-right: 1.25rem; font: 400 1.125rem/1.2 var(--font-serif); }
.v3-bookline__f { position: relative; display: flex; align-items: center; gap: .55rem; min-width: 10.25rem; min-height: 2.625rem; padding: 0 1rem; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.v3-bookline__f::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 1.375rem; transform: translateY(-50%); background: rgba(255,255,255,.3); }
.v3-bookline__cal, .v3-bookline__chev { display: inline-flex; flex: none; }
.v3-bookline__chev { margin-left: auto; padding-left: .35rem; opacity: .72; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.v3-bookline__f:hover .v3-bookline__chev { opacity: 1; transform: translateY(1px); }
.v3-bookline__l { font: 500 .9375rem/1 var(--font-sans); cursor: pointer; }
.v3-bookline__v { font: 600 .9375rem/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.v3-bookline__v:empty { display: none; }
.v3-bookline__f.has-value .v3-bookline__l, .v3-bookline__f.is-typing .v3-bookline__l, .v3-bookline__f.is-typing .v3-bookline__v { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v3-root .v3-bookline .v3-bookline__f input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; opacity: 0; cursor: pointer; font-size: 16px; background: none; }
.v3-bookline__f input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.v3-root .v3-bookline .v3-bookline__f.is-typing input { position: static; width: 8.5rem; height: auto; opacity: 1; color: inherit; font: 500 .9375rem/1.2 var(--font-sans); }
.v3-bookline__f.is-typing .v3-bookline__chev { display: none; }
.v3-bookline__f:focus-within { outline: 2px solid currentColor; outline-offset: -3px; }
.v3-bookline__go { flex: none; margin-left: .5rem; min-height: 2.625rem; padding: 0 1.25rem; border: 0; border-radius: 8px; background: #fff; color: var(--night); font: 700 .9375rem/1 var(--font-sans); white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease); }
.v3-bookline__go:hover { background: #F1EFEA; }
.v3-bookline__go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .v3-bookline__chev, .v3-bookline__go { transition: none; } .v3-bookline__f:hover .v3-bookline__chev { transform: none; } }
@media (min-width: 64em) {
  .v3-aud__copy { top: clamp(1.1rem, 2.6vw, 2.25rem); bottom: auto; }
  .v3-aud__head::before { background: radial-gradient(ellipse 50% 70% at 12% 8%, var(--txt-scrim)), linear-gradient(to top, rgba(14,20,18,.42) 0, rgba(14,20,18,0) 34%) !important; }
  .v3-aud__head .v3-bookline { position: absolute; left: 1rem; right: 1rem; bottom: clamp(1rem, 2.4vw, 2rem); width: max-content; max-width: calc(100% - 2rem); margin-inline: auto; }
  .v3-bookline .v3-bookline__h { white-space: nowrap; }
}
/* Tablet und Telefon: hell direkt unter dem Bild (eigene Rasterzeile), Überschrift „Mit wem kommt ihr?“ und Textgrund bleiben auf dem Bild */
@media (max-width: 63.99em) {
  .v3-aud__head { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .v3-aud__head > .v3-aud__fig { grid-area: 1 / 1; }
  .v3-aud__head::before { position: relative; inset: auto; grid-area: 1 / 1; }
  .v3-aud__head > .v3-aud__copy { position: relative; inset: auto; grid-area: 1 / 1; align-self: end; }
  .v3-aud__head > .v3-bookline { grid-area: 2 / 1; justify-self: center; min-width: 0; margin: .875rem 0 .5rem; background: #fff; color: var(--ink); border-color: rgba(14,20,18,.16); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .v3-aud__head > .v3-bookline .v3-bookline__f::before { background: var(--line); }
  .v3-aud__head > .v3-bookline .v3-bookline__go { background: var(--night); color: #fff; }
  .v3-aud__head > .v3-bookline .v3-bookline__go:hover { background: #1c2723; }
  .v3-aud__head > .v3-bookline .v3-bookline__go:focus-visible { outline-color: var(--night); }
  .v3-aud__head > .v3-bookline .v3-bookline__go.v3-sheen .v3-sheen__t { --sh-base: #fff; --sh-mid: #E8B85A; --sh-peak: #FFF0C9; }
}
@media (min-width: 48em) and (max-width: 63.99em) { .v3-aud__head > .v3-aud__copy { padding: 0 clamp(1.25rem, 3vw, 2.5rem) clamp(1.1rem, 2.6vw, 2.25rem); } }
@media (max-width: 47.99em) {
  .v3-aud__head > .v3-bookline { justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; margin: .875rem var(--gutter) .75rem; padding: 0; border: 0; border-radius: 0; background: none; }
  /* Johannes 05.10. abends: am Telefon ohne „Wann kommt ihr?“ – direkt darüber steht „Mit wem kommt ihr?“; bleibt Name des Formulars */
  .v3-aud__head > .v3-bookline .v3-bookline__h { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v3-bookline__f { min-width: 0; min-height: 2.75rem; gap: .45rem; padding: 0 .75rem; border: 1px solid rgba(14,20,18,.18); }
  .v3-aud__head > .v3-bookline .v3-bookline__f::before { display: none; }
  .v3-bookline__go { grid-column: 1 / -1; margin: 0; min-height: 2.75rem; }
}
/* 05.10.2026 abends (Johannes): Chalet-Rundgang – eigene Klassen v4-rgang („v4-tour“ gehört den Wandertouren). Text auf dem eingefärbten Poster
   (Nachtgrund-Verlauf von unten, wie die übrigen Bilder mit Text), kleiner Play-Knopf: weißer Kreis mit sanft pulsierendem Ring + Text + Dauer.
   Beim Abspielen nur der Film; Tippen zeigt 3 s eine schmale Leiste (Pause, Zeit, Fortschritt); am Ende wieder das Ausgangsbild (Johannes 05.10. ~21:40). Film bis 72rem, mittig,
   16:9 (Telefon 9:16 randlos), kein Zuschnitt. Ohne JavaScript (html ohne .js): Text über dem Film, native Steuerung. */
.v4-rgang__frame { position: relative; max-width: 72rem; margin-inline: auto; overflow: hidden; border-radius: 2px; background: var(--night); }
.v4-rgang__frame:focus-visible { outline: 3px solid var(--night); outline-offset: 3px; }
.v4-rgang__frame.is-playing { cursor: pointer; }
.v4-rgang__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--night); object-fit: contain; }
.v4-rgang__cover { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; padding: clamp(1.25rem, 3.2vw, 2.75rem); color: #fff;
  background: linear-gradient(to top, rgba(14,20,18,.84) 0, rgba(14,20,18,.5) 38%, rgba(14,20,18,.08) 72%, rgba(14,20,18,0) 100%); transition: opacity .4s var(--ease), visibility 0s linear 0s; }
.v4-rgang__frame.is-playing .v4-rgang__cover { opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
.v4-rgang__copy { display: grid; justify-items: start; gap: .5rem; max-width: 34rem; }
.v4-rgang__k { margin: 0; font: 600 .8125rem/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.86); }
.v4-rgang__h { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.1; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.v4-rgang__t { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.35); text-wrap: pretty; }
.v4-rgang__play { display: inline-flex; align-items: center; gap: .75rem; margin: .65rem 0 0; padding: 0; border: 0; background: none; color: #fff; font: 600 1rem/1.2 var(--font-sans); text-shadow: 0 1px 2px rgba(0,0,0,.35); cursor: pointer; }
.v4-rgang__play[hidden] { display: none; }
.v4-rgang__dur { margin-left: -.35rem; font-weight: 400; opacity: .8; }   /* 05.10.: „·“ mit gleichem Abstand links und rechts (Lücke .75rem − .35rem = .4rem) */
.v4-rgang__dur::before { content: "·"; margin: 0 .4rem 0 0; }
.v4-rgang__ico { position: relative; display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: #fff; color: var(--night); box-shadow: 0 8px 24px -10px rgba(0,0,0,.6); transition: transform .3s var(--ease-out); }
.v4-rgang__ico svg { width: 1.125rem; height: 1.125rem; margin-left: 3px; }
.v4-rgang__play:hover .v4-rgang__ico { transform: scale(1.06); }
.v4-rgang__play:focus-visible { outline: 2px solid #fff; outline-offset: 5px; border-radius: 999px; }
/* gemeinsamer pulsierender Ring der Play-Kreise (Rundgang, Startseiten-Link), nur im Bild (is-live, v4.js) */
.v4-rgang__ico::before, .v4-rgang__ico::after, .v3-gal__tour-ico::before, .v3-gal__tour-ico::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--pulse-ring, rgba(255,255,255,.8)); opacity: 0; pointer-events: none; }
.v4-rgang__frame.is-live:not(.is-playing) .v4-rgang__ico::before, .v3-gal__tour.is-live .v3-gal__tour-ico::before { animation: hkPlayPulse 2.8s cubic-bezier(.2,.6,.3,1) infinite; }
.v4-rgang__frame.is-live:not(.is-playing) .v4-rgang__ico::after, .v3-gal__tour.is-live .v3-gal__tour-ico::after { animation: hkPlayPulse 2.8s cubic-bezier(.2,.6,.3,1) 1.4s infinite; }
@keyframes hkPlayPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.65); opacity: 0; } }
/* Tippen beim Abspielen: schmale Leiste unten (Pause, Zeit, Fortschritt), blendet nach 3 s aus */
.v4-rgang__ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: .75rem; padding: 2rem clamp(.85rem, 2vw, 1.25rem) .85rem; background: linear-gradient(to top, rgba(14,20,18,.62), rgba(14,20,18,0)); color: #fff; font: 600 .875rem/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.v4-rgang__ui[hidden] { display: none; }
.v4-rgang__pp { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; }
.v4-rgang__pp:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.v4-rgang__pp .v4-rgang__i-play, .v4-rgang__pp.is-paused .v4-rgang__i-pause { display: none; }
.v4-rgang__pp.is-paused .v4-rgang__i-play { display: grid; }
.v4-rgang__pp svg { display: block; }
.v4-rgang__time { flex: none; white-space: nowrap; }
.v4-rgang__bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.v4-rgang__fill { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
/* ohne JavaScript: Text über dem Film auf dunklem Grund, native Steuerung bleibt bedienbar */
html:not(.js) .v4-rgang__cover { position: static; background: none; padding: 1.25rem 1.25rem 1rem; }
@media (max-width: 47.99em) { .v4-rgang__video { aspect-ratio: 9 / 16; } .v4-rgang .v3-wrap { width: 100%; } .v4-rgang__frame { border-radius: 0; } .v4-rgang__cover { padding: 1.25rem var(--gutter) 1.5rem; } .v4-rgang__h { font-size: 1.875rem; } .v4-rgang__t { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) {
  .v4-rgang__ico, .v3-gal__tour-ico, .v4-rgang__cover { transition: none; }
  .v4-rgang__frame.is-live .v4-rgang__ico::before, .v4-rgang__frame.is-live .v4-rgang__ico::after, .v3-gal__tour.is-live .v3-gal__tour-ico::before, .v3-gal__tour.is-live .v3-gal__tour-ico::after { animation: none; }
  .v4-rgang__play:hover .v4-rgang__ico, .v3-gal__tour:hover .v3-gal__tour-ico { transform: none; }
}
/* Startseite: „Rundgang ansehen“ im Chalet-Block – Schrift wie der Block; auf dem Bild (Desktop, Telefon) hell mit weißem Play-Kreis,
   auf Weiß (Tablet) dunkel; derselbe pulsierende Doppelring */
.v3-gal__tour { --pulse-ring: rgba(14,20,18,.5); display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; margin-right: 1.5rem; color: inherit; font: 600 1rem/1.2 var(--font-sans); text-decoration: none; }
.v3-gal__tour-ico { position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--night); color: #fff; transition: transform .3s var(--ease-out); }
.v3-gal__tour-ico svg { margin-left: 2px; }
.v3-gal__tour:hover .v3-gal__tour-ico { transform: scale(1.08); }
.v3-gal__tour:hover { text-decoration: underline; text-underline-offset: .25em; }
.v3-gal__tour:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (min-width: 64em) { .v3-gal__tour { --pulse-ring: rgba(255,255,255,.8); color: var(--ivory); text-shadow: 0 1px 2px rgba(0,0,0,.35); } .v3-gal__tour .v3-gal__tour-ico { background: #fff; color: var(--night); } }
@media (max-width: 47.99em), (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  .v3-gal__item--living .v3-gal__tour { --pulse-ring: rgba(255,255,255,.8); color: var(--ivory); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .v3-gal__item--living .v3-gal__tour-ico { background: #fff; color: var(--night); }
}
@media (prefers-reduced-motion: reduce) {
  .v4-rgang__ico, .v3-gal__tour-ico { transition: none; }
  .v4-rgang__frame.is-live .v4-rgang__ico::before, .v4-rgang__frame.is-live .v4-rgang__ico::after, .v3-gal__tour.is-live .v3-gal__tour-ico::before, .v3-gal__tour.is-live .v3-gal__tour-ico::after { animation: none; }
  .v4-rgang__play:hover .v4-rgang__ico, .v3-gal__tour:hover .v3-gal__tour-ico { transform: none; }
}
/* 05.10.2026 (Johannes/Kunde): Webcam-Hinweis auf der Startseite („Wie ist das Wetter im Harz?“) */
.v3-wcam__in { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 48em) { .v3-wcam__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); } }
.v3-wcam__fig { margin: 0; }
.v3-wcam__pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.v3-wcam__pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx-d, 50% 50%); }
.v3-wcam__k { margin: 0 0 .6rem; font: 600 .8125rem/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.v3-wcam__p { margin: .8rem 0 0; max-width: 34rem; color: var(--ink-2); }
.v3-wcam__act { margin: 1.4rem 0 0; }
/* 05.10.2026 abends (Johannes): derselbe pulsierende Punkt wie „Live“ im Telefon-Menü; ruht, solange der Abschnitt nicht im Bild war, und bei
   reduzierter Bewegung */
.v3-wcam__btn { gap: .6rem; }
.v3-wcam__dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: #D93025; animation: v3LivePulse 1.8s ease-in-out infinite; animation-play-state: paused; }
.v3-wcam__in.in-view .v3-wcam__dot, html:not(.js) .v3-wcam__dot { animation-play-state: running; }
@keyframes v3LivePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(217,48,37,.45); } 55% { opacity: .45; box-shadow: 0 0 0 5px rgba(217,48,37,0); } }
/* Folge-Release (Johannes 05.10.2026 abends): „LIVE“ im Desktop-Kopf statt „Webcam“ – Großbuchstaben, pulsierender roter Punkt wie im Telefon-Menü */
.v3-nav a.v3-nav__live { gap: .45rem; font-size: calc(var(--fs-nav) * .88); letter-spacing: .1em; text-transform: uppercase; }
.v3-nav a.v3-nav__live::after { left: calc(.35rem + .5rem + .45rem); }
.v3-nav__live-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: #E5372B; animation: v3LivePulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .v3-nav__live-dot { animation: none; } }
@media (prefers-reduced-motion: reduce) { .v3-wcam__dot { animation: none; } }
.v4-price p { margin: 0; }
.v4-price__badge { justify-self: start; margin-bottom: .4rem !important; padding: .26rem .65rem; border-radius: 999px; background: rgba(111,82,25,.1); color: #5c4414; font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.v4-price__was { font-size: .9375rem; line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.v4-price__was s { text-decoration-thickness: 1px; }
.v4-price__now { font: 400 clamp(1.875rem, 1.55rem + .9vw, 2.25rem)/1.08 var(--font-serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.v4-price__meta { font-size: .875rem; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.v4-price__save { margin-top: .35rem !important; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: #5c4414; font-variant-numeric: tabular-nums; }
.v4-rates__hint { margin: 0; font-size: .875rem; color: var(--ink-3); }
.v4-rates__none { display: grid; gap: .6rem; }
.v4-rates__none p { margin: 0; }
/* 05.10.2026 abends (Johannes): Vorschläge bei „nichts frei“ – Zeile je Zeitraum (Daten links, Preis rechts), 8px wie alle Knöpfe; Samstag-Hinweis */
.v4-rates__alts { display: grid; gap: .55rem; margin: .4rem 0 .35rem; }
.v4-rates__other { display: grid; gap: .6rem; } .v4-rates__other[hidden] { display: none; }
/* 05.10.2026 ~22:45 (Johannes): Mews-Ausfall – ruhiger Hinweis über dem Formular, „Direkt zur Buchung“ öffnet Mews im neuen Tab; Tarifkarten
   führen direkt in die Buchung (v4-rates.js showDown) */
.v4-rates__down { display: grid; justify-items: start; gap: .45rem; margin: 0 0 1.25rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-left: 3px solid #D98A00; border-radius: 8px; background: #fff; }
.v4-rates__downh { margin: 0; font: 600 1.0625rem/1.35 var(--font-sans); color: var(--ink); }
.v4-rates__downt { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.v4-rates__down .v3-btn { margin-top: .4rem; }
[data-rates].is-down .v4-rates__fallback, [data-rates].is-down [data-rates-status], [data-rates].is-down .v4-rates__privacy { display: none; }   /* ohne Abfrage stimmt „wird aktuell geprüft“ nicht */
@media (max-width: 47.99em) { .v4-rates__down .v3-btn { justify-self: stretch; } }
/* 05.10.2026 abends (Johannes): moderne Ladeanzeige – Platzhalter in Ergebnisform mit sanftem Lichtlauf statt nur eines Satzes; Telefon eine Karte;
   ohne Bewegung bei reduzierter Bewegung */
.v4-skel { display: block; height: .8rem; border-radius: 4px; background: linear-gradient(100deg, #EDEDEA 30%, #F8F8F6 50%, #EDEDEA 70%) 100% 0 / 300% 100%; animation: hkSkel 1.4s ease-in-out infinite; }
@keyframes hkSkel { from { background-position: 100% 0; } to { background-position: 0 0; } }
.v4-skel-sum { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem 0 .85rem; border-bottom: 1px solid var(--line); }
.v4-skel--h { width: 9rem; height: 1.35rem; } .v4-skel--t { width: 13rem; }
.v4-skel-list { list-style: none; margin: 0; padding: 0; }
.v4-skel-card { display: grid; align-content: start; gap: .75rem; min-height: 15.5rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 2px; background: #fff; }
.v4-skel--tag { width: 6.5rem; height: 1.3rem; border-radius: 999px; } .v4-skel--name { width: 72%; height: 1.25rem; } .v4-skel--price { width: 55%; height: 2.25rem; margin-top: .5rem; }
.v4-skel--line { width: 82%; } .v4-skel--line2 { width: 60%; } .v4-skel--btn { height: 2.75rem; margin-top: .6rem; border-radius: 8px; }
.v4-skel-alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.v4-skel--ad { width: 55%; height: 1.75rem; } .v4-skel--ap { width: 5.5rem; height: 1.1rem; }
.v4-rates__altst.is-wait { display: flex; align-items: center; gap: .65rem; }
.v4-rates__altst.is-wait::before { content: ""; flex: none; width: 2rem; height: 2px; background: linear-gradient(90deg, rgba(14,20,18,.12) 0, var(--night) 50%, rgba(14,20,18,.12) 100%); background-size: 200% 100%; animation: v4ratesLoad 1.2s linear infinite; }
@media (max-width: 47.99em) { .v4-skel-card:nth-child(n+2) { display: none; } .v4-skel--t { width: 8rem; } }
@media (prefers-reduced-motion: reduce) { .v4-skel { animation: none; } .v4-rates__altst.is-wait::before { animation: none; background: var(--night); } }
.v4-rates__alts[hidden] { display: none; }
.v4-rates__alth { font: 600 1rem/1.3 var(--font-sans); }
.v4-rates__altst { font-size: .9375rem; color: var(--ink-2); }
.v4-rates__altl { list-style: none; display: grid; gap: .45rem; max-width: 36rem; margin: 0; padding: 0; }
.v4-rates__alt { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: .6rem .9rem; border: 1px solid rgba(14,20,18,.3); border-radius: 8px; background: #fff; color: var(--ink); font: 400 .9375rem/1.3 var(--font-sans); text-align: left; cursor: pointer; transition: border-color .2s var(--ease); }
.v4-rates__alt:hover { border-color: var(--night); }
.v4-rates__alt:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; }
.v4-rates__altd { display: grid; gap: .1rem; } .v4-rates__altd strong { font-weight: 600; } .v4-rates__altd span { font-size: .875rem; color: var(--ink-2); }
.v4-rates__altp { flex: none; font: 600 1rem/1.2 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v4-rates__span.is-warn { color: #7A4300; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .v4-rates__alt { transition: none; } }

/* Tarife mit Vorteil: Live-Status und Schnellaktion */
/* Final-Pass §3/§10: Zustand je Karte – idle (neutraler Hinweis), available (Preisblock + „Für … € buchen“), unavailable (klarer Satz, Regel, Terminsuche) */
.v4-toffer__live { margin: .35rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.45; color: var(--ink); }
.v4-toffer__live p { margin: 0; }
.v4-toffer__state { color: var(--ink-2); }
.v4-toffer__state.is-on, .v4-toffer__state.is-off { font-weight: 600; color: var(--ink); }
.v4-toffer__state.is-wait { display: flex; align-items: center; gap: .65rem; }
.v4-toffer__state.is-wait::before { content: ""; flex: none; width: 2rem; height: 2px; background: linear-gradient(90deg, rgba(14,20,18,.12) 0, var(--night) 50%, rgba(14,20,18,.12) 100%); background-size: 200% 100%; animation: v4ratesLoad 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .v4-toffer__state.is-wait::before { animation: none; background: var(--night); } }
.v4-toffer__hint { margin-top: .3rem !important; font-size: .875rem; color: var(--ink-3); }
.v4-price--card { margin-top: .55rem; }
.v4-price--card .v4-price__now { font-size: clamp(1.625rem, 1.4rem + .6vw, 2rem); }
.v4-toffer__hits { list-style: none; display: grid; gap: .4rem; margin: .55rem 0 0; padding: 0; }
.v4-toffer__hit { display: flex; width: 100%; justify-content: space-between; gap: .75rem; min-height: 2.75rem; align-items: center; padding: .45rem .7rem; border: 1px solid rgba(14,20,18,.3); border-radius: 2px; background: #fff; color: var(--ink); font: 500 .9375rem/1.3 var(--font-sans); text-align: left; cursor: pointer; }
.v4-toffer__hit:hover { border-color: var(--night); } .v4-toffer__hit:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; }
.v4-toffer__hit { min-height: 3.25rem; padding: .55rem .8rem; font-weight: 400; }
.v4-toffer__hitd { display: grid; gap: .1rem; min-width: 0; }
.v4-toffer__hitd strong { font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; }
.v4-toffer__hitd span { font-size: .8125rem; color: var(--ink-3); }
.v4-toffer__hitp { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.v4-toffer__act { display: grid; gap: .5rem; }
.v4-toffer__smart { display: inline-flex; align-items: center; justify-content: center; justify-self: center; min-height: 2.75rem; padding: 0 .25rem; border: 0; background: none; color: var(--ink); font: 500 .9375rem/1.3 var(--font-sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: rgba(14,20,18,.4); cursor: pointer; }
.v4-toffer__smart:hover { text-decoration-color: var(--night); } .v4-toffer__smart:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; }
.v4-toffer__smart[disabled] { color: var(--ink-3); cursor: default; }
html:not(.js) .v4-toffer__smart { display: none; }

/* Buchungsinfos kurz (/angebote/) und Stornierung kompakt (/buchen/) */
.v4-book--short .v4-book__more { margin: 0; }
.v4-cancel__rows { display: grid; max-width: 44rem; margin: clamp(1rem, 2vw, 1.5rem) 0 0; border-top: 1px solid var(--line); }
.v4-cancel__rows div { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.v4-cancel__rows dt { font-weight: 500; color: var(--ink); } .v4-cancel__rows dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 02.10.2026 (Bike-Seiten Runde 2): Routenkarten – Aufbau wie die Tarif- und Paketkarten (Linie, dunkle Oberkante), Name als Link zur Tourseite,
   Fakten als Symbolzeile über einer Haarlinie, Start unten bündig. Ohne eigene Überschrift (--sub) gehört der Block zur Bühne davor: Abstand S-join. */
.v4-routes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
@media (min-width: 64em) { .v4-routes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.v4-route { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.35rem 1.3rem; border: 1px solid var(--line); border-top: 2px solid var(--night); background: #fff; }
.v4-route__code { margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-route__h { margin: 0; font-family: var(--font-serif); font-size: clamp(1.25rem, 1.12rem + .45vw, 1.5rem); font-weight: 400; line-height: 1.2; }
.v4-route__h a { color: inherit; text-decoration: none; }
.v4-route__h a:hover, .v4-route__h a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.v4-route__h .v3-ext { font-size: .72em; color: var(--ink-3); }
.v4-route__text { margin: 0; max-width: 34em; color: var(--ink-2); line-height: 1.5; text-wrap: pretty; }
.v4-route__facts { list-style: none; margin: .3rem 0 0; padding: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.35rem; border-top: 1px solid var(--line); font-size: .9375rem; font-weight: 600; color: var(--ink); }
.v4-route__facts li { display: inline-flex; align-items: center; gap: .45rem; } .v4-route__facts svg { flex: none; color: var(--ink-3); }
/* 02.10.2026 (g31): Sprachfassungen – in schmalen Routenkarten (Telefon, Tablet) steht die Schwierigkeit immer in einer eigenen Zeile. Die
   übersetzten Höhenangaben („625 m de dénivelé“, „625 м набора высоты“) sprengen die Faktenzeile sonst je nach Zahl mal, mal nicht, und die
   Karten wirken ungleich. Deutsch („625 Hm“) passt immer in eine Zeile und bleibt unverändert. */
html:not(:lang(de)) .v4-route { container: hk-route / inline-size; }   /* benannt: body ist selbst ein Container und darf nicht greifen */
@container hk-route (max-width: 30rem) { .v4-route__facts li:last-child { flex-basis: 100%; } }
.v4-route__dot { flex: none; width: .75rem; height: .75rem; border-radius: 50%; }
.v4-route__dot--blau { background: #2f68b0; } .v4-route__dot--rot { background: #c13b2f; } .v4-route__dot--schwarz { background: #161616; }
/* 02.10.2026: Start und Bezug als eigene Zeilen (eigene Übersetzungsbausteine), gemeinsam unten bündig */
.v4-route__foot { margin-top: auto; padding-top: .15rem; }
.v4-route__start { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--ink-3); }
.v4-route__here { margin: .1rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--ink-2); font-weight: 600; }
.v4-routes__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem; margin-top: 1.25rem; }
.v4-routes__foot:empty { display: none; } .v4-routes__foot .v4-note, .v4-routes__foot .v4-links { margin: 0; }
.v4-stage + .v4-sec.v4-routes--sub:not(.v4-stage):not(.v4-duo) { padding-top: 2rem; }
/* 02.10.2026: E-Komposita nicht am Bindestrich umbrechen (Hülle aus dem Build, nur deutsche Seiten) */
.v3-nwg { white-space: nowrap; }
/* 02.10.2026: Angabenband ohne Kontaktkarte (Bikepark, Anstiege) ab Desktop über die volle Breite, alle Angaben in einer Reihe */
@media (min-width: 64em) {
  .v4-stage__info:not(:has(.v4-reachto)) { grid-template-columns: minmax(0, 1fr); }
  .v4-stage__info:not(:has(.v4-reachto)) > .v4-facts--q { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: clamp(1.5rem, 2.5vw, 2.5rem); }
  .v4-stage__info:not(:has(.v4-reachto)) > .v4-facts--q > .v4-facts__item { grid-column: auto; border-bottom: 1px solid var(--line); }
}
/* 06.10.2026 (Johannes): Bild-Lader – kleines Kleeblatt der Marke auf dem Platzhalter (--ph), nur solange ein Bild wirklich lädt (v4.js setzt
   .hk-ld/.is-loading bis load bzw. error – kein Schein-Lader). Erscheint erst nach .3 s (schnelle Bilder blitzen nicht auf) und nur im Sichtbereich
   (.is-near); die vier Blätter leuchten nacheinander auf, bei reduzierter Bewegung ruhig. Der transparente nachtgrüne Kreis hält das weiße Kleeblatt
   auf hellen wie dunklen Platzhaltern lesbar. */
.pic.hk-ld::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; border-radius: 50%; background: rgba(14,20,18,.32) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cstyle%3Epath%7Bfill:%23fff;opacity:.32;animation:k 1.6s ease-in-out infinite%7Dpath:nth-of-type(2)%7Banimation-delay:.4s%7Dpath:nth-of-type(3)%7Banimation-delay:.8s%7Dpath:nth-of-type(4)%7Banimation-delay:1.2s%7D@keyframes k%7B0%25,55%25,100%25%7Bopacity:.32%7D18%25%7Bopacity:1%7D%7D%3C/style%3E%3Cpath d='M20 17C14.2 12.6 12.4 8.7 14.9 6C16.7 4.1 19.2 4.4 20 6.3C20.8 4.4 23.3 4.1 25.1 6C27.6 8.7 25.8 12.6 20 17Z'/%3E%3Cpath d='M20 17C14.2 12.6 12.4 8.7 14.9 6C16.7 4.1 19.2 4.4 20 6.3C20.8 4.4 23.3 4.1 25.1 6C27.6 8.7 25.8 12.6 20 17Z' transform='rotate(90 20 20)'/%3E%3Cpath d='M20 17C14.2 12.6 12.4 8.7 14.9 6C16.7 4.1 19.2 4.4 20 6.3C20.8 4.4 23.3 4.1 25.1 6C27.6 8.7 25.8 12.6 20 17Z' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 17C14.2 12.6 12.4 8.7 14.9 6C16.7 4.1 19.2 4.4 20 6.3C20.8 4.4 23.3 4.1 25.1 6C27.6 8.7 25.8 12.6 20 17Z' transform='rotate(270 20 20)'/%3E%3C/svg%3E") center / 58% no-repeat; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; pointer-events: none; }
.pic.hk-ld.is-loading.is-near::after { opacity: 1; visibility: visible; transition: opacity .35s var(--ease) .3s, visibility 0s linear .3s; }
/* 06.10.2026 (Johannes): Rundgang lädt erst vor (v4.js) – der Play-Knopf wird zum Lader: Kleeblatt im weißen Kreis, dessen Blätter nacheinander aufleuchten,
   außen ein Ring mit dem echten Ladefortschritt; stockt der Film, erscheint derselbe Lader über dem Bild. Bewegung nur im Sichtbereich (.is-live). */
.v4-rgang__tri { display: contents; }
.v4-rgang__ico .v4-rgang__klee, .v4-rgang__wait .v4-rgang__klee { display: none; width: 1.75rem; height: 1.75rem; margin: 0; }
.v4-rgang__klee path { fill: currentColor; opacity: .3; animation: hkLeaf 1.6s ease-in-out infinite; }
.v4-rgang__klee path:nth-child(2) { animation-delay: .4s; } .v4-rgang__klee path:nth-child(3) { animation-delay: .8s; } .v4-rgang__klee path:nth-child(4) { animation-delay: 1.2s; }
@keyframes hkLeaf { 0%, 55%, 100% { opacity: .3; } 18% { opacity: 1; } }
.v4-rgang__frame:not(.is-live) .v4-rgang__klee path { animation-play-state: paused; }
.v4-rgang__frame.is-loading .v4-rgang__tri { display: none; }
.v4-rgang__frame.is-loading .v4-rgang__ico .v4-rgang__klee, .v4-rgang__wait .v4-rgang__klee { display: block; }
.v4-rgang__frame.is-loading .v4-rgang__ico::before, .v4-rgang__frame.is-loading .v4-rgang__ico::after { animation: none; opacity: 0; }
.v4-rgang__frame.is-loading .v4-rgang__play { cursor: progress; } .v4-rgang__frame.is-loading .v4-rgang__play:hover .v4-rgang__ico { transform: none; }
.v4-rgang__ico .v4-rgang__ring, .v4-rgang__wait .v4-rgang__ring { position: absolute; left: -6px; top: -6px; display: none; width: calc(100% + 12px); height: calc(100% + 12px); margin: 0; transform: rotate(-90deg); pointer-events: none; }
.v4-rgang__frame.is-loading .v4-rgang__ico .v4-rgang__ring, .v4-rgang__wait .v4-rgang__ring { display: block; }
.v4-rgang__ring circle { fill: none; stroke-width: 2; }
.v4-rgang__ring-track { stroke: rgba(255,255,255,.3); }
.v4-rgang__ring-fill { stroke: #fff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .25s linear; }
.v4-rgang__wait { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.v4-rgang__wait[hidden] { display: none; }
.v4-rgang__wait-in { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(14,20,18,.5); color: #fff; }
/* 06.10.2026 (Johannes): „Rundgang“ auch im Footer mit kleinem Play-Zeichen (weiß auf Nachtgrün), Reihenfolge wie im Menü */
.v3-footer__group a.v3-footer__play { gap: .55rem; }
@media (prefers-reduced-motion: reduce) {
  .pic.hk-ld::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23fff' opacity='.85'%3E%3Cpath d='M20 17C14.2 12.6 12.4 8.7 14.9 6C16.7 4.1 19.2 4.4 20 6.3C20.8 4.4 23.3 4.1 25.1 6C27.6 8.7 25.8 12.6 20 17Z'/%3E%3Cpath d='M20 17C14.2 12.6 12.4 8.7 14.9 6C16.7 4.1 19.2 4.4 20 6.3C20.8 4.4 23.3 4.1 25.1 6C27.6 8.7 25.8 12.6 20 17Z' transform='rotate(90 20 20)'/%3E%3Cpath d='M20 17C14.2 12.6 12.4 8.7 14.9 6C16.7 4.1 19.2 4.4 20 6.3C20.8 4.4 23.3 4.1 25.1 6C27.6 8.7 25.8 12.6 20 17Z' transform='rotate(180 20 20)'/%3E%3Cpath d='M20 17C14.2 12.6 12.4 8.7 14.9 6C16.7 4.1 19.2 4.4 20 6.3C20.8 4.4 23.3 4.1 25.1 6C27.6 8.7 25.8 12.6 20 17Z' transform='rotate(270 20 20)'/%3E%3C/g%3E%3C/svg%3E"); }
  .v4-rgang__klee path { animation: none; opacity: .85; }
  .v4-rgang__ring-fill { transition: none; }
}

/* HAHNENKLEE · Mobile Gestaltung und Bedienung (Auftrag 25.09.2026, Abschlussrunde). Gebündelt nach v3.css (src/build.ts).
   Konsolidierte Fassung: eine Telefon-Bedingung für den Rahmen, eine für den Inhalt, eine für Querformat-Ergänzungen – statt
   gestapelter Overrides. Tablet-Hochformat (48–63.99em) und Desktop (ab 64em) bleiben unverändert: alle mobilen Elemente sind
   dort per display: none aus Layout, Barrierefreiheitsbaum und Tab-Reihenfolge genommen (Teil 0).

   TELEFON   = (max-width: 47.99em), (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse)
               → hochkant sowie gedrehtes Telefon bis 1023 px Breite und höchstens 500 px Höhe mit Touch; keine Geräteerkennung.
               Dieselbe Bedingung nutzen v4-mobile.js (window.hk.phoneQuery) und der Intro-Verzicht in home.ts.
   HOCHKANT  = (max-width: 47.99em): Inhaltskomposition für schmale Viewports (auch 740 px quer).
   QUER      = nur Ergänzungen für kurze Querformate (Höhe, Safe Areas, natürliches Wachstum des Heros).

   Teile: 0 außerhalb des Telefons · 1 Rahmen (Kopfzeile, Menü, Aktionsleiste, Footer, Dialoge, Rechtstext-Leiste, Hero-Steuerung)
   · 2 Telefon-Bausteine (Kontakt-Einstieg, Lageplan, Grundrisse, Galerie, Listen, Kurztexte) · 3 Inhalt hochkant · 4 Querformat
   · 5 Bewegung. Farben, Schriften und Tokens aus v3.css; keine neuen Verläufe, Glasflächen oder Siegel. */

/* ---------- 0 Außerhalb des Telefons: mobile Elemente aus; gemeinsame, auf Desktop unsichtbare Hüllen neutral ---------- */
.v3-mnav, .v3-mnav__act, .v3-mbar, .v3-mfoot, .v3-menu__mlogo, .v4-legal__mdoc, .v4-legal__now, .v4-form__copy, .v4-jumps--m, .v4-crumbs-m, .v4-tacc, .v4-qacc, .v4-cols__m,
.v3-hero__sub, .v3-hero__more-m, .v4-mtext, .v4-ml, .v4-mcontact, .v4-hero__mhelp, .v4-siteplan__pick, .v4-siteplan__status,
.v4-plans__switch, .v4-plan__short, .v4-plan__allsum, .v4-zoom__lbl, .v4-rows__morep, .v4-gal__allp, .v4-gal__n, .v4-gal__more, .v4-tours__morep { display: none; }
.v4-gal__groups { display: contents; }                                      /* Hülle der Bildgruppen: auf Desktop ohne eigene Box */
/* Startseiten-Galerie (Nachtrag 26.09.): Kachel mit eigenem Telefon-Motiv – außerhalb des Hochformat-Telefons nur die Desktop-Kachel */
.v3-gal__link--m { display: none; }
/* Wunsch Johannes 30.09. (Mobil-Kritik): Aufklapper der Extras und Partnerbild nur auf dem Telefon hochkant; die Texthülle des Partners ist
   außerhalb ohne eigene Box (Kinder bleiben Teil des bisherigen Rasters) */
.v3-extras__m, .v3-partner__media, .v3-news__media, .v3-gal__cap, .v4-break__h, .v3-band__over, .v4-cols__mfig, .v4-plans__mfig, .v4-igband__m { display: none; }
.v3-partner__copy, .v3-loc__head { display: contents; }
/* Raumliste im Aufklapper (M12, nur Telefon zuklappbar): ab 64em bleibt die Liste wie bisher im dritten Subgrid-Band gestreckt –
   beide Geschoss-Listen gleich hoch, Zeilen gleichmäßig verteilt (ohne diese Regeln wurde die EG-Liste kürzer; Befund Desktop-Vergleich 26.09.) */
@media (min-width: 64em) { .v4-plan__all { display: grid; } }
@media (min-width: 64em) { .v4-plan__all::details-content { display: grid; } }   /* eigene Regel: ältere Browser ohne ::details-content verwerfen nur diese */
.v4-gal__groups > .v4-gal__group:first-child { margin-top: 0; }             /* wie bisher „.v3-sechead + .v4-gal__group“ */
.v4-gal__grid > li { position: relative; }                                  /* KI-Symbol als Geschwister des Bildöffners (M07) */
.v4-gal__grid > li > .v3-ai { right: .5rem; bottom: .5rem; }
/* M05/F05 (alle Größen, solange der Versand nicht aktiv ist): ehrlicher Zustand vor den Feldern mit echten Kontaktwegen, deaktivierte Schaltfläche
   sichtbar deaktiviert. Weiß mit Nachtkante statt beiger Fläche */
.v4-iform__offline { margin: 0 0 1.5rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-left: 3px solid var(--night); border-radius: 2px; background: #fff; color: var(--ink); }
.v4-iform__offline p { margin: 0; font-size: 1rem; line-height: 1.5; }
.v4-iform__offline strong { display: block; font-weight: 600; }
.v4-iform__offline .v4-iform__offact { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.v4-iform__offact .v3-btn { min-height: 2.75rem; padding: .6rem 1.1rem; font-size: .9375rem; flex-wrap: wrap; column-gap: .4em; row-gap: .1rem; }   /* große Schrift: Nummer in eigene Zeile statt „A/nr/uf/en“ */
.v4-iform__offnum { font-weight: 500; white-space: nowrap; }   /* Abstand zu „Anrufen“ über column-gap des Knopfs (im Flex-Knopf entfällt das Leerzeichen) */
/* L02 (27.09. abends): Ersatzdarstellung anstelle des Formulars – Hauptinhalt der rechten Spalte bzw. direkt unter der Themenwahl */
.v4-iform__offline--main { margin: 0; padding: 1.25rem 1.3rem 1.3rem; }
.v4-iform__offline .v4-iform__offtopic { margin-top: .85rem; font-size: .9375rem; color: var(--ink-2); }
.v4-iform__offline .v4-iform__offtopic strong { display: inline; color: var(--ink); }
.v4-iform__offline .v4-iform__offhint { margin-top: .3rem; font-size: .9375rem; color: var(--ink-2); }
.v4-iform__offline .v4-iform__offaddr { margin-top: .6rem; font-size: .9375rem; color: var(--ink-2); overflow-wrap: anywhere; }
.v4-iform__offline .v4-voucher__nobuy { margin-top: .6rem; font-size: .875rem; color: var(--ink-2); }
.v4-form__media + .v4-iform__offline--main { margin-top: 1.25rem; }
.v4-iform__offsel { display: none; }   /* Auswahlfeld nur auf dem Telefon (dort ersetzt es die ausgeblendeten Themen-Schaltflächen) */
.v4-form__intro .v4-iform__offline--main { margin-top: .25rem; }   /* Gutschein ohne Versand: Karte unter dem Einleitungstext */
@media (min-width: 64em) { .v4-form__stage > .v4-vshot { max-width: none; margin: 0; } }   /* Beispielgutschein füllt die rechte Spalte */
.v4-iform [data-submit]:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.v3-stage--sauna { overflow-x: clip; }   /* Textschatten der Sauna-Bühne ragte ab 768 px über den Rand (Bestand); abgeschnitten wird nur, was außerhalb des Viewports liegt */

/* ---------- 1 TELEFON · Rahmen ---------- */
@media (max-width: 47.99em), (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  /* px: Kopfzeile trägt nur Logo und Menüsymbol, Seitenkante 20 px – beides wächst nicht mit der Schrift (M10). Nachtrag 26.09.: Kopfzeile
     44 px (Ausgangswert 52 px; Kommentare 26.09. „dünner“, 36 px; Nachtrag 26.09.: so schlank wie möglich, aber echte 44 × 44-px-Tippflächen
     innerhalb der Zeile) plus obere Geräte-Sicherheitszone; --header-h ist die Gesamthöhe, damit Fortschrittslinie, Sprungziele,
     Rechtstext-Leiste, Menükopf und Hero-Abstände die Sicherheitszone mitrechnen */
  :root { --hdr-row: 44px; --header-h: calc(var(--hdr-row) + env(safe-area-inset-top)); --mbar-h: 3.5rem; --gutter: 20px; }
  /* Wunsch Johannes 30.09. (Mobil-Kritik „zu viel Abstand überall“): Abschnitte 28 statt 40 px auseinander; H2 fließend 24–28 px, damit kurze
     Überschriften ab 360 px in eine Zeile passen („Noch was für eure Auszeit?“), längere ausgeglichen umbrechen statt ein Wort allein */
  :root { --s-m: 1.75rem; --fs-h2: clamp(1.5rem, 6.65vw, 1.75rem); }
  .v3-root .v3-h2 { max-width: none; text-wrap: balance; }
  /* Wunsch Johannes 30.09.: Links mit Pfeil nur fett, ohne Unterstreichung („beides ist zu viel, fett und Pfeil reicht“); Links im Fließtext
     bleiben unterstrichen (nicht nur über die Farbe erkennbar) */
  .v3-root .v3-link { text-decoration: none; }

  /* Lesbare Umbrüche (M10): Überschriften mit deutscher Silbentrennung; Wörter brechen nur, wenn sie allein nicht in die Zeile passen.
     E-Mail-Adressen und Telefonnummern haben eigene Regeln (Teil 2). */
  .v3-root h1, .v3-root h2, .v3-root h3 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: anywhere; max-width: 100%; }
  .v3-root main :is(div, section, article, aside, nav, form, fieldset, figure, ul, ol, li, dl, dt, dd, p, address, label, details, summary),
  .v3-root footer :is(div, nav, ul, li, p, details, summary) { min-width: 0; }
  .v3-root main :is(p, li, dd, dt, td, th, a, label, span, summary, figcaption, address), .v3-root footer :is(p, a, summary, span) { overflow-wrap: break-word; }
  .v3-root main :is(p, li, dd, dt, td, th, summary, figcaption) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
  .v3-root main .v3-btn, .v3-root main .v3-link { max-width: 100%; white-space: normal; }
  .v3-root main .v3-btn { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
  .v4-hero__in > *, .v4-text__body > *, .v4-tbl__grid > div:first-child > * { max-width: 100%; }   /* Start-ausgerichtete Raster: Einträge nie breiter als die Spalte (lange Wörter wie „Zahlungsbedingungen“ brechen bei 200 % Zoom statt überzulaufen) */
  .v3-root main a[href^="mailto:"] { overflow-wrap: anywhere; }
  .v3-extras__list a, .v4-rows__row { grid-template-columns: minmax(0, 1fr) auto; }
  .v3-extras__title, .v4-rows__title, .v4-dist dt { min-width: 0; overflow-wrap: anywhere; }
  .v4-dist { grid-template-columns: minmax(0, 1fr) auto; }
  .v4-arrive .v4-dist > div { gap: 1rem; }
  .v4-dist dd { flex: none; min-width: max-content; }   /* Wert behält seine Breite, der Ortsname bricht um */
  .v4-map__gate p { overflow-wrap: anywhere; }

  /* Kopfzeile: nur Logo und Menü (M01/M02). Nachtrag 26.09.: blendet beim Scrollen nach unten aus und nach oben wieder ein (site.js,
     24 px / 12 px seit Richtungswechsel); Fortschrittslinie und untere Leiste bleiben. Ausgeblendet ganz aus dem Bild (samt Schattenkante);
     Fokus ohne Fokusring (Antippen, Menü-Taste nach dem Schließen) hält ihn nicht fest – Tastaturfokus im Kopf blendet ihn per site.js ein */
  .v3-header { padding-top: env(safe-area-inset-top); visibility: visible; transition: transform .3s var(--ease-out), visibility 0s linear 0s, background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
  /* ausgeblendet: nach dem Hinausgleiten unsichtbar (visibility) – fängt keine Berührung ab und ist nicht per Tastatur erreichbar */
  .v3-header.is-hidden, .v3-header.is-hidden:focus-within { transform: translateY(calc(-100% - 2px)); visibility: hidden; transition: transform .3s var(--ease-out), visibility 0s linear .3s, background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
  .v3-header__in { min-height: var(--hdr-row); gap: .75rem; width: auto; margin: 0; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
  .v3-root .v3-header .v3-nav, .v3-root .v3-header .v3-header__right .v3-header__contact, .v3-root .v3-header .v3-header__right .v3-header__icon, .v3-root .v3-header .v3-header__right .v3-header__cta { display: none; }   /* stärker als die Tablet-Regeln (gescrollter Kopf zeigt dort Telefon/E-Mail) */
  .v3-header .v3-logo--primary { display: none; } .v3-header .v3-logo--compact { display: block; }
  .v3-header .v3-logo--always { height: 20px; width: auto; }
  /* Hero-Umbau 27.09. (Johannes): Startseite am Seitenanfang – großes Kopf-Logo mit dem Leuchten des bisherigen Hero-Logos, Kopfzeile höher;
     beim Herunterscrollen (is-scrolled) sanft auf die kompakte Größe mit festem Hintergrund, ganz oben wieder groß. Nur Transform/Opacity/Höhe
     des fixierten Kopfs – der Seiteninhalt verschiebt sich nicht; reduzierte Bewegung: sofort.
     Wunsch Johannes 28.09.: ganz oben steht dasselbe Hauptlogo wie im geöffneten Menü – gleiche Grafik (ohne „Ferienchalets im Harz“), Breite
     min(13.5rem, 62vw), Lage (20 px Rand) und Höhe der Zeile (72 px wie der Menükopf). Beim Öffnen des Menüs springt nichts, es kommt nur die
     Unterzeile dazu. Beim Scrollen verkleinert es sich und blendet in das kompakte dunkle Logo über */
  .v3-header--symbol .v3-header__in { transition: min-height .35s var(--ease-out); }
  .v3-header--symbol:not(.is-scrolled) .v3-header__in { min-height: 72px; }
  .v3-header--symbol .v3-header__brand { display: inline-grid; align-items: center; justify-items: start; }
  /* helle, dunkle und obere Fassung liegen in derselben Rasterzelle und blenden über (statt display-Wechsel) */
  .v3-header.v3-header--symbol .v3-logoset--light, .v3-header.v3-header--symbol .v3-logoset--dark, .v3-header.v3-header--symbol .v3-logoset--top { display: inline-flex; grid-area: 1 / 1; transition: opacity .3s var(--ease); }
  .v3-header.v3-header--symbol .v3-logoset--dark, .v3-header.v3-header--symbol .v3-logoset--light { opacity: 0; }
  .v3-header.v3-header--symbol.is-scrolled .v3-logoset--dark { opacity: 1; }
  .v3-header.v3-header--symbol .v3-logoset--top { transform-origin: left center; transition: opacity .3s var(--ease), transform .35s var(--ease-out); }
  .v3-header.v3-header--symbol.is-scrolled .v3-logoset--top { opacity: 0; transform: scale(.646); pointer-events: none; }   /* 192 → 124 px wie das kompakte Logo (01.10.: vorher 216 px) */
  .v3-header--symbol .v3-logoset--top .v3-logo { display: block; width: min(12rem, 56vw); height: auto; filter: brightness(1.12) drop-shadow(0 0 5px rgba(255,255,255,.32)); }
  .v3-header__brand { min-height: 44px; }   /* in px: die Zeile bleibt bei großer Schrift 44 px hoch (vorher 2.75rem → 88 px bei 200 %, Linie lag im Kopf) */
  /* 28.09.: rechter Bereich in die letzte Rasterspalte (ohne sichtbare Navigation rutschte er in die mittlere, 12 px vor dem Rand) und derselbe
     Randausgleich wie das X im Menükopf – das ☰ steht genau dort, wo beim Öffnen das X erscheint, bündig mit dem 20-px-Seitenrand */
  .v3-header__right { grid-column: 3; }
  .v3-burger { display: inline-flex; min-height: 44px; min-width: 44px; padding: 0; margin-right: max(-.6rem, calc(-1 * var(--gutter))); justify-content: center; }
  .v3-burger__label { display: none; }
  .v3-burger__icon { gap: 7px; justify-items: end; }
  .v3-burger__icon span { width: 26px; height: 1.5px; border-radius: 0; }
  .v3-burger__icon span:last-child { width: 17px; }
  .v3-header .v3-burger:focus-visible, .v3-menu .v3-menu__close:focus-visible, .v3-header .v3-header__brand:focus-visible, .v3-menu__head .v3-header__brand:focus-visible { outline-offset: -3px; }   /* Fokusring innerhalb der 44-px-Fläche: oben nicht angeschnitten */
  /* Fortschrittslinie am unteren Kopfrand; bei ausgeblendetem Kopf oben unter der Sicherheitszone – gleiche Dauer und Kurve wie der Kopf */
  .v3-progress { transition: top .3s var(--ease-out); }
  html:has(.v3-header.is-hidden) .v3-progress { top: calc(var(--pbar-y, var(--pbar-h)) + env(safe-area-inset-top)); }
  .v3-header:not(.is-scrolled):not(.v3-header--solid) .v3-burger { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
  .v3-header:not(.is-scrolled):not(.v3-header--solid)::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: rgba(255,255,255,.2); pointer-events: none; }
  .v3-header:not(.is-scrolled):not(.v3-header--solid)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 1.75rem); z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(14,20,18,.42), rgba(14,20,18,.18) 55%, rgba(14,20,18,0)); }

  /* Menü: eigener Block „6 MENÜ“ am Dateiende (Nacharbeit 27.09.: Telefon und Tablet, unter 80em) */

  /* Aktionsleiste (M09; Nacharbeit 27.09., Johannes): genau zwei Aktionen – „Auszeit buchen“ breiter, „Anrufen“ mit Symbol und Wort;
     Zustände aus v4-mobile.js: erst sichtbar, wenn die anfängliche Buchungsaktion aus dem Bild ist (hk-bar-top), aus über „Wann kommt ihr?“
     und am Footer (hk-bar-end; seit 05.10. abends auch an der Buchungszeile der Startseite), bei Formular, Tastatur, Menü, Dialogen und Consent.
     Liegt der Tastaturfokus in der Leiste, bleibt sie stehen. */
  .v3-mbar { display: flex; align-items: center; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; min-height: calc(var(--mbar-h) + env(safe-area-inset-bottom)); padding: .375rem max(.625rem, env(safe-area-inset-right)) calc(.375rem + env(safe-area-inset-bottom)) max(.625rem, env(safe-area-inset-left)); background: var(--night); color: var(--ivory); border-top: 1px solid rgba(255,255,255,.14); transform: none; visibility: visible; transition: transform .3s var(--ease-out), visibility 0s linear 0s; -webkit-tap-highlight-color: transparent; }
  .v3-mbar__book { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .35rem .75rem; border: 1px solid var(--ivory); border-radius: 4px; background: var(--ivory); color: var(--night); font: 600 1rem/1.2 var(--font-sans); letter-spacing: .01em; text-align: center; text-decoration: none; }
  .v3-mbar__book:active { background: #fff; }
  .v3-mbar__book:not(.v3-mbar__book--alt) { border-radius: 8px; border-color: #fff; background: #fff; font-weight: 700; }   /* 30.09. abends: reinweiß, kräftig, wie der Abschluss-Knopf */
  .v3-mbar--vouchers .v3-mbar__book, .v3-mbar--guests .v3-mbar__book { flex: 1 1 0; }
  .v3-mbar__book--alt { background: transparent; color: var(--ivory); border-color: rgba(255,255,255,.6); }
  .v3-mbar__book--alt:active { background: rgba(255,255,255,.1); }
  .v3-mbar__tel, .v3-mbar__alt { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; min-width: 44px; padding: .35rem .9rem; border: 1px solid rgba(255,255,255,.55); border-radius: 4px; color: var(--ivory); font: 600 1rem/1.2 var(--font-sans); text-decoration: none; }
  .v3-mbar__alt:active { background: rgba(255,255,255,.1); }   /* 01.10. abends: „Angebote“ wie „Anrufen“ gestaltet, Wort bleibt immer sichtbar */
  .v3-mbar__tel svg { flex: none; width: 18px; height: 18px; }
  .v3-mbar__tel:active { background: rgba(255,255,255,.1); }
  .v3-mbar :focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; }
  /* aus: Seitenanfang mit Buchungsaktion, Abschluss/Footer, Formular, Tastatur (nicht, solange der Fokus in der Leiste liegt); Menü, Dialoge, Consent immer */
  html:is(.hk-kbd, .hk-bar-top, .hk-bar-form, .hk-bar-end) .v3-mbar:not(:focus-within), .v3-mbar.is-off, html.js:not(.hk-bar-ready) .v3-mbar, body.is-locked .v3-mbar, body.is-consent-open .v3-mbar, html.hk-dialog-open .v3-mbar, body:has(dialog[open]) .v3-mbar, body:has(.v3-menu:not([hidden])) .v3-mbar, body:has([data-hk-consent]:not([hidden])) .v3-mbar { transform: translateY(calc(100% + 2px)); visibility: hidden; transition: transform .25s var(--ease), visibility 0s linear .25s; }
  html:has(body.has-mbar) { scroll-padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom) + .75rem); }   /* Fokus/Anker nie hinter der Leiste */

  /* KI-Symbol: sichtbar klein (24 px), Tippfläche 44 px, eigenes Ziel neben dem Bildöffner (M07/M14) */
  .v3-ai:not(.v3-ai--hero) { width: 2.75rem; height: 2.75rem; padding: .5rem; right: .15rem; bottom: .15rem; }
  .v3-ai:not(.v3-ai--hero) img { width: 1.5rem; height: 1.5rem; }
  .v3-ai:focus-visible { outline: 2px solid var(--night); outline-offset: 0; box-shadow: 0 0 0 4px var(--ivory); }   /* zweifarbiger Fokusring: auf hellen und dunklen Bildstellen sichtbar */
  /* D01 (27.09.): Hero- und Abschlusssymbol oben rechts im Bild – nie unter der breiten Schaltfläche, der festen Leiste oder einem Verlauf */
  .v3-close > .v3-ai { top: .15rem; right: .15rem; bottom: auto; }
  .v4-hero > .v3-ai { top: calc(var(--header-h) + .35rem); right: .15rem; bottom: auto; }

  /* Startseiten-Film (M08): kein Vollbild-Loader */
  .v3-loader { display: none !important; }
  /* Verbindlicher Wunsch Johannes 27.09. (ausdrücklich freigegeben, gilt unabhängig von anderen Vorgaben): auf Telefonen keine Pause-Taste und
     kein KI-Symbol im Hero-Film. Bei „Bewegung reduzieren“ zeigt der Hero das Standbild; die Erklärung zum Film steht auf „Bildwelt & KI“.
     Tablet/Desktop unverändert mit beiden. */
  .v3-hero__ctrl { display: none !important; }
  /* Kein aufklappender Kurzhinweis („KI-bearbeitet“) an KI-Symbolen auf Telefonen: er überdeckte Bild und Steuerung; die Erklärung steht
     auf „Bildwelt & KI“, wohin jedes Symbol führt, die Art bleibt im zugänglichen Namen */
  .v3-ai__tip { display: none; }

  /* Rechtstexte (M18): kompakte Kapitel-Leiste unter dem Header – Dokument + aktueller Abschnitt; Liste scrollt innerhalb der Resthöhe */
  .v4-legal { padding-top: .75rem; }
  .v4-legal__grid { gap: 1.25rem; }
  .v4-legal__kicker, .v4-legal__doc { display: none; }
  .v4-legal__toc { position: sticky; top: calc(var(--header-h) + var(--pbar-y, var(--pbar-h))); transition: top .3s var(--ease-out); z-index: 20; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); background: var(--ivory); border-bottom: 1px solid var(--line); max-height: none; overflow: visible; }
  .v4-legal__tocbox { position: static; border: 0; border-radius: 0; padding: 0; }
  .v4-legal__tocbox summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "doc ico" "now ico"; align-items: center; column-gap: 1rem; row-gap: .05rem; min-height: 3.25rem; padding: 6px 0; pointer-events: auto; color: var(--ink); font-size: 1rem; letter-spacing: 0; text-transform: none; }
  .v4-legal__tocbox summary::before { content: none; }
  .v4-legal__tocbox summary .v3-faq__ico { display: block; grid-area: ico; }
  .v4-legal__mdoc { display: block; grid-area: doc; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 400; line-height: 1.25; }
  .v4-legal__toclbl { display: none; }
  .v4-legal__now { display: block; grid-area: now; font-size: .9375rem; font-weight: 400; line-height: 1.3; color: var(--ink-2); }
  .v4-legal__now:empty::before { content: "Inhalt"; }
  .v4-legal__tocbox[open] ol { position: absolute; left: 0; right: 0; top: 100%; max-height: var(--toc-max, calc(100dvh - var(--header-h) - var(--pbar-y, var(--pbar-h)) - 5rem)); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: .35rem var(--gutter) 1rem; background: var(--ivory); border-bottom: 1px solid var(--line); box-shadow: 0 18px 24px -18px rgba(14,20,18,.35); }
  .v4-legal__toc a { min-height: 2.75rem; display: flex; align-items: center; font-size: 1rem; }
  html:has(.v3-header.is-hidden) .v4-legal__toc { top: calc(var(--pbar-y, var(--pbar-h)) + env(safe-area-inset-top) + 2px); }   /* Kopf aus: Leiste rückt unter die Fortschrittslinie */
  .v4-prose h2, .v4-legal [id] { scroll-margin-top: calc(var(--header-h) + var(--pbar-y, var(--pbar-h)) + 4.25rem); }
  .v4-legal__stand { margin-top: 1.25rem; }

  /* Consent-Dialog (M18): bei großer Schrift nichts seitlich heraus – Zweck-Zeile schrumpft, Wörter trennen */
  .v4-consent__item label { grid-template-columns: minmax(0, 1fr) auto; }
  .v4-consent :is(h2, p, strong, small, summary, li, a) { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
  .v4-consent__actions .v3-btn { white-space: normal; overflow-wrap: anywhere; }
  /* Consent-Dialog: 44-px-Tippflächen, Schrift nicht unter 15 px */
  .v4-consent__actions .v3-btn { min-height: 2.75rem; font-size: .9375rem; }
  .v4-consent__links a, .v4-consent__back { min-height: 2.75rem; }

  /* Footer (M03, Nachtrag 26.09.) – Nacharbeit 27.09. (Johannes): kurzer, klar gegliederter Abschluss – Logo · drei Direktaktionen ·
     vier Rubriken als Aufklapper (Entscheidung 27.09. nachmittags) · Sprache und Social · Abschlusszeile. Eine Seitenkante (20 px bei 390),
     wenige Linien, keine festen Höhen, nichts abgeschnitten */
  .v3-footer > .v3-wrap:not(.v3-mfoot) { display: none; }
  .v3-footer { padding-top: 1.75rem; }
  .v3-close + .v3-footer { padding-top: 1.75rem; }   /* maßvoller Abstand zum Seitenabschluss */
  .v3-mfoot { display: block; container-type: inline-size; width: auto; margin: 0; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
  .v3-mfoot a { color: inherit; }
  .v3-mfoot :where(p) { margin: 0; }
  /* A Logo (Wunsch 27.09.): Wortbildmarke mit „Ferienchalets im Harz“, etwas größer und mit dem dezenten Leuchten des Startseiten-Logos */
  .v3-mfoot__logo { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .v3-mfoot__logo .v3-logo { display: block; width: min(16rem, 74vw); height: auto; filter: brightness(1.12) drop-shadow(0 0 5px rgba(255,255,255,.32)); }
  /* B Drei Direktaktionen in einer Reihe, dezentes Symbol und Wort: gleich große Abstände zwischen den drei (Wunsch 27.09.) – erste bündig
     links, letzte bündig rechts; Tippflächen reichen je .75rem in die Lücken (mind. 44 px); bei großer Schrift Wort unter dem Symbol */
  .v3-mfoot__direct { list-style: none; display: flex; justify-content: space-between; align-items: stretch; margin: .75rem 0 0; padding: 0; border-block: 1px solid var(--line-dark); }
  .v3-mfoot__direct li { display: flex; }
  .v3-mfoot__direct li:first-child a { margin-left: -.75rem; } .v3-mfoot__direct li:last-child a { margin-right: -.75rem; }
  .v3-mfoot__direct a { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .45rem; min-height: 3.25rem; min-width: 2.75rem; padding: .35rem .75rem; font-size: 1rem; font-weight: 500; line-height: 1.2; color: var(--ivory); text-align: center; text-decoration: none; }
  .v3-mfoot__direct svg { flex: none; width: 20px; height: 20px; opacity: .8; }
  .v3-mfoot__direct a:active { background: rgba(255,255,255,.06); }
  /* C Rubriken wie am Desktop (Wunsch Johannes 30.09.: Chalets · Für euch · Im Harz · Extras · Preise · Kontakt & Infos · Rechtliches), je ein
     Aufklapper, untereinander durch eine feine Linie getrennt: ganze Kopfzeile tippbar, feiner Pfeil rechts, zu Beginn geschlossen, höchstens eine
     offen; der offene Abschnitt liegt auf einem leicht helleren Nachtgrund über die volle Breite – man sieht, in welcher Rubrik man ist */
  .v3-mfoot__acc { border-bottom: 1px solid var(--line-dark); }
  .v3-mfoot__acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 50px; padding: .35rem 0; font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.25; color: var(--ivory); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
  .v3-mfoot__acc > summary::-webkit-details-marker { display: none; }
  .v3-mfoot__acc > summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-right: .15rem; background: currentColor; opacity: .7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5 7 9.5 11.5 5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5 7 9.5 11.5 5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--ease-out); }   /* Pfeil per CSS (30.09.) */
  .v3-mfoot__acc[open] > summary::after { transform: rotate(180deg); opacity: 1; }
  .v3-mfoot__acc ul { list-style: none; margin: -.25rem 0 0; padding: 0 0 .75rem; }
  .v3-mfoot__acc li > a, .v3-mfoot__acc li > button { display: flex; align-items: center; width: 100%; min-height: 2.75rem; margin: 0; padding: .3rem 0; border: 0; border-radius: 0; background: none; font: 400 1rem/1.35 var(--font-sans); color: var(--ivory-2); text-align: left; text-decoration: none; cursor: pointer; }
  .v3-mfoot__acc a[aria-current="page"] { color: var(--ivory); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
  .v3-mfoot__acc li > a.v3-mfoot__play { gap: .6rem; }   /* 06.10.2026 (Johannes): Rundgang auch im Telefon-Footer, Play-Zeichen wie am Desktop (weiß auf Nachtgrün) */
  .v3-mfoot__acc[open] { margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left))) calc(-1 * max(var(--gutter), env(safe-area-inset-right))); padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); background: rgba(255,255,255,.07); border-bottom-color: rgba(255,255,255,.18); }
  .v3-mfoot__acc[open] > summary { color: #fff; }
  .v3-mfoot__acc[open] > summary .v3-mfoot__chev { opacity: 1; }
  .v3-mfoot__acc[open] li > a, .v3-mfoot__acc[open] li > button { color: var(--ivory); }
  /* D Sprache links (derselbe Schalter wie im Menü, Liste erst nach Betätigung, volle Breite darunter), Instagram/Facebook rechts */
  .v3-mfoot__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lang social" "panel panel"; align-items: center; column-gap: 1rem; margin-top: .5rem; }
  .v3-mfoot__row > .v3-lang--m { display: contents; }
  .v3-mfoot__row .v3-lang__btn { grid-area: lang; justify-self: start; }
  .v3-mfoot__row .v3-lang__panel { grid-area: panel; }
  .v3-mfoot__social { grid-area: social; display: flex; margin-right: -12px; }   /* Symbol bündig mit der rechten Kante; Tippfläche reicht in den Seitenrand */
  .v3-mfoot__social a { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--ivory-2); }
  /* E Abschlusszeile (Wunsch 27.09.): nur „© Jahr Hahnenklee Ferienchalets“ */
  .v3-mfoot__copy { margin-top: .25rem; padding: 1rem 0; border-top: 1px solid var(--line-dark); font-size: .875rem; line-height: 1.4; color: var(--ivory-3); }   /* 30.09.: mittig unter der letzten Linie */
  .v3-footer :focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; }

  /* Wischen in Dialogen (Lightbox, Plan, Menü) nicht als Browser-Zurück deuten: Überwisch-Navigation aus, solange ein Dialog offen ist
     (Befund 25.09.: Wischen nach rechts in der Lightbox verließ in Chromium die Seite). Die Lightbox wertet waagerechte Gesten selbst aus. */
  html:has(dialog[open]), html:has(.v3-menu:not([hidden])) { overscroll-behavior-x: none; }
  .lightbox { touch-action: pan-y pinch-zoom; overscroll-behavior: contain; }

  /* Plan-Vergrößerung (M06/M12): Vollbild-Dialog, Fläche verschiebbar, sichtbare Zoom-Tasten (44–48 px) */
  .v4-pz { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: var(--ink); }
  .v4-pz[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  .v4-pz::backdrop { background: rgba(14,20,18,.6); }
  .v4-pz__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
  .v4-pz__title { margin: 0; font: 400 1.25rem/1.25 var(--font-serif); }
  .v4-pz__close { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; margin-right: -.6rem; border: 0; background: none; color: inherit; cursor: pointer; }
  .v4-pz__view { display: flex; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #F6F4EF; }
  .v4-pz__view:focus-visible { outline: 2px solid var(--night); outline-offset: -3px; }
  .v4-pz__canvas { flex: none; margin: auto; }
  .v4-pz__canvas svg, .v4-pz__canvas img { display: block; width: 100%; height: auto; }
  .v4-pz__scope { display: block; }
  .v4-pz__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .5rem max(var(--gutter), env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); border-top: 1px solid var(--line); background: #fff; }
  .v4-pz__cap { flex: 1 1 14rem; margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
  .v4-pz__tools { display: flex; align-items: center; gap: .25rem; }
  .v4-pz__btn { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font: 400 1.5rem/1 var(--font-sans); cursor: pointer; }
  .v4-pz__btn:disabled { opacity: .35; cursor: default; }
  .v4-pz__btn:focus-visible, .v4-pz__close:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
  .v4-pz__lvl { min-width: 3.5rem; text-align: center; font-size: .9375rem; font-variant-numeric: tabular-nums; }
}

/* ---------- 2 TELEFON · Bausteine (hochkant und quer) ---------- */
@media (max-width: 47.99em), (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  /* Kurzfassungen: je Element ist nur eine Fassung sichtbar und im Barrierefreiheitsbaum (Titel, Einstiege, Sprungtexte, Schaltflächen) */
  .v4-dtext, .v4-dl { display: none; }
  .v4-mtext { display: block; }
  .v4-ml { display: inline; }

  /* Sprungziele (M10; D05 27.09.): kompakte, beschriftete Abschnittsnavigation – kräftige Textlinks mit ↓ in wenigen Zeilen statt drei Reihen
     weißer Pillen; jede Zeile 44 px Tippfläche, bei großer Schrift darf ein Eintrag zweizeilig sein */
  .v4-jumps--m { display: none; margin: 0; padding-top: .75rem; }   /* Wunsch Johannes 30.09.: Sprungzeile („Auf dieser Seite … ↓“) entfällt auf dem Telefon – die Seiten lesen sich als Bildfolge */
  .v4-jumps--m .v3-wrap { width: auto; margin: 0; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
  .v4-jumps { justify-self: stretch; width: 100%; min-width: 0; }
  .v4-jumps__label { display: block; margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .v4-jumps ul { flex-wrap: wrap; gap: 0 1.35rem; }
  .v4-jumps li { max-width: 100%; }
  .v4-jumps a { min-height: 2.75rem; max-width: 100%; padding: 0; border: 0; border-radius: 0; background: none; font-size: 1rem; font-weight: 600; line-height: 1.25; white-space: normal; }
  .v4-jumps a .v3-arrow { margin-left: .3em; color: var(--ink-3); }
  /* 01.10. (Johannes): Brotkrumen auf dem Telefon wieder im Hero – klein direkt über der Überschrift, im dunklen Verlauf unten (D01, 27.09.: oben im
     Bild lagen sie auf Gesichtern und hellem Himmel; deshalb nicht oben, sondern am Textblock). Gilt auf allen Seiten mit Bild-Hero. */
  .v4-hero:not(.v4-hero--mband):not(.v4-hero--mstack):not(.v4-hero--plain) .v4-hero__in > .v4-crumbs { margin-bottom: -.4rem; color: rgba(255,255,255,.9); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
  .v4-hero:not(.v4-hero--mband):not(.v4-hero--mstack):not(.v4-hero--plain) .v4-hero__in > .v4-crumbs ol { font-size: .8125rem; }
  .v4-hero:has(+ .v4-jumps--m) .v4-hero__actions .v3-btn--ghost, .v4-hero:has(+ .v4-crumbs-m + .v4-jumps--m) .v4-hero__actions .v3-btn--ghost { display: none; }

  /* Kontakt-Einstieg (M04): Bildband begleitet, blockiert nicht; darunter Titel, drei Aktionen, Anschrift, Anreisehinweis */
  .v4-hero--mband { display: block; min-height: 0; background: var(--ivory); color: var(--ink); }
  .v4-hero--mband .v4-hero__media { position: relative; inset: auto; height: clamp(8.5rem, 28svh, 13rem); }
  .v4-hero--mband .v4-hero__media .pic { height: 100%; aspect-ratio: auto; }
  .v4-hero--mband .v4-hero__media::after { content: ""; position: absolute; inset: 0 0 auto; height: 70%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(14,20,18,.5), rgba(14,20,18,0)); }
  .v4-hero--mband .v4-hero__scrim { display: none; }
  .v4-hero--mband .v4-hero__in { padding: 1.25rem 0 1.75rem; gap: .75rem; }
  .v4-hero.v4-hero--mband:not(.v4-hero--plain) .v4-crumbs, .v4-hero--mband .v4-crumbs a { color: var(--ink-2); }   /* D01: auch die aktuelle Seite (ohne Link) dunkel – war Elfenbein auf Creme */
  .v4-hero--mband .v4-hero__h1 { color: var(--ink); text-shadow: none; }
  .v4-hero--mband .v4-hero__lead { color: var(--ink-2); text-shadow: none; }
  /* 30.09. (Text auf Bildern): Seitentitel unten auf dem Bildband, Einleitung und Aktionen darunter */
  .v4-hero--mband { display: grid; }
  .v4-hero--mband .v4-hero__media { grid-area: 1 / 1; height: clamp(11rem, 32svh, 15rem); }
  .v4-hero--mband .v4-hero__media::after { top: auto; bottom: 0; height: 75%; background: linear-gradient(to top, rgba(14,20,18,.8), rgba(14,20,18,0)); }
  .v4-hero--mband .v4-hero__in { display: contents; }
  .v4-hero--mband .v4-hero__in > * { grid-column: 1; margin-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
  .v4-hero--mband .v4-hero__in > .v4-hero__h1 { grid-area: 1 / 1; align-self: end; z-index: 2; margin-bottom: .9rem; color: var(--ivory); text-shadow: 0 1px 3px rgba(0,0,0,.4); }
  .v4-hero--mband .v4-hero__in > .v4-hero__h1 + * { margin-top: 1.1rem; }
  .v4-hero--mband .v4-hero__in > :last-child { margin-bottom: 1.75rem; }
  .v4-hero--mband .v4-hero__in > * + * { margin-top: .75rem; }
  .v4-hero.v4-hero--mband :focus-visible { outline-color: var(--night); }   /* heller Grund: dunkler Fokusrahmen (stärker als die Bild-Hero-Regel) */
  .v4-mcontact { display: grid; gap: 1rem; width: 100%; margin-top: .25rem; }
  .v4-mcontact__act { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
  /* Wunsch Johannes 30.09. abends (Kästen „passen überhaupt nicht“, Nummer abgeschnitten): drei gleich große Kacheln nebeneinander –
     Symbol oben, Name darunter, beim Anruf die Nummer klein; Breite ohne Überlauf (Rand kommt vom Eltern-Raster) */
  .v4-hero--mband .v4-hero__in > .v4-mcontact { width: auto; }
  .v4-mcontact .v4-mcontact__act { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v4-mcontact .v4-mcontact__btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 5.5rem; padding: .75rem .35rem .65rem; border-radius: 8px; text-align: center; }
  .v4-mcontact .v4-mcontact__btn svg { width: 22px; height: 22px; }
  .v4-mcontact .v4-mcontact__k { font-size: .9375rem; line-height: 1.2; }
  .v4-mcontact .v4-mcontact__v { justify-self: auto; font-size: .75rem; line-height: 1.2; letter-spacing: -.01em; }
  .v4-mcontact .v4-mcontact__x { position: absolute; top: .4rem; right: .5rem; font-size: .75rem; }
  .v4-mcontact__btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; min-height: 3.25rem; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); text-decoration: none; }
  .v4-mcontact__btn svg { color: var(--night); }
  .v4-mcontact__k { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; }
  .v4-mcontact__v { justify-self: end; font-size: .9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .v4-mcontact__x { justify-self: end; color: var(--ink-2); }
  .v4-mcontact__addr { display: grid; font-style: normal; font-size: 1rem; line-height: 1.5; color: var(--ink); }
  .v4-mcontact__arrive { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
  .v4-map:not(.is-loaded) { aspect-ratio: auto; height: auto; min-height: 16rem; }
  .v4-cam--player { border-radius: 4px; }   /* Telefon: 16:9 in voller Inhaltsbreite (Freigabe 26.09.: Höhe passend zum Player, keine Beschnitte) */
  /* QA 27.09.: vor dem Laden bestimmt der Inhalt die Höhe (16:9 = 197 px schnitt Überschrift und „Webcam laden“ ab); der Player bleibt 16:9 */
  .v4-cam--player:not(.is-loaded) { aspect-ratio: auto; }
  .v4-cam--player:not(.is-loaded) .v4-cam__gate { position: relative; inset: auto; padding: 1.75rem 1.25rem 1.5rem; }
  .v4-map:not(.is-loaded) .v4-map__gate { position: relative; inset: auto; min-height: 16rem; }   /* Platzhalter wächst mit dem Text (200 % Schrift) */
  /* Kontaktseite: Anrufen und Anschrift stehen im Einstieg – der Kontaktblock zeigt mobil nur noch E-Mail und Karte */
  .page--contact .v4-card--call, .page--contact .v4-card--addr { display: none; }
  /* Gästeinformationen (M17): Hilfe vor Ort direkt im Einstieg */
  .v4-hero__mhelp { display: block; margin: .25rem 0 0; font-size: 1.0625rem; line-height: 1.5; }
  .v4-hero__mhelp a { font-weight: 600; white-space: nowrap; }

  /* Tippflächen ≥ 44 px ohne Layoutverschiebung (Brotkrumen, E-Mail in Kontaktkarten): Innenabstand + gleich großer negativer Außenabstand */
  .v4-crumbs a { display: inline-block; padding: .7rem 0; margin: -.7rem 0; }
  .v4-card__v--mail { display: inline-block; padding: .65rem 0; margin: -.65rem 0; }
  /* Lesbare Umbruchregeln für Adressen und Nummern */
  .v4-card a, .v4-contact a, .v4-form__alt a, .v4-card__v--mail { overflow-wrap: anywhere; }
  .v4-dist dd { white-space: nowrap; }   /* „600 m“, „15 km“ bleiben ganz (bei 200 % Schrift sonst Ziffern untereinander) */

  /* Lageplan (M06): Auswahl über dem Plan, Statuszeile, sichtbarer Öffner; die Schaltflächenliste bleibt Tablet/Desktop */
  .v4-siteplan__pick { display: grid; gap: .35rem; margin: 0 0 .75rem; }
  .v4-siteplan__pick label { font-size: .9375rem; font-weight: 600; color: var(--ink); }
  .v4-siteplan__pick select { width: 100%; min-height: 3rem; padding: 0 40px 0 .9rem; border: 1px solid var(--line); border-radius: 4px; -webkit-appearance: none; appearance: none; color: var(--ink); font: 400 1.0625rem/1.3 var(--font-sans); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.25 6 8l4-3.75' fill='none' stroke='%230E1412' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center / 14px 14px; }
  .v4-siteplan__status { display: block; margin: .6rem 0 0; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
  .v4-siteplan__status:empty { display: none; }
  .v4-siteplan__text > .v4-h3, .v4-siteplan__text > .v4-chalets { display: none; }
  /* D05 (27.09.): „vergrößern“ als Leiste unter dem Plan – lag vorher auf Legende und Planunterschrift */
  .v4-zoom__lbl { display: flex; align-items: center; justify-content: center; gap: .45rem; position: static; min-height: 2.75rem; padding: .6rem .75rem; border-radius: 0 0 2px 2px; background: var(--night); color: var(--ivory); font: 600 .9375rem/1.2 var(--font-sans); pointer-events: none; }
  .v4-zoom__lbl::before { content: ""; width: 1rem; height: 1rem; flex: none; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EFE7' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E"); }
  .v4-plan__zoom .v4-zoom__ico, .v4-siteplan__zoom .v4-zoom__ico { display: none; }

  /* Grundrisse (M12): Geschoss-Tabs, kurze Raumübersicht, vollständige Raumliste aufklappbar */
  .v4-plans .v3-wrap { container-type: inline-size; }
  .v4-plans__switch:not([hidden]) { display: flex; margin: 0 0 1rem; padding: 3px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
  @container (max-width: 20rem) { .v4-plans__switch:not([hidden]) { flex-direction: column; } }
  .v4-plans__tab { flex: 1 1 0; min-height: 2.75rem; padding: .35rem .5rem; border: 0; border-radius: 3px; background: none; color: var(--ink-2); font: 600 1rem/1.2 var(--font-sans); cursor: pointer; }
  .v4-plans__tab[aria-selected="true"] { background: var(--night); color: var(--ivory); }
  .v4-plans__tab:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
  .v4-plans:has(.v4-plans__switch:not([hidden])) .v4-plan__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v4-plans:has(.v4-plans__switch:not([hidden])) .v4-plan__head { display: contents; } .v4-plans:has(.v4-plans__switch:not([hidden])) .v4-plan__lvl { display: none; }   /* Tabs tragen das Geschoss */
  .v4-plan__short { display: block; margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
  .v4-plan__allsum { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 600; cursor: pointer; list-style: none; }
  .v4-plan__allsum::-webkit-details-marker { display: none; }
  .v4-plan__all[open] > .v4-plan__allsum { border-bottom-color: transparent; }
  .v4-plan__meta { white-space: normal; }

  /* Chalet-Galerie (M12): kompakte Vorschau je Bereich + „Alle 23 Fotos ansehen“; alle Fotos bleiben in der Lightbox erreichbar */
  /* 30.09. (Wunsch Johannes): große Bildkacheln untereinander statt kleiner 2er-Vorschau – Bereichsname auf dem Bild, ohne Fotozahl;
     „Alle … Fotos ansehen“ unter den Kacheln */
  .v4-gal--multi .v3-wrap { display: flex; flex-direction: column; width: 100%; }
  .v4-gal--multi .v3-sechead { display: contents; }
  .v4-gal--multi .v3-sechead > :is(.v3-h2, .v3-text) { margin-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
  .v4-gal--multi .v3-sechead > .v3-text { margin-top: .5rem; }
  .v4-gal--multi .v4-gal__allp { display: block; order: 3; margin: 1rem max(var(--gutter), env(safe-area-inset-left)) 0; }
  .v4-gal__all { width: 100%; min-height: 3rem; justify-content: center; }
  .v4-gal--multi .v4-gal__groups { order: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: .375rem; margin-top: 1rem; container-type: inline-size; }
  .v4-gal--multi .v4-gal__group { display: flex; flex-direction: column-reverse; justify-content: flex-end; margin: 0; }
  .v4-gal--multi .v4-gal__grid { display: block; }
  .v4-gal--multi .v4-gal__grid > li:nth-child(n+2) { display: none; }
  .v4-gal--multi .v4-gal__btn .pic { aspect-ratio: 16 / 10; border-radius: 0; }
  .v4-gal--multi .v4-gal__label { margin: .45rem 0 0; font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink); }
  .v4-gal--multi .v4-gal__n { display: none; }
  .v4-gal--multi .v4-gal__group:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .v4-gal--multi .v4-gal__group:last-child:nth-child(odd) .v4-gal__btn .pic { aspect-ratio: 16 / 10; }
  /* 30.09. (Text auf Bildern): Bereichsname und Fotozahl unten auf der Vorschau statt darunter */
  .v4-gal--multi .v4-gal__group { position: relative; }
  .v4-gal--multi .v4-gal__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 2.75rem max(var(--gutter), env(safe-area-inset-left)) .8rem; border-radius: 0; font-family: var(--font-serif); font-size: 1.375rem; font-weight: 400; line-height: 1.2; color: var(--ivory); background: linear-gradient(to top, rgba(14,20,18,.82) 0, rgba(14,20,18,.5) 45%, rgba(14,20,18,0) 100%); text-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: none; }
  .v4-gal--multi .v4-gal__more { display: none; }
  /* einzelne Bildgruppe (Sauna): vier Bilder im 2er-Raster, das vierte zeigt die Zahl der übrigen */
  .v4-gal__grid { gap: .375rem; }
  .v4-gal:not(.v4-gal--multi) .v4-gal__grid > li:nth-child(n+5) { display: none; }
  .v4-gal__btn { position: relative; }
  .v4-gal__more { display: grid; place-items: center; position: absolute; inset: 0; z-index: 2; background: rgba(14,20,18,.52); color: var(--ivory); font: 600 1.25rem/1 var(--font-sans); letter-spacing: .02em; border-radius: 2px; pointer-events: none; }

  /* Lange Ziel-Listen (M15): wenige Empfehlungen, der Rest hinter „Alle Ausflugsziele“ (nur mit JS eingeklappt) */
  html.js .v4-rows--more .v4-rows__list:not(.is-open) > .v4-rows__extra { display: none; }
  html.js .v4-rows--more .v4-rows__morep { display: block; margin: .75rem 0 0; }
  /* D04 (27.09.): Touren – auf dem Telefon zuerst vier, „Alle … Touren“ bzw. ein Filter zeigt alle (ohne JavaScript die ganze Liste) */
  html.js .v4-tours:not(.is-all) .v4-tours__list > li:nth-child(n+5) { display: none; }
  html.js .v4-tours:not(.is-all) .v4-tours__morep { display: block; margin: 1rem 0 0; }
  .v4-rows__more { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem 1rem; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font: 600 1rem/1.25 var(--font-sans); text-align: left; cursor: pointer; }
  .v4-rows__more:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }

  /* D04 (27.09.): Tabellen mit Themen als Aufklapper (Ausstattung, Tarife, Ankommen); Desktop behält die Tabelle */
  .v4-tbl--acc .v4-tacc { display: block; }
  .v4-tbl--acc .v4-table, .v4-tbl--acc .v4-tcards { display: none; }   /* 27.09.: Tarifkarten nur ab Tablet, Telefon behält die Aufklapper */
  .v4-tacc .v3-faq__a p { margin: 0; }
  .v4-sec--qacc .v4-qacc { display: block; margin-top: .75rem; justify-self: stretch; width: 100%; }   /* QA 27.09.: volle Breite (Textkörper richtet links aus) */
  .v4-sec--qacc .v4-qa { display: none; }
  .v4-qacc .v3-faq__a p { margin: 0; }
  .v4-cols__item--mfold .v4-cols__d { display: none; }
  .v4-cols__item--mfold .v4-cols__m { display: block; justify-self: stretch; width: 100%; }   /* QA 27.09.: Eltern-Grid richtet links aus – Aufklapper sonst nur textbreit */
  .v4-cols__m .v3-faq__in > :first-child { margin-top: 0; }
  /* Lange Einzellinks (z. B. „Gutschein vorhanden? …“): Pfeil folgt dem Text statt rechts abgesetzt am Zeilenende */
  .v4-book__voucher .v3-link { display: inline; line-height: 1.6; }
  /* F05: Kontaktwege im Hinweis „noch nicht freigeschaltet“ als volle Schaltflächen untereinander */
  .v4-iform__offact .v3-btn { flex: 1 1 100%; justify-content: center; }
  /* Formular (M05): Kopieren als leise Textaktion hinter der Adresse (44 px Tippfläche, keine konkurrierende Schaltfläche) */
  .v4-form__alt { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; line-height: 1.6; }
  .v4-form__alt a { display: inline-flex; align-items: center; min-height: 2.75rem; white-space: normal; }   /* Telefon/E-Mail: 44-px-Tippfläche wie „Adresse kopieren“ */
  .v4-form__copy { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .25rem; margin: 0 0 0 -.25rem; border: 0; background: none; color: var(--ink-2); font: 600 .9375rem/1.2 var(--font-sans); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgba(14,20,18,.35); cursor: pointer; }
  .v4-form__copy.is-done { color: var(--ink); text-decoration: none; }
  .v4-form__copy:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }

  /* Listen (M17): eine Trennlinie je Abschnitt genügt – keine Linie unter jedem Satz */
  .v4-list li { border-bottom: 0; padding: .3rem 0 .3rem 1.25rem; }
  .v4-list li::before { top: .85rem; }

  /* Hinweise unter Zeilen (z. B. Gutschein nur per Anfrage einlösbar) in normaler Lesegröße */
  .v4-note, .v4-rows__note { font-size: .9375rem; color: var(--ink-2); }

  /* Wunsch Johannes 28.09.: einheitliche Schriftgrößen – Fließtext überall 17 px (vorher teils 16 bzw. 17,4 px), Nebeninfos einheitlich 15 px
     (vorher 14, 14,4 und 15 px), Titel über Listentext deutlich größer als der Text (20 px Serifen statt 18,2 px, die neben 17 px wie ein
     Versehen wirkten). Navigation, Footer-Kleingedrucktes, Versal-Etiketten und die internen Staging-Marker bleiben eigene Stufen */
  .v4-plan__short, .v4-mcontact__arrive, .v4-mcontact__addr, .v4-iform__offline p, .v4-strong { font-size: 1.0625rem; }
  .v4-card__s, .v4-card .v4-dist, .v4-cam__src, .v4-legal__stand, .v4-rev__write { font-size: .9375rem; }
  .v3-extras__title, .v4-rows__title { font-size: 1.25rem; }
}

/* ---------- 3 TELEFON HOCHKANT (< 48em) · Inhalt ---------- */
@media (max-width: 47.99em) {
  .v3-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4-jumps a { white-space: normal; }
  .v3-close__h { white-space: normal; }

  /* Hero (Skyforest-Idee, Wunsch 25.09.): Marke, feine Linie, Claim, Unterzeile, zwei ruhige Umriss-Schaltflächen, Bewertung;
     unten rechts klein Pause/Play und KI-Symbol (M08). Kein Loader, Poster sofort. */
  /* Hero-Umbau 27.09. (Johannes): kein großes Logo im Hero (die Marke trägt der Kopf); der Film bleibt bildschirmfüllend (Wunsch Johannes:
     „auf dem vollen Screen“ – die zuerst verkürzte Fassung ist verworfen); große Schrift wächst mit.
     Wunsch Johannes 28.09.: der ganze Textblock sitzt mittig statt im unteren Drittel – oben und unten derselbe Abstand (unten zusätzlich
     die Sicherheitszone), der Textgrund wandert mit (siehe .v3-hero__scrim) */
  .v3-hero { min-height: calc(100svh - var(--pbar-h)); grid-template-rows: 1fr; }
  .v3-hero__center { align-content: center; gap: .75rem; padding: calc(var(--header-h) + var(--pbar-h) + 2.5rem) var(--gutter) calc(var(--header-h) + var(--pbar-h) + 2.5rem + env(safe-area-inset-bottom)); }
  .v3-hero__brand { display: none; }
  .v3-hero__claim { order: 1; }
  .v3-hero__rule { order: 2; width: 1px; height: 18px; margin: 0 0 -.2rem; background: rgba(255,255,255,.6); }   /* 28.09.: optisch mittig zwischen Claim und Unterzeile (≈ 13,5 px je Seite) */
  html.js:not(.review-static) .v3-hero__rule { animation: none; }   /* feiner Strich ohne eigene Animation */
  .v3-hero__sub { order: 3; }
  /* Wunsch Johannes 28.09.: „5-Sterne-Komfort“ schließt den Textblock ab (direkt unter der Unterzeile), danach mit Abstand die Aktionen.
     Nur die Anzeige ist umgestellt; Vorlese- und Tabreihenfolge bleiben Aktionen → Bewertung (wie auf dem Desktop) */
  .v3-hero__dtv { order: 4; }
  .v3-hero__actions { order: 5; }
  /* Textgrund um den mittigen Block (28.09.): weich, ohne harte Kante, Schwerpunkt leicht über der Mitte (dort steht der Claim, über dem der Film
     oft hellen Himmel oder Schnee zeigt). Wunsch Johannes 28.09. („Film sehr dunkel“): unten keine Abdunklung mehr (dort steht kein Text), oben
     nur ein Hauch unter dem Kopf (der hat einen eigenen Verlauf); dafür ein weicher Schein direkt um die Schrift (siehe Claim, Unterzeile,
     Bewertung). Film Ø Helligkeit 47 → 57 (+21 %), Kontrast an 16 Filmstellen weiter über den Grenzwerten (Claim ≥ 3,4, übrige ≥ 5,3 : 1).
     Zweite Zeile mindestens so hoch wie der Block (kurze Bildschirme, große Schrift) – max() nur mit Längen, Prozent verwirft Chrome im Verlauf;
     die erste Zeile bleibt als Rückfall */
  .v3-hero__scrim { background: radial-gradient(ellipse 115% 40% at 50% 47%, rgba(14,20,18,.54) 0, rgba(14,20,18,.44) 55%, rgba(14,20,18,0) 100%), linear-gradient(to bottom, rgba(14,20,18,.22) 0, rgba(14,20,18,0) 16%);
    background: radial-gradient(ellipse 115% max(40svh, 21rem) at 50% 47%, rgba(14,20,18,.54) 0, rgba(14,20,18,.44) 55%, rgba(14,20,18,0) 100%), linear-gradient(to bottom, rgba(14,20,18,.22) 0, rgba(14,20,18,0) 16%); }
  .v3-hero__claim { text-shadow: 0 0 22px rgba(14,20,18,.55), 0 0 8px rgba(14,20,18,.35), 0 1px 3px rgba(0,0,0,.35); }
  .v3-hero__dtv a { text-shadow: 0 0 12px rgba(14,20,18,.65), 0 1px 2px rgba(0,0,0,.45); }
  .v3-hero__claim { font-size: clamp(1.75rem, 9.5vw, 2.625rem); line-height: 1.06; letter-spacing: -.005em; }   /* „Ein ganzes Chalet.“ bleibt ab 320 px einzeilig */
  .v3-hero__sub { display: block; margin: 0; max-width: 22rem; font-size: 1.0625rem; line-height: 1.5; color: rgba(255,255,255,.92); text-wrap: balance; text-shadow: 0 0 16px rgba(14,20,18,.6), 0 1px 2px rgba(0,0,0,.45); }
  .v3-hero__subl { display: block; }   /* zwei ruhige Zeilen; bei großer Schrift bricht jede Zeile natürlich um */
  .v3-hero__facts { display: none; }
  /* Wunsch Johannes 28.09. (harmonischer, professioneller erster Bildschirm): zwei Gruppen – Text (Claim · Strich · Unterzeile · Bewertung)
     und Aktionen (Buchen · Entdecken) mit deutlichem Abstand (≈ 32 px Schrift zu Kante). Hauptaktion höchstens 20rem breit und mittig –
     eine Achse mit dem Claim statt Balken über die ganze Breite */
  .v3-hero__actions { width: min(100%, 20rem); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .75rem; margin-top: 1rem; }
  .v3-hero .v3-hero__actions .v3-btn, .v3-hero .v3-hero__actions .v3-hero__more { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 3.25rem; padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.7); border-radius: 0; background: rgba(14,20,18,.16); color: var(--ivory); font: 600 .875rem/1.25 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; text-align: center; text-decoration: none; text-shadow: none; box-shadow: none; transform: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: background-color .25s var(--ease), border-color .25s var(--ease); }
  .v3-hero .v3-hero__actions .v3-btn:hover, .v3-hero .v3-hero__actions .v3-btn:active, .v3-hero .v3-hero__actions .v3-hero__more:hover, .v3-hero .v3-hero__actions .v3-hero__more:active { background: rgba(255,255,255,.14); border-color: var(--ivory); transform: none; box-shadow: none; }
  /* Hauptaktion hervorgehoben (Kommentare/Nachtrag Johannes 26.09.): durchsichtig, aber mit kräftigerem lokalem Glasgrund (Nachtrag Punkt 4:
     in den hellsten Filmszenen lag Weiß auf dem hellen Glas nur bei 3,2 : 1), voller Ivory-Kante (1,5 px) und reinem Weiß; die Zweitaktion tritt
     mit zarter Kante zurück. Nur die Schaltfläche wird abgedunkelt, nicht das Bild. Keine weiße Fläche, keine neuen Farben, Schatten oder Verläufe */
  /* Wunsch Johannes 27.09.: wieder die transparente Fassung vom 26.09. (D05 „gefüllt“ zurückgenommen) */
  .v3-hero .v3-hero__actions .v3-btn--light { background: rgba(14,20,18,.36); border: 1.5px solid var(--ivory); color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .14em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }   /* 28.09. (Johannes): Hauptaktion 16 statt 14 px, die Zweitbox bleibt 14 px */
  .v3-hero .v3-hero__actions .v3-btn--light:hover, .v3-hero .v3-hero__actions .v3-btn--light:active { background: rgba(14,20,18,.5); border-color: #fff; color: #fff; }
  /* Glas-Schaltfläche im Hero (helle Schrift): Schimmer nur durch die Schrift wie überall, im gemeinsamen Takt (Wunsch Johannes 01.10.) */
  .v3-hero .v3-hero__actions .v3-btn--light.v3-sheen .v3-sheen__t, .v4-hero:not(.v4-hero--plain) .v4-hero__actions .v3-btn--light.v3-sheen .v3-sheen__t { --sh-base: #fff; --sh-mid: #E8B85A; --sh-peak: #FFF0C9; }
  /* Wunsch Johannes 28.09.: „Chalets entdecken“ als zweite, ruhige Box statt unterstrichenem Textlink mit Pfeil – gleiche Breite und Höhe wie die
     Hauptaktion, 12 px darunter; feine gedämpfte Kante (1 px), kaum Glasgrund, leichterer Schnitt, kein Schimmer. Die Hauptaktion bleibt mit
     kräftiger Kante, dunklerem Glas und Schimmer klar vorn (Sprungziel unverändert) */
  .v3-hero .v3-hero__actions .v3-hero__more { border-color: rgba(255,255,255,.45); background: rgba(14,20,18,.24); color: rgba(255,255,255,.94); font-weight: 500; }
  .v3-hero .v3-hero__actions .v3-hero__more:hover, .v3-hero .v3-hero__actions .v3-hero__more:active { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.8); }
  .v3-hero__more .v3-hero__more-arr { display: none; }
  .v3-hero .v3-hero__actions :focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
  .v3-hero__more::after, .v3-hero__more .v3-arrow { display: none; }
  .v3-hero__more-m { display: inline; } .v3-hero__more-d { display: none; }
  .v3-hero__google { margin-top: .35rem; font-size: .875rem; }
  .v3-hero__dtv { margin-top: -.75rem; gap: .5rem; font-size: .8125rem; }   /* C04: ruhige Zeile; Hero-Umbau 27.09.: „5-Sterne-Komfort“; 28.09.: Abschluss des Textblocks, ≈ 13 px unter der Unterzeile (44-px-Tippfläche bleibt) */
  .v3-hero__dtvl { display: none; } .v3-hero__dtvs { display: inline; }
  .v3-hero__dtv a { gap: .5rem; } .v3-hero__dtvstars svg { width: .875rem; height: .875rem; }   /* 27.09. (2): normale Schreibweise, gefüllte Sterne 14 px */
  /* Wunsch Johannes 28.09.: die Sterne leuchten dezent wie das Kopf-Logo (aufgehellt, weicher heller Schein); feiner dunkler Rand für helle
     Filmszenen. Nur die Sterne, nicht der Text – die Hauptaktion bleibt vorn */
  .v3-hero__dtvstars svg { filter: brightness(1.12) drop-shadow(0 0 3px rgba(255,255,255,.5)) drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
  .v4-contact__lines { flex-direction: column; gap: .25rem; margin-top: 1rem; } .v4-contact__lines li { display: grid; gap: 0; }

  /* ===== Wunsch Johannes 30.09.2026 (Mobil-Kritik der Startseite, übertragen auf alle Seiten): kürzere Wege zwischen den Abschnitten, Text
     so oft wie möglich auf den Bildern (Verlauf von unten, nie auf Gesichtern, KI-Symbol bleibt unten rechts frei), Links fett mit Pfeil
     statt unterstrichen, Zusatzinfos zum Aufklappen, Überschriften möglichst einzeilig. Verläufe: Nachtgrün wie Hero und Abschluss ===== */

  /* Wohnen (M11): ein starkes Hauptmotiv und zwei Ergänzungen; die ganze Galerie liegt auf der Chalet-Seite. D02 (27.09.): zuerst der Text
     (Angebot verstehen), das Balkonbild danach; 30.09.: Text dicht unter dem Hero, kurzer Weg zum Bild */
  .v3-chalets { padding-top: 0; }
  .v3-chalets .v3-wide { width: 100%; }
  .v3-gal { gap: .375rem; }
  .v3-gal > li:nth-child(n+4) { display: none; }
  .v3-gal__copy { padding: 1.25rem var(--gutter) 1.5rem; }
  /* 30.09. (Wunsch Johannes „Text auf Bildern, wo immer es geht“): der Einstieg liegt unten auf dem Balkonbild (Hochformat), die beiden
     kleinen Kacheln tragen ihren Namen (Kochen, Schlafen) */
  .v3-gal__item--living { display: grid; }
  .v3-gal__item--living > * { grid-area: 1 / 1; }
  .v3-gal__item--living .pic { aspect-ratio: 4 / 5; max-height: 85svh; }
  .v3-gal__item--living .v3-gal__copy { align-self: end; z-index: 2; padding: 5rem var(--gutter) .6rem; pointer-events: none; background: linear-gradient(to top, rgba(14,20,18,.82) 0, rgba(14,20,18,.5) 45%, rgba(14,20,18,0) 100%); }
  .v3-gal__item--living .v3-gal__copy > * { pointer-events: auto; }
  .v3-gal__item--living .v3-gal__copy .v3-h2 { color: var(--ivory); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .v3-gal__item--living .v3-gal__text { color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .v3-gal__item--living .v3-gal__more { color: var(--ivory); }
  .v3-gal__link { position: relative; }
  .v3-gal__item:not(.v3-gal__item--living) .v3-gal__cap { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2rem .75rem .55rem; font: 600 .9375rem/1.25 var(--font-sans); color: var(--ivory); background: linear-gradient(to top, rgba(14,20,18,.72), rgba(14,20,18,0)); text-shadow: 0 1px 2px rgba(0,0,0,.4); pointer-events: none; }
  .v3-gal__link--d { display: none; } .v3-gal__link--m { display: block; }   /* Balkon-Kachel „Terrasse & Balkon“ statt „Wohnen“ (Nachtrag 26.09.) */
  .v3-gal__fig { border-radius: 0; }

  /* Bühnen und Bildbänder randlos. Sauna und Harz (30.09.): Text auf dem Bild – Verlauf von unten, Überschrift einzeilig, der Link folgt direkt
     dem Satz; Sauna quadratisch (beide Personen ganz im Bild, M15), Harz im Hochformat (EM03). Lage bleibt Textblock (D03) */
  .v3-stage .v3-wide { width: 100%; }
  .v3-band .v3-wide { width: 100%; } .v3-band .pic { aspect-ratio: 4 / 5; max-height: 85svh; border-radius: 0; }   /* Bildbänder (26.09.): Hochformat-Gegenstück, randlos */
  .v3-band .pic img { object-position: var(--fx-m, 50% 50%); }
  .v3-band--dsk { display: none; }   /* 30.09.: kein freies Bild auf dem Telefon – das Winterbild trägt dort die Newsletter-Überschrift */
  /* Wunsch Johannes 30.09.: Instagram nur noch einmal auf der Startseite – als kurze Zeile („Den Harz zwischendurch erleben“) auf der Blauen
     Stunde statt unter den Gästestimmen (dort zu voll) und im Harz-Bild */
  .v3-band--ig .v3-wide { position: relative; }
  .v3-band__over { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 5rem calc(var(--gutter) + 2.25rem) .6rem var(--gutter); color: var(--ivory); pointer-events: none; background: linear-gradient(to top, rgba(14,20,18,.82) 0, rgba(14,20,18,.5) 45%, rgba(14,20,18,0) 100%); }
  .v3-band__over > * { pointer-events: auto; }
  .v3-band__over .v4-ig__a { font-size: 1.0625rem; }
  .v3-band__over .v4-ig__rest { color: rgba(255,255,255,.88); font-size: .9375rem; }
  .v3-band--ig .v3-ai { z-index: 3; }
  .v4-rev__ig, .v3-stage--harz .v4-ig--stage { display: none; }
  .v3-stage__fig .pic { border-radius: 0; }
  .v3-stage__fig--wide .pic { aspect-ratio: 4 / 5; max-height: 34rem; }
  .v3-stage--sauna .v3-stage__fig--wide .pic { aspect-ratio: 1 / 1; }
  /* 30.09. (Wunsch Johannes, „Bilder aneinandersetzen“): folgen Bildblöcke aufeinander, schließen sie direkt an – der dunkle Bildfuß trennt die
     Motive; Abstand gibt es nur beim Wechsel zwischen Text und Bild. Die sechs Zielgruppen-Kacheln bleiben eine Liste mit feiner Fuge */
  .v3-gift + .v3-stage--sauna, .v3-stage--sauna + .v3-aud, .v3-band--ig + .v3-partner--photo { padding-top: 0; }
  .v3-aud + .v3-stage--harz { padding-top: .375rem; }
  .v3-main > .v3-sec.v3-partner--photo { padding-bottom: 0; }   /* Abschluss schließt direkt an (stärker als „letzter Abschnitt“) */
  .v3-stage__copy { padding: 1.25rem var(--gutter) 0; }
  .v3-stage:is(.v3-stage--sauna, .v3-stage--harz) .v3-stage__frame { position: relative; }
  .v3-stage:is(.v3-stage--sauna, .v3-stage--harz) .v3-stage__copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: block; padding: 5rem var(--gutter) .9rem; color: var(--ivory); pointer-events: none; background: linear-gradient(to top, rgba(14,20,18,.84) 0, rgba(14,20,18,.62) 42%, rgba(14,20,18,0) 100%); }
  .v3-stage:is(.v3-stage--sauna, .v3-stage--harz) .v3-stage__copy > * { pointer-events: auto; }
  .v3-stage:is(.v3-stage--sauna, .v3-stage--harz) .v3-stage__copy .v3-h2 { margin: 0 0 .35rem; color: var(--ivory); font-size: clamp(1.625rem, 7.4vw, 2rem); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .v3-stage:is(.v3-stage--sauna, .v3-stage--harz) .v3-stage__p { display: inline; color: rgba(255,255,255,.94); font-size: 1.0625rem; line-height: 1.5; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
  .v3-stage:is(.v3-stage--sauna, .v3-stage--harz) .v3-stage__p::after { content: " "; }   /* Leerzeichen als Umbruchstelle zwischen Satz und Link (im Markup stehen sie direkt nebeneinander) */
  .v3-stage:is(.v3-stage--sauna, .v3-stage--harz) .v3-stage__more { display: inline; min-height: 0; margin-left: 0; padding-block: .75rem; color: var(--ivory); font-size: 1.0625rem; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
  .v3-stage:is(.v3-stage--sauna, .v3-stage--harz) .v3-stage__copy { text-wrap: balance; }
  .v3-stage.v3-stage--sauna .v3-stage__copy { padding-bottom: 2.4rem; }   /* letzte Zeile über dem KI-Symbol unten rechts */   /* Satz und Link ausgeglichen statt „Nur“ allein am Zeilenende */
  .v3-stage__frame > .v3-ai { top: auto; bottom: .5rem; right: .5rem; z-index: 3; }   /* KI-Symbol unten rechts im Bild, über dem Verlauf */
  .v3-stage--harz .v4-ig--stage { margin-top: .5rem; }
  .v3-stage--harz .v4-ig__rest { color: rgba(255,255,255,.86); }

  /* Gutschein-Band (30.09.): höher (5:4), Verlauf von unten, Text unten über die volle Breite – Überschrift ab 360 px einzeilig */
  .v3-gift { padding-block: var(--s-m) 0; }
  .v3-gift .v3-wide { width: 100%; } .v3-gift__in { border-radius: 0; }
  .v3-gift .pic { aspect-ratio: 5 / 4; height: auto; min-height: 0; max-height: none; }
  .v3-gift .pic img { object-position: var(--fx-m, 70% 58%); }
  .v3-gift__in::after { background: linear-gradient(to top, rgba(14,20,18,.84) 0, rgba(14,20,18,.55) 40%, rgba(14,20,18,0) 72%); }
  .v3-gift__copy { left: 0; right: 0; top: auto; bottom: 0; width: auto; padding: 0 var(--gutter) .45rem; justify-content: flex-end; }
  .v3-gift__h { margin-bottom: .3rem; font-size: clamp(1.25rem, 5.9vw, 1.625rem); line-height: 1.15; text-wrap: balance; }
  .v3-gift__t { margin-bottom: 0; font-size: 1rem; line-height: 1.45; }

  /* Gästestimmen (26.09., Nachträge): eine gut lesbare Stimme, die nächste angeschnitten; Band randlos; Detail als Blatt von unten */
  .v4-rev__rail { width: 100%; }
  .v4-rev__track { --rev-gap: 1rem; grid-auto-columns: 82%; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  /* D06 (27.09.): eine ganze Stimme am linken Rand, die nächste rechts bewusst angeschnitten und weich ausgeblendet */
  .v4-rev.is-band .v4-rev__track { padding-inline: 0; }
  .v4-rev.is-band .v4-rev__viewport { padding-left: var(--gutter); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 3rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 3rem), transparent 100%); }
  .v4-rev.is-band .v4-rev__item { flex-basis: 80%; }
  /* 30.09.: Einladung links in zwei kurzen Zeilen („Schon bei uns gewesen?“ / „Bewertung schreiben ↗“), Pfeile rechts daneben – keine Lücke
     mehr zwischen Frage und Link; Instagram darunter in zwei ruhigen Zeilen */
  .v4-rev__end { flex-wrap: nowrap; align-items: center; gap: .75rem; margin-top: .35rem; }
  .v4-rev__ctrl { order: 0; flex: none; margin-left: auto; margin-right: -.6rem; }
  .v4-rev__ask { display: grid; justify-items: start; gap: 0; flex: 1 1 auto; min-width: 0; font-size: .9375rem; line-height: 1.35; }   /* 28.09.: Nebeninfos einheitlich 15 px */
  .v4-rev__write { min-height: 2.75rem; margin-block: -.6rem; white-space: nowrap; font-size: .9375rem; font-weight: 600; text-decoration: none; }
  .v4-rev__ig { margin-top: .5rem; }
  .v4-revdlg { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 6px 6px 0 0; }
  .v4-revdlg[open] { animation-name: v4RevUp; }
  @keyframes v4RevUp { from { opacity: 0; transform: translateY(24px); } }
  .v4-revdlg__head { padding: 1.1rem var(--gutter) .9rem; }
  .v4-revdlg__title { font-size: 1.4375rem; }
  .v4-revdlg__body { padding: 1rem var(--gutter) 1.2rem; font-size: 1.0625rem; }
  .v4-revdlg__foot { padding: .6rem var(--gutter) calc(1rem + env(safe-area-inset-bottom)); }

  /* Instagram-Zeilen (30.09.): Symbol links, Einleitung fett in der ersten Zeile, Konto und ↗ darunter – statt einer gedrängten Zeile */
  .v4-ig__a { align-items: flex-start; gap: .75rem; padding: .3rem 0; }
  .v4-ig__ico { margin-top: .1rem; }
  .v4-ig__lead { display: block; }
  .v4-ig__sep { display: none; }
  .v4-ig__rest { font-size: .875rem; color: var(--ink-2); }

  /* Mit wem kommt ihr? (30.09.): Überschrift auf dem Kopfbild (D01-Befund helle Glasbrüstung → kräftiger Verlauf von unten), darunter sechs
     randlose Bildkacheln untereinander – Name und Satz auf dem Bild, KI-Symbol unten rechts frei */
  .v3-aud .v3-wide { width: 100%; }
  .v3-aud__head { position: relative; border-radius: 0; margin-bottom: .375rem; }
  .v3-aud__head .pic { aspect-ratio: 4 / 3; }
  .v3-aud__head::before { content: none; }
  .v3-aud__copy { position: absolute; left: 0; right: 0; top: auto; bottom: 0; z-index: 2; padding: 4rem var(--gutter) .9rem; background: linear-gradient(to top, rgba(14,20,18,.82) 0, rgba(14,20,18,.5) 45%, rgba(14,20,18,0) 100%); }
  .v3-aud__h2 { color: var(--ivory); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .v3-aud__grid { width: auto; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .375rem; }
  .v3-aud__grid > li { position: relative; padding: 0; border: 0; }
  .v3-aud__grid .v3-tile__media { border-radius: 0; }
  .v3-aud__grid .v3-tile__media .pic { aspect-ratio: 2 / 1; }
  .v3-aud__grid .v3-tile__link { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: .1rem; min-width: 0; padding: 2.75rem calc(var(--gutter) + 2.25rem) .8rem var(--gutter); color: var(--ivory); background: linear-gradient(to top, rgba(14,20,18,.8) 0, rgba(14,20,18,.45) 55%, rgba(14,20,18,0) 100%); }
  .v3-aud__grid .v3-tile__title { margin: 0; min-width: 0; font-size: 1.375rem; line-height: 1.2; color: var(--ivory); text-shadow: 0 1px 3px rgba(0,0,0,.35); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  .v3-aud__grid .v3-tile__text { display: block; font-size: .9375rem; line-height: 1.4; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .v3-aud__grid .v3-ai { z-index: 3; right: .5rem; bottom: .5rem; }

  /* Noch was für eure Auszeit? (30.09.): vier Aufklapper – Titel sichtbar, Satz und Link erst beim Antippen; die Zeilenliste bleibt dem Desktop */
  .v3-extras .v3-h2 { margin-bottom: .5rem; }
  .v3-extras__list { display: none; }
  .v3-extras__m { display: block; }
  .v3-extras__acc summary { min-height: 3.25rem; padding: .7rem 0; font-size: 1.25rem; }
  .v3-extras__go { display: inline; min-height: 0; margin-left: .25em; padding-block: .75rem; white-space: nowrap; }

  /* Hier findet ihr uns (30.09., Wunsch Johannes: keine drei Textblöcke hintereinander): Überschrift und Anschrift auf dem Ankommensbild
     (Familie mit Gepäck auf dem Weg – nicht die Straßenansicht aus „Raus in den Harz.“, D03), die drei Wege darunter mit Symbol, fett */
  .v3-stage--loc .v3-stage__fig--wide .pic { aspect-ratio: 5 / 4; }
  .v3-stage--loc .v3-stage__fig--wide .pic img { object-position: var(--fx-m, 68% 60%); }
  .v3-stage--loc .v3-stage__frame { display: grid; }
  .v3-stage--loc .v3-stage__frame > .v3-stage__fig { grid-area: 1 / 1; }
  .v3-stage--loc .v3-stage__copy { display: contents; }
  .v3-stage--loc .v3-loc__head { display: block; grid-area: 1 / 1; align-self: end; z-index: 2; padding: 4rem calc(var(--gutter) + 2.25rem) .8rem var(--gutter); background: linear-gradient(to top, rgba(14,20,18,.82) 0, rgba(14,20,18,.5) 45%, rgba(14,20,18,0) 100%); }
  .v3-stage--loc .v3-loc__head .v3-h2 { margin: 0 0 .3rem; color: var(--ivory); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .v3-stage--loc .v3-loc__head .v3-addr { color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .v3-stage--loc .v3-loc__links { grid-area: 2 / 1; padding: .6rem var(--gutter) 0; }
  .v3-stage--loc .v3-stage__fig--wide .v3-ai { z-index: 3; }
  .v3-loc__links { display: grid; justify-items: start; gap: 0; margin: .1rem 0 0; }
  .v3-loc__links .v3-link { gap: .7rem; }
  .v3-loc__links .v3-link::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
  .v3-loc__links .v3-link:nth-child(1) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.1-6.5-11a6.5 6.5 0 0 1 13 0c0 4.9-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); }
  .v3-loc__links .v3-link:nth-child(2) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.7v.1'/%3E%3C/svg%3E"); }
  .v3-loc__links .v3-link:nth-child(3) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l6-2.5 6 2.5 6-2.5v13.5l-6 2.5-6-2.5-6 2.5z'/%3E%3Cpath d='M9 4v13.5M15 6.5V20'/%3E%3C/svg%3E"); }

  /* Gut zu wissen (30.09.): Fragen als Aufklapper, der Link zu allen Fragen darunter statt zwischen Überschrift und Liste */
  .v3-faq__grid:has(> .reveal:first-child > .v4-links) { display: flex; flex-direction: column; gap: 0; }
  .v3-faq__grid > .reveal:first-child:has(> .v4-links) { display: contents; }
  .v3-faq__grid:has(> .reveal:first-child > .v4-links) .v3-h2 { margin-bottom: .5rem; }
  .v3-faq__grid > .reveal:first-child > .v4-links { order: 2; margin: .35rem 0 0; }

  /* Newsletter (30.09.): auf einen Bildschirm – Felder dicht, Einwilligung kurz und klein, Schaltfläche in voller Breite */
  .v3-news__in { gap: .9rem; padding-top: 1.25rem; }
  /* Newsletter der Startseite (30.09.): Überschrift und Satz auf dem Winterbild, Formular darunter auf hellem Grund */
  .v3-news--photo .v3-wrap { width: 100%; }
  .v3-news--photo .v3-news__in { gap: 0; padding-top: 0; border-top: 0; }
  .v3-news--photo .v3-news__media { display: block; grid-area: 1 / 1; }
  .v3-news--photo .v3-news__fig { margin: 0; }
  .v3-news--photo .v3-news__media .pic { aspect-ratio: 16 / 10; border-radius: 0; }
  .v3-news--photo .v3-news__media .v3-ai { z-index: 3; }
  .v3-news--photo .v3-news__copy { grid-area: 1 / 1; align-self: end; z-index: 2; padding: 3.5rem calc(var(--gutter) + 2.25rem) .8rem var(--gutter); pointer-events: none; background: linear-gradient(to top, rgba(14,20,18,.82) 0, rgba(14,20,18,.5) 45%, rgba(14,20,18,0) 100%); }
  .v3-news--photo .v3-news__copy .v3-h2 { color: var(--ivory); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .v3-news--photo .v3-news__copy .v3-text { color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .v3-news--photo .v3-news__form { margin: 1rem var(--gutter) 0; }
  .v3-news__copy .v3-text { margin-top: .3rem; }
  .v3-news__form, .v3-news__fields { gap: .6rem; }
  .v3-news__consent { font-size: .8125rem; line-height: 1.45; }
  .v3-news__actions .v3-btn { width: 100%; justify-content: center; }

  /* Noch nicht genug vom Harz? (30.09.): Text auf dem Bild (Teichweg im Oberharz), Logo auf heller Marke, Link fett – nur die Startseiten-
     Fassung mit Bild (v3-partner--photo); das Instagram-Band der Unterseiten nutzt dieselben Grundklassen und bleibt ein Textblock */
  .v3-partner__cta { flex-wrap: wrap; }
  .v3-partner__logo { height: 2.25rem; }
  .v3-partner--photo .v3-wrap { width: 100%; }
  .v3-partner--photo .v3-partner__in { position: relative; display: block; padding: 0; border-top: 0; }
  .v3-partner--photo .v3-partner__media { display: block; }
  .v3-partner--photo .v3-partner__fig { margin: 0; }
  .v3-partner--photo .v3-partner__media .pic { aspect-ratio: 4 / 5; max-height: 34rem; border-radius: 0; }
  .v3-partner--photo .v3-partner__media .v3-ai { z-index: 3; }
  .v3-partner--photo .v3-partner__copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: .35rem; padding: 5rem var(--gutter) .6rem; color: var(--ivory); pointer-events: none; background: linear-gradient(to top, rgba(14,20,18,.84) 0, rgba(14,20,18,.55) 45%, rgba(14,20,18,0) 100%); }
  .v3-partner--photo .v3-partner__copy > * { pointer-events: auto; }
  .v3-partner--photo .v3-partner__copy .v3-text { color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.35); text-wrap: balance; }
  .v3-partner--photo .v3-partner__h { margin-bottom: .25rem; color: var(--ivory); font-size: var(--fs-h2); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .v3-partner--photo .v3-partner__cta { gap: .7rem; }
  .v3-partner--photo .v3-partner__logo { display: none; }   /* 30.09. abends (Johannes): Logo auf dem Bild „nicht clean genug“ – nur der Link */
  .v3-partner--photo .v3-partner__copy .v3-link { color: var(--ivory); }
  .v4-partner { padding-top: 3.5rem; }   /* Kontakt: Abstand zum Kaufangebot, danach Logo und Link in eigener Zeile */
  /* Instagram-Band der Unterseiten (Wunsch Johannes 30.09.: „mobil viel zu umfangreich“): nur Überschrift und „Auf Instagram folgen ↗“ – der
     Satz mit dem Kontonamen entfällt auf dem Telefon, kürzere Wege */
  .v4-partner.v4-igband { padding-top: var(--s-m); }
  .v4-igband .v3-partner__in { gap: .35rem; padding-top: 1rem; }
  .v4-igband .v3-partner__h { margin: 0; font-size: 1.375rem; }
  .v4-igband .v3-partner__in > div > .v3-text { display: none; }

  /* Text mit Bild auf Unterseiten (30.09., Wunsch Johannes „so oft wie möglich Text auf Bildern“): Bild zuerst und randlos, die Überschrift
     liegt unten links auf dem Bild (Verlauf von unten, KI-Symbol rechts frei, Klicks gehen zum Vergrößern durch), Text und Link direkt
     darunter. Blöcke ohne Bild auf dem Telefon (mnoimg) bleiben Textblöcke */
  .v4-sec--media:not(.v4-sec--mnoimg) > .v3-wrap.v4-text { width: 100%; gap: 0; }
  .v4-sec--media:not(.v4-sec--mnoimg) .v4-text__body { display: contents; }
  .v4-sec--media:not(.v4-sec--mnoimg) .v4-text__frame { grid-row: 1; grid-column: 1; }
  .v4-sec--media:not(.v4-sec--mnoimg) .v4-text__fig .pic { border-radius: 0; }
  .v4-sec--media:not(.v4-sec--mnoimg) .v4-text__body > .v3-h2 { grid-row: 1; grid-column: 1; align-self: end; z-index: 2; max-width: none; margin: 0; padding: 3.5rem calc(var(--gutter) + 2.25rem) .85rem var(--gutter); color: var(--ivory); background: linear-gradient(to top, rgba(14,20,18,.8) 0, rgba(14,20,18,.45) 55%, rgba(14,20,18,0) 100%); text-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: none; }
  .v4-sec--media:not(.v4-sec--mnoimg) .v4-text__body > :not(.v3-h2) { width: auto; max-width: none; margin: .75rem var(--gutter) 0; }   /* QA 30.09.: Kinder mit width:100% liefen um den Seitenrand über (Aufklapper Hund-Seite, 360 px) */
  .v4-sec--media:not(.v4-sec--mnoimg) .v4-text__body > .v3-h2 + * { margin-top: 1rem; }

  /* Bildpausen (30.09., Wunsch Johannes „kein freies Bild“): die Überschrift des folgenden Abschnitts steht unten auf dem Bild; im Abschnitt
     bleibt sie für Screenreader und Suchmaschinen erhalten, ist auf dem Telefon aber nur einmal sichtbar */
  .v4-break .v3-wide { width: 100%; }
  .v4-break__frame { border-radius: 0; }
  .v4-break__h { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 4rem calc(var(--gutter) + 2.25rem) .9rem var(--gutter); font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1.12; color: var(--ivory); text-wrap: balance; text-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: none; background: linear-gradient(to top, rgba(14,20,18,.82) 0, rgba(14,20,18,.5) 45%, rgba(14,20,18,0) 100%); }
  .v4-break__frame > .v3-ai { z-index: 3; }
  .v3-h2.v3-h2--mbreak { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .v4-break:has(.v4-break__h) + * { padding-top: 1rem; }

  /* Einträge mit Telefon-Bild (30.09. abends, Wunsch Johannes „große Bilder mit Text drauf, Bilder direkt aneinander“): Hochformat randlos,
     Überschrift und Satz unten auf dem Bild; Liste und Link direkt darunter auf dem Nachtgrund – Bild und Text bilden einen Block */
  .v4-sec.v4-cols:has(.v4-cols__mfig) { padding-block: 0; }
  .v4-cols:has(.v4-cols__mfig) .v4-cols__grid { width: 100%; gap: 0; }
  .v4-cols__item--mpic { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none; justify-items: stretch; background: var(--night); color: #fff; }
  .v4-cols__mfig { display: block; grid-area: 1 / 1; }
  .v4-cols__mfigure { margin: 0; } .v4-cols__mfig .pic { aspect-ratio: 3 / 4; max-height: 88svh; border-radius: 0; }
  .v4-cols__mfig .v3-ai { z-index: 3; top: auto; right: .15rem; bottom: .15rem; }   /* KI-Zeichen unten rechts am Bild (Regel 27.09.) */
  .v4-cols__item--mpic:has(.v4-cols__mfig .v3-ai) .v4-cols__head { padding-bottom: 2.6rem; }   /* Text auf dem Bild endet über dem Zeichen */
  .v4-cols__item--mpic > .v4-cols__fig { display: none; }
  .v4-cols__item--mpic .v4-cols__body { display: contents; }
  .v4-cols__item--mpic .v4-cols__head { grid-area: 1 / 1; align-self: end; z-index: 2; display: grid; gap: .65rem; justify-items: start; padding: 6rem var(--gutter) 1.4rem; background: linear-gradient(to top, rgba(14,20,18,.9) 0, rgba(14,20,18,.72) 42%, rgba(14,20,18,0) 100%); pointer-events: none; }
  .v4-cols__item--mpic .v4-cols__head > * { pointer-events: auto; }
  .v4-cols__item--mpic .v4-cols__head .v3-h2 { margin: 0; max-width: none; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .v4-cols__item--mpic .v4-cols__head .v3-text { margin: 0; max-width: none; color: rgba(255,255,255,.93); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .v4-cols__item--mpic .v4-links { margin: .2rem 0 0; }
  .v4-cols__item--mpic .v3-link { color: #fff; font-weight: 600; }
  .v4-cols__item--mpic .v4-cols__rest { display: grid; grid-row: 2; gap: .9rem; justify-items: start; padding: .1rem var(--gutter) 1.75rem; }
  .v4-cols__item--mpic .v4-list li { padding-block: .22rem; color: rgba(255,255,255,.9); }
  .v4-cols__item--mpic .v4-list li::before { background: rgba(255,255,255,.72); top: .72rem; }
  .v4-cols__item--mpic .v4-qa { display: none; }   /* „So fragt ihr es an“: Anruf steht in der Leiste, Anfrage im Link darunter */
  .v4-cols__item--mpic .v4-reach { width: 100%; margin: 0; border-top-color: rgba(255,255,255,.16); }
  .v4-cols__item--mpic .v4-reach li { border-bottom-color: rgba(255,255,255,.16); }
  .v4-cols__item--mpic .v4-reach a { color: #fff; }
  .v4-cols__item--mpic .v4-reach__v { color: rgba(255,255,255,.86); text-decoration-color: rgba(255,255,255,.4); }
  /* gemischte Spalten (z. B. /buchen/: „Gut zu wissen“ ohne Bild, „Noch eine Frage vorab?“ mit Bild): Einträge ohne Bild behalten Seitenrand und Abstand */
  .v4-cols:has(.v4-cols__mfig) .v4-cols__item:not(.v4-cols__item--mpic) { margin-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); padding-block: var(--s-m); }
  /* Preise & Buchung (Wunsch Johannes 30.09. abends): Tarife sowie Zahlung, Gästebeitrag und Extras als Wischkarten – eine Karte fast
     bildschirmbreit, die nächste lugt hervor (Einrasten beim Wischen), Karten gleich hoch */
  .v4-tcards, .v4-sec--facts .v4-facts:has(> :nth-child(3)) { display: flex; align-items: stretch; gap: .75rem; margin: .5rem calc(-1 * max(var(--gutter), env(safe-area-inset-left))) 0 calc(-1 * max(var(--gutter), env(safe-area-inset-right))); padding: .25rem max(var(--gutter), env(safe-area-inset-right)) 1rem max(var(--gutter), env(safe-area-inset-left)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left)); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .v4-tcards::-webkit-scrollbar, .v4-sec--facts .v4-facts:has(> :nth-child(3))::-webkit-scrollbar { display: none; }
  .v4-tcards > .v4-tcard { flex: 0 0 min(84%, 22rem); scroll-snap-align: start; margin: 0; padding: 1.1rem 1.15rem 1.05rem; border: 1px solid var(--line); border-top: 3px solid var(--night); border-radius: 10px; background: #fff; }
  .v4-sec--facts .v4-facts:has(> :nth-child(3)) > .v4-facts__item { flex: 0 0 min(80%, 20rem); scroll-snap-align: start; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-top: 3px solid var(--night); border-radius: 10px; background: #fff; }
  .v4-sec--facts .v4-facts:has(> :nth-child(3)) > .v4-facts__item:last-child { border-bottom: 1px solid var(--line); }
  .v4-sec--facts .v4-facts:has(> :nth-child(3)) dd { font-size: 1rem; line-height: 1.5; }
  .v4-tcards:focus-visible, .v4-sec--facts .v4-facts:has(> :nth-child(3)):focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
  .v4-hs { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -.25rem 0 .5rem; }
  .v4-hs__n { font-size: .875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .v4-hs__btns { display: flex; gap: .5rem; }
  .v4-hs__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(14,20,18,.28); border-radius: 50%; background: #fff; color: var(--night); cursor: pointer; }
  .v4-hs__btn:disabled { opacity: .3; cursor: default; }
  .v4-hs__btn:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
  /* QA g17 (Tippflächen < 24 px): weitere E-Mail-Adressen der Kontaktkarte und „Meldet euch vor der Buchung“ auf 44 px Höhe */
  .v4-card__more a, .v4-book__voucher .v3-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
  /* Bühnen-Info unter dem Bild (MTB-Verleih): Seitenrand wie der übrige Text */
  .v4-stage__info { padding: 1.25rem max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
  /* Partner-, Newsletter- und Instagram-Hinweise ohne Bild (30.09. abends): nicht als lose Textblöcke – dunkler Block, mehrere Hinweise
     hintereinander bilden einen Block mit feinen Trennlinien; der Abschluss oder das Instagram-Bild schließt an */
  .v3-sec.v4-partner:not(.v4-igband) { margin: 0; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); background: var(--night); color: #fff; }
  .v3-sec.v4-partner:not(.v4-igband) .v3-wrap { width: 100%; }
  .v3-sec.v4-partner:not(.v4-igband) .v3-partner__in { padding: 1.35rem 0 1.45rem; border-top: 1px solid rgba(255,255,255,.16); }
  :not(.v4-partner) + .v3-sec.v4-partner:not(.v4-igband) .v3-partner__in { padding-top: 1.75rem; border-top: 0; }
  .v4-break + .v3-sec.v4-partner:not(.v4-igband) .v3-partner__in { padding-top: .6rem; }
  .v3-sec.v4-partner:not(.v4-igband) .v3-partner__h { color: #fff; }
  .v3-sec.v4-partner:not(.v4-igband) .v3-text { color: rgba(255,255,255,.86); }
  .v3-sec.v4-partner:not(.v4-igband) :is(.v3-link, .v4-social__a, .v3-ext) { color: #fff; }
  .v3-sec.v4-partner:not(.v4-igband) .v3-partner__logo { display: none; }
  .v3-main > .v3-sec.v4-partner:not(.v4-igband):last-child { padding-bottom: 0; }
  .v3-sec.v4-partner:not(.v4-igband) + .v4-igband:has(.v4-igband__m) { padding-top: 0; }
  /* Einzelgalerie (z. B. Wellness „Sauna & Bad“, 30.09. abends): statt vier kleiner Vorschaubilder eine Wischreihe großer Hochformate */
  .v4-gal:not(.v4-gal--multi) .v4-gal__grid { display: flex; gap: .5rem; margin: 0 calc(-1 * max(var(--gutter), env(safe-area-inset-left))) 0 calc(-1 * max(var(--gutter), env(safe-area-inset-right))); padding: 0 max(var(--gutter), env(safe-area-inset-right)) .9rem max(var(--gutter), env(safe-area-inset-left)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left)); overscroll-behavior-x: contain; scrollbar-width: none; }
  .v4-gal:not(.v4-gal--multi) .v4-gal__grid::-webkit-scrollbar { display: none; }
  .v4-gal:not(.v4-gal--multi) .v4-gal__grid > li, .v4-gal:not(.v4-gal--multi) .v4-gal__grid > li:nth-child(n+5) { display: block; flex: 0 0 82%; scroll-snap-align: start; }
  .v4-gal:not(.v4-gal--multi) .v4-gal__btn .pic { aspect-ratio: 4 / 5; border-radius: 4px; }
  .v4-gal:not(.v4-gal--multi) .v4-gal__more { display: none; }
  /* FAQ-Verweise (30.09. abends, Wunsch Johannes „Linkliste zu lang“): „Alle Fragen und Antworten“ als Schaltfläche, weitere Verweise kompakt
     in einer Zeile darunter */
  .v3-faq__grid > .reveal:first-child > .v4-links, .v3-faq--media .v3-faq__mlinks .v4-links { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 1.25rem; }
  :is(.v3-faq__grid > .reveal:first-child, .v3-faq--media .v3-faq__mlinks) > .v4-links > a:first-child { display: flex; flex: 1 1 100%; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; margin: .9rem 0 .35rem; padding: .6rem 1rem; border: 1px solid rgba(14,20,18,.45); border-radius: 8px; font-weight: 600; text-decoration: none; }
  :is(.v3-faq__grid > .reveal:first-child, .v3-faq--media .v3-faq__mlinks) > .v4-links > a:not(:first-child) { display: inline-flex; min-height: 2.75rem; font-size: .9375rem; }
  /* Massagen (30.09. abends): neun Anwendungen als Wischkarten mit großem Bild, Beschreibung und Preisen statt einer langen Liste */
  .v4-treats__list { display: flex; align-items: stretch; gap: .75rem; margin: 1rem calc(-1 * max(var(--gutter), env(safe-area-inset-left))) 0 calc(-1 * max(var(--gutter), env(safe-area-inset-right))); padding: 0 max(var(--gutter), env(safe-area-inset-right)) 1rem max(var(--gutter), env(safe-area-inset-left)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left)); overscroll-behavior-x: contain; scrollbar-width: none; }
  .v4-treats__list::-webkit-scrollbar { display: none; }
  .v4-treats__list > .v4-treat { display: flex; flex-direction: column; flex: 0 0 min(84%, 21rem); scroll-snap-align: start; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
  .v4-treats__list .v4-treat__fig { margin: 0; } .v4-treats__list .v4-treat__fig .pic { aspect-ratio: 4 / 3; border-radius: 0; }
  .v4-treats__list .v4-treat__body { padding: .95rem 1.1rem 1.05rem; }
  .v4-treats__list .v4-treat__h { font-size: 1.25rem; }
  .v4-treats__list .v4-treat__text { font-size: .9375rem; }
  /* Tagungspakete (30.09. abends): drei Pakete als Wischkarten */
  .v4-pkgs__list { display: flex; align-items: stretch; gap: .75rem; margin: 1rem calc(-1 * max(var(--gutter), env(safe-area-inset-left))) 0 calc(-1 * max(var(--gutter), env(safe-area-inset-right))); padding: 0 max(var(--gutter), env(safe-area-inset-right)) 1rem max(var(--gutter), env(safe-area-inset-left)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left)); overscroll-behavior-x: contain; scrollbar-width: none; list-style: none; }
  .v4-pkgs__list::-webkit-scrollbar { display: none; }
  .v4-pkgs__list > .v4-pkg { flex: 0 0 min(84%, 21rem); scroll-snap-align: start; margin: 0; border-radius: 10px; }
  :is(.v4-treats__list, .v4-pkgs__list, .v4-gal__grid):focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
  /* Anbieter-Kontakt (Frühstück Walpurgishof, MTB-Verleih, Tagungsraum; 30.09. abends): dunkle Karte – Name, Anschrift, zwei Aktionskacheln
     (Anrufen mit Nummer, E-Mail mit Adresse), Web-Link darunter */
  .v4-reachto:has(.v4-reachto__n) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .6rem; max-width: none; margin-top: 1.25rem; padding: 1.15rem 1.1rem 1.05rem; border-radius: 10px; background: var(--night); color: #fff; }
  .v4-reachto:has(.v4-reachto__n) > .v4-reachto__n { grid-column: 1 / -1; margin: 0; font-family: var(--font-serif); font-size: 1.375rem; font-weight: 400; line-height: 1.2; color: #fff; }
  .v4-reachto:has(.v4-reachto__n) > .v4-reachto__a { grid-column: 1 / -1; margin: 0 0 .35rem; font-size: .9375rem; color: rgba(255,255,255,.8); }
  .v4-reachto:has(.v4-reachto__n) > .v4-reach { display: contents; }
  .v4-reachto:has(.v4-reachto__n) .v4-reach li { min-width: 0; border: 0; }
  .v4-reachto:has(.v4-reachto__n) .v4-reach li:only-child { grid-column: 1 / -1; }
  .v4-reachto:has(.v4-reachto__n) .v4-reach a { flex-direction: column; justify-content: center; gap: .2rem; height: 100%; min-height: 4.5rem; padding: .65rem .45rem; border: 1px solid rgba(255,255,255,.34); border-radius: 8px; color: #fff; text-align: center; }
  .v4-reachto:has(.v4-reachto__n) .v4-reach svg { width: 20px; height: 20px; }
  .v4-reachto:has(.v4-reachto__n) .v4-reach__k { font-size: .9375rem; line-height: 1.2; }
  .v4-reachto:has(.v4-reachto__n) .v4-reach__v { max-width: 100%; font-size: .75rem; line-height: 1.25; color: rgba(255,255,255,.78); text-decoration: none; overflow-wrap: anywhere; }
  .v4-reachto:has(.v4-reachto__n) > .v4-reachto__web { grid-column: 1 / -1; order: 3; margin: .3rem 0 0; }
  .v4-reachto:has(.v4-reachto__n) > .v4-reachto__web .v3-link { color: #fff; }
  /* 02.10.2026 (Wunsch Johannes): Partnerhinweis als ruhige letzte Zeile in der dunklen Karte, volle Breite */
  .v4-reachto:has(.v4-reachto__n) > .v4-reachto__note { grid-column: 1 / -1; order: 4; margin: .35rem 0 0; font-size: .8125rem; line-height: 1.45; color: rgba(255,255,255,.74); }
  /* 02.10.2026: nach dem Angabenband (Fakten, Karte) Luft vor der nächsten Bühne – vorher lag die letzte Zeile direkt am dunklen Band */
  .v4-stage:has(.v4-stage__info) + :is(.v4-stage, .v4-duo, .v4-break) { padding-top: 2.5rem; }
  /* Partnerhinweis nach einem Bildblock mit Nachtgrund (/buchen/): als dunkler Block weiter, der Abschluss schließt an */
  .v4-cols:has(.v4-cols__item--mpic:last-child) + .v4-partner { margin: 0; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); background: var(--night); color: #fff; }
  .v4-cols:has(.v4-cols__item--mpic:last-child) + .v4-partner .v3-wrap { width: 100%; }
  .v4-cols:has(.v4-cols__item--mpic:last-child) + .v4-partner .v3-partner__in { padding: 1.35rem 0 1.5rem; border-top: 1px solid rgba(255,255,255,.16); }
  .v4-cols:has(.v4-cols__item--mpic:last-child) + .v4-partner .v3-partner__h { color: #fff; }
  .v4-cols:has(.v4-cols__item--mpic:last-child) + .v4-partner .v3-text { color: rgba(255,255,255,.86); }
  .v4-cols:has(.v4-cols__item--mpic:last-child) + .v4-partner :is(.v3-link, .v3-ext) { color: #fff; }
  .v4-cols:has(.v4-cols__item--mpic:last-child) + .v4-partner .v3-partner__logo { display: none; }
  .v3-main > .v4-cols:has(.v4-cols__item--mpic:last-child) + .v3-sec.v4-partner:last-child { padding-bottom: 0; }
  /* Bildblöcke schließen direkt aneinander (wie Startseite): Bühne -> Einträge mit Bild -> Bühne -> Gut zu wissen mit Bild */
  .v4-sec.v4-stage + .v4-sec.v4-cols:has(.v4-cols__mfig), .v4-sec.v4-cols:has(.v4-cols__mfig) + .v4-sec.v4-stage, .v4-sec.v4-stage + .v4-sec.v3-faq.v3-faq--media { padding-top: 0; }
  /* „So wohnt ihr.“ (30.09. abends): Überschrift und Text auf dem Wohnbild, darunter Geschosswahl und Plan mit Seitenrand */
  .v4-plans--mmedia > .v3-wrap { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .v4-plans__mfig { display: block; grid-area: 1 / 1; } .v4-plans__mfigure { margin: 0; } .v4-plans__mfig .pic { aspect-ratio: 4 / 5; max-height: 82svh; border-radius: 0; }
  .v4-plans--mmedia .v3-sechead { grid-area: 1 / 1; align-self: end; z-index: 2; gap: .6rem; margin: 0; padding: 6rem var(--gutter) 1.4rem; background: linear-gradient(to top, rgba(14,20,18,.9) 0, rgba(14,20,18,.72) 42%, rgba(14,20,18,0) 100%); pointer-events: none; }
  .v4-plans--mmedia .v3-sechead .v3-h2 { margin: 0; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .v4-plans--mmedia .v3-sechead .v3-text { margin: 0; color: rgba(255,255,255,.93); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .v4-plans--mmedia > .v3-wrap > :not(.v4-plans__mfig):not(.v3-sechead) { margin-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
  .v4-plans--mmedia .v4-plans__switch { margin-top: 1.25rem; }
  /* Instagram-Band der Unterseiten (30.09. abends): auf eigenem Bild statt als Zeile unter dem Text; Abschluss schließt direkt an */
  .v4-igband:has(.v4-igband__m) { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .v4-igband__m { display: block; grid-area: 1 / 1; } .v4-igband__fig { margin: 0; } .v4-igband__m .pic { aspect-ratio: 16 / 10; border-radius: 0; }
  .v4-igband__m .v3-ai { z-index: 3; top: auto; right: .15rem; bottom: .15rem; }   /* KI-Zeichen unten rechts am Bild (Regel 27.09.) */
  .v4-igband:has(.v4-igband__m) .v3-partner__in { grid-area: 1 / 1; align-self: end; z-index: 2; width: auto; margin: 0; padding: 4.5rem var(--gutter) .85rem; border: 0; background: linear-gradient(to top, rgba(14,20,18,.9) 0, rgba(14,20,18,.72) 42%, rgba(14,20,18,0) 100%); pointer-events: none; }
  .v4-igband:has(.v4-igband__m) .v3-partner__in > * { pointer-events: auto; }
  .v4-igband:has(.v4-igband__m) .v3-partner__h { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  .v4-igband:has(.v4-igband__m) .v4-social__a, .v4-igband:has(.v4-igband__m) .v3-ext { color: #fff; }
  .v4-sec.v4-stage + .v4-igband:has(.v4-igband__m) { padding-top: 0; }
  .v3-main > .v3-sec.v4-igband:has(.v4-igband__m) { padding-bottom: 0; }   /* stärker als „letzter Abschnitt“ – der Abschluss schließt direkt an */

  /* Gut zu wissen mit Bild (30.09.): Überschrift auf dem Außenbild, die ersten fünf Fragen, darunter der Weg zu allen Fragen und die Verweise */
  .v3-faq--media .v3-wrap.v3-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; }
  .v3-faq--media .v3-faq__side { display: contents; }
  .v3-faq--media .v3-faq__media { display: block; grid-area: 1 / 1; margin: 0; max-width: none; }
  .v3-faq--media .v3-faq__media .pic { aspect-ratio: 16 / 10; border-radius: 0; }
  .v3-faq--media .v3-faq__side > .v3-h2 { grid-area: 1 / 1; align-self: end; z-index: 2; margin: 0; padding: 3.5rem calc(var(--gutter) + 2.25rem) .85rem var(--gutter); color: var(--ivory); background: linear-gradient(to top, rgba(14,20,18,.82) 0, rgba(14,20,18,.5) 45%, rgba(14,20,18,0) 100%); text-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: none; }
  .v3-faq--media .v3-faq__list { grid-row: 2; margin: .5rem var(--gutter) 0; }
  .v3-faq--media .v3-faq__list > .v3-faq__item:nth-child(n+6) { display: none; }
  .v3-faq--media .v3-faq__list > .v3-faq__item:nth-child(5) { border-bottom: 1px solid var(--line); }
  .v3-faq--media .v3-faq__mlinks { grid-row: 3; margin: .5rem var(--gutter) 0; }
  .v3-faq--media .v3-faq__mlinks .v4-links { display: grid; justify-items: stretch; gap: 0; margin: 0; }
  /* 30.09. abends (Wunsch Johannes: Verweisliste „zu lang“): auf dem Telefon nur der Weg zu allen Fragen, als Schaltfläche; die übrigen Verweise
     stehen an ihrer Stelle auf der Seite, in Menü und Footer */
  .v3-faq + .v4-igband .v3-partner__in, .v3-faq + .v3-partner .v3-partner__in { border-top: 0; }   /* keine zweite Linie unter der letzten Frage */

  /* Unterseiten */
  .v4-hero:not(.v4-hero--plain) { min-height: min(34rem, 78svh); }
  .v4-hero--mband:not(.v4-hero--plain) { min-height: 0; }   /* QA 27.09.: Bildband endet mit dem Text (Webcam hatte ≈ 105 px Leerraum; FAQ war einzeln abgefangen) */
  .v4-hero__in { gap: .75rem; padding-bottom: 1.75rem; }
  .v4-hero__h1 { font-size: clamp(1.625rem, 8.4vw, 2.5rem); }   /* 20-Zeichen-Wörter („Datenschutzerklärung“) passen ab 320 px ohne Trennung */
  .v4-hero__lead { font-size: 1.0625rem; }
  .v4-hero__actions { width: 100%; flex-direction: column; gap: .75rem; }
  .v4-hero__actions .v3-btn { flex: 1 1 auto; justify-content: center; }
  .v4-hero:not(.v4-hero--plain) .v4-hero__actions .v3-btn { width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.7); border-radius: 0; background: rgba(14,20,18,.16); color: var(--ivory); font: 600 .875rem/1.25 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; box-shadow: none; transform: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .v4-hero:not(.v4-hero--plain) .v4-hero__actions .v3-btn:hover, .v4-hero:not(.v4-hero--plain) .v4-hero__actions .v3-btn:active { background: rgba(255,255,255,.14); border-color: var(--ivory); transform: none; box-shadow: none; }
  .v4-hero:not(.v4-hero--plain) .v4-hero__actions .v3-btn--light { background: rgba(14,20,18,.36); border: 1.5px solid var(--ivory); color: #fff; font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }   /* Hauptaktion wie auf der Startseite (27.09.: wieder transparent) */
  .v4-hero:not(.v4-hero--plain) .v4-hero__actions .v3-btn--light:hover, .v4-hero:not(.v4-hero--plain) .v4-hero__actions .v3-btn--light:active { background: rgba(14,20,18,.5); border-color: #fff; color: #fff; }
  .v4-hero:not(.v4-hero--plain) .v4-hero__actions .v3-btn--ghost { border-color: rgba(255,255,255,.38); color: rgba(255,255,255,.9); }
  /* „Für euch“-Seiten: Bild frei (4:5), darunter Brotkrumen, Titel, Text und Schaltfläche auf Nachtgrund – keine Schrift auf Gesichtern */
  .v4-hero--mstack { display: block; min-height: 0; }
  /* D02 (27.09.): kürzerer Einstieg – Bildbereich 280–360 px (feste Pixel, wächst nicht mit großer Schrift), Titel und Aktion im ersten Bildschirm */
  .v4-hero--mstack .v4-hero__media { position: relative; inset: auto; aspect-ratio: auto; height: clamp(280px, 44svh, 360px); }
  .v4-hero--mstack .v4-hero__media .pic { height: 100%; aspect-ratio: auto; }
  .v4-hero--mstack .v4-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(14,20,18,.4) 0, rgba(14,20,18,0) 20%, rgba(14,20,18,0) 76%, var(--night) 100%); }
  .v4-hero--mstack .v4-hero__scrim { display: none; }
  .v4-hero--mstack .v4-hero__in { padding: .75rem 0 2.25rem; }
  .v4-hero--mband .v4-hero__h1 { font-size: clamp(1.875rem, 9vw, 2.375rem); }

  /* Tabellen (Gästeinfo, Ausstattung): Thema als Zeilenkopf, Text darunter */
  .v4-table thead { display: none; }
  .v4-table, .v4-table tbody, .v4-table tr, .v4-table th, .v4-table td { display: block; width: auto; }
  .v4-table tr { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .v4-table tbody th, .v4-table td { padding: 0; border: 0; }
  .v4-table tbody th { width: auto; margin-bottom: .2rem; color: var(--ink); }

  /* Formular: eine Spalte, sichtbare Beschriftungen, große Felder, Thema als Auswahlfeld */
  .v4-form__intro .v4-topics, .v4-form__intro .v4-topics__label { display: none; }
  /* L02 (27.09. abends): ohne Versand wählt das Telefon das Thema im Auswahlfeld der Ersatzkarte; die Zeile „Thema: …“ entfällt dort */
  .v4-iform__offline .v4-iform__offsel { display: grid; gap: .35rem; margin-top: .9rem; }   /* schlägt „.v4-iform__offline p { margin: 0 }“ */
  .v4-iform__offsel label { font-size: .9375rem; color: var(--ink-2); }
  .v4-iform__offsel select { width: 100%; min-height: 3.25rem; padding: .7rem 2.75rem .7rem .9rem; font: inherit; font-size: 1.0625rem; color: var(--ink); border: 1px solid rgba(14,20,18,.5); border-radius: 4px; -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.25 6 8l4-3.75' fill='none' stroke='%230E1412' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center / 14px 14px; }
  .v4-iform__offsel select:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; }
  .v4-iform__offline .v4-iform__offtopic { display: none; }
  .v4-form__copy { display: inline-flex; }
  .v4-iform .field label { font-size: .9375rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
  .v4-iform .field input, .v4-iform .field select, .v4-iform .field textarea { font-size: 1.0625rem; min-height: 3.25rem; }
  .v4-iform .field select { -webkit-appearance: none; appearance: none; padding-right: 2.75rem; color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.25 6 8l4-3.75' fill='none' stroke='%230E1412' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center / 14px 14px; }
  .v4-iform .field__row { grid-template-columns: minmax(0, 1fr); }
  .v4-iform__topicfields { grid-template-columns: minmax(0, 1fr); }
  .v4-iform .iform__actions .v3-btn { width: 100%; justify-content: center; }
  .v4-iform .iform__privacy { font-size: .9375rem; }
  /* 30.09. abends (Wunsch Johannes: Formular „viel zu viel Abstand“): Felder dichter, Nachricht kürzer, Hinweise kleiner */
  .v4-iform { gap: .8rem; }
  .v4-iform .field { gap: .25rem; }
  .v4-iform .field textarea { min-height: 6.5rem; }
  .v4-iform .field input, .v4-iform .field select { min-height: 3rem; }
  .v4-iform .iform__privacy { font-size: .875rem; line-height: 1.45; }
  .v4-form .v3-sechead, .v4-form__intro { gap: .5rem; }
  .v4-helpbox--m { margin: .1rem 0 .15rem; }
  /* Lageplan (Wunsch Johannes 30.09. abends): mobil nur der Plan – ohne Auswahlfeld und Statuszeile */
  .v4-siteplan .v4-siteplan__pick, .v4-siteplan .v4-siteplan__status { display: none; }
  /* Kontaktseite, Ende (30.09. abends): Instagram, Newsletter und Partner nicht als drei lose Textblöcke – ein dunkler Block direkt unter
     dem Harz-Bild (Überschrift liegt auf dem Bild), Trennlinien hell, der Abschluss schließt an */
  .page--contact .v4-partner { margin: 0; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); background: var(--night); color: #fff; }
  .page--contact .v4-partner .v3-wrap { width: 100%; }
  .page--contact .v4-partner .v3-partner__in { padding: 1.35rem 0 1.4rem; border-top: 1px solid rgba(255,255,255,.16); }
  .page--contact .v4-break + .v4-partner .v3-partner__in { padding-top: .6rem; border-top: 0; }
  .page--contact .v4-partner .v3-partner__h { color: #fff; }
  .page--contact .v4-partner .v3-text { color: rgba(255,255,255,.86); }
  .page--contact .v4-partner :is(.v3-link, .v4-social__a, .v3-ext) { color: #fff; }
  .page--contact .v4-partner .v3-partner__logo { display: none; }
  .page--contact .v4-break:has(+ .v4-partner) + .v4-partner { padding-top: 0; }
  .page--contact .v3-main > .v3-sec.v4-partner:last-child { padding-bottom: 0; }

  /* Abschluss „Wann kommt ihr?“ (30.09., Wunsch Johannes): Frage und „Auszeit buchen“ direkt auf dem Bild, Verlauf von unten in den Nachtgrund
     des Footers; „Fragen? Schreibt uns.“ entfällt auf dem Telefon – Anfragen laufen über „Anfrage“ im Footer (Kontaktformular) */
  .v3-close { display: grid; min-height: 0; }
  .v3-close__media { position: relative; inset: auto; grid-area: 1 / 1; aspect-ratio: 4 / 5; max-height: 88svh; }
  .v3-close--mfocus .v3-close__media .pic img { object-position: var(--fx-m, 50% 50%); }   /* QA 27.09.: eigener Telefon-Ausschnitt nur, wo gesetzt (Frühstück: Paar statt Himmel) */
  .v3-close--photo .v3-close__media .pic img { filter: saturate(.9) contrast(1.02) brightness(.92); }
  .v3-close__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(14,20,18,0), rgba(14,20,18,.55) 45%, var(--night)); }
  .v3-close__scrim { display: none; }
  .v3-close__in { grid-area: 1 / 1; align-self: end; padding: 0 0 2rem; }
  .v3-close__copy { gap: 1rem; }
  .v3-close__h { font-size: 2.375rem; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
  /* Wunsch Johannes 30.09. abends („nicht modern genug“, „fetter“, „keine Pille“, reinweiß): weiße Fläche mit leichter Rundung, kräftige Schrift
     in normaler Schreibweise (Instrument Sans 700, 18 px) und ein Pfeil, der beim Tippen nach rechts rückt; kein Grau beim Drücken */
  .v3-close .v3-close__cta { width: min(100%, 21rem); min-height: 3.625rem; padding: .95rem 1.35rem; gap: .7rem; justify-content: center; border: 0; border-radius: 8px; background: #fff; color: var(--night); font: 700 1.125rem/1.2 var(--font-sans); letter-spacing: -.005em; text-transform: none; box-shadow: 0 14px 34px rgba(0,0,0,.34); }
  /* 01.10. (Johannes): kein Pfeil auf CTA-Knöpfen – einheitlich mit allen übrigen Knöpfen */
  .v3-close .v3-close__cta:active { background: #fff; transform: scale(.985); }
  .v3-close__links { display: none; }
  /* Fotos mit Gesichtern im unteren Bildteil (Fotoshooting-Motive, v3-close--photo; einzelne Seiten per mbelow): Schrift nie auf Gesichtern –
     Bild 4:3 oben, Frage und „Auszeit buchen“ direkt darunter auf dem Nachtgrund */
  :is(.v3-close--photo, .v3-close--mbelow) .v3-close__media { aspect-ratio: 4 / 3; }
  :is(.v3-close--photo, .v3-close--mbelow) .v3-close__media::after { height: 30%; background: linear-gradient(to bottom, rgba(14,20,18,0), var(--night)); }
  :is(.v3-close--photo, .v3-close--mbelow) .v3-close__in { grid-area: 2 / 1; align-self: start; padding: 1rem 0 2rem; }
}
/* Große Telefone quer / kleine Tablets hochkant (30–47.99em) */
@media (min-width: 30em) and (max-width: 47.99em) {
  .v3-close__media { aspect-ratio: 16 / 9; }
}

/* ---------- 4 TELEFON QUER: kurze Höhe – Hero wächst natürlich, Bilder überragen die Höhe nicht, Safe Areas links/rechts ---------- */
@media (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  :root { --hdr-row: 44px; --mbar-h: 3.125rem; --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .v3-mbar__book { max-width: 22rem; margin-left: auto; }
  .v3-mbar--vouchers .v3-mbar__book { max-width: 14rem; }
  .v3-mbar--vouchers .v3-mbar__book:first-child { margin-left: auto; }
  .v3-mbar--vouchers .v3-mbar__book--alt { margin-left: 0; margin-right: auto; }
  /* 28.09.: Startseiten-Kopf ganz oben wie der Menükopf quer (52 px, Logo min(11rem, 62vw)) */
  .v3-header--symbol:not(.is-scrolled) .v3-header__in { min-height: 52px; }
  .v3-header--symbol .v3-logoset--top .v3-logo { width: min(10rem, 56vw); }
  .v3-header.v3-header--symbol.is-scrolled .v3-logoset--top { transform: scale(.775); }   /* 160 → 124 px (01.10.: vorher 176 px) */
  /* Startseiten-Hero: keine erzwungene Bildschirmhöhe; Inhalt bestimmt die Höhe, Film/Poster füllen sie */
  .v3-hero { min-height: 0; grid-template-rows: auto; }
  .v3-hero__center { padding-top: calc(var(--header-h) + var(--pbar-h) + 2rem); padding-bottom: calc(3.25rem + env(safe-area-inset-bottom)); gap: .6rem; }   /* Hero-Umbau 27.09.: Luft unter dem höheren Startseitenkopf */
  /* 28.09. (Prüfung Querformat): der Block füllt quer fast die ganze Höhe – weicher Textgrund um die Mitte wie hochkant; vorher sank der
     Kontrast von Claim und „Entdecken“ in hellen Filmszenen (Fassade, Schnee, Laterne) unter 3 : 1 */
  .v3-hero__scrim { background: radial-gradient(ellipse 72% 64% at 50% 54%, rgba(14,20,18,.6) 0, rgba(14,20,18,.5) 55%, rgba(14,20,18,0) 100%), linear-gradient(to bottom, rgba(14,20,18,.45) 0, rgba(14,20,18,.12) 24%, rgba(14,20,18,.12) 76%, rgba(14,20,18,.4) 100%); }
  /* Hero-Umbau 27.09.: auch quer ohne großes Hero-Logo (die Marke trägt der Kopf); feiner Strich unter dem Claim */
  .v3-hero__brand { display: none; }
  .v3-hero__claim { order: 1; } .v3-hero__rule { order: 2; width: 1px; height: 18px; } .v3-hero__actions { order: 4; } .v3-hero__dtv { order: 5; }
  html.js:not(.review-static) .v3-hero__rule { animation: none; }
  .v3-hero__facts { display: none; }
  .v4-hero:not(.v4-hero--plain):not(.v4-hero--mband) { min-height: 0; }
  .v4-hero:not(.v4-hero--plain):not(.v4-hero--mband) .v4-hero__in { padding-top: calc(var(--header-h) + var(--pbar-h) + 1.5rem); }
  .v4-hero--mstack .v4-hero__media { aspect-ratio: auto; height: 78svh; max-height: none; }
  .v4-hero--mband .v4-hero__media { height: 34svh; }
  /* Hochformat-Bilder der Inhaltskomposition (740 px quer) nicht höher als der Bildschirm */
  .v3-stage__fig--wide .pic, .v3-gal__item--living .pic, .v3-aud__head .pic, .v3-close__media, .v4-sec--media .v4-text__fig .pic { max-height: 85svh; }
  .v3-stage__frame > .v3-ai { top: auto; bottom: .15rem; }
  /* Datenschutz-Einstellungen im Querformat wie hochkant: Sheet unten bzw. Vollbild mit fester Aktionszeile (sonst lagen die Schaltflächen unter dem Rand) */
  .v4-consent { background: rgba(14,20,18,.35); pointer-events: auto; padding: 0; }
  .v4-consent__box { width: 100%; max-height: 100dvh; border-radius: 6px 6px 0 0; padding: 1rem max(1.25rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); }
  .v4-consent.is-details { padding: 0; }
  .v4-consent.is-details .v4-consent__box { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .v4-consent.is-details .v4-consent__actions { position: sticky; bottom: calc(-1rem - env(safe-area-inset-bottom)); z-index: 1; background: var(--ivory); padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom)); margin-bottom: calc(-1rem - env(safe-area-inset-bottom)); box-shadow: 0 -12px 16px -12px rgba(14,20,18,.25); }
}

/* ---------- 5 Bewegung ---------- */
@media (max-width: 47.99em), (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  .v3-root .reveal { transition-duration: .35s; }   /* M19: Inhalte nicht lange zurückhalten */
  @keyframes v3mIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .v3-menu.is-open .v3-mnav__item { animation: none; }
  .v3-mbar, .v3-mbar.is-off, html:is(.hk-kbd, .hk-bar-top, .hk-bar-form, .hk-bar-end) .v3-mbar { transition: none; }
  .v3-mnav__chev, .v3-mfoot__chev { transition: none; }
  .v3-header, .v3-progress, .v4-legal__toc { transition: none; }
}

/* Wunsch 26.09.: Bühne und Duo auf dem Telefon – randlos, eigenes Hochformat, Text unten auf dem Bild (dunkler Verlauf von unten) */
@media (max-width: 47.99em) {
  .v4-stage .v3-wide, .v4-duo .v3-wide { width: 100%; }
  /* D05 (27.09.): ein Maß – 8 px zwischen randlosen Bildblöcken (wie im Duo) und nach Hero bzw. Brotkrume, 24 px nach den Sprungmarken,
     40 px zu Textabschnitten (vorher 8/12/24 px ohne Regel) */
  .v4-stage, .v4-duo { padding-block: 0; }
  .v4-hero + :is(.v4-stage, .v4-duo), .v4-crumbs-m + :is(.v4-stage, .v4-duo) { padding-top: 0; }   /* 01.10. (Johannes): das erste Bild schließt ohne weiße Fuge an den Hero an (vorher 8 px) */
  .v4-hero + .v4-stage--mplain { padding-top: 40px; }   /* Bühne ohne Bild beginnt auf dem Telefon mit Text */
  .v4-hero + .v4-sec--media:not(.v4-sec--mnoimg) { padding-top: 0; }   /* 01.10.: Text mit Bild (Bild zuerst) ebenso, vorher 28 px */
  :is(.v4-stage, .v4-duo) + :is(.v4-stage, .v4-duo) { padding-top: 0; }   /* 30.09. abends (Wunsch Johannes „Bilder aneinander“): Bildblöcke ohne Fuge wie auf der Startseite */
  .v4-jumps--m + :is(.v4-stage, .v4-duo) { padding-top: 24px; }
  .v4-sec:not(.v4-stage):not(.v4-duo) + .v4-stage, .v4-sec:not(.v4-stage):not(.v4-duo) + .v4-duo { padding-top: 40px; }
  .v4-stage + .v4-sec:not(.v4-stage):not(.v4-duo), .v4-duo + .v4-sec:not(.v4-stage):not(.v4-duo) { padding-top: 40px; }
  .v4-duo:has(.v3-sechead) { padding-top: 40px; }
  .v4-stage__frame { display: grid; border-radius: 0; }
  .v4-stage__fig, .v4-stage__copy { grid-area: 1 / 1; }
  .v4-stage__fig .pic { aspect-ratio: 3 / 4; max-height: 88svh; height: 100%; }
  .v4-stage__frame::before, .v4-stage--right .v4-stage__frame::before { background: linear-gradient(0deg, rgba(14,20,18,.84) 0, rgba(14,20,18,.58) 30%, rgba(14,20,18,0) 60%); }
  .v4-stage__copy, .v4-stage--right .v4-stage__copy { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: auto; align-self: end; justify-content: flex-end; gap: .7rem; padding: 2.5rem var(--gutter) 1.6rem; }
  .v4-stage__copy .v3-h2 { font-size: 2rem; }
  .v4-stage__p { font-size: 1.0625rem; }
  .v4-stage__frame > .v3-ai { top: .4rem; right: .4rem; bottom: auto; }
  /* D01 (27.09.): Bühnen mit hellem Bettzeug, Schnee oder Gesichtern im Textbereich – Bild frei (flacher), Text direkt darunter auf Nachtgrund */
  .v4-stage--mbelow .v4-stage__frame { display: block; }
  .v4-stage--mbelow .v4-stage__frame::before { content: none; }
  .v4-stage--mbelow .v4-stage__fig .pic { aspect-ratio: 4 / 3; height: auto; max-height: 70svh; }
  .v4-stage--mbelow .v4-stage__copy { padding: 1.25rem var(--gutter) 1.6rem; }
  .v4-stage--mbelow .v4-stage__copy .v3-h2, .v4-stage--mbelow .v4-stage__p, .v4-stage--mbelow .v4-stage__copy .v3-link { text-shadow: none; }
  /* 30.09. (Wunsch Johannes „Text auf Bildern, wo es geht“): die Überschrift liegt unten auf dem Bild (kräftiger Verlauf – D01-Befund helle
     Flächen), Text, Liste und Link bleiben darunter auf dem Nachtgrund */
  .v4-stage--mbelow .v4-stage__frame { display: grid; }
  .v4-stage--mbelow .v4-stage__fig { grid-area: 1 / 1; }
  .v4-stage--mbelow .v4-stage__copy { display: contents; }
  .v4-stage--mbelow .v4-stage__copy > .v3-h2 { grid-area: 1 / 1; align-self: end; z-index: 2; margin: 0; padding: 3.5rem calc(var(--gutter) + 2.25rem) .85rem var(--gutter); background: linear-gradient(to top, rgba(14,20,18,.82) 0, rgba(14,20,18,.5) 45%, rgba(14,20,18,0) 100%); text-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: none; }
  .v4-stage--mbelow .v4-stage__copy > :not(.v3-h2) { grid-column: 1; margin: .7rem var(--gutter) 0; }
  .v4-stage--mbelow .v4-stage__copy > .v3-h2 + * { margin-top: 1.1rem; }
  .v4-stage--mbelow .v4-stage__copy > :last-child { margin-bottom: 1.6rem; }
  /* D03 (27.09.): redundante Großbilder auf dem Telefon – Bühne als Textband auf Nachtgrund, Textabschnitt ohne Bild (Desktop unverändert) */
  .v4-stage--mplain .v4-stage__fig, .v4-stage--mplain .v4-stage__frame > .v3-ai { display: none; }
  .v4-stage--mplain .v4-stage__frame { display: block; }
  .v4-stage--mplain .v4-stage__frame::before { content: none; }
  .v4-stage--mplain .v4-stage__copy { padding: 1.75rem var(--gutter); }
  .v4-stage--mplain .v4-stage__copy .v3-h2, .v4-stage--mplain .v4-stage__p, .v4-stage--mplain .v4-stage__copy .v3-link { text-shadow: none; }
  .v4-sec--mnoimg .v4-text__frame { display: none; }
  .v4-duo__list { grid-template-columns: 1fr; gap: 0; }
  .v4-duo__item { border-radius: 0; }
  .v4-duo__fig .pic { aspect-ratio: 4 / 5; max-height: 80svh; }
  .v4-duo__copy { padding: 1.4rem var(--gutter) 1.5rem; }
  .v4-duo .v3-sechead { padding-inline: var(--gutter); }   /* 26.09.: Duo-Überschrift (z. B. Harz „Erst einmal los.“) mit Seitenrand, die Bilder bleiben randlos */
  .v4-duo__item > .v3-ai { top: .4rem; right: .4rem; }
}

/* „Für euch“-Seiten (26.09.): Duo mit Überschrift – die Bildreihe läuft auf dem Telefon randlos, die Überschrift behält den Seitenrand */
@media (max-width: 47.99em) {
  /* Text unten im Hochformat liegt oft auf hellem Bettzeug oder Holz: kräftigerer Verlauf, gemessen auf mindestens 4,5:1 */
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-stage__frame::before { background: linear-gradient(0deg, rgba(14,20,18,.9) 0, rgba(14,20,18,.76) 36%, rgba(14,20,18,.3) 60%, rgba(14,20,18,0) 76%); }
  :is(.page--families, .page--friends, .page--generations, .page--dogs, .page--couples, .page--teams) .v4-duo__item::before { background: linear-gradient(0deg, rgba(14,20,18,.88) 0, rgba(14,20,18,.68) 30%, rgba(14,20,18,.2) 54%, rgba(14,20,18,0) 68%); }
}
/* Telefon quer (26.09.): „Für euch“-Hero wie hochkant gestapelt – Bild oben in der vorhandenen Höhe (78svh), Brotkrumen, Titel und Einstieg darunter auf
   Nachtgrund; auf den hellen Szenen (Fassaden, Bettzeug) wäre der Text im Bild sonst nicht lesbar */
@media (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  .v4-hero--mstack:not(.v4-hero--plain) { display: block; min-height: 0; }
  .v4-hero--mstack .v4-hero__media { position: relative; inset: auto; }
  .v4-hero--mstack .v4-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(14,20,18,.45) 0, rgba(14,20,18,0) 24%, rgba(14,20,18,0) 72%, var(--night) 100%); }
  .v4-hero--mstack .v4-hero__scrim { display: none; }
  .v4-hero--mstack:not(.v4-hero--plain):not(.v4-hero--mband) .v4-hero__in { padding-top: 1rem; padding-bottom: 2rem; }
}

/* ===== KI-Zeichen einheitlich (Wunsch Johannes 27.09.), Telefon: unten rechts am Bild, 20 px im 44-px-Tippfeld; Text endet darüber ===== */
@media (max-width: 47.99em), (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  .v3-ai:not(.v3-ai--hero) img { width: 1.25rem; height: 1.25rem; }
  .v3-close > .v3-ai { top: calc(min(75vw, 85svh) - 2.9rem); bottom: auto; right: .15rem; }   /* Bild oben (4:3), Text darunter */
  /* G15-02 (28.09.): nur Vollbild-Heros – bei Bildband (mband) und gestapeltem Hero (mstack) überstimmte diese Regel sonst die Ausnahmen
     darunter, das Zeichen lag unter dem Einführungstext statt am Bild */
  .v4-hero:not(.v4-hero--plain):not(.v4-hero--mband):not(.v4-hero--mstack) > .v3-ai { top: auto; bottom: .15rem; right: .15rem; }
  .v4-hero:not(.v4-hero--plain):not(.v4-hero--mband):not(.v4-hero--mstack) .v4-hero__in { padding-bottom: 2.9rem; }   /* Aktionen enden über dem Zeichen (44-px-Tippfeld + .15rem Rand; mit 2.75rem ragte das Tippfeld 2 px in die Schaltfläche) */
  .v4-hero--mstack > .v3-ai { top: calc(clamp(280px, 44svh, 360px) - 2.9rem); bottom: auto; }   /* Bild oben, Text darunter */
  .v4-hero--mband > .v3-ai { top: calc(clamp(8.5rem, 28svh, 13rem) - 2.9rem); bottom: auto; }
  .v4-stage__frame > .v3-ai, .v4-duo__item > .v3-ai { top: auto; bottom: .15rem; right: .15rem; }
  .v4-stage__copy, .v4-stage--right .v4-stage__copy, .v4-duo__copy { padding-bottom: 2.6rem; }
}
@media (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  .v3-close > .v3-ai { top: calc(min(56.25vw, 85svh) - 2.9rem); }
  .v4-hero--mstack > .v3-ai { top: calc(78svh - 2.9rem); }
  .v4-hero--mband > .v3-ai { top: calc(34svh - 2.9rem); }
}

/* ===== Neuordnung 27.09. (Telefon): Preiszeile im kompakten Footer – Überschrift, darunter zwei Textlinks nebeneinander ===== */
@media (max-width: 47.99em), (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
}

/* ---------- 6 MENÜ (Nacharbeit 27.09., Johannes): ruhiges Menü überall, wo der Menü-Knopf erscheint (unter 80em) ----------
   Kopf (Logo, Schließen) · sechs Hauptpunkte (fünf Aufklapper, Webcam direkt) · Service „Kontakt · FAQ · Gästeinfos“ · Sprachschalter ·
   eine Buchungsaktion. Tatsächlich sichtbare Höhe (100dvh); nur die Mitte scrollt, Kopf und Buchungsbereich bleiben stehen; Safe Areas.
   Hauptpunkte 23 px Markenschrift, Zeilen 50 px (wachsen mit der Schrift), Unterpunkte 17 px mit 44-px-Tippflächen, feine Linien. */
@media (max-width: 79.99em) {
  /* Wunsch Johannes 30.09.: Menü ganz hell – weißer Kopf mit dunklem Logo, Rubriken dunkel auf Weiß, offene Rubrik hellgrau hinterlegt,
     eine dunkle Buchungsschaltfläche (keine dunklen Balken oben und unten) */
  .v3-menu { height: 100vh; height: 100dvh; bottom: auto; background: var(--ivory); color: var(--ink); }
  .v3-menu__panel { width: auto; height: 100%; margin: 0; overflow: hidden; background: var(--ivory); padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
  /* Wunsch 27.09.: Marke im geöffneten Menü größer – Wortbildmarke mit „Ferienchalets im Harz“ und demselben Leuchten wie Footer und Startseite */
  .v3-menu__head { flex: none; gap: .75rem; min-height: calc(4.5rem + env(safe-area-inset-top)); margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left))) calc(-1 * max(var(--gutter), env(safe-area-inset-right))); padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); background: var(--ivory); color: var(--ink); border-bottom: 1px solid var(--line); }
  .v3-menu__head .v3-menu__mlogo { display: block; width: min(12rem, 56vw); max-width: 100%; height: auto; }   /* 01.10.: so groß wie das Hero-Logo */
  .v3-menu__head .v3-header__brand { min-width: 0; }   /* G15-01 (28.09.): bei großer Schrift schrumpft die Marke, das X bleibt im Bild (vorher bei 200 % außerhalb) */
  /* 05.10.2026 (Johannes): dezentes „Live“ zwischen Logo und Schließen – kleiner Pillenknopf mit pulsierendem Punkt, führt zur Webcam-Seite;
     läuft nur bei geöffnetem Menü (sonst nicht dargestellt), ohne Bewegung bei reduzierter Bewegung */
  /* Johannes 18 Uhr: ohne Pille (zu auffällig) – Punkt, „Live“ und Pfeil ↗ als Hinweis, dass es ein Link ist; Tippfläche 44 px */
  .v3-menu__live { flex: none; margin-inline: auto .25rem; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 .4rem; border: 0; color: var(--ink-2); font: 600 .6875rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
  .v3-menu__live-arr { font-size: .8125rem; letter-spacing: 0; opacity: .7; transform: translateY(-.05em); }
  .v3-menu__live:active { color: var(--ink); }
  .v3-menu__live:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
  .v3-menu__live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #D93025; animation: v3LivePulse 1.8s ease-in-out infinite; }
  @keyframes v3LivePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(217,48,37,.45); } 55% { opacity: .45; box-shadow: 0 0 0 5px rgba(217,48,37,0); } }
  @media (prefers-reduced-motion: reduce) { .v3-menu__live-dot { animation: none; } }
  .v3-menu__close { flex: none; color: var(--ink); min-height: 44px; min-width: 44px; justify-content: center; margin-right: max(-.6rem, calc(-1 * var(--gutter))); }
  .v3-menu__close span { display: none; }   /* nur das feine X; Name per aria-label „Menü schließen“ */
  .v3-menu__close svg { width: 16px; height: 16px; }
  .v3-menu :focus-visible { outline: 2px solid var(--night); outline-offset: 3px; border-radius: 2px; }
  .v3-mnav { display: block; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .25rem 0 1rem; scrollbar-width: none; }
  /* 01.10. abends (Johannes): kein grauer Scrollbalken rechts; dass es weitergeht, zeigt nur ein weicher Schatten an der Kante, solange dort noch Einträge folgen */
  .v3-mnav::-webkit-scrollbar { display: none; }
  .v3-mnav { background: linear-gradient(var(--ivory) 30%, rgba(255,255,255,0)) center top / 100% 2.5rem no-repeat local, linear-gradient(rgba(255,255,255,0), var(--ivory) 70%) center bottom / 100% 2.5rem no-repeat local, linear-gradient(rgba(14,20,18,.09), rgba(14,20,18,0)) center top / 100% .9rem no-repeat scroll, linear-gradient(rgba(14,20,18,0), rgba(14,20,18,.09)) center bottom / 100% .9rem no-repeat scroll; background-color: var(--ivory); }
  .v3-mnav__list { list-style: none; margin: 0; padding: 0; }
  .v3-mnav__item { border-bottom: 1px solid var(--line); }
  .v3-mnav__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.125rem; padding: .3rem 0; font-family: var(--font-serif); font-size: 1.4375rem; font-weight: 400; line-height: 1.2; color: var(--ink); text-decoration: none; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
  .v3-mnav__link::-webkit-details-marker { display: none; }
  .v3-mnav__link[aria-current="page"], .v3-mnav__link.is-current { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(14,20,18,.45); }
  .v3-mnav__acc > .v3-mnav__link::after { content: ""; flex: none; width: 14px; height: 14px; margin-right: .15rem; background: currentColor; opacity: .65; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5 7 9.5 11.5 5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5 7 9.5 11.5 5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--ease-out), opacity .2s var(--ease); }   /* Pfeil per CSS (30.09.) */
  .v3-mnav__acc[open] > .v3-mnav__link::after { transform: rotate(180deg); opacity: .9; }
  .v3-mnav__subs { list-style: none; margin: -.2rem 0 0; padding: 0 0 .5rem; }
  .v3-mnav__sub { display: flex; align-items: center; min-height: 2.75rem; padding: .1rem 0; font-size: 1.0625rem; line-height: 1.3; color: var(--ink-2); text-decoration: none; }
  .v3-mnav__sub[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
  /* Wunsch Johannes 30.09.: offene Rubrik über die volle Breite leicht dunkler hinterlegt (wie im Telefon-Footer, dort heller auf Nachtgrund) */
  /* 30.09. abends (Johannes: „alles weiß, das Beige-Grau muss weg“): keine hinterlegte Fläche mehr – die offene Rubrik zeigt ihre Einträge an
     einer feinen dunklen Linie, der Rubrikname wird kräftiger */
  .v3-mnav__acc[open] > .v3-mnav__link { font-weight: 500; }
  .v3-mnav__acc[open] > .v3-mnav__subs { margin: -.1rem 0 .75rem .1rem; padding: 0 0 0 1rem; border-left: 2px solid var(--night); }
  .v3-mnav__sub--play { gap: .6rem; } .v3-mnav .v3-playmini { width: 1.375rem; height: 1.375rem; background: var(--night); color: #fff; box-shadow: none; }   /* 05.10.: Rundgang im Menü (06.10. für Produktion freigegeben) */
  .v3-mnav__sub--ico { gap: .6rem; } .v3-mnav__sub--ico svg { flex: none; width: 18px; height: 18px; } .v3-mnav__sub--ico .v3-ext { margin-left: .35rem; font-size: .8125rem; }
  .v3-mnav__acc[open] .v3-mnav__sub { color: var(--ink); }
  .v3-mnav__social { display: flex; margin: 0 -12px 0 auto; }   /* Symbolkante bündig mit den Pfeilen; Tippfläche reicht in den Rand */
  .v3-mnav__social a { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--ink-2); }
  .v3-mnav__social a:hover, .v3-mnav__social a:focus-visible { color: var(--ink); }
  /* Sprachwahl im hellen Menü: dunkle Kürzel, aktuelle Sprache unterstrichen */
  .v3-menu .v3-lang--c .v3-lang__code.is-current, .v3-menu .v3-lang--c a.v3-lang__code:hover, .v3-menu .v3-lang--c .v3-lang__msgt { color: var(--ink); }
  .v3-menu .v3-lang--c .v3-lang__code.is-soon { color: var(--ink-3); }
  .v3-menu .v3-lang--c .v3-lang__code.is-soon:hover, .v3-menu .v3-lang--c .v3-lang__code.is-soon:focus-visible { color: var(--ink-2); }
  .v3-menu .v3-lang--c .v3-lang__msg { color: var(--ink-2); }
  .v3-mnav .v3-lang--c { margin-top: .75rem; }
  /* eine Buchungsaktion in eigenem Bereich */
  .v3-mnav__act { display: flex; gap: .5rem; flex: none; padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--ivory); }
  .v3-mnav__book { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: center; min-height: 3.25rem; padding: .5rem 1rem; border-radius: 8px; background: var(--night); color: #fff; font: 700 1.125rem/1.2 var(--font-sans); letter-spacing: -.005em; text-align: center; text-decoration: none; }   /* 30.09. abends: wie der Abschluss-Knopf – gerundet, kräftig */
  /* 01.10. abends (CTA-Konsistenz): „Angebote“ neben „Buchen“ – gleiche Höhe, umrandet wie die zweite Aktion der Leiste */
  .v3-mnav__alt { display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: 3.25rem; padding: .5rem 1.1rem; border: 1px solid var(--night); border-radius: 8px; color: var(--night); font: 700 1.125rem/1.2 var(--font-sans); text-decoration: none; }
  .v3-mnav__alt:active { background: rgba(14,20,18,.06); }
  .v3-menu.is-open .v3-mnav__item { animation: v3mIn .4s var(--ease-out) both; }
  .v3-menu.is-open .v3-mnav__item:nth-child(2) { animation-delay: .03s; } .v3-menu.is-open .v3-mnav__item:nth-child(3) { animation-delay: .06s; }
  .v3-menu.is-open .v3-mnav__item:nth-child(4) { animation-delay: .09s; } .v3-menu.is-open .v3-mnav__item:nth-child(5) { animation-delay: .12s; }
  .v3-menu.is-open .v3-mnav__item:nth-child(6) { animation-delay: .15s; }
  @keyframes v3mIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
/* Tablet und breite Telefone quer: das Menü als ruhige Tafel rechts, die Seite dahinter abgedunkelt (Tippen daneben schließt) */
@media (min-width: 48em) and (max-width: 79.99em) {
  .v3-menu { background: rgba(14,20,18,.5); }
  .v3-menu__panel { width: min(100%, 28rem); margin-left: auto; padding-inline: max(1.75rem, env(safe-area-inset-right)) 1.75rem; box-shadow: -1.5rem 0 3rem rgba(0,0,0,.25); }
  .v3-menu__head { margin-inline: calc(-1 * max(1.75rem, env(safe-area-inset-right))) -1.75rem; padding-inline: max(1.75rem, env(safe-area-inset-right)) 1.75rem; }
  .v3-mnav__item:has(> .v3-mnav__acc[open]) { margin-inline: calc(-1 * max(1.75rem, env(safe-area-inset-right))) -1.75rem; padding-inline: max(1.75rem, env(safe-area-inset-right)) 1.75rem; }
}
/* Kleine Höhe (Telefon quer): kompaktere Zeilen, die Mitte scrollt */
@media (max-width: 79.99em) and (max-height: 31.25em) {
  .v3-mnav__link { min-height: 2.75rem; font-size: 1.25rem; }
  .v3-menu__head { min-height: calc(3.25rem + env(safe-area-inset-top)); }
  .v3-menu__head .v3-menu__mlogo { width: min(10rem, 56vw); }   /* G15-01: greift bei großer Browser-Schrift auch hochkant (em-Höhe) – nie breiter als 62vw */
  .v3-mnav__svc { margin-top: .5rem; }
  .v3-mnav__act { padding-top: .5rem; padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }
  .v3-mnav__book, .v3-mnav__alt { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { .v3-menu.is-open .v3-mnav__item { animation: none; } }

@media (prefers-reduced-motion: reduce) { .v3-header--symbol .v3-header__in, .v3-header--symbol .v3-header__brand, .v3-header--symbol .v3-logoset--light, .v3-header--symbol .v3-logoset--dark, .v3-header.v3-header--symbol .v3-logoset--top { transition: none; } }

/* ---------- 7 GROSSE SCHRIFT (G15-01, 28.09.2026) ----------
   Geprüft bei 200 % (Browser-Schriftgröße 32 px und gesetzte Wurzelschrift) auf 360/390/430 hochkant und quer. Nur Umbruch, Anordnung und
   Innenabstände ändern sich – keine kleinere Schrift, kein overflow-x:hidden. Auslöser ist die Seite als Container: die Abfragen rechnen in
   rem und greifen deshalb bei Schriftgröße im Browser, gesetzter Wurzelschrift und Seitenzoom gleich; normale Schrift ab 320 px bleibt
   unberührt (< 20rem erst unter 320 px). Quer zusätzlich nur, wenn die Breite unter 30rem liegt (bei 16 px unter 480 px, also nie). */
body.v3-root { container: hkpage / inline-size; }

/* Footer-Direktaktionen: die Tippflächen ragen höchstens bis an den Seitenrand (vorher bei 200 % je 4 px über den Bildschirm) … */
.v3-mfoot__direct li:first-child a { margin-left: max(-.75rem, calc(-1 * var(--gutter))); }
.v3-mfoot__direct li:last-child a { margin-right: max(-.75rem, calc(-1 * var(--gutter))); }
/* … und werden zur Liste, wenn die drei Wörter nicht mehr nebeneinander passen (Footer ist Container, em = Schriftgröße des Footers) */
@container (max-width: 11.5em) {
  .v3-mfoot__direct { flex-direction: column; justify-content: flex-start; }
  .v3-mfoot__direct li + li { border-top: 1px solid rgba(255,255,255,.13); }
  .v3-mfoot__direct li a, .v3-mfoot__direct li:first-child a, .v3-mfoot__direct li:last-child a { flex: 1; flex-wrap: nowrap; justify-content: flex-start; gap: .6rem; margin: 0; padding-inline: 0; text-align: left; }
}

@container hkpage (max-width: 19.99rem) {
  /* lange Wörter und Namen dürfen umbrechen (sonst standen „Hahnenklee-Bockswiese“, „Clausthal-Zellerfeld“, „Ganzkörpermassage“ und
     „Gutscheinbedingungen“ über den Rand und schoben den festen Kopf samt Menüknopf mit hinaus) */
  .v3-nw { white-space: normal; }
  :is(h1, h2, h3, h4, p, li, dt, dd, summary, figcaption, label, legend, blockquote, .v3-faq__q) { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  body.v3-root :is(.v3-link, .v3-faq__q) { overflow-wrap: anywhere; }   /* stärker als „.v3-root main :is(… a … span …) { break-word }“: nur „anywhere“ lässt Flex-Link und Frage schmaler werden als ihr längstes Wort */
  /* Abschlussknopf („Teamaufenthalt anfragen“ stand 14–49 px über): schmalere Innenränder, Umbruch zwischen den Wörtern */
  .v3-close__cta { max-width: 100%; padding-inline: .75rem; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
  /* feste Aktionsleiste: „Anrufen“ nur noch als Symbol (Name bleibt im aria-label), „Auszeit buchen“ darf zweizeilig werden */
  .v3-mbar__tel { padding-inline: .6rem; }
  .v3-mbar__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v3-mbar__book { white-space: normal; text-wrap: balance; line-height: 1.15; }
  /* Telefonnummern bleiben ganz: Karte mit schmaleren Innenrändern, auf der Kontaktseite rückt die Nummer unter „Anrufen“ */
  .v4-card { padding-inline: .9rem; }
  .v4-mcontact__v { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  /* Themen-Auswahlfeld: das native Feld kürzt lange Namen – darunter steht die gewählte Bezeichnung vollständig */
  .v4-iform__offline .v4-iform__offtopic { display: block; margin-top: .6rem; }
}

/* Bild mit Text darauf: bei großer Schrift steht der Text unter dem Bild (vorher oben abgeschnitten); das KI-Zeichen bleibt am Bild */
@container hkpage (max-width: 19.99rem) {
  .v4-duo__item { display: grid; grid-template-rows: auto auto; }
  .v4-duo__item::before { display: none; }
  .v4-duo__fig { grid-area: 1 / 1; }
  .v4-duo__item > .v3-ai { position: relative; grid-area: 1 / 1; align-self: end; justify-self: end; margin: 0 .15rem .15rem 0; inset: auto; }
  .v4-duo__copy { position: static; grid-area: 2 / 1; padding: 1.1rem var(--gutter) 1.4rem; }
  .v4-duo__copy :is(.v4-duo__h, .v3-text, .v3-link) { text-shadow: none; }
  .v4-stage__frame { grid-template-rows: auto auto; }
  .v4-stage__frame::before { display: none; }
  .v4-stage__fig { grid-area: 1 / 1; }
  .v4-stage__frame > .v3-ai { position: relative; grid-area: 1 / 1; align-self: end; justify-self: end; margin: 0 .15rem .15rem 0; inset: auto; }
  .v4-stage__copy, .v4-stage--right .v4-stage__copy { grid-area: 2 / 1; align-self: start; padding: 1.1rem var(--gutter) 1.4rem; }
  .v4-stage__copy :is(.v3-h2, .v4-stage__p, .v3-link) { text-shadow: none; }
  .v4-stage__fig .pic { height: auto; }
  /* Beispielgutschein: Bild, darunter die Karte gerade und in voller Breite, darunter der Hinweis */
  .v4-vshot { display: grid; overflow: visible; background: none; }
  .v4-vshot__pic { grid-area: 1 / 1; border-radius: 4px; }
  .v4-vshot > .v3-ai { position: relative; grid-area: 1 / 1; align-self: end; justify-self: end; margin: 0 .15rem .15rem 0; inset: auto; }
  .v4-vshot .v4-vcard { position: relative; grid-area: 2 / 1; left: auto; top: auto; width: 100%; aspect-ratio: auto; margin: .75rem 0 0; transform: none; }
  .v4-vshot__note { position: static; grid-area: 3 / 1; padding: .6rem 0 0; background: none; color: var(--ink-2); }
}
/* Telefon quer mit großer Schrift: gleiche Umstellung für Bühnen und Duo (dort lag der Text sonst auf zu flachem Bild) */
@media (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  @container hkpage (max-width: 30rem) {
    .v3-nw { white-space: normal; }
    .v4-duo__item { display: grid; grid-template-rows: auto auto; }
    .v4-duo__item::before { display: none; }
    .v4-duo__fig { grid-area: 1 / 1; }
    .v4-duo__item > .v3-ai { position: relative; grid-area: 1 / 1; align-self: end; justify-self: end; margin: 0 .15rem .15rem 0; inset: auto; }
    .v4-duo__copy { position: static; grid-area: 2 / 1; padding: 1.1rem var(--gutter) 1.4rem; }
    .v4-duo__copy :is(.v4-duo__h, .v3-text, .v3-link) { text-shadow: none; }
    .v4-stage__frame { display: grid; grid-template-rows: auto auto; }
    .v4-stage__frame::before { display: none; }
    .v4-stage__fig { grid-area: 1 / 1; }
    .v4-stage__frame > .v3-ai { position: relative; grid-area: 1 / 1; align-self: end; justify-self: end; margin: 0 .15rem .15rem 0; inset: auto; }
    .v4-stage__copy, .v4-stage--right .v4-stage__copy { position: static; grid-area: 2 / 1; width: auto; max-width: none; padding: 1.1rem var(--gutter) 1.4rem; }
    .v4-stage__copy :is(.v3-h2, .v4-stage__p, .v3-link) { text-shadow: none; }
  }
}

/* ---------- 8 SEITEN-ERGÄNZUNGEN 30.09.2026 (eigener Abschnitt – nicht Teil von „Große Schrift“) ---------- */

/* Master-Auftrag Chalets 30.09.: „Ruft uns an“ auf Telefonen (hoch und quer) direkt als tel:-Link statt Verweis auf die Kontaktseite */
@media (max-width: 47.99em), (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  .v4-call--desk { display: none; }
  .v4-call--tel { display: inline; }
}

/* Master-Auftrag 30.09. „Teams & Tagungen“ – Telefon: Karten untereinander, Bildpause im eigenen Hochformat */
@media (max-width: 47.99em) {
  .v4-pkg { padding: 1.15rem 1.15rem 1.2rem; gap: .75rem; }
  .v4-pkgs__more { gap: 0; margin-top: 1.75rem; }
  .v4-break__fig .pic { aspect-ratio: 3 / 4; max-height: 82svh; }
}

/* Massagen 30.09. – Telefon: Anwendungen kompakt, Bild links, Text rechts */
@media (max-width: 47.99em) {
  .v4-treat { display: grid; grid-template-columns: 36% minmax(0, 1fr); gap: 0 1rem; align-items: start; }
  .v4-treat__fig .pic { aspect-ratio: 1 / 1; }
  .v4-treat__h { font-size: 1.125rem; }
  .v4-treat__text { font-size: .875rem; margin-top: .4rem; }
  .v4-treat__prices { max-width: none; margin-top: .6rem; }
  .v4-treat__prices > div { padding: .32rem 0; font-size: .9375rem; }
}

/* Schlussprüfung 01.10.: KI-Zeichen unten rechts am Bild (Regel Johannes 27.09.) – Abschluss mit Vollbild und Bildblöcke mit Text darunter */
@media (max-width: 47.99em), (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  /* Abschluss: das Bild füllt den ganzen Block (seit 30.09. 4:5 statt 4:3) – die Formel der alten Bildhöhe setzte das Zeichen in die Mitte */
  .v3-close:not(.v3-close--photo):not(.v3-close--mbelow) > .v3-ai { top: auto; bottom: .15rem; right: .15rem; }
  /* Überschrift auf dem Bild, Text darunter: Zeichen im Bildfeld (Raster 1/1) statt am Ende des Textfelds; die Überschrift hält rechts Platz frei */
  .v4-stage--mbelow .v4-stage__frame > .v3-ai { position: relative; grid-area: 1 / 1; align-self: end; justify-self: end; margin: 0 .15rem .15rem 0; inset: auto; z-index: 3; }
}

/* 01.10.2026 (Johannes): Telefon-Menü – „Häufige Fragen“ als eigener Punkt (direkter Link, feiner Pfeil nach rechts), „Folgt uns“ als eigene Rubrik,
   Telefon und E-Mail direkt antippbar; Telefon-Footer – „Häufige Fragen“ als eigener Punkt, aktuelle Seite wie im Menü (Rubrik unterstrichen, offene
   Rubrik mit feiner Linie links statt hellerer Fläche, Eintrag unterstrichen) */
@media (max-width: 47.99em), (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  .v3-mnav__link--direct::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: .3rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .65; }
  .v3-mnav__reach { list-style: none; margin: .5rem 0 0; padding: 0; }
  .v3-mnav__reach a { display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: .2rem 0; font-size: 1.0625rem; line-height: 1.3; color: var(--ink); text-decoration: none; }
  .v3-mnav__reach svg { flex: none; width: 20px; height: 20px; opacity: .8; }
  .v3-mfoot__faq { margin: 0; border-bottom: 1px solid var(--line-dark); }
  .v3-mfoot__faq a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 50px; padding: .35rem 0; font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.25; color: var(--ivory); text-decoration: none; }
  .v3-mfoot__faq a::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: .3rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
  .v3-mfoot__acc > summary.is-current, .v3-mfoot__faq a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(255,255,255,.55); }
  .v3-mfoot__acc[open] { margin-inline: 0; padding-inline: 0; background: none; }
  .v3-mfoot__acc[open] > summary { font-weight: 500; }
  .v3-mfoot__acc[open] > ul { margin: -.1rem 0 .75rem .1rem; padding: 0 0 0 1rem; border-left: 2px solid var(--ivory); }
}

/* 01.10.2026 (Johannes, S25+): das Telefon-Menü passt auf einen Bildschirm – Rubriken etwas niedriger, Telefon, E-Mail und Sprache enger
   zusammen, Buchungsbereich schlanker. 384 × 652 (S25+ mit Browserleiste unten): vorher 580 px Inhalt bei 503 px Platz, jetzt 508 bei 511.
   Tippflächen: Rubriken 45 px, Telefon/E-Mail/Sprachen 40 px (über dem WCAG-Mindestmaß von 24 px). Kleinere Telefone scrollen wie bisher die Mitte. */
@media (max-width: 47.99em) and (min-height: 31.26em) {
  .v3-mnav { padding-bottom: .5rem; }
  .v3-mnav__link { min-height: 2.8125rem; padding-block: .2rem; }
  .v3-mnav__reach { margin-top: .25rem; }
  .v3-mnav__reach a { min-height: 2.5rem; padding-block: .1rem; font-size: 1rem; }
  .v3-mnav__reach svg { width: 18px; height: 18px; }
  .v3-mnav .v3-lang--c { margin-top: .25rem; }
  .v3-mnav .v3-lang--c .v3-lang__code { min-height: 2.5rem; }
  .v3-mnav__act { padding-block: .625rem calc(.625rem + env(safe-area-inset-bottom)); }
  .v3-mnav__book, .v3-mnav__alt { min-height: 3rem; }
}

/* 01.10.2026 (Master-Auftrag Preise & Angebote): Telefon eigenständig – Featured Special im Hochformat mit Titel im Bild, Eckdaten und Aktion darunter auf
   Nachtgrund (dunkler Markenmoment wie der Hero); Tariffinder einspaltig, Gäste als Zeilen mit großen Tippflächen; Ergebnisse untereinander */
@media (max-width: 47.99em) {
  .v4-hero + .v4-feat { padding-top: 0; }
  .v4-feat .v3-wide { width: 100%; }
  .v4-feat__frame { display: grid; border-radius: 0; }
  .v4-feat__frame::before { content: none; }
  .v4-feat__fig { grid-area: 1 / 1; } .v4-feat__fig .pic { aspect-ratio: 4 / 5; max-height: 78svh; }
  .v4-feat__copy { position: static; display: contents; width: auto; }
  .v4-feat__title { grid-area: 1 / 1; align-self: end; z-index: 2; gap: .45rem; padding: 5rem calc(var(--gutter) + 2.25rem) 1.1rem var(--gutter); background: linear-gradient(to top, rgba(14,20,18,.88) 0, rgba(14,20,18,.62) 52%, rgba(14,20,18,0) 100%); }
  .v4-feat__h { font-size: clamp(2.125rem, 1.6rem + 3vw, 2.75rem); }
  .v4-feat__more { grid-column: 1; gap: .85rem; padding: 1.1rem var(--gutter) 1.6rem; background: var(--night); color: var(--ivory); }
  .v4-feat__facts { gap: .5rem 1.25rem; }
  .v4-feat__act { display: grid; width: 100%; gap: .25rem; }
  .v4-feat__cta { width: 100%; min-height: 3.25rem; }
  .v4-feat__check { justify-self: center; }
  .v4-feat__frame > .v3-ai { grid-area: 1 / 1; position: relative; z-index: 3; align-self: end; justify-self: end; margin: 0 .15rem .15rem 0; inset: auto; }

  .v4-rates__panel { padding: 1.1rem 1rem 1.25rem; }
  .v4-rates__dates { grid-template-columns: minmax(0, 1fr); gap: .75rem; }   /* Final-Pass §12: Anreise und Abreise untereinander, volle Breite */
  .v4-rates__legend { font-size: 1.1875rem; }
  .v4-rates__extras > summary { font-size: 1.1875rem; }
  .v4-rates__xlist > div { padding-block: .6rem; }
  .v4-price__now { font-size: 2rem; }
  .v4-price--feat .v4-price__now { font-size: 2.375rem; }
  .v4-toffer__hit { padding-inline: .7rem; }
  .v4-rates__guests { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .v4-step { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
  .v4-step__ctl { grid-template-columns: 2.9rem 3rem 2.9rem; }
  .v4-rates__act .v3-btn { width: 100%; min-height: 3.25rem; }
  .v4-rate { padding: 1rem 1rem 1.1rem; }
  .v4-cancel__rows div { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* 01.10.2026 (Bike-Zielgruppen): Aktion der Verweiskarten auf dem Bild (Telefon), wie Titel und Text hell */
@media (max-width: 47.99em) {
  .v3-aud__grid .v3-tile__cta { color: var(--ivory); font-size: .875rem; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  /* 02.10.2026 (Wunsch Johannes: „nicht zu viel Text pro Bild auf mobile“): Verweiskarten randlos wie die Startseiten-Kacheln, höheres Bild,
     auf dem Bild nur Titel und Aktion (Kurzsatz entfällt auf dem Telefon) */
  .v4-xcards .v3-wide { width: 100%; }
  .v4-xcards .v3-sechead, .v4-xcards__more { padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
  .v4-xcards .v3-tile__media .pic { aspect-ratio: 3 / 2; }
  .v4-xcards .v3-tile__text { display: none; }
  .v4-xcards .v3-tile__link { gap: .3rem; }
}

/* 02.10.2026 (Bike-Seiten Runde 2): Routenkarten auf dem Telefon – eine Spalte, etwas kompakter; direkt unter der Bühne 24 px statt 40 px */
@media (max-width: 47.99em) {
  .v4-route { padding: 1.05rem 1.1rem 1.1rem; gap: .4rem; }
  .v4-route__h { font-size: 1.3125rem; }
  .v4-route__facts { gap: .35rem 1.1rem; font-size: .9375rem; }
  .v4-routes__list { gap: .75rem; }
  .v4-stage + .v4-sec.v4-routes--sub:not(.v4-stage):not(.v4-duo) { padding-top: 24px; }
}

/* HAHNENKLEE · Fragen & Antworten (/faq/, 26.09.2026) · eigener Block, gebündelt nach v3.css und v3-mobile.css (src/build.ts).
   Tablet: Suche oben, Themen als eine waagerecht wischbare Reihe; Telefon (30.09.): Themen-Chips in mehreren Zeilen; darunter die Fragen nach Themen.
   Desktop (ab 64em): links eine mitlaufende Spalte mit Suche und Themenliste (Haarlinien wie Footer und Inhaltsverzeichnis, keine
   Kästen), rechts die Fragen. Akkordeon = .v3-faq (v3.css); Farben, Schriften und Tokens aus v3.css; keine neuen Verläufe oder Pillen.
   Telefon-Bedingung wie v3-mobile.css (hochkant und gedrehtes Telefon). */

/* Filtern ändert die Höhe stark: keine Scroll-Verankerung im Bereich (Chrome sprang sonst an den Seitenanfang); v4-faq.js führt selbst zum Listenanfang */
.v4-faqhub { overflow-anchor: none; }
.v4-faqhub__grid { display: grid; gap: 2rem; }
.v4-faqhub__side, .v4-faqhub__main { min-width: 0; }
.v4-faqhub__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-m); align-content: start; }   /* Abstand zwischen sichtbaren Themen (verborgene zählen nicht mit) */

/* Suche: sichtbare Beschriftung, 17 px im Feld (kein Zoom beim Fokus auf iOS), eigene Leeren-Taste statt der Browser-Taste */
.v4-faqhub__label { display: block; margin: 0 0 .6rem; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; color: var(--ink); }
.v4-faqhub__field { position: relative; }
.v4-faqhub__ico { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.v4-faqhub__input { display: block; width: 100%; min-height: 3.25rem; margin: 0; padding: .75rem 2.75rem .75rem 2.9rem; font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.3; color: var(--ink); background: #fff; border: 1px solid rgba(14,20,18,.45); border-radius: 4px; box-shadow: none; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; transition: border-color .2s var(--ease); }
.v4-faqhub__input::placeholder { color: var(--ink-3); opacity: 1; }
.v4-faqhub__input:hover { border-color: rgba(14,20,18,.7); }
.v4-faqhub__input:focus { border-color: var(--night); outline: 3px solid var(--night); outline-offset: 2px; }
.v4-faqhub__input::-webkit-search-cancel-button, .v4-faqhub__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.v4-faqhub__clear { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; color: var(--ink-2); background: none; border: 0; border-radius: 2px; cursor: pointer; }
.v4-faqhub__clear:hover { color: var(--ink); }
.v4-faqhub__clear:focus-visible { outline: 2px solid var(--night); outline-offset: -2px; }

/* Themen: Reihe wie die Tourenauswahl (Wandern), eine Zeile zum Wischen; Auswahl dunkel (Form und Farbe) */
.v4-faqhub__sub { margin: 1.25rem 0 .5rem; font-family: var(--font-sans); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-faqhub__topics { display: flex; gap: .5rem; margin: 0 calc(-1 * var(--gutter)); padding: .25rem var(--gutter) .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: rgba(14,20,18,.25) transparent; }
.v4-faqhub__topic { flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 4px; font: 600 .9375rem/1.2 var(--font-sans); white-space: nowrap; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.v4-faqhub__topic:hover { border-color: var(--night); }
.v4-faqhub__topic:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
.v4-faqhub__topic[aria-pressed="true"] { color: var(--ivory); background: var(--night); border-color: var(--night); }
.v4-faqhub__topic.is-empty:not([aria-pressed="true"]) { color: var(--ink-3); }
.v4-faqhub__n { display: none; font-weight: 400; font-variant-numeric: tabular-nums; }
.v4-faqhub__status { margin: .25rem 0 0; min-height: 1.45em; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }

/* Ohne JavaScript: Themen als Sprungmarken */
.v4-faqhub__toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.v4-faqhub__toc a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(14,20,18,.4); text-underline-offset: .25em; }

/* Fragen: Themenüberschrift → 1 rem → Akkordeon; Antworten mit Absätzen, Listen, Kontakten und „Mehr dazu“ */
.v4-faqhub__group > .v3-h2 { margin: 0 0 1rem; }
.v4-faqhub .v3-faq__in > * + * { margin-top: .75rem; }
.v4-faqhub .v3-faq__in > .v3-faq__vars { margin-top: .6rem; }
.v4-faqhub .v3-faq__in > .v4-faqhub__more { margin-top: .25rem; }
.v4-faqhub .v3-faq__in .v4-qa dd a, .v4-faqhub .v3-faq__vars a { text-decoration: underline; text-underline-offset: .2em; }
.v4-faqhub__more { margin: 0; }

/* Keine Treffer: klare Aussage, direkte Kontaktwege, Weg zurück */
.v4-faqhub__empty { display: grid; gap: .75rem; justify-items: start; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.v4-faqhub__empty > p { margin: 0; }
.v4-faqhub__reach { list-style: none; margin: 0; padding: 0; display: grid; }
.v4-faqhub__reach a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .75rem; min-height: 2.75rem; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.v4-faqhub__k { display: inline-block; min-width: 5.5rem; font-family: var(--font-sans); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.v4-faqhub__v { text-decoration: underline; text-decoration-color: rgba(14,20,18,.4); text-underline-offset: .2em; }
.v4-faqhub__reach a:hover .v4-faqhub__v { text-decoration-color: currentColor; }
.v4-faqhub__reset { padding: 0; background: none; border: 0; cursor: pointer; }

/* Desktop: mitlaufende Spalte links (Suche, Themen mit Anzahl), Fragen rechts */
@media (min-width: 64em) {
  .v4-faqhub__grid { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); column-gap: clamp(3rem, 5.5vw, 6rem); align-items: start; }
  .v4-faqhub__side { position: sticky; top: calc(var(--header-h) + var(--pbar-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - var(--pbar-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; margin: -.4rem; padding: .4rem; scrollbar-width: thin; }
  .v4-faqhub__sub { margin-top: 1.75rem; }
  .v4-faqhub__topics { display: grid; gap: 0; margin: 0; padding: 0; overflow: visible; border-top: 1px solid var(--line); }
  .v4-faqhub__topic { position: relative; justify-content: space-between; width: 100%; min-height: 2.5rem; padding: .45rem .25rem .45rem 1rem; color: var(--ink-2); background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: .9375rem; font-weight: 400; text-align: left; white-space: normal; }
  .v4-faqhub__topic::before { content: ""; position: absolute; left: 0; top: .55rem; bottom: .55rem; width: 3px; border-radius: 2px; background: transparent; transition: background-color .2s var(--ease); }
  .v4-faqhub__topic:hover { color: var(--ink); border-color: var(--line); }
  .v4-faqhub__topic[aria-pressed="true"] { color: var(--ink); background: none; border-color: var(--line); font-weight: 600; }
  .v4-faqhub__topic[aria-pressed="true"]::before { background: var(--night); }
  .v4-faqhub__topic:focus-visible { outline-offset: -2px; }
  .v4-faqhub__n { display: inline; font-size: .875rem; color: var(--ink-3); }
  .v4-faqhub__topic[aria-pressed="true"] .v4-faqhub__n { color: var(--ink-2); }
  .v4-faqhub__status { margin-top: .75rem; }
  .v4-faqhub__toc ul { display: grid; gap: 0; border-top: 1px solid var(--line); }
  .v4-faqhub__toc li { border-bottom: 1px solid var(--line); }
  .v4-faqhub__toc a { width: 100%; min-height: 2.5rem; text-decoration: none; }
  .v4-faqhub__toc a:hover { text-decoration: underline; }
}
@media (min-width: 64em) and (pointer: coarse) { .v4-faqhub__topic { min-height: 2.75rem; } }

/* Telefon (hochkant und quer): Suche direkt unter dem Bildband-Einstieg, Themenreihe randlos zum Wischen, kompaktere Abstände */
@media (max-width: 47.99em), (orientation: landscape) and (max-width: 63.99em) and (max-height: 31.25em) and (pointer: coarse) {
  .v4-faqhub { padding-top: 1rem; }
  .page--faq .v4-hero--mband { min-height: 0; }   /* Bildband endet mit dem Text: die Hochkant-Mindesthöhe der Bild-Heros (v3-mobile.css) gilt hier nicht */
  .v4-faqhub__grid { gap: 1.75rem; }
  .v4-faqhub__label { font-size: 1.25rem; }
  .v4-faqhub__sub { margin-top: 1rem; }
  /* Wunsch Johannes 30.09. („Themen verschwinden rechts, unaufgeräumt“): alle Themen auf einen Blick – Chips umbrechen in mehrere Zeilen
     statt einer Wischreihe; kompakte Abstände zwischen den Themenblöcken, kleinere Blocküberschriften */
  .v4-faqhub__topics { flex-wrap: wrap; gap: .45rem; margin: 0; padding: .15rem 0 .35rem; overflow: visible; }
  .v4-faqhub__topic { min-height: 2.75rem; padding: .45rem .85rem; font-size: .9375rem; }
  .v4-faqhub__status { font-size: .875rem; color: var(--ink-3); }
  .v4-faqhub__main { gap: 1.75rem; }
  .v4-faqhub__group > .v3-h2 { margin-bottom: .35rem; font-size: 1.5rem; }
  .v4-faqhub__empty { padding-top: 1.25rem; }
  .v3-mnav__guest--faq + .v3-mnav__guest { margin-top: 0; }   /* Menü: „Schon gebucht?“ direkt unter „Noch Fragen?“ */
  /* Wunsch Johannes 30.09. abends („Wall of Text“, „Suche und Themen aufs Bild“): das Kopfbild läuft in den Nachtgrund über, auf dem die Suche
     und die Themen liegen – ein Block mit dem Bild; Einleitungssatz und Brotkrume nur auf größeren Bildschirmen (Seite eine Ebene tief) */
  .page--faq .v4-hero--mband { background: var(--night); }
  .page--faq .v4-hero--mband .v4-hero__media { height: clamp(15rem, 42svh, 21rem); }
  .page--faq .v4-hero--mband > .v3-ai { top: calc(clamp(15rem, 42svh, 21rem) - 2.9rem); }   /* Schlussprüfung 01.10.: KI-Zeichen unten rechts am (höheren) Kopfbild */
  .page--faq .v4-hero--mband .v4-hero__media::after { height: 100%; background: linear-gradient(to top, var(--night) 0, rgba(14,20,18,.72) 26%, rgba(14,20,18,.18) 62%, rgba(14,20,18,0) 100%); }
  .page--faq .v4-hero--mband .v4-hero__in > :is(.v4-crumbs, .v4-hero__lead) { display: none; }
  .page--faq .v4-hero--mband .v4-hero__in > .v4-hero__h1 { margin-bottom: .6rem; }
  .page--faq .v4-faqhub { padding-top: 0; }
  .page--faq .v4-faqhub__tools { margin: 0 calc(-1 * max(var(--gutter), env(safe-area-inset-left))) 0 calc(-1 * max(var(--gutter), env(safe-area-inset-right))); padding: .35rem max(var(--gutter), env(safe-area-inset-right)) 1.4rem max(var(--gutter), env(safe-area-inset-left)); background: var(--night); color: #fff; }
  .page--faq .v4-faqhub__label { margin-bottom: .55rem; font-size: 1.125rem; color: rgba(255,255,255,.88); }
  .page--faq .v4-faqhub__input { border: 0; border-radius: 8px; background: #fff; color: var(--ink); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
  .page--faq .v4-faqhub__input:focus { outline: 3px solid #fff; outline-offset: 2px; }
  .page--faq .v4-faqhub__sub { margin-top: 1.1rem; color: rgba(255,255,255,.62); }
  .page--faq .v4-faqhub__topic { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.36); border-radius: 8px; color: #fff; }
  .page--faq .v4-faqhub__topic:hover { border-color: #fff; }
  .page--faq .v4-faqhub__topic:focus-visible { outline-color: #fff; }
  .page--faq .v4-faqhub__topic[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--night); }
  .page--faq .v4-faqhub__topic.is-empty:not([aria-pressed="true"]) { color: rgba(255,255,255,.45); }
  .page--faq .v4-faqhub__status { margin-top: .45rem; color: rgba(255,255,255,.66); }
  .page--faq .v4-faqhub__grid { gap: 1.5rem; }
}
/* Sehr schmale Telefone: Beispiele im Platzhalter etwas kleiner (Eingabe selbst bleibt 17 px, kein Zoom beim Fokus) */
@media (max-width: 23.5em) { .v4-faqhub__input { padding-left: 2.6rem; } .v4-faqhub__ico { left: .8rem; } .v4-faqhub__input::placeholder { font-size: .9375rem; } }

@media (prefers-reduced-motion: reduce) {
  .v4-faqhub__input, .v4-faqhub__topic, .v4-faqhub__topic::before { transition: none; }
}

/* 30.09. (FAQ Final Polish, Punkt 4): Deep-Link/Suche – Trefferfrage einmal sanft hinterlegt, ohne Verschiebung; bei „weniger Bewegung“ nur kurz */
.v3-faq__item.is-hit { animation: v4-faqhit 2.4s ease-out 1; border-radius: 2px; }
@keyframes v4-faqhit { 0%, 35% { background-color: rgba(217, 161, 46, .16); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .v3-faq__item.is-hit { animation: none; background-color: rgba(217, 161, 46, .12); } }
.v4-faqhub [data-faq-item] { scroll-margin-top: calc(var(--header-h, 4.5rem) + 1.25rem); }