/* ═══════════════════════════════════════════════════════════
   SAWAS – Shared Header CSS
   Geladen von ALLEN Seiten. Änderungen hier wirken überall.
   ═══════════════════════════════════════════════════════════ */

:root{
  --turq:#00f5e1;
  --blue:#35a6ff;
  --violet:#7c4dff;
  --coral:#ff4f8b;
  --green:#38d996;
  --ink:#d2d8ec;
  --ink-soft:rgba(210,216,236,.55);
  --line:rgba(255,255,255,.1);
}

/* ── Topbar ────────────────────────────────────────────── */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:14px clamp(18px,4vw,42px);
  background:rgba(7,10,18,.68);
  border-bottom:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);
  font-family:Inter,sans-serif;
}

/* ── Brand-Gruppe (Logo + Unternehmen-Knopf) ───────────── */
.brand-group{display:flex;align-items:center;gap:14px}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-weight:800;
  letter-spacing:2px;
  text-decoration:none;
}
.brand img{display:block;filter:drop-shadow(0 0 12px rgba(0,245,225,.32))}
.brand:hover{color:var(--turq)}
.brand span{font-family:Inter,sans-serif}

/* ── Nav-Links ─────────────────────────────────────────── */
.topnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.topnav a{
  color:var(--ink-soft);
  font-size:.92rem;
  font-weight:700;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  font-family:Inter,sans-serif;
  transition:background .15s,color .15s;
}
.topnav a:hover{background:rgba(255,255,255,.08);color:#fff}
.topnav a.active{background:rgba(0,245,225,.12);color:#fff}

/* Nav-Typen: secondary = etwas gedimmt; legal = noch mehr */
.nav-secondary{opacity:.72}
.nav-legal{opacity:.45;font-size:.82rem}

/* ── Unternehmen-Tab ───────────────────────────────────── */
.unternehmen-tab{
  background:rgba(0,245,225,.08);
  border:1px solid rgba(0,245,225,.28);
  color:rgba(0,245,225,.9);
  font:700 .82rem/1 Inter,sans-serif;
  padding:7px 14px;
  border-radius:99px;
  cursor:pointer;
  letter-spacing:.3px;
  white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s;
}
.unternehmen-tab:hover{background:rgba(0,245,225,.16);border-color:rgba(0,245,225,.55);color:#fff}

/* ── Konto-Button (nur Handy) ──────────────────────────── */
.topbar-mobile-konto{
  display:none;  /* Desktop: versteckt */
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:99px;
  background:linear-gradient(120deg,#00f5e1,#7c4dff);
  color:#fff;
  font-size:.8rem;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  font-family:Inter,sans-serif;
}

/* ── Mobile (≤680px): Nur Logo + Konto-Button ──────────── */
@media(max-width:680px){
  .topbar{padding:10px 16px}
  .topnav{display:none}                   /* gesamte Nav weg */
  .unternehmen-tab{display:none!important}/* Unternehmen weg */
  .topbar-mobile-konto{display:flex}      /* Konto-Button an */
}