/* Raumfenster (Details eines Raums) am Handy: kompakt, damit möglichst alles auf einen Bildschirm passt.
   Reicht der Platz nicht, scrollt das Fenster, und „Freie Termine“ / „Gutscheine“ bleiben unten stehen.
   Vollbild und Grundaufbau setzen die Seiten selbst (Inline-Stile „Popups als Vollbild“); deshalb steht
   hier überall .m-dialog davor, damit diese Regeln gewinnen. Gilt auch für das Fenster aus dem Kalender. */
@media (max-width: 900px) {
  .m-dialog .m-dialog__inhalt:has(> .raumdetail__links) { padding-bottom: 0 !important; }

  /* Bild flacher, Eckdaten zweispaltig */
  .m-dialog .raumdetail__links { min-height: 0 !important; }
  .m-dialog .raumdetail__infos {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, max-content));
    column-gap: 18px;
    row-gap: 4px !important;
    padding: 96px 16px 12px !important;
  }
  .m-dialog .raumdetail__infos > div {
    height: auto !important;
    gap: 8px !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }
  .m-dialog .raumdetail__infos svg { width: 16px; height: 16px; }

  /* Text dichter */
  .m-dialog .raumdetail__links + div { padding: 12px 16px 0 !important; }
  .m-dialog .raumdetail__links + div > h2 { margin-top: 8px !important; font-size: 22px !important; line-height: 28px !important; }
  .m-dialog .raumdetail__links + div > h2 + p { height: auto !important; margin-top: 2px !important; font-size: 15px !important; line-height: 21px !important; }
  .m-dialog .raumdetail__links + div > div:empty { width: 72px !important; margin-top: 10px !important; }
  .m-dialog .raumdetail__links + div > div:has(> p) { gap: 6px !important; margin-top: 10px !important; }
  .m-dialog .raumdetail__links + div > div:has(> p) > p { font-size: 14.5px !important; line-height: 21px !important; }
  .m-dialog .raumdetail__links + div > p:has(> svg) { gap: 8px !important; margin-top: 8px !important; font-size: 13.5px !important; line-height: 19px !important; }
  .m-dialog .raumdetail__links + div > p:not(:has(svg)):not(h2 + p) { margin-top: 12px !important; }
  .m-dialog .raumdetail__links + div > div:has(> span):not(:first-child) { gap: 6px !important; margin-top: 6px !important; }
  .m-dialog .raumdetail__links + div > div:has(> span):not(:first-child) > span { padding: 2px 10px !important; font-size: 12.5px !important; line-height: 18px !important; }

  /* Knöpfe unten festhalten */
  .m-dialog .raumdetail__links + div > div:has(> a) {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: auto -16px 0 !important;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
    background: #FBF7F0;
    box-shadow: 0 -10px 18px -12px rgba(44, 26, 14, 0.35);
  }
  html[data-modus="dunkel"] .m-dialog .raumdetail__links + div > div:has(> a) {
    background: #3E2514;
    box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, 0.6);
  }
  .m-dialog .raumdetail__links + div > div:has(> a) > a {
    flex: 1 1 0;
    justify-content: center;
    height: 44px !important;
    padding: 0 10px !important;
  }
}

/* Desktop: zwischen „Ideal für“ und den Knöpfen immer Luft lassen. Mit vielen Begriffen rückten die Knöpfe
   direkt an die Chips (Fridolin 12.11.2026: „etwas eng“). Am Handy gilt die klebende Knopfleiste oben. */
@media (min-width: 901px) {
  .m-dialog .raumdetail__links + div > div:has(> a) { padding-top: 24px; }
}