/* Showcase 05: 3D-Raumplaner im Baumodus (Karte auf der Startseite) */
.project.raum {
  --accent: #3be07a; --accent-glow: rgba(59,224,122,.38);
  grid-template-columns: 1fr; gap: 34px;
}
.project.raum .kicker { color: #5cf095; }
.raum-head { display: grid; grid-template-columns: 1fr 1.05fr; gap: 20px 48px; align-items: end; }
.raum-head p { margin-bottom: 22px; }
.raum-head .pills { margin-bottom: 26px; }
.btn.raum-go { background: #1fbf5e; border-color: #1fbf5e; color: #04150a; box-shadow: 0 10px 40px -8px var(--accent-glow); }
.btn.raum-go:hover { background: #3be07a; border-color: #3be07a; box-shadow: 0 16px 50px -8px var(--accent-glow); }
button.btn { font-family: inherit; cursor: pointer; }

.project.raum .media.raum-stage {
  aspect-ratio: 16/9; transform: none; border-radius: 26px; isolation: isolate;
  background:
    radial-gradient(70% 60% at 50% 62%, rgba(59,224,122,.13), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #0e1712, #050806 70%);
  box-shadow: 0 0 0 1px rgba(59,224,122,.22), 0 50px 120px -40px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.06);
  user-select: none; -webkit-user-select: none;
}
.project.raum:hover .media.raum-stage { transform: none; }
.raum-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; opacity: 0; transition: opacity .6s; }
.raum-stage.is-ready canvas { opacity: 1; }

/* Laden */
.raum-load { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; text-align: center; transition: opacity .5s; pointer-events: none; }
.raum-load b { font: 500 12px/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: #8fe8b2; }
.raum-load span { display: block; width: 180px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; margin: 0 auto; }
.raum-load i { display: block; height: 100%; background: #3be07a; transform: scaleX(.04); transform-origin: left; transition: transform .2s; box-shadow: 0 0 14px #3be07a; }
.raum-stage.is-ready .raum-load { opacity: 0; }

/* HUD wie im Baumodus */
.raum-hud { position: absolute; inset: 16px 16px auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none; z-index: 2; }
.raum-chip, .raum-budget, .raum-steps, .raum-link, .raum-done, .raum-tip {
  background: rgba(6,12,8,.62); border: 1px solid rgba(59,224,122,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.raum-chip { white-space: nowrap; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #dfffe9; }
.raum-chip i { width: 8px; height: 8px; border-radius: 50%; background: #3be07a; box-shadow: 0 0 0 0 rgba(59,224,122,.6); animation: raumPing 1.6s infinite; }
.raum-stage.is-done .raum-chip i { animation: none; }
@keyframes raumPing { 0% { box-shadow: 0 0 0 0 rgba(59,224,122,.6); } 80%,100% { box-shadow: 0 0 0 10px rgba(59,224,122,0); } }
.raum-budget { padding: 10px 14px 11px; border-radius: 16px; min-width: 168px; text-align: right; }
.raum-budget .mono { font-size: 10px; letter-spacing: .24em; color: #8fe8b2; }
.raum-budget b { display: block; white-space: nowrap; margin: 4px 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.raum-budget span { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.raum-budget span i { display: block; height: 100%; background: linear-gradient(90deg, #1fbf5e, #8dffb5); transform-origin: left; box-shadow: 0 0 10px #3be07a; }

.raum-steps { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; z-index: 2; }
.raum-steps ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.raum-steps li { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #7f8a83; transition: background .3s, color .3s; white-space: nowrap; }
.raum-steps li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
.raum-steps li.ok { color: #8fe8b2; }
.raum-steps li.on { background: #3be07a; color: #04150a; }
.raum-steps li.on::before { opacity: 1; }
.raum-steps button { margin-left: 4px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #dfffe9; font-size: 16px; cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .4s var(--ease); }
.raum-steps button:hover { background: rgba(59,224,122,.3); transform: rotate(-180deg); }

/* Link einfügen */
.raum-link { position: absolute; left: 50%; bottom: 70px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 14px; z-index: 2;
  transform: translate(-50%, 12px) scale(.96); opacity: 0; transition: opacity .25s, transform .35s var(--ease); pointer-events: none; }
.raum-link.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.raum-link .mono { font-size: 10px; letter-spacing: .2em; color: #3be07a; flex: none; }
.raum-link b { font: 500 13px/1.2 var(--mono); color: #eafff1; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 0; }
.raum-link.show b { animation: raumType .45s steps(28) forwards; }
@keyframes raumType { to { max-width: 46ch; } }

/* Preise, Maße, Tooltip */
.raum-pops { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.raum-anchor { position: absolute; left: 0; top: 0; will-change: transform; }
.raum-anchor > span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; }
.raum-anchor.dim > span, .raum-anchor.area > span { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: #04150a; background: #3be07a; padding: 6px 9px; border-radius: 6px;
  opacity: 0; scale: .6; transition: opacity .3s, scale .4s var(--ease); box-shadow: 0 0 24px rgba(59,224,122,.5); }
.raum-anchor.area > span { font-size: 15px; font-weight: 500; padding: 8px 12px; background: rgba(4,21,10,.8); color: #8dffb5; border: 1px solid #3be07a; }
.raum-anchor.show > span { opacity: 1; scale: 1; }
.raum-anchor.money > span { transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 4px; animation: raumMoney 2.6s var(--ease) var(--d, 0s) both; }
.raum-anchor.money b { font-size: 26px; font-weight: 900; letter-spacing: -.03em; color: #ff5a4f; text-shadow: 0 2px 0 #3a0603, 0 0 24px rgba(255,59,47,.55); font-variant-numeric: tabular-nums; }
.raum-anchor.money small { font: 500 11px/1 var(--mono); letter-spacing: .08em; color: #fff; background: rgba(0,0,0,.6); padding: 5px 8px; border-radius: 6px; }
@keyframes raumMoney {
  0% { opacity: 0; translate: 0 18px; scale: .5; }
  12% { opacity: 1; translate: 0 0; scale: 1.12; }
  20% { scale: 1; }
  75% { opacity: 1; translate: 0 -34px; }
  100% { opacity: 0; translate: 0 -60px; }
}
.raum-tip { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; padding: 9px 12px; border-radius: 12px; display: grid; gap: 3px; opacity: 0; transition: opacity .15s; translate: 16px -50%; }
.raum-tip.show { opacity: 1; }
.raum-tip b { font-size: 14px; color: #fff; }
.raum-tip span { font: 500 11px/1 var(--mono); letter-spacing: .06em; color: #8fe8b2; }

/* Fertig */
.raum-done { position: absolute; left: 50%; top: 70%; z-index: 2; padding: 18px 26px; border-radius: 22px; text-align: center; pointer-events: none;
  transform: translate(-50%, -50%) scale(.7); opacity: 0; transition: opacity .3s, transform .5s cubic-bezier(.3,1.6,.5,1); border-color: rgba(59,224,122,.6); box-shadow: 0 0 60px rgba(59,224,122,.35); }
.raum-done.show { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: .9s; animation: raumDone .6s 3.4s forwards; }
@keyframes raumDone { to { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }
.raum-done .mono { color: #3be07a; font-size: 11px; }
.raum-done b { display: block; margin-top: 6px; font-size: clamp(24px, 3.4vw, 38px); font-weight: 900; letter-spacing: -.04em; color: #fff; }
.raum-done em { font-style: normal; color: #3be07a; }
.raum-done span { display: block; margin-top: 4px; color: #b9c7be; font-size: 14px; }
.raum-hint { position: absolute; left: 20px; top: 62px; z-index: 2; font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(223,255,233,.55); opacity: 0; transition: opacity .6s; pointer-events: none; }
.raum-stage.is-done .raum-hint { opacity: 1; }
.raum-stage.is-error canvas { display: none; }
.raum-stage.is-error { background: #050806 url(/raum/og-raum.jpg) center / cover; }
.raum-stage.is-error .raum-hud, .raum-stage.is-error .raum-steps { display: none; }

@media (max-width: 860px), (pointer: coarse) { .raum-hint { display: none; } }
@media (max-width: 860px) {
  .raum-head { grid-template-columns: 1fr; }
  .project.raum .media.raum-stage { aspect-ratio: 4/5; max-width: none; }
}
@media (max-width: 560px) {
  .raum-hud { inset: 12px 12px auto; }
  .raum-chip { padding: 8px 11px; font-size: 10px; letter-spacing: .14em; }
  .raum-budget { min-width: 0; padding: 8px 11px 9px; }
  .raum-budget b { font-size: 17px; margin: 3px 0 6px; }
  .raum-steps { bottom: 12px; }
  .raum-steps li { padding: 8px 9px; font-size: 0; gap: 0; }
  .raum-steps li.on { font-size: 10px; gap: 6px; }
  .raum-link { bottom: 62px; padding: 8px 12px; }
  .raum-link b { font-size: 11px; }
  .raum-anchor.money b { font-size: 21px; }
  .raum-done { padding: 14px 18px; white-space: nowrap; }
  .raum-done b { font-size: 24px; }
  .raum-done span { font-size: 12px; }
}