/* ═══════════════════════════════════════════════════════════════════
   Fabian Falk Immobilien — Mobile Stylesheet (Premium v2)
   ═══════════════════════════════════════════════════════════════════ */


/* ╔════════════════════════════════════════════════════╗
   ║  GLOBAL: Mobile-Elemente auf Desktop verstecken    ║
   ╚════════════════════════════════════════════════════╝ */
.nav-top-logo,
.nav-top-wrap > .nav-top-logo {
  display: none !important;
}
.nav-top-wrap {
  display: contents; /* nav-top-wrap löst sich auf - Brand verhält sich wie vorher */
}

/* Exposé-CTA-Section (zusätzlicher Button unter den Bildern) — Default: nur Mobile sichtbar */
.expose-mobile-cta { display: none; }


/* ╔════════════════════════════════════════════════════╗
   ║  HAMBURGER-BUTTON                                  ║
   ╚════════════════════════════════════════════════════╝ */
.mobile-hamburger {
  display: none;
  position: fixed;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2000;
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0.5px solid rgba(30, 46, 110, 0.12);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(30, 46, 110, 0.08);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: all 0.3s ease;
}
.mobile-hamburger span {
  display: block;
  width: 18px;
  height: 1px;
  background: #1e2e6e;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-hamburger:active { transform: scale(0.94); }
/* Toggle-Animation: zu X */
.mobile-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* ╔════════════════════════════════════════════════════╗
   ║  MOBILE MENU OVERLAY                               ║
   ╚════════════════════════════════════════════════════╝ */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1999;
  background: linear-gradient(160deg, #1e2e6e 0%, #15235a 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow-y: auto;
}
.mobile-menu-overlay.open { display: flex; opacity: 1; }
.mobile-menu-overlay .mm-inner {
  margin: auto;
  padding: 5rem 2rem 4rem;
  width: 100%;
  max-width: 480px;
  text-align: center;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.mobile-menu-overlay.open .mm-inner { transform: translateY(0); opacity: 1; }
.mobile-menu-overlay .mm-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s;
}
.mobile-menu-overlay .mm-brand:hover,
.mobile-menu-overlay .mm-brand:active {
  color: #ffffff;
}
.mobile-menu-overlay .mm-rule {
  width: 40px;
  height: 0.5px;
  background: #6b7fb5;
  margin: 0 auto 2.5rem;
}
.mobile-menu-overlay .mm-nav { display: flex; flex-direction: column; gap: 0; }
.mobile-menu-overlay .mm-nav a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.05em;
  padding: 1.1rem 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  transition: color 0.2s ease;
  display: block;
}
.mobile-menu-overlay .mm-nav a:last-child { border-bottom: none; }
.mobile-menu-overlay .mm-nav a:active { color: #c8a96e; }
.mobile-menu-overlay .mm-legal {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.mobile-menu-overlay .mm-legal a {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
body.mobile-menu-open { overflow: hidden; }


/* ╔════════════════════════════════════════════════════╗
   ║  PREMIUM MOBILE STYLES — ab 768px                  ║
   ╚════════════════════════════════════════════════════╝ */
@media (max-width: 768px) {

  /* ━━━━ Basis ━━━━ */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  img, video, iframe { max-width: 100% !important; height: auto !important; }

  /* ━━━━ Mobile-only Startseite: Objektkarten (Highlights) VOR die 3 Werte schieben ━━━━ */
  /* Greift NUR auf der Startseite via <body class="home"> — Unterseiten bleiben unverändert */
  body.home { display: flex !important; flex-direction: column !important; }
  body.home .positioning { display: contents !important; }
  /* Padding-Ausgleich für die aufgelöste .positioning */
  body.home .pos-line-1 { order: 4 !important; padding: 4rem 1.5rem 0 !important; }
  body.home .pos-line-2 { order: 5 !important; padding: 0 1.5rem !important; }
  body.home .properties-section { order: 6 !important; }
  body.home .pos-values { order: 7 !important; padding: 2.5rem 1.5rem 3rem !important; border-top: 0.5px solid #e8edf5 !important; }
  /* Restliche Body-Sektionen der Startseite: explizite Order bewahrt natürliche Reihenfolge */
  body.home .nav-top { order: 1 !important; }
  body.home .nav-bottom { order: 2 !important; }
  body.home .hero { order: 3 !important; }
  body.home .ph-section, body.home [id="bewertung"] { order: 8 !important; }
  body.home .contact-section, body.home [id="kontakt"] { order: 9 !important; }
  body.home .trust-strip { order: 10 !important; }
  body.home footer { order: 11 !important; }

  /* ━━━━ Generelle Schrift-Anhebung für Lesbarkeit auf Mobile ━━━━ */
  /* Alle Fließtexte und kleinen Labels von Regular (400) auf Medium (500) */
  body, p, li, a, span, label,
  .pos-text, .pos-intro, .val-text, .val-title,
  .ph-sub, .ph-point-text, .ph-eyebrow, .ph-label,
  .trust-text, .trust-inline, .trust-eyebrow, .trust-title,
  .properties-eyebrow,
  .card-type, .card-location, .card-cta-text, .card-badge, .card-title,
  .meta-item,
  .info-label,
  .contact-info-label, .contact-info-value, .contact-info-value a,
  .contact-info-line, .contact-info-line a, .contact-info-line span,
  .form-input, .form-textarea, .form-select,
  .form-label, .form-consent label, .form-note,
  .page-subtitle, .page-eyebrow,
  .info-title, .legal-section h2, .legal-section p, .legal-section li,
  .footer-address, .footer-link, .footer-copy, .footer-tagline,
  .footer-legal a, .footer-logo-name,
  .nav-link, .nav-brand,
  .obj-meta, .obj-description, .obj-feature, .obj-energy-row,
  .ed-row .k, .ed-row .v,
  .wiz-step-num, .wiz-step-title, .typ-name, .typ-sub,
  .zustand-name, .zustand-sub, .energie-pill,
  .gh-more-hint, .mm-nav a {
    font-weight: 500 !important;
  }
  /* Eyebrows in Versalien: bleiben optisch dezent, aber 500 statt 400 */
  .hero-eyebrow, .pos-cta, .val-nr {
    font-weight: 500 !important;
  }
  /* Kontaktdaten (Telefon, E-Mail, Adresse) bewusst dünner — DM Sans wirkt sonst zu kräftig */
  .info-value, .info-value a, .hours-day,
  .contact-info-value, .contact-info-value a, .contact-hours-list {
    font-weight: 300 !important;
  }
  .hours-time {
    font-weight: 400 !important;
  }
  /* "Erreichbarkeit"-Block: Öffnungszeiten näher an Label rücken */
  .contact-info-block .contact-hours { margin-top: -4px !important; }
  .contact-info-block .info-label + .contact-hours { margin-top: -6px !important; }

  .mobile-hamburger { display: flex !important; }
  .nav-bottom { display: none !important; }

  /* ━━━━ Top-Bar mit Logo + Brand nebeneinander ━━━━ */
  .nav-top {
    padding: 1rem 4rem 1rem 1rem !important;  /* rechts Platz für Hamburger */
    text-align: left !important;
    border-bottom: 0.5px solid rgba(30, 46, 110, 0.06) !important;
  }
  .nav-top-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
  }
  .nav-top-logo {
    display: flex !important;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
  }
  .nav-top-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  
  .nav-brand {
    font-size: 22px !important;
    letter-spacing: 0.14em !important;
    display: inline-block !important;
    white-space: nowrap !important;
  }
  .nav-brand .brand-cap {
    font-size: 1.2em !important;
    letter-spacing: 0.1em !important;
  }

  /* ━━━━ HERO ━━━━ */
  .hero {
    min-height: 70vh !important;
    padding: 4rem 1.5rem 3rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .hero-content { padding: 0 !important; text-align: center !important; z-index: 5 !important; }
  .hero-eyebrow { font-size: 9px !important; letter-spacing: 0.35em !important; margin-bottom: 1.2rem !important; }
  .hero-tagline { font-size: 42px !important; line-height: 1.25 !important; letter-spacing: 0.03em !important; margin-bottom: 1.5rem !important; }
  .hero-tagline em { font-style: italic !important; }
  .hero-rule { width: 40px !important; height: 0.5px !important; margin: 0 auto !important; background: rgba(200, 169, 110, 0.7) !important; }
  .scroll-ind { display: none !important; }
  .shore, .trees { transform: scale(0.7); }

  /* ━━━━ POSITIONING (Werte-Boxen linksbündig) ━━━━ */
  .positioning { padding: 4rem 1.5rem 3rem !important; }
  .pos-line-1 {
    grid-template-columns: 1fr !important;
    padding-bottom: 1.2rem !important;
    text-align: left !important;
    display: block !important;
  }
  /* Mehr Luft zwischen Eyebrow und Headline */
  .pos-line-1 .pos-headline {
    margin-top: 1.5rem !important;
  }
  .pos-line-2 {
    margin-left: 0 !important;
    grid-template-columns: 1fr !important;
    padding-bottom: 3rem !important;
    gap: 1rem !important;
    display: block !important;
    padding-top: 0 !important;
  }
  .pos-line-2 > * { margin-bottom: 1rem !important; }
  .pos-line-2 > *:last-child { margin-bottom: 0 !important; }
  /* Eyebrow-Label nicht abschneiden + Abstand zur Headline */
  .pos-label {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin-bottom: 1.4rem !important;
  }
  .pos-label span {
    font-size: 10px !important;
    letter-spacing: 0.25em !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    display: inline-block !important;
    max-width: 100% !important;
  }
  .pos-headline { font-size: 32px !important; line-height: 1.1 !important; letter-spacing: 0.005em !important; font-weight: 400 !important; }
  .pos-headline em { font-weight: 400 !important; }
  .pos-intro { font-size: 21px !important; line-height: 1.45 !important; font-weight: 600 !important; }
  .pos-text { font-size: 16px !important; line-height: 1.85 !important; color: #5a6a7a !important; }
  .pos-cta { font-size: 11px !important; letter-spacing: 0.22em !important; }

  /* Werte-Boxen ALLE linksbündig */
  .pos-values {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    padding-top: 2.5rem !important;
    border-top: 0.5px solid rgba(30, 46, 110, 0.06) !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .pos-values .val,
  .pos-values > * {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .val-nr { font-size: 11px !important; letter-spacing: 0.18em !important; }
  .val-title { font-size: 22px !important; line-height: 1.2 !important; font-weight: 700 !important; }
  .val-text { font-size: 16px !important; line-height: 1.85 !important; color: #5a6a7a !important; font-weight: 500 !important; }

  /* ━━━━ PROPERTIES (Highlights-Slider) ━━━━ */
  .properties-section { padding: 4rem 0 3rem !important; }
  .properties-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.8rem !important; padding: 0 1.5rem 2rem !important; }
  .properties-eyebrow { font-size: 10px !important; letter-spacing: 0.32em !important; }
  .properties-title { font-size: 38px !important; line-height: 1.1 !important; }
  .slider-wrapper { padding: 0 1.5rem !important; position: relative !important; }
  .slider-track { gap: 1rem !important; }
  .prop-card, .property-card {
    min-width: calc(100vw - 3rem) !important;
    max-width: calc(100vw - 3rem) !important;
    flex: 0 0 calc(100vw - 3rem) !important;
  }
  /* Auf Kaufen-Seite (.angebote-grid): Karten in voller Breite, mittig, nicht slider-spezifisch */
  .angebote-section { padding: 2rem 1.2rem 3rem !important; }
  /* Inneren Slider-Wrapper-Padding entfernen — auf Mobile ist hier kein Slider, sondern ein Grid.
     Sonst wären die Karten zu schmal (1.2rem Section + 1.5rem Wrapper = 43 px Verlust je Seite). */
  .angebote-section .slider-wrapper { padding: 0 !important; }
  .angebote-header { padding: 0 0 1.5rem !important; }
  .angebote-grid { gap: 1.5rem !important; grid-template-columns: 1fr !important; }
  .angebote-grid .prop-card {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: none !important;
    margin: 0 !important;
  }
  /* Goldener Type-Text auf allen Karten verstecken — Bild-Badge zeigt schon den Objekttyp */
  .card-type { display: none !important; }
  .card-body { padding: 0.4rem 1.5rem 1.6rem !important; }
  .card-badge { font-size: 11px !important; letter-spacing: 0.22em !important; }
  /* Lange Badge-Texte (z. B. "Einfamilienhaus mit Wassergrundstück") auf
     Mobile auf eine schmale Zeile zwingen, statt unschön umzubrechen. */
  .card-badge--long { font-size: 8.5px !important; letter-spacing: 0.12em !important; white-space: nowrap !important; }
  .card-title { font-size: 24px !important; line-height: 1.3 !important; }
  .card-price { font-size: 27px !important; }
  .card-meta { flex-wrap: wrap !important; gap: 0.6rem 1.2rem !important; }
  .meta-item { font-size: 15px !important; }
  .card-type, .card-location { font-size: 13.5px !important; }
  .card-cta-text { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; color: #1a2340 !important; }
  /* Grauer Balken (Verdunkelungs-Overlay) auf Bildern weg — Bild voll sichtbar */
  .card-img-overlay { display: none !important; }

  /* Slider-Dots dynamisch: alle 8 */
  .slider-dots { padding: 1.5rem 1rem 0 !important; flex-wrap: wrap !important; }
  .side-arrow { width: 38px !important; height: 38px !important; }

  /* ━━━━ TRUST-STRIP (mobil 1 Spalte) ━━━━ */
  .trust-strip { padding: 2.2rem 1.5rem !important; }
  .trust-header { margin-bottom: 1.6rem !important; }
  .trust-eyebrow { font-size: 9px !important; letter-spacing: 0.32em !important; }
  .trust-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .trust-item { gap: 1rem !important; }
  .trust-title { font-size: 18px !important; }
  .trust-text { font-size: 14px !important; line-height: 1.7 !important; }
  .trust-inline { font-size: 11px !important; letter-spacing: 0.14em !important; flex-wrap: wrap !important; }

  /* ━━━━ MARKTWERTERMITTLUNG WIDGET (kompakter!) ━━━━ */
  .ph-section, [class*="ph-section"] {
    padding: 3rem 0.6rem 2.5rem !important;
  }
  .ph-inner { padding: 0 0.4rem !important; }
  .ph-eyebrow { display: none !important; }
  .ph-title { font-size: 36px !important; line-height: 1.1 !important; margin-bottom: 0.8rem !important; }
  .ph-sub { font-size: 13px !important; line-height: 1.55 !important; margin-bottom: 1rem !important; }
  .ph-row { grid-template-columns: 1fr !important; gap: 0.4rem !important; margin-bottom: 1rem !important; }
  .ph-point-text { font-size: 12px !important; }
  .ph-points { gap: 0.4rem !important; margin-top: 0.8rem !important; }
  .ph-widget-wrap { margin-top: 2rem !important; }
  .ph-widget { padding: 2.4rem 1.6rem 1.8rem !important; border-radius: 6px !important; }
  .ph-widget-title { font-size: 32px !important; margin-bottom: 0.5rem !important; line-height: 1.15 !important; }
  /* Subline verstecken — vom User gewünscht entfernt */
  .ph-widget-sub { display: none !important; }
  /* Mobile-Progress kompakter aber elegant */
  .wiz-progress { margin: 0 auto 1.5rem !important; max-width: 280px !important; }
  .wiz-progress-dot { width: 30px !important; height: 4px !important; }
  
  .wiz-step-header { margin-bottom: 1.4rem !important; }
  .wiz-step-num { font-size: 12px !important; margin-bottom: 0.6rem !important; letter-spacing: 0.2em !important; }
  .wiz-step-title { font-size: 28px !important; line-height: 1.2 !important; }
  .wiz-step-title em { font-style: italic !important; color: inherit !important; }
  .typ-grid { grid-template-columns: 1fr 1fr !important; gap: 0.7rem !important; }
  .typ-card { padding: 1.4rem 0.8rem !important; }
  .typ-icon svg { width: 32px !important; height: 32px !important; }
  .typ-name { font-size: 20px !important; margin-top: 0.6rem !important; font-weight: 500 !important; }
  .typ-sub { font-size: 13.5px !important; line-height: 1.4 !important; }
  .zustand-grid { grid-template-columns: 1fr !important; gap: 0.7rem !important; }
  .zustand-card { padding: 1.3rem 1.2rem !important; }
  .zustand-name { font-size: 21px !important; font-weight: 500 !important; }
  .zustand-sub { font-size: 14.5px !important; line-height: 1.4 !important; }
  .energie-pills { grid-template-columns: repeat(5, 1fr) !important; gap: 0.4rem !important; }
  .energie-pill { padding: 0.85rem 0.3rem !important; font-size: 17px !important; font-family: 'Raleway', sans-serif !important; font-weight: 500 !important; }
  .ph-label { font-size: 12px !important; letter-spacing: 0.22em !important; margin-bottom: 10px !important; }
  .ph-input {
    font-size: 17px !important;
    padding: 14px 16px !important;
    font-family: 'Raleway', sans-serif !important;
    border: 0.5px solid #e4e9f2 !important;
    border-radius: 4px !important;
    background: #fff !important;
  }
  /* Buttons (Zurück/Weiter/Bewertung anfragen) */
  .wiz-back, .wiz-next, .wiz-submit {
    font-size: 12px !important;
    padding: 14px 18px !important;
    min-height: 50px !important;
    letter-spacing: 0.22em !important;
  }

  /* ━━━━ Formulare allgemein ━━━━ */
  .form-row, .contact-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  input, textarea, select {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.85rem 1rem !important;
  }
  button { font-size: 14px !important; min-height: 48px !important; box-sizing: border-box !important; }

  /* ━━━━ Kontaktseite — Direktkontakt-Label/Werte größer + ice-blue ━━━━ */
  .direct-card { padding: 2.2rem 1.5rem !important; }
  .direct-title {
    font-size: 14px !important;
    letter-spacing: 0.26em !important;
    color: #6b7fb5 !important;
    margin-bottom: 1.8rem !important;
    padding-bottom: 1rem !important;
  }
  .contact-name { font-size: 34px !important; line-height: 1.15 !important; }
  .contact-role { font-size: 19px !important; margin-bottom: 2rem !important; }
  .contact-info-icon { width: 50px !important; height: 50px !important; }
  .contact-info-icon svg { width: 22px !important; height: 22px !important; }
  .contact-info-label {
    font-size: 13px !important;
    letter-spacing: 0.25em !important;
    color: #6b7fb5 !important;
    margin-bottom: 8px !important;
  }
  .contact-info-value { font-size: 16px !important; line-height: 1.5 !important; }
  .contact-info-value a { font-size: 16px !important; }
  .contact-block { gap: 1.8rem !important; }
  .contact-hours { margin-top: 2.2rem !important; padding-top: 1.8rem !important; }
  .contact-hours-title {
    font-size: 13px !important;
    letter-spacing: 0.25em !important;
    color: #6b7fb5 !important;
    margin-bottom: 1.1rem !important;
  }
  .contact-hours-list { font-size: 17px !important; line-height: 1.8 !important; color: var(--ffi-blue) !important; }
  .contact-hours-list em { font-size: 17px !important; }

  /* Hours-Rows auf anderen Seiten (Startseite, Verkaufen, Finanzieren) */
  .hours-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0.55rem 0 !important;
    max-width: 100% !important;
    gap: 1rem !important;
  }
  .hours-day {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 17px !important;
    color: var(--ffi-blue) !important;
    font-weight: 300 !important;
    font-style: normal !important;
    letter-spacing: 0.005em !important;
  }
  .hours-time {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 17px !important;
    color: var(--ffi-blue) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-variant-numeric: tabular-nums lining-nums !important;
    font-feature-settings: 'tnum' 1, 'lnum' 1 !important;
    letter-spacing: 0.005em !important;
  }

  .form-card-title { font-size: 32px !important; line-height: 1.15 !important; }
  .form-card-sub { font-size: 18px !important; margin-bottom: 1.8rem !important; line-height: 1.5 !important; }
  .form-label { font-size: 14px !important; letter-spacing: 0.18em !important; color: #6b7fb5 !important; }
  .form-input, .form-textarea, .form-select { font-size: 17px !important; padding: 1rem 1.1rem !important; }
  .form-consent label { font-size: 14px !important; line-height: 1.7 !important; }
  .form-submit { width: 100% !important; justify-content: center !important; padding: 1.2rem 1.5rem !important; font-size: 14px !important; min-height: 52px !important; }
  .form-note { font-size: 13px !important; }

  /* ━━━━ Standard-Seiten-Header (Impressum, AGB, Datenschutz, Kontakt) ━━━━ */
  .page-header { padding: 2.5rem 1.5rem 2rem !important; text-align: center !important; }
  .page-eyebrow { font-size: 10px !important; letter-spacing: 0.32em !important; }
  .page-title { font-size: 30px !important; line-height: 1.1 !important; }
  .page-subtitle { font-size: 16px !important; line-height: 1.55 !important; }
  .main-grid { grid-template-columns: 1fr !important; gap: 2rem !important; padding: 2rem 1.5rem 3.5rem !important; }
  .info-card { position: static !important; padding: 1.8rem 1.4rem !important; }
  .info-title { font-size: 11px !important; letter-spacing: 0.28em !important; }
  .legal-section { padding: 1.5rem 0 !important; }
  .legal-section h2, .sec-mark { font-size: 20px !important; }

  /* ━━━━ OBJEKTSEITEN ━━━━ */
  .gh-hero, .obj-hero, .objekt-hero, [class*="-hero"] {
    min-height: auto !important;
    padding: 2rem 1.2rem !important;
  }
  /* Hero-Container kompakter machen */
  .gh { padding: 0 1rem 1.5rem !important; display: flex !important; flex-direction: column !important; }
  /* gh-main auflösen: Bild, Thumbnails und Eckdaten als Geschwister anordnen */
  .gh-main { display: contents !important; }
  /* Bild bekommt feste Höhe, voll sichtbar — order 1 (vor Thumbnails und Eckdaten) */
  .gh-main-bg {
    order: 1 !important;
    position: relative !important;
    height: 340px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }
  /* Overlay komplett weg auf Mobile — Bild bleibt unverdunkelt */
  .gh-main-overlay { display: none !important; }
  /* Goldlinie weg */
  .gh-gold-line { display: none !important; }
  /* Thumbnails (gh-strip) direkt nach dem Bild */
  .gh-strip { order: 2 !important; }
  /* Title + Eckdaten erscheinen erst NACH den Thumbnails */
  .gh-bottom {
    order: 3 !important;
    position: static !important;
    padding: 1.6rem 0.2rem 0.5rem !important;
    background: transparent !important;
    color: var(--ffi-blue) !important;
  }
  /* "Gesamte Bildergalerie..." ans Ende */
  .gh-more-hint { order: 4 !important; }
  .gh-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.3em !important;
    margin-bottom: 0.7rem !important;
    color: var(--ice-blue) !important;
    text-shadow: none !important;
  }
  .gh-title {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
    color: var(--ffi-blue) !important;
    text-shadow: none !important;
    font-weight: 600 !important;
  }
  .gh-title em { color: #6b7fb5 !important; font-style: italic !important; }
  .gh-divider {
    margin: 0.9rem 0 1.1rem !important;
    background: rgba(30,46,110,0.15) !important;
    opacity: 1 !important;
  }

  /* Eckdaten neu: Label als Überschrift (oben), Wert darunter — untereinander */
  .gh-facts, .obj-facts {
    padding: 0 !important;
  }
  .gh-fact-group, .fact-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .gh-fact, .fact-row-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 0.9rem 0 !important;
    border-bottom: 0.5px solid rgba(30,46,110,0.08) !important;
    border-top: none !important;
  }
  .gh-fact-k {
    font-size: 10px !important;
    letter-spacing: 0.28em !important;
    color: var(--ice-blue) !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
  }
  .gh-fact-v {
    font-size: 22px !important;
    line-height: 1.2 !important;
    color: var(--ffi-blue) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    font-variant-numeric: tabular-nums lining-nums !important;
  }
  .gh-price-block {
    text-align: left !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 1rem 0 0.5rem !important;
    border-top: 0.5px solid rgba(30,46,110,0.2) !important;
    border-bottom: none !important;
    margin-top: 0.5rem !important;
  }
  .gh-price-k {
    font-size: 10px !important;
    letter-spacing: 0.28em !important;
    color: var(--ice-blue) !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
  }
  .gh-price-v {
    font-size: 28px !important;
    color: var(--ffi-blue) !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    font-variant-numeric: tabular-nums lining-nums !important;
  }

  /* Main Grid in Objektseiten */
  .gh-main-grid, .obj-main-grid, [class*="-main-grid"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 2.5rem 1.2rem !important;
  }

  /* fact-row: Bauweise etc. — Labels und Werte untereinander */
  .fact-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.25rem !important;
    padding: 0.8rem 0 !important;
  }
  .fact-row .k {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
  }
  .fact-row .v {
    font-size: 16px !important;
    line-height: 1.45 !important;
    word-wrap: break-word !important;
    white-space: normal !important;
  }
  /* Bauweise & Heizung etc.: lange Werte mit · trennen */
  .fact-row .v {
    white-space: pre-line !important;
  }

  /* Energieausweis-Zeilen */
  .ed-row {
    grid-template-columns: 1fr !important;
    gap: 0.2rem !important;
    padding: 0.7rem 0 !important;
  }
  .ed-row .k { font-size: 10px !important; }
  .ed-row .v { font-size: 16px !important; }

  /* Galerie-Thumbs (nur die Thumb-Container, NICHT die inneren .gh-thumb-bg/.gh-thumb-cap/.gh-thumb-num) */
  .gh-thumb, .lb-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4/3 !important;
  }
  /* Letztes Bild ist im Desktop zentriert (span 2 Spalten). Auf Mobile soll
     es dieselbe Größe wie die übrigen Bilder haben — also nur eine Spalte. */
  .gh-thumb.gh-centered {
    grid-column: auto !important;
    width: 100% !important;
    justify-self: stretch !important;
  }
  .gh-thumb-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }
  .gh-more-hint { font-size: 13px !important; }
  .lb-btn { width: 38px !important; height: 38px !important; font-size: 16px !important; }

  /* ━━━━ MOBILE-LAYOUT FÜR OBJEKTSEITEN ━━━━ */
  /* Kleinen Eckdaten-Strip im Hero ausblenden */
  body.obj-page .gh-bottom .gh-divider,
  body.obj-page .gh-bottom .gh-facts { display: none !important; }

  /* Hero-Titel der Objektseiten — einheitlich größer */
  body.obj-page .gh-title { font-size: 36px !important; line-height: 1.1 !important; }

  /* "Mehr Bilder zeigen"-Button + Hinweis kleiner als der Titel */
  body.obj-page .gh-expand-btn { font-size: 9px !important; padding: 11px 22px !important; letter-spacing: 0.28em !important; }
  body.obj-page .gh-more-hint { font-size: 14px !important; line-height: 1.55 !important; }

  /* Exposé-CTA direkt unter den Bildern */
  .expose-mobile-cta { display: flex !important; justify-content: center !important; padding: 0.5rem 1.5rem 2.5rem !important; }
  body.obj-page .btn-expose-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 2.4rem !important;
    background: var(--ffi-blue) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  /* Reihenfolge: Hero → Exposé-CTA → Drohne → Eckdaten → Beschreibung → Lage → Kontakt */
  body.obj-page { display: flex !important; flex-direction: column !important; }
  body.obj-page > .nav-top              { order: 1 !important; }
  body.obj-page > .nav-bottom           { order: 2 !important; }
  body.obj-page > .breadcrumb           { order: 3 !important; }
  body.obj-page > .gh                   { order: 4 !important; }
  body.obj-page > .expose-mobile-cta    { order: 5 !important; }
  body.obj-page > .drone                { order: 6 !important; }
  body.obj-page > .sec-facts            { order: 7 !important; }
  body.obj-page > .sec-about            { order: 8 !important; }
  body.obj-page > .sec-lage             { order: 9 !important; }
  body.obj-page > .contact              { order: 10 !important; }
  body.obj-page > .provision            { order: 11 !important; }
  body.obj-page > footer                { order: 12 !important; }

  /* Eckdaten: "Auf einen Blick" einzeilig + zentriert */
  body.obj-page .sec-facts { padding: 3rem 1.5rem 3.2rem !important; text-align: center !important; }
  body.obj-page .sec-facts .sec-mark { justify-content: center !important; }
  body.obj-page .sec-facts .facts-head { margin-bottom: 2rem !important; text-align: center !important; }
  body.obj-page .sec-facts .facts-head h2 {
    font-size: 30px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
  body.obj-page .sec-facts .facts-head h2 br { display: none !important; }

  /* Eckdaten: zentriert, Labels größer */
  body.obj-page .sec-facts .facts-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  body.obj-page .sec-facts .fact-row {
    display: block !important;
    grid-template-columns: none !important;
    padding: 1.1rem 0 !important;
    border-bottom: 0.5px solid rgba(30,46,110,0.12) !important;
    gap: 0 !important;
    text-align: center !important;
  }
  body.obj-page .sec-facts .fact-row:last-child { border-bottom: none !important; }
  body.obj-page .sec-facts .fact-row .k {
    display: block !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
  }
  body.obj-page .sec-facts .fact-row .v {
    display: block !important;
    font-family: var(--serif) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: var(--ffi-blue) !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* About-Section in Größe der Lage-Section angleichen */
  body.obj-page .sec-about .about h2,
  body.obj-page .sec-lage  .lage  h2 {
    font-size: 28px !important;
    line-height: 1.1 !important;
    margin-bottom: 1.2rem !important;
  }
  body.obj-page .sec-about .about-body,
  body.obj-page .sec-lage  .lage-body p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
  body.obj-page .sec-about .about-body .lead-p {
    font-size: 17px !important;
    line-height: 1.45 !important;
    margin-bottom: 1.2rem !important;
  }

  /* Footer-Kontakt-Schrift weiß (war fälschlich dunkel) */
  body.obj-page .contact-info-line,
  body.obj-page .contact-info-line a,
  body.obj-page .contact-info-line span {
    color: rgba(255,255,255,0.92) !important;
  }

  /* "Persönlich interessiert?" Kontakt-CTA in Objektseiten */
  .contact-cta-box, .contact-cta, .obj-contact, [class*="-cta-box"] {
    padding: 2rem 1.4rem !important;
  }
  .contact-cta-box h2,
  .contact-cta h2,
  .obj-contact h2 {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
  }
  /* "Gerne senden wir Ihnen..." — größer + lesbar */
  .contact-cta-box p,
  .contact-cta p,
  .obj-contact p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin-bottom: 1.5rem !important;
  }
  .contact-cta-row { display: flex !important; flex-direction: column !important; gap: 0.7rem !important; }
  .btn-light, .btn-outline, .btn-primary, .btn-secondary {
    width: 100% !important;
    text-align: center !important;
    padding: 1rem 1.5rem !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Kontaktinfo-Zeilen in Objektseiten (Tel/Email/Adresse) — alle gleich groß */
  .contact-info-line {
    display: flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    padding: 0.6rem 0 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    flex-wrap: wrap !important;
  }
  .contact-info-line a,
  .contact-info-line span {
    font-size: 15px !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.92) !important;
    letter-spacing: 0.01em !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    word-break: break-word !important;
  }

  /* ━━━━ Provisionshinweis verstecken ━━━━ */
  .provision, .provision-inner, [class*="provision"] {
    display: none !important;
  }

  /* ━━━━ FOOTER (groß genug zum Lesen) ━━━━ */
  .footer { padding: 3rem 1.5rem 1.5rem !important; }
  .footer-inner { max-width: 100% !important; }
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    text-align: left !important;
  }
  .footer-brand { text-align: left !important; }
  .footer-logo { justify-content: flex-start !important; }
  .footer-logo-name { font-size: 17px !important; }
  .footer-tagline { font-size: 15px !important; margin-bottom: 1.2rem !important; }
  .footer-address {
    font-size: 15px !important;
    line-height: 1.85 !important;
    color: rgba(255,255,255,0.75) !important;
  }
  .footer-address span {
    font-size: 15px !important;
  }
  .footer-col-title {
    font-size: 11px !important;
    letter-spacing: 0.3em !important;
    margin-bottom: 1rem !important;
    color: rgba(255,255,255,0.55) !important;
  }
  .footer-link {
    font-size: 15px !important;
    line-height: 2.1 !important;
    color: rgba(255,255,255,0.75) !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding-top: 1.5rem !important;
  }
  .footer-copy { font-size: 12px !important; }
  .footer-legal {
    flex-wrap: wrap !important;
    gap: 0.8rem 1.2rem !important;
  }
  .footer-legal a { font-size: 12px !important; }

  /* ━━━━ Sticky-Elemente entschärfen ━━━━ */
  [class*="sticky"] { position: static !important; }

  /* ━━━━ Tabellen ━━━━ */
  table { display: block !important; overflow-x: auto !important; white-space: nowrap !important; }
}


/* ╔════════════════════════════════════════════════════╗
   ║  ab 420px — kleine Handys                          ║
   ╚════════════════════════════════════════════════════╝ */
@media (max-width: 420px) {
  .nav-top { padding: 0.85rem 4rem 0.85rem 0.85rem !important; }
  .nav-brand { font-size: 18px !important; white-space: nowrap !important; }
  .nav-top-logo { width: 30px; height: 30px; }
  
  .hero { padding: 3rem 1.2rem 2.5rem !important; }
  .hero-tagline { font-size: 36px !important; }
  .pos-headline { font-size: 28px !important; }
  .ph-title { font-size: 30px !important; }
  .contact-title, .page-title { font-size: 24px !important; }
  .properties-title { font-size: 32px !important; }
  .mobile-menu-overlay .mm-nav a { font-size: 25px !important; padding: 0.95rem 0 !important; }
  .typ-grid { grid-template-columns: 1fr !important; }
  .energie-pills { grid-template-columns: repeat(4, 1fr) !important; }
}


/* ━━━━ Mobile: Fabian-Falk-Portrait klein ÜBER dem Text (Startseite) ━━━━ */
@media (max-width: 768px) {
  .pos-portrait { position: static !important; transform: none !important; left: auto !important; width: 220px !important; max-width: 220px !important; margin: 0 auto 1.6rem !important; overflow: hidden !important; border-radius: 3px !important; }
  .pos-portrait img { aspect-ratio: 5 / 6; border-radius: 0; transform: scale(1.1); transform-origin: 62% 62%; }
}