/* Akademie Neurodiversität – Design wie auf der Website (Roboto / Roboto Slab, Navy, Orange, eckig, flach) */
@font-face{font-family:Roboto;src:url(schrift/roboto-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Roboto;src:url(schrift/roboto-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Roboto;src:url(schrift/roboto-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Roboto Slab";src:url(schrift/roboto-slab-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Roboto Slab";src:url(schrift/roboto-slab-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --navy:#0A336C; --orange:#E9501C; --orange2:#D87228;
  --bg:#F1F2F5; --surface:#ffffff; --ink:#111111; --muted:#545354; --line:#D5D9E1;
  --accent:#0A336C; --accent-ink:#ffffff; --danger:#BE1622;
  /* Gruppen- und Clusterfarben: helle Töne aus der Akademie-Palette */
  --g1:#FBE2DB; --g2:#DCE5F2; --g3:#F7E6D3; --g4:#E9ECF2; --g5:#F9D6C8; --g6:#CFDBEC; --g7:#F4D9DA; --g8:#EFE6DA;
  --note-ink:#111111;
  --display:"Roboto Slab",Georgia,serif;
  --body:Roboto,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 40px}
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--navy);margin:0;text-wrap:balance;line-height:1.25}
button{font:inherit;cursor:pointer}
button:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--orange2);outline-offset:2px}
input,textarea,select{font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:0;padding:11px 12px}
.btn{border:0;background:var(--orange);color:#fff;font-weight:500;text-transform:uppercase;letter-spacing:.5px;padding:13px 20px;border-radius:0}
.btn:hover{background:#c9410f}
.btn:disabled{opacity:.45;cursor:not-allowed}
.ghost{font-weight:500;padding:10px 14px;border-radius:0;border:2px solid var(--navy);background:var(--surface);color:var(--navy)}
.muted{color:var(--muted)}
.fehler{color:var(--danger);font-weight:700}
.brand{font-family:var(--display);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);font-weight:700}
/* Kopfleiste mit Logo */
.kopfleiste{background:var(--navy);margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px))) 24px;padding:14px max(16px,env(safe-area-inset-left,0px))}
.kopfleiste img{height:52px;width:auto;display:block}