/* Selbst gehostete Schriften (SIL Open Font License) statt Google Fonts — so geht beim
   Seitenaufruf keine IP-Adresse an Google. Nur die Zeichensätze latin und latin-ext.
   Manrope und Space Grotesk sind variable Schriften: eine Datei für alle Stärken. */
@font-face{ font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/anton-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/anton-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  --bg-1:#1B1035; --bg-2:#0F0821;
  --panel:#2A1B52; --panel-line:#4A3580;
  --magenta:#FF3E8E; --gold:#FFC857; --cyan:#4CD9E0; --violet:#9B6BFF;
  --text:#F5F2FF; --text-dim:#B9ABDD;
  --success:#33D17A; --danger:#FF5C5C;
}
*{box-sizing:border-box;}
/* Without this, an element hidden via the `hidden` attribute stays visible
   whenever an author rule also sets its `display` (e.g. `.timer-options{
   display:flex }`) — the UA stylesheet's own `[hidden]{display:none}` loses
   to any same-origin author rule regardless of specificity. */
[hidden]{ display:none !important; }
html,body{height:100%;}
body{
  margin:0;
  font-family:'Manrope',sans-serif;
  color:var(--text);
  min-height:100vh;
  background:
    radial-gradient(ellipse 800px 500px at 50% -10%, rgba(255,62,142,0.25), transparent 60%),
    radial-gradient(ellipse 600px 400px at 85% 10%, rgba(76,217,224,0.15), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment:fixed;
  display:flex; flex-direction:column; align-items:center;
  padding:2.5rem 1.25rem 5rem;
}

.marquee-title{
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:clamp(1.6rem,5vw,2.2rem); letter-spacing:0.03em;
  color:var(--gold); text-align:center; text-transform:uppercase;
  margin:0 0 1.75rem; text-shadow:0 0 24px rgba(255,200,87,0.25);
}

#app, .stage{ width:100%; max-width:560px; }

a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--magenta); text-decoration:underline; }
a:focus-visible{ outline:2px solid var(--magenta); outline-offset:2px; border-radius:4px; }

.top-link{ display:block; text-align:center; font-weight:700; margin:-0.75rem 0 1.5rem; }

label{
  display:block;
  font-family:'Anton',sans-serif; font-weight:400; font-size:0.78rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim);
  margin:1.1rem 0 0.4rem;
}
/* Scoped to a direct form child so a label nested one level down inside a
   wrapper div (e.g. #topic-field-group) isn't *also* treated as "the first
   label" and wrongly loses its top margin. */
form > label:first-of-type{ margin-top:0; }

input[type=text], input[type=password], input[type=email]{
  display:block; width:100%;
  background:rgba(255,255,255,0.04); color:var(--text);
  border:1px solid var(--panel-line); border-radius:12px;
  padding:0.75rem 0.9rem;
  font-family:'Manrope',sans-serif; font-size:1rem;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=text]:focus-visible{
  outline:none; border-color:var(--magenta); box-shadow:0 0 0 3px rgba(255,62,142,0.2);
}

/* Segmented button group — replaces a native <select> for small, fixed
   option sets. A native dropdown's open option list renders as a
   browser-native overlay that ignores page CSS/margins entirely, so with
   several selects stacked in one form the open list could be visually
   indistinguishable from the very next (closed) select sitting right below
   it. A button-per-option toggle has no such popup, so the problem can't
   occur at all. Built from real radio inputs (visually hidden) so ordinary
   form submission, keyboard nav and `required` validation keep working. */
.segmented{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.5rem; }
.segmented input[type=radio]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.segmented label{
  flex:1 1 auto; margin:0; padding:0.75rem 0.9rem;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:normal;
  text-transform:none; font-size:0.95rem; color:var(--text-dim);
  background:rgba(255,255,255,0.04); border:1px solid var(--panel-line); border-radius:12px;
  cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.segmented input[type=radio]:checked + label{
  background:linear-gradient(180deg, var(--magenta), #D42C72);
  border-color:var(--magenta); color:#fff;
}
.segmented input[type=radio]:focus-visible + label{
  outline:2px solid var(--magenta); outline-offset:2px;
}

form{ background:var(--panel); border:1px solid var(--panel-line); border-radius:20px; padding:1.75rem 1.5rem; margin-bottom:1.5rem; box-shadow:0 20px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); }

form > button{
  font-family:'Anton',sans-serif; font-weight:400; letter-spacing:0.04em;
  font-size:1rem; text-transform:uppercase;
  background:linear-gradient(180deg, var(--magenta), #D42C72);
  color:#fff; border:none; border-radius:999px;
  padding:0.85rem 1.6rem; cursor:pointer; width:100%;
  box-shadow:0 12px 28px -12px rgba(255,62,142,0.6);
  transition:transform .12s ease, box-shadow .12s ease, opacity .2s ease;
  margin-top:1.5rem;
}
form > button:hover, form > button:focus-visible{ transform:translateY(-2px); outline:none; }
form > button:active{ transform:translateY(1px); }
form > button:disabled{ opacity:0.5; cursor:default; transform:none; }

.timer-options{
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid var(--panel-line);
  display:flex; flex-direction:column; gap:0.9rem;
}
.timer-field{ display:flex; align-items:center; flex-wrap:wrap; gap:0.6rem; }
.timer-field label{
  display:inline; flex:1 1 auto; min-width:9rem; margin:0;
  font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:normal;
  text-transform:none; font-size:0.85rem; color:var(--text-dim);
}
.timer-field-controls{ display:flex; align-items:center; flex:none; gap:0.6rem; }
.timer-field input[type=number]{
  display:block; flex:none; width:4.5rem; text-align:center;
  background:rgba(255,255,255,0.03); color:var(--text-dim);
  border:1px solid var(--panel-line); border-radius:10px;
  padding:0.5rem 0.4rem; font-family:'Manrope',sans-serif; font-size:0.95rem;
}
.timer-field input[type=number]:focus, .timer-field input[type=number]:focus-visible{
  outline:none; border-color:var(--text-dim); box-shadow:0 0 0 3px rgba(185,171,221,0.2);
}
.timer-field .timer-unit{ flex:none; color:var(--text-dim); font-size:0.85rem; }

/* Below this width the longer of the two labels ("Timer nach erster
   Antwort") no longer fits next to its controls on one line while the
   shorter one ("Zeit im Warteraum") still would — wrapping only one of
   the two rows and leaving them visually inconsistent. Force both rows
   to stack the same way instead of letting flex-wrap decide per row. */
@media (max-width:480px){
  .timer-field{ flex-direction:column; align-items:flex-start; gap:0.4rem; }
}

.help-icon{
  position:relative; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:1.4rem; height:1.4rem; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid var(--panel-line);
  color:var(--text-dim); font-family:'Manrope',sans-serif; font-size:0.75rem; font-weight:700;
  cursor:pointer; user-select:none;
}
.help-icon:hover, .help-icon:focus, .help-icon:focus-visible, .help-icon.open{
  color:var(--text); border-color:var(--text-dim); outline:none;
}
.help-popup{
  display:none;
  position:absolute; z-index:5; bottom:calc(100% + 0.5rem); right:-0.5rem;
  width:15rem; max-width:65vw;
  background:var(--bg-2); border:1px solid var(--panel-line); border-radius:12px;
  padding:0.75rem 0.9rem; box-shadow:0 12px 28px -12px rgba(0,0,0,0.6);
  color:var(--text); font-size:0.78rem; font-weight:400; line-height:1.5; text-align:left;
}
.help-icon:hover .help-popup, .help-icon:focus .help-popup, .help-icon:focus-visible .help-popup, .help-icon.open .help-popup{
  display:block;
}

.error{ color:var(--danger); font-weight:700; text-align:center; margin:0 0 1rem; }
.success{
  background:var(--panel); border:1px solid var(--success); border-radius:20px;
  padding:1.75rem 1.5rem; margin-bottom:1.5rem;
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
.success p{ margin:0 0 0.6rem; text-align:center; }
.success p:last-child{ margin-bottom:0; }
.success p.top-link{ margin-top:1.5rem; }

.stats{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:20px;
  padding:1.25rem 1.5rem; margin-bottom:1.5rem; text-align:center;
  color:var(--text-dim); line-height:1.6;
}

.link-row{ display:flex; gap:0.6rem; align-items:stretch; margin-top:0.25rem; }
.link-box{
  flex:1; word-break:break-all; display:flex; align-items:center;
  background:rgba(255,255,255,0.04); border:1px solid var(--panel-line); border-radius:12px;
  padding:0.75rem 1rem; font-family:'Space Grotesk',monospace; font-size:0.9rem;
}
.link-row button{
  flex:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:0.85rem;
  background:rgba(255,255,255,0.06); border:1px solid var(--panel-line); color:var(--text);
  border-radius:12px; padding:0 1.1rem; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.link-row button:hover, .link-row button:focus-visible{ border-color:var(--gold); color:var(--gold); outline:none; }

#countdown-msg, #create-room-status{
  text-align:center; color:var(--gold); font-weight:700; margin:-0.5rem 0 1.5rem;
}

.eyebrow{
  font-family:'Anton',sans-serif;
  font-size:0.95rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold); text-align:center; margin:0 0 0.75rem;
}

/* Sticky so the countdown/answer-window ring stays visible while scrolling
   down to the answer buttons on small screens instead of scrolling away. */
.ring-wrap{
  display:flex; justify-content:center; margin-bottom:1rem;
  position:sticky; top:0.6rem; z-index:20;
}
.ring{
  position:relative; width:132px; height:132px;
  background:rgba(15,8,33,0.72); border-radius:50%;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 8px 24px -8px rgba(0,0,0,0.6);
}
.ring svg{ transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:rgba(255,255,255,0.08); stroke-width:8; }
.ring-progress{
  fill:none; stroke:var(--magenta); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:352; transition:stroke-dashoffset 1s linear;
}
.ring-progress.danger{ stroke:var(--danger); }
.ring-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column;
}
.ring-num strong{ font-family:'Space Grotesk',monospace; font-size:2.4rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.ring-num span{ font-size:0.65rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; margin-top:0.15rem; }

.timer-note{
  text-align:center; font-size:0.9rem; color:var(--text-dim); font-style:italic;
  margin:-0.5rem 0 1.5rem;
}
.timer-note.hidden{ visibility:hidden; }

.question-card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:20px;
  padding:1.75rem 1.5rem;
  text-align:center;
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  margin-bottom:1.5rem;
}
.question-card h2{
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:clamp(1.35rem,4.2vw,1.7rem); line-height:1.25; margin:0;
}
.question-card .result-q{
  font-size:0.95rem; color:var(--text-dim); margin:0 0 0.6rem;
}
.question-card .result-a{
  font-size:1.05rem; margin:0;
}
.question-card .result-a strong{ color:var(--gold); }

.options{
  display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; margin-bottom:1.75rem;
}
@media (max-width:420px){ .options{ grid-template-columns:1fr; } }

.opt{
  --tint: var(--magenta);
  position:relative;
  display:flex; align-items:center; gap:0.85rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border:1px solid var(--panel-line);
  border-radius:16px;
  padding:1rem 1.1rem;
  text-align:left;
  color:var(--text);
  font-family:'Manrope',sans-serif; font-weight:700; font-size:1rem;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .2s ease;
}
.opt:nth-child(1){ --tint:var(--magenta); }
.opt:nth-child(2){ --tint:var(--gold); }
.opt:nth-child(3){ --tint:var(--cyan); }
.opt:nth-child(4){ --tint:var(--violet); }

.opt .medal{
  flex:none; width:2.3rem; height:2.3rem; border-radius:50%;
  background:var(--tint); color:#1B1035;
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:1.05rem;
  box-shadow:0 0 0 3px rgba(255,255,255,0.08);
}
.opt:hover, .opt:focus-visible{
  transform:translateY(-2px);
  border-color:var(--tint);
  box-shadow:0 10px 24px -12px var(--tint);
  outline:none;
}
.opt:active{ transform:translateY(1px); }
.opt.selected{ border-color:var(--tint); box-shadow:0 0 0 2px var(--tint) inset; }
.opt:disabled{ opacity:0.45; cursor:default; transform:none; box-shadow:none; }
.opt:disabled:hover{ transform:none; }

.status{
  text-align:center; font-size:0.9rem; color:var(--text-dim); font-style:italic;
  margin:-0.75rem 0 1.5rem; min-height:1.2em;
}
.status.show{ color:var(--gold); font-style:normal; font-weight:700; }

.board-label{
  font-family:'Anton',sans-serif; font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-dim); text-align:center; margin:0 0 0.75rem;
}
ul.board{ list-style:none; margin:0 0 1.5rem; padding:0; display:flex; flex-direction:column; gap:0.5rem; }
ul.board li{
  display:flex; align-items:center; gap:0.75rem;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px; padding:0.6rem 0.9rem;
}
ul.board li .rank{
  flex:none; width:1.6rem; text-align:center; font-family:'Space Grotesk',monospace; font-weight:700;
  color:var(--text-dim);
}
ul.board li.lead .rank{ color:var(--gold); }
ul.board li .name{ flex:1; font-weight:700; }
ul.board li .score{ font-family:'Space Grotesk',monospace; font-weight:700; font-variant-numeric:tabular-nums; }
ul.board li.me{ border-color:var(--magenta); background:rgba(255,62,142,0.08); }
ul.board li.lead::before{ content:"\2605"; color:var(--gold); }
ul.board li.winner{ border-color:var(--gold); background:rgba(255,200,87,0.1); }
ul.board li .mark{ font-size:0.8rem; font-weight:700; }
ul.board li .mark.correct{ color:var(--success); }
ul.board li .mark.incorrect{ color:var(--danger); }

.winner-announcement{
  text-align:center; font-size:1.05rem; color:var(--text-dim); margin:-0.5rem 0 1.75rem;
}
.winner-announcement strong{
  display:block; font-family:'Anton',sans-serif; font-weight:400; letter-spacing:0.03em;
  font-size:clamp(1.8rem,6vw,2.4rem); text-transform:uppercase; color:var(--gold);
  text-shadow:0 0 24px rgba(255,200,87,0.35); margin-top:0.35rem;
}

.cta-row{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:0.5rem; }
.cta-btn{
  display:inline-block;
  font-family:'Anton',sans-serif; font-weight:400; letter-spacing:0.04em;
  font-size:1rem; text-transform:uppercase; text-align:center;
  background:linear-gradient(180deg, var(--magenta), #D42C72);
  color:#fff; border:none; border-radius:999px;
  padding:0.85rem 2.2rem; cursor:pointer;
  box-shadow:0 12px 28px -12px rgba(255,62,142,0.6);
  transition:transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.cta-btn:hover, .cta-btn:focus-visible{ transform:translateY(-2px); outline:none; text-decoration:none; color:#fff; }
.cta-btn:active{ transform:translateY(1px); }
.cta-btn:disabled{ opacity:0.5; cursor:default; transform:none; }

.cta-btn.secondary{
  background:transparent; color:var(--text);
  border:1px solid var(--panel-line); box-shadow:none;
}
.cta-btn.secondary:hover, .cta-btn.secondary:focus-visible{
  color:var(--gold); border-color:var(--gold);
}

.lead-group{ margin:0 0 2rem; }
.lead-group p{
  text-align:center; color:var(--text-dim); font-size:1.05rem; line-height:1.6;
  max-width:44ch; margin:0 auto 0.9rem;
}
.lead-group p:last-child{ margin-bottom:0; }

.disclaimer{
  text-align:center; color:var(--text-dim); font-size:0.78rem; line-height:1.5;
  max-width:44ch; margin:3rem auto 0; padding-top:1.25rem;
  border-top:1px solid var(--panel-line);
}

.msg-card{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:20px;
  padding:2rem 1.5rem; text-align:center; font-size:1.05rem; color:var(--text-dim);
}

.restart-status{
  text-align:center; color:var(--gold); font-weight:700; margin:0.75rem 0 0;
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
}
.restart-status.error{ color:var(--danger); }

.spinner{
  display:inline-block; width:1.1em; height:1.1em; flex:none;
  border:2px solid rgba(255,255,255,0.25); border-top-color:var(--gold);
  border-radius:50%; animation:spin 0.8s linear infinite;
}

@keyframes spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } .spinner{ animation-duration:2.4s; } }

.stage-wide{ max-width:1100px; }

.table-wrap{ overflow-x:auto; border:1px solid var(--panel-line); border-radius:20px; }
.rounds-table{
  width:100%; border-collapse:collapse; font-size:0.9rem; white-space:nowrap;
}
.rounds-table th, .rounds-table td{
  text-align:left; padding:0.75rem 1rem; border-bottom:1px solid var(--panel-line);
}
.rounds-table th{
  background:rgba(255,255,255,0.04); color:var(--text-dim);
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em;
}
.rounds-table tbody tr:last-child td{ border-bottom:none; }
.rounds-table tbody tr:hover{ background:rgba(255,255,255,0.03); }

.pagination{
  display:flex; align-items:center; justify-content:center; gap:1.25rem;
  margin-top:1.5rem; font-weight:700; color:var(--text-dim);
}

.filter-bar{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:1rem;
  background:var(--panel); border:1px solid var(--panel-line); border-radius:20px;
  padding:1.1rem 1.25rem; margin-bottom:1.5rem;
}
.filter-group{ display:flex; flex-direction:column; gap:0.35rem; }
.filter-group label{ margin:0; font-size:0.78rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em; }
.filter-group select, .filter-group input[type="date"]{
  background:rgba(255,255,255,0.04); border:1px solid var(--panel-line); color:var(--text);
  border-radius:10px; padding:0.5rem 0.7rem; font-family:'Manrope',sans-serif; font-size:0.9rem;
}
.filter-checkbox label{
  flex-direction:row; align-items:center; gap:0.5rem; text-transform:none;
  font-size:0.9rem; color:var(--text);
}
.filter-checkbox input{ width:auto; }
.filter-submit{ padding:0.6rem 1.5rem; font-size:0.85rem; }

.kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:0.9rem; margin-bottom:1.75rem;
}
.kpi-tile{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:16px;
  padding:0.9rem 1rem; display:flex; flex-direction:column; gap:0.3rem;
}
.kpi-tile.kpi-bad{ border-color:var(--danger); }
.kpi-label{ font-size:0.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; }
.kpi-value{ font-family:'Space Grotesk',monospace; font-size:1.3rem; font-weight:700; font-variant-numeric:tabular-nums; }
.kpi-tile.kpi-bad .kpi-value{ color:var(--danger); }
.kpi-sub{ font-size:0.72rem; color:var(--text-dim); }

.rounds-table tr.row-auffaellig{ box-shadow:inset 3px 0 0 var(--gold); }
.rounds-table td.cell-bad{ color:var(--danger); font-weight:700; }
.rounds-table td.cell-warn{ color:var(--gold); font-weight:700; }

.verlauf-wrap{ margin-bottom:1.75rem; }
.mini-bar-row{ display:flex; align-items:center; gap:0.6rem; }
.mini-bar-value{ flex:none; min-width:1.8em; font-variant-numeric:tabular-nums; }
.mini-bar-track{
  flex:1; min-width:60px; height:6px; border-radius:3px; overflow:hidden;
  background:rgba(255,255,255,0.08);
}
.mini-bar-fill{ display:block; height:100%; background:var(--magenta); border-radius:3px; }

/* Gemeinsames Seitenlayout (templates/layout/header.php + footer.php). */
.site-header{
  width:100%; max-width:560px; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin:-1rem 0 1.75rem;
}
.site-brand{
  font-family:'Anton',sans-serif; font-size:1.1rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text);
}
.site-brand:hover{ color:var(--gold); text-decoration:none; }
.site-footer{
  width:100%; max-width:560px; margin-top:auto; padding-top:2.5rem;
  display:flex; justify-content:center; gap:0.6rem; font-size:0.85rem; color:var(--text-dim);
}
.site-footer a{ color:var(--text-dim); }
.site-footer a:hover{ color:var(--gold); }
.text-page{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:20px;
  padding:1.5rem; line-height:1.6;
}
.text-page p{ margin:0 0 0.9rem; }
.text-page p:last-child{ margin-bottom:0; }

.site-nav{ display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:0.4rem 1rem; font-weight:700; font-size:0.9rem; }
.site-nav a, .site-nav .link-button{ color:var(--text); }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav .link-button:hover, .site-nav .link-button:focus-visible{ color:var(--gold); }
.site-nav form{ display:inline; background:none; border:none; padding:0; margin:0; box-shadow:none; }
/* Button, der wie ein Link aussieht (z.B. "Abmelden" als POST-Formular). Muss alles
   zurücksetzen, was die generische "form > button"-Regel (Anton, Grossbuchstaben,
   margin-top, volle Breite) sonst mitgibt. */
.link-button{
  background:none; border:none; border-radius:0; box-shadow:none; padding:0; margin:0; width:auto;
  cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:none; color:var(--gold);
}
.link-button:hover, .link-button:focus-visible{ color:var(--magenta); text-decoration:underline; outline:none; transform:none; }
.link-button:active{ transform:none; }

.notice{
  background:var(--panel); border:1px solid var(--gold); border-radius:14px;
  padding:0.85rem 1.1rem; margin:0 0 1.5rem; text-align:center; line-height:1.5;
}
.notice form{ display:inline; background:none; border:none; padding:0; margin:0; box-shadow:none; }
.notice.notice-success{ border-color:var(--success); }
.notice.notice-error{ border-color:var(--danger); }

.field-error{ color:var(--danger); font-weight:700; font-size:0.85rem; margin:0.35rem 0 0; }
.field-hint{ color:var(--text-dim); font-size:0.85rem; margin:0.35rem 0 0; }
.checkbox-row{ display:flex; align-items:flex-start; gap:0.6rem; margin-top:1.1rem; line-height:1.45; }
.checkbox-row input{ margin-top:0.2rem; flex:none; width:1.1rem; height:1.1rem; accent-color:var(--magenta); }
.checkbox-row label{
  font-family:'Manrope',sans-serif; font-size:0.95rem; letter-spacing:0; text-transform:none;
  color:var(--text); margin:0;
}
.form-links{ text-align:center; font-weight:700; margin:-0.5rem 0 1.5rem; line-height:1.8; }
.section-title{
  font-family:'Anton',sans-serif; font-weight:400; font-size:1.05rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--gold); margin:0 0 1rem;
}
form > .section-title + label{ margin-top:0; }
.form-danger{ border-color:rgba(255,92,92,0.5); }
.form-danger > button{ background:linear-gradient(180deg, var(--danger), #d43c3c); }

/* Honeypot-Feld der Bot-Bremse (HoneypotFormGuard): für Menschen unsichtbar, aber nicht
   per display:none — manche Bots überspringen versteckte Felder gezielt. */
.hp-field{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

.site-nav a.credit-badge{
  font-family:'Space Grotesk',monospace; font-size:0.85rem; color:var(--bg-2);
  background:var(--gold); border-radius:999px; padding:0.2rem 0.7rem;
}
.site-nav a.credit-badge:hover, .site-nav a.credit-badge:focus-visible{ color:var(--bg-2); background:#fff; text-decoration:none; }
.site-nav a.credit-badge.credit-badge-empty{ background:transparent; color:var(--text-dim); border:1px solid var(--panel-line); }

.journal{ width:100%; border-collapse:collapse; font-size:0.9rem; }
.journal td{ padding:0.45rem 0; border-top:1px solid var(--panel-line); vertical-align:top; }
.journal tr:first-child td{ border-top:none; }
.journal .journal-date{ color:var(--text-dim); white-space:nowrap; padding-right:0.75rem; font-family:'Space Grotesk',monospace; font-size:0.8rem; }
.journal .journal-amount{ text-align:right; white-space:nowrap; font-family:'Space Grotesk',monospace; font-weight:700; padding-left:0.75rem; }
.journal .journal-amount.plus{ color:var(--success); }
.journal .journal-amount.minus{ color:var(--danger); }
.journal-note{ display:block; color:var(--text-dim); font-size:0.8rem; }
.panel{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:20px;
  padding:1.5rem; margin-bottom:1.5rem;
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
.credit-total{ font-family:'Anton',sans-serif; font-size:2rem; color:var(--gold); margin:0 0 0.25rem; }

/* Endbildschirm: Optionen des Hosts (quiz.js). */
.restart-hint{ text-align:center; color:var(--text-dim); font-size:0.85rem; margin:0.75rem 0 0; }
.new-quiz-form{ margin-top:0.5rem; text-align:left; }
.new-quiz-form .top-link{ margin:1rem 0 0; }
.restart-hint.form-intro{ margin:-0.75rem 0 1.25rem; }

/* Demo (demo.php, Startseite, Endbildschirm im Demo-Raum). */
.form-plain{ background:none; border:none; box-shadow:none; padding:0; margin:1.5rem 0; }
.demo-limits{ margin:0 0 0.9rem; padding-left:1.25rem; }
.demo-limits li{ margin-bottom:0.3rem; }
.demo-link{ text-align:center; font-weight:700; margin:1.5rem 0 0; }
.demo-cta{
  background:var(--panel); border:1px solid var(--magenta); border-radius:20px;
  padding:1.25rem 1.5rem; margin-top:1.5rem; text-align:center; line-height:1.5;
}
.demo-cta p{ margin:0 0 1rem; }

/* Admin: Benutzerverwaltung (users.php). */
.kpi-value.kpi-value-small{ font-size:1.15rem; word-break:break-word; }
.row-muted td{ color:var(--text-dim); }
.grant-form{ max-width:560px; margin:0 auto 2rem; }
.filter-group input[type=text]{ padding:0.5rem 0.75rem; font-size:0.9rem; }

/* Eingabe des Bestätigungs-/Reset-Codes. */
input.code-input{ font-family:'Space Grotesk',monospace; font-size:1.6rem; letter-spacing:0.3em; text-align:center; }
.form-intro-text{ color:var(--text-dim); margin:0 0 1rem; line-height:1.5; }
.notice a{ font-weight:700; }

/* Kauf von Credits (credits.php, credits-danke.php). */
.test-banner{
  position:sticky; top:0; z-index:50; width:calc(100% + 2.5rem); margin:-2.5rem -1.25rem 1.5rem;
  background:repeating-linear-gradient(-45deg, #FFC857, #FFC857 14px, #ffb627 14px, #ffb627 28px);
  color:#1B1035; font-weight:800; text-align:center; padding:0.5rem 1rem; font-size:0.9rem;
}
.package-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:1rem; margin-bottom:1rem; }
.package-card{ position:relative; text-align:center; padding:1.5rem 1rem 1.25rem; margin:0; display:flex; flex-direction:column; }
.package-card.package-popular{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 20px 50px -20px rgba(255,200,87,0.35); }
.package-badge{
  position:absolute; top:-0.7rem; left:50%; transform:translateX(-50%);
  background:var(--gold); color:var(--bg-2); border-radius:999px; padding:0.15rem 0.75rem;
  font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap;
}
.package-credits{ font-family:'Anton',sans-serif; font-size:1.7rem; color:var(--gold); margin:0 0 0.25rem; }
.package-price{ font-family:'Space Grotesk',monospace; font-size:1.15rem; font-weight:700; margin:0 0 0.25rem; }
.package-per-quiz{ color:var(--text-dim); font-size:0.8rem; margin:0 0 1.1rem; flex:1; }
.package-card > button{ padding:0.7rem 1rem; }
.package-methods, .package-terms{ text-align:center; color:var(--text-dim); font-size:0.85rem; margin:0.5rem 0; line-height:1.5; }
.order-status p{ margin:0 0 0.75rem; }
.order-status p:last-child{ margin-bottom:0; }
.panel-link{ margin:1rem 0 0; }
.orders-table .journal-amount{ color:var(--text); font-weight:500; }
.delete-warning{ color:var(--danger); font-weight:700; margin:0 0 0.75rem; line-height:1.45; }

/* Admin: Bestellungen (orders.php, users.php). */
.mono{ font-family:'Space Grotesk',monospace; font-size:0.8rem; word-break:break-all; }
.badge-bad, .badge-test{ display:inline-block; border-radius:999px; padding:0.05rem 0.5rem; font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; }
.badge-bad{ background:var(--danger); color:#fff; }
.badge-test{ background:var(--gold); color:var(--bg-2); }
.admin-actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center; margin:1.5rem 0; }
.admin-actions .form-plain{ margin:0; }
.rounds-table tbody th{ text-align:left; color:var(--text-dim); font-weight:700; white-space:nowrap; width:1%; padding-right:1.5rem; }
.table-note{ text-align:center; margin:0.6rem 0 2rem; }
.log-tail{
  background:rgba(0,0,0,0.3); border:1px solid var(--panel-line); border-radius:14px; padding:1rem 1.25rem;
  font-family:'Space Grotesk',monospace; font-size:0.8rem; line-height:1.5; color:var(--text-dim);
  white-space:pre-wrap; word-break:break-word; max-height:400px; overflow:auto; margin:0 0 2rem;
}
.scope-switch{ margin:0 0 1.25rem; }
.package-accept{ text-align:center; font-size:0.9rem; font-weight:700; margin:0 0 0.75rem; }

/* Rechtsseiten (agb.php, impressum.php, datenschutz.php). */
.legal-page h2{ font-family:'Anton',sans-serif; font-weight:400; font-size:1rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); margin:1.5rem 0 0.5rem; }
.legal-page h2:first-child{ margin-top:0; }
.legal-page .placeholder{ color:var(--text-dim); font-style:italic; border-left:3px solid var(--panel-line); padding-left:0.75rem; }
.legal-page span.placeholder{ border:none; padding:0; }
.legal-meta{ color:var(--text-dim); font-size:0.85rem; margin-top:1.5rem !important; }
.legal-page ul{ margin:0 0 0.9rem; padding-left:1.25rem; }
.legal-page li{ margin-bottom:0.35rem; }
.legal-meta.legal-meta-top{ margin:0 0 1.25rem !important; }
.legal-page h3{ font-size:0.95rem; font-weight:800; margin:1.1rem 0 0.4rem; }
/* Paketkarte ohne Kaufformular (öffentliche Preisanzeige) — gleiche Optik wie das Formular. */
div.package-card{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:20px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
div.package-card.package-popular{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 20px 50px -20px rgba(255,200,87,0.35); }
.package-cta{ display:block; text-align:center; padding:0.7rem 1rem; font-size:0.95rem; }
.package-soon{ text-align:center; color:var(--text-dim); font-weight:700; margin:0; }