/* ================================================================
   H&O IMMO — Mobile Audit Fixes
   ----------------------------------------------------------------
   Konsolidierte Fixes aus dem Mobile-Audit (375 × 812 px).
   Phase 1: visuelle Bugs        (7-Step-Grid, Reveal-Overflow)
   Phase 2: Touch-Targets < 44px (Hamburger, Step-Nav, Footer …)
   Phase 3: Polish               (Truncates, Whitespace, Aspect-Ratios)

   Bewusst NICHT angefasst:
     .hero, .scroll-hero__*, .hero-*, .scroll-hero, alle Hero-Wolken/
     -Haus, .sell-hero (Hero-Bereich). Per User-Anweisung.

   Reihenfolge: dieses File MUSS als letztes Stylesheet geladen
   werden, damit es den Module-Cascade gewinnt.
   ================================================================ */


/* ============================================================
   PHASE 1 — Visuelle Bugs
   ============================================================ */

/* Reveal-Overflow-Guard
   Initial-State von [data-reveal="right"] ist translateX(32px).
   Wenn IO langsam/aus ist, bleibt das Element rechts versetzt →
   horizontal-scroll auf Mobile. `overflow-x: clip` versteckt das,
   ohne sticky/fixed zu brechen (im Gegensatz zu `hidden`).        */
html,
body {
  overflow-x: clip;
}

/* Reveal-Animations: kleinere Verschiebung auf Mobile, damit auch
   bei verzögerter is-revealed-Klasse kein 32-px-Overflow entsteht */
@media (max-width: 720px) {
  [data-reveal="left"] {
    transform: translateX(-12px);
  }

  [data-reveal="right"] {
    transform: translateX(12px);
  }

  [data-reveal] {
    transform: translateY(16px);
  }
}

/* bewertung.html hat 7 Steps, das Grid war hartcodiert auf 6.
   Lösung: CSS-Variable mit Default 6 — bewertung.html setzt
   inline `style="--step-count: 7"` auf die Liste.                 */
.step-progress__list {
  grid-template-columns: repeat(var(--step-count, 6), minmax(0, 1fr));
}


/* ============================================================
   PHASE 2 — Touch-Targets (≥ 44 px)
   ============================================================ */

@media (max-width: 1366px) {

  /* Hamburger 40 → 44 px (Apple-HIG-Minimum) */
  .mobile-toggle,
  .menu-toggle {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 720px) {

  /* Step-Nav-Buttons (verkaufen + bewertung): Live waren 24 px hoch */
  .step-nav .btn,
  .step-nav button {
    min-height: 48px;
    padding-block: 0.85rem;
  }

  /* Consent-Checkboxen (verkaufen + bewertung + kontakt) */
  .consent input[type="checkbox"],
  .kt-form input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
  }

  .consent {
    gap: 0.85rem;
  }

  /* Section-Links wie "Gespräch vereinbaren →" */
  .section-link {
    padding-block: 0.65rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* About-Banner Ghost-Link "Beratungstermin vereinbaren" */
  .about-banner__ghost {
    padding-block: 0.7rem 0.75rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Footer-Links waren 17 px hoch → Hitbox vergrößern.
     Index nutzt .footer-col-brand/.footer-contact, Sub-Pages
     nutzen .footer-col — beide abdecken.                          */
  .site-footer a,
  .footer-grid a,
  .footer-col a,
  .footer-col-brand a,
  .footer-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.4rem;
  }

  /* Brand-Logo im Footer braucht keinen 44-px-Block — Reset wenn ID/Klasse passt */
  .site-footer .brand,
  .footer-brand a {
    min-height: 0;
    padding-block: 0;
  }

  /* Magazin: Such-Clear-Button (×) */
  .mag-bar__clear {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }

  /* Blog-Post: Share-Buttons */
  .post-share__btn {
    min-height: 44px;
    padding: 0.7rem 0.95rem;
    display: inline-flex;
    align-items: center;
  }

  /* Kontakt: Submit-Button volle Breite */
  .kt-form__submit {
    width: 100%;
    align-self: stretch;
    justify-content: center;
    min-height: 52px;
    padding: 1.1rem 1.25rem;
  }
}


/* ============================================================
   PHASE 3 — Layout-Polish
   ============================================================ */

.home-hero__lead-mobile,
.home-hero__btn-short {
  display: none;
}

@media (max-width: 1366px) {

  /* --- Index: Home-Hero --------------------------------------- */
  .home-hero {
    min-height: max(32rem, 72svh);
    padding-top: 5rem;
    background: #0f0c0a;
  }

  .home-hero__media {
    position: absolute;
    inset: 0;
    height: auto;
    max-height: none;
  }

  .home-hero__media img {
    object-position: 64% center;
    filter: saturate(0.95) contrast(1.04);
  }

  .home-hero__veil {
    display: block;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(15, 12, 10, 0.06) 0%,
        rgba(15, 12, 10, 0.12) 36%,
        rgba(15, 12, 10, 0.78) 100%),
      linear-gradient(90deg,
        rgba(15, 12, 10, 0.28) 0%,
        rgba(15, 12, 10, 0.04) 46%,
        rgba(15, 12, 10, 0.18) 100%);
  }

  .home-hero__inner {
    min-height: calc(max(32rem, 72svh) - 5rem);
    grid-template-columns: 1fr;
    align-items: end;
    padding-top: 0;
    padding-bottom: clamp(1rem, 3.5vw, 1.35rem);
  }

  .home-hero__copy {
    max-width: none;
  }

  .home-hero__eyebrow {
    color: rgba(232, 202, 184, 0.9);
    font-size: 0.64rem;
    line-height: 1.5;
    letter-spacing: 0.18em;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
  }

  .home-hero__title {
    margin-top: 0.85rem;
    color: #fff;
    font-size: clamp(1.95rem, 7.4vw, 2.45rem);
    line-height: 1.03;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.42);
  }

  .home-hero__title-line--accent {
    color: #e2bda6;
  }

  .home-hero__rule {
    width: 2.85rem;
    margin-top: 0.95rem;
    background: rgba(226, 189, 166, 0.85);
  }

  .home-hero__lead {
    max-width: 19rem;
    margin-top: 0.8rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0;
    line-height: 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  }

  .home-hero__lead-mobile {
    display: block;
    font-size: 1.05rem;
    line-height: 1.5;
  }

  .home-hero__actions {
    display: none;
  }

  .home-hero__btn {
    width: 100%;
    height: 2.8rem;
    min-height: 2.8rem;
    padding-inline: 0.75rem;
    border-radius: 3px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .home-hero__btn.btn-accent {
    background: rgba(180, 139, 116, 0.96);
    color: #fff;
  }

  .home-hero__btn.btn-outline {
    border-color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  .home-hero__btn-full {
    display: none;
  }

  .home-hero__btn-short {
    display: inline;
  }

  .intro-features {
    padding-block: 0;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
  }

  .intro-features__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .intro-features__item {
    min-height: 4.35rem;
    padding: 0.75rem 0.35rem 0.7rem;
  }

  .intro-features__item::before,
  .intro-features__item:nth-child(odd)::before {
    display: block;
    top: 18%;
    bottom: 18%;
  }

  .intro-features__item:first-child::before {
    display: none;
  }

  .intro-features__icon {
    margin-bottom: 0.25rem;
  }

  .intro-features__icon svg {
    width: 18px;
    height: 18px;
  }

  .intro-features__title {
    margin-bottom: 0;
    font-size: 0.55rem;
    line-height: 1.2;
    letter-spacing: 0.11em;
  }

  .intro-features__text {
    display: none;
  }
}

@media (max-width: 720px) {

  /* --- Step-Forms (verkaufen + bewertung) ---------------------- */

  /* Step-Progress: Zahlen nicht zu winzig */
  .step-progress__list li span {
    font-size: 0.85rem;
  }

  .step-progress__list {
    gap: 0.4rem;
  }

  /* Tile-Texte: lange Wörter brechen statt abgeschnitten zu werden
     ("Mehrfamilienhaus", "Bauerwartungsland", "Renovierungsbed.")
     overflow-wrap statt word-break — bricht erst, wenn Hyphenation
     nicht reicht, statt mitten im Wort.                            */
  .tile span,
  .tile strong,
  .chip-radio span {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }


  /* --- Index: Engagement-Card ---------------------------------- */
  /* Lead-Card war 540 px min-height + 16/10-Media = sehr lang     */
  .engagement__card--lead {
    min-height: auto;
  }

  .engagement__card--lead .engagement__media,
  .engagement__media {
    aspect-ratio: 4 / 3;
  }


  /* --- Index: About-Banner mobile editorial --------------------- */
  .about-banner {
    background:
      radial-gradient(circle at 20% 0%, rgba(180, 139, 116, 0.12), transparent 30%),
      #1c1714;
  }

  .about-banner__head {
    padding-top: 1.45rem;
    padding-bottom: 0.95rem;
  }

  .about-banner__head.reveal {
    opacity: 1;
    transform: none;
  }

  .about-banner__kicker {
    margin-bottom: 0.75rem;
    padding-left: 2rem;
    font-size: 0.64rem;
    letter-spacing: 0.18em;
  }

  .about-banner__kicker::before {
    width: 1.35rem;
  }

  .about-banner__title {
    max-width: 19rem;
    margin-bottom: 0;
    font-size: clamp(1.75rem, 8vw, 2.15rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
  }

  .about-banner__title em {
    display: block;
    margin-top: 0.18rem;
  }

  .about-banner__triptych {
    gap: 0.55rem;
    padding-inline: 1rem;
  }

  /* Mobile: dezenter "Tippen für mehr"-Hinweis sichtbar (kein Hover möglich) */
  .about-banner__tap-hint {
    display: inline-block;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    margin-top: 0.4rem;
  }

  .about-banner__foot {
    padding-top: 1.25rem;
    padding-bottom: 1.2rem;
    gap: 1rem;
  }

  .about-banner__lead {
    margin-bottom: 1.05rem;
    font-size: 0.98rem;
    line-height: 1.55;
  }

  /* Mobile-Stats: dezente Inline-Leiste statt grosser dunkler Karte.
     Wert + Label inline (Wert links, Label kleiner daneben), 3 Items
     untereinander mit feinen Bronze-Trennlinien.                    */
  .about-banner__stats {
    width: auto;
    max-width: 100%;
    margin: 0 clamp(1rem, 5vw, 1.5rem);
    padding: 0.85rem 0;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0.55rem;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(180, 139, 116, 0.22);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .about-banner__stats::before,
  .about-banner__stats::after {
    content: none;
  }

  .about-banner__stats li {
    min-height: 0;
    padding: 0.35rem 0;
    border: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    text-align: left;
    gap: 0.55rem;
    position: relative;
  }

  /* Feine Bronze-Trennlinie zwischen den Zeilen */
  .about-banner__stats li+li {
    border-top: 1px solid rgba(180, 139, 116, 0.18);
  }

  .about-banner__stats-idx {
    display: none;
  }

  .about-banner__stats-val {
    font-size: 0.95rem;
    font-weight: 600;
    padding-bottom: 0;
    border-bottom: 0;
    line-height: 1;
    color: #f7efe8;
    flex: 0 0 auto;
  }

  .about-banner__stats-val i {
    font-size: 0.85em;
    margin-left: 0;
    color: #d9b9a4;
  }

  .about-banner__stats small {
    margin-top: 0;
    max-width: none;
    color: rgba(217, 185, 164, 0.7);
    font-size: 0.52rem;
    line-height: 1.2;
    letter-spacing: 0.12em;
    font-weight: 500;
    flex: 1 1 auto;
  }


  /* Process-Step Number-Circle: nur Font-Size, Geometrie sitzt jetzt
     im Haupt-CSS (sections-extra.css unter <=1199px / <=720px).      */
  .process__num {
    font-size: 0.72rem;
  }


  /* --- ueber-uns: Story-Bilder & Headlines --------------------- */
  .uu-step h2,
  .uu-step__title,
  .timeline h2 {
    line-height: 1.1;
  }


  /* --- ueber-uns: Hero-Bild auf Mobile -------------------------
     Auf Mobile schneidet object-fit:cover seitlich so stark, dass
     Anna rechts halb abgeschnitten wird. Bild nach links schieben,
     indem der x-Crop-Fokus nach rechts wandert.
     Zoom-Animation + Sticky-Höhe bleiben unangetastet.            */
  .uu-hero__media img {
    object-position: 62% 32%;
  }


  /* --- Kontakt: Hero-Padding reduzieren ------------------------ */
  .kt-hero {
    padding-top: clamp(6rem, 12vh, 9rem);
    padding-bottom: 2rem;
  }

  /* Kontakt: Topics-Arrow-Spalte breiter machen */
  .kt-topics__grid a {
    grid-template-columns: 3rem 1fr 1.5rem;
    column-gap: 0.75rem;
  }

  .kt-topics__arrow {
    width: 1.5rem;
    flex-shrink: 0;
  }

  /* Kontakt: Lange Werte brechen */
  .kt-person__channels dd,
  .kt-hero__quick strong {
    overflow-wrap: break-word;
  }


  /* --- Blog: Magazin-Pick und Reading-Layout ------------------- */
  .mag-pick__card--lead {
    min-height: 220px;
  }

  /* Drop-Cap proportional auf Mobile */
  .post-body p:first-of-type:not(.post-lead)::first-letter {
    font-size: 2.8em;
  }


  /* --- Blog-Post: Meta-Zeile stapeln statt brechen ------------- */
  .post-hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }

  /* Blog-Post: Quote ohne negative Margins (Overflow-sicher) */
  .post-quote {
    margin: 2.25rem 0;
    padding: 1.5rem 1.25rem 1.5rem 1.5rem;
  }

  .post-quote::before {
    font-size: 3rem;
    left: 0.4rem;
  }
}


@media (max-width: 480px) {

  /* Service-Tiles: 4/5 ist auf Mobile sehr hoch (≈ 430 px je Karte
     bei 343 px Breite). 16/11 ≈ 240 px — bleibt dramatic, ohne
     dass die Service-Sektion 4 Bildschirmhöhen schluckt.          */
  .service-tile {
    aspect-ratio: 16 / 11;
  }

  /* ueber-uns: Team-Bilder etwas kompakter */
  .uu-step::before {
    aspect-ratio: 3 / 4;
    margin-bottom: 1rem;
  }

  /* Timeline-Jahres-Label schmaler */
  .timeline__row {
    grid-template-columns: 3.5rem 1fr;
    gap: 0.55rem;
  }

  /* Region-Tile: kein vw (greift Scrollbars ab) — Container-relativ */
  .regions-pin .regions-grid .region-tile,
  .region-tile {
    flex-basis: 100%;
    width: 100%;
  }
}

/* ================================================================
   Portrait-Foto-Crops (außerhalb Media-Query, global)
   AnnaPferd.jpg ist Hochformat (4000×6000) und wird in querformatige
   Container (16:8, 16:10, 4:3 …) geladen. Crop nach oben biased,
   damit Kopf von Anna + Pferd + Schleife sichtbar bleiben.
   ================================================================ */
img[src$="AnnaPferd.jpg"] {
  object-position: center 30%;
}


/* ================================================================
   Kontakt-Seite: Mobile-Slimming
   ----------------------------------------------------------------
   Drei Sections nur auf Mobile ausblenden — Desktop bleibt erhalten:
     1. .kt-topics  — Topic-Shortcuts (Direkt zum passenden Anliegen)
                     Nutzer sind schon auf der Kontaktseite, kein
                     Bedarf, sie woandershin zu routen.
     2. .kt-office  — Büro-Adress-Aside im kt-split
                     Adresse steht bereits oben im Hero-Card.
     3. .kt-faq     — FAQ-Strip
                     Inhalt zieht in dedizierte faq.html um, im
                     Footer verlinkt.
   ================================================================ */
@media (max-width: 720px) {

  .kt-topics,
  .kt-office,
  .kt-faq {
    display: none;
  }

  /* kt-split wird zur Single-Column, sobald .kt-office weg ist */
  .kt-split {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   BURGER-MENÜ — EINHEITLICH über alle Seiten (Single Source of Truth)
   ----------------------------------------------------------------
   mobile-audit.css lädt als LETZTES Stylesheet auf JEDER Seite und
   überschreibt damit die Alt-Regeln aus styles.css (Home) UND
   chrome.css (Unterseiten). Das Menü sieht/funktioniert dadurch überall
   identisch.

   Behobene Bugs:
   (A) iOS-Safari Dynamic-Toolbar: Beim Hochscrollen schrumpft Safaris
       Bar, der Viewport wächst. Das Home-Menü lag früher IM fixed +
       backdrop-gefilterten <header> (= dessen Containing-Block) und ist
       beim Resize verrutscht ("Start" überm Logo, Seite blitzt unten
       durch). Jetzt ist das Menü ein <body>-Sibling (siehe index.html),
       position:fixed relativ zum Viewport, Inhalt oben-bündig
       (flex-start), Fußzeile via margin-top:auto. Kein 100svh/13vh-Mix.
   (B) iOS-Text-Inflation ("Kontakt riesig"): text-size-adjust:100%.
   (C) Links/Rechts-Swipe (Deko-Logo-Bleed rechts): overflow-x:hidden.

   Auf/Zu einheitlich über body[data-menu-open="true"] — der Home-Toggle
   setzt das jetzt ebenfalls (siehe script.js).
   ================================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  /* unter dem Header (z 50): Logo + Close bleiben oben sichtbar */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* deterministisch oben-bündig -> Toolbar-Resize verrutscht nichts */
  gap: 0;
  overflow-x: hidden;
  /* klippt Deko-Logo-Bleed -> kein Links/Rechts-Swipe */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #f5f3ef;
  /* einheitliche Paper-Fläche (Home + Unterseiten) */
  /* Oben Header-Höhe (~94px) + Notch freihalten, unten Home-Indicator. */
  padding:
    calc(env(safe-area-inset-top, 0px) + 6.5rem) var(--pad-x, clamp(1.25rem, 10vw, 12rem)) calc(env(safe-area-inset-bottom, 0px) + 1.75rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}

body[data-menu-open="true"] .mobile-menu {
  opacity: 1;
  pointer-events: auto;
}

/* Header beim offenen Menü deckend, damit Logo + Close sauber stehen */
body[data-menu-open="true"] .liquid-header,
body[data-menu-open="true"] .site-header {
  background: #f5f3ef;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Wenn das Menü offen ist, soll das Logo dunkel sein, selbst auf Dark-Hero-Seiten (z.B. Über uns) */
body.dark-hero-page[data-menu-open="true"] .brand--logo img {
  content: url('../imgs/HO-Immo-Logo.png');
}

/* Inhalt über dem Deko-Grid (::after) halten */
.mobile-menu nav,
.mobile-menu__foot {
  position: relative;
  z-index: 1;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: clamp(0.6rem, 1.7vh, 0.95rem);
  border-bottom: 1px solid rgba(28, 23, 20, 0.08);
  font-size: clamp(1.95rem, 6.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: #1c1714;
  overflow-wrap: break-word;
  /* Wie Home: Links SOFORT sichtbar, kein Versatz. chrome.css setzte auf
     den Unterseiten opacity:0 + translateY(18px) als Startzustand -> ohne
     das hier blieben Links kurz unsichtbar/verschoben. */
  opacity: 1;
  transform: none;
}

.mobile-menu nav a:hover {
  color: #b48b74;
}

/* Einblend-Animation der Unterseiten (chrome.css: ho-mobile-link-in,
   gestaffelt) abschalten, damit das Menü überall exakt wie auf der Home
   wirkt (dort gibt es keine Stagger-Animation). Höhere Spezifität als
   `body[data-menu-open="true"] .mobile-menu a`. */
body[data-menu-open="true"] .mobile-menu nav a {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Item-Nummer DEZENT: klein, stark gedämpftes Bronze — soll NICHT auffallen */
.mobile-menu nav a span {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #b48b74;
  opacity: 0.42;
}

/* Adress-Fußzeile dezent, immer am unteren Rand */
.mobile-menu__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(28, 23, 20, 0.08);
  color: #7a6f65;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.mobile-menu__foot span {
  overflow-wrap: break-word;
}

/* Desktop: Overlay komplett raus (Toggle ist eh ausgeblendet) */
@media (min-width: 1367px) {
  .mobile-menu {
    display: none;
  }
}

/* ================================================================
   HANDY-ANSICHT — MENÜ PASST OHNE SCROLLEN
   ----------------------------------------------------------------
   Ziel: Das Menü füllt exakt den SICHTBAREN (dynamischen) Viewport
   und scrollt selbst nicht — alle 7 Punkte + Fußzeile passen auf
   eine Bildschirmhöhe.

   Den Scroll-Lock der HINTERGRUNDseite macht JS
   (js/main.js -> initMenuScrollLock): body wird beim Öffnen
   position:fixed gepinnt. Das ist der EINZIGE auf iOS-Safari
   zuverlässige Weg. `overflow:hidden` auf <body> ignoriert iOS beim
   Verkleinern der Adressleiste — dadurch scrollte die Seite HINTER
   dem Menü weiter (Logo verrutschte nach unten, Menü reagierte nicht
   mehr, man musste erst raus/rein oder weit hochscrollen). Deshalb
   hier bewusst KEIN overflow/height-Lock auf <body>.
   ================================================================ */
@media (max-width: 720px) and (min-height: 400px) {
  /* Menü = exakt sichtbarer Viewport, kein Eigen-Scroll.
     bottom:auto + height:100dvh statt inset:0, damit der untere Rand
     nicht hinter Safaris Toolbar liegt. 100vh als Fallback für
     iOS < 15.4 (kennt dvh noch nicht). */
  .mobile-menu {
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    overflow-y: hidden;
    padding-top: calc(env(safe-area-inset-top, 0px) + 6.75rem);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  }

  /* Links kompakter + vh-relativ, damit alles sicher auf eine
     Bildschirmhöhe passt (auch auf kleinen Geräten wie iPhone SE). */
  .mobile-menu nav a {
    padding-block: clamp(0.35rem, 1.2vh, 0.55rem);
    font-size: clamp(1.14rem, 3.4vh, 1.57rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    transition: color 250ms var(--ease-standard), padding-left 250ms var(--ease-standard);
  }

  .mobile-menu nav a:hover,
  .mobile-menu nav a:active {
    color: #b48b74;
    padding-left: 0.35rem;
  }

  .mobile-menu__foot {
    padding-top: 0.9rem;
  }
}