@import url("fonts/fonts.css");
/* Miranda Quiz: gemeinsame Gestaltung für Leinwand, Handy und Verwaltung.
   Miranda Glas: Navy, Gold- und Petrol-Leuchten, Glasflächen. Antwortfarben gedeckt statt Signalfarben,
   die Formen (Dreieck, Raute, Kreis, Quadrat, Fünfeck, Sechseck) bleiben für Farbsehschwäche. */
:root{
  --gold:#C8A75A;--gold-soft:#E2CB93;--gold-faint:rgba(200,167,90,.14);
  --bg1:#0B1622;--bg2:#122232;--bg3:#0A131D;
  --paper:rgba(255,255,255,.055);--paper-solid:#132334;--paper-pop:#162a3d;--sand:rgba(255,255,255,.08);--field:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);--line-hi:rgba(255,255,255,.22);--line-gold:rgba(200,167,90,.45);
  --txt:#EDEAE3;--navy:#F4F1EA;--mut:rgba(237,234,227,.58);--faint:rgba(237,234,227,.38);
  --rec:#FF5A66;--ok:#5FD09A;--teal:#3AA3B0;--warn:#FFB54A;
  --shadow:0 18px 46px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-s:0 10px 34px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.07);
  --blur:blur(26px) saturate(150%);
  /* Schriften wie auf miranda-institute.de (Klarheit): Cormorant Infant für Titel, Nunito Sans für Text. Selbst ausgeliefert. */
  --sans:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --serif:"Cormorant Infant","Didot",Georgia,serif;
  /* Fragen und Antworten: klare Sans, gut lesbar auf Beamer und Handy. Serife nur für Wortmarke und Titel. */
  --qfont:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.3,1);
  /* Antwortfarben, Miranda-Fassung der vier Kahoot-Farben */
  --a0:#B23A48;--a1:#2463A6;--a2:#B8902F;--a3:#2F8460;--a4:#6A4FA0;--a5:#22818C;
  --a0-d:#8E2C39;--a1-d:#1C4F86;--a2-d:#93721F;--a3-d:#246A4C;--a4-d:#543E80;--a5-d:#1A6870;
  --right:#2F9E6E;--wrong:#C2434F;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg1:#F3F5F8;--bg2:#EDF0F4;--bg3:#F6F7F9;
  --paper:#FFFFFF;--paper-solid:#FFFFFF;--paper-pop:#FFFFFF;--sand:#F1F3F7;--field:#F5F7FA;
  --line:rgba(15,27,45,.08);--line-hi:rgba(15,27,45,.16);--line-gold:rgba(166,124,31,.38);
  --txt:#16202E;--navy:#0F1B2D;--mut:#5E6978;--faint:#8A93A1;--gold-faint:rgba(200,167,90,.13);--gold-soft:#8C6A1C;
  --shadow:0 1px 2px rgba(15,27,45,.05),0 18px 40px rgba(15,27,45,.10);
  --shadow-s:0 1px 2px rgba(15,27,45,.04),0 6px 22px rgba(15,27,45,.06);
  --blur:none;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg1)}
body{margin:0;font:400 15px/1.5 var(--sans);color:var(--txt);-webkit-font-smoothing:antialiased;
  background:
   radial-gradient(900px 620px at 12% -8%,rgba(200,167,90,.16),transparent 62%),
   radial-gradient(760px 560px at 92% 8%,rgba(58,163,176,.14),transparent 60%),
   radial-gradient(680px 680px at 70% 108%,rgba(200,167,90,.09),transparent 62%),
   linear-gradient(168deg,var(--bg1) 0%,var(--bg2) 58%,var(--bg3) 100%);background-attachment:fixed}
html[data-theme="light"] body{background:
   radial-gradient(900px 600px at 8% -10%,rgba(200,167,90,.10),transparent 60%),
   radial-gradient(800px 560px at 96% 4%,rgba(58,163,176,.09),transparent 60%),
   linear-gradient(180deg,#F5F7FA 0%,#EDF0F4 100%);background-attachment:fixed}
a{color:inherit}
::selection{background:rgba(200,167,90,.35)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
input,select,textarea{background:var(--field);border:1px solid var(--line);border-radius:12px;padding:10px 14px;outline:none;width:100%;transition:border-color .18s,background .18s,box-shadow .18s}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-faint)}
input::placeholder,textarea::placeholder{color:var(--faint)}
select option{background:var(--paper-solid);color:var(--txt)}
input[type=checkbox],input[type=radio],input[type=range]{width:auto;accent-color:var(--gold)}
.hide{display:none!important}
.mut{color:var(--mut)}
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.glass{background:var(--paper);border:1px solid var(--line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow-s)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:9px 17px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;color:var(--txt);transition:border-color .18s,background .18s,transform .15s var(--ease),filter .18s}
.btn:hover{border-color:var(--line-hi);background:var(--sand)}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,#D8B96A,#B8922F);color:#0B1622;border-color:transparent;box-shadow:0 8px 22px rgba(200,167,90,.25)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.big{padding:14px 28px;font-size:16px}
.btn[disabled]{opacity:.45;pointer-events:none}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Wortmarke */
.wordmark{display:inline-flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none}
.wordmark .m{font:500 23px/1 var(--serif);letter-spacing:.01em}
.wordmark .bar{width:1px;height:22px;background:var(--gold);transform:rotate(18deg)}
.wordmark .sub{font-size:9.5px;font-weight:700;letter-spacing:.35em;color:var(--gold);text-transform:uppercase}

/* Antwortflächen */
.ans{position:relative;display:flex;align-items:center;gap:14px;border:0;border-radius:14px;color:#fff;font-weight:600;text-align:left;padding:14px 18px;min-height:64px;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.18);transition:transform .12s var(--ease),filter .15s,opacity .25s;overflow:hidden;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.ans::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 55%);pointer-events:none}
.ans:active{transform:translateY(2px)}
.ans.c0{background:var(--a0)}.ans.c1{background:var(--a1)}.ans.c2{background:var(--a2)}.ans.c3{background:var(--a3)}.ans.c4{background:var(--a4)}.ans.c5{background:var(--a5)}
.ans .shape{width:30px;height:30px;flex:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.ans .shape *{fill:#fff}
.ans.dim{opacity:.28;filter:saturate(.4)}
.ans.sel{outline:4px solid #fff;outline-offset:-4px}
.ans .tick{margin-left:auto;width:30px;height:30px;flex:none}
.ans img.aimg{max-height:110px;max-width:100%;border-radius:8px;object-fit:contain}

/* Rückmeldung richtig/falsch */
.verdict-right{background:linear-gradient(170deg,#2F9E6E,#1F7350)!important}
.verdict-wrong{background:linear-gradient(170deg,#C2434F,#8F2E38)!important}

/* Tafeln */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:var(--sand);border:1px solid var(--line);font-size:12px;font-weight:600}
.chip.gold{background:var(--gold-faint);color:var(--gold-soft);border-color:var(--line-gold)}
.pin-num{font:700 64px/1 var(--sans);letter-spacing:.04em;color:var(--navy);font-variant-numeric:tabular-nums}
.timer-ring{position:relative;width:96px;height:96px}
.timer-ring svg{transform:rotate(-90deg)}
.timer-ring b{position:absolute;inset:0;display:grid;place-items:center;font:700 34px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--navy)}

@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes spin{to{transform:rotate(360deg)}}
.pop{animation:pop .45s var(--ease) both}
.rise{animation:rise .5s var(--ease) both}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold);animation:spin 1s linear infinite}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}