/* IoT Concepts – site stylesheet
   Fonts: Nunito Sans + Open Sans (SIL Open Font License), hosted locally – no Google requests. */

@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('../fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('../fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --blue: #004379;
  --blue-dark: #002e5b;
  --yellow: #ffd300;
  --text: #73797c;
  --text-dark: #5e5e5e;
  --grey-bg: #f8f8f8;
  --grey-bg2: #f6f6f7;
  --white: #fff;
  --max: 1140px;
  --gutter: 20px;
  --head: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  --body: 'Open Sans', 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--text); font: 500 16px/1.7 var(--body); }
img { max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--yellow); color: #000; padding: 8px 14px; }
.skip-link:focus { left: 10px; top: 10px; }
.ico { width: 1em; height: 1em; fill: var(--yellow); flex: none; }

h1, h2, h3, h4, h5, h6 { font-family: var(--head); font-weight: 700; color: var(--text); margin: 0 0 .5em; }
h1 { font-size: 60px; line-height: 1.1; }
h2 { font-size: 40px; line-height: 1.2; text-transform: uppercase; }
h3 { font-size: 25px; line-height: 1.25; }
h4, h5 { font-size: 25px; line-height: 1.3; }
h6 { font-size: 18px; }
p { margin: 0 0 20px; }

/* ---------------- Header ---------------- */
.masthead { background: var(--white); position: relative; z-index: 50; }
.topbar { display: flex; align-items: center; gap: 24px; min-height: 100px; padding-top: 6px; padding-bottom: 6px; }
.branding { flex: 0 0 auto; display: block; line-height: 0; }
.branding img { width: 240px; height: auto; }
.contact-strip { display: flex; flex: 1; justify-content: flex-end; gap: 36px; list-style: none; margin: 0; padding: 0;
  font: 700 15px/1.5 var(--head); }
.contact-strip li { display: flex; align-items: center; gap: 8px; }
.contact-strip .ico { font-size: 20px; }
.contact-strip a { color: var(--text); text-decoration: none; }
.contact-strip a:hover { color: var(--blue); }

.main-nav { background: var(--blue); }
.main-nav > ul { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0 auto; min-height: 60px; align-items: stretch; }
.main-nav li { position: relative; display: flex; align-items: center; }
.main-nav a { display: block; color: var(--white); text-decoration: none; font: 500 18px/1.2 var(--head); padding: 20px 18px; }
.main-nav > ul > li > a:hover, .main-nav > ul > li.act > a { color: var(--yellow); }
.main-nav .has-children > a { padding-right: 6px; }
.sub-toggle { background: none; border: 0; color: var(--white); cursor: pointer; padding: 0 12px 0 2px; height: 100%; }
.sub-toggle::after { content: ''; display: block; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -4px; }
.sub-nav { position: absolute; top: 100%; left: 0; min-width: 230px; list-style: none; margin: 0; padding: 0;
  background: var(--blue); box-shadow: 0 8px 20px rgba(0,0,0,.18); visibility: hidden; opacity: 0; transform: translateY(6px); transition: .15s; }
.sub-nav a { font-size: 17px; padding: 12px 20px; }
.sub-nav a:hover, .sub-nav .act > a { background: var(--yellow); color: var(--blue); }
.has-children:hover > .sub-nav, .has-children:focus-within > .sub-nav, .sub-nav.open { visibility: visible; opacity: 1; transform: none; }

.menu-toggle { display: none; margin-left: auto; align-items: center; gap: 8px; background: var(--blue); color: var(--white);
  border: 0; border-radius: 3px; padding: 10px 14px; font: 700 15px var(--head); cursor: pointer; }
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.menu-toggle-bars::before, .menu-toggle-bars::after { content: ''; position: absolute; left: 0; }
.menu-toggle-bars::before { top: -6px; } .menu-toggle-bars::after { top: 6px; }

@media (max-width: 1024px) {
  .contact-strip { gap: 18px; font-size: 13px; }
  .main-nav a { padding: 18px 12px; font-size: 16px; }
}
@media (max-width: 860px) {
  .topbar { min-height: 0; padding-top: 12px; padding-bottom: 12px; }
  .branding img { width: 180px; }
  .contact-strip { display: none; }
  .menu-toggle { display: inline-flex; }
  .main-nav { display: none; }
  .main-nav.open { display: block; }
  .main-nav > ul { flex-direction: column; padding: 0; }
  .main-nav li { flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); }
  .main-nav li > a { flex: 1; padding: 14px 20px; }
  .sub-toggle { padding: 14px 20px; height: auto; }
  .sub-nav { position: static; flex-basis: 100%; display: none; visibility: visible; opacity: 1; transform: none; box-shadow: none; background: var(--blue-dark); }
  .has-children:hover > .sub-nav, .has-children:focus-within > .sub-nav { display: none; }
  .sub-nav.open, .has-children .sub-nav.open { display: block; }
  .sub-nav a { padding-left: 36px; }
}

/* ---------------- Content blocks ----------------
   Page content consists of "bands" (full-width sections). Inside a band:
   .cols.cols-N > .col (grid), headings with .hl-* colours, .btn, details (accordion).
   An <img class="bg"> as first child of a band or column is used as its background image. */
.entry-content { overflow-wrap: break-word; }
.entry-content > :not(.band):not(.slider) { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.entry-content > :not(.band):not(.slider):first-child { margin-top: 50px; }
.entry-content > :not(.band):not(.slider):last-child { margin-bottom: 60px; }

.band { position: relative; isolation: isolate; padding: 60px max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
/* a plain band continuing a plain (white) band needs no extra top space – after a coloured/image band it does */
.band:not(.band-image):not(.band-grey):not(.band-yellow):not(.band-blue) + .band:not([class*="band-"]) { padding-top: 0; }
/* full page width (e.g. image tiles): 8px edge, 16px between tiles and between consecutive full-width rows */
.band-full { padding-left: 8px; padding-right: 8px; }
.band-full > .cols { gap: 16px; }
.band + .band-full:not(.band-grey):not(.band-yellow):not(.band-blue):not(.band-image) { padding-top: 0; }
.band-full:has(+ .band-full) { padding-bottom: 16px; }
.band-tight { padding-top: 30px; padding-bottom: 30px; }
.band-narrow > * { max-width: 820px; margin-left: auto; margin-right: auto; }
.band-grey { background: var(--grey-bg); }
.band-yellow { background: var(--yellow); }
.band-blue { background: var(--blue); color: var(--white); }
.band-blue h1, .band-blue h2, .band-blue h3, .band-blue h4 { color: var(--white); }
.band-image { color: var(--white); background: var(--blue); }
.band-image h1, .band-image h2, .band-image h3, .band-image h4 { color: var(--white); }
.band-hero { min-height: 340px; display: flex; flex-direction: column; justify-content: center; }
.band-image.band-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,46,91,.45), rgba(0,46,91,.1)); }
.band > :last-child, .col > :last-child { margin-bottom: 0; }

p:has(> img.bg:only-child) { margin: 0; height: 0; }
img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; margin: 0 !important; max-width: none; }

.cols { display: grid; gap: 30px; margin-bottom: 30px; align-items: start; }
.cols:last-child { margin-bottom: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 2 columns, left (text) wider than right (e.g. text + yellow box) */
.cols-2.cols-wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
/* 3 columns, middle one wider (e.g. image between two text columns), vertically centred */
.cols-3.cols-wide-center { grid-template-columns: minmax(0, 29.8fr) minmax(0, 42.1fr) minmax(0, 27.8fr); align-items: center; }
/* compact text: small grey lists (Leistungen application areas) */
.cols-compact { font-size: 12px; line-height: 22px; color: #73797c; }
.cols-compact h4 { font-size: 20px; margin-bottom: .4em; }
.cols-compact ul { margin: 0 0 18px; }
/* card around one heading + list block (Leistungen grey section) */
.text-card { background: var(--white); border: 1px solid #e3e5e6; padding: 24px 26px; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.text-card:last-child { margin-bottom: 0; }
.text-card ul { margin-bottom: 0; }
.cols.v-center { align-items: center; }
/* .cols-even: all tiles same width and height (row height = tallest tile); an incomplete last row is centred */
.cols-even { grid-auto-rows: 1fr; }
.cols-even > .col { align-self: stretch; }
@media (min-width: 768px) {
  .cols-3.cols-even { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cols-3.cols-even > .col { grid-column: span 2; }
  .cols-3.cols-even > .col:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .cols-3.cols-even > .col:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
/* two text columns separated by an empty spacer column: keep the spacer narrow */
.cols-3:has(> .col-empty:nth-child(2):nth-last-child(2)) { grid-template-columns: minmax(0, 48fr) minmax(0, 3.3fr) minmax(0, 48fr); column-gap: 10px; }
.col { position: relative; isolation: isolate; min-width: 0; }
.col-pad, .col-tile, .col-white, .col-yellow, .col-grey { padding: 30px; }
.col-white { background: var(--white); }
.col-grey { background: rgba(115,121,124,.03); }
.col-yellow { background: var(--yellow); color: var(--text); }
.col-yellow h1, .col-yellow h2, .col-yellow h3 { color: var(--text); }
.col-yellow h4, .col-yellow h5 { font-size: 20px; }
.col-hover { padding: 30px; border: 1px solid #e3e5e6; align-self: stretch; transition: background .2s, border-color .2s; }
.col-hover:hover { background: #f9f8f8; border-color: #d5d9db; }
/* tiles in one grid: every row as high as the tallest tile */
@media (min-width: 768px) { .cols:has(> .col-hover) { grid-auto-rows: 1fr; } }
.col-tile { color: var(--white); background: var(--blue); min-height: 100%; font-size: 15px; line-height: 1.5; align-self: stretch; }
.col-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0,67,121,.55); }
.col-tile h1, .col-tile h2, .col-tile h3, .col-tile h4, .col-tile a:not(.btn) { color: var(--white); }
.col-tile ul { padding-left: 1.1em; }

@media (max-width: 1024px) {
  .cols-4, .cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 46px; } h2 { font-size: 32px; }
}
@media (max-width: 767px) {
  body { font-size: 15px; }
  h1 { font-size: 32px; } h2 { font-size: 24px; } h3, h4, h5 { font-size: 20px; }
  .band { padding-top: 40px; padding-bottom: 40px; }
  .cols-2, .cols-2.cols-wide-left, .cols-3, .cols-3.cols-wide-center, .cols-4, .cols-5 { grid-template-columns: minmax(0, 1fr); }
  .col-empty { display: none; }
  .band-hero { min-height: 240px; }
}

/* text helpers */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; hyphens: auto; }
.hl-yellow { color: var(--yellow) !important; }
.hl-blue { color: var(--blue) !important; }
.hl-white { color: var(--white) !important; }
.hl-grey { color: var(--text) !important; }
[class*="hl-"] a:not(.btn) { color: inherit; text-decoration: none; }
.upper { text-transform: uppercase; }
.size-l { font-size: 40px; line-height: 1.1; }
.size-m { font-size: 30px; line-height: 1.25; }
.size-s { font-size: 25px; line-height: 1.3; }
@media (max-width: 767px) { .size-l { font-size: 26px; } .size-m, .size-s { font-size: 20px; } }
h2.text-center, h2.hl-yellow { line-height: 1.1; }
.lead { font: 300 34px/1.3 var(--head); }
.light { font-weight: 300; }
.small { font-size: 13px; }
.headline-icon { display: block; width: 182px; height: auto; margin: 0 0 14px; }
.text-center > .headline-icon, .headline-icon.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.diagram { display: block; width: 100%; max-width: 980px; margin: 0 auto; }
/* full-width band for a diagram that brings its own background (e.g. LoRaWAN on Digitalisierung) */
.band-diagram { padding: 0; background: #063f72; }
.band-diagram p { margin: 0; }
.band-diagram .diagram { max-width: 1240px; }

/* buttons */
.btn, .entry-content a.btn { display: inline-block; background: var(--blue); color: var(--white); text-decoration: none; border: 0; border-radius: 3px;
  font: 600 19px/48px var(--head); text-transform: uppercase; padding: 4px 25px; cursor: pointer; transition: background .2s; }
.btn:hover, .entry-content a.btn:hover { background: var(--text); color: var(--white); }
.btn-download::before { content: ''; display: inline-block; width: 14px; height: 16px; margin-right: 12px; vertical-align: -1px; background: currentColor;
  clip-path: polygon(35% 0, 65% 0, 65% 45%, 90% 45%, 50% 85%, 10% 45%, 35% 45%); }
.btn-download:hover, .entry-content a.btn-download:hover { background: var(--yellow); }
/* download button stacked with blue accordions (Lösungen pages): same full width, same gap */
.col:has(> details.acc-blue) > p:has(> .btn-download) { margin-bottom: 12px; }
.col:has(> details.acc-blue) .btn-download { display: block; position: relative; border-radius: 0; padding: 14px 44px 14px 18px;
  font: 700 17px/1.4 var(--head); text-transform: none; }
.col:has(> details.acc-blue) .btn-download::before { display: none; }
.col:has(> details.acc-blue) .btn-download::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; }
.col:has(> details.acc-blue) .btn-download:hover { background: var(--blue); color: var(--yellow); }
.btn-light, .entry-content a.btn-light { background: var(--white); color: var(--blue); }

/* icon boxes (Leistungen) */
.icon-box h3 { font-size: 33px; line-height: 1.3; margin-bottom: 20px; }
.icon-box p { color: var(--text-dark); }
@media (max-width: 767px) { .icon-box h3 { font-size: 24px; } }

/* lists with yellow check marks */
.icon-list { list-style: none; padding-left: 0; }
.icon-list li { position: relative; padding-left: 26px; margin-bottom: 6px; }
.icon-list li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px; border: solid var(--yellow); border-width: 0 0 3px 3px; transform: rotate(-45deg); }

/* team cards (Über uns) */
.team-card { background: rgba(115,121,124,.03); padding: 40px; }
.team-card img { display: block; margin-bottom: 20px; }
.team-card h3 { color: var(--blue); margin-bottom: 4px; }

.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 80px; }
.logo-row img { max-height: 120px; width: auto; }

/* accordions: <details class="mce-accordion"><summary>Title</summary>…</details> */
details { margin: 0 0 12px; border: 1px solid #e3e5e6; background: var(--white); color: var(--text); }
details > summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 18px; position: relative; font: 700 17px/1.4 var(--head); color: var(--blue); }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; }
details[open] > summary::after { content: '–'; }
details > :not(summary) { padding: 0 18px; }
details > :not(summary):first-of-type { padding-top: 4px; }
details > :last-child { padding-bottom: 14px; margin-bottom: 0; }
details.acc-blue { border: 0; }
details.acc-blue > summary { background: var(--blue); color: var(--white); }
details.acc-blue[open] > summary { color: var(--yellow); }
details.acc-blue > :not(summary):first-of-type { padding-top: 16px; }
details.acc-plain { border: 0; background: transparent; color: inherit; }
details.acc-plain > summary { padding: 6px 0 6px 26px; color: inherit; font-size: 16px; border-top: 1px solid currentColor; }
details.acc-plain > summary::after { left: 2px; right: auto; }
details.acc-plain > :not(summary) { padding-left: 0; padding-right: 0; }
.col-tile details.acc-plain > summary { border-color: rgba(255,255,255,.6); }

/* tables (legal pages) */
.entry-content table { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
.entry-content th, .entry-content td { border: 1px solid #e3e5e6; padding: 8px 10px; text-align: left; vertical-align: top; }

.draft-note { background: #fff4c2; border-left: 4px solid var(--yellow); padding: 10px 14px; }

/* ---------------- Slider ---------------- */
.slider { position: relative; overflow: hidden; background: var(--blue); color: var(--white); }
.slider-track { position: relative; aspect-ratio: 2 / 1; min-height: 320px; max-height: 750px; width: 100%; }
.slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--white);
  opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s 1s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s ease; z-index: 1; }
.slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.slide-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 70px; max-width: 1000px; }
.slide-overlay { max-width: min(520px, 80%); max-height: 260px; width: auto; height: auto; }
.slide-title { font: 700 60px/1.15 var(--head); color: var(--yellow); letter-spacing: -1px; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.slide-text { font: 600 28px/1.4 var(--head); text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.slider-prev, .slider-next { position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.25); cursor: pointer; transition: background .2s; }
.slider-prev { left: 16px; } .slider-next { right: 16px; }
.slider-prev:hover, .slider-next:hover { background: var(--yellow); }
.slider-prev::after, .slider-next::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border: solid var(--white); border-width: 0 3px 3px 0; }
.slider-prev::after { transform: translate(-30%, -50%) rotate(135deg); }
.slider-next::after { transform: translate(-70%, -50%) rotate(-45deg); }
.slider-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.slider-dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid var(--white); background: transparent; cursor: pointer; }
.slider-dots button[aria-current="true"] { background: var(--yellow); border-color: var(--yellow); }
@media (max-width: 767px) {
  .slider-track { aspect-ratio: auto; height: 300px; min-height: 0; }
  .slide-inner { padding: 30px 50px; }
  .slide-title { font-size: 30px; }
  .slide-text { font-size: 17px; }
  .slide-overlay { max-height: 120px; }
  .slider-prev, .slider-next { width: 36px; height: 36px; margin-top: -18px; }
  .slider-prev { left: 6px; } .slider-next { right: 6px; }
}
/* layer animation (as on the old site): after the 1s cross-fade the logo scales in, then the text,
   then the title fade in one after another. .slider-anim is set by site.js (not with reduced motion). */
.slider-anim .slide-overlay, .slider-anim .slide-title, .slider-anim .slide-text { opacity: 0; transition: opacity .3s; }
.slider-anim .slide-overlay { transform: scale(.9); transition: opacity .3s, transform 0s .3s; }
.slider-anim .is-play .slide-overlay { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.45,0,.55,1) .4s, transform 1s cubic-bezier(.45,0,.55,1) .4s; }
.slider-anim .is-play .slide-text { opacity: 1; transition: opacity 2s ease-in-out 1.1s; }
.slider-anim .is-play .slide-title { opacity: 1; transition: opacity 2s ease-in-out 2.4s; }
.slider-anim .is-play .slide-overlay ~ .slide-text { transition-delay: 1.4s; }
/* composed logo on the first slide (old Slider Revolution layers on a 1500×750 grid: box 522×199) */
.logo-anim { position: relative; display: block; width: 34.8vw; max-width: 522px; min-width: 260px; aspect-ratio: 522 / 199; }
.logo-anim img { position: absolute; height: auto; max-width: none; }
.slider-anim .logo-anim img { opacity: 0; transform: scale(.9); transition: opacity .3s, transform 0s .3s; }
.slider-anim .logo-anim img.dot { transform: scale(.8); }
.slider-anim .is-play .logo-anim img { opacity: 1; transform: none;
  transition: opacity 1s cubic-bezier(.45,0,.55,1) var(--d), transform 1s cubic-bezier(.45,0,.55,1) var(--d); }
.slider-anim .is-play .logo-anim img.dot { transition: opacity .5s cubic-bezier(.165,.84,.44,1) var(--d), transform .5s cubic-bezier(.165,.84,.44,1) var(--d); }
/* IoT sector graphic (slide 2): a 1500×750 stage centered in the track, scaled like the old slider grid */
.slider-track { container-type: size; }
.sectors, .waypoints { --w: min(100cqw, 200cqh); --u: calc(var(--w) / 1500); position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%); font-family: var(--head); }
.sectors > img, .sector-icon, .sector-label, .sector-box { position: absolute; }
.sectors img { display: block; width: 100%; height: auto; max-width: none; }
.sectors-pin, .sectors-logo { height: auto; }
.sector-icon { aspect-ratio: 1; cursor: pointer; }
.sector-label { color: var(--white); font-weight: 700; font-size: max(9px, calc(21 * var(--u))); line-height: 1.1; white-space: nowrap; }
.sector-label.is-center { text-align: center; }
.sector-box { left: 66.47%; width: 33.47%; padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(38 * var(--u));
  background: rgba(255,255,255,.82); border: 3px solid var(--yellow); border-radius: calc(16 * var(--u));
  color: #73797c; font-weight: 700; font-size: calc(16 * var(--u)); line-height: 1.25;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; z-index: 2; }
.sector-item { display: list-item; list-style: disc; }
.sector-icon:hover ~ .sector-box, .sector-label:hover ~ .sector-box { opacity: 1; visibility: visible; transition: opacity .3s; }
@media (max-width: 767px) { .sector-box { display: none; } }
.slider-anim .sector-icon { animation: sector-pulse 2s linear infinite alternate; }
@keyframes sector-pulse { to { transform: scale(.8); } }
.slider-anim .sectors-pin { opacity: 0; transform: translateY(-120%); transition: opacity .3s, transform 0s .3s; }
.slider-anim .sectors-logo { opacity: 0; transform: scale(.9); transition: opacity .3s, transform 0s .3s; }
.slider-anim .is-play .sectors-pin, .slider-anim .is-play .sectors-logo { opacity: 1; transform: none;
  transition: opacity 1s cubic-bezier(.45,0,.55,1) .3s, transform 1s cubic-bezier(.45,0,.55,1) .3s; }
/* waypoints layout (slides 3–5): dotted line graphic at its old grid position, text block right of center.
   As on the old site the line fades in first, then the text and the title drift in from the upper left. */
.waypoints-line { position: absolute; left: 2.07%; top: 3.73%; width: 72.07%; height: auto; max-width: none; }
.waypoints-text { position: absolute; left: 61%; top: 54.5%; transform: translate(-50%, -50%); width: max-content; max-width: 70%;
  display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); text-align: center; }
.waypoints .slide-title { font-size: max(26px, calc(60 * var(--u))); }
.waypoints .slide-text { font-size: max(16px, calc(28 * var(--u))); line-height: 1.43; }
@media (max-width: 767px) { .waypoints-text { left: 50%; max-width: 90%; } }
.slider-anim .waypoints-line { opacity: 0; transition: opacity .3s; }
.slider-anim .is-play .waypoints-line { opacity: 1; transition: opacity 2s ease-in-out .87s; }
.slider-anim .waypoints .slide-title { translate: calc(-124 * var(--u)) calc(-42 * var(--u)); }
.slider-anim .waypoints .slide-text { translate: calc(-112 * var(--u)) calc(-20 * var(--u)); }
.slider-anim .is-play .waypoints .slide-title { translate: none; transition: opacity 2s ease-in-out 2.4s, translate 2s ease-in-out 2.4s; }
.slider-anim .is-play .waypoints .slide-text { translate: none; transition: opacity 2s ease-in-out 1.1s, translate 2s ease-in-out 1.1s; }
@media (prefers-reduced-motion: reduce) { .slide, .slide.is-active { transition: none; } }

/* ---------------- Contact form ---------------- */
.contact-form { margin: 10px 0 0; }
.contact-form form { display: grid; gap: 14px; }
.contact-form label { display: grid; gap: 4px; font: 700 15px var(--head); color: var(--text); }
.contact-form input[type=text], .contact-form input[type=email], .contact-form input[type=tel], .contact-form textarea {
  width: 100%; font: 400 16px/1.5 var(--body); color: #333; padding: 10px 12px; border: 1px solid #cfd3d5; border-radius: 3px; background: var(--white); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); outline: 2px solid rgba(0,67,121,.2); }
.contact-form .check { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.5 var(--body); }
.contact-form .check input { margin-top: 4px; flex: none; }
.contact-form .btn { justify-self: start; }
.form-hint { font-size: 13px; margin: 0; }
.req { color: #c0392b; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { padding: 14px 18px; margin-bottom: 18px; border-radius: 3px; }
.form-notice ul { margin: 0; padding-left: 18px; }
.form-ok { background: #e7f5ea; border-left: 4px solid #2e8b57; color: #1d5a37; }
.form-error { background: #fdecea; border-left: 4px solid #c0392b; color: #7d241b; }

/* ---------------- Footer ---------------- */
.footer-main { position: relative; isolation: isolate; color: var(--white); background: var(--blue) var(--footer-bg, none) center / cover no-repeat;
  padding: 90px 0; border-bottom: 1px solid rgba(255,255,255,.15); font: 400 15px/1.6 var(--head); }
.footer-main::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0,67,121,.82); }
.footer-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px; }
.footer-col h2 { color: var(--white); font-size: 20px; line-height: 25px; text-transform: none; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.ico-line { display: flex; gap: 13px; align-items: baseline; }
.ico-line .ico { position: relative; top: 2px; }
.footer-main a { color: var(--white); text-decoration: none; }
.footer-main a:hover { color: var(--yellow); }
.footer-contact { display: flex; flex-wrap: wrap; gap: 0 36px; }
.footer-contact a { white-space: nowrap; }
.footer-badge img { max-width: 220px; display: block; margin-bottom: 10px; }
.footer-badge p { font-size: 11px; }
.footer-bottom { background: var(--text); color: var(--white); text-align: left; font: 400 12px/24px var(--head); padding: 8px 0; }
@media (max-width: 860px) {
  .footer-main { padding: 50px 0; }
  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* print */
@media print {
  .main-nav, .menu-toggle, .slider-prev, .slider-next, .slider-dots, .footer-main { display: none !important; }
  .band { padding: 20px 0; background: none !important; color: #000; }
  img.bg { display: none; }
}

/* Test installation banner (config 'environment' => 'test') */
.test-banner { position: sticky; top: 0; z-index: 2000; background: #c62828; color: #fff; text-align: center; font-weight: 700; font-size: 14px; line-height: 1.4; padding: 6px 12px; }