/* Festspielquiz LIVE · Handy-Oberfläche (gilt nur innerhalb von .bgfql, damit nichts auf der Website verändert wird) */
.bgfql{--gold:#f4b22a;--gold2:#ffc94d;--creme:#f6f1e1;--hell:#e7e1cf;--grau:#a9a28f;--rot:#e0564f;--ok:#62c98a;
  position:relative;width:100%;max-width:520px;margin:0 auto;color:var(--creme);font-family:Lato,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}
.bgfql *,.bgfql *::before,.bgfql *::after{box-sizing:border-box}
.bgfql [hidden]{display:none!important}
.bgfql button{font-family:inherit}
.bgfql-inhalt{display:flex;flex-direction:column;justify-content:center;min-height:100%;padding:6px 0 10px}
.bgfql h1,.bgfql h2{text-transform:none!important;letter-spacing:0!important;font-family:Lato,"Segoe UI",Arial,sans-serif!important}
.bgfql h1::before,.bgfql h1::after,.bgfql h2::before,.bgfql h2::after{content:none!important;display:none!important}
.bgfql h1{margin:0 0 8px!important;padding:0!important;font-size:32px!important;font-weight:900!important;line-height:1.1!important;color:#fff!important;text-align:inherit}
.bgfql p{margin:0}
.bgfql .txt{margin:0 0 20px;font-size:16.5px;line-height:1.5;color:var(--hell)}
.bgfql .dach{margin:0 0 6px;font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.bgfql form{display:flex;flex-direction:column;gap:12px;margin:0}
.bgfql label,.bgfql .lbl{display:block;margin:0;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.bgfql input[type=text],.bgfql input[inputmode]{display:block;width:100%;height:auto;margin:0;padding:14px 16px;border:1px solid rgba(246,241,225,.3);border-radius:12px;background:rgba(0,0,0,.25);color:#fff;font:700 20px Lato,Arial,sans-serif;box-shadow:none}
.bgfql select{display:block;width:100%;height:auto;margin:0;padding:13px 14px;border:1px solid rgba(246,241,225,.3);border-radius:12px;background:rgba(0,0,0,.25);color:#fff;font:700 17px Lato,Arial,sans-serif}
.bgfql select option{color:#000}
.bgfql .code-feld{font-size:34px!important;letter-spacing:.3em;text-align:center}
.bgfql .fehler{min-height:22px;margin:0;color:#ff8a80;font-weight:700;line-height:1.4}
.bgfql .klein{font-size:13px;line-height:1.45;color:var(--grau)}
.bgfql .mitte{text-align:center}
.bgfql .gross{font-size:72px;font-weight:900;line-height:1;color:var(--gold)}
.bgfql .knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:14px 26px;border:0;border-radius:999px;background:var(--gold);color:#2a2000;font-size:18px;font-weight:900;line-height:1.2;text-decoration:none!important;cursor:pointer;transition:background-color .2s,transform .2s}
.bgfql .knopf:hover{background:var(--gold2);color:#2a2000}
.bgfql .knopf:disabled{opacity:.4;cursor:default}
.bgfql .knopf.leise{background:none;border:1px solid rgba(246,241,225,.3);color:var(--creme)}
.bgfql .knopf.leise:hover{background:rgba(246,241,225,.08)}
.bgfql .knopf.breit{width:100%}
.bgfql .knopf.klein-k{padding:8px 16px;font-size:15px}
.bgfql .knopf:focus-visible,.bgfql input:focus-visible,.bgfql select:focus-visible,.bgfql .ant:focus-visible,.bgfql .tabs button:focus-visible,.bgfql .seg button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.bgfql .tabs{display:flex;gap:6px;margin-bottom:18px;padding:5px;border-radius:999px;background:rgba(246,241,225,.08)}
.bgfql .tabs button{flex:1;margin:0;padding:11px 8px;border:0;border-radius:999px;background:none;color:var(--hell);font-size:15px;font-weight:900;cursor:pointer}
.bgfql .tabs button[aria-selected=true]{background:var(--gold);color:#2a2000}
.bgfql .seg{display:flex;gap:6px}
.bgfql .seg button{flex:1;margin:0;padding:11px 4px;border:1px solid rgba(246,241,225,.25);border-radius:12px;background:none;color:var(--creme);font-size:16px;font-weight:900;cursor:pointer}
.bgfql .seg button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#2a2000}
.bgfql .lobbycode{margin:4px 0 2px;font-size:64px;font-weight:900;letter-spacing:.1em;color:var(--gold);text-align:center;line-height:1}
.bgfql .teilen{display:flex;gap:8px;justify-content:center;margin:14px 0 18px}
.bgfql .qr{display:block;width:150px;height:150px;margin:0 auto 6px;padding:8px;border-radius:12px;background:#fff}
.bgfql .namen{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}
.bgfql .namen span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.07);font-size:15px;font-weight:700}
.bgfql .namen span.b{background:rgba(244,178,42,.18)}
.bgfql .namen span.weg{opacity:.45}
.bgfql .namen button{margin:0;border:0;background:none;color:var(--grau);font-size:16px;cursor:pointer;padding:0 0 0 2px}
.bgfql .einst{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:rgba(246,241,225,.06);font-size:14.5px;color:var(--hell)}
.bgfql .einst b{color:#fff}
.bgfql .frage-kopf{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}
.bgfql .frage-kopf .q{padding:3px 8px;border-radius:5px;background:rgba(244,178,42,.16);color:var(--gold)}
.bgfql .zeit{height:6px;margin-bottom:14px;border-radius:3px;background:rgba(246,241,225,.12);overflow:hidden}
.bgfql .zeit i{display:block;height:100%;width:100%;background:var(--gold);transform-origin:left;transition:background-color .3s}
.bgfql .zeit.knapp i{background:var(--rot)}
.bgfql .fbild{display:block;width:100%;max-height:26vh;object-fit:cover;border-radius:14px;margin:0 0 12px;background:#2b382e}
.bgfql .fbild.hoch{width:auto;max-width:60%;margin-left:auto;margin-right:auto;aspect-ratio:9/10}
.bgfql .ftext{margin:0 0 6px;font-size:20px;font-weight:900;line-height:1.3;color:#fff}
.bgfql .ftext small{display:block;margin-bottom:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.bgfql .fhinweis{margin:0 0 12px;font-size:14px;color:var(--grau)}
.bgfql .knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.bgfql .ant{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;min-height:112px;margin:0;padding:13px;border:0;border-radius:16px;background:var(--fa);color:#fff;font-size:16.5px;font-weight:900;line-height:1.25;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s,opacity .3s}
.bgfql .ant:active{transform:scale(.96)}
.bgfql .ant .s{width:26px;height:26px}
.bgfql .ant .s svg{width:100%;height:100%;fill:#fff}
.bgfql .ant[data-i="0"]{--fa:#c98a0b}.bgfql .ant[data-i="1"]{--fa:#2f8a55}.bgfql .ant[data-i="2"]{--fa:#b9403c}.bgfql .ant[data-i="3"]{--fa:#2f6fb5}
.bgfql .knoepfe.zwei .ant{min-height:140px;font-size:21px}
.bgfql .gewaehlt .ant{opacity:.3}
.bgfql .gewaehlt .ant.mein{opacity:1;box-shadow:0 0 0 4px #fff}
.bgfql .sch{margin-top:10px;padding:16px;border-radius:16px;background:rgba(255,255,255,.06);text-align:center}
.bgfql .sch output{display:block;font-size:60px;font-weight:900;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.bgfql .sch .reihe{display:flex;align-items:center;gap:10px;margin:14px 0 6px}
.bgfql .sch .pm{flex:none;width:52px;height:52px;margin:0;padding:0;border:1px solid rgba(246,241,225,.3);border-radius:50%;background:none;color:#fff;font-size:28px;font-weight:900;cursor:pointer}
.bgfql .sch input{flex:1;accent-color:var(--gold);height:34px;margin:0}
.bgfql .sch .skala{display:flex;justify-content:space-between;margin:0 62px 14px;font-size:13px;color:var(--grau)}
.bgfql .erg{border-radius:22px;padding:26px 20px;text-align:center;animation:bgfqlPop .45s ease both}
.bgfql .erg.ok{background:#2c6e45}
.bgfql .erg.nein{background:#7d2a33}
.bgfql .erg.leer{background:rgba(246,241,225,.08)}
.bgfql .erg h2{margin:0 0 6px!important;padding:0!important;font-size:34px!important;font-weight:900!important;line-height:1.15!important;color:#fff!important;text-align:center!important}
.bgfql .erg .pk{font-size:24px;font-weight:900;color:#fff}
.bgfql .erg p{margin:10px 0 0;font-size:16px;color:#f0eada}
.bgfql .erkl{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:13px 14px;border-radius:14px;background:rgba(246,241,225,.07);border-left:4px solid var(--gold);font-size:15px;line-height:1.5;color:var(--hell)}
.bgfql .erkl img{flex:none;width:64px;height:64px;border-radius:10px;object-fit:cover}
.bgfql .platz{margin-top:16px;text-align:center;font-size:17px;color:var(--hell)}
.bgfql .platz b{font-size:38px;color:var(--gold);display:block;line-height:1.1}
.bgfql .serie{display:inline-block;margin-top:10px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.25);font-size:15px;font-weight:900}
.bgfql .top{margin:14px 0 0;padding:0;list-style:none}
.bgfql .top.links{text-align:left;margin-bottom:18px}
.bgfql .top li{display:flex;gap:10px;margin:0;padding:8px 12px;border-radius:10px;font-size:15.5px;font-weight:700;list-style:none}
.bgfql .top li::before{content:none!important}
.bgfql .top li:nth-child(odd){background:rgba(246,241,225,.05)}
.bgfql .top li b{margin-left:auto;color:var(--gold);font-variant-numeric:tabular-nums}
.bgfql .top li.ich{color:var(--gold)}
.bgfql .weiterzeile{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;font-size:14px;color:var(--grau)}
.bgfql .lade{display:inline-block;width:40px;height:40px;border:4px solid rgba(244,178,42,.25);border-top-color:var(--gold);border-radius:50%;animation:bgfqlDreh 1s linear infinite}
.bgfql .rein{animation:bgfqlRein .5s cubic-bezier(.2,.7,.2,1) both}
.bgfql-verbindung{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:2147483600;padding:8px 16px;border-radius:999px;background:#e0564f;color:#fff;font:900 14px Lato,Arial,sans-serif}
.bgfql-ich{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:900;color:#e7e1cf}
.bgfql-ich b{color:#f4b22a;font-variant-numeric:tabular-nums}
@keyframes bgfqlRein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes bgfqlPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes bgfqlDreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bgfql *{animation:none!important;transition:none!important}}
.bgfql .tv-zeile{margin-top:18px;text-align:center}
.bgfql .tv-auf{margin:0;padding:6px 4px;border:0;background:none;color:var(--gold);font-size:15px;font-weight:900;text-decoration:underline;cursor:pointer}
.bgfql .tv-form{display:flex;gap:8px;justify-content:center;margin-top:10px}
.bgfql .tv-form .klein-feld{width:150px;padding:10px 12px;font-size:24px!important}
.bgfql .tv-hinweis{margin-top:14px}
.bgfql .tv-hinweis .knopf{margin-top:8px}
.bgfql #bgfql-weiterbox{margin-top:16px}
.bgfql .weiter-gross{padding:18px 26px;font-size:20px;box-shadow:0 10px 26px rgba(244,178,42,.3)}
.bgfql :focus:not(:focus-visible){outline:none!important}
.bgfql button{-webkit-tap-highlight-color:transparent}