/* 26.10.2026 · Hero V3 „14 Tage. 30 Minuten. Dein Weg zum KI-Master.“ (Manuels Wahl) */
body.ah .ah-hero.hv3{position:relative;overflow:hidden;padding:0 !important;background:#050a18;isolation:isolate}
.hv3-bg{position:absolute;inset:0;z-index:0;margin:0;pointer-events:none}
.hv3-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hv3-bg::after{content:"";position:absolute;inset:0;background:
 radial-gradient(ellipse 34% 48% at 77% 44%,rgba(94,231,255,.16),transparent 70%),
 linear-gradient(90deg,rgba(5,10,24,.62) 0%,rgba(5,10,24,.28) 38%,transparent 60%),
 linear-gradient(180deg,transparent 78%,#080f26 100%)}
.hv3-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:24px;min-height:min(760px,calc(100svh - 86px));padding:clamp(40px,5vw,64px) 0 clamp(56px,6vw,84px)}
.hv3-copy{position:relative;z-index:3;max-width:700px}
body.ah .hv3 .hv3-badge{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 16px;border-radius:999px;font:700 12px/1.2 var(--f-sans,"AH Sans",Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#dbe6ff;border:1px solid rgba(94,231,255,.45);background:rgba(77,126,240,.12);box-shadow:0 0 22px rgba(94,231,255,.12)}
.hv3-badge::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#5ee7ff;box-shadow:0 0 10px #5ee7ff}
/* Hero-H1 only (11.11.2026, Variante C): Big Shoulders Display 900, uppercase poster / ice-white solid fill + gold metal plaque on „KI-MASTER.“ — exception to PM Serif 500. All other type unchanged. */
@font-face{font-family:"AH Hero Display";src:url("assets/fonts/big-shoulders-display-900-latin-ext.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"AH Hero Display";src:url("assets/fonts/big-shoulders-display-900-latin.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body.ah .hv3 .hv3-copy,body.ah .hv3 h1{overflow:visible}
body.ah .hv3 h1{margin:26px 0 0 !important;max-width:none;white-space:normal;font-family:"AH Hero Display","Big Shoulders Display",Impact,"Arial Narrow",sans-serif;font-weight:900;font-style:normal;font-size:clamp(42px,4.65vw,66px);line-height:.86;letter-spacing:-.01em;text-transform:uppercase;color:#f3f7ff;-webkit-text-fill-color:#f3f7ff;background:none;text-wrap:balance;font-synthesis:none;text-shadow:-1px -1px 0 rgba(6,12,28,.7),1px -1px 0 rgba(6,12,28,.7),-1px 1px 0 rgba(6,12,28,.7),1px 1px 0 rgba(6,12,28,.7)}
body.ah .hv3 h1 .hv3-l{display:block;white-space:nowrap;width:max-content;background:none;color:#f3f7ff;-webkit-text-fill-color:#f3f7ff;filter:none;-webkit-background-clip:initial;background-clip:initial}
body.ah .hv3 h1 .hv3-l:last-child{line-height:1;margin-top:.12em}
body.ah .hv3 h1 em{display:inline-block;font-style:normal !important;font-weight:900 !important;font-size:1.12em;line-height:1;letter-spacing:.07em;padding:.1em .24em .11em;white-space:nowrap;transform:none;color:#081018 !important;-webkit-text-fill-color:#081018 !important;background:linear-gradient(180deg,#fff8e0 0%,#ffe38a 16%,#f0c85a 48%,#c9972e 72%,#ffe9a8 100%) !important;-webkit-background-clip:padding-box !important;background-clip:padding-box !important;filter:none !important;text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -2px 0 rgba(110,74,8,.38),0 8px 22px rgba(226,182,83,.4);border-radius:3px}
body.ah .hv3 .hv3-sub{margin:26px 0 0 !important;font:400 clamp(19px,1.7vw,24px)/1.4 var(--f-sans,"AH Sans",Inter,sans-serif);color:#c7d1ea}
body.ah .hv3 .hv3-sub strong{font-weight:600;color:#f6e2a6}
body.ah .hv3 .hv3-line{margin:12px 0 0 !important;font:400 16px/1.55 var(--f-sans,"AH Sans",Inter,sans-serif);color:#8d99b8;max-width:560px}
.hv3-facts{list-style:none;margin:24px 0 0 !important;padding:0;display:flex;flex-wrap:wrap;gap:10px}
body.ah .hv3 .hv3-facts li{margin:0;display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:12px;font:500 14.5px/1 var(--f-sans,"AH Sans",Inter,sans-serif);color:#eef2fb;background:rgba(10,18,44,.72);border:1px solid rgba(94,231,255,.3)}
.hv3-facts i{flex:none;width:8px;height:8px;border-radius:50%;background:#5ee7ff;box-shadow:0 0 10px #5ee7ff}
.hv3-facts i.g{background:#eccb7f;box-shadow:0 0 10px #eccb7f}
.hv3-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
body.ah .hv3 .hv3-go{--h:58px;padding:0 30px;color:#06122a !important;font-weight:700;border:0;background:linear-gradient(95deg,#6ea0ff 0%,#5ee7ff 55%,#f6e2a6 100%);box-shadow:0 12px 34px -10px rgba(94,231,255,.6),inset 0 1px 0 rgba(255,255,255,.5)}
body.ah .hv3 .hv3-go:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 18px 44px -10px rgba(94,231,255,.75),0 0 50px rgba(94,231,255,.2)}
body.ah .hv3 .hv3-go:focus-visible,body.ah .hv3 .hv3-more:focus-visible{outline:3px solid #f6e2a6;outline-offset:3px}
body.ah .hv3 .hv3-more{--h:58px;padding:0 28px;background:rgba(255,255,255,.05)}
body.ah .hv3 .hv3-info{margin:16px 0 0 !important;text-wrap:balance;font:400 13.5px/1.5 var(--f-sans,"AH Sans",Inter,sans-serif);color:#8d99b8}
body.ah .hv3 .hv3-info b{color:#f6e2a6;font-weight:600}
body.ah .hv3 .hv1-ref{margin-top:10px}
/* Avi + Orbit */
.hv3-avi{position:relative;margin:0;align-self:stretch;display:flex;align-items:center;justify-content:center;padding-right:max(0px,calc(96px - (100vw - min(100vw - 2 * var(--pad,40px),var(--wrap,1200px))) / 2))}
.hv3-avi img{position:relative;z-index:2;display:block;width:auto;height:auto;max-width:100%;max-height:min(620px,72svh);filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.hv3-orbit{position:absolute;z-index:1;left:50%;top:50%;width:min(118%,820px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(94,231,255,.26);box-shadow:inset 0 0 80px rgba(77,126,240,.14);pointer-events:none}
.hv3-orbit::after{content:"";position:absolute;left:-12%;right:-12%;top:30%;bottom:30%;border-radius:50%;border:1px solid rgba(246,226,166,.18)}
@media (prefers-reduced-motion:no-preference){.hv3-avi img{animation:hv3-float 6s ease-in-out infinite}@keyframes hv3-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}}
/* Tablet/Mobil: gestapelt, Text zuerst, Avi darunter (frei von CTAs und Chat-Button) */
@media (max-width:900px){
 .hv3-grid{grid-template-columns:1fr;gap:8px;min-height:0;padding:36px 0 0}
 .hv3-copy{max-width:none}
 .hv3-bg img{object-position:70% 60%}
 .hv3-bg::after{background:radial-gradient(ellipse 60% 30% at 50% 82%,rgba(94,231,255,.16),transparent 70%),linear-gradient(180deg,rgba(5,10,24,.55) 0%,rgba(5,10,24,.25) 45%,transparent 65%,#080f26 100%)}
 .hv3-avi{padding:0 72px 0 0;justify-content:center;height:clamp(300px,80vw,460px);overflow:visible;margin-top:8px}
 .hv3-avi img{max-height:100%;max-width:min(78%,380px)}
 .hv3-orbit{width:min(92vw,440px);left:calc(50% - 36px)}
}
@media (max-width:760px){
 .hv3-grid{padding-top:28px}
 body.ah .hv3 .hv3-badge{font-size:10.5px;padding:6px 12px;letter-spacing:.12em}
 body.ah .hv3 h1{font-size:clamp(28px,8vw,40px);line-height:1.08;margin-top:18px;letter-spacing:-.04em}
 body.ah .hv3 h1 .hv3-l{display:inline-block;white-space:normal;width:auto;max-width:100%}
 body.ah .hv3 h1 .hv3-l::after{content:" "}
 body.ah .hv3 h1 .hv3-l:first-child{display:block}
 body.ah .hv3 h1 .hv3-l:first-child::after{content:none}
 body.ah .hv3 .hv3-sub{font-size:19px;margin-top:18px}
 body.ah .hv3 .hv3-line{font-size:15px}
 .hv3-facts{gap:8px;margin-top:18px}
 body.ah .hv3 .hv3-facts li{font-size:13px;padding:8px 11px}
 .hv3-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:24px}
 body.ah .hv3 .hv3-cta .ah-btn{width:100%;flex:none;--h:54px;justify-content:center;white-space:normal;text-align:center;line-height:1.2}
 body.ah .hv3 .hv3-info{font-size:12.5px}
 /* 26.10. Manuel: Avi mobil auf den ersten Blick sichtbar → kleiner Avi oben rechts neben „14 Tage. 30 Minuten.“, zeigt auf die Headline */
 .hv3-grid{padding-bottom:36px}
 body.ah .hv3 h1 .hv3-l:first-child{padding-right:var(--hv3-avi-w)}
 .hv3-grid{--hv3-avi-w:clamp(104px,31vw,128px)}
 .hv3-avi{position:absolute;z-index:2;top:52px;right:-8px;width:var(--hv3-avi-w);height:auto;padding:0;margin:0;overflow:visible;display:block;pointer-events:none}
 .hv3-avi img{width:100%;height:auto;max-width:none;max-height:none;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
 .hv3-orbit{width:150%;top:46%;left:50%}
 .hv3-orbit::after{display:none}
}
@media (max-width:360px){body.ah .hv3 h1{font-size:28px}}
@media (max-width:340px){.hv3-avi{top:70px}}

/* ═══ 26.10.2026 (Manuel): weicher Übergang Menü · Header · Lernpfad + gestaffelte Einblendung ═══ */
/* Header läuft unter das Menü (kein Farbstreifen oben) und blendet unten weich in den Seiten-Hintergrund aus */
body.ah .ah-hero.hv3{--hv3-nav:59px;margin-top:calc(-1 * var(--hv3-nav));padding-top:var(--hv3-nav) !important;background:transparent}
@media (min-width:760.02px){body.ah .ah-hero.hv3{--hv3-nav:71px}}
@media (min-width:900.02px){body.ah .ah-hero.hv3{--hv3-nav:76px}}
@media (min-width:1024px){body.ah .ah-hero.hv3{--hv3-nav:86px}}
.hv3-bg{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 48%,rgba(0,0,0,.97) 54%,rgba(0,0,0,.88) 61%,rgba(0,0,0,.74) 67%,rgba(0,0,0,.56) 73%,rgba(0,0,0,.38) 79%,rgba(0,0,0,.22) 84%,rgba(0,0,0,.1) 88%,rgba(0,0,0,.03) 92%,transparent 95%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 48%,rgba(0,0,0,.97) 54%,rgba(0,0,0,.88) 61%,rgba(0,0,0,.74) 67%,rgba(0,0,0,.56) 73%,rgba(0,0,0,.38) 79%,rgba(0,0,0,.22) 84%,rgba(0,0,0,.1) 88%,rgba(0,0,0,.03) 92%,transparent 95%,transparent 100%)}
.hv3-bg::after{background:
 radial-gradient(ellipse 34% 48% at 77% 44%,rgba(94,231,255,.16),transparent 70%),
 linear-gradient(180deg,rgba(13,24,64,.55) 0%,rgba(13,24,64,.18) 14%,transparent 28%),
 linear-gradient(90deg,rgba(9,16,42,.6) 0%,rgba(9,16,42,.26) 38%,transparent 60%),
 linear-gradient(180deg,transparent 52%,rgba(12,22,58,.32) 78%,rgba(13,24,62,.6) 100%)}
@media (max-width:900px){
 .hv3-bg{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.97) 58%,rgba(0,0,0,.88) 64%,rgba(0,0,0,.74) 70%,rgba(0,0,0,.56) 75%,rgba(0,0,0,.38) 80%,rgba(0,0,0,.22) 85%,rgba(0,0,0,.1) 89%,rgba(0,0,0,.03) 92%,transparent 95%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.97) 58%,rgba(0,0,0,.88) 64%,rgba(0,0,0,.74) 70%,rgba(0,0,0,.56) 75%,rgba(0,0,0,.38) 80%,rgba(0,0,0,.22) 85%,rgba(0,0,0,.1) 89%,rgba(0,0,0,.03) 92%,transparent 95%,transparent 100%)}
 .hv3-bg::after{background:
  radial-gradient(ellipse 60% 30% at 50% 82%,rgba(94,231,255,.14),transparent 70%),
  linear-gradient(180deg,rgba(13,24,64,.6) 0%,rgba(9,16,42,.5) 12%,rgba(9,16,42,.25) 45%,transparent 62%,rgba(13,24,62,.55) 100%)}
}
/* Lernpfad: kein eigener Hintergrund/Glow an der Naht – Seite läuft durch (26.10. nahtlos) */
body.ah .lpw::before{content:none}

/* Menü über dem Header: gläsern in Header-Navy, beim Scrollen dichter */
@media (max-width:1023.98px){
 body.ah .ah-top::before{background:linear-gradient(180deg,rgba(10,18,46,.5),rgba(10,18,46,.28));-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);transition:background-color .45s ease,opacity .45s ease}
 body.ah .ah-top{border-bottom-color:rgba(130,165,255,.08) !important;transition:border-color .45s ease,box-shadow .45s ease}
 body.ah .ah-top.is-scrolled::before{background:linear-gradient(180deg,rgba(9,15,38,.9),rgba(8,13,34,.86))}
 body.ah .ah-top.is-scrolled{border-bottom-color:rgba(130,165,255,.14) !important;box-shadow:0 10px 30px -12px rgba(0,0,0,.55) !important}
}
@media (min-width:1024px){
 body.ah .nv2 .ah-top-inner{background:radial-gradient(120% 160% at 50% -60%,rgba(94,231,255,.12),transparent 55%),linear-gradient(180deg,rgba(18,30,72,.5),rgba(9,15,40,.52))}
}

/* Gestaffelte Einblendung (nur wenn Bewegung erlaubt) + langsamer Headline-Shimmer */
@media (prefers-reduced-motion:no-preference){
 @keyframes hv3-in{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
 @keyframes hv3-in-avi{from{opacity:0;transform:translate3d(0,26px,0) scale(.97)}to{opacity:1;transform:none}}
 @keyframes hv3-bg-in{from{opacity:.35;transform:scale(1.035)}to{opacity:1;transform:none}}
 @keyframes hv3-headline-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
 .hv3-bg img{animation:hv3-bg-in 1.6s cubic-bezier(.16,1,.3,1) both}
 .hv3-copy > *,.hv3-avi{animation:hv3-in .95s cubic-bezier(.16,1,.3,1) both}
 .hv3-copy > .hv3-badge{animation-delay:.08s}
 .hv3-copy > h1{animation-delay:.16s}
 .hv3-copy > .hv3-sub{animation-delay:.42s}
 .hv3-copy > .hv3-line{animation-delay:.52s}
 .hv3-copy > .hv3-facts{animation-delay:.62s}
 .hv3-copy > .hv3-cta{animation-delay:.74s}
 .hv3-copy > .hv3-info{animation-delay:.86s}
 .hv3-copy > :nth-child(n+8){animation-delay:.94s}
 .hv3-avi{animation-name:hv3-in-avi;animation-duration:1.2s;animation-delay:.3s}
 body.ah .hv3 h1 .hv3-l,body.ah .hv3 h1 em{animation:hv3-headline-shimmer 14s ease-in-out 1.2s infinite}
 /* Desktop: Headline Zeile für Zeile, danach Shimmer */
 @media (min-width:760.02px){
  .hv3-copy > h1{animation:none}
  body.ah .hv3 h1 .hv3-l{animation:hv3-in .95s cubic-bezier(.16,1,.3,1) both,hv3-headline-shimmer 14s ease-in-out 1.2s infinite}
  body.ah .hv3 h1 .hv3-l:nth-child(1){animation-delay:.16s,1.2s}
  body.ah .hv3 h1 .hv3-l:nth-child(2){animation-delay:.26s,1.3s}
  body.ah .hv3 h1 .hv3-l:nth-child(3){animation-delay:.36s,1.4s}
  body.ah .hv3 h1 em{animation:hv3-headline-shimmer 14s ease-in-out 1.4s infinite}
 }
}

/* Variante C: condensed poster — tight leading, solid fill, no gradient shimmer */
@media (max-width:760px){
 body.ah .hv3 h1{font-size:clamp(32px,8.6vw,44px);letter-spacing:-.01em;line-height:.9;text-transform:uppercase}
 body.ah .hv3 h1 em{font-size:1.08em;letter-spacing:.06em;padding:.08em .18em .09em}
}
@media (max-width:360px){body.ah .hv3 h1{font-size:30px}}
@media (prefers-reduced-motion:no-preference){
 body.ah .hv3 h1 .hv3-l,body.ah .hv3 h1 em{animation:hv3-in .95s cubic-bezier(.16,1,.3,1) both}
 @media (min-width:760.02px){
  body.ah .hv3 h1 .hv3-l:nth-child(1){animation-delay:.16s}
  body.ah .hv3 h1 .hv3-l:nth-child(2){animation-delay:.26s}
  body.ah .hv3 h1 .hv3-l:nth-child(3){animation-delay:.36s}
  body.ah .hv3 h1 em{animation:none}
 }
}