/* Dachdeckerei Eckner – Schiefer, Kupfer, Kalk. Schriften lokal (OFL). */
@font-face{font-family:"Wix Madefor Text";src:url(fonts/wix-madefor-text-latin-wght-normal.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Wix Madefor Text";src:url(fonts/wix-madefor-text-latin-wght-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:"Wix Madefor Display";src:url(fonts/wix-madefor-display-latin-wght-normal.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --sc:#2b2b2b;--sc2:#383838;--sc3:#4a4a4a;
  --ka:#ffffff;--ka2:#eef3f7;--ka3:#cbdce9;
  --zn:#e7eaea;
  --cu:#a9271a;--cu-d:#a9271a;--cu-l:#ff7d6b;
  --pa:#cbdce9;--pa-d:#2b5672;
  --zi:#a9271a;
  --mut:#5a5a5a;--mut-d:#b8b8b8;
  --r:6px;--gut:clamp(18px,4.2vw,44px);--max:1240px;
  --cut:clamp(28px,5.5vw,84px);
  --head:76px;
  --f:"Wix Madefor Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs:"Wix Madefor Text",system-ui,sans-serif;
  --fm:"Wix Madefor Text",system-ui,sans-serif;--fd:"Wix Madefor Display","Wix Madefor Text",system-ui,sans-serif;
  --edc-bg:#2b2b2b;--edc-fg:#ffffff;--edc-ac:#a9271a;--edc-ac-ink:#ffffff;--edc-radius:10px;--edc-font:"Wix Madefor Text",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ka);color:var(--sc);font:400 17px/1.62 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--cu);outline-offset:3px;border-radius:3px}
.wrap{width:100%;max-width:calc(var(--max) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--cu);color:#fff;padding:10px 16px;z-index:200;font-weight:700;border-radius:var(--r);transition:top .2s}
.skip:focus{top:12px}

/* Typografie */
h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:800;line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(2.5rem,7.4vw,6.2rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.6rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.012em;line-height:1.15}
p{margin:0 0 1em}
em,.it{font-family:inherit;font-style:italic;font-weight:inherit;letter-spacing:0;color:var(--cu-d)}
.dark em,.dark .it{color:var(--cu-l)}
.lab{font-family:var(--fm);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cu-d);display:inline-flex;align-items:center;gap:.7em}
.dark .lab{color:var(--cu-l)}
.lab::before{content:"";width:34px;height:8px;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 6px);opacity:.9}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;color:var(--mut);max-width:60ch}
.dark .lead{color:var(--mut-d)}
.sec{padding:clamp(72px,10vw,140px) 0;position:relative}
.dark{background:var(--sc);color:var(--ka)}
.gable{padding-top:calc(var(--cut) + clamp(64px,9vw,120px));clip-path:polygon(0 var(--cut),50% 0,100% var(--cut),100% 100%,0 100%);margin-top:calc(var(--cut) * -1)}
.paper{background:var(--ka2)}
.grid-bg{background-image:linear-gradient(rgba(43,43,43,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(43,43,43,.055) 1px,transparent 1px);background-size:56px 56px;background-position:-1px -1px}
.dark .grid-bg,.dark.grid-bg{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)}
.schuppen{background-image:radial-gradient(circle at 50% 100%,transparent 0 56%,rgba(255,255,255,.07) 57% 60%,transparent 61%),radial-gradient(circle at 0 50%,transparent 0 56%,rgba(255,255,255,.07) 57% 60%,transparent 61%),radial-gradient(circle at 100% 50%,transparent 0 56%,rgba(255,255,255,.07) 57% 60%,transparent 61%);background-size:44px 30px,44px 30px,44px 30px;background-position:0 0,0 0,0 0}

/* Buttons */
.btn{--bg:var(--cu);--fg:#fff;position:relative;display:inline-flex;align-items:center;gap:.7em;padding:1em 1.55em;border-radius:999px;background:var(--bg);color:var(--fg);font:700 .92rem/1 var(--f);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:2px solid var(--bg);cursor:pointer;overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s,transform .25s}
.btn::before{content:"";position:absolute;inset:0;background:var(--sc);transform:translateY(101%);transition:transform .42s cubic-bezier(.2,.8,.2,1);z-index:-1;border-radius:inherit}
.btn:hover{color:var(--ka);border-color:var(--sc)}
.btn:hover::before{transform:none}
.btn svg{width:1.15em;height:1.15em;flex:none;transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}
.btn--ghost{--bg:transparent;--fg:var(--sc);border-color:var(--sc)}
.btn--ghost::before{background:var(--sc)}
.btn--ghost:hover{color:var(--ka)}
.dark .btn--ghost{--fg:var(--ka);border-color:var(--ka)}
.dark .btn--ghost::before{background:var(--ka)}
.dark .btn--ghost:hover{color:var(--sc);border-color:var(--ka)}
.dark .btn:not(.btn--ghost):hover{color:var(--sc)}
.dark .btn:not(.btn--ghost)::before{background:var(--ka)}
.btn--sm{padding:.8em 1.2em;font-size:.78rem}

/* Kopfzeile + Zollstock */
.hd{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--head);background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);transition:box-shadow .3s,background .3s}
.hd.is-stuck{box-shadow:0 10px 30px -22px rgba(43,43,43,.6)}
.hd__in{height:100%;display:flex;align-items:center;gap:clamp(14px,2.4vw,36px)}
.hd__logo{display:block;flex:none;width:clamp(108px,11vw,138px)}
.hd__logo img{width:100%}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a,.nav summary{font:600 .84rem/1 var(--f);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:.95em .85em;border-radius:6px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:.4em;position:relative;transition:color .2s}
.nav summary::-webkit-details-marker{display:none}
.nav a::after,.nav summary::before{content:"";position:absolute;left:.85em;right:.85em;bottom:.45em;height:2px;background:var(--cu);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav a:hover::after,.nav a[aria-current="page"]::after,.nav summary:hover::before,.nav .dd[open] summary::before,.nav .dd.on summary::before{transform:scaleX(1)}
.nav summary svg{width:10px;height:10px;transition:transform .3s}
.nav .dd[open] summary svg{transform:rotate(180deg)}
.dd{position:relative}
.dd__p{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;background:var(--sc);color:var(--ka);padding:10px;border-radius:10px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);display:grid;gap:2px;animation:pop .25s ease}
.dd__p a{padding:.85em 1em;color:var(--ka)}
.dd__p a:hover{background:var(--sc2)}
.dd__p a::after{display:none}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}}
.hd__cta{display:flex;gap:10px;align-items:center}
.hd__tel{display:inline-flex;align-items:center;gap:.6em;font:600 .86rem/1 var(--f);text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.hd__tel i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--sc);color:var(--cu-l);font-style:normal}
.hd__tel svg{width:17px;height:17px}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:2px solid var(--sc);background:none;cursor:pointer;position:relative;color:var(--sc)}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;transition:transform .3s,top .3s,opacity .2s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}
.ruler{position:absolute;left:0;right:0;bottom:0;height:12px;pointer-events:none;overflow:hidden}
.ruler::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(43,43,43,.42) 0 1px,transparent 1px 8px) bottom/100% 5px no-repeat,repeating-linear-gradient(90deg,rgba(43,43,43,.55) 0 1px,transparent 1px 40px) bottom/100% 10px no-repeat}
.ruler i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--cu);transform-origin:left;transform:scaleX(var(--p,0))}
.ruler b{position:absolute;bottom:3px;left:calc(var(--p,0) * 100%);transform:translateX(-100%);font:500 10px/1 var(--fm);letter-spacing:.08em;background:var(--cu);color:#fff;padding:3px 5px 2px;border-radius:3px 3px 0 0;white-space:nowrap}
.mnav{position:fixed;inset:var(--head) 0 0 0;background:var(--sc);color:var(--ka);z-index:99;padding:28px var(--gut) 40px;overflow:auto;display:none;flex-direction:column;gap:4px;clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.2,.8,.2,1)}
.mnav.open{clip-path:inset(0)}
.mnav a{display:block;font:800 clamp(1.5rem,6vw,2.1rem)/1.1 var(--f);text-decoration:none;padding:.5em 0;border-bottom:1px solid rgba(255,255,255,.1);letter-spacing:-.02em}
.mnav a small{display:block;font:400 .78rem/1.2 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--cu-l);margin-bottom:.4em}
.mnav .sub a{font-size:1.05rem;font-weight:600;padding:.7em 0 .7em 1em;letter-spacing:0}
.mnav .btn{margin-top:20px;justify-content:center;border-bottom:2px solid var(--cu);font-size:.95rem;padding:1.1em}

/* Hero */
.hero{position:relative;padding:calc(var(--head) + clamp(36px,6vw,84px)) 0 clamp(56px,8vw,110px);min-height:min(100svh,980px);display:flex;align-items:center;background-color:var(--ka);overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,80px);align-items:center;width:100%}
.hero h1{font-size:clamp(2.4rem,6.6vw,5.7rem);margin:.45em 0 .4em}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .ln>span{display:block;transform:translateY(105%);animation:up 1s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.12s}.hero h1 .ln:nth-child(3)>span{animation-delay:.24s}
.hero h1 .it{font-size:1.06em;line-height:.9}
@keyframes up{to{transform:none}}
.hero .lead{animation:fade .9s .5s both}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;animation:fade .9s .65s both}
.hero .tags{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px;font:500 .76rem/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);animation:fade .9s .8s both}
.hero .tags span{display:inline-flex;align-items:center;gap:.6em}
.hero .tags span::before{content:"";width:8px;height:8px;background:var(--cu);transform:rotate(45deg)}
@keyframes fade{from{opacity:0;transform:translateY(14px)}}
.hero__vis{position:relative;justify-self:center;width:min(100%,520px);margin-right:10px}
.giebel{position:relative;aspect-ratio:4/5;clip-path:polygon(50% 100%,100% 100%,100% 100%,0 100%,0 100%);animation:build 1.4s .2s cubic-bezier(.2,.8,.2,1) forwards;background:var(--sc)}
.giebel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);animation:settle 2.2s .2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes build{to{clip-path:polygon(50% 0,100% 23%,100% 100%,0 100%,0 23%)}}
@keyframes settle{to{transform:scale(1)}}
.giebel-line{position:absolute;inset:-22px -22px 22px 22px;width:calc(100% + 0px);height:100%;overflow:visible;pointer-events:none}
.giebel-line path{fill:none;stroke:var(--cu);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s .7s cubic-bezier(.4,.1,.2,1) forwards;vector-effect:non-scaling-stroke}
@keyframes draw{to{stroke-dashoffset:0}}
.stamp{position:absolute;left:-46px;bottom:34px;width:clamp(112px,12vw,148px);aspect-ratio:1;animation:fade 1s 1.4s both}
.stamp svg{width:100%;height:100%;animation:spin 26s linear infinite}
.stamp .c{fill:var(--cu)}
.stamp text{font:700 10.4px var(--fm);letter-spacing:.26em;fill:#fff;text-transform:uppercase}
.stamp .core{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:800 1.7rem/1 var(--f);text-align:center;letter-spacing:-.04em}
.stamp .core small{display:block;font:500 .56rem/1 var(--fm);letter-spacing:.16em;margin-top:.5em}
@keyframes spin{to{transform:rotate(360deg)}}
.dim{position:absolute;left:0;right:0;bottom:-34px;display:flex;align-items:center;gap:10px;font:500 .7rem/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);animation:fade 1s 1.6s both}
.dim::before,.dim::after{content:"";flex:1;height:9px;border-left:1px solid var(--mut);border-right:1px solid var(--mut);background:linear-gradient(var(--mut),var(--mut)) center/100% 1px no-repeat}
.dim::before{flex:0 0 36%}.dim::after{flex:1}
.scrollhint{position:absolute;left:var(--gut);bottom:22px;font:500 .72rem/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:12px}
.scrollhint::after{content:"";width:1px;height:38px;background:var(--cu);animation:drop 2s ease-in-out infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Zahlen */
.stats{background:var(--sc);color:var(--ka);position:relative;z-index:2}
.stats__g{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(28px,4vw,52px) clamp(14px,2.4vw,34px);border-left:1px solid rgba(255,255,255,.14);position:relative}
.stat:first-child{border-left:0}
.stat b{display:block;font:800 clamp(2.4rem,5.4vw,4.4rem)/1 var(--f);letter-spacing:-.04em;color:var(--cu-l)}
.stat span{display:block;margin-top:.7em;font:500 .76rem/1.4 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-d)}
.stat::after{content:"";position:absolute;left:clamp(14px,2.4vw,34px);bottom:0;width:36px;height:3px;background:var(--cu)}

/* Warnband */
.band{position:relative;z-index:3;background:var(--cu);color:#fff;transform:rotate(-1.6deg);margin:clamp(30px,5vw,60px) -3vw;overflow:hidden;border-block:3px solid var(--sc)}
.band__t{display:flex;width:max-content;animation:mq 38s linear infinite}
.band:hover .band__t{animation-play-state:paused}
.band__t span{display:inline-flex;align-items:center;gap:22px;padding:15px 22px;font:800 clamp(1rem,2vw,1.4rem)/1 var(--f);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.band__t span::after{content:"";width:14px;height:14px;background:#fff;transform:rotate(45deg)}
.band a{text-decoration:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* Über uns */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,96px);align-items:center}
.about__ph{position:relative;min-height:clamp(420px,52vw,620px)}
.about__ph .a1,.about__ph .a2{position:absolute;overflow:hidden;background:var(--ka2)}
.about__ph .a1{inset:0 22% 18% 0;border-radius:12px}
.about__ph .a2{width:50%;right:0;bottom:0;aspect-ratio:3/4;border-radius:12px;border:8px solid var(--ka)}
.about__ph img{width:100%;height:100%;object-fit:cover}
.about h2{margin:.5em 0 .5em}
.tl{list-style:none;margin:32px 0 0;padding:0 0 0 26px;border-left:2px solid var(--ka3);display:grid;gap:22px}
.tl li{position:relative}
.tl li::before{content:"";position:absolute;left:-33px;top:.5em;width:12px;height:12px;background:var(--cu);transform:rotate(45deg)}
.tl b{display:block;font:500 .78rem/1 var(--fm);letter-spacing:.14em;color:var(--cu-d);margin-bottom:.4em}
.tl span{color:var(--mut)}

/* Leistungs-Kacheln (Biberschwanz) */
.head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:clamp(36px,5vw,64px);flex-wrap:wrap}
.head h2{margin-top:.45em;max-width:20ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);align-items:stretch}
.card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--sc);border-radius:12px;overflow:hidden;background:var(--ka2);border:1px solid var(--ka3);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(43,43,43,.55)}
.card__img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--sc2)}
.card__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__img img{transform:scale(1.06)}
.card__b{padding:clamp(20px,2.4vw,30px);display:block}
.card__n{font:700 .74rem/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--cu-d);display:block;margin-bottom:12px}
.card h3{font-size:clamp(1.35rem,2.2vw,1.8rem);margin-bottom:.5em}
.card p{font-size:.96rem;line-height:1.55;color:var(--mut);margin:0}
.card__go{position:absolute;right:16px;bottom:16px;width:48px;height:48px;border-radius:50%;background:var(--cu);color:#fff;display:grid;place-items:center;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__go{transform:rotate(-45deg) scale(1.08)}
.card__go svg{width:22px;height:22px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(36px,5vw,60px)}
.chip{display:inline-flex;align-items:center;gap:.6em;padding:.75em 1.1em;border:1px solid var(--ka3);border-radius:999px;font:600 .86rem/1 var(--f);text-decoration:none;background:var(--ka);transition:background .25s,color .25s,border-color .25s,transform .25s}
.chip svg{width:18px;height:18px;color:var(--cu-d);transition:color .25s}
a.chip:hover{background:var(--sc);color:var(--ka);border-color:var(--sc);transform:translateY(-2px)}
a.chip:hover svg{color:var(--cu-l)}
.dark .chip{background:transparent;border-color:rgba(255,255,255,.22)}
.dark .chip svg{color:var(--cu-l)}
button.chip{cursor:pointer;font-family:inherit}
button.chip[aria-pressed="true"]{background:var(--sc);color:var(--ka);border-color:var(--sc)}

/* Konfigurator */
.konf{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:center}
.konf h2{margin:.45em 0 .5em}
.konf__vis{position:relative;aspect-ratio:1/1;max-width:480px;justify-self:center;width:100%}
.konf__vis svg{width:100%;height:100%}
.konf__vis .w1{fill:none;stroke:var(--cu-l);stroke-width:2}
.konf__vis .w2{fill:rgba(255,125,107,.12);stroke:var(--cu-l);stroke-width:2}
.konf__vis .w3{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.4;stroke-dasharray:5 6}
.konf__vis text{font:500 11px var(--fm);letter-spacing:.14em;fill:var(--mut-d)}
.konf .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.konf__sash{transform-origin:70px 210px;animation:sash 6s ease-in-out infinite}
@keyframes sash{0%,18%{transform:rotate(0)}45%,70%{transform:rotate(-22deg)}95%,100%{transform:rotate(0)}}

/* Vorher/Nachher */
.ba{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--sc);--p:50%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__v{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba__h{position:absolute;top:0;bottom:0;left:var(--p);width:44px;margin-left:-22px;background:none;border:0;cursor:ew-resize;padding:0;color:var(--sc)}
.ba__h::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:var(--ka)}
.ba__h span{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--cu);display:grid;place-items:center;box-shadow:0 8px 24px -6px rgba(0,0,0,.6);transition:transform .25s}
.ba__h:hover span,.ba__h:focus-visible span{transform:scale(1.12)}
.ba__h svg{width:26px;height:26px}
.ba__t{position:absolute;top:18px;padding:.55em .9em;background:var(--sc);color:var(--ka);font:500 .72rem/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;border-radius:4px}
.ba__t--v{left:18px}.ba__t--n{right:18px;background:var(--cu);color:#fff}
.ba-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:center}
.ba-wrap h2{margin:.45em 0 .5em}

/* Projekt-Streifen */
.strip{display:flex;align-items:flex-start;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 24px;margin-inline:calc(var(--gut) * -1);scrollbar-width:thin;scrollbar-color:var(--cu) transparent;cursor:grab}
.strip::-webkit-scrollbar{height:6px}.strip::-webkit-scrollbar-thumb{background:var(--cu);border-radius:6px}
.strip a{flex:0 0 clamp(240px,27vw,340px);scroll-snap-align:start;aspect-ratio:4/3;border-radius:12px;overflow:hidden;position:relative;display:block;background:var(--sc2)}

.strip img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.strip a:hover img{transform:scale(1.07)}

/* Partner */
.logos{overflow:hidden;position:relative;margin-top:clamp(30px,4vw,50px);-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos__t{display:flex;width:max-content;gap:clamp(40px,6vw,88px);align-items:center;animation:mq 46s linear infinite;padding-right:clamp(40px,6vw,88px)}
.logos:hover .logos__t{animation-play-state:paused}
.logos img,.logos a{height:clamp(52px,6vw,72px);width:auto;flex:none;opacity:.95;transition:opacity .3s,transform .3s}
.logos a{display:block}
.logos a img{height:100%}
.logos a:hover,.logos img:hover{opacity:1;transform:scale(1.06)}

/* Stimmen */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.q{background:var(--ka);border:1px solid var(--ka3);border-radius:6px 6px 60px 6px;padding:clamp(24px,3vw,38px);position:relative;display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s}
.q:hover{transform:translateY(-6px);box-shadow:0 26px 40px -28px rgba(43,43,43,.5)}
.q::before{content:"„";position:absolute;right:22px;top:6px;font:400 6rem/1 var(--fs);color:var(--cu);opacity:.4}
.q p{font:400 1.12rem/1.55 var(--fs);margin:0 0 22px;color:var(--sc);flex:1;font-size:1.28rem}
.q cite{font-style:normal;font:600 .9rem/1.3 var(--f);}
.q cite small{display:block;font:500 .72rem/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:.3em}
.stars{display:flex;gap:3px;color:var(--cu);margin-bottom:16px}
.stars svg{width:18px;height:18px}

/* FAQ */
.faq{display:grid;gap:0;max-width:880px}
.faq details{border-top:1px solid var(--ka3)}
.faq details:last-child{border-bottom:1px solid var(--ka3)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:1.4em 0;font:700 clamp(1.05rem,1.7vw,1.3rem)/1.3 var(--f);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:36px;height:36px;border-radius:50%;border:2px solid var(--sc);position:relative;transition:background .3s,transform .4s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--sc);transition:transform .35s,background .3s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i{background:var(--cu);border-color:var(--cu);transform:rotate(180deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq__a{padding:0 3.4em 1.6em 0;color:var(--mut);max-width:70ch;animation:fade .5s both}

/* Kontakt */
.kon{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,6vw,90px);align-items:start}
.kon h2{margin:.45em 0 .5em}
.kd{display:grid;gap:0;margin-top:34px;border-top:1px solid rgba(255,255,255,.16)}
.kd a,.kd div{display:flex;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16);text-decoration:none;transition:padding .3s,color .3s}
.kd a:hover{padding-left:12px;color:var(--cu-l)}
.kd svg{width:26px;height:26px;color:var(--cu-l);flex:none}
.kd small{display:block;font:500 .7rem/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--mut-d);margin-bottom:.45em}
.kd b{font:700 1.12rem/1.3 var(--f);}
.form{background:var(--ka);color:var(--sc);padding:clamp(24px,3.4vw,46px);border-radius:12px;display:grid;gap:18px;grid-template-columns:1fr 1fr}
.form .full{grid-column:1/-1}
.fld{position:relative}
.fld input,.fld textarea{width:100%;background:transparent;border:0;border-bottom:2px solid var(--sc);padding:1.5em 0 .5em;font:500 1rem/1.3 var(--f);color:var(--sc);border-radius:0;outline:0;transition:border-color .25s}
.fld textarea{min-height:120px;resize:vertical}
.fld label{position:absolute;left:0;top:1.3em;font:500 .98rem/1 var(--f);color:var(--mut);pointer-events:none;transition:transform .25s,font-size .25s,color .25s;transform-origin:left}
.fld input:focus,.fld textarea:focus{border-color:var(--cu)}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:focus+label,.fld textarea:not(:placeholder-shown)+label{transform:translateY(-1.15em);font:500 .7rem/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--cu-d)}
.fld input:user-invalid,.fld textarea:user-invalid{border-color:var(--zi)}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;line-height:1.45;color:var(--mut)}
.chk input{appearance:none;flex:none;width:22px;height:22px;border:2px solid var(--sc);border-radius:4px;margin:2px 0 0;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.chk input:checked{background:var(--cu);border-color:var(--cu)}
.chk input:checked::after{content:"";width:6px;height:11px;border:solid var(--sc);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.chk a{color:var(--sc);font-weight:600}
.form .note{font-size:.82rem;color:var(--mut);margin:0}
.fok{grid-column:1/-1;padding:14px 16px;border-radius:6px;background:var(--pa-d);color:#fff;font-weight:600;display:none}
.fok.show{display:block;animation:fade .4s both}

/* Fuß */
.ft{background:var(--sc);color:var(--ka);position:relative;overflow:hidden;padding:clamp(60px,8vw,110px) 0 28px}
.ft::before{content:"";position:absolute;inset:0;opacity:.8}

.ft__g{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:clamp(24px,4vw,56px);position:relative}
.ft h4{font:500 .74rem/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--cu-l);margin-bottom:1.2em;}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.ft a{text-decoration:none;color:rgba(255,255,255,.86);transition:color .2s}
.ft a:hover{color:var(--cu-l)}
.ft__logo{width:170px;margin-bottom:18px}
.ft p{color:var(--mut-d);font-size:.95rem}
.soc{display:flex;gap:10px;margin-top:6px}
.soc a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.26);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s}
.soc a:hover{background:var(--cu);border-color:var(--cu);color:#fff;transform:translateY(-3px)}
.soc svg{width:20px;height:20px}
.ft__b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(40px,6vw,76px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:.88rem;color:var(--mut-d);position:relative}
.ft__b a{color:var(--ka);text-decoration:underline;text-underline-offset:3px}

/* Unterseiten */
.ph{position:relative;padding:calc(var(--head) + clamp(44px,7vw,100px)) 0 clamp(56px,8vw,110px);overflow:hidden}
.crumb{display:flex;gap:10px;flex-wrap:wrap;font:500 .74rem/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:28px}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--cu-d)}
.ph h1{font-size:clamp(2.2rem,6vw,5rem);max-width:17ch}
.ph .lead{margin-top:1.3em}
.ph__row{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,80px);align-items:end}
.ph__img{aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--sc);max-width:420px;justify-self:end;width:100%}
.ph__img img{width:100%;height:100%;object-fit:cover}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,5vw,80px)}
.it-row{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;padding:clamp(24px,3vw,38px) 0;border-top:1px solid var(--ka3);position:relative;transition:padding .35s}
.it-row:hover{padding-left:10px}
.it-row .ic{grid-row:span 2;width:62px;height:62px;border-radius:50%;background:var(--sc);color:var(--cu-l);display:grid;place-items:center;transition:background .3s,transform .5s cubic-bezier(.2,.8,.2,1)}
.it-row:hover .ic{background:var(--cu);color:#fff;transform:rotate(-8deg)}
.ic svg{width:30px;height:30px}
.it-row span.n{font:500 .72rem/1 var(--fm);letter-spacing:.16em;color:var(--cu-d)}
.it-row h3{font-size:clamp(1.2rem,2vw,1.6rem);margin:.1em 0 .45em}
.it-row p{grid-column:2;color:var(--mut);margin:0;font-size:.98rem}
.band2{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);margin-top:clamp(50px,7vw,90px)}
.band2 div{aspect-ratio:4/3;border-radius:12px;overflow:hidden}

.band2 img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.band2 div:hover img{transform:scale(1.06)}
.cta-b{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cta-b h2{max-width:18ch;font-size:clamp(1.8rem,4vw,3.2rem)}
.cta-b .row{display:flex;gap:12px;flex-wrap:wrap}

/* Projekte */
.filt{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(28px,4vw,48px)}
.gal{columns:3;column-gap:clamp(12px,1.8vw,22px)}
.gal figure{margin:0 0 clamp(12px,1.8vw,22px);break-inside:avoid;position:relative;overflow:hidden;border-radius:4px;background:var(--sc2);cursor:zoom-in}
.gal figure.hide{display:none}
.gal button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.gal img{width:100%;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:34px 16px 14px;background:linear-gradient(transparent,rgba(43,43,43,.88));color:var(--ka);font:500 .72rem/1.3 var(--fm);letter-spacing:.1em;text-transform:uppercase;transform:translateY(100%);transition:transform .4s;pointer-events:none;text-align:left}
.gal figure:hover figcaption,.gal button:focus-visible+figcaption{transform:none}
dialog.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:var(--ka);overflow:hidden}
dialog.lb::backdrop{background:rgba(14,18,20,.94);backdrop-filter:blur(6px)}
.lb__in{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(54px,7vw,80px) clamp(12px,6vw,90px)}
.lb img{max-width:100%;max-height:calc(100svh - 150px);width:auto;height:auto;border-radius:4px;box-shadow:0 30px 80px -20px #000;animation:fade .4s both}
.lb__c{position:absolute;left:0;right:0;bottom:16px;text-align:center;font:500 .78rem/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mut-d);padding:0 70px}
.lb button{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(43,43,43,.7);color:var(--ka);cursor:pointer;display:grid;place-items:center;transition:background .25s,color .25s}
.lb button:hover{background:var(--cu);color:#fff}
.lb button svg{width:22px;height:22px}
.lb .x{top:16px;right:16px}.lb .p{left:14px;top:50%;margin-top:-26px}.lb .n{right:14px;top:50%;margin-top:-26px}

/* Team */
.own{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,32px)}
.own article{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,30px);align-items:center;padding:clamp(22px,3vw,36px);background:var(--ka);border:1px solid var(--ka3);border-radius:6px 6px 80px 6px}
.pt{width:clamp(96px,11vw,132px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--sc);flex:none;border:4px solid var(--ka);box-shadow:0 0 0 2px var(--cu)}
.pt img{width:100%;height:100%;object-fit:cover}
.own h3{font-size:1.4rem}
.own small{display:block;font:500 .74rem/1.4 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--cu-d);margin-top:.6em}
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.crew article{text-align:center;padding:24px 14px;border-radius:6px;transition:background .3s,transform .4s}
.crew article:hover{background:var(--ka);transform:translateY(-6px)}
.crew .pt{width:104px;margin:0 auto 14px;box-shadow:0 0 0 2px var(--ka3);transition:box-shadow .3s}
.crew article:hover .pt{box-shadow:0 0 0 2px var(--cu)}
.crew .ini{display:grid;place-items:center;width:100%;height:100%;font:800 1.6rem var(--f);color:var(--cu-l)}
.crew h3{font-size:1rem;}
.crew small{font:500 .7rem/1.3 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.two h2{margin:.4em 0 .6em}
.val{display:grid;gap:clamp(18px,2.6vw,34px)}
.val article{padding-left:26px;border-left:3px solid var(--cu)}
.val h3{margin-bottom:.5em}
.thx{background:var(--sc2);border-radius:12px;padding:clamp(26px,4vw,52px);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.thx .pt{width:clamp(110px,13vw,160px);box-shadow:0 0 0 2px var(--cu)}
.thx h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:.4em 0 .5em}

/* Link-Seite */
.lt{min-height:100svh;display:grid;place-items:center;padding:calc(var(--head) + 30px) var(--gut) 60px;background:var(--sc);color:var(--ka);position:relative;overflow:hidden}
.lt__in{width:min(100%,560px);position:relative;text-align:center}
.lt__logo{width:210px;margin:0 auto 26px}
.lt__links{display:grid;gap:12px;margin:26px 0 34px}
.lt__links a{display:flex;align-items:center;justify-content:space-between;padding:1.2em 1.4em;border-radius:999px;border:1px solid rgba(255,255,255,.26);text-decoration:none;font:700 .95rem/1 var(--f);letter-spacing:.05em;text-transform:uppercase;transition:background .3s,color .3s,transform .3s,border-color .3s}
.lt__links a:first-child{background:var(--cu);color:#fff;border-color:var(--cu)}
.lt__links a:hover{background:var(--ka);color:var(--sc);transform:translateY(-3px);border-color:var(--ka)}
.lt__links svg{width:20px;height:20px}
.lt__t{text-align:left;display:grid;gap:18px}
.lt__t h2{font-size:1.1rem;letter-spacing:0;color:var(--cu-l);margin-bottom:.3em}
.lt__t p{margin:0;color:var(--mut-d);font-size:.98rem}
.lt .soc{justify-content:center;margin-top:30px}

/* Bewerten */
.rate{min-height:78svh;display:grid;place-items:center;text-align:center;padding:calc(var(--head) + 40px) 0 80px}
.rate h1{font-size:clamp(2.6rem,9vw,7rem)}
.rate .stars{justify-content:center;margin:24px 0;color:var(--cu)}
.rate .stars svg{width:46px;height:46px;animation:pulse 2.4s ease-in-out infinite}
.rate .stars svg:nth-child(2){animation-delay:.15s}.rate .stars svg:nth-child(3){animation-delay:.3s}.rate .stars svg:nth-child(4){animation-delay:.45s}.rate .stars svg:nth-child(5){animation-delay:.6s}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18) rotate(-6deg)}}

/* Rechtstexte */
.legal{display:grid;grid-template-columns:260px 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.toc{position:sticky;top:calc(var(--head) + 24px)}
.toc ol{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:2px;counter-reset:t}
.toc a{display:block;padding:.55em .8em;border-left:2px solid var(--ka3);text-decoration:none;font-size:.88rem;line-height:1.35;color:var(--mut);transition:border-color .25s,color .25s,padding .25s}
.toc a:hover,.toc a.on{border-color:var(--cu);color:var(--sc);padding-left:1.1em}
.doc section{padding:0 0 clamp(36px,5vw,56px)}
.doc h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 .7em;padding-top:.3em;border-top:3px solid var(--sc)}
.doc h3{font-size:1.1rem;margin:1.6em 0 .5em;letter-spacing:0}
.doc p,.doc li{color:#3a444b;font-size:.98rem}
.doc ul{padding-left:1.2em}
.doc a{color:var(--cu-d)}
.ed-credit{margin-top:8px}

/* Reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}
.rvi{clip-path:inset(99% 0 0 0);transition:clip-path 1.2s cubic-bezier(.2,.8,.2,1)}
.rvi.in{clip-path:inset(0)}
html:not(.js) .rv{animation:rvfb .01s 2.5s forwards}
html:not(.js) .rvi{animation:rvfb2 .01s 2.5s forwards}
@keyframes rvfb{to{opacity:1;transform:none}}
@keyframes rvfb2{to{clip-path:inset(0)}}
[data-par]{will-change:transform}

/* Responsiv */
@media (max-width:1060px){
  .nav,.hd__tel span{display:none}
  .burger{display:block}
  .mnav{display:flex}
  .hd__cta{margin-left:auto}
  .hero__in,.about,.konf,.ba-wrap,.kon,.two,.ph__row{grid-template-columns:1fr}
  .hero__vis{width:min(100%,440px);margin:20px auto 40px}
  .stamp{left:-14px}
  .ph__img{justify-self:start;max-width:340px}
  .cards{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .ft__g{grid-template-columns:1fr 1fr}
  .crew{grid-template-columns:repeat(3,1fr)}
  .gal{columns:2}
  .legal{grid-template-columns:1fr}
  .toc{position:static}
  .konf__vis{max-width:340px}
}
@media (max-width:720px){
  body{font-size:16px}
  .hd__cta .btn{display:none}
  .stats__g{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  .cards{grid-template-columns:1fr}
  .items,.own{grid-template-columns:1fr}
  .band2{grid-template-columns:1fr 1fr}.band2 div:nth-child(3){display:none}
  .form{grid-template-columns:1fr;border-radius:6px 6px 70px 6px}
  .ft__g{grid-template-columns:1fr}
  .crew{grid-template-columns:repeat(2,1fr)}
  .thx{grid-template-columns:1fr}
  .own article{grid-template-columns:auto 1fr}
  .hero{min-height:0}
  .scrollhint{display:none}
  .about__ph{min-height:420px}
  .ba{border-radius:12px}
}
@media (max-width:480px){.gal{columns:1}.crew{grid-template-columns:1fr 1fr}.btn{padding:.95em 1.2em}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,.rvi{opacity:1;transform:none;clip-path:none}
  .hero h1 .ln>span{transform:none}
  .giebel{clip-path:polygon(50% 0,100% 23%,100% 100%,0 100%,0 23%)}
  .giebel-line path{stroke-dashoffset:0}
  .band__t,.logos__t{animation:none}
}
@media print{.hd,.mnav,.band,.ruler{display:none}.sec{padding:24px 0}}

/* Porträtkarten (Team) */
.pc{display:block;text-align:left}
.pc .pt{width:100%;aspect-ratio:4/5;border-radius:10px;border:0;box-shadow:none;margin:0 0 14px;overflow:hidden;background:var(--ka2)}
.pc .pt img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pc:hover .pt img{transform:scale(1.05)}
.pc h3{font-size:1.05rem;margin:0}
.pc small{display:block;font:700 .7rem/1.35 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--cu-d);margin-top:.5em}
.own{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,28px)}
.own .pc{width:min(100%,200px);padding:0;background:none;border:0;border-radius:0;display:block}
.own .pc h3{font-size:1.15rem}
.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,180px));gap:clamp(18px,2.4vw,30px);justify-content:start}
.crew .pc{padding:0;text-align:left;border-radius:0}
.crew .pc:hover{background:none;transform:none}
.crew .ini{display:grid;place-items:center;width:100%;height:100%;font:800 2rem var(--f);color:var(--cu)}
.crew .pc small{color:var(--cu-d)}

.tmh{display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.tmh__ph{display:flex;gap:clamp(14px,2vw,24px)}
.tmh__ph .pc{width:clamp(130px,15vw,190px)}
@media (max-width:860px){.tmh{grid-template-columns:1fr}}
.tmh h2{margin:.45em 0 .6em}

/* Porträts liegen nur in 147 px vor: nicht größer als nativ anzeigen */

/* Hero mit Teamfoto, Porträts in hoher Auflösung */
.hero__in{grid-template-columns:.9fr 1.1fr}
.hero__vis{width:min(100%,700px);margin-right:0}
.giebel{aspect-ratio:6/5}
.giebel img{object-position:68% 55%}
.own .pc{width:min(100%,230px)}
.tmh{grid-template-columns:minmax(0,auto) 1fr}
.tmh__ph{flex-wrap:wrap}
.tmh__ph .pc{width:clamp(150px,16vw,210px)}
.tmh__ph .pc--foto .pt{aspect-ratio:4/5}
@media (max-width:1060px){.hero__in{grid-template-columns:1fr}.hero__vis{width:min(100%,560px)}}
@media (max-width:480px){.tmh__ph .pc{width:calc(50% - 8px)}}
.teamfoto img{width:100%;height:auto;border-radius:12px;display:block}
.hero h1{font-size:clamp(2.3rem,5.2vw,4.8rem)}@media (max-width:1060px){.hero h1{font-size:clamp(2.4rem,9vw,4.4rem)}}
@media (min-width:1061px){.hero h1{font-size:clamp(2.2rem,4.5vw,4.3rem)}}

/* Hinweis: Fotostreifen ist scrollbar */
.strip__ui{display:flex;align-items:center;gap:16px;margin-top:6px}
.strip__hint{display:inline-flex;align-items:center;gap:.6em;font:600 .78rem/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--cu-d)}
.strip__hint svg{width:20px;height:20px;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
.strip__bar{flex:1;height:4px;border-radius:4px;background:var(--ka3);overflow:hidden;min-width:40px}
.strip__bar i{display:block;height:100%;width:30%;background:var(--cu);border-radius:4px;transform-origin:left;transition:margin .15s}
.strip__btns{display:flex;gap:8px}
.sb{width:44px;height:44px;border-radius:50%;border:2px solid var(--cu);background:transparent;color:var(--cu);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.sb svg{width:20px;height:20px}.sb:hover,.sb:focus-visible{background:var(--cu);color:#fff}.sb:disabled{opacity:.35;pointer-events:none}
@media (max-width:700px){.strip a{flex-basis:74vw}.strip__btns{display:none}}
@media (prefers-reduced-motion:reduce){.strip__hint svg{animation:none}}
.strip{scroll-padding-inline:var(--gut)}
.thx{align-items:center}
.thx .pt{width:clamp(180px,20vw,260px);aspect-ratio:4/5;border-radius:12px;border:0;box-shadow:none;overflow:hidden}
.thx .pt img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.thx .pt{width:min(70%,240px)}}
@media (max-width:860px){
 .tmh{grid-template-columns:minmax(0,1fr)}
 .tmh__ph{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .tmh__ph .pc{width:auto}
 .tmh__ph .pc h3{font-size:.92rem}.tmh__ph .pc small{font-size:.6rem;letter-spacing:.08em}
}
@media (max-width:520px){.tmh__ph{grid-template-columns:repeat(2,minmax(0,1fr))}.tmh__ph .pc--foto{grid-column:1/-1}.tmh__ph .pc--foto .pt{aspect-ratio:16/10}}

.about__ph .a1,.about__ph .a2{will-change:auto;clip-path:none}
.about__ph .a2{z-index:2;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
.about__ph .a1 img,.about__ph .a2 img{display:block;transform:none!important}
/* Hero-Überschrift bricht nie um: Größe richtet sich nach der Spaltenbreite */
.hero__in>div:first-child{container-type:inline-size;min-width:0}
.hero h1 .ln{white-space:nowrap}
.hero h1{font-size:clamp(2rem,11cqw,5.2rem)}
@media (min-width:1061px){.hero h1{font-size:clamp(2rem,11cqw,5.2rem)}}
/* Teamfotos füllen die Höhe des Textblocks */
@media (min-width:861px){
 .tmh{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}
 .tmh__ph{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
 .tmh__ph .pc{width:auto;display:flex;flex-direction:column}
 .tmh__ph .pc .pt{flex:1 1 auto;aspect-ratio:auto;min-height:300px;margin-bottom:14px}
 .tmh__txt{align-self:center}
}
@media (min-width:861px){.tmh__ph .pc small{min-height:2.7em}}

/* EpicDetail-Credit-Badge v2 (Standard, 05.11.2026): passt sich Breite und Stil der Kundenseite an. Nur --ed-* Variablen und die Ueberschrift der Seite anpassen. */
.ed-credit{--ed-bg:#fff;--ed-fg:#222;--ed-muted:#666;--ed-accent:#222;--ed-accent-text:var(--ed-accent);--ed-accent-ink:#fff;--ed-line:#ddd;--ed-radius:14px;display:block;margin:0;padding:0;text-align:left;color:inherit;font-family:inherit}
.ed-credit h2 b{color:var(--ed-accent-text);font-weight:inherit}
.ed-credit .ed-credit__title{margin:0 0 1rem;font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.25;font-weight:700}
.ed-credit a.ed-badge{position:relative;display:flex;align-items:center;gap:1rem clamp(1rem,2.5vw,1.75rem);flex-wrap:wrap;width:100%;box-sizing:border-box;text-align:left;text-decoration:none;color:var(--ed-fg);background:var(--ed-bg);border:1px solid var(--ed-line);border-radius:var(--ed-radius);padding:clamp(1rem,2vw,1.35rem) clamp(1.1rem,2.4vw,1.75rem);overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.ed-credit a.ed-badge::before{content:"";position:absolute;inset:-80% -10%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 72%,var(--ed-accent) 86%,transparent 100%);opacity:0;transition:opacity .4s;animation:ed-orbit 7s linear infinite}
.ed-credit a.ed-badge::after{content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:calc(var(--ed-radius) - 1px);background:var(--ed-bg)}
.ed-credit a.ed-badge:hover,.ed-credit a.ed-badge:focus-visible{transform:translateY(-2px);border-color:var(--ed-accent);box-shadow:0 18px 34px -22px rgba(0,0,0,.5)}
.ed-credit a.ed-badge:hover::before,.ed-credit a.ed-badge:focus-visible::before{opacity:.8}
.ed-credit a.ed-badge:focus-visible{outline:3px solid var(--ed-accent);outline-offset:3px}
.ed-credit .ed-badge__logo{flex:none;display:block;width:clamp(52px,6vw,68px);aspect-ratio:950/806;background:var(--ed-accent);-webkit-mask:url(img/ed-logo.png) center/contain no-repeat;mask:url(img/ed-logo.png) center/contain no-repeat;animation:ed-sway 5.5s ease-in-out infinite;transform-origin:50% 55%}
.ed-credit a.ed-badge:hover .ed-badge__logo,.ed-credit a.ed-badge:focus-visible .ed-badge__logo{animation:ed-spin .9s cubic-bezier(.3,.7,.2,1) 1}
.ed-credit .ed-badge__id{display:grid;gap:.2rem;flex:1 1 15rem;min-width:0}
.ed-credit .ed-badge__name{font-weight:700;font-size:1.05em;color:var(--ed-fg)}
.ed-credit .ed-badge__sub{font-size:.88em;color:var(--ed-muted);line-height:1.4}
.ed-credit .ed-badge__btn{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;background:var(--ed-accent);color:var(--ed-accent-ink);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:.75rem 1.2rem;border-radius:999px;white-space:nowrap;transition:gap .3s}
.ed-credit a.ed-badge:hover .ed-badge__btn{gap:.8rem}
.ed-credit .ed-credit__legal{margin:.9rem 0 0;font-size:.9em;line-height:1.55;color:var(--ed-muted)}
@keyframes ed-sway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes ed-spin{to{transform:rotate(360deg)}}
@keyframes ed-orbit{to{transform:rotate(360deg)}}
@media (max-width:560px){.ed-credit .ed-badge__btn{margin-left:0;width:100%;justify-content:center}.ed-credit .ed-badge__id{flex-basis:calc(100% - 5rem)}}
@media (prefers-reduced-motion:reduce){.ed-credit .ed-badge__logo,.ed-credit a.ed-badge::before{animation:none!important}.ed-credit a.ed-badge{transition:none}}
.ed-credit{--ed-bg:#eef3f7;--ed-fg:#2b2b2b;--ed-muted:#5a5a5a;--ed-accent:#a9271a;--ed-accent-text:#a9271a;--ed-accent-ink:#ffffff;--ed-line:#cbdce9;--ed-radius:6px}.doc .ed-credit a.ed-badge{color:#2b2b2b}.doc .ed-credit .ed-credit__legal{color:#56616a}

/* Lineal (Scroll-Ladebalken): mehr Platz, Schildchen wird nicht mehr abgeschnitten, Logo bleibt frei (06.11.2026) */
:root{--head:88px}
.hd__in{padding-bottom:18px}
.ruler{height:24px}
@media (max-width:720px){:root{--head:80px}.hd__in{padding-bottom:16px}}
/* Schildchen gleitet von linksbuendig (0 cm) bis rechtsbuendig (100 cm), ragt nie ueber den Rand */
.ruler b{transform:translateX(calc(var(--p,0) * -100%))}