/* KAI-CMS - system.css Basis-/Struktur-Regeln, die unabhaengig vom jeweiligen Projekt-Design funktionieren muessen: - .quote / .infobox / .btn-link: von den TinyMCE-style_formats in cms/settings.php referenziert (Editor-Formate "Zitat"/"Info-Box"/"Warnung"/"Button-Link") - ohne Basis-Styling hier waeren das nur unformatierte Blockquotes/Divs/Links. - .lightbox_*: Struktur/Mechanik der Bild-Lightbox aus js/lightbox.js (Overlay-Positionierung, Sichtbarkeits-Umschaltung ueber .is_open, Bedienelemente). - .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 (zentriertes Overlay, abgedunkelter Hintergrund, Sichtbarkeits-Umschaltung ueber .is_open, wie .lightbox_*). - 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_*/.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. Wird VOR css/styles.css eingebunden (siehe der Seiten sowie content_css in cms/settings.php), damit projektspezifisches Design bei Bedarf ueberschreiben kann. */ /* QUOTE */ .quote { margin: 20px 0; padding: 4px 20px; border-left: 4px solid #4a6fa5; font-style: italic; color: #666; } /* INFOBOX */ .infobox { margin: 20px 0; padding: 16px 20px; border-radius: 6px; border-left: 4px solid #888; background: #f7f7f5; } .infobox-info { background: #eef3fa; border-left-color: #4a6fa5; } .infobox-warning { background: #fdf3e0; border-left-color: #d99a2b; } /* BUTTON-LINK */ .btn-link { display: inline-block; padding: 10px 22px; border-radius: 6px; background: #4a6fa5; color: #fff; text-decoration: none; transition: background-color 0.15s ease; } .btn-link:hover { background: #3c5c8a; } /* LIGHTBOX (Struktur/Mechanik fuer js/lightbox.js) */ .lightbox_overlay { position: fixed; inset: 0; background: rgba(20,20,20,0.92); 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 { margin: 0; max-width: 90vw; max-height: 90vh; text-align: 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; border-radius: 4px; /* 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". */ opacity: 1; transition: opacity 0.15s ease; } .lightbox_img.lightbox_img_switching { opacity: 0.15; } .lightbox_caption { color: #eee; font-size: 14px; margin-top: 12px; } .lightbox_close, .lightbox_prev, .lightbox_next { position: fixed; background: rgba(255,255,255,0.1); color: #fff; border: none; cursor: pointer; line-height: 1; } .lightbox_close { top: 20px; right: 24px; font-size: 32px; width: 44px; height: 44px; border-radius: 50%; } .lightbox_prev, .lightbox_next { top: 50%; transform: translateY(-50%); font-size: 34px; width: 52px; height: 52px; border-radius: 50%; } .lightbox_prev { left: 20px; } .lightbox_next { right: 20px; } .lightbox_close:hover, .lightbox_prev:hover, .lightbox_next:hover { background: rgba(255,255,255,0.25); } /* COMPANY DATA (Struktur, unabhaengig vom umgebenden Container) */ .company-data[data-field="oeffnungszeiten"] { white-space: pre-line; } /* POPUP (Struktur/Mechanik fuer js/popup.js) */ .popup_overlay { position: fixed; inset: 0; background: rgba(20,20,20,0.75); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 40px; /* Analog zu .lightbox_overlay (siehe dort fuer Details): display bleibt immer "flex", Ein-/Ausblenden laeuft nur ueber opacity/visibility (animierbar, anders als display:none/ flex). transition-delay auf visibility haelt das Overlay waehrend des Fade-outs sichtbar/ klickbar und schaltet es erst danach komplett aus der Interaktion, ganz ohne JS-Timer. */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .popup_overlay.is_open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s ease, visibility 0s linear 0s; } .popup_dialog { position: relative; background: #fff; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; border-radius: 6px; padding: 40px 30px 30px; box-sizing: border-box; /* Leichtes Scale-up beim Oeffnen (0.92 -> 1), analog zu .lightbox_figure - laeuft parallel zur Opacity-Transition des Overlays. */ transform: scale(0.92); transition: transform 0.25s ease; } .popup_overlay.is_open .popup_dialog { transform: scale(1); } .popup_close { position: absolute; top: 10px; right: 14px; background: transparent; color: #666; border: none; cursor: pointer; font-size: 28px; line-height: 1; } .popup_close:hover { color: #111; } .popup_image { display: block; max-width: 100%; height: auto; margin: 0 0 20px; border-radius: 4px; } .popup_text { font-size: 16px; line-height: 1.5; color: #333; } .popup_text p { margin: 0 0 14px; } .popup_text p:last-child { margin-bottom: 0; } /* COOKIE CONSENT (Struktur/Mechanik fuer js/cookieconsent.js) */ .cookieconsent_banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #fff; border-top: 1px solid #eee; box-shadow: 0 -4px 20px rgba(0,0,0,0.08); /* Analog zu .popup_overlay/.lightbox_overlay (siehe dort fuer Details): display bleibt immer vorhanden, Ein-/Ausblenden laeuft nur ueber opacity/visibility/transform (animierbar). Zusaetzlich ein leichtes Herein-/Heraus-Gleiten von unten (transform), passend zur Position am unteren Bildschirmrand - bei Popup/Lightbox (mittig) war stattdessen ein Scale-Effekt passender. */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; } .cookieconsent_banner.is_open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s; } .cookieconsent_banner_inner { max-width: 1100px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; } .cookieconsent_text { flex: 1 1 380px; font-size: 14px; line-height: 1.5; color: #333; } .cookieconsent_text p { margin: 0 0 8px; } .cookieconsent_text p:last-child { margin-bottom: 0; } .cookieconsent_actions { flex: 0 0 auto; display: flex; gap: 10px; } .cookieconsent_accept, .cookieconsent_reject { font-family: inherit; font-size: 14px; padding: 10px 20px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .cookieconsent_accept { border: none; background: #333; color: #fff; } .cookieconsent_reject { border: 1px solid #ccc; background: transparent; color: #555; } /* Cookies setzende Einbettungen (z.B. Google Maps) - siehe Hilfe-Sektion im CMS fuer die von Redakteuren zu verwendende Syntax. Das iframe bleibt ohne src, bis entweder global zugestimmt wurde oder gezielt auf den Platzhalter-Button geklickt wird (js/cookieconsent.js kopiert dann data-cookieconsent-src -> src). */ .cookieconsent_embed { position: relative; } .cookieconsent_embed iframe { display: block; width: 100%; border: 0; } .cookieconsent_embed_placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; box-sizing: border-box; background: #f0f0ee; } .cookieconsent_embed.is_consented .cookieconsent_embed_placeholder { display: none; } .cookieconsent_embed_accept { font-family: inherit; font-size: 14px; padding: 10px 20px; border: none; border-radius: 6px; background: #333; color: #fff; cursor: pointer; } /* MAINNAV (Struktur/Mechanik fuer js/menu.js) */ /* Sanftes Scrollen zu Section-Ankern (#id) - deckt sowohl Klicks auf einen Section-Menuepunkt auf der bereits offenen Zielseite ab (nativer Anker-Sprung des Browsers wird dadurch automatisch sanft) als auch, in Kombination mit dem scrollIntoView-Aufruf in menu.js, den Seitenwechsel-Fall. */ html { scroll-behavior: smooth; } nav.mainnav ul.mainnav-list { list-style: none; margin: 0; padding: 0; } nav.mainnav li.mainnav-item { position: relative; } /* Dropdown ist standardmaessig unsichtbar UND aus dem Layout-Fluss (display:none) - anders als beim Lightbox-/Popup-Overlay reicht hier reines display, da kein Ein-/Ausblenden animiert werden muss (ein Untermenue klappt bewusst hart auf/zu, nicht sanft). */ nav.mainnav ul.mainnav-dropdown { list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; min-width: 180px; display: none; z-index: 100; } /* Aufklappen per Hover (Desktop-Komfort) ODER per .is_open-Klasse (von menu.js beim Klick gesetzt - noetig fuer Touch-Geraete, wo :hover nicht zuverlaessig feuert). Beide Wege fuehren zum selben sichtbaren Zustand. */ nav.mainnav li.mainnav-item.has-dropdown:hover > ul.mainnav-dropdown, nav.mainnav li.mainnav-item.has-dropdown.is_open > ul.mainnav-dropdown { display: block; } nav.mainnav ul.mainnav-dropdown li { list-style: none; } /* Burger-Umschalter (nur auf schmalen Viewports, siehe Media Query unten) - Basis-Reset hier, visuelle Gestaltung (Balken-Farbe/-Abstand) liegt wie beim uebrigen mainnav in css/styles.css. */ .mainnav-burger { display: none; background: transparent; border: none; cursor: pointer; padding: 0; } @media (max-width: 720px) { /* display:flex statt nur "block" - die drei Balken-Spans werden per flex-direction:column gestapelt (siehe .mainnav-burger span in css/styles.css), das muss also schon hier beim Sichtbarmachen mitkommen. */ .mainnav-burger { display: flex; } nav.mainnav { position: relative; } /* .mainnav-list dient auf schmalen Viewports gleichzeitig als aufklappbares Burger-Panel - standardmaessig unsichtbar, erst .is_open (vom Burger-Button in menu.js gesetzt) blendet sie ein. Auf breiten Viewports (ausserhalb dieser Media Query) bleibt sie immer sichtbar, die Klasse wird dort schlicht ignoriert. */ nav.mainnav ul.mainnav-list { display: none; position: absolute; top: 100%; right: 0; z-index: 200; flex-direction: column; } nav.mainnav ul.mainnav-list.is_open { display: flex; } /* Untermenues stapeln sich eingerueckt innerhalb der bereits senkrechten Burger-Liste, statt wie auf dem Desktop schwebend danebenzuklappen. */ nav.mainnav ul.mainnav-dropdown { position: static; } } /* TERMINE/KALENDER (Struktur/Mechanik fuer js/calendar.js) */ .calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .calendar-view-toggle { display: flex; flex: 0 0 auto; } .calendar-filters { display: flex; flex-wrap: wrap; flex: 1 1 auto; } .calendar-filter, .calendar-view-button { cursor: pointer; background: none; /* Reset gegen Browser-Default-Buttonrahmen/-Innenabstand - die eigentliche Optik (Rahmenfarbe, Radius, aktiver Zustand) liegt komplett in styles.css. */ border: 0; font: inherit; } .calendar-month-group { width: 100%; } .calendar-list-item { display: flex; width: 100%; box-sizing: border-box; } .calendar-list-date { display: flex; flex-direction: column; flex: 0 0 auto; } .calendar-list-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; /* erlaubt text-overflow/Umbruch in Titel/Beschreibung innerhalb des flex-Items */ } .calendar-grid-header { display: flex; align-items: center; justify-content: space-between; } .calendar-grid-nav { cursor: pointer; background: none; border: 0; font: inherit; } .calendar-grid-weekdays, .calendar-grid-days { display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-grid-day { cursor: default; background: none; border: 0; font: inherit; display: flex; flex-direction: column; align-items: center; width: 100%; box-sizing: border-box; } .calendar-grid-day.has_events { cursor: pointer; } .calendar-grid-day.is_empty { cursor: default; visibility: hidden; } .calendar-grid-dots { display: flex; } .calendar-grid-dot { border-radius: 50%; display: inline-block; } @media (max-width: 720px) { .calendar-toolbar { flex-direction: column; align-items: flex-start; } } /* CONTENT ITEMS / NEWS / AKTUELLES (Struktur/Mechanik fuer js/content-items.js) */ .content-items-widget { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; } .content-items-card { display: flex; flex-direction: column; text-decoration: none; } .content-items-card-image { width: 100%; object-fit: cover; object-position: center; display: block; } .content-items-card-body { display: flex; flex-direction: column; }