/* =========================================================
   VERIFY CSS SYSTEM
   Datei: /assets/css/layout/header-nav-footer.css

   INHALT
   01) Header (Sticky / Glas)
   02) Brand / Logo
   03) Desktop Navigation
   04) Mobile Navigation (Toggle / Drawer)
   05) Footer

   HINWEIS
   Diese Datei enthält nur globale Layout-Navigation.
   Keine Hero-, Button- oder Content-Komponenten.
   ========================================================= */


/* =========================================================
   01) HEADER
   Sticky Glas-Header mit Blur + Gradient
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:80;
  padding:14px 0;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  background:linear-gradient(180deg, rgba(6,15,28,.62), rgba(6,15,28,.24));
  border-bottom:1px solid rgba(255,255,255,.08);
}

.site-header .header-inner{
  width:min(calc(100% - 32px), var(--shell));
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:60px;
}


/* =========================================================
   02) BRAND / LOGO
   ========================================================= */

.site-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.06em;
}

.site-brand-text{
  white-space:nowrap;
}

.site-brand-mark{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  overflow:hidden;
  color:var(--cyan);
  font-size:.95rem;
  font-weight:900;
  flex:0 0 42px;
}

.site-brand-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* =========================================================
   03) DESKTOP NAVIGATION
   ========================================================= */

.site-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.site-nav a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  color:var(--muted);
  border:1px solid transparent;
  transition:.2s ease;
}

.site-nav a:hover,
.site-nav a.is-active{
  color:var(--text);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.10);
}


/* =========================================================
   04) MOBILE NAVIGATION
   Toggle + Overlay + Drawer
   ========================================================= */

.nav-toggle{
  position:fixed;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.25), transparent 40%),
    linear-gradient(145deg, rgba(255,215,106,.18), rgba(255,191,58,.08));
  border:1px solid rgba(255,215,106,.35);
  border-radius:50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 6px rgba(120,80,0,.25),
    0 12px 28px rgba(0,0,0,.25),
    0 0 18px rgba(255,215,106,.18);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  z-index:120;
  cursor:pointer;
}

.nav-toggle:hover{
  border-color:rgba(255,215,106,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 8px rgba(120,80,0,.3),
    0 16px 34px rgba(0,0,0,.3),
    0 0 28px rgba(255,215,106,.28);
}

.nav-toggle span{
  display:block;
  height:2px;
  width:20px;
  margin:0 auto;
  background:linear-gradient(90deg, #fff6cc, var(--gold), var(--gold-2));
  border-radius:999px;
  box-shadow:0 0 6px rgba(255,215,106,.35);
  transition:.3s;
}


/* Backdrop */

.nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.56);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:98;
}


/* Drawer */

.nav-mobile{
  position:fixed;
  top:0;
  right:-100%;
  width:min(320px, 88vw);
  height:100vh;
  padding:92px 18px 22px;
  background:
    linear-gradient(180deg, rgba(7,17,31,.96), rgba(10,25,48,.96) 52%, rgba(5,10,18,.98));
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-16px 0 40px rgba(0,0,0,.35);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  display:flex;
  flex-direction:column;
  gap:18px;
  z-index:110;
  transition:right .32s ease;
}

.nav-mobile-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.nav-mobile a{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.02em;
}

.nav-mobile a:hover,
.nav-mobile a.is-active{
  border-color:rgba(255,215,106,.20);
  background:rgba(255,255,255,.09);
  color:#fff;
}


/* State */

body.nav-open .nav-mobile{
  right:0;
}

body.nav-open .nav-backdrop{
  opacity:1;
  pointer-events:auto;
}

body.nav-open .nav-toggle span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2){
  opacity:0;
}

body.nav-open .nav-toggle span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}


/* =========================================================
   05) FOOTER
   ========================================================= */

.site-footer{
  position:relative;
  z-index:1;
  padding:28px 0 42px;
  color:var(--soft);
}

.site-footer .footer-inner{
  width:min(calc(100% - 32px), var(--shell));
  margin-inline:auto;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}


/* =========================================================
   06) RESPONSIVE (NAV ONLY)
   Nur Navigation-spezifische Breakpoints
   ========================================================= */

@media (max-width: 1280px){
  .site-nav{
    display:none !important;
  }

  .nav-toggle{
    display:flex;
  }
}

@media (max-width: 760px){
  .site-header .header-inner,
  .site-footer .footer-inner{
    width:min(calc(100% - 20px), var(--shell));
  }

  .site-brand-text{
    font-size:.92rem;
  }

  .nav-toggle{
    top:14px;
    right:14px;
  }
}

/* ==========================================================
   UNIVERSAL FOOTER VERIFY BADGE SYSTEM
   Sorgt für eine saubere Integration auf allen Projektseiten
========================================================== */

.footer-verify {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 1.5rem;    /* Abstand zum Text darüber */
  margin-bottom: 0.5rem; /* Abstand nach unten */
  clear: both;           /* Verhindert Konflikte mit Floats */
}

.footer-verify a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  /* Flüssige Animation für die Maus-Interaktion */
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease;
}

/* WICHTIG: Begrenzt die Bildgröße, damit es nicht ausbricht */
.footer-verify img.verify-badge-inline {
  display: block;
  width: 90px;           /* Optimale Standardgröße für Footer */
  height: auto;          /* Verhindert Verzerrungen */
  max-width: 100%;       /* Macht es mobil-freundlich */
}

/* Interaktions-Effekt beim Drüberfahren (Hover) */
.footer-verify a:hover {
  transform: scale(1.06); /* Dezentes Aufpumpen um 6% */
  
  /* Erzeugt einen edlen Gold-Glow, der auf hellen und dunklen Seiten funktioniert */
  filter: drop-shadow(0 0 12px rgba(255, 215, 106, 0.5));
}

/* Verhindert störende Klick-Rahmen in manchen Browsern */
.footer-verify a:focus-visible {
  transform: scale(1.06);
  filter: drop-shadow(0 0 12px rgba(255, 215, 106, 0.8));
}