/* G4L Röhre — unter .g4l-roehre gescoped, damit Theme-Styles nicht kollidieren */
.g4l-roehre{
    --raum:#171310; --holz1:#5a3d26; --holz2:#33220f; --front:#1c1a17;
    --beige:#c9b287; --osd:#46ff7d; --led:#ff3b30; --gelb:#ffe600;
    /* Schriften: sans für alles, was gelesen wird (Tasten, Dialoge,
       Teletext), mono nur dort, wo das Raster zählt (Kanalnummer,
       Zeitcode, Lautstärkebalken). Courier New war stilecht, aber am
       Bildschirm schlecht lesbar. */
    --g4l-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --g4l-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  }
.g4l-roehre *{box-sizing:border-box; margin:0; padding:0;}
.g4l-roehre{height:100%;}
.g4l-roehre{
    background:radial-gradient(120% 90% at 50% 20%, #241d16 0%, var(--raum) 55%, #0d0a08 100%);
    font-family:var(--g4l-ui); color:var(--beige);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px 0; user-select:none; -webkit-user-select:none;
  }
.g4l-roehre .tv{
    width:min(92vw, 780px);
    background:linear-gradient(160deg, var(--holz1), var(--holz2));
    border-radius:18px; padding:26px 26px 18px;
    box-shadow:0 30px 60px rgba(0,0,0,.6), inset 0 2px 3px rgba(255,255,255,.12), inset 0 -6px 14px rgba(0,0,0,.5);
  }
.g4l-roehre .tv-inner{display:flex; gap:20px;}
.g4l-roehre .screen-frame{
    flex:1; background:var(--front); border-radius:14px; padding:16px;
    box-shadow:inset 0 0 0 2px #000, inset 0 4px 18px rgba(0,0,0,.9);
  }
.g4l-roehre .screen-wrap{
    position:relative; aspect-ratio:4/3; border-radius:26px; overflow:hidden;
    background:#050505; box-shadow:inset 0 0 60px rgba(0,0,0,.9);
  }
.g4l-roehre video#tvv{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000;}
.g4l-roehre canvas#fx{position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; display:none;}
.g4l-roehre canvas#fx.show{display:block;}
.g4l-roehre .scanlines{
    position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
    mix-blend-mode:multiply;
  }
.g4l-roehre .glass{
    position:absolute; inset:0; pointer-events:none; border-radius:26px;
    background:
      radial-gradient(120% 100% at 50% 45%, transparent 60%, rgba(0,0,0,.55) 100%),
      linear-gradient(115deg, rgba(255,255,255,.10) 0%, transparent 22%);
  }
.g4l-roehre .osd{position:absolute; pointer-events:none; text-shadow:0 0 6px currentColor, 1px 1px 0 rgba(0,0,0,.8); opacity:0; transition:opacity .25s;}
.g4l-roehre .osd.show{opacity:1;}
.g4l-roehre #osdNr{top:6%; right:7%; color:var(--osd); font-size:clamp(22px,4.5vw,38px); font-weight:bold; letter-spacing:.12em;}
.g4l-roehre #osdLabel{bottom:7%; left:7%; right:7%; color:var(--osd); font-size:clamp(11px,1.9vw,15px); letter-spacing:.08em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.g4l-roehre #osdAd{top:6%; left:7%; color:var(--gelb); font-size:clamp(13px,2.2vw,18px); font-weight:bold; letter-spacing:.2em;}
.g4l-roehre #adBar{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--gelb); width:0%; opacity:0;}
.g4l-roehre #adBar.show{opacity:1;}
.g4l-roehre .side{
    width:150px; display:flex; flex-direction:column; align-items:center; gap:16px;
    background:var(--front); border-radius:14px; padding:16px 10px;
    box-shadow:inset 0 0 0 2px #000, inset 0 4px 14px rgba(0,0,0,.8);
  }
.g4l-roehre .grille{width:100%; flex:1; min-height:60px; border-radius:8px;
    background:repeating-linear-gradient(0deg, #101010 0 3px, #1f1d1a 3px 6px);
    box-shadow:inset 0 2px 6px rgba(0,0,0,.8);}
.g4l-roehre .brand{font-size:11px; letter-spacing:.35em; opacity:.85;}
.g4l-roehre .knob{
    width:92px; height:92px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #4a4642, #14120f 70%);
    box-shadow:0 6px 12px rgba(0,0,0,.7), inset 0 2px 3px rgba(255,255,255,.18), inset 0 -4px 8px rgba(0,0,0,.7);
    position:relative; cursor:grab; touch-action:none;
  }
.g4l-roehre .knob:active{cursor:grabbing;}
.g4l-roehre .knob::after{content:""; position:absolute; left:50%; top:7px; width:6px; height:26px;
    margin-left:-3px; border-radius:3px; background:var(--beige);}
.g4l-roehre .knob-label{font-size:10px; letter-spacing:.3em; opacity:.8; margin-top:6px;}
.g4l-roehre .power{display:flex; align-items:center; gap:10px;}
.g4l-roehre .power button{width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
    background:radial-gradient(circle at 35% 30%, #3c3934, #0e0d0b 75%);
    box-shadow:0 3px 6px rgba(0,0,0,.7), inset 0 1px 2px rgba(255,255,255,.15);}
.g4l-roehre .led{width:8px; height:8px; border-radius:50%; background:var(--led); box-shadow:0 0 8px var(--led);}
.g4l-roehre .led.on{background:#57ff57; box-shadow:0 0 8px #57ff57;}



.g4l-roehre .caption{margin-top:16px; font-size:10px; letter-spacing:.35em; opacity:.55; text-align:center;}
@media (max-width:640px){.g4l-roehre .tv-inner{flex-direction:column;}
.g4l-roehre .side{width:100%; flex-direction:row; justify-content:space-between; padding:12px 16px;}
.g4l-roehre .grille{flex:1; min-height:44px; max-width:34%;}
.g4l-roehre .knob{width:74px; height:74px;}
}

/* ── P3: Kanal-Bingo ── */
.g4l-roehre .bingo-overlay{position:fixed;inset:0;background:rgba(8,6,4,.88);display:flex;align-items:center;justify-content:center;z-index:9999;}
.g4l-roehre .bingo-overlay[hidden]{display:none;}
.g4l-roehre .bingo-card{background:linear-gradient(160deg,#20180f,#120d07);border:1px solid var(--beige);border-radius:12px;padding:22px 26px;max-width:480px;width:92vw;max-height:80vh;overflow:auto;color:var(--beige);}
.g4l-roehre .bingo-tabs{display:flex;gap:8px;align-items:center;margin-bottom:14px;}
.g4l-roehre .bingo-tabs .bingo-spacer{flex:1;}
.g4l-roehre .bingo-tabs button{font-family:inherit;font-size:11px;letter-spacing:.18em;color:var(--beige);background:#14120f;border:1px solid #3a2f1f;border-radius:6px;padding:8px 12px;cursor:pointer;}
.g4l-roehre .bingo-tabs button.aktiv{border-color:var(--beige);}
.g4l-roehre .bingo-liste{list-style:none;margin:0;padding:0;}
.g4l-roehre .bingo-liste li{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13px;letter-spacing:.06em;color:#7c6f57;border-bottom:1px dashed #33291c;}
.g4l-roehre .bingo-liste li.frei{color:var(--osd);}
.g4l-roehre .bingo-liste li .mark{width:14px;}
.g4l-roehre .bingo-liste li .bl{flex:1;}
.g4l-roehre .bingo-liste li .auto{font-size:10px;opacity:.6;letter-spacing:.12em;}
.g4l-roehre .bingo-liste button{font-family:inherit;font-size:10px;letter-spacing:.14em;color:#0a0806;background:var(--beige);border:none;border-radius:5px;padding:6px 10px;cursor:pointer;}
.g4l-roehre .bingo-liste li.frei button{display:none;}
.g4l-roehre .besten-liste{list-style:none;margin:0;padding:0;counter-reset:pl;}
.g4l-roehre .besten-liste li{display:flex;gap:10px;padding:8px 0;font-size:13px;letter-spacing:.06em;border-bottom:1px dashed #33291c;}
.g4l-roehre .besten-liste li::before{counter-increment:pl;content:counter(pl) ".";width:22px;opacity:.6;}
.g4l-roehre .besten-liste li .bn{flex:1;}
.g4l-roehre .g4l-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#0a1e0f;color:var(--osd);border:1px solid var(--osd);padding:10px 18px;border-radius:8px;font-size:13px;letter-spacing:.12em;z-index:10000;box-shadow:0 0 18px rgba(70,255,125,.25);max-width:90vw;text-align:center;font-family:var(--g4l-ui);}
.g4l-roehre .g4l-toast[hidden]{display:none;}

/* \u2500\u2500 0.4.1: Lautst\u00e4rke-OSD \u2500\u2500 */
.g4l-roehre #osdVol{bottom:14%;right:7%;color:var(--osd);font-size:clamp(12px,2vw,16px);letter-spacing:.14em;}

/* ── P5: Teletext ── */
.g4l-roehre #teletext{position:absolute;inset:0;background:rgba(0,0,0,.93);color:#fff;padding:5% 7%;font-family:var(--g4l-ui);font-size:clamp(10px,1.8vw,15px);line-height:1.55;letter-spacing:.04em;overflow:hidden;}
.g4l-roehre #teletext[hidden]{display:none;}
.g4l-roehre #teletext .tt-head{display:flex;justify-content:space-between;gap:8px;color:#ffe600;background:#0018a8;padding:2px 8px;margin-bottom:.8em;font-weight:bold;}
.g4l-roehre #teletext .tt-title{color:#00e5ff;font-weight:bold;margin-bottom:.6em;}
.g4l-roehre #teletext .g{color:#57ff57;}
.g4l-roehre #teletext .y{color:#ffe600;}
.g4l-roehre #teletext .c{color:#00e5ff;}
.g4l-roehre #teletext .r{color:#ff6a5e;}
.g4l-roehre #teletext .tt-foot{position:absolute;bottom:4%;left:7%;right:7%;color:#9aa0ff;font-size:.82em;}

/* ── Fremdsignal ── */
.g4l-roehre #fremdFrame,
.g4l-roehre #ytHost{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:5;}
.g4l-roehre #ytHost iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.g4l-roehre #fremdFrame[hidden],
.g4l-roehre #ytHost[hidden]{display:none;}
.g4l-roehre .screen-wrap.fremd-aktiv .scanlines,
.g4l-roehre .screen-wrap.fremd-aktiv .glass,
.g4l-roehre .screen-wrap.fremd-aktiv .osd{display:none;}
.g4l-roehre .fremd-dialog{position:fixed;inset:0;background:rgba(8,6,4,.9);display:flex;align-items:center;justify-content:center;z-index:10001;}
.g4l-roehre .fremd-dialog[hidden]{display:none;}
.g4l-roehre .fremd-box{background:linear-gradient(160deg,#20180f,#120d07);border:1px solid var(--beige);border-radius:12px;padding:24px 26px;max-width:460px;width:92vw;color:var(--beige);font-family:var(--g4l-ui);}
.g4l-roehre .fremd-box h3{margin:0 0 12px;font-size:15px;letter-spacing:.16em;}
.g4l-roehre .fremd-box p{margin:0 0 10px;font-size:13px;line-height:1.6;}
.g4l-roehre .fremd-box .fremd-klein{font-size:11px;opacity:.7;}
.g4l-roehre .fremd-knoepfe{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}
.g4l-roehre .fremd-knoepfe button{font-family:inherit;font-size:11px;letter-spacing:.16em;color:var(--beige);background:#14120f;border:1px solid #3a2f1f;border-radius:6px;padding:9px 14px;cursor:pointer;}
.g4l-roehre .fremd-knoepfe #fremdJa{background:var(--beige);color:#0a0806;border-color:var(--beige);}

/* ── Einreichen-Verweis unter der Community-Röhre ── */
.g4l-roehre.g4l-einlink{text-align:center;margin-top:18px;padding:0;}
.g4l-roehre .g4l-einlink-btn{
	display:inline-block;font-family:var(--g4l-ui);
	font-size:12px;letter-spacing:.18em;text-decoration:none;
	color:var(--beige);background:linear-gradient(180deg,#2a2723,#14120f);
	border:1px solid #000;border-radius:6px;padding:11px 20px;
	box-shadow:0 3px 0 #000, inset 0 1px 1px rgba(255,255,255,.12);
}
.g4l-roehre .g4l-einlink-btn:hover{color:#fff;}

/* ── Schrift-Feinschliff: Raster nur, wo es zählt ── */
.g4l-roehre #osdNr,
.g4l-roehre #osdVol,
.g4l-roehre #osdLabel{font-family:var(--g4l-mono);}
.g4l-roehre #teletext{font-family:var(--g4l-mono);letter-spacing:0;}
.g4l-roehre .brand,
.g4l-roehre .knob-label,
.g4l-roehre .controls button,
.g4l-roehre .caption{font-family:var(--g4l-ui);}
/* Sperrung etwas zurücknehmen — Inter braucht weniger davon als Courier */

.g4l-roehre .caption{letter-spacing:.18em;}
.g4l-roehre #osdLabel{letter-spacing:.03em;}
.g4l-roehre .bingo-liste li,
.g4l-roehre .besten-liste li{letter-spacing:.01em;}
.g4l-roehre .fremd-box p{letter-spacing:0;}

/* ── Bildformat: 4:3 Crop (Werk), 16:9 Breitbild, Ganzes Bild ── */
.g4l-roehre .screen-wrap.bild-169{aspect-ratio:16/9;border-radius:18px;}
.g4l-roehre .screen-wrap.bild-ganz video,
.g4l-roehre .screen-wrap.bild-ganz canvas#fx{object-fit:contain;background:#000;}
.g4l-roehre .screen-wrap.bild-169 .glass,
.g4l-roehre .screen-wrap.bild-ganz .glass{border-radius:18px;}

/* ── Bitmovin-Container: liegt wie das <video> im Bildschirm ── */
.g4l-roehre #bmPlayer{position:absolute;inset:0;width:100%;height:100%;background:#000;}
.g4l-roehre #bmPlayer[hidden]{display:none;}
.g4l-roehre .screen-wrap.bild-ganz #bmPlayer video{object-fit:contain;}
.g4l-roehre #bmPlayer video{width:100%;height:100%;object-fit:cover;}

/* ══ Vollbild: Standalone-Seite bekommt durchgehenden Hintergrund ══
   Das Pseudo-Element liegt fix hinter allem — dadurch füllt der dunkle
   Raum den ganzen Bildschirm, auch wenn das Theme darunter hell ist. */
.g4l-roehre--vollbild{min-height:100vh;justify-content:center;padding:32px 12px;}
.g4l-roehre--vollbild::before{
	content:"";position:fixed;inset:0;z-index:-1;
	background:radial-gradient(120% 90% at 50% 20%, #241d16 0%, var(--raum) 55%, #0d0a08 100%);
}

/* ══ Bedienfeld ══ */
.g4l-roehre .controls{
	display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
	gap:8px;margin-top:16px;
	padding:9px 12px;border-radius:11px;
	background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.14));
	box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 6px rgba(0,0,0,.5);
}
.g4l-roehre .k-gruppe{display:flex;align-items:center;gap:5px;flex:0 0 auto;}
.g4l-roehre .k-gruppe + .k-gruppe{
	padding-left:8px;border-left:1px solid rgba(255,255,255,.08);
}
/* Gruppennamen bleiben für Screenreader erhalten, nehmen aber keinen Platz */
.g4l-roehre .k-label{
	position:absolute;width:1px;height:1px;overflow:hidden;
	clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.g4l-roehre .k-reihe{display:flex;gap:6px;}
.g4l-roehre .k-taste{
	display:inline-flex;align-items:center;gap:7px;
	font-family:var(--g4l-ui);font-size:12.5px;font-weight:500;letter-spacing:.02em;
	color:var(--beige);
	background:linear-gradient(180deg,#37332d 0%,#211e19 55%,#161311 100%);
	border:1px solid #0a0908;border-radius:7px;
	padding:7px 11px;min-height:32px;cursor:pointer;white-space:nowrap;
	box-shadow:0 2px 0 #0a0908, 0 3px 5px rgba(0,0,0,.45),
	           inset 0 1px 0 rgba(255,255,255,.14);
	transition:filter .12s ease, transform .05s ease, box-shadow .05s ease;
}
.g4l-roehre .k-taste:hover{filter:brightness(1.22);}
.g4l-roehre .k-taste:active{
	transform:translateY(2px);
	box-shadow:0 0 0 #0a0908, inset 0 2px 5px rgba(0,0,0,.6);
}
.g4l-roehre .k-taste:focus-visible{outline:2px solid var(--osd);outline-offset:2px;}
.g4l-roehre .k-rund{
	width:34px;min-width:34px;justify-content:center;padding:7px 0;
	font-size:12px;border-radius:8px;
}
/* Zustandsanzeige auf der Taste — wie ein kleines Schildchen */
.g4l-roehre .k-wert{
	font-size:9.5px;font-weight:600;letter-spacing:.05em;
	color:var(--osd);background:rgba(70,255,125,.10);
	border:1px solid rgba(70,255,125,.35);border-radius:4px;
	padding:2px 6px;text-transform:uppercase;
}
.g4l-roehre .k-wert.aus{
	color:#8d8375;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
}
/* Schmale Schirme: umbrechen statt schieben. Seitliches Schieben war
   auf dem Telefon nicht erkennbar — Tasten, die man nicht sieht, gibt es
   für den Benutzer nicht. */
@media (max-width:720px){
	.g4l-roehre .controls{gap:6px 8px;padding:9px 8px;}
	.g4l-roehre .k-gruppe{flex:0 0 auto;}
	.g4l-roehre .k-gruppe + .k-gruppe{padding-left:8px;}
	/* Beim Umbruch keine Trennlinie am Zeilenanfang */
	.g4l-roehre .k-taste{font-size:11.5px;padding:7px 9px;gap:5px;}
	.g4l-roehre .k-rund{width:34px;min-width:34px;}
}
@media (max-width:420px){
	.g4l-roehre .k-taste{font-size:11px;padding:7px 8px;gap:4px;}
	.g4l-roehre .k-wert{font-size:9px;padding:2px 5px;}
	.g4l-roehre .k-gruppe + .k-gruppe{padding-left:6px;border-left-color:rgba(255,255,255,.06);}
}

/* ══ Standby: das Gerät lädt zum Einschalten ein ══ */
.g4l-roehre.standby .screen-wrap{cursor:pointer;}
/* Betriebsleuchte pulst im Standby wie eine echte Bereitschaftsanzeige */
.g4l-roehre.standby .led{animation:g4lStandbyLed 2.4s ease-in-out infinite;}
@keyframes g4lStandbyLed{
	0%,100%{opacity:.35;box-shadow:0 0 4px var(--led);}
	50%    {opacity:1;   box-shadow:0 0 10px var(--led);}
}
/* Ein weicher Ring am Netzschalter zeigt, wo man drücken kann */
.g4l-roehre.standby .power button{position:relative;}
.g4l-roehre.standby .power button::after{
	content:"";position:absolute;inset:-6px;border-radius:50%;
	border:1px solid rgba(70,255,125,.5);
	animation:g4lStandbyRing 2.4s ease-out infinite;pointer-events:none;
}
@keyframes g4lStandbyRing{
	0%  {transform:scale(.85);opacity:0;}
	35% {opacity:.85;}
	100%{transform:scale(1.5);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
	.g4l-roehre.standby .led{animation:none;opacity:.85;}
	.g4l-roehre.standby .power button::after{animation:none;opacity:.5;}
}

/* Teletext-Verweis auf den laufenden Beitrag */
.g4l-roehre #teletext .tt-link{
	color:#57ff57;text-decoration:underline;text-underline-offset:3px;
}
.g4l-roehre #teletext .tt-link:hover{color:#fff;}
.g4l-roehre .k-taste[hidden]{display:none;}

/* ── Jahr raten: kleine Einblendung unten links, ueber dem Bild ── */
.g4l-roehre #jahrBox{
	position:absolute;left:6%;bottom:16%;right:6%;
	display:flex;flex-wrap:wrap;gap:6px;align-items:center;
	font-family:var(--g4l-ui);
}
.g4l-roehre #jahrBox[hidden]{display:none;}
.g4l-roehre #jahrBox .jahr-frage{
	font-size:clamp(10px,1.7vw,13px);letter-spacing:.06em;color:var(--osd);
	text-shadow:0 0 6px currentColor, 1px 1px 0 rgba(0,0,0,.8);margin-right:4px;
}
.g4l-roehre #jahrBox .jahr-frage.gut{color:#57ff57;}
.g4l-roehre #jahrBox .jahr-frage.schlecht{color:#ff8a7e;}
.g4l-roehre #jahrBox button{
	font-family:inherit;font-size:clamp(10px,1.6vw,12px);font-weight:600;
	color:var(--beige);background:rgba(10,8,6,.72);
	border:1px solid rgba(201,178,135,.55);border-radius:6px;
	padding:5px 9px;cursor:pointer;backdrop-filter:blur(2px);
}
.g4l-roehre #jahrBox button:hover{background:rgba(201,178,135,.9);color:#0a0806;}
/* Ueber einem fremden Player liegt nichts — auch nicht das Quiz. */
.g4l-roehre .screen-wrap.fremd-aktiv #jahrBox{display:none;}

/* ── Teletext: leichter zu schließen ── */
.g4l-roehre #teletext .tt-head{align-items:center;}
.g4l-roehre #ttClose{
	font-family:var(--g4l-ui);font-size:13px;line-height:1;font-weight:700;
	color:#0018a8;background:#ffe600;border:none;border-radius:4px;
	padding:4px 9px;margin-left:8px;cursor:pointer;
}
.g4l-roehre #ttClose:hover{background:#fff;}
.g4l-roehre #teletext .tt-foot{cursor:pointer;}

/* ══ Gehäusevarianten ══ */
.g4l-roehre.haus-bakelit .tv{
	background:linear-gradient(160deg,#3a2f28,#17120f);
}
.g4l-roehre.haus-bakelit{--beige:#d8c9ae;}
.g4l-roehre.haus-weiss .tv{
	background:linear-gradient(160deg,#efe9df,#cfc7ba);
}
.g4l-roehre.haus-weiss{--beige:#4a4238; --front:#e6dfd3;}
.g4l-roehre.haus-weiss .screen-frame,
.g4l-roehre.haus-weiss .side{background:#ddd5c8;box-shadow:inset 0 0 0 2px #b9b0a2, inset 0 4px 14px rgba(0,0,0,.18);}
.g4l-roehre.haus-weiss .k-taste{
	background:linear-gradient(180deg,#f6f2ea,#d9d2c6);color:#3a342c;border-color:#b3aa9c;
	box-shadow:0 2px 0 #b3aa9c, 0 3px 5px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8);
}
.g4l-roehre.haus-weiss .controls{background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.04));}
.g4l-roehre.haus-weiss .grille{background:repeating-linear-gradient(0deg,#c6bdae 0 3px,#ddd5c8 3px 6px);}
.g4l-roehre.haus-stahl .tv{
	background:linear-gradient(160deg,#8b9096 0%,#4a4f55 45%,#2b2f33 100%);
}
.g4l-roehre.haus-stahl{--beige:#e8edf2;}
.g4l-roehre.haus-stahl .knob{background:radial-gradient(circle at 32% 28%,#c9d1d8,#3a3f45 72%);}

/* ══ Baujahr: Anmutung der Bildröhre ══ */
.g4l-roehre.bau-1965 .screen-wrap video,
.g4l-roehre.bau-1965 .screen-wrap #bmPlayer video{filter:grayscale(1) contrast(1.12) brightness(.94);}
.g4l-roehre.bau-1965 .scanlines{
	background:repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
}
.g4l-roehre.bau-1985 .screen-wrap video,
.g4l-roehre.bau-1985 .screen-wrap #bmPlayer video{filter:saturate(1.12) contrast(1.04);}
.g4l-roehre.bau-2005 .scanlines{
	background:repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 4px);
}
.g4l-roehre.bau-2005 .screen-wrap{border-radius:12px;}
.g4l-roehre.bau-2005 .glass{background:linear-gradient(115deg, rgba(255,255,255,.06) 0%, transparent 26%);}

/* ── Sammelalbum im Overlay ── */
.g4l-roehre .album-kopf{font-size:12px;letter-spacing:.04em;color:var(--osd);margin-bottom:10px;}
.g4l-roehre .album-liste{list-style:none;margin:0;padding:0;}
.g4l-roehre .album-liste li{
	display:flex;gap:10px;align-items:baseline;padding:8px 0;
	border-bottom:1px dashed #33291c;font-size:13px;
}
.g4l-roehre .album-liste .jahr{
	font-family:var(--g4l-mono);color:var(--osd);min-width:44px;font-size:12px;
}
.g4l-roehre .album-liste .titel{flex:1;color:var(--beige);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.g4l-roehre .album-liste .zeit{font-size:11px;color:#8d8375;white-space:nowrap;}

/* ── Teletext: Seitenwahl zum Antippen (mobil unverzichtbar) ── */
.g4l-roehre #teletext{padding-bottom:16%;}
.g4l-roehre .tt-seiten{
	position:absolute;left:4%;right:4%;bottom:11%;
	display:flex;flex-wrap:wrap;gap:4px;justify-content:center;
}
.g4l-roehre .tt-seiten button{
	font-family:var(--g4l-ui);font-size:10px;line-height:1.15;font-weight:600;
	color:#ffe600;background:rgba(0,24,168,.85);border:1px solid rgba(255,230,0,.45);
	border-radius:4px;padding:4px 7px;cursor:pointer;display:flex;flex-direction:column;
	align-items:center;min-width:42px;
}
.g4l-roehre .tt-seiten button span{font-size:8.5px;font-weight:400;opacity:.85;}
.g4l-roehre .tt-seiten button.aktiv{background:#ffe600;color:#0018a8;border-color:#ffe600;}
.g4l-roehre .tt-seiten button:hover{background:#fff;color:#0018a8;}
@media (max-width:520px){
	.g4l-roehre .tt-seiten button{min-width:38px;padding:3px 5px;font-size:9.5px;}
	.g4l-roehre .tt-seiten button span{display:none;}
}

/* Gesperrte Programme im Album */
.g4l-roehre .album-sperren{margin-top:16px;border-top:1px dashed #33291c;padding-top:12px;}
.g4l-roehre .album-frei{
	font-family:var(--g4l-ui);font-size:10px;letter-spacing:.1em;
	color:#0a0806;background:var(--beige);border:none;border-radius:5px;
	padding:5px 9px;cursor:pointer;white-space:nowrap;
}

/* Weicher Übergang vom Rauschen ins Bild */
.g4l-roehre canvas#fx{transition:opacity .17s ease-out;}
.g4l-roehre canvas#fx.verblassen{opacity:0;}
@media (prefers-reduced-motion: reduce){
	.g4l-roehre canvas#fx{transition:none;}
}

/* Beim Umbruch bleiben die Gruppen zusammen; die Trennlinie stoert am
   Zeilenanfang, deshalb bekommt sie etwas Luft statt einer harten Kante. */
.g4l-roehre .k-gruppe{white-space:nowrap;}
.g4l-roehre .controls{row-gap:8px;}

/* Gefällt mir */
.g4l-roehre .k-taste.mag .k-wert{color:#ff8fa3;background:rgba(255,143,163,.12);border-color:rgba(255,143,163,.5);}
.g4l-roehre .album-favoriten{margin-top:16px;border-top:1px dashed #33291c;padding-top:12px;}
.g4l-roehre .album-favoriten .jahr{color:#ff8fa3;}

/* ══ Kinomodus: nur das Bild, sonst nichts ══ */
body.g4l-kino-aktiv{overflow:hidden;}
.g4l-roehre.kino{padding:0;min-height:100vh;justify-content:center;}
.g4l-roehre.kino .tv{
	width:100vw;max-width:none;background:#000;border-radius:0;padding:0;box-shadow:none;
}
.g4l-roehre.kino .tv-inner{gap:0;}
.g4l-roehre.kino .side,
.g4l-roehre.kino .controls,
.g4l-roehre.kino .caption,
.g4l-roehre.kino .g4l-einlink{display:none;}
.g4l-roehre.kino .screen-frame{padding:0;background:#000;border-radius:0;box-shadow:none;}
.g4l-roehre.kino .screen-wrap{
	width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;cursor:none;
}
.g4l-roehre.kino .glass{border-radius:0;}
/* Im Kinomodus bleibt das Zeilenraster — das ist der halbe Reiz. */
.g4l-roehre.kino #osdNr{font-size:clamp(26px,3vw,44px);}

/* Fremdsignal startet stumm — kurzer Hinweis, bis der Ton durchkommt */
.g4l-roehre #osdLabel.ton-stumm::after{
	content:" · TON: BILDSCHIRM ANTIPPEN";
	color:#ffd45e;
	font-size:.85em;
	letter-spacing:.08em;
}

/* Reserve-Leiste: nur fuer den Besitzer am Zuspieler, nie fuer Zuseher */
#reserveLeiste{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:10px;
	padding:8px 14px;background:rgba(10,8,6,.92);color:#f4ead9;font:13px/1.4 system-ui,sans-serif;
	border-bottom:1px solid rgba(240,165,60,.35);backdrop-filter:blur(6px);transition:transform .3s}
#reserveLeiste .rl-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#reserveLeiste button{padding:4px 10px;border:1px solid rgba(244,234,217,.25);border-radius:6px;
	background:transparent;color:#f4ead9;font:inherit;cursor:pointer}
#reserveLeiste button:hover{background:rgba(244,234,217,.12)}
#reserveLeiste .rl-zu{border-color:transparent;font-size:16px;line-height:1;padding:2px 8px}
#reserveLeiste.rl-schmal{transform:translateY(-100%)}
#reserveLeiste.rl-schmal:hover,#reserveLeiste.rl-schmal:focus-within{transform:none}

/* ══ Touch-Bedienung (Geräte-Einstellung) ══
   Große Flächen für Bildschirme ohne Tastatur und Maus. Bewusst
   zurückhaltend: Nach ein paar Sekunden Ruhe verblassen sie fast
   vollständig — es soll ein Fernseher bleiben, keine App. */
#g4lTouch{position:fixed;inset:auto 0 0 0;z-index:55;display:flex;justify-content:space-between;
	align-items:flex-end;gap:12px;padding:18px clamp(14px,4vw,42px) clamp(18px,4vh,40px);
	pointer-events:none;transition:opacity .5s}
#g4lTouch.tu-leise{opacity:.12}
#g4lTouch button{pointer-events:auto;width:clamp(64px,11vw,96px);height:clamp(64px,11vw,96px);
	border-radius:50%;border:1px solid rgba(244,234,217,.3);background:rgba(10,8,6,.55);
	color:#f4ead9;font-size:clamp(28px,4vw,40px);line-height:1;cursor:pointer;
	backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
	display:flex;align-items:center;justify-content:center;touch-action:manipulation}
#g4lTouch button:active{background:rgba(240,165,60,.35);border-color:rgba(240,165,60,.7)}
#g4lTouch .tu-ton{font-size:clamp(20px,2.6vw,28px);align-self:center}
/* Drehknopf für Finger — größer als die Tasten, mit Kerbe und
   Rändelrand, damit sofort klar ist: Das dreht man. */
#g4lTouch .tu-knopf{pointer-events:auto;position:relative;flex:none;touch-action:none;cursor:grab;
	width:clamp(96px,17vw,160px);height:clamp(96px,17vw,160px);border-radius:50%;
	background:radial-gradient(circle at 33% 28%,#6b5a44,#241a10 74%);
	border:1px solid rgba(244,234,217,.22);
	box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.16);
	display:flex;align-items:flex-end;justify-content:center;padding-bottom:14%}
#g4lTouch .tu-knopf:active{cursor:grabbing}
#g4lTouch .tu-knopf::after{content:"";position:absolute;inset:8%;border-radius:50%;
	background:repeating-conic-gradient(rgba(0,0,0,.28) 0 3deg, transparent 3deg 9deg);
	-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);
	mask:radial-gradient(circle,transparent 62%,#000 63%)}
#g4lTouch .tu-kerbe{position:absolute;left:50%;top:9%;width:5px;height:22%;margin-left:-2.5px;
	border-radius:3px;background:var(--amber,#f0a53c);box-shadow:0 0 10px rgba(240,165,60,.8)}
#g4lTouch .tu-schrift{position:relative;font:10px/1 system-ui,sans-serif;letter-spacing:.3em;
	color:rgba(244,234,217,.75);pointer-events:none}
#g4lTouch .tu-knopf:focus-visible{outline:2px solid var(--amber,#f0a53c);outline-offset:4px}
@media (prefers-reduced-motion:reduce){ #g4lTouch{transition:none} }