:root{
  --paper:#F7F5F1; --surface:#FFFFFF; --ink:#17191B; --muted:#5A5E64;
  --line:#DED8CB; --line-soft:#EAE5DA; --accent:#B3401E; --accent-ink:#FFFFFF;
  --steel:#2C4A5A; --ok:#3F6B4A;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bs-body-bg:var(--paper); --bs-body-color:var(--ink);
  --bs-link-color:var(--ink); --bs-link-hover-color:var(--accent);
  --bs-link-color-rgb:23,25,27; --bs-link-hover-color-rgb:179,64,30;
  --bs-link-decoration:underline;
  --bs-border-color:var(--line);
  --bs-primary:#17191B; --bs-primary-rgb:23,25,27;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:var(--serif); font-weight:600; line-height:1.14; letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.15rem)}
h2{font-size:clamp(1.5rem,2.7vw,2rem)}
h3{font-size:1.2rem}
.lead-lg{font-size:clamp(1.05rem,1.7vw,1.22rem); color:var(--muted); max-width:60ch}
.kicker{font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--accent)}
.small-muted{font-size:.88rem;color:var(--muted)}
a{text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* preview bar */
.preview-bar{background:var(--ink); color:#EDEAE3; font-size:.8rem; letter-spacing:.04em}
.preview-bar .wrap{padding:.45rem 0}
.preview-bar b{color:#fff}

/* nav */
.navbar{background:var(--paper); border-bottom:1px solid var(--line); padding-top:.85rem; padding-bottom:.85rem}
.navbar .navbar-brand{font-family:var(--serif); font-size:1.4rem; font-weight:600; color:var(--ink); letter-spacing:-.02em}
.navbar .brand-sub{display:block; font-family:var(--sans); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-top:-2px}
.navbar .nav-link{color:var(--muted); font-size:.94rem; padding:.4rem .8rem !important}
.navbar .nav-link:hover{color:var(--ink)}
.navbar-toggler{border-color:var(--line); padding:.35rem .5rem}
.navbar-toggler:focus{box-shadow:none}

/* buttons */
.btn{font-weight:500; border-radius:2px; padding:.6rem 1.1rem}
.btn-ink{background:var(--ink); color:var(--paper); border:1px solid var(--ink)}
.btn-ink:hover{background:#000; color:#fff; border-color:#000}
.btn-line{background:transparent; color:var(--ink); border:1px solid var(--ink)}
.btn-line:hover{background:var(--ink); color:var(--paper)}

.btn-accent{background:var(--accent); color:#fff; border:1px solid var(--accent)}
.btn-accent:hover{background:#8E3317; color:#fff; border-color:#8E3317}
/* hero */
.hero{padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(1.6rem,3vw,2.4rem); border-bottom:1px solid var(--line)}
.hero h1{max-width:22ch; margin-bottom:1rem}
.hero .lead-lg{margin-bottom:1.7rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:2.4rem}
.factbar{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.factbar div{background:var(--paper); padding:1rem 1.4rem}
.factbar div:first-child{padding-left:0}
.factbar div:last-child{padding-right:0}
.factbar b{display:block; font-family:var(--serif); font-size:1.15rem; letter-spacing:-.01em}
.factbar span{font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* sections */
section{padding:clamp(2.6rem,5vw,4.4rem) 0; border-bottom:1px solid var(--line)}
.section-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(1rem,3vw,3rem); margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.section-head p{color:var(--muted); margin:0}
@media (max-width:860px){.section-head{grid-template-columns:1fr}}

/* module cards */
.mod{border-top:2px solid var(--ink); padding:1rem 1.1rem 1.15rem; height:100%}
.mod h3{margin-bottom:.4rem}
.mod p{font-size:.95rem; color:var(--muted); margin-bottom:.7rem}
.mod ul{list-style:none; padding:0; margin:0; font-size:.9rem; color:var(--ink)}
.mod li{padding:.22rem 0 .22rem 1rem; position:relative}
.mod li::before{content:"·"; position:absolute; left:.15rem; color:var(--accent); font-weight:700}

/* honesty */
.honest{background:var(--surface); border:1px solid var(--line); padding:clamp(1.4rem,3vw,2.2rem)}
.honest h3{margin-bottom:.6rem}
.honest ul{list-style:none; padding:0; margin:0; font-size:.96rem}
.honest li{padding:.55rem 0; border-bottom:1px solid var(--line-soft)}
.honest li:last-child{border-bottom:0}
.honest li b{font-weight:600}
.honest li span{color:var(--muted)}

/* screenshot placeholder */
.shot{border:1px solid var(--line); background:var(--surface); overflow:hidden}
.shot-bar{display:flex; gap:.6rem; align-items:center; font-size:.74rem; color:var(--muted); padding:.5rem .7rem; border-bottom:1px solid var(--line-soft); background:var(--paper)}
.shot-body{aspect-ratio:16/9; display:grid; place-items:center; background:repeating-linear-gradient(45deg,#fff,#fff 12px,#FAF8F4 12px,#FAF8F4 24px); color:var(--muted); font-size:.86rem; text-align:center; padding:1rem}

/* prices */
.pricebox{background:var(--surface); border:1px solid var(--line); padding:1.5rem; height:100%}
.pricebox .lbl{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600}
.pricebox .amount{font-family:var(--serif); font-size:1.9rem; display:block; margin:.4rem 0 .5rem; font-variant-numeric:tabular-nums}
.pricebox .amount em{display:block; font-family:var(--sans); font-style:normal; font-size:.78rem; color:var(--muted); margin-top:.2rem}
.pricebox p{font-size:.9rem; color:var(--muted); margin:0}

/* quote slots */
.slot{border-left:2px solid var(--accent); padding:.35rem 0 .35rem 1.25rem; font-size:.95rem; color:var(--muted)}
.slot b{color:var(--ink)}

/* cta band */
.band{background:var(--ink); color:#F3F0EA; padding:clamp(2rem,4vw,3.2rem) 0}
.band h2{color:#fff; margin-bottom:.6rem}
.band p{color:#C9C5BD; margin-bottom:1.4rem; max-width:56ch}
.band a{color:#fff}

/* footer */
footer{padding:2.6rem 0 3rem; font-size:.88rem; color:var(--muted)}
footer a{color:var(--muted)}
footer a:hover{color:var(--ink)}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:100}
.skip:focus{left:.5rem; top:.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important; animation:none !important}}

/* ---- Modulseiten ---- */
.crumb{font-size:.8rem; color:var(--muted); padding:1.1rem 0 0}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb span{color:var(--line)}
.page-head{padding:1.4rem 0 clamp(1.6rem,3vw,2.4rem); border-bottom:1px solid var(--line)}
.page-head h1{max-width:24ch; margin-bottom:.9rem}
.page-head .lead-lg{max-width:58ch; margin-bottom:0}
.mod-body{padding:clamp(2rem,4vw,3.2rem) 0}
.mod-body h2{font-size:clamp(1.3rem,2.2vw,1.7rem); margin:2.4rem 0 .8rem}
.mod-body h2:first-child{margin-top:0}
.mod-body p{max-width:66ch}
.mod-body ul.tight{list-style:none; padding:0; margin:0 0 1rem; max-width:66ch}
.mod-body ul.tight li{position:relative; padding:.45rem 0 .45rem 1.4rem; border-bottom:1px solid var(--line-soft); font-size:.96rem}
.mod-body ul.tight li:last-child{border-bottom:0}
.mod-body ul.tight li::before{content:""; position:absolute; left:.15rem; top:1.05rem; width:7px; height:1px; background:var(--accent)}
.mod-body ul.tight li b{font-weight:600}
.mod-body ul.tight li span{color:var(--muted)}
.faq{border-top:1px solid var(--line); margin-top:2.2rem; padding-top:.4rem}
.faq details{border-bottom:1px solid var(--line-soft); padding:.85rem 0}
.faq summary{cursor:pointer; font-weight:600; font-size:.96rem; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--accent); font-weight:600}
.faq details[open] summary::after{content:"–"}
.faq p{font-size:.94rem; color:var(--muted); margin:.6rem 0 0; max-width:64ch}
.aside-box{background:var(--surface); border:1px solid var(--line); padding:1.3rem}
.aside-box h3{font-size:1rem; margin-bottom:.7rem}
.aside-box ul{list-style:none; padding:0; margin:0; font-size:.92rem}
.aside-box li{padding:.45rem 0; border-bottom:1px solid var(--line-soft)}
.aside-box li:last-child{border-bottom:0}
.aside-box a{text-decoration:none; color:var(--ink)}
.aside-box a:hover{color:var(--accent)}
.aside-box .note-line{font-size:.85rem; color:var(--muted); margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line)}
.modlist{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.modlist a{display:block; background:var(--surface); padding:1.3rem; text-decoration:none; color:var(--ink); transition:background .15s}
.modlist a:hover{background:#FCFBF8}
.modlist h3{font-size:1.05rem; margin-bottom:.3rem}
.modlist p{font-size:.88rem; color:var(--muted); margin:0}
.modlist .more{font-size:.8rem; color:var(--accent); font-weight:600; display:block; margin-top:.6rem}

/* Modulkarten: Überschriften im Hausrot */
.mod h3 a{color:var(--accent); text-decoration:none}
.mod h3 a:hover{color:#8E3317; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.mod h3 a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---- Downloadbereich ---- */
.form-login label{display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 .35rem}
.form-login input{width:100%; padding:.7rem .85rem; border:1px solid var(--line); background:#fff; border-radius:2px; font:inherit; margin-bottom:1.1rem}
.form-login input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.dl-panel{background:#fff; border:1px solid var(--line); padding:clamp(1.3rem,3vw,2rem); height:100%}
.dl-panel--quiet{background:var(--paper)}
.dl-panel h2{font-size:1.35rem; margin-bottom:.55rem}
.dl-panel .ver{font-family:var(--sans); font-size:.92rem; color:var(--accent); font-weight:600; letter-spacing:.02em}
.dl-meta{font-size:.82rem; color:var(--muted); margin:.55rem 0 1.2rem}
.dl-sub{border-top:1px solid var(--line-soft); margin-top:1.3rem; padding-top:1rem; font-size:.9rem; color:var(--muted)}
.dl-sub b{color:var(--ink)}
.preview-hint{display:inline-block; background:var(--accent); color:#fff; font-size:.78rem; letter-spacing:.04em; padding:.5rem .9rem; margin-top:1rem}