html{color-scheme:light}
/* ==========================================================================
   Respekt Miteinander e.V. — Admin-Panel
   ========================================================================== */
:root{
  --cream:#F4F7FC;--paper:#fff;--ink:#15213A;--ink-soft:#3F4D66;--muted:#7A879C;
  --line:#DCE5F2;--line-2:#EAF0F9;
  --teal:#184890;--teal-700:#123A75;--teal-50:#E8EEF8;
  --terra:#7A6048;--terra-100:#ECE4DA;
  --ok:#1d6b3f;--ok-bg:#E6F4EC;--warn:#A8331F;--warn-bg:#FBE9E7;--gold:#B08A3E;
  --radius:13px;--radius-sm:9px;--shadow:0 16px 38px -26px rgba(18,40,80,.4);
  --sidebar:262px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:"Mulish",system-ui,sans-serif;background:var(--cream);color:var(--ink-soft);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;color:var(--ink);margin:0 0 .4em;font-weight:560;line-height:1.15}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-700)}
img{max-width:100%;display:block}

/* Layout */
.admin{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);flex-shrink:0;background:var(--teal-700);color:rgba(255,255,255,.82);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:50}
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:22px 22px;color:#fff;font-family:"Fraunces",serif;font-size:1.12rem;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar .brand img{height:38px}
.sidebar .brand small{display:block;font-family:"Mulish",sans-serif;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#F4A26B;font-weight:700}
.sidebar nav{flex:1;overflow-y:auto;padding:16px 12px}
.nav-group{margin-bottom:18px}
.nav-group h6{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:0 0 8px 12px;font-family:"Mulish",sans-serif;font-weight:700}
.sidebar nav a{display:flex;align-items:center;gap:11px;padding:.62em .8em;border-radius:10px;color:rgba(255,255,255,.8);font-weight:600;font-size:.92rem;margin-bottom:2px;transition:background .2s,color .2s}
.sidebar nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar nav a.active{background:var(--teal);color:#fff}
.sidebar nav a svg{width:18px;height:18px;flex-shrink:0;opacity:.9}
.sidebar .logout{padding:14px 16px;border-top:1px solid rgba(255,255,255,.1)}
.sidebar .logout a{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.75);font-weight:600;font-size:.9rem}
.sidebar .logout a:hover{color:#fff}

.main{flex:1;margin-left:var(--sidebar);min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:40;background:rgba(244,247,252,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:14px 30px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar .menu-btn{display:none;width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;padding:11px}
.topbar .menu-btn span{display:block;height:2px;background:var(--ink);border-radius:2px}.topbar .menu-btn span+span{margin-top:5px}
.topbar .who{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:.92rem}
.topbar .who .av{width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:"Fraunces",serif}
.topbar .actions{display:flex;gap:10px;align-items:center}
.content{padding:30px;max-width:1280px;width:100%}

/* Page head */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.page-head h1{font-size:1.9rem;margin:0}
.page-head .sub{color:var(--muted);font-size:.95rem;margin-top:4px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:inherit;font-weight:700;font-size:.9rem;padding:.62em 1.15em;border-radius:9px;border:1.5px solid var(--teal);background:var(--teal);color:#fff;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn:hover{background:var(--teal-700);border-color:var(--teal-700);color:#fff;transform:translateY(-1px)}
.btn--terra{background:var(--terra);border-color:var(--terra)}
.btn--terra:hover{background:#5F4A37;border-color:#5F4A37}
.btn--ghost{background:#fff;color:var(--teal)}
.btn--ghost:hover{background:var(--teal-50);color:var(--teal)}
.btn--sm{padding:.42em .8em;font-size:.82rem}
.btn--danger{background:#fff;color:var(--warn);border-color:#E7C3BB}
.btn--danger:hover{background:var(--warn-bg);color:var(--warn)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* Cards */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card .card-head{padding:18px 22px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:14px}
.card .card-head h3{margin:0;font-size:1.15rem}
.card .card-body{padding:22px}
.card-pad{padding:22px}

/* Stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:26px}
.stat-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow)}
.stat-card .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--teal-50);color:var(--teal);flex-shrink:0}
.stat-card.t .ic{background:var(--terra-100);color:var(--terra)}
.stat-card .v{font-family:"Fraunces",serif;font-size:1.8rem;color:var(--ink);line-height:1}
.stat-card .l{font-size:.84rem;color:var(--muted);font-weight:600;margin-top:2px}

/* Tables */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:.9rem}
table.data th{text-align:left;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;padding:12px 14px;border-bottom:2px solid var(--line);white-space:nowrap}
table.data td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.data tr:hover td{background:#FCFAF5}
table.data .num{text-align:right;font-variant-numeric:tabular-nums}
table.data .actions{text-align:right;white-space:nowrap}
table.data .actions a{margin-left:6px}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}

/* Badges */
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:.3em .7em;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.badge--aktiv,.badge--bezahlt,.badge--veroeffentlicht{background:var(--ok-bg);color:var(--ok)}
.badge--ausstehend,.badge--offen,.badge--entwurf,.badge--geplant{background:#FBF1DD;color:#9a7616}
.badge--inaktiv,.badge--storniert,.badge--abgeschlossen{background:#EEE9DE;color:var(--muted)}
.badge--gekuendigt,.badge--abgesagt{background:var(--warn-bg);color:var(--warn)}
.badge--laufend{background:var(--terra-100);color:var(--terra)}
.badge--kind{background:var(--teal-50);color:var(--teal)}
.badge--standard{background:#EFEAFB;color:#5b46a8}

/* Forms */
.form-grid{display:grid;gap:18px}
.form-grid.cols-2{grid-template-columns:1fr 1fr}
.form-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.field{display:flex;flex-direction:column;gap:.35em}
.field label{font-weight:700;font-size:.85rem;color:var(--ink)}
.field .hint{font-size:.78rem;color:var(--muted)}
.field input,.field select,.field textarea{font-family:inherit;font-size:.95rem;color:var(--ink);padding:.62em .8em;border:1.5px solid var(--line);border-radius:9px;background:var(--cream);transition:border-color .2s,box-shadow .2s,background .2s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px rgba(24,72,144,.1)}
.field textarea{resize:vertical;min-height:120px}
.field--check{flex-direction:row;align-items:center;gap:.6em}
.field--check input{width:18px;height:18px;accent-color:var(--teal)}
.field--check label{font-weight:600;color:var(--ink-soft)}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:0 0 20px}
fieldset legend{font-family:"Fraunces",serif;color:var(--ink);font-size:1.1rem;padding:0 8px}
.form-actions{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap}

/* Filterleiste */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.toolbar .field{flex:1;min-width:140px}
.toolbar form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;width:100%}

/* Flash */
.flash{padding:.85em 1.1em;border-radius:10px;margin-bottom:16px;font-weight:600;border:1px solid transparent}
.flash--success{background:var(--ok-bg);border-color:#BBE0C8;color:var(--ok)}
.flash--error{background:var(--warn-bg);border-color:#F2C3BB;color:var(--warn)}
.flash--info{background:var(--teal-50);border-color:#BFDDDD;color:var(--teal-700)}

.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty svg{width:46px;height:46px;opacity:.4;margin-bottom:12px}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:
  radial-gradient(50% 60% at 85% 10%,rgba(122,96,72,.1),transparent 60%),
  radial-gradient(50% 60% at 5% 95%,rgba(24,72,144,.12),transparent 60%),var(--cream)}
.login-card{width:100%;max-width:420px;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:38px 34px}
.login-card .brand{display:flex;align-items:center;gap:12px;margin-bottom:26px;font-family:"Fraunces",serif;font-size:1.3rem;color:var(--ink)}
.login-card .brand img{height:46px}
.login-card h1{font-size:1.5rem}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.pagination a,.pagination span{padding:.45em .8em;border-radius:8px;border:1px solid var(--line);font-weight:700;color:var(--ink);background:#fff;font-size:.85rem}
.pagination .current{background:var(--teal);color:#fff;border-color:var(--teal)}

@media (max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .3s ease}
  body.nav-open .sidebar{transform:translateX(0)}
  .main{margin-left:0}
  .topbar .menu-btn{display:block}
  .form-grid.cols-2,.form-grid.cols-3{grid-template-columns:1fr}
  .nav-backdrop{position:fixed;inset:0;background:rgba(13,24,52,.4);z-index:49;opacity:0;visibility:hidden;transition:opacity .3s}
  body.nav-open .nav-backdrop{opacity:1;visibility:visible}
}

/* === Mobil-Härtung Adminbereich ========================================== */
html,body{overflow-x:clip;max-width:100%}
.main,.content{min-width:0;max-width:100%}
.content{padding-left:16px;padding-right:16px}
img{max-width:100%}
@media (max-width:900px){
  .topbar{position:sticky;top:0;z-index:30;background:var(--cream,#F4F7FC);padding:10px 14px}
  .page-head{flex-direction:column;align-items:flex-start;gap:12px}
  .page-head .btn-row{flex-wrap:wrap}
  .toolbar form{flex-wrap:wrap}
  .form-grid,.form-grid.cols-2,.form-grid.cols-3,.form-grid.cols-4{grid-template-columns:1fr !important}
  .stat-grid{grid-template-columns:1fr 1fr !important}
}
@media (max-width:560px){
  .stat-grid{grid-template-columns:1fr !important}
  .data th,.data td{white-space:nowrap}
}

/* Sidebar-Logo (Logo trägt bereits den Namen) */
.sidebar .brand{justify-content:flex-start}
.sidebar .brand img{height:42px;width:auto}
.sidebar .brand .brand-sub{font-family:"Mulish",sans-serif;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700;margin-left:4px}
/* Geschlechtsauswahl mit Symbolen */
.gender-pick{display:flex;gap:10px;max-width:340px}
.gender-opt{flex:1;cursor:pointer;margin:0}
.gender-opt input{position:absolute;opacity:0;pointer-events:none}
.gender-box{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border:2px solid var(--line,#dcd9cf);border-radius:10px;color:var(--muted,#6b6b6b);background:#fff;transition:all .15s;font-weight:600;font-size:.85rem}
.gender-opt input:checked + .gender-box{border-color:#184890;color:#184890;background:#eef3fb}
.gender-opt:hover .gender-box{border-color:#184890}