@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/static/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/static/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/static/fonts/inter-600.woff2') format('woff2'); }
:root {
  --c-bg:#f3eee4; --c-surface:#fdfbf6; --c-border:#ddd5c5; --c-text:#15243b; --c-text-muted:#51607a;
  --c-accent:#1b3a6b; --c-accent-ink:#15305a; --c-accent-bg:#e6ebf4; --c-on-accent:#fdfbf6;
  --c-amber:#9a5b06; --c-amber-line:#d9941c; --c-ok-ink:#1f6b3a; --c-ok-bg:#e1f0e4; --c-err-ink:#a3281e; --c-err-bg:#f8e2de;
  --r:14px; --schatten:0 1px 2px rgba(21,36,59,.06), 0 8px 24px rgba(21,36,59,.06);
}
@media (prefers-color-scheme: dark) { :root {
  --c-bg:#0f1623; --c-surface:#172030; --c-border:#2f3c52; --c-text:#ece5d6; --c-text-muted:#b4bccb;
  --c-accent:#c9d7ef; --c-accent-ink:#dfe8f7; --c-accent-bg:#243249; --c-on-accent:#0f1623;
  --c-amber:#f0b454; --c-amber-line:#e0a23a; --c-ok-ink:#8fd3a4; --c-ok-bg:#173122; --c-err-ink:#f3a79c; --c-err-bg:#43201b;
  --schatten:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--c-bg); color:var(--c-text); font:16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--c-accent); }
.kopf { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:calc(12px + env(safe-area-inset-top)) 20px 12px;
  border-bottom:1px solid var(--c-border); background:var(--c-surface); position:sticky; top:0; }
.marke { text-decoration:none; color:var(--c-text); font-weight:600; font-size:22px; letter-spacing:-.01em; display:inline-flex; align-items:baseline; }
.marke-2 { color:var(--c-amber-line); font-size:16px; position:relative; top:-8px; margin-right:6px; }
.marke-text { font-weight:400; color:var(--c-text-muted); font-size:16px; }
.nav { display:flex; gap:18px; align-items:center; flex-wrap:wrap; font-size:15px; }
.nav a { text-decoration:none; color:var(--c-text-muted); } .nav a:hover { color:var(--c-accent); }
.inline { display:inline; }
button.link { background:none; border:0; padding:0; font:inherit; color:var(--c-text-muted); cursor:pointer; } button.link:hover { color:var(--c-accent); }
.inhalt { max-width:1100px; margin:0 auto; padding:28px 16px 48px; }
h1 { font-size:24px; font-weight:600; letter-spacing:-.01em; margin:0 0 16px; }
.begruessung { font-size:20px; font-weight:500; color:var(--c-text-muted); margin-bottom:22px; }
.kacheln { list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.kacheln li { display:flex; }
.kachel { flex:1; }
.kachel { display:flex; flex-direction:column; gap:6px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r);
  padding:20px; min-height:150px; text-decoration:none; color:var(--c-text); box-shadow:var(--schatten); transition:transform .12s, border-color .12s; }
.kachel:hover, .kachel:focus-visible { transform:translateY(-2px); border-color:var(--c-accent); outline:none; }
.kachel-kurz { width:44px; height:44px; border-radius:11px; background:var(--c-accent); color:var(--c-on-accent); display:grid; place-items:center;
  font-weight:600; font-size:15px; letter-spacing:.04em; margin-bottom:8px; }
.kachel-name { font-weight:600; font-size:18px; }
.kachel-text { color:var(--c-text-muted); font-size:14px; line-height:1.4; }
.karte { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r); padding:28px; box-shadow:var(--schatten); }
.karte-login { max-width:420px; margin:40px auto; } .karte-form { max-width:640px; margin:0 auto; }
label { display:block; font-size:14px; font-weight:500; color:var(--c-text-muted); margin:14px 0 6px; }
input:not([type=checkbox]), select { width:100%; font:inherit; padding:11px 12px; border:1px solid var(--c-border); border-radius:10px; background:var(--c-bg); color:var(--c-text); }
input:focus, select:focus { outline:2px solid var(--c-amber-line); outline-offset:1px; border-color:var(--c-amber-line); }
fieldset { border:1px solid var(--c-border); border-radius:10px; padding:10px 14px 14px; margin:18px 0 0; }
legend { font-size:14px; font-weight:500; color:var(--c-text-muted); padding:0 6px; }
label.check { display:flex; gap:10px; align-items:center; font-size:15px; color:var(--c-text); margin:8px 0; font-weight:400; }
label.check input { width:18px; height:18px; accent-color:var(--c-accent); }
label.check small { color:var(--c-text-muted); }
button.primaer, .knopf { display:inline-block; margin-top:22px; font:inherit; font-weight:500; padding:11px 18px; border-radius:10px; border:1px solid var(--c-accent);
  background:var(--c-accent); color:var(--c-on-accent); cursor:pointer; text-decoration:none; }
button.primaer:hover, .knopf:hover { background:var(--c-accent-ink); border-color:var(--c-accent-ink); }
.knopf.sekundaer { background:transparent; color:var(--c-accent); margin-left:10px; }
.meldung { padding:10px 14px; border-radius:10px; background:var(--c-accent-bg); color:var(--c-accent-ink); margin:0 0 14px; font-size:15px; }
.meldung.fehler { background:var(--c-err-bg); color:var(--c-err-ink); } .meldung.ok { background:var(--c-ok-bg); color:var(--c-ok-ink); }
.hinweis { color:var(--c-text-muted); font-size:14px; margin:8px 0 0; }
.zeile-kopf { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.zeile-kopf .knopf { margin-top:0; }
.tabelle { width:100%; border-collapse:collapse; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r); overflow:hidden; font-size:15px; }
.tabelle th, .tabelle td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--c-border); }
.tabelle th { font-weight:500; color:var(--c-text-muted); font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.tabelle tr.inaktiv td { color:var(--c-text-muted); }
@media (max-width: 640px) {
  .kacheln { grid-template-columns:repeat(2, 1fr); gap:12px; }
  .kachel { padding:14px; min-height:0; gap:4px; }
  .kachel-kurz { width:36px; height:36px; font-size:13px; margin-bottom:4px; }
  .kachel-name { font-size:16px; } .kachel-text { font-size:13px; }
  .begruessung { font-size:18px; margin-bottom:16px; } .inhalt { padding-top:18px; }
  .kopf { padding-left:16px; padding-right:16px; } .nav { gap:12px; font-size:14px; }
  .tabelle thead { display:none; } .tabelle tr { display:block; padding:8px 0; } .tabelle td { display:block; border:0; padding:3px 12px; }
  .karte { padding:20px; } .karte-login { margin:16px auto; }
}