:root {
  --rand: #e0e0e0; --grund: #f6f6f7; --ton: #1e1e1e; --matt: #6b6b6b;
  --leiste: #23262d; --leiste-ton: #c9ccd3; --leiste-hell: #ffffff; --akzent: #4e79a7;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, sans-serif; color: var(--ton); background: var(--grund); }

/* ─── Rahmen: Leiste links, Inhalt rechts ─────────────────────────────── */
#rahmen { display: grid; grid-template-columns: 224px 1fr; height: 100vh; }

aside { background: var(--leiste); color: var(--leiste-ton); display: flex; flex-direction: column; }
.marke { padding: 16px 18px; font-weight: 700; letter-spacing: .04em; color: var(--leiste-hell); }
.marke span { font-weight: 400; opacity: .6; }
aside nav { flex: 1; overflow-y: auto; padding-bottom: 12px; }
aside .gruppe { padding: 14px 18px 4px; font-size: 11px; letter-spacing: .09em;
                text-transform: uppercase; color: #7b8090; }
aside nav a, aside nav .folgt { display: block; padding: 7px 18px; color: var(--leiste-ton);
                                text-decoration: none; border-left: 3px solid transparent; }
aside nav a:hover { background: #2c3038; color: var(--leiste-hell); }
aside nav a[aria-current] { background: #2c3038; color: var(--leiste-hell);
                            border-left-color: var(--akzent); font-weight: 600; }
aside nav .folgt { color: #5c6270; cursor: default; }
aside nav .folgt::after { content: " (folgt)"; font-size: 11px; }
.fuss { border-top: 1px solid #31343c; padding: 10px 18px; display: flex;
        align-items: center; gap: 10px; font-size: 12px; }
.fuss .wer { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuss button { font: inherit; font-size: 12px; padding: 3px 9px; cursor: pointer;
               background: #363a43; color: var(--leiste-ton); border: 1px solid #464b56; }
.fuss button:hover { background: #414651; color: var(--leiste-hell); }

section { display: flex; flex-direction: column; min-width: 0; }
section header { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px;
                 background: #fff; border-bottom: 1px solid var(--rand); }
section header h1 { margin: 0; font-size: 17px; font-weight: 600; }
section header .zahl { color: var(--matt); font-size: 12px; flex: 1; }
section header .verwaltung { color: var(--matt); font-size: 12px; text-decoration: none; }
section header .verwaltung:hover { color: var(--ton); }
#tabelle { flex: 1; min-height: 0; padding: 0 18px 18px; }

/* ─── Anmeldung ───────────────────────────────────────────────────────── */
.anmeldung { max-width: 320px; margin: 12vh auto; display: flex; flex-direction: column;
             gap: 8px; background: #fff; padding: 22px; border: 1px solid var(--rand); }
.anmeldung h2 { margin: 0 0 6px; font-size: 15px; }
.anmeldung input, .anmeldung button { font: inherit; padding: 8px 10px; }
.anmeldung button { cursor: pointer; background: var(--leiste); color: #fff; border: 0; }
.fehler { color: #b00020; margin: 6px 18px; }

@media (max-width: 720px) { #rahmen { grid-template-columns: 1fr; height: auto; } aside { height: auto; } }