/**
 * Dateiname: tiles.css
 * Beschreibung: Kachel-/Akzentfarben-System, 3D-Bilderrahmen, Sidebar-Card,
 * Galerie-Grid, Mitglieder-Grid, Link-/Download-Zeilen.
 * Version: 0.1
 * Subversion: 0.1.71
 * Änderungen 0.1.71: .tile__status-badge--admin-view (rot) ersetzt durch
 * .tile__status-badge--entwurf (blau) - Badge mit Text "Entwurf" an Stelle
 * des "geplant"/"aktiv"-Badges bei nicht freigegebenen Events (auf
 * Nutzerwunsch besser auffindbar), siehe helpers.php render_entwurf_badge().
 * Änderungen 0.1.70: .page-title-row__admin stapelt jetzt vertikal (Button
 * oben, Checkbox direkt darunter, rechtsbündig) - auf index.php UND archiv.php.
 * Änderungen 0.1.69: .page-title-row__admin + .draft-filter* ergänzt - Admin-
 * Checkbox "Unveröffentlichte Events anzeigen" (Zustand in der Session).
 * Änderungen 0.1.68: .tile__status-badge--admin-view ergänzt (rot).
 * Änderungen 0.1.67: .tile__body ul/ol/li ergänzt - Listen aus dem Rich-Text-
 * Editor (Termin-/Event-Beschreibung, siehe js/editor.js) wurden auf den
 * Anzeige-Seiten (termin_detail.php, index.php, archiv.php) ohne Einzug und
 * ohne sichtbare Aufzählungszeichen/Zahlen gerendert, weil der globale
 * * { padding:0; margin:0 }-Reset in layout.css den Listeneinzug entfernt und
 * .tile__body bisher nur p/hr abdeckte. Unnummerierte Liste: 5ch hängender
 * Einzug. Nummerierte Liste: kein Einzug, fortlaufende Nummerierung über
 * mehrere <ol>-Blöcke per CSS-Counter (ol-item) - identisch zu editor.css
 * 0.1.3, damit die Anzeige der Editor-Vorschau entspricht.
 * Änderungen 0.1.65: "Details ansehen"-Button (.tile__cta) auf den
 * Übersichtslisten unter Aktuell/Archiv durch schlichtes Fettschrift-Wort
 * "weiterlesen" ersetzt (auf Nutzerwunsch, Admin-Buttons unverändert) -
 * neue Klasse .tile__weiterlesen. .tile__actions-row (+ Kombi-Selektoren)
 * entfernt, dadurch ungenutzt (war nur für die gemeinsame Zeile
 * "Details ansehen" + Admin-Buttons da).
 * Änderungen 0.1.64: .pending-thumb-grid (+ __box/__img/__pdf-canvas/
 * __pdf-fallback/__caption) ergänzt - clientseitige Datei-Vorschau vor dem
 * Hochladen in event_neu.php (auf Nutzerwunsch), siehe
 * js/pending-upload-preview.js.
 * Änderungen 0.1.63: Dokumente/Pressetexte in event_bearbeiten.php zeigen
 * jetzt echte Thumbnails (Bild bzw. PDF-Erstseiten-Vorschau) statt reiner
 * Dateinamen-Links (auf Nutzerwunsch) - .file-list--thumbs/__thumb--pdf/
 * __caption ergänzt, .file-list--photos-Spalten ebenfalls auf minmax(0, 1fr)
 * umgestellt, .file-list__meta-form jetzt gestapelt statt nebeneinander
 * (schmale Thumbnail-Kachel statt voller Zeilenbreite). Ungenutzt entfernt:
 * .file-list__item--doc, .file-list__meta (Dateiname+Größe stehen jetzt in
 * .file-list__caption zusammen).
 * Änderungen 0.1.62: .legal-subtitle/.legal-heading/.legal-content ul/li
 * ergänzt - neue Seiten impressum.php/datenschutz.php (auf Nutzerwunsch,
 * Text 1:1 aus /artdate übernommen, siehe footer.php).
 * Änderungen 0.1.61: .file-list__meta-form (+ .file-list__item--doc jetzt
 * flex-wrap:wrap) ergänzt - Presseorgan-Auswahl/Artikeldatum je Pressetext
 * in event_bearbeiten.php (auf Nutzerwunsch).
 * Änderungen 0.1.60: .press-grid-Spalten auf minmax(0, 1fr) umgestellt -
 * behebt, dass ein langer (nowrap) Dateiname eine einzelne Grid-Spalte
 * aufblähte und dadurch das jeweilige Thumbnail größer erschien als die
 * anderen (auf Nutzerhinweis, betraf beide Dateitypen, nicht nur PDFs).
 * .press-grid__meta ergänzt (Presseorgan/Artikeldatum je Pressetext, auf
 * Nutzerwunsch, siehe render_files_tile()/presseorgane_verwalten.php).
 * Änderungen 0.1.59: .member-gallery-manage__heading-row/__drag-handle/
 * __item--dragging ergänzt - Werkauswahl-Fotos auf mitglieder.php lassen
 * sich jetzt per Ziehen (Maus UND iPad-Touch, siehe js/gallery-reorder.js)
 * neu sortieren, mit "Reihenfolge speichern"-Button analog
 * lokationen_verwalten.php (auf Nutzerwunsch).
 * Änderungen 0.1.58: .modal-body/.size-guard-list ergänzt - Modal-Warnung
 * "Datei zu groß" auf event_neu.php/event_bearbeiten.php (auf Nutzerwunsch),
 * siehe render_size_guard_modal() (templates/helpers.php) und
 * js/upload-size-guard.js.
 * Änderungen 0.1.57: .mailing-card__heading/.mailing-tage-input ergänzt
 * (zweiter Abschnitt "Erinnerungsmail" auf mailing_verwalten.php, auf
 * Nutzerwunsch: Tage-vor-Beginn + bis zu 3 Empfänger konfigurierbar).
 * Änderungen 0.1.56: .mailing-card/.mailing-status-row/.mailing-status-desc
 * ergänzt (neue Admin-Kachel "Mailing", mailing_verwalten.php, auf
 * Nutzerwunsch: Admin kann den automatischen Event-Benachrichtigungsmail-
 * Versand vorübergehend abschalten).
 * Änderungen 0.1.55: .press-grid nutzt jetzt dieselbe Spaltenzahl/Abstand
 * wie .gallery-grid (6 Spalten, 8px statt 5 Spalten, 14px) - Presseartikel-
 * und Dokumente-Thumbnails sind damit nicht mehr groesser als Foto-
 * Thumbnails (auf Nutzerwunsch).
 * Änderungen 0.1.54: .press-grid__item ist jetzt ein Button-Reset (statt
 * einem reinen Link-Style) - Presseartikel-Kacheln unter Aktuell/Archiv
 * sind jetzt Buttons und oeffnen die Lightbox-Ganzseitenansicht statt eines
 * neuen Tabs (auf Nutzerwunsch, siehe templates/helpers.php 0.1.28).
 * Änderungen 0.1.53: Info-Box (Akzent 'header', render_sidebar_card() und
 * render_tile_shell() mit 'header') auf allen Seiten ebenso aufgehellt (auf
 * Nutzerwunsch, analog 0.1.52) - .tile--accent-header und
 * .sidebar-card.tile--accent-header nutzen jetzt --accent-header-wash statt
 * --accent-header-bg als Hintergrund, der Akzentbalken bleibt in
 * --color-header-bg. --accent-header-bg selbst bleibt unveraendert bestehen
 * (wird weiterhin fuer die Hover-Flaeche der Termine- und Timeline-
 * Navigationsbuttons benutzt, siehe termine.css und timeline.css, das ist
 * keine Info-Box).
 * Änderungen 0.1.52: Erneuter, sorgfaeltig gepruefter Anlauf fuer 0.1.51 -
 * die Kacheln unter Aktuell und Archiv sollen laut Nutzer weiterhin nur in
 * der Hintergrundflaeche aufgehellt werden, alles andere (Akzentbalken,
 * Bilderrahmen, Buttons, Badges, Schatten, Aufteilung) bleibt unveraendert.
 * .tile--accent-1 bis .tile--accent-5 nutzen dafuer wieder die helle Wash-
 * Variante als Kachel-Hintergrund statt der kraeftigeren Standardfarbe; der
 * .tile__bar-Balken bleibt weiterhin in der vollen Saettigung. Dieser
 * Changelog-Eintrag wurde bewusst ohne die Zeichenfolge aus Stern direkt
 * gefolgt von Schraegstrich verfasst, um den 0.1.51-Fehler nicht zu
 * wiederholen.
 * Änderungen 0.1.51: 0.1.50 zurückgerollt (auf Nutzerwunsch) - der Wechsel
 * auf --accent-N-wash ließ die Kacheln zu flach/kontrastarm wirken (der
 * "3D-Rahmen"-Eindruck ging verloren). Zusätzlich enthielt der 0.1.50-
 * Changelogtext selbst einen Bug: eine Aufzählung im Kommentartext enthielt
 * versehentlich Stern gefolgt von Schrägstrich hintereinander, was den
 * Kopf-Kommentar vorzeitig schloss - exakt derselbe Fehlertyp wie im
 * 0.1.12-Bugfix weiter unten beschrieben. Dadurch wurde die komplette
 * .tile-Basisregel (Schatten, Aufteilung, 3D-Design) von Browsern
 * verworfen, was sich als "Aufteilung der Kachel verloren" zeigte.
 * .tile--accent-1..5 nutzen jetzt wieder --accent-N-bg wie vor 0.1.50.
 * Änderungen 0.1.50 (zurückgerollt): .tile--accent-1..5 sollten
 * --accent-N-wash statt --accent-N-bg als Kachel-Hintergrund nutzen (auf
 * Nutzerwunsch: Kacheln unter Aktuell/Archiv wirkten "zu bunt").
 * Änderungen 0.1.49: .login-form__links ergänzt (Passwort-vergessen-/
 * Registrieren-Links auf login.php, Login/Registrierung jetzt analog
 * /artdate, auf Nutzerwunsch).
 * Änderungen 0.1.48: Einmalige Palettenbereinigung (auf Nutzerwunsch, siehe
 * variables.css 0.1.5) – .tile--accent-6 entfällt wieder ersatzlos (Akzent
 * 3 übernimmt jetzt selbst den Violett-Ton, Akzent 2 hat eigenständig
 * genug Abstand zur Kopfzeilenfarbe). .tile--accent-header bleibt.
 * Änderungen 0.1.47: .tile--accent-6 (Violett) und .tile--accent-header
 * (Kopfzeilenfarbe) ergänzt – Versuch auf index.php: Sidebar-Info-Karte in
 * Kopfzeilenfarbe, "Grün" (Akzent 2) in der Kachel-Rotation durch Akzent 6
 * ersetzt (auf Nutzerwunsch). Höher-spezifische .sidebar-card.tile--accent-
 * header-Regel ergänzt, da .sidebar-card selbst schon eine (spätere)
 * Standardfarbe setzt.
 * Änderungen 0.1.1: .tile__gallery-empty für den Galerie-Platzhaltertext ergänzt.
 * Änderungen 0.1.2: .vorausplanung-subheading (mehr Abstand zur Strichellinie)
 * ergänzt; .vorausplanung-item a auf display:block (PDF-Link immer in eigener
 * Zeile, unabhängig vom vorherigen Element).
 * Änderungen 0.1.3: .sidebar-notice* ergänzt – löst die Inline-Styles der
 * früher fest in index.php verdrahteten Aktuell-Sidebar-Kurzmeldungen ab.
 * Änderungen 0.1.4: Vereinheitlichtes Event-System – .alert*, .tile__admin-actions,
 * .btn-edit/.btn-danger, .page-title-row, .login-form*, .event-form*, .file-list*
 * und .form-danger-zone* für Login, Event-CRUD-Formulare und admin-only Buttons
 * auf Aktuell/Ausstellungen ergänzt.
 * Änderungen 0.1.5: .tile__actions-row ergänzt – Bearbeiten/Löschen stehen
 * jetzt rechtsbündig auf gleicher Höhe wie "Details ansehen" statt darunter.
 * Änderungen 0.1.6: .event-form__grid--4 ersetzt .event-form__grid--2 (4er-
 * Reihe für Eventtyp/Beginn/Uhrzeit/Ende in event_neu.php/event_bearbeiten.php,
 * je 25% statt vorher 3+2 Spalten).
 * Änderungen 0.1.7: .login-form__input/.event-form__input/.event-form__select
 * auf width:100%+box-sizing:border-box – alle Eingabefelder enden jetzt auf
 * derselben rechten Fluchtlinie. .event-form__conditional ist jetzt selbst
 * eine Flex-Spalte (löst den Bug, dass Label "Künstlername" und sein
 * Eingabefeld in einer Zeile standen, da beide zuvor als reine Inline-
 * Elemente ohne Block-Kontext im Wrapper lagen). Neu: .event-form__toggle*
 * (Veröffentlichen-Schalter) und .badge-draft (Entwurf-Kennzeichnung).
 * Änderungen 0.1.8: .file-list__delete (Textlink) ersetzt durch
 * .file-list__icon-btn* (Kreuzchen zum Löschen, ⇄ zum Austauschen, analog
 * /artdate). .event-form__feature-row/-preview für die Feature-Bild-
 * Vorschau neben dem (verkürzten) Datei-Feld in event_bearbeiten.php.
 * Änderungen 0.1.9: Lösch-/Austausch-Symbole liegen jetzt direkt auf den
 * Bildern (.file-list__thumb-wrap + .file-list__actions--overlay, auch für
 * das Feature-Bild). .file-list--photos zeigt Fotos als 5-Spalten-Raster mit
 * größeren Kacheln. .tile__body hr / #rueckschau-list (max-height+Scroll ab
 * ~10 Einträgen) ergänzt.
 * Änderungen 0.1.10: .admin-list-group, .admin-inline-form (und Varianten),
 * .admin-link-list (und Varianten), .admin-list-add-row ergänzt –
 * Listenverwaltung für Linkgruppen/Links (links_verwalten.php) und
 * Downloads (downloads_verwalten.php).
 * Änderungen 0.1.11: .admin-link-list__current/.admin-link-list__hint ergänzt
 * – Anzeige der aktuell hinterlegten Datei in downloads_verwalten.php, nachdem
 * das manuelle Datei-URL-Textfeld entfernt wurde.
 * Änderungen 0.1.12: Kritischer Bugfix – der Änderungen-0.1.10-Eintrag
 * (oben) enthielt versehentlich Stern gefolgt von Schrägstrich mitten im
 * Fließtext (zwischen zwei Klassennamen, ohne Leerzeichen dazwischen). Genau
 * diese Zeichenfolge beendet in CSS jeden Kommentar, egal an welcher Stelle
 * sie steht – ein Escaping dafür gibt es nicht. Dadurch schloss sich dieser
 * Kopf-Kommentar vorzeitig, und der komplette restliche Text (Rest des
 * Changelogs plus die Überschrift vor der eigentlichen .tile-Regel) wurde
 * als ein einziger, ungültiger Selektor interpretiert – die komplette
 * .tile-Basisregel (Schatten, abgerundete Ecken, das 3D-Design) wurde
 * dadurch von jedem Browser verworfen. Fix: die betroffene Textstelle
 * umformuliert (Kommas/Leerzeichen statt Schrägstrich direkt hinter einem
 * Sternchen).
 * Änderungen 0.1.13: .tile hat jetzt position:relative. .tile__status-badge*
 * ergänzt – Badge oben mittig auf der Kachel (index.php), zeigt "aktiv" oder
 * "geplant" je nach Event-Beginn.
 * Änderungen 0.1.14: .tile__status-badge rückt näher an den oberen Kachelrand
 * (top: 16px -> 6px).
 * Änderungen 0.1.15: .file-tile-list* ergänzt – Datei-Liste in der neuen
 * Pressetexte-Kachel (render_files_tile(), index.php/archiv.php).
 * Änderungen 0.1.16: .file-tile-list* ersetzt durch .press-grid* – die
 * Pressetexte-Kachel zeigt jetzt ein Thumbnail-Grid (echte Bildvorschau bei
 * JPEGs, Platzhalter-Kachel bei PDFs) statt einer reinen Link-Liste.
 * Änderungen 0.1.17: .press-grid__thumb hat jetzt box-sizing:border-box,
 * damit PDF- und JPEG-Thumbnails garantiert exakt gleich groß sind.
 * .press-grid__pdf-canvas/.press-grid__pdf-fallback ergänzt – echte
 * PDF-Erstseiten-Vorschau via js/pdf-thumbs.js (PDF.js), fällt bei Fehlern
 * automatisch auf die bisherige "PDF"-Textkachel zurück.
 * Änderungen 0.1.18: .admin-count-dim (gesperrt-Symbol bei in Benutzung
 * befindlichen Lokationen) und .admin-kacheln, .admin-kachel (und Varianten,
 * neue Admin-Übersichtsseite admin.php) ergänzt.
 * Änderungen 0.1.19: .admin-link-list__member-name ergänzt (Mitgliederliste
 * in mitglieder_verwalten.php).
 * Änderungen 0.1.20: Neuer Block .page-title-bar, .admin-filter-bar,
 * .admin-table (und Varianten), .btn-icon (und Varianten), .badge (und
 * Varianten), .btn-primary, .modal (und Varianten), .form (und Varianten)
 * sowie .loc-drag, .loc-row (und Varianten) ergänzt – mitglieder_verwalten.php,
 * gruppen_verwalten.php und lokationen_verwalten.php wurden auf ein
 * Tabellen- und Modal-Layout umgestellt, analog zu den entsprechenden
 * Admin-Seiten aus dem Schwesterprojekt artdate, statt der bisherigen
 * Inline-Listen.
 * Änderungen 0.1.21: .btn-nav ergänzt (Abbrechen-Button in den neuen
 * Modal-Dialogen).
 * Änderungen 0.1.22: .page-title-bar-group, .admin-td-muted ergänzt
 * (lokationen_verwalten.php).
 * Änderungen 0.1.23: .admin-table__thumb--modal, .loc-thumb-wrap ergänzt
 * (Portrait-Vorschau in mitglieder_verwalten.php). Bugfix – .hidden war
 * nur für .modal-overlay definiert, wodurch z.B. der "Reihenfolge
 * speichern"-Button in lokationen_verwalten.php trotz Klasse "hidden"
 * dauerhaft sichtbar gewesen wäre; jetzt eine generische .hidden-Utility.
 * Änderungen 0.1.24: .modal-box-lg ergänzt (breiterer Modal-Dialog für das
 * erweiterte Mitglieder-Formular in mitglieder_verwalten.php).
 * Änderungen 0.1.25: .group-badge, .admin-group-badge-row, .admin-group-cb,
 * .admin-group-cb-label ergänzt (Systemrolle + Gruppen-Mitgliedschaften in
 * mitglieder_verwalten.php). .admin-tooltip-label ergänzt (Mitgliederzahl
 * je Gruppe in gruppen_verwalten.php, analog /artdate/admin/gruppen.php).
 * Änderungen 0.1.26: Admin-Tabellen (mitglieder_verwalten.php,
 * gruppen_verwalten.php, lokationen_verwalten.php, eventtypen_verwalten.php)
 * überarbeitet, analog /artdate/css/admin.css: .admin-table-wrap (weiße
 * Karte mit Schatten statt Tabelle lose auf dem Seitenhintergrund),
 * Zebra-Streifen + Hover-Hervorhebung je Zeile (tbody tr:nth-child(even)/
 * :hover), .cell-label-badge (fester Abstand zwischen Label-Text und
 * direkt folgendem Badge statt kollabierendem Leerraum aus dem
 * Template-Markup – betraf z.B. Gruppenname+"Systemgruppe"-Badge und
 * Systemrolle+Gruppen-Badges). .group-badge-Ränder entfernt (Abstand läuft
 * jetzt über den gap der umschließenden .cell-label-badge).
 * Änderungen 0.1.27: .admin-table-wrap--accent-1/-2/-3/-4 ergänzt – die
 * Tabellenkarte übernimmt jetzt die Hintergrundfarbe der zugehörigen
 * Kachel auf admin.php statt durchgehend Weiß.
 * Änderungen 0.1.28: Die volle --accent-N-bg-Sättigung wirkte auf einer
 * datendichten Tabelle zu aufdringlich – .admin-table-wrap--accent-N nutzt
 * jetzt die neuen, sehr hellen --accent-N-wash-Töne (variables.css 0.1.1)
 * plus einen farbigen Balken links (border-left in --accent-N-bar), analog
 * zum .tile__bar-Akzentstreifen auf index.php, statt die Vollfläche zu
 * tönen. .admin-table-wrap scrollt jetzt nach ca. 10 Datenzeilen
 * (max-height + overflow), mit sticky thead th (bleibt beim Scrollen oben
 * sichtbar) statt unbegrenzt in die Länge zu wachsen.
 * Änderungen 0.1.29: .member-self-edit* (Feature-Bild-/Galerie-Upload-
 * Formulare für den eingeloggten Account-Inhaber auf mitglieder.php),
 * .member-gallery-manage* (Lösch-Button je Galerie-Foto) sowie
 * .profil-cards-grid/.profil-card* (neue Seite profil.php) ergänzt.
 * Änderungen 0.1.30: .gallery-grid--natural ergänzt – zeigt Bilder im
 * Originalseitenverhältnis statt sie auf ein Quadrat zu beschneiden
 * (genutzt von der "Werkauswahl" auf mitglieder.php).
 * Änderungen 0.1.31: .admin-table-wrap--accent-5 (5. Admin-Kachel) sowie
 * .corr-* (Statistik-Kacheln, Abschnitts-Überschriften, Typ-Badges,
 * Toolbar) für die neue Seite upload_korrektur.php ergänzt.
 * Änderungen 0.1.32: .alert hat jetzt box-shadow (var(--tile-shadow)) und
 * border-radius: var(--tile-radius) statt fest 10px – "3D-Rand" für alle
 * Info-/Meldungs-Blöcke projektweit, analog zu .profil-card/.corr-stat-box/
 * .admin-table-wrap.
 * Änderungen 0.1.33: .member-card__portrait object-fit cover->contain
 * (Mitglieder-Grid auf mitglieder.php zeigt Profilbilder nicht mehr
 * beschnitten). .member-gallery-manage__item + neue .member-gallery-
 * manage__titel-form (Bildtitel-Eingabefeld je Werkauswahl-Foto) sowie
 * .gallery-grid__caption (Bildunterschrift im öffentlichen Galerie-Grid)
 * ergänzt.
 * Änderungen 0.1.34: Rückbau von 0.1.33 – .member-card__portrait und
 * .member-gallery-manage__thumb-wrap img wieder auf object-fit: cover
 * (Miniaturansichten passen sich wieder dem vorhandenen Bildrahmen an),
 * .gallery-grid--natural entfernt (ungenutzt, da render_gallery_grid()
 * den $noCrop-Parameter nicht mehr hat). Die Lightbox zeigt Bilder ohnehin
 * schon unbeschnitten – das war nie das Problem. .gallery-grid__caption
 * (Bildtitel) bleibt unverändert erhalten. .member-card__link entfernt
 * (ungenutzt, "Zum Profil"-Text auf den Mitglieder-Kacheln entfällt).
 * Änderungen 0.1.35: .profil-card hat jetzt einen farbigen linken Rand
 * (analog .admin-table-wrap--accent-N) – .profil-card--accent-1/-2 für
 * "Profildaten"/"Passwort ändern", .profil-card--danger (Account löschen)
 * bleibt rot.
 * Änderungen 0.1.36: .member-self-edit__form--stacked ergänzt (Textarea
 * über volle Breite + Button darunter statt der bisherigen Flex-Zeile) –
 * für das neue "Beschreibung bearbeiten"-Feld auf mitglieder.php.
 * Änderungen 0.1.37: .sidebar-card__group .sidebar-card__link-label ist
 * jetzt standardmäßig normal statt fett (font-weight 400), erst beim
 * Hover der Link-Zeile wird die Beschriftung fett (600) – nur für die
 * Linkliste auf infos-und-links.php (.sidebar-card__group), die
 * Download-Sidebars auf index.php/archiv.php nutzen die Basisklasse
 * .sidebar-card__link-label unverändert.
 * Änderungen 0.1.38: a.sidebar-card__list-row--link ergänzt – kennzeichnet
 * die jetzt klickbaren Rückschau-Einträge auf archiv.php farblich
 * (var(--color-category-hover)) mit Unterstreichung erst beim Hover.
 * Änderungen 0.1.39: Ortsangabe auf den archiv.php-Übersichtskacheln
 * (.tile:not(.tile--detail) .tile__meta--block) auf max. 2 Zeilen begrenzt
 * (line-clamp) – lange Adressen sprengen sonst die Kachelhöhe. Einzelansicht
 * (.tile--detail) und index.php bleiben unverändert.
 * Änderungen 0.1.40: .tile__image-link ergänzt (Klick aufs Feature-Bild auf
 * den Übersichtskacheln führt jetzt zur Detailansicht, analog zum
 * bestehenden Überschriften-Link) mit leichtem Opacity-Hover als Feedback.
 * Änderungen 0.1.41: Rückbau von 0.1.39 – die 2-Zeilen-Begrenzung
 * (line-clamp) für die Ortsangabe auf den archiv.php-Übersichtskacheln
 * entfernt. Straße und Ort stehen jetzt bereits in PHP auf einer Zeile
 * ("Straße, Ort" statt "Straße<br>Ort"), wodurch Name+Adresse ohnehin
 * genau 2 Zeilen ergeben – Abschneiden per Ellipsis ist damit nicht mehr
 * nötig und hätte sonst auch die neu ergänzte Künstler:innen-Zeile
 * (dieselbe .tile__meta--block-Klasse) mit abgeschnitten.
 * Änderungen 0.1.42: .archiv-search-form ergänzt (neue Such-Kachel
 * unterhalb der Rückschau auf archiv.php).
 * Änderungen 0.1.43: .cell-label-badge hat jetzt justify-content:
 * space-between – der "Systemgruppe"-Badge auf gruppen_verwalten.php steht
 * dadurch rechtsbündig statt direkt neben dem Bezeichnungstext. Klasse wird
 * aktuell nur dort verwendet, daher unproblematisch für andere Seiten.
 * Änderungen 0.1.44: .archiv-veranstaltungen-toggle/-heading sowie
 * .sidebar-card__list-typ ergänzt – neue "Veranstaltungen anzeigen"-Checkbox
 * auf archiv.php (zeigt Events mit event_typ.transfer_zu_ausstellungen=1,
 * die aber nicht vom Typ "Ausstellung" sind, z.B. "Präsentation").
 * Änderungen 0.1.45: .event-form__conditional/--active entfernt (auf
 * Nutzerwunsch nie mehr ausgegraute Künstlername-/Pressetext-Felder in
 * event_neu.php/event_bearbeiten.php, siehe templates/helpers.php 0.1.24) -
 * keine Verwendung mehr im Projekt.
 * Änderungen 0.1.46: .archiv-veranstaltungen-toggle/-heading sowie
 * .sidebar-card__list-typ (aus 0.1.44) wieder entfernt - Ausstellung/
 * Veranstaltungen-Unterscheidung auf archiv.php komplett zurückgebaut (auf
 * Nutzerwunsch, siehe archiv.php 0.1.20), keine Verwendung mehr.
 */

/* ---------- Kachel (Tile) ---------- */
.tile {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-bottom: 28px;
    border-radius: var(--tile-radius);
    overflow: hidden;
    box-shadow: var(--tile-shadow);
    min-height: 0;
}

.tile__bar {
    width: var(--accent-bar-width);
    flex: 0 0 var(--accent-bar-width);
    order: 0;
}

.tile__image {
    flex: 0 0 30%;
    width: 30%;
    align-self: stretch;
    margin: 24px;
    order: 1;
}

.tile__image-link {
    display: block;
    height: 100%;
    cursor: pointer;
}

.tile__image-link:hover .image-frame img {
    opacity: 0.88;
}

.tile__content {
    flex: 1;
    min-width: 0;
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 2;
}

.tile--reverse .tile__image {
    order: 2;
}

.tile--reverse .tile__content {
    order: 1;
}

.tile--detail {
    margin-top: 24px;
}

.tile--gallery {
    margin-top: 28px;
}

.tile__gallery-body {
    flex: 1;
    padding: 32px 40px;
}

.tile__gallery-heading {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
}

.tile__gallery-empty {
    margin: 0;
    font-size: 14px;
    font-style: italic;
    color: var(--color-text-muted);
}

/* Thumbnail-Grid in der Pressetexte-Kachel (render_files_tile()) */
.press-grid {
    display: grid;
    /* minmax(0, 1fr) statt nur 1fr: ohne die explizite 0-Untergrenze setzt
       ein Grid-Track seine Mindestbreite auf den max-content seines Inhalts -
       ein einzelner langer, nicht umbrechender Dateiname
       (.press-grid__label, white-space:nowrap) hätte sonst NUR seine eigene
       Spalte aufgebläht und dadurch dieses eine Thumbnail sichtbar größer
       gemacht als alle anderen (auf Nutzerhinweis behoben - lag nicht am
       Dateityp jpg/pdf, wie zunächst vermutet). */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.press-grid__item {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: none;
    padding: 0;
    background: none;
    font: inherit;
    text-align: left;
}

.press-grid__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    box-sizing: border-box;
}

/* Gleiche Grundgröße wie .press-grid__thumb (per Klassenliste geerbt) –
   zusätzlich positionierter Rahmen für das Canvas-Thumbnail (js/pdf-thumbs.js)
   und den "PDF"-Text-Fallback, falls PDF.js nicht rendern kann. */
.press-grid__thumb--pdf {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.1);
}

.press-grid__pdf-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.press-grid__pdf-fallback {
    position: relative;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
}

.press-grid__label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.press-grid__meta {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--color-text-muted);
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Akzentfarben-Paare, zyklisch 1-5. Kachel-Hintergrund nutzt die helle
   Wash-Variante, Akzentbalken bleibt in voller Saettigung (auf
   Nutzerwunsch). */
.tile--accent-1 { background: var(--accent-1-wash); }
.tile--accent-1 .tile__bar { background: var(--accent-1-bar); }
.tile--accent-2 { background: var(--accent-2-wash); }
.tile--accent-2 .tile__bar { background: var(--accent-2-bar); }
.tile--accent-3 { background: var(--accent-3-wash); }
.tile--accent-3 .tile__bar { background: var(--accent-3-bar); }
.tile--accent-4 { background: var(--accent-4-wash); }
.tile--accent-4 .tile__bar { background: var(--accent-4-bar); }
.tile--accent-5 { background: var(--accent-5-wash); }
.tile--accent-5 .tile__bar { background: var(--accent-5-bar); }
.tile--accent-header { background: var(--accent-header-wash); }
.tile--accent-header .tile__bar { background: var(--color-header-bg); }

/* Status-Badge oben mittig auf der Kachel (index.php) – "aktiv"/"geplant" */
.tile__status-badge {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 5px 16px;
    border-radius: 999px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.tile__status-badge--aktiv {
    background: oklch(0.55 0.16 165);
}

.tile__status-badge--geplant {
    background: oklch(0.6 0.16 70);
}

/* Nicht freigegebenes Event (index.php/archiv.php, render_entwurf_badge()) -
   blau, steht an Stelle des "geplant"/"aktiv"-Badges. */
.tile__status-badge--entwurf {
    background: oklch(0.52 0.16 252);
}

/* Kachel-Inhalt */
.tile__category {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-category);
    margin-bottom: 8px;
}

.tile__heading {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
}

.tile__heading--detail {
    font-size: 30px;
    margin-bottom: 10px;
}

.tile__meta {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 18px;
}

.tile__meta--block {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.tile__excerpt {
    margin: 0 0 22px;
    font-size: 15px;
    color: oklch(0.32 0.01 60);
    line-height: 1.6;
    max-width: 520px;
}

.tile__body p {
    font-size: 15px;
    line-height: 1.7;
    color: oklch(0.3 0.01 60);
    margin: 0 0 14px;
}

/* Listen aus dem Rich-Text-Editor (js/editor.js). Ohne diese Regeln entfernt
   der globale * { padding:0; margin:0 }-Reset (layout.css) den Listeneinzug,
   Aufzählungszeichen/Zahlen liegen dann außerhalb der Kachel und sind
   unsichtbar. Verhalten identisch zu editor.css 0.1.3. */
.tile__body ul,
.tile__body ol {
    margin: 0 0 14px;
    color: oklch(0.3 0.01 60);
    font-size: 15px;
    line-height: 1.7;
}

/* Unnummerierte Liste: hängender Einzug von mind. 5 Zeichen. */
.tile__body ul {
    padding-left: 5ch;
    list-style-position: outside;
    list-style-type: disc;
}

/* Nummerierte Liste: kein Einzug, fortlaufende Nummer über mehrere
   <ol>-Blöcke hinweg (CSS-Counter statt list-style). */
.tile__body { counter-reset: ol-item; }
.tile__body ol { padding-left: 0; list-style: none; }
.tile__body ol > li { counter-increment: ol-item; }
.tile__body ol > li::before {
    content: counter(ol-item) ".";
    margin-right: 0.5em;
    font-variant-numeric: tabular-nums;
}

.tile__body li { margin: 0 0 4px; }

/* Strichellinie, per Editor-Button einfügbar (siehe js/editor.js), gleiche
   Optik wie .vorausplanung-item. */
.tile__body hr {
    border: none;
    border-top: 1px dashed rgba(0, 0, 0, 0.18);
    margin: 20px 0;
}

/* Impressum/Datenschutzerklärung (impressum.php/datenschutz.php) - statische
   Abschnittsüberschriften/-listen, die .tile__body p (oben) nicht abdeckt. */
.legal-subtitle {
    display: block;
    color: var(--color-text-muted);
    font-size: 14px;
    margin: -8px 0 16px;
}

.legal-heading {
    margin: 24px 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.legal-content > .legal-heading:first-child {
    margin-top: 0;
}

.legal-content ul {
    margin: 0 0 14px;
    padding-left: 20px;
}

.legal-content li {
    font-size: 15px;
    line-height: 1.7;
    color: oklch(0.3 0.01 60);
    margin-bottom: 6px;
}

.tile__cta {
    display: inline-block;
    padding: 11px 20px;
    border: 1.5px solid var(--color-category);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-category-hover);
    align-self: flex-start;
}

.tile__cta:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.04);
}

/* Ersetzt "Details ansehen" (.tile__cta-Button) auf den Übersichtslisten
   unter Aktuell/Archiv (auf Nutzerwunsch) - schlichtes Fettschrift-Wort
   statt Button, direkt unter der Kurzbeschreibung. */
.tile__weiterlesen {
    display: inline-block;
    margin-top: 4px;
    font-weight: 700;
    color: var(--color-category-hover);
    text-decoration: none;
}

.tile__weiterlesen:hover {
    text-decoration: underline;
}

/* ---------- 3D-Bilderrahmen ---------- */
.image-frame {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: var(--image-radius);
    background: #2a2a2a;
    border-left: 5px solid #000;
    border-top: 3px solid #6b6b6b;
    border-right: 3px solid #6b6b6b;
    border-bottom: 3px solid #6b6b6b;
    box-shadow: var(--image-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: calc(var(--image-radius) - 4px);
    transition: opacity 0.2s;
}

.image-frame--cover img {
    object-fit: cover;
}

.image-frame--empty {
    color: oklch(0.6 0.01 60);
    font-size: 12px;
    text-align: center;
    padding: 12px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ---------- Galerie-Grid (Lightbox-Thumbnails) ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.gallery-grid__item {
    cursor: pointer;
    border: none;
    padding: 0;
    background: none;
}

.gallery-grid__item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
}

.gallery-grid__caption {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
}

/* ---------- Sidebar-Card ---------- */
.sidebar-card {
    display: flex;
    align-items: stretch;
    background: var(--accent-2-bg);
    border-radius: var(--tile-radius);
    overflow: hidden;
    box-shadow: var(--tile-shadow);
}

.sidebar-card__bar {
    background: var(--accent-2-bar);
    width: var(--accent-bar-width);
    flex: 0 0 var(--accent-bar-width);
}

/* Höhere Spezifität als der .sidebar-card-Grundstil oben (Standardfarbe
   Akzent 2), damit ein abweichender Akzent zuverlässig greift, unabhängig
   von der Reihenfolge im Stylesheet. */
.sidebar-card.tile--accent-header { background: var(--accent-header-wash); }
.sidebar-card.tile--accent-header .sidebar-card__bar { background: var(--color-header-bg); }

.sidebar-card__body {
    flex: 1;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card__heading {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-body-text);
}

.sidebar-card select {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Barlow', sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    background: white;
    margin-bottom: 16px;
}

.sidebar-card__list-row {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 14px;
    color: oklch(0.3 0.01 60);
    line-height: 1.5;
}

a.sidebar-card__list-row--link {
    display: block;
    color: var(--color-category-hover);
    text-decoration: none;
    cursor: pointer;
}

a.sidebar-card__list-row--link:hover {
    text-decoration: underline;
}

/* Rückschau-Liste (ausstellungen.php): ab ca. 10 Einträgen scrollen statt
   die Sidebar beliebig in die Länge zu ziehen. */
#rueckschau-list {
    max-height: 420px;
    overflow-y: auto;
}

/* Veranstaltungen-Umschalter (archiv.php): Checkbox oberhalb der
   Kachel-Liste, blendet nicht-Ausstellungs-Events (Präsentation etc.) in
   Kachel-Liste + Rückschau-Sidebar zusätzlich ein. */
.sidebar-card__link-row {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: inherit;
}

.sidebar-card__link-row:hover {
    text-decoration: none;
}

.sidebar-card__link-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-category-hover);
}

.sidebar-card__link-desc {
    font-size: 13px;
    color: oklch(0.45 0.01 60);
    margin-top: 2px;
}

.sidebar-card__group {
    margin-bottom: 8px;
}

.sidebar-card__group-heading {
    margin: 0 0 4px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-body-text);
}

.sidebar-card__group .sidebar-card__link-row {
    padding: 10px 0;
}

.sidebar-card__group .sidebar-card__link-label {
    font-size: 14px;
    font-weight: 400;
}

.sidebar-card__group .sidebar-card__link-row:hover .sidebar-card__link-label {
    font-weight: 600;
}

.sidebar-card__group .sidebar-card__link-desc {
    font-size: 12px;
}

/* ---------- Vorausplanung / Exkursions-Liste ---------- */
.vorausplanung-item {
    padding: 16px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.18);
}

.vorausplanung-subheading {
    margin: 36px 0 12px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

.vorausplanung-item .range {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-category-hover);
    margin-right: 12px;
}

.vorausplanung-item strong {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vorausplanung-item ul {
    margin: 6px 0 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: oklch(0.3 0.01 60);
}

.vorausplanung-item a {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-category-hover);
}

.plain-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plain-link-list li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- Mitglieder-Grid ---------- */
.member-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.member-card {
    text-align: center;
}

.member-card__portrait {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 12px;
    background: #2a2a2a;
    box-shadow: var(--tile-shadow);
}

.member-card__portrait--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: oklch(0.7 0.01 60);
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 40px;
    font-weight: 700;
}

.member-card__name {
    margin-top: 12px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
}

.member-card__discipline {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ---------- Selbstbedienung Feature-Bild/Galerie (mitglieder.php,
   nur für den eingeloggten Account-Inhaber auf seiner eigenen Kachel) ---------- */
.member-self-edit {
    background: #ffffff;
    border-radius: var(--tile-radius);
    box-shadow: var(--tile-shadow);
    padding: 20px 24px;
    margin-top: 20px;
}

.member-self-edit__heading {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
}

.member-self-edit__form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.member-self-edit__form .form-input {
    flex: 1;
    min-width: 200px;
}

.member-self-edit__form--stacked {
    flex-direction: column;
    align-items: stretch;
}

.member-self-edit__form--stacked textarea.form-input {
    width: 100%;
    resize: vertical;
    min-height: 90px;
}

.member-gallery-manage {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.member-gallery-manage__item {
    width: 140px;
}

.member-gallery-manage__thumb-wrap {
    position: relative;
    width: 140px;
    height: 140px;
}

.member-gallery-manage__thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.member-gallery-manage__thumb-wrap form {
    position: absolute;
    top: 4px;
    right: 4px;
}

.member-gallery-manage__thumb-wrap .btn-icon {
    width: 24px;
    height: 24px;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
}

.member-gallery-manage__thumb-wrap .btn-icon:hover {
    background: oklch(0.55 0.2 25);
}

.member-gallery-manage__titel-form {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.member-gallery-manage__titel-form .form-input {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    font-size: 12px;
}

.member-gallery-manage__titel-form .btn-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.member-gallery-manage__heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Ziehen-Griff für die Drag-and-Drop-Sortierung (js/gallery-reorder.js) -
   touch-action:none verhindert, dass iPadOS/Touch-Geräte den Griff als
   Scroll-Geste statt als Drag-Start interpretieren. */
.member-gallery-manage__drag-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 13px;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.member-gallery-manage__item--dragging {
    opacity: 0.5;
}

.member-gallery-manage__item--dragging .member-gallery-manage__drag-handle {
    cursor: grabbing;
}

/* ---------- Mein Profil (profil.php) ---------- */
.profil-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.profil-card {
    background: #ffffff;
    border-radius: var(--tile-radius);
    box-shadow: var(--tile-shadow);
    border-left: var(--accent-bar-width) solid transparent;
    padding: 28px 32px;
}

.profil-card--accent-1 { border-left-color: var(--accent-1-bar); }
.profil-card--accent-2 { border-left-color: var(--accent-2-bar); }

.profil-card--danger {
    border-left-color: oklch(0.55 0.2 25);
}

.profil-card__title {
    margin: 0 0 20px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}

.profil-card__title--danger {
    color: oklch(0.55 0.2 25);
}

.profil-card__meta {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 4px 0 0;
}

/* ---------- Sidebar-Notice (Aktuell-Sidebar: Kurzmeldungen) ---------- */
.sidebar-notice + .sidebar-notice {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 20px;
}

.sidebar-notice__heading {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.sidebar-notice__subheading {
    margin-top: 6px;
    font-weight: 600;
    font-size: 14px;
}

.sidebar-notice__body {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- Downloadbereich ---------- */
.download-row {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: inherit;
}

.download-row__label {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-category-hover);
}

.download-row__desc {
    font-size: 13px;
    color: oklch(0.45 0.01 60);
    margin-top: 2px;
}

.download-row--disabled .download-row__label {
    color: var(--color-text-muted);
}

/* ---------- Flash-Banner (Speicher-Bestätigung, Fehler) ---------- */
.alert {
    padding: 14px 20px;
    border-radius: var(--tile-radius);
    box-shadow: var(--tile-shadow);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
}

.alert-success {
    background: var(--accent-2-bg);
    color: oklch(0.3 0.08 165);
}

.alert-error {
    background: var(--accent-4-bg);
    color: oklch(0.35 0.14 25);
}

.alert-error ul {
    margin: 0;
    padding-left: 20px;
    font-weight: 500;
}

/* ---------- Admin-only Aktionen (Neu/Bearbeiten/Löschen) ---------- */
.page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title-row__admin {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* Admin-Checkbox "Unveröffentlichte Events anzeigen" (index.php) */
.draft-filter {
    margin: 0;
}

.draft-filter__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
}

.draft-filter__label input {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--color-category-hover);
}

.tile__admin-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.tile__admin-actions form {
    margin: 0;
}

/* Details-ansehen-Link + Bearbeiten/Löschen auf einer Zeile, Buttons rechtsbündig */
.btn-edit,
.btn-danger {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
}

.btn-edit {
    background: #ffffff;
    border-color: var(--color-category);
    color: var(--color-category-hover);
}

.btn-edit:hover {
    background: rgba(0, 0, 0, 0.04);
    text-decoration: none;
}

.btn-edit--new {
    padding: 11px 20px;
}

.btn-danger {
    background: oklch(0.55 0.2 25);
    color: #ffffff;
}

.btn-danger:hover {
    background: oklch(0.48 0.2 25);
}

.identity-bar__logout {
    color: inherit;
    text-decoration: underline;
}

/* ---------- Login-/Event-Formular (login.php, event_neu.php, event_bearbeiten.php) ---------- */
.login-form,
.event-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 640px;
}

.login-form__label,
.event-form__label {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 14px;
    margin-top: 14px;
}

.login-form__input,
.event-form__input,
.event-form__select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 15px;
    font-family: 'Barlow', sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    background: #ffffff;
}

.login-form__submit,
.event-form__submit {
    align-self: flex-start;
    margin-top: 24px;
    border: none;
    cursor: pointer;
}

.login-form__links {
    margin-top: 14px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.event-form__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.event-form__grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ---------- Veröffentlichen-Schalter ---------- */
.event-form__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    cursor: pointer;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-body-text);
}

.event-form__toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.event-form__toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    transition: background 0.2s;
}

.event-form__toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}

.event-form__toggle input:checked + .event-form__toggle-track {
    background: var(--color-category-hover);
}

.event-form__toggle input:checked + .event-form__toggle-track .event-form__toggle-thumb {
    transform: translateX(20px);
}

.badge-draft {
    font-weight: 600;
    color: oklch(0.55 0.2 25);
}

.event-form__attachments {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.event-form__attachments-heading {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
}

.file-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Fotos/Dokumente/Pressetexte: 5er-Thumbnail-Raster statt Zeilen-Liste (auf
   Nutzerwunsch: Thumbnails statt reiner Dateinamen-Links in
   event_bearbeiten.php, siehe .file-list__thumb--pdf/.file-list__caption
   unten). minmax(0, 1fr) verhindert, dass ein langer Dateiname eine
   einzelne Spalte aufbläht (gleiches CSS-Grid-Verhalten wie bei
   .press-grid, dort bereits behoben). */
.file-list--photos,
.file-list--thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.file-list--photos .file-list__item,
.file-list--thumbs .file-list__item {
    display: block;
    padding: 0;
    border: none;
    background: none;
}

.file-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
}

/* Dateiname + Größe unterhalb des Thumbnails (Dokumente/Pressetexte). */
.file-list__caption {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Presseorgan/Artikeldatum je Pressetext (event_bearbeiten.php) - Felder
   gestapelt statt nebeneinander, da die Thumbnail-Kachel im 5er-Raster
   schmal ist (anders als die frühere volle Zeilenbreite). */
.file-list__meta-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.file-list__meta-form select.form-input,
.file-list__meta-form input[type="date"] {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
}

.file-list__meta-form .btn-icon {
    align-self: flex-end;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Bild/PDF + Lösch-/Austausch-Symbole direkt auf dem Thumbnail (Feature-
   Bild, Fotos, Dokumente, Pressetexte - alle event_bearbeiten.php). */
.file-list__thumb-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.file-list__thumb-link {
    display: block;
}

.file-list__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* PDF-Variante von .file-list__thumb (Dokumente/Pressetexte) - echte
   Erstseiten-Vorschau per js/pdf-thumbs.js, gleiche Canvas/Fallback-Klassen
   wie .press-grid__thumb--pdf (index.php/archiv.php) bewusst wiederverwendet,
   damit das Skript ohne Änderung auch hier greift. */
.file-list__thumb--pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
}

/* Clientseitige Vorschau noch nicht hochgeladener Dateien (event_neu.php
   "Weitere Fotos oder PDFs"/"Pressetexte", js/pending-upload-preview.js,
   auf Nutzerwunsch) - eigener, schlichterer Kartentyp ohne Overlay-Aktionen
   (Austauschen/Löschen ergibt vor dem Speichern keinen Sinn; die native
   Dateiauswahl ersetzt bei erneutem Klick ohnehin die komplette Auswahl).
   Gleiches minmax(0, 1fr)-Spalten-Prinzip wie .press-grid/.file-list--thumbs. */
.pending-thumb-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 10px 0 4px;
}

.pending-thumb-grid:empty {
    display: none;
}

.pending-thumb__box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
}

.pending-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pending-thumb__img--pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
}

.pending-thumb__pdf-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pending-thumb__pdf-fallback {
    position: relative;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
}

.pending-thumb__caption {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-thumb select.form-input,
.pending-thumb input[type="date"] {
    margin-top: 4px;
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
}

/* Löschen (Kreuzchen) / Austausch (⇄) – kleine runde Icon-Buttons je Anhang,
   analog zu den Medien-Aktionen unter /artdate. In der Zeilenansicht
   (Dokumente) stehen sie inline rechts, auf Bildern liegen sie überlagert
   oben rechts. */
.file-list__actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.file-list__actions--overlay {
    position: absolute;
    top: 6px;
    right: 6px;
    margin-left: 0;
}

.file-list__icon-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-body-text);
    font-size: 14px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}

.file-list__actions--overlay .file-list__icon-btn {
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
}

.file-list__icon-btn--delete:hover {
    background: oklch(0.55 0.2 25);
    color: #ffffff;
}

.file-list__icon-btn--replace:hover {
    background: var(--color-category-hover);
    color: #ffffff;
}

.file-list__replace-input {
    display: none;
}

/* ---------- Feature-Bild-Vorschau (event_bearbeiten.php) ---------- */
.event-form__feature-wrap {
    width: 200px;
    box-shadow: var(--tile-shadow);
}

.event-form__feature-wrap .file-list__thumb {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
}

/* ---------- Admin-Listenverwaltung (links_verwalten.php, downloads_verwalten.php) ---------- */
.admin-list-group {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.admin-group-heading-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-group-heading-row .event-form__input {
    width: auto;
    flex: 1;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
}

.admin-inline-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.admin-inline-form--row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.admin-inline-form--row .event-form__input {
    width: auto;
    flex: 1;
}

.admin-link-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-link-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-list-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, 0.18);
}

.admin-link-list__current {
    font-size: 0.85rem;
    white-space: nowrap;
}

.admin-link-list__hint {
    font-size: 0.85rem;
    color: var(--color-text-muted, #777);
    font-style: italic;
}

.admin-link-list__member-name {
    flex: 1;
    min-width: 200px;
}

.admin-count-dim {
    font-size: 0.9rem;
    color: var(--color-text-muted, #777);
    padding: 0 6px;
    flex-shrink: 0;
}

/* ---------- Admin-Übersicht (admin.php) ---------- */
.admin-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.admin-kachel {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 24px;
    border-radius: var(--tile-radius);
    box-shadow: var(--tile-shadow);
    transition: transform 0.15s ease;
}

.admin-kachel:hover {
    transform: translateY(-3px);
}

.admin-kachel-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.admin-kachel-title {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 6px;
}

.admin-kachel-desc {
    font-size: 14px;
    opacity: 0.85;
}

/* ---------- Admin-Tabellen mit Modal-Dialog (mitglieder_verwalten.php,
   gruppen_verwalten.php, lokationen_verwalten.php) ---------- */
.page-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.page-title-bar-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-td-muted {
    color: var(--color-text-muted);
}

.admin-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 0;
    flex-wrap: wrap;
}

.admin-search-input,
.admin-select {
    padding: 9px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
}

/* Karten-Rahmen um die Admin-Tabellen (mitglieder_verwalten.php,
   gruppen_verwalten.php, lokationen_verwalten.php, eventtypen_verwalten.php)
   – hebt die Tabelle sichtbar vom Seitenhintergrund ab, analog zu den
   übrigen Karten-Elementen des Projekts (.tile, .sidebar-card, .modal-box). */
.admin-table-wrap {
    background: #ffffff;
    border-radius: var(--tile-radius);
    box-shadow: var(--tile-shadow);
    padding: 4px 24px;
    margin-top: 20px;
    overflow: auto;
    /* Kopfzeile + ca. 10 Datenzeilen sichtbar, danach scrollt die Karte
       statt unbegrenzt in die Länge zu wachsen. */
    max-height: 530px;
    border-left: var(--accent-bar-width) solid transparent;
}

/* Kartenfarbe je Admin-Seite passend zur zugehörigen Kachel auf admin.php
   (gleiche Zuordnung: Mitglieder=1, Gruppen=2, Lokationen=3, Eventtypen=4) –
   helle "Wash"-Tönung statt der vollen Kachelfarbe (die auf einer
   datendichten Tabelle zu aufdringlich wirkt) + farbiger Balken links,
   analog zum .tile__bar-Akzentstreifen auf index.php ("3D"-Kartenlook via
   Schatten + Balken statt Vollfläche). */
.admin-table-wrap--accent-1 { background: var(--accent-1-wash); border-left-color: var(--accent-1-bar); }
.admin-table-wrap--accent-2 { background: var(--accent-2-wash); border-left-color: var(--accent-2-bar); }
.admin-table-wrap--accent-3 { background: var(--accent-3-wash); border-left-color: var(--accent-3-bar); }
.admin-table-wrap--accent-4 { background: var(--accent-4-wash); border-left-color: var(--accent-4-bar); }
.admin-table-wrap--accent-5 { background: var(--accent-5-wash); border-left-color: var(--accent-5-bar); }

.admin-table-wrap--accent-1 .admin-table thead th { background: var(--accent-1-wash); }
.admin-table-wrap--accent-2 .admin-table thead th { background: var(--accent-2-wash); }
.admin-table-wrap--accent-3 .admin-table thead th { background: var(--accent-3-wash); }
.admin-table-wrap--accent-4 .admin-table thead th { background: var(--accent-4-wash); }
.admin-table-wrap--accent-5 .admin-table thead th { background: var(--accent-5-wash); }

.admin-table-wrap .admin-table {
    margin-top: 0;
}

.admin-table thead th {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 14px;
    vertical-align: middle;
}

.admin-table th {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.028);
}

.admin-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Verhindert, dass ein Label und ein direkt danach folgender Badge optisch
   zusammenkleben (z.B. Gruppenname + "Systemgruppe"-Badge, Systemrolle +
   Gruppen-Mitgliedschaften-Badges) – fester Abstand statt kollabierendem
   Leerraum aus dem Template-Markup. */
.cell-label-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-td-empty {
    text-align: center;
    font-style: italic;
    color: var(--color-text-muted);
    padding: 28px 0;
}

.admin-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-table__thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}

.admin-table__thumb-empty {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 11px;
    text-align: center;
}

.admin-table__thumb--modal {
    width: 90px;
    height: 90px;
    border-radius: 8px;
}

.loc-thumb-wrap {
    margin-bottom: 10px;
}

/* Generische Sichtbarkeits-Utility – von Modal, Bild-Vorschau und dem
   "Reihenfolge speichern"-Button (lokationen_verwalten.php) genutzt. */
.hidden {
    display: none !important;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    cursor: pointer;
    font-size: 14px;
    color: var(--color-body-text);
    padding: 0;
    flex-shrink: 0;
}

.btn-icon:hover {
    background: rgba(0, 0, 0, 0.12);
}

.btn-icon-danger:hover {
    background: oklch(0.55 0.2 25);
    color: #ffffff;
}

.btn-icon-success {
    color: oklch(0.5 0.14 165);
}

.btn-icon-warning {
    color: oklch(0.6 0.17 70);
}

.btn-icon-locked {
    cursor: default;
    color: var(--color-text-muted);
    background: none;
}

.btn-nav {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    background: #ffffff;
    color: var(--color-body-text);
    text-decoration: none;
}

.btn-nav:hover {
    background: rgba(0, 0, 0, 0.04);
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.badge-active {
    background: var(--accent-2-bg);
    color: oklch(0.3 0.08 165);
}

.group-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text-muted);
}

.admin-group-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.admin-group-cb-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}

.admin-group-cb {
    margin: 0;
}

.admin-tooltip-label {
    cursor: default;
    border-bottom: 1px dotted var(--color-text-muted);
}

.badge-inactive {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text-muted);
}

/* Mailing-Schalter (mailing_verwalten.php) - Status-Badge + Beschreibung
   oberhalb des An/Aus-Buttons, in .admin-table-wrap gehuellt. .mailing-card
   ersetzt dessen knappes Tabellen-Padding (4px oben/unten) durch normalen
   Kartenabstand, da hier kein <table> mit eigenem Zellenpadding sitzt, und
   entfernt die für lange Tabellen gedachte max-height/overflow-Begrenzung. */
.mailing-card {
    padding: 24px;
    max-height: none;
    overflow: visible;
}

.mailing-status-row {
    margin-bottom: 12px;
}

.mailing-status-desc {
    color: var(--color-text-muted);
    margin: 0 0 20px;
    max-width: 640px;
}

.mailing-card__heading {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-body-text);
}

.mailing-tage-input {
    max-width: 120px;
}

.btn-primary {
    background: var(--color-nav-accent);
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover {
    opacity: 0.9;
}

/* Drag-and-Drop-Sortierung (lokationen_verwalten.php) */
.loc-drag-th {
    width: 24px;
}

.loc-drag-handle {
    cursor: grab;
    color: var(--color-text-muted);
    text-align: center;
}

.loc-row-dragging {
    opacity: 0.4;
}

.loc-row-over {
    outline: 2px dashed var(--color-nav-accent);
    outline-offset: -2px;
}

/* Modal-Dialog */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-box {
    background: var(--color-body-bg, #ffffff);
    border-radius: 14px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.modal-box-lg {
    max-width: 640px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.modal-title {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
}

.modal-box form {
    padding: 20px 24px;
}

/* Für Modal-Inhalte ohne <form> (z.B. #size-guard-modal, nur Text + Liste +
   Bestätigen/Abbrechen-Buttons) - gleiches Innenabstand-Maß wie .modal-box
   form oben. */
.modal-body {
    padding: 20px 24px;
}

.size-guard-list {
    margin: 12px 0;
    padding-left: 20px;
    font-weight: 600;
}

.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
}

.archiv-search-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
}

.form-textarea {
    resize: vertical;
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-row .form-group {
    flex: 1;
}

.form-label-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

/* ---------- Gefahrenzone (Event löschen) ---------- */
.form-danger-zone {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ---------- Upload-Korrektur (upload_korrektur.php) ---------- */
.corr-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.corr-stat-box {
    background: #ffffff;
    border-radius: var(--tile-radius);
    box-shadow: var(--tile-shadow);
    padding: 20px;
    text-align: center;
}

.corr-stat-box--ok {
    border-top: 4px solid oklch(0.6 0.14 165);
}

.corr-stat-box--warn {
    border-top: 4px solid oklch(0.65 0.17 55);
}

.corr-stat-val {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.1;
}

.corr-stat-label {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.corr-stat-label small {
    display: block;
    font-size: 11px;
}

.corr-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.corr-section-heading--mt {
    margin-top: 36px;
}

.corr-badge-count {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-body-text);
    font-size: 13px;
    font-weight: 600;
}

.corr-type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.corr-path {
    font-family: monospace;
    font-size: 12.5px;
    word-break: break-all;
}

.corr-th-cb {
    width: 32px;
}

.corr-th-size {
    width: 100px;
}

.corr-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.corr-toolbar-left {
    display: flex;
    gap: 8px;
}

.form-danger-hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
}