@font-face{font-family:'Libre Baskerville';src:url('/fonts/librebaskerville-var.ttf') format('truetype-variations');font-weight:400 700;font-display:swap}
@font-face{font-family:'Open Sans';src:url('/fonts/opensans-var.ttf') format('truetype-variations');font-weight:300 700;font-display:swap}
:root{--bg:#fbfaf7;--alt:#f2f0ea;--navy:#000033;--text:#3f3d52;--muted:#6f6d80;--line:#dcdae2;--yellow:#FDDD5F;--red:#770000;--green:#047740;--azzurro:#2f86c1;
--serif:'Libre Baskerville',Georgia,serif;--sans:'Open Sans',system-ui,Arial,sans-serif;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--navy);font-family:var(--sans);line-height:1.55}
a{color:var(--navy)}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--azzurro);outline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--yellow);color:var(--navy);border:0;border-radius:3px;padding:12px 22px;font:700 15px var(--sans);cursor:pointer;min-height:48px;text-decoration:none}
.btn[disabled]{opacity:.6;cursor:default}
.btn.ghost{background:transparent;border:1px solid var(--navy)}
.linkbtn{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:.9rem}

/* cards */
.card{position:relative}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 .9em}
.card .label{font-size:.72em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.card .phase{font-size:.8em;color:var(--muted);font-weight:600}
.card .phase b{color:var(--navy);font-family:var(--serif);font-weight:700;font-size:1.25em}
.card .headline{font-family:var(--serif);font-weight:700;color:var(--navy);margin:0;line-height:1.15;letter-spacing:-.01em}
.card blockquote.headline{font-weight:400;line-height:1.4;letter-spacing:0;padding-left:.9em;border-left:4px solid var(--red)}
.card .body{color:var(--text);margin:.8em 0 0;max-width:46ch}
.card .source{color:var(--muted);font-size:.8em;margin:1.1em 0 0;padding-top:.7em;border-top:1px solid var(--line);max-width:60ch}
.card.k-number .headline{font-size:3.2em;line-height:1;letter-spacing:-.03em}
.card.k-number .body{font-family:var(--serif);font-size:1.25em;color:var(--navy);max-width:28ch;line-height:1.35}
.card.k-framework .headline{font-size:2em}
.card.k-book .headline{font-size:1.6em}
.card.k-book{border-left:6px solid var(--green);padding-left:1em}
.card.k-tool .headline,.card.k-access .headline{font-size:1.5em}
@media (prefers-reduced-motion:no-preference){.card.enter{animation:enter .45s ease-out both}@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}}

/* Ati logo (Smiley-i) im Hero der Ati-Seite */
body:has(#canh) .hero>h1{font-size:0;line-height:0;color:transparent;height:clamp(3.4rem,14vw,6rem);width:clamp(5.9rem,24.3vw,10.41rem);background:url(/images/ati/ati-logo.svg) left bottom/contain no-repeat}