@font-face{font-family:'Fredoka';font-weight:400;font-display:swap;src:url(fonts/fredoka-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Fredoka';font-weight:600;font-display:swap;src:url(fonts/fredoka-latin-600-normal.woff2) format('woff2');}
:root{--bg:#fff7ed;--karte:#fff;--rand:#fbdfbf;--schatten:#ffefdc;--navy:#052a75;--text:#4a5568;--orange:#f59330;--lila:#6b5ce7;--hinweis:#fff2d6;}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.55 'Fredoka',system-ui,sans-serif}
main{max-width:980px;margin:0 auto;padding:20px 16px 48px}
header{display:flex;align-items:center;gap:14px;margin:4px 0 18px}
header img{width:64px;height:auto}
h1{font-weight:600;color:var(--navy);font-size:1.75rem;line-height:1.2;margin:0}
h1 small{display:block;font-size:1rem;font-weight:400;color:var(--text)}
h2{font-weight:600;color:var(--navy);font-size:1.3rem;margin:0 0 10px}
.hinweis{background:var(--hinweis);border:2px solid var(--rand);border-radius:16px;padding:12px 16px;margin:0 0 18px}
.raster{display:grid;gap:16px}
@media(min-width:860px){.raster{grid-template-columns:1fr 1fr}.breit{grid-column:1/-1}}
.karte{background:var(--karte);border:2px solid var(--rand);border-radius:18px;box-shadow:0 5px 0 var(--schatten);padding:18px}
ol,ul{margin:0;padding-left:1.3em}
li{margin:0 0 6px}
.knopf{display:inline-block;background:var(--orange);color:#fff;font-weight:600;text-decoration:none;border-radius:999px;padding:12px 22px;margin:4px 0 12px;font-size:1.05rem}
.knopf:focus-visible,a:focus-visible{outline:3px solid var(--lila);outline-offset:3px}
a{color:var(--lila);font-weight:600;overflow-wrap:anywhere}
.klein{font-size:.9rem}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;overflow-wrap:anywhere;word-break:break-all;background:#f7f1e8;border-radius:6px;padding:2px 4px}
.qr{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.qr img{width:160px;height:160px;border-radius:10px;border:2px solid var(--rand)}
footer{margin-top:24px;font-size:.9rem;text-align:center}
.slogan{margin:0 0 18px;font-size:1.1rem;font-weight:600;color:var(--navy)}
.slogan-z1,.slogan-z2{display:block}
.slogan-bunt{font-weight:600;letter-spacing:.5px;-webkit-text-stroke:.6px var(--navy)}
.slogan-bunt .b1{color:#b8d96e}
.slogan-bunt .b2{color:#8dd4d6}
.slogan-bunt .b3{color:#f5c542}
.slogan-bunt .b4{color:#f5a3b8}