:root{
  --rot:#c8102e;
  --rot-hell:#fdeef0;
  --rot-dunkel:#a00d25;
  --anthrazit:#2b2f33;
  --grau:#6b7278;
  --grau-hell:#f4f5f6;
  --linie:#e3e5e8;
  --gruen:#1f7a4d;
  --gruen-hell:#e8f4ee;
  --gelb:#8a6100;
  --gelb-hell:#fdf3df;
  --blau:#1b4f72;
  --blau-hell:#e8eff5;
  --weiss:#fff;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--grau-hell);color:var(--anthrazit);
  font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;
}
a{color:var(--rot)}

/* Kopfzeile */
.topbar{background:var(--anthrazit);color:var(--weiss);padding:0 20px}
.topbar-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:26px;height:54px}
.marke{font-weight:bold;font-size:16px;letter-spacing:-.2px;white-space:nowrap}
.marke span{color:var(--rot)}
.nav{display:flex;gap:4px;flex:1}
.nav a{color:#c9cdd1;text-decoration:none;padding:6px 13px;border-radius:3px;font-size:13px;font-weight:bold}
.nav a:hover{background:#3a3f44;color:var(--weiss)}
.nav a.on{background:var(--rot);color:var(--weiss)}
.rolle{font-size:11px;color:#9aa0a6;white-space:nowrap}
.rolle a{color:#9aa0a6}

.wrap{max-width:1200px;margin:0 auto;padding:22px 20px 60px}
.card{background:var(--weiss);border:1px solid var(--linie);border-radius:4px;padding:18px;margin-bottom:16px}

h1{font-size:23px;margin:0 0 4px;letter-spacing:-.3px}
h2{font-size:15px;margin:0 0 12px;padding-bottom:7px;border-bottom:2px solid var(--rot);display:inline-block}
.lead{color:var(--grau);font-size:13px;margin:0 0 18px}

/* Kennzahlen */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:18px}
.kpi{background:var(--weiss);border:1px solid var(--linie);border-left:4px solid var(--rot);border-radius:3px;padding:12px 14px}
.kpi.warn{border-left-color:var(--gelb)}
.kpi.gut{border-left-color:var(--gruen)}
.kpi .n{font-size:25px;font-weight:bold;line-height:1.1}
.kpi .l{font-size:10.5px;color:var(--grau);text-transform:uppercase;letter-spacing:.6px;margin-top:2px}

/* Filter */
.filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:4px;padding:12px 14px}
select,input[type=text],input[type=search],input[type=date],input[type=number],textarea{
  border:1px solid var(--linie);border-radius:3px;padding:6px 9px;font:inherit;font-size:13px;
  background:var(--weiss);color:var(--anthrazit);max-width:100%}
select:focus,input:focus,textarea:focus{outline:2px solid var(--rot);outline-offset:-1px}
textarea{width:100%;resize:vertical;min-height:70px;line-height:1.5}
input[type=search]{flex:1;min-width:170px}

.btn{background:var(--rot);color:var(--weiss);border:none;border-radius:3px;padding:7px 16px;
  font:inherit;font-size:13px;font-weight:bold;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--rot-dunkel)}
.btn.sek{background:var(--weiss);color:var(--grau);border:1px solid var(--linie)}
.btn.sek:hover{background:var(--grau-hell);color:var(--anthrazit)}
.btn.gefahr{background:var(--weiss);color:var(--rot);border:1px solid var(--rot)}
.btn.gefahr:hover{background:var(--rot);color:var(--weiss)}

/* Terminliste */
.monat{font-size:11.5px;font-weight:bold;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--rot);margin:20px 0 9px;padding-bottom:5px;border-bottom:1px solid var(--linie)}
.monat:first-child{margin-top:0}
.ev{display:flex;gap:14px;padding:13px 15px;background:var(--weiss);border:1px solid var(--linie);
  border-radius:4px;margin-bottom:8px;align-items:flex-start}
.ev:hover{border-color:var(--rot)}
.ev.vorbei{opacity:.62}
.med{flex:none;width:54px;height:54px;border-radius:50%;background:var(--rot);color:var(--weiss);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;text-decoration:none}
.med.p3{background:var(--grau)}
.med .d{font-size:18px;font-weight:bold}
.med .m{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px}
.ebody{flex:1;min-width:0}
.ename{font-size:14.5px;font-weight:bold;margin:0 0 3px}
.ename a{color:var(--anthrazit);text-decoration:none}
.ename a:hover{color:var(--rot);text-decoration:underline}
.emeta{font-size:12px;color:var(--grau);margin-bottom:6px}
.enotiz{font-size:12.5px;margin:0 0 7px;color:#42474c}
.badges{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.b{font-size:10.5px;padding:2px 8px;border-radius:10px;background:var(--grau-hell);color:var(--grau);white-space:nowrap}
.b.typ{background:var(--rot-hell);color:var(--rot);font-weight:bold}
.b.bl{background:var(--anthrazit);color:var(--weiss)}
.b.wett{background:var(--gelb-hell);color:var(--gelb)}
.b.unbest{background:var(--gelb-hell);color:var(--gelb);font-weight:bold}
.b.soon{background:var(--gruen-hell);color:var(--gruen);font-weight:bold}
.b.frist{background:var(--rot);color:var(--weiss);font-weight:bold}
.erechts{flex:none;text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.sterne{font-size:11.5px;color:var(--rot);letter-spacing:1px}

/* Teilnahme-Status */
.tn{font-size:11px;font-weight:bold;padding:3px 10px;border-radius:11px;border:1px solid transparent;white-space:nowrap}
.tn-offen{background:var(--grau-hell);color:var(--grau);border-color:var(--linie)}
.tn-geprueft{background:var(--blau-hell);color:var(--blau);border-color:#c5d5e2}
.tn-angemeldet{background:var(--gruen-hell);color:var(--gruen);border-color:#bfded0}
.tn-abgesagt{background:var(--rot-hell);color:var(--rot);border-color:#f3ccd3}
.tn-durchgefuehrt{background:var(--anthrazit);color:var(--weiss)}
select.tn{cursor:pointer;padding:3px 6px;font-family:inherit}

/* Formular */
.feld{margin-bottom:14px}
.feld label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--grau);font-weight:bold;margin-bottom:4px}
.feld input[type=text],.feld input[type=date],.feld input[type=number],.feld select{width:100%}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 16px}
.gruppe{border:1px solid var(--linie);border-left:4px solid var(--rot);border-radius:3px;
  padding:15px 16px 4px;margin-bottom:16px;background:var(--weiss)}
.gruppe.intern{border-left-color:var(--blau)}
.gruppe.nach{border-left-color:var(--gruen)}
.gruppe > h3{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--grau);
  margin:0 0 13px}
.hilfe{font-size:11.5px;color:var(--grau);margin:-9px 0 13px}
.aktionen{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:6px}

/* Wettbewerb */
.w{border:1px solid var(--linie);border-left:4px solid var(--grau);border-radius:4px;
  padding:15px 16px;margin-bottom:11px;background:var(--weiss)}
.w.hoch{border-left-color:var(--rot)}
.w.mittel{border-left-color:var(--gelb)}
.wname{font-size:15px;font-weight:bold;margin:0 0 6px}
.wname a{color:var(--anthrazit);text-decoration:none}
.wname a:hover{color:var(--rot)}
.wrow{font-size:13px;margin:7px 0}
.wrow b{display:block;color:var(--grau);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:1px}
.wbeob{background:var(--rot-hell);border-radius:3px;padding:9px 11px;font-size:13px;margin-top:9px}
.wnotiz{background:var(--blau-hell);border-radius:3px;padding:9px 11px;font-size:13px;margin-top:7px}

.meldung{background:var(--gruen-hell);border-left:4px solid var(--gruen);color:var(--gruen);
  padding:10px 13px;border-radius:3px;margin-bottom:16px;font-size:13px;font-weight:bold}
.hinweis{background:var(--gelb-hell);border-left:4px solid var(--gelb);color:var(--gelb);
  padding:10px 13px;border-radius:3px;margin-bottom:16px;font-size:12.5px}
.leer{text-align:center;color:var(--grau);padding:44px 20px;font-size:13px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:4px}

/* Login */
.login-seite{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:var(--anthrazit)}
.login-box{background:var(--weiss);border-radius:5px;padding:34px 32px;width:100%;max-width:370px;
  border-top:4px solid var(--rot)}
.login-box h1{font-size:21px;margin:0 0 4px}
.login-box p{color:var(--grau);font-size:12.5px;margin:0 0 20px}
.login-box input[type=password]{width:100%;border:1px solid var(--linie);border-radius:3px;
  padding:9px 11px;font:inherit;font-size:14px;margin-bottom:13px}
.login-box .btn{width:100%;padding:10px}
.login-fehler{background:var(--rot-hell);color:var(--rot);padding:8px 11px;border-radius:3px;
  font-size:12.5px;margin-bottom:13px;font-weight:bold}

footer{margin-top:30px;padding-top:12px;border-top:1px solid var(--linie);font-size:11px;color:var(--grau)}

@media(max-width:760px){
  .topbar-in{height:auto;padding:10px 0;flex-wrap:wrap;gap:10px}
  .nav{width:100%;overflow-x:auto}
  .erechts{display:none}
  .ev{flex-wrap:wrap}
}