@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Saira";src:url(fonts/saira.woff2) format("woff2");font-weight:100 900;font-stretch:50% 125%;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#F2F3F1; --paper:#FFFFFF; --plate:#17191C; --on-plate:#F2F3F0; --ink:#17191C; --ink-soft:#5A5F66; --line:#D6D9D4; --red:#C8312C;
  --gut:max(24px, calc((100vw - 1160px) / 2 + 24px));
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#131518;--paper:#1A1D21;--plate:#0B0C0E;--on-plate:#EEF0EC;--ink:#ECEEEA;--ink-soft:#A0A6AD;--line:#2E3338;--red:#F0594F}}
:root[data-theme="dark"]{--bg:#131518;--paper:#1A1D21;--plate:#0B0C0E;--on-plate:#EEF0EC;--ink:#ECEEEA;--ink-soft:#A0A6AD;--line:#2E3338;--red:#F0594F}
*,*::before,*::after{box-sizing:inherit;margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;font-size:17px;line-height:1.62;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:"Saira",sans-serif;font-stretch:87.5%;font-weight:700;line-height:1.06}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:24px}
.btn{display:inline-block;padding:13px 22px;font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid currentColor;border-radius:2px;font-family:"Archivo",sans-serif;cursor:pointer;background:none;color:inherit}
.btn.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.solid:hover{filter:brightness(1.07)}
.logo-l{height:26px;width:auto;display:block}
.logo-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-light{display:none} :root:not([data-theme="light"]) .logo-dark{display:block}}
:root[data-theme="dark"] .logo-light{display:none} :root[data-theme="dark"] .logo-dark{display:block}

/* Kopf mit Fertigungs-Menü */
.top{position:relative;z-index:20}
.head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:18px}
.nav{display:flex;gap:24px;align-items:center;font-size:15px}
.nav>a,.nav summary{text-decoration:none;color:var(--ink-soft);cursor:pointer;list-style:none}
.nav>a:hover,.nav summary:hover,.nav>a[aria-current="page"]{color:var(--ink)}
.nav summary::-webkit-details-marker{display:none}
.nav summary::after{content:"";display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-3px);margin-left:8px}
.nav .btn{padding:8px 16px;color:var(--ink)}
.dd{position:relative}
.dd .menu{position:absolute;top:calc(100% + 14px);left:-18px;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 40px -20px rgba(0,0,0,.35);min-width:290px;padding:8px 0}
.dd .menu a{display:block;padding:10px 18px;text-decoration:none;color:var(--ink)}
.dd .menu a:hover{background:var(--bg)}
.dd .menu a::before{content:"";display:inline-block;width:8px;height:8px;background:var(--red);margin-right:12px;vertical-align:1px}
.burger{display:none}
@media (max-width:900px){
  .burger{display:block}
  .burger summary{list-style:none;cursor:pointer;border:1.5px solid var(--ink);padding:7px 12px;font-size:14px;font-weight:600}
  .burger summary::-webkit-details-marker{display:none}
  .nav{display:none}
  .burger[open]+.nav,.nav.open{display:flex}
  .mnav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 24px 20px;display:grid}
  .mnav a{padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none}
  .mnav a.sub{padding-left:18px;color:var(--ink-soft)}
}
@media (min-width:901px){.mnav{display:none}}

/* Hero nach Kurzzeichen 3B·2 */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.hero .p{background:var(--plate);color:var(--on-plate)}
.hero .p1{padding:60px 48px 34px var(--gut)}
.hero .p2{padding:30px 48px 48px var(--gut);font-size:15px}
.hero .p2 span{opacity:.7}
.hero h1{font-size:clamp(38px,5.2vw,66px);max-width:13ch}
.hero .crumb{font-size:14px;opacity:.65;margin-bottom:18px;display:block}
.hero .crumb a{text-decoration:none}
.hero .s1{padding-right:var(--gut);overflow:hidden}
.hero .s1 img{width:100%;height:100%;object-fit:cover}
.hero .s2{padding:30px var(--gut) 48px 48px;display:flex;flex-direction:column;gap:22px}
.hero .s2 p{font-size:19px;color:var(--ink-soft);max-width:42ch}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.hband{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.hband .l{background:var(--plate)}
.lines{display:grid;gap:5px;padding-block:2px}
.lines i{display:block;height:4px;background:var(--red)}

/* Abschnitte */
section{padding-block:72px 76px}
section.tight{padding-top:0}
.marker{display:flex;align-items:center;padding-left:var(--gut);margin-bottom:22px}
.marker .sq{width:44px;height:44px;background:var(--plate);flex-shrink:0}
.mband{flex:1;display:grid;gap:3px}.mband i{display:block;height:2.5px;background:var(--red)}
.sh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px;align-items:end;margin-bottom:34px}
.sh h2{font-size:clamp(28px,3.6vw,44px)}.sh p{color:var(--ink-soft);max-width:54ch}

/* Auswahlhilfe */
.tool{background:var(--paper);border:1px solid var(--line);padding:28px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:34px}
.tool .q{font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft);margin:18px 0 9px;font-weight:600}
.tool .q:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);padding:9px 14px;border-radius:2px;font:500 15px "Archivo",sans-serif;cursor:pointer}
.chip:hover{border-color:var(--ink-soft)}
.chip[aria-pressed="true"]{border-color:var(--red);background:color-mix(in srgb,var(--red) 10%,var(--bg))}
.qty{display:flex;align-items:center;gap:12px}.qty input{flex:1;accent-color:var(--red)}
.qty output{min-width:92px;text-align:right;font-family:"IBM Plex Mono",monospace;font-size:14.5px}
.result{border-left:4px solid var(--plate);padding-left:24px;display:flex;flex-direction:column;gap:12px}
.result .row span{display:block;font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft);font-weight:500}
.result .row b{font-family:"Saira";font-stretch:87.5%;font-size:21px;line-height:1.2}
.result .hint{color:var(--ink-soft);font-size:15px}
.result .acts{margin-top:auto;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.result .acts a.more{font-size:15px;font-weight:600}

/* Produkttabelle */
.table{border-top:2px solid var(--ink)}
.trow{display:grid;grid-template-columns:200px minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:24px;padding-block:22px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:start}
.trow:hover h3{color:var(--red)}
.trow img{aspect-ratio:4/3;object-fit:cover;width:100%}
.trow h3{font-size:21px}.trow p{margin-top:6px;color:var(--ink-soft);font-size:15px}
.trow .go{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:600;border-bottom:2px solid var(--red)}
.trow .c{font-size:14.5px;font-weight:500}
.trow .c span{display:block;font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft);font-weight:500;margin-bottom:3px}
.hotelbox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;background:var(--plate);color:var(--on-plate);padding:40px;margin-top:36px}
.hotelbox h3{font-size:clamp(24px,3vw,34px)}.hotelbox p{margin-top:10px;opacity:.75;max-width:58ch}

/* Verfahren-Raster */
.procs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.proc{padding:22px 22px 24px 0;border-right:1px solid var(--line);text-decoration:none;color:inherit}
.proc+.proc{padding-left:22px}.proc:last-child{border-right:0}
.proc img{aspect-ratio:1/1;object-fit:cover;width:100%;margin-bottom:16px}
.proc h3{font-size:20px}.proc p{margin-top:8px;color:var(--ink-soft);font-size:15px}
.proc:hover h3{color:var(--red)}

/* Über uns */
.team{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px}
.team p{color:var(--ink-soft);max-width:60ch;font-size:17.5px}.team p+p{margin-top:14px}
.facts{display:grid;gap:12px;align-content:start}
.facts div{display:flex;gap:12px;align-items:center;font-weight:600}
.facts div::before{content:"";width:10px;height:10px;background:var(--red);flex-shrink:0}
.teamph{margin-top:34px;aspect-ratio:3/2;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 6%,transparent) 0 10px,transparent 10px 20px),var(--paper);border:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent);display:grid;place-items:center;text-align:center;color:var(--ink-soft);font-size:14px}
.teamph b{display:block;color:var(--ink);font-size:16px}

/* Unterseiten */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px}
.intro strong{display:block;font-family:"Saira",system-ui,sans-serif;font-stretch:87.5%;font-size:clamp(24px,2.8vw,32px);line-height:1.15;font-weight:700}
.intro p{color:var(--ink-soft);font-size:18px;max-width:60ch}
.spec{width:100%;border-collapse:collapse;border-top:2px solid var(--ink);font-size:16px}
.spec th{font-size:12.5px;letter-spacing:.05em;color:var(--ink-soft);font-weight:600;text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.spec td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec td:first-child{font-weight:600}
.uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.uses div{padding:18px 18px 18px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:baseline;font-weight:500}
.uses div::before{content:"";width:9px;height:9px;background:var(--red);flex-shrink:0;transform:translateY(-1px)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gallery figure{margin:0}.gallery img{aspect-ratio:1/1;object-fit:cover;width:100%}
.gallery figcaption{margin-top:10px;font-size:14.5px;color:var(--ink-soft)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink);counter-reset:s}
.steps li{padding:20px 20px 22px 0;border-right:1px solid var(--line);counter-increment:s}
.steps li+li{padding-left:20px}.steps li:last-child{border-right:0}
.steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;background:var(--plate);color:var(--on-plate);font-family:"Saira";font-weight:700;margin-bottom:14px}
.steps h3{font-size:19px}.steps p{margin-top:6px;color:var(--ink-soft);font-size:15px}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 40px 18px 0;font-weight:600;font-size:17.5px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:26px;font-weight:400;color:var(--red)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 20px;color:var(--ink-soft);max-width:70ch}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.more a{display:block;text-decoration:none;background:var(--paper);border:1px solid var(--line);padding:20px 22px;font-weight:600}
.more a span{display:block;font-size:13px;color:var(--ink-soft);font-weight:500;margin-bottom:4px}
.more a:hover{border-color:var(--ink)}
.vf{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:start;padding-block:34px;border-top:1px solid var(--line)}
.vf:first-child{border-top:2px solid var(--ink)}
.vf img{aspect-ratio:1/1;object-fit:cover;width:100%}
.vf h2{font-size:clamp(26px,3.2vw,38px)}.vf>div>p{margin-top:12px;color:var(--ink-soft);font-size:18px;max-width:56ch}
.vf dl{margin-top:20px;display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line);font-size:15.5px}
.vf dt,.vf dd{padding:10px 0;border-bottom:1px solid var(--line)}
.vf dt{color:var(--ink-soft);padding-right:20px}.vf dd{font-weight:500}
.legal{max-width:760px}
.legal h2{font-size:24px;margin:34px 0 10px}
.legal p,.legal li{color:var(--ink-soft)}
.legal p+p{margin-top:10px}
.legal dl{display:grid;grid-template-columns:auto 1fr;gap:8px 24px}
.legal dt{color:var(--ink-soft)}.legal dd{font-weight:500}
.todo{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--ink);padding:0 4px;font-weight:600}

/* Kontakt und Fuß */
.contact{background:var(--plate);color:var(--on-plate);padding-block:0}
.contact .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding-block:64px}
.contact h2{font-size:clamp(30px,4vw,46px)}.contact p{margin-top:12px;opacity:.75;max-width:44ch}
.contact dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;align-self:end;font-size:17px}
.contact dt{opacity:.6}.contact dd{font-weight:600}.contact dd a{text-decoration:none}
footer{background:var(--plate);color:var(--on-plate);border-top:1px solid rgba(255,255,255,.08)}
footer .in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;padding-block:22px 30px;font-size:14px}
footer .links{display:flex;gap:18px;flex-wrap:wrap;opacity:.75}
.kz{height:36px;width:auto;display:block}
.concept-note{position:fixed;right:14px;bottom:14px;background:var(--plate);color:var(--on-plate);font-size:12.5px;padding:7px 11px;z-index:30;opacity:.85}

@media (max-width:900px){
  .hero,.hband{grid-template-columns:minmax(0,1fr)}
  .hero .p1{padding:44px 24px 26px}.hero .p2{padding:24px 24px 30px}
  .hero .s1{padding:0;order:1}.hero .s1 img{aspect-ratio:3/2;height:auto}
  .hero .s2{padding:30px 24px 6px}
  .hband .lines:not(.l){display:none}
  .sh,.team,.contact .in,.intro,.vf{grid-template-columns:minmax(0,1fr);gap:22px}
  .tool{grid-template-columns:minmax(0,1fr);padding:22px}
  .result{border-left:0;border-top:4px solid var(--plate);padding:18px 0 0}
  .trow{grid-template-columns:minmax(0,1fr);gap:10px}
  .procs,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proc,.steps li{border-right:0;padding-left:0!important;border-bottom:1px solid var(--line)}
  .uses,.more{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .hotelbox{grid-template-columns:minmax(0,1fr);padding:28px}
}
@media (max-width:480px){.procs,.steps{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:no-preference){
  .hband .lines i,.mband i{transform-origin:left;animation:run .8s cubic-bezier(.2,.8,.3,1) both}
  .hband .lines i:nth-child(2),.mband i:nth-child(2){animation-delay:.07s}.hband .lines i:nth-child(3),.mband i:nth-child(3){animation-delay:.14s}
  @keyframes run{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media (max-width:600px){
  .spec thead{display:none}
  .spec,.spec tbody,.spec tr,.spec td{display:block;width:100%}
  .spec tr{border-top:1px solid var(--line);padding:12px 0}
  .spec td{border:0;padding:3px 0}
  .spec td::before{content:attr(data-l);display:block;font:500 11px/1.4 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
  .spec td:first-child{font-weight:600}
}
@media (max-width:900px){.head{position:relative}.burger{position:static}} html{overflow-x:clip}

.hero.sub h1{font-size:clamp(32px,4.2vw,54px);max-width:none;hyphens:auto;overflow-wrap:break-word}
.teamph{aspect-ratio:auto;min-height:260px;max-height:380px}

.factsec{padding-block:0!important}
.keyfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);margin-top:-1px}
.keyfacts div{padding:26px 22px 26px 0;border-right:1px solid var(--line);padding-left:22px}
.keyfacts div:first-child{padding-left:0}.keyfacts div:last-child{border-right:0}
.keyfacts b{display:block;font-family:"Saira",sans-serif;font-stretch:87.5%;font-size:26px;line-height:1.1;margin-bottom:6px}
.keyfacts b::before{content:"";display:block;width:28px;height:3px;background:var(--red);margin-bottom:12px}
.keyfacts span{color:var(--ink-soft);font-size:15px;line-height:1.45;display:block}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.feature p{font-size:18px;margin:0;color:var(--ink-soft)}
.feature ul{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.feature li{padding:12px 0 12px 22px;border-bottom:1px solid var(--line);position:relative;font-weight:500}
.feature li::before{content:"";position:absolute;left:0;top:21px;width:9px;height:9px;background:var(--red)}
@media (max-width:900px){.keyfacts{grid-template-columns:1fr 1fr}.keyfacts div{padding-left:0!important;border-right:0;border-bottom:1px solid var(--line)}.feature{grid-template-columns:1fr;gap:24px}}

.vimgs{display:grid;gap:14px}
.vsub{margin-top:34px;padding-top:26px;border-top:2px solid var(--ink)}
.vsub h3{font-family:"Saira",sans-serif;font-stretch:87.5%;font-size:clamp(22px,2.4vw,28px)}
.vsub p{margin-top:10px;color:var(--ink-soft);font-size:17px;max-width:56ch}
@media (max-width:900px){.vimgs{grid-template-columns:1fr 1fr}}
.teamimg{margin:34px 0 0;max-width:640px}.teamimg img{width:100%;height:auto;display:block}
.pfig{margin:0;max-width:780px}.pfig img{width:100%;height:auto;display:block}.pfig figcaption{margin-top:10px;font-size:14px;color:var(--ink-soft)}
.proc video{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;margin-bottom:16px;display:block;background:#111}.vf video{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;display:block;background:#111}
.legal ul{margin:8px 0 14px;padding-left:20px}.legal li{margin:3px 0}
.figs{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}.figs .pfig{max-width:none}.then{margin-top:34px}.then .pfig img{aspect-ratio:4/3;object-fit:cover}@media (max-width:700px){.figs{grid-template-columns:1fr}}