@font-face { font-family: Josefin; src: url('/lp/wichtelplan-2026/fonts/josefin-sans-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: Amatic; src: url('/lp/wichtelplan-2026/fonts/amatic-sc-bold-latin.woff2') format('woff2'); font-display: swap; }
:root { color-scheme: light; --green:#245b43; --pink:#c02c52; --cream:#fffaf5; --line:#eadfd4; --ink:#24342d; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font: 18px/1.5 Josefin,Arial,sans-serif; }
a { color:var(--green); }
.site-header { padding: .6rem max(1rem,calc((100vw - 960px)/2)); background:var(--pink); }
.site-header a { color:white; text-decoration:none; font:700 2.5rem/1 Amatic,cursive; }
.panel { width:min(920px,calc(100% - 2rem)); margin:3rem auto; padding:clamp(1.25rem,4vw,2.5rem); border:1px solid var(--line); border-radius:1.25rem; background:white; box-shadow:0 12px 35px #50382010; }
h1,h2,h3 { line-height:1.2; }
h1 { font-size:clamp(2rem,5vw,3rem); }
h2 { font-size:1.6rem; }
.eyebrow { color:var(--pink); text-transform:uppercase; font-weight:800; letter-spacing:.08em; }
.button, button { display:inline-block; margin:.4rem 0; padding:.7rem 1.2rem; border:0; border-radius:.65rem; background:var(--green); color:white; font:700 1rem Josefin,Arial,sans-serif; text-decoration:none; cursor:pointer; }
.button:hover,button:hover { background:#183e2e; }
.button.secondary { background:#f2e6df; color:var(--green); }
input[type=email],input[type=password],input[type=text] { display:block; width:min(100%,440px); margin:.3rem 0 .8rem; padding:.8rem; border:1px solid #baa99b; border-radius:.5rem; font:inherit; }
select { display:block; width:min(100%,440px); margin:.3rem 0 .8rem; padding:.8rem; border:1px solid #baa99b; border-radius:.5rem; background:white; font:inherit; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.card { padding:1.2rem; border:1px solid var(--line); border-radius:.9rem; background:#fffdf9; }
.muted { color:#665d55; font-size:.9rem; }
.notice { padding:.8rem 1rem; border-radius:.7rem; background:#e6f2e8; }
.warning { background:#fff0dc; }
form { margin-top:1rem; }
pre { max-height:30rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.4 Consolas,monospace; }
label:has(input[type=checkbox]) { display:flex; gap:.6rem; align-items:flex-start; }
@media(max-width:600px) { .panel { margin:1rem auto; } }