/* ==========================================================================
   Praxis Mandel – stylesheet
   Typefaces come from the original Twenty Twenty-Five theme (Ysabeau Office +
   Platypi). Colours: warm cream and espresso, dark mode warm brown-black.
   Layout: one 960px container shared by header, content and footer;
   text measure 745px.
   ========================================================================== */

@font-face {
  font-family: "Ysabeau Office";
  font-style: normal;
  font-weight: 100 900;
  font-display: fallback;
  src: url("../fonts/YsabeauOffice-VariableFont_wght.6f522121.woff2") format("woff2");
}
@font-face {
  font-family: "Ysabeau Office";
  font-style: italic;
  font-weight: 100 900;
  font-display: fallback;
  src: url("../fonts/YsabeauOffice-Italic-VariableFont_wght.6c021b10.woff2") format("woff2");
}
@font-face {
  font-family: "Platypi";
  font-style: normal;
  font-weight: 300 800;
  font-display: fallback;
  src: url("../fonts/Platypi-VariableFont_wght.975bdcac.woff2") format("woff2");
}
@font-face {
  font-family: "Platypi";
  font-style: italic;
  font-weight: 300 800;
  font-display: fallback;
  src: url("../fonts/Platypi-Italic-VariableFont_wght.8f0401c1.woff2") format("woff2");
}

/* --- design tokens ------------------------------------------------------- */
:root {
  --color-base: #f9f5ec;         /* cream */
  --color-contrast: #2f241c;     /* espresso */
  --color-accent-4: #756b63;
  --color-accent-6: color-mix(in srgb, currentColor 20%, transparent);
  --color-rule: #e0dbd2;
  --color-muted: #665b53;        /* small secondary text that needs more contrast than accent-4 */
  --color-fill: #f1ece4;         /* quiet surfaces: success box, companions, hover */
  --color-line: #cdc6be;         /* form field borders */
  --color-line-soft: #d6d0c8;    /* choice cards, time slots */
  --color-error: #b3261e;
  --color-disabled: #b3aba3;
  --hatch-a: #f3efe7;            /* non-bookable time slots */
  --hatch-b: #e8e3da;
  --hatch-border: #e7e2d9;
  --color-map-bg: #eee9e0;
  --chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232f241c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  --icon-filter: none;           /* black pictograms (wheelchair) */
  --tile-filter: none;           /* OpenStreetMap tiles */
  --map-ui-bg: #fff;             /* Leaflet zoom buttons, popup */
  --map-ui-line: #ccc;
  --map-attr-bg: rgba(255, 255, 255, 0.8);
  --map-attr-link: #0078a8;
  color-scheme: light dark;      /* native controls, scrollbars, autofill follow the theme */

  --font-body: "Ysabeau Office", sans-serif;
  --font-heading: "Platypi", serif;

  --fs-small: 0.875rem;
  --fs-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.196), 1.125rem);
  --fs-large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
  --fs-x-large: clamp(1.4rem, 1.4rem + ((1vw - 0.2rem) * 0.627), 1.8rem);
  --fs-xx-large: clamp(2rem, 2rem + ((1vw - 0.2rem) * 0.941), 2.6rem);

  --sp-20: 10px;
  --sp-30: 20px;
  --sp-40: 30px;
  --sp-50: clamp(30px, 5vw, 50px);
  --sp-60: clamp(30px, 7vw, 70px);
  --sp-70: clamp(50px, 7vw, 90px);
  --sp-80: clamp(70px, 10vw, 140px);

  --page-width: 960px;     /* one shared container for header, main, footer */
  --content-size: 745px;   /* text measure */
  --block-gap: 1.2rem;
  --root-padding: var(--sp-50);
  --letter-spacing-caps: 1.44px;
  /* corner radii of the booking form (the design playground /t/ overrides them) */
  --radius-tile: 8px;      /* service cards, time slots, contact choice, companion boxes */
  --radius-inner: 8px;     /* duration bar inside a service card */
  --radius-field: 8px;     /* inputs, select, textarea, people stepper */
  --radius-button: 8px;
  /* optional hooks, unset here (fallback: --color-contrast / --color-base):
     --color-select (filled selection, button), --color-on-select */
  /* home portrait (the design playground /t/ overrides them) */
  --portrait-size: 240px;         /* desktop column; mobile stays min(240px, 70%) */
  --portrait-offset: 6px;         /* down to the cap height of "Über mich" */
  --portrait-position: sticky;    /* stays beside the text while it scrolls */
  --portrait-ring-width: 1px;
  --portrait-ring: #d1cbc2;       /* ink over cream at 18 % */
  --portrait-filter: none;        /* photo stays greyscale */
  --portrait-blend: multiply;     /* the photo's white becomes the cream */
}

/* --- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--color-base);
  color: var(--color-contrast);
  font-family: var(--font-body);
  font-size: var(--fs-large);
  font-weight: 300;
  letter-spacing: -0.22px;
  line-height: 1.5;
}
@media (max-width: 781px) {
  body { font-weight: 400; }
}

a:not(.button) { color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 0.1em; }
a:not(.button):hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-contrast); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.1px;
  line-height: 1.125;
  margin: 0;
  text-wrap: pretty;
}
h1 { font-size: var(--fs-xx-large); }
h2 { font-size: var(--fs-x-large); }
h3 { font-size: var(--fs-large); }
h4, h5 { font-size: var(--fs-medium); }
h6 { font-size: var(--fs-small); }

p, blockquote, figcaption { text-wrap: pretty; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
strong { font-weight: 600; }

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
  background-color: var(--color-fill); clip-path: none; color: var(--color-contrast); display: block; font-size: 1em;
  height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none;
  top: 5px; width: auto; z-index: 100000;
}

/* small uppercase label style, reused for facts, group titles, language switch */
.caps {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
}

/* --- layout -------------------------------------------------------------- */
.container { max-width: var(--page-width); margin-inline: auto; }
.site-header, .site-main, .site-footer { padding-inline: var(--root-padding); }

/* --- header -------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--color-rule); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-40);
  padding-block: var(--sp-30);
}
.site-title {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-caps);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-title a { text-decoration: none; }
.site-title a:hover { text-decoration: underline; }

.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--sp-40);
}

/* navigation */
.site-nav { font-size: var(--fs-medium); font-weight: 400; }
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.site-nav__list a { text-decoration: none; }
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }
.site-nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
  line-height: 0;
}
.site-nav__toggle svg { fill: currentColor; }
.site-nav__toggle .icon-close { display: none; }

/* language switch: DE | TR */
.lang-switch {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 1px;
}
.lang-switch li + li::before { content: "|"; margin-inline: 0.5rem; color: var(--color-accent-4); }
.lang-switch a { text-decoration: none; }
.lang-switch a:hover { text-decoration: underline; }
.lang-switch a[aria-current="true"] { font-weight: 700; }

/* language switch + theme toggle sit close together */
.site-header__tools { display: flex; align-items: center; gap: 12px; }

/* light/dark toggle (shown by site.js; hidden without JS) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px;                 /* 44px touch target without pushing the layout */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--color-fill); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun,
.theme-toggle[aria-pressed="true"] .icon-moon { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: block; }

@media (max-width: 599px) {
  .site-header__inner { gap: var(--sp-30); }
  .site-header__right { gap: var(--sp-30); }
  .site-nav__toggle { display: inline-block; }
  .site-nav__list { display: none; }
  .site-nav.is-open .site-nav__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--color-base);
    padding: calc(var(--sp-60) + 24px) var(--root-padding) var(--sp-60);
    font-size: var(--fs-x-large);
    gap: var(--sp-30);
    overflow: auto;
  }
  .site-nav.is-open .site-nav__toggle {
    position: fixed; top: var(--sp-30); right: var(--root-padding); z-index: 1001;
  }
  .site-nav.is-open .icon-open { display: none; }
  .site-nav.is-open .icon-close { display: inline; }
  body.nav-open { overflow: hidden; }
}

/* --- main ---------------------------------------------------------------- */
.site-main { padding-block: var(--sp-60); }
.page { max-width: var(--page-width); margin-inline: auto; }

/* inner pages: title + content, text measure, left aligned to the container */
.page > * { max-width: var(--content-size); }
.page > * + * { margin-block-start: var(--block-gap); }
.page-title { word-break: break-word; }

.entry-content > * + * { margin-block-start: var(--block-gap); }
.entry-content h2 { margin-block-start: calc(var(--block-gap) * 1.6); }
/* terminator pages (confirm link, reschedule): text, then the button with a little more room */
.token-form > * + * { margin-block-start: calc(var(--block-gap) * 1.6); }
.entry-content ul, .entry-content ol { margin: 0; padding-inline-start: 1.5em; line-height: 1.4; }
.entry-content li { margin-top: 0.5rem; }
.entry-content li > p { margin: 0; }

/* --- home: sections ------------------------------------------------------ */
.page--home > * { max-width: none; }
.page--home > * + * { margin-block-start: var(--sp-60); }

/* intro */
.intro { max-width: 820px; }
.intro > * + * { margin-block-start: var(--block-gap); }
.intro__headline { font-size: var(--fs-xx-large); }
.intro__tagline { max-width: var(--content-size); font-size: var(--fs-large); }

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  color: var(--color-accent-4);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.5;
}
.facts li:not(:last-child)::after { content: "·"; margin-inline: 0.75rem; }
.intro .facts { margin-block-start: var(--sp-30); }
@media (max-width: 599px) {
  .facts { display: block; }
  .facts li:not(:last-child)::after { content: none; }
  .facts li + li { margin-top: 0.25rem; }
}

/* about: portrait | text (portrait tokens: --portrait-* in :root and the dark blocks) */
.about {
  display: grid;
  grid-template-columns: var(--portrait-size, 220px) 1fr;
  gap: var(--sp-50);
  align-items: start;
  max-width: 820px;
}
.about__portrait {
  position: var(--portrait-position, static);
  top: var(--portrait-top, 2rem);
  margin-block-start: var(--portrait-offset, 0);
  /* on the figure, not the img: sticky makes the figure a stacking context,
     which would otherwise blend the img with nothing */
  mix-blend-mode: var(--portrait-blend, normal);
}
.about__portrait img {
  border-radius: 9999px;
  width: 100%;
  filter: var(--portrait-filter, none);
  box-shadow: 0 0 0 var(--portrait-ring-width, 0px) var(--portrait-ring, transparent);
}
.about__text > * + * { margin-block-start: var(--block-gap); }
.about__text h2 { margin-block-end: calc(var(--block-gap) * 1.25); }
@media (max-width: 781px) {
  .about { grid-template-columns: 1fr; gap: var(--sp-40); }
  .about__portrait { width: min(240px, 70%); margin-inline: auto; position: static; margin-block-start: 0; }
}

/* services: three labeled groups spanning the full container */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-40);
}
.services__title {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.services ul { list-style: none; margin: 0; padding: 0; }
.services li {
  position: relative;
  padding-left: 1.6em;
  margin-top: 0.5rem;
  font-weight: 400;
  line-height: 1.4;
}
.services li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.95em;
  height: 0.95em;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/></svg>') center / contain no-repeat;
}
@media (max-width: 781px) {
  .services { grid-template-columns: 1fr; gap: var(--sp-30); }
}

/* call to action */
.page--home > .cta { margin-block-start: var(--sp-50); }
.cta__note {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--color-accent-4);
}

/* buttons */
.button {
  display: inline-block;
  background-color: var(--color-select, var(--color-contrast));
  color: var(--color-on-select, var(--color-base));
  border: 0;
  border-radius: var(--radius-button, 0);
  font-family: var(--font-body);
  font-size: var(--fs-medium);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-caps);
  line-height: inherit;
  padding: 1rem 2.25rem;
  text-decoration: none;
  text-transform: uppercase;
}
.button:hover {
  background-color: color-mix(in srgb, var(--color-select, var(--color-contrast)) 85%, transparent);
  color: var(--color-on-select, var(--color-base));
}
.button:focus-visible { outline-color: var(--color-accent-4); outline-offset: 2px; }

/* quote / notice block (accessibility note on the contact page) */
blockquote, .notice {
  border: 0 solid currentColor;
  border-left-width: 2px;
  font-size: var(--fs-large);
  margin: 0;
  padding: var(--sp-30) var(--sp-40);
}
blockquote > * + *, .notice > * + * { margin-block-start: var(--sp-30); }
.notice__icon img { width: 65px; height: auto; }

/* map */
.map {
  height: 555px;
  width: 100%;
  background: var(--color-map-bg);
}
.map .leaflet-popup-content { font-family: var(--font-body); }
/* click-to-load notice shown in place of the map until the visitor opts in */
.map { position: relative; }
.map__consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-30);
  padding: var(--sp-40);
  text-align: center;
}
.map__consent p { max-width: 46ch; font-size: var(--fs-medium); }

/* transit lines (contact page) */
.anfahrt ul { list-style: none; padding: 0; margin: 0; }
.anfahrt li { margin-bottom: 8px; line-height: 1.6; }
.linie {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font: 700 13px/1.4 Arial, sans-serif;
  color: #fff;
  text-align: center;
  min-width: 24px;
  margin-right: 4px;
  vertical-align: middle;
}
.linie--s   { background-color: #33814a; }            /* S-Bahn  grün (4.8:1 with white, WCAG AA) */
.linie--u   { background-color: rgb(0, 51, 153); }    /* U-Bahn  blau    */
.linie--bus { background-color: rgb(153, 51, 153); }  /* Bus     violett */

/* obfuscated e-mail (filled in by site.js) */
.eml { white-space: nowrap; }

/* --- footer -------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-rule);
  font-size: var(--fs-medium);
  font-weight: 400;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-40);
  padding-block: var(--sp-60) var(--sp-50);
}
.site-footer__col > * + * { margin-block-start: var(--block-gap); }
.site-footer__address { margin: 0; }
.site-footer__nav { list-style: none; margin: 0; padding: 0; }
.site-footer__nav li + li { margin-top: 0.4rem; }
.site-footer__nav a { text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.lang-switch--footer { letter-spacing: 0; }
.site-footer__meta { color: var(--color-accent-4); }
.site-footer__meta p + p { margin-top: 0.4rem; }
@media (max-width: 781px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--sp-30); }
}

/* --- booking form (termin.html) -----------------------------------------
   Numbered steps: heading column | fields column, stacked below 782px.
   Choices and time slots are labels wrapping a visually hidden input;
   their checked/focus state is drawn with :has().
   ------------------------------------------------------------------------ */
[hidden] { display: none !important; }

.page--booking > * { max-width: none; }
.page--booking > * + * { margin-block-start: clamp(40px, 6vw, 64px); }
.booking-intro { max-width: 660px; }
.booking-intro > * + * { margin-block-start: var(--block-gap); }
.booking__note { font-size: var(--fs-small); font-weight: 400; color: var(--color-accent-4); }

.booking {
  --line: var(--color-line);
  --fill: var(--color-fill);
  --error: var(--color-error);
  counter-reset: step;
  font-size: var(--fs-medium);
  font-weight: 400;
}
.booking .req { color: var(--color-accent-4); }

/* honeypot: off-screen, not display:none (some bots skip hidden fields) */
.booking__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* steps */
.step {
  margin: 0;
  padding: var(--sp-40) 0;
  border: 0;
  border-top: 1px solid var(--color-rule);
  min-width: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-30) var(--sp-50);
  align-items: start;
}
.booking__hp + .step { border-top-color: var(--color-contrast); }   /* first step */
.step--final { border-top-color: var(--color-contrast); padding-bottom: 0; }
.step--final .step__body { grid-column: 2; }
.step__head {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.step__head::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  color: var(--color-accent-4);
}
.step__head h2 { font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem); line-height: 1.15; }
.step__head label { cursor: pointer; }
.step__hint { margin-top: 6px; font-size: var(--fs-small); color: var(--color-accent-4); line-height: 1.4; }
.step__body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-30); }
@media (max-width: 781px) {
  .step { grid-template-columns: minmax(0, 1fr); }
  .step--final .step__body { grid-column: 1; }
}

/* fields */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--sp-30) 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field > label, .field > .field__label, .companion label {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.4px;
}
.field__hint { font-size: var(--fs-small); color: var(--color-accent-4); line-height: 1.4; }
.field__error { color: var(--error); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; }
.field__error:empty { display: none; }

.booking input:not([type]),            /* minify_html drops type="text" */
.booking input[type="text"],
.booking input[type="email"],
.booking input[type="tel"],
.booking input[type="number"],
.booking select,
.booking textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field, 0);
  background: var(--color-base);
  color: inherit;
  font: inherit;
  font-weight: 400;
}
.booking textarea { resize: vertical; min-height: 140px; line-height: 1.45; }
.booking select {
  appearance: none;
  padding-right: 44px;
  background: var(--color-base) var(--chevron) right 14px center / 18px no-repeat;
}
.booking input:focus-visible,
.booking select:focus-visible,
.booking textarea:focus-visible { outline: 2px solid var(--color-contrast); outline-offset: -1px; border-color: var(--color-contrast); }
.booking [aria-invalid="true"]:not([role]) { border-color: var(--error); }

/* service cards */
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; }
.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 96px;
  padding: 16px 18px;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-tile, 0);
  background: var(--color-base);
  cursor: pointer;
}
.choice:hover { border-color: var(--color-contrast); }
/* invisible radio/checkbox stretched over its whole tile. inset alone is not enough:
   iOS Safari keeps native radios at 16px and rounds them, so width/height, no border-radius
   and no native appearance are needed for every part of the tile to be tappable */
.choice input, .avail__slot input, .pref__opt input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  border-radius: 0; -webkit-appearance: none; appearance: none;
  opacity: 0; cursor: pointer;
}
.choice__name { font-size: 1.125rem; font-weight: 500; line-height: 1.25; }
.choice__meta { font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.6px; color: var(--color-muted); }
.choice:has(input:checked) { background: var(--color-select, var(--color-contrast)); border-color: var(--color-select, var(--color-contrast)); color: var(--color-on-select, var(--color-base)); }
.choice:has(input:checked) .choice__meta { color: color-mix(in srgb, var(--color-base) 78%, var(--color-contrast)); }
.choice:has(input:focus-visible), .avail__slot:has(input:focus-visible) { outline: 2px solid var(--color-contrast); outline-offset: 2px; }
#f-service[aria-invalid="true"] .choice { border-color: var(--error); }

/* duration + price box inside a service card: one cell, or one radio per duration */
.choice--multi { grid-column: span 2; }
@media (max-width: 480px) { .choice--multi { grid-column: auto; } }
.durations { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid currentColor; border-radius: var(--radius-inner, 0); overflow: hidden; }
.durations__opt {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px; line-height: 1.2;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.durations__opt + .durations__opt { border-left: 1px solid currentColor; }
.choice--multi .durations__opt { position: relative; }   /* its radio covers just this cell */
/* keep the radio above the price text: its opacity creates a stacking layer that would
   otherwise swallow the click and hand it to the card label, i.e. the first duration */
.choice--multi .durations__opt input { z-index: 1; }
.durations__min { font-weight: 600; }
.durations__price { font-size: var(--fs-small); opacity: 0.75; }
.choice--multi .durations__opt:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.choice:has(input:checked) .durations__opt { background: transparent; }
.choice:not(.choice--multi):has(input:checked) .durations__opt,
.choice .durations__opt:has(input:checked) { background: var(--color-on-select, var(--color-base)); color: var(--color-select, var(--color-contrast)); }
.durations__opt:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: -4px; }

/* preferred contact method: two side-by-side options in the card style */
.pref { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 460px; }
.pref__opt {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 10px 14px;
  border: 1px solid var(--color-line-soft); border-radius: var(--radius-tile, 0); background: var(--color-base);
  font-weight: 500; cursor: pointer;
}
.pref__opt:hover { border-color: var(--color-contrast); }
.pref__opt:has(input:checked) { background: var(--color-select, var(--color-contrast)); border-color: var(--color-select, var(--color-contrast)); color: var(--color-on-select, var(--color-base)); }
.pref__opt:has(input:focus-visible) { outline: 2px solid var(--color-contrast); outline-offset: 2px; }
#f-contact_pref[aria-invalid="true"] .pref__opt { border-color: var(--error); }

/* availability grid: time labels column + one group per day */
.avail {
  display: grid;
  grid-template-columns: auto repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.avail__times, .avail__day {
  display: grid;
  grid-template-rows: 28px repeat(3, 52px);
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.avail__times { padding-right: 8px; font-size: var(--fs-small); font-weight: 500; }
.avail__times span { align-self: center; }
.avail__times span:nth-child(1) { grid-row: 2; }
.avail__times span:nth-child(2) { grid-row: 3; }
.avail__times span:nth-child(3) { grid-row: 4; }
.avail__dayname {
  padding: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
  align-self: center;
}
.avail__slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-tile, 0);
  background: var(--color-base);
  color: var(--color-on-select, var(--color-base));               /* the check mark */
  cursor: pointer;
}
.avail__slot:hover { border-color: var(--color-contrast); }
.avail__slot::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  opacity: 0;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/></svg>') center / contain no-repeat;
}
.avail__slot:has(input:checked) { background: var(--color-select, var(--color-contrast)); border-color: var(--color-select, var(--color-contrast)); }
.avail__slot:has(input:checked)::after { opacity: 1; }
#f-avail[aria-invalid="true"] .avail__slot:not(.avail__slot--off) { border-color: var(--error); }
/* slots that cannot be booked: greyed out and hatched, so they don't read as "empty, pick me" */
.avail__slot--off,
.avail__slot--off:hover {
  border-color: var(--hatch-border);
  background: repeating-linear-gradient(-45deg, var(--hatch-a) 0 4px, var(--hatch-b) 4px 5px);
  cursor: not-allowed;
}
.avail__slot--off input { cursor: not-allowed; }
@media (max-width: 420px) {
  .avail { gap: 5px; }
  .avail__times, .avail__day { grid-template-rows: 28px repeat(3, 46px); gap: 5px; }
  .avail__times { padding-right: 2px; font-size: 0.8rem; }
  .avail__dayname { letter-spacing: 0.4px; font-size: 0.75rem; }
}

/* persons stepper */
.persons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.stepper { display: inline-flex; border: 1px solid var(--color-contrast); border-radius: var(--radius-field, 0); overflow: hidden; }
.stepper__btn {
  width: 50px;
  min-height: 50px;
  border: 0;
  background: var(--color-base);
  color: inherit;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.stepper__btn:hover:not(:disabled) { background: var(--fill); }
.stepper__btn:disabled { color: var(--color-disabled); cursor: default; }
.booking .stepper input[type="number"] {
  width: 64px;
  border: 0;
  border-inline: 1px solid var(--color-contrast);
  border-radius: 0;               /* the stepper frame carries the radius */
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  -moz-appearance: textfield;
}
.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* without JS the buttons stay hidden: drop the inner dividers */
.booking .stepper:not(:has(.stepper__btn:not([hidden]))) input[type="number"] { border-inline: 0; }

/* companions */
.companions { display: flex; flex-direction: column; gap: 12px; }
.companion {
  margin: 0;
  padding: clamp(14px, 3vw, 20px);
  border: 0;
  border-radius: var(--radius-tile, 0);
  background: var(--fill);
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px 16px;
}
.companion__title {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
}

/* consent + submit */
.check { display: flex; gap: 14px; align-items: flex-start; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--color-contrast); }
.booking__submit { margin-top: var(--sp-20); }
.booking .button { min-height: 56px; cursor: pointer; }
.booking .button:disabled { opacity: 0.6; cursor: progress; }

/* sending state: spinner inside the button + patience note below */
.booking .button[data-submit] { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.booking .button.is-busy { opacity: 1; }        /* stays readable while disabled */
.spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: pulse 1.6s ease-in-out infinite; border-right-color: currentColor; }
}
.booking__wait { margin-top: var(--sp-20); max-width: 46ch; font-size: var(--fs-small); color: var(--color-accent-4); line-height: 1.45; }
.booking__wait:empty { display: none; }

/* error summary + success */
.booking__errors {
  margin-bottom: var(--sp-40);
  padding: var(--sp-30) var(--sp-40);
  border: 2px solid var(--error);
}
.booking__errors-title { font-size: var(--fs-large); margin-bottom: 0.5rem; }
.booking__errors ul { margin: 0; padding-left: 1.2em; }
.booking__errors a { color: var(--error); }
.booking__success { padding: var(--sp-40); background: var(--fill); max-width: var(--content-size); }
.booking__success > * + * { margin-top: var(--block-gap); }

/* --- theme: light / dark --------------------------------------------------
   Dark applies when the visitor chose it with the header toggle
   (html[data-theme="dark"], set by the inline script in base.html + site.js),
   or when the system is dark and the visitor has not chosen light.
   The two variable lists below must stay identical.
   ------------------------------------------------------------------------ */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
    --color-base: #191410;
    --color-contrast: #ebe4d4;
    --color-accent-4: #948c82;
    --color-rule: #3c352f;
    --color-muted: #a59e93;
    --color-fill: #241e1a;
    --color-line: #5a544c;
    --color-line-soft: #4b443e;
    --color-error: #f28b82;
    --color-disabled: #544e47;
    --hatch-a: #201a16;
    --hatch-b: #312a25;
    --hatch-border: #322c26;
    --color-map-bg: #221c18;
    --chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ebe4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
    --icon-filter: invert(1);
    --tile-filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9);
    --map-ui-bg: var(--color-fill);
    --map-ui-line: var(--color-line-soft);
    --map-attr-bg: color-mix(in srgb, var(--color-base) 80%, transparent);
    --map-attr-link: var(--color-contrast);
    --portrait-ring: #39332d;
    --portrait-filter: brightness(92%);
    --portrait-blend: normal;       /* multiply would sink the face into the dark */
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      --color-base: #191410;
      --color-contrast: #ebe4d4;
      --color-accent-4: #948c82;
      --color-rule: #3c352f;
      --color-muted: #a59e93;
      --color-fill: #241e1a;
      --color-line: #5a544c;
      --color-line-soft: #4b443e;
      --color-error: #f28b82;
      --color-disabled: #544e47;
      --hatch-a: #201a16;
      --hatch-b: #312a25;
      --hatch-border: #322c26;
      --color-map-bg: #221c18;
      --chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ebe4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
      --icon-filter: invert(1);
      --tile-filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9);
      --map-ui-bg: var(--color-fill);
      --map-ui-line: var(--color-line-soft);
      --map-attr-bg: color-mix(in srgb, var(--color-base) 80%, transparent);
      --map-attr-link: var(--color-contrast);
      --portrait-ring: #39332d;
      --portrait-filter: brightness(92%);
      --portrait-blend: normal;       /* multiply would sink the face into the dark */
      color-scheme: dark;
  }
}

.notice__icon img { filter: var(--icon-filter); }
/* on the tiles themselves – Safari ignores a filter on Leaflet's 3D-transformed tile pane */
.map .leaflet-tile { filter: var(--tile-filter); }
.map.leaflet-container { background: var(--color-map-bg); }
.map .leaflet-bar a,
.map .leaflet-popup-content-wrapper,
.map .leaflet-popup-tip { background: var(--map-ui-bg); color: var(--color-contrast); }
.map .leaflet-bar a { border-bottom-color: var(--map-ui-line); }
.map .leaflet-control-attribution { background: var(--map-attr-bg); color: var(--color-accent-4); }
.map .leaflet-control-attribution a { color: var(--map-attr-link); }

/* --- print --------------------------------------------------------------- */
@media print {
  .site-nav, .lang-switch, .theme-toggle, .map, .cta { display: none !important; }
  /* always print dark text on white, even when the screen is in dark mode */
  /* :root:root outranks both dark selectors above */
  :root:root { --color-base: #ffffff; --color-contrast: #111111; --color-accent-4: #686868; --color-muted: #5c5c5c; --icon-filter: none; color-scheme: light; }
}
/* terminator: ways out of an invalid link (T-0066) */
.link-actions { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-block-start: var(--block-gap); }