:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --radius:1rem;
  --brand:#17308f; /* kann per inline <style> überschrieben werden */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--text);
  background:var(--bg);
}

/* Header */
.site-header{background:var(--surface); border-bottom:1px solid var(--border); padding:.8rem 1rem; border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow); margin:0 1rem 1rem}
.header-inner{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:600}
.logo-dot{width:14px; height:14px; background:var(--brand); display:inline-block; border-radius:999px; box-shadow:0 0 0 3px rgba(23,48,143,.15)}

.main-nav a{margin-left:.4rem}

.site-main{max-width:1200px; margin:0 auto; padding:0 1rem 2rem}

.site-footer{max-width:1200px; margin:0 auto; padding:1rem; color:var(--muted); font-size:.92rem}

/* Cards */
.card{
  background:var(--surface);
  color:var(--text);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
  border:1px solid var(--border);
}
.card h1, .card h2, .card h3{margin:.2rem 0 .6rem}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem 1rem; border-radius:.8rem; text-decoration:none; cursor:pointer;
  border:1px solid var(--border); background:#fff; color:var(--text);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{box-shadow:0 6px 18px rgba(0,0,0,.06)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn-ghost{background:transparent}

/* Badges */
.badge{display:inline-block; padding:.2rem .6rem; border-radius:.6rem; background:rgba(23,48,143,.1); color:var(--brand); font-weight:600}

/* Tables */
.table{width:100%; border-collapse:collapse}
.table th, .table td{padding:.75rem .6rem; border-bottom:1px solid var(--border); text-align:left}
.table th{color:var(--muted); font-weight:600; font-size:.92rem}

/* Forms */
label{display:block; font-weight:600; font-size:.92rem; margin-bottom:.2rem}
.form-control{width:100%; padding:.65rem .75rem; border:1px solid var(--border); border-radius:.6rem; background:#fff; color:var(--text); outline:none}
.form-control:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(23,48,143,.15)}

/* Grid */
.grid{display:grid; gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

/* Alerts */
.alert{padding:.8rem 1rem; border-radius:.6rem; border:1px solid var(--border); background:#fff}
.alert.info{border-color:#bfdbfe; background:#eff6ff; color:#1e3a8a}
.alert.success{border-color:#bbf7d0; background:#ecfdf5; color:#166534}
.alert.warn{border-color:#fde68a; background:#fffbeb; color:#92400e}
.alert.danger{border-color:#fecaca; background:#fef2f2; color:#991b1b}

/* Utilities */
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}
.text-muted{color:var(--muted)}
.text-right{text-align:right}

/* Dark Mode */
html.dark body{background:#0b1220; color:#e5e7eb}
html.dark .site-header{background:#0e1629; border-color:#1f2a44}
html.dark .card{background:#0e1629; border-color:#1f2a44}
html.dark .btn{background:#0e1629; color:#e5e7eb; border-color:#1f2a44}
html.dark .btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
html.dark .table th, html.dark .table td{border-color:#1f2a44}
html.dark .form-control{background:#0e1629; border-color:#1f2a44; color:#e5e7eb}