@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{
  --paper:#f4efe4;--paper2:#ebe4d3;--ink:#1c1a17;--muted:#5d574b;--rule:#d6cdb6;
  --blue:#0055aa;--orange:#b85c00;--orange-bg:#ff8800;--card:#faf7ef;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light}
@media (prefers-color-scheme:dark){:root{
  --paper:#16150f;--paper2:#201e16;--ink:#ece6d6;--muted:#a59e8b;--rule:#3a362a;
  --blue:#6cb0ff;--orange:#ffa733;--orange-bg:#ff8800;--card:#1c1a13;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.125rem/1.65 var(--sans);overflow-wrap:break-word}
a{color:var(--blue);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:3px solid var(--orange-bg);outline-offset:2px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem;z-index:9}
/* header */
.site-head{border-bottom:2px solid var(--ink)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem;padding-block:1rem}
.logo{font:500 1.5rem/1 var(--mono);color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.logo b{color:var(--blue);font-weight:500}.logo i{font-style:normal;color:var(--orange)}
.nav{display:flex;gap:1.25rem;font:400 .85rem var(--mono);text-transform:uppercase;letter-spacing:.06em}
.nav a{color:var(--ink);text-decoration:none;padding:.25rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--orange-bg)}
/* type */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2rem,6vw,3.25rem)}
h2{font-size:clamp(1.5rem,3.5vw,2rem);margin:2.4em 0 .6em}
h3{font-size:1.3rem;margin:1.8em 0 .5em}
.label{font:400 .78rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.label.cat{color:var(--blue)}
main{padding-block:2.5rem 4rem}
.measure{max-width:44rem}
.prose{max-width:44rem}
.prose>p,.prose>ul,.prose>ol{max-width:68ch}
.prose p.lead{font-size:1.3rem;line-height:1.5;color:var(--ink);border-left:4px solid var(--orange-bg);padding-left:1rem;margin:1.5rem 0 2rem}
.prose h2{border-top:1px solid var(--rule);padding-top:1.1rem}
.prose blockquote{margin:1.5rem 0;padding:.2rem 1.2rem;border-left:4px solid var(--blue);font-family:var(--serif);font-size:1.15rem;color:var(--muted)}
.prose code,.legal code{font:.88em var(--mono);background:var(--paper2);padding:.1em .35em;border-radius:3px;overflow-wrap:anywhere}
.prose ul,.prose ol{padding-left:1.4rem}.prose li{margin:.35rem 0}
.prose li::marker{color:var(--orange);font-family:var(--mono)}
aside.tip{margin:2rem 0;padding:1rem 1.25rem 1rem 1.25rem;background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--blue);position:relative;font-size:1rem}
aside.tip::before{content:"Praxis-Tipp";display:block;font:500 .75rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--blue);margin-bottom:.4rem}
aside.tip p{margin:.3rem 0}
.tablewrap,.prose table{max-width:100%}
.prose table{display:block;overflow-x:auto;border-collapse:collapse;margin:1.6rem 0;font-size:.95rem;line-height:1.45}
.prose th,.prose td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--ink);white-space:nowrap}
/* article head */
.crumbs{font:400 .78rem var(--mono);color:var(--muted);margin-bottom:1.5rem}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 .4em;color:var(--orange)}
.art-head{max-width:48rem;margin-bottom:1rem}
.art-head h1{margin:.6rem 0 1rem}
.meta{display:flex;flex-wrap:wrap;gap:.25rem 1rem}
/* home */
.hero{padding-block:1rem 3rem;border-bottom:1px solid var(--rule);margin-bottom:3rem}
.hero .label{margin-bottom:1rem;display:block}
.hero h1{max-width:16ch}
.hero h1 em{font-style:normal;color:var(--blue);background:linear-gradient(transparent 82%,var(--orange-bg) 82%,var(--orange-bg) 94%,transparent 94%)}
.hero p{max-width:40rem;font-size:1.25rem;margin:1.4rem 0 0}
.btn{display:inline-block;margin-top:1.6rem;padding:.7rem 1.2rem;background:var(--ink);color:var(--paper);font:500 .9rem var(--mono);text-decoration:none;text-transform:uppercase;letter-spacing:.06em;border-bottom:4px solid var(--orange-bg)}
.btn:hover{background:var(--blue);color:#fff}
.sect-title{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:2px solid var(--ink);padding-bottom:.5rem;margin:3.5rem 0 0}
.sect-title h2{margin:0;font-size:1.6rem;border:0;padding:0}
.list{list-style:none;margin:0;padding:0;counter-reset:n}
.list li{border-bottom:1px solid var(--rule)}
.list a{display:grid;grid-template-columns:1fr;gap:.35rem;padding:1.2rem 0;text-decoration:none;color:var(--ink)}
.list a:hover h3 span{background:linear-gradient(transparent 85%,var(--orange-bg) 85%)}
.list h3{margin:0;font-size:1.35rem}
.list p{margin:0;color:var(--muted);font-size:1rem;line-height:1.5}
@media (min-width:44rem){.list a{grid-template-columns:11rem 1fr;column-gap:2rem}.list .label{grid-row:span 3;padding-top:.35rem}}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem;margin-top:1.5rem}
.cat-card{background:var(--card);border:1px solid var(--rule);padding:1rem 1.1rem;font-size:.95rem;line-height:1.5}
.cat-card h3{margin:.3rem 0 .4rem;font-size:1.15rem}.cat-card p{margin:0;color:var(--muted)}
.teaser{margin-top:4rem;padding:1.6rem;background:var(--paper2);border-left:6px solid var(--blue)}
.teaser h2{margin:.4rem 0 .6rem;border:0;padding:0;font-size:1.5rem}.teaser p{margin:.4rem 0;max-width:60ch}
.more{margin-top:4rem;border-top:2px solid var(--ink);padding-top:1rem}
.more h2{margin:0 0 .5rem;font-size:1.4rem;border:0;padding:0}
/* timeline */
.timeline{list-style:none;margin:2rem 0;padding:0 0 0 1.4rem;border-left:2px solid var(--ink)}
.timeline li{position:relative;margin:0 0 1.4rem;max-width:60ch}
.timeline li::before{content:"";position:absolute;left:calc(-1.4rem - 6px);top:.45rem;width:10px;height:10px;background:var(--orange-bg);border:2px solid var(--ink)}
.timeline .label{display:block;color:var(--blue);font-weight:500;font-size:.9rem}
.legal h1,.plain h1{margin-bottom:1.5rem}
.legal h2{font-size:1.35rem;margin:2rem 0 .5rem;border:0;padding:0}
.legal address{font-style:normal;background:var(--card);border:1px solid var(--rule);padding:1rem 1.2rem;display:inline-block}
/* footer */
.site-foot{border-top:2px solid var(--ink);background:var(--paper2);font-size:.95rem;padding-block:2rem}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between}
.site-foot p{margin:.2rem 0;color:var(--muted);max-width:32rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font:400 .82rem var(--mono);text-transform:uppercase;letter-spacing:.06em}
.site-foot a{color:var(--ink)}
@media (max-width:30rem){body{font-size:1.0625rem}.wrap{padding:0 1rem}.nav{gap:1rem}}
