/* Layout: clean minimalist monochrome after the Hazel theme. A full-bleed dark hero with a generated
   folded-panel surface, then white sections with wide-tracked uppercase headings and lots of air.
   Logo slate is the only colour, used sparingly. Deliberately single-theme with explicit colours. */
:root{
  --white:#ffffff; --paper:#f5f5f4; --ink:#141414; --text:#4a4a4a; --grey:#8c8c8c; --line:#e4e4e2;
  --dark:#0b0b0c; --dark2:#151517; --d-line:#2a2a2d; --d-text:#b9b9bb; --slate:#596874;
  --f-head:"Josefin Sans", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --f-body:"Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--white); color:var(--text); font-family:var(--f-body); font-weight:300; font-size:1.0625rem; line-height:1.75; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; font-family:var(--f-head); font-weight:400; color:var(--ink); text-transform:uppercase; line-height:1.2; text-wrap:balance}
p{margin:0}
a{color:inherit}
.lc{text-transform:none}   /* bll immer klein, auch in Großbuchstaben-Zeilen */
:focus-visible{outline:1px solid var(--slate); outline-offset:4px}
.wrap{max-width:1200px; margin-inline:auto; padding-inline:clamp(16px, 5vw, 56px)}
.eyebrow{font-family:var(--f-head); font-size:.8125rem; letter-spacing:.32em; text-transform:uppercase; color:var(--grey)}
.title{font-size:clamp(1.6rem, 3.4vw, 2.5rem); letter-spacing:.24em; margin-top:16px}
.track{transition:letter-spacing 1.4s cubic-bezier(.2,.7,.2,1)}
.track.wide{letter-spacing:.5em}
.rule{width:56px; height:1px; background:var(--ink); margin:28px auto 0; border:0}
.center{text-align:center}
section{padding-block:clamp(80px, 11vw, 150px)}
.or{font-family:var(--f-serif); font-style:italic; font-size:1.25rem; color:inherit; opacity:.75}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 30px; border:1px solid currentColor; background:transparent;
  font:600 .8125rem/1 var(--f-head); letter-spacing:.24em; text-transform:uppercase; text-decoration:none; color:inherit; cursor:pointer; position:relative; overflow:hidden; z-index:0;
  transition:color .35s ease}
.btn::before{content:""; position:absolute; inset:0; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.7,0,.3,1); z-index:-1}
.btn:hover::before{transform:scaleX(1); transform-origin:left}
.btn-light{color:var(--white)}
.btn-light:hover{color:var(--dark)}
.btn-light:hover::before{background:var(--white)}
.btn-dark{color:var(--ink)}
.btn-dark:hover{color:var(--white)}
.btn-dark:hover::before{background:var(--ink)}

/* Header */
header.site{position:fixed; left:0; right:0; top:0; z-index:40; padding-top:env(safe-area-inset-top, 0px); transition:background-color .4s, box-shadow .4s}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; min-height:88px; transition:min-height .4s}
header.site .brand{display:block; position:relative; height:52px}
header.site .brand img{height:52px; width:auto; display:block; transition:opacity .4s}
header.site .brand .on-light{position:absolute; left:0; top:0; opacity:0}
.hdr-right{display:flex; align-items:center; gap:28px; color:var(--white)}
.hdr-tel{font-family:var(--f-head); letter-spacing:.16em; font-size:.8125rem; text-decoration:none}
.burger{width:48px; height:48px; display:grid; place-items:center; background:transparent; border:0; color:inherit; cursor:pointer; padding:0}
.burger span{display:block; width:30px; height:1px; background:currentColor; position:relative}
.burger span::before, .burger span::after{content:""; position:absolute; left:0; width:30px; height:1px; background:currentColor; transition:width .3s}
.burger span::before{top:-8px}
.burger span::after{top:8px; width:20px}
.burger:hover span::after{width:30px}
header.site.solid{background:var(--white); box-shadow:0 1px 0 var(--line)}
header.site.solid .wrap{min-height:72px}
header.site.solid .on-dark{opacity:0}
header.site.solid .on-light{opacity:1}
header.site.solid .hdr-right{color:var(--ink)}
@media (max-width:640px){ .hdr-tel{display:none} }

/* Overlay menu */
.overlay{position:fixed; inset:0; z-index:60; background:var(--dark); color:var(--white); display:grid; grid-template-rows:auto 1fr auto;
  padding:calc(env(safe-area-inset-top, 0px) + 18px) clamp(16px, 5vw, 56px) calc(env(safe-area-inset-bottom, 0px) + 28px)}
.overlay[hidden]{display:none}
.overlay .top{display:flex; justify-content:space-between; align-items:center}
.overlay .top img{height:52px; width:auto}
.overlay .x{width:48px; height:48px; background:transparent; border:0; color:var(--white); cursor:pointer; position:relative}
.overlay .x::before, .overlay .x::after{content:""; position:absolute; left:9px; top:23px; width:30px; height:1px; background:currentColor; transform:rotate(45deg)}
.overlay .x::after{transform:rotate(-45deg)}
.overlay nav{align-self:center; display:grid; gap:clamp(8px, 1.6vh, 18px); justify-items:center}
.overlay nav a{font-family:var(--f-head); font-size:clamp(1.5rem, 4.4vw, 3rem); letter-spacing:.28em; text-transform:uppercase; text-decoration:none; color:var(--d-text); transition:color .3s, letter-spacing .5s}
.overlay nav a:hover{color:var(--white); letter-spacing:.34em}
.overlay .foot{display:flex; justify-content:center; gap:12px 36px; flex-wrap:wrap; font-family:var(--f-head); font-size:.8125rem; letter-spacing:.18em; color:var(--grey); text-transform:uppercase}
@media (prefers-reduced-motion: no-preference){ .overlay:not([hidden]) nav a{animation:up .6s cubic-bezier(.2,.7,.2,1) both} .overlay nav a:nth-child(2){animation-delay:.05s} .overlay nav a:nth-child(3){animation-delay:.1s} .overlay nav a:nth-child(4){animation-delay:.15s} .overlay nav a:nth-child(5){animation-delay:.2s} .overlay nav a:nth-child(6){animation-delay:.25s} @keyframes up{from{transform:translateY(24px)}} }

/* Hero */
.hero{position:relative; min-height:min(94vh, 880px); background:var(--dark); color:var(--white); display:grid; place-items:center; overflow:hidden; padding:120px 0 90px}
#surface{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 55% at 50% 52%, rgba(11,11,12,.72), rgba(11,11,12,.15) 70%, transparent); pointer-events:none}
.hero .inner{position:relative; z-index:1; text-align:center; display:grid; justify-items:center}
.hero .eyebrow{color:var(--d-text)}
/* claim: three equal parts, one line on desktop, wraps between words on small screens */
.hero h1{color:var(--white); font-weight:300; font-size:clamp(1.6rem, 3.7vw, 3.4rem); letter-spacing:.18em; margin-top:26px; line-height:1.2;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.25em .62em}
.hero h1 span{margin-right:-.18em; white-space:nowrap}
.hero h1 i{width:.16em; height:.16em; background:var(--slate); transform:rotate(45deg); flex:none}
@media (max-width:560px){ .hero h1{flex-direction:column; gap:.3em} .hero h1 i{display:none} }
.hero .sub{font-family:var(--f-head); text-transform:uppercase; letter-spacing:.26em; font-size:clamp(.6875rem, 1.2vw, .875rem); color:var(--d-text); margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px}
.hero .sub i{width:5px; height:5px; background:var(--slate); transform:rotate(45deg); align-self:center; display:block}
.hero .ctas{display:flex; align-items:center; gap:18px; margin-top:48px; flex-wrap:wrap; justify-content:center}
.scroll-cue{position:absolute; left:50%; bottom:28px; z-index:1; width:1px; height:56px; background:rgba(255,255,255,.18); overflow:hidden; transform:translateX(-50%)}
.scroll-cue::after{content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--white)}
@media (prefers-reduced-motion: no-preference){
  .scroll-cue::after{animation:cue 2.2s cubic-bezier(.6,0,.3,1) infinite}
  @keyframes cue{to{top:110%}}
  .hero .inner > *{animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}
  .hero .inner > :nth-child(2){animation-delay:.12s} .hero .inner > :nth-child(3){animation-delay:.24s} .hero .inner > :nth-child(4){animation-delay:.36s}
  @keyframes rise{from{transform:translateY(18px); letter-spacing:.5em}}
}

/* Intro */
.intro .lead{max-width:720px; margin:34px auto 0; font-size:clamp(1.125rem, 1.8vw, 1.3125rem); line-height:1.8; color:var(--text)}
.intro .sign{margin-top:30px; font-family:var(--f-serif); font-style:italic; font-size:1.5rem; color:var(--ink)}

/* Services */
.services{background:var(--paper)}
.svc-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:clamp(48px, 7vw, 80px); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.svc{padding:clamp(28px, 4vw, 52px) clamp(22px, 3vw, 40px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); text-decoration:none; color:var(--text);
  display:grid; gap:16px; align-content:start; position:relative; transition:background-color .4s}
.svc:hover{background:var(--white)}
.svc svg{width:36px; height:36px; color:var(--ink); stroke-width:1}
.svc h3{font-size:1.0625rem; letter-spacing:.22em}
.svc p{font-size:.96875rem}
.svc .more{font-family:var(--f-head); font-size:.75rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); display:inline-flex; gap:12px; align-items:center; margin-top:6px}
.svc .more::after{content:""; width:28px; height:1px; background:currentColor; transition:width .35s}
.svc:hover .more::after{width:56px}
@media (max-width:900px){ .svc-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .svc-grid{grid-template-columns:1fr} }

/* Split feature */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:0; min-height:620px}
.split .pane-dark{background:var(--dark2); color:var(--white); position:relative; overflow:hidden; display:grid; place-items:center; padding:64px 24px}
.split .word{font-family:var(--f-head); font-weight:300; font-size:clamp(3rem, 9vw, 8rem); letter-spacing:.3em; color:var(--white); line-height:1; margin-right:-.3em}
.split .pane-dark .eyebrow{position:absolute; top:40px; left:40px; color:var(--d-text)}
.split .spec{position:absolute; bottom:36px; left:40px; right:40px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--f-head); font-size:.75rem; letter-spacing:.2em; color:var(--d-text); text-transform:uppercase}
.split .lines{position:absolute; inset:0; opacity:.5}
.split .pane-light{background:var(--white); padding:clamp(48px, 7vw, 100px) clamp(24px, 6vw, 88px); display:grid; gap:22px; align-content:center}
.split .pane-light h2{font-size:clamp(1.4rem, 2.6vw, 2rem); letter-spacing:.2em}
.pane-light ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.pane-light li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; font-size:.96875rem}
.pane-light li::before{content:""; width:12px; height:1px; background:var(--ink); margin-top:.85em}
.pane-light .checks{margin-top:0; gap:0}
.pane-light .checks li{display:block}
.pane-light .checks li::before{background:none; margin-top:0}
.split .btn{justify-self:start; margin-top:12px}
@media (max-width:860px){ .split{grid-template-columns:1fr} .split .pane-dark{min-height:360px} }

/* Portfolio grid */
.works{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px; margin-top:clamp(48px, 7vw, 80px)}
.work{position:relative; aspect-ratio:4/5; overflow:hidden; display:block; text-decoration:none; color:var(--white); background:var(--dark2); max-width:100%}
.work .art{position:absolute; inset:0; transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.work:hover .art{transform:scale(1.06)}
.work .cap{position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:14px; padding:24px; background:rgba(11,11,12,.0); transition:background-color .5s}
.work .cap h3{color:var(--white); font-size:clamp(1.125rem, 2vw, 1.5rem); letter-spacing:.28em; transition:letter-spacing .6s}
.work .cap span{font-family:var(--f-head); font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--d-text); opacity:0; transform:translateY(8px); transition:opacity .45s, transform .45s}
.work:hover .cap, .work:focus-visible .cap{background:rgba(11,11,12,.62)}
.work:hover .cap h3{letter-spacing:.36em}
.work:hover .cap span, .work:focus-visible .cap span{opacity:1; transform:none}
@media (hover:none){ .work .cap{background:rgba(11,11,12,.45)} .work .cap span{opacity:1; transform:none} }
.a1{background:repeating-linear-gradient(135deg, #1b1b1d 0 22px, #232326 22px 44px)}
.a1::after{content:""; position:absolute; left:50%; top:50%; width:44%; aspect-ratio:1; border:1px solid rgba(255,255,255,.25); transform:translate(-50%,-50%) rotate(45deg)}
.a2{background:linear-gradient(180deg, #eceae6, #c9c7c2)}
.a2::before{content:""; position:absolute; inset:16% 18%; background:
  linear-gradient(#7c7c7c, #7c7c7c) 0 0/1px 100% no-repeat, linear-gradient(#7c7c7c, #7c7c7c) 25% 0/1px 100% no-repeat, linear-gradient(#7c7c7c, #7c7c7c) 50% 0/1px 100% no-repeat,
  linear-gradient(#7c7c7c, #7c7c7c) 75% 0/1px 100% no-repeat, linear-gradient(#7c7c7c, #7c7c7c) 100% 0/1px 100% no-repeat,
  linear-gradient(#7c7c7c, #7c7c7c) 0 0/100% 1px no-repeat, linear-gradient(#7c7c7c, #7c7c7c) 0 50%/100% 1px no-repeat, linear-gradient(#7c7c7c, #7c7c7c) 0 100%/100% 1px no-repeat,
  linear-gradient(to top right, transparent calc(50% - .5px), #a5a5a5 50%, transparent calc(50% + .5px)) 0 0/25% 50% repeat}
.a3{background:radial-gradient(circle at 30% 30%, #3a3f44, #121315 70%)}
.a3::before{content:""; position:absolute; inset:22% 20%; border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) 12% 18%/60% 1px no-repeat, linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) 12% 34%/70% 1px no-repeat,
  linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) 12% 50%/50% 1px no-repeat, linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) 12% 66%/64% 1px no-repeat}
.a4{background:linear-gradient(160deg, #d9d9d7 0 50%, #bdbdba 50% 100%)}
.a5{background:conic-gradient(from 210deg at 70% 60%, #18181a, #2d2f33, #18181a)}
.a6{background:var(--slate)}
.a6::before, .a5::before, .a4::before{content:""; position:absolute; left:50%; top:50%; width:38%; aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.3)}
.a4::before{border-color:rgba(0,0,0,.2); border-radius:50%}
.a6::before{transform:translate(-50%,-50%) rotate(45deg); background:rgba(255,255,255,.08)}
.work.light .cap h3{color:var(--white)}
@media (max-width:900px){ .works{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .works{grid-template-columns:1fr} .work{aspect-ratio:4/3} }

/* Counters */
.counters{background:var(--dark); color:var(--white); padding-block:clamp(64px, 8vw, 104px)}
.counters .wrap{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; text-align:center}
.counters b{display:block; font-family:var(--f-head); font-weight:300; font-size:clamp(2.5rem, 5vw, 4rem); letter-spacing:.06em; line-height:1; font-variant-numeric:tabular-nums}
.counters span{display:block; margin-top:16px; font-family:var(--f-head); font-size:.75rem; letter-spacing:.26em; text-transform:uppercase; color:var(--d-text)}
@media (max-width:760px){ .counters .wrap{grid-template-columns:1fr 1fr; row-gap:48px} }

/* Testimonials */
.quote-wrap{max-width:860px; margin:48px auto 0; text-align:center; display:grid; justify-items:center}
.quote-wrap blockquote{margin:0; font-family:var(--f-serif); font-style:italic; font-size:clamp(1.5rem, 3vw, 2.25rem); line-height:1.4; color:var(--ink); min-height:4.2em; display:grid; place-items:center; transition:opacity .5s}
.quote-wrap blockquote.fade{opacity:0}
.quote-wrap .who{margin-top:28px; font-family:var(--f-head); font-size:.8125rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink)}
.quote-wrap .who small{display:block; margin-top:6px; letter-spacing:.14em; color:var(--grey); font-size:.75rem}
.dots{display:flex; gap:6px; margin-top:34px}
.dots button{width:36px; height:36px; display:grid; place-items:center; background:transparent; border:0; cursor:pointer; padding:0}
.dots button::before{content:""; width:7px; height:7px; border:1px solid var(--ink); transform:rotate(45deg); transition:background-color .3s}
.dots button[aria-current="true"]::before{background:var(--ink)}
.clients{display:flex; justify-content:center; flex-wrap:wrap; gap:14px 44px; margin-top:clamp(56px, 8vw, 96px); padding-top:40px; border-top:1px solid var(--line);
  font-family:var(--f-head); font-size:.8125rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grey)}

/* Partner + contact */
.partner{background:var(--paper); padding-block:clamp(56px, 8vw, 96px)}
.partner .wrap{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(28px, 5vw, 72px); align-items:center}
.partner img{width:120px; height:auto; display:block; mix-blend-mode:multiply}
.partner h2{font-size:clamp(1.125rem, 2vw, 1.5rem); letter-spacing:.2em}
.partner p{margin-top:16px; max-width:70ch}
@media (max-width:640px){ .partner .wrap{grid-template-columns:1fr} }
.contact{text-align:center}
.contact .tel{display:block; margin-top:36px; font-family:var(--f-head); font-weight:300; font-size:clamp(1.75rem, 4.6vw, 3.5rem); letter-spacing:.12em; color:var(--ink); user-select:all}
.contact .mail{display:block; margin-top:10px; font-size:1.125rem; user-select:all}
.contact .addr{margin-top:6px; color:var(--grey)}
.contact .ctas{display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap; margin-top:44px}
.job{max-width:640px; margin:clamp(64px, 9vw, 110px) auto 0; padding-top:44px; border-top:1px solid var(--line); display:grid; gap:12px; justify-items:center}
.job h3{font-size:1.0625rem; letter-spacing:.2em}
.job a{font-family:var(--f-head); font-size:.75rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink)}

/* Rack band: drawn server racks with blinking LEDs, parallax on scroll */
.rackband{position:relative; height:clamp(380px, 48vw, 580px); overflow:hidden; background:var(--dark); color:var(--white); display:grid; place-items:center; text-align:center}
#racks{position:absolute; left:0; top:-10%; width:100%; height:120%; display:block; will-change:transform}
.rackband::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 46% 42% at 50% 50%, rgba(11,11,12,.82), rgba(11,11,12,.35) 70%, rgba(11,11,12,.15)), linear-gradient(rgba(11,11,12,.55), transparent 22%, transparent 78%, rgba(11,11,12,.7))}
.rackband .cap{position:relative; z-index:1; display:grid; justify-items:center; gap:20px; padding-inline:16px}
.rackband .eyebrow{color:var(--d-text)}
.rackband h2{color:var(--white); font-weight:300; font-size:clamp(1.4rem, 3.6vw, 2.75rem); letter-spacing:.24em}

/* voneo appliance */
.vstack{display:grid; justify-items:center; gap:clamp(28px, 4vw, 48px); position:relative; z-index:1; width:100%}
.appliance{width:min(94%, 540px); height:auto; display:block; overflow:visible}
.appliance .led{fill:#2f2f33}
.appliance .led.on{fill:#e9eef2}
.appliance .led.ice{fill:#9fb3c4}
.appliance .led.act{animation:blink var(--d, 1s) steps(1) infinite; animation-delay:var(--o, 0s)}
@keyframes blink{50%{fill:#2a2a2e}}

/* Drawn tiles */
.work .art svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.art .ln{stroke:rgba(255,255,255,.8); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round}
.art .lnd{stroke:rgba(255,255,255,.32); stroke-width:1.2; fill:none; stroke-linecap:round}
.art .dot{fill:#fff}
.a4, .a5{background:radial-gradient(circle at 50% 38%, #29292d, #0f0f11 75%)}
.a6{background:radial-gradient(circle at 50% 38%, #5d6c78, #262c31 80%)}
.a4::before, .a5::before, .a6::before{display:none}
.work .cap{place-content:end center; padding-bottom:30px; background:linear-gradient(transparent 55%, rgba(11,11,12,.55))}
.work:hover .cap, .work:focus-visible .cap{background:linear-gradient(rgba(11,11,12,.25), rgba(11,11,12,.7))}
@media (prefers-reduced-motion: no-preference){
  .art .speaking{animation:speak 2.6s ease-in-out infinite}
  @keyframes speak{0%,100%{stroke:rgba(255,255,255,.32)} 50%{stroke:#9fb3c4; stroke-width:2.4}}
  .art .wave rect{transform-box:fill-box; transform-origin:50% 100%; animation:wv .8s ease-in-out infinite alternate}
  @keyframes wv{from{transform:scaleY(.25)}}
  .art .flow{stroke-dasharray:3 9; animation:dash 1.4s linear infinite}
  @keyframes dash{to{stroke-dashoffset:-24}}
  .art .pulse{animation:blink 1.6s steps(1) infinite}
}

/* Process */
.process{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:clamp(56px, 8vw, 96px); position:relative}
.process::before{content:""; position:absolute; left:12.5%; right:12.5%; top:7px; height:1px; background:var(--line)}
.process .bar{position:absolute; left:12.5%; right:12.5%; top:7px; height:1px; background:var(--ink); transform-origin:left; transform:scaleX(1)}
.stage{display:grid; justify-items:center; align-content:start; text-align:center; gap:14px; padding-inline:16px; position:relative}
.stage::before{content:""; width:11px; height:11px; border:1px solid var(--ink); background:var(--white); transform:rotate(45deg); margin-top:2px}
.stage .no{font-family:var(--f-head); font-size:.75rem; letter-spacing:.3em; color:var(--grey); margin-top:10px}
.stage h3{font-size:1rem; letter-spacing:.24em}
.stage p{font-size:.9375rem; max-width:26ch}
/* Process animation (class "anim" is set by JS, "run" when the section comes into view):
   the line draws from left to right, each diamond fills as the line reaches it, then its number,
   title and text appear; the last diamond (operation) keeps a quiet pulse */
.process.anim .bar{transform:scaleX(0); transition:transform 1.8s cubic-bezier(.45,0,.25,1)}
.process.anim.run .bar{transform:scaleX(1)}
.process.anim .stage > *{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.process.anim.run .stage > *{opacity:1; transform:none}
.process.anim .stage::before{transition:background-color .35s ease, border-color .35s ease}
.process.anim.run .stage::before{background:var(--slate); border-color:var(--slate); animation:stagepop .5s ease-out both}
.process.anim.run .stage:nth-child(2)::before{animation-delay:.05s; transition-delay:.05s}
.process.anim.run .stage:nth-child(3)::before{animation-delay:.65s; transition-delay:.65s}
.process.anim.run .stage:nth-child(4)::before{animation-delay:1.25s; transition-delay:1.25s}
.process.anim.run .stage:nth-child(5)::before{animation-delay:1.85s; transition-delay:1.85s}
.process.anim.run .stage:nth-child(2) > *{transition-delay:.2s} .process.anim.run .stage:nth-child(2) > h3{transition-delay:.3s} .process.anim.run .stage:nth-child(2) > p{transition-delay:.4s}
.process.anim.run .stage:nth-child(3) > *{transition-delay:.8s} .process.anim.run .stage:nth-child(3) > h3{transition-delay:.9s} .process.anim.run .stage:nth-child(3) > p{transition-delay:1s}
.process.anim.run .stage:nth-child(4) > *{transition-delay:1.4s} .process.anim.run .stage:nth-child(4) > h3{transition-delay:1.5s} .process.anim.run .stage:nth-child(4) > p{transition-delay:1.6s}
.process.anim.run .stage:nth-child(5) > *{transition-delay:2s} .process.anim.run .stage:nth-child(5) > h3{transition-delay:2.1s} .process.anim.run .stage:nth-child(5) > p{transition-delay:2.2s}
.process.anim .stage:last-child::after{content:""; position:absolute; left:calc(50% - 6.5px); top:2px; width:11px; height:11px; border:1px solid var(--slate); transform:rotate(45deg); opacity:0; pointer-events:none}
.process.anim.run .stage:last-child::after{animation:stagering 2.8s ease-out 2.6s infinite}
@keyframes stagepop{0%{transform:rotate(45deg) scale(1)} 45%{transform:rotate(45deg) scale(1.7)} 100%{transform:rotate(45deg) scale(1.15)}}
@keyframes stagering{0%{opacity:.7; transform:rotate(45deg) scale(1)} 100%{opacity:0; transform:rotate(45deg) scale(3)}}
@media (max-width:760px){ .process{grid-template-columns:1fr 1fr; row-gap:48px} .process::before, .process .bar{display:none} }

/* Split variants */
.split.rev .pane-dark{order:2}
.split .pane-dark.stage-dark{padding:clamp(56px, 7vw, 96px) clamp(20px, 4vw, 56px)}
@media (max-width:860px){ .split.rev .pane-dark{order:0} }

/* Monitoring console (monochrome) */
.console{width:100%; max-width:520px; background:#101012; border:1px solid var(--d-line); position:relative; z-index:1; font-size:.875rem}
.con-bar{display:flex; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--d-line); font-family:var(--f-head); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--d-text)}
.con-bar b{color:var(--white); font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:.12em}
.con-sum{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-bottom:1px solid var(--d-line)}
.con-sum div{padding:14px 16px; display:grid; gap:4px}
.con-sum div + div{border-left:1px solid var(--d-line)}
.con-sum b{font-family:var(--f-head); font-weight:300; font-size:1.5rem; color:var(--white); font-variant-numeric:tabular-nums; line-height:1}
.con-sum span{font-family:var(--f-head); font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey)}
.rows{list-style:none; margin:0; padding:6px 0}
.rows li{display:grid; grid-template-columns:12px minmax(0,1fr) 84px 70px; gap:12px; align-items:center; padding:9px 16px; color:var(--white)}
.rows li + li{border-top:1px solid #1d1d20}
.rows .st{width:7px; height:7px; background:var(--white); transform:rotate(45deg)}
.rows .n small{display:block; font-size:.6875rem; color:var(--grey); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rows svg{width:84px; height:24px; display:block}
.rows .v{text-align:right; font-family:var(--f-head); font-size:.75rem; letter-spacing:.06em; color:var(--d-text); font-variant-numeric:tabular-nums}
.log{border-top:1px solid var(--d-line); padding:12px 16px; height:calc(4 * 18px + 3 * 4px + 24px); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; font-size:.75rem; color:var(--grey)}
.log p{flex:none; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.log p:nth-last-child(n+5){display:none}   /* four lines fit; older ones drop out at the top */
.log time{color:#5f5f63; margin-right:10px; font-variant-numeric:tabular-nums}
.log p.new{color:var(--white)}
.con-note{padding:9px 16px; border-top:1px solid var(--d-line); font-family:var(--f-head); font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; color:#6a6a6e}
@media (max-width:520px){ .rows li{grid-template-columns:12px minmax(0,1fr) 64px} .rows svg{display:none} }

/* FFC scaffold + permit card on dark panes */
.ffc{width:100%; max-width:520px; position:relative; z-index:1}
.ffc svg{display:block; width:100%; height:auto}
.ffc .beam{stroke:#cfcfd2; stroke-width:1.5; fill:none; stroke-linecap:round}
.ffc .diag{stroke:#6b6b70; stroke-width:1; fill:none}
.ffc .slab{fill:#1f1f22; stroke:#cfcfd2; stroke-width:1}
.ffc .load{stroke:#9fb3c4; stroke-width:2.5; fill:none; stroke-linecap:round; stroke-dasharray:12 400}
@media (prefers-reduced-motion: no-preference){ .ffc .load{animation:flow 3.2s linear infinite} @keyframes flow{from{stroke-dashoffset:412} to{stroke-dashoffset:0}} }
.ffc .lbl{font-family:"Josefin Sans", sans-serif; font-size:10px; letter-spacing:.18em; fill:#8c8c8c; text-transform:uppercase}
.ffc .util{fill:#ffffff}
.ffc .util.hi{fill:#9fb3c4}
.ffc .meta{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; font-family:var(--f-head); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--d-text)}
.ffc .meta b{color:var(--white); font-weight:400}
.permit{width:100%; max-width:440px; background:#101012; border:1px solid var(--d-line); padding:22px; display:grid; gap:10px; position:relative; z-index:1; color:var(--white)}
.permit .top{display:flex; justify-content:space-between; gap:12px; align-items:start; padding-bottom:12px; border-bottom:1px solid var(--d-line); flex-wrap:wrap}
.permit h4{color:var(--white); font-size:.875rem; letter-spacing:.18em}
.permit .top small{display:block; color:var(--grey); font-size:.75rem; margin-top:4px}
.permit .state{font-family:var(--f-head); font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; border:1px solid var(--d-text); color:var(--d-text); padding:5px 10px; white-space:nowrap}
.permit .state.ok{border-color:var(--white); color:var(--white); background:rgba(255,255,255,.08)}
.field{display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:12px; align-items:center; padding:8px 0; font-size:.9375rem; border-bottom:1px solid #1d1d20}
.field .ck{width:13px; height:13px; border:1px solid #6b6b70; transform:rotate(45deg); transition:all .3s}
.field.on .ck{background:var(--white); border-color:var(--white)}
.field .who{font-size:.6875rem; color:var(--grey)}
.field.dyn{color:#9fb3c4}
.field.dyn .ck{border-color:#9fb3c4}
.field.dyn.on .ck{background:#9fb3c4}

/* About */
.about{background:var(--paper)}
.about .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px, 6vw, 96px); align-items:center}
.photo{aspect-ratio:4/5; max-width:100%; background:repeating-linear-gradient(135deg, #e7e7e5 0 14px, #eeeeec 14px 28px); border:1px solid var(--line); display:grid; place-content:center; text-align:center; gap:8px; color:var(--grey)}
.photo b{font-family:var(--f-head); font-weight:400; font-size:.8125rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink)}
.photo span{font-size:.875rem; max-width:28ch}
.photo.sketch{display:block; margin:0; background:#fff; overflow:hidden}
.photo.sketch picture{display:block; height:100%}
.photo.sketch img{display:block; width:100%; height:100%; object-fit:cover; object-position:85% 50%}
.about .title{text-align:left}
.about .rule{margin-left:0}
.about .txt > p{margin-top:28px}
.values{display:grid; gap:22px; margin-top:36px}
.values div{display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding-top:20px; border-top:1px solid var(--line)}
.values b{font-family:var(--f-head); font-weight:400; font-size:.8125rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink)}
.values p{font-size:.96875rem}
@media (max-width:860px){ .about .wrap{grid-template-columns:1fr} .photo{aspect-ratio:16/10} .values div{grid-template-columns:1fr; gap:4px} }

/* Contact form (lines, not boxes) */
.contact-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px, 7vw, 110px); margin-top:clamp(48px, 7vw, 80px); text-align:left}
.contact-grid .info .tel{margin-top:0; font-size:clamp(1.5rem, 3vw, 2.25rem)}
.contact-grid .info .mail{margin-top:12px}
.contact-grid .info .ctas{justify-content:flex-start; margin-top:36px}
.hform{display:grid; gap:30px}
.hform .row{display:grid; grid-template-columns:1fr 1fr; gap:30px}
.hfield{position:relative; display:grid}
.hfield input, .hfield textarea, .hfield select{width:100%; border:0; border-bottom:1px solid #cfcfcd; background:transparent; padding:22px 0 10px; font:300 1.0625rem/1.4 var(--f-body); color:var(--ink); border-radius:0; outline:none; transition:border-color .3s}
.hfield textarea{min-height:110px; resize:vertical}
.hfield select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background:linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 10px) 60%/5px 5px no-repeat, linear-gradient(135deg, var(--ink) 50%, transparent 50%) calc(100% - 5px) 60%/5px 5px no-repeat}
.hfield label{position:absolute; left:0; top:22px; font-family:var(--f-head); font-size:.75rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grey); pointer-events:none; transition:top .25s, font-size .25s, color .25s}
.hfield::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.7,0,.3,1)}
.hfield:focus-within::after{transform:scaleX(1)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.hfield input:focus + label, .hfield input:not(:placeholder-shown) + label,
.hfield textarea:focus + label, .hfield textarea:not(:placeholder-shown) + label, .hfield.fixed label{top:0; font-size:.625rem; color:var(--ink)}
.hfield.err input{border-bottom-color:#a33a2c}
.consent{display:grid; grid-template-columns:18px minmax(0,1fr); gap:12px; font-size:.875rem; align-items:start}
.consent input{width:16px; height:16px; margin:3px 0 0; accent-color:var(--ink)}
.hform .send{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.hform .status{font-size:.9375rem; color:var(--text); min-height:1.4em}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr} .hform .row{grid-template-columns:1fr} }

footer.site{background:var(--dark); color:var(--d-text); font-size:.875rem}
footer.site .wrap{display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding-block:40px}
footer.site img{height:44px; width:auto}
footer.site nav{display:flex; justify-content:center; gap:14px 32px; flex-wrap:wrap; font-family:var(--f-head); font-size:.75rem; letter-spacing:.22em; text-transform:uppercase}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--white)}
@media (max-width:760px){ footer.site .wrap{grid-template-columns:1fr; justify-items:center; text-align:center} }
.proto{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:50; font-family:var(--f-head); font-size:11px; letter-spacing:.18em; text-transform:uppercase; background:var(--white); color:var(--grey); border:1px solid var(--line); padding:7px 12px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* =========================================================
   Multi-page additions
   ========================================================= */

/* Overlay menu in three groups */
.overlay{overflow-y:auto}
.overlay nav.menu-cols{display:grid; grid-template-columns:repeat(3, auto); justify-content:center; align-items:start; gap:clamp(28px, 6vw, 96px); padding-block:32px}
.overlay .grp{display:grid; gap:clamp(6px, 1.2vh, 12px); justify-items:start}
.overlay .grp .eyebrow{color:#6f6f73; margin-bottom:8px}
.overlay nav.menu-cols a{font-size:clamp(1.05rem, 2vw, 1.5rem); letter-spacing:.2em}
.overlay nav.menu-cols a:hover{letter-spacing:.24em}
.overlay nav.menu-cols a[aria-current="page"]{color:var(--white); text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:1px}
@media (max-width:760px){ .overlay nav.menu-cols{grid-template-columns:1fr; justify-content:start} }

/* Footer with columns */
footer.site .wrap.foot-grid{display:grid; grid-template-columns:1.3fr repeat(3, minmax(0,1fr)); gap:clamp(28px, 4vw, 56px); align-items:start; padding-block:clamp(56px, 7vw, 88px) 40px}
footer.site .fcol{display:grid; gap:10px; align-content:start}
footer.site .fcol p{line-height:1.7}
footer.site .fcol .eyebrow{color:#6f6f73; margin-bottom:6px}
footer.site .fcol a{font-family:var(--f-body); font-size:.9375rem; letter-spacing:0; text-transform:none}
footer.site .wrap.foot-bottom{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:22px; border-top:1px solid var(--d-line); font-size:.8125rem; color:#77777b}
@media (max-width:900px){ footer.site .wrap.foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ footer.site .wrap.foot-grid{grid-template-columns:1fr; justify-items:start; text-align:left} }

/* Page hero for subpages */
.page-hero{position:relative; min-height:clamp(420px, 62vh, 640px); background:var(--dark); color:var(--white); display:grid; align-items:end; overflow:hidden; padding:150px 0 clamp(56px, 7vw, 96px)}
.page-hero::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(11,11,12,.85), rgba(11,11,12,.35) 60%, rgba(11,11,12,.1)), linear-gradient(transparent 60%, rgba(11,11,12,.6))}
.page-hero .inner{position:relative; z-index:1}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-family:var(--f-head); font-size:.75rem; letter-spacing:.26em; text-transform:uppercase; color:var(--d-text)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--white)}
.crumbs i{width:5px; height:5px; background:var(--slate); transform:rotate(45deg); display:block}
.page-hero h1{color:var(--white); font-weight:300; font-size:clamp(2rem, 5.6vw, 4.5rem); letter-spacing:.16em; margin-top:22px; line-height:1.1}
.page-hero .sub{font-family:var(--f-head); text-transform:uppercase; letter-spacing:.24em; font-size:.8125rem; color:var(--d-text); margin-top:20px}
@media (prefers-reduced-motion: no-preference){
  .page-hero .inner > *{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
  .page-hero .inner > :nth-child(2){animation-delay:.1s} .page-hero .inner > :nth-child(3){animation-delay:.2s}
}

/* Lead block: heading left, text right */
.lead-block .wrap{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px, 6vw, 96px); align-items:start}
.lead-block .title{text-align:left}
.lead-block .rule{margin-left:0}
.prose p + p{margin-top:18px}
.prose .big{font-size:clamp(1.125rem, 1.7vw, 1.3125rem); line-height:1.75; color:var(--ink)}
.prose strong{font-weight:600; color:var(--ink)}
@media (max-width:860px){ .lead-block .wrap{grid-template-columns:1fr} }

/* Section header (centered) */
.sec-c{text-align:center}
.sec-c .lead{max-width:680px; margin:28px auto 0}
.paper{background:var(--paper)}
.svc.cell{cursor:default}
.svc.cell:hover{background:var(--paper)}
.paper .svc.cell, .paper .svc{background:var(--paper)}
.white-cells .svc{background:var(--white)}
.white-cells .svc.cell:hover{background:var(--white)}

/* Checklist in two columns */
.checks{list-style:none; margin:clamp(40px, 6vw, 64px) 0 0; padding:0; columns:2; column-gap:56px}
.checks li{break-inside:avoid; position:relative; padding:14px 0 14px 32px; border-top:1px solid var(--line); font-size:.96875rem}
/* marker sits outside the text flow, so links and other inline elements stay on the same line */
.checks li::before{content:""; position:absolute; left:3px; top:calc(14px + .6em); width:7px; height:7px; border:1px solid var(--ink); transform:rotate(45deg)}
.checks.one{columns:1}
.sec-c .checks{text-align:left}

/* Virtualisierung: two grouped lists around a drawn server with its virtual machines */
.virt{display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,300px) minmax(0,1fr); gap:clamp(28px, 4vw, 56px); align-items:center; margin-top:clamp(48px, 6vw, 72px); text-align:left}
.virt h3{font-family:var(--f-head); font-weight:400; font-size:.8125rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); margin:0 0 14px}
.virt .checks{margin-top:0}
.virt .checks li:last-child{border-bottom:1px solid var(--line)}
.virt-fig{margin:0}
.virt-fig svg{display:block; width:100%; height:auto; overflow:visible}
.virt-fig rect, .virt-fig line, .virt-fig circle{fill:none; stroke:var(--ink); stroke-width:1}
.virt-fig .vm circle{fill:var(--ink); stroke:none}
.virt-fig .ln{stroke:var(--grey)}
.virt-fig .bar{stroke:var(--line)}
.virt-fig .load{fill:var(--slate); stroke:none; transform-box:fill-box; transform-origin:left center; transform:scaleX(.5)}
.virt-fig .wire line{stroke:var(--grey); stroke-dasharray:3 3}
.virt-fig .hv{fill:var(--slate); stroke:none}
.virt-fig .srv rect:not(:first-child){stroke:var(--grey)}
.virt-fig .led{fill:var(--line); stroke:none}
.virt-fig .led.on{fill:var(--slate)}
.virt-fig text{font-family:var(--f-head); font-size:9px; letter-spacing:.2em; text-anchor:middle; fill:var(--ink); text-transform:uppercase}
.virt-fig .cap{fill:var(--grey); font-size:8.5px}
.virt-fig .hvt{fill:#fff; font-size:8.5px; letter-spacing:.3em}
@media (prefers-reduced-motion: no-preference){
  .virt-fig .load{animation:vmload 5s ease-in-out infinite}
  .virt-fig .vm:nth-child(3) .load{animation-delay:-1.3s; animation-duration:6s}
  .virt-fig .vm:nth-child(4) .load{animation-delay:-2.6s; animation-duration:4.4s}
  .virt-fig .vm:nth-child(5) .load{animation-delay:-3.7s; animation-duration:5.6s}
  .virt-fig .led:not(.on){animation:vmled 1.4s steps(2, jump-none) infinite}
  .virt-fig .led.l2{animation-duration:.9s}
}
@keyframes vmload{0%, 100%{transform:scaleX(.3)} 45%{transform:scaleX(.85)} 70%{transform:scaleX(.55)}}
@keyframes vmled{from{fill:var(--line)} to{fill:var(--slate)}}
@media (max-width:900px){ .virt{grid-template-columns:1fr} .virt-fig{order:-1; width:min(300px, 100%); margin-inline:auto} }
@media (max-width:760px){ .checks{columns:1} }

/* Pricing */
.pricing{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); max-width:900px; margin:clamp(48px, 7vw, 72px) auto 0; border:1px solid var(--line); text-align:left}
.plan{padding:clamp(28px, 4vw, 48px); display:grid; gap:20px; align-content:start; background:var(--white)}
.plan + .plan{border-left:1px solid var(--line)}
.plan.dark{background:var(--dark); color:var(--d-text); border-color:var(--dark)}
.plan.dark h3, .plan.dark .price{color:var(--white)}
.plan h3{font-size:1rem; letter-spacing:.3em}
.plan .price{font-family:var(--f-head); font-weight:300; font-size:clamp(2.25rem, 4vw, 3rem); line-height:1; color:var(--ink)}
.plan .price small{font-size:.8125rem; letter-spacing:.18em; margin-left:6px; text-transform:uppercase; color:var(--grey)}
.plan .price em{font-style:normal; font-size:.8125rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); display:block; margin-bottom:10px}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:.96875rem}
.plan li{display:grid; grid-template-columns:22px minmax(0,1fr)}
.plan li::before{content:""; width:12px; height:1px; background:currentColor; margin-top:.85em}
.plan .btn{justify-self:start; margin-top:8px}
@media (max-width:760px){ .pricing{grid-template-columns:1fr} .plan + .plan{border-left:0; border-top:1px solid var(--line)} }

/* Spec tables */
.models{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(32px, 5vw, 64px); margin-top:clamp(40px, 6vw, 64px); text-align:left}
.models h3{font-size:1rem; letter-spacing:.24em; margin-bottom:6px}
.models .checks{margin-top:20px}
.models .checks li:last-child{border-bottom:1px solid var(--line)}
.models-note{margin-top:clamp(32px, 4vw, 48px); border-left:2px solid var(--slate); text-align:left}
.models .tagline{font-size:.875rem; color:var(--grey); margin-bottom:18px}
.spec-table{width:100%; border-collapse:collapse; font-size:.9375rem}
.spec-table th, .spec-table td{padding:12px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.spec-table th{font-family:var(--f-head); font-weight:400; font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:var(--grey); width:42%; padding-right:16px}
.spec-table td{color:var(--ink)}
@media (max-width:760px){ .models{grid-template-columns:1fr} }

/* Tag row */
.tags{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 0; margin-top:clamp(36px, 5vw, 56px)}
.tags span{font-family:var(--f-head); font-size:.875rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); padding:0 22px; border-left:1px solid var(--line)}
.tags span:first-child{border-left:0}

/* Team */
.team{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:clamp(40px, 6vw, 64px); text-align:left}
.person{padding:24px 26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; gap:6px}
.person b{font-family:var(--f-head); font-weight:400; font-size:.9375rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.person span{font-size:.875rem; color:var(--grey)}
.person.gf b::before{content:""; display:inline-block; width:6px; height:6px; background:var(--slate); transform:rotate(45deg); margin-right:10px; vertical-align:middle}

/* CTA band */
.cta-band{background:var(--dark); color:var(--d-text); text-align:center; padding-block:clamp(80px, 10vw, 130px); position:relative; overflow:hidden}
.cta-band .eyebrow{color:var(--d-text)}
.cta-band h2{color:var(--white); font-weight:300; font-size:clamp(1.5rem, 3.4vw, 2.5rem); letter-spacing:.2em; margin-top:16px}
.cta-band p.lead{max-width:600px; margin:24px auto 0}
.cta-band .ctas{display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap; margin-top:40px; color:var(--white)}

/* Legal pages */
.legal .wrap{max-width:860px}
.legal h2{font-size:.9375rem; letter-spacing:.24em; margin-top:56px}
.legal h2:first-child{margin-top:0}
.legal p, .legal ul{margin-top:14px}
.legal ul{padding-left:20px}
.legal dl{display:grid; grid-template-columns:240px minmax(0,1fr); gap:10px 24px; margin:20px 0 0}
.legal dt{font-family:var(--f-head); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); padding-top:3px}
.legal dd{margin:0; color:var(--ink)}
@media (max-width:640px){ .legal dl{grid-template-columns:1fr; gap:2px} .legal dd{margin-bottom:12px} }
.notice{border:1px solid var(--line); background:var(--paper); padding:20px 24px; font-size:.9375rem; margin-top:28px}
.notice b{font-family:var(--f-head); font-weight:400; letter-spacing:.2em; text-transform:uppercase; font-size:.75rem; color:var(--ink); display:block; margin-bottom:6px}

/* Downloads */
.dl{max-width:900px; margin:clamp(40px, 6vw, 64px) auto 0; text-align:left}
.dl-row{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:20px; align-items:center; padding:26px 0; border-top:1px solid var(--line)}
.dl-row:last-child{border-bottom:1px solid var(--line)}
.dl-row svg{width:36px; height:36px; color:var(--ink); stroke-width:1}
.dl-row h3{font-size:.9375rem; letter-spacing:.2em}
.dl-row p{font-size:.9375rem; margin-top:4px}
@media (max-width:640px){ .dl-row{grid-template-columns:40px minmax(0,1fr)} .dl-row .btn{grid-column:1/-1; justify-self:start} }

/* Job detail */
.jobcols{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(28px, 4vw, 56px); margin-top:clamp(40px, 6vw, 64px); text-align:left}
.jobcols h3{font-size:.875rem; letter-spacing:.26em; padding-bottom:16px; border-bottom:1px solid var(--ink)}
.jobcols ul{list-style:none; margin:0; padding:0}
.jobcols li{padding:12px 0; border-bottom:1px solid var(--line); font-size:.96875rem}
@media (max-width:860px){ .jobcols{grid-template-columns:1fr} }

/* Network map (IT Infrastructures) */
.netmap{width:100%; max-width:540px; position:relative; z-index:1}
.netmap svg{display:block; width:100%; height:auto}
.netmap .box{fill:#101012; stroke:#cfcfd2; stroke-width:1}
.netmap .box.hl{stroke:#9fb3c4}
.netmap .wire{stroke:#5a5a5f; stroke-width:1; fill:none}
.netmap .pkt{stroke:#ffffff; stroke-width:2; fill:none; stroke-dasharray:3 14; stroke-linecap:round}
.netmap text{font-family:"Josefin Sans", sans-serif; font-size:9px; letter-spacing:.18em; fill:#b9b9bb; text-transform:uppercase}
@media (prefers-reduced-motion: no-preference){ .netmap .pkt{animation:dash 1.2s linear infinite} .netmap .pkt.rev{animation-direction:reverse} }
@keyframes dash{to{stroke-dashoffset:-34}}

/* CAD canvas (Software Engineering) */
.cad{width:100%; max-width:520px; aspect-ratio:1/1; position:relative; z-index:1}
.cad canvas{width:100%; height:100%; display:block}
.cad .meta{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; font-family:var(--f-head); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--d-text)}

/* Anchor offset under the fixed header */
[id]{scroll-margin-top:84px}

.scroll-x{overflow-x:auto}
.legal a, .prose a, .checks a, .consent a{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}


/* ---- Long German words: keep headings inside their columns ---- */
h1, h2, h3, .title{overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto}
.about .wrap > *, .lead-block .wrap > *, .split > *{min-width:0}
/* headings in half-width columns get a smaller size and tighter tracking */
.about .title, .lead-block .title{font-size:clamp(1.3rem, 2.4vw, 1.95rem); letter-spacing:.16em; line-height:1.3}
.split .pane-light h2{font-size:clamp(1.2rem, 2.1vw, 1.75rem); letter-spacing:.16em; line-height:1.3}
/* values: label above its text instead of a fixed narrow column */
.values div{grid-template-columns:1fr; gap:6px}
.values b{letter-spacing:.2em}
@media (max-width:560px){ .title{letter-spacing:.14em} .page-hero h1{letter-spacing:.1em} }

/* ---- Contact: calm info list + static field labels ---- */
.contact-grid{align-items:start}
.cinfo{margin:0; display:grid}
.cinfo > div{display:grid; grid-template-columns:130px minmax(0,1fr); gap:16px; padding:20px 0; border-top:1px solid var(--line); align-items:baseline}
.cinfo > div:last-child{border-bottom:1px solid var(--line)}
.cinfo dt{font-family:var(--f-head); font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grey)}
.cinfo dd{margin:0; color:var(--ink); font-size:1.0625rem; line-height:1.6}
.cinfo dd.big{font-family:var(--f-head); font-size:1.375rem; letter-spacing:.08em}
.arrow{display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-family:var(--f-head); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; margin-top:4px}
.arrow::after{content:""; width:24px; height:1px; background:currentColor; transition:width .35s}
.arrow:hover::after{width:44px}
@media (max-width:520px){ .cinfo > div{grid-template-columns:1fr; gap:4px} }

.hform{gap:26px}
.hform .row{gap:26px}
.hfield{display:flex; flex-direction:column}
.hfield label, .hfield.fixed label{position:static; order:-1; top:auto; font-size:.6875rem; letter-spacing:.24em; color:var(--grey); transition:none}
.hfield input:focus + label, .hfield input:not(:placeholder-shown) + label,
.hfield textarea:focus + label, .hfield textarea:not(:placeholder-shown) + label{top:auto; font-size:.6875rem; color:var(--ink)}
.hfield input, .hfield textarea, .hfield select{padding:10px 0 10px}
.hfield textarea{min-height:120px; resize:none}
.hform .send{margin-top:6px}

/* ---- Solution tiles: drawing on top, caption below (no overlap) ---- */
.work .art{inset:0 0 28% 0; padding:6% 8% 0}
.work .art svg{position:static; width:100%; height:100%}
.work .cap{inset:auto 0 0 0; height:28%; display:grid; place-content:center; justify-items:center; gap:10px; padding:0 16px;
  background:none; border-top:1px solid rgba(255,255,255,.08)}
.work:hover .cap, .work:focus-visible .cap{background:none}
.work .cap h3{white-space:nowrap; font-size:clamp(.95rem, 1.45vw, 1.2rem); letter-spacing:.24em; margin-right:-.24em}
.work:hover .cap h3{letter-spacing:.3em; margin-right:-.3em}
.work .cap span{opacity:1; transform:none; color:var(--d-text); font-size:.6875rem}
.work:hover .cap span{color:var(--white)}
.work .art{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.work:hover .art{transform:scale(1.04)}
@media (max-width:520px){ .work{aspect-ratio:4/4} }

/* ---- IT-Check ---- */
.check .wrap{max-width:900px}
.ck-intro{text-align:center}
.ck-intro .lead{max-width:640px; margin:28px auto 0}
.ck-start{margin-top:44px}
.ck-note{margin-top:28px; font-size:.875rem; color:var(--grey); text-align:center}
.ck-meta{display:flex; justify-content:space-between; gap:12px; font-family:var(--f-head); font-size:.75rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grey)}
.ck-progress{position:relative; height:1px; background:var(--line); margin-top:14px}
.ck-progress i{position:absolute; left:0; top:0; height:1px; width:0; background:var(--ink); transition:width .5s cubic-bezier(.2,.7,.2,1)}
.ck-q h2{font-family:var(--f-head); font-weight:300; text-transform:none; letter-spacing:.01em; font-size:clamp(1.5rem, 3.2vw, 2.25rem); line-height:1.3; margin-top:clamp(36px, 5vw, 56px); outline:none}
.ck-hint{margin-top:14px; color:var(--grey)}
.ck-opts{display:grid; gap:12px; margin-top:clamp(28px, 4vw, 44px)}
.ck-opt{display:grid; grid-template-columns:22px minmax(0,1fr); gap:16px; align-items:center; width:100%; text-align:left; padding:20px 24px; border:1px solid var(--line); background:var(--white);
  font:300 1.0625rem/1.5 var(--f-body); color:var(--ink); cursor:pointer; transition:border-color .25s, background-color .25s, color .25s}
.ck-opt::before{content:""; width:9px; height:9px; border:1px solid currentColor; transform:rotate(45deg); justify-self:center; transition:background-color .25s}
.ck-opt:hover{border-color:var(--ink)}
.ck-opt[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--white)}
.ck-opt[aria-pressed="true"]::before{background:currentColor}
.ck-nav{margin-top:28px}
.ck-back{background:none; border:0; padding:8px 0; cursor:pointer; font-family:var(--f-head); font-size:.75rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grey); display:inline-flex; align-items:center; gap:12px}
.ck-back::before{content:""; width:24px; height:1px; background:currentColor; transition:width .3s}
.ck-back:hover{color:var(--ink)}
.ck-back:hover::before{width:40px}
.ck-res-head{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(28px, 5vw, 64px); align-items:center}
.ring{position:relative; width:clamp(130px, 18vw, 170px); aspect-ratio:1; max-width:100%}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:2}
.ring .ring-bg{stroke:var(--line)}
.ring .ring-fg{stroke:var(--ink); stroke-linecap:butt}
.ring b{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--f-head); font-weight:300; font-size:clamp(2.25rem, 4vw, 3rem); color:var(--ink); font-variant-numeric:tabular-nums}
.ck-level{font-size:clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing:.18em; margin:10px 0 14px; outline:none}
.ck-list{list-style:none; margin:clamp(40px, 6vw, 64px) 0 0; padding:0; border-top:1px solid var(--line)}
.ck-list li{display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:18px; align-items:start; padding:20px 0; border-bottom:1px solid var(--line)}
.ck-list .st{width:10px; height:10px; transform:rotate(45deg); margin-top:.55em; border:1px solid var(--ink)}
.ck-list li.good .st{background:var(--ink)}
.ck-list li.mid .st{background:linear-gradient(135deg, var(--ink) 50%, transparent 50%)}
.ck-list li.bad .st{border-color:var(--slate); border-width:2px}
.ck-list .t{font-family:var(--f-head); font-size:.875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink)}
.ck-list .t em{font-style:normal; font-size:.6875rem; letter-spacing:.2em; color:var(--grey); margin-left:10px}
.ck-list li.bad .t em{color:var(--slate)}
.ck-list p + p{margin-top:4px; font-size:.96875rem}
.ck-list .arrow{white-space:nowrap; margin-top:2px}
.ck-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:44px}
.ck-res .ck-note{text-align:left}
@media (max-width:640px){
  .ck-res-head{grid-template-columns:1fr; justify-items:start}
  .ck-list li{grid-template-columns:24px minmax(0,1fr)}
  .ck-list .arrow{grid-column:2}
}
/* IT-Check teaser on the home page */
.check-teaser .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; text-align:left}
.check-teaser h2{margin-top:14px}
.check-teaser p.lead{margin:18px 0 0; max-width:56ch}
.check-teaser .ctas{margin-top:0}
@media (max-width:760px){ .check-teaser .wrap{grid-template-columns:1fr} }

/* ---- Interactive network map ---- */
.netx{background:var(--dark); color:var(--d-text)}
.netx-head{max-width:660px}
.netx-head .eyebrow{color:var(--d-text)}
.netx-head h2{color:var(--white); font-weight:300; font-size:clamp(1.4rem, 3vw, 2.25rem); letter-spacing:.18em; margin-top:14px}
.netx-head p:last-child{margin-top:16px}
.netx-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(28px, 4vw, 56px); margin-top:clamp(36px, 5vw, 56px); align-items:center}
.nx-map{overflow-x:auto; min-width:0}
.nx-map svg{display:block; width:100%; min-width:620px; height:auto; overflow:visible}
.nx-edge{fill:none; stroke:#34343a; stroke-width:1.2; transition:stroke .4s}
.nx-edge.vpn{stroke-dasharray:5 5}
.nx-edge.on{stroke:#9fb3c4}
.nx-pkt{fill:none; stroke:#ffffff; stroke-width:2; stroke-linecap:round; stroke-dasharray:2 16; opacity:.18; transition:opacity .4s}
.nx-pkt.on{opacity:1}
.nx-tag{font-family:"Josefin Sans", sans-serif; font-size:9px; letter-spacing:.2em; fill:#6f6f74}
.nx-node{cursor:pointer; outline:none; transition:opacity .4s}
.nx-node.dim{opacity:.45}
.nx-node .b{fill:#111113; stroke:#4a4a50; stroke-width:1; transition:stroke .3s, fill .3s}
.nx-node .halo{fill:none; stroke:#9fb3c4; stroke-width:1; opacity:0; transition:opacity .3s}
.nx-node .l{fill:#e9eef2; font-family:"Josefin Sans", sans-serif; font-size:12.5px; letter-spacing:.14em}
.nx-node .s{fill:#8c8c90; font-family:"Mulish", sans-serif; font-size:10px; letter-spacing:.04em}
.nx-node:hover .b, .nx-node:focus-visible .b{stroke:#ffffff}
.nx-node:focus-visible .halo{opacity:1; stroke:#ffffff}
.nx-node.on .b{fill:#1a242d; stroke:#9fb3c4}
.nx-node.on .halo{opacity:.7}
@media (prefers-reduced-motion: no-preference){
  .nx-pkt{animation:nxflow 1.4s linear infinite}
  @keyframes nxflow{to{stroke-dashoffset:-36}}
  .nx-node.on .halo{animation:nxhalo 2.2s ease-in-out infinite}
  @keyframes nxhalo{50%{opacity:.15}}
  .nx-panel.swap > *{animation:nxin .5s cubic-bezier(.2,.7,.2,1) both}
  @keyframes nxin{from{transform:translateY(8px); opacity:.3}}
}
.nx-panel{border-left:1px solid var(--d-line); padding-left:clamp(20px, 3vw, 40px); display:grid; gap:14px; align-content:start; min-height:380px}
.nx-panel .eyebrow{color:#6f6f74}
.nx-panel h3{color:var(--white); font-size:clamp(1.1rem, 2vw, 1.5rem); letter-spacing:.2em}
.nx-do{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px}
.nx-do li{display:grid; grid-template-columns:22px minmax(0,1fr); font-size:.96875rem; color:var(--white)}
.nx-do li::before{content:""; width:12px; height:1px; background:#9fb3c4; margin-top:.85em}
.nx-panel .arrow{color:var(--white); justify-self:start; margin-top:6px}
.nx-nav{display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; padding-top:18px; border-top:1px solid var(--d-line)}
.nx-nav button{background:none; border:0; padding:6px 0; cursor:pointer; font-family:var(--f-head); font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:var(--d-text)}
.nx-nav button:hover, .nx-nav button:focus-visible{color:var(--white)}
@media (max-width:900px){ .netx-grid{grid-template-columns:1fr} .nx-panel{border-left:0; border-top:1px solid var(--d-line); padding:28px 0 0; min-height:0} }