DogFatherGitandClaude Opus 5
a4db78e937
Filipe: "die ganze kachel und button sollen geiler aussehen." Der INHALT war schon gebaut -- Eintraege mit Schiene in ihrer Farbe, Plaketten (TERMIN, FRIST), Knopfreihe, Akzentknopf. Nur die HUELLE nicht: 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 Bauart wie die Sammelkacheln: Der <dialog> traegt nur die Fassung (2 px Polsterung mit Farbverlauf darunter), alles Sichtbare liegt in einer neuen Ebene `.k-dialog__glas` darin. Ohne diese zweite Ebene muesste die Fassung ein `border` sein -- und ein Rand folgt dem Rechteck, nicht der abgeschraegten Ecke. 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 dabei Pflicht und nicht Kosmetik: Bliebe der Radius neben dem `clip-path` stehen, wuerde er die Ecken der Flaeche INNERHALB der Silhouette runden -- an den nicht gefasten Ecken saehe man eine doppelte Kante. NEBENBEI EINEN WIRKUNGSLOSEN EFFEKT ENTFERNT: `backdrop-filter: blur(14px)` stand auf dem Dialog und waere mit auf die neue Glasebene gewandert. Die ist zu 97 Prozent deckend -- der Browser haette bei jedem Bild einen Weichzeichner ausgerechnet, 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. Geprueft: pruef-kalender, pruef-css-klassen, pruef-buehne -- alle in Ordnung. Co-Authored-By: Claude Opus 5 <[email protected]>
1399 lines
54 KiB
CSS
1399 lines
54 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; }
|
|
|
|
/* ---------- 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;
|
|
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 -------------------------------------------------- */
|
|
/* =====================================================================
|
|
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; }
|
|
.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; }
|
|
.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;
|
|
min-height: 30px; padding: 3px 9px 3px 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;
|
|
background:
|
|
var(--raster),
|
|
linear-gradient(178deg, rgba(19, 26, 38, .88), rgba(10, 14, 22, .93));
|
|
}
|
|
.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);
|
|
}
|