/* Portal-Optik wie die Klick-Demo: Navy, Violett, Magenta, Inter */
@font-face{font-family:Inter;src:url(inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{--navy:#1a2b4a;--violett:#5a2d82;--magenta:#d42d6e;--magenta-hell:#fdf0f5;--violett-hell:#f0f0ff;
  --grund:#f1f5f9;--flaeche:#fff;--text:#1e293b;--text2:#475569;--grau:#64748b;--linie:#e2e8f0;--zeile:#f8fafc;
  --gruen:#059669;--verlauf:linear-gradient(135deg,#1a2b4a 0%,#5a2d82 50%,#d42d6e 100%)}
body{font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--grund);min-height:100vh;font-size:14px;-webkit-font-smoothing:antialiased}
h2{font-size:19px;font-weight:700;margin-bottom:6px}
label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--text2)}
input,select{font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--linie);border-radius:8px;background:var(--flaeche);color:var(--text);font-weight:500}
input:focus,select:focus{outline:2px solid var(--violett);outline-offset:1px}
button{font-family:inherit;font-size:13px;white-space:nowrap;background:var(--verlauf);color:#fff;border:0;border-radius:8px;padding:9px 14px;font-weight:600;cursor:pointer}
button.sek{background:var(--flaeche);color:var(--text);border:1px solid var(--linie)}
button.klein{padding:5px 9px;font-size:12px}
button.hell{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
button:hover{filter:brightness(1.06)}
button:focus-visible,a:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}

/* Anmeldung */
.zugang{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--verlauf)}
.zugang-karte{width:100%;max-width:420px;background:var(--flaeche);border-radius:16px;padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.zugang-kopf{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.zugang-kopf img{width:48px;height:48px;border-radius:10px;object-fit:contain}
.zugang-kopf b{display:block;font-size:16px}.zugang-kopf small{color:var(--grau)}
.schritt{display:flex;flex-direction:column;gap:12px}
.hinweis{color:var(--text2);font-size:13px;line-height:1.5}
.qr{width:200px;height:200px;align-self:center;background:#fff;border:1px solid var(--linie);border-radius:8px}
.schluessel{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--grau)}
.schluessel code{font-size:14px;color:var(--text);background:var(--zeile);padding:8px;border-radius:6px;word-break:break-all;user-select:all}
.meldung{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--violett-hell);color:var(--violett);line-height:1.5}
.meldung.fehler{background:var(--magenta-hell);color:var(--magenta)}
.meldung.erfolg{background:#d1fae5;color:#065f46}

/* Anwendung */
.rahmen{display:flex;min-height:100vh}
.nav{width:240px;background:var(--verlauf);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0}
.kopfmarke{display:flex;gap:12px;align-items:center;padding:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.kopfmarke img{width:44px;height:44px;border-radius:10px;background:#fff;padding:2px;object-fit:contain}
.kopfmarke b{display:block;font-size:15px}.kopfmarke small{font-size:12px;color:rgba(255,255,255,.7)}
#menue{padding:12px;display:flex;flex-direction:column;gap:2px}
#menue a{padding:9px 12px;border-radius:8px;color:rgba(255,255,255,.8);font-weight:500;text-decoration:none}
#menue a:hover{background:rgba(255,255,255,.1);color:#fff}
#menue a.a{background:rgba(255,255,255,.18);color:#fff;font-weight:600}
.fuss{margin-top:auto;padding:14px 16px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:8px;font-size:12.5px}
main{flex:1;min-width:0;padding-bottom:24px}
header{background:var(--flaeche);border-bottom:1px solid var(--linie);padding:14px 24px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:10}
header h1{font-size:19px;font-weight:700}
.badge{background:var(--magenta-hell);color:var(--magenta);padding:4px 10px;border-radius:20px;font-weight:700;font-size:11px}
main>.meldung{margin:16px 24px 0}
.ansicht{display:flex;flex-direction:column;gap:16px;padding:20px 24px}
.karte{border:1px solid var(--linie);border-radius:12px;padding:16px 18px;background:var(--flaeche);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.karte h3{font-size:14.5px;font-weight:700;margin-bottom:10px}
.text{color:var(--text2);line-height:1.6;max-width:760px}
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.kachel{border:1px solid var(--linie);border-radius:12px;padding:16px;background:var(--flaeche);opacity:.75}
.kachel.aktiv{opacity:1;border-color:var(--violett)}
.kachel h4{margin:10px 0 6px;font-size:15px}
.kachel p{color:var(--text2);font-size:13px;line-height:1.5}
.tag{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11.5px;font-weight:600;background:var(--violett-hell);color:var(--violett)}
.tag.gruen{background:#d1fae5;color:#065f46}.tag.warn{background:var(--magenta-hell);color:var(--magenta)}
.zeile{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.tabelle{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th{background:var(--zeile);color:var(--grau);text-align:left;padding:9px;font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--linie)}
td{padding:8px 9px;border-bottom:1px solid var(--linie);color:var(--text2);vertical-align:middle}
td .knoepfe{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:760px){
  .rahmen{flex-direction:column}
  .nav{width:auto;height:auto;position:static}
  #menue{flex-direction:row;flex-wrap:wrap}
  .ansicht{padding:16px}
  header{padding:12px 16px}
}