DogFatherGitandClaude Opus 5
cadab24a5f
Filipe, mit einem Bildschirmfoto des Regelblocks: "man soll die titel
in den texten besser erkennen und sehen was zu was passt. ich will
auch dass man sieht welche geschenke bei dem event zaehlen und so.
ich will alle informationen die moeglich sind wenn man den link
hochlaedt. ... auch wenn man teilt soll es einfach perfekt sein. man
soll alle infos sehen die man braucht. die kacheln von den events
soll auch nicht so lang sein, die soll man aufklappen koennen. genau
wie eine trennung fuer heute, letzte woche letzten monat und so."
DER FEHLER LAG NICHT IM TEXT, SONDERN IN SEINER ANZEIGE. Im Feld
stand die ganze Zeit eine Gliederung -- Hinweise mit "* ", eine
Ueberschrift mit Untertitel hinter einem Gedankenstrich, Absaetze
ohne Zeichen, Aufzaehlungen mit "- ". Die Kachel hat daraus mit
punkteAusText() EINE flache Liste gemacht: jede Zeile derselbe
Strich, alle gleich gross.
gliederung() liest die Gliederung, die schon dasteht, statt
den Text umzuschreiben. Die beiden Kampagnen, die
heute in der Datenbank liegen, sehen dadurch
sofort richtig aus -- ohne Umstellung.
Geschenke kommen aus der gelesenen LISTE, nicht aus dem
Text, und stehen OHNE Aufklappen auf der Kachel.
Aufklappen alles Uebrige hinter einem Druck: gemessen 555 px
weniger je Kachel bei Gipfelstuermer.
Gruppen je Spalte laeuft / kommt / vorbei, Vergangenes
nach diese Woche, dieser Monat, aelter.
NEU GELESEN (stand in allen vier gespeicherten Seiten und wurde nie
angesehen): die Rangliste mit ihren Gruppen ("Superstars" bis
"5. Liga", bei Glow Up "Team Glow"/"Team Shine"), die Beschreibung je
Missionsgruppe, der Steckbrief (Kurznummer, Markt, Sprache, Zone),
der zweite Bildbaustein, und Ueberschriften INNERHALB der Klapptexte
-- "WELCHE LIGA BIN ICH?" hat jetzt sechs eingerueckte Unterpunkte
statt zwoelf gleichrangiger Zeilen.
EVENT_TEXT_MAX 6000 -> 20000. Der Regeltext von Gipfelstuermer ist
7679 Zeichen lang; es fielen bisher jedes Mal rund 1600 Zeichen
echter Inhalt weg. Die Zahl steht jetzt an EINER Stelle.
TEILEN: Was die KAMPAGNE sagt, geht hinaus (Aufgaben, Geschenke,
Regeln) -- wer WIR sind, nicht (Name, Rolle, Haus, Kampagnennummer,
Steckbrief). Und keine Hinweiszeile: "Die Preise konnten nicht
gelesen werden -- bitte nachtragen" ist eine Notiz an DogFather und
hat auf einer Seite, die er in Discord postet, nichts zu suchen.
BERICHTIGT, WEIL NACHGEMESSEN:
- Number(null) ist 0 und 0 ist endlich -- "Feuerwerk" bekam an drei
Stellen "0 Coins" angeschrieben, also eine falsche Preisangabe.
- Ein Kommentar im Leser behauptete, der Wertungszeitraum weiche
vom Kampagnenzeitraum ab. Nachgemessen ist er in allen drei
Seiten mit Rangliste auf die Millisekunde gleich; ich hatte zwei
verschiedene Kampagnen verglichen.
- bild-kampagne.mjs verlangte "jede Kachel traegt den Ton ihrer
Seite" und war damit seit dem 07.10. rot, weil an dem Tag bewusst
das Gegenteil entschieden wurde (Zustandston, Seitenkante). Nicht
aufgefallen, weil nach dem Lauf nur die Zahl der MESSUNGEN notiert
wurde, nicht die der FEHLER.
- .kv-seite > .eintrag-karte wird .kv-seite .eintrag-karte: Die
Karten haengen durch die Gruppen eine Ebene tiefer. Das waere der
fuenfte Direktkind-Selektor gewesen, der nach einem Umbau still
ausfaellt -- diesmal vorher gesehen.
GEPRUEFT: 186 (lesen, +58), 148 (Route/Teilen, +25), 158 (Kachel,
+64), 67 (Agentur, +5), 67 Messungen (Bild, +14), dazu struktur,
css-klassen, zeichen, deutsche-texte, tippziele, lesbarkeit und
haus-trennung (107, unveraendert). Sechs Gegenproben: alle sechs
Sabotagen werden bemerkt, alle Dateien byte-gleich wiederhergestellt.
Co-Authored-By: Claude Opus 5 <[email protected]>
4143 lines
162 KiB
CSS
4143 lines
162 KiB
CSS
/* ===================================================================
|
|
Gemeinsame Ansicht für LIVE, Content, Technik, Community und Schutz.
|
|
=================================================================== */
|
|
|
|
.eintrag-karte {
|
|
padding: 15px 17px; margin-bottom: 10px;
|
|
background: var(--flaeche);
|
|
/* NACHGEMESSEN AM 07.10.2026: `border`, `border-left: 3px` und
|
|
`border-radius` kommen hier NICHT an. Gemessen am lebenden System
|
|
stand an der Karte `border-left-width: 0px`, `border-top-width:
|
|
0px`, `border-radius: 0px` -- module.css setzt fuer die ganze
|
|
Modulliste `border: 0; border-radius: 0`, ist mit (0,2,0) gleich
|
|
stark und wird SPAETER geladen.
|
|
|
|
Damit ist auch die Farbcodierung der Dringlichkeit darunter
|
|
wirkungslos: Die drei Zeilen `[data-dringlich] { border-left-color }`
|
|
faerben einen Rand, den es nicht gibt. Das steht hier als Befund
|
|
und wird fuer die EVENTKARTEN weiter unten geloest (ueber den
|
|
Hintergrund, weil ::before und ::after dem Baukasten gehoeren).
|
|
Fuer die uebrigen Karten bleibt es vorerst stehen -- das waere ein
|
|
eigener Umbau an acht Bereichen, und dafuer gibt es noch kein
|
|
Messgeraet. */
|
|
border: 1px solid var(--rand);
|
|
border-left: 3px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.eintrag-karte[data-dringlich="hoch"] { border-left-color: #d8656e; }
|
|
.eintrag-karte[data-dringlich="mittel"] { border-left-color: #4b6c8a; }
|
|
.eintrag-karte[data-dringlich="niedrig"] { border-left-color: #3c4a5a; }
|
|
.eintrag-karte[data-status="erledigt"] { opacity: .55; }
|
|
|
|
/* DIE KLICKBARE KARTE (19.09.2026) -- nur dort, wo ein Video dahinter
|
|
liegt.
|
|
|
|
Sie muss SAGEN, dass sie klickbar ist, bevor jemand darauf tippt.
|
|
Eine Fläche, die erst beim Berühren verrät, dass sie ein Weg war,
|
|
ist auf dem Handy unsichtbar -- dort gibt es kein Darüberfahren.
|
|
Deshalb der ruhige, dauerhaft sichtbare Rand links: Er steht schon
|
|
da, bevor die Maus kommt.
|
|
|
|
Bewusst KEIN Farbwechsel der Fläche und kein Leuchten. Zwischen
|
|
siebzehn Karten untereinander wäre das Unruhe, und was hier gefragt
|
|
ist, ist eine Einladung, kein Blinken. */
|
|
.eintrag-karte[data-klickbar="ja"] {
|
|
cursor: pointer;
|
|
border-left-color: color-mix(in srgb, var(--akzent, #5aa0e0) 55%, var(--rand));
|
|
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
|
|
}
|
|
.eintrag-karte[data-klickbar="ja"]:hover {
|
|
transform: translateY(-2px);
|
|
border-color: color-mix(in srgb, var(--akzent, #5aa0e0) 34%, var(--rand));
|
|
border-left-color: color-mix(in srgb, var(--akzent, #5aa0e0) 85%, transparent);
|
|
box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .9);
|
|
}
|
|
/* Wer über den Knopf fährt, soll den Knopf spüren und nicht die ganze
|
|
Karte wackeln sehen. */
|
|
.eintrag-karte[data-klickbar="ja"]:has(.videozeile__weg:hover) {
|
|
transform: none;
|
|
}
|
|
/* Das Standbild bekommt denselben Hinweis: Der Zeiger sagt „hier geht
|
|
es weiter", schon bevor man liest. */
|
|
.eintrag-karte[data-klickbar="ja"] .bildstreifen__feld { cursor: pointer; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.eintrag-karte[data-klickbar="ja"] { transition: none; }
|
|
.eintrag-karte[data-klickbar="ja"]:hover { transform: none; }
|
|
}
|
|
|
|
.eintrag-kopf {
|
|
display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
|
|
}
|
|
.eintrag-titel { font-weight: 600; font-size: .96rem; flex: 1 1 240px; }
|
|
|
|
/* ---- DER KARTENKOPF AUF DEM HANDY (18.09.2026) --------------------
|
|
|
|
Am Rechner stehen Etikett, Titel und Zustand nebeneinander, und das
|
|
ist richtig. Auf 412 px hing es dagegen an der Länge des Etiketts:
|
|
Bei „SONSTIGES" passte der Titel noch daneben, und „Offen" rutschte
|
|
in die Zeile darunter. Bei „FÜR DEN STREAM" passte er nicht mehr --
|
|
dann stand das Etikett allein oben und „Offen" plötzlich RECHTS vom
|
|
Titel.
|
|
|
|
Fünf Karten untereinander sahen damit auf drei verschiedene Arten
|
|
aus, ohne dass sich inhaltlich etwas unterschied. Das liest man als
|
|
Unordnung, nicht als Information.
|
|
|
|
Unter 560 px deshalb feste Reihenfolge: die Marken oben
|
|
nebeneinander, der Titel darunter über die volle Breite. Immer
|
|
gleich, unabhängig davon, wie lang das Etikett ist. */
|
|
@media (max-width: 560px) {
|
|
.eintrag-kopf { align-items: center; row-gap: 6px; }
|
|
.eintrag-titel { flex: 1 1 100%; order: 2; }
|
|
.marke-art { order: 1; }
|
|
.wunsch-stand { order: 1; }
|
|
.bewertung { order: 3; }
|
|
}
|
|
|
|
.marke-art {
|
|
padding: 1px 9px; border-radius: 999px;
|
|
background: rgba(63, 189, 245, .14); color: #7fd2fb;
|
|
font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Bewertung als Punktreihe statt als Zahl -- auf einen Blick erfassbar,
|
|
und ohne Sterne, die im Dunkeln flimmern. */
|
|
.bewertung { display: inline-flex; gap: 3px; align-items: center; }
|
|
.bewertung__punkt {
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
background: rgba(150, 186, 220, .22);
|
|
}
|
|
.bewertung__punkt[data-voll="ja"] { background: var(--akzent); }
|
|
|
|
.eintrag-text {
|
|
margin: 9px 0 0; font-size: .87rem; color: var(--text-leise);
|
|
line-height: 1.55; white-space: pre-wrap;
|
|
}
|
|
|
|
.eintrag-fuss {
|
|
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
|
margin-top: 11px; font-size: .77rem; color: var(--text-still);
|
|
}
|
|
.eintrag-knoepfe { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
|
|
|
|
/* =====================================================================
|
|
DER TREFF (11.09.2026)
|
|
|
|
Drei Zusaetze, und nur auf den sieben Brettern der Community.
|
|
|
|
SIE STEHEN IN EINER EIGENEN ZEILE UNTER DEM FUSS und nicht darin.
|
|
Der Fuss ist eine Auskunft (Datum, wer, Stand); hier stehen Dinge,
|
|
die man TUT. Zusammen in einer Reihe waere "von Frida" so breit wie
|
|
"Will ich auch" -- und auf einem Handy laege beides ineinander.
|
|
===================================================================== */
|
|
.treff-knoepfe {
|
|
display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
|
|
margin-top: 10px; padding-top: 10px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
|
|
/* Der Rollenname am Beitrag. Leise, aber nicht versteckt: Er soll
|
|
beim Lesen auffallen, ohne den Beitrag zu ueberschreiben. Deshalb
|
|
dieselbe Groesse wie der Fuss und nur ein kraeftigerer Ton. */
|
|
.treff-rolle {
|
|
color: var(--text-leise);
|
|
font-weight: 600;
|
|
letter-spacing: .01em;
|
|
}
|
|
|
|
/* "Will ich auch". Der einzige Knopf auf diesen Brettern, der keine
|
|
Verwaltung ist, sondern eine Meinung -- er darf deshalb als
|
|
einziger einen Ton tragen.
|
|
|
|
GEDRUECKT WIRD ER RUHIGER, NICHT LAUTER. Der naheliegende Entwurf
|
|
waere ein kraeftiges Leuchten fuer "ich bin dabei". Nur sieht man
|
|
auf einer Wunschliste meist ZEHN Karten gleichzeitig, und wer bei
|
|
der Haelfte mitgestimmt hat, saehe zehn leuchtende Flaechen
|
|
untereinander. Das ist genau das, was diese Seite nicht sein soll
|
|
(Hausregel: augenschonend). Der gedrueckte Zustand bekommt deshalb
|
|
eine gefuellte Flaeche in gedecktem Ton, der ungedrueckte bleibt
|
|
ein Umriss -- unterscheidbar, ohne zu blenden. */
|
|
.treff-will {
|
|
font: inherit; font-size: .8rem; font-weight: 600;
|
|
padding: 6px 12px; border-radius: 999px; cursor: pointer;
|
|
color: var(--text-leise);
|
|
background: transparent;
|
|
border: 1px solid var(--rand-hell);
|
|
transition: background .16s ease, color .16s ease, border-color .16s ease;
|
|
}
|
|
.treff-will:hover:not(:disabled) {
|
|
color: var(--text);
|
|
border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
|
|
}
|
|
.treff-will[aria-pressed="true"] {
|
|
color: var(--text);
|
|
background: color-mix(in srgb, var(--akzent) 14%, transparent);
|
|
border-color: color-mix(in srgb, var(--akzent) 42%, transparent);
|
|
}
|
|
.treff-will:disabled { opacity: .55; cursor: default; }
|
|
|
|
/* Dieselbe Ruecksicht wie ueberall: Wer Bewegung abbestellt hat,
|
|
bekommt keine. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.treff-will { transition: none; }
|
|
}
|
|
|
|
/* Die Filterleiste steht seit 22.09.2026 in gate.css -- sie wird
|
|
inzwischen auf drei Seiten gebraucht, und gate.css laedt jede.
|
|
Sie hier zu lassen hiesse, sie beim vierten Mal wieder zu
|
|
kopieren; genau so ist .knopf-still schon einmal auf einer
|
|
Seite als nacktes Kaestchen erschienen. */
|
|
|
|
|
|
@media (max-width: 620px) {
|
|
.eintrag-knoepfe { margin-left: 0; width: 100%; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
UNTERWEISUNGEN — beidseitig bestaetigen
|
|
|
|
Drei Stufen, drei Farben. Die mittlere ("halb") ist die wichtigste:
|
|
Ein Nachweis, bei dem nur einer unterschrieben hat, ist KEIN Nachweis.
|
|
Wer das nicht sieht, haelt ihn fuer fertig -- und merkt es erst, wenn
|
|
jemand danach fragt. Deshalb bekommt sie eine eigene, warnende Farbe
|
|
und nicht einfach ein blasses Gruen.
|
|
===================================================================== */
|
|
|
|
.schulung { margin: 0 0 30px; }
|
|
.schulung__kopf {
|
|
display: flex; align-items: flex-end; justify-content: space-between;
|
|
gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
|
|
}
|
|
.schulung__unter {
|
|
margin: 4px 0 0; max-width: 68ch;
|
|
font-size: .86rem; line-height: 1.55; color: var(--text-leise);
|
|
}
|
|
.schulung__wahl { display: grid; gap: 4px; min-width: 0; }
|
|
.schulung__liste { display: grid; gap: 11px; }
|
|
|
|
.unterweisung {
|
|
--stufe-ton: var(--text-still);
|
|
position: relative; overflow: hidden;
|
|
padding: 15px 17px 14px;
|
|
border: 1px solid color-mix(in srgb, var(--stufe-ton) 26%, var(--rand));
|
|
border-radius: var(--radius-klein);
|
|
background:
|
|
linear-gradient(90deg, color-mix(in srgb, var(--stufe-ton) 8%, transparent), transparent 55%),
|
|
var(--flaeche);
|
|
}
|
|
.unterweisung::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg, var(--stufe-ton),
|
|
color-mix(in srgb, var(--stufe-ton) 30%, transparent));
|
|
}
|
|
.unterweisung[data-stufe="offen"] { --stufe-ton: #6f89a8; }
|
|
/* Bewusst warnend: halb bestaetigt sieht nach fertig aus, ist es aber
|
|
nicht. Diese Verwechslung ist genau die, die einen Nachweis wertlos
|
|
macht. */
|
|
.unterweisung[data-stufe="halb"] { --stufe-ton: #e0a33c; }
|
|
.unterweisung[data-stufe="fertig"] { --stufe-ton: #4dab77; }
|
|
|
|
.unterweisung__kopf {
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
gap: 14px; margin-bottom: 12px;
|
|
}
|
|
.unterweisung__titel { margin: 0 0 3px; font-size: .98rem; font-weight: 650; color: var(--text); }
|
|
.unterweisung__datei { margin: 0; font-size: .8rem; color: var(--ton, var(--akzent)); }
|
|
.unterweisung__text { margin: 5px 0 0; font-size: .85rem; color: var(--text-leise); }
|
|
.unterweisung__marke {
|
|
flex: none; padding: 3px 11px;
|
|
border: 1px solid color-mix(in srgb, var(--stufe-ton) 36%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--stufe-ton) 12%, transparent);
|
|
color: var(--stufe-ton);
|
|
font-size: .72rem; letter-spacing: .06em;
|
|
}
|
|
|
|
/* Die beiden Unterschriften nebeneinander -- man soll auf einen Blick
|
|
sehen, WER fehlt, nicht nur DASS etwas fehlt. */
|
|
.unterschriften {
|
|
display: grid; gap: 8px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
|
|
margin-bottom: 12px;
|
|
}
|
|
/* =====================================================================
|
|
SIE SIND UNTERSCHRIFTEN -- ALSO SEHEN SIE JETZT AUCH SO AUS
|
|
(screen6, 09.09.2026)
|
|
|
|
Filipe, mit Bildschirmfoto der beiden Felder: "die sollen geiler
|
|
sein."
|
|
|
|
WAS SIE WIRKLICH SIND, stand nur im Klassennamen: Auf einer
|
|
Unterweisung bestaetigen ZWEI Personen, dass sie sie gelesen haben
|
|
-- der Creator und seine Betreuung. Das ist kein Statusfeld, das ist
|
|
eine Gegenzeichnung. Gezeichnet waren sie aber als zwei graue
|
|
Kaesten mit abgerundeten Ecken, die man auf dem dunklen Grund kaum
|
|
sah. Zwei Rechtecke sagen "hier steht etwas". Eine Unterschriftszeile
|
|
sagt "hier fehlt jemand".
|
|
|
|
ZWEI ZUSTAENDE, ZWEI BILDER -- und beide gab es im Code schon als
|
|
`data-da="ja"/"nein"`, nur unterschieden sie sich um einen Hauch
|
|
Gruen:
|
|
|
|
OFFEN eine gestrichelte Linie mit einem leeren Platz darauf.
|
|
Sie WARTET sichtbar. Der Federstrich links davor deutet
|
|
an, wo man ansetzt.
|
|
DA eine durchgezogene gruene Linie, der Name darueber, und
|
|
rechts oben ein gepraegtes Siegel mit Haken -- wie ein
|
|
abgestempeltes Formular.
|
|
|
|
GLEICHE HOEHE IN BEIDEN ZUSTAENDEN, und das ist keine Kosmetik: Die
|
|
beiden Felder stehen nebeneinander in einem Raster. Waere das
|
|
unterschriebene hoeher, spraenge die Karte in dem Moment, in dem
|
|
jemand unterschreibt -- und zwar unter dem Finger dessen, der gerade
|
|
auf den Knopf gedrueckt hat.
|
|
|
|
KEINE ZWEITE FASE. Die Karte drumherum (`.unterweisung`) hat schon
|
|
eine aus der Modulliste. Eine abgeschraegte Ecke IN einer
|
|
abgeschraegten Ecke liest sich als Fehler, nicht als Absicht. Das
|
|
Feld traegt deshalb die andere Formensprache des Hauses: die Linie.
|
|
================================================================== */
|
|
.unterschrift {
|
|
position: relative;
|
|
display: grid; gap: 3px;
|
|
padding: 9px 12px 11px 15px;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: linear-gradient(100deg, rgba(255, 255, 255, .035), transparent 60%);
|
|
}
|
|
/* Der Federstrich links: ein kurzer senkrechter Anstrich, der zeigt,
|
|
wo eine Unterschrift beginnt. Offen ist er blass, gesetzt traegt er
|
|
das Gruen der Bestaetigung. */
|
|
.unterschrift::before {
|
|
content: "";
|
|
position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
|
|
background: rgba(150, 186, 220, .22);
|
|
transition: background .18s ease;
|
|
}
|
|
/* Die Zeile selbst -- unter der Angabe, nicht um sie herum. */
|
|
.unterschrift::after {
|
|
content: "";
|
|
position: absolute; left: 15px; right: 12px; bottom: 6px; height: 0;
|
|
border-bottom: 1px dashed rgba(150, 186, 220, .30);
|
|
}
|
|
|
|
.unterschrift[data-da="ja"] {
|
|
background: linear-gradient(100deg, rgba(95, 201, 154, .11), transparent 62%);
|
|
}
|
|
.unterschrift[data-da="ja"]::before { background: rgba(95, 201, 154, .8); }
|
|
.unterschrift[data-da="ja"]::after {
|
|
border-bottom: 1px solid rgba(95, 201, 154, .55);
|
|
}
|
|
|
|
.unterschrift__wer {
|
|
font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.unterschrift__wann { font-size: .84rem; color: var(--text); }
|
|
.unterschrift[data-da="nein"] .unterschrift__wann { color: var(--text-still); font-style: italic; }
|
|
|
|
/* DAS SIEGEL. Es sitzt in der oberen rechten Ecke des Feldes und ist
|
|
nur da, wenn wirklich unterschrieben wurde.
|
|
|
|
Gebaut aus zwei Radialverlaeufen und einem Haken als Maske -- kein
|
|
Element, kein Bild, kein Zeichensatz. Ein Zeichensatz-Haken (✓) sieht
|
|
in jeder Schrift anders aus und faellt weg, wenn eine fehlt; ein
|
|
`mask-image` mit einem SVG-Pfad sieht ueberall gleich aus.
|
|
|
|
`content: ""` auf einem dritten Pseudoelement geht nicht -- es gibt
|
|
nur zwei. Deshalb haengt es am Wer-Text, der ohnehin oben steht. */
|
|
.unterschrift[data-da="ja"] .unterschrift__wer { position: relative; }
|
|
.unterschrift[data-da="ja"] .unterschrift__wer::after {
|
|
content: "";
|
|
/* INNERHALB des Feldes, nicht daneben. Der erste Anlauf schob es mit
|
|
`translate(100%)` ueber die rechte Kante hinaus -- bei der breiten
|
|
Ansicht sah das gut aus, auf einem schmalen Feld waere es aus der
|
|
Karte gelaufen. Ein Siegel gehoert auf das Blatt, nicht daneben. */
|
|
position: absolute; right: 0; top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 15px; height: 15px; border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .2), transparent 60%),
|
|
radial-gradient(circle at 50% 50%, rgba(95, 201, 154, .3) 55%, rgba(10, 24, 19, .95) 100%);
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(95, 201, 154, .6),
|
|
inset 0 1px 2px -1px rgba(255, 255, 255, .25);
|
|
}
|
|
/* DER HAKEN IM SIEGEL. Als Maske ueber einer hellgruenen Flaeche --
|
|
kein Zeichensatz-Haken (der sieht in jeder Schrift anders aus und
|
|
faellt weg, wenn eine fehlt) und kein Bild (eine Datei mehr fuer
|
|
fuenfzehn Pixel).
|
|
|
|
Er liegt auf `::before` desselben Elements, weil es nur zwei
|
|
Pseudoelemente je Element gibt und `::after` schon die Muenze
|
|
traegt. Beide sind absolut gesetzt und liegen deshalb genau
|
|
uebereinander. */
|
|
.unterschrift[data-da="ja"] .unterschrift__wer::before {
|
|
content: "";
|
|
position: absolute; right: 0; top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 15px; height: 15px;
|
|
z-index: 1;
|
|
background: #a8ecc8;
|
|
-webkit-mask: center / 9px 9px no-repeat
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
mask: center / 9px 9px no-repeat
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.unterschrift::before { transition: none; }
|
|
}
|
|
|
|
.unterweisung__fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
.unterweisung__fest { font-size: .82rem; color: #6fbd95; }
|
|
.unterweisung__wartet { font-size: .82rem; color: #e0b45c; }
|
|
/* Ausgetauschtes Dokument: Das ist der einzige Fall, in dem ein
|
|
abgeschlossener Nachweis seinen Wert verliert -- und dann muss es
|
|
auch laut sein. */
|
|
.unterweisung__warnung {
|
|
padding: 3px 10px;
|
|
border: 1px solid rgba(255, 154, 162, .4); border-radius: 999px;
|
|
background: rgba(255, 154, 162, .1);
|
|
color: var(--warn); font-size: .8rem; font-weight: 600;
|
|
}
|
|
|
|
.schulung__neu {
|
|
margin-top: 18px; padding: 16px 17px;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
.schulung__neu .neu__raster { margin-top: 12px; }
|
|
.schulung__neu .knopf { margin-top: 12px; }
|
|
|
|
@media (max-width: 560px) {
|
|
.schulung__kopf { flex-direction: column; align-items: stretch; }
|
|
.unterweisung__kopf { flex-direction: column; }
|
|
.unterweisung__marke { align-self: flex-start; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
AMPEL UND RUECKMELDUNG
|
|
|
|
Drei Stufen, drei Farben. Die Stufe steht IMMER da -- auch fuer den
|
|
Creator, auch wenn sie "noch nicht angesehen" lautet. Das ist der
|
|
ganze Sinn: Er soll sehen, wo er steht, ohne fragen zu muessen.
|
|
===================================================================== */
|
|
|
|
.ampel {
|
|
--a-ton: #6f89a8;
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
margin-top: 11px; padding-top: 11px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.ampel[data-stufe="gut"] { --a-ton: #4dab77; }
|
|
.ampel[data-stufe="verbessern"] { --a-ton: #e0a33c; }
|
|
.ampel[data-stufe="offen"] { --a-ton: #6f89a8; }
|
|
|
|
.ampel__marke {
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
padding: 3px 11px;
|
|
border: 1px solid color-mix(in srgb, var(--a-ton) 38%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--a-ton) 13%, transparent);
|
|
color: var(--a-ton);
|
|
font-size: .76rem; font-weight: 600;
|
|
}
|
|
.ampel__marke::before {
|
|
content: ""; width: 8px; height: 8px; border-radius: 50%;
|
|
background: var(--a-ton);
|
|
box-shadow: 0 0 8px color-mix(in srgb, var(--a-ton) 70%, transparent);
|
|
}
|
|
.ampel__von { font-size: .76rem; color: var(--text-still); }
|
|
/* Der Grund steht auf einer eigenen Zeile und in voller Breite --
|
|
"noch verbessern" ohne Grund ist nicht umsetzbar, nur entmutigend.
|
|
Deshalb darf er nicht in eine Ecke gequetscht werden. */
|
|
.ampel__grund {
|
|
flex-basis: 100%; margin: 4px 0 0;
|
|
padding: 8px 11px;
|
|
border-left: 2px solid var(--a-ton);
|
|
border-radius: 0 6px 6px 0;
|
|
background: color-mix(in srgb, var(--a-ton) 8%, transparent);
|
|
font-size: .85rem; line-height: 1.5; color: var(--text);
|
|
}
|
|
.ampel .schritt { margin-left: auto; }
|
|
|
|
/* ---------- Der ausgeklappte Bereich ------------------------------------ */
|
|
.rueckmeldung {
|
|
margin-top: 11px; padding: 13px 14px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: rgba(0, 0, 0, .2);
|
|
}
|
|
.rueckmeldung__hinweis {
|
|
margin: 0 0 12px; font-size: .84rem; color: var(--text-leise);
|
|
}
|
|
.rueckmeldung__bewerten { margin-bottom: 14px; }
|
|
.ampel__wahl { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
|
|
.ampel__knopf {
|
|
padding: 8px 14px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
background: var(--flaeche);
|
|
color: var(--text-leise);
|
|
font: inherit; font-size: .84rem; cursor: pointer;
|
|
transition: border-color .18s ease, color .18s ease, background .18s ease;
|
|
}
|
|
.ampel__knopf[data-stufe="gut"]:hover,
|
|
.ampel__knopf[data-stufe="gut"][data-an="ja"] {
|
|
border-color: rgba(77, 171, 119, .5); color: #6fbd95;
|
|
background: rgba(77, 171, 119, .12);
|
|
}
|
|
.ampel__knopf[data-stufe="verbessern"]:hover,
|
|
.ampel__knopf[data-stufe="verbessern"][data-an="ja"] {
|
|
border-color: rgba(224, 163, 60, .5); color: #e0b45c;
|
|
background: rgba(224, 163, 60, .12);
|
|
}
|
|
|
|
/* ---------- Das Gespraech ------------------------------------------------ */
|
|
.nachrichten { display: grid; gap: 8px; margin-bottom: 12px; }
|
|
.nachrichten__leer { margin: 0; font-size: .84rem; color: var(--text-still); }
|
|
.nachricht {
|
|
padding: 9px 12px;
|
|
border: 1px solid var(--rand); border-radius: 9px;
|
|
background: var(--flaeche);
|
|
}
|
|
/* Eigene Nachrichten heben sich ab -- in einem Gespraech will man auf
|
|
einen Blick sehen, was man selbst gesagt hat. */
|
|
.nachricht[data-eigen="ja"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 26%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 7%, var(--flaeche));
|
|
}
|
|
.nachricht__kopf {
|
|
display: flex; align-items: center; gap: 9px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.nachricht__von { font-size: .8rem; font-weight: 650; color: var(--text); }
|
|
.nachricht__wann { font-size: .74rem; color: var(--text-still); }
|
|
.nachricht__weg {
|
|
margin-left: auto;
|
|
width: 24px; height: 24px;
|
|
border: 0; border-radius: 6px;
|
|
background: none; color: var(--text-still);
|
|
font-size: 1rem; line-height: 1; cursor: pointer;
|
|
}
|
|
.nachricht__weg:hover { color: var(--warn); background: rgba(255, 154, 162, .1); }
|
|
.nachricht__text {
|
|
margin: 0; font-size: .87rem; line-height: 1.55; color: var(--text);
|
|
white-space: pre-wrap; overflow-wrap: anywhere;
|
|
}
|
|
|
|
.nachricht-neu { display: grid; gap: 8px; }
|
|
/* 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. */
|
|
.nachricht-neu textarea { width: 100%; min-height: 44px; }
|
|
.nachricht-neu .knopf { justify-self: start; }
|
|
|
|
@media (max-width: 560px) {
|
|
.ampel .schritt { margin-left: 0; }
|
|
.ampel__knopf { flex: 1 1 auto; text-align: center; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
AGENTUR-EVENTS (07.09.2026)
|
|
|
|
Ein Event ist die einzige Eintragsart, die eine LAUFZEIT hat. Alles
|
|
andere in diesen Bereichen ist ein Vermerk zu einem Tag; ein Event
|
|
ist eine Einladung, an der man teilnehmen kann -- oder eben nicht
|
|
mehr. Deshalb ist der Zustand (kommt / läuft / vorbei) das Erste auf
|
|
der Karte und nicht eine Fussnote.
|
|
|
|
Farbe wird hier als AUSKUNFT eingesetzt, nicht als Schmuck: gedecktes
|
|
Grün heisst "du kannst mitmachen", Bernstein "noch nicht", Grau
|
|
"vorbei". Die Farben stammen aus derselben Familie wie die Ampel
|
|
(--k-gut / --k-mittel), damit nicht zwei Bedeutungssysteme
|
|
nebeneinander laufen. Und weil Farbe allein nie ausreicht, steht der
|
|
Zustand zusaetzlich als WORT da ("läuft bis 30.09.2026").
|
|
===================================================================== */
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DIE ALTEN BAUSTEINE SIND AM 03.10.2026 WEGGEFALLEN.
|
|
|
|
Hier standen `.event-zeitraum*` und `.event-block*` -- die
|
|
Zeitraumzeile ueber der Karte und die zwei gleich aussehenden
|
|
grauen Kaesten fuer Aufgaben und Regeln. Beide erzeugt bereich.js
|
|
nicht mehr: Der Zeitraum steht jetzt auf der Buehne (einmal statt
|
|
dreimal), und aus den Kaesten sind Listen geworden, die man abhaken
|
|
kann. Die neuen Regeln stehen weiter unten unter "AGENTUR-EVENTS:
|
|
DIE KARTE ALS AUSHANG".
|
|
|
|
SIE WURDEN ENTFERNT UND NICHT AUFGEHOBEN: Eine Regel, die auf nichts
|
|
mehr zeigt, sieht beim naechsten Lesen aus wie eine, die etwas tut
|
|
-- und man sucht den Fehler dann an einer Stelle, an der nichts
|
|
passiert. Was sie aussagten, steht in der Begruendung der neuen
|
|
Regeln; die Geschichte selbst steht in git.
|
|
|
|
Ebenfalls weg: `.eintrag-karte[data-event="vorbei"] { opacity: .82 }`.
|
|
Ein abgelaufenes Event war damit kaum von einem laufenden zu
|
|
unterscheiden, und der Text wurde schlechter lesbar, ohne dass es
|
|
etwas brachte. Jetzt tritt nur das BILD zurueck.
|
|
--------------------------------------------------------------------- */
|
|
|
|
/* =====================================================================
|
|
RÜCKMELDUNG: „fürs Team" oder „nur an DogFather" (10.09.2026)
|
|
|
|
Kapitel 5 des Pflichtenhefts. Der Schalter steht ÜBER der
|
|
Dringlichkeit und nicht darunter: Wer schreibt, soll wissen, wer
|
|
mitliest, BEVOR er den Text formuliert -- danach ist die Entscheidung
|
|
nur noch eine Korrektur.
|
|
===================================================================== */
|
|
.vertraulich-zeile {
|
|
display: flex; align-items: flex-start; gap: 10px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: rgba(255, 255, 255, .02);
|
|
cursor: pointer;
|
|
}
|
|
.vertraulich-zeile input {
|
|
/* 18 px und nicht die Vorgabe des Browsers: Das Kästchen ist die
|
|
eigentliche Entscheidung auf diesem Formular und darf nicht das
|
|
kleinste Element darauf sein. */
|
|
flex: none; width: 18px; height: 18px; margin-top: 1px;
|
|
accent-color: var(--akzent);
|
|
}
|
|
.vertraulich-zeile strong {
|
|
display: block; font-size: .86rem; color: var(--text);
|
|
}
|
|
.vertraulich-zeile em {
|
|
display: block; margin-top: 2px;
|
|
font-size: .76rem; font-style: normal; color: var(--text-still);
|
|
}
|
|
.vertraulich-zeile:hover { border-color: var(--rand-hell); }
|
|
.vertraulich-zeile:focus-within {
|
|
outline: 2px solid var(--akzent); outline-offset: 2px;
|
|
}
|
|
|
|
/* Das Kennzeichen an der Zeile selbst. Bewusst eine ANDERE Farbe als
|
|
die Art daneben -- zwei gleich aussehende Fähnchen liest man als
|
|
eines. Bernstein wie beim angehefteten Chat: derselbe Gedanke
|
|
("das hier ist besonders"), dieselbe Farbe. */
|
|
.marke-art--nur {
|
|
background: rgba(217, 174, 98, .16);
|
|
color: #d9ae62;
|
|
}
|
|
|
|
/* =====================================================================
|
|
ENTWICKLUNG: der Weg zur Person (11.09.2026)
|
|
|
|
Der Knopf steht IM KOPF der Karte, neben der Art -- nicht unten bei
|
|
den anderen Handgriffen. Er ist keine Bearbeitung, sondern der eine
|
|
Schritt, der den Eintrag aus der Aufzeichnung heraus zur Person
|
|
bringt; unten zwischen „Ändern" und „Löschen" wäre er einer von
|
|
dreien statt der besondere.
|
|
===================================================================== */
|
|
.eintrag-schicken {
|
|
appearance: none;
|
|
padding: 2px 11px; border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 12%, transparent);
|
|
color: var(--text);
|
|
/* .72rem und nicht .68 -- unter 11,5 px gilt im Haus als zu klein,
|
|
und dieser Knopf traegt den einzigen Schritt, der einen Eintrag
|
|
zur Person bringt. Gefunden von pruef-css-klassen. */
|
|
font: inherit; font-size: .72rem; font-weight: 700;
|
|
letter-spacing: .04em; text-transform: uppercase;
|
|
white-space: nowrap; cursor: pointer;
|
|
transition: background var(--tempo), border-color var(--tempo);
|
|
}
|
|
.eintrag-schicken:hover {
|
|
background: color-mix(in srgb, var(--akzent) 22%, transparent);
|
|
border-color: color-mix(in srgb, var(--akzent) 60%, transparent);
|
|
}
|
|
.eintrag-schicken:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
.eintrag-schicken[disabled] { opacity: .5; cursor: default; }
|
|
|
|
/* Schon geschickt: kein Knopf mehr, sondern eine Auskunft. Leise --
|
|
sie ist eine Fußnote, keine Meldung. */
|
|
.marke-art--weg {
|
|
background: rgba(255, 255, 255, .05);
|
|
color: var(--text-still);
|
|
text-transform: none; letter-spacing: 0; font-weight: 600;
|
|
}
|
|
|
|
/* =====================================================================
|
|
AUS EINER IDEE WURDE ARBEIT (15.09.2026)
|
|
|
|
Der Verweis steht dort, wo vorher der Knopf stand -- er ersetzt ihn.
|
|
Er sieht deshalb aus wie ein Zustand und nicht wie eine Schaltflaeche:
|
|
Wer ihn sieht, soll wissen, dass etwas passiert IST, nicht dass er
|
|
etwas tun kann.
|
|
===================================================================== */
|
|
|
|
.eintrag__aufgabe {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
font-size: .78rem; font-weight: 600;
|
|
padding: 3px 10px; border-radius: 999px;
|
|
text-decoration: none;
|
|
color: var(--text-leise);
|
|
border: 1px solid color-mix(in srgb, #668e6e 50%, transparent);
|
|
}
|
|
.eintrag__aufgabe:hover { color: var(--text); border-color: #668e6e; }
|
|
|
|
/* =====================================================================
|
|
DER COUNTDOWN BEI „WAS ANSTEHT" (17.09.2026)
|
|
|
|
Filipe wollte für den Community-Bereich „eine richtige perfektion".
|
|
Hier ist das keine Frage der Optik: Es gibt genau EINE Frage, die ein
|
|
Zuschauer auf dieser Seite hat — *wann* — und sie stand bisher in
|
|
Zeile vier einer Liste.
|
|
|
|
GROSS, ABER NICHT LAUT. Die Zeitangabe ist das Größte auf der Seite,
|
|
weil sie die Antwort ist. Sie leuchtet aber nicht: kein Neon, kein
|
|
Blinken, keine Animation. Auf dieser Seite steht niemand unter
|
|
Zeitdruck — er will es nur wissen.
|
|
|
|
DER TON FOLGT DER NÄHE, nicht der Wichtigkeit: Was gleich anfängt,
|
|
ist wärmer; was in vier Wochen kommt, ist ruhig. Das ist die einzige
|
|
Information, die eine Farbe hier tragen kann, ohne zu behaupten, ein
|
|
Termin sei „besser" als ein anderer.
|
|
------------------------------------------------------------------- */
|
|
.countdown {
|
|
--c-ton: #6f89a8;
|
|
margin: 0 0 22px;
|
|
padding: 20px 22px;
|
|
border: 1px solid color-mix(in srgb, var(--c-ton) 30%, var(--rand));
|
|
border-radius: var(--radius);
|
|
background:
|
|
linear-gradient(180deg,
|
|
color-mix(in srgb, var(--c-ton) 13%, transparent),
|
|
transparent 64%),
|
|
var(--flaeche);
|
|
}
|
|
.countdown[data-stufe="jetzt"] { --c-ton: #d97a45; }
|
|
.countdown[data-stufe="bald"] { --c-ton: #e0a33c; }
|
|
.countdown[data-stufe="woche"] { --c-ton: #5f93c4; }
|
|
.countdown[data-stufe="spaeter"] { --c-ton: #6f89a8; }
|
|
|
|
.countdown__schild {
|
|
margin: 0 0 4px;
|
|
font-size: .72rem; font-weight: 600;
|
|
letter-spacing: .1em; text-transform: uppercase;
|
|
color: color-mix(in srgb, var(--c-ton) 62%, #ffffff);
|
|
}
|
|
/* DIE ANTWORT. clamp statt fester Größe: Auf 390 px soll sie die Zeile
|
|
nicht sprengen, auf dem Rechner soll sie wirken. Eine feste Zahl wäre
|
|
an einem der beiden Enden falsch. */
|
|
.countdown__wann {
|
|
margin: 0;
|
|
font-size: clamp(1.7rem, 6vw, 2.5rem);
|
|
font-weight: 700; line-height: 1.05;
|
|
letter-spacing: -.01em;
|
|
color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.countdown__titel {
|
|
margin: 8px 0 0;
|
|
font-size: 1.02rem; font-weight: 600; color: var(--text);
|
|
}
|
|
.countdown__datum {
|
|
margin: 3px 0 0;
|
|
font-size: .86rem; color: var(--text-leise);
|
|
}
|
|
.countdown__weitere {
|
|
margin: 12px 0 0; padding-top: 10px;
|
|
border-top: 1px solid var(--rand);
|
|
font-size: .8rem; color: var(--text-still);
|
|
}
|
|
/* Wenn nichts ansteht: ein Satz, keine leere Fläche. Ein Bereich, der
|
|
schweigt, wenn nichts da ist, sieht kaputt aus statt leer. */
|
|
.countdown[data-leer] { --c-ton: #6f89a8; }
|
|
.countdown__leer { margin: 0; font-size: .95rem; color: var(--text-leise); }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DER ZEITSTRAHL — die Abschnitte in der Liste darunter
|
|
------------------------------------------------------------------- */
|
|
.zeitstrahl__schild {
|
|
display: flex; align-items: center; gap: 9px;
|
|
margin: 26px 0 12px;
|
|
font-size: .76rem; font-weight: 650;
|
|
letter-spacing: .09em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.zeitstrahl__schild:first-child { margin-top: 4px; }
|
|
/* Eine Linie, die nach rechts ausläuft — sie trennt, ohne eine Wand zu
|
|
bauen. Dieselbe Überlegung wie bei den Spalten des Aufgabenbretts. */
|
|
.zeitstrahl__schild::after {
|
|
content: ""; flex: 1; height: 1px;
|
|
background: linear-gradient(90deg, var(--rand), transparent);
|
|
}
|
|
.zeitstrahl__zahl {
|
|
padding: 1px 8px; border-radius: 999px;
|
|
background: rgba(255, 255, 255, .06);
|
|
font-size: .74rem; letter-spacing: normal; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE WUNSCHLISTE ALS RANGFOLGE (17.09.2026)
|
|
|
|
Aus dem Plan im Vault, Stufe 3. Eine Wunschliste ist keine Liste —
|
|
sie ist eine Rangfolge mit einem Zustand. Ohne beides ist sie ein
|
|
Briefkasten ohne Postbote: Nach dem dritten unbeantworteten Wunsch
|
|
schreibt niemand mehr.
|
|
------------------------------------------------------------------- */
|
|
|
|
/* DER RANGBALKEN. Er zeigt den ABSTAND zum meistgewünschten, nicht die
|
|
absolute Zahl — die steht ohnehin auf dem Knopf daneben. Ein Wunsch
|
|
mit 12 Stimmen neben einem mit 14 sieht sonst aus wie einer mit 1
|
|
neben einem mit 40.
|
|
|
|
Drei Pixel hoch und ohne Beschriftung: Er ist ein Hinweis, kein
|
|
Diagramm. Wer die Zahl will, liest sie. */
|
|
.wunsch-rang {
|
|
height: 3px; margin: 10px 0 2px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, .05);
|
|
overflow: hidden;
|
|
}
|
|
.wunsch-rang__fuellung {
|
|
height: 100%; border-radius: inherit;
|
|
background: linear-gradient(90deg,
|
|
color-mix(in srgb, var(--akzent) 70%, transparent),
|
|
color-mix(in srgb, var(--akzent) 30%, transparent));
|
|
transition: width .3s ease;
|
|
}
|
|
/* Der meistgewünschte bekommt etwas mehr — aber nur etwas. Er ist der
|
|
erste unter Gleichen, nicht der Gewinner. */
|
|
.wunsch-rang[data-spitze="ja"] .wunsch-rang__fuellung {
|
|
background: linear-gradient(90deg, var(--akzent),
|
|
color-mix(in srgb, var(--akzent) 45%, transparent));
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wunsch-rang__fuellung { transition: none; }
|
|
}
|
|
|
|
/* DER ZUSTAND. Er steht im Kopf neben dem Titel, weil er das ist,
|
|
weswegen jemand wiederkommt.
|
|
|
|
„Diesmal nicht" ist bewusst NICHT rot. Ein Nein ist eine Antwort und
|
|
keine Strafe — und wer ein rotes Schild an seinem Wunsch sieht,
|
|
schreibt keinen zweiten. */
|
|
.wunsch-stand {
|
|
--w-ton: #6f89a8;
|
|
display: inline-flex; align-items: center;
|
|
padding: 2px 9px; border-radius: 999px;
|
|
font-size: .74rem; font-weight: 600; white-space: nowrap;
|
|
color: color-mix(in srgb, var(--w-ton) 72%, #ffffff);
|
|
background: color-mix(in srgb, var(--w-ton) 14%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--w-ton) 32%, transparent);
|
|
}
|
|
.wunsch-stand[data-stand="offen"] { --w-ton: #6f89a8; }
|
|
.wunsch-stand[data-stand="angenommen"] { --w-ton: #5f93c4; }
|
|
.wunsch-stand[data-stand="erledigt"] { --w-ton: #4dab77; }
|
|
.wunsch-stand[data-stand="abgelehnt"] { --w-ton: #8e8577; }
|
|
|
|
/* DIE ENTSCHEIDUNG — vier Knöpfe statt eines Umschalters. Der aktuelle
|
|
Zustand ist abgeschaltet: Ein Knopf, der nichts tut, gehört nicht
|
|
anfassbar auszusehen. */
|
|
.wunsch-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.wunsch-wahl__knopf {
|
|
font: inherit; font-size: .78rem; font-weight: 600;
|
|
padding: 6px 12px; border-radius: 999px; cursor: pointer;
|
|
color: var(--text-leise);
|
|
background: transparent;
|
|
border: 1px solid var(--rand-hell);
|
|
transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
|
|
}
|
|
.wunsch-wahl__knopf:hover:not(:disabled) {
|
|
color: var(--text); border-color: var(--rand);
|
|
background: rgba(255, 255, 255, .04);
|
|
}
|
|
.wunsch-wahl__knopf[aria-pressed="true"] {
|
|
color: var(--text);
|
|
border-color: color-mix(in srgb, var(--akzent) 50%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 12%, transparent);
|
|
cursor: default;
|
|
}
|
|
|
|
/* =====================================================================
|
|
HIGHLIGHTS ALS GALERIE (17.09.2026)
|
|
|
|
Aus dem Plan im Vault, Stufe 5. „Eure Clips und Bilder" zeigte
|
|
bisher Textkarten mit einem Anhang darunter. **Ein Bild als Anhang
|
|
unter einer Überschrift ist kein Highlight** — dieser Bereich lebt
|
|
vom Sehen. Der Text wird zur Bildunterschrift, nicht umgekehrt.
|
|
------------------------------------------------------------------- */
|
|
|
|
/* Das Raster. `auto-fill` mit `minmax` statt einer festen Spaltenzahl:
|
|
Auf 390 px wird es eine Spalte, auf dem Rechner drei — und zwar
|
|
gemessen, nicht gerechnet. Eine feste Zahl wäre an einem der beiden
|
|
Enden falsch. */
|
|
#liste[data-galerie="ja"] {
|
|
display: grid; gap: 16px;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
/* GLEICH HOCH, nicht oben buendig (18.09.2026).
|
|
|
|
Mit `start` endete jede Karte dort, wo ihr Text aufhoerte -- drei
|
|
nebeneinander hoerten auf drei verschiedenen Hoehen auf, und die
|
|
Reihe sah aus, als waere beim Laden etwas schiefgegangen. Eine
|
|
Galerie ist ein Raster; ungleiche Kanten liest man als Fehler,
|
|
nicht als Absicht. */
|
|
align-items: stretch;
|
|
}
|
|
|
|
/* Der Bildstreifen auf einer Karte. */
|
|
.bildstreifen {
|
|
display: grid; gap: 4px; margin: -4px -4px 12px;
|
|
border-radius: var(--radius-klein); overflow: hidden;
|
|
}
|
|
/* Bei mehreren Bildern zwei Spalten — mehr wird auf einer Karte zu
|
|
klein, um noch etwas zu erkennen. */
|
|
.bildstreifen[data-mehrere="ja"] { grid-template-columns: 1fr 1fr; }
|
|
|
|
.bildstreifen__feld {
|
|
display: block; position: relative;
|
|
aspect-ratio: 16 / 9;
|
|
background: rgba(255, 255, 255, .03);
|
|
border-radius: var(--radius-klein);
|
|
overflow: hidden;
|
|
/* Ein Bild, das man anfassen kann, muss auch anspringbar sein — der
|
|
Fokusring kommt aus start.css und darf nicht abgeschnitten werden. */
|
|
outline-offset: 2px;
|
|
}
|
|
.bildstreifen__bild {
|
|
width: 100%; height: 100%;
|
|
object-fit: cover; display: block;
|
|
/* Beim Überfahren ganz leicht näher — genug, um zu sagen „das geht
|
|
auf", zu wenig, um zu zappeln. */
|
|
transition: transform var(--tempo);
|
|
}
|
|
.bildstreifen__feld:hover .bildstreifen__bild,
|
|
.bildstreifen__feld:focus-visible .bildstreifen__bild { transform: scale(1.02); }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.bildstreifen__bild { transition: none; }
|
|
.bildstreifen__feld:hover .bildstreifen__bild { transform: none; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
DER STARTKATALOG (17.09.2026)
|
|
|
|
Filipe, mit drei Bildschirmfotos leerer Bretter: „ich will fertige
|
|
sachen schon drin". Im Plan stand es sogar (§5.1): „Acht leere Seiten
|
|
sind schlimmer als keine."
|
|
|
|
DER KASTEN SIEHT ANDERS AUS ALS DIE EINTRÄGE DARUNTER — und das ist
|
|
der Punkt: Was hier steht, ist noch nichts. Sähe er aus wie ein
|
|
Beitrag, würde man ihn für einen halten und sich fragen, warum er
|
|
sich nicht anfassen lässt. Deshalb: gestrichelter Rand statt
|
|
durchgezogener. Das Zeichen für „Platzhalter" ist alt und wird
|
|
sofort verstanden.
|
|
------------------------------------------------------------------- */
|
|
.startkatalog {
|
|
margin: 0 0 24px; padding: 18px 20px;
|
|
border: 1px dashed color-mix(in srgb, var(--akzent) 34%, var(--rand));
|
|
border-radius: var(--radius);
|
|
background: color-mix(in srgb, var(--akzent) 5%, transparent);
|
|
}
|
|
.startkatalog__kopf {
|
|
display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.startkatalog__titel {
|
|
margin: 0; font-size: 1.02rem; font-weight: 650; color: var(--text);
|
|
}
|
|
.startkatalog__unter {
|
|
margin: 0; flex: 1 1 260px;
|
|
font-size: .85rem; color: var(--text-leise);
|
|
}
|
|
.startkatalog__alle { flex: 0 0 auto; }
|
|
.startkatalog__andere { flex: 0 0 auto; }
|
|
|
|
/* DER WECHSELKNOPF IST DER ZWEITE, NICHT DER ERSTE (20.09.2026).
|
|
|
|
Neben ihm steht "Alle N uebernehmen" -- das ist die Handlung, die
|
|
etwas bewirkt. "Andere zeigen" blaettert nur. Stuenden beide gleich
|
|
kraeftig da, muesste man jedes Mal lesen, welcher welcher ist.
|
|
Deshalb bekommt er dieselbe Form und weniger Farbe: erkennbar als
|
|
Knopf, aber nicht als Angebot. */
|
|
.startkatalog__andere {
|
|
background: transparent;
|
|
border-color: var(--rand);
|
|
color: var(--text-leise);
|
|
}
|
|
.startkatalog__andere:hover {
|
|
color: var(--text);
|
|
border-color: color-mix(in srgb, var(--akzent) 45%, var(--rand));
|
|
background: color-mix(in srgb, var(--akzent) 7%, transparent);
|
|
}
|
|
|
|
/* Auto-fill: Auf dem Handy eine Spalte, am Rechner drei — gemessen,
|
|
nicht gerechnet. */
|
|
.startkatalog__liste {
|
|
display: grid; gap: 12px;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
}
|
|
.startkatalog__karte {
|
|
display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
|
|
padding: 13px 14px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
|
|
}
|
|
.startkatalog__name {
|
|
margin: 0; font-size: .95rem; font-weight: 640; color: var(--text);
|
|
}
|
|
.startkatalog__text {
|
|
margin: 0; flex: 1;
|
|
font-size: .84rem; line-height: 1.5; color: var(--text-leise);
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE KETTE (17.09.2026) — Stufe 8 des Plans
|
|
|
|
Bisher waren die acht Bretter acht Silos. Ein Wunsch wurde
|
|
angenommen, irgendwann passierte etwas im Stream, irgendwann lag ein
|
|
Clip bei den Highlights — und nichts davon wusste voneinander. Wer
|
|
den Wunsch geschrieben hatte, erfuhr nie, dass er erfüllt wurde.
|
|
|
|
ZWEI RICHTUNGEN, ZWEI TÖNE: Woher etwas kam, steht ruhig da — es ist
|
|
Herkunft, kein Ergebnis. Was daraus wurde, ist grün: Das ist die
|
|
Nachricht, auf die jemand gewartet hat.
|
|
|
|
KLEIN GEHALTEN. Die Kette erklärt den Eintrag, sie ersetzt ihn
|
|
nicht — eine Zeile, kein Kasten.
|
|
------------------------------------------------------------------- */
|
|
.kette {
|
|
--k-ton: #6f89a8;
|
|
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
|
|
margin: 8px 0 0; padding: 6px 10px;
|
|
border-left: 2px solid color-mix(in srgb, var(--k-ton) 55%, transparent);
|
|
border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
|
|
background: color-mix(in srgb, var(--k-ton) 8%, transparent);
|
|
font-size: .82rem;
|
|
}
|
|
/* „Daraus wurde" ist die gute Nachricht — sie darf als Einzige
|
|
auffallen. */
|
|
.kette--hin { --k-ton: #4dab77; }
|
|
|
|
.kette__wort {
|
|
font-weight: 650; letter-spacing: .02em;
|
|
color: color-mix(in srgb, var(--k-ton) 70%, #ffffff);
|
|
}
|
|
.kette__weg { color: var(--text); text-decoration: none; }
|
|
.kette__weg:hover { text-decoration: underline; }
|
|
.kette__wer { color: var(--text-still); }
|
|
|
|
/* =====================================================================
|
|
DAS GESPRÄCH (17.09.2026) — Stufe 6 des Plans
|
|
|
|
„Der Treff" war eine Liste aus Karten. Der einzige Bereich, in dem
|
|
Menschen MITEINANDER reden sollen, zwang sie, nebeneinander zu reden.
|
|
|
|
EINE STUFE EINGERÜCKT, NICHT MEHR. Auf 390 px ist bei der zweiten
|
|
Schluss — dann steht der Text in einer Spalte von vier Wörtern. Die
|
|
Linie links macht die Zugehörigkeit deutlicher als jeder Abstand.
|
|
------------------------------------------------------------------- */
|
|
.antworten {
|
|
margin: 12px 0 0 0; padding-left: 14px;
|
|
border-left: 2px solid color-mix(in srgb, var(--akzent) 22%, var(--rand));
|
|
}
|
|
.antwort { padding: 8px 0; }
|
|
.antwort + .antwort { border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
|
|
.antwort__kopf {
|
|
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
|
|
margin: 0 0 3px; font-size: .78rem;
|
|
}
|
|
.antwort__wer { font-weight: 640; color: var(--text); }
|
|
/* Wer aus dem Team antwortet, ist eine andere Auskunft als wer
|
|
mitredet — deshalb sichtbar, aber leise. */
|
|
.antwort__rolle {
|
|
padding: 0 7px; border-radius: 999px;
|
|
/* .74rem und nicht .7rem: Bei 11,2 px liegt die Marke unter der
|
|
Grenze, die pruef-css-klassen im Haus haelt (11,5 px). Die Grenze
|
|
anzuheben waere der bequeme Weg gewesen -- und ab da haette die
|
|
Pruefung nichts mehr gehalten. */
|
|
font-size: .74rem; font-weight: 600;
|
|
color: color-mix(in srgb, var(--akzent) 70%, #ffffff);
|
|
background: color-mix(in srgb, var(--akzent) 13%, transparent);
|
|
}
|
|
.antwort__wann { color: var(--text-still); margin-left: auto; }
|
|
.antwort__text {
|
|
margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text-leise);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.antwort__weg {
|
|
margin-top: 4px; padding: 0;
|
|
background: none; border: 0; cursor: pointer;
|
|
font: inherit; font-size: .74rem; color: var(--text-still);
|
|
text-decoration: underline;
|
|
}
|
|
.antwort__weg:hover { color: var(--text-leise); }
|
|
|
|
/* Das Feld steht immer da — ein leeres Feld ist die deutlichste
|
|
Einladung, die es gibt. */
|
|
.antwort-neu { display: flex; gap: 8px; margin-top: 10px; }
|
|
.antwort-neu__feld {
|
|
flex: 1 1 auto; min-width: 0;
|
|
font: inherit; font-size: .88rem;
|
|
}
|
|
.antwort-neu__ab {
|
|
flex: 0 0 auto;
|
|
font: inherit; font-size: .82rem; font-weight: 600;
|
|
padding: 0 14px; border-radius: 999px; cursor: pointer;
|
|
color: var(--text-leise);
|
|
background: transparent;
|
|
border: 1px solid var(--rand-hell);
|
|
transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
|
|
}
|
|
.antwort-neu__ab:hover:not(:disabled) {
|
|
color: var(--text); background: rgba(255, 255, 255, .05);
|
|
}
|
|
|
|
/* =====================================================================
|
|
STUFE 7: JEDES BRETT BEKOMMT SEINE FORM (17.09.2026)
|
|
|
|
„Regeln & Hilfe" ist ein Nachschlagewerk, kein Feed — man schlägt es
|
|
im Streitfall auf und will **finden**, nicht scrollen. „Mitmachen"
|
|
ist ein Weg. „Anschlagbrett" ist ein schwarzes Brett: wenige, große
|
|
Aushänge.
|
|
------------------------------------------------------------------- */
|
|
|
|
/* Die Sprungmarken — der Unterschied zwischen einem Dokument und einer
|
|
langen Seite. */
|
|
/* WARUM DAS HIER KEINE PILLEN MEHR SIND (18.09.2026).
|
|
|
|
Sie sahen aus wie die Filterknöpfe darüber: gleiche Form, gleiche
|
|
Größe, gleiche Wörter. Auf „Regeln & Hilfe" standen damit zwei
|
|
identisch wirkende Reihen untereinander, von denen die eine filterte
|
|
und die andere sprang. Niemand kann das erraten.
|
|
|
|
Jetzt sind es Links, und sie sehen aus wie Links: unterstrichen,
|
|
ohne Rahmen, mit „Springe zu" davor und der Anzahl dahinter. Die
|
|
Filterreihe entfällt auf diesen Brettern ganz. */
|
|
.brettmarken {
|
|
display: flex; flex-wrap: wrap; gap: 4px 14px;
|
|
align-items: baseline;
|
|
margin: 0 0 18px; padding-bottom: 14px;
|
|
border-bottom: 1px solid var(--rand);
|
|
}
|
|
.brettmarken__wort {
|
|
font-size: .78rem;
|
|
color: var(--text-still);
|
|
margin-inline-end: 2px;
|
|
}
|
|
.brettmarken__weg {
|
|
display: inline-flex; align-items: baseline; gap: 5px;
|
|
font-size: .84rem; font-weight: 600;
|
|
color: var(--text-leise);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--rand-hell);
|
|
text-underline-offset: 3px;
|
|
/* Die Fläche zum Tippen bleibt groß genug, obwohl nichts umrandet
|
|
ist -- sonst trifft man auf dem Handy den Nachbarn. */
|
|
padding: 6px 2px;
|
|
transition: color var(--tempo), text-decoration-color var(--tempo);
|
|
}
|
|
.brettmarken__weg:hover,
|
|
.brettmarken__weg:focus-visible {
|
|
color: var(--text);
|
|
text-decoration-color: currentColor;
|
|
}
|
|
/* Die Anzahl sagt, ob sich der Sprung lohnt -- und dass hier nicht
|
|
gefiltert wird. */
|
|
.brettmarken__zahl {
|
|
font-size: .72rem; font-weight: 700;
|
|
color: var(--text-still);
|
|
padding: 1px 6px; border-radius: 999px;
|
|
background: rgba(255, 255, 255, .06);
|
|
}
|
|
|
|
/* Die Abschnittsüberschrift. scroll-margin, damit die Überschrift beim
|
|
Anspringen nicht unter der Kopfleiste verschwindet — ohne das landet
|
|
man auf dem Text darunter und glaubt, der Sprung sei ins Leere
|
|
gegangen. */
|
|
.brettabschnitt {
|
|
display: flex; align-items: baseline; gap: 10px;
|
|
margin: 30px 0 12px; scroll-margin-top: 80px;
|
|
font-size: .82rem; font-weight: 650;
|
|
letter-spacing: .09em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.brettabschnitt:first-child { margin-top: 4px; }
|
|
.brettabschnitt::after {
|
|
content: ""; flex: 1; height: 1px;
|
|
background: linear-gradient(90deg, var(--rand), transparent);
|
|
}
|
|
.brettabschnitt__zahl {
|
|
order: 3; padding: 1px 8px; border-radius: 999px;
|
|
background: rgba(255, 255, 255, .06);
|
|
font-size: .74rem; letter-spacing: normal; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DAS ANSCHLAGBRETT — wenige, große Aushänge
|
|
|
|
Ein Aushang zwischen dreißig anderen ist kein Aushang. Größerer
|
|
Titel, mehr Luft, ein Rahmen, der nach Papier aussieht statt nach
|
|
Zeile.
|
|
------------------------------------------------------------------- */
|
|
/* ZWEI NEBENEINANDER, WENN DER PLATZ REICHT (24.09.2026).
|
|
|
|
Filipe: "gestalte diese seite auch anders bitte. viel krasser
|
|
geiler übersichtlicher."
|
|
|
|
Hier stand ein einspaltiges Raster. Auf einem breiten Schirm wurde
|
|
damit jeder Aushang 1700 px breit -- und ein Titel in 1,32 rem ueber
|
|
1700 px ist keine Ueberschrift mehr, sondern eine Zeile, die man
|
|
beim Lesen verliert. Auf seinem Bildschirmfoto lief genau das ueber
|
|
die volle Breite.
|
|
|
|
"Wenige, grosse Aushaenge" bleibt richtig -- gross heisst aber
|
|
auffaellig, nicht breit. Ein Zettel am schwarzen Brett ist auch
|
|
keine anderthalb Meter breit.
|
|
|
|
auto-fit mit einer OBERGRENZE je Spalte: Bei viel Platz stehen zwei
|
|
nebeneinander, bei wenig eine, und keine wird je breiter als 620 px.
|
|
Gerechnet wird nichts -- der Browser entscheidet nach dem Platz,
|
|
den er hat. */
|
|
#liste[data-aushang="ja"] {
|
|
display: grid; gap: 18px;
|
|
/* DIE OBERGRENZE GEHOERT AN DIE KARTE, NICHT AN DIE SPALTE.
|
|
|
|
Erster Versuch war "minmax(..., 620px)". Gemessen: Die
|
|
Inhaltsspalte ist 1160 px breit, zwei Karten a 620 plus Luecke
|
|
waeren 1258 -- es passte genau eine, und die Aenderung bewirkte
|
|
nichts. Eine Obergrenze an der Spalte rechnet gegen eine Breite,
|
|
die man vorher nicht kennt.
|
|
|
|
Mit "1fr" teilt der Browser den vorhandenen Platz: bei 1160 px
|
|
zwei Spalten a 571, bei 390 px eine. Dass eine EINZELNE Karte
|
|
nicht ueber die ganze Breite laeuft, sagt dann ihre eigene
|
|
max-width -- an der Stelle, an der es hingehoert. */
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
|
|
align-items: start;
|
|
}
|
|
#liste[data-aushang="ja"] .eintrag-karte { max-width: 620px; }
|
|
#liste[data-aushang="ja"] .eintrag-karte { padding: 22px 24px; }
|
|
#liste[data-aushang="ja"] .eintrag-titel {
|
|
font-size: 1.32rem; line-height: 1.25;
|
|
/* Auch innerhalb einer 620-px-Spalte: In Zeichen gemessen, damit es
|
|
bei groesser gestellter Schrift stimmt. */
|
|
max-width: 30ch;
|
|
}
|
|
#liste[data-aushang="ja"] .eintrag-text {
|
|
font-size: .98rem; line-height: 1.6;
|
|
}
|
|
@media (max-width: 560px) {
|
|
#liste[data-aushang="ja"] .eintrag-karte { padding: 17px 16px; }
|
|
#liste[data-aushang="ja"] .eintrag-titel { font-size: 1.12rem; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
EIN VIDEO EINLESEN (17.09.2026) — Stufe A des Video-Plans
|
|
------------------------------------------------------------------- */
|
|
.videoholen {
|
|
margin: 0 0 20px; padding: 16px 18px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
.videoholen__form { margin: 0; }
|
|
.videoholen__zeile { display: flex; gap: 10px; }
|
|
.videoholen__zeile input {
|
|
flex: 1 1 auto; min-width: 0;
|
|
font: inherit; font-size: .9rem;
|
|
}
|
|
.videoholen__zeile .knopf { flex: 0 0 auto; }
|
|
|
|
/* WOHIN DAS VIDEO GELEGT WIRD (22.09.2026).
|
|
Eine eigene Zeile UNTER dem Link, nicht daneben: Am Handy stehen
|
|
dort schon Feld und Knopf, und ein drittes Element in derselben
|
|
Reihe quetscht das Eingabefeld auf wenige Buchstaben -- derselbe
|
|
Fehler, der am 21.09. schon einmal die Chat-Eingabe getroffen hat.
|
|
|
|
Die Breite ist begrenzt, nicht gefuellt: Drei Kanalnamen brauchen
|
|
keine 1200 Pixel, und ein Auswahlfeld ueber die ganze Seite sieht
|
|
aus wie ein Pflichtfeld. */
|
|
.videoholen__wohin { margin: 12px 0 0; max-width: 22rem; }
|
|
.videoholen__wohin select { width: 100%; }
|
|
@media (max-width: 560px) {
|
|
.videoholen__wohin { max-width: none; }
|
|
}
|
|
|
|
/* Der Knopf zum Video. Er ist die Antwort auf „und dann liken": Er
|
|
führt dorthin, wo das Liken zählt. Deshalb steht er deutlich da und
|
|
nicht als kleiner Textlink unter dem Datum. */
|
|
.videozeile {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
|
|
margin-top: 12px;
|
|
}
|
|
.videozeile__kanal {
|
|
--v-ton: #6f89a8;
|
|
padding: 2px 10px; border-radius: 999px;
|
|
font-size: .74rem; font-weight: 650; letter-spacing: .02em;
|
|
white-space: nowrap;
|
|
color: color-mix(in srgb, var(--v-ton) 76%, #ffffff);
|
|
background: color-mix(in srgb, var(--v-ton) 13%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--v-ton) 32%, transparent);
|
|
}
|
|
/* Dieselben drei Töne wie am Kanal einer Aufgabe — ein Kanal sieht im
|
|
ganzen Haus gleich aus, sonst lernt man sie zweimal. */
|
|
.videozeile__kanal[data-kanal="dogfather"] { --v-ton: #c2544f; }
|
|
.videozeile__kanal[data-kanal="hasidog"] { --v-ton: #7d6bbd; }
|
|
.videozeile__kanal[data-kanal="clips"] { --v-ton: #3f9c8a; }
|
|
|
|
.videozeile__weg { flex: 0 0 auto; text-decoration: none; }
|
|
|
|
/* Ein Video, das es bei TikTok nicht mehr gibt.
|
|
|
|
BEWUSST KEIN ROT und keine Warnfarbe: Es ist kein Fehler, es ist
|
|
eine Auskunft. Rot an dieser Stelle liesse die ganze Kachel wie
|
|
einen Schaden aussehen, obwohl Titel, Text und Cover weiter
|
|
stimmen -- die liegen bei uns.
|
|
|
|
Gestrichelter Rand statt Flaeche: Der Platz des Knopfes bleibt
|
|
sichtbar, aber nichts darin laedt zum Tippen ein. */
|
|
.videozeile__fort {
|
|
flex: 0 0 auto;
|
|
padding: .34rem .7rem;
|
|
border: 1px dashed rgba(150, 170, 195, .45);
|
|
border-radius: .6rem;
|
|
color: #8fa3bb;
|
|
font-size: .84rem;
|
|
cursor: default;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DIE KANALZEILE (17.09.2026) -- Schritt 3 aus dem Video-Plan
|
|
|
|
Sie steht als eigene Reihe UNTER dem Art-Filter, nicht daneben. Zwei
|
|
Fragen in einer Zeile sehen aus wie eine: Man klickt „Highlights"
|
|
und dann „HasiDog" und wundert sich, warum das erste wieder aus ist.
|
|
Getrennte Reihen zeigen, dass es zwei Dinge sind.
|
|
|
|
DIESELBEN DREI TÖNE WIE AUF DER KARTE (.videozeile__kanal). Wer
|
|
„DogFather Clips" in Türkis filtert, soll darunter Karten mit
|
|
türkisem Zeichen finden -- sonst muss er bei jedem Video neu lesen.
|
|
------------------------------------------------------------------- */
|
|
.filter__kanaele {
|
|
display: flex; flex-wrap: wrap; gap: 8px;
|
|
/* Volle Breite erzwingt die eigene Reihe, auch wenn oben noch Platz
|
|
wäre. Das ist Absicht: Es sind zwei Fragen, keine Fortsetzung.
|
|
Und es ist eine REGEL statt einer Schwelle -- keine Pixelzahl, die
|
|
beim nächsten hinzugefügten Knopf still falsch wird. */
|
|
flex-basis: 100%;
|
|
margin-top: 10px; padding-top: 10px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
|
|
.filter__kanal {
|
|
--v-ton: #6f89a8;
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
}
|
|
.filter__kanal[data-kanal="dogfather"] { --v-ton: #c2544f; }
|
|
.filter__kanal[data-kanal="hasidog"] { --v-ton: #7d6bbd; }
|
|
.filter__kanal[data-kanal="clips"] { --v-ton: #3f9c8a; }
|
|
|
|
/* GEWÄHLT heißt: der Ton wird sichtbar. Ungewählt bleibt er gedeckt --
|
|
drei bunte Knöpfe nebeneinander wären eine Ampel, und eine Ampel
|
|
sagt „gut/schlecht", wo nur „welcher Kanal" gemeint ist. */
|
|
.filter__kanal[aria-pressed="true"] {
|
|
color: color-mix(in srgb, var(--v-ton) 76%, #ffffff);
|
|
border-color: color-mix(in srgb, var(--v-ton) 55%, transparent);
|
|
background: color-mix(in srgb, var(--v-ton) 13%, transparent);
|
|
}
|
|
|
|
.filter__kanal-zahl {
|
|
/* .72rem = 11,5 px, die Grenze, die pruef-css-klassen bewacht. */
|
|
font-size: .72rem; font-weight: 700;
|
|
min-width: 1.5em; padding: 1px 5px;
|
|
border-radius: 999px; text-align: center;
|
|
color: var(--text-still);
|
|
background: rgba(255, 255, 255, .07);
|
|
}
|
|
.filter__kanal[aria-pressed="true"] .filter__kanal-zahl {
|
|
color: color-mix(in srgb, var(--v-ton) 82%, #ffffff);
|
|
background: color-mix(in srgb, var(--v-ton) 20%, transparent);
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE TEILEN-SEITE (17.09.2026) — Schritt 4 aus dem Video-Plan
|
|
|
|
Ziel des Teilen-Menüs auf dem Handy. Sie wird fast ausschließlich
|
|
mit einer Hand bedient, im Stehen, direkt nach dem Posten — deshalb
|
|
große Flächen, viel Abstand und nur eine Entscheidung je Bildschirm.
|
|
===================================================================== */
|
|
.tl-seite {
|
|
max-width: 44rem;
|
|
margin: 0 auto;
|
|
display: flex; flex-direction: column; gap: 22px;
|
|
}
|
|
|
|
.tl-label {
|
|
margin: 0 0 8px;
|
|
font-size: .78rem; font-weight: 650; letter-spacing: .03em;
|
|
text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
|
|
/* WAS ANGEKOMMEN IST. Steht ganz oben und ist umbrechbar: Eine
|
|
TikTok-Adresse ist länger als ein Handybildschirm, und eine Adresse,
|
|
die rechts abgeschnitten ist, beantwortet die Frage „hab ich den
|
|
richtigen Link erwischt?" nicht. */
|
|
.tl-fund {
|
|
padding: 16px 18px;
|
|
border: 1px solid var(--rand);
|
|
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
|
}
|
|
.tl-url {
|
|
margin: 0;
|
|
font-size: .86rem; line-height: 1.5;
|
|
color: var(--text-leise);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* WOHIN. Untereinander und nicht nebeneinander: Drei Knöpfe in einer
|
|
Reihe sind auf 360 px drei schmale Streifen, und der Satz darunter
|
|
passt in keinen davon. */
|
|
.tl-bretter {
|
|
display: flex; flex-direction: column; gap: 10px;
|
|
}
|
|
.tl-brett {
|
|
display: flex; flex-direction: column; gap: 3px;
|
|
width: 100%;
|
|
padding: 14px 16px; text-align: start;
|
|
font: inherit; cursor: pointer;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 10px;
|
|
background: color-mix(in srgb, var(--tinte) 96%, #ffffff 4%);
|
|
color: var(--text-leise);
|
|
transition: border-color .16s ease, background .16s ease;
|
|
}
|
|
.tl-brett:hover { border-color: var(--rand-hell); }
|
|
.tl-brett:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
/* GEWÄHLT — und das muss man SEHEN.
|
|
|
|
Im Bildschirmfoto auf 390 px war der Unterschied ein Hauch heller,
|
|
mehr nicht. Bei einer echten Wahl (wohin geht das Video?) ist das zu
|
|
wenig — und wer Farben schlecht unterscheidet, sieht gar nichts.
|
|
|
|
Deshalb drei Dinge zusammen statt eines allein: ein farbiger Streifen
|
|
links, ein deutlicherer Grund — und ein HAKEN. Der Haken ist der
|
|
Teil, der ohne jede Farbwahrnehmung funktioniert. */
|
|
.tl-brett[aria-pressed="true"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 45%, var(--rand-hell));
|
|
background: rgba(255, 255, 255, .08);
|
|
color: var(--text);
|
|
box-shadow: inset 3px 0 0 0 var(--akzent);
|
|
}
|
|
.tl-brett[aria-pressed="true"] .tl-brett-name::after {
|
|
content: " ✓";
|
|
color: var(--akzent);
|
|
font-weight: 700;
|
|
}
|
|
.tl-brett-name { font-size: .95rem; font-weight: 700; }
|
|
.tl-brett-satz { font-size: .8rem; color: var(--text-still); }
|
|
|
|
.tl-knoepfe {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
|
|
}
|
|
.tl-knoepfe .knopf { min-width: 11rem; }
|
|
|
|
/* DAS FELD ZUM EINFÜGEN. Es erscheint nur, wenn gar kein Link dabei
|
|
war -- als Angebot, nicht als Strafe. */
|
|
.tl-haendisch input {
|
|
width: 100%; box-sizing: border-box;
|
|
padding: 13px 14px;
|
|
font: inherit; font-size: 1rem; /* 16 px: darunter zoomt iOS beim Tippen */
|
|
color: var(--text);
|
|
background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
|
|
border: 1px solid var(--rand-hell);
|
|
border-radius: 10px;
|
|
}
|
|
.tl-haendisch input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
.tl-fertig {
|
|
padding: 18px;
|
|
border: 1px solid var(--rand-hell);
|
|
background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
|
|
display: flex; flex-direction: column; gap: 16px;
|
|
}
|
|
.tl-fertig-satz {
|
|
margin: 0; font-size: .95rem; line-height: 1.6; color: var(--text);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tl-brett { transition: none; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
„STEHT IM KALENDER" (17.09.2026)
|
|
|
|
Die Verbindung zwischen Brett und Kalender war einseitig: Vom
|
|
Kalender kam man auf das Brett, zurueck nicht. Am Kartenfuss stand
|
|
bloss ein Datum -- und „24.09.2026" sieht aus wie „17.09.2026",
|
|
obwohl das eine ein Termin ist und das andere der Tag, an dem
|
|
jemand getippt hat.
|
|
|
|
ES IST EIN LINK UND KEINE MARKE. Wer liest „steht im Kalender", will
|
|
als Naechstes wissen, was sonst noch an dem Tag ist.
|
|
===================================================================== */
|
|
.im-kalender {
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
margin-top: 10px;
|
|
padding: 5px 11px;
|
|
border: 1px solid color-mix(in srgb, var(--akzent) 34%, var(--rand));
|
|
border-radius: 999px;
|
|
/* Undurchsichtig gemischt, nicht mit `transparent`: Sonst scheint das
|
|
Wasserzeichen der Seite durch den Text. Am 17.09. genau so an einer
|
|
vertraulichen Bewerbung aufgefallen. */
|
|
background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
|
|
color: var(--text-leise);
|
|
font-size: .78rem; font-weight: 600;
|
|
text-decoration: none;
|
|
transition: border-color .16s ease, color .16s ease;
|
|
}
|
|
.im-kalender:hover { border-color: var(--akzent); color: var(--text); }
|
|
.im-kalender:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
.im-kalender__zeichen { font-size: .9rem; line-height: 1; }
|
|
|
|
/* EINE ZUSAGE SIEHT ANDERS AUS ALS EIN EIGENER TERMIN. „Wird gemacht --
|
|
am 24." ist ein Versprechen an jemanden; ein selbstgesetztes Datum
|
|
ist eine Notiz an sich selbst. Unterschieden wird ueber das WORT
|
|
(„Zugesagt für") und zusaetzlich ueber den Rand -- eine Auskunft,
|
|
die nur aus einer Farbe besteht, kommt bei niemandem an, der Farben
|
|
schlecht unterscheidet. */
|
|
.im-kalender[data-grund="zugesagt"] {
|
|
border-color: color-mix(in srgb, var(--gut, #79d1a2) 48%, var(--rand));
|
|
color: color-mix(in srgb, var(--gut, #79d1a2) 30%, #ffffff);
|
|
}
|
|
|
|
/* Der Hinweis unter dem Datumsfeld. Wenn er „steht damit im Kalender"
|
|
sagt, darf man das sehen -- sonst liest man ihn nicht. */
|
|
#hinweis-datum[data-imkalender="ja"] {
|
|
color: color-mix(in srgb, var(--akzent) 42%, #ffffff);
|
|
}
|
|
|
|
/* ---- „Video dazu einfügen" an einer Wunschkarte (Stufe 7) ----------
|
|
Eine Zeile, kein Kasten mit Rahmen: Es ist ein Zwischenschritt, der
|
|
gleich wieder verschwindet. Ein aufwendig gestaltetes Formular an
|
|
dieser Stelle sähe aus, als gehörte es dauerhaft zur Karte. */
|
|
.videodazu {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .5rem;
|
|
align-items: center;
|
|
margin-top: .7rem;
|
|
padding-top: .7rem;
|
|
border-top: 1px solid rgba(140, 160, 185, .18);
|
|
}
|
|
.videodazu__feld {
|
|
flex: 1 1 15rem;
|
|
min-width: 0;
|
|
padding: .45rem .6rem;
|
|
border: 1px solid rgba(140, 160, 185, .35);
|
|
border-radius: .55rem;
|
|
background: rgba(10, 18, 30, .55);
|
|
color: #e8f1fa;
|
|
font-size: .9rem;
|
|
}
|
|
.videodazu__feld:focus-visible {
|
|
outline: 2px solid #6ea8d8;
|
|
outline-offset: 1px;
|
|
}
|
|
.videodazu__senden { flex: 0 0 auto; }
|
|
/* Die Rückmeldung bekommt eine eigene Zeile, damit eine lange
|
|
Fehlermeldung das Feld nicht aus der Zeile drückt. */
|
|
.videodazu__sagt {
|
|
flex: 1 0 100%;
|
|
margin: 0;
|
|
min-height: 1.1em;
|
|
color: #9fb3c9;
|
|
font-size: .84rem;
|
|
}
|
|
|
|
/* ---- STARTHILFE BEIM SCHREIBEN (18.09.2026) -----------------------
|
|
Ein leeres Feld ist der häufigste Grund, warum ein Brett still
|
|
bleibt, obwohl viele mitlesen. Die Zeile steht ganz oben im
|
|
Formular — vor Art und Datum, weil sie beides mit ausfüllt.
|
|
|
|
Gedämpft gehalten: Es ist ein Angebot, keine Aufforderung. Wer weiß,
|
|
was er schreiben will, soll daran vorbeilesen können. */
|
|
.starthilfe {
|
|
margin: 0 0 16px;
|
|
padding: 12px 14px;
|
|
border: 1px dashed var(--rand-hell);
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, .02);
|
|
}
|
|
.starthilfe__wort {
|
|
margin: 0 0 9px;
|
|
font-size: .84rem;
|
|
color: var(--text-leise);
|
|
}
|
|
.starthilfe__reihe {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
.starthilfe__beispiel {
|
|
min-height: 38px;
|
|
padding: 7px 13px;
|
|
border: 1px solid var(--rand-hell);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--tinte) 86%, #ffffff 14%);
|
|
color: var(--text);
|
|
font: inherit;
|
|
font-size: .82rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: border-color var(--tempo), background var(--tempo);
|
|
}
|
|
.starthilfe__beispiel:hover { border-color: var(--akzent); }
|
|
.starthilfe__beispiel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
/* ---- EIN TON JE ART (18.09.2026) ----------------------------------
|
|
Erzeugt von tools/art-farben.mjs -- NICHT von Hand ändern.
|
|
Das Werkzeug misst zweierlei und lässt sich nicht überreden:
|
|
den Abstand zwischen zwei Arten auf DEMSELBEN Brett (OKLab, ab
|
|
0.1) und den Kontrast auf dunklem Grund (ab 4.5:1).
|
|
|
|
Warum überhaupt: Alle Etiketten trugen denselben blauen Ton. Bei
|
|
siebzehn Karten untereinander hatte das Auge nichts, woran es sich
|
|
festhalten konnte -- man liest dann jede Überschrift, statt zu
|
|
überfliegen. Der Ton folgt der BEDEUTUNG, nicht der Reihenfolge:
|
|
Lob grün, „etwas stimmt nicht" warmrot, Fragen blau. Deshalb trägt
|
|
die Art „frage" auf drei Brettern denselben Ton. */
|
|
.marke-art[data-art] {
|
|
background: color-mix(in srgb, var(--art-ton) 16%, transparent);
|
|
color: var(--art-ton);
|
|
}
|
|
.marke-art[data-art="frage"] { --art-ton: #a8baca; }
|
|
.marke-art[data-art="regel"] { --art-ton: #c2b981; }
|
|
.marke-art[data-art="stream"] { --art-ton: #bab3c8; }
|
|
.marke-art[data-art="hallo"] { --art-ton: #90e1e6; }
|
|
.marke-art[data-art="lob"] { --art-ton: #90b888; }
|
|
.marke-art[data-art="problem"] { --art-ton: #e4a59f; }
|
|
.marke-art[data-art="ansage"] { --art-ton: #e2ccc0; }
|
|
.marke-art[data-art="hinweis"] { --art-ton: #a9b9ce; }
|
|
.marke-art[data-art="danke"] { --art-ton: #c592b3; }
|
|
.marke-art[data-art="event"] { --art-ton: #f8bcdd; }
|
|
.marke-art[data-art="turnier"] { --art-ton: #d69b81; }
|
|
.marke-art[data-art="pause"] { --art-ton: #7ba2cc; }
|
|
.marke-art[data-art="technik"] { --art-ton: #8ed7ef; }
|
|
.marke-art[data-art="gemeinsam"] { --art-ton: #86c4a8; }
|
|
.marke-art[data-art="sonstiges"] { --art-ton: #dbcaff; }
|
|
.marke-art[data-art="clip"] { --art-ton: #b5b5ca; }
|
|
.marke-art[data-art="bild"] { --art-ton: #8adbdb; }
|
|
.marke-art[data-art="fanart"] { --art-ton: #b88dba; }
|
|
.marke-art[data-art="moment"] { --art-ton: #deac83; }
|
|
.marke-art[data-art="hilfe"] { --art-ton: #a4deb7; }
|
|
.marke-art[data-art="folge"] { --art-ton: #e8a5b4; }
|
|
.marke-art[data-art="gesucht"] { --art-ton: #ceb480; }
|
|
.marke-art[data-art="lust"] { --art-ton: #bfdbb1; }
|
|
|
|
/* =====================================================================
|
|
AUF- UND ZUKLAPPEN, UND DIE SPRUNGLEISTE (19.09.2026)
|
|
|
|
Filipe, zwei Sätze an einem Abend:
|
|
„man soll auf dieser seite jede kategorie auf und zu klappen können
|
|
mit einem button ... überall wo so eine liste entstehen kann"
|
|
„das soll viel geiler aussehen bitte" (zur Sprungleiste)
|
|
===================================================================== */
|
|
|
|
/* ---- Die Abschnittsköpfe sind jetzt Knöpfe --------------------------
|
|
|
|
Sie sahen als Überschrift gut aus und sollen genauso aussehen — ein
|
|
Knopf, der wie ein Knopf aussieht, wäre hier ein Rückschritt: Die
|
|
Gliederung ist das Wichtige, das Zuklappen die Zugabe. Deshalb erbt
|
|
der Knopf das komplette Aussehen der alten Überschrift und bekommt
|
|
nur zwei Dinge dazu: einen Zeiger und einen Pfeil. */
|
|
.brettabschnitt,
|
|
.zeitstrahl__schild {
|
|
width: 100%;
|
|
background: none;
|
|
border: 0;
|
|
padding: 0;
|
|
font-family: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
/* 44 px hoch, damit ein Daumen ihn trifft — als Überschrift waren es
|
|
je nach Schriftgröße auch mal 18. */
|
|
min-height: 44px;
|
|
}
|
|
.brettabschnitt:focus-visible,
|
|
.zeitstrahl__schild:focus-visible {
|
|
outline: 2px solid var(--akzent, #5aa0e0);
|
|
outline-offset: 3px;
|
|
border-radius: 4px;
|
|
}
|
|
.brettabschnitt:hover .brettabschnitt__wort,
|
|
.zeitstrahl__schild:hover .zeitstrahl__wort { color: var(--text); }
|
|
|
|
.brettabschnitt__wort,
|
|
.zeitstrahl__wort { flex: 0 0 auto; }
|
|
|
|
/* Der Pfeil steht GANZ RECHTS, hinter der auslaufenden Linie — dort
|
|
sucht man ihn, und dort steht er auch auf der Startseite. */
|
|
.klapp-pfeil {
|
|
order: 9;
|
|
flex: none;
|
|
width: 18px; height: 18px;
|
|
color: var(--text-still);
|
|
transition: transform .2s ease, color .2s ease;
|
|
}
|
|
[data-zu="ja"] .klapp-pfeil { transform: rotate(-90deg); }
|
|
.brettabschnitt:hover .klapp-pfeil,
|
|
.zeitstrahl__schild:hover .klapp-pfeil { color: var(--text-leise); }
|
|
|
|
/* Ein zugeklappter Abschnitt soll SICHTBAR zu sein, nicht nur leer.
|
|
Ohne diesen Hinweis sieht es aus, als fehle der Inhalt. */
|
|
.brettabschnitt[data-zu="ja"] .brettabschnitt__zahl,
|
|
.zeitstrahl__schild[data-zu="ja"] .zeitstrahl__zahl {
|
|
background: color-mix(in srgb, var(--akzent, #5aa0e0) 22%, transparent);
|
|
color: var(--text-leise);
|
|
}
|
|
|
|
.brettabschnitt__inhalt[hidden],
|
|
.zeitstrahl__inhalt[hidden] { display: none; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.klapp-pfeil { transition: none; }
|
|
}
|
|
|
|
/* ---- Die Sprungleiste ------------------------------------------------
|
|
|
|
Vorher: eine Reihe unterstrichener Wörter mit kleinen Zahlen. Auf
|
|
dem Bildschirmfoto sah das aus wie eine Fußzeile — man übersieht
|
|
sie, und wer sie sieht, hält sie für Filter (genau die Verwechslung,
|
|
gegen die schon die Wörter „Springe zu" gebaut wurden).
|
|
|
|
Jetzt: echte Marken mit Rahmen und eigenem Grund. Sie sehen nach
|
|
etwas aus, das man anfassen kann — und die Zahl sitzt darin statt
|
|
daneben. Die Unterstreichung entfällt: Ein Rahmen sagt dasselbe,
|
|
ohne die Zeile unruhig zu machen. */
|
|
.brettmarken {
|
|
gap: 8px 10px;
|
|
align-items: center;
|
|
padding: 12px 14px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 12px;
|
|
/* Ein sehr flacher Verlauf statt einer Trennlinie: Die Leiste hebt
|
|
sich als BLOCK ab, statt nur einen Strich zu ziehen. */
|
|
background:
|
|
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
|
|
}
|
|
.brettmarken__wort {
|
|
font-size: .74rem;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
margin-inline-end: 4px;
|
|
}
|
|
.brettmarken__weg {
|
|
gap: 7px;
|
|
padding: 7px 12px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--rand);
|
|
background: rgba(255, 255, 255, .03);
|
|
text-decoration: none;
|
|
transition: border-color var(--tempo), background-color var(--tempo),
|
|
color var(--tempo), transform var(--tempo);
|
|
}
|
|
.brettmarken__weg:hover,
|
|
.brettmarken__weg:focus-visible {
|
|
color: var(--text);
|
|
border-color: color-mix(in srgb, var(--akzent, #5aa0e0) 45%, var(--rand));
|
|
background: color-mix(in srgb, var(--akzent, #5aa0e0) 12%, transparent);
|
|
transform: translateY(-1px);
|
|
}
|
|
.brettmarken__zahl {
|
|
background: rgba(255, 255, 255, .09);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.brettmarken__weg { transition: none; }
|
|
.brettmarken__weg:hover { transform: none; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
JEDE SEITE TRÄGT DIE FARBE IHRER KACHEL (19.09.2026)
|
|
|
|
Filipe: „die kacheln sollen auch in jeder seite die farben der
|
|
kategorie haben. ich will dass alles perfekt angepasst ist."
|
|
|
|
`bereich.js` setzt `data-ton` am <body>; die Zuordnung Nummer→Farbe
|
|
steht in start.css und gilt damit schon. Hier wird nur der AKZENT
|
|
der Seite darauf umgestellt — und weil die Seite ihn an 44 Stellen
|
|
benutzt (Ränder, Linien, Knöpfe, Marken), färbt sich damit alles
|
|
mit, ohne dass irgendwo eine zweite Farbliste entsteht.
|
|
|
|
WARUM NICHT REIN, SONDERN GEMISCHT: Einige Töne sind sehr hell
|
|
(Ton 30 ist fast Weißgrün, Ton 36 Zitronengelb). Als Fläche und
|
|
Rahmen sind sie schön, als Akzentfarbe für dünne Linien und kleinen
|
|
Text auf dunklem Grund blenden sie. Die Beimischung von 12 % des
|
|
ruhigen Blaugraus nimmt genau diese Spitze, ohne die Kategorie
|
|
unkenntlich zu machen — die Farbe bleibt eindeutig zuzuordnen.
|
|
|
|
Steht kein `data-ton` da (Direktaufruf ohne passende Kachel), bleibt
|
|
alles wie bisher. Eine Seite ohne Farbe ist unauffällig, eine Seite
|
|
mit der falschen führt in die Irre. */
|
|
/* DIESE REGEL STEHT SEIT DEM 22.09.2026 IN start.css.
|
|
|
|
Sie stand hier -- und bereich.css laden genau DREI von
|
|
fuenfunddreissig Seiten (bereich.html, bewerben.html,
|
|
teilen.html). Auf den anderen zweiunddreissig setzte kopf.js brav
|
|
`data-ton` an den Koerper, und niemand las es. Die Farbe der Seite
|
|
gab es, sie kam nur nicht an.
|
|
|
|
Filipe: „je nachdem auf welcher seite ich bin wechseln gaaanz oben
|
|
in der leiste gewissene symbole und sachen mit ... ich will das auf
|
|
jeder seite".
|
|
|
|
start.css liegt auf allen fuenfunddreissig. */
|
|
|
|
/* Der Kopf der Seite bekommt die Farbe deutlicher — dort schaut man
|
|
zuerst hin, und dort beantwortet sie die Frage „wo bin ich". */
|
|
body[data-ton] .kopf-zeile {
|
|
position: relative;
|
|
}
|
|
body[data-ton] .kopf-zeile::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -10px -14px auto;
|
|
height: 3px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg,
|
|
color-mix(in srgb, var(--ton) 70%, transparent),
|
|
transparent 62%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
/* =====================================================================
|
|
DIE HIGHLIGHTS: DREI ACCOUNTS NEBENEINANDER (20.09.2026)
|
|
|
|
Filipe: „die highlights sollen in 3 kategorien sein nebeneinander,
|
|
dogfather, hasidog und dogfather clips. und die liste soll man auch
|
|
zu und auf klappen können."
|
|
|
|
---------------------------------------------------------------------
|
|
`auto-fit` UND NICHT `repeat(3, …)`
|
|
|
|
Drei feste Spalten wären auf einem Handy drei Streifen von 100 px,
|
|
in denen kein Titel steht. `minmax(230px, 1fr)` misst statt zu
|
|
rechnen: Nebeneinander, solange der Platz für 230 px je Spalte
|
|
reicht, sonst untereinander. Kommt ein vierter Account dazu, bricht
|
|
die Regel von selbst richtig um — bei einer festen 3 wäre er die
|
|
Zeile, die jemand vergisst.
|
|
|
|
Das ist dieselbe Lehre wie bei der Kopfleiste am 06.09.2026: Wo es
|
|
geht, eine Regel statt einer Zahl.
|
|
===================================================================== */
|
|
.kanalspalten {
|
|
display: grid;
|
|
gap: 14px;
|
|
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
align-items: start;
|
|
}
|
|
|
|
.kanalspalte {
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
background: color-mix(in srgb, var(--flaeche) 70%, transparent);
|
|
overflow: hidden;
|
|
/* Der farbige Strich oben ist das, was die drei auf einen Blick
|
|
unterscheidet -- vor jedem gelesenen Wort. */
|
|
border-top: 3px solid var(--kfarbe, var(--rand-hell));
|
|
}
|
|
.kanalspalte[data-kanal="dogfather"] { --kfarbe: #7c6cf0; }
|
|
.kanalspalte[data-kanal="hasidog"] { --kfarbe: #e58bbd; }
|
|
.kanalspalte[data-kanal="clips"] { --kfarbe: #4fb9c8; }
|
|
.kanalspalte[data-kanal="ohne"] { --kfarbe: var(--rand-hell); }
|
|
|
|
.kanalspalte__kopf {
|
|
display: flex; align-items: center; gap: 10px;
|
|
width: 100%;
|
|
padding: 11px 13px;
|
|
border: 0; background: color-mix(in srgb, var(--kfarbe) 9%, transparent);
|
|
color: var(--text);
|
|
font: inherit; font-weight: 650;
|
|
text-align: left; cursor: pointer;
|
|
}
|
|
.kanalspalte__kopf:hover { background: color-mix(in srgb, var(--kfarbe) 16%, transparent); }
|
|
.kanalspalte__kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
|
|
|
.kanalspalte__wort { flex: 1 1 auto; min-width: 0; display: block; }
|
|
/* Das Handle DARUNTER, nicht daneben: In einer Spalte von 230 px
|
|
schöbe „@dogis.modi.gang" neben dem Namen die Zahl aus dem Bild. */
|
|
.kanalspalte__handle {
|
|
display: block;
|
|
font-size: .72rem; font-weight: 500; color: var(--text-leise);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.kanalspalte__zahl {
|
|
flex: 0 0 auto;
|
|
min-width: 22px; padding: 1px 7px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--kfarbe) 26%, transparent);
|
|
font-size: .74rem; font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.kanalspalte__inhalt {
|
|
display: flex; flex-direction: column; gap: 10px;
|
|
padding: 12px;
|
|
}
|
|
/* Die Galerie-Form IN der Spalte. `minmax(180px, 1fr)` statt der 280 px
|
|
von `#liste`: Eine Spalte ist schmaler als die ganze Seite, und mit
|
|
280 px bliebe in einer 376-px-Spalte eine Kachel je Reihe, auch wenn
|
|
zwei hineinpassen. */
|
|
.kanalspalte__inhalt[data-galerie="ja"] {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
align-items: stretch;
|
|
}
|
|
.kanalspalte__leer { margin: 0; font-size: .82rem; }
|
|
|
|
/* =====================================================================
|
|
DIE ZEITLEISTE
|
|
|
|
Sie steht ÜBER den Kanalknöpfen und sieht anders aus als sie: zwei
|
|
Reihen, die gleich aussehen und Verschiedenes tun, sind die Sorte
|
|
Doppeldeutigkeit, die am 18.09. auf „Regeln & Hilfe" schon einmal
|
|
aufgefallen ist.
|
|
===================================================================== */
|
|
.filter__zeiten {
|
|
display: flex; flex-wrap: wrap; gap: 6px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.filter__zeit { display: inline-flex; align-items: center; gap: 6px; }
|
|
.filter__zeit[aria-pressed="true"] {
|
|
border-color: var(--akzent);
|
|
background: color-mix(in srgb, var(--akzent) 16%, transparent);
|
|
color: var(--text);
|
|
}
|
|
.filter__zeit:disabled { opacity: .42; cursor: default; }
|
|
.filter__zeit-zahl {
|
|
font-size: .72rem; font-variant-numeric: tabular-nums;
|
|
color: var(--text-leise);
|
|
}
|
|
.filter__zeit[aria-pressed="true"] .filter__zeit-zahl { color: inherit; }
|
|
|
|
@media (forced-colors: active) {
|
|
.kanalspalte { border: 1px solid CanvasText; border-top-width: 4px; }
|
|
.filter__zeit[aria-pressed="true"] { border: 2px solid Highlight; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
EIN VORSCHLAG IST EIN VORSCHLAG (21.09.2026)
|
|
|
|
Filipe: „immer wenn es um was geht was ich machen soll ... dass ich
|
|
immer am ende entscheide ob ich was mache oder nicht. ich kann immer
|
|
annehmen oder ablehnen."
|
|
|
|
EIGENE ZEILE, NICHT MITGESCHWOMMEN. Der Kopf des Vorschlagsblocks
|
|
ist eine Flex-Zeile; ohne `flex-basis: 100%` säße der Satz neben der
|
|
Überschrift und zwischen zwei Knöpfen — also genau dort, wo man ihn
|
|
überliest. Er bekommt die ganze Breite und steht unter dem Titel,
|
|
bevor die erste Karte kommt.
|
|
|
|
SICHTBAR, ABER KEIN ALARM. Ein roter Kasten würde wie eine Warnung
|
|
aussehen; das hier ist keine. Deshalb der Akzentton des Hauses mit
|
|
9 % Deckkraft — man sieht, dass es zusammengehört und dazugehört,
|
|
und es blendet auf einem dunklen Bildschirm nicht. */
|
|
.startkatalog__entscheidung {
|
|
margin: 4px 0 0;
|
|
flex: 1 0 100%;
|
|
padding: .55rem .8rem;
|
|
border-radius: var(--radius-klein);
|
|
border: 1px solid color-mix(in srgb, var(--akzent) 28%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 9%, transparent);
|
|
font-size: .88rem;
|
|
line-height: 1.5;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* WER ENTSCHEIDET -- die Zeile unter der Brett-Ueberschrift
|
|
(21.09.2026). Gleiche Gestaltung wie ueber den Vorschlagskarten:
|
|
Es ist derselbe Satz, und zwei Aussehen fuer eine Aussage waeren
|
|
eines zu viel. */
|
|
.brett-entscheidung {
|
|
margin: .6rem 0 0;
|
|
max-width: 62ch;
|
|
padding: .55rem .8rem;
|
|
border-radius: var(--radius-klein);
|
|
border: 1px solid color-mix(in srgb, var(--akzent) 28%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 9%, transparent);
|
|
font-size: .88rem;
|
|
line-height: 1.5;
|
|
color: var(--text);
|
|
}
|
|
.brett-entscheidung[hidden] { display: none; }
|
|
|
|
/* =====================================================================
|
|
DAS ANSCHLAGBRETT (22.09.2026)
|
|
=====================================================================
|
|
|
|
Filipe: „die sachen sollen in der seite vom anschlagbrett immer
|
|
automatisch nach 24h von da verschwinden. weil alles hat seine
|
|
kategorie und was nicht ist auch nicht um ewig auf der seite zu
|
|
bleiben fertig." Dazu: „viel besser gestaltet, übersichtlicher,
|
|
moderner, hochwertiger, professioneller" — und ausdrücklich auch
|
|
auf dem Handy.
|
|
|
|
WAS HÄNGT, SIEHT AUS WIE ETWAS, DAS HÄNGT. Eine Ansage vom Team ist
|
|
keine Notiz unter vielen: Sie gilt jetzt, für alle, und sie ist in
|
|
24 Stunden weg. Deshalb bekommt sie hier eine eigene Sprache —
|
|
kräftiger Rand links in der Farbe ihrer Art, ein Band oben, mehr
|
|
Luft. Nicht mehr Schmuck, sondern mehr Gewicht.
|
|
|
|
DIE ART TRÄGT DIE FARBE, und die vier sind das, was `BEREICHE
|
|
.anschlag.arten` im Server aufzählt: Ansage, Neue Regel, Hinweis,
|
|
Danke an euch. Steht dort morgen eine fünfte, fällt sie hier auf den
|
|
neutralen Ton zurück — sichtbar unbeschadet, nur ohne eigene Farbe.
|
|
===================================================================== */
|
|
[data-bereich="anschlag"] .eintrag-karte {
|
|
--anschlag: var(--akzent);
|
|
position: relative;
|
|
padding-left: 18px;
|
|
border-left: 3px solid color-mix(in srgb, var(--anschlag) 65%, transparent);
|
|
background:
|
|
linear-gradient(100deg,
|
|
color-mix(in srgb, var(--anschlag) 10%, transparent) 0%,
|
|
color-mix(in srgb, var(--anschlag) 3%, transparent) 26%,
|
|
transparent 52%),
|
|
linear-gradient(178deg, rgba(10, 14, 22, .96), rgba(5, 8, 14, .98));
|
|
}
|
|
[data-bereich="anschlag"] .eintrag-karte[data-art="ansage"] { --anschlag: #8ec9ff; }
|
|
[data-bereich="anschlag"] .eintrag-karte[data-art="regel"] { --anschlag: #f0c14b; }
|
|
[data-bereich="anschlag"] .eintrag-karte[data-art="hinweis"] { --anschlag: #a98bff; }
|
|
[data-bereich="anschlag"] .eintrag-karte[data-art="danke"] { --anschlag: #8fd6a6; }
|
|
|
|
/* ---- Was abgehängt ist ---------------------------------------------- */
|
|
/* DIE ZEILE IST LEISE UND ZU. „Von da verschwinden" heißt: nicht mehr
|
|
auf dem Brett. Sie steht trotzdem da, weil gelöscht etwas anderes
|
|
ist als abgehängt — wer eine Ansage geschrieben hat, soll sie
|
|
wiederfinden. */
|
|
.anschlag-alt__kopf {
|
|
display: flex; align-items: center; gap: 9px;
|
|
margin: 26px 0 10px;
|
|
font-size: .78rem; font-weight: 700;
|
|
letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.anschlag-alt__kopf::after {
|
|
content: ""; flex: 1 1 auto; height: 1px;
|
|
background: linear-gradient(90deg, var(--rand), transparent 70%);
|
|
}
|
|
.anschlag-alt__zahl {
|
|
padding: 1px 8px; border-radius: 999px;
|
|
border: 1px solid var(--rand);
|
|
font-size: .72rem; letter-spacing: 0;
|
|
}
|
|
.anschlag-alt { display: grid; gap: 10px; }
|
|
/* Sie sind grau, nicht halb durchsichtig: Durchsichtig hieße, dass
|
|
das Bühnenbild hindurchscheint — Text auf einem Foto, und ausgerechnet
|
|
der, den man selten liest. */
|
|
.anschlag-alt .eintrag-karte {
|
|
--anschlag: #6b7a8d;
|
|
filter: grayscale(.55);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
[data-bereich="anschlag"] .eintrag-karte { border-left: 3px solid CanvasText; }
|
|
.anschlag-alt__kopf::after { background: CanvasText; }
|
|
}
|
|
|
|
|
|
/* =====================================================================
|
|
NICHT ALLES AUF EINMAL (23.09.2026)
|
|
=====================================================================
|
|
|
|
Filipe: "ohne so dass es extrem lange listen gibt mit der zeit."
|
|
|
|
Der Knopf steht am Ende eines Abschnitts und sagt, wie viele noch
|
|
kommen. Er sieht bewusst NICHT aus wie eine Karte: Er ist die
|
|
Fortsetzung der Liste, kein weiterer Eintrag darin -- wer ihn fuer
|
|
eine Karte haelt, tippt ihn versehentlich an.
|
|
|
|
Ueber die ganze Breite, damit er in einer Galerie mit zwei Spalten
|
|
nicht als halbe Kachel danebensteht. */
|
|
.mehr-zeigen {
|
|
grid-column: 1 / -1;
|
|
width: 100%;
|
|
margin-top: 4px;
|
|
padding: 11px 14px;
|
|
font: inherit; font-size: .84rem;
|
|
color: var(--text-leise, #9fb3c8);
|
|
text-align: center; cursor: pointer;
|
|
background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
|
|
border: 1px dashed color-mix(in srgb, var(--rand) 80%, transparent);
|
|
border-radius: 10px;
|
|
transition: border-color .16s ease, color .16s ease;
|
|
}
|
|
.mehr-zeigen:hover, .mehr-zeigen:focus-visible {
|
|
color: var(--text);
|
|
border-color: color-mix(in srgb, var(--akzent) 50%, transparent);
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.mehr-zeigen { transition: none; }
|
|
}
|
|
|
|
/* Der Satz an einer Spalte, die sagt, was zu tun ist -- siehe
|
|
"Noch einzusortieren" in bereich.js. Leise, aber lesbar: Er ist eine
|
|
Anleitung, keine Warnung. */
|
|
.kanalspalte__satz {
|
|
grid-column: 1 / -1;
|
|
margin: 0 0 10px;
|
|
font-size: .82rem; line-height: 1.5;
|
|
color: var(--text-leise, #9fb3c8);
|
|
}
|
|
|
|
|
|
/* =====================================================================
|
|
GLIEDERT NACH ALTER (24.09.2026)
|
|
=====================================================================
|
|
|
|
Filipe: "ich will da unterkategorien die man auf und zu klappen
|
|
kann, so wie heute gestern, diese woche, diesen monate ..."
|
|
|
|
Der Kopf einer Gruppe ist KLEINER als der Kopf der Spalte darueber
|
|
-- er gliedert innerhalb, er teilt nicht neu ein. Gleich grosse
|
|
Koepfe auf zwei Ebenen lesen sich als eine, und dann weiss man
|
|
nicht mehr, was wozu gehoert.
|
|
|
|
Die Zahl daneben sagt, wie viel darin liegt. Zugeklappt ist sie die
|
|
einzige Auskunft, die die Gruppe noch gibt -- ohne sie waere eine
|
|
zugeklappte Zeile eine Ueberschrift ohne Inhalt, und niemand macht
|
|
sie je auf. */
|
|
.zeitgruppe__kopf {
|
|
grid-column: 1 / -1;
|
|
display: flex; align-items: center; gap: 9px;
|
|
width: 100%; margin: 12px 0 6px;
|
|
padding: 7px 10px;
|
|
font: inherit; font-size: .78rem; font-weight: 600;
|
|
letter-spacing: .04em; text-transform: uppercase;
|
|
color: var(--text-leise, #9fb3c8);
|
|
text-align: left; cursor: pointer;
|
|
background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
|
|
border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
|
|
border-radius: 9px;
|
|
}
|
|
.zeitgruppe__kopf:hover, .zeitgruppe__kopf:focus-visible {
|
|
color: var(--text);
|
|
border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
|
|
}
|
|
/* Die erste Gruppe braucht oben keinen Abstand -- darueber steht
|
|
schon der Kopf der Spalte. */
|
|
.zeitgruppe__kopf:first-child { margin-top: 2px; }
|
|
|
|
.zeitgruppe__wort { flex: 1 1 auto; min-width: 0; }
|
|
.zeitgruppe__zahl {
|
|
flex: none;
|
|
padding: 1px 8px;
|
|
font-size: .78rem; font-variant-numeric: tabular-nums;
|
|
color: var(--text);
|
|
background: color-mix(in srgb, var(--tinte) 70%, #ffffff 30%);
|
|
border-radius: 999px;
|
|
}
|
|
/* Der Pfeil sitzt rechts und dreht sich mit -- dieselbe Hilfe wie
|
|
ueberall (klappPfeil aus kopf.js). */
|
|
.zeitgruppe__kopf .klapp-pfeil { flex: none; }
|
|
|
|
/* Der Inhalt einer Gruppe ist wieder eine Galerie, genau wie die
|
|
Spalte es war -- die Kacheln sollen gleich aussehen, egal ob
|
|
gegliedert wird oder nicht. */
|
|
.zeitgruppe__inhalt[data-galerie="ja"] {
|
|
grid-column: 1 / -1;
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
|
}
|
|
|
|
/* =====================================================================
|
|
AGENTUR-EVENTS: DIE KARTE ALS AUSHANG (03.10.2026)
|
|
|
|
Filipe, mit einem Bildschirmfoto des Oktober-Events: "ich will das
|
|
viel geiler viel perfekter. und auch wenn man die eintraegt und so
|
|
soll viel mehr perfektioniert und uebersichtlicher sein. mach was
|
|
hoch profissionelles bitte."
|
|
|
|
WAS VORHER GEMESSEN WURDE (1280 px, eine einzige Karte):
|
|
|
|
Kartenhoehe 1196 px -- Fenster ist 900 px
|
|
davon Banner 638 px -- 53 %, ohne einen Buchstaben
|
|
Titel steht bei 1482 px -- zweimal scrollen bis zum Namen
|
|
Titelgroesse 15,36 px -- 1,4 px mehr als der Fliesstext
|
|
Etikett 10,88 px -- unter der eigenen Grenze (11,5)
|
|
Datum 3 x -- in drei Zeilen untereinander
|
|
Knoepfe 4 x gleich -- "loeschen" wie "zur Aufgabe"
|
|
|
|
WAS SICH DARAUS ERGIBT: Das Bild bleibt gross, traegt aber den Titel.
|
|
Der Zeitraum steht einmal, mit der Antwort davor ("noch 13 Tage").
|
|
Aufgaben werden zu einer Liste, die man abhaken kann. Und "loeschen"
|
|
sieht nicht mehr aus wie "zur Aufgabe".
|
|
|
|
AUGENSCHONEND BLEIBT ES: keine neuen Signalfarben, kein Leuchten,
|
|
kein Blinken. Die Toene kommen aus der vorhandenen Palette
|
|
(--k-gut / --k-mittel / --k-neutral / --akzent), die Bewegung ist
|
|
dieselbe wie ueberall (--tempo) und faellt bei
|
|
prefers-reduced-motion ganz weg.
|
|
===================================================================== */
|
|
|
|
/* Eine Eventkarte traegt ihre eigene Polsterung: Die Buehne geht bis an
|
|
den Rand, der Rest nicht. Deshalb hier null -- die Abstaende setzen
|
|
die Teile selbst. */
|
|
.eintrag-karte[data-eventkarte="ja"] {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
/* Der farbige Streifen links kam von der Dringlichkeit und sagte bei
|
|
einem Event nichts: Jedes Event stand auf "mittel", also hatte
|
|
jedes denselben blauen Strich. Den Zustand traegt jetzt die Buehne,
|
|
und zwar in der Farbe, die ihn bedeutet. */
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DIE BUEHNE
|
|
--------------------------------------------------------------------- */
|
|
.ev-buehne {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* NICHT `justify-content: flex-end` (berichtigt 07.10.2026).
|
|
|
|
Beides schiebt den Inhalt nach unten, solange Platz ist. Der
|
|
Unterschied zeigt sich erst, wenn KEINER mehr da ist: `flex-end`
|
|
laesst den Inhalt oben aus der Buehne herauslaufen -- und die
|
|
Karte hat ein `clip-path`, also ist er dann einfach weg.
|
|
|
|
Gemessen am 07.10.2026, nachdem die Karten halb so breit wurden:
|
|
Auf der Karte „September Rueckblick" sass das Etikett
|
|
„Agentur-Events" bei y = -28 px, also 28 px ueber der Kartenkante.
|
|
Im Bildschirmfoto fehlte es schlicht; die Messung sagte trotzdem
|
|
„sichtbar, Deckkraft 1" -- sie hatte nur nie nach der LAGE gefragt.
|
|
|
|
`margin-top: auto` am Inhalt tut dasselbe und kann das nicht:
|
|
Reicht der Platz nicht, beginnt der Inhalt oben, statt
|
|
herauszulaufen. */
|
|
justify-content: flex-start;
|
|
/* DIE HOEHE IST GEDECKELT, UND ZWAR ZWEIFACH.
|
|
|
|
aspect-ratio haelt die Form bei schmalen Karten (sonst waere die
|
|
Buehne auf dem Handy ein Briefschlitz), max-height faengt die
|
|
breiten ab: Bei 1230 px Kartenbreite waeren 2.6/1 immer noch
|
|
473 px -- mehr als ein Drittel eines Laptopbildschirms fuer ein
|
|
Bild, auf dem der Titel steht.
|
|
|
|
Gemessen: 638 px vorher, 300 px jetzt. */
|
|
/* `width: 100%` IST PFLICHT, NICHT ZIERDE (gemessen 03.10.2026).
|
|
|
|
Ohne sie schrumpft `aspect-ratio` zusammen mit `max-height` auch
|
|
die BREITE: In der ersten Fassung war die Buehne 780 px breit in
|
|
einer 1230 px breiten Karte -- das Banner stand als Kachel links,
|
|
rechts daneben lag ein Drittel Leere. Das sah aus wie ein
|
|
Ladefehler und war eine Rechenregel: 300 px Hoehe x 2.6 = 780 px.
|
|
|
|
Mit fester Breite berechnet aspect-ratio nur noch die Hoehe
|
|
(1230 / 2.6 = 473 px), und max-height deckelt sie auf 300. */
|
|
width: 100%;
|
|
/* ===== DIE HOEHE KOMMT VOM INHALT, NICHT VON DER BREITE ==========
|
|
(07.10.2026, nachgemessen)
|
|
|
|
Hier stand `aspect-ratio: 2.6/1` mit `max-height: 300px`. Das war
|
|
richtig, solange die Karte ueber die ganze Breite lief: Die Buehne
|
|
war dann 300 px hoch und der Titel passte bequem hinein.
|
|
|
|
Seit die Eventkarten nur noch halb so breit sind, bricht der Titel
|
|
auf mehr Zeilen um -- und die Hoehe kam weiterhin aus der BREITE:
|
|
573 / 2.6 = 220 px. Gemessen am 07.10.2026:
|
|
|
|
Oktober Event Inhalt 231 px, Kasten 220 px
|
|
September Rueckblick Inhalt 189 px, Kasten 159 px
|
|
|
|
Der Ueberhang lief unten heraus und legte den Zeitbalken auf den
|
|
Satz darunter. Eine Form, die aus der Breite folgt, kann das nicht
|
|
wissen -- und der Fehler faellt genau dann auf, wenn die Breite
|
|
sich aendert.
|
|
|
|
JETZT: eine Mindesthoehe, damit die Buehne auf einer schmalen Karte
|
|
kein Briefschlitz wird, und sonst so hoch, wie der Inhalt es
|
|
braucht. Das Banner liegt absolut darin (`inset: 0`, `object-fit:
|
|
cover`) und fuellt jede Hoehe -- es braucht die Rechnung gar nicht.
|
|
Der frueher noetige 300-px-Deckel ist damit hinfaellig: Die Hoehe
|
|
waechst nicht mehr mit der Breite, sondern mit dem Titel.
|
|
|
|
`flex: 0 0 auto` kommt dazu, weil die Buehne ein Flex-Element der
|
|
Karte ist und sonst zusammengedrueckt werden darf -- genau das,
|
|
was hier gerade schiefging, nur von aussen. */
|
|
min-height: 170px;
|
|
flex: 0 0 auto;
|
|
/* DIE SEITLICHE POLSTERUNG HAT EINEN NAMEN, weil der Schriftgrund
|
|
darunter sie braucht: Er muss genau bis an den Rand der Buehne
|
|
reichen und keinen Schritt weiter. Mit einer zweiten festen Zahl
|
|
ging das schief -- auf dem Handy betraegt die Polsterung 14 px,
|
|
der Grund rechnete aber weiter mit 20, und die Karte war 6 px
|
|
breiter als ihr Fenster (gemessen 03.10.2026, scrollWidth gegen
|
|
clientWidth).
|
|
Gefunden hat das die Pruefung, nicht das Auge: `overflow: hidden`
|
|
an der Karte hat den Ueberhang unsichtbar gemacht. Und mein erster
|
|
Suchlauf nach dem Verursacher kam leer zurueck -- ein ::before ist
|
|
kein Element, `querySelectorAll("*")` findet es nicht. */
|
|
--ev-rand: 20px;
|
|
padding: 44px var(--ev-rand) 16px;
|
|
background:
|
|
radial-gradient(120% 140% at 18% 0%,
|
|
color-mix(in srgb, var(--violett, #8a76ff) 26%, transparent), transparent 62%),
|
|
linear-gradient(160deg,
|
|
color-mix(in srgb, var(--akzent, #3fbdf5) 16%, transparent),
|
|
rgba(255, 255, 255, .02));
|
|
}
|
|
|
|
/* OHNE BILD WIRD DIE BUEHNE FLACHER. Ein Farbverlauf braucht keine
|
|
300 px, um zu wirken -- und eine halbleere Flaeche ueber drei Zeilen
|
|
Text sieht aus, als fehle etwas. */
|
|
.ev-buehne:not([data-mitbild="ja"]) {
|
|
aspect-ratio: auto;
|
|
min-height: 0;
|
|
padding-top: 18px;
|
|
}
|
|
|
|
.ev-buehne__bild {
|
|
position: absolute; inset: 0;
|
|
width: 100%; height: 100%;
|
|
object-fit: cover;
|
|
/* NICHT MITTIG, SONDERN ETWAS HOEHER: Auf einem Event-Banner steht
|
|
die Aussage meistens im oberen Drittel ("Schaffst du es, ab HEUTE
|
|
bis zum 16.10.2026"), waehrend unten die Preise stehen. Wird
|
|
beschnitten, soll die Aussage uebrig bleiben. */
|
|
object-position: center 38%;
|
|
}
|
|
|
|
/* DER SCHLEIER MACHT DIE SCHRIFT LESBAR, UND ZWAR IMMER.
|
|
|
|
Welches Bild jemand spaeter hochlaedt, weiss heute niemand -- ein
|
|
helles Banner ergaebe ohne ihn helle Schrift auf Hell. Deshalb kein
|
|
"nur bei hellen Bildern": Der Verlauf liegt grundsaetzlich darunter.
|
|
|
|
Nach oben laeuft er aus, damit das Bild oben unberuehrt bleibt; das
|
|
ist die Haelfte, die man sehen will. */
|
|
.ev-buehne__schleier {
|
|
position: absolute; inset: 0;
|
|
/* DIE KURVE IST NACHGEMESSEN, NICHT GESCHAETZT (03.10.2026).
|
|
|
|
Die erste Fassung lief schon bei 26 % der Hoehe auf .82 Deckung --
|
|
damit war von einem Banner praktisch nichts mehr uebrig, und genau
|
|
das Bild, das Filipe hochlaedt, war weg. Jetzt ist der Schleier
|
|
dort stark, wo die Schrift steht (unterste 30 %), und laeuft
|
|
darueber schnell aus: Ab der Haelfte sieht man das Banner fast
|
|
unberuehrt.
|
|
|
|
DIE UNTERSTE STUFE BLEIBT KRAEFTIG. Sie ist es, die den Titel auch
|
|
auf einem weissen Banner lesbar haelt -- und was jemand spaeter
|
|
hochlaedt, weiss heute niemand. Nachgemessen wird das Ergebnis am
|
|
Bildpunkt (siehe pruef-eventkarte.mjs), nicht an dieser Zahl. */
|
|
background: linear-gradient(to top,
|
|
rgba(5, 8, 14, .92) 0%,
|
|
rgba(5, 8, 14, .78) 18%,
|
|
rgba(5, 8, 14, .46) 34%,
|
|
rgba(5, 8, 14, .16) 52%,
|
|
rgba(5, 8, 14, .02) 74%,
|
|
transparent 100%);
|
|
pointer-events: none;
|
|
}
|
|
/* Ohne Bild gibt es nichts abzudunkeln -- der Verlauf wuerde dann nur
|
|
den eigenen Farbverlauf zumatschen. */
|
|
.ev-buehne:not([data-mitbild="ja"]) .ev-buehne__schleier { display: none; }
|
|
|
|
/* ==== DIE SCHRIFT BRAUCHT IHREN EIGENEN GRUND (03.10.2026) ==========
|
|
|
|
NACHGEMESSEN, UND ZWAR AM HAERTEFALL: Mit einem fast weissen Banner
|
|
(250,248,252) stand "November Challenge" in heller Schrift auf
|
|
hellgrauem Grund -- unlesbar. Der Schleier allein reicht dafuer
|
|
nicht: Er ist ein Verlauf ueber die ganze Buehne und muesste, um
|
|
auch Weiss zu decken, so kraeftig sein, dass von einem dunklen
|
|
Banner nichts uebrig bliebe. Ein Wert, der fuer beide Faelle passt,
|
|
existiert nicht.
|
|
|
|
ALSO ZWEI EBENEN STATT EINER:
|
|
der Schleier -- sanft, fuer das Gesamtbild
|
|
dieser Grund -- kraeftig, aber nur hinter der Schrift
|
|
|
|
Er reicht 34 px ueber den Text hinaus und laeuft nach oben aus,
|
|
damit keine sichtbare Kante entsteht. Die Deckung unten (.93) ist
|
|
nicht geschaetzt: Sie ist der Wert, bei dem der Titel auch auf
|
|
reinem Weiss ueber 4,5:1 kommt -- gemessen am Bildpunkt in
|
|
pruef-eventkarte.mjs, nicht gerechnet.
|
|
|
|
WARUM NICHT EINFACH EIN KASTEN: Eine sichtbare Flaeche unter dem
|
|
Titel saehe aus wie ein Balken, der ueber dem Bild klebt. Der
|
|
Verlauf gehoert zur Buehne und faellt nicht auf -- bis man ihn
|
|
braucht. */
|
|
/* ---- "Banner ganz" ---------------------------------------------------
|
|
Oben rechts, klein, und nur dort, wo es ein Bild gibt. Er liegt UEBER
|
|
dem Schleier (der Schleier hat `pointer-events: none`, trotzdem
|
|
braucht der Knopf seine eigene Ebene) und bringt seinen eigenen
|
|
dunklen Grund mit -- auf einem hellen Banner waere er sonst
|
|
unsichtbar, genau wie es dem Titel erging. */
|
|
.ev-buehne__ganz {
|
|
position: absolute; top: 12px; right: 12px;
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
/* 34 px hoch mit 10 px Polsterung: Auf dem Handy wird daraus unten
|
|
ein 44-px-Ziel. */
|
|
padding: 7px 11px;
|
|
border: 1px solid rgba(255, 255, 255, .16);
|
|
border-radius: 999px;
|
|
background: rgba(8, 11, 18, .72);
|
|
backdrop-filter: blur(7px);
|
|
color: #dce7f3;
|
|
font-size: .74rem; font-weight: 600;
|
|
text-decoration: none;
|
|
transition: background var(--tempo, .22s), border-color var(--tempo, .22s);
|
|
}
|
|
.ev-buehne__ganz:hover {
|
|
background: rgba(8, 11, 18, .9);
|
|
border-color: rgba(255, 255, 255, .3);
|
|
}
|
|
.ev-buehne__ganz:focus-visible {
|
|
outline: 2px solid var(--akzent, #3fbdf5);
|
|
outline-offset: 2px;
|
|
}
|
|
/* Die Lupe ist gezeichnet, kein Schriftzeichen: Ein Symbol aus der
|
|
Schrift faellt auf manchen Systemen aus oder kommt als Kaestchen. */
|
|
.ev-buehne__ganz-zeichen {
|
|
flex: none; position: relative;
|
|
width: 13px; height: 13px;
|
|
border: 1.5px solid currentColor;
|
|
border-radius: 3px;
|
|
}
|
|
.ev-buehne__ganz-zeichen::before,
|
|
.ev-buehne__ganz-zeichen::after {
|
|
content: ""; position: absolute;
|
|
background: currentColor;
|
|
}
|
|
.ev-buehne__ganz-zeichen::before { left: 2.5px; top: 5px; width: 6px; height: 1.4px; }
|
|
.ev-buehne__ganz-zeichen::after { left: 4.8px; top: 2.7px; width: 1.4px; height: 6px; }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ev-buehne__ganz { transition: none; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.ev-buehne__ganz { top: 9px; right: 9px; padding: 9px 12px; }
|
|
/* Auf schmalen Schirmen nur die Lupe -- "Banner ganz" neben einem
|
|
Titel, der ohnehin umbricht, kostet eine Zeile. Die Beschriftung
|
|
bleibt fuer Vorleseprogramme erhalten (aria-label), sie wird nur
|
|
nicht gezeigt. */
|
|
.ev-buehne__ganz-wort {
|
|
position: absolute; width: 1px; height: 1px;
|
|
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
/* `margin-top: auto` statt `justify-content: flex-end` an der Buehne --
|
|
die Begruendung steht dort. Der Inhalt ist das einzige Stueck der
|
|
Buehne, das im Fluss liegt (Bild, Schleier und der Knopf „Banner
|
|
ganz" sind absolut gesetzt), deshalb genuegt diese eine Zeile. */
|
|
.ev-buehne__inhalt { position: relative; margin-top: auto; }
|
|
.ev-buehne[data-mitbild="ja"] .ev-buehne__inhalt::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: calc(-1 * var(--ev-rand)); right: calc(-1 * var(--ev-rand));
|
|
bottom: -16px; top: -34px;
|
|
background: linear-gradient(to top,
|
|
rgba(4, 7, 12, .93) 0%,
|
|
rgba(4, 7, 12, .90) 52%,
|
|
rgba(4, 7, 12, .62) 82%,
|
|
rgba(4, 7, 12, 0) 100%);
|
|
pointer-events: none;
|
|
}
|
|
/* Die Kinder muessen UEBER diesen Grund -- ein absolut gesetztes
|
|
::before liegt sonst ueber allem, was selbst nicht positioniert ist,
|
|
und der Titel waere verschwunden. Genau so ist es beim ersten
|
|
Versuch passiert. */
|
|
.ev-buehne__kopf, .ev-zeit, .ev-zeitbalken { position: relative; }
|
|
|
|
/* ---- Titelzeile auf der Buehne -------------------------------------- */
|
|
.ev-buehne__kopf { align-items: center; gap: 8px 10px; }
|
|
|
|
/* DER TITEL IST DER TITEL (gemessen: vorher 15,36 px, also 1,4 px mehr
|
|
als der Text darunter -- das liest niemand als Ueberschrift).
|
|
|
|
clamp statt fester Zahl: Eine feste Groesse ist eine Rechnung von
|
|
gestern, sobald die Karte breiter oder schmaler wird. Hier skaliert
|
|
sie mit der Breite und bleibt zwischen 1,15 rem (18,4 px) und
|
|
1,55 rem (24,8 px). */
|
|
.eintrag-karte[data-eventkarte="ja"] .eintrag-titel {
|
|
flex: 1 1 100%;
|
|
font-size: clamp(1.15rem, 2.4vw, 1.55rem);
|
|
font-weight: 700;
|
|
line-height: 1.22;
|
|
letter-spacing: -.01em;
|
|
color: #f2f6fb;
|
|
/* Der Schatten ist keine Zierde: Er haelt den Titel auch dann
|
|
lesbar, wenn genau an dieser Stelle ein heller Fleck im Banner
|
|
liegt -- und das sieht man einem Bild vorher nicht an. */
|
|
text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
|
|
}
|
|
|
|
/* DAS ETIKETT: 10,88 px waren unter der projekteigenen Grenze von
|
|
11,5 px -- angehoben wurde es bisher nur auf dem Handy. Hier gilt
|
|
dieselbe Groesse auf jedem Geraet; eine Grenze, die nur bei schmalen
|
|
Fenstern gilt, ist keine Grenze. */
|
|
.eintrag-karte[data-eventkarte="ja"] .marke-art {
|
|
font-size: .75rem;
|
|
padding: 2px 10px;
|
|
background: rgba(10, 14, 22, .62);
|
|
border: 1px solid rgba(255, 255, 255, .14);
|
|
backdrop-filter: blur(6px);
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* ---- Die Zeitzeile -------------------------------------------------- */
|
|
.ev-zeit {
|
|
display: flex; align-items: center; flex-wrap: wrap;
|
|
gap: 6px 10px;
|
|
margin: 10px 0 0;
|
|
font-size: .84rem;
|
|
}
|
|
|
|
/* "noch 13 Tage" -- die Antwort, nicht der Beleg. Deshalb die kraeftige
|
|
Marke, waehrend das Datum daneben leise bleibt. */
|
|
.ev-noch {
|
|
--f: var(--k-neutral, #8e9cb0);
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
padding: 4px 12px;
|
|
border: 1px solid color-mix(in srgb, var(--f) 40%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--f) 16%, rgba(8, 11, 18, .72));
|
|
color: color-mix(in srgb, var(--f) 72%, #ffffff);
|
|
font-weight: 650;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
.ev-noch::before {
|
|
content: ""; width: 7px; height: 7px; border-radius: 50%;
|
|
background: var(--f); flex: none;
|
|
}
|
|
.ev-noch[data-stand="laeuft"] { --f: var(--k-gut, #5fc99a); }
|
|
.ev-noch[data-stand="kommt"] { --f: var(--k-mittel, #e8b877); }
|
|
.ev-noch[data-stand="vorbei"] { --f: var(--k-neutral, #8e9cb0); }
|
|
/* DIE LETZTEN TAGE SIND NICHT ROT.
|
|
|
|
Signalrot waere hier falsch: Ein auslaufendes Event ist kein Fehler,
|
|
sondern der Normalfall -- jedes endet. Es wird nur waermer und
|
|
kraeftiger, damit man es im Vorbeischauen sieht, ohne erschreckt zu
|
|
werden. */
|
|
.ev-noch[data-dringend="ja"] {
|
|
--f: var(--k-mittel, #e8b877);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ev-spanne {
|
|
color: #c3d2e2;
|
|
font-variant-numeric: tabular-nums;
|
|
text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
|
|
}
|
|
|
|
/* ---- Der Zeitbalken -------------------------------------------------- */
|
|
.ev-zeitbalken {
|
|
position: relative;
|
|
height: 4px;
|
|
margin-top: 12px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, .14);
|
|
overflow: hidden;
|
|
}
|
|
.ev-zeitbalken__fuellung {
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(90deg,
|
|
color-mix(in srgb, var(--akzent, #3fbdf5) 70%, transparent),
|
|
color-mix(in srgb, var(--violett, #8a76ff) 80%, transparent));
|
|
transition: width var(--tempo, .22s) ease;
|
|
}
|
|
.ev-buehne[data-stand="vorbei"] .ev-zeitbalken__fuellung {
|
|
background: rgba(255, 255, 255, .26);
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ev-zeitbalken__fuellung { transition: none; }
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DER KOERPER: Text, Aufgaben, Regeln
|
|
--------------------------------------------------------------------- */
|
|
.eintrag-karte[data-eventkarte="ja"] .eintrag-text {
|
|
margin: 14px 18px 0;
|
|
color: var(--text-leise);
|
|
/* EINE ZEILE HAT EINE LESBARE LAENGE. Auf 1280 px lief der
|
|
Erklaertext ueber 1120 px -- rund 150 Zeichen je Zeile. Das Auge
|
|
findet den Anfang der naechsten Zeile dann nicht mehr zuverlaessig;
|
|
die gaengige Empfehlung liegt bei 45 bis 75 Zeichen. 72ch ist das
|
|
obere Ende davon und passt zu dieser Schriftgroesse. */
|
|
max-width: 72ch;
|
|
}
|
|
|
|
/* ZWEI SPALTEN, WENN PLATZ IST -- GEMESSEN, NICHT GERECHNET.
|
|
|
|
`auto-fit` mit einer Mindestbreite bricht genau dann um, wenn eine
|
|
Spalte unter 300 px fiele. Das ist der Unterschied zu einer
|
|
Fensterbreite in einer Zahl: Kommt irgendwann ein dritter Block
|
|
dazu oder wird die Karte in einer schmaleren Spalte gezeigt, stimmt
|
|
es weiterhin, ohne dass jemand die Zahl nachzieht.
|
|
|
|
(Die Lehre dazu steht im Projektgedaechtnis unter dem 06.09.2026:
|
|
eine feste Schwelle, die beim Hinzufuegen des naechsten Elements
|
|
nicht nachgezogen wurde, hat zwoelf Seiten lang den falschen Knopf
|
|
getroffen.) */
|
|
.ev-bloecke {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 14px;
|
|
align-items: start;
|
|
margin: 14px 18px 0;
|
|
}
|
|
.ev-bloecke .ev-block { margin: 0; }
|
|
|
|
.ev-block {
|
|
margin: 14px 18px 0;
|
|
padding: 13px 15px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
background: rgba(255, 255, 255, .022);
|
|
}
|
|
|
|
/* AUFGABEN UND REGELN SEHEN NICHT MEHR GLEICH AUS.
|
|
|
|
Vorher waren es zwei identische graue Kaesten untereinander -- "was
|
|
ich tun soll" und "was dabei gilt" wirkten damit gleich wichtig.
|
|
Die Aufgaben sind das, weswegen jemand hier ist; sie bekommen einen
|
|
Rand in der Hausfarbe. Die Regeln treten zurueck, ohne zu
|
|
verschwinden. */
|
|
.ev-block--aufgaben {
|
|
border-color: color-mix(in srgb, var(--akzent, #3fbdf5) 24%, var(--rand));
|
|
background:
|
|
linear-gradient(180deg,
|
|
color-mix(in srgb, var(--akzent, #3fbdf5) 7%, transparent),
|
|
transparent 58%),
|
|
rgba(255, 255, 255, .022);
|
|
}
|
|
.ev-block--regeln { background: rgba(255, 255, 255, .012); }
|
|
/* Alles geschafft: ein ruhiger gruener Rand, kein Konfetti. */
|
|
.ev-block--aufgaben[data-fertig="ja"] {
|
|
border-color: color-mix(in srgb, var(--k-gut, #5fc99a) 34%, var(--rand));
|
|
}
|
|
|
|
.ev-block__kopf {
|
|
display: flex; align-items: baseline;
|
|
gap: 10px; margin-bottom: 9px;
|
|
}
|
|
/* DIE ZAHL GEHOERT ZUR UEBERSCHRIFT, NICHT AN DEN RAND.
|
|
|
|
Mit `justify-content: space-between` stand "0 von 3" auf einer
|
|
1160 px breiten Karte rund einen Meter von dem Wort entfernt, auf
|
|
das es sich bezieht -- man liest es dann als zwei verschiedene
|
|
Angaben. Jetzt steht es direkt daneben, abgesetzt durch einen
|
|
Trennpunkt statt durch Leere. */
|
|
.ev-zaehler::before {
|
|
content: "·";
|
|
margin-right: 8px;
|
|
color: var(--text-still);
|
|
opacity: .7;
|
|
}
|
|
.ev-block__schild {
|
|
margin: 0;
|
|
/* .75rem = 12 px. Nicht kleiner: In Grossbuchstaben mit Sperrung
|
|
wirkt eine Schrift kleiner, als die Zahl sagt -- die Begruendung
|
|
steht so schon beim alten .event-block__schild. */
|
|
font-size: .75rem; font-weight: 700;
|
|
letter-spacing: .09em; text-transform: uppercase;
|
|
color: var(--text-leise);
|
|
}
|
|
|
|
/* "1 von 3" -- die Zahl gehoert neben die Ueberschrift und nicht
|
|
darunter: Sie ist die Zusammenfassung der Liste, nicht ihr erster
|
|
Eintrag. tabular-nums, damit sie beim Hochzaehlen nicht springt. */
|
|
.ev-zaehler {
|
|
font-size: .78rem; font-weight: 650;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--text-still);
|
|
white-space: nowrap;
|
|
}
|
|
.ev-zaehler[data-voll="ja"] { color: var(--k-gut, #5fc99a); }
|
|
|
|
/* ---- Die Liste ------------------------------------------------------- */
|
|
.ev-liste {
|
|
list-style: none;
|
|
margin: 0; padding: 0;
|
|
display: flex; flex-direction: column; gap: 2px;
|
|
}
|
|
.ev-punkt { margin: 0; }
|
|
|
|
/* EIN VORBEIGELAUFENES EVENT HAT KEINE KNOEPFE -- und ohne den Knopf
|
|
fehlte der Zeile seine Polsterung: Beim ersten Lauf klebte
|
|
"20 Live-Stunden" am linken Rand des Kastens, waehrend dieselbe
|
|
Liste eine Karte darueber ordentlich eingerueckt stand. Zwei Listen
|
|
nebeneinander, die verschieden aussehen, liest man als Fehler.
|
|
|
|
Deshalb bekommt die reine Anzeigezeile dasselbe Raster wie der
|
|
Knopf -- nur eben ohne Hintergrund und ohne Zeiger. */
|
|
/* `:not(.ev-punkt--regel)` ist am 07.10.2026 entfallen: Diese
|
|
Klasse gibt es nicht mehr (sie heisst jetzt `.ev-zeile` und ist
|
|
kein `.ev-punkt`). Ein `:not()` auf eine Klasse, die niemand
|
|
mehr setzt, schliesst nichts aus und liest sich wie eine
|
|
Bedingung, die es noch gibt. */
|
|
.ev-punkt:not(:has(.ev-punkt__knopf)) {
|
|
display: flex; align-items: flex-start; gap: 10px;
|
|
padding: 9px 10px;
|
|
font-size: .9rem; line-height: 1.45;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* DER GANZE PUNKT IST DER KNOPF, nicht nur ein Kaestchen daneben.
|
|
|
|
Ein 16-px-Kaestchen ist auf dem Handy ein Ziel von 16 x 16 px -- die
|
|
gaengige Mindestgroesse liegt bei 44 x 44. Wer danebentippt, denkt,
|
|
es sei kaputt. Die ganze Zeile zu nehmen loest beides: Das Ziel ist
|
|
so breit wie die Karte, und man muss nicht zielen. */
|
|
.ev-punkt__knopf {
|
|
display: flex; align-items: flex-start; gap: 10px;
|
|
width: 100%;
|
|
padding: 9px 10px;
|
|
margin: 0;
|
|
border: 1px solid transparent;
|
|
border-radius: 9px;
|
|
background: transparent;
|
|
color: var(--text);
|
|
font: inherit;
|
|
font-size: .9rem;
|
|
line-height: 1.45;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: background var(--tempo, .22s), border-color var(--tempo, .22s);
|
|
}
|
|
.ev-punkt__knopf:hover {
|
|
background: rgba(255, 255, 255, .04);
|
|
border-color: var(--rand);
|
|
}
|
|
.ev-punkt__knopf:focus-visible {
|
|
outline: 2px solid var(--akzent, #3fbdf5);
|
|
outline-offset: 1px;
|
|
}
|
|
.ev-punkt__knopf[disabled] { opacity: .6; cursor: progress; }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ev-punkt__knopf { transition: none; }
|
|
}
|
|
|
|
/* Das Kaestchen. Leer ein Rahmen, voll ein Haken -- und der Haken ist
|
|
gezeichnet (clip-path), kein Schriftzeichen: Ein Haken aus der
|
|
Schrift sieht auf jedem System anders aus und faellt auf manchen
|
|
ganz aus. */
|
|
.ev-punkt__kaestchen {
|
|
flex: none;
|
|
width: 19px; height: 19px;
|
|
margin-top: 1px;
|
|
/* 62 % waren im Bildschirmfoto kaum auszumachen -- ein Kaestchen,
|
|
das man suchen muss, laedt nicht zum Anfassen ein. Auf 92 %
|
|
angehoben und mit etwas mehr Fuellung dahinter. */
|
|
border: 1.5px solid color-mix(in srgb, var(--text-still) 92%, transparent);
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, .055);
|
|
position: relative;
|
|
transition: background var(--tempo, .22s), border-color var(--tempo, .22s);
|
|
}
|
|
.ev-punkt__kaestchen::after {
|
|
content: "";
|
|
position: absolute; left: 4px; top: 4px;
|
|
width: 9px; height: 5px;
|
|
border-left: 2px solid #07101a;
|
|
border-bottom: 2px solid #07101a;
|
|
transform: rotate(-45deg) scale(.6);
|
|
opacity: 0;
|
|
transition: opacity var(--tempo, .22s), transform var(--tempo, .22s);
|
|
}
|
|
.ev-punkt[data-abgehakt="ja"] .ev-punkt__kaestchen {
|
|
background: var(--k-gut, #5fc99a);
|
|
border-color: var(--k-gut, #5fc99a);
|
|
}
|
|
.ev-punkt[data-abgehakt="ja"] .ev-punkt__kaestchen::after {
|
|
opacity: 1; transform: rotate(-45deg) scale(1);
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ev-punkt__kaestchen, .ev-punkt__kaestchen::after { transition: none; }
|
|
}
|
|
|
|
/* ABGEHAKT WIRD NICHT DURCHGESTRICHEN.
|
|
|
|
Durchgestrichener Text ist schlecht lesbar, und man will ihn
|
|
weiterhin lesen koennen -- "22 Live-Stunden" bleibt die Bedingung,
|
|
auch wenn sie erfuellt ist. Der Haken sagt es bereits; die Schrift
|
|
tritt nur leicht zurueck. */
|
|
.ev-punkt[data-abgehakt="ja"] .ev-punkt__text { color: var(--text-leise); }
|
|
.ev-punkt__text { flex: 1 1 auto; overflow-wrap: anywhere; }
|
|
|
|
/* Eine Zeile in einem Abschnitt: dasselbe Raster wie bei den
|
|
Aufgaben, aber ein Strich statt eines Kaestchens -- man sieht auf
|
|
einen Blick, dass hier nichts zu tun ist.
|
|
|
|
HIESS BIS ZUM 07.10.2026 `.ev-punkt--regel` und stand in einer
|
|
flachen Regelliste. Die gibt es nicht mehr (siehe `gliederung()`
|
|
in kampagne-lesen.mjs); umbenannt statt verdoppelt, damit nicht
|
|
zwei Zeilenstile mit demselben Aussehen nebeneinander liegen. */
|
|
.ev-zeile {
|
|
display: flex; align-items: flex-start; gap: 10px;
|
|
margin: 0; padding: 5px 2px;
|
|
font-size: .87rem; line-height: 1.55;
|
|
color: var(--text-leise);
|
|
}
|
|
.ev-zeile__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
|
|
.ev-punkt__zeichen,
|
|
.ev-zeile__zeichen {
|
|
flex: none;
|
|
width: 19px; height: 19px;
|
|
margin-top: 1px;
|
|
position: relative;
|
|
}
|
|
.ev-punkt__zeichen::before,
|
|
.ev-zeile__zeichen::before {
|
|
content: "";
|
|
position: absolute; left: 3px; top: 9px;
|
|
width: 11px; height: 1.5px;
|
|
border-radius: 2px;
|
|
background: color-mix(in srgb, var(--text-still) 52%, transparent);
|
|
}
|
|
|
|
/* Der Rueckfall, wenn der Server keine Punkteliste schickt. */
|
|
.ev-rohtext {
|
|
margin: 0;
|
|
font-size: .87rem; line-height: 1.6; color: var(--text);
|
|
white-space: pre-line;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* ---- Wer macht mit (nur fuer die Leitung) ---------------------------- */
|
|
.ev-mitmacher {
|
|
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
|
|
margin-top: 11px; padding-top: 10px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.ev-mitmacher__schild {
|
|
font-size: .72rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
margin-right: 2px;
|
|
}
|
|
.ev-mitmacher__person {
|
|
padding: 2px 9px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, .03);
|
|
font-size: .76rem;
|
|
color: var(--text-leise);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.ev-mitmacher__person[data-voll="ja"] {
|
|
border-color: color-mix(in srgb, var(--k-gut, #5fc99a) 40%, transparent);
|
|
color: color-mix(in srgb, var(--k-gut, #5fc99a) 80%, #ffffff);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DER FUSS
|
|
--------------------------------------------------------------------- */
|
|
.eintrag-karte[data-eventkarte="ja"] .eintrag-fuss {
|
|
margin: 16px 0 0;
|
|
padding: 12px 18px 15px;
|
|
border-top: 1px solid var(--rand);
|
|
background: rgba(255, 255, 255, .012);
|
|
}
|
|
.eintrag-karte[data-eventkarte="ja"] .ampel {
|
|
margin: 0; padding: 11px 18px 14px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
|
|
/* LOESCHEN SIEHT NICHT MEHR AUS WIE "ZUR AUFGABE".
|
|
|
|
Gemessen waren es vier gleich grosse, gleich graue Pillen
|
|
nebeneinander -- darunter die eine, die man nicht rueckgaengig
|
|
machen kann. Sie rutscht jetzt mit einem Abstand nach rechts weg und
|
|
bekommt einen warmen Ton. KEIN Signalrot und keine Fuellung: Der
|
|
Knopf soll sich unterscheiden, nicht drohen; erst beim Ueberfahren
|
|
wird er deutlicher. */
|
|
.eintrag-karte[data-eventkarte="ja"] .schritt--gefahr {
|
|
margin-left: 10px;
|
|
color: color-mix(in srgb, var(--warn, #ff9aa2) 72%, var(--text-still));
|
|
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 26%, transparent);
|
|
}
|
|
.eintrag-karte[data-eventkarte="ja"] .schritt--gefahr:hover {
|
|
color: var(--warn, #ff9aa2);
|
|
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 52%, transparent);
|
|
background: color-mix(in srgb, var(--warn, #ff9aa2) 10%, transparent);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
EIN VORBEIGELAUFENES EVENT
|
|
--------------------------------------------------------------------- */
|
|
/* Die alte Regel dimmte die ganze Karte auf .82 -- damit war ein
|
|
abgelaufenes Event kaum von einem laufenden zu unterscheiden, und der
|
|
Text wurde schlechter lesbar, ohne dass es etwas brachte.
|
|
|
|
Jetzt tritt nur das BILD zurueck (entsaettigt und abgedunkelt). Der
|
|
Text behaelt seinen vollen Kontrast: "alt" ist kein Grund, jemanden
|
|
vom Lesen auszuschliessen. */
|
|
.eintrag-karte[data-eventkarte="ja"][data-event="vorbei"] { opacity: 1; }
|
|
.ev-buehne[data-stand="vorbei"] .ev-buehne__bild {
|
|
filter: saturate(.35) brightness(.62);
|
|
}
|
|
/* EIN VORBEIGELAUFENES EVENT BEKAM EINE FLACHERE BUEHNE -- ueber
|
|
`aspect-ratio: 3.6/1` und `max-height: 190px`. Beides rechnet die
|
|
Hoehe aus der BREITE, und genau daran ist es am 07.10.2026
|
|
zerbrochen, als die Karten halb so breit wurden: 573 / 3.6 = 159 px,
|
|
waehrend der Inhalt 189 px brauchte. Der Zeitbalken lag danach auf
|
|
dem Satz darunter.
|
|
|
|
Die Absicht bleibt -- ein abgelaufenes Event soll weniger Platz
|
|
einnehmen --, nur wird sie jetzt ueber die MINDESThoehe ausgedrueckt:
|
|
Es faengt flacher an und waechst trotzdem mit, wenn der Titel drei
|
|
Zeilen braucht. Dieselbe Entscheidung wie oben an der Grundregel. */
|
|
.ev-buehne[data-stand="vorbei"] { min-height: 120px; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
AUF DEM HANDY
|
|
--------------------------------------------------------------------- */
|
|
@media (max-width: 560px) {
|
|
.ev-buehne {
|
|
aspect-ratio: 1.9 / 1;
|
|
min-height: 150px; max-height: 230px;
|
|
--ev-rand: 14px;
|
|
padding: 38px var(--ev-rand) 13px;
|
|
}
|
|
.ev-buehne[data-stand="vorbei"] { aspect-ratio: 2.6 / 1; max-height: 160px; }
|
|
.eintrag-karte[data-eventkarte="ja"] .eintrag-text { margin: 12px 14px 0; }
|
|
.ev-bloecke { margin: 12px 14px 0; gap: 12px; }
|
|
.ev-block { margin: 12px 14px 0; padding: 12px 12px; }
|
|
.ev-bloecke .ev-block { margin: 0; }
|
|
.eintrag-karte[data-eventkarte="ja"] .eintrag-fuss { padding: 12px 14px 14px; }
|
|
.eintrag-karte[data-eventkarte="ja"] .ampel { padding: 11px 14px 13px; }
|
|
/* Das Beruehrziel: 9 px Polsterung plus 19 px Kaestchen ergaeben
|
|
37 px. Auf dem Handy wird daraus 44 -- dieselbe Zahl wie bei allen
|
|
anderen Knoepfen des Hauses. */
|
|
.ev-punkt__knopf { min-height: 44px; align-items: center; }
|
|
/* Der Loeschknopf steht auf dem Handy in einer eigenen Zeile; ein
|
|
Abstand nach links wuerde ihn dort nur einruecken. */
|
|
.eintrag-karte[data-eventkarte="ja"] .schritt--gefahr { margin-left: 0; }
|
|
}
|
|
|
|
/* Hoher Kontrast: Die Zustandsfarben verschwinden dort, also muss die
|
|
Form sprechen. */
|
|
@media (forced-colors: active) {
|
|
.ev-buehne__schleier { display: none; }
|
|
.ev-punkt__kaestchen { border: 2px solid CanvasText; }
|
|
.ev-punkt[data-abgehakt="ja"] .ev-punkt__kaestchen { background: Highlight; }
|
|
.ev-zeitbalken { border: 1px solid CanvasText; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
DER ZEILEN-EDITOR UND DIE VORSCHAU (03.10.2026)
|
|
|
|
Die Begruendung, warum es ihn gibt, steht bei zeilenEditor() in
|
|
bereich.js: Ein leeres Textfeld zwingt den Menschen, die
|
|
Aufzaehlungszeichen selbst zu tippen -- und dann sehen drei Zeilen
|
|
auf drei Arten aus. Hier steht nur, wie er aussieht.
|
|
===================================================================== */
|
|
|
|
.zeileneditor {
|
|
display: flex; flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.zeileneditor__liste {
|
|
display: flex; flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.zeileneditor__zeile {
|
|
display: flex; align-items: center; gap: 9px;
|
|
}
|
|
|
|
/* Das Aufzaehlungszeichen steht VOR dem Feld und nicht darin: So sieht
|
|
man schon beim Tippen, dass es gesetzt wird -- und man kommt gar
|
|
nicht erst auf die Idee, selbst eines zu tippen. */
|
|
.zeileneditor__zeichen {
|
|
flex: none;
|
|
width: 16px; height: 16px;
|
|
position: relative;
|
|
}
|
|
.zeileneditor__zeichen::before {
|
|
content: "";
|
|
position: absolute; left: 4px; top: 6px;
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
background: color-mix(in srgb, var(--akzent, #3fbdf5) 58%, transparent);
|
|
}
|
|
|
|
.zeileneditor__feld {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
/* Dieselben Masse wie alle Felder des Hauses (--feld-ziel usw. in
|
|
start.css) -- ein Eingabefeld, das sich von den anderen
|
|
unterscheidet, sieht nach einem Fremdkoerper aus. */
|
|
min-height: 40px;
|
|
padding: 8px 11px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 9px;
|
|
background: rgba(255, 255, 255, .035);
|
|
color: var(--text);
|
|
font: inherit;
|
|
font-size: .9rem;
|
|
}
|
|
.zeileneditor__feld:focus-visible {
|
|
outline: 2px solid var(--akzent, #3fbdf5);
|
|
outline-offset: 1px;
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* Der Wegnehmen-Knopf: ein Kreuz, gezeichnet statt getippt -- ein
|
|
Mal-Zeichen aus der Schrift sitzt je nach System anders. */
|
|
.zeileneditor__weg {
|
|
flex: none;
|
|
width: 34px; height: 34px;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
color: var(--text-still);
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: color var(--tempo, .22s), background var(--tempo, .22s),
|
|
border-color var(--tempo, .22s);
|
|
}
|
|
.zeileneditor__weg::before,
|
|
.zeileneditor__weg::after {
|
|
content: "";
|
|
position: absolute; left: 10px; top: 16px;
|
|
width: 12px; height: 1.6px; border-radius: 2px;
|
|
background: currentColor;
|
|
}
|
|
.zeileneditor__weg::before { transform: rotate(45deg); }
|
|
.zeileneditor__weg::after { transform: rotate(-45deg); }
|
|
.zeileneditor__weg:hover {
|
|
color: var(--warn, #ff9aa2);
|
|
background: color-mix(in srgb, var(--warn, #ff9aa2) 9%, transparent);
|
|
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 24%, transparent);
|
|
}
|
|
.zeileneditor__weg:focus-visible {
|
|
outline: 2px solid var(--akzent, #3fbdf5);
|
|
outline-offset: 1px;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.zeileneditor__weg { transition: none; }
|
|
}
|
|
|
|
/* AM FINGER GEMESSEN, NICHT AM BILDSCHIRM (06.10.2026).
|
|
|
|
34x34 ist mit der Maus bequem und mit dem Daumen zu klein --
|
|
pruef-tippziele hat genau diesen Knopf als einziges ungedecktes
|
|
Bedienelement des Hauses gemeldet. Und er ist nicht irgendeiner:
|
|
Er wirft eine Zeile aus dem Eintrag.
|
|
|
|
`pointer: coarse` und keine Breite: Die Frage ist nicht, wie breit
|
|
der Bildschirm ist, sondern womit jemand tippt. Dieselbe
|
|
Entscheidung wie bei den anderen Knoepfen des Hauses -- und sie
|
|
steht hier, direkt neben der Zahl, die sie korrigiert, statt in
|
|
einer gepflegten Liste in einer anderen Datei. */
|
|
@media (pointer: coarse) {
|
|
.zeileneditor__weg { min-width: 44px; min-height: 44px; }
|
|
/* Das Kreuz sitzt mit `left`/`top` fest -- es muss mitwandern,
|
|
sonst klebt es in der linken oberen Ecke der groesseren Flaeche.
|
|
Gerechnet statt geraten: (44 - 12) / 2 = 16 waagerecht,
|
|
44 / 2 - 0,8 = 21,2 senkrecht (halbe Strichstaerke). */
|
|
.zeileneditor__weg::before,
|
|
.zeileneditor__weg::after { left: 16px; top: 21.2px; }
|
|
}
|
|
|
|
.zeileneditor__fuss {
|
|
display: flex; align-items: center; gap: 10px;
|
|
margin-top: 7px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.zeileneditor__mehr {
|
|
padding: 7px 14px;
|
|
min-height: 36px;
|
|
border: 1px dashed color-mix(in srgb, var(--akzent, #3fbdf5) 34%, var(--rand));
|
|
border-radius: 9px;
|
|
background: transparent;
|
|
color: color-mix(in srgb, var(--akzent, #3fbdf5) 72%, #cfe0f0);
|
|
font: inherit; font-size: .84rem; font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background var(--tempo, .22s), border-color var(--tempo, .22s);
|
|
}
|
|
.zeileneditor__mehr:hover {
|
|
background: color-mix(in srgb, var(--akzent, #3fbdf5) 10%, transparent);
|
|
border-style: solid;
|
|
}
|
|
.zeileneditor__mehr:focus-visible {
|
|
outline: 2px solid var(--akzent, #3fbdf5);
|
|
outline-offset: 2px;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.zeileneditor__mehr { transition: none; }
|
|
}
|
|
|
|
/* Der Weg zurueck zum Textfeld steht LEISE daneben: Der Normalfall ist
|
|
die Liste, das Textfeld ist der Ausweg fuer den Sonderfall. */
|
|
.zeileneditor__wechsel {
|
|
padding: 6px 2px;
|
|
min-height: 36px;
|
|
border: 0; background: transparent;
|
|
color: var(--text-still);
|
|
font: inherit; font-size: .79rem;
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
cursor: pointer;
|
|
}
|
|
.zeileneditor__wechsel:hover { color: var(--text-leise); }
|
|
.zeileneditor__wechsel:focus-visible {
|
|
outline: 2px solid var(--akzent, #3fbdf5);
|
|
outline-offset: 2px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Der Hinweis "Läuft 14 Tage." -- und die Warnung, wenn das Ende vor
|
|
dem Anfang liegt. Die Warnung ist ein WORT und nicht nur eine Farbe:
|
|
Wer Farben schlecht unterscheidet, saehe sonst gar nichts. */
|
|
#hinweis-dauer[data-warnung="ja"] {
|
|
color: var(--warn, #ff9aa2);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DIE VORSCHAU
|
|
--------------------------------------------------------------------- */
|
|
.ev-vorschau {
|
|
margin: 18px 0 4px;
|
|
padding: 14px;
|
|
border: 1px dashed var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
background: rgba(255, 255, 255, .012);
|
|
}
|
|
.ev-vorschau__schild {
|
|
margin: 0 0 10px;
|
|
font-size: .72rem; font-weight: 700;
|
|
letter-spacing: .09em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
/* Die Vorschau zeigt nur die Buehne -- der Rest der Karte haengt an
|
|
Daten, die es vor dem Speichern noch nicht gibt (Knoepfe, Ampel,
|
|
Rueckmeldungen). Eine Vorschau, die etwas zeigt, das hinterher
|
|
fehlt, ist schlimmer als eine kurze. */
|
|
.ev-vorschau .eintrag-karte { margin-bottom: 0; }
|
|
|
|
/* =====================================================================
|
|
ZWEI EVENTKARTEN NEBENEINANDER (07.10.2026)
|
|
=====================================================================
|
|
|
|
Filipe: „die soll aber auch garnicht so breit sein. es sollen immer
|
|
zwei neben einander stehen können."
|
|
|
|
GEMESSEN VORHER: Die Karte war 1160 px breit, eine je Reihe
|
|
(`#liste` stand auf `display: block`). Bei einem Banner, das ohnehin
|
|
nur 300 px hoch sein darf, heisst das: ein Drittel Bild, zwei Drittel
|
|
Luft daneben.
|
|
|
|
DIE REGEL SIEBT, STATT ZU SCHALTEN. `#liste` traegt das Raster
|
|
IMMER -- und alles, was keine Eventkarte ist, nimmt die ganze Breite
|
|
(`grid-column: 1 / -1`). In den sieben anderen Bereichen aendert sich
|
|
dadurch kein Pixel: Dort gibt es keine Eventkarten, also spannt jedes
|
|
Kind ueber beide Spalten und steht wie vorher untereinander. Eine
|
|
Umschaltung ueber eine zusaetzliche Klasse waere eine zweite Stelle,
|
|
an der jemand sie vergessen kann.
|
|
|
|
DIE 430 px ZAEHLEN ETWAS: Darunter wird die Buehne zum Briefschlitz
|
|
und die vier Fussknoepfe brechen auf drei Zeilen um. Mit
|
|
`auto-fill` entscheidet damit der Platz, nicht eine Fensterbreite --
|
|
derselbe Grund wie bei der Scout-Pipeline: Eine Zahl, die das FENSTER
|
|
misst, weiss nichts von Raendern und vom 1240-px-Deckel des Inhalts.
|
|
|
|
GLEICH HOHE KARTEN in einer Reihe sind Absicht und nicht Zufall: Die
|
|
Eckwinkel des Baukastens rahmen jede Karte sichtbar ein, und zwei
|
|
verschieden hohe Rahmen nebeneinander lesen sich als Unfall. Damit
|
|
der Fuss trotzdem unten sitzt, ist die Karte eine Spalte mit
|
|
`margin-top: auto` am Fuss. */
|
|
#liste {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr));
|
|
gap: 14px;
|
|
}
|
|
#liste > *:not(.eintrag-karte[data-eventkarte="ja"]) { grid-column: 1 / -1; }
|
|
/* Der Abstand kommt jetzt vom Raster. Zwei Abstandsquellen ergeben
|
|
einen doppelten Abstand -- und zwar nur zwischen den Zeilen, was
|
|
schwer zu finden ist. */
|
|
/* ==== `.kv-seite` OHNE `>` -- DAS FUENFTE MAL (07.10.2026) =====
|
|
|
|
Hier stand `.kv-seite > .eintrag-karte`. Seit die Spalten nach
|
|
Zustand und Alter gegliedert sind, haengen die Karten in einem
|
|
`.ev-gruppe__inhalt` -- also eine Ebene tiefer, und der
|
|
Direktkind-Selektor haette aufgehoert zu greifen. Folge waere
|
|
gewesen: Eventkacheln ohne `display: flex`, also ohne den Fuss
|
|
unten und mit der Buehne eingerahmt vom Kartenpolster.
|
|
|
|
DAS IST IM PROJEKT SCHON VIERMAL PASSIERT -- zuletzt am
|
|
07.10.2026 bei `#liste > .eintrag-karte[data-event=...]`, wo
|
|
alle drei Zustandsfarben ausfielen und ein Feature vom Vortag
|
|
rueckgaengig gemacht wurde, ohne dass eine Pruefung rot wurde.
|
|
Diesmal vorher gesehen, nicht hinterher gemessen.
|
|
|
|
WAS DIREKTKIND BLEIBT UND WARUM: `> *:not(.ev-buehne)` meint
|
|
die eigenen Kinder DER KARTE. Die Karte ist nach wie vor der
|
|
Vater ihres Inhalts; dieser Selektor beschreibt also wirklich
|
|
eine Vater-Kind-Beziehung und nicht eine Lage im Baum. Nur die
|
|
Strecke von der SPALTE zur Karte wird frei.
|
|
|
|
Dass `.kv-seite` ueberhaupt davorsteht, bleibt noetig: Ohne sie
|
|
hiesse die Regel „jede Eventkachel ueberall" -- und `#liste >`
|
|
darueber waere dann sinnlos. */
|
|
#liste > .eintrag-karte,
|
|
.kv-seite .eintrag-karte,
|
|
.kv-rest > .eintrag-karte { margin-bottom: 0; }
|
|
|
|
#liste > .eintrag-karte[data-eventkarte="ja"],
|
|
.kv-seite .eintrag-karte[data-eventkarte="ja"] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* Die Buehne liegt am oberen Rand und soll ihn beruehren -- das
|
|
seitliche Polster der Karte wuerde sie einrahmen wie ein Passepartout.
|
|
Der Inhalt darunter holt es sich selbst zurueck. */
|
|
padding: 0 0 15px;
|
|
}
|
|
#liste > .eintrag-karte[data-eventkarte="ja"] > *:not(.ev-buehne),
|
|
.kv-seite .eintrag-karte[data-eventkarte="ja"] > *:not(.ev-buehne) {
|
|
padding-left: 18px; padding-right: 18px;
|
|
}
|
|
#liste > .eintrag-karte[data-eventkarte="ja"] .ev-block,
|
|
.kv-seite .eintrag-karte[data-eventkarte="ja"] .ev-block { margin-left: 0; margin-right: 0; }
|
|
#liste > .eintrag-karte[data-eventkarte="ja"] .eintrag-fuss,
|
|
.kv-seite .eintrag-karte[data-eventkarte="ja"] .eintrag-fuss { margin-top: auto; }
|
|
|
|
/* =====================================================================
|
|
DIE KARTE SAGT, OB DAS EVENT LAEUFT (07.10.2026)
|
|
=====================================================================
|
|
|
|
Vorher trugen alle drei Zustaende denselben Ton: `--ton: #cace02`,
|
|
die Farbe des Agentur-Bereichs -- gemessen an der lebenden Seite, an
|
|
einem Event, das seit drei Tagen vorbei war. Aus `--ton` nimmt der
|
|
ganze Baukasten in module.css seine Farbe (Kantenlicht, die drei
|
|
Eckwinkel, das Licht beim Zeigen). Ein abgelaufenes Event leuchtete
|
|
damit genauso wie das, das gerade laeuft.
|
|
|
|
DASSELBE MUSTER WIE IN DER SCOUT-PIPELINE, und aus demselben Grund:
|
|
`--ton` wird je Zustand gesetzt, dann faerbt sich die ganze Form mit.
|
|
|
|
laeuft behaelt den Agenturton -- das ist der Normalfall und soll
|
|
nach „jetzt" aussehen
|
|
kommt kuehl: es ist noch nichts zu tun
|
|
vorbei stumpf: es steht da, es ruft nicht mehr
|
|
|
|
KEINE DECKKRAFT auf der ganzen Karte, obwohl das naheliegt: Das
|
|
senkt auch den Kontrast des Textes, und „vorbei" heisst nicht
|
|
„unlesbar". Gefaerbt wird der Rahmen, nicht der Inhalt. */
|
|
/* OHNE `#liste >` (berichtigt 07.10.2026).
|
|
|
|
Diese drei Zeilen standen als DIREKTE Kinder von #liste. Seit das
|
|
Agentur-Brett in zwei Spalten geteilt ist, haengen die Karten
|
|
eine Ebene tiefer -- und die Regeln griffen nicht mehr. Gemessen
|
|
kam fuer alle drei Zustaende #cace02 heraus: Ein Event, das seit
|
|
Tagen vorbei ist, leuchtete wieder wie eines, das laeuft. Genau
|
|
der Zustand, den der Block darueber am 07.10.2026 behoben hatte.
|
|
|
|
Ein Nachkommen-Selektor haelt den naechsten Umbau aus, ein
|
|
Direktkind-Selektor nicht. `[data-event]` steht ohnehin nur an
|
|
Eventkarten -- die Einschraenkung auf #liste war nie noetig. */
|
|
.eintrag-karte[data-event="laeuft"] { --ev-ton: var(--ton, #cace02); }
|
|
.eintrag-karte[data-event="kommt"] { --ev-ton: #5b8fd4; --ton: #5b8fd4; }
|
|
.eintrag-karte[data-event="vorbei"] { --ev-ton: #6b7686; --ton: #6b7686; }
|
|
|
|
/* DIE FARBKANTE LIEGT IM HINTERGRUND und nicht auf einem Pseudoelement:
|
|
::before (Kantenlicht) und ::after (Raster, Eckwinkel) gehoeren beide
|
|
dem Baukasten. 6 px, weil das Kantenlicht 1,6 px davon verdeckt --
|
|
bei 3 px blieb in der Nahaufnahme nichts Erkennbares uebrig (am
|
|
06.10.2026 an der Scout-Pipeline nachgemessen). */
|
|
#liste > .eintrag-karte[data-eventkarte="ja"] {
|
|
--ev-kante: 6px;
|
|
background:
|
|
linear-gradient(180deg,
|
|
color-mix(in srgb, var(--ev-ton, var(--akzent)) 92%, #ffffff) 0%,
|
|
color-mix(in srgb, var(--ev-ton, var(--akzent)) 65%, transparent) 50%,
|
|
color-mix(in srgb, var(--ev-ton, var(--akzent)) 12%, transparent) 100%)
|
|
left top / var(--ev-kante) 100% no-repeat,
|
|
radial-gradient(120% 70% at 0% 100%,
|
|
color-mix(in srgb, var(--ev-ton, var(--akzent)) 9%, transparent) 0%,
|
|
transparent 60%),
|
|
var(--flaeche);
|
|
transition: background-size var(--tempo, .18s) ease;
|
|
}
|
|
#liste > .eintrag-karte[data-eventkarte="ja"]:hover { --ev-kante: 9px; }
|
|
|
|
/* ---- Der Zeitbalken traegt den Zustand ------------------------------
|
|
Er stand auf Blau-Violett -- derselbe Verlauf bei einem Event, das
|
|
laeuft, und bei einem, das seit zwoelf Tagen vorbei ist. Jetzt sagt
|
|
schon die Farbe, welcher Fall vorliegt, und man muss die Zeile
|
|
darueber nicht erst lesen. */
|
|
#liste > .eintrag-karte[data-eventkarte="ja"] .ev-zeitbalken__fuellung {
|
|
background: linear-gradient(90deg,
|
|
color-mix(in srgb, var(--ev-ton, var(--akzent)) 45%, transparent),
|
|
color-mix(in srgb, var(--ev-ton, var(--akzent)) 95%, #ffffff));
|
|
}
|
|
/* Dicker als 4 px: Bei halber Kartenbreite ist der Balken nur noch
|
|
knapp 500 px lang, und ein 4-px-Faden darin ist eher Linie als
|
|
Anzeige. */
|
|
#liste > .eintrag-karte[data-eventkarte="ja"] .ev-zeitbalken { height: 6px; }
|
|
|
|
/* ---- Der Aufgabenzaehler wird eine Anzeige --------------------------
|
|
„0 von 3" stand als grauer Text neben der Ueberschrift -- dieselbe
|
|
Schriftgroesse, dieselbe Farbe wie alles andere, und damit die
|
|
Antwort auf die wichtigste Frage der Karte („wie weit bin ich?") gut
|
|
versteckt. Jetzt eine Pille, die mitwaechst: still, solange nichts
|
|
geschafft ist, und im Ton von „erledigt", sobald alles steht. */
|
|
.ev-zaehler {
|
|
display: inline-flex; align-items: center;
|
|
padding: 2px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--ev-ton, var(--akzent)) 30%, transparent);
|
|
background: color-mix(in srgb, var(--ev-ton, var(--akzent)) 12%, transparent);
|
|
color: color-mix(in srgb, var(--ev-ton, var(--akzent)) 45%, #ffffff);
|
|
/* .8rem = 12,8px -- ueber der Hausgrenze von 11,5px. */
|
|
font-size: .8rem;
|
|
}
|
|
.ev-zaehler[data-voll="ja"] {
|
|
border-color: color-mix(in srgb, var(--k-gut, #5fc99a) 45%, transparent);
|
|
background: color-mix(in srgb, var(--k-gut, #5fc99a) 15%, transparent);
|
|
color: var(--k-gut, #5fc99a);
|
|
}
|
|
/* Ist alles abgehakt, bekommt auch der Block einen Saum -- die Karte
|
|
soll das aus einem Meter Abstand sagen, nicht erst beim Lesen. */
|
|
#liste > .eintrag-karte[data-eventkarte="ja"] .ev-block[data-fertig="ja"] {
|
|
border-color: color-mix(in srgb, var(--k-gut, #5fc99a) 38%, transparent);
|
|
background: color-mix(in srgb, var(--k-gut, #5fc99a) 7%, transparent);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#liste > .eintrag-karte[data-eventkarte="ja"] { transition: none; }
|
|
}
|
|
@media (forced-colors: active) {
|
|
.ev-zaehler { border: 1px solid CanvasText; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
EINE KAMPAGNE AUS EINER EINLADUNG (07.10.2026) — Etappe 4
|
|
|
|
Gebaut auf `.videoholen` darueber: gleicher Rahmen, gleicher
|
|
Abstand, gleiche Flaeche. Ein zweiter Kastenstil fuer dieselbe Sache
|
|
waere zwei Fassungen, die auseinanderlaufen -- und der Unterschied
|
|
fiele nur dem auf, der beide Bereiche nacheinander ansieht.
|
|
|
|
WAS HIER ANDERS IST UND WARUM:
|
|
|
|
`textarea` statt `input`. Die Einladung ist mehrzeilig; wer sie in
|
|
ein Einzeilenfeld einfuegt, verliert die Umbrueche und sieht nur das
|
|
Ende. `resize: vertical` -- wer einen langen Text prueft, soll ihn
|
|
aufziehen koennen, aber nicht in die Breite (das zerreisst das
|
|
Raster).
|
|
|
|
`min-height: 44px` am Knopf. Das ist die Zahl aus
|
|
pruef-handy-teamdogi: Unter 44 Pixel trifft ein Daumen nicht
|
|
verlaesslich. Am 07.10.2026 lagen fuenf Flaechen in diesem Haus bei
|
|
40 und wurden genau deshalb auf 44 gezogen.
|
|
===================================================================== */
|
|
.kampagneholen {
|
|
margin: 0 0 20px; padding: 16px 18px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
.kampagneholen__form { margin: 0; }
|
|
.kampagneholen__titel {
|
|
margin: 0 0 10px;
|
|
font-size: 1rem; font-weight: 600;
|
|
letter-spacing: .01em;
|
|
}
|
|
.kampagneholen textarea {
|
|
display: block; width: 100%; box-sizing: border-box;
|
|
min-height: 72px; resize: vertical;
|
|
font: inherit; font-size: .9rem; line-height: 1.5;
|
|
}
|
|
|
|
/* DIE MELDUNG LINKS, DER KNOPF RECHTS -- und die Meldung darf wachsen.
|
|
`flex-wrap: wrap` statt einer festen Schwelle: Es bricht genau dann
|
|
um, wenn der Platz nicht reicht. Eine Zahl an dieser Stelle waere
|
|
eine Rechnung von gestern -- genau der Fehler, der am 06.09.2026 in
|
|
der Kopfleiste zweimal an einem Tag passiert ist. */
|
|
.kampagneholen__zeile {
|
|
display: flex; flex-wrap: wrap; align-items: center;
|
|
gap: 10px; margin-top: 12px;
|
|
}
|
|
/* HIER STEHT KEIN HINWEIS, SONDERN DIE ANTWORT (07.10.2026).
|
|
|
|
Gemessen mit bild-kampagne: Die hausweite Klasse .feld-hinweis
|
|
steht auf .76rem = 12,16 px. Fuer einen Hinweis unter einem Feld
|
|
ist das richtig, und sie bleibt dort unangetastet -- sie gilt auf
|
|
fuenf Seiten, und eine Schriftgroesse hausweit zu aendern ist
|
|
keine Entscheidung, die in diese Kachel gehoert.
|
|
|
|
An DIESER Stelle ist es aber etwas anderes: Hier erscheint, was
|
|
der Server geantwortet hat -- "Dieser Link fuehrt zu beispiel.de,
|
|
nicht zu TikTok", "TikTok hat nicht geantwortet (12 s)". Das ist
|
|
die einzige Rueckmeldung, die der Mensch bekommt, und eine
|
|
Fehlermeldung in 12 px liest niemand zweimal. Deshalb .9rem
|
|
(14,4 px) -- nur hier, mit Begruendung.
|
|
|
|
Der Kontrast ist mit 7,68:1 ohnehin reichlich (gemessen); zu
|
|
klein war allein die Groesse. */
|
|
.kampagneholen__zeile .feld-hinweis {
|
|
flex: 1 1 16rem; min-width: 0; margin: 0;
|
|
font-size: .9rem;
|
|
line-height: 1.5;
|
|
}
|
|
.kampagneholen__zeile .knopf {
|
|
flex: 0 0 auto;
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* WAEHREND ES LAEUFT. Ein ruhiges Atmen, kein Blinken -- und bei
|
|
`prefers-reduced-motion` gar nichts. Augenschonend heisst hier
|
|
ausdruecklich: kein Flackern, kein greller Zustandston, nur ein
|
|
leicht gedaempfter Kasten, der sagt "ich arbeite noch". */
|
|
.kampagneholen__form[data-laeuft="ja"] textarea { opacity: .6; }
|
|
.kampagneholen__form[data-laeuft="ja"] .feld-hinweis {
|
|
animation: kampagne-atmen 2.4s ease-in-out infinite;
|
|
}
|
|
@keyframes kampagne-atmen {
|
|
0%, 100% { opacity: .65; }
|
|
50% { opacity: 1; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kampagneholen__form[data-laeuft="ja"] .feld-hinweis { animation: none; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
LINKS TIKTOK, RECHTS DIE AGENTUR (07.10.2026)
|
|
|
|
Filipe: „die sollen perfekt getrennt sein."
|
|
|
|
DIE TRENNLINIE IST EIN HINTERGRUND, KEIN RAHMEN. `module.css` setzt
|
|
an jeder Karte `border: 0` und belegt beide Pseudoelemente -- das ist
|
|
hier dreimal die Stelle gewesen, an der eine Regel still
|
|
wirkungslos war. Der senkrechte Strich liegt deshalb im Hintergrund
|
|
des Behaelters und kann von nichts ueberschrieben werden.
|
|
|
|
`@container`, NICHT `@media`: Gemessen wird der Kasten, nicht das
|
|
Fenster. Dieselbe Entscheidung wie bei der Scout-Pipeline -- wer die
|
|
Fensterbreite misst, liegt daneben, sobald daneben etwas steht.
|
|
===================================================================== */
|
|
#liste { container-type: inline-size; container-name: brett; }
|
|
|
|
.kv-trennung {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 18px;
|
|
margin: 0 0 18px;
|
|
}
|
|
|
|
@container brett (min-width: 820px) {
|
|
.kv-trennung {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0 34px;
|
|
/* Der Strich sitzt genau in der Mitte der Luecke. */
|
|
background:
|
|
linear-gradient(var(--rand), var(--rand)) center / 1px 100% no-repeat;
|
|
}
|
|
}
|
|
|
|
.kv-seite {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Jede Seite hat ihren eigenen Ton. Links das Gruen von TikToks
|
|
Kampagnen, rechts das Agenturgelb -- so sieht man an der Farbe,
|
|
woher eine Kachel kommt, auch wenn man den Kopf nicht liest. */
|
|
.kv-seite[data-seite="tiktok"] { --kv-ton: #3fbdf5; }
|
|
.kv-seite[data-seite="agentur"] { --kv-ton: #cace02; }
|
|
|
|
.kv-seite__kopf {
|
|
display: flex; align-items: flex-start; gap: 12px;
|
|
padding: 0 0 10px;
|
|
border-bottom: 2px solid color-mix(in srgb, var(--kv-ton) 55%, transparent);
|
|
}
|
|
.kv-seite__titel {
|
|
flex: 1 1 auto; min-width: 0;
|
|
font-size: 1.02rem; font-weight: 700; letter-spacing: .02em;
|
|
color: var(--kv-ton);
|
|
text-transform: uppercase;
|
|
}
|
|
.kv-seite__unter {
|
|
display: block; margin-top: 2px;
|
|
font-size: .8rem; font-weight: 500; letter-spacing: 0;
|
|
text-transform: none;
|
|
color: var(--text-still);
|
|
}
|
|
/* Die Zahl NEBEN dem Wort, nicht am rechten Rand. Genau das ist am
|
|
06.10.2026 in der Pipeline schiefgegangen: Ein fremdes
|
|
`margin-left:auto` zog sie 560 px weg, und keine Pruefung wurde rot. */
|
|
.kv-seite__zahl {
|
|
flex: 0 0 auto;
|
|
min-width: 30px; padding: 3px 9px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--kv-ton) 22%, transparent);
|
|
color: var(--kv-ton);
|
|
font-size: .9rem; font-weight: 700; text-align: center;
|
|
}
|
|
.kv-seite__leer {
|
|
margin: 4px 0 0; padding: 18px 14px;
|
|
border: 1px dashed color-mix(in srgb, var(--rand) 80%, transparent);
|
|
border-radius: var(--radius);
|
|
color: var(--text-still); font-size: .88rem; text-align: center;
|
|
}
|
|
|
|
/* Was weder links noch rechts gehoert -- Schulungen, Anliegen,
|
|
Zustaendigkeiten -- steht darunter ueber die ganze Breite. */
|
|
.kv-rest { display: grid; gap: 12px; }
|
|
/* EINE SPALTE, VOLLE BREITE (berichtigt 07.10.2026).
|
|
|
|
Hier standen zwei Spalten. Damit waren Schulungen und Anliegen
|
|
genauso breit wie die Eventkacheln darueber -- und sahen aus wie
|
|
eine dritte und vierte Spalte der Trennung, die sie nicht sind.
|
|
`#liste > *:not(.eintrag-karte[data-eventkarte="ja"])` sagt
|
|
dasselbe seit dem 07.10.2026 fuer die ungetrennten Bretter:
|
|
Was kein Event ist, nimmt die ganze Breite. */
|
|
|
|
/* DER ZUSTANDSTON BLEIBT -- die Seite bekommt eine eigene Kante
|
|
(berichtigt 07.10.2026).
|
|
|
|
Hier stand `--ton: var(--kv-ton)`: Damit trug jede Kachel die
|
|
Farbe ihrer Spalte. Das nahm aber etwas weg, das am 07.10.2026
|
|
erst gebaut und gemessen worden war -- „jeder Zustand traegt
|
|
einen eigenen Ton" (laeuft gruen, kommt warm, vorbei stumpf).
|
|
pruef-eventkarte wurde rot und hatte recht: Alle drei Zustaende
|
|
kamen in Agenturgelb heraus.
|
|
|
|
WELCHE AUSKUNFT IST WICHTIGER? Der Zustand. Ob etwas LAEUFT oder
|
|
VORBEI ist, entscheidet, ob man heute etwas tut; woher es kommt,
|
|
steht ohnehin doppelt da -- in der Spaltenueberschrift und auf
|
|
dem Herkunftsschild der Kachel.
|
|
|
|
Die Seite bekommt deshalb eine eigene, schmale Kante links. Sie
|
|
benutzt `--kv-ton` direkt und fasst `--ton` nicht an -- zwei
|
|
Auskuenfte, zwei Kanaele, keine ueberschreibt die andere. */
|
|
.kv-seite .eintrag-karte[data-eventkarte="ja"] {
|
|
background:
|
|
linear-gradient(var(--kv-ton), color-mix(in srgb, var(--kv-ton) 20%, transparent))
|
|
left / 3px 100% no-repeat,
|
|
radial-gradient(120% 60% at 50% -10%,
|
|
color-mix(in srgb, var(--ton) 16%, transparent) 0, transparent 70%),
|
|
var(--flaeche);
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE EVENT-KACHELN, VIEL KRÄFTIGER (07.10.2026)
|
|
|
|
Filipe: „ich will dass die kacheln von den kampagnen viel viel viel
|
|
krasser und geiler aussehen."
|
|
|
|
WAS HIER NICHT GEHT, UND WARUM: Rahmen (`border`) und beide
|
|
Pseudoelemente gehören `module.css`. Drei Regeln in diesem Haus
|
|
waren schon deshalb still wirkungslos. Alles unten arbeitet
|
|
deshalb mit Hintergründen, Schatten und `--ton` — also mit dem, was
|
|
der Baukasten selbst benutzt und weiterreicht.
|
|
===================================================================== */
|
|
|
|
/* ---- Die Trennlinie: zwei Töne, die sich in der Mitte treffen ----- */
|
|
@container brett (min-width: 820px) {
|
|
.kv-trennung {
|
|
/* KRAEFTIGER ALS BEIM ERSTEN ANLAUF (gemessen 07.10.2026): Mit
|
|
55 % Deckung auf 2 px war die Linie im Bildschirmfoto nicht zu
|
|
finden. Sie ist jetzt 3 px breit, laeuft voll deckend durch die
|
|
Mitte und hat einen weichen Schein daneben -- augenschonend,
|
|
aber vorhanden. Oben und unten blendet sie aus, damit sie
|
|
nicht wie ein Rahmen aussieht. */
|
|
background:
|
|
linear-gradient(
|
|
to bottom,
|
|
transparent 0,
|
|
#3fbdf5 6%,
|
|
color-mix(in srgb, #3fbdf5 50%, #cace02) 50%,
|
|
#cace02 94%,
|
|
transparent 100%)
|
|
center / 3px 100% no-repeat,
|
|
linear-gradient(
|
|
to bottom,
|
|
transparent 0,
|
|
color-mix(in srgb, #3fbdf5 22%, transparent) 20%,
|
|
color-mix(in srgb, #cace02 22%, transparent) 80%,
|
|
transparent 100%)
|
|
center / 15px 100% no-repeat;
|
|
}
|
|
}
|
|
|
|
/* ---- Das Herkunftsschild -----------------------------------------
|
|
|
|
ZWEI DINGE, DIE BEIM ERSTEN ANLAUF FALSCH WAREN (gemessen):
|
|
|
|
1. SPEZIFITAET. Hier stand `.marke-art[data-quelle]` (0,2,0). Die
|
|
Eventkarte setzt aber weiter oben
|
|
`.eintrag-karte[data-eventkarte="ja"] .marke-art` (0,3,0) --
|
|
mein `padding-left` kam nie an, gemessen 10px statt 22px, und
|
|
der Punkt lag auf dem ersten Buchstaben. Deshalb jetzt mit
|
|
derselben Kartenbedingung davor.
|
|
|
|
2. ABSOLUT STATT FLEX. Ein Punkt, der ueber `position: absolute`
|
|
neben dem Text liegt, haengt an einem Polster, das jemand
|
|
anders setzt. `.ev-noch` im selben Haus macht es seit jeher
|
|
richtig: inline-flex mit `gap` -- dann ruecken Punkt und Wort
|
|
gemeinsam, egal wer am Polster dreht. Dasselbe Muster, nicht
|
|
ein zweites.
|
|
------------------------------------------------------------------ */
|
|
.eintrag-karte[data-eventkarte="ja"] .marke-art[data-quelle],
|
|
.marke-art[data-quelle] {
|
|
--q-ton: #8a9a5b;
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
padding: 2px 12px;
|
|
letter-spacing: .14em;
|
|
color: color-mix(in srgb, var(--q-ton) 78%, #ffffff);
|
|
background: color-mix(in srgb, var(--q-ton) 18%, rgba(8, 11, 18, .72));
|
|
border: 1px solid color-mix(in srgb, var(--q-ton) 48%, transparent);
|
|
}
|
|
/* DIE TOENE MIT DERSELBEN KARTENBEDINGUNG DAVOR (berichtigt
|
|
07.10.2026). Ohne sie gewinnt die Grundregel darueber -- sie traegt
|
|
die Kartenbedingung und ist damit spezifischer. Gemessen kam der
|
|
Ersatzton #8a9a5b heraus statt des TikTok-Blaus. Dieselbe Falle wie
|
|
eine Zeile hoeher, nur eine Ebene tiefer: Wer eine Variable in einer
|
|
spezifischeren Regel setzt, muss sie auch dort ueberschreiben. */
|
|
.eintrag-karte[data-eventkarte="ja"] .marke-art[data-quelle="tiktok"],
|
|
.marke-art[data-quelle="tiktok"] { --q-ton: #3fbdf5; }
|
|
.eintrag-karte[data-eventkarte="ja"] .marke-art[data-quelle="agentur"],
|
|
.marke-art[data-quelle="agentur"] { --q-ton: #cace02; }
|
|
/* Der Punkt davor ist kein Schmuck: Er traegt die Farbe auch dann,
|
|
wenn die Schrift klein und das Schild schmal ist. */
|
|
.marke-art[data-quelle]::before {
|
|
content: ""; flex: none;
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
background: var(--q-ton);
|
|
box-shadow: 0 0 8px color-mix(in srgb, var(--q-ton) 70%, transparent);
|
|
}
|
|
/* ---- Die Kachel selbst: mehr Tiefe, ohne zu blenden --------------- */
|
|
.kv-seite .eintrag-karte[data-eventkarte="ja"],
|
|
#liste > .eintrag-karte[data-eventkarte="ja"] {
|
|
/* Ein ruhiger Schein aus dem eigenen Ton, von oben nach unten
|
|
auslaufend. Kein Leuchten, kein Flackern -- augenschonend heißt
|
|
hier: man sieht die Farbe, ohne hinzusehen. */
|
|
background:
|
|
radial-gradient(120% 60% at 50% -10%,
|
|
color-mix(in srgb, var(--ton) 16%, transparent) 0,
|
|
transparent 70%),
|
|
var(--flaeche);
|
|
transition: transform .18s ease, box-shadow .18s ease;
|
|
}
|
|
.kv-seite .eintrag-karte[data-eventkarte="ja"]:hover,
|
|
#liste > .eintrag-karte[data-eventkarte="ja"]:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Die Bühne bekommt oben eine Lichtkante im Ton der Seite -- sie
|
|
ersetzt den Rahmen, den `module.css` auf 0 setzt. */
|
|
.eintrag-karte[data-eventkarte="ja"] .ev-buehne {
|
|
box-shadow:
|
|
inset 0 2px 0 0 color-mix(in srgb, var(--ton) 70%, transparent),
|
|
inset 0 -1px 0 0 color-mix(in srgb, var(--rand) 70%, transparent);
|
|
}
|
|
|
|
/* Der Zustandspunkt pulst ruhig, solange das Event LÄUFT -- und nur
|
|
dann. Ein Punkt, der immer pulst, ist kein Hinweis mehr.
|
|
|
|
DER PUNKT HEISST `.ev-noch::before` (berichtigt 07.10.2026). Hier
|
|
stand zuerst `.ev-stand__punkt` -- eine Klasse, die es in diesem
|
|
Haus gar nicht gibt. Die Regel war damit still wirkungslos, genau
|
|
wie die drei, vor denen `module.css` warnt. Abgeschrieben aus
|
|
bereich.js statt geraten. */
|
|
.ev-noch[data-stand="laeuft"]::before {
|
|
animation: ev-puls 2.8s ease-in-out infinite;
|
|
}
|
|
@keyframes ev-puls {
|
|
0%, 100% { opacity: .55; transform: scale(1); }
|
|
50% { opacity: 1; transform: scale(1.25); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ev-noch[data-stand="laeuft"]::before { animation: none; }
|
|
.kv-seite .eintrag-karte[data-eventkarte="ja"],
|
|
#liste > .eintrag-karte[data-eventkarte="ja"] { transition: none; }
|
|
.kv-seite .eintrag-karte[data-eventkarte="ja"]:hover,
|
|
#liste > .eintrag-karte[data-eventkarte="ja"]:hover { transform: none; }
|
|
}
|
|
|
|
/* Der Teilen-Knopf hebt sich ab -- er tut etwas, das nach draußen
|
|
wirkt, und das soll man sehen, bevor man drückt. Kein Rot: Teilen
|
|
ist nichts Gefährliches, nur etwas Endgültigeres als ein Haken. */
|
|
.schritt--teilen {
|
|
--t-ton: #7fd2fb;
|
|
color: var(--t-ton);
|
|
border-color: color-mix(in srgb, var(--t-ton) 45%, transparent);
|
|
background: color-mix(in srgb, var(--t-ton) 12%, transparent);
|
|
font-weight: 650;
|
|
}
|
|
.schritt--teilen:hover {
|
|
background: color-mix(in srgb, var(--t-ton) 20%, transparent);
|
|
}
|
|
|
|
/* =====================================================================
|
|
DER KASTEN „KAMPAGNE AUS EINER EINLADUNG" — SPEZIELLER (07.10.2026)
|
|
|
|
Filipe, zu einem Bildschirmfoto davon: „soll auch spezieller
|
|
aussehen bitte."
|
|
|
|
Er sah bis eben aus wie jeder andere Kasten im Haus: Rahmen, Fläche,
|
|
fertig. Er ist aber keiner von vielen — er ist der einzige Ort, an
|
|
dem etwas von AUSSEN hereinkommt. Das soll man sehen, bevor man
|
|
etwas einfügt.
|
|
|
|
WAS IHN UNTERSCHEIDET, UND WARUM GENAU DAS:
|
|
|
|
1. EIN TIKTOK-BLAUER STREIFEN LINKS. Dieselbe Farbe wie die linke
|
|
Spalte der Trennung darunter — wer hier einfügt, sieht sofort,
|
|
wo das Ergebnis landet. Als Hintergrund, nicht als `border`:
|
|
Rahmen gehören `module.css`, und drei Regeln in diesem Haus waren
|
|
schon deshalb still wirkungslos.
|
|
|
|
2. EIN SCHEIN VON OBEN LINKS, dort wo der Streifen anfängt. Er zieht
|
|
den Blick zum Feld, nicht zum Knopf.
|
|
|
|
3. DIE ÜBERSCHRIFT TRÄGT EINE LINIE, die nach rechts ausläuft. Sie
|
|
trennt „was ist das" von „was tue ich hier" — ohne einen zweiten
|
|
Kasten im Kasten.
|
|
|
|
4. DAS FELD WIRD BEIM TIPPEN WÄRMER. Kein Blinken, kein Rahmen in
|
|
Signalfarbe: nur ein etwas hellerer Grund und ein Schein in
|
|
derselben Farbe. Augenschonend heißt hier, dass man es bemerkt,
|
|
ohne hinzusehen.
|
|
===================================================================== */
|
|
.kampagneholen {
|
|
--kh-ton: #3fbdf5;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding-left: 24px;
|
|
background:
|
|
/* der Streifen */
|
|
linear-gradient(var(--kh-ton), color-mix(in srgb, var(--kh-ton) 25%, transparent))
|
|
left / 4px 100% no-repeat,
|
|
/* der Schein darüber */
|
|
radial-gradient(90% 70% at 0% 0%,
|
|
color-mix(in srgb, var(--kh-ton) 13%, transparent) 0, transparent 68%),
|
|
var(--flaeche);
|
|
}
|
|
|
|
.kampagneholen__titel {
|
|
display: flex; align-items: center; gap: 12px;
|
|
color: #e8f1fa;
|
|
}
|
|
/* Die Linie hinter der Überschrift läuft aus, statt zu enden -- eine
|
|
Linie, die hart aufhört, sieht aus wie ein abgeschnittener Rahmen. */
|
|
.kampagneholen__titel::after {
|
|
content: ""; flex: 1 1 auto; height: 1px;
|
|
background: linear-gradient(
|
|
to right,
|
|
color-mix(in srgb, var(--kh-ton) 55%, transparent),
|
|
transparent);
|
|
}
|
|
|
|
.kampagneholen textarea {
|
|
background: color-mix(in srgb, var(--kh-ton) 5%, rgba(8, 11, 18, .55));
|
|
border: 1px solid color-mix(in srgb, var(--kh-ton) 28%, transparent);
|
|
border-radius: 12px;
|
|
padding: 12px 14px;
|
|
color: inherit;
|
|
transition: background-color .18s ease, box-shadow .18s ease;
|
|
}
|
|
.kampagneholen textarea::placeholder { color: #7f95ad; }
|
|
.kampagneholen textarea:focus {
|
|
outline: none;
|
|
background: color-mix(in srgb, var(--kh-ton) 10%, rgba(8, 11, 18, .55));
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--kh-ton) 22%, transparent);
|
|
border-color: color-mix(in srgb, var(--kh-ton) 55%, transparent);
|
|
}
|
|
|
|
/* Der Knopf trägt dieselbe Farbe wie der Streifen -- er ist das Ende
|
|
desselben Gedankens, nicht ein fremdes Element am Rand. */
|
|
.kampagneholen #kampagne-holen {
|
|
color: #06121a;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
color-mix(in srgb, var(--kh-ton) 92%, #ffffff),
|
|
var(--kh-ton));
|
|
border: 1px solid color-mix(in srgb, var(--kh-ton) 70%, #000000);
|
|
font-weight: 700;
|
|
}
|
|
.kampagneholen #kampagne-holen:hover:not(:disabled) {
|
|
filter: brightness(1.08);
|
|
}
|
|
.kampagneholen #kampagne-holen:disabled { filter: saturate(.4); }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kampagneholen textarea { transition: none; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
GEGLIEDERTE INFOS, GESCHENKE, AUFKLAPPEN, GRUPPEN (07.10.2026)
|
|
|
|
Filipe, mit einem Bildschirmfoto des Regelblocks: „man soll die
|
|
titel in den texten besser erkennen und sehen was zu was passt.
|
|
ich will auch dass man sieht welche geschenke bei dem event zaehlen
|
|
und so. ... die kacheln von den events soll auch nicht so lang
|
|
sein, die soll man aufklappen koennen damit die nicht zu lange
|
|
sind. genau wie eine trennung fuer heute, letzte woche letzten
|
|
monat und so."
|
|
|
|
AUGENSCHONEND (CLAUDE.md, 12.08.2026): Die Unterscheidung laeuft
|
|
ueber GROESSE, GEWICHT, SPERRUNG und EINRUECKUNG -- nicht ueber
|
|
grelle Farben. Eine Ueberschrift darf man sehen, ohne dass sie
|
|
leuchtet. Die einzige kraeftige Farbe im ganzen Block ist der
|
|
Coinpreis, und der ist ein gedecktes Gold, kein Neon.
|
|
===================================================================== */
|
|
|
|
/* ---- Der Abschnitt -------------------------------------------------- */
|
|
.ev-abschnitte {
|
|
display: flex; flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
.ev-abschnitt { margin: 0; }
|
|
|
|
/* STUFE 2 IST EIN EIGENER ABSCHNITT (KAMPAGNENGESCHENKE, BELOHNUNGEN,
|
|
TEILNAHME), STUFE 3 EINE UEBERSCHRIFT AUS EINEM FREMDEN TEXT
|
|
("Superstars", "1. Liga", "WELCHE LIGA BIN ICH?").
|
|
|
|
Die Einrueckung macht die Verschachtelung sichtbar, ohne dass der
|
|
HTML-Baum sie nachbauen muss -- die Gliederung bleibt eine flache
|
|
Liste (Begruendung bei `gliederung()` in kampagne-lesen.mjs). */
|
|
.ev-abschnitt[data-stufe="3"] {
|
|
margin-left: 2px;
|
|
padding-left: 11px;
|
|
border-left: 2px solid color-mix(in srgb, var(--rand) 85%, transparent);
|
|
}
|
|
|
|
.ev-abschnitt__titel {
|
|
margin: 0 0 6px;
|
|
/* .78rem = 12,5 px. In Grossbuchstaben mit Sperrung wirkt eine
|
|
Schrift kleiner, als die Zahl sagt -- dieselbe Begruendung steht
|
|
schon bei .ev-block__schild. */
|
|
font-size: .78rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase;
|
|
line-height: 1.4;
|
|
color: color-mix(in srgb, var(--ev-ton, var(--akzent, #3fbdf5)) 55%, var(--text));
|
|
}
|
|
/* Die Unterstufe ist KEINE Grossschreibung: Sie kommt aus einem
|
|
fremden Text, und "Du kannst an dieser Liga teilnehmen" in
|
|
Grossbuchstaben waere geschrien. Sie unterscheidet sich durch
|
|
Gewicht und Farbe, nicht durch Lautstaerke. */
|
|
.ev-abschnitt[data-stufe="3"] > .ev-abschnitt__titel {
|
|
font-size: .85rem; font-weight: 650;
|
|
letter-spacing: .01em; text-transform: none;
|
|
color: var(--text);
|
|
}
|
|
.ev-abschnitt__unter {
|
|
margin: -2px 0 7px;
|
|
font-size: .82rem; line-height: 1.5;
|
|
color: var(--text-still);
|
|
}
|
|
|
|
/* Ein Absatz. `--text-leise` und nicht `--text`: Der Regeltext ist
|
|
Nachschlagewerk, nicht das, weswegen jemand die Kachel aufmacht. */
|
|
.ev-absatz {
|
|
margin: 0 0 7px;
|
|
font-size: .87rem; line-height: 1.6;
|
|
color: var(--text-leise);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.ev-absatz:last-child { margin-bottom: 0; }
|
|
|
|
/* Eine Frage mit Antwort darunter -- die Gliederung der
|
|
Teilnahmebedingungen. Begruendung bei `gliederung()`. */
|
|
.ev-frage {
|
|
margin: 11px 0 5px;
|
|
font-size: .87rem; font-weight: 650; line-height: 1.5;
|
|
color: var(--text);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.ev-frage:first-child { margin-top: 0; }
|
|
|
|
.ev-zeilen {
|
|
list-style: none;
|
|
margin: 0 0 7px; padding: 0;
|
|
display: flex; flex-direction: column; gap: 1px;
|
|
}
|
|
.ev-zeilen:last-child { margin-bottom: 0; }
|
|
|
|
/* ---- Die Geschenke -------------------------------------------------- */
|
|
|
|
/* DER EINE BLOCK, DER NICHT HINTER DEM AUFKLAPPEN LIEGT.
|
|
|
|
"Welche Geschenke zaehlen" ist die Frage, die am haeufigsten
|
|
gestellt wird, und die Antwort passt in eine Zeile. Der Rahmen in
|
|
gedecktem Gold grenzt ihn vom Aufgabenblock daneben ab, ohne mit
|
|
ihm zu konkurrieren. */
|
|
.ev-block--gaben {
|
|
border-color: color-mix(in srgb, #e2c15a 26%, var(--rand));
|
|
background:
|
|
linear-gradient(180deg,
|
|
color-mix(in srgb, #e2c15a 6%, transparent),
|
|
transparent 60%),
|
|
rgba(255, 255, 255, .022);
|
|
}
|
|
.ev-gaben__woher {
|
|
margin: 0 0 9px;
|
|
font-size: .82rem; line-height: 1.45;
|
|
color: var(--text-leise);
|
|
}
|
|
.ev-gaben__unter {
|
|
display: block; margin-top: 2px;
|
|
font-size: .8rem; color: var(--text-still);
|
|
}
|
|
|
|
.ev-gaben {
|
|
display: flex; flex-wrap: wrap; gap: 7px;
|
|
margin: 0; padding: 0; list-style: none;
|
|
}
|
|
/* Eine Plakette je Geschenk, nicht eine Zeile: Fuenf Geschenke
|
|
untereinander sind fuenf Zeilen, nebeneinander eine. Genau darum
|
|
ging es -- die Kachel soll kuerzer werden. */
|
|
.ev-gabe {
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
margin: 0; padding: 5px 10px;
|
|
border: 1px solid color-mix(in srgb, #e2c15a 22%, var(--rand));
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, #e2c15a 7%, rgba(255, 255, 255, .02));
|
|
font-size: .84rem; line-height: 1.35;
|
|
color: var(--text);
|
|
max-width: 100%;
|
|
}
|
|
.ev-gabe__name { font-weight: 600; overflow-wrap: anywhere; }
|
|
/* Der Coinpreis mit einem Muenzpunkt davor. `tabular-nums`, damit
|
|
1 und 12.000 untereinander dieselbe Breite je Ziffer haben. */
|
|
.ev-gabe__coins {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
flex: none;
|
|
padding: 1px 8px 1px 7px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, #e2c15a 17%, transparent);
|
|
color: color-mix(in srgb, #e2c15a 78%, var(--text));
|
|
font-size: .79rem; font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
.ev-gabe__coins::before {
|
|
content: "";
|
|
flex: none;
|
|
width: 8px; height: 8px;
|
|
border-radius: 50%;
|
|
background: color-mix(in srgb, #e2c15a 72%, transparent);
|
|
}
|
|
/* Der Hinweis zum Geschenk ("Sammle Feuerwerk in deinem LIVE!") --
|
|
bei einem Kampagnengeschenk steht hier, WIE man es bekommt, und
|
|
das ist die Auskunft anstelle eines Preises. */
|
|
.ev-gabe__zusatz {
|
|
font-size: .79rem; color: var(--text-still);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.ev-gabe__zusatz::before {
|
|
content: "·";
|
|
margin-right: 5px;
|
|
opacity: .7;
|
|
}
|
|
|
|
/* ---- Die Hinweise --------------------------------------------------- */
|
|
|
|
/* WAS BEIM EINLESEN GEFEHLT HAT -- still, aber nicht versteckt.
|
|
|
|
Im Bildschirmfoto vom 07.10.2026 standen diese Zeilen MITTEN in
|
|
der Regelliste, mit demselben Strich davor wie eine Regel. "Diese
|
|
Kampagne hat keine Preisliste auf der Seite" las sich damit wie
|
|
eine Teilnahmebedingung. Jetzt stehen sie unter den Bloecken, in
|
|
einem eigenen Kasten, mit einem Fragezeichen-Kreis davor. */
|
|
.ev-hinweise {
|
|
display: flex; flex-direction: column; gap: 5px;
|
|
margin: 12px 0 0;
|
|
padding: 10px 13px;
|
|
border: 1px dashed color-mix(in srgb, var(--rand) 85%, transparent);
|
|
border-radius: var(--radius-klein);
|
|
background: rgba(255, 255, 255, .012);
|
|
}
|
|
.ev-hinweis {
|
|
display: flex; align-items: flex-start; gap: 8px;
|
|
margin: 0;
|
|
font-size: .81rem; line-height: 1.5;
|
|
color: var(--text-still);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.ev-hinweis::before {
|
|
content: "i";
|
|
flex: none;
|
|
width: 16px; height: 16px; margin-top: 2px;
|
|
border: 1px solid color-mix(in srgb, var(--text-still) 45%, transparent);
|
|
border-radius: 50%;
|
|
/* .74rem = 11,84 px. NICHT kleiner: pruef-css-klassen zieht die
|
|
Grenze bei 11,5 px, und sie gilt auch fuer ein einzelnes Zeichen
|
|
-- wer eine Ausnahme fuer "nur ein i" macht, macht die naechste
|
|
fuer "nur eine Zahl". Der Kreis ist dafuer 16 px statt 15. */
|
|
font-size: .74rem; font-weight: 700; font-style: italic;
|
|
line-height: 14px; text-align: center;
|
|
color: var(--text-still);
|
|
}
|
|
|
|
/* ---- Der Steckbrief ------------------------------------------------- */
|
|
.ev-block--steck { background: rgba(255, 255, 255, .012); }
|
|
.ev-steck {
|
|
display: grid;
|
|
/* Name und Wert in zwei Spalten: `auto` fuer den Namen, damit er
|
|
nur so breit wird, wie der laengste ihn braucht. */
|
|
grid-template-columns: auto 1fr;
|
|
gap: 4px 14px;
|
|
margin: 0;
|
|
}
|
|
.ev-steck__name {
|
|
margin: 0;
|
|
font-size: .78rem; font-weight: 600;
|
|
letter-spacing: .03em;
|
|
color: var(--text-still);
|
|
}
|
|
.ev-steck__wert {
|
|
margin: 0;
|
|
font-size: .82rem;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--text-leise);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* ---- Aufklappen: alles Uebrige hinter einem Druck ------------------- */
|
|
.ev-mehr { margin-top: 12px; }
|
|
.ev-mehr__knopf {
|
|
display: flex; align-items: center; gap: 9px;
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
font: inherit; font-size: .78rem; font-weight: 600;
|
|
letter-spacing: .04em; text-transform: uppercase;
|
|
color: var(--text-leise);
|
|
text-align: left; cursor: pointer;
|
|
background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
|
|
border: 1px dashed color-mix(in srgb, var(--rand) 80%, transparent);
|
|
border-radius: 9px;
|
|
}
|
|
.ev-mehr__knopf:hover, .ev-mehr__knopf:focus-visible {
|
|
color: var(--text);
|
|
border-style: solid;
|
|
border-color: color-mix(in srgb, var(--ev-ton, var(--akzent)) 45%, transparent);
|
|
}
|
|
.ev-mehr__wort { flex: 0 0 auto; }
|
|
/* DIE ZAHL SAGT, WAS DAHINTER STEHT. Ein zugeklappter Kasten ohne
|
|
Zahl sieht aus, als sei er leer -- und dann drueckt niemand. */
|
|
.ev-mehr__zahl {
|
|
flex: 1 1 auto; min-width: 0;
|
|
font-size: .76rem; font-weight: 500;
|
|
letter-spacing: .01em; text-transform: none;
|
|
color: var(--text-still);
|
|
}
|
|
.ev-mehr__knopf .klapp-pfeil { flex: none; }
|
|
.ev-mehr__inhalt { margin-top: 10px; }
|
|
.ev-mehr__inhalt > .ev-block + .ev-block { margin-top: 10px; }
|
|
|
|
/* ---- Die Gruppen einer Spalte --------------------------------------- */
|
|
|
|
/* Dasselbe Aussehen wie die Zeitgruppen der anderen Bretter
|
|
(.zeitgruppe__kopf) -- ein zweiter Stil fuer dieselbe Sache waere
|
|
eine zweite Wahrheit darueber, wie eine Gruppe aussieht. Nur der
|
|
Ton kommt aus der Spalte (`--kv-ton`): So gehoeren die Gruppen
|
|
sichtbar zu ihrer Seite der Trennung. */
|
|
.ev-gruppe__kopf {
|
|
display: flex; align-items: center; gap: 9px;
|
|
width: 100%; margin: 10px 0 0;
|
|
padding: 7px 10px;
|
|
font: inherit; font-size: .76rem; font-weight: 600;
|
|
letter-spacing: .04em; text-transform: uppercase;
|
|
color: var(--text-leise);
|
|
text-align: left; cursor: pointer;
|
|
background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
|
|
border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
|
|
border-left: 3px solid color-mix(in srgb, var(--kv-ton, var(--akzent)) 45%, transparent);
|
|
border-radius: 9px;
|
|
}
|
|
.ev-gruppe__kopf:hover, .ev-gruppe__kopf:focus-visible {
|
|
color: var(--text);
|
|
border-color: color-mix(in srgb, var(--kv-ton, var(--akzent)) 45%, transparent);
|
|
}
|
|
/* Die erste Gruppe braucht oben keinen Abstand -- darueber steht
|
|
schon der Kopf der Spalte. */
|
|
.kv-seite__kopf + .ev-gruppe__kopf { margin-top: 2px; }
|
|
|
|
/* WAS LAEUFT, STEHT KRAEFTIGER DA ALS WAS VORBEI IST. Ein
|
|
zugeklappter Kasten „Vorbei — aelter" soll nicht so aussehen wie
|
|
„Laeuft gerade": Die Ueberschrift ist zugleich die Auskunft. */
|
|
.ev-gruppe__kopf[data-gruppe="laeuft"] {
|
|
color: var(--text);
|
|
background: color-mix(in srgb, var(--kv-ton, var(--akzent)) 9%, var(--tinte));
|
|
}
|
|
.ev-gruppe__kopf[data-gruppe^="vorbei"] { opacity: .78; }
|
|
|
|
.ev-gruppe__wort { flex: 1 1 auto; min-width: 0; }
|
|
.ev-gruppe__zahl {
|
|
flex: none;
|
|
padding: 1px 8px;
|
|
font-size: .76rem; font-variant-numeric: tabular-nums;
|
|
color: var(--text);
|
|
background: color-mix(in srgb, var(--tinte) 70%, #ffffff 30%);
|
|
border-radius: 999px;
|
|
}
|
|
.ev-gruppe__inhalt {
|
|
display: flex; flex-direction: column; gap: 12px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* ---- Was zu einer Aufgabe noch dasteht ------------------------------ */
|
|
|
|
/* Beschreibung und Zeitraum einer Missionsgruppe. EINGERUECKT auf die
|
|
Hoehe des Aufgabentextes (19 px Kaestchen + 10 px Luecke = 29 px),
|
|
damit es unter dem Text haengt und nicht unter dem Kaestchen. */
|
|
.ev-punkt__zusatz {
|
|
display: flex; flex-wrap: wrap; align-items: baseline;
|
|
gap: 4px 9px;
|
|
margin: -2px 0 6px 39px;
|
|
font-size: .79rem; line-height: 1.45;
|
|
color: var(--text-still);
|
|
}
|
|
.ev-punkt__spanne {
|
|
flex: none;
|
|
padding: 1px 7px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--rand) 55%, transparent);
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
.ev-punkt__worte { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
|
|
|
|
/* ---- Handy ---------------------------------------------------------- */
|
|
@media (max-width: 560px) {
|
|
/* Auf dem Handy wird das Polster knapp. Die Einrueckung der
|
|
Unterabschnitte halbiert sich, damit der Text nicht in einer
|
|
Spalte von acht Zeichen endet. */
|
|
.ev-abschnitt[data-stufe="3"] { padding-left: 8px; }
|
|
.ev-punkt__zusatz { margin-left: 0; }
|
|
/* 44 px Tippziel -- dieselbe Vorgabe wie bei .ev-punkt__knopf. */
|
|
.ev-mehr__knopf, .ev-gruppe__kopf { min-height: 44px; }
|
|
}
|
|
|
|
/* ---- Starker Kontrast ----------------------------------------------- */
|
|
@media (forced-colors: active) {
|
|
/* `color-mix` auf Systemfarben ergibt im Zwangsmodus nichts
|
|
Sichtbares -- deshalb echte Raender und Systemfarben. */
|
|
.ev-gabe, .ev-hinweise, .ev-mehr__knopf, .ev-gruppe__kopf {
|
|
border: 1px solid CanvasText;
|
|
}
|
|
.ev-gabe__coins { border: 1px solid CanvasText; }
|
|
.ev-abschnitt[data-stufe="3"] { border-left: 2px solid CanvasText; }
|
|
.ev-abschnitt__titel { color: CanvasText; }
|
|
}
|
|
|
|
/* ---- Weniger Bewegung ----------------------------------------------- */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ev-mehr__knopf, .ev-gruppe__kopf { transition: none; }
|
|
}
|