/* "Inhalt im Raum": the fixed web column (content/column.js) holding the section card and/or its companion
   card, and the floor guide line (hallreal/content). Decision 2026-10-17 ("more website, less game"):
   one stable column at the room's right edge, desktop max 380 px wide / 45 % viewport height (scrolls inside
   beyond that); phones a compact bottom bar, max 35 % viewport height. Website typography - kicker, title,
   lead - never game labels (no metres, no "HIER/WEITER"). bO.craft: dark surfaces, orange only as accent,
   square edges (radius <= 2px). Only active with html.room-content (website + 3D, not ?lesen=1); without it
   the page keeps its static reading columns. */

/* ---- section cards: the page panels 01-07 stand in the column when their pose is reached ---- */
.room-content main .section:not(#start) .panel {
  opacity: 0; pointer-events: none; will-change: transform, opacity;
  box-shadow: inset 3px 0 0 var(--accent), 0 18px 48px rgba(0,0,0,0.42);
  background: rgba(20,22,27,0.95); backdrop-filter: none; -webkit-backdrop-filter: none;   /* no re-blur of the 3D view per frame */
  transition: opacity 0.5s ease;
}
/* the layout box stays exactly as in the reading column (no layout shift); a shown card is capped in height
   (content/index.js sets the exact px inline - max 45 % of the viewport - this is only the pre-JS fallback) */
.room-content main .section:not(#start) .panel[data-room="on"] { max-height: 45vh; max-height: 45svh; overflow: auto; }
.room-content main .section:not(#start) .panel[data-room="on"],
.room-content main .section:not(#start) .panel:focus-within { opacity: 1; pointer-events: auto; }
/* walking: clicks go through the page into the hall (look around, use); only shown cards take the pointer */
.room-content.walking main { pointer-events: none; }
/* walking: the start column and its hints step aside, section cards keep showing when a pose is reached */
.room-content.walking #start, .room-content.walking .scroll-cue { opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; }

/* ---- companion card: at most one at a time, standing in the column below the section card (or alone) ---- */
.cc-layer { position: fixed; inset: 0; z-index: 16; pointer-events: none; }
.cc-card { position: absolute; left: 0; top: 0; width: 380px; max-width: calc(100vw - 24px); pointer-events: auto;
  background: rgba(20,22,27,0.95); border: 1px solid var(--border); border-right: 3px solid var(--accent); border-radius: 2px;
  overflow: auto; max-height: 45vh; max-height: 45svh;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);   /* no backdrop blur: over a live 3D view it re-blurs every frame */
  opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; will-change: transform, opacity; }
.cc-card.on { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s; }
.cc-open { display: grid; gap: 4px; width: 100%; min-height: 72px; padding: 12px 14px 10px; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 2px; color: var(--text); font: inherit; position: relative; }
.cc-open:hover .cc-title { color: #fff; }
.cc-open::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--dwell, 0) * 100%); background: var(--accent); }
.cc-kicker { font: 600 0.68rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.cc-title { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.cc-text { font-size: 0.88rem; line-height: 1.45; color: var(--text-2); }
.cc-more { display: none; font-size: 0.86rem; line-height: 1.45; color: var(--text); }
.cc-hint { font: 600 0.66rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.cc-card.more .cc-more { display: block; }
.cc-cta { display: none; margin: 0 14px 12px; min-height: 48px; padding: 0 12px; align-items: center; justify-content: flex-start;
  background: var(--accent); color: #0E1014; border: 0; border-radius: 2px; font: 600 0.86rem/1 var(--font); text-decoration: none; cursor: pointer; }
.cc-card.more .cc-cta { display: inline-flex; }
/* a quiet leader line only (content/index.js): from the column's room-facing (left) edge into the room - it
   never moves the card, so no arrow glyph on the card itself is needed any more */
.cc-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cc-leaders line { stroke: rgba(253,93,3,0.7); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0; transition: opacity 0.45s ease; }
.cc-leaders circle { fill: none; stroke: #FD5D03; stroke-width: 2; opacity: 0; transition: opacity 0.45s ease; }
.cc-leaders .on { opacity: 1; }

/* ---- compact section card on phones (kicker, title, first paragraph, "Mehr" -> detail panel) ---- */
.sc-card { position: absolute; left: 12px; right: 12px; bottom: 14px; max-height: 35vh; max-height: 35svh; overflow: hidden; pointer-events: auto;
  padding: 14px 16px 12px; display: grid; gap: 6px; align-content: start;
  background: rgba(20,22,27,0.94); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 2px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.sc-card.on { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s; }
.sc-kicker { margin: 0; font: 600 0.68rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.sc-title { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.sc-lead { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.sc-more { justify-self: start; position: relative; min-height: 48px; min-width: 96px; padding: 0 16px; background: var(--accent); color: #0E1014; border: 0; border-radius: 2px;
  font: 600 0.9rem/1 var(--font); cursor: pointer; }
.sc-more::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--dwell, 0) * 100%); background: #0E1014; }

/* the HUD owns the guidance (help, sheet, first hint): section cards shrink to their kicker line */
.room-hud-busy .sc-card > :not(.sc-kicker) { display: none; }
.room-hud-busy.room-content main .section:not(#start) .panel[data-room="on"] > :not(.eyebrow) { display: none; }
.room-hud-busy.room-content main .section:not(#start) .panel[data-room="on"] .eyebrow { margin: 0; }

@media (max-width: 760px) {
  .room-content main .section:not(#start) .panel[data-room="on"] { max-height: 46vh; max-height: 46svh; }
  /* phones: the companion card is a compact bottom bar too (content/index.js stops positioning it; this is its
     whole placement) - never anchored under a projected point, same convention as the section's own .sc-card */
  .cc-card { position: fixed; left: 12px; right: 12px; top: auto; bottom: 14px; width: auto; max-width: none; max-height: 35vh; max-height: 35svh; }
  .cc-open { min-height: 56px; padding: 10px 12px 8px; }
  .cc-text { display: none; }
  .cc-card.more .cc-text { display: block; }
}
.reduce-motion .cc-card, .reduce-motion .sc-card, .reduce-motion .cc-leaders line, .reduce-motion .cc-leaders circle,
.reduce-motion.room-content main .panel { transition: none !important; }