/* =========================================================
   LOOTR
   Datei: /public/css/header.css
   Zweck:
   - Slim Header-Bar bleibt klein
   - Logo liegt als Overlay (beeinflusst Header-Höhe NICHT)
   - Logo ragt nach unten in den Content hinein
   - Mobile: Logo etwas tiefer + minimal größer
========================================================= */

.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  background: linear-gradient(
    180deg,
    rgba(7,8,12,0.86),
    rgba(7,8,12,0.52)
  );

  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.site-header__inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 64px;
  padding: 10px 0;

  overflow: visible;
}

.header-slot{
  display: none;
}

.brand--center{
  position: absolute;
  left: 50%;

  /* Mobile: etwas tiefer */
  top: -50px;

  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  z-index: 1000;
  pointer-events: auto;
}

.brand__logo{
  /* Mobile: minimal größer */
  width: 175px;
  height: 175px;
  object-fit: contain;
  display: block;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  transform: translateY(8px);

  filter:
    drop-shadow(0 28px 60px rgba(0,0,0,0.78))
    drop-shadow(0 0 46px rgba(255,106,0,0.22))
    drop-shadow(0 0 22px rgba(255,176,0,0.10));

  transition: transform .14s ease, filter .14s ease;
}

.brand--center:hover .brand__logo{
  transform: translateY(4px);
  filter:
    drop-shadow(0 36px 86px rgba(0,0,0,0.86))
    drop-shadow(0 0 58px rgba(255,106,0,0.26))
    drop-shadow(0 0 26px rgba(255,176,0,0.12));
}

/* Very small phones */
@media (max-width: 380px){
  .site-header__inner{
    min-height: 58px;
    padding: 8px 0;
  }

  .brand--center{
    /* noch etwas tiefer auf sehr kleinen Geräten */
    top: -44px;
  }

  .brand__logo{
    width: 160px;
    height: 160px;
    transform: translateY(6px);
  }

  .brand--center:hover .brand__logo{
    transform: translateY(2px);
  }
}

/* Tablet */
@media (min-width: 620px){
  .site-header__inner{
    min-height: 62px;
    padding: 10px 0;
  }

  .brand--center{
    /* bleibt wie vorher */
    top: -80px;
  }

  .brand__logo{
    width: 210px;
    height: 210px;
    transform: translateY(10px);
  }

  .brand--center:hover .brand__logo{
    transform: translateY(6px);
  }
}

/* Desktop */
@media (min-width: 980px){
  .site-header__inner{
    min-height: 64px;
    padding: 10px 0;
  }

  .brand--center{
    top: -90px;
  }

  .brand__logo{
    width: 320px;
    height: 320px;

    transform: translateY(12px);

    filter:
      drop-shadow(0 60px 150px rgba(0,0,0,0.88))
      drop-shadow(0 0 76px rgba(255,106,0,0.24))
      drop-shadow(0 0 32px rgba(255,176,0,0.12));
  }

  .brand--center:hover .brand__logo{
    transform: translateY(8px);
  }
}

/* Ultra wide */
@media (min-width: 1320px){
  .brand--center{
    top: -105px;
  }

  .brand__logo{
    width: 360px;
    height: 360px;
    transform: translateY(14px);
  }

  .brand--center:hover .brand__logo{
    transform: translateY(10px);
  }
}