:root{
  --accent:#7A1E1E;
  --accent-hover:#5E1616;
  --bg:#0b0b0c;
  --card:#121214;
  --border:#252529;
  --text:#f2f2f2;
  --muted:#b2b2b2;
  --tableHead:#16161a;
  --rowBorder:#1f1f25;
}
*{box-sizing:border-box;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{color:#ddd;text-decoration:none;}
a:hover{color:#fff;}
.topbar{background:#0f0f0f;border-bottom:2px solid var(--accent);}
.topbar-inner{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.brand{display:flex;align-items:center;gap:!0px;}
.brand-logo{height:75px;width:auto;display:block;}
.nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.btn-primary{
  background:var(--accent);
  color:#fff;
  padding:7px 12px;
  border-radius:4px;
  border:1px solid transparent;

  /* macht <a> und <button> identisch */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font:inherit;

  cursor:pointer;
}

.btn-primary:hover{ background:var(--accent-hover); }

/* Buttons “neutralisieren” */
button.btn-primary{
  appearance:none;
  -webkit-appearance:none;
  background:var(--accent);
}
.link-btn{background:none;border:none;color:#ccc;cursor:pointer;font-size:0.95rem;padding:0;}
.link-btn:hover{color:#fff;}
.page{max-width:1100px;margin:20px auto;padding:0 16px 40px;}
.card{background:var(--card);border:1px solid var(--border);padding:14px;border-radius:10px;}
.grid{display:grid;gap:14px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.gap-sm{gap:10px;}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
table{width:100%;border-collapse:collapse;}
th{background:var(--tableHead);border-bottom:1px solid var(--border);padding:8px;text-align:left;}
td{border-bottom:1px solid var(--rowBorder);padding:8px;vertical-align:top;}
.muted{color:var(--muted);}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:#0f0f10;color:var(--muted);font-size:0.85rem;}
input, textarea, select{padding:8px;border:1px solid #333;background:#0f0f10;color:#fff;border-radius:8px;}
.alert{padding:10px 14px;margin-bottom:14px;border-radius:8px;}
.alert.success{background:#102016;border:1px solid #1e4a2c;}
.alert.error{background:#2a1111;border:1px solid #3a1a1a;color:#ffb4b4;}
.gmi-good{border-left:5px solid #2e7d32;}
.gmi-mid{border-left:5px solid #b26a00;}
.gmi-high{border-left:5px solid var(--accent);}
.gmi-neutral{border-left:5px solid #999;}
code{color:#ddd;}
hr{border:none;border-top:1px solid var(--border);margin:12px 0;}
.nav a.nav-active{color:#fff;position:relative;}
.nav a.nav-active::after{
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:-10px;
  height:3px;
  background:var(--accent);
  border-radius:999px;
}
/* Sticky footer layout */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }

/* alles zwischen Topbar und Footer nimmt den restlichen Platz */
.app-shell { flex: 1; display: flex; flex-direction: column; }

/* dein main-content darf wachsen */
.page { flex: 1; }

/* Footer bleibt unten, ohne zu überdecken */
.kelog-footer{
  margin-top: 0;            /* wichtig: sonst "schwebt" er */
  padding: 10px 34px;
  font-size: 12px;
  color: #5a5a5a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ddd;
}

@media (prefers-color-scheme: dark){
  .kelog-footer{
    color: #9a9a9a;
    border-top-color: #333;
  }
}

.login-brand{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.login-logo{
  display: block;
  margin: 0 auto;
  width: 250px;
  height: auto;
}