dogfather-universe/workspace/assets/css/leistung.css

/* ===================================================================
   Zahlen. Baut auf gate.css, start.css und aufgaben.css auf.

   DER GESTALTERISCHE GRUNDSATZ dieser Seite ist ein anderer als auf den
   uebrigen: Hier steht nicht die Flaeche im Vordergrund, sondern die
   ZAHL. Alles andere -- Rahmen, Beschriftung, Vergleich, Linie --
   ordnet sich ihr unter und wird leiser, je weiter es von ihr weg ist.

   Deshalb:
     * Die Zahl in Tabellenziffern (font-variant-numeric), damit
       untereinanderstehende Werte auf derselben Stelle sitzen. Ohne das
       tanzen 1.240 und 987 gegeneinander, und man vergleicht schlechter.
     * Der Vergleich in GEDECKTEM Gruen/Rot, nicht in Signalfarbe. Ein
       Minus ist eine Auskunft, kein Alarm -- und die Seite soll
       augenschonend bleiben (Dauerregel).
     * Die Verlaufslinie ohne Achsen, Gitter und Beschriftung. Sie
       beantwortet genau eine Frage ("geht es hoch oder runter?"), und
       jede weitere Linie darin macht diese Antwort langsamer.
   =================================================================== */

/* ---------- Kopf ------------------------------------------------------- */

.leistung__wahl { display: grid; gap: 6px; min-width: 220px; }

/* Wie vollstaendig die Woche erfasst ist. Steht neben der Ueberschrift
   und nicht darunter: Wer die Zahlen liest, muss diesen Satz VORHER
   gesehen haben -- eine Woche aus zwei Tagen ist etwas anderes als eine
   aus sieben. */
.leistung__erfassung {
  margin: 0; font-size: 13px; color: var(--text-still);
}
.leistung__erfassung[data-knapp="ja"] { color: #d9a441; }

.leistung__leer {
  margin: 0; padding: 18px; text-align: center;
  color: var(--text-leise); font-size: 14px; line-height: 1.6;
}

.leistung-woche, .leistung-ziele, .leistung-tage { margin: 0 0 30px; }

/* ---------- Die Wochenkarten -------------------------------------------- */

.zahlkarten {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.zahlkarte {
  position: relative; overflow: hidden;
  padding: 16px 16px 12px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  display: grid; gap: 4px;
  /* Alle Karten gleich hoch, auch die ohne Verlaufslinie. Sonst
     entsteht eine Treppe, und eine Treppe liest man als Bedeutung
     ("die kurze Karte ist weniger wichtig"), obwohl sie nur ein
     Nebeneffekt ist. */
  align-content: start; min-height: 132px;
}

/* DIE LEITZAHL. Die Verweildauer ist seit 2026 die Groesse, an der der
   Algorithmus alles aufhaengt -- sie darf nicht eine von sieben
   gleichaussehenden Karten sein. Ein feiner Rand und ein Hauch Farbe
   reichen; ein Kasten in Signalfarbe waere Laerm. */
.zahlkarte[data-leit="ja"] {
  border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
  background:
    radial-gradient(120% 100% at 0% 0%,
      color-mix(in srgb, var(--akzent) 9%, transparent), transparent 70%),
    var(--flaeche);
}

.zahlkarte__name {
  margin: 0; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-still);
}

.zahlkarte__wert {
  margin: 0; font-size: 30px; line-height: 1.1; font-weight: 650;
  color: var(--text);
  /* Tabellenziffern: gleiche Breite je Ziffer. Damit stehen die Werte
     mehrerer Karten auf derselben senkrechten Linie. */
  font-variant-numeric: tabular-nums;
}

.zahlkarte__wandel {
  margin: 2px 0 0; font-size: 12.5px; line-height: 1.45;
}
/* Gedeckt, nicht grell. Gruen und Rot sind hier Auskunft, nicht Ampel --
   und beide bleiben ueber 4,5:1 gegen die Kachelflaeche. */
.zahlkarte__wandel[data-richtung="hoch"]   { color: #6fc38a; }
.zahlkarte__wandel[data-richtung="runter"] { color: #e08c93; }
.zahlkarte__wandel[data-richtung="gleich"] { color: var(--text-still); }

/* Die kleine Verlaufslinie. Sie sitzt unten in der Karte und laeuft
   ueber die ganze Breite -- als Untergrund, nicht als eigenes Bild. */
.zahlkarte__linie {
  width: 100%; height: 30px; margin-top: 8px; display: block;
  overflow: visible;
}
.zahlkarte__linie polyline {
  fill: none; stroke: var(--akzent); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round;
  /* Nicht mitskalieren: preserveAspectRatio="none" streckt das Bild in
     die Breite und wuerde die Linie sonst hauchduenn ziehen. */
  vector-effect: non-scaling-stroke;
  opacity: .8;
}
.zahlkarte__linie circle {
  fill: var(--akzent); stroke: none;
  /* Der letzte Punkt ist das Jetzt. Er wird durch die Streckung zum
     Ei -- deshalb bleibt er klein genug, dass es nicht auffaellt. */
}
.zahlkarte[data-leit="ja"] .zahlkarte__linie polyline { opacity: 1; }

/* ---------- Ziele -------------------------------------------------------- */

.zielbalken { display: grid; gap: 16px; }

.zielbalken__zeile {
  padding: 14px 16px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
.zielbalken__kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.zielbalken__name { font-size: 14px; color: var(--text); }
.zielbalken__zahl {
  font-size: 14px; color: var(--text-leise); font-variant-numeric: tabular-nums;
}

.zielbalken__spur {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(150, 186, 220, 0.12);
}
.zielbalken__fuell {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--akzent-tief), var(--akzent));
  transition: width var(--tempo);
}
/* Ein erreichtes Ziel wechselt die Farbe, nicht die Groesse. Ein
   springender Balken waere Bewegung ohne Aussage. */
.zielbalken__fuell[data-voll="ja"] {
  background: linear-gradient(90deg, #2f8f5b, #55c184);
}
.zielbalken__anteil {
  margin: 8px 0 0; font-size: 12.5px; color: var(--text-still);
}

@media (prefers-reduced-motion: reduce) {
  .zielbalken__fuell { transition: none; }
}

/* ---------- Die Tageszeilen ---------------------------------------------- */

.tagetabelle {
  display: grid; gap: 8px;
}

.tagzeile {
  display: grid; align-items: center; gap: 6px 16px;
  grid-template-columns: 74px 1fr auto;
  padding: 12px 16px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
/* EIN TAG OHNE EINTRAG BLEIBT SICHTBAR -- er ist selbst die Auskunft.
   Er wird nur leiser, damit die erfassten Tage vorn stehen. */
.tagzeile[data-leer="ja"] {
  background: transparent;
  border-style: dashed;
  border-color: rgba(150, 186, 220, 0.13);
}
/* Woher die Zeile kommt. Ein schmaler Streifen links, kein Etikett:
   Man muss es wissen KOENNEN, nicht bei jedem Blick lesen. */
.tagzeile[data-quelle="import"] {
  border-left: 3px solid color-mix(in srgb, var(--violett) 55%, transparent);
}

.tagzeile__datum { display: grid; gap: 1px; }
.tagzeile__wochentag {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-still);
}
.tagzeile__zahl {
  font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums;
}

.tagzeile__werte {
  display: flex; flex-wrap: wrap; gap: 6px 22px; min-width: 0;
}
.tagzeile__wert { display: grid; gap: 1px; min-width: 0; }
.tagzeile__wertname {
  font-size: 12px; letter-spacing: .05em; color: var(--text-still);
}
.tagzeile__wertzahl {
  font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums;
}
.tagzeile__leer { font-size: 13.5px; color: var(--text-still); }

/* Die Notiz laeuft ueber die ganze Zeilenbreite unter den Werten --
   sie ist der Kontext, ohne den eine eingebrochene Zahl in die Irre
   fuehrt ("krank", "Technik ausgefallen"). */
.tagzeile__notiz {
  grid-column: 2 / -1;
  margin: 2px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--text-leise);
}

.tagzeile__knopf {
  grid-row: 1; grid-column: 3;
  padding: 8px 14px; min-height: 38px;
  font: inherit; font-size: 13px;
  color: var(--text-leise); cursor: pointer;
  background: transparent;
  border: 1px solid var(--rand); border-radius: 999px;
  transition: color var(--tempo), border-color var(--tempo);
}
.tagzeile__knopf:hover, .tagzeile__knopf:focus-visible {
  color: var(--text); border-color: var(--rand-hell);
}

/* ---------- Der Import --------------------------------------------------- */

.dialog--breit { max-width: 720px; }

.import-vorschau {
  margin: 4px 0 14px; padding: 16px;
  background: rgba(150, 186, 220, 0.05);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}

.import-zahlen { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.import-zahl { display: grid; gap: 2px; }
.import-zahl__wert {
  font-size: 26px; font-weight: 650; line-height: 1.1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.import-zahl__name { font-size: 12px; color: var(--text-still); }
.import-zahl[data-warn="ja"] .import-zahl__wert { color: #d9a441; }

.import-spalten {
  margin: 14px 0 0; font-size: 13px; line-height: 1.6;
  color: var(--text-leise);
}
.import-probleme {
  margin: 10px 0 0; padding-left: 20px;
  font-size: 12.5px; line-height: 1.7; color: #d9a441;
}

/* ---------- Handy --------------------------------------------------------- */

@media (max-width: 640px) {
  /* Die Wochenkarten werden EINSPALTIG, nicht enger. Zwei Karten
     nebeneinander auf 360 px lassen fuer die Zahl 150 px uebrig -- ein
     vierstelliger Wert bricht dann um, und eine umgebrochene Zahl ist
     keine Zahl mehr. */
  .zahlkarten { grid-template-columns: 1fr; }
  .zahlkarte { min-height: 0; }
  .zahlkarte__wert { font-size: 27px; }

  .leistung__wahl { min-width: 0; width: 100%; }

  /* Die Tageszeile wird zweizeilig: Datum und Knopf oben, die Werte
     darunter. Drei Spalten nebeneinander quetschen den Knopf sonst auf
     unter 44 px -- und darunter trifft man ihn mit dem Daumen nicht
     mehr zuverlaessig. */
  .tagzeile {
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
  }
  .tagzeile__datum { grid-row: 1; grid-column: 1; }
  .tagzeile__knopf { grid-row: 1; grid-column: 2; }
  .tagzeile__werte { grid-row: 2; grid-column: 1 / -1; gap: 8px 18px; }
  .tagzeile__notiz { grid-row: 3; grid-column: 1 / -1; }

  .import-zahl__wert { font-size: 23px; }
}

/* =====================================================================
   DIE BACKSTAGE-TABELLE (11.09.2026)

   Ein Textfeld, in das eine ganze Tabelle passt -- und eine Vorschau,
   die nicht nur zählt, sondern NAMEN nennt. Wer eine Zeile übersieht,
   hat stillschweigend jemanden ausgelassen; das ist die Sorte Fehler,
   die erst Wochen später auffällt.
   ===================================================================== */
.netz__feld {
  width: 100%;
  min-height: 120px;
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: .82rem; line-height: 1.5;
  /* Umbrechen AUS: Eine Tabellenzeile soll eine Zeile bleiben, sonst
     sieht man nicht, ob die Spalten sauber getrennt wurden. */
  white-space: pre; overflow-x: auto;
}
.import-vorschau__zeile {
  margin: 0 0 4px;
  font-size: .84rem; line-height: 1.5;
  color: var(--text-leise);
}
.import-vorschau__zeile[data-art="gut"] {
  color: color-mix(in srgb, var(--k-gut, #5fc99a) 45%, #ffffff);
  font-weight: 600;
}
.import-vorschau__zeile[data-art="warn"] {
  color: color-mix(in srgb, var(--k-warn, #e0736b) 42%, #ffffff);
  font-weight: 600;
}
.import-vorschau__zeile[data-art="still"] {
  color: var(--text-still); font-size: .8rem;
}

/* =====================================================================
   DIE ANLEITUNGEN (11.09.2026)

   Filipe: "ich brauch auch eine erklärung immer dabei wo die scouts und
   manager das finden. also eine perfekte beschreibung bitte."

   Zwei Ebenen, weil zwei Fragen dahinterstecken:

     1. WAS IST DAS?  -- zwei Sätze, immer sichtbar unter den Knöpfen.
        Wer davorsitzt und beide Knöpfe zum ersten Mal sieht, weiß sonst
        nicht, welcher für ihn gemeint ist.
     2. WIE GEHT DAS? -- die Schritte, im Fenster, wo man sie braucht.
        Dort stören sie niemanden, der es längst weiß.

   Eine Anleitung, die immer und vollständig auf der Seite steht, liest
   nach dem dritten Mal niemand mehr -- und dann steht sie nur im Weg.
   ===================================================================== */
.quellen-hinweis {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin: 10px 0 0;
  font-size: .8rem; line-height: 1.5;
  color: var(--text-still);
}
.quellen-hinweis > span { flex: 1 1 320px; min-width: 0; }
.quellen-hinweis strong { color: var(--text-leise); }

/* Die Schritte im Fenster. Nummern in der Hausfarbe, damit man sie als
   Reihenfolge liest und nicht als Aufzählung -- bei einer Anleitung ist
   die Reihenfolge die halbe Auskunft. */
.anleitung {
  margin: 10px 0 12px; padding: 0 0 0 1.5em;
  font-size: .83rem; line-height: 1.55;
  color: var(--text-still);
}
.anleitung li { margin: 0 0 6px; }
.anleitung li::marker { color: var(--akzent); font-weight: 700; }
.anleitung strong { color: var(--text-leise); }

.dialog__unter--still { font-size: .8rem; color: var(--text-still); }

/* ---- EINGEKLAPPTE HILFE (11.09.2026) ------------------------------
   Filipe zum Backstage-Fenster: "die sieht so scheisse aus."

   Der Grund war nicht die Farbe, sondern die Reihenfolge: Fuenf lange
   Schritte standen VOR dem Feld, in das man einfuegt. Wer das Fenster
   oft benutzt, scrollte jedes Mal an einer Anleitung vorbei, die er
   laengst kennt.

   Jetzt liegt sie unter einer Zeile, die man aufklappen KANN. Kein
   Kasten, kein Rahmen -- nur ein Pfeil und eine stille Zeile, damit
   sie im geschlossenen Zustand fast nichts vom Fenster wegnimmt. */
.hilfe {
  margin: 14px 0 4px;
  border-top: 1px solid var(--rand);
  padding-top: 10px;
}
.hilfe > summary {
  display: flex; align-items: center; gap: 7px;
  list-style: none; cursor: pointer;
  font-size: .82rem; color: var(--text-still);
  padding: 3px 0;
  transition: color var(--tempo);
}
.hilfe > summary::-webkit-details-marker { display: none; }
/* Der Pfeil wird gedreht statt ausgetauscht -- ein Zeichen, zwei
   Zustaende, und die Drehung sagt von selbst, was passiert. */
.hilfe > summary::before {
  content: ""; flex: none;
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--tempo);
}
.hilfe[open] > summary::before { transform: rotate(45deg); }
.hilfe > summary:hover { color: var(--text-leise); }
.hilfe > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.hilfe__satz {
  margin: 0 0 8px; font-size: .8rem; line-height: 1.55;
  color: var(--text-still);
}
.hilfe__satz strong { color: var(--text-leise); }

/* Der Tag steht neben seinem Hinweis, nicht in der Beschriftung. Vorher
   hing der ganze Erklaersatz in der Ueberschrift des Feldes und machte
   sie zweizeilig -- eine Beschriftung, die man lesen muss, ist keine
   mehr. */
/* `font: inherit` ist hier kein Schoenheitsfehler-Fix, sondern
   Notwendigkeit: Ohne Angabe rendert der Browser ein Datumsfeld in
   SEINER Schrift -- neben dem uebrigen Fenster sieht das aus wie ein
   Rest, den jemand vergessen hat. Die Breite deckelt es auf die
   Laenge, die ein Datum wirklich braucht; volle Breite laesst ein
   fast leeres Feld quer durch den Dialog laufen. */
.neu__zeile--tag input[type="date"] {
  max-width: 190px;
  font: inherit; font-size: .88rem;
}
.feld-hinweis {
  margin: 5px 0 0; font-size: .76rem; color: var(--text-still);
}
/* "… oder direkt die Datei": steht UNTER dem Einfuegefeld und gehoert
   sichtbar dazu, ohne ihm den Rang abzulaufen. Das Dateifeld selbst
   bleibt klein -- es ist der zweite Weg, nicht der erste. */
.feld-hinweis--oder {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 8px;
}
.feld-datei { flex: 1 1 220px; min-width: 0; font-size: .76rem; }

/* Ein Fenster, das laenger ist als der Bildschirm, versteckt seine
   eigenen Knoepfe. Gerollt wird INNEN, damit "Uebernehmen" immer
   erreichbar bleibt. */
.dialog--breit .neu { max-height: min(86vh, 900px); overflow-y: auto; }

/* =====================================================================
   ZEITRÄUME AUS BACKSTAGE — dritte Fassung (16.09.2026)

   Filipe: "das muss viel geiler aussehen bitte. ich will dass es auch
   seeeehr gut erkennbar ist, genau wie der text drüber. mach das bitte
   alles so dass es mega speziell, hochwertig und lesbar ist. mach was
   richtig krass geiles."

   ---------------------------------------------------------------------
   WAS WIRKLICH NICHT STIMMTE — im Bildschirmfoto gemessen, nicht geraten

   Die zweite Fassung hatte eine ordentliche Rangfolge. Ihr Fehler lag
   woanders, und er war ein LESBARKEITSFEHLER:

     1. ÜBERSCHRIFT UND SATZ STANDEN AUF DEM FOTO. Hinter dem Inhalt
        dieser Seite liegt die Bühne — ein Bild mit einem hellroten
        Berg. "ZEITRÄUME AUS BACKSTAGE" stand in `--text-still`
        (#7f8fa6) mitten darin, der Erklärsatz daneben. Genau davon
        redet er mit "seeeehr gut erkennbar".
     2. DIE KARTE WAR DURCHSICHTIG. Sie griff nach `--flaeche-tief` —
        eine Variable, die es IM GANZEN HAUS NICHT GIBT. Gegriffen hat
        also der Ersatzwert `rgba(10,16,24,.72)`, und durch die
        fehlenden 28 % kam der Berg mit. Eine Variable, die nirgends
        steht, fällt nicht auf: Sie wird still durch etwas Schlechteres
        ersetzt.
     3. SIE STAND ALLEIN IN EINER REIHE FÜR VIER. `auto-fill` hält
        leere Spalten offen; neben der einen Karte lagen 800 px blankes
        Foto.

   ---------------------------------------------------------------------
   DIE ANTWORT IST KEINE NEUE FARBE, SONDERN EIN KÖRPER

   Überschrift, Satz und Zeiträume sitzen ab jetzt IN EINER TAFEL:
   Fassung außen, deckendes Innenglas darin, die Zeiträume als
   eingelassene Felder. Damit steht jede Zeile auf einem bekannten
   Grund — der Kontrast ist eine feste Zahl statt einer Frage an das
   Hintergrundbild.

   DIE BAUART IST NICHT NEU ERFUNDEN. Es ist die Rollenkachel der
   Anmeldeseite (`.rollen` in gate.css): vierfarbige Fassung in den
   Hausfarben, Innenglas mit dem feinen Messraster, dunkle Fugen
   zwischen den Feldern. Ein Haus, eine Handschrift.

   WARUM NICHT DIE MODULLISTE AUS module.css? Die gibt jeder Karte EINE
   abgeschnittene Ecke und ein Kantenlicht. Bei fünf Zeiträumen wären
   das fünf Silhouetten nebeneinander — wieder eine Liste. Hier ist es
   EINE Sache mit mehreren Einträgen, also EIN Körper. Dieselbe
   Entscheidung wie damals bei den fünf Rollen.

   AUGENSCHONEND BLEIBT ES: Die Fassung ist 2 px breit, das Raster
   liegt bei 5 % Deckkraft, die hellste Fläche im Glas ist #0b111c.
   Nichts leuchtet, nichts blinkt, nichts bewegt sich.
   ===================================================================== */
.leistung-spannen { margin: 26px 0 30px; }

.spannen-tafel {
  /* Die Form steht EINMAL als Variable da und wird von Fassung und
     Innenglas benutzt. Zwei Abschriften desselben Polygons wären zwei
     Gelegenheiten, dass die Fase auseinanderläuft. */
  --sp-fase: 16px;
  --sp-rand: 2px;
  --sp-form: polygon(
    var(--sp-fase) 0, calc(100% - var(--sp-fase)) 0,
    100% var(--sp-fase), 100% calc(100% - var(--sp-fase)),
    calc(100% - var(--sp-fase)) 100%, var(--sp-fase) 100%,
    0 calc(100% - var(--sp-fase)), 0 var(--sp-fase));

  position: relative;
  padding: var(--sp-rand);
  clip-path: var(--sp-form);

  /* DIE FASSUNG: links Rot, rechts Babyblau, Silber als Treffpunkt,
     Schwarz als Fuge — dieselben vier Farben wie am Rand der Zentrale
     und an der Rollenkachel. */
  background: linear-gradient(96deg,
    #20060b 0%, #c8323f 6%, #ff5f6d 14%, #ffd9dd 20%,
    #b3242f 30%, #0a0c12 40%, #f4faff 50%, #0a0c12 60%,
    #4f95bd 70%, #8fd8ff 78%, #dff2ff 84%, #3f7fa3 92%, #06080f 100%);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9);
}

/* DAS INNENGLAS — und es ist DECKEND. Das ist der eigentliche
   Unterschied zur zweiten Fassung: Die letzte Ebene ist ein
   undurchsichtiger Verlauf, kein rgba(). Kein einziger Bildpunkt des
   Fotos kommt hier durch. */
.spannen-tafel::before {
  content: ""; position: absolute; inset: var(--sp-rand);
  z-index: 0; pointer-events: none;
  clip-path: var(--sp-form);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 34%),
    repeating-linear-gradient(0deg, rgba(150, 186, 220, .05) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(150, 186, 220, .05) 0 1px, transparent 1px 22px),
    radial-gradient(120% 80% at 12% 100%, rgba(255, 74, 92, .10), transparent 62%),
    radial-gradient(110% 75% at 88% 0%, rgba(126, 200, 242, .09), transparent 60%),
    linear-gradient(180deg, #0b111c, #070b13);
}
.spannen-tafel > * { position: relative; z-index: 1; }

/* ---------- Der Kopf der Tafel ---------------------------------------- */
/* Überschrift und Erklärsatz sitzen IN der Tafel, nicht darüber —
   sonst wäre die Tafel eine Liste ohne Titel und der Titel ein Satz
   ohne Bezug. Dieselbe Überlegung wie bei der Rollenkachel. */
.spannen-tafel__kopf {
  padding: 14px 18px 14px;
  border-bottom: 1px solid #05070c;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .045);
}

/* DAS TYPENSCHILD IN GEBÜRSTETEM METALL.

   "genau wie der text drüber" — der Text drüber soll nicht nur
   mithalten, er soll der Anker sein. Oben hell, in der Mitte dunkler,
   unten wieder hell: erst der WECHSEL liest sich als Material, ein
   Verlauf von hell nach dunkel wäre bloß eine Färbung.

   DER RÜCKFALL IST VOLLWERTIG: `color` steht fest auf #e6eef8 und wird
   erst in einem `@supports` durch den Verlauf ersetzt. Fällt
   `background-clip: text` aus, steht dort heller Text — nicht
   unsichtbarer. Der dunkelste Punkt des Verlaufs (#93a8bf) liegt auf
   dem Glas (#0b111c) bei 8,8:1; gerechnet, nicht geschätzt.

   ZWEI KLASSEN IM WAEHLER, UND ZWAR MIT ABSICHT (16.09.2026).

   Der erste Anlauf schrieb `.spannen__schild` -- eine Klasse, Gewicht
   (0,1,0). Im Browser gemessen kam davon NICHTS an: `display` stand
   auf `block`, die Farbe auf `--text-leise`, das Metall war nicht da.
   Schuld war `.inhalt .feldschild` in start.css, Gewicht (0,2,0) --
   zwei Klassen schlagen eine, egal wer spaeter geladen wird.

   Mit `.spannen-tafel .spannen__schild` sind es auch (0,2,0), und
   DANN entscheidet der Ladeweg: leistung.css kommt nach start.css.

   Genau davor warnt start.css an anderer Stelle selbst ("Wer eine
   Flaeche neu baut, muss zuerst nachsehen, wer sie vorher beschrieben
   hat -- und mit welchem Gewicht"). Der Hinweis stand da; gefunden hat
   es trotzdem erst die Messung. */
.spannen-tafel .spannen__schild {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 7px;
  /* Groesser als ein gewoehnliches Feldschild (.74rem): Es ist hier
     nicht die Beschriftung eines Feldes, sondern der Titel der Tafel --
     und Filipe will ihn "seeeehr gut erkennbar". */
  font-size: .82rem;
  color: #e6eef8;
  letter-spacing: .1em;
}
/* Der Anschlag links: drei Kerben, oben rot, unten babyblau — dieselbe
   Richtung wie die Fassung ringsum. */
.spannen-tafel .spannen__schild::before {
  content: "";
  width: 13px; height: 13px; flex: none;
  background-image:
    linear-gradient(180deg, transparent 0 46%, rgba(143, 216, 255, .95) 46%),
    repeating-linear-gradient(180deg, #ff5f6d 0 2px, transparent 2px 5px);
  background-blend-mode: multiply, normal;
  -webkit-mask: linear-gradient(180deg, #000 0 45%, rgba(0, 0, 0, .55) 100%);
  mask: linear-gradient(180deg, #000 0 45%, rgba(0, 0, 0, .55) 100%);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .spannen-tafel .spannen__schild {
    background: linear-gradient(178deg,
      #f4f9ff 0%, #dfeaf6 32%, #93a8bf 60%, #d7e6f5 86%, #f4f9ff 100%) text;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* Der Anschlag ist ein ::before und würde vom `background-clip: text`
     der Elternregel mit ausgeschnitten — er hat keinen Text, also
     bliebe nichts übrig. Er bekommt deshalb seine eigene Ansage. */
  .spannen-tafel .spannen__schild::before {
    -webkit-background-clip: border-box; background-clip: border-box;
  }
}

/* Der Erklärsatz. Er stand in `--text-still` (#7f8fa6) auf einem Foto.
   Jetzt in `--text-leise` auf dem deckenden Glas. */
.spannen__satz {
  margin: 0;
  font-size: .82rem; line-height: 1.6;
  color: var(--text-leise);
  max-width: 72ch;
}

/* ---------- Die Zeiträume als eingelassene Felder --------------------- */
/* DIE FUGE MACHT DIE TAFEL. Nicht der Rand außen — der ist Fassung —,
   sondern die dunkle Linie ZWISCHEN den Feldern. Ein Spalt, durch den
   der Untergrund scheint, trennt; eine dunkle Fuge verbindet, weil sie
   zum selben Körper gehört. Deshalb `#05070c` und nicht `transparent`.

   `auto-fit` STATT `auto-fill` (16.09.2026): Bei EINEM Zeitraum hielt
   `auto-fill` drei leere Spalten offen, und daneben lag blankes Foto.
   `auto-fit` lässt die leeren Spuren zusammenfallen — ein Zeitraum
   füllt die Breite, vier teilen sie sich. */
.spannen {
  display: grid; gap: 1px;
  background: #05070c;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.spanne {
  position: relative;
  padding: 15px 18px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 42%),
    #0a1018;
}

.spanne__kopf {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(150, 186, 220, .13);
}
.spanne__spanne {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 1.06rem; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.spanne__strich { color: var(--text-still); font-weight: 400; }
.spanne__tage {
  font-size: .73rem; color: #cfe4f4;
  border: 1px solid color-mix(in srgb, var(--akzent) 42%, transparent);
  background: color-mix(in srgb, var(--akzent) 14%, transparent);
  border-radius: 999px;
  padding: 2px 9px 3px;
  white-space: nowrap;
}

/* Die Hauptzahl. Groß, aber nicht grell — sie soll die erste sein, die
   man liest, nicht die einzige, die man sieht. Dasselbe gebürstete
   Metall wie das Typenschild: Die Tafel hat damit ZWEI Anker, oben und
   in der Mitte, und beide sprechen dieselbe Sprache. */
.spanne__haupt {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px;
  margin-bottom: 12px;
}
.spanne__haupt-zahl {
  font-size: 2.05rem; font-weight: 700; line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .spanne__haupt-zahl {
    background: linear-gradient(176deg,
      #f4f9ff 0%, #dbe7f4 38%, #9fb3c9 72%, #e4eef9 100%) text;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.spanne__haupt-name {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-leise);
}
/* Der Durchschnitt steht in derselben Zeile und deutlich kleiner:
   Er ist eine Einordnung, kein zweiter Messwert. */
.spanne__schnitt {
  flex-basis: 100%;
  font-size: .76rem; color: var(--text-still);
  font-variant-numeric: tabular-nums;
}

/* ---------- "11 von 13 Tagen live" ------------------------------------ */
/* KEINE DEKORATION, SONDERN DIE ZAHL, DIE BACKSTAGE MITLIEFERT und die
   bis heute weggeworfen wurde: `spaltenRaten` kannte kein Muster für
   "Gültige LIVE-Gehen-Tage", die Spalte lief also ins Leere. Jetzt
   steht sie da — und ein Streifen zeigt sie, statt sie nur zu nennen.

   ER FÜLLT SICH NICHT WIE EIN LADEBALKEN. Das wäre "Fortschritt" und
   damit gelogen: Elf von dreizehn Tagen ist kein halb fertiger
   Vorgang, sondern ein fertiges Ergebnis. */
.spanne__lauf { margin: 0 0 12px; }
.spanne__lauf-bahn {
  position: relative;
  height: 8px; border-radius: 3px; overflow: hidden;
  background: rgba(150, 186, 220, .14);
}

/* IN TAGE GETEILT, NICHT IN PROZENT.

   Ein durchgehender Balken sagt "85 %". Das ist richtig gerechnet und
   trotzdem die schlechtere Auskunft: Gezaehlt wurden TAGE, und dreizehn
   Kaestchen, von denen elf leuchten, liest man ohne eine einzige Zahl.
   Auf 1050 px Breite taeuscht ein glatter Balken ausserdem eine
   Genauigkeit vor, die es nicht gibt -- ein Bildpunkt waere ein
   Zehntelprozent, die kleinste echte Einheit ist ein ganzer Tag.

   EINE MASKE, KEINE DREIZEHN ELEMENTE. Sie schneidet Fugen in den
   fertigen Streifen und wirkt dadurch auf Bahn UND Fuellung zugleich --
   die beiden koennen also gar nicht auseinanderlaufen.

   AB 32 TAGEN WIRD NICHT MEHR GETEILT (`data-teilen` kommt aus dem
   Skript): Bei einem Zeitraum ueber ein Quartal waere jede Zelle
   schmaler als ihre eigene Fuge -- der Streifen verschwaende sich
   selbst. Dann traegt wieder die glatte Bahn. */
.spanne__lauf-bahn[data-teilen="ja"] {
  --zelle: calc(100% / var(--tage, 1));
  border-radius: 0;
  -webkit-mask: repeating-linear-gradient(90deg,
    #000 0 calc(var(--zelle) - 2px), transparent calc(var(--zelle) - 2px) var(--zelle));
  mask: repeating-linear-gradient(90deg,
    #000 0 calc(var(--zelle) - 2px), transparent calc(var(--zelle) - 2px) var(--zelle));
}
.spanne__lauf-teil {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 3px;
  /* Gedeckt, nicht grell: Der Streifen ist der einzige farbige Fleck
     der Karte und soll ihn nicht zum Leuchtkasten machen. */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--akzent) 72%, transparent),
    color-mix(in srgb, var(--akzent) 40%, transparent));
}
.spanne__lauf-text {
  display: block; margin-top: 5px;
  font-size: .73rem; color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* FLIESSEND STATT IM RASTER (16.09.2026).

   Als Gitter mit `1fr`-Spuren zog ein einzelner Zeitraum ueber die
   ganze Tafelbreite zwei Werte auf 1050 px auseinander -- "LIVE-ZEIT"
   ganz links, "NEUE FOLLOWER" in der Mitte, dazwischen nichts. Das
   liest sich als Tabelle mit fehlenden Spalten.

   Fliessend gesetzt stehen sie beieinander und brechen erst um, wenn
   der Platz wirklich endet. Dieselbe Ueberlegung wie bei der
   Kopfleiste: eine REGEL, die misst, statt einer Zahl, die rechnet. */
.spanne__werte {
  display: flex; flex-wrap: wrap; gap: 9px 26px;
  padding-top: 11px;
  border-top: 1px solid rgba(150, 186, 220, .13);
}
.spanne__wert {
  display: flex; flex-direction: column; gap: 2px;
  flex: 0 1 auto; min-width: 92px;
}
.spanne__name {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-still);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spanne__zahl {
  font-size: .95rem; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Alles, was in der Datei stand ------------------------------ */
/* Filipe: "wenn ich dir runter lade soll alles notiert und angezeigt
   werden." Achtunddreissig Werte je Zeitraum -- offen waeren sie eine
   Wand, weg waeren sie eine Luecke. Also ein Deckel, der die ZAHL
   nennt: Man sieht ohne Oeffnen, dass nichts fehlt.

   ZWEI SPALTEN, NICHT ZWEI ZEILEN. Name links, Wert rechts, mit einer
   gepunkteten Fuehrung dazwischen -- so liest man 38 Paare von oben
   nach unten, ohne die Zeile zu verlieren. Untereinander waeren es 76
   Zeilen. */
.spanne__alles {
  margin-top: 12px;
  border-top: 1px solid rgba(150, 186, 220, .13);
  padding-top: 10px;
}
.spanne__alles-kopf {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 7px;
  font-size: .76rem; letter-spacing: .04em;
  color: var(--text-leise);
}
.spanne__alles-kopf::-webkit-details-marker { display: none; }
/* Ein eigener Pfeil statt des Standarddreiecks -- das sieht auf jedem
   Gerät anders aus, und hier soll alles gleich aussehen. */
.spanne__alles-kopf::before {
  content: "";
  width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--tempo, .2s);
}
.spanne__alles[open] > .spanne__alles-kopf::before { transform: rotate(45deg); }
.spanne__alles-kopf:hover { color: var(--text); }

.spanne__alles-liste {
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 12px;
  align-items: baseline;
}
.spanne__alles-name {
  margin: 0; padding: 4px 0;
  font-size: .74rem; color: var(--text-still);
  min-width: 0;
  /* Die gepunktete Fuehrung liegt auf dem NAMEN, nicht als eigenes
     Element: ein Unterrand, der genau so breit ist wie der Text. */
  border-bottom: 1px dotted rgba(150, 186, 220, .16);
}
.spanne__alles-wert {
  margin: 0; padding: 4px 0;
  font-size: .78rem; color: var(--text);
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dotted rgba(150, 186, 220, .16);
}

@media (prefers-reduced-motion: reduce) {
  .spanne__alles-kopf::before { transition: none; }
}

@media (max-width: 620px) {
  .spannen-tafel { --sp-fase: 12px; }
  .spannen-tafel__kopf { padding: 12px 14px; }
  .spanne { padding: 13px 14px 14px; }
}
@media (forced-colors: active) {
  /* Im Kontrastmodus trägt allein die Kante. Fassung, Innenglas und
     Metallschrift wären dort graue Flecken — und eine Schrift, die
     ihre Farbe aus einem Verlauf holt, wäre unsichtbar. */
  .spannen-tafel { background: none; border: 1px solid CanvasText; box-shadow: none; }
  .spannen-tafel::before { display: none; }
  .spannen { gap: 0; background: none; }
  .spanne { border-top: 1px solid CanvasText; background: none; }
  .spannen-tafel .spannen__schild, .spanne__haupt-zahl {
    background: none; -webkit-text-fill-color: CanvasText; color: CanvasText;
  }
  .spannen-tafel .spannen__schild::before { display: none; }
}

/* =====================================================================
   EINE WOCHE OHNE EINEN EINZIGEN TAG (14.09.2026)

   Filipe: "wieso werden die zahlen oben nicht ausgefüllt von der excel
   datei?" Sieben Karten mit "0" und "wie in der Vorwoche" sehen aus
   wie ein Fehler. Stattdessen steht dort jetzt die Antwort -- und der
   Weg, wie man es ändert.
   ===================================================================== */
.woche-leer {
  border: 1px dashed color-mix(in srgb, var(--akzent) 34%, var(--rand));
  border-radius: 14px;
  padding: 14px 16px 15px;
  background: color-mix(in srgb, var(--akzent) 5%, transparent);
  max-width: 72ch;
}
.woche-leer__satz {
  margin: 0 0 6px;
  font-size: .96rem; font-weight: 600; color: var(--text);
}
.woche-leer__grund {
  margin: 0; font-size: .84rem; line-height: 1.6; color: var(--text-leise);
}
.woche-leer__weg {
  margin: 9px 0 0; padding-top: 9px;
  border-top: 1px solid var(--rand);
  font-size: .82rem; line-height: 1.6; color: var(--text-still);
}