/* ===== NEXUS Corporate CSS ===== */

/* Design Tokens */
:root{
  --booyage-blue:#2566d6;
  --smartkey-blue:#17569d;
  --guestmap-green:#27bfa3;
  --accent-amber:#f7b500;
  --bg-main:#f6f8fb;

  /* Premium Hero – kühle Blauabstufung */
  --hero-a:#e6efff;  /* top-left hellblau */
  --hero-b:#f1f6ff;  /* softes blau-grau */
  --shimmer-blue: rgba(37,102,214,.38); /* blauer Sheen */

  /* Defaults */
  --text-1:#1f2937;
  --text-2:#344054;
 
      --nx-primary: #2566d6;    /* Booyage Blue */
      --nx-secondary:#27bfa3;   /* Mint */
      --nx-ink: #0f1728;        /* Text Primär */
      --nx-ink-2:#334155;       /* Text Sekundär */
      --nx-ink-3:#667085;       /* Muted */
      --nx-surface:#ffffff;     /* Cards/Hintergrund */
      --nx-glass-1: rgba(255,255,255,.86);
      --nx-glass-2: rgba(255,255,255,.72);
      --nx-border: rgba(16,24,40,.10); 
      /* Modul-Akzente */
      --booyage:   #2566d6;
      --smartkey:  #17569d;
      --smartroom: #f7b500;
      --smartguest:#27bfa3;
      --payments:  #17569d;

      /* Radius & Schatten */
      --nx-r: 20px;
      --nx-shadow-1: 0 10px 30px rgba(16,24,40,.06);
      --nx-shadow-2: 0 18px 40px rgba(16,24,40,.10); 

	  --surface:#f6f8fb;	
}

    .stripe-left{
      border-left:6px solid var(--booyage-blue);
      padding-left:1rem;
    }
	.stripe-right{
      border-right:6px solid var(--booyage-blue);
      padding-right:1rem;
    }
/* Base */
html,body{height:100%}
body{background:var(--bg-main); -webkit-font-smoothing:antialiased;color:var(--text-1)}
header.navbar{box-shadow:0 2px 12px rgba(16,24,40,.05)}
.eyebrow{letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;color:#556}
.section-title{font-weight:700}

/* Buttons */
.btn-gradient{
  background: linear-gradient(90deg, var(--booyage-blue), var(--guestmap-green));
  border:0; color:#fff;
}
.btn-gradient:hover{opacity:.92; color:#fff}

/* Glass */
.glass{
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(16,24,40,.06);
}

/* HERO – Premium Blau */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
  min-height: 560px;
}
.hero > *{ position:relative; z-index:2; }
.hero::before{
  content:""; position:absolute; z-index:1; pointer-events:none;
  top:-80%; left:-80%; width:260%; height:260%;
  background: linear-gradient(135deg, transparent 42%, var(--shimmer-blue) 50%, transparent 58%);
  filter: blur(6px);
  opacity: 1;
  transform: translate3d(-22%, -22%, 0) scale(1);
  animation: moveDiag 28s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes moveDiag{
  0%, 6%    { transform: translate3d(-22%, -22%, 0) scale(1);     opacity:1; }
  50%       { transform: translate3d( 22%,  22%, 0) scale(1.012); opacity:.7; }
  94%,100%  { transform: translate3d( 22%,  22%, 0) scale(1.012); opacity:.7; }
}
@media (prefers-reduced-motion: reduce){
  .hero::before{ animation:none; opacity:.5; }
}

/* ===== Icon System ===== */
.nx-icon{ --nx-icon-size:28px; width:var(--nx-icon-size); height:var(--nx-icon-size); display:inline-block; }
.nx-icon--lg{ --nx-icon-size:36px; }
.nx-icon--xl{ --nx-icon-size:44px; }
.nx-icon, .nx-icon *{
  stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; fill:none;
}
.nx-icon--ultra{ stroke-width:.85; }

/* ===== Premium Cards (Produkte) ===== */
.nx-card{
  --accent: #2566d6;
  --card-bg-1: rgba(255,255,255,.80);
  --card-bg-2: rgba(255,255,255,.68);
  position: relative; border-radius: 20px; padding: 22px; height: 100%;
  background:
    linear-gradient(to bottom right, var(--card-bg-1), var(--card-bg-2)) padding-box,
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 16%, transparent),
                           color-mix(in oklab, var(--accent) 0%, transparent)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 30px rgba(16,24,40,.06);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nx-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(16,24,40,.10);
  border-image: linear-gradient(135deg, color-mix(in oklab, var(--accent) 35%, transparent),
                                        color-mix(in oklab, var(--accent) 0%, transparent)) 1;
}
.nx-card::after{
  content:""; position:absolute; left:10%; right:10%; top:0; height:10px; border-radius:0 0 12px 12px;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events:none;
}
.nx-card-head{ display:flex; align-items:center; gap:.9rem; margin-bottom:.5rem; }
.nx-icon-wrap{
  --badge-size: 52px; --icon-inset: 10px;
  width: var(--badge-size); height: var(--badge-size); border-radius: 50%;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, white), rgba(255,255,255,.55));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 6px 16px rgba(16,24,40,.10);
}
.nx-product-title{ font-weight:600; line-height:1.05; font-size: clamp(1.15rem, .9rem + 1.1vw, 1.75rem); }
.nx-card p{ margin:.5rem 0 1rem; color:#334; }
.nx-sep{ height:1px; background:linear-gradient(to right, transparent, rgba(16,24,40,.12), transparent); margin:.75rem 0 1rem; }
.nx-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.nx-cta{
  --c1: color-mix(in oklab, var(--accent) 100%, #fff 0%);
  --c2: color-mix(in oklab, var(--accent) 55%,  #27bfa3 45%);
  border:0; color:#fff; background: linear-gradient(90deg, var(--c1), var(--c2));
}
.nx-cta:hover{ opacity:.92; color:#fff; }
.nx-sub{ color:#334; opacity:.95; margin:.35rem 0 .75rem; }
.nx-points{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.35rem; }
.nx-points li{ display:flex; align-items:flex-start; gap:.5rem; color:#344; }
.nx-points .bi{ font-size:1rem; opacity:.9; margin-top:.15rem; }

/* Themenfarben */
.is-booyage{   --accent:#2566d6; }
.is-smartkey{  --accent:#17569d; }
.is-smartroom{ --accent:#f7b500; }
.is-smartguest{--accent:#27bfa3; }
.is-club{      --accent:#2566d6; }
.is-insights{  --accent:#6e59e9; }
.is-dashboard{ --accent:#17569d; }

/* ===== USP Tiles ===== */
.nx-usp{
  --accent:#2566d6;
  --tile-bg-1: rgba(255,255,255,.85);
  --tile-bg-2: rgba(255,255,255,.72);
  position:relative; height:100%; border-radius:20px; padding:22px;
  background:
    linear-gradient(to bottom right, var(--tile-bg-1), var(--tile-bg-2)) padding-box,
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, transparent),
                           color-mix(in oklab, var(--accent) 0%, transparent)) border-box;
  border:1px solid transparent;
  -webkit-backdrop-filter:saturate(160%) blur(10px); backdrop-filter:saturate(160%) blur(10px);
  box-shadow:0 10px 30px rgba(16,24,40,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nx-usp:hover{ transform: translateY(-3px); box-shadow:0 18px 40px rgba(16,24,40,.10); border-image: linear-gradient(135deg, color-mix(in oklab, var(--accent) 30%, transparent), color-mix(in oklab, var(--accent) 0%, transparent)) 1; }
.nx-usp-head{ display:flex; align-items:center; gap:.9rem; margin-bottom:.4rem; }
.nx-usp .nx-icon-wrap{ --badge-size:52px; --icon-inset:12px; }
.nx-usp-title{ font-weight:700; line-height:1.05; font-size: clamp(1.125rem, .9rem + 1.1vw, 1.6rem); margin:.25rem 0 .35rem; }
.nx-usp-sub{ color:#334; opacity:.95; margin:.25rem 0 .75rem; }
.nx-usp-points{ list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.nx-usp-points li{ display:flex; gap:.5rem; color:#344; }
.nx-usp--direct{ --accent:#2566d6; }
.nx-usp--integr{ --accent:#17569d; }
.nx-usp--eff{    --accent:#f7b500; }

/* ===== Integrations Grid ===== */
.nx-integ{ border-radius:20px; }
.nx-logos{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:768px){ .nx-logos{ grid-template-columns:repeat(4,1fr); gap:16px; } }
@media (min-width:1200px){ .nx-logos{ grid-template-columns:repeat(5,1fr); gap:18px; } }
.nx-logo-tile{
  --tile-bg-1: rgba(255,255,255,.85);
  --tile-bg-2: rgba(255,255,255,.72);
  position:relative; border-radius:16px; height:92px; display:grid; place-items:center; padding:14px;
  background:
    linear-gradient(to bottom right, var(--tile-bg-1), var(--tile-bg-2)) padding-box,
    linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,0)) border-box;
  border:1px solid transparent;
  -webkit-backdrop-filter:saturate(160%) blur(8px); backdrop-filter:saturate(160%) blur(8px);
  box-shadow:0 8px 24px rgba(16,24,40,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nx-logo-tile:hover{ transform: translateY(-3px); box-shadow:0 16px 36px rgba(16,24,40,.10); border-image: linear-gradient(135deg, rgba(37,102,214,.18), rgba(39,191,163,.12)) 1; }
.nx-logo-img{ max-height:100px; max-width:80%; filter: grayscale(1) contrast(1.05) opacity(.85); transition: filter .25s, opacity .25s, transform .25s; }
.nx-logo-tile:hover .nx-logo-img{ filter: grayscale(0) contrast(1) opacity(1); transform: translateY(-1px); }
.nx-integ-note{ color:#556; font-size:.9rem; }
.nx-marquee{ overflow:hidden; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.nx-track{ display:flex; gap:16px; align-items:center; animation: nx-scroll 22s linear infinite; }
.nx-track .nx-logo-tile{ flex:0 0 180px; height:88px; }
@keyframes nx-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ===== Trust Section ===== */
.nx-trust{
  position: relative; border-radius: 24px; padding: clamp(20px, 3vw, 32px);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(37,102,214,.10), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(39,191,163,.10), transparent 55%),
    linear-gradient(to bottom right, rgba(255,255,255,.85), rgba(255,255,255,.70)) padding-box;
  border: 1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter: saturate(170%) blur(12px); backdrop-filter: saturate(170%) blur(12px);
  box-shadow: 0 14px 40px rgba(16,24,40,.08);
}
.nx-shield{ --s: 60px; width:var(--s); height:var(--s); border-radius:18px; display:grid; place-items:center; margin-right:14px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, color-mix(in oklab, #2566d6 18%, white), rgba(255,255,255,.6));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 20px rgba(16,24,40,.10);
}
.nx-shield svg{ width:56%; height:56%; stroke:#2566d6; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.nx-trust-sub{ color:#344; margin:.35rem 0 1rem; }
.nx-kpis{ display:flex; flex-wrap:wrap; gap:10px; margin:.25rem 0 1rem; }
.nx-kpi{ display:flex; align-items:center; gap:8px; padding:.5rem .65rem; border-radius:999px; border:1px solid rgba(16,24,40,.10); background:rgba(255,255,255,.75); font-size:.95rem; color:#2a2f37; }
.nx-kpi .dot{ width:8px; height:8px; border-radius:50%; background:#27bfa3; box-shadow:0 0 0 3px rgba(39,191,163,.18); }
.nx-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:.25rem 0 1rem; }
.nx-badge{ font-size:.82rem; padding:.45rem .6rem; border-radius:10px; background: rgba(16,24,40,.06); color:#2b2f37; border:1px solid rgba(16,24,40,.10); }
.nx-list{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.nx-list li{ display:flex; gap:.6rem; color:#334; }
.nx-list .bi{ color:#27bfa3; margin-top:.15rem; }
.nx-trust-media{ position:relative; border-radius:20px; overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 28px rgba(16,24,40,.08); }
.nx-trust-media img{ display:block; width:100%; height:auto; }
.nx-status{ position:absolute; top:12px; right:12px; display:flex; align-items:center; gap:8px; background: rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.7); padding:.35rem .55rem; border-radius:999px; font-size:.85rem; color:#2a2f37; }
.nx-status .dot{ width:8px; height:8px; border-radius:50%; background:#27bfa3; box-shadow:0 0 0 3px rgba(39,191,163,.20); }

/* ===== CTA Panel ===== */
.nx-cta-panel{
  --accent1: var(--booyage-blue);
  --accent2: var(--guestmap-green);
  position: relative; border-radius: 24px; padding: clamp(20px, 3vw, 32px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72)) padding-box,
    linear-gradient(135deg, color-mix(in oklab, var(--accent1) 55%, transparent), color-mix(in oklab, var(--accent2) 0%, transparent)) border-box;
  border: 1px solid transparent; box-shadow: 0 16px 44px rgba(16,24,40,.10);
  -webkit-backdrop-filter: saturate(170%) blur(10px); backdrop-filter: saturate(170%) blur(10px);
}
.nx-cta-panel::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: radial-gradient(60% 60% at 0% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); }
.nx-cta-title{ display:flex; align-items:start; gap:12px; margin-bottom:.25rem; }
.nx-cta-title .nx-ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(37,102,214,.12), rgba(39,191,163,.10)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.nx-cta-title h3{ margin:0; line-height:1.05; font-weight:700; font-size: clamp(1.15rem, .9rem + 1.2vw, 1.85rem); }
.nx-cta-sub{ color:#445; }
.nx-cta-points{ display:flex; flex-wrap:wrap; gap:12px 18px; margin:.5rem 0 1rem; }
.nx-cta-point{ display:flex; align-items:center; gap:8px; color:#2b2f37; font-size:.95rem; }
.nx-cta-point .dot{ width:8px; height:8px; border-radius:50%; background:#27bfa3; box-shadow:0 0 0 3px rgba(39,191,163,.18); }
.nx-cta-note{ color:#667085; font-size:.92rem; }
.nx-cta-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.nx-cta-primary.btn{ --c1: var(--accent1); --c2: var(--accent2); border:0; color:#fff; background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 8px 24px rgba(37,102,214,.18); }
.nx-cta-primary.btn:hover{ opacity:.92; color:#fff; }
.nx-cta-ghost{ border:1px solid rgba(16,24,40,.18); color:#1f2a37; background:rgba(255,255,255,.75); }
.nx-cta-ghost:hover{ background:rgba(16,24,40,.04); }

/* ===== Footer ===== */
.nx-footer{
  --accent1: var(--booyage-blue);
  --accent2: var(--guestmap-green);
  position: relative; margin-top:48px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80)) padding-box,
    linear-gradient(90deg, color-mix(in oklab, var(--accent1) 35%, transparent), color-mix(in oklab, var(--accent2) 25%, transparent)) border-box;
  border-top: 1px solid transparent;
  -webkit-backdrop-filter: saturate(170%) blur(10px); backdrop-filter: saturate(170%) blur(10px);
  box-shadow: 0 -10px 30px rgba(16,24,40,.05);
}
.nx-footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:10px; background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0)); pointer-events:none; }
.nx-foot-inner{ padding: clamp(20px, 3vw, 32px) 0; }
.nx-foot-brand{ display:flex; align-items:center; gap:.65rem; }
.nx-foot-brand img{ height:28px; width:auto; }
.nx-foot-note{ color:#5b6470; font-size:.95rem; }
.nx-foot-small{ color:#6b7280; font-size:.88rem; }
.nx-foot-links a{ color:#2a2f37; text-decoration:none; }
.nx-foot-links a:hover{ color:#0f3e7a; text-decoration:underline; }
.nx-chipset{ display:flex; flex-wrap:wrap; gap:8px; }
.nx-chip{ font-size:.82rem; padding:.35rem .55rem; border-radius:999px; background: rgba(16,24,40,.06); color:#2b2f37; border:1px solid rgba(16,24,40,.10); }
.nx-status-pill{ display:inline-flex; align-items:center; gap:8px; padding:.35rem .6rem; border-radius:999px; background: rgba(255,255,255,.80); border:1px solid rgba(16,24,40,.12); color:#2a2f37; font-size:.9rem; }
.nx-status-pill .dot{ width:8px; height:8px; border-radius:50%; background:#27bfa3; box-shadow:0 0 0 3px rgba(39,191,163,.20); }
.nx-foot-bottom{ border-top: 1px solid rgba(16,24,40,.08); padding: 12px 0; color:#667085; font-size:.9rem; }
.nx-social a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background: rgba(255,255,255,.8); border:1px solid rgba(16,24,40,.10); color:#1f2937; }
.nx-social a:hover{ background: rgba(16,24,40,.04); }
.link-secondary{ color:#475467 !important; }
.link-secondary:hover{ color:#0f3e7a !important; }

/* Utilities */
.logo-row img{max-height:36px;opacity:.85;filter:grayscale(1);transition:opacity .2s,filter .2s}
.logo-row img:hover{opacity:1;filter:none}

/* FAQ */
  .nx-faq-grid{
    display:grid; gap:16px;
    grid-template-columns: 1fr;
  }
  @media (min-width: 992px){
    .nx-faq-grid{ grid-template-columns: 1fr 1fr; }
  }

  .nx-faq-acc .accordion-button{
    gap:.6rem; padding:14px 16px; border-radius:14px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.70)) padding-box,
      linear-gradient(135deg, rgba(23,86,157,.18), rgba(39,191,163,.12)) border-box;
    border:1px solid transparent; box-shadow:0 10px 22px rgba(16,24,40,.06);
    color:#1d2635; font-weight:600;
  }
  .nx-faq-acc .accordion-button:not(.collapsed){
    box-shadow:0 16px 36px rgba(16,24,40,.10);
  }
  .nx-faq-acc .accordion-button:focus{ box-shadow:none; }
  .nx-faq-ico{
    width:28px; height:28px; display:grid; place-items:center;
    border-radius:10px;
    background:
      radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
      linear-gradient(135deg, rgba(37,102,214,.18), rgba(39,191,163,.18));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
    color:#17569d;
  }
  .nx-faq-item .accordion-body{
    background: rgba(255,255,255,.86);
    border:1px solid rgba(255,255,255,.65);
    border-radius: 0 0 14px 14px;
    padding:14px 16px; color:#344054;
  }

    /* =========================
       GLASS MEDIA (Screenshots)
       ========================= */
    .nx-media{
      background: var(--nx-glass-1);
      border-radius: var(--nx-r);
      padding:12px; border:1px solid rgba(255,255,255,.6);
      box-shadow: var(--nx-shadow-1);
    }
    .nx-media .bar{
      height:10px; border-radius:8px; margin-bottom:10px;
      background:
        radial-gradient(8px 8px at 10px 50%, #ff6b6b 98%, transparent),
        radial-gradient(8px 8px at 28px 50%, #ffd166 98%, transparent),
        radial-gradient(8px 8px at 46px 50%, #06d6a0 98%, transparent),
        linear-gradient(90deg, rgba(16,24,40,.06), rgba(16,24,40,.04));
    }

.nx-hero h1{ font-weight:800; letter-spacing:-.01em }
.nx-sub{ color:var(--nx-ink-2); max-width:60ch }

 /* =========================
       CTA Panel
       ========================= */
    .nx-cta-panel{
      border-radius:18px; padding:18px 20px;
      background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.6));
      backdrop-filter: blur(8px) saturate(140%); box-shadow: var(--nx-shadow-1);
    }
    .nx-ico{
      display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
      background:
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, rgba(37,102,214,.18), rgba(39,191,163,.18));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
    }
    .nx-cta-primary.btn{
      --c1: var(--nx-primary); --c2: var(--nx-secondary);
      border:0; color:#fff; background: linear-gradient(90deg, var(--c1), var(--c2));
      box-shadow: 0 8px 24px rgba(37,102,214,.18);
    }
.nx-cta-primary.btn:hover{ opacity:.92; color:#fff; }  

/* produkte */
/* ===== Produkte: Staggered + Spotlight (ohne JS) ===== */
.nx-products--stagger > [class*="col-"] { position: relative; }

@media (min-width: 992px){
  /* leichte vertikale Versätze für 3er-Raster */
  .nx-products--stagger > .col-lg-4:nth-child(3n+1) { margin-top: 0;   }
  .nx-products--stagger > .col-lg-4:nth-child(3n+2) { margin-top: 18px;}
  .nx-products--stagger > .col-lg-4:nth-child(3n)   { margin-top: 36px;}

  /* falls eine breite Karte (8/12) mitten im Grid steht */
  .nx-products--stagger > .col-lg-8 { margin-top: 8px; }
}

/* subtile Halo-Deko pro Karte, variiert per Index */
.nx-products--stagger .nx-card::before{
  content:""; position:absolute; inset:-2px -2px auto auto; height:60%;
  background:
    radial-gradient(40% 30% at 85% 15%, rgba(37,102,214,.10), transparent 60%),
    radial-gradient(35% 25% at 95% 30%, rgba(39,191,163,.10), transparent 60%);
  pointer-events:none; border-radius: inherit; filter: blur(.2px);
}
.nx-products--stagger .nx-card:nth-child(2n)::before{
  background:
    radial-gradient(40% 30% at 80% 20%, rgba(247,181,0,.10), transparent 60%),
    radial-gradient(35% 25% at 95% 35%, rgba(39,191,163,.08), transparent 60%);
}

/* Basis: kompakter Dropdown-Look */
.dropdown-menu { padding:.4rem .5rem; border-radius:.6rem; }
/* Standard bleibt: display wird von Bootstrap gesteuert */

/* Grid: mobil 1 Spalte */
.dropdown-menu.dropdown-menu-grid { /* geschlossen = kein Grid, bleibt hidden */ }
.dropdown-menu.dropdown-menu-grid.show{
  display: grid;                     /* gewinnt ggü. .dropdown-menu.show */
  grid-template-columns: 1fr;
  gap: .15rem .5rem;
  min-width: min(90vw, 520px);
}

/* Ab lg: 2 Spalten */
@media (min-width: 992px){
  .dropdown-menu.dropdown-menu-grid.show{
    grid-template-columns: 1fr 1fr;
    min-width: 520px;                /* optional */
  }
}

/* Elemente über volle Breite */
.dropdown-menu-grid .dropdown-divider,
.dropdown-menu-grid .dropdown-item-smartselect{
  grid-column: 1 / -1;
}

/* Promo-Kachel (bleibt wie gehabt) */
.dropdown-item-smartselect{
  background: linear-gradient(180deg,#fff,#f6f9ff);
  border:1px solid rgba(13,110,253,.12);
  border-radius:.5rem;
}
.dropdown-item-smartselect:hover{
  background: linear-gradient(180deg,#f9fbff,#eef4ff);
  border-color: rgba(13,110,253,.25);
}

/* === Card-Rahmen fixen: immer rund, auch bei Hover/Focus === */

/* 1) Basis: Ecken clippen + Background sauber in die Rundung */
.nx-card,
.nx-usp,
.nx-foot-card,
.dropdown-item-smartselect {
  border-radius: 20px;            /* ggf. je Komponente anpassen */
  overflow: hidden;               /* wichtig: clippt alles an die Rundung */
  background-clip: padding-box;   /* saubere Innenkante */
}

/* 2) border-image auf Hover neutralisieren (macht "eckig") */
.nx-card,
.nx-usp,
.nx-foot-card {
  border-image: none !important;
}
.nx-card:hover,
.nx-usp:hover,
.nx-foot-card:hover {
  border-image: none !important;
  border-color: transparent; /* wir malen den Ring gleich als inset shadow */
}

/* 3) "Runder" Hover-Ring als inset Box-Shadow */
.nx-card:hover,
.nx-usp:hover,
.nx-foot-card:hover,
.dropdown-item-smartselect:hover {
  box-shadow:
    0 18px 40px rgba(16,24,40,.10),                 /* dein bisheriger Lift */
    inset 0 0 0 1px color-mix(in oklab, var(--booyage-blue) 22%, transparent); /* runder Rahmen */
}

/* 4) Keyboard-Fokus gesammelt auf die Card legen (statt eckiger Link-Outline) */
.nx-card:focus-within,
.nx-usp:focus-within,
.nx-foot-card:focus-visible,
.dropdown-item-smartselect:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0 rgba(0,0,0,0), /* kein äußerer Schein */
    inset 0 0 0 2px color-mix(in oklab, var(--booyage-blue) 45%, white); /* runder Focus-Ring */
}

/* 5) Einzel-Elemente in der Card: Standard-Outline aus, Fokus an Container "bubble'n" */
.nx-card a:focus,
.nx-card a:focus-visible,
.nx-card .btn:focus,
.nx-card .btn:focus-visible,
.nx-usp a:focus, .nx-usp a:focus-visible,
.nx-foot-card .btn:focus, .nx-foot-card .btn:focus-visible,
.dropdown-item-smartselect:focus { 
  outline: none;
  box-shadow: none;        /* verhindert kantige Fokusrahmen */
}

/* 6) Spezifische Radien je Komponententyp (optional feiner) */
.nx-card { border-radius: 20px; }
.nx-usp { border-radius: 20px; }
.nx-foot-card { border-radius: 14px; }
.dropdown-item-smartselect { border-radius: 12px; }

/* 7) Pseudo-Elemente runden mit */
.nx-card::before, .nx-card::after,
.nx-usp::before,  .nx-usp::after { border-radius: inherit; }

/* 8) Tap-Highlight auf Mobil nicht "kastenförmig" anzeigen */
.nx-card, .nx-usp, .nx-foot-card, .dropdown-item-smartselect {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}


/* ===== Parallax (JS-gestützt, cross-browser) ===== */
.nx-parallax2{
  position: relative;
  min-height: 50vh;
  /* border-radius: 24px; */
  overflow: hidden;            /* clippt die fixe BG sauber in der Sektion */
  box-shadow: 0 14px 40px rgba(16,24,40,.10);
}
.nx-parallax2-bg{
  position: absolute;
  inset: -20% -10%;            /* größer als die Sektion -> Spielraum fürs Verschieben */
  background: center/cover no-repeat;
  will-change: transform;
  transform: translateY(0);
}
.nx-parallax2::after{          /* dezenter Farb-Overlay */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(37,102,214,.28), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(39,191,163,.28), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25));
}
.nx-parallax2-inner{
  position: relative; z-index: 1;
  display: grid; place-items: center;
  min-height: inherit;
  padding: clamp(24px, 6vw, 64px) 0;
}

/* KPI Badges */
.nx-stats{display:flex;flex-wrap:wrap;gap:.75rem}
.nx-badge-stat{
  --accent: #0d6efd;              /* fallback */
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.55rem .9rem;border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:
    radial-gradient(120% 120% at -10% -10%, color-mix(in srgb, var(--accent) 18%, #fff) , transparent 55%),
    #fff;
  box-shadow:0 6px 18px rgba(16,24,40,.08);
}
.nx-badge-stat .nx-ico{
  width:28px;height:28px;border-radius:999px;
  display:grid;place-items:center;
  background: color-mix(in srgb, var(--accent) 16%, #fff);
  color: var(--accent);
}
.nx-badge-stat .nx-val{font-weight:700;letter-spacing:.2px}
.nx-badge-stat .nx-sub{font-size:.8rem;color:var(--bs-secondary-color)}
/* Dark-Mode (optional) */
@media (prefers-color-scheme: dark){
  .nx-badge-stat{border-color:rgba(255,255,255,.12);background:#0b0f14}
  .nx-badge-stat .nx-sub{color:#9aa4b2}
}

.nx-hero-compact{background:linear-gradient(180deg,#f8fbff, #fff)}

/* Cookie-Banner – fixiert am unteren Bildschirmrand */
.nx-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200; /* über Footer/Content, aber unter Modals wenn du willst: < 1055 ändern falls nötig */

  padding: .75rem 0;
  background:
    linear-gradient(120deg, #1d4ed8, #2563eb, #22c55e);
  color: #fff;
  box-shadow: 0 -8px 28px rgba(15, 23, 42, .35);
}

.nx-cookie-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  font-size: .875rem;
}

.nx-cookie-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .18);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .3);
  flex: 0 0 auto;
}

.nx-cookie-title {
  font-weight: 600;
  margin-bottom: .15rem;
}

.nx-cookie-text {
  margin-bottom: .15rem;
  opacity: .9;
}

.nx-cookie-link {
  color: #e0f2fe;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.nx-cookie-link:hover {
  color: #ffffff;
}

.nx-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-left: auto;
}

.nx-cookie-btn-primary {
  border-radius: 999px;
  font-weight: 600;
  border: none;
  padding: .35rem .9rem;
  background: #ffffff;
  color: #1d4ed8;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .25);
}

.nx-cookie-btn-primary:hover {
  background: #e5f0ff;
}

.nx-cookie-btn-secondary {
  border-radius: 999px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,.7);
  padding: .35rem .9rem;
  background: transparent;
  color: #f9fafb;
}

.nx-cookie-btn-secondary:hover {
  background: rgba(15, 23, 42, .18);
}

@media (max-width: 575.98px) {
  .nx-cookie-inner {
    align-items: flex-start;
  }
  .nx-cookie-actions {
    width: 100%;
    justify-content: flex-start;
  }
}