/*
 * 8XREGIO Farbschema & Sidebar-Layout
 * Aus dem offiziellen 8XREGIO-Bildmaterial abgeleitet (Logo, Direktkasse-Hero-Bild).
 * Diese Datei ist die zentrale Design-Quelle fuer alle 8XREGIO-Weboberflaechen
 * (Consultant-Portal, spaeter ggf. weitere Tools) - bei Aenderungen hier pflegen.
 */
:root{
  /* Neutrales Dunkel-Grau wie beim Region-Scouting-Tool (Franz, 20.07.2026) -
     vorher war hier ein Gruenstich (#0a170f etc.), der laut Franz im direkten
     Vergleich mit dem Scouting-Tool "komisch" wirkt. Werte unten sind bewusst
     identisch zu 8xregio-region-scouting/static/style.css (--bg/--card/--border),
     damit sich beide Tools optisch wie ein System anfuehlen. */
  --c-bg:#0f1115;
  --c-bg-soft:#171a21;
  --c-panel:#171a21;
  --c-panel-alt:#1b1f28;
  --c-panel-border:#262b35;
  --c-gold:#c9a227;
  --c-gold-light:#e9c379;
  --c-gold-dark:#8a6f1f;
  --c-green:#7c8794;
  --c-green-light:#9aa4b2;
  --c-green-muted:#6b7480;
  --c-text:#e8e6e1;
  --c-text-muted:#9a9ea8;
  --c-danger:#b3543f;
  --c-success:#3f8f5f;
  /* Eine einheitliche, moderne Schriftfamilie fuer Ueberschriften UND Fliesstext
     (Franz, 20.07.2026: die alte Serifenschrift bei Ueberschriften wirkte zu sehr
     nach dem SSE-Magazin-Stil) - genau wie beim Scouting-Tool, das durchgehend
     nur eine sans-serif-Schrift verwendet. */
  --font-head: -apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body: -apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --sidebar-width: 250px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:radial-gradient(circle at 20% 0%,var(--c-bg-soft),var(--c-bg) 60%);
  color:var(--c-text);
  font-family:var(--font-body);
  line-height:1.5;
}
a{color:var(--c-gold-light);}
h1,h2,h3{font-family:var(--font-head);color:var(--c-gold);letter-spacing:.06em;margin:0 0 .3em 0;}
h1{text-transform:uppercase;font-size:1.3rem;}
h2{text-transform:uppercase;font-size:1.1rem;border-bottom:1px solid var(--c-panel-border);padding-bottom:.4em;}
h3{font-size:1rem;color:var(--c-gold-light);text-transform:none;letter-spacing:0;}

/* ---------- App shell mit linker Sidebar ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:var(--sidebar-width);flex-shrink:0;
  background:linear-gradient(180deg,#171a21,#0f1115);
  border-right:1px solid var(--c-panel-border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.sidebar .brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px 16px 18px;border-bottom:1px solid var(--c-panel-border);text-align:center;}
.sidebar .brand img{width:88px;height:88px;object-fit:contain;}
.sidebar .brand span{font-family:var(--font-head);color:var(--c-gold);letter-spacing:.22em;text-transform:uppercase;font-size:.8rem;}
.sidebar nav{flex:1;overflow-y:auto;padding:10px 8px;}
.sidebar .nav-section{margin-bottom:14px;}
.sidebar .nav-section .section-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--c-text-muted);padding:6px 10px;}
.sidebar .nav-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:transparent;border:none;color:var(--c-text-muted);
  padding:9px 10px;border-radius:6px;cursor:pointer;font-size:.85rem;margin-bottom:2px;
}
.sidebar .nav-item .ic{width:18px;text-align:center;color:var(--c-green-light);}
.sidebar .nav-item:hover{background:rgba(201,162,39,0.08);color:var(--c-text);}
.sidebar .nav-item.active{background:var(--c-panel);color:var(--c-gold);border:1px solid var(--c-panel-border);}
.sidebar .personal-area{
  border-top:1px solid var(--c-panel-border);padding:12px;
}
.sidebar .personal-area .who{font-size:.8rem;color:var(--c-text);}
.sidebar .personal-area .role{font-size:.68rem;color:var(--c-green-light);text-transform:uppercase;letter-spacing:.06em;}
.sidebar .personal-area button{margin-top:8px;width:100%;}

.content{flex:1;padding:24px 28px 60px;max-width:1100px;}

/* ---------- Wiederverwendete Bausteine ---------- */
.card{background:var(--c-panel);border:1px solid var(--c-panel-border);border-radius:10px;padding:18px 20px;margin-bottom:18px;}
.grid{display:grid;gap:14px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.app-shell{flex-direction:column;}.sidebar{width:100%;height:auto;position:relative;}.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}}
label{display:block;font-size:.75rem;color:var(--c-green-light);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
input,select,textarea{width:100%;background:var(--c-bg-soft);border:1px solid var(--c-panel-border);color:var(--c-text);padding:8px 10px;border-radius:6px;font-family:var(--font-body);font-size:.9rem;}
textarea{resize:vertical;}
.field{margin-bottom:10px;}
button.btn{background:linear-gradient(180deg,var(--c-gold-light),var(--c-gold));color:#1a1400;border:none;border-radius:6px;padding:9px 16px;font-weight:600;cursor:pointer;font-size:.85rem;}
button.btn:hover{filter:brightness(1.08);}
button.btn.secondary{background:transparent;border:1px solid var(--c-gold-dark);color:var(--c-gold-light);}
button.btn.danger{background:linear-gradient(180deg,#c96a52,var(--c-danger));color:#241010;}
button.btn.small{padding:5px 10px;font-size:.75rem;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
table{width:100%;border-collapse:collapse;font-size:.85rem;}
th,td{border-bottom:1px solid var(--c-panel-border);padding:7px 8px;text-align:left;vertical-align:top;}
th{color:var(--c-gold-light);font-family:var(--font-head);letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;}
tr:hover td{background:rgba(201,162,39,0.06);}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.7rem;letter-spacing:.03em;text-transform:uppercase;}
.badge.neu{background:#33413a;color:#cdd6cf;}
.badge.kontaktiert{background:#2e4a58;color:#bfe0ee;}
.badge.termin{background:#3c4a2e;color:#dbeec0;}
.badge.praesentation{background:#5a4a1f;color:#f3d98a;}
.badge.angebot{background:#5a3a1f;color:#f3c48a;}
.badge.platziert{background:#2d5a34;color:#c9f0cf;}
.badge.wiedervorlage{background:#5a4a1f;color:#f3d98a;}
.badge.kein_interesse{background:#5a2e2e;color:#f0c9c9;}
.badge.nicht_erreicht{background:#3a3a3a;color:#d8d8d8;}
.template-box{background:var(--c-panel-alt);border:1px dashed var(--c-panel-border);border-radius:8px;padding:12px;white-space:pre-wrap;font-size:.85rem;margin-bottom:8px;}
.muted{color:var(--c-text-muted);font-size:.82rem;}
.flex-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.stat-row{display:flex;gap:14px;flex-wrap:wrap;}
.stat{flex:1;min-width:130px;background:var(--c-panel-alt);border:1px solid var(--c-panel-border);border-radius:8px;padding:12px;text-align:center;}
.stat .n{font-family:var(--font-head);color:var(--c-gold);font-size:1.6rem;}
.stat .l{font-size:.72rem;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.05em;}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:820px){.pillars{grid-template-columns:1fr 1fr;}}
.pillar{border:1px solid var(--c-panel-border);border-radius:8px;padding:12px;background:var(--c-panel-alt);}
.pillar .num{color:var(--c-gold);font-family:var(--font-head);font-size:1.3rem;}
.tagline{font-family:var(--font-head);color:var(--c-gold-light);letter-spacing:.05em;font-size:1rem;text-align:center;margin:6px 0 0;}

/* ---------- Login-Seite ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{width:100%;max-width:380px;background:var(--c-panel);border:1px solid var(--c-panel-border);border-radius:12px;padding:28px 26px;text-align:center;}
.login-card img{width:56px;height:56px;object-fit:contain;margin-bottom:8px;}
.login-error{color:#f0c9c9;font-size:.82rem;margin-top:10px;min-height:1.2em;}

/* ---------- Placeholder-Dashboards ---------- */
.placeholder-box{border:1px dashed var(--c-panel-border);border-radius:10px;padding:22px;text-align:center;color:var(--c-text-muted);}

/* =============================================================================
 * HELL-MODUS (Franz, 20.07.2026)
 * Folgt automatisch der Systemeinstellung des Browsers (prefers-color-scheme).
 * Der obige dunkle Grundton bleibt exakt wie bisher erhalten (Franz nutzt
 * selbst dunkel und findet die aktuellen Farben "perfekt") - hier wird nur
 * fuer Nutzer mit hellem Systemdesign ein zweites Farbschema definiert:
 * weisser/heller Hintergrund, Blau als "Menue/Struktur"-Farbe (Sidebar, Links,
 * Buttons) und das bestehende 8XREGIO-Gold als Marken-Akzent (Ueberschriften,
 * Badges) - angelehnt an das von Franz gezeigte Referenzbild (heller Hinter-
 * grund, dunkelblaue Headlines, goldene Akzente/Schrift).
 * ========================================================================== */
@media (prefers-color-scheme: light){
  :root{
    --c-bg:#eef2f7;
    --c-bg-soft:#ffffff;
    --c-panel:#ffffff;
    --c-panel-alt:#f4f7fb;
    --c-panel-border:#dbe2ec;
    --c-gold:#a9820f;
    --c-gold-light:#c9a227;
    --c-gold-dark:#8a6f1f;
    --c-green:#193b5e;
    --c-green-light:#2f5f96;
    --c-green-muted:#4a6d94;
    --c-text:#1b2733;
    --c-text-muted:#5c6b7c;
    --c-danger:#b3402e;
    --c-success:#1c7a4d;
  }
  body{background:linear-gradient(180deg,#ffffff,#eef2f7 65%);}
  a{color:var(--c-green);}
  .sidebar{
    background:linear-gradient(180deg,#ffffff,#f5f8fc);
    box-shadow:2px 0 14px rgba(20,40,64,.05);
  }
  .sidebar .nav-item:hover{background:rgba(25,59,94,.07);color:var(--c-text);}
  .sidebar .nav-item.active{background:#eaf1fa;color:var(--c-green);border-color:var(--c-panel-border);}
  .card{box-shadow:0 1px 3px rgba(20,40,64,.06);}
  button.btn{background:linear-gradient(180deg,#2f5f96,#193b5e);color:#fff;}
  button.btn.secondary{background:transparent;border:1px solid var(--c-green-light);color:var(--c-green);}
  button.btn.danger{background:linear-gradient(180deg,#c96a52,var(--c-danger));color:#fff;}
  th{color:var(--c-green);}
  tr:hover td{background:rgba(25,59,94,.04);}
  .badge.neu{background:#e6eaef;color:#3a4552;}
  .badge.kontaktiert{background:#dbeeff;color:#1c5a86;}
  .badge.termin{background:#e6f4df;color:#2f6b25;}
  .badge.praesentation{background:#fdf1d2;color:#8a6a10;}
  .badge.angebot{background:#fbe6d2;color:#94551a;}
  .badge.platziert{background:#dcf3df;color:#1c7a3f;}
  .badge.wiedervorlage{background:#fdf1d2;color:#8a6a10;}
  .badge.kein_interesse{background:#fbdede;color:#963434;}
  .badge.nicht_erreicht{background:#e6e6e6;color:#555;}
  .template-box{background:var(--c-panel-alt);}
  .login-error{color:#963434;}
}