@import url('/fonts/fonts.css');
:root{
  --paper:#ffffff;--ink:#16191c;--muted:#5e656b;--faint:#8a9197;--rule:#e3e6e8;--soft:#f6f7f8;
  --accent:#0e5e50;--accent-soft:#e9f2ef;--rare:#8b5e14;--rare-soft:#fbf3e3;--red:#b0322a;--red-soft:#fcefee;--blue:#1f5aa6;--blue-soft:#eef3fb;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:"Source Sans 3",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="dark"]{--paper:#15181a;--ink:#e9ecee;--muted:#a8b0b6;--faint:#7d868d;--rule:#2d3236;--soft:#1d2124;--accent:#5fb9a5;--accent-soft:#1b2d29;--rare:#e0b161;--rare-soft:#2c2416;--red:#e07a72;--red-soft:#2d1b1a;--blue:#8ab4f0;--blue-soft:#18222f}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.narrow{max-width:720px;margin:0 auto}

/* header */
header.top{border-bottom:1px solid var(--rule);position:sticky;top:env(safe-area-inset-top,0px);background:var(--paper);z-index:5}
header.top .wrap{display:flex;align-items:center;gap:24px;height:62px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink)}
.brand b{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:-.01em}
.brand span{font-size:13px;color:var(--muted)}
nav.main{display:flex;gap:4px;margin-left:auto}
nav.main a{padding:8px 11px;border-radius:6px;color:var(--muted);text-decoration:none;font-size:15px}
nav.main a[aria-current="page"]{color:var(--ink);font-weight:600}
nav.main a:hover{background:var(--soft)}

/* spine (call-number label) */
.spine{width:60px;min-height:78px;height:78px;align-self:start;border:1px solid var(--ink);border-radius:3px;background:var(--paper);display:flex;flex-direction:column;align-items:center;padding:8px 3px 6px;text-align:center;line-height:1.05;flex:none}
.spine .c{font-family:var(--serif);font-weight:700;font-size:19px}
.spine .n{font-weight:700;font-size:15px;margin-top:4px;font-variant-numeric:tabular-nums}
.spine .x{font-size:10px;color:var(--muted);margin-top:4px}
.spine.err{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.spine.num{border-color:var(--rare);color:var(--rare);background:var(--rare-soft)}
.spine.ui{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* home */
.hero{padding:54px 0 34px;border-bottom:1px solid var(--rule)}
.hero .kicker{font-size:14px;color:var(--accent);font-weight:600;margin-bottom:10px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-.02em;margin:0 0 16px;max-width:24ch}
.hero p{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--muted);max-width:40em;margin:0}
.featured{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;padding:38px 0;border-bottom:1px solid var(--rule);align-items:center}
.featured .img{text-decoration:none;border:1px solid var(--rule);border-radius:10px;overflow:hidden;display:block}
.featured img{width:100%;display:block}
.label{font-size:13px;font-weight:600;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.label .dot{width:4px;height:4px;border-radius:50%;background:var(--faint)}
.featured h2{font-family:var(--serif);font-size:32px;line-height:1.15;margin:10px 0 12px;font-weight:600}
.featured h2 a{color:var(--ink);text-decoration:none}
.featured h2 a:hover{color:var(--accent)}
.featured p{font-family:var(--serif);font-size:18px;color:var(--muted);margin:0 0 16px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:8px;padding:9px 16px;font-weight:600;text-decoration:none;font-size:15px}
:root[data-theme="dark"] .btn{color:#0b1f1b}
.btn.ghost{background:none;color:var(--accent)}
.grid2{display:grid;grid-template-columns:1fr 300px;gap:52px;padding-top:34px;padding-bottom:60px}
.sec-h{font-size:14px;font-weight:700;margin:0 0 12px;display:flex;align-items:baseline;gap:10px}
.sec-h small{font-weight:400;color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.chips button{border:1px solid var(--rule);background:var(--paper);border-radius:14px;padding:3px 12px;font-size:14px;color:var(--muted)}
.chips button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
ol.posts{list-style:none;margin:0;padding:0}
.post{display:grid;grid-template-columns:60px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--rule)}
.post h3{font-family:var(--serif);font-size:23px;line-height:1.25;margin:6px 0 6px;font-weight:600}
.post h3 a{color:var(--ink);text-decoration:none}
.post h3 a:hover{color:var(--accent);text-decoration:underline}
.post p{margin:0;color:var(--muted);font-family:var(--serif);font-size:17px}
aside.side .box{border:1px solid var(--rule);border-radius:12px;padding:16px 18px;margin-bottom:18px}
aside.side h4{margin:0 0 10px;font-size:15px}
.soon{list-style:none;margin:0;padding:0}
.soon li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--rule);font-size:14.5px}
.soon li:first-child{border-top:0}
.soon .d{color:var(--faint);font-variant-numeric:tabular-nums;font-size:13px;padding-top:2px}
.soon .r{display:block;color:var(--faint);font-size:12.5px}
.rub{list-style:none;margin:0;padding:0}
.rub li{padding:7px 0;border-top:1px solid var(--rule);font-size:14.5px;display:grid;grid-template-columns:34px 1fr;gap:8px}
.rub li:first-child{border-top:0}
.rub b{font-family:var(--serif);font-size:15px}
.rub span{color:var(--muted)}

/* article */
.art-head{padding:48px 0 26px}
.art-head .row{display:flex;gap:18px;align-items:flex-start}
.art-head h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.2vw,46px);line-height:1.1;letter-spacing:-.015em;margin:8px 0 14px}
.art-head .lead{font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--muted);margin:0}
.byline{font-size:14px;color:var(--faint);margin-top:18px}
.prose{font-family:var(--serif);font-size:19px;line-height:1.68;padding-bottom:30px}
.prose p{margin:0 0 1.05em}
.prose h2{font-family:var(--serif);font-size:27px;line-height:1.2;margin:1.8em 0 .55em;font-weight:600}
.prose h3{font-family:var(--sans);font-size:18px;margin:1.5em 0 .4em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.1em}
.prose li{margin:.3em 0}
.prose strong{font-weight:700}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82em;background:var(--soft);border:1px solid var(--rule);border-radius:4px;padding:1px 5px}
.prose blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);color:var(--muted);font-style:italic}
figure{margin:1.8em 0}
figure img{width:100%;display:block;border:1px solid var(--rule);border-radius:10px}
figcaption{font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:8px;line-height:1.45}
.wide{margin-left:-80px;margin-right:-80px}
.note{font-family:var(--sans);font-size:16px;line-height:1.55;border-radius:10px;padding:14px 18px;margin:1.6em 0;background:var(--accent-soft);border-left:3px solid var(--accent)}
.note b{display:block;margin-bottom:2px;color:var(--accent)}
.note.warn{background:var(--red-soft);border-left-color:var(--red)}
.note.warn b{color:var(--red)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:1.6em 0;font-family:var(--sans)}
.stat{border:1px solid var(--rule);border-radius:10px;padding:12px 14px}
.stat b{display:block;font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--muted);line-height:1.3;display:block;margin-top:4px}
.steps{list-style:none;padding:0!important;counter-reset:s;font-family:var(--sans);font-size:16px}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--rule);margin:0!important}
.steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:700;font-size:14px}
.steps li b{display:block}
/* annotated screenshot */
.anno .pic{position:relative}
.pin{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font:700 15px/30px var(--sans);text-align:center;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.3);border:0;padding:0}
.pin[aria-pressed="true"]{background:var(--ink)}
ol.legend{list-style:none;padding:0;margin:14px 0 0;font-family:var(--sans);font-size:16px;counter-reset:l}
ol.legend li{counter-increment:l;display:grid;grid-template-columns:30px 1fr;gap:12px;padding:10px 8px;border-top:1px solid var(--rule);border-radius:6px;margin:0}
ol.legend li::before{content:counter(l);width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
ol.legend li.on{background:var(--soft)}
ol.legend li b{display:block}
/* chart */
.chart{font-family:var(--sans);font-size:14px;margin:1.4em 0}
.chart .r{display:grid;grid-template-columns:120px 1fr 56px;gap:10px;align-items:center;padding:3px 0}
.chart i{display:block;height:14px;background:var(--accent);border-radius:3px}
.chart i.alt{background:var(--faint)}
.chart .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.art-foot{border-top:1px solid var(--rule);padding:24px 0 60px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.art-foot a{display:block;border:1px solid var(--rule);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.art-foot a:hover{border-color:var(--accent)}
.art-foot small{display:block;color:var(--faint);font-size:13px}
.art-foot span{font-family:var(--serif);font-weight:600;font-size:17px}
footer{border-top:1px solid var(--rule);color:var(--muted);font-size:14px;padding:22px 0 34px}
.page{padding-top:44px;padding-bottom:60px}
.small-note{font-family:var(--sans);font-size:14px;color:var(--faint);margin:-6px 0 20px}
.legal h2{font-family:var(--sans);font-size:18px;margin:1.6em 0 .4em}
.legal{font-size:17px}
.rublink{color:inherit;text-decoration:none}.rublink:hover{color:var(--accent);text-decoration:underline}
.rubnav li{display:block;padding:0}
.rubnav a{display:grid;grid-template-columns:60px 1fr 20px;gap:16px;align-items:center;padding:14px 10px;margin:0 -10px;border-radius:10px;color:var(--ink);text-decoration:none}
.rubnav a:hover{background:var(--soft)}.rubnav a:hover .rn{color:var(--accent)}
.rubnav .rn{font-family:var(--serif);font-size:19px;color:var(--ink)}.rubnav .rc{color:var(--faint);font-size:14px}.rubnav .rd{color:var(--muted);font-size:15px}
.rubnav .arr{color:var(--faint);font-size:20px}
.chiplink{border:1px solid var(--rule);border-radius:14px;padding:3px 12px;font-size:14px;color:var(--muted);text-decoration:none}.chiplink:hover{border-color:var(--accent);color:var(--accent)}
.phbox{aspect-ratio:16/10;background:#d9dcdf;border:1px dashed #9aa1a7;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;text-align:center;color:#4a5157;font-family:var(--sans)}
.phbox span{font-weight:700;font-size:20px;letter-spacing:.02em}
.phbox small{font-size:14px;max-width:46ch;line-height:1.4}
:root[data-theme="dark"] .phbox{background:#2a2f33;color:#b9c0c6}
div.ph{margin:0}
.featured .phbox{border-radius:0;border:0}
.sources{font-family:var(--sans);font-size:14.5px;line-height:1.5;border-top:1px solid var(--rule);margin-top:2em;padding-top:14px;color:var(--muted)}
.sources b{display:block;color:var(--ink);margin-bottom:4px}
.sources ul{margin:0;padding-left:1.2em}
.demobtn{margin-left:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.demobtn:hover{background:var(--accent);color:#fff}
.demobtn .long{display:inline}.demobtn .short{display:none}
@media (max-width:860px){.demobtn{margin-left:6px;padding:5px 9px;font-size:13px}.demobtn .long{display:none}.demobtn .short{display:inline}}
nav.main a{white-space:nowrap}
@media (max-width:640px){
  header.top .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:4px;gap:6px 8px}
  .brand{flex:1 1 auto}
  .demobtn{margin-left:0;order:2}
  .langsw{margin-left:0;order:3}
  nav.main{order:4;width:100%;margin-left:-7px;overflow-x:auto}
}
.langsw{display:flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden;margin-left:10px}
.langsw a{padding:4px 9px;font-size:13px;color:var(--muted);text-decoration:none}
.langsw a[aria-current]{background:var(--ink);color:var(--paper)}
.page h1{font-family:var(--serif);font-weight:600;font-size:40px;margin:0 0 14px}
@media (max-width:980px){.wide{margin-left:0;margin-right:0}}
@media (max-width:860px){
  .featured{grid-template-columns:1fr;gap:20px}
  .grid2{grid-template-columns:1fr;gap:20px}
  nav.main a{padding:8px 7px;font-size:14px}
  .brand span{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .chart .r{grid-template-columns:90px 1fr 48px}
  .art-foot{grid-template-columns:1fr}
  .prose{font-size:18px}
  .spine{width:50px;min-height:66px;height:66px}.spine .c{font-size:16px}.spine .n{font-size:13px}
  .post{grid-template-columns:50px 1fr;gap:14px}
  .art-head .row{flex-direction:column;gap:8px}
}
/* server-rendered filter */
.post[hidden]{display:none}

/* Keep long German legal headings inside the approved mobile page margins. */
.legal{overflow-wrap:anywhere;hyphens:auto}