/* KAI-CMS - system.css Basis-/Struktur-Regeln, die unabhaengig vom jeweiligen Projekt-Design funktionieren muessen: - .lightbox_*: Struktur/Mechanik der Bild-Lightbox aus js/lightbox.js (Overlay-Positionierung, Sichtbarkeits-Umschaltung ueber .is_open, Bedienelemente). Visuelle Gestaltung (Abdunkelung, Typografie der Bildunterschrift, Look der drei Bedienknoepfe) liegt wie bei den anderen Bloecken hier in css/styles.css. - .company-data[data-field="oeffnungszeiten"]: sorgt dafuer, dass mehrzeilige Oeffnungszeiten (aus company-data.json) unabhaengig vom umgebenden Container Zeilenumbrueche behalten. - .popup_*: Struktur/Mechanik des Website-Popups aus js/popup.js (Overlay-Positionierung/ -Layout, Groessenbegrenzung des Dialogs, Sichtbarkeits-Umschaltung ueber .is_open, wie .lightbox_*). Visuelle Gestaltung (Hintergrundfarben, Ausrichtung/Abstaende, Typografie) liegt wie bei den anderen Bloecken hier in css/styles.css - das sind die vorgesehenen Customization-Hooks fuer individuelles Kunden-Design pro Kunde. - nav.mainnav .mainnav-*: Struktur/Mechanik der aus menu.json generierten Navigation (js/menu.js) - Dropdown-Positionierung/Sichtbarkeit fuer Untermenues, Anker-Scrolling. Visuelle Gestaltung (Farben, Abstaende) liegt wie beim uebrigen nav.mainnav in css/styles.css. - .calendar-*: Struktur/Mechanik des Termin-Widgets aus js/calendar.js (Listen-/Monats- Umschaltung, Grid-Layout, Sichtbarkeit der Tagesdetails ueber .is_selected/.has_events). Visuelle Gestaltung (Farben, Abstaende, Pills) liegt wie bei den anderen Bloecken hier in css/styles.css. - .cookieconsent_*: Struktur/Mechanik des Cookie-Consent-Banners aus js/cookieconsent.js (fixe Leiste am unteren Bildschirmrand, Sichtbarkeits-Umschaltung ueber .is_open, wie .popup_* bzw. .lightbox_*) sowie der Platzhalter-Mechanik fuer consent-pflichtige Einbettungen (z.B. Google Maps, siehe Hilfe-Sektion im CMS). Akzeptieren-Button-Farbe liegt wie bei .btn-link/anderen Akzent-Farben in css/styles.css. - .kai_icon .cms_icon: Groesse des Icon-Picker-Markers im Kundencontent (siehe openIconPicker()/resolveIconMarkersInEditor() in cms.js, resolveIconMarkers() in iconhelper.php). Gehoert bewusst hierher, nicht in cms.css: cms.css ist die Backend- Stylesheet und wird auf einer echten Kundenseite (index.html etc.) gar nicht eingebunden (nur cms/css/system.css + css/styles.css, siehe deren ) - .cms_icon's Backend-Regel (width/height:19px, cms.css) griffe dort also gar nicht, ein frisch eingefuegtes Icon bliebe unskaliert (SVG-Default-Groesse, deutlich zu gross). 1em statt einer festen Pixelzahl, damit das Icon zur jeweils umgebenden Schriftgroesse passt (Ueberschrift, Fliesstext, ...) statt auf jeder Kundenseite gleich gross zu wirken unabhaengig vom Kontext. Wird VOR css/styles.css eingebunden (siehe der Seiten sowie content_css in cms/settings.php), damit projektspezifisches Design bei Bedarf ueberschreiben kann. */ /* LIGHTBOX (Struktur/Mechanik fuer js/lightbox.js - Optik in css/styles.css, siehe dort fuer die Liste der vorgesehenen Customization-Hooks) */ .lightbox_overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 40px; /* display bleibt immer "flex" - Ein-/Ausblenden laeuft rein ueber opacity/visibility, damit beides (anders als bei display:none/flex) animierbar ist. visibility wird beim Oeffnen sofort auf "visible" umgeschaltet, beim Schliessen aber erst NACH der Opacity-Transition (transition-delay = gleiche Dauer wie die Opacity-Transition) - so bleibt das Overlay waehrend des Fade-outs klickbar/sichtbar und verschwindet danach komplett aus der Interaktions-/Tab-Reihenfolge, ganz ohne JS-Timer. */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .lightbox_overlay.is_open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s ease, visibility 0s linear 0s; } .lightbox_figure { /* text-align zentriert die Bildunterschrift unter dem Grossbild. Bleibt hier, obwohl es Typografie ist: das Bild wird von der Mechanik zentriert, eine linksbuendige Unterschrift darunter saehe nach Fehler aus, nicht nach Gestaltung. Ueberschreibbar bleibt es trotzdem - styles.css wird nach dieser Datei geladen. */ margin: 0; max-width: 90vw; max-height: 90vh; text-align: center; /* Spalte statt Standard-Blockfluss, seit unter der Bildunterschrift noch die Feldliste stehen kann (renderFields() in js/lightbox.js): zusammen mit "min-height: 0" am Bild gibt das Grossbild Platz ab, wenn Unterschrift und Felder sonst unter den unteren Bildschirmrand rutschen wuerden. Ohne das schneidet die max-height der figure die letzten Zeilen ab - mit Feldern war genau das der Fall. */ display: flex; flex-direction: column; align-items: center; /* Leichtes Scale-up beim Oeffnen (0.92 -> 1), laeuft parallel zur Opacity-Transition des Overlays - zusammen ergibt das ein sanftes "Einwachsen" statt hartem Erscheinen. */ transform: scale(0.92); transition: transform 0.25s ease; } .lightbox_overlay.is_open .lightbox_figure { transform: scale(1); } .lightbox_img { max-width: 90vw; max-height: 80vh; object-fit: contain; display: block; /* Siehe .lightbox_figure: erlaubt dem Bild, unter seine Inhaltsgroesse zu schrumpfen, damit die Textzeilen darunter im Bild bleiben. */ min-height: 0; /* Kurzes Abblenden beim Bildwechsel (siehe lightbox.js: Klasse wird vor dem src-Tausch gesetzt, danach wieder entfernt) - kein voller Fade auf 0, damit der Wechsel zuegig/knackig bleibt statt zu "blinken". Diese beiden Regeln bleiben als GANZES hier, obwohl der Wert 0.15 fuer sich genommen eine gestalterische Entscheidung waere: die Dauer 0.15s ist die CSS-Haelfte einer Mechanik, deren andere Haelfte im Skript steht (SWITCH_FADE_MS = 150 in lightbox.js, siehe den Kommentar dort - "must match the CSS transition on .lightbox_img"). Faende sich die Transition in styles.css und eine Installation haette sie nicht, wartete das Skript weiterhin 150 ms, das Bild stuende so lange hart bei 15 % Deckkraft und spraenge dann um. */ opacity: 1; transition: opacity 0.15s ease; } .lightbox_img.lightbox_img_switching { opacity: 0.15; } .lightbox_close, .lightbox_prev, .lightbox_next { position: fixed; /* Reset gegen die Browser-Defaults des