DogFatherGitandClaude Opus 5
447a4157a5
DIE SIEBEN BRETTER HATTEN KEINE UNTERZEILE. Ein Mitglied sah nur:
— TERMINE
Was ansteht
Hier schreibt das Team.
Die Oberzeile ist eine Kategorie, kein Satz; darunter stand
ausschliesslich, OB man schreiben darf -- auf drei Brettern sogar
wortgleich dasselbe. Was das Brett IST und was man hier tut, stand
nirgends.
Jetzt sagt jeder Satz zwei Dinge: wofuer das Brett da ist und was man
konkret tut. Zum Beispiel: "Was ihr euch wuenscht. Drueck ,Will ich
auch' - danach wird sortiert, was am meisten gewollt ist." Der Hinweis
aufs Schreibrecht haengt sich dahinter, in dieser Reihenfolge: "was
ist das hier" kommt vor "darf ich mitmachen".
--- Zwei Funde aus der Highlights-Galerie ---------------------------
1. DREI KARTEN, DREI HOEHEN. `align-items: start` liess jede Karte
dort enden, wo ihr Text aufhoerte. Eine Galerie ist ein Raster --
ungleiche Kanten liest man als Fehler, nicht als Absicht. Jetzt
gleich hoch (gemessen: aus 3 verschiedenen Hoehen wurde 1).
2. "NUR OFFENE" AUF BRETTERN OHNE ZUSTAENDE. Fuenf der sieben kennen
gar kein "offen/erledigt" -- ein Clip ist nicht erledigt. Der Knopf
stand trotzdem ueberall und tat dort nichts. Ein Knopf, der nichts
tut, kostet das Vertrauen in den naechsten.
Er erscheint jetzt nur, wenn die Liste ueberhaupt etwas Erledigtes
enthaelt -- dieselbe Regel wie bei der Kanalzeile. Das `||
filter === 'offen'` daneben ist kein Beiwerk: Ist der Filter aktiv,
sieht man gerade keine erledigten mehr, und der Knopf wuerde unter
der eigenen Hand verschwinden.
GEGENPROBE IM MESSWERKZEUG: Ein Wunsch wird auf erledigt gesetzt.
Wunschliste 6 Filter (mit "Nur offene"), Highlights 5 (ohne).
Ohne diesen Eintrag saehe eine abgeschaffte Funktion genauso aus
wie eine, die richtig entscheidet.
Co-Authored-By: Claude Opus 5 <[email protected]>
1554 lines
61 KiB
CSS
1554 lines
61 KiB
CSS
/* ===================================================================
|
|
Gemeinsame Ansicht für LIVE, Content, Technik, Community und Schutz.
|
|
=================================================================== */
|
|
|
|
.eintrag-karte {
|
|
padding: 15px 17px; margin-bottom: 10px;
|
|
background: var(--flaeche);
|
|
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; }
|
|
|
|
.eintrag-kopf {
|
|
display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
|
|
}
|
|
.eintrag-titel { font-weight: 600; font-size: .96rem; flex: 1 1 240px; }
|
|
|
|
.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; }
|
|
}
|
|
|
|
.filter { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
|
|
.filter .schritt[aria-pressed="true"] {
|
|
/* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
|
|
hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
|
|
--f: var(--akzent);
|
|
color: #fff;
|
|
background:
|
|
linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
|
|
color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
|
|
linear-gradient(150deg, var(--f),
|
|
color-mix(in srgb, var(--f) 45%, transparent)) border-box;
|
|
box-shadow: 0 4px 16px -9px var(--f);
|
|
}
|
|
|
|
|
|
@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").
|
|
===================================================================== */
|
|
|
|
.event-zeitraum {
|
|
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
|
|
margin: 2px 0 10px;
|
|
font-size: .82rem;
|
|
}
|
|
.event-zeitraum__marke {
|
|
--f: var(--k-neutral);
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 3px 10px;
|
|
border: 1px solid color-mix(in srgb, var(--f) 34%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--f) 12%, transparent);
|
|
color: color-mix(in srgb, var(--f) 82%, #fff);
|
|
font-weight: 600; letter-spacing: .01em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Der Punkt davor ist reine Zierde und darf deshalb NICHT vorgelesen
|
|
werden -- ein Screenreader saehe sonst ein Aufzaehlungszeichen mitten
|
|
im Satz. */
|
|
.event-zeitraum__marke::before {
|
|
content: ""; width: 7px; height: 7px; border-radius: 50%;
|
|
background: var(--f); flex: none;
|
|
}
|
|
.event-zeitraum[data-stand="laeuft"] .event-zeitraum__marke { --f: var(--k-gut); }
|
|
.event-zeitraum[data-stand="kommt"] .event-zeitraum__marke { --f: var(--k-mittel); }
|
|
.event-zeitraum[data-stand="vorbei"] .event-zeitraum__marke { --f: var(--k-neutral); }
|
|
.event-zeitraum__spanne {
|
|
color: var(--text-leise);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Ein vorbeigelaufenes Event bleibt lesbar, tritt aber zurueck. Kein
|
|
display:none -- was gelaufen ist, will man nachschlagen koennen.
|
|
Gedaempft wird nur die Flaeche, nicht die Schrift: Text unter 4.5:1
|
|
waere nicht mehr lesbar, und "alt" ist kein Grund, jemanden
|
|
auszuschliessen. */
|
|
.eintrag-karte[data-event="vorbei"] { opacity: .82; }
|
|
|
|
.event-block {
|
|
margin: 10px 0 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
background: rgba(255, 255, 255, .022);
|
|
}
|
|
.event-block__schild {
|
|
margin: 0 0 4px;
|
|
/* .74rem = 11.84 px, nicht .7rem. Die Schriftgroessen-Pruefung zieht
|
|
die Grenze bei 11.5 px, und sie hat recht: In Grossbuchstaben mit
|
|
Sperrung wirkt eine Schrift kleiner, als die Zahl sagt -- und das
|
|
hier ist die Beschriftung, an der man die Regeln vom Aufgabenteil
|
|
unterscheidet. */
|
|
font-size: .74rem; font-weight: 700;
|
|
letter-spacing: .09em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.event-block__text {
|
|
margin: 0;
|
|
font-size: .87rem; line-height: 1.6; color: var(--text);
|
|
/* pre-line, nicht pre-wrap: Zeilenumbrueche bleiben (die Aufzaehlung
|
|
ist der Sinn dieser Felder), aber eine versehentlich eingefuegte
|
|
Einrueckung aus einer Chatnachricht reisst die Karte nicht auf. */
|
|
white-space: pre-line;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* .feld-hinweis steht seit dem 07.09.2026 in aufgaben.css -- bei den
|
|
uebrigen Formularstilen. Grund: Die Dashboard-Seite braucht ihn jetzt
|
|
auch (Creator anlegen), laedt aber diese Datei hier nicht. Ein
|
|
Formularbaustein, der in der Bereichsdatei liegt, ist nur so lange
|
|
richtig, wie ihn keine zweite Seite braucht. */
|
|
|
|
@media (max-width: 560px) {
|
|
/* Auf dem Handy untereinander: Marke und Spanne nebeneinander
|
|
ergaeben bei "vorbei seit 30.09.2026" einen Umbruch mitten im
|
|
Datum. */
|
|
.event-zeitraum { gap: 6px; }
|
|
.event-zeitraum__spanne { flex-basis: 100%; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
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; }
|
|
|
|
/* 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.
|
|
------------------------------------------------------------------- */
|
|
#liste[data-aushang="ja"] { display: grid; gap: 18px; }
|
|
#liste[data-aushang="ja"] .eintrag-karte { padding: 22px 24px; }
|
|
#liste[data-aushang="ja"] .eintrag-titel {
|
|
font-size: 1.32rem; line-height: 1.25;
|
|
}
|
|
#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; }
|
|
|
|
/* 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; }
|