:root {
  --bg: #f5efe6;
  --card: #fffaf4;
  --ink: #2f241d;
  --muted: #7a675c;
  --accent: #8f4f2d;
  --accent-2: #c98f4a;
  --line: #e5d7c6;
  --ok: #2c7a4b;
  --warn: #9a6d1f;
  --danger: #9e3d2f;
  --shadow: 0 8px 24px rgba(59, 36, 20, .08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}
button, input, textarea { font: inherit; }
button {
  border: 0;
  border-radius: 14px;
  padding: .85rem 1rem;
  background: var(--accent);
  color: white;
  font-weight: 700;
}
button.secondary, .file-btn.secondary {
  background: #efe3d6;
  color: var(--ink);
}
.hidden { display:none !important; }
.app-header {
  padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem;
  display:flex; gap:1rem; justify-content:space-between; align-items:flex-start;
}
h1 { margin:.1rem 0; font-size:1.8rem; }
.subtitle { margin:0; color:var(--muted); }
.app-shell { padding: 0 1rem 2rem; max-width: 980px; margin: 0 auto; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 1rem;
}
.hero { display:grid; grid-template-columns: 120px 1fr; gap:1rem; align-items:center; }
.hero-img { width:100%; border-radius:18px; border:1px solid var(--line); background:#fff; }
.tabs { display:flex; gap:.5rem; overflow:auto; padding:.5rem 0 1rem; }
.tab {
  white-space:nowrap; background:#efe3d6; color:var(--ink); font-weight:600; border-radius:999px; padding:.75rem 1rem;
}
.tab.active { background: var(--accent); color: #fff; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.stats-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:.8rem; margin-bottom:1rem; }
.stat span { display:block; color:var(--muted); font-size:.9rem; }
.stat strong { font-size:1.35rem; }
.station-list, .team-list { display:grid; gap:1rem; }
.station-card { display:grid; grid-template-columns: 110px 1fr; gap:1rem; }
.station-thumb { width:100%; height:110px; object-fit:cover; border-radius:16px; border:1px solid var(--line); background:#fff; }
.station-topline { display:flex; gap:.5rem; flex-wrap:wrap; }
.badge { display:inline-block; padding:.35rem .6rem; border-radius:999px; background:#f0e6d9; font-size:.85rem; }
.station-title { margin:.65rem 0 .35rem; }
.station-snippet { color:var(--muted); margin:.2rem 0 0; }
.button-row { display:flex; gap:.65rem; margin-top:.8rem; }
.button-row.wrap { flex-wrap:wrap; }
.button-row.right { justify-content:flex-end; }
.small { font-size:.9rem; }
.muted { color:var(--muted); }
.team-form, .inventory-form { display:flex; gap:.6rem; margin-top:1rem; }
input[type="text"], textarea {
  width:100%; border:1px solid var(--line); border-radius:14px; background:white; padding:.9rem 1rem; color:var(--ink);
}
.pill-list { display:flex; flex-wrap:wrap; gap:.5rem; min-height:2rem; }
.pill { border-radius:999px; padding:.45rem .8rem; background:#efe3d6; }
.map-wrap { background:#fff; border:1px solid var(--line); border-radius:18px; padding:.5rem; overflow:hidden; }
.map-wrap svg { width:100%; height:auto; display:block; }
.station-dot { cursor:pointer; }
.station-dot.done { fill: var(--ok); }
.station-dot.current { fill: var(--warn); }
.station-dot.locked { fill: #d9c6b8; }
.guide-block { border-top:1px solid var(--line); padding-top:1rem; margin-top:1rem; }
.guide-block:first-child { border-top:0; padding-top:0; margin-top:0; }
.guide-block h3 { margin-top:0; }
.source-list a { color: var(--accent); text-decoration:none; }
.station-dialog { width:min(920px, calc(100vw - 1rem)); border:none; background:transparent; padding:0; }
.dialog-card { position:relative; background:var(--card); border-radius:24px; padding:1rem; border:1px solid var(--line); box-shadow: var(--shadow); max-height:88vh; overflow:auto; }
.dialog-close { position:sticky; top:0; float:right; width:42px; height:42px; border-radius:50%; padding:0; font-size:1.6rem; }
.station-hero { display:grid; grid-template-columns: 120px 1fr; gap:1rem; align-items:center; margin-bottom:1rem; }
.station-hero img { width:100%; border-radius:18px; border:1px solid var(--line); background:#fff; }
.quiz-options { display:grid; gap:.6rem; margin-top:.9rem; }
.quiz-option { text-align:left; }
.feedback { margin-top: .8rem; padding: .8rem 1rem; border-radius: 14px; }
.feedback.ok { background: #e4f3e8; color: #1f5a37; }
.feedback.no { background: #fde8e4; color: #843729; }
.file-btn { display:inline-flex; align-items:center; justify-content:center; border-radius:14px; padding:.85rem 1rem; cursor:pointer; }
@media (max-width: 720px) {
  .hero, .station-card, .station-hero { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .team-form, .inventory-form { flex-direction:column; }
}
@media print {
  body { background:#fff; }
  .app-header, .tabs, #daten, #karte, #teams, #rucksack, #spielleitung, .hero, .button-row, .dialog-close { display:none !important; }
  #abenteuer { display:block !important; }
}