/* =========================================================
   riko-keil.de – nav.css (nur Navigation)
   - Mobile: Hauptmenü per checkbox, Submenu inline per JS (hidden + aria-expanded)
   - Desktop: Submenu als Dropdown
   - :has bleibt: Burger -> X
   ========================================================= */

/* ========== Header / Nav Layering ========== */
header{
  position: sticky;
  top: 0;
  z-index: 10000;
  isolation: isolate;              /* eigener Stacking-Context */
  background: rgba(7,8,12,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  max-width:var(--max);
  margin:0 auto;
  padding:10px 12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.logo{ width:42px; height:42px; flex-shrink:0; }
.logo svg{ width:100%; height:100%; display:block; }

/* optional: falls Brand-Title Animation per JS kommt */
.brand-title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:1.05rem;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:inline-flex;
  gap:.02em;
}

/* ========== Nav wrapper ========== */
nav{
  max-width:var(--max);
  margin:0 auto;
  position: relative;
  z-index: 10001;
}

/* Hidden checkbox */
.nav-toggle{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
  opacity:0;
  pointer-events:none;
}

/* Burger button */
.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn:hover{ background: rgba(255,255,255,.07); }

.nav-btn span{
  display:inline-block;
  width:18px;
  height:2px;
  background: rgba(233,237,245,.85);
  border-radius:2px;
  position:relative;
}
.nav-btn span::before,
.nav-btn span::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background: rgba(233,237,245,.85);
  border-radius:2px;
  transition: transform .22s ease, top .22s ease, opacity .18s ease, background .18s ease;
}
.nav-btn span::before{ top:-6px; }
.nav-btn span::after{ top: 6px; }

/* Burger -> X via :has (wie du willst) */
header:has(#nav-toggle:checked) .nav-btn span{ background:transparent; }
header:has(#nav-toggle:checked) .nav-btn span::before{ top:0; transform: rotate(45deg); }
header:has(#nav-toggle:checked) .nav-btn span::after{ top:0; transform: rotate(-45deg); }

/* ========== Main menu container (mobile collapse) ========== */
menu{
  display:block;
  list-style:none;
  padding:0;
  margin:0;

  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  overflow:hidden;

  max-height:0;
  transition:max-height .25s ease;
  border-radius: 0 0 var(--radius) var(--radius);

  /* Optik: eingerückt unter Brand */
  margin-left:3rem;
  margin-right:12px;
  margin-bottom:10px;

  position: relative;
  z-index: 10002;
}

/* Links */
menu a{
  display:block;
  padding:12px 12px;
  border-top:1px solid var(--line);
  color: rgba(233,237,245,.92);
}
menu a:first-child{ border-top:none; }
menu a:hover{ background: rgba(255,255,255,.06); }

menu a.active{
  background: linear-gradient(90deg, rgba(124,92,255,.20), rgba(61,214,208,.10));
  border-left:3px solid rgba(124,92,255,.75);
  padding-left:13px;
}

/* Mobile open */
.nav-toggle:checked ~ menu{ max-height:520px; }

/* ========== Submenu (mobile inline) ========== */
/* HTML Struktur:
<div class="nav-sub">
  <div class="nav-sub-row">
    <a class="nav-sub-link ...">Über mich</a>
    <button class="nav-sub-caret" aria-controls="sub-about" aria-expanded="false"><span></span></button>
  </div>
  <div class="nav-sub-panel" id="sub-about" hidden>
    <a>Allergien</a>
    <a>Autobiographie</a>
  </div>
</div>
*/

menu .nav-sub{
  border-top:1px solid var(--line); /* fehlende Linie fix */
}

menu .nav-sub-row{
  position:relative;
  display:flex;
  align-items:center;
}

/* Link wie Hauptlink, aber ohne eigene border-top (macht Wrapper) */
menu .nav-sub-link{
  flex:1;
  display:block;
  padding:12px 12px;
  border-top:0;
  color: rgba(233,237,245,.92);
  padding-right: 56px; /* Platz für Caret */
}
menu .nav-sub-link:hover{ background: rgba(255,255,255,.06); }

menu .nav-sub-link.active{
  background: linear-gradient(90deg, rgba(124,92,255,.20), rgba(61,214,208,.10));
  border-left:3px solid rgba(124,92,255,.75);
  padding-left:13px;
}

/* Caret Button (genau 1x!) */
menu .nav-sub-caret{
  position:absolute;
  right:12px;
  top:50%;
  transform: translateY(-50%);
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
  z-index: 3;
}
menu .nav-sub-caret:hover{ background: rgba(255,255,255,.07); }

menu .nav-sub-caret span{
  width:9px;
  height:9px;
  border-right:2px solid rgba(233,237,245,.75);
  border-bottom:2px solid rgba(233,237,245,.75);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
menu .nav-sub-caret[aria-expanded="true"] span{ transform: rotate(225deg); }

/* Sub panel */
menu .nav-sub-panel{
  min-width:50%;
  background: transparent;
}
menu .nav-sub-panel[hidden]{ display:none !important; }

/* Sub links: gleiche Optik wie menu a, aber eingerückt */
menu .nav-sub-panel a{ padding-left:28px; }

/* Active im Sub: Strich eingerückt */
menu .nav-sub-panel a.active{
  border-left:none;
  position:relative;
  padding-left:28px;
  background: linear-gradient(90deg, rgba(124,92,255,.20), rgba(61,214,208,.10));
}
menu .nav-sub-panel a.active::after{
  content:"";
  position:absolute;
  left:14px;       /* eingerückter Strich */
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:3px;
  background: rgba(124,92,255,.85);
}

/* ========== Desktop layout ========== */
@media (min-width:780px){
  .nav-btn{ display:none; }

  nav{ padding:0 18px 14px; }

  menu{
    max-height:none;
    display:flex;
    gap:10px;
    margin-left:0;
    margin-right:0;
    border:0;
    background: transparent;
    overflow:visible;
    border-radius:0;
  }

  menu a{
    border-top:none;
    padding:10px 12px;
    border-radius:14px;
  }
  menu a.active{
    border-left:none;
    padding-left:12px;
  }

  /* Sub als Dropdown */
  menu .nav-sub{
    border-top:0;
    position:relative;
    display:flex;
    align-items:center;
    z-index: 10010; /* vor allem */
  }

  menu .nav-sub-row{
    position:relative;
    display:flex;
    align-items:center;
  }

  menu .nav-sub-link{
    padding:10px 12px;
    border-radius:14px;
    padding-right: 52px; /* Platz für Caret */
  }
  menu .nav-sub-link.active{
    border-left:none;
    padding-left:12px;
  }

  /* Caret: eigener Klickbereich, überlappt NICHT ungewollt */
  menu .nav-sub-caret{
    right:8px;
    width:30px;
    height:30px;
    border-radius:12px;
    z-index: 2;
  }

  /* Dropdown Panel */
  menu .nav-sub-panel{
    position:absolute;
    top: calc(100% + 8px);
    left:0;
    z-index: 10020; /* weiter nach vorne */
    min-width:220px;

    border:1px solid var(--line);
    background: rgba(12,15,22,.92);
    box-shadow: var(--shadow);
    border-radius:16px;
    overflow:hidden;
  }

  /* Im Dropdown keine Einrückung nötig */
  menu .nav-sub-panel a{ padding-left:12px; }
  menu .nav-sub-panel a.active{
    padding-left:12px;
    background: linear-gradient(90deg, rgba(124,92,255,.20), rgba(61,214,208,.10));
  }
  menu .nav-sub-panel a.active::after{
    left:0; top:8px; bottom:8px; /* normaler Strich im Dropdown */
  }
}

/* Header bekommt eigenen Stacking-Context und liegt über allem */
header{
  position: sticky;
  top: 0;
  z-index: 10000;
  isolation: isolate; /* wichtig: eigener Stack, sauber */
}

/* nav/menu ebenfalls */
header nav{ position: relative; z-index: 10001; }
header nav menu{ position: relative; z-index: 10002; }

/* Desktop: dropdown muss vor dem content liegen */
@media (min-width:780px){
  header nav menu{ overflow: visible; } /* sonst kann dropdown abgeschnitten werden */

  header nav .nav-sub{ position: relative; z-index: 10003; }

  header nav .nav-sub-panel{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20000;      /* <- ganz nach vorne */
    pointer-events: auto;
  }
}