/* /public/css/header.css */
/* Stunde13 – Header Styling (clean, low-profile, Logo ragt in den Player) */

:root{
  --hdr-max: 1240px;
  --hdr-pad: clamp(16px, 2.6vw, 30px);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left: 12px;
  top: 12px;
  width:auto;
  height:auto;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.78);
  color: rgba(255,255,255,.92);
  z-index: 9999;
}

/* Clean header – no frame, low height */
.site-header{
  position: sticky;
  top: 0;
  z-index: 80;

  padding: 0 var(--hdr-pad);
  pointer-events: none;

  /* subtle top fade for readability (no “box/frame”) */
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Inner layout: minimal height, centered */
.header-inner{
  pointer-events: auto;
  max-width: var(--hdr-max);
  margin: 0 auto;

  height: 84px;              /* low-profile header */
  display:flex;
  align-items: center;
  justify-content: center;

  position: relative;
  overflow: visible;         /* allow logo to spill into hero/video */
}

/* Brand link */
.brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position: relative;
  text-decoration: none;
}

/* Logo: large + spills downward into the player */
.brand-logo{
  width: clamp(300px, 22vw, 440px);
  min-width: 350px;
  height: auto;
  display:block;

  /* This makes it overlap the hero video */
  transform: translateY(56px);

  filter:
    drop-shadow(0 24px 55px rgba(0,0,0,.78))
    drop-shadow(0 12px 40px rgba(140,90,255,.18));
  transition: transform .22s ease, filter .22s ease;
}

.brand:hover .brand-logo{
  transform: translateY(54px) scale(1.01);
  filter:
    drop-shadow(0 28px 65px rgba(0,0,0,.82))
    drop-shadow(0 14px 46px rgba(140,90,255,.22));
}

/* faint halo behind logo for contrast, still clean */
.brand:before{
  content:"";
  position:absolute;
  width: 72%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(140,90,255,.16), transparent 70%),
    radial-gradient(closest-side, rgba(70,210,255,.09), transparent 72%);
  opacity: .85;
  z-index: -1;
  pointer-events:none;
}

/* Give the page a tiny pull-up so the overlap feels intentional */
.page-index .site-main{
  margin-top: -18px;
}

/* Responsive */
@media (max-width: 980px){
  .header-inner{ height: 74px; }

  .brand-logo{
    min-width: 300px;
    transform: translateY(46px);
  }
  .page-index .site-main{ margin-top: -14px; }
}

@media (max-width: 640px){
  .site-header{ padding: 0 12px; }
  .header-inner{ height: 66px; }

  .brand-logo{
    width: min(88vw, 360px);
    min-width: 0;
    transform: translateY(34px);
  }
  .page-index .site-main{ margin-top: -10px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .brand-logo{ transition:none; }
}