/* Farben und Schriften wie haasgfa.de. Die Schriften liegen auf dem eigenen Server, es geht nichts an Dritte. */
@font-face { font-family:"DM Sans"; font-weight:400; font-display:swap; src:url(schrift/dm-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"DM Sans"; font-weight:500; font-display:swap; src:url(schrift/dm-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family:"DM Sans"; font-weight:700; font-display:swap; src:url(schrift/dm-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family:"Manrope"; font-weight:700; font-display:swap; src:url(schrift/manrope-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family:"Manrope"; font-weight:800; font-display:swap; src:url(schrift/manrope-latin-800-normal.woff2) format("woff2"); }

:root {
  --marine:#092436; --tinte:#102d3e; --grau:#486270; --linie:#e1e8ec; --zart:#eef3f5; --flaeche:#fbfcfa; --weiss:#fff;
  --akzent:#2f82c6; --akzent-dunkel:#1f6299; --akzent-zart:#e8f3fa; --warn:#8f4c08; --warnbg:#fdf3e4; --rot:#a32121; --rotbg:#fbeaea;
  --schatten:0 1px 2px rgba(16,45,62,.05), 0 8px 24px rgba(16,45,62,.06);
  --titel:"Manrope","DM Sans",system-ui,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--tinte); font:15px/1.55 "DM Sans",-apple-system,system-ui,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased;
  background:var(--flaeche) linear-gradient(180deg,#e9f4fb 0,#f3f9fb 240px,var(--flaeche) 520px) no-repeat; }

header { position:sticky; top:0; z-index:10; background:rgba(251,252,250,.93); backdrop-filter:blur(10px); border-bottom:1px solid var(--linie); border-top:4px solid var(--marine);
  display:flex; align-items:center; gap:26px; padding:8px 26px; flex-wrap:wrap; }
.marke { display:flex; align-items:center; gap:10px; text-decoration:none; }
.marke img { height:38px; width:auto; display:block; }
nav { display:flex; gap:2px; flex:1; flex-wrap:wrap; }
nav a { color:var(--grau); font-size:13.5px; font-weight:500; text-decoration:none; padding:7px 10px; border-radius:5px; white-space:nowrap; transition:color .12s,background .12s; }
nav a:hover { color:var(--akzent-dunkel); background:var(--akzent-zart); }
nav a[aria-current=page] { color:var(--akzent-dunkel); background:var(--akzent-zart); font-weight:700; }
.wer { color:var(--grau); font-size:13px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.wer a { color:var(--grau); }
.wer button.zweit { padding:5px 10px; font-size:13px; }

main { max-width:1180px; margin:30px auto 56px; padding:0 20px; }
h1 { font-family:var(--titel); font-size:29px; font-weight:800; line-height:1.2; letter-spacing:-.6px; margin:0 0 18px; color:var(--tinte); }
h2 { font-family:var(--titel); font-size:17px; font-weight:700; letter-spacing:-.2px; margin:0 0 12px; }
.karte { background:var(--weiss); border:1px solid var(--linie); border-radius:14px; padding:20px 22px; margin-bottom:20px; 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:700; color:var(--grau); font-size:12px; letter-spacing:.3px; border-bottom:2px solid var(--linie); padding:8px 10px; white-space:nowrap; }
td { border-bottom:1px solid var(--zart); padding:10px; vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tr:hover > td { background:#f6fafc; }
td.z, th.z { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.summe td { font-weight:700; border-top:2px solid var(--linie); }

a { color:var(--akzent-dunkel); }
a:hover { color:var(--akzent); }
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:9px 11px; border:1px solid #c4d0d8; border-radius:6px; 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(47,130,198,.18); }
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:5px; padding:9px 16px; font:inherit; font-size:14px; font-weight:700; 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(47,130,198,.35); outline-offset:2px; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.zweit,.knopf.zweit { background:#fff; color:var(--akzent-dunkel); border-color:#b9d3e6; }
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:6px; margin-bottom:14px; }
.hinweis a { color:var(--warn); font-weight:700; }
.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:6px; margin-bottom:14px; }
.klein { color:var(--grau); font-size:13px; }
.mitte { max-width:420px; margin:0 auto 20px; padding:30px 32px; }
.anmeldelogo { display:block; width:210px; max-width:80%; margin:6px auto 22px; }
.mitte h1 { text-align:center; font-size:26px; }
.mitte button:not(.zweit) { width:100%; margin-top:6px; padding:11px 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:18px; padding:0 12px; }
  .karte { padding:14px; }
}
@media print {
  header,.zeile,button,.knopf { display:none; }
  body { background:#fff; }
  .karte { box-shadow:none; }
}
.ampel { display:inline-block; padding:1px 8px; border-radius:9px; font-size:12px; font-weight:700; color:#fff; background:#2e7d4f; }
.ampel.gelb { background:#b7791f; } .ampel.rot { background:var(--rot); }
details.info { margin-top:4px; }
details.info summary { cursor:pointer; list-style:none; color:var(--akzent-dunkel); font-size:13px; }
details.info summary::-webkit-details-marker { display:none; }
details.info summary span { display:inline-block; width:18px; height:18px; line-height:18px; text-align:center; border-radius:50%; background:var(--akzent-zart); font-weight:700; }
details.info > div { margin-top:6px; padding:10px 12px; background:var(--zart); border-radius:8px; font-size:13px; font-weight:400; min-width:260px; }
details.info.breit { margin-bottom:14px; }
.ansicht { display:flex; gap:2px; margin:0; }
.ansicht button { padding:5px 10px; font-size:13px; }
body.gbr { --marine:#12352a; --tinte:#173a2e; --grau:#4a665a; --linie:#dbe9e1; --zart:#eaf4ee; --flaeche:#f6fbf8; --akzent:#2e7d5b; --akzent-dunkel:#1f5c43; --akzent-zart:#dff0e7; }
body.gbr header { background:#1f5c43; border-bottom-color:#1f5c43; }
body.gbr nav a, body.gbr .wer, body.gbr .wer a { color:#e9f5ee; }
body.gbr nav a:hover, body.gbr nav a[aria-current=page] { color:#fff; background:rgba(255,255,255,.16); }
.marke-gbr { font-family:var(--titel); font-weight:800; font-size:17px; color:#fff; white-space:nowrap; }
details.klapp summary { cursor:pointer; font-family:var(--titel); font-size:17px; font-weight:700; color:var(--tinte); }
details.klapp[open] summary { margin-bottom:12px; }
nav a span, details.menue summary span { margin-right:6px; }
details.menue { position:relative; }
details.menue summary { cursor:pointer; list-style:none; color:var(--grau); font-size:13.5px; font-weight:500; padding:7px 10px; border-radius:5px; white-space:nowrap; }
details.menue summary::-webkit-details-marker { display:none; }
details.menue summary::after { content:' ▾'; font-size:11px; }
details.menue summary:hover, details.menue summary.aktiv, details.menue[open] summary { color:var(--akzent-dunkel); background:var(--akzent-zart); }
details.menue > div { position:absolute; z-index:20; top:100%; left:0; min-width:200px; margin-top:4px; padding:6px; display:flex; flex-direction:column; gap:2px; background:var(--weiss); border:1px solid var(--linie); border-radius:10px; box-shadow:var(--schatten); }
body.gbr details.menue summary { color:#e9f5ee; }
body.gbr details.menue summary:hover, body.gbr details.menue summary.aktiv, body.gbr details.menue[open] summary { color:#fff; background:rgba(255,255,255,.16); }
body.gbr details.menue > div a { color:var(--tinte); }
.ampel:not(.rot):not(.gelb):empty { display:none; }