DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
60c3edb10db7bb5518aabc8c61df29f7012abbdc
dogfather-universe/workspace/assets/css/kalender.css
T
DogFatherGitandClaude Opus 5 d7cf598b00 "Heute" war zwei Stunden lang gestern -- und vier Fehler auf Handy und PC 
Auftrag: "einen grossen Check machen, ob alles klappt, auf dem Handy und
PC." Dafuer ein neuer Rundgang (pruef-grosscheck.mjs), der stumpf ueber
alles geht: 19 Workspace-Seiten mal 4 Rollen mal 2 Bildschirmgroessen
plus 33 oeffentliche Seiten, zweimal. 208 Seiten, 50 774 Elemente.

Solche Rundgaenge finden andere Fehler als gezielte Pruefungen: nicht
den falsch gerechneten Wert, sondern die Seite, die bei genau einer
Rolle ueberlaeuft.

=== DER WICHTIGSTE FUND: "heute" war in UTC gerechnet ===

Der Check lief um 01:10 Uhr. Ortszeit war der 2. September, in UTC noch
der 1. -- und in diesem Fenster rechnete die Anwendung an ZWOELF Stellen
"heute" als toISOString(), also in UTC. Server und Benutzer stehen beide
auf Europe/Berlin.

Was das im Alltag bedeutete, jede Nacht zwischen 0 und 2 Uhr:
  * eine heute faellige Aufgabe galt noch nicht als faellig
  * eine um Mitternacht ueberfaellig gewordene erschien erst um 2 Uhr
  * der Filter "Heute faellig" zeigte den Vortag
  * Datumsfelder schlugen gestern vor
  * der Kalender begann seine Vorgabe einen Tag zu frueh

Also genau dann, wenn nach einem Stream gearbeitet wird.

kalender.js machte es die ganze Zeit RICHTIG -- samt Begruendung, warum
die ARITHMETIK trotzdem in UTC laufen muss (UTC-Mittag ueberlebt die
Zeitumstellung; wer lokal rechnet, verliert am 27. Oktober einen Tag).
Diese Trennung gilt jetzt ueberall, aus je einer Quelle:
  RECHNEN mit Datumsangaben  -> UTC-Mittag, unveraendert
  WELCHER TAG IST HEUTE      -> Ortszeit (heuteLokal/tagLokal im Server,
                                window.heuteLokal in kopf.js)

WIE ES AUFFIEL, und das ist die eigentliche Lehre: Zuerst schlugen zwei
Pruefungen fehl -- und die Ursache lag in IHNEN, sie rechneten selbst in
UTC (36 Stellen in 17 Dateien). Nach deren Reparatur schlugen sie WIEDER
fehl, und erst da zeigten sie auf die Anwendung. Wer beim ersten Mal
aufgehoert haette ("ist ja nur die Pruefung"), haette den echten Fehler
nie gesehen.

Nachtrag desselben Musters: pruef-uebersicht legte den Termin weiterhin
in UTC an, waehrend die Erwartung schon auf Ortszeit stand. Wer eine
Datumsrechnung umstellt, muss BEIDE Seiten umstellen -- die, die
schreibt, und die, die prueft.

=== VIER FEHLER AUF HANDY UND PC ===

1. Ein langer Creator-Name ("SpongBobSchwammKopf") schob die Startseite
   auf dem Handy um 48 Pixel aus dem Bild -- ein Wort ohne Trennstelle,
   und die Seite liess sich seitlich wegschieben. Trifft echte Namen:
   Creator heissen selten "Tim".

2. Die klebende Speicherleiste verdeckte auf dem Handy ein Textfeld.
   Beim Tippen sieht man die eigene Zeile nicht. Behoben mit
   scroll-margin-bottom (WCAG 2.2, 2.4.11 "Focus Not Obscured").

3./4. Zwei Beschriftungen waren mit 9,6 px (Uebersicht: "ueberfaellig",
   "dringend", "offen") und 9,9 px (Kalender: "heute") zu klein. Fuers
   Handy gab es laengst eine Ausnahme -- nur der Rechner war vergessen
   worden. Ausgerechnet die Woerter, die den Zahlen ihre Bedeutung geben.

=== WAS KEINE FEHLER WAREN ===

Der erste Durchgang meldete 19 Maengel, die keine waren. Alle einzeln im
Quelltext nachgeprueft und dem Rundgang beigebracht:
  * Kacheln und Kopfzeilen "abgeschnitten" -- das Wasserzeichen ragt
    ABSICHTLICH ueber den Rand (steht so im Quelltext)
  * "verdeckt: wahl2__echt" -- das echte <select> liegt absichtlich
    unsichtbar unter seinem Knopf
  * "zurueck-knopf__text abgeschnitten" -- das uebliche Muster fuer
    "nur fuer Vorleseprogramme"
  * drei "zu kleine" Verweise -- WCAG 2.5.8 nimmt Verweise im Fliesstext
    AUSDRUECKLICH aus. Eine Pruefung, die ihre eigene Messlatte nicht
    kennt, misst nichts.

Beim vierten Punkt haette ich fast an der falschen Stelle repariert.

Und statt die Sticky-Meldung abzuschalten (dann faende sie auch echte
Ueberdeckungen nie mehr), wurde sie GENAUER: Ueberdeckt etwas Klebendes
ein Eingabefeld, ist das nur in Ordnung, wenn das Feld genug
scroll-margin-bottom hat, um darunter hervorzukommen. Aus einer vagen
Meldung wird eine pruefbare Zusage.

Vier Gegenproben belegen, dass der Rundgang ueberhaupt etwas finden
kann: ein zu breites Element, ein winziger Knopf, ein winziger Verweis
AUSSERHALB eines Satzes und ein wirklich abgeschnittenes Wort werden
alle gemeldet. Ohne diesen Nachweis waere "alles in Ordnung" wertlos.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-02 01:51:28 +02:00

562 lines
21 KiB
CSS
Raw Blame History

/* ===================================================================
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;
}
.k-ansichten { display: flex; gap: 6px; flex-wrap: wrap; }
.k-ansicht {
padding: 8px 15px;
border: 1px solid var(--rand); border-radius: 999px;
background: var(--flaeche);
color: var(--text-leise);
font: inherit; font-size: .86rem;
cursor: pointer;
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.k-ansicht:hover { color: var(--text); border-color: var(--rand-hell); }
.k-ansicht[aria-pressed="true"] {
color: #eaf4fd;
border-color: color-mix(in srgb, var(--akzent) 46%, transparent);
background: color-mix(in srgb, var(--akzent) 15%, transparent);
}
.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; }
/* ---------- 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 ------------------------------------- */
.k-zeile {
--zfarbe: var(--akzent);
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center; gap: 12px;
padding: 9px 12px 9px 14px;
border-radius: 8px;
border: 1px solid var(--rand);
background:
linear-gradient(90deg, color-mix(in srgb, var(--zfarbe) 8%, transparent), transparent 50%),
var(--flaeche);
}
.k-zeile::before {
content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
border-radius: 0 3px 3px 0;
background: var(--zfarbe);
}
.k-zeile[data-erledigt="ja"] { opacity: .55; }
.k-zeile[data-erledigt="ja"] .k-zeile__titel { text-decoration: line-through; }
.k-zeile__zeit {
font-size: .82rem; font-weight: 650; color: var(--zfarbe);
font-variant-numeric: tabular-nums;
min-width: 5.5ch;
}
.k-zeile__titel { color: var(--text); min-width: 0; }
.k-zeile__knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.k-zeile__art {
padding: 2px 9px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--zfarbe) 32%, transparent);
color: var(--zfarbe);
font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}
.k-zeile__zusatz {
grid-column: 1 / -1;
display: flex; flex-wrap: wrap; gap: 4px 10px;
font-size: .78rem; color: var(--text-leise);
}
.k-zeile__zusatz a { color: var(--akzent); }
/* ---------- 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;
font-size: .62rem; color: var(--text-still);
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 -------------------------------------------------- */
.k-dialog {
width: min(560px, calc(100vw - 32px));
padding: 20px 22px;
border: 1px solid var(--rand-hell);
border-radius: var(--radius);
background: var(--glas-tief);
color: var(--text);
box-shadow: var(--schatten);
backdrop-filter: blur(14px);
}
.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; }
.k-anlass, .k-pille {
font-size: .6rem; padding: 1px 4px;
border-left-width: 2px;
}
.k-pille__zeit { margin-right: 3px; }
.k-spaltenkopf { padding: 8px 4px; font-size: .66rem; letter-spacing: .06em; }
.k-kw { font-size: .66rem; 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; }
}
@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; }
}
Reference in New Issue View Git Blame Copy Permalink