DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8e3eccc7a841209be2cc44e1827a9e6826cde8b9
dogfather-universe/workspace/assets/css/wissen.css
T
DogFatherGitandClaude Opus 5 1c00770ec5 Lesbarere Kaesten, und DogFather kann durch fremde Augen sehen 
SCREEN 1 -- "die Kachel ganz leicht dunkler, so dass man den Text besser
gelesen bekommt, aber nicht zu viel, so dass man den Hasen noch sieht."

Die Erklaerkaesten stehen jetzt auf 88 statt 78 Prozent Deckung. Zehn
Punkte sind gemessen der Unterschied zwischen muehsam und ruhig lesbar
und lassen zwoelf Prozent Bild durch -- das Motiv bleibt sichtbar.

"und die von wichtigen und neuen PDFs sollen auch staerker sein."
Das war kein Geschmack, sondern ein Fehler: `background` ist eine
Eigenschaft, keine Schicht. Die Zeile
`background: rgba(232,192,125,.045)` hat die Flaeche nicht getoent,
sondern ERSETZT -- uebrig blieben viereinhalb Prozent Deckung. Damit war
ausgerechnet die Anleitung, die jeder lesen soll, die am schwersten
lesbare der Seite. Die Toenung liegt jetzt als Schicht darueber.
Gemessen: 88 % gegen 78 % bei einer gewoehnlichen.

pruef-lesbarkeit.mjs misst das an ECHTEN PIXELN (Text kurz unsichtbar
machen, Flaeche fotografieren, WCAG-Formel) und kennt ZWEI Grenzen --
lesbar genug UND durchsichtig genug. Mit nur einer haette sie eine
schwarze Flaeche am besten gefunden, und das wollte niemand.

SCREEN 2 -- "ich will alles von den Scouts und Managern einsehen
koennen, auswaehlen, was und von wem. Ueberall, auf jeder Seite.
NUR WIR BEIDE SOLLEN DIESE OPTION HABEN."

Die naheliegende Loesung waere ein Filter je Seite gewesen -- also eine
zweite Rechteregel in zwoelf Modulen, und eine Rechteregel an zwoelf
Stellen stimmt irgendwann an elf. Stattdessen wird die PERSON getauscht,
nicht die Regel: Waehlt DogFather einen Scout, laufen alle vorhandenen
Sichtbarkeitsregeln unveraendert mit diesem Scout. Er sieht exakt dessen
Arbeitsplatz -- nicht mehr, nicht weniger. Keine neue Rechteregel.

Im Browser genauso: EIN Ort statt vierzehn. fetch wird einmal umgeleitet
und haengt den Wert an jede lesende Abfrage an. Neue Seiten sind damit
von selbst dabei; man kann es nicht vergessen.

Drei Sicherungen: nur admin (auf dem SERVER geprueft, nicht in der
Oberflaeche), nur lesend (geschrieben wird immer im eigenen Namen --
sonst staende im Protokoll der falsche Name), nur aktive Personen.

Und ein Rahmen um die Seite, solange eine fremde Sicht laeuft. Der
gefaehrlichste Fall ist nicht, dass man nicht umschalten kann, sondern
dass man vergisst, dass man umgeschaltet hat -- und drei Aufgaben statt
dreissig fuer den Bestand haelt.

FUENF FEHLER, DIE DIE PRUEFUNGEN GEFUNDEN HABEN:

1. steckbrief.html hat die Kopfleiste NIE gefuellt -- dort stand
   monatelang "…" statt des eigenen Namens. Aufgefallen, weil der
   Umschalter dort fehlte. Jetzt zusaetzlich ein Netz darunter: Meldet
   sich nach kurzer Zeit niemand, holt der Kopf sich selbst, wer
   angemeldet ist. Die naechste neue Seite kann es nicht mehr vergessen.

2. Der Umschalter sprengte die Kopfleiste (46 px am Rechner, 117 px am
   Handy) und drueckte den Abmelden-Knopf hinaus.

3. Ich habe das <select> gestaltet -- wahl.js ersetzt aber jedes
   Auswahlfeld durch einen eigenen Knopf und schrumpft das echte Feld
   auf einen Pixel. Meine Regeln haben es wieder auf 20 x 44 aufgeblasen,
   wo es als unsichtbares Hindernis ueber dem Knopf lag. Gestaltet wird
   jetzt der Knopf.

4. Ein Wettlauf: Auf profil.html rufen zwei Dateien werZeigen() auf.
   Beide kamen an "gibt es den Umschalter schon?" vorbei, bevor eine ihn
   angehaengt hatte -- zwei Umschalter uebereinander. Die Sperre gehoert
   vor das erste await.

5. Die Handy-Pruefung bemaengelte ein Schild, das dort per display:none
   gar nicht erscheint. Sie sieht jetzt nur noch sichtbaren Text an --
   eine Pruefung, die Unsichtbares anmahnt, gewoehnt man sich ab zu
   lesen.

Dazu zwei Messfehler in den Pruefungen selbst: getComputedStyle liefert
ein LEBENDES Objekt (die Farbe wurde gelesen, nachdem der Text
unsichtbar gemacht war -- gemeldet wurden 1,17:1 fuer tadellos lesbaren
Text), und ein Vergleich lief still ins Leere, weil die Vergleichsdaten
fehlten.

pruef-sicht.mjs stellt den MISSBRAUCH an den Anfang: Scout, Manager und
Creator haengen ?sicht= an und muessen ignoriert werden; erfundene
Nummern, Buchstaben und ein Einschleusversuch fallen auf die eigene
Sicht zurueck; eine abgeschaltete Person liefert keine Sicht mehr; und
was DogFather bei fremder Sicht anlegt, steht unter SEINEM Namen.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-01 21:20:23 +02:00

410 lines
16 KiB
CSS
Raw Blame History

/* ===================================================================
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)),
rgba(9, 13, 22, .88);
}
/* 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)),
rgba(9, 13, 22, .88);
}
.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; }
Reference in New Issue View Git Blame Copy Permalink