/* 01-basis.css · Teil 1 von 19 · Palette, Grundlayout, Login, Shell, Flächen-Modus, Tabellen. Reihenfolge der Dateien = Kaskade (index.html), nicht umsortieren. */
/* Gedaempfte, editorielle Palette (Vorlage vorschlag-ac.html): ein dunkles
   Marken-Indigo (navy/navy2), EIN Rot-Akzent (pink) fuer Aktionen/aktive
   Zustaende, ein ruhigerer Indigo-Blauton (cyan) statt Neon-Tuerkis fuer
   Kennzahlen/Fokus. Variablennamen bewusst unveraendert, damit alle
   bestehenden var(--...)-Stellen automatisch mitziehen.
   Neutraltoene (bg/border/muted/th-bg) seit den Vorlagen vorschlag-a-*.html
   warm statt kuehl-blaugrau: Grundfarbe #F6F5F2, Linien #E4E1DA. */
:root { --navy:#1A1B4B; --navy2:#2E3178; --pink:#E6304E; --cyan:#5468D9;
  --bg:#F6F5F2; --border:#E4E1DA; --muted:#6B6A75; --th-bg:#FAF9F6; --fx:32px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:#1F2430; font-family:'Onest',system-ui,sans-serif; }

/* ── Login ── */
#loginArea { min-height:100vh; display:flex; align-items:center; justify-content:center; }
#loginArea .box { background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:34px 40px; box-shadow:0 4px 24px rgba(26,27,75,.08); text-align:center; max-width:400px; }
#loginArea img { width:54px; height:54px; border-radius:12px; margin-bottom:14px; }
#loginArea h1 { font-size:24px; color:var(--navy); margin:0 0 4px; }
#loginArea h1 span { color:var(--pink); }
#loginArea p { color:var(--muted); font-size:13px; margin:0 0 20px; }
.btn { background:var(--pink); color:#fff; border:none; border-radius:10px; padding:11px 22px;
  font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn.sec { background:#fff; color:var(--navy); border:1px solid var(--border); padding:5px 12px; font-size:12px; }
.status { font-size:13px; padding:10px 14px; border-radius:10px; margin-bottom:12px; background:#EEF0FB; color:var(--navy2); }

/* ── App-Layout ── */
#appArea { display:none; }
.layout { display:flex; min-height:100vh; height:100vh; }
/* Menue nach Bereichen gruppiert (Planung/Ressourcen/Organisation/Content/
   System) statt reiner Icon-Leiste - dafuer breiter, mit Textlabels. */
.sidebar { width:224px; background:var(--navy); flex:none; display:flex; flex-direction:column;
  padding:18px 14px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar-logo { display:flex; align-items:center; gap:10px; margin:0 6px 18px; }
.sidebar-logo img { width:32px; height:32px; border-radius:8px; display:block; margin:0; flex:none; }
.brand-name { color:#fff; font-weight:650; font-size:15px; white-space:nowrap; }
/* Seitenleiste auf-/zuklappen (Teamwunsch 19.10.2026): Vorgabe offen; zugeklappt bleiben nur die Symbole (`.layout.nav-zu`),
   der Name steht dann als Tooltip am Symbol. Nur ab 641 px — auf dem Handy ist die Leiste eine Reihe, dort gibt es keinen Knopf. */
.nav-toggle { margin-left:auto; flex:none; width:26px; height:26px; border:none; border-radius:6px; background:none;
  color:rgba(255,255,255,.55); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nav-toggle:hover { color:#fff; background:rgba(255,255,255,.08); }
.nav-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sidebar-nav { display:flex; flex-direction:column; }
.nav-group { display:flex; flex-direction:column; gap:1px; }
.nav-group + .nav-group { border-top:1px solid rgba(255,255,255,.08); margin-top:10px; padding-top:8px; }
.group-label { font-size:10.5px; font-weight:700; color:rgba(255,255,255,.36); text-transform:uppercase;
  letter-spacing:.06em; padding:6px 10px 5px; }
.tab { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 10px;
  cursor:pointer; color:rgba(255,255,255,.72); border-radius:8px; white-space:nowrap; }
.tab:hover { color:#fff; background:rgba(255,255,255,.07); }
.tab.active { color:#fff; background:rgba(255,255,255,.1); box-shadow:inset 3px 0 0 var(--pink); }
.tab .navicon { flex:none; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
.tab .navicon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.tab .navlabel { font-size:13.5px; font-weight:500; }
.tab[hidden] { display:none; }   /* `.tab` setzt display:flex — ohne diese Regel bliebe ein per Rolle ausgeblendeter Menüpunkt sichtbar (§8c-Falle) */
@media (min-width:641px) {
  .sidebar { transition:width .15s ease; }
  .layout.nav-zu .sidebar { width:64px; padding:18px 8px; }
  .layout.nav-zu .sidebar-logo { flex-direction:column; gap:8px; margin:0 0 14px; }
  .layout.nav-zu .brand-name, .layout.nav-zu .navlabel, .layout.nav-zu .group-label, .layout.nav-zu .su-text { display:none; }
  .layout.nav-zu .nav-toggle { margin-left:0; }
  .layout.nav-zu .nav-toggle svg { transform:rotate(180deg); }
  .layout.nav-zu .tab { justify-content:center; padding:9px 0; }
  .layout.nav-zu .sidebar-user { flex-direction:column; gap:8px; padding:12px 0 2px; }
  /* Kapitel einzeln zuklappen (Teamwunsch 20.10.2026): der Titel wird per Skript zum Knopf (`role="button"`, siehe hub-app.js). Nur in der
     breiten Leiste — in der Rail und auf dem Handy gibt es keinen Titel zum Aufklappen, dort bleiben alle Punkte; der aktive Punkt bleibt immer. */
  .group-label[role="button"] { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; border-radius:6px; }
  .group-label[role="button"]:hover { color:rgba(255,255,255,.62); }
  .group-label[role="button"]:focus-visible { outline:2px solid rgba(255,255,255,.4); outline-offset:-2px; }
  .group-label[role="button"]::after { content:''; flex:none; width:5px; height:5px; margin:-3px 3px 0 0; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); transition:transform .15s ease; }
  .nav-group.zu > .group-label[role="button"]::after { margin-top:0; transform:rotate(-45deg); }
  .layout:not(.nav-zu) .nav-group.zu .tab:not(.active) { display:none; }
}
@media (max-width:640px) { .nav-toggle { display:none; } }
/* Nutzer/Rolle/Abmelden unten in der Seitenleiste statt oben in der
   Kopfzeile (Teamwunsch, Vorlage `vorschlag-ac.html` — siehe §8b). Der
   `margin-top:auto` auf `.sidebar-user` schiebt den Block ans untere Ende
   der Flex-Spalte `.sidebar`, unabhaengig von der Menuelaenge. */
.sidebar-user { display:flex; align-items:center; gap:9px; margin-top:auto;
  padding:14px 8px 2px; border-top:1px solid rgba(255,255,255,.08); }
.su-avatar { flex:none; width:30px; height:30px; border-radius:99px; background:var(--pink);
  color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.su-text { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.su-text b { color:#fff; font-size:13px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.su-rolle { color:rgba(255,255,255,.5); font-size:11px; }
.su-logout { flex:none; width:26px; height:26px; border:none; border-radius:6px; background:none;
  color:rgba(255,255,255,.55); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.su-logout:hover { color:#fff; background:rgba(255,255,255,.08); }
.su-logout svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; }
/* Seitenkopf der Shell im Stil der Vorlagen (vorschlag-a-*): auf der
   Grundfarbe, Brotkrume (#viewBc, nur bei Unteransichten) ueber dem Titel,
   rechts ein Bereich, den die Ansicht fuellen darf (#viewKopfR, z.B. Suche).
   Darunter die Unterreiter (#viewSubnav) als Unterstrich-Leiste ueber die
   volle Breite — gefuellt von projekt-/venue-/material-/verwaltungSubnav(). */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px 16px;
  min-height:72px; padding:12px var(--fx); border-bottom:1px solid var(--border); flex-wrap:wrap; flex:none; }
.topbar h2 { margin:2px 0 0; font-size:20px; font-weight:600; letter-spacing:-.01em; color:#1C1B22; }
#viewBc:empty { display:none; }
.tb-r { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tb-r:empty { display:none; }
/* „Neu"-Knopf rechts im Seitenkopf (kopfNeuKnopf() in hub-app.js) — Optik wie „Neue Offerte" */
.kopf-neu { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px solid var(--pink); border-radius:7px;
  background:var(--pink); color:#fff; font:inherit; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; }
.kopf-neu:hover { background:#CC2944; border-color:#CC2944; }
.kopf-neu:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.kopf-neu .psub-i { width:14px; height:14px; }
/* ueber die ID, weil `.proj-subnav` (gleiche Spezifitaet, weiter unten)
   sonst margin/gap wieder ueberschriebe */
#viewSubnav { flex:none; margin:0; padding:0 var(--fx); gap:26px; border-bottom:1px solid var(--border); }
#viewSubnav[hidden] { display:none; }
#viewSubnav .psub { padding:12px 0; font-size:14px; font-weight:400; border-bottom:0; }
#viewSubnav .psub:hover { color:#1C1B22; }
#viewSubnav .psub.aktiv { font-weight:600; color:#1C1B22; box-shadow:inset 0 -2px 0 var(--pink); }
.content { padding:20px var(--fx); flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.content > .card { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
#viewContainer { flex:1; min-height:0; overflow-y:auto; }
#viewContainer.vc-liste { display:flex; flex-direction:column; overflow:hidden; }
#viewContainer.vc-liste [id$="List"] { flex:1; min-height:0; overflow:auto; border-radius:10px; }
/* Flach statt weich-gepolstert: ein duenner Rahmen traegt die Flaeche, kein
   Schatten mehr - Karten sollen nach Software aussehen, nicht nach Papier. */
.card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 18px;
  width:100%; }
/* ── Flaechen-Modus (registerView({ flaeche:true }), Vorlagen vorschlag-a-*):
   die Ansicht liegt direkt auf der Grundfarbe, ohne weisse Karten-Huelle.
   Inhalte stehen in weissen Karten (.ds), Seitenpanels sind weiss und reichen
   bis an den Rand. `eigenerKopf:true` blendet zusaetzlich den Shell-Kopf
   samt Unterreitern aus (Projekt-/Venue-Detail bauen ihren eigenen `.dk`).
   --fx = der waagrechte Innenabstand, an dem Kopf, Reiter und Inhalt fluchten. */
body.vc-eigenkopf .topbar, body.vc-eigenkopf .vc-subnav { display:none; }
body.vc-flaeche .content { padding:0; }
body.vc-flaeche .content > .card { background:transparent; border:0; border-radius:0; padding:0; }
body.vc-flaeche #viewContainer:not(.vc-liste) { display:flex; flex-direction:column; }
@media (max-width:640px){ :root { --fx:16px; } }
/* Detailkopf (Projekt/Venue): Zurueck-Link, ID + Titel + Status, Knoepfe
   rechts, darunter die Reiter als Unterstrich-Leiste — eine Linie trennt
   Kopf und Inhalt ueber die volle Breite. */
.dk { flex:none; padding:18px var(--fx) 0; display:flex; flex-direction:column; gap:12px;
  border-bottom:1px solid var(--border); }
/* Der Kopf (Zurueck, Titel, Knoepfe, Reiter) bleibt beim Scrollen stehen.
   Scrollbereich ist #viewContainer, `.dk` sein direktes Kind — darum reicht
   sticky. Die app-weit klebenden Tabellenkoepfe (`.wb-table thead th`,
   top:0) wuerden darunter verschwinden und laufen in den Reitern normal mit.
   Auf dem Handy bleibt der Kopf beweglich, sonst nimmt er den halben
   Bildschirm ein. */
.dk { position:sticky; top:0; z-index:20; background:var(--bg); }
.dk-inhalt .wb-table thead th { position:static; }
@media (max-width:640px) { .dk { position:static; } }
.dk-back { display:inline-flex; align-items:center; gap:4px; align-self:flex-start; font-size:13px;
  color:var(--muted); text-decoration:none; }
.dk-back:hover { color:var(--navy); }
.dk-back .psub-i { width:14px; height:14px; }
.dk-zeile { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dk-t1 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dk h1 { margin:0; font-size:24px; font-weight:600; letter-spacing:-.02em; color:#1C1B22; }
.dk .pd-id { padding:2px 6px; border-radius:4px; font-weight:500; background:#FBE9EE; color:#C21D48; }
.dk-sub { display:block; font-size:14px; color:var(--muted); margin-top:4px; }
.dk-akt { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dk .pd-status { display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px;
  border-radius:14px; background:#ECEBFA; color:#3B3A8F; font-size:13px; font-weight:600; }
.dk .pd-status i { width:8px; height:8px; border-radius:50%; background:#474397; }
.dk-btn { height:36px; padding:0 14px; border:1px solid #DCD8CF; border-radius:8px; background:#fff;
  font:inherit; font-size:14px; font-weight:500; color:#1C1B22; display:inline-flex; align-items:center;
  gap:6px; cursor:pointer; text-decoration:none; }
.dk-btn:hover { border-color:var(--muted); }
.dk-btn.aktiv { border-color:var(--pink); color:var(--pink); }
.dk-btn .psub-i { width:15px; height:15px; }
.dk .pd-tabs { margin:0; border-bottom:0; gap:22px; }
.dk .pd-tab { padding:10px 0; font-size:14px; font-weight:400; color:var(--muted); border-bottom:0; }
.dk .pd-tab:hover { color:#1C1B22; }
.dk .pd-tab.aktiv { font-weight:600; color:#1C1B22; box-shadow:inset 0 -2px 0 var(--pink); }
.dk-inhalt { flex:1 0 auto; display:flex; flex-direction:column; padding:24px var(--fx) 32px; }
.dk-inhalt .ds-t { font-size:13px; font-weight:600; color:#45434F; text-transform:none; letter-spacing:0; }
/* Seitenpanel-Layouts (Venue-Uebersicht, Bemerkungen, Chat & Verlauf) greifen
   ueber den Innenabstand hinaus bis an alle Raender und fuellen die Hoehe —
   das weisse Panel rechts laeuft wie in der Vorlage bis ganz nach unten. */
.dk-inhalt > .vd-2, .dk-inhalt > .pu-3, .dk-inhalt > .bm-page, .dk-inhalt > .cv-2 { flex:1 0 auto; margin:-24px calc(-1 * var(--fx)) -32px; }
.dk-inhalt > .vd-2 > :first-child, .dk-inhalt > .bm-page > .bm-main { padding:24px var(--fx) 32px; min-width:0; }
/* Abschnitte direkt auf der Grundfarbe (Titel ausserhalb, Inhalt in weissen
   Karten) — Vorlage: „Projekte 1" / „Notizen & Verlauf" im Venue-Detail. */
.fl-sek { display:flex; flex-direction:column; gap:10px; }
.fl-sek + .fl-sek { margin-top:28px; }
.fl-h { margin:0; font-size:13px; font-weight:600; color:#45434F; display:flex; align-items:center; gap:6px; }
.fl-h span { color:#9794A0; font-weight:500; }
.fl-box { background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px;
  display:flex; flex-direction:column; gap:10px; }
.fl-box label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.fl-box textarea { border:0; outline:none; resize:vertical; min-height:56px; font:inherit; font-size:14px;
  color:#1C1B22; background:transparent; padding:0; }
.fl-fuss { display:flex; justify-content:space-between; align-items:center; gap:10px;
  border-top:1px solid #EFEDE8; padding-top:10px; }
.fl-fuss > span { font-size:12px; color:#9794A0; }
.fl-btn-dunkel { height:32px; padding:0 12px; border:0; border-radius:7px; background:#1C1B22; color:#fff;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.fl-btn-dunkel:disabled { opacity:.6; cursor:default; }
.fl-leer { border:1px dashed #D6D2C8; border-radius:10px; padding:28px; text-align:center; font-size:14px; color:var(--muted); }
/* Weisse Inhaltskarte in einem .fl-sek (Projekt-Uebersicht: Phase). */
.fl-karte { background:#fff; border:1px solid var(--border); border-radius:10px; padding:18px; }
.fl-karte-fuss { margin-top:14px; padding-top:12px; border-top:1px solid #EFEDE8; font-size:12.5px; color:var(--muted); }
.fl-karte-fuss b { color:#1C1B22; font-weight:600; }
.fl-links { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; padding:0 4px; }
.fl-notiz { font-size:13px; color:var(--muted); padding:0 4px; white-space:pre-wrap; }

/* ── Gemeinsame Tabellen-Optik ── */
input.filter { width:100%; margin-bottom:12px; padding:9px 12px; border:1px solid var(--border);
  border-radius:8px; font-size:13px; background:white; font-family:inherit; }
.wb-table { width:100%; border-collapse:collapse; font-size:13px; table-layout:auto; }
/* Heller, stiller Tabellenkopf statt vollflaechig navy-gefuellt - die dunkle
   Kopfzeile war die staerkste Einzelursache fuer den "bunten" Eindruck, weil
   sie auf fast jeder Listenansicht im Hub steht. */
.wb-table thead th { background:var(--th-bg); color:var(--muted); text-align:left; padding:8px 10px;
  font-size:12px; font-weight:650; cursor:pointer; user-select:none; position:sticky; top:0; z-index:5;
  border-bottom:1px solid var(--border); }
.wb-table thead th .pfeil { font-size:9px; margin-left:3px; color:var(--navy); opacity:.85; }
.wb-table tbody td { padding:7px 10px; border-bottom:1px solid #F3F1EC; overflow:hidden; text-overflow:ellipsis; }
.wb-table tbody tr:hover { background:#FAF9F6; }
.wb-id { font-family:'IBM Plex Mono',monospace; font-size:12px; color:#085041; }
.wb-badge { display:inline-block; background:#F0F1F6; color:#555; border-radius:99px; padding:1px 8px; font-size:11px; font-weight:600; }
.p-link { color:var(--pink); text-decoration:none; margin:0 2px; }
.empty-state { text-align:center; color:var(--muted); padding:26px; font-size:14px; }
.metrik { font-size:12px; color:var(--muted); margin-top:10px; font-family:'IBM Plex Mono',monospace; }
.metrik b { color:var(--cyan); }

/* Phasen-Segmentbalken */
.wb-phase .nm { display:block; font-size:11px; color:var(--muted); margin-top:3px; }
.seg { display:inline-flex; gap:2px; }
.seg i { width:14px; height:5px; border-radius:2px; background:#E3E5EE; display:inline-block; }
.seg i.d { background:var(--cyan); }
.seg i.c { background:var(--pink); }
.wb-badge.plan { background:#EEF0FB; color:#3C3489; }
.wb-badge.auf  { background:#FFF3E0; color:#8A5300; }
.wb-badge.live { background:#E7F6EF; color:#0A6B49; }
.wb-badge.ab { background:#FDECEE; color:#B4232A; }
.wb-badge.done { background:#EEF0F4; color:#5A6172; }
tr.klick { cursor:pointer; }
tr.klick:hover td { background:#FAF9F6; }
/* Projekt-Detailansicht */
.pd-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; }
.pd-headline { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pd-back { font-size:13px; font-weight:600; color:var(--muted); background:none; border:1px solid var(--border); text-decoration:none; padding:6px 12px; border-radius:8px; }
.pd-back:hover { color:var(--navy); border-color:var(--muted); }
.pd-id { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--pink); background:#FDF0F3; padding:2px 8px; border-radius:6px; font-weight:600; }
.pd-name { font-size:20px; font-weight:800; color:var(--navy); }
.pd-status { background:#EEF0FB; color:var(--navy2); border-radius:99px; padding:4px 14px; font-size:13px; font-weight:600; white-space:nowrap; }
/* Reiterleiste */
.pd-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:16px; overflow-x:auto; }
.pd-tab { background:none; border:none; border-bottom:2px solid transparent; padding:9px 14px; font-size:13px;
  font-weight:600; color:var(--muted); cursor:pointer; font-family:inherit; white-space:nowrap; }
.pd-tab:hover { color:var(--navy); }
.pd-tab.aktiv { color:var(--navy); border-bottom-color:var(--pink); }
.ds { border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:12px; background:#fff; }
.ds-t { font-size:12px; font-weight:700; color:var(--navy); margin-bottom:10px; text-transform:uppercase; letter-spacing:.03em; }
.dgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
.di-l { font-size:10px; }
.di-w { font-size:13px; }