/* tokens.css */
/* ==========================================================================
   Design tokens – Feingefühl Pferd
   The 8 brand colors, the font pairing and the corner style come from the theme
   (editable in the editor, injected as --brand-* / --font-* / --radius-scale).
   Everything else is derived here. Never hard-code colors or sizes in components –
   always use these tokens.
   ========================================================================== */

:root {
  /* Fallbacks (overridden by the theme <style> in <head>) */
  --brand-background: #FBF7F1;
  --brand-surface: #F2E9DD;
  --brand-text: #33251B;
  --brand-muted: #6B5646;
  --brand-primary: #985631;
  --brand-accent: #C08457;
  --brand-dark: #2B2019;
  --brand-light: #FBF7F1;
  --font-heading: 'Fraunces Variable', Georgia, serif;
  --font-body: 'Figtree Variable', system-ui, sans-serif;
  --radius-scale: 1;

  /* ---- Color: semantic roles ------------------------------------------- */
  --color-bg: var(--brand-background);
  --color-surface: var(--brand-surface);
  --color-surface-soft: color-mix(in oklab, var(--brand-surface) 45%, var(--brand-background));
  --color-text: var(--brand-text);
  --color-heading: var(--brand-text);
  --color-text-muted: var(--brand-muted);
  --color-primary: var(--brand-primary);
  --color-primary-hover: color-mix(in oklab, var(--brand-primary) 80%, #000);
  --color-primary-soft: color-mix(in oklab, var(--brand-primary) 10%, var(--brand-background));
  --color-on-primary: var(--brand-light);
  --color-accent: var(--brand-accent);
  --color-accent-soft: color-mix(in oklab, var(--brand-accent) 22%, var(--brand-background));
  --color-dark: var(--brand-dark);
  --color-dark-raised: color-mix(in oklab, var(--brand-dark) 88%, var(--brand-light));
  --color-on-dark: var(--brand-light);
  --color-on-dark-muted: color-mix(in oklab, var(--brand-light) 72%, var(--brand-dark));
  --color-line: color-mix(in oklab, var(--brand-text) 13%, transparent);
  --color-line-strong: color-mix(in oklab, var(--brand-text) 26%, transparent);
  --color-line-on-dark: color-mix(in oklab, var(--brand-light) 18%, transparent);
  --color-focus: var(--brand-primary);
  /* Form fields: a touch lighter than the page, plain white while focused */
  --color-field: color-mix(in oklab, var(--brand-background) 70%, #fff);
  --color-field-focus: #fff;
  --color-success: #4E7A4B;
  --color-error: #A3392B;
  /* Scrim for text on photos – guarantees contrast regardless of the image */
  --scrim-bottom: linear-gradient(to top, rgb(20 14 10 / .78) 0%, rgb(20 14 10 / .38) 45%, rgb(20 14 10 / .08) 75%, rgb(20 14 10 / 0) 100%);
  --scrim-left: linear-gradient(to right, rgb(20 14 10 / .72) 0%, rgb(20 14 10 / .42) 40%, rgb(20 14 10 / 0) 75%);
  --scrim-full: linear-gradient(rgb(20 14 10 / .45), rgb(20 14 10 / .55));
  --scrim-backdrop: rgb(20 14 10 / 0.5);   /* behind modal dialogs */
  --scrim-none: rgb(20 14 10 / 0);

  /* ---- Typography -------------------------------------------------------- */
  --text-xs: 0.8125rem;                                   /* 13px – meta, captions */
  --text-sm: 0.9375rem;                                   /* 15px – small UI */
  --text-base: 1.0625rem;                                 /* 17px – body */
  --text-lg: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);  /* 18–20px – lead */
  --text-xl: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);    /* 20–24px */
  --text-h4: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --text-h3: clamp(1.5rem, 1.28rem + 0.95vw, 2rem);
  --text-h2: clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem);
  --text-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4.75rem);
  --text-display: clamp(2.75rem, 1.55rem + 5.2vw, 6.25rem);

  --leading-tight: 1.06;
  --leading-heading: 1.14;
  --leading-snug: 1.3;
  --leading-body: 1.65;
  --leading-relaxed: 1.8;

  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.16em;

  --weight-heading: 360;
  --weight-heading-strong: 480;
  --weight-body: 400;
  --weight-medium: 520;
  --weight-semibold: 620;

  --measure: 64ch;
  --measure-narrow: 46ch;

  /* ---- Spacing (4px grid) ----------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4.5rem, 2.8rem + 7vw, 9.5rem);
  --section-y-sm: clamp(3rem, 2rem + 4vw, 5.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --grid-gap: clamp(1.5rem, 0.9rem + 2.4vw, 3.5rem);

  --container: 76rem;
  --container-wide: 92rem;
  --container-narrow: 46rem;
  --header-h: 4.75rem;

  /* ---- Shape ------------------------------------------------------------- */
  --radius-xs: calc(4px * var(--radius-scale));
  --radius-sm: calc(8px * var(--radius-scale));
  --radius-md: calc(16px * var(--radius-scale));
  --radius-lg: calc(28px * var(--radius-scale));
  --radius-xl: calc(44px * var(--radius-scale));
  --radius-pill: 999px;
  /* Signature shape: a soft arch, echoing stable doors and the curve of a horse's neck */
  --radius-arch: calc(999px * min(var(--radius-scale), 1)) calc(999px * min(var(--radius-scale), 1)) var(--radius-md) var(--radius-md);

  --shadow-sm: 0 1px 2px rgb(43 32 25 / 0.06), 0 2px 10px rgb(43 32 25 / 0.05);
  --shadow-md: 0 10px 30px -12px rgb(43 32 25 / 0.22);
  --shadow-lg: 0 30px 70px -28px rgb(43 32 25 / 0.38);
  --shadow-button: 0 12px 30px -16px rgb(20 14 10 / 0.55);

  --border: 1px solid var(--color-line);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* default for entrances */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* moving between states */
  --ease-soft: cubic-bezier(0.33, 0.12, 0.25, 1);  /* gentle hovers */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* playful micro-interactions */
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
  --dur-slower: 1100ms;
  --dur-ambient: 24s;
  --reveal-distance: 28px;
  --stagger: 90ms;

  /* ---- Layers ------------------------------------------------------------ */
  --z-raised: 2;
  --z-header: 50;
  --z-overlay: 80;
  --z-dialog: 100;
  --z-fab: 900;
  --z-editor: 1000;
  --z-toast: 1100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
    --reveal-distance: 0px;
    --stagger: 0ms;
  }
}


/* base.css */
/* ==========================================================================
   Base: reset, typography, layout primitives
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  hanging-punctuation: first last;
  interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
[hidden] { display: none !important; }

/* ---- Headings --------------------------------------------------------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  color: var(--color-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
  font-variation-settings: 'SOFT' 50;
}
.display { font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h1, .h1 { font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2, .h2 { font-size: var(--text-h2); }
h3, .h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
h4, .h4 { font-size: var(--text-h4); line-height: var(--leading-snug); }
h1 em, h2 em, h3 em, .display em { font-style: italic; color: var(--color-primary); }

p, li { text-wrap: pretty; }
strong, b { font-weight: var(--weight-semibold); }

.lead { font-size: var(--text-lg); line-height: var(--leading-body); color: var(--color-text-muted); max-width: var(--measure); }
.small { font-size: var(--text-sm); }
.muted { color: var(--color-text-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow--plain::before { display: none; }

/* ---- Links -------------------------------------------------------------- */
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--color-primary-hover); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--color-accent-soft); color: var(--color-text); }

/* ---- Prose (rich text, blog bodies, legal pages) ------------------------ */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--text-h3); margin-top: 2em; }
.prose h3 { font-size: var(--text-h4); margin-top: 1.8em; }
.prose h4 { font-size: var(--text-lg); margin-top: 1.6em; font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: 0; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--color-accent); }
.prose blockquote {
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-style: italic;
  color: var(--color-heading);
}
.prose a { text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }
.prose img, .prose figure img { border-radius: var(--radius-md); }
.prose figure { margin-block: 2em; }
.prose figcaption { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.prose hr { border: 0; height: 1px; background: var(--color-line); margin-block: 2.5em; }
.prose > :first-child { margin-top: 0; }

/* ---- Layout primitives -------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-sm); }
.section--surface { background: var(--color-surface-soft); }
.section--dark { background: var(--color-dark); color: var(--color-on-dark); }
.section--dark :is(h1, h2, h3, h4, .display) { color: var(--color-on-dark); }
.section--dark .eyebrow { color: var(--color-accent); }
.section--dark .lead, .section--dark .muted { color: var(--color-on-dark-muted); }

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-5)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-4)); }
.grid-2 { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* ---- Images ------------------------------------------------------------- */
.media-img {
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  object-fit: cover;
}

/* ---- Editable content that is empty is hidden for visitors -------------- */
html:not(.is-editing) [data-empty] { display: none; }

/* ---- Accessibility helpers --------------------------------------------- */
.visually-hidden {
  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: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-dark);
  color: var(--color-on-dark);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: none; color: var(--color-on-dark); }

main:focus { outline: none; }
/* Sections/headings that only receive focus as jump targets (menu, table of contents) */
section[tabindex='-1']:focus, :is(h2, h3)[tabindex='-1']:focus:not(:focus-visible) { outline: none; }

/* Cross-document page transitions (Chrome, Edge, Safari 18.2+) */
@view-transition { navigation: auto; }


/* components.css */
/* ==========================================================================
   Components: buttons, text links, badges, cards, forms, dialogs, toasts,
   section headers and image frames. Shared by every page.
   ========================================================================== */

/* ---- Icons ------------------------------------------------------------- */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Buttons ----------------------------------------------------------- */
/*
  Pill with the label on the left and – when the button has an icon – a round "chip" on the right.
  Hover: a circle grows out of the chip and floods the whole button, the arrow turns towards
  "up-right". Without an icon the circle grows from the centre.
  Variants only set the custom properties below.
*/
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-border: var(--color-line-strong);
  --btn-fill: var(--color-dark);
  --btn-fg-hover: var(--color-on-dark);
  --btn-border-hover: var(--btn-fill);
  --btn-chip-bg: var(--color-primary);
  --btn-chip-fg: var(--color-on-primary);
  --btn-chip-bg-hover: var(--color-on-dark);
  --btn-chip-fg-hover: var(--color-dark);
  --btn-chip: 2.25rem;
  --btn-inset: 0.4rem;
  --btn-pad-x: 1.5rem;
  --btn-origin: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 3.25rem;
  padding: var(--btn-inset) var(--btn-pad-x);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.015em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--dur-base) var(--ease-soft),
    border-color var(--dur-slow) var(--ease-soft),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-soft);
}
.btn:has(> .icon:last-child) {
  --btn-origin: calc(100% - var(--btn-inset) - var(--btn-chip) / 2);
  padding-right: var(--btn-inset);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  clip-path: circle(0% at var(--btn-origin) 50%);
  transition: clip-path var(--dur-slow) var(--ease-out);
}
.btn > .icon:last-child {
  box-sizing: border-box;
  width: var(--btn-chip);
  height: var(--btn-chip);
  padding: calc(var(--btn-chip) * 0.26);
  border-radius: 50%;
  background: var(--btn-chip-bg);
  color: var(--btn-chip-fg);
  stroke-width: 1.8;
  transition:
    transform var(--dur-slow) var(--ease-spring),
    background-color var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft);
}
@media (hover: hover) {
  .btn:hover { color: var(--btn-fg-hover); border-color: var(--btn-border-hover); }
  .btn:hover::before { clip-path: circle(150% at var(--btn-origin) 50%); }
  .btn:hover > .icon:last-child { transform: rotate(-45deg); background: var(--btn-chip-bg-hover); color: var(--btn-chip-fg-hover); }
}
.btn:focus-visible { outline-offset: 4px; }
.btn:active { transform: scale(0.97); }

/* Main action – one per section */
.btn--primary {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-on-primary);
  --btn-border: var(--color-primary);
  --btn-chip-bg: var(--color-on-primary);
  --btn-chip-fg: var(--color-primary);
  --btn-chip-bg-hover: var(--color-primary);
  --btn-chip-fg-hover: var(--color-on-primary);
  box-shadow: 0 10px 24px -14px color-mix(in oklab, var(--color-primary) 85%, transparent);
}
@media (hover: hover) {
  .btn--primary:hover { box-shadow: 0 16px 32px -16px color-mix(in oklab, var(--color-dark) 70%, transparent); }
}

/* Quiet outline on light backgrounds */
.btn--secondary { --btn-fg: var(--color-text); }

/* On photos and dark sections: solid cream so it stays readable on every image */
.btn--light,
.btn--light-solid {
  --btn-bg: var(--color-on-dark);
  --btn-fg: var(--color-dark);
  --btn-border: var(--color-on-dark);
  --btn-fill: var(--color-primary);
  --btn-fg-hover: var(--color-on-primary);
  --btn-border-hover: var(--color-primary);
  --btn-chip-bg: var(--color-primary);
  --btn-chip-fg: var(--color-on-primary);
  --btn-chip-bg-hover: var(--color-on-primary);
  --btn-chip-fg-hover: var(--color-primary);
  box-shadow: var(--shadow-button);
}

.btn--sm { --btn-chip: 1.85rem; --btn-inset: 0.3rem; --btn-pad-x: 1.1rem; min-height: 2.75rem; /* 44px touch target */ font-size: var(--text-xs); gap: var(--space-3); }
.btn--lg { --btn-chip: 2.6rem; --btn-inset: 0.45rem; --btn-pad-x: 1.75rem; min-height: 3.6rem; font-size: var(--text-base); }
.btn--block { width: 100%; justify-content: space-between; }
.btn--block:not(:has(> .icon:last-child)) { justify-content: center; }

/* Round icon-only button */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  transition: background-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.icon-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.icon-btn:active { transform: scale(0.94); }

/* ---- Text link with drawn underline ----------------------------------- */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-slow) var(--ease-out), color var(--dur-base);
}
.text-link:hover { background-size: 0 1px; background-position: 100% 100%; }
/* invisible 44px hit area (touch targets) – the visible link stays as it is */
.text-link:not(.text-link--light) { position: relative; }
.text-link:not(.text-link--light)::before { content: ''; position: absolute; inset: -0.45rem -0.25rem; }
.text-link .icon { transition: transform var(--dur-base) var(--ease-out); }
.text-link:hover .icon { transform: translateX(4px); }
/* Secondary action next to a button on photos / dark backgrounds */
.text-link--light { color: var(--color-on-dark); min-height: 2.75rem; }
.text-link--light:hover { color: var(--color-on-dark); }

/* Underline that draws in (for nav and footer links) */
.draw-link {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out), opacity var(--dur-base);
}
.draw-link:hover, .draw-link[aria-current='page'] { color: inherit; background-size: 100% 1px; }

/* ---- Badge (e.g. "Aktuell habe ich Kapazitäten") ----------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-bg) 85%, transparent);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}
.badge--glass {
  background: color-mix(in oklab, var(--color-on-dark) 14%, transparent);
  color: var(--color-on-dark);
  border: 1px solid color-mix(in oklab, var(--color-on-dark) 25%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.badge__dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-success) 25%, transparent);
}
.badge__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.8; }
  80%, 100% { transform: scale(3); opacity: 0; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: var(--color-bg);
}

/* ---- Section header ---------------------------------------------------- */
.section-head { display: grid; gap: var(--space-4); max-width: 44rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  column-gap: var(--grid-gap);
}
.section-head--split > .lead { justify-self: end; }
@media (max-width: 52rem) {
  .section-head--split { grid-template-columns: 1fr; }
  .section-head--split > .lead { justify-self: start; }
}

/* ---- Cards ------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  background: var(--color-bg);
  border: var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-base);
}
.card--interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card--surface { background: var(--color-surface-soft); border-color: transparent; }

/* ---- Image frames ------------------------------------------------------ */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.frame > img, .frame > .media-img { width: 100%; height: 100%; object-fit: cover; }
.frame--arch { border-radius: var(--radius-arch); }
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--tall { aspect-ratio: 3 / 4; }
.frame--landscape { aspect-ratio: 3 / 2; }
.frame--square { aspect-ratio: 1; }
.frame--wide { aspect-ratio: 16 / 9; }
.frame--zoom > img { transition: transform var(--dur-slower) var(--ease-out); }
.frame--zoom:hover > img { transform: scale(1.04); }

/* ---- Forms ------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); }
.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.field__error { font-size: var(--text-xs); color: var(--color-error); }
.input, .textarea, .select {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-field);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.4;
  transition: border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), background-color var(--dur-base);
}
.textarea { min-height: 9rem; resize: vertical; }
/* Placeholders keep AA contrast (they carry the old site's hint texts) */
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-text-muted); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 16%, transparent);
  background: var(--color-field-focus);
}
.input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--color-error); }

.checkbox { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-muted); }
.checkbox input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

/* Dark-surface variant of form fields */
.section--dark .input, .section--dark .textarea, .on-dark .input, .on-dark .textarea {
  background: color-mix(in oklab, var(--color-on-dark) 6%, transparent);
  border-color: var(--color-line-on-dark);
  color: var(--color-on-dark);
}
.section--dark .input:focus, .section--dark .textarea:focus, .on-dark .input:focus, .on-dark .textarea:focus {
  background: color-mix(in oklab, var(--color-on-dark) 10%, transparent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-accent) 22%, transparent);
}
.section--dark .field__label, .on-dark .field__label { color: var(--color-on-dark); }
.section--dark .checkbox, .on-dark .checkbox { color: var(--color-on-dark-muted); }
.section--dark .checkbox a, .on-dark .checkbox a { color: var(--color-on-dark); }

/* ---- Dialog (native <dialog>) ------------------------------------------ */
.dialog {
  width: min(100% - 2rem, 40rem);
  max-height: min(88dvh, 52rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    overlay var(--dur-base) allow-discrete,
    display var(--dur-base) allow-discrete;
}
.dialog[open] { opacity: 1; transform: none; }
@starting-style { .dialog[open] { opacity: 0; transform: translateY(16px) scale(0.98); } }
.dialog::backdrop {
  background: var(--scrim-none);
  backdrop-filter: blur(0);
  transition: background-color var(--dur-base), backdrop-filter var(--dur-base), overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete;
}
.dialog[open]::backdrop { background: var(--scrim-backdrop); backdrop-filter: blur(4px); }
@starting-style { .dialog[open]::backdrop { background: var(--scrim-none); backdrop-filter: blur(0); } }
.dialog__inner { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); overflow: auto; max-height: inherit; overscroll-behavior: contain; }
/* The page behind an open dialog must not scroll */
html.has-dialog { overflow: hidden; }
html.has-dialog body { overflow: hidden; }
.dialog__close { position: absolute; top: var(--space-4); right: var(--space-4); background: var(--color-bg); }

/* ---- Breadcrumb (.crumbs; --light on photos) – legal pages, region page ---- */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }
.crumbs li + li::before {
  content: '';
  width: 0.35rem;
  height: 0.35rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 0.7em) / 0 1px no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out), color var(--dur-base) var(--ease-soft);
}
.crumbs a:hover { color: var(--color-text); background-size: 100% 1px; }
.crumbs [aria-current='page'] { color: var(--color-text); }
.crumbs--light ol, .crumbs--light [aria-current='page'] { color: var(--color-on-dark); }
.crumbs--light ol { opacity: 0.9; }
.crumbs--light a:hover { color: var(--color-on-dark); }

/* ---- Toast ------------------------------------------------------------- */
/* Full width between the gutters (left: 50% alone would cap a long message at half the screen), toasts centred */
.toast-region {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  max-width: 32rem;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-lg); /* a pill only suits one line */
  text-align: center;
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
  animation: toast-in var(--dur-slow) var(--ease-spring) both;
}
.toast--error { background: var(--color-error); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }

/* ---- Divider / ornament ----------------------------------------------- */
.rule { height: 1px; border: 0; background: var(--color-line); margin: 0; }
.ornament { color: var(--color-accent); width: 7rem; height: auto; }


/* layout.css */
/* ==========================================================================
   Layout chrome: site header, mobile menu, footer, utility pages (404, error, login).
   Behaviour: public/js/modules/header.js. Tokens only.
   ========================================================================== */

/* ---- Header -------------------------------------------------------------- */
.site-header {
  --header-fg: var(--color-text);
  --header-fg-muted: var(--color-text-muted);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  color: var(--header-fg);
  transition:
    transform var(--dur-slow) var(--ease-out),
    color var(--dur-base) var(--ease-soft);
}

/* Cream glass bar – fades in once the page is scrolled */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklab, var(--color-bg) 80%, transparent);
  border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft);
  pointer-events: none;
}
.site-header.is-scrolled::before { opacity: 1; }

/* Over a hero photo: fixed, transparent, light text, soft top scrim for legibility */
.site-header--overlay {
  --header-fg: var(--color-on-dark);
  /* full light colour on photos: the muted tone drops below 4.5:1 on bright spots (owner line is tiny) */
  --header-fg-muted: var(--color-on-dark);
  position: fixed;
  inset: 0 0 auto;
}
.site-header--overlay::after {
  content: '';
  position: absolute;
  inset: 0 0 -60%;
  z-index: -1;
  background: var(--scrim-bottom);
  transform: scaleY(-1);
  opacity: 0.65;
  transition: opacity var(--dur-base) var(--ease-soft);
  pointer-events: none;
}
.site-header--overlay.is-scrolled {
  --header-fg: var(--color-text);
  --header-fg-muted: var(--color-text-muted);
}
.site-header--overlay.is-scrolled::after { opacity: 0; }

/* Light CTA over the photo turns into the primary button on the glass bar */
.site-header--overlay.is-scrolled .site-header__cta {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-on-primary);
  --btn-border: var(--color-primary);
  --btn-fill: var(--color-dark);
  --btn-fg-hover: var(--color-on-dark);
  --btn-border-hover: var(--color-dark);
  --btn-chip-bg: var(--color-on-primary);
  --btn-chip-fg: var(--color-primary);
  --btn-chip-bg-hover: var(--color-primary);
  --btn-chip-fg-hover: var(--color-on-primary);
  box-shadow: none;
}

/* Hide while scrolling down, slide back in when scrolling up (never while focused) */
.site-header.is-hidden:not(:focus-within) { transform: translate3d(0, calc(-100% - 2px), 0); }

/* While the mobile menu is open the header floats above it (light text) on a strip in the menu's own colour and glow:
   invisible at first, but links scrolled up pass beneath logo and burger instead of through them */
.site-header.is-menu-open {
  --header-fg: var(--color-on-dark);
  --header-fg-muted: var(--color-on-dark-muted);
  z-index: calc(var(--z-overlay) + 1);
  transform: none;
}
.site-header.is-menu-open::before {
  opacity: 1;
  border-bottom-color: transparent;
  background: var(--menu-glow-top), var(--color-dark);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header.is-menu-open::after { opacity: 0; }
.site-header.is-menu-open .site-header__cta { opacity: 0; visibility: hidden; }

.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-h);
  margin-inline: auto;
}

/* Brand: logo mark + wordmark + tiny owner line */
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  min-width: 0;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}
.site-brand:hover { color: inherit; }
.site-brand__mark,
.site-brand__mark.media-img {
  flex: none;
  width: auto;
  height: 2.5rem;
  background: none;
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-spring);
}
.site-brand:hover .site-brand__mark { transform: rotate(-5deg) scale(1.05); }
.site-brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.site-brand__name {
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  font-variation-settings: 'SOFT' 50;
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.site-brand__owner {
  margin-top: 0.3rem;
  overflow: hidden;
  color: var(--header-fg-muted);
  font-size: calc(var(--text-xs) * 0.82);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color var(--dur-base) var(--ease-soft);
}

/* Desktop navigation */
.site-nav { display: none; flex: none; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 0.2rem + 1.5vw, 2.4rem);
  margin: 0;
  white-space: nowrap;
}
.site-nav__item { flex: none; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.site-nav__link:hover { color: inherit; }
/* Underline draws in from the left and retracts to the right */
.site-nav__label {
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out);
}
.site-nav__link:hover .site-nav__label,
.site-nav__link[aria-current] .site-nav__label {
  background-position-x: 0;
  background-size: 100% 1px;
}

.site-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-4);
}
.site-header__cta { display: none; }
.site-header__cta.btn {
  transition:
    color var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft),
    background-color var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-soft),
    opacity var(--dur-base) var(--ease-soft),
    visibility var(--dur-base);
}

/* Burger: two lines that morph into an X */
.site-burger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-right: calc(var(--space-2) * -1);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
/* Small screens: icon only, but "Menü" stays the button's accessible name */
.site-burger__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.site-burger__icon {
  position: relative;
  display: block;
  width: 1.75rem;
  height: 1.25rem;
}
.site-burger__line {
  position: absolute;
  top: calc(50% - 0.75px);
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition:
    transform var(--dur-base) var(--ease-in-out),
    right var(--dur-base) var(--ease-in-out);
}
.site-burger__line:first-child { transform: translateY(-4px); }
.site-burger__line:last-child { right: 0.55rem; transform: translateY(4px); }
.site-burger:hover .site-burger__line:last-child { right: 0; }
.site-burger[aria-expanded='true'] .site-burger__line:first-child { transform: rotate(45deg); }
.site-burger[aria-expanded='true'] .site-burger__line:last-child { right: 0; transform: rotate(-45deg); }

@media (min-width: 40rem) {
  .site-brand__mark, .site-brand__mark.media-img { height: 2.75rem; }
  .site-header__cta { display: inline-flex; }
  .site-burger__text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

@media (min-width: 64rem) {
  .site-nav { display: block; }
  .site-burger { display: none; }
  /* Owner added more items than fit: header.js falls back to the burger */
  .site-header.is-collapsed .site-nav { display: none; }
  .site-header.is-collapsed .site-burger { display: inline-flex; }
}

/* Without JS (and while editing on small screens, so the nav items stay editable):
   the nav wraps into a second, scrollable row */
html:not(.js) .site-burger { display: none; }
@media (max-width: 63.99rem) {
  html:not(.js) .site-header__bar,
  html.is-editing .site-header__bar { flex-wrap: wrap; height: auto; padding-block: var(--space-3); }
  html:not(.js) .site-nav,
  html.is-editing .site-nav { display: block; flex: 1 1 100%; order: 3; overflow-x: auto; }
}

/* ---- Mobile menu (full-screen overlay) ---------------------------------- */
html.has-menu-open { overflow: hidden; }
html.has-menu-open body { padding-right: var(--scrollbar-w, 0px); }

/* Warm light in the top right corner – shared by the menu and the header strip above it */
.site-header,
.site-menu { --menu-glow-top: radial-gradient(42rem 30rem at 100% 0%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 65%); }

.site-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-dark);
  color: var(--color-on-dark);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-slow) var(--ease-in-out);
}
.site-menu.is-open {
  clip-path: inset(0 0 0 0);
  transition-duration: calc(var(--dur-slow) * 1.15);
}
/* Pinned to the screen while the links scroll (otherwise it would end after the first screen height) */
.site-menu__glow {
  position: sticky;
  top: 0;
  height: 100dvh;
  margin-bottom: -100dvh;
  pointer-events: none;
  background:
    var(--menu-glow-top),
    radial-gradient(36rem 26rem at 0% 100%, color-mix(in oklab, var(--color-primary) 16%, transparent), transparent 70%);
}
.site-menu__inner {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: var(--space-6);
  min-height: 100dvh;
  padding-top: calc(var(--header-h) + var(--space-5));
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}

.site-menu__nav { display: flex; align-items: center; }
.site-menu__list {
  display: grid;
  gap: var(--space-1);
  width: 100%;
  margin: 0;
}
.site-menu__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-1);
  color: var(--color-on-dark);
  font-family: var(--font-heading);
  font-size: clamp(2.125rem, 1.4rem + 3.4vw, 3.5rem);
  font-weight: var(--weight-heading);
  font-variation-settings: 'SOFT' 50;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-decoration: none;
}
.site-menu__link:hover { color: var(--color-on-dark); }
.site-menu__num {
  flex: none;
  min-width: 1.6rem;
  padding-top: 0.85em;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
/* Words rise out of a mask (same motion as data-reveal="mask") */
.site-menu__mask {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.06em 0.12em 0;
  margin-bottom: -0.12em;
}
.site-menu__label {
  display: inline-block;
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  transform: translate3d(0, 115%, 0) rotate(2deg);
  transform-origin: 0 100%;
  transition:
    transform var(--dur-slower) var(--ease-out),
    background-size var(--dur-slow) var(--ease-out);
}
.site-menu.is-open .site-menu__label {
  transform: none;
  transition-delay: calc(var(--dur-fast) + var(--i, 0) * var(--stagger) * 0.8), 0ms;
}
.site-menu.is-open .site-menu__num {
  opacity: 1;
  transition-delay: calc(var(--dur-base) + var(--i, 0) * var(--stagger) * 0.8);
}
.site-menu__link:hover .site-menu__label,
.site-menu__link[aria-current] .site-menu__label {
  background-position-x: 0;
  background-size: 100% 1px;
}

.site-menu__line {
  width: min(100%, 36rem);
  height: 1.5rem;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.site-menu__path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset calc(var(--dur-slower) * 1.3) var(--ease-in-out);
}
.site-menu.is-open .site-menu__path {
  stroke-dashoffset: 0;
  transition-delay: calc(var(--dur-slow) * 0.6);
}

.site-menu__aside {
  display: grid;
  gap: var(--space-5);
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
}
.site-menu.is-open .site-menu__aside {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--dur-slow) * 0.55);
}
.site-menu__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.site-menu__eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.site-menu__contact { display: grid; margin: 0; }
.site-menu__contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  max-width: 100%;
  color: var(--color-on-dark-muted);
  font-size: var(--text-base);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur-base) var(--ease-soft);
}
.site-menu__contact-link .icon { color: var(--color-accent); }
.site-menu__contact-link:hover { color: var(--color-on-dark); }
.site-menu__cta { margin-top: var(--space-2); }
.site-menu a:focus-visible, .site-menu button:focus-visible { outline-color: var(--color-accent); }

@media (min-width: 40rem) {
  .site-menu__aside {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--grid-gap);
  }
  .site-menu__eyebrow { grid-column: 1 / -1; }
  .site-menu__cta.btn--block { width: auto; margin-top: 0; }
}

/* Header colours on top of the dark menu */
.site-header.is-menu-open :focus-visible { outline-color: var(--color-accent); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: var(--section-y);
  background: var(--color-dark);
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
}
.site-footer :focus-visible { outline-color: var(--color-accent); }

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6) var(--grid-gap);
}
.site-footer__statement {
  max-width: 14em;
  color: var(--color-on-dark);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-heading);
  font-variation-settings: 'SOFT' 50;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.site-footer__cta { flex: none; }

/* Rope ornament with one soft loop – draws itself when revealed */
.site-footer__ornament {
  margin-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
  color: var(--color-accent);
}
.site-footer__ornament svg {
  width: 100%;
  height: 4.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.site-footer__dot { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: center; }
.js .site-footer__dot {
  opacity: 0;
  transform: scale(0);
  transition:
    opacity var(--dur-slow) var(--ease-out) calc(var(--dur-slower) * 1.9),
    transform var(--dur-slow) var(--ease-spring) calc(var(--dur-slower) * 1.9);
}
.js .is-revealed .site-footer__dot { opacity: 1; transform: none; }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--grid-gap);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
}
.site-footer__col { min-width: 0; }

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  color: var(--color-on-dark);
  text-decoration: none;
}
.site-footer__logo:hover { color: var(--color-on-dark); }
.site-footer__mark,
.site-footer__mark.media-img {
  flex: none;
  width: auto;
  height: 3.5rem;
  background: none;
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-spring);
}
.site-footer__logo:hover .site-footer__mark { transform: rotate(-5deg) scale(1.05); }
.site-footer__wordmark {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-heading);
  font-variation-settings: 'SOFT' 50;
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
}
.site-footer__claim {
  margin-bottom: var(--space-3);
  color: var(--color-on-dark);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}
.site-footer__text { max-width: 38ch; line-height: var(--leading-body); }

.site-footer__heading {
  margin-bottom: var(--space-4);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variation-settings: normal;
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.site-footer__address { font-style: normal; }
.site-footer__list { display: grid; margin: 0; }
.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  max-width: 100%;
  color: var(--color-on-dark-muted);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-soft);
}
.site-footer__link:hover { color: var(--color-on-dark); }
.site-footer__label {
  min-width: 0;
  overflow-wrap: break-word;
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size var(--dur-slow) var(--ease-out);
}
.site-footer__link:hover .site-footer__label,
.site-footer__link[aria-current] .site-footer__label {
  background-position-x: 0;
  background-size: 100% 1px;
}
.site-footer__link--icon { align-items: flex-start; padding-block: 0.6rem; }
.site-footer__link--icon .icon {
  margin-top: 0.15em;
  color: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-spring);
}
.site-footer__link--icon:hover .icon { transform: scale(1.15) rotate(-6deg); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-line-on-dark);
  font-size: var(--text-xs);
}
.site-footer__totop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  color: var(--color-on-dark-muted);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-soft);
}
.site-footer__totop:hover { color: var(--color-on-dark); }
.site-footer__totop-icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-line-on-dark);
  border-radius: 50%;
  transition:
    background-color var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-spring);
}
.site-footer__totop:hover .site-footer__totop-icon {
  border-color: var(--color-on-dark);
  background: var(--color-on-dark);
  color: var(--color-dark);
  transform: translateY(-3px);
}

/* Oversized, barely-there wordmark that runs off the bottom edge */
.site-footer__giant {
  --giant-size: min(12.5vw, 14rem);
  display: flex;
  justify-content: center;
  height: calc(var(--giant-size) * 0.8);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.site-footer__giant-text {
  display: block;
  flex: none;
  padding-inline: 0.1em;
  font-family: var(--font-heading);
  font-size: var(--giant-size);
  font-weight: var(--weight-heading);
  font-variation-settings: 'SOFT' 50;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--color-on-dark) 12%, transparent) 15%, color-mix(in oklab, var(--color-on-dark) 0%, transparent) 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

@media (min-width: 40rem) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 52rem) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 0.9fr); }
}
@media (min-width: 64rem) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 0.75fr); }
  .site-footer__brand { grid-column: auto; padding-right: var(--space-5); }
}

/* ---- Utility pages: 404, error ----------------------------------------- */
.error-page { padding-block: clamp(2.5rem, 1.5rem + 5vw, 6.5rem) var(--section-y); }
.error-page__grid {
  display: grid;
  align-items: center;
  gap: var(--space-7);
}
.error-page__text { --stack-gap: var(--space-5); }
.error-page__text .lead { max-width: var(--measure-narrow); }
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-3);
}
.error-page__media {
  position: relative;
  order: -1;
  width: min(100%, 11rem);
}
.error-page__frame { width: 100%; }
.error-page__code {
  position: absolute;
  right: -0.35em;
  bottom: -0.3em;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-style: italic;
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  pointer-events: none;
}
@media (min-width: 52rem) {
  .error-page__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--grid-gap); }
  .error-page__media { order: 0; justify-self: end; width: min(100%, 24rem); }
  .error-page__code { font-size: var(--text-display); right: -0.3em; }
}

/* ---- Login page ---------------------------------------------------------- */
.login-page { padding-block: clamp(2.5rem, 1.5rem + 5vw, 6.5rem) var(--section-y); }
.login-page__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  text-align: center;
}
.login-page__mark,
.login-page__mark.media-img {
  width: auto;
  height: 6rem;
  background: none;
  object-fit: contain;
}
.login-page__inner .lead { margin-inline: auto; }
.login-page__actions { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.login-page__hint { max-width: var(--measure-narrow); color: var(--color-text-muted); font-size: var(--text-sm); }
.login-page__noscript {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.login-steps {
  display: grid;
  gap: var(--space-4);
  width: min(100%, var(--container));
  margin: var(--space-7) auto 0;
  counter-reset: login-step;
  text-align: left;
}
.login-step {
  counter-increment: login-step;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}
.login-step::before {
  content: counter(login-step, decimal-leading-zero);
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-style: italic;
  line-height: 1;
}
.login-step__text { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (min-width: 52rem) {
  .login-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Editing: keep the chrome calm and fully visible ------------------- */
html.is-editing .site-header { transform: none; }
html.is-editing .site-footer__giant-text { transform: none; }


/* motion.css */
/* ==========================================================================
   Motion – hidden/revealed states for public/js/modules/motion.js.
   Only active when JS runs (.js on <html>); never while editing; never in print.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity var(--dur-slower) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-slower) var(--ease-out) var(--reveal-delay, 0ms),
    clip-path 1.3s var(--ease-in-out) var(--reveal-delay, 0ms),
    filter var(--dur-slower) var(--ease-out) var(--reveal-delay, 0ms);
}
.js [data-reveal='fade'] { transform: none; }
.js [data-reveal='left'] { transform: translate3d(calc(var(--reveal-distance) * -1.4), 0, 0); }
.js [data-reveal='right'] { transform: translate3d(calc(var(--reveal-distance) * 1.4), 0, 0); }
.js [data-reveal='scale'] { transform: scale(0.94); }
.js [data-reveal='blur'] { transform: translate3d(0, calc(var(--reveal-distance) * 0.5), 0); filter: blur(10px); }

/* Image curtain: the frame wipes open from the bottom while the photo settles from a slight zoom */
.js [data-reveal='clip'] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); }
.js [data-reveal='clip'] img { transform: scale(1.18); transition: transform 1.8s var(--ease-out) var(--reveal-delay, 0ms); }
.js [data-reveal='clip'].is-revealed img { transform: scale(1); }

/* Headline mask: words rise out of an invisible baseline (needs data-split) */
.js [data-reveal='mask'] { opacity: 1; transform: none; }
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for descenders and italic overhang */
  padding: 0.06em 0.04em 0.12em;
  margin: -0.06em -0.04em -0.12em;
}
.split-inner { display: inline-block; }
.js [data-reveal='mask'] .split-inner {
  transform: translate3d(0, 115%, 0) rotate(2deg);
  transform-origin: 0 100%;
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--i, 0) * 55ms);
}
.js [data-reveal='mask'].is-revealed .split-inner { transform: none; }

.js [data-reveal].is-revealed { opacity: 1; transform: none; clip-path: none; filter: none; }
/* Only the image curtain animates clip-path; it ends at inset(0) so the transition can interpolate.
   Everything else ends with clip-path: none, so shadows, focus rings and descenders are never cut off. */
.js [data-reveal='clip'].is-revealed { clip-path: inset(0 0 0 0); }

/* Parallax targets are scaled up slightly so edges never show */
[data-parallax] { will-change: transform; transform-origin: center; }

/* Slow cinematic zoom-out for hero photos */
.js [data-kenburns] { animation: kenburns 2.6s var(--ease-out) both; }
@keyframes kenburns { from { transform: scale(1.12); filter: saturate(0.85) brightness(0.92); } }

/* Gentle floating for decorative elements */
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
[data-float] { animation: float-y 6s var(--ease-in-out) infinite; }

/* Self-drawing SVG lines: <path pathLength="1" class="draw-path"> inside a [data-reveal] element */
.js .draw-path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease-in-out) calc(var(--reveal-delay, 0ms) + 200ms); }
.js .is-revealed .draw-path, .js .is-revealed.draw-path { stroke-dashoffset: 0; }

/* Infinite marquee: .marquee > .marquee__track (content duplicated once, aria-hidden) */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-duration, 40s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal] img, .js [data-reveal='mask'] .split-inner {
    opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important;
  }
  [data-kenburns], [data-float], .badge__dot::after { animation: none !important; }
  .marquee__track { animation: none; }
  .js .draw-path { stroke-dashoffset: 0; transition: none; }
}

/* While editing everything is static and visible */
html.is-editing [data-reveal], html.is-editing [data-reveal] img, html.is-editing .split-inner {
  opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important;
}
html.is-editing [data-parallax] { transform: none !important; }
html.is-editing .marquee__track { animation-play-state: paused; }

@media print {
  [data-reveal], [data-reveal] img, .split-inner { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* View transitions between pages: a soft cross-fade with a slight lift */
::view-transition-old(root) { animation: vt-out 380ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 620ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* sections/home-about.css */
/* ==========================================================================
   Startseite · Über mich (#ueber-mich)
   Bildkomposition links (Bogen-Porträt + schwebendes Rundfoto + gezeichnete Linie), Text rechts.
   ========================================================================== */

.home-about { overflow-x: clip; }

.home-about__grid {
  display: grid;
  gap: clamp(3.5rem, 2rem + 5vw, 6rem);
  align-items: center;
}

/* ---- Image composition --------------------------------------------------- */
.home-about__media {
  position: relative;
  width: min(100%, 30rem);
  padding: 0 16% 12% 0;
  margin-bottom: var(--space-5); /* room for the drifting circle */
}
.home-about__portrait { aspect-ratio: 4 / 5; }
.home-about__inset-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
}
.home-about__inset {
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(4px, 0.6vw, 7px) solid var(--color-bg);
  box-shadow: var(--shadow-lg);
}
.home-about__flourish {
  position: absolute;
  top: -1.5rem;
  right: -0.5rem;
  width: clamp(7rem, 5rem + 8vw, 11rem);
  height: auto;
  color: var(--color-accent);
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* ---- Text ---------------------------------------------------------------- */
.home-about__text {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
  max-width: 38rem;
}
.home-about__title { margin-bottom: var(--space-2); }
.home-about__body { color: var(--color-text); }

.home-about__values {
  container-type: inline-size;
  width: 100%;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
}
.home-about__values-flourish {
  display: block;
  width: 8.5rem;
  height: 2rem;
  margin-bottom: var(--space-5);
  color: var(--color-accent);
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  pointer-events: none;
}
.home-about__values-title {
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.home-about__values-list {
  display: grid;
  gap: var(--space-5) var(--space-6);
}
@container (min-width: 30rem) {
  .home-about__values-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.home-about__value { min-width: 0; }
.home-about__value-body { display: grid; gap: var(--space-1); padding-top: 0.15rem; min-width: 0; }
.home-about__value-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
  font-variation-settings: 'SOFT' 50;
  /* long single words („Selbstverantwortung“) must not push out of the two-column list */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.home-about__value-text {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

.home-about__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-3);
}
.home-about__links .text-link { min-height: 2.75rem; }

/* ---- ≥ 52rem: split ------------------------------------------------------ */
@media (min-width: 52rem) {
  .home-about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .home-about__media { width: 100%; margin-bottom: 0; }
  .home-about__portrait { aspect-ratio: 3 / 4; }
}
@media (min-width: 80rem) {
  .home-about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-10); }
}



/* sections/home-blog.css */
/* ==========================================================================
   Home · Blog teaser (cards: see blog.css → .post-grid / .post-card)
   ========================================================================== */

.home-blog__head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(var(--space-7), 5vw, var(--space-8));
}
@media (min-width: 52rem) {
  .home-blog__head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
    column-gap: var(--grid-gap);
  }
}
.home-blog__heading { display: grid; gap: var(--space-4); justify-items: start; }
.home-blog__title { max-width: 14ch; }
.home-blog__intro { display: grid; gap: var(--space-4); justify-items: start; }
.home-blog__lead { max-width: 30rem; font-size: var(--text-lg); color: var(--color-text-muted); }
@media (min-width: 52rem) {
  .home-blog__intro { justify-self: end; max-width: 30rem; }
}


/* sections/home-contact.css */
/* ==========================================================================
   Startseite · Kontakt (#kontakt) – dark section with a light form card.
   Left: contact rows (whole row clickable, slides + icon fills on hover).
   Right: form card (cream on dark – ink text, never white on white).
   ========================================================================== */

.home-contact { isolation: isolate; overflow: clip; }

/* A soft warm light behind the card – depth without a photo */
.home-contact__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 85% 20%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%),
    radial-gradient(45% 50% at 0% 100%, color-mix(in oklab, var(--color-primary) 16%, transparent), transparent 70%);
  /* the lower glow fades out before the section ends – no hard step into the footer (same dark colour) */
  mask-image: linear-gradient(to bottom, #000 65%, transparent);
}

.home-contact__grid {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 5rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .home-contact__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(3rem, 1rem + 5vw, 7rem);
  }
  .home-contact__intro { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

.home-contact__intro { display: grid; gap: var(--space-5); justify-items: start; min-width: 0; }
.home-contact__title { max-width: 18ch; overflow-wrap: break-word; }
.home-contact__lead { max-width: var(--measure-narrow); }

/* ---- Contact rows ----------------------------------------------------------- */
.home-contact__channels {
  display: grid;
  width: 100%;
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-line-on-dark);
}
.crow {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-1);
  border-bottom: 1px solid var(--color-line-on-dark);
}
.crow__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--color-line-on-dark);
  color: var(--color-accent);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft);
}
/* Fill rises inside the circle on hover (same language as the buttons) */
.crow__icon::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--color-accent);
  transform: scale(0);
  transition: transform var(--dur-slow) var(--ease-out);
}
.crow__icon .icon { width: 1.25rem; height: 1.25rem; }

.crow__text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.crow__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}
.crow__link,
.crow__value {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-on-dark);
  overflow-wrap: anywhere;
}
.crow__link { text-decoration: none; }
.crow__link:hover { color: var(--color-on-dark); }
/* Whole row is the link target */
.crow__link::after { content: ''; position: absolute; inset: 0; z-index: var(--z-raised); }
.crow__link:focus-visible { outline: none; }
.crow__link:focus-visible::after { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.crow__sep { color: var(--color-on-dark); }

@media (max-width: 39.99rem) {
  .crow { grid-template-columns: auto minmax(0, 1fr); }
  .crow__arrow { display: none; }
  .crow__link, .crow__value { font-size: var(--text-base); }
  /* The e-mail address never breaks mid-word: on the narrowest phones it gets a little smaller instead
     (108px = page gutters + icon column; the 28 characters fit from 320px on) */
  .crow__link[href^='mailto:'] { font-size: min(var(--text-base), (100vw - 108px) / 14); }
  .crow__icon { width: 2.75rem; height: 2.75rem; }
}

.crow__arrow {
  color: var(--color-on-dark-muted);
  opacity: 0.5;
  transform: translate(-4px, 4px);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-soft), color var(--dur-base);
}

@media (hover: hover) {
  .crow:not(.crow--static):hover .crow__icon,
  .crow:has(.crow__link:focus-visible) .crow__icon { color: var(--color-dark); border-color: var(--color-accent); }
  .crow:not(.crow--static):hover .crow__icon::before { transform: scale(1); }
  .crow:not(.crow--static):hover .crow__text { transform: translateX(6px); }
  .crow:not(.crow--static):hover .crow__arrow { opacity: 1; color: var(--color-accent); transform: none; }
}
.crow:has(.crow__link:focus-visible) .crow__icon::before { transform: scale(1); }
.crow:has(.crow__link:focus-visible) .crow__text { transform: translateX(6px); }
.crow:has(.crow__link:focus-visible) .crow__arrow { opacity: 1; color: var(--color-accent); transform: none; }

/* ---- Travel note ------------------------------------------------------------ */
.home-contact__travel {
  max-width: var(--measure-narrow);
  margin-top: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-accent);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-on-dark-muted);
}
.home-contact__travel-text a { color: var(--color-on-dark); text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
.home-contact__travel-text a:hover { color: var(--color-on-dark); text-decoration-color: currentColor; }

/* ---- Form card (light island inside the dark section) ----------------------- */
.home-contact .cform {
  position: relative;
  min-width: 0;
  padding: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 39.99rem) {
  .home-contact .cform { margin-inline: calc(var(--gutter) * -0.5); border-radius: var(--radius-lg); }
}

.home-contact .cform :is(h3, .h3) { color: var(--color-heading); }
.cform__head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.cform__intro { color: var(--color-text-muted); max-width: var(--measure-narrow); }

.cform__grid { display: grid; gap: var(--space-5); }
@media (min-width: 40rem) {
  .cform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
  .cform__field--full { grid-column: 1 / -1; }
}

/* Inputs: always ink on cream (overrides the .section--dark field styles from components.css) */
.home-contact .cform .field__label { color: var(--color-text); }
.home-contact .cform :is(.input, .textarea) {
  background: color-mix(in oklab, var(--color-surface) 35%, var(--color-bg));
  border-color: var(--color-line-strong);
  color: var(--color-text);
}
.home-contact .cform :is(.input, .textarea):hover { border-color: var(--color-text-muted); }
.home-contact .cform :is(.input, .textarea):focus {
  background: var(--color-bg);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 16%, transparent);
}
.home-contact .cform :is(.input, .textarea)::placeholder { color: var(--color-text-muted); opacity: 1; }
.home-contact .cform :is(.input, .textarea)[aria-invalid='true'] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-error) 12%, transparent);
}
.cform .textarea { min-height: 10rem; }

.cform__req { color: var(--color-primary); }
.cform__optional { font-weight: var(--weight-body); color: var(--color-text-muted); }

.cform .field__error {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.cform .field__error:empty { display: none; }
.cform .field__error::before {
  content: '!';
  content: '!' / '';
  flex: none;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--color-error);
  color: var(--color-bg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .cform .field.is-invalid .field__error { animation: cform-error-in var(--dur-base) var(--ease-out) both; }
}
@keyframes cform-error-in { from { opacity: 0; transform: translateY(-4px); } }

/* Honeypot: off-screen, not focusable, ignored by assistive tech */
.cform__hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cform__privacy {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  max-width: var(--measure);
}
.cform__privacy a { color: var(--color-primary); }

.cform__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}
.cform__required { font-size: var(--text-xs); color: var(--color-text-muted); }
.cform__required span { color: var(--color-primary); }

/* Submit: spinner while sending */
.cform__submit { min-width: 15rem; }
@media (max-width: 39.99rem) {
  .cform__submit { width: 100%; min-width: 0; justify-content: space-between; } /* like .btn--block */
  .cform.is-sending .cform__submit { justify-content: center; } /* spinner + label, no arrow */
}
.cform__spinner {
  display: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, currentColor 35%, transparent);
  border-top-color: currentColor;
  animation: cform-spin 0.8s linear infinite;
}
.cform.is-sending .cform__spinner { display: block; }
.cform.is-sending .cform__submit .icon { display: none; }
.cform.is-sending .cform__submit { cursor: progress; }
@keyframes cform-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .cform__spinner { animation-duration: 2.4s; }
}

/* Status line (errors / sending) */
.cform__status:empty { display: none; }
.cform__status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--color-surface-soft);
  color: var(--color-text);
}
.cform__status[data-type='error'] {
  background: color-mix(in oklab, var(--color-error) 9%, var(--color-bg));
  color: var(--color-error);
  font-weight: var(--weight-medium);
}

/* Server error after a no-JS submit */
.cform__alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--color-error) 9%, var(--color-bg));
  color: var(--color-error);
  font-size: var(--text-sm);
}
.cform__alert-icon { margin-top: 0.15rem; }

/* ---- States: form ↔ success ------------------------------------------------- */
.cform[data-state='form'] .cform__panel--success,
.cform[data-state='success'] .cform__panel--form { display: none; }

.cform__panel--success {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem);
  text-align: center;
}
.cform__success-title { max-width: 18ch; }
.cform__success-title:focus { outline: none; }
.cform__success-text { max-width: var(--measure-narrow); color: var(--color-text-muted); font-size: var(--text-lg); }
.cform__again { margin-top: var(--space-4); }

.cform__check { width: 5rem; height: 5rem; margin-bottom: var(--space-2); }
.cform__check-circle {
  fill: var(--color-primary-soft);
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.cform__check-mark {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .cform[data-state='success'] .cform__check-circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: cform-circle 900ms var(--ease-in-out) both, cform-pop 700ms var(--ease-spring) 650ms both;
  }
  .cform[data-state='success'] .cform__check-mark { animation: cform-draw 600ms var(--ease-out) 600ms both; }
  .cform[data-state='success'] .cform__panel--success > :not(svg) { animation: cform-rise var(--dur-slow) var(--ease-out) both; }
  .cform[data-state='success'] .cform__success-title { animation-delay: 350ms; }
  .cform[data-state='success'] .cform__success-text { animation-delay: 450ms; }
  .cform[data-state='success'] .cform__again { animation-delay: 600ms; }
  .cform.has-morphed[data-state='form'] .cform__panel--form { animation: cform-fade var(--dur-slow) var(--ease-out) both; }
}
@keyframes cform-circle { from { stroke-dashoffset: 1; fill: transparent; } 60% { fill: transparent; } }
@keyframes cform-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes cform-draw { from { stroke-dashoffset: 1; } }
@keyframes cform-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes cform-fade { from { opacity: 0; } }

/* ---- Edit mode: show both states so every text can be edited -------------- */
html.is-editing .crow__link::after { display: none; }
html.is-editing .cform[data-state] .cform__panel--form { display: block; }
html.is-editing .cform[data-state] .cform__panel--success { display: grid; }
html.is-editing .cform__panel--success {
  margin-top: var(--space-6);
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
}
html.is-editing .cform__panel--success > * { animation: none; }


/* sections/home-hero.css */
/* ==========================================================================
   Startseite · Hero
   Mobil/Tablet: Foto vollflächig, der Text sitzt unten auf einem Verlauf, der mit dem Inhalt
   mitwächst (lange Texte der Inhaberin bleiben immer lesbar).
   Desktop (≥ 64rem): Foto rechts, läuft weich in eine dunkle Fläche aus – der Text steht auf
   ruhigem Grund, das Hochformat-Foto wird viel weniger beschnitten (Gesicht + Pferdekopf bleiben im Bild).
   ========================================================================== */

.home-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: max(36rem, min(100vh, 62rem));
  min-height: max(36rem, min(100svh, 62rem));
  padding-top: calc(var(--header-h) + var(--space-7));
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-on-dark);
}

/* ---- Photo ------------------------------------------------------------- */
.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--color-dark);
}
.home-hero__kenburns { position: absolute; inset: 0; }
.home-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--color-dark);
}
/* Scrims: top (header legibility) + bottom (token) */
.home-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, color-mix(in oklab, var(--color-dark) 58%, transparent) 0%, transparent calc(var(--header-h) + 7rem)),
    var(--scrim-bottom);
}

/* ---- Content ----------------------------------------------------------- */
.home-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
  padding-bottom: clamp(2rem, 1.2rem + 3.4vw, 4.5rem);
}
/* Content-anchored scrim: grows with the text (≥ 58 % dark behind it, darker towards the small text
   at the bottom), fades out above it – measured ≥ 4.5:1 for all hero text on the default photo */
.home-hero__inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -10rem;
  bottom: 0;
  inset-inline: calc(50% - 50vw);
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in oklab, var(--color-dark) 88%, transparent) 0%,
    color-mix(in oklab, var(--color-dark) 72%, transparent) 45%,
    color-mix(in oklab, var(--color-dark) 58%, transparent) calc(100% - 10rem),
    color-mix(in oklab, var(--color-dark) 32%, transparent) calc(100% - 6rem),
    color-mix(in oklab, var(--color-dark) 10%, transparent) calc(100% - 2.5rem),
    transparent 100%
  );
}

.home-hero__content {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
  max-width: 40rem;
}

.home-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.home-hero__badge {
  background: color-mix(in oklab, var(--color-dark) 50%, transparent);
  border-color: color-mix(in oklab, var(--color-on-dark) 24%, transparent);
}
.home-hero__location {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.03em;
  color: var(--color-on-dark);
}
.home-hero__location-icon { width: 1.05rem; height: 1.05rem; color: var(--color-accent); }

.home-hero__title {
  margin-top: var(--space-1);
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-on-dark);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.home-hero__title-main,
.home-hero__title-accent { display: block; }
.home-hero__title-accent {
  font-style: italic;
  font-weight: var(--weight-heading);
  color: color-mix(in oklab, var(--color-accent) 34%, var(--color-on-dark));
}

.home-hero__lead {
  max-width: 34rem;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-on-dark);
}

/* One clear main action (button) + a quiet secondary text link – never two big pills */
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  width: 100%;
  margin-top: var(--space-2);
}
.home-hero__actions .btn { flex: 0 0 auto; }

/* ---- Aside: scroll cue (≥ 52rem) --------------------------------------- */
.home-hero__aside { display: none; }

/* Dark glass capsule, so the small label stays readable on any photo */
.home-hero__scroll {
  background: color-mix(in oklab, var(--color-dark) 55%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-on-dark) 20%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 2.75rem;
  padding: var(--space-4) 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-on-dark);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft);
}
.home-hero__scroll:hover {
  color: var(--color-on-dark);
  background: color-mix(in oklab, var(--color-dark) 35%, transparent);
  border-color: color-mix(in oklab, var(--color-on-dark) 45%, transparent);
}
.home-hero__scroll-label {
  writing-mode: vertical-rl;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.home-hero__scroll-line {
  position: relative;
  width: 1px;
  height: 3.25rem;
  background: color-mix(in oklab, var(--color-on-dark) 32%, transparent);
}
.home-hero__scroll-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--color-on-dark);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-on-dark) 18%, transparent);
  /* a few gentle passes after the load choreography, then it rests (no endless loop) */
  animation: home-hero-scroll 2.4s var(--ease-in-out) 2.2s 6 backwards;
}
@keyframes home-hero-scroll {
  0% { transform: translateY(-0.25rem); opacity: 0; }
  20%, 75% { opacity: 1; }
  100% { transform: translateY(3.1rem); opacity: 0; }
}

/* ---- ≥ 52rem: aside moves to the right edge ---------------------------- */
@media (min-width: 52rem) {
  .home-hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--space-7);
  }
  .home-hero__aside { display: block; }
  .home-hero__scroll { display: inline-flex; }
}

/* ---- ≥ 64rem: split composition ---------------------------------------- */
@media (min-width: 64rem) {
  .home-hero {
    /* left edge of the container and width of the text column */
    --hero-edge: max(var(--gutter), (100% - var(--container)) / 2);
    --hero-copy: min(38rem, 50vw);
  }
  .home-hero__media { left: calc(var(--hero-edge) + var(--hero-copy) - 9rem); }
  .home-hero__media::after {
    background:
      linear-gradient(to right,
        var(--color-dark) 0%,
        color-mix(in oklab, var(--color-dark) 80%, transparent) 12%,
        color-mix(in oklab, var(--color-dark) 38%, transparent) 26%,
        color-mix(in oklab, var(--color-dark) 10%, transparent) 38%,
        transparent 50%),
      linear-gradient(to bottom, color-mix(in oklab, var(--color-dark) 58%, transparent) 0%, transparent calc(var(--header-h) + 7rem)),
      linear-gradient(to top, color-mix(in oklab, var(--color-dark) 55%, transparent) 0%, transparent 32%);
  }
  .home-hero__inner::before { display: none; }
  .home-hero__inner { grid-template-columns: minmax(0, var(--hero-copy)) minmax(0, 1fr); }
  .home-hero__aside { justify-self: end; }
  .home-hero__title {
    font-size: calc(var(--text-h1) * 0.84);
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

@media (min-width: 90rem) {
  .home-hero { --hero-copy: min(42rem, 44vw); }
  .home-hero__title { font-size: calc(var(--text-h1) * 0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__scroll-dot { animation: none; }
}



/* sections/home-journey.css */
/* ==========================================================================
   Startseite · Reise (#ablauf) – „Deine Reise mit deinem Pferd“
   Mobil: Etappen untereinander, jede mit eigenem Foto.
   Tablet (≥ 40rem): Foto und Text je Etappe nebeneinander.
   Desktop (≥ 64rem): mitlaufende Bildbühne (Bogen) links, Etappen + Fortschrittslinie rechts.
   Bearbeitungsmodus: immer das Tablet-Layout, damit jedes Foto anklickbar ist.
   ========================================================================== */

.home-journey {
  counter-reset: journey-step;
  background: var(--color-surface-soft);
}

.home-journey__heading { display: grid; gap: var(--space-4); justify-items: start; }


/* ---- Steps (mobile first) ---------------------------------------------- */
.home-journey__steps {
  position: relative;
  display: grid;
  gap: clamp(3.5rem, 2rem + 5vw, 6rem);
}

.home-journey__step {
  counter-increment: journey-step;
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.home-journey__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
}
.home-journey__media > .media-img { width: 100%; height: 100%; object-fit: cover; }
/* Alt text of the step photo for screen readers – only needed where the photo itself is hidden (desktop) */
.home-journey__alt { display: none; }

.home-journey__content {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  max-width: var(--measure);
}

/* Big step numeral 01 … 04 – decorative (the <ol> already carries the order) */
.home-journey__num {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  font-variation-settings: 'SOFT' 100;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  color: var(--color-accent);
}
.home-journey__num::before { content: counter(journey-step, decimal-leading-zero); }
.home-journey__num::after {
  content: '';
  width: var(--space-7);
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.home-journey__title {
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  hyphens: auto;
  -webkit-hyphens: auto;
}

.home-journey__questions {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  font-variation-settings: 'SOFT' 100;
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-accent);
}

.home-journey__text { color: var(--color-text); }
.home-journey__text > * + * { margin-top: 1em; }
.home-journey__text ul, .home-journey__text ol { padding-left: 1.3em; }
.home-journey__text li::marker { color: var(--color-accent); }

/* The sticky photo stage only exists on desktop */
.home-journey__aside { display: none; }

/* ---- Tablet: photo beside the text --------------------------------------- */
@media (min-width: 40rem) {
  .home-journey__step {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--grid-gap);
  }
  .home-journey__media { aspect-ratio: 4 / 5; border-radius: var(--radius-md); }
  .home-journey__content { padding-top: var(--space-2); }
}

/* ---- Desktop: scroll storytelling ---------------------------------------- */
@media (min-width: 64rem) {
  .home-journey__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(3rem, 1rem + 4vw, 7rem);
  }

  /* Sticky arch stage, vertically centred in the space below the header */
  .home-journey__aside {
    display: block;
    container-type: inline-size;
  }
  .home-journey__stage {
    --stage-h: min(125cqi, calc(100svh - var(--header-h) - var(--space-7)));
    position: sticky;
    top: calc(var(--header-h) + (100svh - var(--header-h) - var(--stage-h)) / 2);
    height: var(--stage-h);
    overflow: hidden;
    border-radius: var(--radius-arch);
    background: var(--color-surface);
    isolation: isolate;
  }
  /* Soft shade at the bottom so the counter badge stays legible on bright photos */
  .home-journey__stage::after {
    content: '';
    position: absolute;
    inset: 55% 0 0;
    z-index: 1;
    background: var(--scrim-bottom);
    opacity: 0.55;
    pointer-events: none;
  }
  .home-journey__stage-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.08);
    transition:
      opacity var(--dur-slower) var(--ease-in-out),
      transform 1.8s var(--ease-out);
  }
  .home-journey__stage-img.is-current { opacity: 1; transform: scale(1); }
  /* Win over the generic clip-reveal zoom of motion.css so only the current photo settles */
  .js .home-journey__stage[data-reveal='clip'] .home-journey__stage-img { transform: scale(1.08); }
  .js .home-journey__stage[data-reveal='clip'].is-revealed .home-journey__stage-img.is-current { transform: scale(1); }

  .home-journey__counter {
    position: absolute;
    left: var(--space-5);
    bottom: var(--space-5);
    z-index: 2;
    gap: var(--space-3);
    padding: 0.45rem 0.95rem;
    background: color-mix(in oklab, var(--color-dark) 55%, transparent); /* AA on bright photos */
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: 0.08em;
  }
  .home-journey__counter-line { width: var(--space-5); height: 1px; background: currentColor; opacity: 0.6; }

  /* Steps: tall so the sticky stage has room to breathe */
  .home-journey__steps {
    --rail-x: var(--space-4);
    --step-pad: var(--space-8);
    --node: 0.875rem;
    gap: 0;
  }
  .home-journey__step {
    display: flex;
    align-items: center;
    min-height: max(78svh, 30rem);
    padding: var(--space-8) 0 var(--space-8) var(--step-pad);
  }
  .home-journey__media { display: none; }
  html:not(.is-editing) .home-journey__alt {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .home-journey__content { padding-top: 0; }

  .home-journey__num { font-size: var(--text-h1); }

  /* Progress rail: track + fill (the fill follows --progress from data-scroll-progress) */
  .home-journey__steps::before,
  .home-journey__steps::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--rail-x);
    width: 1px;
    mask-image: linear-gradient(transparent, black 9%, black 88%, transparent);
    -webkit-mask-image: linear-gradient(transparent, black 9%, black 88%, transparent);
    pointer-events: none;
  }
  .home-journey__steps::before { background: var(--color-line-strong); }
  .home-journey__steps::after {
    width: 2px;
    margin-left: -0.5px;
    background: var(--color-accent);
    clip-path: inset(0 0 calc((1 - var(--progress, 0)) * 100%) 0);
  }

  /* Node on the rail, level with the numeral (the mobile dash becomes the node) */
  .home-journey__num::after {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: calc(var(--rail-x) - var(--step-pad) - var(--node) / 2 + 0.5px);
    width: var(--node);
    height: var(--node);
    border: 1px solid var(--color-line-strong);
    border-radius: 50%;
    background: var(--color-surface-soft);
    opacity: 1;
    transform: translateY(-50%) scale(0.75);
    transition:
      background-color var(--dur-slow) var(--ease-soft),
      border-color var(--dur-slow) var(--ease-soft),
      box-shadow var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-spring);
  }
  .home-journey__step.is-passed .home-journey__num::after { background: var(--color-accent); border-color: var(--color-accent); }
  .home-journey__step.is-active .home-journey__num::after {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.45rem var(--color-accent-soft);
    transform: translateY(-50%) scale(1);
  }

  /* Inactive steps rest in the background; the active one comes forward.
     Muted text colour instead of opacity: inactive steps stay readable (WCAG AA contrast). */
  .home-journey.is-ready .home-journey__title,
  .home-journey.is-ready .home-journey__text {
    transition: color var(--dur-slow) var(--ease-in-out);
  }
  .home-journey.is-ready .home-journey__num { transition: color var(--dur-slow) var(--ease-in-out); }
  html:not(.is-editing) .home-journey.is-ready .home-journey__step:not(.is-active, :focus-within) :is(.home-journey__title, .home-journey__text) {
    color: var(--color-text-muted);
  }
  html:not(.is-editing) .home-journey.is-ready .home-journey__step:not(.is-active, :focus-within) .home-journey__num {
    color: color-mix(in oklab, var(--color-accent) 40%, var(--color-surface-soft));
  }

  /* ---- Edit mode on desktop: every step shows (and edits) its own photo -- */
  html.is-editing .home-journey__layout { display: block; }
  html.is-editing .home-journey__aside { display: none; }
  html.is-editing .home-journey__steps { gap: var(--space-9); }
  html.is-editing .home-journey__steps::before,
  html.is-editing .home-journey__steps::after { display: none; }
  html.is-editing .home-journey__step {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--grid-gap);
    align-items: start;
    min-height: 0;
    padding: 0;
  }
  html.is-editing .home-journey__media { display: block; aspect-ratio: 4 / 5; }
  html.is-editing .home-journey__num { font-size: var(--text-h2); }
  html.is-editing .home-journey__step .home-journey__num::after {
    position: static;
    width: var(--space-7);
    height: 1px;
    border: 0;
    border-radius: 0;
    background: currentColor;
    box-shadow: none;
    opacity: 0.6;
    transform: none;
  }
}

/* Large screens: a touch more air beside the stage */
@media (min-width: 80rem) {
  .home-journey__steps { --step-pad: var(--space-9); }
}

@media (prefers-reduced-motion: reduce) {
  .home-journey__stage-img { transition: opacity var(--dur-base) linear; transform: none !important; }
}


/* sections/home-offers.css */
/* ==========================================================================
   Startseite · Meine Angebote (#angebot)
   ========================================================================== */

/* ---- Photo, heading and services -------------------------------------- */
.home-offers__heading { display: grid; justify-items: start; gap: var(--space-4); }
.home-offers__services {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}
.home-offers__photo { aspect-ratio: 4 / 5; }
.home-offers__services-body { display: grid; gap: var(--space-6); container-type: inline-size; }

.home-offers__checks {
  display: grid;
  column-gap: var(--space-6);
}
.home-offers__check {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.5rem;
  padding-block: var(--space-3);
  border-bottom: var(--border);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.home-offers__check-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.home-offers__check-icon .icon { width: 1rem; height: 1rem; stroke-width: 2; }
@container (min-width: 30rem) {
  .home-offers__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 40rem) {
  .home-offers__services { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .home-offers__photo { aspect-ratio: 3 / 4; }
}

/* ---- Audience: numbered cards + sticky arch photo ----------------------- */
.home-offers__audience {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  margin-top: clamp(4.5rem, 2.5rem + 7vw, 9rem);
}
.home-offers__audience-main { display: grid; gap: var(--space-6); min-width: 0; }
.home-offers__audience-title { max-width: 22ch; }

.home-offers__cards {
  display: grid;
  gap: var(--space-4);
  counter-reset: audience;
}
/* the <li> carries the reveal, the inner card the hover (independent transitions) */
.home-offers__card-item { counter-increment: audience; }
.home-offers__card {
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-5);
  padding: clamp(1.25rem, 0.9rem + 1.3vw, 2rem) clamp(1.25rem, 0.8rem + 1.8vw, 2.5rem);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    border-color var(--dur-base) var(--ease-soft),
    background-color var(--dur-base) var(--ease-soft);
}
.home-offers__num {
  min-width: 2.2ch;
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-style: italic;
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
  font-variant-numeric: lining-nums tabular-nums;
  transition: transform var(--dur-slow) var(--ease-out);
}
.home-offers__num::before { content: counter(audience, decimal-leading-zero); }
.home-offers__card-text {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
}
.home-offers__card-text > :is(p, ul, ol) + * { margin-top: 0.6em; }
.home-offers__card-text strong { color: var(--color-heading); }
@media (max-width: 39.99rem) {
  .home-offers__card { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .home-offers__num { font-size: var(--text-h3); }
}
@media (min-width: 52rem) {
  .home-offers__card-text { font-size: var(--text-lg); }
}
@media (hover: hover) {
  .home-offers__card:hover {
    transform: translateY(-4px);
    background: var(--color-bg);
    border-color: var(--color-line);
    box-shadow: var(--shadow-md);
  }
  .home-offers__card:hover .home-offers__num { transform: translateX(4px); }
}

.home-offers__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-3);
  padding-top: var(--space-6);
  border-top: var(--border);
}
.home-offers__note-text {
  flex: 1 1 18rem;
  max-width: 34rem;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  font-variation-settings: 'SOFT' 50;
}

/* Photo first on small screens (landscape crop), sticky beside the cards on desktop */
.home-offers__aside { order: -1; }
.home-offers__audience-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
@media (min-width: 40rem) {
  .home-offers__audience-photo { aspect-ratio: 16 / 10; }
}

@media (min-width: 64rem) {
  .home-offers__audience {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
  .home-offers__aside {
    order: 0;
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }
  .home-offers__audience-photo { aspect-ratio: 3 / 4; border-radius: var(--radius-arch); }
}



/* sections/home-prices.css */
/* ==========================================================================
   Startseite · Preise (#preise)
   Mobil: Karten untereinander. Tablet (≥ 40rem): Karte zweispaltig (Text | Preise).
   Desktop (≥ 64rem): Karten nebeneinander, Titel/Text/Preise/Hinweis per Subgrid auf einer Linie;
   die hervorgehobene Karte (dunkel) steht etwas höher und tiefer, ohne die Preislinie zu verschieben.
   ========================================================================== */

.home-prices__heading { display: grid; gap: var(--space-4); justify-items: start; }


.home-prices__duration {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
}
.home-prices__duration-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* ---- Plans ------------------------------------------------------------- */
.home-prices__plans {
  --plan-pad: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  display: grid;
  gap: var(--space-6);
}

.home-prices__item { display: grid; }

.home-prices__plan {
  position: relative;
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--plan-pad);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
  color: var(--color-text);
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    border-color var(--dur-base) var(--ease-soft);
}

.home-prices__badge {
  position: absolute;
  top: 0;
  left: var(--plan-pad);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.home-prices__title {
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  hyphens: auto;
  -webkit-hyphens: auto;
}

.home-prices__text {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  max-width: 34ch;
}

.home-prices__options { display: grid; gap: var(--space-5); align-content: start; }
.home-prices__option { display: grid; gap: var(--space-3); justify-items: start; }
.home-prices__option + .home-prices__option {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}
/* An option without any content disappears for visitors (stays as placeholder in the editor) */
html:not(.is-editing) .home-prices__option:not(:has([data-field]:not([data-empty]))) { display: none; }
html:not(.is-editing) .home-prices__amount:not(:has([data-field]:not([data-empty]))) { display: none; }

.home-prices__amount { display: grid; gap: var(--space-1); }
.home-prices__price {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  font-variation-settings: 'SOFT' 100;
  font-variant-numeric: lining-nums proportional-nums;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
  white-space: nowrap;
}
.home-prices__unit {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
.home-prices__saving {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}
.home-prices__saving::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-primary);
}

.home-prices__note {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* ---- Featured plan (dark) ---------------------------------------------- */
.home-prices__plan--featured {
  border-color: transparent;
  background: var(--color-dark);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-lg);
}
.home-prices__plan--featured :is(.home-prices__title, .home-prices__price) { color: var(--color-on-dark); }
.home-prices__plan--featured :is(.home-prices__text, .home-prices__unit) { color: var(--color-on-dark-muted); }
.home-prices__plan--featured .home-prices__saving {
  background: color-mix(in oklab, var(--color-accent) 26%, transparent);
  color: var(--color-on-dark);
}
.home-prices__plan--featured .home-prices__saving::before { background: var(--color-accent); }
.home-prices__plan--featured :is(.home-prices__option + .home-prices__option, .home-prices__note) { border-color: var(--color-line-on-dark); }
.home-prices__plan--featured .home-prices__note { color: var(--color-on-dark); }

/* Hover: a gentle lift (pointer devices only, never while editing) */
@media (hover: hover) and (pointer: fine) {
  html:not(.is-editing) .home-prices__plan:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-line-strong);
  }
  html:not(.is-editing) .home-prices__plan--featured:hover { box-shadow: var(--shadow-lg); border-color: transparent; }
}

/* ---- Tablet: text left, prices right -------------------------------------- */
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .home-prices__plans { max-width: 46rem; margin-inline: auto; }
  .home-prices__plan {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, auto);
    grid-template-areas:
      'title options'
      'text  options'
      'note  options';
    column-gap: var(--space-7);
    align-items: start;
  }
  .home-prices__title { grid-area: title; }
  .home-prices__text { grid-area: text; }
  .home-prices__options { grid-area: options; align-self: center; }
  .home-prices__note { grid-area: note; }
}

/* ---- Desktop: cards side by side, aligned on shared rows ------------------ */
@media (min-width: 64rem) {
  .home-prices__plans {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    column-gap: clamp(1rem, 0.2rem + 1.4vw, 2rem);
    row-gap: var(--space-8);
    padding-block: var(--space-5);
  }
  .home-prices__item {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
  .home-prices__plan {
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: var(--space-4);
  }
  .home-prices__title { grid-row: 1; }
  .home-prices__text { grid-row: 2; }
  .home-prices__options { grid-row: 3; }
  .home-prices__note { grid-row: 4; align-self: end; }

  /* Raised without moving the shared price line: the extra height is margin+padding that cancel out */
  .home-prices__plan--featured {
    margin-block: calc(var(--space-5) * -1);
    padding-block: calc(var(--plan-pad) + var(--space-5));
  }
}

/* ---- Travel costs ------------------------------------------------------ */
.home-prices__travel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4) var(--space-4);
  margin-top: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
  padding: var(--space-5) clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.home-prices__travel-icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.home-prices__travel-icon .icon { width: 1.35rem; height: 1.35rem; }
.home-prices__travel-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--color-primary);
  font-variation-settings: normal;
}
.home-prices__travel-list {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-4);
}
.home-prices__travel-item { display: grid; gap: var(--space-1); }
.home-prices__travel-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.home-prices__travel-value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  font-variation-settings: 'SOFT' 100;
}

@media (min-width: 40rem) {
  .home-prices__travel-list { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); column-gap: var(--space-6); }
}
@media (min-width: 64rem) {
  .home-prices__travel {
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: var(--space-5);
  }
  .home-prices__travel-title { padding-right: var(--space-5); }
  .home-prices__travel-list {
    grid-column: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-4) 0;
  }
  .home-prices__travel-item {
    padding-inline: var(--space-6);
    border-left: 1px solid var(--color-line);
  }
  .home-prices__travel-item:last-child { padding-right: 0; }
}

/* ---- Footer: tax note + actions ---------------------------------------- */
.home-prices__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
  margin-top: var(--space-6);
}
.home-prices__vat {
  flex: 1 1 18rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.home-prices__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

@media (max-width: 39.999rem) {
  .home-prices__actions { width: 100%; flex-direction: column; align-items: stretch; text-align: center; }
  /* stretched like .btn--block: label left, arrow chip at the right edge */
  .home-prices__actions .btn { justify-content: space-between; }
  .home-prices__actions .text-link { align-self: center; }
}
/* A text link without link text (home.prices.question is empty by default) is hidden for visitors */
html:not(.is-editing) .home-prices__actions a:has(> [data-link-label]:empty) { display: none; }

/* While editing: no lift, placeholders for empty price rows stay visible */
html.is-editing .home-prices__plan { transform: none; }

/* Marker for the editor's „Hervorgehoben“ switch (list field highlight) – a zero-height line at the
   top edge of the card while editing, absent for visitors. */
.home-prices__flag { display: none; }
html.is-editing .home-prices__flag { display: block; position: absolute; inset: 0 0 auto; height: 0; }


/* sections/home-quote.css */
/* ==========================================================================
   Startseite · Foto-Zitatbänder (quote-living, quote-time)
   Gemeinsame Bühne: Vollbild-Foto mit Parallaxe, Scrim, helle Serifenschrift.
   --living: großes Statement links unten, Scrim von links + unten, Wort-für-Wort-Maske.
   --time:   zentriertes, kursives Zitat im oberen Bilddrittel, flächiger Scrim, Quelle darunter.
   ========================================================================== */

.home-quote {
  position: relative;
  display: grid;
  min-height: min(76svh, 40rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-dark);
  color: var(--color-on-dark);
}


.home-quote__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.home-quote__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-quote__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.home-quote__inner {
  display: grid;
  padding-block: var(--section-y);
}

/* Shared statement typography */
.home-quote__statement,
.home-quote__text {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  color: var(--color-on-dark);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
  font-variation-settings: 'SOFT' 100;
  text-shadow: 0 2px 28px color-mix(in oklab, var(--color-dark) 45%, transparent);
}

@media (min-width: 52rem) {
  .home-quote { min-height: min(88svh, 52rem); }
}

/* ---- Living: left-bottom statement --------------------------------------- */
.home-quote--living .home-quote__scrim {
  background: var(--scrim-bottom), var(--scrim-left);
}
.home-quote--living .home-quote__inner { align-content: end; }
.home-quote--living .home-quote__body {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: 14em;
  font-size: var(--text-h1);
}
.home-quote__rule {
  display: block;
  width: var(--space-8);
  height: 1px;
  background: var(--color-accent);
}
.home-quote--living .home-quote__statement {
  font-size: 1em;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

/* ---- Time: centred quote in the upper third ----------------------------- */
.home-quote--time .home-quote__scrim { background: var(--scrim-full); }
.home-quote--time .home-quote__inner {
  align-content: start;
  justify-items: center;
  text-align: center;
}
.home-quote__figure {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: 40rem;
}
.home-quote__icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--color-line-on-dark);
  border-radius: 50%;
  color: var(--color-accent);
  background: color-mix(in oklab, var(--color-dark) 25%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.home-quote__icon .icon { width: 1.4rem; height: 1.4rem; }
.home-quote__quote { margin: 0; }
.home-quote--time .home-quote__text {
  font-size: var(--text-h2);
  font-style: italic;
  line-height: var(--leading-heading);
}
.home-quote__caption {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-on-dark); /* on a photo: muted would fall below AA on bright spots */
  text-shadow: 0 1px 12px color-mix(in oklab, var(--color-dark) 60%, transparent);
}
.home-quote__author { font-style: normal; }
.home-quote__author::before { content: '– '; }

@media (min-width: 64rem) {
  .home-quote--time .home-quote__inner { padding-top: calc(var(--section-y) * 0.85); }
}

/* While editing the band stays static (parallax is switched off by motion.css) */
html.is-editing .home-quote__img { transform: none !important; }


/* sections/home-statement.css */
/* ==========================================================================
   Startseite · Fotoband „Wofür steht Feingefühl Pferd?“
   ========================================================================== */

.home-statement {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(88vh, 52rem);
  min-height: min(88svh, 52rem);
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-on-dark);
  text-align: center;
}

.home-statement__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.home-statement__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--color-dark);
}
.home-statement__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim-full);
  pointer-events: none;
}

.home-statement__inner {
  padding-block: var(--section-y);
}
.home-statement__content {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: 50rem;
  margin-inline: auto;
}
/* Soft halo behind the text – grows with the content, keeps small text ≥ 4.5:1 on any photo */
.home-statement__content::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -22% -18%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--color-dark) 62%, transparent) 0%, color-mix(in oklab, var(--color-dark) 40%, transparent) 55%, transparent 100%);
  pointer-events: none;
}

.home-statement__eyebrow { color: var(--color-on-dark); }
.home-statement__eyebrow::after {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.home-statement__title {
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-on-dark);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

.home-statement__text {
  max-width: 36rem;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-on-dark);
}

.home-statement__action { margin-top: var(--space-3); }

@media (min-width: 64rem) {
  .home-statement__title { hyphens: manual; -webkit-hyphens: manual; }
}



/* sections/home-testimonials.css */
/* ==========================================================================
   Startseite · Erfahrungen (#erfahrungen)
   Mobile/tablet: scroll-snap carousel with peek, arrows + dots (testimonials.js).
   Desktop ≥64rem: three-column editorial grid, middle column offset for rhythm.
   ========================================================================== */

.home-testimonials { overflow: clip; }

.home-testimonials__heading { display: grid; gap: var(--space-4); justify-items: start; }
.home-testimonials__head .lead { max-width: var(--measure-narrow); }

/* ---- Track ---------------------------------------------------------------- */
/* (two classes: must beat ul[role='list'] { padding: 0 } from base.css) */
.home-testimonials .home-testimonials__list {
  --card-w: min(80vw, 21rem);
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w);
  gap: var(--grid-gap);
  align-items: start;
  margin: 0 calc(var(--gutter) * -1);
  /* room for the reveal lift, hover shadow and focus rings inside the scroller */
  padding: var(--space-2) var(--gutter) var(--space-7);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.home-testimonials__list::-webkit-scrollbar { display: none; }

.home-testimonials__item {
  scroll-snap-align: start;
  min-width: 0;
}

@media (min-width: 40rem) {
  .home-testimonials .home-testimonials__list { --card-w: 21.5rem; }
}

@media (min-width: 64rem) {
  .home-testimonials .home-testimonials__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    row-gap: var(--space-9);
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  /* Middle column sits a little lower – a calm, editorial rhythm */
  .home-testimonials__item:nth-child(3n + 2) { margin-top: var(--space-9); }
}

/* ---- Card ----------------------------------------------------------------- */
.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}

.tcard__frame { border-radius: var(--radius-arch); }
.tcard__zoom {
  width: 100%;
  height: 100%;
  transition: transform var(--dur-slower) var(--ease-out);
}
.tcard__zoom > .media-img { width: 100%; height: 100%; object-fit: cover; }
/* Warm, slightly muted photos that come to life on hover (echoes the old site) */
.tcard__img { filter: saturate(0.88); transition: filter var(--dur-slow) var(--ease-soft); }

.tcard__quote {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-2);
}
.tcard__mark {
  width: 2.25rem;
  height: 2.25rem;
  fill: currentColor;
  stroke: none;
  color: var(--color-accent);
  margin-left: -0.2rem;
  transform-origin: 0 100%;
  transition: transform var(--dur-slow) var(--ease-spring);
}
.tcard__text {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
  font-variation-settings: 'SOFT' 50;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.tcard__meta {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.tcard__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.tcard__context { font-size: var(--text-sm); color: var(--color-text-muted); }

.tcard__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  min-height: 2.75rem;
  margin-top: calc(var(--space-2) * -1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: left;
}
.tcard__more-label {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-slow) var(--ease-out);
}
.tcard__more .icon { transition: transform var(--dur-base) var(--ease-out); }
/* The whole card opens the story (stretched button) */
.tcard__more::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  border-radius: var(--radius-lg);
}
.tcard__more:focus-visible { outline: none; }
.tcard__more:focus-visible::after {
  outline: 2px solid var(--color-focus);
  outline-offset: 6px;
}

@media (hover: hover) {
  .tcard:hover .tcard__zoom { transform: scale(1.045); }
  .tcard:hover .tcard__img { filter: saturate(1); }
  .tcard:hover .tcard__mark { transform: scale(1.12) rotate(-4deg); }
  .tcard:hover .tcard__more { color: var(--color-primary-hover); }
  .tcard:hover .tcard__more-label { background-size: 0 1px; background-position: 100% 100%; }
  .tcard:hover .tcard__more .icon { transform: translateX(4px); }
}
.tcard:has(.tcard__more:focus-visible) .tcard__zoom { transform: scale(1.045); }
.tcard:has(.tcard__more:focus-visible) .tcard__img { filter: saturate(1); }

/* ---- Carousel controls (mobile/tablet only) ---------------------------- */
.home-testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.home-testimonials__arrow[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
.home-testimonials__dots { display: flex; align-items: center; }
.home-testimonials__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
}
.home-testimonials__dot::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
  transition: width var(--dur-slow) var(--ease-out), background-color var(--dur-base) var(--ease-soft);
}
.home-testimonials__dot:hover::before { background: var(--color-text-muted); }
.home-testimonials__dot[aria-current='true']::before { width: 1.5rem; background: var(--color-primary); }

@media (min-width: 64rem) {
  .home-testimonials__controls { display: none; }
}

.home-testimonials__note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.home-testimonials__note::before {
  content: '';
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: var(--color-accent);
}
@media (min-width: 64rem) {
  .home-testimonials__note { justify-content: flex-end; margin-top: var(--space-8); text-align: right; }
}

/* ---- Story dialog ---------------------------------------------------------- */
.tdialog {
  --tdialog-pad: clamp(1.5rem, 1rem + 2vw, 3rem);
  --tdialog-h: min(88dvh, 52rem);
  width: min(100% - 2rem, 62rem);
  max-height: var(--tdialog-h);
  overflow: hidden;
}
.tdialog__close { position: absolute; z-index: var(--z-raised); box-shadow: var(--shadow-sm); }
/* Scrolled text fades out above the close button's lower edge instead of running beneath it
   (--scrolled 0…1 from public/js/modules/dialogs.js; 0 = no fade, the photo and the heading stay untouched) */
.tdialog [data-scroll-fade] {
  mask-image: linear-gradient(to bottom, transparent calc(var(--scrolled, 0) * 4.25rem), #000 calc(var(--scrolled, 0) * 6.5rem));
}
/* Phones: photo on top, the whole dialog content scrolls (plain block flow – a grid row would
   collapse to 0px around the aspect-ratio photo and let the text slide over it) */
.tdialog__layout {
  display: block;
  max-height: var(--tdialog-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.tdialog__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface);
}
.tdialog__img { width: 100%; height: 100%; object-fit: cover; }
.tdialog__body {
  display: grid;
  align-content: start;
  gap: var(--space-5);
  padding: var(--space-4) var(--tdialog-pad) var(--tdialog-pad);
}
.tdialog__head { display: grid; gap: var(--space-2); padding-right: var(--space-7); }
.tdialog__title { margin-top: var(--space-1); }
.tdialog__context { font-size: var(--text-sm); color: var(--color-text-muted); }
.tdialog__story { font-size: var(--text-base); line-height: var(--leading-relaxed); }
.tdialog__story > p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.1em 0 0;
  font-family: var(--font-heading);
  font-size: 3.3em;
  line-height: 0.82;
  color: var(--color-primary);
}
.tdialog__actions { padding-top: var(--space-2); }

/* Larger screens: tall photo on the left, only the text column scrolls (it carries the height limit) */
@media (min-width: 52rem) {
  .tdialog__layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); overflow: hidden; }
  .tdialog__media { aspect-ratio: auto; min-height: 100%; }
  .tdialog__media .tdialog__img { position: absolute; inset: 0; }
  .tdialog__body {
    max-height: var(--tdialog-h);
    padding: clamp(2.5rem, 1.5rem + 2vw, 3.5rem) var(--tdialog-pad) var(--tdialog-pad);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Gentle entrance of the dialog content */
@media (prefers-reduced-motion: no-preference) {
  .tdialog[open] .tdialog__img { animation: tdialog-photo var(--dur-slower) var(--ease-out) both; }
  .tdialog[open] .tdialog__head,
  .tdialog[open] .tdialog__story { animation: tdialog-rise var(--dur-slow) var(--ease-out) both; }
  .tdialog[open] .tdialog__story { animation-delay: 90ms; }
}
@keyframes tdialog-photo { from { transform: scale(1.08); opacity: 0.4; } }
@keyframes tdialog-rise { from { transform: translateY(14px); opacity: 0; } }

/* ---- Edit mode: story editable inline, no stretched overlay --------------- */
html.is-editing .tcard__more { display: none; }
html.is-editing .home-testimonials .home-testimonials__list { overflow-y: visible; }
html.is-editing .tdialog:not([open]) {
  position: static;
  display: block;
  width: auto;
  max-height: none;
  margin: var(--space-5) 0 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition: none;
}
html.is-editing .tdialog:not([open]) :is(.tdialog__media, .tdialog__close, .tdialog__title, .tdialog__context, .tdialog__actions) { display: none; }
html.is-editing .tdialog:not([open]) .tdialog__layout { display: block; max-height: none; overflow: visible; }
html.is-editing .tdialog:not([open]) .tdialog__body { padding: var(--space-5); overflow: visible; }
html.is-editing .tdialog:not([open]) .tdialog__head { padding: 0; }
html.is-editing .tdialog:not([open]) .tdialog__story { font-size: var(--text-sm); }


/* sections/page-region.css */
/* ==========================================================================
   Region landing page – /reitunterricht-uelzen-suderburg (views/pages/region.njk)
   Rhythm: photo hero → intro (cream) → offer (surface) → region map (cream)
           → prices (surface) → FAQ (cream) → closing card (dark)
   Motif: concentric rings = "15 km around Suderburg", drawn in on reveal.
   ========================================================================== */

/* ---- Shared ring motif ---------------------------------------------------- */
.rings { display: block; width: 100%; height: auto; overflow: visible; }
.rings circle { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rings .rings__outer { opacity: 0.22; }
.rings .rings__mid { opacity: 0.35; transition-delay: 250ms; }
.rings .rings__main { opacity: 1; stroke-width: 1.5; transition-delay: 500ms; }
.rings .rings__inner { opacity: 0.45; transition-delay: 750ms; }
/* dash slightly longer than the path: no hairline gap at the start point once drawn */
.js .rings .draw-path { stroke-dasharray: 1.02 1.02; stroke-dashoffset: 1.02; }
.js .is-revealed .rings .draw-path,
html.is-editing .rings .draw-path { stroke-dashoffset: 0; }

/* ---- Hero ------------------------------------------------------------------ */
.region-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(32rem, 66svh, 48rem);
  padding-top: calc(var(--header-h) + var(--space-7));
  padding-bottom: clamp(2.75rem, 1.5rem + 4.5vw, 5.5rem);
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-on-dark);
}
.region-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.region-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* top scrim keeps the transparent header legible, bottom/left scrim carries the text */
.region-hero__media::before,
.region-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.region-hero__media::before {
  bottom: auto;
  height: 38%;
  background: var(--scrim-bottom);
  transform: scaleY(-1);
  opacity: 0.6;
}
/* bottom scrim + a soft wash behind the text block (eyebrow/breadcrumb sit high on small screens – AA) */
.region-hero__media::after {
  background:
    linear-gradient(to top, color-mix(in oklab, var(--color-dark) 35%, transparent) 55%, transparent 85%),
    var(--scrim-bottom);
}
@media (min-width: 52rem) {
  .region-hero__media::after { background: var(--scrim-left), var(--scrim-bottom); }
}

.region-hero__inner {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}
.region-hero__inner .crumbs { margin-bottom: var(--space-2); }
.region-hero__eyebrow { color: var(--color-on-dark); }
.region-hero__eyebrow::before { background: var(--color-accent); opacity: 1; }
.region-hero__title {
  max-width: 21ch;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-on-dark);
  text-wrap: balance;
}
.region-hero__lead {
  max-width: 34rem;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-on-dark);
  opacity: 0.92;
}
.region-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-3);
}

/* ---- Intro ------------------------------------------------------------------ */
.region-intro__grid {
  display: grid;
  gap: var(--space-8) var(--grid-gap);
  align-items: center;
}
.region-intro__text { display: grid; justify-items: start; gap: var(--space-5); }
.region-intro__title { max-width: 16ch; }
.region-intro__body { font-size: var(--text-lg); }
.region-intro__sign {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-primary);
}
.region-intro__sign::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--color-accent);
}
.region-intro__media {
  position: relative;
  justify-self: center;
  width: min(100%, 28rem);
}
/* soft ring behind the arch – echoes the region map */
.region-intro__media::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 8% -10% auto auto;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  opacity: 0.5;
}
.region-intro__media::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -8%;
  bottom: -5%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent-soft);
}
.region-intro { isolation: isolate; overflow-x: clip; }

@media (min-width: 52rem) {
  .region-intro__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .region-intro__media { justify-self: end; }
}
@media (min-width: 80rem) {
  .region-intro__grid { column-gap: var(--space-10); }
}

/* ---- Offer ------------------------------------------------------------------ */
.region-head { display: grid; justify-items: start; gap: var(--space-4); }
.region-formats {
  counter-reset: format;
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
}
@media (min-width: 52rem) {
  .region-formats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
}
.region-format {
  counter-increment: format;
  gap: var(--space-3);
  background: var(--color-bg);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.region-format__num {
  display: block;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-style: italic;
  line-height: 1;
  color: var(--color-primary);
}
.region-format__num::before { content: counter(format, decimal-leading-zero); }
/* hyphens: long single words like „Pferdetraining/Jungpferdebegleitung“ must not widen the card on phones */
.region-format__title { text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.region-format__text { color: var(--color-text-muted); }

.region-topics {
  display: grid;
  gap: var(--space-5);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}
.region-topics__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.region-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.region-topic {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem 1.15rem 0.7rem 0.95rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.region-topic__icon { color: var(--color-accent); }

/* ---- Region map ----------------------------------------------------------- */
.region-area__grid {
  display: grid;
  gap: var(--space-8) var(--grid-gap);
  align-items: center;
}
.region-area__text { display: grid; justify-items: start; gap: var(--space-5); }
.region-area__body { font-size: var(--text-lg); }

.region-map {
  position: relative;
  justify-self: center;
  width: min(100%, 26rem);
  aspect-ratio: 1;
  color: var(--color-primary);
}
.region-map__rings { position: absolute; inset: 0; }
.region-map__dot,
.region-map__ping {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin: -0.45rem 0 0 -0.45rem;
  border-radius: 50%;
  background: var(--color-primary);
}
.region-map__dot { box-shadow: 0 0 0 6px var(--color-primary-soft); }
.region-map__ping { opacity: 0; }
.region-map.is-revealed .region-map__ping { animation: region-ping 2.4s var(--ease-out) 1.4s 2 both; }
@keyframes region-ping {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(9); opacity: 0; }
}
/* decorative "places" on the rings */
.region-map__dots i {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-spring);
}
.region-map__dots i:nth-child(1) { top: 24%; left: 30%; transition-delay: 1.3s; }
.region-map__dots i:nth-child(2) { top: 18%; left: 68%; transition-delay: 1.45s; }
.region-map__dots i:nth-child(3) { top: 56%; left: 87%; transition-delay: 1.6s; }
.region-map__dots i:nth-child(4) { top: 82%; left: 62%; transition-delay: 1.75s; }
.region-map__dots i:nth-child(5) { top: 74%; left: 20%; transition-delay: 1.9s; }
.region-map__dots i:nth-child(6) { top: 44%; left: 8%; transition-delay: 2.05s; }
.region-map.is-revealed .region-map__dots i,
html:not(.js) .region-map__dots i,
html.is-editing .region-map__dots i { opacity: 0.75; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .region-map.is-revealed .region-map__ping { animation: none; }
  .region-map__dots i, .region-price::before { transition: none; }
}

.region-map__center,
.region-map__ring-label {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.region-map__center { top: calc(50% + 1rem); color: var(--color-text); }
.region-map__ring-label {
  top: calc(24% - 0.85rem);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-primary);
}

@media (min-width: 52rem) {
  .region-area__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
@media (min-width: 80rem) {
  .region-area__grid { column-gap: var(--space-10); }
}

.region-places {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
}
.region-place {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 1rem 0.55rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.region-place__icon { color: var(--color-primary); }

.region-travel {
  width: 100%;
  margin-top: var(--space-3);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: var(--border);
  border-radius: var(--radius-lg);
}
.region-travel__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.region-travel__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.region-travel__title { font-size: var(--text-h4); }
.region-travel__list { margin: 0; }
.region-travel__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
}
.region-travel__row + .region-travel__row { border-top: 1px solid var(--color-line); }
.region-travel__label { color: var(--color-text-muted); }
.region-travel__value {
  margin: 0 0 0 auto;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* ---- Prices ------------------------------------------------------------- */
.region-prices__lead { display: inline-flex; align-items: center; gap: var(--space-2); }
.region-prices__lead .icon { color: var(--color-primary); }
.region-prices__grid {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
}
@media (min-width: 52rem) {
  .region-prices__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
}
.region-price {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-3);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
/* accent line that draws across when the card appears */
.region-price::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease-in-out) calc(var(--reveal-delay, 0ms) + 300ms);
}
.region-price.is-revealed::before,
html:not(.js) .region-price::before,
html.is-editing .region-price::before { transform: none; }
.region-price__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  /* long compounds („Pferdetraining/Jungpferdebegleitung“) must wrap at 320 px instead of being cut off */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.region-price > * { min-width: 0; }
.region-price__value {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
  font-variant-numeric: lining-nums;
  color: var(--color-heading);
}
.region-price__note {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.region-prices__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}

/* ---- FAQ ------------------------------------------------------------------ */
.region-faq__grid { display: grid; gap: var(--space-7) var(--grid-gap); align-items: start; }
.region-faq__aside { display: grid; justify-items: start; gap: var(--space-5); }
.region-faq__photo { width: 100%; margin-top: var(--space-3); }
@media (max-width: 51.99rem) {
  .region-faq__photo { display: none; }
}
@media (min-width: 64rem) {
  .region-faq__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: var(--space-9); }
  .region-faq__aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
@media (min-width: 52rem) and (max-width: 63.99rem) {
  .region-faq__photo { max-width: 32rem; }
}

.region-faq__list { border-top: 1px solid var(--color-line); }
.faq { border-bottom: 1px solid var(--color-line); }
.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 3rem;
  padding-block: var(--space-5);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  border-radius: var(--radius-xs);
  transition: color var(--dur-base) var(--ease-soft);
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary:hover { color: var(--color-primary); }
.faq__question { text-wrap: balance; }
.faq__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  color: var(--color-text);
  transition:
    transform var(--dur-slow) var(--ease-spring),
    background-color var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft);
}
.faq__summary:hover .faq__icon { border-color: var(--color-primary); color: var(--color-primary); }
.faq[open] .faq__icon {
  transform: rotate(135deg);
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.faq__body { overflow: hidden; }
.faq__answer {
  padding: 0 calc(2.75rem + var(--space-5)) var(--space-6) 0;
  color: var(--color-text-muted);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.faq:not([open]) .faq__answer,
.faq.is-closing .faq__answer { opacity: 0; transform: translateY(-6px); }
@media (max-width: 40rem) {
  .faq__answer { padding-right: 0; }
}

/* Smooth open/close where the browser supports it (::details-content + interpolate-size on <html>);
   elsewhere public/js/modules/faq.js animates the height. */
.faq::details-content {
  block-size: 0;
  overflow-y: clip;
  transition:
    block-size var(--dur-slow) var(--ease-out),
    content-visibility var(--dur-slow) allow-discrete;
}
.faq[open]::details-content { block-size: auto; }

/* While editing every answer stays visible and editable */
html.is-editing .faq::details-content { block-size: auto; content-visibility: visible; }
html.is-editing .faq .faq__answer { opacity: 1; transform: none; }

/* ---- Closing card -------------------------------------------------------- */
/* Light card: the site footer below is dark, so the page ends cream → dark instead of dark → dark. */
.region-cta { padding-top: 0; }
.region-cta__card {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-7);
  padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(1.5rem, 0.75rem + 5vw, 6rem);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
}
.region-cta__rings {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: clamp(-14rem, -8rem - 6vw, -5rem);
  width: clamp(20rem, 14rem + 26vw, 40rem);
  translate: 0 -50%;
  color: var(--color-primary);
  opacity: 0.4;
  pointer-events: none;
}
.region-cta__text { display: grid; justify-items: start; gap: var(--space-4); max-width: 38rem; }
.region-cta__title { max-width: 18ch; }
.region-cta__lead { font-size: var(--text-lg); color: var(--color-text-muted); }
.region-cta__actions { display: grid; justify-items: start; gap: var(--space-5); }
.region-cta__contact {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}
.region-cta__contact li { display: flex; align-items: center; gap: var(--space-3); }
.region-cta__contact .icon { color: var(--color-primary); }
.region-cta__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.region-cta__contact a:hover { color: var(--color-primary); }
@media (min-width: 64rem) {
  .region-cta__card { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
  .region-cta__actions { justify-self: end; }
}
@media (max-width: 40rem) {
  .region-cta__actions, .region-cta__actions .btn { width: 100%; }
  .region-cta__actions .btn { justify-content: space-between; } /* like .btn--block */
  /* e-mail address: a little smaller on the narrowest phones instead of breaking mid-word (126px = gutters, card, icon) */
  .region-cta__contact a[href^='mailto:'] { font-size: min(var(--text-sm), (100vw - 126px) / 14); }
}


/* sections/site-consent.css */
/* ==========================================================================
   Datenschutz-Einstellungen (views/partials/consent.njk, public/js/modules/consent.js)
   Non-modal card at the bottom (only when consent is needed), settings dialog,
   placeholder for gated embeds, footer button. Edit mode: inline preview on /datenschutz.
   ========================================================================== */

.consent__edit-note,
.consent__flag { display: none; }

/* ---- Banner: card bottom-left (desktop) / bottom sheet (mobile) -------- */
.consent-banner {
  position: fixed;
  inset-inline: var(--space-2);
  bottom: var(--space-2);
  z-index: calc(var(--z-fab) + 1);
  display: grid;
  gap: var(--space-4);
  max-height: calc(100dvh - var(--space-4));
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    display var(--dur-base) allow-discrete;
}
.consent-banner[hidden] { display: none; }
@starting-style {
  .consent-banner:not([hidden]) { opacity: 0; transform: translateY(1.5rem); }
}
.consent-banner:focus { outline: none; }
.consent-banner:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

@media (min-width: 40rem) {
  .consent-banner {
    inset-inline: var(--space-5) auto;
    bottom: var(--space-5);
    width: min(100% - 2 * var(--space-5), 34rem);
    max-height: calc(100dvh - 2 * var(--space-5));
    padding: var(--space-6);
  }
}

.consent-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
}
.consent-banner__text { font-size: var(--text-sm); line-height: var(--leading-body); }
.consent-banner__text > * + * { margin-top: 0.8em; }

/* Equal weight: accepting and rejecting look exactly the same (no nudging) */
.consent__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-2);
}
.btn.consent__btn {
  --btn-bg: var(--color-bg);
  --btn-fg: var(--color-text);
  --btn-border: var(--color-text);
  --btn-pad-x: 1rem;
  min-height: 2.75rem;
  white-space: normal;
  text-align: center;
}

.consent__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  font-size: var(--text-xs);
}
.consent__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-text-muted);
}
.consent__links a:hover { color: var(--color-text); }

/* Small phones and short screens: a compact card that leaves header and burger free. Same texts, same equal weight:
   "Alle akzeptieren" and "Nur notwendige" side by side, the settings below. */
@media (max-width: 39.99rem), (max-height: 40rem) {
  .consent-banner {
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-2);
  }
  .consent-banner__title { font-size: var(--text-lg); }
  .consent-banner__text { font-size: var(--text-xs); }
  .consent-banner .consent__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consent-banner .consent__btn[data-consent-action='settings'] { grid-column: 1 / -1; }
}

/* ---- Settings dialog -------------------------------------------------- */
.consent-dialog { width: min(100% - 1rem, 40rem); }
.consent-dialog__inner { display: grid; gap: var(--space-5); }
.consent-dialog__title { padding-right: var(--space-8); }
.consent-dialog__intro { color: var(--color-text-muted); }

.consent-cats { display: grid; gap: var(--space-3); margin: 0; }
.consent-cat {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}
.consent-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.consent-cat__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}
.consent-cat__always {
  flex: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
.consent-cat__text,
.consent-cat__services { font-size: var(--text-sm); color: var(--color-text-muted); }
.consent-cat__services a { color: var(--color-primary); }

/* Switch: a real checkbox (role="switch") stretched over the drawn track, 44px touch target */
.consent-switch {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.consent-switch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.consent-switch__track {
  position: relative;
  display: block;
  width: 3rem;
  height: 1.75rem;
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  transition: background-color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft);
}
.consent-switch__thumb {
  position: absolute;
  top: 50%;
  left: 0.2rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  transform: translateY(-50%);
  transition: transform var(--dur-base) var(--ease-spring), background-color var(--dur-base) var(--ease-soft);
}
.consent-switch__input:checked + .consent-switch__track { background: var(--color-primary); border-color: var(--color-primary); }
.consent-switch__input:checked + .consent-switch__track .consent-switch__thumb { background: var(--color-on-primary); transform: translate(1.2rem, -50%); }
.consent-switch__input:focus-visible + .consent-switch__track { outline: 2px solid var(--color-focus); outline-offset: 3px; }

@media (forced-colors: active) {
  .consent-switch__track { border-color: CanvasText; }
  .consent-switch__thumb { background: CanvasText; }
  .consent-switch__input:checked + .consent-switch__track { background: Highlight; }
  .consent-switch__input:checked + .consent-switch__track .consent-switch__thumb { background: HighlightText; }
}

/* ---- Placeholder for a gated embed (<template data-consent>) ----------- */
.consent-embed {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.consent-embed[hidden] { display: none; }
.consent-embed__service { font-weight: var(--weight-semibold); }
.consent-embed__service:empty { display: none; }
.consent-embed__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.consent-embed__more {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* ---- Footer button ("Datenschutz-Einstellungen") ------------------------ */
.site-footer__consent { margin: 0; }
.site-footer__consent[hidden] { display: none; }
.site-footer__consent-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.site-footer__consent-btn:hover .site-footer__label { background-position-x: 0; background-size: 100% 1px; }

/* ---- Edit mode -------------------------------------------------------------
   Other pages: no floating card while editing. /datenschutz: everything inline at the top. */
html.is-editing body:not(.page-datenschutz) .consent { display: none; }

html.is-editing .page-datenschutz .consent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
  gap: var(--space-5);
  padding: var(--space-6) var(--gutter);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
}
html.is-editing .page-datenschutz .consent__edit-note {
  display: flex;
  grid-column: 1 / -1;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
html.is-editing .page-datenschutz .consent__edit-note .icon { margin-top: 0.15em; }
html.is-editing .page-datenschutz .consent__flag {
  display: inline-flex;
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
html.is-editing .page-datenschutz :is(.consent-banner, .consent-embed)[hidden] { display: grid; }
html.is-editing .page-datenschutz .consent-banner {
  position: static;
  width: auto;
  max-height: none;
  box-shadow: var(--shadow-sm);
}
html.is-editing .page-datenschutz .consent-dialog:not([open]) {
  position: static;
  display: block;
  width: auto;
  max-height: none;
  margin: 0;
  border: 1px solid var(--color-line-strong);
  opacity: 1;
  transform: none;
  box-shadow: var(--shadow-sm);
}
html.is-editing .page-datenschutz .consent-dialog:not([open]) { transition: none; }
html.is-editing .page-datenschutz .consent-dialog:not([open]) .consent-dialog__close { display: none; }
html.is-editing .page-datenschutz .consent-dialog:not([open]) .dialog__inner { max-height: none; overflow: visible; }


/* sections/zz-edit-fab.css */
/* ==========================================================================
   Floating pencil (.edit-fab) – visible for every visitor, deliberately quiet.
   Opens the login / the inline editor. The editor styles live in editor.css.
   ========================================================================== */

.edit-fab {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-bg) 78%, transparent);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0.7;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition:
    opacity var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft),
    background-color var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft),
    transform var(--dur-slow) var(--ease-spring),
    visibility 0s linear 0s;
}
.edit-fab .icon {
  width: 1.15rem;
  height: 1.15rem;
  transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-fast) var(--ease-soft);
}
.edit-fab:hover,
.edit-fab:focus-visible {
  opacity: 1;
  color: var(--color-primary);
  background: var(--color-bg);
  border-color: var(--color-line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.edit-fab:hover .icon { transform: rotate(-14deg) scale(1.06); }
.edit-fab:active { transform: scale(0.93); }
.edit-fab:focus-visible { outline-offset: 3px; }

/* Tooltip "Seite bearbeiten" (text from aria-label) */
.edit-fab::after {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + var(--space-3));
  top: 50%;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-out);
}
.edit-fab:hover::after,
.edit-fab:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
  transition-delay: 120ms;
}

/* Loading the editor */
.edit-fab.is-loading { opacity: 1; color: var(--color-primary); cursor: progress; pointer-events: none; }
.edit-fab.is-loading .icon { opacity: 0; transform: scale(0.6); }
.edit-fab.is-loading::after { opacity: 0; }
.edit-fab.is-loading::before {
  content: '';
  position: absolute;
  left: 0.9rem;
  top: 0.75rem;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid color-mix(in oklab, var(--color-primary) 22%, transparent);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: edit-fab-spin 0.75s linear infinite;
}
@keyframes edit-fab-spin { to { transform: rotate(360deg); } }

/* While the editor dock or the mobile menu is open the pencil steps aside (header.js makes it inert then) */
html.has-ed-dock .edit-fab,
html.has-menu-open .edit-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.75rem) scale(0.5);
  transition:
    opacity var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-in-out),
    visibility 0s linear var(--dur-base);
}

@media (prefers-reduced-motion: reduce) {
  .edit-fab.is-loading::before { animation-duration: 1.6s; }
}

@media print {
  .edit-fab { display: none; }
}


/* blog.css */
/* ==========================================================================
   Blog – shared post cards (also on the home page), the index /blog and the
   post page /blog/:slug. Tokens only; motion via the shared vocabulary.
   ========================================================================== */

/* ---- Shared: meta line, category chip, placeholder ----------------------- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}
.post-meta__text { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); }
.post-meta__sep { color: var(--color-accent); }

.post-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
}
.post-chip--link {
  min-height: 2.25rem;
  padding-inline: 1rem;
  transition: background-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
}
.post-chip--link:hover { background: var(--color-primary); color: var(--color-on-primary); }

/* Shown instead of a cover photo when a post has none */
.post-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 8rem;
  color: var(--color-accent);
  background:
    radial-gradient(circle at 30% 20%, var(--color-accent-soft), transparent 60%),
    var(--color-surface);
}
.post-placeholder .icon { width: 3rem; height: 3rem; stroke-width: 1.1; }

/* ---- Shared: post grid + card --------------------------------------------- */
.post-grid {
  display: grid;
  gap: var(--space-8) var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
}
.post-grid > li { min-width: 0; }
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* No orphan: an odd last card spans both columns, image beside text */
  .post-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .post-grid > li:last-child:nth-child(odd) > .post-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--grid-gap);
    align-items: center;
  }
}
@media (min-width: 64rem) {
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Editorial rhythm: the middle column sits a little lower */
  .post-grid--stagger > :nth-child(3n + 2) { translate: 0 var(--space-8); }
  .post-grid--stagger:has(> :nth-child(2)) { padding-bottom: var(--space-8); }
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}
.post-card__media { aspect-ratio: 5 / 4; border-radius: var(--radius-lg); }
.post-card__media > img { transition: transform var(--dur-slower) var(--ease-out); }
.post-card:hover .post-card__media > img { transform: scale(1.05); }
.post-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-3); }
.post-card__title {
  font-size: calc((var(--text-h3) + var(--text-h4)) / 2);
  line-height: var(--leading-snug);
}
.post-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-1);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.post-card__more .icon { transition: transform var(--dur-base) var(--ease-out); }
.post-card:hover .post-card__more .icon { transform: translateX(4px); }

/* Title links: underline draws in on hover; the link covers the whole card */
.post-card__link,
.blog-feature__link {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size var(--dur-slow) var(--ease-out);
}
.post-card__link:hover,
.blog-feature__link:hover { color: inherit; }
.post-card:hover .post-card__link,
.blog-feature:hover .blog-feature__link,
.post-card__link:focus-visible,
.blog-feature__link:focus-visible { background-size: 100% 1px; }
.post-card__link::after,
.blog-feature__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-lg);
}
@supports selector(:has(a)) {
  .post-card__link:focus-visible,
  .blog-feature__link:focus-visible { outline: none; }
  .post-card:has(.post-card__link:focus-visible),
  .blog-feature:has(.blog-feature__link:focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: 8px;
    border-radius: var(--radius-lg);
  }
}
/* While editing, the stretched links must not cover editable texts */
html.is-editing .post-card__link::after,
html.is-editing .blog-feature__link::after { display: none; }

/* ==========================================================================
   /blog – index
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.blog-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(70svh, 40rem);
  padding-block: calc(var(--header-h) + var(--space-8)) var(--space-8);
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-on-dark);
}
.blog-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.blog-hero__img { width: 100%; height: 100%; object-fit: cover; }
/* Scrims: top for the transparent header, bottom (and left on wide screens) for the text */
.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, color-mix(in oklab, var(--color-dark) 55%, transparent), transparent 34%),
    linear-gradient(to top, color-mix(in oklab, var(--color-dark) 35%, transparent) 55%, transparent 85%),
    var(--scrim-bottom);
}
@media (min-width: 52rem) {
  .blog-hero::before {
    background:
      linear-gradient(to bottom, color-mix(in oklab, var(--color-dark) 62%, transparent), transparent 30%),
      var(--scrim-left),
      var(--scrim-bottom);
  }
}
/* Clicks on empty hero space reach the photo (the editor opens the image picker there) */
.blog-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  pointer-events: none;
}
.blog-hero__inner > * { pointer-events: auto; }
.blog-hero__text { display: grid; gap: var(--space-4); max-width: 48rem; }
.blog-hero .eyebrow { color: var(--color-on-dark); }
.blog-hero__title { color: var(--color-on-dark); max-width: 18ch; }
.blog-hero__lead {
  max-width: 38rem;
  font-size: var(--text-lg);
  color: color-mix(in oklab, var(--color-on-dark) 90%, transparent);
}
.blog-hero__jump {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--color-on-dark);
  font-size: var(--text-sm);
  text-decoration: none;
}
.blog-hero__jump:hover { color: var(--color-on-dark); }
.blog-hero__count strong { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-heading); }
.blog-hero__arrow {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid color-mix(in oklab, var(--color-on-dark) 50%, transparent);
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-on-dark) 8%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft), transform var(--dur-slow) var(--ease-out);
}
.blog-hero__jump:hover .blog-hero__arrow { background: var(--color-on-dark); color: var(--color-dark); transform: translateY(4px); }
@media (max-width: 52rem) {
  .blog-hero__jump { display: none; }
}

/* ---- List section ---------------------------------------------------------- */
.blog-list { padding-top: var(--section-y-sm); }

.blog-drafts {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  padding: var(--space-5) var(--space-6);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}
.blog-drafts__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}
.blog-drafts__hint { font-weight: var(--weight-body); color: var(--color-text-muted); }
.blog-drafts__list { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.blog-drafts__list a { color: var(--color-text); font-weight: var(--weight-medium); }
.blog-drafts__date { color: var(--color-text-muted); font-size: var(--text-xs); }

/* Category filter (chips are links → works without JS) */
.blog-filter {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: clamp(var(--space-7), 4vw, var(--space-8));
}
.blog-filter__label {
  flex: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.blog-filter__list {
  /* positioned: keeps visually-hidden helper text inside the scroll strip */
  position: relative;
  display: flex;
  gap: var(--space-2);
  min-width: 0;
  margin: calc(var(--space-1) * -1);
  padding: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.blog-filter__list::-webkit-scrollbar { display: none; }
.blog-filter__list > li { flex: none; scroll-snap-align: start; }
.blog-filter__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
}
.blog-filter__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blog-filter__chip[aria-current='page'] { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-on-dark); }
.blog-filter__count {
  min-width: 1.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, currentColor 12%, transparent);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
@media (max-width: 40rem) {
  .blog-filter { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .blog-filter__list { mask-image: linear-gradient(90deg, var(--color-text) 85%, transparent); }
}

/* ---- Featured (newest) post ---------------------------------------------- */
.blog-feature {
  position: relative;
  display: grid;
  gap: var(--space-6) var(--grid-gap);
  align-items: center;
}
@media (min-width: 52rem) {
  .blog-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.blog-feature__media { aspect-ratio: 3 / 2; border-radius: var(--radius-lg); }
.blog-feature__media > img { transition: transform var(--dur-slower) var(--ease-out); }
.blog-feature:hover .blog-feature__media > img { transform: scale(1.04); }
.blog-feature__body { display: grid; gap: var(--space-4); justify-items: start; }
.blog-feature__title { font-size: calc((var(--text-h2) + var(--text-h3)) / 2); }
.blog-feature__excerpt { max-width: 42ch; font-size: var(--text-lg); color: var(--color-text-muted); }
.blog-feature__more { margin-top: var(--space-2); }
.blog-feature__more .text-link { position: relative; z-index: 2; }

/* ---- More posts ---------------------------------------------------------- */
.blog-more {
  margin-top: var(--section-y-sm);
  padding-top: var(--section-y-sm);
  border-top: 1px solid var(--color-line);
}
.blog-more__head { display: grid; gap: var(--space-4); margin-bottom: clamp(var(--space-7), 5vw, var(--space-8)); }
.blog-more__title { max-width: 18ch; }

/* ---- Empty state -------------------------------------------------------- */
.blog-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: 34rem;
  margin-inline: auto;
  padding-block: var(--space-7);
  text-align: center;
}
.blog-empty__icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-primary);
}
.blog-empty__icon .icon { width: 1.75rem; height: 1.75rem; }
.blog-empty__title { font-size: var(--text-h3); }
.blog-empty__text { color: var(--color-text-muted); }
.blog-empty .btn { margin-top: var(--space-3); }

/* ==========================================================================
   /blog/:slug – post page
   ========================================================================== */

/* Reading column shared by body, share row and author box (one left edge) */
.post-column { width: min(100% - 2 * var(--gutter), 40rem); margin-inline: auto; }

/* ---- Header -------------------------------------------------------------- */
.post-header { padding-top: clamp(var(--space-7), 6vw, var(--space-9)); text-align: center; }
.post-header__inner { display: grid; justify-items: center; gap: var(--space-5); }

.post-draft {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 1.1rem;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.post-draft .icon { color: var(--color-primary); }

.breadcrumb { max-width: 100%; font-size: var(--text-xs); color: var(--color-text-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-1) var(--space-3); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; max-width: 100%; }
.breadcrumb li + li::before {
  content: '';
  flex: none;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--color-accent);
}
.breadcrumb a {
  display: inline-block;
  padding-block: 0.35rem;
  position: relative;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 85% / 0 1px no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out), color var(--dur-base);
}
.breadcrumb a:hover { color: var(--color-primary); background-size: 100% 1px; }
.breadcrumb a::before { content: ''; position: absolute; inset: -0.35rem -0.2rem; } /* 44px hit area */
.breadcrumb [aria-current] {
  overflow: hidden;
  max-width: 32ch;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Phones: the title follows right below – the trail ends at "Blog" */
@media (max-width: 40rem) {
  .breadcrumb li:last-child { display: none; }
}

.post-title {
  max-width: 22ch;
  font-size: calc((var(--text-h1) + var(--text-h2)) / 2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.post-byline__person { display: inline-flex; align-items: center; gap: var(--space-3); text-align: left; }
/* Round face crop: the photo is zoomed so its focus point (--fx/--fy) sits in the centre.
   Uses the individual scale/translate properties (scale applies first), because the motion
   resets (`transform: none !important` while editing / reduced motion) must not undo the crop. */
.post-byline__avatar {
  position: relative;
  flex: none;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 4px var(--color-line-strong);
}
.post-byline__avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  --zoom: 2.4;
  scale: var(--zoom);
  translate: calc((50% - var(--fx, 50%)) * var(--zoom)) calc((50% - var(--fy, 50%)) * var(--zoom));
}
.post-byline__who { display: grid; line-height: var(--leading-snug); }
.post-byline__name { color: var(--color-text); font-weight: var(--weight-semibold); }
.post-byline__role { font-size: var(--text-xs); }
.post-byline__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.post-byline__sep { color: var(--color-accent); }
@media (min-width: 40rem) {
  .post-byline__meta { padding-left: var(--space-5); border-left: 1px solid var(--color-line); }
}

.post-lead {
  max-width: 34em;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-variation-settings: 'SOFT' 50;
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* ---- Cover --------------------------------------------------------------- */
.post-cover { width: min(100% - 2 * var(--gutter), var(--container)); margin: clamp(var(--space-7), 5vw, var(--space-9)) auto 0; }
.post-cover__frame { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.post-cover__parallax { width: 100%; height: 100%; }
.post-cover__parallax > img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40rem) {
  /* Full-bleed photo on phones */
  .post-cover { width: 100%; }
  .post-cover__frame { aspect-ratio: 4 / 3; border-radius: 0; }
}

/* ---- Article body: reading typography ------------------------------------ */
.post-body { position: relative; padding-block: clamp(var(--space-7), 6vw, var(--space-9)) var(--space-8); }
.article-body {
  max-width: none;
  font-size: calc(var(--text-base) + 0.0625rem);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  overflow-wrap: break-word;
}
/* Long German compounds on phones: hyphenate, but only long words */
@media (max-width: 40rem) {
  .article-body { hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}
.article-body > * + * { margin-top: 1.4em; }
.article-body > p:first-child {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-heading);
}
.article-body strong { color: var(--color-heading); }
.article-body h2 {
  position: relative;
  margin-top: 2.6em;
  padding-top: var(--space-5);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  hyphens: manual;
}
.article-body h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
.article-body h3 { margin-top: 2.1em; font-size: var(--text-h4); hyphens: manual; }
.article-body h4 { margin-top: 1.8em; }
.article-body :is(h2, h3, h4) + * { margin-top: 0.8em; }
.article-body ul, .article-body ol { padding-left: 1.35em; }
.article-body li { padding-left: 0.3em; }
.article-body li + li { margin-top: 0.55em; }
.article-body ul > li::marker { color: var(--color-accent); }
.article-body ol > li::marker { color: var(--color-primary); font-weight: var(--weight-semibold); }
.article-body blockquote {
  margin-block: 2.2em;
  padding: var(--space-1) 0 var(--space-1) var(--space-6);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  line-height: var(--leading-snug);
  color: var(--color-heading);
  hyphens: manual;
}
.article-body blockquote p + p { margin-top: 0.6em; }
.article-body a {
  color: var(--color-primary);
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-base) var(--ease-soft);
}
.article-body a:hover { text-decoration-color: currentColor; }
.article-body img { width: 100%; height: auto; border-radius: var(--radius-md); }
.article-body figure { margin-block: 2.4em; }
.article-body figcaption { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
.article-body figure.wide {
  width: min(100vw - 2 * var(--gutter), 60rem);
  margin-inline: calc(50% - min(50vw - var(--gutter), 30rem));
}
.article-body figure.full { width: 100vw; margin-inline: calc(50% - 50vw); }
.article-body figure.full img { border-radius: 0; }
/* Divider as three soft dots */
.article-body hr {
  width: 3.75rem;
  height: 0.4rem;
  margin: 3em auto;
  border: 0;
  background: radial-gradient(circle, var(--color-accent) 0.16rem, transparent 0.2rem) center / 1.25rem 0.4rem repeat-x;
}

/* ---- Reading progress (width from --progress, set by motion.js) ----------- */
.reading-progress { display: none; }
.js .reading-progress {
  display: block;
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--z-header) + 1);
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-soft);
}
.js .reading-progress.is-active { opacity: 1; }
.reading-progress__bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
}
html.is-editing .reading-progress { display: none; }

/* ---- Article footer: share + author -------------------------------------- */
.post-footer { display: grid; gap: var(--space-8); padding-bottom: var(--section-y); }

.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-block: 1px solid var(--color-line);
}
.post-share__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.post-share__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.post-share .btn { min-height: 2.75rem; }
.post-share .btn:hover .icon { transform: none; }
.post-share [data-copy-link].is-done { --btn-border: var(--color-success); --btn-fg: var(--color-success); }

.post-author {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border-radius: var(--radius-xl);
  background: var(--color-surface-soft);
}
@media (min-width: 40rem) {
  .post-author { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-7); }
}
.post-author__photo { aspect-ratio: 4 / 5; width: min(100%, 11rem); }
.post-author__body { display: grid; gap: var(--space-3); justify-items: start; }
.post-author__name { font-size: var(--text-h3); }
.post-author__role { margin-top: calc(var(--space-2) * -1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-primary); }
.post-author__bio { color: var(--color-text-muted); }
.post-author__cta { margin-top: var(--space-3); }

/* ---- Related posts --------------------------------------------------------- */
.post-related { background: var(--color-surface-soft); }
.post-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) var(--grid-gap);
  margin-bottom: clamp(var(--space-7), 5vw, var(--space-8));
}
.post-related__heading { display: grid; gap: var(--space-4); }
.post-related__title { max-width: 16ch; }
.post-related .post-placeholder { background: var(--color-bg); }

/* ---- Editing: hints for empty post fields ---------------------------------- */
html.is-editing .post [data-post-field][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
  opacity: 0.65;
}
html.is-editing .post-cover[data-empty] .post-cover__frame { outline: 1px dashed var(--color-line-strong); outline-offset: -1px; }

@media print {
  .reading-progress, .post-share, .post-related, .blog-hero__jump { display: none !important; }
  .post-cover__parallax { transform: none !important; }
}


/* legal.css */
/* ==========================================================================
   Legal pages (/impressum, /datenschutz) – calm reading layout:
   small header · sticky table of contents (desktop) · comfortable prose column.
   The breadcrumb (.crumbs) is a shared component in components.css.
   ========================================================================== */

/* ---- Header ------------------------------------------------------------- */
.legal-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(2rem, 1.2rem + 3vw, 4rem) clamp(2.75rem, 1.6rem + 4vw, 5.5rem);
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-line);
}
.legal-hero__inner {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}
.legal-hero__inner .crumbs { margin-bottom: var(--space-3); }
.legal-hero__title {
  max-width: 18ch;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.legal-hero__meta {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 40rem;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.legal-hero__meta .icon { flex: none; margin-top: 0.1em; color: var(--color-primary); }
.legal-hero__meta-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-right: var(--space-1);
}
.legal-hero__meta [data-edit] { color: var(--color-text); }
/* "Stand:" disappears for visitors when the date field is empty */
html:not(.is-editing) .legal-hero__meta:has([data-empty]) { display: none; }

/* Decorative rings (same motif as the region page) */
.legal-hero__ornament {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: clamp(-9rem, -6rem - 4vw, -4rem);
  width: clamp(16rem, 12rem + 18vw, 30rem);
  height: auto;
  translate: 0 -50%;
  color: var(--color-accent);
  pointer-events: none;
}
.legal-hero__ornament circle { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.legal-hero__ornament circle:nth-child(1) { opacity: 0.25; }
.legal-hero__ornament circle:nth-child(2) { opacity: 0.4; transition-delay: 350ms; }
.legal-hero__ornament circle:nth-child(3) { opacity: 0.6; transition-delay: 650ms; }
.js .legal-hero__ornament .draw-path { stroke-dasharray: 1.02 1.02; stroke-dashoffset: 1.02; }
.js .legal-hero__ornament.is-revealed .draw-path,
html.is-editing .legal-hero__ornament .draw-path { stroke-dashoffset: 0; }
@media (max-width: 40rem) {
  .legal-hero__ornament { opacity: 0.6; right: -8rem; }
}

/* ---- Layout: TOC + content ---------------------------------------------- */
.legal__layout {
  display: grid;
  gap: var(--space-6);
  padding-block: clamp(2.25rem, 1.4rem + 3.5vw, 5rem) var(--section-y);
}
.legal__content {
  min-width: 0;
  max-width: var(--measure);
  animation: legal-rise var(--dur-slower) var(--ease-out) 180ms both;
}
@keyframes legal-rise {
  from { opacity: 0; transform: translate3d(0, var(--reveal-distance), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .legal__content { animation: none; }
}

@media (min-width: 64rem) {
  .legal__layout {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    column-gap: clamp(3rem, -1rem + 6vw, 7rem);
    align-items: start;
  }
}

/* ---- Table of contents -------------------------------------------------- */
.legal-toc { min-width: 0; }
.legal-toc__details {
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}
.legal-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  list-style: none;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
  border-radius: inherit;
}
.legal-toc__summary::-webkit-details-marker { display: none; }
.legal-toc__summary .icon { transition: transform var(--dur-base) var(--ease-out); }
.legal-toc__details[open] > .legal-toc__summary .icon { transform: rotate(180deg); }

.legal-toc__list {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0 var(--space-4) var(--space-3);
}
.legal-toc__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding-block: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft), transform var(--dur-base) var(--ease-out);
}
.legal-toc__link:hover { color: var(--color-text); }
.legal-toc__link.is-active { color: var(--color-primary); font-weight: var(--weight-medium); }
.legal-toc__num {
  flex: none;
  min-width: 1.4em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.legal-toc__link.is-active .legal-toc__num { color: inherit; }

@media (min-width: 64rem) {
  .legal-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    max-height: calc(100dvh - var(--header-h) - var(--space-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .legal-toc__details { border: 0; border-radius: 0; background: none; }
  .legal-toc__summary { min-height: 0; padding: 0 0 var(--space-4); cursor: default; }
  .legal-toc__summary .icon { display: none; }
  .legal-toc__list { padding: 0 0 0 var(--space-5); }
  /* track + reading progress (--progress from data-scroll-progress on .legal__layout) */
  .legal-toc__list::before,
  .legal-toc__list::after {
    content: '';
    position: absolute;
    top: var(--space-2);
    bottom: var(--space-2);
    left: 0;
    width: 1px;
    background: var(--color-line);
  }
  .legal-toc__list::after {
    width: 2px;
    left: -0.5px;
    background: var(--color-primary);
    transform-origin: top;
    transform: scaleY(var(--progress, 0));
    transition: transform var(--dur-base) linear;
  }
  .legal-toc__link { min-height: 0; padding-block: 0.45rem; }
  .legal-toc__link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--space-5) * -1 - 3px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-bg);
    transform: translateY(-50%) scale(0);
    transition: transform var(--dur-slow) var(--ease-spring);
  }
  .legal-toc__link.is-active { transform: translateX(3px); }
  .legal-toc__link.is-active::before { transform: translateY(-50%) scale(1); }
}

/* ---- Prose -------------------------------------------------------------- */
.legal__prose { max-width: none; }
.legal__prose h2 {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-h4);
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}
.legal__prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__prose h2 + * { margin-top: var(--space-4); }
.legal__prose p, .legal__prose li { color: var(--color-text); }
.legal__prose a { overflow-wrap: anywhere; }
.legal__prose ul { padding-left: 1.2em; }

/* ---- Editor-only review hint (Datenschutz) ------------------------------ */
.legal-hint { display: none; }
html.is-editing .legal-hint {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  padding: var(--space-5);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.legal-hint__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.legal-hint__list { display: grid; gap: var(--space-2); margin: 0; padding-left: 1.2em; }
.legal-hint__list li::marker { color: var(--color-primary); }
.legal-hint__foot { color: var(--color-text-muted); font-size: var(--text-xs); }

/* ---- Footer of the article ---------------------------------------------- */
.legal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
}
.legal__foot .text-link { min-height: 2.75rem; }
.legal__top .icon { transition: transform var(--dur-base) var(--ease-out); }
.legal__top:hover .icon { transform: translateY(-3px); }

/* ---- Print -------------------------------------------------------------- */
@media print {
  .legal-hero { background: none; border: 0; padding-block: 0 1rem; }
  .legal-hero__ornament, .legal-toc, .legal-hint, .legal__foot, .crumbs { display: none !important; }
  .legal__layout { display: block; padding: 0; }
  .legal__content { max-width: none; animation: none; }
  .legal__prose a::after { content: ' (' attr(href) ')'; font-size: 0.85em; }
}


/* utilities.css */
/* ==========================================================================
   Utilities – small, single-purpose helpers (last in the bundle, so they win).
   Use sparingly; components and sections should carry their own spacing.
   ========================================================================== */

.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.nowrap { white-space: nowrap; }
.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }
.mx-auto { margin-inline: auto; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* Visibility by breakpoint (mobile < 40rem, desktop ≥ 64rem) */
@media (max-width: 39.99rem) { .hide-mobile { display: none !important; } }
@media (min-width: 40rem) { .show-mobile-only { display: none !important; } }
@media (max-width: 63.99rem) { .show-desktop-only { display: none !important; } }
@media (min-width: 64rem) { .hide-desktop { display: none !important; } }