/* ==========================================================================
   it.modutech-solutions.at — Modutech Solutions e.U.
   Dachseite: Software, Systeme, Anlagen, Infrastruktur, Betreuung.

   Gestaltungsrahmen
   - Grundton dunkel gerahmt, helle Lesestrecken in der Mitte.
   - Eine Marken-Signalfarbe (Orange) fuer Handlung und Fuehrung.
   - Sechs Bereichsfarben ausschliesslich zur Gliederung der Leistungen.
   - Bewegung nur ueber transform und opacity, vollstaendig abschaltbar.
   ========================================================================== */

/* ---------- Schriften, selbst ausgeliefert ---------- */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url('../fonts/archivo-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:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plexmono-400-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plexmono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plexmono-500-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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plexmono-600-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;}

/* ---------- Token ---------- */
:root{
  --ink:#0A0E13;
  --ink-2:#111821;
  --ink-3:#18212B;
  --ink-4:#202C37;

  --paper:#F4F5F3;
  --paper-2:#FFFFFF;
  --paper-3:#E9EBE8;

  --text:#0E1418;
  --text-2:#3D4950;
  --muted:#6C7A83;
  --line:#D6DBD9;
  --line-2:#E5E8E5;

  --d-text:#ECF0F2;
  --d-text-2:#A6B3BB;
  --d-muted:#6E7F89;
  --d-line:#1F2B34;
  --d-line-2:#161F27;

  --sig:#E25A16;          /* Marken-Signal, hoechstens 5 % der Flaeche */
  --sig-2:#FF7433;
  --sig-d:#B7460E;

  /* Bereichsfarben — nur zur Gliederung der Leistungen */
  --c-soft:#5AA9FF;
  --c-log:#3FC98A;
  --c-ki:#A98BFF;
  --c-iot:#FF7B3D;
  --c-inf:#4FD6E8;
  --c-sec:#F2C14E;

  --ok:#2C6E4B;
  --ok-l:#4FBF85;

  --e:cubic-bezier(.22,1,.36,1);
  --t-ui:240ms;
  --t-sec:480ms;
  --t-story:900ms;

  --pad:clamp(1.15rem,4vw,2.5rem);
  --maxw:76rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.07;text-wrap:balance}
p{margin:0 0 1rem}
a{color:inherit}
:focus-visible{outline:3px solid var(--sig);outline-offset:3px;border-radius:2px}
::selection{background:var(--sig);color:#fff}

.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}

/* ---------- Abschnitte ---------- */
section{position:relative}
.sec{padding:clamp(4rem,9vw,7.5rem) 0}
.sec-dark{background:var(--ink);color:var(--d-text)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff}
.sec-line{border-top:1px solid var(--line)}
.sec-dark.sec-line{border-top-color:var(--d-line)}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sig);
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:7rem}
.sec-dark .eyebrow::after{background:var(--d-line)}

h2{font-size:clamp(1.85rem,4.4vw,3rem)}
.lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--text-2);max-width:60ch;margin-top:1.1rem}
.sec-dark .lead{color:var(--d-text-2)}
.sechead{max-width:64rem;margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.sechead-row{display:grid;gap:1.4rem;align-items:end}
@media(min-width:900px){.sechead-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}

/* ---------- Schaltflaechen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:'Archivo',sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.01em;
  padding:.95rem 1.6rem;border:2px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;
  transition:background var(--t-ui) var(--e),color var(--t-ui) var(--e),border-color var(--t-ui) var(--e),transform var(--t-ui) var(--e);
}
.btn-pri{background:var(--sig);color:#fff;border-color:var(--sig)}
.btn-pri:hover{background:var(--sig-2);border-color:var(--sig-2)}
.btn-gho{background:transparent;color:var(--d-text);border-color:#39474F}
.btn-gho:hover{border-color:var(--d-text-2);color:#fff}
.btn-lite{background:transparent;color:var(--text);border-color:var(--line)}
.btn-lite:hover{border-color:var(--text)}
.btn .ar{transition:transform var(--t-ui) var(--e)}
.btn:hover .ar{transform:translateX(3px)}
.btn[disabled]{opacity:.55;pointer-events:none}

.tlink{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;font-weight:700;
  border-bottom:2px solid var(--sig);padding-bottom:2px;
  transition:gap var(--t-ui) var(--e),color var(--t-ui) var(--e);
}
.tlink:hover{gap:.75rem;color:var(--sig)}

/* ---------- Fortschrittslinie, Kopfleiste ---------- */
.progress{position:fixed;inset:0 auto auto 0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--sig);z-index:130;will-change:transform}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  background:rgba(10,14,19,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--d-line);
  transform:translateY(-102%);transition:transform var(--t-sec) var(--e);
}
.nav.show{transform:translateY(0)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:.65rem var(--pad);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav .btn{padding:.58rem 1.1rem;font-size:.9rem}
.nav-links{display:none;gap:1.4rem;margin-left:auto;margin-right:.4rem}
@media(min-width:1040px){.nav-links{display:flex}}
.nav-links a{
  font-family:'IBM Plex Mono',monospace;font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--d-text-2);text-decoration:none;padding:.3rem 0;border-bottom:1px solid transparent;
  transition:color var(--t-ui) var(--e),border-color var(--t-ui) var(--e);
}
.nav-links a:hover,.nav-links a.act{color:#fff;border-bottom-color:var(--sig)}

.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;font-weight:800;letter-spacing:-.02em;font-size:1rem;flex:none}
.logo .lm{font-family:'IBM Plex Mono',monospace;font-size:.6rem;font-weight:500;letter-spacing:.14em;color:var(--d-muted);text-transform:uppercase;display:block;line-height:1.1;margin-top:1px}
.logo svg{flex:none}

/* Dauerhafter Handlungsbalken am Telefon */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:115;display:flex;gap:1px;background:var(--d-line);
  transform:translateY(102%);transition:transform var(--t-sec) var(--e);
}
.mcta.show{transform:none}
@media(min-width:820px){.mcta{display:none}}
.mcta a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem .6rem;
  text-decoration:none;font-weight:700;font-size:.92rem;background:var(--ink-2);color:var(--d-text);
}
.mcta a.pri{background:var(--sig);color:#fff}

/* ==========================================================================
   S01  Kopfbereich
   ========================================================================== */
.hero{background:var(--ink);color:var(--d-text);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60rem 34rem at 78% 34%,rgba(226,90,22,.11),transparent 62%),
    radial-gradient(44rem 28rem at 12% 88%,rgba(90,169,255,.07),transparent 66%);
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000 25%,transparent 100%);
          mask-image:radial-gradient(80% 70% at 50% 30%,#000 25%,transparent 100%);
}
.hero-in{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(5.5rem,11vw,8.5rem) var(--pad) clamp(3rem,6vw,4.5rem);
  display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);align-items:center;min-height:min(88vh,62rem);
}
@media(min-width:980px){.hero-in{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}}
.hero h1{font-size:clamp(2.35rem,6.1vw,4.4rem);line-height:1.0;letter-spacing:-.038em}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln > span{display:block;transform:translateY(104%);animation:rise var(--t-story) var(--e) forwards}
.hero h1 .ln:nth-child(2) > span{animation-delay:90ms}
.hero h1 .ln:nth-child(3) > span{animation-delay:180ms}
.hero h1 em{font-style:normal;color:var(--sig)}
@keyframes rise{to{transform:translateY(0)}}
.hero-sub{font-size:clamp(1.02rem,1.7vw,1.2rem);color:var(--d-text-2);max-width:46ch;margin:1.6rem 0 2rem;opacity:0;animation:fadein var(--t-sec) var(--e) 520ms forwards}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;opacity:0;animation:fadein var(--t-sec) var(--e) 660ms forwards}
.hero-trust{
  margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--d-line);
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-bottom:0;
  font-family:'IBM Plex Mono',monospace;font-size:.69rem;letter-spacing:.06em;color:var(--d-muted);text-transform:uppercase;
  opacity:0;animation:fadein var(--t-sec) var(--e) 880ms forwards;list-style:none;padding-left:0;
}
.hero-trust li{display:flex;align-items:center;gap:.45rem}
.hero-trust .dot{width:5px;height:5px;background:var(--ok-l);border-radius:50%;flex:none}
@keyframes fadein{to{opacity:1}}
.hero-art{position:relative;opacity:0;animation:fadein var(--t-story) var(--e) 420ms forwards}
.hero-art svg{display:block;width:100%;height:auto;overflow:visible}
.hero-scroll{
  position:absolute;left:var(--pad);bottom:1.3rem;display:flex;align-items:center;gap:.6rem;
  font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--d-muted);
}
.hero-scroll .bar{width:1px;height:26px;background:linear-gradient(var(--sig),transparent);animation:slide 2.2s var(--e) infinite}
@keyframes slide{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
@media(max-width:979px){.hero-scroll{display:none}}

/* Fliessende Punkte auf den Leitungen */
.flow{offset-rotate:0deg;animation:flowrun 3.4s linear infinite}
@keyframes flowrun{from{offset-distance:0%}to{offset-distance:100%}}
@supports not (offset-path:path('M0 0L1 1')){.flow{display:none}}

/* ==========================================================================
   S02  Kennen Sie das?
   ========================================================================== */
.pains{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:0;padding:0;list-style:none}
@media(min-width:700px){.pains{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.pains{grid-template-columns:repeat(3,1fr)}}
.pain{
  background:var(--paper-2);padding:clamp(1.3rem,2.6vw,1.8rem);position:relative;
  opacity:0;transform:translateY(16px);
  transition:opacity var(--t-sec) var(--e),transform var(--t-sec) var(--e),background var(--t-ui) var(--e);
}
.on-view .pain,.no-motion .pain{opacity:1;transform:none}
.pain:nth-child(2){transition-delay:70ms}.pain:nth-child(3){transition-delay:140ms}
.pain:nth-child(4){transition-delay:210ms}.pain:nth-child(5){transition-delay:280ms}.pain:nth-child(6){transition-delay:350ms}
.pain::before{content:"";position:absolute;left:0;top:0;width:0;height:2px;background:var(--sig);transition:width var(--t-sec) var(--e)}
.pain:hover::before{width:100%}
.pain .qm{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;color:var(--muted);display:block;margin-bottom:.7rem}
.pain p{font-size:clamp(1.02rem,1.9vw,1.15rem);font-weight:700;letter-spacing:-.018em;line-height:1.3;margin:0 0 .55rem}
.pain .ex{font-size:.92rem;color:var(--text-2);font-weight:400;margin:0;letter-spacing:0}
.pain-after{
  margin-top:clamp(2rem,4vw,3rem);border-left:3px solid var(--sig);padding-left:1.2rem;
  font-size:clamp(1.08rem,2.2vw,1.4rem);font-weight:700;letter-spacing:-.02em;max-width:52ch;line-height:1.3;
}
.pain-after span{display:block;font-size:.95rem;font-weight:400;color:var(--text-2);letter-spacing:0;margin-top:.5rem;line-height:1.6}

/* ==========================================================================
   S03  Leistungen
   ========================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.6rem}
.filters button{
  font-family:'IBM Plex Mono',monospace;font-size:.73rem;letter-spacing:.05em;
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;border:1px solid var(--d-line);color:var(--d-text-2);padding:.5rem .85rem;cursor:pointer;border-radius:2px;
  transition:border-color var(--t-ui) var(--e),color var(--t-ui) var(--e),background var(--t-ui) var(--e);
}
.filters button:hover{border-color:var(--d-muted);color:#fff}
.filters button[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink)}
.filters .cd{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.filters button[data-cat="soft"] .cd{background:var(--c-soft)}
.filters button[data-cat="log"] .cd{background:var(--c-log)}
.filters button[data-cat="ki"] .cd{background:var(--c-ki)}
.filters button[data-cat="iot"] .cd{background:var(--c-iot)}
.filters button[data-cat="inf"] .cd{background:var(--c-inf)}
.filters button[data-cat="sec"] .cd{background:var(--c-sec)}

.svc-count{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--d-muted);margin:0 0 1.4rem}
.svc-count b{color:var(--sig);font-weight:500}

.svcs{display:grid;grid-template-columns:1fr;gap:1px;background:var(--d-line);border:1px solid var(--d-line)}
@media(min-width:640px){.svcs{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.svcs{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1340px){.svcs{grid-template-columns:repeat(4,1fr)}}
.svc{
  background:var(--ink-2);padding:1.25rem 1.2rem 1.35rem;display:flex;flex-direction:column;position:relative;min-width:0;
  --c:var(--d-muted);
  transition:background var(--t-ui) var(--e),opacity var(--t-sec) var(--e),transform var(--t-sec) var(--e);
}
.svc[data-cat="soft"]{--c:var(--c-soft)}
.svc[data-cat="log"]{--c:var(--c-log)}
.svc[data-cat="ki"]{--c:var(--c-ki)}
.svc[data-cat="iot"]{--c:var(--c-iot)}
.svc[data-cat="inf"]{--c:var(--c-inf)}
.svc[data-cat="sec"]{--c:var(--c-sec)}
.svc:hover{background:var(--ink-3)}
.svc.hide{display:none}
.svc.in{opacity:0;transform:translateY(10px)}
.svc-ic{
  width:40px;height:40px;border:1px solid var(--d-line);display:grid;place-items:center;margin-bottom:.95rem;flex:none;
  transition:border-color var(--t-ui) var(--e),background var(--t-ui) var(--e);
}
.svc-ic svg{width:21px;height:21px;stroke:var(--c);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.svc:hover .svc-ic{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.svc .cat{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c);display:block;margin-bottom:.4rem}
.svc h3{font-size:1.06rem;margin:0 0 .5rem;line-height:1.24;color:#fff}
.svc p{font-size:.9rem;color:var(--d-text-2);margin:0 0 .9rem;line-height:1.55}
.svc .tags{margin:auto 0 0;padding:.7rem 0 0;list-style:none;border-top:1px solid var(--d-line-2);display:flex;flex-wrap:wrap;gap:.3rem .7rem}
.svc .tags li{font-family:'IBM Plex Mono',monospace;font-size:.64rem;color:var(--d-muted);line-height:1.5}
.svc .tags li::before{content:"· ";color:var(--c)}
.svc .go{
  position:absolute;top:1.1rem;right:1.1rem;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c);text-decoration:none;border:1px solid currentColor;padding:.14rem .4rem;
  opacity:.75;transition:opacity var(--t-ui) var(--e),background var(--t-ui) var(--e)
}
.svc .go:hover{opacity:1;background:color-mix(in srgb,var(--c) 18%,transparent)}
.svc-note{font-size:.88rem;color:var(--d-muted);margin:1.4rem 0 0;max-width:62ch}
.svc-note a{color:var(--sig)}

/* ==========================================================================
   S04  Alles haengt zusammen — Systemkarte
   ========================================================================== */
.mapwrap{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:start}
@media(min-width:1000px){.mapwrap{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}
.mapbox{border:1px solid var(--line);background:var(--paper-2);position:relative;overflow:hidden}
.mapbox svg{display:block;width:100%;height:auto}
.mapbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.6rem .9rem;border-bottom:1px solid var(--line);background:var(--paper-3);
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.mapbar .hint{margin-left:auto;text-transform:none;letter-spacing:.02em}
.nd{cursor:pointer}
.nd .nbx{fill:var(--paper-2);stroke:#C3CAC7;stroke-width:1.4;transition:stroke var(--t-ui) var(--e),fill var(--t-ui) var(--e)}
.nd .nlb{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:#54616A;letter-spacing:.04em;transition:fill var(--t-ui) var(--e)}
.nd .nic{stroke:#8C979D;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t-ui) var(--e)}
.nd:hover .nbx,.nd.on .nbx{stroke:var(--sig);fill:#fff}
.nd:hover .nlb,.nd.on .nlb{fill:var(--text)}
.nd:hover .nic,.nd.on .nic{stroke:var(--sig)}
.nd.on .nbx{filter:drop-shadow(0 2px 10px rgba(226,90,22,.25))}
.edge{stroke:#C9D0CD;stroke-width:1.6;fill:none;transition:stroke var(--t-sec) var(--e),opacity var(--t-sec) var(--e)}
.edge.lit{stroke:var(--sig);opacity:1}
.edge.dim{opacity:.32}
.hub .hbx{fill:var(--ink);stroke:var(--ink)}
.hub .hlb{fill:#fff;font-weight:700;font-size:12.5px}
.hub .hsub{font-family:'IBM Plex Mono',monospace;font-size:8.5px;fill:#94A3AB;letter-spacing:.12em}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.8s var(--e) infinite}
@keyframes pulse{0%,100%{opacity:.10;transform:scale(1)}50%{opacity:.02;transform:scale(1.42)}}

.mapinfo{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);background:var(--paper-2);min-height:20rem}
.mapinfo .mi{padding:clamp(1.1rem,2.4vw,1.6rem);display:none}
.mapinfo .mi.on{display:block;animation:mifade 400ms var(--e)}
@keyframes mifade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mapinfo .k{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sig);display:block;margin-bottom:.45rem}
.mapinfo h3{font-size:clamp(1.15rem,2.2vw,1.45rem);margin:0 0 .6rem}
.mapinfo p{font-size:.96rem;color:var(--text-2);margin:0 0 1rem}
.mapinfo ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-2);padding-top:.8rem}
.mapinfo li{font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--muted);display:flex;gap:.55rem;margin-bottom:.4rem;line-height:1.5}
.mapinfo li::before{content:"→";color:var(--sig);flex:none}
.mapinfo .out{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line-2);font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.mapinfo .out b{color:var(--sig)}

/* ==========================================================================
   S05  Eigenentwicklungen
   ========================================================================== */
.prods{display:grid;grid-template-columns:1fr;gap:1px;background:var(--d-line);border:1px solid var(--d-line)}
@media(min-width:900px){.prods{grid-template-columns:repeat(3,1fr)}}
.prod{
  background:var(--ink-2);display:flex;flex-direction:column;position:relative;overflow:hidden;--c:var(--sig);
  transition:background var(--t-ui) var(--e);
}
.prod[data-p="ls"]{--c:var(--c-log)}
.prod[data-p="modu"]{--c:var(--c-ki)}
.prod[data-p="scada"]{--c:var(--c-iot)}
.prod:hover{background:var(--ink-3)}
.prod-art{position:relative;aspect-ratio:16/10;background:var(--ink);overflow:hidden;border-bottom:1px solid var(--d-line)}
.prod-art svg{position:absolute;inset:0;width:100%;height:100%;transition:transform var(--t-sec) var(--e)}
.prod:hover .prod-art svg{transform:scale(1.03)}
.prod-art::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 55%)}
.prod-body{padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;flex:1}
.prod .pk{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c);display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem}
.prod .pk i{width:6px;height:6px;border-radius:50%;background:var(--c);display:block}
.prod h3{font-size:1.3rem;margin:0 0 .1rem;color:#fff}
.prod .sub{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--d-muted);margin:0 0 .8rem}
.prod p{font-size:.93rem;color:var(--d-text-2);margin:0 0 1rem}
.prod ul{margin:0 0 1.1rem;padding:0;list-style:none}
.prod li{font-size:.87rem;color:var(--d-text-2);display:flex;gap:.55rem;margin-bottom:.35rem;line-height:1.5}
.prod li::before{content:"";width:5px;height:5px;background:var(--c);margin-top:.5rem;flex:none}
.prod .pl{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--d-line-2)}
.prod .pl a{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:700;font-size:.92rem;color:#fff;
  transition:gap var(--t-ui) var(--e),color var(--t-ui) var(--e);
}
.prod .pl a:hover{gap:.8rem;color:var(--c)}
.prod .pl .ho{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--d-muted);display:block;margin-top:.3rem}

/* ==========================================================================
   S06  Rechenbeispiel
   ========================================================================== */
.calc{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);background:var(--paper-2)}
@media(min-width:880px){.calc{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.calc-in{padding:clamp(1.4rem,3vw,2.2rem);border-bottom:1px solid var(--line)}
@media(min-width:880px){.calc-in{border-bottom:0;border-right:1px solid var(--line)}}
.fld{margin-bottom:1.5rem}
.fld:last-child{margin-bottom:0}
.fld label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:700;font-size:.96rem;margin-bottom:.6rem;letter-spacing:-.01em}
.fld .v{font-family:'IBM Plex Mono',monospace;font-size:1.02rem;color:var(--sig);font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.fld .hn{font-size:.84rem;color:var(--muted);margin:.5rem 0 0}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line);outline-offset:8px;margin:.5rem 0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--sig);cursor:pointer;
  border:3px solid var(--paper-2);box-shadow:0 1px 6px rgba(0,0,0,.25);transition:transform var(--t-ui) var(--e);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--sig);cursor:pointer;border:3px solid var(--paper-2);box-shadow:0 1px 6px rgba(0,0,0,.25);
}
input[type=range]::-moz-range-track{height:2px;background:var(--line)}
.calc-out{padding:clamp(1.4rem,3vw,2.2rem);background:var(--ink);color:var(--d-text);display:flex;flex-direction:column;justify-content:center}
.calc-out .lbl{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--d-muted);display:block;margin-bottom:.7rem}
.calc-out .big{font-family:'IBM Plex Mono',monospace;font-size:clamp(2.1rem,6vw,3.2rem);font-weight:600;color:var(--sig-2);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.calc-out .big small{font-size:.42em;color:var(--d-text-2);font-weight:400;margin-left:.4rem}
.calc-out .rows{margin:1.5rem 0 0;padding:1rem 0 0;border-top:1px solid var(--d-line);list-style:none}
.calc-out .rows li{display:flex;justify-content:space-between;gap:1rem;font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--d-text-2);padding:.32rem 0}
.calc-out .rows li b{color:#fff;font-weight:500}
.calc-out .disc{font-size:.8rem;color:var(--d-muted);margin:1.2rem 0 0;line-height:1.55}

/* ==========================================================================
   S07  Ablauf
   ========================================================================== */
.flowsteps{position:relative;margin-top:1rem}
.flowsteps::before{
  content:"";position:absolute;left:15px;top:.6rem;bottom:2.5rem;width:2px;background:var(--d-line);
}
.flowsteps::after{
  content:"";position:absolute;left:15px;top:.6rem;width:2px;background:var(--sig);height:0;
  transition:height 700ms var(--e);
}
.flowsteps.lit::after{height:var(--fh,0)}
.no-motion .flowsteps::after{height:calc(100% - 3.1rem)}
@media(min-width:960px){
  .flowsteps::before,.flowsteps::after{left:0;right:0;top:15px;bottom:auto;width:auto;height:2px}
  .flowsteps::after{width:0;height:2px;transition:width 900ms var(--e)}
  .flowsteps.lit::after{width:var(--fw,0);height:2px}
  .no-motion .flowsteps::after{width:100%;height:2px}
}
.fsteps{display:grid;grid-template-columns:1fr;gap:1.8rem;margin:0;padding:0;list-style:none;position:relative}
@media(min-width:960px){.fsteps{grid-template-columns:repeat(5,1fr);gap:1.6rem}}
.fs{padding-left:3rem;position:relative;opacity:.45;transition:opacity var(--t-sec) var(--e)}
@media(min-width:960px){.fs{padding-left:0;padding-top:3rem}}
.fs.on,.no-motion .fs{opacity:1}
.fs .n{
  position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  background:var(--ink);border:2px solid var(--d-line);color:var(--d-muted);
  display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:600;
  transition:border-color var(--t-sec) var(--e),color var(--t-sec) var(--e),background var(--t-sec) var(--e);
}
.fs.on .n,.no-motion .fs .n{border-color:var(--sig);color:#fff;background:var(--sig)}
.fs h3{font-size:1.1rem;margin:0 0 .45rem;color:#fff}
.fs p{font-size:.9rem;color:var(--d-text-2);margin:0 0 .6rem}
.fs .meta{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sig);display:block}

/* ==========================================================================
   S08  Zusagen
   ========================================================================== */
.vows{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:0;padding:0;list-style:none}
@media(min-width:720px){.vows{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.vows{grid-template-columns:repeat(4,1fr)}}
.vow{background:var(--paper-2);padding:clamp(1.2rem,2.4vw,1.6rem);position:relative;transition:background var(--t-ui) var(--e)}
.vow:hover{background:var(--paper)}
.vow .vi{width:30px;height:30px;margin-bottom:.9rem;display:block}
.vow .vi svg{width:100%;height:100%;stroke:var(--sig);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vow h3{font-size:1.02rem;margin:0 0 .45rem;line-height:1.25}
.vow p{font-size:.89rem;color:var(--text-2);margin:0;line-height:1.55}

/* ==========================================================================
   S09  Technik-Band
   ========================================================================== */
.marq{overflow:hidden;border-block:1px solid var(--d-line);padding:1.15rem 0;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq + .marq{border-top:0}
.mrow{display:flex;gap:2.2rem;width:max-content;animation:marq 46s linear infinite}
.marq.rev .mrow{animation-direction:reverse}
.marq:hover .mrow{animation-play-state:paused}
.no-motion .mrow{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:.9rem 2rem}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mrow span{
  font-family:'IBM Plex Mono',monospace;font-size:.82rem;letter-spacing:.06em;color:var(--d-text-2);
  display:flex;align-items:center;gap:.6rem;white-space:nowrap;flex:none;
}
.mrow span::before{content:"";width:4px;height:4px;background:var(--sig);flex:none;opacity:.7}

/* ==========================================================================
   S10  Betreuung
   ========================================================================== */
.plans{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:860px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--paper-2);padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;position:relative}
.plan.hot{background:var(--ink);color:var(--d-text)}
.plan.hot h3{color:#fff}
.plan .pt{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.6rem}
.plan.hot .pt{color:var(--sig)}
.plan h3{font-size:1.45rem;margin:0 0 .5rem}
.plan .pd{font-size:.93rem;color:var(--text-2);margin:0 0 1.2rem;min-height:3.4rem}
.plan.hot .pd{color:var(--d-text-2)}
.plan ul{margin:0 0 1.4rem;padding:1.1rem 0 0;list-style:none;border-top:1px solid var(--line-2);flex:1}
.plan.hot ul{border-top-color:var(--d-line)}
.plan li{font-size:.89rem;display:flex;gap:.6rem;margin-bottom:.55rem;line-height:1.5;color:var(--text-2)}
.plan.hot li{color:var(--d-text-2)}
.plan li svg{width:15px;height:15px;flex:none;margin-top:.28rem;stroke:var(--sig);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.plan .badge{
  position:absolute;top:0;right:0;background:var(--sig);color:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;padding:.3rem .6rem;
}
.plan-note{font-size:.9rem;color:var(--text-2);margin-top:1.3rem;max-width:64ch}
.plan-note b{color:var(--text)}

/* ==========================================================================
   S11  Fragen
   ========================================================================== */
.faq{border-top:1px solid var(--line);max-width:58rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-size:clamp(1rem,1.9vw,1.14rem);font-weight:700;letter-spacing:-.018em;line-height:1.35;
  transition:color var(--t-ui) var(--e);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--sig)}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.5rem;width:13px;height:13px;
  border-right:2px solid var(--sig);border-bottom:2px solid var(--sig);
  transform:rotate(45deg);transition:transform var(--t-ui) var(--e);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 0 1.4rem;max-width:62ch}
.faq .ans p{font-size:.98rem;color:var(--text-2);margin:0 0 .8rem}
.faq .ans p:last-child{margin-bottom:0}

/* ==========================================================================
   S12  Kontakt
   ========================================================================== */
.kontakt{background:var(--ink);color:var(--d-text)}
.kwrap{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:980px){.kwrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.form{display:grid;gap:1.1rem}
.row{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:620px){.row{grid-template-columns:1fr 1fr}}
.f label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--d-muted);margin-bottom:.45rem}
.f label .req{color:var(--sig)}
.f input,.f textarea,.f select{
  width:100%;background:var(--ink-2);border:1px solid var(--d-line);color:var(--d-text);
  font-family:'Archivo',sans-serif;font-size:1rem;padding:.85rem .9rem;border-radius:2px;
  transition:border-color var(--t-ui) var(--e),background var(--t-ui) var(--e);
}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8494 50%),linear-gradient(135deg,#8494 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;cursor:pointer}
.f input:focus,.f textarea:focus,.f select:focus{border-color:var(--sig);background:var(--ink-3);outline:none}
.f textarea{resize:vertical;min-height:7.5rem}
.f input::placeholder,.f textarea::placeholder{color:#5E6E78}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.88rem;color:var(--d-text-2);line-height:1.5}
.consent input{width:20px;height:20px;flex:none;margin-top:.1rem;accent-color:var(--sig);cursor:pointer}
.consent a{color:var(--sig)}
.fsend{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:.3rem}
.fmsg{font-size:.9rem;min-height:1.4rem;margin:0}
.fmsg.err{color:#F2603E}
.fmsg.ok{color:var(--ok-l)}
.fdone{
  border:1px solid var(--ok);background:rgba(79,191,133,.08);padding:clamp(1.4rem,3vw,2rem);display:none;
}
.fdone.on{display:block;animation:mifade 420ms var(--e)}
.fdone h3{font-size:1.35rem;margin:0 0 .6rem;color:#fff}
.fdone p{color:var(--d-text-2);margin:0 0 .5rem;font-size:.95rem}

.kside{display:flex;flex-direction:column;gap:1.6rem}
.kcard{border:1px solid var(--d-line);background:var(--ink-2);padding:clamp(1.2rem,2.6vw,1.6rem)}
.kcard h3{font-size:1.05rem;margin:0 0 .9rem;color:#fff}
.kcard .kl{display:flex;align-items:center;gap:.75rem;text-decoration:none;padding:.55rem 0;border-bottom:1px solid var(--d-line-2);transition:color var(--t-ui) var(--e)}
.kcard .kl:last-of-type{border-bottom:0}
.kcard .kl:hover{color:var(--sig)}
.kcard .kl svg{width:18px;height:18px;stroke:var(--sig);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kcard .kl b{display:block;font-size:.98rem;font-weight:700;line-height:1.2}
.kcard .kl span{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--d-muted);letter-spacing:.08em;text-transform:uppercase}
.knext{margin:0;padding:0;list-style:none;counter-reset:kn}
.knext li{
  counter-increment:kn;display:grid;grid-template-columns:1.7rem 1fr;gap:.7rem;
  font-size:.9rem;color:var(--d-text-2);padding:.5rem 0;line-height:1.5;
}
.knext li::before{
  content:counter(kn);font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--sig);
  border:1px solid var(--d-line);width:1.7rem;height:1.7rem;display:grid;place-items:center;
}
.kcard .note{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--d-muted);margin:.9rem 0 0;line-height:1.6}

/* ==========================================================================
   Fussbereich
   ========================================================================== */
.foot{background:var(--ink);color:var(--d-text-2);border-top:1px solid var(--d-line);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.foot-top{display:grid;grid-template-columns:1fr;gap:2rem;padding-bottom:2.4rem;border-bottom:1px solid var(--d-line)}
@media(min-width:820px){.foot-top{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
.foot h4{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--d-muted);margin:0 0 .9rem;font-weight:500}
.foot ul{margin:0;padding:0;list-style:none}
.foot li{margin-bottom:.5rem}
.foot a{text-decoration:none;font-size:.92rem;transition:color var(--t-ui) var(--e)}
.foot a:hover{color:var(--sig)}
.foot .fabout p{font-size:.92rem;max-width:38ch;margin:.9rem 0 0}
.legal{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;margin-top:1.6rem;
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--d-muted);
}
.legal a{font-size:.72rem}
.mtoggle{
  margin-left:auto;background:transparent;border:1px solid var(--d-line);color:var(--d-muted);cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;padding:.35rem .7rem;border-radius:2px;
  transition:border-color var(--t-ui) var(--e),color var(--t-ui) var(--e);
}
.mtoggle:hover{border-color:var(--sig);color:var(--d-text)}

/* ==========================================================================
   Rechtsseiten
   ========================================================================== */
.legal-head{background:var(--ink);color:var(--d-text);padding:clamp(3.5rem,8vw,6rem) 0 clamp(2rem,4vw,3rem)}
.legal-head h1{font-size:clamp(2rem,5vw,3.2rem);margin:.8rem 0 0;color:#fff}
.legal-head .back{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--d-muted);text-decoration:none;transition:color var(--t-ui) var(--e)
}
.legal-head .back:hover{color:var(--sig)}
.legal-body{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem);background:var(--paper)}
.legal-body .wrap{max-width:52rem}
.legal-body h2{font-size:clamp(1.2rem,2.6vw,1.55rem);margin:2.4rem 0 .9rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body p,.legal-body li{font-size:.97rem;color:var(--text-2)}
.legal-body strong{color:var(--text)}
.legal-body a{color:var(--sig)}
.legal-body dl{display:grid;grid-template-columns:1fr;gap:.2rem 1.5rem;margin:0 0 1.2rem}
@media(min-width:620px){.legal-body dl{grid-template-columns:11rem 1fr}}
.legal-body dt{font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:.3rem}
.legal-body dd{margin:0 0 .7rem;color:var(--text)}
.legal-body ul{padding-left:1.2rem}
.legal-body li{margin-bottom:.5rem}

/* ==========================================================================
   Bewegung abschaltbar
   ========================================================================== */
.no-motion *,.no-motion *::before,.no-motion *::after{
  animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;
  transition-duration:1ms!important;transition-delay:0ms!important;scroll-behavior:auto!important;
}
.no-motion .hero h1 .ln > span{transform:none}
.no-motion .hero-sub,.no-motion .hero-cta,.no-motion .hero-trust,.no-motion .hero-art{opacity:1}
.no-motion .flow{display:none}
.no-motion .svc.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Nachtraege: Bewegung im Kopfbereich, Korrekturen auf dunklem Grund
   ========================================================================== */

/* Schichtmodell faehrt von unten nach oben auf */
.ly{opacity:0;transform:translateY(22px);animation:lyin 760ms var(--e) forwards;animation-delay:var(--d,0ms)}
@keyframes lyin{to{opacity:1;transform:none}}
.no-motion .ly{opacity:1;transform:none;animation:none}

/* Impuls laeuft das Rueckgrat hinauf */
.spark{animation:sparkup 4.2s linear infinite}
.spark-h{animation:sparkhalo 4.2s linear infinite}
@keyframes sparkup{
  0%{transform:translateY(0);opacity:0}
  10%{opacity:1}90%{opacity:1}
  100%{transform:translateY(-328px);opacity:0}
}
@keyframes sparkhalo{
  0%{transform:translateY(0);opacity:0}
  10%{opacity:.28}90%{opacity:.28}
  100%{transform:translateY(-328px);opacity:0}
}
.no-motion .spark,.no-motion .spark-h{display:none}

/* Fragen auf dunklem Grund */
.sec-dark .faq{border-top-color:var(--d-line)}
.sec-dark .faq details{border-bottom-color:var(--d-line)}
.sec-dark .faq summary{color:#fff}
.sec-dark .faq summary:hover{color:var(--sig-2)}
.sec-dark .faq .ans p{color:var(--d-text-2)}

/* Sanftes Einblenden ganzer Abschnitte */
[data-reveal] .sechead{opacity:0;transform:translateY(14px);transition:opacity var(--t-sec) var(--e),transform var(--t-sec) var(--e)}
[data-reveal].on-view .sechead,.no-motion [data-reveal] .sechead{opacity:1;transform:none}

/* Umschaltflaeche im Fussbereich, aktiver Zustand */
.mtoggle[aria-pressed="true"]{border-color:var(--sig);color:var(--sig)}

/* Bereichsmarke in der Kopfleiste */
.nav-links a.act{color:#fff;border-bottom-color:var(--sig)}

/* Druckfassung */
@media print{
  .nav,.mcta,.progress,.hero-scroll,.filters,.marq,.mtoggle{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .sec-dark,.hero,.kontakt,.foot{background:#fff!important;color:#000!important}
  .sec-dark h2,.sec-dark h3,.hero h1{color:#000!important}
  .svc,.prod{background:#fff!important;border:1px solid #ccc}
  .sec{padding:1.2rem 0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}

/* Einwilligungszeile ist Fliesstext, keine Feldbeschriftung */
.f label.consent{
  font-family:'Archivo',sans-serif;font-size:.88rem;letter-spacing:normal;text-transform:none;
  color:var(--d-text-2);margin-bottom:0;
}
/* Der Kontaktabschnitt ist dunkel, traegt aber nicht die Klasse sec-dark */
.kontakt .lead{color:var(--d-text-2)}
.kontakt .eyebrow::after{background:var(--d-line)}
.no-motion .pulse{opacity:.08;animation:none}

/* ----- Kopfbild am Telefon: Beschriftung wandert unter die Grafik ----- */
.hero-legend{display:none;margin:0;padding:0;list-style:none}
@media(max-width:979px){
  .hero-art svg .lbl,.hero-art svg .spine,.hero-art svg .spark,.hero-art svg .spark-h{display:none}
  .hero-legend{
    display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem;
    margin:1.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--d-line);
  }
  .hero-legend li{border-left:2px solid var(--c);padding-left:.65rem}
  .hero-legend b{display:block;font-size:.92rem;color:#fff;font-weight:700;letter-spacing:-.015em;line-height:1.25}
  .hero-legend span{
    display:block;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.07em;
    color:var(--d-muted);text-transform:uppercase;margin-top:.15rem;line-height:1.4;
  }
}
@media(max-width:459px){.hero-legend{grid-template-columns:1fr}}

/* Der dauerhafte Handlungsbalken darf den Fussbereich nicht verdecken */
@media(max-width:819px){body{padding-bottom:3.3rem}}

/* ----- Systemkarte am Telefon: lesbare Beschriftung statt Symbol ----- */
@media(max-width:760px){
  .nd .nic{display:none}
  .nd .nlb{font-size:13px;transform:translateX(-24px)}
  .hub .hlb{font-size:15px}
  .hub .hsub{font-size:9.5px}
  .mapbar{font-size:.62rem;letter-spacing:.1em}
  .mapbar .hint{margin-left:0;flex-basis:100%}
}