/* =========================================================================
   Psychotherapiepraxis Lerchenstraße — Stylesheet
   Struktur: 1 Tokens · 2 Basis · 3 Header/Nav · 4 Footer · 5 Bausteine
             6 Startseite · 7 Profilseiten · 8 Rechtstexte · 9 Notfallseite
             10 Utilities
   ========================================================================= */

@import url('fonts.css');

/* ---------- 1 Tokens ---------------------------------------------------- */
:root {
  --sand:            #FAF5EE;
  --beige:           #F4E9DC;
  --beige-border:    #EADFD2;
  --terracotta:      #A8452E;
  --terracotta-dark: #7E3221;
  --navy:            #22384A;
  --navy-dark:       #16283A;
  --gold:            #E8B04B;
  --gold-dark:       #D89C33;
  --ocker:           #D08C2A;
  --rose-light:      #F2DAD3;
  --rose:            #E3A69B;
  --sand-dark:       #E8D8C0;

  --text:            #2A3440;
  --text-secondary:  #4A5563;
  --text-muted:      #6B7280;
  --text-muted-warm: #8A7B6A;
  --on-navy:         #FAF5EE;
  --on-navy-soft:    #B9C4CE;

  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --container: 1100px;
  --container-narrow: 760px;
  --gutter: 28px;

  --radius-pill: 999px;
  --radius-lg: 18px;
  --radius-md: 16px;

  /* Organische Blob-Formen */
  --blob-a: 58% 42% 55% 45% / 52% 48% 60% 40%;
  --blob-b: 45% 55% 60% 40% / 55% 45% 50% 50%;
  --blob-c: 55% 45% 50% 50% / 50% 55% 45% 50%;
  --blob-d: 50% 50% 45% 55% / 55% 45% 50% 50%;

  --transition: 150ms ease;
}

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

html {
  scroll-behavior: smooth;
  /* Sticky Header (ca. 84px) beim Ankersprung freihalten */
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
  /* Die dekorativen Blobs ragen absichtlich über den Viewport hinaus.
     `clip` schneidet sie ab, ohne – anders als `hidden` – einen Scroll-Container
     zu erzeugen, der den sticky Header brechen würde. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip; /* Fallback-Ebene, s. html */
  -webkit-font-smoothing: antialiased;
  /* Lange Komposita ("Behandlungsschwerpunkte", "Aufmerksamkeitsstoerungen")
     sonst breiter als schmale Spalten/Viewports -> wegen overflow-x: clip
     wuerden sie abgeschnitten statt umgebrochen. */
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  /* Trennt lange Komposita mit Trennstrich, statt sie mitten im Wort zu brechen. */
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Nur echte Bandwurmwoerter trennen - kurze Woerter bleiben ungetrennt. */
  hyphenate-limit-chars: 14 7 5;
  -webkit-hyphenate-limit-before: 7;
  -webkit-hyphenate-limit-after: 5;
}
p { margin: 0; }
img { max-width: 100%; display: block; }

a {
  color: var(--terracotta);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}
a:hover { color: var(--terracotta-dark); }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.container { max-width: var(--container); margin: 0 auto; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; }

/* Skip-Link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--terracotta);
  color: var(--sand);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; color: var(--sand); }

/* ---------- 3 Header / Navigation --------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 245, 238, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--beige-border);
}

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.3;
  color: var(--text);
}
.logo:hover { color: var(--text); }
.logo__mark {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
}
.logo__accent { color: var(--terracotta); }
.logo__sub {
  display: block;
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Nur echte Bandwurmwoerter trennen - kurze Woerter bleiben ungetrennt. */
  hyphenate-limit-chars: 14 7 5;
  -webkit-hyphenate-limit-before: 7;
  -webkit-hyphenate-limit-after: 5;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted-warm);
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
}
.nav-desktop a { color: var(--text); }
.nav-desktop a:hover,
.nav-desktop a[aria-current] { color: var(--terracotta); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
}

.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 8px var(--gutter) 20px;
  gap: 14px;
  font-size: 17px;
  font-weight: 600;
  border-top: 1px solid var(--beige-border);
}
.nav-mobile a { color: var(--text); }
.nav-mobile a[aria-current] { color: var(--terracotta); }
.nav-mobile[data-open='true'] { display: flex; }

/* Der ausgeschriebene Praxis-Zusatz im Logo braucht Platz: unterhalb von
   1100px kollidiert die Desktop-Navigation damit, deshalb greift hier schon
   das Burger-Menu statt erst bei 800px. */
@media (max-width: 1099px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
}

/* Auf Handybreite reicht der Platz neben dem Burger-Button sonst nicht mehr
   für den ausgeschriebenen Zusatz. */
@media (max-width: 599px) {
  .site-header__inner { gap: 14px; }
  .logo { font-size: 17px; gap: 10px; }
  .logo__mark { width: 38px; height: 38px; }
  .logo__sub { font-size: 10px; letter-spacing: 0.04em; }
}

/* ---------- 4 Footer ---------------------------------------------------- */
.site-footer {
  background: var(--navy);
  padding: 32px var(--gutter);
}
.site-footer--divided { border-top: 1px solid rgba(250, 245, 238, 0.12); }
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  color: var(--on-navy-soft);
}
.site-footer__nav { display: flex; gap: 24px; }
.site-footer__nav a { color: var(--on-navy); }
.site-footer__nav a:hover { color: var(--gold); }

/* ---------- 5 Wiederkehrende Bausteine ---------------------------------- */
.section { padding: 80px var(--gutter); }
.section--beige { background: var(--beige); }
.section--navy { background: var(--navy); }
.section--plain { max-width: var(--container); margin: 0 auto; }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 12px;
}
.eyebrow--gold { color: var(--gold); }

.section-title { font-size: clamp(27px, 6vw, 34px); color: var(--text); }
.section-title--on-navy { color: var(--on-navy); }

.lead { font-size: 18px; line-height: 1.7; color: var(--text-secondary); text-wrap: pretty; }

.btn {
  display: inline-block;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.btn--primary { background: var(--terracotta); color: var(--sand); }
.btn--primary:hover { background: var(--terracotta-dark); color: var(--sand); }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--gold-dark); color: var(--navy); }
.btn--navy {
  background: var(--navy);
  color: var(--sand);
  padding: 12px 26px;
  font-size: 14.5px;
}
.btn--navy:hover { background: var(--navy-dark); color: var(--sand); }

/* Dekorative Blobs — Position/Größe/Farbe kommt vom Modifier */
.blob {
  position: absolute;
  pointer-events: none;
  border-radius: var(--blob-a);
}

.photo--circle { border-radius: 50%; }
.photo--rounded { border-radius: var(--radius-lg); }
.photo { object-fit: cover; }
/* Hochformat-Portrait: Ausschnitt auf das Gesicht statt auf die Bildmitte. */
.photo--mona { object-position: center 30%; }

/* ---------- 6 Startseite ------------------------------------------------ */
.hero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 90px var(--gutter) 70px;
}
.hero__content { position: relative; max-width: 620px; }
.hero__title {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.15;
  margin-bottom: 24px;
}
.hero__text { margin-bottom: 36px; }
.hero__blob--1 {
  top: -60px; right: -120px;
  width: 380px; height: 340px;
  background: var(--rose-light);
  opacity: 0.7;
}
.hero__blob--2 {
  top: 190px; right: 60px;
  width: 140px; height: 130px;
  background: var(--ocker);
  border-radius: var(--blob-b);
  opacity: 0.55;
}

/* Auf schmalen Viewports liegt der zweite Hero-Blob sonst mitten im Fließtext.
   Er ist rein dekorativ – Lesbarkeit geht vor. */
@media (max-width: 799px) {
  .hero__blob--2 { display: none; }
}

.team-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 28px;
}
.team-card {
  display: block;
  min-width: 0;
  padding: 30px;
  background: var(--sand);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  color: var(--text);
}
.team-card:hover { border-color: var(--terracotta); color: var(--text); }
.team-card__avatar { width: 88px; height: 88px; margin-bottom: 18px; }
.team-card__name { font-size: 22px; margin-bottom: 6px; }
.team-card__role {
  font-size: 14px;
  font-weight: 700;
  color: var(--terracotta);
  margin-bottom: 14px;
}
.team-card__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.team-card__cta { font-size: 14.5px; font-weight: 700; color: var(--terracotta); }

/* Aktuell ungenutzt: die Platzhalter sind raus, das Layout bleibt für das
   geplante Teamfoto und das Foto des Praxisraums stehen. */
.photo-band {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px;
  align-items: center;
}
.photo-band__item { position: relative; }
.photo-band__media { position: relative; width: 100%; height: 300px; }
.photo-band__blob {
  bottom: -22px; left: -22px;
  width: 130px; height: 120px;
  background: var(--navy);
  border-radius: var(--blob-d);
}
.photo-band__dots {
  position: absolute;
  top: -18px; right: -18px;
  width: 100px; height: 92px;
  background-image: radial-gradient(var(--terracotta) 2.2px, transparent 2.4px);
  background-size: 15px 15px;
  opacity: 0.5;
  pointer-events: none;
}

/* Verhaltenstherapie — Collage aus drei Bausteinen: Text oben links, darunter
   das Bildband, und rechts über beide Zeilen hinweg das hochformatige
   Schaubild als hoher Anker. Die linke Spalte ist bewusst breiter, damit die
   Höhen beider Spalten ungefähr zusammenfallen. */
.vt-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-areas:
    "text figure"
    "band figure";
  /* Zeile 2 ist flexibel: Ist das Schaubild höher als Text + Band, wächst
     diese Zeile mit – der Text bleibt oben stehen, statt mitzurutschen. */
  grid-template-rows: auto 1fr;
  column-gap: 48px;
  row-gap: 40px;
  align-items: start;
}
.vt-layout__text { grid-area: text; }
.vt-layout__text .lead { margin-top: 18px; }

.vt-figure {
  grid-area: figure;
  /* Schaubild und Bildband schließen unten auf einer Linie ab. */
  align-self: end;
  position: relative;
  width: 100%;
  margin: 0;
}
.vt-figure__blob {
  top: -28px; left: -32px;
  width: 165px; height: 150px;
  background: var(--rose-light);
  border-radius: var(--blob-c);
  opacity: 0.75;
}
/* Das Schaubild ist ein Dokument: kein Zuschnitt, es bleibt im Originalformat.
   `position: relative` hebt es über den dekorativen Blob. */
.vt-figure__media { position: relative; width: 100%; height: auto; }

/* Bildband ohne Text: ein Triptychon, das die Textspalte unten abschließt. */
.vt-gallery {
  grid-area: band;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.vt-gallery__media {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
/* Hochformat-Aufnahme: die Figuren sitzen im unteren Bilddrittel, der
   4:3-Zuschnitt muss deshalb nach unten wandern. */
.vt-gallery__media--affen { object-position: center 80%; }

/* Nebeneinander wird es unter ~900px zu eng: alles untereinander, das
   Schaubild direkt unter den Text, den es erklärt. */
@media (max-width: 899px) {
  .vt-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "figure" "band";
    row-gap: 36px;
  }
  .vt-figure { max-width: 380px; justify-self: center; }
}

/* Auf Handybreite wären drei Kacheln nebeneinander nur noch Briefmarken. */
@media (max-width: 599px) {
  .vt-gallery { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 32px;
  margin-bottom: 56px;
}
.step__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: var(--blob-c);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.step__badge--rose-light { background: var(--rose-light); }
.step__badge--gold { background: var(--gold); }
.step__badge--rose { background: var(--rose); }
.step__title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--on-navy);
  margin-bottom: 10px;
}
.step__text { font-size: 14.5px; line-height: 1.65; color: var(--on-navy-soft); }

.costs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 24px;
  padding: 28px 32px;
  background: rgba(250, 245, 238, 0.06);
  border: 1px solid rgba(250, 245, 238, 0.15);
  border-radius: var(--radius-lg);
}
.costs__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
}
.costs__text { font-size: 14.5px; line-height: 1.65; color: var(--on-navy-soft); }

.contact-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px;
  align-items: start;
}
.contact__intro { font-size: 16px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 28px; }
.contact__details { display: grid; gap: 14px; font-size: 15.5px; color: var(--text); }
.contact__people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 20px;
  margin-top: 6px;
}
.contact__address { font-style: normal; }
.contact__name { font-weight: 700; margin-bottom: 6px; }
.contact__line { font-size: 14.5px; margin-bottom: 4px; }
.contact__mail { font-size: 14.5px; overflow-wrap: anywhere; }

/* Google-Maps-Consent */
.map-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 320px;
  padding: 36px 30px;
  background: #FFFFFF;
  border: 1px solid var(--beige-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.map-consent__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 52px;
  border-radius: var(--blob-c);
  background: var(--rose-light);
  color: var(--terracotta);
  font-family: var(--font-display);
  font-size: 24px;
}
.map-consent__title { font-size: 16px; font-weight: 700; color: var(--text); }
.map-consent__note {
  max-width: 340px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.map-frame {
  width: 100%;
  height: 360px;
  border: none;
  border-radius: var(--radius-lg);
}
[hidden] { display: none !important; }

/* ---------- 7 Profilseiten ---------------------------------------------- */
.profile-hero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 36px var(--gutter) 24px;
}
.profile-hero__blob {
  top: -40px; right: -100px;
  width: 320px; height: 290px;
  opacity: 0.7;
}
.profile-hero__blob--mona { background: var(--rose-light); }
.profile-hero__blob--lea { background: var(--sand-dark); }
.profile-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}
.profile-hero .eyebrow { margin-bottom: 6px; }
.profile-hero__title {
  font-size: clamp(32px, 4.5vw, 46px);
  line-height: 1.15;
  margin-bottom: 8px;
}
.profile-hero__role {
  font-size: 17px;
  font-weight: 700;
  color: var(--terracotta);
  margin-bottom: 0;
}
.profile-hero__role + .profile-hero__text { margin-top: 22px; }
.profile-hero__text {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.profile-hero__media { position: relative; justify-self: center; min-width: 0; }
.profile-hero__portrait { position: relative; width: 300px; height: 300px; max-width: 100%; }
.profile-hero__portrait-blob {
  bottom: -18px; right: -22px;
  width: 120px; height: 110px;
  border-radius: var(--blob-b);
}
.profile-hero__portrait-blob--mona { background: var(--ocker); opacity: 0.7; }
.profile-hero__portrait-blob--lea { background: var(--navy); opacity: 0.8; }

.section--subpage { padding: 70px var(--gutter); }
.subsection-title { font-size: clamp(25px, 5.6vw, 30px); margin-bottom: 32px; }

.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 18px;
}
.focus-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px;
  background: var(--sand);
  border-radius: var(--radius-md);
}
.focus-card > div { min-width: 0; }
.focus-card__dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: var(--blob-c);
}
.focus-card__dot--terracotta { background: var(--terracotta); }
.focus-card__dot--ocker { background: var(--ocker); }
.focus-card__dot--navy { background: var(--navy); }
.focus-card__dot--rose { background: var(--rose); }
.focus-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Nur echte Bandwurmwoerter trennen - kurze Woerter bleiben ungetrennt. */
  hyphenate-limit-chars: 14 7 5;
  -webkit-hyphenate-limit-before: 7;
  -webkit-hyphenate-limit-after: 5;
}
.focus-card__text { font-size: 14px; line-height: 1.55; color: var(--text-muted); }

/* Zusatzqualifikationen unter den Behandlungsschwerpunkten */
.quali-title { font-size: clamp(20px, 4.4vw, 23px); margin: 48px 0 18px; }
.quali-list {
  display: grid;
  gap: 12px;
  max-width: 720px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.quali-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.quali-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: var(--blob-c);
  background: var(--terracotta);
}

.vita { display: grid; max-width: 720px; }
.vita__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--beige-border);
}
.vita__row > *:empty { display: none; }
.vita__year { font-size: 14.5px; font-weight: 700; color: var(--terracotta); }
.vita__text { min-width: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* Auf sehr schmalen Geraeten reicht die 1fr-Spalte neben der Jahreszahl nicht
   mehr fuer die langen Berufsbezeichnungen -> Jahr ueber den Text stellen. */
@media (max-width: 419px) {
  .vita__row { grid-template-columns: 1fr; gap: 4px; }
}

.cta-band {
  background: var(--navy);
  padding: 60px var(--gutter);
}
.cta-band__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-band__title { font-size: 26px; color: var(--on-navy); margin-bottom: 8px; }
.cta-band__sub { font-size: 15px; color: var(--on-navy-soft); }

/* ---------- 8 Rechtstexte (Impressum, Datenschutz) ---------------------- */
.legal-header { border-bottom: 1px solid var(--beige-border); }
.legal-header__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.legal-header__wordmark { font-family: var(--font-display); font-size: 18px; color: var(--text); }
.legal-header__back { font-size: 14px; font-weight: 700; }

.legal-main {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 70px var(--gutter) 100px;
}
.legal-title { font-size: 36px; margin-bottom: 44px; }
.legal-body {
  display: grid;
  gap: 36px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-secondary);
}
.legal-body h2 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.legal-note { font-size: 13.5px; color: var(--text-muted-warm); }

.legal-footer { border-top: 1px solid var(--beige-border); padding: 32px var(--gutter); }
.legal-footer__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
  color: var(--text-muted-warm);
}
.legal-footer__nav { display: flex; gap: 22px; }
.legal-footer__nav a { color: var(--text-muted-warm); }
.legal-footer__nav a:hover,
.legal-footer__nav a[aria-current] { color: var(--terracotta); }

/* ---------- 9 Notfallseite ---------------------------------------------- */
.notfall-hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--gutter);
}
.notfall-hero__media {
  display: block;
  width: 100%;
  height: auto;
  /* Banner-Zuschnitt: die leeren Ränder oben und unten fallen weg,
     Schriftzug und Figuren bleiben vollständig im Bild. */
  aspect-ratio: 1448 / 760;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
}

/* Schmal wäre der Banner-Zuschnitt nur noch ein Streifen — dann lieber das
   ganze Bild zeigen. */
@media (max-width: 799px) {
  .notfall-hero__media { aspect-ratio: auto; }
}

.notfall-intro { max-width: var(--container-narrow); margin-bottom: 40px; }

.notfall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px;
}
.notfall-card {
  min-width: 0;
  padding: 26px 28px;
  background: var(--sand);
  border-radius: var(--radius-lg);
  font-style: normal;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.notfall-card__name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.notfall-card__tel {
  display: block;
  margin-top: 14px;
  font-weight: 700;
  color: var(--terracotta);
}
.notfall-card__tel a { color: inherit; white-space: nowrap; }

/* ---------- 10 Utilities ------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}