DogFatherGitandClaude Opus 5
88a8d302b9
ZWEITER BEFUND DES ABENDS, und wieder einer, den es im Agenturhaus
gar nicht geben konnte.
Bauplan Kapitel 11, woertlich: "Stand der Ersten Schritte: nur fuer
Team-Rollen, 'fertig / offen' mit Datum. Fuer die Community wird
nichts je Person angezeigt."
Gemessen: Auf der Crew-Adresse nahm die Liste schlicht alle Fassungen
des Hauses -- und seit die Community seit heute frueh eine eigene
Fassung hat, stand jedes Mitglied mit Namen, Fortschritt und Datum
darin. Im Agenturhaus konnte das nie auffallen, dort ist jede Fassung
eine Teamrolle.
Das ist kein Schoenheitsfehler: Ein Mitglied hat sich zum Mitlesen
angemeldet, nicht zu einer Fortschrittsakte. Jetzt siebt
`standRollen()` ueber AUSSEN_ROLLEN -- abgeleitet und nicht als zweite
Liste, damit die naechste Rolle von aussen automatisch heraus ist.
Gegenprobe gefahren: Sieb ausgebaut -> die Zeile wird rot und nennt
"1 von 4".
DAZU GEPRUEFT, was Kapitel 11 sonst verlangt (pruef-anleitung
173 -> 181): DogFather bekommt auf der Crew-Adresse die Pflege statt
einer Fassung, mit den VIER Fassungen dieses Hauses (nicht denen der
Agentur); ein Modi kommt an die Liste gar nicht heran (403); und die
"Vorschau in der Sicht dieser Rolle" liefert ihm die 29 Karten des
Modi, mit `darf_pflegen: true` und `darf_abhaken: false` -- er soll
pflegen koennen, aber nicht in fremdem Namen abhaken. Nachgestellt
wird dabei genau die Anfrage, die kopf.js stellt (`sicht=<Nummer>`
an jede lesende Anfrage), nicht eine nachgebaute.
AUSSERDEM: ZWEI DINGE HIESSEN `an-stufe`
Der Kasten einer EINORDNUNG ("Das brauchst du sofort") und der Kasten
"Deine Stufe" mit Neu, Dabei, Stamm trugen dieselbe Klasse. Der
Bauplan warnt in Kapitel 14 ausdruecklich davor, die beiden zu
verwechseln -- im Quelltext taten sie es.
Aufgefallen beim Messen des Filters "Muss": Er musste seine Suche von
Hand auf `#stufen` eingrenzen, sonst haette er die Karte "Deine Stufe"
mit weggeblendet. Eine Regel wie `.an-stufe { display: none }` haette
denselben Schaden angerichtet, und man haette sie nicht kommen sehen.
Die Mitglieder-Stufe heisst jetzt `an-rang`; in der Oberflaeche aendert
sich kein Wort.
IM BROWSER NACHGEMESSEN (390 px, echte Anmeldung)
Filter "Muss" -> Community 5 Karten, rechte Hand 8. Genau die
Zahlen der Abnahme-Checkliste, und nach dem
Umbenennen blendet er nur noch den einen
Abschnitt aus statt zwei.
"Deine Stufe" -> Community ja ("Du bist gerade: Neu"), rechte Hand
nein. Steht und faellt mit dem neuen Namen.
Keine Browsermeldungen, kein Querscrollen.
pruef-css-klassen und pruef-anleitung (181) gruen.
Co-Authored-By: Claude Opus 5 <[email protected]>
1027 lines
33 KiB
CSS
1027 lines
33 KiB
CSS
/* =====================================================================
|
|
anleitung.css — die Einweisung je Rolle (06.10.2026)
|
|
=====================================================================
|
|
|
|
VIER REGELN, DIE HIER ÜBERALL GELTEN:
|
|
|
|
1. KEINE EIGENEN FARBEN. Jede Karte trägt den Ton ihrer echten
|
|
Kachel (`data-ton`, gesetzt von anleitung.js). Eine eigene
|
|
Farbwelt hier wäre eine zweite Wahrheit über dieselben Kacheln --
|
|
und man würde die Anleitung nicht mehr mit der Startseite
|
|
zusammenlesen können.
|
|
|
|
2. DIE STUFE IST EIN WORT. Sie steht an jeder Karte als Text, nicht
|
|
nur als Farbe. Ein Mensch, der Farben schlecht unterscheidet,
|
|
läse die Seite sonst ohne ihre einzige Ordnung.
|
|
|
|
3. MOBILE FIRST ALS REGEL, NICHT ALS ZAHL. Das Kartengitter bricht
|
|
über `auto-fill` um, nicht über eine Schwelle in Pixeln. Eine
|
|
feste Zahl ist eine Rechnung von gestern und wird beim nächsten
|
|
zusätzlichen Element still falsch.
|
|
|
|
4. NICHTS UNTER 11,5 PIXELN. Hausregel seit dem 01.09.2026,
|
|
nachgemessen von pruef-css-klassen. Kleinster Wert hier: .78rem.
|
|
===================================================================== */
|
|
|
|
.an-seite {
|
|
/* Der Abstand zwischen den großen Blöcken -- einmal gesetzt, überall
|
|
benutzt. Drei verschiedene Abstände sind der Grund, warum eine
|
|
Seite „unruhig" aussieht, ohne dass man sagen kann, woran es liegt. */
|
|
--an-luft: 26px;
|
|
}
|
|
|
|
/* =====================================================================
|
|
OHNE EIGENE FASSUNG (DogFather)
|
|
===================================================================== */
|
|
.an-ohne {
|
|
margin: 18px 0 0;
|
|
padding: 16px 18px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein, 12px);
|
|
background: var(--flaeche);
|
|
color: var(--text-still);
|
|
font-size: .95rem;
|
|
line-height: 1.6;
|
|
max-width: 62ch;
|
|
}
|
|
|
|
.an-nochmal { margin: 16px 0 0; }
|
|
.an-nochmal__weg {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 40px;
|
|
padding: 0 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--rand);
|
|
background: var(--flaeche);
|
|
color: var(--text-still);
|
|
font-size: .85rem;
|
|
font-weight: 650;
|
|
text-decoration: none;
|
|
}
|
|
.an-nochmal__weg:hover { color: var(--text); border-color: var(--akzent); }
|
|
.an-nochmal__weg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
/* =====================================================================
|
|
DER FORTSCHRITT (Etappe 2)
|
|
=====================================================================
|
|
|
|
Er zählt nur die Ersten Schritte. Der Balken ist ein echtes
|
|
`progress` -- damit bringt er die Ansage für Vorleseprogramme mit.
|
|
Browser gestalten das Element unterschiedlich, deshalb werden beide
|
|
Schreibweisen gesetzt (`::-webkit-progress-*` und `::-moz-*`); ohne
|
|
sie steht in Firefox ein graues Kästchen in der Hausfarbe von 2010.
|
|
===================================================================== */
|
|
.an-stand {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px 14px;
|
|
margin-top: 16px;
|
|
padding: 12px 18px;
|
|
border: 1px solid var(--rand);
|
|
background: var(--flaeche);
|
|
clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
|
|
}
|
|
|
|
.an-stand__balken {
|
|
flex: 1 1 180px;
|
|
height: 8px;
|
|
min-width: 140px;
|
|
border: none;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--text-still) 22%, transparent);
|
|
appearance: none;
|
|
}
|
|
.an-stand__balken::-webkit-progress-bar {
|
|
background: color-mix(in srgb, var(--text-still) 22%, transparent);
|
|
border-radius: 999px;
|
|
}
|
|
.an-stand__balken::-webkit-progress-value {
|
|
background: var(--akzent);
|
|
border-radius: 999px;
|
|
transition: width var(--tempo, .18s);
|
|
}
|
|
.an-stand__balken::-moz-progress-bar {
|
|
background: var(--akzent);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.an-stand__satz {
|
|
flex: 0 1 auto;
|
|
margin: 0;
|
|
font-size: .9rem;
|
|
font-weight: 650;
|
|
color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* FERTIG IST EINE EIGENE AUSSAGE, nicht nur ein voller Balken. Der
|
|
Satz wechselt, die Farbe verstärkt ihn nur -- Farbe nie allein. */
|
|
.an-stand[data-fertig="ja"] .an-stand__satz { color: var(--k-gut, #5fc99a); }
|
|
.an-stand[data-fertig="ja"] .an-stand__balken::-webkit-progress-value {
|
|
background: var(--k-gut, #5fc99a);
|
|
}
|
|
.an-stand[data-fertig="ja"] .an-stand__balken::-moz-progress-bar {
|
|
background: var(--k-gut, #5fc99a);
|
|
}
|
|
|
|
/* =====================================================================
|
|
BLÖCKE
|
|
=====================================================================
|
|
|
|
JEDER TEXTBLOCK BEKOMMT EINE FLÄCHE (06.10.2026, nach dem ersten Bild).
|
|
|
|
Der erste Entwurf setzte „In 60 Sekunden", „Erste Schritte",
|
|
„Nicht deins" und „Dein Rhythmus" ohne Hintergrund auf die Seite.
|
|
Auf dem Bild bei 412 px lief der Satz „Fast alles andere füllt deine
|
|
Betreuung für dich" quer über das helle Wasserzeichen des
|
|
Hintergrundbildes und war dort kaum zu lesen.
|
|
|
|
Das ist kein Schönheitsfehler, sondern der Grund, warum im Haus
|
|
JEDER Textträger `--flaeche` hat (`rgba(9,13,22,.89)`, also fast
|
|
deckend): Die Startseite hat ein Foto im Hintergrund, und wie hell
|
|
es an einer bestimmten Stelle ist, weiß niemand vorher. Ein
|
|
Kontrast, der vom Bildausschnitt abhängt, ist kein Kontrast.
|
|
|
|
Die Fase (`--fase`) statt eines Radius: dieselbe Form wie `.mz-kopf`
|
|
und die übrigen großen Träger im Haus. */
|
|
.an-block {
|
|
margin-top: var(--an-luft);
|
|
padding: 16px 18px;
|
|
border: 1px solid var(--rand);
|
|
background: var(--flaeche);
|
|
clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
|
|
}
|
|
|
|
.an-block__titel {
|
|
margin: 0 0 10px;
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
letter-spacing: .01em;
|
|
color: var(--text);
|
|
}
|
|
|
|
.an-leit {
|
|
margin: 0 0 12px;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--text);
|
|
max-width: 68ch;
|
|
}
|
|
|
|
.an-saetze { margin: 0; padding: 0; list-style: none; }
|
|
|
|
.an-saetze__zeile {
|
|
position: relative;
|
|
padding-left: 20px;
|
|
margin-bottom: 7px;
|
|
font-size: .95rem;
|
|
line-height: 1.55;
|
|
color: var(--text-leise);
|
|
max-width: 68ch;
|
|
}
|
|
/* Ein Punkt statt eines Aufzählungszeichens: Die drei Sätze sind keine
|
|
Liste von Dingen, sondern drei Aussagen. Der Punkt gliedert, ohne zu
|
|
zählen. */
|
|
.an-saetze__zeile::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 4px; top: .62em;
|
|
width: 6px; height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--akzent);
|
|
opacity: .75;
|
|
}
|
|
|
|
/* =====================================================================
|
|
ERSTE SCHRITTE
|
|
===================================================================== */
|
|
.an-schritte {
|
|
margin: 0;
|
|
padding: 0 0 0 1.35em;
|
|
display: grid;
|
|
gap: 9px;
|
|
}
|
|
|
|
/* DIE ZEILE IST ZWEIGETEILT: links der Haken, rechts der Weg. Zwei
|
|
Dinge, zwei Flächen -- wer auf den Namen tippt, will zur Kachel und
|
|
nicht abhaken. */
|
|
.an-schritt {
|
|
max-width: 68ch;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DER HAKEN
|
|
|
|
Das echte Kästchen bleibt da (Tastatur, Vorleseprogramme, der
|
|
Zustand), wird aber unsichtbar über das gezeichnete gelegt: So
|
|
trifft ein Daumen 44 Pixel, und die Zeichnung lässt sich färben.
|
|
`opacity: 0` statt `display: none` -- ein ausgeblendetes Feld ist
|
|
für die Tastatur nicht erreichbar. */
|
|
.an-haken {
|
|
flex: none;
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 44px; height: 44px;
|
|
cursor: pointer;
|
|
}
|
|
.an-haken__feld {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%; height: 100%;
|
|
margin: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
.an-haken__zeichen {
|
|
width: 22px; height: 22px;
|
|
border: 2px solid var(--rand-hell, var(--rand));
|
|
border-radius: 6px;
|
|
background: color-mix(in srgb, var(--text-still) 8%, transparent);
|
|
transition: background var(--tempo, .18s), border-color var(--tempo, .18s);
|
|
position: relative;
|
|
}
|
|
/* Der Haken selbst: zwei Striche, gedreht. Kein Zeichen aus einer
|
|
Schrift -- das sieht auf jedem Gerät anders aus und fehlt manchmal. */
|
|
.an-haken__zeichen::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 6px; top: 2px;
|
|
width: 6px; height: 11px;
|
|
/* #0a121e fest und nicht ueber eine Variable: `--grund` gibt es im
|
|
Haus nicht (nachgesehen), und eine Variable, die nirgends gesetzt
|
|
wird, liest sich wie eine Zusage, die es nicht gibt. Es ist der
|
|
dunkle Grund, gegen den alle Toene gemessen werden. */
|
|
border-right: 2.5px solid #0a121e;
|
|
border-bottom: 2.5px solid #0a121e;
|
|
transform: rotate(42deg) scale(.4);
|
|
opacity: 0;
|
|
transition: opacity var(--tempo, .18s), transform var(--tempo, .18s);
|
|
}
|
|
.an-haken__feld:checked + .an-haken__zeichen {
|
|
background: var(--k-gut, #5fc99a);
|
|
border-color: var(--k-gut, #5fc99a);
|
|
}
|
|
.an-haken__feld:checked + .an-haken__zeichen::after {
|
|
opacity: 1;
|
|
transform: rotate(42deg) scale(1);
|
|
}
|
|
.an-haken__feld:focus-visible + .an-haken__zeichen {
|
|
outline: 2px solid var(--akzent);
|
|
outline-offset: 3px;
|
|
}
|
|
.an-haken__feld:disabled + .an-haken__zeichen { opacity: .5; }
|
|
|
|
/* ERLEDIGT WIRD LEISER, NICHT DURCHGESTRICHEN. Durchgestrichener Text
|
|
ist schlecht lesbar, und man will nachher noch nachsehen können, was
|
|
man schon gemacht hat. */
|
|
.an-schritt[data-erledigt="ja"] .an-schritt__rumpf { opacity: .62; }
|
|
|
|
/* DIE GANZE ZEILE IST DAS ZIEL, nicht nur das Stichwort.
|
|
Gemessen am 06.10.2026: Der Verweis war 20 px hoch -- die halbe
|
|
Hausgröße für etwas, das ein Daumen treffen soll. 44 px ist die
|
|
Zahl, die im Haus für Berührziele gilt, und sie steht hier als
|
|
Mindesthöhe und nicht als feste: Zwei Zeilen Text dürfen wachsen. */
|
|
.an-schritt__rumpf {
|
|
display: block;
|
|
min-height: 44px;
|
|
padding: 8px 10px;
|
|
margin-left: -10px;
|
|
border-radius: var(--radius-klein, 12px);
|
|
font-size: .95rem;
|
|
line-height: 1.55;
|
|
color: var(--text-leise);
|
|
text-decoration: none;
|
|
transition: background var(--tempo, .18s);
|
|
}
|
|
a.an-schritt__rumpf:hover {
|
|
background: color-mix(in srgb, var(--akzent) 10%, transparent);
|
|
}
|
|
a.an-schritt__rumpf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
.an-schritt__name {
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
margin-right: .4em;
|
|
}
|
|
a.an-schritt__rumpf .an-schritt__name { color: var(--akzent); }
|
|
a.an-schritt__rumpf:hover .an-schritt__name { text-decoration: underline; }
|
|
|
|
/* =====================================================================
|
|
DER STUFEN-FILTER
|
|
===================================================================== */
|
|
.an-filter {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: var(--an-luft);
|
|
}
|
|
|
|
.an-filter__knopf {
|
|
font: inherit;
|
|
font-size: .85rem;
|
|
font-weight: 650;
|
|
/* 40 Pixel hoch: Die Hausgröße für etwas, das ein Daumen trifft. */
|
|
min-height: 40px;
|
|
padding: 0 15px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--rand);
|
|
/* NICHT durchsichtig: Der Filter steht zwischen zwei Flaechen und
|
|
damit direkt auf dem Hintergrundbild. Ein durchsichtiger Knopf ist
|
|
genau so gut lesbar, wie der Bildausschnitt es zulaesst -- und das
|
|
weiss niemand vorher. */
|
|
background: var(--flaeche);
|
|
color: var(--text-still);
|
|
cursor: pointer;
|
|
transition: background var(--tempo, .18s), color var(--tempo, .18s),
|
|
border-color var(--tempo, .18s);
|
|
}
|
|
.an-filter__knopf:hover { border-color: var(--rand-hell, var(--rand)); color: var(--text); }
|
|
.an-filter__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
/* DER GEWÄHLTE ZUSTAND HÄNGT AN `aria-pressed`, NICHT AN EINER KLASSE.
|
|
Damit ist er für Vorleseprogramme und fürs Auge dieselbe Tatsache --
|
|
eine Klasse daneben wäre die, die beim nächsten Umbau vergessen
|
|
wird, und dann sagt der Knopf etwas anderes, als er aussieht. */
|
|
.an-filter__knopf[aria-pressed="true"] {
|
|
/* Auf die FLAECHE gemischt und nicht auf `transparent`: Sonst waere
|
|
ausgerechnet der gewaehlte Knopf der durchsichtigste von allen. */
|
|
background: color-mix(in srgb, var(--akzent) 22%, var(--flaeche));
|
|
border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* =====================================================================
|
|
EIN STUFENBLOCK
|
|
===================================================================== */
|
|
/* ZWEI DINGE HIESSEN „an-stufe", UND DAS WAR EINE FALLE (06.10.2026).
|
|
|
|
`.an-stufe` war der Kasten einer EINORDNUNG („Das brauchst du
|
|
sofort") UND der Kasten „Deine Stufe" mit Neu, Dabei, Stamm. Der
|
|
Bauplan warnt in Kapitel 14 ausdruecklich davor, die beiden zu
|
|
verwechseln -- im Quelltext taten sie es.
|
|
|
|
Aufgefallen beim Messen des Filters: Er musste seine Suche von Hand
|
|
auf `#stufen` eingrenzen, sonst haette „Muss" die Karte „Deine
|
|
Stufe" mit weggeblendet. Eine Regel wie `.an-stufe { display:none }`
|
|
haette denselben Schaden angerichtet, und man haette sie nicht
|
|
kommen sehen.
|
|
|
|
Die Mitglieder-Stufe heisst jetzt `an-rang`. In der Oberflaeche
|
|
aendert sich kein Wort -- dort steht weiterhin „Deine Stufe". */
|
|
.an-rang { margin-top: var(--an-luft); }
|
|
.an-stufe { margin-top: var(--an-luft); }
|
|
|
|
.an-stufe__falte {
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein, 12px);
|
|
background: var(--flaeche);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.an-stufe__griff {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 14px 16px;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
user-select: none;
|
|
}
|
|
.an-stufe__griff::-webkit-details-marker { display: none; }
|
|
.an-stufe__griff:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
|
|
|
/* Das Dreieck selbst gebaut, weil das eingebaute je nach Browser
|
|
woanders sitzt und sich nicht färben lässt. */
|
|
.an-stufe__griff::before {
|
|
content: "";
|
|
flex: none;
|
|
width: 8px; height: 8px;
|
|
border-right: 2px solid var(--text-still);
|
|
border-bottom: 2px solid var(--text-still);
|
|
transform: rotate(-45deg);
|
|
transition: transform var(--tempo, .18s);
|
|
}
|
|
.an-stufe__falte[open] > .an-stufe__griff::before { transform: rotate(45deg); }
|
|
|
|
.an-stufe__titel {
|
|
flex: 1 1 auto;
|
|
font-size: 1.02rem;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
|
|
.an-stufe__zahl {
|
|
flex: none;
|
|
min-width: 26px;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--text-still) 16%, transparent);
|
|
color: var(--text-still);
|
|
font-size: .8rem;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.an-stufe__unter {
|
|
margin: 0;
|
|
padding: 0 16px 4px;
|
|
font-size: .85rem;
|
|
color: var(--text-still);
|
|
}
|
|
|
|
/* DAS GITTER MISST, STATT ZU RECHNEN. `auto-fill` mit einer
|
|
Mindestbreite bricht genau dann um, wenn der Platz nicht reicht --
|
|
auf einem 320er Telefon einspaltig, auf einem breiten Bildschirm
|
|
dreispaltig, ohne eine einzige Schwelle in Pixeln. */
|
|
.an-stufe__gitter {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
|
|
gap: 12px;
|
|
padding: 12px 16px 16px;
|
|
}
|
|
|
|
/* =====================================================================
|
|
EINE KARTE
|
|
===================================================================== */
|
|
.an-karte {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 14px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein, 12px);
|
|
background: var(--flaeche);
|
|
/* Der Ton der echten Kachel, als schmaler Streifen links. Nicht als
|
|
Fläche: Achtzehn volle Farbflächen untereinander sind ein
|
|
Jahrmarkt, und augenschonend ist etwas anderes. */
|
|
border-left: 3px solid var(--ton, var(--rand));
|
|
}
|
|
|
|
.an-karte__kopf { display: flex; align-items: center; gap: 10px; }
|
|
|
|
.an-karte__zeichen {
|
|
flex: none;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 38px; height: 38px;
|
|
border-radius: 10px;
|
|
background: color-mix(in srgb, var(--ton, var(--akzent)) 14%, transparent);
|
|
}
|
|
.an-karte__svg { width: 24px; height: 24px; }
|
|
|
|
.an-karte__namen {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 4px 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.an-karte__name {
|
|
margin: 0;
|
|
font-size: .98rem;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
|
|
.an-karte__stufe {
|
|
font-size: .78rem;
|
|
font-weight: 700;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
color: var(--ton, var(--text-still));
|
|
}
|
|
|
|
.an-karte__zeilen { margin: 0; display: grid; gap: 2px; }
|
|
|
|
.an-karte__schild {
|
|
font-size: .78rem;
|
|
font-weight: 700;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.an-karte__text {
|
|
margin: 0 0 6px;
|
|
font-size: .9rem;
|
|
line-height: 1.5;
|
|
color: var(--text-leise);
|
|
}
|
|
.an-karte__text:last-child { margin-bottom: 0; }
|
|
|
|
.an-karte__weg {
|
|
align-self: flex-start;
|
|
margin-top: auto;
|
|
/* 40 Pixel: dieselbe Daumenhöhe wie der Filter. */
|
|
min-height: 40px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
|
|
color: var(--ton, var(--akzent));
|
|
font-size: .85rem;
|
|
font-weight: 650;
|
|
text-decoration: none;
|
|
transition: background var(--tempo, .18s);
|
|
}
|
|
.an-karte__weg:hover { background: color-mix(in srgb, var(--ton, var(--akzent)) 14%, transparent); }
|
|
.an-karte__weg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
/* =====================================================================
|
|
NICHT DEINS
|
|
===================================================================== */
|
|
.an-nicht { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
|
|
|
|
.an-nicht__zeile {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px 8px;
|
|
padding: 10px 14px;
|
|
border: 1px dashed var(--rand);
|
|
border-radius: var(--radius-klein, 12px);
|
|
font-size: .92rem;
|
|
line-height: 1.5;
|
|
}
|
|
/* Gestrichelt und nicht durchgestrichen: Durchgestrichener Text ist
|
|
schlecht lesbar, und „nicht deins" heißt nicht „erledigt". */
|
|
.an-nicht__was { font-weight: 650; color: var(--text-still); }
|
|
.an-nicht__wer { color: var(--text-leise); }
|
|
|
|
/* =====================================================================
|
|
RHYTHMUS
|
|
===================================================================== */
|
|
.an-takt {
|
|
margin: 0;
|
|
display: grid;
|
|
/* Erste Spalte so breit wie ihr längster Eintrag, nicht breiter --
|
|
„Vor und nach dem LIVE" soll nicht umbrechen, und „Täglich" soll
|
|
keine halbe Zeile Leerraum erzeugen. */
|
|
grid-template-columns: max-content 1fr;
|
|
gap: 6px 16px;
|
|
align-items: baseline;
|
|
}
|
|
.an-takt__wann {
|
|
font-size: .85rem;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
.an-takt__was {
|
|
margin: 0;
|
|
font-size: .92rem;
|
|
line-height: 1.5;
|
|
color: var(--text-leise);
|
|
}
|
|
/* Auf schmalen Geräten untereinander: Zwei Spalten mit „Vor und nach
|
|
dem LIVE" links lassen rechts vier Wörter übrig. Die Regel misst
|
|
nicht, deshalb hier doch eine Schwelle -- und sie steht direkt an
|
|
dem, was sie betrifft. */
|
|
@media (max-width: 460px) {
|
|
.an-takt { grid-template-columns: 1fr; gap: 2px; }
|
|
.an-takt__was { margin-bottom: 8px; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
FRAGEN
|
|
===================================================================== */
|
|
.an-fragen { display: grid; gap: 8px; }
|
|
|
|
.an-frage {
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein, 12px);
|
|
background: var(--flaeche);
|
|
overflow: hidden;
|
|
}
|
|
.an-frage__frage {
|
|
padding: 12px 14px;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
font-size: .94rem;
|
|
font-weight: 650;
|
|
color: var(--text);
|
|
}
|
|
.an-frage__frage::-webkit-details-marker { display: none; }
|
|
.an-frage__frage:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
|
.an-frage__antwort {
|
|
margin: 0;
|
|
padding: 0 14px 13px;
|
|
font-size: .92rem;
|
|
line-height: 1.6;
|
|
color: var(--text-leise);
|
|
max-width: 68ch;
|
|
}
|
|
|
|
/* =====================================================================
|
|
HILFE
|
|
===================================================================== */
|
|
.an-hilfe {
|
|
margin: var(--an-luft) 0 0;
|
|
/* Dieselbe Flaeche wie die Bloecke darueber, aus demselben Grund --
|
|
nur leiser: kein Titel, kleinere Schrift. Ein Schlusssatz soll
|
|
lesbar sein, ohne sich wie ein weiterer Abschnitt aufzufuehren. */
|
|
padding: 14px 18px;
|
|
border: 1px solid var(--rand);
|
|
background: var(--flaeche);
|
|
clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
|
|
font-size: .9rem;
|
|
line-height: 1.6;
|
|
color: var(--text-still);
|
|
}
|
|
.an-hilfe a { color: var(--akzent); }
|
|
|
|
/* =====================================================================
|
|
DIE PFLEGE (Etappe 4)
|
|
=====================================================================
|
|
|
|
Sie ist LEISE, solange sie aus ist. Wer die Seite liest, soll die
|
|
Einweisung sehen und nicht die Werkzeuge -- deshalb trägt der
|
|
Schalter keine Farbe, bis er gedrückt ist, und die Stift-Knöpfe
|
|
gibt es erst dann überhaupt im Dokument (anleitung.js baut sie nur
|
|
im Bearbeiten-Zustand).
|
|
===================================================================== */
|
|
.an-pflege {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px 12px;
|
|
margin-top: 16px;
|
|
padding: 10px 14px;
|
|
border: 1px dashed var(--rand);
|
|
background: var(--flaeche);
|
|
clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
|
|
}
|
|
|
|
.an-pflege__knopf {
|
|
font: inherit;
|
|
font-size: .85rem;
|
|
font-weight: 650;
|
|
min-height: 40px;
|
|
padding: 0 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--rand);
|
|
background: transparent;
|
|
color: var(--text-still);
|
|
cursor: pointer;
|
|
transition: background var(--tempo, .18s), color var(--tempo, .18s);
|
|
}
|
|
.an-pflege__knopf:hover { color: var(--text); }
|
|
.an-pflege__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
.an-pflege__knopf[aria-pressed="true"] {
|
|
background: color-mix(in srgb, var(--akzent) 22%, var(--flaeche));
|
|
border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
|
|
color: var(--text);
|
|
}
|
|
|
|
.an-pflege__satz {
|
|
font-size: .85rem;
|
|
color: var(--text-still);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DER STIFT
|
|
|
|
44 Pixel, wie jedes Berührziel im Haus -- auch wenn das Zeichen
|
|
darin klein ist. Ein Knopf, den man dreimal treffen muss, ist auf
|
|
einem Telefon kein Knopf. */
|
|
.an-aendern {
|
|
flex: none;
|
|
margin-left: auto;
|
|
width: 44px; height: 44px;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--rand);
|
|
background: var(--flaeche);
|
|
color: var(--text-still);
|
|
cursor: pointer;
|
|
transition: color var(--tempo, .18s), border-color var(--tempo, .18s);
|
|
}
|
|
.an-aendern:hover { color: var(--akzent); border-color: var(--akzent); }
|
|
.an-aendern:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
/* In einer Frage sitzt er unten statt rechts: Die Zusammenfassung ist
|
|
der Schalter zum Aufklappen, und ein Knopf darin wäre ein Knopf im
|
|
Knopf. */
|
|
.an-frage__aendern { margin: 0 14px 12px; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DIE MARKE „NEU"
|
|
|
|
Ein WORT, kein Punkt. Ein farbiger Punkt ohne Wort ist eine Frage
|
|
und keine Auskunft -- und für jemanden, der Farben schlecht
|
|
unterscheidet, ist er gar nichts. */
|
|
.an-karte__neu {
|
|
font-size: .78rem;
|
|
font-weight: 700;
|
|
letter-spacing: .04em;
|
|
text-transform: uppercase;
|
|
padding: 1px 7px;
|
|
border-radius: 999px;
|
|
color: #0a121e;
|
|
background: var(--k-gut, #5fc99a);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
FEHLENDE EINTRÄGE */
|
|
.an-fehlend { border-style: dashed; }
|
|
.an-fehlend__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
|
|
.an-fehlend__zeile {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px 12px;
|
|
}
|
|
.an-fehlend__name { font-weight: 650; color: var(--text); font-size: .95rem; }
|
|
.an-fehlend__knopf {
|
|
font: inherit;
|
|
font-size: .85rem;
|
|
font-weight: 650;
|
|
min-height: 40px;
|
|
padding: 0 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
|
|
background: transparent;
|
|
color: var(--akzent);
|
|
cursor: pointer;
|
|
}
|
|
.an-fehlend__knopf:hover { background: color-mix(in srgb, var(--akzent) 12%, transparent); }
|
|
.an-fehlend__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
.an-fehlend__knopf:disabled { opacity: .5; cursor: default; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DAS FENSTER */
|
|
.an-form { display: grid; gap: 14px; padding: 20px; }
|
|
|
|
.an-feld { display: grid; gap: 5px; }
|
|
.an-feld__schild {
|
|
font-size: .8rem;
|
|
font-weight: 700;
|
|
letter-spacing: .04em;
|
|
text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.an-feld input,
|
|
.an-feld textarea,
|
|
.an-feld select {
|
|
font: inherit;
|
|
font-size: .95rem;
|
|
/* 44 Pixel: dieselbe Daumenhöhe wie überall. Bei `textarea` wirkt
|
|
sie als Mindesthöhe, der Text darf wachsen. */
|
|
min-height: 44px;
|
|
padding: 9px 12px;
|
|
border-radius: var(--radius-klein, 12px);
|
|
border: 1px solid var(--rand);
|
|
background: color-mix(in srgb, var(--text-still) 8%, transparent);
|
|
color: var(--text);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.an-feld textarea { resize: vertical; line-height: 1.5; }
|
|
.an-feld input:focus-visible,
|
|
.an-feld textarea:focus-visible,
|
|
.an-feld select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
|
|
|
|
.an-form__fehler {
|
|
margin: 0;
|
|
min-height: 1.2em;
|
|
font-size: .9rem;
|
|
color: var(--k-warn, #f0868f);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
WER IST WIE WEIT */
|
|
.an-wer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 4px 12px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--rand);
|
|
font-size: .92rem;
|
|
}
|
|
.an-wer:last-child { border-bottom: none; }
|
|
.an-wer__name { font-weight: 650; color: var(--text); min-width: 7em; }
|
|
.an-wer__rolle { color: var(--text-still); font-size: .85rem; }
|
|
.an-wer__stand { margin-left: auto; color: var(--text-leise); font-variant-numeric: tabular-nums; }
|
|
.an-wer__wann { color: var(--text-still); font-size: .85rem; font-variant-numeric: tabular-nums; }
|
|
/* Fertig ist eine Aussage, kein Haken: Das Wort steht in `__stand`,
|
|
die Farbe verstärkt es nur. */
|
|
.an-wer[data-fertig="ja"] .an-wer__stand { color: var(--k-gut, #5fc99a); font-weight: 650; }
|
|
|
|
/* =====================================================================
|
|
DER RUNDGANG (Etappe 6)
|
|
=====================================================================
|
|
|
|
KEIN LOCH IN EINER ABDECKUNG. Ein ausgeschnittenes Fenster müsste
|
|
bei jedem Scrollen neu gerechnet werden und sitzt beim ersten
|
|
Bildaufbau garantiert falsch. Stattdessen: Die ganze Seite wird
|
|
leiser (`body[data-rundgang]`), und das Ziel bleibt hell und
|
|
bekommt einen Rahmen. Dasselbe Ergebnis, ohne eine einzige
|
|
gerechnete Koordinate.
|
|
|
|
Fällt dieses Skript mittendrin aus, ist die Seite trotzdem heil:
|
|
Das Merkmal hängt am `body` und ist beim nächsten Laden weg. */
|
|
body[data-rundgang="ja"] main > *,
|
|
body[data-rundgang="ja"] .kopfleiste {
|
|
opacity: .34;
|
|
filter: saturate(.5);
|
|
transition: opacity var(--tempo, .18s);
|
|
}
|
|
body[data-rundgang="ja"] [data-rundgang-ziel="ja"] {
|
|
opacity: 1;
|
|
filter: none;
|
|
position: relative;
|
|
z-index: 2;
|
|
outline: 2px solid var(--akzent);
|
|
outline-offset: 6px;
|
|
border-radius: 4px;
|
|
}
|
|
/* Im letzten Schritt leuchten nur die Muss-Kacheln. Die Gruppe selbst
|
|
ist dann das Ziel, die einzelnen Kacheln darin werden gedämpft --
|
|
außer diesen. */
|
|
body[data-rundgang="ja"] [data-rundgang-ziel="ja"] .kachel { opacity: .3; }
|
|
body[data-rundgang="ja"] [data-rundgang-ziel="ja"] .kachel[data-rundgang-muss="ja"] {
|
|
opacity: 1;
|
|
outline: 2px solid var(--akzent);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.rg {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: max(16px, env(safe-area-inset-bottom));
|
|
transform: translateX(-50%);
|
|
z-index: 60;
|
|
width: min(460px, calc(100vw - 24px));
|
|
}
|
|
|
|
.rg__kasten {
|
|
padding: 16px 18px;
|
|
border: 1px solid color-mix(in srgb, var(--akzent) 45%, var(--rand));
|
|
background: var(--flaeche);
|
|
border-radius: var(--radius-klein, 12px);
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
|
|
}
|
|
|
|
.rg__zaehler {
|
|
margin: 0 0 4px;
|
|
font-size: .78rem;
|
|
font-weight: 700;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
color: var(--akzent);
|
|
}
|
|
.rg__titel { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; color: var(--text); }
|
|
.rg__text { margin: 0 0 14px; font-size: .95rem; line-height: 1.55; color: var(--text-leise); }
|
|
|
|
.rg__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
|
|
.rg__still {
|
|
font: inherit;
|
|
font-size: .9rem;
|
|
min-height: 44px;
|
|
padding: 0 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--rand);
|
|
background: transparent;
|
|
color: var(--text-still);
|
|
cursor: pointer;
|
|
}
|
|
.rg__still:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
.rg__weiter { min-height: 44px; }
|
|
|
|
.rg-gruss__rumpf { padding: 22px; display: grid; gap: 12px; }
|
|
.rg-gruss__text {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--text-leise);
|
|
max-width: 44ch;
|
|
}
|
|
|
|
/* =====================================================================
|
|
WENIGER BEWEGUNG, WENN JEMAND DAS SO EINGESTELLT HAT
|
|
===================================================================== */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.an-filter__knopf,
|
|
.an-schritt__rumpf,
|
|
.an-stufe__griff::before,
|
|
.an-haken__zeichen,
|
|
.an-haken__zeichen::after,
|
|
.an-pflege__knopf,
|
|
.an-aendern,
|
|
body[data-rundgang="ja"] main > *,
|
|
body[data-rundgang="ja"] .kopfleiste,
|
|
.an-stand__balken::-webkit-progress-value,
|
|
.an-karte__weg { transition: none; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
DREI DINGE VORWEG (06.10.2026, Bauplan Kapitel 04)
|
|
=====================================================================
|
|
|
|
Nur die Community sieht diesen Abschnitt. Er steht ganz oben und
|
|
erklärt nichts — er sagt, woran sich alle halten. Deshalb KEIN
|
|
gestrichelter Rahmen wie bei „Nicht deins" (das ist eine Absage)
|
|
und keine Warnfarbe (es ist kein Alarm): eine ruhige Kante in der
|
|
Hausfarbe, mehr braucht es nicht.
|
|
===================================================================== */
|
|
.an-vorweg__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
|
|
|
|
.an-vorweg__zeile {
|
|
display: flex; flex-wrap: wrap; gap: 2px 8px;
|
|
padding: 12px 15px;
|
|
border: 1px solid var(--rand);
|
|
border-left: 3px solid color-mix(in srgb, var(--akzent) 55%, transparent);
|
|
border-radius: var(--radius-klein, 12px);
|
|
background: rgba(255, 255, 255, .03);
|
|
line-height: 1.55;
|
|
}
|
|
/* `--text`, nicht `--text-leise`: Diese drei Sätze MÜSSEN gelesen
|
|
werden. Was man wegen seiner Farbe überfliegt, hätte man sich
|
|
sparen können. */
|
|
.an-vorweg__was { font-weight: 650; color: var(--text); font-size: 1rem; }
|
|
.an-vorweg__text { color: var(--text-leise); font-size: .95rem; }
|
|
|
|
/* =====================================================================
|
|
DEINE STUFE (06.10.2026, Bauplan Kapitel 04)
|
|
=====================================================================
|
|
|
|
Beantwortet die Frage, die sich sonst an jeder zweiten Karte
|
|
stellt: „Warum geht das bei mir noch nicht?"
|
|
|
|
DIE EIGENE STUFE IST HERVORGEHOBEN, die anderen bleiben ruhig --
|
|
man soll auf einen Blick sehen, wo man steht, ohne zu lesen. Die
|
|
Hervorhebung läuft über `data-jetzt` und nicht über die Reihenfolge:
|
|
Wer die Reihen einmal anders sortiert, hätte sonst die falsche
|
|
markiert.
|
|
===================================================================== */
|
|
.an-rang__jetzt {
|
|
margin: 0 0 10px; font-weight: 650; color: var(--text); font-size: 1rem;
|
|
}
|
|
.an-rang__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
|
|
|
|
.an-rang__zeile {
|
|
display: grid;
|
|
/* Am Handy untereinander, ab 560 px Name und „ab wann" nebeneinander
|
|
-- eine Tabelle quer zu scrollen ist auf dem Telefon das
|
|
Schlimmste, was man dem Text antun kann. */
|
|
grid-template-columns: 1fr;
|
|
gap: 2px 12px;
|
|
padding: 11px 14px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein, 12px);
|
|
line-height: 1.5;
|
|
}
|
|
.an-rang__zeile[data-jetzt="ja"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 48%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 10%, transparent);
|
|
}
|
|
.an-rang__name { font-weight: 650; color: var(--text); }
|
|
.an-rang__zeile[data-jetzt="ja"] .an-rang__name { color: var(--akzent); }
|
|
.an-rang__ab { color: var(--text-still); font-size: .88rem; }
|
|
.an-rang__kann { color: var(--text-leise); font-size: .92rem; }
|
|
/* „frühestens ab 13.10.2026" — eine Zusage mit Datum, nicht „bald". */
|
|
.an-rang__wann {
|
|
color: var(--akzent); font-size: .88rem; font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
@media (min-width: 560px) {
|
|
.an-rang__zeile { grid-template-columns: auto 1fr; align-items: baseline; }
|
|
.an-rang__kann, .an-rang__wann { grid-column: 1 / -1; }
|
|
}
|
|
|
|
/* Die Karte, auf die „Neu für dich" gesprungen ist (06.10.2026).
|
|
Eine ruhige Umrandung für ein paar Sekunden — kein Blinken, kein
|
|
Leuchten: Sie beantwortet die Frage „welche war gemeint?" und
|
|
verschwindet dann wieder. */
|
|
.an-karte[data-gesucht="ja"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 58%, transparent);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent) 28%, transparent);
|
|
}
|
|
|
|
/* „ab Dabei" / „ab Stamm" an einer Karte (06.10.2026, Bauplan
|
|
Kapitel 04).
|
|
|
|
RUHIG UND NICHT ROT: Es ist keine Sperre und kein Fehler, sondern
|
|
eine Auskunft über die Zeit — „das kommt noch". Rot wäre hier die
|
|
falsche Sprache, und wer jeden Tag etwas Rotes sieht, sieht bald
|
|
gar nichts mehr. Deshalb dieselbe stille Form wie die Marke der
|
|
Einordnung daneben, nur in der leisen Textfarbe. */
|
|
.an-karte__abstufe {
|
|
flex: none;
|
|
padding: 2px 9px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, .03);
|
|
color: var(--text-leise);
|
|
font-size: .72rem; line-height: 1.5; white-space: nowrap;
|
|
}
|