/* ============================================================
   Zuschauerfragen — LiveFRAME-Styling (Eingabeseite + Moderation)
   Farben & Typo nach Web-Bauanleitung
   ============================================================ */

/* --- Archivo lokal (DSGVO) --- */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/archivo-latin-400-normal.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: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/archivo-latin-ext-400-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/archivo-latin-700-normal.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: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/archivo-latin-ext-700-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/archivo-latin-900-normal.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: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/archivo-latin-ext-900-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root{
  --bg:#0B0C0E;
  --bg-2:#0F1115;
  --card:#16191F;
  --line:#23272E;
  --red:#ED3A19;
  --red-2:#FF5A36;
  --red-soft:rgba(237,58,25,.12);
  --white:#FFFFFF;
  --muted:#9AA0A8;
  --muted-2:#6E747C;
  --teal:#36D6A4;
  --maxw:720px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--white);
  font-family:'Archivo', system-ui, sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

h1{ font-weight:900; text-transform:uppercase; letter-spacing:-0.02em; line-height:1.02;
  font-size:clamp(2.2rem, 8vw, 3.6rem); margin:.5rem 0 1rem; }
.k{ color:var(--red); }
.eyebrow{ color:var(--red); font-weight:800; letter-spacing:.22em; font-size:.78rem; text-transform:uppercase; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:24px; flex:1; }

/* --- Topbar --- */
.topbar{
  display:flex; align-items:center; gap:16px;
  padding:16px 24px; border-bottom:1px solid var(--line);
  background:var(--bg-2);
}
.logo{ height:26px; width:auto; }
.topbar-title{ font-weight:800; letter-spacing:.16em; font-size:.75rem; color:var(--muted); }
.logout{ margin-left:auto; color:var(--muted-2); font-size:.8rem; text-decoration:none; }
.logout:hover{ color:var(--red-2); }

/* --- Eingabeseite --- */
.frage-wrap{ padding-top:48px; }
.intro{ color:var(--muted); line-height:1.5; margin-bottom:1.6rem; }

textarea{
  width:100%; background:var(--card); color:var(--white);
  border:1px solid var(--line); border-radius:10px;
  padding:16px; font:inherit; font-size:1.05rem; line-height:1.5;
  resize:vertical; min-height:120px;
}
textarea:focus{ outline:none; border-color:var(--red); }
textarea::placeholder{ color:var(--muted-2); }

#website{ position:absolute; left:-9999px; top:-9999px; height:1px; width:1px; opacity:0; }

.form-fuss{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:12px; }
.zaehler{ color:var(--muted-2); font-size:.8rem; }

.btn{
  background:var(--red); color:var(--white); border:none; border-radius:8px;
  padding:14px 26px; font:inherit; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; font-size:.85rem; cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{ background:var(--red-2); }
.btn:disabled{ opacity:.6; cursor:wait; }
.btn-outline{ background:transparent; border:1px solid var(--red); color:var(--red); }
.btn-outline:hover{ background:var(--red-soft); }

.fehler{ color:var(--red-2); margin-top:10px; font-size:.9rem; }

/* --- Footer --- */
.fuss{ border-top:1px solid var(--line); background:#070809; padding:24px; text-align:center; }
.datenschutz{ color:var(--muted-2); font-size:.75rem; line-height:1.5; max-width:var(--maxw); margin:0 auto 12px; }
.copyright{ color:var(--muted-2); font-size:.72rem; line-height:1.6; }
.fuss a{ color:var(--muted); text-decoration:none; }
.fuss a:hover{ color:var(--red-2); }

/* --- Login --- */
.login-wrap{ display:flex; align-items:center; justify-content:center; padding-top:60px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:32px; }
.login-card{ width:100%; max-width:400px; }
.login-card h1{ font-size:1.6rem; }
.login-card input[type=password]{
  width:100%; background:var(--bg-2); color:var(--white);
  border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; font:inherit; margin:16px 0 12px;
}
.login-card input[type=password]:focus{ outline:none; border-color:var(--red); }
.login-card .btn{ width:100%; }

/* --- Moderator-Dashboard --- */
.stats{
  display:grid; grid-template-columns:repeat(3, auto) 1fr; gap:20px;
  align-items:center; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:16px 20px; margin-bottom:20px;
}
.stat{ display:flex; flex-direction:column; }
.stat .num{ font-weight:900; font-size:1.5rem; line-height:1.1; }
.stat .lbl{ color:var(--muted-2); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }
.stat-status{ flex-direction:row; align-items:center; gap:8px; justify-self:end; }
.pulse{ width:9px; height:9px; border-radius:50%; background:var(--teal); flex-shrink:0; }
.pulse.aktiv{ background:var(--red); animation:blink .8s infinite; }
@keyframes blink{ 50%{ opacity:.3; } }

.liste{ display:flex; flex-direction:column; gap:12px; }
.cluster{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:10px; padding:16px 18px;
}
.cluster.erledigt{ opacity:.45; border-left-color:var(--teal); }
.cluster-kopf{ display:flex; align-items:flex-start; gap:12px; }
.count{
  background:var(--red-soft); color:var(--red-2); font-weight:900;
  border-radius:6px; padding:4px 10px; font-size:1rem; white-space:nowrap;
}
.cluster.erledigt .count{ background:rgba(54,214,164,.12); color:var(--teal); }
.frage{ font-weight:700; font-size:1.1rem; line-height:1.35; flex:1; padding-top:2px; }
.haken{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:8px; width:38px; height:38px; font-size:1.1rem; cursor:pointer; flex-shrink:0;
}
.haken:hover{ border-color:var(--teal); color:var(--teal); }
.cluster-sub{ color:var(--muted-2); font-size:.78rem; margin-top:6px; }
.beispiele{ margin-top:10px; }
.beispiele summary{ color:var(--muted-2); font-size:.78rem; cursor:pointer; }
.beispiel{ color:var(--muted); font-size:.85rem; padding:5px 0 0 14px; line-height:1.4; }
.leer-hinweis{ color:var(--muted-2); text-align:center; padding:40px 0; }

.reset-zone{
  margin-top:48px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.btn-reset{
  background:transparent; border:1px solid var(--line); color:var(--muted-2);
  border-radius:8px; padding:10px 18px; font:inherit; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; cursor:pointer;
}
.btn-reset:hover{ border-color:var(--red); color:var(--red-2); }
.reset-hinweis{ color:var(--muted-2); font-size:.72rem; }

@media (max-width:560px){
  .stats{ grid-template-columns:repeat(3, 1fr); }
  .stat-status{ grid-column:1 / -1; justify-self:start; }
  .form-fuss{ flex-direction:column; align-items:stretch; }
  .zaehler{ text-align:right; }
}