/* ============================================================================
   BRIT GMBH — HARDWARE & INFRASTRUKTUR / 2026
   01 Hero & navigation handoff | 02 Editorial | 03 Arbeitsplatz-Illustration
   04 Geräteklassen | 05 Fotostrecke | 06 Lifecycle | 07 Szenarien + CTA + FAQ
   Ausschließlich .hw-page und .hw-body; bestehender BRIT Header/Footer unberührt.
   Alle Bilder lokal. SVG-Icons über #i-* aus der bestehenden Website.
   ============================================================================ */
.hw-page{--hw-ink:#14251d;--hw-lime:#84B413;--hw-muted:#5d6c62;--hw-paper:#f6f8f3;overflow:clip}
.hw-page .hw-section{padding:clamp(74px,8vw,126px) 0}
.hw-page .eyebrow{color:#709e15}
.hw-page h1,.hw-page h2,.hw-page h3{overflow-wrap:normal}
.hw-page h2{font-size:clamp(2.2rem,4.1vw,4.9rem);line-height:1.1;letter-spacing:-.058em}
.hw-page h2 em{color:#78a40b}
.hw-page p{line-height:1.78}
.hw-page .icon{width:21px;height:21px}
.hw-page .hw-textlink{display:inline-flex;align-items:center;gap:12px;font-weight:800;border-bottom:1px solid #7a9f49;padding-bottom:9px;color:var(--hw-ink);transition:color .2s,gap .2s}
.hw-page .hw-textlink:hover{color:#6f970f;gap:18px}
.hw-page .hw-textlink .icon{width:17px;height:17px}
/* 01 / DISTINCT ASYMMETRIC HERO ------------------------------------------- */
.hw-hero{background:#f1f5eb}
.hw-hero-grid{display:grid;grid-template-columns:51% 49%;min-height:690px}
.hw-hero-copy{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;position:relative;padding:74px clamp(35px,6vw,114px) 82px max(48px,calc((100vw - 1320px)/2));background:radial-gradient(circle at 88% 50%,#e3efce,#f4f7ef 57%);z-index:1}
.hw-breadcrumb{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:52px;font-weight:660;font-size:.79rem;color:#647765}
.hw-breadcrumb a:hover{color:#5a8306}
.hw-hero h1{font-size:clamp(3.4rem,5.1vw,6.1rem);max-width:800px;line-height:1.04;letter-spacing:-.068em;margin:21px 0 26px;color:#14251d}
.hw-hero h1 em{color:#73a10e;display:block}
.hw-lead{font-size:clamp(1rem,1.26vw,1.25rem);color:#526357;max-width:620px;margin:0}
.hw-hero-buttons{display:flex;align-items:center;gap:23px;flex-wrap:wrap;margin-top:30px}
.hw-hero-link{display:inline-flex;align-items:center;gap:8px;color:#314d27;font-weight:800;font-size:.89rem}
.hw-hero-link .icon{width:17px;height:17px}
.hw-hero-meta{margin-top:45px;display:flex;gap:10px;align-items:center;font-size:.76rem;color:#526452;letter-spacing:.03em;font-weight:720}
.hw-status-dot,.hw-constellation-dot{background:#84B413;width:8px;height:8px;flex:0 0 8px;border-radius:50%;box-shadow:0 0 0 5px #84b41326}
.hw-hero-media{position:relative;overflow:hidden;background:#10241a;min-height:650px}
.hw-hero-media>img{height:100%;width:100%;object-fit:cover;object-position:69% center}
.hw-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0b2016ad,transparent 45%);pointer-events:none}
.hw-hero-medialabel{position:absolute;bottom:52px;left:48px;z-index:1;color:white;display:flex;flex-direction:column;gap:8px}
.hw-hero-medialabel span{color:#bbe07a;font-size:.65rem;letter-spacing:.17em;font-weight:800}
.hw-hero-medialabel strong{font-size:clamp(1.3rem,2.2vw,2rem);line-height:1.22;letter-spacing:-.04em}
.hw-hero-strip{background:#173223;color:#f4fff0}
.hw-hero-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.hw-hero-strip span{display:flex;gap:12px;align-items:center;font-size:.82rem;font-weight:760;letter-spacing:.015em}
.hw-hero-strip .icon{color:#b5dc69}
/* 02 / EDITORIAL STATEMENT ----------------------------------------------- */
.hw-intro{background:#fff}
.hw-intro-grid{display:grid;grid-template-columns:1fr .85fr;gap:10%;align-items:start}
.hw-intro h2{max-width:700px;margin:26px 0 0}
.hw-intro-right{border-left:3px solid #84B413;padding-left:32px}
.hw-intro-right p{color:#56655b;font-size:1.04rem}
.hw-intro-right .hw-statement{font-size:clamp(1.15rem,1.7vw,1.7rem);line-height:1.5;font-weight:760;color:#213a29;letter-spacing:-.035em;margin:0 0 22px}
.hw-intro-right .hw-textlink{margin-top:18px}
/* 03 / DEVICE CONSTELLATION ----------------------------------------------- */
.hw-anatomy{background:#eaf0e3}
.hw-anatomy-head,.hw-services-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:43px}
.hw-anatomy-head h2,.hw-services-head h2{max-width:850px;margin:20px 0 0}
.hw-anatomy-head>p,.hw-services-head>p{max-width:370px;margin:0;color:#546456}
.hw-anatomy-layout{display:grid;grid-template-columns:1.42fr .58fr;gap:22px;align-items:stretch}
.hw-constellation{background:#152d21;color:white;border-radius:17px;overflow:hidden;min-width:0;border:1px solid #30523c;box-shadow:0 20px 65px #203b1d16}
.hw-constellation-top{padding:18px 24px;display:flex;gap:12px;align-items:center;border-bottom:1px solid #ffffff1c;font-weight:770;letter-spacing:.12em;font-size:.63rem;color:#c8dbbe}
.hw-constellation-top>span:last-child{margin-left:auto;color:#9cba8a}
.hw-constellation-visual{min-height:380px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at center,#2d5137 0,#142b21 69%);padding:50px 35px 70px}
.hw-constellation-visual:before{content:"";width:75%;aspect-ratio:1;position:absolute;border-radius:50%;border:1px solid #93bf7744;box-shadow:0 0 0 35px #9ec9500b,0 0 0 73px #9ec95009}
.hw-workstation{position:relative;width:min(315px,60%);z-index:2;display:flex;align-items:center;flex-direction:column}
.hw-screen{width:100%;background:#0d1918;border:9px solid #0b1512;border-radius:10px;overflow:hidden;aspect-ratio:1.7;box-shadow:0 25px 60px #0007}
.hw-screen-head{display:flex;gap:5px;padding:8px 9px;background:#22382d}
.hw-screen-head i{height:6px;width:6px;border-radius:50%;background:#a1c967;opacity:.6}
.hw-screen svg{width:100%;height:auto}
.hw-screen-stand{width:8px;height:29px;background:#5b7563}
.hw-keyboard{height:10px;width:52%;background:#1f392c;border:1px solid #81a374;border-radius:45%;transform:skew(-15deg);margin-top:2px}
.hw-device{position:absolute;z-index:3;display:flex;gap:8px;align-items:center;color:#e2f2d5;background:#294a35;border:1px solid #a5cf6670;padding:12px 15px;border-radius:13px;font-size:.77rem;font-weight:750;box-shadow:0 16px 25px #0b180e55;transition:transform .26s ease}
.hw-device:hover{transform:translateY(-5px)}
.hw-device .icon{color:#b4da77;width:19px;height:19px}
.hw-device--laptop{top:17%;left:7%}.hw-device--network{top:16%;right:7%}.hw-device--storage{bottom:15%;left:5%}.hw-device--security{bottom:15%;right:6%}
.hw-constellation-caption{padding:15px 24px;border-top:1px solid #ffffff1c;color:#a8bdab;font-size:.72rem}
.hw-anatomy-aside{display:grid;gap:10px;align-content:center}
.hw-aside-line{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:28px 23px;background:#fff;border:1px solid #d6e2ce;border-radius:12px}
.hw-aside-line>span{font-size:.75rem;font-weight:850;color:#79aa14}
.hw-aside-line h3{font-size:1.25rem;margin:0 0 10px;letter-spacing:-.03em}
.hw-aside-line p{font-size:.88rem;line-height:1.63;margin:0;color:#59695b}
/* 04 / CATEGORY TILES ---------------------------------------------------- */
.hw-services{background:#fff}
.hw-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.hw-product{min-height:320px;padding:34px;display:flex;flex-direction:column;background:#f3f6ee;border:1px solid #dce5d7;border-radius:15px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.hw-product:hover{transform:translateY(-5px);border-color:#a2c679;box-shadow:0 20px 45px #16331b11}
.hw-product--first{background:#193527;color:white}
.hw-product--first p{color:#c8d7c5}
.hw-product-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:27px}
.hw-product-top>span:first-child{color:#729f26;font-size:.68rem;font-weight:850;letter-spacing:.12em}
.hw-product--first .hw-product-top>span:first-child{color:#bbdf80}
.hw-icon{width:52px;height:52px;border:1px solid #bad49d;border-radius:13px;background:#e4efda;display:grid;place-items:center;color:#65911a}
.hw-product--first .hw-icon{border-color:#b4d7744b;background:#ffffff15;color:#c4e992}
.hw-icon .icon{width:27px;height:27px}
.hw-product h3{font-size:clamp(1.5rem,2vw,2rem);line-height:1.14;letter-spacing:-.05em;margin:0 0 15px}
.hw-product p{max-width:480px;font-size:1rem;color:#596b5c;margin:0 0 24px}
.hw-product-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid #cddac7;padding-top:18px;margin-top:auto;font-size:.73rem;font-weight:790;color:#5c7957}
.hw-product--first .hw-product-foot{border-color:#ffffff36;color:#d2e9c2}
.hw-product-foot .icon{width:18px;height:18px}
/* 05 / INSTALLATION PHOTO ------------------------------------------------- */
.hw-installation{background:#f0f4ea}
.hw-install-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:8%;align-items:center}
.hw-install-photo{position:relative;margin:0;min-width:0;overflow:hidden;border-radius:14px 110px 14px 14px;height:570px;background:#203c30}
.hw-install-photo img{height:100%;width:100%;object-fit:cover;transition:transform .6s}
.hw-install-photo:hover img{transform:scale(1.035)}
.hw-install-photo figcaption{position:absolute;left:0;bottom:0;max-width:82%;background:#152d25dd;color:#fff;font-size:.85rem;font-weight:730;line-height:1.4;padding:20px 22px}
.hw-install-content h2{margin:20px 0 26px;max-width:620px}
.hw-install-content>p{color:#556457;font-size:1.07rem}
.hw-install-points{padding:0;margin:24px 0 32px;list-style:none;display:grid;gap:15px}
.hw-install-points li{display:flex;align-items:center;gap:12px;font-weight:740;color:#203526}
.hw-install-points .icon{color:#80ad1f;width:19px;height:19px}
/* 06 / LIFECYCLE ---------------------------------------------------------- */
.hw-lifecycle{background:#172f24;color:#fff}
.hw-lifecycle h2{max-width:950px;margin:22px 0 18px}
.hw-lifecycle h2 em{color:#b1dc69}
.hw-lifecycle .eyebrow{color:#bbdf83}
.hw-lifecycle-head>p{color:#bfcfc0;max-width:700px}
.hw-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:55px;border-top:1px solid #5d8069}
.hw-timeline article{padding:22px 26px 26px 0;position:relative;border-right:1px solid #5d806944}
.hw-step-number{color:#aad36f;font-size:.78rem;letter-spacing:.12em;font-weight:820}
.hw-step-line{position:absolute;top:-5px;left:0;width:60px;height:8px;border-radius:10px;background:#84B413}
.hw-timeline .icon{display:block;width:32px;height:32px;margin:28px 0 19px;color:#bbdf8c}
.hw-timeline h3{font-size:1.5rem;letter-spacing:-.04em;margin:0 0 11px}
.hw-timeline p{margin:0;color:#bdcebc;font-size:.9rem;max-width:245px}
/* 07 / SCENARIOS, CTA, FAQ ------------------------------------------------ */
.hw-usecases{background:#fff}
.hw-usecases-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:10%;align-items:start}
.hw-usecases h2{margin:22px 0 23px;max-width:610px}
.hw-usecases-grid>div:first-child>p{color:#5c6b60;font-size:1.05rem;max-width:590px}
.hw-scenarios{border-top:1px solid #cddbcc}
.hw-scenarios>div{padding:24px 0;border-bottom:1px solid #cddbcc}
.hw-scenarios span{color:#789f1d;font-size:.68rem;font-weight:850;letter-spacing:.13em}
.hw-scenarios h3{font-size:1.45rem;margin:9px 0 6px}
.hw-scenarios p{margin:0;color:#536458;font-size:.95rem;line-height:1.67}
.hw-cta{background:#e2ebd6;padding:76px 0}
.hw-cta-grid{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:10%}
.hw-cta h2{max-width:760px;margin:18px 0}
.hw-cta p{max-width:700px;color:#4e6650}
.hw-cta-action{display:flex;flex-direction:column;align-items:flex-start;gap:20px;justify-self:end}
.hw-cta-action>a:last-child{font-size:.85rem;color:#3d5534;border-bottom:1px solid #809b6e;padding-bottom:6px}
.hw-faq{background:#f8faf5}
.hw-faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:10%}
.hw-faq h2{margin:22px 0}.hw-faq p{color:#5c6c61}
.hw-faq-items{display:grid;gap:11px;align-content:start}
.hw-faq-items details{background:#fff;border:1px solid #dbe7d6;border-radius:11px;padding:0 23px}
.hw-faq-items summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-size:1rem;font-weight:780;line-height:1.4;cursor:pointer;color:#21372a}
.hw-faq-items summary::-webkit-details-marker{display:none}
.hw-faq-items summary .icon{width:18px;height:18px;transition:transform .25s;flex:0 0 auto}
.hw-faq-items details[open] summary .icon{transform:rotate(180deg);color:#75a10e}
.hw-faq-items details p{font-size:.96rem;margin:0;padding:0 0 20px;max-width:600px}
@media(max-width:1230px){
 .hw-hero-grid{grid-template-columns:51% 49%}
 .hw-hero-copy{padding-left:40px;padding-right:30px}
 .hw-hero h1{font-size:clamp(3rem,5.2vw,5rem)}
 .hw-anatomy-layout{grid-template-columns:1.2fr .8fr}
}
@media(max-width:960px){
 .hw-hero-grid{grid-template-columns:1fr}
 .hw-hero-copy{padding:60px 38px 65px}
 .hw-hero-media{height:390px;min-height:0}
 .hw-hero-media>img{object-position:60% 60%}
 .hw-hero-medialabel{left:35px;bottom:30px}
 .hw-hero-strip .wrap{justify-content:flex-start;column-gap:32px}
 .hw-intro-grid,.hw-install-grid,.hw-usecases-grid,.hw-faq-grid,.hw-cta-grid{grid-template-columns:1fr;gap:35px}
 .hw-cta-action{justify-self:start}
 .hw-anatomy-head,.hw-services-head{flex-direction:column;align-items:start;gap:14px}
 .hw-anatomy-layout{grid-template-columns:1fr}
 .hw-anatomy-aside{grid-template-columns:repeat(3,1fr)}
 .hw-aside-line{grid-template-columns:1fr;padding:20px}
 .hw-install-photo{height:440px}
}
@media(max-width:700px){
 .hw-page .hw-section{padding:69px 0}
 .hw-page h2{font-size:clamp(2.25rem,9vw,3.45rem)}
 .hw-hero-copy{padding:39px 20px 44px}
 .hw-breadcrumb{margin-bottom:35px;font-size:.71rem}
 .hw-hero h1{font-size:clamp(2.85rem,11vw,4.25rem);letter-spacing:-.065em}
 .hw-lead{font-size:1.02rem}
 .hw-hero-buttons{gap:19px}
 .hw-hero-media{height:300px}
 .hw-hero-strip .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 18px;padding:16px 0}
 .hw-hero-strip span{font-size:.75rem}
 .hw-intro-right{padding-left:20px}
 .hw-constellation-visual{min-height:310px;padding:30px 5px 45px}
 .hw-constellation-top{padding:14px;font-size:.55rem;letter-spacing:.07em}
 .hw-workstation{width:min(260px,60%)}
 .hw-device{padding:8px;gap:5px;font-size:.62rem}
 .hw-device .icon{width:16px;height:16px}
 .hw-device--laptop{top:13%;left:3%}.hw-device--network{top:13%;right:3%}
 .hw-device--storage{bottom:14%;left:3%}.hw-device--security{bottom:14%;right:3%}
 .hw-anatomy-aside{grid-template-columns:1fr}
 .hw-aside-line{grid-template-columns:30px 1fr}
 .hw-product-grid,.hw-timeline{grid-template-columns:1fr}
 .hw-product{min-height:280px;padding:24px}
 .hw-install-photo{height:330px;border-radius:14px 80px 14px 14px}
 .hw-install-photo figcaption{font-size:.72rem;max-width:95%;padding:13px}
 .hw-timeline{margin-top:37px}
 .hw-timeline article{padding:22px 0 24px;display:grid;grid-template-columns:40px 1fr;column-gap:12px}
 .hw-timeline .hw-step-number{grid-column:1}.hw-timeline .hw-step-line{top:-4px}
 .hw-timeline .icon{grid-column:1;grid-row:2;margin:12px 0 0}
 .hw-timeline h3{grid-column:2;grid-row:2;margin:6px 0 10px}
 .hw-timeline p{grid-column:2;grid-row:3;max-width:none}
 .hw-cta{padding:60px 0}
}
@media(prefers-reduced-motion: reduce){
 .hw-page *, .hw-page *:before, .hw-page *:after{animation:none!important;transition:none!important}
}