/* Rechtsseiten — dasselbe System wie die Startseite, ohne deren Effekte */
:root{
  --ground:#F3F5F6; --white:#FFFFFF; --panel:#E9EEF1;
  --ink:#0C2433; --ink-soft:#5D7280; --ink-faint:#8FA2AD;
  --line:#D5DDE2; --signal:#C62A18;
  --f-display:"Archivo","Manrope","PingFang SC","Microsoft YaHei",sans-serif;
  --f-mono:"DM Mono","Manrope",ui-monospace,monospace;
  --gut:clamp(20px,4vw,72px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--f-display);
     font-size:16px;line-height:1.65;margin:0;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.wrap{max-width:940px;margin-inline:auto;padding-inline:var(--gut)}

.topbar{border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;
              gap:20px;padding-block:20px;flex-wrap:wrap}
.mark{font-weight:800;font-size:20px;letter-spacing:-.02em;text-transform:uppercase;
      text-decoration:none}
.mark span{color:var(--signal)}
.back{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
      color:var(--ink-soft);text-decoration:none;transition:color .3s var(--ease)}
.back:hover{color:var(--signal)}

main{padding-block:clamp(44px,6vw,92px) clamp(60px,8vw,120px)}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;
         text-transform:uppercase;color:var(--ink-faint)}
h1{font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1;
   font-size:clamp(34px,5vw,62px);margin-top:12px}
.lead{margin-top:clamp(18px,2.2vw,28px);color:var(--ink-soft);max-width:62ch;
      font-size:clamp(15px,1.15vw,18px)}

h2{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;
   font-size:clamp(17px,1.7vw,23px);margin-top:clamp(34px,4vw,56px);
   padding-top:16px;border-top:1px solid var(--line)}
h3{font-weight:700;font-size:16px;margin-top:22px;letter-spacing:-.01em}
p+p{margin-top:12px}
h2+p,h3+p{margin-top:12px}
p,li{max-width:70ch;color:var(--ink-soft)}
p strong,li strong{color:var(--ink);font-weight:600}
ul{margin-top:12px;padding-left:0;list-style:none}
li{position:relative;padding-left:20px;margin-top:8px}
li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1px;
           background:var(--signal)}

dl.facts{margin-top:18px;display:grid;grid-template-columns:minmax(140px,220px) 1fr;
         gap:0;border-top:1px solid var(--line)}
dl.facts dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
            text-transform:uppercase;color:var(--ink-faint);
            padding:13px 16px 13px 0;border-bottom:1px solid var(--line)}
dl.facts dd{margin:0;padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink)}
@media (max-width:640px){
  dl.facts{grid-template-columns:1fr}
  dl.facts dt{padding-bottom:0;border-bottom:0}
  dl.facts dd{padding-top:4px}
}

.todo{background:#FFF4F2;border-left:2px solid var(--signal);
      padding:14px 18px;margin-top:18px;color:var(--ink);max-width:70ch;
      font-size:14.5px;line-height:1.6}
.todo b{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
        text-transform:uppercase;color:var(--signal);display:block;margin-bottom:6px}

footer{border-top:1px solid var(--line);margin-top:clamp(50px,7vw,100px)}
footer .wrap{padding-block:26px 40px;display:flex;gap:18px;justify-content:space-between;
             flex-wrap:wrap}
footer p,footer a{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
                  text-transform:uppercase;color:var(--ink-faint);text-decoration:none}
footer a:hover{color:var(--signal)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}