/* ============================================================
   RAUM — Responsive overrides
   ------------------------------------------------------------
   Load AFTER main.css. Breakpoints: 900 / 600 / 390px.
   Class specificity matches main.css; source order wins, so
   no !important is needed.
   ============================================================ */

/* ---------- ≤ 900px : tablet / large phone ---------- */
@media (max-width:900px){
  /* Header → burger nav */
  .main-nav{display:none;}
  .header-meta{display:none;}
  .burger{display:flex;}

  /* Hero stacks, image first */
  .hero__grid{grid-template-columns:1fr;gap:34px;}
  .hero__media{order:-1;margin-bottom:16px;} /* room for the overhanging detail */
  .hero__detail{width:32%;}

  /* Showcase grid → simple stacked cards */
  .showcase__grid{display:flex;flex-direction:column;}
  .show-card{grid-column:auto;grid-row:auto;height:auto;aspect-ratio:16/10;}
  .show-card--feature{aspect-ratio:4/3;}

  /* Studio / B2B / Delivery → single column */
  .studio__grid{grid-template-columns:1fr;}
  .b2b__grid{grid-template-columns:1fr;}
  .delivery__grid{grid-template-columns:1fr;}

  /* Two-up grids */
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .rooms-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}

  /* Quiz stacks — teaser идёт во всю ширину 4-в-ряд на том же брейке, где inner становится колонкой
     (иначе 761–900px: 4 фото жмутся в узкий 2-колоночный блок «в кучу») */
  .quiz__inner{flex-direction:column;align-items:flex-start;}
  .quiz__teaser{width:100%;grid-template-columns:repeat(4,1fr);}
  .quiz__teaser img{aspect-ratio:1/1;height:auto;}

  /* Footer → 2 columns */
  .footer__grid{grid-template-columns:1fr 1fr;}
}

/* ---------- ≤ 600px : phone ---------- */
@media (max-width:600px){
  /* Single-column grids */
  .cat-grid{grid-template-columns:1fr;}
  .rooms-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr;}

  /* Hero CTAs go full-width stacked */
  .hero__cta{flex-direction:column;align-items:stretch;}
  .hero__cta > *{width:100%;}

  /* Stats wrap onto two rows */
  .stats{flex-wrap:wrap;gap:26px 38px;}

  /* Comparison table tightens */
  .compare-table{font-size:13px;table-layout:fixed;}
  .compare-table th,
  .compare-table td{overflow-wrap:break-word;word-break:normal;hyphens:auto;}
  .compare-table__th--param,.compare-table__param{width:30%;}
  .compare-table__th--raum,.compare-table__raum{width:36%;}
  .compare-table__th--old,.compare-table__old{width:34%;}
}

/* ---------- ≤ 390px : small phone ---------- */
@media (max-width:390px){
  .compare-table{font-size:12.5px;}
  .compare-table th,
  .compare-table td{padding:11px 8px;}
}