/* ================================================================
   NEUES DESIGN FÜR DEN OBEREN TEIL (Kopfzeile + Startbereich)
   Ergänzt BaseLayout.*.css – überschreibt nur Kopfbereich & Hero.
   ================================================================ */
:root{
  --nx-navy:#1d2125;
  --nx-navy-2:#2b3036;
  --nx-blue:var(--color-accent);
  --nx-blue-bright:var(--color-accent-bright);
}

/* ---------- Infoleiste ganz oben ---------- */
.nx-topbar{background:var(--nx-blue)!important;color:#ffffffe6!important}
.nx-topbar svg{color:#fff!important}
.nx-topbar a:hover{color:#fff;text-decoration:underline}

/* ---------- Kopfzeile ---------- */
.nx-header{
  background:var(--nx-navy)!important;
  border-bottom:1px solid #ffffff1a!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.nx-header > .container-x{height:5rem}
/* Logo-Text */
.nx-header > .container-x > a:first-child .text-ink{color:#fff!important}
.nx-header > .container-x > a:first-child .text-steel{color:#ffffffa6!important}
/* Hauptnavigation (nur oberste Ebene, Dropdowns bleiben weiß) */
.nx-header nav[aria-label="Hauptnavigation"] > ul > li > div > a{
  color:#ffffffc7!important;border-radius:999px;padding-block:.45rem;
  transition:background-color .18s,color .18s;
}
.nx-header nav[aria-label="Hauptnavigation"] > ul > li > div > a:hover{color:#fff!important;background:#ffffff14}
.nx-header nav[aria-label="Hauptnavigation"] > ul > li > div > a[aria-current="page"]{
  color:#fff!important;background:#ffffff1f;
}
.nx-header nav[aria-label="Hauptnavigation"] > ul > li > div > a[aria-current="page"]::after{
  display:none!important;
}
.nx-header nav[aria-label="Hauptnavigation"] > ul > li > div > button{color:#ffffff99!important}
.nx-header nav[aria-label="Hauptnavigation"] > ul > li > div > button:hover{color:#fff!important}
/* WhatsApp-Symbol & Menü-Knopf */
.nx-header > .container-x > div:last-child > a[href^="https://wa.me"]{color:#ffffffc7!important}
.nx-header > .container-x > div:last-child > a[href^="https://wa.me"]:hover{background:#ffffff14!important;color:#fff!important}
.nx-header [data-mobile-toggle]{border-color:#ffffff40!important;color:#fff}
/* Anfrage-Knopf in der Kopfzeile: weiß auf Marineblau */
.nx-header > .container-x .btn-primary{background:#fff;color:var(--nx-navy);border-radius:999px}
.nx-header > .container-x .btn-primary:hover{background:var(--nx-blue);color:#fff}
/* Mobiles Menü an neue Höhe anpassen */
.nx-header #mobile-menu{height:calc(100dvh - 5rem)}

/* ---------- Kopfbereich der Unterseiten ---------- */
main#main > section.bg-anthracite:first-child{
  background:
    radial-gradient(60rem 30rem at 100% 0%, color-mix(in srgb,var(--nx-blue) 45%,transparent), transparent 70%),
    linear-gradient(135deg,var(--nx-navy) 0%,var(--nx-navy-2) 100%)!important;
}
main#main > section.bg-anthracite:first-child > div[aria-hidden="true"]{
  background:none!important;
  border-left:1px solid #ffffff14;
  background-image:radial-gradient(#ffffff1f 1px,transparent 1.5px)!important;
  background-size:18px 18px!important;
  -webkit-mask-image:linear-gradient(to left,#000,transparent);
  mask-image:linear-gradient(to left,#000,transparent);
}
main#main > section.bg-anthracite:first-child .eyebrow{
  background:#ffffff14;border:1px solid #ffffff26;border-radius:999px;
  padding:.3rem .9rem .3rem .75rem;color:#fff;font-size:.85rem;
}
main#main > section.bg-anthracite:first-child .eyebrow::before{
  width:.5rem;height:.5rem;border-radius:999px;background:var(--nx-blue-bright);
}

/* ---------- Startbereich der Startseite ---------- */
.nx-hero{position:relative;color:#fff;background:#fff;padding-bottom:1px}
.nx-hero-media{position:absolute;inset:0 0 3.25rem 0;overflow:hidden;background:var(--nx-navy)}
.nx-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.nx-hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,#1d2125f7 0%,#1d2125e0 38%,#1d21258c 62%,#1d212533 100%),
    linear-gradient(0deg,#1d2125cc 0%,transparent 45%);
}
.nx-hero-inner{position:relative;padding-top:4.5rem;padding-bottom:3.5rem}
.nx-hero-content{max-width:40rem}
.nx-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#ffffff17;border:1px solid #ffffff33;border-radius:999px;
  padding:.4rem 1rem .4rem .6rem;font-size:.9rem;font-weight:600;color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.nx-badge-dot{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:999px;background:var(--nx-blue);color:#fff}
.nx-h1{
  margin-top:1.4rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.02;letter-spacing:-.005em;text-transform:none;color:#fff;
}
.nx-h1 em{font-style:normal;color:var(--nx-blue-bright)}
.nx-lead{margin-top:1.25rem;max-width:34rem;font-size:1.15rem;line-height:1.65;color:#ffffffd1}
.nx-choices{margin-top:2.25rem;display:grid;gap:.85rem}
@media (width>=640px){.nx-choices{grid-template-columns:1fr 1fr}}
.nx-choice{
  position:relative;display:flex;flex-direction:column;gap:.2rem;
  padding:1.1rem 3.25rem 1.1rem 1.25rem;border-radius:.9rem;text-decoration:none;color:#fff;
  background:#ffffff14;border:1px solid #ffffff33;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .18s,background-color .18s,border-color .18s;
}
.nx-choice:hover{transform:translateY(-2px);background:#ffffff24;border-color:#ffffff66}
.nx-choice--primary{background:var(--nx-blue);border-color:var(--nx-blue)}
.nx-choice--primary:hover{background:var(--color-accent-dark);border-color:var(--color-accent-dark)}
.nx-choice-k{font-family:var(--font-display);font-size:1.6rem;font-weight:700;line-height:1.1}
.nx-choice-t{font-size:.92rem;color:#ffffffd9;line-height:1.35}
.nx-choice-arrow{
  position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:999px;background:#ffffff26;
}
.nx-wa{
  margin-top:1.4rem;display:inline-flex;align-items:center;gap:.55rem;
  color:#fff;font-weight:600;text-decoration:none;font-size:.98rem;
}
.nx-wa-icon{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:999px;background:var(--color-whatsapp)}
.nx-wa:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
.nx-wa-hint{color:#ffffffa6;font-weight:500}

.nx-trust{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  background:#fff;color:var(--color-ink);border-radius:1rem;
  box-shadow:0 18px 40px -18px #1d212566,0 2px 6px #1d212514;
  border:1px solid var(--color-line);overflow:hidden;
}
@media (width>=1024px){.nx-trust{grid-template-columns:repeat(4,1fr)}}
.nx-trust li{display:flex;align-items:center;gap:.8rem;padding:1.1rem 1.1rem;font-weight:600;font-size:.95rem;line-height:1.25}
.nx-trust li + li{border-left:1px solid var(--color-line)}
@media (width<1024px){
  .nx-trust li:nth-child(3){border-left:0}
  .nx-trust li:nth-child(n+3){border-top:1px solid var(--color-line)}
}
.nx-trust-icon{flex-shrink:0;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:.7rem;
  background:color-mix(in srgb,var(--nx-blue) 12%,transparent);color:var(--nx-blue)}
.nx-trust small{display:block;font-weight:500;color:var(--color-steel);font-size:.82rem;margin-top:.1rem}

@media (width>=1024px){
  .nx-hero-inner{padding-top:7rem;padding-bottom:5.5rem}
}
@media (width<640px){
  .nx-hero-media::after{background:linear-gradient(180deg,#1d2125d9 0%,#1d2125f2 100%)}
  .nx-trust li{padding:.9rem .8rem;font-size:.88rem;gap:.6rem}
  .nx-trust-icon{width:2.2rem;height:2.2rem}
  .nx-trust small{display:none}
}