DogFatherGitandClaude Opus 5
1b2874299e
Neun Punkte aus Filipes Bildschirmfotos. Der wichtigste war kein
Aussehen, sondern ein Fehler:
UEBEREINANDERLIEGENDE TEXTE IN DER SICHERUNGSLISTE. Das Datum entstand
aus `name.split('-').slice(1).reverse().join('.')`. Bei
"woechentlich-2026-09-06.db" ging das gut; die Sicherungen vor einem
Umbau heissen aber "vorher-2026-09-02-160012438.db" -- mit Zeitstempel.
Heraus kam "160012438.02.09.2026", dreimal so lang wie die 96-px-Spalte,
und es lief ueber den Nachbartext. Ein Muster, das Bestandteile ZAEHLT
statt sie zu SUCHEN, bricht beim ersten Namen mit einem Teil mehr. Jetzt
ein Suchmuster nach vier-zwei-zwei Ziffern -- und in der CSS eine
Kuerzung, damit der NAECHSTE zu lange Text nur abgeschnitten wird. Eine
Spalte mit fester Breite ohne Kuerzung ist immer eine Zeitbombe.
DIE BEGRUESSUNGSKACHEL. Runde Digitaluhr rechts: zwei Ringe um dieselbe
Mitte -- innen die Sekunde, aussen der Stand der Stunde. Kein
setInterval(1000): Ein fester Takt laeuft mit der Zeit aus dem Tritt und
ueberspringt Sekunden; gewartet wird bis zur naechsten VOLLEN Sekunde.
Die Glocke ist aus der Kopfleiste hierhergezogen -- mit Rueckfall, denn
zwoelf andere Seiten haben diesen Platz nicht. Nebenbei ist die Leiste
damit um ein Element leichter; sie ist am 06.09. schon einmal an einem
sechsten zerbrochen.
TEILEN-KNOPF in der Leiste, nur fuer Scout, Manager und DogFather.
Geteilt wird der EINGANG, nicht die aktuelle Seite: Ein Link auf
bereich.html?b=schutz schickt jemanden auf eine Seite, die er nicht
sehen darf. Wo es navigator.share gibt, wird es benutzt; sonst
Zwischenablage; wo beides fehlt, erscheint der Knopf gar nicht -- ein
dritter Ausgang statt einer Schaltflaeche, die nichts tut.
WEITER: Kachelreihenfolge Steckbrief -> Profile -> Zahlen. Die
Tagesliste laesst sich zuklappen und zeigt dann SIEBEN Tage (die Woche,
nicht die vier von ueberall sonst). Dialoge, Automationen-Karten,
Sicherungsblock, KI-Kasten und Call-Karten bekommen dasselbe Material
wie die Kacheln -- Leuchtschiene, Materialstaerke, Glanz.
Profilbilder brauchten nichts: Der Weg gibt es fuer jede Rolle bereits
(steckbrief.html fuer die Betreuung, derselbe Block auf profil.html fuer
Creator, Hochladen schreibt immer auf req.person.id).
ZWEI EIGENE FEHLER, beide gemessen statt vermutet:
- Die Koernung lag in vier neuen Bloecken auf DERSELBEN Ebene wie die
Spiegelung und erbte deren 50 % Deckkraft. Gemessen rgb(56,44,58)
statt rgb(20,26,38) -- die Karten sahen durchsichtig aus, obwohl sie
zu 95 % decken. Derselbe Fehler wie heute Nachmittag an der
Anmeldekarte. Koernung gehoert auf eine eigene Ebene mit overlay.
- `.glocke-platz:empty { display: none }` liess die Kachel wachsen,
sobald die Glocke geladen war. Layout-Sprung von start.html: 0,708.
Platz wird jetzt reserviert -> 0,473.
pruef-struktur: `-breit` gehoert in die Stufen-Ausnahme. Schaerfe kostet
Bytes (hohe Frequenzen lassen sich nicht wegrechnen), die mittlere Stufe
wuchs auf 230-300 KB. Die Regel bleibt inhaltlich: gross nur, WENN eine
kleinere Stufe daneben steht. Die Verkettung der beiden replace() waere
ein stiller Fehler gewesen -- fuer uhd haette sie nach `-schmal` gesucht.
Gruen: kopf-messen (3), breiten (23), glocke (26), css-klassen (15),
struktur (32), buehne (38), start-ansicht (136), handy (59),
formulare (19), barrierefrei (18), lesbarkeit (14), tempo (8).
Co-Authored-By: Claude Opus 5 <[email protected]>
816 lines
32 KiB
CSS
816 lines
32 KiB
CSS
/* ===================================================================
|
||
Aufgabenbrett. Baut auf gate.css und start.css auf.
|
||
=================================================================== */
|
||
|
||
/* .inhalt--breit, .zurueck, .kopf-zeile und .leise sind am 31.08.2026 nach
|
||
start.css gewandert -- sie werden auf jeder Seite gebraucht, aber nicht
|
||
jede Seite laedt diese Datei hier. */
|
||
|
||
/* ---------- Formular -------------------------------------------------- */
|
||
|
||
.neu {
|
||
margin: 0 0 28px;
|
||
padding: 20px;
|
||
background: var(--flaeche);
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius);
|
||
}
|
||
.neu__zeile { margin-bottom: 14px; }
|
||
/* Zwoelf Spalten statt auto-fit: Damit laesst sich sagen, WIE breit ein
|
||
Feld sein soll -- ein Titel braucht die ganze Zeile, eine Stufe ein
|
||
Drittel. auto-fit gab jedem Feld dieselbe Breite, egal was drin steht. */
|
||
.neu__raster {
|
||
display: grid; gap: 14px 16px; margin-bottom: 8px;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
}
|
||
/* Vorgabe: ein Drittel. Reicht fuer Auswahlfelder und Datumsangaben. */
|
||
/* JEDES direkte Kind, nicht nur die mit der Klasse .feld.
|
||
|
||
Genau daran lag die "verzogene" Formularzeile im Kalender: Dort
|
||
stehen schlichte <div> ohne Klasse. Sie fielen durch diese Regel
|
||
hindurch, bekamen von den zwoelf Spalten je EINE und wurden nur so
|
||
breit, wie ihr Inhalt sie zwang. Ergebnis: "Art" schmal, "Beginn"
|
||
breit, "Dauer (Minuten)" zweizeilig umgebrochen, alles auf
|
||
verschiedenen Hoehen. Es sah nach einem Fehler aus und war einer.
|
||
|
||
:not() haelt die Sonderbreiten am Leben. */
|
||
.neu__raster > *:not(.feld--breit):not(.feld--halb) { grid-column: span 4; min-width: 0; }
|
||
|
||
/* Alle Felder gleich hoch und unten buendig -- unabhaengig davon, ob
|
||
die Beschriftung darueber ein- oder zweizeilig ist. Ohne das sitzt
|
||
ein Feld mit langer Beschriftung tiefer als seine Nachbarn. */
|
||
.neu__raster { align-items: stretch; }
|
||
/* Zwei Zeilen je Feld: Die Beschriftung oben DEHNT sich (1fr), das
|
||
Eingabefeld unten hat feste Hoehe. Dadurch sitzen alle Eingabefelder
|
||
auf exakt derselben Linie -- unabhaengig davon, ob die Beschriftung
|
||
darueber ein- oder zweizeilig ist.
|
||
|
||
Der Umweg ueber flex mit justify-content: flex-end reichte nicht: Ein
|
||
<select> und ein <input> derselben Hoehe standen damit trotzdem 3 px
|
||
versetzt, weil ihre Kaesten unterschiedlich sitzen. Drei Pixel klingen
|
||
nach nichts und sind genau das, was man als "verzogen" sieht. */
|
||
/* Die zweite Rasterzeile hat eine FESTE Hoehe, und das Feld fuellt sie
|
||
ganz aus. Mit "auto" bestimmte jedes Element die Zeilenhoehe selbst:
|
||
Ein <select> mass sich 3 px kleiner als ein <input> und sass dadurch
|
||
hoeher. Gemessen: Container beider Felder 652+71 identisch, Eingabe
|
||
aber 676..720 gegen 679..723. Drei Pixel -- genau das, was man als
|
||
"verzogen" sieht. */
|
||
.neu__raster > * { display: grid; grid-template-rows: 1fr 44px; }
|
||
.neu__raster > * > .feld-schild { align-self: end; margin-bottom: 6px; }
|
||
.neu input, .neu select { height: 44px; box-sizing: border-box; }
|
||
/* Die Zeile ganz ausfuellen -- sonst zentriert der Browser das Element
|
||
darin und der Versatz waere wieder da. */
|
||
.neu__raster > * > input,
|
||
.neu__raster > * > select,
|
||
.neu__raster > * > textarea { align-self: stretch; height: 100%; }
|
||
.neu__raster textarea { min-height: 44px; }
|
||
|
||
/* Diese Klasse stand in drei HTML-Dateien, war aber NIE definiert --
|
||
deshalb quetschte das Raster jedes Feld in dieselbe Breite und lange
|
||
Kategorienamen wurden abgeschnitten. */
|
||
.neu__raster > .feld--breit { grid-column: 1 / -1; }
|
||
.neu__raster > .feld--halb { grid-column: span 6; }
|
||
|
||
@media (max-width: 860px) {
|
||
.neu__raster > *:not(.feld--breit) { grid-column: span 6; }
|
||
}
|
||
@media (max-width: 560px) {
|
||
/* Auf dem Handy untereinander -- zwei Felder auf 300 px sind zwei
|
||
Streifen, in die nichts hineinpasst. */
|
||
.neu__raster > * { grid-column: 1 / -1 !important; }
|
||
}
|
||
@media (max-width: 560px) {
|
||
.neu__raster > .feld, .neu__raster > .feld--halb { grid-column: 1 / -1; }
|
||
}
|
||
.neu__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
|
||
|
||
.feld-schild {
|
||
display: block; margin-bottom: 6px;
|
||
font-size: .76rem; font-weight: 600; letter-spacing: .06em;
|
||
text-transform: uppercase; color: var(--text-still);
|
||
}
|
||
|
||
/* Aussehen, Rahmen, Schrift und Fokusring stehen seit dem 01.09.2026
|
||
EINMAL in start.css (":where(.inhalt) :where(input, textarea, select)").
|
||
Die Kopie, die hier stand, war Wort fuer Wort dieselbe -- und genau so
|
||
entstehen zwei Feld-Optiken auf einer Seite, sobald eine der beiden
|
||
verbessert wird. Hier bleibt nur, was WIRKLICH nur hier gilt. */
|
||
.neu textarea { min-height: 62px; }
|
||
/* Die BREITE bleibt hier: Sie ist Layout dieser Seite, nicht Aussehen.
|
||
Ohne sie fallen leere Auswahlfelder auf 28 Pixel zusammen. */
|
||
.neu input, .neu select, .neu textarea { width: 100%; }
|
||
/* Aufhellen ist nicht mehr noetig: color-scheme: dark (gate.css) laesst den
|
||
Browser das Kalendersymbol schon hell zeichnen. Ein invert() wuerde es hier
|
||
wieder verdunkeln. */
|
||
.neu input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
|
||
|
||
/* ---------- Brett ----------------------------------------------------- */
|
||
|
||
.brett {
|
||
display: grid; gap: 14px;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
align-items: start;
|
||
}
|
||
|
||
/* Die vier Spalten bekommen dieselbe Behandlung wie die Kacheln auf der
|
||
Startseite: eine eigene Farbe je Status, ein Streifen oben in dieser
|
||
Farbe, ein sehr weicher Verlauf darunter. Vorher unterschied sie nur
|
||
ein 8 px grosser Punkt -- vier gleiche graue Kaesten nebeneinander.
|
||
|
||
Die Farbe folgt dem STATUS, nicht dem Rang: Offen blaugrau (noch
|
||
nichts passiert), In Arbeit blau (laeuft), Review gold (jemand muss
|
||
hinsehen), Erledigt gruen (fertig). */
|
||
.spalte {
|
||
--sfarbe: #6f89a8;
|
||
position: relative; overflow: hidden;
|
||
background:
|
||
linear-gradient(180deg, color-mix(in srgb, var(--sfarbe) 8%, transparent), transparent 42%),
|
||
var(--flaeche);
|
||
border: 1px solid color-mix(in srgb, var(--sfarbe) 20%, var(--rand));
|
||
border-radius: var(--radius);
|
||
padding: 16px 13px 18px;
|
||
min-height: 120px;
|
||
}
|
||
/* Der Streifen oben laeuft nach rechts aus -- eine durchgezogene Kante
|
||
wirkt wie eine Trennwand, eine auslaufende wie eine Markierung. */
|
||
.spalte::before {
|
||
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
|
||
background: linear-gradient(90deg, var(--sfarbe),
|
||
color-mix(in srgb, var(--sfarbe) 20%, transparent) 70%, transparent);
|
||
}
|
||
/* Was die Spalte bedeutet -- steht immer da, nicht nur wenn sie leer
|
||
ist. "Review" allein sagt einem Neuen nichts. */
|
||
.spalte__unter {
|
||
margin: 2px 0 12px 17px;
|
||
font-size: .76rem; color: var(--text-still);
|
||
}
|
||
|
||
.spalte__kopf {
|
||
display: flex; align-items: center; gap: 8px;
|
||
margin: 0 2px 12px;
|
||
font-size: .78rem; font-weight: 700;
|
||
letter-spacing: .08em; text-transform: uppercase;
|
||
color: var(--text-leise);
|
||
}
|
||
.spalte__punkt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
|
||
.spalte__zahl {
|
||
margin-left: auto; padding: 1px 8px;
|
||
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
||
font-size: .74rem; color: var(--text-still); letter-spacing: normal;
|
||
}
|
||
|
||
/* --ton mitgesetzt: Das Licht unter dem Zeiger nimmt seine Farbe von
|
||
dort. Ohne diese Zeile leuchtete die gruene Erledigt-Spalte orange
|
||
(der Farbton der SEITE), was aussah wie ein Fehler und einer war. */
|
||
.spalte[data-status="offen"] { --sfarbe: #6f89a8; --ton: #6f89a8; }
|
||
.spalte[data-status="arbeit"] { --sfarbe: #3fbdf5; --ton: #3fbdf5; }
|
||
.spalte[data-status="review"] { --sfarbe: #e0a33c; --ton: #e0a33c; }
|
||
.spalte[data-status="erledigt"] { --sfarbe: #4dab77; --ton: #4dab77; }
|
||
.spalte__punkt {
|
||
background: var(--sfarbe);
|
||
box-shadow: 0 0 9px color-mix(in srgb, var(--sfarbe) 70%, transparent);
|
||
}
|
||
.spalte .spalte__zahl { color: var(--sfarbe); }
|
||
|
||
.karte {
|
||
padding: 12px 13px;
|
||
margin-bottom: 9px;
|
||
background: rgba(9, 13, 22, .78);
|
||
border: 1px solid var(--rand);
|
||
border-left: 3px solid transparent;
|
||
border-radius: var(--radius-klein);
|
||
}
|
||
.karte[data-prio="hoch"] { border-left-color: #d8656e; }
|
||
.karte[data-prio="mittel"] { border-left-color: #4b6c8a; }
|
||
.karte[data-prio="niedrig"] { border-left-color: #3c4a5a; }
|
||
|
||
.karte__titel { font-weight: 600; font-size: .93rem; line-height: 1.35; }
|
||
.karte__text { margin: 6px 0 0; font-size: .84rem; color: var(--text-leise); }
|
||
|
||
.karte__zeile {
|
||
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
||
margin-top: 10px; font-size: .76rem; color: var(--text-still);
|
||
}
|
||
.karte__frist--faellig { color: var(--warn); font-weight: 600; }
|
||
|
||
.karte__schritte { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
|
||
|
||
/* Der leere Zustand einer Spalte. Vorher stand hier in allen vier
|
||
Spalten ein Gedankenstrich -- vier graue Striche nebeneinander sehen
|
||
aus, als sei die Seite kaputt. Jetzt sagt jeder Satz, was das
|
||
Leersein BEDEUTET (siehe SPALTEN in aufgaben.js), auf einer eigenen
|
||
ruhigen Flaeche statt im Nichts. */
|
||
.spalte__leer {
|
||
margin: 4px 0 0; padding: 16px 12px;
|
||
text-align: center;
|
||
font-size: .82rem; color: var(--text-still); line-height: 1.5;
|
||
border: 1px solid color-mix(in srgb, var(--sfarbe) 14%, transparent);
|
||
border-radius: var(--radius-klein);
|
||
background: color-mix(in srgb, var(--sfarbe) 5%, transparent);
|
||
}
|
||
|
||
@media (max-width: 1080px) { .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||
@media (max-width: 620px) { .brett { grid-template-columns: 1fr; } }
|
||
|
||
/* ---------- Bearbeiten-Dialog ------------------------------------------ */
|
||
|
||
/* =====================================================================
|
||
DIALOGE (07.09.2026 überarbeitet)
|
||
|
||
Filipe zu zwei davon: "lass alles in dieser kachel viel spezieller und
|
||
geiler aussehen" und "dass soll auch viel besser aussehen".
|
||
|
||
Er hatte recht, und der Grund war nicht Geschmack: Ein Dialog war
|
||
bisher ein grauer Kasten (`background: #0b1018`, ein Rand, fertig) --
|
||
während die Seite dahinter aus beleuchteten Platten mit Schienen,
|
||
Körnung und Glanz besteht. Beim Öffnen fiel man aus dem einen
|
||
Material ins andere.
|
||
|
||
Jetzt trägt er dieselbe Sprache wie alles übrige:
|
||
- Leuchtschiene links, im Hausakzent
|
||
- Kopfzeile abgesetzt mit einer feinen Fuge
|
||
- Körnung und ein fester Glanz von links oben
|
||
- Materialstärke: Licht oben, Schatten unten
|
||
Und er ist deutlich TIEFER als vorher (#0b1018 war ein helles Grau
|
||
gegen das, was jetzt hinter ihm liegt) -- ein Dialog muss sich vom
|
||
Untergrund abheben, sonst schwimmt er darin.
|
||
|
||
Der Hintergrund dahinter wird STÄRKER abgedunkelt und weicher
|
||
gezeichnet: Ein Dialog ist der einzige Ort, an dem ein Weichzeichner
|
||
richtig ist -- er soll das Dahinter ausdrücklich zurücktreten
|
||
lassen. Genau dafür ist er gemacht, und genau deshalb war er unter
|
||
den Kacheln falsch.
|
||
===================================================================== */
|
||
.dialog {
|
||
position: relative;
|
||
width: min(580px, calc(100vw - 32px));
|
||
padding: 0;
|
||
border: 1px solid rgba(150, 186, 220, .16);
|
||
border-radius: 4px 20px 20px 4px;
|
||
background:
|
||
linear-gradient(90deg,
|
||
color-mix(in srgb, var(--akzent) 16%, transparent) 0%,
|
||
color-mix(in srgb, var(--akzent) 5%, transparent) 14%,
|
||
transparent 40%),
|
||
linear-gradient(163deg, #141c29 0%, #0a0e17 58%, #070a11 100%);
|
||
color: var(--text);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .10),
|
||
inset 0 -1px 0 rgba(0, 0, 0, .55),
|
||
inset 2px 0 0 -1px color-mix(in srgb, var(--akzent) 34%, transparent),
|
||
0 30px 70px -24px rgba(0, 0, 0, .92),
|
||
0 4px 12px -6px rgba(0, 0, 0, .7);
|
||
overflow: hidden;
|
||
}
|
||
/* Die Leuchtschiene -- dieselbe wie an jeder Kachel. */
|
||
.dialog::before {
|
||
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
|
||
border-radius: 4px 0 0 4px;
|
||
background: linear-gradient(180deg,
|
||
color-mix(in srgb, var(--akzent) 55%, #fff) 0%,
|
||
var(--akzent) 26%,
|
||
color-mix(in srgb, var(--akzent) 48%, transparent) 100%);
|
||
box-shadow:
|
||
0 0 9px 0 color-mix(in srgb, var(--akzent) 55%, transparent),
|
||
3px 0 20px -3px color-mix(in srgb, var(--akzent) 42%, transparent);
|
||
z-index: 2;
|
||
}
|
||
/* Glanz und Körnung. `pointer-events: none` ist Pflicht: Ohne das läge
|
||
eine unsichtbare Fläche über dem ganzen Formular, und kein einziges
|
||
Feld wäre anklickbar. */
|
||
.dialog::after {
|
||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||
border-radius: inherit;
|
||
background:
|
||
linear-gradient(122deg,
|
||
rgba(255, 255, 255, .075) 0%,
|
||
rgba(255, 255, 255, .020) 15%,
|
||
transparent 34%);
|
||
/* Ohne Körnung -- siehe die Begründung in automation.css: Auf einer
|
||
Ebene mit der Spiegelung erbt sie deren Deckkraft und wird zum
|
||
grauen Schleier. */
|
||
opacity: .55;
|
||
z-index: 1;
|
||
}
|
||
.dialog > * { position: relative; z-index: 2; }
|
||
|
||
.dialog::backdrop {
|
||
background: rgba(2, 4, 8, .78);
|
||
backdrop-filter: blur(6px) saturate(80%);
|
||
}
|
||
|
||
.neu--blank { margin: 0; border: 0; background: none; padding: 22px 24px 20px; }
|
||
|
||
/* Der Kopf steht auf einer eigenen Stufe: Überschrift, darunter der
|
||
erklärende Satz, darunter eine feine Fuge. Ohne diese Trennung
|
||
verschwimmt die Ansage mit dem ersten Feld -- und genau die Ansage
|
||
ist das, was den Dialog erklärt. */
|
||
.dialog__titel {
|
||
margin: 0 0 4px;
|
||
font-size: 1.24rem; font-weight: 700; letter-spacing: -.015em;
|
||
color: #f2f7fd;
|
||
}
|
||
.dialog__unter {
|
||
margin: 0 0 16px; padding-bottom: 16px;
|
||
border-bottom: 1px solid rgba(150, 186, 220, .12);
|
||
font-size: .87rem; line-height: 1.55;
|
||
color: var(--text-leise);
|
||
}
|
||
/* Hat ein Dialog keine Erklärung, muss die Fuge trotzdem da sein --
|
||
sonst hängt die Überschrift am ersten Feld. */
|
||
.dialog__titel:last-of-type,
|
||
.dialog__unter:empty { border-bottom: 0; }
|
||
.dialog__unter:empty {
|
||
margin: 0 0 16px; padding-bottom: 16px;
|
||
border-bottom: 1px solid rgba(150, 186, 220, .12);
|
||
}
|
||
|
||
.dialog__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
|
||
.dialog__knoepfe #b-loeschen { margin-left: auto; }
|
||
|
||
.abmelden--warnung { color: var(--warn); border-color: rgba(255, 154, 162, .35); }
|
||
.abmelden--warnung:hover { background: rgba(255, 154, 162, .1); border-color: rgba(255, 154, 162, .6); }
|
||
|
||
/* Der Bearbeiten-Stift war nie ein richtiger Knopf, sondern nackter
|
||
Text -- man sah nicht, dass man draufdruecken kann. Jetzt traegt er
|
||
das Knopf-System in der kleinsten, ruhigsten Groesse. */
|
||
.karte__stift { margin-left: auto; }
|
||
.karte__kopf { display: flex; align-items: flex-start; gap: 8px; }
|
||
.karte__kopf .karte__titel { flex: 1 1 auto; }
|
||
|
||
/* ===================================================================
|
||
Rückmeldungen an einer Aufgabe ("Aufgaben & Feedback", Konzept).
|
||
|
||
Direkt an der Karte, nicht in einem Fenster: Man liest sie im
|
||
Zusammenhang mit der Aufgabe -- sonst fehlt beim Antworten die
|
||
Hälfte.
|
||
=================================================================== */
|
||
|
||
.karte__rueck {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
margin-top: 10px; padding: 6px 11px; cursor: pointer;
|
||
background: transparent;
|
||
border: 1px solid var(--rand); border-radius: 999px;
|
||
color: var(--text-still); font: inherit; font-size: .76rem;
|
||
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
||
}
|
||
.karte__rueck:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
|
||
/* Wo schon etwas besprochen wurde, sieht man es ohne Aufklappen. */
|
||
.karte__rueck[data-hat="ja"] {
|
||
color: var(--akzent);
|
||
border-color: rgba(63, 189, 245, .38);
|
||
background: rgba(63, 189, 245, .08);
|
||
}
|
||
.karte__rueck[data-offen="ja"] { border-color: rgba(63, 189, 245, .6); color: #fff; }
|
||
.karte__blase {
|
||
width: 14px; height: 14px; flex: none;
|
||
fill: none; stroke: currentColor; stroke-width: 1.7;
|
||
stroke-linecap: round; stroke-linejoin: round;
|
||
}
|
||
|
||
.rueck {
|
||
margin-top: 11px; padding-top: 11px;
|
||
border-top: 1px solid var(--rand);
|
||
}
|
||
.rueck__liste { display: grid; gap: 8px; margin-bottom: 11px; }
|
||
.rueck__eintrag {
|
||
padding: 9px 12px;
|
||
background: rgba(255, 255, 255, .035);
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
}
|
||
.rueck__kopf { display: flex; align-items: baseline; gap: 8px; margin: 0 0 3px; }
|
||
.rueck__wer { font-size: .79rem; font-weight: 650; color: var(--text); }
|
||
.rueck__wann { font-size: .72rem; color: var(--text-still); }
|
||
.rueck__weg {
|
||
margin-left: auto; padding: 0 5px; cursor: pointer; line-height: 1;
|
||
background: none; border: 0; color: var(--text-still); font-size: 1rem;
|
||
}
|
||
.rueck__weg:hover { color: #ffb4b9; }
|
||
.rueck__text {
|
||
margin: 0; font-size: .85rem; color: var(--text-leise);
|
||
white-space: pre-wrap; line-height: 1.5;
|
||
}
|
||
|
||
.rueck__form { display: grid; gap: 8px; justify-items: start; }
|
||
.rueck__feld {
|
||
width: 100%; padding: 9px 12px;
|
||
background: rgba(255, 255, 255, .045);
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
color: var(--text); font: inherit; font-size: .86rem; resize: vertical;
|
||
}
|
||
.rueck__feld:focus {
|
||
outline: none; border-color: rgba(63, 189, 245, .65);
|
||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .15);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) { .karte__rueck { transition: none; } }
|
||
|
||
/* Die letzten drei Pixel.
|
||
|
||
Trotz gleicher Hoehe und gleicher Rasterzeile sassen Auswahl- und
|
||
Eingabefelder 3 px versetzt. Grund: Ein <input> ist von Haus aus
|
||
inline und wird an der SCHRIFTGRUNDLINIE ausgerichtet -- die liegt je
|
||
nach Element unterschiedlich. Drei Pixel klingen nach nichts und sind
|
||
genau das, was man als "verzogen" sieht.
|
||
|
||
display: block nimmt die Grundlinie aus dem Spiel; margin: 0 die
|
||
Vorgaben des Browsers. */
|
||
.neu__raster > * > input,
|
||
.neu__raster > * > select,
|
||
.neu__raster > * > textarea {
|
||
display: block;
|
||
width: 100%;
|
||
margin: 0;
|
||
vertical-align: top;
|
||
}
|
||
|
||
/* Die Beschriftung bekommt eine FESTE Hoehe.
|
||
|
||
Damit beginnt das Eingabefeld in jeder Spalte an derselben Stelle --
|
||
ganz gleich, wie das Feld darunter beschaffen ist. Vorher hing es an
|
||
Grundlinien und Zeilenhoehen, und drei Pixel Versatz blieben trotz
|
||
gleicher Feldhoehe und gleicher Rasterzeile uebrig.
|
||
|
||
Feste Werte sind hier ausnahmsweise das richtige Mittel: Eine
|
||
Beschriftung ist immer einzeilig (mehrzeilige werden gekuerzt, siehe
|
||
die Handypruefung), und "alle Felder auf einer Linie" ist eine
|
||
Zusicherung, keine Faustregel. */
|
||
.neu__raster > * > .feld-schild {
|
||
height: 17px;
|
||
margin-bottom: 7px;
|
||
line-height: 17px;
|
||
overflow: hidden;
|
||
white-space: nowrap; text-overflow: ellipsis;
|
||
}
|
||
|
||
/* ---------- Die Leiste über dem Brett (01.09.2026) ------------------------
|
||
|
||
"verbessere die Aufgabenseite auch bei Manager, Scout und Creator …
|
||
aber auch die Creator sollen es besser und detaillierter sehen."
|
||
|
||
Drei Zeilen, die zusammen die Frage beantworten, mit der man auf diese
|
||
Seite kommt: Muss ich mir Sorgen machen, und wo fange ich an? Ein
|
||
Brett aus vier Spalten kann das nicht sagen – man müsste alle vier
|
||
durchsehen, um zu wissen, dass nichts brennt. */
|
||
|
||
.lage {
|
||
--l-ton: #6f89a8;
|
||
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
||
margin: 0 0 14px; padding: 11px 15px;
|
||
border: 1px solid color-mix(in srgb, var(--l-ton) 28%, var(--rand));
|
||
border-left-width: 3px;
|
||
border-radius: var(--radius-klein);
|
||
background:
|
||
linear-gradient(90deg, color-mix(in srgb, var(--l-ton) 10%, transparent), transparent 55%),
|
||
var(--flaeche);
|
||
}
|
||
.lage[data-stufe="warnung"] { --l-ton: #e0a33c; }
|
||
.lage[data-stufe="offen"] { --l-ton: #6f89a8; }
|
||
.lage[data-stufe="ruhig"] { --l-ton: #4dab77; }
|
||
.lage__satz { font-size: .95rem; color: var(--text); }
|
||
.lage[data-stufe="warnung"] .lage__satz { color: #f0c67c; }
|
||
/* Steht rechts und leiser: "wie viel davon ist meins" ist die zweite
|
||
Frage, nicht die erste. */
|
||
.lage__meins {
|
||
margin-left: auto; padding: 3px 10px;
|
||
border: 1px solid var(--rand); border-radius: 999px;
|
||
font-size: .78rem; color: var(--text-leise);
|
||
}
|
||
|
||
.ausschnitte, .creator-reihe {
|
||
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
||
margin-bottom: 12px;
|
||
}
|
||
.creator-reihe { margin-bottom: 18px; }
|
||
.creator-reihe__schild {
|
||
font-size: .72rem; font-weight: 600;
|
||
letter-spacing: .1em; text-transform: uppercase;
|
||
color: var(--text-still); margin-right: 2px;
|
||
}
|
||
|
||
/* Ein Ausschnitt-Knopf trägt IMMER seine Zahl. Ein Filter, der sich erst
|
||
nach dem Klick als leer herausstellt, kostet zweimal Aufmerksamkeit --
|
||
und man klickt ihn beim nächsten Mal trotzdem wieder an. */
|
||
.schnitt, .creator-knopf {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
min-height: 38px; padding: 7px 13px;
|
||
border: 1px solid var(--rand); border-radius: 999px;
|
||
/* EIGENER UNTERGRUND, NICHT GELIEHENER (07.09.2026).
|
||
|
||
Hier stand `rgba(255, 255, 255, .03)` -- also praktisch nichts. Der
|
||
Knopf war lesbar, weil hinter ihm zufaellig etwas Dunkles lag. Als
|
||
die Buehnenbilder heller wurden (Glanz) und die Flaechen darueber
|
||
ihren Weichzeichner verloren, war das vorbei: Auf dem Handy sass
|
||
"Ueberfaellig" ploetzlich auf rgb(79, 76, 79) und kam auf 4,16:1
|
||
statt der noetigen 4,5:1 -- gemessen von pruef-buehne an echten
|
||
Bildpunkten.
|
||
|
||
Das ist kein Bildproblem und wird auch nicht dort behoben: Das Bild
|
||
dunkler zu machen haette genau die Verbesserung zurueckgenommen, um
|
||
die es ging. Ein Bedienelement, dessen Lesbarkeit davon abhaengt,
|
||
was zufaellig dahinter liegt, ist die eigentliche Schwachstelle --
|
||
es geht beim naechsten Hintergrundwechsel wieder kaputt, und
|
||
niemand rechnet damit.
|
||
|
||
Dunkel und trotzdem durchscheinend: Das Motiv bleibt zu ahnen, der
|
||
Text steht aber nie mehr direkt auf einem Foto. */
|
||
background: rgba(9, 13, 21, .62);
|
||
color: var(--text-leise); font: inherit; font-size: .85rem;
|
||
cursor: pointer;
|
||
transition: border-color var(--tempo), color var(--tempo), background var(--tempo);
|
||
}
|
||
.schnitt:hover:not([disabled]), .creator-knopf:hover {
|
||
color: var(--text); border-color: rgba(255, 255, 255, .22);
|
||
}
|
||
.schnitt[aria-pressed="true"], .creator-knopf[aria-pressed="true"] {
|
||
color: var(--text);
|
||
border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
|
||
/* Die Farbe liegt AUF dem dunklen Untergrund, nicht statt seiner --
|
||
sonst haette der gedrückte Knopf genau das Problem zurück, das der
|
||
ungedrückte gerade losgeworden ist. */
|
||
background: color-mix(in srgb, var(--akzent) 15%, rgba(9, 13, 21, .66));
|
||
}
|
||
.schnitt:focus-visible, .creator-knopf:focus-visible {
|
||
outline: 2px solid var(--akzent); outline-offset: 2px;
|
||
}
|
||
/* Ein Ausschnitt ohne Inhalt wird abgeschaltet statt versteckt: Wer
|
||
gestern "3 überfällig" gesehen hat, soll heute sehen, dass es 0 sind
|
||
-- und nicht rätseln, wo der Knopf hin ist. */
|
||
/* 0,62 statt 0,42 (06.09.2026). Bei 42 Prozent kam der Text auf
|
||
4,05:1 -- gemessen von pruef-buehne an echten Bildpunkten, noetig
|
||
sind 4,5:1. Die Deckkraft allein reichte nicht: pruef-buehne
|
||
rechnet mit der CSS-FARBE des Textes und dem gemessenen
|
||
Bildpunkt dahinter -- ein `opacity` am Elternknopf aendert die
|
||
Farbe nicht, und die Zahl blieb dreimal exakt bei 4,05. Deshalb
|
||
zusaetzlich ein eigener, hellerer Ton (#aab7c7, 4,9:1).
|
||
Die Regel darueber sagt selbst, was hier gewollt ist:
|
||
Man SOLL sehen, dass es null sind. Ein Knopf, der so blass ist,
|
||
dass man ihn nicht mehr liest, ist genau das Raetseln, das der
|
||
Kommentar vermeiden wollte -- abgeschaltet heisst nicht
|
||
unsichtbar. */
|
||
/* DIE DECKKRAFT MUSSTE GANZ WEG (07.09.2026).
|
||
|
||
Am 06.09. stand hier `opacity: .42`, die Messung blieb dreimal bei
|
||
4,05:1, und die Lehre daraus war richtig notiert: Deckkraft aendert
|
||
die CSS-Farbe des Textes nicht. Nur habe ich damals die andere Haelfte
|
||
uebersehen -- sie aendert dafuer sehr wohl den UNTERGRUND, denn
|
||
`opacity` wirkt auf das ganze Element samt seiner Flaeche.
|
||
|
||
Heute hat mich genau das ein zweites Mal erwischt, aus der anderen
|
||
Richtung: Ich habe dem Knopf einen dunklen Untergrund gegeben, und
|
||
die Zahl blieb auf die Stelle genau bei 4,16:1. Wieder das
|
||
Unveraenderlichkeits-Zeichen -- eine Zahl, die sich nach einer
|
||
Aenderung KEIN Stueck bewegt, sagt nicht "zu wenig", sondern "an der
|
||
falschen Stelle". Der neue Untergrund wurde mit 62 Prozent
|
||
durchgereicht, das helle Buehnenbild schlug durch, und heraus kam
|
||
rgb(79, 76, 79).
|
||
|
||
Abgeschaltet heisst jetzt: gedaempfte FARBEN, volle Flaeche. Der
|
||
Untergrund traegt, der Text tritt zurueck -- und beides ist messbar,
|
||
statt sich gegenseitig zu verrechnen. */
|
||
.schnitt[disabled] {
|
||
cursor: default;
|
||
color: #aab7c7;
|
||
border-color: rgba(150, 186, 220, .12);
|
||
background: rgba(9, 13, 21, .72);
|
||
}
|
||
.schnitt[disabled] .schnitt__zahl { background: rgba(255, 255, 255, .05); color: #96a4b6; }
|
||
|
||
.schnitt__zahl, .creator-knopf__zahl {
|
||
min-width: 20px; padding: 1px 7px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, .07);
|
||
font-size: .76rem; font-weight: 700;
|
||
font-variant-numeric: tabular-nums;
|
||
text-align: center;
|
||
}
|
||
/* "Überfällig" trägt seine Farbe nur, wenn wirklich etwas überfällig ist.
|
||
Ein dauerhaft warnender Knopf warnt nach zwei Tagen niemanden mehr. */
|
||
.schnitt[data-warn="ja"]:not([disabled]) {
|
||
color: #f0c67c; border-color: rgba(224, 163, 60, .42);
|
||
}
|
||
.schnitt[data-warn="ja"]:not([disabled]) .schnitt__zahl {
|
||
background: rgba(224, 163, 60, .18);
|
||
}
|
||
.schnitt[data-warn="ja"][aria-pressed="true"] {
|
||
background: rgba(224, 163, 60, .16);
|
||
border-color: rgba(224, 163, 60, .6);
|
||
}
|
||
|
||
.creator-knopf__name { font-weight: 600; color: inherit; }
|
||
/* Die kleine Warnzahl am Creator: wie viele seiner Aufgaben überfällig
|
||
sind. Sie steht NEBEN der Gesamtzahl, nicht statt ihr -- sonst weiß
|
||
man nicht, ob "2" viel oder wenig ist. */
|
||
.creator-knopf__warn {
|
||
min-width: 20px; padding: 1px 7px;
|
||
border-radius: 999px;
|
||
background: rgba(224, 163, 60, .18);
|
||
border: 1px solid rgba(224, 163, 60, .38);
|
||
color: #f0c67c;
|
||
font-size: .74rem; font-weight: 700;
|
||
font-variant-numeric: tabular-nums; text-align: center;
|
||
}
|
||
|
||
@media (max-width: 560px) {
|
||
.lage { flex-direction: column; align-items: flex-start; gap: 6px; }
|
||
.lage__meins { margin-left: 0; }
|
||
/* Waagerecht scrollen statt umbrechen: Bei fünf Creatorn würde die
|
||
Reihe sonst drei Zeilen hoch und das Brett wäre weg. */
|
||
.ausschnitte, .creator-reihe {
|
||
flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
|
||
scrollbar-width: thin;
|
||
}
|
||
.schnitt, .creator-knopf { flex: none; }
|
||
}
|
||
|
||
/* ===================================================================
|
||
Der feste Call-Raum (02.09.2026)
|
||
|
||
Eine ruhige Zeile über der Liste: wo die Gespräche stattfinden. Sie
|
||
beantwortet die Frage einmal, statt sie an jedem Termin neu zu
|
||
stellen. Bewusst zurückhaltend -- sie ist eine Auskunft, keine
|
||
Aufforderung.
|
||
=================================================================== */
|
||
.call-raum {
|
||
display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
|
||
margin: 0 0 18px; padding: 11px 14px;
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
background: var(--flaeche);
|
||
}
|
||
.call-raum__zeile {
|
||
margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
||
min-width: 0;
|
||
}
|
||
.call-raum__schild {
|
||
/* .78rem = 12,48 px. Untergrenze auf dem Handy sind 11,5 px (siehe
|
||
pruef-grosscheck.mjs) -- die vorher hier stehenden .68rem waren
|
||
10,88 px und damit unter der Grenze. Eine Beschriftung in
|
||
Grossbuchstaben braucht ohnehin mehr Groesse, nicht weniger. */
|
||
font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
}
|
||
.call-raum__link {
|
||
color: var(--akzent);
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
max-width: min(60vw, 520px);
|
||
}
|
||
.call-raum__leer { color: var(--text-still); font-size: .86rem; }
|
||
.call-raum button { margin-left: auto; }
|
||
.call-raum__form {
|
||
display: flex; align-items: end; flex-wrap: wrap; gap: 8px;
|
||
width: 100%;
|
||
}
|
||
.call-raum__form .feld-schild { width: 100%; margin: 0 0 2px; }
|
||
.call-raum__form input { flex: 1 1 260px; min-width: 0; }
|
||
.call-raum__form button { margin-left: 0; }
|
||
|
||
@media (max-width: 560px) {
|
||
.call-raum { align-items: flex-start; }
|
||
.call-raum button { margin-left: 0; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
ABBRECHEN — Knopf, Bereich und Dialog
|
||
=====================================================================
|
||
|
||
Wunsch Filipe, 05.09.2026: *"ich will dass man in jedem status die
|
||
aufgaben auch abbrechen kann."*
|
||
|
||
GESTALTUNGSREGEL HIER: zurückhaltend. Abbrechen ist die seltene
|
||
Handlung neben "starten" und "erledigt" -- sie darf auf der Karte
|
||
nicht lauter sein als die beiden, die man täglich braucht. Kein
|
||
Signalrot, kein Ausrufezeichen: ein gedeckter Ton, der sich vom
|
||
Weiterschalten unterscheidet, ohne die Karte an sich zu reißen.
|
||
(Augenschonend ist hier ohnehin Hausregel.) */
|
||
|
||
/* Ein warmer, gedämpfter Ton statt Alarmrot. --f ist die Farbvariable,
|
||
die .schritt in gate.css für Rand, Schrift und Schimmer benutzt. */
|
||
.schritt--ab { --f: #c98a7d; }
|
||
.schritt--ab:hover { color: color-mix(in srgb, #c98a7d 40%, #ffffff); }
|
||
|
||
/* ---------- Der Bereich unter dem Brett ---------------------------------- */
|
||
|
||
.abgebrochen {
|
||
margin: 22px 0 0;
|
||
border: 1px solid var(--rand);
|
||
border-radius: 14px;
|
||
background: rgba(255, 255, 255, .022);
|
||
}
|
||
|
||
.abgebrochen__kopf {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 13px 17px;
|
||
cursor: pointer;
|
||
font-size: .82rem; font-weight: 700;
|
||
letter-spacing: .06em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
/* Das eigene Dreieck von <summary> weg -- es wird unten selbst
|
||
gezeichnet, damit es links steht und sich mitdreht. */
|
||
list-style: none;
|
||
}
|
||
.abgebrochen__kopf::-webkit-details-marker { display: none; }
|
||
.abgebrochen__kopf:hover { color: var(--text-leise); }
|
||
.abgebrochen__kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; border-radius: 14px; }
|
||
|
||
/* Das Dreieck. Dreht sich beim Aufklappen -- die Bewegung sagt, dass
|
||
der Inhalt darunter erscheint und nicht woanders. */
|
||
.abgebrochen__kopf::before {
|
||
content: ""; flex: none;
|
||
width: 0; height: 0;
|
||
border-left: 5px solid currentColor;
|
||
border-top: 4px solid transparent;
|
||
border-bottom: 4px solid transparent;
|
||
transition: transform .18s ease;
|
||
}
|
||
.abgebrochen[open] .abgebrochen__kopf::before { transform: rotate(90deg); }
|
||
|
||
.abgebrochen__name { flex: 1; }
|
||
.abgebrochen__zahl {
|
||
padding: 2px 9px; border-radius: 999px;
|
||
font-size: .78rem; font-weight: 700; letter-spacing: 0;
|
||
color: var(--text-leise);
|
||
background: rgba(255, 255, 255, .06);
|
||
border: 1px solid var(--rand);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.abgebrochen__unter {
|
||
margin: 0; padding: 0 17px 4px;
|
||
font-size: .8rem; color: var(--text-still); max-width: 72ch;
|
||
}
|
||
|
||
.abgebrochen__liste {
|
||
display: grid; gap: 10px;
|
||
/* Mehrspaltig, sobald Platz ist: Abgebrochenes liest man am Stück,
|
||
nicht einzeln -- eine lange Spalte zwänge zum Scrollen durch etwas,
|
||
das man ohnehin nur überfliegt. */
|
||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||
padding: 10px 17px 17px;
|
||
}
|
||
|
||
.abbruch-karte {
|
||
padding: 13px 15px;
|
||
border: 1px solid var(--rand);
|
||
border-radius: 12px;
|
||
background: rgba(255, 255, 255, .028);
|
||
}
|
||
.abbruch-karte__kopf {
|
||
display: flex; align-items: baseline; gap: 9px;
|
||
margin-bottom: 6px;
|
||
}
|
||
/* Durchgestrichen sagt "gilt nicht mehr" schneller als jedes Wort --
|
||
und bleibt lesbar, anders als bloßes Ausgrauen. */
|
||
.abbruch-karte__titel {
|
||
margin: 0; flex: 1;
|
||
font-size: .92rem; font-weight: 600;
|
||
color: var(--text-leise);
|
||
text-decoration: line-through;
|
||
text-decoration-color: color-mix(in srgb, var(--text-still) 70%, transparent);
|
||
}
|
||
/* Wo es stand, als es abgebrochen wurde. */
|
||
.abbruch-karte__vorher {
|
||
flex: none;
|
||
padding: 2px 8px; border-radius: 999px;
|
||
font-size: .68rem; font-weight: 700;
|
||
letter-spacing: .04em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
background: rgba(255, 255, 255, .05);
|
||
border: 1px solid var(--rand);
|
||
}
|
||
.abbruch-karte__grund {
|
||
margin: 0 0 7px;
|
||
font-size: .84rem; color: var(--text-leise);
|
||
/* Der Grund ist der eigentliche Inhalt dieser Karte -- er steht in
|
||
normaler Textfarbe, während der Titel durchgestrichen zurücktritt. */
|
||
}
|
||
.abbruch-karte__wer {
|
||
margin: 0 0 9px;
|
||
font-size: .74rem; color: var(--text-still);
|
||
}
|
||
.abbruch-karte .schritt { font-size: .8rem; padding: 7px 13px; }
|
||
|
||
/* ---------- Der Dialog --------------------------------------------------- */
|
||
|
||
.dialog__unter {
|
||
margin: -4px 0 14px;
|
||
font-size: .85rem; color: var(--text-still);
|
||
max-width: 60ch; line-height: 1.5;
|
||
}
|
||
|
||
#abbruch-grund {
|
||
width: 100%;
|
||
resize: vertical;
|
||
min-height: 72px;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.abgebrochen__kopf::before { transition: none; }
|
||
}
|
||
|
||
/* Ohne Farbverläufe trägt die Kante allein. Der Durchstrich bleibt --
|
||
er ist hier das eigentliche Merkmal und keine Deko. */
|
||
@media (forced-colors: active) {
|
||
.abgebrochen, .abbruch-karte { border: 1px solid CanvasText; }
|
||
.abgebrochen__zahl, .abbruch-karte__vorher { border: 1px solid CanvasText; }
|
||
}
|