:root{
  /* Farbwelt in Anlehnung an das Lufthansa-Markendesign:
     tiefes Nachtblau als Basis, warmes Gelb als Signalfarbe, klares Weiß. */
  --bg:#05164d;        /* Nachtblau (Basis)        */
  --bg2:#081f63;       /* Kopf-/Reiterleiste       */
  --card:#0d2870;      /* Karten / Flächen         */
  --surface:#0a205f;   /* Eingabefelder            */
  --line:#274596;      /* Rahmenlinien             */
  --text:#ffffff;
  --muted:#a9b6d9;
  --accent:#ffad00;    /* Lufthansa-Gelb           */
  --accent-ink:#05164d;/* Text auf Gelb            */
  --track:#081a4a;     /* Balken-/Timer-Hintergrund*/
  --c0:#e1523d; /* warmes Rot   */
  --c1:#1e5ac8; /* Blau         */
  --c2:#0e8a6e; /* Petrol/Grün  */
  --c3:#f2a900; /* Bernstein    */
  --good:#2bd576;
  --bad:#ff5470;
  --radius:18px;
  font-size:16px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 800px at 50% -10%,#0a2a86 0%,var(--bg) 60%);
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3{margin:0 0 .4em}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}

/* Buttons */
.btn{
  border:none;border-radius:14px;padding:14px 18px;font-size:1rem;font-weight:700;
  background:var(--accent);color:var(--accent-ink);transition:transform .05s,filter .15s;
}
.btn:active{transform:scale(.97)}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:#12327f;color:#fff}
.btn.ghost{background:transparent;color:var(--text);border:2px solid var(--line)}
.btn.danger{background:var(--bad);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.wide{width:100%}

.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.muted{color:var(--muted)}
.center{text-align:center}
.hidden{display:none !important}

/* Antwort-Buttons (Kahoot-Optik) */
.options{display:grid;gap:12px}
.option{
  border:none;border-radius:14px;padding:20px;font-size:1.25rem;font-weight:800;color:#fff;
  display:flex;align-items:center;gap:12px;text-align:left;transition:transform .05s,outline .1s;
  outline:0 solid transparent;
}
.option:active{transform:scale(.98)}
.option .shape{font-size:1.4rem}
.option.o0{background:var(--c0)}
.option.o1{background:var(--c1)}
.option.o2{background:var(--c2)}
.option.o3{background:var(--c3)}
.option.selected{outline:5px solid #fff}
.option.correct{outline:5px solid var(--good)}
.option.wrong{opacity:.5}

/* Timer */
.timer-ring{font-size:2.4rem;font-weight:900}
.timerbar{height:14px;background:var(--track);border-radius:8px;overflow:hidden;margin-top:8px}
.timerbar > div{height:100%;background:var(--accent);transition:width .3s linear}

/* Zeitleiste */
.timeline{display:flex;gap:14px;overflow-x:auto;padding:8px 2px 16px}
.timeline .tl-item{min-width:160px;background:var(--card);border-radius:14px;overflow:hidden;text-align:center}
.timeline .tl-item img{height:110px;width:100%;object-fit:cover;display:block}
.timeline .tl-item .yr{font-size:1.5rem;font-weight:900;color:var(--accent);padding:6px}
.timeline .tl-item .ttl{font-size:.85rem;padding:0 6px 10px;color:var(--muted)}

/* Voting-Balken */
.bars{display:grid;gap:14px}
.bar-row{display:flex;align-items:center;gap:12px}
.bar-label{min-width:120px;font-weight:800;font-size:1.3rem}
.bar-track{flex:1;background:var(--track);border-radius:10px;height:42px;position:relative;overflow:hidden}
.bar-fill{height:100%;border-radius:10px;transition:width .6s ease}
.bar-fill.o0{background:var(--c0)} .bar-fill.o1{background:var(--c1)}
.bar-fill.o2{background:var(--c2)} .bar-fill.o3{background:var(--c3)}
.bar-count{min-width:46px;text-align:right;font-weight:800}

/* Rangliste */
.rank-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--card);margin-bottom:10px}
.rank-pos{font-size:1.4rem;font-weight:900;width:42px;text-align:center}
.rank-name{flex:1;font-weight:700}
.rank-score{font-weight:900;color:var(--accent);font-size:1.3rem}
.rank-row.top1{outline:3px solid var(--accent)}

/* Sprachauswahl (Startseite) */
.langswitch{display:inline-flex;gap:6px;background:rgba(5,22,77,.55);border:1px solid var(--line);
            border-radius:999px;padding:5px}
.langswitch button{background:transparent;border:none;color:var(--muted);font-weight:800;
            padding:7px 16px;border-radius:999px;font-size:.95rem}
.langswitch button.active{background:var(--accent);color:var(--accent-ink)}

/* Zeitleisten-Animation: neues Bild sortiert sich ein */
.timeline .tl-item{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease}
.timeline .tl-item.tl-new{animation:tl-drop 1.1s cubic-bezier(.2,.85,.25,1) both;
            box-shadow:0 0 0 3px var(--accent),0 12px 34px rgba(255,173,0,.4)}
@keyframes tl-drop{
  0%{transform:translateY(-90px) scale(1.18);opacity:0}
  55%{transform:translateY(8px) scale(1.06);opacity:1}
  75%{transform:translateY(-3px) scale(1)}
  100%{transform:translateY(0) scale(1)}
}
.timeline .tl-item.tl-new .yr{animation:tl-pulse 1.1s ease both}
@keyframes tl-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}