/* WirtWire home — independent 2026 art direction */
.home-page {
  --ink: #06101d;
  --ink-2: #0b1b2d;
  --paper: #f3f4f0;
  --paper-2: #e7ebe8;
  --blue: #167f78;
  --mint: #5bcbbb;
  --lime: #d7c6a1;
  --line: rgba(9, 25, 43, .12);
  --display: clamp(2.6rem, 5.5vw, 5.8rem);
  background: var(--paper);
  color: var(--ink);
}

.home-page *, .home-page *::before, .home-page *::after { box-sizing: border-box; }
.home-page .container { width: min(1240px, calc(100% - 48px)); max-width: none; padding: 0; }
.home-page section { scroll-margin-top: 76px; }

/* Navigation */
.home-page .navbar { height: 78px!important; background: rgba(6,16,29,.76)!important; border-bottom: 1px solid rgba(255,255,255,.11); backdrop-filter: blur(22px) saturate(150%); }
.home-page .nav-container { width: min(1340px, calc(100% - 40px)); max-width: none; padding: 0; }
.home-page .logo-icon { width: 42px; height: 42px; }
.home-page .logo-text { color: #fff; font-size: 1.08rem; letter-spacing: .16em; }
.home-page .nav-menu { gap: 2px; }
.home-page .nav-menu a { position: relative; padding: 10px 12px; color: rgba(255,255,255,.68); font-size: .83rem; letter-spacing: .02em; }
.home-page .nav-menu a::after { content:""; position:absolute; left:12px; right:12px; bottom:4px; height:1px; transform:scaleX(0); background:var(--mint); transition:transform .25s ease; }
.home-page .nav-menu a:hover::after { transform:scaleX(1); }

/* Hero */
.home-page .hero { min-height: 900px; height: 100svh; max-height: 1080px; padding: 78px 0 0; overflow: hidden; background: var(--ink)!important; }
.home-page .hero::before { inset:0; background: linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px); background-size:74px 74px; mask-image:linear-gradient(to right,#000,transparent 72%); opacity:.55; }
.home-page .hero::after { content:""; inset:auto -12vw -45vw 28vw; width:86vw; height:86vw; border:1px solid rgba(66,245,194,.13); border-radius:50%; background:radial-gradient(circle,rgba(39,116,255,.14),transparent 62%); animation:heroBreathe 7s ease-in-out infinite; }
.home-page .hero-background { inset:0; }
.home-page .network-animation { opacity:.22; mix-blend-mode:screen; animation:networkDrift 16s linear infinite alternate; }
.home-page .hero-content { position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr); gap:5vw; align-items:center; width:min(1340px,calc(100% - 64px)); height:calc(100% - 118px); }
.home-page .hero-text { max-width:760px; }
.home-page .hero-text::before { content:"SYSTEME, DIE EINFACH FUNKTIONIEREN"; padding:0 0 0 32px; margin:0 0 24px; border:0; border-radius:0; background:none; color:var(--mint); font-size:.7rem; letter-spacing:.23em; }
.home-page .hero-text::after { content:""; position:absolute; width:20px; height:1px; left:0; top:.5em; background:var(--mint); box-shadow:0 0 12px var(--mint); }
.home-page .hero-title { margin:0; color:#fff!important; font-size:clamp(4.7rem,9.2vw,9.6rem); line-height:.77; letter-spacing:-.075em; font-weight:850; }
.home-page .hero-title { opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1); }
.home-page .hero-title.title-ready { opacity:1; transform:none; }
.home-page .hero-subtitle { max-width:690px; margin:34px 0 0; color:#fff!important; font-size:clamp(1.25rem,2vw,2rem); line-height:1.15; letter-spacing:-.025em; }
.home-page .hero-description { max-width:680px; margin:22px 0 0; color:rgba(255,255,255,.6)!important; font-size:.98rem; line-height:1.65; }
.home-page .hero-actions { margin-top:30px; gap:10px; }
.home-page .hero-action { min-height:52px; padding:0 18px; border-radius:2px; font-size:.84rem; letter-spacing:.035em; }
.home-page .hero-action-primary { background:var(--mint); color:var(--ink); box-shadow:0 18px 50px rgba(66,245,194,.2); }
.home-page .hero-action-primary:hover { box-shadow:0 18px 55px rgba(66,245,194,.42); }
.home-page .hero-action-secondary { background:#fff; color:var(--ink); }
.home-page .hero-action-ghost { color:#fff; border-color:rgba(255,255,255,.25); }

/* kinetic network sculpture */
.hero-orbit { position:relative; width:min(42vw,590px); aspect-ratio:1; justify-self:end; perspective:1000px; filter:drop-shadow(0 40px 80px rgba(0,0,0,.35)); }
.orbit-glow { position:absolute; inset:18%; border-radius:50%; background:radial-gradient(circle,rgba(66,245,194,.18),rgba(39,116,255,.12) 45%,transparent 70%); filter:blur(18px); animation:heroBreathe 4s ease-in-out infinite; }
.orbit-ring { position:absolute; inset:8%; border:1px solid rgba(255,255,255,.18); border-radius:50%; animation:orbitSpin 17s linear infinite; }
.orbit-ring-two { inset:20%; border-style:dashed; border-color:rgba(66,245,194,.42); animation-duration:11s; animation-direction:reverse; }
.orbit-ring-three { inset:31%; border-width:2px; border-color:rgba(39,116,255,.5); animation-duration:7s; }
.orbit-ring span { position:absolute; width:13px; height:13px; border:2px solid var(--ink); border-radius:50%; background:var(--mint); box-shadow:0 0 0 5px rgba(66,245,194,.11),0 0 25px var(--mint); }
.orbit-ring span:nth-child(1){top:10%;left:18%}.orbit-ring span:nth-child(2){right:-7px;top:48%;background:#fff}.orbit-ring span:nth-child(3){left:12%;bottom:8%;background:var(--blue)}
.orbit-core { position:absolute; inset:38%; display:grid; place-items:center; border-radius:50%; color:var(--mint); background:rgba(6,16,29,.88); box-shadow:0 0 0 1px rgba(66,245,194,.45),0 0 80px rgba(66,245,194,.24); animation:coreFloat 5s ease-in-out infinite; }
.orbit-core svg { position:absolute; inset:-20%; width:140%; height:140%; opacity:.55; animation:orbitSpin 12s linear infinite reverse; }.orbit-core strong{color:#fff;font-size:clamp(2rem,4vw,4rem);font-weight:800}
.orbit-scan { position:absolute; inset:3%; border-radius:50%; background:conic-gradient(from 0deg,transparent 0 78%,rgba(66,245,194,.2) 94%,transparent); animation:orbitSpin 5s linear infinite; }
.hero-proof { position:absolute; z-index:4; left:50%; bottom:0; transform:translateX(-50%); display:grid; grid-template-columns:repeat(3,1fr); width:min(1340px,calc(100% - 64px)); border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.55); }
.hero-proof span { padding:22px 20px; border-right:1px solid rgba(255,255,255,.12); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }.hero-proof span:last-child{border:0}.hero-proof b{margin-right:12px;color:var(--mint);font-family:monospace}

/* Editorial sections */
.home-page .about,.home-page .highlights,.home-page .solutions,.home-page .network-security,.home-page .richtfunk,.home-page .sicherheitstechnik { padding:clamp(100px,11vw,170px) 0; }
.home-page .about { background:var(--paper); }
.home-page .about{position:relative;overflow:hidden;isolation:isolate}
.home-page .about.matrix-takeover::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(243,244,240,.97) 0%,rgba(243,244,240,.84) 38%,rgba(243,244,240,.3) 58%,transparent 76%)}
.home-page .about.matrix-takeover .matrix-code{position:absolute!important;z-index:0!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:hidden!important;opacity:1!important;mix-blend-mode:normal!important;filter:none!important;transform:none!important;pointer-events:none;mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%)}
.home-page .about.matrix-takeover .matrix-column{color:#176bdb!important;text-shadow:0 0 5px rgba(23,107,219,.3)!important;font-weight:700!important}
.home-page .about.matrix-takeover .about-content{position:relative;z-index:2}
.home-page .about .about-content{display:block;position:relative}.home-page .about-text{max-width:760px}.home-page .about-visual{position:absolute!important;inset:0!important;margin:0!important;pointer-events:none}.home-page .about .tech-graphic{opacity:0!important;background:transparent!important;box-shadow:none!important;border:0!important}.home-page .about .tech-graphic::before,.home-page .about .wifi-icon{display:none!important}
.home-page .tech-graphic{transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1),filter .6s ease}
.home-page .matrix-rain-stream{--rain-distance:1800px;position:absolute!important;top:0!important;width:2.7%!important;height:auto!important;display:flex!important;flex-direction:column;align-items:center;gap:0;font-family:"Courier New",monospace;line-height:1.05;white-space:nowrap;opacity:var(--stream-opacity);transform:translateY(-110%);animation:matrixRain var(--rain-duration) linear var(--rain-delay) infinite;animation-play-state:paused;will-change:transform;mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 82%,transparent 100%)}
.home-page .matrix-code.is-raining .matrix-rain-stream{animation-play-state:running}
.home-page .matrix-rain-stream .matrix-char-random{display:block;color:#176bdb!important;text-shadow:0 0 5px rgba(23,107,219,.4);opacity:.78}
.home-page .matrix-rain-stream .matrix-char-message{display:block;color:#064dac!important;text-shadow:0 0 8px rgba(23,107,219,.65);font-weight:950;opacity:1;transform:scale(1.16)}
.home-page .matrix-rain-stream .matrix-signal{position:relative;z-index:2;display:block;width:auto;margin:5px 0;padding:5px 2px;border-top:2px solid #176bdb;color:#064dac!important;font-size:.7rem;letter-spacing:.11em;line-height:1;writing-mode:vertical-rl;text-orientation:mixed;transform:none;text-shadow:0 0 9px rgba(23,107,219,.45)}
.home-page .matrix-rain-stream span:first-child{color:#dbeafe!important;text-shadow:0 0 9px #176bdb}
.home-page .matrix-rain-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;background:transparent!important;pointer-events:none}
@keyframes matrixRain{0%{transform:translateY(-100%)}100%{transform:translateY(var(--rain-distance))}}
.home-page .about-content { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:10vw; }
.home-page .about-text h2,.home-page .highlights h2,.home-page .solution-text h2 { font-size:var(--display); line-height:.94; letter-spacing:-.055em; font-weight:780; }
.home-page .about-text h3 { max-width:650px; margin:28px 0 20px; color:#167f78!important; font-size:1.2rem; line-height:1.35; }
.home-page .about-text p,.home-page .solution-text p { color:#536170!important; font-size:1.03rem; line-height:1.8; }
.home-page .about-visual { position:relative; }
.home-page .about-visual::before { content:"INTERACTIVE / 01"; position:absolute; z-index:3; top:-42px; right:0; font:700 .7rem/1 monospace; letter-spacing:.14em; color:#607080; }
.home-page .tech-graphic { width:min(100%,480px); height:auto; aspect-ratio:1; border-radius:2px; transform:rotate(3deg); background:var(--ink)!important; box-shadow:28px 28px 0 var(--mint),0 45px 100px rgba(6,16,29,.22); }

.home-page .highlights { position:relative; background:var(--ink)!important; color:#fff; }
.home-page .highlights::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:25%; }
.home-page .highlights>.container { position:relative; z-index:1; }
.home-page .highlights h2 { max-width:850px; color:#fff!important; }
.home-page .section-subtitle { max-width:760px; margin:25px 0 60px!important; color:rgba(255,255,255,.58)!important; font-size:1.08rem; }
.home-page .highlights-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); }
.home-page .highlight-card { min-height:430px; margin:0; padding:50px!important; border:0!important; border-radius:0!important; background:var(--ink-2)!important; box-shadow:none; color:#fff; }
.home-page .highlight-card::before { inset:0 auto 0 0; width:3px; background:var(--mint); transform:scaleY(0); transform-origin:bottom; transition:transform .45s ease; }.home-page .highlight-card:hover::before{transform:scaleY(1)}
.home-page .highlight-card:hover { z-index:2; transform:translateY(-10px); background:#10263d!important; box-shadow:0 35px 70px rgba(0,0,0,.3); }
.home-page .highlight-card.is-tilting{transform:perspective(950px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-8px)}
.home-page .hero-action,.home-page .cta-button,.home-page .submit-btn{transform:translate(var(--magnet-x,0),var(--magnet-y,0));}
.home-page .highlight-card{overflow:hidden}.home-page .highlight-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,rgba(91,203,187,.09) 48%,transparent 68%);transform:translateX(-140%);transition:transform 1s cubic-bezier(.22,1,.36,1)}.home-page .highlight-card:hover::after{transform:translateX(140%)}
.home-page .highlight-card h3 { margin-top:30px; color:#fff!important; font-size:1.7rem; }.home-page .highlight-card p{color:rgba(255,255,255,.58)!important;line-height:1.75}
.home-page .services-list { margin:1px 0 0; padding:52px!important; border:1px solid rgba(215,198,161,.25); border-radius:0; background:linear-gradient(135deg,#122536,#0b1b2d)!important; color:#fff; }
.home-page .services-list h3 { font-size:1.8rem; color:#fff!important; }
.home-page .services-grid { grid-template-columns:1fr 1fr; gap:10px 48px; }
.home-page .services-grid li { padding:12px 12px 12px 34px; border:0; border-bottom:1px solid rgba(255,255,255,.1); border-radius:0; background:transparent; color:rgba(255,255,255,.72)!important; }.home-page .services-grid li::before{left:5px;color:var(--mint)}

/* Alternating feature chapters */
.home-page .solutions,.home-page .richtfunk { background:var(--paper)!important; }
.home-page .network-security,.home-page .sicherheitstechnik { background:var(--paper-2)!important; }
.home-page .solutions::before,.home-page .network-security::before,.home-page .richtfunk::before,.home-page .sicherheitstechnik::before { display:none; }
.home-page .solution-content { display:block; }
.home-page .solution-text { position:relative; max-width:1040px!important; margin:0; padding:0 0 0 26%; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.home-page .network-security .solution-text,.home-page .sicherheitstechnik .solution-text { padding:0 26% 0 0; margin-left:auto; }
.home-page .solution-text::before { content:"0" counter(chapter); position:absolute; left:0; top:-14px; color:transparent; -webkit-text-stroke:1px rgba(6,16,29,.18); font-size:clamp(7rem,15vw,14rem); line-height:.8; font-weight:850; letter-spacing:-.08em; }
.home-page .network-security .solution-text::before,.home-page .sicherheitstechnik .solution-text::before { left:auto; right:0; }
.home-page .solutions{counter-increment:chapter}.home-page .network-security{counter-increment:chapter}.home-page .richtfunk{counter-increment:chapter}.home-page .sicherheitstechnik{counter-increment:chapter}
.home-page .solution-text h2 { max-width:760px; margin-bottom:36px; }
.home-page .solution-text p { max-width:760px; }
.home-page .section-cta { width:min(1240px,calc(100% - 48px)); margin:52px auto 0!important; text-align:left!important; }
.home-page .network-security .section-cta,.home-page .sicherheitstechnik .section-cta { text-align:right!important; }
.home-page .cta-button { padding:15px 22px; border-radius:2px!important; background:var(--ink)!important; color:#fff!important; box-shadow:none; letter-spacing:.03em; }
.home-page .cta-button::after { content:" ↗"; color:var(--mint); }
.home-page .wlan-check-callout { border-radius:2px; background:var(--ink); box-shadow:18px 18px 0 var(--mint); }

/* Contact */
.home-page .contact { padding:clamp(100px,11vw,160px) 0; background:linear-gradient(135deg,#0c3838,#07131f)!important; }
.home-page .contact::before { background:linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:25%; }
.home-page .contact-header h2 { max-width:800px; margin:0 0 60px; color:#fff!important; font-size:var(--display); line-height:.94; letter-spacing:-.055em; text-align:left; }
.home-page .contact-content { display:grid; grid-template-columns:.72fr 1.28fr; gap:1px; align-items:stretch; background:rgba(255,255,255,.2); }
.home-page .contact-info,.home-page .contact-form { margin:0; padding:42px!important; border:0; border-radius:0; background:rgba(6,16,29,.92); box-shadow:none; }
.home-page .contact-info h3 { color:var(--mint)!important; }.home-page .contact-info p{color:rgba(255,255,255,.68)!important}.home-page .contact-form{background:#fff}.home-page .form-group label{color:var(--ink)!important}.home-page .form-group input,.home-page .form-group textarea{border:0;border-bottom:1px solid #b8c3cb;border-radius:0;background:transparent;color:var(--ink)}.home-page .submit-btn{border-radius:2px!important;background:var(--blue)!important}

@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes coreFloat{50%{transform:translateY(-10px) scale(1.04)}}
@keyframes heroBreathe{50%{transform:scale(1.06);opacity:.75}}
@keyframes networkDrift{to{transform:translate3d(25px,-18px,0) scale(1.04)}}

@media(max-width:980px){
 .home-page .hero{height:auto;min-height:900px}.home-page .hero-content{grid-template-columns:1fr;width:min(100% - 40px,760px);padding:100px 0 190px}.home-page .hero-orbit{position:absolute;right:-150px;bottom:45px;width:430px;opacity:.48}.home-page .hero-text{position:relative;z-index:2}.home-page .hero-title{font-size:clamp(4.7rem,18vw,8rem)}
 .home-page .about-content{grid-template-columns:1fr;gap:100px}.home-page .about-visual{display:flex;justify-content:center}.home-page .solution-text,.home-page .network-security .solution-text,.home-page .sicherheitstechnik .solution-text{padding:0 0 0 18%;}.home-page .network-security .solution-text::before,.home-page .sicherheitstechnik .solution-text::before{left:0;right:auto}
 .home-page .contact-content{grid-template-columns:1fr}
}
@media(max-width:768px){
 .home-page .container{width:min(100% - 32px,620px)}.home-page .navbar{height:66px!important}.home-page .nav-container{width:calc(100% - 28px)}.home-page .nav-menu{top:66px;height:calc(100svh - 66px)}
 .home-page .hero{min-height:860px;padding-top:66px}.home-page .hero-content{width:calc(100% - 32px);padding:74px 0 220px;align-items:start}.home-page .hero-title{font-size:clamp(4.1rem,20vw,6.2rem)}.home-page .hero-subtitle{font-size:1.25rem;margin-top:26px}.home-page .hero-description{font-size:.9rem;line-height:1.58}.home-page .hero-actions{display:grid}.home-page .hero-proof{width:100%;grid-template-columns:1fr}.home-page .hero-proof span{display:none}.home-page .hero-proof span:first-child{display:block;text-align:center;border:0}.home-page .hero-orbit{width:340px;right:-120px;bottom:55px}
 .home-page .about,.home-page .highlights,.home-page .solutions,.home-page .network-security,.home-page .richtfunk,.home-page .sicherheitstechnik{padding:92px 0}.home-page .about-text h2,.home-page .highlights h2,.home-page .solution-text h2{font-size:clamp(2.7rem,13vw,4.2rem)}.home-page .tech-graphic{box-shadow:14px 14px 0 var(--mint)}
 .home-page .highlights-grid{grid-template-columns:1fr}.home-page .highlight-card{min-height:0;padding:32px!important}.home-page .services-list{padding:30px 24px!important}.home-page .services-grid{grid-template-columns:1fr}
 .home-page .solution-text,.home-page .network-security .solution-text,.home-page .sicherheitstechnik .solution-text{padding:100px 0 0}.home-page .solution-text::before{top:0;font-size:7.5rem}.home-page .section-cta{width:calc(100% - 32px)}.home-page .network-security .section-cta,.home-page .sicherheitstechnik .section-cta{text-align:left!important}
 .home-page .contact{padding:92px 0}.home-page .contact-header h2{font-size:clamp(2.8rem,13vw,4.2rem)}.home-page .contact-info,.home-page .contact-form{padding:28px!important}
}
@media(max-width:768px){.home-page .about.matrix-takeover::after{background:rgba(243,244,240,.72)}.home-page .about.matrix-takeover .matrix-code{opacity:.42!important}.home-page .about.matrix-takeover .about-text{padding:18px;background:rgba(243,244,240,.78);backdrop-filter:blur(3px)}}
@media(max-width:768px){
 .home-page{overflow-x:hidden}
 .home-page .hero-content,.home-page .hero-text,.home-page .about-content,.home-page .about-text,.home-page .solution-content,.home-page .solution-text{min-width:0;max-width:100%;width:100%}
 .home-page h1,.home-page h2,.home-page h3,.home-page p{max-width:100%;overflow-wrap:break-word;word-break:normal}
 .home-page .hero-title{font-size:11.5vw;white-space:nowrap;letter-spacing:-.065em}
 .home-page .hero-subtitle,.home-page .hero-description{width:100%;max-width:100%;overflow-wrap:break-word}
 .home-page .hero-subtitle{letter-spacing:-.035em}
 .home-page .hero-action-primary{color:var(--ink)!important}.home-page .hero-action-secondary{color:var(--ink)!important}.home-page .hero-action-ghost{color:#fff!important}
 .home-page .hero-orbit{opacity:.32;right:-150px;bottom:48px}
 .home-page .about-text h2,.home-page .about-text h3{text-align:left}
}
@media(prefers-reduced-motion:reduce){.home-page .hero-orbit *,.home-page .network-animation,.home-page .hero::after{animation:none!important}}