/* KAI-CMS Demo Website 2 */

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	color: #2b2b2b;
	line-height: 1.6;
	background: #fff;
}

.wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

/* TOP BAR (Firmendaten-Beispiel 1) */

.topbar {
	background: #2f5d50;
	color: #eaf3f0;
	font-size: 13px;
	padding: 6px 0;
}

.topbar .wrap {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.topbar a.company-data {
	color: #eaf3f0;
	text-decoration: none;
}

.topbar a.company-data:hover {
	text-decoration: underline;
}

/* HEADER / NAV */

header {
	border-bottom: 1px solid #eee;
	padding: 18px 0;
}

header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.logo {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #2b2b2b;
	text-decoration: none;
}

/* Nur oberhalb des Mobile-Breakpoints (siehe @media (max-width: 720px) weiter unten) -
bewusst NICHT unbedingt gesetzt: dieselbe Selektor-Spezifitaet wie die
Sichtbarkeits-Mechanik in system.css (nav.mainnav ul.mainnav-list) wuerde sonst bei
gleichem Spezifitaetswert allein durch die spaetere Ladereihenfolge von styles.css
gewinnen und "display:flex" auch auf schmalen Viewports erzwingen - der Button liesse
sich dann zwar anklicken, das Panel bliebe aber unsichtbar bzw. (wie hier) immer offen. */
@media (min-width: 721px) {
	nav.mainnav ul.mainnav-list {
		display: flex;
		align-items: center;
		gap: 28px;
	}
}

nav.mainnav a,
nav.mainnav .mainnav-toggle {
	color: #555;
	text-decoration: none;
	font-size: 15px;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}

/* .mainnav-toggle ist jetzt ein eigenstaendiger <button> NEBEN dem Label-Link (nicht mehr
der Link selbst, siehe menu.js renderItem()) - reine Browser-Button-Defaults (Rahmen/
Hintergrund/Schrift) zuruecksetzen, damit er wie zuvor als reiner Pfeil erscheint. */
nav.mainnav .mainnav-toggle {
	background: transparent;
	border-top: none;
	border-left: none;
	border-right: none;
	font-family: inherit;
	padding: 6px 4px;
}

nav.mainnav a:hover,
nav.mainnav a.active,
nav.mainnav .mainnav-toggle:hover {
	color: #2b2b2b;
	border-bottom-color: #2f5d50;
}

/* Kleiner Pfeil als Hinweis auf ein Untermenue - reines CSS, kein zusaetzliches Icon-Markup.
Der Button selbst hat keinen Text mehr (nur noch dieses Pseudo-Element), daher kein
margin-left mehr noetig (frueher: Abstand zum vorangehenden Label-Text im selben Element). */
nav.mainnav .mainnav-item.has-dropdown > .mainnav-toggle:after {
	content: '▾';
	display: inline-block;
	font-size: 11px;
}

nav.mainnav ul.mainnav-dropdown {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
	box-shadow: 0 10px 24px rgba(0,0,0,0.09);
	padding: 8px 0;
	margin-top: 10px;
}

/* Unsichtbare Bruecke ueber die 10px Luecke aus margin-top oben (siehe system.css:
das Dropdown klappt per :hover auf .mainnav-item.has-dropdown auf/zu - :hover bleibt nur
aktiv, solange die Maus ueber .mainnav-item selbst oder einem seiner Nachfahren steht).
Ohne diese Bruecke verlaesst die Maus beim geraden Herunterbewegen vom Hauptmenuepunkt
zu einem Untermenuepunkt kurzzeitig JEDE hoverbare Flaeche (weder mehr ueber Label/Pfeil
noch schon ueber dem sichtbaren Dropdown-Kasten) - :hover faellt weg, das Dropdown klappt
per CSS sofort wieder zu, BEVOR der Klick auf den Untermenuepunkt ueberhaupt registriert
werden kann. Nur der explizite Klick auf den Pfeil-Button (setzt .is_open statisch, siehe
menu.js) blieb davon unberuehrt, weil er nicht von :hover abhaengt. Die Bruecke ist als
Nachfahre von .mainnav-dropdown selbst Teil von dessen Hover-Kette, transparent und
veraendert daher nichts am sichtbaren Erscheinungsbild. */
nav.mainnav ul.mainnav-dropdown:before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

nav.mainnav ul.mainnav-dropdown a {
	display: block;
	padding: 9px 20px;
	border-bottom: none;
	white-space: nowrap;
	font-size: 14px;
}

nav.mainnav ul.mainnav-dropdown a:hover,
nav.mainnav ul.mainnav-dropdown a.active {
	background: #f7f7f5;
	color: #2f5d50;
}

/* Klassisches 3-Balken-Icon, per JS als drei <span> ins Burger-Button-Markup gesetzt
(cms/js/menu.js). display bewusst NICHT hier gesetzt (nur Groesse/Anordnung) - ob der
Button ueberhaupt sichtbar ist (display:none auf breiten, display:flex auf schmalen
Viewports), steuert allein system.css; wuerde hier zusaetzlich ein unbedingtes
display:flex stehen, ueberschriebe das (spaeter geladen) dessen display:none auf dem
Desktop, der Button bliebe faelschlich immer sichtbar. */
.mainnav-burger {
	width: 26px;
	height: 20px;
	flex-direction: column;
	justify-content: space-between;
}
.mainnav-burger span {
	display: block;
	height: 2px;
	background: #2b2b2b;
	border-radius: 1px;
}

/* HERO */

.hero { position: relative; }

.hero img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	object-position: center;
	display: block;
}

.hero-text {
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 24px 0;
}

.hero-text h1 { font-size: 34px; margin: 0 0 8px; }
.hero-text p { font-size: 17px; color: #555; max-width: 620px; }

/* SECTIONS */

section { padding: 50px 0; }
section.alt { background: #f7f7f5; }
h2 { font-size: 26px; margin: 0 0 24px; }

/* GRIDS */

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

.card { text-align: center; }
.card img { width: 100%; border-radius: 6px; margin-bottom: 14px; display: block; object-fit: cover; object-position: center; }
.card h3 { margin: 0 0 6px; font-size: 18px; }
.card p { color: #666; font-size: 14px; margin: 0; }

/* GALLERY */

.gallery_wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}
.gallery_item img { width: 100%; border-radius: 6px; display: block; object-fit: cover; object-position: center; }

/* CONTACT (Firmendaten-Beispiel 2) */

.contact-box {
	background: #f7f7f5;
	border-radius: 8px;
	padding: 32px;
	max-width: 480px;
}

.contact-box p { margin: 6px 0; }
.contact-box a.company-data { color: #2f5d50; text-decoration: none; }
.contact-box a.company-data:hover { text-decoration: underline; }

.social-links { margin-top: 16px; display: flex; gap: 14px; }
.social-links a.company-data {
	color: #2f5d50;
	font-size: 14px;
	text-decoration: none;
	border: 1px solid #2f5d50;
	border-radius: 20px;
	padding: 6px 14px;
}
.social-links a.company-data:hover { background: #2f5d50; color: #fff; }

/* FOOTER (Firmendaten-Beispiel 3) */

footer {
	border-top: 1px solid #eee;
	padding: 30px 0;
	color: #666;
	font-size: 13px;
}
footer .wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
footer a.company-data { color: #666; text-decoration: none; }
footer a.company-data:hover { text-decoration: underline; }

/* 404-SEITE (404.html, ueber .htaccess/ErrorDocument ausgeliefert - siehe dort) */

.error-404 {
	text-align: center;
	padding: 70px 0 90px;
}

.error-404-code {
	font-size: 72px;
	font-weight: 700;
	color: #2f5d50;
	line-height: 1;
	margin: 0 0 8px;
}

.error-404 h1 {
	margin: 0 0 12px;
}

.error-404 p {
	color: #666;
	font-size: 16px;
	max-width: 480px;
	margin: 0 auto 28px;
}

/* Gescopte Umfaerbung statt .btn-link selbst zu aendern - .btn-link ist auch das
TinyMCE-Editor-Format "Button-Link" (siehe cms/settings.php style_formats) und wird damit
potenziell schon in echtem Seiteninhalt verwendet; eine globale Farbaenderung dort waere
eine unbeabsichtigte Nebenwirkung fuer jede Seite, die dieses Format bereits nutzt. Auf
der 404-Seite selbst darf der Button ruhig den Marken-Gruenton statt des generischen
System-Blaus (cms/css/system.css) tragen. */
.error-404 .btn-link {
	background: #2f5d50;
}

.error-404 .btn-link:hover {
	background: #244a3f;
}

/* COOKIE-CONSENT-BANNER (Optik - Struktur/Mechanik in cms/css/system.css, js/cookieconsent.js) */

.cookieconsent_accept, .cookieconsent_embed_accept {
	background: #2f5d50;
}
.cookieconsent_accept:hover, .cookieconsent_embed_accept:hover {
	background: #244a3f;
}
.cookieconsent_reject:hover {
	border-color: #999;
	color: #333;
}

@media (max-width: 720px) {
	.grid-3 { grid-template-columns: 1fr; }

	/* .mainnav-list ist auf schmalen Viewports das aufklappbare Burger-Panel (Sichtbarkeit/
	Positionierung: system.css) - hier nur die Optik dieses Panels. */
	nav.mainnav ul.mainnav-list {
		background: #fff;
		border: 1px solid #eee;
		border-radius: 6px;
		box-shadow: 0 10px 24px rgba(0,0,0,0.09);
		padding: 8px 0;
		margin-top: 10px;
		min-width: 200px;
		gap: 0;
	}
	nav.mainnav ul.mainnav-list a,
	nav.mainnav ul.mainnav-list .mainnav-toggle {
		display: block;
		padding: 10px 20px;
		border-bottom: none;
	}
	nav.mainnav ul.mainnav-list a:hover,
	nav.mainnav ul.mainnav-list a.active,
	nav.mainnav ul.mainnav-list .mainnav-toggle:hover {
		background: #f7f7f5;
		border-bottom: none;
	}
	/* Elternpunkt mit eigenem Link (a) UND Ausklapp-Button (.mainnav-toggle) sind zwei
	getrennte Geschwister-Elemente im selben <li> (siehe menu.js) - ohne diese Regel wuerde
	obiges "display:block" beide untereinander stapeln (der Button dann als eigene,
	fast leere Zeile nur mit dem Pfeil). Per flex-wrap in eine Zeile nebeneinander, das
	Dropdown (flex-basis:100%) faellt dabei automatisch in die naechste Zeile.
	list-style:none/margin:0 gleichen aus, dass dieses <li> jetzt selbst der Flex-
	Container ist statt nur eines seiner Kind-Links. */
	nav.mainnav ul.mainnav-list li.mainnav-item.has-dropdown {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		list-style: none;
		margin: 0;
	}
	nav.mainnav ul.mainnav-list li.mainnav-item.has-dropdown > a {
		flex: 1 1 auto;
	}
	nav.mainnav ul.mainnav-list li.mainnav-item.has-dropdown > .mainnav-toggle {
		flex: 0 0 auto;
		padding: 10px 20px;
	}
	nav.mainnav ul.mainnav-list li.mainnav-item.has-dropdown > ul.mainnav-dropdown {
		flex-basis: 100%;
	}

	/* Untermenue stapelt sich eingerueckt UNTER seinem Ausloeser (position:static kommt
	aus system.css) statt schwebend danebenzuklappen - passt zur bereits senkrechten
	Burger-Liste. */
	nav.mainnav ul.mainnav-dropdown {
		box-shadow: none;
		border: none;
		margin: 0;
		padding-left: 14px;
		display: none;
	}
	nav.mainnav li.mainnav-item.has-dropdown.is_open > ul.mainnav-dropdown {
		display: block;
	}
	nav.mainnav ul.mainnav-dropdown a {
		padding: 9px 20px 9px 14px;
	}
}

/* TERMINE/KALENDER (Optik - Struktur/Mechanik in cms/css/system.css, js/calendar.js) */

.calendar-widget {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

.calendar-view-button {
	font-size: 13px;
	color: #555;
	padding: 7px 16px;
	border: 1px solid #ddd !important;
}
.calendar-view-button:first-child { border-radius: 20px 0 0 20px; }
.calendar-view-button:last-child { border-radius: 0 20px 20px 0; margin-left: -1px; }

.calendar-view-button.is_active {
	background: #2f5d50;
	color: #fff;
	border-color: #2f5d50 !important;
}

.calendar-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #555;
	padding: 6px 14px;
	margin: 0 8px 8px 0;
	border: 1px solid #ddd !important;
	border-radius: 20px;
}

.calendar-filter.is_active {
	background: #f7f7f5;
	color: #2b2b2b;
	border-color: #2b2b2b !important;
}

.calendar-filter .calendar-dot {
	width: 9px;
	height: 9px;
}

.calendar-body {
	margin-top: 24px;
}

.calendar-empty {
	color: #999;
	font-size: 14px;
}

.calendar-month-heading {
	font-size: 18px;
	margin: 28px 0 14px;
	color: #2b2b2b;
}
.calendar-month-group:first-child .calendar-month-heading {
	margin-top: 0;
}

.calendar-list-item {
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid #eee;
}

.calendar-list-date {
	width: 130px;
	flex-shrink: 0;
}

.calendar-list-day {
	font-size: 13px;
	color: #666;
}

.calendar-list-time {
	font-size: 13px;
	color: #999;
}

.calendar-dot {
	width: 10px;
	height: 10px;
	margin-right: 4px;
	flex-shrink: 0;
}

.calendar-list-title {
	font-size: 16px;
	font-weight: 700;
	color: #2b2b2b;
}

.calendar-list-location {
	font-size: 13px;
	color: #666;
	margin-top: 2px;
}

.calendar-list-description {
	font-size: 14px;
	color: #555;
	margin-top: 6px;
}
.calendar-list-description p:first-child { margin-top: 0; }
.calendar-list-description p:last-child { margin-bottom: 0; }

/* Monatsansicht */

.calendar-grid-header {
	margin-bottom: 16px;
}

.calendar-grid-title {
	font-size: 18px;
	font-weight: 700;
	color: #2b2b2b;
}

.calendar-grid-nav {
	font-size: 22px;
	color: #555;
	padding: 4px 12px;
}
.calendar-grid-nav:hover { color: #2f5d50; }

.calendar-grid-weekdays {
	font-size: 12px;
	color: #999;
	text-align: center;
	margin-bottom: 6px;
}

.calendar-grid-day {
	aspect-ratio: 1;
	border-radius: 8px;
	gap: 4px;
	padding: 6px 0;
}

.calendar-grid-day.has_events:hover {
	background: #f7f7f5;
}

.calendar-grid-daynum {
	font-size: 14px;
	color: #2b2b2b;
}

.calendar-grid-day.is_today .calendar-grid-daynum {
	color: #fff;
	background: #2f5d50;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.calendar-grid-day.is_selected {
	background: #f0efe9;
}

.calendar-grid-dots {
	gap: 3px;
}

.calendar-grid-dot {
	width: 6px;
	height: 6px;
}

.calendar-grid-dayevents {
	margin-top: 20px;
	border-top: 1px solid #eee;
	padding-top: 10px;
}

@media (max-width: 720px) {
	.calendar-list-item {
		flex-direction: column;
		gap: 4px;
	}
	.calendar-list-date {
		width: auto;
		display: flex;
		gap: 10px;
	}
}

/* NEWS/AKTUELLES (Optik - Struktur/Mechanik in cms/css/system.css, js/content-items.js) */

.content-items-widget {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

.content-items-empty {
	color: #999;
	font-size: 14px;
}

.content-items-card-image {
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	margin-bottom: 14px;
	background: #f0efe9;
}

/* .content-item-image (singular) is the detail page's own hero image (see
cse/_template_content_item.html) - distinct from .content-items-card-image (plural) above,
which is only the small teaser-card thumbnail on the overview page. Had no rule at all until
now (unlike every other image slot here), so it rendered unconstrained at its raw
width/height HTML attributes - same width:100%/max-height/object-fit treatment as .hero img,
since it plays the identical "full-width banner image at the top of a page" role. */
.content-item-image {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	object-position: center;
	display: block;
	margin-bottom: 24px;
}

.content-items-card-date {
	font-size: 13px;
	color: #999;
}

.content-items-card-title {
	font-size: 18px;
	font-weight: 700;
	color: #2b2b2b;
	margin: 6px 0 8px;
}

.content-items-card-teaser {
	font-size: 14px;
	color: #555;
}

.content-items-card:hover .content-items-card-title {
	color: #2f5d50;
}