/* Zeiterfassung - Gestaltung.
 *
 * Die Sache: ein Arbeitsblatt, kein Dashboard. Zehn Leute bei einem
 * Turbomaschinen-Dienstleister tragen taeglich Stunden ein und verteilen sie
 * vollstaendig auf Projekte. Also ist das Raster der Hauptdarsteller und alles
 * uebrige bleibt still.
 *
 * Eine Farbe. AST-Rot bedeutet genau eines: hier musst du hinsehen - nicht
 * verteilte Stunden, negativer Saldo, der heutige Tag. Bedienelemente stehen in
 * Graphit. Gruen und Orange gibt es nicht; ein Saldo im Plus braucht keine Farbe.
 *
 * Schrift: Public Sans, die Hausschrift von ast-turbo.com, allein.
 * Versalien nur in der Navigation - dort setzt AST sie auch.
 */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  /* --- Flaechen: Zeichnungsblatt, kuehl, nicht cremig --- */
  --paper:      #f4f5f6;
  --sheet:      #ffffff;
  --sheet-2:    #fafbfb;
  --ground:     #eceef0;   /* Wochenende */
  --ground-2:   #e2e5e8;   /* Feiertag */

  /* --- Graphit statt Fast-Schwarz; abgeleitet von ast-turbo.com (#33373D) --- */
  --ink:        #2b3038;
  /* Beide Grautoene auf mindestens 4,5 : 1 gegen die hellsten Flaechen
     (Blatt, Papier, Wochenende). Vorher lag die dritte Stufe bei 2,4 : 1 -
     Wochentage, Hinweise und Tagesnummern waren kaum zu lesen. */
  --ink-2:      #595e64;
  --ink-3:      #6c7177;
  --ink-inv:    #f7f8f9;

  --rule:       #dcdfe2;
  --rule-2:     #c1c6cb;   /* schwerer: Wochengrenze, Abschnittskante */

  /* --- Die einzige Farbe --- */
  --signal:     #a21a1e;
  --signal-2:   #7d1417;
  --signal-bg:  #f9eaeb;

  /* Masse. Radien klein und nach Hierarchie verschieden, nicht ueberall gleich. */
  --r-sm:   3px;
  --r:      6px;
  --r-lg:   10px;
  --lift:   0 12px 40px rgba(24, 28, 34, .14), 0 2px 6px rgba(24, 28, 34, .08);
  --lift-2: 0 24px 80px rgba(24, 28, 34, .24);

  --ease: cubic-bezier(.2, .8, .3, 1);
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;

  /* Altnamen, damit die Ansichtsdateien unveraendert weiterlaufen.
     Sie zeigen bewusst auf dieselben wenigen Werte - es gibt keine zweite Farbe. */
  --bg: var(--paper);          --surface: var(--sheet);
  --surface-2: var(--sheet-2); --surface-3: var(--ground);
  --text: var(--ink);          --text-2: var(--ink-2);   --text-3: var(--ink-3);
  --line: var(--rule);         --line-2: var(--rule-2);
  --accent: var(--ink);        --accent-2: #444c57;      --accent-soft: var(--ground);
  --brand: var(--signal);      --brand-soft: var(--signal-bg);
  --ok: var(--ink);            --ok-soft: var(--ground);
  --warn: var(--signal);       --warn-soft: var(--signal-bg);
  --bad: var(--signal);        --bad-soft: var(--signal-bg);
  --info-soft: var(--ground-2);
  --radius: var(--r); --radius-lg: var(--r-lg); --radius-sm: var(--r-sm);
  --shadow: var(--lift);

  color-scheme: light;
}

/* Dunkel: Graphitgrund statt Papier. Das Rot hellt auf, sonst versinkt es. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #16191d;
    --sheet:     #1c2025;
    --sheet-2:   #21252b;
    --ground:    #262b31;
    --ground-2:  #2d333a;
    --ink:       #e9ebee;
    --ink-2:     #a3aab2;
    --ink-3:     #8b929a;
    --ink-inv:   #16191d;
    --rule:      #2c3138;
    --rule-2:    #3f4750;
    --signal:    #e8595e;
    --signal-2:  #ff7b80;
    --signal-bg: #331a1c;
    --accent-2:  #c9cfd6;
    --lift:      0 12px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
    --lift-2:    0 24px 80px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .btn.primary { color: var(--ink-inv); }
}
:root[data-theme="dark"] {
  --paper:     #16191d;
  --sheet:     #1c2025;
  --sheet-2:   #21252b;
  --ground:    #262b31;
  --ground-2:  #2d333a;
  --ink:       #e9ebee;
  --ink-2:     #a3aab2;
  --ink-3:     #8b929a;
  --ink-inv:   #16191d;
  --rule:      #2c3138;
  --rule-2:    #3f4750;
  --signal:    #e8595e;
  --signal-2:  #ff7b80;
  --signal-bg: #331a1c;
  --accent-2:  #c9cfd6;
  --lift:      0 12px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  --lift-2:    0 24px 80px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
:root[data-theme="dark"] .btn.primary { color: var(--ink-inv); }

/* Schriftwahl in den Einstellungen. "Hausschrift" ist Public Sans. */
:root[data-font="system"]  { --sans: system-ui, "Segoe UI", -apple-system, Roboto, sans-serif; }
:root[data-font="arial"]   { --sans: Arial, Helvetica, sans-serif; }
:root[data-font="verdana"] { --sans: Verdana, Tahoma, "DejaVu Sans", sans-serif; }
:root[data-font="georgia"] { --sans: Georgia, "Times New Roman", serif; }

* { box-sizing: border-box; }
/* Muss nach den Layoutregeln greifen: display:flex/grid wuerde [hidden] sonst ueberstimmen. */
[hidden] { display: none !important; }
/* min-height, nicht height: mit height:100% war der Body genau ein Fenster hoch,
   und die klebende Kopfleiste klebt nur innerhalb ihres Elternelements - wer
   weiter als eine Fensterhoehe scrollte (Jahresansicht), nahm sie mit nach oben. */
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: calc(14px * var(--fs, 1));
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in srgb, var(--signal) 22%, transparent); }

/* Tastaturbedienung muss sichtbar sein - Graphit, nicht das Signalrot;
   sonst sieht jedes angetippte Feld nach Fehler aus. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

* { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rule-2); border-radius: 99px;
  border: 4px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }

/* ------------------------------------------------------------- Kopfleiste */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 36px;
  height: 56px; padding: 0 var(--gutter, clamp(16px, 2.2vw, 36px));
  background: var(--paper);
  border-bottom: 1px solid var(--rule-2);
}
.brand { display: flex; align-items: center; gap: 14px; flex: none; }
/* Das Logo ist eine Bildmarke mit eigenen Proportionen - nur die Hoehe wird
   gesetzt, die Breite folgt daraus. Es traegt sein Rot selbst; deshalb steht
   daneben kein zweiter roter Balken mehr. */
.brand img {
  height: 26px; width: auto; display: block; flex: none;
}
.brand-sep { width: 1px; height: 22px; background: var(--rule-2); flex: none; }
/* Versalien nur hier - so setzt AST sie auf der eigenen Seite auch. */
.brand-name {
  font-weight: 600; font-size: calc(12px * var(--fs, 1)); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .16em;
}

/* Bei fuenf Reitern und schmalem Fenster muss die Leiste schieben duerfen,
   sonst drueckt sie die Seite auseinander. Der Balken dazu bleibt unsichtbar. */
.tabs {
  display: flex; gap: 22px; align-items: center;
  flex: 1 1 auto; min-width: 0; overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; }
.tabs button {
  position: relative;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: calc(13px * var(--fs, 1)); font-weight: 500;
  color: var(--ink-2); padding: 18px 0;
  transition: color .15s var(--ease);
}
.tabs { position: relative; }
/* Der Strich unter dem aktiven Reiter ist ein eigenes Element und gleitet. */
.tab-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--signal); border-radius: 2px; pointer-events: none;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-current="page"] { color: var(--ink); font-weight: 600; }


.topbar-right { display: flex; align-items: center; gap: 16px; flex: none; }
.switcher { display: flex; align-items: center; gap: 8px; }
.switcher label { font-size: calc(12px * var(--fs, 1)); color: var(--ink-3); }
.who { font-size: calc(12px * var(--fs, 1)); color: var(--ink-2); text-align: right; line-height: 1.3; }
.who b { display: block; color: var(--ink); font-weight: 600; font-size: calc(13px * var(--fs, 1)); }

.icon-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  border: 0; background: none; color: var(--ink-2); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: var(--ground); color: var(--ink); }

/* ------------------------------------------------------------- Grundlayout */
.view {
  --gutter: clamp(16px, 2.2vw, 36px);
  padding: 28px var(--gutter) 88px;
  max-width: 2400px; margin: 0 auto;
}

.page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-2);
}
.page-head h1 {
  margin: 0; font-size: calc(28px * var(--fs, 1)); font-weight: 600;
  letter-spacing: -.018em; line-height: 1.15;
}
.page-head .sub {
  color: var(--ink-2); font-size: calc(13px * var(--fs, 1)); margin-top: 6px; max-width: 74ch;
}
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Kleines Feldlabel. Gemischtschreibung - Versalien an jeder Beschriftung
   waeren Dekoration, keine Information. */
.eyebrow { font-size: calc(12px * var(--fs, 1)); color: var(--ink-2); font-weight: 500; }

/* ---------------------------------------------------------- Bedienelemente */
button.btn, .btn {
  font: inherit; font-size: calc(13px * var(--fs, 1)); font-weight: 500;
  padding: 7px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--rule-2); background: var(--sheet); color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              transform .12s var(--ease), box-shadow .16s var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.97); }
.btn.primary:hover:not(:disabled), .btn.brand:hover:not(:disabled) {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 22%, transparent);
}
.btn:hover { background: var(--ground); border-color: var(--ink-3); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.brand { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn.brand:hover { background: var(--signal-2); border-color: var(--signal-2); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--ground); color: var(--ink); }
.btn.danger { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, transparent); }
.btn.danger:hover { background: var(--signal-bg); border-color: var(--signal); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
/* Gesperrter Hauptknopf: grau statt halbtransparent schwarz - er sah sonst
   bedienbar aus ("Monat einreichen" bei offenen Tagen). */
.btn.primary:disabled, .btn.brand:disabled {
  opacity: 1; background: var(--ground); border-color: var(--rule-2); color: var(--ink-3);
}
.submit-why { font-size: calc(12px * var(--fs, 1)); color: var(--signal); max-width: 220px; line-height: 1.3; }
.btn.sm { padding: 4px 10px; font-size: calc(12px * var(--fs, 1)); }

input, select, textarea {
  font: inherit; font-size: calc(13.5px * var(--fs, 1)); color: var(--ink);
  background: var(--sheet); border: 1px solid var(--rule-2);
  border-radius: var(--r-sm); padding: 7px 10px;
  transition: border-color .14s var(--ease);
}
select {
  appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink);
}
input[type="time"], input[type="date"] { font-variant-numeric: tabular-nums; }
input:disabled, select:disabled { background: var(--ground); color: var(--ink-3); cursor: not-allowed; }

label.field { display: block; margin-bottom: 16px; }
label.field > span {
  display: block; font-size: calc(12px * var(--fs, 1)); color: var(--ink-2); font-weight: 500;
  margin-bottom: 5px;
}
label.field > input, label.field > select, label.field > textarea { width: 100%; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.check {
  display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs, 1));
  cursor: pointer; padding: 5px 0;
}
input[type="checkbox"] { accent-color: var(--ink); width: 15px; height: 15px; padding: 0; }

/* Zweiwegschalter: eigene oder fremde Ansicht. Ein Auswahlfeld allein sagt
   nicht, in welchem der beiden Zustaende man sich befindet. */
.seg {
  display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  overflow: hidden; flex: none;
}
.seg-b {
  font: inherit; font-size: calc(13px * var(--fs, 1)); font-weight: 500;
  padding: 6px 14px; border: 0; background: var(--sheet); color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
}
.seg-b + .seg-b { border-left: 1px solid var(--rule-2); }
.seg-b:hover { background: var(--ground); color: var(--ink); }
.seg-b[aria-current="true"] { background: var(--ink); color: var(--sheet); }

/* ------------------------------------------------------------------ Karten */
/* Ein Rahmen, kein Schatten. Der Schatten bleibt dem Dialog vorbehalten -
   nur er liegt wirklich ueber der Seite. */
.card {
  background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden;
}
.card + .card { margin-top: 20px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 18px; border-bottom: 1px solid var(--rule); flex-wrap: wrap;
}
.card-head h2 { margin: 0; font-size: calc(14px * var(--fs, 1)); font-weight: 600; color: var(--ink); }
.card-body { padding: 18px; }
.card-body.flush { padding: 0; }

/* Das Raster laeuft bis an den Fensterrand - eine Tabelle mit 31 Spalten
   will die Breite, und Rundungen an den Ecken helfen ihr nicht. */
.bleed { margin-inline: calc(-1 * var(--gutter)); }
.bleed .card, .card.bleed {
  border-radius: 0; border-left: 0; border-right: 0;
}

/* ------------------------------------------- Ableseleiste (frueher Karten) */
/* Kennzahlen sind kein Kartenstapel, sondern eine Skala: eine Zeile,
   durch Striche geteilt, links ausgerichtet. */
.stats {
  display: flex; flex-wrap: wrap;
  gap: 0; margin: 0 0 22px;
  border-bottom: 1px solid var(--rule);
}
.stat {
  padding: 2px 30px 18px 0; margin-right: 30px;
  border-right: 1px solid var(--rule);
  min-width: 150px;
}
.stat:last-child { border-right: 0; margin-right: 0; }
.stat .k { font-size: calc(12px * var(--fs, 1)); color: var(--ink-2); font-weight: 500; }
.stat .v {
  font-size: calc(27px * var(--fs, 1)); font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: 3px; line-height: 1.1;
  color: var(--ink);
}
.stat .n { font-size: calc(12px * var(--fs, 1)); color: var(--ink-3); margin-top: 2px; }
/* Im Plus zu sein braucht keine Farbe. Im Minus zu sein schon. */
.stat.pos .v { color: var(--ink); }
.stat.neg .v { color: var(--signal); }

/* --------------------------------------------------------------- Abzeichen */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: var(--r-sm);
  font-size: calc(12px * var(--fs, 1)); font-weight: 500; white-space: nowrap;
  border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2);
}
.pill.ok    { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.pill.info  { background: var(--ground); border-color: var(--rule-2); color: var(--ink); }
.pill.warn,
.pill.bad   { background: var(--signal-bg); border-color: color-mix(in srgb, var(--signal) 35%, transparent); color: var(--signal); }
.pill.brand { background: var(--signal); border-color: var(--signal); color: #fff; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --------------------------------------------------------------- Tabellen */
.tw { overflow: auto; max-width: 100%; }
table.grid {
  border-collapse: separate; border-spacing: 0; width: 100%;
  font-variant-numeric: tabular-nums;
}
table.grid th, table.grid td {
  border-bottom: 1px solid var(--rule); padding: 8px 14px;
  text-align: right; white-space: nowrap;
}
table.grid th {
  position: sticky; top: 0; z-index: 2;
  background: var(--sheet-2); color: var(--ink-2);
  font-weight: 500; font-size: calc(12px * var(--fs, 1));
  border-bottom-color: var(--rule-2);
}
table.grid th.l, table.grid td.l { text-align: left; }
table.grid tbody tr:hover td { background: var(--sheet-2); }
table.grid tr.total td {
  font-weight: 600; background: var(--sheet-2);
  border-top: 1px solid var(--rule-2);
}
table.grid .muted { color: var(--ink-3); }
table.grid tbody tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------- Sortier-/Filterkopf */
table.grid.dt th.dt-sort { cursor: pointer; user-select: none; }
table.grid.dt th.dt-sort:hover { background: var(--ground); color: var(--ink); }
.dt-arrow { font-size: calc(10px * var(--fs, 1)); color: var(--ink-3); }
/* Die Filterzeile klebt unter der Beschriftung, nicht darueber - sonst
   verschwindet beim Scrollen das, wonach gefiltert wird. */
table.grid.dt thead tr.dt-filters th {
  top: 33px; padding: 5px 8px 7px; background: var(--sheet-2);
  border-bottom: 1px solid var(--rule-2);
}
table.grid.dt thead tr.dt-filters input,
table.grid.dt thead tr.dt-filters select {
  width: 100%; min-width: 68px; padding: 3px 7px; font-size: calc(12px * var(--fs, 1));
  font-weight: 400; color: var(--ink); background: var(--sheet);
}
table.grid.dt thead tr.dt-filters select { padding-right: 22px; }
table.grid.dt thead tr.dt-filters input::-webkit-search-cancel-button { cursor: pointer; }
.dt-count { font-size: calc(12px * var(--fs, 1)); color: var(--ink-2); font-variant-numeric: tabular-nums; }
table.grid tr.row-archived td { color: var(--ink-3); }

/* ------------------------------------------------------------ Monatsraster */
/* Der Rahmen begrenzt die Hoehe und scrollt selbst - in beide Richtungen.
   Solange die Seite scrollte, wanderte der Datumskopf nach oben aus dem Bild
   und der waagrechte Balken sass am Fuss einer sehr langen Tabelle, also dort,
   wo man ihn nicht erreicht. Jetzt bleiben Kopf und linke Spalten stehen. */
/* Die Hoehe setzt das Skript: genau bis zum unteren Fensterrand. Der Rollbalken
   ist hier bewusst breit - er ist die Bedienung, nicht bloss eine Anzeige. */
.grid-scroll {
  overflow: auto;
  height: 60vh;
  scrollbar-width: auto;
  /* Am Ende des Rasters nicht die Seite weiterrollen. Genau das liess den
     feststehenden Kopf "ploetzlich" verschwinden: das Raster war unten
     angekommen, das Rad rollte weiter - und schob die ganze Seite samt Kopf
     nach oben aus dem Bild. */
  overscroll-behavior: contain;
}
.grid-scroll::-webkit-scrollbar { width: 14px; height: 14px; }
.week-nav { gap: 2px; }
.week-nav .btn.sm { padding: 3px 8px; }

/* Breite der drei festen Spalten. Die Projektspalte setzt das Skript nach dem
   laengsten Namen; die beiden anderen wachsen mit der Schrift. */
.month-grid {
  min-width: 100%; font-size: calc(13px * var(--fs, 1)); border-collapse: separate;
  --w-l: 250px;
  --w-p: calc(128px * var(--fs, 1));
  --w-t: calc(66px * var(--fs, 1));
}
.month-grid th, .month-grid td { padding: 5px 8px; }

/* Die drei Spalten links stehen fest: Projekt, Phase, Summe. Die Summe steht
   damit neben dem Namen und nicht hinter einunddreissig Tagesspalten. */
.month-grid th.sticky-l, .month-grid td.sticky-l,
.month-grid th.sticky-p, .month-grid td.sticky-p,
.month-grid th.sticky-t, .month-grid td.sticky-t {
  position: sticky; z-index: 3; background: var(--sheet);
}
.month-grid th.sticky-l, .month-grid td.sticky-l {
  left: 0; text-align: left;
  min-width: var(--w-l); max-width: var(--w-l);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  padding-left: var(--gutter, 24px);
}
.month-grid th.sticky-p, .month-grid td.sticky-p {
  left: var(--w-l); text-align: left;
  min-width: var(--w-p); max-width: var(--w-p);
  overflow: hidden; text-overflow: ellipsis;
  color: var(--ink-2); font-size: calc(12.5px * var(--fs, 1));
}
.month-grid th.sticky-t, .month-grid td.sticky-t {
  left: var(--w-l); min-width: var(--w-t); max-width: var(--w-t); text-align: right;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--rule-2);
}
.month-grid.with-phase th.sticky-t, .month-grid.with-phase td.sticky-t {
  left: calc(var(--w-l) + var(--w-p));
}
/* Nur fuer den Augenblick des Messens: Projektspalte ohne Breitengrenze. */
.month-grid.measuring th.sticky-l, .month-grid.measuring td.sticky-l {
  min-width: 0; max-width: none;
}
.month-grid.measuring .pdesc { display: none; }
/* Doppelte Zeile im Tagesdialog */
.brow.dup select { border-color: var(--signal); }
/* Phasenspalte ausgeblendet: die Phase steht dann klein hinter dem Projektnamen. */
.month-grid.phase-off th.sticky-p, .month-grid.phase-off td.sticky-p { display: none; }
.month-grid.phase-off.with-phase th.sticky-t, .month-grid.phase-off.with-phase td.sticky-t { left: var(--w-l); }
.month-grid .pph { display: none; }
/* Schalter im Spaltenkopf: "‹" im Kopf der Phasenspalte blendet sie aus,
   "Phase ›" im Kopf der Projektspalte holt sie zurueck. */
.col-toggle {
  margin-left: 8px; padding: 1px 7px; border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--sheet); color: var(--ink-2); cursor: pointer;
  font: inherit; font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; line-height: 1.4;
}
.col-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.month-grid .col-when-off { display: none; }
.month-grid.phase-off .col-when-off { display: inline; }
.month-grid th.sticky-p .col-toggle { float: right; margin-left: 4px; }
.month-grid.phase-off .pph {
  display: inline; margin-left: 8px; font-size: calc(11.5px * var(--fs, 1)); color: var(--ink-3);
}

/* Der Kopf bleibt beim Senkrechtscrollen stehen; die Ecke oben links muss ueber
   beidem liegen, sonst schiebt sich eine Tagesspalte darunter durch. */
.month-grid thead th { position: sticky; top: 0; z-index: 4; background: var(--sheet-2); }
.month-grid thead th.sticky-l, .month-grid thead th.sticky-p, .month-grid thead th.sticky-t {
  z-index: 6; background: var(--sheet-2);
}
.month-grid tbody tr:hover td.sticky-l,
.month-grid tbody tr:hover td.sticky-p,
.month-grid tbody tr:hover td.sticky-t { background: var(--sheet-2); }

/* Projektnummer und Titel ohne Trennzeichen - die Schrift trennt sie. */
.pnum { font-variant-numeric: tabular-nums; }
.ptitle { color: var(--ink-2); margin-left: 9px; }
/* Folgezeile derselben Sache: der Name wird blasser wiederholt, damit man auch
   mitten im Raster weiss, wozu eine Phasenzeile gehoert. */
.month-grid td.sticky-l.contd { color: var(--ink-3); }
.month-grid td.sticky-l.contd .ptitle { color: var(--ink-3); }
.month-grid td.phase-cell { color: var(--ink); }
.month-grid td.d input.cell:disabled { background: none; color: var(--ink-2); cursor: default; }

/* Hinweis, der eine Handlung verlangt (Uhr laeuft noch vom Vortag). */
.card.notice { border-color: color-mix(in srgb, var(--signal) 45%, transparent);
               background: var(--signal-bg); }
.notice-body {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.month-grid tr.phase-adder td { padding-top: 2px; padding-bottom: 6px; }
.month-grid select.phase-add {
  font-size: calc(11.5px * var(--fs, 1)); padding: 2px 22px 2px 6px; color: var(--ink-2);
  border-color: var(--rule); background-color: transparent;
}
.month-grid select.phase-add:hover { color: var(--ink); border-color: var(--rule-2); }

.month-grid th.d, .month-grid td.d {
  min-width: calc(50px * var(--fs, 1)); max-width: calc(50px * var(--fs, 1));
  padding: 4px 2px; text-align: center;
}
.month-grid th.d { line-height: 1.25; font-size: calc(11px * var(--fs, 1)); color: var(--ink-3); font-weight: 500; }
.month-grid th.d .dn {
  font-size: calc(14px * var(--fs, 1)); color: var(--ink); font-weight: 600;
  display: block; font-variant-numeric: tabular-nums;
}
/* Die schwere Linie markiert den Wochenanfang - eine Linie, die etwas sagt. */
.month-grid .wk { border-left: 1px solid var(--rule-2); }
.month-grid .we  { background: var(--ground); color: var(--ink-3); }
.month-grid .hol { background: var(--ground-2); }
.month-grid td.d input.cell {
  width: 100%; border: 1px solid transparent; background: none; padding: 3px 1px;
  text-align: center; font-size: calc(13px * var(--fs, 1)); border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.month-grid td.d input.cell:hover { border-color: var(--rule-2); background: var(--sheet); }
.month-grid td.d input.cell:focus {
  background: var(--sheet); outline: 2px solid var(--ink); outline-offset: -1px;
  border-color: transparent;
}
/* Rueckmeldung auf die eigene Eingabe - Bewegung, die eine Handlung beantwortet. */
.month-grid td.d input.cell.saving { opacity: .4; }
.month-grid td.d input.cell.saved { animation: cellSaved .9s var(--ease); }
@keyframes cellSaved {
  0%   { background: color-mix(in srgb, var(--ink) 16%, transparent); }
  100% { background: transparent; }
}
.month-grid td.d input.cell { transition: background .15s var(--ease), border-color .15s var(--ease); }
.card { transition: border-color .2s var(--ease), box-shadow .25s var(--ease); }
.stat .v { transition: color .3s var(--ease); }

.month-grid tr.sec td {
  background: var(--sheet-2); font-weight: 600; font-size: calc(12px * var(--fs, 1)); color: var(--ink-2);
  padding-top: 11px; padding-bottom: 8px;
  border-top: 1px solid var(--rule-2); border-bottom-color: var(--rule-2);
}
.month-grid tr.sec td.sticky-l, .month-grid tr.sec td.sticky-p,
.month-grid tr.sec td.sticky-t { background: var(--sheet-2); }
.month-grid tr.sec:hover td { background: var(--sheet-2); }
.month-grid tr.calc td { background: var(--sheet-2); font-size: calc(12.5px * var(--fs, 1)); }
.month-grid tr.calc td.sticky-l, .month-grid tr.calc td.sticky-p,
.month-grid tr.calc td.sticky-t { background: var(--sheet-2); color: var(--ink-2); }

/* Die Tagessumme steht jetzt oben, direkt unter den Datumsspalten - sie schliesst
   den Kopf ab und traegt deshalb die schwere Linie unten. */
.month-grid tr.top-total td {
  background: var(--sheet-2); font-weight: 600;
  border-bottom: 1px solid var(--rule-2);
}
.month-grid tr.top-total:hover td { background: var(--sheet-2); }
/* Sie bleibt beim Scrollen unter dem Datumskopf stehen - "oben" soll auch oben
   bleiben, wenn man zu den Projekten weiter unten blaettert. Die Hoehe des
   Kopfes wird im Skript gemessen und hier eingesetzt. */
.month-grid tr.top-net td {
  position: sticky; top: var(--head-h, 40px); z-index: 4;
  background: var(--sheet-2); font-weight: 600;
}
.month-grid tr.top-total td {
  position: sticky; top: var(--row1-h, 70px); z-index: 4;
}
.month-grid tr.top-net td.sticky-l, .month-grid tr.top-net td.sticky-p,
.month-grid tr.top-net td.sticky-t,
.month-grid tr.top-total td.sticky-l,
.month-grid tr.top-total td.sticky-p,
.month-grid tr.top-total td.sticky-t { z-index: 6; }
.month-grid tr.top-net:hover td { background: var(--sheet-2); }

/* Phasenspalte: Auswahl fuer eine noch leere Zeile, "+" fuer weitere Phasen. */
.month-grid td.phase-cell { display: table-cell; }
.month-grid td.phase-cell > span { vertical-align: middle; }
.month-grid select.phase-pick {
  width: 100%; font-size: calc(12px * var(--fs, 1)); padding: 2px 20px 2px 6px;
  border-color: var(--rule-2); background-color: var(--sheet);
}
.month-grid select.phase-add {
  width: 26px; height: 22px; margin-left: 6px; padding: 0; vertical-align: middle;
  font-size: calc(13px * var(--fs, 1)); font-weight: 600; text-align: center; text-align-last: center;
  background-image: none; color: var(--ink-2); border-color: var(--rule-2);
  border-radius: var(--r-sm); cursor: pointer;
}
.month-grid select.phase-add:hover { color: var(--ink); border-color: var(--ink-3); }

/* Die offene Differenz ist die Zeile, die ueber das Einreichen entscheidet.
   Sie schliesst den Rechenteil ab und traegt deshalb die schwere Linie. */
.month-grid tr.open-row td {
  background: var(--sheet-2); font-weight: 600;
  border-bottom: 2px solid var(--ink); padding-bottom: 7px;
}
.month-grid tr.open-row td.sticky-l, .month-grid tr.open-row td.sticky-p,
.month-grid tr.open-row td.sticky-t { background: var(--sheet-2); }
.month-grid tr.open-row:hover td { background: var(--sheet-2); }

.cell-bad  { background: var(--signal-bg) !important; color: var(--signal); font-weight: 600; }
.cell-ok   { color: var(--ink); }
.cell-warn { color: var(--signal); }

th.d.clickable { cursor: pointer; }
th.d.clickable:hover { background: var(--ground); }
/* Heute: die einzige rote Marke im Raster. */
th.d.today { box-shadow: inset 0 3px 0 var(--signal); }
th.d.today .dn { color: var(--signal); }

/* Themen tragen ihre Beschreibung als zweite Zeile - dafuer ist sie da:
   damit auch jemand anders weiss, worum es in dem Thema geht. */
.pdesc {
  display: block; font-size: calc(11.5px * var(--fs, 1)); color: var(--ink-3);
  margin-top: 1px; overflow: hidden; text-overflow: ellipsis;
}
.topic-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.topic-row:last-of-type { border-bottom: 0; }
.topic-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.topic-h .pnum { color: var(--ink-2); font-size: calc(12.5px * var(--fs, 1)); }

/* ------------------------------------------------------- Jahres-Tagesraster */
/* Monatszeilen aus sechs Wochenpaketen. Die Pakete stehen in allen Zeilen an
   derselben Stelle, also liegen gleiche Wochentage untereinander. */
.yeargrid {
  display: grid;
  grid-template-columns: 38px repeat(6, minmax(0, 1fr));
  gap: 6px 12px;
  align-items: end;
  min-width: 760px;
}
.yeargrid .ym-label {
  font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--ink-2);
  text-align: right; padding: 0 4px 6px 0;
}
/* Ein Paket ist eine Woche: KW darueber, sieben Tage darunter, eine leichte
   Flaeche dahinter, damit die Woche als Einheit lesbar ist. */
.wk-pkg { display: flex; flex-direction: column; gap: 2px; }
.wk-cap {
  font-size: calc(10px * var(--fs, 1)); color: var(--ink-3); height: 13px; line-height: 13px;
  padding-left: 3px; font-variant-numeric: tabular-nums;
}
.wk-days {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
  padding: 3px; border-radius: var(--r);
  background: color-mix(in srgb, var(--ground) 55%, transparent);
}
.wk-pkg.wk-none .wk-days { background: transparent; }
.wk-head .wk-days { background: transparent; padding-top: 0; padding-bottom: 0; }
.yeargrid .dow {
  font-size: calc(10.5px * var(--fs, 1)); color: var(--ink-2); text-align: center; font-weight: 500;
}
.yeargrid .dow.we { color: var(--ink); font-weight: 700; }

.yd {
  position: relative;
  height: 26px; border-radius: 3px;
  background: var(--ground); cursor: pointer;
  border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
}
.yd-n {
  font-size: calc(9.5px * var(--fs, 1)); line-height: 1; font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .92); pointer-events: none;
}
.yd-gap { height: 26px; }
/* Wochenende: ein schraffierter Streifen, der durch das ganze Jahr laeuft -
   auch dort, wo das Paket leer ist, damit die Spalte nicht abreisst. */
.yd-gap.we { border-radius: 3px;
  background: repeating-linear-gradient(135deg, transparent 0 3px, var(--rule) 3px 4px); }
.yd.weekend {
  background: repeating-linear-gradient(135deg, var(--ground-2) 0 3px, var(--rule-2) 3px 4px);
  border-color: var(--rule-2);
}
.yd.weekend .yd-n, .yd.off .yd-n, .yd.HOLIDAY .yd-n, .yd.UNPAID .yd-n { color: var(--ink-2); }

/* Hier ist Farbe Information, nicht Schmuck: das Raster ist eine Karte mit
   Legende, und zehn Zustaende lassen sich in Graustufen nicht auseinanderhalten.
   Die Toene sind entsaettigt und unterscheiden sich zusaetzlich in der Helligkeit,
   damit sie auch bei Farbsehschwaeche trennbar bleiben. */
/* Nicht erfasst und Wochenende sind zwei verschiedene Aussagen und sahen beide
   nach nichts aus. Das Wochenende ist jetzt eine ruhige Flaeche - es ist ein
   Zustand -, ein nicht erfasster Arbeitstag ein gestrichelter Umriss: dort
   fehlt etwas. */
.yd.off      { background: transparent; border: 1px dashed var(--rule-2); }
/* Deutlich getrennte Farbtoene UND Helligkeiten: Buero dunkelblau, Homeoffice
   hellblau, Aussendienst orange, Urlaub gruen, Krank rot, Kompensation violett,
   Militaer gelboliv, Feiertag sand. Vorher lagen Buero, Homeoffice und Urlaub
   als drei gedeckte Blaugruen-Toene nebeneinander. */
.yd.work     { background: #1f4e8c; }                       /* Buero      */
.yd.home     { background: #7cc0f0; }                       /* Homeoffice */
.yd.field    { background: #e07b1a; }                       /* Aussendienst */
.yd.mixed    { background: linear-gradient(135deg, #1f4e8c 48%, #7cc0f0 52%); }
.yd.VACATION { background: #2e9e4f; }
.yd.SICK     { background: #d32f2f; }
.yd.ACCIDENT { background: #6a0f14; }
.yd.MILITARY { background: #b5a520; }
.yd.COMP     { background: #8e5bd1; }
/* Auf hellen Kacheln dunkle Tageszahl */
.yd.home .yd-n, .yd.MILITARY .yd-n { color: #10233a; }
.yd.UNPAID   { background: repeating-linear-gradient(45deg,
                 transparent, transparent 3px, var(--rule-2) 3px, var(--rule-2) 5px);
               border-color: var(--rule-2); }
.yd.HOLIDAY  { background: #e3cfa8; }
.yd.today    { outline: 2px solid var(--ink); outline-offset: 1px; }
.yd { transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
.yd:hover    { border-color: var(--ink); transform: scale(1.18); z-index: 2;
               box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 30%, transparent); }

.legend {
  display: flex; flex-wrap: wrap; gap: 7px 20px; margin-top: 16px;
  font-size: calc(12px * var(--fs, 1)); color: var(--ink-2);
}
.legend span { display: inline-flex; align-items: center; gap: 7px; }
/* Die Legendenfelder sind Muster, keine Tage - sie duerfen nicht mitwachsen. */
.legend i {
  width: 13px; height: 13px; min-width: 0; max-width: none;
  border-radius: 2px; display: inline-block; flex: none;
  border: 1px solid transparent;
}
.legend i.yd { height: 13px; width: 13px; display: inline-block; }

/* --------------------------------------------------------------- Diagramme */
.charts { display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: 40px; }
.charts.two { grid-template-columns: repeat(auto-fit, minmax(680px, 1fr)); gap: 44px; }
.charts .card-body { padding: 32px 28px 38px; }
.charts .card + .card { margin-top: 0; }
/* Im Dialog stehen die Diagramme untereinander und brauchen dieselbe Luft. */
.dl-sec > .chart-scroll, .dl-sec > div > .chart-scroll { margin-top: 14px; }
.dl-sec > div > .legend { margin-top: 20px; }
.chart { width: 100%; display: block; }
.chart text { font-size: calc(11.5px * var(--fs, 1)); fill: var(--ink-2); font-family: var(--sans); }
.chart .axis { stroke: var(--rule-2); stroke-width: 1; }
.chart .gl { stroke: var(--rule); stroke-width: 1; }
.chart .val { fill: var(--ink); font-size: calc(11px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.chart-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }

/* ---------------------------------------------------------------- Stoppuhr */
/* Die einzige Stelle der Oberflaeche, die sich von selbst bewegt. Das ist hier
   gerechtfertigt: es laeuft tatsaechlich etwas. */
.clock {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.clock-time {
  font-size: calc(58px * var(--fs, 1)); font-weight: 300; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.clock-sub { font-size: calc(12.5px * var(--fs, 1)); color: var(--ink-2); margin-top: 8px; }
.clock-blocks {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule);
}
.clock-block {
  display: flex; align-items: baseline; gap: 8px;
  font-size: calc(13px * var(--fs, 1)); font-variant-numeric: tabular-nums;
}
.clock-block .no { color: var(--ink-3); font-size: calc(11px * var(--fs, 1)); }
.clock-block .arr { color: var(--ink-3); }
.clock-block .pl { color: var(--ink-2); font-size: calc(12px * var(--fs, 1)); }
/* Der offene Block ist der, auf den es gerade ankommt. */
.clock-block.live { color: var(--signal); font-weight: 600; }
.clock-block.live .arr, .clock-block.live .no { color: var(--signal); }

/* ----------------------------------------------------------------- Filter */
.filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 22px;
}
.multi {
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  max-height: 250px; overflow: auto; background: var(--sheet); padding: 4px;
}
/* Die drei langen Listen nebeneinander und hoch. */
.filters.big { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.filters.big .multi { height: 400px; max-height: none; }
@media (max-height: 760px) { .filters.big .multi { height: 300px; } }
.multi label {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 8px; border-radius: var(--r-sm); cursor: pointer; font-size: calc(13px * var(--fs, 1));
}
.multi label:hover { background: var(--ground); }
.multi input { margin: 0; }
.multi-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 5px;
}
.multi-head .lnk {
  border: 0; background: none; font: inherit; font-size: calc(12px * var(--fs, 1)); cursor: pointer;
  color: var(--ink-2); padding: 0; text-decoration: underline;
  text-underline-offset: 2px;
}
.multi-head .lnk:hover { color: var(--ink); }
/* Zwischenueberschrift in einer Mehrfachauswahl: Projekte, Angebote, Archiv und
   die allgemeinen Quellen sind verschiedene Dinge und stehen deshalb getrennt. */
.multi-group {
  font-size: calc(11px * var(--fs, 1)); font-weight: 600; color: var(--ink-2);
  padding: 10px 8px 4px; border-top: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--sheet);
}
.multi-group:first-child { border-top: 0; padding-top: 4px; }
/* Suche ueber der Liste: ab einem Dutzend Eintraegen ist Scrollen kein Suchen. */
.multi-search {
  width: 100%; margin-bottom: 5px; padding: 5px 9px; font-size: calc(12.5px * var(--fs, 1));
}

/* Vorlagenleiste: die drei Fragen, die ohnehin immer gestellt werden. */
.preset-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--rule);
}
.preset-bar .preset-gap { flex: 1 1 24px; }

/* ---------------------------------------------------------------- Dialog */
/* Der einzige Ort mit Schatten: hier liegt wirklich etwas ueber der Seite.
   Die Bewegung beantwortet eine Handlung, deshalb darf sie sein. */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  backdrop-filter: blur(3px);
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.sheet {
  position: fixed; z-index: 61;
  top: 50%; left: 50%;
  /* Das Fenster nimmt, was das Browserfenster hergibt. Eine feste Obergrenze
     in Pixeln liess auf einem grossen Schirm die Haelfte der Flaeche ungenutzt,
     waehrend der Tagesdialog innen scrollen musste. */
  width: min(1720px, 95vw); height: auto; max-height: 95vh;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-2);
  display: flex; flex-direction: column; overflow: hidden;
  /* Ohne diese Verschiebung stuende das Fenster nach der Animation mit seiner
     linken oberen Ecke in der Bildmitte - die Keyframes allein reichen nicht,
     weil ihr Transform am Ende wieder verfaellt. */
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
@keyframes sheetIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.985); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes sheetOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(.99); }
}
/* Schmal ist nur ein Formular mit wenigen Feldern; auch das darf mitwachsen. */
.sheet.narrow { width: min(780px, 92vw); }
/* Der Tagesdialog hat zwei volle Spalten. Er nimmt, was das Browserfenster
   hergibt, statt bei einer festen Pixelzahl stehenzubleiben und innen zu scrollen,
   waehrend aussen die Haelfte des Schirms leer ist. */
.sheet.tall { width: min(1560px, 95vw); height: 95vh; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 24px; border-bottom: 1px solid var(--rule-2); flex: none;
}
.sheet-head h2 { margin: 0; font-size: calc(17px * var(--fs, 1)); font-weight: 600; letter-spacing: -.01em; }
.sheet-body { padding: 26px 30px 30px; overflow: auto; flex: 1; min-height: 0; }
.sheet-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule);
}

.dl-sec { margin-bottom: 44px; }
.dl-sec:last-child { margin-bottom: 0; }
.dl-sec > h3 {
  font-size: calc(13px * var(--fs, 1)); font-weight: 600; color: var(--ink);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-2);
}
/* Zwei Spalten mit fester Gewichtung statt gleicher Breite: links wird erfasst,
   rechts verteilt - und rechts steht mehr. Auf schmalen Fenstern stapeln sie. */
.dl-cols {
  display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(340px, 1.15fr);
  gap: 0 48px; align-items: start;
}
/* Die Mindestbreiten muessen samt Spalte passen, bevor der Umbruch greift -
   sonst quillt der Inhalt aus dem Dialog, der schmaler ist als das Fenster. */
@media (max-width: 800px) { .dl-cols { grid-template-columns: 1fr; gap: 0; } }

/* Kopfzeile des Tagesdialogs: Datum und die Kennzahlen des Tages nebeneinander. */
.day-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--rule-2);
}
.day-date { font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.day-figs { display: flex; gap: 30px; flex-wrap: wrap; }
.day-figs .k { font-size: calc(11px * var(--fs, 1)); color: var(--ink-2); }
.day-figs .v {
  font-size: calc(17px * var(--fs, 1)); font-weight: 600; font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Der Tagesdialog fuellt seine Hoehe; die beiden Spalten laufen bis unten. */
.sheet.tall .sheet-body > div:last-child { min-height: 0; }

/* minmax(0, …) statt blossem fr: eine fr-Spalte wird sonst nie schmaler als ihr
   Inhalt. Die Kopfzeile enthaelt kurze Woerter, die Datenzeile ein Auswahlfeld
   mit langen Projektnamen - dadurch bekamen beide verschiedene Spaltenbreiten
   und die Beschriftung stand neben statt ueber dem Feld. */
.tblock {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 10px; align-items: center; margin-bottom: 10px;
}
.tblock .no { font-size: calc(12px * var(--fs, 1)); color: var(--ink-3); text-align: right; }
.brow {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) 108px 32px;
  gap: 10px; align-items: center; margin-bottom: 10px;
}
/* Ohne das sprengt ein langer Projektname die Spalte wieder auf. */
.tblock > select, .tblock > input, .brow > select, .brow > input { min-width: 0; width: 100%; }
/* Die Kopfzeile ist eine Beschriftung, keine Zeile mit Feldern - sie bekommt
   denselben Raster, aber kleinere Schrift und etwas Abstand nach unten. */
.brow.brow-head, .tblock.tblock-head { margin-bottom: 6px; }

/* ------------------------------------------------------------------ Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--ink); color: var(--sheet);
  padding: 9px 18px; border-radius: var(--r-sm); z-index: 80;
  font-size: calc(13px * var(--fs, 1)); box-shadow: var(--lift);
}
.toast.bad { background: var(--signal); color: #fff; }

.empty { padding: 56px 24px; text-align: center; color: var(--ink-3); }
.hint { font-size: calc(12px * var(--fs, 1)); color: var(--ink-3); margin-top: 8px; line-height: 1.55; }
.spin { padding: 72px; text-align: center; color: var(--ink-3); }

/* Bewegung ausgeschaltet: wirklich aus. Die fruehere Regel setzte statt dessen
   jede Dauer auf eine Millisekunde - und legte damit ungewollt auf JEDE
   Eigenschaft jedes Elements einen Uebergang. Bei "reduziert" (Systemvorgabe)
   entscheidet das Skript: weiche Blenden bleiben, nichts wandert. */
.motion-none *, .motion-none *::before, .motion-none *::after {
  animation: none !important;
  transition: none !important;
}
.motion-reduced .btn:active, .motion-reduced .yd:hover { transform: none; }

@media (max-width: 900px) {
  .charts.two { grid-template-columns: 1fr; }
}
/* Mittlere Breite, vor allem mit groesserer Schrift: der Schriftzug und die
   Beschriftung "Ansicht als" weichen, damit alle Reiter sichtbar bleiben. */
@media (max-width: 1180px) {
  .topbar { gap: 22px; }
  .brand-name, .brand-sep, .switcher label { display: none; }
}
@media (max-width: 720px) {
  .topbar { gap: 16px; padding: 0 14px; height: 52px; }
  .brand-name, .who, .switcher label { display: none; }
  .tabs { gap: 16px; }
  .topbar-right { min-width: 0; }
  #switchUser { max-width: 140px; }
  /* Der Randabstand muss hier mitwandern, sonst zieht .bleed weiter nach aussen
     als das Polster breit ist und die Seite bekommt einen Querbalken. */
  .view { --gutter: 14px; padding: 20px var(--gutter) 64px; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .brow, .tblock { grid-template-columns: 1fr; }
  .stats { display: block; }
  .stat { border-right: 0; border-bottom: 1px solid var(--rule); margin-right: 0; padding-right: 0; }
  .sheet { width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .sheet-body, .sheet-head { padding: 16px; }
}


/* ------------------------------------------------------ Auf- und zuklappen */
.card-head.foldable { cursor: pointer; user-select: none; }
.card-head.foldable h2 { flex: 1; }
.fold-btn {
  width: 26px; height: 26px; margin: 0 6px 0 -6px; padding: 0; flex: none;
  border: 0; background: none; border-radius: var(--r-sm); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2);
}
.fold-btn:hover { background: var(--ground); color: var(--ink); }
.fold-btn .chev {
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease);
}
.card.folded .fold-btn .chev { transform: translateX(-1px) rotate(-45deg); }
.card.folded > :not(.card-head) { display: none !important; }
.card.folded > .card-head { border-bottom-color: transparent; }
.motion-none .fold-btn .chev { transition: none; }

/* Kreuztabelle der Auswertung: eigener Rollbereich mit stehendem Kopf und
   stehender erster Spalte. "Datum x Projekt" ergibt hunderte Zeilen - ohne das
   musste man an allen vorbei, um die Diagramme darunter zu erreichen. */
.pivot-scroll { max-height: 70vh; overflow: auto; overscroll-behavior: contain; }
.pivot-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--sheet-2); }
.pivot-scroll tbody td.l, .pivot-scroll thead th.l {
  position: sticky; left: 0; z-index: 1; background: var(--sheet);
}
.pivot-scroll thead th.l { z-index: 3; background: var(--sheet-2); }
.pivot-scroll tr.total td { position: sticky; bottom: 0; background: var(--sheet-2); z-index: 1; }
.pivot-scroll tr.total td.l { z-index: 2; }

/* Begruendung einer Zurueckweisung unter dem Monatskopf */
.month-reason { margin-top: 6px; color: var(--ink-2); }

/* ------------------------------------------------------------ Organisation */
.org-name { font-weight: 600; font-size: calc(13.5px * var(--fs, 1)); }
.org-pos { font-size: calc(12px * var(--fs, 1)); color: var(--ink-2); line-height: 1.3; }
.org-meta { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
.org-chip { font-size: calc(10.5px * var(--fs, 1)); padding: 1px 6px; border-radius: 999px; background: var(--ground); color: var(--ink-2); }
.org-team { font-size: calc(10.5px * var(--fs, 1)); color: var(--ink-3); margin-left: 2px; }
/* Linien: Senkrechte vom Vorgesetzten, Waagrechte ueber den Geschwistern, Senkrechte zu jedem Kind. */
.person-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.person-name { font-size: calc(22px * var(--fs, 1)); font-weight: 600; }
.org-teamlist { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------- Forecast */
.fc-chart { width: 100%; }
.fc-chart svg { display: block; }
/* Forecast-Farben: blau = Projekt, orange = Angebot, violett = Allgemein/IT/
   Schulung, gruen gestrichelt = Ferien/Krankheit. Hinten blass, vorne kraeftig. */
:root { --fc-proj: #2f6fd6; --fc-opp: #e0882b; --fc-ovh: #8a63c9; --fc-abs: #2fa36b; }
.fc-soll    { fill: color-mix(in srgb, var(--fc-proj) 16%, transparent); }
.fc-sollopp { fill: color-mix(in srgb, var(--fc-opp) 14%, transparent); stroke: color-mix(in srgb, var(--fc-opp) 45%, transparent); stroke-dasharray: 3 3; }
.fc-absent-bg { fill: color-mix(in srgb, var(--fc-abs) 10%, transparent); }
.fc-hatch { stroke: color-mix(in srgb, var(--fc-abs) 45%, transparent); stroke-width: 2; }
.fc-proj { fill: var(--fc-proj); }
.fc-opp  { fill: var(--fc-opp); }
.fc-ovh  { fill: var(--fc-ovh); }
.fc-proj.ist, .fc-opp.ist, .fc-ovh.ist { opacity: .92; }
.fc-istline { stroke: var(--signal); stroke-width: 2.5; stroke-dasharray: 4 3; }
.fc-hit { fill: transparent; cursor: pointer; }
.fc-hit:hover { fill: color-mix(in srgb, var(--fc-proj) 7%, transparent); }
.chart text.fc-empty { fill: var(--signal); font-weight: 600; }
.chart text.fc-full { fill: #2fa36b; font-weight: 600; }
.chart text.fc-now { fill: var(--signal); font-weight: 700; }
.legend i.fc-l { width: 14px; height: 10px; display: inline-block; border-radius: 2px; }
.fc-l.soll { background: color-mix(in srgb, var(--fc-proj) 16%, transparent); }
.fc-l.sollopp { background: color-mix(in srgb, var(--fc-opp) 14%, transparent); border: 1px dashed color-mix(in srgb, var(--fc-opp) 55%, transparent); }
.fc-l.absent { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--fc-abs) 50%, transparent) 0 2px, transparent 2px 5px); }
.fc-l.proj { background: var(--fc-proj); }
.fc-l.opp { background: var(--fc-opp); }
.fc-l.ovh { background: var(--fc-ovh); }
.fc-table td, .fc-table th { white-space: nowrap; }
table.grid td.neg { color: var(--signal); }
table.grid td.muted { color: var(--ink-3); }
.fc-fixed h3 { margin: 0 0 10px; font-size: calc(13px * var(--fs, 1)); }
.fc-alloc td { padding: 3px 4px; }
.fc-in { width: 62px; text-align: right; padding: 4px 6px; font-variant-numeric: tabular-nums; }
.fc-sub { font-size: calc(10px * var(--fs, 1)); color: var(--ink-3); text-align: right; }
.fc-meter { display: inline-block; width: 120px; height: 6px; border-radius: 3px; background: var(--ground); overflow: hidden; vertical-align: middle; }
.fc-meter i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }

/* Kopfknoepfe im Forecast: mit Symbol; "Saetze & Kapital" farbig hervorgehoben. */
.btn.fc-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.fc-ico { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fc-ico.p { background: var(--fc-proj); }
.fc-ico.c { background: var(--fc-ovh); }
.fc-ico.k { background: #fff; }
.btn.fc-btn.accent { background: linear-gradient(135deg, #2fa36b, #2f6fd6); color: #fff; border-color: transparent; }
[data-skin="soft"] .btn.fc-btn.accent { background: linear-gradient(135deg, #2fa36b, #2f6fd6); color: #fff; }
.btn.fc-btn.accent:hover { filter: brightness(1.06); }

/* Aufschluesselung: Projektnamen bekommen den Platz, Zahlen stehen daneben */
.fc-detail-proj { width: 100%; }
.fc-detail-proj td.l:first-child { white-space: normal; min-width: 340px; }
.fc-detail-proj td:not(.l), .fc-detail-proj th:not(.l) { width: 90px; }
.fc-mini { width: 180px; }
.fc-meter2 { display: block; width: 160px; }
.fc-meter2 i { display: block; height: 6px; border-radius: 3px; margin: 2px 0; }
.fc-meter2 i.fc.proj { background: var(--fc-proj); }
.fc-meter2 i.fc.opp { background: var(--fc-opp); }
.fc-meter2 i.ist { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.fc-pie-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.fc-pie-wrap table { flex: 1 1 220px; }
.fc-pie svg { display: block; }
.fc-pie-v { font-size: 15px; font-weight: 700; fill: var(--ink); dominant-baseline: middle; }
.fc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: color-mix(in srgb, var(--fc-proj) 7%, var(--sheet)) !important; }
td.fc-over input { border-color: color-mix(in srgb, var(--signal) 60%, transparent); }
td.pos { color: var(--ok); font-weight: 600; }
.fc-task-head { display: flex; gap: 34px; flex-wrap: wrap; margin-bottom: 18px; }
.fc-task-head .k { font-size: calc(11.5px * var(--fs, 1)); color: var(--ink-3); margin-bottom: 2px; }
.fc-task-head b { font-size: calc(17px * var(--fs, 1)); }
.fc-projects td.l:first-child { white-space: normal; min-width: 300px; }

/* Zurueck im Fenster */
.sheet-tools { display: flex; align-items: center; gap: 10px; flex: none; }

/* Ladebalken: laeuft oben, solange der Server rechnet */
.busy { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; overflow: hidden; pointer-events: none; }
.busy i { position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--fc-proj), #2fa36b, transparent);
  animation: busyRun 1.1s ease-in-out infinite; }
@keyframes busyRun { from { left: -40%; } to { left: 100%; } }
body.is-busy, body.is-busy * { cursor: progress !important; }

/* ------------------------------------------------------------ Organigramm 2 */
.org2 { --loc: var(--ink-2); }
.org2-top { display: flex; justify-content: center; margin: 4px 0 0; position: relative; padding-bottom: 28px; }
.org2-top::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 2px; height: 28px; background: var(--rule-2); }
.org2-lanes { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(300px, 1fr)); gap: 22px; position: relative; padding-top: 22px; overflow-x: auto; }
.org2-top + .org2-lanes::before { content: ''; position: absolute; top: 0; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); height: 2px; background: var(--rule-2); }
.org2-lanes + .org2-lanes { padding-top: 22px; }
.org2-lane { position: relative; background: var(--sheet); border: 1px solid var(--rule); border-top: 4px solid var(--loc); border-radius: 14px; padding: 14px 14px 18px; min-width: 0; }
.org2-top + .org2-lanes .org2-lane::before { content: ''; position: absolute; left: 50%; top: -26px; width: 2px; height: 22px; background: var(--rule-2); }
.org2-lane.loc-ch { --loc: #d52b1e; }
.org2-lane.loc-de { --loc: #e0a800; }
.org2-lane.loc-sa { --loc: #1f8a4c; }
.org2-lane.loc-tx { --loc: #2f6fd6; }
.org2-lhead { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.org2-lhead b { font-size: calc(15px * var(--fs, 1)); }
.org2-lhead .muted { margin-left: auto; font-size: calc(12px * var(--fs, 1)); }
.org2-flag { font: 700 calc(11px * var(--fs, 1))/1 inherit; color: #fff; background: var(--loc); border-radius: 6px; padding: 5px 7px; letter-spacing: .04em; }
.org2-card { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--sheet-2); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.org2-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(0,0,0,.25); border-color: var(--rule-2); }
.org2-card.hero { width: auto; min-width: 300px; padding: 14px 18px; background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.org2-card.hero .org-pos, .org2-card.hero .org-team { color: color-mix(in srgb, var(--sheet) 75%, transparent); }
.org2-card.hero .org-chip { background: color-mix(in srgb, var(--sheet) 16%, transparent); color: var(--sheet); border-color: transparent; }
.org2-card.head { border-left: 4px solid var(--loc); }
.org2-card.lead { background: var(--sheet); border-color: var(--rule-2); }
.org2-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.org2-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: calc(12px * var(--fs, 1)); color: #fff; background: var(--loc); }
.org2-card.hero .org2-av { background: var(--sheet); color: var(--ink); width: 42px; height: 42px; }
.org2-av.sm { width: 26px; height: 26px; font-size: calc(10px * var(--fs, 1)); background: color-mix(in srgb, var(--loc) 70%, var(--sheet)); }
.org2-groups { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--loc) 30%, transparent); }
.org2-group { display: flex; flex-direction: column; gap: 6px; }
.org2-gtitle { font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; padding: 4px 2px 0; }
.org2-members { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 2px solid var(--rule); margin-left: 16px; }
.org2-members .org2-group { margin: 6px 0; }
.org2-row { display: grid; grid-template-columns: 26px minmax(0, auto) minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%;
  text-align: left; font: inherit; color: inherit; cursor: pointer; background: none; border: 0; border-radius: 8px; padding: 5px 6px; }
.org2-row:hover { background: var(--sheet-2); }
.org2-row .org-name { font-weight: 600; white-space: nowrap; }
.org2-row .org-pos { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(12px * var(--fs, 1)); }
.org-chip.scope { background: color-mix(in srgb, var(--loc) 14%, transparent); border-color: transparent; }
.org2 .hit { outline: 2px solid var(--signal); outline-offset: 2px; }
.org2 .dim { opacity: .35; }
[data-skin="soft"] .org2-lane { border: 0; border-top: 4px solid var(--loc); border-radius: 24px; box-shadow: var(--raise); }
[data-skin="soft"] .org2-card { border: 0; box-shadow: var(--raise-s); border-radius: 16px; }
[data-skin="soft"] .org2-card.head { box-shadow: var(--raise-s), inset 4px 0 0 var(--loc); }
@media (max-width: 900px) {
  .org2-lanes { grid-template-columns: 1fr; }
  .org2-top + .org2-lanes::before, .org2-top + .org2-lanes .org2-lane::before { display: none; }
}

/* ------------------------------------------------------------ Planung */
.pl-avail { fill: color-mix(in srgb, var(--fc-proj) 14%, transparent); stroke: color-mix(in srgb, var(--fc-proj) 30%, transparent); }
.fc-l.pl-avail-l { background: color-mix(in srgb, var(--fc-proj) 14%, transparent); border: 1px solid color-mix(in srgb, var(--fc-proj) 30%, transparent); }
.fc-in.wide { width: 86px; }
.fc-in.manual { border: 2px solid var(--fc-opp); font-weight: 700; }
.pl-table td.l:first-child { min-width: 260px; white-space: normal; }
th.fc-now-th { color: var(--signal); }

/* ------------------------------------------------------------ Uebersicht */
.db-todo { display: flex; flex-direction: column; gap: 10px; }
.db-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px;
  background: var(--sheet-2); border-left: 4px solid var(--c, var(--ink-3)); }
.db-item.bad { --c: #d64545; background: color-mix(in srgb, #d64545 8%, var(--sheet)); }
.db-item.warn { --c: #e0882b; background: color-mix(in srgb, #e0882b 9%, var(--sheet)); }
.db-item.info { --c: #2f6fd6; }
.db-item.ok { --c: #2fa36b; background: color-mix(in srgb, #2fa36b 8%, var(--sheet)); }
.db-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--c); }
.db-txt { flex: 1; min-width: 0; }
.db-txt b { font-size: calc(14px * var(--fs, 1)); }
.db-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; margin-top: 26px; align-items: start; }
.db-cols .card + .card { margin-top: 0; }
.db-proj { display: grid; grid-template-columns: minmax(0, 1fr) 160px 90px; gap: 14px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.db-proj:last-child { border-bottom: 0; }
.db-proj-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-proj-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.db-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--fc-proj) 15%, transparent); overflow: hidden; }
.db-bar i { display: block; height: 100%; background: var(--fc-proj); border-radius: 4px; }
[data-skin="soft"] .db-item { border-radius: 18px; box-shadow: var(--raise-s); }
@media (max-width: 900px) { .db-cols { grid-template-columns: 1fr; } .db-proj { grid-template-columns: 1fr 90px; } .db-bar { grid-column: 1 / -1; } }

/* Forecast-Diagramm mit drei Balken je Monat */
.fc-proj.ist, .fc-opp.ist, .fc-ovh.ist { opacity: .55; }
.fc-cur { fill: color-mix(in srgb, var(--signal) 6%, transparent); }
.chart text.fc-tiny { font-size: 9px; fill: var(--ink-3); }
.fc-terms { margin-top: 16px; }
.fc-terms summary { cursor: pointer; font-weight: 600; color: var(--fc-proj); }
.fc-terms dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 12px 0 0; }
.fc-terms dt { font-weight: 700; }
.fc-terms dd { margin: 0; color: var(--ink-2); }
tfoot tr.total td { font-weight: 700; }

/* Ueberlappende Balken: eine feine Kante in Hintergrundfarbe trennt sie */
.fc-proj.ist, .fc-opp.ist, .fc-ovh.ist { opacity: 1; filter: saturate(.75) brightness(1.12); }

/* Planung: breiter, mit Zeitraumwahl */
.sheet.tall.wide { width: min(1900px, 98vw); }
.pl-range { margin-bottom: 14px; align-items: center; gap: 10px; }
.pl-range b { min-width: 170px; text-align: center; }

/* Monatsansicht: Projektnummer bleibt, die Bezeichnung kleiner und etwas eingerueckt;
   lange Namen enden mit … (ganzer Name im Tooltip). */
.month-grid td.sticky-l .ptitle { font-size: .84em; margin-left: 12px; color: var(--ink-3); }

/* Balken C6: freie Luecke ueber dem verplanten Balken */
.c6-free { fill: color-mix(in srgb, #d64545 6%, transparent); stroke: #d64545; stroke-width: 1.2; stroke-dasharray: 3 2; }
.c6-free-t { font-size: 10px; font-weight: 700; fill: #d64545; }
.fc-proj.ist, .fc-opp.ist, .fc-ovh.ist { filter: none; opacity: .8; }

/* ------------------------------------------------------------ Anmeldung */
.auth-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(900px 600px at 15% -10%, color-mix(in srgb, var(--signal) 10%, transparent), transparent 60%), var(--paper); }
.auth-card { width: min(400px, 100%); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--lift); padding: 34px 32px 28px; }
.auth-logo { height: 30px; display: block; }
.auth-app { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin-top: 10px; }
.auth-card h1 { font-size: 22px; margin: 26px 0 14px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); }
.auth-form input { width: 100%; padding: 10px 12px; font-size: 15px; }
.auth-go { margin-top: 6px; padding: 11px 15px; font-size: 14px; }
.auth-link { font-size: 13px; color: var(--ink-2); text-align: center; }
.auth-hint { font-size: 13px; color: var(--ink-2); margin: -4px 0 16px; line-height: 1.45; }
.auth-msg { font-size: 13px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--ground); margin-bottom: 14px; }
.auth-msg.bad { background: var(--signal-bg); color: var(--signal); }

/* ------------------------------------------------- Zweifach-Anmeldung */
.auth-card.wide { width: min(560px, 100%); }
.auth-code { font-size: 22px !important; letter-spacing: .25em; font-variant-numeric: tabular-nums; text-align: center; max-width: 220px; }
.tfa-steps { padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.45; }
.tfa-qr { margin: 10px 0 4px; }
.tfa-qr svg { width: 200px; height: 200px; display: block; border-radius: 8px; }
.tfa-manual summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.tfa-secret { font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: .08em; margin: 8px 0 4px; user-select: all; }
.tfa-codes { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 22px; padding: 14px 16px; background: var(--ground); border-radius: var(--r-sm); }
.tfa-codes code { font-size: 15px; letter-spacing: .06em; }
.tfa-field .pill { vertical-align: middle; }
.auth-screen { overflow-y: auto; } .auth-card { margin: auto; }