/* ==========================================================================
   Friedas Camper — design system (template v1)
   Tokens → base → layout → components → page sections → utilities.
   Theme: <html data-theme="light|dark"> is resolved before first paint by
   the inline head script (see partials/head). Never style by OS query alone.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no Google request = DSGVO-safe) ---------- */

@font-face { font-family: "Inter"; font-weight: 300 800; font-style: normal; font-display: swap; src: url(../fonts/inter-var.woff2) format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* brand (from logo + existing Bricks variables fc-brown-*, fc-orange) */
  --brand-bark: #5c453a;
  --brand-bark-deep: #4a362c;
  --brand-ochre: #e89b3c;
  --brand-ochre-ink: #9a5a12;   /* ochre dark enough for text on light (≥4.5:1) */

  /* light surfaces */
  --bg: #f1ede6;          /* Kalkstein */
  --surface: #fbf9f5;
  --surface-2: #e8e2d8;
  --surface-sunk: #e4ddd2;
  --line: #d6cec1;
  --line-strong: #8c8172;  /* ≥ 3:1 on surfaces: form borders (WCAG 1.4.11) */
  --text: #23201d;        /* charcoal */
  --text-2: #4d4640;
  --muted: #6b625a;
  --accent: var(--brand-ochre);
  --accent-ink: var(--brand-ochre-ink);
  --on-accent: #23201d;
  --link: #8a4f0e;
  --focus: #1f6feb;
  --success: #2c6e4f;
  --success-bg: #e3efe7;
  --warning: #8a5a00;
  --warning-bg: #f7ead0;
  --danger: #b3261e;
  --danger-bg: #f8e1df;
  --info-bg: #e7e3dc;
  --overlay: rgb(20 17 14 / .62);
  --shadow-1: 0 1px 2px rgb(35 32 29 / .06), 0 2px 8px rgb(35 32 29 / .05);
  --shadow-2: 0 2px 6px rgb(35 32 29 / .08), 0 14px 40px rgb(35 32 29 / .10);
  --logo-filter: none;
  --img-dim: 1;

  /* type */
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-h4: 1.25rem;
  --fs-h3: clamp(1.35rem, 1.15rem + .7vw, 1.7rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.6rem);
  --fs-h1: clamp(2.3rem, 1.6rem + 2.8vw, 4rem);
  --fs-hero: clamp(2.7rem, 1.5rem + 4.8vw, 5.75rem);
  --lh-body: 1.62;
  --lh-tight: 1.06;

  /* space + shape */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --gutter: clamp(1rem, .5rem + 2.4vw, 2.5rem);
  --wrap: 80rem;
  --wrap-text: 44rem;
  --r-sm: 6px;   /* inputs, chips */
  --r-md: 12px;  /* cards */
  --r-lg: 22px;  /* hero panels, media */
  --r-pill: 999px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .22s;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #161412;
  --surface: #1f1c19;
  --surface-2: #2a2622;
  --surface-sunk: #12100e;
  --line: #3a342e;
  --line-strong: #7a6f63;
  --text: #efe9e0;
  --text-2: #cfc6ba;
  --muted: #a79d91;
  --accent: #f0a649;
  --accent-ink: #f3b465;
  --on-accent: #1b1815;
  --link: #f3b465;
  --focus: #79b0ff;
  --success: #7fcca3;
  --success-bg: #1d2d24;
  --warning: #f0c36d;
  --warning-bg: #33291a;
  --danger: #ff8a80;
  --danger-bg: #3a1f1c;
  --info-bg: #26221e;
  --overlay: rgb(0 0 0 / .7);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 4px 10px rgb(0 0 0 / .35), 0 18px 48px rgb(0 0 0 / .4);
  /* logo is bark-brown line art on transparent → recolour to warm light */
  --logo-filter: brightness(0) invert(.92) sepia(.18);
  --img-dim: .92;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-tap-highlight-color: transparent; }  /* no grey flash on tap; buttons and links show their own pressed and focus states */
[tabindex="-1"]:focus { outline: none; }  /* targets of in-page links (fc.js) take focus without a ring */
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-base)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip; /* safety net: nothing may make a phone page scroll sideways (clip keeps sticky headers working) */
}
/* a sideways swipe (tabs, galleries) on a page that cannot scroll sideways: no stretch/glow overscroll on Android
   Chrome, which stretched the whole page and slid the fixed bottom bar out of place. Vertical overscroll and
   pull-to-refresh stay. */
html, body { overscroll-behavior-x: none; }
/* Android Chrome does not fully honour body's overflow clip: content that sticks out sideways for a moment (a tab
   panel sliding in from 32px) makes it widen the page, and the fixed bottom bar slides out of place. Clip where it
   happens: the tab area, and the main content as a backstop (clip, unlike hidden, keeps sticky elements working). */
.tabs, main { overflow-x: clip; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -.02em; font-variation-settings: "opsz" 32; margin: 0 0 var(--s-4); color: var(--text); text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
/* hyphenation only where a long German compound would not fit otherwise (small phones), never mid-word on wider screens */
@media (max-width: 30rem) { h1, h2, h3, h4 { hyphens: auto; hyphenate-limit-chars: 12 5 5; } } /* only long words: "Vermietung" stays whole */
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.1; }
h4 { font-size: var(--fs-h4); line-height: 1.15; }
p, ul, ol, dl, figure, blockquote, table { margin: 0 0 var(--s-4); }
p { text-wrap: pretty; }
small { font-size: var(--fs-sm); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 200; background: var(--text); color: var(--bg); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-weight: 600; }
.skip-link:focus { top: var(--s-3); }
img.photo { filter: brightness(var(--img-dim)); }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--text { width: min(100% - 2 * var(--gutter), var(--wrap-text)); margin-inline: auto; }
.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }
.section--sunk { background: var(--surface-2); }
.section--ink { background: #23201d; color: #efe9e0; --text: #efe9e0; --text-2: #cfc6ba; --muted: #a79d91; --line: #3a342e; --link: #f3b465; --surface: #2a2622; }
:root[data-theme="dark"] .section--ink { background: #0f0d0c; }
.section-head { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: end; justify-content: space-between; margin-bottom: var(--s-6); }
.section-head h2 { margin: 0; max-width: 22ch; }
.section-head p { margin: 0; color: var(--text-2); max-width: 46ch; }
.section-head h2 + p { margin-top: var(--s-3); }  /* a short description under the heading */
.section-head--wide > div:first-child { flex: 1; }
.section-head--stack { flex-direction: column; align-items: flex-start; gap: var(--s-3); }  /* text under the heading */
.section-head--stack h2 { max-width: none; }  /* intro text across the full content width (controls stay at the right) */
.section-head--wide p { max-width: none; margin-top: var(--s-3); }
.lead { font-size: var(--fs-lg); color: var(--text-2); max-width: 60ch; }
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
/* exactly two columns from tablet up (four cards = 2 × 2, never 3 + 1) */
.grid--2x2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .split--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .split--aside { grid-template-columns: minmax(0, 1fr) 23rem; }
}
.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.muted { color: var(--muted); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 132px; height: auto; filter: var(--logo-filter); }
.nav { margin-left: auto; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-1); }
.nav > ul > li { position: relative; }
.nav a, .nav button.nav-toggle-sub {
  display: inline-flex; align-items: center; gap: .25em; padding: .5rem .55rem; border-radius: var(--r-sm);
  color: var(--text); text-decoration: none; font: 550 .9rem/1 var(--font-body); letter-spacing: -.005em; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.nav a:hover, .nav button.nav-toggle-sub:hover { background: var(--surface-2); }
.nav a[aria-current="page"], .nav li.is-current > a, .nav li.is-current > button { color: var(--accent-ink); }
.nav li.is-current > a::after, .nav li.is-current > button::after { content: ""; }
.nav .sub {
  position: absolute; left: 0; top: calc(100% + 6px); min-width: 16rem; list-style: none; margin: 0; padding: var(--s-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.nav li.is-open > .sub, .nav li.open > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* open while the keyboard is in it – not after a mouse click (the focus would keep it open when the mouse has left,
   and the next menu would open on top of it) */
.nav li:has(:focus-visible) > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@supports not selector(:has(*)) { .nav li:focus-within > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
@media (hover: hover) { .nav li:hover > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.nav .sub a { display: block; width: 100%; padding: .6rem .75rem; font-weight: 500; line-height: 1.3; }
.nav .sub a small { display: block; color: var(--muted); font-weight: 400; font-size: var(--fs-xs); margin-top: 2px; }
/* long dropdowns: the first links, the rest behind "Mehr …" (fc.js [data-sub-more]) */
.nav .sub__more { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--line); }
.nav .sub__toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .6rem .75rem; border: 0; border-radius: var(--r-sm, 8px); background: none; color: var(--accent-ink); font: 600 var(--fs-sm)/1.3 var(--font-body); cursor: pointer; text-align: left; }
.nav .sub__toggle:hover { background: var(--surface-2); }
.nav .sub__toggle svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.nav .sub__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav .sub__extra { list-style: none; margin: 0; padding: 0; }
.nav .sub__extra:not([hidden]) > li { animation: sub-in .28s var(--ease) both; }
.nav .sub__extra > li:nth-child(2) { animation-delay: .03s; } .nav .sub__extra > li:nth-child(3) { animation-delay: .06s; }
.nav .sub__extra > li:nth-child(4) { animation-delay: .09s; } .nav .sub__extra > li:nth-child(5) { animation-delay: .12s; } .nav .sub__extra > li:nth-child(n+6) { animation-delay: .15s; }
@keyframes sub-in { from { opacity: 0; transform: translateY(-4px); } }
.header-actions { display: flex; align-items: center; gap: var(--s-2); }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; }
.icon-btn:hover { border-color: var(--line-strong); }
.icon-btn svg { width: 20px; height: 20px; }
.menu-btn { display: none; }
/* theme popover in the header (segmented switch inside) */
.theme-pop { position: relative; }
.theme-pop__panel { position: absolute; right: 0; top: calc(100% + 8px); padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); display: grid; gap: var(--s-2); min-width: 12rem; }
.theme-pop__panel p { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 83rem) { .header-actions > .btn { display: none; } }
@media (max-width: 76rem) {
  .nav, .header-actions .btn { display: none; }
  .menu-btn { display: inline-grid; }
  .header-actions { margin-left: auto; }
  .brand img { width: 112px; }
}

/* Theme switcher (segmented: Hell / Dunkel / System) */
.theme-switch { display: inline-flex; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); }
.theme-switch button { width: 36px; height: 36px; border: 0; background: none; color: var(--muted); border-radius: var(--r-pill); display: grid; place-items: center; cursor: pointer; }
.theme-switch button svg { width: 18px; height: 18px; }
.theme-switch button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.theme-switch button:hover:not([aria-pressed="true"]) { color: var(--text); }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: 1fr min(100%, 26rem); visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim { background: var(--overlay); opacity: 0; transition: opacity var(--dur) var(--ease); border: 0; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel { background: var(--bg); overflow-y: auto; transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; overscroll-behavior: contain; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); min-height: var(--header-h); }
.drawer nav { padding: var(--s-3) var(--s-4); }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary, .drawer .drawer-link { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) var(--s-2); font: 600 1.25rem/1.15 var(--font-display); color: var(--text); text-decoration: none; cursor: pointer; min-height: 56px; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary svg { transition: transform var(--dur) var(--ease); }
.drawer details[open] summary svg { transform: rotate(180deg); }
.drawer details ul { list-style: none; padding: 0 0 var(--s-3) var(--s-2); margin: 0; }
.drawer details li a { display: block; padding: .7rem 0; color: var(--text-2); text-decoration: none; font-weight: 500; }
.drawer .drawer-link { border-bottom: 1px solid var(--line); }
.drawer__foot { margin-top: auto; padding: var(--s-5) var(--s-4); display: grid; gap: var(--s-3); border-top: 1px solid var(--line); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--text); --btn-fg: var(--bg); --btn-bd: var(--btn-bg);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .75rem 1.25rem;
  border-radius: var(--r-pill); border: 1.5px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
  font: 600 1rem/1.1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .12s;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--on-accent); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bd: var(--text); filter: none; }
.btn--light { --btn-bg: #fbf9f5; --btn-fg: #23201d; }
.btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: var(--fs-sm); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.text-link { font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.text-link:hover { color: var(--accent-ink); }

/* ---------- Badges / chips ---------- */
.badge { display: inline-flex; align-items: center; gap: .35em; padding: .2rem .6rem; border-radius: var(--r-pill); font: 600 var(--fs-xs)/1.4 var(--font-body); background: var(--surface-2); color: var(--text-2); }
.badge--accent { background: var(--accent); color: var(--on-accent); }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.chip { display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: .4rem .9rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 500 var(--fs-sm)/1 var(--font-body); cursor: pointer; }
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip:has(input:checked) { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
/* sale filters (design B): collapsible groups (<details>) whose closed state shows the choice, active filters as chips
   above; condition as full-width cards, makers as cards two per row, body types as rows */
.chip svg { width: 18px; height: 18px; flex: none; }
.filters--acc { padding: var(--s-5) var(--s-5) 0; }
.filters__head { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--s-3); }
.filters__head h2 { margin: 0; }
.filters__n { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 700; }
.filters__clear { margin-left: auto; padding: .35rem 0; border: 0; background: none; color: var(--link); font: 600 var(--fs-sm)/1 var(--font-body); cursor: pointer; }
.filters__clear:hover { text-decoration: underline; }
.filters__head .filters__close { margin-left: .25rem; }
.filters__clear[hidden] + .filters__close { margin-left: auto; }  /* no filter set: the close button still on the right */
.filters__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--s-4); }
.filters__chips:empty { display: none; }
.fchip { display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: 0 .5rem 0 .8rem; border: 0; border-radius: var(--r-pill); background: var(--text); color: var(--bg); font: 500 .875rem/1 var(--font-body); cursor: pointer; }
.fchip svg { width: 15px; height: 15px; }
.fchip:hover { opacity: .88; }
.fgrp { border-top: 1px solid var(--line); }
.fgrp > summary { display: flex; align-items: center; gap: .6rem; min-height: 54px; list-style: none; cursor: pointer; font-weight: 600; }
.fgrp > summary::-webkit-details-marker { display: none; }
.fgrp > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.fgrp__t { flex: none; white-space: nowrap; }
.fgrp__v { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); font-size: .875rem; font-weight: 400; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.fgrp__v.is-set { color: var(--link); font-weight: 600; }
.fgrp > summary > svg { width: 18px; height: 18px; flex: none; color: var(--text-2); transition: transform var(--dur) var(--ease); }
.fgrp[open] > summary > svg { transform: rotate(180deg); }
.fgrp__b { display: grid; gap: var(--s-3); padding-bottom: var(--s-4); }
.chip--tile { position: relative; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: #23201d; cursor: pointer; }
.frow input { position: absolute; opacity: 0; pointer-events: none; }
.chip--tile:hover { border-color: var(--line-strong); }
.chip--tile:has(input:checked) { background: #fff; color: #23201d; border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
/* body types: rows with the wide icon, the name, the count and a check box */
.frows { display: grid; gap: 2px; margin: 0 -.6rem; }
.frow { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: 0 .6rem; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }  /* names and counts the size of the condition cards' */
.frow:hover { background: var(--surface-2); }
.frow > svg { width: 33px; height: 22px; flex: none; color: var(--text-2); }
.frow__n { margin-left: auto; color: var(--muted); }
.frow__box { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--surface); }
.frow__box svg { width: 14px; height: 14px; opacity: 0; }
.frow:has(input:checked) .frow__box { border-color: var(--text); background: var(--text); color: var(--bg); }
.frow:has(input:checked) .frow__box svg { opacity: 1; }
.frow:has(input:focus-visible) .frow__box { outline: 3px solid var(--focus); outline-offset: 2px; }
/* makers: logo tiles, the four biggest shown, the rest behind "n weitere Hersteller" */
.maker-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.chip--tile { justify-content: center; min-width: 0; min-height: 52px; }
.chip--maker { padding: .9rem .5rem .6rem; }
.kind-chips { display: grid; gap: var(--s-2); }  /* condition: full-width cards like the makers', icon, name and count in a row */
.chip--kind { justify-content: flex-start; gap: .75rem; min-height: 50px; padding: .5rem .9rem; font-size: var(--fs-sm); font-weight: 500; }
.chip--kind svg { width: 22px; height: 22px; color: var(--text-2); }
.chip--kind svg[viewBox="0 0 36 24"] { width: 33px; }  /* the wide vehicle icons (rental types) */
.chip--kind .chip__count { position: static; margin-left: auto; font-size: inherit; font-weight: 500; }  /* the same size as the name */
.chip--kind:has(input:checked) svg { color: #a35a0c; }
.chip--maker.is-extra { display: none; }
.filters--acc.show-more .chip--maker.is-extra { display: inline-flex; }
.chip--maker img { max-width: 100%; height: auto; }
.chip__word { min-width: 0; font: 800 .72rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.chip__count { position: absolute; top: .25rem; right: .4rem; font-size: .68rem; font-weight: 600; line-height: 1; color: #7a7066; }  /* above the logo line */
.chip--maker:has(input:checked) .chip__count { color: #a35a0c; }
.fmore { display: inline-flex; align-items: center; gap: .35rem; justify-self: start; padding: .3rem 0; border: 0; background: none; color: var(--link); font: 600 .875rem/1 var(--font-body); cursor: pointer; }
.fmore svg { width: 16px; height: 16px; }
.filters--acc.show-more .fmore { display: none; }
/* price, km and year: two fields side by side, a small label over each; sleeping places as segments; the switch row */
.fpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.fsub { display: grid; gap: .3rem; min-width: 0; }
.fsub [data-sub] { color: var(--muted); font-size: .8125rem; }
.fsub .seg { min-height: 44px; }
/* the filters' switch in the check boxes' dark fill, not the booking page's green */
.filters .switch input:checked + span { background: var(--text); }
.filters .switch input:checked + span::after { background: var(--bg); }
.fswitch { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; font-weight: 500; cursor: pointer; }
:root[data-theme="dark"] .chip--tile { background: #ece6dc; }  /* less glare, the logos stay dark */
:root[data-theme="dark"] .chip--tile:not(:has(input:checked)) { border-color: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip--tile { background: #ece6dc; }
  :root:not([data-theme="light"]) .chip--tile:not(:has(input:checked)) { border-color: transparent; }
}

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s-4); }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line-strong); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-block: var(--s-7) var(--s-6); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { margin-bottom: 0; }
.page-hero--media { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 62rem) { .page-hero--media { grid-template-columns: 1.1fr 1fr; } }
.page-hero__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--surface-2); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Home hero: three routes ---------- */
.hero { padding-top: var(--s-5); padding-bottom: var(--s-7); }
.hero__title { font-size: var(--fs-hero); line-height: .98; letter-spacing: -.035em; font-weight: 700; max-width: 13ch; margin: var(--s-5) 0 var(--s-5); }
.hero__intro { display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 62rem) { .hero__intro { grid-template-columns: 1.4fr 1fr; } }
.hero__intro p { font-size: var(--fs-lg); color: var(--text-2); margin: 0 0 var(--s-5); max-width: 40ch; }
/* Maintenance page: the page alone, logo on top, the ways to reach the team */
.maint { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; }
.maint__logo { display: block; width: 160px; height: auto; margin-bottom: var(--s-7); filter: var(--logo-filter); }  /* light in dark mode, as in the header */
.maint__body { align-items: center; }
.maint__sub { margin: var(--s-6) 0 var(--s-3); font-weight: 600; }
.maint__ways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); max-width: 30rem; }
.maint__ways a, .maint__way { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: inherit; text-decoration: none; }
.maint__ways a:hover { border-color: var(--accent); }
.maint__ways svg { flex: none; width: 22px; height: 22px; color: var(--accent-ink); }
.maint__ways strong { display: block; }
.maint__ways small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.nf { align-items: center; }
/* Preise pro Tag: the year as a bar, coloured by season, and a card per season */
.season-bar { --sw: #cfdde6; --sn: #f3dcb4; --sh: var(--accent); list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.season-bar__m { padding: .55rem 0; text-align: center; font-size: var(--fs-xs); font-weight: 600; color: #23201d; }
.season-bar__m:first-child { border-radius: var(--r-md) 0 0 var(--r-md); } .season-bar__m:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.season-bar__m--winter { background: var(--sw); } .season-bar__m--neben { background: var(--sn); } .season-bar__m--haupt { background: var(--sh); }
.season { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sc, var(--line)); border-radius: var(--r-md); }
.season--winter { --sc: #a9c3d3; } .season--neben { --sc: #e9c88f; } .season--haupt { --sc: var(--accent); }
.season__icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--surface-2); color: var(--accent-ink); }
.season__icon svg { width: 22px; height: 22px; }
.season h3 { margin: 0 0 .15rem; font-size: 1.15rem; }
.season p { margin: 0; } .season__months { font-weight: 600; }
:root[data-theme="dark"] .season-bar { --sw: #3c5260; --sn: #6b5434; }
:root[data-theme="dark"] .season-bar__m--winter, :root[data-theme="dark"] .season-bar__m--neben { color: #efe9e0; }
@media (max-width: 47.99rem) { .season-bar__m { font-size: .62rem; padding: .45rem 0; } }
/* hover a season: its months stand out in the bar, the rest fade (and the other way round) */
.season-bar__m, .season { transition: opacity .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.season { cursor: default; }
.seasonboard:has(.season--winter:hover, .season-bar__m--winter:hover) :is(.season-bar__m:not(.season-bar__m--winter), .season:not(.season--winter)),
.seasonboard:has(.season--neben:hover, .season-bar__m--neben:hover) :is(.season-bar__m:not(.season-bar__m--neben), .season:not(.season--neben)),
.seasonboard:has(.season--haupt:hover, .season-bar__m--haupt:hover) :is(.season-bar__m:not(.season-bar__m--haupt), .season:not(.season--haupt)) { opacity: .35; }
.seasonboard:has(.season--winter:hover, .season-bar__m--winter:hover) :is(.season-bar__m--winter, .season--winter),
.seasonboard:has(.season--neben:hover, .season-bar__m--neben:hover) :is(.season-bar__m--neben, .season--neben),
.seasonboard:has(.season--haupt:hover, .season-bar__m--haupt:hover) :is(.season-bar__m--haupt, .season--haupt) { transform: translateY(-3px); box-shadow: var(--shadow-2); }
@media (prefers-reduced-motion: reduce) { .season-bar__m, .season { transition: none; } }
/* Tipps zum Packen: a checklist per category, the count and progress on top (fc.js [data-packlist]) */
.packlist { display: grid; gap: var(--s-4); }
.packlist__bar { display: grid; gap: var(--s-3); grid-template-columns: 1fr auto; align-items: center; position: sticky; top: calc(var(--header-h, 72px) + var(--s-2)); z-index: 2; }
.packlist__count { margin: 0; font-size: 1.05rem; } .packlist__count strong { font-size: 1.5rem; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.packlist__total { font-size: 1.5rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; margin-right: .15em; }
.packlist__progress { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.packlist__progress span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .3s var(--ease); }
.packlist__tools { gap: var(--s-2); }
.packlist__groups { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: start; }
.packgroup__title { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-3); font-size: 1.15rem; }
.packgroup__title > span:nth-child(2) { flex: 1; }
.packgroup__n { font: 600 var(--fs-xs)/1 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.packgroup.is-done .packgroup__n { color: var(--success); }
.packgroup__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.packgroup__list .check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; padding: .2rem 0; }
.packgroup__list input { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; flex: none; accent-color: var(--accent-ink); }
.packgroup__list input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
@media (max-width: 47.99rem) { .packlist__bar { grid-template-columns: 1fr; } .packlist__progress { grid-row: auto; } }
@media print {
  .packlist__bar { position: static; } .packlist__tools, .page-hero__media, .split--aside > .stack, .notes-toggle { display: none !important; }
  .packgroup { break-inside: avoid; box-shadow: none; } .packgroup__list input:checked + span { text-decoration: none; color: inherit; }
}
/* Ausstattung an Bord: totals on top (counting up), a card per group, the vans note */
.kit { display: grid; gap: var(--s-4); }
.kit__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kit__stats li { display: grid; gap: .2rem; padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.kit__stats strong { font: 700 clamp(2rem, 1.5rem + 1.6vw, 2.75rem)/1 var(--font-display); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.kit__stats span { color: var(--text-2); font-size: var(--fs-sm); }
.kit__groups { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: start; }
.kit__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.kit__list li { display: flex; gap: .55rem; align-items: flex-start; }
.kit__list svg { flex: none; width: 18px; height: 18px; margin-top: .15rem; color: var(--success); }
.kit__note { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; padding: var(--s-4) var(--s-5); background: var(--info-bg); border-radius: var(--r-md); color: var(--text-2); }
.kit__note svg { flex: none; width: 20px; height: 20px; margin-top: .1rem; color: var(--accent-ink); }
@media (max-width: 47.99rem) { .kit__stats { grid-template-columns: 1fr; } .kit__stats li { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-4); } }
/* Reiseschutz: three cards for the cover, the recommendation, the price card in the sidebar */
.cover { display: grid; gap: var(--s-5); }
.cover h2 { margin-bottom: var(--s-2); }
.cover__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.cover__item { display: grid; gap: var(--s-2); align-content: start; }
.cover__item h3 { margin: var(--s-2) 0 0; font-size: 1.15rem; }
.cover__item p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.cover__tip { border-left: 4px solid var(--accent); }
.cover__tip > p { margin: 0 0 var(--s-3); }
.cover__eyebrow { display: flex; align-items: center; gap: .4rem; margin: 0 0 var(--s-2) !important; font: 600 var(--fs-xs)/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.cover__eyebrow svg { width: 16px; height: 16px; }
.cover__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.cover__tip .cover__list li:last-child svg { color: var(--accent-ink); }  /* the paw (dog owners) */
.cover__amount { margin: 0; font: 700 clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem)/1.1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.cover__price .muted { margin: var(--s-2) 0 var(--s-4); }
.cover__price .btn svg { width: 16px; height: 16px; }
.cover__by { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
/* the whole sidebar stays in view (a sticky price card alone would slide over the card below it); only where both fit */
@media (min-width: 62rem) and (min-height: 46rem) { .cover__aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); align-self: start; } }
@media (min-width: 62rem) and (min-height: 46rem) { .admin-bar .cover__aside { top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px) + var(--s-4)); } }
/* Langzeitmiete: figures, who it suits (cards as on Reiseschutz), what is included, the quote, the request form */
.long { display: grid; gap: var(--s-5); }
.long h2 { margin-bottom: var(--s-2); }
.long__incl h2 { margin: 0 0 var(--s-4); font-size: var(--fs-h3); }  /* a card heading, with room to the list */
.long__incl .cover__list { margin: 0 0 var(--s-4); gap: var(--s-3) var(--s-5); }
.long__incl > p { margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.long__quote { margin: 0; padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--brand-bark-deep); color: #fbf1e0; }
.long__quote p { margin: 0; font: 400 clamp(1.05rem, 1rem + .35vw, 1.25rem)/1.55 var(--font-body); }
:root[data-theme="dark"] .long__quote { background: #2a2019; }
/* Long-term rental form: dates, then "Wer reist mit?" as on the booking page, then the destination */
.rt-trip__h.cf__who { margin: var(--s-5) 0 var(--s-3); }  /* after the dates; the booking page's .rt-trip__h has none */
.cf__trip { margin-top: var(--s-4); }
/* Login and password pages: two halves across the full width – the photo edge to edge with a note in the style of the
   video heroes, the form on the page background; Bricks' form (.brxe-form) dressed like the site's fields and buttons */
.login { --edge: max(var(--gutter), calc(100% - var(--wrap) / 2)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: calc(100svh - var(--header-h)); }  /* --edge: the outer padding that lines up with the header's .wrap (a grid item's % is half the page) */
.login__aside { position: relative; display: flex; align-items: center; min-height: 34rem; padding: var(--s-7) var(--s-7) var(--s-7) var(--edge); overflow: hidden; color: #fbf9f5; }
.login__aside .login__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.login__aside::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(20 17 14 / .8) 0%, rgb(20 17 14 / .55) 45%, rgb(20 17 14 / .15) 100%); }  /* the note sits level with the form, dark behind it */
.login__aside-text { position: relative; z-index: 1; max-width: 30rem; text-align: left; }
.login__aside-text p { margin: 0; color: #ece5da; font-size: var(--fs-lg); }
.login__aside-text .kicker { margin-bottom: var(--s-3); font-size: var(--fs-xs); color: #f3b465; }
.login__aside-text .login__aside-title { margin-bottom: var(--s-4); color: #fbf9f5; font: 700 var(--fs-h1)/1 var(--font-display); letter-spacing: -.035em; text-shadow: 0 2px 24px rgb(0 0 0 / .25); text-wrap: balance; }
.login__main { display: grid; align-items: center; padding: var(--s-8) var(--edge) var(--s-8) var(--s-8); }
.login__inner { width: 100%; max-width: 30rem; margin-left: auto; text-align: left; }  /* its right edge on the header's */
body:has(.login) .site-footer { margin-top: 0; }  /* the photo meets the footer */
.login__title { margin: 0 0 var(--s-3); font-size: var(--fs-h2); }
.login__lead { margin: 0 0 var(--s-6); font-size: var(--fs-lg); color: var(--text-2); }
@media (max-width: 61.99rem) {
  .login { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .login__aside { min-height: 15rem; padding: var(--s-6) var(--gutter); }
  .login__aside::after { background: linear-gradient(180deg, rgb(20 17 14 / .4) 0%, rgb(20 17 14 / .7) 100%); }  /* the title spans the banner */
  .login__aside-text .login__aside-title { font-size: var(--fs-h2); margin-bottom: 0; }
  .login__aside-text > p:last-child { display: none; }
  .login__main { padding: var(--s-7) var(--gutter); }
  .login__inner { max-width: 32rem; margin-inline: 0; }
}
.login__form { display: grid; gap: var(--s-4); }
.login__form.brxe-form .form-group { margin: 0; padding: 0; width: 100%; }
.login__form.brxe-form label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: var(--fs-sm); color: var(--text); text-transform: none; letter-spacing: normal; }  /* Bricks writes its labels in capitals */
.login__form.brxe-form input[type=text], .login__form.brxe-form input[type=password] { width: 100%; min-height: 46px; padding: .6rem .8rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: 400 1rem/1.4 var(--font-body); }
.login__form.brxe-form input[type=password] { padding-right: 3rem; }
.login__form.brxe-form .password-toggle { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; }
.login__form.brxe-form .password-toggle:hover { color: var(--text); }
.login__form.brxe-form .password-toggle svg { width: 20px; height: 20px; }
.login__form.brxe-form input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
.login__form.brxe-form .options-wrapper { list-style: none; margin: 0; padding: 0; }
.login__form.brxe-form .options-wrapper li { display: flex; align-items: center; gap: .5rem; }
.login__form.brxe-form .options-wrapper label { margin: 0; font-weight: 400; }
.login__form.brxe-form input[type=checkbox] { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent-ink); }
.login__form.brxe-form .submit-button-wrapper { width: 100%; }
.login__form.brxe-form button[type=submit] { width: 100%; min-height: 48px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: 600 1rem/1 var(--font-body); cursor: pointer; }
.login__form.brxe-form button[type=submit]:hover { filter: brightness(.95); }
.login__form .message { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.login__form .message.error { background: var(--danger-bg); color: var(--danger); }
.login__form .message.success { background: var(--success-bg); color: var(--success); }
.login__notice { display: none; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--warning-bg); color: var(--text); font-size: var(--fs-sm); }
.login__notice:target { display: block; scroll-margin-top: 100vh; }  /* /passwort-vergessen/#link-ungueltig, from an expired reset link; the page stays at the top */
.login__links { display: flex; justify-content: space-between; gap: var(--s-3); margin: var(--s-5) 0 0; font-size: var(--fs-sm); }
/* Campingknigge: one card per rule, numbered */
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.rule { display: flex; gap: var(--s-4); align-items: flex-start; }
.rule__icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--surface-2); color: var(--accent-ink); }
.rule__icon svg { width: 24px; height: 24px; }
.rule__title { display: flex; align-items: baseline; gap: .5rem; margin: .2rem 0 .35rem; font-size: 1.15rem; }
.rule__n { font: 700 var(--fs-xs)/1 var(--font-body); color: var(--accent-ink); letter-spacing: .04em; }
.rule p { margin: 0; color: var(--text-2); }
/* Search: a big field, results by area, each result a card with picture */
.inline-form.search__form { max-width: 44rem; margin-bottom: var(--s-3); flex-wrap: nowrap; }
.search__form .input { min-height: 3.25rem; min-width: 0; flex-basis: 0; font-size: 1.05rem; }
.search .count { margin: 0 0 var(--s-4); color: var(--muted); }
.search__areas { margin-bottom: var(--s-5); gap: var(--s-2); }
.search .chip { text-decoration: none; }
.search__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); max-width: 52rem; }
.sres { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.sres:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.sres:hover .sres__title { color: var(--link); }
.sres__media { aspect-ratio: 4 / 3; border-radius: calc(var(--r-md) - 4px); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.sres__media img { width: 100%; height: 100%; object-fit: cover; }
.sres__icon { color: var(--accent-ink); } .sres__icon svg { width: 26px; height: 26px; }
.sres__body { min-width: 0; }
.sres__kind { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.sres__title { display: block; margin: .15rem 0 .2rem; font-weight: 600; font-size: 1.075rem; line-height: 1.3; transition: color .2s; }
.sres__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: var(--fs-sm); }
.search__pages { max-width: 52rem; margin-top: var(--s-6); }
.search__help { max-width: 44rem; margin-top: var(--s-4); }
.search__help h2 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.search__label { margin: var(--s-6) 0 var(--s-3); font-weight: 600; }
.search__help > .search__label:first-child { margin-top: var(--s-2); }
.search__cols { margin-top: var(--s-2); }
.search__aside .search__label { margin: 0 0 var(--s-3); font: 600 1.05rem/1.3 var(--font-body); }
.search__aside .card > p { margin-bottom: var(--s-3); }
@media (min-width: 62rem) { .search__aside { position: sticky; top: calc(var(--header-h, 72px) + var(--s-4)); } }
@media (max-width: 47.99rem) { .sres { grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--s-3); } .sres__title { font-size: 1rem; } }
.inline-form.nf__search { margin: var(--s-5) 0; flex-wrap: nowrap; max-width: 34rem; }  /* the button stays beside the field, on phones too */
.nf__search .input { min-width: 0; flex-basis: 0; }
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); max-width: 34rem; }
.ways a { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.ways a:hover { border-color: var(--accent); transform: translateX(3px); }
.ways a > span:nth-child(2) { flex: 1; min-width: 0; }
.ways strong { display: block; font-weight: 600; }
.ways small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.ways__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface-2); color: var(--accent-ink); }
.ways__icon svg { width: 20px; height: 20px; }
.ways a > svg { flex: none; width: 18px; height: 18px; color: var(--muted); transition: color .2s; }
.ways a:hover > svg { color: var(--accent-ink); }
/* Maintenance scene: the camper on its way back to Kempen, Frieda at the window. Layers move at their own speed
   (far = slow), the van rocks, wheels and gears turn. Still with prefers-reduced-motion. */
.scene { --sc-sky: #f6ecdc; --sc-far: #e6ddcf; --sc-hill: #ddd3c3; --sc-tree: #c9bda9; --sc-road: #e2dace; --sc-fur: #b17c4f; --sc-ear: #8d5b37; --sc-muzzle: #dcb58c;
  display: block; width: 100%; max-width: 36rem; height: auto; justify-self: center; color: var(--brand-bark); overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-2); background: var(--surface); }
.scene * { transform-box: fill-box; }
.scene__sky1 { stop-color: var(--sc-sky); } .scene__sky2 { stop-color: var(--surface); }
.scene__sky { fill: url(#fcs-sky); stroke: none; }
.scene__sun circle { fill: var(--accent); stroke: none; opacity: .35; }
.scene__rays { stroke: var(--accent); stroke-width: 3; opacity: .55; transform-origin: center; animation: scene-spin 30s linear infinite; }
.scene__clouds path { fill: var(--surface); stroke: none; }
.scene__mtn path { fill: var(--sc-far); stroke: none; }
.scene__hills path { fill: var(--sc-hill); stroke: none; }
.scene__hills .scene__trees { fill: var(--sc-tree); }
.scene__hills .scene__trunks { fill: none; stroke: var(--sc-tree); stroke-width: 3; }
.scene__clouds { animation: scene-move 70s linear infinite; }
.scene__mtn { animation: scene-move 60s linear infinite; }
.scene__hills { animation: scene-move 18s linear infinite; }
.scene__near { animation: scene-move 8.5s linear infinite; }
.scene__near path { stroke: var(--sc-tree); stroke-width: 2; }
.scene__sign { animation: scene-sign 11s linear infinite; }
.scene__sign rect { fill: #f2c230; stroke: none; }
.scene__sign .scene__sign-in { fill: none; stroke: #23201d; stroke-width: 1.5; }
.scene__sign path { stroke: var(--line-strong); }
.scene__sign text { font: 700 13px/1 var(--font-body, Inter, system-ui, sans-serif); fill: #23201d; stroke: none; letter-spacing: .02em; }
.scene__road { fill: var(--sc-road); stroke: none; }
.scene__lane { stroke: var(--surface); stroke-width: 3.5; stroke-dasharray: 22 18; animation: scene-lane .6s linear infinite; }
.scene__shadow { fill: rgb(35 32 29 / .12); stroke: none; transform-origin: center; animation: scene-shadow .5s ease-in-out infinite alternate; }
.scene__puffs circle { fill: var(--line); stroke: none; opacity: 0; transform-origin: center; animation: scene-puff 1.5s ease-out infinite; }
.scene__puffs circle:nth-child(2) { animation-delay: .5s; } .scene__puffs circle:nth-child(3) { animation-delay: 1s; }
.scene__body { animation: scene-rock .5s ease-in-out infinite alternate; }
.scene__shell, .scene__box { fill: var(--surface); }
.scene__hatch { stroke-width: 2.5; }
.scene__glass { fill: var(--surface-2); stroke-width: 2.5; }
.scene__frame { fill: none; stroke-width: 2.5; }
.scene__seam { stroke-width: 2; opacity: .45; }
.scene__stripe { stroke: var(--accent); stroke-width: 8; stroke-linecap: butt; }
.scene__stripe2 { stroke-width: 2; stroke-linecap: butt; opacity: .7; }
.scene__mirror { fill: var(--surface); stroke-width: 2.5; }
.scene__light { stroke: var(--accent); stroke-width: 6; }
.scene__tail { stroke: #c8553d; stroke-width: 6; }
.scene__bumper { stroke-width: 5; }
.scene__grille { stroke-width: 2; }
.scene__wheel { transform-origin: center; animation: scene-spin .7s linear infinite; }
.scene__tyre { fill: var(--brand-bark-deep); stroke: none; }
.scene__rim { fill: var(--surface); stroke: none; }
.scene__spokes { stroke: var(--brand-bark); stroke-width: 2.5; }
.scene__hub { fill: var(--accent); stroke: none; }
/* Frieda: fluffy, brown, topknot, green collar, ears in the wind */
.scene__dog { animation: scene-rock .5s ease-in-out infinite alternate-reverse; }
.scene__fur { fill: var(--sc-fur); stroke: none; }
.scene__ear { fill: var(--sc-ear); stroke: none; transform-origin: 50% 0; animation: scene-ear .45s ease-in-out infinite alternate; }
.scene__ear--r { animation-delay: -.2s; }
.scene__muzzle { fill: var(--sc-muzzle); stroke: none; }
.scene__nose, .scene__eyes circle { fill: #23201d; stroke: none; }
.scene__eyes { transform-origin: center; animation: scene-blink 4s infinite; }
.scene__tongue { fill: #e27d72; stroke: none; transform-origin: 50% 0; animation: scene-pant .35s ease-in-out infinite alternate; }
.scene__collar { fill: #a8cf2c; stroke: none; }
.scene__fur--top { fill: var(--sc-ear); }
.scene__mouth { stroke: #23201d; stroke-width: 1; }
.scene__glint { fill: #fff !important; }
.scene__toes { stroke: var(--sc-ear); stroke-width: 1; }
.scene__think { animation: scene-float 2.4s ease-in-out infinite alternate; }
.scene__bubble { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.scene__gear { fill: var(--accent); stroke: none; transform-origin: center; animation: scene-spin 6s linear infinite; }
.scene__gear--small { animation: scene-spin 4.5s linear infinite reverse; }  /* 6 teeth against 8: meshes with the big one */
.scene__gear-hub { fill: var(--surface); stroke: none; }
:root[data-theme="dark"] .scene { color: var(--muted); --sc-sky: #2b2520; --sc-far: #2a2622; --sc-hill: #332d28; --sc-tree: #403830; --sc-road: #171512; }
:root[data-theme="dark"] .scene__lane { stroke: var(--line-strong); }
:root[data-theme="dark"] .scene__tyre { fill: #0f0d0b; }
:root[data-theme="dark"] .scene__spokes { stroke: var(--muted); }
/* 404: the camper has pulled over – the landscape stands, hazard lights blink, Frieda looks around, the signpost sways */
.scene--parked :is(.scene__mtn, .scene__hills, .scene__near, .scene__body, .scene__wheel, .scene__shadow) { animation: none; }
.scene--parked :is(.scene__light, .scene__tail) { animation: scene-hazard 1.1s steps(1) infinite; }
.scene--parked .scene__dog { animation: scene-look 3.6s ease-in-out infinite; }
.scene--parked .scene__ear { animation: scene-ear-idle 1.8s ease-in-out infinite alternate; }
.scene__ask { font: 800 30px/1 var(--font-display, Inter, system-ui, sans-serif); fill: var(--accent); stroke: none; transform-origin: 50% 70%; animation: scene-ask 1.4s ease-in-out infinite alternate; }
.scene__post { transform-origin: 50% 100%; animation: scene-sway 2.8s ease-in-out infinite alternate; }
.scene__post > path:first-child { stroke: var(--line-strong); stroke-width: 4; }
.scene__arrow { stroke: none; }
.scene__arrow--a { fill: var(--accent); }
.scene__arrow--b { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.scene__arrow--c { fill: var(--sc-tree); }
.scene__words { stroke: var(--brand-bark); stroke-width: 2; opacity: .55; }
.scene__paws-trail g { fill: var(--sc-tree); stroke: none; opacity: 0; animation: scene-paw 5s infinite; }
.scene__paws-trail g:nth-child(2) { animation-delay: .4s; } .scene__paws-trail g:nth-child(3) { animation-delay: .8s; }
.scene__paws-trail g:nth-child(4) { animation-delay: 1.2s; } .scene__paws-trail g:nth-child(5) { animation-delay: 1.6s; }
:root[data-theme="dark"] .scene__words { stroke: #efe9e0; }
@keyframes scene-hazard { 50% { opacity: .2; } }
@keyframes scene-look { 0%, 20%, 100% { transform: translateX(0); } 30%, 50% { transform: translateX(-3px); } 60%, 85% { transform: translateX(3px); } }
@keyframes scene-ear-idle { from { transform: rotate(-3deg); } to { transform: rotate(5deg); } }
@keyframes scene-ask { from { transform: rotate(-10deg); } to { transform: rotate(10deg) translateY(-2px); } }
@keyframes scene-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes scene-paw { 0% { opacity: 0; } 8%, 60% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes scene-move { to { transform: translateX(-560px); } }
@keyframes scene-sign { from { transform: translateX(620px); } to { transform: translateX(-120px); } }
@keyframes scene-lane { to { stroke-dashoffset: 40; } }
@keyframes scene-rock { to { transform: translateY(-1.5px); } }
@keyframes scene-shadow { to { transform: scaleX(.97); } }
@keyframes scene-puff { 0% { opacity: .9; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-46px, -10px) scale(2.4); } }
@keyframes scene-spin { to { transform: rotate(1turn); } }
@keyframes scene-float { to { transform: translateY(-5px); } }
@keyframes scene-ear { from { transform: rotate(6deg); } to { transform: rotate(24deg); } }
@keyframes scene-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes scene-pant { to { transform: scaleY(1.35); } }
@media (prefers-reduced-motion: reduce) { .scene * { animation: none !important; } }
@media (max-width: 47.99rem) { .maint .scene { order: -1; margin-bottom: var(--s-5); } .maint__logo { margin-bottom: var(--s-5); } .nf .scene { margin-top: var(--s-6); } }  /* phone: the scene first, above the headline */
.van-line { --vh: clamp(48px, 4vw + 30px, 70px); display: flex; align-items: flex-end; color: var(--brand-bark); margin-top: var(--s-2); }
.van-line::before, .van-line::after { content: ""; flex: 1; border-bottom: 2.2px solid currentColor; margin-bottom: calc(var(--vh) * 18 / 70 - 1px); opacity: .9; }
.van-line::before { flex: 0 1 18%; }
.van-line svg { height: var(--vh); width: auto; flex: none; overflow: visible; }
svg.van-line { display: block; width: 100%; height: auto; }
:root[data-theme="dark"] .van-line { color: var(--muted); }
.van-line path { stroke-dasharray: var(--len, 3000); stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .van-line.is-drawing path { animation: draw 2.4s var(--ease) both; }
  @keyframes draw { from { stroke-dashoffset: var(--len, 3000); } }
}
.routes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 48rem) { .routes { grid-template-columns: 1.3fr 1fr 1fr; } .routes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.route { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 26rem; border-radius: var(--r-lg); overflow: hidden; color: #fbf9f5; text-decoration: none; isolation: isolate; background: #2a2622; }
.route img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
.route::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 17 14 / .35) 0%, rgb(20 17 14 / .5) 35%, rgb(20 17 14 / .75) 60%, rgb(20 17 14 / .92) 100%); }
.route__body { text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.route:hover img { transform: scale(1.03); }
.route__body { padding: var(--s-5); }
.route__kicker { font-size: var(--fs-sm); font-weight: 600; color: #f3c88d; }
.route h2, .route h3 { color: #fbf9f5; font-size: clamp(1.7rem, 1.25rem + 1.4vw, 2.45rem); margin: .2rem 0 .5rem; }
.route p { margin: 0 0 var(--s-4); color: #e8e1d6; max-width: 32ch; }
.route .btn { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .route img { transition: none; } }

/* ---------- Search bar (rental) ---------- */
.searchbar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--s-4); display: grid; gap: var(--s-3); }
@media (min-width: 56rem) { .searchbar { grid-template-columns: 1.2fr 1fr 1fr .8fr auto; align-items: end; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); } }
.searchbar .field { margin: 0; }
.searchbar .btn { min-height: 52px; }
.searchbar__note { grid-column: 1 / -1; margin: 0; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Forms ---------- */
.field { display: grid; gap: .35rem; margin-bottom: var(--s-4); }
.field > .error-msg { margin: 0; }
/* searchable select (fc.js): input with the select's arrow, list below; the native select stays for the form */
.combo { position: relative; }
.combo__native, .select.combo__native { position: absolute; width: 1px; min-width: 0; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }
.combo__input { width: 100%; padding-right: 2.4rem; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236b625a' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .9rem center; }
.combo__list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 17rem; overflow-y: auto; margin: 0; padding: .35rem; list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); overscroll-behavior: contain; }
.combo__group { padding: .55rem .6rem .25rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.combo__opt { padding: .5rem .6rem; border-radius: calc(var(--r-md) - 4px); cursor: pointer; }
.combo__opt:hover, .combo__opt.is-active { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.combo__opt[aria-selected="true"] { font-weight: 600; }
.combo__empty { padding: .6rem; color: var(--muted); font-size: var(--fs-sm); }
.combo [hidden] { display: none; }  /* the field's own spacing follows, as without an error */
.field > label, .field > .label, fieldset > legend { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.req { color: var(--danger); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--text); font: 400 1rem/1.3 var(--font-body); transition: border-color var(--dur), box-shadow var(--dur);
}
.textarea { min-height: 8rem; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236b625a' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; border-style: dashed; }
.error-msg { display: flex; gap: .4rem; align-items: flex-start; color: var(--danger); font-size: var(--fs-sm); font-weight: 500; }
.error-msg::before { content: "!"; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--danger); color: var(--surface); display: grid; place-items: center; font-size: .75rem; font-weight: 700; margin-top: .1rem; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s-4); }
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--text); flex: none; }
.form-grid { display: grid; gap: 0 var(--s-4); }
@media (min-width: 40rem) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.hp { position: absolute; left: -9999px; }

/* ---------- Alerts ---------- */
.alert { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--info-bg); color: var(--text); border-left: 4px solid var(--line-strong); }
.alert svg { width: 22px; height: 22px; }
.alert p { margin: 0; }
.alert strong { display: block; margin-bottom: 2px; }
.alert--success { background: var(--success-bg); border-color: var(--success); }
.alert--success svg { color: var(--success); }
.alert--warning { background: var(--warning-bg); border-color: var(--warning); }
.alert--warning svg { color: var(--warning); }
.alert--danger { background: var(--danger-bg); border-color: var(--danger); }
.alert--danger svg { color: var(--danger); }
.alert--accent { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: var(--accent); }  /* brand hint, same tint as .svc__ico */
.alert--accent svg { color: var(--accent-ink); }
.proto-note { font-size: var(--fs-xs); color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: .5rem .75rem; display: flex; gap: .5rem; align-items: flex-start; }
.proto-note::before { content: "Vorlage"; font-weight: 700; color: var(--accent-ink); flex: none; }

/* ---------- Vehicle card ---------- */
.vcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; position: relative; transition: border-color var(--dur), box-shadow var(--dur); }
.vcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.vcard__media { aspect-ratio: 3/2; background: var(--surface-2); position: relative; overflow: hidden; }
.vcard__media img { width: 100%; height: 100%; object-fit: cover; }
.vcard__media .badge { position: absolute; left: var(--s-3); top: var(--s-3); }
.vcard__save { position: absolute; right: var(--s-3); top: var(--s-3); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgb(251 249 245 / .92); color: #23201d; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.vcard__save svg { width: 18px; height: 18px; }
.vcard__save[aria-pressed="true"] svg { fill: #c2410c; stroke: #c2410c; }
.vcard__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.vcard__model { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.vcard__title { font-size: 1.35rem; margin: 0; }
.vcard__title a { color: inherit; text-decoration: none; }
.vcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vcard__foot .price { margin: 0; }  /* no paragraph margin: the row sits on the card's bottom padding */
.vcard__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: end; align-items: last baseline; /* "Details" on the price's line */ gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.price { font: 700 1.3rem/1 var(--font-display); color: var(--text); }
.price small { display: block; font: 500 var(--fs-xs)/1.3 var(--font-body); color: var(--muted); margin-bottom: 4px; }
.price--na { font: 500 var(--fs-sm)/1.3 var(--font-body); color: var(--muted); }
.vcard--sold .vcard__media img { filter: grayscale(.8) brightness(var(--img-dim)); }

/* Spec row (icon + value + label, units always explicit) */
.specs { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.specs li { display: inline-flex; align-items: center; gap: .4rem; }
.specs svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table th, .spec-table td { text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { font-weight: 500; color: var(--muted); width: 48%; padding-right: var(--s-4); }
.spec-table td { font-weight: 600; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--s-3); list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.spec-grid li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.spec-grid svg { width: 22px; height: 22px; color: var(--accent-ink); margin-bottom: var(--s-2); }
.spec-grid strong { display: block; font: 600 1.15rem/1.15 var(--font-display); }
.spec-grid span { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 30rem) { .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spec-grid strong { font-size: 1.05rem; overflow-wrap: anywhere; } }  /* phones: two facts per row */
/* Sales vehicle (up to five facts): never one fact alone in a row – all in one row where they fit, else 3 + 2,
   on phones 2 + 2 + the last one across */
@media (max-width: 30rem) { .spec-grid--fit > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 30.01rem) and (max-width: 84.99rem) { .spec-grid--fit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 85rem) { .spec-grid--fit { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
/* Sales vehicle: Syscara's highlights as icon tiles, the floor plan with its sleeping/seating rows */
.sale-hl { margin: 0 0 var(--s-6); }
/* chips as wide as their label: long German words ("Zentralverriegelung") stay whole */
.hl-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.hl-grid li { display: inline-flex; align-items: center; gap: var(--s-2); padding: .55rem .9rem .55rem .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; color: var(--text-2); }
.hl-grid svg { flex: none; width: 22px; height: 22px; color: var(--accent-ink); }
.floorplan { display: grid; grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr); gap: var(--s-4); align-items: stretch; }  /* the fact cards as tall as the plan */
.floorplan__img { position: relative; display: block; width: 100%; padding: var(--s-4); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); cursor: zoom-in; }
.floorplan__img img { display: block; width: 100%; height: auto; }
.floorplan__img { display: grid; place-items: center; }  /* the plan centred when the cards are taller */
.floorplan__zoom { position: absolute; right: var(--s-2); bottom: var(--s-2); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.floorplan__zoom svg { width: 16px; height: 16px; }
.floorplan__img:hover .floorplan__zoom, .floorplan__img:focus-visible .floorplan__zoom { background: var(--accent); border-color: var(--accent); color: #fff; }
.floorplan__facts { margin: 0; display: grid; gap: var(--s-2); grid-auto-rows: 1fr; }  /* one, two or three cards share the height evenly */
.floorplan__facts div { display: grid; grid-template-columns: 22px 1fr; column-gap: var(--s-3); align-items: center; align-content: center; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.floorplan__facts svg { grid-row: span 2; width: 22px; height: 22px; color: var(--accent-ink); }
.floorplan__facts dt { font-size: var(--fs-xs); color: var(--muted); }
.floorplan__facts dd { margin: 0; font-weight: 600; }
@media (max-width: 40rem) { .floorplan { grid-template-columns: 1fr; } .floorplan__facts { grid-auto-rows: auto; } }
.sale-desc { margin-top: var(--s-5); }
.sale-desc h3 { font-size: var(--fs-base, 1rem); margin: 0 0 var(--s-3); }
.more-text { line-height: 1.7; color: var(--text-2); }
.more-text p { margin: 0; }
.more-text p + p { margin-top: var(--s-4); }
.more-text.is-clamped { max-height: 9.5rem; overflow: hidden; mask-image: linear-gradient(#000 45%, transparent); transition: max-height .6s var(--ease); }
.more-text.is-clamped.is-open { mask-image: none; }
.more-btn { margin-top: var(--s-3); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; }
.more-text > .is-revealing { animation: press-line-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) { .more-text.is-clamped { transition: none; } .more-text > .is-revealing { animation: none; } }
.price-vat { margin: calc(-1 * var(--s-2)) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.price-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }  /* "Preis" and the availability badge in the top corner */

/* ---------- Fleet / listing layout with filters ---------- */
.listing { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 62rem) { .listing { grid-template-columns: 18.75rem minmax(0, 1fr); align-items: start; } }  /* 300px: room for the filter groups' summaries */
.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); }
@media (min-width: 62rem) { .filters { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow: auto; } }
.filters { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }  /* a thin, light scrollbar where the column scrolls */
.filters:hover { scrollbar-color: color-mix(in srgb, var(--line) 50%, var(--line-strong)) transparent; }
.filters::-webkit-scrollbar { width: 6px; }
.filters::-webkit-scrollbar-thumb { border-radius: var(--r-pill); background: var(--line); }
.filters:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--line) 50%, var(--line-strong)); }
.filters::-webkit-scrollbar-track { background: transparent; }
.filters h2 { font-size: 1.3rem; }
.filters fieldset { padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
.filters fieldset:last-of-type { border-bottom: 0; }
.filters legend { margin-bottom: var(--s-3); }
.filters .cluster { gap: var(--s-2); }
.filters-toggle { display: none; }
@media (max-width: 61.99rem) {
  .filters { display: none; }
  .filters.is-open { display: block; position: fixed; inset: 0; z-index: 90; border-radius: 0; overflow: auto; padding-bottom: 6rem; }
  @media (prefers-reduced-motion: no-preference) { .filters.is-open { animation: filters-in .32s var(--ease) backwards; } }  /* the drawer slides up into view */
  .filters-toggle { display: inline-flex; }
  .filters__apply { position: fixed; left: 0; right: 0; bottom: 0; padding: var(--s-3) var(--s-4); background: var(--surface); border-top: 1px solid var(--line); }
}
@media (min-width: 62rem) { .filters__apply, .filters__close { display: none; } }
.listing-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.listing-bar .count { font-weight: 600; margin: 0; }
.listing-bar .select { width: auto; min-width: 13rem; }
.range-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.empty-state { text-align: left; padding: var(--s-7) var(--s-5); border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.empty-state h3 { margin-bottom: var(--s-2); }

/* ---------- Detail page ---------- */
.gallery { display: grid; gap: var(--s-2); grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 2/1; }
.gallery button { padding: 0; border: 0; background: var(--surface-2); cursor: zoom-in; position: relative; overflow: hidden; }
.gallery button img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.gallery button:hover img { transform: scale(1.03); }
.gallery button:first-child { grid-column: span 2; grid-row: span 2; }
.gallery .more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(20 17 14 / .55); color: #fff; font-weight: 600; }
@media (max-width: 47.99rem) {
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; aspect-ratio: auto; border-radius: var(--r-md); gap: var(--s-2); }
  .gallery button { flex: 0 0 88%; aspect-ratio: 3/2; scroll-snap-align: start; border-radius: var(--r-md); }
  .gallery .more { display: none; }
}
.detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); align-items: end; margin: var(--s-5) 0 var(--s-5); }
.detail-head h1 { margin: 0; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); }
.detail-head p { margin: 0; color: var(--muted); }
.detail-head__model { display: block; margin-bottom: .15em; font: 600 clamp(1.05rem, .95rem + .5vw, 1.35rem)/1.25 var(--font-body); color: var(--text-2); letter-spacing: 0; }  /* rentals: model above the nickname, both in the h1 */
.book-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--shadow-1); }
@media (min-width: 62rem) { .book-box { position: sticky; top: calc(var(--header-h) + 1rem); } }
.book-box h2 { font-size: 1.4rem; margin-bottom: var(--s-3); }
.book-box .divider { border-top: 1px solid var(--line); margin: var(--s-4) 0; }
/* booking: the main button sits in the summary box next to the form (booking.js); phones keep it under each step */
.book-box__cta { display: none; margin-top: var(--s-4); }
.book-box__cta .btn { width: 100%; justify-content: center; }
@media (min-width: 62rem) {
  .has-cta .book-box__cta { display: block; }
  .has-cta [data-rt-step] [data-rt-next], .has-cta [data-rt-step] button[type="submit"] { display: none; }
  .book-col { position: sticky; top: calc(var(--header-h) + 1rem); }  /* summary box + notice stay in view together */
  .book-col .book-box { position: static; }
  .has-cta [data-rt-step] [data-step-msg] { display: none; }  /* shown under the summary button instead */
}
.book-box__cta .error-msg { margin: var(--s-3) 0 0; }
.book-note { margin-top: var(--s-4); }
/* booking step 4: one form for "book" and "request"; step 5: the deposit with Stripe's payment form */
.rt-modes { margin: 0 0 var(--s-4); }
.book-box__cta [data-rt-cta-alt] { margin-top: var(--s-2); }
.stepper li[hidden] { display: none; }
.stepper.stepper--5 { grid-template-columns: repeat(5, 1fr); }
.rt-pay { display: grid; gap: var(--s-4); }
.rt-pay__element { min-height: 12rem; }
.rt-pay__btn { justify-self: start; }
.rt-pay__note { margin: 0; font-size: var(--fs-xs); }
.rt-pay__alt { margin-top: var(--s-4); font-size: var(--fs-sm); }
.rt-result:focus { outline: none; }
.book-note .alert { font-size: var(--fs-sm); }
.book-box__cta .error-msg[hidden] { display: none; }
.sumline { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); padding: .35rem 0; }
.sumline--total { font-weight: 700; font-size: var(--fs-base); border-top: 1px solid var(--line); margin-top: var(--s-2); padding-top: var(--s-3); }
.mobile-cta { display: none; }
@media (max-width: 61.99rem) {
  .mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: var(--s-4); align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgb(0 0 0 / .08); }
  .mobile-cta .btn { flex: 1; }
  /* small phones (320 px): price text may shorten, the call button keeps its icon size, nothing runs off the edge */
  .mobile-cta > div { min-width: 0; }
  .mobile-cta > div > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-cta > div > br { display: none; }
  .mobile-cta .btn:not(.btn--accent) { flex: none; }
  @media (max-width: 22.5rem) { .mobile-cta { gap: var(--s-2); padding-inline: var(--s-3); } .mobile-cta .btn { padding-inline: var(--s-3); } }
  body.has-mobile-cta { padding-bottom: 5.5rem; }
  /* booking page (booking.js): price or dates on the left, the step's main button on the right; the step's own copy
     of that button is not shown twice. A tap on the price grows the bar upwards: "Ihre Auswahl" (price lines,
     discount code) opens inside the bar above that row, the page behind is dimmed. */
  .rt-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgb(0 0 0 / .08); transition: border-radius .3s var(--ease); }
  .rt-mbar.is-open { border-radius: var(--r-lg) var(--r-lg) 0 0; border-top-color: transparent; box-shadow: 0 -12px 40px rgb(0 0 0 / .18); }
  /* the grab handle is a button: a finger-sized strip around the line opens and closes the bar */
  .rt-mbar__handle { align-self: center; display: grid; place-items: center; width: 96px; height: 28px; margin: -12px 0 var(--s-1); padding: 0; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer; touch-action: none; }
  .rt-mbar__handle::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); transition: background var(--dur); }
  .rt-mbar__handle:hover::before, .rt-mbar__handle:focus-visible::before { background: var(--text-2); }
  .rt-mbar__handle:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  /* first price on a phone (booking.js): one short bounce and a note above the price */
  .rt-mbar.is-peek { animation: mbar-peek .9s var(--ease) .3s 2; }
  @keyframes mbar-peek { 0%, 100% { transform: none; } 35% { transform: translateY(-10px); } 60% { transform: translateY(-2px); } }
  .rt-mbar__hint { position: absolute; left: var(--s-4); bottom: calc(100% + 10px); padding: .45rem .8rem; border-radius: var(--r-pill); background: var(--text); color: var(--bg); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-2); animation: hint-in .3s var(--ease); pointer-events: none; }
  .rt-mbar__hint::after { content: ""; position: absolute; left: 1.4rem; top: 100%; border: 6px solid transparent; border-top-color: var(--text); } /* points at the price */
  @keyframes hint-in { from { opacity: 0; transform: translateY(6px); } }
  @media (prefers-reduced-motion: reduce) { .rt-mbar.is-peek, .rt-mbar__hint { animation: none; } }
  .rt-mbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .rt-mbar__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
  .rt-mbar.is-open .rt-mbar__panel { grid-template-rows: 1fr; }
  .rt-mbar__inner { min-height: 0; overflow: hidden; }
  .rt-mbar.is-open .rt-mbar__inner { max-height: calc(85dvh - 7rem); overflow-y: auto; overscroll-behavior: contain; margin-bottom: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
  .rt-mbar.is-open:not(.is-settled) .rt-mbar__inner { overflow-y: hidden; }  /* no scrollbar flashing while it grows (booking.js: is-settled once open) */
  .rt-mbar__inner .book-box { max-width: 40rem; margin-inline: auto; padding: 0; border: 0; background: none; box-shadow: none; } /* tablets: lines not stretched across the screen */
  .rt-mbar__inner .book-box h2 { font-size: 1.2rem; }
  /* vehicle page: the price box in the bar; its price heading and button are in the bar row already, and Bricks'
     simple bottom bar (.mobile-cta) gives way */
  .rt-mbar__inner .book-box[data-rt-live] > :is(.price-head, #bb-h, .price-vat, .divider),
  .rt-mbar__inner .book-box [data-est-cta] { display: none; }
  .has-mbar-live .mobile-cta { display: none !important; }
  .has-mbar-live .rt-mbar__sum small { white-space: pre-line; }  /* "pro Nacht" / "inkl. MwSt." on two short lines */
  .has-mbar-live [data-mbar-btn] { flex: none; white-space: nowrap; }
  .rt-mbar__inner .book-box strong, .rt-mbar__inner .book-box small { font: inherit; margin: 0; color: inherit; } /* not the bar's price style */
  .rt-mbar__inner .pl--total strong { font-weight: 700; font-size: 1.25rem; }
  .rt-mbar__scrim { position: fixed; inset: 0; z-index: 39; background: rgb(20 18 16 / .45); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; }
  .rt-mbar__scrim.is-shown { opacity: 1; visibility: visible; transition-delay: 0s; }  /* fades with the bar */
  html.mbar-open { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .rt-mbar, .rt-mbar__panel, .rt-mbar__scrim { transition: none; } }
  .rt-mbar__sum { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .rt-mbar__sum > span { flex: 1; min-width: 0; }
  .rt-mbar__sum strong, .rt-mbar__sum small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rt-mbar__sum strong { font: 700 1.15rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
  .rt-mbar__sum small { margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); }
  .rt-mbar__row > .btn { flex: 0 1 auto; max-width: 60%; min-height: 48px; padding-block: .35rem; white-space: normal; line-height: 1.15; text-align: center; } /* a long label takes two lines, never clipped */
  .rt-mbar__row > .btn svg { flex: none; }
  .has-mbar [data-rt-step] [data-in-bar] { display: none; }
}
@media (min-width: 62rem) { .rt-mbar, .rt-mbar__scrim { display: none; } }
.rt-mbar[hidden], .rt-mbar__scrim[hidden] { display: none !important; }
.equip { columns: 2 14rem; column-gap: var(--s-6); list-style: none; padding: 0; }
.equip li { break-inside: avoid; padding: .4rem 0 .4rem 1.6rem; position: relative; }
.equip li::before { content: ""; position: absolute; left: 0; top: .85rem; width: .9rem; height: .5rem; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg) translateY(-50%); }

/* Tabs */
.tabs [role="tablist"] { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); overflow-x: auto; margin-bottom: var(--s-5); scrollbar-width: none; }
.tabs [role="tab"] { flex: none; padding: .85rem 1rem; border: 0; background: none; color: var(--muted); font: 600 1rem/1 var(--font-body); border-bottom: 3px solid transparent; cursor: pointer; margin-bottom: -1px; min-height: 48px; }
.tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tabs [role="tabpanel"]:focus-visible { outline-offset: 6px; }
/* after a swipe (fc.js) the new panel slides in from the side it came from */
.tabs [role="tabpanel"].is-from-next { animation: tab-from-next .3s var(--ease); }
.tabs [role="tabpanel"].is-from-prev { animation: tab-from-prev .3s var(--ease); }
@keyframes tab-from-next { from { opacity: 0; transform: translateX(32px); } }
@keyframes tab-from-prev { from { opacity: 0; transform: translateX(-32px); } }
@media (prefers-reduced-motion: reduce) { .tabs [role="tabpanel"].is-from-next, .tabs [role="tabpanel"].is-from-prev { animation: none; } }
/* a sideways swipe over the tab texts only switches the tab (fc.js): the browser may scroll and zoom but not pan the page
   sideways (a zoomed-in phone page would otherwise slide away from the fixed bottom bar). Things inside that scroll
   sideways themselves (tables, sliders) are scroll containers and keep their own panning. */
.tabs:not(.quick) [role="tabpanel"] { touch-action: pan-y pinch-zoom; }

/* Accordion (FAQ) */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; cursor: pointer; font: 600 1.15rem/1.35 var(--font-body); min-height: 56px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .pm { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; }
.accordion summary .pm::before, .accordion summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--text); transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease); }
.accordion summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(0); }
.accordion .answer { padding: 0 0 var(--s-5); color: var(--text-2); max-width: 70ch; }

/* ---------- Calendar ---------- */
.cal { position: relative; user-select: none; }
/* arrows sit on the month captions (same layout as the date picker); the month label is for screen readers */
.cal__head { position: absolute; inset: 0 0 auto; z-index: 1; display: flex; justify-content: space-between; height: 0; margin: 0; }
.cal__head .icon-btn { width: 36px; height: 36px; margin-top: -2px; }
.cal__head .icon-btn:disabled { opacity: .3; cursor: default; }
.cal__months { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .cal__months--2 { grid-template-columns: 1fr 1fr; } }
.cal table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal caption { caption-side: top; height: 32px; margin-bottom: var(--s-3); line-height: 32px; text-align: center; font-weight: 600; }
.cal th { padding: 0 0 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-align: center; }
.cal td { padding: 2px 0; text-align: center; }
.cal td.is-in { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.cal td.is-from { background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--accent) 24%, transparent) 50%); }
.cal td.is-to { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent) 50%, transparent 50%); }
.cal td:first-child.is-in { border-radius: 999px 0 0 999px; }
.cal td:last-child.is-in { border-radius: 0 999px 999px 0; }
.cal td button { position: relative; width: 100%; max-width: 2.75rem; aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: 500 var(--fs-sm)/1 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cal td button:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--text); }
.cal td button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.cal td button:disabled { color: var(--muted); cursor: default; opacity: .45; }
.cal td button.is-booked { color: var(--muted); opacity: .7; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.cal td button.is-booked:disabled { opacity: .55; }
.cal td button.is-today::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.cal td button.is-start, .cal td button.is-end { background: var(--text); color: var(--bg); opacity: 1; text-decoration: none; box-shadow: none; }
.cal td button.is-range { background: transparent; }
.cal__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.cal__legend span { display: inline-flex; align-items: center; gap: .45rem; }
.cal__legend i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; }
.cal__legend i.b { background: linear-gradient(135deg, transparent 45%, var(--muted) 45% 55%, transparent 55%); }
.cal__legend i.s { background: var(--text); border-color: var(--text); }

/* ---------- Stepper (booking) ---------- */
.stepper { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); counter-reset: step; }
.stepper li { counter-increment: step; padding-top: var(--s-3); border-top: 3px solid var(--line); font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.stepper li::before { content: counter(step) ". "; }
.stepper li[aria-current="step"] { border-color: var(--accent); color: var(--text); }
.stepper li.is-done { border-color: var(--text); color: var(--text-2); }
@media (max-width: 40rem) { .stepper li span { display: none; } .stepper li[aria-current="step"] span { display: inline; } }
/* phones: thin progress bars and one line "Schritt 2 von 4 · Fahrzeug" under them (booking.js writes .stepper__now) */
.stepper__now { display: none; }
@media (max-width: 40rem) {
  .stepper:has(+ .stepper__now) { gap: 6px; margin-bottom: var(--s-3); }
  .stepper:has(+ .stepper__now) li { padding-top: 0; border-top-width: 4px; border-radius: 2px; font-size: 0; }
  .stepper__now { display: block; margin: 0 0 var(--s-5); font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
  .stepper__now span { color: var(--muted); font-weight: 500; }
}
.extra { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--s-3); cursor: pointer; }
.extra:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.extra input { width: 1.3rem; height: 1.3rem; accent-color: var(--text); }
.extra strong { display: block; }
.extra small { color: var(--muted); }

/* ---------- Generic cards / features ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); }
.card h3 { margin-bottom: var(--s-2); }
.card p:last-child { margin-bottom: 0; }
.feature { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.feature svg { width: 28px; height: 28px; color: var(--accent-ink); margin-top: 2px; }
.feature h3 { font-size: 1.2rem; margin-bottom: var(--s-1); }
.feature p { margin: 0; color: var(--text-2); }
.list-check { list-style: none; padding: 0; }
.list-check li { position: relative; padding: .3rem 0 .3rem 1.75rem; }
.list-check li::before { content: ""; position: absolute; left: .15rem; top: .75rem; width: .85rem; height: .45rem; border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: rotate(-45deg); }

/* Post card */
.pcard { display: flex; flex-direction: column; gap: var(--s-3); position: relative; }
.pcard__media { aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.03); }
.pcard__meta { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.pcard h3 { font-size: 1.25rem; margin: 0; line-height: 1.2; }
.pcard h3 a { color: inherit; text-decoration: none; }
.pcard h3 a::after { content: ""; position: absolute; inset: 0; }
.pcard p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.pcard--feature { display: grid; gap: var(--s-5); }
@media (min-width: 56rem) { .pcard--feature { grid-template-columns: 1.3fr 1fr; align-items: center; } .pcard--feature h3 { font-size: var(--fs-h3); } }
.pcard--placeholder .pcard__media { display: grid; place-items: center; color: var(--line-strong); }
.pcard--placeholder .pcard__media svg { width: 40%; height: auto; }

/* Reviews */
.reviews { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.review blockquote { margin: 0; font-size: 1.05rem; color: var(--text); }
.review figcaption { margin-top: auto; font-size: var(--fs-sm); color: var(--muted); }
.review figcaption strong { color: var(--text); display: block; }
.stars { display: inline-flex; gap: 2px; color: #d98b1f; }
.stars svg { width: 16px; height: 16px; fill: currentColor; }

/* Team */
.person { display: grid; gap: var(--s-3); }
.person img { aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-md); width: 100%; background: var(--surface-2); }
.person h3 { margin: 0; font-size: 1.35rem; }
.person p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* Info block: location / hours */
.info-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 56rem) { .info-block { grid-template-columns: 1fr 1fr 1.3fr; } }
.hours { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hours th, .hours td { padding: .45rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.map-consent { border-radius: var(--r-md); overflow: hidden; min-height: 18rem; background: var(--surface-2) url("../img/Kempen-768x576.jpg") center/cover; position: relative; display: grid; place-items: center; text-align: center; padding: var(--s-5); isolation: isolate; }
.map-consent::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); z-index: -1; }
.map-consent p { max-width: 34ch; font-size: var(--fs-sm); color: var(--text-2); }
.map-consent iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Card with a photo on top (Malibu models, Malibu at Friedas Camper); the button sits at the bottom of each card */
.media-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.media-card > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.media-card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.media-card__body p:not(.kicker) { color: var(--text-2); }
.media-card__body p strong { color: var(--text); }
.media-card__cta { margin: auto 0 0; padding-top: var(--s-2); }
.model-cards { align-items: stretch; }
.model-tags { list-style: none; margin: var(--s-2) 0 var(--s-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.malibu-free { align-items: center; }
.malibu-free .prose .lead { color: var(--text); }
@media (min-width: 62rem) { .malibu-free { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
/* Malibu configurator: two choice cards, then the manufacturer's configurator (tall, as on the live page) */
.config-intro { max-width: 68ch; }
.config-head { margin: var(--s-6) 0 var(--s-4); font-size: var(--fs-h3); }
.config-picks { margin-bottom: var(--s-5); }
.config-pick { padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.config-pick img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.config-pick__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.config-pick__body .btn { margin-top: auto; align-self: flex-start; }
.config-pick__body p { color: var(--text-2); }
.config-pick:has([aria-pressed="true"]) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.map-consent.config-frame { min-height: min(85vh, 56rem); background-image: none; } /* over the later .map-consent rule */
.config-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); margin-bottom: var(--s-3); }
.config-tools[hidden] { display: none; }
.config-tools .btn svg { width: 1.1em; height: 1.1em; }
.config-frame:fullscreen { min-height: 100vh; border-radius: 0; padding: 0; }
.config-exit { position: absolute; top: .75rem; right: .75rem; z-index: 2; background: var(--surface); box-shadow: 0 2px 10px rgb(0 0 0 / .25); }
.config-exit[hidden] { display: none; }
.config-frame:focus { outline: none; }
.config-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Steps (real sequences only) */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); counter-reset: s; }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(var(--n, 4), 1fr); } }
.steps li { counter-increment: s; border-top: 1px solid var(--line-strong); padding-top: var(--s-4); }
.steps li::before { content: counter(s); font: 700 2rem/1 var(--font-display); color: var(--accent-ink); display: block; margin-bottom: var(--s-3); }
.steps h3 { font-size: 1.15rem; margin-bottom: var(--s-2); }
.steps p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }

/* Price table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 34rem; }
.table th, .table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.table thead th { background: var(--surface-2); font-weight: 600; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr:last-child > * { border-bottom: 0; }  /* th (row headings) too */
.table-wrap > .table { margin: 0; }  /* no base margin inside the frame */
.table--prices { font-size: 1.0625rem; }  /* the price list: larger and plain, numbers line up */
.table--prices tbody th { font-weight: 400; }
.table--prices th, .table--prices td { padding-block: 1rem; }
/* phones: the three columns fit, so the price is never behind a sideways scroll */
@media (max-width: 40rem) {
  .table--prices { min-width: 0; font-size: 1rem; }
  .table--prices th, .table--prices td { padding: .85rem .7rem; }
  .table--prices th:first-child, .table--prices td:first-child { padding-left: 1rem; }
  .table--prices th:last-child, .table--prices td:last-child { padding-right: 1rem; }
  .table--prices td:last-child { white-space: nowrap; }
  .table--prices thead th { font-size: var(--fs-sm); line-height: 1.25; }
}
@media (max-width: 22.5rem) { /* 320 px phones */
  .table--prices { font-size: .9375rem; }
  .table--prices th, .table--prices td { padding-inline: .4rem; }
  .table--prices th:first-child, .table--prices td:first-child { padding-left: .65rem; }
  .table--prices th:last-child, .table--prices td:last-child { padding-right: .65rem; }
}

/* CTA band */
.cta-band { display: grid; gap: var(--s-5); align-items: center; padding: clamp(2rem, 1rem + 4vw, 4rem); border-radius: var(--r-lg); background: var(--brand-bark-deep); color: #fbf1e0; }
.cta-band h2 { color: #fbf1e0; margin-bottom: var(--s-2); }
.cta-band p { margin: 0; color: #e8d9c3; }
@media (min-width: 56rem) { .cta-band { grid-template-columns: 1fr auto; } }
:root[data-theme="dark"] .cta-band { background: #2a2019; }

/* Newsletter: a tinted card – envelope, heading and text on the left, the sign-up form on the right */
.newsletter { display: grid; gap: var(--s-5) var(--s-7); align-items: center; padding: clamp(var(--s-5), 1rem + 3vw, var(--s-7)); border-radius: var(--r-lg); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
@media (min-width: 56rem) { .newsletter { grid-template-columns: 1fr 1.15fr; } }
.newsletter > div:first-child { position: relative; padding-left: 4.25rem; }
.newsletter > div:first-child::before { content: ""; position: absolute; left: 0; top: .1rem; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323201d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E") center / 1.5rem no-repeat; }
@media (max-width: 35.99rem) { .newsletter > div:first-child { padding: 4.25rem 0 0; } }
.newsletter h2 { font-size: var(--fs-h3); margin: 0 0 var(--s-2); }
.newsletter p { margin: 0; color: var(--text-2); }
/* the form: Mailster's block form in WordPress (wp/tools/newsletter-form.html), the same markup in the template; the
   selectors go one step past Mailster's own (style-index.css) so the site's field, button and alert styles win */
.newsletter .mailster-block-form { margin: 0;
  --mailster--color--success-background: var(--success-bg); --mailster--color--success: var(--text);
  --mailster--color--error-background: var(--danger-bg); --mailster--color--error: var(--text); }
.newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-2); align-items: start; }
.newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner .mailster-wrapper { width: auto; margin: 0; }
.newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner .wp-block-mailster-field-email .mailster-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner .mailster-wrapper input.input { width: 100%; min-height: 52px; padding: .75rem 1.1rem; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); font: 400 1rem/1.3 var(--font-body); box-shadow: none; transition: border-color var(--dur), box-shadow var(--dur); }
.newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner .mailster-wrapper input.input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner .mailster-wrapper.is-error input.input,
.newsletter .mailster-block-form .input[aria-invalid="true"] { border-color: var(--danger); }
.newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner .submit-button { width: auto; min-height: 52px; padding: .75rem 1.6rem; border-radius: var(--r-pill); border: 1.5px solid var(--accent); background: var(--accent); color: var(--on-accent); font: 600 1rem/1.1 var(--font-body); cursor: pointer; white-space: nowrap; transition: filter var(--dur), transform .12s; }
.newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner .submit-button:hover { filter: brightness(1.08); }
.newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner .submit-button:active { transform: translateY(1px); }
.newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner .wp-block-mailster-gdpr { grid-column: 1 / -1; }
.newsletter .mailster-block-form .mailster-group-checkbox { display: flex; gap: .65rem; align-items: flex-start; }
.newsletter .mailster-block-form .mailster-group-checkbox input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--text); flex: none; }
.newsletter .mailster-block-form .mailster-group-checkbox .mailster-label { font-size: var(--fs-sm); font-weight: 400; line-height: 1.5; color: var(--text-2); cursor: pointer; }
.newsletter .mailster-block-form .mailster-group-checkbox a { color: var(--link); }
/* messages (Mailster sets .is-success / .is-error): the site's alert look, across the whole form */
.newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner .mailster-block-form-info { grid-column: 1 / -1; display: none; }
.newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner .mailster-block-form-info:is(.is-success, .is-error) { display: block; }
.newsletter .mailster-block-form .mailster-block-form-info :is(.mailster-block-form-info-success, .mailster-block-form-info-error) { display: none; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border-left: 4px solid; font-size: var(--fs-sm); color: var(--text); }
.newsletter .mailster-block-form .mailster-block-form-info.is-success .mailster-block-form-info-success { display: block; background: var(--success-bg); border-color: var(--success); }
.newsletter .mailster-block-form .mailster-block-form-info.is-error .mailster-block-form-info-error { display: block; background: var(--danger-bg); border-color: var(--danger); }
@media (max-width: 35.99rem) {
  .newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner { grid-template-columns: minmax(0, 1fr); }
  .newsletter .mailster-block-form.wp-block-mailster-form-wrapper .mailster-block-form-inner .submit-button { width: 100%; }
}
/* WordPress' form for password-protected pages, in the site's field and button style */
.post-password-form { max-width: 34rem; }
.post-password-form p:last-child { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; }
.post-password-form label { display: grid; gap: var(--s-2); flex: 1 1 14rem; font-weight: 600; }
.post-password-form input[type="password"] { width: 100%; min-height: 48px; padding: .7rem .85rem; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); font: 400 1rem/1.3 var(--font-body); }
.post-password-form input[type="submit"] { min-height: 48px; padding: .75rem 1.25rem; border-radius: var(--r-pill); border: 1.5px solid var(--text); background: var(--text); color: var(--bg); font: 600 1rem/1.1 var(--font-body); cursor: pointer; }
.post-password-form input[type="submit"]:hover { filter: brightness(1.08); }
.inline-form { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.inline-form .input { flex: 1 1 14rem; }

/* Prose (posts, legal) */
.prose { font-size: 1.125rem; line-height: 1.7; overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 48rem) { .prose { hyphens: manual; } }
.prose a { overflow-wrap: anywhere; }
.prose > * { max-width: 68ch; }
.prose h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.3rem); margin-top: var(--s-7); }
.prose h3 { font-size: 1.5rem; margin-top: var(--s-6); }
/* phones: reading size, calmer headings, and only long words are split (no "mo-dernes") */
@media (max-width: 40rem) {
  .prose { font-size: 1.0625rem; line-height: 1.6; hyphenate-limit-chars: 12 5 5; }
  .prose h2 { font-size: 1.5rem; margin-top: var(--s-6); }
  .prose h3 { font-size: 1.25rem; margin-top: var(--s-5); }
}
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .35rem; }
.prose img, .prose figure { border-radius: var(--r-md); }
.prose .wp-block-audio { margin: var(--s-4) 0; }  /* live audio blocks (e.g. the radio recordings) across the text column */
.prose .wp-block-audio audio { display: block; width: 100%; }
.prose blockquote { border-left: 3px solid var(--accent); padding-left: var(--s-4); color: var(--text-2); font-size: 1.2rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .6rem .5rem; text-align: left; }
.toc { font-size: var(--fs-sm); border-left: 2px solid var(--line); padding-left: var(--s-4); }
.toc ol { padding-left: 1rem; margin: 0; }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--text); text-decoration: underline; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s-5); }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-7); }
.pagination a, .pagination span { min-width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0 .8rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; }
.pagination [aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.pagination .is-disabled { opacity: .45; }

/* Lightbox / dialog */
dialog { border: 0; padding: 0; background: transparent; color: var(--text); max-width: 100vw; max-height: 100vh; }
dialog::backdrop { background: var(--overlay); }
.lightbox { width: 100vw; height: 100vh; margin: 0; }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) var(--s-4); color: #fff; }
.lightbox__stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); min-height: 0; }
.lightbox__stage img { max-height: calc(100vh - 9rem); margin: auto; border-radius: var(--r-sm); object-fit: contain; }
.lightbox .icon-btn { background: rgb(251 249 245 / .12); color: #fff; border-color: rgb(255 255 255 / .25); }
.lightbox__caption { color: #ddd; text-align: center; padding: var(--s-3); font-size: var(--fs-sm); }
.modal { width: min(100% - 2rem, 36rem); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-2); }
.modal__inner { padding: var(--s-6); }
.modal__close { position: absolute; right: var(--s-3); top: var(--s-3); }

/* Consent banner (styled to match Complianz output in WP) */
.consent { position: fixed; left: var(--s-4); bottom: var(--s-4); z-index: 120; width: min(calc(100% - 2rem), 30rem); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: var(--s-5); }
.consent h2 { font-size: 1.3rem; margin-bottom: var(--s-2); }
.consent p { font-size: var(--fs-sm); color: var(--text-2); }
.consent .cluster .btn { flex: 1 1 auto; }
.consent__prefs { margin: var(--s-3) 0; display: grid; gap: var(--s-2); }

/* ---------- Footer ---------- */
.site-footer { background: #1e1b18; color: #d8cfc3; padding-block: var(--s-8) var(--s-5); margin-top: var(--s-8); --link: #f3b465; }
:root[data-theme="dark"] .site-footer { background: #0f0d0c; border-top: 1px solid var(--line); }
.site-footer a { color: #efe9e0; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.footer-brand img { width: 150px; filter: brightness(0) invert(.92) sepia(.18); margin-bottom: var(--s-4); }
.site-footer h2 { font: 600 1.05rem/1.2 var(--font-display); color: #fbf1e0; margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: var(--fs-sm); }
.site-footer address { font-style: normal; font-size: var(--fs-sm); line-height: 1.7; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid #3a342e; font-size: var(--fs-xs); color: #a79d91; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-bottom button { background: none; border: 0; color: #efe9e0; font: inherit; cursor: pointer; padding: 0; }
.footer-bottom button:hover { text-decoration: underline; }
.social { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #3a342e; display: grid; place-items: center; }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Template index (Seitenübersicht) ---------- */
.inv { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.inv th, .inv td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.inv thead th { background: var(--surface-2); }
.inv code { font-size: .85em; word-break: break-all; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-3); }
.swatch { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); font-size: var(--fs-xs); }
.swatch i { display: block; height: 4.5rem; }
.swatch span { display: block; padding: .5rem .65rem; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Theme switch: suppress transitions for one frame (set by JS) */
.no-transitions *, .no-transitions *::before, .no-transitions *::after { transition: none !important; }

@media print {
  .site-header, .site-footer, .mobile-cta, .consent, .drawer, .filters { display: none !important; }
  body { background: #fff; color: #000; }
}

.ic-dark { display: none; }
:root[data-theme="dark"] .ic-light { display: none; }
:root[data-theme="dark"] .ic-dark { display: block; }
.nav .nav-toggle-sub svg { width: 16px; height: 16px; flex: none; }
.drawer summary svg { width: 22px; height: 22px; flex: none; }
.drawer .theme-switch { margin-left: auto; }
.feature > svg, .alert > svg { flex: none; }
/* Review marker for values that contradict each other on the live site */
.conflict { background: var(--warning-bg); color: var(--warning); border-bottom: 1.5px dashed currentColor; padding: 0 .2em; border-radius: 3px; cursor: help; font-weight: 600; white-space: nowrap; }
.conflict::after { content: " ⚑"; font-size: .8em; }

/* ---------- Background video ---------- */
.has-vbg { position: relative; isolation: isolate; overflow: hidden; }
.vbg { position: absolute; inset: 0; z-index: -1; background: #1e1b18; }
.vbg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vbg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.vbg--bottom::after { background: linear-gradient(180deg, rgb(20 17 14 / .15) 0%, rgb(20 17 14 / .35) 45%, rgb(20 17 14 / .85) 100%); }
.vbg--full::after { background: rgb(20 17 14 / .55); }
.vbg--left::after { background: linear-gradient(90deg, rgb(20 17 14 / .85) 0%, rgb(20 17 14 / .55) 50%, rgb(20 17 14 / .2) 100%); }
.vbg__toggle { display: none; }  /* background videos have no pause button: hidden in pages built before it was removed */
/* play/pause icons of the review slider's button */
.vbg__ic-play { display: none; }
.rv-play[aria-pressed="true"] .vbg__ic-pause { display: none; }
.rv-play[aria-pressed="true"] .vbg__ic-play { display: inline; }
/* text sitting directly on video/photo; components inside (search bar, cards) keep their own tokens */
.on-media { color: #fbf9f5; }
.on-media :is(h1, h2, h3, .lead, .hero__intro p, .media-band p) { color: #fbf9f5; }
.on-media .lead, .on-media .hero__intro p, .on-media .media-band p { color: #ece5da; }
.on-media .searchbar, .on-media .card { color: var(--text); }
.on-media .crumbs, .on-media .crumbs a { color: #ece5da; }
.on-media .crumbs li + li::before { color: rgb(255 255 255 / .5); }
.on-media .text-link { color: #fbf9f5; }

/* Home hero with video */
.hero--video { min-height: min(88vh, 54rem); display: flex; align-items: flex-end; padding: calc(var(--s-8) + 2rem) 0 var(--s-7); margin-top: calc(-1 * var(--header-h)); }
.hero--video .hero__title { color: #fbf9f5; text-shadow: 0 2px 24px rgb(0 0 0 / .25); }
.hero--video .hero__intro p { color: #ece5da; }
.hero--video .searchbar { margin-top: var(--s-6); }
/* more air between the video hero and the section after it (home: the route cards) */
.hero--video + section { padding-top: clamp(var(--s-8), 9vw, 9rem); }
/* more air before a full-width video band that follows a plain section (home: workshop → "Mit Hund unterwegs") */
.section:not(.section--sunk) + .media-band { margin-top: clamp(var(--s-6), 5vw, 4rem); }
/* the partner strip right after the home route cards: the cards' section already gives the space */
.hero--video + section + .partners { padding-top: 0; }
/* overlay over the whole hero: header and headline stay readable on bright frames (sky, aerial shots) */
.hero--video .vbg::after { background: linear-gradient(180deg, rgb(20 17 14 / .6) 0%, rgb(20 17 14 / .4) 30%, rgb(20 17 14 / .5) 60%, rgb(20 17 14 / .88) 100%); }
.site-header.is-over-media:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* light text only for the top-level items – the dropdown panel keeps its normal dark-on-light colours */
.site-header.is-over-media:not(.is-scrolled) .nav > ul > li > a, .site-header.is-over-media:not(.is-scrolled) .nav button.nav-toggle-sub { color: #fbf9f5; }
.site-header.is-over-media:not(.is-scrolled) .nav > ul > li > a:hover, .site-header.is-over-media:not(.is-scrolled) .nav button.nav-toggle-sub:hover { background: rgb(255 255 255 / .14); }
.site-header.is-over-media:not(.is-scrolled) .brand img { filter: brightness(0) invert(.95) sepia(.15); }
.site-header.is-over-media:not(.is-scrolled) .icon-btn { background: rgb(20 17 14 / .35); color: #fff; border-color: rgb(255 255 255 / .3); }
.route .vbg { z-index: -2; }
.route .vbg::after { display: none; }

/* Media band: full-width section with a video behind text */
.media-band { padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.media-band .wrap > div { max-width: 36rem; }
.media-band p { color: #ece5da; font-size: var(--fs-lg); }
.page-hero--video { padding-block: clamp(4rem, 3rem + 6vw, 7.5rem) var(--s-6); margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 6rem)); }
/* one height for every video page hero (rent and sale lists side by side), content at the bottom; grows only if its text needs more */
.page-hero--video { display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(29rem, 22rem + 12vw, 34rem); }
@media (max-width: 47.99rem) { .page-hero--video { min-height: 38.5rem; } }  /* phones: lead, stat chips and buttons wrap (rent and sale equal from 375 px) */
.page-hero--video .crumbs, .page-hero--video .crumbs a { color: #ece5da; }
.page-hero--video .lead { color: #ece5da; }
.lang-switch { font: 700 .8rem/1 var(--font-body); letter-spacing: .02em; text-decoration: none; color: var(--text); }
a.lang-switch.icon-btn { width: 44px; }

/* ---------- Mixed gallery ---------- */
.gfilter { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.gfilter .chip svg { width: 16px; height: 16px; }
.ggrid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); grid-auto-flow: dense; }
.gtile { position: relative; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; background: var(--surface-2); cursor: pointer; color: #fff; text-align: left; }
.gtile--wide { grid-column: span 2; aspect-ratio: 16/9; }
@media (max-width: 40rem) { .gtile--wide { grid-column: span 1; } }
.gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.gtile:hover img { transform: scale(1.04); }
.gtile[data-kind="video"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(20 17 14 / .8)); }
.gtile__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; width: 56px; height: 56px; border-radius: 50%; background: rgb(251 249 245 / .92); color: #23201d; display: grid; place-items: center; box-shadow: 0 6px 24px rgb(0 0 0 / .3); }
.gtile__play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
.gtile__title { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 2; font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; }
.gtile__dur, .gtile__src { position: absolute; top: var(--s-2); z-index: 2; padding: .15rem .5rem; border-radius: var(--r-pill); background: rgb(20 17 14 / .7); font-size: var(--fs-xs); font-weight: 600; }
.gtile__dur { right: var(--s-2); } .gtile__src { left: var(--s-2); }
.gtile[hidden] { display: none; }
.lightbox__media { display: grid; place-items: center; min-height: 0; height: 100%; }
.lightbox__media video, .lightbox__media iframe { width: min(100%, 1280px); aspect-ratio: 16/9; max-height: calc(100vh - 9rem); border: 0; border-radius: var(--r-sm); background: #000; }
.lightbox__consent { max-width: 30rem; text-align: center; color: #eee; display: grid; gap: var(--s-3); justify-items: center; padding: var(--s-5); }
.lightbox__consent img { border-radius: var(--r-sm); max-height: 40vh; width: auto; }
@media (prefers-reduced-motion: reduce) { .gtile img { transition: none; } }

.lightbox__media img { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; border-radius: var(--r-sm); transition: opacity .3s var(--ease); }
.lightbox__media img.is-loading { opacity: 0; }

/* ---------- Motion system ----------
   One page-level transition, one hero entrance, quiet reveals. Everything is off
   for prefers-reduced-motion (the global rule above also shortens durations). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

.js-motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
.js-motion img.photo { opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-motion img.photo.is-loaded { opacity: 1; }
/* Hero entrance, one sequence: video fades up from dark and settles, the title rises line by line, then text, tabs, search */
.js-motion .hero__title[data-lines]:not(.is-split) { opacity: 0; }  /* until fc.js has wrapped the lines: no flash of the plain title */
.js-motion .hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.js-motion .hero__title .line > span { display: inline-block; opacity: 0; transform: translateY(105%); animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 130ms + .2s); }
.js-motion .hero--video .vbg video { animation: hero-settle 2.6s var(--ease) both; }
.js-motion .hero__intro p { opacity: 0; animation: fade-up .8s var(--ease) .55s forwards; }
.js-motion .hero--video .quick__tabs { opacity: 0; animation: fade-up .7s var(--ease) .7s forwards; }
.js-motion .hero--video .searchbar { opacity: 0; animation: fade-up .8s var(--ease) .82s forwards; }
.js-motion .hero--video [data-tabs].is-switched .searchbar { opacity: 1; animation: none; } /* the intro plays once; after a tab change the panel's own short fade shows the bar at once */
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hero-settle { from { opacity: 0; transform: scale(1.08); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
/* Route cards on scroll: the card rises, its photo/video settles from a slight zoom, then kicker, title, text and button */
.js-motion .route[data-reveal] { transform: translateY(32px) scale(.98); }
.js-motion .route[data-reveal].is-in { transform: none; }
.js-motion .route[data-reveal] > img, .js-motion .route[data-reveal] > .vbg { transform: scale(1.12); transition: transform 1.4s var(--ease); }
.js-motion .route[data-reveal].is-in > img, .js-motion .route[data-reveal].is-in > .vbg { transform: none; }
.js-motion .route[data-reveal] .route__body > * { opacity: 0; }
.js-motion .route[data-reveal].is-in .route__body > * { animation: fade-up .6s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 90ms + .3s + var(--j, 0) * 80ms); }
.route__body > :nth-child(2) { --j: 1; } .route__body > :nth-child(3) { --j: 2; } .route__body > :nth-child(4) { --j: 3; }

/* micro-interactions */
.btn { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgb(35 32 29 / .14); filter: none; }
.btn--accent:hover { box-shadow: 0 8px 24px rgb(232 155 60 / .35); }
.btn:active { transform: translateY(0); box-shadow: none; }
.vcard, .pcard, a.card { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.vcard:hover, a.card:hover { transform: translateY(-3px); }
.vcard__media img, .pcard__media img { transition: transform .8s var(--ease), opacity .6s var(--ease); }
.vcard:hover .vcard__media img { transform: scale(1.04); }
.text-link { transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); }
.chip { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.site-header { transition: border-color var(--dur) var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 30px rgb(35 32 29 / .06); }
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal], .js-motion img.photo, .js-motion .hero__title[data-lines], .js-motion .hero__title .line > span, .js-motion .hero__intro p, .js-motion .hero--video .searchbar,
  .js-motion .hero--video .quick__tabs, .js-motion .hero--video .vbg video, .js-motion .route[data-reveal] > img, .js-motion .route[data-reveal] > .vbg, .js-motion .route[data-reveal] .route__body > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .btn:hover, .vcard:hover, a.card:hover { transform: none; }
}

/* ---------- Review notes (template only): hidden unless switched on ---------- */
html:not(.show-notes) .proto-note { display: none; }
html:not(.show-notes) .conflict { background: none; color: inherit; border: 0; padding: 0; font-weight: inherit; cursor: inherit; white-space: normal; }
html:not(.show-notes) .conflict::after { content: none; }
.notes-toggle { position: fixed; left: var(--s-3); bottom: var(--s-3); z-index: 110; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 var(--fs-xs)/1 var(--font-body); box-shadow: var(--shadow-1); cursor: pointer; }
.notes-toggle[aria-pressed="true"] { color: var(--warning); border-color: var(--warning); background: var(--warning-bg); }
.notes-toggle i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
@media (max-width: 61.99rem) { body.has-mobile-cta .notes-toggle { bottom: 5.5rem; } }
@media print { .notes-toggle { display: none; } }
.gallery { position: relative; }
.gallery__vids { position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 3; display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* video button on the main photo: dark glass pill, readable on any photo; opens the YouTube lightbox */
.gallery .gallery__vid { flex: none; aspect-ratio: auto; scroll-snap-align: none; /* not a photo tile (phone gallery row) */ display: inline-flex; align-items: center; gap: var(--s-3); padding: .375rem 1.1rem .375rem .375rem; border: 1px solid rgb(255 255 255 / .22); border-radius: var(--r-pill); background: rgb(20 18 16 / .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fbf9f5; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 6px 20px rgb(0 0 0 / .25); transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.gallery__vid-play { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--brand-ochre); color: #231f1a; transition: transform .25s var(--ease); }
.gallery__vid-play svg { width: 16px; height: 16px; margin-left: 2px; fill: currentColor; }
.gallery__vid--tour .gallery__vid-play svg { width: 20px; height: 20px; margin: 0; fill: none; }  /* outline icon, not the filled play triangle */
.gallery__vid-txt { display: grid; line-height: 1.2; white-space: nowrap; }
@media (max-width: 47.99rem) { .gallery .gallery__vid { gap: var(--s-2); padding-right: .9rem; } .gallery__vid-play { width: 2.1rem; height: 2.1rem; } .gallery__vid-txt strong { font-size: .875rem; } }
.gallery__vid-txt strong { font-size: .95rem; font-weight: 600; }
.gallery__vid-txt small { font-size: .75rem; color: rgb(251 249 245 / .75); }
.gallery .gallery__vid:hover { background: rgb(20 18 16 / .78); border-color: rgb(255 255 255 / .35); }
.gallery .gallery__vid:hover .gallery__vid-play { transform: scale(1.08); }
.gallery .gallery__vid:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gallery .gallery__vid:hover .gallery__vid-play { transform: none; } }
@media (max-width: 47.99rem) { .gallery__vids { left: var(--s-2); top: var(--s-2); bottom: auto; } }
.stat-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }  /* the hero's figures: separate frosted tiles, each a link to its filter */
.stat-chips a { display: flex; flex-direction: column; gap: .3rem; min-width: 6.5rem; padding: .85rem clamp(.9rem, .6rem + 1vw, 1.35rem); border: 1px solid rgb(255 255 255 / .25); border-radius: var(--r-md); background: rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); color: #ece5da; font-size: .875rem; line-height: 1.2; text-decoration: none; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.stat-chips a:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: no-preference) { .stat-chips { animation: stat-in .7s var(--ease) .15s both; } }  /* rises in on load while the figures count up (fc.js [data-countup]) */
@keyframes stat-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes filters-in { from { opacity: .4; transform: translateY(32px); } }
/* phones: the three figures in one row of equal tiles, the two buttons sharing one row */
@media (max-width: 47.99rem) {
  .stat-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-chips a { min-width: 0; padding: .7rem .55rem; font-size: .75rem; }
  .stat-chips strong { font-size: 1.6rem; }
  .stat-chips + .cluster { flex-wrap: nowrap; }
  .stat-chips + .cluster .btn { flex: 1 1 0; min-width: 0; padding-inline: .75rem; }
}
@media (max-width: 22.49rem) {  /* small phones (< 360px): smaller labels, the buttons full width one below the other */
  .stat-chips { gap: 6px; }
  .stat-chips a { padding: .6rem .4rem; font-size: .6875rem; overflow-wrap: anywhere; }
  .stat-chips strong { font-size: 1.4rem; }
  .stat-chips + .cluster { flex-wrap: wrap; }
  .stat-chips + .cluster .btn { flex: 1 1 100%; }
}
.stat-chips a:hover { background: rgb(255 255 255 / .1); }
.stat-chips a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.stat-chips strong { color: #fbf9f5; font: 700 clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem)/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Mobile: the hero keeps the film visible; the search stays, compact (see "Homepage quick start") */
.hero__cta { display: none; }
@media (max-width: 55.99rem) {
  .hero--video { min-height: 100svh; }
}

/* ---------- Mobile menu (same pattern as the Isabelle Miller site) ----------
   Panel opens below the header, items slide in, submenus drill in from the right. */
:root { --ease-mm: cubic-bezier(.32, .72, 0, 1); }
.burger { width: 44px; height: 44px; display: none; position: relative; background: none; border: 0; color: var(--text); cursor: pointer; border-radius: var(--r-sm); }
.burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-mm), opacity .2s, top .35s var(--ease-mm); }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.lang-pair { display: none; align-items: center; gap: 2px; font: 600 .8rem/1 var(--font-body); letter-spacing: .08em; }
.lang-pair a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--muted); text-decoration: none; }
.lang-pair a[aria-current] { color: var(--text); font-weight: 700; }
.site-header.is-over-media:not(.is-scrolled) .burger, .site-header.is-over-media:not(.is-scrolled) .lang-pair a { color: #fbf9f5; }
.site-header.is-over-media:not(.is-scrolled) .lang-pair a:not([aria-current]) { color: rgb(255 255 255 / .7); }
@media (max-width: 76rem) {
  .burger { display: block; }
  .header-actions .lang-desktop, .header-actions .theme-pop { display: none; }
  .lang-pair { display: inline-flex; }
}
html.mm-open .site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--line); box-shadow: none; }

.mmenu { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 49; background: var(--bg); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease-mm), transform .4s var(--ease-mm), visibility 0s linear .4s; }
.mmenu.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mmenu__inner { height: 100%; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-5) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom)); }
.mmenu__body { flex: 1 0 auto; }
.mmenu__eyebrow { margin: 0 0 var(--s-2); font: 500 .78rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mmenu__nav { position: relative; overflow: hidden; overflow: clip; transition: height .35s var(--ease-mm); }
html.mm-open .notes-toggle { display: none; }
.mmenu__list { list-style: none; margin: 0; padding: 0; }
.mmenu__item { border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(24px); transition: opacity .3s var(--ease-mm), transform .5s var(--ease-mm), border-color .25s; }
.mmenu.is-open .mmenu__item { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 90ms), calc(var(--i, 0) * 45ms + 90ms), 0s; }
.mmenu__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 15px 0; color: var(--text); text-decoration: none; font: 300 clamp(17px, 4.6vw, 20px)/1.2 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.mmenu__link[aria-current="page"] { font-weight: 500; }
.mmenu__link svg, .mmenu__more svg, .mmenu__sub a svg { width: 18px; height: 18px; flex: none; opacity: .55; transition: transform .3s var(--ease-mm), opacity .3s; }
.mmenu__link:hover svg, .mmenu__more:hover svg, .mmenu__sub a:hover svg, .mmenu__link:focus-visible svg { opacity: 1; transform: translateX(3px); }
.mmenu__row { display: flex; align-items: center; gap: 16px; }
.mmenu__row .mmenu__link { flex: 1; }
.mmenu__more { display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 44px; margin-right: -12px; padding: 0 12px 0 0; background: none; border: 0; color: var(--text); cursor: pointer; }
.mmenu__row, .mmenu__item > .mmenu__link { transition: opacity .25s, transform .35s var(--ease-mm), visibility 0s; }
.mmenu__nav.is-drill .mmenu__row, .mmenu__nav.is-drill .mmenu__item > .mmenu__link { opacity: 0; visibility: hidden; transform: translateX(-18%); transition: opacity .2s, transform .35s var(--ease-mm), visibility 0s linear .35s; }
.mmenu__nav.is-drill .mmenu__item { border-bottom-color: transparent; }
.mmenu__sub { position: absolute; top: 0; left: 0; right: 0; z-index: 2; visibility: hidden; transform: translateX(104%); transition: transform .35s var(--ease-mm), visibility 0s linear .35s; }
.mmenu__item.is-sub-open > .mmenu__sub { visibility: visible; transform: none; transition-delay: 0s; }
.mmenu__back { display: grid; gap: 2px; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.mmenu__back button { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; background: none; border: 0; color: var(--muted); font: 500 .78rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.mmenu__back button svg { width: 16px; height: 16px; transition: transform .3s var(--ease-mm); }
.mmenu__back button:hover { color: var(--text); }
.mmenu__back button:hover svg { transform: translateX(-3px); }
.mmenu__subtitle { margin: 0 0 var(--s-2); font: 300 clamp(17px, 4.6vw, 20px)/1.2 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.mmenu__sub ul { list-style: none; margin: 0; padding: 0; }
.mmenu__sub li { border-bottom: 1px solid var(--line); }
.mmenu__sub a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 14px 0; color: var(--text); text-decoration: none; font: 400 16px/1.3 var(--font-body); letter-spacing: .01em; }
.mmenu__sub a[aria-current="page"] { font-weight: 600; }
/* "Mehr zur Miete" in the panel: a row like the links, the rest below it (fc.js [data-sub-more]) */
.mmenu__sub .sub__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 50px; padding: 14px 0; border: 0; background: none; color: var(--accent-ink); font: 500 16px/1.3 var(--font-body); letter-spacing: .01em; text-align: left; cursor: pointer; }
.mmenu__sub .sub__toggle svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease-mm); }
.mmenu__sub .sub__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mmenu__sub .sub__extra { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mmenu__sub .sub__extra li:last-child { border-bottom: 0; }
.mmenu__sub .sub__extra:not([hidden]) > li { animation: sub-in .28s var(--ease) both; }
.mmenu__foot { display: grid; gap: var(--s-4); padding-top: var(--s-6); opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease-mm) .25s, transform .5s var(--ease-mm) .25s; }
.mmenu.is-open .mmenu__foot { opacity: 1; transform: none; }
.mmenu__foot .btn { min-height: 52px; }
.mmenu__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mmenu__contact a { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); }
.mmenu__contact a:hover { color: var(--text); }
.mmenu__contact svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.mmenu__prefs { display: flex; align-items: center; justify-content: space-between; padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
@media (min-width: 76.01rem) { .mmenu { display: none; } }
/* WordPress admin bar (logged in): the sticky header, the mobile menu and anchor targets sit below it. Under 601px the
   bar is not fixed and scrolls away, so nothing moves there. */
@media (min-width: 601px) {
  .admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
  .admin-bar .mmenu { top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px)); }
  html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px) + 1rem); }
}
@media (prefers-reduced-motion: reduce) { .mmenu, .mmenu__item, .mmenu__foot, .mmenu__sub, .mmenu__row, .burger span { transition: none !important; } .mmenu__item, .mmenu__foot { opacity: 1; transform: none; } }

/* parent rows in the mobile menu are buttons; header menu button swaps icon when open */
.mmenu__toggle { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; }
.mmenu__toggle[data-current] { font-weight: 500; }
.menu-btn__close { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__open { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__close { display: inline; }
.menu-btn svg { width: 20px; height: 20px; }
/* with the burger menu the colour scheme lives in the menu ("Farbschema"), not in the header */
@media (max-width: 76rem) { .header-actions .theme-pop { display: none; } }

/* ---------- Offers ---------- */
.offers { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.offer { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); position: relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.offer:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.offer[hidden] { display: none; }
.offer__top { display: flex; gap: var(--s-2); }
.offer__value { margin: var(--s-2) 0 0; font: 700 clamp(2rem, 1.6rem + 1.2vw, 2.6rem)/1 var(--font-display); letter-spacing: -.03em; color: var(--accent-ink); }
.offer__title { margin: 0; font-size: 1.25rem; }
.offer__text { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.offer__code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3); border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--bg); margin-top: auto; }
.offer__code-label { flex: 0 0 100%; font-size: var(--fs-xs); color: var(--muted); }
.offer__code code { flex: 1 0 auto; font: 700 1.05rem/1.2 var(--font-body); letter-spacing: .06em; white-space: nowrap; }
.offer__code .btn svg { width: 16px; height: 16px; }
.offer__auto { display: flex; align-items: center; gap: .5rem; margin: auto 0 0; font-size: var(--fs-sm); color: var(--success); font-weight: 600; }
.offer__auto svg { width: 18px; height: 18px; }
.offer__meta { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
/* the cards share the rows of the grid, so values, titles, code boxes and buttons line up across a row of cards */
@supports (grid-template-rows: subgrid) {
	.offer { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: var(--s-3); align-content: start; }
	.offer__top { grid-row: 1; }
	.offer__value { grid-row: 2; }
	.offer__title { grid-row: 3; }
	.offer__text { grid-row: 4; }
	.offer__code, .offer__auto { grid-row: 5; margin: 0; align-self: start; }
	.offer__auto { align-self: center; }
	.offer__meta { grid-row: 6; }
	.offer > .btn { grid-row: 7; align-self: end; }
}
.promo { display: grid; gap: .35rem; margin: var(--s-3) 0 var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.promo label { font-weight: 600; font-size: var(--fs-sm); }
.promo .input { min-height: 42px; text-transform: uppercase; letter-spacing: .04em; }
.promo__msg { margin: 0; font-size: var(--fs-xs); font-weight: 500; }
.promo__msg.is-ok { color: var(--success); }
.promo__msg.is-bad { color: var(--danger); }
html:not(.show-notes) .proto-only { display: none; }

/* ---------- Opening hours (per department) ---------- */
.hours2 { display: grid; gap: var(--s-4); }
.hours2__status { display: inline-flex; align-items: flex-start; gap: .6rem; margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }
/* the dot sits on the first line when the text wraps */
.hours2__status i { flex: none; width: 8px; height: 8px; margin-top: calc(.7em - 4px); border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 15%, transparent); }
.hours2__status.is-open { color: var(--success); } .hours2__status.is-open i { background: var(--success); }
.hours2__status.is-closed { color: var(--muted); }
.hours2__deps { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.hours2__dep { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.hours2__dep.is-focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.hours2__name { margin: 0 0 var(--s-2); font-weight: 600; font-size: var(--fs-sm); }
.hours2 dl { margin: 0; display: grid; gap: 4px; }
.hours2 dl > div { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); }
.hours2 dt { color: var(--muted); }
.hours2 dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.hours2 dd.is-closed { color: var(--muted); font-weight: 400; }
.hours2__extra { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.hours2__extra li { display: flex; align-items: flex-start; gap: 10px; }
.hours2__extra svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent-ink); }

/* footer variant: on dark ground, departments side by side */
.site-footer .footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
@media (min-width: 62rem) { .site-footer .footer-grid { grid-template-columns: 1.1fr .9fr .9fr 2.1fr; } }
.hours2--footer .hours2__dep { background: rgb(255 255 255 / .04); border-color: #3a342e; }
.hours2--footer .hours2__name { color: #fbf1e0; }
.hours2--footer dt { color: #a79d91; }
.hours2--footer dd { color: #efe9e0; }
.hours2--footer dd.is-closed { color: #a79d91; }
.hours2--footer .hours2__extra { color: #d8cfc3; font-size: var(--fs-xs); }
.hours2--footer .hours2__extra svg { color: #f3b465; width: 16px; height: 16px; }
.hours2--footer .hours2__status.is-open { color: #7fcca3; } .hours2--footer .hours2__status.is-open i { background: #7fcca3; }
.hours2--footer .hours2__status.is-closed { color: #d8cfc3; }

@media (min-width: 62rem) { .hours2--footer .hours2__deps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hours2--footer .hours2__dep { padding: var(--s-3); }
.hours2--footer dl > div { font-size: var(--fs-xs); gap: var(--s-2); }

/* ---------- Footer: organised by service ---------- */
.footer-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); padding-bottom: var(--s-6); margin-bottom: var(--s-6); border-bottom: 1px solid #3a342e; }
.footer-logo img { width: 140px; filter: brightness(0) invert(.92) sepia(.18); }
.footer-more { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-left: auto; font-size: var(--fs-sm); }
.footer-more a { color: #efe9e0; }
.footer-top .social { margin: 0; }
/* phone: logo left, social icons in the right corner, the page links as their own row */
@media (max-width: 47.99rem) {
  .footer-top { display: grid; grid-template-columns: 1fr auto; }
  .footer-top .social { grid-area: 1 / 2; }
  .footer-more { grid-column: 1 / -1; margin-left: 0; justify-content: space-between; }
}
.footer-cols { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
@media (min-width: 62rem) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)) 1.25fr; } }
.fcol { display: flex; flex-direction: column; }
.fcol ul { margin-bottom: var(--s-5); }
.fcol__hours { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid #3a342e; display: grid; gap: var(--s-2); }
.fcol__status { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: var(--fs-xs); font-weight: 600; color: #d8cfc3; }
.fcol__status i { width: 7px; height: 7px; border-radius: 50%; background: #a79d91; }
.fcol__status.is-open { color: #7fcca3; } .fcol__status.is-open i { background: #7fcca3; box-shadow: 0 0 0 3px rgb(127 204 163 / .2); }
.fcol dl { margin: 0; display: grid; gap: 2px; }
.fcol dl > div { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-xs); }
.fcol dt { color: #a79d91; }
.fcol dd { margin: 0; color: #efe9e0; font-variant-numeric: tabular-nums; }
.fcol dd.is-closed { color: #a79d91; }
.fcol__note { margin: 0; font-size: var(--fs-xs); color: #a79d91; }
.fcontact { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.fcontact a, .fcontact__item { display: flex; gap: 12px; align-items: flex-start; color: #efe9e0; font-size: var(--fs-sm); text-decoration: none; }
.fcontact a:hover span { text-decoration: underline; }
.fcontact svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #f3b465; }
.fcontact small { display: block; font-size: var(--fs-xs); color: #a79d91; margin-top: 2px; }
.site-footer .footer-grid { display: none; }

/* ---------- Hours matrix + visit block ---------- */
.hours-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hours-matrix thead th { font-weight: 500; color: var(--muted); font-size: var(--fs-xs); text-align: right; padding: 0 0 .4rem var(--s-3); white-space: nowrap; }
.hours-matrix tbody th { text-align: left; font-weight: 600; padding: .6rem var(--s-3) .6rem 0; white-space: nowrap; }
.hours-matrix tbody td { text-align: right; padding: .6rem 0 .6rem var(--s-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours-matrix tbody tr + tr > * { border-top: 1px solid var(--line); }
.hours-matrix td.is-closed { color: var(--muted); }
.hours-matrix tr.is-focus th { color: var(--accent-ink); }
.visit { display: grid; gap: var(--s-5); align-items: stretch; }
@media (min-width: 62rem) { .visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.visit__card { display: grid; gap: var(--s-5); align-content: start; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.visit__addr { display: flex; gap: var(--s-3); align-items: flex-start; }
.visit__addr svg { width: 26px; height: 26px; color: var(--accent-ink); flex: none; margin-top: 2px; }
.visit__addr p { margin: 0; }
.visit__street { font: 600 var(--fs-h4)/1.2 var(--font-display); letter-spacing: -.01em; }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.visit__hours h3 { font-size: 1.1rem; margin-bottom: var(--s-3); }
.visit__hours .hours2 { gap: var(--s-3); }
.visit .map-consent { min-height: 24rem; border-radius: var(--r-lg); height: 100%; }
/* one map style everywhere: photo + consent overlay, same size and radius */
.map-consent { border-radius: var(--r-lg); min-height: 24rem; }

/* ---------- Homepage quick start (three equal services) ---------- */
.quick { margin-top: var(--s-6); }
.quick__tabs[role="tablist"] { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: rgb(20 17 14 / .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: visible; }
.quick__tabs [role="tab"] { display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: .5rem 1.1rem; margin: 0; border: 0; border-radius: var(--r-pill); color: #ece5da; font-weight: 600; }
.quick__tabs [role="tab"] svg { width: 17px; height: 17px; }
.quick__tabs [role="tab"][aria-selected="true"] { background: #fbf9f5; color: #23201d; border: 0; }
.quick__tabs [role="tab"]:hover:not([aria-selected="true"]) { color: #fff; background: rgb(255 255 255 / .1); }
/* the light pill slides to the chosen tab (fc.js sets --ind-x/--ind-w); the bar below switches with a short fade */
.quick__tabs[role="tablist"] { position: relative; isolation: isolate; }
.quick__tabs [role="tab"] { transition: color .25s var(--ease), background-color .2s; }
.quick__tabs.has-ind::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; width: var(--ind-w); transform: translateX(var(--ind-x)); border-radius: var(--r-pill); background: #fbf9f5; }
.quick__tabs.has-ind.ind-anim::before { transition: transform .34s cubic-bezier(.22, 1, .36, 1), width .34s cubic-bezier(.22, 1, .36, 1); }  /* glides in, no overshoot */
/* liquid switch: the pill briefly reaches over both tabs, a touch slimmer (fc.js: is-stretch), then glides into the new tab */
.quick__tabs.has-ind.ind-anim.is-stretch::before { transition: transform .12s cubic-bezier(.4, 0, .2, 1), width .12s cubic-bezier(.4, 0, .2, 1); transform: translateX(var(--ind-x)) scaleY(.94); }
.quick__tabs.has-ind [role="tab"][aria-selected="true"] { background: transparent; }
.quick [role="tabpanel"] { animation: quick-in .2s var(--ease) both; }
@keyframes quick-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quick__tabs.has-ind.ind-anim::before { transition: none; } }
@media (min-width: 56rem) { .searchbar--3 { grid-template-columns: 1fr 1fr 1fr auto; } }
.hero--video .quick .searchbar { margin-top: 0; }
/* phones and tablets: the same search, compact – full-width tabs, two fields side by side, the button below;
   only what decides the result (rent: the dates – one pick-up place, the party size is asked in the booking;
   buy: condition and body type; workshop: request and date) */
@media (max-width: 55.99rem) {
  .hero--video .quick { margin-top: var(--s-5); }
  /* the search card sits on the film's lower edge: the film ends --sb-over above the hero's end, the button row lies on the page */
  .hero--video:has(.quick) { --sb-over: 4.75rem; padding-bottom: 0; }
  .hero--video:has(.quick) .vbg { bottom: var(--sb-over); }
  .hero--video .quick .searchbar { box-shadow: var(--shadow-2); }
  .quick__tabs[role="tablist"] { display: flex; width: 100%; }
  .quick__tabs [role="tab"] { flex: 1; justify-content: center; min-height: 44px; padding: .5rem .4rem; font-size: var(--fs-sm); }
  .hero--video .quick .searchbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2) var(--s-3); padding: var(--s-3); border-radius: var(--r-md); }
  .hero--video .quick .searchbar > .btn { grid-column: 1 / -1; min-height: 48px; }
  .hero--video .quick .searchbar label { font-size: var(--fs-xs); }
  .hero--video .quick .searchbar > .field { min-width: 0; } /* 320 px: two date fields side by side still fit */
  .hero--video .quick .dp__trigger { min-width: 0; padding-inline: .6rem; gap: .3rem; font-size: .9375rem; } /* "Datum wählen" stays whole at 375 px */
  .hero--video .quick .dp__val { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  @media (max-width: 22.5rem) { .hero--video .quick .searchbar { grid-template-columns: minmax(0, 1fr); } } /* 320 px: one field per row */
  .hero--video .quick .field:has(#sb-loc), .hero--video .quick .field:has(#sb-p),
  .hero--video .quick .field:has(#qk-p), .hero--video .quick .field:has(#qw-f) { display: none; }
}
.ws-teaser { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 62rem) { .ws-teaser { grid-template-columns: 1.05fr 1fr; } }
.ws-teaser__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--surface-2); }
.ws-teaser__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Footer v3: contact left, link columns, hours as three cards ---------- */
@media (min-width: 62rem) { .footer-cols { grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); } }
.fcol ul { margin-bottom: 0; }
/* phones: top bar, contact, opening hours, then the three link columns two by two, bottom line. The footer's wrap
   becomes a two-column grid and .footer-cols dissolves (display: contents), so its columns and the hours can be ordered. */
@media (max-width: 47.99rem) {
  .site-footer > .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); }
  .site-footer > .wrap > *, .footer-cols > .fcol--contact { grid-column: 1 / -1; }
  .site-footer .footer-cols { display: contents; }
  .footer-cols > .fcol--contact { order: 1; }
  .site-footer .footer-hours { order: 2; margin-top: var(--s-6); }
  .footer-cols > .fcol:not(.fcol--contact) { order: 3; grid-column: auto; margin-top: var(--s-7); }
  .footer-cols > .fcol:not(.fcol--contact) ~ .fcol:not(.fcol--contact) ~ .fcol { margin-top: var(--s-6); }  /* the third column starts the second row */
  .site-footer .footer-bottom { order: 4; }
}
/* handover line: pick-up and return each on their own line, each kept whole (the separator is for older markup only) */
.handover > span:not(.handover__sep) { display: block; white-space: nowrap; }
.handover__sep { display: none; }
.footer-hours__head p:has(.handover) { align-items: flex-start; }
.footer-hours__head p:has(.handover) svg { margin-top: 3px; flex: none; }
.footer-hours { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid #3a342e; }
.footer-hours__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-4); }
.footer-hours__head h2 { margin: 0; }
.footer-hours__head p { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--fs-sm); color: #a79d91; }
.footer-hours__head p svg { width: 16px; height: 16px; color: #f3b465; }
.footer-hours__cards { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .footer-hours__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fhours { padding: var(--s-4) var(--s-5); border: 1px solid #3a342e; border-radius: var(--r-md); background: rgb(255 255 255 / .03); display: grid; gap: var(--s-3); }
.fhours__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-1) var(--s-3); }
/* the department name stays whole; the status moves under it when both do not fit */
.fhours__head h3 { margin: 0; font-size: 1.05rem; color: #fbf1e0; hyphens: manual; white-space: nowrap; }
.fhours dl { margin: 0; display: grid; gap: 6px; }
.fhours dl > div { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); }
.fhours dt { color: #a79d91; }
.fhours dd { margin: 0; color: #efe9e0; font-variant-numeric: tabular-nums; }
.fhours dd.is-closed { color: #a79d91; }
.footer-hours + .footer-bottom { margin-top: var(--s-6); }
/* dropdowns near the right edge open leftwards (no hidden overflow → no horizontal scrollbar) */
.nav > ul > li:nth-last-child(-n+2) > .sub { left: auto; right: 0; transform-origin: top right; }

/* ---------- Reviews (high contrast, SVG stars) ---------- */
.reviews-band { background: #1b1916; color: #f6f1e8; }
:root[data-theme="dark"] .reviews-band { background: #0f0d0c; }
.reviews-band h2 { color: #fbf7f0; }
.reviews-band .rv-source { display: flex; align-items: center; gap: .5rem; margin: var(--s-2) 0 0; color: #e9e2d6; font-size: var(--fs-sm); font-weight: 500; }
.rv-nav { display: flex; gap: var(--s-2); }
.rv-nav .icon-btn { background: transparent; color: #fbf7f0; border-color: rgb(255 255 255 / .28); }
.rv-nav .icon-btn:hover:not(:disabled) { background: rgb(255 255 255 / .1); }
.rv-nav .icon-btn:disabled { opacity: .35; cursor: default; }
.stars5 { display: inline-flex; gap: 2px; }
.stars5 svg { width: 18px; height: 18px; }
.stars5 path.on { fill: #fbbc05; }
.stars5 path.off { fill: none; stroke: #8a8178; stroke-width: 1.5; }
.g-mark { flex: none; }
.rv-track { list-style: none; margin: 0; padding: 4px 2px var(--s-3); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(86%, 22rem), 1fr); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-track { cursor: grab; }
.rv-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }  /* fc.js mouse drag */
@media (min-width: 62rem) { .rv-track { grid-auto-columns: calc((100% - 2 * var(--s-4)) / 3); } }
.rv { scroll-snap-align: start; }
.rv figure { height: 100%; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-md); background: #2a2622; border: 1px solid #4a423a; }
.rv__who { display: flex; align-items: center; gap: var(--s-3); }
.rv__init { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; background: #f3b465; color: #23201d; font: 700 1.1rem/1 var(--font-display); }  /* the reviewer's initial, no photo (GDPR) */
.rv__who strong { display: block; color: #fbf7f0; font-size: 1rem; }
.rv__who small { display: inline-flex; align-items: center; gap: 6px; color: #cfc6ba; font-size: var(--fs-xs); margin-top: 2px; }
.rv__stars { margin: 0; line-height: 1; }
.rv__text { margin: 0; color: #f6f1e8; font-size: 1.02rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
/* opened: the same height as the clamped text, scrolling inside the card (the row of cards keeps its height) */
.rv__text.is-open { -webkit-line-clamp: unset; display: block; max-height: calc(7 * 1.65em); overflow-y: auto; overscroll-behavior: contain; padding-right: .5rem; scrollbar-width: thin; scrollbar-color: #8a7b6b transparent; }
.rv__text.is-open::-webkit-scrollbar { width: 6px; }
.rv__text.is-open::-webkit-scrollbar-thumb { background: #8a7b6b; border-radius: 3px; }
.rv__text.is-open:focus-visible { outline: 2px solid #f3c88d; outline-offset: 4px; border-radius: 2px; }
.rv__more { align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: none; color: #f3c88d; font: 600 var(--fs-sm)/1.4 var(--font-body); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.rv__lang { margin: 0; font-size: var(--fs-xs); color: #a79d91; }
/* in the markup of every language (WordPress builds pages from the German one), shown on English pages only */
html:not([lang^="en"]) .rv__lang { display: none; }
.reviews-band .proto-note { color: #cfc6ba; border-color: #4a423a; }

/* ---------- Live booking flow ---------- */
.rt-filters { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: end; margin-top: var(--s-4); }
.rt-filters .field { margin: 0; min-width: 12rem; }
.rt-list { display: grid; gap: var(--s-3); }
.rt-veh { display: grid; grid-template-columns: auto 7.5rem 1fr auto; gap: var(--s-3) var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--dur), box-shadow var(--dur), transform .25s var(--ease); }
.rt-veh:hover { border-color: var(--line-strong); }
.rt-veh:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.rt-veh input { width: 1.25rem; height: 1.25rem; accent-color: var(--text); }
.rt-veh img { width: 7.5rem; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r-sm); }
.rt-veh__body strong { display: block; }
.rt-veh__body small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.rt-veh__more { font-size: var(--fs-xs); font-weight: 600; color: var(--link); position: relative; z-index: 1; }
.rt-veh__price { text-align: right; }
.rt-veh__price strong { display: block; font: 700 1.25rem/1 var(--font-display); }
.rt-veh__price small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 4px; max-width: 11rem; }
/* phones: the whole card is the choice – photo left, name/facts and price right, a check badge on the photo when
   chosen; the radio stays in the card for keyboard and screen readers, it is just not drawn */
@media (max-width: 40rem) {
  .rt-veh { position: relative; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-areas: "img body" "img price"; gap: var(--s-2) var(--s-3); align-items: start; padding: var(--s-3); }
  .rt-veh:not(:has(img)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "price"; }
  .rt-veh input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .rt-veh:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .rt-veh img { grid-area: img; width: 100%; aspect-ratio: 4 / 3; }
  .rt-veh__body { grid-area: body; min-width: 0; }
  .rt-veh__body strong { line-height: 1.25; }
  .rt-veh__price { grid-area: price; text-align: left; }
  .rt-veh__price strong { font-size: 1.15rem; }
  .rt-veh__price small { max-width: none; }
  .rt-veh::after { content: ""; position: absolute; top: calc(var(--s-3) + 6px); left: calc(var(--s-3) + 6px); width: 26px; height: 26px; border-radius: 50%; background: var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf9f5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 0 0 2px var(--surface); opacity: 0; transform: scale(.6); transition: opacity var(--dur), transform var(--dur) var(--ease); }
  .rt-veh:has(input:checked)::after { opacity: 1; transform: none; }
  .rt-veh:not(:has(img))::after { left: auto; right: calc(var(--s-3) + 2px); }
}
.rt-skel { display: grid; gap: var(--s-3); }
.rt-skel span { height: 84px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
.rt-extras { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
/* minmax(0, 1fr): a long name ("Fahrradträger-Warntafel") wraps instead of pushing the row past the screen */
.rt-extra { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.rt-extra.is-on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.rt-extra:has(.switch) { cursor: pointer; } /* booking.js: a tap anywhere on the row switches it */
.rt-extra strong { display: block; font-size: var(--fs-sm); overflow-wrap: break-word; hyphens: auto; }
/* phones: name with the price under it, the switch or the counter on the right */
@media (max-width: 40rem) {
  .rt-extra { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); padding: var(--s-3); }
  .rt-extra > div:first-child { grid-column: 1; grid-row: 1; }
  .rt-extra__price { grid-column: 1; grid-row: 2; font-size: var(--fs-sm); }
  .rt-extra > .switch, .rt-extra > .qty { grid-column: 2; grid-row: 1 / span 2; }
}
.rt-extra small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.rt-extra__price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.rt-extra__price small { display: inline; font-weight: 400; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.qty button { width: 36px; height: 36px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--text); border-radius: 50%; }
.qty output { min-width: 1.5rem; text-align: center; font-weight: 600; }
@media (pointer: coarse) { .qty button { width: 44px; height: 44px; } } /* finger-sized on touch screens */
.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--line-strong); transition: background var(--dur); pointer-events: none; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease); }
.switch input:checked + span { background: var(--success); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.rt-info { font-size: var(--fs-sm); }
.price-lines { display: grid; gap: 4px; margin-bottom: var(--s-3); }
.pl { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); }
.pl--sub { color: var(--muted); font-size: var(--fs-xs); }  /* aligned with the lines above; smaller and grey marks it as part of them */
.pl--total { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--fs-base); }
.pl--total strong { font: 700 1.35rem/1 var(--font-display); }
.pl__was { margin: 0; text-align: right; font-size: var(--fs-xs); color: var(--muted); text-decoration: line-through; }
.pl__vat, .pl__times { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.rt-state { font-size: var(--fs-sm); color: var(--muted); }
.rt-state.is-bad { color: var(--danger); }

/* ---------- Sales enquiry ---------- */
.se-veh { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); margin-bottom: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2, var(--bg)); }
.se-veh img { width: 96px; height: 64px; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.se-veh p { margin: 0; display: grid; gap: 2px; }
.se-veh span { color: var(--muted); font-size: var(--fs-sm); }
.cf__head .se-veh { margin: 0; }  /* in a contact form's head the head's own spacing applies */
.se-topics { border: 0; padding: 0; margin: 0 0 var(--s-4); }
.se-topics legend { padding: 0; margin-bottom: var(--s-2); font-weight: 600; font-size: var(--fs-sm); }
.se-topics .cluster { gap: var(--s-2); }

/* ---------- Date picker (own popover, replaces native date inputs) ---------- */
.dp-range { display: contents; }
.dp__trigger { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.dp__trigger svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: color var(--dur) var(--ease); }
.dp__trigger:hover svg, .dp__trigger.is-active svg { color: var(--text); }
.dp__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp__val.is-empty { color: var(--muted); }
.dp__trigger.is-active[aria-expanded="true"] { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.dp-pop { position: absolute; z-index: 1000; width: min(22.5rem, calc(100vw - 32px)); padding: var(--s-4) var(--s-5) var(--s-5); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top left; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.dp-pop.dp-pop--2 { width: min(44rem, calc(100vw - 32px)); }
.dp-pop.is-open { opacity: 1; transform: none; }
.dp-pop__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.dp-pop__title { margin: 0; font: 600 1.05rem/1.3 var(--font-display, var(--font-body)); }
.dp-pop__x { width: 36px; height: 36px; }
.dp-pop__nav { position: relative; height: 0; }
.dp-pop__nav .icon-btn { position: absolute; top: -2px; z-index: 1; width: 36px; height: 36px; }
/* arrows share the content edges with the title and the close button */
.dp-pop__nav [data-dp-prev] { left: 0; }
.dp-pop__nav [data-dp-next] { right: 0; }
.dp-pop__nav .icon-btn:disabled { opacity: .3; cursor: default; }
.dp-pop__months { display: grid; gap: var(--s-6); }
.dp-pop--2 .dp-pop__months { grid-template-columns: 1fr 1fr; }
.dp-month__cap { margin: 0 0 var(--s-3); height: 32px; display: grid; place-items: center; font-weight: 600; text-transform: capitalize; }
.dp-month table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dp-month th { padding: 0 0 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-align: center; }
.dp-month td { padding: 2px 0; text-align: center; }
.dp-month td.is-in, .dp-month td.is-pv { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.dp-month td.is-pv { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.dp-month td.is-from { background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--accent) 24%, transparent) 50%); }
.dp-month td.is-to { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent) 50%, transparent 50%); }
.dp-month td.is-pv-from { background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--accent) 14%, transparent) 50%); }
.dp-month td.is-pv-to { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 50%); }
.dp-month td:first-child.is-in, .dp-month td:first-child.is-pv { border-radius: 999px 0 0 999px; }
.dp-month td:last-child.is-in, .dp-month td:last-child.is-pv { border-radius: 0 999px 999px 0; }
.dp-day { position: relative; width: 100%; max-width: 2.75rem; aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: 500 var(--fs-sm)/1 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.dp-day:hover:not([aria-disabled]), .dp-month td.is-pv-to .dp-day { box-shadow: inset 0 0 0 1.5px var(--text); }
.dp-day:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.dp-day.is-today::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.dp-day[aria-disabled="true"] { color: var(--muted); cursor: default; opacity: .55; }
.dp-day.is-closed { opacity: .7; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.dp-day.is-short { opacity: .4; }
.dp-day.is-sel { background: var(--text); color: var(--bg); opacity: 1; box-shadow: none; }
.dp-day.is-sel.is-today::after { background: var(--bg); }
.dp-pop__legend { display: flex; align-items: center; gap: .5rem; margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.dp-pop__legend i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, transparent 45%, var(--muted) 45% 55%, transparent 55%); border: 1px solid var(--line-strong); }
.dp-pop__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.dp-pop__sum { margin: 0; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.dp-pop__sum.is-warn { color: var(--danger); }
.dp-pop__btns { display: flex; gap: var(--s-2); margin-left: auto; }
.dp-scrim { position: fixed; inset: 0; z-index: 999; background: rgb(20 18 16 / .45); }
html.dp-lock { overflow: hidden; }
.dp-pop.is-sheet { position: fixed; inset: auto 0 0 0; width: auto; max-height: 92dvh; overflow-y: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); transform: translateY(24px); }
.dp-pop.is-sheet.is-open { transform: none; }
.dp-pop.is-sheet .dp-day { max-width: 3rem; }
@media (prefers-reduced-motion: reduce) { .dp-pop, .dp-day { transition: none; } }

/* ---------- Contact / appointment form (grouped) ---------- */
.field { align-content: start; }  /* controls keep their height when a grid row is taller */
.dp__trigger { min-height: 48px; padding-block: 0; }
.cf__head { display: grid; gap: var(--s-3); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }  /* the only line in the form: under the title */
.cf__head h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.cf__about { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .6rem .85rem; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text-2); }
.cf__about svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.cf__about strong { color: var(--text); }
.cf__group { min-width: 0; margin: var(--s-6) 0 0; padding: 0; border: 0; }  /* sections by space, no divider lines */
.cf__group > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--s-3); font: 600 1rem/1.3 var(--font-body); color: var(--text); }
.cf__group > legend + * { clear: both; }
.cf__group .field { margin-bottom: var(--s-3); }
.cf__group > .field:last-child, .cf__group .form-grid > .field:last-child { margin-bottom: 0; }
@media (min-width: 40rem) { .cf__group .form-grid--2 > .field:nth-last-child(2):not(.span-2) { margin-bottom: 0; } }
.cf__chips { gap: var(--s-2); }
.cf__note { display: flex; align-items: center; gap: .45rem; margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.cf__note svg { width: 15px; height: 15px; color: var(--success); flex: none; }
.seg-field { min-width: 0; padding: 0; border: 0; }
.seg-field > legend { float: left; width: 100%; padding: 0; margin: 0; }  /* spacing comes from the .field grid gap, same as a label */
.seg { clear: both; display: grid; grid-template-columns: repeat(3, minmax(max-content, 1fr)); gap: 2px; padding: 3px; min-height: 48px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
.seg label { position: relative; display: grid; place-items: center; padding: 0 .4rem; border-radius: calc(var(--r-sm) - 3px); font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); cursor: pointer; text-align: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg label:hover { background: var(--surface-2); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--text); color: var(--bg); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.cf__consent { margin: var(--s-6) 0 0; color: var(--text-2); }
.cf__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); }
.cf__foot p { margin: 0; font-size: var(--fs-xs); }
.cf__foot .btn svg { width: 18px; height: 18px; }
@media (max-width: 30rem) { .cf__foot .btn { width: 100%; } }

/* ---------- Post card v2: card surface like vehicle cards ---------- */
.pcard { gap: 0; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.pcard:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.pcard h3 a:focus-visible { outline: none; }
.pcard__media { position: relative; border-radius: 0; }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__cat { position: absolute; left: var(--s-3); top: var(--s-3); padding: .35rem .7rem; border-radius: var(--r-pill); background: rgb(251 249 245 / .92); color: #23201d; font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; backdrop-filter: blur(6px); }
.pcard__body { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; padding: var(--s-4) var(--s-5) var(--s-5); }
.pcard__meta { align-items: center; gap: var(--s-2) var(--s-4); margin: 0; }
.pcard__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.pcard__meta svg { width: 14px; height: 14px; }
.pcard h3 { font-size: 1.2rem; line-height: 1.25; margin: var(--s-1) 0 0; }
.pcard .pcard__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; }
.pcard__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: var(--s-3); font-size: var(--fs-sm); font-weight: 600; color: var(--link); }
.pcard__more svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.pcard:hover .pcard__more svg { transform: translateX(4px); }
.pcard--feature { gap: 0; }
@media (min-width: 56rem) {
  .pcard--feature { align-items: stretch; }
  .pcard--feature .pcard__media { aspect-ratio: auto; min-height: 100%; }
  .pcard--feature .pcard__body { justify-content: center; padding: var(--s-6) var(--s-7); }
  .pcard--feature .pcard__more { margin-top: var(--s-3); }
  .pcard--feature h3 { font-size: var(--fs-h3); }
  .pcard--feature .pcard__excerpt { -webkit-line-clamp: 4; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .pcard:hover { transform: none; } }

/* ---------- Section right after a hero ---------- */
.section--flush { padding-top: 0; }
/* after a full-bleed video hero the content needs its own breathing room */
.page-hero--video + .section--flush { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* ---------- Review notes keep distance from the content above ---------- */
* + .proto-note { margin-top: var(--s-5); }
.stack > .proto-note, .cluster > .proto-note, .split > .proto-note { margin-top: 0; }  /* these space by gap */

/* ---------- Booking step 1: trip options ---------- */
.rt-trip { margin-top: var(--s-4); display: grid; gap: var(--s-4); }
.rt-trip__h { margin: 0; font-size: 1.05rem; }
.rt-trip__opts { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 40rem) { .rt-trip__opts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rt-trip__seats, .rt-trip__pets { margin: 0; }
.rt-trip__seats > legend { margin-bottom: .35rem; }  /* same label gap as the .field next to it */
/* both options: label on top, control of the same height */
.rt-trip__opts .seg, .rt-trip__opts .rt-toggle { height: 56px; }
.rt-trip__opts .seg label { border-radius: calc(var(--r-sm) - 3px); }
.seg--4 { grid-template-columns: repeat(4, minmax(max-content, 1fr)); }
.rt-toggle { display: flex; align-items: center; gap: var(--s-3); padding: 0 .75rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.rt-toggle:hover { border-color: var(--text-2); }
.rt-toggle:has(input:checked) { border-color: var(--success); background: color-mix(in srgb, var(--success) 7%, transparent); }
.rt-toggle__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); flex: none; }
.rt-toggle__ico svg { width: 18px; height: 18px; }
.rt-toggle__txt { display: grid; gap: 1px; flex: 1; min-width: 0; line-height: 1.25; }
.rt-toggle__txt strong { font-size: var(--fs-sm); }
.rt-toggle__txt small { font-size: var(--fs-xs); line-height: 1.2; color: var(--muted); }
.rt-trip__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.rt-trip__sum { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.rt-trip__sum svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.rt-trip__foot .btn svg { width: 18px; height: 18px; }
.rt-trip .error-msg { margin: 0; }
@media (max-width: 30rem) { .rt-trip__foot .btn { width: 100%; } }

/* ---------- Partner logos ---------- */
/* One row of equal tiles, the same size at every screen width; fc.js loops it endlessly, scrolls it slowly and adds mouse
   drag. A scroll box clips everything outside it, so the tiles get their own small hover shadow and the padding leaves room
   for it and the lift; the negative margins keep the row where it was. */
.partners__track { --pt-shadow: 0 1px 3px rgb(35 32 29 / .06), 0 5px 12px rgb(35 32 29 / .09); position: relative; /* holds the absolute sr-only "(neuer Tab)" inside the scroll box */ list-style: none; margin: -12px -12px -8px; padding: 12px 12px 20px; display: flex; gap: var(--s-3); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.partners__track::-webkit-scrollbar { display: none; }
.partners__track:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.partners__track.is-auto { cursor: grab; mask-image: linear-gradient(90deg, transparent, #000 var(--s-6), #000 calc(100% - var(--s-6)), transparent); }
.partners__track.is-dragging { cursor: grabbing; }
.partners__track > li { flex: 0 0 13rem; }
.partners__nav { display: none; }  /* no pause button of its own (fc.js): kept hidden for Bricks pages built before it was removed */
.partners .section-head { margin-bottom: var(--s-4); }
.partners .section-head h2 { font-size: var(--fs-h3); }
.partners__tile { display: grid; place-items: center; height: 5rem; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.partners__tile img { max-width: 100%; height: auto; user-select: none; }  /* display size from width/height (balanced per logo in PARTNERS) */
a.partners__tile:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--pt-shadow); }
:root[data-theme="dark"] .partners__track { --pt-shadow: 0 5px 12px rgb(0 0 0 / .45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .partners__track { --pt-shadow: 0 5px 12px rgb(0 0 0 / .45); } }
a.partners__tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:root[data-theme="dark"] .partners__tile { border-color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .partners__tile { border-color: transparent; } }
/* dark mode: the white logo tiles and light buttons a little less bright (full on hover / focus) */
:root[data-theme="dark"] .partners__tile { opacity: .82; transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
:root[data-theme="dark"] a.partners__tile:is(:hover, :focus-visible) { opacity: 1; }
:root[data-theme="dark"] .btn--light { --btn-bg: rgb(251 249 245 / .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partners__tile { opacity: .82; transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
  :root:not([data-theme="light"]) a.partners__tile:is(:hover, :focus-visible) { opacity: 1; }
  :root:not([data-theme="light"]) .btn--light { --btn-bg: rgb(251 249 245 / .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) { a.partners__tile:hover { transform: none; } }

/* ---------- Workshop: photo beside the repair / replacement texts ---------- */
.ws-split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 56rem) { .ws-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8, 4rem); } }
.ws-split__media { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; max-height: 34rem; background: var(--surface-2); }
.ws-split__media img { width: 100%; height: 100%; object-fit: cover; }
.ws-split__text { display: grid; gap: var(--s-6); }
.ws-split__text > div + div { padding-top: var(--s-6); border-top: 1px solid var(--line); }
.ws-split__text h2 { font-size: var(--fs-h3); }
.ws-outro { margin-top: var(--s-5); }

/* ---------- Press page: recordings with their text, quote ---------- */
.press-clips { display: grid; gap: var(--s-6); }
.press-clip { margin: 0; display: grid; gap: var(--s-6) var(--s-8, 4rem); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
@media (min-width: 56rem) { .press-clip { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); align-items: start; } }
.press-clip__head { display: flex; align-items: center; gap: var(--s-4); }
.press-clip__ico { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink); }
.press-clip__ico svg { width: 20px; height: 20px; }
/* own player (fc.js): the round icon plays/pauses, the bar shows and sets the position */
button.press-clip__ico { border: 0; padding: 0; cursor: pointer; font: inherit; transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
button.press-clip__ico:hover { background: var(--accent); color: #fff; }
button.press-clip__ico:active { transform: scale(.96); }
button.press-clip__ico:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.press-clip__ic-pause, .press-clip.is-playing .press-clip__ic-play { display: none; }
.press-clip.is-playing .press-clip__ic-pause { display: inline-flex; }
.press-clip.is-playing button.press-clip__ico { background: var(--accent); color: #fff; }
.press-clip__bar { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.press-clip__bar[hidden] { display: none; }
.press-clip__time { flex: none; font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.press-clip__bar input[type="range"] { --p: 0%; flex: 1; min-width: 0; height: 1.5rem; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.press-clip__bar input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--p), var(--line) var(--p)); }
.press-clip__bar input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.press-clip__bar input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.press-clip__bar input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: var(--accent-ink); border: 2px solid var(--surface); }
.press-clip__bar input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-ink); border: 2px solid var(--surface); }
.press-clip__bar input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.press-clip figcaption { display: grid; gap: 2px; }
.press-clip figcaption strong { font-size: var(--fs-h4, 1.25rem); }
.press-clip__len { color: var(--text-2); font-size: var(--fs-sm); }
.press-clip audio { display: block; width: 100%; margin-top: var(--s-5); }
.press-clip__text { font-size: 1.075rem; line-height: 1.75; max-width: 68ch; }
.press-clip__text p { margin: 0; }
.press-clip__text p + p { margin-top: var(--s-5); }
/* read more (fc.js): long transcripts start collapsed and fade out; without JS the whole text shows */
.press-clip__text.is-clamped { max-height: 17rem; overflow: hidden; mask-image: linear-gradient(#000 55%, transparent); transition: max-height .6s var(--ease); }
.press-clip__text.is-clamped.is-open { mask-image: none; }  /* height animated by fc.js (to the text's height, then none) */
.press-line.is-revealing { animation: press-line-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }  /* lines that were hidden fade in one after another */
@keyframes press-line-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .press-clip__text.is-clamped { transition: none; } .press-line.is-revealing { animation: none; } }
.press-clip__more { margin-top: var(--s-4); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; }
.press-line__who { display: block; margin-bottom: var(--s-1, .25rem); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.press-line--michael { padding-left: var(--s-4); border-left: 3px solid var(--accent); }
.press-line--michael .press-line__who { color: var(--accent-ink); }
.press-quote__media { aspect-ratio: 1; }
.press-quote__media img { object-position: 50% 25%; }  /* portrait photo: keeps Frieda's and Michael's faces in the frame */
.press-quote { margin: 0; }
.press-quote p { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.35; letter-spacing: -.01em; }
.press-quote footer { margin-top: var(--s-5); color: var(--text-2); font-weight: 600; }

/* ---------- Vertical process timeline (side column next to forms) ---------- */
.steps-card h2 { margin: 0 0 var(--s-5); font-size: 1.35rem; }
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: tl; }
.timeline li { counter-increment: tl; position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 var(--s-4); padding-bottom: var(--s-5); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: counter(tl); grid-row: 1 / span 2; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent-ink); font: 700 .95rem/1 var(--font-body); font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.125rem - .5px); top: 2.25rem; bottom: 0; width: 1px; background: var(--line-strong); }
.timeline h3 { margin: .35rem 0 var(--s-1); font-size: 1.02rem; }
.timeline p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- Workshop services: one panel, a row per group ---------- */
.svc-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.svc { display: grid; gap: var(--s-4) var(--s-7); padding: var(--s-6) clamp(1.25rem, 1rem + 2vw, 2.5rem); }
.svc + .svc { border-top: 1px solid var(--line); }
@media (min-width: 56rem) { .svc { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; } }
.svc__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: center; }
.svc__ico { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink); }
.svc__ico svg { width: 22px; height: 22px; }
.svc__n { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc__head h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.svc__cta { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 600; color: var(--link); text-decoration: none; }
.svc__cta svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.svc__cta:hover svg { transform: translateX(3px); }
.svc__cta:hover { text-decoration: underline; text-underline-offset: .2em; }
.svc__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3) var(--s-6); }
@media (min-width: 40rem) { .svc__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc__items li { display: flex; gap: .6rem; align-items: flex-start; font-size: .98rem; line-height: 1.45; color: var(--text); }
.svc__items svg { width: 18px; height: 18px; flex: none; margin-top: .12rem; color: var(--accent-ink); }
@media (min-width: 56rem) { .svc__items { padding-top: .35rem; } }

/* ---------- About page ---------- */
.kicker { margin: 0 0 var(--s-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.about-hero__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 56rem) { .about-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-8, 4rem); } }
.about-hero h1 { max-width: 14ch; }
.about-hero__media { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5 / 4; background: var(--surface-2); }
.about-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.about-hero__media figcaption { position: absolute; left: var(--s-4); bottom: var(--s-4); display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: var(--r-pill); background: rgb(251 249 245 / .92); color: #23201d; font-size: var(--fs-sm); font-weight: 600; backdrop-filter: blur(6px); }
.about-hero__media figcaption svg { width: 16px; height: 16px; }
.about-facts { list-style: none; margin: var(--s-7) 0 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (min-width: 48rem) { .about-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.about-facts strong { display: block; font: 600 clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem)/1.1 var(--font-display, var(--font-body)); font-variant-numeric: tabular-nums; }
.about-facts span { font-size: var(--fs-sm); color: var(--muted); }
.about-story { display: grid; gap: var(--s-6); }
@media (min-width: 56rem) { .about-story { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8, 4rem); align-items: start; } .about-story__intro { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }
.story { list-style: none; margin: 0; padding: 0; }
.story li { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-6); }
.story li:last-child { padding-bottom: 0; }
.story li::before { content: ""; position: absolute; left: calc(6.5rem + var(--s-4) / 2 - 5px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.story li:not(:last-child)::after { content: ""; position: absolute; left: calc(6.5rem + var(--s-4) / 2 - .5px); top: 1.1rem; bottom: .2rem; width: 1px; background: var(--line-strong); }
.story li > div { padding-left: var(--s-5); }
.story__year { font-weight: 700; font-size: var(--fs-sm); color: var(--accent-ink); font-variant-numeric: tabular-nums; padding-top: .1rem; }
.story h3 { margin: 0 0 var(--s-1); font-size: 1.15rem; }
.story p { margin: 0; color: var(--text-2); line-height: 1.6; }
.about-dog { list-style: none; margin: var(--s-4) 0 var(--s-5); padding: 0; display: grid; gap: var(--s-3); }
.about-dog li { display: flex; gap: .6rem; align-items: flex-start; color: #ece5da; line-height: 1.55; }
.about-dog svg { width: 18px; height: 18px; flex: none; margin-top: .2rem; color: #f3b465; }
.about-perks { display: grid; gap: var(--s-5); }
@media (min-width: 56rem) { .about-perks { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8, 4rem); } }
.about-perks h2 { margin-top: 0; }
.about-perks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 40rem) { .about-perks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.about-perks__list li { display: flex; gap: .7rem; align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); line-height: 1.4; }
.about-perks__list svg { width: 18px; height: 18px; flex: none; color: var(--accent-ink); }
/* team: heading left like the other About sections, portrait photos with a label like the hero photo */
.about-team { display: grid; gap: var(--s-5); }
@media (min-width: 56rem) { .about-team { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8, 4rem); align-items: start; } }
.about-team h2 { margin-top: 0; }
.team { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.member { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); isolation: isolate; }
.member img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.member:hover img { transform: scale(1.05); }
.member--empty { display: grid; place-items: center; border: 1px dashed var(--line-strong); }
.member__init { font: 600 3rem/1 var(--font-display, var(--font-body)); color: var(--line-strong); }
.member figcaption { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); display: grid; gap: 1px; padding: .5rem .8rem; border-radius: var(--r-md); background: rgb(251 249 245 / .92); color: #23201d; backdrop-filter: blur(6px); line-height: 1.25; transition: transform .35s var(--ease); }
.member figcaption strong { font-size: var(--fs-sm); }
.member figcaption span { font-size: var(--fs-xs); color: #5c544c; }
.member:hover figcaption { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .member img, .member figcaption { transition: none; } .member:hover img, .member:hover figcaption { transform: none; } }
.about-more { display: grid; gap: var(--s-3); }
@media (min-width: 48rem) { .about-more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-more__item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.about-more__item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.about-more__item > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.about-more__item small { color: var(--muted); font-size: var(--fs-sm); }
.about-more__item > svg { width: 18px; height: 18px; color: var(--muted); transition: transform var(--dur) var(--ease); }
.about-more__item:hover > svg { transform: translateX(3px); color: var(--text); }
.about-more__ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink); flex: none; }
.about-more__ico svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .about-more__item:hover { transform: none; } }

/* ---------- Location block on phones: never wider than the screen ---------- */
@media (max-width: 61.99rem) { .visit { grid-template-columns: minmax(0, 1fr); } }  /* wide screens keep their two columns */
.visit__card, .visit__hours .hours2, .hours2__extra { grid-template-columns: minmax(0, 1fr); }
.hours2__extra .conflict { white-space: normal; }  /* long handover line must wrap on phones */
@media (max-width: 30rem) {
  .hours-matrix { font-size: var(--fs-xs); }
  .hours-matrix thead th, .hours-matrix tbody td { padding-left: var(--s-2); }
  .hours-matrix tbody th { padding-right: var(--s-2); white-space: normal; }
}

/* ---------- Lightbox v2: opaque full-screen viewer with thumbnail strip ---------- */
.lightbox { width: 100vw; height: 100dvh; max-height: 100dvh; background: rgb(14 12 11 / .97); color: #fff; }
.lightbox::backdrop { background: rgb(14 12 11 / .7); backdrop-filter: blur(8px); }
.lightbox[open] { grid-template-rows: auto minmax(0, 1fr) auto; animation: lb-in .3s var(--ease); }
@keyframes lb-in { from { opacity: 0; } }
.lightbox__bar { display: grid; grid-template-columns: minmax(4rem, 1fr) minmax(0, auto) minmax(4rem, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); }
.lightbox__count { justify-self: start; padding: .3rem .7rem; border-radius: var(--r-pill); background: rgb(255 255 255 / .1); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: #e9e2d6; white-space: nowrap; }
.lightbox .lightbox__caption { margin: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: var(--fs-sm); font-weight: 500; color: #f6f1e8; }
.lightbox__close { justify-self: end; }
.lightbox .icon-btn { width: 44px; height: 44px; background: rgb(255 255 255 / .08); color: #fff; border: 1px solid rgb(255 255 255 / .18); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lightbox .icon-btn:hover { background: rgb(255 255 255 / .18); }
.lightbox__stage { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-4); padding: 0 var(--s-4); }
.lightbox__media { height: 100%; min-height: 0; }
.lightbox__media > * { animation: lb-media .35s var(--ease); }
@keyframes lb-media { from { opacity: 0; transform: scale(.985); } }
.lightbox__media img { max-width: 100%; max-height: 100%; }
.lightbox__media video, .lightbox__media iframe { width: min(100%, calc((100dvh - 13rem) * 16 / 9)); max-height: 100%; }
/* 360° tour: as much of the screen as the viewer has (it is navigated inside, not watched) */
.lightbox__tour { position: relative; width: 100%; height: 100%; border-radius: var(--r-sm); overflow: hidden; background: #1d1a17; }
.lightbox__tour::before { content: attr(data-loading); position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / .7); font-size: var(--fs-sm); }
.lightbox__media iframe.is-tour { position: relative; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; background: transparent; border-radius: 0; }
.lightbox__nav:hover { transform: scale(1.06); }
@media (max-width: 47.99rem) {
  .lightbox__stage { grid-template-columns: minmax(0, 1fr); padding: 0 var(--s-2); }
  .lightbox__nav { position: absolute; top: 50%; z-index: 2; margin-top: -22px; background: rgb(14 12 11 / .55) !important; }
  .lightbox__nav--prev { left: var(--s-3); }
  .lightbox__nav--next { right: var(--s-3); }
}
.lightbox__thumbs { display: flex; gap: var(--s-2); justify-content: safe center; overflow-x: auto; padding: var(--s-3) var(--s-4) var(--s-4); scrollbar-width: none; }
.lightbox__thumbs::-webkit-scrollbar { display: none; }
.lightbox__thumbs button { position: relative; flex: none; width: 76px; height: 52px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #2a2622; cursor: pointer; opacity: .5; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.lightbox__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumbs button:hover { opacity: .85; }
.lightbox__thumbs button.is-active { opacity: 1; box-shadow: 0 0 0 2px #f0a649; }
.lightbox__thumbs button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lightbox__thumbs button.is-tour { display: grid; place-items: center; color: #f0a649; }
.lightbox__thumbs button.is-tour svg { width: 26px; height: 26px; }
.lightbox__thumbs button.is-video::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; background: rgb(14 12 11 / .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 7l8 5-8 5z'/%3E%3C/svg%3E") center/14px no-repeat; }
@media (prefers-reduced-motion: reduce) { .lightbox[open], .lightbox__media > * { animation: none; } }

/* page scrollbar hidden while the viewer is open, so it covers the whole screen */
html.lb-lock { overflow: hidden; }
.lightbox { inset: 0; width: 100%; max-width: none; }

.lightbox__thumbs { cursor: grab; overscroll-behavior-x: contain; touch-action: pan-x; user-select: none; }
.lightbox__thumbs.is-dragging { cursor: grabbing; }
.lightbox__thumbs.is-dragging button { pointer-events: none; }
.lightbox__thumbs img { -webkit-user-drag: none; }

/* ---------- TOC: current section (scroll spy) ---------- */
.toc li { position: relative; padding: .15rem 0; }
.toc a { display: block; transition: color var(--dur) var(--ease); }
.toc a::before { content: ""; position: absolute; top: .15rem; bottom: .15rem; left: calc(-1 * (var(--s-4) + 1rem) - 2px); width: 2px; border-radius: 2px; background: var(--accent); transform: scaleY(0); transition: transform .3s var(--ease); }
.toc a.is-active { color: var(--text); font-weight: 600; }
.toc a.is-active::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .toc a::before { transition: none; } }


/* ---------- Legal pages: same layout as Ratgeber articles ---------- */
.legal-body { min-width: 0; }
.legal-body > .alert { margin-bottom: var(--s-5); }
.legal-prose { overflow-wrap: anywhere; }
.legal-prose :is(h2, h3, h4) { scroll-margin-top: calc(var(--header-h) + 1rem); }
.legal-prose table { width: 100%; display: block; overflow-x: auto; }
@media (min-width: 62rem) { .legal-aside { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; } }
.legal-aside .toc ol { list-style: none; padding-left: 0; }  /* legal headings carry their own numbers */
.legal-aside .toc a::before { left: calc(-1 * var(--s-4) - 2px); }
.legal-links h3 { margin-bottom: var(--s-2); }
.legal-links ul { list-style: none; margin: 0; padding: 0; }
.legal-links li + li { border-top: 1px solid var(--line); }
.legal-links a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding: .6rem 0; color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.legal-links a svg { width: 16px; height: 16px; color: var(--muted); transition: transform var(--dur) var(--ease); }
.legal-links a:hover { color: var(--link); }
.legal-links a:hover svg { transform: translateX(3px); color: currentColor; }
/* photo always fits between top bar and thumbnails, portrait or landscape (percent max-height doesn't resolve in the grid) */
.lightbox__media { position: relative; width: 100%; }
.lightbox__media > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: contain; border-radius: 0; }

/* ---------- Contact dialogs (#dlg-call, #dlg-mail): centred card, a bottom sheet on phones ---------- */
.sheet { width: min(100% - 2rem, 30rem); max-height: min(100dvh - 2rem, 48rem); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); overflow-y: auto; overscroll-behavior: contain; }
.sheet--form { width: min(100% - 2rem, 42rem); }
.sheet::backdrop { background: var(--overlay); backdrop-filter: blur(4px); }
.sheet[open] { animation: sheet-in .22s var(--ease); }
.sheet.is-closing { animation: sheet-out .18s ease-in forwards; }
.sheet[open]::backdrop { animation: sheet-fade .22s var(--ease); }
.sheet.is-closing::backdrop { animation: sheet-fade .18s ease-in reverse forwards; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes sheet-fade { from { opacity: 0; } }
.sheet__head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); background: var(--surface); border-bottom: 1px solid var(--line); }
.sheet__head h2 { margin: 0; font-size: var(--fs-h4); }
.sheet__body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.sheet .form-card { padding: 0; border: 0; background: none; }
.sheet .cf__head { display: none; }  /* the dialog head carries the title */
.sheet [data-form-summary] + .cf__group { margin-top: 0; }
.sheet__note { display: flex; gap: var(--s-2); align-items: center; margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.sheet__note svg { width: 18px; height: 18px; flex: none; color: var(--accent-ink); }
.sheet__note strong { font-weight: 600; white-space: nowrap; }
.sheet__alt { margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.sheet__alt button.text-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.call-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.call-row { display: flex; align-items: center; gap: var(--s-3); min-height: 4rem; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); text-decoration: none; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.call-row:hover { border-color: var(--accent); }
.call-row:active { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.call-row__ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink); }
.call-row__ico svg { width: 18px; height: 18px; }
.call-row__txt { display: grid; flex: 1; min-width: 0; }
.call-row__txt small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.call-row__txt strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.call-row > svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform var(--dur) var(--ease); }
.call-row:hover > svg { transform: translateX(3px); color: var(--accent-ink); }
@media (max-width: 40rem) {
  .sheet, .sheet--form { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .sheet[open] { animation: sheet-up .28s var(--ease); }
  .sheet.is-closing { animation: sheet-down .18s ease-in forwards; }
  .sheet__head { padding-top: calc(var(--s-4) + .5rem); }
  .sheet__head::before { content: ""; position: absolute; top: .5rem; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--line); }  /* grab line: pull down to close */
  .sheet__body { padding: var(--s-4) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .sheet[open], .sheet.is-closing, .sheet[open]::backdrop, .sheet.is-closing::backdrop { animation: none; } }