DogFatherGitandClaude Opus 5
b31bd9b515
VanVan im Support, Meldung #11, VIERMAL gemeldet: „Hier im Supportbereich kann man immer nur ein Bild hinzufuegen bei einer Meldung. 2-3 waeren besser." Und in der zweiten Runde der Satz, auf den es ankommt: „wenn man es nacheinander versucht hinzuzufuegen wird das Bild immer nur ersetzt." EINE TABELLE STATT NEUER SPALTEN `support_bilder` haelt ab jetzt JEDES Supportbild -- das der Meldung (`runde_nr` NULL) und das einer Antwort (`runde_nr` = Runde). Die Alternative waere `bild2_datei`, `bild3_datei` gewesen, und beim vierten Bild wieder. Eine Zeile je Bild kennt keine Obergrenze im Schema; die Grenze steht an EINER Stelle im Code (`BILDER_MAX = 3`) und kommt von dort in die Oberflaeche, statt dort ein zweites Mal zu stehen. DIE ACHT VORHANDENEN BILDER WANDERN MIT. Ohne diesen Schritt haette die neue Tabelle ab heute recht und die alten Bilder waeren unsichtbar -- ohne Fehler, ohne rote Zeile, nur acht leere Karten. Der Umzug steht NACH der Spaltennachruestung: Er liest `urteil_bild_datei`, und die gibt es in einer bestehenden Datenbank erst, nachdem sie ergaenzt wurde. Stuende er davor, scheiterte er genau dort, wo es darauf ankommt -- live, waehrend lokal alles gruen bliebe, weil jede Pruefung ihre Datenbank frisch anlegt. DREI BILDER IN EINER ANFRAGE `x-bilder: 20481,15320` sagt, wo zu schneiden ist, der Rumpf ist die Aneinanderreihung. `multipart/form-data` haette einen Zerleger gebraucht, den dieses Haus nicht hat; drei Anfragen nacheinander haetten den Zustand „Meldung da, Bild zwei laedt noch" erzeugt -- genau den, gegen den die Kommentare an dieser Route schon vorher argumentieren. Die Summe muss auf das Byte stimmen, und jedes Stueck wird einzeln an seinen ersten Bytes erkannt: Wer falsch schneidet, bekommt eine Absage, kein verfaelschtes Bild. Ohne den Kopf gilt der ganze Rumpf als ein Bild -- derselbe Satz mit einer Laenge, damit eine Seite aus dem Zwischenspeicher weiterlaeuft. EINE ROUTE STATT DREI. `/:id/bild` und `/:id/runde/:nr/bild` sind weg; es gibt `/:id/bild/:bid`. Wohin ein Bild gehoert, steht in seiner Zeile -- der Weg muss es nicht wiederholen. Die Meldungsnummer bleibt trotzdem im Pfad: Sie ist die Sichtbarkeitsfrage, und beides muss zusammenpassen (gemessen). ZWEI FUNDE, DIE DIE PRUEFUNG GEMACHT HAT UND NICHT ICH 1. UEBER DIE SEITE KAM GAR KEIN BILD MEHR AN. Beim Melden stand kein `Content-Type`. Das ging gut, solange der Rumpf eine einzelne Datei war -- ein `File` bringt seinen Typ mit. Ein `Blob` aus mehreren hat keinen, `fetch` schickt die Zeile dann gar nicht, `express.raw` fuehlt sich nicht zustaendig, und der Server bekam einen leeren Rumpf. Die Meldung waere durchgegangen, der Text angekommen, die Bilder weg -- ohne Fehlermeldung. Alle Pruefungen am Server waren dabei gruen; gefunden hat es erst der echte Browser. 2. DAS KREUZ DES DRITTEN BILDES LAG AUF DEM ZWEITEN. Der Entfernen-Knopf ist 44 px breit und absolut gesetzt, der Kasten aber nur so breit wie sein Bild. Bei einem schmalen Bild ragt er darueber hinaus -- wer „das zweite weg" antippt, loescht das dritte. `min-width`/`min-height` loesen das an der Ursache: Ein Kasten ist nie schmaler als der Knopf in ihm. WAS ICH FALSCH ANGENOMMEN HATTE: Ich hatte eingebaut, dass ein Nachtrag in derselben Runde die Bilder ersetzt. Die Pruefung dazu wurde rot -- zu Recht: Eine zweite Antwort in derselben Runde kann es nicht geben, die erste verlaesst den Stand „wartet". Der Code waere nie gelaufen und damit nie pruefbar gewesen. Er ist weg; an seiner Stelle steht der Beweis, dass er nicht fehlt. DREI WEITERE ROTE ZEILEN, DIE NICHT ZU DIESEM UMBAU GEHOERTEN * `manager-ziele.js` hatte einen ZWEITEN Notnagel (`frageNach ? … : confirm(…)`). `nachfrage.js` hat denselben laengst, und zwar mit dem vollstaendigen Text; der hiesige war der kuerzere und haette gewonnen. Zwei Antworten auf dieselbe Frage -- gemeldet von `pruef-nachfrage`. * Zwei Mittelpunkte in `reaktion.css` standen woertlich im `content`. Sie liegen im Latin-1-Block, wo `pruef-zeichen` die Truemmer einer verunglueckten Kodierung sucht. Jetzt als Escape -- im Browser nachgemessen, es steht Zeichen fuer Zeichen dasselbe da. * Das Aufraeumen nach 90 Tagen loeschte nur das EINE Bild der Meldung; die Bilder aus den Antwortrunden blieben ohne Zeile auf der Platte liegen. Die Liste kommt jetzt aus einer Abfrage statt aus einer Spalte und kann deshalb nicht wieder unvollstaendig sein. GEPRUEFT pruef-support 78 -> 104 ok darunter: der Umzug der alten Bilder auf einer eigenen Wegwerf-Datenbank -- zweimal und dreimal gestartet, nichts verdoppelt, Datum von damals erhalten pruef-support-bilder NEU, 36 ok (echter Browser) dreimal nacheinander waehlen ergibt drei, das vierte wird mit einem Satz abgelehnt, dasselbe zaehlt nicht doppelt, einzeln entfernen laesst die anderen stehen, alle drei laden wirklich (naturalWidth), Kreuze 44x44 und keines verdeckt (mit Gegenprobe per Deckel), nichts ragt auf 390 px heraus pruef-nachfrage 69 -> 74 ok pruef-struktur 102 ok, 413 Routen (vorher 414: zwei weg, eine neu) pruef-zeichen 7 ok (vorher 1 Fehler) pruef-aufbewahrung 45 ok pruef-manager-ziele 216 ok pruef-ports 10 ok · pruef-portnummern 41 ok (die neue Pruefdatei verschiebt die abgeleiteten Nummern) NUR DAS AGENTURHAUS IST BETROFFEN. Die Supportseite liegt unter `/workspace`; am Crew-Haus aendert sich keine Zeile. Co-Authored-By: Claude Opus 5 <[email protected]>
747 lines
31 KiB
CSS
747 lines
31 KiB
CSS
/* ===================================================================
|
|
SUPPORT (24.09.2026)
|
|
|
|
Filipe: „es soll alles hoch profissionell gemacht werden aber so
|
|
einfach wie möglich, will nichts kompliziertes oder zu viel. kurz
|
|
und knapp und extrem geil."
|
|
|
|
Deshalb kein eigenes Aussehen: Kästen, Knöpfe und Marken kommen aus
|
|
start.css und module.css, so wie auf jeder anderen Seite. Hier steht
|
|
nur, was es woanders nicht gibt — das Melde-Feld, die Bildvorschau,
|
|
die Karte einer Meldung und das Zahlenband des Eingangs.
|
|
|
|
Eine eigene Farbwelt hätte die Seite fremd wirken lassen. Wer im
|
|
schlechtesten Moment etwas meldet, soll nicht zusätzlich merken,
|
|
dass er woanders ist.
|
|
=================================================================== */
|
|
|
|
.s-titel {
|
|
font-size: 1.05rem; font-weight: 700; letter-spacing: .01em;
|
|
margin: 0 0 12px;
|
|
}
|
|
.s-zahl {
|
|
display: inline-block; margin-left: 8px; padding: 1px 9px;
|
|
border-radius: 999px; font-size: .8rem; font-weight: 700;
|
|
background: color-mix(in srgb, var(--akzent) 15%, transparent);
|
|
color: var(--akzent);
|
|
}
|
|
|
|
/* ---------- Melden ------------------------------------------------- */
|
|
|
|
.s-melden {
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
padding: 18px 18px 16px;
|
|
margin-bottom: 22px;
|
|
}
|
|
/* Für die Leitung rutscht der Melde-Kasten unter den Eingang.
|
|
|
|
NICHT ueber `order` (24.09.2026, nachgemessen): `.inhalt` ist in
|
|
start.css ein gewoehnlicher Block, kein Flex-Behaelter -- `order`
|
|
haette dort gar nichts getan, und die Klasse waere eine Regel
|
|
gewesen, die aussieht, als wirke sie. Verschoben wird der Kasten
|
|
deshalb im DOM (support.js), und dieser Abstand gilt dann. */
|
|
.s-melden--unten { margin-top: 26px; margin-bottom: 0; }
|
|
|
|
.s-feld { display: block; }
|
|
.s-feld__schild {
|
|
display: block; margin-bottom: 6px;
|
|
font-size: .78rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.s-melden textarea {
|
|
width: 100%; box-sizing: border-box;
|
|
padding: 11px 12px;
|
|
font: inherit; font-size: .95rem; line-height: 1.5;
|
|
color: var(--text);
|
|
background: var(--grund);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
resize: vertical; min-height: 96px;
|
|
}
|
|
.s-melden textarea:focus {
|
|
outline: 2px solid var(--akzent); outline-offset: 1px;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.s-bild {
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
margin-top: 12px;
|
|
}
|
|
.s-bild__name { font-size: .8rem; color: var(--text-still); }
|
|
|
|
/* ===== BIS ZU DREI VORSCHAUEN (02.10.2026) =========================
|
|
|
|
VanVan, Meldung #11: „2-3 waeren besser." Aus einem Bild wird eine
|
|
Reihe -- sie bricht um, statt schmal zu werden: Drei auf 280 Pixel
|
|
gequetschte Bildschirmfotos zeigen nichts mehr, und genau das Zeigen
|
|
ist der Zweck der Vorschau.
|
|
|
|
KLEINER, WENN ES MEHRERE SIND, steht hier NICHT als eigene Regel:
|
|
`max-height` gilt fuer alle gleich, und der Umbruch erledigt den
|
|
Rest. Eine Sonderregel „ab zwei Bildern 140 px" waere eine zweite
|
|
Zahl, die beim naechsten Mal vergessen wird. */
|
|
.s-vorschau {
|
|
margin-top: 12px;
|
|
display: flex; flex-wrap: wrap; gap: 10px;
|
|
}
|
|
/* ==== DER KASTEN MUSS SEIN EIGENES KREUZ TRAGEN (02.10.2026) ======
|
|
|
|
Gefunden von `pruef-support-bilder`, nicht beim Nachdenken: Beim
|
|
Klick auf das Kreuz des ZWEITEN Bildes meldete Playwright, das
|
|
Kreuz des DRITTEN liege davor. Grund: Das Kreuz ist 44 px breit
|
|
und absolut gesetzt, der Kasten aber nur so breit wie sein Bild.
|
|
Bei einem schmalen Bild -- ein Ausschnitt, ein hochkantes Foto in
|
|
Briefmarkengroesse -- ragt das Kreuz ueber den Kasten hinaus und
|
|
legt sich auf den Nachbarn. Wer dann „das zweite weg" antippt,
|
|
loescht das dritte.
|
|
|
|
`min-width` und `min-height` loesen das an der Ursache: Ein Kasten
|
|
ist nie schmaler als der Knopf, der in ihm liegt. */
|
|
.s-vorschau__eins {
|
|
position: relative; display: block;
|
|
min-width: 56px; min-height: 56px;
|
|
}
|
|
.s-vorschau img {
|
|
display: block; max-width: 100%; max-height: 200px;
|
|
width: auto; height: auto;
|
|
border-radius: var(--radius-klein);
|
|
border: 1px solid var(--rand);
|
|
}
|
|
/* DAS KREUZ GEHOERT ZUM BILD, nicht in eine Liste darunter. Wer das
|
|
dritte Bild falsch erwischt hat, trifft es dort, wo er hinsieht.
|
|
|
|
44 PIXEL, wie jeder Knopf im Haus -- auf dem Bild liegend, deshalb
|
|
mit eigenem dunklem Grund: Ein helles Kreuz auf einem hellen
|
|
Bildschirmfoto waere unsichtbar. */
|
|
.s-vorschau__weg {
|
|
position: absolute; top: 4px; right: 4px;
|
|
min-width: 44px; min-height: 44px;
|
|
display: grid; place-items: center;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 999px;
|
|
background: rgba(10, 14, 20, .78);
|
|
color: var(--text);
|
|
font-size: 1rem; line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
.s-vorschau__weg:hover,
|
|
.s-vorschau__weg:focus-visible {
|
|
background: rgba(10, 14, 20, .92);
|
|
border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand));
|
|
}
|
|
|
|
.s-knopfreihe {
|
|
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
|
margin-top: 14px;
|
|
}
|
|
.s-hinweis { font-size: .83rem; color: var(--text-still); }
|
|
|
|
/* ---------- Der Eingang -------------------------------------------- */
|
|
|
|
.s-eingang__kopf {
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
gap: 16px; flex-wrap: wrap;
|
|
}
|
|
|
|
/* Das Zahlenband: je Stand eine Zahl gross, das Wort klein darunter.
|
|
Dieselbe Bauart wie in den Personenkacheln -- man vergleicht mit dem
|
|
Auge, statt eine Zeile zu lesen. */
|
|
/* Das Zahlenband: je Stand eine Zahl gross, das Wort klein darunter --
|
|
und seit dem 25.09.2026 jede in einem eigenen kleinen Feld. Drei
|
|
nackte Zahlen nebeneinander lasen sich als EINE Angabe ("0 1 0");
|
|
mit Rand und Fase sind es drei Auskuenfte. */
|
|
.s-bilanz { display: flex; gap: 10px; flex-wrap: wrap; }
|
|
.s-bilanz__feld {
|
|
display: flex; flex-direction: column; gap: 1px;
|
|
min-width: 68px; padding: 8px 13px 7px;
|
|
border: 1px solid var(--rand);
|
|
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
|
|
background: linear-gradient(163deg,
|
|
rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .012) 100%);
|
|
}
|
|
.s-bilanz__zahl {
|
|
font-size: 1.42rem; font-weight: 700; line-height: 1.1; color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.s-bilanz__wort {
|
|
font-size: .72rem; color: var(--text-still);
|
|
letter-spacing: .04em; text-transform: uppercase;
|
|
}
|
|
/* EINE NULL IST KEINE WARNUNG. Vorher war die Zahl bei "neu" IMMER
|
|
rot -- auch die 0, und damit stand dauerhaft ein roter Punkt auf der
|
|
Seite, an dem nichts war. Eine Warnung, die immer kommt, ist keine
|
|
Warnung mehr; dieselbe Erkenntnis steht im Projektgedaechtnis vom
|
|
03.09.2026. `data-leer` setzt support.js. */
|
|
.s-bilanz__feld[data-stand="neu"]:not([data-leer="ja"]) .s-bilanz__zahl { color: var(--warn); }
|
|
.s-bilanz__feld[data-stand="neu"]:not([data-leer="ja"]) {
|
|
border-color: color-mix(in srgb, var(--warn) 38%, var(--rand));
|
|
background: linear-gradient(163deg,
|
|
color-mix(in srgb, var(--warn) 9%, transparent) 0%,
|
|
rgba(255, 255, 255, .012) 100%);
|
|
}
|
|
|
|
.s-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
|
|
.s-filter__knopf {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 6px 13px; border-radius: 999px;
|
|
font: inherit; font-size: .84rem; font-weight: 600;
|
|
color: var(--text-still);
|
|
background: transparent;
|
|
border: 1px solid var(--rand);
|
|
cursor: pointer;
|
|
}
|
|
.s-filter__knopf:hover { color: var(--text); border-color: var(--akzent); }
|
|
.s-filter__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
.s-filter__knopf[aria-pressed="true"] {
|
|
color: var(--akzent);
|
|
border-color: var(--akzent);
|
|
background: color-mix(in srgb, var(--akzent) 12%, transparent);
|
|
}
|
|
.s-filter__zahl { font-size: .78rem; opacity: .8; }
|
|
|
|
/* ---------- Eine Meldung ------------------------------------------- */
|
|
|
|
/* =====================================================================
|
|
DIE MELDEKARTE IM HAUS-STIL (25.09.2026)
|
|
|
|
Filipe zum Bildschirmfoto des Eingangs: "lass das bitte auch geiler
|
|
aussehen bitte."
|
|
|
|
WAS VORHER DA WAR: ein flacher Kasten mit runden Ecken und einem
|
|
3 px breiten Strich links. Funktional richtig -- aber die einzige
|
|
Flaeche im Haus, die weder die Fase noch die Leuchtschiene traegt.
|
|
Neben einer Kachel oder einem Dialog sah sie aus wie aus einer
|
|
anderen Anwendung.
|
|
|
|
UEBERNOMMEN WIRD, WAS ES SCHON GIBT, nicht etwas Neues erfunden:
|
|
dieselbe `--fase` wie ueberall, dieselbe Bauart der Leuchtschiene
|
|
wie an `.dialog` und an jeder Kachel, derselbe dunkle Verlauf. Eine
|
|
zweite Formensprache waere ein zweites Haus.
|
|
|
|
DIE SCHIENE TRAEGT DIE STANDFARBE (`--s`) und nicht den Akzent: An
|
|
ihr liest man ab, ob etwas neu ist, bevor man ein Wort liest. Sie
|
|
ist gedeckt beigemischt, nicht als Leuchtbalken -- augenschonend
|
|
ist Vorgabe, nicht Geschmack.
|
|
===================================================================== */
|
|
.s-karte {
|
|
--s: var(--text-still);
|
|
position: relative;
|
|
padding: 16px 18px 15px 22px;
|
|
margin-bottom: 12px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 0;
|
|
/* Dieselbe Fase wie an Kachel und Dialog. Wer sie spaeter aendert,
|
|
aendert sie an EINER Stelle -- `--fase` steht im Grundblatt. */
|
|
clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
|
|
background:
|
|
linear-gradient(90deg,
|
|
color-mix(in srgb, var(--s) 13%, transparent) 0%,
|
|
color-mix(in srgb, var(--s) 4%, transparent) 16%,
|
|
transparent 44%),
|
|
linear-gradient(163deg, #131b27 0%, #0b1017 62%, #080c13 100%);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .07),
|
|
inset 0 -1px 0 rgba(0, 0, 0, .45),
|
|
0 14px 30px -20px rgba(0, 0, 0, .9);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Die Leuchtschiene -- dieselbe Bauart wie an `.dialog`, nur in der
|
|
Farbe des Stands. Sie ersetzt den alten flachen Strich links. */
|
|
.s-karte::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg,
|
|
color-mix(in srgb, var(--s) 52%, #fff) 0%,
|
|
var(--s) 24%,
|
|
color-mix(in srgb, var(--s) 42%, transparent) 100%);
|
|
box-shadow:
|
|
0 0 8px 0 color-mix(in srgb, var(--s) 45%, transparent),
|
|
3px 0 18px -4px color-mix(in srgb, var(--s) 34%, transparent);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Beim Daruebergehen tritt die Karte einen Schritt vor -- ohne
|
|
Bewegung, ohne Aufblitzen. Nur Rand und Schatten. */
|
|
.s-karte:hover {
|
|
border-color: color-mix(in srgb, var(--s) 32%, var(--rand));
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .09),
|
|
inset 0 -1px 0 rgba(0, 0, 0, .45),
|
|
0 18px 38px -20px rgba(0, 0, 0, .95);
|
|
}
|
|
.s-karte[data-stand="neu"] { --s: var(--warn); }
|
|
.s-karte[data-stand="in_arbeit"] { --s: var(--akzent); }
|
|
/* --k-gut ist die Hausfarbe fuer "passt, erledigt, freigegeben"
|
|
(gate.css). Gemessen nachgesehen, nicht geraten: --gut gibt es
|
|
nicht, und ein Ersatzwert in Klammern haette hier still eine
|
|
sechste Gruenschattierung ins Haus gebracht. */
|
|
.s-karte[data-stand="erledigt"] { --s: var(--k-gut); opacity: .82; }
|
|
|
|
/* Wer aus einer Benachrichtigung kommt, soll sehen, welche gemeint
|
|
ist -- ohne Blinken, ohne Bewegung. */
|
|
.s-karte[data-hervor="ja"] {
|
|
border-color: var(--akzent);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent);
|
|
}
|
|
|
|
.s-karte__kopf {
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
margin-bottom: 9px;
|
|
}
|
|
.s-marke {
|
|
padding: 2px 10px; border-radius: 999px;
|
|
font-size: .75rem; font-weight: 700; letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
background: color-mix(in srgb, var(--s) 16%, transparent);
|
|
color: var(--s);
|
|
}
|
|
.s-karte__von { font-size: .88rem; font-weight: 600; color: var(--text); }
|
|
.s-karte__zeit { font-size: .78rem; color: var(--text-still); margin-left: auto; }
|
|
|
|
.s-karte__text {
|
|
margin: 0; font-size: .95rem; line-height: 1.55; color: var(--text);
|
|
/* Absätze bleiben erhalten. Wer „Schritt 1 … Schritt 2 …"
|
|
untereinander schreibt, soll es so wiederfinden. */
|
|
white-space: pre-wrap; overflow-wrap: anywhere;
|
|
}
|
|
.s-karte__wo { margin: 8px 0 0; font-size: .78rem; color: var(--text-still); }
|
|
|
|
/* MEHRERE BILDER STEHEN NEBENEINANDER und brechen um (02.10.2026).
|
|
Hier stand nur ein `margin-top` -- ein Kasten fuer genau ein Bild.
|
|
|
|
DIE SCHRANKE IST DIE BREITE, nicht die Anzahl: 340 Pixel halten die
|
|
Reihe auch dann zusammen, wenn sie rechts neben dem Text steht
|
|
(ab 760 px, siehe unten). Ohne sie waere die Bildspalte bei drei
|
|
Bildern breiter als der Text daneben. */
|
|
.s-karte__bild { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.s-karte__bild[data-viele] { max-width: 340px; }
|
|
.s-karte__bild[data-viele] img { max-height: 150px; }
|
|
.s-karte__bild img {
|
|
display: block; max-width: 100%; max-height: 300px;
|
|
width: auto; height: auto;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 0;
|
|
/* Kleine Fase, damit das Bild zur Karte gehoert und nicht wie ein
|
|
aufgeklebtes Rechteck darauf liegt. */
|
|
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
|
|
box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .95);
|
|
transition: border-color var(--tempo, .18s);
|
|
}
|
|
/* Dass man es anklicken kann, sagt bisher nur der Mauszeiger-Text.
|
|
Ein heller werdender Rand sagt es beim Daruebergehen -- ohne
|
|
Bewegung, ohne Vergroessern: `prefers-reduced-motion` braucht hier
|
|
nichts abzuschalten, weil sich nichts bewegt. */
|
|
.s-karte__bild a:hover img,
|
|
.s-karte__bild a:focus-visible img {
|
|
border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand));
|
|
}
|
|
.s-karte__bild a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
|
|
|
|
/* ===== DAS BILD ZUR ANTWORT EINER RUNDE (02.10.2026) ===============
|
|
|
|
VanVan: „… damit man nochmal ein Bild anhängen kann, wenn das
|
|
Problem noch besteht oder sich durch die Änderung ein neues
|
|
Problem ergeben hat."
|
|
|
|
KLEINER ALS DAS BILD DER MELDUNG (180 statt 300 Pixel hoch). Das
|
|
erste Bild zeigt, worum es geht; ein Rundenbild zeigt einen
|
|
Zwischenstand, und bei vier Runden stünden sonst vier große Fotos
|
|
untereinander. Angeklickt wird es ohnehin größer -- es ist ein
|
|
Verweis, kein Bilderrahmen.
|
|
|
|
Dieselbe Fase, derselbe heller werdende Rand und dieselbe
|
|
Fokusmarke wie oben: Was gleich funktioniert, soll gleich
|
|
aussehen. */
|
|
/* SEIT DEM 02.10. DERSELBE KASTEN wie oben (`.s-karte__bild`), nur
|
|
kleiner. Hier stand eine eigene Klasse `.s-runde__bild` mit fast
|
|
denselben zwanzig Zeilen -- zwei Stellen, an denen dasselbe steht,
|
|
und beim naechsten Mal wird nur eine davon verbessert. Was bleibt,
|
|
ist der Groessenunterschied, und der ist der ganze Grund: */
|
|
.s-runde .s-karte__bild { margin-top: 8px; }
|
|
.s-runde .s-karte__bild img { max-height: 180px; }
|
|
.s-runde .s-karte__bild[data-viele] img { max-height: 120px; }
|
|
|
|
/* =====================================================================
|
|
DAS BILD NEBEN DEN TEXT, NICHT DARUNTER (25.09.2026)
|
|
|
|
Im Bildschirmfoto stand ein hochkantes Handybild unter zwei Zeilen
|
|
Text -- und rechts daneben eine handbreite leere Flaeche ueber die
|
|
ganze Kartenhoehe. Eine Meldung mit Bild war damit dreimal so hoch
|
|
wie noetig, und im Eingang sah man weniger davon auf einmal.
|
|
|
|
ERST AB 760 px, und das ist der Punkt: Auf dem Handy gibt es keine
|
|
zweite Spalte, dort bleibt alles untereinander. Gefragt wird nach
|
|
dem PLATZ, nicht nach dem Geraet.
|
|
|
|
`auto` UND NICHT EINE FESTE BREITE fuer die Bildspalte: Gibt es kein
|
|
Bild, greift die ganze Regel gar nicht erst (`:has`). Eine feste
|
|
Breite waere eine Luecke bei jeder Meldung ohne Bild -- und die sind
|
|
die Mehrzahl.
|
|
===================================================================== */
|
|
/* `:has(> …)` UND NICHT `:has(…)` -- der Pfeil ist seit dem 02.10.
|
|
nicht mehr Geschmackssache. Seit die Rundenbilder denselben Kasten
|
|
benutzen (siehe oben), traefe die Regel ohne Pfeil auch auf eine
|
|
Karte zu, deren Bild tief im Verlauf steckt: Die Karte bekaeme eine
|
|
zweite Spalte, in der nichts steht, und der Text waere ohne Grund
|
|
halb so breit. Gefragt ist das EIGENE Bild der Meldung, also das
|
|
direkte Kind. */
|
|
@media (min-width: 760px) {
|
|
.s-karte:has(> .s-karte__bild) {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
grid-template-areas:
|
|
"kopf kopf"
|
|
"text bild"
|
|
"wo bild"
|
|
"antwort bild"
|
|
"tun bild";
|
|
column-gap: 20px;
|
|
align-items: start;
|
|
}
|
|
.s-karte:has(> .s-karte__bild) > .s-karte__kopf { grid-area: kopf; }
|
|
.s-karte:has(> .s-karte__bild) > .s-karte__text { grid-area: text; }
|
|
.s-karte:has(> .s-karte__bild) > .s-karte__wo { grid-area: wo; }
|
|
.s-karte:has(> .s-karte__bild) > .s-antwort { grid-area: antwort; }
|
|
.s-karte:has(> .s-karte__bild) > .s-karte__tun { grid-area: tun; }
|
|
.s-karte:has(> .s-karte__bild) > .s-karte__bild {
|
|
grid-area: bild; margin-top: 0; align-self: start;
|
|
}
|
|
/* 180 UND NICHT 260 (gemessen 25.09.2026). Bei 260 war die Karte
|
|
330 px hoch, obwohl der Text zwei Zeilen hat -- die Bildspalte gab
|
|
die Hoehe vor, und links stand eine leere Flaeche. Das Bild ist
|
|
anklickbar ("In voller Groesse ansehen"), eine Vorschau reicht
|
|
also. Ein Handy-Bildschirmfoto ist bei 180 px noch als solches zu
|
|
erkennen; darum geht es an dieser Stelle. */
|
|
.s-karte:has(> .s-karte__bild) > .s-karte__bild img { max-height: 180px; }
|
|
/* UND KLEINER, WENN ES MEHRERE SIND. Bei 180 px stuenden zwei
|
|
nebeneinander und das dritte darunter -- die Karte waere hoeher
|
|
als bei einem einzigen grossen Bild, und genau das sollte die
|
|
zweite Spalte verhindern. Bei 120 px passen drei in zwei Reihen
|
|
in dieselbe Hoehe. */
|
|
.s-karte:has(> .s-karte__bild) > .s-karte__bild[data-viele] img { max-height: 120px; }
|
|
}
|
|
.s-karte__bild a:focus-visible img { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
.s-antwort {
|
|
margin-top: 12px; padding: 10px 12px;
|
|
background: color-mix(in srgb, var(--akzent) 8%, transparent);
|
|
border-left: 2px solid color-mix(in srgb, var(--akzent) 50%, transparent);
|
|
border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
|
|
}
|
|
.s-antwort__schild {
|
|
display: block; margin-bottom: 4px;
|
|
font-size: .75rem; font-weight: 700; letter-spacing: .06em;
|
|
text-transform: uppercase; color: var(--akzent);
|
|
}
|
|
.s-antwort__text {
|
|
margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text);
|
|
white-space: pre-wrap; overflow-wrap: anywhere;
|
|
}
|
|
|
|
.s-karte__tun { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
|
|
|
|
.s-leer {
|
|
padding: 22px 16px; text-align: center;
|
|
font-size: .92rem; color: var(--text-still);
|
|
background: var(--flaeche);
|
|
border: 1px dashed var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
|
|
/* ---------- Am Handy ------------------------------------------------ */
|
|
|
|
@media (max-width: 560px) {
|
|
.s-melden { padding: 15px 14px 14px; }
|
|
.s-karte { padding: 13px 14px 12px; }
|
|
.s-karte__zeit { margin-left: 0; width: 100%; }
|
|
.s-bilanz { gap: 14px; }
|
|
.s-eingang__kopf { gap: 10px; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
=====================================================================
|
|
DER SUPPORT BEKOMMT EINEN EIGENEN STIL (25.09.2026)
|
|
=====================================================================
|
|
=====================================================================
|
|
|
|
Filipe: „ich will dass du bitte diese kachel viel geiler viel
|
|
profissioneller machst, die soll komplett anders aussehen und
|
|
strukturiert sein. mach es wirklich einzigartig und richtig krass
|
|
geil. so dass die leute mehr wie bock haben die zu benutzen. die
|
|
hauptfarbe der kachel soll auch babyblau sein mit bissl lila."
|
|
|
|
---------------------------------------------------------------------
|
|
WARUM AUSGERECHNET HIER DIE FARBE ZAEHLT
|
|
|
|
Dies ist die einzige Seite im Haus, auf der jemand etwas MELDET. Wer
|
|
einen Fehler sieht und ihn nicht meldet, kostet mehr als der Fehler
|
|
selbst -- der bleibt naemlich. Die Huerde ist nicht technisch,
|
|
sondern gefuehlt: Ein Formular in Grau und Orange sieht nach
|
|
Verwaltung aus.
|
|
|
|
BABYBLAU MIT LILA ist Filipes Ansage und zugleich die einzige Farbe,
|
|
die im Haus noch frei war: Gold gehoert Team Dogi, Lavendel seit
|
|
gestern dem Chat, Gruen dem Erledigten. Die Support-Kachel bekommt
|
|
damit eine eigene Stimme -- man erkennt sie, bevor man die
|
|
Ueberschrift liest.
|
|
|
|
---------------------------------------------------------------------
|
|
DIE LEITFARBE WIRD AN EINER STELLE GETAUSCHT
|
|
|
|
Im Chat habe ich gestern zehn Regeln einzeln umgefaerbt und danach
|
|
im Bild gesehen, dass Suchfeld, Knopf und Zaehler weiter golden
|
|
waren -- sie nehmen alle `--akzent`. Einmal an der richtigen Stelle
|
|
ist besser als zehnmal fast.
|
|
|
|
#a8d8ff UND NICHT DAS SATTE BABYBLAU: Die Akzentfarbe ist hier auch
|
|
FLAECHE unter dunkler Schrift (die Zahl im Bilanzfeld, der gewaehlte
|
|
Filter). Nachgerechnet traegt #a8d8ff als Flaeche 11,6:1 und als
|
|
Schrift auf dem dunklen Grund 10,4:1 -- beide Richtungen weit ueber
|
|
den noetigen 4,5. Ein sattes #4aa8ff kaeme als Flaeche auf 6,9 und
|
|
als Schrift auf 4,3; die zweite Richtung waere zu knapp. Eine
|
|
Leitfarbe, die nur in einer von zwei Richtungen traegt, ist keine.
|
|
|
|
---------------------------------------------------------------------
|
|
EINE SCHICHT, KEIN UMBAU DER 362 ZEILEN DARUEBER
|
|
|
|
Alles, was hier nicht steht, gilt unveraendert weiter -- Abstaende,
|
|
Tippziele, Schriftgroessen. Geaendert wird Leitfarbe, Umriss und
|
|
Struktur. Wer den Stil wieder aendern will, aendert diesen Block.
|
|
===================================================================== */
|
|
.inhalt.support-seite {
|
|
--akzent: #a8d8ff;
|
|
--rand: rgba(168, 216, 255, .14);
|
|
--rand-hell: rgba(168, 216, 255, .28);
|
|
/* Die zwei Toene der Seite -- einmal benannt, damit die Regeln
|
|
darunter nicht dreissigmal dieselbe Zahl wiederholen. */
|
|
--s-blau: #a8d8ff;
|
|
--s-lila: #b9a7ff;
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
/* ZWEI LICHTER STATT EINER FLAECHE. Sie liegen hinter allem
|
|
(z-index -1) und ueber dem Buehnenbild: Die Seite bekommt ihre
|
|
Stimmung, ohne dass eine andere im Haus sich aendert. Zusammen unter
|
|
acht Prozent Deckung -- augenschonend ist Vorgabe, und diese Seite
|
|
sieht man im Zweifel im Streit. */
|
|
.inhalt.support-seite::before {
|
|
/* ==== KEIN UEBERSTAND NACH RECHTS (25.09.2026) ================
|
|
|
|
Hier stand `inset: -8% -4% 0`. Die -4 % rechts sahen nach einer
|
|
Kleinigkeit aus und waren keine: Ein absolut gesetztes Element
|
|
zaehlt zur Scrollbreite, auch wenn es `pointer-events: none` und
|
|
`z-index: -1` traegt. Gemessen hat es die ganze Seite zu breit
|
|
gemacht -- 16 px auf dem Handy, 41 px auf dem Tablet quer, 30 px
|
|
auf dem Laptop, also auf JEDER Breite unter 1440 px.
|
|
|
|
Aufgefallen ist es `pruef-breiten`; WAS es war, konnte sie nicht
|
|
sagen („13px Ueberstand []"), denn ein Pseudoelement hat keine
|
|
Box im DOM, die man befragen koennte. Gefunden habe ich es, indem
|
|
ich jedes echte Element gemessen habe -- keines ragte heraus, und
|
|
genau das war der Hinweis.
|
|
|
|
NACH OBEN DARF ES WEITER HINAUS (die -8 %): Dort liegt der Kopf
|
|
der Seite, dorthin soll das Licht reichen, und senkrecht wird
|
|
ohnehin gescrollt. Waagerecht nicht. */
|
|
content: ""; position: absolute; inset: -8% 0 0;
|
|
pointer-events: none; z-index: -1;
|
|
background:
|
|
radial-gradient(52% 40% at 12% 4%, rgba(168, 216, 255, .17), transparent 66%),
|
|
radial-gradient(48% 40% at 88% 70%, rgba(185, 167, 255, .14), transparent 68%);
|
|
filter: blur(16px);
|
|
}
|
|
|
|
/* ---- DIE KARTEN WERDEN KOERPER ------------------------------------
|
|
Aus dem Kasten mit Linie wird eine Karte mit Tiefe: Lichtkante oben,
|
|
weiter Schatten, kein Rahmen. Dieselbe Sprache wie im Chat seit
|
|
gestern -- ein Haus, eine Sprache. */
|
|
.inhalt.support-seite .s-karte {
|
|
border: 0;
|
|
border-radius: 20px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, transparent 22%),
|
|
linear-gradient(168deg, rgba(16, 24, 40, .82) 0%, rgba(8, 11, 20, .9) 100%);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .09),
|
|
inset 0 0 0 1px rgba(255, 255, 255, .035),
|
|
0 26px 54px -32px rgba(6, 10, 30, .95);
|
|
}
|
|
.inhalt.support-seite .s-karte:hover {
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .12),
|
|
inset 0 0 0 1px color-mix(in srgb, var(--s-blau) 22%, transparent),
|
|
0 30px 60px -30px rgba(6, 10, 30, .98);
|
|
}
|
|
/* Die Schiene links traegt die Farbe des Standes -- sie ist das
|
|
Einzige, was man beim Ueberfliegen liest. */
|
|
.inhalt.support-seite .s-karte::before {
|
|
border-radius: 3px;
|
|
background: linear-gradient(180deg,
|
|
color-mix(in srgb, var(--s, var(--s-blau)) 55%, #ffffff) 0%,
|
|
var(--s, var(--s-blau)) 45%,
|
|
color-mix(in srgb, var(--s, var(--s-blau)) 70%, transparent) 100%);
|
|
box-shadow: 0 0 14px -2px color-mix(in srgb, var(--s, var(--s-blau)) 70%, transparent);
|
|
}
|
|
/* WARTET IST EIN EIGENER ZUSTAND UND BEKOMMT EINE EIGENE FARBE. Ohne
|
|
sie saehe „wartet auf den Melder" aus wie „in Arbeit" -- und das ist
|
|
der Unterschied zwischen „wir tun was" und „du bist dran". */
|
|
.inhalt.support-seite .s-karte[data-stand="wartet"] { --s: var(--s-lila); }
|
|
|
|
/* ---- DIE BILANZ ---------------------------------------------------- */
|
|
.inhalt.support-seite .s-bilanz__feld {
|
|
border: 0;
|
|
border-radius: 16px;
|
|
background: linear-gradient(180deg,
|
|
rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .012) 100%);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .07),
|
|
inset 0 0 0 1px rgba(255, 255, 255, .04);
|
|
}
|
|
.inhalt.support-seite .s-bilanz__feld[data-stand="wartet"]:not([data-leer="ja"]) {
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .1),
|
|
inset 0 0 0 1px color-mix(in srgb, var(--s-lila) 38%, transparent);
|
|
}
|
|
.inhalt.support-seite
|
|
.s-bilanz__feld[data-stand="wartet"]:not([data-leer="ja"]) .s-bilanz__zahl {
|
|
color: var(--s-lila);
|
|
}
|
|
|
|
/* ---- DIE FILTER WERDEN PILLEN ------------------------------------- */
|
|
.inhalt.support-seite .s-filter__knopf {
|
|
border-radius: 999px;
|
|
border-color: rgba(255, 255, 255, .07);
|
|
background: rgba(255, 255, 255, .025);
|
|
}
|
|
.inhalt.support-seite .s-filter__knopf[aria-pressed="true"] {
|
|
border-color: transparent;
|
|
color: #08121c;
|
|
background: linear-gradient(140deg, var(--s-blau) 0%, #8fc8ff 52%, var(--s-lila) 100%);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .5),
|
|
0 8px 20px -10px color-mix(in srgb, var(--s-blau) 75%, transparent);
|
|
}
|
|
|
|
/* ---- DAS MELDEFELD WIRD EINE EINLADUNG ----------------------------
|
|
Es ist der Grund, warum es diese Seite gibt -- und sah aus wie jedes
|
|
andere Formular im Haus. Jetzt traegt es die zwei Toene und einen
|
|
Saum oben, der sagt „hier geht es los". */
|
|
.inhalt.support-seite .s-melden {
|
|
position: relative;
|
|
border: 0;
|
|
border-radius: 20px;
|
|
background:
|
|
linear-gradient(180deg, rgba(168, 216, 255, .08) 0%, transparent 26%),
|
|
linear-gradient(168deg, rgba(16, 24, 40, .8) 0%, rgba(8, 11, 20, .9) 100%);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .09),
|
|
inset 0 0 0 1px rgba(255, 255, 255, .035),
|
|
0 26px 54px -32px rgba(6, 10, 30, .95);
|
|
overflow: hidden;
|
|
}
|
|
.inhalt.support-seite .s-melden::before {
|
|
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
|
|
background: linear-gradient(90deg, var(--s-blau) 0%, var(--s-lila) 55%, transparent 100%);
|
|
box-shadow: 0 0 18px -2px color-mix(in srgb, var(--s-blau) 60%, transparent);
|
|
pointer-events: none;
|
|
}
|
|
.inhalt.support-seite .s-melden textarea {
|
|
border-radius: 15px;
|
|
border-color: rgba(255, 255, 255, .07);
|
|
background: rgba(0, 0, 0, .3);
|
|
box-shadow: inset 0 2px 6px -3px rgba(0, 0, 0, .95);
|
|
}
|
|
.inhalt.support-seite .s-melden textarea:focus {
|
|
border-color: color-mix(in srgb, var(--s-blau) 50%, transparent);
|
|
box-shadow:
|
|
inset 0 2px 6px -3px rgba(0, 0, 0, .95),
|
|
0 0 0 3px color-mix(in srgb, var(--s-blau) 14%, transparent);
|
|
}
|
|
|
|
/* ---- DER VERLAUF: EINE RUNDE JE ZEILE (25.09.2026) ----------------
|
|
|
|
Filipe: „mit dem gedanken das manchmal sachen mehrmal nicht sofort
|
|
perfekt sein werden."
|
|
|
|
Die Runden stehen untereinander an einer Linie -- die Form, in der
|
|
man seit jeher einen VERLAUF liest. Ein Kasten je Runde waere bei
|
|
vier Runden ein Stapel Kaesten; die Linie haelt sie zusammen. */
|
|
.inhalt.support-seite .s-verlauf {
|
|
margin: 12px 0 0;
|
|
padding-left: 14px;
|
|
border-left: 2px solid color-mix(in srgb, var(--s-lila) 32%, transparent);
|
|
display: grid; gap: 12px;
|
|
}
|
|
.s-runde__kopf { display: flex; align-items: baseline; gap: 8px; }
|
|
.s-runde__nr {
|
|
font-size: .72rem; font-weight: 800; letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: color-mix(in srgb, #b9a7ff 30%, #ffffff);
|
|
}
|
|
.s-runde__von { font-size: .78rem; color: var(--text-still); }
|
|
.s-runde__antwort {
|
|
margin: 4px 0 0;
|
|
font-size: .9rem; line-height: 1.5; color: var(--text-leise);
|
|
}
|
|
/* DAS URTEIL DES MELDERS STEHT EINGERUECKT DARUNTER -- es ist die
|
|
ANTWORT auf die Zeile darueber, nicht eine zweite Meldung. */
|
|
.s-runde__urteil {
|
|
margin: 6px 0 0; padding-left: 12px;
|
|
border-left: 2px solid rgba(255, 255, 255, .1);
|
|
font-size: .86rem; line-height: 1.45; color: var(--text-still);
|
|
}
|
|
.s-runde__urteil-wort { font-weight: 750; }
|
|
.s-runde__urteil[data-urteil="geht"] .s-runde__urteil-wort { color: #8fe3b0; }
|
|
.s-runde__urteil[data-urteil="nicht"] .s-runde__urteil-wort { color: #ffb3a7; }
|
|
|
|
/* „Geht wieder" ist der Knopf, den man drueckt, wenn alles gut ist --
|
|
er darf als Einziger auf dieser Seite gruen sein. */
|
|
.inhalt.support-seite .s-tun--geht {
|
|
border-color: color-mix(in srgb, #8fe3b0 45%, transparent);
|
|
color: #bff0d3;
|
|
}
|
|
.inhalt.support-seite .s-tun--geht:hover {
|
|
background: rgba(143, 227, 176, .14);
|
|
border-color: #8fe3b0;
|
|
}
|
|
|
|
/* =====================================================================
|
|
„WER IST DRAN?" -- der ruhige Hinweis fuer die Leitung (25.09.2026)
|
|
=====================================================================
|
|
|
|
Liegt eine Meldung beim Melder, ist die Leitung nicht dran. Das
|
|
steht als Satz da und nicht als Warnung: Es ist der NORMALE Lauf
|
|
der Dinge, und eine Seite, die den Normalfall anschreit, hat am
|
|
Ernstfall keine Lautstaerke mehr uebrig.
|
|
|
|
DER PUNKT ATMET, aber langsam (3,2 s) und nur zwischen 40 % und
|
|
100 % Deckkraft -- er soll auffindbar sein, nicht blinken. Bei
|
|
`prefers-reduced-motion` steht er still; das ist Hausregel und hier
|
|
besonders wichtig, weil dieser Hinweis auf jeder wartenden Karte
|
|
steht und sich damit vervielfacht. */
|
|
.inhalt.support-seite .s-karte__wartet {
|
|
display: flex; align-items: center; gap: 9px;
|
|
margin: 12px 0 0;
|
|
font-size: .84rem; line-height: 1.45;
|
|
color: color-mix(in srgb, var(--s-lila, #b9a7ff) 34%, #d7e4f2);
|
|
}
|
|
.inhalt.support-seite .s-karte__wartet-punkt {
|
|
flex: none;
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
background: var(--s-lila, #b9a7ff);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-lila, #b9a7ff) 16%, transparent);
|
|
animation: s-wartet-atmen 3.2s ease-in-out infinite;
|
|
}
|
|
@keyframes s-wartet-atmen {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: .4; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.inhalt.support-seite .s-karte__wartet-punkt { animation: none; }
|
|
}
|
|
@media (forced-colors: active) {
|
|
.inhalt.support-seite .s-karte__wartet-punkt { background: CanvasText; }
|
|
}
|