:root{--arch-ink:#06131f;--arch-cyan:#4bdeff;--arch-blue:#4c94ff;--arch-white:#f5fbff;--arch-muted:#c6d8e5;--arch-glass:#062439e9;--arch-line:#78b2d5}
*{box-sizing:border-box}
html,body{margin:0;overflow:hidden;background:var(--arch-ink);color:var(--arch-white);font-family:Inter,system-ui,"Segoe UI",sans-serif}
.architecture-film{position:relative;isolation:isolate;height:100vh;min-height:640px;overflow:hidden;background:var(--arch-ink)}
.architecture-film::before{position:absolute;z-index:0;inset:-2%;background:url('architektur-informationsfluss-v2.png') center/cover;content:"";transform:scale(1.015);animation:arch-camera 46s cubic-bezier(.2,.68,.25,1) both}
.architecture-film::after{position:absolute;z-index:1;inset:0;content:"";background:linear-gradient(90deg,#061a2beb 0%,#061a2b9c 43%,#061a2b20 74%,#061a2b58 100%);pointer-events:none}
.arch-top{position:absolute;z-index:10;top:5%;right:5%;left:5%;display:flex;justify-content:space-between;gap:2rem;font-size:clamp(11px,.95vw,15px);letter-spacing:.12em;text-transform:uppercase}
.arch-top b{color:var(--arch-cyan)}
#arch-count{font-variant-numeric:tabular-nums;color:#d6e7ef}
.arch-scene{position:absolute;z-index:2;inset:0;opacity:0;pointer-events:none;transition:opacity 1.3s cubic-bezier(.4,0,.2,1)}
.arch-scene.on{opacity:1;pointer-events:auto}
.arch-copy{position:absolute;top:20%;left:7%;width:min(42%,610px);opacity:0;transform:translateY(18px)}
.arch-scene.play .arch-copy{animation:arch-copy-in .68s .25s both}
.arch-scene.leaving .arch-copy{animation:arch-copy-out .22s both}
.arch-eyebrow{display:block;color:var(--arch-cyan);font-size:clamp(12px,1.05vw,16px);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.arch-copy h1,.arch-final-copy h1{margin:.28em 0;letter-spacing:-.058em;line-height:1.04;font-size:clamp(38px,4.8vw,78px)}
.arch-copy p,.arch-final-copy p{max-width:37ch;margin:0;color:var(--arch-muted);font-size:clamp(17px,1.36vw,22px);line-height:1.5}
.arch-card{position:absolute;z-index:5;top:24%;right:6%;width:min(31%,420px);padding:1.35em 1.45em;border:1px solid rgba(120,178,213,.78);border-radius:20px;background:var(--arch-glass);box-shadow:0 24px 64px #0009;backdrop-filter:blur(10px);opacity:0;transform:translateY(18px)}
.arch-scene.play .arch-card{animation:arch-card-in .62s .75s both}
.arch-card-label{display:block;margin-bottom:.85em;padding-bottom:.9em;border-bottom:1px solid rgba(120,178,213,.3);color:var(--arch-cyan);font-size:clamp(11px,.9vw,13px);font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.arch-card div{padding:.74em 0;border-bottom:1px solid rgba(120,178,213,.18);opacity:0;transform:translateY(8px)}
.arch-card div:last-child{border-bottom:0;padding-bottom:0}
.arch-card b{display:block;font-size:clamp(14px,1.1vw,18px);line-height:1.28}
.arch-card div span{display:block;margin-top:.28em;color:var(--arch-muted);font-size:clamp(12px,.92vw,15px);line-height:1.35}
.arch-scene.play .arch-card div:nth-of-type(1){animation:arch-item-in .42s 1.08s both}
.arch-scene.play .arch-card div:nth-of-type(2){animation:arch-item-in .42s 1.28s both}
.arch-scene.play .arch-card div:nth-of-type(3){animation:arch-item-in .42s 1.48s both}
.arch-node{position:absolute;z-index:4;width:13px;height:13px;border:2px solid #d8fbff;border-radius:50%;background:var(--arch-cyan);box-shadow:0 0 0 0 rgba(75,222,255,.65),0 0 20px var(--arch-cyan);opacity:0}
.arch-node.is-core{background:#70aaff;box-shadow:0 0 0 0 rgba(112,170,255,.7),0 0 22px #70aaff}
.arch-scene.play .arch-node{animation:arch-node-pulse 1.2s both}
.arch-scene.play .arch-node:nth-last-child(1){animation-delay:.85s}.arch-scene.play .arch-node:nth-last-child(2){animation-delay:1.05s}.arch-scene.play .arch-node:nth-last-child(3){animation-delay:1.25s}.arch-scene.play .arch-node:nth-last-child(4){animation-delay:1.45s}.arch-scene.play .arch-node:nth-last-child(5){animation-delay:1.65s}
.n-solar{left:20.2%;top:28.2%}.n-battery{left:40.2%;top:28.2%}.n-inverter{left:59.2%;top:28.2%}.n-sensor{left:77%;top:29.2%}.n-gateway{left:47.4%;top:48.2%}.n-alternative{left:62.4%;top:48.2%}.n-database{left:23.3%;top:66.3%}.n-logic{left:47.4%;top:66.3%}.n-automation{left:70.5%;top:66.4%}.n-dashboard{left:20.6%;top:85%}.n-mobile{left:40.5%;top:85%}.n-alert{left:60.5%;top:85%}.n-cloud{left:79.2%;top:85%}
.finale{display:grid;place-items:center;text-align:center}
.arch-final-copy{z-index:3;max-width:920px;padding:8%;opacity:0;transform:translateY(18px)}
.arch-scene.play .arch-final-copy{animation:arch-copy-in .7s .25s both}
.arch-final-copy h1 em{font-style:normal;color:var(--arch-cyan)}
.arch-final-copy p{margin:0 auto;max-width:42ch}
.arch-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:.6em;margin-top:1.8em}
.arch-tags span{padding:.56em .85em;border:1px solid rgba(120,178,213,.55);border-radius:999px;background:rgba(6,19,31,.45);font-size:clamp(11px,.9vw,14px)}
#arch-bar{position:absolute;z-index:20;bottom:0;left:0;width:0;height:5px;background:var(--arch-cyan);box-shadow:0 0 18px var(--arch-cyan)}
#arch-control{position:absolute;z-index:21;right:4%;bottom:3.5%;padding:.62em 1em;border:1px solid #72a9be;border-radius:999px;background:#09283b;color:var(--arch-white);font-size:14px;cursor:pointer}
@keyframes arch-camera{to{transform:scale(1.06) translateX(-.4%)}}
@keyframes arch-copy-in{to{opacity:1;transform:none}}@keyframes arch-copy-out{to{opacity:0;transform:translateY(-8px)}}@keyframes arch-card-in{to{opacity:1;transform:none}}@keyframes arch-item-in{to{opacity:1;transform:none}}@keyframes arch-node-pulse{0%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1)}70%{opacity:1;box-shadow:0 0 0 16px rgba(75,222,255,0),0 0 20px var(--arch-cyan)}100%{opacity:.82;transform:scale(1)}}
@media(max-width:720px){.architecture-film{min-height:650px}.arch-top{top:4.5%;left:6%;right:6%}.arch-copy{top:14%;left:7%;width:86%}.arch-copy h1{font-size:clamp(36px,10.8vw,47px)}.arch-copy p{font-size:17px;max-width:32ch}.arch-card{top:auto;right:7%;bottom:10%;width:86%;padding:1.15em 1.2em}.arch-card b{font-size:15px}.arch-card div span{font-size:13px}.arch-node{width:10px;height:10px}.arch-final-copy{padding:8%}.arch-final-copy h1{font-size:clamp(40px,11vw,52px)}.arch-final-copy p{font-size:17px}.finale .arch-node{display:none}}
@media(prefers-reduced-motion:reduce){.architecture-film::before{animation:none}.architecture-film *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}