DogFatherGitandClaude Opus 5
f9bf7d5674
Wunsch: "die sollen nirgendwo Hilfe anfordern koennen, sondern nur Rueckmeldungen." Es ist auch die klarere Loesung. Es gab zwei Wege, dasselbe zu sagen: einen Knopf, der eine Aufgabe erzeugte, und ein Textfeld, das eine Nachricht schrieb. Zwei Wege fuer eine Sache heisst, dass niemand weiss, welcher der richtige ist -- und dass Antworten mal als Aufgabe und mal als Nachricht landen. Wer dann nachsieht, findet die Haelfte nicht. Geblieben ist die Rueckmeldung an jedem Punkt: ein Verlauf, in dem beide Seiten schreiben koennen, sichtbar dort, wo es hingehoert -- am Punkt selbst und nicht in einer zweiten Liste. VOLLSTAENDIG entfernt, nicht nur ausgeblendet: * der Knopf in der Checkliste * der Knopf und die Marke "Hilfe moeglich" im Vorlagenblock * die Route /workspace/api/vorlagen/hilfe * 47 Datenfelder hilfe: true/false in den Vorlagen * die zugehoerigen Stile * der Abschnitt in pruef-vorlagen.mjs Datenfelder, die nichts mehr bewirken, und Routen, die niemand mehr aufruft, werden beim naechsten Mal fuer lebenden Code gehalten und mitgepflegt. Das ist teurer als das Entfernen heute. Co-Authored-By: Claude Opus 5 <[email protected]>
421 lines
17 KiB
CSS
421 lines
17 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; } }
|
|
|
|
/* =====================================================================
|
|
VORLAGEN — fertige Vorschlaege zum Uebernehmen
|
|
|
|
Sie sehen bewusst ANDERS aus als eigene Eintraege: heller Rand,
|
|
gestrichelte Kante, keine Statusfarbe. Man soll auf den ersten Blick
|
|
sehen, dass hier noch nichts "gehoert" -- es sind Angebote, keine
|
|
Arbeit. Sobald einer uebernommen ist, wird die Karte ruhig und traegt
|
|
einen Haken.
|
|
===================================================================== */
|
|
|
|
.vorlagen { margin: 22px 0 28px; }
|
|
.vorlagen__kopf {
|
|
display: flex; align-items: flex-end; justify-content: space-between;
|
|
gap: 16px; flex-wrap: wrap;
|
|
margin-bottom: 14px;
|
|
}
|
|
.vorlagen__unter {
|
|
margin: 4px 0 0;
|
|
font-size: .86rem; color: var(--text-leise);
|
|
}
|
|
.vorlagen__raster {
|
|
display: grid; gap: 11px;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
|
|
}
|
|
.vorlagen__raster[hidden] { display: none; }
|
|
|
|
.vorlage {
|
|
position: relative;
|
|
padding: 15px 16px 13px;
|
|
border: 1px dashed color-mix(in srgb, var(--ton, var(--akzent)) 30%, var(--rand));
|
|
border-radius: var(--radius-klein);
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--ton, var(--akzent)) 6%, transparent), transparent 55%),
|
|
var(--flaeche);
|
|
transition: border-color .18s ease;
|
|
}
|
|
.vorlage:hover { border-color: color-mix(in srgb, var(--ton, var(--akzent)) 50%, var(--rand)); }
|
|
/* Uebernommen: durchgezogene Kante statt gestrichelter -- aus einem
|
|
Angebot ist etwas Wirkliches geworden. */
|
|
.vorlage[data-genommen="ja"] {
|
|
border-style: solid;
|
|
border-color: rgba(80, 167, 130, .4);
|
|
opacity: .72;
|
|
}
|
|
.vorlage[data-genommen="ja"]::after {
|
|
content: "✓";
|
|
position: absolute; top: 12px; right: 14px;
|
|
color: #6fbd95; font-weight: 700;
|
|
}
|
|
.vorlage__titel {
|
|
margin: 0 0 8px;
|
|
font-size: .96rem; font-weight: 650; line-height: 1.3; color: var(--text);
|
|
}
|
|
/* Der Aufhaenger ist der wichtigste Teil einer Content-Idee -- die
|
|
ersten ein bis drei Sekunden entscheiden ueber die Verbreitung.
|
|
Deshalb steht er hervorgehoben und nicht im Fliesstext. */
|
|
.vorlage__hook {
|
|
margin: 0 0 9px; padding: 9px 11px;
|
|
border-left: 2px solid var(--ton, var(--akzent));
|
|
border-radius: 0 6px 6px 0;
|
|
background: color-mix(in srgb, var(--ton, var(--akzent)) 9%, transparent);
|
|
font-size: .88rem; line-height: 1.5; color: var(--text);
|
|
}
|
|
.vorlage__hookschild {
|
|
display: block; margin-bottom: 3px;
|
|
font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
|
|
color: var(--ton, var(--akzent));
|
|
}
|
|
.vorlage__text {
|
|
margin: 0 0 12px;
|
|
font-size: .85rem; line-height: 1.55; color: var(--text-leise);
|
|
}
|
|
.vorlage__fuss { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
|
|
.vorlage__marke {
|
|
padding: 2px 9px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
font-size: .7rem; color: var(--text-still);
|
|
}
|
|
.vorlage__marke--saeule {
|
|
border-color: color-mix(in srgb, var(--ton, var(--akzent)) 32%, transparent);
|
|
color: var(--ton, var(--akzent));
|
|
}
|
|
.vorlage__fuss .schritt { margin-left: auto; }
|
|
|
|
.vorlagen__alle {
|
|
grid-column: 1 / -1;
|
|
display: flex; justify-content: center;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
|
|
@media (max-width: 560px) {
|
|
.vorlagen__kopf { flex-direction: column; align-items: stretch; }
|
|
.vorlagen__kopf .knopf { width: 100%; }
|
|
}
|
|
|
|
/* Auf dem Handy sind die kleinen Marken im Vorlagenblock zu klein --
|
|
gemeldet von der Geraetepruefung (10,24 px beim Aufhaenger-Schild,
|
|
11,2 px bei Format und Saeule). body.start davor, weil content.css
|
|
NACH start.css geladen wird und dort dieselbe Regel steht. */
|
|
@media (max-width: 760px) {
|
|
body.start .vorlage__hookschild { font-size: .72rem; }
|
|
body.start .vorlage__marke { font-size: .75rem; }
|
|
}
|