/* Hallmark · shape: Photographic (draw dealt Catalogue, swapped: the page is a place, not an inventory) · genre: editorial · theme: Hedgerow (deal 1/3, seed regionale-homepage-eine-labestation-4585·58056917·2026-11-14·r0) · job: visit · draw: 141296
 * hero: Ledge (full-bleed evening photograph, the head resting at its base) · nav: edge-aligned (draw dealt search-led, swapped: a one-page site has nothing to search) · footer: colophon block · imagery: photographs, the owner's own 8, natural · signature: the copper pavilion lit at dusk, full-bleed on the first screen · hedgerow: hedge, signal swapped to the logo's copper
 * axes: dark/high-contrast-serif/chromatic-copper · posture: drenched · contrast: pass · fold: pass · copy: verbatim (story text approved by the owner) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a place page could drift into brochure tone; the sights are set as a field guide with real bike distances and the real course of the Mur instead of adjectives */
/* Hallmark · waive 83 · images/platte.webp is a 368px tiled grain texture on the anthracite bands, taken from the owner's facade panel · the linter counts the tiled background as photographs */
/* Hallmark · waive 3 · ul.signs reproduces the three real roadside panels at the driveway, icon above heading as printed on them · the tiles are a depiction of existing signs, not a feature grid */
/* Hallmark · waive 77 · the Wegweiser section carries three sign panels 540px tall · the linter does not count linked panels without images as mass */
/* Hallmark · waive 77 · the Unterwegs section on route pages carries the sticky route map, 600px tall · the linter does not count an inline SVG map as mass */
/* Rebrand 14.11.2026 (Wunsch des Inhabers): Palette Kupfer, Basalt, Kies. Heller Grund, Anthrazit-Bänder mit Steinstruktur, Kupfer als Akzent; die Farben stehen in tokens.css */
@import url("./fonts.css?v=105094af");
@import url("./tokens.css?v=bf16e8c7");
@import url("./base.css?v=37cb67b8");

/* ---------- Slots holding a <picture> ---------- */
[data-slot] > picture { position: absolute; inset: 0; z-index: 1; }
[data-slot] > picture > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.08) brightness(0.92); }

/* ---------- Chrome ---------- */
.site-nav { position: absolute; inset: 0 0 auto 0; z-index: var(--z-sticky-nav); }
.site-nav .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.wordmark { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); font-weight: 500; }
.nav-links a { color: var(--color-ink); text-decoration-color: transparent; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.nav-links a:hover { text-decoration-color: var(--color-accent); }
.menu { display: none; position: relative; font-size: var(--text-sm); font-weight: 500; }
.menu summary { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding-inline: var(--space-md); border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill); color: var(--color-ink); cursor: pointer; list-style: none; user-select: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.menu__icon { width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
.menu__panel { position: absolute; top: calc(100% + var(--space-xs)); right: 0; width: min(18rem, calc(100vw - 2 * var(--gutter))); padding: var(--space-sm) var(--space-lg) var(--space-md); background: var(--color-paper-2) var(--stone); border: var(--rule-hair) solid var(--color-rule); }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list a { display: flex; align-items: center; min-height: 48px; color: var(--color-ink); font-size: var(--text-md); text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule); }
.menu__list a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.menu__langs { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin-top: var(--space-xs); }
.menu__langs a { border-bottom: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 60rem) { .nav-links { display: none; } .menu { display: block; } .lang-switch { margin-left: auto; } .lang-switch a { min-width: 44px; min-height: 44px; } }
.site-nav .container { justify-content: flex-start; }
.nav-links { margin-left: auto; }
.lang-switch { display: flex; align-items: center; gap: var(--space-3xs); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); font-weight: 500; }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; border-radius: var(--radius-pill); color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.lang-switch a:hover { color: var(--color-ink); }
.lang-switch a[aria-current] { color: var(--color-accent); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; }
.lang-switch a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 30rem) { .lang-switch { display: none; } .menu { margin-left: auto; } }

/* ---------- Controls ---------- */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); font-size: var(--text-sm); font-weight: 700; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--primary:active { background: var(--color-accent); }
.btn--secondary { background: transparent; color: var(--color-accent); }
.btn--secondary:hover { color: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--small { min-height: 40px; padding: var(--space-xs) var(--space-md); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
a:not(.btn):not(.wordmark) { text-decoration-color: var(--color-accent); }

/* ---------- Hero: Ledge ---------- */
.hero { position: relative; min-height: 100dvh; display: grid; align-items: end; background: var(--color-paper-2); color: var(--color-ink); }
.hero { overflow: hidden; }
.hero__backdrop { position: absolute; inset: 0; }
.hero__backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 30%; filter: blur(22px) saturate(0.95) brightness(0.85); transform: scale(1.12); }
.hero__photo { position: absolute; inset: 0 0 0 auto; width: min(100%, calc(100dvh * 1.395)); background: transparent; -webkit-mask-image: linear-gradient(to right, transparent 0%, var(--color-paper) 14%); mask-image: linear-gradient(to right, transparent 0%, var(--color-paper) 14%); }
.hero__photo img { object-position: 50% 10.6%; }
.hero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, color-mix(in oklab, var(--color-paper) 92%, transparent) 0%, color-mix(in oklab, var(--color-paper) 55%, transparent) 38%, transparent 66%), linear-gradient(to bottom, color-mix(in oklab, var(--color-paper-2) 88%, transparent) 0%, color-mix(in oklab, var(--color-paper-2) 55%, transparent) 9%, transparent 24%); }
.hero__content { position: relative; z-index: 3; padding-block: var(--space-4xl) var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; }
.hero h1 { font-size: var(--text-display); max-width: 16ch; color: var(--color-ink); }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink); max-width: 44ch; }
.hero .actions { margin-top: var(--space-xl); }
.hero__way { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.hero__side { justify-self: end; display: grid; gap: var(--space-xl); justify-items: end; }
.slogan { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.slogan li { display: grid; justify-items: center; gap: var(--space-xs); font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); }
.slogan__icon { width: 64px; height: 40px; background-color: var(--color-accent); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.slogan__icon--regional { --icon: url("images/icons/regional.png"); }
.slogan__icon--radeln { --icon: url("images/icons/radeln.png"); }
.slogan__icon--relaxen { --icon: url("images/icons/relaxen.png"); }
.hero__facts { margin: 0; display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); text-align: right; }
.hero__facts dt { color: var(--color-muted); }
.hero__facts dd { margin: 0 0 var(--space-sm); color: var(--color-ink); }
@media (max-width: 40rem) { .slogan { gap: var(--space-md); } .slogan li { font-size: var(--text-md); } .slogan__icon { width: 52px; height: 32px; } .hero { display: block; min-height: 0; } .hero__backdrop { display: none; } .hero__photo { position: relative; inset: auto; width: 100%; aspect-ratio: 968 / 694; -webkit-mask-image: linear-gradient(to bottom, var(--color-paper) 72%, transparent 100%); mask-image: linear-gradient(to bottom, var(--color-paper) 72%, transparent 100%); } .hero__scrim { background: linear-gradient(to bottom, color-mix(in oklab, var(--color-paper) 70%, transparent) 0%, transparent 72px); } .hero__content { padding-block: 0 var(--space-2xl); margin-top: calc(-1 * var(--space-xl)); } }
@media (max-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .hero__side { justify-self: start; justify-items: start; } .hero__facts { text-align: left; } }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-gap) 0; }
.section--last { padding-bottom: var(--section-gap); }
.head-block { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head-block .lead { color: var(--color-ink-2); }

/* Story: split, text 5 / photo 7 */
.story__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.story__text { display: grid; gap: var(--space-lg); color: var(--color-ink-2); }
.story__text p { font-size: var(--text-md); line-height: 1.65; }
.story__text strong { color: var(--color-ink); font-weight: 500; }
.slide { margin: 0; display: grid; gap: var(--space-sm); scroll-snap-align: start; }
.slide__frame { aspect-ratio: 4 / 3; }
.slide figcaption { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .story__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* Slider: a scroll-snap track, buttons added by script (no autoplay) */
.slider { min-width: 0; }
.slider__track { display: grid; grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.slider--story .slider__track { grid-auto-columns: 100%; gap: var(--gap-columns); }
.slider__track:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.slider--spots .slider__track { grid-auto-columns: calc((100% - 2 * var(--gap-columns)) / 3); gap: var(--gap-columns); padding-bottom: var(--space-sm); }
.spot figcaption { display: grid; gap: var(--space-2xs); align-content: start; }
.spot h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; color: var(--color-ink); }
.spot figcaption p { margin: 0; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-2); }
.spot figcaption p.spot__credit { font-size: var(--text-xs); color: var(--color-muted); }
.spot__credit a { color: inherit; }
.spots__note { margin: var(--space-md) 0 0; font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 40rem) { .slider--spots .slider__track { grid-auto-columns: 82%; } }
.slider__controls { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
.slider__btn { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill); background: transparent; color: var(--color-accent); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.slider__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slider__btn:hover:not(:disabled) { background: var(--color-accent); color: var(--color-accent-ink); }
.slider__btn:active:not(:disabled) { background: var(--color-accent-2); }
.slider__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.slider__btn:disabled { border-color: var(--color-rule); color: var(--color-muted); background: transparent; cursor: not-allowed; }
.slider__status { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: center; }

/* Wine: cream band, field-guide index */
.band--cream { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-paper-2) var(--stone); color: var(--color-ink); }
.band--cream .lead { color: var(--color-ink); }
.wine__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 17fr); gap: var(--space-2xl); align-items: center; }
.partners { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr) minmax(0, 8fr); gap: clamp(var(--space-lg), 4vw, var(--space-2xl)); }
.partners { align-items: end; }
.partners li { display: grid; gap: var(--space-md); justify-items: center; text-align: center; }
.partner__logo { width: 100%; height: 240px; display: grid; place-items: center; background: transparent; }
.partners .partner__logo > img { object-fit: contain; object-position: 50% 100%; filter: none; padding: 0; outline: 0; }
.partner__stand-in { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; text-align: center; color: var(--color-ink); }
.partner__place { font-size: var(--text-sm); color: var(--color-ink-2); display: grid; gap: var(--space-3xs); }
.partner__place a { font-weight: 500; }
@media (max-width: 60rem) { .wine__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }
@media (max-width: 40rem) { .partners { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } .partner__logo { height: 180px; } }

/* Art: rail of portrait frames */
.art__rail { grid-auto-columns: minmax(280px, 30%); gap: var(--gap-columns); padding-bottom: var(--space-sm); }
.art__item { scroll-snap-align: start; margin: 0; display: grid; gap: var(--space-sm); }
.art__item [data-slot] { aspect-ratio: 4 / 5; }
.art__item--wide { grid-column: span 2; }
.art__item--wide [data-slot] { aspect-ratio: 8 / 5; }
.art__item figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.art__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.art__foot > p { font-size: var(--text-md); line-height: 1.65; color: var(--color-ink-2); max-width: 60ch; }
.art__ask { justify-self: end; display: grid; gap: var(--space-md); justify-items: start; }
.art__ask p { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.25; color: var(--color-ink); }
@media (max-width: 60rem) { .art__foot { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .art__ask { justify-self: start; } }
@media (max-width: 40rem) { .art__rail { grid-auto-columns: 78%; } .art__item--wide { grid-column: span 1; } .art__item--wide [data-slot] { aspect-ratio: 4 / 5; } }
.photo img, [data-slot] > img { outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }

/* Bike & Spa: deep band, text 5 / schematic loop 7 */
.band--deep { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-paper-2) var(--stone); color: var(--color-ink); }
.bikespa__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.bikespa__text { display: grid; gap: var(--space-lg); }
.bikespa__text h2 { max-width: 14ch; }
.bikespa__text .lead { color: var(--color-ink); }
.bikespa__text p:not(.lead) { color: var(--color-ink-2); max-width: 54ch; }
.bikespa__text .actions { margin-top: var(--space-sm); }
.bikespa__map { margin: 0; justify-self: center; width: 100%; max-width: 620px; }
.bikespa__map svg { width: 100%; height: auto; }
.bikespa__map figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.bs-land { stroke: none; }
.bs-land--base { fill: var(--color-paper); }
.bs-land--si { fill: color-mix(in oklab, var(--color-ink) 13%, var(--color-paper)); }
.bs-land--hu { fill: color-mix(in oklab, var(--color-accent) 22%, var(--color-paper)); }
.bs-border { fill: none; stroke: var(--color-ink-2); stroke-width: 2; stroke-dasharray: 7 7; stroke-linecap: round; opacity: 0.6; }
.bs-route { fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linejoin: round; }
.bs-stop { fill: var(--color-paper); stroke: var(--color-ink-2); stroke-width: 2.5; }
.bs-home { fill: var(--color-accent); }
.bs-home-ring { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.bikespa__map text { font-family: var(--font-body); font-size: 20px; fill: var(--color-ink-2); }
.bikespa__map text, .ride .map text { paint-order: stroke; stroke: var(--color-paper-2); stroke-width: 7px; stroke-linejoin: round; }
.bikespa__map text { stroke: var(--color-paper); stroke-width: 5px; }
.bikespa__map .bs-home-label { font-family: var(--font-display); font-size: 28px; fill: var(--color-ink); }
.bikespa__map .bs-country { font-size: 18px; fill: var(--color-muted); }
@media (max-width: 60rem) { .bikespa__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } .bikespa__map text { font-size: 26px; } .bikespa__map .bs-home-label { font-size: 34px; } }

/* Surroundings: map 5 / index 7 */
.ride { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.ride .map { position: sticky; top: var(--space-xl); }
.ride .map text { font-size: 24px; }
.ride .map .label-home { font-size: 36px; }
.ride .map .label-country { font-size: 20px; }
.ride .route__hit { fill: none; stroke: transparent; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; cursor: pointer; }
.ride .route__line { fill: none; stroke: var(--color-accent); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; transition: opacity var(--dur-short) var(--ease-out); pointer-events: none; }
.ride .start circle { fill: var(--color-paper-2); stroke: var(--color-accent); stroke-width: 3; }
.ride .stop circle { fill: var(--color-accent); }
.ride .start, .ride .stop { transition: opacity var(--dur-short) var(--ease-out); }
.ride .start text { font-weight: 700; fill: var(--color-ink); }
.ride .home-ring { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.ride:not([data-active='']):is([data-active]) .route:not(.is-active) .route__line { opacity: 0.14; }
.ride:not([data-active='']):is([data-active]) .start:not(.is-active), .ride:not([data-active='']):is([data-active]) .stop:not(.is-active) { opacity: 0.3; }
.ride .route.is-active .route__line { opacity: 1; }
.ride__list > li { transition: opacity var(--dur-short) var(--ease-out); }
.ride__list > li.is-active h3 { color: var(--color-accent); }
.ride:not([data-active='']):is([data-active]) .ride__list > li:not(.is-active) { opacity: 0.7; }
.ride .ride__list > li { display: block; padding-block: 0; }
.ride__list summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-xs) var(--space-md); min-height: 64px; padding-block: var(--space-md); cursor: pointer; list-style: none; }
.ride__list summary::-webkit-details-marker { display: none; }
.ride__list summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ride__list summary h3 { font-size: var(--text-xl); }
.ride__list details[open] summary h3 { color: var(--color-accent); }
.ride__toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill); color: var(--color-accent); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.ride__toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ride__list summary:hover .ride__toggle { background: var(--color-accent); color: var(--color-accent-ink); }
.ride__list details[open] .ride__toggle { transform: rotate(180deg); background: var(--color-accent); color: var(--color-accent-ink); }
.ride__body { display: grid; gap: var(--space-sm); padding-bottom: var(--space-lg); }
@media (max-width: 60rem) { .ride { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .ride .map { position: static; } .ride .map text { font-size: 30px; } .ride .map .label-home { font-size: 40px; } }
.map { margin: 0; background: var(--color-paper-2); padding: var(--space-xl); }
.map svg { width: 100%; height: auto; }
.map .river { fill: none; stroke: var(--color-rule); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.map .place { fill: var(--color-ink-2); }
.map .place--home { fill: var(--color-accent); }
.map .ring { fill: none; stroke: var(--color-rule); stroke-width: 1.2; stroke-dasharray: 3 5; }
.map text { font-family: var(--font-body); font-size: 15px; fill: var(--color-ink-2); }
.map .label-home { font-family: var(--font-display); font-size: 22px; fill: var(--color-ink); }
.map .label-country { font-size: 14px; fill: var(--color-muted); }
.map figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.index { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--color-accent); }
.index > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-xs) var(--space-3xl); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.index h3 { font-size: var(--text-2xl); }
.index .distance { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.index p { color: var(--color-ink-2); max-width: 60ch; }
.around__source { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .index > li { grid-template-columns: minmax(0, 1fr) auto; } .index p { grid-column: 1 / -1; } .map { padding: var(--space-md); } .map text { font-size: 22px; } .map .label-home { font-size: 30px; } }

/* Visit: band with the way in and the hours */
/* Wegweiser: die Fassadentafeln an der Zufahrt, nachgebaut (Anthrazit, kupferfarbene Folie) */
.signs__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: center; }
.signs__grid .head-block { margin-bottom: 0; }
.signs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.sign { position: relative; display: flex; flex-direction: column; gap: var(--space-md); height: 100%; min-height: 34rem; padding: var(--space-xl) var(--space-lg) var(--space-lg); background-color: var(--color-slate); background-image: var(--stone); color: var(--color-foil); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.sign:hover { background-color: var(--color-slate-2); }
.sign:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.sign__arrow { position: absolute; top: var(--space-lg); right: var(--space-md); width: 3.25rem; height: auto; fill: none; stroke: currentColor; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.sign__icon { width: 6.5rem; height: 4.25rem; margin-top: var(--space-2xl); background-color: currentColor; -webkit-mask: var(--icon) left center / contain no-repeat; mask: var(--icon) left center / contain no-repeat; }
.sign__icon--regional { --icon: url("images/icons/regional.png"); }
.sign__icon--radeln { --icon: url("images/icons/radeln.png"); }
.sign__icon--relaxen { --icon: url("images/icons/relaxen.png"); }
.sign h3 { margin: 0; display: grid; align-content: start; min-height: 2.1em; font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: 1.05; color: inherit; overflow-wrap: break-word; min-width: 0; }
.sign p { margin: var(--space-lg) 0 0; font-size: var(--text-md); line-height: 1.45; color: inherit; }
.sign strong { font-weight: 700; }
.sign__brand { margin-top: auto; align-self: center; width: min(100%, 13.5rem); aspect-ratio: 1000 / 344; background-color: currentColor; -webkit-mask: url("images/logo-schriftzug-mask.png") center / contain no-repeat; mask: url("images/logo-schriftzug-mask.png") center / contain no-repeat; }
@media (max-width: 60rem) { .signs__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }
@media (max-width: 40rem) { .signs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--space-sm); } .signs li { scroll-snap-align: start; } .sign { min-height: 27rem; } .sign h3 { font-size: var(--text-2xl); } }
.band--visit { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-paper-2) var(--stone); color: var(--color-ink); }
.visit__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: start; }
.visit__address { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2; color: var(--color-ink); font-style: normal; margin-top: var(--space-lg); }
.visit__grid p { color: var(--color-ink-2); margin-top: var(--space-md); }
.visit__grid .actions { margin-top: var(--space-xl); }
.visit__grid .visit__reviews { margin-top: var(--space-lg); font-size: var(--text-sm); }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); font-weight: 400; }
.hours th { color: var(--color-muted); font-size: var(--text-sm); width: 40%; }
.hours td { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.amenities { margin: var(--space-xl) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-3xl); }
.amenities dt { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); }
.amenities dd { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .visit__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } }
@media (max-width: 40rem) { .amenities { grid-template-columns: minmax(0, 1fr); } }

/* Footer: colophon block */
.site-footer { padding-block: var(--space-3xl) var(--space-2xl); border-top: 6px solid var(--color-accent); background: var(--color-paper-2) var(--stone); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.footer__logo { justify-self: center; width: min(400px, 78vw); aspect-ratio: 640 / 502; background-color: var(--color-foil); -webkit-mask: url("images/logo-mask.png") center / contain no-repeat; mask: url("images/logo-mask.png") center / contain no-repeat; }
.footer__colophon { font-size: var(--text-sm); line-height: 1.7; color: var(--color-ink-2); max-width: 62ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); list-style: none; margin: var(--space-lg) 0 0; padding: 0; font-size: var(--text-sm); }
.footer__links a { color: var(--color-ink); }
.footer__region { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.footer__label { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.footer__region .footer__links { margin-top: var(--space-sm); }
.wine__region { margin-top: var(--space-md); max-width: 46ch; }
@media (max-width: 60rem) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Subpages: page head, facts, routes ---------- */
.page-head { padding-block: calc(var(--space-4xl) + var(--space-lg)) var(--space-2xl); background: var(--color-paper-2) var(--stone); }
.crumbs { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-lg); }
.crumbs a { color: var(--color-ink-2); }
.page-head h1 { font-size: var(--text-display-s); max-width: 20ch; overflow-wrap: break-word; min-width: 0; }
.page-head .lead { margin-top: var(--space-lg); max-width: 56ch; color: var(--color-ink-2); }
.facts { margin: var(--space-2xl) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); border-top: 1.5px solid var(--color-accent); padding-top: var(--space-lg); }
.facts dt { font-size: var(--text-sm); color: var(--color-muted); }
.facts dd { margin: var(--space-2xs) 0 0; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); }
@media (max-width: 60rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.title-s { margin-bottom: var(--space-xl); }
.route__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.route__map { position: sticky; top: var(--space-xl); }
.route__map .route-main { fill: none; stroke: var(--color-accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.route__map .route-other { fill: none; stroke: var(--color-ink-2); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: 0.45; }
.route__map .start circle { fill: var(--color-paper-2); stroke: var(--color-accent); stroke-width: 3; }
.route__map .stop circle { fill: var(--color-accent); }
.route__map text { font-size: 24px; paint-order: stroke; stroke: var(--color-paper-2); stroke-width: 7px; stroke-linejoin: round; }
.route__map .start text { font-weight: 700; fill: var(--color-ink); }
.route__map .label-home { font-size: 34px; }
.route__map .home-ring { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.stops > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-lg); }
.stops .distance { font-size: var(--text-md); }
.stops h3 { font-size: var(--text-xl); }
.route__ways { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .route__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .route__map { position: static; } .route__map text { font-size: 30px; } }

/* Elevation profile: one series, area wash + 2px line, crosshair readout */
.profile { margin: 0; background: var(--color-paper-2); padding: var(--space-lg); }
.profile svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.profile .grid { stroke: var(--color-rule); stroke-width: 1; }
.profile .tick { font-family: var(--font-body); font-size: 15px; fill: var(--color-muted); }
.profile .prof-area { fill: var(--color-accent); fill-opacity: 0.12; stroke: none; }
.profile .prof-line { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.profile .prof-cross { stroke: var(--color-ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.profile .prof-dot { fill: var(--color-accent); stroke: var(--color-paper-2); stroke-width: 2; }
.profile figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; min-height: 1.6em; }

/* Take-away band and goal */
.take__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.take__grid p { color: var(--color-ink-2); margin-top: var(--space-md); max-width: 56ch; }
.take__actions { justify-content: flex-end; }
.goal__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.goal__photo { aspect-ratio: 1 / 1; }
.goal__photo--wide { aspect-ratio: 4 / 3; }
.goal__text { display: grid; gap: var(--space-lg); justify-items: start; }
.goal__text p { color: var(--color-ink-2); max-width: 56ch; }
@media (max-width: 60rem) { .take__grid, .goal__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .take__actions { justify-content: flex-start; } }
.others { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--color-accent); }
.others a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); text-decoration: none; color: var(--color-ink); }
.others__name { font-family: var(--font-display); font-size: var(--text-xl); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.others a:hover .others__name { text-decoration-color: var(--color-accent); }
.others a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ride__more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 48px; font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); text-decoration: none; }
.ride__more:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ride__go { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill); color: var(--color-accent); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.ride__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ride__more:hover .ride__go { background: var(--color-accent); color: var(--color-accent-ink); }
.ride__more:active .ride__go { background: var(--color-accent-2); color: var(--color-accent-ink); }
@media (max-width: 40rem) { .ride__list summary { grid-template-columns: minmax(0, 1fr) auto; } .ride__list summary .distance { grid-column: 1; grid-row: 2; font-size: var(--text-lg); } .ride__toggle { grid-column: 2; grid-row: 1 / span 2; } h1, h2, h3 { hyphens: auto; } }
@media (max-width: 60rem) { .footer__links { gap: 0 var(--space-lg); } .footer__links a { display: inline-flex; align-items: center; min-height: 44px; } }
.profile svg { touch-action: pan-y; }
.slider__track, .signs { overscroll-behavior-x: contain; }
html { -webkit-tap-highlight-color: color-mix(in oklab, var(--color-accent) 22%, transparent); }

/* Bike & Spa page */
.bikespa__grid--page { align-items: start; }
.bikespa__grid--page .bikespa__map { background: transparent; padding: 0; }
.project__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: start; }
.project__text { display: grid; gap: var(--space-lg); }
.project__text > p { color: var(--color-ink-2); max-width: 62ch; }
.project__links { margin-top: 0; }
@media (max-width: 60rem) { .project__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* Legal page */
.legal { display: grid; gap: var(--space-md); max-width: 72ch; }
.legal h3 { font-size: var(--text-xl); margin-top: var(--space-xl); }
.legal p { color: var(--color-ink-2); }
/* Handy-Feinschliff */
@media (max-width: 60rem) { .site-nav .lang-switch { margin-left: auto; } }
.others .distance { white-space: nowrap; }
.facts dd { overflow-wrap: break-word; min-width: 0; }
.profile svg { overflow: visible; }
@media (max-width: 40rem) {
  .facts > div:last-child { grid-column: 1 / -1; }
  .profile { padding: var(--space-md); }
  .profile .tick { font-size: 26px; }
  .profile .tick--alt { display: none; }
  .partners { gap: var(--space-xl); }
  .partner__logo { height: 150px; }
}
/* Google-Bewertungen */
.rating { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-sm); }
.band--visit .rating .rating__stars { margin: 0; display: flex; gap: var(--space-2xs); color: var(--color-foil); }
.rating__stars svg { width: 26px; height: 26px; fill: currentColor; }
.rating__text { color: var(--color-ink-2); }
.rating__text strong { color: var(--color-ink); font-weight: 500; }
.rating .actions { align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xs); }
.rating__read { font-size: var(--text-sm); min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Sprachhinweis (setzt site.js ein, wenn Browser-Sprache und Seitensprache nicht zusammenpassen) ---------- */
.lang-hint { background: var(--color-paper-2); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); }
.lang-hint .container { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding-block: var(--space-xs); min-height: 60px; }
.lang-hint p { flex: 1 1 12rem; max-width: none; margin: 0; color: var(--color-ink); }
.lang-hint__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: calc(var(--space-xs) * -1); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.lang-hint__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lang-hint__close:hover { color: var(--color-ink); }
.lang-hint__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.site-nav { top: var(--hint-h, 0px); }
@media (max-width: 30rem) { .lang-hint p { flex-basis: 100%; } .lang-hint__close { margin-left: auto; } }

/* ---------- Wer die Website gebaut hat: helles Band unter der Fußzeile (Startseite), eine Zeile in der Fußzeile (Unterseiten) ---------- */
.maker { padding-block: var(--space-3xl); background: var(--color-paper); }
.maker__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-3xl); align-items: center; }
.maker__text h2 { margin: 0 0 var(--space-lg); max-width: 18ch; font-size: var(--text-section); line-height: 1.1; overflow-wrap: break-word; min-width: 0; }
.maker__text p { margin: 0 0 var(--space-sm); max-width: 56ch; line-height: 1.65; color: var(--color-ink-2); }
.maker__text p:last-child { margin-bottom: 0; }
.maker__text strong { color: var(--color-ink); font-weight: 700; }
.maker__text a { color: var(--color-ink); overflow-wrap: anywhere; }
.maker__brand { display: grid; justify-items: start; align-content: center; gap: var(--space-lg); padding: var(--space-lg) 0 var(--space-lg) var(--space-xl); border-left: 2px solid var(--color-accent); }
.maker__logo { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-ink); transition: color var(--dur-short) var(--ease-out); }
.maker__logo:hover { color: var(--color-accent); }
.maker__logo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.maker__logo svg { display: block; height: 44px; width: auto; }
.maker__note { margin: 0; max-width: 26ch; font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }
.footer__credit { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.footer__credit p { margin: 0; max-width: none; }
.footer__credit a { color: var(--color-ink); }
@media (max-width: 60rem) {
  .maker { padding-block: var(--space-2xl); }
  .maker__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .maker__brand { padding: 0 0 0 var(--space-lg); gap: var(--space-md); }
  .maker__logo svg { height: 32px; }
  .footer__credit a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .maker__logo { transition: none; } }