/* ==========================================================================
   Merava Private — Components
   --------------------------------------------------------------------------
   Wiederverwendbare Komponenten-Klassen die in mehreren Snippets/Templates
   benutzt werden:
   - .card / Card-Varianten
   - .form-* / Form-Inputs
   - .link-arrow (Inline-Pattern, auch in Cards genutzt)
   - .badge / Tag
   - .icon-feature (Service-/Pillar-Icons)

   Komponenten-spezifische Klassen (header, footer, model-card etc.) leben
   bei ihren Snippets in Stage 2/3 — die hier sind cross-context.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Card — Image-Top + Body (Service/Blog-Pattern)
   -------------------------------------------------------------------------
   Relume-Style-Guide aligned:
   - border-radius 8 px
   - 1 px Border (Cream-Body-BG, 15% black border)
   - Hover: KEIN Elevate, KEIN Shadow-Change
     · Image scaled auf 1.05
     · Card-CTA (link-arrow) bekommt Hover-Color + Pfeil-Slide
     · Border darken dezent
   ------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background-color: var(--bg-elevated);
  text-decoration: none;
  color: inherit;
  overflow: hidden;                          /* Image folgt der Card-Rundung */
}

/* Kein Border-Change, kein Elevate, kein Shadow auf Card-Hover.
   Nur Image-Scale + Link-Arrow aktivieren — siehe weiter unten. */

/* Card-Image — Aspect-3:2 für Standard-Listings */
.card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.card__media--portrait {
  aspect-ratio: 5 / 4;          /* Relume: Modell-Profile */
}

.card__media--square {
  aspect-ratio: 1 / 1;
}

.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-card) var(--ease-in-out);
}

/* Card-Hover: nur zwei Dinge passieren
   1. Image scaled auf 1.05
   2. Link-Arrow bekommt Color-Shift + Pfeil-Translate
   Keine Border-Change, kein Lift, kein Shadow.
   Transitions sind am base-Element definiert -> beidseitig sanft. */

.card .link-arrow,
.card .btn--link {
  transition: color var(--duration-card) var(--ease-in-out);
}

.card .link-arrow__icon,
.card .btn--link .arrow {
  transition: transform var(--duration-card) var(--ease-in-out);
}

/* Einheitlicher Right-Arrow (link-arrow__icon) — em-relativ skaliert.
   Größe = 1em, Hover-Shift = 0.25em. So passt sich der Pfeil automatisch
   an die Schrift drumherum an (kleiner bei Footer-Links, größer bei
   Card-CTAs, riesig bei H3-Hover-Spans). */
.link-arrow__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.card:hover .card__media img {
  transform: scale(1.05);
}

.card:hover .link-arrow,
.card:hover .btn--link {
  color: var(--accent);
}

.card:hover .link-arrow__icon,
.card:hover .btn--link .arrow {
  transform: translateX(0.25em);
}

/* Body */
.card__body {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);                  /* 24px mobile */
  flex-grow: 1;
}
@media (min-width: 30em) {
  .card__body { padding: var(--space-6); }  /* 32px tablet+ */
}

.card__title {
  font-family: var(--font-display);          /* Righteous Regular */
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);                /* 24 px */
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}
@media (min-width: 48em) {
  .card__title { font-size: var(--text-3xl); }   /* 30 px */
}

.card__excerpt {
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.card__cta {
  margin-top: auto;        /* pinnt CTA an die Card-Unterkante */
  padding-top: var(--space-3);
}

/* Model-Card — nutzt .card + .card__media--portrait.
   Verifiziert-Badge in der oberen Ecke; Name = Link-Affordance (Name + Pfeil),
   Pfeil erscheint erst bei Card-Hover (fade-in + slide-right + Gold). */
.model-card .card__media { aspect-ratio: 4 / 5; }            /* Portrait — mehr Hoehe */
.model-card .card__body  { padding-block: var(--space-4); }  /* weniger Luft ueber/unter dem Namen */

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-button);
}
.verified-badge svg {
  width: 1em;
  height: 1em;
  color: var(--accent);               /* Gold-Haekchen */
}
/* Overlay-Variante: absolute-positioniert auf Bild-Cards (Modell-Card +
   Modell-Detail-Hero), mit Inset zur oberen-linken Ecke. */
.verified-badge--overlay {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
}
/* Plain-Variante: standalone im Info-Body, keine absolute Position. */
.verified-badge--plain {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  color: var(--color-gold-dark);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
}
.verified-badge--plain svg { color: var(--color-gold); }

/* Name als Link-Affordance (statt "Profil ansehen") */
.model-card__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-display);   /* Righteous — wie .card__title */
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  transition: color var(--duration-card) var(--ease-in-out);
}
@media (min-width: 48em) {
  .model-card__name { font-size: var(--text-2xl); }
}

/* Name-Swap: Default ist der Name, bei Hover wird er optisch durch
   "Profil ansehen" ersetzt (PDF-Anforderung "CTA: Profil ansehen"). Beide
   Spans liegen übereinander, opacity-Toggle macht den Wechsel. Der Hover-
   Span ist aria-hidden, screen reader liest nur den Namen. */
.model-card__name-default,
.model-card__name-hover {
  transition: opacity var(--duration-card) var(--ease-in-out);
}
.model-card__name-default {
  opacity: 1;
}
.model-card__name-hover {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  pointer-events: none;
}
.model-card__name { position: relative; }

.card:hover .model-card__name-default { opacity: 0; }
.card:hover .model-card__name-hover   { opacity: 1; }

/* Pfeil sitzt INNERHALB des Hover-Spans neben "Profil ansehen".
   Bei Default unsichtbar (mit dem ganzen Hover-Span), bei :hover slidet
   er aus -6px nach 0 — Affordance-Animation. */
/* model-card__arrow: stelle-spezifisches Verhalten — Pfeil sitzt im
   Hover-Span ("Profil ansehen"). Bei :hover slidet er von -0.4em auf 0.
   Größe + stroke werden via .link-arrow__icon vererbt. */
.model-card__arrow {
  transform: translateX(-0.4em);
  transition: transform var(--duration-card) var(--ease-in-out);
}
.card:hover .model-card__arrow { transform: translateX(0); }

.card:hover .model-card__name { color: var(--accent); }
.card:hover .model-card__arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* Service-Tile — nutzt .card (3:2). Meta-Zeile = Tag (Badge) + Label. */
.service-tile__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.service-tile__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   Location-Tile + Bento ("Vier Welten") — dunkle Overlay-Cards, gewebt.
   2 Spalten je [large+small]/[small+large] -> gestaffelte Naht (Masonry-Look).
   ------------------------------------------------------------------------- */
.location-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 64em) {
  .location-bento { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}
.location-bento__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.location-tile {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-card);
  padding: var(--space-6);
  background-color: var(--color-dark);
  color: var(--text-on-dark);
  text-decoration: none;
}
/* Bento-Hoehen nur im 3-Spalten-Layout (Desktop) — mobil stapeln die Cards
   content-hoch, sonst entstehen riesige leere Dark-Flaechen. */
@media (min-width: 64em) {
  .location-tile--large { min-height: 26rem; }
  .location-tile--small { min-height: 16rem; }
}

.location-tile__bg { position: absolute; inset: 0; z-index: 0; }
.location-tile__bg img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-card) var(--ease-in-out);
}
.location-tile:hover .location-tile__bg img { transform: scale(1.05); }
.location-tile__bg::after {
  content: ""; position: absolute; inset: 0;
  background: var(--opacity-black-50);     /* Dark-Overlay wie .card--overlay */
}

.location-tile__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%;
}
.location-tile__eyebrow { color: var(--accent); }       /* Gold-Tag */
.location-tile__icon { display: inline-flex; margin-bottom: var(--space-4); }
.location-tile__icon svg { width: 2rem; height: 2rem; }
.location-tile__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--text-on-dark);
  margin-bottom: var(--space-2);
}
@media (min-width: 48em) { .location-tile__title { font-size: var(--text-2xl); } }
.location-tile__text { color: var(--text-on-dark); }

.location-tile__cta {
  margin-top: auto;
  padding-top: var(--space-4);
}
.location-tile .link-arrow { color: var(--text-on-dark); }   /* weiss — schlaegt .link-arrow-Default (schwarz) */
.location-tile .link-arrow__icon { transition: transform var(--duration-card) var(--ease-in-out); }
.location-tile:hover .link-arrow { color: var(--accent); }   /* Gold bei Hover */
.location-tile:hover .link-arrow__icon { transform: translateX(0.25em); }

/* Card-Variante: Overlay-Image (Layout526 / Location-Tile) */
.card--overlay {
  position: relative;
  min-height: 24rem;
  padding: var(--space-6);
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
}
.card--overlay .card__media-bg img {
  transition: transform var(--duration-card) var(--ease-in-out);
}
.card--overlay:hover .card__media-bg img {
  transform: scale(1.05);
}
@media (min-width: 48em) {
  .card--overlay {
    padding: var(--space-7);
    min-height: 28rem;
  }
}
@media (min-width: 64em) {
  .card--overlay {
    padding: var(--space-8);
    min-height: 32rem;   /* 512px = Relume lg:min-h-[32rem] */
  }
}

.card--overlay .card__media-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.card--overlay .card__media-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card--overlay .card__media-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);    /* Relume bg-black/50 */
}

.card--overlay .card__overlay-content {
  position: relative;
  z-index: 1;
  margin-top: auto;       /* Content pinnt unten */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--text-on-dark);
}

.card--overlay h2,
.card--overlay h3,
.card--overlay .card__title {
  color: var(--text-on-dark);
}

/* -------------------------------------------------------------------------
   CTA-Card — wiederverwendbarer Dark-CTA-Block (Relume CTA53)
   -------------------------------------------------------------------------
   Solide Dark-Flaeche; mit .cta-card--has-image zusaetzlich BG-Image +
   Dark-Overlay (rgba(0,0,0,.5), identisch zu .card--overlay).
   Padding 2 / 3 / 4 rem (mobile / tablet / desktop) = Relume .cta53_card.
   Content zentriert, auf lesbare Zeilenlaenge (48rem) begrenzt.
   ------------------------------------------------------------------------- */
.cta-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Block- und inline-Padding getrennt — viel mehr Luft oben/unten als an
     den Seiten, damit das BG-Bild atmen kann. Block-Werte gestaffelt:
     mobile + tablet = viel mehr (128 px), desktop = etwas mehr (96 px). */
  padding: var(--space-10) var(--space-6);   /* mobile:  128 / 32 */
  background-color: var(--color-dark);     /* identisch zum Footer-Hintergrund (#111318) */
  color: var(--text-on-dark);
  border-radius: var(--radius-card);       /* 8px */
}
@media (min-width: 48em) {
  .cta-card { padding: var(--space-10) var(--space-7); } /* tablet:  128 / 48 */
}
@media (min-width: 64em) {
  .cta-card { padding: var(--space-9) var(--space-8); }  /* desktop:  96 / 64 */
}

/* BG-Image-Layer + Dark-Overlay (nur bei .cta-card--has-image) */
.cta-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-card__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--opacity-black-50);     /* rgba(0,0,0,.5) — wie .card--overlay */
}

/* Content sitzt ueber dem BG */
.cta-card__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-small);       /* 48rem — lesbare Zeilenlaenge */
}
.cta-card__content > * { margin-inline: auto; }              /* Blocks zentrieren (z.B. .lede max-width 50ch) */
.cta-card__content > * + * { margin-top: var(--space-4); }   /* 16px Basis-Rhythmus */

.cta-card__eyebrow { color: var(--accent); }                 /* Gold-Eyebrow auf Dunkel */

.cta-card :is(h1, h2, h3),
.cta-card__title { color: var(--text-on-dark); }

/* text-align explizit (nicht nur vererbt von .cta-card) — sonst kippt die
   Zentrierung, sobald irgendeine p-/.lede-/.prose-Regel dazwischenfunkt.
   Microcopy hat aus demselben Grund unten ebenfalls ein explizites center. */
.cta-card__text { color: var(--text-on-dark); text-align: center; }

/* Buttons zentriert; mehr Luft darueber (Source-Order schlaegt Basis-Rhythmus) */
.cta-card__actions {
  margin-top: var(--space-6);              /* 32px ueber den Buttons */
  justify-content: center;
}

/* -------------------------------------------------------------------------
   Badge / Tag — kleines Label, leicht abgerundet (6 px)
   ------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);    /*  4 / 12 px — etwas Luft */
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  background-color: var(--color-cream-deep);
  color: var(--text-primary);
  border: 0;
  border-radius: var(--radius-button);        /* 6 px */
  white-space: nowrap;
}

.badge--outline {
  background: transparent;
  border: 1px solid var(--border);
}

.badge--gold {
  background-color: var(--accent);
  color: var(--color-white);
}

/* -------------------------------------------------------------------------
   Link-with-Arrow — Inline-Pattern (auch via .btn--link nutzbar)
   -------------------------------------------------------------------------
   Standalone-Variante für inline Card-CTAs ohne Button-Charakter.
   ------------------------------------------------------------------------- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}

.link-arrow:hover {
  color: var(--accent);
}

.link-arrow__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow:hover .link-arrow__icon {
  transform: translateX(0.25em);
}

/* -------------------------------------------------------------------------
   Form System — Aman/Bottega-Look
   Cream-Card als Container, weisse Inputs mit subtler Border, gold-Akzent
   bei Focus, smooth Transitions. Custom-Designs fuer Radio/Checkbox/Select/
   File. Klassen: .form-card / .form-field / .form-label / .form-input /
   .form-textarea / .form-select / .form-check / .form-radio /
   .form-fieldset / .form-radio-group / .form-file / .form-grid /
   .form-microcopy.
   ------------------------------------------------------------------------- */

/* ---------- Card-Wrapper ---------- */
.form-card {
  padding: var(--space-7);
  background: var(--color-card, #FDF9F1);
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (max-width: 47.99em) {
  .form-card { padding: var(--space-6); }
}

/* ---------- Layout-Helpers ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 48em) {
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
/* Pflichtfeld-Marker — dezentes Gold-Sternchen direkt am Label. aria-hidden,
   weil das required-Attribut den Status fuer Screenreader schon transportiert. */
.form-required {
  color: var(--accent);
  margin-left: 0.15em;
}

.form-microcopy {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
}

/* ---------- Form-Hint + Form-Counter + Form-Error (inline-Feedback) ---------- */
/* Hint: kleiner grauer Hinweistext unter dem Feld (z.B. Phone-Format).
   Counter: rechtsbündig in der Label-Zeile (Char-Count, File-Count).
   Error: rot-akzentuierter Inline-Fehler unter dem Feld. Nur sichtbar
   wenn Inhalt da ist (data-form-error wird leer initialisiert, JS
   befüllt → CSS rendert dann den Block). */
.form-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.form-counter {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.form-counter.is-warn { color: #b8453d; }
.form-hint {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: 0;
}
.form-error {
  display: none;
  font-size: var(--text-xs);
  color: #b8453d;
  margin: 0;
}
.form-error:not(:empty) {
  display: block;
}

/* ---------- Text, Email, Tel, Number, URL, Search, Password ---------- */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  min-height: 3rem;                            /* 48 px Touch-Target */
  padding: var(--space-3) var(--space-4);      /* 12 / 16 */
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: #fff;
  border: 1px solid var(--color-border, rgba(0,0,0,.12));
  border-radius: var(--radius-button);          /* 6 px */
  transition: border-color var(--duration-base, 200ms) ease,
              box-shadow   var(--duration-base, 200ms) ease,
              background-color var(--duration-base, 200ms) ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: var(--color-accent, #D9BE77);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent, #D9BE77);
  box-shadow: 0 0 0 3px rgba(217, 190, 119, 0.18);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background: var(--opacity-black-5, rgba(0,0,0,.04));
  color: var(--text-secondary);
  cursor: not-allowed;
}

.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"],
.form-select[aria-invalid="true"] {
  border-color: #b8453d;
}

/* ---------- Textarea ---------- */
.form-textarea {
  min-height: 9rem;                            /* 144 px */
  resize: vertical;
  font-family: var(--font-body);
}

/* ---------- Select — Custom Chevron ---------- */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 14px;
  cursor: pointer;
}

/* ---------- Checkbox & Radio — Custom Indicators ---------- */
.form-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--text-primary);
  user-select: none;
}
.form-check--block {
  display: flex;
  align-items: flex-start;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.form-check__input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border, rgba(0,0,0,.2));
  background: #fff;
  cursor: pointer;
  transition: border-color var(--duration-base, 200ms) ease,
              background-color var(--duration-base, 200ms) ease,
              box-shadow var(--duration-base, 200ms) ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form-check--block .form-check__input { margin-top: 0.125rem; }

.form-check__input[type="radio"]    { border-radius: 50%; }
.form-check__input[type="checkbox"] { border-radius: 4px; }

.form-check__input:hover { border-color: var(--color-accent, #D9BE77); }

.form-check__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 190, 119, 0.25);
  border-color: var(--color-accent, #D9BE77);
}

/* Checked-State: Radio = innerer Dot, Checkbox = weisses Haekchen */
.form-check__input[type="radio"]:checked {
  border-color: var(--color-accent, #D9BE77);
  background: #fff;
}
.form-check__input[type="radio"]:checked::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-accent, #D9BE77);
}

.form-check__input[type="checkbox"]:checked {
  background: var(--color-accent, #D9BE77);
  border-color: var(--color-accent, #D9BE77);
}
.form-check__input[type="checkbox"]:checked::after {
  content: "";
  width: 0.6em;
  height: 0.35em;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

/* Body-Text-Link innerhalb einer Checkbox-Zeile (z.B. „Datenschutz") */
.form-check--block a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent, #D9BE77);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-base, 200ms) ease;
}
.form-check--block a:hover { color: var(--color-accent, #D9BE77); }

/* ---------- Fieldset / Radio-Group ---------- */
.form-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.form-fieldset > .form-label { margin-bottom: var(--space-1); }
.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

/* Sprachen-Multi-Checkbox mit Custom-Input fuer „Weitere".
   Input nur sichtbar wenn die „Weitere"-Checkbox gecheckt ist (CSS :has). */
.form-langs__custom {
  display: none;
  margin-top: var(--space-2);
}
.form-langs:has(.form-langs__other .form-check__input:checked) .form-langs__custom {
  display: block;
}

/* ---------- Multi-Select-Dropdown (Combobox) ----------
   Einklappbares Mehrfachauswahl-Feld. Trigger nutzt .form-select (Rahmen +
   Chevron); Panel liegt absolut darunter mit scrollbarer Checkbox-Liste. */
.form-multiselect { position: relative; }
.form-multiselect__trigger {
  display: flex;
  align-items: center;
  text-align: left;
}
.form-multiselect__value {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Platzhalter-Zustand (nichts gewaehlt) — wie Input-Placeholder gedimmt. */
.form-multiselect:not(.has-selection) .form-multiselect__value {
  color: var(--text-secondary);
  opacity: 0.6;
}
.form-multiselect__trigger[aria-expanded="true"] {
  border-color: var(--color-accent, #D9BE77);
  box-shadow: 0 0 0 3px rgba(217, 190, 119, 0.18);
}
.form-multiselect__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 16rem;
  overflow-y: auto;
  padding: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-border, rgba(0,0,0,.12));
  border-radius: var(--radius-button);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.form-multiselect__panel[hidden] { display: none; }
.form-multiselect__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.form-multiselect__option {
  display: flex;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-button);
  cursor: pointer;
}
.form-multiselect__option:hover {
  background: var(--opacity-black-5, rgba(0,0,0,.04));
}

/* ---------- File-Upload — Drop-Zone-Style ---------- */
.form-file {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  min-height: 9rem;
  background: #fff;
  border: 1.5px dashed var(--color-border, rgba(0,0,0,.2));
  border-radius: var(--radius-card);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-base, 200ms) ease,
              background-color var(--duration-base, 200ms) ease;
}
.form-file:hover,
.form-file:focus-within {
  border-color: var(--color-accent, #D9BE77);
  background: rgba(217, 190, 119, 0.04);
}
.form-file__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.form-file__icon {
  color: var(--color-accent, #D9BE77);
  display: inline-flex;
}
.form-file__primary {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin: 0;
}
.form-file__secondary {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}
.form-file__filename {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  margin: 0;
}

/* Ausgewählte Dateien — Liste unter dem Upload-Feld (Name · Größe · Entfernen).
   Wird von setupFileList() befüllt; [hidden] solange nichts gewählt ist. */
.form-file__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-file__list[hidden] { display: none; }
.form-file__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: #fff;
  border: 1px solid var(--color-border, rgba(0,0,0,.12));
  border-radius: var(--radius-button);
  font-size: var(--text-sm);
}
.form-file__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.form-file__size {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.form-file__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.form-file__remove:hover,
.form-file__remove:focus-visible {
  background: rgba(0, 0, 0, .06);
  color: var(--color-wine, #7a2e2e);
}

/* -------------------------------------------------------------------------
   Icon-Feature — Service-/Pillar-Icons (Layout526, Layout31)
   ------------------------------------------------------------------------- */

.icon-feature {
  width: 3rem;                 /* 48px = Relume size-12 Standard */
  height: 3rem;
  flex-shrink: 0;
  margin-bottom: var(--space-3);
  color: var(--accent);
}
@media (min-width: 48em) {
  .icon-feature { margin-bottom: var(--space-4); }
}

.icon-feature--inline {
  width: 1.5rem;
  height: 1.5rem;              /* 24px = size-6 Inline */
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Step-Number — große Display-Zahlen (Process-Sections)
   -------------------------------------------------------------------------
   Relume: text-[6rem] md:text-[14rem] (96px → 224px)
   ------------------------------------------------------------------------- */

.step-number {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 6rem;
  line-height: 1;
  color: var(--accent);
  letter-spacing: var(--tracking-tight);
}
@media (min-width: 48em) {
  .step-number { font-size: 9rem; }
}
@media (min-width: 64em) {
  .step-number { font-size: 12rem; }
}

/* ==========================================================================
   Site-Header — Sticky mit Smart-Hide-on-Scroll
   --------------------------------------------------------------------------
   Verhalten:
     - Default: transparent, position: fixed top
     - .is-scrolled (ab 50 px): Cream-BG + Hairline-Border-Bottom
     - .is-hidden (Scroll-Down nach > 100 px): translateY(-100%)
     - Scroll-Up: kommt zurueck (translateY(0))
   ========================================================================== */

:root {
  --header-height: 4.5rem;   /* 72 px — Desktop */
  --apply-bar-h: 2.75rem;    /* 44 px — Bewerben-Banner (Startseite) */
}
@media (max-width: 47.9375em) {
  :root { --header-height: 4rem; }   /* 64 px — Mobile */
}

/* ==========================================================================
   Bewerben-Banner — schmale Zeile ganz oben auf der Startseite, ueber dem Hero.
   Normaler Fluss (kein sticky/fixed) → scrollt mit weg. Standardmaessig
   versteckt; `has-apply-bar` auf <html> (Inline-Check in home.php) macht es
   sichtbar UND schiebt den fixen Header um die Banner-Hoehe nach unten. Beim
   Scrollen laesst JS (initHeaderScroll) den Header dem Banner nach oben folgen.
   ========================================================================== */
.apply-bar {
  display: none;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
/* Sichtbar-Schaltung + Einfuegen in das Fixed-Header-Layout:
   `body` reserviert per padding-top die Header-Hoehe (fuer den fixen Header);
   der Hero zieht sich mit negativem margin-top wieder darunter (full-bleed).
   Mit Banner: Padding um Banner-Hoehe erweitern, Banner per negativem margin an
   den ganz oberen Rand ziehen, Hero-Negativ-Margin neutralisieren (er startet
   dann unter dem Banner), und den fixen Header um die Banner-Hoehe absenken. */
.has-apply-bar body {
  padding-top: calc(var(--header-height) + var(--apply-bar-h));
}
.has-apply-bar .apply-bar {
  display: block;
  margin-top: calc(-1 * (var(--header-height) + var(--apply-bar-h)));
}
.has-apply-bar .home-hero { margin-top: 0; }
.has-apply-bar .site-header { top: var(--apply-bar-h); }

.apply-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--apply-bar-h);
  padding-block: var(--space-2);
  padding-inline: var(--section-inline-padding);
}
.apply-bar__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent);
  line-height: 0;
}
/* Text explizit schwarz (schlaegt geerbte Farbe), CTA = klassischer Gold-
   Textlink OHNE Underline (die globale `p a:not(.btn)`-Underline abschalten). */
.apply-bar .apply-bar__text {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: left;
}
.apply-bar .apply-bar__cta {
  color: var(--accent);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-default);
}
.apply-bar .apply-bar__cta:hover,
.apply-bar .apply-bar__cta:focus-visible {
  color: var(--accent-active);
  text-decoration: none;
}
/* X = derselbe Close-Button wie im Cookie-Settings-Modal:
   grau default, bei Hover schwarz + dezenter grauer Hintergrund. */
.apply-bar__close {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-button);
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 0;
  transition: color 160ms ease, background-color 160ms ease;
}
.apply-bar__close:hover,
.apply-bar__close:focus-visible {
  color: var(--text-primary);
  background-color: var(--bg-subtle);
}
@media (max-width: 47.9375em) {
  .apply-bar__inner { gap: var(--space-2); }
  .apply-bar .apply-bar__text { font-size: var(--text-xs); }
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-fixed);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: transform var(--duration-base) var(--ease-default),
              background-color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
}

.site-header.is-scrolled {
  background-color: var(--bg-primary);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Mobile-Nav-Overlay-Fix: backdrop-filter auf dem Header macht ihn zum
   containing block fuer position:fixed-Kinder (MDN). Das .site-header__menu
   wuerde dann nur den Header-Bereich abdecken (~64 px Hoehe) statt den
   Viewport. Bei offener Mobile-Nav deshalb den Filter wegnehmen — der
   solide Cream-BG bleibt erhalten, und das Overlay-Menu kann sich wieder
   am Viewport orientieren. */
body.is-nav-open .site-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;       /* Logo | Nav | Actions */
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-height);
  padding-inline: var(--section-inline-padding);
  width: 100%;
}

/* Logo links — max-height fuer feste Header-Hoehe */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.site-header__logo img {
  display: block;
  height: 2.5rem;      /* Mobile, am Seitenanfang (gross) */
  width: auto;
  max-width: 12rem;
  object-fit: contain;
  /* Logo schrumpft beim Runterscrollen synchron zum Header-BG-Wechsel
     (gleiche duration/easing wie .site-header). Beim Hochscrollen an den
     Seitenanfang waechst es wieder. Header-Hoehe bleibt konstant (min-height
     4.5rem > Logo), nur das Logo skaliert. */
  transition: height var(--duration-base) var(--ease-default);
}
.site-header.is-scrolled .site-header__logo img {
  height: 2rem;        /* Mobile, gescrollt (kompakt) */
}
@media (min-width: 48em) {
  .site-header__logo img { height: 3rem; }                              /* Desktop, am Seitenanfang */
  .site-header.is-scrolled .site-header__logo img { height: 2.25rem; }  /* Desktop, gescrollt */
}
.site-header__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  color: inherit;
}

/* Menue-Container — Desktop: containt Nav (Mitte) + Actions (Rechts).
   Auf Desktop wirkt der Container "durchsichtig", das Grid-Layout
   verteilt Nav (mitte) und Actions (rechts) automatisch.
   Mobile: voller Overlay (siehe Media-Query unten). */
.site-header__menu {
  display: contents;                          /* Children werden direkt in Grid platziert */
}

/* Nav-Wrapper — horizontal zentriert via Grid-Cell + justify-self */
.site-header__nav {
  grid-column: 2;
  justify-self: center;
}

/* Actions-Wrapper — Sprache + CTA Side-by-Side rechts */
.site-header__actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: end;
}

/* Nav-Liste */
.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dropdown-Trigger (Button-Look wie Nav-Link) */
.site-header__nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: var(--header-link-color, var(--text-primary));
  transition: color var(--duration-base) var(--ease-default);
}

.site-header__chevron {
  transition: transform var(--duration-base) var(--ease-default);
  display: inline-block;
}

.site-header__nav-item-dropdown[data-dropdown-open] .site-header__chevron {
  transform: rotate(180deg);
}

/* Dropdown-Wrapper (Item Container) */
.site-header__nav-item-dropdown {
  position: relative;
}

/* Dropdown-Card */
.site-header__dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 18rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-default),
              visibility var(--duration-base) var(--ease-default);
  z-index: var(--z-dropdown);
}

.site-header__nav-item-dropdown[data-dropdown-open] .site-header__dropdown {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-header__dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.site-header__dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-button);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}

.site-header__dropdown-link .site-header__arrow {
  opacity: 0;
  transform: translateX(-0.25em);
  transition: opacity var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-default);
}

.site-header__dropdown-link:hover,
.site-header__dropdown-link.is-active {
  background-color: var(--color-gold-lighter);
  color: var(--accent);
}

.site-header__dropdown-link:hover .site-header__arrow,
.site-header__dropdown-link.is-active .site-header__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Kontakt-CTA im Header — kleiner, Gold-Primary */
.site-header__cta {
  margin-left: var(--space-2);
  flex-shrink: 0;
  /* color mit in die Transition (die .btn-Basis laesst color bewusst weg) —
     damit der Kontakt-Button beim Scroll-Farbwechsel auf Home mitanimiert
     statt zu springen. Gleiche duration/easing wie Header-BG + Nav-Links. */
  transition: transform var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default),
              background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}

.site-header__nav-link {
  display: inline-block;
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  color: var(--header-link-color, var(--text-primary));
  text-decoration: none;
  position: relative;
  transition: color var(--duration-base) var(--ease-default);
}

.site-header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-base) var(--ease-default);
}

.site-header__nav-link:hover,
.site-header__nav-link.is-active {
  color: var(--accent);
}

.site-header__nav-link:hover::after,
.site-header__nav-link.is-active::after {
  transform: scaleX(1);
}

/* Home: Header-Nav-Text am Seitenanfang weiss (lesbar ueber dem dunklen
   Hero), beim Runterscrollen -> Default-Dunkel. Per CSS-Variable, damit
   Hover/Active (--accent) weiter greifen. Nutzt die bestehende color-
   Transition von Link + Trigger -> exakt dieselbe Animation wie der
   Header-BG-Wechsel (.is-scrolled). Nur auf der Startseite (body.page-home). */
body.page-home .site-header:not(.is-scrolled) {
  --header-link-color: var(--text-on-dark);
}

/* Home: Sprachumschalter + Kontakt-Button (.btn--secondary) am Seitenanfang
   auf "on-dark" (weisser Text + 10% Weiss + heller Inset-Rahmen), damit sie
   ueber dem dunklen Hero sichtbar sind. Beim Scrollen (.is-scrolled) zurueck
   auf den Default — animiert ueber die bestehende color/bg-Transition. */
body.page-home .site-header:not(.is-scrolled) .site-header__lang-trigger {
  color: var(--text-on-dark);
  background-color: var(--opacity-white-10);
}
body.page-home .site-header:not(.is-scrolled) .btn--secondary.site-header__cta {
  background-color: var(--opacity-white-10);
  color: var(--color-white);
  box-shadow:
    0 1px 2px 0 var(--opacity-black-5),
    inset 0 -2px 1px 0 var(--opacity-black-5),
    inset 0 0 0 1px var(--opacity-white-10);
}
/* Burger/X am Seitenanfang weiss (ueber dem Hero). Beim Oeffnen des Menues
   bekommt der Header automatisch .is-scrolled (heller Overlay-BG) -> X wird
   dunkel auf hell. Animiert via der unten ergaenzten bg-Transition. */
body.page-home .site-header:not(.is-scrolled) .site-header__burger-line {
  background-color: var(--text-on-dark);
}

/* Sprachumschalter — kompakter Dropdown
   Zeigt nur die aktuell aktive Sprache als Pill-Trigger mit Chevron. Andere
   Sprachen erscheinen in einem rechts-aligned Dropdown. Hover auf Desktop,
   Click auf Mobile (gleicher data-dropdown-Mechanismus wie Informationen-Nav). */
.site-header__lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.site-header__lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--text-primary);
  border-radius: var(--radius-button);   /* wie Secondary-Button, nicht Pille */
  background-color: var(--opacity-black-5);
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}

.site-header__lang-trigger:hover {
  background-color: var(--opacity-black-10);
}

.site-header__lang[data-dropdown-open] .site-header__lang-trigger .site-header__chevron {
  transform: rotate(180deg);
}

.site-header__lang-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 4rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 0.25rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-default),
              visibility var(--duration-base) var(--ease-default);
  z-index: var(--z-dropdown);
}

.site-header__lang[data-dropdown-open] .site-header__lang-dropdown {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
}

.site-header__lang-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.375rem 0.75rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-button);
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}

.site-header__lang-dropdown-link:hover {
  background-color: var(--color-gold-lighter);
  color: var(--accent);
}

/* Sprach-Flaggen (Trigger + Dropdown) — kleine Inline-SVGs links vom Code.
   Breite UND Hoehe explizit (5:3), da height:auto bei Inline-SVG ohne
   Intrinsic-Groesse als 0 berechnet wird. */
.lang-flag {
  width: 1.2em;
  height: 0.72em;
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--opacity-black-10);
}

/* Mobile-Top-Controls (Sprache + Burger) — Wrapper, nur Mobile sichtbar */
.site-header__mobile-controls {
  display: none;
  align-items: center;
  gap: var(--space-3);
}

/* Sprache-Variante "mobile" wird auf Desktop versteckt; "desktop" auf Mobile */
.site-header__lang--mobile { display: none; }

/* Burger-Button — Mobile-only */
.site-header__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.site-header__burger-line {
  display: block;
  width: 1.5rem;
  height: 1px;
  background-color: var(--text-primary);
  transition: transform var(--duration-base) var(--ease-default),
              opacity var(--duration-fast) var(--ease-default),
              background-color var(--duration-base) var(--ease-default);
}

/* Burger -> X-Animation wenn Menue offen */
[data-nav-toggle][aria-expanded="true"] .site-header__burger-line:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
[data-nav-toggle][aria-expanded="true"] .site-header__burger-line:nth-child(2) {
  opacity: 0;
}
[data-nav-toggle][aria-expanded="true"] .site-header__burger-line:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobile + Tablet-Layout: Burger zeigen, Menue als Overlay
   Greift ab Viewport <= 1499 px. Erst ab 1500 px volle Desktop-Nav.
   -------------------------------------------------------------------------- */
@media (max-width: 93.6875em) {   /* 1499px — Hamburger bis einschl. 1499px, Desktop-Nav ab 1500px (zu viele Top-Level-Links fuer schmalere Breiten) */

  .site-header__inner {
    grid-template-columns: auto 1fr;          /* Logo | [Lang + Burger] */
  }

  /* Mobile-Top-Controls (Sprache + Burger) sichtbar machen */
  .site-header__mobile-controls {
    display: flex;
    justify-self: end;
    grid-column: 2;
  }

  /* Sprache-Mobile sichtbar, Sprache-Desktop ausblenden */
  .site-header__lang--mobile { display: inline-flex; }
  .site-header__lang--desktop { display: none; }

  .site-header__burger {
    display: flex;
  }

  .site-header__menu {
    display: flex;                            /* Overlay-Layout */
    position: fixed;
    inset: var(--header-height) 0 0 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-6);
    padding: var(--space-7) var(--section-inline-padding);
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border);
    overflow-y: auto;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--duration-base) var(--ease-default),
                opacity var(--duration-base) var(--ease-default);
  }

  /* Nav + Actions im Mobile-Overlay nicht mehr per Grid platzieren */
  .site-header__nav,
  .site-header__actions {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }

  .site-header__actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: auto;
    gap: var(--space-4);
  }

  .site-header__menu.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;                                /* Spacing kommt durch Item-Padding */
    width: 100%;
  }

  .site-header__nav-list > li {
    border-bottom: 1px solid var(--border);
  }
  .site-header__nav-list > li:last-child {
    border-bottom: 0;
  }

  .site-header__nav-link {
    display: block;
    width: 100%;
    font-size: var(--text-lg);             /* 20 px statt 40 px — Premium-Mobile */
    padding: var(--space-4) 0;             /* 16 px vertical = 56 px Touch-Target */
  }

  .site-header__nav-link::after { display: none; }   /* Mobile: kein Underline */

  /* Mobile-Dropdown: als Inline-Accordion statt Card-Float */
  .site-header__nav-item-dropdown {
    width: 100%;
  }

  .site-header__nav-dropdown-trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    text-align: left;
    font-size: var(--text-lg);             /* same wie nav-links */
    padding: var(--space-4) 0;
  }

  .site-header__dropdown {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 var(--space-4);
    margin-top: var(--space-3);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-base) var(--ease-default);
  }

  .site-header__nav-item-dropdown[data-dropdown-open] .site-header__dropdown {
    max-height: 30rem;
    transform: none;
  }

  .site-header__dropdown-link {
    font-size: var(--text-base);           /* 16 px — Sub-Item kleiner */
    padding: var(--space-3) 0;
    border-radius: 0;
  }

  .site-header__dropdown-link:hover,
  .site-header__dropdown-link.is-active {
    background-color: transparent;
  }

  .site-header__dropdown-link .site-header__arrow {
    opacity: 1;
    transform: none;
  }

  .site-header__lang {
    align-self: flex-start;
  }

  .site-header__cta {
    width: 100%;
    /* Kein margin-top: der Abstand zwischen den beiden Buttons kommt allein
       aus .site-header__actions { gap }. Mit margin-top addierte er sich
       (gap + margin = doppelt), wodurch die Luecke zu gross war. */
    margin-left: 0;
    justify-content: center;
    padding-block: var(--space-4);
    font-size: var(--text-base);
  }
}

/* Body bekommt Padding-Top damit Content nicht unter Header verschwindet */
body { padding-top: var(--header-height); }

/* Smooth-Scroll fuer Anchor-Links beruecksichtigt Header-Hoehe */
html { scroll-padding-top: var(--header-height); }

/* Body-Scroll-Lock wenn Mobile-Nav offen */
body.is-nav-open { overflow: hidden; }

/* ==========================================================================
   Site-Footer — Dark, 4-Column-Layout + Local-Hubs + Bottom-Bar
   ========================================================================== */

.site-footer {
  background-color: var(--color-dark);
  color: var(--color-cream-lighter);
  padding-inline: var(--section-inline-padding);
  padding-block: var(--space-9) var(--space-6);
  margin-top: var(--space-9);
}

.site-footer__inner {
  max-width: var(--container-large);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* --- Columns ---------------------------------------------------------- */
.site-footer__columns {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}

@media (min-width: 36em) {     /* 576 px: 2 Columns */
  .site-footer__columns {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
  }
}

@media (min-width: 64em) {     /* 1024 px: 1 + 3 fuer Brand wider */
  .site-footer__columns {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-8);
  }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- Brand-Column ----------------------------------------------------- */
.site-footer__col--brand {
  gap: var(--space-4);
  max-width: 22rem;
}

.site-footer__brand-link {
  display: inline-block;
  width: fit-content;
}

.site-footer__logo {
  display: block;
  height: 10rem;
  width: auto;
  max-width: 10rem;
  object-fit: contain;
}

.site-footer__tagline {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-cream-lighter);
  margin: 0;
}

/* --- Headings (Col-Titel) --------------------------------------------- */
.site-footer__heading {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 var(--space-2);
}

/* --- Nav-Listen pro Column ------------------------------------------- */
.site-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__link {
  color: var(--color-cream-lighter);
  text-decoration: none;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  display: inline-block;
  /* Touch-Target-Vergroesserung (WCAG 2.5.5 best practice ≥24 px Hoehe).
     Inline-Text-Link mit kleinem vertikalen Padding — visuell identisch,
     aber 24+ px touchable. */
  padding-block: var(--space-1);
  transition: color var(--duration-base) var(--ease-default);
}

.site-footer__link:hover {
  color: var(--color-gold);
}

.site-footer__muted {
  font-size: var(--text-sm);
  color: var(--color-cream-dark);
}

/* --- Social-Media-Row ------------------------------------------------- */
.site-footer__social {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-cream-lighter);
  background-color: var(--opacity-white-10);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}

.site-footer__social-link svg {
  width: 1.125rem;
  height: 1.125rem;
}

.site-footer__social-link:hover {
  background-color: var(--color-gold);
  color: var(--color-dark);
}

/* --- "Verfügbar in" Row (volle Breite unter den 4 Spalten) ----------- */
/* Heading drüber als eigene Zeile, dann 12 Standort-Links horizontal in
   einer flex-wrap-Reihe. Keine optische Trennung zur 4-Col-Row drüber
   (User-Wunsch: kein Divider). */
.site-footer__locations {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.site-footer__heading--inline {
  margin: 0;
}

.site-footer__location-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.site-footer__location-list a {
  white-space: nowrap;
}

/* --- Divider --------------------------------------------------------- */
.site-footer__divider {
  height: 1px;
  background-color: var(--opacity-white-15);
  border: 0;
  margin: 0;
  width: 100%;
}

/* --- Bottom-Bar ------------------------------------------------------- */
.site-footer__bottom {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
  padding-top: var(--space-2);
}

@media (min-width: 48em) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
  }
}

.site-footer__copy {
  font-size: var(--text-sm);
  color: var(--color-cream-dark);
  margin: 0;
}

.site-footer__legal {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
}

.site-footer__legal-link {
  font-size: var(--text-sm);
  color: var(--color-cream-dark);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--duration-base) var(--ease-default);
}

.site-footer__legal-link:hover {
  color: var(--color-gold);
}

.site-footer__cookie-trigger {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--opacity-white-15);
  transition: color var(--duration-base) var(--ease-default),
              text-decoration-color var(--duration-base) var(--ease-default);
}

.site-footer__cookie-trigger:hover {
  text-decoration-color: var(--color-gold);
}

/* =========================================================================
   HOME — Seiten-spezifische Sektionen (Stage 3)
   ========================================================================= */

/* -------------------------------------------------------------------------
   Home-Hero — Full-Bleed-Bild hinter dem transparenten Header.
   H1 oben-links, Lead + Buttons unten-rechts (asymmetrisch-editorial).
   Home-only; bewusst KEIN Snippet (Home-Hero != cta-card).
   ------------------------------------------------------------------------- */
.home-hero {
  position: relative;
  margin-top: calc(-1 * var(--header-height));   /* hinter den transparenten Header ziehen */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  padding-inline: var(--section-inline-padding); /* 5% — wie .section */
  color: var(--text-on-dark);
  background-color: var(--color-dark);           /* Fallback bis Bild laedt */
}

.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-hero__bg::after {                          /* Scrim: Lesbarkeit (WCAG AA) + Tiefe */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 38%,
    rgba(0, 0, 0, 0.30) 62%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

.home-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-large);             /* zentrierter Container — wie .container */
  margin-inline: auto;
  padding-top: calc(var(--header-height) + var(--space-7));
  padding-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;                /* H1 oben, Lead unten */
  gap: var(--space-8);
}

.home-hero__title {
  align-self: flex-start;
  max-width: 18ch;
  color: var(--text-on-dark);
}

.home-hero__lead {
  align-self: flex-end;
  max-width: 56ch;
}
/* Text-Block bekommt eigene engere max-width für Lesbarkeit. Buttons-Cluster
   nutzt die volle 56ch des Lead-Wrappers, damit beide Buttons ab 32em
   nebeneinander passen statt zu wrappen. */
.home-hero__text  { color: var(--text-on-dark); max-width: 42ch; }
/* Globales `p { color: var(--text-primary) }` setzt explizit Schwarz auf
   Paragraph-Tags — würde durch Inheritance nicht überschrieben. Hier
   explizit auf weiß zwingen. */
.home-hero__text p { color: var(--text-on-dark); }
.home-hero__actions { margin-top: var(--space-5); }

/* Mobile: linksbuendig stapeln */
@media (max-width: 47.99em) {
  .home-hero__title { max-width: 100%; }
  .home-hero__lead  { align-self: flex-start; max-width: 100%; }
}

/* -------------------------------------------------------------------------
   Entry-/Reveal-Initial-States (Anti-Flash)
   -------------------------------------------------------------------------
   Greifen nur wenn JS aktiv ist (.js auf <html>, gesetzt durch Inline-Script
   in head.php VOR dem CSS-Load). Bei prefers-reduced-motion oder ohne JS
   bleibt alles direkt sichtbar — progressive enhancement.

   - .home-hero[data-anim]: Hero-Entry-Timeline (Bild → Title → Lead → Buttons).
   - [data-reveal] / [data-reveal-stagger] > *: Generische Reveal-on-Scroll.
   ------------------------------------------------------------------------- */
.js .home-hero[data-anim] .home-hero__bg img,
.js .home-hero[data-anim] .home-hero__title,
.js .home-hero[data-anim] .home-hero__text,
.js .home-hero[data-anim] .home-hero__actions {
  opacity: 0;
}

.js [data-reveal],
.js [data-reveal-stagger]:not([data-reveal-children]) > *,
.js [data-reveal-stagger][data-reveal-children] .js-reveal-target {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .js .home-hero[data-anim] .home-hero__bg img,
  .js .home-hero[data-anim] .home-hero__title,
  .js .home-hero[data-anim] .home-hero__text,
  .js .home-hero[data-anim] .home-hero__actions,
  .js [data-reveal],
  .js [data-reveal-stagger]:not([data-reveal-children]) > *,
  .js [data-reveal-stagger][data-reveal-children] .js-reveal-target {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* -------------------------------------------------------------------------
   Trust-Pillars — nummerierte Editorial-Liste (Home). Grosse Gold-Ziffer,
   Eyebrow + H2 + Text, Hairline-Divider zwischen den Reihen.
   ------------------------------------------------------------------------- */
.trust-pillars { list-style: none; margin: 0; padding: 0; }
.trust-pillar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-7);
  border-top: 1px solid var(--border);
}
.trust-pillar:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 48em) {
  .trust-pillar {
    grid-template-columns: minmax(5rem, 9rem) 1fr;
    gap: var(--space-7);
    align-items: start;
  }
}
.trust-pillar__num {
  font-family: var(--font-display);          /* Righteous */
  font-size: var(--text-6xl);
  line-height: 1;
  color: var(--accent);                       /* Gold */
}
.trust-pillar__title { margin: var(--space-2) 0 var(--space-3); }
.trust-pillar__action { margin-top: var(--space-5); }
.trust-pillar__text {
  color: var(--text-secondary);
  max-width: 44rem;
  margin: 0;
}

/* -------------------------------------------------------------------------
   Process-Tabs — 3-Schritte-Ablauf als barrierefreie Tabs.
   Links Tab-Menue (Nummer + Titel + Text), rechts wechselndes Bild.
   ------------------------------------------------------------------------- */
.process-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 64em) {
  .process-tabs {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    align-items: stretch;
  }
}

.process-tabs__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}

.process-tabs__tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  text-align: left;
  padding: var(--space-5);
  font-family: inherit;
  color: var(--text-primary);
  background-color: transparent;
  border: 0;
  border-left: 2px solid var(--border);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--duration-base) var(--ease-default),
              background-color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
}
.process-tabs__tab:hover { opacity: 0.8; }
.process-tabs__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.process-tabs__tab[aria-selected="true"] {
  opacity: 1;
  border-left-color: var(--accent);
  background-color: var(--bg-elevated);
}

.process-tabs__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--accent);
}
.process-tabs__tab-body { display: flex; flex-direction: column; gap: var(--space-2); }
.process-tabs__tab-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
}
.process-tabs__tab-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-body);
}

/* Panels uebereinander stapeln (Grid-Stack) — sonst aendert sich die
   Container-Hoehe beim Tab-Wechsel je nach intrinsischer Bildhoehe und
   das Layout drumherum springt. */
.process-tabs__panels {
  display: grid;
  grid-template-columns: 1fr;
}
.process-tabs__panel {
  grid-area: 1 / 1;
}
.process-tabs__panel[hidden] {
  /* reset.css zwingt [hidden] mit !important auf display:none — hier muss
     mit !important kontert werden, damit das versteckte Panel weiter Platz
     beansprucht (max-Hoehe = stabiler Container, kein Tab-Sprung beim
     Wechseln). */
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
}

.process-tabs__panel img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 3;
}
@media (min-width: 64em) {
  .process-tabs__panels,
  .process-tabs__panel,
  .process-tabs__panel img { height: 100%; }
  .process-tabs__panel img { aspect-ratio: auto; min-height: 24rem; }
}

/* -------------------------------------------------------------------------
   Editorial-Split — Zwei-Spalten-Block (Bild | Text). Mobile: stacked.
   ------------------------------------------------------------------------- */
.editorial-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 48em) {
  .editorial-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

.editorial-split--reverse .editorial-split__media { order: 2; }   /* nur ab Tablet wirksam, mobil ohnehin stacked */

.editorial-split__media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;          /* Mobile (stacked) — landscape, kompakt */
}
@media (min-width: 64em) {
  .editorial-split__media {
    aspect-ratio: 4 / 5;        /* Desktop — portrait, passt zum Text-Block */
  }
}
.editorial-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.editorial-split__body { display: flex; flex-direction: column; gap: var(--space-4); }
.editorial-split__link { margin-top: var(--space-5); align-self: flex-start; }
.editorial-split__title { margin: 0; }
.editorial-split__text  { margin: 0; }
.editorial-split__link  { align-self: flex-start; }

/* -------------------------------------------------------------------------
   Trust-Pillar-Cards (Diskretion-Seite — 3er-Grid mit Bild oben)
   ------------------------------------------------------------------------- */
.trust-pillars-grid { margin-top: var(--space-7); }
.trust-pillar-card { display: flex; flex-direction: column; gap: var(--space-3); }
.trust-pillar-card__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.trust-pillar-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trust-pillar-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: 1.3;
  margin: var(--space-2) 0 0;
  color: var(--text-primary);
}
.trust-pillar-card__text { color: var(--text-secondary); margin: 0; }

/* -------------------------------------------------------------------------
   Trust-Measures (Diskretion-Seite)
   Layout: linke Intro-Spalte sticky, rechts ein Stack aus Cards die sich
   beim Scrollen uebereinander stapeln (Webflow-Pattern .layout353).
   ------------------------------------------------------------------------- */
.trust-measures {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 64em) {
  .trust-measures {
    grid-template-columns: 1.4fr 1fr;   /* User-Wunsch: linke Spalte breiter */
    gap: var(--space-8);
    align-items: start;
  }
}
.trust-measures__intro { display: flex; flex-direction: column; gap: var(--space-4); }
.trust-measures__intro h2 { margin: 0; }
.trust-measures__intro p  { margin: 0; }

@media (min-width: 64em) {
  /* Linke Spalte bleibt beim Scrollen oben pinned — solange die rechte
     Spalte (Cards-Stack) Platz hat. */
  .trust-measures__intro {
    position: sticky;
    top: calc(var(--header-height) + var(--space-7));
    align-self: start;
  }
}

.trust-measures__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  counter-reset: trust;
}
.trust-measures__item {
  counter-increment: trust;
  background-color: var(--bg-elevated);          /* cream Card-BG */
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.trust-measures__item::before {
  content: counter(trust, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.trust-measures__item-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}
.trust-measures__item-text { color: var(--text-secondary); margin: 0; }

@media (min-width: 64em) {
  /* Sticky-Stack: jede Card pinnt 16 px tiefer als die vorherige.
     Beim Runterscrollen schieben sich die Cards uebereinander. */
  .trust-measures__item {
    position: sticky;
  }
  .trust-measures__item:nth-child(1) { top: calc(var(--header-height) + var(--space-7)); }
  .trust-measures__item:nth-child(2) { top: calc(var(--header-height) + var(--space-7) + 1rem); }
  .trust-measures__item:nth-child(3) { top: calc(var(--header-height) + var(--space-7) + 2rem); }
  .trust-measures__item:nth-child(4) { top: calc(var(--header-height) + var(--space-7) + 3rem); }
  .trust-measures__item:nth-child(5) { top: calc(var(--header-height) + var(--space-7) + 4rem); }
  .trust-measures__item:nth-child(6) { top: calc(var(--header-height) + var(--space-7) + 5rem); }
  .trust-measures__item:nth-child(7) { top: calc(var(--header-height) + var(--space-7) + 6rem); }
  .trust-measures__item:nth-child(8) { top: calc(var(--header-height) + var(--space-7) + 7rem); }
}

/* -------------------------------------------------------------------------
   FAQ-Cards — Card-Accordion mit Slide-Animation
   Layout: ZWEI feste Flex-Columns (kein CSS-column-rebalancing).
   Items sind serverseitig in 2 Arrays geteilt und bleiben in ihrer Spalte.
   ------------------------------------------------------------------------- */
.faq-cards {
  margin-top: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.faq-card {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  cursor: pointer;            /* ganze Card klickbar */
}
/* Im Antwort-Bereich Text-Cursor, damit Markieren intuitiv funktioniert */
.faq-card__answer { cursor: text; }

/* Klickbare Frage-Zeile (Button-Reset) */
.faq-card__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.faq-card__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.faq-card__question {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.faq-card__chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--text-secondary);
  transition: transform var(--duration-card) var(--ease-default);  /* 400 ms */
}
.faq-card[data-faq-state="open"] .faq-card__chevron {
  transform: rotate(-180deg);   /* dreht counter-clockwise — wirkt natuerlicher */
}

/* Slide-Anim: JS setzt die echte Hoehe inline (overflow:hidden klippt
   den Content beim Wegblenden). transition steuert nur den Verlauf. */
.faq-card__answer {
  height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: height var(--duration-card) var(--ease-default),
              opacity var(--duration-base) var(--ease-default),
              margin-top var(--duration-card) var(--ease-default);
}
.faq-card[data-faq-state="open"] .faq-card__answer {
  opacity: 1;
  margin-top: var(--space-4);
  /* height kommt aus JS (inline) — entspricht .faq-card__answer.scrollHeight */
}

.faq-card__answer-inner {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.faq-card__answer-inner p { margin: 0 0 var(--space-3); }
.faq-card__answer-inner p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq-card__answer,
  .faq-card__chevron { transition: none; }
}

/* -------------------------------------------------------------------------
   Service-Detail (Template B) — Hero, Detail, 3-Arg-Grid, Vertiefung, FAQ
   ------------------------------------------------------------------------- */

/* Hero des Service-Details — zentriert (Webflow .header98_card text-align-center).
   Hintergrundbild mit Overlay; Inhalt mittig, max-Breite begrenzt. */
/* -------------------------------------------------------------------------
   Page-Hero (einheitlich für alle Pages außer Home + Service-Detail)
   -------------------------------------------------------------------------
   Wird via snippet('page-hero', ...) gerendert. Einheitliche min-height
   damit kein Layout-Shift zwischen Pages mit kurzen vs. langen H1. Inner-
   max-width so bemessen, dass die längste H1 (~58 Zeichen, Display-Font
   Righteous) in maximal 2 Zeilen umbricht.

   Mobile-Button-Reihenfolge: DOM-Order = Visual-Order (Top → Bottom).
   Der erste Button im DOM (Primary, "links" auf Desktop) erscheint oben,
   der zweite (Secondary, "rechts" auf Desktop) erscheint unten. Standard-
   Flex-Wrap-Verhalten — beim Button-Rendering auf Pages immer den Primary-
   Button zuerst im DOM platzieren.
   ------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(28rem, 50vh, 38rem);
  padding-block: var(--space-9);
  padding-inline: var(--section-inline-padding);
  background-color: var(--color-dark);
  display: flex;
  align-items: center;
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
}
.page-hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: var(--space-5);
  max-width: 60rem;
}
.page-hero__title { color: var(--text-on-dark); margin: 0; }
.page-hero__intro {
  color: var(--text-on-dark);
  max-width: 50ch;
  margin: 0;
}
.page-hero__actions { justify-content: center; }
@media (max-width: 47.99em) {
  .page-hero__actions { width: 100%; }
}

/* Detail-Argumente: editorial-Liste, immer untereinander (1 Spalte). */
.detail-arguments {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-7);
}
.detail-argument__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
}
.detail-argument__text { color: var(--text-secondary); margin: 0; }

/* -------------------------------------------------------------------------
   Detail-Arguments-Split (Service-Detail Sektion C)
   Layout: Bild links (5/12) + vertikale 3-Argumente-Liste rechts (7/12).
   Mobile-first: stacked. Webflow-treu nachgebaut (siehe leistungen-detail.html
   §section_layout223), nur ohne Icons pro Item (User-Entscheidung).
   ------------------------------------------------------------------------- */
.detail-arguments-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-top: var(--space-7);
  align-items: center;
}
@media (min-width: 48em) {
  .detail-arguments-split {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
  }
}

.detail-arguments-split__media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.detail-arguments-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-arguments-split__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Optional Wrapper-Container fuer die rechte Spalte (UL + Folge-Elemente
   wie Cross-Link-Button). */
.detail-arguments-split__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}
.detail-arguments-split__col .detail-arguments-split__list {
  margin: 0;
  width: 100%;
}

/* -------------------------------------------------------------------------
   Info-Grid (Ablauf-Buchung „Was mitteilen / Was wissen", Honorare „Notes")
   Schlichtes Karten-Grid ohne BG / Border — eher Editorial-Block.
   ------------------------------------------------------------------------- */
.info-grid {
  margin-top: var(--space-7);
}
.info-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border, rgba(0,0,0,.08));
}
/* Auf Desktop: bei 2-Spalten-Layout Border-Top nur an der Spalten-Trennung
   sauber halten — first-row Items behalten Border-Top für Konsistenz. */
.info-grid__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: 1.3;
  margin: 0;
  color: var(--text-primary);
}
.info-grid__text {
  color: var(--text-secondary);
  margin: 0;
}

/* -------------------------------------------------------------------------
   Why-Split (Bewerbung Sektion 2 „Warum Merava")
   2-Spalten: links Header (linksbündig), rechts 2x2 Icon-Cards.
   Mobile-first stacked.
   ------------------------------------------------------------------------- */
.why-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 64em) {
  .why-split {
    grid-template-columns: 4fr 8fr;
    gap: var(--space-8);
    align-items: start;
  }
}
.why-split__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.why-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 36em) {
  .why-split__grid { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   Icon-Card-Grid (Buchungsablauf „Was mitteilen sollten")
   4 Cards nebeneinander (desktop) / 2 (tablet) / 1 (mobile). Cream-BG,
   border, radius, hover-lift. Icon-Box oben-links, dann H3, Text, Link.
   ------------------------------------------------------------------------- */
.icon-card-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 48em) {
  .icon-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .icon-card-grid { grid-template-columns: repeat(4, 1fr); }
}
/* 2x2-Variante: auch ab Desktop 2 Spalten (für 4 Items mit längerem Text,
   z.B. Honorar Trust-Cards). 4-in-a-row wäre für die Card-Inhalte zu eng. */
@media (min-width: 48em) {
  .icon-card-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .icon-card-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
}

/* 5-Items-Variante: für 5 Cards in einer Reihe ab Desktop (Buchungsablauf
   "Was Sie mitteilen sollten"). Mobile 1-Col, Tablet 2-3, Desktop 5. */
@media (min-width: 48em) {
  .icon-card-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 80em) {
  .icon-card-grid--5 { grid-template-columns: repeat(5, 1fr); }
}

/* 3-Items-Variante: für 3 Cards nebeneinander ab Desktop (Kontakt
   Concierge-Erreichbarkeit). Default-4-Col würde 3 Cards linksbündig
   lassen — diese Variante zwingt das Grid auf 3 gleichbreite Spalten. */
@media (min-width: 64em) {
  .icon-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.icon-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-card, #FDF9F1);
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: var(--radius-card);
}
.icon-card__icon {
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.icon-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: 1.3;
  margin: 0;
  color: var(--text-primary);
}
.icon-card__text {
  color: var(--text-secondary);
  margin: 0;
  flex: 1 1 auto;
}
/* -------------------------------------------------------------------------
   Bento-Info (Buchungsablauf „Was wissen sollten")
   Layout: 2-Spalten — links eine grosse Hauptcard (1:1), rechts ein 2x2-
   Sub-Grid mit 4 kleinen Cards. Mobile-first stacked. Keine Hover-Effekte
   (User-Wunsch), keine Links/Buttons in den Cards.
   ------------------------------------------------------------------------- */
.bento-info {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 64em) {
  .bento-info {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

/* Hauptcard: vertikal gestapelt (Body oben, Bild unten). Auf Desktop nimmt
   sie die volle Hoehe der rechten Seite ein (align-items:stretch). */
.bento-info__featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-card, #FDF9F1);
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: var(--radius-card);
  overflow: hidden;
}
.bento-info__featured-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bento-info__featured-title {
  margin: 0;
  color: var(--text-primary);
}
.bento-info__featured-text {
  color: var(--text-secondary);
  margin: 0;
}
.bento-info__featured-media {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  flex: 1 1 auto;
  margin-top: auto;
}
.bento-info__featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Rechte Seite — nested 2x2 Grid fuer die kleinen Cards. */
.bento-info__small-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

/* Kleine Cards — keine Hover-Animation. */
.bento-info__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-card, #FDF9F1);
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: var(--radius-card);
}
.bento-info__card-icon {
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.bento-info__card-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: 1.3;
  margin: 0;
  color: var(--text-primary);
}
.bento-info__card-text {
  color: var(--text-secondary);
  margin: 0;
  font-size: var(--text-sm);
  flex: 1 1 auto;
}
.bento-info__card-action {
  margin-top: var(--space-5);
  display: flex;
}
.bento-info__card-action .cross-link { width: 100%; }

/* -------------------------------------------------------------------------
   Pricing-Grid + Pricing-Card (Honorare-Seite)
   Klassischer Cream-Card-Look (wie alle anderen Cards). Aufbau:
   Eyebrow uppercase · Label · 40%-Divider · Preis. Zentriert.
   Kein Hover, keine Reveal-Anim (Flickering vermeiden).
   ------------------------------------------------------------------------- */
.pricing-grid {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
/* Feste Kartenbreite je Breakpoint (kein flex-grow). Dadurch richtet
   justify-content:center die letzte, NICHT volle Zeile automatisch mittig aus
   — symmetrisch unter den Karten darueber (z.B. die 2 Rest-Karten bei 5er-Reihe
   landen mittig zwischen den oberen). box-sizing fuer korrekte calc-Breiten. */
.pricing-grid > .pricing-card {
  flex: 0 0 100%;
  box-sizing: border-box;
}
@media (min-width: 48em) {
  .pricing-grid > .pricing-card { flex-basis: calc((100% - var(--space-4)) / 2); }
}
@media (min-width: 64em) {
  .pricing-grid > .pricing-card { flex-basis: calc((100% - 2 * var(--space-4)) / 3); }
}
@media (min-width: 80em) {
  .pricing-grid > .pricing-card { flex-basis: calc((100% - 4 * var(--space-4)) / 5); }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  background: var(--color-card, #FDF9F1);
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: var(--radius-card);
}
.pricing-card--featured {
  border-color: var(--color-accent, #D9BE77);
}

.pricing-card__eyebrow {
  font-size: var(--text-xs, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.pricing-card__label {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: 1.2;
  margin: 0;
  color: var(--text-primary);
}
.pricing-card__divider {
  border: 0;
  border-top: 1px solid var(--color-border, rgba(0,0,0,.08));
  width: 40%;
  margin: var(--space-3) 0;
  height: 0;
}
.pricing-card__price {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  margin: 0;
  color: var(--color-accent, #D9BE77);
}
.pricing-card__text {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

/* -------------------------------------------------------------------------
   Kontakt-Channels (Kontakt-Seite „Erreichen Sie uns")
   3 Cards nebeneinander: Icon top + H3 + Text + Link (Channel-Daten aus
   Site → Kontakt). Cream-Card-Look, kein Hover, zentriert.
   ------------------------------------------------------------------------- */
.contact-channels {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 48em) {
  .contact-channels { grid-template-columns: repeat(3, 1fr); }
}
.contact-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-card, #FDF9F1);
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-card, 400ms) ease, box-shadow var(--duration-card, 400ms) ease, border-color var(--duration-base, 200ms) ease;
}
.contact-channel:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.06);
  border-color: var(--color-accent, #D9BE77);
}
.contact-channel:focus-visible {
  outline: 2px solid var(--color-accent, #D9BE77);
  outline-offset: 3px;
}
.contact-channel__icon {
  color: var(--color-accent, #D9BE77);
}
.contact-channel__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: 1.2;
  margin: 0;
  color: var(--text-primary);
}
.contact-channel__text {
  color: var(--text-secondary);
  margin: 0;
  font-size: var(--text-sm);
  flex: 1 1 auto;
}
.contact-channel__link {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  margin-top: var(--space-2);
  border-bottom: 1px solid var(--color-accent, #D9BE77);
  padding-bottom: 2px;
  transition: color var(--duration-base, 200ms) ease;
}
.contact-channel:hover .contact-channel__link { color: var(--color-accent, #D9BE77); }

/* -------------------------------------------------------------------------
   Contact-Form-Split (Kontakt-Seite Sektion 3)
   2-Spalten-Layout: links Header+Items (linksbündig), rechts Formular.
   ------------------------------------------------------------------------- */
.contact-form-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 64em) {
  .contact-form-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }
}

.contact-form-split__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.contact-form-split__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}
.contact-form-split__info .avail-list {
  margin: 0;
  max-width: none;
}

/* -------------------------------------------------------------------------
   (.contact-form Styles entfernt — Forms nutzen jetzt .form-card aus dem
   neuen Form-System oben.) Nur .contact-form-split bleibt fuer das
   2-Spalten-Layout der Kontakt-Sektion 3.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Avail-List (Kontakt-Seite „Verfügbarkeit")
   Vertikale Liste mit Icon-Punkten + Text. Zentriert.
   ------------------------------------------------------------------------- */
.avail-list {
  list-style: none;
  padding: 0;
  margin: var(--space-7) auto 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.avail-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-card, #FDF9F1);
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: var(--radius-card);
}
.avail-item__icon {
  color: var(--color-accent, #D9BE77);
  flex-shrink: 0;
  display: inline-flex;
}
.avail-item__text {
  color: var(--text-primary);
  font-size: var(--text-base);
}

/* -------------------------------------------------------------------------
   Legal-Page (Impressum / Datenschutz)
   Linksbündiger Rechtstext-Block, max 720px. Schlicht.
   ------------------------------------------------------------------------- */
.legal-header {
  max-width: 720px;
  margin: 0 auto var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}
.legal-content {
  max-width: 720px;
  margin: 0 auto;
}
.legal-content h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: 1.2;
  margin: var(--space-7) 0 var(--space-3);
  color: var(--text-primary);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: 1.3;
  margin: var(--space-5) 0 var(--space-2);
  color: var(--text-primary);
}
.legal-content p { color: var(--text-secondary); margin: 0 0 var(--space-3); }
.legal-content ul, .legal-content ol { color: var(--text-secondary); padding-left: var(--space-5); margin: 0 0 var(--space-3); }
.legal-content li { margin-bottom: var(--space-2); }
.legal-content a { color: var(--text-primary); border-bottom: 1px solid var(--color-accent, #D9BE77); }

/* -------------------------------------------------------------------------
   Cross-Link Button — Sekundär-Button mit Pfeil-Icon, sitzt INNERHALB einer
   Sektion (Editorial-Split-Body, Pillars-Container, Bento-Bottom etc.).
   Kein eigener Wrapper — der Platzierungs-Container des Templates bestimmt
   die Position. Pfeil-Icon im Button schiebt bei :hover leicht nach rechts.
   ------------------------------------------------------------------------- */
.cross-link {
  align-items: center;
  gap: var(--space-2);
}
.cross-link .link-arrow__icon {
  width: 1em;
  height: 1em;
  transition: transform var(--duration-base, 200ms) ease;
}
.cross-link:hover .link-arrow__icon { transform: translateX(0.25em); }

/* -------------------------------------------------------------------------
   Cross-Service-Grid (Standort-Detail „Beliebte Begleitungen in [Ort]")
   Kleines 3-Card-Grid mit verlinkten Services. Mini-Card mit Image-Bg + Titel.
   ------------------------------------------------------------------------- */
.cross-services {
  margin-top: var(--space-7);
}
.cross-services__heading {
  margin-bottom: var(--space-5);
}
.cross-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 48em) {
  .cross-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .cross-services__grid { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   Notes-Bento (Honorare „Gut zu wissen")
   Layout: 2-Spalten — links 2x2 Icon-Grid (4 Items), rechts grosses Bild.
   Mobile-first stacked. Keine Hover, keine Links — User-Wunsch.
   ------------------------------------------------------------------------- */
.notes-bento {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 64em) {
  .notes-bento {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: stretch;
  }
}

/* Linke Seite: 2x2 Sub-Grid mit 4 Icon-Items. */
.notes-bento__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* Einzelne Notes-Item — kein Card-Hintergrund, eher Editorial-Block. */
.notes-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.notes-item__icon {
  color: var(--text-primary);
}
.notes-item__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: 1.3;
  margin: 0;
  color: var(--text-primary);
}
.notes-item__text {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}

/* Rechte Seite: grosses Bild. */
.notes-bento__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
@media (min-width: 64em) {
  .notes-bento__media {
    aspect-ratio: auto;
    min-height: 100%;
  }
}
.notes-bento__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================================
   Age-Gate (18+ Disclaimer beim ersten Besuch)
   -------------------------------------------------------------------------
   Site-wide. NICHT überspringbar via Esc — User muss aktiv bestätigen.
   ========================================================================= */

.age-gate {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(480px, calc(100vw - var(--space-5) * 2));
  max-width: none;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.age-gate.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.age-gate::backdrop {
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  transition: background-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.age-gate.is-visible::backdrop {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}
.age-gate__card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-xl);
}
@media (min-width: 48em) {
  .age-gate__card {
    padding: var(--space-7);
  }
}
/* -------------------------------------------------------------------------
   Prose-Card — schlichte Text-Card mit H3 + Body. Genutzt z.B. auf
   Standort-Detail (Sektion 2/3 Sub-Cards: Kulinarik & Lifestyle,
   Diskretion vor Ort, Dinner-Begleitung, Yacht-Service).
   ------------------------------------------------------------------------- */
.prose-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-card, #FDF9F1);
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: var(--radius-card);
}
.prose-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}
.prose-card__text {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--leading-body);
}

/* Prose-Card-Stack — 1-spaltiger vertikaler Card-Stack. Wird im Body eines
   home-split-Layouts genutzt (Standort-Detail Sektion 2: 2 Sub-Cards
   untereinander gestackt neben sticky Bild rechts). */
.prose-card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* -------------------------------------------------------------------------
   Location-Moments — Sektion 2 auf Standort-Detail. Overrides für
   home-split: Body darf volle Spaltenbreite nutzen (statt max-width 36rem),
   damit H2 + Intro + 2 prose-cards bequem Platz haben. Body-Gap auf space-7
   gibt Atmung zwischen Intro und Card-Stack und macht den Body insgesamt
   höher als das 4:5-Bild rechts — sonst kein sichtbarer Sticky-Travel. */
.location-moments .home-split__body {
  max-width: none;
}
@media (min-width: 64em) {
  .location-moments .home-split__body { gap: var(--space-7); }
  .location-moments .prose-card-stack { gap: var(--space-5); }
  .location-moments .prose-card { padding: var(--space-7); }
}

/* Sticky-Media-Modifier — Bild bleibt beim Scrollen rechts stehen, während
   links Text + Cards durchscrollen. Nur ab Desktop (≥1024 px), Mobile bleibt
   stacked + normal. Top-Offset = Header + Buffer (analog .sticky-stack__body
   und .trust-measures__intro). Bild füllt die volle Spaltenbreite — Body ist
   (H2 + Lede + 2 Cards) leicht höher als das 4:5-Bild, der Sticky-Effekt
   greift dezent während der unteren Card durchscrollt. */
@media (min-width: 64em) {
  .home-split__media--sticky {
    position: sticky;
    top: calc(var(--header-height) + var(--space-7));
    align-self: start;
  }
}

/* -------------------------------------------------------------------------
   Service-Deep — Side-by-Side Editorial-Split für die zwei semantischen
   Vertiefungen auf Service-Detail-Pages. Nutzt .editorial-split Grid
   (existierend), mit eigenem Body-Text-Treatment für kt()-Multi-Absatz
   (editorial-split selbst rendert nur Single-<p>).
   V1: Text links, Foto rechts (.editorial-split--reverse).
   V2: Foto links, Text rechts (default .editorial-split).
   ------------------------------------------------------------------------- */
.service-deep .service-deep__body {
  /* erbt .editorial-split__body Layout (flex col gap-4) — keine
     Override des Grids nötig. */
}
.service-deep__text {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--leading-body);
}
.service-deep__text > * + * {
  margin-top: var(--space-3);
}

/* -------------------------------------------------------------------------
   Sticky-Stack — Side-by-Side mit linker sticky-Spalte + rechten Cards
   die sich beim Scrollen übereinander stapeln (jede Card position sticky
   mit zunehmendem top-offset). Wird auf Diskretion-Sektion 2 verwendet.
   ------------------------------------------------------------------------- */
.sticky-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 64em) {
  .sticky-stack {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: start;
  }
}

.sticky-stack__body {
  /* Auf Desktop sticky — bleibt links beim Scroll fixiert */
}
@media (min-width: 64em) {
  .sticky-stack__body {
    position: sticky;
    top: 6rem;        /* unter Header + Buffer */
    align-self: start;
  }
}

.sticky-stack__title { margin: 0 0 var(--space-4); }
.sticky-stack__text > * + * { margin-top: var(--space-3); }

.sticky-stack__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sticky-stack__card {
  position: relative;
  background-color: var(--color-card, #FDF9F1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 64em) {
  /* Sticky-Stacking: jede Card klebt mit leicht steigendem top-offset,
     wenn die nächste Card hochkommt, überlagert sie die vorherige. */
  .sticky-stack__card {
    position: sticky;
    top: calc(6rem + (var(--card-index, 1) - 1) * 1.25rem);
  }
}

.sticky-stack__card-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--accent);
  letter-spacing: 0.02em;
}
.sticky-stack__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}
.sticky-stack__card-text {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--leading-body);
}

.age-gate__tabs {
  display: inline-flex;
  gap: 0;
  margin-bottom: var(--space-5);
  padding: 0.25rem;
  background-color: var(--opacity-black-5);
  border-radius: var(--radius-full);
}
.age-gate__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.375rem 0.875rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  transition: color var(--duration-base) var(--ease-default),
              background-color var(--duration-base) var(--ease-default);
}
.age-gate__tab:hover {
  color: var(--text-primary);
}
.age-gate__tab[aria-selected="true"] {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-xxs);
}

.age-gate__header {
  margin-bottom: var(--space-5);
}
.age-gate__eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--color-gold-dark);
}
.age-gate__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
}
.age-gate__lede {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.age-gate__actions {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
}
.age-gate__actions .btn {
  flex: 1;
  justify-content: center;
}
@media (max-width: 30em) {
  /* Auf sehr kleinem Mobile zurück auf stacked. */
  .age-gate__actions { flex-direction: column; }
}

/* =========================================================================
   Form-Backend — Honeypot + Result-Status
   ========================================================================= */

.form-honeypot {
  /* Visuell + a11y unsichtbar, aber Bot füllt aus. */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.form-result {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  min-height: 1.4em;
}
.form-result:empty { display: none; }
.form-result.is-success {
  color: var(--color-gold-dark);
}
.form-result.is-error {
  color: var(--color-wine);
}

/* Submit-Button — Status IM Button: "… …" (senden) und "gesendet ✓" (Erfolg).
   Lade-/Erfolgstext steht nicht mehr unter dem Button; der Result-Paragraph
   zeigt nur noch Fehler. */
.btn.is-sending { cursor: progress; opacity: .9; }
.btn.is-success { pointer-events: none; }
.btn.is-success::before {
  content: "✓";
  font-weight: var(--weight-bold, 700);
  margin-right: .45em;
  display: inline-block;
  line-height: 1;
}

/* =========================================================================
   Home-Split — generischer 2-Spalten-Body/Media-Block (Positionierung +
   Mallorca-Präsenz). Text + Bild side-by-side, Mobile stacked.
   ========================================================================= */

.home-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 64em) {
  .home-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}
.home-split--reverse .home-split__body { order: 0; }
.home-split--reverse .home-split__media { order: 1; }
@media (min-width: 64em) {
  /* Reverse-Variante: Bild links, Body rechts. */
  .home-split--reverse .home-split__media { order: 0; }
  .home-split--reverse .home-split__body  { order: 1; }
}
.home-split__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 36rem;
}
.home-split__title {
  margin: 0;
}
.home-split__text {
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  margin: 0;
}
.home-split__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
}
@media (min-width: 64em) {
  .home-split__media {
    aspect-ratio: 4 / 5;
  }
}
.home-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================================
   Home-Pillars — Trust-Section auf der Home als 3-Col-Card-Grid (statt
   die vertikale .trust-pillars Liste).
   ========================================================================= */

.home-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 48em) {
  .home-pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}
/* Variante für 4 Items: 2x2 statt 4-in-a-row (Über uns Premium-Sektion).
   Bei 4 Items wäre 3-Col-Grid asymmetrisch (3+1). */
@media (min-width: 48em) {
  .home-pillars--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Inline-Variante — 1-spaltig auch ab Desktop. Wird im linken Body eines
   home-split-Layouts genutzt (z.B. Diskretion Grundprinzipien). */
.home-pillars--inline {
  gap: var(--space-3);
}
@media (min-width: 48em) {
  .home-pillars--inline {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* Inline-Card-Variante: Nummer LINKS neben Body (horizontal Layout statt
   Number oben). Kompakter — passt in den schmalen Body eines Splits. */
.home-pillar-card--inline {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}
.home-pillar-card--inline .home-pillar-card__num {
  font-size: var(--text-3xl);
  margin-bottom: 0;
  flex: 0 0 auto;
  min-width: 2.5rem;
}
.home-pillar-card--inline .home-pillar-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.home-pillar-card--inline .home-pillar-card__title {
  font-size: var(--text-lg);
}

/* Modifier für home-split: vertikale Ausrichtung auf top statt center
   (für lange Body-Stacks mit vielen Items, damit Bild oben mit Header
   alignt statt verschoben unten). */
.home-split--top { align-items: flex-start; }
.home-pillar-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  text-align: left;
}
@media (min-width: 48em) {
  .home-pillar-card {
    padding: var(--space-7);
  }
}
.home-pillar-card__num {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.home-pillar-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin: 0;
  color: var(--text-primary);
}
.home-pillar-card__text {
  color: var(--text-secondary);
  line-height: var(--leading-body);
  margin: 0;
}

/* =========================================================================
   Chip-List (Pill-Chips — Mallorca-Präsenz-Sektion auf der Home)
   ========================================================================= */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: 0;
  margin: var(--space-6) 0 0;
  list-style: none;
}
.chip-list--start {
  justify-content: flex-start;     /* linksbündig im Split-Body */
  margin-top: var(--space-3);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-gold-lightest);
  border: 1px solid var(--color-gold-light);
  color: var(--color-gold-darker);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  transition: background-color var(--duration-base, 200ms) ease,
              border-color var(--duration-base, 200ms) ease,
              color var(--duration-base, 200ms) ease,
              transform var(--duration-base, 200ms) ease;
}
a.chip { text-decoration: none; }
a.chip:hover,
a.chip:focus-visible {
  background: var(--color-gold-light);
  border-color: var(--color-gold);
  color: var(--color-gold-darker);
  transform: translateY(-1px);
}
a.chip:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* CTA-Card Mikro-Copy (unter den Action-Buttons, z.B. Home Abschluss-CTA) */
.cta-card__microcopy {
  /* Immer auf eigene Zeile unter dem Button — auch wenn der Microcopy
     kurz genug wäre, um daneben zu passen (kommt bei englischen Texten
     vor). flex-basis 100% bricht den flex-cluster. */
  flex-basis: 100%;
  width: 100%;
  /* margin-inline AUTO (nicht 0!) — global gilt p { max-width: 65ch } (base.css),
     dadurch ist die Microcopy schmaler als der Content. Ohne auto-Raender klebt
     die Box links statt mittig. DAS war der wiederkehrende Zentrierungs-Bug. */
  margin: var(--space-4) auto 0;
  font-size: var(--text-sm);
  color: var(--opacity-white-60);
  text-align: center;
  letter-spacing: var(--tracking-wide);
}

/* =========================================================================
   Error-Page (404)
   ========================================================================= */

.error-page {
  padding-top: var(--section-py-mobile);
  padding-bottom: var(--section-py-mobile);
  min-height: 60vh;
  display: flex;
  align-items: center;
}
@media (min-width: 48em) {
  .error-page {
    padding-top: var(--section-py-tablet);
    padding-bottom: var(--section-py-tablet);
  }
}
@media (min-width: 64em) {
  .error-page {
    padding-top: var(--section-py-desktop);
    padding-bottom: var(--section-py-desktop);
  }
}
.error-page__inner {
  text-align: center;
  width: 100%;
}
.error-page__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-gold);
  letter-spacing: var(--tracking-wider);
  margin: 0 0 var(--space-3);
}
.error-page__title {
  margin: 0 0 var(--space-4);
}
.error-page__lede {
  margin: 0 auto var(--space-6);
  max-width: 36rem;
}
.error-page__actions {
  justify-content: center;
}

/* =========================================================================
   Model Detail (Template A) — Hero-Sektion
   -------------------------------------------------------------------------
   2-Col Grid: Galerie links (~1.5fr) + Info-Card rechts (~1fr, sticky ab
   Desktop). Galerie-Stub in Etappe 1 wird in Etappe 2 durch das vollwertige
   Snippet ersetzt. Lock-Banner ist in Etappe 1 ohne Funktion (Etappe 3).
   ========================================================================= */

.model-detail {
  background-color: var(--bg-primary);
}

/* =========================================================================
   Rezensionen (Modell-Detailseite)
   ========================================================================= */
.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); line-height: 0; }
.stars .star--off { color: var(--opacity-black-15); }

.reviews__summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.reviews__avg {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--text-primary);
}
.reviews__count { font-size: var(--text-sm); color: var(--text-secondary); }

/* Masonry-/Pinterest-Layout via CSS-Columns: Cards behalten ihre natuerliche
   Hoehe und stapeln direkt untereinander (keine Reihen-Ausrichtung, die die
   kuerzere Card auf die Hoehe der groesseren streckt). Mobil 1 Spalte, ab 48em
   2 Spalten. Vertikaler Abstand via margin-bottom (column-gap regelt nur den
   horizontalen Spaltenabstand). */
.reviews__list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  columns: 1;
  column-gap: var(--space-5);
}
@media (min-width: 48em) {
  .reviews__list { columns: 2; }
}
.reviews__list .review-card {
  break-inside: avoid;
  margin-bottom: var(--space-5);
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}

/* Leer-Zustand: eine Card ueber die volle Breite (= zwei Rezensions-Spalten),
   gleicher Look (beige, Border, Radius), Text zentriert. */
.reviews__empty {
  margin-top: var(--space-8);
}
.review-card--empty {
  align-items: center;
  text-align: center;
  padding-block: var(--space-8);
}
.review-card--empty .review-card__text {
  max-width: 46ch;
  color: var(--text-secondary);
}
.review-card__text {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-primary);
}
.review-card__meta {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.reviews__cta { margin-top: var(--space-7); text-align: center; }
.reviews__form {
  margin-top: var(--space-6);
  transition: height 0.45s var(--ease-default),
              opacity 0.4s var(--ease-default),
              margin-top 0.45s var(--ease-default),
              padding-top 0.45s var(--ease-default),
              padding-bottom 0.45s var(--ease-default);
}
.reviews__form.is-closing {
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* Stern-Eingabe — Radio-Group, row-reverse fuer Hover/Fill nach links */
.star-input {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  color: var(--opacity-black-15);
  margin-top: var(--space-1);
}
.star-input__label {
  display: inline-flex;
  cursor: pointer;
  color: inherit;
  transition: color var(--duration-base) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}
.star-input__label:hover { transform: scale(1.12); }
.star-input__radio:checked ~ .star-input__label,
.star-input__label:hover,
.star-input__label:hover ~ .star-input__label {
  color: var(--accent);
}
.star-input__radio:focus-visible + .star-input__label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.model-hero {
  /* Top-Padding bewusst kleiner als die volle Section-Luft: der body hat
     schon padding-top fuer die fixe Navbar, sonst stapelt sich beides zu
     einer riesigen Luecke. Bottom bleibt volle Section-Luft. */
  padding-top: 2.5rem;
  padding-bottom: var(--section-py-mobile);
}
@media (min-width: 48em) {
  .model-hero {
    padding-top: 3rem;
    padding-bottom: var(--section-py-tablet);
  }
}
@media (min-width: 64em) {
  .model-hero {
    padding-top: 4rem;
    padding-bottom: var(--section-py-desktop);
  }
}

.model-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 64em) {
  .model-hero__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);   /* Bild 1.5 : Card 1 */
    gap: var(--space-7);
    align-items: start;
  }
}

/* Galerie-Spalte — flex stack: Lock-Banner oben, Bilder darunter.
   Legacy aus dem alten Magazin-Layout (Galerie im Hero). Aktuell wird
   Galerie in Sektion 2 separat gerendert. Klasse bleibt für Backward-
   Compat (Snippets nutzen sie). */
.model-hero__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* Hauptbild im Hero (PDF-Pass) — großes Portrait links neben Info-Card.
   Übernimmt die linke Spalte des .model-hero__grid. */
.model-hero__main-photo {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-subtle);
  min-width: 0;
}
.model-hero__main-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 64em) {
  /* Auf FLACHEN Fenstern nicht ueber den Schirm hinaus: Hoehe deckeln. Das
     Bild fuellt weiter seine ganze 1.5fr-Spalte (kein Leerraum, gleiches
     Layout wie auf grossen Screens). Reicht die Hoehe nicht, wird nur unten
     minimal beschnitten (Gesicht bleibt oben via object-position: top).
     Auf normalen/grossen Screens passt 4/5 ohnehin -> KEIN Crop. */
  .model-hero__main-photo {
    width: 100%;                          /* Breite festnageln (= Spaltenbreite),
                                             damit max-height CROPPT statt die
                                             Breite mitzuschrumpfen (Leerraum). */
    max-height: calc(100svh - 10rem);
  }
  .model-hero__main-photo img {
    object-position: center top;
  }
}

/* Model-Body — 2-Col-Editorial-Layout (Sektionen 2/3/4 zusammengefasst).
   LINKS: Galerie (Lock-Banner + Photo-Grid).
   RECHTS: 2 Cards untereinander (Profil & Charakter + Details).
   Auf Mobile: 1-Col, Galerie zuerst, dann Cards untereinander. */
.model-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 64em) {
  .model-body__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
  }
}
.model-body__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}
.model-body__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

/* Sticky-Both auf Desktop: beide Spalten kriegen position: sticky.
   Trick: die KÜRZERE Spalte bleibt automatisch im Viewport, während die
   LÄNGERE durchscrollt — weil `sticky` nur Effekt hat, solange das
   Element kleiner als sein Containing-Block ist. Container-Höhe ist
   max(gallery, cards). Die kürzere klebt am Top, sobald sie ihren
   Scroll-Range erreicht hat; die längere füllt den Container und kann
   nicht mehr sticken.
   So: Modell mit 3 Fotos + viel Text → Fotos kleben, Text scrollt.
   Modell mit 30 Fotos + wenig Text → Text klebt, Fotos scrollen. */
@media (min-width: 64em) {
  .model-body__gallery,
  .model-body__cards {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    align-self: start;
  }
}

/* Einzelne Content-Card im rechten Body-Stack. */
.model-card-block {
  background: var(--color-card, #FDF9F1);
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 48em) {
  .model-card-block { padding: var(--space-7); }
}
.model-card-block__title {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}
.model-card-block__text {
  color: var(--text-secondary);
  line-height: var(--leading-body);
}
.model-card-block__text > * + * {
  margin-top: var(--space-3);
}
.model-card-block__locations {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Profil & Charakter Sub-Blocks: Interessen & Auftreten innerhalb der
   Card. Auf engerer rechter Spalte stacken, auf voller Breite (z.B.
   wenn das Cards-Grid bei künftigem Solo-Render anders sitzt) optional
   2-spaltig. Innerhalb der Card-Block-Box sieht 1-spaltig sauberer aus. */
.model-subblocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border, rgba(0,0,0,.08));
}
.model-subblock {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.model-subblock__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}
.model-subblock__text {
  color: var(--text-secondary);
  line-height: var(--leading-body);
}
.model-subblock__text > * + * {
  margin-top: var(--space-3);
}

/* Details-Grid (innerhalb Details-Card): Stats als 2-Spalten-Grid
   (Label oben, Wert drunter) — Editorial-Look. Da die Card schon
   schmal ist (rechte Spalte des body-grid), reichen 2 Cols. */
.model-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
}
.model-detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.model-detail-item__label {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.model-detail-item__value {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin: 0;
}

/* ----- Lock-Banner (Etappe 1 ohne Funktion; Etappe 3 triggert Modal) ---- */
/* Unlock-Card als GALERIE-KACHEL (Hochformat 4:5, wie ein Foto): sitzt als
   letztes Item im Galerie-Grid. Icon oben links, Headline + Infozeile
   linksbuendig darunter, ueber geblurrtem Portrait + dunklem Overlay + sanfter
   Hover-Animation. Blur-Quelle = oeffentliches Portrait (kein Datenleck). */
.gallery-lock {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-gold-dark);
  border-radius: var(--radius-card);
  background: var(--color-dark);
  color: var(--color-cream-lighter);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}
.gallery-lock__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.gallery-lock__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  filter: blur(20px) brightness(0.5) saturate(1.1);
  transition: filter var(--duration-slow) var(--ease-default),
              transform var(--duration-slow) var(--ease-default);
}
/* Dunkles Overlay — oben/links staerker (wo Icon + Text sitzen). */
.gallery-lock::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(165deg, rgba(17,19,24,0.85) 0%, rgba(17,19,24,0.5) 45%, rgba(17,19,24,0.32) 100%);
}
.gallery-lock:hover {
  border-color: var(--color-gold);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
}
.gallery-lock:hover .gallery-lock__media img {
  filter: blur(15px) brightness(0.58) saturate(1.15);
  transform: scale(1.24);
}
.gallery-lock:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
.gallery-lock__icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  color: var(--color-gold-light);
}
.gallery-lock__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}
.gallery-lock__title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--color-gold-light);
}
.gallery-lock__hint {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.78);
}

/* Icon-Swap: locked vs unlocked. Beide Icons sind im DOM, CSS togglet
   die Visibility per .is-unlocked-Klasse — kein JS-SVG-Swap. */
.gallery-lock__icon-unlocked { display: none; }
.gallery-lock.is-unlocked .gallery-lock__icon-locked { display: none; }
.gallery-lock.is-unlocked .gallery-lock__icon-unlocked { display: inline-flex; }

/* Lock-Banner-State: entsperrt (durch JS gesetzt). Stärkerer Premium-
   Look — solider Gold-Border, gefüllter Gold-Tinted BG, Gold-Akzent
   am Icon-Container, kleiner Pulse-Indikator vor dem Title. */
.gallery-lock.is-unlocked {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 1px var(--color-gold-light) inset;
}
.gallery-lock.is-unlocked .gallery-lock__icon,
.gallery-lock.is-unlocked .gallery-lock__title {
  color: var(--color-gold-light);
}
.gallery-lock.is-unlocked .gallery-lock__hint {
  color: rgba(255, 255, 255, 0.75);
}

/* Note: Gold-Frame auf .gallery-item im Unlock-State war hier (commit
   ec7ce91), wieder entfernt. Bei farbintensiven Fotos verschwand der
   1px-Hairline visuell, und das aufpolierte Lock-Banner oben links
   kommuniziert „Privatansicht aktiv" bereits klar genug.
   Aman/Bottega-Prinzip: ein starkes Signal reicht, doppelt ist Noise. */

/* ----- Galerie kommt aus snippet/gallery-grid (siehe .gallery-grid unten) */

/* ----- Info-Card rechts ------------------------------------------------- */
.model-hero__info {
  min-width: 0;
}
@media (min-width: 64em) {
  .model-hero__info {
    position: sticky;
    top: calc(var(--space-7) + 64px);  /* Header-Höhe abziehen */
  }
}

.model-info {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
@media (min-width: 48em) {
  .model-info {
    padding: var(--space-7);
  }
}

/* --------------------------------------------------------------------------
   Sticky-Hero NUR auf Handy (< 48em)
   --------------------------------------------------------------------------
   Das Hauptbild geht full-bleed bis an die Bildschirmraender und bleibt
   sticky (fuellt den Screen unter der fixen Navbar). Die Info-Card
   (Verifiziert / Name / Intro / Anfrage) startet leicht ueberlappend
   ("peekt" unten ins Bild) und scrollt als opakes Panel von unten nach oben
   ueber das Bild. Am Ende loest sich das Bild und es geht normal in die
   naechste Section. Tablet/Desktop (>= 48em / 64em) bleiben unveraendert.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  /* Hero ganz nach oben ziehen (unter die fixe Navbar). Sonst startet das
     Bild erst unter der Navbar und es bleibt — sobald die Navbar beim Scrollen
     wegblendet — oben ein weisser Streifen. */
  .model-hero {
    margin-top: calc(-1 * var(--header-height));
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Grid -> Block, damit Sticky + negative Margin verlaesslich greifen */
  .model-hero__grid {
    display: block;
  }

  /* Bild: full-bleed bis an alle Raender, volle Viewport-Hoehe, sticky ganz
     oben (top: 0) -> bleibt gepinnt, fuellt den ganzen Screen. */
  .model-hero__main-photo {
    position: sticky;
    top: 0;
    z-index: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);             /* aus dem Container ausbrechen */
    height: 100svh;
    aspect-ratio: auto;                         /* 4/5 aufheben */
    border-radius: 0;                           /* bis an den Rand */
  }
  .model-hero__main-photo img {
    object-position: center;
  }

  /* Card-Wrapper: liefert die SCROLL-STRECKE (min-height: 100svh) UND ist
     transparent. Dadurch faehrt die Card erst KOMPLETT bis nach oben, bevor
     das Bild loslaesst — und unter der Card sieht man weiter das Bild statt
     einen leeren Block. Nur die innere .model-info traegt bg-elevated. */
  .model-hero__info {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    margin-top: -6svh;                          /* kleiner Peek */
  }
  .model-info {
    /* bg-elevated bleibt (User-Wunsch). Weiche Oberkante -> wirkt wie ein
       hochgleitendes Panel ueber dem Bild. */
    box-shadow: 0 -8px 28px -10px rgba(0, 0, 0, 0.22);
  }

  /* Hero-Reveals auf Mobile sofort sichtbar: die Card peekt nur wenig und
     wuerde sonst (data-reveal -> opacity:0) erst beim Scrollen einblenden.
     Verhindert auch den FOUC vor dem JS; das JS ueberspringt hier zusaetzlich
     die GSAP-Reveal-Animation. */
  .js .model-hero [data-reveal] {
    opacity: 1;
  }
}

.model-info__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-gold-dark);
  letter-spacing: var(--tracking-wide);
}
.model-info__check {
  color: var(--color-gold);
  font-weight: var(--weight-semibold);
}

.model-info__name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-h3);
  margin: 0;
  color: var(--text-primary);
}

.model-info__status {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.model-info__stats {
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.model-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.model-stat:last-child {
  border-bottom: none;
}
.model-stat__label {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.model-stat__value {
  margin: 0;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  text-align: right;
}

.model-info__bio {
  margin-top: var(--space-7);   /* Abstand zum letzten Stat — Divider ist nicht nötig */
}
.model-info__bio-eyebrow {
  margin: 0 0 var(--space-3);
}
.model-info__bio-text {
  color: var(--text-secondary);
  line-height: var(--leading-body);
}
.model-info__bio-text > *:last-child {
  margin-bottom: 0;
}

.model-info__ctas {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.model-info__cta {
  width: 100%;
  justify-content: center;
}

/* =========================================================================
   Gallery-Grid (Model-Detail-Galerie)
   -------------------------------------------------------------------------
   2-Spalten-Bento. Querformat-Files (--wide) spannen 2 Cols, Hochformat 1 Col.
   Click → öffnet die scope-gebundene Lightbox (per data-gallery-id).
   Items sind <button>, damit a11y/keyboard nativ funktionieren.
   ========================================================================= */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 48em) {
  .gallery-grid {
    gap: var(--space-4);
  }
}

.gallery-item {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-subtle);
  cursor: zoom-in;
  appearance: none;
  font: inherit;
  color: inherit;
  display: block;
  width: 100%;
}
.gallery-item--tall {
  aspect-ratio: 4 / 5;
}
.gallery-item--wide {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}
.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-card) var(--ease-in-out);
}
.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.04);
}
.gallery-item:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Video-Play-Overlay */
.gallery-item__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--opacity-black-20);
  color: var(--color-white);
  transition: background-color var(--duration-base) var(--ease-default);
}
.gallery-item__play::before {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--opacity-black-50);
  backdrop-filter: blur(6px);
  z-index: 0;
}
.gallery-item__play svg {
  position: relative;
  z-index: 1;
  margin-left: 4px;       /* Optisch zentriert (Spitze nach rechts) */
}
.gallery-item--video:hover .gallery-item__play,
.gallery-item--video:focus-visible .gallery-item__play {
  background: var(--opacity-black-30);
}

/* =========================================================================
   Lightbox (<dialog>)
   -------------------------------------------------------------------------
   Native <dialog>, JS managed: open/close, Index, Prev/Next, Keyboard.
   Backdrop = ::backdrop, Tap außerhalb der Media schließt.
   ========================================================================= */

.lightbox {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
  inset: 0;
}
.lightbox::backdrop {
  background-color: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
}
.lightbox[open] {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
}

.lightbox__media {
  position: relative;
  margin: 0;
  padding: var(--space-7) var(--space-5);
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.lightbox__media img,
.lightbox__media video {
  max-width: 100%;
  max-height: calc(100vh - 12rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
}

.lightbox__caption {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--opacity-white-60);
  margin: 0;
}

.lightbox__close,
.lightbox__nav {
  position: fixed;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  transition: background-color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
  z-index: 1;
}
.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
}
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.lightbox__close {
  top: var(--space-5);
  right: var(--space-5);
}
.lightbox__nav--prev {
  top: 50%;
  left: var(--space-5);
  transform: translateY(-50%);
}
.lightbox__nav--next {
  top: 50%;
  right: var(--space-5);
  transform: translateY(-50%);
}

.lightbox__counter {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  color: var(--opacity-white-60);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

@media (max-width: 47.9375em) {
  .lightbox__nav {
    width: 40px;
    height: 40px;
  }
  .lightbox__nav--prev { left: var(--space-3); }
  .lightbox__nav--next { right: var(--space-3); }
  .lightbox__close     { top: var(--space-3); right: var(--space-3); }
  .lightbox__media img,
  .lightbox__media video { max-height: calc(100vh - 10rem); }
}

/* =========================================================================
   Unlock-Modal (private Galerie freischalten)
   -------------------------------------------------------------------------
   Center-Card mit zwei Tabs: „Code eingeben" + „Code anfragen".
   ========================================================================= */

.unlock-modal {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(480px, calc(100vw - var(--space-5) * 2));
  max-width: none;                 /* UA-Default für <dialog> wäre calc(100% - 38px) */
  max-height: calc(100vh - var(--space-5) * 2);
  /* Default-Dialog hat inset:0 — wir wollen viewport-zentriert, fit-content. */
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  /* Closed-State (Default beim showModal) — JS togglet .is-visible für die
     Animation. 380ms + ease-out-quart (smoother als unsere Standard-Tokens
     speziell für Modal-Entrance/Exit). */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.unlock-modal.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.unlock-modal::backdrop {
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  transition: background-color 380ms cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.unlock-modal.is-visible::backdrop {
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.unlock-modal__inner {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
  text-align: center;
  /* Höhen-Animation beim Tab-Wechsel — JS setzt explizite Pixel-Höhe,
     transitioniert hier, räumt am Ende wieder auf.
     ease-out (cubic-bezier(0.16, 1, 0.3, 1)) + 500ms = smoother grow/shrink. */
  overflow: hidden;
  /* Keine CSS-Transition für height — JS managt das mit explicit
     inline-transition + double-reflow. Sonst kämpfen CSS-Transition und
     JS-Setup über die Reihenfolge der Updates. */
}
@media (min-width: 48em) {
  .unlock-modal__inner {
    padding: var(--space-7);
  }
}

.unlock-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-button);   /* eckiger Hover statt rund */
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-base) var(--ease-default);
}
.unlock-modal__close:hover,
.unlock-modal__close:focus-visible {
  background: var(--opacity-black-5);
  color: var(--text-primary);
}
.unlock-modal__close:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.unlock-modal__header {
  margin-bottom: var(--space-5);
}
.unlock-modal__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-gold-dark);
}
.unlock-modal__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: 0;
  color: var(--text-primary);
}

/* Pill-Tabs (Container = cream tray, aktive Tab = white card mit Shadow) */
.unlock-modal__tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin: 0 auto var(--space-5);
  background: var(--color-gold-lightest);
  border: 1px solid var(--opacity-black-5);
  border-radius: var(--radius-full);
}
.unlock-modal__tab {
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--color-gold-darker);
  opacity: 0.6;
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default),
              opacity var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}
.unlock-modal__tab:hover {
  opacity: 1;
}
.unlock-modal__tab.is-active {
  background: var(--color-white);
  color: var(--text-primary);
  opacity: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--opacity-black-5);
}
.unlock-modal__tab:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.unlock-modal__lede {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

/* Code-Eingabe-Form */
.unlock-form .form-label {
  text-align: center;
  display: block;
}
.unlock-form .form-input {
  letter-spacing: var(--tracking-wide);
  font-family: var(--font-body);
  text-align: center;
}
.unlock-form__status {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}
.unlock-form__status:empty {
  display: none;             /* Reserviert keinen Platz wenn keine Message */
}
.unlock-form__status.is-error {
  color: var(--color-wine);
}
.unlock-form__submit {
  margin-top: var(--space-3);
  width: 100%;
  justify-content: center;
  /* KEINE eigene transition hier — .btn hat schon Multi-Property-Transitions
     (transform, box-shadow, background-color). Ein eigenes `transition:`
     hätte die alle ersetzt → Hover springt instant. */
}
.unlock-form__submit.is-success {
  /* Erfolgs-State: Text wechselt via JS, Klicks blockieren bis Modal zu. */
  pointer-events: none;
}

/* Channels-Liste (Tab 2) — zwei Karten nebeneinander, vertikales Inhalts-Layout */
.unlock-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.unlock-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-primary);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-default),
              background-color var(--duration-base) var(--ease-default);
}
.unlock-channel:hover,
.unlock-channel:focus-visible {
  border-color: var(--color-gold);
  background: var(--color-gold-lightest);
}
.unlock-channel:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.unlock-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-gold-lightest);
  color: var(--color-gold-dark);
  flex: 0 0 auto;
}
.unlock-channel__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.unlock-channel__title {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.unlock-channel__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* =========================================================================
   Booking-Modal (Multi-Step-Form als <dialog>)
   -------------------------------------------------------------------------
   Pattern identisch zum unlock-modal (Open/Close-Animation, Backdrop-Fade).
   Card-Look kommt vom __card-Wrapper, nicht vom Form selbst.
   ========================================================================= */

.booking-modal {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(720px, calc(100vw - var(--space-5) * 2));
  max-width: none;
  max-height: calc(100vh - var(--space-5) * 2);
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.booking-modal.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.booking-modal::backdrop {
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  transition: background-color 380ms cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.booking-modal.is-visible::backdrop {
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.booking-modal__card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  max-height: calc(100vh - var(--space-5) * 2);
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
@media (min-width: 48em) {
  .booking-modal__card {
    padding: var(--space-7);
  }
}

.booking-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-base) var(--ease-default);
}
.booking-modal__close:hover,
.booking-modal__close:focus-visible {
  background: var(--opacity-black-5);
  color: var(--text-primary);
}
.booking-modal__close:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.booking-modal__header {
  text-align: center;
  margin-bottom: var(--space-6);
}
.booking-modal__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin: var(--space-2) 0 var(--space-3);
  color: var(--text-primary);
}
.booking-modal__lede {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

/* Progress-Header (oben in der Card) */
.booking-progress {
  margin: 0 0 var(--space-6);
}
.booking-progress__label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
}
.booking-progress__bar {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--opacity-black-5);
  overflow: hidden;
}
.booking-progress__fill {
  height: 100%;
  background: var(--color-gold);
  transition: width var(--duration-slow) var(--ease-out);
  border-radius: var(--radius-full);
}

/* Step-Fieldsets — alle im DOM, JS togglet [hidden] */
.booking-step {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.booking-step[hidden] {
  display: none !important;
}
.booking-step__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--text-primary);
}

/* Nav-Reihe */
.booking-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.booking-nav__back {
  margin-right: auto;       /* drückt Next/Submit nach rechts */
}
.booking-nav__next,
.booking-nav__submit {
  margin-left: auto;
}
/* Zwei Submit-Buttons (E-Mail + WhatsApp): nur der erste schiebt nach rechts,
   der zweite gruppiert sich direkt daneben (Container-gap statt auto-Margin). */
.booking-nav__submit + .booking-nav__submit {
  margin-left: 0;
}
@media (max-width: 47.9375em) {
  .booking-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .booking-nav__back,
  .booking-nav__next,
  .booking-nav__submit {
    margin: 0;
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
 * Cookie-Consent — Banner (fixed bottom) + Settings-Dialog
 * Modal mirrored vom Booking-Pattern; Banner ist eigenständig
 * (no <dialog>) damit Tab-Fokus auf der Seite bleibt.
 * ============================================================ */
.cookie-banner {
  position: fixed;
  inset: auto var(--space-4) var(--space-4) var(--space-4);
  max-width: 880px;
  margin-inline: auto;
  z-index: 9990;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
  padding: var(--space-5);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cookie-banner__inner {
  display: grid;
  gap: var(--space-4);
}
.cookie-banner__title {
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--text-primary);
}
.cookie-banner__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}
.cookie-banner__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.cookie-banner__actions .btn {
  flex: 0 1 auto;
}
/* „Einstellungen" steht links, „Nur notwendige" + „Alle akzeptieren" als
   gepaarte Action-Gruppe rechts. */
.cookie-banner__actions-primary {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
@media (max-width: 47.9375em) {
  .cookie-banner {
    inset: auto var(--space-3) var(--space-3) var(--space-3);
    padding: var(--space-4);
  }
  .cookie-banner__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .cookie-banner__actions-primary {
    flex-direction: column-reverse;
    align-items: stretch;
    width: 100%;
  }
  .cookie-banner__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Settings-Dialog — wie Booking-Modal aufgebaut */
.cookie-settings {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(560px, calc(100vw - var(--space-5) * 2));
  max-width: none;
  max-height: calc(100vh - var(--space-5) * 2);
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie-settings.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.cookie-settings::backdrop {
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  transition: background-color 380ms cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie-settings.is-visible::backdrop {
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.cookie-settings__card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  max-height: calc(100vh - var(--space-5) * 2);
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
.cookie-settings__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-button);
  transition: color 160ms ease, background-color 160ms ease;
}
.cookie-settings__close:hover {
  color: var(--text-primary);
  background-color: var(--bg-subtle);
}
.cookie-settings__header {
  margin-bottom: var(--space-5);
  padding-right: var(--space-6);
}
.cookie-settings__title {
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  color: var(--text-primary);
}
.cookie-settings__lede {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}
.cookie-settings__list {
  list-style: none;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.cookie-cat {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-subtle);
}
.cookie-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.cookie-cat__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.cookie-cat__locked {
  font-size: var(--text-xs);
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.cookie-cat__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}
.cookie-cat__toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
  flex: none;
}
.cookie-cat__toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.cookie-cat__switch {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background-color 200ms ease;
}
.cookie-cat__switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie-cat__toggle input:checked + .cookie-cat__switch {
  background: var(--accent);
}
.cookie-cat__toggle input:checked + .cookie-cat__switch::before {
  transform: translateX(18px);
}
.cookie-cat__toggle input:focus-visible + .cookie-cat__switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cookie-settings__actions {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 47.9375em) {
  .cookie-settings__actions .btn {
    width: 100%;
  }
}