:root {
  --gruen: #c8e99d; --gruen-dunkel: #3f7d1f; --gruen-hell: #eef8e1; --gold: #f3e3b3; --gold-dunkel: #9a7a1f;
  --text: #1e1c1a; --grau: #6b6660; --linie: #e8e4dc; --grund: #fbfaf6; --karte: #fff; --rot: #c0392b; --rot-hell: #fbe9e6; --amber: #b7791f; --amber-hell: #fdf3dc;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
button, input, textarea, select { font: inherit; }
.lade { padding: 40px 20px; color: var(--grau); }
.leiste { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: rgba(251, 250, 246, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); }
.leiste-innen { max-width: 980px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 17px; white-space: nowrap; }
.logo span { color: var(--gruen-dunkel); }
.reiter { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.reiter button { border: 0; background: none; padding: 7px 11px; border-radius: 999px; color: var(--grau); cursor: pointer; }
.reiter button.an { background: var(--gruen); color: var(--text); font-weight: 600; }
.reiter button .zahl { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--rot); color: #fff; font-size: 12px; text-align: center; }
.abmelden { border: 1px solid var(--linie); background: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; color: var(--grau); }
.seite { max-width: 980px; margin: 0 auto; padding: 18px 16px 80px; }
h1 { font-size: 26px; margin: 8px 0 4px; letter-spacing: -.01em; }
h2 { font-size: 17px; margin: 26px 0 10px; }
h2 small { font-weight: 400; color: var(--grau); font-size: 13px; margin-left: 6px; }
.unter { color: var(--grau); margin: 0 0 6px; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 14px 16px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kachel { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 12px 14px; }
.kachel b { display: block; font-size: 26px; line-height: 1.1; }
.kachel span { color: var(--grau); font-size: 13px; }
.kachel.gruen { background: var(--gruen-hell); border-color: #d6ecbd; }
.kachel.rot { background: var(--rot-hell); border-color: #f2cdc7; }
.kachel.gold { background: #fdf8e8; border-color: var(--gold); }
.liste { display: flex; flex-direction: column; gap: 8px; }
.zeile { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 11px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.zeile .haupt { flex: 1; min-width: 180px; }
.zeile .t { font-weight: 600; }
.zeile .s { color: var(--grau); font-size: 13px; }
.zeile.noshow { border-left: 4px solid var(--rot); }
.zeile.heute { border-left: 4px solid var(--gruen-dunkel); }
.zeit { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 52px; }
.chip { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #f1efe9; color: var(--grau); margin-left: 6px; vertical-align: 1px; }
.chip.gruen { background: var(--gruen); color: var(--text); }
.chip.rot { background: var(--rot-hell); color: var(--rot); }
.chip.gold { background: var(--gold); color: #5c4710; }
.chip.amber { background: var(--amber-hell); color: var(--amber); }
.knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.knopf { border: 1px solid var(--linie); background: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--text); }
.knopf:hover { border-color: #cfc8ba; }
.knopf.voll { background: var(--gruen); border-color: var(--gruen); font-weight: 600; }
.knopf.rot { color: var(--rot); }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }
.leer { color: var(--grau); padding: 12px 2px; }
.hinweis { border-radius: 12px; padding: 10px 14px; margin: 10px 0; background: var(--amber-hell); color: #6b4a0f; }
.hinweis.rot { background: var(--rot-hell); color: var(--rot); }
.hinweis.gruen { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.details { width: 100%; border-top: 1px dashed var(--linie); margin-top: 8px; padding-top: 10px; font-size: 14px; }
.details dl { display: grid; grid-template-columns: minmax(110px, 200px) 1fr; gap: 4px 12px; margin: 0; }
.details dt { color: var(--grau); }
.details dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--grau); }
.form input, .form textarea { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; background: #fff; color: var(--text); font-size: 15px; }
.form textarea { min-height: 90px; resize: vertical; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.anmelden { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.anmelden .karte { width: 100%; max-width: 380px; padding: 24px; }
.anmelden h1 { font-size: 22px; }
.fehler { color: var(--rot); font-size: 14px; min-height: 1.2em; }
.qr { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 10px; width: 220px; max-width: 100%; margin: 6px auto; }
.qr svg { width: 100%; height: auto; display: block; }
.geheim { font-family: ui-monospace, Menlo, monospace; background: #f6f4ee; padding: 8px 10px; border-radius: 8px; text-align: center; word-break: break-all; }
.platzhalter { text-align: center; padding: 40px 20px; color: var(--grau); }
.platzhalter b { display: block; color: var(--text); font-size: 18px; margin-bottom: 6px; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.blase { max-width: 85%; padding: 10px 13px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.blase.ich { align-self: flex-end; background: var(--gruen); }
.blase.er { align-self: flex-start; background: #fff; border: 1px solid var(--linie); }
.blase.warte { color: var(--grau); font-style: italic; }
.ansicht-band { background: var(--gold); color: #5c4710; text-align: center; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--text); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; max-width: calc(100% - 32px); z-index: 20; }
.versteckt { display: none !important; }
@media (max-width: 560px) {
  h1 { font-size: 22px; }
  .zwei { grid-template-columns: 1fr; }
  .reiter { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .reiter button { white-space: nowrap; }
  .details dl { grid-template-columns: 1fr; }
  .details dt { margin-top: 6px; }
}
.vorb h3 { font-size: 15px; margin: 14px 0 6px; }
.vorb p { margin: 6px 0; }
.vorb ul { margin: 4px 0 8px; padding-left: 20px; }
.vorb li { margin: 3px 0; }
.ablage { margin-top: 12px; border: 2px dashed var(--linie); border-radius: 12px; padding: 14px; text-align: center; color: var(--grau); font-size: 13px; }
.ablage.zone { cursor: copy; background: #fff; }
.ablage.drueber { border-color: var(--gruen-dunkel); background: var(--gruen-hell); }
.ablage b { color: var(--text); }
.ablage .knopf { display: inline-block; margin: 6px 0; }

/* Vorbereitung (Joshua 29.10.): jeder Abschnitt eine eigene Karte mit Farbbalken, Punkte mit Linien getrennt, Bogen als Tabelle */
.vbab { background: #fff; border: 1px solid var(--linie); border-left: 5px solid var(--linie); border-radius: 12px; padding: 4px 16px 10px; margin: 12px 0; }
.vbab.gruen { border-left-color: var(--gruen-dunkel); } .vbab.rot { border-left-color: var(--rot); } .vbab.amber { border-left-color: #e0a030; } .vbab.blau { border-left-color: #2f6fd6; } .vbab.gold { border-left-color: var(--gold, #c9a227); }
.vbab h3 { font-size: 16px; margin: 10px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.vbab p { margin: 8px 0; line-height: 1.5; }
.vbab p:has(> b:first-child) { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--linie); }
.vbab h3 + p:has(> b:first-child), .vbab h3 + ul + p:has(> b:first-child) { border-top: 0; padding-top: 0; margin-top: 8px; }
.vbab ul { margin: 6px 0 10px; padding-left: 20px; } .vbab li { margin: 0; padding: 6px 0; border-bottom: 1px solid #f1efe9; line-height: 1.45; } .vbab li:last-child { border-bottom: 0; }
.details dl.vbtab, .vorb .details dl { gap: 0; border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; background: #fff; }
.details dl.vbtab dt, .details dl.vbtab dd { padding: 8px 12px; border-top: 1px solid var(--linie); }
.details dl.vbtab dt:first-of-type, .details dl.vbtab dd:first-of-type { border-top: 0; }
.details dl.vbtab dt { background: #faf9f5; font-weight: 600; }