/* Shopbefund, Designsystem "Neon".
   Blackout als Grund, Neon Glow als einziger Akzent, Flaechenleiter statt Schatten.
   Inter fuer Text, Geist Mono fuer alles Gemessene. */

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/geist-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/geist-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/geist-mono-latin-600-normal.woff2") format("woff2")}

:root{
  /* Flaechen, von schwarz nach oben */
  --canvas:#000000;
  --surface:#0a0a0b;
  --elevated:#151617;
  --card:#151617;
  --graphite:#242628;
  --hairline:#303236;
  --hairline-soft:rgba(255,255,255,.06);
  --hairline-strong:#3f4247;

  /* Text */
  --ink:#ffffff;
  --body:#c9cbcf;
  --mute:#94979e;
  --ash:#797d86;

  /* Akzent und Semantik.
     Neon Glow ist Marke und Interaktion. Funde tragen System Warning,
     damit ein Fund nie dieselbe Farbe hat wie ein bestandener Punkt. */
  --brand:#34d59a;
  --brand-muted:#285d49;
  --brand-soft:rgba(52,213,154,.12);
  --fund:#ff3621;
  --fund-soft:rgba(255,54,33,.14);
  --ok:#34d59a;
  --ok-soft:rgba(52,213,154,.12);
  --info:#34d59a;

  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",SFMono-Regular,Consolas,"Liberation Mono",monospace;

  --col:1200px;
  --r-xs:4px; --r-sm:4px; --r-md:4px; --r-lg:4px; --r-xl:4px; --r-pill:9999px;
  --s-sec:96px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.43px;
  font-feature-settings:"calt","kern","liga";
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--brand);color:#0a0a0b}

.wrap{max-width:var(--col);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}

h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:500;text-wrap:balance}
h1{font-size:clamp(38px,4.8vw,64px);line-height:1.02;letter-spacing:-2.2px}
h2{font-size:clamp(32px,4vw,48px);line-height:1.13;letter-spacing:-1.2px}
h3{font-size:24px;line-height:1.25;letter-spacing:-.24px}
h4{font-size:18px;line-height:1.38;letter-spacing:-.36px}
p{margin:0}
a{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)
}

.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;line-height:1.5;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brand)
}
.lede{font-size:18px;line-height:1.38;letter-spacing:-.36px;color:var(--body);max-width:60ch}
.fine{font-size:12px;line-height:1.5;letter-spacing:-.7px;color:var(--ash)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

section{padding:var(--s-sec) 0}
.sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;max-width:70ch}

.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:24px}
.card-el{background:var(--elevated);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:24px}

.grid{display:grid;gap:16px}
@media(min-width:720px){.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 28px;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:-.43px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease
}
.btn-primary{background:var(--ink);color:#151617;border-color:var(--ink)}
.btn-primary:hover{background:#c9cbcf;border-color:#c9cbcf}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline);padding:12px 18px}
.btn-ghost:hover{border-color:var(--hairline-strong);background:var(--elevated)}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.02em;
  padding:3px 8px;border-radius:var(--r-xs);
  background:var(--graphite);color:var(--mute);border:1px solid var(--hairline)
}
.tag-fund{background:var(--fund-soft);color:var(--fund);border-color:transparent}
.tag-ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.tag-brand{background:var(--brand-soft);color:var(--brand);border-color:transparent}

.topbar{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.mark{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;font-weight:500;color:var(--ink);letter-spacing:-.43px}
.mark span{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--ash);letter-spacing:.02em}

footer{border-top:1px solid var(--hairline);background:var(--canvas);padding:56px 0 64px}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-start}
footer a{color:var(--mute);text-decoration:none}
footer a:hover{color:var(--ink)}

/* Flow-Abstaende in Karten (Plan-, Vergleichs-, Rollen- und Stimmkarten regeln das selbst) */
.card:not(.plan):not(.cmp):not(.rolle):not(.stimme):not(.stufe)>*+*,
.card-el:not(.plan):not(.cmp):not(.rolle):not(.stimme):not(.stufe)>*+*{margin-top:12px}
.card:not(.plan):not(.cmp):not(.rolle):not(.stufe)>.tag+h3,
.card-el:not(.plan):not(.cmp):not(.rolle)>.tag+h3,
.card:not(.plan):not(.cmp):not(.rolle)>.eyebrow+h3,
.card-el:not(.plan):not(.cmp):not(.rolle)>.eyebrow+h3{margin-top:14px}
.card:not(.plan):not(.cmp):not(.rolle)>h3+p,
.card-el:not(.plan):not(.cmp):not(.rolle)>h3+p{margin-top:10px}
.card>p+p.fine,.card-el>p+p.fine{margin-top:14px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Hilfsklassen statt Inline-Styles, damit die CSP ohne unsafe-inline auskommt */
.mb8{margin-bottom:8px}
.mt16{margin-top:16px}
.mt18{margin-top:18px}
.mt20{margin-top:20px}
.mt32{margin-top:32px}
.c-fund{color:var(--fund)}
.c-ok{color:var(--ok)}