/* Kopfbereich im Design der Startseite (gemeinsam für alle Unterseiten). Alle Regeln sind auf .hdr begrenzt. */
/* Verhindert, dass der Browser beim Schrumpfen des Logos die Seite von selbst verschiebt (Flackern) */
html{ overflow-anchor:none; }
.hdr{
  --hn:#142030; --hpanel:#1E3442; --hline:rgba(179,163,172,.2);
  --hmag:#DA29C6; --hmagbtn:#C520B3; --hmagtext:#E85CDA; --htext:#F4F0F3; --hmuted:#B3A3AC;
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:rgba(20,32,48,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hline); color:var(--htext);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px; line-height:1.55;
}
.hdr *, .hdr *::before, .hdr *::after{ box-sizing:border-box; }
.hdr a{ color:inherit; text-decoration:none; opacity:1; }
.hdr .container{ display:flex; align-items:center; gap:18px; min-height:72px; max-width:1440px; margin:0 auto; padding:14px clamp(16px,3vw,40px); transition:padding .25s; }
.hdr .logo{ flex:none; }
.hdr .logo img{ height:109px; width:auto; max-width:none; aspect-ratio:1000/594; display:block; flex-shrink:0; transition:height .25s; animation:none; }
.hdr.shrunk .container{ padding-block:6px; }
.hdr.shrunk .logo img{ height:56px; }
.hdr .nav{ display:flex; align-items:center; gap:22px; font-size:14px; font-weight:500; margin-left:auto; margin-right:0; }
.hdr .nav>a, .hdr .dd>a, .hdr .dd>button{ white-space:nowrap; padding-block:12px; }
.hdr .nav>a:hover, .hdr .dd>a:hover, .hdr .dd>button:hover{ color:var(--hmagtext); }
.hdr .nav a.active, .hdr .dd>a.active, .hdr .dd>button.active{ color:var(--hmagtext); }
.hdr .dd-menu a.active{ color:var(--hmagtext); }
.hdr .dd{ position:relative; }
.hdr .dd>button{ background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding-inline:0; }
.hdr .dd-menu{ position:absolute; left:-14px; top:calc(100% + 14px); min-width:200px; padding:8px; border-radius:14px; background:var(--hpanel); border:1px solid var(--hline); box-shadow:0 20px 40px rgba(0,0,0,.4); display:none; z-index:5; }
.hdr .dd:hover .dd-menu, .hdr .dd:focus-within .dd-menu{ display:grid; }
.hdr .dd-menu a{ padding:8px 12px; border-radius:8px; font-size:14px; }
.hdr .dd-menu a:hover{ background:rgba(255,255,255,.06); color:var(--hmagtext); }
.hdr .dd::after{ content:""; position:absolute; left:0; right:0; top:100%; height:16px; }
.hdr .tools{ display:flex; align-items:center; gap:10px; }
.hdr .icon-btn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:none; border:1px solid var(--hline); color:var(--htext); cursor:pointer; padding:0; }
.hdr .icon-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.hdr .burger{ display:none; }
.hdr .mnav{ display:none; }
.hdr .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; border-radius:99px; font-weight:600; font-size:14px; background:var(--hmagbtn); color:#fff; border:1px solid transparent; cursor:pointer; white-space:nowrap; line-height:1.4; transition:background .2s ease, border-color .2s ease; }
.hdr .btn:hover{ background:var(--hmag); }
.hdr .btn.ghost{ background:transparent; border-color:var(--hline); color:var(--htext); }
.hdr .btn.ghost:hover{ border-color:var(--hmagtext); }
.hdr .nd-head{ display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; min-height:40px; border-radius:99px; border:1px solid rgba(255,77,94,.6); font-size:13px; font-weight:500; white-space:nowrap; }
.hdr .nd-head i{ width:24px; height:24px; border-radius:50%; background:#C8283D; display:grid; place-items:center; font-style:normal; font-weight:800; font-size:14px; }
.hdr .nd-head em{ display:none; font-style:normal; font-weight:500; }
.hdr .nd-head b{ font-weight:700; font-variant-numeric:tabular-nums; }
.hdr .nd-head:hover{ background:rgba(255,77,94,.12); }
.hdr :focus-visible{ outline:2px solid var(--hmagtext); outline-offset:3px; border-radius:8px; }
@media (max-width:1699px){ .hdr .tools .btn.ghost{ display:none; } }
@media (min-width:1700px){ .hdr .container{ max-width:1600px; } }
@media (min-width:1500px){ .hdr .nd-head em{ display:inline; } }
@media (max-width:1380px){ .hdr .nd-head span{ display:none; } .hdr .nd-head{ padding:5px; } .hdr .nd-head i{ width:30px; height:30px; } }
@media (max-width:1160px){
  .hdr .nav>a:not(.svc), .hdr .dd{ display:none; }
  .hdr .burger{ display:grid; }
  .hdr .tools{ margin-left:0; }
  .hdr .mnav{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--hn); border-bottom:1px solid var(--hline); padding:8px clamp(16px,3vw,40px) 16px; }
  .hdr .mnav.open{ display:grid; }
  .hdr .mnav a{ padding:12px 4px; border-bottom:1px solid var(--hline); font-weight:500; }
  .hdr .mnav a.active{ color:var(--hmagtext); }
  .hdr .mnav .sub{ padding-left:16px; font-size:14px; color:var(--hmuted); }
}
@media (max-width:760px){
  .hdr .nav, .hdr .tools .btn, .hdr .nd-head{ display:none; }
  .hdr .tools{ margin-left:auto; }
  .hdr .mnav{ padding:8px 16px 16px; }
}
@media (max-width:640px){
  .hdr .container{ min-height:60px; padding-block:8px; }
  .hdr .logo img{ height:88px; }
  .hdr.shrunk .logo img{ height:48px; }
}
@media (prefers-reduced-motion:reduce){ .hdr .container, .hdr .logo img{ transition:none; } }
