DogFatherGitandClaude Opus 5
fc4fde0f02
DIE BUEHNEN WAREN ZU DUNKEL. Bei 0.42 Helligkeit sah man Schemen, nicht die Szene -- "zu dunkel und sieht ganz komisch aus" traf es genau. Jetzt 0.66 mit etwas mehr Farbe (1.08), die Vignette schwaecher (0.52 statt 0.72). Die Bilder kommen durch. MOEGLICH IST DAS NUR MIT DEM GEGENZUG: Alle Kacheln, Karten und Spalten lagen bei 2 bis 3 Prozent WEISS -- also praktisch durchsichtig. Solange der Hintergrund fast schwarz war, fiel das nicht auf; sobald er hell wurde, lief das Bild mitten durch den Text. Jetzt gibt es --flaeche (rgba(9,13,22,.78)), eine deckende dunkle Flaeche, und 44 Stellen in 16 Dateien holen sich ihre Farbe von dort. Der Unterschied ist genau der, den Filipe beschrieben hat: Der Hintergrund bleibt sichtbar, aber ZWISCHEN den Kacheln -- nicht hinter der Schrift. Wer die Flaechen kuenftig dichter oder durchlaessiger will, aendert eine einzige Zeile statt 44. Die Kacheln selbst tragen ihren Farbton jetzt AUF der Flaeche (color-mix mit --flaeche statt mit transparent) -- dadurch bleibt die Farbe erkennbar, ohne dass die Kachel durchsichtig wird. DIE KOPFLEISTE war so breit wie das ganze Fenster, obwohl der Text kurz ist: .marke__text stand auf flex: 1 1 auto. Das war unsichtbar, solange der Schriftzug nur Text war -- seit er einen Rahmen traegt, lief die Pille quer durchs Bild. Jetzt flex: 0 1 auto (schrumpfen ja, wachsen nein). Gemessen: 375 px statt 1280. Kontrast an echten Bildpunkten auf allen sechs Seiten nachgemessen -- haelt trotz des viel helleren Bildes (schlechtester Wert 4,69:1). Co-Authored-By: Claude Opus 5 <[email protected]>
316 lines
13 KiB
CSS
316 lines
13 KiB
CSS
/* ===================================================================
|
|
Content-Planung.
|
|
|
|
Zwei Dinge bestimmen die Gestaltung:
|
|
|
|
1. Es ist eine STRECKE. Die Spalten stehen für Fortschritt von links
|
|
nach rechts, deshalb wird die Farbe der Spaltenköpfe von kühl
|
|
(Idee) nach warm-hell (draußen) heller — man sieht die Richtung,
|
|
ohne sie zu lesen.
|
|
|
|
2. Die Säulenfarben sind DATEN, keine Dekoration. Sie stammen aus
|
|
einer geprüften Palette und wurden gegen genau diesen Hintergrund
|
|
(#0a0d13) gerechnet: Helligkeitsband, Farbstärke, Abstand bei
|
|
Farbfehlsichtigkeit (schlechtestes Paar ΔE 8.4), Normalsicht-
|
|
Abstand (19.3) und Kontrast — alle Prüfungen bestanden. Deshalb
|
|
wird an diesen fünf Werten nichts „nachgebessert": Jede Änderung
|
|
macht die Prüfung ungültig.
|
|
|
|
Augenschonend bleibt alles: gedeckte Töne, keine Leuchtflächen, keine
|
|
Bewegung außer weichen Übergängen.
|
|
=================================================================== */
|
|
|
|
.content-wurzel,
|
|
body.start {
|
|
/* Fünf Plätze für Content-Säulen. Die Zuordnung folgt dem Platz
|
|
(slot), nicht dem Rang -- sonst wechselt eine Säule die Farbe,
|
|
sobald eine andere sie überholt. */
|
|
--saeule-1: #3987e5; /* Blau */
|
|
--saeule-2: #d95926; /* Orange */
|
|
--saeule-3: #199e70; /* Türkis */
|
|
--saeule-4: #c98500; /* Gelb */
|
|
--saeule-5: #d55181; /* Magenta */
|
|
--saeule-0: #56657a; /* ohne Säule -- bewusst grau, keine sechste Farbe */
|
|
}
|
|
|
|
/* ---------- Kennzahlen ---------------------------------------------------- */
|
|
|
|
.kennzahlen {
|
|
display: grid; gap: 10px; margin-bottom: 26px;
|
|
grid-template-columns: 1.4fr repeat(4, 1fr);
|
|
}
|
|
.kachel {
|
|
display: grid; gap: 2px; align-content: start;
|
|
padding: 15px 17px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
.kachel[data-gross="ja"] { padding: 17px 20px; }
|
|
.kachel[data-stufe="warn"] {
|
|
border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .05);
|
|
}
|
|
.kachel__wert {
|
|
font-size: 1.7rem; font-weight: 700; line-height: 1.05;
|
|
font-variant-numeric: tabular-nums; letter-spacing: -.02em;
|
|
}
|
|
.kachel[data-gross="ja"] .kachel__wert { font-size: 2.6rem; }
|
|
.kachel[data-stufe="warn"] .kachel__wert { color: var(--warn); }
|
|
.kachel__name {
|
|
font-size: .72rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-leise);
|
|
}
|
|
.kachel__zusatz { font-size: .76rem; color: var(--text-still); }
|
|
|
|
/* ---------- Säulen-Balance ------------------------------------------------ */
|
|
|
|
.balance {
|
|
margin-bottom: 26px; padding: 16px 18px 14px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
|
|
/* Ein 2px-Spalt zwischen den Stücken statt einer Trennlinie: Die Lücke
|
|
zeigt die Grenze, ohne eine weitere Farbe einzuführen. */
|
|
.balance__balken {
|
|
display: flex; gap: 2px; height: 30px; margin: 4px 0 12px;
|
|
border-radius: 6px; overflow: hidden;
|
|
}
|
|
.balance__stueck {
|
|
display: flex; align-items: center; justify-content: center;
|
|
min-width: 3px; transition: filter var(--tempo);
|
|
}
|
|
.balance__stueck:hover { filter: brightness(1.15); }
|
|
.balance__stueck[data-slot="1"] { background: var(--saeule-1); }
|
|
.balance__stueck[data-slot="2"] { background: var(--saeule-2); }
|
|
.balance__stueck[data-slot="3"] { background: var(--saeule-3); }
|
|
.balance__stueck[data-slot="4"] { background: var(--saeule-4); }
|
|
.balance__stueck[data-slot="5"] { background: var(--saeule-5); }
|
|
.balance__stueck[data-slot="0"] { background: var(--saeule-0); }
|
|
/* Die Zahl im Balken trägt Text-Tinte, nicht die Säulenfarbe -- Text in
|
|
der Serienfarbe ist auf jedem Untergrund ein Kontrastproblem. Auf
|
|
diesen fünf Flächen ist Dunkel der sichere Wert. */
|
|
.balance__zahl {
|
|
font-size: .72rem; font-weight: 700; color: #06090f;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
|
|
.legende__punkt { display: flex; align-items: center; gap: 7px; font-size: .82rem; }
|
|
.legende__farbe {
|
|
width: 10px; height: 10px; flex: none; border-radius: 3px;
|
|
background: var(--saeule-0);
|
|
}
|
|
.legende__farbe[data-slot="1"] { background: var(--saeule-1); }
|
|
.legende__farbe[data-slot="2"] { background: var(--saeule-2); }
|
|
.legende__farbe[data-slot="3"] { background: var(--saeule-3); }
|
|
.legende__farbe[data-slot="4"] { background: var(--saeule-4); }
|
|
.legende__farbe[data-slot="5"] { background: var(--saeule-5); }
|
|
.legende__name { color: var(--text); }
|
|
.legende__wert { color: var(--text-leise); font-variant-numeric: tabular-nums; }
|
|
.legende__ziel { color: var(--text-still); font-size: .76rem; }
|
|
.legende__ziel[data-warn="ja"] { color: var(--warn); }
|
|
|
|
.balance__hinweis { margin: 10px 0 0; font-size: .78rem; color: var(--text-still); }
|
|
|
|
/* ---------- Säulen verwalten ---------------------------------------------- */
|
|
|
|
.saeulen-kasten {
|
|
margin-bottom: 26px; padding: 18px 20px;
|
|
border: 1px solid var(--rand-hell); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
.saeule {
|
|
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
|
padding: 9px 4px; border-bottom: 1px solid var(--rand);
|
|
font-size: .86rem;
|
|
}
|
|
.saeule:last-of-type { border-bottom: 0; }
|
|
.saeule__name { font-weight: 650; }
|
|
.saeule__wer, .saeule__zahl, .saeule__ziel { color: var(--text-still); font-size: .79rem; }
|
|
.saeule__zahl { margin-left: auto; }
|
|
|
|
.saeule-neu {
|
|
display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
|
|
margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rand);
|
|
}
|
|
.saeule-neu .feld { flex: 1 1 200px; min-width: 0; }
|
|
.saeule-neu .feld--schmal { flex: 0 1 130px; }
|
|
|
|
/* ---------- Filterzeile --------------------------------------------------- */
|
|
|
|
.filterzeile { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }
|
|
.filtergruppe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
|
|
.filtergruppe__schild {
|
|
font-size: .68rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-still); margin-right: 2px;
|
|
}
|
|
|
|
/* ---------- Die Strecke --------------------------------------------------- */
|
|
|
|
.strecke {
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
align-items: start;
|
|
}
|
|
|
|
.spalte {
|
|
min-width: 0; padding: 12px 12px 14px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
/* Die Richtung der Strecke, ohne ein Wort: Der Streifen über der Spalte
|
|
wird von links nach rechts heller und wärmer. */
|
|
.spalte::before {
|
|
content: ""; display: block; height: 2px; margin: -4px -4px 12px;
|
|
border-radius: 2px; opacity: .55;
|
|
}
|
|
.spalte[data-stufe="idee"]::before { background: #2c4a6b; opacity: .8; }
|
|
.spalte[data-stufe="skript"]::before { background: #2f6a97; opacity: .8; }
|
|
.spalte[data-stufe="gedreht"]::before { background: #3987e5; opacity: .7; }
|
|
.spalte[data-stufe="fertig"]::before { background: #4fb3d9; opacity: .7; }
|
|
.spalte[data-stufe="veroeffentlicht"]::before { background: #7fd4c1; opacity: .7; }
|
|
|
|
.spalte__kopf {
|
|
display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
|
|
}
|
|
.spalte__name {
|
|
margin: 0; font-size: .74rem; font-weight: 700;
|
|
letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise);
|
|
}
|
|
.spalte__zahl {
|
|
margin-left: auto; min-width: 20px; padding: 1px 7px; text-align: center;
|
|
font-size: .72rem; font-weight: 700; color: var(--text-still);
|
|
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.spalte__leer { margin: 6px 0 0; text-align: center; color: var(--text-still); opacity: .5; }
|
|
|
|
/* ---------- Eine Video-Karte ---------------------------------------------- */
|
|
|
|
.video {
|
|
position: relative; overflow: hidden;
|
|
margin-bottom: 8px; padding: 11px 13px 10px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: rgba(255, 255, 255, .035);
|
|
transition: border-color var(--tempo), background var(--tempo);
|
|
}
|
|
.video:last-child { margin-bottom: 0; }
|
|
.video:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .055); }
|
|
|
|
/* Die Säulenfarbe als schmale Kante links -- die Karte selbst bleibt
|
|
ruhig. Fünf eingefärbte Karten nebeneinander wären ein Bonbonglas. */
|
|
.video[data-slot]::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: var(--saeule-0);
|
|
}
|
|
.video[data-slot="1"]::before { background: var(--saeule-1); }
|
|
.video[data-slot="2"]::before { background: var(--saeule-2); }
|
|
.video[data-slot="3"]::before { background: var(--saeule-3); }
|
|
.video[data-slot="4"]::before { background: var(--saeule-4); }
|
|
.video[data-slot="5"]::before { background: var(--saeule-5); }
|
|
|
|
.video__titel { margin: 0 0 4px; font-size: .93rem; font-weight: 650; line-height: 1.35; }
|
|
|
|
/* Der Hook ist gesprochener Text -- kursiv und in Anführungszeichen
|
|
liest er sich als das, was er ist. */
|
|
.video__hook {
|
|
margin: 0 0 7px; font-size: .82rem; font-style: italic;
|
|
color: var(--text-leise); line-height: 1.45;
|
|
}
|
|
.video__hook--fehlt {
|
|
font-style: normal; font-size: .74rem; color: var(--warn); opacity: .75;
|
|
}
|
|
|
|
.video__marken { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
|
|
.marke-saeule, .marke-still {
|
|
padding: 1px 8px; border-radius: 999px;
|
|
font-size: .69rem; font-weight: 600;
|
|
}
|
|
.marke-still {
|
|
color: var(--text-still); background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand);
|
|
}
|
|
/* Der Säulenname trägt seine Farbe als Rand und schwachen Grund, nicht
|
|
als Textfarbe -- farbiger Text auf dunklem Grund wird bei den
|
|
dunkleren Plätzen schwer lesbar. */
|
|
.marke-saeule { color: var(--text); border: 1px solid var(--saeule-0); background: rgba(255, 255, 255, .04); }
|
|
.marke-saeule[data-slot="1"] { border-color: var(--saeule-1); background: rgba(57, 135, 229, .14); }
|
|
.marke-saeule[data-slot="2"] { border-color: var(--saeule-2); background: rgba(217, 89, 38, .14); }
|
|
.marke-saeule[data-slot="3"] { border-color: var(--saeule-3); background: rgba(25, 158, 112, .14); }
|
|
.marke-saeule[data-slot="4"] { border-color: var(--saeule-4); background: rgba(201, 133, 0, .14); }
|
|
.marke-saeule[data-slot="5"] { border-color: var(--saeule-5); background: rgba(213, 81, 129, .14); }
|
|
|
|
.video__termin {
|
|
margin: 0 0 7px; font-size: .75rem; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.video__termin[data-warn="ja"] { color: var(--warn); }
|
|
|
|
.video__knoepfe {
|
|
display: flex; flex-wrap: wrap; gap: 4px;
|
|
padding-top: 8px; border-top: 1px solid var(--rand);
|
|
}
|
|
.tu-knopf {
|
|
padding: 3px 9px;
|
|
font: inherit; font-size: .72rem; font-weight: 600;
|
|
color: var(--text-still); cursor: pointer;
|
|
background: rgba(255, 255, 255, .04);
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
|
|
}
|
|
.tu-knopf:hover:not(:disabled) {
|
|
color: var(--text); border-color: var(--rand-hell); background: rgba(255, 255, 255, .09);
|
|
}
|
|
.tu-knopf[data-haupt="ja"] {
|
|
color: var(--akzent); border-color: rgba(63, 189, 245, .35);
|
|
background: rgba(63, 189, 245, .08);
|
|
}
|
|
.tu-knopf[data-haupt="ja"]:hover:not(:disabled) {
|
|
color: #fff; border-color: rgba(63, 189, 245, .6); background: rgba(63, 189, 245, .16);
|
|
}
|
|
.tu-knopf:disabled { opacity: .45; cursor: default; }
|
|
.tu-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
/* ---------- Schmale Schirme ------------------------------------------------
|
|
|
|
Fünf Spalten nebeneinander sind auf einem Handy je 60px breit -- der
|
|
Titel bräche dann nach jedem zweiten Buchstaben um. Deshalb werden aus
|
|
den Spalten untereinander liegende Abschnitte. Die Strecke bleibt
|
|
lesbar, sie läuft nur von oben nach unten statt von links nach rechts.
|
|
--------------------------------------------------------------------------- */
|
|
|
|
@media (max-width: 1100px) {
|
|
.strecke { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.kachel[data-gross="ja"] { grid-column: span 3; }
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.strecke { grid-template-columns: 1fr; }
|
|
.kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.kachel[data-gross="ja"] { grid-column: span 2; }
|
|
.kachel[data-gross="ja"] .kachel__wert { font-size: 2.1rem; }
|
|
/* Leere Spalten kosten auf dem Handy nur Platz zum Scrollen. */
|
|
.spalte:has(.spalte__leer) { display: none; }
|
|
.balance__balken { height: 26px; }
|
|
.saeule__zahl { margin-left: 0; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.video, .tu-knopf, .balance__stueck { transition: none; }
|
|
}
|
|
|
|
/* Der Aufklapper am Fuß einer zu langen Spalte. Bewusst unauffällig --
|
|
er ist kein Ziel, sondern ein Ausweg. */
|
|
.spalte__mehr {
|
|
display: block; width: 100%; margin-top: 6px; padding: 6px;
|
|
font: inherit; font-size: .74rem; font-weight: 600;
|
|
color: var(--text-still); cursor: pointer;
|
|
background: transparent;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
transition: color var(--tempo), border-color var(--tempo);
|
|
}
|
|
.spalte__mehr:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .35); }
|
|
.spalte__mehr:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
@media (prefers-reduced-motion: reduce) { .spalte__mehr { transition: none; } }
|