/*
 * MUCBOOK Layoutkorrekturen
 * CMS-ADMINS, 2026-09-08
 *
 * Behebt drei Fehler im Bridge-Theme, die auch auf der Produktivseite bestehen:
 * 1. Im Kopfbereich liegen alle fuenf Logovarianten gleichzeitig uebereinander.
 * 2. Im angehefteten Zustand behaelt der Kopfbereich die volle Hoehe, das Logo
 *    ueberlappt dabei das Menue.
 * 3. Der Inhaltsbereich hat keinen seitlichen Abstand, die WPBakery-Zeilen
 *    ragen zusaetzlich 15 Pixel ueber den Rand hinaus.
 *
 * Hinweis zur Umsetzung: Bridge setzt die Logohoehe per JavaScript als
 * Inline-Stil auf das Bild (height: 100%). Die Hoehe wird deshalb am
 * umgebenden Link gesetzt, den das Bild dann ausfuellt.
 */

/* --- 1. Logovarianten: immer nur die passende anzeigen --- */

.page_header .logo_wrapper .q_logo a img {
	display: none;
}

.page_header .logo_wrapper .q_logo a img.normal {
	display: block;
}

.page_header.sticky .logo_wrapper .q_logo a img.normal {
	display: none;
}

.page_header.sticky .logo_wrapper .q_logo a img.sticky {
	display: block;
}

/* --- 2. Angehefteter Kopfbereich: eine Zeile, Logo links, Menue daneben --- */

.page_header.sticky .header_bottom .container_inner {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: 74px;
}

.page_header.sticky .header_inner_left {
	flex: 0 0 auto;
	width: auto;
}

.page_header.sticky .main_menu {
	flex: 1 1 auto;
	float: none;
}

.page_header.sticky .header_inner_right {
	flex: 0 0 auto;
	margin-left: auto;
	float: none;
}

.page_header.sticky .logo_wrapper,
.page_header.sticky .q_logo,
.page_header.sticky .q_logo a {
	height: 34px !important; /* Bridge setzt die Hoehe per JavaScript inline */
	width: auto;
}

.page_header.sticky .q_logo a img {
	width: auto;
	max-width: none;
}

.page_header.sticky .main_menu > ul > li > a {
	line-height: 74px;
}

/* --- 3. Seitliche Abstaende im Inhaltsbereich --- */

.content_inner {
	box-sizing: border-box;
	padding-left: 45px;
	padding-right: 45px;
}

/* WPBakery setzt bei Zeilen einen negativen Aussenabstand, der ueber den Rand hinausragt. */
.content_inner .vc_row {
	margin-left: 0;
	margin-right: 0;
}

/* --- 5. Angehefteter Kopfbereich: volle Breite nutzen, damit das Menue einzeilig bleibt --- */

.page_header.sticky .header_bottom .container,
.page_header.sticky .header_bottom .container_inner {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
}

.page_header.sticky .header_bottom .container_inner {
	padding-left: 45px;
	padding-right: 45px;
	gap: 24px;
}

.page_header.sticky .main_menu > ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.page_header.sticky .main_menu > ul > li > a {
	padding-left: 12px;
	padding-right: 12px;
	white-space: nowrap;
}

/* --- 6. Logobreite: Bridge positioniert die Logobilder absolut, dadurch bleibt der
       Container auf 200 Pixel stehen und das Menue rutscht darunter. Im angehefteten
       Zustand bestimmt das sichtbare Bild die Breite selbst. --- */

.page_header.sticky .logo_wrapper .q_logo a img.sticky {
	position: relative;
	top: auto;
	left: auto;
	margin: 0;
}

.page_header.sticky .header_inner_left,
.page_header.sticky .logo_wrapper,
.page_header.sticky .logo_wrapper .q_logo,
.page_header.sticky .logo_wrapper .q_logo a {
	width: auto !important;
	min-width: 0;
}

/* --- 7. Logo vertikal mittig: Bridge haelt den Logocontainer auf der vollen
       Ausgangshoehe und schiebt das Logo darin nach unten. Im angehefteten
       Zustand richtet sich alles am Flex-Container aus. --- */

.page_header.sticky .header_inner_left,
.page_header.sticky .logo_wrapper,
.page_header.sticky .logo_wrapper .q_logo {
	height: auto !important;
	min-height: 0;
	align-self: center;
	top: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 0;
}

.page_header.sticky .main_menu {
	align-self: center;
}

/* --- 8. Seitenmenue hinter der Menueschaltflaeche --- */

/*
 * Die Eintraege hatten eine feste Zeilenhoehe von 60 Pixeln. Bei umbrechenden
 * Titeln wie "Freunde von MUCBOOK | Blogroll" oder "Impressum & Datenschutz"
 * verdoppelte sich das auf 120 Pixel und riss die Liste auseinander.
 * Der Abstand kommt jetzt aus dem Innenabstand, nicht aus der Zeilenhoehe.
 */

.side_menu .widget_nav_menu ul li {
	line-height: 1.4;
	margin-bottom: 0;
	padding: 10px 0;
}

.side_menu .widget_nav_menu ul li a {
	display: block;
	line-height: 1.4;
}

.side_menu .widget {
	margin-bottom: 24px;
}

.side_menu .widget .textwidget hr,
.side_menu .widget hr {
	border: 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.4 );
	height: 0;
	margin: 18px 0;
}

.side_menu .q_social_icon_holder {
	margin-right: 10px;
}

/*
 * Beim Ueberfahren wurden die Eintraege grau (rgb(157,157,157)). Auf dem tuerkisen
 * Grund des Seitenmenues ist das kaum lesbar. Sie bleiben jetzt weiss und werden
 * stattdessen unterstrichen.
 */

.side_menu .widget_nav_menu ul li a:hover,
.side_menu .widget_nav_menu ul li:hover > a {
	color: #fff !important; /* Bridge setzt global a:hover mit !important auf Grau */
	text-decoration: underline;
}

/* --- 9. Mobil: zuletzt, damit die Regeln die Desktop-Abschnitte ueberschreiben --- */

@media only screen and (max-width: 1000px) {
	.content_inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Kein Flex-Layout auf mobil. Bridge nutzt dort ein eigenes, funktionierendes
	   Kopfbereich-Layout mit ausklappbarer Navigation. Angepasst werden nur
	   Logogroesse und Kopfhoehe. */
	.page_header .header_bottom .container_inner,
	.page_header.sticky .header_bottom .container_inner {
		display: block;
		gap: 0;
	}

	.page_header .logo_wrapper .q_logo a img,
	.page_header.sticky .logo_wrapper .q_logo a img {
		display: none;
	}

	/*
	 * Das Logo war 234 Pixel breit und ragte bei 390 Pixel Fensterbreite
	 * 46 Pixel ueber den rechten Rand, direkt ueber die Menueschaltflaeche.
	 * Zwischen den beiden Schaltflaechen stehen rund 298 Pixel zur Verfuegung.
	 */
	.page_header .logo_wrapper .q_logo a img.mobile,
	.page_header.sticky .logo_wrapper .q_logo a img.mobile {
		display: block;
		width: auto;
		max-width: 150px;
		height: auto !important;
	}

	/* Kopfbereich am Handy: 100 Pixel Hoehe fuer ein 21 Pixel hohes Logo waren zu
	   viel, 64 dann zu wenig Luft. 86 gibt dem 36 Pixel hohen Logo je 25 Pixel
	   Rand nach oben und unten. */
	/* Das Theme setzt in responsive.min.css 100px mit !important und einem
	   spezifischeren Selektor. Deshalb hier header.page_header.centered_logo. */
	header.page_header .header_bottom,
	header.page_header .header_bottom .container_inner,
	header.page_header.centered_logo .logo_wrapper,
	header.page_header.centered_logo .logo_wrapper .q_logo,
	header.page_header .logo_wrapper,
	header.page_header .logo_wrapper .q_logo,
	header.page_header .mobile_menu_button,
	header.page_header .side_menu_button {
		height: 86px !important;
	}

	.page_header .logo_wrapper .q_logo a {
		height: auto !important;
	}
}

/* --- 9. Brotkrumennavigation --- */

/*
 * Das Theme bringt keine eigene Ausgabe mit. Die Brotkrumen kommen von Yoast SEO
 * und werden ueber das MU-Plugin 03-mucbook-brotkrumen.php vor dem Inhalt
 * ausgegeben. Ihre Gestaltung steht seit dem Design-Refresh in
 * mucbook-design.css, Abschnitt 14, damit sie dieselben Werte benutzt wie der
 * uebrige Seitenkopf.
 */

/* --- 10. Breite des Kopfbereichs ---
 *
 * Die Customizer-Ebene hatte .container_inner.clearfix global auf 90 Prozent
 * gesetzt. Die Regel war fuer eine einzelne Seite gedacht, gab aber nebenbei dem
 * Hauptmenue die Breite, die es braucht. Nach der Einschraenkung auf jene Seite
 * brach das Menue zweizeilig um. Der Kopfbereich bekommt die Breite deshalb hier,
 * an der Stelle, an der sie hingehoert, und passend zum angehefteten Zustand.
 */

.page_header .header_bottom .container,
.page_header .header_bottom .container_inner {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
}

.page_header .header_bottom .container_inner {
	padding-left: 45px;
	padding-right: 45px;
}

@media only screen and (max-width: 1000px) {
	.page_header .header_bottom .container_inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* --- 11. Kopfbereich auf kleinen Bildschirmen ---
 *
 * Unterhalb von 1400 Pixeln weicht die Hauptnavigation dem Burgerknopf. Damit
 * standen drei Bedienelemente in der Zeile: der Burger fuer die Hauptnavigation
 * ganz links, die Lupe unmittelbar daneben und rechts ein zweiter Knopf fuer das
 * Seitenmenue, der genauso aussieht wie der erste. Welcher wofuer ist, war nicht
 * zu erkennen.
 *
 * Neu ist eine klare Dreiteilung: Burger links, Logo mittig, Lupe rechts. Das
 * Seitenmenue verliert seinen eigenen Knopf, seine fuenf Eintraege haengen ueber
 * das MU-Plugin 05-mucbook-mobilmenue.php unten im Burgermenue.
 */

@media only screen and (max-width: 1400px) {

	/* Der zweite Knopf verschwindet samt seiner Huelle. */
	.page_header .header_bottom .header_inner_right:not(.left_side),
	.page_header .header_bottom .side_menu_button_wrapper.right {
		display: none;
	}

	/* Die Lupe wandert an den rechten Rand, wo vorher der zweite Knopf sass. */
	.page_header .header_bottom .header_inner_right.left_side {
		float: right;
	}

	.page_header .header_bottom .header_inner_right.left_side .side_menu_button a {
		padding-right: 0;
	}

	/* Beide Bedienelemente bekommen eine Flaeche, die sich mit dem Daumen
	   treffen laesst. Sichtbar bleibt das Symbol in seiner Groesse. */
	.page_header .header_bottom .mobile_menu_button > span,
	.page_header .header_bottom .header_inner_right.left_side .side_menu_button > a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	.page_header .header_bottom .mobile_menu_button {
		margin-left: -12px;
	}

	.page_header .header_bottom .header_inner_right.left_side {
		margin-right: -12px;
	}
}

/* Das Logo kam mit einer per JavaScript gesetzten Hoehe von 80 Pixeln in einer
   64 Pixel hohen Zeile an und ragte oben und unten heraus. */
@media only screen and (max-width: 1000px) {

	.page_header .header_bottom .q_logo a,
	.page_header .header_bottom .q_logo img {
		/* uebersteuert: bridge/js/default.min.js setzt die Hoehe inline. */
		height: 40px !important;
		max-height: 40px !important;
		width: auto !important;
	}
}

/* --- 12. Burgermenue zwischen 1000 und 1400 Pixeln ---
 *
 * Das Theme blendet die Hauptnavigation unterhalb von 1400 Pixeln aus, zeigt
 * das Burgermenue aber erst unterhalb von 1000. Im Band dazwischen war der
 * Burgerknopf sichtbar und ohne Wirkung: der Umschalter des Themes lief zwar,
 * der Menuecontainer blieb aber per CSS ausgeblendet. Solange der zweite Knopf
 * fuer das Seitenmenue existierte, fiel das nicht auf, weil es einen zweiten Weg
 * in die Seite gab.
 *
 * Die Menuepunkte brauchen in einer Zeile 1230 Pixel, mit Lupe und Raendern
 * 1364. Die Grenze von 1400 ist also berechtigt und bleibt. Sichtbar wird
 * stattdessen der Menuecontainer, der Umschalter des Themes erledigt den Rest.
 */

@media only screen and (min-width: 1001px) and (max-width: 1400px) {

	nav.mobile_menu {
		display: block;
	}
}

/* --- 13. Versatz fuer die Werkzeugleiste ---
 *
 * WordPress setzt fuer angemeldete Personen html{margin-top:32px}, damit die
 * feste Werkzeugleiste nichts verdeckt. Diese Regel ist im Bestand ausser Kraft,
 * html steht auf 0. Solange der Kopf weiss war, fiel es kaum auf; seit er dunkel
 * ist, schneidet die Leiste sichtbar in das Logo. Besucher ohne Anmeldung sind
 * nicht betroffen.
 */

body.admin-bar .page_header:not(.sticky) {
	margin-top: 32px;
}

body.admin-bar .page_header.sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {

	body.admin-bar .page_header:not(.sticky) {
		margin-top: 46px;
	}

	body.admin-bar .page_header.sticky {
		top: 46px;
	}
}