/* =============================================================
   01 – HEADER / NAVIGATION
   • Logo groß & mittig, flankiert von den Menüpunkten
   • Header transparent; Glas-Hintergrund mit organischer, mittiger
     Ausbuchtung nach unten erscheint erst beim Scrollen oder bei Hover
   • Logo: Glanz-Sweep bei Hover (über die Logo-Silhouette)
   ============================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  /* Kein eigener Hintergrund – die beiden Ebenen unten liefern ihn on demand */
}

/* -------- Hintergrund (liegt HINTER dem Inhalt) --------
   EINE Glas-Ebene: gerade Leiste + organische Ausbuchtung mittig, geformt
   per Masken-Union (Rechteck ∪ weiche SVG-Kurve). Dadurch nahtloser,
   fließender Übergang – kein separates Element, keine sichtbare Kante.
   Die SVG-Kurve läuft an ihren Rändern waagerecht (tangential) in die
   Leisten-Unterkante aus und beult in der Mitte sanft nach unten aus. */
.site-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--header-h) + 34px);        /* Platz für die Ausbuchtung */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  filter: drop-shadow(0 6px 14px rgba(22, 35, 58, 0.10));  /* Schatten folgt der Kurve */
  -webkit-mask:
    linear-gradient(#000, #000) 0 0 / 100% var(--header-h) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 34'%3E%3Cpath d='M0,0 C40,0 60,34 96,34 L184,34 C220,34 240,0 280,0 Z' fill='%23000'/%3E%3C/svg%3E") center var(--header-h) / 280px 34px no-repeat;
          mask:
    linear-gradient(#000, #000) 0 0 / 100% var(--header-h) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 34'%3E%3Cpath d='M0,0 C40,0 60,34 96,34 L184,34 C220,34 240,0 280,0 Z' fill='%23000'/%3E%3C/svg%3E") center var(--header-h) / 280px 34px no-repeat;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

/* Sichtbar: beim Scrollen, bei Hover, oder wenn das Mobil-Menü offen ist */
.site-header.is-scrolled::before,
.site-header:hover::before,
.site-header:has(.header__nav.is-open)::before {
  opacity: 1;
}

/* Kontur der Unterkante – IMMER sichtbar (auch ohne Hover/Scroll).
   Folgt exakt der Form: flache Linie links/rechts + Bogen der Ausbuchtung.
   Die FORM liefert die Maske (drei Schichten: linke Linie, rechte Linie,
   Bogen-SVG mittig); die FARBE ist eine simple background-color → kann
   weich zwischen Weiß (Normalzustand) und Gelb (Scroll/Hover) überblenden. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--header-h);
  height: 35px;
  z-index: 0;
  pointer-events: none;
  background: #fff;                            /* Kontur-Farbe im Normalzustand */
  transition: background-color 0.35s var(--ease);
  -webkit-mask:
    linear-gradient(to right, transparent, #fff 35%) left  top / calc(50% - 139px) 1px no-repeat,
    linear-gradient(to right, #fff 65%, transparent) right top / calc(50% - 139px) 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 35'%3E%3Cpath d='M0,0.5 C40,0.5 60,34.5 96,34.5 L184,34.5 C220,34.5 240,0.5 280,0.5' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E") center top / 280px 35px no-repeat;
          mask:
    linear-gradient(to right, transparent, #fff 35%) left  top / calc(50% - 139px) 1px no-repeat,
    linear-gradient(to right, #fff 65%, transparent) right top / calc(50% - 139px) 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 35'%3E%3Cpath d='M0,0.5 C40,0.5 60,34.5 96,34.5 L184,34.5 C220,34.5 240,0.5 280,0.5' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E") center top / 280px 35px no-repeat;
}

/* Sobald der Glas-Hintergrund sichtbar ist → Kontur in Gelb */
.site-header.is-scrolled::after,
.site-header:hover::after,
.site-header:has(.header__nav.is-open)::after {
  background: var(--c-yellow);
}

.header__inner {
  position: relative;   /* Inhalt über die Hintergrund-Ebenen heben */
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  gap: clamp(1rem, 3vw, 2.4rem);
}

/* -------- Logo (weiß im transparenten Zustand, farbig auf Glas-Hintergrund) -------- */
.brand {
  order: 2;
  flex: 0 0 auto;
  position: relative;
  display: inline-grid;          /* beide Logos im selben Raster-Feld gestapelt */
  place-items: center;
  isolation: isolate;
  transform: translateY(6px);    /* leicht in die Ausbuchtung eintauchen */
  margin-inline: clamp(2rem, 5vw, 4.5rem);   /* mehr Luft zu den Menüpunkten links & rechts */
}
.brand__logo {
  grid-area: 1 / 1;              /* übereinander → kein Layout-Sprung beim Wechsel */
  height: clamp(58px, 6.4vw, 92px);
  width: auto;
  filter: drop-shadow(0 6px 14px rgba(22, 35, 58, 0.18));
  transition: opacity 0.35s var(--ease), transform 0.4s var(--ease);
}
/* Farbiges Original zunächst versteckt; erscheint mit dem Glas-Hintergrund
   (Scroll / Hover / offenes Mobil-Menü) – dort passt der Kontrast. */
.brand__logo--dark { opacity: 0; }
.site-header.is-scrolled .brand__logo--dark,
.site-header:hover .brand__logo--dark,
.site-header:has(.header__nav.is-open) .brand__logo--dark { opacity: 1; }
.site-header.is-scrolled .brand__logo--light,
.site-header:hover .brand__logo--light,
.site-header:has(.header__nav.is-open) .brand__logo--light { opacity: 0; }

.brand:hover .brand__logo { transform: scale(1.02); }

/* Glanz-Sweep: über die Logo-Silhouette (per Maske) laufendes Licht */
.brand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
              transparent 42%, rgba(255, 255, 255, 0.9) 50%, transparent 58%);
  background-size: 220% 100%;
  background-position: 130% 0;
  -webkit-mask: url("../assets/images/Dachmarke_2026_07_06.png") center / contain no-repeat;
          mask: url("../assets/images/Dachmarke_2026_07_06.png") center / contain no-repeat;
  opacity: 0;
}
.brand:hover::after { animation: logo-shine 1s var(--ease) forwards; }
@keyframes logo-shine {
  0%   { background-position: 130% 0; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { background-position: -30% 0; opacity: 0; }
}

/* -------- Navigation -------- */
/* Nav-Wrapper: auf Desktop unsichtbar (Kinder werden Flex-Items) */
.header__nav { display: contents; }

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.2rem); }
.nav--primary { order: 1; flex: 1; justify-content: flex-end; }    /* Items ans rechte Ende → nah ans Logo */
.nav--secondary { order: 3; flex: 1; justify-content: flex-start; } /* Items ans linke Ende → nah ans Logo */

.nav a:not(.btn) {
  font-family: var(--font-sans);          /* DIN */
  font-weight: 600;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #fff;                            /* Standard: transparenter Header über dem Hero */
  position: relative;
  padding-block: 0.5rem;
  transition: color 0.25s;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2.5px; background: var(--c-yellow);
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
}
/* Sobald der Header-Hintergrund sichtbar ist → dunkle Schrift */
.site-header.is-scrolled .nav a:not(.btn),
.site-header:hover .nav a:not(.btn) { color: var(--c-ink); }
.nav a:not(.btn):hover { color: var(--c-blue); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }

.nav__social { display: inline-flex; align-items: center; gap: 0.8rem; margin-left: 0.5rem; }
.nav__social a { color: #fff; display: inline-grid; place-items: center; transition: color 0.2s, transform 0.2s; }
.nav__social a::after { display: none; }
.site-header.is-scrolled .nav__social a,
.site-header:hover .nav__social a { color: var(--c-blue); }
.nav__social a:hover { color: var(--c-sky); transform: translateY(-2px); }

/* -------- Burger -------- */
.nav-toggle {
  order: 4; display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px; border-radius: 8px;
}
.nav-toggle span { width: 26px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s, background 0.25s; }
.site-header.is-scrolled .nav-toggle span,
.site-header:has(.header__nav.is-open) .nav-toggle span { background: var(--c-blue); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* -------- Mobil: Logo links, Burger rechts, Menü als Overlay -------- */
@media (max-width: 900px) {
  /* Keine Ausbuchtung auf Mobil: glatte, volle Leiste ohne Maske */
  .site-header::before {
    height: var(--header-h);
    -webkit-mask: none;
            mask: none;
  }
  /* Kontur auf Mobil: durchgehende gerade Linie ohne Bogen (Maske aufheben);
     Farbe (weiß / gelb bei Scroll) kommt aus den Regeln oben */
  .site-header::after {
    height: 2px;
    -webkit-mask: none;
            mask: none;
  }
  .header__inner { justify-content: space-between; }
  .brand { order: 1; transform: none; margin-inline: 0; }
  .brand__logo { height: clamp(46px, 12vw, 58px); }
  .nav-toggle { display: flex; order: 2; }

  .header__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    padding: 1rem var(--gutter) 1.6rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%);
    transition: transform 0.4s var(--ease);
  }
  .header__nav.is-open { transform: translateY(0); }

  .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a:not(.btn) {
    color: var(--c-ink);            /* im Overlay immer dunkel */
    font-size: 0.95rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--c-line);
  }
  .nav a:not(.btn)::after { display: none; }
  .nav__social { margin: 1rem 0 0; gap: 1.2rem; }
  .nav__social a { color: var(--c-blue); }
}