/**
 * nexus-board.css - die Board-Bausteine des Nexus
 *
 * Geladen von BEIDEN Seiten, die Board-Kacheln zeigen:
 *   index.php      Uebersicht - Arbeitstag, "Meine Arbeitszeit", Timer
 *   auswertung.php Auswertung - Zeitraum und die vier Auswertungs-Bereiche
 *
 * Die Datei hiess bis v0.27.0 `auswertung.css` und lag nur an der zweiten
 * Seite. Seit der Arbeitstag auf die Startseite gewandert ist (Joerg
 * 30.08.2026: "Wir teilen das Board"), teilen sich beide dieselben Klassen -
 * ein Umzug der geteilten Regeln nach dashboard.css waere fuenfzehn Bloecke
 * gewesen, ohne dass eine davon anders aussieht.
 *
 * Hier steht AUSSCHLIESSLICH Platzierung: wie breit ein Bereich in der
 * Panel-Reihe liegt und wie seine Teile darin nebeneinander stehen. Es gibt
 * keine zweite Panel-Optik, keine eigene Kachel, kein eigenes Diagramm.
 *
 *   Panel-Rahmen und Titel  -> .ds-tasks-block / .ds-tasks-block-title (dashboard.css)
 *   Spalten-Raster          -> .ds-panels-row (dashboard.css)
 *   Diagramme               -> blocks/bar-chart
 *   Ringe                   -> primitives/progress-ring
 *   Wochen-Streifen         -> blocks/time-grid (kompakt)
 *   Seitenrand              -> .idf-list-inset (list-view/grid-css)
 *
 * Die is-span-Regeln liegen bewusst HIER und nicht in dashboard.css: die
 * Klassen gibt es nur auf dieser Seite, und dashboard.css unangetastet zu
 * lassen erspart den Cache-Buster-Nachzug auf index.php und apps.php, die
 * dieselbe Datei mit ihrem eigenen Zaehler laden.
 *
 * Breakpoint-Kanon 1100 / 720 / 600 (T4/#454), keine eigenen Werte.
 */

/* ============================================================
   Seite
   ============================================================ */

/* .idf-list-page hat padding 0, den Rand bringt jedes Kind ueber
   .idf-list-inset selbst mit. Hier nur der senkrechte Rhythmus. */
/* Oben kein Polster: die Werkzeugleiste sitzt buendig unter der Subnavi,
   wie auf jeder Listen-Seite.

   KEIN max-width. In v0.4.0 stand hier ein Deckel von 1600 px, mittig -
   und der hat die Werkzeugleiste mit eingerueckt, waehrend Subnavi und
   App-Kopf darueber weiter ueber die volle Breite laufen. Die Leiste sass
   damit nicht mehr an ihrer Kante, und die Seite sah gequetscht aus
   (Joerg 30.08.2026: "Toolbar etc. alles passt jetzt nicht mehr").
   Ein Deckel muesste an den Bereichen haengen, nicht an der ganzen Spalte.
   Die Uebersicht ist aus demselben Grund vollflaechig. */
.ds-aw-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: 0 var(--space-12);
}

@media (max-width: 720px) {
  .ds-aw-main {
    gap: var(--space-4);
    padding-block: 0 var(--space-8);
  }
}

/* ============================================================
   Tag und Kalenderwoche, links im Kopf des Arbeitstags

   Kein Ueberschriften-Rang und keine Anrede: die trägt der App-Header
   der Uebersicht schon ("Willkommen im Nexus, <Name>"). Hier steht nur,
   welcher Tag es ist, auf einer Zeile mit den drei Zahlen rechts.

   align-items: flex-end setzt die Datumszeile auf die Hoehe der
   Zahl-LABEL, nicht der Zahlen: links eine Zeile, rechts zweizeilige
   Bloecke, und ohne den Anker haenge das Datum in der Mitte.
   ============================================================ */

.ds-aw-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.ds-aw-kopf-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ds-aw-datum {
  margin: 0;
  font-size: var(--font-base);
  line-height: var(--leading-base);
  color: var(--mid);
}

/* ============================================================
   Die drei Zahlen des Arbeitstags, rechts im Kopf

   Bewusst ohne Kachel-Rahmen: sie gehoeren zur Anrede und nicht
   zu den Bereichen darunter. blocks/stat-card waere der falsche
   Baustein - der ist der KPI-Streifen einer Auswertung, mit
   Rahmen, Ampel-Zustaenden und Klickbarkeit. Hier steht der
   eigene Tag, und der wird gelesen, nicht ausgewertet.
   ============================================================ */

.ds-aw-kopf-zahlen {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.ds-aw-zahl {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ds-aw-zahl > strong {
  font-size: var(--font-xxl);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ds-aw-zahl-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-xs2);
  color: var(--mid);
  white-space: nowrap;
}

@media (max-width: 720px) {
  /* Am Handy stehen die Zahlen unter der Datumszeile und ruecken enger
     zusammen; drei --font-xxl nebeneinander passen auf 375 px nicht in
     eine Zeile, und umgebrochen stuenden sie hoeher als die Kachel
     darunter. */
  .ds-aw-kopf-zahlen {
    gap: var(--space-5);
  }
  .ds-aw-zahl > strong {
    font-size: var(--font-title);
  }
}

/* ============================================================
   Laufender Timer - eine Kachel wie die anderen

   Bewusst keine dunkle Sonderflaeche: sie war so dominant, dass sie
   das Raster gesprengt hat (Joerg 30.08.2026). Der Akzent kommt vom
   Zustandspunkt und vom Knopf, nicht von der Flaeche.
   ============================================================ */

/* Aufgebaut wie der Arbeitszeit-Block nebenan, und zwar in derselben
   Richtung: Knopf links, Ring daneben, die Beschriftung rechts. Dort
   steht an der Stelle der Wochen-Streifen. */
/* KEIN `flex: 1` hier. Damit fuellte der Inhalt den ganzen Kachel-Body,
   und weil er seine Kinder mittig ausrichtet, rutschte der Stoppen-Knopf
   auf die Mitte der GANZEN Kachel - waehrend der Stempel-Knopf nebenan auf
   der Mitte seiner Zeile sitzt, weil das Arbeitszeit-Raster nicht gestreckt
   wird. Gemessen: 13 px Versatz bei bündigen Ringen. Beide Inhalte stehen
   jetzt oben in ihrem Body, und beide Knoepfe auf einer Linie. */
.ds-aw-timer-inhalt {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Der Aufgabenname darf zwei bis drei Zeilen brauchen. Kein Ellipsis:
   welche Aufgabe laeuft, ist die Aussage der Kachel, und ein
   abgeschnittener Name beantwortet sie nicht.

   `flex: 1 0 130px` ist die Untergrenze, unter der er lieber unter Knopf
   und Ring rutscht: ohne sie schrumpfte er in der engen Kachel auf elf
   Pixel und brach BUCHSTABENWEISE um - neunundzwanzig Zeilen, und die
   Kachel wurde 642 px hoch. `break-word` statt `anywhere` bricht nur ein
   Wort auf, das allein zu lang ist. */
.ds-aw-timer-aufgabe {
  flex: 1 0 130px;
  min-width: 0;
  font-size: var(--font-base);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semi);
  color: var(--ink);
  overflow-wrap: break-word;

  /* Doppelklick oeffnet die Aufgabe (Issue 930). Nur Cursor und ein Tooltip,
     keine Oeffnen-Pille: die gibt es laut Design-Manual nur, wenn der Klick
     auf eine ANDERE SEITE navigiert, und hier oeffnet ein Modal.

     user-select: none ist hier PFLICHT, nicht Kosmetik: ein Doppelklick auf
     ein Wort markiert es, und row-open bricht bei bestehender Textmarkierung
     ab ("wer Text markiert, wollte nicht oeffnen"). Ohne die Zeile oeffnete
     die Kachel nie. Dieselbe Regel steht aus demselben Grund an jeder
     Listenzeile (idf-list-grid.css:444). */
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.ds-aw-timer-inhalt > .idf-btn,
.ds-aw-timer-inhalt > .ds-aw-ring {
  flex-shrink: 0;
}

/* Pausiert kommt von aussen (jemand haelt die Uhr im Timer-Fenster an).
   Dann nimmt sich die Kachel zurueck, statt einen Fortschritt zu zeigen,
   der gerade nicht laeuft. */
.ds-aw-timer.is-pausiert .ds-aw-ring-zahl,
.ds-aw-timer.is-pausiert .ds-aw-timer-aufgabe {
  color: var(--mid);
}

/* ============================================================
   Spurbreiten in der Panel-Reihe

   ACHTUNG bei den beiden Korrekturen unten: `span 4` wird in einer
   zweispurigen Reihe NICHT von selbst gedeckelt. CSS Grid haengt fuer
   ein auto-platziertes Kind implizite Spalten an, und die Reihe waere
   ab 1100 px still wieder vierspurig.
   ============================================================ */

.ds-panels-row > .ds-tasks-block.is-span-1 { grid-column: span 1; }
.ds-panels-row > .ds-tasks-block.is-span-2 { grid-column: span 2; }
.ds-panels-row > .ds-tasks-block.is-span-3 { grid-column: span 3; }
.ds-panels-row > .ds-tasks-block.is-span-4 { grid-column: span 4; }

@media (max-width: 1100px) { /* Reihe ist zweispurig */
  /* 3 und 4 werden gedeckelt, 1 waechst auf die volle Zeile mit: eine
     halb leere Kachel neben einer vollen ist kein Raster mehr. */
  .ds-panels-row > .ds-tasks-block.is-span-1,
  .ds-panels-row > .ds-tasks-block.is-span-3,
  .ds-panels-row > .ds-tasks-block.is-span-4 { grid-column: span 2; }
}

@media (max-width: 720px) { /* Reihe ist einspurig */
  .ds-panels-row > .ds-tasks-block.is-span-1,
  .ds-panels-row > .ds-tasks-block.is-span-2,
  .ds-panels-row > .ds-tasks-block.is-span-3,
  .ds-panels-row > .ds-tasks-block.is-span-4 { grid-column: span 1; }
}

/* Alle Karten einer Reihe gleich hoch, damit ein sauberes Raster entsteht.
   .ds-panels-row steht auf `align-items: start` - richtig fuer die
   Uebersicht, wo unterschiedlich lange Listen nebeneinander stehen, hier
   falsch: die Bereiche sind Kacheln und keine Listen. Der Override haengt
   an .ds-aw-board und laesst die Startseite unberuehrt. */
.ds-panels-row.ds-aw-board {
  align-items: stretch;
}

/* ============================================================
   Innenleben eines Bereichs
   ============================================================ */

/* .ds-tasks-body ist eine Flex-Spalte ohne Abstand (die Panels der
   Uebersicht stapeln randlose Zeilen). Ein Auswertungs-Bereich stapelt
   dagegen eigenstaendige Bloecke, die Luft brauchen.

   `flex: 1` gehoert dazu, seit die Karten einer Reihe gleich hoch sind:
   ohne das streckt sich nur die Karte und der Body bleibt kurz, und
   Kacheln, die ihren Inhalt verteilen wollen (der Timer), koennten es
   nicht. */
.ds-aw-panel .ds-tasks-body {
  gap: var(--space-4);
  flex: 1 1 auto;
}

/* Am Handy darf die Bereichs-Ueberschrift umbrechen. Der Panel-Titel aus
   dashboard.css kuerzt mit Ellipsis, und das passt fuer die kurzen Namen
   der Uebersicht ("Heute", "Favoriten"); hier stuende sonst "AUFGABEN UND
   DUR…" und der Bereich haette am Handy keinen lesbaren Namen mehr. */
@media (max-width: 600px) {
  .ds-aw-panel .ds-tasks-block-title span.idf-headline {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ============================================================
   Die Werte eines Bereichs: eine Leitzahl, der Rest als Zeile

   Bis v0.3.0 standen hier vier `.idf-stat`-Kacheln je Bereich, also
   sechzehn gerahmte Kaesten auf einem Bild - alle gleich gross, alle
   gleich laut, und jeder mit einem Rahmen INNERHALB des Karten-Rahmens
   (Joerg 30.08.2026: "Die Menge an Spalten und Werten ueberfordert ganz
   schoen"). Ein Blick fand darin keinen Anfang.

   `blocks/stat-card` ist deshalb hier nicht der falsche Baustein,
   sondern am falschen Ort: `.idf-stats` ist ein Streifen auf
   SEITEN-Ebene (so nutzen ihn netzwerk, facility, projekte, safeguard),
   nicht das Innenleben einer Karte. In einer Karte erzeugt er die
   doppelte Umrandung.

   Stattdessen das Prinzip aus `blocks/segment-group`: was zusammen
   gehoert, teilt einen Rahmen. Der Rahmen ist die Karte. Darin eine
   Leitzahl und eine Zeile mit dem Rest, getrennt durch Mittelpunkte -
   der Blick liest eine Zahl und danach Kontext, statt vier Kaesten zu
   zaehlen.
   ============================================================ */

.ds-aw-werte {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ds-aw-leitzahl {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ds-aw-leitzahl > strong {
  font-size: var(--font-xxl);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ds-aw-leitzahl > span {
  font-size: var(--font-base);
  color: var(--mid);
}

/* Die Nebenwerte als ein Satz. Fliesstext und keine Kaesten: sie sind
   der Kontext zur Leitzahl, nicht vier gleichrangige Kennzahlen. */
.ds-aw-neben {
  margin: 0;
  font-size: var(--font-base);
  line-height: var(--leading-relax);
  color: var(--mid);
}

.ds-aw-neben b {
  font-weight: var(--weight-semi);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Ampel nur, wo der Wert wirklich ein Problem zeigt. Dieselben Rollen
   wie in blocks/stat-card, damit rot und gelb ueberall dasselbe heissen. */
.ds-aw-neben b.is-danger { color: var(--primary); }
.ds-aw-neben b.is-warn   { color: var(--yellow-text); }

/* Trennzeichen zwischen den Nebenwerten. Als ::before am Wert statt im
   Text, damit beim Umbruch kein Mittelpunkt am Zeilenanfang haengt. */
.ds-aw-neben span + span::before {
  content: " · ";
  color: var(--soft);
}

/* Erlaeuternde Zeile unter den Werten (Bezugsgroesse, Stand).
   --font-xs2 ist die Meta-Groesse; der Inhalt darueber bleibt
   --font-base. */
.ds-aw-sub {
  margin: 0;
  font-size: var(--font-xs2);
  line-height: var(--leading-base);
  color: var(--mid);
}

.ds-aw-sub strong {
  color: var(--ink);
  font-weight: var(--weight-semi);
}

/* ============================================================
   Ring mit Zahl in der Mitte

   primitives/progress-ring zeichnet laut README nur sich selbst; was in
   seiner Mitte steht, legt der Aufrufer darueber. Genau das passiert hier
   und nur hier, es entsteht keine zweite Ring-Variante.
   ============================================================ */

.ds-aw-ring {
  position: relative;
  display: inline-flex;
  line-height: 1;
  flex-shrink: 0;
}

.ds-aw-ring-zahl {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--font-md);
  font-weight: var(--weight-bold);
  color: var(--ink);
  white-space: nowrap;
}

.ds-aw-ring.is-gross .ds-aw-ring-zahl {
  font-size: var(--font-lg);
}

/* ============================================================
   Meine Arbeitszeit: stempeln, heute, diese Woche, Konto

   Vier Teile nebeneinander. Der Wochen-Streifen ist der einzige, der
   waechst - die drei anderen sind so breit wie ihr Inhalt.
   ============================================================ */

/* Drei Teile: stempeln, heute, diese Woche. Konto und Resturlaub sind seit
   v0.2.0 im Kopf der Seite und stehen deshalb nicht mehr hier - zweimal
   dieselbe Zahl auf einem Bildschirm sind zwei Wahrheiten, sobald eine von
   beiden nicht nachzieht.

   Der Wochen-Streifen ist der einzige Teil, der waechst, und er braucht
   Platz: sieben Beschriftungen "Mo 24.08." wollen zusammen rund 400 px,
   sonst kappen sie zu "Mo 24…". */
.ds-aw-zeit {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
}

/* Die Wochensumme rechts, eine Zeile hoch statt zwei: sie steht neben
   einem flachen Streifen und wuerde ihn sonst ueberragen. */
.ds-aw-zeit-summe {
  text-align: right;
  white-space: nowrap;
}

.ds-aw-zeit-summe > strong {
  font-size: var(--font-title);
}

@media (max-width: 1100px) {
  .ds-aw-zeit {
    gap: var(--space-5);
  }
}

@media (max-width: 720px) {
  .ds-aw-zeit {
    grid-template-columns: 1fr;
  }
  .ds-aw-zeit-summe {
    text-align: left;
  }
}

/* Knopf und Status NEBENEINANDER, nicht untereinander.

   Untereinander war der Block 66 px hoch, der Knopf darin 40 - und weil
   beide Kacheln ihren Inhalt mittig ausrichten, sass der Stempel-Knopf
   13 px hoeher als der Stoppen-Knopf der Timer-Kachel daneben, wo der
   Knopf allein steht. Zwei Knoepfe auf verschiedener Hoehe in einer Reihe
   lesen sich als Fehler (Joerg 30.08.2026).

   Einzeilig ist der Block so hoch wie der Knopf, seine Mitte liegt damit
   auf der Zeilenmitte, und beide Knoepfe stehen auf einer Linie. */
.ds-aw-zeit-stempel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 720px) {
  /* Gestapelt stehen die Kacheln ohnehin untereinander, da gibt es keine
     gemeinsame Linie mehr - und der Status hat neben dem Knopf zu wenig
     Platz. */
  .ds-aw-zeit-stempel {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

.ds-aw-zeit-status {
  font-size: var(--font-xs2);
  color: var(--mid);
  white-space: nowrap;
}

.ds-aw-zeit-status strong {
  color: var(--ink);
  font-weight: var(--weight-semi);
}

/* Eine fehlende Abmeldung ist keine Kleinigkeit: der Tag zaehlt im Konto
   mit null Minuten. Deshalb faerbt sie, und zwar in der Warn-Rolle, nicht
   in der Alarm-Rolle - nachzutragen ist es, kaputt ist nichts. */
.ds-aw-warn {
  color: var(--yellow-text);
  font-weight: var(--weight-semi);
}

/* Ein Minus im Stundenkonto faerbt, ein Plus nicht: eine Kachel, die immer
   bunt ist, sagt nichts mehr. */
#dsAwKonto.is-minus {
  color: var(--primary);
}

.ds-aw-zeit-heute {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.ds-aw-zeit-label {
  font-size: var(--font-xs2);
  color: var(--mid);
  white-space: nowrap;
}

.ds-aw-zeit-woche {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* Dieselbe Spaltenteilung wie der kompakte Streifen darunter (der
   Baustein nimmt repeat(7, 1fr) mit 3 px Luecke), damit die Wochentage
   ueber ihren Balken stehen. Wortgleich zu .ak-anw-streifen-kopf im
   Akteure-Modul, das denselben Streifen beschriftet. */
/* --font-base, nicht --font-xs2: Wochentag und Datum sind Inhalt, den man
   liest, keine Meta-Zeile (Joerg 30.08.2026, und die Regel steht so im
   Manual). Zweizeilig, damit "Mo" ueber "24.08." steht - einzeilig
   brauchten sieben Beschriftungen bei 16 px rund 540 px, und die hat der
   Streifen erst auf einem sehr breiten Bildschirm. */
.ds-aw-woche-kopf {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  font-size: var(--font-base);
  line-height: var(--leading-tight);
  color: var(--mid);
  text-align: center;
}

.ds-aw-woche-kopf > span {
  min-width: 0;
}

.ds-aw-woche-kopf > .is-heute {
  color: var(--accent);
  font-weight: var(--weight-semi);
}

/* Am Handy nur der Wochentag. Sieben Beschriftungen "Mo 24.08." brauchen
   bei --font-base rund 540 px, eine Tages-Spur hat dort 43 - die Daten
   liefen ineinander. Welche Woche gemeint ist, sagt die Datumszeile im
   Kopf der Seite. */
@media (max-width: 600px) {
  .ds-aw-woche-datum {
    display: none;
  }
}

/* ============================================================
   Trefferquote: Ring und seine Beschriftung nebeneinander
   ============================================================ */

.ds-aw-quote {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.ds-aw-quote-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--font-xs2);
  line-height: var(--leading-base);
  color: var(--mid);
}

.ds-aw-quote-text strong {
  font-size: var(--font-base);
  font-weight: var(--weight-semi);
  color: var(--ink);
}