/* ==========================================================================
   EPG – Eva Placheta-Györi | Plastische, Ästhetische und Rekonstruktive Chirurgie
   Statisches Frontend nach 260525_EPG_Website.xd
   Maßsystem: Desktop-Design 1920px → 1rem = 16 Design-px (html: 100vw/120).
   < 600px: Mobile-Design 414px, feste Schriftgrößen.
   ========================================================================== */

/* ---------- Font ---------- */
@font-face {
  font-family: 'Burgess Pro';
  src: url('../Fonts/burgess-regular-pro.woff2') format('woff2'),
       url('../Fonts/burgess-regular-pro.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --green: #006748;
  --cream: #F8E0C2;
  --white: #FFFFFF;
  --grey-embed: #E5E7EB;

  /* Typo Desktop (Design-px/16, mit Lesbarkeits-Untergrenzen für 600–1200px) */
  --fs-hero: max(2.625rem, 21px);      /* 42 */
  --lh-hero: 1.0286;                   /* 43.2/42 */
  --fs-h2: max(2.375rem, 19px);        /* 38 */
  --lh-h2: 1.3026;                     /* 49.5/38 */
  --fs-copy: max(1.640625rem, 15px);   /* 26.25 – Fließtext +5 % (Kundenwunsch) */
  --lh-copy: 1.36;                     /* 34/25 */
  --fs-kicker: max(1.5625rem, 13px);   /* 25 */
  --fs-menu: max(2.625rem, 24px);      /* 42 */
  --lh-menu: 1.655;                    /* 69.5/42 */

  /* Raster */
  --margin: 7.625rem;                  /* 122 */
  --colgap: 2.5rem;                    /* 40 */
  --header-h: 8.75rem;                 /* 140 – Sticky-Kopfbereich Unterseiten */
}

/* Skalierung: 1rem = 100vw/120  →  16px bei 1920 */
html { font-size: calc(100vw / 120); }
@media (min-width: 120em) { html { font-size: 16px; } }

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--cream);
  color: var(--green);
  font-family: 'Burgess Pro', Georgia, serif;
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  min-height: 100vh;
}

/* Seite als 1920er-Block zentriert (≥1920px) */
.page {
  position: relative;
  max-width: 120rem;
  margin-inline: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
/* Fließtext-Links bleiben unterstrichen */
.copy a { text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 0.045em; }
/* Navigation, Menü, Footer, Hero: Unterstreichung nur bei Hover/Fokus */
.site-header__book:hover, .site-header__book:focus-visible,
.hero-id__row a:hover, .hero-id__row a:focus-visible,
.menu__nav a:hover, .menu__nav a:focus-visible,
.site-footer a:hover, .site-footer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 0.045em;
}
/* Hochgestelltes ® */
sup { font-size: 0.55em; line-height: 0; vertical-align: super; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul { list-style: none; }

h1, h2, h3 { font-weight: normal; }

.container { padding-inline: var(--margin); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Sichtbarkeits-Utilities Desktop/Mobile */
.m-only { display: none; }
@media (max-width: 599.98px) {
  .d-only { display: none; }
  .m-only { display: block; }
}

/* Mobile Trennlinie im Hero (zwischen Untertitel und Termin-Link) */
.hero-id__rule--after { display: none; }

/* ==========================================================================
   Logo (SVG-Wortmarke, currentColor)
   ========================================================================== */
.logo-svg { display: block; width: 100%; height: auto; fill: currentColor; }

/* ==========================================================================
   Header – Unterseiten (sticky, kleines Logo zentriert)
   Hamburger links @122/89 (2 Linien 82×3, Abstand 14) · Logo 230 @845/68 ·
   Termin 25px rechts, Baseline 104
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: var(--cream);
}
.site-header__inner { position: relative; height: 100%; }

.site-header__logo {
  position: absolute;
  left: 50%;
  top: 4.25rem;                        /* 68 */
  transform: translateX(-50%);
  width: 14.375rem;                    /* 230 */
  color: var(--green);
}

.burger {
  position: absolute;
  left: var(--margin);
  top: 4.9375rem;                      /* Linien-Zentrum ≈ Logo-Zentrum (95.75) */
  width: 5.125rem;                     /* 82 */
  padding-block: 0.5rem;
  display: block;
}
.burger__line {
  display: block;
  width: 100%;
  height: 0.1875rem;                   /* 3 */
  height: round(up, 0.1875rem, 1px);   /* wie X im Menü: gleiche, volle Pixelstärke */
  background: currentColor;
}
.burger__line + .burger__line {
  margin-top: 0.6875rem;               /* Lücke 11 → Mitte-Abstand 14 */
  margin-top: round(0.6875rem, 1px);
}

.site-header__book {
  position: absolute;
  right: var(--margin);
  top: 4.9375rem;                      /* Text-Zentrum ≈ Logo-Zentrum */
  font-size: var(--fs-kicker);
  line-height: var(--lh-copy);
}

/* ==========================================================================
   Hero – Startseite (100vh, großes Logo → Scroll-Verkleinerung via JS)
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 42rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Logo-Interpolation: JS setzt --p (0 = Hero groß 772/@88, 1 = sticky 230/@68) */
.hero-logo {
  position: fixed;
  left: 50%;
  top: calc(5.5rem + (4.25rem - 5.5rem) * var(--p, 0));
  transform: translateX(-50%);
  width: calc(48.25rem + (14.375rem - 48.25rem) * var(--p, 0));
  color: var(--green);
  z-index: 41;
}

/* Header-Steuerelemente der Startseite: erst nach der Scroll-Transition sichtbar */
.home-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 120rem;
  height: var(--header-h);
  z-index: 40;
  background: var(--cream);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.home-header.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

/* Namenszeile am Hero-Boden:
   Eva | Placheta | Györi · Linie · Untertitel + Termin (42px) */
.hero-id { padding-bottom: 2.8125rem; /* 45 */ }
.hero-id__names {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
}
.hero-id__names span:nth-child(2) { text-align: center; }
.hero-id__names span:nth-child(3) { text-align: right; }
.hero-id__rule {
  border: 0;
  border-top: 1px solid var(--green);
  margin-block: 0.84375rem;            /* Linie mittig zwischen den Zeilen */
}
.hero-id__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--colgap);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
}

/* ==========================================================================
   Kicker (zentrierte 25px-Zeile, z. B. „Leistungsspektrum", „Über mich")
   ========================================================================== */
.kicker {
  font-size: var(--fs-kicker);
  line-height: 1.4;
  text-align: center;
  font-weight: normal;
}

/* ==========================================================================
   CE Leistungskacheln (.ce-tiles)
   3 × 532×260, 1px Rahmen · Hover: grün gefüllt · aktiv: grün gefüllt,
   aktiv+hover: weiß
   ========================================================================== */
.ce-tiles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--colgap);
}
.ce-tiles .kicker { margin-bottom: 2.125rem; /* Kicker-Box → Boxen 1408 */ }
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 16.25rem;                /* 260 */
  border: 1px solid var(--green);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tile:hover, .tile:focus-visible {
  background: var(--green);
  color: var(--cream);
}
.tile[aria-current="page"] {
  background: var(--green);
  color: var(--cream);
}

/* ==========================================================================
   CE Text–Bild-Zweispalter (.ce-textmedia) – „Über mich"
   Links: Kicker (über Spaltenbreite zentriert) + H2 + Copy · Rechts: Bild
   400×564 + Caption; zweites Bild als Hover-Crossfade
   ========================================================================== */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--colgap);
  align-items: start;
}

.ce-textmedia__lead {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  text-align: center;
  margin-bottom: 2.5625rem;            /* Titel-Box 1943+49.5 → Copy 2034 */
}

.ce-textmedia__media {
  justify-self: center;                /* Bild x=1189: mittig in der rechten Spalte (je 209 Rand) */
  width: 25rem;                        /* 400 */
}
.ce-textmedia__frame { position: relative; }
.ce-textmedia__frame img { width: 100%; height: 35.25rem; object-fit: cover; /* 564 */ }
.ce-textmedia__frame .is-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.ce-textmedia__frame:hover .is-hover { opacity: 1; }
.ce-textmedia__caption {
  margin-top: 0.9375rem;               /* Bild-Ende 2507 → Caption 2522 */
  text-align: center;
  font-size: var(--fs-kicker);
  line-height: 1.4;
}

/* ==========================================================================
   CE Read-more (.ce-collapse) – „About Me"
   ========================================================================== */
.ce-collapse__kicker { margin-bottom: 2.125rem; /* Kicker 3442 → Copy 3506 */ }
.ce-collapse__more p + p, .ce-textmedia__copy p + p, .copy p + p { margin-top: 1em; }
.ce-collapse__more { display: none; }
.ce-collapse.is-open .ce-collapse__more { display: block; }
.ce-collapse.is-open .ce-collapse__teaser { display: none; }
.ce-collapse__toggle {
  display: inline-block;
  margin-top: 1em;
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  text-decoration: underline;
  text-underline-offset: 0.14em;
}
.ce-collapse.is-open .ce-collapse__toggle-label--closed,
.ce-collapse:not(.is-open) .ce-collapse__toggle-label--open { display: none; }

/* Copy-Unterüberschrift (z. B. „Wissenschaftliche Publikationen") – laut XD 38px */
.copy h3 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin-top: 4.25rem;
  margin-bottom: 2.125rem;
}

/* ==========================================================================
   CE Copy + Leistungsliste (.ce-textlist) – Unterseiten-Zweispalter
   Links Copy sticky · Rechts Gruppen mit 38px-Überschrift + 65px-Zeilen
   ========================================================================== */
.ce-textlist { padding-top: 10.6875rem; /* Copy-Top 311 − Header 140 = 171 */ }

.ce-textlist__copy { position: sticky; top: calc(var(--header-h) + 4.25rem); /* dockt mit Luft unter dem Header an */ }
.ce-textlist__copy h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin-bottom: 2rem;                 /* Titel-Baseline 349 → Copy-Baseline 106 rel. */
}

.list-group + .list-group { margin-top: 4rem; /* letzte Linie → nächste Überschrift-Baseline 98 */ }
.list-group__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  padding-bottom: 0.8125rem;           /* Überschrift-Baseline → Linie 23 */
  border-bottom: 1px solid var(--green);
}
.list-group__items li {
  /* Zeilenraster 65 = 18 + Zeile 34 + 13; Padding statt Flex, damit
     Inline-Inhalte (z. B. <sup>®</sup>) auf der Baseline bleiben */
  padding-block: 1.125rem 0.8125rem;
  border-bottom: 1px solid var(--green);
}

/* ==========================================================================
   CE Text-Zweispalter (.ce-text2col) – Impressum/Datenschutz
   ========================================================================== */
.ce-text2col { padding-top: 10.6875rem; }
.ce-text2col h1, .ce-text2col h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin-bottom: 2rem;
}

/* ==========================================================================
   Footer (Komponente 12)
   Zeile Name/Berufsbezeichnung · Linie · Linkzeile mit „/"-Trennern
   ========================================================================== */
.site-footer {
  margin-top: 12.5rem;                 /* Abstand Inhalt → Footer 200 */
  padding-bottom: 3.125rem;            /* ~50 bis Seitenende */
}
.site-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--colgap);
  font-size: var(--fs-kicker);
  line-height: var(--lh-copy);
}
.site-footer__rule {
  border: 0;
  border-top: 1px solid var(--green);
  margin-top: 0.5rem;
  margin-bottom: 0.9375rem;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  font-size: var(--fs-kicker);
  line-height: var(--lh-copy);
}
.site-footer__links .sep { user-select: none; }

/* ==========================================================================
   Overlays (Menü + Terminbuchung)
   ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  overflow-y: auto;
}
.overlay.is-open { display: block; }
body.has-overlay { overflow: hidden; }

.overlay__page {
  position: relative;
  max-width: 120rem;
  margin-inline: auto;
  min-height: 100%;
}

/* Schließen-Knopf: X in Burger-Geometrie, morpht beim Öffnen sanft
   aus den zwei horizontalen Linien in das X */
.close {
  position: absolute;
  z-index: 5;
  width: 5.125rem;                     /* wie Burger 82 */
  height: 3.4375rem;                   /* 55 */
}
.close__line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.1875rem;
  height: round(up, 0.1875rem, 1px);   /* identisch mit Burger-Linien */
  margin-top: -0.09375rem;
  background: currentColor;
  transform-origin: 50% 50%;
}
.close__line:nth-child(1) {
  transform: rotate(45deg);
  animation: close-morph-1 0.35s ease both;
}
.close__line:nth-child(2) {
  transform: rotate(-45deg);
  animation: close-morph-2 0.35s ease both;
}
@keyframes close-morph-1 {
  from { transform: translateY(-0.4375rem) rotate(0deg); }
  to   { transform: rotate(45deg); }
}
@keyframes close-morph-2 {
  from { transform: translateY(0.4375rem) rotate(0deg); }
  to   { transform: rotate(-45deg); }
}

/* Overlays sanft einblenden */
.overlay.is-open { animation: overlay-fade 0.25s ease both; }
@keyframes overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Menü-Overlay --- */
.overlay--menu { background: var(--green); color: var(--cream); }
/* Auch der Seitenhintergrund (sichtbar hinter der Safari-URL-Insel/Overscroll) wird grün.
   Safari nimmt die Canvas-Farbe vom Root-Element, daher html UND body. */
html.open-overlay-menu, body.open-overlay-menu { background: var(--green); }
.menu__logo {
  position: absolute;
  left: 50%;
  top: 4.25rem;
  transform: translateX(-50%);
  width: 14.375rem;
}
.overlay--menu .close {
  left: var(--margin);
  top: 4.25rem;                        /* X-Zentrum ≈ Burger-Zentrum (96) */
  color: var(--cream);
}
.menu__nav {
  min-height: 100vh;
  min-height: 100dvh;                  /* Safari: URL-Insel schneidet 100vh ab */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Menüpunkte + Termin zentrieren sich vertikal im Fenster;
   oben (unterm Logo) etwas weniger Raum als unten */
.menu__nav { padding-block: 8rem 12rem; }
.menu__list {
  margin-top: auto;
  font-size: var(--fs-menu);
  line-height: var(--lh-menu);
}
.menu__book {
  display: inline-block;
  margin-top: 3.125rem;
  margin-bottom: auto;
  font-size: var(--fs-menu);
  line-height: var(--lh-menu);
}

/* --- Termin-Overlay --- */
.overlay--booking { background: var(--white); color: var(--green); }
.overlay--booking .close {
  right: var(--margin);
  top: 4.25rem;
}
.overlay--booking .close__line { height: 0.3125rem; height: round(up, 0.3125rem, 1px); margin-top: -0.15625rem; /* 5 */ }
.booking__stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem var(--margin) 4rem;
}
.booking__embed {
  width: 87.0625rem;                   /* 1393 */
  max-width: 100%;
  height: 46.5rem;                     /* 744 */
  background: var(--grey-embed);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

/* ==========================================================================
   Abschnittsabstände Startseite (aus DE-4-Artboard)
   ========================================================================== */
.home-tiles { padding-top: 16.1875rem; }      /* Hero-Ende 1080 → Kicker-Top ~1339 */
.home-about { margin-top: 17.1875rem; }      /* Boxen-Ende 1668 → Titel 1943 = 275 */
.home-about-en { margin-top: 12.5rem; }       /* Copy-Ende → Titel 3248 */
.page-home .site-footer { margin-top: 17.6875rem; }

/* Unterseiten: Kacheln unter der Liste */
.sub-tiles { margin-top: 9.375rem; }          /* 150 */

/* ==========================================================================
   Mobile (< 600px) – 414er-Design, feste Größen
   ========================================================================== */
@media (max-width: 599.98px) {
  html { font-size: 16px; }

  :root {
    --margin: 24px;
    --colgap: 24px;
    --header-h: 70px;
    /* Schriftgrößen −10 % gegenüber dem 414er-Design (Feedback) */
    --fs-hero: 25px;
    --lh-hero: 1.215;
    --fs-h2: 22px;
    --lh-h2: 1.334;
    --fs-copy: 16.8px;               /* Fließtext +5 % */
    --lh-copy: 1.334;
    --fs-kicker: 16px;
    --fs-menu: 25px;
    --lh-menu: 1.215;
  }

  /* --- Header: Top-Bar (Logo links, Termin rechts) + Bottom-Bar (Hamburger) --- */
  .site-header { height: var(--header-h); }
  .site-header__logo {
    left: var(--margin);
    top: 23px;
    transform: none;
    width: 142.5px;
  }
  /* Termin-Link an der Unterkante des Logos ausrichten */
  .site-header__book {
    top: auto;
    bottom: 9px;
    line-height: 1.2;
    font-size: var(--fs-copy);
  }

  /* Hamburger in sticky Bottom-Bar: exakt zentriert, −20 %, näher an der Unterkante */
  .burger {
    position: fixed;
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    padding: 13px 0 17px;              /* Linien 5px höher, weg von der Kante */
    background: var(--cream);
    z-index: 45;
  }
  .burger__line { width: 66px; height: 3px; margin-inline: auto; }
  .burger__line + .burger__line { margin-top: 9px; margin-inline: auto; }

  body { padding-bottom: 48px; }       /* Platz für Bottom-Bar */

  /* --- Hero Startseite: Logo → 142.5, links verankert.
     Startbreite viewportabhängig (24px Rand beidseitig, max. 366 wie im
     414er-Design) – auf schmaleren Geräten (z. B. iPhone 16, 393pt) sonst
     zu nah am rechten Rand. --- */
  .hero { min-height: 100svh; height: auto; }
  .hero-logo {
    left: var(--margin);
    top: 23px;
    transform: none;
    --logo-w: min(366px, calc(100vw - 48px));
    width: calc(var(--logo-w) + (142.5px - var(--logo-w)) * var(--p, 0));
  }
  .home-header { height: var(--header-h); }

  .hero-id { padding-bottom: 80px; }
  .hero-id__names {
    display: block;
    text-align: center;
    font-size: var(--fs-hero);
  }
  .hero-id__rule { margin-block: 13px; }
  .hero-id__row {
    display: block;
    text-align: center;
    margin-top: 8px;
  }
  .hero-id__row .hero-id__book { display: inline-block; margin-top: 12px; }
  .hero-id__sub { display: block; margin-inline: auto; max-width: 310px; }
  .hero-id__rule--after { display: block; border: 0; border-top: 1px solid var(--green); margin-top: 18px; }

  /* Startseite mobil: Hamburger-Bottom-Bar immer sichtbar, Top-Bar + Termin
     erscheinen erst nach der Logo-Verkleinerung.
     transform entfernen: ein transformierter Ancestor würde das
     position:fixed des Hamburgers einfangen. */
  .home-header {
    left: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    pointer-events: none;
    transition: none;
  }
  .home-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cream);
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .home-header.is-active::before { opacity: 1; }
  .home-header .burger { pointer-events: auto; }
  .home-header .site-header__book {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  .home-header.is-active .site-header__book {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease;
  }

  /* --- Kacheln gestapelt 367×179, Abstand 15 --- */
  .ce-tiles__grid { grid-template-columns: 1fr; gap: 15px; margin-top: 25px; }
  .tile { min-height: 179px; font-size: var(--fs-h2); line-height: 32px; }

  /* --- Zweispalter linearisieren --- */
  .grid-2 { grid-template-columns: 1fr; row-gap: 40px; }

  /* Startseite mobil: Bild VOR dem Über-mich-Text */
  .ce-textmedia .grid-2 { display: flex; flex-direction: column; }
  .ce-textmedia__media { order: -1; width: 100%; margin-top: 0; margin-right: 0; justify-self: start; }
  .ce-textmedia__frame img { height: auto; aspect-ratio: 367 / 518; }
  .ce-textmedia__frame .is-hover { display: none; }
  .ce-textmedia__caption { margin-top: 20px; }
  .ce-textmedia__kicker { margin-bottom: 22px; }
  .ce-textmedia__title { margin-bottom: 26px; }

  .home-about { margin-top: 100px; }
  .home-about-en { margin-top: 90px; }

  /* --- Unterseiten-Liste --- */
  .ce-textlist, .ce-text2col { padding-top: 32px; }
  .ce-textlist__copy { position: static; padding-bottom: 0; }
  .list-group__items li {
    min-height: 0;
    display: block;
    padding-block: 14px 9px;           /* gleichmäßig, auch bei zwei Zeilen */
  }
  .list-group + .list-group { margin-top: 56px; }
  .list-group__title { padding-bottom: 9px; }
  .sub-tiles { margin-top: 90px; }

  /* --- Footer mobil: Name/Linie/Titel/Linie/Kontakte/Linie/Links, 12px --- */
  .site-footer { margin-top: 110px; padding-bottom: 26px; }
  .site-footer__mobile {
    text-align: center;
    font-size: 12px;
    line-height: 1.7;
  }
  .site-footer__mobile .site-footer__rule { margin-block: 7px; }
  /* Link-/Kontaktzeilen: volle Breite ausnutzen, kein Umbruch */
  .site-footer__mrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    column-gap: 6px;
    white-space: nowrap;
  }

  /* --- Menü-Overlay mobil --- */
  .menu__logo {
    left: var(--margin);
    top: 23px;
    transform: none;
    width: min(366px, calc(100vw - 48px));
  }
  /* Menü passt immer in die KLEINSTE Viewport-Höhe (URL-Insel ausgeklappt);
     Punkte + Termin zentrieren sich, oben etwas weniger Raum als unten */
  .menu__nav {
    min-height: 100vh;
    min-height: 100svh;
    padding-block: 111px 150px;        /* oben ab Logo-Unterkante, unten über dem X */
  }
  .menu__list {
    margin-top: auto;
    padding-top: 0;
    font-size: var(--fs-menu);
    line-height: 2.13;
  }
  .menu__book { margin-top: 45px; margin-bottom: auto; font-size: var(--fs-menu); }
  /* Schließen unten zentriert (ersetzt Hamburger-Position) */
  .overlay--menu .close {
    position: fixed;
    left: 50%;
    top: auto;
    bottom: 5px;                       /* wie Burger: 5px von der Kante weg */
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
  }
  .overlay--menu .close__line { height: 3px; margin-top: -1.5px; }

  /* --- Termin-Overlay mobil --- */
  .overlay--booking .close { right: 16px; top: 14px; transform: scale(0.6); transform-origin: top right; }
  .booking__stage { padding: 90px 16px 90px; }
  .booking__embed { height: 70svh; }
}

/* Schmale Geräte: Footerzeilen müssen einzeilig bleiben */
@media (max-width: 389.98px) {
  .site-footer__mobile { font-size: 11px; }
}
@media (max-width: 374.98px) {
  .site-footer__mobile { font-size: 10px; }
}

/* ==========================================================================
   Reduzierte Bewegung
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}