/* ============================================================
   app.css — Grundgeruest: Variablen, Reset, Shell (Kopfbereich,
   Navigation, Seitenkopf, Filterleisten), Buttons, Formulare,
   Responsive-Regeln, allgemeine Hilfsklassen.
   Teil der Aufteilung der bisherigen Monolith-Datei in eine
   Projektstruktur (siehe README.md).
   ============================================================ */

/* ---------- Design-Tokens (aus Design-System v1.0) ---------- */
:root{
    --primary-700:#0E3B38; --primary-600:#14524F; --primary-500:#1B6B66;
    --primary-100:#DCEBE9; --primary-50:#F1F7F6;
    --slate-700:#2C3742; --slate-600:#3F4B54; --slate-100:#E6E9EC;
    --success-text:#1E6B3A; --success-fill:#E3F2E8;
    --warning-text:#8A5A00; --warning-fill:#FDF3DC;
    --error-text:#A32020; --error-fill:#FBE9E9;
    --info-text:#14524F; --info-fill:#DCEBE9;
    --gray-900:#14181C; --gray-700:#3A444D; --gray-500:#6B767F; --gray-400:#9AA3AB;
    --gray-300:#C7CDD2; --gray-200:#DFE3E7; --gray-100:#EEF1F3; --gray-50:#F7F8F9; --white:#fff;
    --ber-baustoffe:#3E5C8A; --ber-baumaerkte:#8C5E1A; --ber-garden:#4E7A3E;
    --origin-aufgabe:#5A6B5C; --origin-beitrag:#6B4E7A; --origin-trend:#B5651D; --origin-wettbewerb:#7A2E4D; --origin-termin:#3F4B54; --origin-feiertag:#1E6B3A; --origin-abwesenheit:#2C6E8F; --origin-projekt:#1F5C63;
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s8:48px; --s10:64px;
    --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
    --nav-w:240px; --header-h:64px;

    /* ---------- Design-Iteration v1.2-color: erweiterte Basispalette ---------- */
    --sage-700:#4A6350; --sage-600:#5E7C5A; --sage-100:#E7EEE3; --sage-50:#F3F7F1;
    --olive-700:#5C5A2E; --olive-600:#7C773C; --olive-100:#EEECDA;
    --beige-100:#EFE7D6; --beige-50:#F8F3E8; --cream:#FBF7EF;
    --terracotta-text:#8A3A1D; --terracotta-fill:#F5E4DC;
    --gold-text:#8A6416; --gold-fill:#FBF0D9;

    /* ---------- Modulfarben (feste Akzentfarbe je Hauptmodul) ---------- */
    --mod-dashboard:#0E3B38; --mod-dashboard-fill:#E3ECEA;
    --mod-projekte:#1F5C63;  --mod-projekte-fill:#E1EDEE;
    --mod-aufgaben:#5E7C5A;  --mod-aufgaben-fill:#E7EEE3;
    --mod-ideenpool:#946914; --mod-ideenpool-fill:#FBF0D9;
    --mod-content:#6B4E7A;   --mod-content-fill:#EFE7F1;
    --mod-trend:#B5651D;     --mod-trend-fill:#FBEADD;
    --mod-wettbewerb:#7A2E4D; --mod-wettbewerb-fill:#F3E1E7;
    --mod-kalender:#39647A;  --mod-kalender-fill:#E3EBEF;
    --mod-einstellungen:#3F4B54; --mod-einstellungen-fill:#E9EBEC;
  }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);font-size:14px;line-height:21px;color:var(--gray-900);background:var(--cream)}
.mono{font-family:var(--mono)}
a{color:inherit}
button{font-family:inherit;font-size:14px;cursor:pointer}
:focus-visible{outline:2px solid var(--primary-600);outline-offset:2px}
/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:var(--nav-w) 1fr;grid-template-rows:var(--header-h) 1fr;
       grid-template-areas:"brand header" "nav main";min-height:100vh}
.brand{grid-area:brand;display:flex;align-items:center;gap:var(--s2);padding:0 var(--s5);
         border-right:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);background:var(--white)}
.brand b{font-weight:600;letter-spacing:.2px}
.brand .dot{width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,var(--mod-dashboard),var(--sage-600));box-shadow:0 1px 3px rgba(14,59,56,.35)}
header.top{grid-area:header;display:flex;align-items:center;gap:var(--s4);padding:0 var(--s6);
             border-bottom:1px solid var(--gray-200);background:var(--white)}
.search{flex:0 1 400px;height:36px;border:1px solid var(--gray-300);border-radius:4px;background:var(--white);
          display:flex;align-items:center;padding:0 var(--s3);color:var(--gray-500);gap:var(--s2)}
.search input{border:0;outline:0;flex:1;font-size:14px;color:var(--gray-900);background:transparent}
.search-wrap{position:relative;flex:0 1 400px}
.search-wrap .search{flex:1 1 auto;width:100%}
.top .spacer{flex:1}
.phase-tag{font-size:12px;font-weight:600;color:var(--primary-700);background:var(--primary-100);
             border-radius:3px;padding:2px 8px}
.bell{position:relative;width:36px;height:36px;border:1px solid var(--gray-300);border-radius:4px;background:var(--white);
        display:flex;align-items:center;justify-content:center}
.bell .count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--primary-600);
        color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 4px}
.user{width:32px;height:32px;border-radius:16px;background:var(--slate-600);color:#fff;display:flex;
        align-items:center;justify-content:center;font-size:12px;font-weight:600}
nav.side{grid-area:nav;background:var(--white);border-right:1px solid var(--gray-200);padding:var(--s4) var(--s3)}
nav.side a{display:flex;align-items:center;gap:var(--s3);height:40px;padding:0 var(--s3);border-radius:6px;
             text-decoration:none;color:var(--gray-700);font-weight:500;margin-bottom:2px;
             border-left:3px solid transparent;transition:background-color .12s ease,border-color .12s ease}
nav.side a .ic{width:18px;text-align:center;color:var(--gray-400);font-size:15px;transition:color .12s ease}
nav.side a:hover{background:var(--sage-50);border-left-color:var(--gray-300)}
nav.side a[aria-current="page"]{background:var(--mod-dashboard-fill);color:var(--primary-700);border-left-color:var(--mod-dashboard);font-weight:600}
nav.side a[aria-current="page"] .ic{color:var(--mod-dashboard)}
/* Modulspezifische Icon-Farben: dezent im Ruhezustand, kräftiger bei Hover/aktiv */
nav.side a[data-page="dashboard"] .ic{color:color-mix(in srgb, var(--mod-dashboard) 55%, var(--gray-400))}
nav.side a[data-page="projekte"] .ic{color:color-mix(in srgb, var(--mod-projekte) 55%, var(--gray-400))}
nav.side a[data-page="aufgaben"] .ic{color:color-mix(in srgb, var(--mod-aufgaben) 60%, var(--gray-400))}
nav.side a[data-page="ideenpool"] .ic{color:color-mix(in srgb, var(--mod-ideenpool) 55%, var(--gray-400))}
nav.side a[data-page="contentplaner"] .ic{color:color-mix(in srgb, var(--mod-content) 55%, var(--gray-400))}
nav.side a[data-page="trendradar"] .ic{color:color-mix(in srgb, var(--mod-trend) 55%, var(--gray-400))}
nav.side a[data-page="wettbewerb"] .ic{color:color-mix(in srgb, var(--mod-wettbewerb) 55%, var(--gray-400))}
nav.side a[data-page="kalender"] .ic{color:color-mix(in srgb, var(--mod-kalender) 55%, var(--gray-400))}
nav.side a[data-page="einstellungen"]{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--gray-200);border-radius:6px 6px 0 0}
nav.side a[data-page="dashboard"][aria-current="page"]{background:var(--mod-dashboard-fill);border-left-color:var(--mod-dashboard);color:var(--mod-dashboard)}
nav.side a[data-page="projekte"][aria-current="page"]{background:var(--mod-projekte-fill);border-left-color:var(--mod-projekte);color:var(--mod-projekte)}
nav.side a[data-page="projekte"][aria-current="page"] .ic{color:var(--mod-projekte)}
nav.side a[data-page="aufgaben"][aria-current="page"]{background:var(--mod-aufgaben-fill);border-left-color:var(--mod-aufgaben);color:var(--mod-aufgaben)}
nav.side a[data-page="aufgaben"][aria-current="page"] .ic{color:var(--mod-aufgaben)}
nav.side a[data-page="ideenpool"][aria-current="page"]{background:var(--mod-ideenpool-fill);border-left-color:var(--mod-ideenpool);color:var(--mod-ideenpool)}
nav.side a[data-page="ideenpool"][aria-current="page"] .ic{color:var(--mod-ideenpool)}
nav.side a[data-page="contentplaner"][aria-current="page"]{background:var(--mod-content-fill);border-left-color:var(--mod-content);color:var(--mod-content)}
nav.side a[data-page="contentplaner"][aria-current="page"] .ic{color:var(--mod-content)}
nav.side a[data-page="trendradar"][aria-current="page"]{background:var(--mod-trend-fill);border-left-color:var(--mod-trend);color:var(--mod-trend)}
nav.side a[data-page="trendradar"][aria-current="page"] .ic{color:var(--mod-trend)}
nav.side a[data-page="wettbewerb"][aria-current="page"]{background:var(--mod-wettbewerb-fill);border-left-color:var(--mod-wettbewerb);color:var(--mod-wettbewerb)}
nav.side a[data-page="wettbewerb"][aria-current="page"] .ic{color:var(--mod-wettbewerb)}
nav.side a[data-page="kalender"][aria-current="page"]{background:var(--mod-kalender-fill);border-left-color:var(--mod-kalender);color:var(--mod-kalender)}
nav.side a[data-page="kalender"][aria-current="page"] .ic{color:var(--mod-kalender)}
nav.side a[data-page="einstellungen"][aria-current="page"]{background:var(--mod-einstellungen-fill);border-left-color:var(--mod-einstellungen);color:var(--mod-einstellungen)}
main{grid-area:main;overflow:auto}
.page{display:none;padding:0 0 var(--s10)}
.page.active{display:block}
/* ---------- Seitenzonen ---------- */
.page-head{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);
             padding:0 var(--s6);border-bottom:1px solid var(--gray-200);background:var(--white)}
.page-head h1{font-size:24px;line-height:32px;font-weight:600;margin:0}
.page-head .sub{font-size:12px;color:var(--gray-500);margin-top:2px}
/* Seitentitel je Modul in dessen Akzentfarbe (nutzt die bereits vorhandene Seiten-ID) */
#dashboard .page-head h1{color:var(--mod-dashboard)}
#projekte .page-head h1{color:var(--mod-projekte)}
#aufgaben .page-head h1{color:var(--mod-aufgaben)}
#ideenpool .page-head h1{color:var(--mod-ideenpool)}
#contentplaner .page-head h1{color:var(--mod-content)}
#trendradar .page-head h1{color:var(--mod-trend)}
#wettbewerb .page-head h1{color:var(--mod-wettbewerb)}
#kalender .page-head h1{color:var(--mod-kalender)}
#einstellungen .page-head h1{color:var(--mod-einstellungen)}
.quickfilters{display:flex;gap:var(--s2);align-items:center;height:48px;padding:0 var(--s6);
                border-bottom:1px solid var(--gray-200);background:var(--white);overflow-x:auto}
.filterbar{display:flex;gap:var(--s2);align-items:center;min-height:56px;padding:var(--s3) var(--s6);
             background:var(--gray-50);border-bottom:1px solid var(--gray-200);flex-wrap:wrap}
.controlrow{display:flex;gap:var(--s3);align-items:center;height:44px;padding:0 var(--s6);color:var(--gray-500);font-size:13px}
.controlrow .count{margin-left:auto;font-family:var(--mono)}
.content{padding:var(--s5) var(--s6)}
/* ---------- Komponenten ---------- */
.btn{height:36px;padding:0 var(--s4);border-radius:6px;border:1px solid transparent;font-weight:600;
       display:inline-flex;align-items:center;gap:var(--s2);transition:background-color .12s ease,box-shadow .12s ease,border-color .12s ease}
.btn.primary{background:var(--mod-dashboard);color:#fff;box-shadow:0 1px 2px rgba(14,59,56,.28)}
.btn.primary:hover{background:var(--primary-500);box-shadow:0 2px 8px rgba(14,59,56,.32)}
.btn.secondary{background:var(--sage-50);border-color:var(--gray-300);color:var(--slate-700)}
.btn.secondary:hover{background:var(--sage-100);border-color:var(--gray-400)}
.btn.ghost{background:transparent;color:var(--slate-700);border-color:transparent;height:32px;padding:0 var(--s3)}
.btn.ghost:hover{background:var(--sage-50)}
.btn.danger,.btn.secondary.danger{background:var(--error-fill);border-color:var(--error-fill);color:var(--error-text)}
.btn.danger:hover,.btn.secondary.danger:hover{background:var(--error-text);border-color:var(--error-text);color:#fff}
.ber-baustoffe{--b:var(--ber-baustoffe)}
.ber-baumaerkte{--b:var(--ber-baumaerkte)}
.ber-garden{--b:var(--ber-garden)}
.plat{font-family:var(--mono);font-size:12px;color:var(--gray-700);border:1px solid var(--gray-200);border-radius:3px;padding:1px 5px}
.newbar{box-shadow:inset 3px 0 0 var(--slate-600)}
.tablewrap{overflow-x:auto}
/* Karten & Kacheln */
.grid{display:grid;gap:var(--s4)}
.tiles{grid-template-columns:repeat(4,1fr)}
.section{background:var(--white);border:1px solid var(--gray-200);border-radius:6px;margin-bottom:var(--s5);box-shadow:0 1px 3px rgba(20,24,28,.04)}
.section > h2{margin:0;font-size:16px;font-weight:600;padding:var(--s4) var(--s5);border-bottom:1px solid var(--gray-200);border-top:3px solid transparent;border-radius:6px 6px 0 0}
/* Dashboard-Abschnitte: dezente modulspezifische Kopflinie (nutzt vorhandene Kennzahl-IDs, keine HTML-Änderung) */
.section:has(#kpi-cal-woche) > h2,.section:has(#dash-cal-overdue) > h2{border-top-color:var(--mod-kalender)}
.section:has(#kpi-aw-woche) > h2{border-top-color:var(--origin-abwesenheit)}
.section:has(#dash-ideen-status) > h2,.section:has(#dash-ideen-neu) > h2{border-top-color:var(--mod-ideenpool)}
.section:has(#kpi-wett-relevanz) > h2,.section:has(#dash-wett-neu) > h2{border-top-color:var(--mod-wettbewerb)}
.section:has(#kpi-pj-dash-fortschritt) > h2{border-top-color:var(--mod-projekte)}
.section:has(#kpi-erledigt) > h2{border-top-color:var(--mod-aufgaben)}
.section:has(#kpi-trend-kurz) > h2,.section:has(#dash-trend-neu) > h2{border-top-color:var(--mod-trend)}
.section:has(#kpi-beitrag-freigabe) > h2,.section:has(#dash-beitrag-naechste) > h2{border-top-color:var(--mod-content)}
.section .body{padding:var(--s4) var(--s5)}
.cols2{display:grid;grid-template-columns:2fr 1fr;gap:var(--s5)}
.hint{color:var(--gray-500);font-size:12px}
.demo-note{font-size:12px;color:var(--gray-500);background:var(--gray-100);border:1px solid var(--gray-200);
             border-radius:4px;padding:var(--s2) var(--s3);display:inline-flex;gap:6px;align-items:center;margin-bottom:var(--s4)}
/* Tabs (Einstellungen) */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--gray-200);margin-bottom:var(--s5)}
.tabs button{height:44px;padding:0 var(--s4);border:0;background:transparent;color:var(--gray-500);font-weight:500;
               border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--gray-900);border-bottom-color:var(--primary-600)}
.tabpanel{display:none}
.tabpanel.active{display:block}
.kv{display:grid;grid-template-columns:200px 1fr;gap:var(--s3) var(--s4);align-items:center;max-width:640px}
.kv .k{font-size:12px;font-weight:600;color:var(--gray-700)}
.eingang-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
/* ---------- Aufgaben-Modul ---------- */
.ber-recruiting{--b:#6B4A8A}
.ber-uebergreifend{--b:var(--gray-400)}
.views{display:flex;border:1px solid var(--gray-300);border-radius:4px;overflow:hidden}
.views button{height:32px;padding:0 12px;border:0;background:var(--white);color:var(--gray-700);font-weight:500;border-right:1px solid var(--gray-300)}
.views button:last-child{border-right:0}
.views button[aria-pressed="true"]{background:var(--primary-50);color:var(--primary-700)}
tr.overdue td{background:var(--terracotta-fill)}
select.inline{height:28px;border:1px solid var(--gray-300);border-radius:4px;font-size:12px;font-family:var(--sans);background:var(--white);color:var(--gray-900)}
.rowact{display:flex;gap:4px;white-space:nowrap}
.empty{text-align:center;color:var(--gray-500);padding:var(--s10) var(--s4)}
.empty b{display:block;color:var(--gray-900);font-size:16px;margin-bottom:6px}
.cell.today{outline:2px solid var(--mod-kalender);outline-offset:-2px;background:var(--mod-kalender-fill)}
.print-fields{grid-column:1 / -1;border-top:1px solid var(--gray-200);margin-top:8px;padding-top:16px}
.print-fields > h3{margin:0 0 16px;font-size:13px;font-weight:600;color:var(--gray-700)}
.print-fields[hidden]{display:none}
.aufgezeigt-flash{animation:flashHighlight 1.6s ease}
@keyframes flashHighlight{0%,100%{background:transparent}30%{background:var(--primary-100)}}
.tag{font-size:12px;color:var(--gray-700);background:var(--gray-100);border-radius:3px;padding:1px 6px}
.detail-kv{display:grid;grid-template-columns:150px 1fr;gap:12px 16px;align-items:start}
.detail-kv .k{font-size:12px;font-weight:600;color:var(--gray-700)}
.detail-kv .v{font-size:14px}
@media (max-width:900px){ .kanban{grid-template-columns:repeat(2,1fr)} .formgrid{grid-template-columns:1fr} }
/* Responsive */
@media (max-width:1100px){
    :root{--nav-w:64px}
    .brand b{display:none}
    nav.side a span.txt{display:none}
    nav.side a{justify-content:center}
    .tiles{grid-template-columns:repeat(2,1fr)}
    .cols2,.eingang-split{grid-template-columns:1fr}
    .search{flex-basis:200px}
  }
@media (max-width:720px){
    .cards{grid-template-columns:1fr}
    .tiles{grid-template-columns:1fr}
    .content{padding:var(--s4)}
    .page-head,.quickfilters,.filterbar,.controlrow{padding-left:var(--s4);padding-right:var(--s4)}
    .cal{grid-template-columns:1fr} .cal .dow{display:none}
  }
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   Login-Bildschirm (neu, Teil der Supabase-Auth-Anbindung).
   Wird von app.js per JavaScript ein-/ausgeblendet (siehe dort).
   ============================================================ */
#login-screen{
  position:fixed; inset:0; z-index:500;
  display:none; align-items:center; justify-content:center;
  background:var(--cream);
}
body.hotze-locked{overflow:hidden}
.login-card{
  width:100%; max-width:360px; background:var(--white);
  border-radius:var(--radius-md,12px); box-shadow:var(--shadow-lg,0 16px 40px rgba(0,0,0,.12));
  padding:var(--s6); box-sizing:border-box;
}
.login-card .field{margin-bottom:var(--s4)}
.login-card .err{color:var(--error-text); font-size:13px}