@font-face{font-family:"Kalam";font-weight:700;font-display:swap;src:url(/fonts/kalam-700.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(/fonts/atkinson-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(/fonts/atkinson-700.woff2) format("woff2")}
:root{
  --board:#DCE1E6; --board-dot:rgba(31,42,55,.07); --board-ink:#1F2A37; --card-ink:#1F2A37;
  --c-y:#F7DC5C; --c-w:#FCFCF9; --c-p:#F5B3CE; --pin:#D23B3B; --accent:#1C5DC2; --accent-ink:#fff;
  --shadow:0 1px 0 rgba(0,0,0,.12), 0 8px 16px -10px rgba(20,30,45,.55);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{ --board:#1B2027; --board-dot:rgba(255,255,255,.035); --board-ink:#E7EBF0; --c-y:#E9CF57; --c-w:#ECEDE8; --c-p:#E8A3C1;
    --accent:#7EB0FF; --accent-ink:#0E1620; --shadow:0 1px 0 rgba(0,0,0,.4), 0 10px 18px -10px rgba(0,0,0,.85); color-scheme:dark; }
}
*{box-sizing:border-box}
body{margin:0; min-height:100vh; background:var(--board) radial-gradient(var(--board-dot) 1px, transparent 1.3px) 0 0/6px 6px;
  color:var(--board-ink); font:17px/1.5 "Atkinson Hyperlegible",system-ui,sans-serif}
.login{min-height:100vh; display:grid; place-items:center; padding:24px 16px}
.zettel{background:var(--c-y); color:var(--card-ink); box-shadow:var(--shadow); padding:30px 26px 26px; width:100%; max-width:380px; transform:rotate(-1deg); display:grid; gap:10px}
.pin{position:relative}
.pin::before{content:""; position:absolute; top:-7px; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ff9a90, var(--pin) 55%, #7d1818); box-shadow:0 2px 2px rgba(0,0,0,.35)}
h1{font-family:"Kalam",cursive; font-size:2.6rem; line-height:1; margin:0}
.unter{margin:0 0 6px}
label{font-weight:700}
input[type=password],input[type=text]{font:inherit; padding:12px 14px; border:2px solid var(--card-ink); border-radius:6px; background:var(--c-w); color:var(--card-ink); width:100%}
button{font:700 1rem inherit; font-family:inherit; margin-top:6px; padding:12px 18px; border-radius:999px; border:0; background:#1C5DC2; color:#fff; cursor:pointer; min-height:48px}
button:hover{filter:brightness(1.08)}
input:focus-visible,button:focus-visible{outline:3px solid #1C5DC2; outline-offset:2px}
.meldung{background:var(--c-p); margin:0; padding:10px 12px; border-radius:4px; font-weight:700}