/* DK Services — shared visual system */:root{--navy:#071a2f;--ink:#0f1d2e;--blue:#185bea;--muted:#5f6b78;--pale:#f4f6f8;--line:#d7dee5;--white:#fff;--radius:28px;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;color:var(--ink);background:#fff;font:17px/1.55 'Avenir Next',Avenir,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.08;letter-spacing:-.055em;font-weight:600}h2{font-size:clamp(38px,4.3vw,64px)}h3{font-size:clamp(24px,2.2vw,32px)}p{color:var(--muted)}p+p{margin-top:18px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button{color:inherit}img{display:block;max-width:100%;height:auto;object-fit:cover}button:disabled{cursor:default}button,a,summary,input,select,textarea{outline-offset:5px}:focus-visible{outline:3px solid #518cff}button{border:0}ul{padding-left:21px}li+li{margin-top:10px}::selection{background:#c8daff;color:var(--navy)}[hidden]{display:none!important}/* One container for header, chapters and footer. */.frame,.wrap{width:min(1200px,calc(100% - 2*clamp(20px,5vw,56px)));margin-inline:auto}.section{padding-block:clamp(80px,10vw,144px)}.micro{font-size:13px;font-weight:600;letter-spacing:.08em;line-height:1.5;text-transform:uppercase}.muted{color:var(--muted)}.blue-text{color:var(--blue)}.button{min-height:52px;display:inline-flex;align-items:center;justify-content:space-between;gap:26px;border-radius:999px;padding:14px 24px;font-size:16px;font-weight:600;line-height:1.5;transition:background .22s,transform .22s;white-space:normal}.button span{font-size:20px;line-height:1}.primary{background:var(--blue);color:#fff}.primary:hover{background:#2a6af0}.white{background:#fff;color:var(--navy)}.white:hover{background:#dce8fa}.text-link{display:inline-flex;align-items:center;gap:24px;min-height:48px;font-size:17px;font-weight:500;color:var(--blue)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:fixed;top:8px;left:12px;transform:translateY(-150%);background:white;padding:12px 20px;z-index:100;opacity:0;pointer-events:none}.skip:focus{transform:none;opacity:1;pointer-events:auto}
/* Navigation: .header alone is the plain bar of the legal pages; the site header (.header.hdr) builds on it below. */.header{position:sticky;top:0;z-index:30;background:var(--navy);color:white;border-bottom:1px solid #ffffff12}.brand{display:block;width:220px;flex-shrink:0}.brand img{width:100%;height:auto}
/* The first header (.topbar): the page opens with the full bar – logo left, chapters and inquiry right. It belongs to the
   hero: it holds at the top while the hero's stage is pinned and then leaves with it, moving up 1:1 (script.js sets
   translate). Below 960 px its "Menü" opens the island's menu; while that is open the bar sits under the menu's veil. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:39;height:var(--nav-height,64px);background:rgba(4,14,27,.72);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid #ffffff14;color:#fff}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%;width:min(1200px,calc(100% - 2*clamp(20px,5vw,56px)));margin:auto}
.topbar .brand{width:clamp(140px,14vw,172px)}
.topbar-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);font-size:13px;font-weight:500}
.topbar-nav>a{display:inline-flex;align-items:center;min-height:44px;color:#dbe4f0;transition:color .2s}
.topbar-nav>a:hover{color:#fff}
.topbar .nav-cta{min-height:38px;margin-left:10px;padding:0 16px;gap:8px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;transition:background .2s,scale .3s var(--ease)}
.topbar .nav-cta:hover{background:#2a6af0}
.topbar-menu{display:none;align-items:center;gap:18px;min-height:48px;padding:8px 0 8px 12px;background:none;color:#fff;font-size:14px}
.topbar-menu span{font-size:24px;transition:transform .2s}
.topbar-menu[aria-expanded=true] span{transform:rotate(45deg)}
@media(max-width:1100px){.topbar .nav-cta{margin-left:0}}
@media(max-width:959px){.topbar-nav{display:none}.topbar-menu{display:flex}}
/* Site header: a floating glass island – the tab bar of „Für wen“ (light) and „In Bewegung“ (dark). It stays out of the
   hero (.is-hidden) and appears once the hero has been left (the next chapter reaches it), opening from a small pill in the middle
   like the Dynamic Island; back in the hero it closes into that pill again. Its 64 px band keeps the page's offset under
   the fixed first header. script.js sets data-theme from the chapter underneath, slides the pill to the current chapter and keeps
   the island compact while reading on – DK sign, that chapter and the inquiry (.is-compact); pointing, tabbing or
   scrolling back opens it (.is-peek). It also sets the island's width in px (--island-w), so every change of its content
   can move. Below 960 px the menu grows out of it. The header band stays 64 px high (--nav-height), which the pinned
   chapters rely on. The class hdr also tells feinschliff.* to leave this menu alone. */
.header.hdr{z-index:40;height:var(--nav-height,64px);background:none;border-bottom:0;color:var(--hdr-fg);pointer-events:none}
.hdr[data-theme=dark]{--hdr-fg:#fff;--hdr-soft:#bcc8d8;--hdr-scrim:rgba(2,8,16,.5);--isl-bg:rgba(27,42,59,.74);--isl-open:rgba(27,42,59,.97);--isl-hi:rgba(255,255,255,.16);--isl-lo:rgba(255,255,255,.05);--isl-edge:rgba(255,255,255,.1);--isl-drop:rgba(0,0,0,.55);--lens-bg:#f1f5fc;--lens-fg:#071a2f;--lens-drop:rgba(0,0,0,.18)}
.hdr[data-theme=light]{--hdr-fg:#0f1d2e;--hdr-soft:#5f6b78;--hdr-scrim:rgba(227,231,236,.5);--isl-bg:rgba(227,231,236,.86);--isl-open:rgba(238,241,244,.98);--isl-hi:rgba(255,255,255,.7);--isl-lo:rgba(255,255,255,.3);--isl-edge:rgba(7,26,47,.05);--isl-drop:rgba(7,26,47,.3);--lens-bg:#fff;--lens-fg:#0f1d2e;--lens-drop:rgba(7,26,47,.12)}
.hdr-inner{display:flex;align-items:flex-start;justify-content:center;height:100%;padding:8px 12px 0}
.island{--island-logo:128px;--logo-w:var(--island-logo);position:relative;display:flex;align-items:center;justify-content:space-between;width:var(--island-w,auto);height:48px;padding:4px;border-radius:24px;background:var(--isl-bg);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 .5px 0 var(--isl-hi),inset 0 -.5px 0 var(--isl-lo),0 0 0 .5px var(--isl-edge),0 14px 32px -16px var(--isl-drop);clip-path:inset(-60px round 24px);pointer-events:auto;transition:width .6s var(--ease),clip-path .6s var(--ease),opacity .35s var(--ease),visibility 0s,background-color .45s var(--ease),box-shadow .45s var(--ease)}
/* In the hero the island rests as a small pill in the middle, out of sight. */
.js .hdr.is-hidden:not(.is-menu) .island{opacity:0;clip-path:inset(6px calc(50% - 40px) round 24px);visibility:hidden;pointer-events:none;transition:width .6s var(--ease),clip-path .4s var(--ease),opacity .3s var(--ease),visibility 0s linear .4s,background-color .45s var(--ease),box-shadow .45s var(--ease)}
.hdr-brand{display:flex;align-items:center;flex-shrink:0;height:40px;padding:0 14px;border-radius:999px;outline-offset:0}
.brand-clip{position:relative;display:block;width:var(--logo-w);overflow:hidden;transition:width .6s var(--ease)}
.brand-clip img{display:block;width:var(--logo-w);max-width:none;height:auto;transition:width .6s var(--ease),opacity .45s var(--ease)}
.brand-clip .on-light{position:absolute;left:0;top:0}
.hdr[data-theme=dark] .on-light,.hdr[data-theme=light] .on-dark{opacity:0}
.island-now{display:block;flex-shrink:0;width:0;height:40px;overflow-x:clip;overflow-y:visible;opacity:0;transition:width .6s var(--ease),opacity .25s}
.island-now-text{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:var(--lens-bg);box-shadow:0 1px 2px var(--lens-drop),0 3px 10px var(--lens-drop);color:var(--lens-fg);font-size:13px;font-weight:600;letter-spacing:.01em;white-space:nowrap;transition:opacity .18s,background-color .45s var(--ease),color .45s var(--ease)}
.island-now.is-swapping .island-now-text{opacity:0}
.hdr #navigation{display:flex;align-items:center;flex-shrink:0;gap:6px;font-size:13px;font-weight:500;letter-spacing:.01em}
.hdr-links{position:relative;display:flex;align-items:center;width:var(--links-w,auto);overflow-x:clip;overflow-y:visible;transition:width .6s var(--ease),opacity .3s var(--ease)}
.hdr-link{position:relative;z-index:1;display:inline-flex;align-items:center;flex-shrink:0;height:40px;padding:0 clamp(12px,1.2vw,16px);border-radius:999px;color:var(--hdr-soft);white-space:nowrap;transition:color .3s}
.hdr-link:hover{color:var(--hdr-fg)}
.hdr-link.is-current{color:var(--lens-fg)}
.hdr-lens{position:absolute;left:0;top:0;width:var(--lens-w,0);height:40px;translate:var(--lens-x,0) 0;border-radius:999px;background:var(--lens-bg);box-shadow:0 1px 2px var(--lens-drop),0 3px 10px var(--lens-drop);opacity:0;pointer-events:none;transition:translate .5s var(--ease),width .5s var(--ease),opacity .3s,background-color .45s var(--ease)}
.hdr-lens.is-on{opacity:1}
.hdr-lens.no-anim{transition:none}
.hdr .nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;height:40px;padding:0 18px;border-radius:999px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;line-height:1;letter-spacing:.01em;white-space:nowrap;transition:background-color .2s}
.hdr .nav-cta:hover{background:#2a6af0}
.hdr-quick{display:none;position:relative;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;transition:background-color .2s,opacity .3s var(--ease)}
.hdr-quick::after{content:"";position:absolute;inset:-5px -2px}
.hdr-quick:hover{background:#2a6af0}
/* Menu button: two lines that turn into a cross. Its transition outranks the press scale feinschliff.css gives .menu. */
.hdr .menu{display:none;position:relative;width:40px;height:40px;padding:0;border-radius:999px;background:none;color:var(--hdr-fg);outline-offset:0}
.header.hdr .menu{transition:color .45s var(--ease),scale .3s var(--ease)}
.hdr .menu::before,.hdr .menu::after{content:"";position:absolute;left:11px;width:18px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .4s var(--ease)}
.hdr .menu::before{top:16px}
.hdr .menu::after{top:22px}
.hdr .menu[aria-expanded=true]::before{transform:translateY(3px) rotate(45deg)}
.hdr .menu[aria-expanded=true]::after{transform:translateY(-3px) rotate(-45deg)}
/* Compact while reading on: the word mark and the links shrink away, the chapter appears as the pill. */
.island.is-compact:not(.is-peek) .brand-clip{width:calc(var(--logo-w)*.311)}
.island.is-compact:not(.is-peek) .hdr-links{width:0;opacity:0}
.island.is-compact:not(.is-peek) .island-now{width:var(--now-w,0);opacity:1;transition:width .6s var(--ease),opacity .35s var(--ease) .1s}
.island.is-measuring .hdr-links{width:auto!important;transition:none!important}
/* Behind the open menu the page dims and blurs; a tap closes it. */
.hdr-scrim{position:fixed;inset:0;z-index:-1;background:var(--hdr-scrim);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.hdr.is-menu .hdr-scrim{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s var(--ease),visibility 0s}
html.menu-open{overflow:hidden}
/* Focus in the sticky header must not scroll the page: with scroll-padding-top (84 px) Chrome took every header link for
   hidden and jumped 460 px up on each Tab. */
.hdr :is(a,button){scroll-margin-block:-84px 84px}
.hdr-instant,.hdr-instant *{transition:none!important}
@media(max-width:959px){
.island{--island-logo:124px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:40px 0fr;column-gap:4px;height:auto;transition:width .6s var(--ease),clip-path .6s var(--ease),opacity .35s var(--ease),visibility 0s,grid-template-rows .5s var(--ease),border-radius .5s var(--ease),background-color .45s var(--ease),box-shadow .45s var(--ease)}
.island.is-open{grid-template-rows:40px 1fr;border-radius:28px;background:var(--isl-open)}
.hdr-brand{grid-area:1/1;justify-self:start}
.island-now{display:none}
.hdr-quick{grid-area:1/2;display:inline-flex}
.hdr .menu{grid-area:1/3;display:block}
.island.is-open .hdr-quick{opacity:0;pointer-events:none}
.js .hdr #navigation{grid-area:2/1/3/4;display:block;min-height:0;max-height:calc(100svh - 72px);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;transition:visibility 0s linear .5s}
.js .island.is-open #navigation{visibility:visible;transition:visibility 0s}
.hdr-links{flex-direction:column;align-items:stretch;gap:2px;width:auto;padding-top:14px;overflow:visible}
.hdr-lens{display:none}
.hdr-link{height:auto;min-height:50px;padding:0 18px;font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--hdr-fg)}
.hdr-link.is-current{background:var(--lens-bg);color:var(--lens-fg);box-shadow:0 1px 2px var(--lens-drop),0 3px 10px var(--lens-drop)}
.hdr .nav-cta{display:flex;height:52px;margin:12px 4px 4px;font-size:17px}
.js .hdr-link,.js .hdr .nav-cta{opacity:0;translate:0 -8px;transition:opacity .15s,translate .15s}
.js .island.is-open :is(.hdr-link,.nav-cta){opacity:1;translate:0 0;transition:opacity .4s var(--ease) calc(.12s + var(--i,0)*.035s),translate .55s var(--ease) calc(.12s + var(--i,0)*.035s),background-color .45s var(--ease),color .45s var(--ease)}
}
/* Without JavaScript the first header stays at the top of the screen as the only header, links wrapped on phones. */
html:not(.js) .header.hdr{display:none}
html:not(.js) .topbar{position:sticky;top:0;z-index:40}
@media(max-width:959px){
html:not(.js) .topbar{position:relative;height:auto}
html:not(.js) .topbar-inner{flex-wrap:wrap;height:auto;padding-top:8px}
html:not(.js) .topbar-menu{display:none}
html:not(.js) .topbar-nav{display:flex;flex-wrap:wrap;gap:2px;width:100%;padding:8px 0 18px}
html:not(.js) .topbar-nav>a{padding:8px 10px}
}
@media print{.topbar{display:none!important}}
/* Promise */.intro-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px;max-width:780px}.intro-columns p+p{margin:0}
/* Service detail content, shown inline without JavaScript and in the dialog with it. */.service-body{font-size:16px}.service-body>p{margin:18px 0 24px}.service-body ul{color:var(--muted);margin-bottom:28px}.round-button{width:46px;height:46px;border-radius:50%;background:#e0e6ec;color:var(--ink);font-size:23px;line-height:1;transition:background .2s}.round-button:hover{background:#cbd6e1}.round-button:disabled{color:#a1acb5;background:#e8edf1}

/* Inquiry, old contact: only the review pages footer-* and zielgruppen-* still show it. Delete once none does (footer picked, zielgruppen pages regenerated from index.html). The bare form rules are limited to .contact, so they stay off the new contact ("Kontakt: Schlussbild" at the end of this file). */.contact{display:grid;grid-template-columns:.95fr 1.05fr;gap:100px;align-items:start}.contact h2{font-size:clamp(40px,5.4vw,76px);line-height:1.02;letter-spacing:-.04em}.contact-copy .lead{color:var(--ink);font-size:21px;letter-spacing:-.02em;margin-top:34px}.contact-copy>p:not(.eyebrow){max-width:360px}.contact-copy>p:not(.eyebrow,.lead){font-size:17px}.contact-note{margin-top:38px;padding-top:25px;border-top:1px solid var(--line);max-width:365px}.contact-note .micro{color:var(--blue)}.contact-note p{font-size:14px;margin-top:10px}.contact form{background:var(--pale);padding:35px;border-radius:var(--radius)}:where(.contact) form h3{font-size:26px}form .form-intro{font-size:14px;margin-top:10px;margin-bottom:28px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}:where(.contact) form label{display:block;font-size:14px;font-weight:600;margin-bottom:18px;min-width:0}input,select,textarea{margin-top:7px;background:#fff;color:var(--ink);width:100%;max-width:100%;border:1px solid #d8dfe6;border-radius:12px;padding:13px;font-size:16px;line-height:1.4;min-height:48px;font-weight:400}input::placeholder,textarea::placeholder{color:#727d87;opacity:1}select{padding-right:22px;text-overflow:ellipsis}textarea{resize:vertical;min-height:135px}input:focus,textarea:focus,select:focus{border-color:var(--blue)}.form-note{font-size:13px;line-height:1.65;margin-bottom:22px}:where(.contact) form .button{width:100%}#form-status{font-size:14px;margin-top:14px}#form-status:empty{display:none}
/* Footer and reusable legal pages */footer{background:var(--navy);color:#fff;padding:60px 0 28px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-bottom:50px}.footer-top p{font-size:27px;color:white;line-height:1.2;letter-spacing:-.035em;white-space:nowrap}.footer-top p span{color:#93b7ff}.back-top{display:flex;align-items:center;gap:24px;font-size:13px;min-height:44px}.back-top span{font-size:24px}.footer-bottom{padding-top:25px;border-top:1px solid #ffffff24;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#aab9ca;font-size:13px}.footer-bottom>div{display:flex;gap:24px}.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}.legal{max-width:850px;min-height:75vh}.legal h1{font-size:clamp(42px,6vw,64px);margin-bottom:32px}.legal h2{font-size:26px;margin:32px 0 14px}.legal li{color:var(--muted)}body>.header:has(>.logo),body>.header:has(>a){padding:16px clamp(20px,5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:16px}.logo{width:min(220px,48vw)}
/* Accessible top-layer views */#detail-dialog{border:0;padding:0;border-radius:28px;background:#fff;color:var(--ink);width:min(940px,calc(100vw - 48px));max-width:940px;max-height:calc(100dvh - 64px);overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 100px #00102040}#detail-dialog::backdrop{background:#041223c7;backdrop-filter:blur(8px)}#detail-dialog[open]{animation:dialog-in .32s var(--ease) both}.dialog-toolbar{position:sticky;top:0;z-index:2;background:#ffffffee;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line)}.dialog-toolbar>.micro{color:var(--muted)}.dialog-close{display:flex;align-items:center;gap:14px;min-height:44px;border-radius:999px;padding:8px 14px;background:var(--pale);font-size:14px}.dialog-close span{font-size:23px;line-height:1}.dialog-content{padding:36px}.dialog-content h2{font-size:clamp(32px,4vw,50px);margin-bottom:28px}.dialog-service-image{width:100%;height:330px;object-fit:cover;border-radius:16px}.dialog-content .service-body{max-width:660px;margin:28px auto 4px}.dialog-content .service-body>p{font-size:18px;color:var(--ink)}.dialog-video{width:100%;max-height:60vh;background:#020b15;border-radius:16px;display:block}.video-description{margin-top:20px;font-size:14px;max-width:680px}.dialog-open{overflow:hidden}
/* Progressive motion: one-time reveal, separately scroll-linked hero */.reveal-pending{opacity:0;transform:translateY(24px)}.reveal-in{transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--reveal-delay,0ms);opacity:1;transform:none}.reveal-pending:focus-within{opacity:1;transform:none}@keyframes dialog-in{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}@media(hover:hover){.button:hover{transform:translateY(-1px)}}

@media(max-width:1100px){.contact{gap:50px}.contact form{padding:28px}.field-pair{grid-template-columns:1fr;gap:0}}
@media(min-width:601px) and (max-width:920px){.footer-top{flex-wrap:wrap}.footer-top p{order:1;flex-basis:100%}}
@media(max-width:850px){.contact{gap:35px}.footer-top .brand{width:190px}.footer-top p{font-size:24px}}
@media(max-width:600px){.round-button{width:44px;height:44px}.contact{grid-template-columns:1fr;gap:40px}.contact-copy .lead{font-size:21px;margin-top:28px}.contact form{padding:25px 20px}.field-pair{grid-template-columns:1fr;gap:0}:where(.contact) form h3{font-size:24px}:where(.contact) form .button{padding-inline:18px}.contact-note{margin-top:25px}.footer-top{align-items:start;flex-direction:column;gap:32px;padding-bottom:30px}.footer-top .brand{width:205px}.footer-top p{font-size:min(30px,5.8vw)}.footer-bottom{flex-wrap:wrap;gap:16px}.footer-bottom>div{width:100%}#detail-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);border-radius:20px}.dialog-toolbar{padding:10px 14px}.dialog-content{padding:24px 20px}.dialog-content h2{font-size:33px;margin-bottom:22px}.dialog-service-image{height:260px}.dialog-content .service-body>p{font-size:16px}.dialog-content .service-body{font-size:14px}.video-description{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-pending{opacity:1;transform:none}.hero-photo{transform:none!important}}
@media print{.header,.gallery-controls,.compare-tabs-wrap,.button,.back-top,form,.lift-film{display:none!important}.section{padding-block:35px}.frame,.wrap{width:100%}.gallery{overflow:visible}.gallery-track{width:100%;padding:0;display:grid;grid-template-columns:1fr 1fr}.service-card{width:auto;break-inside:avoid}.service-details .service-body{display:block}.ba-panel[hidden]{display:block!important}.reveal-pending{opacity:1;transform:none}.lift{print-color-adjust:exact}.dialog-open{overflow:visible}}
/* Intermediate widths: retain generous text lines without compressed columns. */
@media(min-width:601px) and (max-width:760px){.contact{grid-template-columns:1fr;gap:40px}.contact-copy h2 br:nth-child(2){display:none}.contact form .field-pair{grid-template-columns:1fr 1fr;gap:18px}.contact-copy>p:not(.eyebrow){max-width:500px}}
/* Chapter heading: headline and one sentence, centred in the frame. */
.frame-heading{max-width:820px;margin:0 auto clamp(40px,5vw,64px);text-align:center}.frame-heading h2{font-size:clamp(36px,5vw,64px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}.frame-heading p:not(.eyebrow){margin:18px 0 0;font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:#5f6b78;text-wrap:balance}
/* Services: native scroll rail of square cards; each card opens the shared detail dialog. */
.services{background:#f4f6f8;overflow:hidden;padding-block:clamp(80px,10vw,144px)}.gallery{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:max(clamp(20px,5vw,56px),calc((100% - 1200px)/2));padding-block:52px 132px;margin-block:-48px -104px}.gallery::-webkit-scrollbar{display:none}.gallery-track{display:flex;gap:24px;width:max-content;padding-inline:max(clamp(20px,5vw,56px),calc((100% - 1200px)/2))}.service-card{--title-size:clamp(24px,2.3vw,30px);flex-shrink:0;width:clamp(300px,34vw,440px);scroll-snap-align:start;background:#fff;border-radius:28px;overflow:hidden;color:#0f1d2e;position:relative;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}.service-details summary{display:flex;flex-direction:column;list-style:none;cursor:pointer}.service-details summary::-webkit-details-marker{display:none}.service-details summary:focus-visible{outline:none}.service-card:has(summary:focus-visible){outline:3px solid #518cff;outline-offset:4px}.card-photo{display:block;aspect-ratio:1/1;overflow:hidden;background:#e4e8ed}.card-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--card-pos,center);transform:scale(var(--zoom,1));transition:transform .8s var(--ease)}.card-content{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:28px 32px 32px}.card-text{min-width:0}.card-title{display:block;font-size:var(--title-size);line-height:1.15;letter-spacing:-.025em;font-weight:600}.card-sub{display:block;margin-top:8px;font-size:17px;line-height:1.45;color:#5f6b78}
/* The plus lines up with the first subtitle line, so it sits at the same height on every card. */
.plus{position:relative;flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#0f1d2e;transition:background-color .3s;margin-top:calc(var(--title-size)*1.15 + 8px + 17px*1.45 - 40px)}.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:1px;background:#fff}.plus::after{width:2px;height:14px;margin:-7px 0 0 -1px}.service-details .service-body{padding:0 32px 32px}.gallery-footer{display:flex;align-items:center;justify-content:space-between;gap:24px}.gallery-footer>p{font-size:14px;line-height:1.45;color:#5f6b78}.gallery-controls{display:flex;align-items:center;gap:10px}.gallery-count{margin-right:10px;font-size:14px;color:#5f6b78;font-variant-numeric:tabular-nums;white-space:nowrap}.gallery-controls .round-button{width:46px;height:46px;background:#e3e7ec;color:#0f1d2e;font:20px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}.gallery-controls .round-button:hover{background:#cfd7df}.gallery-controls .round-button:disabled{color:#a1acb5;background:#eaedf1}/* Hover lifts the card above its neighbours; the rail padding above leaves room for scale and shadow. */
@media(hover:hover){.service-card:hover{--zoom:1.035;z-index:1;transform:scale(1.1);box-shadow:0 32px 64px -28px #071a2f66}.service-card:hover .plus{background:var(--blue)}}@media(max-width:1068px){.gallery-track{gap:20px}}@media(max-width:600px){.service-card{width:82vw;max-width:370px}.gallery-track{gap:16px}.card-content{padding:22px 22px 24px}.service-details .service-body{padding:0 22px 24px}}
/* Before/after: one project at a time, the divider over two aligned photos. Chapter head, photo, caption and tabs share one screen. From 961 px the caption and the tabs stand in a 300 px column beside the photo, and the photo's size follows the window height (reserve = chapter head + a little air); below that they stand under the photo, which is 4:3 up to 860 px and 3:2 on phones. With JavaScript the three pairs lie on top of each other and crossfade; without it they stand one below the other. */.compare{background:#f4f6f8;padding-block:clamp(80px,10vw,144px)}.compare .frame-heading{margin-bottom:clamp(24px,3vw,32px)}.ba-stage{margin-inline:auto}.ba-panel+.ba-panel{margin-top:clamp(56px,7vw,88px)}.js .ba-stage{display:grid}.js .ba-panel{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .45s cubic-bezier(.2,.75,.2,1),visibility 0s linear .45s}.js .ba-panel.is-current{z-index:2;opacity:1;visibility:visible;transition:opacity .45s cubic-bezier(.2,.75,.2,1),visibility 0s}.js .ba-panel.is-leaving{z-index:1;opacity:1;visibility:visible;transition:none}.js .ba-caption{transition:opacity .2s}.js .ba-panel:not(.is-current) .ba-caption{opacity:0}.ba{--split:50%;position:relative;overflow:hidden;isolation:isolate;width:100%;aspect-ratio:16/9;border-radius:28px;background:#e3e7ec;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}.ba-layer{position:absolute;inset:0}.ba-after{clip-path:inset(0 0 0 var(--split))}.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--ba-pos,center);pointer-events:none}.ba-label{position:absolute;top:20px;left:20px;padding:6px 14px;border-radius:999px;background:#ffffffe6;color:#0f1d2e;font-size:14px;font-weight:500;line-height:1.3;pointer-events:none}.ba-after .ba-label{left:auto;right:20px;background:#071a2fd9;color:#fff}.ba-line{position:absolute;top:0;bottom:0;left:var(--split);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px #071a2f4d;pointer-events:none;opacity:var(--ba-ui,1)}.ba-handle{position:absolute;top:50%;left:clamp(30px,var(--split),calc(100% - 30px));transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#ffffffd1;-webkit-backdrop-filter:blur(12px) saturate(1.8);backdrop-filter:blur(12px) saturate(1.8);box-shadow:inset 0 .5px 0 #fffffff2,inset 0 -.5px 0 #ffffff59,0 10px 30px -10px #071a2f66;display:flex;align-items:center;justify-content:center;gap:6px;cursor:ew-resize;opacity:var(--ba-ui,1);transition:transform .25s cubic-bezier(.2,.75,.2,1)}.ba-handle:focus-visible{opacity:1}.ba.is-dragging .ba-handle{transform:translate(-50%,-50%) scale(1.08)}.ba-handle span{width:0;height:0;border-style:solid;border-width:5px 7px 5px 0;border-color:transparent #0f1d2e transparent transparent}.ba-handle span+span{border-width:5px 0 5px 7px;border-color:transparent transparent transparent #0f1d2e}.ba-caption{width:min(760px,calc(100vw - 2 * clamp(20px,5vw,56px)));margin:16px 0 0 calc(50% - min(380px,calc(50vw - clamp(20px,5vw,56px))));font-size:17px;line-height:1.47;color:#5f6b78;text-align:center;text-wrap:balance}.ba-caption strong{font-weight:600;color:#0f1d2e}.ba-caption .text-link{display:inline;min-height:0;white-space:nowrap;transition:color .2s}.ba-caption .text-link span{display:inline-block;margin-left:2px;transition:transform .3s var(--ease)}.ba-caption .text-link:hover{color:#1249bc}.ba-caption .text-link:hover span{transform:translateX(3px)}.compare-tabs-wrap{display:flex;justify-content:center;margin-top:20px}.compare-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#e3e7ec}.compare-tabs button{min-height:44px;min-width:112px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;background:transparent;color:#5f6b78;transition:background-color .25s,color .25s,box-shadow .25s}.compare-tabs button[aria-pressed=true]{background:#fff;color:#0f1d2e;box-shadow:0 1px 2px #071a2f1f,0 3px 10px #071a2f14}@media(min-width:961px){.ba-stage{grid-template-columns:minmax(0,1fr) 300px;column-gap:clamp(28px,3vw,48px);width:min(100%,max(760px,calc((100svh - var(--nav-height,64px) - 146px - 2.12 * clamp(36px,5vw,64px)) * 16 / 9 + 300px + clamp(28px,3vw,48px))))}.ba-stage,.ba-panel{display:grid}.ba-panel{grid-template-columns:subgrid;grid-column:1/-1}.js .ba-panel{grid-area:1/1/2/-1}.ba-caption{grid-column:2;width:auto;margin:0;text-align:left;text-wrap:pretty}.compare-tabs-wrap{grid-column:2;grid-row:1;align-self:end;position:relative;z-index:3;margin:0}.compare-tabs{display:flex;width:100%}.compare-tabs button{flex:1;min-width:0;padding:0 12px}}@media(min-width:861px) and (max-width:960px){.ba-stage{width:min(100%,max(480px,calc((100svh - var(--nav-height,64px) - 284px - 2.12 * clamp(36px,5vw,64px)) * 16 / 9)))}}@media(max-width:860px){.ba{aspect-ratio:4/3}.ba-stage{width:min(100%,max(420px,calc((100svh - var(--nav-height,64px) - 300px - 2.12 * clamp(36px,5vw,64px)) * 4 / 3)))}}@media(max-width:600px){.ba{aspect-ratio:3/2}.ba-handle{width:46px;height:46px}.ba-label{top:14px;left:14px}.ba-after .ba-label{right:14px}.compare-tabs button{min-width:0}}@media(prefers-reduced-motion:reduce){.js .ba-panel,.js .ba-panel.is-current,.ba-handle{transition:none}}@media print{.js .ba-stage{display:block}.js .ba-panel{opacity:1;visibility:visible}.js .ba-panel+.ba-panel{margin-top:40px}.ba-caption{opacity:1!important}}
/* Project archive: one looping strip of original photos; each photo opens the fullscreen viewer. */
.projects{padding-block:clamp(80px,10vw,144px)}.projects .frame-heading{margin-bottom:clamp(32px,4vw,48px)}.shots{--shot-h:clamp(360px,38vw,540px);--shot-gap:24px;--shot-radius:28px;--dot-active:32px;--dot-pad:5px;--island-button:44px;--island-pad:14px;position:relative}.shot-strip{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:max(clamp(20px,5vw,56px),calc((100% - 1200px)/2));padding-block:4px 8px;outline-offset:-6px}.shot-strip::-webkit-scrollbar{display:none}.shot-track{display:flex;align-items:flex-start;gap:var(--shot-gap);width:max-content;padding-inline:max(clamp(20px,5vw,56px),calc((100% - 1200px)/2))}.shot{flex-shrink:0;width:calc(var(--shot-h)*var(--shot-ar,1));max-width:var(--shot-max,none);scroll-snap-align:start}.shot-open{position:relative;display:block;height:var(--shot-h);overflow:hidden;border-radius:var(--shot-radius);background:#e4e8ed;cursor:zoom-in;outline-offset:1px}.shot-open img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--shot-pos,center);transform:scale(var(--zoom,1));transition:transform .8s var(--ease)}.shot figcaption{padding-top:20px}.shot figcaption p{font-size:17px;line-height:1.47;color:#5f6b78;text-wrap:pretty}.shot figcaption strong{font-weight:600;color:#0f1d2e}
/* Glass islands on the images, edged only by hairline light (top) and reflection (bottom), no border.
   Their lower edge sits 20px above the image edge (4px strip padding included). */
.shot-controls{position:absolute;left:0;right:0;top:calc(4px + var(--shot-h) - 72px);z-index:2;display:flex;justify-content:center;padding-inline:20px;pointer-events:none}.shot-nav{display:flex;align-items:center;gap:12px;pointer-events:auto}.shot-island{display:flex;align-items:center;height:52px;padding:0 var(--island-pad);border-radius:999px;background:#ffffff40;-webkit-backdrop-filter:blur(10px) saturate(1.8);backdrop-filter:blur(10px) saturate(1.8);box-shadow:inset 0 .5px 0 #ffffffb3,inset 0 -.5px 0 #ffffff33,0 10px 30px -12px #071a2f4d}.shot-arrows{padding:0 4px}.shot-dot{display:flex;align-items:center;justify-content:center;height:44px;padding:0 var(--dot-pad);background:none}.shot-dot span{display:block;width:8px;height:8px;border-radius:999px;background:#0f1d2e80;transition:width .5s var(--ease),background-color .3s}.shot-dot[aria-current=true] span{width:var(--dot-active);background:#0f1d2e}.shot-arrow{position:relative;flex-shrink:0;width:var(--island-button);height:44px;padding:0;border-radius:50%;background:none;color:#0f1d2e;transition:background-color .2s,color .2s}.shot-arrow span{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -2.5px;border-left:2px solid;border-bottom:2px solid;transform:rotate(45deg)}.shot-next span{margin-left:-6.5px;transform:rotate(-135deg)}
@media(hover:hover){.shot-open:hover{--zoom:1.03}.shot-arrow:hover{background:#ffffff59}}@media(max-width:1068px){.shots{--shot-gap:20px}}@media(max-width:860px){.shots{--shot-h:clamp(340px,50vw,420px)}}@media(max-width:600px){.shots{--shot-h:clamp(260px,72vw,340px);--shot-max:calc(100vw - 56px);--shot-gap:16px;--dot-active:24px;--dot-pad:4px}}@media(max-width:370px){.shots{--dot-active:20px;--dot-pad:2px;--island-button:40px;--island-pad:8px}}
/* Fullscreen viewer: dark stage, swipe or arrows, thumbnails of the whole archive. */
.viewer{border:0;padding:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;background:#020b15;color:#fff;overflow:hidden}.viewer::backdrop{background:#071a2fa6;backdrop-filter:blur(14px)}.viewer[open]{animation:viewer-in .28s var(--ease) both}@keyframes viewer-in{from{opacity:0}}.viewer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;height:100%}.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(16px,3vw,28px) 8px}.viewer-count{font-size:15px;color:#aebccc;font-variant-numeric:tabular-nums}.viewer-close{position:relative;flex-shrink:0;width:44px;height:44px;padding:0;border-radius:50%;background:#ffffff1f;transition:background-color .2s}.viewer-close::before,.viewer-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;border-radius:1px;background:#fff;transform:rotate(45deg)}.viewer-close::after{transform:rotate(-45deg)}.viewer-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:8px clamp(80px,8vw,128px);touch-action:pan-y;user-select:none;-webkit-user-select:none}.viewer-image{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:14px}.viewer-arrow{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-top:-24px;padding:0;border-radius:50%;background:#ffffff1f;color:#fff;font:20px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;transition:background-color .2s,opacity .2s}.viewer-prev{left:clamp(16px,2.5vw,32px)}.viewer-next{right:clamp(16px,2.5vw,32px)}.viewer-arrow:disabled{opacity:.3}.viewer-caption{padding:20px clamp(16px,3vw,28px) 0}.viewer-caption p{max-width:680px;margin:0 auto;text-align:center;font-size:17px;line-height:1.47;color:#aebccc;text-wrap:balance}.viewer-caption strong{font-weight:600;color:#fff}.viewer-thumbs{position:relative;overflow-x:auto;scrollbar-width:none;padding:16px clamp(16px,3vw,28px) max(20px,env(safe-area-inset-bottom))}.viewer-thumbs::-webkit-scrollbar{display:none}.viewer-thumb-track{display:flex;gap:8px;width:max-content;margin-inline:auto;padding:4px}.viewer-thumb{flex-shrink:0;width:64px;height:48px;padding:0;border-radius:8px;overflow:hidden;background:none;opacity:.45;box-shadow:0 0 0 0 #0000;transition:opacity .25s,box-shadow .25s}.viewer-thumb[aria-current=true]{opacity:1;box-shadow:0 0 0 2px #020b15,0 0 0 4px #fff}.viewer-thumb img{width:100%;height:100%;object-fit:cover}
@media(hover:hover){.viewer-close:hover,.viewer-arrow:not(:disabled):hover{background:#ffffff38}.viewer-thumb:hover{opacity:1}}@media(max-width:600px){.viewer-stage{padding:8px 12px}.viewer-arrow{display:none}.viewer-thumb{width:52px;height:40px}}@media print{.shot-controls{display:none!important}.shot-strip{overflow:visible}.shot-track{width:auto;flex-wrap:wrap;padding:0}.shot[data-clone]{display:none}.shot{break-inside:avoid}}
/* Zielgruppen: one drawn building ("Ihr Objekt") in the line style of the Vorgehen drawing, three situations. A tab bar in the look of
   the before/after tabs switches which details draw into it; the caption below uses the bold lead of the Einblicke captions. Light
   chapter over the dark Höhenarbeiten, overlapping by 40 px like Haltung over the hero. Without JavaScript all captions are listed. */
.audience{position:relative;z-index:2;margin-top:-40px;border-radius:40px 40px 0 0;background:#fff}
section:has(+ .audience){padding-bottom:calc(clamp(80px,10vw,144px) + 40px)}
.audience-stage{position:relative;isolation:isolate;overflow:hidden;padding:40px 40px 108px;border-radius:28px;background:#f4f6f8}
.audience-stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#e2e7ed 1px,transparent 1px),linear-gradient(90deg,#e2e7ed 1px,transparent 1px);background-size:32px 32px;background-position:center;-webkit-mask-image:radial-gradient(ellipse 62% 64% at 50% 44%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 62% 64% at 50% 44%,#000 25%,transparent 80%)}
.audience:not(.is-live) .audience-stage{padding-bottom:40px}
.audience-art{position:relative;width:min(100%,760px);margin-inline:auto}
.audience-canvas{aspect-ratio:640/440}
.audience-drawing{display:block;width:100%;height:auto;overflow:visible}
.audience-drawing [pathLength]{stroke-dasharray:1}
.audience-drawing .au-num{font-size:12px;font-weight:600}
/* A layer draws in part by part (--d staggers in steps of 70 ms); leaving, it fades first and only then resets. */
.audience-layer{opacity:0;transition:opacity .25s}
.audience-layer.is-on{opacity:1;transition:opacity .15s}
.audience .au-draw{stroke-dashoffset:1;transition:stroke-dashoffset 0s .3s}
.audience .is-on .au-draw{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease) calc(var(--d,0)*70ms)}
.audience .au-pop{opacity:0;scale:.9;transform-box:fill-box;transform-origin:center;transition:opacity 0s .3s,scale 0s .3s}
.audience .is-on .au-pop{opacity:1;scale:1;transition:opacity .5s var(--ease) calc(var(--d,0)*70ms),scale .6s var(--ease) calc(var(--d,0)*70ms)}
.audience .au-grow{scale:0 1;transform-box:fill-box;transform-origin:left center;transition:scale 0s .3s}
.audience .is-on .au-grow{scale:1;transition:scale .9s var(--ease) calc(var(--d,0)*70ms)}
/* Labels sit beside their detail (data-side: start = right of it, end = left of it) and follow the drawing. */
.audience-chips{position:absolute;inset:0;pointer-events:none}
.audience-chip{position:absolute;left:var(--x);top:var(--y);display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:#fff;box-shadow:0 1px 2px #071a2f14,0 8px 20px -10px #071a2f38;color:#0f1d2e;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;transform:translate(0,-50%);opacity:0;translate:0 6px;transition:opacity .2s,translate 0s .2s}
.audience-chip::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.audience-chip[data-side=end]{flex-direction:row-reverse;padding:0 10px 0 12px;transform:translate(-100%,-50%)}
.audience-chip[data-side=center]{transform:translate(-50%,-50%)}
.audience-chips.is-on .audience-chip{opacity:1;translate:0 0;transition:opacity .45s var(--ease) calc(var(--d,0)*70ms),translate .6s var(--ease) calc(var(--d,0)*70ms)}
/* Immobilien reads the building as a plan: a card beside it lists the three priorities whose numbers sit on roof, glass and entrance. */
.audience-plan{position:absolute;right:0;top:var(--y,50%);width:232px;padding:18px 20px 10px;border-radius:28px;background:#fff;box-shadow:0 1px 2px #071a2f14,0 16px 36px -18px #071a2f4d;transform:translateY(-50%);opacity:0;translate:0 8px;transition:opacity .2s,translate 0s .2s}
.audience-chips.is-on .audience-plan{opacity:1;translate:0 0;transition:opacity .45s var(--ease) calc(var(--d,0)*70ms),translate .6s var(--ease) calc(var(--d,0)*70ms)}
.audience-plan-title{font-size:13px;font-weight:600;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.audience-plan ol{margin:10px 0 0;padding:0;list-style:none}
.audience-plan li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #e8ecf0;opacity:0;translate:0 6px;transition:opacity .2s,translate 0s .2s}
.audience-plan li+li{margin-top:0}
.audience-chips.is-on .audience-plan li{opacity:1;translate:0 0;transition:opacity .45s var(--ease) calc(var(--d,0)*70ms),translate .6s var(--ease) calc(var(--d,0)*70ms)}
.audience-plan-n{display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:600}
.audience-plan li>span:last-child{font-size:14px;line-height:1.35;color:#5f6b78}
.audience-plan strong{display:block;font-size:15px;font-weight:600;color:#0f1d2e}
/* Tab bar as a glass island: grey track, the white pill slides to the chosen situation. */
.audience-controls{position:absolute;left:0;right:0;bottom:28px;z-index:2;display:flex;justify-content:center;padding-inline:20px;pointer-events:none}
.audience-tabs{position:relative;display:flex;gap:4px;padding:4px;border-radius:999px;background:#e3e7ece6;-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);box-shadow:0 14px 32px -18px #071a2f59;pointer-events:auto}
.audience-indicator{position:absolute;left:0;top:0;width:var(--ind-w,0);height:var(--ind-h,0);translate:var(--ind-x,0) var(--ind-y,0);border-radius:999px;background:#fff;box-shadow:0 1px 2px #071a2f1f,0 3px 10px #071a2f14;transition:translate .5s var(--ease),width .5s var(--ease),height .5s var(--ease)}
.audience-tab{position:relative;z-index:1;min-height:44px;padding:0 22px;border-radius:999px;background:none;color:#5f6b78;font-size:15px;font-weight:500;line-height:1.2;white-space:nowrap;outline-offset:2px;transition:color .3s}
.audience-tab[aria-selected=true]{color:#0f1d2e}
@media(hover:hover){.audience-tab[aria-selected=false]:hover{color:#0f1d2e}}
/* Caption row: bold lead and text left, link right; with JS only the chosen one, cross-faded in place. */
.audience-panels{margin-top:28px}
.audience-panel{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 48px}
.audience-panel+.audience-panel{margin-top:28px;padding-top:28px;border-top:1px solid #dce1e7}
.audience-kicker{width:100%;font-size:15px;font-weight:500;line-height:1.4;letter-spacing:normal;color:var(--blue)}
.audience-caption{flex:1 1 480px;max-width:760px;font-size:17px;line-height:1.47;color:#5f6b78;text-wrap:pretty}
.audience-caption strong{font-weight:600;color:#0f1d2e}
.audience-link{gap:6px;min-height:44px;white-space:nowrap;transition:color .2s}
.audience-link span{display:inline-block;font-size:22px;line-height:1;transition:transform .3s var(--ease)}
@media(hover:hover){.audience-link:hover{color:#1249bc}.audience-link:hover span{transform:translateX(3px)}}
.audience.is-live .audience-kicker{display:none}
.audience.is-live .audience-panels{display:grid}
.audience.is-live .audience-panel{grid-area:1/1;margin:0;padding:0;border:0;opacity:0;visibility:hidden;translate:0 8px;transition:opacity .2s,translate .35s var(--ease),visibility 0s .2s}
.audience.is-live .audience-panel.is-on{opacity:1;visibility:visible;translate:0 0;transition:opacity .45s .12s,translate .6s .08s var(--ease),visibility 0s}
.audience.is-settling,.audience.is-settling *{transition:none!important}
@media(max-width:1068px){.audience-stage{padding:32px 28px 100px}}
/* Up to 860px the tab bar becomes a list above the drawing and the plan card moves below it. Phones crop the drawing to the
   building (the platform on the left and all three numbers stay in view) and list the labels below. */
@media(max-width:860px){.audience-stage,.audience:not(.is-live) .audience-stage{display:flex;flex-direction:column;gap:20px;padding:12px 12px 24px}.audience-controls{position:static;order:-1;padding:0}.audience-tabs{flex-direction:column;align-items:stretch;width:100%;gap:0;border-radius:24px;background:#e3e7ec;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.audience-tab{min-height:48px;padding:0 20px;text-align:left}.audience-chip{height:28px;font-size:13px}.audience-chips:has(.audience-plan){position:static;display:none;padding-top:16px}.audience-chips.is-on:has(.audience-plan){display:block}.audience-plan{position:static;width:auto;transform:none}}
@media(max-width:600px){.audience-canvas{overflow:hidden;aspect-ratio:640/704}.audience-drawing{width:160%;margin-left:-30%}.audience-drawing .au-num{font-size:15.5px}.audience-chips{position:static;display:none;flex-wrap:wrap;justify-content:center;gap:8px;padding-top:14px}.audience-chips.is-on{display:flex}.audience-chip,.audience-chip[data-side]{position:static;flex-direction:row;padding:0 12px 0 10px;transform:none}.audience-drawing .au-lead{display:none}.audience-panel{display:block}.audience-caption{font-size:16px}.audience-link{margin-top:8px}}
@media print{.audience{margin-top:0;border-radius:0}}
/* Phones and tablets show a scene's labels and plan card only while it is on (display switches), so they start from their hidden state and still fade in. */
@starting-style{.audience-chips.is-on .audience-chip,.audience-chips.is-on .audience-plan li{opacity:0;translate:0 6px}.audience-chips.is-on .audience-plan{opacity:0;translate:0 8px}}

/* Kontakt: Schlussbild. Foto im gerundeten Rahmen wie der Hero, Frage in Weiß, Hinweise und ein Knopf auf dunklem Glas.
   Das Formular liegt in einem Glas-Blatt (#inquiry-sheet); jeder Link zu #kontakt öffnet es an Ort und Stelle (script.js).
   Ohne JavaScript oder ohne <dialog> steht es darunter (.fg-inline). Der Footer schließt mit der 40-px-Kante an. */
main:has(> .contact-fg) + footer{position:relative;z-index:3;margin-top:-40px;border-radius:40px 40px 0 0}
.contact-fg{position:relative;background:#fff;padding-block:clamp(24px,3vw,40px) calc(clamp(24px,3vw,40px) + 40px)}
.fg-frame{position:relative;isolation:isolate;display:flex;align-items:center;width:calc(100% - 2*clamp(10px,2vw,28px));min-height:min(900px,calc(100svh - 104px));margin-inline:auto;border-radius:clamp(24px,3vw,40px);overflow:hidden;background:#0b2240;color:#fff}
.fg-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 34%}
.fg-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#020b19c7 0%,#020b1973 34%,#020b1926 64%,#020b1912 100%),linear-gradient(0deg,#020b1985 0%,#020b1900 40%)}
.fg-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(40px,6vw,104px);align-items:center;width:min(1200px,calc(100% - 2*clamp(24px,5vw,72px)));margin:0 auto;padding-block:clamp(48px,6vw,88px)}
.contact-fg .fg-copy h2{margin-left:-.03em;font-size:clamp(44px,5.4vw,82px);line-height:1.02;letter-spacing:-.05em;color:#fff;text-wrap:balance}
.contact-fg .fg-copy h2 span{color:#91b8ff}
.contact-fg .fg-lead{margin-top:24px;max-width:460px;font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:#d9e4f2;text-wrap:pretty}
.fg-facts{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0;padding:0;list-style:none}
.contact-fg .fg-facts li{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:0 18px 0 14px;border-radius:999px;background:#ffffff1f;-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);box-shadow:inset 0 .5px 0 #ffffffa6,inset 0 0 0 1px #ffffff24;font-size:15px;font-weight:500;line-height:1.2;color:#fff}
.fg-facts svg{width:20px;height:20px;flex:none;fill:none;stroke:#b7d0ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Dunkel getöntes Glas mit hellem Kantenlicht: der Himmel dahinter wird weich, die Schrift bleibt klar. */
.fg-glass{position:relative;isolation:isolate;padding:clamp(24px,2.4vw,32px);border-radius:28px;color-scheme:dark;background:linear-gradient(160deg,#ffffff2e,#ffffff0a 42%,#ffffff14),#04101f5c;-webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);box-shadow:inset 0 1px 0 #ffffff80,inset 0 0 0 1px #ffffff2e,0 44px 90px -44px #020b19d9}
.fg-glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(90% 55% at 12% 0%,#ffffff26,#ffffff00 70%);pointer-events:none}
.contact-fg .fg-form{margin:0;padding:0;background:none;border-radius:0}
.contact-fg .fg-form-head h3,.contact-fg .fg-call h3{font-size:clamp(22px,1.8vw,26px);line-height:1.15;letter-spacing:-.02em;color:#fff}
.contact-fg .fg-form-head p{margin:6px 0 20px;font-size:13px;line-height:1.5;color:#ffffffa6}
.fg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.contact-fg .fg-field{display:block;margin:0;min-width:0;font-size:13px;font-weight:600;line-height:1.4;color:#ffffffd6}
.contact-fg .fg-field.is-wide{grid-column:1/-1}
.contact-fg .fg-field>:is(input,select,textarea){display:block;width:100%;min-height:46px;margin-top:6px;padding:11px 14px;border:1px solid #ffffff38;border-radius:12px;background-color:#ffffff14;color:#fff;font-size:16px;font-weight:400;line-height:1.4;transition:border-color .2s,background-color .2s,box-shadow .2s}
.contact-fg .fg-field>textarea{min-height:104px;resize:vertical}
.contact-fg .fg-field>select{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px}
.contact-fg .fg-field>select:has(option[value=""]:checked){color:#ffffff99}
.contact-fg .fg-field>:is(input,textarea)::placeholder{color:#ffffff8c;opacity:1}
.contact-fg .fg-field>:is(input,select,textarea):focus{outline:none;border-color:#91b8ff;background-color:#ffffff1f;box-shadow:0 0 0 4px #91b8ff38}
.contact-fg .fg-field>input:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;box-shadow:0 0 0 1000px #13304f inset;transition:background-color 9999s}
.contact-fg .fg-submit{width:100%;justify-content:center;gap:10px;margin-top:20px;min-height:52px;padding:0 24px}
.contact-fg .fg-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:#ffffff9e;text-align:center;text-wrap:balance}
.contact-fg #form-status{margin-top:10px;font-size:14px;color:#fff;text-align:center}
@media(hover:hover){.contact-fg .fg-field>:is(input,select,textarea):hover:not(:focus){border-color:#ffffff5c}
}

/* G: im Bild steht nur der Knopf; das Formular öffnet sich als Glas-Blatt über der Seite. */
.contact-fg .fg-call p{margin:12px 0 0;font-size:16px;line-height:1.55;color:#d9e4f2}
.contact-fg .fg-open{width:100%;justify-content:center;gap:10px;margin-top:28px;min-height:52px;padding:0 24px}
.contact-fg .fg-call .fg-note{margin-top:16px;text-align:left}
.fg-inline{width:min(640px,calc(100% - 40px));margin:32px auto 0;padding:clamp(24px,3vw,32px);border-radius:28px;background:#0b2240;color:#fff;color-scheme:dark}
.fg-sheet{width:min(560px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 32px);padding:clamp(24px,3vw,36px);border:0;border-radius:28px;overflow:auto;overscroll-behavior:contain;color:#fff;color-scheme:dark;background:linear-gradient(160deg,#ffffff24,#ffffff08 45%,#ffffff12),#081a30c7;-webkit-backdrop-filter:blur(32px) saturate(1.6);backdrop-filter:blur(32px) saturate(1.6);box-shadow:inset 0 1px 0 #ffffff66,inset 0 0 0 1px #ffffff29,0 50px 120px -40px #000c}
.fg-sheet::backdrop{background:#020b17a6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.fg-sheet[open]{animation:motion-dialog-in .55s var(--motion-ease) both}
.fg-sheet .fg-form-head{padding-right:48px}
.fg-close{position:absolute;top:16px;right:16px;z-index:2;width:40px;height:40px;padding:0;border-radius:50%;background:#ffffff1f;transition:background-color .2s}
.fg-close::before,.fg-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;border-radius:1px;background:#fff;transform:rotate(45deg)}
.fg-close::after{transform:rotate(-45deg)}
@media(hover:hover){.fg-close:hover{background:#ffffff38}
}

@media(max-width:1100px){.fg-inner{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:32px}
.contact-fg .fg-field>:is(input,textarea){padding-inline:12px}
.contact-fg .fg-field>select{padding-left:12px;padding-right:36px;background-position:right 13px center}
}
@media(max-width:860px){.fg-frame{display:block;min-height:0}
.fg-photo{height:640px;-webkit-mask-image:linear-gradient(180deg,#000 55%,#0000 100%);mask-image:linear-gradient(180deg,#000 55%,#0000 100%)}
.fg-scrim{background:linear-gradient(180deg,#020b1980 0%,#020b1926 26%,#020b1900 48%)}
.fg-inner{grid-template-columns:1fr;gap:32px;width:calc(100% - 2*clamp(20px,5vw,40px));padding-block:56px 24px}
.contact-fg .fg-glass{margin-bottom:0}
}
@media(max-width:600px){main:has(> .contact-fg) + footer{margin-top:-28px;border-radius:28px 28px 0 0}
.contact-fg{padding-block:10px calc(10px + 28px)}
.fg-frame{width:calc(100% - 20px);border-radius:24px}
.fg-photo{height:560px}
.fg-inner{width:calc(100% - 32px);padding-block:44px 16px}
.contact-fg .fg-glass{padding:22px 18px}
.fg-grid{grid-template-columns:1fr}
.fg-inline{width:calc(100% - 20px)}
}
@media print{.fg-photo,.fg-scrim,.fg-sheet{display:none!important}
.fg-frame{background:#fff;color:var(--ink)}
}

/* Link from a service's dialog to its page, from Vorgehen to Über uns; the footer's sitemap and address, as in the colleague's version. */
.service-card .card-sub{max-width:33ch}
.service-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px}
.service-actions .service-page-link{gap:6px;min-height:48px;font-size:16px;white-space:nowrap}
.service-actions .service-page-link>span{font-size:22px;line-height:1;margin-top:-2px}
.process-end{flex-wrap:wrap;align-items:center;gap:12px 32px}
.footer-sitemap{display:flex;flex-wrap:wrap;gap:8px 26px;padding:0 0 28px;color:#c2cede;font-size:14px}
.footer-sitemap a{display:inline-flex;align-items:center;min-height:44px}
.footer-sitemap a:hover{color:#fff}
.footer-contact{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px 32px;padding:30px 0;border-bottom:1px solid #ffffff25;color:#c1cedf;font-style:normal;font-size:14px;line-height:1.7}
.footer-contact strong{color:#fff;font-weight:500}
.footer-contact a{min-height:44px;display:inline-flex;align-items:center;overflow-wrap:anywhere}
.footer-contact a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
/* Kontakt: mail in the glass card. */
.contact-direct{display:grid;gap:5px;margin-top:25px;border-top:1px solid #ffffff30;padding-top:15px}
.contact-direct a{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:44px;color:#fff;font-size:16px;overflow-wrap:anywhere}
.contact-direct a:hover{text-decoration:underline;text-underline-offset:5px}
.fg-form .inquiry-context{font-size:15px;line-height:1.5;padding:12px 14px;margin:0 0 20px;background:#ffffff14;border:1px solid #ffffff35;border-radius:12px;color:#fff}
@media(max-width:700px){.footer-sitemap{display:grid;grid-template-columns:1fr;gap:0}}