/* ---------------------------------------------------------------
   Kopfbereich – Maße aus dem Original (kiwisbar.de, gemessen bei 1440px):

   Höhe 120px, Inhalt 1300px breit (x 70–1370). Dreigeteilt:
   links Öffnungsstatus außen und Menü am Logo, Logo 141×100 mittig,
   rechts Menü am Logo und Reservieren-Pille außen. 35px Abstand
   zwischen Menüs und Logo.

   Menüpunkte Roboto 15/23px, 700, Großbuchstaben, Petrol, 0/24px
   Innenabstand, links und rechts je ein Zierpunkt „·“. Beim Überfahren
   Terracotta, die Punkte heben sich um 1,5px.

   Untermenü: Terracotta, 240px breit, 18px Innenabstand oben/unten,
   beginnt direkt unter der Kopfleiste. Einträge 14/24px, 400, keine
   Großbuchstaben, weiß, 8/29px Innenabstand.

   Mobil (bis 1024px, wie der Wechsel im Original): 90px hoch, Menü-Schaltfläche links, Logo mittig,
   keine Reservieren-Schaltfläche und kein Status.
   --------------------------------------------------------------- */

.kiwis-header {
	position: relative;
	z-index: 30;
	padding: 0 !important; /* WordPress legt sonst 18,75px Wurzel-Abstand an */
	background: transparent;
}

.kiwis-header__innen {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 35px;
	height: var(--kiwis-header-height);
	max-width: 1300px;
	margin-inline: auto;
	padding-inline: 0;
}

@media (max-width: 1340px) {
	.kiwis-header__innen { padding-inline: 20px; }
}

/* Links: Status außen, Menü rückt ans Logo. Rechts spiegelbildlich. */
.kiwis-header__links,
.kiwis-header__rechts {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	height: 100%;
	min-width: 0;
	gap: 16px;
}

.kiwis-header__links  { justify-content: space-between; }
.kiwis-header__rechts { justify-content: space-between; }

/* Logo */
.kiwis-header__logo-bereich {
	justify-self: center;
	line-height: 0;
	margin: 0;
}

.kiwis-header__logo { margin: 0; display: block; }

.kiwis-header__logo img {
	height: 100px;
	width: auto;
	display: block;
}

.kiwis-header__logo--hell { display: none; }

/* Öffnungsstatus: schlichter Text, kein farbiger Punkt. */
.kiwis-header .kiwis-status {
	font-size: 15px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: -0.45px;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
	gap: 0;
}

.kiwis-header .kiwis-status::before { display: none; }

/* ---------------------------------------------------------------
   Hauptmenü
   --------------------------------------------------------------- */

.kiwis-header .wp-block-navigation {
	height: 100%;
	font-size: 15px;
	font-weight: 700;
	line-height: 23px;
	letter-spacing: normal;
	text-transform: uppercase;
}

.kiwis-header .wp-block-navigation__container {
	gap: 0;
	height: 100%;
	flex-wrap: nowrap;
	align-items: stretch;
}

/* Jeder Hauptpunkt füllt die volle Kopfhöhe, damit das Untermenü exakt
   an der Unterkante der Kopfleiste ansetzt. */
.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item {
	display: flex;
	align-items: center;
	height: 100%;
}

.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0 24px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
	transition: color 200ms ease;
}

/* Zierpunkte links und rechts */
.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	position: relative;
}

.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label::before,
.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label::after {
	content: "·";
	position: absolute;
	top: 0;
	font-weight: 700;
	transition: transform 300ms ease;
}

.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label::before { left: -9px; }
.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label::after  { right: -9px; }

.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation-item__label::before {
	transform: translate(-0.35px, -1.5px);
}

.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation-item__label::after {
	transform: translate(0.35px, -1.5px);
}

/* Der Pfeil für Untermenüs ist im Original ausgeblendet. */
.kiwis-header .wp-block-navigation__container .wp-block-navigation__submenu-icon {
	display: none;
}

/* ---------------------------------------------------------------
   Untermenü
   --------------------------------------------------------------- */

.kiwis-header .wp-block-navigation .wp-block-navigation__submenu-container {
	top: 100% !important;
	left: -5px !important;
	width: 240px !important;
	min-width: 240px !important;
	padding: 18px 0 !important;
	background-color: var(--wp--preset--color--accent) !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none;
	transition: opacity 150ms ease-out, top 150ms ease-out;
	text-transform: none;
}

.kiwis-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}

.kiwis-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 8px 29px !important;
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.42px;
	text-transform: none;
	color: #fff !important;
	white-space: nowrap;
	transition: opacity 200ms ease;
}

.kiwis-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.kiwis-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	opacity: 0.7;
	background: transparent;
}

.kiwis-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label::before,
.kiwis-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label::after {
	content: none;
}

/* ---------------------------------------------------------------
   Reservieren-Pille
   --------------------------------------------------------------- */

.kiwis-header__cta { margin: 0; flex: none; }

.kiwis-header__cta .wp-block-button__link {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: -0.45px;
	text-transform: none;
	padding: 12.67px 23.33px;
	border: 0;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	white-space: nowrap;
}

/* ---------------------------------------------------------------
   Seiten mit Titelbild: der Kopf liegt ohne Hintergrund über dem Bild.
   Im Original bleibt das Menü dabei Petrol – nur Status und Logo werden
   hell, die Pille bleibt Petrol.
   --------------------------------------------------------------- */

.wp-site-blocks:has(.kiwis-titelbereich) .kiwis-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
}

.wp-site-blocks:has(.kiwis-titelbereich) .kiwis-header .kiwis-status { color: #fff; }

.wp-site-blocks:has(.kiwis-titelbereich) .kiwis-header__logo--farbe { display: none; }
.wp-site-blocks:has(.kiwis-titelbereich) .kiwis-header__logo--hell  { display: block; }

/* ---------------------------------------------------------------
   Mobil: gemeinsames Aufklappmenü links, Logo mittig.
   --------------------------------------------------------------- */

.kiwis-nav--mobil { display: none !important; }

@media (max-width: 1024px) {
	.kiwis-header__innen {
		grid-template-columns: 1fr auto 1fr;
		height: 90px;
		column-gap: 12px;
		padding-inline: 38px;
	}

	.kiwis-header__links,
	.kiwis-header__rechts { display: none !important; }

	.kiwis-nav--mobil {
		display: flex !important;
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		height: auto;
	}

	.kiwis-header__logo-bereich {
		grid-column: 2;
		grid-row: 1;
	}

	.kiwis-header__logo img { height: 90px; }

	.kiwis-header .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--text);
		padding: 0;
	}

	.kiwis-header .wp-block-navigation__responsive-container-open svg {
		width: 30px;
		height: 30px;
	}

	.wp-site-blocks:has(.kiwis-titelbereich) .kiwis-header .wp-block-navigation__responsive-container-open {
		color: #fff;
	}
}

@media (max-width: 480px) {
	.kiwis-header__innen { padding-inline: 20px; }
}

/* Aufgeklapptes Menü auf dem Telefon */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	padding: 90px 38px 40px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #fff !important;
	font-size: 19px;
	font-weight: 700;
	text-transform: uppercase;
	padding-block: 6px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label::after {
	content: none;
}

/* Der Shortcode-Block hüllt den Status in einen Absatz – ohne Abstände. */
.kiwis-header__links > p,
.kiwis-header__links p { margin: 0; }

/* Das Untermenü setzt an der Unterkante der Kopfleiste an, nicht an der
   des Menüpunkts: WordPress schachtelt die Liste in Hüllen ohne Höhe,
   deshalb wird der Abstand aus Kopfhöhe und Punkthöhe errechnet. */
.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
	top: calc(100% + (var(--kiwis-header-height) - 100%) / 2) !important;
}

/* Unsichtbare Brücke, damit das Untermenü beim Hinüberfahren offen bleibt. */
.kiwis-header .wp-block-navigation__container > .wp-block-navigation-item.has-child::after {
	content: "";
	position: absolute;
	left: -5px;
	right: 0;
	top: 100%;
	height: calc((var(--kiwis-header-height) - 100%) / 2 + 2px);
}

/* Der Kopfbereich hat nie einen eigenen Hintergrund – die Blockeinstellung
   „Weiß“ würde sonst die oberen 120px des Titelbildes verdecken. */
.kiwis-header.has-background,
.kiwis-header {
	background-color: transparent !important;
}

/* Auf schmalen Bildschirmen steht der Kopf auch auf Bildseiten als eigene
   Leiste über dem Titelbild – mit farbigem Logo, wie im Original. */
@media (max-width: 1024px) {
	.wp-site-blocks:has(.kiwis-titelbereich) .kiwis-header { position: relative; }
	.wp-site-blocks:has(.kiwis-titelbereich) .kiwis-header__logo--farbe { display: block; }
	.wp-site-blocks:has(.kiwis-titelbereich) .kiwis-header__logo--hell  { display: none; }
	.wp-site-blocks:has(.kiwis-titelbereich) .kiwis-header .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--text); }
}

/* WordPress gibt im Fluss-Layout jedem Element ab dem zweiten einen
   oberen Abstand (Block-Gap). Im Kopf hat das die rechte Gruppe um 12px
   nach unten geschoben – alle drei Bereiche stehen auf derselben Mitte. */
.kiwis-header__innen > *,
.kiwis-header__links > *,
.kiwis-header__rechts > * {
	margin-block: 0 !important;
}