@font-face{font-family:"Outfit";src:url(../fonts/outfit-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#0e0e12;
  --text:#e8e8f0;
  --body:#c8c8d6;
  --lead:#b8b8c8;
  --muted:#a0a0b4;
  --dim:#8a8a9c;
  --white:#ffffff;
  --pink:#fc0fc0;          /* Akzent, Links auf dunklem Grund (5,4 : 1) */
  --pink-light:#ff5ad6;    /* Link-Hover, bleibt über 4,5 : 1 */
  --btn:#d60aaa;           /* Button-Grund: weiße Schrift 4,7 : 1 */
  --btn-hover:#b0088c;
  --line:rgba(255,255,255,.06);
  --border:#2a2a38;
  --font-head:"Outfit",system-ui,sans-serif;
  --font-body:"DM Sans",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

a{color:var(--pink);text-decoration:none}
a:hover{color:var(--pink-light);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:6px}

/* ---------- Hintergrund ---------- */
.page{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;flex-direction:column}
.glow{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 82% 75%,rgba(252,15,192,.26),transparent 70%),
             radial-gradient(ellipse 60% 50% at 15% 10%,rgba(90,30,120,.35),transparent 70%)}
.particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.mark{pointer-events:none;aspect-ratio:1;will-change:transform}
.mark svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 24px rgba(252,15,192,.55))}
.mark path{fill:rgba(252,15,192,.22);stroke:var(--pink);stroke-width:5;stroke-linejoin:round}

/* Startseite: Höhe an den Viewport gekoppelt, damit das X oberhalb der Fußzeile endet */
.mark--hero{position:absolute;right:-4vw;top:7vh;width:min(60vw,78vh,820px)}
/* Unterseiten: dezent, mitlaufend */
.mark--fixed{position:fixed;right:-10vw;top:20vh;width:min(60vw,760px);opacity:.45}

/* ---------- Startseite ---------- */
.hero{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;padding:64px 8vw;max-width:1080px}
.brand{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.brand img{width:48px;height:48px}
.brand span,.back span{font-family:var(--font-head);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-family:var(--font-head);font-weight:600;font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.1;margin:0;color:var(--white);text-wrap:balance}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.7;color:var(--lead);max-width:560px;margin:24px 0 40px;text-wrap:pretty}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:1rem;padding:14px 24px;border-radius:8px;transition:background-color .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--btn);color:var(--white);font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.btn--primary:hover{background:var(--btn-hover);color:var(--white);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.25)}
.btn--ghost{background:rgba(255,255,255,.04);color:var(--text);font-weight:500;border:1px solid var(--border)}
.btn--ghost:hover{background:rgba(252,15,192,.08);color:var(--pink);border-color:rgba(252,15,192,.4)}

/* ---------- Unterseiten ---------- */
.site-header{position:relative;z-index:1;padding:32px 8vw 0}
.back{display:inline-flex;align-items:center;gap:12px}
.back img{width:28px;height:28px}
.back:hover{text-decoration:none}
.back:hover span{color:var(--pink)}
.content{position:relative;z-index:1;flex:1;width:100%;max-width:calc(900px + 16vw);padding:64px 8vw}
.content h1{font-family:var(--font-head);font-weight:600;font-size:clamp(1.8rem,8vw,3.4rem);line-height:1.2;margin:0 0 40px;color:var(--white);overflow-wrap:break-word;hyphens:auto}
.sections{display:flex;flex-direction:column;gap:32px;font-size:1rem;line-height:1.7;color:var(--body)}
.sections section{display:flex;flex-direction:column;gap:8px}
.sections h2{font-family:var(--font-head);font-weight:600;font-size:1.35rem;line-height:1.3;margin:0;color:var(--white)}
.sections p{margin:0;text-wrap:pretty;overflow-wrap:break-word;hyphens:auto}
.notice{padding:20px 24px;border:1px solid rgba(252,15,192,.4);border-radius:10px;background:rgba(252,15,192,.06)}
.stand{font-size:.82rem;color:var(--dim)}

/* ---------- Fußzeile ---------- */
.site-footer{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:24px 8vw;border-top:1px solid var(--line);background:rgba(14,14,18,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:.82rem;color:var(--dim)}
.site-footer nav{display:flex;gap:20px}
.site-footer a{color:var(--dim)}
.site-footer a:hover,.site-footer a[aria-current="page"]{color:var(--pink)}

/* ---------- Handy ---------- */
@media (max-width:700px){
  .mark--hero{width:min(92vw,440px);top:3vh;right:-20vw;opacity:.6}
  .mark--fixed{width:80vw;right:-25vw;opacity:.3}
}