/* ═══════════════════════════════════════
   AFANDI – Premium Layer (rein additiv)
   Hero-Inszenierung: Orbit, Floating-Cards,
   Sticker + gestaffelter Hero-Einstieg.
   Ohne premium.js wirkungslos – kein No-JS-Risiko.
   Farben & Radien: bestehende Tokens aus style.css
═══════════════════════════════════════ */

/* ── Navigation: kompakte Navy-Leiste, nahtloses Logo, professionelle Menüliste ── */
.nav,.nav-inner{height:60px}
.nav{background:var(--navy,#002e48)!important}
.nav.solid{
  background:var(--navy,#002e48)!important;
  box-shadow:0 10px 30px rgba(0,20,34,.35);
}
/* Logo: transparentes SVG (weißer Schriftzug), verschmilzt mit der Navy-Leiste */
.nav img[src*="logo-afandi"]{
  height:22px!important;width:auto!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.nav-links{gap:6px}
.nav-links a{
  position:relative;
  padding:9px 14px;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.72);
}
.nav-links a::after{
  content:'';position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--sky,#1a8ab8),#9ddcff);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav-links a:hover{background:transparent;color:#fff}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.pOn{color:#fff;background:rgba(255,255,255,.12)}
.nav-links a.pOn::after{display:none}
/* Sprach-Schalter auf Navy – kompakt */
.lang-sw{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);padding:2px}
.lang-sw button{color:rgba(255,255,255,.65);padding:3px 7px;font-size:11px}
.lang-sw button.on{background:#fff;color:var(--navy,#002e48)}
/* CTA-Button invertiert: weiß auf Navy – kompakt */
.nav-cta{background:#fff;color:var(--navy,#002e48);padding:6px 12px;font-size:12.5px}
.nav-cta:hover{background:var(--sky-lt,#e6f4fb);color:var(--navy,#002e48)}
.nav-cta svg{width:12px;height:12px}
/* Burger-Menü auf Navy – kompakt */
.hamburger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);width:36px;height:36px}
.hamburger span{background:#fff}

/* ── Hero-Überschrift kompakter ── */
.hero-home__title{font-size:clamp(26px,3.6vw,42px)}
/* Mobiler CTA im Menü (wird per premium.js eingefügt) */
.pMenuCtaLi{display:none}

@media(max-width:840px){
  /* Schwebende Navy-Karte statt Vollbreite-Streifen */
  .nav-links{
    top:68px;left:12px;right:12px;
    border-radius:18px;
    background:linear-gradient(170deg,#07324a 0%,var(--navy,#002e48) 65%,#00263c 100%);
    border:1px solid rgba(255,255,255,.10);
    border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 30px 70px rgba(0,18,30,.55);
    padding:10px;gap:2px;
  }
  .nav-links.open{animation:pMenuIn .25s ease both}
  .nav-links.open li{animation:pItemIn .35s cubic-bezier(.22,1,.36,1) both}
  .nav-links.open li:nth-child(2){animation-delay:.04s}
  .nav-links.open li:nth-child(3){animation-delay:.08s}
  .nav-links.open li:nth-child(4){animation-delay:.12s}
  .nav-links.open li:nth-child(5){animation-delay:.16s}
  .nav-links.open li:nth-child(6){animation-delay:.20s}
  .nav-links li:not(:last-child){border-bottom:1px solid rgba(255,255,255,.07)}

  /* Menüzeilen: klar, mit Pfeil rechts + sauberem Tipp-Feedback */
  .nav-links a{
    display:flex;align-items:center;justify-content:flex-start;
    font-size:15px;font-weight:600;letter-spacing:.01em;
    color:rgba(255,255,255,.85);
    padding:14px 16px;border-radius:12px;
    border:1px solid transparent;
    -webkit-tap-highlight-color:transparent;
    transition:background .22s ease,border-color .22s ease,color .22s ease,transform .12s ease;
  }
  /* Akzent-Balken, der beim Antippen/Hover hereingleitet */
  .nav-links a::before{
    content:'';display:block;width:0;height:18px;border-radius:3px;
    background:linear-gradient(180deg,#9ddcff,var(--sky,#1a8ab8));
    opacity:0;margin-right:0;
    transition:width .22s ease,opacity .22s ease,margin-right .22s ease;
  }
  .nav-links a::after{
    content:'→';position:static;display:inline;width:auto;height:auto;
    background:none;transform:none;border-radius:0;
    margin-left:auto;
    color:rgba(157,220,255,.45);font-size:16px;font-weight:400;
    transition:translate .2s ease,color .2s ease;
  }
  .nav-links a:hover,.nav-links a:active{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.10);
    color:#fff;
  }
  .nav-links a:hover::before,.nav-links a:active::before,.nav-links a.pOn::before{
    width:3px;opacity:1;margin-right:11px;
  }
  .nav-links a:hover::after,.nav-links a:active::after{translate:3px 0;color:#9ddcff}
  .nav-links a:active{transform:scale(.98)}
  .nav-links a:focus-visible{outline:2px solid #9ddcff;outline-offset:2px}
  .nav-links a.pOn{background:rgba(255,255,255,.12);color:#fff}
  /* CTA: gleiches Druck-Feedback */
  .nav-links a.pMenuCta::before{display:none}
  .nav-links a.pMenuCta:active{transform:scale(.98)}

  /* CTA im Menü: weiß, volle Breite */
  .pMenuCtaLi{display:block;margin-top:8px;border-bottom:none!important}
  .nav-links a.pMenuCta{
    display:inline-flex;justify-content:center;width:100%;
    background:#fff;color:var(--navy,#002e48);
    font-weight:700;padding:14px;border-radius:12px;
    box-shadow:0 10px 24px rgba(0,18,30,.35);
  }
  .nav-links a.pMenuCta::after{display:none}
  .nav-links a.pMenuCta:hover{background:var(--sky-lt,#e6f4fb);color:var(--navy,#002e48)}
}
@keyframes pMenuIn{from{opacity:0;translate:0 -10px}}
@keyframes pItemIn{from{opacity:0;translate:0 -7px}}
@media(prefers-reduced-motion:reduce){
  .nav-links.open,.nav-links.open li{animation:none!important}
}
/* Innenseiten: Luft unter der Navigation */
.pg-hero{padding-top:clamp(92px,12vw,122px)}
/* Am Handy: Abstand zwischen Leiste und AFANDI-Chip */
@media(max-width:640px){
  .hero-home{padding-top:104px}
}

/* ── Hero-Block bleibt NEBEN dem Text (statt darunter) ── */
@media(min-width:861px) and (max-width:1040px){
  .hero-home__grid{grid-template-columns:minmax(0,1fr) minmax(270px,330px);align-items:center}
  .hero-home__visual{display:flex;justify-content:center;padding-top:0}
  .hero-panel{max-width:330px}
}

/* ── Hero-Bühne um das bestehende Panel ── */
.pHeroWrap{position:relative}
.pHeroWrap > .hero-panel{position:relative;z-index:2}
.pHeroFx{position:absolute;inset:0;pointer-events:none;z-index:3}

/* Rotierender Orbit-Ring (hinter dem Panel) */
.pOrbit{
  position:absolute;width:430px;height:430px;border-radius:50%;
  border:1.5px dashed rgba(0,46,72,.20);
  left:50%;top:50%;margin:-215px 0 0 -215px;
  z-index:-1;
  animation:pSpin 30s linear infinite;
}
.pOrbit::after{
  content:'';position:absolute;top:-6px;left:50%;
  width:11px;height:11px;border-radius:50%;
  background:var(--sky,#1a8ab8);
  box-shadow:0 0 0 6px rgba(26,138,184,.16);
}

/* Runder Sticker */
.pSticker{
  position:absolute;right:-26px;top:-34px;
  width:92px;height:92px;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  background:linear-gradient(135deg,var(--sky,#1a8ab8),var(--navy,#002e48));
  color:#fff;font-weight:800;font-size:12px;line-height:1.3;
  transform:rotate(8deg);
  box-shadow:0 14px 30px rgba(0,46,72,.28);
  animation:pFloatY 5.5s ease-in-out infinite;
}

/* Schwebende Glas-Karten */
.pFloat{
  position:absolute;max-width:200px;padding:11px 14px;
  border-radius:var(--r16,16px);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--border2,#c8dbe6);
  box-shadow:var(--sh3,0 12px 40px rgba(0,46,72,.14));
  font-size:12.5px;line-height:1.45;color:var(--muted,#4b6275);
  animation:pFloatY 4.6s ease-in-out infinite;
}
.pFloat strong{
  display:block;font-size:14px;font-weight:800;
  color:var(--navy,#002e48);margin-bottom:2px;
}
.pF1{left:-168px;top:-20px}
.pF2{right:-34px;bottom:-24px;animation-delay:-2.2s}

/* ── Gestaffelter Hero-Einstieg (nur Startseite) ── */
.pl{opacity:0;translate:0 22px;transition:opacity .65s cubic-bezier(.22,1,.36,1),translate .65s cubic-bezier(.22,1,.36,1)}
.pl.pl-in{opacity:1;translate:0 0}

/* ── Animationen ── */
@keyframes pSpin{to{transform:rotate(360deg)}}
@keyframes pFloatY{50%{translate:0 -10px}}

/* ── Responsiv ── */
@media(max-width:1040px){
  .pOrbit{width:340px;height:340px;margin:-170px 0 0 -170px}
  .pSticker{right:-8px;top:-24px;width:76px;height:76px;font-size:10.5px}
  .pF1{left:-6px;top:-52px}
  .pF2{right:-6px;bottom:-16px}
}
/* Ab 640px blendet die Seite die Hero-Grafik aus – Effekte folgen automatisch. */

/* ── Reduzierte Bewegung: alles ruhigstellen ── */
@media(prefers-reduced-motion:reduce){
  .pOrbit,.pSticker,.pFloat{animation:none!important}
  .pl{opacity:1!important;translate:none!important;transition:none!important}
}