html{color-scheme:light}
:root{
  --paper:#FFFFFF; --panel:#FBF6EC; --ink:#17181C; --muted:#6B6C73; --rule:#17181C; --hair:#E7E1D4;
  --accent:#E9A400; --accent-ink:#A97900; --wash:#FBF6EC; --night:#FBF6EC; --on-night:#17181C;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --bar:290px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.04em;line-height:.95;text-transform:uppercase}
p{margin:0}
.k{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* Seitenleiste */
.rail{background:var(--paper);position:fixed;left:0;top:0;bottom:0;width:var(--bar);border-right:1px solid var(--hair);display:flex;flex-direction:column;padding:34px 30px;z-index:50}
.brand{display:block;text-decoration:none;line-height:0}
.brand img{width:190px;height:auto}
.mbar .brand img{width:132px}

.rail nav{margin-top:54px;display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.rail nav a{text-decoration:none;padding:15px 0;border-bottom:1px solid var(--hair);font-size:15px;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:10px}
.rail nav a span{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.1em}
.rail nav a:hover{color:var(--accent)}
.rail nav a.on{color:var(--accent)}
.rail nav a.on span{color:var(--accent)}
.rail .foot{margin-top:auto;padding-top:28px;font-size:13.5px;color:var(--muted);line-height:1.55}
.rail .foot a{text-decoration:none;display:block}
.rail .foot a:hover{color:var(--ink)}
.rail .foot .call{display:inline-block;margin-top:14px;color:var(--ink);font-weight:600;font-size:15px}
main{margin-left:var(--bar)}

/* mobile Leiste */
.mbar{display:none;position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--hair);padding:14px 20px;align-items:center;justify-content:space-between;gap:14px}
.mbar details{position:relative}
.mbar summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--rule);padding:10px 14px}
.mbar summary::-webkit-details-marker{display:none}
.mpanel{position:absolute;right:0;top:46px;width:min(82vw,290px);background:var(--paper);border:1px solid var(--rule);display:grid}
.mpanel a{text-decoration:none;padding:13px 16px;border-bottom:1px solid var(--hair);font-size:15px}
.mpanel a:last-child{border-bottom:0}
@media (max-width:1040px){
  .rail{display:none}main{margin-left:0}.mbar{display:flex}
}

/* Raster */
.pad{padding:0 clamp(20px,5vw,88px)}
.band{border-bottom:1px solid var(--hair)}
.band.dark{background:var(--panel);color:var(--ink);border-bottom-color:var(--hair)}
.band.dark .k{color:var(--muted)}
.band.dark p{color:var(--muted)}
.band.accent{background:var(--accent);color:#17181C;border-bottom:0}
.block{padding-block:clamp(56px,7vw,110px)}

/* Kopf */
.opener{padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,72px)}
.opener h1{font-size:clamp(46px,9.2vw,148px)}
.opener .lead{margin-top:34px;max-width:46ch;font-size:clamp(17px,1.5vw,20px);color:var(--muted)}
.opener .row{display:flex;flex-wrap:wrap;gap:34px;align-items:flex-end;justify-content:space-between;margin-top:44px}
.rule{height:1px;background:var(--rule);opacity:.18}
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;font-family:var(--sans)}
.btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn{border-color:#D5CEC0;border-radius:4px}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#17181C}
.btn.solid:hover{background:#D29300;border-color:#D29300;color:#17181C}
.band.dark .btn{border-color:#D8D1C0;color:var(--ink)}
.band.dark .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.band.accent .btn{border-color:rgba(0,0,0,.4);color:#17181C}
.band.accent .btn:hover{background:#17181C;color:#fff;border-color:#17181C}

/* Fakten als Zeilen */
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-inline:-30px}
.facts div{padding:28px 30px;border-right:1px solid var(--hair);display:flex;flex-direction:column;min-height:190px}
.facts div:last-child{border-right:0}
.facts b{display:block;font-size:clamp(19px,1.9vw,26px);letter-spacing:-.04em;line-height:1.05;text-transform:uppercase}
.facts span{display:block;margin-top:auto;padding-top:14px;font-size:14px;color:var(--muted)}
@media (max-width:900px){.facts{grid-template-columns:1fr 1fr;margin-inline:0}.facts div{border-right:0;border-top:1px solid var(--hair);min-height:0}}

/* Index-Liste (Leistungen) */
.index{border-top:1px solid var(--rule)}
.irow{display:grid;grid-template-columns:96px minmax(0,4fr) minmax(0,5fr) 48px;gap:24px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--hair);text-decoration:none;transition:padding .25s,background .25s}
.irow:hover{background:var(--wash);padding-inline:18px}
.irow:hover h3{color:var(--accent)}
.irow .no{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent)}
.irow h3{font-size:clamp(24px,3.4vw,42px)}
.irow p{color:var(--muted);font-size:16px;line-height:1.55}
.irow .arw{justify-self:end;font-size:22px;color:var(--accent);transition:transform .25s}
.irow:hover .arw{transform:translateX(6px)}
@media (max-width:820px){.irow{grid-template-columns:52px minmax(0,1fr);gap:8px 16px}.irow .arw{display:none}.irow p{grid-column:2}}

/* zweispaltiger Text */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(28px,5vw,84px);align-items:start}
.duo h2{font-size:clamp(28px,4.4vw,56px)}
.duo .body p+p{margin-top:16px}
.duo .body p{color:var(--muted);font-size:17.5px}
@media (max-width:860px){.duo{grid-template-columns:1fr}}

/* Aufzählung mit hängenden Nummern */
.hang{list-style:none;margin:28px 0 0;padding:0;counter-reset:h}
.hang li{counter-increment:h;display:grid;grid-template-columns:60px minmax(0,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--hair)}
.hang li::before{content:counter(h,decimal-leading-zero);font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent);padding-top:5px}
.hang b{display:block;margin-bottom:4px}
.hang span{color:var(--muted);font-size:16px}
.band.dark .hang li{border-top-color:#EAE3D5}
.band.dark .hang span{color:var(--muted)}

/* Zeitstrahl */
.track{margin-top:36px;border-left:1px solid var(--hair);padding-left:34px;display:grid;gap:34px}
.track .stop{position:relative}
.track .stop::before{content:"";position:absolute;left:-40px;top:8px;width:11px;height:11px;background:var(--accent)}
.track h3{font-size:clamp(20px,2.2vw,26px);margin-bottom:8px}
.track p{color:var(--muted);font-size:16px;max-width:60ch}
.band.dark .track{border-left-color:#E3DCCC}
.band.dark .track p{color:var(--muted)}

/* Produktraster */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.cell{padding:30px 26px;background:var(--paper);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);min-height:176px;display:flex;flex-direction:column;gap:10px}
.cell b{font-size:19px;text-transform:uppercase;letter-spacing:-.02em}
.cell span{color:var(--muted);font-size:15px}
.cell .ic{width:28px;height:28px;color:var(--accent)}
.band.dark .grid4,.band.dark .cell{border-color:var(--hair)}
.band.dark .cell span{color:var(--muted)}
@media (max-width:1000px){.grid4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}

/* Streifen */
.strip{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hair)}
.strip span{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:16px 26px 16px 0;color:var(--muted)}
.strip span::after{content:"/";margin-left:26px;color:var(--accent)}
.strip span:last-child::after{content:""}

/* Kontakt */
.cform{display:grid;gap:18px;max-width:640px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label.f{display:grid;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:10px 2px;width:100%;border-radius:0}
textarea{min-height:120px;resize:vertical;border:1px solid var(--rule);padding:12px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent)}
select{border-bottom:1px solid var(--rule)}
.note{font-size:13.5px;color:var(--muted)}
.msg{padding:14px 16px;border:1px solid var(--accent);font-size:15px}
@media (max-width:560px){.frow{grid-template-columns:1fr}}
.contact-lines{display:grid;gap:0;margin-top:8px}
.contact-lines div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair)}
.contact-lines .k{padding-top:3px}

/* Fußzeile */
.pagefoot{padding-block:40px;display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:center;border-top:1px solid var(--hair);font-size:13.5px;color:var(--muted)}
.pagefoot a{text-decoration:none}
.pagefoot a:hover{color:var(--ink)}
.pagefoot nav{display:flex;gap:26px}

/* Rechtstexte */
.legal{max-width:76ch}
.legal h2{font-size:22px;margin-block:40px 14px;padding-top:24px;border-top:1px solid var(--hair);text-transform:none;letter-spacing:-.02em}
.legal h3{font-size:17px;margin-block:22px 8px;text-transform:none;letter-spacing:-.01em}
.legal p+p{margin-top:12px}
.legal ul{padding-left:20px;display:grid;gap:6px;margin:12px 0}
.legal .facts-dl{display:grid;grid-template-columns:200px 1fr;gap:0 24px;margin:0}
.legal .facts-dl dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:14px 0;border-top:1px solid var(--hair)}
.legal .facts-dl dd{margin:0;padding:14px 0;border-top:1px solid var(--hair)}
@media (max-width:620px){.legal .facts-dl{grid-template-columns:1fr}.legal .facts-dl dd{border-top:0;padding-top:0}}
.mark-ph{background:#FCEFCB;padding:0 4px}

body{background:var(--paper)}
.band.accent .k{color:rgba(0,0,0,.6)!important}
.band.accent h2,.band.accent p{color:#17181C}
.band.accent p{opacity:.78}
.facts b{color:var(--ink)}
.opener h1{color:var(--ink)}
.opener h1 em{font-style:normal;color:var(--accent)}
.strip span::after{color:var(--accent)}
input,select,textarea{color:var(--ink);border-color:#CFC8B8}
select option{background:var(--panel)}
.rail nav a{color:var(--ink)}
.pagefoot{border-top-color:var(--hair)}
::selection{background:var(--accent);color:#17181C}

body{background:var(--paper);color:var(--ink)}
.band.accent .k{color:rgba(23,24,28,.62)!important}
.pagefoot{color:var(--muted)}
.rail nav a:hover{color:var(--accent-ink)}
.rail nav a.on,.rail nav a.on span{color:var(--accent-ink)}
.irow .no{color:var(--accent-ink)}
.irow:hover h3{color:var(--accent-ink)}
.hang li::before{color:var(--accent-ink)}
.track .stop::before{background:var(--accent)}
.cell .ic{color:var(--accent-ink)}
.strip span::after{color:var(--accent)}
.opener h1 em{color:var(--accent-ink)}
.mpanel{box-shadow:0 18px 40px rgba(0,0,0,.10)}
.mbar summary{border-radius:4px}

/* Links ohne Unterstrich */
a{text-decoration:none}
.legal p a,.legal li a{border-bottom:1px solid var(--hair)}
.legal p a:hover,.legal li a:hover{border-bottom-color:var(--accent)}

/* Rechtsseiten: Datenblatt + nummerierte Paragrafen */
.sheet{width:100%;border-collapse:collapse;margin:0}
.sheet th,.sheet td{text-align:left;vertical-align:top;padding:16px 18px;border:1px solid var(--hair);font-weight:400}
.sheet th{width:210px;background:var(--panel);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sheet td b{font-weight:700}
@media (max-width:640px){.sheet,.sheet tbody,.sheet tr,.sheet th,.sheet td{display:block;width:auto}.sheet th{border-bottom:0}.sheet td{border-top:0;margin-bottom:-1px}}

.para{display:grid;grid-template-columns:96px minmax(0,1fr);gap:26px;padding:34px 0;border-top:1px solid var(--hair)}
.para .pn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent-ink);padding-top:6px}
.para h2{font-size:clamp(20px,2.2vw,26px);margin:0 0 12px;text-transform:none;letter-spacing:-.02em;border:0;padding:0}
.para h3{font-size:16px;margin:20px 0 6px;text-transform:none;letter-spacing:-.01em}
.para p{color:var(--muted);font-size:16.5px}
.para p+p{margin-top:12px}
.para b{color:var(--ink)}
.para ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.para ul li{color:var(--muted);padding-left:20px;position:relative}
.para ul li::before{content:"–";position:absolute;left:0;color:var(--accent-ink)}
@media (max-width:640px){.para{grid-template-columns:1fr;gap:10px;padding:26px 0}}
.leadnote{max-width:62ch;color:var(--muted);font-size:17.5px;margin-bottom:8px}

/* Bildmotive */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.shots figure{margin:0;border:1px solid var(--hair);background:var(--paper)}
.shots img{display:block;width:100%;height:auto}
.shots figcaption{padding:14px 18px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.shots figcaption b{display:block;font-family:var(--sans);font-size:15.5px;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:4px;font-weight:700}
@media (max-width:900px){.shots{grid-template-columns:1fr}}
.shot-single{border:1px solid var(--hair);background:var(--paper);margin-top:30px}
.shot-single img{display:block;width:100%;height:auto}
.shot-single figcaption{padding:14px 18px;border-top:1px solid var(--hair);font-size:14.5px;color:var(--muted)}