/* ============================================================
* KGU Klassenarbeitsplaner - main.css
* ============================================================
* Zentrale und einzige Stylesheet-Datei für alle Seiten und Modals.
* (Ausnahme: das CSS des PDF-Kalenders steht fest in calendar_pdf.php.)
*
* Gliederung:
* 1. Basis / Reset
* 2. Layout (.content, Grids)
* 3. Navbar (Kopfzeile, siehe header.php)
* 4. Footer
* 5. Nachrichten-Banner über den Kalendern
* 6. Kalender (Tag/Monat/Jahr, Tooltip)
* 7. Karten & Buttons (gemeinsames UI-Kit, Schalter)
* 8. Formulare (Eingabefelder, Fehlermeldungen)
* 9. Tabs
* 10. Benutzerverwaltung (admin.php)
* 11. Nachrichtenverwaltung (admin.php)
* 12. Schuljahres-/Ferienkalender (admin.php)
* 13. Klassenverwaltung (admin.php)
* 14. Profil: Klassen-Kartenraster (profile.php)
* 15. Veranstaltungsliste (event_list.php)
* 16. Responsive
* 17. Responsive Datensatzliste (DIV-basierte Tabelle) in profile.php und event_list.php
* 18. Schuljahreswechsel (admin.php)
* 19. Login-Seite (index.php)
* 20. Versionsübersicht (changelog.php)
* 21. Grundeinstellungen (admin.php)
* 22. Legende (help.php)
* 23. Hilfeseite: Screenshots (help.php)
* 24. Tags (admin.php, event_list.php, lib/event-modal.php)
* 25. Veranstaltungsfilter (event_list.php, lib/event-filter.php)
* 26. PDF-Auswahl für Klassen (event_list.php, "Alle Veranstaltungen")
* 27. Monatskalender: ganzjährige Scroll-Ansicht (calendar_month.php)
* 28. Jahreskalender: Monatsspalten-Paging (calendar_year.php)
* 29. Kalender-Werkzeugleiste: Überschrift + Pfeile + Heute (alle drei Kalender)
* 30. Klassen-Auswahl-Raster (Veranstaltungs-Modal, Filter in event_list.php)
* 31. Modals (Klassenarbeit, Veranstaltung)
* 32. Kalenderabos und gemeinsame Suchmaske (calendar_subscriptions.php, lib/filter-mask.php)
* ============================================================ */
/* ============================================================
* GLOBALER BREAKPOINT FÜR "SCHMALE BILDSCHIRME": 900px
* ============================================================
* Gilt einheitlich für Hamburger-Menü, Kalender (Tag/Monat/Jahr),
* Listen, Footer und Veranstaltungsfilter, damit beim Verkleinern
* des Fensters nicht verschiedene Dinge zu unterschiedlichen
* Zeitpunkten "springen". Ausnahme: die Modals (Abschnitt 31) werden
* erst unter 600px zu Vollbild - bewusst eigener Wert.
*
* CSS erlaubt keine Variablen in @media-Bedingungen - der Wert steht
* deshalb als Literal in jeder zugehörigen Media Query (suchen:
* "900px"; Gegenstück für "breit": "not all and (max-width: 900px)").
* Bei einer Änderung also überall ersetzen. JavaScript hat KEINE
* eigene Zahl: window.isNarrowScreen() (siehe header.php) liest die
* Hilfsvariable --is-narrow, die genau hier mitgesetzt wird.
* ============================================================ */
:root {
--is-narrow: 0;
}
@media (max-width: 900px) {
:root {
--is-narrow: 1;
}
}
/* ============================================================
* 1. Basis / Reset
* ============================================================ */
/* Einheitliches Box-Modell für das ganze Projekt: padding und border
werden in die angegebene width/height eingerechnet, statt sie zu
vergrößern. Verhindert Breitenüberraschungen wie bei .content
(siehe dortigen Kommentar zu Flexbox-Item-Sizing). */
*, *::before, *::after {
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
margin: 0;
min-height: 100vh;
overflow-x: hidden; /* NEU */
display: flex;
flex-direction: column;
font-family: Arial, sans-serif;
background: #f5f5f5;
}
a {
text-decoration: none;
}
table {
border-collapse: collapse;
background: white;
}
th, td {
border: 1px solid #999;
padding: 5px;
}
/* ============================================================
* 2. Layout
* ============================================================ */
/* Basis-Wrapper für den Seiteninhalt (sorgt u.a. für den Footer am
unteren Rand, siehe body { display:flex; flex-direction:column }). */
.content {
padding: 1rem;
flex: 1;
width: 100%; /* NEU: verhindert das Flex-„fit-content“-Problem */
box-sizing: border-box; /* NEU: padding wird in die 100% eingerechnet */
}
/* Modifikator für kartenbasierte Seiten (admin.php, profile.php,
event_list.php): schmalerer, zentrierter Inhaltsbereich. */
.content.narrow {
max-width: 960px;
margin: 0 auto;
padding: 24px 16px;
}
.content.narrow h1 {
margin: 0 0 20px 0;
}
/* ============================================================
* 3. Navbar (siehe header.php)
* ============================================================ */
.navbar {
position: relative; /* Bezugspunkt für das Hamburger-Overlay */
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 0;
margin: 0;
background: #f8f9fa;
border-bottom: 1px solid #ddd;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
}
body > .navbar + * {
margin-top: 1rem; /* dezenter Abstand zu folgendem Inhalt */
}
/* --- Links: Logo + Titel --- */
.nav-left {
display: flex;
align-items: center;
gap: 0.75rem;
padding-left: 1rem;
}
.nav-logo {
height: 40px;
}
.nav-title {
line-height: 1.1;
}
.nav-title .school {
font-weight: bold;
}
.nav-title .app {
font-size: 0.9em;
color: #555;
}
/* --- Hamburger-Menü (nur auf schmalen Bildschirmen, siehe
Abschnitt 16) --- */
.hamburger-toggle {
display: none;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 8px;
margin-right: 0.5rem;
color: #333;
cursor: pointer;
}
/* Auf dem Desktop soll der Wrapper den bestehenden Flex-Ablauf von
.navbar (.nav-center nimmt den Platz zwischen Logo und rechter
Navigation ein) nicht verändern - "display:contents" blendet ihn
layoutmäßig komplett aus, seine Kinder (.nav-center/.nav-right)
verhalten sich dadurch weiterhin wie direkte Kinder von .navbar,
exakt wie vor dem Hamburger-Umbau. Erst auf schmalen Bildschirmen
(Abschnitt 16) wird daraus ein echtes, auf-/zuklappbares Element. */
.nav-collapsible {
display: contents;
}
/* Abdunkelnder Hintergrund hinter dem geöffneten Hamburger-Menü -
nur auf schmalen Bildschirmen sichtbar (siehe Abschnitt 16). */
.nav-backdrop {
display: none;
}
/* Hamburger-Symbol <-> Schließen-Symbol je nach Menüzustand */
.hamburger-toggle .icon-close {
display: none;
}
.hamburger-toggle[aria-expanded="true"] .icon-open {
display: none;
}
.hamburger-toggle[aria-expanded="true"] .icon-close {
display: block;
}
/* --- Mitte: Datum + Jahrgang/Klasse --- */
.nav-center {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
.nav-center form {
display: flex;
align-items: center;
margin: 0;
}
.nav-center input[type="date"],
.nav-center select {
font-family: inherit;
font-size: 0.9em;
padding: 0.35rem 0.5rem;
border: 1px solid #ccc;
border-radius: 5px;
height: 36px;
min-width: 95px;
box-sizing: border-box;
background: white;
color: #333;
line-height: 1.2;
vertical-align: middle;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
transition: border-color 0.2s, box-shadow 0.2s;
}
.nav-center input[type="date"]:focus,
.nav-center select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 4px rgba(0,123,255,0.5);
}
/* --- Rechts: Navigation --- */
.nav-right {
display: flex;
align-items: center;
gap: 0.75rem;
padding-right: 1rem;
}
.nav-right a,
.dropdown-toggle {
text-decoration: none;
color: #007bff;
background: none;
border: none;
cursor: pointer;
font-size: 0.9em;
}
.dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
}
.dropdown-toggle svg {
flex-shrink: 0;
}
.nav-right a:hover,
.dropdown-toggle:hover {
text-decoration: underline;
}
.dropdown {
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
right: 0;
top: 100%;
background: white;
border: 1px solid #ccc;
min-width: 230px;
white-space: nowrap;
z-index: 1000;
}
.dropdown-menu a {
display: block;
padding: 0.4rem 0.6rem;
color: #000;
}
.dropdown-menu a:hover {
background: #f1f1f1;
}
.dropdown:hover .dropdown-menu {
display: block;
}
/* Kleines PDF-Icon vor Menüpunkten, die ein PDF erzeugen (Inline-SVG aus header.php) */
.pdf-icon {
width: 16px;
height: 14px;
flex-shrink: 0;
margin-right: 8px;
vertical-align: -2px;
}
.pdf-icon-bg {
fill: none;
stroke: currentColor;
stroke-width: 1.2px;
vector-effect: non-scaling-stroke; /* Linie bleibt trotz gestrecktem SVG gleich dick */
}
/* ============================================================
* 4. Footer
* ============================================================ */
.site-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
box-sizing: border-box;
margin-top: 2rem;
padding: 0.75rem 1rem;
background: #f8f9fa;
border-top: 1px solid #ddd;
color: #666;
font-size: 0.85rem;
}
.footer-left {
white-space: nowrap;
}
.footer-nav {
display: flex;
align-items: center;
gap: 1rem;
}
.footer-nav a {
color: #007bff;
text-decoration: none;
}
.footer-nav a:hover {
text-decoration: underline;
}
/* ============================================================
* 5. Nachrichten-Banner über den Kalendern (printMessages())
* ============================================================ */
.calendar-message {
background-color: #ffe5e5;
border: 1px solid #ffb3b3;
border-radius: 12px;
padding: 12px 16px;
margin: 10px 0;
color: #8a1f1f;
font-size: 0.95rem;
line-height: 1.4;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.calendar-message.info {
background-color: #e3f2fd;
border-color: #90caf9;
color: #000000;
}
/* ============================================================
* 6. Kalender (Tag/Monat/Jahr)
* ============================================================ */
.day-calendar,
.month-calendar,
.year-calendar {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
/* Tagesansicht: die Stunden-Spalte soll unabhängig von der Anzahl
der Klassenspalten immer gleich schmal bleiben (siehe colgroup in
calendar_day.php). Ohne diese feste Breite würde table-layout:fixed
sie bei wenigen Klassen unnötig breit ziehen. */
.day-calendar col.col-lesson {
width: 75px;
}
.day-calendar th,
.day-calendar td,
.month-calendar th,
.month-calendar td,
.year-calendar th,
.year-calendar td {
border: 1px solid #aaa;
padding: 4px;
vertical-align: top;
font-size: 13px;
overflow: hidden;
}
.day-calendar th,
.month-calendar th,
.year-calendar th {
background: #eaeaea;
text-align: center;
}
.lesson-time {
font-size: 11px;
color: #555;
}
/* Monatsansicht: Höhe der Kopfzeile bzw. Klassenzeilen soll den
verfügbaren Platz ausfüllen (vorher inline style="..." in
calendar_month.php). */
.month-calendar {
height: fit-content;
}
.month-calendar .class-row {
height: 100%;
}
/* Basisklasse für Eintragungen im Kalender (Klassenarbeit/Veranstaltung) */
.item {
display: block;
width: 100%;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 6px;
border-radius: 4px;
margin: 1px;
font-size: 0.9em;
cursor: pointer;
}
.item:last-child { /* Zusatzplatz nach der letzten Eintragung, damit weitere Klassenarbeiten eingetragen werden können */
margin-bottom: 10px;
}
.event {
background: var(--event-bg-color);
color: var(--event-tx-color);
}
.exam {
background: var(--exam-bg-color);
color: var(--exam-tx-color);
}
.exam.mine {
background: var(--exam-my-bg-color);
color: var(--exam-my-tx-color);
}
.exam-cell {
cursor: pointer;
position: relative;
}
.exam-cell::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none; /* lässt Maus-Events zu echten Kindelementen durch */
}
.holiday {
background: var(--holiday-bg-color);
color: var(--holiday-tx-color);
}
.weekend {
background: var(--weekend-bg-color);
color: var(--weekend-tx-color);
}
.weekend,
.holiday {
pointer-events: none;
}
.noPrint {
font-style: italic;
}
.grade-block {
border-top: 4px solid #000;
}
.grade-start {
border-left: 4px solid #000 !important;
}
/* --- Jahresansicht (calendar_year.php) --- */
.year-calendar .day-cell-flex {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px;
row-gap: 2px;
}
.year-calendar .day-label {
flex: 0 0 auto;
font-size: 11px;
color: #444;
}
.year-calendar .item {
width: auto;
max-width: 100%;
min-width: 0;
flex: 0 1 auto;
margin: 0;
}
/* Zeilenumbruchfreie Kompaktdarstellung von Veranstaltungen in der
Jahresansicht (dort werden Tageszelle und Einträge nebeneinander
im Flex-Layout dargestellt statt untereinander wie sonst). */
.year-calendar .event {
font-size: 12px;
margin-top: 2px;
}
.year-calendar .invalid {
background: #fafafa;
}
/* --- Tooltip und gesperrte Einträge im Kalender
(Tooltip: lib/exam-modal.php und lib/event-modal.php) --- */
.item-tooltip {
position: absolute;
z-index: 3000;
background: #333;
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font-size: 0.8em;
line-height: 1.5;
max-width: 260px;
pointer-events: none;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.item.exam.locked {
cursor: default;
}
.exam-cell.no-click {
cursor: default;
}
/* Im Kalender wird eine Veranstaltung nie per Klick bearbeitet
(das volle Bearbeitungsformular gibt es nur in event_list.php) -
deshalb kein Hand-Cursor. Gilt unverändert auch für Veranstaltungen
mit Stundenbezug, die zusätzlich in den Stundenzeilen stehen
(siehe calendar_day.php). */
.item.event {
cursor: default;
}
/* ============================================================
* 7. Karten & Buttons (gemeinsames UI-Kit)
* ============================================================ */
.card {
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
padding: 20px 24px;
margin-bottom: 20px;
}
.card h2 {
margin-top: 0;
}
.card-actions {
margin-top: 16px;
display: flex;
gap: 10px;
}
.button {
border: none;
padding: 10px 24px;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
}
.button.primary {
background: #2f6fed;
color: #fff;
}
.button.primary:hover {
background: #255ad1;
}
.button.secondary {
background: transparent;
color: #4a5060;
border: 1px solid #c3c9d4;
}
.button.secondary:hover {
background: #eef1f6;
}
.button.secondary.danger {
color: #d1453b;
border-color: #f0c4c1;
}
.button.secondary.danger:hover {
background: #fdeceb;
}
.button.full {
width: 100%;
margin-top: 20px;
}
/* Dezenter Icon-Button (Stift-Icons auf der Profilseite) */
.icon-btn {
border: none;
background: transparent;
cursor: pointer;
padding: 6px;
border-radius: 8px;
color: #4a5060;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s ease;
}
.icon-btn:hover {
background: #eef1f6;
color: #1f2430;
}
.icon-btn:disabled {
opacity: 0.2;
cursor: not-allowed;
}
/* Variante: umrandeter, quadratischer Icon-Button
(Benutzerverwaltung in admin.php) */
.icon-btn.admin-toggle,
.icon-btn.delete-user {
border: 1px solid #c3c9d4;
background: #fff;
border-radius: 8px;
width: 36px;
height: 36px;
font-size: 1rem;
line-height: 1;
opacity: 0.5;
}
.icon-btn.admin-toggle:hover:not(:disabled),
.icon-btn.delete-user:hover:not(:disabled) {
opacity: 1;
background: #f7f9fc;
}
.icon-btn.admin-toggle.active {
border-color: #2f6fed;
background: #eaf1fe;
opacity: 1;
}
.icon-btn.delete-user:hover:not(:disabled) {
border-color: #f0c4c1;
background: #fdeceb;
}
/* --- Schalter (Switch) ---
Verwendet in admin.php (Grundeinstellungen) und in den Modals - dort
mit eigener Farbe, siehe Abschnitt 31.7. --- */
.switch {
position: relative;
display: inline-flex;
align-items: center;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
inset: 0;
background-color: #ccc;
border-radius: 24px;
transition: background 0.3s;
}
.slider::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: 2px;
left: 2px;
background: white;
border-radius: 50%;
transition: transform 0.3s;
}
.switch input:checked + .slider {
background-color: #2f6fed;
}
.switch input:checked + .slider::before {
transform: translateX(26px);
}
/* ============================================================
* 8. Formulare (Eingabefelder, Fehlermeldungen)
* ============================================================ */
.field-label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #4a5060;
margin: 14px 0 6px 0;
}
.field-label:first-of-type {
margin-top: 0;
}
.text-input {
width: 100%;
padding: 10px 12px;
border: 1px solid #c3c9d4;
border-radius: 8px;
font-size: 0.95rem;
box-sizing: border-box;
}
.text-input:focus {
outline: none;
border-color: #2f6fed;
}
.form-error {
background: #fbe4e4;
color: #a12626;
border-radius: 8px;
padding: 8px 12px;
margin: 0 0 14px 0;
font-size: 0.9rem;
}
.hidden {
display: none !important;
}
/* ============================================================
* 9. Tabs (Benutzerverwaltung admin.php)
* ============================================================ */
.user-tabs {
display: flex;
gap: 8px;
margin-bottom: 16px;
border-bottom: 1px solid #eef1f6;
}
.user-tab {
border: none;
background: transparent;
padding: 10px 16px;
font: inherit;
font-weight: 600;
color: #7a8093;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.user-tab.active {
color: #2f6fed;
border-bottom-color: #2f6fed;
}
.user-tab-panel[hidden] {
display: none;
}
/* ============================================================
* 10. Benutzerverwaltung (admin.php)
* ============================================================ */
.user-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #eef1f6;
}
.user-row:last-of-type {
border-bottom: none;
}
.user-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.user-name {
font-weight: 600;
}
.user-username,
.user-last-login {
font-size: 0.85rem;
color: #7a8093;
}
.user-source-badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
background: #eef1f6;
color: #4a5060;
margin-left: 6px;
vertical-align: middle;
}
.user-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.user-create {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #eef1f6;
}
.user-create h3 {
margin: 0 0 10px;
font-size: 1rem;
}
.user-create-form {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.user-create-form input {
flex: 1 1 180px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid #c3c9d4;
font: inherit;
box-sizing: border-box;
}
.user-create-form .button {
flex: 0 0 auto;
}
.user-empty {
color: #7a8093;
font-style: italic;
padding: 8px 0;
}
/* ============================================================
* 11. Nachrichtenverwaltung (admin.php)
* ============================================================ */
.message-card {
padding: 12px 0;
border-bottom: 1px solid #eef1f6;
}
.message-card:last-child {
border-bottom: none;
}
.message-view {
cursor: pointer;
border-radius: 8px;
padding: 6px 8px;
margin: -6px -8px;
}
.message-view:hover {
background: #f7f9fc;
}
.message-content {
white-space: pre-wrap;
}
.message-meta {
color: #7a8093;
margin-top: 4px;
}
.message-textarea {
width: 100%;
min-height: 90px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid #c3c9d4;
font: inherit;
resize: vertical;
box-sizing: border-box;
}
.message-edit-meta {
display: flex;
gap: 20px;
margin-top: 10px;
flex-wrap: wrap;
}
.message-date-label {
font-size: 0.9rem;
color: #4a5060;
display: flex;
align-items: center;
gap: 6px;
}
.message-edit-controls {
margin-top: 12px;
display: flex;
gap: 10px;
}
/* ============================================================
* 12. Schuljahres-/Ferienkalender (admin.php)
* ============================================================ */
.schoolyear-calendar {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.month {
width: 42px;
border: 1px solid #ddd;
border-radius: 6px;
padding: 3px 2px;
}
.month-title {
text-align: center;
font-weight: bold;
font-size: 0.6rem;
margin-bottom: 3px;
}
.day {
display: block;
width: 100%;
height: 18px;
margin-bottom: 1px;
border: none;
border-radius: 4px;
background: white;
font-size: 0.6rem;
line-height: 18px;
padding: 0;
cursor: pointer;
}
/* Gleiche Farben wie auf den Kalenderseiten (siehe Abschnitt 6,
var(--weekend-bg-color)/var(--holiday-bg-color)). Dort haben diese
Klassen zusätzlich pointer-events:none (Kalenderzellen sind nicht
klickbar) - hier im Ferien-Editor muss das aufgehoben werden. */
.day.weekend {
background: var(--weekend-bg-color);
pointer-events: auto;
}
.day.holiday {
background: var(--holiday-bg-color);
pointer-events: auto;
margin-bottom: 0;
}
.day.range-start {
border-radius: 4px 4px 0 0;
}
.day.range-middle {
border-radius: 0;
margin-bottom: 0;
}
.day.range-end {
border-radius: 0 0 4px 4px;
}
/* ============================================================
* 13. Klassenverwaltung (admin.php)
* ============================================================ */
.class-group {
border: 1px solid #ddd;
border-radius: 12px;
padding: 10px;
margin-bottom: 10px;
cursor: grab;
}
.class-group.dragging {
opacity: 0.5;
}
.class-group-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.class-group-header .group-name {
font-weight: bold;
cursor: pointer;
padding: 2px 4px;
}
.class-group-header.editing {
gap: 6px;
}
/* Breite orientiert an "Klassen 10" (10 Zeichen) + Zuschlag */
.group-name-input {
width: 12ch;
font: inherit;
font-weight: bold;
padding: 4px 8px;
border: 1px solid #2f6fed;
border-radius: 6px;
box-sizing: content-box;
}
.class-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.class-chip {
background: #f0f0f0;
border-radius: 20px;
padding: 4px 10px;
font-size: 0.8rem;
cursor: pointer;
display: flex;
align-items: center;
}
.class-chip.add {
background: #ddd;
}
.class-chip.editing {
background: transparent;
padding: 0;
gap: 4px;
cursor: default;
}
/* Breite orientiert an "10a" (3 Zeichen) + Zuschlag */
.class-chip.editing input {
width: 5ch;
padding: 4px 8px;
border: 1px solid #2f6fed;
border-radius: 20px;
font-size: 0.8rem;
box-sizing: content-box;
}
/* Gemeinsamer Stil für ✓/🗑️ - identisch bei Jahrgang und Klasse */
.edit-action {
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.8rem;
flex-shrink: 0;
}
.edit-confirm {
background: #d9f0da;
color: #1e7e2b;
}
.edit-confirm:hover {
background: #c3e6c5;
}
.edit-delete {
background: #fbdede;
}
.edit-delete:hover {
background: #f7c9c9;
}
.save-indicator {
margin-left: 10px;
font-size: 0.85rem;
color: #1e7e2b;
opacity: 0;
transition: opacity 0.3s;
}
.save-indicator.show {
opacity: 1;
}
/* ============================================================
* 14. Profil: Klassen-Kartenraster (profile.php)
* ============================================================ */
.info-row {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
.info-row span {
color: #666;
}
.info-row-classes {
align-items: flex-start;
}
.classes-value {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.classes-value .col-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
.chip {
background: #eef1f6;
border-radius: 999px;
padding: 3px 10px;
font-size: 0.85rem;
font-weight: normal;
}
.empty {
color: #9aa1ad;
font-style: italic;
font-weight: normal;
}
.value-with-action {
display: flex;
align-items: center;
gap: 8px;
}
.edit-header h2 {
margin: 0 0 16px 0;
}
.jahrgang-group {
margin-bottom: 18px;
}
.jahrgang-group:last-child {
margin-bottom: 0;
}
.jahrgang-title {
margin: 0 0 8px 0;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #7b8291;
}
.jahrgang-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.class-card {
position: relative;
border: 1px solid #e2e5eb;
border-radius: 10px;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 10px;
background: #fafbfc;
cursor: pointer;
width: 110px;
user-select: none;
}
.class-card.selected {
background: #eef4ff;
border-color: #b9d3ff;
}
.class-card .real-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.class-card .class-name {
font-weight: 500;
flex: 1 1 auto;
}
.card-action {
width: 22px;
height: 22px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
.card-action.icon-checkbox {
border: 2px solid #c3c9d4;
border-radius: 5px;
background: #fff;
}
.card-action.icon-trash {
color: #d33d3d;
display: none;
}
.class-card.selected .icon-checkbox {
display: none;
}
.class-card.selected .icon-trash {
display: flex;
}
.edit-actions {
margin-top: 20px;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.sessions {
margin-top: 25px;
}
/* ============================================================
* 15. Veranstaltungsliste (event_list.php)
* ============================================================ */
/* Ersteller in der Veranstaltungsliste: zwei Darstellungen, die per
CSS je nach Bildschirmbreite umgeschaltet werden (siehe
@media (max-width: 900px) in Abschnitt 17):
- .creator-cell -> eigene Spalte ganz rechts (breite/Tabellenansicht,
reiner Spaltentext, kein Badge)
- .creator-inline -> kleines Badge direkt hinter dem Datum
(schmale/Listenansicht auf Handys) */
.creator-cell {
white-space: nowrap;
}
/* Zweite Zeile im Datums-Feld (Enddatum bei mehrtägigen Veranstaltungen,
oder ersatzweise die Stunden bei Veranstaltungen mit Stundenbezug -
siehe event_list.php). "display:block" erzwingt hier zuverlässig eine
zweite Zeile, unabhängig von der Spaltenbreite. Sobald .date-cell im
schmalen Layout zu einem Flex-Container wird (siehe media query
weiter unten), positioniert stattdessen Flexbox dieses Element in
derselben Zeile wie das Datum - "display:block" wird dann von der
Flex-Anordnung überstimmt, ohne dass hierfür eine eigene Regel nötig
wäre. */
.date-secondary {
display: block;
}
.creator-inline {
display: none; /* Standard: breite Ansicht zeigt stattdessen .creator-cell */
margin-left: 8px;
font-size: 0.75rem;
font-weight: normal;
vertical-align: middle;
}
/* ============================================================
* 16. Responsive
* ============================================================ */
@media (max-width: 900px) {
.hamburger-toggle {
display: flex;
position: relative;
z-index: 1001; /* bleibt beim geöffneten Menü über dem Abdunkeln */
min-width: 44px;
min-height: 44px;
}
/* Aus "display:contents" (Desktop) wird hier ein echtes Overlay:
schmal, rechtsbündig unter der Kopfzeile, über dem Seiteninhalt
mit Schatten (und abgedunkeltem Hintergrund, siehe
.nav-backdrop). Mitte und rechte Navigation stapeln sich
darin untereinander. */
.nav-collapsible {
display: none;
position: absolute;
top: 100%;
right: 0;
width: min(300px, 85vw);
max-height: 80vh;
overflow-y: auto;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
padding: 0.75rem 1rem 1rem;
background: #fff;
border-radius: 0 0 0 12px;
box-shadow: -4px 8px 24px rgba(0,0,0,0.3);
z-index: 1000;
}
.nav-collapsible.open {
display: flex;
}
.nav-backdrop.open {
display: block;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 900;
}
body.nav-open {
overflow: hidden;
}
.nav-center {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.nav-center form {
width: 100%;
}
.nav-center input[type="date"],
.nav-center select {
width: 100%;
height: 44px;
padding: 0.45rem 0.6rem;
font-size: 1rem;
}
.nav-right {
flex-direction: column;
align-items: stretch;
gap: 0;
padding-right: 0;
padding-top: 0.5rem;
border-top: 1px solid #e2e5eb;
}
/* Alle Menüpunkte (Hauptlinks UND Benutzermenü) einheitlich:
gleiche Schrift, Farbe und Mindesthöhe für sicheres Antippen. */
.nav-right a,
.dropdown-menu a {
display: flex;
align-items: center;
min-height: 44px;
padding: 0.4rem 0.5rem;
font-size: 1rem;
color: #1f2430;
border-radius: 8px;
}
.nav-right a:hover,
.dropdown-menu a:hover {
background: #f1f1f1;
text-decoration: none;
}
/* Benutzermenü "flach": keine eigene Überschrift (Icon + Kürzel)
und kein Popup mehr - stattdessen eine Trennlinie, danach die
Einträge als normaler Teil der Liste (unabhängig von :hover,
das auf Touch-Geräten ohnehin nicht zuverlässig funktioniert). */
.dropdown-toggle {
display: none;
}
.dropdown {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid #e2e5eb;
}
.dropdown-menu {
display: block;
position: static;
background: none;
border: none;
min-width: 0;
white-space: normal;
padding: 0;
z-index: auto;
}
}
@media (max-width: 900px) {
.nav-logo {
height: 32px;
}
.site-footer {
flex-direction: column;
justify-content: center;
text-align: center;
gap: 0.5rem;
}
.footer-nav {
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
}
/* ============================================================
* 17. Responsive Datensatzliste (CSS-Grid statt )
* ============================================================
* Für Listen, die auf schmalen Bildschirmen nicht gut funktionieren
* (Veranstaltungsliste in event_list.php, später auch Aktive
* Anmeldungen in profile.php). Kopf- und Datenzeilen sind
* "display:contents" - ihre Felder werden direkte Grid-Zellen im
* gemeinsamen Spaltenraster von .record-list, dadurch immer exakt
* senkrecht ausgerichtet wie bei einer echten Tabelle.
* ============================================================ */
.record-list {
display: grid;
grid-template-columns: 150px 2fr 1.5fr 1fr;
margin-top: 16px;
}
.record-list.with-user {
grid-template-columns: 150px 2fr 1.5fr 1fr 140px;
}
.record-list.with-user.with-pdf-select {
grid-template-columns: 150px 2fr 1.5fr 1fr 140px 40px;
}
.record-list.sessions {
grid-template-columns: 2fr 1fr 140px;
}
.record-list-header,
.record {
display: contents;
}
.record-header-cell {
padding: 0 12px 10px 12px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #7b8291;
border-bottom: 1px solid #c3c9d4;
}
.record-field {
padding: 10px 12px;
border-bottom: 1px solid #e2e5eb;
min-width: 0;
}
.record-field.primary {
font-weight: 600;
}
.record-field.secondary {
font-size: 0.85rem;
color: #7a8093;
}
.record.eventRow {
cursor: pointer;
}
.record:hover > .record-field {
background: #f7f9fc;
}
@media (max-width: 900px) {
.record-list,
.record-list.with-user,
.record-list.with-user.with-pdf-select,
.record-list.sessions {
grid-template-columns: 1fr;
}
.record-header-cell {
display: none;
}
.record-field {
padding: 3px 12px;
border-bottom: none;
}
.record-field:last-child {
padding-bottom: 10px;
border-bottom: 1px solid #e2e5eb;
}
/* Ersteller in der Listenansicht: eigene Spalte entfällt,
stattdessen Badge direkt hinter dem Datum (siehe Abschnitt 15
und die .date-cell-Markup in event_list.php) - so bleibt ein
einzelner Eintrag bei 3 statt 4 Zeilen. */
.creator-cell {
display: none;
}
.creator-inline {
display: inline-block;
}
.date-cell {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
}
/* ============================================================
* 18. Schuljahreswechsel (admin.php)
* ============================================================ */
.reset-info {
color: #7a8093;
font-size: 0.9rem;
margin: 0 0 4px 0;
}
.reset-results {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.reset-result-row {
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 8px;
}
.reset-result-row.error {
color: #d1453b;
}
/* ============================================================
* 19. Login-Seite (index.php)
* ============================================================
* index.php bindet weder header.php noch footer.php ein. Die Klasse
* "login-page" am grenzt die abweichenden Body-Regeln
* (Hintergrund, Zentrierung) gezielt von den App-weiten body-Regeln
* aus Abschnitt 1 ab, ohne diese für alle anderen Seiten zu ändern.
* ============================================================ */
body.login-page {
background: linear-gradient(135deg, #1e3c72, #2a5298);
justify-content: center;
align-items: center;
padding: 16px;
box-sizing: border-box;
}
/* Reset bewusst nur innerhalb der Login-Seite (nicht global über "*",
um die gewohnten Abstände auf den übrigen Seiten nicht zu verändern) */
.login-page,
.login-page *,
.login-page *::before,
.login-page *::after {
margin: 0;
padding: 0;
}
.login-box {
background: #ffffff;
padding: 40px;
border-radius: 12px;
width: 100%;
max-width: 320px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
text-align: center;
box-sizing: border-box;
}
.login-box img {
width: 80px;
margin-bottom: 20px;
}
.login-box h2 {
margin-bottom: 20px;
color: #333;
}
.login-box input,
.login-box button {
width: 100%;
padding: 12px;
margin: 10px 0;
border-radius: 8px;
font-size: 14px;
}
.login-box input {
border: 1px solid #ccc;
outline: none;
}
.login-box input:focus {
border-color: #2a5298;
box-shadow: 0 0 5px rgba(42,82,152,0.3);
}
.login-box button {
background: #2a5298;
color: #fff;
border: none;
cursor: pointer;
transition: background 0.2s ease;
}
.login-box button:hover {
background: #1e3c72;
}
.password-wrapper {
position: relative;
width: 100%;
}
.password-wrapper input {
padding-right: 40px;
}
.toggle-password {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #666;
font-size: 16px;
}
.toggle-password:hover {
color: #000;
}
.login-box .error {
color: red;
margin-top: 10px;
font-size: 14px;
}
@media (max-width: 360px) {
.login-box {
padding: 28px 20px;
}
}
/* ============================================================
* 20. Versionsübersicht (changelog.php)
* ============================================================ */
.changelog-entry {
padding: 14px 0;
border-bottom: 1px solid #eef1f6;
}
.changelog-entry:last-child {
border-bottom: none;
}
.changelog-header {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 12px;
margin-bottom: 6px;
}
.changelog-version {
font-weight: 700;
color: #2f6fed;
}
.changelog-date {
font-size: 0.85rem;
color: #7a8093;
}
.changelog-list {
margin: 0;
padding-left: 20px;
}
.changelog-list li {
margin-bottom: 4px;
}
/* ============================================================
* 21. Grundeinstellungen (admin.php)
* ============================================================ */
.settings-grid {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.settings-toggle-row,
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.settings-row input[type="month"] {
padding: 8px 10px;
border: 1px solid #c3c9d4;
border-radius: 8px;
}
.settings-colors {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.color-group {
border: 1px solid #e2e5eb;
border-radius: 10px;
padding: 12px;
}
.color-group-label {
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 10px;
}
.color-group-controls {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.color-pick {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
font-size: 0.75rem;
color: #7a8093;
}
.color-pick input[type="color"] {
width: 40px;
height: 32px;
padding: 0;
border: 1px solid #c3c9d4;
border-radius: 6px;
cursor: pointer;
background: none;
}
.color-preview {
flex: 1 1 100px;
min-width: 100px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 600;
border: 1px solid rgba(0,0,0,0.08);
}
.lessons-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
}
.lesson-row {
display: flex;
align-items: center;
gap: 8px;
}
.lesson-row .lesson-num {
width: 24px;
font-weight: 600;
}
.lesson-row input[type="time"] {
padding: 6px 8px;
border: 1px solid #c3c9d4;
border-radius: 6px;
}
/* Speichern-Zeile am Ende der Grundeinstellungen: gilt für ALLE
Einstellungen der Karte (Schalter, Zeiträume, Farben, Stunden),
daher durch eine Linie von "Stunde hinzufügen" abgesetzt. */
.settings-save-row {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid #eef1f6;
align-items: center;
}
/* ============================================================
* 22. Legende (help.php)
* ============================================================ */
.legend-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
.legend-row + .legend-row {
margin-top: 14px;
}
.legend-item {
display: flex;
align-items: center;
gap: 10px;
}
.legend-sample {
margin: 0;
}
.legend-sample td {
width: 56px;
height: 30px;
padding: 0;
}
.legend-swatch {
width: auto;
white-space: nowrap;
cursor: default;
margin: 0;
}
/* ============================================================
* 23. Hilfeseite: Screenshots (help.php)
* ============================================================ */
.help-shot {
max-width: 100%;
border: 1px solid #ddd;
border-radius: 8px;
margin: 12px 0;
display: block;
}
/* ============================================================
* 24. Tags (admin.php, event_list.php, lib/event-modal.php)
* ============================================================
* .tag-badge ist die gemeinsame Basis für alle Tag-Darstellungen
* (Verwaltung in admin.php, Filter und Badges in event_list.php,
* Auswahl im Overlay von lib/event-modal.php - siehe Abschnitt 31.10
* für die dortigen Overlay-spezifischen Styles).
* ============================================================ */
.tag-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 0.78rem;
color: #fff;
white-space: nowrap;
}
/* --- Badge-Spalte in der Veranstaltungsliste (event_list.php) --- */
.record-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: flex-start;
}
/* --- Tag-Filter (event_list.php, Filterleiste "Alle Veranstaltungen") --- */
/* --- Tag-Verwaltung (admin.php) ---
Editor-Muster identisch zur Nachrichtenverwaltung (Abschnitt 11):
Klick auf die Ansicht öffnet Bezeichnung/Erklärung/Farbe, Speichern/
Abbrechen/Löschen als explizite Buttons. */
.tag-card {
padding: 10px 0;
border-bottom: 1px solid #eef1f6;
}
.tag-card:last-child {
border-bottom: none;
}
.tag-view {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
border-radius: 8px;
padding: 4px 6px;
margin: -4px -6px;
}
.tag-view:hover {
background: #f7f9fc;
}
.tag-view-desc {
font-size: 0.85rem;
color: #7a8093;
}
.tag-edit-fields {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tag-edit-controls {
margin-top: 8px;
display: flex;
gap: 10px;
}
/* ============================================================
* 25. Veranstaltungsfilter (event_list.php, lib/event-filter.php)
* ============================================================
* Sitzt als eigenständiges Element (im Kartendesign, aber ohne
* eigene .card drumherum) direkt über der Veranstaltungsliste.
* Optisch an Bootstraps input-group angelehnt: die einzelnen
* Segmente (Kategorie-Chips, Suchfeld, Filter-Button) sitzen ohne
* Zwischenraum nebeneinander, getrennt nur durch dezente
* Trennlinien; nur das erste und letzte Segment sind abgerundet,
* damit die ganze Zeile wie ein durchgehender Balken wirkt. Die
* Popover je Chip dürfen deshalb NICHT über overflow:hidden am
* Container abgeschnitten werden.
* ============================================================ */
.filter-row {
display: flex;
align-items: stretch;
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
margin-bottom: 20px;
}
.filter-row > * {
border-right: 1px solid #eef1f6;
}
.filter-row > *:last-child {
border-right: none;
}
.filter-row > *:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.filter-row > *:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.filter-chip {
position: relative;
display: flex;
align-items: center;
gap: 4px;
padding: 10px 14px;
font-size: 0.85rem;
color: #4a5060;
white-space: nowrap;
cursor: pointer;
user-select: none;
}
.filter-chip:hover {
background: #f7f9fc;
}
.filter-chip.active {
color: #2f6fed;
background: #eaf1fe;
}
.filter-chip-clear {
border: none;
background: transparent;
color: inherit;
cursor: pointer;
font-size: 1rem;
line-height: 1;
padding: 0;
opacity: 0.7;
}
.filter-chip-clear:hover {
opacity: 1;
}
/* Popover je Chip - bewusst eigenständig statt .tag-picker-overlay
wiederzuverwenden, da jener relativ zu .modal-box positioniert war;
hier ist der jeweilige Chip selbst der Anker (position:relative). */
.filter-popover {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 200px;
max-width: 300px;
background: #fff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 14px rgba(0,0,0,0.2);
padding: 10px;
z-index: 50;
cursor: default;
}
.filter-popover.open {
display: block;
}
.filter-popover input[type="date"] {
padding: 6px 8px;
border: 1px solid #aaa;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
}
.filter-popover-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: min(280px, 50vh);
overflow-y: auto;
}
.filter-option {
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
}
.filter-option:hover {
background: #f7f9fc;
}
.filter-option.selected {
background: #eaf1fe;
}
.filter-option-empty {
color: #888;
font-style: italic;
padding: 6px 8px;
}
.filter-search-wrap {
display: flex;
align-items: center;
gap: 6px;
flex: 1 1 90px;
min-width: 90px;
padding: 0 12px;
}
.filter-search {
flex: 1;
width: 90px;
min-width: 0;
border: none;
background: transparent;
font: inherit;
padding: 6px 0;
outline: none;
transition: width 0.15s ease;
}
.filter-search:focus,
.filter-search.has-value {
width: 220px;
}
.filter-button {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 18px;
border: none;
background: transparent;
color: #9aa1ad;
cursor: default;
}
/* ============================================================
* 26. PDF-Auswahl für Klassen (event_list.php, "Alle Veranstaltungen")
* ============================================================
* Zusätzliche Card-Zeile unter dem Filter (.filter-row), nur
* sichtbar für Nutzer mit zugewiesenen Klassen. "Keine" + die
* eigenen Klassen bilden eine Umschalter-Gruppe (immer genau ein
* Chip aktiv, siehe render_pdf_select_ui() in lib/event-filter.php);
* ist eine Klasse aktiv, blendet JS über die Klasse
* ".with-pdf-select" auf #eventRecordList die Pin-Spalte ein
* (siehe Abschnitt 17 für die zugehörige Grid-Spaltenanpassung).
* ============================================================ */
.pdf-select-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
padding: 12px 16px;
margin-bottom: 20px;
font-size: 0.85rem;
}
.pdf-select-label {
font-weight: 600;
color: #4a5060;
margin-right: 4px;
}
.pdf-select-chip {
padding: 6px 14px;
border-radius: 999px;
background: #eef1f6;
color: #4a5060;
cursor: pointer;
user-select: none;
}
.pdf-select-chip:hover {
background: #e2e7f0;
}
.pdf-select-chip.active {
background: #2f6fed;
color: #fff;
}
.pdf-pin-cell {
display: none;
align-items: center;
justify-content: center;
}
.record-list.with-pdf-select .pdf-pin-cell {
display: flex;
}
.pdf-pin-btn {
color: #b9c0cc;
}
.pdf-pin-btn.active {
color: #2f6fed;
}
/* --- Pin in der ersten Zeile (Listenansicht auf schmalen Bildschirmen) ---
Breit: eigene Spalte (.pdf-pin-cell). Schmal: die Spalte entfällt,
stattdessen sitzt .pdf-pin-inline rechtsbündig in der Datumszeile
(nach dem Ersteller-Badge) - gleiches Muster wie .creator-cell /
.creator-inline in Abschnitt 15/17. */
.pdf-pin-inline {
display: none;
}
@media (max-width: 900px) {
.record-list.with-user.with-pdf-select .pdf-pin-cell {
display: none;
}
.record-list.with-pdf-select .pdf-pin-inline {
display: flex;
margin-left: auto;
}
/* Die Trennlinie zwischen den Einträgen hing bisher am letzten
Feld (Ersteller bzw. Pin-Spalte) - beide entfallen hier, daher
jetzt am Tag-Feld. */
.record-list.with-user .record-tags {
padding-bottom: 10px;
border-bottom: 1px solid #e2e5eb;
}
}
/* ============================================================
* 25b. Veranstaltungsfilter auf schmalen Bildschirmen (Umbruch)
* ============================================================
* Die Filterzeile bricht in 2 (bei vielen aktiven Kriterien auch
* 3) Zeilen um, statt seitlich abgeschnitten zu werden. Trennlinien
* hängen dabei rechts UND unten an jedem Segment (statt nur rechts),
* damit sie auch zwischen den Zeilen sichtbar bleiben.
*
* Die Popover verankern sich hier an der ganzen Filterzeile statt am
* einzelnen Chip (Chip: position:static, Zeile: position:relative)
* und nehmen deren volle Breite ein - sonst würden sie bei Chips am
* rechten Rand über den Bildschirmrand hinausragen.
* ============================================================ */
.filter-row {
flex-wrap: wrap;
}
@media (max-width: 900px) {
.filter-row {
position: relative;
}
.filter-row > * {
border-bottom: 1px solid #eef1f6;
}
.filter-chip {
position: static;
padding: 10px 10px;
max-width: 100%;
min-width: 0;
}
/* Lange Auswahl (z.B. "Klassen: 5a, 5b, 6a, 6b") kürzen statt die Zeile zu sprengen */
.filter-chip-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.filter-popover {
left: 0;
right: 0;
top: calc(100% + 6px);
min-width: 0;
max-width: none;
}
.filter-search-wrap {
flex: 1 1 120px;
min-height: 40px;
}
.filter-search,
.filter-search:focus,
.filter-search.has-value {
width: 100%;
}
.filter-button {
min-height: 40px;
padding: 0 14px;
}
}
/* ============================================================
* 27. Monatskalender: ganzjährige Scroll-Ansicht (calendar_month.php)
* ============================================================
* calendar_month.php rendert inzwischen immer das ganze Schuljahr
* in einer durchlaufenden Tabelle. Welcher Ausschnitt sichtbar ist,
* steuert ausschließlich CSS:
* - Breite Bildschirme: echter Monat, Spalten gleichmäßig über
* den verfügbaren Platz verteilt (--dim = Anzahl sichtbarer
* Tage des jeweiligen Monats, von PHP pro Zelle mitgegeben) ->
* Monate sind dadurch unterschiedlich breit.
* - Schmale Bildschirme: feste Aufteilung in 5 Spalten (eine Woche).
* Snap-Punkte: .month-start (breit) bzw. .week-start (schmal) -
* die jeweils andere Klasse ist per Media Query deaktiviert, damit
* nicht beide gleichzeitig wirken. Die erste Spalte (Klassen) bleibt
* in beiden Fällen sticky.
* ============================================================ */
:root {
--sticky-width: 70px;
}
/* Am Schuljahresanfang (September) bzw. -ende (Juli) gibt es keinen
weiteren Monat/Woche/Block in diese Richtung - der jeweilige
Pfeil-Button (.cal-nav-btn, siehe Abschnitt 29) wird per JS
ausgeblendet. visibility statt display, damit die übrigen Buttons
ihre Position behalten. */
.hidden-edge {
visibility: hidden;
pointer-events: none;
}
/* Monatsabkürzung unter der Tagesnummer in der Spaltenkopfzeile -
nur auf schmalen Bildschirmen sichtbar. */
.month-calendar .month-abbr {
display: none;
}
@media (max-width: 900px) {
.month-calendar .month-abbr {
display: block;
font-size: 0.65em;
font-weight: normal;
color: #666;
}
}
.month-calendar-scroll {
position: relative;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* Nötig, damit "cqw" weiter unten sich auf DIESEN Container
bezieht statt auf das Browserfenster - siehe Kommentar an den
width-Regeln. */
container-type: inline-size;
}
.month-calendar-scroll::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0;
width: 28px;
background: linear-gradient(to right, rgba(245,245,245,0), rgba(245,245,245,0.95));
pointer-events: none;
}
.month-calendar th.cell-head:first-child,
.month-calendar td:first-child {
position: sticky;
left: 0;
z-index: 5;
background: #eaeaea;
width: var(--sticky-width);
}
/* Breite Bildschirme: echter Monat, Spaltenbreite richtet sich nach
der Tageszahl des jeweiligen Monats (--dim, pro Zelle von PHP
gesetzt) - Monate werden dadurch unterschiedlich breit. */
@media not all and (max-width: 900px) { /* = breit, Gegenstück zu max-width:900px */
.month-calendar th:not(:first-child),
.month-calendar td:not(:first-child) {
/* WICHTIG: "%" funktioniert hier NICHT - bei table-layout:fixed
normalisiert der Browser Prozent-Spaltenbreiten so, dass sie
in Summe immer genau die Tabellenbreite ergeben, egal wie
viele Spalten es gibt. Das verhindert jeden Overflow und
damit jedes Scrollen. "cqw" (Container-Query-Einheit, bezieht
sich auf .month-calendar-scroll via container-type oben) ist
eine absolute Längeneinheit und wird NICHT normalisiert -
dadurch wird die Tabelle tatsächlich breiter als der
sichtbare Ausschnitt, wie gewünscht.
vw-Zeile zuerst als Fallback für Browser ohne Container-Query-
Unterstützung; die cqw-Zeile danach überschreibt sie dort,
wo sie unterstützt wird. */
width: calc((100vw - var(--sticky-width)) / var(--dim));
width: calc((100cqw - var(--sticky-width)) / var(--dim));
}
/* WICHTIG: Reihenfolge der beiden Regeln ist entscheidend, nicht
nur Dekoration! Eine Zelle kann GLEICHZEITIG .month-start und
.week-start sein (wenn der 1. eines Monats auf einen Montag
fällt - z.B. November in diesem Schuljahr). Bei gleicher
Spezifität gewinnt dann die zuletzt stehende Regel - deshalb
steht die "ausschalten"-Regel für .week-start hier bewusst
VOR der "einschalten"-Regel für .month-start, damit auf
breiten Bildschirmen IMMER der Monats-Snap gewinnt, egal in
welcher Reihenfolge die Klassen im class-Attribut stehen. */
.month-calendar .week-start {
scroll-snap-align: none;
}
.month-calendar .month-start {
scroll-snap-align: start;
scroll-margin-left: var(--sticky-width);
}
}
/* Schmale Bildschirme: feste Woche, 5 gleich breite Spalten
unabhängig davon, wie viele Tage die jeweilige (ggf.
unvollständige) Woche tatsächlich enthält. */
@media (max-width: 900px) {
/* Klassenspalte in der Wochenansicht schmaler: 28px statt 70px
(= 2/5 der bisherigen Breite). Alles andere (Tagesspaltenbreite,
scroll-margin-left der Snap-Punkte, JS in calendar_month.php)
liest --sticky-width und passt sich automatisch an. Auf breiten
Bildschirmen bleibt es bei den 70px. */
:root {
--sticky-width: 28px;
}
/* Damit auch dreistellige Namen wie "10a" in die schmale Spalte
passen: weniger Innenabstand, etwas kleinere Schrift. */
.month-calendar th.cell-head:first-child,
.month-calendar td:first-child {
padding-left: 1px;
padding-right: 1px;
font-size: 12px;
}
.month-calendar th:not(:first-child),
.month-calendar td:not(:first-child) {
/* Siehe ausführlichen Kommentar in der Desktop-Regel oben -
derselbe Grund, dieselbe Lösung. */
width: calc((100vw - var(--sticky-width)) / 5);
width: calc((100cqw - var(--sticky-width)) / 5);
}
/* Gleicher Grund wie in der Desktop-Regel oben, nur umgekehrt:
hier muss .week-start gewinnen, wenn eine Zelle beide Klassen
trägt - also "ausschalten" für .month-start zuerst, dann
"einschalten" für .week-start zuletzt. */
.month-calendar .month-start {
scroll-snap-align: none;
}
.month-calendar .week-start {
scroll-snap-align: start;
scroll-margin-left: var(--sticky-width);
}
}
/* ============================================================
* 28. Jahreskalender: Monatsspalten-Paging auf schmalen Bildschirmen
* (calendar_year.php)
* ============================================================
* Anders als beim Monatskalender sind hier ALLE Spalten gleich
* breit (keine --dim-Variabilität) - die Anzahl gleichzeitig
* sichtbarer Monate (--year-cols) kommt direkt aus PHP
* ($year_calendar_mobile_columns in config.php) und wird als
* Custom Property auf .year-calendar-scroll gesetzt.
* Snap-Punkte liegen nur alle --year-cols Monate (.year-block-start,
* von PHP gesetzt) statt bei jedem einzelnen Monat - es entstehen
* dadurch feste "Seiten". Der letzte, ggf. unvollständige Block
* bleibt bewusst gleich breit wie die übrigen (keine Sonderbehandlung
* nötig, da die Breite ohnehin konstant ist) - es entsteht dort
* einfach ungenutzter Platz rechts, statt die Spalten zu dehnen.
* Auf breiten Bildschirmen (Desktop) bleibt die bisherige
* 11-Monats-Ansicht unverändert.
* ============================================================ */
@media (max-width: 900px) {
.year-calendar-scroll {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* Nötig, damit "cqw" sich auf DIESEN Container bezieht statt
auf das Browserfenster - siehe Kommentar bei Abschnitt 27. */
container-type: inline-size;
position: relative;
}
.year-calendar-scroll::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0;
width: 28px;
background: linear-gradient(to right, rgba(245,245,245,0), rgba(245,245,245,0.95));
pointer-events: none;
}
.year-calendar th,
.year-calendar td {
/* "%" funktioniert hier aus demselben Grund nicht wie beim
Monatskalender - siehe ausführlichen Kommentar in
Abschnitt 27. vw zuerst als Fallback, cqw danach. */
width: calc(100vw / var(--year-cols));
width: calc(100cqw / var(--year-cols));
}
.year-calendar .year-block-start {
scroll-snap-align: start;
}
}
/* ============================================================
* 29. Kalender-Werkzeugleiste (calendar_day/month/year.php)
* ============================================================
* Eine Zeile aus Überschrift (links, mit optionalem Filterzusatz
* darunter) und Bedienelementen (rechts: Heute, zurück, vor).
* Die Buttons stehen bewusst RECHTS an fester Stelle statt direkt
* neben dem Titel: Der Titel wechselt beim Scrollen die Länge
* ("Mai 2027" / "September 2026"), die Pfeile würden sonst bei
* schnellem Antippen wegspringen.
* Touch-Ziele: 44px schmal, 40px am Desktop.
* .cal-toolbar--narrow-controls: Bedienelemente nur auf schmalen
* Bildschirmen (Jahreskalender - am Desktop ist das ganze Jahr
* ohnehin sichtbar).
* ============================================================ */
.cal-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px 0;
}
.cal-heading {
flex: 1 1 auto;
min-width: 0;
}
.cal-title {
margin: 0;
font-size: 1.5rem;
line-height: 1.2;
font-weight: 700;
}
/* Monatskalender: zwei Textvarianten (breit: "November 2026",
schmal: "KW 46 · Nov 2026"), beide serverseitig vorbelegt und per
JS beim Scrollen nachgeführt - CSS blendet die passende ein. */
.cal-title .t-narrow {
display: none;
}
.cal-filter {
margin-top: 2px;
font-size: 0.85rem;
color: #7a8093;
}
.cal-controls {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.cal-nav-btn,
.cal-today-btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 40px;
padding: 0;
border: 1px solid #c3c9d4;
border-radius: 10px;
background: #fff;
color: #2f6fed;
font: inherit;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.cal-nav-btn {
width: 40px;
}
.cal-today-btn {
padding: 0 14px;
border-color: #2f6fed;
}
.cal-nav-btn:hover,
.cal-today-btn:hover {
background: #eaf1fe;
}
.cal-nav-btn svg {
width: 24px;
height: 24px;
fill: currentColor;
}
@media (max-width: 900px) {
.cal-title {
font-size: 1.1rem;
}
.cal-title .t-wide {
display: none;
}
.cal-title .t-narrow {
display: inline;
}
.cal-controls {
gap: 6px;
}
.cal-nav-btn,
.cal-today-btn {
height: 44px;
}
.cal-nav-btn {
width: 44px;
}
}
@media not all and (max-width: 900px) {
.cal-toolbar--narrow-controls .cal-controls {
display: none;
}
}
/* ============================================================
* 30. Klassen-Auswahl-Raster (Veranstaltungs-Modal, Filter in event_list.php)
* ============================================================ */
.classGrid {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
width: 100%;
min-width: 0;
}
.btn {
padding: 8px 10px;
border-radius: 6px;
border: 1px solid #ccc;
background: #f3f3f3;
cursor: pointer;
text-align: center;
user-select: none;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.btn.school {
writing-mode: vertical-rl;
transform: rotate(180deg);
display: flex;
align-items: center;
justify-content: center;
background: #bbb;
font-weight: bold;
min-width: 40px;
flex-shrink: 0; /* NEU: die vertikale Spalte soll nicht schrumpfen */
}
.classRows {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.classRow {
display: flex;
gap: 6px;
min-width: 0;
}
.btn.year {
font-weight: bold;
background: #e0e0e0;
flex: 0 0 34px;
padding: 8px 4px;
}
.btn.evt_classBtn {
flex: 1 1 0;
padding: 8px 4px;
}
.btn.selected {
background: #1976d2;
color: white;
border-color: #1976d2;
}
@media (max-width: 600px) {
.btn {
padding: 6px 2px;
font-size: 0.85em;
}
.btn.year {
flex-basis: 28px;
}
}
/* ============================================================
* 31. Modals: Klassenarbeit (lib/exam-modal.php) und
* Veranstaltung (lib/event-modal.php)
* ============================================================
* Beide Modals folgen demselben Aufbau (Overlay/Box/Formular-Gruppen/
* Buttons) - hier unter einheitlichen "modal-*"-Klassen zusammengefasst.
* Farb-/Themenunterschiede bleiben über #examForm/#eventForm erhalten.
* Allgemein nutzbare Teile liegen nicht hier: Tooltip (Abschnitt 6),
* Switch (Abschnitt 7), Klassen-Auswahl-Raster (Abschnitt 30).
*
* 31.1 Overlay & Box
* 31.2 Formular-Grundgerüst
* 31.3 Formular-Gruppen
* 31.4 Info-Bereich (Ersteller/Erstellungsdatum)
* 31.5 Buttons
* 31.6 Stunden-Auswahl (Klassenarbeit-Modal, Basis für .lessonBox)
* 31.7 Optionen-Zeile (Klassenarbeit-Modal)
* 31.8 Zeitraum-Zeile + Stunden-Popover (Veranstaltungs-Modal)
* 31.9 "Zusätzliche Infos"-Popover (Veranstaltungs-Modal)
* 31.10 Tags (Veranstaltungs-Modal)
* 31.11 Kollisions-Bestätigung (Klassenarbeit <-> Veranstaltung)
* ============================================================ */
/* ============================================================
* 31.1 Overlay & Box
* ============================================================ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: none;
justify-content: center;
align-items: center;
}
/* Das Veranstaltungs-Modal liegt über dem Klassenarbeit-Modal,
falls beide im DOM vorhanden sind. */
.exam-modal-overlay {
z-index: 2000;
}
.event-modal-overlay {
z-index: 2100;
}
.modal-box {
background: white;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 470px;
position: relative;
}
/* NEU: ab hier */
@media (max-width: 600px) {
.modal-overlay {
align-items: stretch;
justify-content: stretch;
}
.modal-box {
width: 100%;
max-width: none;
height: 100%;
border-radius: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal-form-header {
margin: -20px -20px 10px -20px; /* an modal-box padding angepasst, bleibt gleich */
border-radius: 0;
}
}
/* ============================================================
* 31.2 Formular-Grundgerüst
* ============================================================ */
.modal-form {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 15px;
font-family: sans-serif;
}
.modal-form-header {
font-size: 1.2em;
font-weight: bold;
text-align: center;
padding: 12px 16px;
margin: -15px -15px 10px -15px;
border-radius: 8px 8px 0 0;
}
#examForm .modal-form-header {
background: #1976d2;
color: white;
}
#eventForm .modal-form-header {
background: #1976d2;
color: white;
}
/* ============================================================
* 31.3 Formular-Gruppen
* ============================================================ */
.modal-form-group {
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px 15px;
position: relative;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.modal-form-group > label {
position: absolute;
top: -10px;
left: 15px;
background: white;
padding: 0 5px;
font-weight: bold;
font-size: 0.9em;
}
.modal-form-group input,
.modal-form-group select {
padding: 6px 8px;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
}
/* Veranstaltungs-Modal: Eingabefelder sollen die volle Breite
ausfüllen (im Klassenarbeit-Modal übernimmt das gezielt
#modalSubject weiter unten). */
#eventForm .modal-form-group input {
width: 100%;
}
#modalSubject {
width: 100%;
}
.modal-form-group.klassen {
display: flex;
gap: 10px;
}
.modal-form-group.klassen select {
flex: 1;
}
.modal-form-group textarea {
padding: 6px 8px;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
font: inherit;
resize: vertical;
width: 100%;
min-width: 0; /* NEU – behebt den WebKit-Textarea-Flex-Bug */
display: block; /* NEU – zur Sicherheit, textarea ist standardmäßig inline */
}
/* Gemeinsame Aktionsleiste (Zurücksetzen/Fertig) am Fuß der Popover
aus 8b/8c/10 - ein einziger Name statt drei fast identischer
Klassen. */
.popover-actions {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 10px;
}
/* ============================================================
* 31.4 Info-Bereich (nur Admin/Ersteller, beim Bearbeiten - zeigt
* Ersteller/Erstellungsdatum, NICHT zu verwechseln mit dem
* editierbaren "Zusätzliche Infos"-Feld aus Abschnitt 31.9)
* ============================================================ */
.modal-form-group.info .info-content {
font-size: 0.85em;
color: #444;
line-height: 1.6;
}
/* ============================================================
* 31.5 Buttons
* ============================================================ */
.modal-buttons {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}
.modal-buttons .convert-btn {
margin-right: auto; /* links, abgesetzt von Speichern/Löschen/Abbrechen */
}
.modal-buttons button {
padding: 6px 14px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.modal-buttons button[type="button"] {
background-color: #ccc;
}
#examForm .modal-buttons button[type="submit"] {
background: #1976d2;
color: white;
}
#eventForm .modal-buttons button[type="submit"] {
background: #1976d2;
color: white;
}
/* ============================================================
* 31.6 Stunden-Auswahl (Klassenarbeit-Modal: fest eingebettetes
* Raster; .lessonBox wird auch vom Stunden-Popover im
* Veranstaltungs-Modal wiederverwendet, siehe Abschnitt 31.8)
* ============================================================ */
.modal-form-group.stunden #lessonGrid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr)); /* vorher: repeat(6,1fr) */
gap: 3px;
width: 100%;
min-width: 0; /* erlaubt dem Grid, im Flex-Elternelement zu schrumpfen */
}
.lessonBox {
min-width: 0; /* NEU: erlaubt der einzelnen Zelle zu schrumpfen */
overflow: hidden; /* NEU: schneidet zu breiten Inhalt sauber ab */
border: 1px solid #999;
padding: 4px;
text-align: center;
cursor: pointer;
background: #f5f5f5;
user-select: none;
}
.lessonBox .time {
font-size: 0.7em;
color: #555;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* NEU: falls die Uhrzeit doch mal nicht reinpasst */
}
.lessonBox .nr {
font-weight: bold;
font-size: 0.95em;
}
.lessonBox.active .time {
color: white;
}
.lessonBox.active {
background: #1976d2;
color: white;
border-color: #1976d2;
}
.lessonBox.active.start {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.lessonBox.active.end {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
/* ============================================================
* 31.7 Optionen-Zeile (Klassenarbeit-Modal)
* ============================================================
* Der Switch selbst (.switch/.slider) liegt in Abschnitt 7; hier nur
* die Zeile drumherum und die Modal-Farbe des eingeschalteten Zustands
* (auch für den Stunden-Umschalter, siehe 31.8).
* ============================================================ */
.option-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 5px;
}
.option-text {
font-size: 0.85em;
color: #555;
line-height: 24px;
}
.option-switch {
display: flex;
align-items: center;
flex: 0 0 auto;
}
#examForm .switch input:checked + .slider {
background-color: #1976d2;
}
#eventForm .switch input:checked + .slider {
background-color: #1976d2;
}
/* ============================================================
* 31.8 Zeitraum-Zeile + Stunden-Popover (Veranstaltungs-Modal)
* ============================================================
* Von, Bis/Stunden und der Umschalter dazwischen stehen in einer
* gemeinsamen Zeile (.date-lessons-row), da Datumsfelder wenig
* Breite brauchen. Der Umschalter (siehe .switch in Abschnitt 7)
* ersetzt direkt das "Bis"-Feld durch das Stunden-Feld, statt eine
* eigene Zeile einzublenden - siehe setLessonsMode() in
* lib/event-modal.php.
*
* Das Stunden-Feld selbst (.lesson-trigger) sieht aus wie ein
* Eingabefeld mit Uhr-Icon rechts (statt des Kalender-Icons, das
* ein natives dort zeigt). Das eigentliche
* Stunden-Raster (dieselben .lessonBox-Elemente wie im
* Klassenarbeit-Modal, siehe Abschnitt 31.6) öffnet sich als Popover
* darüber, ohne dass sich die Modalhöhe ändert - genau wie der
* Tag-Picker in Abschnitt 31.10 und das Info-Popover in 31.9.
* ============================================================ */
.date-lessons-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 10px;
width: 100%;
}
.date-lessons-field {
flex: 1 1 120px;
min-width: 110px;
display: flex;
flex-direction: column;
gap: 4px;
}
.date-lessons-field input[type="date"] {
width: 100%;
height: 34px;
padding: 0 8px;
box-sizing: border-box;
}
.date-lessons-switch {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.date-lessons-label {
font-size: 0.75em;
font-weight: 600;
color: #7a8093;
}
.lesson-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
width: 100%;
height: 34px;
box-sizing: border-box;
padding: 0 10px;
border: 1px solid #aaa;
border-radius: 4px;
background: white;
cursor: pointer;
user-select: none;
color: #333;
}
.lesson-trigger .trigger-icon {
flex-shrink: 0;
color: #555;
}
.lesson-trigger:focus {
outline: none;
border-color: #1976d2;
}
.lesson-popover {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 14px rgba(0,0,0,0.2);
padding: 10px;
z-index: 50;
}
.lesson-popover.open {
display: block;
}
.lesson-popover #eventLessonGrid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 3px;
}
/* ============================================================
* 31.9 "Zusätzliche Infos"-Popover (Veranstaltungs-Modal)
* ============================================================
* Wird im Regelfall nicht gebraucht (einzeiliger Text oder leer),
* daher wie Stunden/Tags nur bei Bedarf als Popover statt eines
* dauerhaft mehrzeiligen Textfelds. Das eigentliche