/* ============================================================
   Bauhausquadrat – gemeinsames Basis-Stylesheet
   Enthält: globale Basiswerte, wiederkehrende Komponentenklassen
   (Buttons, Kicker, Icon-Buttons, Karten-Links, Menü-Link) sowie
   die Sichtbarkeits-/Zustandsklassen für die interaktiven Bausteine
   aus site.js (Menü, Akkordeon, Formular-Assistent, Lightbox/
   Galerie, Modal, Sticky-Bar). Seiten-individuelle Layout- und
   Farbregeln bleiben bewusst inline im jeweiligen HTML (1:1 wie im
   Ursprungsentwurf), damit dieses Stylesheet klein und über alle
   sechs Seiten hinweg unverändert bleibt.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; max-width: 100%; }
img, svg, video, iframe { max-width: 100%; }

/* Hero-Sektionen (feste Pixel-Höhe, Hintergrundbild via object-fit:cover):
   eine feste Höhe bedeutet, dass sich beim Ziehen des Browserfensters
   der sichtbare Bildausschnitt laufend ändert (object-fit:cover
   skaliert nach, um die Höhe zu füllen). Ab 900px Breite folgt die
   Hero-Höhe stattdessen dem Seitenverhältnis des ursprünglichen
   1920px-Referenzentwurfs (aspect-ratio) – der Ausschnitt bleibt beim
   Resizen weitgehend konstant, mit einer Mindesthöhe als Untergrenze
   für schmalere Desktop-/Tablet-Breiten. Unter 900px (Mobile) bleibt
   bewusst die feste, separat abgestimmte Höhe erhalten. */
@media (min-width: 900px) {
  [style*="height: 660px; overflow: hidden; background-color: #0E0E0E"] { height: auto !important; aspect-ratio: 1920 / 660; min-height: 480px; }
  [style*="height: 736px; overflow: hidden; background-color: #0E0E0E"] { height: auto !important; aspect-ratio: 1920 / 736; min-height: 540px; }
  [style*="height: 560px; overflow: hidden; background-color: #0E0E0E"] { height: auto !important; aspect-ratio: 1920 / 560; min-height: 410px; }
  [style*="height: 620px; overflow: hidden; background-color: #0E0E0E"] { height: auto !important; aspect-ratio: 1920 / 620; min-height: 450px; }
  [style*="height: 640px; overflow: hidden; background-color: #0E0E0E"] { height: auto !important; aspect-ratio: 1920 / 640; min-height: 470px; }
}

.bhq { font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif; color: #1C1C1C; background: #F3ECDD; }
.bhq a { color: inherit; text-decoration: none; }

.kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #A6935F; }
.kicker-dark { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #C9B79A; }

.btn { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 16px 30px; border: 1.5px solid currentColor; cursor: pointer; background: none; font-family: inherit; }
.btn-gold { color: #0E0E0E; background: #C9B79A; border-color: #C9B79A; }
.btn-gold:hover { background: #A6935F; border-color: #A6935F; }
.btn-outline-light { color: #F3ECDD; background: transparent; }
.btn-outline-light:hover { color: #C9B79A; border-color: #C9B79A; }
.btn-outline-dark { color: #0E0E0E; background: transparent; }
.btn-outline-dark:hover { color: #A6935F; border-color: #A6935F; }

.icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(243,236,221,0.55); background: rgba(243,236,221,0.07); }
.icon-btn:hover { border-color: #C9B79A; color: #C9B79A; background: rgba(201,183,154,0.12); }

.card-link:hover { color: #A6935F; }
.card-link svg { transition: transform 0.15s ease; }
.card-link:hover svg { transform: translateX(4px); }

.menu-link { font-size: 18px; font-weight: 600; letter-spacing: 0.02em; }
.menu-link:hover { color: #C9B79A; }

.field-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #7A7365; display: block; margin-bottom: 8px; }
.field-label .req { color: #A6935F; margin-left: 2px; }
.text-input, .select-input { width: 100%; padding: 13px 14px; border: 1px solid #DCD0B8; background: #FAF7F0; font-family: inherit; font-size: 14px; color: #1C1C1C; }
.text-input:focus, .select-input:focus { outline: 2px solid #C9B79A; border-color: #C9B79A; }
.radio-option { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid #DCD0B8; background: #FAF7F0; cursor: pointer; font-size: 14px; font-weight: 600; }
.radio-option:hover { border-color: #C9B79A; }
.radio-option.selected { border-color: #A6935F; background: #F0E7D4; }

.faq-q { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; background: none; border: none; padding: 20px 0; cursor: pointer; font-family: inherit; font-size: 15.5px; font-weight: 600; color: #1C1C1C; gap: 16px; }
.bauhaus-title { font-family: 'BauhausDisplay', 'Montserrat', sans-serif; letter-spacing: 0.02em; }
.tag-pill { display: inline-flex; padding: 10px 18px; border: 1px solid #DCD0B8; font-size: 13px; font-weight: 600; }
.stat-num { font-family: 'Montserrat', sans-serif; font-size: 52px; font-weight: 800; color: #C9B79A; line-height: 1; }

/* ---------- Zustandsklassen (von site.js gesteuert) ---------- */

/* Menü-Drawer */
.menu-drawer { position: fixed; inset: 0; z-index: 100; background: rgba(14,13,11,0.45); display: none; }
.menu-drawer.open { display: block; }

/* Untermenü-Akkordeon im Drawer, generisches FAQ-Akkordeon.
   Der "offen"-Zustand (welcher display-Wert dann gilt) wird von site.js
   per Inline-Style gesetzt (siehe data-accordion-display) – hier nur der
   initiale, geschlossene Zustand, damit vor dem JS-Start nichts aufblitzt. */
[data-accordion-panel] { display: none; }
.accordion-icon { transition: transform 0.15s ease; }
[data-accordion-toggle].open .accordion-icon { transform: rotate(180deg); }

/* Formular-Assistent (mehrstufig) */
[data-step] { display: none; }

/* Typspezifische Fragenblöcke (Bewertungsformular Makler): erst nach
   Auswahl des Immobilientyps zeigt site.js den passenden Block. */
[data-type-panel] { display: none; }
[data-step].active { display: block; }

/* Video-/Bild-Lightbox als Modal. Der "offen"-Display-Wert wird von site.js
   per Inline-Style gesetzt (siehe data-modal-display) – hier nur der initiale,
   geschlossene Zustand, damit vor dem JS-Start nichts aufblitzt. */
[data-modal] { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; }

/* Sticky-Bar unten */
[data-sticky-bar] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; }
[data-sticky-bar].dismissed { display: none; }

/* Galerie-Filmstreifen: aktiver Zustand von Vergrößerungs-Thumbnails */
[data-gallery-thumb] { cursor: pointer; }

/* ============================================================
   Responsive / Mobile
   Das Layout ist überwiegend über Inline-Styles pro Element
   umgesetzt (siehe Kommentar oben). Damit mobile Regeln trotzdem
   greifen, ohne hunderte Inline-Styles anzufassen, werden hier
   die wiederkehrenden Werte gezielt per Attribut-Selektor mit
   !important überschrieben. overflow-x:hidden oben ist das
   Sicherheitsnetz gegen den "Viewport zoomt raus"-Effekt; die
   Regeln hier sorgen dafür, dass Inhalte dabei nicht abgeschnitten
   werden, sondern echt umbrechen.
   ============================================================ */
@media (max-width: 900px) {
  /* Zweispaltige Grids (fixe px-Spalte + 1fr, oder 1fr 1fr) -> stapeln */
  [style*="grid-template-columns: 380px 1fr"],
  [style*="grid-template-columns: 420px 1fr"],
  [style*="grid-template-columns: 1fr 440px"],
  [style*="grid-template-columns: 1fr 480px"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Mehrspaltige Grids (Karten, Referenzen, Statistiken) -> 2 Spalten */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Sticky-CTA-Leiste (Friedrichsbau, Haus ELEPHANT): Ankündigungstext
     kürzt sich mit Ellipsis statt Button/Schließen-X aus dem Bild zu
     drängen (die Leiste ist fixed und wird vom globalen
     overflow-x:hidden nicht mitgeclippt). */
  .sticky-cta { padding: 14px 16px !important; gap: 12px !important; }
  .sticky-cta > span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Große feste Blockbreiten -> volle Breite des Elternelements */
  [style*="width: 900px"], [style*="width: 960px"], [style*="width: 780px"],
  [style*="width: 680px"], [style*="width: 660px"], [style*="width: 640px"],
  [style*="width: 600px"], [style*="width: 560px"], [style*="width: 520px"],
  [style*="width: 420px"] {
    width: 100% !important;
  }

  /* Große Seitenabstände -> kompakter auf schmalen Screens */
  [style*="padding: 110px 64px"],
  [style*="padding: 90px 64px"],
  [style*="padding: 80px 64px"],
  [style*="padding: 32px 64px"],
  [style*="padding: 88px 60px"],
  [style*="padding: 80px 60px"],
  [style*="padding: 0 64px 110px"],
  [style*="padding: 0 64px 120px"],
  [style*="padding: 0 64px 90px"],
  [style*="padding: 56px 64px 32px"],
  [style*="padding: 64px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* CTA-/Info-Zeilen mit space-between: bei Bedarf umbrechen statt abschneiden */
  [style*="justify-content: space-between"] { flex-wrap: wrap !important; row-gap: 16px !important; }

  /* Kopfzeile: Telefonnummer ausblenden, Abstände verkleinern */
  header[style*="padding: 26px 64px"] {
    padding: 16px 20px !important;
  }
  header a[href^="tel:"] { display: none; }
  header [style*="gap: 28px"] { gap: 10px !important; }

  /* Fußzeile: Spalten stapeln statt nebeneinander */
  footer[style*="padding: 56px 64px 32px"] { padding: 40px 20px 24px !important; }
  footer > div[style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }
  footer div[style*="gap: 56px"] { gap: 28px !important; flex-wrap: wrap !important; }
  footer div[style*="gap: 44px"] { flex-wrap: wrap !important; row-gap: 20px !important; }

  /* Statistik-Zahlenreihen (flex + großer fester gap) -> umbrechen statt
     über den Rand zu laufen */
  [style*="gap: 100px"] { gap: 32px !important; flex-wrap: wrap !important; row-gap: 24px !important; }

  /* Hero-Textblock (absolut positioniert links, oben oder unten) -> Breite begrenzen */
  [style*="position: absolute; left: 64px; bottom"],
  [style*="position: absolute; left: 64px; top"] {
    left: 20px !important;
    right: 20px !important;
    max-width: none !important;
  }
  [style*="position: absolute; left: 64px; bottom"] h1,
  [style*="position: absolute; left: 64px; top"] h1 {
    font-size: 28px !important;
  }
  /* Hero-CTA-Buttons (Startseite: zwei Buttons nebeneinander) -> umbrechen
     statt über den Bildschirmrand hinauszulaufen */
  [style*="position: absolute; left: 64px; bottom"] div[style="display: flex; gap: 14px;"],
  [style*="position: absolute; left: 64px; top"] div[style="display: flex; gap: 14px;"] {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 480px) {
  /* Foto-/Grundriss-Galerien bleiben zweispaltig (dichte Übersicht wichtiger
     als große Einzelbilder); alle übrigen Karten-Grids -> eine Spalte */
  [style*="grid-template-columns: repeat(2, 1fr)"]:not([data-gallery]),
  [style*="grid-template-columns: repeat(3, 1fr)"]:not([data-gallery]),
  [style*="grid-template-columns: repeat(4, 1fr)"]:not([data-gallery]),
  [style*="grid-template-columns: repeat(5, 1fr)"]:not([data-gallery]),
  [style*="grid-template-columns: repeat(6, 1fr)"]:not([data-gallery]) {
    grid-template-columns: 1fr !important;
  }
}