@font-face{font-family:"Archivo";src:url(/fonts/archivo-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jbmono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --grund:#0E1317;--flaeche:#161D23;--linie:#242E36;
  --schrift:#E4EAEF;--weich:#A2B0BC;--blass:#75838F;
  --tuerkis:#4FC3C1;--lila:#A392D9;--bordeaux:#E0705F;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --kopf:"Archivo",system-ui,sans-serif;
  --text:system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--grund);color:var(--schrift);font-family:var(--text);
  min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden;-webkit-font-smoothing:antialiased}

.raster{position:fixed;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--linie) 1px,transparent 1px),linear-gradient(90deg,var(--linie) 1px,transparent 1px);
  background-size:56px 56px;opacity:.35;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 75%)}
.glut{position:fixed;width:70vmax;height:70vmax;left:50%;top:45%;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(circle at 35% 40%,rgba(79,195,193,.16),transparent 55%),
             radial-gradient(circle at 68% 62%,rgba(163,146,217,.14),transparent 55%);
  filter:blur(20px);animation:atem 14s ease-in-out infinite alternate}
@keyframes atem{from{transform:scale(1) rotate(0)}to{transform:scale(1.12) rotate(18deg)}}

.buehne{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;
  width:min(920px,100% - 48px);margin:0 auto;padding:12vh 0 6vh}

.kennung{font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;color:var(--weich);
  display:inline-flex;align-items:center;gap:.6em;text-transform:uppercase;
  opacity:0;animation:auf .8s .1s ease-out forwards}
.kennung #tage{color:var(--tuerkis)}
.puls{width:8px;height:8px;border-radius:50%;background:var(--tuerkis);box-shadow:0 0 0 0 rgba(79,195,193,.6);animation:puls 2.4s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(79,195,193,.55)}70%{box-shadow:0 0 0 10px rgba(79,195,193,0)}100%{box-shadow:0 0 0 0 rgba(79,195,193,0)}}

.marke{font-family:var(--kopf);font-weight:700;letter-spacing:-.045em;line-height:.9;
  font-size:clamp(4.2rem,17vw,11.5rem);margin:.18em 0 .12em -.04em;
  background:linear-gradient(100deg,var(--schrift) 30%,var(--tuerkis) 62%,var(--lila) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;animation:auf 1s .25s cubic-bezier(.2,.7,.2,1) forwards}
.punkt{color:var(--bordeaux);-webkit-text-fill-color:var(--bordeaux)}

.zeile{font-family:var(--mono);font-size:clamp(.95rem,2.6vw,1.2rem);color:var(--weich);min-height:1.6em;
  opacity:0;animation:auf .8s .5s ease-out forwards}
.prompt{color:var(--lila)}
.cursor{display:inline-block;width:.6ch;height:1.1em;margin-left:2px;vertical-align:-.18em;background:var(--tuerkis);animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.felder{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:3.2rem;
  background:var(--linie);border:1px solid var(--linie);border-radius:14px;overflow:hidden;
  opacity:0;animation:auf .8s .7s ease-out forwards}
.felder li{background:rgba(22,29,35,.82);backdrop-filter:blur(6px);padding:1.4rem 1.3rem;
  font-family:var(--kopf);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;display:flex;flex-direction:column;gap:.55rem;
  transition:background .3s}
.felder li:hover{background:rgba(15,43,43,.9)}
.nr{font-family:var(--mono);font-weight:400;font-size:.75rem;color:var(--tuerkis);letter-spacing:.1em}
.felder li:nth-child(2) .nr{color:var(--lila)}
.felder li:nth-child(3) .nr{color:var(--bordeaux)}

.kontakt{align-self:flex-start;margin-top:2.4rem;font-family:var(--mono);font-size:.95rem;color:var(--schrift);
  text-decoration:none;padding:.75rem 1.1rem;border:1px solid var(--linie);border-radius:10px;
  transition:border-color .25s,color .25s;opacity:0;animation:auf .8s .9s ease-out forwards}
.kontakt::before{content:"→ ";color:var(--tuerkis)}
.kontakt:hover,.kontakt:focus-visible{border-color:var(--tuerkis);color:var(--tuerkis);outline:none}

.fuss{position:relative;display:flex;gap:1.6rem;justify-content:center;padding:1.6rem 0 2rem;font-size:.8rem}
.fuss a{color:var(--blass);text-decoration:none;font-family:var(--mono)}
.fuss a:hover{color:var(--weich)}

@keyframes auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .felder{grid-template-columns:1fr}
  .felder li{flex-direction:row;align-items:baseline;gap:.9rem;padding:1.05rem 1.1rem}
  .buehne{padding-top:9vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .kennung,.marke,.zeile,.felder,.kontakt{opacity:1}
}

/* Rechtstexte */
.text{position:relative;flex:1;width:min(720px,100% - 40px);margin:0 auto;padding:10vh 0 4vh;line-height:1.65;color:var(--weich)}
.text h1{font-family:var(--kopf);font-weight:700;color:var(--schrift);font-size:2.2rem;letter-spacing:-.03em;margin-bottom:1.5rem}
.text h2{font-family:var(--kopf);font-weight:700;color:var(--schrift);font-size:1.1rem;margin:2rem 0 .5rem}
.text p,.text ul{margin-bottom:.8rem}
.text ul{padding-left:1.2rem}
.text a{color:var(--tuerkis)}
.zurueck{font-family:var(--mono);font-size:.85rem;text-decoration:none;display:inline-block;margin-bottom:2rem}