/* ================================================================
   raeume-styles.css  -  "Unsere Raeume"
   ================================================================
   VERSION: 4
   ABLAGEORT: /site/templates/styles/raeume-styles.css

   Wird nur auf der Raeume-Seite geladen (siehe _main.php,
   $rivaNeedsRaeume). Seiten-Header (.page-header/.header-box) und
   Basis-Klassen (.btn/.eyebrow/.script/.ph-flat) kommen bereits aus
   header-styles.css - hier nur die raeume-spezifischen Bausteine.

   Datei enthaelt nur ASCII-Zeichen.
   ================================================================ */

/* ---------- Layout: sticky Navigation + Raum-Bloecke ---------- */
.raeume-wrap{padding:70px 0 100px;}
.rooms-layout{display:grid;grid-template-columns:210px 1fr;gap:60px;align-items:start;}

.rooms-nav{position:sticky;top:100px;display:flex;flex-direction:column;gap:2px;}
.rn-item{
  display:flex;align-items:baseline;gap:12px;padding:12px 4px 12px 18px;
  border-left:2px solid var(--line);font-size:14.5px;color:var(--text-muted);font-weight:500;
  transition:all .3s var(--ease);
}
.rn-num{font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;color:var(--accent-deep);letter-spacing:.04em;margin-right:2px;}
.rn-item:hover{color:var(--text);border-left-color:var(--accent-deep);}
.rn-item.active{color:var(--text);font-weight:600;border-left-color:var(--accent);}

.room-block{
  display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;
  margin-bottom:110px;position:relative;scroll-margin-top:100px;
}
.room-block:last-child{margin-bottom:0;}
.room-block.reverse{grid-template-columns:1fr 1.15fr;}
.room-block.reverse .room-media{order:2;}

.room-media{position:relative;aspect-ratio:4/5;border-radius:3px;overflow:hidden;box-shadow:var(--shadow-2);}
.room-media img{width:100%;height:100%;object-fit:cover;display:block;}
.room-media .ph-flat{height:100%;border:none;border-radius:0;}

.room-copy{position:relative;}
.room-ghost{
  position:absolute;top:-56px;right:0;z-index:0;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:130px;line-height:1;
  color:rgba(41,46,58,.045);pointer-events:none;user-select:none;
}
html.dark .room-ghost{color:rgba(255,255,255,.05);}
.room-block.reverse .room-ghost{right:auto;left:0;}
.room-copy .inner{position:relative;z-index:1;}
.room-copy .script{font-size:20px;}
.room-copy h2{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:32px;margin:6px 0 16px;}
.room-copy p{font-size:17px;line-height:1.8;color:var(--text-muted);font-weight:300;margin:0 0 16px;}

.room-tags{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px;}
.room-tags span{
  font-size:13px;font-weight:500;padding:8px 16px;border:1px solid var(--line);border-radius:20px;
  color:var(--text-muted);white-space:nowrap;
}
.room-tags span.note{border-style:dashed;font-style:italic;}

.room-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.room-strip .r-gtile{aspect-ratio:1/1;overflow:hidden;}

.r-gtile{
  border:1px dashed var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;text-align:center;
  will-change:transform;transition:transform .15s ease-out,box-shadow .3s var(--ease);box-shadow:var(--shadow-1);
}
.r-gtile:hover{box-shadow:var(--shadow-2);}
.r-gtile .ph-n{font-size:12px;}
.r-gtile .ph-l{font-size:12px;}

/* ---------- Einblend-Animation ----------
   Lokal, wie ueberall im Projekt (kein globales .reveal). */
.raeume-wrap .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.raeume-wrap .reveal.in{opacity:1;transform:translateY(0);}

@media(max-width:980px){
  .rooms-layout{grid-template-columns:1fr;}
  .rooms-nav{
    position:static;flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:6px;
    border-bottom:1px solid var(--line);margin-bottom:40px;
  }
  .rn-item{border-left:none;border-bottom:3px solid transparent;white-space:nowrap;padding:10px 14px;}
  .rn-item.active{border-left:none;border-bottom-color:var(--accent);}
  .room-block,.room-block.reverse{grid-template-columns:1fr;gap:26px;margin-bottom:70px;}
  .room-block.reverse .room-media{order:0;}
  .room-ghost{display:none;}
}

/* ---------- Lightbox fuer die Mini-Galerie-Kacheln ----------
   1:1 dasselbe Muster wie die Galerie-Lightbox (galerie-styles.css):
   weisser 8px-Rahmen ums Bild, Balken buendig darunter mit
   Raum-Titel links, Zaehler + Riva-Logo rechts, Pfeile zum Blaettern
   innerhalb der Mini-Galerie DIESES Raums. */
.rm-lightbox{
  position:fixed;inset:0;background:rgba(12,14,18,.93);z-index:200;
  display:none;align-items:center;justify-content:center;padding:48px 76px;
}
.rm-lightbox.open{display:flex;}

.rm-lb-frame{
  margin:0;background:#fff;padding:8px;border-radius:2px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  max-width:100%;max-height:100%;
  display:flex;flex-direction:column;
}
.rm-lb-frame img{
  display:block;max-width:100%;
  max-height:calc(100vh - 96px - 16px - 8px - 46px);
  width:auto;height:auto;object-fit:contain;
}
.rm-lb-bar{
  background:#2E3441;color:#fff;margin-top:8px;margin-bottom:0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 14px;min-height:46px;
}
.rm-lb-title{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:14px;letter-spacing:.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rm-lb-right{display:flex;align-items:center;gap:14px;flex:0 0 auto;}
.rm-lb-counter{font-size:12.5px;color:rgba(255,255,255,.6);letter-spacing:.04em;white-space:nowrap;}
.rm-lb-logo{height:26px;width:auto;display:block;}

.rm-lb-close,.rm-lb-prev,.rm-lb-next{
  position:absolute;background:rgba(255,255,255,.1);color:#fff;border:none;
  cursor:pointer;transition:background .2s var(--ease);border-radius:50%;z-index:2;
}
.rm-lb-close{top:16px;right:20px;width:42px;height:42px;font-size:24px;}
.rm-lb-prev,.rm-lb-next{
  top:50%;transform:translateY(-50%);width:48px;height:48px;
  font-size:30px;line-height:1;font-weight:700;text-align:center;padding-bottom:3px;
}
.rm-lb-prev{left:16px;}
.rm-lb-next{right:16px;}
.rm-lb-close:hover,.rm-lb-prev:hover,.rm-lb-next:hover{background:rgba(255,255,255,.24);}

.r-gtile[data-lightbox]{cursor:zoom-in;}

@media(max-width:980px){
  .rm-lightbox{padding:50px 12px;}
  .rm-lb-frame img{max-height:calc(100vh - 100px - 16px - 8px - 46px);}
  .rm-lb-prev,.rm-lb-next{width:40px;height:40px;font-size:24px;}
  .rm-lb-prev{left:6px;}
  .rm-lb-next{right:6px;}
}

@media(max-width:760px){
  .wrap.raeume-wrap{padding-left:30px;padding-right:30px;}
}