DogFatherGitandClaude Opus 5
8efdb39ce9
Filipe: "gerade sehen die sogar leicht verschwommen aus ... die sollen
nicht durch die kacheln gehen ... ich wollte eine krasse aenderung."
Drei Ursachen, alle drei von mir eingebaut, alle drei gemessen:
1. ICH HABE 1647-PIXEL-BILDER ALS "uhd" MIT 2400 PIXELN AUSGELIEFERT.
Am Morgen stand in derselben Datei, sein Schirm sei 2550 px breit und
das groesste Bild 1600 -- meine "Loesung" war, die Ausgabe
hochzurechnen. Es gab nie mehr Bildpunkte. Dazu fehlte der Schritt,
den der Kommentar daneben selbst verlangt ("Verkleinern MITTELT
Bildpunkte ... deshalb schaerft man danach nach"): Es wurde nie
nachgeschaerft. Jetzt Unscharfmaske auf der ENDgroesse
(Ausgabeschaerfung) und ein Glanz-Durchgang: die hellsten Stellen
weich gezeichnet und additiv dazu -- Licht, das ueber seine Kante
strahlt. Guete 0,80 -> 0,88, am Gate 0,93.
2. backdrop-filter: blur() UNTER JEDER FLAECHE. 16 px unter siebzehn
Kacheln, 13 px unter sieben weiteren Flaechen, 26 px unter der
Anmeldekarte. Ein Weichzeichner mittelt nicht nur, was hinter dem
Element liegt -- er zieht seinen Radius weit darueber hinaus. Hinter
der Anmeldetafel ist Schwarz, direkt daneben aber die hellste Stelle
des Motivs: Die Karte wurde deshalb GRAU, gemessen rgb(46,57,64)
statt rgb(15,22,34). Je schoener der Rahmen, desto grauer die Karte.
Alle Weichzeichner raus, --flaeche 0,78 -> 0,89: Durchsicht bleibt,
aber scharf.
3. DIE TAFELMESSUNG WAR FALSCH, UND ICH HABE SIE VON HAND "KORRIGIERT".
Sie lief vom Inneren nach aussen und hielt beim ersten farbigen Punkt
an -- links glueht der Rahmen breiter als rechts, also hielt sie dort
frueher an (58,59 statt 55,37). Statt den Messfehler zu beheben, habe
ich in der CSS "um 1,1 % nach links" geschaetzt. Ergebnis: 32 px
schwarze Tafel blieben links offen. Jetzt wird die einzige
Eigenschaft gesucht, die nur der Rahmen hat -- kraeftig UND farbig --,
mit Gegenprobe auf der linken Bildhaelfte (dort muessen es 0 sein).
KACHELN: keine Politur mehr, ein anderes Ding. Jede steckt in einer
LEUCHTSCHIENE ihrer Kategoriefarbe, die Licht in die Platte wirft --
links scharfe Kante, rechts rund. Steiler Abfall (52 % statt 68 %):
beleuchtet, nicht eingefaerbt. Der Glanz wandert beim Ueberfahren
einmal durch. Dieselbe Sprache auf der Anmeldeseite: die vier Rollen
sind Tasten in Schienen (Gold/Bernstein/Gruen/Blau).
Zwei eigene Fehler nebenbei, beide durch das Unveraenderlichkeits-
Zeichen gefunden -- eine Zahl, die sich nach einer Aenderung KEIN Stueck
bewegt, sagt "falsche Stelle", nicht "zu wenig":
- Dreimal exakt 4,16:1 an "Ueberfaellig". Der Pruefpunkt lag nicht auf
dem Knopf, sondern in der Luecke daneben auf dem Bild. Ursache war
das hellere Hochkant-Bild, nicht das Bedienelement -> mehr Schleier
und weniger Glanz NUR fuer die Handy-Fassung. 4,16 -> 5,10.
- Die Koernung der Anmeldekarte lag mit 90 % Deckkraft ohne Mischmodus
ueber allem und hob jeden Bildpunkt um 30 Stufen. Jetzt 4 % mit
overlay, auf eigener Ebene.
- --flaeche anzuheben machte die WICHTIGE Anleitung duenner als eine
gewoehnliche (88 gegen 89) -- feste Zahl neben beweglicher Groesse.
Gefunden von pruef-lesbarkeit, jetzt an --flaeche gebunden.
Gruen: buehne (38), start-ansicht (136), handy (59), breiten (23),
lesbarkeit (14), css-klassen (15), barrierefrei (18), tempo (8).
Co-Authored-By: Claude Opus 5 <[email protected]>
421 lines
17 KiB
CSS
421 lines
17 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(min(310px, 100%), 1fr));
|
|
}
|
|
|
|
.kachel {
|
|
--w: var(--akzent);
|
|
--ton: 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. */
|
|
/* Beide Namen gleichzeitig: --w heisst die Farbe hier seit jeher und
|
|
steht in zwei Dutzend Regeln dieser Datei; --ton ist der Name, den
|
|
der ganze uebrige Workspace benutzt (Kacheln der Startseite,
|
|
Seitenkoepfe, Buehnenzuordnung).
|
|
|
|
Ohne --ton leuchtete das Licht unter dem Zeiger in der Farbe der
|
|
SEITE statt in der Farbe der Kachel -- auf der Wissensseite waren
|
|
also alle sechs Welten violett. Genau das war zu sehen. */
|
|
.block[data-welt="tiktok"] .kachel { --w: #3fbdf5; --ton: #3fbdf5; }
|
|
.block[data-welt="aufbau"] .kachel { --w: #8a76ff; --ton: #8a76ff; }
|
|
.block[data-welt="bildton"] .kachel { --w: #5fc99a; --ton: #5fc99a; }
|
|
.block[data-welt="technik"] .kachel { --w: #e8b877; --ton: #e8b877; }
|
|
.block[data-welt="inhalt"] .kachel { --w: #e88fb4; --ton: #e88fb4; }
|
|
.block[data-welt="hilfe"] .kachel { --w: #8e9cb0; --ton: #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); }
|
|
/* WICHTIG UND NEU MUESSEN BESSER LESBAR SEIN ALS DER REST, nicht
|
|
schlechter -- und genau das war hier verkehrt herum.
|
|
|
|
`background` ist eine Eigenschaft, keine Schicht: Die Zeile
|
|
`background: rgba(232,192,125,.045)` hat die Flaeche var(--flaeche)
|
|
nicht getoent, sondern ERSETZT. Uebrig blieben viereinhalb Prozent
|
|
Deckung -- das Hintergrundbild kam praktisch ungefiltert durch, und
|
|
ausgerechnet die Anleitung, die jeder lesen soll, war die am
|
|
schwersten lesbare auf der Seite.
|
|
|
|
Jetzt liegt die Toenung als eigene Schicht DARUEBER (ein
|
|
linear-gradient aus zweimal derselben Farbe ist der uebliche Weg, aus
|
|
einer Farbe eine Schicht zu machen). Die Flaeche bleibt darunter --
|
|
und weil "wichtig" mehr Ruhe verdient als der Rest, ist sie hier
|
|
sogar etwas dichter als anderswo. */
|
|
.pdf[data-wichtig="ja"] {
|
|
border-color: rgba(232, 192, 125, .42);
|
|
background:
|
|
linear-gradient(rgba(232, 192, 125, .07), rgba(232, 192, 125, .07)),
|
|
/* AN --flaeche GEBUNDEN, nicht danebengeschrieben (07.09.2026).
|
|
Hier stand fest '.88'. Als --flaeche von 0,78 auf 0,89 stieg
|
|
(die Flaechen der Seite haben ihren Weichzeichner verloren), war
|
|
die WICHTIGE Karte ploetzlich duenner als eine gewoehnliche --
|
|
genau der Fehler, gegen den pruef-lesbarkeit gebaut wurde, nur
|
|
diesmal von der anderen Seite ausgeloest. Eine feste Zahl neben
|
|
einer Groesse, die sich bewegt, geht irgendwann auseinander;
|
|
gefunden hat es die Pruefung, nicht das Auge. */
|
|
var(--flaeche);
|
|
}
|
|
/* Dasselbe fuer das Neue: Es steht nur 48 Stunden da und soll in dieser
|
|
Zeit auch wirklich gelesen werden. */
|
|
.pdf:has(.marke-neu) {
|
|
background:
|
|
linear-gradient(rgba(95, 201, 154, .05), rgba(95, 201, 154, .05)),
|
|
/* Dieselbe Bindung an --flaeche wie oben. Die Pruefung schaut nur
|
|
auf die WICHTIGE Karte -- diese hier haette denselben Fehler
|
|
still behalten, weil niemand nach ihr sieht. */
|
|
var(--flaeche);
|
|
}
|
|
|
|
.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; }
|