@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/instrument-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/instrument-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Sketchmap Unterseiten: weißes Blatt, linke Logoleiste, Menü oben rechts, Satzspiegel mit Marginalspalte */
:root{color-scheme:light;
  --rail:112px;
  --bg:#ffffff; --ink:#0e0e0e; --mid:#77777a; --line:#e6e6e4; --soft:#f4f4f3;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{font-weight:500;letter-spacing:-.04em;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Leiste und Logo */
.rail{position:fixed;top:0;bottom:0;left:0;width:calc(var(--rail) + env(safe-area-inset-left,0px));padding:calc(44px + env(safe-area-inset-top,0px)) 0 0 env(safe-area-inset-left,0px);display:flex;flex-direction:column;align-items:center;z-index:30;background:var(--bg)}
.brand{display:block;width:46px;height:132px;perspective:480px;color:var(--ink)}
.prism{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
.face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(calc(var(--k)*90deg)) translateZ(23px);background:var(--bg)}
.face svg{display:block;width:100%;height:100%}
.wm{display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:center;gap:2px;width:100%;height:100%;padding-block:2px;overflow:hidden}
.wm b{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:600;font-size:22px;letter-spacing:-.045em;text-transform:uppercase;line-height:1;white-space:nowrap}
.wm span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:7.6px;line-height:1.15;white-space:nowrap;opacity:.8}

/* Menü oben rechts */
.top{position:fixed;top:0;left:var(--rail);right:0;z-index:25;padding:calc(22px + env(safe-area-inset-top,0px)) max(40px,env(safe-area-inset-right,0px)) 18px 24px;display:flex;justify-content:flex-end;background:linear-gradient(var(--bg) 70%,transparent)}
.topnav{display:flex;gap:clamp(16px,2.2vw,36px)}
.topnav a{position:relative;text-decoration:none;font-size:clamp(.82rem,.95vw,.95rem);font-weight:500;padding:6px 0;opacity:.62;transition:opacity .3s;white-space:nowrap}
.topnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.topnav a:hover,.topnav a.on{opacity:1}
.topnav a:hover::after,.topnav a.on::after{transform:scaleX(1);transform-origin:left}

/* Inhalt */
.page{padding:clamp(120px,16vh,170px) max(40px,env(safe-area-inset-right,0px)) 40px calc(var(--rail) + clamp(24px,4vw,64px));max-width:1500px}
.eyebrow{font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-bottom:18px}
.eyebrow a{text-decoration:none}.eyebrow a:hover{color:var(--ink)}
.hero{max-width:1100px;margin-bottom:clamp(56px,8vw,110px)}
.hero h1{font-size:clamp(2.6rem,6vw,6rem);line-height:.95}
.lead{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.5;color:var(--mid);max-width:46ch;margin-top:28px}
.more{display:inline-flex;align-items:center;gap:14px;margin-top:34px;text-decoration:none;font-size:1.05rem;font-weight:500;padding-bottom:4px;border-bottom:1.5px solid currentColor}
.more i{font-style:normal;transition:transform .35s}
.more:hover i{transform:translateX(5px)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,5vw,90px);padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.split h2{font-size:clamp(1.7rem,2.8vw,2.7rem);line-height:1.02}
.split p{max-width:62ch}
.split p+p{margin-top:1em}
.words{color:var(--mid);line-height:1.9}
@media (max-width:860px){.split{grid-template-columns:1fr}}

.fig{margin:0 0 clamp(40px,6vw,80px)}
.fig img{width:100%;height:auto;background:var(--soft)}
.fig figcaption{font-size:.85rem;color:var(--mid);margin-top:12px;max-width:70ch}
.gallery{display:grid;gap:clamp(14px,2vw,28px);margin-bottom:clamp(40px,6vw,80px)}
.gallery .fig{margin:0}
.g3{grid-template-columns:repeat(3,1fr)}
.g3 .fig img{aspect-ratio:16/10;object-fit:cover}
.cards .fig img{aspect-ratio:460/528;object-fit:contain;background:var(--bg)}
.devices{grid-template-columns:1.25fr 1fr 1fr;align-items:end}
.devices .fig img{border:clamp(6px,.8vw,10px) solid #141417;border-radius:clamp(16px,2vw,28px)}
@media (max-width:860px){.g3,.devices{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.g3,.devices{grid-template-columns:1fr}}

.facts{border-top:1px solid var(--ink);margin-bottom:clamp(40px,6vw,80px)}
.facts dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0}
.facts dl div{padding:22px 24px 24px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-bottom:6px}
.facts dd{margin:0;font-size:1.05rem}
@media (max-width:760px){.facts dl{grid-template-columns:1fr 1fr}}

.diagram{margin:0 0 clamp(40px,6vw,80px);color:var(--ink)}
.diagram svg{display:block;width:100%;height:auto;max-width:960px}
.diagram figcaption{font-size:.85rem;color:var(--mid);margin-top:14px;max-width:70ch}

.dims{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);margin-bottom:clamp(40px,6vw,80px)}
.dims div{padding:28px 28px 34px 0}
.dims div+div{padding-left:28px;border-left:1px solid var(--line)}
.dims b{display:block;font-weight:400;font-size:clamp(3.6rem,8vw,7.5rem);line-height:.85;letter-spacing:-.06em;margin-bottom:24px}
.dims .on b{font-style:normal}
.dims h3{font-size:1.4rem;margin-bottom:6px}
.dims p{font-size:.95rem;color:var(--mid)}
@media (max-width:860px){.dims{grid-template-columns:1fr 1fr}.dims div:nth-child(3){padding-left:0;border-left:0}}

.plist{list-style:none;margin:0 0 clamp(56px,8vw,110px);padding:0;border-top:1px solid var(--ink)}
.plist a{display:grid;grid-template-columns:4em 1fr auto;align-items:baseline;gap:24px;padding-block:clamp(22px,3.4vh,40px);border-bottom:1px solid var(--line);text-decoration:none}
.plist .pn{font-size:.85rem;color:var(--mid);font-variant-numeric:tabular-nums}
.plist .pt{font-size:clamp(2.2rem,6vw,5.6rem);font-weight:500;letter-spacing:-.05em;line-height:.95;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.plist .pm{font-size:.9rem;text-align:right;line-height:1.45}
.plist .pm em{font-style:normal;color:var(--mid)}
.plist a:hover .pt{transform:translateX(14px)}
@media (max-width:640px){.plist a{grid-template-columns:2.4em 1fr}.plist .pm{grid-column:2;text-align:left}}

.steps{list-style:none;margin:0 0 clamp(56px,8vw,110px);padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.steps li{border-top:1px solid var(--ink);padding-top:20px}
.steps .n{font-size:2.6rem;color:var(--mid);font-variant-numeric:tabular-nums;line-height:1}
.steps h2{font-size:1.35rem;margin:18px 0 8px}
.steps p{font-size:.95rem;color:var(--mid)}
@media (max-width:960px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

.faq{max-width:900px;margin-bottom:clamp(56px,8vw,110px)}
.faq h2{font-size:clamp(1.7rem,2.8vw,2.7rem);margin-bottom:20px}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-size:1.15rem;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:var(--mid);max-width:65ch}

.contact{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;border-top:1px solid var(--ink);padding-top:28px;margin-bottom:80px}
.contact .big{font-size:clamp(1.8rem,4vw,3.4rem);font-weight:500;letter-spacing:-.04em;user-select:all}
.copy{margin-top:14px;font:inherit;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 3px;color:var(--ink);cursor:pointer}
@media (max-width:760px){.contact{grid-template-columns:1fr}}

.cta{border-top:1px solid var(--ink);padding-top:clamp(40px,6vw,70px);margin-bottom:clamp(40px,6vw,80px);max-width:900px}
.cta h2{font-size:clamp(2.2rem,5vw,4.6rem);line-height:.95}
.cta p:not(.eyebrow){color:var(--mid);max-width:52ch;margin-top:20px}

.foot{padding:36px max(40px,env(safe-area-inset-right,0px)) max(36px,env(safe-area-inset-bottom,0px)) calc(var(--rail) + clamp(24px,4vw,64px));border-top:1px solid var(--line);font-size:.85rem;color:var(--mid)}
.fgrid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot b{color:var(--ink);font-weight:600}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}

.wipe{position:fixed;inset:0;left:var(--rail);z-index:45;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.4,0,.2,1)}
.wipe.in{opacity:1}
.page,.foot{animation:pageIn .6s cubic-bezier(.2,.8,.2,1) both}@keyframes pageIn{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.page,.foot{animation:none}}

@media (max-width:640px){
  :root{--rail:60px}
  .rail{padding-top:calc(24px + env(safe-area-inset-top,0px))}
  .brand{width:34px;height:98px}.face{transform:rotateY(calc(var(--k)*90deg)) translateZ(17px)}.wm b{font-size:16px}.wm span{display:none}
  .top{padding-right:16px;padding-left:12px}.topnav{gap:12px;overflow-x:auto;scrollbar-width:none}.topnav a{font-size:.76rem}
  .page{padding-right:16px;padding-left:calc(var(--rail) + 16px)}
  .foot{padding-right:16px;padding-left:calc(var(--rail) + 16px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Ergänzungen Projektseite */
.toc{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 clamp(40px,6vw,80px);font-size:.9rem}
.toc a{text-decoration:none;color:var(--mid);border-bottom:1px solid transparent;padding-bottom:2px}
.toc a:hover{color:var(--ink);border-color:currentColor}
.g2{grid-template-columns:repeat(2,1fr)}
.g2 .fig img{aspect-ratio:16/10;object-fit:cover}
.g4{grid-template-columns:repeat(4,1fr);align-items:end}
.lines .fig img{aspect-ratio:4/3;object-fit:cover}
.crests{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,2vw,26px);margin-bottom:clamp(30px,4vw,56px);align-items:end}
.crest{margin:0}
.crest img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.crest figcaption{font-size:.78rem;color:var(--mid);margin-top:8px;text-align:center}
.portraits{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.portraits .fig img{aspect-ratio:3/4;object-fit:contain;background:var(--bg)}
.note{align-self:center;padding:clamp(20px,3vw,40px);border-left:1px solid var(--ink)}
.quote{font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.3;letter-spacing:-.02em;margin-bottom:16px}
.small{font-size:.85rem;color:var(--mid)}
.blist .pt{font-size:clamp(1.6rem,3.4vw,3.2rem)}
.blist .pm{max-width:34ch}
.blist li:first-child .pt{font-style:normal}
@media (max-width:860px){.g2,.g4{grid-template-columns:1fr 1fr}.crests{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.g2,.g4{grid-template-columns:1fr}}

.rail{justify-content:center!important;padding-top:0!important}
.face.inv{background:#0e0e0e!important;color:#fff!important}
.face.inv .wm{padding:9px 6px!important;box-sizing:border-box}.face.inv .wm b{font-size:18px!important}.face.inv .wm span{font-size:6.2px!important}@media (max-width:640px){.face.inv .wm{padding:6px 4px!important}.face.inv .wm b{font-size:13px!important}}

em,i,cite,address,dfn,var{font-style:normal!important}
/* Schriftgrößen nie größer als auf der Startseite (Überschrift max. 2.6rem) */
.hero h1{font-size:clamp(1.9rem,2.5vw,2.6rem)!important;line-height:1.05!important}
.lead{font-size:clamp(1rem,1.15vw,1.15rem)!important}
.split h2,.faq h2{font-size:clamp(1.35rem,1.8vw,1.85rem)!important;line-height:1.1!important}
.plist .pt{font-size:clamp(1.6rem,2.5vw,2.6rem)!important}
.blist .pt{font-size:clamp(1.3rem,2vw,2.1rem)!important}
.dims b{font-size:clamp(2rem,2.5vw,2.6rem)!important;margin-bottom:16px!important}
.cta h2{font-size:clamp(1.7rem,2.5vw,2.6rem)!important;line-height:1.05!important}
.contact .big{font-size:clamp(1.5rem,2.2vw,2.3rem)!important}
.steps .n{font-size:clamp(1.6rem,2vw,2rem)!important}
.quote{font-size:clamp(1.15rem,1.4vw,1.4rem)!important}
.dims h3,.steps h2{font-size:1.2rem!important}
/* Aus einem Guss mit der Startseite: Ton, Schrift, Akzente */
:root{--bg:#f2f2f1;--soft:#e9e9e7;--line:#dededc}
body{background:var(--bg)}
h1,h2,h3{font-weight:600;letter-spacing:-.04em}
.hero h1,.cta h2,.split h2,.faq h2,.plist .pt,.dims h3,.steps h2{font-weight:600!important;letter-spacing:-.04em}
.eyebrow,.facts dt,.dims div p.k,.toc a,.fig figcaption::before{font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.eyebrow{color:var(--ink)}
.topnav a{font-size:.72rem!important;font-weight:600!important;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.top{background:linear-gradient(var(--bg) 70%,transparent)}
.lead{color:var(--mid)}
/* Mehr-Info-Prinzip: schwarzes Quadrat mit Pfeil */
.more{border-bottom:0!important;padding:0!important;gap:16px!important;font-size:.72rem!important;font-weight:500!important;letter-spacing:.2em;text-transform:uppercase}
.more i{order:-1;width:clamp(54px,4.6vw,70px);height:clamp(54px,4.6vw,70px);display:flex;align-items:center;justify-content:center;background:#0e0e0e;color:#fff;font-size:1.3rem;letter-spacing:0}
.more:hover i{transform:none}.more i{transition:background .3s}.more:hover i{background:#333}
/* Leuchtquadrat hinter dem ersten großen Bild jeder Seite */
.page>.fig:first-of-type,.page>.gallery:first-of-type{position:relative;isolation:isolate}
.page>.fig:first-of-type::before{content:"";position:absolute;z-index:-1;left:calc(clamp(18px,3vw,48px)*-1);top:calc(clamp(18px,3vw,48px)*-1);width:min(38%,47vh);aspect-ratio:1;background:linear-gradient(135deg,var(--g1),var(--g2) 55%,var(--g3))}
.page>.fig:first-of-type img{box-shadow:0 34px 40px -18px rgba(20,25,35,.25)}
/* Leuchtquadrat neben der Überschrift, wenn kein Bild folgt */
.hero{position:relative}
.fig img,.cards .fig img,.portraits .fig img{background:var(--soft)}
.facts{border-top-color:var(--ink)}
/* Call to Action: Projekt anfragen */
.more.ask{gap:0!important;letter-spacing:.18em;font-size:.78rem!important;font-weight:600!important;color:#0e0e0e;position:relative;isolation:isolate;box-shadow:0 1px 2px rgba(14,14,14,.12),0 3px 8px rgba(14,14,14,.06);transition:box-shadow .35s}
.more.ask span{display:flex;align-items:center;height:clamp(54px,4.6vw,70px);padding:0 30px 0 26px;background-color:var(--bg,#f2f2f1);background-image:linear-gradient(110deg,var(--g1,#ff2bd6),var(--g2,#8a4dff) 45%,var(--g3,#00e5ff) 70%,var(--g1,#ff2bd6));background-size:220% 100%;background-repeat:repeat-x;background-position:0 0;transition:padding .35s cubic-bezier(.2,.8,.2,1)}
.more.ask span{background-image:none}
.more.ask:hover span,.more.ask:focus-visible span,.more.ask:active span{background-image:linear-gradient(110deg,var(--g1,#ff2bd6),var(--g2,#8a4dff) 45%,var(--g3,#00e5ff) 70%,var(--g1,#ff2bd6));animation:askflow 6s linear infinite;padding-right:44px}
.more.ask i{order:2!important;transition:background .3s!important}
.more.ask:hover i{transform:none!important;background:#0e0e0e!important}
.more.ask:hover{box-shadow:0 2px 4px rgba(14,14,14,.14),0 8px 18px rgba(14,14,14,.08)}
html.nosq .more.ask span{background-image:linear-gradient(110deg,var(--g1,#ff2bd6),var(--g2,#8a4dff) 45%,var(--g3,#00e5ff) 70%,var(--g1,#ff2bd6));animation:askflow 6s linear infinite}
@keyframes askflow{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){.more.ask span{animation:none!important}}

/* Wortmarke: P nicht abschneiden */
@media (min-width:641px){.wm{padding:10px 4px!important;box-sizing:border-box}.wm b{font-size:16px!important}.face.inv .wm b{font-size:16px!important}}

.brand{container-type:inline-size}.prism{transform:translateZ(-50cqw)}.face{transform:rotateY(calc(var(--k)*90deg)) translateZ(50cqw)!important}@keyframes prismIn{from{transform:translateZ(-50cqw) rotateY(90deg);opacity:0}}

.prism{transition:none!important}.prism.go{transition:transform 1.1s cubic-bezier(.7,0,.2,1)!important}.brand .prism{animation:none!important}.page,.foot{animation:none!important}

html.ni .bd,html.ni .bdev,html.ni .bdev *,html.ni .bi,html.ni .sw{transition:none!important;animation:none!important}


/* Seitenwechsel: der Browser blendet alte und neue Seite ineinander */
@view-transition{navigation:auto}::view-transition-old(root){animation:skmOut .45s cubic-bezier(.4,0,.2,1) both}::view-transition-new(root){animation:skmIn .9s cubic-bezier(.25,.1,.25,1) both}@keyframes skmOut{to{opacity:0}}@keyframes skmIn{from{opacity:0}}.rail{view-transition-name:skmrail}::view-transition-group(skmrail),::view-transition-old(skmrail),::view-transition-new(skmrail){animation:none}::view-transition-old(skmrail){display:none}

/* Gleiche Höhen auf allen Seiten wie auf der Startseite */
@media (min-width:821px){.top{padding-top:calc(33px + env(safe-area-inset-top,0px))!important}.page:not(:has(.bst)){padding-top:calc(31.1vh - 11px)!important}}

/* Ersatz, wenn der Browser nicht selbst überblendet: nur Deckkraft, keine Bewegung */
html.fin .top,html.fin .page,html.fin .foot,html.fin body>header,html.fin .stage{opacity:0}html.fin.fon .top,html.fin.fon .page,html.fin.fon .foot,html.fin.fon body>header,html.fin.fon .stage{opacity:1;transition:opacity .9s cubic-bezier(.25,.1,.25,1)}html.fout .top,html.fout .page,html.fout .foot,html.fout body>header,html.fout .stage{opacity:0!important;transition:opacity .45s cubic-bezier(.4,0,.6,1)!important}
.rv{unicode-bidi:bidi-override;direction:rtl;display:inline-block}
.pacts{display:flex;gap:28px;flex-wrap:wrap}.pacts .copy{text-decoration:none;display:inline-block}
/* Fuß wie auf der Startseite: nur Impressum und Datenschutz */
.foot{border-top:0!important;display:flex;justify-content:flex-end;padding-top:24px!important;padding-right:clamp(40px,5vw,90px)!important;padding-bottom:max(34px,env(safe-area-inset-bottom,0px))!important}
.fref{display:flex;gap:28px}.fref a{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding-bottom:6px;border-bottom:1px solid currentColor}
@media (max-width:820px){.foot{justify-content:flex-start;padding-right:16px!important}}
/* Referenz: Stele vor dem Quadrat wie auf der Startseite */
.tphero{--S:min(47vh,30vw,423px);display:grid;grid-template-columns:minmax(0,310px) 1fr;column-gap:30px;align-items:start;margin-bottom:clamp(56px,8vw,110px)}
.tphero .hero{margin:0;max-width:none}
.tpst{position:relative;margin:0;width:calc(var(--S)*1.6);height:calc(var(--S)*1.62);margin-top:10px}
.tpsq{position:absolute;left:0;top:0;width:var(--S);aspect-ratio:1/1;background:radial-gradient(75% 65% at 6% 64%,var(--g1) 0%,transparent 72%),radial-gradient(70% 70% at 96% 6%,var(--g3) 0%,transparent 70%),radial-gradient(85% 75% at 45% 104%,var(--g2) 0%,transparent 74%),linear-gradient(160deg,var(--g3),var(--g2) 52%,var(--g1))}
.tpimg{position:absolute;z-index:2;left:calc(var(--S)*.3);top:calc(var(--S)*-.3);height:calc(var(--S)*1.86);display:block}
.tpimg img{display:block;height:100%;width:auto;filter:drop-shadow(0 30px 34px rgba(20,25,35,.2))}
@media (max-width:820px){.tphero{--S:min(60vw,360px);grid-template-columns:1fr}.tpst{margin-top:calc(var(--S)*.42);width:calc(var(--S)*1.1)}}
/* So arbeiten wir: Stichworte auf gemeinsamer Grundlinie, verlinkt auf die FAQ */
.blist .pa{display:grid;grid-template-columns:4em minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-items:baseline;gap:24px;padding-block:clamp(22px,3.4vh,40px);border-bottom:1px solid var(--line)}
.blist .pt{grid-column:2;grid-row:1}.blist .pm{grid-column:3;grid-row:1/span 2}
.blist .ptg{grid-column:2;grid-row:2;align-self:end;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:22px;row-gap:6px;margin-top:26px;max-width:56ch;font-size:.9rem;line-height:1.3}
.ptg a{color:var(--mid);text-decoration:none;font-weight:500;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}.ptg a:hover,.ptg a:focus-visible{color:var(--ink);border-bottom-color:currentColor}
@media (max-width:820px){.blist .pa{grid-template-columns:2.4em 1fr;grid-template-rows:auto}.blist .pm{grid-column:2;grid-row:2}.blist .ptg{grid-row:3;margin-top:14px}}
/* FAQ */
.fqs{border-top:1px solid var(--ink);padding-top:28px;margin-bottom:clamp(48px,7vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}
.fqs h2{font-size:clamp(1.3rem,2vw,2.1rem);font-weight:600;letter-spacing:-.04em;margin:0}
.fql{display:grid;gap:0}.fq{padding:22px 0;border-bottom:1px solid var(--line);scroll-margin-top:120px}.fq:first-child{padding-top:0}
.fq .fw{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);margin:0 0 8px}
.fq h3{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}.fq p{margin:0;max-width:62ch;line-height:1.55}
.fq:target .fw{color:var(--ink)}.fq:target h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
@media (max-width:820px){.fqs{grid-template-columns:1fr;gap:20px}}
.bst.lay .bdev.lowr{translate:0 14%}
.plist .ptg a{display:inline;padding:0;gap:0;grid-template-columns:none;border-bottom:1px solid transparent}.plist .ptg a:hover,.plist .ptg a:focus-visible{border-bottom-color:currentColor}
@media (max-width:820px){html,body{overflow-x:clip}.bst{overflow-x:clip}}
.ctaph{margin-top:22px;font-size:.9rem;color:var(--mid)}.ctaph a{color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}.ctaph .sep{margin:0 10px;color:var(--mid)}
.ptg.bkw span{color:var(--mid);font-weight:500}.bintro{max-width:62ch;margin:-6px 0 34px}
/* Handy: Burger-Menü */
.burger{display:none}
@media (max-width:820px){
.burger{display:flex;flex-direction:column;justify-content:center;gap:7px;width:44px;height:44px;margin-left:auto;justify-self:end;background:none;border:0;padding:10px 8px;cursor:pointer;position:relative;z-index:62;color:var(--ink);-webkit-tap-highlight-color:transparent}
.burger i{display:block;width:26px;height:1.5px;background:currentColor;transition:transform .4s cubic-bezier(.6,0,.2,1)}
html.navopen .burger i:first-child{transform:translateY(4.25px) rotate(45deg)}
html.navopen .burger i:last-child{transform:translateY(-4.25px) rotate(-45deg)}
.topnav{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:var(--rail)!important;z-index:61!important;background:var(--bg)!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;gap:20px!important;padding:0 32px!important;margin:0!important;width:auto!important;overflow:visible!important;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
html.navopen .topnav{opacity:1;visibility:visible}
.topnav a{font-size:1.7rem!important;font-weight:600!important;letter-spacing:-.03em!important;text-transform:none!important;opacity:1!important;padding:4px 0!important;color:var(--ink)!important}
html.navopen{overflow:hidden}
}
/* Handy: Symbole einreihig, darunter die Ansicht, dann der Text */
@media (max-width:820px){
.bst{display:flex!important;flex-direction:column!important}
.bst>div:first-child{display:contents!important}
.bst .eyebrow{order:1}.bst h1{order:2}
.bst .bgrid{order:3;display:flex!important;flex-wrap:nowrap!important;gap:10px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:22px -16px 0 0!important;padding:4px 16px 8px 0!important;grid-template-columns:none!important}
.bst .bgrid::-webkit-scrollbar{display:none}
.bst .bgrid .bt{flex:0 0 64px!important;width:64px!important;scroll-snap-align:start}
.bst .bbox{order:4;margin-top:26px!important}
.bst .binfo{order:5;margin-top:22px!important}
.bst .bv{order:6}
}
@media (max-width:820px){.bst{row-gap:0!important}.bst h1{margin:0!important}.bst .bgrid{margin-top:26px!important}.bst .binfo .eyebrow,.bst .binfo h2{margin-top:0}}
@media (max-width:820px){.bst .bbox{margin-top:84px!important}.bst .bbox .barr{left:auto!important;right:0!important;align-items:flex-end}}
/* Teilen */
.share{font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 6px;color:var(--ink);cursor:pointer}
.mshare{display:none}
.sharepop{position:fixed;z-index:80;background:var(--bg,#f2f2f1);border:1px solid rgba(14,14,14,.14);box-shadow:0 18px 40px rgba(14,14,14,.14);padding:16px 18px 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 22px;min-width:280px;font-family:inherit}
.sharepop p{grid-column:1/-1;margin:0 0 8px;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mid,#6b6b6b)}
.sharepop a,.sharepop button{font:inherit;font-size:.9rem;font-weight:500;color:var(--ink,#0e0e0e);text-decoration:none;background:none;border:0;padding:7px 0;text-align:left;cursor:pointer}
.sharepop a:hover,.sharepop button:hover{text-decoration:underline;text-underline-offset:4px}
.sharepop .scopy{grid-column:1/-1;border-top:1px solid rgba(14,14,14,.12);margin-top:6px;padding-top:12px}
@media (max-width:820px){.mshare{display:block;font-size:1.7rem!important;font-weight:600;letter-spacing:-.03em;text-transform:none;border:0;padding:4px 0;margin-top:14px;color:var(--mid,#6b6b6b)}}
/* Handy: Kopf ohne Hintergrund, Überschrift auf Höhe des Burgers */
@media (max-width:820px){
.top{background:none!important;pointer-events:none;padding-top:calc(14px + env(safe-area-inset-top,0px))!important;padding-bottom:0!important}
.top .burger,.top .topnav{pointer-events:auto}
.burger{background:var(--bg);border-radius:0}
.page{padding-top:calc(26px + env(safe-area-inset-top,0px))!important}
.page>section:first-child .eyebrow,.bst .eyebrow,.tphero .eyebrow{padding-right:64px;min-height:44px;display:flex;align-items:center;margin-bottom:6px!important}
/* Ansicht: Quadrat rechts, Gerät mittig darauf, schaut links heraus */
.bst .bbox{width:100%!important;margin-top:72px!important}
.bst .bbox .brect{width:80%!important;margin-left:20%!important}
.bst .bbox .blab{left:20%!important}
.bst .bbox .bdraw{left:0!important;top:0!important;width:100%!important;height:auto!important;aspect-ratio:1/.8}
.bst .bbox .bd{inset:0!important;width:100%!important;height:100%!important}
.bst.lay .bdev,.bst .bdev{top:50%!important;translate:0 -50%;transform:none!important}
.bst .bdev.tab{left:4%!important;width:94%!important;height:auto!important}
.bst .bdev.lap{left:0!important;width:100%!important;height:auto!important}
.bst .bdev.pho{left:18%!important;height:106%!important;width:auto!important}
.bst .bdev.ter,.bst .bdev.stele{left:16%!important;height:114%!important;width:auto!important}
.bst .bdev img{width:100%!important;height:100%!important;object-fit:contain}
.bst .bdev.tab img,.bst .bdev.lap img{height:auto!important}
.bst .bdev.pho img,.bst .bdev.ter img,.bst .bdev.stele img{width:auto!important}
.bst .bbox .bacts{margin-left:20%}
.bst .binfo{display:none!important}
.minfo{display:inline-flex;align-items:center;gap:12px;margin:18px 0 0 20%;font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;background:none;border:0;padding:0;color:var(--ink);cursor:pointer}
.minfo i{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:#0e0e0e;color:#fff;font-style:normal;font-size:1.1rem;letter-spacing:0}
.infopop{position:fixed;inset:0;left:var(--rail);z-index:70;background:var(--bg);overflow-y:auto;padding:calc(84px + env(safe-area-inset-top,0px)) 24px 48px;opacity:0;transition:opacity .35s ease}
.infopop.on{opacity:1}
.infopop .binfo{display:block!important;opacity:1!important;filter:none!important;transform:none!important}
.infopop .ipx{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;width:44px;height:44px;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--ink);cursor:pointer}
}
@media (min-width:821px){.minfo{display:none}}

@media (max-width:820px){.bst .minfo{order:5}.bst .binfo{order:6}.bst .bv{order:7}.bst .bbox .bacts{margin-top:14px}}
@media (max-width:820px){.bst .bgrid{width:auto!important;max-width:none!important;align-self:stretch!important;min-width:0!important}}
@media (max-width:820px){.bst .bdev.stele,.bst .bdev.ter{height:104%!important;left:20%!important}.bst .bbox .bacts{margin-top:30px!important}}
@media (max-width:820px){.bst.lay .bdev.pho,.bst .bdev.pho,.bst.lay .bdev.ter,.bst .bdev.ter,.bst.lay .bdev.stele,.bst .bdev.stele{translate:0 -62%!important}}
@media (max-width:820px){.bst .bdev.stele,.bst .bdev.ter,.bst.lay .bdev.stele,.bst.lay .bdev.ter{height:92%!important}.bst .bdev.pho,.bst.lay .bdev.pho{height:94%!important}.bst.lay .bdev.pho,.bst .bdev.pho,.bst.lay .bdev.ter,.bst .bdev.ter,.bst.lay .bdev.stele,.bst .bdev.stele{translate:0 -56%!important}}
@media (max-width:820px){.bst .bdev.stele,.bst .bdev.ter,.bst.lay .bdev.stele,.bst.lay .bdev.ter{left:12%!important}}
/* Handy: Listen ohne Einzug, Nummer über der Überschrift */
@media (max-width:820px){
.plist a,.blist .pa{display:block!important;padding-block:26px!important}
.plist .pn{display:block;margin:0 0 8px;font-size:.72rem;letter-spacing:.12em}
.plist .pt{display:block}
.plist .pm,.blist .pm{display:block;margin-top:12px;text-align:left!important;max-width:none!important}
.plist .ptg{display:flex;margin-top:14px}
.plist a:hover .pt{transform:none}
}
@media (max-width:820px){.blist .ptg{align-content:flex-start!important;align-self:auto!important;row-gap:4px!important;height:auto!important}.blist .pa .ptg{display:flex!important;flex-wrap:wrap}.plist .ptg a,.plist .ptg span{line-height:1.5}}
@media (max-width:820px){.plist .ptg a{display:inline!important;padding:0!important}}
/* Handy: Quadrat linksbündig, Gerät schaut rechts heraus, Wechsel oben rechts */
@media (max-width:820px){
.bst .bbox .brect{width:80%!important;margin-left:0!important}
.bst .bbox .blab{left:0!important}
.bst .bbox .bacts{margin-left:0!important;width:80%!important}
.minfo{margin-left:0!important}
.bst .bdev.tab{left:8%!important;width:92%!important}
.bst .bdev.lap{left:10%!important;width:92%!important}
.bst .bdev.pho{left:46%!important}
.bst .bdev.ter,.bst .bdev.stele,.bst.lay .bdev.ter,.bst.lay .bdev.stele{left:44%!important}
.bst .bbox .barr{top:-56px!important;bottom:auto!important;left:auto!important;right:20%!important;transform:translateX(50%)}
.bst .bbox .barr #bno,.bst .bbox .barr .bvn{text-align:center}
}
@media (max-width:820px){.bst .bbox .barr{flex-direction:row-reverse!important;align-items:center!important;transform:none!important;right:20%!important;top:-50px!important;gap:12px!important}.bst .bbox .barr button{width:42px!important;height:42px!important}}
@media (max-width:820px){.bst .bbox .bdraw,.bst .bbox .bd,.bst .bbox .bdev{pointer-events:none!important}.minfo{position:relative;z-index:8}.bst .bbox .bacts,.bst .bbox .barr{position:relative;z-index:8}.bst .bbox .barr{position:absolute!important}}