/* theogonia.eu – Quiz.
   Tokens und Formensprache folgen css/theogonia.css: dunkel, Gold, Cinzel/GFS Didot,
   runde Formen als Signatur. Drei Buchstabenabstände, ein Eckenradius – mehr nicht. */
:root {
  --void: #06080d;
  --storm: #0b0f1a;
  --mist: #8795a8;
  --bone: #ece6d8;
  --gold: #c9a45c;
  --gold-pale: #ead7a4;
  --terra: #c4714a;          /* Ton der Vasen-Slides – das Falsch-Signal der Marke */
  --line: rgba(236, 230, 216, .14);
  --line-soft: rgba(236, 230, 216, .06);

  --display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --greek: "GFS Didot", "Didot", "Palatino Linotype", serif;
  --text: "Lato", "Helvetica Neue", Arial, sans-serif;

  --ls-wide: .2em;           /* Versalien-Label */
  --ls-display: .02em;       /* Überschriften */
  --r: 3px;                  /* der einzige Eckenradius; Kreise sind 50% */

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px;

  --gutter: clamp(20px, 4vw, 48px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 50%, transparent 45%, rgba(6, 8, 13, .72) 100%),
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(201, 164, 92, .10), transparent 70%),
    var(--void);
  color: var(--bone);
  font: 400 16px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter) var(--s8); }

/* ---------- Kopfzeile ---------- */
.bar {
  display: flex; align-items: center; gap: var(--s4);
  padding: 18px 0 var(--s4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s6);
}
.home {
  font: 600 17px/1 var(--display); letter-spacing: var(--ls-display);
  color: var(--bone); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: none;
}
.home span { color: var(--gold); }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }

.lang {
  font: 400 11px/1 var(--text); letter-spacing: var(--ls-wide);
  color: var(--mist); background: none; border: 1px solid var(--line);
  padding: 7px 10px; cursor: pointer; border-radius: 999px;
}
.lang:hover, .lang:focus-visible { color: var(--bone); border-color: var(--gold); outline: none; }

.rangchip[hidden] { display: none; }
.badge[hidden] { display: none; }
.rangchip { display: flex; align-items: center; gap: var(--s2); text-align: right; }
.rangchip .badge { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: block; }
.rangchip b { display: block; font: 400 14px/1.2 var(--greek); color: var(--gold-pale); }
.rangchip small { display: block; font-size: 11px; color: var(--mist); }

/* ---------- Nur ein Abschnitt ist sichtbar ---------- */
#start, .lauf, .ende { display: none; }
#start.an, .lauf.an, .ende.an { display: block; }

/* ---------- Überschriften ---------- */
h1 { font: 400 clamp(30px, 5vw, 44px)/1.12 var(--display); letter-spacing: var(--ls-display); margin: 0 0 var(--s3); }
.kicker {
  font: 400 11px/1 var(--text); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--gold); margin: 0 0 var(--s4);
}
.lede { color: var(--mist); max-width: 46ch; margin: 0 0 var(--s6); }

/* ---------- Vers, wie auf der Landing ---------- */
.verse { margin: 0 0 var(--s6); padding-left: var(--s4); border-left: 1px solid rgba(201, 164, 92, .35); }
.verse .greek { font: 400 clamp(15px, 1.5vw, 18px)/1.4 var(--greek); color: var(--gold-pale); margin: 0; }
.verse .de { margin: 6px 0 0; font: italic 300 14px/1.5 var(--text); color: var(--mist); }
.verse cite { display: block; margin-top: var(--s1); font-size: 11px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--mist); font-style: normal; }

/* ---------- Modus-Auswahl ---------- */
.modi { display: grid; gap: var(--s3); }
.modus {
  display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: var(--s5);
  width: 100%; text-align: left; cursor: pointer; color: inherit; font: inherit;
  background: linear-gradient(180deg, rgba(11, 15, 26, .9), rgba(6, 8, 13, .9));
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s5);
  transition: border-color 220ms ease, transform 220ms ease;
}
.modus:hover, .modus:focus-visible { border-color: var(--gold); transform: translateY(-2px); outline: none; }
.modus .titel { display: block; font: 400 21px/1.2 var(--display); letter-spacing: var(--ls-display); margin-bottom: var(--s1); }
.modus .zeile { display: block; color: var(--mist); font-size: 14.5px; }
.modus .meta { display: block; margin-top: var(--s3); font-size: 11px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--gold); }

/* Der Kreis ist die Signatur der Seite – hier als Marke jedes Modus */
.siegel {
  width: 72px; height: 72px; border-radius: 50%; position: relative;
  border: 1px solid rgba(201, 164, 92, .55);
  background: radial-gradient(circle, rgba(234, 215, 164, .10), rgba(11, 15, 26, 0) 70%);
  display: grid; place-items: center; overflow: hidden;
}
.siegel b { font: 400 24px/1 var(--display); color: var(--gold-pale); letter-spacing: 0; }
.siegel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modus:hover .siegel { border-color: var(--gold); }

/* Auf schmalen Geräten bekommt der Text mehr Spalte */
@media (max-width: 480px) {
  .modus { grid-template-columns: 56px 1fr; gap: var(--s4); padding: var(--s4); }
  .siegel { width: 56px; height: 56px; }
  .siegel b { font-size: 19px; }
}

/* ---------- Rangleiter: kurz, auf Wunsch vollständig ---------- */
.leiter { margin-top: var(--s7); border-top: 1px solid var(--line); padding-top: var(--s5); }
.leiter h3 { font: 400 11px/1 var(--text); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--mist); margin: 0 0 var(--s4); }
.stufen { display: grid; gap: 0; margin: 0 0 var(--s4); padding: 0; list-style: none; }
.stufen li {
  display: grid; grid-template-columns: 26px 1fr auto; gap: var(--s3); align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.stufen .nr { color: var(--mist); font-size: 12px; font-variant-numeric: tabular-nums; }
.stufen .gr { font-family: var(--greek); color: var(--gold-pale); font-size: 16px; }
.stufen .de { color: var(--mist); }
.stufen .pt { color: var(--mist); font-size: 12px; font-variant-numeric: tabular-nums; }
.stufen li.ist { border-bottom-color: var(--gold); }
.stufen li.ist .de { color: var(--bone); }
.stufen li.offen { opacity: .5; }
.mehr {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--mist); font: 400 11px/1 var(--text); letter-spacing: var(--ls-wide);
  text-transform: uppercase; padding: 10px 18px; cursor: pointer;
}
.mehr:hover, .mehr:focus-visible { color: var(--gold-pale); border-color: var(--gold); outline: none; }

/* ---------- Frage ---------- */
.fortschritt { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.balken { flex: 1; height: 2px; background: rgba(236, 230, 216, .12); position: relative; }
.balken i { position: absolute; inset: 0 auto 0 0; background: var(--gold); transition: width 320ms ease; }
.zaehler, .punkte { font-size: 12px; font-variant-numeric: tabular-nums; }
.zaehler { color: var(--mist); }
.punkte { color: var(--gold); }

.frage { margin-bottom: var(--s5); }
.frage .typ {
  font: 400 11px/1 var(--text); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: var(--s3);
}
.frage h2 { font: 400 clamp(21px, 3.4vw, 28px)/1.3 var(--display); letter-spacing: var(--ls-display); margin: 0; }
.frage h2 .gr { font-family: var(--greek); color: var(--gold-pale); }
.bildrahmen {
  margin: var(--s4) 0 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  width: min(100%, 248px); aspect-ratio: 4 / 5; display: none;
}
.bildrahmen.an { display: block; }
.bildrahmen { position: relative; }
/* KI-Kennzeichnung direkt am Bild (Art. 50 Abs. 4 KI-VO) */
.ki-badge {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 4px; border-radius: var(--r);
  background: rgba(6,8,13,.72); border: 1px solid rgba(234,215,164,.35);
  font: 700 9px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--bone);
  pointer-events: none;
}
.ki-badge b {
  display: inline-grid; place-items: center; min-width: 19px; height: 15px; padding: 0 3px; box-sizing: border-box;
  border-radius: 2px; background: var(--gold-pale); color: var(--void); letter-spacing: .04em;
}
.bildrahmen img { width: 100%; height: 100%; object-fit: cover; display: block; }

.optionen { display: grid; gap: var(--s2); margin: 0 0 var(--s4); }
@media (min-width: 720px) { .optionen { grid-template-columns: 1fr 1fr; } }

.opt {
  display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left;
  background: rgba(11, 15, 26, .7); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 18px; color: inherit; font: 400 16px/1.4 var(--text); cursor: pointer;
  min-height: 56px;
  transition: border-color 160ms ease, background 160ms ease;
}
.opt:hover:not(:disabled), .opt:focus-visible { border-color: var(--gold); outline: none; }
.opt:disabled { cursor: default; }
.opt .key {
  flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%;
  font: 400 12px/22px var(--text); text-align: center; color: var(--mist);
}
.opt.richtig { border-color: var(--gold); background: rgba(201, 164, 92, .12); }
.opt.richtig .key { border-color: var(--gold); color: var(--gold-pale); }
.opt.falsch { border-color: var(--terra); background: rgba(196, 113, 74, .12); }
.opt.falsch .key { border-color: var(--terra); color: var(--terra); }

/* Die Rückmeldung trägt die Quellenzeile – das Markenversprechen gehört betont */
.echo { min-height: 1px; }
.echo .block {
  border-left: 2px solid var(--gold); padding: var(--s3) 0 var(--s3) var(--s4);
  display: grid; gap: 6px;
}
.echo .block.daneben { border-left-color: var(--terra); }
.echo .wertung { font: 400 16px/1.4 var(--display); letter-spacing: var(--ls-display); margin: 0; color: var(--gold-pale); }
.echo .block.daneben .wertung { color: var(--terra); }
.echo .gewinn { color: var(--gold); font-variant-numeric: tabular-nums; }
.echo .quelle { margin: 0; font-size: 13.5px; color: var(--mist); }
.echo .quelle b { color: var(--bone); font-weight: 400; }

.weiter {
  margin-top: var(--s4); background: none; border: 1px solid var(--gold); color: var(--gold-pale);
  font: 400 12px/1 var(--text); letter-spacing: var(--ls-wide); text-transform: uppercase;
  padding: 15px 28px; cursor: pointer; border-radius: 999px;
  transition: background 180ms ease, color 180ms ease;
}
.weiter:hover, .weiter:focus-visible { background: var(--gold); color: var(--void); outline: none; }
.weiter[hidden] { display: none; }

/* ---------- Ergebnis ---------- */
.ende { text-align: center; }
.ende .score { font: 400 clamp(52px, 10vw, 86px)/1 var(--display); color: var(--gold-pale); margin: var(--s2) 0 0; font-variant-numeric: tabular-nums; }
.ende .einheit { font-size: 11px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--gold); margin: 6px 0 0; }
.ende .von { color: var(--mist); font-size: 14px; margin: var(--s3) 0 0; }

.rangkarte {
  margin: var(--s6) auto 0; max-width: 420px; padding: var(--s5);
  border: 1px solid var(--line); border-radius: var(--r); background: rgba(11, 15, 26, .8);
}
.rangkarte .badge { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto var(--s4); display: block; }
.rangkarte .gr { font: 400 28px/1.2 var(--greek); color: var(--gold-pale); margin: 0 0 var(--s1); }
.rangkarte .de { font: 400 12px/1 var(--text); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--mist); margin: 0 0 var(--s4); }
.rangkarte .sinn { color: var(--mist); font-size: 14px; margin: 0 0 var(--s5); font-style: italic; }
.naechster { font-size: 12.5px; color: var(--mist); }
.naechster b { color: var(--gold-pale); font-weight: 400; }
.rangbalken { height: 2px; background: rgba(236, 230, 216, .12); margin: var(--s2) 0 0; position: relative; }
.rangbalken i { position: absolute; inset: 0 auto 0 0; background: var(--gold); }

.aufstieg {
  margin: var(--s5) auto 0; max-width: 420px; padding: var(--s4) var(--s5);
  border: 1px solid var(--gold); border-radius: var(--r); background: rgba(201, 164, 92, .08);
}
.aufstieg[hidden] { display: none; }
.aufstieg p { margin: 0; font-size: 14px; }
.aufstieg .gr { font-family: var(--greek); color: var(--gold-pale); font-size: 19px; }

.aktionen { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-top: var(--s6); }
.tat {
  background: none; border: 1px solid var(--line); color: var(--bone);
  font: 400 12px/1 var(--text); letter-spacing: var(--ls-wide); text-transform: uppercase;
  padding: 15px 24px; cursor: pointer; border-radius: 999px; display: inline-block;
  text-decoration: none; transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.tat:hover, .tat:focus-visible { border-color: var(--gold); color: var(--gold-pale); outline: none; }
.tat.haupt { border-color: var(--gold); color: var(--gold-pale); }
.tat.haupt:hover, .tat.haupt:focus-visible { background: var(--gold); color: var(--void); }
.zurueck { display: inline-block; margin-top: var(--s4); font-size: 13px; color: var(--mist); text-decoration: none; border-bottom: 1px solid var(--line); }
.zurueck:hover, .zurueck:focus-visible { color: var(--gold-pale); border-bottom-color: var(--gold); outline: none; }

.fuss { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: 12px; color: var(--mist); }
.fuss .recht { display: block; margin-top: var(--s2); }
.fuss .recht a { color: var(--mist); }
.fuss .recht a:hover { color: var(--gold-pale); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }