:root {
  --bg: #f4f4f1;
  --fl: #ffffff;
  --tx: #1d1d1b;
  --tx2: #5f5f5a;
  --rand: #e0e0da;
  --akzent: #1f5fa8;
  --rot: #b3261e;
  --rot-bg: #fbeceb;
  --gelb: #8a5a00;
  --gelb-bg: #fff4dc;
  --marke: #ecece6;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151514;
    --fl: #1f1f1d;
    --tx: #ecece8;
    --tx2: #a3a39d;
    --rand: #34342f;
    --akzent: #82b2ee;
    --rot: #f2928b;
    --rot-bg: #3a1f1d;
    --gelb: #f0c770;
    --gelb-bg: #352a12;
    --marke: #2c2c29;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--akzent); }
button, input {
  font: inherit;
  color: inherit;
}
button {
  padding: 6px 12px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--fl);
  cursor: pointer;
}
button:disabled { cursor: default; opacity: .55; }
button.leise { border-color: transparent; background: none; color: var(--tx2); padding: 6px 8px; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--rand);
}
h1 { margin: 0; font-size: 1.15rem; }
.kopf-rechts { display: flex; gap: 8px; align-items: center; }
.abmelden { margin: 0; }
.stand { color: var(--tx2); font-size: .85rem; font-variant-numeric: tabular-nums; }
body.laedt .stand::before {
  content: "";
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-right: 6px;
  border: 2px solid var(--tx2);
  border-right-color: transparent;
  border-radius: 50%;
  animation: dreh .8s linear infinite;
  vertical-align: -1px;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.meldungen { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.meldung { margin: 10px 0 0; padding: 8px 12px; border-radius: 6px; }
.meldung.fehler { background: var(--rot-bg); }
.meldung.warnung { background: var(--gelb-bg); }

/* ---------- Kacheln ---------- */
.kacheln {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  align-items: start;
}
.kachel {
  background: var(--fl);
  border: 1px solid var(--rand);
  border-radius: 10px;
  min-width: 0;
}
.kachel.zieht { outline: 2px dashed var(--akzent); opacity: .85; }
.kachel-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 4px;
}
.kachel-kopf h2 { flex: 1; margin: 0; font-size: 1rem; min-width: 0; }
.griff, .klappe {
  border: none;
  background: none;
  color: var(--tx2);
  padding: 6px 8px;
  line-height: 1;
}
.griff { cursor: grab; touch-action: none; font-size: 1.1rem; }
.kachel.zieht .griff { cursor: grabbing; }
.kachel-koerper { padding: 0 14px 12px; }
.kachel.zu .kachel-koerper { display: none; }

.zahl {
  font-variant-numeric: tabular-nums;
  color: var(--tx2);
  font-size: .85rem;
}
.kachel-kopf .zahl:not(:empty) {
  background: var(--marke);
  border-radius: 10px;
  padding: 1px 8px;
}

.unterkopf { font-size: .85rem; color: var(--tx2); margin: 12px 0 4px; }
.hinweis { color: var(--tx2); margin: 6px 0; }
.fehler { color: var(--rot); }
.warnung { color: var(--gelb); margin: 6px 0; }
.zaehlzeile { margin: 6px 0; }

/* ---------- Gruppen & Zeilen ---------- */
.gruppe { border-top: 1px solid var(--rand); }
.gruppe:first-of-type { margin-top: 4px; }
.gruppe summary {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
  font-weight: 600;
  list-style-position: inside;
}
.gruppe summary .zahl { font-weight: 400; }
.zeilen { list-style: none; margin: 0 0 8px; padding: 0; }
.zeile {
  display: flex;
  gap: 8px 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--rand);
}
.zeile:last-child { border-bottom: none; }
.zeile-text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.titel { display: block; }
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--tx2);
  font-size: .85rem;
  margin-top: 2px;
}
.marke {
  background: var(--marke);
  border-radius: 4px;
  padding: 0 6px;
}
.marke.warn { background: var(--gelb-bg); color: var(--gelb); }
.mehr { color: var(--tx2); font-size: .85rem; padding: 6px 0; }
.termin .zeit { min-width: 92px; font-variant-numeric: tabular-nums; color: var(--tx2); }
.knoepfe { display: flex; gap: 6px; flex-shrink: 0; }
.knopf { font-size: .8rem; padding: 3px 8px; white-space: nowrap; }
.knopf-link { font-size: .85rem; white-space: nowrap; }
@media (max-width: 480px) {
  .zeile { flex-wrap: wrap; }
  .knoepfe { width: 100%; }
}

/* ---------- Sinn-Ebene ---------- */
.grosszahl { font-size: 1.6rem; font-weight: 600; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.balken { width: 100%; height: 8px; margin: 6px 0; accent-color: var(--akzent); }
.geburt-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.geburt-form label { display: flex; flex-direction: column; gap: 4px; color: var(--tx2); font-size: .85rem; }
.geburt-form input { padding: 6px 8px; border: 1px solid var(--rand); border-radius: 6px; background: var(--fl); }
.zitat { margin: 16px 0 0; }
.zitat blockquote { margin: 0; font-style: italic; }
.zitat figcaption { color: var(--tx2); font-size: .85rem; margin-top: 4px; }
.vision {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.vision img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }

/* ---------- Anmeldung ---------- */
.anmeldung { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.anmelde-box {
  width: 100%;
  max-width: 380px;
  background: var(--fl);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 20px;
}
.anmelde-box h1 { margin-bottom: 14px; }
.anmelde-box form { display: flex; flex-direction: column; gap: 12px; }
.anmelde-box label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--tx2); margin-bottom: 8px; }
.anmelde-box input {
  padding: 10px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--bg);
  font-size: 16px;
}
.kopier-label { margin: 12px 0 4px; font-size: .9rem; color: var(--tx2); }
.kopierwert {
  display: block;
  padding: 10px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--bg);
  font: 13px/1.4 ui-monospace, Menlo, monospace;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.fuss { text-align: center; color: var(--tx2); font-size: .8rem; padding: 8px 16px 24px; }