:root{color-scheme:dark;--bg:#070909;--text:#f4f3ef;--muted:#a2a9a5;--line:#333a38;--accent:#c7e9dc}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #b6efdb;outline-offset:5px}.skip{position:absolute;left:1rem;top:-6rem;z-index:9;background:white;color:black;padding:1rem}.skip:focus{top:1rem}.site-header{height:92px;display:flex;justify-content:space-between;align-items:center;padding:0 6%;border-bottom:1px solid #ffffff14;position:relative;z-index:2}.logo{font-size:28px;letter-spacing:-1.7px;font-weight:bold}.logo span{color:#89dcc6}nav{display:flex;align-items:center;gap:38px;font-size:13px;color:#d2d8d4}nav a:hover,.link:hover{color:#91e4ca}.hero{min-height:calc(100svh - 92px);display:grid;grid-template-columns:42% 58%;align-items:center;position:relative;padding:5vh 5.8% 10vh}.hero-text{position:relative;z-index:1}.eyebrow,.section-label{font-size:10px;letter-spacing:.18em;color:#9bb5aa;font-weight:700}.eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:30px}.eyebrow span{width:25px;height:1px;background:#82dcc2}h1,h2{font-weight:400;letter-spacing:-.05em;line-height:1.04;margin:0}h1{font-size:clamp(46px,5.6vw,90px)}em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.hero-text>p{font-size:16px;line-height:1.7;color:var(--muted);max-width:390px;margin:28px 0 32px}.link{display:inline-flex;gap:36px;justify-content:space-between;align-items:center;border-bottom:1px solid #719f90;padding:0 0 13px;font-size:13px}.visual{min-width:0}.image-wrap{display:flex;align-items:center;justify-content:center}.image-wrap img{width:100%;height:auto;display:block}.player{display:flex;align-items:center;gap:18px;margin:4px 5% 0 7%;color:#d3dcd6}.player button{white-space:nowrap;background:none;border:1px solid #52625b;border-radius:40px;color:inherit;padding:10px 16px;font-size:12px;cursor:pointer}.player button:hover{border-color:#b6efdb}.player button span{font-size:9px;margin-right:6px}input[type=range]{flex:1;min-width:60px;accent-color:#a5dbc8;cursor:pointer}output{font-size:10px;color:#89958e;font-variant-numeric:tabular-nums;white-space:nowrap}#image-error{font-size:12px;color:#f3c3a6;text-align:center}.scroll-indicator{position:absolute;bottom:26px;left:6%;display:flex;gap:15px;align-items:center;color:#8d9a93;font-size:10px;letter-spacing:.14em}.statement,.services,.contact{border-top:1px solid var(--line);padding:130px 6%;display:grid;grid-template-columns:28% 1fr;gap:4%}.statement h2,.services h2,.contact h2{font-size:clamp(40px,5vw,76px)}.statement p,.contact p{color:var(--muted);font-size:17px;line-height:1.7;max-width:550px;margin:32px 0}.services{background:#101614}.services-body{max-width:1000px}.service-list{margin-top:70px}.service-list article{border-top:1px solid #39423d;padding:26px 0;display:grid;grid-template-columns:80px 1fr 30px;gap:10px}.service-list article:last-child{border-bottom:1px solid #39423d}.service-list article>span{font-size:11px;color:#8ca99a}.service-list h3{font-weight:400;font-size:24px;margin:0 0 10px}.service-list p{color:#abb6af;font-size:14px;line-height:1.6;margin:0}.service-list b{font-weight:400;font-size:20px}.contact{min-height:500px;background:#c9ddd2;color:#15261f}.contact .section-label{color:#526c5d}.contact em{color:#426f5a}.contact p{color:#425c4c}.light{border-color:#527361}footer{display:flex;align-items:center;gap:25px;padding:40px 6%;font-size:12px;color:#9aa7a0}footer .logo{color:white}footer a:last-child{margin-left:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:800px){.site-header{height:76px;padding:0 6%}.logo{font-size:24px}nav{gap:18px;font-size:12px}.hero{min-height:0;display:flex;flex-direction:column;align-items:stretch;padding:75px 6% 85px}.hero-text>p{font-size:15px}.visual{margin:42px -6% 0}.player{margin:6px 6% 0}.scroll-indicator{display:none}.statement,.services,.contact{padding:85px 6%;grid-template-columns:1fr;gap:28px}.statement p{font-size:16px}.service-list{margin-top:45px}.service-list article{grid-template-columns:40px 1fr 25px}.service-list h3{font-size:20px}.contact{min-height:0}footer{flex-wrap:wrap}footer span{display:none}}@media(max-width:390px){nav{gap:11px;font-size:11px}.player{gap:8px}.player button{padding:9px 11px}.hero{padding-top:55px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Version 0.2: Größere Bühne und ruhigere Hierarchie. */
:root{--bg:#000;--accent:#d3e8dc}.site-header{height:86px}.nav-contact{border:1px solid #52645a;border-radius:32px;padding:10px 16px}.hero{min-height:calc(100svh - 86px);grid-template-columns:38% 62%;padding-left:6%;padding-right:3%;}.hero-text{padding:0 0 3vh}.hero-text h1{font-size:clamp(45px,5vw,78px)}.hero-text>p{max-width:330px}.visual{width:100%;transform:scale(1.03);transform-origin:center}.image-wrap{background:#000}.player{max-width:740px;margin-left:8%;margin-right:8%}.statement{background:#0a0e0c}.statement h2{max-width:900px}.services-intro{max-width:490px;color:#a9b7ae;line-height:1.7;font-size:16px;margin-top:28px}.service-list article{padding:30px 0}.service-list h3{font-size:25px}.service-list article:hover h3{color:#c7e9dc}.contact{background:#d2e1d8}.contact h2{letter-spacing:-.055em}.contact .link{font-size:15px}.section-label{padding-top:10px}@media(max-width:800px){.site-header{height:76px}.nav-contact{padding:8px 11px}.hero{padding:65px 6% 75px}.hero-text h1{font-size:clamp(43px,10vw,64px)}.visual{width:auto;transform:none;margin:38px -6% 0}.player{margin:8px 6% 0}.service-list h3{font-size:20px}.services-intro{font-size:15px}}

/* Die Originalfolge bleibt während des Scrollens sichtbar. */
.hero-scroll{height:300svh}.hero-scroll .hero{position:sticky;top:0;height:100svh;min-height:0}@media(max-width:800px){.hero-scroll{height:260svh}.hero-scroll .hero{min-height:100svh;height:auto}}@media(prefers-reduced-motion:reduce){.hero-scroll{height:auto}.hero-scroll .hero{position:relative;height:auto;min-height:calc(100svh - 86px)}}
@media(max-width:800px) and (max-height:700px){.hero-scroll{height:auto}.hero-scroll .hero{position:relative;height:auto;min-height:0}}

@media(max-width:800px){.image-wrap{overflow:hidden}.image-wrap img{transform-origin:50% 20%;transform:scale(var(--cube-zoom,1.25));transition:transform .12s ease-out}}
@media(prefers-reduced-motion:reduce){.image-wrap img{transition:none}}

/* Kompakte Videostudie: gleicher Bildausschnitt wie die Bildfolge. */
.image-wrap video{display:block;width:100%;height:auto;aspect-ratio:16/9} @media(max-width:800px){.image-wrap video{transform-origin:50% 20%;transform:scale(var(--cube-zoom,1.25));transition:transform .12s ease-out}} @media(prefers-reduced-motion:reduce){.image-wrap video{transition:none}}

/* Unverändertes Logo aus dem c:consult-Markenkit. */
.logo img{display:block;width:150px;height:auto;max-width:100%}@media(max-width:800px){.logo img{width:128px}}

/* Interaktive 3D-Bühne */
.image-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}.image-wrap canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}.image-wrap img.stage-brand{position:absolute;left:34.7%;top:83.6%;width:30.6%;height:auto;opacity:0;pointer-events:none}.image-wrap canvas:focus-visible{outline:2px solid #b6efdb;outline-offset:-3px}#state{font-size:12px;color:#e7c7b8;text-align:center}.player #motion{font-size:11px;padding:10px 12px}@media(max-width:800px){.image-wrap{aspect-ratio:4/3}.image-wrap img.stage-brand{left:29.6%;width:40.8%}.player{gap:8px}.player #motion{font-size:10px;padding:9px 10px}}

/* Logo bleibt auch bei mobiler Bildvergrößerung unverzerrt. */
.image-wrap img.stage-brand{transform:none;transition:none}
.motion-reduced .hero-scroll{height:auto}.motion-reduced .hero-scroll .hero{position:relative;height:auto;min-height:calc(100svh - 86px)}
@media(prefers-reduced-motion:reduce){.motion-allowed .hero-scroll{height:300svh}.motion-allowed .hero-scroll .hero{position:sticky;top:0;height:100svh;min-height:0}}
@media(prefers-reduced-motion:reduce) and (max-width:800px){.motion-allowed .hero-scroll{height:260svh}.motion-allowed .hero-scroll .hero{height:auto;min-height:100svh}}
@media(max-width:800px) and (max-height:700px){.motion-allowed .hero-scroll{height:auto}.motion-allowed .hero-scroll .hero{position:relative;height:auto;min-height:0}}

/* Größere Bühne für die Miniaturwelt auf breiten Bildschirmen. */
@media(min-width:801px){.image-wrap{aspect-ratio:4/3}.image-wrap img.stage-brand{left:29.6%;width:40.8%}}

@media(min-width:801px){.visual{transform:translateY(-3vh) scale(1.03)}.image-wrap{width:min(100%,calc((100svh - 230px)*1.33333));margin:auto}}

/* Die Leistungszeilen sind Informationen, keine Links. */
.service-list article{grid-template-columns:80px 1fr}.service-list article:hover h3{color:inherit}@media(max-width:800px){.service-list article{grid-template-columns:40px 1fr}}

@media(min-width:801px){.visual{transform:translateY(-5vh) scale(1.03)}.image-wrap{width:min(100%,calc((100svh - 190px)*1.33333))}}

html.motion-reduced{scroll-behavior:auto}

/* Auf breiten Bildschirmen erhält die 3D-Bühne mehr Höhe; die Bedienung steht beim Text. */
@media(min-width:1200px) and (min-height:720px){
 .visual{position:relative;transform:translateY(calc(-5vh + 8px)) scale(1.03)}
 .image-wrap{aspect-ratio:29/25}
 .image-wrap img.stage-brand{top:78%}
 .visual .player{position:absolute;right:calc(100% + 26px);bottom:22px;width:min(390px,31vw);margin:0;gap:10px}
}

/* Mehr vertikaler Raum für die mobile Würfeldrehung. */
@media(max-width:800px){.image-wrap{aspect-ratio:11/10}}

@media(max-width:360px){.player{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}.player #motion{grid-column:1 / -1;justify-self:start}.player input[type=range]{width:100%;min-width:0}}

@media(max-width:800px){.hero{padding-top:48px}.visual{margin-top:22px}}

/* Scrollabschnitte lösen die Würfeldrehungen aus; die Welten leben dazwischen. */
.hero-scroll{height:400svh}
@media(max-width:800px){html.motion-allowed .hero-scroll{height:400svh}html.motion-allowed .hero-scroll .hero{position:sticky;top:var(--hero-offset,0px);height:auto;min-height:100svh}}

/* Auch reduzierte Bewegung behält die Scrollabschnitte; Bewegungen springen ruhig zum Zustand. */
html.motion-reduced .hero-scroll{height:400svh}
html.motion-reduced .hero-scroll .hero{position:sticky;top:0;height:100svh}
@media(max-width:800px){html.motion-reduced .hero-scroll .hero{position:sticky;top:var(--hero-offset,0px);height:auto;min-height:100svh}}

html.motion-allowed .hero-scroll{height:400svh}

/* Original DNA frames and the separately revealed, approved wordmark. */
.image-wrap .dna-original-scene{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;overflow:hidden}
.image-wrap .dna-original-scene img{position:absolute;display:block;left:29%;top:2%;width:42%;height:auto;transform:none;transition:none;mask-image:linear-gradient(to bottom,transparent 0%,#000 6%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 6%,#000 92%,transparent 100%)}
.image-wrap img.stage-brand{top:76%;left:34%;width:32%;z-index:2;transform:none}
.image-wrap .dna-claim{position:absolute;top:88%;left:0;width:100%;margin:0;text-align:center;font-size:clamp(11px,1.15vw,16px);letter-spacing:.05em;color:#e8f0eb;opacity:0;pointer-events:none;z-index:2}
@media(max-width:800px){.image-wrap .dna-original-scene img{left:29%;width:42%;top:2%}.image-wrap img.stage-brand{top:75%;left:34%;width:32%}.image-wrap .dna-claim{top:88%;font-size:12px}}

.image-wrap canvas.noninteractive{cursor:default}

.image-wrap .dna-original-scene img{filter:brightness(1.2)}

/* Alle Bereiche sind auch auf schmalen Bildschirmen erreichbar. */
.mobile-menu{display:none}
@media(max-width:480px){.site-header nav>a{display:none}.site-header nav .mobile-menu{display:block;position:relative}.mobile-menu summary{list-style:none;cursor:pointer;border:1px solid #52645a;border-radius:32px;padding:10px 14px;color:#f4f3ef}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu summary:focus-visible{outline:2px solid #b6efdb;outline-offset:4px}.mobile-menu-links{position:absolute;right:0;top:calc(100% + 10px);width:180px;padding:8px 15px;background:#101614;border:1px solid #52645a;border-radius:12px;box-shadow:0 12px 35px #0009}.site-header nav .mobile-menu .mobile-menu-links a{display:block;padding:12px 4px;font-size:14px;color:#f4f3ef}.mobile-menu-links a+a{border-top:1px solid #ffffff18}}

/* Mehr Bühnenhöhe bei mittleren Desktopbreiten; Original-DNA und Logo bleiben getrennt. */
@media(min-width:801px) and (max-width:1199px){.image-wrap{aspect-ratio:9/10;width:min(100%,calc((100svh - 210px)*.9))}.image-wrap .dna-original-scene img{width:55%;left:22.5%;top:1%}.image-wrap img.stage-brand{top:79%}.image-wrap .dna-claim{top:90%}}

/* V0.150: Die Bühne steht allein im Zentrum; das Markenbild entsteht am Ende. */
.hero-scroll,.motion-reduced .hero-scroll,html.motion-allowed .hero-scroll,html.motion-reduced .hero-scroll{height:540svh}
.hero-scroll .hero,html.motion-allowed .hero-scroll .hero,html.motion-reduced .hero-scroll .hero{position:sticky;top:0;height:100svh;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;background:#000}
.hero .visual{position:relative;width:min(96vw,1000px,calc(82svh * .9));margin:0;transform:none;flex:none}
.hero .image-wrap{width:100%;aspect-ratio:9/10;margin:0;background:#000}
.hero .player[hidden],.hero .dna-original-scene,.hero .stage-brand,.hero .dna-claim{display:none!important}
.hero #state:not([hidden]){position:absolute;bottom:5%;left:5%;right:5%;color:#f3c3a6;z-index:5}
#particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.brand-reveal{position:absolute;z-index:3;left:50%;top:50%;width:min(1000px,96vw);transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:clamp(8px,3vw,42px);opacity:0;pointer-events:none}
.brand-reveal.is-active{pointer-events:auto}
.brand-tile{min-width:0;text-align:center;--glow:93,206,147}
.brand-hydro{--glow:35,147,224}.brand-consult{--glow:208,45,168}
.brand-halo{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;height:clamp(90px,18vw,170px);padding:20px}
.brand-halo:before{content:"";position:absolute;inset:3% 0;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--glow),.26) 0%,rgba(var(--glow),.1) 40%,transparent 72%);opacity:0;transform:scale(.8);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.brand-tile:hover .brand-halo:before,.brand-tile:focus-within .brand-halo:before{opacity:1;transform:scale(1)}
.brand-halo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.brand-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border:1px solid rgba(255,255,255,.28);border-radius:30px;font-size:13px;color:#e9efeb;transition:border-color .25s ease,background .25s ease}
.brand-link:hover,.brand-link:focus-visible{border-color:rgba(var(--glow),.85);background:rgba(var(--glow),.1)}
.brand-link.pending{opacity:.55;cursor:default}
@media(max-width:600px){.hero .visual{width:min(96vw,calc(82svh * .9))}.brand-reveal{width:96vw;gap:3px}.brand-halo{height:100px;padding:8px}.brand-link{font-size:10px;padding:7px 8px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.brand-halo:before,.brand-link{transition:none}}

/* V0.152: DNA benutzt das gesamte Fenster; farbige Originalklammern auf heller Wortmarke. */
.hero.dna-mode .visual{width:100%;height:100%;max-width:none}
.hero.dna-mode .image-wrap{width:100%;height:100%;aspect-ratio:auto}
.consult-lockup{position:relative;display:block;width:100%;line-height:0}
.brand-halo .consult-lockup .consult-base{display:block;width:100%;max-width:none;height:auto}
.brand-halo .consult-lockup .consult-bracket{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;pointer-events:none}
.consult-bracket-left{clip-path:polygon(0 24%,2.7% 24%,2.7% 90%,21% 90%,21% 100%,0 100%)}
.consult-bracket-right{clip-path:polygon(79% 0,100% 0,100% 76%,97.3% 76%,97.3% 10%,79% 10%)}
/* Der Inhalt erscheint erst nach dem Markenabschluss; bei fehlendem 3D greift der Fehlerzustand. */
.intro-locked main>section,.intro-locked footer{visibility:hidden;pointer-events:none}
.intro-failed .hero-scroll{height:auto!important}
.intro-failed .hero-scroll .hero{position:relative!important;height:100svh!important}

/* Farbbildzeichen entstehen vor den weißen Teilen und den Schaltflächen. */
.brand-filter{position:absolute;pointer-events:none}
.brand-halo .brand-logo-wrap{position:relative;display:block;width:100%;height:100%}
.brand-halo .brand-logo-wrap img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.brand-halo .brand-logo-wrap .brand-color{filter:url(#brand-colour-only)}
.brand-halo .brand-white,.brand-halo .consult-base,.brand-link{opacity:var(--white-opacity,0)}
.brand-link.pending{opacity:var(--white-opacity,0)}
.brand-halo .brand-logo-wrap .brand-color{opacity:var(--color-overlay,1)}

/* Vollständige Bildzeichen zuerst, beim Einblenden des A zur Originalmaske überblenden. */
.brand-halo .brand-logo-wrap .brand-full{opacity:var(--color-overlay,1)}
.brand-halo .brand-logo-wrap .brand-color{opacity:calc(1 - var(--color-overlay,1))}

/* Im Intro stehen auch im Seitenkopf zunächst nur die farbigen Klammern. */
.header-brackets{display:none;position:relative;width:150px;aspect-ratio:2176/576}
.header-brackets .header-bracket{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.header-bracket-left{clip-path:polygon(0 24%,2.7% 24%,2.7% 90%,21% 90%,21% 100%,0 100%)}
.header-bracket-right{clip-path:polygon(79% 0,100% 0,100% 76%,97.3% 76%,97.3% 10%,79% 10%)}
.intro-locked .site-header .header-wordmark{display:none}
.intro-locked .site-header .header-brackets{display:block}
@media(max-width:800px){.header-brackets{width:128px}}

/* Nur auf Geräten sichtbar, die für die Neigung einen aktiven Freigabeschritt benötigen. */
#tilt-control,#tilt-status{position:absolute;z-index:4;right:18px;bottom:18px;font-size:12px}
#tilt-control{border:1px solid #ffffff66;border-radius:22px;background:#000a;color:#f3f4f3;padding:9px 13px;cursor:pointer}
#tilt-control[hidden],#tilt-status:empty{display:none}
#tilt-status{bottom:62px;color:#ddd;background:#000a;padding:4px 6px}
@media(min-width:801px){#tilt-control,#tilt-status{display:none!important}}

/* Sensorfreigabe bleibt oberhalb der rechts unten eingeblendeten Rechtslinks erreichbar. */
@media(max-width:800px){#tilt-control{bottom:max(64px,calc(env(safe-area-inset-bottom,0px) + 52px))}#tilt-status{bottom:max(108px,calc(env(safe-area-inset-bottom,0px) + 96px))}}