Der Weg in den Kalender ist ein Knopf, kein Nebensatz

Filipe, screen33: "der kalender button da in der kachel oben rechts, der
soll viel auffälliger sein und viel krasser und geiler."

Er sah aus wie ein Verweis im Fliesstext -- kleine Schrift, kein Rahmen,
keine Flaeche. Neben der fetten Ueberschrift "Heute" verschwand er,
obwohl er die einzige Handlung in dieser Zeile ist.

  vorher   Text in .78rem, ohne Fassung, rund 70x18 px
  jetzt    105x36 px, eigene Flaeche, farbiger Rahmen, Schimmer

ER TRAEGT DEN KALENDER-TON, nicht das allgemeine Blau. Der Knopf fuehrt
in den Kalender, und die Kachel dort hat genau diese Farbe (Nummer 8,
#c06ad0). Wer ihn sieht, weiss ohne zu lesen, wo er landet -- das ist
mehr wert als jede zusaetzliche Verzierung.

Beim Ueberfahren wandert ein heller Streifen darueber. Derselbe Kniff wie
beim Manager-Stern und aus demselben Grund: Glanz ist etwas, das sich
BEWEGT -- ein Auf- und Abblenden waere ein Pulsieren. Der Streifen liegt
in einem eigenen Element, damit er den Text nicht mitfaerbt, und bei
`prefers-reduced-motion` entfaellt er. Der Knopf bleibt dann trotzdem
auffaellig, er glaenzt nur nicht.

`--f` wird mitgesetzt, damit der Schein beim Ueberfahren aus gate.css
aus derselben Farbe kommt statt aus der Vorgabe.

Nachgemessen am laufenden Browser: 105x36 px, Rahmen rgb(192,106,208) bei
48 % Deckkraft, Schrift 13,12 px / 650.
pruef-start-ansicht EXIT=0, 140 Pruefungen -- diesmal GELESEN, bevor
committet wurde, nicht in derselben Befehlskette daneben.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-08 13:10:16 +02:00
co-authored by Claude Opus 5
parent 80f410f5b8
commit 8b317b23e2
+62 -3
View File
@@ -3798,12 +3798,71 @@ body[data-fremde-sicht="ja"]::after {
.tagesblick__kopf { margin-bottom: 12px; }
/* Der Kalender-Verweis rechts oben. Still, bis man ihn braucht. */
/* DER WEG IN DEN KALENDER IST EIN KNOPF, KEIN NEBENSATZ (08.09.2026).
Filipe, screen33: "der kalender button da in der kachel oben rechts,
der soll viel auffälliger sein und viel krasser und geiler."
Er sah vorher aus wie ein Verweis im Fliesstext -- kleine Schrift,
kein Rahmen, keine Flaeche. Neben der fetten Ueberschrift "Heute"
verschwand er, obwohl er die einzige Handlung in dieser Zeile ist.
Er traegt jetzt den Kalender-Ton (Nummer 8 aus der Palette), und zwar
als Fassung: eigene Flaeche, farbiger Rahmen, ein Schimmer darunter.
Beim Ueberfahren wandert ein heller Streifen darueber -- derselbe
Kniff wie beim Manager-Stern, weil Glanz etwas ist, das sich BEWEGT.
Warum der Kalender-Ton und nicht das allgemeine Blau: Der Knopf fuehrt
in den Kalender, und die Kachel dort traegt genau diese Farbe. Wer
ihn sieht, weiss ohne zu lesen, wo er landet.
`--f` wird mitgesetzt, damit der Schein beim Ueberfahren (gate.css)
aus derselben Farbe kommt und nicht aus der Vorgabe. */
.tagesblick__mehr {
display: inline-flex; align-items: center; gap: 5px;
font-size: .78rem;
--f: var(--ton-kalender, #c06ad0);
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 13px;
font-size: .82rem; font-weight: 650; letter-spacing: .01em;
text-decoration: none;
color: color-mix(in srgb, var(--f) 30%, #f2f7fd);
background: linear-gradient(180deg,
color-mix(in srgb, var(--f) 17%, transparent),
color-mix(in srgb, var(--f) 7%, transparent));
border: 1px solid color-mix(in srgb, var(--f) 48%, transparent);
border-radius: 999px;
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--f) 30%, transparent),
0 3px 14px -8px var(--f);
transition: color var(--tempo), border-color var(--tempo),
background var(--tempo), box-shadow var(--tempo);
}
.tagesblick__mehr-pfeil { width: 14px; height: 14px; }
.tagesblick__mehr:hover {
color: #fff;
border-color: color-mix(in srgb, var(--f) 78%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--f) 45%, transparent),
0 6px 20px -8px var(--f);
}
/* Der Streifen, der beim Ueberfahren darueberwandert. Er liegt in einem
eigenen Element, damit er den Text nicht mitfaerbt. */
.tagesblick__mehr::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 38%,
rgba(255, 255, 255, .22) 50%, transparent 62%);
transform: translateX(-130%);
transition: transform .55s cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
}
.tagesblick__mehr:hover::after { transform: translateX(130%); }
/* Hausregel: Wer weniger Bewegung eingestellt hat, bekommt keinen
Streifen -- der Knopf bleibt trotzdem auffaellig, er glaenzt nur
nicht. */
@media (prefers-reduced-motion: reduce) {
.tagesblick__mehr::after { display: none; }
}
.tagesblick__mehr-pfeil { width: 14px; height: 14px; transition: transform var(--tempo); }
.tagesblick__mehr:hover .tagesblick__mehr-pfeil { transform: translateX(2px); }
/* Der Satz, wenn eine Hälfte nichts zu zeigen hat. Er steht in der