/* CI nach media-motion-ki-coaching.netlify.app (gemessen 11.10.2026): Inter + Archivo (SIL OFL), #0a0b0e / #f4f5f7 / #c8ff2e / #7c5cff */
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:17px/1.65 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(60vmax 60vmax at 100% -10%,rgba(124,92,255,.22),transparent 60%),radial-gradient(50vmax 50vmax at -10% 110%,rgba(200,255,46,.10),transparent 60%);background-attachment:fixed}
a{color:var(--ak)}
::selection{background:var(--ak);color:#0a0b0e}
.demo{background:#ff5a36;color:#0a0b0e;font-size:13px;font-weight:700;text-align:center;padding:6px 12px;letter-spacing:.02em}
.kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;background:rgba(10,11,14,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--tx);min-width:0}
.marke img{height:30px;width:auto;display:block}
.marke-zusatz{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);border-left:1px solid var(--line);padding-left:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--ak);color:#0a0b0e;text-decoration:none;padding:10px 20px;border-radius:999px;font-weight:800;min-height:44px;line-height:24px;transition:transform .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(200,255,46,.25)}
span.btn[data-offen]{cursor:help;outline:2px dashed rgba(255,90,54,.9);outline-offset:3px}
main{max-width:1100px;margin:0 auto;padding:32px 24px}
h1,h2,h3{font-family:var(--font-t)}
.hero{padding:40px 0 28px}
.hero h1{font-size:clamp(40px,7vw,84px);font-weight:800;font-stretch:78%;text-transform:uppercase;line-height:.98;letter-spacing:-.01em;margin:14px 0 18px}
.hero p{font-size:clamp(17px,2vw,21px);color:var(--mut);max-width:44rem;margin:0}
.kat{display:inline-flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:700;color:var(--ak)}
.kat::before{content:"";width:1.8rem;height:2px;background:var(--ak)}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:12px}
.karte{display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;color:var(--tx);padding-bottom:22px;transition:border-color .2s,transform .2s}
.karte:hover{border-color:var(--ak);transform:translateY(-3px)}
.karte img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:left top;display:block}
.karte .kat,.karte h2,.karte p{margin-left:22px;margin-right:22px}
.karte .kat{margin-top:18px}
.karte h2{font-size:24px;font-weight:700;font-stretch:85%;line-height:1.15;margin-top:10px;margin-bottom:8px}
.karte p{color:var(--mut);font-size:16px;margin-top:0}
/* CSS-Grafik statt Foto: Raster + Lichtflecken wie in der Vorlage */
.grafik{position:relative;aspect-ratio:16/9;overflow:hidden;background:#12141a;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;border-bottom:1px solid var(--line)}
.grafik i{position:absolute;border-radius:50%;filter:blur(30px)}
.grafik .g1{width:60%;height:110%;right:-12%;top:-35%;background:radial-gradient(circle,var(--ak2),transparent 65%);opacity:.75}
.grafik .g2{width:45%;height:80%;left:-8%;bottom:-35%;background:radial-gradient(circle,rgba(200,255,46,.7),transparent 65%);opacity:.45}
.grafik .g-kat{position:absolute;left:18px;bottom:16px;z-index:1;font-family:var(--font-t);font-weight:800;font-stretch:78%;text-transform:uppercase;font-size:clamp(22px,3.4vw,34px);line-height:1;color:var(--tx);max-width:80%}
.grafik .g-kat::after{content:"";display:block;width:48px;height:4px;background:var(--ak);margin-top:10px;box-shadow:0 0 14px rgba(200,255,46,.7)}
.grafik.gross{border-radius:20px;border:1px solid var(--line);margin:24px 0 8px}
.grafik.gross .g-kat{font-size:clamp(26px,5vw,48px);left:24px;bottom:22px}
.artikel{max-width:740px;margin:0 auto}
.artikel h1{font-size:clamp(32px,5.4vw,56px);font-weight:800;font-stretch:78%;text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;margin:14px 0 10px;overflow-wrap:break-word;hyphens:auto}
.artikel .meta{color:var(--mut);font-size:14px;margin:0}
.artikel h2{font-size:clamp(24px,3.4vw,32px);font-weight:700;font-stretch:85%;line-height:1.15;margin:44px 0 12px}
.artikel h2::before{content:"";display:block;width:36px;height:3px;background:var(--ak);margin-bottom:14px}
.artikel h3{font-size:20px;font-weight:700;font-stretch:90%;line-height:1.25;margin:26px 0 6px}
.artikel p,.artikel li{color:#d9dde5;overflow-wrap:break-word;hyphens:auto}
.artikel strong{color:var(--tx)}
.artikel ul,.artikel ol{padding-left:1.3em}
.artikel li{margin:6px 0}
.artikel ul li::marker{color:var(--ak)}
.artikel ol li::marker{color:var(--ak);font-weight:700}
.artikel h2#key-takeaways+ul,.artikel h2:first-of-type+ul{background:rgba(200,255,46,.06);border:1px solid rgba(200,255,46,.25);border-radius:16px;padding:18px 22px 18px 40px}
.titelbild{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:left top;border-radius:16px}
.cta{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);border-left:4px solid var(--ak);padding:20px 22px;margin:36px 0;border-radius:16px}
.cta p{margin:0 0 14px;font-weight:600;color:var(--tx)}
.cta .btn{white-space:normal}
.hinweis{font-size:14px;color:var(--mut)}
.quellen{font-size:14px;margin:24px 0;color:var(--mut);border:1px solid var(--line);border-radius:12px;padding:12px 16px;overflow-wrap:anywhere}
.quellen summary{cursor:pointer;font-weight:700;color:var(--tx)}
.zurueck{font-size:14px;text-decoration:none;display:block;margin-bottom:18px}
.fuss{text-align:center;font-size:14px;padding:36px 20px;color:var(--mut);border-top:1px solid var(--line);margin-top:40px}
.fuss a{color:var(--mut)}

.kopf-nav{display:flex;align-items:center;gap:18px}
.navlink{color:var(--mut);text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.navlink:hover{color:var(--ak)}
@media(max-width:600px){
  .kopf-nav{gap:10px}
  .navlink{font-size:11px;letter-spacing:.06em}
  body{font-size:16px}
  main{padding:20px 16px}
  .kopf{padding:10px 14px}
  .marke img{height:24px}
  .marke-zusatz{display:none}
  .kopf .btn{padding:8px 14px;font-size:14px;min-height:40px}
  .raster{grid-template-columns:1fr}
  .karte h2{font-size:21px}
  .artikel h1{font-size:30px}
}