DogFatherGitandClaude Opus 5
e82bf45f0d
Filipe: "verbesser das, also ich will dass das auch so geht, mach dass
es funktioniert, ich will es so einfach und perfekt wie moeglich. also
sieh zu dass die excel auch so durch geht."
Backstage gibt eine Ausgabe fuer einen ZEITRAUM heraus --
"2026-09-01 ~ 2026-09-13", eine Zeile je Creator, alle Zahlen
aufsummiert. Am Vormittag wurde so eine Zeile abgewiesen. Jetzt geht
sie durch.
DREI WEGE WAEREN MOEGLICH GEWESEN, ZWEI DAVON WAEREN
ZAHLENFAELSCHUNG:
* auf den ersten Tag schreiben -> dreizehn Tage auf einem Tag; die
Zahl steht da, sie ist gross, sie sieht richtig aus, und niemand
kann spaeter sagen, was darin steckt;
* gleichmaessig verteilen -> erfundene Tage, die es nie gab.
Der dritte ist dieser: den Zeitraum ALS Zeitraum ablegen. Was drinsteht,
ist dann wahr -- und was er nicht sagt (welcher Tag wie lief),
behauptet er auch nicht.
EIGENE TABELLE UND NICHT EIN FELD IN `leistung`: Dort ist der
Schluessel (creator, tag). Ein Zeitraum ab dem 1. September wuerde mit
dem ECHTEN 1. September zusammenstossen, und eine der beiden Zahlen
waere weg. Getrennt kann keines das andere ueberschreiben -- und die
Wochenzahlen bleiben, was sie sind: aus Tagen gerechnet.
Der Schluessel ist (creator, von, bis): Dieselbe Datei zweimal
einzulesen ersetzt denselben Zeitraum, statt ihn zu verdoppeln.
AUF DER SEITE steht ein eigener Block zwischen Woche und Tageszeilen:
die Spanne vorn, die Zahl der Tage als Marke daneben, die Werte
darunter. Dazu EINE Umrechnung, und nur diese: "Ø 4.129 Diamanten pro
Tag" -- als Durchschnitt bezeichnet, nirgends gespeichert. Wer eine
Woche vergleichen will, braucht sie; wer sie fuer einen echten Tag
haelt, hat das Wort nicht gelesen. Darueber steht woertlich, dass diese
Zahlen nicht in die Wochenzahlen eingehen.
MIT DER ECHTEN DATEI GEMESSEN: alle 8 Zeilen gehen durch, 8 als
Zeitraum, 0 abgelehnt. Spanne 01.09.-11.09. = 11 Tage, Diamanten
53.679, Dauer 5171 Minuten.
pruef-backstage-import 86 -> 106. Die Pruefung, auf die es ankommt, ist
nicht "es wird gespeichert", sondern "es wird NICHT in die Woche
gemischt": kein Tag kommt hinzu, die Wochenzahl bleibt Ziffer fuer
Ziffer dieselbe. Dazu die Gegenprobe, dass ein Zeitraum von EINEM Tag
weiterhin ein Tag bleibt -- sonst hiesse alles andere nur, dass jetzt
alles als Zeitraum abgelegt wird.
DREI PRUEFUNGEN GEDREHT, KEINE GELOESCHT: Zwei behaupteten noch die
Ablehnung vom Vormittag. Und tagAusZelle() hat jetzt DREI Ausgaenge
statt zwei (Tag, Zeitraum, Grund) -- geprueft wird, dass nie zwei davon
gleichzeitig kommen. Gaebe es zwei, entschiede jeder Aufrufer selbst,
was Vorrang hat, und der zweite entschiede anders als der erste. Genau
daran ist heute frueh der Zeitraum-Schutz gescheitert.
ZWEI EIGENE MESSFEHLER, beide von der Pruefung gefunden: Ich verlangte
"kein einziger Tag in der Spanne" und uebersah, dass weiter oben schon
ein Tag geschrieben worden war, der hineinfaellt -- gemessen wird jetzt
die VERAENDERUNG. Und ich mass den Zeitraum-Block, waehrend ein anderer
Creator geoeffnet war: keine Frage an die Seite, sondern an die falsche
Person.
Nebenbei zum zweiten Mal heute: eine Versalzeile mit 10,88 px. Auf
.72rem angehoben, bevor pruef-css-klassen sie findet.
Co-Authored-By: Claude Opus 5 <[email protected]>
499 lines
18 KiB
CSS
499 lines
18 KiB
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 (14.09.2026)
|
|
|
|
Filipe: "sieh zu dass die excel auch so durch geht."
|
|
|
|
Sie stehen zwischen der Woche und den Tageszeilen -- gröber als ein
|
|
Tag, feiner als gar nichts. Und sie sehen ABSICHTLICH anders aus als
|
|
die Wochenkarten: Wer sie für Tageswerte hält, rechnet mit ihnen
|
|
weiter. Der Zeitraum steht deshalb ganz vorn und nicht als Beiwerk.
|
|
===================================================================== */
|
|
.leistung-spannen { margin: 26px 0 0; }
|
|
.spannen__satz {
|
|
margin: 4px 0 12px;
|
|
font-size: .8rem; line-height: 1.55;
|
|
color: var(--text-still);
|
|
max-width: 62ch;
|
|
}
|
|
.spannen {
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
}
|
|
.spanne {
|
|
border: 1px solid var(--rand); border-radius: 14px;
|
|
padding: 11px 13px 12px;
|
|
background: rgba(255, 255, 255, .025);
|
|
}
|
|
.spanne__kopf {
|
|
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
|
|
margin-bottom: 8px;
|
|
}
|
|
.spanne__zeit {
|
|
font-size: .95rem; font-weight: 650; color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Die Zahl der Tage ist die WICHTIGSTE Einordnung und trotzdem still:
|
|
"12.480 Diamanten" ueber drei Tage ist etwas anderes als ueber
|
|
dreizehn -- ohne diese Angabe sagt die Zahl nichts. */
|
|
.spanne__tage {
|
|
font-size: .74rem; color: var(--text-still);
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
padding: 1px 8px 2px;
|
|
}
|
|
.spanne__werte {
|
|
display: grid; gap: 3px 14px;
|
|
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
|
|
}
|
|
.spanne__wert { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
|
|
.spanne__name {
|
|
/* .72rem = 11.52 px, knapp ueber der Lesbarkeitsgrenze von 11.5 px.
|
|
.68rem waeren 10.88 gewesen -- und eine gesperrte Versalzeile ist
|
|
ohnehin schwerer zu lesen als normale Schrift. Zum zweiten Mal an
|
|
diesem Tag derselbe Griff; deshalb steht die Zahl jetzt mit
|
|
Begruendung da und nicht nur als Wert. */
|
|
font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.spanne__zahl {
|
|
font-size: .92rem; color: var(--text-leise);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.spanne__schnitt {
|
|
margin: 9px 0 0; padding-top: 8px;
|
|
border-top: 1px solid var(--rand);
|
|
font-size: .76rem; color: var(--text-still);
|
|
}
|