/*
 * Site Core - Rahmen: Header, Menue, Sticky-Verhalten, Footer (aus dem Customizer-
 * "Zusaetzlichen CSS" hierher verlagert, 2026-10-05). Nur Tokens aus tokens.css.
 *
 * Hintergrund Sticky-Header (Ground Truth, 2026-09-02/03): Die Klasse "hdr-compact" auf <html>
 * setzt ein kleines Skript (Code-Snippet, wp_footer) erst nach 220 ms stabilem Blocksy-Zustand -
 * schnelles Hin-und-Her (Trackpad-Overscroll) wird so weggefiltert. Blocksy setzt
 * --shrink-height / --logo-shrink-height kontinuierlich per JS; deshalb werden Zeilen- und
 * Logohoehe auf die stabilen Variablen --height / --logo-max-height umgeleitet und bekommen eine
 * eigene transition (sonst "Wackeln" beim Scrollen). Basisregeln bewusst mit niedriger
 * Spezifitaet (kein #header), damit die spezifischeren Sticky-Regeln darunter greifen.
 */

/* ---------- Schwebende Pillen-Kopfzeile ---------- */
#header,
#header [data-row="middle"] {
	background: transparent !important;
}
#header [data-row="middle"] > .ct-container {
	max-width: 1320px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%), color-mix(in srgb, var(--color-primary) 55%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-header);
	padding: 10px 12px 10px 32px;
	margin-top: 14px;
	margin-bottom: 14px;
	transition: padding 0.2s var(--ease-header), margin 0.2s var(--ease-header), box-shadow 0.2s var(--ease-header), min-height 0.2s var(--ease-header);
}
/* Menue direkt neben dem Logo statt an den rechten Pillenrand gepresst */
#header [data-row="middle"] [data-column="end"] [data-items="primary"] {
	justify-content: flex-start !important;
}
#header [data-row="middle"] .ct-menu-link {
	font-size: 15px !important;
}
/* Hover-Kontrast: gelber Akzent statt Markengruen auf dunkelgruener Pille */
#header .ct-menu-link:hover,
#header .ct-menu-link:focus {
	color: var(--color-accent) !important;
}
/* Hamburger-Icon (mobil) weiss auf der gruenen Pille */
.ct-header-trigger .ct-icon rect {
	fill: var(--color-on-primary) !important;
}

/* ---------- Sticky-Zustand (nur der aktive, angeheftete Klon) ---------- */
html.hdr-compact [data-sticky^="yes:"] .site-title {
	display: none !important;
}
html.hdr-compact [data-sticky^="yes:"] .ct-container,
html.hdr-compact [data-sticky^="yes:"] [data-column],
html.hdr-compact [data-sticky^="yes:"] [data-items] {
	min-width: 0 !important;
}
html.hdr-compact [data-sticky^="yes:"] .ct-container {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}
html.hdr-compact [data-sticky^="yes:"] {
	margin-top: 6px !important;
	margin-bottom: 6px !important;
}
html.hdr-compact [data-sticky^="yes:"] [data-row] > div {
	min-height: 56px !important;
	transition: min-height 0.2s var(--ease-header);
}

/* Zeilen- und Logohoehe von --shrink-height entkoppelt (siehe Kopfkommentar) */
[data-row] > div {
	min-height: var(--height) !important;
	transition: min-height 0.2s var(--ease-header) !important;
}
.site-logo-container {
	height: var(--logo-max-height, 50px) !important;
	transition: height 0.2s var(--ease-header) !important;
}
img.default-logo {
	transition: height 0.2s var(--ease-header) !important;
}

/* Sticky-Logo pro Breakpoint */
@media (min-width: 1000px) {
	html.hdr-compact [data-sticky^="yes:"] .site-logo-container {
		height: 32px !important;
		transition: height 0.2s var(--ease-header);
	}
	html.hdr-compact [data-sticky^="yes:"] img.default-logo {
		height: 42px !important;
		width: auto !important;
		transition: height 0.2s var(--ease-header);
	}
}
@media (min-width: 690px) and (max-width: 999.98px) {
	html.hdr-compact [data-sticky^="yes:"] .site-logo-container,
	html.hdr-compact [data-sticky^="yes:"] img.default-logo {
		height: 48px !important;
		transition: height 0.2s var(--ease-header);
	}
	html.hdr-compact [data-sticky^="yes:"] img.default-logo {
		width: auto !important;
	}
}
@media (max-width: 689.98px) {
	html.hdr-compact [data-sticky^="yes:"] .site-logo-container,
	html.hdr-compact [data-sticky^="yes:"] img.default-logo {
		height: 40px !important;
		transition: height 0.2s var(--ease-header);
	}
	html.hdr-compact [data-sticky^="yes:"] img.default-logo {
		width: auto !important;
	}
}

/*
 * Schmale Desktop-Zone 1000-1249px: Logo + 5-Punkte-Menue passen nicht in Blocksys Grid-Spalten,
 * und Blocksys "Mehr"-Ueberlauf reagiert beim Verkleinern nicht zuverlaessig -> Ueberlauf per
 * CSS vermeiden.
 */
@media (min-width: 1000px) and (max-width: 1249.98px) {
	[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
		--logo-max-height: 55px;
	}
	#header [data-row="middle"] .ct-menu-link {
		font-size: 12px !important;
	}
}

/* ---------- Footer: gelbe Trennlinie, Markenfarbe fuer Links ---------- */
#footer {
	border-top: 1px solid var(--color-accent);
	padding-top: 20px;
	padding-bottom: 20px;
}
#footer a {
	color: var(--color-primary);
	text-decoration: none;
}
#footer a:hover {
	text-decoration: underline;
}