/* Schriften liegen lokal im Ordner fonts/ – keine Verbindung zu Google */
@font-face{font-family:"Pixelify Sans";font-weight:400;font-display:swap;src:url(fonts/pixelify-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Pixelify Sans";font-weight:700;font-display:swap;src:url(fonts/pixelify-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Silkscreen";font-weight:400;font-display:swap;src:url(fonts/silkscreen-latin-400-normal.woff2) format("woff2")}

:root{
  --sky:#e7e2ff; --ink:#3b3a5c; --panel:#fffaf2; --edge:#5b5a8a;
  --red:#e5484d; --blue:#3d6fd9; --green:#5bb86a; --yellow:#f4d35e; --soft:#cfc9f3;
  --f-pix:"Pixelify Sans","Courier New",monospace; --f-label:"Silkscreen","Courier New",monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--sky);color:var(--ink);
  font-family:var(--f-pix);font-size:17px;line-height:1.4;padding:28px 16px 24px;
  background-image:radial-gradient(var(--soft) 1px,transparent 1px);background-size:12px 12px}
.wrap{width:100%;max-width:760px;margin:0 auto;flex:1;display:flex;flex-direction:column;gap:28px}
header{text-align:center}
h1{margin:0;font-size:clamp(44px,13vw,76px);line-height:1;color:var(--red);
  text-shadow:3px 3px 0 var(--yellow),6px 6px 0 var(--edge)}
.sub{font-family:var(--f-label);font-size:12px;letter-spacing:.08em;margin:16px 0 0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:4px solid var(--edge);
  box-shadow:6px 6px 0 var(--edge);color:inherit;text-decoration:none;padding:18px 18px 20px;transition:transform .08s}
.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--edge)}
.card:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--edge)}
.card:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.badge{align-self:flex-start;font-family:var(--f-label);font-size:10px;letter-spacing:.05em;color:#fff;
  border:2px solid var(--edge);padding:2px 6px}
.card h2{margin:0;font-size:28px;line-height:1.05}
.card p{margin:0;flex:1}
.go{align-self:flex-start;font-weight:700;font-size:18px;color:#fff;border:3px solid var(--edge);
  box-shadow:3px 3px 0 var(--edge);padding:6px 14px}
.icon{display:flex;gap:4px}
.icon span{width:22px;height:22px;border:2px solid var(--edge);display:grid;place-items:center;
  font-family:var(--f-label);font-size:11px;color:#fff}

footer{text-align:center;font-family:var(--f-label);font-size:10px;letter-spacing:.06em;margin-top:36px}
footer a{color:inherit}

/* Unterseiten (Impressum, Datenschutz) */
.page{background:var(--panel);border:4px solid var(--edge);box-shadow:6px 6px 0 var(--edge);padding:20px 22px 24px}
.page h1{font-size:clamp(32px,9vw,48px);text-shadow:2px 2px 0 var(--yellow),4px 4px 0 var(--edge)}
.page h2{font-size:22px;margin:24px 0 6px}
.page p,.page li{margin:0 0 10px}
.page a{color:var(--blue)}
.back{font-family:var(--f-label);font-size:11px;letter-spacing:.05em;color:var(--ink)}
[data-c]{white-space:pre-line}

@media (prefers-reduced-motion:reduce){.card{transition:none}}