@font-face{font-family:'Plex';font-weight:400;font-display:swap;src:url(plex-400.woff2) format('woff2')}
@font-face{font-family:'Plex';font-weight:500;font-display:swap;src:url(plex-500.woff2) format('woff2')}
@font-face{font-family:'Plex';font-weight:600;font-display:swap;src:url(plex-600.woff2) format('woff2')}


:root{
  --paper:#F3F5F7; --white:#fff; --ink:#15202B; --blue:#0A84D0; --sky:#3BA3E8; --steel:#66788A; --line:#D3DAE2; --amber:#F5B301;
  --g:clamp(20px,4vw,44px);           /* page gutter */
  --bus:clamp(20px,4vw,44px);         /* x position of the bus line inside the frame */
  --lead:clamp(52px,7vw,96px);        /* content offset from the bus */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Plex',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.frame{max-width:1180px;margin:0 auto;padding:0 var(--g)}

/* ---------- header */
.top{position:sticky;top:0;z-index:20;background:rgba(243,245,247,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .frame{display:flex;align-items:center;gap:24px;height:72px}
.logo{display:block;height:44px;flex:none}.logo svg{height:100%;width:auto;display:block}
.nav{display:flex;gap:4px;margin-left:auto;font-size:.95rem;font-weight:500}
.nav a{text-decoration:none;padding:8px 12px;border-radius:6px}
.nav a:hover{background:#E6EBF0}
.langs{display:flex;gap:2px;font-size:.82rem;font-weight:600;color:var(--steel)}
.langs a{text-decoration:none;padding:6px 8px;border-radius:5px}
.langs a[aria-current]{color:var(--ink);background:#E6EBF0}
.call{flex:none;text-decoration:none;font-weight:600;font-size:.95rem;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;white-space:nowrap}

/* ---------- the bus: one line down the page, sections hang off it */
.riser{position:relative}
.riser::before{content:"";position:absolute;left:var(--bus);top:0;bottom:0;width:3px;background:var(--ink);border-radius:2px}
.feed{position:relative;padding:clamp(56px,8vw,104px) 0 0 var(--lead)}
.feed>h2{position:relative;margin:0 0 18px;font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.12;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
/* node on the bus + short feeder line to the heading */
.feed>h2::before{content:"";position:absolute;left:calc(var(--bus) - var(--lead) - 7.5px);top:.42em;width:18px;height:18px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px var(--paper)}
.feed>h2::after{content:"";position:absolute;left:calc(var(--bus) - var(--lead) + 14px);top:calc(.42em + 7.5px);width:calc(var(--lead) - var(--bus) - 26px);height:3px;background:var(--blue);border-radius:2px}
.intro{max-width:38em;color:#3C4B5A;margin:0 0 30px;font-size:1.06rem}

/* ---------- hero */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(40px,6vw,84px) 0 clamp(20px,3vw,36px) var(--lead)}
h1{margin:0 0 22px;font-size:clamp(1.7rem,4.3vw,3.25rem);overflow-wrap:break-word;line-height:1.04;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
.hero p{margin:0 0 30px;font-size:clamp(1.08rem,1.9vw,1.25rem);line-height:1.55;color:#3C4B5A;max-width:31em}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;font:inherit;font-weight:600;text-decoration:none;border-radius:9px;padding:14px 22px;border:2px solid var(--ink);cursor:pointer;line-height:1.2}
.btn.solid{background:var(--ink);color:#fff}.btn.solid:hover{background:#0D1620}
.btn.line{background:transparent;color:var(--ink)}.btn.line:hover{background:#E6EBF0}
.btn.amber{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.sld{width:100%;height:auto;display:block}
.sld .w{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sld .b{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round}
.sld text{font-family:'Plex',sans-serif;font-size:14.5px;font-weight:500;fill:var(--ink)}
.sld .s{font-size:12.5px;font-weight:400;fill:var(--steel)}
.sld .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.6,0,.2,1) .2s forwards}
.sld .d2{animation-delay:.9s}.sld .d3{animation-delay:1.5s}
.sld .pop{opacity:0;animation:pop .5s ease 1.9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes pop{to{opacity:1}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sld .draw{animation:none;stroke-dashoffset:0}.sld .pop{animation:none;opacity:1}}

/* ---------- services: feeders, not cards */
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;gap:10px 32px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.svc h3{margin:0;font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.svc p{margin:0;color:#3C4B5A}
.svc a{font-weight:600;color:var(--blue);text-underline-offset:4px;white-space:nowrap}

/* ---------- timeline (a real sequence) */
.years{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-top:3px solid var(--ink)}
.years li{position:relative;padding:22px 24px 0 0}
.years li::before{content:"";position:absolute;left:0;top:-10.5px;width:18px;height:18px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.years li:last-child::before{background:var(--blue);border-color:var(--blue)}
.years b{display:block;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
.years span{color:#3C4B5A;font-size:.98rem;display:block;max-width:17em}

/* ---------- projects */
.work{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
figure{margin:0}
figure img,.slot{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:#DDE3E9}
figcaption{margin-top:12px;font-size:.98rem;color:#3C4B5A}
figcaption b{display:block;color:var(--ink);font-weight:600;font-size:1.08rem;margin-bottom:2px}
.slot{display:grid;place-items:center;text-align:center;padding:20px;color:var(--steel);font-size:.95rem;border:2px dashed #B4C0CC;background:repeating-linear-gradient(135deg,#E9EDF1 0 14px,#E3E8ED 14px 28px)}
.side{display:grid;gap:clamp(20px,3vw,32px)}
.more{margin:34px 0 0;padding:0;list-style:none;columns:2;column-gap:40px}
.more li{break-inside:avoid;padding:12px 0;border-top:1px solid var(--line);color:#3C4B5A;font-size:.98rem}
.more b{color:var(--ink);font-weight:600}

/* ---------- knx */
.knx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.knx a{display:block;text-decoration:none;color:#fff;border-radius:12px;padding:24px 22px 22px;min-height:168px}
.knx a b{display:block;font-size:1.3rem;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.knx a span{display:block;font-size:.96rem;opacity:.86;line-height:1.5}
.knx .h{background:#0A1628}.knx .v{background:#0F1D1A}.knx .a{background:#1C1210}
.knx a:hover{outline:3px solid var(--sky);outline-offset:2px}

/* ---------- clients */
.clients{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.clients li{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:500;font-size:.96rem}

/* ---------- emergency */
.alarm{margin-top:clamp(56px,8vw,104px);background:var(--ink);color:#fff}
.alarm .frame{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(36px,5vw,56px)}
.alarm h2{margin:0 0 8px;font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.alarm p{margin:0;color:#C2CDD8;max-width:36em}
.alarm .btn{font-size:1.25rem;padding:16px 26px}

/* ---------- contact */
.contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px)}
.addr{font-style:normal;display:grid;gap:16px;align-content:start}
.addr div span{display:block;color:var(--steel);font-size:.9rem}
.addr a{font-weight:600;text-decoration:none;border-bottom:2px solid var(--line)}
form{display:grid;gap:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-size:.9rem;font-weight:600;margin-bottom:5px}
input,textarea{width:100%;font:inherit;color:var(--ink);background:var(--white);border:1px solid #BCC7D2;border-radius:8px;padding:12px 13px}
textarea{min-height:140px;resize:vertical}
.hp{position:absolute;left:-9999px}
.fine{font-size:.86rem;color:var(--steel);margin:0}

footer{margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--line);font-size:.92rem;color:var(--steel)}
footer .frame{display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;padding-top:26px;padding-bottom:34px}
footer a{color:var(--ink)}

@media (max-width:900px){
  .nav{display:none}.langs{margin-left:auto}
  .hero,.work,.contact{grid-template-columns:minmax(0,1fr)}
  .svc li{grid-template-columns:minmax(0,1fr)}
  .years{grid-template-columns:1fr 1fr;row-gap:34px;border-top:0}
  .years li{border-top:3px solid var(--ink)}
  .knx{grid-template-columns:minmax(0,1fr)}.knx a{min-height:0}
  .more{columns:1}
  .alarm .frame{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  :root{--lead:44px}
  .top .frame{height:62px;gap:12px}.logo{height:36px}
  .call{padding:9px 12px;font-size:.88rem}
  .langs a:not([aria-current]){display:none}
  .row{grid-template-columns:1fr}
  .feed>h2::after{display:none}
  .btn{width:100%;text-align:center}
}

/* ---------- inner pages */
.hero.inner{grid-template-columns:minmax(0,1fr);padding-bottom:0}
.hero.inner h1{max-width:17em}.hero.inner p{max-width:40em;margin-bottom:0}
.txt{max-width:42em;color:#3C4B5A;margin:0 0 16px}
.list,.steps{max-width:46em;margin:0 0 8px;padding:0;list-style:none;border-top:1px solid var(--line)}
.list li,.steps li{position:relative;padding:13px 0 13px 30px;border-bottom:1px solid var(--line);color:#3C4B5A}
.list li::before{content:"";position:absolute;left:4px;top:1.42em;width:12px;height:3px;border-radius:2px;background:var(--blue)}
.steps{counter-reset:s}.steps li{counter-increment:s;padding-left:44px}
.steps li::before{content:counter(s);position:absolute;left:0;top:11px;width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:600;font-size:.9rem;color:var(--ink)}
.rows{margin:0 0 8px;border-top:1px solid var(--line)}
.rows>div{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);gap:6px 32px;padding:20px 0;border-bottom:1px solid var(--line)}
.rows dt{font-weight:600;font-size:1.12rem;letter-spacing:-.01em}.rows dd{margin:0;color:#3C4B5A}
.tbl{width:100%;max-width:46em;border-collapse:collapse;margin:0 0 8px}
.tbl td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}.tbl tr:first-child td{border-top:1px solid var(--line)}
.tbl td:last-child{text-align:right;color:#3C4B5A;padding-left:20px}
.figure{max-width:46em;margin:6px 0 26px}
.figure.small{max-width:30em}
.golink{display:inline-block;margin:14px 0 0;font-weight:600;color:var(--blue);text-underline-offset:4px}
.feed>.txt+.knx{margin-top:22px}
/* ---------- small partner images */
.mini{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 16px}
.mini img{border-radius:8px;max-width:100%;height:auto;border:1px solid var(--line)}
/* ---------- form result */
.formmsg{margin:0;padding:13px 15px;border-radius:8px;font-weight:500;border:1px solid #9FD3B4;background:#EAF7EF;color:#14532D}
.formmsg.err{border-color:#E7B0A8;background:#FCEEEC;color:#7A1F14}
/* ---------- photo galleries */
.figure.wide{max-width:none}
.figure.wide img{aspect-ratio:auto;object-fit:contain;border:1px solid var(--line);background:var(--white)}
.figure img{aspect-ratio:4/3}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0 8px}
.gal.n4,.gal.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gal figure img{aspect-ratio:4/3}
.gal figcaption{margin-top:9px;font-size:.93rem;color:#3C4B5A}
@media (max-width:900px){.gal,.gal.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gal,.gal.n4,.gal.n2{grid-template-columns:minmax(0,1fr)}}
/* ---------- mobile menu */
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font-weight:600;font-size:.92rem;padding:9px 12px;border:2px solid var(--ink);border-radius:8px;user-select:none}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:calc(100% + 10px);background:var(--white);border:1px solid var(--line);border-radius:12px;padding:8px;min-width:230px;display:grid;box-shadow:0 12px 30px rgba(21,32,43,.14)}
.menu nav a{text-decoration:none;padding:11px 12px;border-radius:7px;font-weight:500}.menu nav a:hover{background:#EEF2F5}
.nav a[aria-current]{background:#E6EBF0}
.nav{font-size:.9rem;gap:0}.nav a{padding:8px 9px;white-space:nowrap}.top .frame{gap:16px}
@media (max-width:1240px){.nav{display:none}.langs{margin-left:auto}.menu{display:block}}
@media (max-width:900px){.rows>div{grid-template-columns:minmax(0,1fr)}}
.years span,.svc p,.txt,.rows dd,.list li{overflow-wrap:break-word;hyphens:auto}
@media (max-width:560px){.call{display:none}.years{grid-template-columns:minmax(0,1fr)}.tbl,.tbl tbody,.tbl tr,.tbl td{display:block}.tbl tr{padding:11px 0;border-bottom:1px solid var(--line)}.tbl tr:first-child{border-top:1px solid var(--line)}.tbl td,.tbl tr:first-child td{padding:0;border:0}.tbl td:first-child{font-weight:500;color:var(--ink)}.tbl td:last-child{text-align:left;padding-left:0;white-space:normal}}
/* ---------- language switch: flags */
.langs{gap:9px;align-items:center}
.langs a{font-size:0;padding:0;width:27px;height:18px;border-radius:3px;background:center/cover no-repeat;box-shadow:0 0 0 1px rgba(21,32,43,.22);opacity:.85}
.langs a:hover{opacity:1}
.langs a[aria-current]{opacity:1;box-shadow:0 0 0 1px rgba(21,32,43,.22),0 0 0 3px #F3F6F9,0 0 0 5px #0A84D0}
.langs a[hreflang=el]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 18'%3E%3Cpath fill='%230D5EAF' d='M0 0h27v18H0z'/%3E%3Cpath stroke='%23fff' stroke-width='2' d='M5 0v10M0 5h10M10 3h17M10 7h17M0 11h27M0 15h27'/%3E%3C/svg%3E")}
.langs a[hreflang=en]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")}
.langs a[hreflang=de]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath d='M0 0h5v3H0z'/%3E%3Cpath fill='%23D00' d='M0 1h5v2H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h5v1H0z'/%3E%3C/svg%3E")}
@media (max-width:560px){.langs{gap:8px}.langs a:not([aria-current]){display:block}.langs a{width:24px;height:16px}}
@media (max-width:400px){.logo{height:30px}.top .frame{gap:9px}.langs{gap:7px}.langs a{width:21px;height:14px}.menu summary{padding:7px 9px;font-size:.86rem}}
@media (max-width:900px){.svc a{white-space:normal}}
/* ---------- slideshow of visualisation screens */
.slides{position:relative;margin:22px 0 8px}
.slides .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0}
.slides .track::-webkit-scrollbar{display:none}
.slides .slide{flex:0 0 100%;min-width:0;scroll-snap-align:start}
.slides .slide img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.slides .cap{margin:10px 0 0;padding-right:104px;font-size:.93rem;color:#3C4B5A;min-height:3.4em}
.slides .cap b{display:block;color:var(--ink);font-weight:600}
.slides .ctl{position:absolute;right:0;bottom:0;display:flex;gap:8px}
.slides .ctl button{width:42px;height:42px;border-radius:50%;border:2px solid var(--ink);background:var(--white);color:var(--ink);font:inherit;font-size:1.25rem;line-height:1;cursor:pointer}
.slides .ctl button:hover{background:var(--ink);color:var(--white)}
@media (max-width:560px){.slides .cap{padding-right:0;min-height:0}.slides .ctl{position:static;margin-top:10px}}