/* ============================================================
   FRAME — Globale Burger-Menü-Komponente
   Standard/Quelle der Wahrheit = Startseiten-Menü (1:1 übernommen).
   Namespace `frame-*`, damit die Startseite (noch inline) unberührt
   bleibt. Gating über html.frame-menu-compact; den Breakpoint setzt
   menu.js per matchMedia (pro Seite konfigurierbar).
   ============================================================ */

/* HINWEIS: `scrollbar-gutter: stable` stand hier früher, um den Breiten-
   sprung beim Sperren des Body-Scrolls zu verhindern. Nebenwirkung: Ein
   `position: fixed; right: 0`-Panel (unser Menü) positioniert sich dann
   NICHT mehr an der echten Fensterkante, sondern an der um die Gutter-
   Breite (~15px) nach innen verschobenen Kante — sichtbar als grauer/
   weißer Streifen rechts. Der Breitensprung wird stattdessen gezielt in
   menu.js kompensiert (body padding-right beim Öffnen, exakt in Höhe der
   tatsächlichen Scrollbar-Breite), ohne den Viewport global zu verschieben. */

/* Globaler Button-Reset (zentral statt pro Komponente): verhindert auf iOS/
   Android die native Button-Erscheinung/den System-Tap-Highlight, der sich
   als unerwünschter runder Rahmen zeigt (Burger, Slider-Pfeile, Formular-
   Buttons, Teilen-Trigger etc. — alles <button>-Elemente). Ändert nichts an
   Farbe/Form/Fokus der einzelnen Komponenten, nur die native Browser-Chrome. */
button {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Burger-Button (in den vorhandenen Header injiziert) ---- */
.frame-burger { display: none; }
html.frame-menu-compact .frame-burger {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  cursor: pointer;
  position: relative;
  z-index: 61;
  /* Bug (großer schwarzer, abgerundeter Rahmen auf Mobil): <button>-Element
     ohne diese drei Zeilen übernimmt auf iOS/Android teils die native
     Button-Erscheinung (System-Tap-Highlight-Box bzw. Default-Appearance),
     sichtbar als permanent wirkender runder Rahmen nach dem Antippen.
     border:none allein reicht dafür nicht aus. */
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.frame-burger:active { background: none; }
.frame-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.frame-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.frame-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }
.frame-burger:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
/* Bug (dauerhaft sichtbares Viereck um den Burger auf Mobil): beim Schließen
   des Menüs holt sich der Burger den Fokus zurück (burger.focus() in menu.js,
   korrekt für Tastatur-Nutzer nach Escape). Manche mobilen WebKit-Versionen
   werten aber auch einen per Touch/Klick ausgelösten, programmatischen Fokus
   fälschlich als „Tastatur-Fokus" und zeigen dauerhaft den :focus-visible-
   Ring — sichtbar als stehenbleibendes Viereck nach jedem Öffnen/Schließen
   per Antippen. Diese Klasse wird in menu.js nur bei Touch/Klick-Schließen
   kurz gesetzt und unterdrückt den Ring gezielt; bei echtem Escape (Tastatur)
   bleibt der Ring wie gewünscht sichtbar. */
.frame-burger--no-ring:focus-visible { outline: none; }

/* ---- Desktop-Navigation ausblenden, wenn kompakt (beide Header-Systeme) ----
   Der Desktop-Sprachschalter (.frame-lang-switch) ist wieder fest in
   .site-nav__links verschachtelt (s. menu.js) und wird darüber automatisch
   mit ausgeblendet; der mobile Schalter lebt separat im Burger-Panel
   (.frame-menu__lang). */
html.frame-menu-compact .site-nav--landing .site-nav__links,
html.frame-menu-compact .site-nav--landing .city-nav--header,
html.frame-menu-compact .site-header__nav,
html.frame-menu-compact .site-header--with-cities > .city-nav { display: none; }

/* Fix #1: im geöffneten Menü keine kontextuelle Rücknavigation im Header
   (global: Logo links, Burger→X rechts). visibility statt display → kein Layoutsprung. */
body.menu-open .back-link--header { visibility: hidden; }

/* Header über dem Menü-Backdrop halten (Logo/X klar sichtbar, X klickbar) */
html.frame-menu-compact .site-nav--landing,
html.frame-menu-compact .site-header { z-index: 60; }
/* Landing-Header (Startseite): Logo links, Burger rechts im vorhandenen Grid */
html.frame-menu-compact .site-nav--landing .site-nav__wordmark { justify-self: start; }
html.frame-menu-compact .site-nav--landing .frame-burger { grid-column: 3; justify-self: end; }
/* Landing-Header im kompakten Zustand: Höhe deterministisch = --site-header-height,
   damit Header-Unterkante = Hero-Oberkante = Menü-Panel-Oberkante exakt bündig sind.
   (Padding schiebt den Inhalt bei Notch unter die Safe-Area.) */
html.frame-menu-compact .site-nav--landing {
  height: var(--site-header-height);
  min-height: var(--site-header-height);
  padding-top: calc(0.28rem + env(safe-area-inset-top, 0px));
  padding-bottom: 0.24rem;
}
html.frame-menu-compact .site-nav--landing .site-nav__wordmark { padding-top: 0.2rem; padding-bottom: 0.2rem; }

/* Site-Header-Unterseiten (München, Standort, Detail, Eigentümer, Off-Market,
   Mailand) im Kompakt-/Burger-Modus: Logo links, Burger rechts. Ursprünglich
   wurde hier der kontextuelle "← Zur Startseite"-Link mobil komplett
   ausgeblendet (Annahme: Logo genügt als Rückweg, Burger für den Rest).
   Nutzer-Feedback: das ist mobil nicht selbsterklärend genug — daher jetzt
   wieder sichtbar (.back-link--subpage UND .back-link--hero NICHT mehr in
   der folgenden Regel; Mailand nutzt --hero statt --subpage, da absolut
   über dem Hero-Bild positioniert statt im Dokumentfluss unter dem Header —
   überlappt dort nicht mit dem sticky Header, da .mi-hero erst darunter
   beginnt). Nur .back-link--header (Detail-interne Variante innerhalb des
   Headers selbst) bleibt mobil ausgeblendet. */
html.frame-menu-compact .site-header > .back-link--header,
html.frame-menu-compact .om-nav .back-link { display: none; }

/* Frueherer Bug (Rücklink auf Objekt-Detailseiten mobil komplett unsichtbar): diese
   Regel hier oben blendete .back-link--subpage global im Kompakt-Modus aus und
   traf durch die zusätzliche Klasse .back-link--subpage auch den neuen
   Sticky-Rücklink auf den Objekt-Detailseiten und hat ihn unsichtbar gemacht
   (display:none gewinnt durch höhere Selektor-Spezifität gegen die sticky-
   Regel in properties.css). Objekt-Detailseiten brauchen die Rücknavigation
   aber explizit weiterhin (siehe .back-link--object-sticky) — daher hier
   gezielt wieder sichtbar machen, mit einer noch spezifischeren Regel. */
html.frame-menu-compact .back-link--subpage.back-link--object-sticky {
  display: block;
}
html.frame-menu-compact .site-header {
  padding-top: calc(0.28rem + env(safe-area-inset-top, 0px));
  padding-bottom: 0.24rem;
}

/* ---- Overlay/Backdrop: nur das rechte Panel gleitet; links bleibt die Seite frei ---- */
.frame-menu { display: none; }
html.frame-menu-compact .frame-menu {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 55;
  /* transparent — keine Aufhellung/Färbung über dem Hintergrund beim Öffnen */
  background: transparent;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.35s;
}
html.frame-menu-compact .frame-menu.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }

/* ---- Rechtes Panel — gleitet von rechts, minimal transparent ---- */
.frame-menu__panel {
  position: fixed;
  /* Panel läuft über die VOLLE Höhe (top:0). Der opake, höher liegende Header
     (z-index 60) verdeckt den oberen Teil → die SICHTBARE Panel-Oberkante liegt
     dadurch IMMER exakt an der Header-Unterkante, pixelgenau und ohne Messung.
     --frame-menu-top steuert nur noch den oberen Innenabstand (Inhalt klar
     unter dem Header), Fallback bleibt das Token. */
  top: 0;
  right: 0;
  width: 68vw;
  max-width: 30rem;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--frame-menu-top, var(--site-header-height)) + clamp(1.5rem, 4vh, 2.5rem)) max(1.25rem, 4vw) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  /* Ein Live-Test (Screenshot) zeigte: selbst 98-99% Alpha lassen den
     hochkontrastigen weißen Claim-Text/Logo auf dem Hero-Foto noch klar
     lesbar durchscheinen — ein Alpha-Blend reicht hier nicht aus. Deshalb
     jetzt vollständig deckende Farbe (kein Alphakanal) statt rgba().
     KEIN backdrop-filter: Blur auf einer bewegten Fläche ist teuer und
     lässt den Hintergrund beim Reingleiten ruckeln/aufblitzen. */
  background: #F8F7F3;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.frame-menu__panel:focus { outline: none; }
.frame-menu.is-open .frame-menu__panel { transform: translate3d(0, 0, 0); }
@media (max-width: 360px) { .frame-menu__panel { width: 82vw; } }

/* ---- Primär — Städte (dominant) ---- */
.frame-menu__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.95rem; }
.frame-menu__city {
  /* Task: Schriftgröße ~6% reduziert (2.6rem→2.45rem / 1.9rem→1.8rem) und
     Name/Status enger zusammengezogen (0.3rem→0.15rem), damit "Demnächst"
     erkennbar zu München gehört und auf kleinen Höhen mehr Platz bleibt. */
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
  min-height: 44px; justify-content: center;
  font-family: var(--font-serif); font-size: clamp(1.8rem, 7vw, 2.45rem); font-weight: 400;
  line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
}
.frame-menu__city-name { position: relative; display: inline-block; padding-bottom: 0.15rem; }
.frame-menu__city:hover, .frame-menu__city:focus-visible { color: var(--bahama); }
/* aktive Markierung — feine Goldlinie über volle Textbreite (Städte + Sekundär) */
.frame-menu__city[aria-current="page"] .frame-menu__city-name::after,
.frame-menu__secondary a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--bahama);
}
.frame-menu__status {
  font-family: var(--font-ui); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone);
}

/* ---- Sekundär — Für Eigentümer · Off Market · Kontakt ---- */
/* Feine Trennlinie zur Städte-Navigation: macht die drei Gruppen
   (Städte / Sekundär-Nav / Sprache+Kontakt) optisch klar getrennt,
   statt ineinanderzulaufen. */
.frame-menu__secondary {
  /* Task: Abstand zur Städte-Navigation und interne Zeilenabstände
     kompakter, damit auf kleinen Handy-Höhen weniger gescrollt werden muss. */
  margin-top: clamp(1.25rem, 3.5vh, 2.1rem);
  padding-top: clamp(1.1rem, 3vh, 1.75rem);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
}
.frame-menu__secondary a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.1rem 0; font-family: var(--font-serif); font-size: clamp(1.15rem, 4.5vw, 1.4rem);
  font-weight: 400; line-height: 1.15; letter-spacing: -0.005em; color: var(--ink);
  text-decoration: none; transition: color 0.25s ease;
}
.frame-menu__secondary a:hover, .frame-menu__secondary a:focus-visible { color: var(--bahama); }

/* ---- Footer — Kontaktdaten + Sprache ---- */
.frame-menu__foot {
  margin-top: auto;
  padding-top: clamp(1.1rem, 2.75vh, 1.75rem);
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
}
/* Task: die Trennlinie über der volle Panel-Breite wirkte "technisch und
   lang" — jetzt eine kurze, hellere Linie, exakt an der linken Textachse
   (statt eines Rand-zu-Rand-Border-tops). */
.frame-menu__foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.75rem;
  height: 1px;
  background: rgba(26, 26, 24, 0.14);
}
.frame-menu__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.frame-menu__contact a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.1rem 0;
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em;
  color: #43433d; text-decoration: none; transition: color 0.25s ease;
}
.frame-menu__contact a:hover, .frame-menu__contact a:focus-visible { color: var(--ink); }
.frame-menu__contact svg { width: 17px; height: 17px; display: block; }

/* ---- Sprachumschalter DE / EN — oberhalb der Kontaktdaten, gemeinsame linke Achse ---- */
.frame-menu__lang { display: inline-flex; align-items: center; gap: 1rem; margin: 0 0 clamp(0.75rem, 2.25vh, 1.1rem); }
.frame-menu__lang span, .frame-menu__lang a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stone); padding: 0.3rem 0; text-decoration: none;
}
.frame-menu__lang [aria-current="true"] { color: var(--ink); border-bottom: 1px solid var(--ink); }
.frame-menu__lang a:hover, .frame-menu__lang a:focus-visible { color: var(--ink); }

/* ---- Desktop-Sprachschalter (DE · EN) — von menu.js in .site-nav__links
   eingehängt (letztes Element, direkt nach "Kontakt"). Nur oberhalb des
   Burger-Breakpoints sichtbar: die gesamte .site-nav__links-Leiste wird
   unter html.frame-menu-compact bereits ausgeblendet (siehe oben), der
   mobile Schalter lebt im Burger-Panel (.frame-menu__lang). Keine Flaggen,
   kein Dropdown, keine Box/Button — soll wie ein natürlicher Teil der
   Navigation wirken. Der Abstand zu "Kontakt" (Zielkorridor 28–36px) wird
   NICHT hier, sondern über margin-left an .site-nav__links .frame-lang-switch
   in properties.css gesetzt. Bewusst (zunächst) OHNE vertikale Trennlinie
   getestet — Vorgabe war, das zuerst ohne Linie zu probieren. */
.frame-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem; /* 12px zwischen DE und EN — Zielkorridor 10-16px */
}
.frame-lang-switch span,
.frame-lang-switch a {
  font-family: var(--font-ui);
  /* Hauptnavigation (.site-nav__links a) ist 0.85rem — hier "minimal
     kleiner", nicht drastisch reduziert. */
  font-size: 0.75rem;
  font-weight: 500;
  /* Weniger extrem als vorher (0.18em) — Vorgabe: keine übermäßigen
     Buchstabenabstände, angeglichen an die übrige Navigation (0.12–0.14em). */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* --stone (#9B9B93) -> --stone-strong (#7C7C76): etwas kontrastreicher,
     aber weiterhin sekundär gegenüber der Hauptnavigation (--ink). */
  color: var(--stone-strong);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.15rem;
}
.frame-lang-switch [aria-current="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--bahama);
}
.frame-lang-switch a:hover,
.frame-lang-switch a:focus-visible { color: var(--ink); }
.frame-lang-switch [aria-disabled="true"] { opacity: 0.45; cursor: default; }
.site-nav--dark .frame-lang-switch span,
.site-nav--dark .frame-lang-switch a { color: rgba(252,252,250,0.82); }
.site-nav--dark .frame-lang-switch [aria-current="true"] { color: #fff; }

/* ---- Sichtbarer Fokus im Panel ---- */
.frame-menu__panel a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .frame-menu { transition: visibility 0s !important; }
  .frame-menu__panel { transition: none !important; }
  .frame-burger span { transition: none !important; }
}


/* Kompakt-/Burger-Header ueberall gleich schlank wie die Startseite (3.5rem) */
html.frame-menu-compact { --site-header-height: calc(3.5rem + env(safe-area-inset-top, 0px)); }

/* ============================================================
   Kontakt-Overlay — ersetzt den direkten "Kontakt"-mailto-Link im Hauptmenü
   (Desktop-Header + mobiles Burger-Menü) durch eine reduzierte, editoriale
   Fullscreen-Ansicht. Wiederverwendet das bestehende Netlify-Formular
   (.inquiry-form) — kein zweites Formularsystem, keine neue Empfänger-
   adresse. Global injiziert von /menu.js auf allen Seiten, die einen
   [data-contact-trigger] besitzen.
   ============================================================ */
.contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.3s;
}

.contact-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

.contact-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 18, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-overlay.is-open .contact-overlay__backdrop {
  opacity: 1;
}

.contact-overlay__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* Mobile/Tablet: volle Breite (wie zuvor). Ab 768px auf ~40-45% der
     Viewportbreite kalibriert (vorher fix 34rem: 53% bei 1024px, nur 28%
     bei 1920px — zu breit auf Laptop-Displays, zu schmal auf großen
     Monitoren). Obergrenze 36rem verhindert ein unnötig breites Panel auf
     Ultrawide-Screens. */
  width: min(36rem, 100%);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Bug-Fix: 0.99 statt 1.0 ließ die Header-Links der Hintergrundseite am
     oberen Panelrand leicht durchscheinen (Ebenen-/Transparenzfehler). Volles,
     deckendes Off-White, kein Blur/Milchglas. */
  background: #FCFCFA;
  /* Scrollbar dezenter statt Standard-Balken (Task 3, Feinschliff) — bleibt
     funktional, wirkt aber zurückhaltender, v. a. auf Touch/Trackpad. */
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 118, 112, 0.32) transparent;
  padding: calc(4.5rem + env(safe-area-inset-top, 0px)) max(1.5rem, 5vw) calc(2.5rem + env(safe-area-inset-bottom, 0px));
  transform: translate3d(100%, 0, 0);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Feinschliff: Scrollbar noch schmaler/dezenter — 6px→4px, Thumb in einem
   ruhigeren neutralen Grau statt der markeneigenen Tinte, Rundung reduziert.
   Bleibt voll funktional (Tastatur/Mausrad/Trackpad unveraendert), wirkt aber
   weniger technisch. Firefox ueber scrollbar-color im Panel-Block oben. */
.contact-overlay__panel::-webkit-scrollbar { width: 4px; }
.contact-overlay__panel::-webkit-scrollbar-track { background: transparent; }
.contact-overlay__panel::-webkit-scrollbar-thumb {
  background: rgba(120, 118, 112, 0.32);
  border-radius: 2px;
}

@media (min-width: 768px) {
  .contact-overlay__panel {
    width: clamp(22rem, 42vw, 36rem);
  }
}

.contact-overlay.is-open .contact-overlay__panel {
  transform: translate3d(0, 0, 0);
}

.contact-overlay__panel:focus {
  outline: none;
}

.contact-overlay__close {
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1rem;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.contact-overlay__close:focus-visible,
.contact-overlay__panel a:focus-visible,
.contact-overlay__panel button:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.contact-overlay__inner {
  max-width: 26rem;
}

.contact-overlay__eyebrow {
  margin: 0 0 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone);
}

.contact-overlay__title {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

.contact-overlay__sub {
  /* Feinschliff: Abstand Einleitungstext -> Telefonnummer um ~12% reduziert
     (2rem -> 1.75rem), Teil der Formular-frueher-sichtbar-Korrektur. */
  margin: 0 0 1.75rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #4A4A44;
  max-width: 32ch;
}

.contact-overlay__direct {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Abstand Telefon->E-Mail->Instagram um ~12% reduziert (0.35rem -> 0.3rem). */
  gap: 0.3rem;
  /* Feinschliff Task 2 (vorherige Runde: 2.25rem+2rem -> 1.95rem+1.8rem).
     Jetzt nochmals um ~12-15% reduziert: Instagram->Trennlinie 1.8rem->1.6rem,
     Trennlinie->"Oder schreiben Sie uns direkt." 1.95rem->1.7rem. Formular
     erscheint auf 768-900px Viewport-Hoehe frueher, Gliederung/Trennlinie
     bleibt als klare Absetzung der Kontaktdaten erhalten. */
  margin-bottom: 1.7rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}

.contact-overlay__direct a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: color 0.25s ease, text-decoration-color 0.3s ease;
}

.contact-overlay__direct a:hover,
.contact-overlay__direct a:focus-visible {
  color: var(--bahama);
  text-decoration-color: var(--bahama);
}

/* Kleine, klare Zwischenüberschrift direkt über dem Formular — deutlicher
   als ein normales Feld-Label, aber unauffälliger als .contact-overlay__title. */
.contact-overlay__form-intro {
  /* Abstand zum ersten Formularfeld um ~12% reduziert (1.25rem -> 1.1rem). */
  margin: 0 0 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.contact-overlay .inquiry-form {
  max-width: none;
}

@media (max-width: 480px) {
  .contact-overlay__panel {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-overlay,
  .contact-overlay__backdrop,
  .contact-overlay__panel {
    transition: none !important;
  }
}