/* Fernseher-Ansicht. Bewusst ohne CSS-Variablen und moderne Selektoren (alte TV-Browser). Basis: 1rem = 1/96 der Bildbreite. */
@font-face { font-family: 'Gloock'; src: url(/fonts/gloock.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bebas Neue'; src: url(/fonts/bebas-neue.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(/fonts/bricolage-grotesque.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
* { box-sizing: border-box; }
html { font-size: 1.0417vw; }
html, body { margin: 0; height: 100%; background: #0b0f14; color: #ece6da; overflow: hidden; }
body { font-family: 'Bricolage Grotesque', 'Segoe UI', Arial, sans-serif; font-size: 1.5rem; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .serif { font-family: Gloock, Georgia, serif; font-weight: 400; margin: 0; }
p { margin: 0 0 0.8em; }
b { color: #ffffff; font-weight: 700; }
.hidden { display: none !important; }
.screen { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

/* Buttons (Fernbedienung: fokussierbar) */
.btn { display: inline-block; font: 700 1.6rem 'Bricolage Grotesque', Arial, sans-serif; color: #0b0f14; background: #ece6da; border: 0.25rem solid #ece6da; border-radius: 0.9rem; padding: 0.9rem 2.2rem; margin: 0 0.6rem 0.6rem 0; cursor: pointer; }
.btn.ghost { background: transparent; color: #ece6da; border-color: #262e38; }
.btn:focus, .btn:hover { outline: none; border-color: #d2462f; }

/* Start */
#start { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; }
#start .inner { width: 70rem; }
.tvlogo { margin: 0 0 1.6rem; }
#start #codeBox, #start #resume, #soundStart { opacity: 0; -webkit-animation: fade 0.9s ease 6.4s forwards; animation: fade 0.9s ease 6.4s forwards; }
@-webkit-keyframes fade2 { to { opacity: 1; } }
#start img.logo { width: 16rem; height: 16rem; }
#start h1 { font-size: 5rem; line-height: 1; margin: 1rem 0 0.4rem; }
#start .tag { color: #9aa3ad; font-size: 1.6rem; margin-bottom: 2.6rem; }
#cases .btn { display: block; width: 100%; text-align: left; margin: 0 0 1rem; background: #151b23; color: #ece6da; border-color: #151b23; padding: 1.3rem 1.8rem; }
#cases .btn:focus, #cases .btn:hover { border-color: #d2462f; }
#cases .btn small { display: block; font-weight: 400; color: #9aa3ad; font-size: 1.2rem; margin-top: 0.2rem; }

/* Kopfzeile im Spiel */
.bar { position: absolute; left: 0; right: 0; top: 0; height: 6rem; padding: 1.2rem 3rem; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
.bar .brand { font-family: Gloock, Georgia, serif; font-size: 1.7rem; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
.bar .brand img { width: 3rem; height: 3rem; vertical-align: middle; margin-right: 0.8rem; }
.bar .case { color: #9aa3ad; font-size: 1.3rem; margin-right: 2rem; }
.miniqr { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; background: #151b23; border-radius: 0.8rem; padding: 0.4rem 0.9rem 0.4rem 0.4rem; }
.miniqr .q { width: 5.4rem; height: 5.4rem; margin-right: 0.8rem; }
.miniqr .q svg { width: 100%; height: 100%; display: block; border-radius: 0.3rem; }
.miniqr span { font-size: 1.05rem; color: #9aa3ad; line-height: 1.25; }
.miniqr span b { font-size: 1.5rem; letter-spacing: 0.08em; color: #ece6da; }
.bar .miniqr { margin-top: 1.6rem; }

/* Warteraum */
#lobby .wrap { position: absolute; left: 4rem; right: 4rem; top: 9rem; bottom: 4rem; display: -webkit-box; display: -webkit-flex; display: flex; }
#lobby .qrcard { width: 34rem; background: #ece6da; color: #0b0f14; border-radius: 1.6rem; padding: 2rem; text-align: center; margin-right: 4rem; }
#lobby .qrcard .big { width: 30rem; height: 30rem; margin: 0 auto 1rem; }
#lobby .qrcard .big svg { width: 100%; height: 100%; display: block; }
#lobby .qrcard .url { font-size: 1.5rem; }
#lobby .qrcard .url b { color: #b8361f !important; }
#lobby .qrcard .code { font-family: Gloock, Georgia, serif; font-size: 3.4rem; letter-spacing: 0.12em; line-height: 1.1; }
#lobby .side { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
#lobby h1 { font-size: 4.2rem; line-height: 1.05; }
#lobby .sub { color: #9aa3ad; margin: 0.5rem 0 2rem; }
.roles { overflow: hidden; }
.role { float: left; width: 48%; margin: 0 2% 1.2rem 0; background: #151b23; border-radius: 1rem; padding: 1.1rem 1.4rem; border: 0.2rem solid #151b23; }
.role.on { border-color: #d2462f; }
.role .n { font-family: Gloock, Georgia, serif; font-size: 1.7rem; }
.role .t { color: #9aa3ad; font-size: 1.2rem; }
.role .who { font-size: 1.3rem; margin-top: 0.3rem; color: #6b6f73; }
.role.on .who { color: #ece6da; }
.hint { color: #9aa3ad; font-size: 1.4rem; margin-top: 1rem; }

/* Bühne */
#stage .body { position: absolute; left: 4rem; right: 4rem; top: 9rem; bottom: 7.5rem; display: -webkit-box; display: -webkit-flex; display: flex; }
#stage .art { width: 52%; margin-right: 3rem; border-radius: 1.6rem; overflow: hidden; background: #151b23; }
#stage .art svg { width: 100%; height: 100%; display: block; }
#stage .txt { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; overflow: hidden; }
#stage.noart .art { display: none; }
#stage .eyebrow { font-family: 'Bebas Neue', Arial, sans-serif; font-size: 1.9rem; letter-spacing: 0.12em; color: #d2462f; margin-bottom: 0.3rem; line-height: 1; }
#stage h2 { font-size: 3.6rem; line-height: 1.08; margin-bottom: 1.4rem; }
#stage .text { font-size: 1.75rem; line-height: 1.5; }
.cards { margin-top: 1rem; }
.card { background: #ece6da; color: #0b0f14; border-radius: 1rem; padding: 1rem 1.3rem; margin-bottom: 0.8rem; }
.card .k { font-family: 'Bebas Neue', 'Courier New', monospace; font-size: 1.4rem !important; letter-spacing: 0.12em !important; font-size: 1.1rem; letter-spacing: 0.05em; color: #d2462f; text-transform: uppercase; }
.card b { color: #b8361f; }
.prompts { margin: 1rem 0 0; padding: 0; list-style: none; }
.prompts li { background: #151b23; border-left: 0.4rem solid #d2462f; border-radius: 0.5rem; padding: 0.7rem 1.1rem; margin-bottom: 0.7rem; font-size: 1.6rem; }
.timer { font-family: Gloock, Georgia, serif; font-size: 6rem; line-height: 1; color: #ece6da; margin-top: 1.2rem; }
.timer.over { color: #ef6a52; }
.waiting { text-align: center; }
.waiting img { width: 22rem; height: auto; }
.chips { margin-top: 1.4rem; }
.chip { display: inline-block; background: #151b23; border-radius: 99rem; padding: 0.5rem 1.2rem; margin: 0 0.6rem 0.6rem 0; font-size: 1.3rem; color: #9aa3ad; border: 0.15rem solid #151b23; }
.chip.done { color: #0b0f14; background: #ece6da; border-color: #ece6da; }
.chip.off { border-color: #ef6a52; color: #ef6a52; }
.opts .o { margin-bottom: 0.9rem; }
.opts .lbl { font-size: 1.6rem; margin-bottom: 0.25rem; }
.opts .barbg { background: #151b23; border-radius: 0.5rem; height: 2.4rem; overflow: hidden; }
.opts .barfg { background: #d2462f; height: 100%; color: #0b0f14; font-weight: 700; padding: 0 0.8rem; line-height: 2.4rem; font-size: 1.3rem; min-width: 2.6rem; }
.hints { margin-top: 1rem; }
.hints .h { background: #151b23; border-radius: 0.8rem; padding: 0.8rem 1.1rem; margin-bottom: 0.6rem; font-size: 1.5rem; }
.hints .h span { color: #d2462f; font-weight: 700; margin-right: 0.6rem; }
.solved { background: #ece6da; color: #0b0f14; border-radius: 1rem; padding: 1rem 1.3rem; font-size: 1.6rem; margin-top: 1rem; }
.solved b { color: #0b0f14; }
.verdict { font-size: 5.2rem !important; color: #d2462f; }

/* Fußzeile: wer ist verbunden */
.foot { position: absolute; left: 4rem; right: 4rem; bottom: 2rem; height: 3.5rem; font-size: 1.2rem; color: #6b6f73; }
.foot .p { display: inline-block; margin-right: 1.6rem; }
.foot .dot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #3f8f5f; margin-right: 0.5rem; vertical-align: middle; }
.foot .p.off .dot { background: #ef6a52; }
.foot .p.off { color: #ef6a52; }
.foot .r { float: right; }

/* Overlays */
.overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(11, 15, 20, 0.94); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; z-index: 10; }
.overlay h1 { font-size: 5rem; }
.overlay .bigqr { width: 40rem; height: 40rem; margin: 0 auto 1.5rem; }
.overlay .bigqr svg { width: 100%; height: 100%; display: block; border-radius: 1rem; }
#conn { position: absolute; right: 2rem; bottom: 2rem; background: #d2462f; color: #ece6da; padding: 0.6rem 1.2rem; border-radius: 0.6rem; font-size: 1.2rem; z-index: 20; }
#sound { position: absolute; right: 3rem; bottom: 1.6rem; z-index: 5; font-size: 1.2rem; padding: 0.5rem 1.2rem; }
.fade { -webkit-animation: fade 0.8s ease; animation: fade 0.8s ease; }
@-webkit-keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade { from { opacity: 0; -webkit-transform: translateY(0.6rem); transform: translateY(0.6rem); } to { opacity: 1; -webkit-transform: none; transform: none; } }
#start #codeBox, #start #resume, #soundStart { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

/* Wer spricht gerade */
#voiceInd { position: absolute; left: 4rem; bottom: 5.6rem; z-index: 6; background: rgba(21, 27, 35, 0.92); border: 0.15rem solid #262e38; border-radius: 99rem; padding: 0.5rem 1.2rem 0.5rem 0.9rem; font-size: 1.25rem; color: #ece6da; }
#voiceInd .bars { display: inline-block; margin-right: 0.7rem; vertical-align: middle; }
#voiceInd .bars i { display: inline-block; width: 0.3rem; height: 1.2rem; margin-right: 0.18rem; background: #d2462f; border-radius: 0.2rem; -webkit-animation: vb 0.9s ease-in-out infinite; animation: vb 0.9s ease-in-out infinite; }
#voiceInd .bars i:nth-child(2) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
#voiceInd .bars i:nth-child(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
@-webkit-keyframes vb { 0%, 100% { -webkit-transform: scaleY(0.35); } 50% { -webkit-transform: scaleY(1); } }
@keyframes vb { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

/* Inszenierte Auflösung */
.reveal-row { opacity: 0; -webkit-animation: fade 0.7s ease forwards; animation: fade 0.7s ease forwards; }
.suspense { opacity: 0; font-family: Gloock, Georgia, serif; font-size: 4.4rem; color: #d2462f; margin-top: 2.4rem; -webkit-animation: fade 1.2s ease forwards; animation: fade 1.2s ease forwards; }

/* Code-Eingabe am Fernseher */
.codebox { width: 40rem; margin: 0 auto 1rem; text-align: left; }
.codebox label { display: block; font-family: 'Bebas Neue', Arial, sans-serif; font-size: 1.8rem; letter-spacing: 0.12em; color: #d2462f; margin-bottom: 0.5rem; }
.codedisp { font: 400 3.2rem Gloock, Georgia, serif; letter-spacing: 0.3em; text-align: center; color: #ece6da; background: #07090c; border: 0.25rem solid #262e38; border-radius: 1rem; padding: 0.5rem 1rem 0.3rem; margin-bottom: 0.8rem; }
.codebox .pad { overflow: hidden; }
.codebox .k { float: left; width: 32%; margin: 0 2% 0.7rem 0; height: 4.1rem; font: 700 2.2rem 'Bricolage Grotesque', Arial, sans-serif; color: #ece6da; background: #151b23; border: 0.3rem solid #262e38; border-radius: 1rem; cursor: pointer; }
.codebox .k:nth-child(3n) { margin-right: 0; }
.codebox .k:focus, .codebox .k:hover, .codebox .k.kf { outline: none; border-color: #d2462f; background: #1d2530; }
.codebox .k.go { background: #ece6da; color: #0b0f14; border-color: #ece6da; font-size: 2rem; }
.codebox .k.go:focus, .codebox .k.go.kf { border-color: #d2462f; }
.codebox .k.del { font-size: 2.2rem; }
.codeerr { color: #ef6a52; font-size: 1.4rem; min-height: 1.8rem; margin-top: 0.2rem; }
.codehelp { color: #9aa3ad; font-size: 1.3rem; margin-top: 0.4rem; }

/* Nach der Auflösung: nächster Fall */
.nextcase { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-top: 2rem; background: #151b23; border: 0.15rem solid #262e38; border-radius: 1.2rem; padding: 1rem 1.4rem; }
.nextcase .nq { width: 8rem; height: 8rem; margin-right: 1.4rem; } .nextcase .nq svg { width: 100%; height: 100%; display: block; border-radius: 0.4rem; }
.nextcase .nt { font-family: Gloock, Georgia, serif; font-size: 2.4rem; } .nextcase .nh { color: #9aa3ad; font-size: 1.2rem; }

/* Startseite: Nebenknöpfe in die Ecken, damit alles auf 16:9 passt */
#soundStart { position: absolute; right: 3rem; bottom: 2rem; margin: 0; font-size: 1.3rem; padding: 0.6rem 1.4rem; }
#resume { position: absolute; right: 3rem; top: 2rem; }
#resume .btn { width: auto !important; margin: 0 !important; font-size: 1.3rem; padding: 0.6rem 1.4rem; }