/* ─────────────────────────────────────────
   RÄUME — /raeume: one card per Raumtyp, its
   sections rendered as tabs inside the card.
   ───────────────────────────────────────── */
.raeume-section {
  padding: clamp(56px, 6vw, 88px) 0 clamp(72px, 8vw, 104px);
  background: #fff;
}

.raeume-grid {
  display: grid;
  gap: clamp(28px, 3.5vw, 48px);
}

.raeume-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  overflow: hidden;
  border: 1px solid #e3e3e2;
  border-radius: 24px;
  background: #fff;
  gap: clamp(24px, 3vw, 44px);
  /* The media column bleeds to the card edge; the body keeps its own padding. */
}

.raeume-media {
  min-width: 0;
}

/* Die Bildfläche ist vom Reiter-Inhalt entkoppelt: ein stabiles Seitenverhältnis je
   Breakpoint statt `height: 100%`. Vorher hing die Bildhöhe an der Kartenhöhe und die
   an der Höhe des aktiven Panels — beim Durchklicken der Reiter skalierte das Foto mit.
   Das Quadrat ist bewusst höher als jeder Textkörper, so blutet das Bild weiterhin bis
   an die Kartenkanten, ohne je einem Reiter zu folgen. */
.raeume-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  min-height: 260px;
  object-fit: cover;
}

/* No room photo yet — a branded plate rather than a stock picture. */
.raeume-placeholder {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  min-height: 260px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(22px, 2.4vw, 34px);
  background: linear-gradient(135deg, #f08300 0%, #d97500 58%, #171715 100%);
}

.raeume-placeholder::after {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0 18px,
    rgba(255, 255, 255, 0.1) 18px 36px
  );
  content: '';
  pointer-events: none;
}

.raeume-placeholder-num {
  position: relative;
  z-index: 1;
  color: rgba(250, 249, 245, 0.92);
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: clamp(64px, 8vw, 104px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.82;
}

.raeume-placeholder-hint {
  position: relative;
  z-index: 1;
  color: rgba(250, 249, 245, 0.78);
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Alternierender Rhythmus: jede zweite Karte spiegelt die Anordnung (Bild rechts,
   Text links) — rein aus dem Index, ohne CMS-Feld. Die DOM-Reihenfolge bleibt
   Bild-zuerst; unter 900px wird alles wieder einheitlich gestapelt. */
.raeume-card:nth-child(even) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.raeume-card:nth-child(even) .raeume-media {
  order: 2;
}

.raeume-body {
  min-width: 0;
  padding: clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px) 0;
}

.raeume-card:nth-child(even) .raeume-body {
  padding: clamp(26px, 3vw, 40px) 0 clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px);
}

.raeume-title {
  margin: 0;
  color: #111;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.04;
}

.raeume-tagline {
  margin: 10px 0 0;
  color: #f08300;
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.raeume-desc {
  max-width: 58ch;
  margin: 16px 0 0;
  color: #4a4a4a;
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: 16px;
  line-height: 1.62;
}

.raeume-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-top: 26px;
  border-bottom: 1px solid #e3e3e2;
  gap: 4px;
}

.raeume-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: #6e6e6d;
  cursor: pointer;
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 14px;
}

.raeume-tab:is(:hover, :focus-visible) {
  color: #111;
}

.raeume-tab.active {
  border-bottom-color: #f08300;
  color: #111;
}

.raeume-panel {
  padding-top: 20px;
}

.raeume-panel-body {
  max-width: 58ch;
  margin: 0;
  color: #4a4a4a;
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: 15px;
  line-height: 1.62;
}

.raeume-list {
  display: grid;
  margin: 14px 0 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.raeume-list li {
  position: relative;
  padding-left: 22px;
  color: #333;
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.raeume-list li::before {
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 8px;
  height: 2px;
  background: #f08300;
  content: '';
}

.raeume-link {
  display: inline-block;
  margin-top: 16px;
  border-bottom: 2px solid #f08300;
  color: #111;
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 2px;
  text-decoration: none;
}

.raeume-link:is(:hover, :focus-visible) {
  color: #f08300;
}

.raeume-contact {
  display: flex;
  align-items: center;
  margin-top: 24px;
  border-top: 1px solid #e3e3e2;
  gap: 14px;
  padding-top: 20px;
}

.raeume-contact-photo {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex: 0 0 48px;
  object-fit: cover;
}

.raeume-contact-initials {
  background: #171715;
  color: #faf9f5;
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.raeume-contact-name {
  color: #111;
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.raeume-contact-role,
.raeume-contact-link {
  color: #6e6e6d;
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: 13px;
}

.raeume-contact-link {
  color: #f08300;
  text-decoration: none;
}

@media (max-width: 900px) {
  .raeume-card,
  .raeume-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* Mobil einheitlich gestapelt: Bild immer oben, auch bei gespiegelten Karten. */
  .raeume-card:nth-child(even) .raeume-media {
    order: 0;
  }

  .raeume-media img,
  .raeume-placeholder {
    min-height: 200px;
  }

  .raeume-media img,
  .raeume-placeholder {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .raeume-body,
  .raeume-card:nth-child(even) .raeume-body {
    padding: clamp(22px, 5vw, 30px);
  }

  .raeume-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .raeume-tab {
    white-space: nowrap;
  }
}

/* ─────────────────────────────────────────
   DIGITALE GÄSTEMAPPE — der QR-Code unter der
   Raumübersicht. Das Bild ist zugleich Link:
   am Bildschirm kann niemand einen Code
   abfotografieren.
   ───────────────────────────────────────── */
.raeume-gaestemappe {
  padding: 0 0 clamp(72px, 8vw, 104px);
  background: #fff;
}

.raeume-gaestemappe-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 3vw, 40px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid #e3e3e2;
  border-radius: 24px;
  background: #faf9f5;
}

.raeume-gaestemappe-codelink {
  display: block;
  border-radius: 16px;
  line-height: 0;
}

.raeume-gaestemappe-codelink:focus-visible {
  outline: 2px solid #f08300;
  outline-offset: 4px;
}

.raeume-gaestemappe-code {
  display: block;
  width: clamp(140px, 18vw, 200px);
  height: auto;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
}

.raeume-gaestemappe-title {
  margin: 0 0 10px;
  color: #111;
  font-size: clamp(22px, 2.4vw, 30px);
}

.raeume-gaestemappe-text {
  margin: 0 0 14px;
  max-width: 62ch;
  color: #4a4a48;
  font-family: 'Univers', 'Ebrima', sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 700px) {
  .raeume-gaestemappe-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}