/* ==========================================================================
   Joanna – Mobile Tierphysiotherapie
   --------------------------------------------------------------------------
   Uebersetzt aus dem Claude-Design-Projekt. Dort waren Palette, Schriftpaar
   und Hero-Behandlung noch waehlbar und wurden zur Laufzeit als CSS-Variablen
   gesetzt. Getroffen wurde: Palette "Oliv & Warmweiss", Schrift
   "Clean · Plus Jakarta", Nav "Schwebend (Glas)", Hero "Vollbild" mit der
   Behandlung "Warm & golden". Die Werte stehen hier fest ausgerechnet.
   ========================================================================== */

:root {
  /* Palette "Oliv & Warmweiss" */
  --bg: #faf8f2;
  --surface: #ffffff;
  --ink: #2b2f26;
  --soft: #717466;
  --line: rgba(43, 47, 38, .11);
  --accent: #7d9060;
  --accentDeep: #586d46;
  --tint: #eaeadd;
  --footer-bg: #586d46;

  /* Schriftpaar "Clean · Plus Jakarta"; das Logo bleibt Outfit */
  --ff-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-logo: 'Outfit', system-ui, sans-serif;

  /* ── Eine Skala fuer die ganze Website ──────────────────────────────────
     Damit Schriftgroessen ueberall zusammenpassen: gleiche Rolle = gleicher
     Token, statt Dutzender einzelner px-Werte. */
  --fs-tag: 11px;      /* Uppercase-Pillen (Leistungs-Tags)                  */
  --fs-eyebrow: 13px;  /* Section-Label, Meta, Fusszeilen-Navigation         */
  --fs-small: 14px;    /* kleine Hinweise, Bildunterschriften, Chips         */
  --fs-body: 16px;     /* Standard-Fliesstext, Listen, Formulartext          */
  --fs-lead: 18px;     /* einleitender Absatz unter einer Ueberschrift       */
  --fs-h3: 21px;       /* Karten-, Schritt- und Abschnittstitel (klein)      */
  --fs-logo: 22px;     /* Wortmarke JOANNA in Nav und Fusszeile              */
  --fs-h2: clamp(30px, 4.5vw, 46px);   /* Section-Ueberschriften            */
  --fs-h1: clamp(32px, 5.5vw, 50px);   /* Seiten-Ueberschriften             */
  --fs-sub: clamp(18px, 2.6vw, 27px);  /* Hero-Unterzeile                   */
  --fs-display: clamp(72px, 15vw, 180px); /* JOANNA im Hero                 */

  --paw-on: inline-flex;

  /* Hero "Warm & golden": Fokus 15 %, Overlay 80 %, Waerme 20 %, Haze 20 %,
     Blur 0 — daher kein blur() im Filter und keine Ausgleichs-Skalierung. */
  --hero-pos: 50% 15%;
  /* Fotos laufen ohne Farbfilter, Koernung und Schleier — die liessen die
     Aufnahmen stumpf und wie schlecht aufgeloest wirken. Der abdunkelnde
     Verlauf (--hero-scrim/--hero-overlay) bleibt: Ohne ihn waere die weisse
     Schrift auf dem hellen Foto nicht lesbar. */
  --hero-filter: none;
  --hero-scale: 1;
  --hero-overlay: .72;
  --hero-blend: normal;
  --hero-grain: 0;
  --hero-haze: 0;
  --hero-warm: 0;
  --hero-scrim:
    radial-gradient(112% 98% at 50% 42%, rgba(14, 10, 6, 0) 54%, rgba(12, 8, 4, .5) 100%),
    linear-gradient(180deg, rgba(30, 18, 8, .24) 0%, rgba(30, 18, 8, .03) 38%, rgba(16, 10, 5, .3) 70%, rgba(16, 10, 5, .52) 100%);
}

/* ── Grundlagen ─────────────────────────────────────────────────────────── */

* { box-sizing: border-box }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block }
a { color: inherit }

/* Deutsche Komposita werden schnell laenger als ein schmales Fenster —
   "Behandlungsvereinbarung" ragte als ein einziges Wort heraus. Silbentrennung
   greift dank lang="de" im html-Element. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
}

.wrap { max-width: 1180px; margin: 0 auto }

/* Pfoten-Akzente. Im Design abschaltbar — hier an, per --paw-on. */
.paw { display: var(--paw-on); align-items: center; line-height: 0; flex: none }

/* ── Navigation ─────────────────────────────────────────────────────────── */

.navbar {
  /* Der vertikale Abstand steckt in einer Variablen, weil das offene Menue
     ihn per negativem Rand aufhebt, um buendig an der Pille zu sitzen. */
  --nav-pad-y: 14px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: var(--nav-pad-y) clamp(12px, 4vw, 24px);
}

.navbar-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1120px;
  padding: 9px 10px 9px 26px;
  border-radius: 999px;
  background: rgba(26, 20, 14, .46);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .2);

  /* Schliessen: die Pille bleibt eckig und dunkel, bis das Panel eingerollt
     ist — erst danach rundet sie sich zurueck. Sonst saehe man kurz eine
     runde Pille ueber einem noch sichtbaren Panel. Kurze echte Dauer statt
     eines harten Sprungs — das Panel ist dann ohnehin schon weg. */
  transition:
    border-radius .14s ease .3s,
    background .14s ease .3s,
    border-bottom-color .14s ease .3s;
}

/* Bei offenem Menue verschmelzen Pille und Panel zu einem Glasblock: unten
   eckig, gleiche Deckkraft, und die Trennlinie dazwischen verschwindet.
   Der Wechsel passiert ohne Uebergang: waehrend die Ecken sich langsam
   abrunden, standen an der Nahtstelle helle Kerben, die erst nachtraeglich
   zuwuchsen — genau der Eindruck, dass sich die Ecken "am Ende" vereinen.
   Sofort umgeschaltet lesen Pille und Panel vom ersten Bild an als ein Block,
   und was der Blick verfolgt, ist allein das Ausrollen nach unten. */
.navbar[data-menu-open] .navbar-pill {
  border-radius: 26px 26px 0 0;
  background: rgba(24, 19, 13, .82);
  border-bottom-color: transparent;
  transition: none;
}

.nav-logo {
  font-family: var(--ff-logo);
  font-weight: 700;
  font-size: var(--fs-logo);
  letter-spacing: .16em;
  text-decoration: none;
  color: #fff;
}

.nav-links { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 26px) }

.nav-links a {
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(255, 255, 255, .84);
  transition: color .2s;
  /* Kein Umbruch innerhalb eines Eintrags. Wird es zu eng, staucht die Leiste
     sonst "Ueber mich" auf zwei Zeilen und wird dadurch ploetzlich doppelt so
     hoch — ein kaum sichtbarer Ueberlauf ist das kleinere Uebel und faellt
     beim Testen sofort auf. Der Umschaltpunkt zum Burger ist so gesetzt, dass
     es gar nicht erst dazu kommt. */
  white-space: nowrap;
}

.nav-links a:not(.nav-cta):hover { color: #fff }

.nav-links a.nav-cta {
  color: #fff;
  background: var(--accent);
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
}

.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
}

.nav-burger span { width: 18px; height: 2px; background: #fff; border-radius: 2px }

/* Dunkles Glas, das buendig unter der Pille haengt und beim Oeffnen nach
   unten aufrollt. Der negative obere Rand hebt den Innenabstand der Leiste
   auf, sodass keine Luecke bleibt; die obere Kante entfaellt, damit an der
   Nahtstelle keine doppelte Linie steht. */
.nav-mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  margin: calc(-1 * var(--nav-pad-y)) clamp(12px, 4vw, 24px) 0;
  padding: 6px 10px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 0;
  border-radius: 0 0 26px 26px;
  background: rgba(24, 19, 13, .82);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .35);

  /* Geschlossen: von oben her weggeschnitten. Der Schatten liegt ausserhalb
     der Box, deshalb im offenen Zustand negative Werte — sonst wuerde ihn
     der Zuschnitt mit abschneiden. */
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0 round 0 0 26px 26px);
  transition:
    clip-path .34s cubic-bezier(.2, .7, .3, 1),
    opacity .18s ease,
    visibility 0s linear .34s;
}

.nav-mobile[data-open] {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0 -60px -60px -60px round 0 0 26px 26px);
  transition:
    clip-path .34s cubic-bezier(.2, .7, .3, 1),
    opacity .18s ease,
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .nav-mobile { transition: visibility 0s linear .01s }
  .nav-mobile[data-open] { transition: visibility 0s }
  .navbar-pill { transition: none }
  .navbar[data-menu-open] .navbar-pill { transition: none }
}

.nav-mobile a {
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
  padding: 13px 14px;
  border-radius: 12px;
  transition: background .15s, color .15s;
}

/* Feine Trennlinie zwischen den Links, ausser vor der CTA. */
.nav-mobile a + a:not(.nav-mobile-cta) { border-top: 1px solid rgba(255, 255, 255, .08) }

.nav-mobile a:not(.nav-mobile-cta):active,
.nav-mobile a:not(.nav-mobile-cta):hover { background: rgba(255, 255, 255, .08); color: #fff }

.nav-mobile .nav-mobile-cta {
  text-align: center;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  padding: 13px 18px;
  border-radius: 999px;
  margin-top: 8px;
  border-top: 0;
}

@media (max-width: 939px) {
  .nav-links-d { display: none !important }
  .nav-burger { display: flex !important }
}

/* ── Hero (Vollbild) ────────────────────────────────────────────────────── */

.hero-full {
  position: relative;
  /* Immer volle Bildschirmhoehe — die naechste Sektion darf nie hereinlugen.
     lvh ist die Hoehe OHNE die Browserleisten, also die groesstmoegliche.
     Damit ist der Header nie kuerzer als der Bildschirm. Mit dvh (aktuell
     sichtbare Hoehe) entstand auf dem iPhone genau dann ein Streifen, wenn
     Safari beim Scrollen seine Leisten einzog und das Fenster waechst.
     vh bleibt als Rueckfall fuer aeltere Browser (dort ohnehin = lvh). */
  min-height: 100vh;
  min-height: 100lvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-full-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos);
  filter: var(--hero-filter);
  transform: scale(var(--hero-scale));
}

.hero-full-warm,
.hero-full-scrim,
.hero-full-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-full-warm {
  mix-blend-mode: overlay;
  opacity: var(--hero-warm);
  background: linear-gradient(120deg, rgba(255, 150, 60, .55) 0%, rgba(180, 110, 40, .4) 100%);
}

.hero-full-scrim {
  opacity: var(--hero-overlay);
  mix-blend-mode: var(--hero-blend);
  background: var(--hero-scrim);
}

.hero-full-grain {
  opacity: var(--hero-grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.hero-full-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 48px) clamp(40px, 7vw, 84px);
}

/* Die h1 umfasst Name und Unterzeile und gibt selbst keine Form vor; das
   tun die beiden Kinder. Deshalb hier nur die Aussenabstaende zuruecksetzen
   — h1 braeuchte sonst den Browser-Standardabstand. */
.hero-title { margin: 0 }

.hero-name {
  display: block;
  font-family: var(--ff-logo);
  font-weight: 700;
  line-height: .84;
  letter-spacing: -.01em;
  font-size: var(--fs-display);
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}

/* Schriftart, -groesse und -staerke stehen ausdruecklich da: als Kind einer
   h1 wuerde die Zeile sonst fett und in der Ueberschriftengroesse erben. */
.hero-sub {
  display: block;
  margin: 14px 0 0;
  font-family: var(--ff-body);
  font-weight: 400;
  line-height: 1.35;
  font-size: var(--fs-sub);
  color: rgba(255, 255, 255, .97);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

/* Solange die Navigation zum Burger eingeklappt ist, gibt es im ersten
   Bildschirm sonst keine Handlungsmoeglichkeit — ab 940px steht der Button
   sichtbar in der Leiste und waere hier doppelt.
   (.btn steht weiter unten in der Datei; mit beiden Klassen gewinnt diese
   Regel, ohne dass die Reihenfolge eine Rolle spielt.) */
.btn.hero-cta { display: none }

@media (max-width: 939px) {
  .btn.hero-cta {
    display: inline-flex;
    margin-top: 22px;
    /* Dieselben Masse wie die Schaltflaeche im Burger-Menue, damit beide als
       ein und derselbe Weg gelesen werden. */
    font-size: var(--fs-body);
    padding: 13px 24px;
  }
}

/* Mobil: engerer Kopf-Schulter-Ausschnitt (eigenes Bild via <picture>) und
   der Titel sitzt hoeher statt am aeussersten Rand. Zusaetzlich ein
   kraeftigerer Verlauf unten, damit "JOANNA" klar lesbar ist. */
@media (max-width: 760px) {
  /* Der Handy-Ausschnitt ist bereits hochformatig auf Joanna und Nala
     zugeschnitten — mittig zeigen genuegt, es faellt kaum etwas weg. */
  .hero-full-photo {
    object-position: 50% 50%;
  }
  .hero-full-inner {
    padding-bottom: clamp(54px, 15vw, 96px);
    /* Weil der Header auf die volle Hoehe ohne Leisten geht, liegt sein
       unterer Rand hinter Safaris Leiste. (100lvh - 100svh) ist genau deren
       Hoehe — so viel Abstand mehr, und "JOANNA" bleibt sichtbar. Sind keine
       Leisten da (etwa als Web-App), ist die Differenz null. */
    padding-bottom: calc(clamp(54px, 15vw, 96px) + (100lvh - 100svh));
  }
  /* Extra Abdunklung nur unten, unabhaengig vom Design-Scrim. */
  .hero-full::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(16, 10, 5, 0) 0%, rgba(16, 10, 5, .75) 100%);
  }
}

/* ── Abschnitts-Bausteine ───────────────────────────────────────────────── */

.section { padding: clamp(64px, 10vw, 120px) clamp(18px, 5vw, 48px) }
.section--flush { padding-left: 0; padding-right: 0 }
.section--surface { background: var(--surface) }

/* Fuer Abschnitte, die unten mit einer Schaltflaeche enden: Die schliesst den
   Abschnitt optisch schon ab, darunter wirkt der volle Abstand wie ein Loch.
   Nur unten gekuerzt — oben bleibt der Rhythmus der Seite erhalten. */
.section--knapp-unten { padding-bottom: clamp(30px, 4.5vw, 56px) }

.section-head {
  max-width: 680px;
  margin: 0 auto clamp(40px, 5vw, 60px);
  text-align: center;
}

.eyebrow {
  margin: 0 0 14px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accentDeep);
}

.h2 {
  margin: 0;
  font-family: var(--ff-head);
  font-weight: 500;
  line-height: 1.08;
  font-size: var(--fs-h2);
  color: var(--ink);
  /* Plus Jakarta Sans ersetzt "fi" durch die Ligatur; in Ueberschriftsgroesse
     verschmilzt der i-Punkt sichtbar mit dem f. Im Fliesstext faellt das nicht
     auf, hier schon — deshalb nur fuer Ueberschriften abgeschaltet. */
  font-variant-ligatures: none;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--soft);
}

/* ── Schaltflaechen ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 999px;
}

.btn--primary {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 10px 28px rgba(88, 109, 70, .28);
}

.btn--soft {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(40, 36, 28, .08);
}

.btn--tint { color: var(--accentDeep); background: var(--tint) }

.btn--outline {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
}

.btn--wide { min-width: 210px; text-align: center }

/* Aufklapper "Weiterlesen". Der Trick ist grid-template-rows 0fr -> 1fr:
   das animiert die Hoehe, ohne sie zu kennen. */
.more {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .4s ease;
}

.more[data-open] { grid-template-rows: 1fr }
.more > div { min-height: 0 }

.more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  color: var(--accentDeep);
}

@media (prefers-reduced-motion: reduce) {
  .more { transition: none }
}

/* ── Ueber mich: Flip-Karte ─────────────────────────────────────────────────
   Foto vorne mit CTA, Geschichte auf der Rueckseite. Ohne JS stehen beide
   Seiten untereinander; site.js macht die 3D-Karte daraus und setzt die Hoehe
   auf die jeweils sichtbare Seite. */

/* Kein eigener Innenabstand — die Sektion hat schon denselben Aussenabstand
   wie die Leistungen, dadurch liegen die Kartenkanten exakt uebereinander. */
.ueber-card { max-width: 460px; margin: 0 auto }

.flip { perspective: 1600px }
.flip-inner { position: relative }

/* Vorderseite */
.flip-front {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(40, 36, 28, .14);
}
.flip-front .flip-pad { position: relative; line-height: 0 }
.flip-front img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 44% 40%;
}
.flip-front-warm, .flip-front-veil { position: absolute; inset: 0; pointer-events: none }
/* Die Waerme-Ebene liegt still (siehe --hero-warm); der Verlauf unten bleibt,
   damit die Bildbeschriftung lesbar ist. */
.flip-front-warm {
  mix-blend-mode: overlay;
  opacity: var(--hero-warm);
  background: linear-gradient(120deg, rgba(255, 150, 60, .55), rgba(180, 110, 40, .4));
}
/* Nur noch so viel Abdunklung, dass die Schaltflaeche sicher lesbar ist. */
.flip-front-veil {
  background: linear-gradient(180deg, rgba(18, 12, 6, 0) 55%, rgba(14, 9, 4, .7) 100%);
}
.flip-front-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  line-height: normal;
  padding: clamp(20px, 5vw, 30px);
  display: flex;
}
/* Dezente Glas-Pille in derselben Sprache wie die schwebende Navigation —
   statt einer gruenen Vollflaeche, die auf dem Foto zu laut wirkte. */
.flip-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  padding: 10px 17px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transition: transform .15s, background .15s;
}
.flip-cta:hover { background: rgba(255, 255, 255, .28); transform: translateY(-1px) }

/* Rueckseite */
.flip-back {
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(40, 36, 28, .1);
  margin-top: 18px;   /* Fallback ohne JS: Text steht unter dem Foto */
}
.flip-back .flip-pad { position: relative; padding: clamp(26px, 5vw, 38px) }
.flip-back .eyebrow { margin-bottom: 12px }
.flip-back p { margin: 0 0 14px; font-size: var(--fs-body); line-height: 1.75; color: var(--soft) }
.flip-back strong { color: var(--ink); font-weight: 600 }
.flip-back .ueber-more { margin: 4px 0 22px }

.flip-back-close {
  position: absolute;
  top: 16px; right: 16px;
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Mit JavaScript: echte 3D-Karte */
.flip[data-enhanced] .flip-inner {
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, .12, .2, 1);
}
.flip[data-enhanced][data-flipped] .flip-inner { transform: rotateY(180deg) }
/* Bewusst nur oben/links verankert statt inset:0 — die Seiten sollen ihre
   Hoehe aus dem Inhalt ziehen. Mit fester Hoehe (inset:0) haette der
   Aufklapper "mehr lesen" kein freies Feld und 1fr wuerde zu 0px aufloesen,
   der Text bliebe eingeklappt. */
.flip[data-enhanced] .flip-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip[data-enhanced] .flip-back { transform: rotateY(180deg); margin-top: 0 }
.flip[data-enhanced] .flip-back-close { display: inline-flex }

@media (prefers-reduced-motion: reduce) {
  .flip[data-enhanced] .flip-inner { transition: none }
}

/* Ab Tablet-quer nebeneinander statt drehen: eine 460-px-Karte stuende sonst
   verloren in einem 1280-px-Fenster, waehrend die Leistungen darunter die
   vollen 1180 px nutzen. Dasselbe Markup, nur anderes Layout — site.js nimmt
   hier die 3D-Karte zurueck (kein data-enhanced, keine feste Hoehe). */
@media (min-width: 900px) {
  .ueber-card { max-width: 1180px }

  .flip-inner {
    display: grid;
    grid-template-columns: .85fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
  }

  /* Stapelung und Drehung aufheben — beide Seiten stehen nebeneinander. */
  .flip-face {
    position: static;
    width: auto;
    transform: none;
  }

  /* Neben dem Foto wirkt eine zweite Box zu kastig; der Text steht frei. */
  .flip-back {
    margin-top: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .flip-back .flip-pad { padding: 0 }

  /* Rein flip-spezifische Bedienelemente entfallen hier. */
  .flip-cta,
  .flip-back-close { display: none }
}

/* Chips (auf der Rueckseite) */
.chips { display: flex; flex-wrap: wrap; gap: 8px }

.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(40, 36, 28, .06);
}
.chip .paw { color: var(--accent) }

/* ── Leistungen ─────────────────────────────────────────────────────────── */

/* Raster statt Wisch-Slider: alle Karten sind sofort sichtbar. Eine Spalte
   auf dem Handy, zwei ab Tablet, drei auf breiten Schirmen. */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.4vw, 24px);
}

@media (min-width: 620px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 940px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
}

.svc-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(40, 36, 28, .06);
}

/* Bild oben, festes Seitenverhaeltnis, damit die Karten gleich hoch beginnen. */
.svc-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--accentDeep);
}
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }

.svc-body {
  flex: 1;
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
}

.svc-tag {
  align-self: flex-start;
  font-size: var(--fs-tag);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accentDeep);
  background: var(--tint);
  padding: 5px 12px;
  border-radius: 999px;
}

.svc-title {
  margin: 14px 0 8px;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--ink);
}

.svc-claim { margin: 0 0 8px; font-size: var(--fs-small); font-weight: 700; color: var(--ink) }
.svc-text { margin: 0; font-size: var(--fs-small); line-height: 1.65; color: var(--soft) }

/* ── Ablauf ─────────────────────────────────────────────────────────────── */

.ablauf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  max-width: 840px;
  margin: 0 auto;
  position: relative;
}

.step { text-align: left; padding: 0 clamp(8px, 1.5vw, 20px) }

.step-num {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--ff-head);
  font-size: var(--fs-lead);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 22px;
}

.step h3 {
  margin: 0 0 10px;
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--ink);
}

.step p { margin: 0; font-size: var(--fs-body); line-height: 1.68; color: #54584a; max-width: 36ch }
.step .more p { margin: 12px 0 0 }
.step .more-btn { margin-top: 14px; font-size: var(--fs-small) }

/* Zweiter Einstieg unter den drei Schritten — nur Satz und Schaltflaeche,
   bewusst ohne eigenen Kasten. Laeuft in derselben Spur wie die Schritte und
   traegt deren Innenabstand, damit der Satz genau unter der "01" beginnt und
   nicht frei in der Mitte haengt. */
.ablauf-cta {
  max-width: 840px;
  margin: clamp(30px, 4vw, 46px) auto 0;
  padding: 0 clamp(8px, 1.5vw, 20px);
  text-align: left;
}

.ablauf-cta p {
  margin: 0 0 16px;
  font-size: var(--fs-body);
  color: var(--soft);
}

/* Pfotenspur, die ueber die drei Schritte laeuft. */
.walktrail {
  position: absolute;
  top: 0;
  left: 42%;
  width: 36%;
  height: 62px;
  pointer-events: none;
  z-index: 1;
}

.walktrail .stepprint {
  position: absolute;
  color: var(--accentDeep);
  line-height: 0;
  opacity: .16;
  animation: walkstep 3.4s ease-in-out infinite;
}

@keyframes walkstep {
  0%, 66%, 100% { opacity: .16 }
  12%, 32% { opacity: .7 }
}

@media (max-width: 760px) {
  .walktrail { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .walktrail .stepprint { animation: none; opacity: .3 }
}

/* ── Einzugsgebiet ──────────────────────────────────────────────────────── */

.gebiet {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--accentDeep);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #fff;
}

.gebiet-text { flex: 1 1 360px; min-width: 280px; padding: clamp(36px, 5vw, 64px) }
.gebiet-text .eyebrow { color: rgba(255, 255, 255, .75) }
.gebiet-text .h2 { color: #fff; margin-bottom: 18px }
.gebiet-text p { margin: 0 0 14px; font-size: var(--fs-body); line-height: 1.7; color: rgba(255, 255, 255, .9) }
.gebiet-text p:last-child { margin-bottom: 0 }
.gebiet-text strong { color: #fff; font-weight: 600 }

.gebiet-map {
  flex: 1 1 300px;
  min-width: 260px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 48px);
  background: rgba(255, 255, 255, .06);
}

.radar {
  position: relative;
  width: min(280px, 72vw);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radar-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .35) }
.radar-ring--inner { inset: 22%; border-color: rgba(255, 255, 255, .5) }

.radar-pin {
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  background: #fff;
  transform: rotate(-45deg);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .18);
}

.radar-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.radar .paw { position: absolute; color: #fff }

/* Pfotenspur: jede Pfote leuchtet kurz auf, versetzt ueber --takt, danach
   pausiert die Schleife einen Moment, bevor sie von vorn beginnt.
   Die Drehung steckt im style-Attribut und muss in den Keyframes erhalten
   bleiben — deshalb nur opacity animieren. */
.radar .pfote {
  opacity: 0;
  animation: pfotenspur 5s ease-in-out infinite;
  animation-delay: var(--takt, 0s);
}

@keyframes pfotenspur {
  0%      { opacity: 0 }
  6%, 40% { opacity: .32 }
  70%     { opacity: 0 }
  100%    { opacity: 0 }
}

/* Ohne Bewegung: alle Pfoten ruhig sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .radar .pfote { animation: none; opacity: .26 }
}

/* ── Fusszeile ──────────────────────────────────────────────────────────── */

.footer {
  background: var(--footer-bg);
  color: rgba(255, 255, 255, .82);
  padding: clamp(48px, 7vw, 72px) clamp(18px, 5vw, 48px) 32px;
}

.footer-cols {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
}

.footer-brand { flex: 1 1 280px; min-width: 240px }

.footer-logo {
  margin: 0 0 10px;
  font-family: var(--ff-logo);
  font-weight: 700;
  font-size: var(--fs-logo);
  letter-spacing: .18em;
  color: #fff;
}

.footer-col { flex: 1 1 160px; min-width: 150px }

.footer-col h2 {
  margin: 0 0 12px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.footer-links { display: flex; flex-direction: column; gap: 9px }
.footer-links a { text-decoration: none; font-size: var(--fs-small); color: rgba(255, 255, 255, .8) }

.footer-ig {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  padding: 9px 16px;
  border-radius: 999px;
  margin-top: 12px;
}

/* Das ATM-Siegel ist rund, hat durchsichtige Ecken und besteht aus Gruen und
   einem mittleren Grau. Auf dem olivgruenen Grund der Fusszeile saeuft
   besonders das Grau ab — daher die helle Scheibe darunter.
   height ist ausdruecklich auto: ATMs Code bringt width="302" height="302" als
   Attribute mit. Ohne diese Regel bliebe die Hoehe bei 302px stehen, waehrend
   das mitgelieferte max-width:100% die Breite staucht — das Siegel wuerde
   verzerrt. Der Einbindungscode selbst bleibt dabei unangetastet. */
.footer-siegel {
  display: inline-flex;
  padding: 9px;
  border-radius: 50%;
  background: var(--bg);
}

.footer-siegel img { width: 112px; height: auto }

/* In der schmalen Fusszeile der Unterseiten laeuft das Siegel mit der
   Copyright-Zeile als ein Block. Als eigenstaendiges Flex-Kind rutschte es
   sonst allein in eine eigene Zeile und stand dort verloren.
   flex: 0 0 auto, damit die Scheibe nicht gestaucht wird, wenn der Text
   daneben lang wird. */
.legal-foot-marke {
  display: flex;
  align-items: center;
  gap: 14px;
}

.legal-foot .footer-siegel { padding: 5px; flex: 0 0 auto }
.legal-foot .footer-siegel img { width: 42px }

.footer-legal {
  max-width: 1180px;
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .6);
}

/* ── Schmale, zentrierte Seiten (Danke, 404) ────────────────────────────── */

.page-center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px clamp(18px, 5vw, 40px);
  overflow-x: hidden;
}

.page-center h1 {
  margin: 0 0 16px;
  font-family: var(--ff-head);
  font-weight: 500;
  line-height: 1.08;
  font-size: var(--fs-h1);
  color: var(--ink);
}

.page-center p { margin: 0 0 32px; font-size: var(--fs-lead); line-height: 1.7; color: var(--soft); max-width: 46ch }
.page-center .note { margin: 26px 0 0; font-size: var(--fs-small); color: #9c968b }

.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 40px;
  margin-bottom: 28px;
  box-shadow: 0 14px 36px rgba(88, 109, 70, .3);
  animation: pop .6s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes pop {
  0% { transform: scale(.4); opacity: 0 }
  60% { transform: scale(1.08) }
  100% { transform: scale(1); opacity: 1 }
}

@media (prefers-reduced-motion: reduce) {
  .mark { animation: none }
}

/* Die 404 steht als "4 – Hundefoto – 4"; der Kreis ist die mittlere Null. */
.fourofour {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: clamp(88px, 20vw, 180px);
  line-height: .9;
  color: var(--accent);
}

.fourofour-dog {
  display: inline-block;
  width: .92em;
  height: .92em;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tint);
  box-shadow: inset 0 0 0 6px var(--accent);
  margin: 0 .02em;
}

.fourofour-dog img { width: 100%; height: 100%; object-fit: cover }

/* ── Rechtsseiten (Impressum, Datenschutz) ──────────────────────────────── */

/* Textbreite. Impressum und Datenschutz laufen schmal, die Preisliste
   etwas breiter — die Seite setzt --measure selbst. */
.legal {
  --measure: 760px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.legal-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.legal-bar nav {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 40px);
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.legal-bar .nav-logo { color: var(--accentDeep) }
.legal-bar .zurueck { text-decoration: none; font-size: var(--fs-small); font-weight: 500; color: var(--soft) }

.legal-main {
  flex: 1;
  max-width: var(--measure);
  width: 100%;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 64px) clamp(18px, 5vw, 40px);
}

.legal-main h1 {
  margin: 0 0 8px;
  font-family: var(--ff-head);
  font-weight: 500;
  line-height: 1.06;
  font-size: var(--fs-h1);
  color: var(--ink);
}

.legal-main h2 {
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--ink);
  margin: 36px 0 12px;
}

.legal-main h3 { font-size: var(--fs-body); font-weight: 600; color: var(--ink); margin: 24px 0 8px }
.legal-main p, .legal-main li { font-size: var(--fs-body); line-height: 1.72; color: #4a4843 }
.legal-main p { margin: 0 0 14px }
.legal-main ul { margin: 0 0 14px; padding-left: 20px }

/* Cookie- und Speichernamen in der Datenschutzerklaerung: als solche
   erkennbar, ohne dass eine zweite Schriftart geladen werden muss. */
.legal-main code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--tint);
  color: var(--accentDeep);
}
/* Nur Fliesstext-Links einfaerben. Ohne :not(.btn) gewinnt diese Regel gegen
   .btn--primary & Co. — die Schaltflaechen bekamen dadurch gruene statt
   weisser Schrift, auf gruener Flaeche kaum lesbar. */
.legal-main a:not(.btn) { color: var(--accentDeep) }

/* Label-Klassen sind hier <p> und wuerden sonst von ".legal-main p" auf
   Body-Groesse gezogen — explizit wieder auf die kleine Label-Groesse. */
.legal-main .eyebrow, .legal-main .kachel-titel { font-size: var(--fs-eyebrow) }

.legal-foot {
  background: var(--accentDeep);
  color: rgba(255, 255, 255, .72);
  padding: 32px clamp(18px, 5vw, 40px);
  font-size: var(--fs-small);
}

.legal-foot > div {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

.legal-foot a { color: rgba(255, 255, 255, .72); text-decoration: none }
.legal-foot .links { display: flex; gap: 18px }

/* ── Preisliste ─────────────────────────────────────────────────────────── */

.karte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}

.karte-block { padding: 24px 26px }
.karte-block + .karte-block { border-top: 1px solid var(--line) }

.preis-zeile {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}

/* Ruhige Typografie: drei Groessen und nur EINE Betonungsstufe. Der Preis hatte
   700 und stand damit neben dem Titel (600) als zweite Betonung im Raum. */
.preis-zeile p { margin: 0; font-size: var(--fs-lead); font-weight: 600; color: var(--ink) }
.preis { font-size: var(--fs-lead); font-weight: 600; color: var(--accentDeep); white-space: nowrap }

/* Mit .legal-main davor, sonst gewinnt die allgemeine Absatzregel dieser
   Seite und die Meta-Zeile waere so gross wie der Fliesstext. */
.legal-main .dauer { margin: 6px 0 14px; font-size: var(--fs-small); color: var(--soft) }
.legal-main .klein { font-size: var(--fs-eyebrow) }

/* Auf schmalen Schirmen untereinander — nebeneinander wurde der Titel sonst
   zwischen Text und Preis zerquetscht. */
@media (max-width: 520px) {
  .preis-zeile { flex-direction: column; align-items: flex-start; gap: 2px }
}

.karte ul { margin: 0; padding-left: 18px; font-size: var(--fs-body); line-height: 1.75; color: var(--soft) }

.kachel-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.kachel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
}

.kachel-titel {
  margin: 0 0 10px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accentDeep);
}

.kachel-zeile {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-body);
  color: var(--ink);
  margin-bottom: 6px;
}

.kachel-zeile strong { color: var(--accentDeep) }
.kachel .klein { margin: 8px 0 0; font-size: var(--fs-eyebrow); color: var(--soft) }

/* ── Merkblatt & Vereinbarung ───────────────────────────────────────────── */

/* Karte mit Symbol und Ueberschrift (Merkblatt). */
.info-karten { display: flex; flex-direction: column; gap: 16px }

.info-karte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 26px;
}

.info-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px }

.info-kopf .icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--tint);
  color: var(--accentDeep);
}

.legal-main .info-karte h2 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
}

.info-karte ul { margin: 0; padding-left: 20px }
.info-karte li, .info-karte p { color: var(--soft) }
.info-karte p { margin: 0 }

/* ── Ordnung auf den Unterseiten ─────────────────────────────────────────
   Drei Rollen, die sich nie vermischen:
     1. Inhaltskarte  weiss mit Rahmen   — der eigentliche Inhalt
     2. Hinweis       beige mit Symbol   — Zusatzinfo, NIE mit Schaltflaeche
     3. Abschluss     beige, mittig      — genau einer pro Seite, ganz unten
   Vorher stand Beige mal fuer Hinweis, mal fuer Inhalt, mal fuer Aktion —
   dadurch sagte die Farbe nichts mehr aus. */

/* Zwischenueberschrift ueber einer Gruppe von Karten. */
.legal-main .gruppe-titel {
  margin: 40px 0 14px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accentDeep);
}

.legal-main .gruppe-titel:first-of-type { margin-top: 0 }

/* Hinweiskasten in Markenfarbe, fuer Zusatzinformationen. */
.merk-hinweis {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--tint);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 32px;
}

.merk-hinweis + .merk-hinweis { margin-top: -20px }
.merk-hinweis svg { flex: none; margin-top: 2px; color: var(--accentDeep) }
.legal-main .merk-hinweis p { margin: 0; font-size: var(--fs-small); color: #4a4d40 }
.legal-main .merk-hinweis .titel {
  margin: 0 0 4px;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
}

/* Zwei Dokumentkarten, damit Merkblatt und Vereinbarung nicht als
   Textlinks untergehen. Nebeneinander, ab schmalen Schirmen untereinander. */
.doku-reihe {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 32px;
}

@media (min-width: 620px) {
  .doku-reihe { grid-template-columns: 1fr 1fr }
}

.doku-karte {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}

.doku-karte:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(40, 36, 28, .08);
}

.doku-karte .icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--accentDeep);
}

.legal-main .doku-karte .titel {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
}

.legal-main .doku-karte .zusatz {
  margin: 2px 0 0;
  font-size: var(--fs-eyebrow);
  color: var(--soft);
}

.doku-karte .pfeil { margin-left: auto; color: var(--soft) }

@media (prefers-reduced-motion: reduce) {
  .doku-karte:hover { transform: none }
}

/* Dankesseite: die Bestaetigung steht mittig ueber dem sonst linksbuendigen
   Unterseiten-Inhalt. */
.danke-kopf { text-align: center; margin-bottom: clamp(36px, 5vw, 52px) }
.danke-kopf .mark { margin-bottom: 22px }
.legal-main .danke-kopf p { margin: 0 auto; max-width: 46ch }

/* "Was jetzt passiert" — dieselben Nummernkreise wie der Ablauf auf der
   Startseite, hier aber neben dem Text statt darueber. */
.folge { display: grid; gap: clamp(16px, 2.4vw, 22px); margin: 0 0 34px }

.folge-schritt { display: flex; align-items: center; gap: 16px }

.folge-schritt .step-num {
  flex: none;
  width: 46px;
  height: 46px;
  font-size: var(--fs-body);
  margin: 0;
}

.legal-main .folge-schritt p { margin: 0 }

/* Nummerierte Abschnitte der Vereinbarung. */
.vereinbarung {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: 32px;
}

.punkte { display: flex; flex-direction: column; gap: 22px }

.legal-main .punkt-nr {
  margin: 0 0 8px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accentDeep);
}

.punkte ul { margin: 0; padding-left: 20px }
.punkte li { color: #4a4d40 }

.legal-main .feinabdruck { margin: 24px 0 0; font-size: var(--fs-eyebrow); color: #9a9c8e }

/* Abschlussblock: beendet jede Unterseite auf dieselbe Weise. */
.abschluss {
  background: var(--tint);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 36px);
  margin-top: 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Schaltflaechen im Abschluss stehen nebeneinander, mobil untereinander. */
.abschluss .aktionen { margin-top: 6px; justify-content: center }

.abschluss .siegel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accentDeep);
}

.legal-main .abschluss h2 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
}

.legal-main .abschluss p { margin: 0; max-width: 48ch; color: #4a4d40 }

/* Schaltflaechen-Reihe am Seitenende. */
.aktionen { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 36px }

/* ── Eingebettetes Formular (Tally) ─────────────────────────────────────── */

.formular {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 32px);
}

.formular iframe { display: block; width: 100%; border: 0 }

/* Zwei-Klick-Tor: steht anstelle des Formulars, bis jemand es anfordert. */
.formular-tor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: clamp(6px, 2vw, 18px) 0;
}

.formular-tor .siegel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accentDeep);
}

.legal-main .formular-tor h2 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
}

.legal-main .formular-tor p { margin: 0; max-width: 52ch }
.legal-main .formular-tor .klein { font-size: var(--fs-small); color: var(--soft) }

/* ── Direktkontakt ──────────────────────────────────────────────────────── */

.kontakt-liste { display: grid; gap: 14px; margin: 0 0 32px }

.kontakt-karte {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}

.kontakt-karte:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(40, 36, 28, .07);
}

.kontakt-karte .icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--accentDeep);
}

.kontakt-karte .was { margin: 0; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soft) }
.kontakt-karte .wert { margin: 3px 0 0; font-size: var(--fs-lead); font-weight: 600; color: var(--ink) }
.kontakt-karte .pfeil { margin-left: auto; color: var(--soft); font-size: 20px }

@media (prefers-reduced-motion: reduce) {
  .kontakt-karte:hover { transform: none }
}


/* ── Einblenden beim Scrollen ───────────────────────────────────────────── */

/* Nur wirksam, wenn JS die Elemente vorbereitet — ohne JS bleibt alles
   sichtbar, statt unsichtbar haengen zu bleiben. */
[data-reveal][data-reveal-armed] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}

[data-reveal][data-reveal-shown] { opacity: 1; transform: none }


/* ── Einwilligungsbanner ────────────────────────────────────────────────── */

/* Sitzt unten links statt quer ueber dem Bild: Der Hero soll beim ersten
   Aufschlagen sichtbar bleiben. Auf schmalen Schirmen wird daraus eine
   Karte ueber die volle Breite. Erzeugt wird er von assets/js/consent.js —
   ohne JavaScript gibt es weder Banner noch Analytics. */
.einwilligung {
  position: fixed;
  z-index: 200;
  left: 20px;
  bottom: 20px;
  width: min(420px, calc(100vw - 40px));
  padding: 24px 26px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(40, 36, 28, .18);

  /* Nur die Position wird animiert, nicht die Deckkraft. Ein Banner, der
     wegen einer haengenden Animation unsichtbar ueber der Seite liegt, wuerde
     Klicks abfangen und liesse sich nicht mehr beantworten — 14 px Versatz
     dagegen faellt niemandem auf. Der sichtbare Zustand ist der Normalfall,
     die Animation nur Zierde. */
  animation: einwilligung-auf .35s ease both;
}

@keyframes einwilligung-auf {
  from { transform: translateY(14px) }
}

.einwilligung[hidden] { display: none }

.einwilligung h2 {
  margin: 0 0 8px;
  font-family: var(--ff-head);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
}

.einwilligung p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--soft);
}

/* Beide Knoepfe teilen sich die Zeile zu gleichen Teilen und tragen dieselbe
   Groesse, Schrift und Form. Wer ablehnen will, soll das genauso leicht
   finden wie das Zustimmen — alles andere waere eine erschlichene
   Einwilligung. Unterschiedlich ist nur die Fuellfarbe. */
.einwilligung-knoepfe {
  display: flex;
  gap: 10px;
  margin: 18px 0 14px;
}

.einwilligung-knoepfe button {
  flex: 1 1 0;
  padding: 13px 18px;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 600;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: filter .2s;
}

.einwilligung-knoepfe button:hover { filter: brightness(.94) }
.einwilligung-knoepfe button:focus-visible { outline: 2px solid var(--accentDeep); outline-offset: 3px }

.einwilligung-knoepfe [data-einwilligung="nein"] { color: var(--accentDeep); background: var(--tint) }
.einwilligung-knoepfe [data-einwilligung="ja"] { color: #fff; background: var(--accent) }

/* Zweite Zeile fuer das Terminformular. Steht nur da, wenn es dort etwas
   zurueckzunehmen gibt — beim ersten Aufschlagen bleibt der Banner deshalb
   genau so kurz wie vorher. Bewusst als Nachtrag gestaltet und nicht als
   zweite Frage: Entschieden wird ueber Tally auf der Terminseite. */
.einwilligung-zusatz {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.einwilligung-zusatz[hidden] { display: none }
.einwilligung-zusatz p { flex: 1; font-size: var(--fs-eyebrow) }

.einwilligung-zusatz button {
  flex: none;
  padding: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--accentDeep);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.einwilligung-zusatz button:focus-visible { outline: 2px solid var(--accentDeep); outline-offset: 3px }

.einwilligung-fuss { font-size: var(--fs-eyebrow) }

/* Der Verweis in der Fusszeile traegt die Einzelheiten, die der kurze
   Bannertext bewusst weglaesst. Er muss als Link erkennbar sein, sonst fehlt
   der Einwilligung die Information, auf die sie sich stuetzt. */
.einwilligung p a { color: var(--accentDeep); text-decoration: underline }

@media (max-width: 520px) {
  .einwilligung { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px 20px 16px }

  /* Auf schmalen Displays reicht die halbe Zeile bei 18 px Innenabstand nicht
     fuer "Einverstanden" — der Knopf schiebt sich ueber min-width:auto breiter
     als "Ablehnen". Weniger Abstand und min-width:0 halten beide exakt gleich:
     Die Zustimmung darf nicht groesser ausfallen als die Ablehnung. */
  .einwilligung-knoepfe button { min-width: 0; padding-left: 12px; padding-right: 12px }
}

@media (prefers-reduced-motion: reduce) {
  .einwilligung { animation: none }
}