/* RWE AI experts videos
   Komponenten nach styleguide.html des Pakets horvath-ai-design; Werte kommen aus tokens.css. */

/* ── Schriften (selbst ausgeliefert, nur Latin) ── */
@font-face{font-family:"Archivo";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}

/* ── Grundlagen ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2{font-family:var(--font-display);color:var(--petrol);letter-spacing:var(--ls-tight);line-height:1.15}
img,svg,video{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad)}

/* ── Hero ── */
#top{position:relative;overflow:hidden;overflow:clip;color:var(--on-petrol);background:var(--grad-hero);padding:44px 0 88px}
#top canvas.net{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#top .wrap{position:relative;z-index:2}
.lockup{display:flex;align-items:center;gap:20px}
.lockup img{display:block;height:46px;width:auto;flex:none}
.lockup-sep{flex:none;font-family:var(--font-body);font-size:22px;font-weight:500;line-height:1;color:var(--on-petrol-soft)}
#top h1{margin-top:72px;color:var(--on-petrol);font-size:var(--fs-h1);font-weight:800;text-wrap:balance}
.hero-lead{margin-top:18px;max-width:60ch;font-size:var(--fs-lead);line-height:1.7;color:var(--on-petrol-soft)}
.hero-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.hero-chip{display:inline-flex;gap:9px;font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--on-petrol);text-decoration:none;
  border:1px solid var(--accent-line);background:var(--accent-wash);border-radius:var(--radius-chip);padding:9px 16px;
  transition:background var(--dur-hover),border-color var(--dur-hover),transform var(--dur-hover)}
.hero-chip:hover{background:var(--accent-wash-hover);border-color:var(--accent);transform:translateY(-2px)}
.hero-chip:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ── Kapitel ── */
.chapter{padding:var(--section-pad-y) 0}
.chapter.alt{background:var(--card)}
.chapter-head{margin-bottom:36px}
.chapter h2{font-size:var(--fs-h2);font-weight:800;margin-bottom:8px}
.sec-note{color:var(--text-soft);font-size:14px;max-width:72ch;margin-bottom:14px;text-wrap:pretty}
.lead{font-size:var(--fs-lead);line-height:1.7;max-width:60ch;text-wrap:pretty}

/* ── Video ── */
.video-card{position:relative;aspect-ratio:16/9;background:var(--petrol-deep);border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--line)}
.video-card video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:var(--petrol-deep)}
.video-card video[hidden]{display:none}
.play-overlay{display:none}
html.js .play-overlay{display:grid;place-items:center;position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;cursor:pointer;color:var(--accent);
  background:linear-gradient(180deg,rgba(3,43,61,0) 55%,rgba(3,43,61,.4))}
.play-overlay[hidden]{display:none!important}
.play-disc{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--petrol);border:2px solid var(--accent);
  box-shadow:var(--shadow-btn);transition:background var(--dur-hover)}
.play-disc svg{margin-left:4px}
.play-overlay:hover .play-disc,.play-overlay:focus-visible .play-disc{background:var(--petrol-mid)}
.play-overlay:focus-visible{outline:3px solid var(--accent);outline-offset:-6px}
.video-fallback{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;
  background:var(--petrol-deep);color:var(--on-petrol)}
.video-fallback[hidden]{display:none}
.video-fallback a{color:var(--accent);text-underline-offset:3px}

.video-meta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.video-meta{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--petrol)}
.demo-btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;text-decoration:none;
  font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--on-petrol);background:var(--petrol);border:none;border-radius:var(--radius-btn);padding:11px 20px;
  transition:background var(--dur-hover),transform var(--dur-hover)}
.demo-btn:hover{background:var(--petrol-mid);transform:translateY(-2px)}
.demo-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.demo-btn svg{color:var(--accent);flex:none}

/* ── Footer ── */
footer{background:var(--petrol-deep);color:var(--on-petrol-muted);padding:32px 0;font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}

/* ── Schmale Anzeige ── */
@media (max-width:760px){
  :root{--wrap-pad:20px;--section-pad-y:64px}
  #top{padding-bottom:64px}
  .lockup{gap:14px}
  #top h1{margin-top:48px}
  .play-disc{width:68px;height:68px}
}

/* ── Bewegung ── */
.progress{position:fixed;top:0;left:0;right:0;z-index:100;height:3px;background:var(--grad-accent);transform:scaleX(0);transform-origin:left;pointer-events:none}

html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-reveal) var(--ease-reveal),transform var(--dur-reveal) var(--ease-reveal)}
html.js .reveal.in{opacity:1;transform:none}

/* ── Druck und weniger Bewegung ── */
@media print{
  html.js .reveal{opacity:1;transform:none}
  .progress{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
  html.js .reveal{opacity:1!important;transform:none!important}
}