DogFatherGit
432e533c86
GEMESSEN, was dort wirklich stand:
Fenster Zelle Pille Platz fuer Text
360 px 42 px 32 px 16 px -> 1-2 Buchstaben
390 px 46 px 36 px 20 px -> 2-3 Buchstaben
412 px 49 px 39 px 23 px -> 3 Buchstaben
768 px 95 px 85 px 69 px -> lesbar
"Content-Ideen sammeln" wurde zu "C…" -- eine Zeile, die Hoehe kostet
und nichts sagt. Drei Termine an einem Tag waren drei solche Zeilen.
JETZT: ein Punkt je Termin, nebeneinander. Man sieht, DASS an dem Tag
etwas ist und wie viel, und tippt den Tag an, um zu lesen, was. Der
Tagesdialog dafuer steht seit jeher, ist lesbar und hat 44-px-Zeilen;
er war nur schwer zu finden, solange das Raster so tat, als koenne man
dort lesen.
- Zeitraum: bleibt ein durchgehender Balken. Ihn auch zu Punkten zu
machen naehme genau das weg, wofuer er am 21.09. gebaut wurde.
- Anlass (Feiertag u. a.): ein ECKIGES Zeichen, damit man es vom
runden Termin unterscheidet. "DE…" fuer "Tag der Deutschen
Einheit" sagt genauso wenig.
- Erledigtes: hohl statt voll -- sonst saehe ein abgehakter Termin
aus wie ein offener, und der Kalender loege.
- Die Punkte sind NICHT einzeln antippbar (pointer-events: none).
Ein 8-px-Link waere ein Nadeloehr; so faellt jeder Tipp auf die
Zelle. Am Rechner bleibt die Pille ein Link.
DREI DINGE, DIE ERST DAS BILDSCHIRMFOTO GEZEIGT HAT:
(1) Die Zahlen sagten 8 x 8 -- und der Titel lief trotzdem quer ueber
die Nachbarzellen. Ursache: start.css traegt eine Sammelregel
`body.start .k-pille { font-size: .75rem }`, um ein Element
spezifischer als `.k-tag .k-pille` (0,2,1 gegen 0,2,0). Sie
gewinnt, egal welche Datei spaeter laedt. Aufgeklaert hat es die
Frage an den Browser, WELCHE Regeln auf das Element passen.
(2) `.k-tag` traegt `container-type: inline-size` und ist damit der
Behaelter fuer ihre KINDER. Eine Regel fuer `.k-tag` SELBST in
`@container` wird gegen den naechsten Behaelter darueber geprueft
und greift nie. Die Zelle blieb eine Flex-Spalte, jeder Punkt bekam
eine eigene Zeile. Jetzt fragt die Zelle das Raster -- ein
benannter Behaelter, Schwelle gerechnet: 46 + 8 + 7 x 60 = 474.
(3) Die Kinder der Pille (Uhrzeit, Wiederholzeichen) haben eine eigene
Schriftgroesse und hielten den Punkt auf 26 px Hoehe. Ein 8 x 26
grosser "Punkt" ist ein Strich.
pruef-kalender: 141/0 -- vorher 135 ok und 6 FEHL.
Die sechs waren KEIN Fehler am Kalender, und nur einer davon war neu:
- Vier kamen von Screen 11 (Termin von-bis): Ein Eintrag ueber fuenf
Tage setzt fuenf Marken, und die Pruefung zaehlte Marken statt
Eintraege. Sie hatte am 17.09. schon gelernt, ihre Erwartung
abzuleiten -- veraltet war diesmal nicht die Erwartung, sondern
das, was gemessen wurde. Gezaehlt wird jetzt ueber den VERWEIS
(`zeigen=eintrag-N`), der an jedem Tag derselbe ist. Der `title`
ginge nicht: Er endet mit "(Tag 3 von 5)".
- Zwei waren meine: Die Pruefung las die Farbe aus der linken Kante
-- die faellt beim Punkt weg, also meldete sie "1 Farbe" statt 5.
Gelesen wird jetzt `--pfarbe`, die Quelle selbst.
Neun neue Zusicherungen, darunter die, die beim Bauen gefehlt hat:
"nichts ragt ueber den Rand seiner Zelle hinaus". Groesse allein
genuegt nicht -- die Pille war bereits 8 x 8 und trug trotzdem Text.
Gegenprobe: Raster auf 1200 px aufziehen, Titel muss zurueckkommen.
Nachbarn gruen: pruef-tippziele 11/0 (sieht die 11 neuen Regeln, zaehlt
den Punkt richtig nicht als Tippziel), pruef-css-klassen 30/0,
pruef-zeitraum 16/0, pruef-terminregel 35/0.
1885 lines
76 KiB
CSS
1885 lines
76 KiB
CSS
/* ===================================================================
|
|
Kalender
|
|
|
|
Gebaut nach demselben Grundsatz wie die Kacheln auf der Startseite:
|
|
Die Farbe gehört zur SACHE, nicht zum Rang. Ein Call ist überall
|
|
blau, ein Review überall grün, eine Frist überall orange -- in der
|
|
Pille im Raster, in der Zeile in der Liste, im Filterknopf und im
|
|
Balken des Zeitstrahls. Wer die Farbe einmal gelernt hat, muss die
|
|
Beschriftung nicht mehr lesen.
|
|
|
|
Augenschonend: gedeckte Töne, keine Signalfarben, kein Blinken. Der
|
|
einzige laute Punkt ist "heute" -- und der darf laut sein, weil man
|
|
ihn sucht.
|
|
=================================================================== */
|
|
|
|
/* ---------- Kopf: der Zeitraum als Überschrift --------------------------
|
|
Man liest zuerst, WO man ist, und bewegt sich dann. Deshalb steht der
|
|
Monat groß und die Navigation daneben, nicht umgekehrt. */
|
|
.k-kopf {
|
|
position: relative; overflow: hidden;
|
|
display: flex; align-items: flex-end; justify-content: space-between;
|
|
flex-wrap: wrap; gap: 16px;
|
|
margin-bottom: 22px; padding-bottom: 18px;
|
|
/* Dieselbe auslaufende Trennlinie wie auf allen anderen Seiten -- der
|
|
Kalender hat zwar einen eigenen Kopf, gehört aber zur selben
|
|
Familie. Die Farbe kommt aus data-ton am body (kopf.js). */
|
|
border-bottom: 1px solid transparent;
|
|
border-image: linear-gradient(90deg,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 40%, var(--rand-hell)),
|
|
transparent 62%) 1;
|
|
}
|
|
/* Zeichen und Zeitraum nebeneinander (die Plakette setzt kopf.js). */
|
|
.k-kopf .kopf-zeile__marke { align-items: center; }
|
|
.k-kopf .k-kopf__titel { min-width: 0; }
|
|
.k-zeitraum {
|
|
margin: 0;
|
|
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
|
|
letter-spacing: -.025em;
|
|
color: #f2f7fd;
|
|
text-shadow: 0 2px 26px rgba(63, 189, 245, .16);
|
|
/* Der Monatsname wechselt beim Blättern die Länge. Ohne feste
|
|
Zeichenbreite für die Jahreszahl springt die Zeile dabei. */
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-kopf__unter {
|
|
margin: 5px 0 0;
|
|
font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.k-pfeil {
|
|
min-width: 38px; padding-left: 0; padding-right: 0;
|
|
font-size: 1.15rem; line-height: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ---------- Die beiden Anlassreihen ------------------------------------
|
|
Oben "Als Nächstes" (blickt ab heute nach vorn, ändert sich beim
|
|
Blättern NICHT), darunter die Anlässe des angezeigten Zeitraums. Sie
|
|
sehen absichtlich gleich aus -- es sind dieselben Dinge, nur zu einer
|
|
anderen Frage. Die Überschriften sagen, welche. */
|
|
.k-leiste { margin-bottom: 20px; }
|
|
.k-leiste .feldschild { display: flex; align-items: center; gap: 9px; }
|
|
.k-leiste .feldschild::before {
|
|
content: "";
|
|
width: 18px; height: 2px; border-radius: 2px;
|
|
background: linear-gradient(90deg, var(--akzent), transparent);
|
|
opacity: .8;
|
|
}
|
|
.k-anlassreihe {
|
|
display: grid; gap: 9px;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.k-anlasskarte {
|
|
--afarbe: var(--akzent);
|
|
position: relative; overflow: hidden;
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 11px 14px 11px 16px;
|
|
border: 1px solid color-mix(in srgb, var(--afarbe) 26%, var(--rand));
|
|
border-radius: var(--radius-klein);
|
|
background:
|
|
linear-gradient(90deg, color-mix(in srgb, var(--afarbe) 11%, transparent), transparent 58%),
|
|
var(--flaeche);
|
|
cursor: pointer;
|
|
transition: border-color .18s ease, background .18s ease, transform .18s ease;
|
|
}
|
|
.k-anlasskarte::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg, var(--afarbe),
|
|
color-mix(in srgb, var(--afarbe) 35%, transparent));
|
|
}
|
|
.k-anlasskarte:hover, .k-anlasskarte:focus-visible {
|
|
border-color: color-mix(in srgb, var(--afarbe) 46%, var(--rand));
|
|
transform: translateY(-1px);
|
|
}
|
|
/* Vorbei heißt: steht noch da, aber leiser. Ganz wegzulassen wäre
|
|
falsch -- man will sehen, dass der Tag gewesen ist. */
|
|
.k-anlasskarte.vorbei { opacity: .5; }
|
|
.k-anlasskarte__sym { font-size: 1.3rem; line-height: 1; flex: none; }
|
|
.k-anlasskarte__txt { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
|
|
/* Der Name darf umbrechen statt abzubrechen. Vorher stand hier
|
|
"Tag der Deutsc…" -- abgeschnittener Text sieht auf den ersten Blick
|
|
nach Absicht aus und ist deshalb der teuerste stille Fehler in einer
|
|
Karte. Zwei Zeilen kosten nichts, ein verlorener Name schon. */
|
|
.k-anlasskarte__name {
|
|
font-weight: 650; color: var(--text);
|
|
line-height: 1.25;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.k-anlasskarte__wann { font-size: .78rem; color: var(--text-leise); }
|
|
.k-anlasskarte__rest {
|
|
flex: none; text-align: right;
|
|
font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--afarbe);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-anlasskarte__rest small {
|
|
display: block; margin-top: 2px;
|
|
font-size: .64rem; letter-spacing: .06em;
|
|
color: var(--text-still); text-transform: none;
|
|
}
|
|
.k-anlassleer {
|
|
grid-column: 1 / -1;
|
|
margin: 0; padding: 13px 16px;
|
|
font-size: .88rem; color: var(--text-still);
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
}
|
|
|
|
/* ---------- Werkzeugleiste: Ansicht und Filter -------------------------- */
|
|
.k-werkzeuge {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
flex-wrap: wrap; gap: 12px;
|
|
margin: 4px 0 16px;
|
|
}
|
|
/* =====================================================================
|
|
DER ANSICHTS-UMSCHALTER: EINE SCHIENE, NICHT VIER KACHELN
|
|
(07.09.2026)
|
|
|
|
Filipe hat ihn abfotografiert: "das soll viel besser und geiler
|
|
aussehen."
|
|
|
|
DER GRUND WAR MEIN EIGENER: `.k-ansicht` stand in der Modulliste von
|
|
module.css. Jeder der vier Knoepfe bekam damit die volle Behandlung
|
|
einer Kachel -- abgeschnittene Ecke, Kantenlicht, Eckwinkel, Raster.
|
|
Auf einer Flaeche von 90 mal 32 Pixeln ist das kein Modul, sondern
|
|
Gedraenge: vier Fasen, vier Lichter, sechzehn Eckwinkel nebeneinander.
|
|
|
|
Die Modulform ist fuer FLAECHEN gedacht, die etwas enthalten. Ein
|
|
Umschalter enthaelt nichts, er waehlt etwas aus -- und die richtige
|
|
Form dafuer ist seit jeher die Schiene: eine vertiefte Bahn, in der
|
|
ein erhabenes Stueck sitzt. Man sieht auf einen Blick, dass die vier
|
|
zusammengehoeren und dass genau eines gewaehlt ist.
|
|
|
|
So ist es gebaut:
|
|
DIE BAHN dunkel, mit Schatten von oben innen -- eine Fraesung.
|
|
DIE STUECKE ohne eigenen Rand; sie liegen IN der Bahn.
|
|
DAS GEWAEHLTE als gebuerstetes Metall, leicht erhaben, mit einer
|
|
Lichtkante oben und einem Schatten darunter. Dieselbe Sprache wie
|
|
die Luenette der Uhr und die Schilder der Kacheln.
|
|
===================================================================== */
|
|
.k-ansichten {
|
|
display: inline-flex; gap: 3px; flex-wrap: wrap;
|
|
padding: 3px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(180deg, #05080e, #0a1018);
|
|
box-shadow:
|
|
inset 0 2px 4px -1px rgba(0, 0, 0, .95),
|
|
inset 0 -1px 0 rgba(190, 215, 245, .12),
|
|
0 1px 0 rgba(255, 255, 255, .04);
|
|
}
|
|
.k-ansicht {
|
|
padding: 7px 15px;
|
|
border: 0; border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--text-leise);
|
|
font: inherit; font-size: .86rem; font-weight: 600;
|
|
cursor: pointer;
|
|
transition: color .18s ease, background .18s ease;
|
|
}
|
|
.k-ansicht:hover { color: var(--text); border-color: var(--rand-hell); }
|
|
.k-ansicht[aria-pressed="true"] {
|
|
color: #0a1018;
|
|
font-weight: 700;
|
|
/* Gebuerstetes Metall -- rund, also conic. Die Lehre vom Nachmittag:
|
|
Die Verlaufsart muss zur FORM passen. */
|
|
background:
|
|
conic-gradient(from 200deg,
|
|
#e9f1fb 0deg, #a8b8cc 60deg, #f6fbff 120deg, #93a5bb 190deg,
|
|
#e2ebf6 260deg, #b3c2d4 320deg, #e9f1fb 360deg);
|
|
box-shadow:
|
|
0 1px 0 rgba(255, 255, 255, .5) inset,
|
|
0 -1px 0 rgba(0, 0, 0, .35) inset,
|
|
0 2px 5px -2px rgba(0, 0, 0, .8);
|
|
}
|
|
|
|
.k-filter { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.k-chip {
|
|
--cfarbe: var(--akzent);
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 8px 14px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
background: var(--flaeche);
|
|
color: var(--text-still);
|
|
font: inherit; font-size: .84rem;
|
|
cursor: pointer;
|
|
font-variant-numeric: tabular-nums;
|
|
transition: border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
|
|
}
|
|
.k-chip__punkt {
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|
background: var(--cfarbe);
|
|
transition: opacity .18s ease, box-shadow .18s ease;
|
|
}
|
|
.k-chip[aria-pressed="true"] {
|
|
color: var(--text);
|
|
border-color: color-mix(in srgb, var(--cfarbe) 40%, transparent);
|
|
background: color-mix(in srgb, var(--cfarbe) 11%, transparent);
|
|
}
|
|
.k-chip[aria-pressed="true"] .k-chip__punkt {
|
|
box-shadow: 0 0 8px color-mix(in srgb, var(--cfarbe) 70%, transparent);
|
|
}
|
|
/* Ausgeschaltet: der Punkt wird hohl. Nur die Deckkraft zu senken wäre
|
|
im Kontrastmodus nicht zu unterscheiden. */
|
|
.k-chip[aria-pressed="false"] .k-chip__punkt {
|
|
background: transparent;
|
|
box-shadow: inset 0 0 0 1.5px var(--cfarbe);
|
|
opacity: .55;
|
|
}
|
|
|
|
/* ---------- Monatsraster ------------------------------------------------
|
|
Eine Spalte für die Kalenderwoche, dann die sieben Tage. Die
|
|
KW-Spalte ist kein Schmuck: In Absprachen ("machen wir in KW 42")
|
|
ist sie die übliche Währung. */
|
|
.k-raster {
|
|
display: grid;
|
|
grid-template-columns: 46px repeat(7, minmax(0, 1fr));
|
|
gap: 1px;
|
|
background: var(--rand);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
overflow: hidden;
|
|
}
|
|
.k-spaltenkopf {
|
|
padding: 11px 10px;
|
|
background: rgba(12, 17, 28, .82);
|
|
font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
|
|
color: var(--text-leise);
|
|
}
|
|
.k-spaltenkopf--kw { color: var(--text-still); }
|
|
|
|
.k-kw {
|
|
display: flex; align-items: flex-start; justify-content: center;
|
|
padding: 10px 4px;
|
|
background: rgba(9, 13, 22, .78);
|
|
font-size: .78rem; font-weight: 600;
|
|
color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Die laufende Woche wird in der KW-Spalte markiert -- dadurch findet
|
|
man sich beim Blättern sofort zurecht. */
|
|
.k-kw[data-jetzt="ja"] {
|
|
color: var(--akzent);
|
|
background: color-mix(in srgb, var(--akzent) 12%, rgba(9, 13, 22, .78));
|
|
}
|
|
|
|
.k-tag {
|
|
min-height: 108px;
|
|
padding: 8px 9px 10px;
|
|
background: rgba(11, 15, 25, .74);
|
|
display: flex; flex-direction: column; gap: 4px;
|
|
cursor: pointer;
|
|
transition: background .16s ease;
|
|
}
|
|
.k-tag:hover { background: rgba(20, 27, 42, .85); }
|
|
.k-tag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
|
/* Tage des Nachbarmonats: da, aber deutlich zurückgenommen. Sie ganz
|
|
wegzulassen würde das Raster zerreißen. */
|
|
.k-tag[data-fremd="ja"] { background: rgba(7, 10, 17, .72); }
|
|
.k-tag[data-fremd="ja"] .k-tag__zahl { color: var(--text-still); opacity: .6; }
|
|
.k-tag[data-wochenende="ja"] { background: rgba(9, 12, 20, .8); }
|
|
/* Gesetzlicher Feiertag: ein Hauch Rosé. Kein Signal, nur eine andere
|
|
Fläche -- man sieht ihn, ohne dass er ruft. */
|
|
.k-tag[data-feiertag="ja"] { background: color-mix(in srgb, #ff9aa2 9%, rgba(11, 15, 25, .74)); }
|
|
.k-tag[data-feiertag="ja"]:hover { background: color-mix(in srgb, #ff9aa2 14%, rgba(11, 15, 25, .74)); }
|
|
.k-tag[data-heute="ja"] {
|
|
background: color-mix(in srgb, var(--akzent) 13%, rgba(11, 15, 25, .74));
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 50%, transparent);
|
|
}
|
|
|
|
.k-tag__kopf { display: flex; align-items: baseline; gap: 6px; }
|
|
.k-tag__zahl {
|
|
font-size: .95rem; font-weight: 650; color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Am Monatsersten steht der Monatsname dabei -- sonst weiß man in der
|
|
letzten Rasterzeile nicht, ob die 1 schon zum nächsten Monat gehört.
|
|
|
|
Bewusst --text-leise statt --text-still: Wenn der Monatserste
|
|
zufällig HEUTE ist, liegt der Text auf der aufgehellten Heute-Zelle,
|
|
und dort kam der leiseste Grauton nur noch auf 3,96:1. Gemessen an
|
|
echten Bildpunkten, nicht an der Farbangabe -- die weiß nichts davon,
|
|
was hinter ihr liegt. Jetzt 5,9:1. */
|
|
.k-tag__monat { font-size: .7rem; color: var(--text-leise); }
|
|
/* 0,7 rem statt 0,62 (9,9 px). Gesperrt und in Grossbuchstaben liest
|
|
sich ohnehin schwerer als normaler Text -- da sind zehn Pixel die
|
|
Untergrenze, nicht der Richtwert. */
|
|
.k-tag__heute {
|
|
margin-left: auto;
|
|
font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--akzent);
|
|
}
|
|
|
|
/* ---------- Anlassmarke im Raster --------------------------------------- */
|
|
.k-anlass {
|
|
--afarbe: var(--akzent);
|
|
display: block;
|
|
padding: 2px 6px;
|
|
border-radius: 5px;
|
|
border-left: 2px solid var(--afarbe);
|
|
background: color-mix(in srgb, var(--afarbe) 13%, transparent);
|
|
color: color-mix(in srgb, var(--afarbe) 70%, #ffffff);
|
|
font-size: .68rem; line-height: 1.35;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
/* Feiertage sind lauter als Anlässe: Sie sind eine Tatsache, kein
|
|
Vorschlag. */
|
|
.k-anlass.feiertag {
|
|
background: color-mix(in srgb, var(--afarbe) 20%, transparent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ---------- Pille: ein Eintrag im Raster -------------------------------- */
|
|
.k-pille {
|
|
--pfarbe: var(--akzent);
|
|
display: block;
|
|
padding: 3px 7px;
|
|
border-radius: 5px;
|
|
border-left: 2px solid var(--pfarbe);
|
|
background: color-mix(in srgb, var(--pfarbe) 16%, transparent);
|
|
color: var(--text);
|
|
font-size: .72rem; line-height: 1.4;
|
|
text-decoration: none;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
transition: background .16s ease;
|
|
}
|
|
.k-pille:hover { background: color-mix(in srgb, var(--pfarbe) 26%, transparent); }
|
|
.k-pille__zeit {
|
|
color: var(--pfarbe); font-weight: 650; margin-right: 5px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Erledigt: durchgestrichen UND blasser. Nur blasser wäre im
|
|
Kontrastmodus nicht zu erkennen. */
|
|
.k-pille.erledigt { opacity: .5; text-decoration: line-through; }
|
|
|
|
/* =====================================================================
|
|
EIN TERMIN, DER MEHRERE TAGE LAEUFT (20.09.2026)
|
|
|
|
Filipe: „wenn ich termine eintrage mit von bis, will ich dass die
|
|
ganze zeit markiert ist und nicht nur der anfang."
|
|
|
|
Die Kachel steht jetzt in jeder Tageszelle dazwischen. Damit man
|
|
sieht, dass es EIN Termin ist und nicht vier gleichnamige, wird sie
|
|
an den Seiten angeschnitten, an denen es weitergeht:
|
|
|
|
Mo [ 20:00 Aktion ━
|
|
Di ━ Tag 2/4 ━
|
|
Mi ━ Tag 3/4 ━
|
|
Do ━ Tag 4/4 ]
|
|
|
|
DIE FORM MACHT DIE AUSSAGE, nicht die Farbe -- an einer eckigen
|
|
Kante sieht man „geht weiter" auch dann, wenn man Farben schlecht
|
|
unterscheidet oder der Kontrastmodus alles einfaerbt.
|
|
|
|
WARUM KEIN ECHTER BALKEN UEBER DIE ZELLEN: Ein Element, das sich
|
|
ueber mehrere Rasterzellen legt, muesste wissen, wo die Woche
|
|
umbricht, wie hoch die Zeile gerade ist und was darunter noch steht.
|
|
Das ist bei jeder Fensterbreite eine andere Rechnung -- und eine
|
|
Rechnung, die irgendwann danebenliegt, schiebt Kacheln uebereinander.
|
|
Die angeschnittene Kante kostet nichts und kann nicht verrutschen. */
|
|
|
|
/* Laeuft gestern schon: links glatt abgeschnitten, kein Randstrich. */
|
|
.k-pille[data-spanne="mitte"],
|
|
.k-pille[data-spanne="ende"] {
|
|
border-left: 0;
|
|
border-top-left-radius: 0; border-bottom-left-radius: 0;
|
|
/* Der Strich am linken Rand wird zum FORTSETZUNGSZEICHEN: ein
|
|
schmaler, waagerechter Balken in der Farbe, auf halber Hoehe. */
|
|
padding-left: 12px;
|
|
background-image: linear-gradient(90deg,
|
|
var(--pfarbe) 0 4px, transparent 4px);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 50%;
|
|
background-size: 100% 2px;
|
|
}
|
|
/* Geht morgen weiter: rechts glatt abgeschnitten. */
|
|
.k-pille[data-spanne="start"],
|
|
.k-pille[data-spanne="mitte"] {
|
|
border-top-right-radius: 0; border-bottom-right-radius: 0;
|
|
/* Eine Kante, die zeigt, dass hier nichts endet. */
|
|
box-shadow: inset -3px 0 0 -1px color-mix(in srgb, var(--pfarbe) 70%, transparent);
|
|
}
|
|
/* Der ganze Zeitraum liegt etwas satter als ein Punkttermin -- er
|
|
BELEGT die Tage, und das soll man beim Ueberfliegen sehen. */
|
|
.k-pille[data-spanne] {
|
|
background-color: color-mix(in srgb, var(--pfarbe) 22%, transparent);
|
|
}
|
|
.k-pille[data-spanne]:hover {
|
|
background-color: color-mix(in srgb, var(--pfarbe) 32%, transparent);
|
|
}
|
|
/* „Tag 2/4" ist eine Angabe zur Lage, keine Uhrzeit -- deshalb ruhiger
|
|
als die fette Startzeit daneben. */
|
|
.k-pille__lauf { font-weight: 550; opacity: .82; }
|
|
|
|
@media (forced-colors: active) {
|
|
/* Im Kontrastmodus verschwinden Farbflaechen und Schatten. Dann muss
|
|
die Kante als echter Rahmen dastehen, sonst sieht die Kachel am
|
|
Mittwoch genauso aus wie ein eigener Termin. */
|
|
.k-pille[data-spanne="start"],
|
|
.k-pille[data-spanne="mitte"] { border-right: 2px dashed CanvasText; }
|
|
.k-pille[data-spanne="mitte"],
|
|
.k-pille[data-spanne="ende"] { border-left: 2px dashed CanvasText; }
|
|
}
|
|
|
|
/* ---------- Wochenansicht ----------------------------------------------- */
|
|
.k-woche {
|
|
display: grid; gap: 1px;
|
|
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
background: var(--rand);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
overflow: hidden;
|
|
}
|
|
.k-wochentag {
|
|
min-height: 190px;
|
|
padding: 10px;
|
|
background: rgba(11, 15, 25, .74);
|
|
display: flex; flex-direction: column; gap: 5px;
|
|
cursor: pointer;
|
|
transition: background .16s ease;
|
|
}
|
|
.k-wochentag:hover { background: rgba(20, 27, 42, .85); }
|
|
.k-wochentag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
|
.k-wochentag[data-feiertag="ja"] { background: color-mix(in srgb, #ff9aa2 9%, rgba(11, 15, 25, .74)); }
|
|
.k-wochentag[data-heute="ja"] {
|
|
background: color-mix(in srgb, var(--akzent) 13%, rgba(11, 15, 25, .74));
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 50%, transparent);
|
|
}
|
|
.k-wochentag__kopf {
|
|
display: flex; align-items: baseline; gap: 7px;
|
|
padding-bottom: 7px; margin-bottom: 3px;
|
|
border-bottom: 1px solid var(--rand);
|
|
}
|
|
.k-wochentag__name {
|
|
font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.k-wochentag__zahl {
|
|
font-size: 1.25rem; font-weight: 700; color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-wochentag__leer { margin: auto 0; color: var(--text-still); font-size: .8rem; }
|
|
|
|
/* ---------- Listenansicht ----------------------------------------------- */
|
|
.k-liste { display: grid; gap: 12px; }
|
|
.k-listentag {
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
display: grid; gap: 7px;
|
|
}
|
|
.k-listentag[data-vergangen="ja"] { opacity: .62; }
|
|
.k-listentag[data-heute="ja"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 40%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 7%, var(--flaeche));
|
|
}
|
|
.k-listentag__kopf { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
|
|
.k-listentag__datum { font-weight: 650; color: var(--text); }
|
|
.k-listentag__kw {
|
|
font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still); font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-listentag__marke {
|
|
margin-left: auto; padding: 2px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--akzent) 34%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 13%, transparent);
|
|
color: var(--akzent);
|
|
font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
|
|
}
|
|
|
|
/* ---------- Eine ausführliche Zeile ------------------------------------- */
|
|
/* =====================================================================
|
|
EINE ZEILE IM TAGESFENSTER (07.09.2026 neu gebaut)
|
|
|
|
Filipe: "die sollen viel besser aussehen und viel geiler."
|
|
|
|
WAS WIRKLICH SCHIEFLIEF, war kein Geschmack, sondern der Aufbau: Zeit,
|
|
Titel, Art und FUENF Knoepfe standen in EINER Zeile. Der Titel bekam
|
|
damit den Rest, und "BigMatch vs. Beanii" brach auf drei Zeilen um --
|
|
waehrend rechts daneben Platz war. Die wichtigste Angabe der Zeile
|
|
war die gequetschteste.
|
|
|
|
Jetzt drei Ebenen, wie bei einer Karte:
|
|
|
|
OBEN Zeit und Titel, gross, ueber die ganze Breite. Der Titel
|
|
hat keinen Wettbewerb mehr.
|
|
MITTE die Nebendaten (Dauer, Ort, Beschreibung)
|
|
UNTEN die Knoepfe, rechtsbuendig in einer eigenen Reihe
|
|
|
|
Die Knoepfe sind damit auch nicht mehr gleich laut wie der Termin --
|
|
sie stehen darunter statt daneben. Und die Zeit steht gross am
|
|
Anfang: Sie ist das, wonach man in einem Tagesfenster sucht.
|
|
===================================================================== */
|
|
.k-zeile {
|
|
--zfarbe: var(--akzent);
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: baseline;
|
|
gap: 4px 14px;
|
|
padding: 13px 15px 12px 17px;
|
|
border-radius: 0;
|
|
border: 0;
|
|
/* Dieselbe abgeschnittene Ecke wie ueberall -- eine Zeile im
|
|
Tagesfenster ist ein kleines Modul, kein Listenpunkt. */
|
|
clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
|
|
background:
|
|
linear-gradient(90deg,
|
|
color-mix(in srgb, var(--zfarbe) 13%, transparent) 0%,
|
|
transparent 46%),
|
|
linear-gradient(180deg, #121a28, #0b111b);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .06),
|
|
0 2px 6px -3px rgba(0, 0, 0, .8);
|
|
transition: background var(--tempo);
|
|
}
|
|
.k-zeile:hover {
|
|
background:
|
|
linear-gradient(90deg,
|
|
color-mix(in srgb, var(--zfarbe) 20%, transparent) 0%,
|
|
transparent 50%),
|
|
linear-gradient(180deg, #16202f, #0d131f);
|
|
}
|
|
/* Die Farbschiene folgt der Silhouette -- sie beginnt unter der Fase,
|
|
sonst schnitte die Ecke sie ab und es bliebe ein Stummel. */
|
|
.k-zeile::before {
|
|
content: ""; position: absolute; left: 0; top: 12px; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg,
|
|
var(--zfarbe),
|
|
color-mix(in srgb, var(--zfarbe) 35%, transparent));
|
|
}
|
|
.k-zeile[data-erledigt="ja"] { opacity: .55; }
|
|
.k-zeile[data-erledigt="ja"] .k-zeile__titel { text-decoration: line-through; }
|
|
|
|
/* DIE ZEIT IST DIE FRAGE, DIE MAN AN EIN TAGESFENSTER HAT. Deshalb
|
|
gross, in der Farbe der Art, mit gleichen Zifferbreiten -- so stehen
|
|
mehrere Zeilen untereinander sauber in einer Flucht. */
|
|
.k-zeile__zeit {
|
|
grid-column: 1;
|
|
font-size: 1.06rem; font-weight: 700; color: var(--zfarbe);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: -.01em;
|
|
white-space: nowrap;
|
|
}
|
|
.k-zeile__titel {
|
|
grid-column: 2;
|
|
color: var(--text);
|
|
font-size: 1.02rem; font-weight: 650;
|
|
min-width: 0;
|
|
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
|
}
|
|
|
|
/* Die Nebendaten stehen unter dem Titel, nicht daneben -- eingerueckt
|
|
auf die Titelspalte, damit eine Kante entsteht. */
|
|
.k-zeile__zusatz {
|
|
grid-column: 2;
|
|
display: flex; flex-wrap: wrap; gap: 3px 12px;
|
|
margin-top: 2px;
|
|
font-size: .82rem; color: var(--text-leise);
|
|
}
|
|
.k-zeile__zusatz a { color: var(--akzent); }
|
|
|
|
/* DIE KNOEPFE IN EIGENER REIHE, rechtsbuendig. Sie sind das Werkzeug,
|
|
nicht der Inhalt: Sie duerfen bereitstehen, aber nicht mit dem
|
|
Termin um Platz streiten. */
|
|
.k-zeile__knoepfe {
|
|
grid-column: 1 / -1;
|
|
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
margin-top: 9px;
|
|
padding-top: 9px;
|
|
border-top: 1px solid rgba(150, 186, 220, .1);
|
|
}
|
|
/* Die Art wandert in den Titel: Sie gehoert zum Termin, nicht zum
|
|
Werkzeug. */
|
|
.k-zeile__art {
|
|
padding: 2px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--zfarbe) 34%, transparent);
|
|
background: color-mix(in srgb, var(--zfarbe) 12%, transparent);
|
|
color: var(--zfarbe);
|
|
font-size: .66rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
/* Auf dem Handy untereinander: Eine Zeit von 1,06 rem neben einem
|
|
Titel laesst dort keine zwei Woerter uebrig. */
|
|
.k-zeile { grid-template-columns: 1fr; }
|
|
.k-zeile__zeit, .k-zeile__titel, .k-zeile__zusatz { grid-column: 1; }
|
|
.k-zeile__knoepfe { justify-content: flex-start; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { .k-zeile { transition: none; } }
|
|
|
|
/* ---------- Zeitstrahl ---------------------------------------------------
|
|
Sechs Wochen auf einer Achse. Die Höhe eines Strichs ist die Menge
|
|
des Tages -- man sieht Ballungen und Lücken, ohne zu zählen. */
|
|
.k-strahl-rahmen {
|
|
padding: 20px 18px 14px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
.k-strahl {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: minmax(0, 1fr);
|
|
align-items: end;
|
|
gap: 2px;
|
|
height: 150px;
|
|
}
|
|
.k-strahl__tag {
|
|
--menge: 0;
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
|
|
gap: 3px;
|
|
padding-bottom: 16px;
|
|
border-radius: 4px 4px 0 0;
|
|
cursor: pointer;
|
|
transition: background .16s ease;
|
|
}
|
|
.k-strahl__tag:hover { background: rgba(255, 255, 255, .05); }
|
|
.k-strahl__tag:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
|
|
.k-strahl__tag[data-wochenende="ja"] { background: var(--flaeche); }
|
|
.k-strahl__tag[data-feiertag="ja"] { background: color-mix(in srgb, #ff9aa2 10%, transparent); }
|
|
.k-strahl__tag[data-heute="ja"] { background: color-mix(in srgb, var(--akzent) 15%, transparent); }
|
|
.k-strahl__saeule {
|
|
--sfarbe: var(--akzent);
|
|
width: 100%;
|
|
/* Ein leerer Tag bekommt einen Sockel von 3 px statt gar nichts --
|
|
sonst sähe die Achse an ruhigen Stellen kaputt aus. */
|
|
height: calc(3px + var(--menge) * 20px);
|
|
border-radius: 3px 3px 0 0;
|
|
background: linear-gradient(180deg, var(--sfarbe),
|
|
color-mix(in srgb, var(--sfarbe) 30%, transparent));
|
|
opacity: .92;
|
|
}
|
|
.k-strahl__tag[style*="--menge: 0"] .k-strahl__saeule { opacity: .3; }
|
|
.k-strahl__sym { position: absolute; top: 2px; font-size: .8rem; }
|
|
.k-strahl__kw {
|
|
position: absolute; bottom: 0;
|
|
/* .75rem statt .62rem (9,92 px): Platz ist da -- die Spalte ist bei
|
|
390 px rund 52 px breit. */
|
|
font-size: .75rem; color: var(--text-leise);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-strahl__fuss {
|
|
margin: 14px 0 0;
|
|
font-size: .76rem; color: var(--text-still);
|
|
}
|
|
|
|
/* ---------- Leerer Zeitraum --------------------------------------------- */
|
|
.k-leer {
|
|
padding: 26px 22px;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
text-align: center;
|
|
}
|
|
.k-leer__satz { margin: 0 0 6px; color: var(--text-leise); }
|
|
.k-leer__tipp { margin: 0; font-size: .82rem; color: var(--text-still); }
|
|
|
|
/* ---------- Tagesdialog -------------------------------------------------- */
|
|
/* =====================================================================
|
|
DER TAGDIALOG BEKOMMT DIE SILHOUETTE DES HAUSES (screen2, 09.09.2026)
|
|
|
|
Filipe: "die ganze kachel und button sollen geiler aussehen."
|
|
|
|
Der Inhalt war schon gebaut -- Eintraege mit Schiene in ihrer Farbe,
|
|
Plaketten (TERMIN, FRIST), Knopfreihe. Nur die Huelle nicht: Sie war
|
|
ein Rechteck mit 18 px Rundung und einem gezeichneten Rand. Damit
|
|
war der Dialog die EINZIGE grosse Flaeche im Workspace ohne Fase --
|
|
und ausgerechnet die, die sich ueber alles andere legt. Man sieht es
|
|
nicht als Fehler, sondern denkt "der gehoert wohl zum Browser".
|
|
|
|
Jetzt dieselbe Sprache wie die Sammelkacheln: eine Fassung als
|
|
duenner Rahmen (2 px Polsterung mit Farbverlauf darunter), die Fase
|
|
an zwei gegenueberliegenden Ecken, und das Innenglas als eigene
|
|
Ebene. Die Fassung traegt Rot links und Babyblau rechts, wie ueberall
|
|
im Haus -- nur leiser als auf der Anmeldeseite, weil hier Text
|
|
dicht am Rand steht.
|
|
|
|
ZWEI ECKEN, NICHT VIER: Bei einem Kasten, der mitten im Bild
|
|
aufgeht, wirken vier abgeschnittene Ecken unruhig -- er soll wie
|
|
eine Platte wirken, die man auflegt, nicht wie ein Achteck. Oben
|
|
links und unten rechts geben die Richtung, die anderen beiden halten
|
|
die Form.
|
|
|
|
`border-radius: 0` ist PFLICHT und nicht Kosmetik: Ein
|
|
`border-radius`, der neben einem `clip-path` stehen bleibt, rundet
|
|
die Ecken der Flaeche INNERHALB der Silhouette -- man saehe an den
|
|
nicht gefasten Ecken eine doppelte Kante. */
|
|
.k-dialog {
|
|
width: min(560px, calc(100vw - 32px));
|
|
padding: 2px; /* die Fassung */
|
|
border: 0;
|
|
border-radius: 0;
|
|
clip-path: polygon(
|
|
20px 0, 100% 0, 100% calc(100% - 20px),
|
|
calc(100% - 20px) 100%, 0 100%, 0 20px);
|
|
background: linear-gradient(104deg,
|
|
#2a0a10 0%, #c8323f 12%, #ffd9dd 20%, #6d1721 32%,
|
|
#0a0c12 44%, #e8f1fb 50%, #0a0c12 56%,
|
|
#1d4a63 66%, #8fd8ff 78%, #dff2ff 85%, #14293a 94%, #060810 100%);
|
|
color: var(--text);
|
|
box-shadow: var(--schatten);
|
|
}
|
|
/* Das Innenglas. Eigene Ebene, damit die Fassung ringsum stehen
|
|
bleibt -- dieselbe Bauart wie bei der Zentrale und der Rollenkachel. */
|
|
.k-dialog__glas {
|
|
padding: 20px 22px;
|
|
clip-path: polygon(
|
|
18px 0, 100% 0, 100% calc(100% - 18px),
|
|
calc(100% - 18px) 100%, 0 100%, 0 18px);
|
|
background:
|
|
var(--raster),
|
|
linear-gradient(178deg, rgba(17, 23, 34, .97), rgba(9, 13, 21, .98));
|
|
/* KEIN `backdrop-filter` HIER. Er stand vorher auf dem Dialog und
|
|
ist mitgewandert -- auf einer zu 97 Prozent deckenden Flaeche
|
|
rechnet er bei jedem Bild einen Weichzeichner aus, den niemand
|
|
sieht. Das Verwischen des Hintergrunds macht `.k-dialog::backdrop`,
|
|
und dort gehoert es hin. Ein Effekt, der nichts bewirkt, ist
|
|
nicht harmlos: Er kostet Rechenzeit und behauptet im Quelltext
|
|
etwas ueber das Aussehen, das nicht stimmt. */
|
|
}
|
|
.k-dialog::backdrop { background: rgba(3, 5, 10, .72); backdrop-filter: blur(3px); }
|
|
.k-dialog__kopf {
|
|
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.k-dialog__titel { display: block; font-size: 1.1rem; color: #eaf2fb; }
|
|
.k-dialog__unter {
|
|
display: block; margin-top: 3px;
|
|
font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.k-dialog__anlaesse { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
|
|
.k-dialog__anlaesse:empty { display: none; }
|
|
.k-dialog__anlaesse .k-anlass { font-size: .76rem; padding: 4px 9px; }
|
|
.k-dialog__liste { display: grid; gap: 8px; margin-bottom: 16px; }
|
|
.k-dialog__fuss {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
padding-top: 14px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.k-dialog__tipp { font-size: .74rem; color: var(--text-still); }
|
|
|
|
/* ---------- Kleinere Bildschirme ----------------------------------------
|
|
Das Monatsraster ist auf einem Handy nicht sinnvoll zu quetschen: Bei
|
|
390 px wären die Zellen 46 px breit, und in einer 46-px-Zelle steht
|
|
kein Termin. Statt zu schrumpfen wird deshalb umgebaut -- die
|
|
KW-Spalte fällt weg, die Zellen werden flacher, und die Pillen zeigen
|
|
nur noch die Uhrzeit als Punkt. */
|
|
@media (max-width: 860px) {
|
|
.k-raster { grid-template-columns: 32px repeat(7, minmax(0, 1fr)); }
|
|
.k-tag { min-height: 76px; padding: 6px 5px 7px; }
|
|
.k-tag__monat, .k-tag__heute { display: none; }
|
|
/* .75rem statt .6rem (19.09.2026). Hier standen 9,6 px -- genau der
|
|
Wert, den start.css als BEHOBENEN Fehler protokolliert. Der Haken:
|
|
kalender.css wird NACH start.css geladen, beide Selektoren sind
|
|
gleich stark, also gewann diese Zeile auf jeder Breite unter
|
|
760 px. Die Reparatur war seit dem Tag wirkungslos, ohne dass es
|
|
jemand sehen konnte. Die Uhrzeit ist die einzige Auskunft in der
|
|
Zelle. */
|
|
.k-anlass, .k-pille {
|
|
font-size: .75rem; padding: 3px 6px;
|
|
border-left-width: 2px;
|
|
}
|
|
.k-pille__zeit { margin-right: 3px; }
|
|
/* .75rem statt .66rem: 10,56 px, zusaetzlich gesperrt -- und von
|
|
keiner Hebungsliste erfasst. Die Wochentagskoepfe sind das, woran
|
|
man sich im Monatsraster orientiert. */
|
|
.k-spaltenkopf { padding: 8px 4px; font-size: .75rem; letter-spacing: .04em; }
|
|
.k-kw { font-size: .75rem; padding: 7px 2px; }
|
|
.k-woche { grid-template-columns: 1fr; }
|
|
.k-wochentag { min-height: 0; }
|
|
.k-strahl { height: 110px; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.k-kopf { align-items: flex-start; }
|
|
.k-nav { width: 100%; }
|
|
.k-zeile { grid-template-columns: auto 1fr; }
|
|
.k-zeile__knoepfe { grid-column: 1 / -1; }
|
|
.k-anlassreihe { grid-template-columns: 1fr; }
|
|
.k-wdh { grid-template-columns: 1fr; }
|
|
.k-serienliste { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ===================================================================
|
|
WIEDERHOLUNGEN (02.09.2026)
|
|
|
|
Termine, die von allein weiterlaufen. Zwei Stellen:
|
|
* die Ende-Zeile im Formular samt Vorschausatz
|
|
* die Liste "Läuft von allein" über dem Kalender
|
|
|
|
Gedeckt gehalten wie alles andere hier. Eine Automatik darf nicht
|
|
lauter sein als das, was ein Mensch eingetragen hat -- sie soll
|
|
auffindbar sein, nicht auffällig.
|
|
=================================================================== */
|
|
|
|
.k-wdh {
|
|
display: grid;
|
|
grid-template-columns: minmax(180px, 260px) 1fr;
|
|
align-items: end;
|
|
gap: 10px 18px;
|
|
}
|
|
.k-wdh__satz {
|
|
margin: 0 0 4px;
|
|
font-size: .84rem; line-height: 1.5;
|
|
color: var(--text-leise);
|
|
}
|
|
.k-wdh__satz:not(:empty)::before {
|
|
content: "↻";
|
|
margin-right: 7px;
|
|
color: var(--akzent);
|
|
}
|
|
|
|
/* Das Zeichen an einem einzelnen Termin. Klein, gedeckt, ohne eigenen
|
|
Platzanspruch -- der Titel bleibt die Hauptsache. */
|
|
.k-wdh-zeichen {
|
|
margin-left: 5px;
|
|
font-size: .78em;
|
|
opacity: .65;
|
|
vertical-align: baseline;
|
|
}
|
|
/* In der Pille steht es VOR dem Titel (sonst schneidet die schmale
|
|
Monatszelle es ab) -- dort gehört der Abstand entsprechend nach
|
|
rechts. Die Pille kürzt mit text-overflow, nicht als Flexbox: Was
|
|
links steht, bleibt sichtbar. */
|
|
.k-pille .k-wdh-zeichen { margin: 0 4px 0 0; }
|
|
|
|
.k-serienliste {
|
|
display: grid; gap: 9px;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.k-serie {
|
|
--sfarbe: var(--akzent);
|
|
position: relative; overflow: hidden;
|
|
padding: 13px 15px 12px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
/* Der Farbstreifen links ist derselbe Gedanke wie in der Liste: Die
|
|
Farbe gehört zur Art des Termins, nicht zum Rang der Serie. */
|
|
.k-serie::before {
|
|
content: "";
|
|
position: absolute; inset: 0 auto 0 0; width: 3px;
|
|
background: var(--sfarbe);
|
|
opacity: .75;
|
|
}
|
|
/* Pausiert: blasser UND gestrichelt. Nur blasser wäre im Kontrastmodus
|
|
nicht von "läuft" zu unterscheiden. */
|
|
.k-serie[data-aktiv="nein"] { opacity: .72; border-style: dashed; }
|
|
.k-serie[data-aktiv="nein"]::before { opacity: .35; }
|
|
|
|
.k-serie__kopf {
|
|
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.k-serie__titel { font-weight: 600; color: var(--text); }
|
|
.k-serie__art {
|
|
padding: 2px 9px; border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--sfarbe) 32%, transparent);
|
|
color: var(--sfarbe);
|
|
/* .78rem = 12,48 px. Auf dem Handy sind 11,5 px die Untergrenze
|
|
(pruef-grosscheck.mjs); .68rem wären 10,88 px. Aufgefallen ist es
|
|
an derselben Stelle im Call-Raum -- hier wäre es erst aufgefallen,
|
|
sobald jemand eine Wiederholung anlegt. */
|
|
font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
|
|
}
|
|
.k-serie__zustand {
|
|
margin-left: auto;
|
|
font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.k-serie[data-aktiv="ja"] .k-serie__zustand { color: #6fbf7a; }
|
|
|
|
.k-serie__satz {
|
|
margin: 0;
|
|
font-size: .86rem; line-height: 1.5;
|
|
color: var(--text-leise);
|
|
}
|
|
.k-serie__naechster {
|
|
margin: 4px 0 0;
|
|
font-size: .78rem; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-serie__knoepfe {
|
|
display: flex; flex-wrap: wrap; gap: 7px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.k-anlasskarte, .k-tag, .k-wochentag, .k-pille, .k-chip,
|
|
.k-ansicht, .k-strahl__tag { transition: none; }
|
|
.k-anlasskarte:hover { transform: none; }
|
|
}
|
|
|
|
/* Ohne Farbverläufe (Kontrastmodus, Druck) müssen Kante und Schrift
|
|
allein tragen -- deshalb bleiben die Ränder erhalten. */
|
|
@media (forced-colors: active) {
|
|
.k-zeile::before, .k-anlasskarte::before { background: CanvasText; }
|
|
.k-pille, .k-anlass { border: 1px solid CanvasText; }
|
|
.k-strahl__saeule { background: CanvasText; }
|
|
.k-serie::before { background: CanvasText; }
|
|
.k-serie { border: 1px solid CanvasText; }
|
|
/* Deckkraft trägt im Kontrastmodus nicht -- der gestrichelte Rand
|
|
bleibt das Unterscheidungsmerkmal einer pausierten Serie. */
|
|
.k-serie[data-aktiv="nein"] { opacity: 1; border-style: dashed; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
WER IST NOCH DABEI — die Teilnehmerwahl
|
|
=====================================================================
|
|
|
|
Vorgeschichte (05.09.2026, Filipe mit Bildschirmfoto): *"das soll
|
|
viel besser aussehen bitte und dass soll für jeden verfügbar sein."*
|
|
|
|
Auf dem Bild klebten die Namen aneinander -- "DogfatherDogFather",
|
|
"CigdemManager", "BananaStiftScout". Zwei Fehler auf einmal:
|
|
|
|
1. DAS CSS WAR GAR NICHT DA. Die Wahl benutzte `.wahl__knopf` aus
|
|
dateien.css -- und kalender.html bindet dateien.css nicht ein.
|
|
Ohne `display:inline-flex` und `gap` stehen zwei <span> eben
|
|
direkt nebeneinander. Vierzig grüne Prüfungen zur Teilnehmerwahl
|
|
hatten das nicht gemerkt: Keine davon hat je gemessen, ob es auch
|
|
AUSSIEHT wie gedacht. Deshalb gibt es jetzt eigene Klassen im
|
|
eigenen Stylesheet -- eine Seite, die ihr CSS selbst mitbringt,
|
|
kann es nicht verlieren.
|
|
|
|
2. DIE ROLLE STAND AN JEDEM NAMEN. Auch mit Abstand bliebe es eine
|
|
lange graue Wurst, in der man niemanden findet. Jetzt tragen die
|
|
GRUPPEN die Rolle ("Manager", "Scouts"), die Namen darunter nur
|
|
noch den Namen. Das Wort steht einmal statt neunmal, und man
|
|
sucht nicht mehr, sondern springt zur richtigen Gruppe.
|
|
|
|
AUGENSCHONEND (Projektregel): gedeckte Rollentöne, kein Neon, keine
|
|
harten Weißflächen. Ausgewählt wird über Rand, Häkchen UND Schrift
|
|
erkennbar -- nicht über Farbe allein, sonst ist es für
|
|
Farbfehlsichtige nicht zu unterscheiden. */
|
|
|
|
.k-dabei { margin-top: 6px; }
|
|
|
|
.k-dabei__gruppe + .k-dabei__gruppe { margin-top: 12px; }
|
|
|
|
.k-dabei__titel {
|
|
margin: 0 0 6px;
|
|
font-size: .68rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
display: flex; align-items: center; gap: 7px;
|
|
}
|
|
/* Der Punkt trägt die Rollenfarbe -- ein ruhiger Anker fürs Auge,
|
|
ohne die ganze Überschrift einzufärben. */
|
|
.k-dabei__punkt {
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
background: var(--r, var(--text-still)); flex: none;
|
|
}
|
|
|
|
.k-dabei__liste { display: flex; flex-wrap: wrap; gap: 7px; }
|
|
|
|
.k-dabei__knopf {
|
|
--r: rgba(255, 255, 255, .5);
|
|
display: inline-flex; align-items: center; gap: 9px;
|
|
/* 40px Mindesthöhe: am Handy mit dem Daumen sicher zu treffen. */
|
|
min-height: 40px;
|
|
padding: 5px 14px 5px 6px;
|
|
cursor: pointer; font: inherit;
|
|
color: var(--text-leise);
|
|
background: rgba(255, 255, 255, .035);
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
|
}
|
|
.k-dabei__knopf:hover {
|
|
color: var(--text);
|
|
border-color: rgba(255, 255, 255, .24);
|
|
background: rgba(255, 255, 255, .06);
|
|
}
|
|
.k-dabei__knopf:focus-visible {
|
|
outline: 2px solid var(--r); outline-offset: 2px;
|
|
}
|
|
|
|
/* Die Initiale. Ersetzt ein Bild, das es hier nicht gibt, und macht
|
|
aus einer Textzeile ein Gesicht, das man wiedererkennt. */
|
|
.k-dabei__zeichen {
|
|
flex: none;
|
|
width: 28px; height: 28px; border-radius: 50%;
|
|
display: grid; place-items: center;
|
|
font-size: .76rem; font-weight: 700; line-height: 1;
|
|
color: var(--r);
|
|
background: color-mix(in srgb, var(--r) 14%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--r) 34%, transparent);
|
|
}
|
|
.k-dabei__name { font-size: .86rem; font-weight: 550; }
|
|
|
|
/* Das Häkchen steht NEBEN der Farbe, nicht statt ihr. Wer Farben
|
|
schlecht unterscheidet, sieht trotzdem sofort, wer dabei ist. */
|
|
.k-dabei__haken {
|
|
flex: none; width: 14px; height: 14px;
|
|
opacity: 0; transform: scale(.7);
|
|
transition: opacity .16s ease, transform .16s ease;
|
|
}
|
|
.k-dabei__haken path { stroke: var(--r); stroke-width: 2.4; fill: none;
|
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
|
|
.k-dabei__knopf[data-an="ja"] {
|
|
color: var(--text); font-weight: 600;
|
|
border-color: color-mix(in srgb, var(--r) 55%, transparent);
|
|
background: color-mix(in srgb, var(--r) 13%, transparent);
|
|
}
|
|
.k-dabei__knopf[data-an="ja"] .k-dabei__zeichen {
|
|
color: #12151b;
|
|
background: var(--r);
|
|
border-color: var(--r);
|
|
}
|
|
.k-dabei__knopf[data-an="ja"] .k-dabei__haken { opacity: 1; transform: none; }
|
|
|
|
/* Rollentöne. Dieselben wie in personen.css -- eine Farbe pro Rolle im
|
|
ganzen Workspace, sonst muss man sie auf jeder Seite neu lernen. */
|
|
.k-dabei__gruppe[data-rolle="admin"],
|
|
.k-dabei__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
|
.k-dabei__gruppe[data-rolle="manager"],
|
|
.k-dabei__knopf[data-rolle="manager"] { --r: var(--manager-haupt); }
|
|
.k-dabei__gruppe[data-rolle="scout"],
|
|
.k-dabei__knopf[data-rolle="scout"] { --r: var(--scout-haupt); }
|
|
.k-dabei__gruppe[data-rolle="creator"],
|
|
.k-dabei__knopf[data-rolle="creator"] { --r: var(--creator-haupt); }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.k-dabei__knopf, .k-dabei__haken { transition: none; }
|
|
}
|
|
|
|
/* Ohne Farbverläufe trägt die Kante allein -- und das Häkchen, das
|
|
hier zum eigentlichen Merkmal wird. */
|
|
@media (forced-colors: active) {
|
|
.k-dabei__knopf { border: 1px solid CanvasText; }
|
|
.k-dabei__knopf[data-an="ja"] { border-width: 2px; }
|
|
.k-dabei__zeichen { border: 1px solid CanvasText; }
|
|
.k-dabei__haken path { stroke: CanvasText; }
|
|
}
|
|
|
|
/* ---------- Kalender abonnieren (06.09.2026) -----------------------------
|
|
|
|
Zugeklappt und unauffaellig: Man richtet die Sache EINMAL ein und
|
|
sieht sie danach nie wieder an. Ein dauerhaft offener Kasten draengte
|
|
sich vor die Termine, um die es hier geht. */
|
|
.k-abo {
|
|
margin: 0 0 22px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
overflow: hidden;
|
|
}
|
|
.k-abo__kopf {
|
|
display: grid; gap: 2px;
|
|
padding: 13px 16px; cursor: pointer;
|
|
list-style: none;
|
|
transition: background var(--tempo);
|
|
}
|
|
.k-abo__kopf::-webkit-details-marker { display: none; }
|
|
.k-abo__kopf:hover, .k-abo__kopf:focus-visible { background: rgba(150, 186, 220, .05); }
|
|
.k-abo__titel { font-size: .95rem; color: var(--text); }
|
|
.k-abo__unter { font-size: .8rem; color: var(--text-still); }
|
|
|
|
/* Ein Pfeil, der sich dreht -- das einzige Zeichen, das sagt "hier ist
|
|
mehr". Ohne ihn sieht die Zeile aus wie eine Ueberschrift. */
|
|
.k-abo__kopf::after {
|
|
content: ''; position: absolute; right: 18px; margin-top: 6px;
|
|
width: 8px; height: 8px;
|
|
border-right: 2px solid var(--text-still);
|
|
border-bottom: 2px solid var(--text-still);
|
|
transform: rotate(45deg);
|
|
transition: transform var(--tempo);
|
|
}
|
|
.k-abo { position: relative; }
|
|
.k-abo[open] .k-abo__kopf::after { transform: rotate(-135deg); }
|
|
|
|
/* ZUGEKLAPPT HEISST WEG -- ausdruecklich, nicht nur laut Browser.
|
|
|
|
Dasselbe wie bei den Zeitbloecken in calls.css, und aus demselben
|
|
Grund: Chromium versteckt den Inhalt eines geschlossenen <details>
|
|
ueber `content-visibility`, nicht ueber `display`. Die Kaesten
|
|
behalten dabei eine Groesse -- gemessen von pruef-breiten: Der Knopf
|
|
"Link erzeugen" lag bei 768 px unter einem Filter-Chip, obwohl der
|
|
Kasten zugeklappt war. Fuer das Auge unsichtbar, fuer jede Messung
|
|
(und fuer die Suchfunktion des Browsers) vorhanden. */
|
|
.k-abo:not([open]) .k-abo__inhalt { display: none; }
|
|
|
|
.k-abo__inhalt {
|
|
padding: 0 16px 16px;
|
|
border-top: 1px solid var(--rand);
|
|
padding-top: 14px;
|
|
}
|
|
.k-abo__satz {
|
|
margin: 0 0 14px; font-size: .85rem; line-height: 1.65; color: var(--text-leise);
|
|
}
|
|
|
|
.k-abo__zeile { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
|
|
.k-abo__feld {
|
|
flex: 1 1 320px; min-width: 0; height: 42px;
|
|
padding: 0 12px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: .8rem; color: var(--text-leise);
|
|
background: rgba(0, 0, 0, .25);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
}
|
|
|
|
.k-abo__stand {
|
|
margin: 0 0 14px; font-size: .8rem; color: var(--text-still);
|
|
}
|
|
/* Solange noch nie abgeholt wurde, ist das eine offene Frage -- kein
|
|
Fehler, aber auch keine Bestaetigung. */
|
|
.k-abo__stand[data-warten="ja"] { color: #d9a441; }
|
|
|
|
.k-abo__knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
|
|
|
|
.k-abo__hilfe {
|
|
margin: 16px 0 0; padding-top: 14px;
|
|
border-top: 1px solid var(--rand);
|
|
display: grid; gap: 8px;
|
|
font-size: .82rem; line-height: 1.6; color: var(--text-leise);
|
|
}
|
|
.k-abo__weg { display: block; }
|
|
|
|
@media (max-width: 640px) {
|
|
.k-abo__feld { flex: 1 1 100%; }
|
|
.k-abo__knoepfe > * { flex: 1 1 auto; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.k-abo__kopf, .k-abo__kopf::after { transition: none; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
DER WECKER (07.09.2026)
|
|
|
|
Filipe: "wie so ein wecker, den man in den eintraegen aktivieren oder
|
|
ausschalten kann ... auch mehrmals informiert."
|
|
|
|
DER KNOPF ZEIGT SEINEN ZUSTAND, ohne dass man ihn anfassen muss:
|
|
grau und leer heisst "keine Erinnerung", golden mit einer Zahl heisst
|
|
"so viele". Das beantwortet die haeufigste Frage von aussen. Gold
|
|
und nicht Rot: Ein Wecker ist kein Alarm, sondern ein Dienst.
|
|
===================================================================== */
|
|
.wecker-knopf {
|
|
--w-ton: #e3b341;
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
/* 38px statt 30px (19.09.2026): 30 px waren 14 px unter der
|
|
Hausvorgabe und 8 px unter dem kleinsten Zugestaendnis, das
|
|
sonst ueberall gilt. In der Terminzeile stand er damit neben
|
|
Knoepfen von 38 und 44 px -- drei Hoehen in einer Reihe. */
|
|
min-height: 38px; padding: 5px 9px 5px 7px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
background: transparent; color: var(--text-still);
|
|
font: inherit; font-size: .78rem; cursor: pointer;
|
|
transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
|
|
}
|
|
.wecker-knopf:hover { color: var(--text); border-color: var(--rand-hell); }
|
|
.wecker-knopf__svg {
|
|
width: 16px; height: 16px; flex: none;
|
|
fill: none; stroke: currentColor; stroke-width: 1.6;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.wecker-knopf__svg .fuell { stroke: none; fill: transparent; }
|
|
.wecker-knopf__zahl { font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
|
|
/* Gesetzt: der Wecker bekommt Farbe und Fuellung -- dieselbe Sprache
|
|
wie die Rollensymbole, wo die Flaeche den Zustand traegt. */
|
|
.wecker-knopf[data-an="ja"] {
|
|
color: var(--w-ton);
|
|
border-color: color-mix(in srgb, var(--w-ton) 45%, transparent);
|
|
background: color-mix(in srgb, var(--w-ton) 12%, transparent);
|
|
}
|
|
.wecker-knopf[data-an="ja"] .wecker-knopf__svg .fuell {
|
|
fill: color-mix(in srgb, var(--w-ton) 42%, transparent);
|
|
}
|
|
|
|
.wecker-dialog { max-width: 420px; }
|
|
.wecker-hinweis { margin: 0 0 12px; }
|
|
.wecker-liste { display: grid; gap: 2px; }
|
|
.wecker-zeile {
|
|
display: flex; align-items: center; gap: 11px;
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: background var(--tempo);
|
|
}
|
|
.wecker-zeile:hover { background: rgba(255, 255, 255, .05); }
|
|
/* Das Kaestchen gross genug fuer den Daumen -- eine Auswahl, die man
|
|
dreimal antippen muss, ist keine. */
|
|
.wecker-zeile input { width: 20px; height: 20px; flex: none; accent-color: #e3b341; }
|
|
.wecker-zeile__text { font-size: .92rem; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wecker-knopf, .wecker-zeile { transition: none; }
|
|
}
|
|
@media (forced-colors: active) {
|
|
.wecker-knopf[data-an="ja"] { border: 2px solid CanvasText; }
|
|
}
|
|
|
|
/* ===================================================================
|
|
DIE LINIEN IM KALENDER WERDEN DUNKEL (08.09.2026)
|
|
|
|
Filipe, screen18: "ich will dass der kalender so bleibt, nur die
|
|
linien zwischen den kacheln und der rand die so kras durchsichtig
|
|
sind, ich will dass dass die viel dunkler sind und die kacheln vom
|
|
kalender selber sollen viel krasser und geiler aussehen bitte."
|
|
|
|
WOHER DIE LINIEN KOMMEN: Sie sind gar nicht gezeichnet. Das Raster
|
|
hat `gap: 1px` und darunter eine Flaeche -- in den Luecken zwischen
|
|
den Tagen scheint diese Flaeche durch, und DAS sind die Linien. Sie
|
|
trugen `var(--rand)`, einen hellen, halbdurchsichtigen Ton, der fuer
|
|
Raender AUF dunklem Grund gedacht ist. Zwischen zwei ohnehin dunklen
|
|
Kacheln wirkt derselbe Ton wie ein heller Schleier.
|
|
|
|
Jetzt ein eigener, tiefer Ton: Die Fuge ist dunkler als die Kacheln
|
|
daneben, nicht heller. So sieht es aus wie eingefraest statt wie
|
|
aufgemalt -- dieselbe Ueberlegung wie bei den Fasen der Kacheln auf
|
|
der Startseite.
|
|
|
|
Der aeussere Rand bekommt zusaetzlich eine feine helle Innenkante.
|
|
Ohne sie verschwaende der Kalender am Rand ins Nichts; mit ihr steht
|
|
er als Platte auf der Seite. */
|
|
.k-raster {
|
|
gap: 1px;
|
|
background: #05070c;
|
|
border: 1px solid rgba(4, 6, 11, .9);
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(150, 186, 220, .09), /* die feine Innenkante */
|
|
0 18px 44px -28px rgba(0, 0, 0, .9);
|
|
}
|
|
|
|
/* ---- Und die Tage selbst bekommen Tiefe --------------------------
|
|
|
|
Vorher eine flache Flaeche in einem Ton. Jetzt ein sehr leichter
|
|
Verlauf von oben nach unten und ein Lichtsaum an der Oberkante --
|
|
dasselbe Mittel wie bei den Kacheln der Startseite: Licht kommt von
|
|
oben, also ist die Oberkante hell und die Flaeche darunter faellt ab.
|
|
|
|
Bewusst schwach gehalten (der Verlauf umfasst rund vier Prozent
|
|
Helligkeit): Ein Monatsraster hat 35 bis 42 dieser Felder
|
|
nebeneinander. Was bei einer einzelnen Kachel wirkt, wird hier
|
|
vierzigfach zu Unruhe. */
|
|
.k-tag {
|
|
background:
|
|
linear-gradient(180deg, rgba(24, 32, 48, .78), rgba(10, 14, 23, .78));
|
|
box-shadow: inset 0 1px 0 rgba(160, 195, 230, .07);
|
|
}
|
|
.k-tag:hover {
|
|
background:
|
|
linear-gradient(180deg, rgba(34, 45, 66, .9), rgba(17, 23, 37, .9));
|
|
box-shadow: inset 0 1px 0 rgba(160, 195, 230, .13);
|
|
}
|
|
/* Wochenende und fremde Monate bleiben ruhiger -- sie sollen sich vom
|
|
Arbeitstag abheben, und das tun sie ueber weniger Licht, nicht ueber
|
|
eine andere Farbe. */
|
|
.k-tag[data-wochenende="ja"] {
|
|
background: linear-gradient(180deg, rgba(16, 21, 33, .82), rgba(8, 11, 18, .82));
|
|
}
|
|
.k-tag[data-fremd="ja"] {
|
|
background: linear-gradient(180deg, rgba(12, 16, 25, .7), rgba(6, 9, 15, .7));
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* ===================================================================
|
|
DER WECKER-DIALOG WAR GAR NICHT GESTALTET (08.09.2026)
|
|
|
|
Filipe: "alles was sie sehen soll dan auch nach der neuen struktur
|
|
aufgebaut sein."
|
|
|
|
Gefunden beim Nachsehen, welche Dialoge NICHT `.dialog` heissen:
|
|
Dieser hier traegt `.tagdialog`, und diese Klasse steht in keiner
|
|
einzigen Stilvorlage. Gemessen kam heraus, was ein `<dialog>` ohne
|
|
Gestaltung vom Browser bekommt:
|
|
|
|
Hintergrund rgb(18, 18, 18) flaches Systemschwarz
|
|
Rand 3 px der Systemrahmen
|
|
Fase keine
|
|
Raster keins
|
|
|
|
Er sah damit aus wie ein Fenster des Betriebssystems mitten im
|
|
Workspace -- und das auf JEDER Rolle, denn den Wecker haben alle.
|
|
Aufgefallen ist es nie, weil er nur aufgeht, wenn man auf die
|
|
Glocke an einem Termin drueckt.
|
|
|
|
Er bekommt jetzt dieselbe Sprache wie alle anderen Dialoge: die
|
|
gefraeste Fase, die Leuchtschiene links, denselben Verlauf und
|
|
denselben Schatten. Bewusst hier und nicht ueber die Modulliste --
|
|
die belegt beide Pseudo-Elemente fuer Eckwinkel, und die Schiene
|
|
ist an einem Dialog die wichtigere Aussage.
|
|
=================================================================== */
|
|
.tagdialog {
|
|
position: relative;
|
|
width: min(580px, calc(100vw - 32px));
|
|
padding: 22px 24px 24px;
|
|
border: 1px solid rgba(150, 186, 220, .16);
|
|
clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
|
|
border-radius: 0;
|
|
background:
|
|
linear-gradient(90deg,
|
|
color-mix(in srgb, var(--akzent) 16%, transparent) 0%,
|
|
color-mix(in srgb, var(--akzent) 5%, transparent) 14%,
|
|
transparent 40%),
|
|
linear-gradient(163deg, #141c29 0%, #0a0e17 58%, #070a11 100%);
|
|
color: var(--text);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .10),
|
|
inset 0 -1px 0 rgba(0, 0, 0, .55),
|
|
inset 2px 0 0 -1px color-mix(in srgb, var(--akzent) 34%, transparent),
|
|
0 30px 70px -24px rgba(0, 0, 0, .92);
|
|
}
|
|
.tagdialog::backdrop { background: rgba(3, 6, 11, .72); backdrop-filter: blur(3px); }
|
|
/* Kopf und Schliessknopf nebeneinander -- vorher stand das X unter der
|
|
Ueberschrift, weil nichts sie in eine Zeile gebracht hat. */
|
|
.tagdialog__kopf {
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
gap: 16px; margin-bottom: 6px;
|
|
}
|
|
.tagdialog__kopf .titel { margin: 0; font-size: 1.24rem; }
|
|
.wecker-hinweis { margin: 0 0 14px; }
|
|
|
|
/* ===================================================================
|
|
ANLAESSE UND WIEDERHOLUNGEN IN EINER KACHEL (08.09.2026)
|
|
|
|
Filipe: "ich will dass das alles in einer geilen kachel ist wie die
|
|
kacheln in der start seite. und noch geiler."
|
|
|
|
Drei Abschnitte standen frei auf dem Hintergrundbild: was als
|
|
Naechstes ansteht, was in diesem Monat liegt, was von allein
|
|
weiterlaeuft. Drei Ueberschriften ohne Fassung lesen sich als drei
|
|
lose Listen -- zusammen sind sie EINE Auskunft: was ausser den
|
|
Terminen im Raster sonst noch kommt.
|
|
|
|
DAS FORMULAR "NEUER TERMIN" GEHOERT NICHT HINEIN. Es stand im
|
|
Quelltext zwischen den Abschnitten; der Umschlag haette es
|
|
mitgenommen. Der Wiederholungs-Abschnitt ist deshalb nach oben zu
|
|
den anderen beiden gewandert, das Formular steht jetzt hinter der
|
|
Kachel. Inhaltlich ist das ohnehin die bessere Ordnung: erst lesen,
|
|
was kommt, dann etwas anlegen.
|
|
|
|
VERSCHWINDET, WENN NICHTS DRIN IST. Alle drei Abschnitte tragen
|
|
`hidden`, solange sie leer sind -- eine leere Kachel mit drei
|
|
unsichtbaren Kindern waere ein Kasten um nichts. `:has()` fragt
|
|
genau das ab, ohne eine Zeile JavaScript. */
|
|
/* SIE STEHT SEIT DEM 09.09.2026 IN DER MODULLISTE von module.css.
|
|
|
|
Filipe (screen4): "ich will dass das alles in einer geilen kachel
|
|
ist wie die kacheln in der start seite. und noch geiler."
|
|
|
|
Vorher stand die Kachelform HIER nachgebaut: eine Fase an einer
|
|
Ecke, ein Raster, ein Innenschatten. Das Ergebnis war ein blasser
|
|
Umriss -- im Bildschirmfoto sah man den Rahmen kaum, waehrend die
|
|
Karten DARIN (die schon in der Modulliste stehen) Kantenlicht und
|
|
Eckwinkel trugen. Die Sammelkachel war damit schwaecher gefasst als
|
|
ihr Inhalt, also genau andersherum.
|
|
|
|
"Wie die Kacheln auf der Startseite" heisst nicht "aehnlich
|
|
gebaut", sondern DIESELBE Regel. Die Modulliste ist der Ort dafuer,
|
|
und `pruef-css-klassen` vergleicht ihre sieben Kopien Zeichen fuer
|
|
Zeichen -- ein Nachbau daneben haette diese Sicherung nicht.
|
|
|
|
WAS HIER BLEIBEN MUSS, IST DIE FLAECHE. Die Modulliste gibt die
|
|
FORM (Fase, Kantenlicht, Eckwinkel, Schlagschatten) -- den
|
|
Hintergrund bringt jede Kachel selbst mit, weil er von Fall zu Fall
|
|
verschieden ist. Beim ersten Anlauf habe ich ihn mit dem Nachbau
|
|
zusammen geloescht: Die Kachel war danach durchsichtig, das
|
|
Hintergrundbild schien mitten durch den Text. Eine Fassung ohne
|
|
Fuellung ist kein Rahmen, sondern ein Loch. */
|
|
.k-anlasskachel {
|
|
margin: 0 0 24px;
|
|
padding: 18px 20px 6px;
|
|
/* DUNKLER ALS DIE KARTEN DARIN (09.09.2026, screen1).
|
|
|
|
Filipe: "mach den hintergrund von dieser kachel dunkler, so dass
|
|
die die kacheln drin viel mehr auffallen."
|
|
|
|
Das ist die Aufgabe einer Sammelkachel und war hier falsch herum:
|
|
Sie lag mit rgba(19,26,38,.88) auf demselben Helligkeitsniveau wie
|
|
die Anlasskarten darin -- damit war sie nicht der Untergrund,
|
|
sondern eine dritte Flaeche gleicher Lautstaerke. Eine Vitrine ist
|
|
dunkler als das, was darin steht; sonst sieht man die Vitrine.
|
|
|
|
Jetzt fast schwarz und praktisch deckend (.97/.99). Die Karten
|
|
darin behalten ihre Helligkeit unveraendert -- der Abstand
|
|
zwischen beiden entsteht dadurch von selbst, ohne dass an den
|
|
Karten etwas geaendert werden musste. */
|
|
background:
|
|
var(--raster),
|
|
linear-gradient(178deg, rgba(9, 13, 20, .97), rgba(4, 7, 12, .99));
|
|
}
|
|
.k-anlasskachel:not(:has(> section:not([hidden]))) { display: none; }
|
|
/* Die Abschnitte darin tragen nur noch ihre Ueberschrift -- die
|
|
Fassung kommt jetzt von aussen. Der letzte ohne Abstand nach unten,
|
|
sonst steht die Kachel unten leer. */
|
|
.k-anlasskachel > .k-leiste { margin-bottom: 18px; }
|
|
.k-anlasskachel > .k-leiste:last-of-type { margin-bottom: 12px; }
|
|
|
|
/* =====================================================================
|
|
DIE TAGESFELDER SIND TASTEN IN EINER PLATTE (screen18, 09.09.2026)
|
|
|
|
Filipe: "...und die kacheln vom kalender selber sollen viel krasser
|
|
und geiler aussehen bitte."
|
|
|
|
Die dunklen Fugen zwischen den Tagen waren die eine Haelfte seines
|
|
Wunsches und sind seit dem 08.09. gebaut (siehe weiter oben). Die
|
|
andere Haelfte sind die Felder SELBST: Sie waren flache Rechtecke in
|
|
drei Grautoenen. Eine gefraeste Platte mit Fugen, in der flache
|
|
Flaechen liegen, ist halb fertig -- die Fuge sagt "Werkstueck", die
|
|
Flaeche sagt "Tabelle".
|
|
|
|
ZWEI PIXEL MACHEN DEN UNTERSCHIED: eine Lichtkante oben, eine
|
|
Schattenkante unten. Das ist dieselbe Rechnung wie ueberall in
|
|
diesem Haus -- Licht faellt von oben, also ist die obere Kante hell
|
|
und die untere dunkel. Aus einer Flaeche wird damit ein Koerper, der
|
|
in der Platte SITZT. Kein zusaetzliches Element, keine Groesse, kein
|
|
Umbruch: nur zwei innere Schatten.
|
|
|
|
DER WOCHENENDUNTERSCHIED WAR MESSBAR ZU KLEIN. Werktag lag bei
|
|
`rgba(11,15,25,.74)`, Wochenende bei `rgba(9,12,20,.8)` -- auf dem
|
|
Bildschirmfoto sind die beiden Spalten nicht auseinanderzuhalten.
|
|
Damit war die Angabe zwar da, aber wirkungslos, und das ist die
|
|
unangenehmste Sorte: Sie sieht im Quelltext nach einer Funktion aus.
|
|
Jetzt liegt das Wochenende sichtbar tiefer und etwas kuehler -- man
|
|
sieht den Wochenrhythmus, ohne die Spaltenkoepfe zu lesen. Das ist
|
|
keine Zierde, das ist die Information, wegen der ein Kalender in
|
|
Wochen gegliedert ist.
|
|
|
|
HEUTE BLEIBT DAS LAUTESTE FELD, und das war die Bedingung fuer alles
|
|
andere: Wenn jedes Feld eine Kante bekommt, muss das eine, auf das
|
|
es ankommt, weiter herausstechen. Es behaelt seinen vollen Ring und
|
|
bekommt zusaetzlich einen leisen Schein nach innen.
|
|
|
|
AUGENSCHONEND: Alle Werte liegen unter 8 Prozent Deckkraft. Auf
|
|
sechs mal sieben Feldern summiert sich jede Helligkeit; was auf
|
|
einer Kachel dezent ist, ist auf 42 Kacheln ein Raster. Deshalb so
|
|
leise wie moeglich und keine Farbe ausser der, die schon da war. */
|
|
.k-tag {
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(170, 200, 230, .07),
|
|
inset 0 -1px 0 rgba(0, 0, 0, .45);
|
|
}
|
|
/* Beim Zeigen kommt die Lichtkante voll -- naeherkommen statt
|
|
aufleuchten, dieselbe Sprache wie ueberall. */
|
|
.k-tag:hover {
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(190, 218, 245, .16),
|
|
inset 0 -1px 0 rgba(0, 0, 0, .5);
|
|
}
|
|
/* Tage des Nachbarmonats sind zurueckgenommen -- auch ihre Kante.
|
|
Sonst waeren sie flach und trotzdem gleich stark gerahmt. */
|
|
.k-tag[data-fremd="ja"] {
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(170, 200, 230, .035),
|
|
inset 0 -1px 0 rgba(0, 0, 0, .45);
|
|
}
|
|
/* Das Wochenende liegt tiefer in der Platte und ist eine Spur kuehler.
|
|
Der Unterschied zum Werktag ist jetzt zu sehen, ohne aufzufallen. */
|
|
.k-tag[data-wochenende="ja"] {
|
|
background: rgba(6, 9, 16, .86);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(150, 185, 220, .05),
|
|
inset 0 -1px 0 rgba(0, 0, 0, .55),
|
|
inset 0 8px 14px -12px rgba(0, 0, 0, .8);
|
|
}
|
|
.k-tag[data-wochenende="ja"]:hover { background: rgba(14, 20, 32, .9); }
|
|
/* Heute: voller Ring, dazu ein leiser Schein nach innen. Es ist das
|
|
einzige Feld, das seinen Zustand meldet -- alle anderen zeigen nur,
|
|
was auf ihnen steht. */
|
|
.k-tag[data-heute="ja"] {
|
|
box-shadow:
|
|
inset 0 0 0 1px color-mix(in srgb, var(--akzent) 50%, transparent),
|
|
inset 0 1px 0 rgba(200, 230, 255, .14),
|
|
inset 0 0 22px -8px color-mix(in srgb, var(--akzent) 55%, transparent);
|
|
}
|
|
|
|
/* =====================================================================
|
|
BLÄTTERN DIREKT ÜBER DEM KALENDER (09.09.2026)
|
|
|
|
Filipe, mit Bildschirmfoto: "ich will dass genau da über dem kalender
|
|
auch noch buttons sind um den monat zu wechseln, tage wechseln.
|
|
perfektionnier mir das bitte. und mach auch die buttons die schon da
|
|
sind noch viel klarer bitte und die neuen auch. lass die neuen auch
|
|
richtig geil aussehen, die einen rot und die anderen grün."
|
|
|
|
ROT UND GRÜN, aber nicht Signalrot und Grasgrün: Diese beiden Knöpfe
|
|
stehen den ganzen Tag auf dem Bildschirm. Genommen sind deshalb die
|
|
Haustöne -- das gedeckte Rot der Warnfarbe und das Grün der
|
|
Scout-Rolle. Beide sind hell genug für Schrift auf dunklem Grund und
|
|
leuchten nicht.
|
|
|
|
Die Richtung steckt zusätzlich in der FORM, nicht nur in der Farbe:
|
|
Der Pfeil steht links beim Zurück und rechts beim Vor. Wer Rot und
|
|
Grün nicht unterscheidet -- etwa acht Prozent der Männer --, liest
|
|
die Richtung trotzdem.
|
|
===================================================================== */
|
|
.k-schritte {
|
|
display: inline-flex; align-items: stretch; gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.k-schritt {
|
|
--s: var(--text-leise);
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
min-height: 38px; padding: 8px 15px;
|
|
border: 1px solid color-mix(in srgb, var(--s) 42%, transparent);
|
|
border-radius: 999px;
|
|
background:
|
|
linear-gradient(180deg,
|
|
color-mix(in srgb, var(--s) 15%, transparent),
|
|
color-mix(in srgb, var(--s) 7%, transparent));
|
|
color: color-mix(in srgb, var(--s) 88%, #ffffff);
|
|
font: inherit; font-size: .86rem; font-weight: 650;
|
|
cursor: pointer;
|
|
transition: border-color var(--tempo), background var(--tempo), transform var(--tempo);
|
|
}
|
|
.k-schritt:hover:not(:disabled) {
|
|
border-color: color-mix(in srgb, var(--s) 72%, transparent);
|
|
background:
|
|
linear-gradient(180deg,
|
|
color-mix(in srgb, var(--s) 24%, transparent),
|
|
color-mix(in srgb, var(--s) 12%, transparent));
|
|
transform: translateY(-1px);
|
|
}
|
|
.k-schritt:active:not(:disabled) { transform: translateY(0); }
|
|
.k-schritt:focus-visible {
|
|
outline: 2px solid color-mix(in srgb, var(--s) 70%, #ffffff);
|
|
outline-offset: 2px;
|
|
}
|
|
.k-schritt:disabled { opacity: .42; cursor: default; }
|
|
/* Der Pfeil ist größer als die Schrift -- er ist das, was man aus dem
|
|
Augenwinkel trifft. */
|
|
.k-schritt__pfeil { font-size: 1.15rem; line-height: 1; opacity: .9; }
|
|
|
|
.k-schritt--zurueck { --s: #ef8b93; } /* gedecktes Rot des Hauses */
|
|
.k-schritt--vor { --s: #5fc99a; } /* das Grün der Scout-Rolle */
|
|
.k-schritt--heute { --s: #9fb0c6; } /* neutral: es ist kein Schritt */
|
|
|
|
@media (max-width: 620px) {
|
|
/* Am Handy zählt die Richtung, nicht das Wort -- und die Leiste soll
|
|
nicht umbrechen.
|
|
|
|
Aus dem Wort wird aber KEIN schmaler Rest: Der erste Anlauf liess
|
|
die Polsterung stehen, und übrig blieb ein 30 px breites Pillchen
|
|
mit einem winzigen Pfeil darin -- kleiner als das, was man mit dem
|
|
Daumen sicher trifft, und die Farbe war auf der Fläche kaum noch zu
|
|
sehen. Jetzt ein rundes Ziel von 44 px mit einem Pfeil, der die
|
|
Fläche auch füllt. */
|
|
.k-schritt__text { display: none; }
|
|
.k-schritt--zurueck, .k-schritt--vor {
|
|
width: 44px; min-width: 44px; height: 44px; padding: 0;
|
|
justify-content: center; gap: 0;
|
|
}
|
|
.k-schritt--zurueck .k-schritt__pfeil,
|
|
.k-schritt--vor .k-schritt__pfeil { font-size: 1.5rem; opacity: 1; }
|
|
.k-schritt--heute { min-height: 44px; padding: 8px 18px; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
UND DIE VORHANDENEN KNÖPFE WERDEN KLARER
|
|
|
|
"mach auch die buttons die schon da sind noch viel klarer bitte."
|
|
|
|
Der Ansichts-Umschalter: Die drei nicht gewählten Knöpfe waren nackte
|
|
Schrift auf dunklem Grund -- sie sahen aus wie Beschriftungen, nicht
|
|
wie Schaltflächen. Wer nicht weiß, dass "Woche" anklickbar ist,
|
|
klickt nicht darauf. Sie bekommen jetzt eine eigene Fläche; die
|
|
gewählte bleibt unverändert das gebürstete Metall und hebt sich
|
|
dadurch sogar deutlicher ab als vorher.
|
|
===================================================================== */
|
|
.k-ansicht {
|
|
border: 1px solid rgba(150, 186, 220, .16);
|
|
background: rgba(255, 255, 255, .035);
|
|
color: var(--text-leise);
|
|
padding: 8px 16px;
|
|
}
|
|
.k-ansicht:hover:not([aria-pressed="true"]) {
|
|
color: var(--text);
|
|
border-color: rgba(150, 186, 220, .34);
|
|
background: rgba(255, 255, 255, .07);
|
|
}
|
|
.k-ansicht[aria-pressed="true"] { border-color: transparent; }
|
|
|
|
/* Die Filterknöpfe: Die Beschriftung stand auf --text-still und war
|
|
damit die leiseste Schrift der Seite -- ausgerechnet an einem
|
|
Bedienelement. Und "aus" unterschied sich nur am hohlen Punkt. */
|
|
.k-chip {
|
|
color: var(--text-leise);
|
|
padding: 8px 15px;
|
|
border-color: rgba(150, 186, 220, .2);
|
|
}
|
|
.k-chip:hover { color: var(--text); border-color: rgba(150, 186, 220, .4); }
|
|
.k-chip[aria-pressed="true"] {
|
|
color: #ffffff;
|
|
border-color: color-mix(in srgb, var(--cfarbe) 55%, transparent);
|
|
background: color-mix(in srgb, var(--cfarbe) 15%, transparent);
|
|
font-weight: 650;
|
|
}
|
|
/* Ausgeschaltet heisst: durchgestrichen wäre zu viel, aber die Zahl
|
|
gehört gedämpft -- sonst zählt man Einträge, die gerade nicht
|
|
angezeigt werden. */
|
|
.k-chip[aria-pressed="false"] { opacity: .72; }
|
|
.k-chip[aria-pressed="false"]:hover { opacity: 1; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.k-schritt, .k-schritt:hover { transition: none; transform: none; }
|
|
}
|
|
@media (forced-colors: active) {
|
|
.k-schritt { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
|
|
.k-ansicht { border: 1px solid ButtonText; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
WAS VOM BRETT KOMMT (17.09.2026)
|
|
|
|
Filipe: „ich will dass die auch in einer kalender drin sind, aber ich
|
|
will dass es richtig geil ist."
|
|
|
|
ZWEI ZEILEN, NICHT ZWEI SPALTEN. Der erste Anlauf stellte den
|
|
Brettnamen neben den Titel -- und das Bildschirmfoto zeigte sofort,
|
|
dass daraus „CONTENT-IDEEN Cli…" wird. Das Etikett verdraengte genau
|
|
die Information, die es einordnen sollte.
|
|
|
|
Jetzt steht der Titel in seiner Zeile und das Brett darunter, klein
|
|
und gedaempft. Es beantwortet „was ist das?", ohne dem Titel Platz
|
|
wegzunehmen.
|
|
===================================================================== */
|
|
.k-pille__brett {
|
|
display: block;
|
|
margin-top: 1px;
|
|
/* 11,52 px -- gerade eben ueber der Hausgrenze von 11,5 px.
|
|
Der erste Anlauf stand auf .64rem (10,24 px) und wurde von
|
|
pruef-css-klassen gefunden: eine Stelle mehr als die Grundlinie.
|
|
|
|
GEDAEMPFT WIRD UEBER FARBE UND GEWICHT, NICHT UEBER GROESSE. Eine
|
|
Nebenzeile darf leiser sein als der Titel -- sie darf nicht
|
|
schlechter lesbar sein. Das ist der Unterschied zwischen
|
|
„zurueckhaltend" und „zusammengekniffen", und die Hausregel
|
|
„augenschonend" meint genau den. */
|
|
font-size: .72rem; font-weight: 600;
|
|
letter-spacing: .01em;
|
|
/* Gedaempft, aber nicht per `opacity`: Das macht die ganze Zeile
|
|
durchsichtig, und der Hintergrund des Tages scheint hindurch. Eine
|
|
leisere FARBE tut dasselbe, ohne die Flaeche anzufassen. */
|
|
color: color-mix(in srgb, var(--pfarbe, #7f9cc0) 55%, var(--text-still));
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
|
|
/* DER HAKEN VOR DEM TITEL -- fuer das, was jemandem zugesagt wurde.
|
|
Er ist ein Zeichen UND eine Farbe, nicht nur eine Farbe: Eine
|
|
Rueckmeldung, die allein aus einem Farbwechsel besteht, kommt bei
|
|
niemandem an, der Farben schlecht unterscheidet. */
|
|
.k-pille__zusage {
|
|
margin-inline-end: 4px;
|
|
font-weight: 800;
|
|
color: color-mix(in srgb, var(--pfarbe, #7f9cc0) 30%, #ffffff);
|
|
}
|
|
|
|
/* In der Listenansicht steht das Brett ohnehin neben dem Titel
|
|
(k-zeile__art). Dort waere die zweite Zeile eine Dopplung. */
|
|
.k-zeile .k-pille__brett { display: none; }
|
|
|
|
/* DIE ZWEITE ZEILE NUR, WO SIE LESBAR IST (17.09.2026).
|
|
|
|
Am Handy ist eine Monatszelle rund 45 px breit. Dort wurde aus
|
|
„Content-Ideen" ein „Co…" -- eine Zeile, die Hoehe kostet und nichts
|
|
sagt. Am Bildschirmfoto in 390 px sofort zu sehen, an keiner Zahl.
|
|
|
|
GEMESSEN STATT GESCHALTET: Entschieden wird nach der Breite der
|
|
ZELLE, nicht nach der des Fensters. Eine Fensterschwelle waere
|
|
wieder die Rechnung von gestern -- sie muesste bei jeder Aenderung
|
|
am Raster nachgezogen werden (und genau das ist im September an der
|
|
Kopfleiste zweimal schiefgegangen). Eine Zellenabfrage stimmt auch
|
|
dann noch, wenn das Raster morgen eine Spalte mehr oder weniger hat.
|
|
|
|
110 px ist die Breite, ab der ein Brettname mehr als drei Buchstaben
|
|
zeigt. Darunter steht nur der Titel -- und das Brett weiterhin im
|
|
Tooltip, in der Listenansicht und im Tagesdialog. */
|
|
.k-tag { container-type: inline-size; }
|
|
|
|
.k-pille__brett { display: none; }
|
|
@container (min-width: 110px) {
|
|
.k-pille__brett { display: block; }
|
|
}
|
|
|
|
/* Ausserhalb einer Zelle -- Wochenspalte, Zeitstrahl -- gibt es keinen
|
|
Container, und `@container` greift nicht. Dort ist Platz, also steht
|
|
der Name da. `:not()` ueber den Vorfahren geht in CSS nicht; deshalb
|
|
die umgekehrte Richtung: erst ueberall aus (oben), dann dort wieder
|
|
an, wo es passt. */
|
|
.k-wochentag .k-pille__brett,
|
|
.k-strahl .k-pille__brett { display: block; }
|
|
.k-zeile .k-pille__brett { display: none; }
|
|
|
|
|
|
/* =====================================================================
|
|
AM HANDY WIRD AUS EINER PILLE EIN PUNKT (21.09.2026)
|
|
=====================================================================
|
|
|
|
GEMESSEN, nicht geschaetzt. Eine Monatszelle und die Pille darin:
|
|
|
|
Fenster Zelle Pille Platz fuer Text
|
|
360 px 42 px 32 px 16 px -> 1-2 Buchstaben
|
|
390 px 46 px 36 px 20 px -> 2-3 Buchstaben
|
|
412 px 49 px 39 px 23 px -> 3 Buchstaben
|
|
768 px 95 px 85 px 69 px -> lesbar
|
|
1280 px 158 px 140 px 124 px -> lesbar
|
|
|
|
Der Platz fuer Text ist die Zellenbreite minus 34 px: 18 px
|
|
Zellenrand, 14 px Pillenrand, 2 px farbige Kante. Bei 11,5 px
|
|
Schrift sind das am Handy anderthalb Buchstaben und drei Punkte.
|
|
"Content-Ideen sammeln" wurde zu "C…" -- eine Zeile, die Hoehe
|
|
kostet und nichts sagt.
|
|
|
|
WAS GROSSE KALENDER AN DIESER STELLE TUN: einen Punkt. Man sieht,
|
|
DASS an dem Tag etwas ist und wie viel -- und tippt den Tag an, um
|
|
zu lesen, was. Der Tagesdialog dafuer steht seit jeher (tagOeffnen),
|
|
er ist lesbar und hat 44-px-Zeilen; er war nur schwer zu finden,
|
|
solange das Raster so tat, als koenne man dort lesen.
|
|
|
|
DIE SCHWELLE IST GERECHNET, NICHT GERATEN: Vier Buchstaben sind das
|
|
Wenigste, aus dem ein Mensch einen Hinweis zieht. 4 x 6,2 px = 25 px
|
|
Text + 34 px Rand = 59 px Zelle. Darum 60.
|
|
|
|
UND SIE MISST DIE ZELLE, NICHT DAS FENSTER -- wie die Regel fuer den
|
|
Brettnamen daneben. Eine Fensterschwelle waere wieder die Rechnung
|
|
von gestern und muesste bei jeder Aenderung am Raster nachgezogen
|
|
werden.
|
|
|
|
EIN ZEITRAUM BLEIBT EIN BALKEN. Ihn auch zu Punkten zu machen wuerde
|
|
genau das wegnehmen, wofuer er am 21.09. gebaut wurde: dass man
|
|
sieht, wie weit etwas laeuft. Ohne Text, aber durchgehend.
|
|
|
|
DIE PUNKTE SIND NICHT EINZELN ANTIPPBAR (`pointer-events: none`).
|
|
Ein 7-px-Link waere ein Nadeloehr -- die Hausregel sind 44 px. So
|
|
faellt jeder Tipp auf die ZELLE, und die oeffnet den Tagesdialog.
|
|
Am Rechner, wo eine Maus genau zielt, bleibt die Pille ein Link.
|
|
===================================================================== */
|
|
@container (max-width: 60px) {
|
|
/* WARUM HIER UEBERALL `body` DAVORSTEHT -- gemessen, nicht geschmueckt.
|
|
|
|
start.css traegt eine Sammelregel fuer schmale Fenster:
|
|
body.start .k-pille { font-size: .75rem }
|
|
Die ist um EIN Element spezifischer als `.k-tag .k-pille`
|
|
(0,2,1 gegen 0,2,0) und gewinnt damit, egal welche Datei spaeter
|
|
laedt. Folge ohne das `body`: Der Punkt bekam Groesse, Farbe und
|
|
`pointer-events` aus dieser Regel hier -- die Schriftgroesse aber
|
|
aus start.css. Er war 8 x 8 gross und trug trotzdem einen Titel,
|
|
der quer ueber die Nachbarzellen lief.
|
|
|
|
Aufgefallen ist das NICHT an den Zahlen (die sagten 8 x 8, alles
|
|
gut), sondern am Bildschirmfoto. Aufgeklaert hat es die Frage an
|
|
den Browser, WELCHE Regeln auf das Element passen -- statt zu
|
|
raten, welche gewinnen sollte.
|
|
|
|
`body` hebt auf denselben Wert (0,2,1) und gewinnt dann ueber die
|
|
Reihenfolge, weil kalender.css nach start.css laedt. Das ist der
|
|
kleinstmoegliche Schritt; `!important` waere die Tuer, durch die
|
|
beim naechsten Mal niemand mehr zurueckfindet. */
|
|
|
|
/* Die Zelle wird zum Block, damit die Punkte nebeneinander laufen
|
|
und umbrechen. Als Flex-Spalte saesse jeder Punkt in einer eigenen
|
|
Zeile -- drei Termine waeren dann hoeher als der ganze Tag. */
|
|
|
|
body .k-tag .k-pille {
|
|
display: inline-block;
|
|
width: 8px; height: 8px;
|
|
padding: 0;
|
|
margin: 0 3px 3px 0;
|
|
border-left: 0;
|
|
border-radius: 50%;
|
|
/* Voll deckend -- die 16-%-Fuellung der Pille waere als Punkt
|
|
kaum zu sehen. */
|
|
background: var(--pfarbe);
|
|
font-size: 0; /* der Text geht, die Farbe bleibt */
|
|
line-height: 0;
|
|
min-height: 0;
|
|
overflow: visible;
|
|
pointer-events: none; /* der Tipp gehoert der Zelle */
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* DIE KINDER AUCH. `font-size: 0` an der Pille nimmt nur den nackten
|
|
Textknoten mit -- die Uhrzeit und das Wiederholzeichen haben ihre
|
|
eigene Schriftgroesse und hielten den Punkt auf 26 px Hoehe. Ein
|
|
8 x 26 grosser "Punkt" ist ein Strich. Gemessen, nicht vermutet. */
|
|
body .k-tag .k-pille > * { display: none; }
|
|
|
|
/* Erledigtes bleibt erkennbar -- hohl statt voll. Ohne das saehe ein
|
|
abgehakter Termin aus wie ein offener, und der Kalender loege. */
|
|
body .k-tag .k-pille.erledigt {
|
|
background: transparent;
|
|
border: 2px solid var(--pfarbe);
|
|
opacity: .75;
|
|
}
|
|
|
|
/* EIN ANLASS WIRD EIN ECKIGES ZEICHEN -- rund waere er von einem
|
|
Termin nicht zu unterscheiden, und "DE…" fuer "Tag der Deutschen
|
|
Einheit" sagt genauso wenig wie "Co…" fuer eine Content-Idee.
|
|
Ganz weglassen geht nicht: Nur FEIERTAGE faerben die Zelle rosa,
|
|
andere Anlaesse nicht -- die waeren dann unsichtbar. Den Namen
|
|
nennt der Tagesdialog. */
|
|
body .k-tag .k-anlass {
|
|
display: inline-block;
|
|
width: 8px; height: 8px;
|
|
padding: 0; margin: 0 3px 3px 0;
|
|
border-left: 0;
|
|
border-radius: 2px;
|
|
background: var(--afarbe);
|
|
font-size: 0; line-height: 0; min-height: 0;
|
|
pointer-events: none;
|
|
vertical-align: middle;
|
|
}
|
|
body .k-tag .k-anlass > * { display: none; }
|
|
|
|
/* Der Zeitraum: durchgehender Balken statt Punkt. */
|
|
body .k-tag .k-pille[data-spanne] {
|
|
display: block;
|
|
width: auto; height: 5px;
|
|
margin: 0 0 3px;
|
|
border-radius: 3px;
|
|
}
|
|
/* Angeschnitten, wo er weiterlaeuft -- dieselbe Sprache wie in der
|
|
breiten Ansicht. */
|
|
body .k-tag .k-pille[data-spanne="mitte"],
|
|
body .k-tag .k-pille[data-spanne="ende"] { border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
|
body .k-tag .k-pille[data-spanne="mitte"],
|
|
body .k-tag .k-pille[data-spanne="start"] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE ZELLE KANN SICH NICHT SELBST ABFRAGEN (21.09.2026)
|
|
=====================================================================
|
|
|
|
`.k-tag` traegt `container-type: inline-size` und ist damit der
|
|
Behaelter fuer ihre KINDER. Eine Regel fuer `.k-tag` selbst, die in
|
|
`@container` steht, wird gegen den naechsten Behaelter DARUEBER
|
|
geprueft -- also nicht gegen die Zelle. Sie greift nie.
|
|
|
|
Genau das ist hier passiert: Die Punktregeln fuer `.k-pille` wirkten
|
|
(Groesse, Farbe, pointer-events -- alles gemessen), die Regel
|
|
`.k-tag { display: block }` daneben nicht. Ergebnis: Die Zelle blieb
|
|
eine Flex-SPALTE, und jeder Punkt bekam eine eigene Zeile.
|
|
|
|
Deshalb fragt die Zelle jetzt ihren Behaelter: das Raster.
|
|
|
|
DIE SCHWELLE IST GERECHNET. Das Raster ist
|
|
grid-template-columns: 46px repeat(7, minmax(0, 1fr))
|
|
mit 1 px Fugen. Eine Tagesspalte ist also
|
|
(Raster - 46 - 8) / 7
|
|
und wird bei 60 px schmal genug fuer Punkte (siehe die Rechnung
|
|
darueber). Umgestellt: Raster = 46 + 8 + 7 x 60 = 474.
|
|
|
|
Ein benannter Behaelter, damit die Abfrage nicht versehentlich bei
|
|
der Zelle haengenbleibt -- unbenannte Abfragen nehmen immer den
|
|
naechsten, und das waere hier der falsche. */
|
|
.k-raster { container-type: inline-size; container-name: kalenderraster; }
|
|
|
|
@container kalenderraster (max-width: 474px) {
|
|
.k-tag { display: block; }
|
|
.k-tag__kopf { margin-bottom: 5px; }
|
|
}
|