:root{
  --paper:#F8F6F2;
  --ink:#2C3E57;
  --slate:#5A6678;
  --line:#D8D2C4;
  --marker:#9C8B58;
  --marker-text:#7A6B3C;
  --marker-soft:#E6DFC6;
  --panel:#EFEBE3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:18px;line-height:1.65}
h1,h2,h3,.sans{font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--marker-text);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0}
.brand img{display:block;width:120px;height:auto}
.brand{font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;font-weight:700;font-size:20px;text-decoration:none}
nav a{font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;font-weight:500;font-size:16px;text-decoration:none;margin-left:22px}
nav a:hover{text-decoration:underline;text-decoration-color:var(--marker);text-decoration-thickness:3px;text-underline-offset:5px}

/* Hero */
.hero{padding:40px 0 72px;display:grid;grid-template-columns:1fr;gap:40px}
.hero h1{font-size:clamp(34px,6vw,60px);line-height:1.04;letter-spacing:-.02em;margin:0 0 20px;font-weight:700;max-width:16ch}
.hero p.lead{font-size:20px;max-width:46ch;margin:0 0 28px;color:var(--ink)}
.btn{display:inline-block;font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;font-weight:600;font-size:17px;background:var(--ink);color:var(--paper);padding:14px 24px;border-radius:4px;text-decoration:none}
.btn:hover{background:#1f2c3f}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);margin-left:10px}
@media(min-width:900px){.hero{grid-template-columns:1fr 1.05fr;align-items:center;gap:56px}}

/* Matrix */
.matrix{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:22px}
.matrix h2{font-size:18px;margin:0 0 4px}
.matrix .hint{font-size:15px;color:var(--slate);margin:0 0 18px;line-height:1.45}
.crit{display:grid;grid-template-columns:130px 1fr 34px;gap:12px;align-items:center;margin-bottom:10px;font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;font-size:15px;font-weight:500}
.crit output{text-align:right;color:var(--slate)}
input[type=range]{width:100%;accent-color:var(--ink)}
.rank{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.row{display:grid;grid-template-columns:96px 1fr 44px;gap:12px;align-items:center;margin-bottom:10px;font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;font-size:15px;font-weight:600;transition:transform .35s ease}
.bar{height:22px;background:var(--paper);border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:var(--slate);width:0;transition:width .35s ease}
.row.lead .bar i{background:var(--marker)}
.row .score{text-align:right}
.matrix .note{font-size:14px;color:var(--slate);margin:14px 0 0;line-height:1.45}

/* Sections */
section{padding:64px 0;border-top:1px solid var(--line)}
section h2{font-size:clamp(26px,4vw,38px);line-height:1.12;letter-spacing:-.01em;margin:0 0 24px;max-width:22ch}
.cols{display:grid;gap:40px}
@media(min-width:800px){.cols{grid-template-columns:1fr 1fr}}
.prose p{max-width:60ch;margin:0 0 16px}
.big{font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(48px,8vw,84px);line-height:1;letter-spacing:-.03em;background:linear-gradient(transparent 62%,var(--marker-soft) 62%);display:inline-block;padding-right:6px}
.big-label{font-size:16px;color:var(--slate);max-width:34ch;margin-top:10px}

dl.services{margin:0;display:grid;gap:0}
dl.services div{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
@media(min-width:800px){dl.services div{grid-template-columns:260px 1fr;gap:32px}}
dl.services dt{font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;font-weight:600;font-size:19px}
dl.services dd{margin:0;max-width:56ch}

ol.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
ol.steps li::before{content:counter(s);font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;font-weight:700;font-size:26px;line-height:1.2;color:var(--marker-text)}
ol.steps strong{font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;font-weight:600;font-size:19px;display:block}

.contact{background:var(--ink);color:var(--paper);border-top:none;margin-top:24px}
.contact h2{color:var(--paper)}
.contact a.btn{background:var(--paper);color:var(--ink)}
.contact a.btn.ghost{background:transparent;color:var(--paper)}
.contact p{max-width:52ch}
footer{padding:28px 0 48px;font-size:15px;color:var(--slate)}
footer a{margin-right:18px}
#impressum{font-size:16px}
#impressum h2{font-size:24px}
@media(max-width:600px){header.top{flex-direction:column;align-items:flex-start;gap:6px}nav a{margin:0 16px 0 0}.brand img{width:104px}}
.contact .logo-light{display:block;width:140px;height:auto;margin:0 0 24px;filter:brightness(0) invert(1)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Unterseite */
.sub{padding:40px 0 56px}
.sub h1{font-size:clamp(32px,5.5vw,54px);line-height:1.06;letter-spacing:-.02em;margin:0 0 20px;font-weight:700;max-width:20ch}
.sub p.lead{font-size:20px;max-width:52ch;margin:0 0 28px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:22px}
.panel h2{font-size:18px;margin:0 0 12px;max-width:none}
.panel ul{margin:0;padding:0;list-style:none}
.panel li{padding:10px 0 10px 28px;border-top:1px solid var(--line);position:relative;font-size:17px;line-height:1.5}
.panel li:first-child{border-top:none}
.panel li::before{content:"?";position:absolute;left:0;top:10px;font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;font-weight:700;color:var(--marker-text)}
.teaser{display:grid;gap:18px}
.teaser a.btn{justify-self:start}
nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--marker);text-decoration-thickness:3px;text-underline-offset:5px}
.hint-box{border-left:4px solid var(--marker);padding:4px 0 4px 16px;font-size:16px;color:var(--slate);max-width:62ch}