:root { --bg:#0f1226; --bg-2:#151a33; --text:#eef1ff; --muted:#b9c0ff; --card:#1b2142aa; --card-border:1px solid #2a3162; --primary-1:#7b5bff; --primary-2:#ff7ad9; --primary-3:#ffd36b; --shadow:0 8px 24px hsl(238 65% 10% / .35); }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:radial-gradient(1200px 600px at 10% -10%,#2b235d,transparent),radial-gradient(1000px 500px at 100% -10%,#4c1d6f,transparent),var(--bg)}
.container{width:min(100% - 2rem, 1100px);margin-inline:auto}
.skip-link{position:absolute;left:-9999px;top:auto}.skip-link:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.5rem 1rem;border-radius:.5rem}
.site-header{position:relative;padding-block: 1.5rem 4.4rem;overflow:clip}
.blob{position:absolute;inset:auto 0 0 0;width:100%;height:140px;display:block;z-index: -1;pointer-events: none;}
.hero{text-align:center}.brand{font-size:clamp(2.2rem,3vw + 1rem,3.5rem);margin:0;font-weight:900;letter-spacing:.3px}.brand span{background:linear-gradient(90deg,var(--primary-1),var(--primary-2),var(--primary-3));-webkit-background-clip:text;background-clip:text;color:transparent}

.tagline{margin:2rem 0 1rem;color:var(--muted);font-size:1.1rem}.hero-badges{display:inline-flex;gap:.5rem;flex-wrap:wrap}.hero-badges span{background:linear-gradient(90deg,#2a2f63,#1f244e);border:var(--card-border);padding:.35rem .6rem;border-radius:999px;font-weight:700;color:#e6e9ff;box-shadow:var(--shadow)}
.tagline{margin:1.75rem 0 0.5rem;color:black;font-size:1.1rem}.hero-badges{display:inline-flex;gap:.5rem;flex-wrap:wrap}.hero-badges span{background:linear-gradient(90deg,#2a2f63,#1f244e);border:var(--card-border);padding:.35rem .6rem;border-radius:999px;font-weight:700;color:#e6e9ff;box-shadow:var(--shadow)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-block:2rem 1rem}
.card{background:linear-gradient(180deg,#202755aa,#161c3faa);border:var(--card-border);border-radius:16px;padding:1rem;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.card h2{margin:0 0 .25rem;font-size:1.4rem}.card p{margin:0 0 1rem;color:var(--muted)}
.actions{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.8rem}
.actions .row{display:flex;gap:.5rem;flex-wrap:wrap}

/* 3D Buttons ------------------------------------------------------------ */
.btn{--fg:#f3f5ff; --bg1:#4e54c8; --bg2:#8f94fb; --edge:#23265a; --shine:hsla(0,0%,100%,.35);
  position:relative; display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1rem; border-radius:14px; color:var(--fg); text-decoration:none; border:1px solid var(--edge);
  background: linear-gradient(180deg, var(--bg2), var(--bg1));
  box-shadow: 0 10px 0 #10143a, 0 12px 24px hsl(238 60% 10% / .5), inset 0 1px 0 var(--shine);
  transform: translateY(0); transition: transform .08s ease, filter .2s ease, box-shadow .08s ease;
}
.btn::after{content:""; position:absolute; inset:2px; border-radius:12px; background: radial-gradient(150% 60% at 50% 0%, rgba(255,255,255,.3), transparent 40%); pointer-events:none; mix-blend-mode:soft-light}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform: translateY(2px); box-shadow: 0 6px 0 #10143a, 0 8px 18px hsl(238 60% 10% / .45), inset 0 1px 0 var(--shine)}
.btn.primary{--bg1:#6a00f6; --bg2:#a800ff; --edge:#3a2fa0}
.btn.primary-alt{--bg1:#6a00aa; --bg2:#a80055; --edge:#3a2f55}
.btn.ghost{background: linear-gradient(180deg, #232a5a, #1a2049); border-color:#3a427e}

/* Thumbnails ------------------------------------------------------------ */
.thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:160px;gap:.75rem;overflow-x:auto;padding-bottom:.25rem;scroll-snap-type:x mandatory}
.thumbs .thumb{scroll-snap-align:start;display:block;border-radius:12px;overflow:hidden;border:1px solid #2a3162}
.thumbs img{display:block;width:100%;height:110px;object-fit:cover;background:#10132a}

/* Lightbox -------------------------------------------------------------- */
.lightbox{position:fixed;inset:0;display:none;place-items:center;background:hsl(233 60% 5% /.8);padding:2rem;z-index:50}
.lightbox:target{display:grid}
.lightbox figure{margin:0;background:#0f142d;border:1px solid #2f396f;border-radius:16px;box-shadow:var(--shadow);max-width:min(96vw,1100px)}

.lightbox img{width:100%;height:auto;display:block;border-bottom:1px solid #2f396f;border-top-left-radius:16px;border-top-right-radius:16px}
.lightbox figcaption{padding:.75rem 1rem;text-align:center;color:var(--muted)}

.lightbox .nav{position:fixed;z-index: 2;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,#3d4391,#242b6e);border:1px solid #4a53b0;color:#fff;text-decoration:none;font-size:28px;font-weight:900;box-shadow:0 10px 0 #13194a,0 12px 24px rgba(0,0,0,.4); cursor: pointer;}
.lightbox .close{position:fixed;inset:0;z-index: 1;background: transparent;}
.lightbox .nav:hover{filter:brightness(1.1)}
.lightbox .nav:active{transform:translateY(calc(-50% + 2px))}
.lightbox .nav.prev{left:2rem}
.lightbox .nav.next{right:2rem}

/* Type tester ----------------------------------------------------------- */
.type-tester{margin-block:3rem 2rem}
.type-tester h2{margin:0 0 .75rem}
.tester-controls{display:flex;gap:1rem;flex-wrap:wrap;margin:0 0 .75rem}
.tester-controls label{display:flex;flex-direction:column;gap:.25rem;min-width:160px}
#testerArea{width:100%;min-height:7rem;border-radius:12px;border:1px solid #2a3162;background:#0e1431;color:#f0f3ff;padding:1rem;font-family:"BlinkyDigits", system-ui, sans-serif}
.tester-note{color:#9aa3ff;margin-top:.5rem}

/* Webfonts: alle Stile, exakte Dateinamen wie angegeben ----------------- */
@font-face{font-family:'BlinkyPhysics';src:url('./schriftarten_files/BlinkyPhysics.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'BlinkyPhysics';src:url('./schriftarten_files/BlinkyPhysics-italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'BlinkyPhysics';src:url('./schriftarten_files/BlinkyPhysics-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'BlinkyPhysics';src:url('./schriftarten_files/BlinkyPhysicsBoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}

@font-face{font-family:'BlinkyMaths2';src:url('./schriftarten_files/BlinkyMaths2.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'BlinkyMaths2';src:url('./schriftarten_files/BlinkyMaths2-italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'BlinkyMaths2';src:url('./schriftarten_files/BlinkyMaths2-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'BlinkyMaths2';src:url('./schriftarten_files/BlinkyMaths2-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}

/* Optional: BlinkyDigits (bereits eingebunden) */
@font-face{font-family:'BlinkyDigits';src:url('/BlinkyDigits.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* Divider/Legal/Footer -------------------------------------------------- */
.divider{margin:2rem 0;border:none;height:1px;background:linear-gradient(90deg,transparent,#394084,transparent)}
.legal{text-align:center;margin-bottom:2rem}.legal a{color:#b7c0ff;text-underline-offset:3px}.legal a:hover{color:#fff}
.site-footer{border-top:1px solid #2a3162;background:#0e1226}.site-footer .container{padding:1rem;text-align:center;color:#9aa3ff}
@media (prefers-reduced-motion: reduce){.btn{transition:none}}