/* =========================================================
   Mobile Kopfzeile wie bei sachverstand-leipzig.de:
   links das eigene Logo (Affe), rechts zwei runde Knöpfe –
   erst Partner-Logo (Sachverstand), ganz rechts das Menü.
   Burger wird zum X, Hintergrund wird unscharf.
   (Menü-Erweiterung setzt beim Öffnen .display auf .menu-icon und ul.menu)
   ========================================================= */
@media screen and (max-width: 900px) {

	/* ---------- Kopfzeile ---------- */
	#header,
	#header.second {
		height: auto !important;
	}

	#header > div {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 10px !important;
		width: 100% !important;
		max-width: none !important;
		padding: 12px 16px !important;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}

	#HeaderExtnsion {
		min-height: 69px !important;
	}

	/* Eigenes Logo links */
	#header #logo {
		order: 1;
		position: relative !important;
		margin-right: auto !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
		flex: 0 0 auto;
	}

	#header #logo img {
		display: block;
		height: 44px !important;
		width: auto !important;
		transition: transform .4s cubic-bezier(.2, .8, .2, 1);
	}

	#header #logo a:active img { transform: rotate(-6deg) scale(1.05); }

	/* Partner-Logo (Sachverstand) als runder Knopf – vor dem Menü */
	#header #sachverstand-schimmel {
		order: 2;
		position: relative !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		padding: 8px;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, .25);
		border-radius: 50%;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transition: border-color .25s, background .25s, transform .25s;
	}

	#header #sachverstand-schimmel img {
		display: block;
		width: 100% !important;
		height: auto;
	}

	#header #sachverstand-schimmel:active {
		border-color: #fff;
		background: rgba(255, 255, 255, .08);
		transform: scale(.94);
	}

	/* Menü ganz rechts */
	#header #menu {
		order: 3;
		position: relative !important;
		display: flex !important;
		align-items: center;
		flex: 0 0 44px;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: 44px !important;
		min-height: 0 !important;
		margin: 0 !important;
	}

	#header #menu > div {
		position: static !important;
		display: flex !important;
		align-items: center;
		width: auto !important;
		margin: 0 !important;
	}

	/* ---------- Menü-Knopf: rund, drei Balken ---------- */
	#menu .menu-icon {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		transform: none !important;
		z-index: 2;
		display: flex !important;
		flex-direction: column;
		justify-content: space-between;
		width: 44px !important;
		height: 44px !important;
		padding: 13px 11px !important;
		margin: 0 !important;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, .25) !important;
		border-radius: 50% !important;
		background: linear-gradient(#fff, #fff) center / 20px 2.5px no-repeat !important;
		box-shadow: none !important;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background-size .25s ease, border-color .25s ease;
	}

	#menu .menu-icon > * { display: none !important; }

	#menu .menu-icon::before,
	#menu .menu-icon::after {
		content: "" !important;
		display: block !important;
		position: static !important;
		width: 100% !important;
		height: 2.5px !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 3px;
		background: #fff !important;
		box-shadow: none !important;
		transform-origin: 50% 50%;
		transition: transform .4s cubic-bezier(.68, -0.4, .27, 1.4);
	}

	/* Geöffnet: mittlerer Balken verschwindet, äußere drehen sich zum X */
	#menu .menu-icon.display {
		background-size: 0 2.5px !important;
		border-color: #fff !important;
	}

	#menu .menu-icon.display::before {
		transform: translateY(6.75px) rotate(45deg);
	}

	#menu .menu-icon.display::after {
		transform: translateY(-6.75px) rotate(-45deg);
	}

	/* Geöffnetes Menü unter der Kopfzeile, volle Breite */
	#menu ul.menu.display {
		position: fixed !important;
		top: 80px !important;
		left: 16px !important;
		right: 16px !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		transform: none !important;
		z-index: 100;
	}

	/* ---------- Nach-oben-Knopf über dem Keks-Knopf ---------- */
	.backToTop {
		bottom: 72px !important;
	}

	/* ---------- Unscharfer Hintergrund ---------- */
	#main::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 98;
		background: rgba(0, 0, 0, .35);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .35s ease, visibility 0s linear .35s;
	}

	body.cm-menu-offen #main::after,
	body:has(#menu .menu-icon.display) #main::after {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity .35s ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	#menu .menu-icon::before,
	#menu .menu-icon::after,
	#main::after { transition: none !important; }
}