DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
58911d7c4f93d3129d5005c182bc032fca561b5d
dogfather-universe/workspace/assets/css/automation.css
T
DogFatherGitandClaude Opus 5 e975983ad1 Das Loeschkonzept ist kein Dokument, sondern eine Tabelle, die sich durchsetzt 
Stufe 8 aus dem Plan zur Perfektion: "Loeschkonzept je Datenart ·
IP-Adressen im Protokoll nach 30 Tagen weg. Je mehr Daten, desto teurer
das Nachholen."

WARUM NICHT ALS NOTIZ

Ein Loeschkonzept als Dokument ist nach dem ersten neuen Feld falsch,
und niemand merkt es. workspace-aufbewahrung.js ist beides: die
Uebersicht, was wie lange aufgehoben wird -- UND das Programm, das es
tut. Was dort nicht steht, wird nicht geraeumt; was dort steht, wird
geraeumt.

GEMESSEN, BEVOR ETWAS GEBAUT WURDE

42 Tabellen durchgesehen. Drei halten IP-Adressen:

  versuche.ip    wird beim Anmelden im Fenster geraeumt        ok
  sitzungen.ip   nur beim Abmelden -- ABGELAUFENE Sitzungen
                 standen ewig da, samt IP und Browser          Luecke
  protokoll.ip   wurde nirgends geraeumt, wuchs ewig           Luecke

Zwei echte Luecken also, nicht fuenf vermutete.

DREI SORTEN EINTRAG, UND DIE DRITTE IST DIE WICHTIGSTE

  raeumen   Diese Datei loescht selbst.
  fremd     Eine andere Stelle loescht -- hier wird nur GEZAEHLT.
            Bricht die andere Stelle, steht die Zahl trotzdem da.
  bleibt    Wird absichtlich aufgehoben, mit Begruendung.

Ein Loeschkonzept, das nur Loeschungen auffuehrt, ist ein halbes: Die
begruendete Aufbewahrung ist der Teil, nach dem gefragt wird. Jede
Zeile nennt Frist, Zweck, Rechtsgrundlage und Wirkung.

SICHTBAR, NICHT NUR WIRKSAM

Auf automation.html -- dort steht alles, was ohne Zutun laeuft, und
genau das ist es. Bei jeder Zeile die Zahl, wie viele Datensaetze sie
gerade betrifft, und ein Knopf "Jetzt aufraeumen", damit es kein
schwarzer Kasten ist. Die Sorte steht als WORT daneben, nicht nur als
Farbe.

BEI ETWAS, DAS LOESCHT, IST DIE WICHTIGERE HAELFTE: WAS ES NICHT LOESCHT

Zu jeder Loeschung eine Gegenprobe:

  IP nach 30 Tagen weg        -> und die von vor 29 Tagen bleibt
  IP weg                      -> und die ZEILE bleibt (nur das Feld)
  abgelaufene Sitzung weg     -> und die gueltige bleibt
  abgelaufene Sitzung weg     -> und ich bin danach noch angemeldet

Die letzte ist die unbequemste und die wichtigste: Ein Aufraeumlauf,
der die eigene Anmeldung mitnimmt, wirft im Betrieb alle hinaus -- und
zwar einmal taeglich. Dazu: ein zweiter Lauf muss NICHTS mehr finden
(sonst waere "aufgeraeumt" nicht von "nichts getan" zu unterscheiden),
und eine Zaehlung ueber eine fehlende Tabelle ergibt `null`, nicht 0.

NEBENBEI: EINE EIGENE DOPPLUNG VON GESTERN

Drei der Seitenerklaerungen sagten in "Wofuer" und "Du tust" fast
dasselbe (report 80 %, treff-regeln 67 %, startcheck 50 %). Gestern
hatte ich nur den Fall geprueft, an dem ich mich verbrannt hatte --
"Wofuer" gegen die Unterzeile -- und die naheliegendere Dopplung
uebersehen. Jetzt gemessen, schlechtester Wert 25 %.

PRUEFUNGEN: pruef-aufbewahrung neu mit 41, davon 7 im Browser
(der Knopf muss eine Zahl wirklich fallen lassen, und die IP muss
danach in der Datenbank weg sein). pruef-erklaerung 44 -> 47.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-15 00:36:57 +02:00

486 lines
19 KiB
CSS
Raw Blame History

/* ===================================================================
Automationen.
Ein Zustandsbild, keine Bedienoberflaeche: Der einzige Schalter ist
der fuer die KI, weil sie als einzige Rechenzeit kostet, die der
Website gehoert. Alles andere laeuft und wird hier nur gezeigt.
=================================================================== */
.block { margin-bottom: 34px; }
.block__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.block__titel {
margin: 0; font-size: .78rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
}
.block__zahl {
min-width: 22px; padding: 1px 8px; text-align: center;
font-size: .74rem; font-weight: 700; color: var(--text-still);
background: rgba(255, 255, 255, .06); border-radius: 999px;
}
.block__frage { margin: 0 0 14px; font-size: .85rem; color: var(--text-still); max-width: 76ch; }
/* ---------- KI ------------------------------------------------------------ */
.ki-kasten {
margin-bottom: 34px; padding: 20px 22px;
border: 1px solid var(--rand); border-radius: var(--radius);
background: var(--flaeche);
}
.ki-kasten[data-zustand="laeuft"] {
border-color: rgba(138, 118, 255, .34);
background: rgba(138, 118, 255, .05);
}
.ki-kasten[data-zustand="weg"] {
border-color: rgba(255, 154, 162, .3);
background: rgba(255, 154, 162, .045);
}
.ki-kasten__kopf {
display: flex; gap: 20px; align-items: flex-start;
justify-content: space-between; flex-wrap: wrap;
}
.ki-kasten__titel { margin: 2px 0 6px; font-size: 1.1rem; font-weight: 700; }
.ki-kasten__text { margin: 0; font-size: .88rem; color: var(--text-leise); max-width: 62ch; }
.ki-kasten__daten {
display: grid; gap: 7px; margin: 18px 0 0; padding: 16px 0 0; list-style: none;
border-top: 1px solid var(--rand);
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.ki-kasten__daten li { display: flex; gap: 10px; font-size: .83rem; color: var(--text-leise); }
.ki-kasten__schild {
flex: none; min-width: 74px;
font-size: .7rem; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--text-still); padding-top: 2px;
}
/* ---------- Sicherung & Zustand -------------------------------------------
Derselbe Kasten wie bei der KI, aber mit eigener Farbgebung fuer den
Zustand: Gruen gibt es hier bewusst nicht -- "es lief" ist der
Normalfall und soll nicht feiern. Auffaellig wird es nur, wenn eine
Nacht ausgefallen ist oder etwas schiefging.
-------------------------------------------------------------------------- */
.zustand {
margin-bottom: 34px; padding: 20px 22px;
border: 1px solid var(--rand); border-radius: var(--radius);
background: var(--flaeche);
}
.zustand[data-zustand="alt"] {
border-color: rgba(232, 192, 125, .34); background: rgba(232, 192, 125, .05);
}
.zustand[data-zustand="fehler"] {
border-color: rgba(255, 154, 162, .34); background: rgba(255, 154, 162, .05);
}
.zustand__kopf {
display: flex; gap: 20px; align-items: flex-start;
justify-content: space-between; flex-wrap: wrap;
}
.zustand__titel { margin: 2px 0 6px; font-size: 1.1rem; font-weight: 700; }
.zustand[data-zustand="fehler"] .zustand__titel { color: var(--warn); }
.zustand__text { margin: 0; font-size: .88rem; color: var(--text-leise); max-width: 68ch; }
.zustand__daten {
display: grid; gap: 7px; margin: 18px 0 0; padding: 16px 0 0; list-style: none;
border-top: 1px solid var(--rand);
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.zustand__daten li { display: flex; gap: 10px; font-size: .83rem; color: var(--text-leise); }
.zustand__daten .ki-kasten__schild { min-width: 128px; }
.zustand__listenkopf { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rand); }
/* ---------- Hinweise ------------------------------------------------------- */
.hinweise { display: grid; gap: 7px; }
.hinweis {
position: relative; display: flex; align-items: center; gap: 12px;
padding: 11px 15px 11px 18px;
text-decoration: none; color: var(--text); font-size: .89rem;
border: 1px solid var(--rand); border-radius: var(--radius-klein);
background: var(--flaeche);
transition: border-color .18s ease, background .18s ease;
}
.hinweis::before {
content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px;
border-radius: 0 2px 2px 0; background: var(--rand);
}
.hinweis[data-stufe="warnung"] {
border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .05);
}
.hinweis[data-stufe="warnung"]::before { background: var(--warn); }
.hinweis[data-stufe="offen"]::before { background: var(--akzent); opacity: .7; }
.hinweis[data-stufe="ruhig"] { opacity: .8; }
.hinweis:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); }
.hinweis__zahl {
flex: none; min-width: 30px; text-align: center;
font-size: 1.05rem; font-weight: 700;
}
.hinweis[data-stufe="warnung"] .hinweis__zahl { color: var(--warn); }
.hinweis__text { flex: 1; color: var(--text-leise); }
.hinweis__pfeil { color: var(--text-still); }
.hinweis:hover .hinweis__pfeil { color: var(--akzent); }
/* ---------- Regeln --------------------------------------------------------- */
.regeln {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.regel {
padding: 15px 17px;
border: 1px solid var(--rand); border-radius: var(--radius-klein);
background: var(--flaeche);
}
.regel__name { margin: 0 0 5px; font-size: .93rem; font-weight: 650; }
.regel__text { margin: 0; font-size: .83rem; color: var(--text-still); line-height: 1.55; }
/* ---------- Verlauf -------------------------------------------------------- */
.verlauf { display: grid; gap: 2px; }
.verlauf__zeile {
display: grid; gap: 12px; align-items: baseline;
grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.2fr);
padding: 8px 12px; border-radius: var(--radius-klein);
font-size: .82rem;
}
.verlauf__zeile:nth-child(odd) { background: var(--flaeche); }
/* ÜBERLAUF WIRD GEKÜRZT, NICHT ÜBERGESTELLT.
Die erste Spalte ist 96 px breit und hatte keine Bremse -- ein zu
langer Text lief einfach weiter und legte sich über den Nachbarn.
Am 07.09.2026 ist genau das passiert (ein falsch gebautes Datum,
siehe automation.js). Der Auslöser ist behoben; diese drei Zeilen
sorgen dafür, dass der NÄCHSTE zu lange Text nur abgeschnitten wird,
statt etwas unlesbar zu machen. Eine Spalte mit fester Breite ohne
Kürzung ist immer eine Zeitbombe. */
.verlauf__zeit {
color: var(--text-still); font-variant-numeric: tabular-nums;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.verlauf__was {
color: var(--text);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.verlauf__wer { color: var(--text-still); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
.verlauf__zeile { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .hinweis { transition: none; } }
/* =====================================================================
AUTOMATIONEN — dasselbe Material wie überall (07.09.2026)
Filipe zu den Regelkarten: "diese kacheln sollen alle viel viel
krasser sein bitte." Und zum Sicherungsblock: "das soll auch viel
viel spezieller aussehen und die texte auch nicht übereinander."
Der zweite Satz ist der wichtigere -- die Überlappung war ein echter
Fehler und ist in automation.js behoben (ein falsch gebautes Datum)
und in .verlauf__zeit abgesichert (feste Spaltenbreite ohne Kürzung).
Optisch war der Befund derselbe wie überall: Diese Seite bestand aus
flachen Rechtecken mit `var(--flaeche)` und einem Rand -- gebaut,
bevor es die Leuchtschienen gab. Sie sah dadurch aus wie aus einer
anderen Anwendung.
ZWEI STUFEN, NICHT EINE. Die Regelkarten bekommen eine RUHIGE
Schiene: Es sind neun gleichrangige Karten, und neun leuchtende
Schienen nebeneinander ergeben einen Zaun. Der Sicherungsblock
dagegen ist EINE Karte mit einer Aussage ("zuletzt gesichert vor 23
Stunden") und bekommt die volle Behandlung -- er ist das Erste, was
man auf dieser Seite wissen will.
UND DIE SCHIENE SAGT ETWAS. Am Sicherungsblock nimmt sie die Farbe
des Zustands an: grün, wenn frisch, bernstein, wenn alt, rot bei
Fehler. Damit ist der Zustand aus dem Augenwinkel erkennbar, und der
Text daneben sagt dasselbe noch einmal in Worten -- Farbe allein
reicht nie.
===================================================================== */
/* ---------- Der Sicherungsblock -------------------------------------- */
.zustand {
--z: var(--k-gut);
position: relative;
overflow: hidden;
border-radius: 4px 20px 20px 4px;
background:
linear-gradient(90deg,
color-mix(in srgb, var(--z) 26%, transparent) 0%,
color-mix(in srgb, var(--z) 9%, transparent) 12%,
color-mix(in srgb, var(--z) 3%, transparent) 26%,
transparent 46%),
linear-gradient(163deg,
rgba(23, 31, 45, .95) 0%,
rgba(11, 15, 24, .95) 58%,
rgba(8, 11, 18, .95) 100%);
border-color: color-mix(in srgb, var(--z) 20%, rgba(150, 186, 220, .13));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .10),
inset 0 -1px 0 rgba(0, 0, 0, .50),
0 2px 5px -2px rgba(0, 0, 0, .55),
0 16px 34px -20px rgba(0, 0, 0, .88);
}
.zustand::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(--z) 55%, #fff) 0%,
var(--z) 26%,
color-mix(in srgb, var(--z) 48%, transparent) 100%);
box-shadow:
0 0 9px 0 color-mix(in srgb, var(--z) 55%, transparent),
3px 0 20px -3px color-mix(in srgb, var(--z) 42%, transparent);
z-index: 2;
}
.zustand::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
border-radius: inherit;
background:
linear-gradient(112deg,
transparent 24%,
rgba(255, 255, 255, .045) 40%,
rgba(255, 255, 255, .08) 47%,
rgba(255, 255, 255, .025) 55%,
transparent 70%);
/* KEINE Körnung auf DIESER Ebene (07.09.2026, gemessen).
Sie stand hier als zweite Schicht und hat die Deckkraft der
Spiegelung geerbt -- 50 % eines mittelgrauen Rauschens heben jeden
Bildpunkt um rund 30 Stufen an. Gemessen: rgb(56,44,58) statt der
berechneten rgb(20,26,38), und über einer hellen Stelle des
Motivs rgb(85,83,81). Die Karte sah dadurch durchsichtig aus,
obwohl sie zu 95 % deckt.
Derselbe Fehler wie an der Anmeldekarte heute Nachmittag, und
genau derselbe Grund: Körnung gehört auf eine EIGENE Ebene mit
`mix-blend-mode: overlay` und 3 bis 4 Prozent -- so wie bei den
Kacheln der Startseite. Auf einer geteilten Ebene ist sie kein
Material, sondern ein grauer Schleier. */
opacity: .5;
}
.zustand > * { position: relative; z-index: 1; }
/* Der Zustand steckt in EINER Größe. Die beiden Regeln darunter setzen
nur noch sie -- vorher standen Rand und Fläche zweimal getrennt da
und konnten auseinanderlaufen. */
.zustand[data-zustand="alt"] { --z: var(--k-mittel); }
.zustand[data-zustand="fehler"] { --z: var(--k-warn); }
/* Die Kennzahlen darunter als eingelassene Felder statt als bloße
Aufzählung -- so liest man sie als Anzeige und nicht als Fließtext. */
.zustand__daten {
gap: 10px;
}
.zustand__daten li {
padding: 9px 12px;
border-radius: var(--radius-klein);
background: rgba(0, 0, 0, .28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
align-items: baseline;
}
/* ---------- Die Regelkarten ------------------------------------------ */
.regeln { gap: 12px; }
.regel {
position: relative;
overflow: hidden;
padding: 16px 18px 16px 20px;
border-radius: 3px 16px 16px 3px;
border-color: rgba(150, 186, 220, .12);
background:
linear-gradient(90deg,
color-mix(in srgb, var(--akzent) 13%, transparent) 0%,
color-mix(in srgb, var(--akzent) 4%, transparent) 16%,
transparent 40%),
linear-gradient(163deg,
rgba(21, 28, 41, .95) 0%,
rgba(11, 15, 24, .95) 62%,
rgba(8, 11, 18, .95) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .075),
inset 0 -1px 0 rgba(0, 0, 0, .45),
0 2px 4px -2px rgba(0, 0, 0, .5),
0 12px 26px -18px rgba(0, 0, 0, .85);
transition: border-color var(--tempo), transform var(--tempo), box-shadow var(--tempo);
}
/* Die ruhige Schiene: 3 px, kein Leuchten. Neun leuchtende Schienen
nebeneinander ergäben einen Zaun -- hier zählt, dass die Karten eine
Reihe bilden, nicht dass jede für sich strahlt. */
.regel::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
border-radius: 3px 0 0 3px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--akzent) 78%, transparent) 0%,
color-mix(in srgb, var(--akzent) 40%, transparent) 100%);
opacity: .6;
transition: opacity var(--tempo);
}
.regel::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
border-radius: inherit;
background-image: var(--koernung);
background-size: 140px 140px;
opacity: .03;
mix-blend-mode: overlay;
}
.regel > * { position: relative; z-index: 1; }
/* Beim Überfahren hebt sich die Karte an und ihre Schiene brennt --
dieselbe Bewegung wie bei den Kacheln der Startseite, damit man nicht
zwei Oberflächen lernt. Angeklickt wird hier nichts; das Anheben sagt
nur "das gehört zusammen". */
.regel:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--akzent) 30%, rgba(150, 186, 220, .16));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .10),
inset 0 -1px 0 rgba(0, 0, 0, .45),
0 4px 9px -4px rgba(0, 0, 0, .55),
0 18px 36px -20px rgba(0, 0, 0, .9);
}
.regel:hover::before { opacity: 1; }
.regel__name { margin: 0 0 6px; font-size: .96rem; font-weight: 700; color: #eaf2fb; }
.regel__text { color: var(--text-leise); }
@media (prefers-reduced-motion: reduce) {
.regel, .regel:hover { transform: none; }
}
@media (forced-colors: active) {
.zustand, .regel { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
.zustand::after, .regel::after { display: none; }
}
/* =====================================================================
DIE KI-KACHEL bekommt dasselbe Material wie der Sicherungsblock.
Sie stand als einzige Fläche dieser Seite noch flach da. Zwei
Materialien auf einer Seite wirken zusammengesucht -- und ausgerechnet
die oberste Kachel hätte den ersten Eindruck gemacht.
===================================================================== */
.ki-kasten {
--z: var(--violett);
position: relative;
overflow: hidden;
border-radius: 4px 20px 20px 4px;
background:
linear-gradient(90deg,
color-mix(in srgb, var(--z) 24%, transparent) 0%,
color-mix(in srgb, var(--z) 8%, transparent) 12%,
color-mix(in srgb, var(--z) 3%, transparent) 26%,
transparent 46%),
linear-gradient(163deg,
rgba(23, 31, 45, .95) 0%,
rgba(11, 15, 24, .95) 58%,
rgba(8, 11, 18, .95) 100%);
border-color: color-mix(in srgb, var(--z) 20%, rgba(150, 186, 220, .13));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .10),
inset 0 -1px 0 rgba(0, 0, 0, .50),
0 2px 5px -2px rgba(0, 0, 0, .55),
0 16px 34px -20px rgba(0, 0, 0, .88);
}
.ki-kasten::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(--z) 55%, #fff) 0%,
var(--z) 26%,
color-mix(in srgb, var(--z) 48%, transparent) 100%);
box-shadow:
0 0 9px 0 color-mix(in srgb, var(--z) 55%, transparent),
3px 0 20px -3px color-mix(in srgb, var(--z) 42%, transparent);
z-index: 2;
}
.ki-kasten::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
border-radius: inherit;
background:
linear-gradient(112deg,
transparent 24%,
rgba(255, 255, 255, .045) 40%,
rgba(255, 255, 255, .08) 47%,
rgba(255, 255, 255, .025) 55%,
transparent 70%);
/* KEINE Körnung auf DIESER Ebene (07.09.2026, gemessen).
Sie stand hier als zweite Schicht und hat die Deckkraft der
Spiegelung geerbt -- 50 % eines mittelgrauen Rauschens heben jeden
Bildpunkt um rund 30 Stufen an. Gemessen: rgb(56,44,58) statt der
berechneten rgb(20,26,38), und über einer hellen Stelle des
Motivs rgb(85,83,81). Die Karte sah dadurch durchsichtig aus,
obwohl sie zu 95 % deckt.
Derselbe Fehler wie an der Anmeldekarte heute Nachmittag, und
genau derselbe Grund: Körnung gehört auf eine EIGENE Ebene mit
`mix-blend-mode: overlay` und 3 bis 4 Prozent -- so wie bei den
Kacheln der Startseite. Auf einer geteilten Ebene ist sie kein
Material, sondern ein grauer Schleier. */
opacity: .5;
}
.ki-kasten > * { position: relative; z-index: 1; }
/* Der Zustand steckt wieder in EINER Größe. */
.ki-kasten[data-zustand="laeuft"] { --z: var(--violett); }
.ki-kasten[data-zustand="weg"] { --z: var(--k-warn); }
.ki-kasten__daten { gap: 10px; }
.ki-kasten__daten li {
padding: 9px 12px;
border-radius: var(--radius-klein);
background: rgba(0, 0, 0, .28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
align-items: baseline;
}
@media (forced-colors: active) {
.ki-kasten { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
.ki-kasten::after { display: none; }
}
/* =====================================================================
DAS LOESCHKONZEPT (15.09.2026)
Eine Zeile je Datenart. Die Kante links sagt die Sorte: geloescht,
anderswo geloescht, bleibt. Farbe ist dabei NICHT die einzige
Auskunft -- daneben steht das Wort. Wer Farben schlecht sieht, liest
dasselbe.
===================================================================== */
.aufb {
margin: 0 0 10px; padding: 13px 16px;
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
border: 1px solid var(--rand);
border-left: 3px solid var(--rand-hell);
}
.aufb[data-art="raeumen"] { border-left-color: color-mix(in srgb, #cc9451 70%, transparent); }
.aufb[data-art="fremd"] { border-left-color: color-mix(in srgb, #8ec9ff 55%, transparent); }
.aufb[data-art="bleibt"] { border-left-color: color-mix(in srgb, #668e6e 65%, transparent); }
.aufb__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.aufb__was { margin: 0; font-size: .95rem; font-weight: 640; color: var(--text); }
.aufb__art {
font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--text-still);
}
.aufb__frist {
margin-left: auto; font-size: .8rem; color: var(--text-leise);
font-variant-numeric: tabular-nums;
}
.aufb__zeile {
margin: 7px 0 0; max-width: 76ch;
font-size: .83rem; line-height: 1.6; color: var(--text-leise);
}
.aufb__grund {
margin: 6px 0 0; font-size: .76rem; color: var(--text-still); font-style: italic;
}
.aufb__zahl {
margin: 9px 0 0; font-size: .8rem; font-weight: 640; color: var(--text-leise);
font-variant-numeric: tabular-nums;
}
.aufb__zahl[data-offen="ja"] { color: #d8a76a; }
.aufb__zahl[data-unklar="ja"] { color: var(--text-still); font-style: italic; font-weight: 500; }
.aufb__letzte { margin: 14px 0 0; font-size: .8rem; color: var(--text-still); }
@media (max-width: 560px) {
.aufb__frist { margin-left: 0; width: 100%; }
}
Reference in New Issue View Git Blame Copy Permalink