/* ============ DG Immobilien – Mobile / Responsive ============ */

/* --- Burger / Navigation --- */
.dg-burger{ display:none; }

@media (max-width: 880px){
  .dg-desktop-nav{ display:none !important; }
  .dg-cta{ display:none !important; }
  .dg-burger{ display:flex !important; }
  .dg-logo{ height:48px !important; }
  .dg-header{ min-height:66px !important; }
  .dg-header-inner{ padding-left:20px !important; padding-right:20px !important; }
}
@media (min-width: 881px){
  .dg-mobile-panel{ display:none !important; }
}

/* --- Mobiles Aufklapp-Menü: Aussehen rein über CSS (robust auf allen Geräten) --- */
@media (max-width: 880px){
  .dg-mobile-panel{
    display:flex !important;
    flex-direction:column !important;
    background:#ffffff !important;
    max-height:0;
    opacity:0;
    overflow:hidden;
    padding:0 22px !important;
    border-top:1px solid transparent;
    transition:max-height .4s ease, opacity .3s ease, padding .4s ease;
  }
  .dg-mobile-panel.is-open{
    max-height:88vh !important;
    opacity:1 !important;
    padding:6px 22px 26px !important;
    border-top:1px solid #ECE8DF !important;
  }
  .dg-mnav{
    font-family:'Lato', system-ui, sans-serif !important;
    font-size:18px !important;
    font-weight:600 !important;
    color:#0E0E0E !important;
    text-decoration:none !important;
    padding:16px 2px !important;
    border-bottom:1px solid #ECE8DF !important;
    display:block !important;
  }
  .dg-mnav-cta{
    font-family:'Lato', system-ui, sans-serif !important;
    font-size:16px !important;
    font-weight:600 !important;
    color:#ffffff !important;
    background:#0E0E0E !important;
    text-decoration:none !important;
    text-align:center !important;
    padding:17px !important;
    border-radius:2px !important;
    margin-top:20px !important;
    display:block !important;
  }
}

/* --- Spalten-Raster brechen um (React serialisiert mit Leerzeichen) --- */
@media (max-width: 880px){
  [style*="repeat(4, 1fr)"]{ grid-template-columns:1fr 1fr !important; }
  [style*="repeat(3, 1fr)"]{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width: 600px){
  [style*="repeat(4, 1fr)"]{ grid-template-columns:1fr !important; }
  [style*="repeat(3, 1fr)"]{ grid-template-columns:1fr !important; }
  [style*="repeat(2, 1fr)"]{ grid-template-columns:1fr !important; }
}

/* --- Seitliche Abstände fürs Handy --- */
@media (max-width: 600px){
  section{ padding-left:20px !important; padding-right:20px !important; }
  /* Zweispaltige Flex-Bereiche (Hero, Schritt-Zeilen, Kontakt …) untereinander stapeln */
  [style*="flex: 1 1 "]{ flex-basis:100% !important; max-width:100% !important; }
  /* Hero-Bereiche oben weniger Luft (fixer Header ist kleiner) */
  [style*="180px 40px"]{ padding-top:100px !important; }
  [style*="172px 40px"]{ padding-top:100px !important; }
  [style*="168px 40px"]{ padding-top:98px !important; }
  [style*="150px 40px"]{ padding-top:92px !important; }
}

/* --- Immobilienbewertung: Assistent frueher sichtbar machen (Handy) ---
   Traffic kommt ueberwiegend von Instagram/Facebook, also mobil und ungeduldig.
   Auf kleinen Bildschirmen entfaellt daher das rein dekorative Hero-Foto und die
   Innenabstaende des Assistenten werden gestrafft. Alle Regeln sind ueber
   #bew-hero bzw. #wizard fest auf diese eine Seite begrenzt. */
@media (max-width: 600px){
  [style*="aspect-ratio: 4 / 5"]:has(#bew-hero){ display:none !important; }
  #wizard{ padding-top:44px !important; padding-bottom:64px !important; }
  #wizard [style*="border-radius: 10px"]{ padding:26px 18px !important; }
  #wizard [style*="margin-bottom: 40px"]{ margin-bottom:22px !important; }
  #wizard [style*="margin: 0px auto 56px"]{ margin-bottom:26px !important; }

  /* Schritt 1 (Objektart): Die allgemeine Regel weiter oben macht am Handy aus
     jedem Vierer-Raster EINE Spalte. Bei den Auswahlkacheln ergibt das 756 px
     Hoehe - "Grundstueck" liegt dann 1,4 Bildschirme unter der Frage und wird
     schlicht nicht gesehen. Zweispaltig und mit kleineren Symbolen stehen alle
     vier Optionen zusammen mit der Frage auf einem Bildschirm. */
  #wizard [style*="repeat(4, 1fr)"]{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
  #wizard [style*="repeat(4, 1fr)"] [style*="padding: 34px 14px"]{ padding:18px 8px !important; }
  #wizard [style*="repeat(4, 1fr)"] svg{ width:40px !important; height:40px !important; }
  #wizard [style*="repeat(4, 1fr)"] [style*="padding: 14px 8px"]{ padding:10px 6px !important; font-size:13.5px !important; }

  /* Schritt 8 (Adresse): Das Ort-Feld lief rechts aus der Karte heraus.
     Grund: Ein Eingabefeld will von sich aus rund 174 px breit sein und
     schrumpft in einer Flex-Zeile nicht darunter (min-width:auto). Mit
     min-width:0 darf es kleiner werden, und die PLZ braucht weniger Platz. */
  #wizard input{ min-width:0 !important; }
  #wizard input[style*="width: 140px"]{ width:92px !important; }
}


/* ============ Schriftumstellung auf Lato ============
   Die mit Claude Design gebauten Seiten setzen ihre Schriften direkt am Element
   ("style"-Attribut). Deshalb laesst sich das nicht ueber die Klassen aendern,
   sondern nur ueber diese zentralen Regeln. Sie greifen auf allen Seiten und
   sind an einer Stelle wieder zurueckzunehmen.
   Cormorant Garamond wurde fuer Ueberschriften benutzt - eine Groteske braucht
   dort mehr Gewicht und eine engere Laufweite, sonst wirkt die Zeile blass. */
body,
[style*="Cormorant"],
[style*="Hanken"] {
  font-family: 'Lato', system-ui, -apple-system, sans-serif !important;
}
[style*="Cormorant"] {
  font-weight: 700 !important;
  letter-spacing: -.018em !important;
}