:root {
  --tinte:#17242c; --grau:#5b6a75; --linie:#dde4e9; --zart:#eef2f5; --flaeche:#f3f6f8; --weiss:#fff;
  --akzent:#0e6474; --akzent-dunkel:#0a4c59; --akzent-zart:#e3f0f2; --warn:#8f4c08; --warnbg:#fdf3e4; --rot:#a32121; --rotbg:#fbeaea;
  --schatten:0 1px 2px rgba(23,36,44,.06), 0 4px 14px rgba(23,36,44,.05);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--flaeche); color:var(--tinte); font:15px/1.5 "Segoe UI",system-ui,-apple-system,Arial,sans-serif; -webkit-font-smoothing:antialiased; }

header { position:sticky; top:0; z-index:10; background:var(--akzent-dunkel); color:#fff; display:flex; align-items:center; gap:24px; padding:0 22px; min-height:54px; flex-wrap:wrap; box-shadow:0 1px 4px rgba(23,36,44,.2); }
header strong { font-size:16px; font-weight:600; letter-spacing:.2px; white-space:nowrap; }
nav { display:flex; gap:2px; flex:1; flex-wrap:wrap; }
nav a { color:#d6e8ec; text-decoration:none; padding:7px 11px; border-radius:6px; font-size:14px; white-space:nowrap; transition:background .12s,color .12s; }
nav a:hover { background:rgba(255,255,255,.12); color:#fff; }
nav a[aria-current=page] { background:rgba(255,255,255,.18); color:#fff; font-weight:600; }
.wer { color:#d6e8ec; font-size:13px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:6px 0; }
.wer a { color:#fff; }
.wer button.zweit { background:transparent; color:#fff; border-color:rgba(255,255,255,.55); padding:4px 10px; font-size:13px; }
.wer button.zweit:hover { background:rgba(255,255,255,.12); }

main { max-width:1180px; margin:26px auto 48px; padding:0 18px; }
h1 { font-size:24px; font-weight:650; line-height:1.25; margin:0 0 16px; letter-spacing:-.2px; }
h2 { font-size:16px; font-weight:650; margin:0 0 12px; }
.karte { background:var(--weiss); border:1px solid var(--linie); border-radius:10px; padding:18px 20px; margin-bottom:18px; overflow-x:auto; box-shadow:var(--schatten); }
.karte > :last-child { margin-bottom:0; }

table { border-collapse:collapse; width:100%; }
th { text-align:left; font-weight:600; color:var(--grau); font-size:12.5px; border-bottom:2px solid var(--linie); padding:8px 10px; white-space:nowrap; }
td { border-bottom:1px solid var(--zart); padding:9px 10px; vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tbody tr:hover td, tr:hover > td { background:#f8fafb; }
td.z, th.z { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.summe td { font-weight:650; border-top:2px solid var(--linie); }

a { color:var(--akzent); }
a:hover { color:var(--akzent-dunkel); }
label { display:block; font-size:13px; font-weight:500; color:var(--grau); margin-bottom:12px; }
input[type=text],input[type=password],input[type=date],input[type=month],input[type=search],select,textarea {
  display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid #bcc7cf; border-radius:7px; font:inherit; font-weight:400; color:var(--tinte); background:#fff; transition:border-color .12s,box-shadow .12s;
}
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--akzent); box-shadow:0 0 0 3px rgba(14,100,116,.16); }
textarea { min-height:110px; resize:vertical; }
input[type=checkbox],input[type=radio] { margin-right:7px; accent-color:var(--akzent); width:16px; height:16px; vertical-align:-3px; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
fieldset:disabled input,fieldset:disabled select,fieldset:disabled textarea { background:var(--flaeche); color:var(--grau); }

button,.knopf { display:inline-block; background:var(--akzent); color:#fff; border:1px solid var(--akzent); border-radius:7px; padding:8px 15px; font:inherit; font-weight:550; line-height:1.3; cursor:pointer; text-decoration:none; transition:background .12s,border-color .12s,color .12s; }
button:hover,.knopf:hover { background:var(--akzent-dunkel); border-color:var(--akzent-dunkel); color:#fff; }
button:focus-visible,.knopf:focus-visible,a:focus-visible { outline:3px solid rgba(14,100,116,.35); outline-offset:2px; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.zweit,.knopf.zweit { background:#fff; color:var(--akzent); border-color:#a9c4cb; }
button.zweit:hover,.knopf.zweit:hover { background:var(--akzent-zart); color:var(--akzent-dunkel); border-color:var(--akzent); }
button.gefahr { background:#fff; color:var(--rot); border-color:#e0b4b4; }
button.gefahr:hover { background:var(--rotbg); color:var(--rot); border-color:var(--rot); }

.raster { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 18px; }
.zeile { display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin-bottom:14px; }
.zeile label { margin:0; }
.hinweis { background:var(--warnbg); color:var(--warn); padding:10px 14px; border-left:4px solid #e0a458; border-radius:7px; margin-bottom:14px; }
.hinweis a { color:var(--warn); font-weight:600; }
.test { background:var(--warnbg); color:var(--warn); text-align:center; padding:5px; font-size:13px; }
.meldung { background:var(--akzent-zart); color:var(--akzent-dunkel); padding:10px 14px; border-left:4px solid var(--akzent); border-radius:7px; margin-bottom:14px; }
.klein { color:var(--grau); font-size:13px; }
.mitte { max-width:400px; margin:9vh auto 0; padding:28px 30px; }
.mitte h1 { text-align:center; color:var(--akzent-dunkel); }
.mitte button { width:100%; margin-top:6px; padding:10px 15px; }
.inline { display:inline; }

@media (max-width:760px) {
  header { position:static; padding:8px 14px; gap:6px; }
  nav { flex-basis:100%; overflow-x:auto; flex-wrap:nowrap; }
  main { margin-top:16px; padding:0 12px; }
  .karte { padding:14px; }
}
@media print {
  header,.zeile,button,.knopf { display:none; }
  body { background:#fff; }
  .karte { box-shadow:none; }
}