/* ============================================
   Site Header
   Loaded with the header template part.
   ============================================ */
/* z-index-Stufen im Theme:
 *    2, 3, 10   Block-Interna (Bilder, Badges)
 *    100        Sticky-Filterleisten (blocks/usecases-grid, blocks/kimag-grid)
 *    200        dieser Header — MUSS ueber 100 liegen
 *    999        #zebra-top (Back-to-top)
 *
 * Der Header stand auf 50 und lag damit UNTER den Sticky-Filterleisten.
 * Beim Oeffnen des Burger-Panels auf /usecases/ und /kimag/ klappte das Panel
 * nach unten und wurde von der Leiste um deren volle Hoehe (95px) verdeckt —
 * das Menue war da, aber unsichtbar und teilweise nicht klickbar.
 *
 * Beim normalen Scrollen aendert das nichts: view.js setzt das top der Leiste
 * per ResizeObserver auf die Unterkante des Headers, sie ueberlappen dort also
 * gar nicht.
 *
 * Die 60 des Suchpanels bleibt gueltig — .site-header bildet einen eigenen
 * Stacking-Context, die Kinder-Werte sind relativ dazu. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:var(--c-black);color:var(--c-white);
  display:block;
  transition:box-shadow .3s ease;
}
.site-header .header-top{
  height:84px;display:flex;align-items:center;
  transition:height .3s ease;
}
.site-header .header-top .container{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--md);
}
.site-header .header-nav{
  border-top:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  max-height:54px;
  transition:max-height .3s ease, opacity .3s ease, border-color .3s ease;
  opacity:1;
}
.site-header .header-nav .container{
  height:54px;display:flex;align-items:center;justify-content:flex-start;gap:var(--lg);
}
/* Shrink: Logo-Bild */
.brand-logo{
  transition:width .3s ease, height .3s ease;
}

/* ---- Scrolled state ----------------------- */
.site-header.is-scrolled .header-top{height:54px}
.site-header.is-scrolled .header-nav{
  max-height:0;
  opacity:0;
  border-color:transparent;
}
.site-header.is-scrolled .brand-logo{width:24px;height:24px}
.site-header.is-scrolled .brand{font-size:22px}
.site-header.is-scrolled .brand-city{display:none}
.site-header.is-scrolled{box-shadow:0 2px 16px rgba(0,0,0,.4)}
/* Burger auf Desktop einblenden wenn Nav weggeklappt */
.site-header.is-scrolled .menu-btn{display:grid}
/* Nav-Overlay wenn Burger geklickt */
.site-header.is-scrolled.nav-open .header-nav{
  max-height:54px;
  opacity:1;
  border-color:rgba(255,255,255,.12);
}
/* Burger X-State wenn offen */
.site-header.nav-open .menu-btn span{background:transparent}
.site-header.nav-open .menu-btn span:before{transform:translateY(8px) rotate(45deg)}
.site-header.nav-open .menu-btn span:after{transform:translateY(-8px) rotate(-45deg)}
.nav-main{
  display:flex;gap:var(--lg);
  font-family:var(--ff-body);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;
}
.nav-main a{
  position:relative;padding:8px 0;color:#fff;
  transition:color .25s ease;
}
.nav-main a:after{content:"";position:absolute;left:0;right:24px;bottom:-1px;height:2px;background:var(--c-primary);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-main a:hover:after,.nav-main a.is-current:after{transform:scaleX(1)}
.nav-main a.is-current{color:var(--c-primary)}
.brand{
  display:inline-flex;align-items:center;gap:var(--sm);
  font-family:var(--ff-display);font-size:30px;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  white-space:nowrap;
}
.brand .dot{
  width:6px;height:6px;background:var(--c-primary);display:inline-block;margin:0 8px;
}
.brand small{
  font-family:var(--ff-body);font-size:11px;letter-spacing:.22em;font-weight:600;color:#bdbdbd;
  margin-left:10px;text-transform:uppercase;
}
.nav-tools{display:flex;align-items:center;gap:var(--lg);font-weight:500;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.nav-tools .kontakt{display:inline-flex;align-items:center;gap:8px;padding:6px 0;color:#fff;border-bottom:2px solid transparent;transition:border-color .25s ease,color .25s ease}
.nav-tools .kontakt:hover{color:var(--c-primary);border-color:var(--c-primary)}
.nav-tools .kontakt svg{width:14px;height:14px}
.nav-tools .lang{display:flex;align-items:center;gap:6px;cursor:pointer}
.nav-tools .lang:after{content:"";width:0;height:0;border:5px solid transparent;border-top-color:var(--c-primary);transform:translateY(2px)}
.nav-tools .search{display:flex;align-items:center;gap:10px;cursor:pointer}
.nav-tools .search svg{width:18px;height:18px}
.menu-btn{display:none;background:transparent;border:0;cursor:pointer;color:#fff;width:44px;height:44px;place-items:center}
.menu-btn span{display:block;width:26px;height:2px;background:#fff;position:relative;transition:background .2s ease}
.menu-btn span:before,.menu-btn span:after{content:"";position:absolute;left:0;width:26px;height:2px;background:#fff;transition:transform .2s ease}
.menu-btn span:before{top:-8px}
.menu-btn span:after{top:8px}

/* Desktop: der Mobil-Zusatzblock im Nav-Panel bleibt aus */
.nav-mobile-extra{display:none}

/* Responsive — Mobile (≤900px) */
@media (max-width: 900px){
  /* Einzige Quelle der Wahrheit fuer den Breakpoint. header-shrink.js liest
     diese Custom Property aus, statt matchMedia mit einer zweiten,
     unabhaengig pflegbaren 900px-Angabe zu benutzen. */
  .site-header{--nav-mode:panel}

  .menu-btn{display:grid}

  /* Burger klebte zu dicht am rechten Viewport-Rand. Der 44px-Button hat
     innen 9px Luft um das 26px-Icon, sichtbar blieben also nur ~29px.
     Zusaetzliche 10px rechts am Header-Container schieben die ganze
     Werkzeugleiste (Lupe + Burger) ein Stueck nach innen. */
  .site-header .header-top .container{padding-right:calc(var(--gutter) + 10px)}

  /* ---------------------------------------------------------------
   * Mobile Navigation als vertikales Panel.
   *
   * Die Desktop-Mechanik (max-height + overflow:hidden, gesteuert von
   * .is-scrolled) wird hier bewusst komplett ausgeschaltet: das Panel
   * hat variable Hoehe, dafuer ist max-height das falsche Werkzeug.
   * Sichtbarkeit laeuft ueber display, geschaltet von .nav-open.
   *
   * Die drei .is-scrolled-Regeln brauchen dieselbe Spezifitaet wie ihre
   * Desktop-Gegenstuecke (0-3-0) und muessen HIER stehen, damit sie in
   * der Kaskade spaeter kommen und gewinnen.
   * --------------------------------------------------------------- */
  .site-header .header-nav{
    display:none;
    max-height:none;
    overflow:visible;
    opacity:1;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .site-header.is-scrolled .header-nav{
    max-height:none;
    opacity:1;
    border-color:rgba(255,255,255,.12);
  }
  /* Im OFFENEN Zustand ist max-height dagegen richtig: das Panel darf nicht
     hoeher werden als der Bildschirm, sonst sind die letzten Punkte
     unerreichbar. Deshalb hier Deckel plus eigenes Scrollen. */
  .site-header.nav-open .header-nav{
    display:block;
    max-height:calc(100vh - 84px);
    max-height:calc(100dvh - 84px);
    overflow-y:auto;
  }
  .site-header.is-scrolled.nav-open .header-nav{
    display:block;
    max-height:calc(100vh - 54px);
    max-height:calc(100dvh - 54px);
    overflow-y:auto;
    opacity:1;
  }

  .site-header .header-nav .container{
    height:auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding-top:4px;
    padding-bottom:14px;
  }

  /* Menuepunkte untereinander statt in einer 54px-Zeile */
  .nav-main{
    flex-direction:column;
    gap:0;
    font-size:15px;
    letter-spacing:.14em;
  }
  .nav-main a{
    padding:15px 2px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  /* Der Hover-Unterstrich der Desktop-Leiste passt in der Liste nicht */
  .nav-main a:after{display:none}
  .nav-main a.is-current{color:var(--c-primary)}

  /* Kontaktlink im Panel — auf Mobil sonst unerreichbar */
  .nav-mobile-extra{display:block;padding-top:14px}
  .nav-mobile-contact{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--ff-body);font-weight:700;font-size:12px;
    letter-spacing:.18em;text-transform:uppercase;
    padding:11px 16px;
    color:#000;background:var(--c-primary);
  }

  /* Kontakt und Sprache wandern ins Panel, die Suche ebenfalls (per JS,
     siehe placeSearch() in header-shrink.js). In .nav-tools bleibt damit nur
     der Burger — das entlastet die Kopfzeile auf schmalen Displays. */
  .nav-tools .kontakt,
  .nav-tools .lang,
  .nav-tools .search{display:none}

  /* --- Suche im Burger-Panel ------------------------------------------
   * Kein Umschalter, das Feld steht direkt da. Die absolute Positionierung
   * des Desktop-Panels wird hier komplett zurueckgenommen. */
  .header-nav .search{
    display:block;
    position:static;
    width:100%;
    order:2;
  }
  .header-nav .search-toggle{display:none}
  .header-nav .search-panel{
    position:static;
    width:100%;
    margin-top:14px;
    border:0;
    box-shadow:none;
    background:transparent;
  }
  .header-nav .search-panel__input{
    border:1.5px solid rgba(255,255,255,.28);
    background:#111;
    color:#fff;
  }
  .header-nav .search-panel__input::placeholder{color:#8a8a8a}
  /* Vorschlagsliste als heller Kasten unter dem Feld */
  .header-nav .search-ac{
    background:#fff;
    margin-top:8px;
    max-height:min(320px,44vh);
  }

  /* Brand-Name in 3 Zeilen */
  .brand-name{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:1.15;
    font-size:22px;
  }
  .brand-name .dot{
    width:6px;height:6px;
    margin:2px 0;
  }
  .brand-city{display:none}
}

/* =====================================================================
 * Live-Suche im Header (zebra/header + assets/js/search-live.js)
 * ===================================================================== */
.nav-tools .search{position:relative}
.search-toggle{display:flex;align-items:center;gap:10px;background:transparent;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;letter-spacing:inherit}
.search-toggle svg{width:18px;height:18px}
.search-panel{text-transform:none;letter-spacing:normal;position:absolute;top:calc(100% + 14px);right:0;width:min(420px,80vw);background:#fff;border:1.5px solid #111;box-shadow:0 18px 40px rgba(0,0,0,.22);z-index:60}
.search-panel__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.search-panel__input{width:100%;box-sizing:border-box;font-family:var(--ff-body);font-size:15px;padding:14px 16px;border:0;border-bottom:1.5px solid #eee;background:#fff;color:#111}
.search-panel__input:focus-visible{outline:2px solid var(--c-primary);outline-offset:-2px}

.search-ac{list-style:none;margin:0;padding:6px 0;max-height:min(420px,60vh);overflow-y:auto}
.search-ac__group{font-family:var(--ff-body);font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#888;padding:10px 16px 4px}
.search-ac__item{text-transform:none;letter-spacing:normal;font-size:14px;line-height:1.4;padding:9px 16px;cursor:pointer;color:#111}
.search-ac__item:hover,.search-ac__item.is-active{background:var(--c-primary);color:#000}
.search-ac__all{font-family:var(--ff-body);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-top:1.5px solid #eee;margin-top:6px;padding-top:12px}
.search-ac__empty{font-size:14px;color:#666;padding:12px 16px}