/* aksu.at – gemeinsames Design (dunkel, Aurora) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(font-inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(font-inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(font-inter-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(font-inter-700.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(font-space-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(font-space-grotesk-600.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(font-space-grotesk-700.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(font-jetbrains-mono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(font-jetbrains-mono-500.woff2) format("woff2")}

:root{
  --bg:#07090f; --card:rgba(255,255,255,.04); --card-solid:#0f1420; --ink:#f2f4f8; --muted:#8b95a7;
  --accent:#7c9cff; --accent-2:#c084fc; --accent-3:#2dd4bf; --accent-ink:#0a0d14;
  --line:rgba(255,255,255,.09); --soft:rgba(255,255,255,.06);
  --danger:#fb7185; --ok:#34d399;
  --grad:linear-gradient(120deg,var(--accent) 0%,var(--accent-2) 50%,var(--accent-3) 100%);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* Aurora-Hintergrund */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45;mix-blend-mode:screen;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:60vmax;height:60vmax;left:-15vmax;top:-25vmax;background:#3b5bff}
.aurora i:nth-child(2){width:50vmax;height:50vmax;right:-20vmax;top:-10vmax;background:#9d4dff;animation-duration:28s;animation-delay:-6s}
.aurora i:nth-child(3){width:45vmax;height:45vmax;left:20vmax;bottom:-30vmax;background:#0fb9a5;animation-duration:32s;animation-delay:-12s;opacity:.3}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,4vmax) scale(1.08)}100%{transform:translate(-4vmax,8vmax) scale(.95)}}
.grid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%)}
.grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

a{color:inherit}
h1,h2,h3{font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-weight:600;letter-spacing:-.02em}
.wrap{width:100%;max-width:600px;margin:0 auto;padding:32px 16px;flex:1}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:12px}
.back{text-decoration:none;color:var(--muted);font-size:14px;display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);backdrop-filter:blur(10px)}
.back:hover{color:var(--ink);border-color:rgba(255,255,255,.2)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 80px rgba(0,0,0,.45)}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:16px}
.stat{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
.stat b{color:var(--ink);font-weight:600}
button,.btn{
  font:inherit;font-size:14px;font-weight:500;cursor:pointer;
  background:var(--soft);color:var(--ink);border:1px solid var(--line);
  padding:8px 14px;border-radius:10px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  transition:background .2s,border-color .2s,transform .15s;
}
button:hover,.btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
button:active,.btn:active{transform:scale(.97)}
button.primary,.btn.primary{background:var(--grad);color:var(--accent-ink);border-color:transparent;font-weight:600}
button.primary:hover,.btn.primary:hover{filter:brightness(1.1)}
button:focus-visible,.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button[aria-pressed="true"]{background:var(--ink);color:var(--accent-ink);border-color:transparent}
.msg{min-height:24px;text-align:center;margin-top:16px;font-weight:600}
.hint{text-align:center;color:var(--muted);font-size:13px;margin-top:8px;line-height:1.5}
footer{padding:28px 16px;text-align:center;font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Sanfte Übergänge zwischen Seiten (Chrome/Edge/Safari, sonst ohne Effekt) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:scale(.985)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
::selection{background:rgba(192,132,252,.35);color:#fff}