.back{font-size:15px;font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.back:hover{text-decoration:underline;text-underline-offset:6px}
.sub{padding-top:calc(var(--hdr) + clamp(48px,8vw,112px));padding-bottom:clamp(64px,10vw,140px)}
.sub h1{margin:0 0 clamp(24px,4vw,48px);font-size:clamp(72px,13vw,220px)}
.sub .lead{max-width:560px;font-size:19px;color:var(--g1)}
.sub h2{margin:56px 0 12px;font-size:clamp(28px,3vw,40px)}
.sub p,.sub li{max-width:640px;font-size:17px;line-height:1.7;color:#CFCDC7}
.sub ul{padding-left:1.1em}
.ph{background:var(--wh);color:var(--bk);padding:0 .3em;font-weight:600}
.pk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--g2);border:1px solid var(--g2);margin-top:clamp(32px,5vw,64px)}
.pk article{background:var(--bk);padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;gap:20px;scroll-margin-top:calc(var(--hdr) + 16px)}
.pk article:target{background:var(--sf)}
.pk .no{font-size:22px;color:var(--g1)}
.pk h2{margin:0;font-size:clamp(56px,6.4vw,110px)}
.pk ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pk li{border-top:1px solid var(--g2);padding-top:10px;font-size:17px;color:var(--wh)}
.pk .pr{font-size:clamp(48px,5.4vw,84px);margin-top:auto;padding-top:16px}
.pk .pr small{display:block;font-size:14px;font-weight:400;font-stretch:100%;letter-spacing:0;color:var(--g1);margin-top:8px;text-transform:none}
.flow2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:clamp(40px,6vw,80px) 0 0;padding:0;list-style:none}
.flow2 li{border-top:3px solid var(--wh);padding-top:16px;color:var(--wh);font-size:17px;max-width:none}
.flow2 b{display:block;font-weight:800;font-stretch:75%;font-size:36px;margin-bottom:6px}
.note{margin-top:32px;color:var(--g1) !important;font-size:15px !important}
@media(max-width:860px){.pk{grid-template-columns:minmax(0,1fr)}.flow2{grid-template-columns:repeat(2,minmax(0,1fr))}}

.sub-top{padding-bottom:0}
.pk li{line-height:1.5}
.sec .flow2 li{font-size:17px}
.sec .note{max-width:640px}
.pk article .btn{align-self:flex-start}
.pk3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pk3 h2{font-size:clamp(40px,4.4vw,72px)}
.pk3 .pr{font-size:clamp(40px,4.2vw,64px)}
@media(max-width:1100px){.pk3{grid-template-columns:minmax(0,1fr)}}
.sec .flow2{margin-top:clamp(40px,6vw,72px)}
.sub .pk-h,.pk-h{font-size:clamp(44px,6vw,96px);margin:clamp(72px,9vw,128px) 0 16px}
.pk-lead{max-width:560px}
.pk-h + .pk-lead + .pk{margin-top:clamp(24px,4vw,48px)}

/* ---------- seo-unterseiten: pakete, blog ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;letter-spacing:1.5px;text-transform:lowercase;color:var(--g1);margin:0 0 clamp(28px,4vw,48px)}
.crumb a{color:var(--g1);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.crumb a:hover{color:var(--wh)}
.crumb i{font-style:normal;color:var(--g3)}
.crumb [aria-current]{color:var(--wh)}
.kicker{margin:0 0 16px !important;font-size:13px !important;letter-spacing:2px;text-transform:lowercase;color:var(--g1) !important}
.sub h1.h1-l{font-size:clamp(48px,8.2vw,140px);max-width:15ch}
.post h1.h1-l{font-size:clamp(44px,6.6vw,112px);max-width:16ch}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--g2);border:1px solid var(--g2);margin:clamp(36px,5vw,64px) 0 0}
.facts>div{background:var(--bk);padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:10px}
.facts dt{font-size:13px;letter-spacing:1.5px;text-transform:lowercase;color:var(--g1)}
.facts dd{margin:0;font-size:clamp(34px,4vw,64px)}
.pnote{margin:14px 0 0;font-size:14px !important;color:var(--g1) !important}
.sub .cta{margin-top:28px}
.blk{margin-top:clamp(72px,9vw,128px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,4vw,64px);border-top:1px solid var(--g2);padding-top:clamp(24px,3vw,40px)}
.sub .blk>h2{margin:0;font-size:clamp(36px,4.4vw,72px)}
.blk .flow2{margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.incl{margin:0;padding:0 !important;list-style:none;display:flex;flex-direction:column}
.incl li{border-bottom:1px solid var(--g2);padding:12px 0;color:var(--wh);max-width:none}
.incl li:first-child{padding-top:0}
.prose p,.prose li{color:#CFCDC7}
.prose p{margin:0 0 18px}
.sub a:not(.btn):not(.rel-c):not(.logo):not(.roll):not(.back):not(.hallo){text-underline-offset:4px}
.faq details{border-bottom:1px solid var(--g2)}
.faq details:first-child summary{padding-top:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:18px 0;font-weight:700;font-size:19px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:800;font-size:28px;line-height:.9;flex:none;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:2px;background:var(--g2);border:1px solid var(--g2)}
.rel-c{background:var(--bk);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:12px;text-decoration:none;min-height:220px;transition:background .3s,color .3s}
.rel-c:hover{background:var(--wh);color:var(--bk)}
.rel-c .no{font-size:13px;letter-spacing:1.5px;color:var(--g1);font-stretch:100%;font-weight:500}
.rel-n{font-size:clamp(36px,3.6vw,56px)}
.rel-n-s{font-size:clamp(28px,2.6vw,40px)}
.rel-d{font-size:15px;line-height:1.5;color:var(--g1)}
.rel-c:hover .rel-d,.rel-c:hover .no{color:var(--g3)}
.rel-f{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;font-weight:700}
.rel-f .disp{font-size:28px}
.pk h3{margin:0;font-size:clamp(56px,6.4vw,110px)}
.pk3 h3{font-size:clamp(40px,4.4vw,72px)}
.pk h3 a{text-decoration:none}
.pk h3 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.pk-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.pk-act .ulink{font-size:15px}
/* blog */
.posts{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--g2)}
.post-row a{display:grid;grid-template-columns:80px minmax(0,1fr) 120px;gap:24px;align-items:center;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--g2);text-decoration:none;transition:background .3s,color .3s,padding .4s}
.post-row a:hover{background:var(--wh);color:var(--bk);padding-left:24px;padding-right:24px}
.post-row .no{font-size:22px;color:var(--g1)}
.sub .post-row h2{margin:0 0 10px;font-size:clamp(34px,4.4vw,68px)}
.post-x{display:block;font-size:16px;line-height:1.55;color:var(--g1);max-width:620px}
.post-row a:hover .post-x,.post-row a:hover .no{color:var(--g3)}
.post-m{text-align:right;font-weight:700;font-size:15px}
.post{max-width:820px}
.post .prose{margin-top:clamp(32px,4vw,56px)}
.post .prose .lead{font-size:21px;line-height:1.55;color:var(--wh);max-width:680px;margin-bottom:8px}
.sub .post .prose h2{margin:64px 0 16px;font-size:clamp(34px,4vw,56px);font-weight:800;font-stretch:75%;letter-spacing:-.03em;text-transform:lowercase;line-height:.95}
.post .prose p,.post .prose li{font-size:18px;line-height:1.75;max-width:680px}
.post .prose ul,.post .prose ol{padding-left:1.2em;margin:0 0 18px}
.post .prose li{margin-bottom:8px}
.post .prose strong{color:var(--wh)}
.cta-box{margin-top:clamp(48px,6vw,80px);border:1px solid var(--wh);padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cta-box p{margin:0}
.cta-h{font-size:clamp(30px,3.4vw,48px) !important;color:var(--wh) !important;line-height:1 !important}
@media(max-width:860px){
  .blk{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .post-row a{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .post-m{display:none}
}
@media(max-width:520px){.blk .flow2{grid-template-columns:minmax(0,1fr)}}

/* anfrage-formular */
.frm{max-width:640px;margin-top:clamp(32px,5vw,56px);display:grid;gap:22px}
.frm .f{display:grid;gap:8px}
.frm label{font-size:13px;letter-spacing:1.5px;text-transform:lowercase;color:var(--g1)}
.frm input,.frm select,.frm textarea{width:100%;font:inherit;font-size:17px;color:var(--wh);background:var(--sf);border:1px solid var(--g3);border-radius:0;padding:14px 16px;outline:none}
.frm textarea{resize:vertical;line-height:1.5}
.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:var(--wh)}
.frm .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.frm-note{font-size:14px!important;color:var(--g1)!important}
.frm-err{margin:0;color:#ff9b8a;font-size:15px}
.frm button.btn{justify-self:start;cursor:pointer;border:0}
.frm button[disabled]{opacity:.4;cursor:not-allowed}

/* --- Umbau 10.11.2026: Bausätze, Beispiele, Maschine --- */
.ex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--g2);border:1px solid var(--g2)}
.ex-c{display:flex;flex-direction:column;background:var(--bk);color:var(--wh);text-decoration:none}
.ex-i{display:block;overflow:hidden;aspect-ratio:16/9}
.ex-i img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);transform:scale(1.02);transition:filter .7s,transform 1.2s cubic-bezier(.16,1,.3,1)}
.ex-c:hover .ex-i img{filter:none;transform:scale(1.08)}
.ex-t{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:clamp(20px,2.4vw,32px)}
.ex-n{font-size:clamp(36px,4vw,64px);line-height:.9}
.ex-d{grid-column:1;font-size:15px;color:var(--g1)}
.ex-m{grid-column:2;grid-row:1 / span 2;align-self:end;font-weight:700;font-size:15px}
.mach{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;border:1px solid var(--wh);padding:clamp(28px,5vw,72px);margin-top:clamp(48px,7vw,96px);position:relative;overflow:hidden}
.mach-h{font-size:clamp(64px,9vw,150px);line-height:.85;margin:0 0 20px}
.mach .lead{max-width:520px}
.mach-f{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:32px}
.mach-p{font-size:clamp(36px,4vw,60px);line-height:.9}
.mach-r{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:m}
.mach-r li{counter-increment:m;border:1px solid var(--g3);padding:14px 18px;display:flex;justify-content:space-between;font-weight:800;font-stretch:75%;font-size:clamp(26px,2.6vw,40px);text-transform:lowercase;color:var(--g1);animation:mach-on 5s infinite}
.mach-r li::after{content:"0" counter(m);font-size:15px;font-weight:400;font-stretch:100%;color:var(--g1)}
.mach-r li:nth-child(2){animation-delay:1s}.mach-r li:nth-child(3){animation-delay:2s}.mach-r li:nth-child(4){animation-delay:3s}.mach-r li:nth-child(5){animation-delay:4s}
@keyframes mach-on{0%,100%{background:transparent;color:var(--g1)}8%,18%{background:var(--wh);color:var(--bk)}26%{background:transparent;color:var(--g1)}}
.note-x{margin-top:clamp(28px,4vw,48px);border-left:3px solid var(--wh);padding:4px 0 4px 18px;max-width:640px;color:var(--g1);font-size:16px;line-height:1.6}
.vid{border:1px solid var(--g2);background:#F2F0EB}
.vid video{display:block;width:100%;height:auto}
@media (max-width:860px){.ex{grid-template-columns:1fr}.mach{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mach-r li{animation:none}}

/* --- 10.11.2026: Beispiele am Desktop als Browserfenster mit Scroll-Vorschau --- */
.ex-b{display:none}
@media (min-width:861px){
.ex{gap:clamp(24px,3vw,44px);background:none;border:0}
.ex-c{background:none}
.ex-i{display:none}
.ex-b{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--g3);background:#1B1B1D;box-shadow:0 30px 60px rgba(0,0,0,.45);transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s}
.ex-c:hover .ex-b{transform:translateY(-8px);box-shadow:0 40px 80px rgba(0,0,0,.55)}
.ex-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#232326;border-bottom:1px solid var(--g3)}
.ex-bar i{width:11px;height:11px;border-radius:50%;background:#4A4A4E}
.ex-url{margin-left:12px;font-size:12px;color:var(--g1);background:#161618;border-radius:6px;padding:5px 12px;flex:0 1 60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-v{display:block;aspect-ratio:16/10;overflow:hidden;background:#F2F0EB}
.ex-v img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;filter:grayscale(1) contrast(1.05);transition:object-position 1.4s cubic-bezier(.16,1,.3,1),filter .7s}
.ex-c:hover .ex-v img{filter:none;object-position:50% 100%;transition:object-position 8s cubic-bezier(.45,0,.55,1),filter .7s}
.ex-t{padding:20px 4px 0}
}
@media (min-width:861px) and (prefers-reduced-motion:reduce){.ex-c:hover .ex-v img{object-position:50% 0;filter:none}}

/* Handy: Beispiele werden farbig, sobald sie im Bild sind */
@media (max-width:860px){.ex-c.vis .ex-i img{filter:none;transform:scale(1.07)}}