/* Showcase 01: Wienopoly (Karte auf der Startseite, Kamerafahrt als Video) */
.project.wien {
  --accent: #f5b841; --accent-glow: rgba(245,184,65,.36);
  grid-template-columns: 1fr; gap: 34px;
}
.project.wien .kicker { color: #ffcf6b; }
.wien-head { display: grid; grid-template-columns: 1fr 1.05fr; gap: 20px 48px; align-items: end; }
.wien-head p { margin-bottom: 22px; }
.wien-head .pills { margin-bottom: 26px; }
.btn.wien-go { background: #f5b841; border-color: #f5b841; color: #1a1204; box-shadow: 0 10px 40px -8px var(--accent-glow); }
.btn.wien-go:hover { background: #ffcb5c; border-color: #ffcb5c; box-shadow: 0 16px 50px -8px var(--accent-glow); }
.new-tag { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(245,184,65,.14); border: 1px solid rgba(245,184,65,.4); color: #ffd98a; font: 500 10px/1 var(--mono); letter-spacing: .2em; vertical-align: 2px; }

.project.wien .media.wien-stage, .project.wien:hover .media.wien-stage { transform: none; }
.project .media.wien-stage, .hero-stage.wien-stage {
  position: relative; aspect-ratio: 16/9; border-radius: 26px; overflow: hidden; isolation: isolate; max-width: none; background: #000;
  box-shadow: 0 0 0 1px rgba(245,184,65,.22), 0 50px 120px -40px var(--accent-glow, rgba(245,184,65,.36)), inset 0 1px 0 rgba(255,255,255,.06);
}
.project .media.wien-stage video, .wien-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wien-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.3), transparent 22%, transparent 74%, rgba(0,0,0,.5)); }

/* Credit-Chips wie im Reel: Nummer, Rolle, KI */
.wien-chip {
  position: absolute; left: 18px; top: 18px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px;
  border-radius: 14px; background: rgba(8,8,10,.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12); border-left: 3px solid var(--c);
  opacity: 0; transform: translateX(-14px); transition: opacity .35s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1); pointer-events: none;
}
.wien-chip.on { opacity: 1; transform: none; }
.wien-chip small { font: 500 10px/1 var(--mono); letter-spacing: .2em; color: var(--c); }
.wien-chip span { display: grid; gap: 3px; }
.wien-chip em { font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #a3a3ad; font-style: normal; }
.wien-chip b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; }

.wien-hud { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 14px; }
.wien-track { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.16); overflow: hidden; }
.wien-track i { display: block; height: 100%; background: #f5b841; transform: scaleX(0); transform-origin: left; }
.wien-stage:not(.is-ready) .wien-track { opacity: 0; }
.wien-toggle {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,.2); background: rgba(8,8,10,.6); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wien-toggle:hover { border-color: #f5b841; }
.wien-toggle svg { width: 14px; height: 14px; }
.wien-toggle .i-play, .wien-stage.is-paused .wien-toggle .i-pause { display: none; }
.wien-stage.is-paused .wien-toggle .i-play { display: block; }

/* Ton-Knopf: leuchtet und pulsiert, solange der Film stumm ist */
.wien-sound {
  position: absolute; right: 18px; top: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px 0 8px; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--sans, sans-serif); color: #1a1204;
  border: 1px solid #ffd27a; background: linear-gradient(180deg, #ffd06a, #f5b841);
  box-shadow: 0 0 0 1px rgba(245,184,65,.4), 0 0 22px rgba(245,184,65,.75), 0 0 60px rgba(245,184,65,.45);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s;
}
.wien-sound:hover { transform: scale(1.05); box-shadow: 0 0 0 1px rgba(245,184,65,.5), 0 0 30px rgba(245,184,65,.95), 0 0 80px rgba(245,184,65,.6); }
.wien-sound i { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #1a1204; color: #ffd06a; }
.wien-sound i::before, .wien-sound i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #ffd06a; animation: wienRing 1.8s cubic-bezier(.2,.8,.2,1) infinite; }
.wien-sound i::after { animation-delay: .9s; }
@keyframes wienRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
.wien-sound svg { width: 18px; height: 18px; }
.wien-sound .i-on, .wien-sound .t-on { display: none; }
/* Ton an: ruhiger, dunkler Knopf mit goldenem Rand, Wellen schwingen */
.has-sound .wien-sound { background: rgba(8,8,10,.7); color: #ffe1a3; border-color: rgba(245,184,65,.6); box-shadow: 0 0 18px rgba(245,184,65,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.has-sound .wien-sound i { background: #f5b841; color: #1a1204; }
.has-sound .wien-sound i::before, .has-sound .wien-sound i::after { animation: none; opacity: 0; }
.has-sound .wien-sound .i-on, .has-sound .wien-sound .t-on { display: block; }
.has-sound .wien-sound .i-off, .has-sound .wien-sound .t-off { display: none; }
.has-sound .wien-sound .i-on .w { animation: wienWave 1s ease-in-out infinite alternate; transform-origin: 40% 50%; }
.has-sound .wien-sound .i-on .w2 { animation-delay: .3s; }
@keyframes wienWave { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wien-sound i::before, .wien-sound i::after { animation: none; opacity: 0; } }

@media (max-width: 860px) {
  .wien-sound { right: 10px; top: 10px; height: 38px; padding: 0 12px 0 5px; font-size: 13px; gap: 7px; }
  .wien-sound i { width: 28px; height: 28px; }
  .wien-sound svg { width: 15px; height: 15px; }
  .wien-head { grid-template-columns: 1fr; }
  .project .media.wien-stage { border-radius: 18px; max-width: none; margin: 0; }
  .wien-chip { left: 10px; top: 10px; padding: 7px 12px 7px 9px; gap: 9px; }
  .wien-chip b { font-size: 15px; }
  .wien-hud { left: 10px; right: 10px; bottom: 8px; }
  .new-tag { margin: 8px 0 0; }
}