/* =================================================================
   STYLE_HEADER.CSS
   Einbinden NACH style.css und userspezifisch_style.css
================================================================= */

:root {
  --itegon-rechts-width:  40%;
  --itegon-header-height: 100px;
  --itegon-navbar-height: 42px;
}

/* =================================================================
   HEADER-CONTAINER
================================================================= */

.itegon-header {
  width: 100%;
  background: #fff;
  font-family: kundenschrift, Arial, sans-serif;
  border-bottom: none;
}

/* =================================================================
   ZEILE 1: HAUPTBEREICH
   Logo (weiß) | Mitte (weiß, leer) | Akzentblock (Kundenfarbe)
================================================================= */

.itegon-header__main {
  display: flex;
  align-items: stretch;
  height: var(--itegon-header-height);
}

/* -----------------------------------------------------------------
   LOGO-SPALTE — weißer Hintergrund, kein Kasten
----------------------------------------------------------------- */

.itegon-header__logo {
  width: 280px;
  flex-shrink: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  position: relative;
  z-index: 4;
}

/* Abschrägung rechts — weiß auf Kundenfarbe */
.itegon-header__logo::after {
  content: '';
  position: absolute;
  right: -36px; top: 0; bottom: 0;
  width: 72px;
  background: #ffffff;
  clip-path: polygon(0 0, 50% 0, 0% 100%, 0 100%);
  z-index: 3;
}

.itegon-header__logo-kasten {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 5;
}

.itegon-header__logo-kasten img#logo {
  max-width: 248px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  float: none !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* -----------------------------------------------------------------
   MITTELTEIL — leer, einfach weiß
----------------------------------------------------------------- */

.itegon-header__mitte {
  flex: 1;
  background: #ffffff;
}

/* -----------------------------------------------------------------
   RECHTE SPALTE — Kundenfarbe, mit Abschrägung
----------------------------------------------------------------- */

.itegon-header__rechts {
  width: var(--itegon-rechts-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.itegon-header__akzent {
  flex: 1;
  background: var(--kundenfarbe);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px 0 56px;
  position: relative;
}

/* Abschrägung links */
.itegon-header__akzent::before {
  content: '';
  position: absolute;
  left: -36px; top: 0; bottom: 0;
  width: 72px;
  background: var(--kundenfarbe);
  clip-path: polygon(100% 0, 100% 100%, 50% 100%, 0 0);
  z-index: 1;
}

.itegon-header__akzent-text {
  text-align: right;
  position: relative;
  z-index: 7;
  width: 100%;
}

/* "itegon" Label + Hexagon  */
.itegon-header__akzent-label {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 6px;
  white-space: nowrap;
}

.itegon-header__akzent-label svg { flex-shrink: 0; }

/* Kundentext — groß und auffällig */
.itegon-header__akzent-untertitel {
  font-family: kundenschrift, Arial, sans-serif;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
  display: block;
  white-space: nowrap;
  font-size: 22px; /* JS überschreibt bei langen Texten */
}

/* =================================================================
   ZEILE 2: MENÜ + BUTTONS
   Verlauf weiß→grau, Menü links, Buttons rechts
================================================================= */

.itegon-header__navbar-wrap {
  display: flex;
  align-items: stretch;
  background: linear-gradient(to bottom, #ffffff, #e2e3e8);
  border-top: none;
  border-bottom: 3px solid #c5c8cc;
  min-height: var(--itegon-navbar-height);
  position: relative;
  z-index: 2;
}

/* Menü nimmt den linken Bereich */
.itegon-header__navbar {
  flex: 1;
  min-width: 0;
  background: transparent;
  display: flex;
  align-items: stretch;
}

.itegon-header__navbar > nav     { flex: 1; background: transparent; margin-top: 0 !important; }
.itegon-header__navbar .nav      { margin-top: 0 !important; padding: 0 !important; }
.itegon-header__navbar .menu-bar { margin-top: 0 !important; min-width: 0 !important; }
.itegon-header__navbar .mobile-menu-trigger { margin-top: 0; margin-bottom: 0; align-self: center; }

/* Menüeinträge */
.itegon-header__navbar .menu-bar > li > a.menu-link {
  background: transparent !important;
  color: var(--menue-schriftfarbe) !important;
  font-weight: 500;
  border-bottom: none !important;
  border-bottom-style: none !important;
  padding-top: 10px;
  padding-bottom: 8px;
}

.itegon-header__navbar .menu-bar > li > a.menu-link:hover,
.itegon-header__navbar .menu-bar > li:hover > a.menu-link,
.itegon-header__navbar .menu-bar > li:focus-within > a.menu-link {
  background: var(--kundenfarbe-bg-hover) !important;
  color: var(--kundenfarbe-text-hover) !important;
  border-radius: 4px 4px 0 0 !important;
}

/* Gepunktete Linie aus style_horizontales_menue.css entfernen */

.itegon-header__navbar .menu-link[aria-haspopup="true"] {
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
}

.itegon-header__navbar .mega-menu {
  background: #ffffff;
  border-top: 2px solid var(--kundenfarbe);
}



/* =================================================================
   RESPONSIVE
================================================================= */

@media all and (max-width: 1100px) {
  :root { --itegon-rechts-width: 38%; }
}

@media all and (max-width: 850px) {
  :root { --itegon-rechts-width: 35%; --itegon-header-height: 80px; }
  .itegon-header__logo { width: 200px; }
  .itegon-header__logo-kasten img#logo { max-width: 168px; max-height: 64px; }
  .itegon-header__logo::after { right: -28px; width: 56px; }
  .itegon-header__akzent::before { left: -28px; width: 56px; }
}

@media all and (max-width: 550px) {
  .itegon-header__main { flex-wrap: wrap; height: auto; }
  .itegon-header__logo { width: 100%; height: 60px; justify-content: flex-start; padding-left: 16px; }
  .itegon-header__logo::after { display: none; }
  .itegon-header__mitte { display: none; }
  .itegon-header__rechts { width: 100%; }
  .itegon-header__akzent { padding: 10px 16px; }
  .itegon-header__akzent::before { display: none; }
  .itegon-header__navbar-wrap { flex-wrap: wrap; }
  .itegon-header__navbar-buttons { border-left: none; border-top: 1px solid #d1d2e0; width: 100%; justify-content: flex-end; padding: 4px 14px; }
}

/* itegon-Label als Link — globales a-Styling überschreiben */
.itegon-header__akzent-label,
.itegon-header__akzent-label:visited,
.itegon-header__akzent-label:hover,
.itegon-header__akzent-label:focus {
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.65) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 0 !important;
}