DogFatherGitandClaude Opus 5
be121a483e
Filipe: "Nicht nur ich soll meine Modis bewerten oder ihnen Feedback geben koennen. Auch die Modis sollen mir Feedback geben koennen. Sie sollen mir beispielsweise sagen koennen: Was koennte ich verbessern?" Und der Schlusssatz seines Pflichtenhefts: "Es soll nicht nur dazu dienen, Leistungen zu kontrollieren. Es soll vor allem dabei helfen, als Team besser zu werden." EIN BRETT FUER BEIDE KAPITEL, NICHT ZWEI. Kapitel 5 (gegenseitiges Feedback) und Kapitel 6 (gemeinsame Reflexion) stellen dieselben Fragen -- "was laeuft gut, was laeuft schlecht, was fehlt" --, einmal an eine Person und einmal an das Team. Zwei Bretter haetten bedeutet, dass man beim Schreiben zuerst entscheiden muss, an WEN es geht, bevor man weiss, WAS man sagen will. Hier ist es umgekehrt: erst die Sache, dann die Richtung. DIE NEUN FRAGEN SIND SEINE, wortwoertlich aus dem Pflichtenheft zusammengezogen: laeuft gut · laeuft nicht gut · unbedingt behalten · an DogFather · was dem Team fehlt · Regel aendern · besser organisieren · Idee · Wunsch fuer spaeter. Sie stehen als feste Faecher da und nicht als freies Feld -- genau das ist der Unterschied zwischen einer Sammlung und einem Haufen: Neun Faecher kann man auswerten, tausend Formulierungen nicht. KEIN NEUER BAUKASTEN. Die Rueckmeldung ist ein BEREICH wie das Ideen-Board: dieselbe Tabelle, dieselbe Seite, dieselben Regeln fuers Anlegen, Aendern und Loeschen, dieselbe Zugangssperre. Ein eigenes Modul haette all das ein zweites Mal gebraucht -- und die zweite Fassung waere die gewesen, in der eine Regel fehlt. DIE EINE NEUE SACHE IST DIE RICHTUNG. Beim Schreiben waehlt man zwischen "fuers Team" (Vorgabe) und "nur an DogFather". Ohne diese Wahl haette man eines von beidem verloren: Wer "was koenntest du besser machen" vor versammelter Mannschaft sagen muss, sagt es nicht -- wer alles nur unter vier Augen sagen kann, hat kein Team-Gespraech. UND "NUR DOGFATHER" HEISST NUR DOGFATHER -- die rechte Hand ausdruecklich nicht. Sie sieht sonst ueberall dasselbe wie er; hier nicht, weil das Etikett sonst nicht stimmen wuerde. Eine Zusage mit einer Ausnahme im Kleingedruckten ist keine. Sie schreibt selbst genauso -- auch ueber ihn. DIE ZUSAGE STEHT IN sichtbarEintrag(), also in derselben Funktion, durch die auch das Lesen einer einzelnen Zeile, das Aendern und das Loeschen gehen. Eine Regel, die nur die Liste filtert, laesst die Zeile ueber ihre Nummer trotzdem heraus; die Pruefung klopft deshalb auch von hinten (PATCH und DELETE auf die vertrauliche Zeile: 404, auf die offene: 200). `COALESCE(nur_leitung, 0)`: Jede Zeile, die es vor heute gab, hat dort NULL, und in SQL ist `NULL = 0` nicht falsch, sondern UNBEKANNT. Ohne den Ersatzwert waere der gesamte alte Bestand von einer Minute auf die andere unsichtbar gewesen -- und niemand haette es gemeldet, denn ein leeres Brett sieht nicht nach Fehler aus. Beide Richtungen sind gemessen. KEINE ANONYMITAET, und das ist eine Entscheidung, keine Luecke. In einem Team dieser Groesse waere sie ohnehin keine: An drei Saetzen erkennt jeder jeden. Ein Versprechen, das nicht haelt, ist schlimmer als keines. DER FARBTON DER KACHEL IST AUSGERECHNET, NICHT AUSGESUCHT. Bei 24 vorhandenen Toenen landet ein neuer fast zwangslaeufig neben einem alten, und zwei Kacheln in FAST derselben Farbe sind schlimmer als in derselben -- bei gleicher merkt man den Fehler, bei fast gleicher sucht man ihn. Alle 24 wurden in Farbwinkel umgerechnet; die groesste Luecke liegt zwischen 90 und 160 Grad und ist 70 Grad breit, mehr als doppelt so viel wie die naechste. Der neue Ton sitzt in ihrer Mitte, 8,9 zu 1 auf dunklem Grund. pruef-rueckmeldung 34 (neu) · pruef-rollen 274 -> 277 · pruef-start-ansicht zaehlt jetzt 25 Kacheln und 25 Farben (sie zaehlt selbst, statt eine Zahl festzuhalten -- deshalb blieb sie gruen) · pruef-modi-ideen 30 · pruef-modi-verborgen 78 · pruef-css-klassen gruen · pruef-modi-wortleck 5. Co-Authored-By: Claude Opus 5 <[email protected]>
553 lines
22 KiB
CSS
553 lines
22 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; }
|
|
|
|
.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;
|
|
}
|