/* Kontor — ruhig, dicht, mobil zuerst. Wer den Tag plant, will Ueberblick,
   keine Effekte. */
:root {
  --grund: #f7f7f5; --karte: #ffffff; --rand: #e3e2dd; --text: #1c1b19;
  --leise: #6b6862; --akzent: #2d5f4f; --akzent-hell: #e8f0ec;
  --warn: #a8500f; --warn-hell: #fdf1e6; --gefahr: #99241f; --gefahr-hell: #fbeceb;
  --radius: 8px; --schatten: 0 1px 2px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root { --grund:#17181a; --karte:#1f2124; --rand:#31343a; --text:#e8e6e2;
    --leise:#9a9791; --akzent:#6fb69b; --akzent-hell:#1e2b27;
    --warn:#e0a068; --warn-hell:#2b2119; --gefahr:#e08b85; --gefahr-hell:#2b1c1b; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--grund); color:var(--text); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
.kopf { position:sticky; top:0; z-index:20; background:var(--karte); border-bottom:1px solid var(--rand); }
.kopf-innen { max-width:1100px; margin:0 auto; padding:.6rem 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.marke { font-weight:650; letter-spacing:.02em; color:var(--text); }
.marke span { color: var(--akzent); }
nav { display:flex; gap:.2rem; flex-wrap:wrap; margin-left:auto; }
nav a { padding:.35rem .6rem; border-radius:var(--radius); color:var(--leise); font-size:.9rem; }
nav a.aktiv { background:var(--akzent-hell); color:var(--akzent); font-weight:600; }
main { max-width:1100px; margin:0 auto; padding:1rem; }
h1 { font-size:1.4rem; margin:.2rem 0 1rem; font-weight:650; }
h2 { font-size:1rem; margin:1.6rem 0 .6rem; font-weight:650; }
h2 .zahl { color:var(--leise); font-weight:400; margin-left:.4rem; }
.karte { background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius); box-shadow:var(--schatten); }
.karte + .karte { margin-top:.5rem; }
.block { padding:1rem; }
.zeile { display:flex; align-items:flex-start; gap:.7rem; padding:.6rem .8rem; border-bottom:1px solid var(--rand); }
.zeile:last-child { border-bottom:none; }
.zeile:hover { background:var(--akzent-hell); }
.zeile .haupt { flex:1; min-width:0; }
.zeile .titel { font-weight:500; color:var(--text); display:block; }
.zeile .unter { font-size:.82rem; color:var(--leise); margin-top:.15rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.marker { display:inline-block; font-size:.72rem; padding:.1rem .4rem; border-radius:4px; background:var(--akzent-hell); color:var(--akzent); font-weight:600; }
.marker.warn { background:var(--warn-hell); color:var(--warn); }
.marker.gefahr { background:var(--gefahr-hell); color:var(--gefahr); }
.marker.leise { background:transparent; color:var(--leise); border:1px solid var(--rand); font-weight:500; }
.leer { padding:1rem; color:var(--leise); font-size:.9rem; }
form.schnell { display:flex; gap:.5rem; margin-bottom:1.2rem; }
input, select, textarea, button { font:inherit; color:inherit; }
input[type=text], input[type=email], input[type=search], input[type=date], input[type=datetime-local],
input[type=tel], input[type=number], select, textarea {
  width:100%; padding:.5rem .6rem; border:1px solid var(--rand); border-radius:var(--radius);
  background:var(--karte); }
textarea { min-height:5rem; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--akzent); outline-offset:-1px; }
button, .knopf { padding:.5rem .9rem; border:1px solid var(--rand); border-radius:var(--radius);
  background:var(--karte); cursor:pointer; font-weight:500; }
button:hover, .knopf:hover { border-color:var(--akzent); text-decoration:none; }
button.haupt { background:var(--akzent); color:#fff; border-color:var(--akzent); }
button.klein, .knopf.klein { padding:.25rem .5rem; font-size:.8rem; }
button.gefahr { color:var(--gefahr); }
.gitter { display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.feld { margin-bottom:.8rem; }
.feld label { display:block; font-size:.82rem; color:var(--leise); margin-bottom:.25rem; font-weight:500; }
.feld .hinweis { font-size:.78rem; color:var(--leise); margin-top:.25rem; }
.reihe { display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; }
.reihe > * { flex:1; min-width:140px; }
.meldung { padding:.6rem .8rem; border-radius:var(--radius); margin-bottom:1rem; font-size:.9rem;
  background:var(--akzent-hell); color:var(--akzent); border:1px solid var(--akzent); word-break:break-all; }
.meldung.fehler { background:var(--gefahr-hell); color:var(--gefahr); border-color:var(--gefahr); }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
th { text-align:left; color:var(--leise); font-weight:600; font-size:.78rem; padding:.4rem .6rem;
  border-bottom:1px solid var(--rand); }
td { padding:.45rem .6rem; border-bottom:1px solid var(--rand); vertical-align:top; }
tr:last-child td { border-bottom:none; }
.punkt { width:.55rem; height:.55rem; border-radius:50%; display:inline-block; flex:none; margin-top:.45rem; }
.klein { font-size:.82rem; color:var(--leise); }
details summary { cursor:pointer; padding:.5rem .8rem; color:var(--leise); font-size:.9rem; }
details[open] summary { border-bottom:1px solid var(--rand); }
.aufteilung { display:grid; gap:1rem; grid-template-columns:2fr 1fr; align-items:start; }
@media (max-width:800px){ .aufteilung { grid-template-columns:1fr; } }