/* 2shell.waldemarenns.de · Desi 24.10.2026
   Schriften wie php-check (Fraunces + IBM Plex). Tauschen: --font, --font-head, --font-mono unter :root. */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/plexsans.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --head-weight:420; --head-stretch:100%; --head-track:-0.03em;

  --paper:#F3F0E8; --paper-2:#EAE5D8; --white:#FBFAF6;
  --ink:#15191F; --ink-2:#3F4650; --ink-3:#5E646C; --rule:#CDC5B3;
  --green:#1C5A46; --green-t:#DCE6DC; --ochre:#8A5200; --ochre-t:#F1E2C4;
  --wide:72rem; --text:42rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.6}
a{color:inherit;text-decoration-line:underline;text-underline-offset:.18em;text-decoration-thickness:from-font;text-decoration-color:var(--ink-3)}
@media (hover:hover){a:hover{text-decoration-color:var(--ink)}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
code,kbd,pre,.mono{font-family:var(--font-mono);font-size:.875em}
p,li{text-wrap:pretty}
h1,h2,h3{font-family:var(--font-head);font-weight:var(--head-weight);font-stretch:var(--head-stretch);letter-spacing:var(--head-track);text-wrap:balance;margin:0}
h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.25rem);line-height:1.15;margin-bottom:1rem}
h3{font-size:1.25rem;line-height:1.3;letter-spacing:-0.01em;margin:2rem 0 .5rem}
h3{font-weight:500}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);padding:.5rem .75rem;z-index:9}

.draft{background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.02em;padding:.5rem 1.25rem;display:flex;gap:.5rem 1.25rem;flex-wrap:wrap;justify-content:center;text-align:center}
.draft b{color:#F1E2C4;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 1.5rem}
.prose{max-width:var(--text)}
.prose p{margin:0 0 1rem}

header.site{border-bottom:2px solid var(--ink)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.mark{font-family:var(--font-head);font-weight:var(--head-weight);font-stretch:var(--head-stretch);font-size:1.125rem;text-decoration:none;letter-spacing:-0.01em}
.mark span{color:var(--ink-3);font-weight:400}
nav.top{display:flex;gap:1.25rem;font-size:.9375rem}
nav.top a{text-decoration:none}
@media (hover:hover){nav.top a:hover{text-decoration:underline}}

.btn{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.625rem 1.125rem;border:2px solid var(--ink);border-radius:4px;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;white-space:nowrap;transition-property:background-color,color,scale;transition-duration:150ms;transition-timing-function:ease-out}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-line{background:transparent;color:var(--ink)}
@media (hover:hover){.btn-line:hover{background:var(--paper-2)}.btn-ink:hover{background:#2A3038}}
@media (prefers-reduced-motion:no-preference){.btn:active{scale:.96}}
.btn svg{width:1.05em;height:1.05em;stroke:currentColor;stroke-width:2;fill:none}
.btn-sm{min-height:2.5rem;padding:.4rem .875rem;font-size:.9375rem}

.meta{font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.04em;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:1.25rem 0 0}
.meta .sq{display:inline-block;width:.6em;height:.6em;background:var(--ochre);margin-right:.5em;vertical-align:.05em}
.stand{color:var(--ink);font-weight:500}
.stand time{font-variant-numeric:tabular-nums}

.hero{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:3rem;align-items:end;padding:2.5rem 0 3rem}
.hero h1{font-size:clamp(2.4rem,1.4rem + 4vw,4.5rem);line-height:1.02;letter-spacing:calc(var(--head-track) * 1.4)}
.hero h1 .alias{display:block;font-family:var(--font);font-stretch:100%;font-weight:500;font-size:clamp(1.0625rem,.9rem + .6vw,1.375rem);line-height:1.35;letter-spacing:0;color:var(--ink-2);margin-top:1rem}
.lead{font-size:1.1875rem;line-height:1.55;max-width:38em;margin:1.5rem 0 1.75rem;color:var(--ink-2)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.plaque{border:2px solid var(--ink);background:var(--white);padding:1.25rem 1.25rem 1rem;border-radius:6px}
.plaque .score{font-family:var(--font-head);font-weight:var(--head-weight);font-stretch:var(--head-stretch);font-size:4.5rem;line-height:1;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.plaque .sev{display:inline-block;margin:.5rem 0 .75rem;padding:.15rem .5rem;background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;border-radius:2px}
.plaque dl{margin:0;font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.plaque dt{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:.5rem}
.plaque dd{margin:0}

.banner{border:2px solid var(--ochre);background:var(--ochre-t);color:#4A2C00;padding:.875rem 1rem;border-radius:4px;margin:1.25rem 0 0;font-size:.9375rem;display:flex;gap:.75rem;align-items:flex-start}
.banner svg{flex:none;width:1.25rem;height:1.25rem;stroke:currentColor;stroke-width:2;fill:none;margin-top:.15rem}

section.block{padding:3.5rem 0;border-top:1px solid var(--rule)}
.label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .75rem}

.recall{border:2px solid var(--ink);background:var(--white);border-radius:6px;overflow:hidden}
.recall-head{display:grid;grid-template-columns:auto 1fr;gap:1rem 1.5rem;padding:1.5rem;border-bottom:2px solid var(--ink);align-items:start}
.recall-head .tag{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:.35rem .6rem;border-radius:2px;white-space:nowrap}
.recall-head p{margin:0;max-width:44em}
.recall-foot{padding:1rem 1.5rem;background:var(--paper-2);font-size:.9375rem;border-top:1px solid var(--rule)}

table.data{width:100%;border-collapse:collapse;font-size:.9375rem}
table.data caption{text-align:start;padding:.75rem 1.5rem 0;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
table.data th,table.data td{text-align:start;padding:.75rem 1.5rem;border-bottom:1px solid var(--rule);vertical-align:top}
table.data thead th{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
table.data tbody tr:last-child td,table.data tbody tr:last-child th{border-bottom:0}
table.data td.v{font-family:var(--font-mono);font-size:.875rem;font-variant-numeric:tabular-nums}
table.data th[scope=row]{font-weight:600}
table.data .note{display:block;font-weight:400;font-size:.8125rem;color:var(--ink-3);margin-top:.2rem;line-height:1.45}
.v strong{font-weight:500;color:var(--ink)}

.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .5rem;border-radius:999px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.02em;white-space:nowrap;line-height:1.5}
.pill::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.ok{background:var(--green-t);color:var(--green)}
.warn{background:var(--ochre-t);color:var(--ochre)}
.unk{background:transparent;color:var(--ink-3);border:1px dashed var(--ink-3)}
.unk::before{background:transparent;border:1px solid currentColor}

.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink);margin-top:1.5rem}
.paths article{padding:1.25rem 1.5rem 0 0}
.paths article+article{padding-left:1.5rem;border-left:1px solid var(--rule)}
.paths h3{margin-top:0}
.paths p{margin:0 0 .75rem;font-size:.9875rem}
.aside{border-left:3px solid var(--ochre);padding:.25rem 0 .25rem 1rem;margin:2rem 0 0;max-width:var(--text);color:var(--ink-2)}

.stacks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem;margin-top:1.5rem}
.stack h3{margin:0 0 .5rem}
pre{margin:0;background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;padding:1rem;overflow-x:auto;line-height:1.55;font-size:.8125rem;tab-size:2}
pre .c{color:var(--ink-3)}
.stack p{margin:.6rem 0 0;font-size:.9375rem;color:var(--ink-2)}

ul.plain{margin:0;padding:0;list-style:none;max-width:var(--text)}
ul.plain li{padding:.75rem 0 .75rem 1.5rem;border-bottom:1px solid var(--rule);position:relative}
ul.plain li::before{content:"";position:absolute;left:0;top:1.35rem;width:.6rem;height:2px;background:var(--ink)}
ul.plain li:last-child{border-bottom:0}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--ink);border-radius:6px;background:var(--white);margin:1.5rem 0}
.facts div{padding:1rem 1.25rem}
.facts div+div{border-left:1px solid var(--rule)}
.facts dt{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin:.35rem 0 0;font-size:1.0625rem;font-weight:600;font-variant-numeric:tabular-nums}
.facts small{display:block;font-weight:400;font-size:.8125rem;color:var(--ink-3);margin-top:.2rem}

ol.time{list-style:none;margin:1.5rem 0 0;padding:0;max-width:48rem}
ol.time li{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--rule)}
ol.time time{font-family:var(--font-mono);font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:.15rem}
ol.time a{font-size:.875rem;color:var(--ink-3)}

.offer{background:var(--ink);color:var(--paper);border-radius:6px;padding:2.5rem;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2.5rem}
.offer h2{color:var(--paper)}
.offer p{margin:0 0 1rem;color:#D9D4C8}
.offer ul{margin:0 0 1.25rem;padding-left:1.1rem;color:#D9D4C8}
.offer li{margin:.3rem 0}
.offer .price{font-family:var(--font-head);font-weight:var(--head-weight);font-stretch:var(--head-stretch);font-size:2rem;line-height:1.1;color:#F1E2C4}
.offer .tax{font-size:.8125rem;color:#B9B3A6;margin-top:.5rem}
.offer .btn-ink{background:var(--paper);color:var(--ink);border-color:var(--paper)}
@media (hover:hover){.offer .btn-ink:hover{background:#fff}}
.offer a:not(.btn){color:var(--paper);text-decoration-color:#8A8F96}
.offer :focus-visible{outline-color:var(--paper)}
.ph{background:#F1E2C4;color:#4A2C00;padding:0 .3em;border-radius:2px;font-family:var(--font-mono);font-size:.85em;font-weight:500}

ol.refs{margin:1rem 0 0;padding-left:1.5rem;columns:2;column-gap:3rem;font-size:.9375rem}
ol.refs li{break-inside:avoid;margin:0 0 .6rem}
ol.refs .d{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);margin-left:.4rem}
.credits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 2rem;margin:1rem 0 0;max-width:52rem}
.credits dt{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.credits dd{margin:.15rem 0 0;font-weight:600}

/* Übersicht */
.vulns{border-top:2px solid var(--ink);margin-top:1.5rem}
.vuln{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2fr) auto;gap:1.5rem 2rem;padding:1.75rem 0;border-bottom:1px solid var(--rule);align-items:start}
.vuln h3{margin:0;font-size:1.75rem;line-height:1.1}
.vuln .ids{font-family:var(--font-mono);font-size:.8125rem;color:var(--ink-2);margin:.4rem 0 0}
.vuln .aka{font-size:.875rem;color:var(--ink-3);margin:.25rem 0 0}
.vuln dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0;font-size:.9375rem}
.vuln dt{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:.2rem}
.vuln dd{margin:0;font-variant-numeric:tabular-nums}
.steps{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;border-top:2px solid var(--ink)}
.steps li{padding-top:1rem}
.steps .when{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.steps h3{margin:.25rem 0 .4rem}
.steps p{margin:0;font-size:.9875rem;color:var(--ink-2)}
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:1.5rem}
.prices article{border:2px solid var(--ink);border-radius:6px;padding:1.5rem;background:var(--white)}
.prices h3{margin:0 0 .5rem}
.prices .amount{font-family:var(--font-head);font-weight:var(--head-weight);font-stretch:var(--head-stretch);font-size:1.75rem;line-height:1.2;margin:.75rem 0 .25rem;font-variant-numeric:tabular-nums}
.prices p{margin:0 0 .75rem;font-size:.9875rem;color:var(--ink-2)}

footer.site{border-top:2px solid var(--ink);margin-top:3.5rem;padding:2rem 0 3rem;font-size:.875rem;color:var(--ink-2)}
footer.site .wrap{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1.5rem}
footer.site p{margin:0 0 .5rem;max-width:44em}
footer.site nav{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:2rem;padding-top:1.75rem}
  .plaque{display:grid;grid-template-columns:auto 1fr;gap:0 1.25rem;align-items:center}
  .plaque .score{font-size:3.25rem}
  .plaque dl{grid-column:1/-1}
  .paths,.stacks,.facts,.steps,.prices,.credits{grid-template-columns:minmax(0,1fr)}
  .paths article,.paths article+article{padding:1.25rem 0;border-left:0}
  .paths article+article{border-top:1px solid var(--rule)}
  .facts div+div{border-left:0;border-top:1px solid var(--rule)}
  .offer{grid-template-columns:1fr;padding:1.75rem 1.25rem;gap:1.5rem}
  .vuln{grid-template-columns:1fr;gap:1rem}
  ol.refs{columns:1}
  footer.site .wrap{grid-template-columns:1fr}
  nav.top a:not(.btn){display:none}
}
@media (max-width:640px){
  body{font-size:1rem}
  .wrap{padding:0 1.125rem}
  section.block{padding:2.5rem 0}
  .recall-head{grid-template-columns:1fr;padding:1.25rem}
  table.data thead{display:none}
  table.data,table.data tbody,table.data tr,table.data td,table.data th{display:block;width:100%}
  table.data tr{padding:.875rem 1.25rem;border-bottom:1px solid var(--rule)}
  table.data tbody tr:last-child{border-bottom:0}
  table.data th,table.data td{padding:.15rem 0;border:0}
  table.data td[data-l]::before{content:attr(data-l);display:inline-block;min-width:5.5rem;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  table.data caption{padding:.75rem 1.25rem 0}
  ol.time li{grid-template-columns:1fr;gap:.15rem}
  .hero h1 .alias{margin-top:.75rem}
  .btn{white-space:normal}
  .recall-foot{padding:1rem 1.25rem}
}
@media print{.draft,.actions,nav.top{display:none}}
.stack,.vuln>*,.offer>*{min-width:0}
.wrap.prose{max-width:var(--wide)}.wrap.prose>*{max-width:var(--text)}
@media (max-width:640px){
  .mark span{display:none}
  table.data caption{display:block;width:auto}
  .plaque{grid-template-columns:auto 1fr}
  .plaque dl{grid-column:auto}
}

.ov{color:var(--ochre);font-size:.8em;margin-left:.2em;cursor:help;font-family:var(--font-mono)}
.offer .ov{color:#F1E2C4}
details.distro{border-top:1px solid var(--rule)}
details.distro summary{cursor:pointer;padding:.875rem 1.5rem;font-weight:600;font-size:.9375rem;list-style-position:inside}
@media (hover:hover){details.distro summary:hover{background:var(--paper-2)}}
details.distro[open] summary{border-bottom:1px solid var(--rule)}
@media (max-width:640px){details.distro summary{padding:.875rem 1.25rem}}

/* v3 */
.rt{background:var(--white);color:var(--ink);border:1px solid var(--ink);text-decoration:none}
.rt::before{content:"↻";width:auto;height:auto;border-radius:0;background:none;font-size:.85rem;line-height:1}
@media (hover:hover){a.rt:hover{background:var(--paper-2)}}
table.data .dn{display:block;font-family:var(--font);font-size:.8125rem;color:var(--ink-3);margin-top:.2rem;line-height:1.45}
table.data td.v{overflow-wrap:anywhere}
table.data .note a{color:var(--ink-3)}
details.distro summary .sum-note{display:block;font-weight:400;font-size:.8125rem;color:var(--ink-3);margin-top:.15rem}
.credits small{display:block;font-weight:400;font-size:.8125rem;color:var(--ink-3);margin-top:.25rem;line-height:1.45;max-width:36em}
.vuln dd.srcs{font-size:.875rem;color:var(--ink-2)}
@media (max-width:640px){
  table.data td[data-l]{position:relative;padding-left:5.5rem}
  table.data td[data-l]::before{position:absolute;left:0;top:.3rem;min-width:0}
}