:root{
  --bg: rgba(16,22,43,.72);
  --bg-light: rgba(255,255,255,.78);
  --text: #0f1424;
  --text-dark: #e8ebf2;
  --brand: #6aa3ff;
  --muted: #6b7280;
  --border: rgba(0,0,0,.08);
  --border-dark: rgba(255,255,255,.08);
  --maxw: 1180px;            /* bei Bedarf an deine Startseite anpassen */
}

/* Header (sticky + Blur) */
.header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
  background: var(--bg-light);
}
@media (prefers-color-scheme: dark){
  .header{
    background: var(--bg);
    border-bottom-color: var(--border-dark);
  }
}

/* Container */
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(12px,2vw,20px); }
.nav{ display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; }

/* Brand / Logo */
.brand{ display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand .logo{ display: none; } /* alte Quadrat-Variante sicher ausschalten */
.brand img.brand-logo{
  display: block;
  height: 56px; width: auto; max-width: 280px; object-fit: contain;
}

/* Menu */
.menu{ display: flex; gap: 14px; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
.menu a{
  font-weight: 700; text-decoration: none;
  color: #2746b0; /* sichtbares Blau wie im Screenshot */
}
.menu a:hover{ color: var(--brand); }

/* Unterstreichung im Menü */
.menu a[aria-current="page"]{
  border-bottom: 2px solid var(--brand); padding-bottom: 2px;
}

/* Mobile */
@media (max-width: 900px){
  .brand img.brand-logo{ height: 44px; max-width: 220px; }
}
@media (max-width: 600px){
  .brand img.brand-logo{ height: 36px; max-width: 180px; }
}
/* === TEMP-FIX: Logo optisch größer darstellen === */
.header .brand img.brand-logo {
  height: 120px;               /* Logo sichtbar größer */
  width: auto;
  max-width: 300px;
  transform: scale(1.35);     /* vergrößert innerhalb des freien Randes */
  transform-origin: left center;
  clip-path: inset(10% 4% 10% 0);  /* schneidet weißen Innenrand visuell ab */
}

/* leichte Korrektur für kleinere Geräte */
@media (max-width: 900px){
  .header .brand img.brand-logo {
    height: 52px;
    transform: scale(1.25);
  }
}


/* Mobile etwas kleiner */
@media (max-width: 900px){
  .brand-logo { height: 48px; }
}
/* assets/css/header.css */
.header{
  position:sticky; top:0; z-index:40;
  background:#fff;                   /* weißer Header überall */
  border-bottom:1px solid var(--keyline);
}