/* ===========================================================================
   ALVA Projekt-Monitoring -- Stylesheet
   ---------------------------------------------------------------------------
   Folgt dem ALVA Design System:
     - Outfit (Ueberschriften) / Generalsans (Text) / Satoshi (Formulare)
     - hell als Grundzustand, Dunkel nur fuer die Kopfzeile
     - Inputs scharfkantig (radius 0), Buttons als Pille (radius 50px)
     - keine Gradients, kaum Schatten, Gelb nur fuer Aktion und Aktivzustand
     - keine Emoji in UI-Elementen: die Baureif-Ampel wird zum Farbpunkt MIT
       Textlabel (Farbe allein ist kein zugaengliches Signal)

   Bewusst ANDERS als der alte Apps-Script-Dialog:
     - Tableiste hell als Segment-Control statt schwarzer Balken (das System
       sagt: dunkle Flaechen sparsam)
     - Tabellen mit klebendem Kopf und eigenem Scrollbereich statt
       Flex-Akrobatik; im Browser scrollt einfach die Seite
     - Zahlen durchgehend mit Tabellenziffern und rechtsbuendig
   =========================================================================== */

:root {
  /* Marke */
  --alva-black: #050B13;
  --alva-yellow: #FFFC2E;
  --alva-anthrazit: #253040;
  --alva-light-blue: #5271FF;
  --pure-white: #FFFFFF;
  --alva-pale-grey: #EDEDED;
  --alva-steel: #899EBE;
  --alva-pale-steel: #BAC6D9;
  --alva-pale-yellow: #FFFED5;

  /* Funktional */
  --ok: #059669;
  --ok-bg: #E7F5EF;
  --warn: #B45309;
  --warn-bg: #FDF3E3;
  --bad: #DC2626;
  --bad-bg: #FCECEC;
  --info: #3B82F6;
  --neutral: #6B7280;

  /* Ampelfarben der Baureif-Logik */
  --ampel-gruen: #059669;
  --ampel-gelb: #EAB308;
  --ampel-orange: #EA8A0B;
  --ampel-rot: #DC2626;

  /* Flaechen */
  --ground: #F4F5F6;
  --card: var(--pure-white);
  --line: #E2E5EA;
  --line-strong: #CBD2DB;
  --ink: var(--alva-black);
  --ink-2: var(--alva-anthrazit);
  --ink-3: #5C6B80;
  --ink-4: var(--alva-steel);

  /* Raster */
  --pad: 20px;
  --radius-card: 9px;
  --radius-tag: 4px;
  --shadow-card: 0 1px 2px rgba(5, 11, 19, .04), 0 1px 12px rgba(5, 11, 19, .04);

  --font-head: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Generalsans', 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Satoshi', 'Generalsans', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: 1.15rem; letter-spacing: .2px; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
h4 { font-size: .85rem; }
p { margin: 0; }

a { color: var(--alva-light-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--alva-light-blue);
  outline-offset: 2px;
}

[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- Kopfzeile */
.app-head {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--pad);
  height: 52px;
  background: var(--alva-black);
  color: var(--pure-white);
}

.app-head .marke {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.app-head .marke svg { width: 62px; height: auto; display: block; flex: 0 0 auto; }
.app-head .titel {
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 400;
  color: var(--pure-white);
  white-space: nowrap;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.app-head .spacer { flex: 1 1 auto; }

.app-head nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.app-head nav a {
  color: rgba(255, 255, 255, .72);
  font-family: var(--font-ui);
  font-size: .8rem;
  padding: 6px 10px;
  border-radius: 50px;
}
.app-head nav a:hover { color: var(--pure-white); background: rgba(255, 255, 255, .1); text-decoration: none; }

.nutzer-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 10px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .08);
  font-family: var(--font-ui);
  font-size: .78rem;
  max-width: 260px;
}
.nutzer-chip .name {
  color: rgba(255, 255, 255, .9);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nutzer-chip img {
  width: 24px; height: 24px; border-radius: 50%;
  flex: 0 0 auto; object-fit: cover;
  background: rgba(255, 255, 255, .15);
}
.nutzer-chip button {
  background: none; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, .6);
  font-family: var(--font-ui); font-size: .75rem;
  padding: 4px 8px; border-radius: 50px;
}
.nutzer-chip button:hover { color: var(--pure-white); background: rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------ Datenstandbar */
.datenstand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px var(--pad);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--ink-3);
}
.datenstand .stand { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.datenstand .stand.ok { color: var(--ok); }
.datenstand .stand.warn { color: var(--warn); }
.datenstand .stand.bad { color: var(--bad); }
.datenstand .trenner { color: var(--alva-pale-steel); }
.datenstand .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* -------------------------------------------------------------------- Punkte */
.punkt {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex: 0 0 auto;
  background: currentColor;
}
.ampel {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: .75rem; white-space: nowrap;
}
/* Ampelpunkte deutlich groesser (Rueckmeldung: "etwas groesser machen") --
   13px statt 9px, mit einem hellen Ring, damit sie auf der grauen
   Hover-Flaeche der Tabellenzeile nicht verschwimmen. */
.ampel .punkt {
  width: 13px; height: 13px;
  box-shadow: 0 0 0 1.5px var(--pure-white), 0 0 0 2.5px rgba(5, 11, 19, .1);
}
/* In der Filterleiste (Baureif-Chips) bleibt es kompakt, dort steht der
   Punkt direkt neben seinem Textlabel im Chip. */
.chip .ampel .punkt { width: 10px; height: 10px; box-shadow: none; }
.ampel[data-farbe="gruen"]  { color: var(--ampel-gruen); }
.ampel[data-farbe="gelb"]   { color: #8A6D00; }
.ampel[data-farbe="gelb"] .punkt { background: var(--ampel-gelb); }
.ampel[data-farbe="orange"] { color: var(--ampel-orange); }
.ampel[data-farbe="rot"]    { color: var(--ampel-rot); }

/* ------------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-head);
  font-size: .78rem; font-weight: 500; letter-spacing: .4px;
  border-radius: 50px;
  padding: 7px 15px;
  border: 1px solid transparent;
  background: var(--pure-white);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--alva-pale-grey); }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg { width: 14px; height: 14px; flex: 0 0 auto; }

.btn-primaer { background: var(--alva-yellow); color: var(--alva-anthrazit); }
.btn-primaer:hover { background: #F2EF20; }
.btn-linie { border-color: var(--line-strong); }
.btn-linie:hover { border-color: var(--alva-anthrazit); background: transparent; }
.btn-still { background: transparent; color: var(--ink-3); }
.btn-still:hover { background: var(--alva-pale-grey); color: var(--ink); }
.btn-klein { padding: 4px 11px; font-size: .72rem; }
.btn-gefahr { color: var(--bad); }
.btn-gefahr:hover { background: var(--bad-bg); }

.btn-text {
  background: none; border: 0; padding: 0;
  font-family: var(--font-ui); font-size: .78rem; font-weight: 500;
  color: var(--alva-light-blue); cursor: pointer;
}
.btn-text:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------- Tabs */
.tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 10px var(--pad) 0;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 52px;
  z-index: 30;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs button {
  position: relative;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 14px 10px;
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--alva-black);
}
.tabs button .zahl {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 50px;
  background: var(--alva-pale-grey);
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
}
.tabs button[aria-selected="true"] .zahl { background: var(--alva-yellow); color: var(--alva-anthrazit); }
.tabs .tabs-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }

/* -------------------------------------------------------------------- Layout */
main { padding: var(--pad); }
.ansicht { display: none; }
.ansicht.aktiv { display: block; }

.karte {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.karte + .karte { margin-top: 14px; }
.karte-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.karte-kopf h2, .karte-kopf h3 { margin-right: auto; }
.karte-koerper { padding: 16px; }
.karte-koerper.eng { padding: 0; }

/* ------------------------------------------------------------------- Filter */
.filterleiste {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.filterleiste + .filterleiste { border-top: 0; }
.feld { display: inline-flex; align-items: center; gap: 6px; }
.feld > label, .filter-label {
  font-family: var(--font-ui);
  font-size: .74rem;
  color: var(--ink-4);
  white-space: nowrap;
}

input[type="text"], input[type="search"], input[type="date"], input[type="number"], select, textarea {
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--ink);
  background: var(--pure-white);
  border: 1px solid var(--line-strong);
  border-radius: 0;              /* scharfe Kanten -- Markensignatur */
  padding: 6px 9px;
  min-width: 0;
}
input:hover, select:hover, textarea:hover { border-color: var(--alva-anthrazit); }
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--alva-black);
  box-shadow: inset 0 -2px 0 0 var(--alva-yellow);
}
input[type="text"].suche, input[type="search"].suche { min-width: 240px; flex: 1 1 240px; max-width: 380px; }
select { padding-right: 6px; }
textarea { resize: vertical; min-height: 72px; width: 100%; }

label.schalter {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: .76rem; color: var(--ink-2);
  white-space: nowrap; cursor: pointer;
}
label.schalter input { accent-color: var(--alva-anthrazit); }

.chip-gruppe { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 50px;
  font-family: var(--font-ui); font-size: .74rem;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) {
  border-color: var(--alva-anthrazit);
  background: var(--alva-anthrazit);
  color: var(--pure-white);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--alva-light-blue); outline-offset: 2px; }

/* ------------------------------------------------------------------ Tabellen */
.tabelle-huelle {
  overflow: auto;
  /* Muss positioniert sein, sonst ist der Bezugsrahmen absolut positionierter
     Nachfahren (Tooltips, ::after-Kanten der klebenden Spalten) der Viewport
     statt dieser Kasten -- die werden dann NICHT vom overflow geklammert und
     schieben das ganze Dokument breiter als das Fenster. Sichtbar wurde das,
     seit die Tabelle ihre natuerliche Breite nehmen darf: die Seite selbst
     bekam einen horizontalen Scrollbalken und die Kopfzeile lief mit weg. */
  position: relative;
  /* max() statt reinem calc(): auf sehr kleinen Viewports wuerde
     calc(100vh - 320px) negativ und der Browser verwirft die Deklaration --
     dann waere die Tabelle bei 1.500 Zeilen ueber 200.000 px hoch statt
     scrollbar. */
  max-height: max(320px, calc(100vh - 320px));
  min-height: 240px;
}
table.daten {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
table.daten thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--alva-black);
  color: var(--pure-white);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .2px;
  text-align: left;
  padding: 7px 10px;
  white-space: nowrap;
  border-bottom: 0;
}
table.daten thead th .rolle-tag {
  font-size: 8.5px; font-weight: 700; letter-spacing: .3px;
  opacity: .75; margin-left: 4px; vertical-align: super;
}
table.daten thead th.rolle-S  { box-shadow: inset 0 3px 0 0 #5271FF; }
table.daten thead th.rolle-I  { box-shadow: inset 0 3px 0 0 #EA8A0B; }
table.daten thead th.rolle-E  { box-shadow: inset 0 3px 0 0 #12A594; }
table.daten thead th.rolle-SI {
  background-image: linear-gradient(90deg, #5271FF 0 50%, #EA8A0B 50% 100%);
  background-size: 100% 3px; background-repeat: no-repeat; background-position: top;
}
table.daten tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
table.daten tbody tr:hover td { background: #FAFBFC; }
table.daten tbody tr.klickbar { cursor: pointer; }
table.daten tbody tr.klickbar:hover td { background: var(--alva-pale-yellow); }
table.daten .zahl, table.daten th.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* nowrap nur in den Datenzellen -- im Kopf muss ein langes Label umbrechen
   duerfen, sonst laeuft es in die Nachbarspalte. */
table.daten tbody .zahl { white-space: nowrap; }
table.daten .mono { font-variant-numeric: tabular-nums; }
table.daten td.leer, table.daten td.laedt {
  color: var(--ink-4);
  font-family: var(--font-ui);
  padding: 28px 10px;
  text-align: center;
}
table.daten tfoot td {
  position: sticky; bottom: 0;
  background: var(--alva-pale-grey);
  font-weight: 600;
  padding: 7px 10px;
  border-top: 1px solid var(--line-strong);
}

.tabellen-fuss {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui); font-size: .75rem; color: var(--ink-4);
}

/* --------------------------------------------------------------------- Tags */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px;
  border-radius: var(--radius-tag);
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 500;
  letter-spacing: .2px; white-space: nowrap;
  background: var(--alva-pale-grey); color: var(--ink-3);
}
.tag-ok   { background: var(--ok-bg);   color: #04664B; }
.tag-warn { background: var(--warn-bg); color: #8A4108; }
.tag-bad  { background: var(--bad-bg);  color: #A81C1C; }
.tag-info { background: #E8EDFF;        color: #2B41A8; }
.tag-gelb { background: var(--alva-pale-yellow); color: #6B5A00; }

.hinweis-zart { color: var(--ink-4); font-size: 11px; font-family: var(--font-ui); }

/* ------------------------------------------------------------------ Kacheln */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 12px;
}
.kachel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 13px 15px;
}
.kachel .beschriftung {
  font-family: var(--font-ui);
  font-size: .72rem;
  color: var(--ink-4);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.kachel .wert {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.kachel .fuss {
  margin-top: 4px;
  font-family: var(--font-ui); font-size: .7rem; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.kachel.betont { border-color: var(--alva-anthrazit); }
.kachel.betont .wert { color: var(--alva-anthrazit); }

/* ------------------------------------------------------------- Aufklappbares */
details.klapp {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  margin-bottom: 12px;
  overflow: hidden;
}
details.klapp > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px;
  cursor: pointer;
  font-family: var(--font-head); font-size: .85rem; font-weight: 500;
  color: var(--ink);
  list-style: none;
}
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary::before {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform .15s;
  flex: 0 0 auto;
}
details.klapp[open] > summary::before { transform: rotate(45deg); }
details.klapp > summary:hover { background: #FAFBFC; }
details.klapp > summary .rechts { margin-left: auto; font-family: var(--font-ui); font-size: .74rem; color: var(--ink-4); }
details.klapp .klapp-koerper { padding: 0 15px 15px; border-top: 1px solid var(--line); padding-top: 13px; }

.erklaertext {
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--alva-pale-yellow);
  border-left: 3px solid var(--alva-yellow);
  padding: 11px 13px;
}
.erklaertext b { color: var(--ink); }
.erklaertext p + p { margin-top: 7px; }

/* -------------------------------------------------------------------- Banner */
.banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--radius-card);
  border: 1px solid;
  margin-bottom: 14px;
  font-size: 12.5px;
}
.banner .banner-koerper { flex: 1 1 auto; min-width: 0; }
.banner h4 { font-family: var(--font-head); font-size: .85rem; margin-bottom: 4px; }
.banner ul { margin: 6px 0 0; padding-left: 18px; }
.banner code {
  background: rgba(5, 11, 19, .07); padding: 0 4px;
  border-radius: 3px; font-size: 11.5px;
}
.banner-warn { background: var(--warn-bg); border-color: #E9C08B; }
.banner-warn h4 { color: #8A4108; }
.banner-bad { background: var(--bad-bg); border-color: #EEACAC; }
.banner-bad h4 { color: #A81C1C; }
.banner-info { background: #EDF1FF; border-color: #B9C6FF; }
.banner-info h4 { color: #2B41A8; }
.banner-aktionen { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------- Modal */
.modal-grund {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5, 11, 19, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px;
  overflow: auto;
}
.modal {
  background: var(--card);
  border-radius: var(--radius-card);
  width: 100%; max-width: 940px;
  box-shadow: 0 12px 48px rgba(5, 11, 19, .28);
}
.modal-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--card);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.modal-kopf h2 { margin-right: auto; }
.modal-koerper { padding: 18px; }
.modal-fuss {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-top: 1px solid var(--line);
}
.modal-fuss .rechts { margin-left: auto; display: flex; gap: 8px; }

.abschnitt + .abschnitt { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.abschnitt h3 { margin-bottom: 4px; }
.abschnitt .unterzeile { font-size: 12px; color: var(--ink-4); margin-bottom: 12px; }

.feldzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 10px; align-items: center;
  padding: 6px 0;
}
.feldzeile label { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-2); }
.feldzeile input { width: 100%; }

/* -------------------------------------------------------------------- Grafik */
.grafik { width: 100%; overflow-x: auto; }
.grafik svg { display: block; }
.grafik-legende {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 10px;
  font-family: var(--font-ui); font-size: .73rem; color: var(--ink-3);
}
.grafik-legende span { display: inline-flex; align-items: center; gap: 6px; }
.grafik-legende i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ------------------------------------------------------------------ Kalender */
.kalender-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 14px;
}
.monat { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.monat-kopf {
  padding: 9px 12px; background: var(--alva-pale-grey);
  font-family: var(--font-head); font-size: .85rem; font-weight: 500;
}
.monat-tage { display: grid; grid-template-columns: repeat(7, 1fr); }
.monat-tage .wochentag {
  text-align: center; padding: 5px 0;
  font-family: var(--font-ui); font-size: .66rem; color: var(--ink-4);
  border-bottom: 1px solid var(--line);
}
.monat-tage .tag {
  all: unset;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 0 6px;
  font-family: var(--font-ui); font-size: .74rem; color: var(--ink-2);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  min-height: 40px; cursor: default;
  font-variant-numeric: tabular-nums;
}
.monat-tage .tag.leer { background: #FBFBFC; color: var(--alva-pale-steel); }
.monat-tage .tag.heute { background: var(--alva-pale-yellow); font-weight: 600; }
.monat-tage .tag.hat-treffer { cursor: pointer; }
.monat-tage .tag.hat-treffer:hover { background: var(--alva-pale-grey); }
.monat-tage .tag .punkte { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.monat-tage .tag .punkte .punkt { width: 5px; height: 5px; }

/* ------------------------------------------------------------------- Detail */
.detail-kopf {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.detail-kopf .titelblock { min-width: 0; }
.detail-kopf .titelblock .order {
  font-family: var(--font-ui); font-size: .74rem; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.detail-kopf .titelblock h2 { font-size: 1.2rem; }
.detail-kopf .aktionen { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.detail-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}
.paar-liste { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 12.5px; }
.paar-liste dt { font-family: var(--font-ui); font-size: .74rem; color: var(--ink-4); white-space: nowrap; }
.paar-liste dd { margin: 0; color: var(--ink-2); }

/* -------------------------------------------------------------------- Lade */
.lade-schirm {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 72px 20px; text-align: center;
}
.spinner {
  width: 26px; height: 26px;
  border: 2.5px solid var(--line);
  border-top-color: var(--alva-anthrazit);
  border-radius: 50%;
  animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }
.lade-schirm .text { font-family: var(--font-ui); font-size: .85rem; color: var(--ink-3); }

.skelett {
  background: linear-gradient(90deg, var(--line) 25%, #EEF0F3 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: schimmer 1.2s infinite;
  border-radius: 3px; height: 11px;
}
@keyframes schimmer { to { background-position: -200% 0; } }

/* --------------------------------------------------------------- Anmeldung */
.anmelde-huelle {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 52px); padding: 40px 20px;
}
.anmelde-karte {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 34px;
  width: 100%; max-width: 420px;
  text-align: center;
}
.anmelde-karte h2 { margin-bottom: 6px; }
.anmelde-karte p { color: var(--ink-3); font-size: 13px; margin-bottom: 22px; }
.anmelde-karte .btn { width: 100%; padding: 10px 18px; font-size: .85rem; }
.anmelde-karte .fussnote { margin-top: 18px; font-size: 11.5px; color: var(--ink-4); }

/* -------------------------------------------------------------------- Toast */
.toast-halter {
  position: fixed; z-index: 80;
  right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 400px;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--alva-black); color: var(--pure-white);
  border-radius: var(--radius-card);
  padding: 11px 14px;
  font-family: var(--font-ui); font-size: .8rem;
  box-shadow: 0 6px 24px rgba(5, 11, 19, .3);
}
.toast .punkt { margin-top: 5px; }
.toast.ok .punkt { background: #34D399; }
.toast.warn .punkt { background: #FBBF24; }
.toast.bad .punkt { background: #F87171; }
.toast button {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, .55); font-size: 1rem; line-height: 1; padding: 0 2px;
}
.toast button:hover { color: var(--pure-white); }
.toast a { color: var(--alva-yellow); }

/* ------------------------------------------------------------------ Legende */
.rollen-legende {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui); font-size: .72rem; color: var(--ink-4);
}
.rollen-legende span { display: inline-flex; align-items: center; gap: 6px; }
.rollen-legende i { width: 12px; height: 3px; display: inline-block; }

/* -------------------------------------------------------------------- Mobil */
@media (max-width: 720px) {
  :root { --pad: 12px; }
  .app-head .titel { display: none; }
  .nutzer-chip .name { display: none; }
  .tabelle-huelle { max-height: none; }
  .feldzeile { grid-template-columns: 1fr; }
  .filterleiste { gap: 6px; }
  input[type="text"].suche { min-width: 140px; }
}

@media print {
  .app-head, .tabs, .datenstand, .filterleiste, .toast-halter { display: none !important; }
  .tabelle-huelle { max-height: none; overflow: visible; }
  .karte { box-shadow: none; }
}

/* ---------------------------------------------------------------------------
   Bruecke zu den Klassennamen der portierten Logik: activateTab() in
   app/ui-dialog.js schaltet .active auf den Tab-Buttons und .active auf den
   .view-Containern (so war es im Apps-Script-Dialog). aria-selected wird von
   ui-shell.js gespiegelt; beide Selektoren muessen also greifen.
   --------------------------------------------------------------------------- */
.tabs button.active { color: var(--ink); border-bottom-color: var(--alva-black); }
.tabs button.active .zahl { background: var(--alva-yellow); color: var(--alva-anthrazit); }

.view { display: none; }
.view.active { display: block; }

/* ---------------------------------------------------------------------------
   activateTab() setzt auf den Listen-Containern inline display:flex (so war
   es im Apps-Script-Dialog, wo ein Flex-Kind das Schrumpfen uebernehmen
   musste). Ohne Richtungsangabe legt das die Kinder NEBENEINANDER -- im
   Forecast-Tab mit seinen fuenf Bloecken sieht das komplett zerlegt aus.
   Deshalb hier verbindlich als Spalte, mit gap statt margins.
   --------------------------------------------------------------------------- */
#projekte-list-view,
#kalender-list-view,
#massnahmen-list-view,
#forecast-list-view,
#datenqualitaet-list-view {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
#projekte-list-view > *,
#kalender-list-view > *,
#massnahmen-list-view > *,
#forecast-list-view > *,
#datenqualitaet-list-view > * {
  margin-top: 0;
  margin-bottom: 0;
  min-width: 0;
  flex: 0 0 auto;
}