/* =========================================================
   Header + Menus (Desktop + Mobile)
   ========================================================= */

/* ---------- Header (default: on top of video) ---------- */
.site-header{
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--header-height);
	z-index: 999;

	background: rgba(0,0,0,.50); /* black with 50% opacity */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);

	transition: height var(--transition), background var(--transition), backdrop-filter var(--transition);
}

.site-header.is-scrolled{
	height: var(--header-height-scrolled);
	background: rgba(255,255,255,1);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
}

/* =========================================================
   Header Layout: Logo immer exakt zentriert (Grid 3 Spalten)
   ========================================================= */

.site-header__inner{
  height: 100%;
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1.1fr; /* links flexibel, mitte Logo, rechts flexibel */
  align-items: center;
  gap: 18px; /* wie vorher */
}

/* linke und rechte Spalte jeweils an die Außenkante drücken */
.site-header__left{
  justify-self: start;
	padding-top: 25px;
}

.site-header__right{
  justify-self: end;
	padding-top: 25px;
}

/* Logo-Spalte exakt zentriert */
.site-header__brand{
  justify-self: center;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* WordPress Custom Logo Markup */
.custom-logo-link{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Das eigentliche Logo-Bild */
.custom-logo,
.site-header__logo{
  height: 55%;     /* <-- 80% der Header-Höhe */
  width: auto;
  max-width: 100%;
  display: block;
}

/* Wenn der Header gescrolled ist, bleibt es 80% der dann kleineren Header-Höhe */
.site-header.is-scrolled .custom-logo,
.site-header.is-scrolled .site-header__logo{
  height: 45%;
}

.site-header.is-scrolled .site-header__logo{
	max-height: 60px;
}

/* ---------- Desktop Menu ---------- */
.site-nav--desktop{ display:block; }
.menu-toggle{ display:none; }

.primary-menu{
	display:flex;
	gap: 18px;
	align-items:center;
}

.primary-menu > li{
	position: relative;
}

.primary-menu a{
	display:inline-flex;
	align-items:center;
	gap: 8px;
	font-size: 14px;
	padding: 10px 0;
	color: #fff;
	transition: color var(--transition);
}

.site-header.is-scrolled .primary-menu a{
	color: #000;
}

/* Arrow icon next to each menu item (replace URL anytime) */
/* Pfeil nur wenn Untermenü vorhanden */
.primary-menu > li.menu-item-has-children > a::after{
  content:"";
  width: 12px;
  height: 12px;
  display:inline-block;
  background: center / contain no-repeat url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/chevron-down.svg");
  filter: invert(1);
  opacity: .9;
}

.site-header.is-scrolled .primary-menu > li.menu-item-has-children > a::after{
  filter: none;
}

.site-header.is-scrolled .primary-menu > li > a::after{
	filter: none; /* black arrow on white header */
}

/* Submenu (hover) */
.primary-menu .sub-menu{
	position:absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding: 12px 0;
	background: rgba(0,0,0,.75);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display:none;
}

.site-header.is-scrolled .primary-menu .sub-menu{
	background: #fff;
	border: 1px solid rgba(0,0,0,.10);
}

.primary-menu li:hover > .sub-menu{
	display:block;
}

.primary-menu .sub-menu a{
	display:block;
	padding: 10px 16px;
	color: #fff;
}

.site-header.is-scrolled .primary-menu .sub-menu a{
	color: #000;
}

/* ---------- Language switcher (desktop) ---------- */
.lang-switcher{
	position: relative;
}
.lang-switcher__button{
	display:inline-flex;
	align-items:center;
	gap: 10px;
	background: transparent;
	border: 0;
	padding: 10px 0;
	cursor:pointer;
	color: #fff;
	font-size: 14px;
}

.site-header.is-scrolled .lang-switcher__button{ color:#000; }

.lang-switcher__arrow{
	width: 12px;
	height: 12px;
	background: center / contain no-repeat url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/chevron-down.svg");
	filter: invert(1);
	opacity: .9;
}

.site-header.is-scrolled .lang-switcher__arrow{ filter:none; }

.lang-switcher__list{
	position:absolute;
	top: 100%;
	right: 0;
	min-width: 140px;
	padding: 12px 0;
	background: rgba(0,0,0,.75);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display:none;
}

.site-header.is-scrolled .lang-switcher__list{
	background:#fff;
	border: 1px solid rgba(0,0,0,.10);
}

.lang-switcher:hover .lang-switcher__list{ display:block; }

.lang-switcher__list a{
	display:block;
	padding: 10px 16px;
	color:#fff;
}

.site-header.is-scrolled .lang-switcher__list a{ color:#000; }

/* =========================================================
   Responsive — Header/Menus
   ========================================================= */

/* ---------- <= 1024px ---------- */
@media (max-width: 1024px){
	.primary-menu{ gap: 14px; }
	.primary-menu a{ font-size: 15px; }
}

/* ---------- <= 768px (Mobile layout) ---------- */
@media (max-width: 768px){
	.site-nav--desktop{ display:none; }
	.menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }

	.menu-toggle{
		width: 46px;
		height: 46px;
		border: 1px solid rgba(255,255,255,.35);
		border-radius: 8px;
		background: transparent;
		cursor:pointer;
		transition: border var(--transition);
	}

	.site-header.is-scrolled .menu-toggle{
		border-color: rgba(0,0,0,.35);
	}

	.menu-toggle__icon{
		width: 22px;
		height: 2px;
		background: #fff;
		position: relative;
		display:block;
	}
	.menu-toggle__icon::before,
	.menu-toggle__icon::after{
		content:"";
		position:absolute;
		left:0;
		width: 22px;
		height: 2px;
		background:#fff;
		transition: background var(--transition);
	}
	.menu-toggle__icon::before{ top:-7px; }
	.menu-toggle__icon::after{ top:7px; }

	.site-header.is-scrolled .menu-toggle__icon,
	.site-header.is-scrolled .menu-toggle__icon::before,
	.site-header.is-scrolled .menu-toggle__icon::after{
		background:#000;
	}

	/* Mobile drawer */
	.mobile-drawer{
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.55);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		z-index: 998;
	}

	.site-header.is-scrolled + .site-content .mobile-drawer{
		top: var(--header-height-scrolled);
	}

	.mobile-drawer__inner{
		background: #fff;
		padding: 18px 0;
		max-height: 100%;
		overflow:auto;
	}

	.mobile-menu{
		display:block;
	}
	.mobile-menu a{
		display:block;
		padding: 14px 0;
		border-bottom: 1px solid rgba(0,0,0,.08);
		color:#000;
		font-size: 16px;
	}
	.mobile-menu .sub-menu{
		display:none;
		padding-left: 14px;
	}
	.mobile-menu .menu-item-has-children.is-open > .sub-menu{
		display:block;
	}

	.submenu-toggle{
		margin-left: 10px;
		width: 34px;
		height: 34px;
		border: 1px solid rgba(0,0,0,.15);
		border-radius: 8px;
		background: center / 16px 16px no-repeat url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/chevron-down.svg");
		cursor:pointer;
	}

	.mobile-lang{ padding-top: 14px; }
	.mobile-lang .lang-switcher__button{ color:#000; }
	.mobile-lang .lang-switcher__arrow{ filter:none; }
	.mobile-lang .lang-switcher__list{
		position: static;
		display:block;
		background: transparent;
		border: 0;
		padding: 8px 0 0 0;
	}
	.mobile-lang .lang-switcher__list a{
		color:#000;
		padding: 10px 0;
		border-bottom: 1px solid rgba(0,0,0,.08);
	}
}

/* =========================================================
   Logo Swap (weißes Logo auf dunklem Header, schwarzes auf weißem Header)
   ========================================================= */
.logo-swap{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.logo-swap__img{
  height: 55%;     /* wie gewünscht: 80% der Header-Höhe */
  width: auto;
  max-width: 100%;
  display: block;
  transition: opacity var(--transition);
}

/* Standard (Header dunkel): weißes Logo sichtbar */
.logo--light{ opacity: 1; }
.logo--dark{
  opacity: 0;
  height: 35%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Gesrollt (Header weiß): schwarzes Logo sichtbar */
.site-header.is-scrolled .logo--light{ opacity: 0; }
.site-header.is-scrolled .logo--dark{ opacity: 1; }

/* Weißer Header: leichter Schatten nach unten */
.site-header.is-scrolled{
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* =========================================================
   White Header Context (z.B. Apartments + Blog Posts)
   => Dropdowns müssen dann auch weiß sein (nicht schwarz)
   ========================================================= */

.template-white-header .site-header{
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* Text/Farben im Header */
.template-white-header .primary-menu a,
.template-white-header .lang-switcher__button{
  color:#000;
}

/* Pfeile schwarz */
.template-white-header .primary-menu > li.menu-item-has-children > a::after,
.template-white-header .lang-switcher__arrow{
  filter:none;
}

/* Dropdown-Menüs: weiß */
.template-white-header .primary-menu .sub-menu{
  background:#fff;
  border: 1px solid rgba(0,0,0,.10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.template-white-header .primary-menu .sub-menu a{
  color:#000;
}

/* Language Dropdown: weiß */
.template-white-header .lang-switcher__list{
  background:#fff;
  border: 1px solid rgba(0,0,0,.10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.template-white-header .lang-switcher__list a{
  color:#000;
}

/* Mobile Burger in weißem Header */
@media (max-width: 768px){
  .template-white-header .menu-toggle{
    border-color: rgba(0,0,0,.35);
  }
  .template-white-header .menu-toggle__icon,
  .template-white-header .menu-toggle__icon::before,
  .template-white-header .menu-toggle__icon::after{
    background:#000;
  }
}

/* Logo-Swap: auf weißem Header immer schwarzes Logo */
.template-white-header .logo--light{ opacity: 0 !important; }
.template-white-header .logo--dark{ opacity: 1 !important; }

/* Blog Posts: Header immer weiß */
.single-post.category-blog .site-header{
  background:#fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* Header Texte schwarz */
.single-post.category-blog .primary-menu a,
.single-post.category-blog .lang-switcher__button{
  color:#000;
}

/* Pfeile schwarz */
.single-post.category-blog .primary-menu > li.menu-item-has-children > a::after,
.single-post.category-blog .lang-switcher__arrow{
  filter:none;
}

/* Dropdowns im weißen Header: auch weiß (nicht schwarz!) */
.single-post.category-blog .primary-menu .sub-menu,
.single-post.category-blog .lang-switcher__list{
  background:#fff;
  border: 1px solid rgba(0,0,0,.10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.single-post.category-blog .primary-menu .sub-menu a,
.single-post.category-blog .lang-switcher__list a{
  color:#000;
}

/* Logo-Swap: im weißen Header schwarzes Logo anzeigen */
.single-post.category-blog .logo--light{ opacity: 0 !important; }
.single-post.category-blog .logo--dark{ opacity: 1 !important; }


@media (max-width: 768px){

  /* Drawer muss wirklich den Screen füllen */
  .mobile-drawer{
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-height);
    bottom: 0;
    z-index: 9998;
  }

  /* Inhalt darf nicht "flach" bleiben */
  .mobile-drawer__inner{
    background: #fff;
    min-height: calc(100vh - var(--header-height));
    overflow: auto;
    padding: 18px 0;
  }

  /* Mobile Menü immer vertikal sichtbar */
  .mobile-menu{
    display: flex !important;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-menu a{
    display: block;
    padding: 16px 20px;
    color: #000 !important;
    border-bottom: 1px solid rgba(0,0,0,.12);
  }

  .mobile-drawer__footer{
    padding: 16px 20px;
  }
}

@media (max-width: 768px){
  .mobile-lang{ display:none !important; }
}

@media (max-width: 768px){
  .mobile-drawer{
    top: var(--header-height);
  }

  /* wenn Header schrumpft */
  .site-header.is-scrolled ~ .site-content .mobile-drawer{
    top: var(--header-height-scrolled);
  }

  /* passende Mindesthöhe aktualisieren */
  .mobile-drawer__inner{
    min-height: calc(100vh - var(--header-height));
  }
  .site-header.is-scrolled ~ .site-content .mobile-drawer .mobile-drawer__inner{
    min-height: calc(100vh - var(--header-height-scrolled));
  }
}

@media (max-width: 768px){

  /* Logo Link/Wrapper sauber */
  .site-header__brand,
  .custom-logo-link,
  .logo-swap{
    height: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Custom Logo */
  .custom-logo{
    height: auto !important;     /* keine Verzerrung */
    width: min(220px, 60vw);     /* etwas breiter */
    max-height: 70%;             /* begrenzt innerhalb Header */
  }

  /* Logo Swap Bilder (wenn du 2 Logos nutzt) */
  .logo-swap__img{
    height: auto !important;
    width: min(220px, 60vw);
    max-height: 70%;
  }
}