/* HIL AI Builder Academy · Woche 1 · Glossy-Deck · Brand 2026 (Navy/Berry, Oswald/Archivo) */

@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('oswald-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('archivo-400.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('archivo-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('archivo-700.woff2') format('woff2')}

:root{
  --navy:#1C2B40;
  --berry:#A61E4D;
  --berry-soft:#C43A69;
  --paper:#FAFAF8;
  --panel:#F0EFEC;
  --navy-70:rgba(28,43,64,.7);
  --navy-60:rgba(28,43,64,.6);
  --navy-40:rgba(28,43,64,.4);
  --navy-25:rgba(28,43,64,.25);
  --navy-15:rgba(28,43,64,.15);
  --navy-08:rgba(28,43,64,.08);
  --paper-70:rgba(250,250,248,.7);
  --paper-40:rgba(250,250,248,.4);
  --paper-25:rgba(250,250,248,.25);
  --paper-12:rgba(250,250,248,.12);
  --paper-06:rgba(250,250,248,.06);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#0d1524;overflow:hidden;
  font-family:'Archivo',system-ui,sans-serif;color:var(--navy);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- Bühne: festes 1280x720-Raster, skaliert auf den Viewport ---------- */
.stage-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 600px at 50% 120%,rgba(166,30,77,.18),transparent 60%),#0d1524}
.stage{position:relative;width:1280px;height:720px;background:var(--paper);
  transform-origin:center center;overflow:hidden;
  box-shadow:0 30px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04)}

/* ---------- Folien ---------- */
.slide{position:absolute;inset:0;padding:64px 84px 58px;display:none;flex-direction:column;
  align-items:flex-start;background:var(--paper);overflow:hidden}
.slide.active{display:flex;animation:slideIn .6s var(--ease) both}
@keyframes slideIn{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}

/* Dunkle Folien (Titel, Breaker) mit Licht */
.slide.dark{color:var(--paper);justify-content:center;padding:64px 96px;
  background:
    radial-gradient(1100px 640px at 88% 8%,rgba(250,250,248,.10),transparent 62%),
    radial-gradient(900px 620px at 6% 104%,rgba(166,30,77,.42),transparent 62%),
    linear-gradient(160deg,#233650 0%,#1C2B40 55%,#15223a 100%)}
.slide.berry{color:var(--paper);justify-content:center;padding:64px 96px;
  background:
    radial-gradient(1000px 600px at 90% 6%,rgba(250,250,248,.16),transparent 60%),
    radial-gradient(800px 520px at 4% 100%,rgba(28,43,64,.35),transparent 60%),
    linear-gradient(160deg,#B3275A 0%,#A61E4D 55%,#8f1a42 100%)}
.slide.dark .kicker,.slide.berry .kicker{color:var(--paper-70)}
.slide.berry .dot{color:var(--paper)}

/* Körnung, damit die Verläufe nicht nach Bildschirm aussehen */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- Festes Kopf-Raster: Logo, Kicker, Headline immer an derselben Position ---------- */
.brandbar{position:absolute;top:34px;left:84px;right:84px;display:flex;align-items:center;
  justify-content:space-between;pointer-events:none;z-index:3}
.brandbar img{height:26px;display:block}   /* 3,6 % der Bühnenhöhe, nie kleiner */
.brandbar .tag{font:500 11px/1 'Archivo';letter-spacing:.18em;text-transform:uppercase;color:var(--navy-40)}
.slide.dark .brandbar .tag,.slide.berry .brandbar .tag{color:var(--paper-40)}

.kicker{font:500 13px/1 'Archivo';letter-spacing:.22em;text-transform:uppercase;
  color:var(--berry);margin:36px 0 14px;position:relative;z-index:2}
.slide h1{font:500 84px/1.02 'Oswald';text-transform:uppercase;letter-spacing:.01em;position:relative;z-index:2}
.slide h2{font:500 40px/1.12 'Oswald';text-transform:uppercase;letter-spacing:.01em;margin:0 0 8px;
  position:relative;z-index:2;min-height:45px}
.slide h2.big{font-size:56px;line-height:1.06}
.dot{color:var(--berry)}
.slide.dark .dot{color:var(--berry-soft)}

.content{width:100%;flex:1;display:flex;flex-direction:column;margin-top:26px;min-height:0;position:relative;z-index:2}
.lead{font:400 19px/1.5 'Archivo';color:var(--navy-60);max-width:900px}
.slide.dark .lead,.slide.berry .lead{color:var(--paper-70)}

/* Einstiegs-Animation der Kopfzeile bei jedem Folienwechsel */
.active .kicker{animation:rise .7s var(--ease-out) both}
.active h1,.active h2{animation:riseBlur .9s var(--ease-out) .08s both}
.active .lead{animation:rise .8s var(--ease-out) .22s both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes riseBlur{from{opacity:0;transform:translateY(22px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}

/* Lichtstreifen, der einmal durch die Buchstaben der Titelzeile läuft */
.shine{background:linear-gradient(105deg,var(--paper) 0%,var(--paper) 42%,#fff 50%,var(--paper) 58%,var(--paper) 100%);
  background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep 2.4s var(--ease) 1.1s 1 both}
@keyframes sweep{from{background-position:100% 0}to{background-position:0% 0}}

/* ---------- Fragmente: jeder Klick ein Schritt ---------- */
.active [data-step]{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-out),filter .6s}
.active [data-step].on{opacity:1;transform:none}
.active .card[data-step]{transform:translateY(22px) scale(.985)}
.active .card[data-step].on{transform:none}
.active .from-left[data-step]{transform:translateX(-26px)}
.active .from-right[data-step]{transform:translateX(26px)}
.active .pop[data-step]{transform:scale(.6)}
.active .pop[data-step].on{transform:none}

/* Stufenweiser Einzug für Inhalt ohne Klick-Schritte */
.active .in{animation:rise .8s var(--ease-out) both;animation-delay:calc(.28s + var(--i,0)*.12s)}

/* ---------- Bausteine ---------- */
.cards{display:grid;gap:18px;width:100%}
.cards.c2{grid-template-columns:1fr 1fr}
.cards.c3{grid-template-columns:1fr 1fr 1fr}
.cards.c4{grid-template-columns:1fr 1fr 1fr 1fr}
.card{background:#fff;border:1px solid var(--navy-15);border-radius:16px;padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:8px;position:relative;
  box-shadow:0 18px 40px -24px rgba(28,43,64,.35),0 1px 0 rgba(255,255,255,.8) inset}
.card .label{font:500 11px/1 'Archivo';letter-spacing:.16em;text-transform:uppercase;color:var(--navy-40)}
.card h3{font:500 22px/1.15 'Oswald';text-transform:uppercase}
.card p{font:400 14.5px/1.5 'Archivo';color:var(--navy-60)}
.card .sub{font:500 11px/1 'Archivo';letter-spacing:.14em;text-transform:uppercase;color:var(--berry);margin-top:6px}
.card ul{list-style:none;display:flex;flex-direction:column;gap:5px;margin-top:2px}
.card ul li{position:relative;padding-left:14px;font:400 13px/1.4 'Archivo';color:var(--navy-60)}
.card ul li::before{content:'';position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--berry)}
.card.navy{background:linear-gradient(160deg,#243852,#1C2B40);border-color:transparent;color:var(--paper)}
.card.navy h3,.card.navy .label{color:var(--paper)}
.card.navy p{color:var(--paper-70)}
.card.panel{background:var(--panel);border-color:transparent;box-shadow:none}
.card.accent{border-color:var(--berry);box-shadow:0 0 0 1px var(--berry),0 24px 50px -24px rgba(166,30,77,.45)}
.slide.dark .card{background:var(--paper-06);border-color:var(--paper-12);box-shadow:none;color:var(--paper);backdrop-filter:blur(6px)}
.slide.dark .card h3{color:var(--paper)}
.slide.dark .card p{color:var(--paper-70)}

.rows{display:flex;flex-direction:column;width:100%}
.row{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start;
  padding:17px 0;border-top:1px solid var(--navy-15)}
.row:last-child{border-bottom:1px solid var(--navy-15)}
.row .term{font:500 20px/1.2 'Oswald';text-transform:uppercase}
.row .desc{font:400 15.5px/1.5 'Archivo';color:var(--navy-60);padding-top:2px}

.num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--navy);font:500 15px/1 'Archivo';margin-right:18px;vertical-align:middle;flex:none}
.num.fill{background:var(--berry);border-color:var(--berry);color:var(--paper)}

.bignum{font:500 120px/1 'Oswald';color:var(--berry)}
.stat .bignum{font-size:72px}
.stat .cap{font:400 14px/1.45 'Archivo';color:var(--navy-60);margin-top:8px}
.stat .cap b{display:block;font:500 11px/1.3 'Archivo';letter-spacing:.14em;text-transform:uppercase;color:var(--navy-40);margin-bottom:6px}

ul.b{list-style:none;display:flex;flex-direction:column;gap:14px}
ul.b li{position:relative;padding-left:28px;font:400 18px/1.5 'Archivo';color:var(--navy)}
ul.b li::before{content:'';position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--berry)}
.slide.dark ul.b li{color:var(--paper)}
.slide.dark ul.b li::before{background:var(--berry-soft)}

.panelstrip{background:var(--panel);border-radius:12px;padding:16px 24px;display:flex;
  gap:34px;align-items:center;justify-content:space-between;width:100%;font:400 14px/1.45 'Archivo';color:var(--navy-60)}
.navybox{background:linear-gradient(160deg,#243852,#1C2B40);color:var(--paper);border-radius:16px;padding:24px 30px}
.navybox h3{font:500 22px/1.2 'Oswald';text-transform:uppercase;margin-bottom:6px}
.navybox p{font:400 15px/1.5 'Archivo';color:var(--paper-70)}

.src{position:absolute;left:84px;bottom:54px;font:400 12px/1.4 'Archivo';color:var(--navy-40);max-width:900px;z-index:2}
.slide.dark .src{color:var(--paper-40)}

.foot{position:absolute;left:84px;right:84px;bottom:26px;display:flex;align-items:center;
  justify-content:space-between;font:500 11px/1 'Archivo';letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy-40);pointer-events:none;z-index:3}
.slide.dark .foot,.slide.berry .foot{color:var(--paper-40)}

.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--navy-15);font:500 13px/1 'Archivo';color:var(--navy);white-space:nowrap;
  box-shadow:0 10px 24px -16px rgba(28,43,64,.5)}
.chip.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500}
.chip.berry{background:var(--berry);border-color:var(--berry);color:var(--paper)}
.chip.navy{background:var(--navy);border-color:var(--navy);color:var(--paper)}

/* ---------- Dauerbewegung ---------- */
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx .glow{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.fx .g1{width:760px;height:760px;right:-260px;top:-300px;background:radial-gradient(circle,rgba(250,250,248,.16),transparent 62%);animation:driftA 22s ease-in-out infinite alternate}
.fx .g2{width:640px;height:640px;left:-220px;bottom:-260px;background:radial-gradient(circle,rgba(166,30,77,.55),transparent 62%);animation:driftB 27s ease-in-out infinite alternate}
.slide.berry .fx .g2{background:radial-gradient(circle,rgba(28,43,64,.55),transparent 62%)}
.fx.light .g1{background:radial-gradient(circle,rgba(166,30,77,.10),transparent 62%)}
.fx.light .g2{background:radial-gradient(circle,rgba(28,43,64,.10),transparent 62%)}
.fx .ring{position:absolute;border:1.5px solid var(--paper-12);border-radius:50%}
.fx .ring.r1{width:620px;height:620px;right:-160px;top:-210px;animation:driftA 26s ease-in-out infinite alternate}
.fx .ring.r2{width:360px;height:360px;right:60px;bottom:-150px;border-color:rgba(250,250,248,.08);animation:driftB 21s ease-in-out infinite alternate}
.fx .ring.r3{width:200px;height:200px;left:-80px;bottom:130px;border-color:rgba(250,250,248,.09);animation:driftC 18s ease-in-out infinite alternate}
.fx .cross{position:absolute;background:var(--paper-12)}
.fx .cross.v{width:1.5px;height:150px;right:149px;top:-50px;animation:driftA 26s ease-in-out infinite alternate}
.fx .bdot{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--berry);
  right:136px;top:88px;box-shadow:0 0 0 0 rgba(166,30,77,.55);animation:pulseDot 4.5s ease-in-out infinite}
.slide.berry .fx .bdot{background:var(--paper);box-shadow:0 0 0 0 rgba(250,250,248,.5)}
@keyframes driftA{from{transform:translate(0,0) scale(1)}to{transform:translate(-38px,28px) scale(1.06)}}
@keyframes driftB{from{transform:translate(0,0)}to{transform:translate(32px,-26px)}}
@keyframes driftC{from{transform:translate(0,0)}to{transform:translate(20px,16px)}}
@keyframes pulseDot{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(166,30,77,.55)}50%{transform:scale(1.14);box-shadow:0 0 0 22px rgba(166,30,77,0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}

/* Lebender Berry-Punkt in Headlines */
.dot.live{display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--berry);
  margin-left:.06em;vertical-align:baseline;animation:pulseDot 4.5s ease-in-out infinite}
.slide.berry .dot.live{background:var(--paper);animation:none}

/* ---------- SVG-Zeichnungen (Linien, die sich ziehen) ---------- */
.draw{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.4s var(--ease)}
.on .draw,.draw.on,.active .auto.draw{stroke-dashoffset:0}
.active .auto.draw{transition-delay:.5s}
.bar{transform-origin:left center;transform:scaleX(0);transition:transform 1.1s var(--ease-out)}
.on .bar,.bar.on,.active .auto.bar{transform:scaleX(1)}
.barv{transform-origin:center bottom;transform:scaleY(0);transition:transform 1.1s var(--ease-out)}
.on .barv,.barv.on,.active .auto.barv{transform:scaleY(1)}
.flow{stroke-dasharray:6 10;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-32}}

/* ---------- Navigation ---------- */
.dots{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:7px;z-index:40}
.dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;transition:.25s}
.dots span.cur{background:var(--berry);transform:scale(1.4)}
.pagenum{position:fixed;right:18px;bottom:12px;font:500 11px/1 'Archivo';letter-spacing:.14em;
  color:rgba(255,255,255,.4);z-index:40}
.hint{position:fixed;left:18px;bottom:12px;font:500 11px/1 'Archivo';letter-spacing:.14em;
  color:rgba(255,255,255,.25);z-index:40;text-transform:uppercase}
.stepbar{position:fixed;left:0;top:0;height:3px;background:var(--berry);width:0;transition:width .5s var(--ease);z-index:60}

/* ---------- Tonspur (Taste N) ---------- */
.notes{display:none}
.notesbox{position:fixed;left:50%;bottom:46px;transform:translateX(-50%);width:min(900px,86vw);max-height:38vh;overflow:auto;
  background:rgba(13,21,36,.94);color:#eef2f7;border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:16px 22px;font:400 15px/1.55 'Archivo';z-index:50;display:none;backdrop-filter:blur(10px)}
.notesbox.show{display:block}
.notesbox .nlabel{font:500 10px/1 'Archivo';letter-spacing:.2em;text-transform:uppercase;color:var(--berry-soft);margin-bottom:6px}
.notesbox p+p{margin-top:8px}