/* Urzeit-Archiv: dunkler Archivtisch wie auf dem Buchumschlag.
   Akte: Foto/Film · Titel · Vorlesen & Ton · Steckbrief-Mappe · Größenvergleich · Hintergrund · Blättern. */
:root {
  --bg: #0b2024;
  --bg-raise: #12333a;
  --line: #24474d;
  --cream: #fbefd5;
  --paper: #ecdcb5;
  --paper-deep: #dcc796;
  --ink: #14302f;
  --ink-soft: #4a3a22;
  --amber: #f2b35b;
  --red: #d2412f;
  --muted: #a3bab5;
  --font-display: "LS Display", "LS Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "LS Inter", "Helvetica Neue", Arial, sans-serif;
  --font-type: "LS Mono", "Courier New", monospace;
  color-scheme: dark;
}
html { background: var(--bg); }
body { background: radial-gradient(ellipse 120% 60% at 50% 0%, var(--bg-raise) 0%, var(--bg) 70%) no-repeat, var(--bg);
  color: var(--cream); padding-inline: 16px; padding-block: 16px 40px; }
.col { max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.col.wide { max-width: 68rem; }

.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-type); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.bar a { text-decoration: none; color: var(--muted); }
.bar a:hover { color: var(--cream); }
.bar b { color: var(--amber); }
.bar img { height: 30px; width: auto; }

/* Foto / Film */
.print { position: relative; background: #fdf8ec; padding: 9px; border-radius: 3px; box-shadow: 0 16px 36px rgba(0,0,0,0.5); transform: rotate(-1.2deg); margin: 8px 0 0; }
.frame { position: relative; overflow: hidden; aspect-ratio: 1200 / 654; max-width: 100%; background: #1c2b22; }
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame img.kb { transform-origin: 60% 45%; animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns { 0% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.2) translate(-3%, 2%); } }
.frame.rumble { animation: rumble 0.11s linear infinite; }
@keyframes rumble { 0% { transform: translate(0,0); } 25% { transform: translate(-2px,1px); } 50% { transform: translate(2px,-1px); } 75% { transform: translate(-1px,-2px); } 100% { transform: translate(1px,2px); } }
.vign { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(0,0,0,0.35)); pointer-events: none; }
.clip { position: absolute; right: 30px; top: -18px; width: 18px; height: 54px; }
.stamp { position: absolute; left: -8px; bottom: -14px; transform: rotate(-7deg); font-family: var(--font-display); font-weight: 900; font-size: 0.95rem; letter-spacing: 0.08em;
  color: var(--red); border: 3px solid var(--red); border-radius: 6px; padding: 3px 10px; background: rgba(253,248,236,0.94); }

.head { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.kicker { font-family: var(--font-type); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--amber); text-transform: uppercase; }
h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 9vw, 3rem); line-height: 1; letter-spacing: -0.02em; margin: 0; hyphens: auto; overflow-wrap: break-word; }
.meaning { margin: 4px 0 0; color: var(--muted); font-size: 1.02rem; }
.meaning em { color: var(--cream); font-style: normal; font-weight: 800; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn { appearance: none; border: 0; cursor: pointer; border-radius: 14px; padding: 15px 12px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; line-height: 1.1; transition: transform 0.12s ease, filter 0.12s ease; min-width: 0; }
.btn svg { width: 24px; height: 24px; flex: none; }
.btn:active { transform: scale(0.97); }
.btn-read { background: var(--amber); color: var(--ink); }
.btn-sound { background: var(--red); color: var(--cream); }
.btn[aria-pressed="true"] { filter: brightness(1.12); box-shadow: 0 0 0 3px var(--cream) inset; }
.status { min-height: 1.3em; margin: -10px 2px 0; font-family: var(--font-type); font-size: 0.85rem; color: var(--amber); }
.note { margin: -12px 2px 0; font-size: 0.88rem; color: var(--muted); line-height: 1.45; }

/* Steckbrief-Mappe */
.folder { position: relative; margin-top: 18px; }
.tab { position: absolute; left: 18px; top: -26px; height: 32px; padding: 7px 16px 0; background: var(--paper-deep); border-radius: 9px 9px 0 0;
  font-family: var(--font-type); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; }
.sheet { position: relative; background: var(--paper); color: var(--ink); border-radius: 6px; padding: 20px 20px 14px; box-shadow: 0 16px 34px rgba(0,0,0,0.45); }
.sheet h2 { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; margin: 0 0 6px; }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: grid; gap: 2px; padding: 9px 8px; margin: 0 -8px; border-bottom: 1.5px dashed rgba(20,48,47,0.22); border-radius: 6px; transition: background 0.2s ease; }
.facts li:last-child { border-bottom: 0; }
.facts .k { font-family: var(--font-type); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9a3a22; }
.facts .v { font-size: 1.05rem; line-height: 1.4; min-width: 0; }
.facts li.speaking { background: rgba(242,179,91,0.55); }

/* Größenvergleich */
.compare { background: var(--bg-raise); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.compare h2 { font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; margin: 0 0 4px; }
.compare p { margin: 0 0 12px; color: var(--muted); font-size: 0.95rem; }
.compare p b { color: var(--cream); }
.kids { display: flex; flex-wrap: wrap; gap: 6px 3px; align-items: flex-end; }
.kids svg { width: 18px; height: 34px; fill: var(--amber); flex: none; }
.kids svg.part { opacity: 0.45; }
.kids .dino-len { font-family: var(--font-type); font-size: 0.8rem; color: var(--muted); margin-left: 8px; align-self: center; }

/* Hintergrund */
.archive { border-left: 4px solid var(--amber); padding: 2px 0 2px 14px; }
.archive h2 { font-family: var(--font-type); font-size: 0.88rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin: 0 0 8px; font-weight: 700; }
.archive dl { margin: 0 0 12px; display: grid; gap: 2px; font-size: 0.98rem; }
.archive dt { color: var(--muted); font-family: var(--font-type); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; }
.archive dd { margin: 0; font-weight: 600; min-width: 0; }
.archive p { margin: 0; font-size: 0.98rem; line-height: 1.55; }

/* Blättern */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pager a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.pager a:hover { border-color: var(--amber); }
.pager small { font-family: var(--font-type); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.pager span { font-weight: 800; overflow-wrap: anywhere; }
.pager .next { text-align: right; }
.pager .all { grid-column: 1 / -1; text-align: center; align-items: center; }

.book { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; align-items: center; border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px; text-decoration: none; }
.book img { width: 74px; border-radius: 2px; box-shadow: 0 6px 14px rgba(0,0,0,0.4); }
.book b { display: block; }
.book small { color: var(--muted); }
footer { text-align: center; font-size: 0.82rem; color: var(--muted); display: flex; flex-direction: column; gap: 6px; align-items: center; }
footer nav { display: flex; gap: 16px; }
footer a { color: var(--muted); }

/* Übersicht */
.intro h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.intro p { color: #d5e0dc; max-width: 40rem; margin: 10px 0 0; }
.chapter h2 { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; margin: 0 0 4px; }
.chapter .ck { font-family: var(--font-type); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 14px; margin-top: 14px; }
.card { text-decoration: none; background: #fdf8ec; color: var(--ink); padding: 6px 6px 10px; border-radius: 3px; box-shadow: 0 10px 22px rgba(0,0,0,0.4); display: flex; flex-direction: column; gap: 6px; transition: transform 0.15s ease; min-width: 0; }
.card:hover { transform: rotate(-1.5deg) translateY(-2px); }
.card img { aspect-ratio: 480 / 262; object-fit: cover; width: 100%; }
.card small { font-family: var(--font-type); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.card span { font-weight: 800; font-size: 0.95rem; line-height: 1.2; hyphens: auto; overflow-wrap: break-word; }

@media (max-width: 380px) { .actions { grid-template-columns: 1fr; } }

/* Band 2 */
.bandhead { font-family: var(--font-type); font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); border-top: 2px dashed rgba(242,179,91,0.45); padding-top: 18px; margin: 10px 0 -18px; font-weight: 700; }
.tag { display: inline-block; align-self: flex-start; font-family: var(--font-type); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); border: 1.5px solid var(--amber); border-radius: 4px; padding: 2px 7px; margin: 2px 6px 0 0; transform: rotate(-2deg); }

/* Ermittler-Ausweis */
.aw-card { position: relative; background: var(--paper); color: var(--ink); border-radius: 8px; padding: 16px 18px 14px; box-shadow: 0 12px 28px rgba(0,0,0,0.4); }
.aw-card.aw-empty { background: var(--bg-raise); color: var(--cream); border: 1.5px dashed var(--amber); box-shadow: none; }
.aw-k { font-family: var(--font-type); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9a3a22; margin-bottom: 4px; }
.aw-empty .aw-k { color: var(--amber); }
.aw-card p { margin: 6px 0; }
.aw-big { font-size: 1.05rem; padding-right: 92px; }
.aw-wide .aw-big { padding-right: 0; }
.aw-note { font-size: 0.85rem; color: #5a4a30; }
.aw-empty .aw-note { color: var(--muted); }
.aw-note a { color: inherit; }
.btn-aw { background: var(--amber); color: var(--ink); width: 100%; margin: 8px 0 4px; font-weight: 800; }
.aw-bar { height: 12px; background: rgba(20,48,47,0.15); border-radius: 8px; overflow: hidden; margin: 8px 0 4px; }
.aw-bar span { display: block; height: 100%; background: linear-gradient(90deg, #d2412f, #f2b35b); border-radius: 8px; }
.aw-next { font-size: 0.88rem; }
.aw-stamp { position: absolute; right: 12px; top: 12px; transform: rotate(-8deg); border: 3px solid var(--red); color: var(--red); border-radius: 8px; padding: 4px 8px; text-align: center;
  font-family: var(--font-display); font-weight: 900; font-size: 0.9rem; letter-spacing: 0.06em; line-height: 1.1; background: rgba(253,248,236,0.9); }
.aw-stamp small { display: block; font-size: 0.62rem; letter-spacing: 0.14em; }
.aw-stamp.gold { border-color: #b8860b; color: #9a6b00; background: #fff4cf; }
.aw-name { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; margin: 6px 0 8px; }
.aw-name input { font: inherit; font-size: 1rem; padding: 9px 11px; border-radius: 8px; border: 1.5px solid rgba(20,48,47,0.3); background: #fffaf0; color: var(--ink); max-width: 22rem; }
.aw-del { appearance: none; border: 0; background: none; color: #9a3a22; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.card { position: relative; }
.card.seen::after { content: "✓"; position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red); color: #fff; font-weight: 900; font-size: 0.9rem; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.card.gold::after { content: "★"; background: #d9a400; }

/* Akten-Quiz */
.quiz { background: var(--bg-raise); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.quiz h2 { font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; margin: 0 0 4px; }
.qhint { margin: 0 0 10px; color: var(--muted); font-size: 0.92rem; }
.qq { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.qq legend { font-weight: 800; margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; padding: 0; }
.qq legend span { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: var(--ink); display: inline-grid; place-items: center; font-size: 0.85rem; }
.qa { appearance: none; text-align: left; font: inherit; font-size: 0.98rem; line-height: 1.35; padding: 11px 13px; border-radius: 10px; border: 1.5px solid var(--line);
  background: rgba(255,255,255,0.04); color: var(--cream); cursor: pointer; }
.qa:hover:not(:disabled) { border-color: var(--amber); }
.qa:disabled { cursor: default; opacity: 0.75; }
.qa.ok { border-color: #4caf7a; background: rgba(76,175,122,0.22); opacity: 1; }
.qa.ok::before { content: "✓ "; font-weight: 900; color: #7fd6a4; }
.qa.no { border-color: var(--red); background: rgba(210,65,47,0.22); opacity: 1; }
.qa.no::before { content: "✗ "; font-weight: 900; color: #ff8a78; }
.qres { margin: 4px 0 0; }
.qagain { appearance: none; border: 1.5px solid var(--amber); background: none; color: var(--amber); border-radius: 8px; padding: 4px 10px; font: inherit; font-weight: 700; cursor: pointer; margin-left: 6px; }
.aw-card:not(.aw-wide):not(.aw-empty) .aw-k { padding-right: 96px; }