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]>
377 lines
15 KiB
CSS
377 lines
15 KiB
CSS
/* ===================================================================
|
|
Wissens-Bibliothek.
|
|
|
|
Zwanzig Kategorien sind viel. Damit sie trotzdem in einem Blick
|
|
erfassbar bleiben, sind sie in sechs Welten gebuendelt, und jede Welt
|
|
hat ihre eigene Farbe. Man sucht dann nicht unter zwanzig gleichen
|
|
Kacheln, sondern erst die Welt -- und da stehen nur noch drei bis vier.
|
|
|
|
Die Farben sind gedeckt und tragen nur den Symbolring, nicht die
|
|
ganze Kachel. Zwanzig farbige Flaechen waeren ein Flickenteppich.
|
|
=================================================================== */
|
|
|
|
/* ---------- Suche und Filter ---------------------------------------------- */
|
|
|
|
.suchleiste {
|
|
display: grid; gap: 12px; margin-bottom: 30px;
|
|
padding: 16px 18px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
}
|
|
.suchleiste__feld { position: relative; display: flex; align-items: center; }
|
|
.suchleiste__lupe {
|
|
position: absolute; left: 13px; width: 17px; height: 17px;
|
|
fill: none; stroke: var(--text-still); stroke-width: 1.8; stroke-linecap: round;
|
|
pointer-events: none;
|
|
}
|
|
.suchleiste__feld input {
|
|
width: 100%; padding: 11px 14px 11px 40px;
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
.suchleiste__feld input:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .6);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
|
}
|
|
.suchleiste__feld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
|
|
|
|
.suchleiste__filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
|
.suchleiste__filter .feld-schild { margin: 0; }
|
|
.suchleiste__filter select {
|
|
padding: 8px 11px; min-width: 118px;
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit; font-size: .85rem;
|
|
}
|
|
.suchleiste__filter select:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .6);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
|
}
|
|
|
|
/* ---------- Bloecke -------------------------------------------------------- */
|
|
|
|
.block { margin-bottom: 34px; }
|
|
.block__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
|
|
.block__titel {
|
|
margin: 0; font-size: .78rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
|
}
|
|
.block__zahl {
|
|
min-width: 22px; padding: 1px 8px; text-align: center;
|
|
font-size: .74rem; font-weight: 700; color: var(--text-still);
|
|
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
|
}
|
|
|
|
/* ---------- Kacheln --------------------------------------------------------- */
|
|
|
|
.kacheln {
|
|
display: grid; gap: 11px;
|
|
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
|
|
}
|
|
|
|
.kachel {
|
|
--w: var(--akzent);
|
|
position: relative; display: flex; align-items: flex-start; gap: 14px;
|
|
padding: 15px 16px;
|
|
text-decoration: none; color: var(--text);
|
|
border: 1px solid transparent; border-radius: 13px;
|
|
/* Deutlich heller als der Seitenhintergrund (#05070d) -- die Kacheln
|
|
sollen als Flaechen erkennbar sein, nicht im Dunkeln verschwinden.
|
|
Gemessen: Seite liegt bei RGB(5,7,13), die Kachel bei RGB(38,49,67) --
|
|
der erste Versuch mit (27,36,51) war zu zaghaft, da kam der sichtbare
|
|
Gewinn fast nur vom Rand. */
|
|
background:
|
|
linear-gradient(#263143, #1c2637) padding-box,
|
|
linear-gradient(150deg,
|
|
color-mix(in srgb, var(--w) 62%, transparent),
|
|
rgba(255, 255, 255, .12) 55%,
|
|
color-mix(in srgb, var(--w) 26%, transparent)) border-box;
|
|
transition: transform .16s ease, box-shadow .2s ease, background .16s ease;
|
|
}
|
|
.kachel::after {
|
|
content: ""; position: absolute; left: 14px; right: 14px; top: 1px; height: 1px;
|
|
background: linear-gradient(90deg, transparent,
|
|
color-mix(in srgb, var(--w) 45%, transparent), transparent);
|
|
}
|
|
.kachel:hover {
|
|
transform: translateY(-2px);
|
|
background:
|
|
linear-gradient(#2f3b50, #232e42) padding-box,
|
|
linear-gradient(150deg, var(--w), rgba(255, 255, 255, .16) 55%,
|
|
color-mix(in srgb, var(--w) 40%, transparent)) border-box;
|
|
box-shadow: 0 8px 26px -11px color-mix(in srgb, var(--w) 90%, transparent);
|
|
}
|
|
.kachel:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 32%, transparent);
|
|
}
|
|
.kachel[data-leer="ja"] { opacity: .82; }
|
|
.kachel[data-leer="ja"]:hover { opacity: 1; }
|
|
|
|
.kachel__ring {
|
|
flex: none; display: grid; place-items: center;
|
|
width: 42px; height: 42px; border-radius: 12px;
|
|
background: color-mix(in srgb, var(--w) 22%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--w) 45%, transparent);
|
|
}
|
|
.kachel__symbol {
|
|
width: 21px; height: 21px;
|
|
fill: none; stroke: var(--w); stroke-width: 1.6;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.kachel__text { min-width: 0; flex: 1; }
|
|
.kachel__name { display: block; font-size: .93rem; font-weight: 650; line-height: 1.3; }
|
|
.kachel__beschreibung {
|
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
|
overflow: hidden; margin-top: 3px;
|
|
/* War --text-still (gemessen 3,6:1 auf der neuen Flaeche) -- zu blass
|
|
fuer laufenden Text. --text-leise liegt bei 6,4:1. */
|
|
font-size: .79rem; color: var(--text-leise); line-height: 1.45;
|
|
}
|
|
.kachel__zahl {
|
|
flex: none; min-width: 26px; padding: 2px 8px; align-self: flex-start;
|
|
text-align: center; font-size: .75rem; font-weight: 700;
|
|
color: color-mix(in srgb, var(--w) 40%, #ffffff);
|
|
background: color-mix(in srgb, var(--w) 20%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--w) 40%, transparent);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* Eine Farbe je Welt -- die Reihenfolge folgt der Gliederung. */
|
|
.block[data-welt="tiktok"] .kachel { --w: #3fbdf5; }
|
|
.block[data-welt="aufbau"] .kachel { --w: #8a76ff; }
|
|
.block[data-welt="bildton"] .kachel { --w: #5fc99a; }
|
|
.block[data-welt="technik"] .kachel { --w: #e8b877; }
|
|
.block[data-welt="inhalt"] .kachel { --w: #e88fb4; }
|
|
.block[data-welt="hilfe"] .kachel { --w: #8e9cb0; }
|
|
|
|
/* ---------- Karte einer Anleitung -------------------------------------------- */
|
|
|
|
.karten { display: grid; gap: 10px; }
|
|
|
|
.pdf {
|
|
padding: 15px 17px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
transition: border-color .18s ease;
|
|
}
|
|
.pdf:hover { border-color: rgba(255, 255, 255, .18); }
|
|
.pdf[data-wichtig="ja"] {
|
|
border-color: rgba(232, 192, 125, .32);
|
|
background: rgba(232, 192, 125, .045);
|
|
}
|
|
|
|
.pdf__kopf { display: flex; gap: 14px; align-items: flex-start; }
|
|
.pdf__ring {
|
|
flex: none; display: grid; place-items: center;
|
|
width: 38px; height: 38px; border-radius: 11px;
|
|
background: rgba(63, 189, 245, .1);
|
|
border: 1px solid rgba(63, 189, 245, .24);
|
|
}
|
|
.pdf__symbol {
|
|
width: 19px; height: 19px;
|
|
fill: none; stroke: var(--akzent); stroke-width: 1.6;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.pdf__mitte { min-width: 0; flex: 1; }
|
|
.pdf__titel { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.35; }
|
|
.pdf__text { margin: 4px 0 0; font-size: .86rem; color: var(--text-leise); max-width: 78ch; }
|
|
.pdf__fuss { margin: 9px 0 0; font-size: .75rem; color: var(--text-still); }
|
|
|
|
.pdf__marken { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
|
|
.marke-stufe, .marke-geraet, .marke-wichtig, .marke-tag {
|
|
padding: 3px 9px; border-radius: 999px;
|
|
font: inherit; font-size: .71rem; font-weight: 600;
|
|
border: 1px solid var(--rand); color: var(--text-still);
|
|
background: transparent;
|
|
}
|
|
.marke-stufe[data-stufe="einsteiger"] {
|
|
color: #5fc99a; border-color: rgba(95, 201, 154, .38); background: rgba(95, 201, 154, .1);
|
|
}
|
|
.marke-stufe[data-stufe="fortgeschritten"] {
|
|
color: #e8b877; border-color: rgba(232, 184, 119, .38); background: rgba(232, 184, 119, .1);
|
|
}
|
|
.marke-stufe[data-stufe="profi"] {
|
|
color: #e88fb4; border-color: rgba(232, 143, 180, .4); background: rgba(232, 143, 180, .1);
|
|
}
|
|
.marke-geraet { color: var(--text-leise); }
|
|
.marke-wichtig {
|
|
color: #e8c07d; border-color: rgba(232, 192, 125, .4); background: rgba(232, 192, 125, .1);
|
|
}
|
|
.marke-tag { cursor: pointer; transition: color .16s ease, border-color .16s ease; }
|
|
.marke-tag:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .42); }
|
|
|
|
.pdf__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
|
|
|
|
/* ---------- Formular ---------------------------------------------------------- */
|
|
|
|
/* ---------- Ablagefläche für die PDF ------------------------------------
|
|
Ein nacktes <input type="file"> sah aus wie ein Fremdkörper und der
|
|
Knopf wurde vom Browser abgeschnitten ("K..."). Eine eigene Fläche
|
|
nimmt auch gezogene Dateien an -- der Weg, den man ohnehin erwartet. */
|
|
|
|
.pdf-ablage {
|
|
display: grid; place-items: center; gap: 5px;
|
|
padding: 26px 20px; cursor: pointer;
|
|
border: 1px dashed rgba(255, 255, 255, .2);
|
|
border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
transition: border-color .18s ease, background .18s ease;
|
|
}
|
|
.pdf-ablage:hover, .pdf-ablage:focus-visible {
|
|
outline: none;
|
|
border-color: rgba(63, 189, 245, .55);
|
|
background: rgba(63, 189, 245, .06);
|
|
}
|
|
.pdf-ablage[data-drueber="ja"] {
|
|
border-color: var(--akzent); border-style: solid;
|
|
background: rgba(63, 189, 245, .1);
|
|
}
|
|
.pdf-ablage[data-fertig="ja"] {
|
|
border-style: solid; border-color: rgba(95, 201, 154, .45);
|
|
background: rgba(95, 201, 154, .07);
|
|
}
|
|
.pdf-ablage__zeichen {
|
|
width: 26px; height: 26px;
|
|
fill: none; stroke: var(--text-still); stroke-width: 1.6;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.pdf-ablage[data-fertig="ja"] .pdf-ablage__zeichen { stroke: #5fc99a; }
|
|
.pdf-ablage__text { margin: 0; font-size: .92rem; color: var(--text-leise); text-align: center; }
|
|
.pdf-ablage__text strong { color: var(--akzent); }
|
|
.pdf-ablage__klein { margin: 0; font-size: .77rem; color: var(--text-still); }
|
|
|
|
|
|
.tag-vorschlag { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
|
|
.tag-knopf {
|
|
padding: 3px 9px; cursor: pointer; font-size: .73rem;
|
|
background: transparent; border: 1px dashed var(--rand); border-radius: 999px;
|
|
color: var(--text-still); font-family: inherit;
|
|
transition: color .16s ease, border-color .16s ease;
|
|
}
|
|
.tag-knopf:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .45); border-style: solid; }
|
|
|
|
.leer-hinweis p { margin: 0; max-width: 52ch; }
|
|
|
|
@media (max-width: 620px) {
|
|
.kacheln { grid-template-columns: 1fr; }
|
|
.suchleiste__filter { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; }
|
|
.suchleiste__filter .knopf-still { grid-column: 1 / -1; justify-self: start; }
|
|
.pdf__ring { display: none; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kachel, .pdf, .marke-tag, .tag-knopf, .pdf-ablage,
|
|
.schalter, .schalter__gleis, .schalter__punkt { transition: none; }
|
|
.kachel:hover { transform: none; }
|
|
}
|
|
|
|
/* Bestätigung in derselben Zeile wie Fehler, aber nicht in Warnrot --
|
|
eine Erfolgsmeldung in Rot liest sich wie ein Problem. */
|
|
.fehler[data-gut="ja"] {
|
|
color: #79d1a2;
|
|
padding: 9px 13px;
|
|
background: rgba(95, 201, 154, .09);
|
|
border: 1px solid rgba(95, 201, 154, .3);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
|
|
/* ===================================================================
|
|
Kategoriewahl und Filterschalter (31.08.2026).
|
|
|
|
Beides ersetzt ein <select>. Der Grund ist derselbe wie bei der
|
|
Rollenwahl: Ein AUFGEKLAPPTES Systemmenue laesst sich nicht
|
|
gestalten -- es kam als weisses Windows-Menue mitten in der dunklen
|
|
Oberflaeche. Bei zwanzig Kategorien kam dazu, dass man in so einer
|
|
Liste nichts findet.
|
|
|
|
Hier stehen dieselben sechs Welten und dieselben Farben wie auf den
|
|
Kacheln der Seite: Man waehlt aus demselben Regal, in dem man sonst
|
|
stoebert.
|
|
=================================================================== */
|
|
|
|
.katwahl { display: grid; gap: 14px; margin-top: 4px; }
|
|
|
|
.katwahl__welt { --w: var(--akzent); }
|
|
.katwahl__welt[data-welt="tiktok"] { --w: #3fbdf5; }
|
|
.katwahl__welt[data-welt="aufbau"] { --w: #8a76ff; }
|
|
.katwahl__welt[data-welt="bildton"] { --w: #5fc99a; }
|
|
.katwahl__welt[data-welt="technik"] { --w: #e8b877; }
|
|
.katwahl__welt[data-welt="inhalt"] { --w: #e88fb4; }
|
|
.katwahl__welt[data-welt="hilfe"] { --w: #8e9cb0; }
|
|
|
|
.katwahl__weltname {
|
|
margin: 0 0 6px; font-size: .7rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase;
|
|
color: color-mix(in srgb, var(--w) 55%, #ffffff);
|
|
}
|
|
.katwahl__reihe { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
|
|
.katwahl__knopf {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 8px 13px; cursor: pointer; text-align: left;
|
|
background: linear-gradient(#1a2230, #151c28);
|
|
border: 1px solid var(--rand); border-radius: 10px;
|
|
color: var(--text-leise); font: inherit; font-size: .83rem;
|
|
transition: border-color .16s ease, background .16s ease, color .16s ease;
|
|
}
|
|
.katwahl__knopf:hover { color: var(--text); border-color: color-mix(in srgb, var(--w) 45%, transparent); }
|
|
.katwahl__knopf:focus-visible {
|
|
outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 32%, transparent);
|
|
}
|
|
.katwahl__knopf[data-an="ja"] {
|
|
color: #fff; font-weight: 600;
|
|
border-color: color-mix(in srgb, var(--w) 65%, transparent);
|
|
background: linear-gradient(color-mix(in srgb, var(--w) 20%, #1a2230),
|
|
color-mix(in srgb, var(--w) 11%, #151c28));
|
|
box-shadow: 0 4px 14px -9px var(--w);
|
|
}
|
|
.katwahl__symbol {
|
|
width: 17px; height: 17px; flex: none;
|
|
fill: none; stroke: var(--w); stroke-width: 1.7;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.katwahl__name { white-space: nowrap; }
|
|
|
|
/* ---------- Filterschalter ------------------------------------------------ */
|
|
|
|
.filterreihe { display: inline-flex; gap: 4px; }
|
|
.filterreihe__knopf {
|
|
padding: 7px 12px; cursor: pointer;
|
|
background: rgba(255, 255, 255, .04);
|
|
border: 1px solid var(--rand); border-radius: 8px;
|
|
color: var(--text-still); font: inherit; font-size: .82rem;
|
|
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
|
}
|
|
.filterreihe__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .22); }
|
|
.filterreihe__knopf[data-an="ja"] {
|
|
color: #fff; font-weight: 600;
|
|
border-color: rgba(63, 189, 245, .55);
|
|
background: rgba(63, 189, 245, .16);
|
|
}
|
|
.filterreihe__knopf:focus-visible {
|
|
outline: none; box-shadow: 0 0 0 3px rgba(63, 189, 245, .3);
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.katwahl__knopf { flex: 1 1 100%; }
|
|
.filterreihe { flex-wrap: wrap; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.katwahl__knopf, .filterreihe__knopf { transition: none; }
|
|
}
|
|
|
|
/* "Neu" laeuft nach 48 Stunden ab, "Wichtig" bleibt bis zum Abschalten.
|
|
Zwei Marken statt einer -- sonst sieht man nicht, warum eine Anleitung
|
|
oben steht, und wundert sich, wenn eine verschwindet und die andere
|
|
nicht. */
|
|
.marke-neu {
|
|
padding: 3px 9px; border-radius: 999px;
|
|
font-size: .71rem; font-weight: 600;
|
|
color: #5fc99a;
|
|
background: rgba(95, 201, 154, .12);
|
|
border: 1px solid rgba(95, 201, 154, .38);
|
|
}
|
|
.block__frage { margin: -6px 0 13px; font-size: .82rem; color: var(--text-still); max-width: 76ch; }
|