@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* Layout: Unterverteilung als Leitmotiv – Hutschiene im Hero, Klemmenbeschriftung als Gliederung, ruhige Textspalten darunter */
:root{
  --bg:#f4f6f9;
  --panel:#ffffff;
  --ink:#14213d;
  --muted:#5a6680;
  --line:#d7dde8;
  --bus:#2b4c8c;
  --bus-ink:#ffffff;
  --navy:#14213d;
  --navy-ink:#ffffff;
  --navy-muted:#c9d1e3;
  --sig:#f2b134;
  --sig-ink:#14213d;
  --led:#3ccf6e;
  --amber:#f2b134;
  --rail:#c9d0dc;
  --module:#ffffff;
  --font-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --font-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1626;--panel:#172036;--ink:#e9edf5;--muted:#a3adc2;--line:#2a3550;
  --bus:#7ea2e8;--bus-ink:#0f1626;--navy:#0a1020;--navy-ink:#e9edf5;--navy-muted:#a3adc2;--sig:#f2b134;--sig-ink:#14213d;
  --led:#5be08a;--amber:#f2b134;--rail:#2a3550;--module:#1b2540;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1626;--panel:#172036;--ink:#e9edf5;--muted:#a3adc2;--line:#2a3550;
  --bus:#7ea2e8;--bus-ink:#0f1626;--navy:#0a1020;--navy-ink:#e9edf5;--navy-muted:#a3adc2;--sig:#f2b134;--sig-ink:#14213d;
  --led:#5be08a;--amber:#f2b134;--rail:#2a3550;--module:#1b2540;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:17px/1.6 var(--font-body);margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.05;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--bus);outline-offset:3px}
.tag{font:500 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo b{font:700 22px/1 var(--font-display);letter-spacing:.05em;text-transform:uppercase}
.logo b span{color:var(--bus)}
.mark{width:44px;height:33px;flex:none}
.mark .roof{fill:none;stroke:var(--bus);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.mark .line{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.mark .node{fill:var(--bg);stroke:var(--ink);stroke-width:4}
.mark .node.on{fill:var(--bus)}
nav{display:flex;gap:22px;font-size:15px}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--ink)}
@media (max-width:720px){nav{display:none}}

/* Hero */
.hero{padding-block:56px 40px;display:grid;gap:44px}
.hero h1{font-size:clamp(42px,7vw,78px);max-width:13ch}
.hero h1 em{font-style:normal;color:var(--bus)}
.lead{font-size:clamp(18px,2.2vw,21px);color:var(--muted);max-width:56ch}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:6px;font:600 16px/1 var(--font-body);text-decoration:none;border:1.5px solid var(--ink)}
.btn.primary{background:var(--bus);border-color:var(--bus);color:var(--bus-ink)}
.btn:hover{transform:translateY(-1px)}
.hero-text{display:grid;gap:22px}

/* Hutschiene */
.cabinet{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px 18px 18px}
.cabinet-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}
.railbox{overflow-x:auto;padding-bottom:4px}
.rail{position:relative;display:flex;gap:4px;min-width:max-content;padding:0 6px}
.rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:22px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,var(--rail) 0 18px,color-mix(in srgb,var(--rail) 70%,var(--bg)) 18px 24px);border-radius:2px;z-index:0}
.mod{position:relative;z-index:1;background:var(--module);border:1px solid var(--line);border-radius:4px;height:148px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 8px 10px;box-shadow:0 1px 0 var(--line)}
.mod[data-te="2"]{width:72px}.mod[data-te="3"]{width:106px}.mod[data-te="4"]{width:140px}
.screws{display:flex;gap:6px}
.screws i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--muted);position:relative}
.screws i::after{content:"";position:absolute;inset:3px 1px auto;height:1.5px;background:var(--muted)}
.mod-label{font:600 15px/1.05 var(--font-display);letter-spacing:.02em}
.mod-sub{font:400 10.5px/1.2 var(--font-mono);color:var(--muted);margin-top:3px}
.ledrow{display:flex;align-items:center;gap:6px;font:400 10px/1 var(--font-mono);color:var(--muted)}
.led{width:8px;height:8px;border-radius:50%;background:var(--led);box-shadow:0 0 6px var(--led)}
.led.amber{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.mod.knx{border-top:4px solid var(--bus)}
@media (prefers-reduced-motion:no-preference){
  .led.blink{animation:blink 1.8s steps(2,jump-none) infinite}
  @keyframes blink{50%{opacity:.25}}
}
.cabinet-foot{margin-top:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (min-width:960px){.hero{grid-template-columns:1fr 1fr;align-items:center}}

/* Sektionen */
section{padding-block:64px;border-top:1px solid var(--line)}
.sec-head{display:grid;gap:10px;margin-bottom:34px;max-width:62ch}
.sec-head h2{font-size:clamp(32px,4.5vw,48px)}
.sec-head p{color:var(--muted)}

.services{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.svc{background:var(--panel);padding:26px 22px;display:grid;gap:10px;align-content:start;min-width:0}
.svc h3{font-size:26px}
.svc p{color:var(--muted);font-size:16px}
.svc ul{margin:4px 0 0;padding-left:18px;font-size:15.5px}
.svc li{margin-block:3px}

/* Systeme als Klemmenleiste */
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.term{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--panel);min-width:0}
.term-id{font:500 13px/1 var(--font-mono);background:var(--ink);color:var(--bg);border-radius:4px;padding:8px 0;text-align:center}
.term.bus .term-id{background:var(--bus);color:var(--bus-ink)}
.term h3{font-size:24px;margin-bottom:4px}
.term p{color:var(--muted);font-size:15.5px}
.also{margin-top:22px;padding:18px 20px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-size:16px}
.also strong{color:var(--ink)}

/* Ablauf */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:18px;padding-block:20px;border-bottom:1px solid var(--line);counter-increment:s}
.steps li::before{content:counter(s);font:700 38px/1 var(--font-display);color:var(--bus)}
.steps h3{font-size:24px;margin-bottom:4px}
.steps p{color:var(--muted)}

/* Über mich */
.about{display:grid;gap:30px}
@media (min-width:860px){.about{grid-template-columns:1.2fr 1fr}}
.about p{max-width:62ch;margin-bottom:14px}
.facts{display:grid;gap:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);align-self:start}
.fact{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:15.5px}
.fact:last-child{border-bottom:0}
.fact span:first-child{color:var(--muted)}
.fact span:last-child{text-align:right;font-weight:600}

/* Kontakt */
.contact{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cbox{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:22px;display:grid;gap:10px;min-width:0}
.num{font:600 30px/1.1 var(--font-display);letter-spacing:.02em;user-select:all;font-variant-numeric:tabular-nums}
.cbox .row{display:flex;gap:10px;flex-wrap:wrap}
.small-btn{font:500 14px/1 var(--font-body);padding:9px 14px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;text-decoration:none}
.small-btn:hover{border-color:var(--ink)}
.cbox.green{background:var(--bus);color:var(--bus-ink);border-color:var(--bus)}
.cbox.green .tag{color:var(--bus-ink);opacity:.8}

footer{border-top:1px solid var(--line);padding-block:36px;font-size:14.5px;color:var(--muted)}
.foot{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
footer h3{font-size:18px;color:var(--ink);margin-bottom:6px}

/* Mehrseitig */
nav a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--bus)}
.mobnav{display:none;gap:16px;overflow-x:auto;padding-block:0 12px;font-size:15px}
.mobnav a{text-decoration:none;color:var(--muted);white-space:nowrap}
.mobnav a[aria-current="page"]{color:var(--ink);font-weight:600}
@media (max-width:720px){.mobnav{display:flex}}
.partner{display:inline-flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border:1.5px solid var(--bus);border-radius:6px;width:fit-content}
.partner b{background:var(--bus);color:var(--bus-ink);font:700 15px/1 var(--font-display);letter-spacing:.06em;padding:6px 8px;border-radius:3px}
.partner span{font:600 15px/1.2 var(--font-body)}
section.band{background:var(--bus);color:var(--bus-ink);border-top:0}
.band .tag{color:var(--bus-ink);opacity:.8}
.band-grid{display:grid;gap:26px}
@media (min-width:860px){.band-grid{grid-template-columns:1fr 1fr;align-items:center}}
.band h2{font-size:clamp(30px,4.2vw,44px)}
.band p{max-width:56ch}
.band .btn{border-color:var(--bus-ink);color:var(--bus-ink)}
.more{margin-top:24px}
.services{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.copy{font-size:13.5px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:4px}
.page-hero{padding-block:52px 8px}
.page-hero h1{font-size:clamp(40px,6vw,64px);max-width:18ch;margin-top:10px}
.page-hero .lead{margin-top:16px}
section.flush{border-top:0}
.check{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.check li{padding-left:28px;position:relative}
.check li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:3px;border:2px solid var(--bus)}
.legal{max-width:68ch;display:grid;gap:22px}
.note{display:grid;gap:6px;padding:18px 20px;border:1.5px solid var(--bus);border-radius:8px;background:var(--panel);max-width:78ch}
.note strong{font:600 20px/1.2 var(--font-display);letter-spacing:.01em}
.note p{color:var(--muted)}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.tbl table{width:100%;border-collapse:collapse;font-size:16px;min-width:520px}
.tbl th,.tbl td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl th{font:500 12px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg)}
.tbl td:first-child{font-weight:600;white-space:nowrap}
.tbl td.p{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;color:var(--bus)}
.tbl th.p{text-align:right}
.tbl td.d{color:var(--muted)}
.pk{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pkg{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px;display:grid;gap:12px;align-content:start;min-width:0}
.pkg.hi{border-color:var(--bus);box-shadow:inset 0 4px 0 var(--bus)}
.pkg h3{font-size:26px}
.price{font:700 34px/1 var(--font-display);color:var(--bus);font-variant-numeric:tabular-nums}
.price small{font:500 14px/1 var(--font-body);color:var(--muted)}
.pkg p{color:var(--muted);font-size:15.5px}
.stack{display:grid;gap:28px}
.knxlogo{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 16px;width:fit-content;line-height:0}
.knxlogo img{width:150px;height:auto}
.pk5{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.hero>*{min-width:0}
.hero-text .tag{overflow-wrap:anywhere}
/* Farbschema Nachtblau & Signalgelb */
body::before{background:var(--navy)}
header{background:var(--navy);border-bottom-color:var(--navy)}
.logo b{color:var(--navy-ink)}
.logo b span{color:var(--sig)}
nav a,.mobnav a{color:var(--navy-muted)}
nav a:hover,nav a[aria-current="page"],.mobnav a[aria-current="page"]{color:var(--navy-ink)}
nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--sig)}
.mark .roof{stroke:var(--sig)}
.mark .line{stroke:var(--navy-ink)}
.mark .node{fill:var(--navy);stroke:var(--navy-ink)}
.mark .node.on{fill:var(--sig)}
.btn.primary{background:var(--sig);border-color:var(--sig);color:var(--sig-ink)}
section.band{background:var(--navy);color:var(--navy-ink)}
.band .tag{color:var(--sig);opacity:1}
.band .btn{border-color:var(--navy-ink);color:var(--navy-ink)}
.term.bus .term-id{background:var(--sig);color:var(--sig-ink)}
.cbox.green{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
.cbox.green .tag{color:var(--sig);opacity:1}
.pkg.hi{box-shadow:inset 0 4px 0 var(--sig)}
.mod.knx{border-top-color:var(--sig)}
.fine{font-size:14.5px;color:var(--muted);max-width:78ch}
.legal h2{font-size:28px;margin-bottom:6px}
.legal p{color:var(--muted)}

/* Teaser */
.headmail{color:var(--navy-muted);text-decoration:none;font-size:15px}
.headmail:hover{color:var(--navy-ink)}
.teaser h1{max-width:12ch}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font:500 13px/1 var(--font-mono);padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
@media (prefers-reduced-motion:no-preference){.teaser .led{animation:blink 1.4s steps(2,jump-none) infinite}.teaser .mod:nth-child(2n) .led{animation-delay:.7s}}
@media (min-width:960px){.hero.teaser{grid-template-columns:1fr 1.15fr}}
.teaser~section .contact{max-width:560px}
main>section .contact{max-width:560px}

/* Teaser: alles auf einen Blick */
html,body.onepage{height:100%}
body.onepage{display:flex;flex-direction:column;min-height:100dvh}
body.onepage header{position:static}
main.one{flex:1;display:flex;align-items:center;padding-block:clamp(16px,3vh,40px)}
.onegrid{display:grid;gap:clamp(20px,3vw,48px);align-items:center;width:100%}
@media (min-width:900px){.onegrid{grid-template-columns:1fr 1.05fr}}
.onegrid>*{min-width:0}
.onetext{display:grid;gap:clamp(10px,1.8vh,18px)}
.onetext h1{font-size:clamp(36px,6.2vh,64px);max-width:14ch}
.onetext h1 em{font-style:normal;color:var(--bus)}
.onetext .lead{font-size:clamp(16px,2.1vh,19px);max-width:52ch}
.onetext .tag{overflow-wrap:anywhere}
.mailbox{background:var(--navy);color:var(--navy-ink);border-radius:8px;padding:14px 18px;display:grid;gap:8px;width:fit-content;max-width:100%}
.mailbox .tag{color:var(--sig)}
.mailbox .num{font-size:26px}
.onefoot{padding-block:12px;font-size:13px}
.onefootrow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px}
.onefootrow .links{display:flex;gap:16px}
.onefootrow a{color:var(--ink)}
@media (max-width:899px){.onerail{display:none}.chips li{font-size:12px;padding:6px 8px}}
.mailbox .row{display:flex;flex-wrap:wrap;gap:10px}
.mailbox .small-btn{display:inline-flex;align-items:center}