DogFatherGitandClaude Opus 5
3f55e63703
pruef-handy-teamdogi (8 rot -> 17 gruen) und pruef-handy (schon gruen,
192 statt 186 Pruefungen).
ECHT WAR: Auf anleitung.html und willkommen.html waren fuenf Tippziele
40 statt 44 px hoch -- Filter, "Hingehen", "Nochmal ansehen", Pflege-
und Fehlend-Knoepfe. Daneben stand der Satz "40 Pixel hoch: Die
Hausgroesse fuer etwas, das ein Daumen trifft". Nachgezaehlt: 98 Stellen
im Haus nehmen 44, 25 nehmen 40. Ein Kommentar, der eine Zahl zur Regel
erklaert, macht sie nicht dazu.
FEHLALARM WAR: "LIEGT UEBEREINANDER -- a.an-karte__weg ⨯ a.an-karte__weg",
vier Rollen lang, auf beiden Seiten. Die Messung stimmte (93x18 px),
sichtbar war davon nichts.
Der Weg dorthin hat gedauert, und das lag an der Meldung: "93x18px"
sagt, DASS sich zwei Rechtecke schneiden, und schickt einen suchen.
Also sagt sie jetzt auch, WO beide liegen und aus welchen Vorfahren sie
kommen -- und damit war es in einem Lauf klar:
a.an-karte__weg in an-karte@4510+375 < an-stufe__gitter@4165+2256
< an-stufe__falte@4065+55
Der Abschnitt ist 55 px hoch und traegt `overflow: hidden`; sein Gitter
faengt 45 px UNTER dessen Unterkante an. Der Browser schneidet alles
davon weg.
`sichtbar()` fragte bis heute nur das Element selbst: Groesse,
visibility, display, Deckkraft. Alle vier koennen tadellos sein und das
Ding trotzdem unerreichbar. Jetzt kommt `imAusschnitt()` dazu:
Schneidet ein Vorfahr mit `overflow: hidden` es vollstaendig weg, zaehlt
es nicht -- fuer alle drei Messungen dieser Datei (zu klein, Ueberstand,
Ueberdeckung).
ZWEI VERSUCHE DAVOR WAREN FALSCH, beide an mir: Erst fragte ich nach
`details:not([open])` -- die Abschnitte tragen `[open]`, also griff es
nicht. Dann setzte ich die Rechnung in die falsche Filterkette (die fuer
zu kleine Ziele statt die fuer `bedienbar`). Geprueft wird jetzt die
WIRKUNG und nicht die Bauform: Rechtecke veralten nicht mit der
Bauweise.
Die eingebauten Gegenproben der Datei laufen weiter an (ein zu breites
Element und ein zu kleiner Knopf werden gemeldet) -- der Filter blendet
also nichts Echtes aus.
Co-Authored-By: Claude Opus 5 <[email protected]>
1055 lines
35 KiB
CSS
1055 lines
35 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: 44px;
|
|
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;
|
|
/* 44 Pixel, nicht 40 (berichtigt 07.10.2026).
|
|
|
|
Hier stand "40 Pixel hoch: Die Hausgroesse fuer etwas, das ein
|
|
Daumen trifft" -- die Hausgroesse ist aber 44, und zwar an 98
|
|
Stellen gegen 25. Gemessen hat es pruef-handy-teamdogi auf
|
|
anleitung.html und willkommen.html, fuer vier Rollen gleich.
|
|
Ein Kommentar, der eine Zahl zur Regel erklaert, macht sie nicht
|
|
dazu. */
|
|
min-height: 44px;
|
|
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;
|
|
/* 44 Pixel: dieselbe Daumenhoehe wie der Filter -- siehe dort. */
|
|
min-height: 44px;
|
|
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; }
|
|
|
|
/* „aktualisiert am 06.10.2026" — steht NUR in der Pflege unter dem
|
|
Knopf (anleitung.js setzt es hinter `pflegeAn`). Deshalb darf es
|
|
auch aussehen wie eine Randnotiz und nicht wie ein Satz der Karte:
|
|
klein, still, kein eigener Abstand nach oben über die Lücke des
|
|
Karten-`gap` hinaus. Wer die Karte liest, soll die drei Zeilen
|
|
darüber lesen; wer sie pflegt, findet die Angabe genau dort, wo er
|
|
ohnehin hinsieht — direkt beim Ändern-Knopf.
|
|
|
|
`--text-still` statt einer eigenen Farbe: Es ist dieselbe Stimme wie
|
|
die Schilder „Wozu" / „Merke", und sie ist gegen `--flaeche` bereits
|
|
geprüft. Eine neue, noch blassere Farbe hier wäre genau der
|
|
Kontrast-Rückschritt, den niemand bemerkt, bis er nicht mehr lesbar
|
|
ist. */
|
|
.an-karte__stand {
|
|
margin: 0;
|
|
font-size: .76rem;
|
|
line-height: 1.4;
|
|
color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* =====================================================================
|
|
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: 44px;
|
|
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: 44px;
|
|
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;
|
|
}
|