DogFatherGitandClaude Opus 5
540b5d8838
DREI SACHEN AUF EINMAL, alle aus derselben Sitzung.
1. AUSSUCHEN ODER SELBST EINTRAGEN
Wunsch: "ich will da auch sachen selber noch eintragen koennen, also
aussuchen und selbst eintragen."
Jede Personenauswahl (Kalender, Aufgaben, Bereiche, Content, Dateien)
nimmt jetzt auch einen getippten Namen an -- eine Agentur, eine Marke,
einen Gast ohne Konto. Dazu bekommt JEDE Auswahl ab acht Eintraegen
ein Suchfeld: tippen statt scrollen.
Gebaut IM vorhandenen Auswahl-Bauteil (wahl.js), nicht daneben. Der
erste Anlauf war ein zweites Bauteil -- es hat sich prompt mit dem
ersten gebissen, beide haben denselben <select> eingepackt. Ein
zweites haette ausserdem anders ausgesehen und waere beim naechsten
Umbau nur an einer von zwei Stellen nachgezogen worden.
Der freie Name steht in einer EIGENEN Spalte je Feld; die Verknuepfung
bleibt leer. Entweder eine Person ODER ein Name, nie beides.
Filipe hat ausdruecklich auch bei den Creator-Feldern freie Namen
gewollt, nachdem der Nachteil benannt war: Der Eintrag gehoert dann zu
keinem Konto. Damit daraus kein STILLER Ausfall wird, faellt jede
Abfrage, die bisher den Namen der verknuepften Person las, jetzt auf
den freien Text zurueck (externSql) -- gekennzeichnet als "(extern)".
Der Eintrag verschwindet dadurch aus keiner Liste, keiner Suche und
keiner Uebersicht.
2. WO FUEHRE ICH DEN CALL?
Den Knopf gab es, aber nur wenn jemand von Hand einen Link ins
Ortsfeld getippt hatte UND das Gespraech noch bevorstand. Stand dort
"Hier", war nichts zum Anklicken da.
Jetzt hat das Team einen festen Call-Raum (Discord-Sprachkanal), den
das Management einmal hinterlegt. Danach hat JEDER Call den Knopf --
und er bleibt, solange das Gespraech laufen kann, nicht nur bis zur
Startzeit. Ein eigener Link am Termin schlaegt den festen Raum.
3. WAS EINE ROLLE SIEHT, MUSS AUCH FUNKTIONIEREN
Gemeldet: "cigdem kriegt als manager gewisse sachen nicht auf die sie
sieht, check jede rolle ab."
Neue Pruefung server/pruef-rollen.mjs schickt SECHS Rollen-Zustaende
ueber alle 16 Seiten und misst Konsolenfehler, fehlgeschlagene
Serveraufrufe, tote Verweise, haengende Ladeanzeigen und wortlos leere
Seiten. 96 Durchgaenge.
Der sechste Zustand ist der wichtige: eine Rolle OHNE zugeteilte
Creator -- der Normalfall am ersten Tag und Cigdems echte Lage.
Genau dort fielen die Seiten durch, waehrend dieselben Seiten MIT
Zuteilung tadellos waren.
VIER ECHTE FEHLER GEFUNDEN UND BEHOBEN:
a) Eine Aufgabe, die eine Managerin ohne Creator anlegte, war fuer sie
im selben Moment unsichtbar -- creator_id und verantwortlich_id
leer, und "von mir selbst angelegt" stand in keiner
Sichtbarkeitsregel. Nur DogFather sah sie noch. Kein Fehler, keine
Meldung, die Aufgabe war einfach weg. Dasselbe bei den
Bereichseintraegen. Beide Regeln kennen jetzt erstellt_von.
Niemand sieht dadurch etwas Fremdes -- nur das Eigene.
b) Ein Scout ohne zugeteilten Creator bekam auf die GESAMTE
Report-Seite 404, obwohl sie fuer ihn verlinkt ist. Die Seite
antwortet jetzt sauber und leer, statt sich zu verweigern.
c) Start-Check und Report blieben fuer immer auf "wird geladen"
stehen, wenn es nichts zu laden gab.
d) Das Creator-Profil war fuer Scouts ohne Zuteilung wortlos leer --
der erklaerende Satz stand nur in der grauen Unterzeile.
Ausserdem meldete die bestehende Lesbarkeitspruefung zwei neue
Beschriftungen von mir als zu klein fuers Handy (10,88 statt 11,5 px).
Behoben, und dieselbe Groesse an der Serien-Karte gleich mit -- dort
waere es erst aufgefallen, sobald jemand eine Wiederholung anlegt.
GEPRUEFT: pruef-rollen 97, pruef-freie-namen 32 (mit Gegenproben:
Ben sieht Cigdems Aufgabe NICHT; die Saeulen-Zuordnung nimmt
ausdruecklich KEINEN freien Namen). Alle bestehenden Laeufe gruen:
Startansicht 133, Kalender 84, Serien 67, Protokoll 52, Handy 50, Sicht
48, Ampel 47, Content 45, Aufgabenbrett 44, Sprung 43,
Personen-Loeschen 40, Bereiche 37, Uebersicht 33, Workspace-Seiten 32,
Formulare 19, Betreuung 18, Grosscheck 15, Lesbarkeit 14.
Co-Authored-By: Claude Opus 5 <[email protected]>
514 lines
21 KiB
CSS
514 lines
21 KiB
CSS
/* ===================================================================
|
||
Aufgabenbrett. Baut auf gate.css und start.css auf.
|
||
=================================================================== */
|
||
|
||
/* .inhalt--breit, .zurueck, .kopf-zeile und .leise sind am 31.08.2026 nach
|
||
start.css gewandert -- sie werden auf jeder Seite gebraucht, aber nicht
|
||
jede Seite laedt diese Datei hier. */
|
||
|
||
/* ---------- Formular -------------------------------------------------- */
|
||
|
||
.neu {
|
||
margin: 0 0 28px;
|
||
padding: 20px;
|
||
background: var(--flaeche);
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius);
|
||
}
|
||
.neu__zeile { margin-bottom: 14px; }
|
||
/* Zwoelf Spalten statt auto-fit: Damit laesst sich sagen, WIE breit ein
|
||
Feld sein soll -- ein Titel braucht die ganze Zeile, eine Stufe ein
|
||
Drittel. auto-fit gab jedem Feld dieselbe Breite, egal was drin steht. */
|
||
.neu__raster {
|
||
display: grid; gap: 14px 16px; margin-bottom: 8px;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
}
|
||
/* Vorgabe: ein Drittel. Reicht fuer Auswahlfelder und Datumsangaben. */
|
||
/* JEDES direkte Kind, nicht nur die mit der Klasse .feld.
|
||
|
||
Genau daran lag die "verzogene" Formularzeile im Kalender: Dort
|
||
stehen schlichte <div> ohne Klasse. Sie fielen durch diese Regel
|
||
hindurch, bekamen von den zwoelf Spalten je EINE und wurden nur so
|
||
breit, wie ihr Inhalt sie zwang. Ergebnis: "Art" schmal, "Beginn"
|
||
breit, "Dauer (Minuten)" zweizeilig umgebrochen, alles auf
|
||
verschiedenen Hoehen. Es sah nach einem Fehler aus und war einer.
|
||
|
||
:not() haelt die Sonderbreiten am Leben. */
|
||
.neu__raster > *:not(.feld--breit):not(.feld--halb) { grid-column: span 4; min-width: 0; }
|
||
|
||
/* Alle Felder gleich hoch und unten buendig -- unabhaengig davon, ob
|
||
die Beschriftung darueber ein- oder zweizeilig ist. Ohne das sitzt
|
||
ein Feld mit langer Beschriftung tiefer als seine Nachbarn. */
|
||
.neu__raster { align-items: stretch; }
|
||
/* Zwei Zeilen je Feld: Die Beschriftung oben DEHNT sich (1fr), das
|
||
Eingabefeld unten hat feste Hoehe. Dadurch sitzen alle Eingabefelder
|
||
auf exakt derselben Linie -- unabhaengig davon, ob die Beschriftung
|
||
darueber ein- oder zweizeilig ist.
|
||
|
||
Der Umweg ueber flex mit justify-content: flex-end reichte nicht: Ein
|
||
<select> und ein <input> derselben Hoehe standen damit trotzdem 3 px
|
||
versetzt, weil ihre Kaesten unterschiedlich sitzen. Drei Pixel klingen
|
||
nach nichts und sind genau das, was man als "verzogen" sieht. */
|
||
/* Die zweite Rasterzeile hat eine FESTE Hoehe, und das Feld fuellt sie
|
||
ganz aus. Mit "auto" bestimmte jedes Element die Zeilenhoehe selbst:
|
||
Ein <select> mass sich 3 px kleiner als ein <input> und sass dadurch
|
||
hoeher. Gemessen: Container beider Felder 652+71 identisch, Eingabe
|
||
aber 676..720 gegen 679..723. Drei Pixel -- genau das, was man als
|
||
"verzogen" sieht. */
|
||
.neu__raster > * { display: grid; grid-template-rows: 1fr 44px; }
|
||
.neu__raster > * > .feld-schild { align-self: end; margin-bottom: 6px; }
|
||
.neu input, .neu select { height: 44px; box-sizing: border-box; }
|
||
/* Die Zeile ganz ausfuellen -- sonst zentriert der Browser das Element
|
||
darin und der Versatz waere wieder da. */
|
||
.neu__raster > * > input,
|
||
.neu__raster > * > select,
|
||
.neu__raster > * > textarea { align-self: stretch; height: 100%; }
|
||
.neu__raster textarea { min-height: 44px; }
|
||
|
||
/* Diese Klasse stand in drei HTML-Dateien, war aber NIE definiert --
|
||
deshalb quetschte das Raster jedes Feld in dieselbe Breite und lange
|
||
Kategorienamen wurden abgeschnitten. */
|
||
.neu__raster > .feld--breit { grid-column: 1 / -1; }
|
||
.neu__raster > .feld--halb { grid-column: span 6; }
|
||
|
||
@media (max-width: 860px) {
|
||
.neu__raster > *:not(.feld--breit) { grid-column: span 6; }
|
||
}
|
||
@media (max-width: 560px) {
|
||
/* Auf dem Handy untereinander -- zwei Felder auf 300 px sind zwei
|
||
Streifen, in die nichts hineinpasst. */
|
||
.neu__raster > * { grid-column: 1 / -1 !important; }
|
||
}
|
||
@media (max-width: 560px) {
|
||
.neu__raster > .feld, .neu__raster > .feld--halb { grid-column: 1 / -1; }
|
||
}
|
||
.neu__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
|
||
|
||
.feld-schild {
|
||
display: block; margin-bottom: 6px;
|
||
font-size: .76rem; font-weight: 600; letter-spacing: .06em;
|
||
text-transform: uppercase; color: var(--text-still);
|
||
}
|
||
|
||
/* 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. */
|
||
.neu textarea { min-height: 62px; }
|
||
/* Die BREITE bleibt hier: Sie ist Layout dieser Seite, nicht Aussehen.
|
||
Ohne sie fallen leere Auswahlfelder auf 28 Pixel zusammen. */
|
||
.neu input, .neu select, .neu textarea { width: 100%; }
|
||
/* Aufhellen ist nicht mehr noetig: color-scheme: dark (gate.css) laesst den
|
||
Browser das Kalendersymbol schon hell zeichnen. Ein invert() wuerde es hier
|
||
wieder verdunkeln. */
|
||
.neu input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
|
||
|
||
/* ---------- Brett ----------------------------------------------------- */
|
||
|
||
.brett {
|
||
display: grid; gap: 14px;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
align-items: start;
|
||
}
|
||
|
||
/* Die vier Spalten bekommen dieselbe Behandlung wie die Kacheln auf der
|
||
Startseite: eine eigene Farbe je Status, ein Streifen oben in dieser
|
||
Farbe, ein sehr weicher Verlauf darunter. Vorher unterschied sie nur
|
||
ein 8 px grosser Punkt -- vier gleiche graue Kaesten nebeneinander.
|
||
|
||
Die Farbe folgt dem STATUS, nicht dem Rang: Offen blaugrau (noch
|
||
nichts passiert), In Arbeit blau (laeuft), Review gold (jemand muss
|
||
hinsehen), Erledigt gruen (fertig). */
|
||
.spalte {
|
||
--sfarbe: #6f89a8;
|
||
position: relative; overflow: hidden;
|
||
background:
|
||
linear-gradient(180deg, color-mix(in srgb, var(--sfarbe) 8%, transparent), transparent 42%),
|
||
var(--flaeche);
|
||
border: 1px solid color-mix(in srgb, var(--sfarbe) 20%, var(--rand));
|
||
border-radius: var(--radius);
|
||
padding: 16px 13px 18px;
|
||
min-height: 120px;
|
||
}
|
||
/* Der Streifen oben laeuft nach rechts aus -- eine durchgezogene Kante
|
||
wirkt wie eine Trennwand, eine auslaufende wie eine Markierung. */
|
||
.spalte::before {
|
||
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
|
||
background: linear-gradient(90deg, var(--sfarbe),
|
||
color-mix(in srgb, var(--sfarbe) 20%, transparent) 70%, transparent);
|
||
}
|
||
/* Was die Spalte bedeutet -- steht immer da, nicht nur wenn sie leer
|
||
ist. "Review" allein sagt einem Neuen nichts. */
|
||
.spalte__unter {
|
||
margin: 2px 0 12px 17px;
|
||
font-size: .76rem; color: var(--text-still);
|
||
}
|
||
|
||
.spalte__kopf {
|
||
display: flex; align-items: center; gap: 8px;
|
||
margin: 0 2px 12px;
|
||
font-size: .78rem; font-weight: 700;
|
||
letter-spacing: .08em; text-transform: uppercase;
|
||
color: var(--text-leise);
|
||
}
|
||
.spalte__punkt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
|
||
.spalte__zahl {
|
||
margin-left: auto; padding: 1px 8px;
|
||
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
||
font-size: .74rem; color: var(--text-still); letter-spacing: normal;
|
||
}
|
||
|
||
/* --ton mitgesetzt: Das Licht unter dem Zeiger nimmt seine Farbe von
|
||
dort. Ohne diese Zeile leuchtete die gruene Erledigt-Spalte orange
|
||
(der Farbton der SEITE), was aussah wie ein Fehler und einer war. */
|
||
.spalte[data-status="offen"] { --sfarbe: #6f89a8; --ton: #6f89a8; }
|
||
.spalte[data-status="arbeit"] { --sfarbe: #3fbdf5; --ton: #3fbdf5; }
|
||
.spalte[data-status="review"] { --sfarbe: #e0a33c; --ton: #e0a33c; }
|
||
.spalte[data-status="erledigt"] { --sfarbe: #4dab77; --ton: #4dab77; }
|
||
.spalte__punkt {
|
||
background: var(--sfarbe);
|
||
box-shadow: 0 0 9px color-mix(in srgb, var(--sfarbe) 70%, transparent);
|
||
}
|
||
.spalte .spalte__zahl { color: var(--sfarbe); }
|
||
|
||
.karte {
|
||
padding: 12px 13px;
|
||
margin-bottom: 9px;
|
||
background: rgba(9, 13, 22, .78);
|
||
border: 1px solid var(--rand);
|
||
border-left: 3px solid transparent;
|
||
border-radius: var(--radius-klein);
|
||
}
|
||
.karte[data-prio="hoch"] { border-left-color: #d8656e; }
|
||
.karte[data-prio="mittel"] { border-left-color: #4b6c8a; }
|
||
.karte[data-prio="niedrig"] { border-left-color: #3c4a5a; }
|
||
|
||
.karte__titel { font-weight: 600; font-size: .93rem; line-height: 1.35; }
|
||
.karte__text { margin: 6px 0 0; font-size: .84rem; color: var(--text-leise); }
|
||
|
||
.karte__zeile {
|
||
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
||
margin-top: 10px; font-size: .76rem; color: var(--text-still);
|
||
}
|
||
.karte__frist--faellig { color: var(--warn); font-weight: 600; }
|
||
|
||
.karte__schritte { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
|
||
|
||
/* Der leere Zustand einer Spalte. Vorher stand hier in allen vier
|
||
Spalten ein Gedankenstrich -- vier graue Striche nebeneinander sehen
|
||
aus, als sei die Seite kaputt. Jetzt sagt jeder Satz, was das
|
||
Leersein BEDEUTET (siehe SPALTEN in aufgaben.js), auf einer eigenen
|
||
ruhigen Flaeche statt im Nichts. */
|
||
.spalte__leer {
|
||
margin: 4px 0 0; padding: 16px 12px;
|
||
text-align: center;
|
||
font-size: .82rem; color: var(--text-still); line-height: 1.5;
|
||
border: 1px solid color-mix(in srgb, var(--sfarbe) 14%, transparent);
|
||
border-radius: var(--radius-klein);
|
||
background: color-mix(in srgb, var(--sfarbe) 5%, transparent);
|
||
}
|
||
|
||
@media (max-width: 1080px) { .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||
@media (max-width: 620px) { .brett { grid-template-columns: 1fr; } }
|
||
|
||
/* ---------- Bearbeiten-Dialog ------------------------------------------ */
|
||
|
||
.dialog {
|
||
width: min(560px, calc(100vw - 32px));
|
||
padding: 0; border: 1px solid var(--rand-hell);
|
||
border-radius: var(--radius);
|
||
background: #0b1018;
|
||
color: var(--text);
|
||
box-shadow: var(--schatten);
|
||
}
|
||
.dialog::backdrop { background: rgba(2, 4, 8, .68); backdrop-filter: blur(3px); }
|
||
|
||
.neu--blank { margin: 0; border: 0; background: none; padding: 22px; }
|
||
|
||
.dialog__titel { margin: 0 0 18px; font-size: 1.12rem; font-weight: 700; }
|
||
|
||
.dialog__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
|
||
.dialog__knoepfe #b-loeschen { margin-left: auto; }
|
||
|
||
.abmelden--warnung { color: var(--warn); border-color: rgba(255, 154, 162, .35); }
|
||
.abmelden--warnung:hover { background: rgba(255, 154, 162, .1); border-color: rgba(255, 154, 162, .6); }
|
||
|
||
/* Der Bearbeiten-Stift war nie ein richtiger Knopf, sondern nackter
|
||
Text -- man sah nicht, dass man draufdruecken kann. Jetzt traegt er
|
||
das Knopf-System in der kleinsten, ruhigsten Groesse. */
|
||
.karte__stift { margin-left: auto; }
|
||
.karte__kopf { display: flex; align-items: flex-start; gap: 8px; }
|
||
.karte__kopf .karte__titel { flex: 1 1 auto; }
|
||
|
||
/* ===================================================================
|
||
Rückmeldungen an einer Aufgabe ("Aufgaben & Feedback", Konzept).
|
||
|
||
Direkt an der Karte, nicht in einem Fenster: Man liest sie im
|
||
Zusammenhang mit der Aufgabe -- sonst fehlt beim Antworten die
|
||
Hälfte.
|
||
=================================================================== */
|
||
|
||
.karte__rueck {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
margin-top: 10px; padding: 6px 11px; cursor: pointer;
|
||
background: transparent;
|
||
border: 1px solid var(--rand); border-radius: 999px;
|
||
color: var(--text-still); font: inherit; font-size: .76rem;
|
||
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
||
}
|
||
.karte__rueck:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
|
||
/* Wo schon etwas besprochen wurde, sieht man es ohne Aufklappen. */
|
||
.karte__rueck[data-hat="ja"] {
|
||
color: var(--akzent);
|
||
border-color: rgba(63, 189, 245, .38);
|
||
background: rgba(63, 189, 245, .08);
|
||
}
|
||
.karte__rueck[data-offen="ja"] { border-color: rgba(63, 189, 245, .6); color: #fff; }
|
||
.karte__blase {
|
||
width: 14px; height: 14px; flex: none;
|
||
fill: none; stroke: currentColor; stroke-width: 1.7;
|
||
stroke-linecap: round; stroke-linejoin: round;
|
||
}
|
||
|
||
.rueck {
|
||
margin-top: 11px; padding-top: 11px;
|
||
border-top: 1px solid var(--rand);
|
||
}
|
||
.rueck__liste { display: grid; gap: 8px; margin-bottom: 11px; }
|
||
.rueck__eintrag {
|
||
padding: 9px 12px;
|
||
background: rgba(255, 255, 255, .035);
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
}
|
||
.rueck__kopf { display: flex; align-items: baseline; gap: 8px; margin: 0 0 3px; }
|
||
.rueck__wer { font-size: .79rem; font-weight: 650; color: var(--text); }
|
||
.rueck__wann { font-size: .72rem; color: var(--text-still); }
|
||
.rueck__weg {
|
||
margin-left: auto; padding: 0 5px; cursor: pointer; line-height: 1;
|
||
background: none; border: 0; color: var(--text-still); font-size: 1rem;
|
||
}
|
||
.rueck__weg:hover { color: #ffb4b9; }
|
||
.rueck__text {
|
||
margin: 0; font-size: .85rem; color: var(--text-leise);
|
||
white-space: pre-wrap; line-height: 1.5;
|
||
}
|
||
|
||
.rueck__form { display: grid; gap: 8px; justify-items: start; }
|
||
.rueck__feld {
|
||
width: 100%; padding: 9px 12px;
|
||
background: rgba(255, 255, 255, .045);
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
color: var(--text); font: inherit; font-size: .86rem; resize: vertical;
|
||
}
|
||
.rueck__feld:focus {
|
||
outline: none; border-color: rgba(63, 189, 245, .65);
|
||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .15);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) { .karte__rueck { transition: none; } }
|
||
|
||
/* Die letzten drei Pixel.
|
||
|
||
Trotz gleicher Hoehe und gleicher Rasterzeile sassen Auswahl- und
|
||
Eingabefelder 3 px versetzt. Grund: Ein <input> ist von Haus aus
|
||
inline und wird an der SCHRIFTGRUNDLINIE ausgerichtet -- die liegt je
|
||
nach Element unterschiedlich. Drei Pixel klingen nach nichts und sind
|
||
genau das, was man als "verzogen" sieht.
|
||
|
||
display: block nimmt die Grundlinie aus dem Spiel; margin: 0 die
|
||
Vorgaben des Browsers. */
|
||
.neu__raster > * > input,
|
||
.neu__raster > * > select,
|
||
.neu__raster > * > textarea {
|
||
display: block;
|
||
width: 100%;
|
||
margin: 0;
|
||
vertical-align: top;
|
||
}
|
||
|
||
/* Die Beschriftung bekommt eine FESTE Hoehe.
|
||
|
||
Damit beginnt das Eingabefeld in jeder Spalte an derselben Stelle --
|
||
ganz gleich, wie das Feld darunter beschaffen ist. Vorher hing es an
|
||
Grundlinien und Zeilenhoehen, und drei Pixel Versatz blieben trotz
|
||
gleicher Feldhoehe und gleicher Rasterzeile uebrig.
|
||
|
||
Feste Werte sind hier ausnahmsweise das richtige Mittel: Eine
|
||
Beschriftung ist immer einzeilig (mehrzeilige werden gekuerzt, siehe
|
||
die Handypruefung), und "alle Felder auf einer Linie" ist eine
|
||
Zusicherung, keine Faustregel. */
|
||
.neu__raster > * > .feld-schild {
|
||
height: 17px;
|
||
margin-bottom: 7px;
|
||
line-height: 17px;
|
||
overflow: hidden;
|
||
white-space: nowrap; text-overflow: ellipsis;
|
||
}
|
||
|
||
/* ---------- Die Leiste über dem Brett (01.09.2026) ------------------------
|
||
|
||
"verbessere die Aufgabenseite auch bei Manager, Scout und Creator …
|
||
aber auch die Creator sollen es besser und detaillierter sehen."
|
||
|
||
Drei Zeilen, die zusammen die Frage beantworten, mit der man auf diese
|
||
Seite kommt: Muss ich mir Sorgen machen, und wo fange ich an? Ein
|
||
Brett aus vier Spalten kann das nicht sagen – man müsste alle vier
|
||
durchsehen, um zu wissen, dass nichts brennt. */
|
||
|
||
.lage {
|
||
--l-ton: #6f89a8;
|
||
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
||
margin: 0 0 14px; padding: 11px 15px;
|
||
border: 1px solid color-mix(in srgb, var(--l-ton) 28%, var(--rand));
|
||
border-left-width: 3px;
|
||
border-radius: var(--radius-klein);
|
||
background:
|
||
linear-gradient(90deg, color-mix(in srgb, var(--l-ton) 10%, transparent), transparent 55%),
|
||
var(--flaeche);
|
||
}
|
||
.lage[data-stufe="warnung"] { --l-ton: #e0a33c; }
|
||
.lage[data-stufe="offen"] { --l-ton: #6f89a8; }
|
||
.lage[data-stufe="ruhig"] { --l-ton: #4dab77; }
|
||
.lage__satz { font-size: .95rem; color: var(--text); }
|
||
.lage[data-stufe="warnung"] .lage__satz { color: #f0c67c; }
|
||
/* Steht rechts und leiser: "wie viel davon ist meins" ist die zweite
|
||
Frage, nicht die erste. */
|
||
.lage__meins {
|
||
margin-left: auto; padding: 3px 10px;
|
||
border: 1px solid var(--rand); border-radius: 999px;
|
||
font-size: .78rem; color: var(--text-leise);
|
||
}
|
||
|
||
.ausschnitte, .creator-reihe {
|
||
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
||
margin-bottom: 12px;
|
||
}
|
||
.creator-reihe { margin-bottom: 18px; }
|
||
.creator-reihe__schild {
|
||
font-size: .72rem; font-weight: 600;
|
||
letter-spacing: .1em; text-transform: uppercase;
|
||
color: var(--text-still); margin-right: 2px;
|
||
}
|
||
|
||
/* Ein Ausschnitt-Knopf trägt IMMER seine Zahl. Ein Filter, der sich erst
|
||
nach dem Klick als leer herausstellt, kostet zweimal Aufmerksamkeit --
|
||
und man klickt ihn beim nächsten Mal trotzdem wieder an. */
|
||
.schnitt, .creator-knopf {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
min-height: 38px; padding: 7px 13px;
|
||
border: 1px solid var(--rand); border-radius: 999px;
|
||
background: rgba(255, 255, 255, .03);
|
||
color: var(--text-leise); font: inherit; font-size: .85rem;
|
||
cursor: pointer;
|
||
transition: border-color var(--tempo), color var(--tempo), background var(--tempo);
|
||
}
|
||
.schnitt:hover:not([disabled]), .creator-knopf:hover {
|
||
color: var(--text); border-color: rgba(255, 255, 255, .22);
|
||
}
|
||
.schnitt[aria-pressed="true"], .creator-knopf[aria-pressed="true"] {
|
||
color: var(--text);
|
||
border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
|
||
background: color-mix(in srgb, var(--akzent) 13%, transparent);
|
||
}
|
||
.schnitt:focus-visible, .creator-knopf:focus-visible {
|
||
outline: 2px solid var(--akzent); outline-offset: 2px;
|
||
}
|
||
/* Ein Ausschnitt ohne Inhalt wird abgeschaltet statt versteckt: Wer
|
||
gestern "3 überfällig" gesehen hat, soll heute sehen, dass es 0 sind
|
||
-- und nicht rätseln, wo der Knopf hin ist. */
|
||
.schnitt[disabled] { opacity: .42; cursor: default; }
|
||
|
||
.schnitt__zahl, .creator-knopf__zahl {
|
||
min-width: 20px; padding: 1px 7px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, .07);
|
||
font-size: .76rem; font-weight: 700;
|
||
font-variant-numeric: tabular-nums;
|
||
text-align: center;
|
||
}
|
||
/* "Überfällig" trägt seine Farbe nur, wenn wirklich etwas überfällig ist.
|
||
Ein dauerhaft warnender Knopf warnt nach zwei Tagen niemanden mehr. */
|
||
.schnitt[data-warn="ja"]:not([disabled]) {
|
||
color: #f0c67c; border-color: rgba(224, 163, 60, .42);
|
||
}
|
||
.schnitt[data-warn="ja"]:not([disabled]) .schnitt__zahl {
|
||
background: rgba(224, 163, 60, .18);
|
||
}
|
||
.schnitt[data-warn="ja"][aria-pressed="true"] {
|
||
background: rgba(224, 163, 60, .16);
|
||
border-color: rgba(224, 163, 60, .6);
|
||
}
|
||
|
||
.creator-knopf__name { font-weight: 600; color: inherit; }
|
||
/* Die kleine Warnzahl am Creator: wie viele seiner Aufgaben überfällig
|
||
sind. Sie steht NEBEN der Gesamtzahl, nicht statt ihr -- sonst weiß
|
||
man nicht, ob "2" viel oder wenig ist. */
|
||
.creator-knopf__warn {
|
||
min-width: 20px; padding: 1px 7px;
|
||
border-radius: 999px;
|
||
background: rgba(224, 163, 60, .18);
|
||
border: 1px solid rgba(224, 163, 60, .38);
|
||
color: #f0c67c;
|
||
font-size: .74rem; font-weight: 700;
|
||
font-variant-numeric: tabular-nums; text-align: center;
|
||
}
|
||
|
||
@media (max-width: 560px) {
|
||
.lage { flex-direction: column; align-items: flex-start; gap: 6px; }
|
||
.lage__meins { margin-left: 0; }
|
||
/* Waagerecht scrollen statt umbrechen: Bei fünf Creatorn würde die
|
||
Reihe sonst drei Zeilen hoch und das Brett wäre weg. */
|
||
.ausschnitte, .creator-reihe {
|
||
flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
|
||
scrollbar-width: thin;
|
||
}
|
||
.schnitt, .creator-knopf { flex: none; }
|
||
}
|
||
|
||
/* ===================================================================
|
||
Der feste Call-Raum (02.09.2026)
|
||
|
||
Eine ruhige Zeile über der Liste: wo die Gespräche stattfinden. Sie
|
||
beantwortet die Frage einmal, statt sie an jedem Termin neu zu
|
||
stellen. Bewusst zurückhaltend -- sie ist eine Auskunft, keine
|
||
Aufforderung.
|
||
=================================================================== */
|
||
.call-raum {
|
||
display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
|
||
margin: 0 0 18px; padding: 11px 14px;
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
background: var(--flaeche);
|
||
}
|
||
.call-raum__zeile {
|
||
margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
||
min-width: 0;
|
||
}
|
||
.call-raum__schild {
|
||
/* .78rem = 12,48 px. Untergrenze auf dem Handy sind 11,5 px (siehe
|
||
pruef-grosscheck.mjs) -- die vorher hier stehenden .68rem waren
|
||
10,88 px und damit unter der Grenze. Eine Beschriftung in
|
||
Grossbuchstaben braucht ohnehin mehr Groesse, nicht weniger. */
|
||
font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
}
|
||
.call-raum__link {
|
||
color: var(--akzent);
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
max-width: min(60vw, 520px);
|
||
}
|
||
.call-raum__leer { color: var(--text-still); font-size: .86rem; }
|
||
.call-raum button { margin-left: auto; }
|
||
.call-raum__form {
|
||
display: flex; align-items: end; flex-wrap: wrap; gap: 8px;
|
||
width: 100%;
|
||
}
|
||
.call-raum__form .feld-schild { width: 100%; margin: 0 0 2px; }
|
||
.call-raum__form input { flex: 1 1 260px; min-width: 0; }
|
||
.call-raum__form button { margin-left: 0; }
|
||
|
||
@media (max-width: 560px) {
|
||
.call-raum { align-items: flex-start; }
|
||
.call-raum button { margin-left: 0; }
|
||
}
|