diff --git a/workspace/assets/css/kalender.css b/workspace/assets/css/kalender.css
index c7126326..7f311063 100644
--- a/workspace/assets/css/kalender.css
+++ b/workspace/assets/css/kalender.css
@@ -423,46 +423,129 @@
}
/* ---------- 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 auto;
- align-items: center; gap: 12px;
- padding: 9px 12px 9px 14px;
- border-radius: 8px;
- border: 1px solid var(--rand);
+ 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) 8%, transparent), transparent 50%),
- var(--flaeche);
+ 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: 6px; bottom: 6px; width: 3px;
- border-radius: 0 3px 3px 0;
- background: var(--zfarbe);
+ 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 {
- font-size: .82rem; font-weight: 650; color: var(--zfarbe);
+ grid-column: 1;
+ font-size: 1.06rem; font-weight: 700; color: var(--zfarbe);
font-variant-numeric: tabular-nums;
- min-width: 5.5ch;
+ letter-spacing: -.01em;
+ white-space: nowrap;
}
-.k-zeile__titel { color: var(--text); min-width: 0; }
-.k-zeile__knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.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) 32%, transparent);
+ 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: .68rem; letter-spacing: .08em; text-transform: uppercase;
+ font-size: .66rem; font-weight: 700;
+ letter-spacing: .08em; text-transform: uppercase;
+ white-space: nowrap;
}
-.k-zeile__zusatz {
- grid-column: 1 / -1;
- display: flex; flex-wrap: wrap; gap: 4px 10px;
- font-size: .78rem; color: var(--text-leise);
+
+@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; }
}
-.k-zeile__zusatz a { color: var(--akzent); }
+@media (prefers-reduced-motion: reduce) { .k-zeile { transition: none; } }
/* ---------- Zeitstrahl ---------------------------------------------------
Sechs Wochen auf einer Achse. Die Höhe eines Strichs ist die Menge
diff --git a/workspace/assets/js/kalender.js b/workspace/assets/js/kalender.js
index b4cc4bb3..9fd6a469 100644
--- a/workspace/assets/js/kalender.js
+++ b/workspace/assets/js/kalender.js
@@ -927,8 +927,16 @@
if (e.serie_id) titel.append(wiederholZeichen());
k.append(titel);
+ /* DIE ART GEHOERT ZUM TITEL, NICHT ZU DEN KNOEPFEN (07.09.2026).
+
+ Sie stand bisher als erstes Element in der Knopfreihe -- und sah
+ damit aus wie ein Knopf, der nicht reagiert. Sie ist aber eine
+ ANGABE ueber den Termin ("das ist ein Termin, kein Call"), genau
+ wie Uhrzeit und Titel. Jetzt steht sie neben dem Titel, und die
+ Knopfreihe enthaelt nur noch Dinge, die etwas tun. */
+ titel.append(el('span', 'k-zeile__art', ARTNAME[e.art] || e.art));
+
const rechts = el('div', 'k-zeile__knoepfe');
- rechts.append(el('span', 'k-zeile__art', ARTNAME[e.art] || e.art));
if (e.art === 'frist') {
const a = el('a', 'schritt', 'zur Aufgabe');
@@ -977,8 +985,17 @@
}));
}
}
- k.append(rechts);
+ /* DIE NEBENDATEN VOR DEN KNOEPFEN (07.09.2026).
+ Im Raster bestimmt die Reihenfolge im Dokument, welche Zeile ein
+ Feld bekommt. Die Knopfreihe stand hier vorher VOR den
+ Nebendaten -- und landete damit zwischen Titel und "30 Min ·
+ TikTok". Im Bildschirmfoto stand die Beschreibung unter den
+ Knoepfen, als gehoerte sie zu ihnen.
+
+ Reihenfolge im Dokument statt `order` im Stil: Sie gilt auch fuer
+ Vorleseprogramme und die Tastatur -- `order` verschiebt nur das
+ Bild und laesst beide beim alten Weg. */
if (e.zusatz || e.beschreibung) {
const z = el('div', 'k-zeile__zusatz');
if (e.ort && /^https?:\/\//i.test(e.ort)) {
@@ -995,6 +1012,7 @@
if (e.beschreibung) z.append(el('span', null, e.beschreibung));
k.append(z);
}
+ k.append(rechts);
return k;
}
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 48efea5e..09ddf131 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -9,10 +9,10 @@
-
-
-
-
+
+
+
+
@@ -212,10 +212,10 @@
-
-
-
-
-
+
+
+
+
+