steht. Wer das Markup zurueckdreht, soll nicht dieselbe Stunde noch einmal suchen. Die negativen Seitenraender heben das Kartenpolster auf, damit der Trennstrich ueber die volle Breite laeuft statt vor dem Rand zu enden. */ .u-plan-tat { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; text-align: left; margin: auto -22px 0; padding: 15px 22px 0; border-top: 1px solid var(--border); } .u-plan-tat > form { display: contents; } /* das Formular ist kein eigener Knopf */ .u-plan-tat .btn { flex: 0 0 auto; } .u-gefahr:hover, .u-gefahr:focus-visible { border-color: rgba(239,68,68,.5); color: #f87171; } .u-plan-schule { overflow-wrap: anywhere; } .u-plan-stand { font-variant-numeric: tabular-nums; } .u-leer { text-align: center; padding: 48px 28px; } .u-leer h2 { font-size: 1.2rem; margin-bottom: 8px; } .u-leer p { color: var(--muted); max-width: 46ch; margin: 0 auto 18px; } /* Änderungen — die Art steht links als farbiger Strich, damit man die Liste überfliegen kann. */ .u-aend { list-style: none; display: grid; gap: 8px; } .u-aend li { padding: 12px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); border-left-width: 3px; } .u-aend-ausfall { border-left-color: #ef4444; } .u-aend-vertretung { border-left-color: #f59e0b; } .u-aend-raum { border-left-color: var(--accent2); } .u-aend-zeit { border-left-color: var(--accent3); } .u-aend-neu { border-left-color: #22c55e; } .u-aend-entfaellt { border-left-color: var(--muted); } .u-aend-text { display: block; font-size: .95rem; } .u-aend-meta { display: block; color: var(--muted); font-size: .78rem; margin-top: 4px; } /* Der Assistent */ .u-wege { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; } .u-weg { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); text-decoration: none; font-size: .9rem; } .u-weg-an { border-color: var(--accent); color: var(--text); background: rgba(124,58,237,.12); } .u-form { display: grid; gap: 16px; } .u-form-klein { display: grid; gap: 12px; max-width: 420px; margin-top: 14px; } .u-zeile { display: flex; gap: 8px; flex-wrap: wrap; } .u-zeile input[type=search] { flex: 1 1 260px; } .u-feld { display: grid; gap: 6px; } .u-feld > span { font-size: .85rem; color: var(--muted); } .u-feld small { font-size: .78rem; color: var(--muted); } .u-form input, .u-form select, .u-form textarea, .u-form-klein input, .u-form-klein select { width: 100%; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: .95rem; } .u-form textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; } .u-liste { list-style: none; display: grid; gap: 6px; margin-top: 6px; max-height: 340px; overflow: auto; } .u-treffer-knopf { width: 100%; text-align: left; padding: 12px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); color: var(--text); cursor: pointer; font: inherit; display: grid; gap: 2px; } .u-treffer-knopf:hover { border-color: var(--accent); } .u-treffer-knopf small { color: var(--muted); font-size: .8rem; } .u-gewaehlt { display: flex; gap: 8px; align-items: center; font-size: .95rem; } .u-trenner { border: 0; border-top: 1px solid var(--border); margin: 4px 0; } .u-wahl { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; } .u-wahl input { margin-top: 4px; flex: none; } .u-wahl small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; } .u-zeiten { display: flex; gap: 12px; flex-wrap: wrap; padding-left: 30px; } .u-zeiten .u-feld { max-width: 160px; } .u-zeiten input { padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text); font: inherit; } /* Die Woche */ .u-woche { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .u-tag { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; } .u-tag h3 { font-size: .95rem; margin-bottom: 10px; display: flex; gap: 8px; align-items: baseline; } .u-tag h3 span { color: var(--muted); font-size: .78rem; font-weight: 400; } .u-tag ul { list-style: none; display: grid; gap: 6px; } .u-stunde { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: .88rem; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.03); } .u-nr { color: var(--muted); font-size: .78rem; min-width: 1.6em; } .u-fach { font-weight: 600; } .u-zeit, .u-raum, .u-lehrer { color: var(--muted); font-size: .8rem; } .u-stunde-aus { opacity: .65; } .u-stunde-aus .u-fach { text-decoration: line-through; } .u-aus { font-size: .74rem; color: #fca5a5; } /* Kopf- und Fußbereich */ /* ZWEI MARKEN OBEN LINKS, wie auf der Vidono-Seite: Winku, ein Strich, Nivo. Der Strich ist der Unterschied zu Vidono, wo keiner steht — Faddi hat ihn hier ausdrücklich gewollt. Er trennt zwei Namen, die sonst als einer gelesen werden: "Winku Nivo" liest sich wie ein zusammengesetzter Produktname. */ .u-marke { display: flex; align-items: center; gap: 14px; min-width: 0; } .u-marke .logo { padding-left: 0; } .u-heim { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; position: relative; padding-right: 14px; transition: transform .2s, opacity .2s; } .u-heim::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: var(--border); } .u-heim:hover { transform: translateY(-1px); opacity: .9; } /* Das W trägt die Winku-Farben, das Kalenderblatt die von Nivo — ohne die eigene Regel sähe man .logo-mark-winku nicht an, dass sie überhaupt eine Farbe hat. */ .logo-mark-winku { background: linear-gradient(135deg, var(--accent), var(--accent2)); } @media (max-width: 620px) { /* Auf schmalen Geräten nur die Zeichen: Zwei ausgeschriebene Namen und der Burger passen dort nicht in eine Zeile. */ .u-heim-text { display: none; } .u-heim { padding-right: 12px; gap: 0; } .u-marke { gap: 10px; } } /* site.css bringt "footer" bereits mit (Abstaende, Trennlinie, Farbe). .u-fuss ergaenzt nur, was es dort nicht gibt — der Herkunftssatz. Die Formatierung doppelt zu setzen hiess: Beim naechsten Anstrich der Webseite kommt der Fuss von Nivo nicht mit. */ .u-fuss { text-align: center; } .u-fuss a { color: var(--muted); } .u-fuss a:hover { color: var(--text); } .u-herkunft { max-width: 60ch; margin: 0 auto 12px; font-size: .8rem; opacity: .85; } @media (max-width: 640px) { .u-inhalt { padding: 24px 16px 48px; } .u-kopfzeile { align-items: flex-start; } .u-plaene { grid-template-columns: 1fr; } } .u-qr { border-radius: 12px; background: #fff; padding: 10px; max-width: 100%; height: auto; } /* Eigene offene Tickets — eine Liste, keine Tabelle: drei Angaben je Zeile. */ .u-tickets { list-style: none; display: grid; gap: 8px; } .u-tickets li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); } .u-tickets a { color: var(--text); flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; } .u-tickets a:hover { color: var(--accent); } /* Der Honigtopf muss für Menschen unsichtbar sein, für ein Skript aber ausfüllbar — display:none würde ihn bei manchen Skripten überspringen lassen. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* * DER FUND VOM 26.08., und der Grund, warum er hier steht und nicht in site.css: * * .card in site.css legt ein dekoratives ::before über die ganze Karte (der Lichtschein, der * dem Mauszeiger folgt). Auf der Startseite steht in Karten nur Text — dort fällt das nie auf. * Bei uns liegen EINGABEFELDER UND KNÖPFE darin, und die Schicht liegt darüber: Sie fängt * jeden Klick ab. Ergebnis: Man kann nichts anklicken und in kein Feld tippen, und die Seite * sieht dabei völlig normal aus. * * Behoben wird es hier und nicht in site.css, weil site.css allen Seiten gehört: Dort etwas zu * ändern hieße, die Startseite mitzuverändern, um einen Fehler in Nivo zu beheben. * 1. Die Schicht nimmt keine Klicks mehr an (pointer-events: none) — sie ist Zierde. * 2. Der Inhalt bekommt eine eigene Ebene darüber. * 3. Karten, in denen man etwas eingibt, hüpfen nicht mehr beim Mauskontakt: Ein Feld, das * unter dem Zeiger wegrutscht, trifft man nicht. */ .u-inhalt .card::before { pointer-events: none; } .u-inhalt .card > * { position: relative; z-index: 1; } .u-inhalt .card:hover { transform: none; } /* Dasselbe gilt für die Kartenflächen der Pläne, sobald darin ein Knopf sitzt. */ .u-plan:hover { transform: none; } /* Eingabefelder sollen sich auch anfassen lassen: sichtbarer Rahmen bei Fokus, echte Höhe auf dem Handy (unter 16px zoomt iOS beim Antippen in das Feld hinein). */ .u-form input, .u-form select, .u-form textarea, .u-form-klein input, .u-form-klein select, .u-zeiten input { font-size: 16px; cursor: text; } .u-form select, .u-form-klein select { cursor: pointer; } .u-form input:focus, .u-form select:focus, .u-form textarea:focus, .u-form-klein input:focus, .u-form-klein select:focus, .u-zeiten input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .u-form button, .u-form-klein button, .u-treffer-knopf, .u-wahl { cursor: pointer; } /* * ZWEITER FUND DESSELBEN ABENDS: Die einmalige Sprechblase des Feedback-Knopfes (.fb-tipp) * liegt fest unten links, über allem. Auf den Seiten der Webseite ist dort nichts; auf der * Einstellungsseite von Nivo liegt darunter ein Auswahlknopf — und der ließ sich beim ersten * Besuch zwölf Sekunden lang nicht anklicken. Gemessen im Browser: An seiner Stelle lag * DIV.fb-tipp. * * Die Blase ist eine Auskunft, kein Bedienelement — also nimmt sie keine Klicks mehr an. Ihr * Schließen-Knopf schon, sonst wird man sie nicht mehr los. * * Wieder nur für Nivo-Seiten: feedback.css gehört allen Seiten. */ .u-inhalt ~ .fb-tipp, body > .fb-tipp { pointer-events: none; } body > .fb-tipp .fb-tipp-zu, body > .fb-tipp button { pointer-events: auto; } /* * AUSKLAPPLISTEN. Der Browser malt sie mit den Farben des Systems, nicht mit unseren: Auf einer * dunklen Seite stand deshalb hellgraue Schrift auf weissem Grund — lesbar war nur der Eintrag * unter dem Mauszeiger (gemessen 26.08., siehe Bildschirmfoto). * * color-scheme sagt dem Browser, in welcher Richtung er seine EIGENEN Bedienelemente zeichnen * soll. Das ist der richtige Hebel: Er wirkt auf die aufgeklappte Liste, die zum Betriebssystem * gehoert und die CSS sonst gar nicht erreicht. Die Farben darunter setzen wir zusaetzlich, fuer * die Browser, die die Liste selbst zeichnen. */ .u-inhalt select, .u-inhalt input[type=time], .u-inhalt input[type=date], .k-planwahl select { color-scheme: dark; } .u-inhalt select option, .k-planwahl select option { background: #10162a; color: var(--text); } .u-inhalt select option:checked, .k-planwahl select option:checked { background: var(--accent); color: #fff; } /* ── Das Wochenraster ───────────────────────────────────────────────────────────────────── * * Aufbau wie ein Stundenplan auf Papier: links die Zeitleiste, dann eine Spalte je Tag. Die * Zeilenhöhe richtet sich NICHT nach der Dauer der Stunde — ein Raster mit maßstäblicher Höhe * sieht auf dem Papier gut aus und auf einem Telefon schrecklich. Gleich hohe Zeilen bleiben * lesbar; die Zeit steht ohnehin daneben. */ .u-raster-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .u-raster { position: relative; display: grid; grid-template-columns: 74px repeat(var(--tage, 5), minmax(150px, 1fr)); gap: 4px; min-width: 640px; } .u-kopf { padding: 8px 10px; font-size: .82rem; color: var(--muted); text-align: center; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 3; } .u-kopf b { color: var(--text); font-size: .9rem; } .u-kopf span { display: block; font-size: .72rem; } .u-kopf-zeit { text-align: left; } .u-kopf.u-heute b { color: var(--accent2); } .u-zeit-spalte { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 8px; color: var(--muted); font-size: .7rem; border-right: 1px solid var(--border); } .u-zeit-spalte b { color: var(--text); font-size: .82rem; } .u-pause-zeit { opacity: .5; } .u-zelle { display: grid; gap: 4px; align-content: start; min-height: 58px; background: rgba(255,255,255,.02); border-radius: 10px; padding: 4px; } .u-zelle.u-heute { background: rgba(124,58,237,.07); } .u-raster .u-stunde { display: grid; gap: 1px; padding: 7px 9px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); font-size: .84rem; } .u-raster .u-fach { font-weight: 600; } .u-raster .u-raum, .u-raster .u-lehrer { color: var(--muted); font-size: .74rem; } .u-stunde-ausfall { border-left-color: #ef4444; opacity: .6; } .u-stunde-ausfall .u-fach { text-decoration: line-through; } .u-stunde-vertretung { border-left-color: #f59e0b; } .u-stunde-zusatz { border-left-color: #22c55e; } .u-stunde-pruefung { border-left-color: var(--accent3); } .u-raster .u-aus { font-size: .7rem; color: #fca5a5; } /* Pausen: eine schmale Zeile quer über alle Tage. Sie sind der Grund, warum der Plan sich liest wie ein Tag und nicht wie eine Liste — ohne sie klebt die 6. Stunde an der 5. */ .u-pause { display: flex; align-items: center; gap: 10px; padding: 2px 10px; } .u-pause::before, .u-pause::after { content: ''; flex: 1; height: 1px; background: var(--border); } .u-pause span { font-size: .68rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; } /* Die Nadel: wo im Tag man gerade steht. Sie liegt über dem Raster, nimmt aber keine Klicks. */ .u-nadel { position: absolute; left: 74px; right: 0; height: 0; z-index: 4; pointer-events: none; border-top: 2px solid #ef4444; } .u-nadel::before { content: ''; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; } /* Die Beschriftung sitzt RECHTS der Zeitleiste, nicht darüber: Sie hat vorher die Stundennummer verdeckt — ausgerechnet die der laufenden Stunde. */ .u-nadel span { position: absolute; left: 6px; top: -8px; font-size: .64rem; color: #ef4444; background: #0d1220; padding: 1px 6px; border-radius: 6px; border: 1px solid rgba(239,68,68,.4); } @media (max-width: 640px) { .u-raster { grid-template-columns: 58px repeat(var(--tage, 5), minmax(128px, 1fr)); } .u-nadel { left: 58px; } .u-nadel span { display: none; } } /* Verbindungsseite: der Zustand steht als Band, das Bild darunter. */ .u-conn-zustand { margin: 8px 0 12px; } .u-conn-bild { margin: 6px 0 12px; } /* ── Der Plan-Kasten ────────────────────────────────────────────────────────────────────── * * FESTER, RUHIGER HINTERGRUND — und nur hier. Die Webseite arbeitet mit Verläufen, Schleiern * und wandernden Lichtern; das ist für Werbeflächen gemacht. In einem Stundenplan sucht man * eine Zeile, und jeder Farbverlauf darunter macht das schwerer. Der Kasten setzt deshalb * einen eigenen, undurchsichtigen Grund und schneidet alles darunter ab. * * Die waagerechten Linien sind der zweite Teil davon: Sie führen das Auge von der Uhrzeit * links zur Stunde rechts. Ohne sie verrutscht man beim Lesen um eine Zeile — auf dem Handy * regelmäßig. */ .u-plan-kasten { background: #0d1220; /* fest, nicht var(--card): das ist durchsichtig */ border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 14px 8px; margin-top: 12px; isolation: isolate; /* die Lichter der Seite bleiben draußen */ } .u-plan-kasten .u-raster { gap: 0; } .u-plan-kasten .u-kopf { background: #0d1220; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 10px; } /* Zeilenlinien: eine je Zeitabschnitt, quer durch alle Spalten. */ .u-plan-kasten .u-zeit-spalte, .u-plan-kasten .u-zelle { border-bottom: 1px solid rgba(255,255,255,.06); } .u-plan-kasten .u-zeit-spalte { border-right: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.015); } .u-plan-kasten .u-zelle { background: transparent; padding: 5px 6px; } .u-plan-kasten .u-zelle.u-heute { background: rgba(124,58,237,.08); } .u-plan-kasten .u-pause { background: rgba(255,255,255,.02); border-bottom: 1px solid rgba(255,255,255,.06); } .u-plan-kasten .u-pause-zeit { border-bottom: 1px solid rgba(255,255,255,.06); } .u-plan-kasten .u-stunde { background: rgba(255,255,255,.05); } .u-stand { margin-top: 8px; font-size: .74rem; color: var(--muted); text-align: right; } /* Die Leiste über dem Plan: Zeitraum links, Blättern und Ansicht rechts. */ .u-planleiste { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .u-zeitraum h2 { font-size: 1.05rem; } .u-zeitraum p { color: var(--muted); font-size: .82rem; margin-top: 2px; } .u-planleiste-tat { display: flex; align-items: center; gap: 6px; } .u-aus-grau { opacity: .35; pointer-events: none; } .u-ansicht-wahl { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-left: 6px; } .u-ansicht { padding: 6px 14px; font-size: .82rem; color: var(--muted); text-decoration: none; } .u-ansicht-an { background: rgba(124,58,237,.18); color: var(--text); } /* Kopfzeile des Plans: Schule und Klasse nebeneinander. */ .u-plan-titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .u-schule { color: var(--text); } .u-klasse { color: var(--text); font-weight: 600; } .u-trenner-punkt { color: var(--muted); } /* Tagesansicht: eine breite Spalte statt fünf schmaler. */ .u-raster-tag { grid-template-columns: 84px minmax(220px, 1fr); min-width: 320px; } /* Die Unterrichtung am Nummernfeld. Sie ist kein Kleingedrucktes: Sie steht dort, weil sie zum Zeitpunkt der Erhebung erfolgen muss, und ist deshalb lesbar gesetzt statt grau und winzig. Der letzte Absatz ist abgesetzt — er sagt, dass es auch ohne geht. */ .u-wa-hinweis { margin: 4px 0 4px; padding: 14px 16px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--border); display: grid; gap: 8px; } .u-wa-hinweis p { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--muted); } .u-wa-hinweis b { color: var(--text); } .u-wa-hinweis a { color: var(--accent2); text-decoration: underline; } .u-wa-freiwillig { display: flex; gap: 8px; align-items: flex-start; padding-top: 8px; border-top: 1px solid var(--border); } .u-wa-freiwillig .ic { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--accent2); } /* --- Benachrichtigungswege ------------------------------------------------------------- */ .u-kanalliste{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px} .u-kanal{border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:flex; flex-wrap:wrap;gap:8px 12px;align-items:center} .u-kanal-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .u-kanal-ziel{color:var(--muted);font-size:.9rem;word-break:break-all} .u-kanal-tat{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .u-kanal-tat input[type=text]{width:7.5em;padding:6px 9px;border-radius:8px; border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--text)} .u-kanal-fehler{flex-basis:100%;color:#fca5a5} .u-kanal-neu{border-top:1px solid var(--border);padding-top:16px;margin-top:16px} .u-kanal-neu h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:1.02rem} .u-tg-code code{display:inline-block;font-size:1.6rem;letter-spacing:.22em;padding:8px 16px; border-radius:10px;background:rgba(0,0,0,.3);border:1px solid var(--border)} .u-ics{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0} .u-ics input{flex:1;min-width:240px;padding:9px 12px;border-radius:8px;border:1px solid var(--border); background:rgba(0,0,0,.3);color:var(--text);font-family:ui-monospace,monospace;font-size:.86rem} /* --- Hinweiszeile: Icon auf Text-Groesse und -Hoehe ------------------------------------ */ /* Das Icon stand zu hoch: .u-hinweis ist ein Flex-Kasten mit align-items:flex-start, also klebt es an der Oberkante der Zeile statt auf der Schriftlinie zu sitzen. */ .u-hinweis .ic { width: 1em; height: 1em; margin-top: .3em; } /* --- Weg hinzufuegen: Knopf, der ein Fenster oeffnet ----------------------------------- */ .u-neu-leiste { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .u-neu { position: relative; } .u-neu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .u-neu > summary::-webkit-details-marker { display: none; } .u-neu-inhalt { margin-top: 12px; padding: 20px; position: relative; } .u-neu-inhalt h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1.05rem; } /* Ohne JavaScript bleibt es ein aufklappendes Feld — mit JavaScript wird ein Fenster daraus. */ /* Aussehen und Schleier des Fensters stehen seit dem 11.09.2026 weiter unten bei .u-fenster-frei: Der Kasten haengt beim Oeffnen nicht mehr in seiner Karte, ein Selektor ueber .u-neu[open] wuerde ihn dort also gar nicht mehr treffen. */ .u-fenster-zu { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 8px; } .u-fenster-zu:hover { color: var(--text); } /* --- Eine ODER zwei Uhrzeiten ----------------------------------------------------------- */ .u-zeiten { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .u-wa-ok { display: flex; gap: .6rem; align-items: flex-start; margin: .8rem 0 1rem; font-size: .88rem; line-height: 1.45; cursor: pointer; } .u-wa-ok input { margin-top: .2rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; cursor: pointer; } .u-zwei-schalter { position: absolute; opacity: 0; pointer-events: none; } .u-zwei-knopf { cursor: pointer; font-size: .86rem; color: var(--accent); padding: 9px 2px; white-space: nowrap; } .u-zeit2 { display: none; } .u-zwei-schalter:checked ~ .u-zeit2 { display: block; } .u-zwei-schalter:checked ~ .u-zwei-knopf { display: none; } /* --- Zeitplan je Weg --------------------------------------------------------------------- */ .u-zeitplan { flex-basis: 100%; margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; } .u-zeitplan > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); } .u-zeitplan > summary small { opacity: .75; } .u-zeitplan-form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } /* --- Kalender abonnieren ------------------------------------------------------------------ */ .u-ics-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; } .u-ics-mehr > summary { cursor: pointer; font-size: .88rem; color: var(--muted); margin: 8px 0; } /* --- Aufklapper: die globale

-Gestaltung gezielt aufheben ---------------------------- site.css gestaltet JEDES

: Rahmen, Hintergrund, Innenabstand (Z. 123) und ein "+" hinter dem Text (Z. 125). Das ist fuer die Frage-und-Antwort-Bloecke der Webseite gedacht. Hier steckte der Knopf dadurch in einem zweiten Kasten und trug ein "+" (gemessen 27.08.). */ .u-neu, .u-zeitplan, .u-ics-mehr { border: 0; background: none; padding: 0; border-radius: 0; } .u-neu > summary::after, .u-zeitplan > summary::after, .u-ics-mehr > summary::after { content: none; display: none; } /* KEIN eigener Innenabstand: Der Knopf traegt .btn, und der soll ihn bestimmen — sonst saehe er anders aus als jeder andere Knopf. Aufgehoben wird nur das, was die globale summary-Regel ihm aufdraengt (Ausrichtung an die Raender). */ .u-neu > summary { justify-content: center; } .u-zeitplan > summary, .u-ics-mehr > summary { padding: 6px 0; font-weight: 500; justify-content: flex-start; } /* Der gestrichelte Trenner ueber dem Zeitplan wurde vom Zuruecksetzen oben mit entfernt. */ .u-zeitplan { border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 8px; } /* --- Handy ------------------------------------------------------------------------------------ Die Kanalzeile traegt bis zu vier Knoepfe. Nebeneinander gehen die auf einem Telefon nicht aus; untereinander mit voller Breite sind sie erreichbar, ohne zu zielen. */ @media (max-width: 640px) { .u-neu-leiste { flex-direction: column; align-items: stretch; } .u-neu > summary { width: 100%; } .u-kanal { flex-direction: column; align-items: stretch; gap: 10px; } .u-kanal-kopf { flex-wrap: wrap; } .u-kanal-ziel { word-break: break-all; } .u-kanal-tat { margin-left: 0; width: 100%; } .u-kanal-tat > form { flex: 1 1 8em; } .u-kanal-tat .btn { width: 100%; justify-content: center; } .u-kanal-tat input[type=text] { width: 100%; } .u-zeiten { flex-direction: column; align-items: stretch; } .u-zeitplan-form { align-items: stretch; } .u-zeitplan-form .btn { width: 100%; justify-content: center; } .u-zwei-knopf { padding: 4px 0; } .u-ics-knoepfe { flex-direction: column; } .u-ics-knoepfe .btn { width: 100%; justify-content: center; } .u-ics input { min-width: 0; width: 100%; } .u-ics .btn { width: 100%; justify-content: center; } /* Die Handy-Groesse des Fensters steht bei .u-fenster-frei. */ } /* Deckende Flaeche, Rundung und Rand des Fensters stehen bei .u-fenster-frei — dort, wo es nach dem Umhaengen wirklich liegt. Auf einer Karte im Seitenfluss waere --card richtig, als Fenster ueber dem Inhalt ist es unlesbar: Man saehe die Seite hindurch. */ .u-neu-inhalt::before { display: none; } /* --- Kalender: die Knoepfe SIND der Weg ------------------------------------------------------- */ .u-ics-waehl { margin: 14px 0 8px; } .u-ics-fuss { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); } .u-ics-fuss .u-sub { margin-bottom: 10px; } /* --- Doppelstunden als ein Block -------------------------------------------------------------- */ /* Eine Zelle, die zwei Zeilen hoch ist, soll ihre Kachel auch ueber beide Zeilen ziehen — sonst klebt der Block oben und darunter bleibt eine leere Flaeche. */ .u-zelle-block { align-content: stretch; } .u-zelle-block .u-stunde { align-content: center; } /* --- Die Nadel: Uhrzeit links in der Zeitleiste ------------------------------------------------ */ /* Die Beschriftung sass 6px rechts der Zeitleiste — also ueber der ersten Tagesspalte und damit ueber dem Fach der laufenden Stunde (gemessen 27.08.). Jetzt steht sie LINKS der Linie, in der Zeitleiste, wo ohnehin nur Uhrzeiten stehen. */ .u-nadel span { left: auto; right: 100%; margin-right: 6px; top: -9px; white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { /* Auf dem Telefon war die Beschriftung ganz ausgeblendet. Die Uhrzeit passt aber in die schmale Leiste, wenn man ihr etwas weniger Polster gibt. */ .u-nadel span { display: block; font-size: .6rem; padding: 1px 4px; margin-right: 4px; } } /* ══ Der Kalender ══════════════════════════════════════════════════════════════════════════════ Eine ZEITACHSE statt eines Stundenrasters: Eine Doppelstunde ist doppelt so hoch, eine lange Pause ist eine echte Luecke. --px ist die Hoehe einer Minute; alles andere rechnet daraus. */ .k-seite { --px: 1.25px; } .k-kopf { display: flex; gap: 16px 20px; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; margin-bottom: 18px; } .k-titel h1 { font-size: 1.6rem; margin: 0; } .k-titel p { color: var(--muted); font-size: .9rem; margin: 2px 0 0; } .k-tat { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .k-blaettern { display: flex; gap: 6px; align-items: center; } .k-planwahl select { padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border); background: rgba(0,0,0,.3); color: var(--text); font: inherit; font-size: .88rem; } /* Die lebende Anzeige: Uhr, laufende Stunde, Fortschritt. */ .k-jetzt { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.32); flex-wrap: wrap; } .k-uhr { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; } .k-lage { font-size: .86rem; color: var(--muted); } .k-balken { display: block; width: 92px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; } .k-balken i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .9s linear; } .k-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; background: rgba(9,12,20,.55); border: 1px solid var(--border); border-radius: 16px; padding: 10px; } .k-gitter { position: relative; display: grid; grid-template-columns: 56px repeat(var(--spalten, 5), minmax(140px, 1fr)); grid-template-rows: auto var(--hoehe); } .k-tagansicht .k-gitter { grid-template-columns: 56px minmax(220px, 1fr); } .k-ecke { grid-row: 1; grid-column: 1; } .k-tagkopf { grid-row: 1; text-align: center; padding: 6px 4px 10px; font-size: .78rem; color: var(--muted); } .k-tagkopf b { display: block; color: var(--text); font-size: .95rem; } .k-tagkopf.k-heute b { color: var(--accent2); } .k-achse { grid-row: 2; grid-column: 1; position: relative; } .k-marke { position: absolute; right: 8px; transform: translateY(-50%); font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; } .k-spalte { grid-row: 2; position: relative; border-left: 1px solid var(--border); } .k-spalte.k-heute { background: rgba(124,58,237,.06); } .k-termin { position: absolute; overflow: hidden; border-radius: 9px; padding: 6px 9px; background: linear-gradient(180deg, rgba(124,58,237,.24), rgba(124,58,237,.13)); border: 1px solid rgba(124,58,237,.42); border-left: 3px solid var(--accent); display: flex; flex-direction: column; gap: 1px; font-size: .8rem; line-height: 1.25; } .k-fach { font-weight: 700; font-size: .9rem; } .k-zeit { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; } .k-raum, .k-lehrer { color: var(--muted); font-size: .74rem; } .k-kurz { padding: 3px 8px; } .k-kurz .k-raum, .k-kurz .k-lehrer { display: none; } .k-z-ausfall, .k-z-entfaellt { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); border-left-color: #ef4444; opacity: .82; } .k-z-ausfall .k-fach, .k-z-entfaellt .k-fach { text-decoration: line-through; } .k-aus { color: #fca5a5; font-size: .72rem; font-weight: 600; } .k-z-vertretung { background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.4); border-left-color: #fbbf24; } /* Die laufende Stunde wird hervorgehoben — vom Browser gesetzt, nicht vom Server. */ .k-termin.k-laeuft { box-shadow: 0 0 0 2px var(--accent2), 0 10px 30px rgba(6,182,212,.22); } /* Die Nadel quer ueber alle Tage. */ .k-nadel { position: absolute; left: 56px; right: 0; height: 0; z-index: 5; pointer-events: none; border-top: 2px solid #ef4444; } .k-nadel::before { content: ''; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; } .k-nadel span { position: absolute; right: 100%; margin-right: 6px; top: -9px; font-size: .64rem; color: #ef4444; background: #0d1220; padding: 1px 5px; border-radius: 6px; border: 1px solid rgba(239,68,68,.4); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 640px) { .k-seite { --px: 1.05px; } .k-kopf { align-items: stretch; } .k-tat { width: 100%; justify-content: space-between; } .k-jetzt { width: 100%; } .k-gitter { grid-template-columns: 44px repeat(var(--spalten, 5), minmax(112px, 1fr)); } .k-tagansicht .k-gitter { grid-template-columns: 44px 1fr; } .k-nadel { left: 44px; } .k-planwahl select { width: 100%; } } /* --- Schulschluss oben rechts ------------------------------------------------------------------ */ .k-schluss { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 6px 14px; border-radius: 12px; background: rgba(6,182,212,.10); border: 1px solid rgba(6,182,212,.30); } .k-schluss-rest { font-size: 1.25rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--accent2); } .k-schluss-txt { font-size: .72rem; color: var(--muted); white-space: nowrap; } @media (max-width: 640px) { .k-schluss { flex-direction: row; align-items: baseline; gap: 8px; width: 100%; justify-content: space-between; } } /* --- Pausen als eigene Abschnitte -------------------------------------------------------------- Sie liegen UNTER den Terminen und nehmen keine Klicks an: Sie sind Beschriftung, nicht Inhalt. */ .k-pausen { position: relative; pointer-events: none; z-index: 0; } .k-pause { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 8px, transparent 8px 16px); border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); } .k-pause span { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); opacity: .85; } /* Termine liegen ueber der Pausen-Ebene. */ .k-termin { z-index: 1; cursor: pointer; } .k-termin:hover { filter: brightness(1.12); } .k-termin:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; } .k-z-verlegt { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.42); border-left-color: #38bdf8; } /* --- Einzelheiten einer Stunde ------------------------------------------------------------------ */ .k-detail { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(4,7,14,.66); padding: 20px; } .k-detail[hidden] { display: none; } .k-detail-karte { position: relative; width: min(460px, 100%); max-height: 84vh; overflow: auto; background: #131a29; border-color: rgba(255,255,255,.14); padding: 22px; } .k-detail-karte:hover { transform: none; } .k-detail-karte::before { display: none; } .k-detail-karte h3 { margin: 0 0 14px; font-size: 1.25rem; padding-right: 30px; } .k-detail-karte dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; } .k-detail-karte dt { color: var(--muted); font-size: .82rem; } .k-detail-karte dd { margin: 0; font-size: .9rem; word-break: break-word; } .k-detail-karte dd.k-dd-aus { color: #fca5a5; font-weight: 600; } /* --- Pausen deutlicher markieren --------------------------------------------------------------- Vorher nur eine feine Schraffur — man musste wissen, dass da eine Pause ist. Jetzt ein Band mit eigener Flaeche, klaren Kanten und Beschriftung in der Mitte, ueber alle Tage hinweg. */ .k-pause { background: rgba(255,255,255,.045); border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); } .k-pause::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 7px, transparent 7px 14px); } .k-pause span { position: relative; z-index: 1; padding: 2px 12px; border-radius: 999px; background: #131a29; border: 1px solid var(--border); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } /* --- Tageskopf: ausgeschrieben und anklickbar --------------------------------------------------- */ a.k-tagkopf { display: block; border-radius: 10px; transition: background .15s, color .15s; } a.k-tagkopf:hover { background: rgba(124,58,237,.14); } a.k-tagkopf:hover b { color: var(--accent2); } a.k-tagkopf:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; } /* --- Countdown mit Einheiten braucht mehr Platz -------------------------------------------------- */ .k-schluss-rest { font-size: 1.05rem; white-space: nowrap; } @media (max-width: 640px) { a.k-tagkopf b { font-size: .82rem; } .k-schluss-rest { font-size: .95rem; } } /* --- Raum auch in kurzen Bloecken ----------------------------------------------------------- Vorher verschwanden bei unter 50 Minuten Raum UND Lehrkraft — eine normale 45-Minuten-Stunde fiel genau darunter, und dort steht der Raum am dringendsten (gemessen 27.08.). Jetzt bleibt der Raum, nur die Lehrkraft weicht. */ .k-kurz { padding: 4px 8px; gap: 0; } .k-kurz .k-fach { font-size: .82rem; } .k-kurz .k-zeit { font-size: .66rem; } .k-kurz .k-raum { font-size: .68rem; } .k-kurz .k-lehrer { display: none; } /* --- Der Stern für die Standard-Klasse ------------------------------------------------------- */ .k-stern { background: none; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; color: var(--muted); padding: 7px 9px; display: inline-flex; align-items: center; transition: color .15s, border-color .15s, background .15s; } .k-stern:hover { color: #fbbf24; border-color: rgba(251,191,36,.45); } .k-stern-an { color: #fbbf24; border-color: rgba(251,191,36,.5); background: rgba(251,191,36,.12); } .k-stern-an .ic { fill: currentColor; } .k-stern:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; } /* --- Kurze Stunden: nichts darf abgeschnitten werden ------------------------------------------ Eine 45-Minuten-Stunde ist gut 60 Pixel hoch. Fach, Zeit und Raum untereinander brauchen mehr — der Raum wurde vom unteren Rand abgeschnitten (gemessen 27.08.). Deshalb stehen bei Bloecken unter einer Stunde Zeit und Raum NEBENEINANDER: "13:30–14:15 · E209". Das passt, und die Angabe geht nicht verloren. */ .k-knapp { display: block; padding: 5px 9px; line-height: 1.28; } .k-knapp .k-fach { display: block; font-size: .84rem; } .k-knapp .k-zeit, .k-knapp .k-raum, .k-knapp .k-aus { font-size: .68rem; } .k-knapp .k-raum::before, .k-knapp .k-aus::before { content: ' · '; color: var(--muted); } .k-knapp .k-lehrer { display: none; } /* Etwas mehr Luft auf der Zeitachse — 45 Minuten sind der haeufigste Fall und sollen bequem lesbar sein, nicht gerade so passen. */ .k-seite { --px: 1.4px; } @media (max-width: 640px) { .k-seite { --px: 1.15px; } } /* --- Trennung zweier Stunden in einer Doppelstunde ------------------------------------------- Kaum sichtbar und mit Abstand zu den Raendern: Der Block IST eine Doppelstunde — dass er aus zwei Schulstunden besteht, ist eine Nebenauskunft und keine Ansage. */ .k-trenn { position: absolute; left: 8px; right: 8px; height: 1px; background: rgba(255,255,255,.16); pointer-events: none; } .k-z-ausfall .k-trenn, .k-z-entfaellt .k-trenn { background: rgba(255,255,255,.12); } /* --- Detail-Fenster im Stil der Webseite ------------------------------------------------------- Runde Ecken wie die Karten der Seite (--radius), Kopfzeile mit Fach, Zustand als Pille und dem Schliessen-Knopf rechts. Die Angaben darunter mit feinen Trennlinien statt als lose Tabelle. */ .k-detail-karte { border-radius: var(--radius); padding: 22px 24px 20px; } .k-detail-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .k-detail-kopf h3 { margin: 0; font-size: 1.3rem; letter-spacing: -.01em; padding: 0; } .k-detail-pill { font-size: .72rem; padding: 3px 10px; border-radius: 999px; color: var(--accent2); background: rgba(6,182,212,.14); border: 1px solid rgba(6,182,212,.3); } .k-detail-pill.k-pill-aus { color: #fca5a5; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.35); } /* Der Schliessen-Knopf: rund, ruhig, und immer ganz rechts. */ .k-zu { margin-left: auto; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--border); color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s; } .k-zu:hover { color: var(--text); border-color: rgba(124,58,237,.5); } .k-zu:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; } .k-detail-karte dl { grid-template-columns: 7.5em 1fr; gap: 0; } .k-detail-karte dt, .k-detail-karte dd { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); } .k-detail-karte dt { color: var(--muted); font-size: .8rem; } .k-detail-karte dd { font-size: .92rem; white-space: pre-line; } .k-detail-karte dl > *:nth-last-child(-n+2) { border-bottom: 0; } /* Der Zeitstempel rueckt weich zur Seite, wenn er einer Stundenmarke zu nahe kommt. */ .k-nadel span { transition: top .18s ease; } /* --- Was ist mit dieser Stunde? --------------------------------------------------------------- Der Zustand steht als kleines Schild unten in der Kachel — nicht nur bei Ausfall, sondern bei jeder Aenderung. Wer auf den Plan schaut, soll es sehen und nicht erst klicken muessen. */ .k-tag { align-self: flex-start; margin-top: auto; font-size: .68rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; letter-spacing: .01em; white-space: nowrap; } .k-tag-ausfall, .k-tag-entfaellt { background: rgba(239,68,68,.2); color: #fca5a5; } .k-tag-vertretung { background: rgba(251,191,36,.2); color: #fcd34d; } .k-tag-verlegt { background: rgba(56,189,248,.2); color: #7dd3fc; } .k-tag-raum { background: rgba(167,139,250,.22); color: #c4b5fd; } .k-knapp .k-tag { display: inline; padding: 0; background: none; } .k-knapp .k-tag::before { content: ' · '; color: var(--muted); font-weight: 400; } .k-kurz .k-tag { display: none; } /* --- Zusammenhaengende Bloecke ---------------------------------------------------------------- Dasselbe Fach, das nach der Pause weitergeht, wird getrennt dargestellt (andere Lehrkraft oder anderer Raum). Ein schmaler Strich am linken Rand ueberbrueckt die Luecke: Er sagt "das gehoert zusammen", ohne eine Zeile Text zu verbrauchen. */ .k-kette { position: absolute; width: 3px; border-radius: 2px; background: var(--accent); opacity: .45; pointer-events: none; z-index: 0; } .k-kette.k-z-ausfall, .k-kette.k-z-entfaellt { background: #ef4444; } .k-kette.k-z-vertretung { background: #fbbf24; } .k-kette.k-z-verlegt { background: #38bdf8; } /* Die Hoehe des Kalenders kommt aus DERSELBEN Quelle wie die Termine (--px). Vorher rechnete PHP sie mit einem eigenen Faktor aus; als --px auf 1.4 stieg, ragten die Termine ueber den Kasten hinaus und er bekam eine eigene Bildlaufleiste (gemeldet 27.08.). Zwei Stellen fuer dieselbe Zahl gehen frueher oder spaeter auseinander — jetzt ist es eine. */ .k-gitter { grid-template-rows: auto calc((var(--bis) - var(--von)) * var(--px)); } /* Waagerecht darf der Kasten rollen (fuenf Tage passen nicht immer nebeneinander), senkrecht nicht: Dort waechst einfach die Seite. */ .k-rahmen { overflow-x: auto; overflow-y: hidden; } /* --- Trennstrich: nur an den Raendern, nie durch den Text ------------------------------------- Vorher lief er quer durch die Kachel und schnitt mitten durch die Raumnummer (gemeldet 27.08.). Zwei kurze Striche links und rechts sagen dasselbe und lassen die Mitte frei. */ .k-trenn { background: linear-gradient(90deg, rgba(255,255,255,.22) 0 12px, transparent 12px calc(100% - 12px), rgba(255,255,255,.22) calc(100% - 12px) 100%); } /* --- Fortsetzung: an den Kacheln selbst, nicht als Strich durch die Pause ---------------------- Der durchgehende Strich lief mitten durch das Pausen-Band und sah bei einer ausgefallenen Stunde aus wie ein zweiter roter Zeitzeiger. Jetzt zeigen es die Kacheln: Die zugewandten Ecken werden flach, und ein kleiner Pfeil deutet in die Richtung, in der es weitergeht. */ .k-kette { display: none; } .k-weiter { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .k-fortsetzung { border-top-left-radius: 3px; border-top-right-radius: 3px; } .k-weiter::after, .k-fortsetzung::before { content: ''; position: absolute; right: 9px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .5; } .k-weiter::after { bottom: 3px; border-top: 5px solid currentColor; } .k-fortsetzung::before { top: 3px; border-bottom: 5px solid currentColor; } /* --- Mehr Luft: vier Zeilen (Fach, Zeit, Raum, Zustand) sollen bequem passen ------------------- */ .k-seite { --px: 1.6px; } @media (max-width: 640px) { .k-seite { --px: 1.3px; } } /* --- Mehrere Kalender-Abos ---------------------------------------------------------------------- */ .u-abo { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin: 14px 0; } .u-abo-kopf { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .u-abo-name { width: 100%; max-width: 320px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border); background: rgba(0,0,0,.3); color: var(--text); font: inherit; font-size: .95rem; font-weight: 600; } .u-abo-fuss { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); } .u-abo-fuss span { display: flex; gap: 8px; flex-wrap: wrap; } .u-abo-fuss .u-sub { margin: 0; } .u-abo-neu { margin-top: 6px; } /* --- Klassen ankreuzen -------------------------------------------------------------------------- */ .u-klassen { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; } .u-klasse { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; cursor: pointer; border: 1px solid var(--border); border-radius: 999px; font-size: .88rem; } .u-klasse:hover { border-color: rgba(124,58,237,.45); } .u-klasse input { accent-color: var(--accent); } .u-klassen-hinweis { flex-basis: 100%; color: var(--muted); font-size: .78rem; } @media (max-width: 640px) { .u-abo-fuss { flex-direction: column; align-items: stretch; } .u-abo-fuss span { width: 100%; } .u-abo-fuss .btn { flex: 1; justify-content: center; } } /* --- Trennstrich wieder durchgehend ------------------------------------------------------------ Die Randstriche waren zu leise und wirkten wie ein Darstellungsfehler. Der Block ist inzwischen hoch genug (1.6 px je Minute), dass eine durchgehende Linie unter dem Text liegt statt darin. */ .k-trenn { background: rgba(255,255,255,.16); } /* --- Keine Pfeile mehr ------------------------------------------------------------------------- Sie standen an fast jeder Kachel und sagten dadurch nichts mehr. Den Zusammenhang zeigt jetzt die Bruecke in der Pause; ausgeschrieben steht er im Fenster hinter dem Klick. */ .k-weiter::after, .k-fortsetzung::before { content: none; } .k-weiter { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .k-fortsetzung { border-top-left-radius: 4px; border-top-right-radius: 4px; } /* --- Die Bruecke ------------------------------------------------------------------------------- */ .k-bruecke { position: absolute; width: 2px; margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10), rgba(255,255,255,.30)); pointer-events: none; z-index: 2; } /* --- Pause innerhalb eines durchgehenden Blocks ------------------------------------------------- WebUntis zeigt aufeinanderfolgende Stunden desselben Fachs als EINEN Block. Das ist richtig: Man sieht auf einen Blick, wie lange man in diesem Fach sitzt. Die Pause darf darin trotzdem nicht verschwinden — sonst sieht es aus, als waere durchgehend Unterricht. Deshalb ein heller, schraffierter Streifen quer durch den Block. */ .k-innenpause { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.28) 0 6px, rgba(0,0,0,.14) 6px 12px); border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); } .k-termin > * { position: relative; z-index: 1; } .k-kette { display: none; } /* --- Der Zugangs-Schritt ------------------------------------------------------------------------ */ .u-zugang { margin: 20px 0; padding-top: 18px; border-top: 1px solid var(--border); } .u-zugang h3 { font-size: 1.05rem; margin: 0 0 12px; } .u-zugang-wahl { display: flex; gap: 12px; flex-wrap: wrap; } .u-zugang-karte { flex: 1 1 220px; text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, background .15s; } .u-zugang-karte b { display: flex; align-items: center; gap: 8px; font-size: .95rem; } .u-zugang-karte small { color: var(--muted); font-size: .8rem; } .u-zugang-karte:hover:not(:disabled) { border-color: rgba(124,58,237,.5); } .u-zugang-an { border-color: var(--accent); background: rgba(124,58,237,.12); } .u-zugang-aus, .u-zugang-karte:disabled { opacity: .5; cursor: not-allowed; } .u-zugang-aus small { color: #fca5a5; } /* --- Der Zeitzeiger muss ueber ALLE Tage gehen ------------------------------------------------- In einem waagerecht rollenden Kasten ist das Raster nur so breit wie der SICHTBARE Bereich; die Spalten ragen darueber hinaus. "right: 0" endete deshalb am Bildschirmrand — auf dem Telefon irgendwo mitten in der Woche (gemeldet 27.08.). Mit max-content ist das Raster so breit wie seine Spalten, und der Strich reicht bis Freitag. */ .k-gitter { width: max-content; min-width: 100%; } @media (max-width: 640px) { /* Feste Spaltenbreite statt 1fr: In einem max-content-Raster hat 1fr keine sinnvolle Bezugsgroesse und die Spalten faellen auf ihren Mindestwert zusammen. */ .k-gitter { grid-template-columns: 44px repeat(var(--spalten, 5), 132px); } .k-tagansicht .k-gitter { grid-template-columns: 44px minmax(220px, 1fr); width: auto; } } /* --- Technische Antwort (nur Verwaltung) -------------------------------------------------------- */ .u-technisch { border: 0; background: none; padding: 0; margin: -6px 0 14px; } .u-technisch > summary { cursor: pointer; font-size: .82rem; color: var(--muted); padding: 4px 0; justify-content: flex-start; } .u-technisch > summary::after { content: none; } .u-technisch code { display: block; margin: 6px 0; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid var(--border); font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .8rem; color: #fca5a5; word-break: break-word; } .u-technisch small { color: var(--muted); font-size: .76rem; } /* --- Schule und Klasse im Kalenderkopf ---------------------------------------------------------- */ .k-wer { display: flex; align-items: center; gap: 7px; margin: 4px 0 0; font-size: .92rem; font-weight: 600; color: var(--text); } .k-wer .ic { color: var(--accent2); } /* --- Achse mit Stundenzeiten ------------------------------------------------------------------- Es sind jetzt mehr Werte als vorher (Anfang UND Ende je Stunde), und zwei davon liegen nur 20 Minuten auseinander. Etwas kleiner und ohne Umbruch, damit sie sich nicht ins Gehege kommen. */ .k-marke { font-size: .68rem; white-space: nowrap; letter-spacing: -.01em; } .k-achse { min-width: 0; } @media (max-width: 640px) { .k-marke { font-size: .62rem; } } /* ══ Die oeffentliche Seite ═════════════════════════════════════════════════════════════════════ Sie benutzt die Bausteine von winku.de (.card, .btn) und setzt nur den Rahmen darum. Kein zweiter Satz Farben: Alles kommt aus site.css, damit die Seite neben den uebrigen Winku- Seiten nicht wie ein Fremdkoerper wirkt. */ .i-hero { text-align: center; padding: 56px 0 40px; } .i-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: .82rem; letter-spacing: .02em; border: 1px solid var(--line, rgba(255,255,255,.14)); background: rgba(255,255,255,.04); } .i-hero h1 { margin: 18px 0 0; font-size: clamp(2rem, 5.2vw, 3.2rem); line-height: 1.12; text-wrap: balance; } .i-hero h1 span { display: block; opacity: .62; font-weight: 600; } .i-sub { max-width: 62ch; margin: 18px auto 0; font-size: 1.06rem; line-height: 1.6; opacity: .84; } .i-tat { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 28px 0 0; } .i-frei { margin: 14px 0 0; font-size: .88rem; opacity: .58; } .i-abschnitt { padding: 40px 0; } .i-abschnitt > h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 6px; text-wrap: balance; } .i-lead { margin: 0 0 20px; opacity: .78; } .i-karten { display: grid; gap: 14px; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); } .i-karte { padding: 20px; } .i-karte h3 { margin: 8px 0 6px; font-size: 1.04rem; } .i-karte p { margin: 0; line-height: 1.58; opacity: .82; font-size: .95rem; } .i-zeichen { font-size: 1.5rem; line-height: 1; } .i-schritte { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; } .i-schritte li { display: flex; gap: 14px; align-items: flex-start; } .i-nr { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; border: 1px solid var(--line, rgba(255,255,255,.14)); background: rgba(255,255,255,.04); } .i-schritte b { display: block; margin-bottom: 3px; } .i-schritte p { margin: 0; opacity: .8; line-height: 1.58; font-size: .95rem; } .i-fragen { display: grid; gap: 10px; margin-top: 20px; } .i-fragen details { padding: 14px 18px; } .i-fragen summary { cursor: pointer; font-weight: 600; } .i-fragen details p { margin: 10px 0 0; opacity: .82; line-height: 1.6; } .i-liste { margin: 16px 0 0; padding-left: 20px; line-height: 1.8; opacity: .84; } .i-hinweis { margin: 18px 0 0; font-size: .9rem; opacity: .68; line-height: 1.6; } .i-abschluss { text-align: center; padding: 44px 0 56px; border-top: 1px solid var(--line, rgba(255,255,255,.1)); margin-top: 24px; } .i-abschluss h2 { margin: 0 0 18px; } .i-marken { margin: 22px auto 0; max-width: 62ch; font-size: .84rem; opacity: .6; line-height: 1.6; } .i-recht { margin: 12px 0 0; font-size: .88rem; opacity: .7; } .i-recht a { color: inherit; } @media (max-width: 640px) { .i-hero { padding: 36px 0 28px; } .i-abschnitt { padding: 30px 0; } } /* --- Das Fenster: zwei Folgen einer alten Korrektur, beide hier behoben ----------------------- * * `.u-inhalt .card > * { position: relative; z-index: 1 }` stammt aus der Reparatur vom 26.08.: * Ohne sie legt sich das dekorative ::before von .card über die Bedienelemente und schluckt * jeden Klick. Sie hat aber zwei Nebenwirkungen, die man erst sieht, wenn ein Fenster aufgeht: * * 1. SIE ÜBERSCHREIBT DIE POSITION DES SCHLIESSEN-KNOPFES. Er steht auf `position: absolute`, * die Regel macht `relative` daraus — und schon sitzt das × oben LINKS im Textfluss statt in * der Ecke. Gemessen: position 'relative', 11px vom linken Rand. * * 2. SIE SPERRT DAS FENSTER IN EINEN STAPELKONTEXT. Jedes Kind einer Karte bekommt damit einen * eigenen Kontext; das Fenster darin kann noch so hohe z-index-Werte tragen, es bleibt * INNERHALB dieses Kontexts. Die Karten weiter unten auf der Seite haben ihren eigenen — * und liegen im Zweifel darüber. Genau das war auf dem Bildschirmfoto zu sehen: Die * Kästchen und der Knopf des Kalender-Abos standen MITTEN IM FENSTER. Nicht durchsichtig * war es, sondern überlagert. * * Der Knopf bekommt seine Ecke zurück; den Stapelkontext hebt js/nivo.js beim Öffnen an. */ .u-inhalt .card > .u-fenster-zu, .u-neu-inhalt > .u-fenster-zu { position: absolute; top: 10px; right: 12px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-size: 1.4rem; } .u-inhalt .card > .u-fenster-zu:hover, .u-neu-inhalt > .u-fenster-zu:hover { background: rgba(255,255,255,.07); } /* Platz für den Knopf, damit er nicht auf der Überschrift sitzt. */ .u-neu-inhalt h3 { padding-right: 40px; } /* Solange ein Fenster offen ist, liegt die Karte, in der es steckt, über allem anderen. */ .u-inhalt .card.u-ueber, .u-inhalt .u-abschnitt.u-ueber { z-index: 80; } /* --- Das Fenster hängt beim Öffnen NICHT MEHR IN SEINER KARTE (Faddi, 11.09.2026) ------------ * * Der z-index-Griff darüber behebt nur die halbe Ursache. Ein Vorfahre mit `transform`, * `filter`, `backdrop-filter` oder `contain` macht sich zum BEZUGSRAHMEN für alles, was darin * `position: fixed` ist — dann ist das Fenster nicht mehr am Bildschirm ausgerichtet, sondern * an der Karte. Es sitzt versetzt, wird am Kartenrand abgeschnitten und liegt trotz z-index * nicht vorn. Auf dem iPhone war genau das zu sehen; im Chromium hier nicht, und ein Fehler, * den man nur auf einem Gerät sieht, wird auf jedem anderen zur Ratesache. * * Deshalb wird das Fenster beim Öffnen aus der Karte in gehängt (js/nivo.js) und beim * Schließen zurück. Als direktes Kind von hat es keinen Vorfahren mehr, der es * einsperren könnte — unabhängig davon, welche Eigenschaft es war. Der Schleier ist aus * demselben Grund ein eigenes Element in und kein ::before der Karte. */ .u-fenster-schleier { position: fixed; inset: 0; z-index: 999; background: rgba(4, 7, 14, .66); } html.js .u-neu-inhalt.u-fenster-frei { position: fixed; z-index: 1000; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 92vw); max-height: 86vh; overflow: auto; margin: 0; padding: 20px; border-radius: 18px; background: #131a29; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); } html.js .u-neu-inhalt.u-fenster-frei:hover { transform: translate(-50%, -50%); } @media (max-width: 640px) { html.js .u-neu-inhalt.u-fenster-frei { width: 94vw; max-height: 88vh; padding: 18px; } } /* --- Maschinen-Schnittstelle: Token-Liste ------------------------------------------------- */ .u-tokens { display: grid; gap: 12px; } .u-token { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.03); } .u-token header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .u-token header code { font-size: .8rem; color: var(--muted); background: rgba(0,0,0,.3); padding: 2px 8px; border-radius: 6px; } .u-token-aus { opacity: .55; } .u-token-tat { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .u-token-tat select { padding: 7px 10px; border-radius: 8px; background: rgba(0,0,0,.3); border: 1px solid var(--border); color: var(--text); font-size: .84rem; } .u-code { background: #0d1220; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: .8rem; line-height: 1.6; color: var(--text); white-space: pre; } /* Sperrseite der Zugriffsregel: eine Karte, ein Satz, ein Knopf — der Text kommt vom Server. */ .u-sperre { max-width: 56ch; margin: 40px auto; text-align: center; } .u-sperre h1 { font-size: 1.35rem; display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 10px; } .u-sperre p { color: var(--muted); margin-bottom: 10px; } /* Zustimmung der Erziehungsberechtigten (Art. 8 DSGVO, Auflage 2391). Ruhig gesetzt: Es ist eine Voraussetzung, keine Warnung. */ .u-zust{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px; padding:12px 14px;border-radius:12px;background:var(--n-flaeche-2,rgba(255,255,255,.04)); border:1px solid var(--n-rand,rgba(255,255,255,.10));font-size:.88rem;line-height:1.55} .u-zust input{margin-top:3px;flex:0 0 auto} .u-zust small{display:block;margin-top:5px;color:var(--n-gedaempft,#a3a3ad);font-size:.82rem;line-height:1.6} /* ══ 19.09.2026: Farbe je Fach, lesbare Achse, die Woche passt aufs Telefon ═════════════════════ Anlass: Bildschirmfoto von Faddi — alle Stunden gleich lila, Achsenzeiten uebereinander, ein leeres "--:--"-Kaestchen oben rechts, auf dem Telefon nur quer zu rollen. */ /* [hidden] MUSS GEWINNEN. `.k-schluss { display: flex }` stach das hidden-Attribut aus: Das Kaestchen stand immer da, mit "--:--", auch wenn heute nichts mehr ansteht. */ .k-jetzt[hidden], .k-schluss[hidden], .k-balken[hidden] { display: none !important; } /* --- Jedes Fach seine Farbe -------------------------------------------------------------------- --fach setzt die Vorlage je Kachel (nivoFachFarben). Die erste background-Zeile ist der Rueckfall fuer Browser ohne color-mix(). Diese Regel steht NACH .k-z-vertretung und .k-z-verlegt: Eine Vertretung behaelt die Farbe ihres Fachs; was sich geaendert hat, sagen der Rahmen und das Schild in der Kachel. */ .k-termin { background: linear-gradient(180deg, rgba(124,58,237,.24), rgba(124,58,237,.13)); background: linear-gradient(180deg, color-mix(in srgb, var(--fach, #8b5cf6) 38%, #0b1020), color-mix(in srgb, var(--fach, #8b5cf6) 22%, #0b1020)); border: 1px solid color-mix(in srgb, var(--fach, #8b5cf6) 55%, transparent); border-left: 4px solid var(--fach, #8b5cf6); } .k-termin .k-fach { color: #fff; } .k-termin .k-zeit, .k-termin .k-raum, .k-termin .k-lehrer { color: rgba(236,238,245,.74); } /* Ausfall bleibt ROT, egal welches Fach: Das ist die Auskunft, wegen der man hinschaut. */ .k-termin.k-z-ausfall, .k-termin.k-z-entfaellt { background: repeating-linear-gradient(135deg, rgba(239,68,68,.17) 0 7px, rgba(239,68,68,.07) 7px 14px), #11131c; border-color: rgba(239,68,68,.45); border-left: 4px solid #ef4444; opacity: .9; } .k-termin.k-z-ausfall .k-fach, .k-termin.k-z-entfaellt .k-fach { color: #fecaca; } /* Vertretung, Verlegung, Raumwechsel: Fachfarbe bleibt, ein Rahmen in der Farbe des Zustands. */ .k-termin.k-z-vertretung { outline: 2px solid #fbbf24; outline-offset: -2px; } .k-termin.k-z-verlegt { outline: 2px solid #38bdf8; outline-offset: -2px; } .k-termin.k-z-raum { outline: 2px solid #c4b5fd; outline-offset: -2px; } .k-termin:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; } /* --- Zwei Zeiten, die dicht beieinanderliegen, als EINE Marke mit zwei Zeilen ------------------ */ .k-marke-mehr { line-height: 1.12; text-align: right; font-size: .62rem; } /* --- Faecherfarben einstellen -------------------------------------------------------------------- Die Box selbst kommt aus site.css (details); hier nur der Inhalt. */ .k-farben { margin: 18px 0 0; } .k-farben > summary > span { gap: 9px; } .k-farben form { padding: 0 0 18px; } .k-farben .u-sub { margin: 0 0 12px; padding: 0; } .k-farben-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin: 0 0 14px; } .k-farben-weitere { color: var(--muted); font-size: .8rem; margin: 4px 0 8px; padding: 0; } .k-farbe { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); border-color: color-mix(in srgb, var(--fach) 50%, transparent); background: color-mix(in srgb, var(--fach) 14%, transparent); min-width: 0; } .k-farbe span { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .k-farbe input[type=color] { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; } .k-farbe input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .k-farbe input[type=color]::-webkit-color-swatch { border: 1px solid rgba(255,255,255,.3); border-radius: 8px; } .k-farbe input[type=color]::-moz-color-swatch { border: 1px solid rgba(255,255,255,.3); border-radius: 8px; } .k-farbe:focus-within { outline: 2px solid var(--accent2); outline-offset: 1px; } .k-farben-tat { display: flex; gap: 10px; flex-wrap: wrap; } /* --- Tagesnamen: ausgeschrieben, auf dem Telefon kurz ------------------------------------------- */ .k-tag-kurz, .k-datum-kurz { display: none; } a.k-tagkopf .k-datum-lang, a.k-tagkopf .k-datum-kurz { font-variant-numeric: tabular-nums; } /* --- Tablet: fuenf Tage passen nebeneinander, ohne quer zu rollen ------------------------------- */ @media (min-width: 641px) and (max-width: 1024px) { .k-gitter { grid-template-columns: 50px repeat(var(--spalten, 5), minmax(100px, 1fr)); } .k-tagansicht .k-gitter { grid-template-columns: 50px minmax(220px, 1fr); } .k-nadel { left: 50px; } } /* --- Telefon: die Woche auf EINEN Blick ---------------------------------------------------------- Vorher 5 x 132 px nebeneinander — man sah zweieinhalb Tage und rollte quer. Jetzt teilen sich fuenf Spalten die Breite; in der Kachel stehen Fach und Raum, Zeit und Lehrkraft stehen im Fenster hinter dem Antippen (und die Zeit ohnehin an der Achse). Die Farbe traegt den Rest: Man erkennt Mathe, bevor man "M" gelesen hat. Die Tagesansicht bleibt ausfuehrlich. */ @media (max-width: 640px) { .k-rahmen { padding: 6px 4px 8px; border-radius: 12px; } .k-gitter, .k-tagansicht .k-gitter { width: 100%; min-width: 0; } .k-gitter { grid-template-columns: 34px repeat(var(--spalten, 5), minmax(0, 1fr)); } .k-tagansicht .k-gitter { grid-template-columns: 42px minmax(0, 1fr); } .k-nadel { left: 34px; } .k-tagansicht ~ .k-nadel, .k-tagansicht .k-nadel { left: 42px; } .k-marke { right: 4px; font-size: .58rem; } .k-marke-mehr { font-size: .54rem; } .k-tag-lang, .k-datum-lang { display: none; } .k-tag-kurz, .k-datum-kurz { display: inline; } a.k-tagkopf { padding: 4px 0 8px; } a.k-tagkopf b { font-size: .8rem; } a.k-tagkopf .k-datum-kurz { font-size: .66rem; } .k-pause span { font-size: .52rem; padding: 1px 7px; letter-spacing: .04em; } .k-rahmen:not(.k-tagansicht) .k-termin { display: block; padding: 3px 3px 3px 5px; border-left-width: 3px; border-radius: 6px; line-height: 1.2; } .k-rahmen:not(.k-tagansicht) .k-fach { display: block; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-rahmen:not(.k-tagansicht) .k-raum { display: block; font-size: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-rahmen:not(.k-tagansicht) .k-raum::before { content: none; } .k-rahmen:not(.k-tagansicht) .k-zeit, .k-rahmen:not(.k-tagansicht) .k-lehrer, .k-rahmen:not(.k-tagansicht) .k-tag { display: none; } .k-rahmen:not(.k-tagansicht) .k-trenn { left: 3px; right: 3px; } .k-termin.k-z-vertretung, .k-termin.k-z-verlegt, .k-termin.k-z-raum { outline-width: 1.5px; } .k-farben-liste { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; } .k-farbe { padding: 6px 8px; gap: 8px; } .k-farbe input[type=color] { width: 26px; height: 26px; } .k-farbe span { font-size: .84rem; } } /* --- Weniger Anlauf bis zum Plan --------------------------------------------------------------- `section` bringt aus site.css 70 px Innenabstand oben mit — fuer Werbeseiten gedacht. Hier ist der Plan der Inhalt; er soll oben stehen. Auf dem Telefon lag er vorher erst ab Pixel 524. */ .k-seite { padding-top: 26px; } @media (max-width: 640px) { .k-seite { padding-top: 8px; } .k-titel h1 { font-size: 1.35rem; } .k-titel p { font-size: .82rem; } .k-kopf { gap: 10px; margin-bottom: 12px; } .k-jetzt { padding: 7px 12px; gap: 8px; } .k-uhr { font-size: 1rem; } .k-lage { font-size: .8rem; } /* DIE LEISTE IN ZWEI ZEILEN statt fuenf: oben blaettern und Woche/Tag, darunter Plan, Stern, Aktualisieren und Melden als Zeichen (der Text steht im title und fuer Vorleser). */ .k-tat { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; justify-content: flex-start; } .k-tat .k-blaettern { order: 1; flex: 1 1 auto; } .k-tat .k-blaettern .btn { flex: 1 1 auto; justify-content: center; padding-left: 8px; padding-right: 8px; } .k-tat .u-ansicht-wahl { order: 2; } .k-tat .k-planwahl { order: 3; flex: 1 1 120px; min-width: 0; } .k-tat .k-planwahl select { width: 100%; } .k-tat form.u-inline { order: 4; } .k-knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .k-tat form.u-inline .btn { padding-left: 11px; padding-right: 11px; } /* Der Plan darf die Seitenraender mitnutzen: 2 x 14 px mehr fuer fuenf schmale Spalten. */ .k-rahmen { margin-left: -14px; margin-right: -14px; } /* Lange Faecher ("KUNSTG1") in zwei Zeilen statt "KU…". */ .k-rahmen:not(.k-tagansicht) .k-fach { white-space: normal; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.1; } } @media (max-width: 640px) { /* In der Tagesansicht ist Platz: dort der ausgeschriebene Tag ("Dienstag 22.09.2026"). */ .k-tagansicht .k-tag-lang, .k-tagansicht .k-datum-lang { display: inline; } .k-tagansicht .k-tag-kurz, .k-tagansicht .k-datum-kurz { display: none; } .k-tagansicht a.k-tagkopf b { font-size: .92rem; } } /* --- Dieselben Fachfarben im Stundenraster (/nivo/plan/) ------------------------------------ Wer zwischen Zeitachse und Raster wechselt, soll Mathe an derselben Farbe wiedererkennen. */ .u-plan-kasten .u-stunde[style*="--fach"] { background: color-mix(in srgb, var(--fach) 22%, #0b1020); border-color: color-mix(in srgb, var(--fach) 45%, transparent); border-left: 3px solid var(--fach); } .u-plan-kasten .u-stunde-ausfall[style*="--fach"] { background: rgba(239,68,68,.12); border-left-color: #ef4444; } .u-plan-kasten .u-stunde-vertretung[style*="--fach"] { outline: 2px solid #f59e0b; outline-offset: -2px; }