:root {
  --bg: #f6f7f9; --karte: #ffffff; --tinte: #1b1f24; --tinte2: #4a5561; --gedaempft: #6b7682;
  --linie: #e2e6ea; --akzent: #2563eb; --akzent-text: #ffffff; --hinweis: #b45309;
  --hinweis-bg: #fdf3e4; --feld: #ffffff; --schatten: 0 1px 2px rgba(20, 30, 40, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181d; --karte: #1c2229; --tinte: #e8ecf0; --tinte2: #b4bdc6; --gedaempft: #8b96a1;
    --linie: #2b333c; --akzent: #6ea8fe; --akzent-text: #0e1620; --hinweis: #f5b25a;
    --hinweis-bg: #2b2418; --feld: #12171c; --schatten: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tinte);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(4.6rem + env(safe-area-inset-bottom));
}
#app { max-width: 46rem; margin: 0 auto; padding: 0 16px; }
h1 { font-size: 1.25rem; margin: 0; }
h2 { font-size: 1.02rem; margin: 0 0 .5rem; }
h3 { font-size: .95rem; margin: 1rem 0 .3rem; }
p { margin: .4rem 0; }
small, .klein { font-size: .82rem; color: var(--gedaempft); }
.kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 14px 0 6px; }
.stand { font-size: .82rem; color: var(--gedaempft); text-align: right; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 14px 16px; margin: 12px 0; box-shadow: var(--schatten); }
.banner { background: var(--hinweis-bg); border: 1px solid var(--hinweis); color: var(--tinte); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.banner a, .link { color: var(--akzent); font-weight: 600; cursor: pointer; text-decoration: underline; }

.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kachel { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; background: var(--karte); }
.kachel .etikett { font-size: .78rem; color: var(--gedaempft); }
.kachel .wert { font-size: 1.45rem; font-weight: 650; line-height: 1.2; }
.kachel .wert small { font-size: .8rem; font-weight: 400; }
.kachel .zusatz { font-size: .78rem; color: var(--tinte2); }
.gross { display: flex; align-items: baseline; gap: .6rem; }
.gross .zahl { font-size: 3rem; font-weight: 700; line-height: 1; }

.nachtwahl { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.nachtwahl .titel { text-align: center; font-weight: 600; }
.nachtwahl button { width: 44px; height: 44px; font-size: 1.3rem; }

button, .btn {
  font: inherit; color: var(--tinte); background: var(--karte); border: 1px solid var(--linie);
  border-radius: 10px; padding: .5rem .9rem; cursor: pointer; min-height: 40px;
}
button:disabled { opacity: .45; cursor: default; }
button.primaer { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); font-weight: 600; }
button.gefahr { color: var(--hinweis); border-color: var(--hinweis); }
.reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reihe.schalter button { flex: 1; min-width: 0; }
.reihe.schalter button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }

label { display: block; font-size: .85rem; color: var(--tinte2); margin: .7rem 0 .2rem; }
input, select, textarea {
  font: inherit; width: 100%; padding: .55rem .65rem; color: var(--tinte); background: var(--feld);
  border: 1px solid var(--linie); border-radius: 10px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: center;
  background: var(--karte); border-top: 1px solid var(--linie);
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
}
.nav div { display: flex; width: 100%; max-width: 46rem; }
.nav a {
  flex: 1; text-align: center; padding: 10px 2px; font-size: .82rem; color: var(--gedaempft);
  text-decoration: none; border-radius: 10px; font-weight: 500;
}
.nav a[aria-current="page"] { color: var(--akzent); font-weight: 700; }

table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { padding: .35rem .4rem; border-bottom: 1px solid var(--linie); text-align: right; vertical-align: top; }
th:first-child, td:first-child { text-align: left; }
th { font-weight: 600; color: var(--tinte2); }
.tabelle-scroll { overflow-x: auto; }

/* Diagramme */
.diagramm .info { min-height: 1.4rem; font-size: .9rem; color: var(--tinte); }
.diagramm svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.diagramm .achse { stroke: var(--linie); stroke-width: 1; }
.diagramm .raster { stroke: var(--linie); stroke-width: 1; opacity: .7; }
.diagramm .ref { stroke: var(--gedaempft); stroke-width: 1.5; stroke-dasharray: 5 4; }
.diagramm text { fill: var(--gedaempft); font-size: 11px; }
.diagramm .balken { fill: var(--akzent); }
.diagramm .balken.warn { fill: var(--hinweis); }
.diagramm .balken.an { stroke: var(--tinte); stroke-width: 1.5; }
.diagramm .treffer { fill: transparent; cursor: pointer; }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--tinte2); margin-top: 4px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--akzent); }
.legende i.w { background: var(--hinweis); }
.legende i.r { background: none; border-top: 2px dashed var(--gedaempft); height: 0; width: 16px; border-radius: 0; vertical-align: 3px; }
details { margin-top: .5rem; }
summary { cursor: pointer; color: var(--tinte2); font-size: .88rem; }

.muster { border-left: 3px solid var(--linie); padding: 2px 0 2px 12px; margin: 12px 0; }
.muster h3 { margin: 0 0 .2rem; }
.muster .l { font-size: .78rem; color: var(--gedaempft); text-transform: uppercase; letter-spacing: .03em; margin-top: .4rem; }
ul.sauber { margin: .3rem 0; padding-left: 1.15rem; }
ul.sauber li { margin: .25rem 0; }
.merksatz { font-size: .85rem; color: var(--tinte2); }

/* Chat */
.chat { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.blase { max-width: 88%; padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.blase.ich { align-self: flex-end; background: var(--akzent); color: var(--akzent-text); }
.blase.claude { align-self: flex-start; background: var(--karte); border: 1px solid var(--linie); }
.blase.fehler { align-self: flex-start; background: var(--hinweis-bg); border: 1px solid var(--hinweis); }
.eingabe { position: sticky; bottom: calc(4.6rem + env(safe-area-inset-bottom)); background: var(--bg); padding: 8px 0; display: flex; gap: 8px; }
.eingabe textarea { flex: 1; resize: none; min-height: 44px; max-height: 8rem; }
.vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; }
.vorschlaege button { font-size: .88rem; }

.login { max-width: 22rem; margin: 18vh auto 0; }
.leer { color: var(--gedaempft); text-align: center; padding: 2rem 0; }
.fehler-text { color: var(--hinweis); }
.ok-text { color: var(--tinte); }
.pw-anzeige { font: 600 1.1rem ui-monospace, Menlo, Consolas, monospace; background: var(--bg); padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--linie); display: inline-block; }

/* Bericht / Druck */
.bericht h1 { margin-bottom: .2rem; }
@media print {
  body { background: #fff; color: #000; padding: 0; }
  .nav, .kopf .stand, .keinen-druck, .banner { display: none !important; }
  .karte { box-shadow: none; border-color: #999; break-inside: avoid; }
  #app { max-width: none; padding: 0; }
}

/* Nachtkurven */
.diagramm .linie { fill: none; stroke: var(--akzent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.diagramm .punkt { fill: var(--akzent); }
.diagramm .cursor { stroke: var(--tinte2); stroke-width: 1; }
.diagramm .sitzband { fill: var(--akzent); opacity: .55; }
.diagramm .marke { fill: var(--akzent); }
.blase.wartet { align-self: flex-start; background: none; border: 1px dashed var(--linie); color: var(--gedaempft); font-size: .88rem; }
.blase-zeit { margin-top: 2px; opacity: .8; color: inherit; }
.blase.ich .blase-zeit { color: var(--akzent-text); }