:root {
  --primary: #164194; --primary-deep: #0d2a5c; --accent: #f0f5ff; --gray: #f5f7fa;
  --text: #1a1a1a; --slate: #5a6477; --line: #e0e6ed;
  --ok: #1e7e34; --ok-bg: #e6f4ea; --warn: #b8860b; --warn-bg: #fff6dd; --bad: #c0392b;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; color: var(--text); background: var(--gray); line-height: 1.55; }
a { color: var(--primary); }
header.kopf { background: var(--primary); color: #fff; }
header.kopf .innen { max-width: 1080px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; }
header.kopf a { color: #fff; text-decoration: none; }
header.kopf .marke { font-weight: 800; letter-spacing: -.01em; }
header.kopf .marke span { font-weight: 400; opacity: .75; }
header.kopf .rechts { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 14px; }
header.kopf form { margin: 0; }
main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 80px; }
h1 { color: var(--primary-deep); font-size: 32px; line-height: 1.15; margin: 0 0 6px; letter-spacing: -.02em; }
.unter { color: var(--slate); margin: 0 0 24px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.leiste { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.knopf { display: inline-block; border: 1px solid var(--primary); background: #fff; color: var(--primary); padding: 7px 14px;
         border-radius: 6px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.knopf.voll { background: var(--primary); color: #fff; }
.knopf.hell { border-color: rgba(255,255,255,.6); background: transparent; color: #fff; }
.meldung { background: var(--accent); border-left: 4px solid var(--primary); padding: 10px 14px; margin: 0 0 20px; border-radius: 4px; }
.meldung.fehler { background: #fdecea; border-color: var(--bad); }
section.abschnitt { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 18px; overflow: hidden; }
section.abschnitt h2 { margin: 0; padding: 12px 18px; font-size: 18px; color: var(--primary-deep); border-bottom: 1px solid var(--line); background: #fbfcfe; }
ul.eintraege { list-style: none; margin: 0; padding: 0; }
ul.eintraege li { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
ul.eintraege li:last-child { border-bottom: 0; }
.art { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate);
       border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; min-width: 64px; text-align: center; flex: none; }
.titel { flex: 1; min-width: 0; }
.titel a { font-weight: 600; text-decoration: none; }
.titel a:hover { text-decoration: underline; }
.titel .hinweis { display: block; color: var(--slate); font-size: 14px; }
li.gesperrt .titel a { color: var(--slate); font-weight: 400; }
.marke-trainer { font-size: 12px; color: var(--warn); font-weight: 700; }
.marke-offen { font-size: 12px; color: var(--ok); font-weight: 700; }
.schalter { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit;
            font-size: 13px; font-weight: 700; cursor: pointer; color: var(--slate); min-width: 118px; }
.schalter.frei { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.leer { color: var(--slate); background: #fff; border: 1px dashed var(--line); border-radius: 10px; padding: 28px; text-align: center; }
.karte { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 32px 28px; }
.karte h1 { margin-top: 20px; }
.karte pre { background: #0d2a5c; color: #f0f5ff; padding: 12px 16px; border-radius: 6px; overflow-x: auto; font-size: 14px; }
.karte code { font-family: var(--mono); font-size: .92em; }
.karte :not(pre) > code { background: var(--accent); padding: 1px 5px; border-radius: 3px; color: var(--primary-deep); }
.karte table { border-collapse: collapse; margin: 12px 0; }
.karte th, .karte td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.karte details { border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px; margin: 10px 0; background: #fbfcfe; }
.karte summary { cursor: pointer; font-weight: 600; color: var(--primary-deep); }
.anmeldung { max-width: 420px; margin: 12vh auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 32px; }
.anmeldung input[type=password] { width: 100%; font: inherit; font-size: 20px; padding: 10px 12px; border: 1px solid var(--line);
                                  border-radius: 6px; margin: 8px 0 16px; letter-spacing: .08em; }
table.board { border-collapse: separate; border-spacing: 4px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
table.board th { font-family: var(--mono); font-size: 12px; color: var(--slate); padding: 4px 8px; text-align: center; }
table.board th.name { text-align: left; }
table.board td.name { font-weight: 600; padding: 4px 12px 4px 4px; white-space: nowrap; }
table.board td.zelle { min-width: 70px; text-align: center; border-radius: 6px; padding: 6px 4px; font-size: 14px; font-weight: 700; cursor: default; }
td.zelle.gruen { background: var(--ok-bg); color: var(--ok); }
td.zelle.teil { background: var(--warn-bg); color: var(--warn); }
td.zelle.leer { background: var(--gray); color: #b6bfcc; }
td.zelle small { display: block; font-weight: 400; font-size: 11px; color: var(--slate); }
td.zelle.zaeh { outline: 2px solid var(--bad); }
.legende { color: var(--slate); font-size: 14px; margin-top: 14px; }
@media (max-width: 640px) {
  ul.eintraege li { flex-wrap: wrap; }
  .karte { padding: 4px 16px 20px; }
  .board-huelle { overflow-x: auto; }
}