/* =====================================================================
bmsw_lp-woche.css — Wochenansicht
MODUL. Benutzt von: Klassenportal (klasse-*.html) und LP-Startseite
(lp-*.html). Setzt bmsw_lp-base.css voraus (Farben).
Beim Aendern die Versionsnummer im zentriert seinen Inhalt senkrecht - der Text schwebte in der
Mitte des Blocks (Marc, 18.09.2026). Als Spalte von oben gestapelt steht
er buendig oben, der Block fuellt trotzdem seine ganze Zeit aus. */
/* Farbe aus dem BMSW-CD: kraeftig als Seitenlinie, sehr hell als Flaeche
(Marc, 20.09.2026: «alles heller»). 5 % reichen, um die Faecher zu
unterscheiden, ohne dass das Raster bunt wird. */
background: color-mix(in srgb, var(--f, #A5282E) calc(var(--deck, 5) * 1%), var(--card));
border: 1px solid var(--rule-light);
border-left-width: 3px; border-left-style: solid; border-left-color: var(--f, var(--rule));
border-radius: 2px; padding: 2px 5px; font-size:0.875rem; line-height: 1.3;
z-index: 1;
}
/* Nur wo der Text wirklich nicht hineinpasst, blendet er unten aus. Die
Klasse setzt das Skript nach dem Messen. */
.woche-termin.ueberlauf {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 10px), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - 10px), transparent);
}
/* EINE Schriftgroesse fuer alle Bloecke und alle Zeilen (Marc, 18.09.2026:
«unterschiedliche Schriftgroessen will ich nicht»). Die Stufen nach
Blockhoehe regeln nur noch, WAS darin steht: im engen Block (Einzellektion)
stehen Zeit, Zimmer, Klasse und Kuerzel in EINER fliessenden Zeile und
brechen nur um, wenn die Spalte zu schmal ist. */
/* Schrift im Block (Marc, 18.09.2026): GLEICHE Elemente sind ueberall gleich
gross - kein Titel mit 12 px am Montag und 13 px am Dienstag. Zwischen den
Elementen gibt es eine feste Rangordnung:
Zeit und Zimmer klein (Zimmer fett)
Klasse · Kuerzel gross fett
Thema klein
Muss es enger werden, schrumpft das GANZE Raster um denselben Faktor
(--wt, vom Skript nach Spaltenbreite gesetzt) - nie ein einzelner Block. */
.woche-termin .woche-zeit { font-size: calc(0.75rem * var(--wt, 1)); }
.woche-termin .woche-fach { font-size: calc(0.8125rem * var(--wt, 1)); }
.woche-termin .woche-thema { font-size: calc(0.75rem * var(--wt, 1)); }
.woche-termin { padding: 2px 5px; }
.woche-termin.stufe-eng { padding: 1px 5px; }
.woche-raum { margin-left: 5px; }
.woche-zeit { display: block; color: var(--muted); font-size:0.875rem; }
/* Klasse und Fachkuerzel - die eine Zeile, die immer lesbar bleiben muss.
Darum nicht umbrechen und im Zweifel mit Auslassungspunkten enden. */
.woche-fach { display: block; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.woche-thema { display: block; color: var(--fg); }
.woche-ganztags {
background: var(--bg-soft); border-left: 3px solid var(--rule);
font-size:0.875rem; padding: 2px 4px; margin: 2px; border-radius: 2px;
position: relative; z-index: 2;
}
/* ---------- Merkzeichen im Termin ----------
Buchstabe UND Farbe, nie Farbe allein: wer sie nicht unterscheidet, liest
A / ! / P und findet dieselbe Angabe ausgeschrieben im Detailfeld. */
.woche-zeichen {
/* min-width statt width: 'AN' traegt zwei Zeichen und macht aus dem
Quadrat eine schmale Pille - gleiche Hoehe, etwas breiter. */
display: inline-block; min-width: 14px; height: 14px; line-height: 14px;
padding: 0 2px;
text-align: center; border-radius: 3px; font-size:0.8125rem; font-weight: 900;
margin-left: 4px; vertical-align: 1px;
border: 1px solid;
}
/* Hell hinterlegt, nicht gefuellt: die Kachel traegt schon Zeit, Fach und
Thema - ein voller Farbblock daneben zieht mehr Blick auf sich als die
Lektion selbst. Buchstabe UND Farbe, nie Farbe allein. */
/* ROT HEISST BENOTET. AN und P teilen sich darum die Farbe; die Buchstaben
trennen sie - das haelt auch den Graustufendruck aus. */
.z-H { background:#e8f4f4; border-color:#00797B; color:#005557; } /* Hausaufgabe */
.z-A { background:#fff8e1; border-color:#D69D00; color:#6b5200; } /* Abgabe */
.z-AN { background:#fdf0f0; border-color:#A5282E; color:#7a2020; } /* Abgabe mit Note */
.z-P { background:#fdf0f0; border-color:#A5282E; color:#7a2020; } /* LNW vor Ort */
/* ---------- Termin als Knopf ----------
Antippen statt nur Überfahren - auf dem Telefon gibt es kein Hover, und
dort ist die Spalte am schmalsten. bringt Tastaturbedienung mit. */
/* display:flex HIER und nicht weiter oben: diese Regel ist spezifischer
(Element + Klasse) und setzte bis zum 18.09.2026 "display:block" - damit
zentrierte der Knopf seinen Inhalt senkrecht, und der Text schwebte in der
Mitte des Blocks. Als Spalte ab oben gestapelt steht er buendig oben. */
button.woche-termin {
font: inherit; font-size: calc(0.8125rem * var(--wt, 1)); line-height: 1.25;
text-align: left; cursor: pointer;
display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
-webkit-appearance: none; appearance: none;
}
/* Einzellektion: Zeit, Zimmer, Klasse und Kuerzel in einer Zeile, die nur
umbricht, wenn die Spalte zu schmal ist - ebenfalls buendig oben. */
button.woche-termin.stufe-eng {
flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: baseline;
column-gap: 5px;
}
button.woche-termin.hat-mehr { box-shadow: inset -3px 0 0 -1px #e4e4e4; }
button.woche-termin.offen {
border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
button.woche-termin:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* ---------- Detailfeld unter dem Raster ----------
Bewusst kein schwebendes Kästchen: in einem seitlich schiebbaren Feld
müsste es sich ständig neu ausrichten und wäre auf dem Telefon breiter
als der Bildschirm. */
/* Gerundet wie jeder andere Kasten auf diesen Seiten - Karte, Tabellenrahmen,
Aktionsfeld (Marc, 21.09.2026: «muessen auch das uebliche leicht gerundete
Design haben ---> Konsistenz!»). Der farbige Streifen links behaelt seine
Kante nicht: er folgt der Rundung mit, sonst steht eine gerade Linie an
einer runden Ecke. */
.woche-detail {
position: relative; margin-top: 10px; padding: 12px 34px 12px 14px;
background: var(--bg-soft); border-left: 3px solid var(--rule); font-size:0.9375rem;
line-height: 1.5; border-radius: var(--radius); overflow: hidden;
}
.woche-zu {
position: absolute; top: 6px; right: 8px; background: none; border: none;
font-size:1.4375rem; line-height: 1; color: var(--muted); cursor: pointer;
padding: 4px 6px;
}
.woche-zu:hover { color: var(--accent); }
.woche-d-kopf { margin-bottom: 4px; display: flex; align-items: center;
flex-wrap: wrap; gap: 4px 0; }
.woche-d-fach {
font-weight: bold; border-left: 3px solid var(--rule); padding-left: 7px;
margin-right: 8px;
}
.woche-d-zeit { color: var(--muted); font-size:0.875rem; }
.woche-d-thema { font-weight: bold; margin-bottom: 8px; }
.woche-d-feld { margin-bottom: 6px; }
.woche-d-name {
display: block; font-family: "Arial Black", Arial, sans-serif; font-weight: 900;
font-size:0.875rem; text-transform: uppercase; letter-spacing: .03em;
color: var(--muted);
}
/* overflow-wrap auf dem GANZEN Feld, nicht nur auf dem : white-space
pre-wrap bricht nur an Leerzeichen, und eine lange Adresse macht den Kasten
sonst breiter als das Fenster. Weil html und body overflow-x:hidden tragen,
wuerde der Ueberhang am Rand abgeschnitten statt rollbar. Es trifft auch
NICHT verlinkte Adressen: escLinks() verlangt http(s):// oder @, ein
schemenloser Pfad wie "olat.bms-w.ch/kurs/12" faellt durch - und genau der
entsteht, wenn render_plain() in ics_util.py auf den letzten Teil
zurueckfaellt. Gefunden bei der Gegenpruefung am 14.08.2026. */
.woche-d-wert { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Adressen im Kalendertext sind anklickbar (escLinks() in bmsw_lp-woche.js). */
.woche-d-wert a { color: var(--accent); }
.woche-d-wert a:hover, .woche-d-wert a:focus-visible { text-decoration: none; }
.woche-d-nichts { color: var(--muted); margin: 0; }
/* --------------------------------------------------------------------------
«Zur Seite →» im Detailkasten (08.09.2026). Als KNOPF und nicht als
Textlink: die Flaeche muss auch mit dem Daumen zu treffen sein. Er steht
zuletzt im Kasten und rechts - dort wird eine Handlung erwartet, und er
zerschneidet den Text nicht.
-------------------------------------------------------------------------- */
/* «Zur Seite →» in der Kopfzeile des Kastens (12.09.2026: eine eigene Zeile
nahm zu viel Platz weg). Klein, rechtsbuendig, links vom Kreuz. */
.woche-d-seite{
/* margin-right: gemessen 1 px bis zum Schliessen-Kreuz - das klebte. */
margin-left:auto; margin-right:6px; display:inline-block; padding:3px 9px; border-radius:4px;
background:var(--accent,#A5282E); color:#fff; text-decoration:none;
font-size:0.8125rem; font-weight:700; line-height:1.3; white-space:nowrap;
}
.woche-d-seite:hover,.woche-d-seite:focus{ background:#8d2226; color:#fff; }
/* «Zur Seite →» DIREKT AM KALENDER (12.09.2026, vom Schulserver, A-17).
Ausserhalb des Rasters an den body gehaengt: das Raster ist seitlich
schiebbar und hat overflow, ein Kind darin waere am Rand abgeschnitten.
position:fixed heisst zugleich, dass die Fensterkoordinaten direkt passen. */
.woche-sprung{
position:fixed; z-index:60; display:inline-block;
padding:5px 10px; border-radius:4px;
background:var(--accent,#A5282E); color:#fff; text-decoration:none;
font-size:0.875rem; font-weight:bold; line-height:1.2; white-space:nowrap;
box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.woche-sprung:hover,.woche-sprung:focus{background:#8d2226;color:#fff;}
.woche-sprung[hidden]{display:none;}
/* ---- Zimmer im Block (17.09.2026) ---------------------------------------
Neben der Startzeit, damit der Blick es findet, ohne den Block zu oeffnen. */
.woche-raum { margin-left: 6px; font-weight: 700; color: var(--fg, #222); }
/* Was gezeigt wird - Haken ueber dem Raster (20.09.2026). */
.woche-zeigt { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:0.8125rem; color:var(--muted); margin:2px 0 8px; }
.woche-zeigt label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
/* Sperrzeiten: grau, ohne Titel - sie sagen nur "nicht verfuegbar". Sie zaehlen
in «Freie Zeitfenster» als besetzt, auch wenn sie hier ausgeblendet sind. */
button.woche-termin.gesperrt {
/* Schraffur aus Token: im Hellen zwei helle Graus, im Dunkeln zwei dunkle.
Vorher standen hier feste Werte - und die Sperrzeit leuchtete als heller
Block aus der dunklen Seite heraus (Marc, 21.09.2026: «etwas
aufdringlich»). */
background: repeating-linear-gradient(135deg,
color-mix(in srgb, var(--fg) 7%, var(--card)) 0 6px,
color-mix(in srgb, var(--fg) 11%, var(--card)) 6px 12px);
border-left-color: var(--muted); color: var(--muted);
}
/* ---------- Dunkeldesign ----------
Die Zeichen im Raster (Hausaufgabe, Abgabe, Leistungsnachweis) tragen
dieselben CD-Toene, in den Kartenton gemischt statt in Weiss. */
@media (prefers-color-scheme: dark) { :root[data-theme="geraet"] {
--w-petrol:#7CC6C7; --w-gold:#E8B93A; --w-rot:#F09A9E;
} }
:root[data-theme="dunkel"] { --w-petrol:#7CC6C7; --w-gold:#E8B93A; --w-rot:#F09A9E; }
.z-H { background:color-mix(in srgb, #00797B 18%, var(--card)); color:var(--w-petrol,#005557); }
.z-A { background:color-mix(in srgb, #D69D00 20%, var(--card)); color:var(--w-gold,#6b5200); }
.z-AN, .z-P { background:color-mix(in srgb, #A5282E 20%, var(--card)); color:var(--w-rot,#7a2020); }
.woche-tag.ist-heute .woche-tagkopf { background:color-mix(in srgb, #A5282E 10%, var(--card)); }
/* Der Farbbalken traegt die Fachfarbe aus dem CD. Auf dunklem Grund
verschwinden die dunklen Toene (Anthrazit fuer Englisch, Dunkelblau fuer
die BMA) - sie liegen fast auf dem Hintergrund. Darum hier derselbe Ton,
zu Weiss hin aufgehellt: gleiche Farbe, sichtbarer Balken. */
@media (prefers-color-scheme: dark) { :root[data-theme="geraet"] .woche-termin {
border-left-color: color-mix(in srgb, var(--f, var(--rule)) 62%, #fff);
} }
:root[data-theme="dunkel"] .woche-termin {
border-left-color: color-mix(in srgb, var(--f, var(--rule)) 62%, #fff);
}
/* ---------- Zeichen mit Erklaerung ----------
Marc, 21.09.2026: «die Symbole sollten, wenn ich darueber gehe, ein
zusaetzliches Erklaerungsfeld oeffnen.» Eigene Flaeche statt title: der
native Tooltip kommt traege und im eingebetteten Rahmen oft gar nicht. */
.woche-zeichen { position: relative; }
.wz-hinweis {
position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
z-index: 40; display: none; width: max-content; max-width: 15rem;
padding: 6px 9px; border-radius: var(--radius);
background: var(--fg); color: var(--bg);
font-size: 0.75rem; font-weight: 400; line-height: 1.35; text-align: left;
letter-spacing: 0; text-transform: none; white-space: normal;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.woche-zeichen:hover .wz-hinweis { display: block; }
/* Auf dem Telefon gibt es kein Darueberfahren - dort fuehrt der Tipp auf den
Block ohnehin ins Detailfeld, wo alles ausgeschrieben steht. */
/* Auf dem Telefon gibt es kein Darueberfahren. Die Zeichen stecken in einem
Knopf - eine Flaeche, die beim Tippen aufgeht, laege dem Tipp im Weg und
verdeckte die Nachbarlektion. Die Bedeutung steht darum EINEN TIPP entfernt
im Detailfeld unter dem Raster, dort ausgeschrieben und in denselben Farben
(Marc, 21.09.2026: «wie sehe ich diese auf dem Handy?»). */
@media (hover: none) { .wz-hinweis { display: none !important; } }
.woche-d-verborgen { margin: 4px 0 0; padding: 4px 8px; border-radius: var(--radius);
background: var(--bg-soft); color: var(--muted); font-size: 0.875rem; }
/* Ausgeblendete Lektion: grau wie die Sperrzeit, nicht bunt - sie sagt
«nicht sichtbar», nicht «wichtig». */
/* Das Zeichen fuer «ausgeblendet» heisst seit dem 21.09.2026 z-aus und traegt
das durchgestrichene Auge aus bmsw_lp-base.css - dasselbe wie im Editor. */
.woche-zeichen.z-aus { background: var(--bg-soft); border-color: var(--muted); color: var(--muted);
display: inline-flex; align-items: center; justify-content: center; }
/* ---------- Detailfeld: dieselben Marken wie im «Anstehendes» ----------
Gleiches Wort, gleiche Farbe, gleiche Form (Marc, 21.09.2026). Die Werte
sind zeichengleich mit bmsw_lp-anstehendes.css - wer dort etwas aendert,
aendert es hier mit. */
.woche-d-zeile { display: block; }
.woche-d-zeile + .woche-d-zeile { margin-top: 2px; }
.woche-d-zeile[class*="wd-"] {
padding: 2px 0 2px 7px; border-left: 3px solid transparent;
}
.wd-marke {
display: inline-block; margin-right: 6px;
font-weight: 700; font-size: 0.6875rem; letter-spacing: .03em; text-transform: uppercase;
padding: 1px 6px; border-radius: 3px; white-space: nowrap;
background: var(--bg-soft); color: var(--muted);
}
.woche-d-zeile.wd-hausaufgabe { border-left-color: var(--muted); }
.woche-d-zeile.wd-abgabe { border-left-color: #D69D00; }
.woche-d-zeile.wd-abgabe .wd-marke { background: color-mix(in srgb, #D69D00 22%, var(--card)); color: var(--m-gold, #8a6400); }
.woche-d-zeile.wd-abgabenote { border-left-color: #A5282E; }
.woche-d-zeile.wd-abgabenote .wd-marke { background: color-mix(in srgb, #A5282E 22%, var(--card)); color: var(--m-rot, #A5282E); }
.woche-d-zeile.wd-lnw { border-left-color: #7A0049; }
.woche-d-zeile.wd-lnw .wd-marke { background: color-mix(in srgb, #7A0049 26%, var(--card)); color: var(--m-kirsch, #7A0049); }
/* =====================================================================
DIE VIER ANSICHTEN DES KALENDERS (21.09.2026)
Reiterleiste oben (Form aus bmsw_lp-base.css), darunter je nach Wahl das
Raster, eine Liste oder ein Monatsblatt.
===================================================================== */
.kal-reiter { margin-bottom: 10px; }
/* ---------- Liste ----------
Dieselbe Zeilenform wie im «Anstehendes»: ein Farbbalken links, Zeit,
Sache, Ort. Wer beides benutzt, lernt es einmal. */
/* EIN KLAR BEGRENZTES FENSTER (Marc, 22.09.2026: «da sollte alles erreichbar
sein, aber dafuer in einem klar beschraenkten Fenster, wo man im Fenster noch
scrollen kann»). Vierzehn Tage Unterricht sind ueber fuenfzig Zeilen - ohne
Grenze schiebt die Liste alles unter ihr aus dem Bild. Gekuerzt wird nichts:
die Liste bleibt vollstaendig, sie rollt nur in sich. */
.kal-liste {
list-style: none; margin: 0; padding: 0 10px 8px;
max-height: min(58vh, 560px); overflow-y: auto; overscroll-behavior: contain;
border: 1px solid var(--rule-light); border-radius: var(--radius);
background: var(--card);
}
.kal-tag {
font-weight: 700; font-size: 0.8125rem; letter-spacing: .02em;
text-transform: uppercase; color: var(--muted); margin: 14px 0 3px;
}
/* Der Tagestitel bleibt beim Rollen oben stehen - sonst weiss man nach drei
Zeilen nicht mehr, welchen Tag man liest. */
.kal-liste > .kal-tag {
position: sticky; top: 0; z-index: 2;
margin: 10px 0 3px; padding: 7px 0 3px; background: var(--card);
}
.kal-tag:first-child { margin-top: 0; }
.kal-tag.ist-heute { color: var(--marker); }
.kal-zeile {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
padding: 5px 10px 5px 8px; border-top: 1px solid var(--rule-light);
border-left: 3px solid var(--f, var(--rule-light));
background: color-mix(in srgb, var(--f, transparent) calc(var(--deck, 5) * 1%), var(--card));
font-size: 0.875rem;
}
.kal-zeile.ist-eigen { border-left-style: solid; }
.kal-zeile.ist-gesperrt { color: var(--muted); }
.kal-zeit { color: var(--muted); font-size: 0.8125rem; min-width: 92px; white-space: nowrap; }
.kal-was { font-weight: 700; }
.kal-klasse { font-weight: 400; color: var(--muted); margin-left: 6px; }
.kal-ort { color: var(--muted); font-size: 0.8125rem; }
/* ---------- Monat ----------
Ueberblick, keine Einzelheiten: je Eintrag ein Punkt, hoechstens vier.
Ein Klick fuehrt in den Tag. */
/* minmax(0,1fr) statt 1fr: sonst darf eine Spalte nicht unter die Breite
ihres Inhalts schrumpfen, und auf dem Telefon stand der Sonntag ausserhalb
des Fensters (gemessen bei 420px am 21.09.2026). */
.kal-monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.kal-mkopf {
font-size: 0.75rem; font-weight: 700; letter-spacing: .02em; color: var(--muted);
text-align: center; padding: 2px 0 4px;
}
/* EINE WOCHE ist ein eigenes Raster mit sieben Spalten und drei Arten von
Zeilen (21.09.2026, Vorlage: der Kalender von Apple, den Marc gezeigt hat):
Zeile 1 die sieben Zahlen
Zeile 2 … 1+N je eine Spur fuer mehrtaegige Balken
letzte Zeile die Liste der eintaegigen Eintraege je Tag
Die FLAECHE eines Tages liegt darunter und reicht ueber alle Zeilen - nur so
kann ein Balken ueber mehrere Tage laufen UND jeder Tag trotzdem seinen
eigenen Rahmen, seine Rundung und seine graue Toenung behalten. */
.kal-mwoche {
/* Die Woche ist im Monatsraster EIN Feld, das alle sieben Spalten einnimmt -
darin beginnt ein neues Raster mit denselben sieben Spalten. Ohne diese
Zeile stand jede Woche in einer einzigen Spalte und der Monat lief als
ein langes Band nach rechts (gesehen am 21.09.2026). */
grid-column: 1 / -1;
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
grid-auto-rows: min-content; align-items: start;
}
.kal-mflaeche {
/* align-self:stretch ist noetig, weil die Woche ihre Zeilen mit
align-items:start setzt - ohne das blieb die Flaeche 96px hoch, und die
Eintraege hingen unterhalb ihres Rahmens (gesehen am 21.09.2026). */
/* span 20 statt "1 / -1": -1 zeigt auf die letzte Zeile des AUSDRUECKLICHEN
Rasters, und dieses hier hat nur eingefuegte Zeilen - die Flaeche deckte
darum bloss die erste ab, und die Eintraege standen unterhalb ihres
Rahmens (gemessen am 21.09.2026). Zwanzig ist mehr, als je gebraucht wird;
Zeilen ohne Inhalt sind 0 Pixel hoch. */
grid-row: 1 / span 20; align-self: stretch;
min-height: 96px; padding: 0; cursor: pointer; font: inherit;
background: var(--card); border: 1px solid var(--rule-light); border-radius: var(--radius);
}
.kal-mflaeche:hover { border-color: var(--accent); }
.kal-mflaeche.ist-heute { border-color: var(--marker); border-width: 2px; }
/* Alles, was auf der Flaeche liegt, laesst den Klick zu ihr durch - sonst
traefe ein Klick auf einen Eintrag ins Leere statt in den Tag. */
.kal-mzahl, .kal-mliste { grid-row: auto; pointer-events: none; z-index: 1; }
.kal-mzahl { grid-row: 1; padding: 4px 5px 0; }
.kal-mliste { padding: 0 4px 5px; }
/* DER BALKEN: laeuft ueber so viele Spalten, wie der Termin Tage dauert.
Gerundet nur dort, wo er wirklich anfaengt bzw. aufhoert - laeuft er in die
naechste Woche weiter, bleibt die Kante gerade, und man sieht die
Fortsetzung. */
.kal-mbalken {
z-index: 2; margin: 0 1px; padding: 1px 6px; min-width: 0;
font-size: 0.6875rem; line-height: 1.35; font-weight: 700;
color: var(--fg); background: color-mix(in srgb, var(--f, var(--muted)) 34%, var(--card));
border-left: 3px solid transparent; border-radius: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kal-mbalken.hat-anfang { border-top-left-radius: 3px; border-bottom-left-radius: 3px;
border-left-color: var(--f, var(--muted)); }
.kal-mbalken.hat-ende { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.kal-mbalken.ist-gesperrt { font-weight: 400; color: var(--muted);
background: repeating-linear-gradient(135deg, var(--bg-soft) 0 5px, var(--card) 5px 10px); }
/* TAGE DES NACHBARMONATS: leicht grau hinterlegt statt weiss, die Zahl
gedaempft (Marc, 21.09.2026: «ein bisschen leicht grau hinterlegt waere
vielleicht das Beste ... und natuerlich eine passende Alternative fuer den
Dunkelmodus»). color-mix statt fester Werte: im Hellen wird die Karte eine
Spur dunkler, im Dunkeln eine Spur heller - dieselbe Regel, beide Male
richtig herum. */
.kal-mflaeche.ist-fremd { background: color-mix(in srgb, var(--fg) 7%, var(--card));
border-color: transparent; }
.kal-mzahl { font-size: 0.8125rem; color: var(--muted); }
/* EINTRAEGE STATT PUNKTE (Marc, 21.09.2026: «das sagt noch zu wenig»). Ein
Punkt sagt nur DASS etwas ist; Zeit und Klasse sagen WAS. Die Farbe bleibt
als Streifen links - sie ordnet dem Fach zu, wie ueberall sonst. */
.kal-mliste { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kal-meintrag {
display: flex; gap: 4px; align-items: baseline; min-width: 0;
font-size: 0.6875rem; line-height: 1.25; padding: 1px 3px 1px 4px;
border-left: 3px solid var(--f, var(--muted)); border-radius: 2px;
background: color-mix(in srgb, var(--f, var(--muted)) 12%, var(--card));
}
.kal-meintrag.ist-gesperrt { border-left-style: dotted; }
.kal-mzeit { color: var(--muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.kal-mwas { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-mmehr { font-size: 0.6875rem; color: var(--muted); padding-left: 4px; }
/* Schmale Schirme: die Zelle traegt keine Woerter mehr, nur noch die Farben.
Unter 620px ist eine Spalte rund 45px breit - dort waere jede Beschriftung
abgeschnitten, und Abgeschnittenes ist schlechter als gar nichts. */
@media (max-width: 620px) {
/* Auf dem Telefon ist die Liste die Vorgabeansicht - sie darf mehr Platz
nehmen. Und sie gibt das Rollen wieder an die Seite ab: sonst bleibt der
Daumen am Ende der Liste haengen, statt weiterzublaettern. */
.kal-liste { max-height: 72vh; overscroll-behavior: auto; }
.kal-monat, .kal-mwoche { gap: 1px; }
.kal-mflaeche { min-height: 58px; }
.kal-mzahl { padding: 2px 3px 0; font-size: 0.75rem; }
.kal-mliste { padding: 0 2px 3px; }
.kal-mbalken { font-size: 0; padding: 0; height: 5px; margin: 0; }
.kal-mbalken .woche-zeichen { display: none; }
.kal-meintrag { padding: 0; border-left-width: 0; height: 5px; border-radius: 3px;
background: var(--f, var(--muted)); }
.kal-mzeit, .kal-mwas, .kal-mmehr { display: none; }
}
/* ---------- Detailfeld daneben ----------
Marc, 21.09.2026: «dass die Infos zu den einzelnen Bloecken nicht unten,
sondern nebenan erscheinen, damit die Ansicht besser genutzt wird» - zuerst
nur fuer die Tagesansicht, seit dem 22.09.2026 auch fuer die Woche: «da
koennte man btw auch die Details anfuegen, auch bei Wochenansicht, wenn
genuegend Platz da ist».
ENTSCHEIDEND IST DER KASTEN, NICHT DAS FENSTER. Eine Fensterabfrage waere
hier falsch: auf der Startseite steht der Kalender ab 1400px in der HALBEN
Breite neben dem «Anstehendes» - das Fenster ist dann breit, der Kalender
nicht. Die Container-Abfrage misst das, was wirklich zaehlt.
Kennt ein Browser sie nicht, bleibt das Detailfeld unten - kein Verlust,
nur die aeltere Anordnung. */
/* DAS RASTER GEHT VOR. Das Detailfeld stellt sich nur daneben, wenn danach
noch Platz ist - sonst rutscht es darunter. Vorher entschied das eine feste
Schwelle (Container 900px): bei 900px bekam das Raster 564px, brauchte aber
604px fuer fuenf Tage, und der Freitag wurde abgeschnitten. Marc,
22.09.2026, mit Bild: «die Ansicht des Kalenders sollte nie fuer den Platz
rechts leiden».
Jetzt entscheidet der Umbruch: Das Raster traegt als Grundbreite, was es
WIRKLICH braucht (--raster-min, vom Skript je nach Zahl der Tage gesetzt),
das Detailfeld 320px. Passen beide nicht nebeneinander, bricht das Feld um -
ohne feste Zahl, und bei einem Tag genauso richtig wie bei sechs.
Ist das Feld zugeklappt (hidden), ist es kein Flex-Element und das Raster
hat die ganze Breite. */
.kal-tagansicht {
display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
}
/* Der grosse Wachstumsfaktor am Raster sorgt fuer beides mit EINER Regel:
steht das Feld daneben, bekommt das Raster den ganzen Rest; ist das Feld
umgebrochen und allein auf seiner Zeile, waechst es dort auf die volle
Breite - ohne zweite Regel und ohne Messung. */
.kal-tagansicht > .woche-raster {
flex: 100 1 var(--raster-min, 600px); min-width: 0;
}
.kal-tagansicht > .woche-detail {
flex: 1 1 320px; max-width: 100%; margin-top: 0; position: sticky; top: 12px;
}
.kal-neu { font-size: 0.875rem; margin-left: 4px; }
.kal-editor { margin: 0 0 10px; }
.kal-editor[hidden] { display: none; }
.kal-editor .ed-karte { margin: 0; }
/* Zahl und Liste liegen NEBEN der Flaeche im selben Raster, nicht darin -
sie tragen die Kennzeichnung darum selbst. */
.kal-mzahl.ist-heute { color: var(--marker); font-weight: 700; }
.kal-mzahl.ist-fremd, .kal-mliste.ist-fremd { opacity: .55; }
/* Die Zeichen im Monat sind kleiner als im Wochenraster - in einer Zelle von
140px stehen sie neben Zeit und Klasse. */
.kal-meintrag .woche-zeichen, .kal-mbalken .woche-zeichen {
min-width: 12px; height: 12px; line-height: 11px; font-size: 0.5625rem; margin-left: 3px;
}