/* Design A · Klassisch */
@font-face{font-family:Fredoka;font-weight:500;font-display:swap;src:url(fonts/fredoka-latin-500-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")}
@font-face{font-family:Karla;font-weight:400;font-display:swap;src:url(fonts/karla-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Karla;font-weight:700;font-display:swap;src:url(fonts/karla-latin-700-normal.woff2) format("woff2")}
:root{--navy:#333949;--navy2:#262b38;--lime:#8dc21f;--limed:#6f9c14;--bg:#f3f6fb;--card:#fff;--ink:#1f2433;--mute:#5b6475;--line:#dde3ee;--r:18px;--mk-bg:#fff;--mk-fg:#1f2433;--mk-ac:#333949;--mk-acfg:#fff;--mk-r:20px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.55 Karla,system-ui,sans-serif;-webkit-text-size-adjust:100%}
h1,h2,h3,.brand b,.st{font-family:Fredoka,Karla,sans-serif;font-weight:600;line-height:1.15}
a{color:inherit}.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:10px;top:10px;z-index:1000;background:#fff;padding:10px 14px;border-radius:10px}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.si{width:1.1em;height:1.1em;vertical-align:-.15em}.ic{display:inline-block;width:1em;height:1em}
.hd{background:var(--navy);color:#fff;position:sticky;top:0;z-index:40;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.hd-in{display:flex;align-items:center;gap:18px;min-height:68px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;padding:6px 0}
.brand .lg-img{height:44px;width:auto;border-radius:10px}.brand-t b{display:block;font-size:1.4rem}.brand-t small{display:block;color:#c9d3e6;font-size:.85rem;margin-top:1px}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.na{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;text-decoration:none;font-weight:700;color:#e8edf7;transition:background .15s,transform .15s}
.na:hover{background:rgba(255,255,255,.12)}.na.on{background:var(--lime);color:#1b2406}.na .na-i{font-size:1.15em;line-height:1}
.mbtn{display:none;background:rgba(255,255,255,.12);border:0;color:#fff;width:46px;height:46px;border-radius:12px;font-size:22px;cursor:pointer}
.hero{background:linear-gradient(135deg,var(--navy) 0%,#3f4a63 100%);color:#fff;padding:54px 0 66px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-60px;bottom:-90px;width:340px;height:340px;border-radius:50%;background:var(--lime);opacity:.22}
.hero:before{content:"";position:absolute;left:46%;top:-70px;width:180px;height:180px;border-radius:50%;background:#4aa3df;opacity:.22}
.hero-in{position:relative;z-index:1}.pre{margin:0 0 6px;color:var(--lime);font-weight:700;letter-spacing:.02em}
.hero h1{font-size:clamp(2.2rem,6vw,3.6rem);margin:0 0 12px}.lead{max-width:640px;font-size:1.2rem;color:#e3e9f5;margin:0 0 24px}
.hero-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.srch{position:relative;flex:1 1 280px;max-width:460px}.srch input{width:100%;font:inherit;padding:14px 18px 14px 46px;border-radius:999px;border:0;background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.srch-i{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none;width:1.2em;height:1.2em}
.rnd,.bt{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:700;padding:13px 20px;border-radius:999px;background:var(--lime);color:#1b2406;text-decoration:none;box-shadow:0 4px 0 var(--limed);transition:transform .12s,box-shadow .12s}
.rnd:hover,.bt:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--limed)}.rnd:active,.bt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--limed)}
.subjects{margin:-34px 0 28px;position:relative;z-index:2}.st{font-size:1.6rem;margin:0 0 18px;color:var(--navy)}
.hero + .wrap .subjects{margin-top:34px}
.sgrid{--n:4;--cg:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:18px var(--cg)}.sgrid>*{box-sizing:border-box;flex:0 0 auto;width:calc((100% - (var(--n) - 1)*var(--cg))/var(--n))}@media (max-width:1000px){.sgrid{--n:3}}@media (max-width:760px){.sgrid{--n:2}}@media (max-width:480px){.sgrid{--n:1}}
.subj{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:var(--card);border-radius:var(--r);padding:22px 20px 18px;text-decoration:none;border:2px solid var(--line);border-top:8px solid var(--c);box-shadow:0 6px 18px rgba(30,40,70,.07);transition:transform .15s,box-shadow .15s}
.subj:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 14px 28px rgba(30,40,70,.14)}
.subj-i{width:62px;height:62px;border-radius:18px;background:var(--cs);display:grid;place-items:center;font-size:34px;line-height:1}
.subj-t{font:600 1.45rem/1.1 Fredoka,sans-serif;color:var(--c);margin-top:6px}.subj-l{color:var(--mute);font-size:.95rem}.subj-n{font-size:.9rem;color:var(--mute);font-weight:700}
.subj-go{margin-top:auto;padding-top:8px;font-weight:700;color:var(--c);display:flex;align-items:center;justify-content:center;gap:6px}.subj-go .si{transition:transform .15s}.subj:hover .subj-go .si{transform:translateX(4px)}
.about{background:#fff;border:2px dashed var(--line);border-radius:var(--r);padding:24px 26px;margin:34px 0 46px;color:#364056}.about h2{margin:0 0 10px;font-size:1.3rem;color:var(--navy)}.about p{margin:0 0 12px;max-width:80ch}
.ph{background:var(--c);color:var(--ci);padding:30px 0}.ph-in{display:flex;align-items:center;gap:18px}.ph-i{width:76px;height:76px;border-radius:22px;background:rgba(255,255,255,.28);display:grid;place-items:center;font-size:42px;flex:none}
.ph h1{margin:0;font-size:clamp(1.9rem,5vw,2.8rem)}.ph p{margin:4px 0 0;opacity:.92;max-width:60ch}
.tl-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-top:22px}.tl-row .srch input{box-shadow:0 0 0 2px var(--line)}.tl-row .rnd{box-shadow:0 3px 0 var(--limed);padding:10px 16px}
.pg{padding-bottom:50px}.tools{display:flex;gap:8px;justify-content:flex-end;margin:16px 0 10px}.tl{font:inherit;font-size:.9rem;font-weight:700;background:none;border:0;color:var(--mute);cursor:pointer;text-decoration:underline;padding:6px}
.cats{display:grid;gap:14px}.cat{background:#fff;border-radius:var(--r);border:2px solid var(--line);border-left:8px solid var(--c);overflow:hidden;transition:box-shadow .2s}
.cat:hover{box-shadow:0 6px 18px rgba(30,40,70,.09)}
.cat-s{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;list-style:none}.cat-s::-webkit-details-marker{display:none}
.cat-i{width:46px;height:46px;border-radius:14px;background:var(--cs);display:grid;place-items:center;font-size:25px;flex:none}
.cat-t{margin:0;font-size:1.3rem;flex:1}.cat-c{font-size:.85rem;color:var(--mute);font-weight:700;white-space:nowrap}
.cat-x{width:32px;height:32px;border-radius:50%;background:var(--cs);color:var(--c);display:grid;place-items:center;transition:transform .2s;flex:none}.cat-d[open] .cat-x{transform:rotate(180deg)}
.cat-b{padding:2px 20px 20px}.cat-note{color:var(--mute);margin:0 0 10px}
.sub{margin-top:14px}.sub-t{margin:0 0 6px;font-size:1.02rem;color:var(--c);text-transform:none;border-bottom:2px solid var(--cs);padding-bottom:4px}
.lks{list-style:none;margin:0;padding:0;display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.lk{position:relative;display:flex;flex-direction:column}.lk-a{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#f6f8fc;border-radius:12px;text-decoration:none;font-weight:700;border:2px solid transparent;transition:background .12s,border-color .12s,transform .12s}
.lk-a:hover{background:var(--cs);border-color:var(--c);transform:translateX(3px)}.lk-t{flex:1}.lk-x{color:var(--mute);font-size:.9em;flex:none}
.lk-b{font-size:.75rem;background:var(--navy);color:#fff;border-radius:99px;padding:2px 9px}.lk-n{font-size:.85rem;color:var(--mute);padding:2px 14px 0}
.empty{color:var(--mute);padding:30px 0}.prose{max-width:760px;background:#fff;border-radius:var(--r);padding:26px 28px;margin:26px 0 50px;border:2px solid var(--line)}.prose h2{font-size:1.4rem;margin:1.2em 0 .4em}.prose h2:first-child{margin-top:0}.prose h3{margin:1.1em 0 .3em}.prose a{color:#2a6fc0}
.nf{text-align:center;padding:70px 0}.nf-e{font-size:72px}.nf h1{font-size:2.4rem;margin:.2em 0}
.ft{background:var(--navy2);color:#c9d3e6;padding:26px 0;margin-top:30px}.ft-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}.ft-l{display:flex;gap:18px;flex-wrap:wrap}.fl{color:#e8edf7;background:none;border:0;font:inherit;cursor:pointer;text-decoration:underline;padding:4px 0}.cp{margin:0;font-size:.9rem}
.mk-res{padding:24px 0}.mk-res-t{font-size:1.4rem;margin:0 0 12px}.mk-res a{background:#fff;padding:12px 16px;border-radius:12px;border:2px solid var(--line);font-weight:700}.mk-res a:hover{border-color:var(--lime)}
body.searching .subjects,body.searching .about{display:none}
.topb{position:fixed;right:16px;bottom:16px;z-index:50;width:50px;height:50px;border-radius:50%;border:0;background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.3);cursor:pointer}.topb:not([hidden]){display:grid;place-items:center}
@media (max-width:760px){.mbtn{display:block}.nav{display:none;width:100%;flex-direction:column;padding-bottom:12px}body.menu-open .nav{display:flex}.hd-in{padding-top:6px}.hero{padding:36px 0 56px}.lks{grid-template-columns:1fr}.cat-s{padding:14px}.cat-b{padding:2px 14px 16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Fachfarben */
.col-green{--c:#2e8b1a;--cs:#e4f4dc;--ci:#fff}
.col-blue{--c:#2a6fc0;--cs:#dfecfa;--ci:#fff}
.col-pink{--c:#c4307e;--cs:#fbe2ef;--ci:#fff}
.col-yellow{--c:#f2b705;--cs:#fff3cc;--ci:#2b2100}
.col-purple{--c:#6b3fb8;--cs:#ece4fa;--ci:#fff}
.col-orange{--c:#c2570a;--cs:#ffe8d2;--ci:#fff}
.col-red{--c:#c62f2f;--cs:#fde0e0;--ci:#fff}
.col-teal{--c:#0f8383;--cs:#d8f3f1;--ci:#fff}
.col-grey{--c:#5b6475;--cs:#e8ebf0;--ci:#fff}
/* Logo */
.brand .brand-full{height:54px;width:auto;background:#fff;border-radius:12px;padding:3px 12px}.brand .brand-sym{height:48px;width:auto}

.brand-mk,.brand-sym{filter:drop-shadow(0 0 1px rgba(255,255,255,.7))}

.about{text-align:center}