/* =========================================================
   unlockID
   Datei: /public/css/header.css
   Zweck:
   - Clean Dark Header
   - Logo mittig als Overlay (ragt nach unten in den Content)
   - Desktop Logo: 500px
   - Mobile Logo: 300px
========================================================= */

:root{
  --u-bg: #000;
  --u-cyan: #16e0ff;
  --u-cyan-soft: rgba(22, 224, 255, 0.18);
  --u-line: rgba(255,255,255,0.06);
}

.site-header{
  position: relative;
  width: 100%;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* schlanker Header */
  border-bottom: 1px solid var(--u-line);
}

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

  /* Header-Höhe bleibt schlank */
  height: 86px;
  padding: 0 16px;

  overflow: visible;
}

/* Brand wrapper */
.brand{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -35%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  line-height: 0;

  /* Logo darf über Header hinaus */
  pointer-events: auto;
}

/* Logo */
.brand__logo{
  width: 500px;
  height: auto;
  display: block;

  /* clean aber premium glow */
  filter: drop-shadow(0 0 18px var(--u-cyan-soft));
}

/* Mobile */
@media (max-width: 640px){
  .site-header__inner{
    height: 74px;
    padding: 0 14px;
  }

  .brand{
    transform: translate(-50%, -30%);
  }

  .brand__logo{
    width: 300px;
  }
}