/* ============================================================
   FINANZBIBER  ·  Design System
   Vibe: Editorial Luxury (warme Espresso/Creme Welt aus dem Logo)
   Layout: Editorial Split + Asymmetrical Bento
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Farben */
  --ink:        #17100b;
  --espresso:   #2b1a11;
  --bark:       #3e2718;
  --bark-soft:  #55361f;
  --caramel:    #be7b3c;
  --caramel-lt: #d9a066;
  --rust:       #a8391f;
  --rust-lt:    #c4573a;
  --cream:      #fbf7f1;
  --sand:       #f2e9dc;
  --sand-deep:  #e6d8c5;
  --paper:      #ffffff;
  --moss:       #4e6a4a;

  --text:       #241811;
  --text-mute:  #6b584a;
  --text-soft:  #8a7666;

  /* Hairlines & Flächen */
  --line:       rgba(43, 26, 17, .10);
  --line-soft:  rgba(43, 26, 17, .06);
  --line-dark:  rgba(255, 255, 255, .12);
  --shell:      rgba(43, 26, 17, .04);
  --shell-dark: rgba(255, 255, 255, .05);

  /* Diffuse Ambient-Schatten, nie hart */
  --lift-1: 0 1px 2px rgba(43,26,17,.04), 0 6px 16px -8px rgba(43,26,17,.10);
  --lift-2: 0 2px 4px rgba(43,26,17,.04), 0 18px 44px -20px rgba(43,26,17,.20);
  --lift-3: 0 4px 8px rgba(43,26,17,.05), 0 40px 90px -32px rgba(43,26,17,.30);
  --inner-hi: inset 0 1px 1px rgba(255,255,255,.7);
  --inner-hi-dark: inset 0 1px 1px rgba(255,255,255,.10);

  /* Radien: übertriebene Squircles, konzentrisch */
  --r-xl: 2.25rem;
  --r-lg: 1.5rem;
  --r-md: 1rem;
  --r-sm: .625rem;
  --bezel: .5rem;

  /* Typo */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --t-hero:  clamp(2.35rem, 1.5rem + 3.4vw, 4.15rem);
  --t-h1:    clamp(2.3rem, 1.3rem + 4.2vw, 4.25rem);
  --t-h2:    clamp(1.9rem, 1.2rem + 2.9vw, 3.15rem);
  --t-h3:    clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem);
  --t-h4:    clamp(1.1rem, .98rem + .5vw, 1.3rem);
  --t-lead:  clamp(1.05rem, .96rem + .45vw, 1.3rem);
  --t-body:  clamp(1rem, .96rem + .18vw, 1.075rem);
  --t-sm:    .9375rem;
  --t-xs:    .8125rem;

  /* Rhythmus */
  --pad-x: clamp(1.15rem, .5rem + 2.6vw, 2.5rem);
  --sec-y: clamp(5rem, 3rem + 8vw, 11rem);
  --sec-y-sm: clamp(3.5rem, 2.4rem + 5vw, 7rem);
  --wrap: 1240px;
  --wrap-narrow: 780px;

  /* Motion: echte Masse, nie linear */
  --ease:      cubic-bezier(.32, .72, 0, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.68;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern", "liga", "calt";
}

body.is-locked { overflow: hidden; }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

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

::selection { background: var(--caramel); color: #fff; }

/* ---------- 3. Typografie ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.028em;
  color: var(--espresso);
  text-wrap: balance;
  /* Sicherheitsnetz gegen ueberlaufende Komposita wie
     "Auslandskrankenversicherung" in schmalen Karten. */
  overflow-wrap: break-word;
  word-break: normal;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.02em; }
h4 { font-size: var(--t-h4); line-height: 1.3; letter-spacing: -.012em; }

p { text-wrap: pretty; }
strong, b { font-weight: 700; color: var(--espresso); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--text-mute);
  max-width: 62ch;
}
.muted { color: var(--text-mute); }
.tight { max-width: 66ch; }

/* Eyebrow: mikroskopische Pille über jeder Sektionsüberschrift */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .75rem .34rem;
  border-radius: 999px;
  background: var(--shell);
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bark-soft);
  margin-bottom: 1.35rem;
}
.eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rust);
  flex: none;
}
.on-dark .eyebrow,
.eyebrow--dark {
  background: var(--shell-dark);
  border-color: var(--line-dark);
  color: var(--sand-deep);
}
.on-dark .eyebrow::before,
.eyebrow--dark::before { background: var(--caramel-lt); }

.accent { color: var(--rust); }

/* Handgezeichneter Unterstrich, greift den Brush-Look des Logos auf */
.mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.mark::after {
  content: "";
  position: absolute;
  left: -.06em; right: -.06em;
  bottom: .04em;
  height: .34em;
  background: linear-gradient(96deg, rgba(190,123,60,.34), rgba(168,57,31,.26));
  border-radius: .28em .5em .3em .42em;
  transform: rotate(-.5deg);
  z-index: -1;
}

/* ---------- 4. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide { max-width: 1440px; }

.section { padding-block: var(--sec-y); position: relative; }
.section--sm { padding-block: var(--sec-y-sm); }
.section--tight-top { padding-top: var(--sec-y-sm); }

.section--sand { background: var(--sand); }
.section--paper { background: var(--paper); }
.section--dark {
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(190,123,60,.22), transparent 62%),
    radial-gradient(90% 70% at 5% 100%, rgba(168,57,31,.16), transparent 60%),
    var(--espresso);
  color: var(--sand);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6,
.section--dark strong, .section--dark b { color: var(--cream); }

/* Alle Fliesstexte auf dunklem Grund aufhellen.
   Die Standardfarben --text-mute und --text-soft sind fuer helle
   Flaechen gebaut und kaemen hier nur auf rund 2:1 Kontrast.
   Mit cream bei 80 Prozent liegen wir bei ueber 8:1. */
.section--dark p,
.section--dark li,
.section--dark .lead,
.section--dark .muted,
.section--dark .steps p,
.section--dark .ticks li,
.section--dark .risks li,
.section--dark .post p,
.section--dark .bezel__core,
.section--dark .bezel__core p,
.section--dark address,
.section--dark .contact-row__val { color: rgba(242,233,220,.8); }

.section--dark .lead { color: rgba(242,233,220,.84); }
.section--dark .contact-row__val { color: var(--cream); font-weight: 600; }
.section--dark .contact-row__lbl,
.section--dark .stat__lbl,
.section--dark cite { color: rgba(242,233,220,.62); }
.section--dark a:not(.btn):not(.link-arrow):hover { color: var(--cream); }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head p { margin-top: 1.15rem; }

.stack > * + * { margin-top: 1.15rem; }
.stack-lg > * + * { margin-top: 2rem; }

/* Film-Grain: fixed, pointer-events none, nie im Scroll-Container */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--espresso);
  color: var(--cream);
  padding: .85rem 1.4rem;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--espresso);
  --btn-fg: var(--cream);
  --btn-nest: rgba(255,255,255,.14);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .6rem .6rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: var(--lift-1), var(--inner-hi-dark);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .5s var(--ease);
  will-change: transform;
  text-align: left;
}
.btn:hover { box-shadow: var(--lift-2), var(--inner-hi-dark); transform: translateY(-1px); }
.btn:active { transform: scale(.978); }

/* Button-in-Button: Icon sitzt in eigenem Kreis, bündig im Innenpadding */
.btn__nest {
  width: 2rem; height: 2rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--btn-nest);
  transition: transform .55s var(--ease), background-color .55s var(--ease);
}
.btn:hover .btn__nest {
  transform: translate3d(2px, -1px, 0) scale(1.06);
  background: rgba(255,255,255,.24);
}
.btn__nest svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.btn--accent { --btn-bg: var(--rust); --btn-fg: #fff; }
.btn--accent:hover { background: var(--rust-lt); }
.btn--caramel { --btn-bg: var(--caramel); --btn-fg: #241811; --btn-nest: rgba(35,20,12,.13); }
.btn--caramel:hover .btn__nest { background: rgba(35,20,12,.2); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--espresso);
  --btn-nest: var(--shell);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--shell); box-shadow: var(--lift-1); }
.on-dark .btn--ghost, .section--dark .btn--ghost {
  --btn-fg: var(--cream);
  --btn-nest: rgba(255,255,255,.1);
  border-color: var(--line-dark);
}
.on-dark .btn--ghost:hover, .section--dark .btn--ghost:hover { background: rgba(255,255,255,.07); }

.btn--light { --btn-bg: var(--cream); --btn-fg: var(--espresso); --btn-nest: rgba(43,26,17,.09); }
.btn--light:hover .btn__nest { background: rgba(43,26,17,.16); }

.btn--sm { padding: .42rem .42rem .42rem 1.15rem; font-size: var(--t-xs); }
.btn--sm .btn__nest { width: 1.6rem; height: 1.6rem; }
.btn--sm .btn__nest svg { width: 11px; height: 11px; }

/* Haupt-CTA: die Terminbuchung soll sich durch die Seite ziehen
   und dabei sichtbar schwerer wiegen als die Nebenaktionen. */
.btn--lg {
  padding: .78rem .78rem .78rem 1.9rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.012em;
}
.btn--lg .btn__nest { width: 2.35rem; height: 2.35rem; }
.btn--lg .btn__nest svg { width: 15px; height: 15px; }

.btn--block { width: 100%; justify-content: space-between; }

/* Textlink mit wandernder Unterlinie */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--rust);
  position: relative;
}
.link-arrow svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  transition: transform .5s var(--ease);
}
.link-arrow:hover svg { transform: translate3d(3px, -2px, 0); }
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .55s var(--ease);
}
.link-arrow:hover::after { width: calc(100% - 22px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

/* ---------- 6. Double-Bezel Karten ---------- */
/* Aussenschale: Wanne. Innenkern: Platte. Konzentrische Radien. */
.bezel {
  padding: var(--bezel);
  border-radius: var(--r-xl);
  background: var(--shell);
  border: 1px solid var(--line-soft);
  height: 100%;
}
.bezel__core {
  height: 100%;
  padding: clamp(1.5rem, 1.1rem + 1.1vw, 2.15rem);
  border-radius: calc(var(--r-xl) - var(--bezel));
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--lift-1), var(--inner-hi);
  display: flex;
  flex-direction: column;
}
.on-dark .bezel, .section--dark .bezel {
  background: var(--shell-dark);
  border-color: var(--line-dark);
}
.on-dark .bezel__core, .section--dark .bezel__core {
  background: rgba(255,255,255,.045);
  border-color: var(--line-dark);
  box-shadow: var(--inner-hi-dark);
  color: rgba(242,233,220,.8);
}

/* interaktive Variante */
.bezel--hover {
  transition: transform .65s var(--ease), background-color .65s var(--ease);
  will-change: transform;
}
.bezel--hover:hover { transform: translate3d(0, -5px, 0); background: rgba(43,26,17,.06); }
.bezel--hover .bezel__core { transition: box-shadow .65s var(--ease); }
.bezel--hover:hover .bezel__core { box-shadow: var(--lift-2), var(--inner-hi); }
.section--dark .bezel--hover:hover { background: rgba(255,255,255,.08); }

.bezel--flat { background: transparent; border-color: transparent; padding: 0; }
.bezel--flat .bezel__core { border-radius: var(--r-xl); }

/* Ueberschriften in Karten: deutsche Silbentrennung erlauben und
   etwas kleiner setzen. Woerter wie "Krankenzusatzversicherung"
   sprengen sonst jede dreispaltige Kachel. */
.bezel__core h3 {
  font-size: clamp(1.18rem, 1rem + .62vw, 1.5rem);
  line-height: 1.2;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 5 4;
}
.bezel__core h4 { hyphens: auto; -webkit-hyphens: auto; }

/* Bildrahmen richten sich nach dem Foto, nicht nach der Textspalte.
   Ohne das erbt die figure als Rasterzelle die volle Zeilenhoehe,
   das Bild behaelt aber sein Seitenverhaeltnis. Ergebnis war ein
   leerer weisser Streifen unter jedem Foto.
   Ausgenommen ist .tile, dort soll das Bild die Zelle fuellen. */
figure.bezel:not(.tile) {
  height: auto;
  align-self: center;
}
figure.bezel:not(.tile) > .bezel__core {
  height: auto;
  padding: 0;
  overflow: hidden;
}
figure.bezel:not(.tile) img { display: block; width: 100%; }

/* Bildkachel: Foto fuellt die Rasterzelle immer komplett aus,
   egal ob Hoch- oder Querformat. Kein Leerraum darunter. */
.tile { height: 100%; }
.tile .bezel__core {
  position: relative;
  height: 100%;
  min-height: 15rem;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--lift-2);
}
.tile picture { display: contents; }
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 1.1s var(--ease-soft);
  will-change: transform;
}
.tile:hover img { transform: scale(1.04); }
@media (max-width: 940px) {
  .tile .bezel__core { min-height: 17rem; }
}

/* ---------- 7. Icon-Plättchen ---------- */
.chip {
  width: 3rem; height: 3rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(190,123,60,.18), rgba(168,57,31,.1));
  border: 1px solid var(--line);
  box-shadow: var(--inner-hi);
  margin-bottom: 1.35rem;
  color: var(--bark);
}
.chip svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.section--dark .chip {
  background: linear-gradient(150deg, rgba(217,160,102,.24), rgba(196,87,58,.14));
  border-color: var(--line-dark);
  box-shadow: var(--inner-hi-dark);
  color: var(--caramel-lt);
}
.chip--sm { width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); margin-bottom: 0; }
.chip--sm svg { width: 16px; height: 16px; }

/* ---------- 8. Grids ---------- */
.grid { display: grid; gap: clamp(1rem, .6rem + 1.1vw, 1.5rem); }
/* Faengt vergessene Breakpoints ab: sobald eine Spalte schmaler als
   17rem wuerde, bricht das Raster von selbst um. */
.grid--2, .grid--3, .grid--4, .grid--5 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Asymmetrisches Bento */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, .6rem + 1.1vw, 1.5rem);
}
.b-4 { grid-column: span 4; }
.b-5 { grid-column: span 5; }
.b-6 { grid-column: span 6; }
.b-7 { grid-column: span 7; }
.b-8 { grid-column: span 8; }
.b-12 { grid-column: span 12; }
.b-tall { grid-row: span 2; }

/* Editorial Split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 1fr; }
.split--wide-right { grid-template-columns: 1fr 1.15fr; }
.split--top { align-items: start; }

/* Mitlaufendes Bild: bleibt stehen, waehrend der Text daneben
   vorbeiscrollt. Loest zugleich den leeren Bereich unter dem Foto,
   der entstand, weil die Bildspalte auf Zeilenhoehe gestreckt wurde. */
.split--sticky { align-items: start; }
.split--sticky > .sticky-media {
  position: sticky;
  top: 6.5rem;
  align-self: start;
  height: auto;
}
.sticky-media, .sticky-media .bezel__core { height: auto; }
.sticky-media .bezel__core { padding: 0; overflow: hidden; }
.sticky-media img { display: block; width: 100%; }

@media (max-width: 940px) {
  /* Auf kleinen Schirmen kein Sticky, sonst klebt das Bild
     ueber dem Text und blockiert die Lesefläche. */
  .split--sticky > .sticky-media { position: static; }
}

/* ---------- 9. Navigation: Fluid Island ---------- */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: clamp(.65rem, .3rem + 1vw, 1.35rem);
  padding-inline: var(--pad-x);
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem .5rem .5rem 1rem;
  border-radius: 999px;
  background: rgba(251, 247, 241, .72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--lift-1), inset 0 1px 1px rgba(255,255,255,.9);
  transition: box-shadow .6s var(--ease), background-color .6s var(--ease);
}
.nav.is-stuck {
  background: rgba(251, 247, 241, .88);
  box-shadow: var(--lift-2), inset 0 1px 1px rgba(255,255,255,.9);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: none;
  margin-right: auto;
}
.nav__brand img { width: 38px; height: 38px; object-fit: contain; }
.nav__brand-txt {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--espresso);
  line-height: 1;
}
.nav__brand-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 3px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: .15rem;
}
.nav__links a {
  position: relative;
  padding: .5rem .78rem;
  border-radius: 999px;
  font-size: .855rem;
  font-weight: 500;
  color: var(--text-mute);
  white-space: nowrap;
  transition: color .45s var(--ease), background-color .45s var(--ease);
}
.nav__links a:hover { color: var(--espresso); background: var(--shell); }
.nav__links a[aria-current="page"] { color: var(--espresso); font-weight: 600; background: var(--shell); }

.nav__cta { flex: none; }

/* Hamburger mit Morph zu X */
.burger {
  display: none;
  position: relative;
  width: 2.75rem; height: 2.75rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--shell);
  cursor: pointer;
  transition: background-color .45s var(--ease);
}
.burger:hover { background: rgba(43,26,17,.09); }
.burger span {
  position: absolute;
  left: 50%;
  width: 16px; height: 1.7px;
  border-radius: 2px;
  background: var(--espresso);
  transition: transform .6s var(--ease), opacity .35s var(--ease);
}
.burger span:nth-child(1) { top: 50%; transform: translate(-50%, -5px); }
.burger span:nth-child(2) { top: 50%; transform: translate(-50%, -50%); }
.burger span:nth-child(3) { top: 50%; transform: translate(-50%, 3.5px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(.2); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Vollflächiges Menü-Overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(251, 247, 241, .86);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  padding: 6.5rem var(--pad-x) 2.5rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s var(--ease), visibility .55s var(--ease);
}
.menu.is-open { opacity: 1; visibility: visible; }

.menu__inner { max-width: var(--wrap); margin-inline: auto; }
.menu__list { border-top: 1px solid var(--line); }
.menu__list li { border-bottom: 1px solid var(--line); }
.menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem .25rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--espresso);
  /* Staggered Mask Reveal */
  opacity: 0;
  transform: translate3d(0, 2.5rem, 0);
  transition: opacity .7s var(--ease), transform .7s var(--ease), color .4s var(--ease);
}
.menu.is-open .menu__list a { opacity: 1; transform: translate3d(0, 0, 0); }
.menu__list li:nth-child(1) a { transition-delay: .06s; }
.menu__list li:nth-child(2) a { transition-delay: .11s; }
.menu__list li:nth-child(3) a { transition-delay: .16s; }
.menu__list li:nth-child(4) a { transition-delay: .21s; }
.menu__list li:nth-child(5) a { transition-delay: .26s; }
.menu__list li:nth-child(6) a { transition-delay: .31s; }
.menu__list li:nth-child(7) a { transition-delay: .36s; }
.menu__list a:hover { color: var(--rust); }
.menu__list a span {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--text-soft);
}
.menu__foot {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  transition: opacity .7s var(--ease) .42s, transform .7s var(--ease) .42s;
}
.menu.is-open .menu__foot { opacity: 1; transform: none; }

/* ---------- 10. Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(1.25rem, .6rem + 2vw, 2.5rem);
  padding-bottom: clamp(2.25rem, 1.4rem + 3.5vw, 4rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 78% 12%, rgba(190,123,60,.20), transparent 62%),
    radial-gradient(60% 50% at 8% 88%, rgba(168,57,31,.10), transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.hero__title {
  font-size: var(--t-hero);
  line-height: .95;
  letter-spacing: -.04em;
}
.hero__lead { margin-top: 1.05rem; font-size: var(--t-lead); }
.hero .btn-row { margin-top: 1.6rem; }

.hero__trust {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem 2.25rem;
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-mute);
}
.hero__trust svg { width: 17px; height: 17px; flex: none; stroke: var(--rust); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Z-Achsen-Kaskade im Hero-Visual */
.hero__visual { position: relative; }
.hero__frame {
  position: relative;
  border-radius: var(--r-xl);
  padding: var(--bezel);
  background: var(--shell);
  border: 1px solid var(--line-soft);
  box-shadow: var(--lift-3);
  transform: rotate(1.1deg);
}
.hero__frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: min(52vh, 430px);
  object-fit: cover;
  object-position: center 14%;
  border-radius: calc(var(--r-xl) - var(--bezel));
  border: 1px solid var(--line-soft);
}
.hero__badge {
  position: absolute;
  left: -1.25rem;
  bottom: 1.75rem;
  max-width: 15.5rem;
  padding: .55rem;
  border-radius: var(--r-lg);
  background: rgba(251,247,241,.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--lift-2);
  transform: rotate(-1.6deg);
}
.hero__badge-core {
  padding: .9rem 1.05rem;
  border-radius: calc(var(--r-lg) - .55rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--inner-hi);
}
.hero__badge strong { display: block; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.03em; line-height: 1; }
.hero__badge span { display: block; margin-top: .35rem; font-size: var(--t-xs); color: var(--text-mute); line-height: 1.4; }

/* Logo liegt bewusst ueber dem Foto.
   Fester eigener Compositing-Layer, damit es beim Laden nicht aufblitzt:
   der Elternblock animiert einen Blur-Filter, verschachtelte Filter
   wuerden sonst bei jedem Reload einen sichtbaren Repaint ausloesen. */
.hero__logo-float {
  position: absolute;
  right: -1.25rem;
  top: -2.25rem;
  z-index: 3;
  display: block;
  width: clamp(84px, 10vw, 132px);
  aspect-ratio: 280 / 311;
  pointer-events: none;
  transform: rotate(-6deg) translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero__logo-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(43,26,17,.28));
}

/* Kompakter Seitenkopf für Unterseiten */
.pagehead {
  position: relative;
  padding-top: clamp(2.75rem, 1.5rem + 4vw, 5rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  overflow: hidden;
}
.pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(65% 60% at 82% 8%, rgba(190,123,60,.17), transparent 60%);
  pointer-events: none;
}
.pagehead > * { position: relative; }
.pagehead__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 1rem + 3.5vw, 4rem);
  align-items: center;
}
.pagehead__frame {
  padding: var(--bezel);
  border-radius: var(--r-xl);
  background: var(--shell);
  border: 1px solid var(--line-soft);
  box-shadow: var(--lift-2);
  transform: rotate(-1deg);
}
.pagehead__frame img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: calc(var(--r-xl) - var(--bezel));
  border: 1px solid var(--line-soft);
}
/* Portraits im Hochformat: Ausschnitt nach oben ziehen, sonst
   schneidet der 5:4-Rahmen den Kopf ab. */
.pagehead__frame img.is-portrait { object-position: center 10%; }

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  font-size: var(--t-xs);
  color: var(--text-soft);
  margin-bottom: 1.15rem;
}
.crumbs a:hover { color: var(--rust); }
.crumbs li { display: flex; align-items: center; gap: .4rem; }
.crumbs li + li::before { content: "/"; opacity: .5; }

/* ---------- 11. Feature-Listen ---------- */
.ticks li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .8rem;
  color: var(--text-mute);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  background: rgba(190,123,60,.2);
  border: 1px solid rgba(190,123,60,.4);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: .3rem; top: .78em;
  width: .42rem; height: .22rem;
  border-left: 1.6px solid var(--bark);
  border-bottom: 1.6px solid var(--bark);
  transform: rotate(-45deg);
}
.section--dark .ticks li::after { border-color: var(--caramel-lt); }
.ticks strong { color: inherit; }

/* Risiko-Liste (Warnpunkte) */
.risks li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .8rem;
  color: var(--text-mute);
}
.risks li::before {
  content: "";
  position: absolute;
  left: .15rem; top: .58em;
  width: .68rem; height: .68rem;
  border-radius: 2px;
  background: var(--rust);
  opacity: .75;
  transform: rotate(45deg);
}

/* ---------- 12. Prozess-Stepper ---------- */
.steps { counter-reset: s; display: grid; gap: 1rem; }
.steps > li {
  counter-increment: s;
  position: relative;
  padding: var(--bezel);
  border-radius: var(--r-lg);
  background: var(--shell);
  border: 1px solid var(--line-soft);
  transition: transform .6s var(--ease);
}
.steps > li:hover { transform: translate3d(4px, 0, 0); }
.steps__core {
  display: flex;
  gap: 1.15rem;
  padding: 1.25rem 1.4rem;
  border-radius: calc(var(--r-lg) - var(--bezel));
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--inner-hi);
}
.steps__core::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--caramel);
  letter-spacing: -.02em;
  flex: none;
  padding-top: .1rem;
  min-width: 1.9rem;
}
.steps h4 { margin-bottom: .35rem; }
.steps p { font-size: var(--t-sm); color: var(--text-mute); }
.section--dark .steps > li { background: var(--shell-dark); border-color: var(--line-dark); }
.section--dark .steps__core {
  background: rgba(255,255,255,.045);
  border-color: var(--line-dark);
  box-shadow: var(--inner-hi-dark);
  color: rgba(242,233,220,.8);
}

/* ---------- 13. Zahlen ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(1rem, .6rem + 1vw, 1.5rem);
}
.stat { text-align: left; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--espresso);
}
.section--dark .stat__num { color: var(--caramel-lt); }
.stat__lbl {
  display: block;
  margin-top: .65rem;
  font-size: var(--t-sm);
  color: var(--text-mute);
  line-height: 1.45;
}
.section--dark .stat__lbl { color: rgba(242,233,220,.66); }

/* ---------- 14. FAQ Accordion ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem .25rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.34;
  color: var(--espresso);
  transition: color .4s var(--ease);
}
.faq__q:hover { color: var(--rust); }
.faq__ico {
  flex: none;
  width: 1.85rem; height: 1.85rem;
  margin-top: .1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--shell);
  border: 1px solid var(--line);
  position: relative;
  transition: background-color .5s var(--ease), transform .6s var(--ease);
}
.faq__ico::before, .faq__ico::after {
  content: "";
  position: absolute;
  background: var(--bark);
  border-radius: 2px;
  transition: transform .6s var(--ease), opacity .4s var(--ease);
}
.faq__ico::before { width: 11px; height: 1.6px; }
.faq__ico::after { width: 1.6px; height: 11px; }
.faq__q[aria-expanded="true"] .faq__ico { background: var(--rust); border-color: var(--rust); transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__ico::before,
.faq__q[aria-expanded="true"] .faq__ico::after { background: #fff; }
.faq__q[aria-expanded="true"] .faq__ico::after { opacity: 0; transform: scaleY(.2); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .65s var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p {
  padding: 0 3.5rem 1.6rem .25rem;
  color: var(--text-mute);
  font-size: var(--t-sm);
  line-height: 1.72;
}
.faq__a p + p { padding-top: .9rem; }

/* ---------- 15. Ratgeber-Karten ---------- */
.post {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.post__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: .22rem .6rem .26rem;
  border-radius: 999px;
  background: rgba(190,123,60,.14);
  border: 1px solid rgba(190,123,60,.24);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bark);
  margin-bottom: 1.1rem;
}
.post h3 { font-size: 1.16rem; line-height: 1.3; margin-bottom: .7rem; transition: color .45s var(--ease); }
.post:hover h3 { color: var(--rust); }
.post p { font-size: var(--t-sm); color: var(--text-mute); margin-bottom: 1.35rem; }
.post__foot { margin-top: auto; }

/* ---------- 16. Team ---------- */
.team-card__img {
  border-radius: calc(var(--r-xl) - var(--bezel));
  overflow: hidden;
  border: 1px solid var(--line-soft);
  margin-bottom: 1.25rem;
  background: var(--sand);
}
.team-card__img img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 15%;
  transition: transform 1s var(--ease-soft);
  will-change: transform;
}
.bezel--hover:hover .team-card__img img { transform: scale(1.045); }
.team-card h3 { font-size: 1.14rem; margin-bottom: .2rem; }
.team-card__role {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--caramel);
  display: block;
}
.team-card__note {
  margin-top: .6rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-mute);
}

/* ---------- 16b. RATGEBER-ARTIKEL ----------
   Fliesstext in schmaler Spalte. Der Rhythmus kommt ueber die
   Abstaende, nicht ueber zusaetzliche Trennlinien. */
.artikel > * { max-width: 100%; }
.artikel h2 {
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
  margin-top: 2.6rem;
  margin-bottom: .75rem;
}
.artikel > h2:first-child { margin-top: 0; }
.artikel h3 {
  font-size: clamp(1.1rem, .98rem + .45vw, 1.28rem);
  margin-top: 1.7rem;
  margin-bottom: .5rem;
}
.artikel p {
  color: var(--text-mute);
  margin-bottom: 1.05rem;
  max-width: 62ch;
}
.artikel ul { margin: 1.1rem 0 1.5rem; }
/* Im Artikel ist die Liste eine Aufzaehlung, keine Warnung.
   Deshalb ruhiger Punkt statt des roten Quadrats. */
.artikel .risks li::before {
  background: var(--caramel);
  border-radius: 50%;
  opacity: .85;
  width: .45rem;
  height: .45rem;
  left: .35rem;
  top: .72em;
}
.artikel .risks li { padding-left: 1.5rem; }
.artikel .quote { margin: 2rem 0; }

/* Verlinkte Karte: der ganze Kasten ist der Link */
.linkcard { display: block; text-decoration: none; color: inherit; }
.linkcard:hover { text-decoration: none; }
.linkcard .bezel__core h3 { margin-top: .35rem; }

/* ---------- 16c. BEWERTUNGS-KARUSSELL ----------
   Traegt sich selbst: Das Scrollen uebernimmt der Browser per
   scroll-snap. Die Pfeile sind Komfort, ohne JavaScript laesst
   sich die Leiste wischen und per Tastatur bedienen. */
.revs {
  position: relative;
  margin-top: 2rem;
}
.revs__track {
  display: flex;
  gap: clamp(1rem, .6rem + 1.1vw, 1.5rem);
  overflow-x: auto;
  /* Kein scroll-snap: die Leiste dreht sich fortlaufend, ein
     Einrasten wuerde die Bewegung staendig zurueckziehen. */
  padding: .35rem .25rem 1.1rem;
  /* Scrollbalken ausblenden, Funktion bleibt */
  scrollbar-width: none;
}
.revs__track::-webkit-scrollbar { display: none; }
.revs__track:focus-visible { outline: 2px solid var(--caramel); outline-offset: 4px; }

.revs__card {
  flex: 0 0 min(100%, 23rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1.4rem, 1.1rem + .9vw, 1.9rem);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--lift-1);
}
.revs__stars { display: flex; gap: .15rem; }
.revs__stars svg { width: 1.05rem; height: 1.05rem; fill: var(--caramel); }
.revs__text { margin: 0; }
.revs__text p {
  margin: 0;
  color: var(--text-mute);
  font-size: var(--t-sm);
  line-height: 1.65;
}
.revs__by {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: auto;
  padding-top: .6rem;
  border-top: 1px solid var(--line-soft);
}
.revs__avatar {
  flex: 0 0 auto;
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sand);
  color: var(--espresso);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .04em;
}
.revs__name { display: block; font-weight: 600; font-size: var(--t-sm); }
.revs__date { display: block; font-size: var(--t-xs); color: var(--text-mute); }

.revs__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--lift-1);
  cursor: pointer;
  transition: background .3s var(--ease), opacity .3s var(--ease);
}
.revs__nav svg {
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: var(--espresso);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.revs__nav:hover { background: var(--shell); }
.revs__nav[disabled] { opacity: 0; pointer-events: none; }
.revs__nav--prev { left: -1.1rem; }
.revs__nav--next { right: -1.1rem; }

/* Auf schmalen Schirmen stoert die Pfeilnavigation, dort wird gewischt */
@media (max-width: 760px) {
  .revs__nav { display: none; }
  .revs__card { flex-basis: min(88%, 21rem); }
}

/* ---------- 17. CTA-Band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--bezel);
  background: var(--shell);
  border: 1px solid var(--line-soft);
  box-shadow: var(--lift-2);
}
.cta-band__core {
  position: relative;
  padding: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem) clamp(1.5rem, .8rem + 3vw, 3.5rem);
  border-radius: calc(var(--r-xl) - var(--bezel));
  background:
    radial-gradient(85% 110% at 88% 0%, rgba(190,123,60,.32), transparent 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(168,57,31,.22), transparent 58%),
    var(--espresso);
  border: 1px solid var(--line-dark);
  box-shadow: var(--inner-hi-dark);
  color: var(--sand);
  overflow: hidden;
}
.cta-band__core h2 { color: var(--cream); max-width: 20ch; }
.cta-band__core p { color: rgba(242,233,220,.74); margin-top: 1.15rem; max-width: 52ch; }
.cta-band__core .btn-row { margin-top: 2rem; }
.cta-band__biber {
  position: absolute;
  right: clamp(-1.5rem, -3vw, 1rem);
  bottom: -1.5rem;
  width: clamp(110px, 15vw, 200px);
  opacity: .92;
  pointer-events: none;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
}
.cta-band__inner { position: relative; z-index: 1; max-width: 42rem; }

/* ---------- 18. Zitat ---------- */
.quote {
  position: relative;
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(190,123,60,.13), rgba(168,57,31,.06));
  border: 1px solid var(--line);
  box-shadow: var(--inner-hi);
}
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.024em;
  color: var(--espresso);
}
.quote cite {
  display: block;
  margin-top: 1.15rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ---------- 19. Kontakt / Formular ---------- */
.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bark-soft);
  margin-bottom: .45rem;
}
.field .req { color: var(--rust); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .82rem 1rem;
  border-radius: var(--r-sm);
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 2px rgba(43,26,17,.05);
  font-size: var(--t-sm);
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--caramel);
  box-shadow: 0 0 0 3px rgba(190,123,60,.16), inset 0 1px 2px rgba(43,26,17,.04);
}
.field--check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: var(--t-xs);
  color: var(--text-mute);
  line-height: 1.55;
}
.field--check input { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .18rem; accent-color: var(--rust); }
.field--check a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form-note {
  margin-top: 1.15rem;
  font-size: var(--t-xs);
  color: var(--text-soft);
  line-height: 1.55;
}
.form-msg {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  display: none;
}
.form-msg.is-ok { display: block; background: rgba(78,106,74,.12); border: 1px solid rgba(78,106,74,.3); color: #33472f; }
.form-msg.is-err { display: block; background: rgba(168,57,31,.1); border: 1px solid rgba(168,57,31,.28); color: var(--rust); }

.contact-list li + li { margin-top: 1.35rem; }
.contact-list a { transition: color .4s var(--ease); }
.contact-list a:hover { color: var(--rust); }
.contact-row { display: flex; gap: 1rem; align-items: flex-start; }
.contact-row__lbl {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: .2rem;
}
.contact-row__val { font-weight: 600; color: var(--espresso); font-size: 1.02rem; line-height: 1.45; }

/* ---------- 20. Rechtstexte ---------- */
.legal { max-width: 74ch; }
.legal h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.7rem); margin-top: 2.75rem; margin-bottom: .9rem; }
.legal h3 { font-size: 1.08rem; margin-top: 1.85rem; margin-bottom: .55rem; }
.legal h2:first-child, .legal h3:first-child { margin-top: 0; }
.legal p { margin-bottom: 1rem; color: var(--text-mute); font-size: var(--t-sm); line-height: 1.75; }
.legal ul { margin: 0 0 1.15rem; }
.legal ul li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: .5rem;
  color: var(--text-mute);
  font-size: var(--t-sm);
}
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: .3rem; height: .3rem;
  border-radius: 50%;
  background: var(--caramel);
}
.legal a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.legal address { font-style: normal; color: var(--text-mute); font-size: var(--t-sm); line-height: 1.75; margin-bottom: 1rem; }

/* ---------- 21. Footer ---------- */
.footer {
  background: var(--espresso);
  color: rgba(242,233,220,.66);
  padding-top: clamp(3.5rem, 2.2rem + 4.5vw, 6rem);
  padding-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 92% 0%, rgba(190,123,60,.14), transparent 62%);
  pointer-events: none;
}
.footer > * { position: relative; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.05fr;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.footer__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.35rem; }
.footer__brand img { width: 52px; height: 52px; object-fit: contain; }
.footer__brand-txt { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; color: var(--cream); line-height: 1; }
.footer__brand-sub { display: block; font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--caramel-lt); margin-top: 4px; }
.footer p { font-size: var(--t-sm); line-height: 1.7; max-width: 34ch; }

.footer h3 {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--caramel-lt);
  margin-bottom: 1.15rem;
}
.footer__links li + li { margin-top: .62rem; }
.footer__links a { font-size: var(--t-sm); transition: color .4s var(--ease), transform .4s var(--ease); display: inline-block; }
.footer__links a:hover { color: var(--cream); transform: translateX(3px); }

.footer address { font-style: normal; font-size: var(--t-sm); line-height: 1.75; }
.footer address a:hover { color: var(--cream); }

.socials { display: flex; gap: .55rem; margin-top: 1.35rem; }
.socials a {
  width: 2.35rem; height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-dark);
  transition: background-color .45s var(--ease), transform .45s var(--ease);
}
.socials a:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.footer__bar {
  margin-top: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 1.35rem; }
.footer__bar a:hover { color: var(--cream); }

/* ---------- 22. Mobile Sticky Aktionsleiste ---------- */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 35;
  display: none;
  gap: .5rem;
  padding: .55rem var(--pad-x) calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(251,247,241,.88);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--line);
}
.dock .btn { flex: 1; justify-content: center; padding-left: 1rem; }
.dock .btn__nest { display: none; }

/* ---------- 23. Scroll-Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 3.5rem, 0);
  filter: blur(6px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft), filter .9s var(--ease-soft);
  will-change: transform, opacity;
}
.reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }

/* Fuer Bloecke mit gefilterten Kindern (z. B. das Hero-Logo mit drop-shadow).
   Ohne Blur am Elternteil gibt es keinen Filter im Filter und damit kein
   Flackern beim Laden. */
.reveal--sharp { filter: none; }
.reveal--sharp.is-in { filter: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .4s; }

/* ---------- 24. Consent-Banner ---------- */
.consent {
  position: fixed;
  left: 50%;
  bottom: clamp(.75rem, 2vw, 1.5rem);
  transform: translate3d(-50%, 130%, 0);
  z-index: 70;
  width: min(46rem, calc(100vw - 2 * var(--pad-x)));
  padding: var(--bezel);
  border-radius: var(--r-xl);
  background: rgba(251,247,241,.9);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: var(--lift-3);
  transition: transform .8s var(--ease), opacity .6s var(--ease);
  opacity: 0;
  visibility: hidden;
}
.consent.is-shown { transform: translate3d(-50%, 0, 0); opacity: 1; visibility: visible; }
.consent__core {
  padding: clamp(1.15rem, .9rem + .8vw, 1.65rem);
  border-radius: calc(var(--r-xl) - var(--bezel));
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--inner-hi);
}
.consent h2 { font-size: 1.05rem; margin-bottom: .5rem; }
.consent p { font-size: var(--t-xs); color: var(--text-mute); line-height: 1.6; }
.consent p a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.15rem; }
.consent__actions .btn { flex: 1 1 auto; justify-content: center; padding-left: 1.25rem; }
.consent__actions .btn__nest { display: none; }

/* ============================================================
   25. WHATSAPP-WIDGET (unten rechts)
   Button plus Panel mit Profilbild. Oeffnet erst nach Klick
   eine Verbindung zu WhatsApp, vorher fliessen keine Daten.
   ============================================================ */
.wa {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 36;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .85rem;
  transition: transform .7s var(--ease);
  /* Der Container umschliesst das versteckte Panel und waere damit
     eine unsichtbare Flaeche von rund 336 mal 420 Pixeln, die jeden
     Klick darunter abfaengt. Nur die sichtbaren Kinder duerfen reagieren. */
  pointer-events: none;
}
.wa__btn { pointer-events: auto; }
.wa.is-open .wa__panel { pointer-events: auto; }
body.consent-open .wa { transform: translate3d(0, -6.5rem, 0); }

/* --- Auslöser --- */
.wa__btn {
  position: relative;
  width: 3.6rem; height: 3.6rem;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px -4px rgba(37,211,102,.5), 0 18px 40px -16px rgba(43,26,17,.4);
  transition: transform .55s var(--ease-back), box-shadow .55s var(--ease);
  will-change: transform;
}
.wa__btn:hover { transform: scale(1.06); box-shadow: 0 8px 24px -4px rgba(37,211,102,.6), 0 22px 50px -16px rgba(43,26,17,.45); }
.wa__btn:active { transform: scale(.95); }
.wa__btn svg { width: 28px; height: 28px; fill: currentColor; }

/* Icon-Wechsel zu X, wenn geöffnet */
.wa__btn .wa__close {
  position: absolute;
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round;
  opacity: 0;
  transform: rotate(-90deg) scale(.5);
  transition: opacity .4s var(--ease), transform .55s var(--ease);
}
.wa__btn[aria-expanded="true"] .wa__mark { opacity: 0; transform: rotate(90deg) scale(.5); }
.wa__btn[aria-expanded="true"] .wa__close { opacity: 1; transform: rotate(0) scale(1); }
.wa__mark { transition: opacity .4s var(--ease), transform .55s var(--ease); }

/* Pulsierender Ring als dezenter Hinweis */
.wa__ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0;
  animation: wa-ping 3.2s var(--ease-soft) infinite;
  pointer-events: none;
}
.wa__btn[aria-expanded="true"] .wa__ping { animation: none; }
@keyframes wa-ping {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Ungelesen-Punkt */
.wa__dot {
  position: absolute;
  top: -1px; right: -1px;
  width: 1.05rem; height: 1.05rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rust);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid var(--cream);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.wa__btn[aria-expanded="true"] .wa__dot { opacity: 0; transform: scale(.4); }

/* --- Panel --- */
.wa__panel {
  width: min(21rem, calc(100vw - 2rem));
  padding: var(--bezel);
  border-radius: var(--r-xl);
  background: rgba(251,247,241,.82);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: var(--lift-3);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 1.25rem, 0) scale(.92);
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility .6s var(--ease);
}
.wa.is-open .wa__panel { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1); }

.wa__core {
  border-radius: calc(var(--r-xl) - var(--bezel));
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--inner-hi);
  overflow: hidden;
}

/* Kopfzeile mit Profilbild */
.wa__head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.15rem;
  background:
    radial-gradient(90% 120% at 92% 0%, rgba(190,123,60,.3), transparent 60%),
    var(--espresso);
  color: var(--cream);
}
.wa__avatar {
  position: relative;
  width: 3rem; height: 3rem;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.28);
  background: var(--sand);
}
.wa__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 12%;
}
.wa__online {
  position: absolute;
  right: 1px; bottom: 1px;
  width: .72rem; height: .72rem;
  border-radius: 50%;
  background: #25d366;
  border: 2px solid var(--espresso);
}
.wa__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.2;
  color: var(--cream);
}
.wa__role {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: rgba(242,233,220,.62);
  line-height: 1.35;
}

/* Nachrichtenbereich */
.wa__body {
  padding: 1.25rem 1.15rem 1.15rem;
  background:
    linear-gradient(0deg, rgba(190,123,60,.05), rgba(190,123,60,.05)),
    var(--paper);
}
.wa__bubble {
  position: relative;
  padding: .85rem 1rem;
  border-radius: .2rem 1rem 1rem 1rem;
  background: var(--sand);
  border: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--text);
  box-shadow: var(--lift-1);
}
.wa__bubble strong { display: block; margin-bottom: .25rem; }
.wa__time {
  display: block;
  margin-top: .45rem;
  font-size: 10px;
  color: var(--text-soft);
  text-align: right;
}
.wa__note {
  margin-top: .9rem;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-soft);
}
.wa__note a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }

.wa__go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  margin-top: 1rem;
  padding: .85rem 1.25rem;
  border-radius: 999px;
  background: #25d366;
  color: #08351a;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: -.005em;
  box-shadow: 0 4px 14px -4px rgba(37,211,102,.55);
  transition: transform .5s var(--ease), background-color .5s var(--ease);
}
.wa__go:hover { background: #1ebe5b; transform: translateY(-1px); }
.wa__go:active { transform: scale(.98); }
.wa__go svg { width: 17px; height: 17px; fill: currentColor; flex: none; }

@media (max-width: 940px) {
  /* Platz für die Aktionsleiste am unteren Rand */
  .wa { bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
  body.consent-open .wa { transform: translate3d(0, -9rem, 0); }
}

@media (max-width: 380px) {
  .wa__btn { width: 3.25rem; height: 3.25rem; }
  .wa__btn svg { width: 25px; height: 25px; }
}

/* ============================================================
   26. TERMINBUCHUNG (Google Kalender, Zwei-Klick-Loesung)
   Der iframe laedt erst nach aktivem Klick. Vorher geht kein
   einziges Byte an Google, damit ist keine Einwilligung noetig.
   ============================================================ */
.booking { position: relative; }
.booking__core {
  position: relative;
  min-height: 30rem;
  padding: 0;
  overflow: hidden;
}

/* Platzhalter vor dem Laden */
.booking__gate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  text-align: center;
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(190,123,60,.14), transparent 65%),
    var(--paper);
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.booking.is-loaded .booking__gate { opacity: 0; visibility: hidden; }

.booking__gate-inner { max-width: 30rem; }
.booking__gate .chip { margin-inline: auto; }
.booking__gate h3 { margin-bottom: .75rem; }
.booking__gate p { color: var(--text-mute); font-size: var(--t-sm); line-height: 1.65; }
.booking__gate .btn-row { margin-top: 1.75rem; justify-content: center; }
.booking__hint {
  margin-top: 1.25rem;
  font-size: var(--t-xs);
  color: var(--text-soft);
  line-height: 1.55;
}
.booking__hint a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }

/* Der eigentliche Kalender */
.booking__frame {
  width: 100%;
  min-height: 30rem;
  border: 0;
  display: block;
  background: var(--paper);
}

/* Kleine Terminkarte fuer andere Seiten */
.booking--compact .booking__core { min-height: 22rem; }
.booking--compact .booking__frame { min-height: 22rem; }

@media (max-width: 640px) {
  .booking__core, .booking__frame { min-height: 34rem; }
}

/* ---------- 27. Utilities ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.mt-4 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1.5rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.divider { height: 1px; background: var(--line); border: 0; margin-block: clamp(2.5rem, 2rem + 2vw, 4rem); }


/* ============================================================
   BAUSTEINE AUF DUNKLEM GRUND
   Es gibt drei dunkle Flaechen: Sektionen, das CTA-Band und den
   Footer. Der Sammelselektor deckt alle drei zugleich ab, damit
   nicht wieder eine Komponente in einem Kontext vergessen wird.
   Steht bewusst am Ende, damit diese Regeln gewinnen.
   ============================================================ */
:is(.section--dark, .cta-band__core, .footer, .on-dark) .btn--ghost {
  --btn-fg: var(--cream);
  --btn-nest: rgba(255,255,255,.12);
  border-color: var(--line-dark);
  color: var(--cream);
}
:is(.section--dark, .cta-band__core, .footer, .on-dark) .btn--ghost:hover {
  background: rgba(255,255,255,.09);
}
:is(.section--dark, .cta-band__core, .footer, .on-dark) .btn--light {
  --btn-bg: var(--cream);
  --btn-fg: var(--espresso);
}

:is(.section--dark, .cta-band__core, .on-dark) .eyebrow {
  background: var(--shell-dark);
  border-color: var(--line-dark);
  color: var(--sand-deep);
}
:is(.section--dark, .cta-band__core, .on-dark) .eyebrow::before { background: var(--caramel-lt); }

:is(.section--dark, .cta-band__core, .footer, .on-dark) .link-arrow { color: var(--caramel-lt); }

:is(.section--dark, .cta-band__core, .footer, .on-dark) .faq,
:is(.section--dark, .cta-band__core, .footer, .on-dark) .faq__item { border-color: var(--line-dark); }
:is(.section--dark, .cta-band__core, .footer, .on-dark) .faq__q { color: var(--cream); }
:is(.section--dark, .cta-band__core, .footer, .on-dark) .faq__q:hover { color: var(--caramel-lt); }
:is(.section--dark, .cta-band__core, .footer, .on-dark) .faq__ico {
  background: var(--shell-dark);
  border-color: var(--line-dark);
}
:is(.section--dark, .cta-band__core, .footer, .on-dark) .faq__ico::before,
:is(.section--dark, .cta-band__core, .footer, .on-dark) .faq__ico::after { background: var(--cream); }
:is(.section--dark, .cta-band__core, .footer, .on-dark) .faq__q[aria-expanded="true"] .faq__ico {
  background: var(--caramel);
  border-color: var(--caramel);
}
:is(.section--dark, .cta-band__core, .footer, .on-dark) .faq__q[aria-expanded="true"] .faq__ico::before,
:is(.section--dark, .cta-band__core, .footer, .on-dark) .faq__q[aria-expanded="true"] .faq__ico::after { background: var(--espresso); }
:is(.section--dark, .cta-band__core, .footer, .on-dark) .faq__a p { color: rgba(242,233,220,.8); }

:is(.section--dark, .cta-band__core, .footer, .on-dark) .post h3 { color: var(--cream); }
:is(.section--dark, .cta-band__core, .footer, .on-dark) .post:hover h3 { color: var(--caramel-lt); }
:is(.section--dark, .cta-band__core, .footer, .on-dark) .post p { color: rgba(242,233,220,.8); }
:is(.section--dark, .cta-band__core, .footer, .on-dark) .post__tag {
  background: rgba(217,160,102,.16);
  border-color: rgba(217,160,102,.3);
  color: var(--caramel-lt);
}

:is(.section--dark, .cta-band__core, .footer, .on-dark) .quote {
  background: linear-gradient(150deg, rgba(217,160,102,.16), rgba(196,87,58,.09));
  border-color: var(--line-dark);
  box-shadow: var(--inner-hi-dark);
}
:is(.section--dark, .cta-band__core, .footer, .on-dark) .quote p { color: var(--cream); }
:is(.section--dark, .cta-band__core, .footer, .on-dark) .quote cite { color: rgba(242,233,220,.62); }

:is(.section--dark, .cta-band__core, .footer, .on-dark) .field label { color: var(--sand-deep); }
:is(.section--dark, .cta-band__core, .footer, .on-dark) .field--check { color: rgba(242,233,220,.78); }
:is(.section--dark, .cta-band__core, .footer, .on-dark) .contact-row__val { color: var(--cream); }
:is(.section--dark, .cta-band__core, .footer, .on-dark) .contact-row__lbl { color: rgba(242,233,220,.62); }

/* ============================================================
   28. RESPONSIVE
   Asymmetrie kollabiert konsequent zu einer Spalte
   ============================================================ */
@media (max-width: 1320px) {
  .nav__links a { padding: .45rem .5rem; font-size: .78rem; }
  .nav__brand-sub { display: none; }
  .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer__grid > *:last-child { grid-column: span 3; padding-top: 1rem; border-top: 1px solid var(--line-dark); }
}

@media (max-width: 1180px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: block; }
  .nav { padding: .5rem .5rem .5rem .85rem; }

  .hero__grid,
  .pagehead__grid,
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }

  .hero__frame, .pagehead__frame, .hero__badge { transform: none; }
  .hero__visual { max-width: 30rem; margin-inline: auto; }
  .hero__logo-float { right: 0; top: -2.5rem; }
  .hero__badge { left: auto; right: .75rem; bottom: -1rem; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-4, .b-5, .b-6, .b-7, .b-8 { grid-column: span 6; }
  .b-tall { grid-row: span 1; }

  .dock { display: flex; }
  body { padding-bottom: 4.2rem; }
  .consent { bottom: 4.6rem; }
}

@media (max-width: 760px) {
  :root { --bezel: .375rem; --r-xl: 1.65rem; --r-lg: 1.2rem; }

  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
  .b-4, .b-5, .b-6, .b-7, .b-8, .b-12 { grid-column: span 12; }

  .hero__grid { gap: 2.5rem; }
  .hero__trust { gap: .9rem 1.5rem; }
  .hero__badge { position: static; max-width: none; margin-top: 1rem; }
  .hero__logo-float { width: 68px; top: -2rem; }

  .btn { width: auto; }
  .btn-row .btn { flex: 1 1 100%; justify-content: space-between; }

  .faq__q { padding: 1.25rem .1rem; gap: 1rem; }
  .faq__a p { padding-right: 1.5rem; }

  .cta-band__biber { width: 92px; right: -.75rem; bottom: -1rem; opacity: .55; }

  .steps__core { flex-direction: column; gap: .5rem; padding: 1.1rem 1.15rem; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__grid > *:last-child { grid-column: span 1; }
  .footer__bar { flex-direction: column; align-items: flex-start; }

  .menu { padding-top: 5.75rem; }
}

/* ---------- 29. A11y & Print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
}

@media print {
  .nav-shell, .menu, .dock, .consent, .grain, .cta-band { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .section { padding-block: 1.5rem; }
}