/* TechPaten Solutions · interaktive Hero-Szene „Von der Idee zur Website“ (2026-10-14)
   Static defaults below form a complete composition (no-JS fallback); solutions-hero.js drives every frame. */
.sol-hero-art.thx{--thx-s:.9;--thx-x:0px;--thx-y:0px;position:relative;height:560px;margin-left:0;margin-right:calc(-1 * clamp(0px,(100vw - 1240px)/2 - 24px,70px));transform:none;isolation:isolate;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.thx-stage{position:absolute;left:0;top:0;width:760px;height:520px;transform:translate(var(--thx-x),var(--thx-y)) scale(var(--thx-s));transform-origin:0 0;perspective:1700px;perspective-origin:50% 42%}
.thx-js .thx-stage{opacity:1}
/* Before the script starts, show the exact frame it starts from (t = 1.35 s): a sketched wireframe, never an empty area. */
.thx-js .thx:not(.is-live) .thx-desk{transform:translate3d(0,10px,-30px) rotateX(7deg) rotateY(-14deg) scale(.97)}
.thx-js .thx:not(.is-live) :is(.thx-phone,.thx-contact,.thx-s-projects,.thx-r,.thx-cursor){opacity:0}
.thx-js .thx:not(.is-live) :is(.thx-k,.thx-guides){opacity:1}
.thx-js .thx:not(.is-live) .thx-view{background:#f4f5f7}
@keyframes thx-failsafe{to{opacity:1}}
.thx-glow{position:absolute;inset:-40px -30px 0 10px;background:radial-gradient(46% 52% at 56% 46%,#e6f0ff 0%,#eef4fd 38%,#ffffff00 72%);pointer-events:none}
.thx-orbit{position:absolute;left:70px;top:16px;width:640px;height:480px;border:1px solid #dbe6f5;border-radius:50%;transform:rotate(-12deg);opacity:.7;pointer-events:none}
.thx-cam{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.thx-floor{position:absolute;left:110px;top:430px;width:540px;height:70px;background:radial-gradient(50% 50% at 50% 50%,#0f2a5038 0%,#0f2a5014 45%,#0f2a5000 72%);will-change:transform,opacity;pointer-events:none}

/* Desktop browser */
.thx-desk{position:absolute;left:80px;top:50px;width:600px;height:404px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #0f172a12,0 2px 4px #0f172a0a,0 30px 60px -22px #0f2a5052,0 60px 110px -50px #0f2a5040;transform:translate3d(-104px,8px,0) rotateX(4deg) rotateY(14deg) scale(.8);transform-origin:50% 55%;will-change:transform;overflow:hidden;backface-visibility:hidden}
.thx-chrome{position:relative;height:34px;display:flex;align-items:center;gap:12px;padding:0 14px;background:linear-gradient(#fbfbfc,#f2f4f7);border-bottom:1px solid #e6e9ee;z-index:5}
.thx-dots{display:flex;gap:6px}.thx-dots i{width:10px;height:10px;border-radius:50%;background:#e3e6eb;box-shadow:inset 0 0 0 .5px #0000000f}
.thx-dots i:nth-child(1){background:#f2a49b}.thx-dots i:nth-child(2){background:#f3cf86}.thx-dots i:nth-child(3){background:#9fd6a5}
.thx-url{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;height:22px;padding:0 14px;border-radius:7px;background:#fff;box-shadow:0 0 0 1px #e3e7ec;font:500 10.5px/1 'DM Sans',sans-serif;color:#4b566b;min-width:210px;justify-content:center}
.thx-url svg{width:9px;height:9px;color:#8a94a6}
.thx-tag{margin-left:auto;font:600 8px/1 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9aa4b4}
.thx-view{position:absolute;left:0;top:34px;width:600px;height:370px;overflow:hidden;background:#f7f3ee}
.thx-site{position:absolute;left:0;top:0;width:600px;height:690px;will-change:transform;color:#1d1a17;font-family:'DM Sans',sans-serif}
.thx-site>*,.thx-site .r{position:absolute}
.thx-r{will-change:opacity,transform}

/* Demo website (fiktives Architekturbüro) */
.thx-s-logo{left:28px;top:16px;font:500 17px/1 'Fraunces',Georgia,serif;letter-spacing:-.01em;display:flex;align-items:baseline;gap:6px}
.thx-s-logo small{font:600 7.5px/1 'DM Sans',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8a7f72}
.thx-s-nav{top:21px;font-size:10.5px;color:#4a443d;cursor:pointer;padding-bottom:3px;background:linear-gradient(#1d1a17,#1d1a17) 0 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.2,.7,.2,1),color .2s}
.thx-s-nav:hover,.thx-s-nav.is-hover{background-size:100% 1px;color:#1d1a17}
.thx-s-nav1{left:300px}.thx-s-nav2{left:356px}.thx-s-nav3{left:402px}
.thx-s-cta{left:482px;top:14px;width:92px;height:26px;border-radius:20px;background:#1d1a17;color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.thx-s-cta:hover,.thx-s-cta.is-hover{background:#0874ef;box-shadow:0 8px 18px -8px #0874efb0}
.thx-s-cta.is-press{transform:scale(.95)}
.thx-s-ripple{position:absolute;left:46px;top:13px;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#ffffff8c;opacity:0;pointer-events:none}
.thx-s-kicker{left:28px;top:96px;font-size:8.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#8a7f72;display:flex;align-items:center;gap:8px}
.thx-s-kicker:before{content:"";width:18px;height:1px;background:#b9ab9a}
.thx-s-h1{left:27px;top:114px;margin:0;font:400 42px/1 'Fraunces',Georgia,serif;letter-spacing:-.035em;color:#1d1a17;white-space:nowrap}
.thx-s-h1 em{font-style:italic;color:#7a5c43}
.thx-s-p{left:28px;top:222px;width:232px;margin:0;font-size:11px;line-height:1.6;color:#5d564e}
.thx-s-btn{left:28px;top:288px;height:34px;padding:0 16px 0 18px;border-radius:30px;background:#1d1a17;color:#fff;font-size:10.5px;font-weight:600;display:flex;align-items:center;gap:10px;cursor:pointer;transition:background .25s,box-shadow .3s,transform .3s cubic-bezier(.2,.7,.2,1)}
.thx-s-btn i{font-style:normal;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.thx-s-btn:hover,.thx-s-btn.is-hover{background:#33291f;transform:translateY(-2px);box-shadow:0 12px 22px -12px #1d1a17}
.thx-s-btn:hover i,.thx-s-btn.is-hover i{transform:translateX(4px)}
.thx-s-link{left:178px;top:298px;font-size:10.5px;font-weight:600;color:#1d1a17;border-bottom:1px solid #1d1a1740;padding-bottom:2px;cursor:pointer;transition:border-color .2s}
.thx-s-link:hover{border-color:#1d1a17}
.thx-s-img{left:312px;top:64px;width:262px;height:270px;margin:0;border-radius:16px;overflow:hidden;background:#d9d2c8;box-shadow:0 22px 40px -26px #4a382880}
.thx-s-img img,.thx-s-card img,.thx-m-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.thx-s-img:hover img{transform:scale(1.04)}
.thx-s-img figcaption{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:20px;background:#ffffffd9;backdrop-filter:blur(6px);font-size:8.5px;font-weight:600;color:#2a241e}
.thx-s-meta{left:28px;top:343px;margin:0;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#9b8f81}
.thx-s-projects{left:0;top:370px;width:600px;height:320px;border-top:1px solid #e7dfd5}
.thx-s-projects h4{position:absolute;left:28px;top:30px;margin:0;font:400 22px/1 'Fraunces',Georgia,serif;letter-spacing:-.02em}
.thx-s-projects>span{position:absolute;right:28px;top:36px;font-size:10px;font-weight:600;color:#7a5c43}
.thx-s-card{position:absolute;top:76px;width:170px;cursor:pointer}
.thx-s-card:nth-of-type(1){left:28px}.thx-s-card:nth-of-type(2){left:215px}.thx-s-card:nth-of-type(3){left:402px}
.thx-s-card>span{display:block;height:156px;border-radius:12px;overflow:hidden;background:#ddd5ca;box-shadow:0 14px 28px -20px #4a382899;transition:box-shadow .4s,transform .4s cubic-bezier(.2,.7,.2,1)}
.thx-s-card b{display:block;margin-top:10px;font:500 12.5px/1.2 'Fraunces',Georgia,serif}
.thx-s-card small{display:flex;justify-content:space-between;font-size:9px;color:#8a7f72;margin-top:3px}
.thx-s-card small i{font-style:normal;opacity:0;transform:translateX(-4px);transition:.3s}
.thx-s-card:hover>span,.thx-s-card.is-hover>span{transform:translateY(-4px);box-shadow:0 22px 34px -20px #4a3828b3}
.thx-s-card:hover img,.thx-s-card.is-hover img{transform:scale(1.06)}
.thx-s-card:hover small i,.thx-s-card.is-hover small i{opacity:1;transform:none}

/* Wireframe layer */
.thx-wire{position:absolute;inset:0;pointer-events:none}
.thx-k{position:absolute;background:#e3e5ea;border-radius:3px;opacity:0;will-change:opacity,transform}
.thx-k-img{background:#e8eaee;border:1px dashed #c3c8d1;overflow:hidden}
.thx-k-img:before,.thx-k-img:after{content:"";position:absolute;left:50%;top:50%;width:150%;height:1px;background:#c9ced6;transform:translate(-50%,-50%) rotate(45deg)}
.thx-k-img:after{transform:translate(-50%,-50%) rotate(-45deg)}
.thx-k-btn{background:#d5d9e0}
.thx-guides{position:absolute;inset:0;pointer-events:none;opacity:0}
.thx-guides i{position:absolute;top:0;bottom:0;width:1px;background:#0874ef1f}
.thx-guides b{position:absolute;right:14px;top:12px;font:600 8px/1 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#0874ef;background:#eaf3ff;padding:5px 8px;border-radius:12px}
.thx-guides em{position:absolute;left:28px;top:56px;width:284px;height:1px;background:#0874ef66;font:normal 600 7.5px/1 'DM Sans',sans-serif;color:#0874ef}
.thx-guides em:before{content:attr(data-label);position:absolute;left:50%;top:-11px;transform:translateX(-50%);background:#f4f5f7;padding:0 4px}

/* Contact drawer */
.thx-dim{position:absolute;inset:0;background:#1d1a17;opacity:0;pointer-events:none}
.thx-contact{position:absolute;right:0;top:0;width:272px;height:370px;background:#fff;box-shadow:-30px 0 60px -30px #1d1a1766;padding:22px 24px;transform:translateX(105%);will-change:transform;font-family:'DM Sans',sans-serif;color:#1d1a17}
.thx-contact h5{margin:0;font:400 21px/1.08 'Fraunces',Georgia,serif;letter-spacing:-.02em}
.thx-contact h5 em{font-style:italic;color:#7a5c43}
.thx-contact>p{margin:8px 0 0;font-size:9.5px;line-height:1.5;color:#7b7268}
.thx-chips{display:flex;gap:6px;margin-top:13px}
.thx-chip{padding:6px 10px;border-radius:20px;border:1px solid #e3dbd1;font-size:9px;font-weight:600;color:#5d564e;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .2s}
.thx-chip:hover,.thx-chip.is-hover{border-color:#1d1a17;color:#1d1a17}
.thx-chip.is-on{background:#1d1a17;border-color:#1d1a17;color:#fff}
.thx-chip.is-press{transform:scale(.94)}
.thx-field{margin-top:10px;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9b8f81}
.thx-field i{display:block;margin-top:5px;height:20px;border-bottom:1px solid #e3dbd1;position:relative;transition:border-color .3s}
.thx-field i:after{content:"";position:absolute;left:0;bottom:6px;width:1px;height:12px;background:#0874ef;opacity:0}
.thx-field.is-focus i{border-color:#0874ef}
.thx-field.is-focus i:after{animation:thx-caret 1s steps(1) infinite}
.thx-field-area i{height:34px;border:1px solid #e3dbd1;border-radius:8px}
@keyframes thx-caret{50%{opacity:1}}
.thx-send{display:flex;justify-content:space-between;align-items:center;margin-top:14px;height:34px;padding:0 16px;border-radius:30px;background:#0874ef;color:#fff;font-size:10px;font-weight:700}

/* Light sweep during transformations */
.thx-sheen{position:absolute;top:-20%;left:0;width:60%;height:140%;background:linear-gradient(100deg,#fff0 0%,#ffffff00 30%,#ffffff6b 50%,#ffffff00 70%,#fff0 100%);transform:translate3d(-120%,0,0) skewX(-12deg);opacity:0;pointer-events:none;z-index:8;will-change:transform,opacity;mix-blend-mode:soft-light}
.thx-ph-screen .thx-sheen{z-index:4}

/* Fake cursor */
.thx-cursor{position:absolute;left:0;top:0;width:18px;height:22px;opacity:0;pointer-events:none;z-index:9;will-change:transform,opacity;filter:drop-shadow(0 2px 3px #0000003d)}
.thx-cursor svg{width:18px;height:22px;display:block;transform-origin:2px 2px;transition:transform .12s}
.thx-cursor.is-press svg{transform:scale(.84)}

/* Smartphone */
.thx-phone{position:absolute;left:518px;top:44px;width:214px;height:440px;border-radius:38px;padding:8px;background:linear-gradient(145deg,#2a3142,#0d1220 60%,#1c2333);box-shadow:inset 0 0 0 1.5px #4a5368,0 0 0 1px #0b0f18,0 40px 70px -26px #0f2a508c,0 70px 100px -60px #0f2a5066;transform:translate3d(0,0,40px) rotateX(3deg) rotateY(-10deg);transform-origin:50% 60%;will-change:transform,opacity;backface-visibility:hidden}
.thx-phone:before{content:"";position:absolute;right:-2px;top:110px;width:3px;height:52px;border-radius:2px;background:#30384b}
.thx-ph-screen{position:relative;width:198px;height:424px;border-radius:31px;overflow:hidden;background:#f7f3ee;contain:layout paint}
.thx-ph-status{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 24px;font:700 9.5px/1 'DM Sans',sans-serif;color:#1d1a17;z-index:3}
.thx-ph-status i{position:absolute;left:50%;top:8px;width:62px;height:18px;margin-left:-31px;border-radius:12px;background:#0b0e14}
.thx-ph-status span{display:flex;gap:3px;align-items:flex-end}.thx-ph-status span b{width:3px;background:#1d1a17;border-radius:1px}
.thx-m{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity;color:#1d1a17;font-family:'DM Sans',sans-serif;white-space:nowrap}
.thx-m-logo{font:500 15px/1 'Fraunces',Georgia,serif;display:flex;align-items:baseline;gap:5px;transform:translate(16px,40px)}
.thx-m-logo small{font:600 6.5px/1 'DM Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8a7f72}
.thx-m-nav{font-size:10.5px;color:#4a443d;word-spacing:14px;opacity:0;transform:translate(150px,40px) scale(.4)}
.thx-m-burger{width:20px;height:12px;transform:translate(162px,41px)}
.thx-m-burger i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:#1d1a17}.thx-m-burger i:first-child{top:2px}.thx-m-burger i:last-child{bottom:2px;left:6px}
.thx-m-cta{left:0;top:0;width:92px;height:26px;border-radius:20px;background:#1d1a17;color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;opacity:0}
.thx-m-img{left:16px;top:60px;width:166px;height:116px;border-radius:14px;overflow:hidden;background:#d9d2c8}
.thx-m-kicker{font-size:8.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#8a7f72;transform:translate(16px,192px)}
.thx-m-h1{font:400 30px/1 'Fraunces',Georgia,serif;letter-spacing:-.035em;transform:translate(15px,206px)}
.thx-m-h1 em{font-style:italic;color:#7a5c43}
.thx-m-p{width:166px;white-space:normal;font-size:10.5px;line-height:1.5;color:#5d564e;transform:translate(16px,278px)}
.thx-m-btn{left:16px;top:352px;width:166px;height:36px;border-radius:30px;background:#1d1a17;color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.thx-m-link{font-size:10.5px;font-weight:600;transform:translate(52px,400px);border-bottom:1px solid #1d1a1740}
.thx-m-meta{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#9b8f81;opacity:0}

/* Controls */
.thx-controls{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;align-items:center;gap:6px;z-index:4;white-space:nowrap}
.thx-tabs{display:flex;gap:2px;padding:4px;border-radius:40px;background:#ffffffe0;box-shadow:0 0 0 1px #e3e9f1,0 10px 24px -14px #0f2a5040;backdrop-filter:blur(10px)}
.thx .thx-tab{min-height:34px;position:relative;overflow:hidden;border:0;background:none;border-radius:30px;padding:8px 14px;font:600 12px/1.2 'DM Sans',sans-serif;color:#6b7588;cursor:pointer;transition:color .25s,background .25s}
.thx-tab:hover{color:#16213a}
.thx-tab[aria-pressed=true]{color:#16213a;background:#f0f5fc}
.thx-tab>i{position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:#d8e3f2;opacity:0;transition:opacity .3s}
.thx-tab>i>b{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:2px;background:#0874ef;transform:scaleX(var(--p,0));transform-origin:0 50%}
.thx-tab[aria-pressed=true]>i{opacity:1}
.thx-tab .thx-short{display:none}
.thx .thx-toggle{width:36px;height:36px;border-radius:50%;border:0;background:#ffffffe0;box-shadow:0 0 0 1px #e3e9f1,0 10px 24px -14px #0f2a5040;color:#16213a;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.thx-toggle:hover{background:#f0f5fc}
.thx-toggle svg{width:13px;height:13px}
.thx-toggle .thx-play{display:none}.thx-toggle[aria-pressed=true] .thx-play{display:block}.thx-toggle[aria-pressed=true] .thx-pause{display:none}
.thx :is(.thx-tab,.thx-toggle):focus-visible{outline:3px solid #166bdc;outline-offset:2px}
.thx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

@media(max-width:1120px){.sol-hero-art.thx{margin-right:0;height:auto;aspect-ratio:760/600;transform:none}}
@media(max-width:900px){.sol-hero-art.thx{height:auto;aspect-ratio:760/580;max-width:660px;margin:0 auto;transform:none}}
@media(max-width:600px){.sol-hero-art.thx{aspect-ratio:760/660;max-width:100%;margin-top:6px}.thx .thx-tab{padding:8px 12px;font-size:12.5px;min-height:40px}.thx .thx-toggle{width:44px;height:44px}.thx-orbit{display:none}}
@media(max-width:420px){.thx-tab .thx-long{display:none}.thx-tab .thx-short{display:inline}.thx .thx-tab{padding:8px 14px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.thx-s-img img,.thx-s-card img,.thx-s-card>span,.thx-s-btn,.thx-s-btn i{transition:none}.thx-field.is-focus i:after{animation:none;opacity:1}}