@font-face{font-family:Archivo;src:url(schriften/Archivo.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(schriften/IBMPlexMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(schriften/IBMPlexMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--text:#383E42;--text2:#5C6367;--grau:#5C6367;--linie:#E4E4E2;--flaeche:#FAFAF9;--flaeche2:#F5F5F3;--tuerkis:#3C7476;--tuerkis-d:#2F5C5E;
 --max:1200px;--rand:32px;--kopf:72px;--reiter:44px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--kopf) + var(--reiter) + 16px)}
body{background:#fff;color:var(--text);font:400 17px/1.7 Archivo,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto}
a{color:var(--tuerkis);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--tuerkis);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
.label,figcaption,caption,.nr,.werte,.schluessel,.fakt .wert,.tabelle thead th,.zahl,.formel,.scrollhinweis,.subtabs .mehr,footer h2,footer .unten{font-family:"IBM Plex Mono",ui-monospace,monospace}
.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tuerkis);font-weight:500}
.innen{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
h1{font-size:44px;line-height:1.15;font-weight:600;letter-spacing:-.01em;margin:16px 0 24px;max-width:900px}
h2{font-size:30px;line-height:1.25;font-weight:600;margin:8px 0 16px}
h3{font-size:20px;line-height:1.35;font-weight:600;margin:0 0 8px}
p+p{margin-top:16px}
.lead{font-size:20px;line-height:1.6;color:var(--text2);max-width:760px}
.sprung{position:absolute;left:16px;top:-80px;z-index:50;background:#fff;border:1px solid var(--tuerkis);padding:8px 16px;font-size:15px}
.sprung:focus{top:8px}
/* Kopfzeile */
.kopfzeile{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--linie)}
.kopfzeile>.innen{display:flex;align-items:center;justify-content:space-between;height:var(--kopf);gap:24px}
.marke{height:32px;width:auto;display:block}
.hauptnav{display:flex;gap:4px;align-items:stretch;height:var(--kopf)}
.hauptnav .punkt{position:relative;display:flex;align-items:center}
.hauptnav .punkt>a{color:var(--text);font-size:15px;padding:0 12px;height:var(--kopf);display:flex;align-items:center;border-bottom:2px solid transparent}
.hauptnav .punkt>a:hover{text-decoration:none;color:var(--tuerkis)}
.hauptnav .punkt>a[aria-current]{border-bottom-color:var(--tuerkis);color:var(--tuerkis)}
.ausklapp{display:none;position:absolute;top:var(--kopf);left:0;min-width:240px;background:#fff;border:1px solid var(--linie);padding:8px 0}
.punkt:hover .ausklapp,.punkt:focus-within .ausklapp{display:block}
.punkt.zu .ausklapp{display:none!important}
.ausklapp a{display:block;padding:8px 16px;color:var(--text);font-size:15px}
.ausklapp a:hover{background:var(--flaeche);text-decoration:none}
.ausklapp a[aria-current]{color:var(--tuerkis)}
.menue{display:none;min-width:44px;min-height:44px;padding:0 16px;background:#fff;border:1px solid var(--linie);font:500 15px Archivo,Arial,sans-serif;color:var(--text);cursor:pointer}
.hauptnav{margin-left:auto}
.kopf-rechts{display:flex;align-items:center;gap:16px;flex:none}
/* Sprachumschalter DE · EN: führt auf dieselbe Seite in der anderen Sprache */
.sprachen{display:flex;align-items:center;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--grau)}
.sprachen a{display:flex;align-items:center;justify-content:center;min-width:32px;min-height:44px;padding:0 4px;color:var(--text2)}
.sprachen a:hover{color:var(--tuerkis);text-decoration:none}
.sprachen a[aria-current]{color:var(--text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
/* Unterreiter: eigene Zeile, 44 px, linksbündig */
.subtabs{position:sticky;top:calc(var(--kopf) + 1px);z-index:19;background:var(--flaeche);border-bottom:1px solid var(--linie)}
.subtabs>.innen{position:relative;display:flex;align-items:stretch;justify-content:flex-start;height:var(--reiter);overflow-x:auto;scrollbar-width:none}
.subtabs>.innen::-webkit-scrollbar{display:none}
.subtabs a{display:flex;align-items:center;white-space:nowrap;font-size:15px;color:var(--text2);padding:0 16px;border-bottom:2px solid transparent}
.subtabs a:first-child{padding-left:0}
.subtabs a:hover{color:var(--tuerkis);text-decoration:none}
.subtabs a[aria-current]{color:var(--text);border-bottom-color:var(--text)}
.subtabs .mehr{display:none;position:absolute;right:0;top:0;height:var(--reiter);align-items:center;padding:0 16px;background:var(--flaeche);border-left:1px solid var(--linie);font-size:15px;color:var(--text2)}
.subtabs.weiter .mehr{display:flex}
/* Seiten */
.seitenkopf{max-width:var(--max);margin:0 auto;padding:72px var(--rand) 56px}
.abschnitt{border-top:1px solid var(--linie);padding:80px 0}
.abschnitt>*{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:var(--rand);padding-right:var(--rand)}
.abschnitt>*+*{margin-top:32px}
.abschnitt.grau{background:var(--flaeche)}
/* Kästen und Linien an der Inhaltskante, ohne Überstand (eine linke Kante) */
.abschnitt>:is(.fakten,.schritte,.diagramm,.block){width:calc(100% - 2 * var(--rand));max-width:calc(var(--max) - 64px)}
.abschnitt>:is(.fakten,.schritte){padding-left:0;padding-right:0}
.abschnitt>.diagramm{padding:16px}
.abschnitt>.block{padding:32px}
/* Textnahe Bausteine: Textspalte 760 px, linksbündig an der Inhaltskante */
.abschnitt>:is(.formel,.hinweis,.quellen){width:calc(100% - 2 * var(--rand));max-width:760px;margin-left:max(var(--rand),calc((100% - var(--max)) / 2 + var(--rand)));margin-right:auto}
.abschnitt>:is(.hinweis){padding-left:0;padding-right:0}
.abschnitt>.quellen{padding-right:0;padding-left:24px}
.abschnitt>.formel{padding:16px 24px}
.kopf{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:end}
.text>*{max-width:760px}
.text p,.text li{font-size:17px}
.text h3{margin-top:32px}.text h2{margin-top:40px}
.text ul,.text ol:not(.quellen){padding-left:24px;margin-top:16px}.text li+li{margin-top:8px}
.text>*+*{margin-top:16px}
.quellen a,a.url{overflow-wrap:anywhere}td a{overflow-wrap:break-word;hyphens:auto}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:48px}
/* Rasterzellen dürfen schmaler als ihr Inhalt werden: Tabellen scrollen in der Scrollfläche, statt das Raster zu verbreitern */
.zwei>*,.raster>*,.kopf>*,.block>*{min-width:0}
.raster{display:grid;gap:24px}.r2{grid-template-columns:repeat(2,1fr)}.r3{grid-template-columns:repeat(3,1fr)}.r4{grid-template-columns:repeat(4,1fr)}
.karte{border:1px solid var(--linie);background:#fff;display:flex;flex-direction:column}
.karte>.inhalt{padding:24px;display:flex;flex-direction:column;flex:1}
.karte .bild figcaption{padding:0 24px}
.karte p{font-size:15px;color:var(--text2)}
.karte h3 a{color:var(--text)}
.nr{font-size:12px;color:var(--tuerkis);margin-bottom:8px}
.werte{margin-top:auto;padding-top:16px;border-top:1px solid var(--linie);font-size:15px;line-height:1.7}
.karte p+.werte{margin-top:16px}
.bild .rahmen{overflow:hidden;background:var(--flaeche2)}
.bild .rahmen img{width:100%;height:100%;object-fit:cover}
.bild .rahmen.frei img{height:auto;object-fit:contain}
/* Abbildungs- und Tabellenunterschrift gleich gesetzt */
figcaption,caption{font-size:12px;line-height:1.6;color:var(--grau);margin-top:8px;letter-spacing:.02em;text-align:left}
caption{caption-side:bottom;padding-top:8px;margin-top:0}
.diagramm{border:1px solid var(--linie);background:#fff;padding:16px}
.diagramm svg{width:100%;height:auto;display:block}
.diagramm figcaption{border-top:1px solid var(--linie);padding-top:8px;margin-top:16px}
.diagramm.dunkel{background:#2E3438;border-color:#2E3438}.diagramm.dunkel figcaption{color:#C8C8C7;border-top-color:#4A5257}
.scrollflaeche{overflow-x:auto}
.scrollhinweis{display:none;font-size:12px;color:var(--grau);margin-bottom:8px}
.ueber>.scrollhinweis{display:block}
.diagramm.dunkel .scrollhinweis{color:#C8C8C7}
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.fakt{padding:24px 24px 24px 0}.fakt+.fakt{padding-left:24px;border-left:1px solid var(--linie)}
.fakt .wert{font-family:Archivo,Arial,sans-serif;font-size:30px;line-height:1.25;font-weight:600}
.fakt span{display:block;font-size:15px;color:var(--text2);margin-top:4px}
.liste{list-style:none}
.liste li{padding:8px 0;border-bottom:1px solid var(--linie);font-size:17px}
.liste li:first-child{border-top:1px solid var(--linie)}
.liste li.paar{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:baseline}
.schluessel{color:var(--tuerkis);font-size:12px;letter-spacing:.02em}
.tabelle{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6;background:#fff}
.tabelle th{font-weight:500;text-align:left;background:var(--flaeche);padding:8px 16px;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle thead th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text2)}
.tabelle tbody th{font-size:15px;color:var(--text);width:32%}
.tabelle td{padding:8px 16px;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle td.zahl{font-size:15px;text-align:right;white-space:nowrap}
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:2px solid var(--text)}
.schritt{padding:24px 24px 0 0}.schritt+.schritt{padding-left:24px;border-left:1px solid var(--linie)}
.schritt p{font-size:15px;color:var(--text2)}
.block{border:1px solid var(--linie);background:#fff;display:grid;grid-template-columns:240px 1fr;gap:32px}
.zwei>.block{padding:32px}
.hinweis{font:400 14px/1.6 Archivo,Arial,sans-serif;color:var(--grau)}
.formel{background:var(--flaeche);border-left:2px solid var(--tuerkis);font-size:15px;overflow-x:auto}
.quellen{font-size:15px;color:var(--text2)}.quellen li+li{margin-top:8px}
.taste{display:inline-block;padding:12px 24px;font-size:15px;font-weight:500;border:1px solid var(--tuerkis);margin:8px 16px 0 0}
.taste.voll{background:var(--tuerkis);color:#fff}.taste.voll:hover{background:var(--tuerkis-d);text-decoration:none}
.taste.linie{color:var(--tuerkis)}.taste.linie:hover{background:var(--flaeche);text-decoration:none}
.recht h2{font-size:20px}.recht h3{font-size:17px}
/* Fließbild der Software-Seite (Klassen der alten Website, hell gesetzt, Text ≥ 4,5:1) */
.diagramm .rohr{stroke:#8A9298;stroke-width:3;fill:none}.diagramm .rohr--neben{stroke-width:1.8}
.diagramm .bau{stroke:#6E767B;stroke-width:1.8;fill:none}.diagramm .bau--voll{stroke:#6E767B;stroke-width:1.8;fill:#EFEFED}
.diagramm .bau--fein{stroke:#8A9298;stroke-width:1.2;fill:none}
.diagramm .mst circle.ring{fill:#fff;stroke:#6E767B;stroke-width:1.8}
.diagramm .mst text.kz{font-family:"IBM Plex Mono",monospace;font-size:12px;fill:#5C6367}
.diagramm .mst text.wt{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:500;fill:#383E42}.diagramm .mst text.wt--klein{font-size:13px}
/* Fuß */
footer{border-top:1px solid var(--linie);padding:48px 0;font-size:15px;color:var(--text2);background:#fff}
footer>.innen{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer h2{font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin:0 0 8px}
footer ul{list-style:none}
footer a{color:var(--text2);display:inline-block;min-height:24px;line-height:24px;padding:4px 0}
footer .neben{display:flex;flex-wrap:wrap;gap:0 16px}
footer .unten{grid-column:1/-1;border-top:1px solid var(--linie);padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;font-size:12px;line-height:24px}
footer .unten a{padding:0}
@media (max-width:1080px){
 .hauptnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--linie);border-bottom:2px solid var(--text);flex-direction:column;height:auto;padding:8px 0;max-height:calc(100vh - var(--kopf));overflow-y:auto}
 .hauptnav.offen{display:flex}
 .hauptnav .punkt{display:block}.hauptnav .punkt>a{height:auto;min-height:44px;padding:8px var(--rand);border:0}
 .hauptnav .punkt>a[aria-current]{border:0}
 .ausklapp{display:none!important}
 .menue{display:block}
 /* ohne JavaScript: Hauptnavigation als Liste unter der Kopfzeile, Kopfzeile nicht fixiert */
 .ohne-js .kopfzeile{position:static}
 .ohne-js .kopfzeile>.innen{flex-wrap:wrap;height:auto;gap:0 16px}
 .ohne-js .kopfzeile>.innen>a:first-child{display:flex;align-items:center;min-height:var(--kopf)}
 .ohne-js .hauptnav{display:flex;position:static;order:3;width:100%;margin:0;padding:0 0 8px;border-bottom:0;max-height:none}
 .ohne-js .hauptnav .punkt>a{padding:8px 0}
 .ohne-js .menue{display:none}
 .ohne-js .subtabs{top:0}
 .kopf,.zwei,.block{grid-template-columns:1fr!important;gap:24px}
 .r3,.r4{grid-template-columns:repeat(2,1fr)}
 footer>.innen{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
 .diagramm svg{min-width:1000px}
}
@media (max-width:640px){
 :root{--rand:16px;--kopf:64px}
 html{scroll-padding-top:calc(var(--kopf) + 16px)}
 .subtabs{position:relative;top:auto}
 h1{font-size:30px}h2{font-size:20px}h3{font-size:17px}.lead{font-size:17px}
 .seitenkopf{padding-top:48px;padding-bottom:40px}.abschnitt{padding:56px 0}
 .r2,.r3,.r4,footer>.innen{grid-template-columns:1fr}
 .fakten{grid-template-columns:1fr}.fakt,.fakt+.fakt{padding:16px 0;border-left:0}.fakt+.fakt{border-top:1px solid var(--linie)}
 .fakt .wert{font-size:20px}
 .schritte{grid-template-columns:1fr}.schritt,.schritt+.schritt{padding:16px 0;border-left:0;border-bottom:1px solid var(--linie)}
 .abschnitt>.block,.zwei>.block{padding:24px 16px}
 .liste li.paar{grid-template-columns:1fr;gap:0}
 .tabelle td.zahl{white-space:normal}
 .marke{height:26px}
}
@media print{
 .kopfzeile,.subtabs,.sprung,.menue,.sprachen,.taste,.scrollhinweis,footer .unten span+span{display:none!important}
 @page{margin:20mm 20mm 20mm 25mm}
 body{font-size:10.5pt;line-height:1.5}
 h1{font-size:22pt}h2{font-size:15pt}h3{font-size:11.5pt}.lead{font-size:12pt}
 .text p,.text li,.liste li,.karte p{font-size:10.5pt}.tabelle{font-size:9.5pt}
 .seitenkopf{padding:0 0 16px}.abschnitt{padding:16px 0;border-top:0}.abschnitt.grau{background:none}
 .abschnitt>*{padding-left:0;padding-right:0}
 .scrollflaeche,.formel{overflow:visible}.diagramm svg{min-width:0!important}
 a[href^="http"]::after,a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:9pt;color:var(--grau);overflow-wrap:anywhere}
 a[href^="mailto"]::after{content:" (office@profectronics.com)"}
 h1,h2,h3{break-after:avoid}
 figure,table,.block,.karte,.fakt,.schritt,.formel,li{break-inside:avoid}
 footer{padding:16px 0}
}

/* --- Fuß: Fassung der bisherigen Website, dunkel ------------------------- */
footer{background:#383E42;color:#C8C8C7;border-top:0;padding:64px 0 32px}
footer>.innen{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}
footer h2{font-family:Archivo,"Segoe UI",Arial,sans-serif;font-size:17px;font-weight:600;letter-spacing:0;text-transform:none;color:#fff;margin:0 0 16px}
footer .marke{height:34px;width:auto;margin-bottom:20px}
footer a{color:#C8C8C7;padding:0;min-height:0;line-height:24px}
footer a:hover{color:#fff;text-decoration:underline}
footer li{padding:4px 0}
@media (hover:none){footer li{padding:8px 0}}
footer .firma{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#B4B9BB}
footer .daten{margin:14px 0 0;font-size:13px;line-height:1.6;color:#B4B9BB}
footer .daten b{color:#fff;font-weight:500}
footer .neben{margin-top:16px;gap:0 24px}
footer .unten{border-top:1px solid #4A5257;margin-top:48px;padding-top:20px;color:#B4B9BB;justify-content:flex-start;gap:8px 24px}
footer .unten .neben{margin-top:0;gap:0 24px}
footer .unten a{color:#B4B9BB}
@media (max-width:1080px){footer>.innen{grid-template-columns:1fr 1fr}}
@media (max-width:640px){footer>.innen{grid-template-columns:1fr}footer{padding:48px 0 24px}footer .unten{margin-top:32px}}
@media print{
 footer{background:#fff!important;color:#383E42!important;border-top:1px solid #E4E4E2;padding:16px 0}
 footer h2,footer a,footer .firma,footer .daten,footer .daten b,footer .unten,footer .unten a{color:#383E42!important}
 footer .marke{display:none}
}