/* sabines.at — Farben und Schriften wie im Gästeportal (hell = Seezeichen, dunkel = Weinkeller) */
@font-face { font-family: 'Fraunces'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Fraunces-400.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Fraunces-600.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/nunito-v32-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/nunito-v32-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/nunito-v32-latin-700.woff2') format('woff2'); }
/* [20.10.2026] Zeichen für Tschechisch, Ungarisch, Slowakisch, Rumänisch (ő, ř, ș …), nur geladen wenn gebraucht */
@font-face { font-family: 'Nunito'; font-weight: 200 1000; font-style: normal; font-display: swap; src: url('fonts/nunito-v32-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --bg: #eee7db; --card: #faf7f2; --ink: #241c14; --muted: #5f5241; --line: #d9cebc;
    /* [21.10.2026] Franz: naturnaher Farbstil mit Akzenten — Schilfgrün statt Gold, Seeblau als Blickfang */
    --heading: #002859; --link: #002859; --eyebrow: #4f6b2a; --btn: #002859; --btn-ink: #ffffff;
    --chip: rgba(111,143,79,.16); --chip-ink: #3f5522; --accent-line: #6f8f4f;
    --band: #002859; --band-ink: #ffffff; --band-muted: #d7e1ee; --accent: #c8dba0; --map-hl: #c8dba0;
    --footer: #001a3d; --footer-ink: #d7e1ee; --footer-link: #ffffff;
    --shadow: 0 22px 50px -30px rgba(0,40,89,.30);
    --map-bg: var(--bg); --map-land: #f8f4ea; --map-border: #c2c3a4; --map-water: #a9cbe1; --map-water-line: #7fa9c9;
    --map-main: #c0612b; --map-other: #2f7d73; --map-ferry: #2b5f9e; --map-label: #33392a; --map-halo: rgba(245,243,231,.92); --map-area: #66694c;
    --map-town: #dcd2b6; --map-town-line: #c8bb98; --map-road: #c4b896; --map-road1: #e0b25e; --map-road4: #fbf8ee; --map-reed: #b9cc8e;
    --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --body: 'Nunito', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color-scheme: light;
}
:root[data-theme="dark"] {
    /* [21.10.2026] Franz: Variante C — warmer Grund wie im Gästeportal, Blau als Blickfang (Bänder, Fußbereich,
       Überzeilen); Knöpfe gelb wie im Gästeportal, damit sie gut auffallen */
    --bg: #1c1509; --card: #26200f; --ink: #f0e4cf; --muted: #c4ae8a; --line: #3d3020;
    --heading: #f0e4cf; --link: #e6d5b8; --eyebrow: #9dbbd8; --btn: #d9a24c; --btn-ink: #1c1509;
    --chip: rgba(157,187,216,.12); --chip-ink: #d6e4f2; --accent-line: #4b7aa0;
    --band: #102a45; --band-ink: #f0e4cf; --band-muted: #c7d4e2; --accent: #9dbbd8; --map-hl: #f0c77a;
    --footer: #0b1d31; --footer-ink: #c7d4e2; --footer-link: #f0e4cf;
    --shadow: 0 22px 50px -20px rgba(0,0,0,.7);
    --map-bg: var(--bg); --map-land: #342a19; --map-border: #5a4a30; --map-water: #2e5f86; --map-water-line: #5a8fb3;
    --map-main: #e3a556; --map-other: #8cc7e0; --map-ferry: #9cc4ec; --map-label: #f0e4cf; --map-halo: rgba(20,16,10,.9); --map-area: #c4ae8a;
    --map-town: #45392a; --map-town-line: #5a4a34; --map-road: #6b5a3e; --map-road1: #b8823f; --map-road4: #7d6a4b; --map-reed: #4a5a30;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* [21.10.2026] Sprungziele (Unterkünfte, Region, Fragen …) nicht unter der fixierten Kopfleiste verstecken */
html { scroll-padding-top: 96px; }
@media (max-width: 640px) { html { scroll-padding-top: 118px; } }
/* Seite am Handy nie breiter als das Display */
body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--card); color: var(--ink); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 10px; top: 10px; }
h1, h2, h3 { font-family: var(--display); color: var(--heading); line-height: 1.12; margin: 0; font-weight: 600; }
h1 { font-size: clamp(34px, 5vw, 54px); }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: 24px; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }
.muted { color: var(--muted); }
.lede { font-size: 19px; color: var(--muted); max-width: 34em; }
.section { padding: 64px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 8px; background: var(--btn); color: var(--btn-ink); font-weight: 700; text-decoration: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.btn-ghost { background: transparent; color: var(--link); border: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--chip); color: var(--chip-ink); border-radius: 6px; padding: 8px 14px; font-weight: 700; font-size: 14px; }

/* Kopf */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .logo { width: 50px; height: 50px; }
.brand .wordmark { height: 38px; width: auto; }
.nav { display: flex; flex-wrap: wrap; gap: 18px; font-weight: 600; }
.nav a { text-decoration: none; padding: 10px 2px; }
.header-tools { display: flex; align-items: center; gap: 10px; }
/* [20.10.2026] Franz: so groß wie die Sprachwahl (38 px inkl. Rahmen) */
.theme-toggle { min-width: 38px; min-height: 38px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--link); font: inherit; font-weight: 700; font-size: 14px; padding: 0 10px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.theme-toggle svg { width: 16px; height: 16px; }
.only-dark { display: none; }
:root[data-theme="dark"] .only-dark { display: inline; }
:root[data-theme="dark"] .only-light { display: none; }

/* Startbereich */
.hero { display: flex; flex-wrap: wrap; gap: 44px; align-items: center; padding: 44px 0 36px; }
.hero > div { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hero-photo { position: relative; }
.hero-photo img { width: 100%; height: 500px; object-fit: cover; border-radius: 10px; }
/* [19.10.2026] Stimmungsbild über die volle Seitenbreite: Foto langsam heranzoomend, Logo + Schriftzug weich eingeblendet */
.stage { position: relative; height: min(78vh, 680px); min-height: 380px; overflow: hidden; background: #0d0a05; }
.stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
    animation: stageZoom 24s ease-in-out infinite alternate; }
.stage-shade { position: absolute; inset: 0; background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(8,6,3,.42), rgba(8,6,3,0) 72%),
    linear-gradient(to bottom, rgba(8,6,3,.25), rgba(8,6,3,0) 30%, rgba(8,6,3,0) 70%, rgba(8,6,3,.45)); }
.stage-title { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(86vw, 760px);
    display: flex; flex-direction: column; align-items: center; gap: 18px; pointer-events: none; }
.stage-logo { display: block; width: clamp(56px, 7vw, 84px); height: auto; opacity: 0;
    animation: stageIn 1.8s ease-out .3s forwards, logoSoftGlow 6s ease-in-out 3s infinite; }
/* [19.10.2026] Logo "S": nur ganz leichtes, ruhiges Leuchten (Münze/Lichtstreif/Lichtkranz auf Wunsch wieder entfernt) */
.stage-logo-wrap { display: block; }
@keyframes logoSoftGlow { 0%, 100% { filter: drop-shadow(0 4px 18px rgba(0,0,0,.55)); }
    50% { filter: drop-shadow(0 4px 18px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(246,214,150,.35)); } }
.stage-lettering { display: block; width: 100%; height: auto; opacity: 0; animation: stageIn 2.4s ease-out .8s forwards, stageGlow 6s ease-in-out 3.4s infinite; }
/* [19.10.2026] Schriftzug funkelt: ein Lichtstreif wandert über die Buchstaben von links nach rechts und wieder zurück
   (Lichtfläche per CSS-Maske auf die Form des Schriftzugs beschränkt) */
.stage-lettering-wrap { position: relative; display: block; width: 100%; }
.stage-lettering-wrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(100deg, rgba(255,255,255,0) 42%, rgba(255,244,214,.95) 49%, #fff 50%, rgba(255,226,160,.9) 51%, rgba(255,255,255,0) 58%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-mask: url('img/saliterei_stage.svg?v=202610212132') center / 100% 100% no-repeat; mask: url('img/saliterei_stage.svg?v=202610212132') center / 100% 100% no-repeat;
    filter: drop-shadow(0 0 6px rgba(255,220,150,.8));
    animation: letterSweepIn .01s linear 3.6s forwards, letterSweep 4.5s ease-in-out 3.6s infinite alternate; }
@keyframes letterSweepIn { to { opacity: .9; } }
@keyframes letterSweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .stage-lettering-wrap::after { animation: none; opacity: 0; } }
/* [19.10.2026] Sonnen im Stimmungsbild: erscheinen nach dem Schriftzug und "brennen" dann wie echte Sonnen —
   langsam drehend, Strahlenglanz pulsiert abwechselnd, leichtes Flackern. */
/* rechtsbündig über "haus": beginnt über dem a nach dem h (81 % der Schriftzugbreite, aus den Pushkin-Laufweiten berechnet) */
.stage-suns { position: absolute; right: 1.5%; top: 3%; transform: translateY(100%); display: flex; gap: clamp(5px, .75vw, 9px); justify-content: flex-end; align-items: center; pointer-events: auto; cursor: help; outline: none; }
.stage-suns img { width: clamp(8px, .95vw, 12.5px); height: auto; opacity: 0;
    animation: stageSunIn 1s cubic-bezier(.3,1.5,.5,1) forwards, sunBurnSmall 4s ease-in-out infinite, sunSpin 12s linear infinite; }
.stage-suns img:nth-child(1) { animation-delay: 2.4s, 3.4s, 2.4s; }
.stage-suns img:nth-child(2) { animation-delay: 2.6s, 5s, 2.6s; }
.stage-suns img:nth-child(3) { animation-delay: 2.8s, 3.9s, 2.8s; }
.stage-suns img:nth-child(4) { animation-delay: 3s, 5.5s, 3s; }
.stage-suns img:nth-child(5) { animation-delay: 3.2s, 4.4s, 3.2s; }
.stage-suns:focus-visible { outline: 2px solid rgba(251,244,230,.6); outline-offset: 6px; border-radius: 8px; }
@keyframes stageSunIn { from { opacity: 0; transform: scale(.2); } to { opacity: .95; } }
@keyframes sunSpin { to { rotate: 360deg; } }
/* kleine Sonnen im Stimmungsbild: sichtbar drehend und etwas kräftiger leuchtend */
@keyframes sunBurnSmall {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(246,196,83,.6)); scale: 1; }
    50% { filter: drop-shadow(0 0 6px rgba(246,196,83,.95)) drop-shadow(0 0 12px rgba(255,170,40,.55)) brightness(1.15); scale: 1.1; } }
@keyframes sunBurn {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(246,196,83,.45)); scale: 1; }
    50% { filter: drop-shadow(0 0 7px rgba(246,196,83,.8)) drop-shadow(0 0 14px rgba(255,170,40,.4)) brightness(1.08); scale: 1.06; } }
.stage-suns .sun-tip { bottom: calc(100% + 10px); top: auto; left: auto; right: 0; transform: translate(0, 4px); }
.stage-suns:hover .sun-tip, .stage-suns:focus-visible .sun-tip, .stage-suns.open .sun-tip { opacity: 1; transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) { .stage-suns img { animation: none; opacity: .95; filter: drop-shadow(0 0 6px #f6c453); } }
.stage .stage-badge { left: auto; right: max(20px, calc((100vw - 1200px) / 2 + 20px)); bottom: 22px; }
/* halbtransparent über dem Foto, Hintergrund leicht verschwommen */
.stage .stage-badge { background: rgba(20,15,7,.45); color: #f0e4cf; border: 1px solid rgba(240,228,207,.18);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.stage .stage-badge strong { color: #fbf4e6; }
.stage .stage-badge .muted { color: #e6d5b8; }
/* [21.10.2026] Partnerlogos gleich oben im Startbild (links unten, gegenüber dem Hinweis) */
.stage-partners { position: absolute; left: max(20px, calc((100vw - 1200px) / 2 + 20px)); bottom: 22px; z-index: 2; display: flex; align-items: center; gap: 14px;
    padding: 9px 14px; border-radius: 10px; background: rgba(20,15,7,.45); border: 1px solid rgba(240,228,207,.18);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; animation: stagePartners 1s ease-out 2.6s forwards; }
.stage-partners a { display: block; line-height: 0; }
.stage-partners img { height: 36px; width: auto; }
.stage-partners img.logo-stm { height: 44px; margin: -4px 0; }
@keyframes stagePartners { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stage-partners { animation: none; opacity: 1; } }
@keyframes stageZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes stageIn { from { opacity: 0; filter: blur(14px); transform: translateY(12px) scale(1.04); }
    to { opacity: .82; filter: blur(.6px) drop-shadow(0 2px 14px rgba(0,0,0,.6)); transform: none; } }
@keyframes stageGlow { 0%, 100% { filter: blur(.6px) drop-shadow(0 2px 14px rgba(0,0,0,.6)); }
    50% { filter: blur(.4px) drop-shadow(0 0 22px rgba(240,199,122,.45)) drop-shadow(0 2px 14px rgba(0,0,0,.6)); } }
@media (prefers-reduced-motion: reduce) { .stage-img, .stage-logo, .stage-lettering { animation: none; opacity: .82; } }
.hero-text { padding-top: 40px; }
.hero-text > div { max-width: 820px; }
.badge { position: absolute; left: 18px; bottom: 18px; background: var(--card); border-radius: 8px; padding: 12px 16px; box-shadow: var(--shadow); }
.badge strong { color: var(--heading); display: block; }

/* Bänder */
.band { background: var(--band); color: var(--band-ink); }
.band h2 { color: var(--band-ink); }
.band-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 24px; }
/* hell: Knopf auf dem Navy-Band hell absetzen (Standardknopf ist selbst Navy) */
:root:not([data-theme="dark"]) .band .btn { background: var(--accent); color: #001a3d; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.feature { border-top: 2px solid var(--accent); padding-top: 14px; }
.feature .big { font-family: var(--display); font-size: 32px; color: var(--accent); }
.feature .t { font-weight: 700; font-size: 18px; }
.feature .d { color: var(--band-muted); }

/* Unterkünfte */
.unit-row { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; margin-top: 56px; position: relative; }
/* [19.10.2026] deutliche Trennung zwischen den Unterkünften: auslaufende Linie mit Sonne in der Mitte */
.unit-row + .unit-row { margin-top: 40px; padding-top: 76px; }
.unit-row + .unit-row::before { content: ''; position: absolute; top: 18px; left: 6%; right: 6%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-line) 25%, var(--accent-line) 75%, transparent); opacity: .8; }
.unit-row + .unit-row::after { content: ''; position: absolute; top: 4px; left: 50%; width: 30px; height: 30px; margin-left: -15px;
    border-radius: 50%; background: var(--bg) url('img/sonne_hell.svg?v=202610212132') center / 22px 22px no-repeat; box-shadow: 0 0 0 8px var(--bg); }
.unit-row:nth-of-type(even) { flex-direction: row-reverse; }
.unit-row .photo { flex: 1 1 420px; min-width: 0; }
.unit-row .photo img { width: 100%; height: 340px; object-fit: cover; border-radius: 10px; }
.unit-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.unit-photos a { display: block; position: relative; border-radius: 6px; overflow: hidden; }
.unit-photos .main { grid-column: 1 / -1; }
.unit-photos .rest { display: none; }
.unit-row .unit-photos .thumb img { height: 84px; border-radius: 6px; transition: transform .3s; }
.unit-photos a:hover img { transform: scale(1.03); }
.unit-photos .more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12,9,4,.55); color: #f0e4cf; font-weight: 700; font-size: 18px; }
.unit-row .info .unit-badge { max-width: none; }
.unit-row .gallery .main img { height: 340px; }
.unit-row .gallery-strip a, .unit-row .gallery-strip img { width: 96px; }
.unit-row .gallery-strip img { height: 72px; }
.facts-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.unit-row .info { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lettering { height: 52px; width: auto; max-width: 100%; }
.lettering.big { height: 74px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-weight: 600; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.card h3 { font-family: var(--body); font-size: 18px; font-weight: 700; }

/* Unterkunfts-Kärtchen (wie die bisherigen Einheiten-Logos) */
@font-face { font-family: 'Mulish'; font-weight: 200 900; font-style: normal; font-display: swap; src: url('fonts/Mulish-VariableFont_wght.ttf') format('truetype'); }
.unit-badge { max-width: 460px; width: 100%; color: var(--muted); }
.ub-rule { display: flex; align-items: center; gap: 12px; }
.ub-rule::before, .ub-rule::after { content: ''; flex: 1 1 auto; height: 2px; background: currentColor; opacity: .55; }
.ub-brand { height: 34px; width: auto; max-width: 70%; }
.ub-sub { text-align: center; font-family: 'Mulish', var(--body); font-weight: 400; letter-spacing: .32em; text-transform: uppercase; font-size: 13px; margin: 2px 0 0; }
.ub-name { font-family: 'Mulish', var(--body); font-weight: 300; text-transform: uppercase; letter-spacing: .06em; text-align: center; color: var(--heading); font-size: clamp(34px, 5.4vw, 58px); line-height: 1.05; margin: 6px 0 4px; }
.ub-suns { margin: 2px 0 10px; }
.ub-sun { width: 22px; height: 22px; }
.ub-icons { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.ub-beds { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ub-bed { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.ub-heads { display: flex; align-items: flex-end; }
.ub-head { width: 15px; height: 17px; margin: 0 1px; }
.ub-bedimg { width: 37px; height: 24px; }
.ub-opt { opacity: .8; }
.ub-opt small { font-size: 11px; line-height: 1; }
.ub-fits { display: flex; gap: 6px; }
.ub-fit { width: 38px; height: 33px; }
/* "Smartphone" mit (i): Hinweis ohne App/Download erst beim Darüberfahren, per Klick/Antippen fest geöffnet */
.info-tip { position: relative; display: inline-flex; align-items: center; gap: 3px; cursor: help; white-space: nowrap;
    text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1px; outline: none; }
.info-tip .info-i { color: var(--eyebrow); flex: 0 0 auto; }
.info-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 0; transform: translateY(4px);
    background: var(--ink); color: var(--bg); font-family: var(--body); font-size: 13px; font-weight: 600; line-height: 1.35;
    white-space: normal; width: max-content; max-width: 240px; padding: 7px 10px; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.25);
    opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 30; text-align: left; }
.info-tip:hover::after, .info-tip:focus-visible::after, .info-tip.open::after { opacity: 1; transform: translateY(0); }
.info-tip:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; border-radius: 4px; }
/* [19.10.2026] Unterkunfts-Kärtchen animiert beim Hineinscrollen (site.js setzt .anim-ready, dann .in-view):
   Linien wachsen aus der Mitte, Schriftzug und Name blenden aus der Unschärfe ein, Sonnen erscheinen nacheinander. */
.unit-badge.anim-ready .ub-brand, .unit-badge.anim-ready .ub-sub, .unit-badge.anim-ready .ub-name,
.unit-badge.anim-ready .ub-sun, .unit-badge.anim-ready .ub-icons { opacity: 0; }
.unit-badge.anim-ready .ub-rule::before, .unit-badge.anim-ready .ub-rule::after { transform: scaleX(0); }
.unit-badge.anim-ready .ub-rule::before { transform-origin: right center; }
.unit-badge.anim-ready .ub-rule::after { transform-origin: left center; }
.unit-badge.in-view .ub-rule::before, .unit-badge.in-view .ub-rule::after { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .15s; }
.unit-badge.in-view .ub-brand { animation: badgeIn 1.4s ease-out .2s forwards; }
.unit-badge.in-view .ub-sub { animation: badgeIn 1.2s ease-out .55s forwards; }
.unit-badge.in-view .ub-name { animation: nameIn 1.6s cubic-bezier(.2,.7,.2,1) .7s forwards; }
.unit-badge.in-view .ub-sun { animation: sunIn .7s cubic-bezier(.3,1.6,.5,1) forwards; }
.unit-badge.in-view .ub-sun:nth-child(1) { animation-delay: 1.3s; }
.unit-badge.in-view .ub-sun:nth-child(2) { animation-delay: 1.45s; }
.unit-badge.in-view .ub-sun:nth-child(3) { animation-delay: 1.6s; }
.unit-badge.in-view .ub-sun:nth-child(4) { animation-delay: 1.75s; }
.unit-badge.in-view .ub-sun:nth-child(5) { animation-delay: 1.9s; }
.unit-badge.in-view .ub-icons { animation: badgeIn 1s ease-out 1.9s forwards; }
@keyframes badgeIn { from { opacity: 0; filter: blur(8px); transform: translateY(8px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes nameIn { from { opacity: 0; filter: blur(10px); letter-spacing: .32em; } to { opacity: 1; filter: none; letter-spacing: .06em; } }
@keyframes sunIn { from { opacity: 0; transform: scale(.3) rotate(-90deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .unit-badge.anim-ready .ub-brand, .unit-badge.anim-ready .ub-sub, .unit-badge.anim-ready .ub-name,
    .unit-badge.anim-ready .ub-sun, .unit-badge.anim-ready .ub-icons { opacity: 1; animation: none; }
    .unit-badge.anim-ready .ub-rule::before, .unit-badge.anim-ready .ub-rule::after { transform: none; }
}
/* [19.10.2026] Sonnen: beim Darüberfahren/Antippen leuchten sie abwechselnd, darüber der Hinweis zur Zertifizierung */
.ub-suns { position: relative; cursor: help; outline: none; }
.ub-suns:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 4px; border-radius: 6px; }
/* gleich wie die Sonnen im Stimmungsbild: brennen (Glanz pulsiert flackernd) und drehen sich, je Sonne zeitversetzt */
.unit-badge .ub-suns:hover .ub-sun, .unit-badge .ub-suns:focus-visible .ub-sun, .unit-badge .ub-suns.open .ub-sun { opacity: 1; animation: sunBurn 4s ease-in-out infinite, sunSpin 28s linear infinite; }
.unit-badge .ub-suns:hover .ub-sun:nth-child(1), .unit-badge .ub-suns.open .ub-sun:nth-child(1), .unit-badge .ub-suns:focus-visible .ub-sun:nth-child(1) { animation-delay: 0s, 0s; }
.unit-badge .ub-suns:hover .ub-sun:nth-child(2), .unit-badge .ub-suns.open .ub-sun:nth-child(2), .unit-badge .ub-suns:focus-visible .ub-sun:nth-child(2) { animation-delay: .9s, -3s; }
.unit-badge .ub-suns:hover .ub-sun:nth-child(3), .unit-badge .ub-suns.open .ub-sun:nth-child(3), .unit-badge .ub-suns:focus-visible .ub-sun:nth-child(3) { animation-delay: .4s, -6s; }
.unit-badge .ub-suns:hover .ub-sun:nth-child(4), .unit-badge .ub-suns.open .ub-sun:nth-child(4), .unit-badge .ub-suns:focus-visible .ub-sun:nth-child(4) { animation-delay: 1.3s, -9s; }
.unit-badge .ub-suns:hover .ub-sun:nth-child(5), .unit-badge .ub-suns.open .ub-sun:nth-child(5), .unit-badge .ub-suns:focus-visible .ub-sun:nth-child(5) { animation-delay: .7s, -11s; }
@keyframes sunGlow { 0%, 100% { transform: scale(1); filter: none; }
    50% { transform: scale(1.22); filter: drop-shadow(0 0 6px #f6c453) drop-shadow(0 0 14px rgba(246,196,83,.7)) brightness(1.15); } }
.sun-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); background: var(--ink); color: var(--bg);
    font-family: var(--body); font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; white-space: normal;
    width: max-content; max-width: 260px; text-align: center; padding: 7px 11px; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.25);
    opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 30; }
.ub-suns:hover .sun-tip, .ub-suns:focus-visible .sun-tip, .ub-suns.open .sun-tip { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ub-suns:hover .ub-sun, .ub-suns.open .ub-sun, .ub-suns:focus-visible .ub-sun { animation: none; filter: drop-shadow(0 0 6px #f6c453); } }
/* Info beim Darüberfahren bzw. Antippen: Symbol leuchtet auf, kleine Erklärung darüber */
.ub-tip { position: relative; display: inline-flex; flex-direction: column; align-items: center; cursor: help; border-radius: 8px; outline: none;
    transition: transform .18s ease, filter .18s ease; }
.ub-tip:hover, .ub-tip:focus-visible { transform: translateY(-2px) scale(1.08); }
.ub-tip:hover img, .ub-tip:focus-visible img { filter: drop-shadow(0 0 5px var(--accent)) brightness(1.2); }
.ub-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
    background: var(--ink); color: var(--bg); font-family: var(--body); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: normal; width: max-content; max-width: 230px; text-align: left;
    padding: 6px 10px; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease; z-index: 5; }
.ub-tip:hover::after, .ub-tip:focus::after { opacity: 1; transform: translate(-50%, 0); }
/* Erklärung nie über den Rand: Betten links bündig, Rad/Kind rechts bündig */
.ub-beds .ub-tip::after { left: 0; transform: translate(0, 4px); }
.ub-fits .ub-tip::after { left: auto; right: 0; transform: translate(0, 4px); }
.ub-beds .ub-tip:hover::after, .ub-beds .ub-tip:focus::after, .ub-fits .ub-tip:hover::after, .ub-fits .ub-tip:focus::after { transform: translate(0, 0); }
/* Ausgeblendete Erklärung zählt nicht zur Seitenbreite, am Handy schmaler */
.ub-tip::after { max-width: min(230px, 46vw); }
.ub-tip:not(:hover):not(:focus)::after { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .ub-tip, .ub-tip::after { transition: none; } .ub-tip:hover, .ub-tip:focus-visible { transform: none; } }
.ub-head-wrap { margin: 6px 0 18px; }
.ub-head-wrap .unit-badge { max-width: none; }

/* Live-Hinweise */
.teaser { border: 1.5px solid var(--accent-line); background: var(--card); border-radius: 8px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.teaser[hidden] { display: none; }
.teaser .teaser-line strong { color: var(--eyebrow); }
.teaser s { color: var(--muted); }
.teaser b { font-family: var(--display); font-size: 21px; color: var(--heading); }

/* Schritte */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }

/* Fragen */
details { border-bottom: 1px solid var(--line); padding: 16px 0; }
summary { cursor: pointer; font-weight: 700; font-size: 18px; color: var(--heading); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; }
details[open] summary::after { content: '–'; }

/* Unterkunftsseite */
.gallery { display: flex; flex-direction: column; gap: 6px; }
.gallery a { display: block; border-radius: 8px; overflow: hidden; cursor: zoom-in; }
.gallery .main img { width: 100%; height: min(60vw, 520px); object-fit: cover; }
.gallery a.no-zoom { cursor: default; }
.gallery-main { position: relative; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(0,0,0,.45); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.gallery-nav:hover { background: rgba(0,0,0,.65); }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
/* Vorschaustreifen wie im Buchungswidget: wischbar, einrastend */
.gallery-strip { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
    scrollbar-width: thin; scrollbar-color: var(--accent-line) var(--line); }
.gallery-strip::-webkit-scrollbar { height: 8px; }
.gallery-strip::-webkit-scrollbar-track { background: var(--line); border-radius: 8px; }
.gallery-strip::-webkit-scrollbar-thumb { background: var(--accent-line); border-radius: 8px; }
.gallery-strip a { flex: 0 0 auto; width: 128px; border-radius: 6px; scroll-snap-align: start; cursor: pointer; opacity: .75; outline: 2px solid transparent; outline-offset: -2px; transition: opacity .2s; }
.gallery-strip a:hover, .gallery-strip a.active { opacity: 1; }
.gallery-strip a.active { outline-color: var(--btn); }
.gallery-strip img { width: 128px; height: 96px; object-fit: cover; }
@media (max-width: 700px) { .gallery-strip a, .gallery-strip img { width: 96px; } .gallery-strip img { height: 72px; } }
/* Foto-Popup wie im Buchungswidget */
.slider { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(10,10,15,.55); padding: 24px; }
.slider.open { display: flex; }
html.slider-lock, html.slider-lock body { overflow: hidden; }
.slider-popup { position: relative; background: #151217; border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.45); padding: 8px; max-width: min(70vw, 1100px); }
.slider-popup img { display: block; max-width: 100%; max-height: min(80vh, 950px); width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.slider-close { position: absolute; top: -14px; right: -14px; width: 30px; height: 30px; border-radius: 50%; background: #151217; border: 2px solid #fff; color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.slider-prev { left: 10px; }
.slider-next { right: 10px; }
.slider-count { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 12px; opacity: .85; white-space: nowrap; font-variant-numeric: tabular-nums; }
.slider.single .slider-nav, .slider.single .slider-count { display: none; }
@media (max-width: 700px) { .slider-popup { max-width: 92vw; } .slider-popup img { max-height: 70vh; } }
.amenities { columns: 2 220px; padding-left: 20px; }
/* Buchungsmodul: kein eigener Rahmen — das Modul zeichnet seine Karten im Stil dieser Seite (embed.js data-embed="site") */
.booking-frame { min-height: 540px; }
.booking-frame iframe { display: block; background: transparent; }

/* Rechtstexte */
.legal { max-width: 860px; }
.legal h1 { margin-bottom: 18px; }
.legal h2 { font-size: 26px; margin: 34px 0 10px; }
.legal h3 { font-size: 20px; margin: 22px 0 8px; }
.legal table { border-collapse: collapse; width: 100%; margin: 14px 0; display: block; overflow-x: auto; }
.legal th, .legal td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }

/* Fuß */
.site-footer { background: var(--footer); color: var(--footer-ink); margin-top: 40px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; padding-top: 44px; padding-bottom: 110px; }
.site-footer a { color: var(--footer-link); }
.site-footer .col { display: flex; flex-direction: column; gap: 6px; }
.site-footer .wordmark { height: 34px; width: auto; align-self: flex-start; }
/* [21.10.2026] Logos Region und Partner unten im Fußbereich */
.site-footer .wrap:has(+ .footer-logos) { padding-bottom: 28px; }
.site-footer .footer-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 18px 34px; padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12); }
.footer-logos a { display: block; opacity: .92; transition: opacity .2s ease; }
.footer-logos a:hover { opacity: 1; }
.footer-logos img { height: 46px; width: auto; }
.footer-logos img.logo-stm { height: 56px; }

/* mitlaufende Buchungsleiste */
.sticky-cta { position: sticky; bottom: 14px; z-index: 20; margin: 24px auto 0; max-width: 760px; padding: 0 14px 14px; }
.sticky-cta .cta-short { display: none; }
.sticky-cta .inner { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; box-shadow: var(--shadow); font-weight: 700; }

@media (max-width: 640px) {
    body { font-size: 16px; }
    .hero > div, .unit-row .photo, .unit-row .info { flex-basis: 100%; }
    .hero-photo img { height: 300px; }
    .stage { height: 58vh; min-height: 320px; }
    .stage .stage-badge { left: 14px; right: 14px; bottom: 14px; }
    .stage-partners { left: 14px; right: auto; bottom: 104px; gap: 10px; padding: 7px 10px; }
    .stage-partners img { height: 26px; }
    .stage-partners img.logo-stm { height: 32px; margin: -3px 0; }
    .unit-row .photo img { height: 240px; }
    .unit-row .gallery .main img { height: 240px; }
    .unit-row .gallery-strip img { height: 72px; }
    .nav { order: 3; width: 100%; gap: 12px; }
    /* [19.10.2026] Handy: Leiste immer unten, über die volle Breite, ohne Rand links/rechts/unten, einzeilig */
    .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; padding: 0; }
    .sticky-cta .inner { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; flex-wrap: nowrap; gap: 10px;
        padding: 8px 10px 8px 16px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
    .sticky-cta .inner span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sticky-cta .btn { flex: 0 0 auto; min-height: 42px; padding: 0 16px; white-space: nowrap; }
    .sticky-cta .cta-long { display: none; }
    .sticky-cta .cta-short { display: inline; }
    body:has(.sticky-cta) { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Merkmal nur an einem Standort */
.card .flag { display: inline-block; margin-bottom: 10px; background: var(--chip); color: var(--chip-ink); border-radius: 6px; padding: 4px 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }

/* ===== [20.10.2026] Runde 714: Mehrsprachigkeit, Bühnen, Fotobänder, Einblenden, Gästestimmen, Entriegelung ===== */
picture { display: block; }
.gallery-strip picture, .unit-photos picture { display: contents; }

/* Kopfleiste: am Desktop mitlaufend und milchig-transparent; über einem Bühnenbild zuerst ganz durchsichtig */
@media (min-width: 900px) {
    .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 84%, transparent);
        -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.site-header.over-stage { position: absolute; top: 0; left: 0; right: 0; z-index: 40; border-bottom-color: transparent;
    background: linear-gradient(to bottom, rgba(8,6,3,.62), rgba(8,6,3,.18) 70%, rgba(8,6,3,0)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header.over-stage .nav a, .site-header.over-stage .lang-link { color: #fbf4e6; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.site-header.over-stage .theme-toggle { background: rgba(20,15,7,.35); border-color: rgba(251,244,230,.35); color: #fbf4e6;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.site-header.over-stage .lang-link.active { background: rgba(251,244,230,.18); }
.site-header.over-stage.scrolled { position: fixed; background: color-mix(in srgb, var(--bg) 84%, transparent); border-bottom-color: var(--line);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 8px 24px -18px rgba(0,0,0,.5);
    animation: headerDown .35s ease-out; }
.site-header.over-stage.scrolled .nav a, .site-header.over-stage.scrolled .lang-link { color: var(--link); text-shadow: none; }
.site-header.over-stage.scrolled .theme-toggle { background: var(--card); border-color: var(--line); color: var(--link); }
.site-header.over-stage.scrolled .lang-link.active { background: var(--chip); }
@keyframes headerDown { from { transform: translateY(-100%); } to { transform: none; } }
.lang-switch { display: inline-flex; gap: 2px; font-weight: 700; font-size: 14px; }
.lang-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 9px; border-radius: 6px; text-decoration: none; color: var(--link); }
.lang-link.active { background: var(--chip); color: var(--chip-ink); }
a.lang-link:hover { text-decoration: underline; }
/* [20.10.2026] Sprachwahl als Aufklapper (sechs Sprachen) */
.lang-menu { position: relative; border-bottom: 0; padding: 0; }
.lang-menu > summary { list-style: none; cursor: pointer; gap: 4px; font-weight: 700; font-size: 14px; border: 1px solid var(--line); }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::after, .lang-menu[open] > summary::after { content: none; }
.lang-menu > summary { justify-content: flex-start; color: var(--link); }
.lang-menu > summary svg { transition: transform .15s ease; }
.lang-menu[open] > summary svg { transform: rotate(180deg); }
.lang-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: flex; flex-direction: column; min-width: 170px; padding: 6px;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.lang-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 15px; white-space: nowrap; }
.lang-item b { display: inline-block; min-width: 24px; color: var(--muted); font-size: 13px; }
a.lang-item:hover, a.lang-item:focus-visible { background: var(--chip); color: var(--chip-ink); }
.lang-item.active { background: var(--chip); color: var(--chip-ink); }
.lang-flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); flex: 0 0 auto; object-fit: cover; }
.lang-menu > summary .lang-flag { margin-right: 2px; }
.site-header.over-stage .lang-menu > summary { border-color: rgba(251,244,230,.45); }
.site-header.over-stage.scrolled .lang-menu > summary { border-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .lang-menu > summary svg { transition: none; } }

/* Bühne der Unterkunftsseiten und der Region-Seite */
.stage-unit, .stage-region { height: min(66vh, 600px); }
.stage-lettering-wrap::after { -webkit-mask-image: var(--mask, url('img/saliterei_stage.svg?v=202610212132')); mask-image: var(--mask, url('img/saliterei_stage.svg?v=202610212132')); }
.stage-unit .stage-title { top: 46%; width: min(84vw, 620px); }
.stage-h1 { color: #fbf4e6; font-size: clamp(40px, 7vw, 84px); text-align: center; text-shadow: 0 4px 28px rgba(0,0,0,.55); opacity: 0;
    animation: stageIn 2s ease-out .4s forwards; }
.stage-unit .stage-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.btn-glass { background: rgba(251,244,230,.16); color: #fbf4e6 !important; border: 1px solid rgba(251,244,230,.4); min-height: 40px; padding: 0 16px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s; }
.btn-glass:hover { background: rgba(251,244,230,.3); }
@media (prefers-reduced-motion: reduce) { .stage-h1 { animation: none; opacity: 1; } }

/* "Direkt buchen lohnt sich": Foto im Hintergrund, Band halbtransparent darüber, Vorteile als Glaskarten */
.band-photo { position: relative; overflow: hidden; isolation: isolate; }
.band-photo .band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.06);
    transition: transform 8s ease-out; }
.band-photo.in-view .band-bg { transform: scale(1); }
.band-photo .band-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, color-mix(in srgb, var(--band) 92%, transparent), color-mix(in srgb, var(--band) 70%, transparent)); }
.feature.glass { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-top: 2px solid var(--accent); border-radius: 10px; padding: 16px 18px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .3s ease, background .3s ease; }
.feature.glass:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); }
.band-photo .band-head { margin-bottom: 26px; }

/* Stimmungsfotos zwischen den Abschnitten: volle Breite, Bild verschiebt sich beim Scrollen leicht (site.js) */
.photo-break { position: relative; height: clamp(260px, 46vh, 460px); overflow: hidden; margin: 24px 0; }
.photo-break .pb-img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.photo-break .pb-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,6,3,.62), rgba(8,6,3,.08) 55%, rgba(8,6,3,0)); }
.photo-break .pb-text { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); width: min(92vw, 1160px); display: flex; flex-direction: column; gap: 4px;
    color: #fbf4e6; text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.photo-break .pb-text strong { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.1; }
.photo-break .pb-text span { font-size: 18px; opacity: .9; }

/* Weiches Einblenden beim Scrollen (nur mit JS, nicht bei reduzierter Bewegung) */
html.reveal-on .reveal { opacity: 0; transform: translateY(26px); filter: blur(4px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; transition-delay: var(--rd, 0s); }
html.reveal-on .reveal.in { opacity: 1; transform: none; filter: none; }
html.reveal-on .photo-break.reveal { transform: none; filter: none; }

/* Nächste freie Termine */
.next-free { display: flex; flex-direction: column; gap: 8px; }
.next-free[hidden] { display: none; }
.nf-h { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }
.nf-list { display: flex; flex-wrap: wrap; gap: 8px; }
.nf-item { display: inline-flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
    text-decoration: none; color: var(--ink); line-height: 1.25; transition: border-color .2s, transform .2s, box-shadow .2s; }
.nf-item:hover, .nf-item:focus-visible { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow); }
.nf-item .nf-d { font-weight: 700; color: var(--heading); }
.nf-item .nf-p { font-size: 14px; color: var(--muted); }
.nf-item .nf-p b { color: var(--heading); }

/* Gästestimmen */
.reviews-section[hidden] { display: none; }
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 22px; }
.review { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.review::before { content: '\201C'; position: absolute; top: -6px; right: 16px; font-family: var(--display); font-size: 80px; line-height: 1; color: var(--accent-line); opacity: .35; }
.review blockquote { margin: 0; font-size: 17px; }
.review .rv-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 14px; color: var(--muted); margin-top: auto; }
.review .rv-name { font-weight: 700; color: var(--heading); }
.review .rv-score { font-weight: 700; color: var(--eyebrow); }

/* Entriegelung als kleine Animation (Handy-Knopf gedrückt, Schloss springt auf) */
.step-unlock { position: relative; }
.unlock-demo { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; }
.unlock-demo svg { width: 112px; height: auto; overflow: visible; }
.ud-phone { fill: rgba(255,255,255,.06); stroke: var(--band-ink); stroke-width: 2.5; }
.ud-notch, .ud-home { fill: var(--band-ink); opacity: .5; }
.ud-shackle { fill: none; stroke: var(--band-ink); stroke-width: 4; stroke-linecap: round; animation: udShackle 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: right bottom; }
.ud-body { fill: var(--band-ink); animation: udBody 4.5s ease-in-out infinite; }
.ud-hole { fill: var(--band); }
.ud-btn rect { fill: var(--accent); animation: udPress 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ud-btn text { fill: var(--band); font-family: var(--body); font-size: 8.5px; font-weight: 700; animation: udPress 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ud-ripple { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; animation: udRipple 4.5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.unlock-cap { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
@keyframes udPress { 0%, 28%, 40%, 100% { transform: scale(1); } 32% { transform: scale(.88); } }
@keyframes udRipple { 0%, 30% { opacity: 0; transform: scale(.6); } 34% { opacity: .9; } 55% { opacity: 0; transform: scale(2.6); } 100% { opacity: 0; } }
@keyframes udShackle { 0%, 40% { transform: none; } 52%, 82% { transform: translateY(-7px) rotate(28deg); } 92%, 100% { transform: none; } }
@keyframes udBody { 0%, 42%, 92%, 100% { fill: var(--band-ink); } 52%, 82% { fill: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .ud-shackle, .ud-body, .ud-btn rect, .ud-btn text, .ud-ripple { animation: none; } }

/* Region-Seite */
.region-row { display: flex; flex-wrap: wrap; gap: 36px; align-items: center; margin-top: 56px; }
.region-row:nth-of-type(even) { flex-direction: row-reverse; }
.region-photo { flex: 1 1 420px; min-width: 0; overflow: hidden; border-radius: 10px; }
.region-photo img { width: 100%; height: 380px; object-fit: cover; transition: transform 1.2s ease; }
.region-row:hover .region-photo img { transform: scale(1.04); }
.region-text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 640px) {
    .stage-unit, .stage-region { height: 52vh; }
    .region-photo img { height: 240px; }
    .photo-break .pb-text { bottom: 18px; }
    .photo-break .pb-text span { font-size: 15px; }
    .site-header.over-stage .nav a { padding: 6px 2px; }
}

/* [20.10.2026] .section überschrieb den seitlichen Innenabstand von .wrap (Unterkunfts-, Region-, Rechtsseiten am Handy ohne Rand) */
.wrap.section { padding-left: 20px; padding-right: 20px; }
@media (max-width: 640px) {
    /* Kopf am Handy: Logo + Sprache + Hell/Dunkel in einer Zeile, Menü als wischbare Zeile darunter */
    .site-header .wrap { gap: 8px 10px; padding-top: 8px; padding-bottom: 6px; }
    .brand .logo { width: 40px; height: 40px; }
    .brand .wordmark { height: 30px; }
    .header-tools { gap: 6px; }
    .theme-toggle { min-height: 36px; min-width: 36px; padding: 0 8px; }
    .theme-toggle .only-dark, .theme-toggle .only-light { font-size: 0; }
    .theme-toggle svg { width: 18px; height: 18px; }
    .lang-link { min-height: 34px; padding: 0 7px; }
    .nav { flex-wrap: nowrap; overflow-x: auto; gap: 16px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
    .nav::-webkit-scrollbar { display: none; }
    .nav a { white-space: nowrap; padding: 6px 0; }
}

/* [20.10.2026] Regionskarte (src/map.js): Österreich -> Neusiedler See -> Frauenkirchen */
.map-section .lede { margin-bottom: 18px; }
/* [21.10.2026] Kartenhintergrund = Seitenhintergrund (nahtlos, ohne Rahmenschatten), Österreich hebt sich als Fläche leicht ab */
.rmap { position: relative; border-radius: 16px; overflow: hidden; background: var(--map-bg); aspect-ratio: 16 / 10; user-select: none; -webkit-user-select: none; }
.rmap-stage { position: absolute; inset: 0; }
/* Kartenränder laufen weich in den Seitenhintergrund aus (Knöpfe und Kärtchen liegen darüber) */
.rmap::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 28px 22px var(--bg); }
.rmap-loading { margin: 0; padding: 24px; color: var(--muted); }
.rmap-svg { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; font-family: var(--body); }
.rmap-svg.m-dragging { cursor: grabbing; }
.m-bg { fill: var(--map-bg); }
.m-land { fill: var(--map-land); stroke: var(--map-border); stroke-width: calc(var(--s) * 1.2px); stroke-linejoin: round;
    filter: drop-shadow(0 calc(var(--s) * 3px) calc(var(--s) * 7px) rgba(60,40,15,.22)); }
:root[data-theme="dark"] .m-land { filter: drop-shadow(0 calc(var(--s) * 3px) calc(var(--s) * 8px) rgba(0,0,0,.6)); }
/* [21.10.2026] Orte als Flächen, Hauptstraßen dezent (Nebenstraßen erst beim Hineinzoomen) */
/* [21.10.2026] Orte deutlicher, Straßennetz von Haus aus sichtbar (Hauptstraßen kräftig, Ortsstraßen beim Hineinzoomen) */
.m-towns { fill: var(--map-town); stroke: var(--map-town-line); stroke-width: calc(var(--s) * .8px); }
.m-road { fill: none; stroke: var(--map-road); stroke-linecap: round; stroke-linejoin: round; transition: opacity .35s ease; }
.m-road-r1 { stroke: var(--map-road1); stroke-width: calc(var(--s) * 2.4px); }
.m-road-r2 { stroke: var(--map-road1); stroke-width: calc(var(--s) * 1.6px); opacity: .8; }
.m-road-r3 { stroke-width: calc(var(--s) * 1.1px); }
.m-road-r4 { stroke: var(--map-road4); stroke-width: calc(var(--s) * 1.3px); opacity: 0; }
.zl-detail .m-road-r4 { opacity: 1; }
/* [21.10.2026] starker Zoom: Straßen in voller Genauigkeit und Breite, Straßennamen, schärferes Luftbild vom Ortskern */
.rmap-svg:not(.zl-street) .m-road-d1, .rmap-svg:not(.zl-street) .m-road-d2, .rmap-svg:not(.zl-street) .m-road-d3, .rmap-svg:not(.zl-street) .m-streets { opacity: 0; }
.m-streets { pointer-events: none; }
.rmap-svg.zl-street .m-road-r1, .rmap-svg.zl-street .m-road-r2, .rmap-svg.zl-street .m-road-r3, .rmap-svg.zl-street .m-road-r4 { opacity: 0; }
.zl-street .m-road-d1, .zl-street .m-road-d2, .zl-street .m-road-d3, .zl-street .m-streets { opacity: 1; }
.m-road-d1 { stroke: var(--map-road1); stroke-width: max(calc(var(--s) * 3px), .009px); }
.m-road-d2 { stroke: var(--map-road4); stroke-width: max(calc(var(--s) * 2px), .0065px); filter: drop-shadow(0 0 calc(var(--s) * 1px) rgba(0,0,0,.35)); }
.m-road-d3 { stroke: var(--map-road); stroke-width: calc(var(--s) * 1.2px); stroke-dasharray: calc(var(--s) * 4px) calc(var(--s) * 3px); }
.rmap-svg .m-street { font-size: calc(var(--s) * 11px); font-weight: 600; letter-spacing: .02em; stroke-width: calc(var(--s) * 3px); dominant-baseline: middle; }
.zl-street .m-sat { opacity: .45; }
.rmap-svg.zl-street .m-towns { opacity: .3; }
.m-sat-fk2 { opacity: 0; }
.zl-street .m-sat-fk2[href] { opacity: .45; }
.show-sat.zl-street .m-sat-fk2[href] { opacity: 1; }
.rmap-svg:not(.zl-street) .m-sat-fk2 { opacity: 0; }
/* [21.10.2026] Absturz beim stärksten Zoom: Masken, Zuschnitt und Schatten auf sehr großen Flächen (ganz Österreich,
   Satellitenbilder) muss der Browser dort riesig berechnen. Beim Hineinzoomen werden sie abgeschaltet bzw. nicht
   sichtbare Bilder ganz ausgeblendet; die weichen Ränder liegen dann ohnehin weit außerhalb des Bildausschnitts. */
.rmap-svg:not(.zl-at) .m-sat-at { display: none; }
.zl-street .m-sat-region { display: none; }
.zl-street .m-sats g, .zl-street .m-sat { mask: none; }
.zl-street .m-land, .zl-street .m-sat, .zl-street .m-road-d2 { filter: none; }
.rmap-svg:not(.zl-at) .m-eroads { display: none; }
/* beim stärksten Zoom alles, was dort ohnehin nicht zu sehen ist, ganz aus der Darstellung nehmen (nicht nur durchsichtig),
   sonst zeichnet der Browser bei jeder Bewegung riesige Flächen neu und kann abstürzen */
.rmap-svg.zl-street .m-road-r1, .rmap-svg.zl-street .m-road-r2, .rmap-svg.zl-street .m-road-r3, .rmap-svg.zl-street .m-road-r4,
.zl-street .m-land, .zl-street .m-reed, .zl-street .m-lake, .zl-street .m-waves, .zl-street .m-ferries, .zl-street .m-town-hits,
.zl-street .m-labels, .zl-street .m-cities, .zl-street .m-sats .m-sat-fk:not([href]) { display: none; }
.zl-street .m-bg { fill: var(--map-land); }
/* Ursache des Hängens beim stärksten Zoom: gestrichelte lange Linien (Bahnschwellen bis Wien, Feldwege) ergeben dort
   zehntausende winzige Striche, die bei jeder Bewegung neu gezeichnet werden. In der Nahansicht daher durchgehend zeichnen. */
.zl-close .m-rail-tie { stroke-dasharray: none; stroke-width: calc(var(--s) * .8px); opacity: .6; }
.m-road-d3 { stroke-dasharray: none !important; opacity: .7; }
.rmap-svg:not(.zl-street) .m-road-d1, .rmap-svg:not(.zl-street) .m-road-d2, .rmap-svg:not(.zl-street) .m-road-d3, .rmap-svg:not(.zl-street) .m-streets,
.rmap-svg:not(.zl-street) .m-sat-fk2 { display: none; }
.zl-at .m-road, .zl-at .m-towns { opacity: 0; }
/* Satellitenbild: ganz leicht dahinter, mit dem Schalter "Satellitenbild" voll */
.m-sat { opacity: .2; filter: saturate(.55); transition: opacity .5s ease; pointer-events: none; }
:root[data-theme="dark"] .m-sat { opacity: .3; }
.m-sat:not([href]), .zl-at .m-sat { opacity: 0; }
/* [21.10.2026] Österreich von Haus aus als Satellitenbild (auf die Landesform zugeschnitten), nur in der Österreich-Ansicht */
.zl-at .m-sat-at[href] { opacity: .9; filter: saturate(.85); }
.rmap-svg:not(.zl-at) .m-sat-at { opacity: 0; }
.show-sat .m-sat[href] { opacity: 1; filter: none; }
.rmap-svg:not(.zl-close):not(.show-sat) .m-sat-fk { opacity: 0; }
.show-sat:not(.zl-at) .m-towns { opacity: 0; }
.show-sat .m-lake, .show-sat .m-reed { opacity: .12; }
.show-sat .m-road { opacity: .55; }
.show-sat .m-road-r4 { opacity: 0; }
.rmap-svg.show-sat text { fill: #fff; stroke: rgba(0,0,0,.65); }
/* [21.10.2026] Schilfgürtel um den See (naturnaher Kartenstil) */
.m-reed { fill: none; stroke: var(--map-reed); stroke-width: calc(var(--s) * 9px); stroke-linejoin: round; opacity: .85; }
.zl-at .m-reed { opacity: 0; }
.m-lake { fill: var(--map-water); stroke: var(--map-water-line); stroke-width: calc(var(--s) * 1px); }
.m-route { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s ease; transition-delay: calc(var(--i) * 140ms); }
.m-route-main { stroke: var(--map-main); stroke-width: calc(var(--s) * 3px); }
.m-route-other { stroke: var(--map-other); stroke-width: calc(var(--s) * 1.8px); opacity: .9; }
.m-drawn .m-route { stroke-dashoffset: 0; }
/* [21.10.2026] angetippter Radweg leuchtet in eigener Farbe, die übrigen treten zurück */
.m-route-focus .m-route { opacity: .28; }
.m-route-focus .m-route.m-sel { opacity: 1; stroke: var(--rc); stroke-width: calc(var(--s) * 4.5px); filter: drop-shadow(0 0 calc(var(--s) * 4px) var(--rc)); }
.rmap-rc { display: inline-block; width: 14px; height: 6px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.m-hit { fill: none; stroke: transparent; stroke-width: calc(var(--s) * 12px); pointer-events: stroke; cursor: pointer; }
.m-ferry { fill: none; stroke: var(--map-ferry); stroke-width: calc(var(--s) * 2px); stroke-dasharray: calc(var(--s) * 5px) calc(var(--s) * 4px); opacity: 0; transition: opacity 1s ease 1.6s; }
.m-drawn .m-ferry { opacity: 1; }
.rmap-svg text { fill: var(--map-label); paint-order: stroke; stroke: var(--map-halo); stroke-width: 3px; stroke-linejoin: round; font-size: 12px; font-weight: 600; pointer-events: none; }
.m-area text { font-family: var(--display); font-style: italic; font-size: 17px; font-weight: 400; letter-spacing: .06em; fill: var(--map-area); }
.m-area-v_region text { fill: var(--map-water-line); font-size: 15px; }
.m-city circle { fill: var(--map-label); }
.m-city text { font-size: 13px; }
.m-place circle { fill: var(--map-area); stroke: var(--map-halo); stroke-width: 1.2px; }
.m-place text { font-size: 13px; font-weight: 700; }
.m-place-t2 text { font-size: 11.5px; font-weight: 600; }
/* Sichtbarkeit je Zoomstufe */
.m-area, .m-city, .m-place, .m-poi { transition: opacity .35s ease; }
.zl-at .m-area-seewinkel, .zl-at .m-area-np, .zl-at .m-area-v_region, .zl-at .m-place, .zl-at .m-area-c_sk, .zl-at .m-area-c_hu { opacity: 0; pointer-events: none; }
.rmap-svg:not(.zl-at) .m-area-c_at { opacity: 0; }
/* [21.10.2026] Anflug: Nachbarländer und Städte rund ums Nordburgenland erscheinen vor dem Hineinzoomen */
.m-area-p_hu, .m-area-p_sk, .m-area-p_cz { opacity: 0; }
.zl-at.m-preview .m-area-p_hu, .zl-at.m-preview .m-area-p_sk, .zl-at.m-preview .m-area-p_cz { opacity: 1; transition-duration: .8s; }
.zl-at .m-city-near { opacity: 0; }
.zl-at.m-preview .m-city-near { opacity: 1; transition-duration: .8s; }
.rmap-svg:not(.zl-wide) .m-city { opacity: 0; }
/* [21.10.2026] größere Orte auch im Ausflugs-Ausschnitt (zwischen Wien und dem Nordburgenland) */
.zl-at .m-place { opacity: 0; }
.m-place-t2 { opacity: 0; }
.zl-detail .m-place-t2 { opacity: 1; }
.zl-close .m-area-np, .zl-close .m-area-c_hu, .zl-close .m-area-c_sk { opacity: 0; }
/* Punkte */
.m-poi { cursor: pointer; outline: none; }
.m-pin-bg { stroke: #fff; stroke-width: 1.6px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.m-pin-ic { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-cat-home .m-pin-bg { fill: #002859; stroke: var(--map-hl); stroke-width: 2.2px; }
/* [21.10.2026] Unsere Unterkünfte mit Logo "S" und Haus, St. Martins Therme mit ihrem Logo */
.m-pin-s { fill: #fff; }
.m-pin-house circle { fill: var(--map-hl); stroke: #002859; stroke-width: 1.4px; }
.m-pin-house-ic { fill: none; stroke: #002859; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.m-pin-logo { fill: #1f2a33; }
.m-cat-market .m-pin-bg { fill: #3f7d4f; }
.m-cat-shop .m-pin-bg { fill: #6a5a8a; }
/* [21.10.2026] Gesundheit: Unfallambulanz, Ärzte, Apotheke, Optiker, Flugrettung (erst beim Hineinzoomen) */
.m-cat-health .m-pin-bg { fill: #c0392b; }
.rmap-layer-health .rmap-sw { background: #c0392b; }
.rmap-svg:not(.zl-detail) .m-cat-health { opacity: 0 !important; pointer-events: none !important; }
.hide-health .m-cat-health { display: none; }
/* immer sichtbare Punkte (Outlet, Carnuntum, Flughafen, Brücke von Andau), auch bei ausgeschalteter Ebene */
.rmap-svg .m-poi.m-always { display: inline !important; }
.m-pins-on .m-poi.m-always:not(.m-f2) { opacity: 1; pointer-events: auto; }
/* Autobahn-Nummern */
.m-shields { transition: opacity .35s ease; }
.zl-at .m-shields, .zl-street .m-shields { display: none; }
.m-shield rect { fill: #2c5aa0; stroke: #fff; stroke-width: 1.2px; }
.m-shield-at rect { fill: #c8102e; }
.rmap-svg .m-shield text { fill: #fff; stroke: none; font-size: 10px; font-weight: 700; }
/* Sportplätze mit Spiel, nur in der Nahansicht */
.m-sport { display: none; }
.zl-street .m-sport { display: inline; }
.m-pitch { fill: #3f8a3a; stroke: #fff; stroke-width: 1.4px; }
.m-pitch-line, .m-court-line { fill: none; stroke: rgba(255,255,255,.85); stroke-width: .9px; }
.m-court { fill: #b5562e; stroke: #fff; stroke-width: 1.4px; }
.m-player { stroke: #222; stroke-width: .7px; }
.m-ball { fill: #fff; stroke: #222; stroke-width: .5px; }
.m-ball-t { fill: #d9f24a; }
/* Taxi und Hubschrauber */
.m-taxi-sign { fill: #222; stroke: #f2c230; stroke-width: .6px; }
.m-heli-halo { fill: rgba(255,255,255,.9); stroke: rgba(255,255,255,.9); stroke-width: 3px; stroke-linejoin: round; }
.m-heli-tail { fill: none; stroke: #c8102e; stroke-width: 1.6px; stroke-linecap: round; }
.m-heli-body { fill: #f2c230; stroke: #8a6a12; stroke-width: .6px; }
.m-heli-glass { fill: rgba(30,45,60,.75); }
.m-heli-rotor path { fill: none; stroke: #333; stroke-width: 1.1px; stroke-linecap: round; opacity: .8; }
.m-spin-fast { animation-duration: .35s; }
.m-cat-atm .m-pin-bg { fill: #1f6f8b; }
.m-svc .m-pin-bg { stroke-width: 1.2px; }
.m-svc { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.m-pins-on.zl-detail .m-svc { opacity: 1; pointer-events: auto; }
.m-rider { opacity: 0; pointer-events: auto; cursor: default; }
/* [21.10.2026] Radfahrer als kleine Fahrrad-Figur, Räder und Kurbel drehen sich */
.m-bike-hit { fill: transparent; }
.m-bike path, .m-bike circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-bike-halo path, .m-bike-halo circle { stroke: rgba(255,255,255,.92); stroke-width: 3.4px; }
.m-bike-halo .m-head { fill: rgba(255,255,255,.92); }
.m-bike-body path, .m-bike-body circle { stroke: #26323d; stroke-width: 1.3px; }
.m-bike-body .m-wheel path { stroke-width: .5px; }
.m-bike-body .m-torso { stroke-width: 2.4px; }
.m-bike-body .m-head { fill: #f0c9a0; stroke-width: 1px; }
/* [21.10.2026] Autos, Zug, Fußgänger; Bahnstrecke */
.m-car-halo, .m-train-halo { fill: rgba(255,255,255,.9); }
.m-car-body { stroke: rgba(0,0,0,.45); stroke-width: .5px; }
.m-car-glass { fill: rgba(30,45,60,.75); }
.m-train-body { fill: #b8282e; stroke: rgba(0,0,0,.4); stroke-width: .5px; }
.m-train-loco .m-train-body { fill: #8f1d22; }
.m-train-win { stroke: #fff; stroke-width: 1.3px; stroke-dasharray: 2 1.2; fill: none; }
.m-rail { fill: none; stroke: #5b5f66; stroke-width: calc(var(--s) * 2.6px); stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.m-rail-tie { fill: none; stroke: #fff; stroke-width: calc(var(--s) * 1.2px); stroke-dasharray: calc(var(--s) * 5px) calc(var(--s) * 5px); opacity: .85; }
:root[data-theme="dark"] .m-rail { stroke: #9aa3ad; }
:root[data-theme="dark"] .m-rail-tie { stroke: #2a2f35; }
/* [21.10.2026] Bahnstrecke Wien – Pamhagen – Fertőszentmiklós hervorheben */
.m-rail-hl { fill: none; stroke: #b8282e; stroke-width: calc(var(--s) * 4.5px); stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s ease; pointer-events: none;
    filter: drop-shadow(0 0 calc(var(--s) * 4px) rgba(184,40,46,.7)); }
.m-rail-hl.m-hov, .m-rail-hl.m-sel { opacity: .9; }
/* [21.10.2026] Orte, Hauptstraßen und See leuchten beim Darüberfahren auf */
.m-town-hit { pointer-events: fill; transition: fill .2s ease; }
.m-town-hit.m-hov { fill: color-mix(in srgb, var(--map-hl) 55%, transparent); }
.m-road-hit { fill: none; stroke: transparent; stroke-width: calc(var(--s) * 9px); stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; transition: stroke .2s ease; }
.m-road-hit.m-hov { stroke: color-mix(in srgb, var(--map-road1) 75%, transparent); }
.zl-at .m-town-hits, .zl-at .m-road-hits, .zl-street .m-road-hits { display: none; }
.m-lake { transition: fill .2s ease; }
/* [21.10.2026] Europastraßen nur in der großen Übersicht */
.m-eroads { transition: opacity .35s ease; }
.rmap-svg:not(.zl-at) .m-eroads { opacity: 0; pointer-events: none; }
.m-eroad { fill: none; stroke: #e7b54a; stroke-width: calc(var(--s) * 2.2px); stroke-linecap: round; stroke-linejoin: round; opacity: .9;
    filter: drop-shadow(0 0 calc(var(--s) * 1px) rgba(0,0,0,.5)); pointer-events: stroke; }
.m-eroad.m-hov { stroke: #ffd36b; stroke-width: calc(var(--s) * 4px); }
.m-eshield rect { fill: #1f7a3a; stroke: #fff; stroke-width: 1.2px; }
.rmap-svg .m-eshield text { fill: #fff; stroke: none; font-size: 10px; font-weight: 700; }
.m-lake.m-hov { fill: color-mix(in srgb, var(--map-water) 80%, #fff); }
.rmap-rc-rail { background: #b8282e; }
.m-bike-body .m-leg, .m-bike-body .m-arm { stroke-width: 2px; }
.m-walker .m-bike-body .m-torso { stroke-width: 3.6px; }
.m-walker .m-bike-halo .m-torso { stroke-width: 6px; }
.m-walker .m-bike-halo .m-leg { stroke-width: 4.4px; }
.m-mv-near { visibility: hidden; }
.zl-close .m-mv-near { visibility: visible; }
.m-idle .m-spin { animation-play-state: paused; }
.m-spin { transform-box: fill-box; transform-origin: center; animation: m-spin .7s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }
/* [21.10.2026] der Zug fährt in jeder Zoomstufe */
.zl-at .m-rider:not(.m-mv-train) { visibility: hidden; }
.zl-street .m-mv-heli { visibility: visible; }
/* [21.10.2026] Wellen auf dem See, drehende Windräder */
.m-wave path { fill: none; stroke: #fff; stroke-width: 1.8px; stroke-linecap: round; opacity: .8; animation: m-wave 4s ease-in-out infinite; }
:root[data-theme="dark"] .m-wave path { stroke: #8fbde0; }
@keyframes m-wave { 0%, 100% { transform: translateX(-3px); opacity: .35; } 50% { transform: translateX(3px); opacity: 1; } }
.m-wind-mast { fill: #fff; stroke: rgba(0,0,0,.35); stroke-width: .4px; }
.m-wind g g { fill: #fff; stroke: rgba(0,0,0,.35); stroke-width: .4px; }
.zl-at .m-waves, .zl-at .m-winds { opacity: 0; }
.zl-close .m-winds { opacity: .6; }
.show-sat .m-wave path { stroke: #cfe6f7; }
/* Knöpfe unter der Karte leuchten nacheinander, damit man sieht, dass sie sich antippen lassen */
.rmap-layer { transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; }
.rmap-layer.rmap-glow { border-color: var(--accent-line); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-line) 35%, transparent), 0 0 16px color-mix(in srgb, var(--accent-line) 55%, transparent); transform: translateY(-1px); }
.m-route.m-hov { stroke-width: calc(var(--s) * 4px); opacity: 1; filter: drop-shadow(0 0 calc(var(--s) * 3px) var(--rc)); stroke: var(--rc); }
.rmap-tip { position: absolute; z-index: 4; pointer-events: none; max-width: 260px; padding: 5px 10px; border-radius: 8px; font: 700 13px/1.3 var(--body);
    color: var(--ink); background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.rmap-hint { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
/* [21.10.2026] Hinweis am Handy: Karte mit zwei Fingern bewegen */
.rmap-touchhint { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center;
    font: 700 17px/1.35 var(--body); color: #fff; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; border-radius: inherit; }
.rmap-touchhint.on { opacity: 1; }
.m-cat-sight .m-pin-bg { fill: #8a3b2e; }
.m-cat-family .m-pin-bg { fill: #2d7d8c; }
.m-cat-nature .m-pin-bg { fill: #4f7a3a; }
.m-cat-wine .m-pin-bg { fill: #7b2a4d; }
.m-cat-heuriger .m-pin-bg { fill: #a0662a; }
.m-cat-food .m-pin-bg { fill: #5a5f6e; }
.m-cat-trip .m-pin-bg { fill: #2c4f8a; }
.m-poi .m-pin { transition: transform .18s ease; }
.m-poi:hover .m-pin, .m-poi:focus-visible .m-pin, .m-poi.sel .m-pin { transform: scale(1.35); }
.m-poi:hover .m-pin-bg { stroke: var(--map-hl); stroke-width: 2.4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.m-poi.sel .m-pin-bg, .m-poi:focus-visible .m-pin-bg { stroke: var(--map-hl); stroke-width: 2.6px; }
.m-poi:not(.m-cat-home) { opacity: 0; pointer-events: none; }
.m-pins-on .m-poi.m-f { opacity: 1; pointer-events: auto; transition-delay: calc(var(--o) * 45ms); }
.m-pins-on .m-poi.m-f2 { opacity: 0; pointer-events: none; }
.m-pins-on.zl-detail .m-poi { opacity: 1; pointer-events: auto; }
.zl-at .m-poi:not(.m-cat-home):not(.m-cat-trip) { opacity: 0 !important; pointer-events: none !important; }
.rmap-svg:not(.zl-wide) .m-cat-trip:not(.m-always) { opacity: 0 !important; pointer-events: none !important; }
.m-home-label text { font-family: var(--display); font-size: 15px; font-weight: 600; }
.m-pulse { fill: none; stroke: var(--map-hl); stroke-width: 2px; transform-box: fill-box; transform-origin: center; animation: m-pulse 2.4s ease-out infinite; }
@keyframes m-pulse { from { transform: scale(.8); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.zl-close .m-home-label text { opacity: 0; }
/* Ebenen ausblenden */
/* [21.10.2026] Radwege reagieren auch blass eingeblendet auf die Maus */
.hide-routes .m-ferries { display: none; }
/* [21.10.2026] ausgeschaltete Radwege bleiben ganz leicht sichtbar, damit man sieht, wo die Radfahrer fahren */
.hide-routes .m-routes { opacity: .45; pointer-events: none; }
.hide-sight .m-cat-sight:not([data-id="andau_bruecke"]), .hide-family .m-cat-family:not([data-id="therme"]), .hide-nature .m-cat-nature, .hide-wine .m-cat-wine,
.hide-heuriger .m-cat-heuriger, .hide-food .m-cat-food, .hide-trip .m-cat-trip, .hide-places .m-place:not(.m-keep),
.hide-places .m-area:not(.m-area-v_region):not([class*="m-area-c_"]):not([class*="m-area-p_"]),
.hide-market .m-cat-market, .hide-shop .m-cat-shop, .hide-atm .m-cat-atm { display: none; }
/* Bedienung */
.rmap-views { position: absolute; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; max-width: calc(100% - 80px); }
.rmap-view, .rmap-zoom button { font: 700 13px var(--body); color: var(--ink); background: color-mix(in srgb, var(--card) 86%, transparent); border: 1px solid var(--line);
    border-radius: 999px; padding: 7px 12px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rmap-view:hover, .rmap-zoom button:hover { border-color: var(--accent-line); }
.rmap-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.rmap-zoom button { width: 38px; height: 38px; padding: 0; font-size: 19px; display: flex; align-items: center; justify-content: center; }
.rmap-card { position: absolute; left: 12px; bottom: 12px; z-index: 3; max-width: min(340px, calc(100% - 76px)); background: color-mix(in srgb, var(--card) 94%, transparent);
    border: 1px solid var(--line); border-radius: 14px; padding: 14px 40px 14px 16px; box-shadow: var(--shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rmap-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.rmap-card .rmap-n { display: block; font-family: var(--display); font-size: 18px; color: var(--heading); line-height: 1.25; }
.rmap-card .rmap-dist { color: var(--ink); font-weight: 600; }
.rmap-card .rmap-go { display: inline-block; margin-top: 8px; font-weight: 700; font-size: 14px; }
.rmap-x { position: absolute; right: 8px; top: 6px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 6px; }
.rmap-legend { margin-top: 14px; }
.rmap-layers { display: flex; flex-wrap: wrap; gap: 8px; }
.rmap-layer { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--card); }
.rmap-layer input { position: absolute; opacity: 0; pointer-events: none; }
.rmap-sw { width: 14px; height: 14px; border-radius: 50%; background: var(--muted); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.rmap-layer-routes .rmap-sw { background: var(--map-main); border-radius: 4px; }
.rmap-layer-sight .rmap-sw { background: #8a3b2e; } .rmap-layer-family .rmap-sw { background: #2d7d8c; } .rmap-layer-nature .rmap-sw { background: #4f7a3a; }
.rmap-layer-wine .rmap-sw { background: #7b2a4d; } .rmap-layer-heuriger .rmap-sw { background: #a0662a; } .rmap-layer-food .rmap-sw { background: #5a5f6e; }
.rmap-layer-trip .rmap-sw { background: #2c4f8a; } .rmap-layer-places .rmap-sw { background: var(--map-area); }
.rmap-layer-market .rmap-sw { background: #3f7d4f; } .rmap-layer-shop .rmap-sw { background: #6a5a8a; } .rmap-layer-atm .rmap-sw { background: #1f6f8b; }
.rmap-layer-sat .rmap-sw { background: linear-gradient(135deg, #3d5a2a, #6f8f4f 50%, #2e5f86); border-radius: 4px; }
.rmap-layer:has(input:not(:checked)) { opacity: .5; }
.rmap-layer:has(input:focus-visible) { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.rmap-keys { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.rk::before { content: ''; display: inline-block; vertical-align: middle; margin-right: 7px; }
.rk-home::before { width: 12px; height: 12px; border-radius: 50%; background: #002859; box-shadow: 0 0 0 2px var(--map-hl); }
.rk-main::before { width: 22px; height: 4px; border-radius: 2px; background: var(--map-main); }
.rk-other::before { width: 22px; height: 3px; border-radius: 2px; background: var(--map-other); }
.rk-ferry::before { width: 22px; height: 0; border-top: 2px dashed var(--map-ferry); }
.rmap-attr { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
    .rmap { aspect-ratio: 4 / 5; border-radius: 12px; }
    .rmap-view { padding: 6px 10px; font-size: 12px; }
    .rmap-card { left: 8px; right: 8px; bottom: 8px; max-width: none; }
    .rmap-layer { font-size: 13px; padding: 5px 10px 5px 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .m-route, .m-ferry, .m-poi, .m-area, .m-city, .m-place { transition: none !important; }
    .m-pulse { animation: none; opacity: 0; }
    .m-spin { animation: none; }
}

.plain-list { list-style: none; margin: 0; padding: 0; }