/* Digita Mondo — Farben und Schriften */
:root{
  --navy:#0d1f4e; --primary:#114b5f; --secondary:#69b14f; --accent:#fe6838;
  --grau:#666666; --linie:#c9c6c4; --bg:#ffffff; --bg-subtle:#f7f6f5;
  --titel:Cambria,Georgia,serif;
  --text:Corbel,Arial,"Liberation Sans",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#000;font-family:var(--text);font-size:11pt;line-height:1.4}
.rahmen{max-width:760px;margin:0 auto;padding:18px 16px 40px}
.kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
      border-bottom:1px solid var(--primary);padding:10px 0;margin-bottom:18px;
      position:sticky;top:0;z-index:30;background:#fff}
@media (max-width:520px){ .kopf .wer{display:none} }
.wortmarke{font-family:var(--titel);font-size:21px;color:var(--navy)}
.wer{font-size:10pt;color:var(--grau);flex:1}
h1{font-family:var(--titel);font-size:26px;color:var(--primary);
   border-bottom:2px solid var(--primary);display:inline-block;padding-bottom:2px;margin:0 0 14px}
h2{font-family:var(--text);font-variant:small-caps;font-size:14pt;color:var(--primary);
   border-bottom:1px dotted #000;margin:26px 0 10px}
fieldset{border:1px solid var(--linie);margin:0 0 14px;padding:12px 14px}
legend{font-variant:small-caps;color:var(--primary);padding:0 6px}
label{display:block;margin-bottom:10px;font-variant:small-caps;font-size:10pt;color:var(--grau)}
input[type=text],input[type=email],input[type=password]{
  display:block;width:100%;margin-top:3px;padding:8px 9px;border:1px solid var(--linie);
  border-radius:2px;font-family:var(--text);font-size:11pt;color:#000;background:var(--bg-subtle)}
input:focus,button:focus,a.knopf:focus{outline:2px solid var(--accent);outline-offset:2px}
.knopf,button{display:inline-block;font-family:var(--text);font-size:10pt;font-variant:small-caps;
  letter-spacing:.03em;padding:7px 14px;border:1px solid var(--primary);color:var(--primary);
  background:transparent;border-radius:2px;cursor:pointer;text-decoration:none}
.knopf.stark,button.stark{background:var(--primary);color:#fff}
.meldung{padding:9px 11px;border-left:4px solid var(--grau);background:var(--bg-subtle);margin:0 0 14px}
.meldung.fehler{border-color:var(--accent)}
.meldung.warnung{border-color:#f5c832}
.meldung.gut{border-color:var(--secondary)}
.liste{padding-left:18px;margin:0 0 14px}
.liste li{margin-bottom:5px}
.klein{font-size:10pt;color:var(--grau)}
code{font-family:ui-monospace,Consolas,monospace;font-size:10pt;background:var(--bg-subtle);padding:1px 4px}
.fuss{border-top:1px solid var(--linie);margin-top:28px;padding-top:10px;font-size:9.5pt;color:var(--grau)}
.codes{list-style:none;padding:0;display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.codes li{font-family:ui-monospace,Consolas,monospace;font-size:12pt;letter-spacing:.06em;
  border:1px solid var(--linie);background:var(--bg-subtle);padding:6px 8px;text-align:center}
code.gross{display:inline-block;font-size:12pt;letter-spacing:.12em;padding:6px 9px;word-break:break-all}
select{display:block;width:100%;margin-top:3px;padding:8px 9px;border:1px solid var(--linie);
  border-radius:2px;background:var(--bg-subtle);font-family:var(--text);font-size:11pt}
img{max-width:100%;height:auto}
.regal{border:1px solid var(--linie);padding:10px 12px;margin-bottom:10px;background:var(--bg-subtle)}
.regal-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.zeile{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.zeile form{margin:0}
.zeile input[type=text]{width:auto;margin-top:0}
.zeile label{margin-bottom:0}

/* Navigation */
.kopf .wortmarke{text-decoration:none}
.menugruppe{min-width:200px}
.regalgitter{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-bottom:14px}
.regalkarte{border:1px solid var(--linie);background:var(--bg-subtle);padding:10px 12px}
.regaltitel{font-family:var(--titel);font-size:15pt;color:var(--primary);text-decoration:none;display:block}
.regaltitel:hover{text-decoration:underline}
.verlauf{list-style:none;padding:0;margin:0 0 14px}
.verlauf li{border-bottom:1px dotted var(--linie);padding:5px 0}
.fussnote{font-size:9.5pt;color:var(--grau);border-top:1px solid var(--linie);padding-top:10px;margin-top:22px}
.kopfzeile{margin:0 0 12px}
.verlaufstabelle{width:100%;border-collapse:collapse;font-size:10.5pt}
.verlaufstabelle th{text-align:left;font-variant:small-caps;color:var(--primary);
  border-bottom:1px solid var(--primary);padding:5px 8px 5px 0}
.verlaufstabelle td{border-bottom:1px dotted var(--linie);padding:5px 8px 5px 0;vertical-align:top}

/* ------------------------- Navigation als Schublade ------------------- */
.menuknopf{font-size:15pt;line-height:1;padding:3px 11px;border:1px solid var(--primary);
  background:transparent;color:var(--primary);cursor:pointer;border-radius:2px}
.menuhinter{position:fixed;inset:0;background:rgba(13,31,78,.45);z-index:40;opacity:0;
  transition:opacity .2s ease}
.menuhinter.offen{opacity:1}
.schublade{position:fixed;top:0;left:0;bottom:0;width:290px;max-width:86vw;z-index:41;
  background:#fff;border-right:3px solid var(--primary);box-shadow:2px 0 18px rgba(0,0,0,.18);
  overflow-y:auto;padding:0 0 20px;transform:translateX(-102%);transition:transform .22s ease}
.schublade.offen{transform:translateX(0)}
body.menu-offen{overflow:hidden}
.schubladenkopf{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;background:var(--navy);color:#fff;position:sticky;top:0}
.schubladenkopf .wortmarke{color:#fff;font-size:19px}
.menuzu{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;
  font-size:12pt;line-height:1;padding:3px 9px;cursor:pointer;border-radius:2px}
.schubladenperson{padding:10px 16px;border-bottom:1px solid var(--linie);color:var(--grau);
  font-size:10pt;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.marke{background:var(--secondary);color:#fff;font-size:8.5pt;font-variant:small-caps;
  padding:1px 7px;border-radius:9px;letter-spacing:.04em}
.menupunkt{display:flex;align-items:center;gap:11px;padding:10px 16px;color:var(--navy);
  text-decoration:none;border-left:3px solid transparent}
.menupunkt:hover,.menupunkt:focus{background:var(--bg-subtle);border-left-color:var(--secondary)}
.menupunkt.hier{background:var(--bg-subtle);border-left-color:var(--primary);font-weight:700;
  color:var(--primary)}
.menuzeichen{width:18px;text-align:center;color:var(--primary);flex:0 0 auto}
.menutext{flex:1;line-height:1.25}
.menuzahl{font-size:9pt;color:var(--grau);background:var(--bg-subtle);border:1px solid var(--linie);
  border-radius:9px;padding:0 7px}
.menubereich summary{display:flex;align-items:center;gap:11px;padding:10px 16px;cursor:pointer;
  font-variant:small-caps;color:var(--primary);border-left:3px solid transparent;list-style:none}
.menubereich summary::-webkit-details-marker{display:none}
.menubereich summary:hover{background:var(--bg-subtle)}
.menubereich[open] summary{border-bottom:1px dotted var(--linie)}
.menubereich .menupunkt{padding-left:32px;font-size:10.5pt}
.menuleer{display:block;padding:8px 32px;color:var(--grau);font-size:10pt}
.menutrenner{height:1px;background:var(--linie);margin:8px 16px}

/* ------------------------------ Startseite ---------------------------- */
.begruessung{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.kennzahlen{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:16px 0 22px}
.kennzahl{border:1px solid var(--linie);border-top:4px solid var(--primary);background:#fff;
  padding:12px 14px}
.kennzahl .wert{font-family:var(--titel);font-size:30px;line-height:1;color:var(--navy)}
.kennzahl .schild{font-variant:small-caps;font-size:10pt;color:var(--grau);margin-top:4px;display:block}
.kennzahl.gruen{border-top-color:var(--secondary)}
.kennzahl.orange{border-top-color:var(--accent)}
.kennzahl.gelb{border-top-color:#f5c832}
.kennzahl.tuerkis{border-top-color:#2b9ea0}
.tafeln{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:22px}
.tafel{border:1px solid var(--linie);background:#fff;padding:14px 16px}
.tafel h2{margin-top:0}
.ringzeile{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ringtext{font-size:10.5pt;color:var(--grau);flex:1;min-width:150px}
.saeule{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.saeulenname{width:34%;font-size:10.5pt;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saeulenbalken{flex:1;height:14px;background:var(--bg-subtle);border:1px solid var(--linie)}
.saeulenbalken i{display:block;height:100%}
.saeulenzahl{font-size:10pt;color:var(--grau);width:62px;text-align:right}
.spielliste{list-style:none;padding:0;margin:0}
.spielliste li{padding:6px 0;border-bottom:1px dotted var(--linie);font-size:10.5pt}
.spielliste li:last-child{border-bottom:none}
.spielliste b{color:var(--primary)}