/* Testversion 2: Ergänzungen zum Feedback vom 21.10.2026 */
/* Header: Telefon und Projekt anfragen */
.htools{display:flex;align-items:center;gap:1.25rem;margin-left:auto;pointer-events:auto}
.hcall{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.9rem;font-weight:500;text-decoration:none;transition:color .3s}
.hcall svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.hcall-t{display:grid}
.hcall-t>span{grid-area:1/1;white-space:nowrap;transition:opacity .3s,transform .3s var(--ease)}
.hcall-t .b{opacity:0;transform:translateY(.3rem)}
@media (hover:hover){.hcall:hover{color:var(--brand)}.hcall:hover .a{opacity:0;transform:translateY(-.3rem)}.hcall:hover .b{opacity:1;transform:none}}
.btn-ol{display:inline-flex;align-items:center;padding:.6rem 1.15rem;border-radius:999px;border:1px solid var(--line);color:var(--text);font-weight:600;font-size:.95rem;text-decoration:none;background:transparent;transition:border-color .3s,color .3s,background .3s}
.btn-ol:hover{border-color:var(--brand);color:var(--brand)}
@media (min-width:1200px){.htools{padding:.3rem .3rem .3rem 1rem;border-radius:999px;transition:background .3s,box-shadow .3s}.hdr.solid .htools{background:rgba(236,236,232,.88);backdrop-filter:blur(.75rem);box-shadow:0 .5rem 1.5rem -1rem rgba(0,0,0,.35)}.hdr.solid.on-dark .htools{background:rgba(30,30,30,.7)}.hdr.on-dark .hcall{color:rgba(255,255,255,.75)}.hdr.on-dark .btn-ol{color:#fff;border-color:rgba(255,255,255,.35)}}
.htoast{position:fixed;top:5.25rem;right:2rem;z-index:70;background:#141414;color:#fff;font-size:.85rem;padding:.55rem .95rem;border-radius:999px;opacity:0;transform:translateY(-.4rem);transition:opacity .3s,transform .3s;pointer-events:none}
.htoast.show{opacity:1;transform:none}
@media (max-width:1199px){.btn-ol{display:none}.hcall-t{display:none}.htools{margin-left:1rem;gap:.5rem}}
@media (max-width:900px){.htools{margin-left:auto;margin-right:.5rem}.hcall{width:3.25rem;height:3.25rem;justify-content:center;border-radius:999px;background:var(--light);color:var(--text)}.hcall svg{width:1.2rem;height:1.2rem}}
/* Hero: Vertrauenszeile */
.htrust{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem 1.3rem;margin-top:2.75rem;padding-top:1.6rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted);max-width:36rem}
.htrust span{display:inline-flex;align-items:center}
.htrust span::before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:var(--brand);margin-right:.6rem;flex:0 0 auto}
@media (max-width:950px){.htrust{margin-top:2.1rem}}
/* Herstellerlaufband: gleiches Anthrazit wie die Animationsflächen */
.strip,.strip .lbl{background:#2a2a2a}
/* Kachelraster ohne halbe Reihen */
.cards.cols-9,.cards.cols-6e{grid-template-columns:repeat(6,minmax(0,1fr))}
.cards.cols-9>article,.cards.cols-6e>article{grid-column:span 2}
@media (max-width:1100px){.cards.cols-9>article,.cards.cols-6e>article{grid-column:span 3}.cards.cols-9>article:last-child{grid-column:span 6}}
@media (max-width:700px){.cards.cols-9>article,.cards.cols-6e>article,.cards.cols-9>article:last-child{grid-column:span 6}}
/* Label im schwarzen Feld: weißer Punkt mit rotem Puls */
.lhead .eyebrow::before{background:var(--brand);box-shadow:0 0 0 0 rgba(208,0,48,.4);animation:kpulse 2.8s ease-out infinite}
@media (prefers-reduced-motion:reduce){.lhead .eyebrow::before{animation:none}}
@keyframes kpulse{0%{box-shadow:0 0 0 0 rgba(208,0,48,.45)}70%{box-shadow:0 0 0 .45rem rgba(208,0,48,0)}100%{box-shadow:0 0 0 0 rgba(208,0,48,0)}}
/* Wir programmieren: aufklappbar */
.rowline.bx{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:2rem;row-gap:0}
.bx .bwrap{grid-column:1/-1}
.bsel{display:flex;gap:.25rem 1.5rem;flex-wrap:wrap}
.bbtn{position:relative;appearance:none;background:none;border:0;padding:.35rem 0 .6rem;font:inherit;font-size:clamp(1.15rem,1.5vw,1.6rem);font-weight:700;letter-spacing:.06em;color:var(--text);cursor:pointer;transition:color .25s}
.bbtn::after{content:"";position:absolute;left:50%;bottom:0;width:.5rem;height:.5rem;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:translate(-50%,-.2rem) rotate(45deg);opacity:0;transition:opacity .25s,transform .3s var(--ease)}
.bbtn:hover,.bbtn.active{color:var(--brand)}
.bbtn:hover::after,.bbtn.active::after{opacity:1;transform:translate(-50%,0) rotate(45deg)}
.bbtn.active::after{transform:translate(-50%,0) rotate(225deg)}
.bbtn:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:.3rem}
.bhint{font-size:.8rem;color:var(--muted);white-space:nowrap}
.bwrap{flex-basis:100%;display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.bwrap.open{grid-template-rows:1fr}
.bwrap>.bin{overflow:hidden;min-height:0}
.bpanel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem 1.5rem;padding:1.5rem 0 .25rem;border-top:1px solid var(--line);margin-top:.5rem}
.bpanel[hidden]{display:none}
.bpanel h4{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.bpanel .chips span{background:var(--bg);border:0;font-size:.8rem;padding:.3rem .7rem}
@media (max-width:900px){.bpanel{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.rowline.bx{grid-template-columns:1fr;row-gap:.6rem}}
@media (max-width:700px){.bsel{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;gap:1.4rem;-webkit-overflow-scrolling:touch}.bsel::-webkit-scrollbar{display:none}.bbtn{font-size:1.05rem;flex:0 0 auto}.bhint{margin:0;flex-basis:100%}.bpanel{grid-template-columns:1fr}}
/* Ablauf: fünf Schritte */
.steps.s5{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.steps.s5 li{padding:1.75rem 1.25rem 1.6rem}
.steps.s5 li::after{right:-1rem;width:1rem}
.steps li.hl{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.stag{position:absolute;top:1.35rem;right:1rem;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);background:rgba(208,0,48,.08);padding:.3rem .55rem;border-radius:999px}
@media (min-width:701px) and (max-width:1100px){.steps.s5{grid-template-columns:repeat(6,minmax(0,1fr))}.steps.s5 li{grid-column:span 2}.steps.s5 li:nth-child(n+4){grid-column:span 3}}
@media (max-width:700px){.steps.s5{grid-template-columns:none}.steps.s5 li{grid-column:auto}}
/* Über uns */
#ueber-uns .media img{object-position:center 18%}
.vals.vals3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vals.vals3 b{font-size:1.25rem}
body[data-ueber="a"] .ub-b{display:none}
@media (max-width:700px){.vals.vals3{grid-template-columns:1fr}}
.branchen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.branchen .lbl{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.branchen .chips{flex:1 1 30rem}
/* Standort: Kartenvarianten */
.smap .dm{display:none;width:100%;height:100%}
body[data-karte="1"] .dm.k1,body[data-karte="2"] .dm.k2,body[data-karte="3"] .dm.k3{display:block}
.dmap{display:block;width:100%;height:100%}
.dmap .ml{font-family:inherit;font-size:18px;font-weight:700;fill:#232323;paint-order:stroke;stroke:#f6f6f3;stroke-width:4px;stroke-linejoin:round}
.dmap .ml-s{font-size:15px;font-weight:600;fill:#5d6166}
.dmap .mpulse{transform-box:fill-box;transform-origin:center;animation:mpulse 2.6s ease-out infinite}
@keyframes mpulse{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.dmap .mpulse{animation:none}}
@media (max-width:700px){.dmap .ml{font-size:24px;stroke-width:6px}.dmap .ml-s{font-size:21px}}
.mcap{margin-top:.9rem;font-size:.9rem;color:var(--muted)}
/* Kontaktformular */
.fmode{display:inline-flex;gap:.25rem;padding:.3rem;border-radius:999px;background:var(--bg);margin:0 0 1.5rem}
.fmode button{appearance:none;border:0;background:transparent;font:inherit;font-weight:600;font-size:.92rem;padding:.6rem 1.1rem;border-radius:999px;color:var(--muted);cursor:pointer;transition:background .3s,color .3s}
.fmode button.active{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.fset{border:0;padding:0;margin:0 0 1.25rem;min-width:0}
.fset legend{font-size:.9375rem;font-weight:600;margin-bottom:.6rem;padding:0}
.fset legend i,.req{font-style:normal;color:var(--brand)}
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pills label{position:relative;cursor:pointer}
.pills input{position:absolute;opacity:0;width:1px;height:1px}
.pills span{display:inline-flex;align-items:center;padding:.62rem 1.05rem;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:.92rem;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.pills label:hover span{transform:translateY(-.125rem);border-color:#c9c9c4}
.pills input:checked+span{background:var(--brand);border-color:var(--brand);color:#fff}
.pills input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.fhint{font-size:.85rem;color:var(--muted);margin:-.4rem 0 1rem}
.fdrop{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;border:1px dashed #c9c9c4;border-radius:.75rem;background:#fff;cursor:pointer;color:var(--muted);font-size:.95rem;transition:border-color .25s,color .25s;margin-bottom:1rem}
.fdrop:hover{border-color:var(--brand);color:var(--text)}
.fdrop svg{width:1.25rem;height:1.25rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fdrop input{position:absolute;opacity:0;width:1px;height:1px}
.fdrop b{color:var(--text);font-weight:600}
.fdrop small{display:block;font-size:.8rem}
.fnote{font-size:.875rem;color:var(--muted);margin-top:.9rem}
#kform[data-mode="nachricht"] .m-r{display:none}
#kform[data-mode="rueckruf"] .m-n{display:none}
/* Variantenumschalter (nur Testversion) */
.vpanel{position:fixed;left:.875rem;bottom:3.1rem;z-index:61;display:flex;flex-direction:column;gap:.45rem;background:#fff;border:1px solid var(--line);border-radius:1rem;padding:.7rem .8rem;font-size:.78rem;box-shadow:0 .75rem 2rem -1rem rgba(0,0,0,.35)}
.vpanel b{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vpanel div{display:flex;align-items:center;gap:.3rem}
.vpanel span{min-width:4.2rem;font-weight:600}
.vpanel button{appearance:none;border:1px solid var(--line);background:#fff;border-radius:999px;min-width:1.9rem;height:1.9rem;font:inherit;font-weight:700;cursor:pointer}
.vpanel button.active{background:var(--brand);border-color:var(--brand);color:#fff}
@media (max-width:900px){.vpanel{bottom:2.9rem;padding:.5rem .7rem}.vpanel b{cursor:pointer}.vpanel b::after{content:" ▴"}.vpanel:not(.open) div{display:none}.vpanel:not(.open) b::after{content:" ▾"}}

/* 21.10.2026 abends: Werte-Boxen unten im Hero, Stichpunkte raus */
.hero2 .vals.hvals{display:grid;margin-top:0;padding-bottom:3rem}
.hero2 .vals.hvals div{opacity:1;transform:none}
@media (max-width:950px){.hero2 .vals.hvals{padding-bottom:2.5rem}}
@media (max-width:700px){.hero2 .vals.hvals{gap:.6rem}.hero2 .vals.hvals div{padding:1rem 1.15rem}}
/* Abstand Leistungen zu Ablauf kleiner */
#leistungen{padding-bottom:4rem}#ablauf{padding-top:4rem}
@media (max-width:900px){#leistungen{padding-bottom:2.5rem}#ablauf{padding-top:2.5rem}}
/* Über-uns-Foto ohne Parallax-Überstand, damit die Köpfe ganz sichtbar sind */
#ueber-uns .media .pimg{inset:0;transform:none!important}
/* Standortkarte neu (21.10.2026): animierte Varianten 1 bis 3 */
.smap .dm svg.km{display:block;width:100%;height:100%}
.km{font-family:"DM Sans",system-ui,sans-serif}
.km .kmono,.km text.kmono,.km g.kmono text{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.vpanel button[title]{cursor:pointer}
body[data-karte="4"] .dm.k4{display:block}
body[data-karte="5"] .dm.k5{display:block}
/* Runde 2 (21.10.2026) */
/* Header mit Hintergrund beim Scrollen */
@media (min-width:1200px){.page-onepage .hdr.scrolled{background:rgba(236,236,232,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(0,0,0,.08)!important;transition:background .3s,box-shadow .3s}
.page-onepage .hdr.scrolled .logo img:first-child{opacity:1!important}.page-onepage .hdr.scrolled .logo .logo-light{opacity:0!important}}
/* Hero: flache Vertrauensleiste statt Kacheln */
.htrust2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);max-width:38rem}
.htrust2 svg{display:block;width:1.3rem;height:1.3rem;fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.55rem}
.htrust2 b{display:block;font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:.15rem}
.htrust2 span{display:block;font-size:.85rem;line-height:1.4;color:var(--muted)}
@media (max-width:520px){.htrust2{gap:.9rem;margin-top:1.8rem}.htrust2 b{font-size:.85rem}.htrust2 span{font-size:.78rem}}
/* Systeme und Software: fünf Spalten */
@media (min-width:901px){.bpanel{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* Branchen: Desktop max. 3 Reihen, Handy als Laufband (21.10.2026) */
.branchen .chips{display:block;min-width:0}
.branchen .btrack{display:flex;flex-wrap:wrap;gap:calc(.5rem*var(--bs,1))}
.branchen .btrack span{font-size:calc(.875rem*var(--bs,1));padding:calc(.375rem*var(--bs,1)) calc(.875rem*var(--bs,1));white-space:nowrap}
.branchen .btrack .dup{display:none}
.branchen.stack{flex-direction:column;align-items:flex-start}.branchen.stack .chips{flex:none;width:100%}
@keyframes bmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:1100px){
.branchen .chips{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.branchen .btrack{flex-wrap:nowrap;width:max-content;gap:.5rem;padding:.2rem 0;animation:bmove 45s linear infinite}
.branchen .btrack span{--bs:1;font-size:.875rem;padding:.375rem .875rem}
.branchen .btrack .dup{display:block}
.branchen .btrack span:last-child{margin-right:.5rem}}
@media (max-width:700px){.branchen .chips{margin:0 -1.25rem}}
@media (max-width:1100px) and (prefers-reduced-motion:reduce){.branchen .chips{overflow-x:auto}.branchen .btrack{animation:none}}
.branchen .btrack .br{flex-basis:100%;height:0;margin:0;padding:0;border:0}
.branchen .btrack.even span:not(.dup){flex:1 1 auto;text-align:center}
@media (max-width:1100px){.branchen .btrack .br{display:none}}

/* 22.10.2026: Quellenangabe Karte (OSM, ODbL) */
.smap{position:relative}
.smap .osm{position:absolute;right:.6rem;bottom:.5rem;margin:0;z-index:5;font-size:.62rem;line-height:1.3;padding:.22rem .55rem;border-radius:99px;background:rgba(20,20,20,.5);color:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.smap .osm a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 22.10.2026: Vertrauensleiste auf dem Handy als ruhige Liste statt drei ungleich hoher Spalten */
@media (max-width:700px){
.htrust2{grid-template-columns:1fr;gap:.9rem;max-width:none;margin-top:1.6rem;padding-top:1.3rem}
.htrust2>div{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;align-items:center}
.htrust2 svg{grid-row:1 / span 2;box-sizing:content-box;width:1.15rem;height:1.15rem;padding:.6rem;margin:0;border-radius:50%;background:rgba(208,0,48,.08)}
.htrust2 b{font-size:.95rem;margin:0;line-height:1.25}
.htrust2 span{font-size:.85rem;line-height:1.35}
}

/* 22.10.2026: Vertrauensleiste ab Tablet: gemeinsame Zeilen (Subgrid), Texte starten immer auf gleicher Höhe, dritte Spalte etwas breiter */
@media (min-width:701px){
.htrust2{grid-template-columns:1fr 1fr 1.18fr;grid-template-rows:auto auto auto;row-gap:0}
.htrust2>div{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
}

/* 22.10.2026: Punkt in allen Abschnitts-Pills pulsiert wie bei Robotik/SPS/Energie */
.eyebrow::before{animation:kpulse 2.8s ease-out infinite}
@media (prefers-reduced-motion:reduce){.eyebrow::before{animation:none}}

/* 22.10.2026: Herstellerauswahl in den Leistungskarten auf dem Handy umbrechen statt seitlich abschneiden */
@media (max-width:700px){
.bsel{flex-wrap:wrap;overflow:visible;row-gap:.6rem;column-gap:1.25rem}
}
/* Kontakt-Ueberschrift als h2, gleiche Optik wie vorher h1 (22.10.2026) */
.phead h2{font-size:clamp(2.25rem,4.2vw,3.5rem);margin-bottom:1.125rem}