@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-latin.woff2) format("woff2"),url(../fonts/Montserrat.ttf) format("truetype");font-weight:100 900;font-display:swap}
/* v59: angeglichene Ersatzschrift (Arial auf Montserrat-Maße), damit beim Laden nichts springt */
@font-face{font-family:"Montserrat Ersatz";src:local("Arial"),local("Helvetica Neue"),local("Helvetica"),local("Liberation Sans");size-adjust:113.28%;ascent-override:84.95%;descent-override:22.03%;line-gap-override:0%;font-weight:100 900}
:root{--c:#009FE3;--m:#E2007A;--y:#FFED00;--k:#111;--t:#333;--mu:#6b6b6b}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:Montserrat,"Montserrat Ersatz","Helvetica Neue",Arial,sans-serif;color:var(--t);font-size:16px;line-height:1.6;background:#fff}
h1,h2,h3{font-weight:600;line-height:1.15;text-transform:uppercase;letter-spacing:.02em}
a{color:var(--c)}.w{max-width:1100px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;padding:14px 26px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:#fff;transition:filter .2s,transform .2s}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px)}.bc{background:var(--c)}.bm{background:var(--m)}.by{background:var(--y);color:var(--m)}.bk{background:#111;color:var(--y)}
header{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo img{height:34px;width:auto;display:block}
.menu{display:flex;gap:26px;list-style:none}.menu a{color:#444;text-decoration:none;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.menu a:hover{color:var(--c)}.menu a.act{color:var(--m);font-weight:700}
#mt{display:none}.bu{display:none;font-size:26px;cursor:pointer;color:#333}
/* Startbild mit großem Logo */
.land{min-height:calc(72vh - 66px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:42px;padding:60px 24px}
.land img{width:min(640px,86vw);height:auto}
.land p{font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--mu);margin-top:-24px}
/* Vollbild-Abschnitte mit eingefärbtem Foto */
.full{position:relative;min-height:68vh;display:flex;align-items:center;background:center/cover;color:#fff}
.full .w{width:100%;padding-top:70px;padding-bottom:70px}
.full small{display:block;font-size:20px;font-weight:400;text-transform:uppercase;letter-spacing:.04em}
.full h1,.full h2{font-size:clamp(30px,4.4vw,46px);font-weight:600;margin:2px 0 18px}
.full p{max-width:640px;font-size:17px;font-weight:500;margin-bottom:26px;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.full.sm{min-height:44vh}
/* Leistungen auf Magenta */
.mag{background:linear-gradient(110deg,#a0005a 0%,#E2007A 100%);color:#fff;padding:70px 0}
.mag h2{text-align:center;font-size:28px;margin-bottom:40px}
.svc{display:grid;grid-template-columns:repeat(5,1fr);gap:30px 22px;text-align:center}
.svc a,.svc div{color:#fff;text-decoration:none;display:block;transition:transform .25s}.svc a:hover{transform:translateY(-4px)}
.svc img{width:62px;height:62px;margin:0 auto 14px;display:block}
.svc h3{font-size:15px;font-weight:700;margin-bottom:6px}.svc p{font-size:13.5px;line-height:1.5;color:#ffe3f2}
.svc .hl{position:relative}.svc .hl:after{content:"NEU";position:absolute;top:-10px;left:50%;margin-left:22px;background:var(--y);color:var(--m);font-size:10px;font-weight:800;letter-spacing:.1em;padding:2px 6px}
.center{text-align:center;margin-top:40px}
/* Gelb: Zähler + News */
.yel{background:linear-gradient(110deg,#FFE600,#FFED00 60%,#ffd800);padding:64px 0;color:#333}
.cnt{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;gap:20px;margin-bottom:46px}
.cnt b{display:block;font-size:56px;font-weight:400;line-height:1;color:#333}.cnt span{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.yel h2{font-size:24px;margin-bottom:18px}
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ni{background:#fff;padding:18px 20px;position:relative;transition:transform .25s,box-shadow .25s}.ni:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.ni time{font-size:12px;font-weight:700;color:var(--m)}.ni h3{font-size:15px;margin:4px 0 6px;color:#222}.ni p{font-size:14px;color:var(--mu)}
.ex{position:absolute;top:12px;right:12px;font-size:9.5px;font-weight:800;letter-spacing:.12em;color:#999;border:1px solid #ccc;padding:1px 5px}
/* Inhaltsseiten */
.sec{padding:60px 0}.sec h2{font-size:24px;color:#222;margin-bottom:14px}.sec p{max-width:760px;margin-bottom:12px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.chips li{border:2px solid var(--c);color:#0a6f9e;font-weight:600;font-size:13px;padding:5px 12px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.cols div{border-top:5px solid var(--c);padding-top:12px}.cols div:nth-child(2){border-color:var(--m)}.cols div:nth-child(3){border-color:var(--y)}
.cols h3{font-size:15px;margin-bottom:6px;color:#222}.cols p{font-size:14px;color:var(--mu)}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{aspect-ratio:1/1;display:flex;align-items:flex-end;padding:16px;color:#fff;text-decoration:none;background:center/cover;position:relative;transition:transform .25s}
.cat:before{content:"";position:absolute;inset:0;mix-blend-mode:multiply}.cat.c:before{background:var(--c)}.cat.m:before{background:var(--m)}.cat.y:before{background:#e6c800}.cat.k:before{background:#333}
.cat span{position:relative;font-weight:700;text-transform:uppercase;font-size:15px;line-height:1.25}.cat small{display:block;font-weight:500;text-transform:none;font-size:12px}
.cat:hover{transform:translateY(-4px)}
.note{font-size:13px;color:var(--mu);margin-top:16px;border-left:4px solid var(--m);padding-left:12px}
.ph{background:#fff8c4;padding:0 4px}
form{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px}label{display:grid;gap:4px;font-size:12px;font-weight:600;text-transform:uppercase;color:#555}
input,textarea,select{font:inherit;font-size:15px;padding:11px 12px;border:1px solid #ccc;text-transform:none}textarea{min-height:100px}.fl{grid-column:1/-1}form .btn{border:0;cursor:pointer;justify-self:start}
.imp{font-size:14px;color:var(--mu);margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.imp h3{font-size:14px;color:#222;margin-bottom:6px}
.cr{font-size:11px;opacity:.75;line-height:1.35;max-width:min(92vw,520px)}.full .cr{position:absolute;right:12px;bottom:8px;text-align:right}
footer{padding:22px 0;font-size:12px;color:#888;border-top:1px solid #eee}footer .w{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}footer a{color:#777;text-decoration:none;margin-left:14px}
/* Kontaktleiste unten – Farbe wechselt je Abschnitt */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--c);color:#fff;transition:background .5s ease,color .5s ease}
.cbar .w{display:flex;justify-content:center;gap:18px;align-items:center;height:52px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.cbar a{color:inherit;text-decoration:none}.cbar i{opacity:.6;font-style:normal}
.cbar.m{background:var(--m)}.cbar.y{background:var(--y);color:var(--m)}.cbar.k{background:#111;color:#fff}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width:900px){.svc{grid-template-columns:repeat(2,1fr)}.cnt,.cats{grid-template-columns:repeat(2,1fr)}.news,.cols,.imp{grid-template-columns:1fr}
 .bu{display:block}.menu{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;flex-direction:column;padding:18px 24px;gap:14px;box-shadow:0 8px 20px rgba(0,0,0,.08)}#mt:checked~.menu{display:flex}}
@media (max-width:560px){.svc{grid-template-columns:1fr}form{grid-template-columns:1fr}.cbar .w{font-size:12px;gap:10px}.cbar .hide{display:none}.cnt b{font-size:42px}.land{min-height:auto;padding:48px 20px}}
/* --- neu 30.10. --- */
.lang{font-size:12px;letter-spacing:.12em;color:#bbb;margin-left:22px}.lang a{color:#999;text-decoration:none;padding:0 3px}.lang a.act,.lang a:hover{color:#111;font-weight:700}
.navr{display:flex;align-items:center}
.land{min-height:auto;padding:46px 24px 40px;gap:22px}.land img{width:min(560px,80vw)}.land p{margin-top:0;color:#111}
.full{min-height:56vh}
.svc4{grid-template-columns:repeat(4,1fr)}
.mag{padding:56px 0}.yel{padding:52px 0}
.cbar .w{flex-wrap:wrap}
@media (max-width:900px){.svc4{grid-template-columns:repeat(2,1fr)}.navr .lang{margin-left:12px}}
@media (max-width:560px){.svc4{grid-template-columns:1fr 1fr}.svc h3{font-size:13px}}
/* Einstieg */
#intro{position:fixed;inset:0;z-index:100;background:#fff;transition:opacity .9s ease,visibility .9s}
/* v93: Logo 20 % kleiner als v92, Claim 10 % kleiner; Linie folgt dem Logo */
#intro{--lw:min(30.24vw,403.2px);--cw:min(34.02vw,453.6px)}#intro .il{position:absolute;left:50%;top:44%;width:var(--lw);transform:translate(-50%,-50%);opacity:0;animation:iLogo 1.8s ease .2s forwards;transition:transform 1s ease,filter 1s,opacity .8s}
#intro .ic{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1em}
#intro .ln{height:1px;width:0;background:linear-gradient(90deg,var(--c) 0 33.3%,var(--m) 33.3% 66.6%,var(--y) 66.6%);animation:iLine 1s ease 2.6s forwards}#intro .ic{gap:calc(var(--lw)*.045);top:calc(44% + var(--lw)*.139);bottom:auto;height:auto;justify-content:flex-start}
#intro .cl{font:300 calc(var(--cw)*.0375)/1.3 Montserrat,"Montserrat Ersatz",Arial,sans-serif;color:#000;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;opacity:0;animation:iIn 1.2s ease 2.8s forwards}
#intro.gone{opacity:0;visibility:hidden;pointer-events:none}#intro.gone .il{transform:translate(-50%,-90%) scale(.9);filter:blur(10px);opacity:0}
html.intro{overflow:hidden}
@media (max-width:767px){}
@keyframes iLogo{to{opacity:1}}@keyframes iLine{to{width:calc(var(--lw)*.45)}}@keyframes iIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){#intro .il,#intro .ln,#intro .cl{animation-duration:.01s;animation-delay:0s}}
.full,section[id]{scroll-margin-top:66px}
html[lang=en] .svc .hl:after{content:"NEW"}
@media (max-width:560px){.cbar .w{flex-wrap:nowrap;font-size:10.5px;gap:8px;letter-spacing:0;height:52px}}
@media (max-width:560px){.cbar .w{padding:0 8px;font-size:10px;gap:6px}}
#intro{touch-action:none;overscroll-behavior:none}html.intro,html.intro body{overscroll-behavior:none;touch-action:none}
#intro .ic{margin-top:calc(var(--lw)*.0375)}
/* --- neu 02.11. (v12): Quadrate-Menü, Einstieg blendet auf Weiß aus, Leistungen mit großem Hintergrundbild --- */
/* Menü = die vier Farbquadrate aus dem Logo, oben an den Fensterrand gedrückt: nur die untere Hälfte ist sichtbar,
   die Beschriftung sitzt darin. Bei Maus/Fokus kommt das Quadrat ein Stück herunter. */
.qm{position:fixed;top:-42px;left:50%;transform:translateX(-50%);z-index:60;display:flex;gap:10px}
.q{position:relative;display:block;width:84px;height:84px;text-decoration:none;color:#fff;transform-origin:0 0;transition:filter .25s ease,translate .35s ease}
.q span{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.04em;line-height:1.2;transition:opacity .6s ease}
.q.k{background:#1a171b}.q.c{background:#009FE3}.q.m{background:#E2007A}.q.y{background:#FFED00;color:#1a171b}
.q:hover,.q:focus-visible{filter:brightness(1.12);translate:0 16px}
/* Sprachumschalter bleibt oben rechts in der Ecke; leichter weißer Grund, damit er auch über Bildern lesbar ist */
body>.lang{position:fixed;top:22px;right:24px;z-index:61;margin:0;background:rgba(255,255,255,.88);padding:4px 6px;transition:opacity .6s ease}
/* Unterseiten: Menü sofort sichtbar, Inhalt beginnt unter den Quadraten */
body{padding-top:128px}
/* Startseite: solange der Einstieg zu sehen ist, sind Menü, Sprachumschalter und Kontaktleiste ausgeblendet */
body:has(#intro){padding-top:0}
html.js:not(.menu-da) #intro~.qm .q{opacity:0;pointer-events:none}html.js:not(.menu-da) #intro~.lang{opacity:0;pointer-events:none}html.oben .cbar{transform:translateY(100%)}
.cbar{transition:background .5s ease,color .5s ease,transform .5s ease}
/* Einstieg im Seitenfluss (eine Bildschirmhöhe); Ruhezustand unverändert (top:44 % usw.).
   --p (0 … 1) setzt site.js beim Scrollen: Logo, Linie und Claim wandern schneller nach oben und sind bei --p = .45 ganz auf Weiß ausgeblendet. */
#intro{position:relative;inset:auto;height:100vh;height:100svh;z-index:1;transition:none;touch-action:auto;overscroll-behavior:auto;opacity:calc(1 - var(--p,0)/.45)}
#intro .il,#intro .ic{translate:0 calc(var(--p,0)*-40vh)}
/* Leistungen kommen früher und schneller hoch als der Einstieg verschwindet (gegenläufige Bewegung) */
#intro~main{position:relative;z-index:2;margin-top:-30vh;transform:translateY(calc((1 - var(--p,0))*30vh))}
/* Leistungen: je Abschnitt volle Breite, großes Hintergrundbild, weißer Kasten davor */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.svs{background:#fff}
.sv{position:relative;height:max(540px,86vh);overflow:hidden;display:flex;align-items:center;background:#222}
.sv .bg{position:absolute;left:0;right:0;top:-22%;height:144%;will-change:transform}
.sv .bg img{display:block;width:100%;height:100%;object-fit:cover}
/* dezentes Licht: heller Schein von oben rechts, leichte Vignette an den Rändern */
.sv .bg:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 72% 30%,rgba(255,255,255,.22),rgba(255,255,255,0) 70%),radial-gradient(ellipse 85% 80% at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.38) 100%)}
.sv .w{position:relative;width:100%}
.sv .box{display:block;max-width:470px;background:#fff;padding:34px 38px 30px;text-decoration:none;color:var(--t);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.sv h3{font-size:26px;color:#222;margin-bottom:12px}
.sv p{font-size:17px;color:var(--mu)}
.sv.hl h3:after{content:"NEU";display:inline-block;vertical-align:middle;margin-left:10px;background:var(--y);color:var(--m);font-size:10px;font-weight:800;letter-spacing:.1em;padding:2px 6px}
html[lang=en] .sv.hl h3:after{content:"NEW"}
/* weißer Kasten gleitet sanft von links herein (Klasse .in setzt site.js) */
.js .sv .box{opacity:0;transform:translateX(-60px);transition:opacity .9s ease,transform .9s ease}
.js .sv.in .box{opacity:1;transform:none}
.svend{padding:56px 0 60px}.svend .center{margin-top:0}
@media (max-width:767px){
 .qm{left:12px;top:-31px;transform:none;gap:6px}.q{width:62px;height:62px}.q span{font-size:8.5px;bottom:6px;letter-spacing:.02em}.q:hover,.q:focus-visible{translate:0 10px}
 body>.lang{top:14px;right:10px}body{padding-top:92px}
 .sv{height:max(480px,78vh);height:max(480px,78svh);align-items:flex-end;padding-bottom:64px}.sv .box{padding:24px 24px 20px;margin-right:24px}.sv h3{font-size:20px}.sv p{font-size:15px}
 .js .sv .box{transform:translateX(-40px)}}
@media (prefers-reduced-motion:reduce){.js .sv .box{opacity:1;transform:none;transition:none}#intro .il,#intro .ic{translate:none}#intro~main{transform:none}}
/* --- v15 (02.11.): Leistungen zweigeteilt, Übergang ohne Weißfläche --- */
/* Einstieg blendet schneller ganz aus (bei --p = .3 ist alles weg – auch der Claim hinter den Menü-Quadraten) */
#intro{opacity:calc(1 - var(--p,0)/.3)}
/* Leistungen schieben sich während des Ausblendens hoch und stehen bei --p = .3 oben – kein weißer Streifen mehr */
#intro~main{margin-top:-70vh;transform:translateY(calc(max(0, 1 - var(--p,0)/.3)*70vh))}
/* Abschnitt: links Text auf Weiß (ca. ein Drittel), rechts Bild (ca. zwei Drittel) */
.sv{display:grid;grid-template-columns:40% 60%;height:max(560px,88vh);padding:0;background:#fff;overflow:hidden;align-items:stretch}
.sv .st{align-self:center;padding:0 40px 0 clamp(24px,5vw,96px)}
.sv h3{white-space:nowrap;font-size:30px;line-height:1.2;color:#222;margin:0 0 26px}
.sv h3.umbruch{white-space:normal}
.sv .st p{font-size:16.5px;line-height:1.7;color:#555;margin:0 0 14px;max-width:520px}
.sv .mehr{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--m);text-decoration:none}
.sv .mehr:hover{text-decoration:underline}
.sv .bild{position:relative;overflow:hidden;background:#eee}
.sv .bild .bg{top:-22%;height:144%}
/* Bildausschnitt je Foto (näher ran aufs Hauptmotiv): Fokuspunkt + Zoom */
.sv .bg img{object-position:var(--fx,50%) var(--fy,50%);transform:scale(var(--zoom,1));transform-origin:var(--fx,50%) var(--fy,50%)}
.sv[data-bild=montage]{--fx:4%;--fy:60%;--zoom:1.15}
.sv[data-bild=reparatur]{--fx:62%;--fy:50%;--zoom:1.12}
.sv[data-bild=ultraschall]{--fx:40%;--fy:45%;--zoom:1.2}
.sv[data-bild=gebrauchtcheck]{--fx:72%;--fy:55%;--zoom:1.15}
.sv[data-bild=ersatzteile]{--fx:45%;--fy:40%;--zoom:1.12}
/* Hereinkommen (Klasse .in setzt site.js): Bild blendet ein und gleitet von rechts, Text leicht von links, versetzt */
.js .sv .bild{opacity:0;transform:translateX(90px);transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.js .sv .st>*{opacity:0;transform:translateX(-36px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.js .sv .st h3{transition-delay:.25s}.js .sv .st p{transition-delay:.4s}.js .sv .st p+p{transition-delay:.5s}.js .sv .st .mehr{transition-delay:.6s}
.js .sv.in .bild,.js .sv.in .st>*{opacity:1;transform:none}
@media (max-width:767px){
 /* Handy: Bild oben über die volle Breite, Text darunter auf Weiß */
 .sv{display:flex;flex-direction:column;height:auto;padding:0}
 .sv .bild{order:-1;height:58vh;height:58svh}
 .sv .st{padding:26px 24px 44px}
 .sv h3{white-space:normal;font-size:21px;margin-bottom:16px}
 .sv .st p{font-size:15.5px}
 .js .sv .bild{transform:translateX(50px)}}
@media (prefers-reduced-motion:reduce){.js .sv .bild,.js .sv .st>*{opacity:1;transform:none;transition:none}}
/* ==== v16 (02.11.): Feinschliff – ruhig, edel, viel Raum ==== */
/* Farben: warmes Weiß, tiefes Anthrazit, warme Grautöne; CMYK nur als feine Akzente.
   Eine Bewegungssprache: gleiche Kurve (--ease), ruhige Dauer, kleine Wege, Staffelung. */
:root{--grund:#FAF9F6;--grund2:#F2EFEA;--ink:#1B1B1D;--text:#4A4743;--leise:#8C877F;--linie:#E4DFD7;
 --ease:cubic-bezier(.19,1,.22,1);--dauer:1.2s}
body{background:var(--grund);color:var(--text)}
#intro{background:var(--grund)}
.lang{color:#c9c3ba}.lang a{color:var(--leise)}.lang a.act,.lang a:hover{color:var(--ink)}
body>.lang{background:transparent;padding:4px 2px;letter-spacing:.16em;font-size:11px}
/* Menü-Quadrate: Beschriftung feiner */
.q span{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;bottom:10px}
.q{transition:filter .4s var(--ease),translate .6s var(--ease)}
/* Leistungen */
.svs{background:var(--grund)}
.sv{grid-template-columns:40% 60%;height:max(640px,100vh);background:var(--grund)}
.sv .st{padding:0 clamp(32px,4.5vw,88px) 0 clamp(28px,7vw,140px)}
.sv .nr{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--leise);margin-bottom:30px}
.sv .nr:after{content:"";width:34px;height:1px;background:var(--c)}
.sv[data-bild=reparatur] .nr:after{background:var(--m)}.sv[data-bild=ultraschall] .nr:after{background:#E8C900}.sv[data-bild=gebrauchtcheck] .nr:after{background:var(--ink)}
.sv h3{font-weight:400;text-transform:none;letter-spacing:-.012em;font-size:36px;line-height:1.18;color:var(--ink);margin:0 0 30px}
.sv h3.umbruch{font-size:30px}
.sv.hl h3:after{content:"Neu";background:none;color:var(--m);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:0;margin-left:12px;vertical-align:super}
html[lang=en] .sv.hl h3:after{content:"New"}
.sv .st p{font-size:16px;line-height:1.85;color:var(--text);max-width:30em;margin:0 0 14px}
.sv .mehr{position:relative;margin-top:26px;padding-bottom:6px;font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--ink)}
.sv .mehr:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform-origin:left;transform:scaleX(.35);transition:transform .7s var(--ease)}
.sv .mehr:hover{text-decoration:none}.sv .mehr:hover:after{transform:scaleX(1)}
/* Bild: frei stehend mit Luft statt randabfallend, einheitlich leicht warm getönt */
.sv .bild{margin:12vh clamp(24px,4vw,72px) 12vh 0;background:var(--grund2)}
.sv .bild .bg{top:-12%;height:124%}
.sv .bg img{filter:saturate(.8) contrast(1.05) brightness(1.02) sepia(.08)}
.sv .bild:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(27,27,29,0) 60%,rgba(27,27,29,.10));mix-blend-mode:multiply}
/* Auftritt: Bild öffnet sich per Maske von rechts nach links, Foto setzt sich dabei leicht (Zoom aus);
   Text blendet gestaffelt auf, kleiner Weg nach oben */
.js .sv .bild{opacity:1;transform:none;clip-path:inset(0 0 0 100%);transition:clip-path 1.5s var(--ease)}
.js .sv .bg img{transition:transform 2.2s var(--ease)}
.js .sv:not(.in) .bg img{transform:scale(calc(var(--zoom,1)*1.1))}
.js .sv.in .bild{clip-path:inset(0 0 0 0)}
.js .sv .st>*{transform:translateY(16px);transition:opacity var(--dauer) var(--ease),transform var(--dauer) var(--ease)}
.js .sv .st .nr{transition-delay:.15s}.js .sv .st h3{transition-delay:.27s}.js .sv .st p{transition-delay:.39s}.js .sv .st p+p{transition-delay:.47s}.js .sv .st .mehr{transition-delay:.58s}
.js .sv.in .st>*{opacity:1;transform:none}
/* Abschluss und Anfrage-Knopf: schlicht */
.svend{padding:40px 0 120px}
.svend .btn{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:16px 34px;font-size:11px;font-weight:600;letter-spacing:.22em;transition:background .6s var(--ease),color .6s var(--ease)}
.svend .btn:hover{background:var(--ink);color:var(--grund);filter:none;transform:none}
/* Zahlen + Aktuelles (Startseite): ruhiger Grund statt Gelbverlauf */
.yel{background:var(--grund2);color:var(--text);padding:110px 0}
.yel h2{font-weight:400;text-transform:none;font-size:30px;letter-spacing:-.01em;color:var(--ink);margin-bottom:28px}
.cnt{margin-bottom:90px}.cnt b{font-weight:300;color:var(--ink);font-size:52px}.cnt span{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--leise)}
.ni{background:var(--grund);padding:26px 28px}.ni:hover{transform:none;box-shadow:none}
.ni time{color:var(--leise);letter-spacing:.14em}.ni h3{font-weight:500;text-transform:none;font-size:17px;letter-spacing:0;color:var(--ink);margin:8px 0 8px}
.ex{border-color:var(--linie);color:var(--leise)}
footer{border-top:1px solid var(--linie);color:var(--leise);padding:34px 0 30px;letter-spacing:.02em}footer a{color:var(--leise)}
/* Kontaktleiste: dezent statt Farbband – heller Grund, feine Haarlinie, oben ein dünner Farbakzent je Abschnitt */
.cbar,.cbar.c,.cbar.m,.cbar.y,.cbar.k{background:rgba(250,249,246,.92);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 var(--linie)}
.cbar:before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--c);transform-origin:left;transition:background .8s var(--ease)}
.cbar.m:before{background:var(--m)}.cbar.y:before{background:#E8C900}.cbar.k:before{background:var(--ink)}
.cbar .w{height:46px;font-size:11px;font-weight:600;letter-spacing:.2em}.cbar i{opacity:.35}
/* v91: unterer Abstand der entfernten Mail-Leiste (.cbar) entfällt */
@media (max-width:767px){
 .sv{height:auto}
 .sv .bild{margin:0;height:56vh;height:56svh}
 .sv .st{padding:34px 26px 64px}
 .sv .nr{margin-bottom:18px}
 .sv h3,.sv h3.umbruch{font-size:25px;margin-bottom:18px}
 .sv .st p{font-size:15.5px;line-height:1.8}
 .js .sv .bild{transform:none;clip-path:inset(0 0 100% 0)}.js .sv.in .bild{clip-path:inset(0 0 0 0)}
 .q span{font-size:8.5px;letter-spacing:.04em;bottom:7px}
 .cbar .w{font-size:9.5px;letter-spacing:.08em;height:46px}
 .yel{padding:80px 0}}
@media (prefers-reduced-motion:reduce){.js .sv .bild{clip-path:none;transition:none}.js .sv .bg img,.js .sv:not(.in) .bg img{transform:scale(var(--zoom,1));transition:none}}

/* ==== v17 (02.11.): Inhalt höher, Bild flacher mit mehr Luft, kräftiger Mitlauf-Effekt, Intro schneller weg ==== */
/* Logo und Claim blenden ein Drittel schneller aus: bei --p = .2 ganz weg (die Quadrate kommen erst ab .25) */
#intro{opacity:calc(1 - var(--p,0)/.2)}
/* Abschnitt so hoch wie sein Inhalt; Text und Bild oben, mit Luft unter den Menü-Quadraten */
.sv{height:auto;min-height:0;align-items:start;padding:clamp(104px,13vh,140px) 0 clamp(40px,7vh,80px)}
.sv .st{align-self:start;padding-top:0}
/* Bild: flach (≈ 270 px bei 900 px Fensterhöhe), rundum mehr Rand */
.sv .bild{align-self:start;height:clamp(240px,30vh,320px);margin:6px clamp(56px,7vw,140px) 0 clamp(8px,1.5vw,28px)}
/* Bild innen 150 % so hoch wie der Rahmen – läuft beim Scrollen sichtbar mit (siehe site.js) */
.sv .bild .bg{top:-25%;height:150%;transform:translate3d(0,0,0)}
@media (max-width:767px){
 .sv{padding:52px 0 8px}
 .sv .bild{align-self:stretch;height:34vh;height:34svh;margin:20px 20px 0}
 .sv .bild .bg{top:-14%;height:128%}
 .sv .st{padding:28px 26px 56px}
}
@media (prefers-reduced-motion:reduce){.sv .bild .bg{top:0;height:100%;transform:none!important}}

/* ==== v18 (02.11.): Bild hinter dem Rahmen deutlich größer – man sieht nur einen Ausschnitt, der kräftig mitläuft ==== */
/* Innenbild 210 % der Rahmenhöhe, 125 % der Breite; Weg ±50 % der Rahmenhöhe (Überstand je Seite 55 % → nie Ränder) */
.sv .bild .bg{top:-55%;height:210%;left:-12.5%;right:-12.5%}
@media (max-width:767px){.sv .bild .bg{top:-32%;height:164%;left:-8%;right:-8%}}
@media (prefers-reduced-motion:reduce){.sv .bild .bg{top:-55%;height:210%}}
@media (prefers-reduced-motion:reduce) and (max-width:767px){.sv .bild .bg{top:-32%;height:164%}}

/* ---- v18: Leistungen verschränkt – 01 Text links/Bild rechts, 02 Bild links/Text rechts, usw. ---- */
.sv:nth-child(even of .sv){grid-template-columns:60% 40%}
.sv:nth-child(even of .sv) .bild{grid-column:1;grid-row:1;margin:6px clamp(8px,1.5vw,28px) 0 clamp(56px,7vw,140px)}
.sv:nth-child(even of .sv) .st{grid-column:2;grid-row:1;padding:0 clamp(28px,7vw,140px) 0 clamp(32px,4.5vw,88px)}
/* Akzentlinie zeigt immer zum Bild: rechts stehender Text → Linie vor der Nummer */
.sv:nth-child(even of .sv) .nr{flex-direction:row-reverse;justify-content:flex-end}
/* Erscheinen: helle Blende (Grundfarbe) liegt über dem Rahmen und zieht sich weich zur Außenseite zurück,
   das Bild rutscht leicht von außen nach, der Text kommt gestaffelt von seiner Seite */
.js .sv .bild,.js .sv.in .bild{clip-path:none;transition:none}
.sv .bild:before{content:"";position:absolute;inset:-1px;z-index:2;background:var(--grund);transform-origin:100% 50%;transform:scaleX(0);pointer-events:none}
.sv:nth-child(even of .sv) .bild:before{transform-origin:0 50%}
.js .sv .bild:before{transform:scaleX(1);transition:transform 1.6s var(--ease) .05s}
.js .sv.in .bild:before{transform:scaleX(0)}
.js .sv .bg img{translate:6% 0;transition:transform 2.2s var(--ease),translate 2s var(--ease)}
.js .sv:nth-child(even of .sv) .bg img{translate:-6% 0}
.js .sv.in .bg img,.js .sv:nth-child(even of .sv).in .bg img{translate:0 0}
.js .sv .st>*{transform:translateX(-22px)}
.js .sv:nth-child(even of .sv) .st>*{transform:translateX(22px)}
.js .sv.in .st>*,.js .sv:nth-child(even of .sv).in .st>*{transform:none}
@media (max-width:767px){
 .sv:nth-child(even of .sv) .bild{margin:20px 20px 0}
 .sv:nth-child(even of .sv) .st{padding:28px 26px 56px}
 .sv:nth-child(even of .sv) .nr{flex-direction:row;justify-content:flex-start}
 .js .sv .bild,.js .sv.in .bild{clip-path:none}
 .js .sv .bg img{translate:3% 0}.js .sv:nth-child(even of .sv) .bg img{translate:-3% 0}
 .js .sv .st>*{transform:translateY(14px)}.js .sv:nth-child(even of .sv) .st>*{transform:translateY(14px)}
}
@media (prefers-reduced-motion:reduce){
 .js .sv .bild:before{transform:scaleX(0);transition:none}
 .js .sv .bg img,.js .sv:nth-child(even of .sv) .bg img{translate:0 0;transition:none}
 .js .sv .st>*,.js .sv:nth-child(even of .sv) .st>*{transform:none;transition:opacity .01s}
}

/* ---- v18: Menü ruhig – eine ordentliche Reihe rechts oben vor EN|DE, gleiche Größe und Abstände,
   halb am oberen Rand angeschnitten; erscheint gemeinsam mit einem sanften Absenken (keine Einzelflüge) ---- */
.qm{left:auto;right:96px;top:-36px;transform:none;gap:6px;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.q{width:72px;height:72px;opacity:1!important;transform:none!important}
.q span{bottom:9px;opacity:1!important;font-size:9.5px;letter-spacing:.1em}
.q:hover,.q:focus-visible{translate:0 6px;filter:brightness(1.08)}
body>.lang{top:10px;right:28px;line-height:16px}
html.js:not(.menu-da) #intro~.qm{opacity:0;transform:translateY(-14px);pointer-events:none}
html.js:not(.menu-da) #intro~.qm .q{pointer-events:none}
body>.lang{transition:opacity 1.1s var(--ease)}
@media (max-width:767px){
 .qm{left:auto;right:76px;top:-28px;gap:5px}
 .q{width:56px;height:56px}.q span{font-size:8px;letter-spacing:.04em;bottom:6px}
 .q:hover,.q:focus-visible{translate:0 4px}
 body>.lang{top:6px;right:12px}
}
@media (prefers-reduced-motion:reduce){.qm,body>.lang{transition:none}html.js:not(.menu-da) #intro~.qm{transform:none}}

/* ==== v19 (02.11.): Menü großzügiger, Erscheinen aus der Unschärfe, ganzes Bild wandert durch den Rahmen ==== */
/* Menü: eine ruhige Reihe rechts, mehr Luft zwischen den Feldern, zu EN|DE und zum Rand */
.qm{right:124px;top:-40px;gap:16px}
.q{width:84px;height:80px}
.q span{bottom:11px;font-size:9.5px;letter-spacing:.14em}
body>.lang{top:12px;right:40px}
@media (max-width:767px){
 .qm{right:88px;top:-29px;gap:8px}
 .q{width:58px;height:58px}.q span{font-size:8px;letter-spacing:.06em;bottom:7px}
 body>.lang{top:7px;right:14px}
}
/* Bild: Ebene in natürlichem Seitenverhältnis, 140 % der Rahmenbreite (Handy 150 %) – beim Durchscrollen
   wandert die gesamte Bildhöhe durch den Rahmen (site.js), waagerecht nach --hx ausgerichtet; nie Ränder */
.sv[data-bild]{--zoom:1}
.sv[data-bild=montage]{--hx:.12}.sv[data-bild=reparatur]{--hx:.6}.sv[data-bild=ultraschall]{--hx:.4}.sv[data-bild=gebrauchtcheck]{--hx:.7}.sv[data-bild=ersatzteile]{--hx:.45}
.sv .bild .bg{top:0;bottom:auto;right:auto;height:auto;width:140%;left:calc(-40% * var(--hx,.5))}
.sv .bild .bg img,.js .sv .bg img,.js .sv:not(.in) .bg img{height:auto;transform:none;translate:none!important;object-fit:fill}
.sv .bild:before{display:none}
@media (max-width:767px){.sv .bild .bg{top:0;height:auto;width:150%;right:auto;left:calc(-50% * var(--hx,.5))}}
/* Erscheinen: weich aus der Unschärfe – Bild Blur 20px → 0, Deckkraft 0 → 1, Maßstab 1.04 → 1 (1.6 s);
   Text leichter Blur + Einblenden, gestaffelt. Nach der Animation wird der Filter entfernt (Klasse .ruhig) */
.js .sv .bild,.js .sv.in .bild{transition:opacity 1.6s var(--ease),filter 1.6s var(--ease),transform 1.6s var(--ease)}
.js .sv:not(.in) .bild{opacity:0;filter:blur(20px);transform:scale(1.04)}
.js .sv.in .bild{opacity:1;filter:blur(0);transform:none}
.js .sv .st>*{transform:none!important;transition:opacity 1.4s var(--ease),filter 1.4s var(--ease)}
.js .sv:not(.in) .st>*{opacity:0;filter:blur(8px)}
.js .sv.in .st>*{opacity:1;filter:blur(0)}
.js .sv.ruhig .bild,.js .sv.ruhig .st>*{filter:none;transition:none}
@media (prefers-reduced-motion:reduce){
 .js .sv .bild,.js .sv .st>*{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
 .sv .bild .bg{top:50%;transform:translateY(-50%)!important}
}

/* ==== v20 (02.11.): mehr Raum, mehr Zeit – eine Leistung pro Bildschirm, zarte CMYK-Töne, ruhiges Textmenü ==== */
/* Hintergrund: Seite trägt den Ton der Leistung, die gerade im Bild ist (site.js setzt --ton) und blendet weich um */
body{background-color:var(--ton,#FAF9F6);transition:background-color 2.4s cubic-bezier(.45,0,.2,1)}
.svs,.sv,.svend{background:transparent}
/* sehr helle, leicht entsättigte Töne aus CMYK – K = warmes Grau */
.sv{--ton:#FAF9F6}
.sv[data-bild=montage]{--ton:#EEF3F4}.sv[data-bild=reparatur]{--ton:#F6EFF1}.sv[data-bild=ultraschall]{--ton:#F7F4E6}.sv[data-bild=gebrauchtcheck]{--ton:#EFEDEA}.sv[data-bild=ersatzteile]{--ton:#EEF3F4}
/* Raum: jede Leistung füllt genau einen Bildschirm, Inhalt senkrecht mittig */
.sv{min-height:100vh;min-height:100svh;height:auto;align-items:center;padding:88px 0 64px;box-sizing:border-box}
.sv .st,.sv .bild{align-self:center}
.sv .bild{height:clamp(280px,40vh,460px)}
.sv .nr{margin-bottom:34px}.sv h3{margin-bottom:34px}
/* Zeit: Bild 2.8 s, Text 2.2 s, deutlich gestaffelt */
.js .sv .bild,.js .sv.in .bild{transition:opacity 2.8s var(--ease),filter 2.8s var(--ease),transform 2.8s var(--ease)}
.js .sv .st>*{transition:opacity 2.2s var(--ease),filter 2.2s var(--ease)}
.js .sv .st .nr{transition-delay:.3s}.js .sv .st h3{transition-delay:.6s}.js .sv .st p{transition-delay:.9s}.js .sv .st p+p{transition-delay:1.2s}.js .sv .st .mehr{transition-delay:1.5s}
.js .sv.ruhig .bild,.js .sv.ruhig .st>*{transition:none}
/* Menü: schlichtes Textmenü oben rechts vor EN|DE, ohne Farben; bei Maus/aktiv ein feiner Strich in Anthrazit */
.qm{top:0;right:128px;height:64px;display:flex;align-items:center;gap:38px;transition:opacity 1.8s var(--ease),transform 1.8s var(--ease)}
.q,.q.k,.q.c,.q.m,.q.y{width:auto;height:auto;background:none;color:var(--ink);filter:none!important;translate:none!important;padding:6px 0}
.q span{position:static;display:block;font-size:10.5px;font-weight:600;letter-spacing:.2em;line-height:16px;text-transform:uppercase;color:var(--ink)}
.q:after{content:"";position:absolute;left:0;right:.2em;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease)}
/* Menü rein typografisch: Strich bei allen Punkten in Anthrazit */
.q.c:after,.q.m:after,.q.y:after{background:var(--ink)}
.q:hover:after,.q:focus-visible:after,.q[aria-current]:after{transform:scaleX(1)}
body>.lang{top:20px;right:44px;line-height:16px;transition:opacity 1.8s var(--ease)}
html.js:not(.menu-da) #intro~.qm{transform:translateY(-8px)}
@media (max-width:767px){
 .sv{padding:64px 0 40px;display:flex;flex-direction:column;justify-content:center}
 .sv .bild{height:36vh;height:36svh;align-self:stretch}
 .qm{right:78px;height:52px;gap:13px}
 .q span{font-size:9px;letter-spacing:.1em}
 body>.lang{top:18px;right:14px}
}
@media (max-width:420px){.qm{gap:10px;right:88px}.q span{font-size:8.5px;letter-spacing:.07em}}
@media (prefers-reduced-motion:reduce){body{transition:none}.qm,body>.lang{transition:none}}

/* ==== v21 (02.11.): Bereiche vollflächig in Druckfarben, Menü mittig mit Farblinie, Leistungen kompakter, Bild größer ==== */
/* Prozessfarben-Look, nicht neon. site.js setzt html[data-bereich] = c (Leistungen) | y (News) | k (Kontakt/Fuß) */
:root{--c-druck:#0090CE;--m-druck:#CC0F6E;--y-druck:#F3D60E;--k-druck:#1B1B1D;--vg:var(--ink)}
html[data-bereich=c]{--ton:var(--c-druck);--vg:#fff}
html[data-bereich=m]{--ton:var(--m-druck);--vg:#fff}
html[data-bereich=y]{--ton:var(--y-druck);--vg:var(--ink)}
html[data-bereich=k]{--ton:var(--k-druck);--vg:#fff}
body{transition:background-color 1.8s cubic-bezier(.45,0,.2,1)}
/* Schrift folgt dem Grund (weiß auf Cyan/Magenta/Schwarz, anthrazit auf Gelb) */
#leistungen .sv h3,#leistungen .sv .st p,#leistungen .sv .nr,#leistungen .mehr,.svend .btn,#news,#news h2,#news h3,#news p,#news time,#news b,#news span,footer,footer a,.qm .q span,body>.lang,body>.lang a{color:var(--vg);transition:color 1.8s cubic-bezier(.45,0,.2,1),background-color 1.8s cubic-bezier(.45,0,.2,1),border-color 1.8s}
#leistungen .sv .st p{opacity:.92}
#leistungen .sv .nr:after,#leistungen .mehr:after{background:var(--vg)!important;opacity:.7}
.svend .btn{border-color:var(--vg);background:transparent}.svend .btn:hover{background:var(--vg);color:var(--ton)}
#news.yel{background:transparent}#news .ni{background:transparent;border-color:color-mix(in srgb,var(--vg) 18%,transparent)}
footer{border-top-color:color-mix(in srgb,var(--vg) 15%,transparent)}
body>.lang{opacity:1}body>.lang a{opacity:.6}body>.lang a.act{opacity:1}
/* Menü: mittig, weit auseinander; Linie wächst in der Farbe des Punkts, im aktiven Bereich bleibt sie stehen.
   Ist die Linienfarbe gleich dem Grund, wird sie weiß (bzw. anthrazit auf Gelb) */
.qm{left:50%;right:auto;transform:translateX(-50%);gap:64px}
html.js:not(.menu-da) #intro~.qm{transform:translate(-50%,-8px)}
.q:after{height:2px;bottom:-1px;transition:transform 1.1s var(--ease),background-color 1.8s}
.q.k:after{background:var(--c-druck)}.q.c:after{background:var(--m-druck)}.q.m:after{background:var(--y-druck)}.q.y:after{background:var(--k-druck)}
html[data-bereich=c] .q.k:after,html[data-bereich=m] .q.c:after,html[data-bereich=k] .q.y:after{background:#fff}
html[data-bereich=y] .q.m:after{background:var(--ink)}
html[data-bereich=c] .q.k:after,html[data-bereich=y] .q.m:after,html[data-bereich=k] .q.y:after{transform:scaleX(1)}
/* Leistungen kompakter (≈ 78 % Bildschirmhöhe), weiterhin mittig */
.sv{min-height:78vh;min-height:78svh;padding:72px 0 48px}
/* Bild: Innenbild 200 % der Rahmenbreite – ganze Bildhöhe wandert durch, deutlich mehr Bewegung, nie Ränder */
.sv .bild .bg{width:200%;left:calc(-100% * var(--hx,.5))}
@media (max-width:767px){
 .qm{gap:14px}
 .sv{min-height:0;padding:56px 0 32px}
 .sv .bild .bg{width:200%;left:calc(-100% * var(--hx,.5))}
}
@media (max-width:420px){.qm{gap:11px;left:44%}}
@media (prefers-reduced-motion:reduce){body,#leistungen *,#news *,footer *{transition:none!important}}
/* v21 Nachtrag: Sprachumschalter folgt dem Grund; Kontaktbereich = Fuß, vollflächig Schwarz (die Seite bleibt bei den News gelb) */
body>.lang a.act,body>.lang a:hover{color:var(--vg)}
body:has(#intro) footer{background:var(--k-druck);border-top:0}
body:has(#intro) footer,body:has(#intro) footer a{color:rgba(255,255,255,.78)}

/* ==== v22 (02.11.): Leistungen als durchgehende Bänder, Menübalken mit Farbquadraten, weiche Übergänge ==== */
/* Band: Bild bis an den Fensterrand seiner Seite, Textfläche weiß bis an den anderen Rand; Cyan nur zwischen den Bändern */
.sv{min-height:0;padding:6vh 0;align-items:stretch}
.sv .st{--vg:var(--ink);position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;background:#FAF9F6;padding:56px clamp(40px,5vw,96px) 56px clamp(28px,7vw,140px)}
.sv:nth-child(even of .sv) .st{padding:56px clamp(28px,7vw,140px) 56px clamp(40px,5vw,96px)}
.sv .bild,.sv:nth-child(even of .sv) .bild{margin:0;align-self:stretch;height:auto;min-height:clamp(320px,44vh,500px)}
/* feine Linie oben an der Bandkante, von der Bildkante bis zum Fensterrand: 01 Schwarz, 02 Cyan, 03 Magenta, 04 Gelb, 05 Schwarz */
.sv .st:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--k-druck)}
.sv[data-bild=reparatur] .st:before{background:var(--c-druck)}.sv[data-bild=ultraschall] .st:before{background:var(--m-druck)}.sv[data-bild=gebrauchtcheck] .st:before{background:var(--y-druck)}
/* Nummer dezent, alte Akzentlinie weg; Überschrift ruhig und großzügig */
.sv .nr{color:var(--leise)!important;font-weight:500;letter-spacing:.3em;margin-bottom:22px}
.sv .nr:after,#leistungen .sv .nr:after{display:none}
.sv h3{font-weight:400;line-height:1.14;letter-spacing:-.018em;margin:0 0 26px;max-width:15em}
.sv .st p{max-width:31em}
#leistungen .sv .st p{opacity:1}
#leistungen .mehr:after{background:var(--ink)!important;opacity:1}
/* Übergang: neue Leistung blendet später weich ein, die vorige beim Hinausscrollen weich aus */
.js .sv{transition:opacity 1.6s cubic-bezier(.45,0,.2,1),filter 1.6s cubic-bezier(.45,0,.2,1)}
.js .sv.weg{opacity:.12;filter:blur(5px)}
/* Menübalken: hell, leicht durchscheinend, Haarlinie unten; Menü mittig, vor jedem Punkt ein Farbquadrat */
body:has(.qm):before{content:"";position:fixed;left:0;right:0;top:0;height:64px;z-index:59;background:rgba(250,249,246,.9);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid rgba(27,27,29,.08);transition:opacity 1.8s var(--ease)}
html.js:not(.menu-da) body:has(#intro):before{opacity:0}
.qm,body>.lang{--vg:var(--ink)}
.q span{display:flex;align-items:center;gap:10px}
.q span:before{content:"";width:8px;height:8px;flex:none;background:var(--c-druck)}
.q.c span:before{background:var(--m-druck)}.q.m span:before{background:var(--y-druck)}.q.y span:before{background:var(--k-druck)}
.q:after{left:18px;right:.2em;bottom:-2px}
html[data-bereich] .q.k:after{background:var(--c-druck)}html[data-bereich] .q.c:after{background:var(--m-druck)}html[data-bereich] .q.m:after{background:#D9BC00}html[data-bereich] .q.y:after{background:var(--k-druck)}
.q.m:after{background:#D9BC00}
@media (max-width:767px){
 body:has(.qm):before{height:52px}
 .sv,.sv:nth-child(even of .sv){padding:3vh 0}
 .sv .bild,.sv:nth-child(even of .sv) .bild{margin:0;height:40vh;height:40svh;min-height:0}
 .sv .st,.sv:nth-child(even of .sv) .st{padding:36px 26px 44px}
 .q span{gap:6px}.q span:before{width:6px;height:6px}.q:after{left:12px}
}
@media (prefers-reduced-motion:reduce){.js .sv,.js .sv.weg{opacity:1;filter:none;transition:none}}
/* erste Leistung: Platz für den Menübalken, damit das erste Band nicht darunter liegt */
.sv:nth-child(1 of .sv){padding-top:calc(64px + 6vh)}
@media (max-width:767px){.sv:nth-child(1 of .sv){padding-top:calc(52px + 3vh)}}

/* ==== v23 (02.11.): Linie über die ganze Breite, weißer Bilduntergrund, Mitlauf erst bei ganz sichtbarem Bild ==== */
/* farbige 2-px-Linie an der Oberkante des Bandes, über die volle Fensterbreite (auch über dem Bild) */
.sv{--pt:6vh;position:relative;padding-top:var(--pt)}
.sv:nth-child(1 of .sv){--pt:calc(64px + 6vh);padding-top:var(--pt)}
.sv:before{content:"";position:absolute;left:0;right:0;top:var(--pt);height:2px;z-index:3;background:var(--k-druck);pointer-events:none}
.sv[data-bild=reparatur]:before{background:var(--c-druck)}.sv[data-bild=ultraschall]:before{background:var(--m-druck)}.sv[data-bild=gebrauchtcheck]:before{background:var(--y-druck)}
.sv .st:before{display:none}
/* Bildfläche weiß; eingeblendet (Unschärfe) wird nur das Foto selbst, nicht der Rahmen – kein Cyan scheint durch */
.sv .bild{background:#FAF9F6}
.js .sv .bild,.js .sv.in .bild,.js .sv:not(.in) .bild{opacity:1;filter:none;transform:none;transition:none}
.js .sv .bild img{transition:opacity 2.8s var(--ease),filter 2.8s var(--ease),scale 2.8s var(--ease)}
.js .sv:not(.in) .bild img{opacity:0;filter:blur(20px);scale:1.04}
.js .sv.in .bild img{opacity:1;filter:blur(0);scale:1}
.js .sv.ruhig .bild img{filter:none;transition:none}
@media (max-width:767px){.sv,.sv:nth-child(even of .sv){--pt:3vh;padding-top:var(--pt)}.sv:nth-child(1 of .sv){--pt:calc(52px + 3vh);padding-top:var(--pt)}}
@media (prefers-reduced-motion:reduce){.js .sv .bild img,.js .sv:not(.in) .bild img{opacity:1!important;filter:none!important;scale:1!important;transition:none!important}}

/* ==== v24 (02.11.): echtes Weiß, weißer Menübalken, News sofort gelb, Einblenden ohne Unschärfe ==== */
:root{--grund:#FFFFFF}html{--ton:#FFFFFF}
body,#intro{background-color:var(--ton,#fff)}#intro{background:#fff}
.sv .st,.sv:nth-child(even of .sv) .st,.sv .bild{background:#fff}
/* Menübalken durchgehend weiß, ohne Transparenz/Unschärfe, feine hellgraue Haarlinie */
body:has(.qm):before{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid #E4E4E4}
/* News-Bereich (inkl. Fläche mit „Send enquiry“ und den Zahlen) selbst gelb – keine blaue Phase davor */
.svend,#news,#news.yel{background:var(--y-druck);--vg:var(--ink)}
.svend .btn{color:var(--ink);border-color:var(--ink)}.svend .btn:hover{background:var(--ink);color:var(--y-druck)}
/* Ein- und Ausblenden ohne Unschärfe: nur weiches Einblenden mit leichtem Heranrücken */
.js .sv .bild img{transition:opacity 2.8s var(--ease),scale 2.8s var(--ease)}
.js .sv:not(.in) .bild img{opacity:0;filter:none;scale:1.03}
.js .sv.in .bild img,.js .sv.ruhig .bild img{opacity:1;filter:none;scale:1}
.js .sv .st>*{transition:opacity 2.2s var(--ease),translate 2.2s var(--ease)}
.js .sv:not(.in) .st>*{opacity:0;filter:none;translate:0 8px}
.js .sv.in .st>*,.js .sv.ruhig .st>*{opacity:1;filter:none;translate:0 0}
.js .sv{transition:opacity 1.6s cubic-bezier(.45,0,.2,1)}
.js .sv.weg{opacity:.12;filter:none}
@media (prefers-reduced-motion:reduce){.js .sv:not(.in) .st>*{translate:none;opacity:1}.js .sv:not(.in) .bild img{scale:1}}

/* ==== v25 (02.11.): Bilder ohne jeden Einblend-/Ausblend-Effekt – sofort da; nur der Text blendet weiter ein/aus ==== */
.js .sv .bild img,.js .sv:not(.in) .bild img,.js .sv.in .bild img,.js .sv.ruhig .bild img{opacity:1;scale:none;filter:none;transition:none}
.js .sv,.js .sv.weg{opacity:1;filter:none;transition:none}
.js .sv.weg .st>*{opacity:.12}

/* ==== v26 (02.11.): Vormerkliste – Flächen eigenfarbig, Texte fest, News-Mosaik, großer schwarzer Fuß mit Kontakt ==== */
/* 1 + 3: Seitengrund immer weiß (kein Umblenden mehr); Cyan trägt der Leistungsbereich selbst – beginnt erst unter dem Intro,
   Gelb trägt der News-Bereich selbst; letzte Leistung stößt ohne Cyan-Streifen direkt an das Gelb */
body{background:#fff!important;transition:none!important}
#intro{background:#fff}
.svs,#leistungen.svs{background:var(--c-druck)}
.sv:last-child,.sv:nth-last-child(1 of .sv){padding-bottom:0}
#news,#news.yel{background:var(--y-druck)}
/* Linien der Bänder: 01 Cyan, 02 Schwarz, 03 Magenta, 04 Gelb, 05 Cyan */
.sv:before{background:var(--c-druck)}
.sv[data-bild=reparatur]:before{background:var(--k-druck)}.sv[data-bild=ultraschall]:before{background:var(--m-druck)}.sv[data-bild=gebrauchtcheck]:before{background:var(--y-druck)}.sv[data-bild=ersatzteile]:before{background:var(--c-druck)}
/* 2: Leistungstexte ohne jede Ein-/Ausblendung – sofort fest sichtbar */
.js .sv .st>*,.js .sv:not(.in) .st>*,.js .sv.in .st>*,.js .sv.weg .st>*,.js .sv:nth-child(even of .sv) .st>*{opacity:1!important;filter:none!important;translate:none!important;transform:none!important;transition:none!important}
/* 6: News als lückenloses Mosaik (Muster je 6 Kacheln: groß 2×2, breit, breit, klein, klein, breit) */
#news{padding:110px 0 120px}
#news h2{margin-bottom:40px}
#news .news{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto);grid-auto-flow:row dense;gap:14px}
#news .ni{background:#fff;border:0;padding:30px 32px;display:flex;flex-direction:column;justify-content:flex-end}
#news .ni:nth-child(6n+1){grid-column:span 2;grid-row:span 2;padding:40px 44px}
#news .ni:nth-child(6n+1) h3{font-size:26px;font-weight:400;line-height:1.2;letter-spacing:-.01em;margin:12px 0 12px}
#news .ni:nth-child(6n+2),#news .ni:nth-child(6n+3),#news .ni:nth-child(6n+6){grid-column:span 2}
#news .ni h3,#news .ni p,#news .ni time{color:var(--ink)}
#news .ni time{color:var(--leise)}
/* 7: großer schwarzer Fuß mit Kontakt und Formular */
footer.fuss{background:var(--k-druck)!important;color:#fff;border:0;padding:130px 0 0;font-size:15px}
footer.fuss .w{max-width:1100px}
footer.fuss .fw{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,110px);align-items:start;justify-content:initial}
.fuss .fn{font-size:46px;font-weight:300;letter-spacing:-.01em;line-height:1;color:#fff;margin:0}
.fuss .fn small{display:block;font-size:13px;font-weight:400;letter-spacing:.32em;margin-top:12px;color:rgba(255,255,255,.6)}
.fuss h2{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:56px 0 16px}
.fuss .fl1{font-size:16px;line-height:1.75;color:rgba(255,255,255,.82);max-width:24em;margin:0 0 28px}
.fuss address{font-style:normal;font-size:15px;line-height:1.95;color:rgba(255,255,255,.82)}
footer.fuss a,.fuss address a{color:#fff;margin:0;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.fuss .ff{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;max-width:none;margin-top:6px}
.fuss .ff label{display:grid;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.fuss .ff .ganz{grid-column:1/-1}
.fuss .ff input,.fuss .ff textarea{font:inherit;font-size:16px;letter-spacing:0;text-transform:none;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);border-radius:0;padding:10px 0;outline:none;resize:vertical;transition:border-color .6s var(--ease)}
.fuss .ff input::placeholder{color:rgba(255,255,255,.3)}
.fuss .ff input:focus,.fuss .ff textarea:focus{border-bottom-color:#fff}
.fuss .fs{display:flex;align-items:center;gap:22px;margin-top:8px}
.fuss .fs button{font:inherit;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:transparent;border:1px solid #fff;padding:16px 40px;cursor:pointer;transition:background .6s var(--ease),color .6s var(--ease)}
.fuss .fs button:hover{background:#fff;color:var(--k-druck)}
.fuss .fs small{font-size:12px;color:rgba(255,255,255,.45)}
footer.fuss .fu{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:120px;padding-top:28px;padding-bottom:30px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.5)}
footer.fuss .fu a{color:rgba(255,255,255,.6);border:0;margin-left:22px}
/* helle untere Leiste: weiß, glatt, gleiche Ränder wie der Fuß */
.cbar,.cbar.c,.cbar.m,.cbar.y,.cbar.k{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 #E4E4E4}
.cbar .w{max-width:1100px;justify-content:space-between}.cbar i{display:none}
@media (max-width:767px){
 #news{padding:72px 0 80px}
 #news .news{grid-template-columns:1fr;grid-auto-rows:auto}
 #news .ni,#news .ni:nth-child(n){grid-column:auto;grid-row:auto;padding:28px 26px}
 #news .ni:nth-child(6n+1) h3{font-size:21px}
 footer.fuss{padding-top:80px}
 footer.fuss .fw{grid-template-columns:1fr;gap:56px}
 .fuss .fn{font-size:36px}
 .fuss .ff{grid-template-columns:1fr}
 .fuss .fs{flex-direction:column;align-items:flex-start;gap:12px}
 footer.fuss .fu{margin-top:72px;flex-direction:column}
 footer.fuss .fu a{margin:0 18px 0 0}
 .cbar .w{padding:0 24px}
}
footer.fuss .fu{border-top:0;background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)) 24px 0/calc(100% - 48px) 1px no-repeat}

/* ==== v27 (02.11.): weißer Einstieg mit feiner Cyan-Linie, echtes Logo im Fuß, Ersatzteil-Shopseite, Anfragefenster ==== */
/* 1: kein Cyan-Balken über der ersten Leistung – der Abstand ist weiß, die Cyan-Linie liegt an der Bandkante */
.svs .sv:nth-child(1 of .sv){background:linear-gradient(#fff,#fff) 0 0/100% var(--pt) no-repeat}
/* 3: Simons Logo (Original, unverändert) auf einer weißen Karte im schwarzen Fuß */
.fuss .fn{display:inline-block;background:#fff;padding:22px 26px;line-height:0;margin:0}
.fuss .fn img{display:block;width:clamp(200px,22vw,260px);height:auto}
/* 2: Ersatzteile – eigene Shopseite in Magenta, zentriert */
body.shop-seite{padding-top:64px}
.shop-kopf{background:var(--m-druck);color:#fff;text-align:center;padding:clamp(90px,14vh,150px) 0 clamp(80px,12vh,130px)}
.shop-kopf h1{font-size:clamp(40px,5.2vw,68px);font-weight:300;letter-spacing:-.02em;line-height:1.05;margin:0 0 26px;color:#fff;text-transform:none}
.shop-lead{max-width:36em;margin:0 auto 46px;font-size:17px;line-height:1.75;color:rgba(255,255,255,.9)}
.shop-such{display:flex;max-width:680px;margin:0 auto;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.shop-such input{flex:1;min-width:0;border:0;outline:none;font:inherit;font-size:19px;letter-spacing:.02em;padding:22px 26px;color:var(--ink);background:transparent}
.shop-such input::placeholder{color:#9a9a9a}
.shop-such button{border:0;cursor:pointer;font:inherit;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:var(--k-druck);padding:0 38px;transition:background .5s var(--ease)}
.shop-such button:hover{background:#000}
.shop-hin{margin:22px auto 0;font-size:13px;color:rgba(255,255,255,.75);max-width:40em}
.shop-raster{background:#fff;padding:90px 0 110px}
.shop-kz{text-align:center;margin-bottom:44px}
.shop-kz h2{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--m-druck);margin:0 0 10px}
.shop-kz p{font-size:14px;color:var(--leise);margin:0}
.pks{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pk{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:#fff;border:1px solid #ECECEC;transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.pk:hover{border-color:var(--m-druck);box-shadow:0 14px 34px rgba(0,0,0,.08)}
.pk-b{display:block;aspect-ratio:4/3;overflow:hidden;background:#f3f3f3}
.pk-b img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.pk:hover .pk-b img{scale:1.04}
.pk-t{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px}
.pk-t b{font-size:15px;font-weight:500;line-height:1.35}
.pk-t small{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--m-druck)}
.shop-knopf{text-align:center;margin:64px 0 0}
.shop-btn{display:inline-block;background:var(--m-druck);color:#fff;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;padding:22px 64px;transition:background .5s var(--ease)}
.shop-btn:hover{background:#A80B5A}
@media (max-width:767px){
 body.shop-seite{padding-top:52px}
 .shop-lead{font-size:15.5px;margin-bottom:34px}
 .shop-such input{font-size:16px;padding:18px 16px}.shop-such button{padding:0 18px;letter-spacing:.14em}
 .shop-raster{padding:60px 0 80px}
 .pks{grid-template-columns:repeat(2,1fr);gap:12px}
 .pk-t{padding:12px 12px 14px}.pk-t b{font-size:13.5px}.pk-t small{font-size:9.5px;letter-spacing:.1em}
 .shop-btn{padding:18px 40px}
}
/* 5: Anfragefenster – Seitenpaneel rechts, weich eingeblendet; ohne JS über :target */
.af{position:fixed;inset:0;z-index:200;display:none}
.af:target{display:block}
.js .af{display:block;visibility:hidden;opacity:0;transition:opacity .7s var(--ease),visibility 0s linear .7s}
.js .af.offen{visibility:visible;opacity:1;transition:opacity .7s var(--ease),visibility 0s}
.af-hg{position:absolute;inset:0;background:rgba(20,20,22,.5)}
.af-p{position:absolute;top:0;right:0;bottom:0;width:min(640px,100%);overflow-y:auto;overscroll-behavior:contain;background:#fff;color:var(--ink);padding:56px clamp(24px,4vw,56px) 48px;box-shadow:-20px 0 60px rgba(0,0,0,.18)}
.js .af .af-p{transform:translateX(48px);transition:transform .9s var(--ease)}
.js .af.offen .af-p{transform:none}
.af-p:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c-druck)}
.af-x{position:absolute;top:16px;right:18px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;color:var(--ink);text-decoration:none;font-weight:300}
.af-x:hover{color:var(--c-druck)}
.af h2{font-size:28px;font-weight:400;letter-spacing:-.01em;margin:0 0 12px;color:var(--ink);text-transform:none}
.af-lead{font-size:15px;line-height:1.7;color:var(--text);margin:0 0 30px}
.af-f{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.af-f .ganz{grid-column:1/-1}
.af-f label{display:grid;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--leise)}
.af-f input:not([type=radio]):not([type=checkbox]),.af-f textarea{font:inherit;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);background:#fff;border:0;border-bottom:1px solid #D6D6D6;border-radius:0;padding:9px 0;outline:none;transition:border-color .5s var(--ease)}
.af-f input:focus,.af-f textarea:focus{border-bottom-color:var(--c-druck)}
.af-f fieldset{border:0;padding:0;margin:6px 0 0;min-width:0}
.af-f legend{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.af-zeile{display:grid;grid-template-columns:1.1fr 1.6fr .6fr;gap:14px;margin-bottom:12px}
.af-plus{font:inherit;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--c-druck);background:none;border:0;padding:4px 0;cursor:pointer}
.af-r,.af-ds{display:flex!important;align-items:flex-start;gap:12px;font-size:14px!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;color:var(--text)!important;margin-bottom:8px;cursor:pointer;line-height:1.5}
.af-r input,.af-ds input{margin-top:3px;accent-color:var(--c-druck);width:16px;height:16px;flex:none}
.af-ds a{color:var(--ink)}
.af-s{display:flex;align-items:center;gap:20px;margin-top:8px}
.af-s button{font:inherit;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:var(--ink);border:0;padding:18px 40px;cursor:pointer;transition:background .5s var(--ease)}
.af-s button:hover{background:var(--c-druck)}.af-s button[disabled]{opacity:.5;cursor:wait}
.af-s small{font-size:12px;color:var(--leise)}
.af-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.af-fehl{grid-column:1/-1;font-size:14px;color:var(--m-druck);margin:0}
.af-ok{padding:40px 0 20px}.af-ok1{font-size:24px;font-weight:400;color:var(--ink);margin:0 0 10px}.af-ok2{font-size:15px;color:var(--text);margin:0}
.af-ok:before{content:"";display:block;width:44px;height:2px;background:var(--c-druck);margin-bottom:28px}
html.af-zu-ruhig,html.af-zu-ruhig body{overflow:hidden}
#leistungen .mehr.af-auf{margin-right:34px}
@media (max-width:767px){.af-p{padding:56px 22px 40px}.af-f{grid-template-columns:1fr}.af-zeile{grid-template-columns:1fr 1fr}.af-zeile label:nth-child(2){grid-column:1/-1;grid-row:2}#leistungen .mehr.af-auf{margin-right:22px}}
@media (prefers-reduced-motion:reduce){.js .af,.js .af .af-p{transition:none}}
/* Danke-Seite (Antwort von anfrage.php ohne JS) */
body.danke{padding:0;display:flex;min-height:100vh;align-items:center;justify-content:center;text-align:center;background:#fff}
.danke-m{padding:40px 24px}.danke-m img{margin:0 auto 40px;display:block;max-width:70vw;height:auto}.danke-m h1{font-size:28px;font-weight:400;margin:0 0 12px}.danke-m p{color:var(--text)}
.sv .st .mehr{align-self:flex-start}#leistungen .mehr.af-auf{margin-right:0}#leistungen .mehr.af-auf+.mehr{margin-top:16px}
/* v27: Bild Gebrauchtmaschinen-Check (Messuhr) – Ausschnitt auf die Uhr */
.sv[data-bild=gebrauchtcheck]{--hx:.62}
/* v27: Fehleranalyse-Kachel auf der Leistungsseite mit eigenem Foto statt Symbol (ohne Einblendung) */
.svfoto .svf-img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;margin:0 0 14px}
/* v27: Vorher/Nachher – ruhiger Vergleichsschieber (Desktop), auf dem Handy untereinander; Bilder ohne Einblendung */
.vn-sec{padding:70px 0 30px;background:#fff}
.vn{margin:0}
.vn-b{position:relative;aspect-ratio:1600/1065;overflow:hidden;background:#eee;user-select:none}
.vn-e{position:absolute;inset:0}
.vn-e img{display:block;width:100%;height:100%;object-fit:cover}
.vn-n{clip-path:inset(0 0 0 var(--pos))}
.vn-l{position:absolute;top:18px;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);background:#fff;padding:7px 12px}
.vn-v .vn-l{left:18px}.vn-n .vn-l{right:18px}
.vn-g{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.vn-g:after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.18);
 background-image:linear-gradient(45deg,transparent 45%,var(--ink) 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,var(--ink) 45% 55%,transparent 55%);background-size:0 0}
.vn-g:before{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);z-index:1;font-size:17px;letter-spacing:.1em;color:var(--ink);white-space:nowrap}
.vn-r{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:2}
.vn-r:focus-visible~.vn-g{background:var(--c-druck)}
.vn figcaption{font-size:13.5px;color:var(--leise);margin-top:14px;letter-spacing:.02em}
@media (max-width:767px){
 .vn-sec{padding:48px 0 20px}
 .vn-b{aspect-ratio:auto;display:grid;gap:12px;background:none;overflow:visible}
 .vn-e{position:relative;inset:auto;aspect-ratio:1600/1065}
 .vn-n{clip-path:none}
 .vn-r,.vn-g{display:none}
 .vn-v .vn-l,.vn-n .vn-l{left:12px;right:auto;top:12px}
}
/* v27: Kopfbild der Ersatzteilseite (Greiferbrücke, eigenes Foto) unter Magenta; Hinweis Wendewerk */
.shop-kopf{background:linear-gradient(rgba(204,15,110,.84),rgba(204,15,110,.84)),var(--kopfbild,none) center 55%/cover no-repeat,var(--m-druck)}
.shop-tipp{max-width:46em;margin:0 auto 40px;text-align:center;font-size:15px;line-height:1.75;color:var(--text)}
.shop-tipp b{color:var(--ink);font-weight:600}
/* v27: News-Bereich – eigenes Hallenfoto ganz leicht im Gelb (Graustufen, multipliziert, ~13 %), ruhiger Mitlauf (site.js) */
#news{position:relative;overflow:hidden;isolation:isolate}
#news .news-hg{position:absolute;left:0;right:0;top:-30%;bottom:-30%;background-position:center;background-size:cover;filter:grayscale(1);mix-blend-mode:multiply;opacity:.13;pointer-events:none;will-change:transform;z-index:0}
#news>.w{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){#news .news-hg{transform:none!important}}

/* ==== v28 (02.11.): weniger Weiß nach dem Intro, Menülinie erst ab erster Bandlinie, Spares-Abschnitt Magenta,
   Spares-Seite neu (Magenta-Kopf links/Teilefoto rechts, Auslage im Mosaik), News im Magazin-Stil ==== */
/* 1. Intro → erste Leistung: der Inhalt ist fertig hochgefahren, sobald Logo/Claim ausgeblendet sind (p = .2);
   die feine Cyan-Linie der ersten Leistung steht dann knapp unter dem Menü statt in der Fenstermitte */
#intro~main{margin-top:-80vh;transform:translateY(calc(max(0, 1 - var(--p,0)/.2)*80vh))}
@media (prefers-reduced-motion:reduce){#intro~main{transform:none}}
/* 2. Menü ohne Trennlinie; die graue Linie kommt erst, wenn die Cyan-Linie der ersten Leistung die Menüunterkante erreicht (JS: html.linie) */
html.js body:has(#intro):before{border-bottom-color:transparent;transition:opacity 1.6s var(--ease),border-color .9s ease}
html.js.linie body:has(#intro):before{border-bottom-color:#E4E4E4}

/* 3. Spares-Abschnitt der Startseite: Magenta, links Text, rechts drei Teilefotos, verweist auf die Spares-Seite */
.spx{background:var(--m-druck);color:#fff;padding:clamp(96px,14vh,150px) 0}
.spx-w{max-width:1240px;display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:center}
.spx-lab{display:block;font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.spx h2{font-size:clamp(30px,3.3vw,46px);font-weight:300;line-height:1.14;letter-spacing:-.01em;text-transform:none;color:#fff;margin:18px 0 24px}
.spx p{font-size:16px;line-height:1.8;color:rgba(255,255,255,.88);max-width:30em;margin:0 0 40px}
.spx-btn{display:inline-flex;align-items:center;gap:.8em;color:#fff;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;padding:19px 30px;border:1px solid rgba(255,255,255,.75);transition:background-color .7s var(--ease),color .7s var(--ease)}
.spx-btn:hover{background:#fff;color:var(--m-druck)}
.spx-btn span{transition:translate .7s var(--ease)}.spx-btn:hover span{translate:4px 0}
.spx-m{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:16px;aspect-ratio:16/10.5;text-decoration:none}
.spx-f{margin:0;position:relative;overflow:hidden;background:#fff;box-shadow:0 22px 54px rgba(70,0,35,.28)}
.spx-f.g{grid-row:1/3}
.spx-f img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.6s var(--ease)}
.spx-f:hover img{scale:1.03}
.spx-f figcaption,.shop-kb figcaption{position:absolute;left:0;bottom:0;background:rgba(255,255,255,.94);color:var(--ink);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:8px 12px}
@media (max-width:767px){.spx{padding:72px 0 80px}.spx-w{grid-template-columns:1fr;gap:44px}.spx-m{gap:10px;aspect-ratio:4/3.4}.spx p{font-size:15px}}

/* 4. Spares-Seite: Kopf reines Magenta, fast bildschirmfüllend, linksbündig; rechts großes Teilefoto */
body.shop-seite .shop-kopf{background:var(--m-druck);text-align:left;min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);display:flex;align-items:center;padding:clamp(56px,8vh,96px) 0}
.shop-kw{max-width:1240px;width:100%;display:grid;grid-template-columns:6fr 5fr;gap:clamp(40px,6vw,104px);align-items:center}
.shop-kopf h1{font-size:clamp(48px,6.4vw,96px);margin:0 0 30px}
body.shop-seite .shop-lead{margin:0 0 60px;max-width:30em}
body.shop-seite .shop-such{max-width:520px;margin:0;background:transparent;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.8);align-items:center;transition:border-color .7s var(--ease)}
body.shop-seite .shop-such:focus-within{border-bottom-color:#fff}
body.shop-seite .shop-such input{color:#fff;font-size:22px;font-weight:300;letter-spacing:.04em;padding:14px 0}
body.shop-seite .shop-such input::placeholder{color:rgba(255,255,255,.62)}
body.shop-seite .shop-such button{background:transparent;color:#fff;padding:10px 2px 10px 18px;display:flex;align-items:center;transition:translate .7s var(--ease),opacity .7s}
body.shop-seite .shop-such button:hover{background:transparent;translate:5px 0}
body.shop-seite .shop-hin{margin:18px 0 0;text-align:left;max-width:34em}
.shop-kb{margin:0;position:relative;aspect-ratio:1;overflow:hidden;background:#fff;box-shadow:0 34px 90px rgba(70,0,35,.34)}
.shop-kb img{display:block;width:100%;height:100%;object-fit:cover}
/* Auslage im Mosaik (lückenlos: groß 2×2, breit 2×1, hoch 1×2, klein 1×1) */
body.shop-seite .shop-raster{padding:110px 0 100px}
.shop-raster .w,.shop-nicht .w{max-width:1240px}
body.shop-seite .shop-kz{text-align:left;display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:22px}
body.shop-seite .shop-tipp{text-align:left;margin:0 0 48px;max-width:46em}
body.shop-seite .pks{grid-template-columns:repeat(4,1fr);grid-auto-rows:310px;grid-auto-flow:row dense;gap:22px}
body.shop-seite .pk{border:0;box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 30px rgba(0,0,0,.07);transition:box-shadow .9s var(--ease),translate .9s var(--ease)}
body.shop-seite .pk:hover{box-shadow:0 2px 4px rgba(0,0,0,.05),0 22px 48px rgba(0,0,0,.12);translate:0 -3px;border:0}
body.shop-seite .pk-b{aspect-ratio:auto;flex:1;min-height:0}
body.shop-seite .pk:hover .pk-b img{scale:1.03}
body.shop-seite .pk-b img{transition:scale 1.6s var(--ease)}
.pk-g{grid-column:span 2;grid-row:span 2}.pk-w{grid-column:span 2}.pk-h{grid-row:span 2}
.pk-t{position:relative}
.pk-mu{position:absolute;top:-30px;left:14px;background:rgba(255,255,255,.94);color:var(--ink);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:5px 8px}
.pk-g .pk-t b{font-size:19px;font-weight:400}
.pk-g .pk-t{padding:24px 26px 26px}
/* Ihr Teil ist nicht dabei? */
.shop-nicht{background:#fff;padding:0 0 130px}
.shop-nw{border-top:2px solid var(--m-druck);padding-top:58px;display:grid;grid-template-columns:1fr auto;gap:24px 60px;align-items:end}
.shop-nw h2{font-size:clamp(28px,2.8vw,40px);font-weight:300;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin:0 0 14px}
.shop-nw p{margin:0;font-size:16px;line-height:1.75;color:var(--text);max-width:34em}
.shop-nw .shop-nk{display:flex;gap:16px;flex-wrap:wrap}
.shop-btn2{display:inline-block;color:var(--m-druck);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;padding:21px 40px;border:1px solid var(--m-druck);transition:background-color .7s var(--ease),color .7s var(--ease)}
.shop-btn2:hover{background:var(--m-druck);color:#fff}
@media (max-width:900px){.shop-kw{grid-template-columns:1fr}.shop-kb{aspect-ratio:4/3}body.shop-seite .shop-kopf{min-height:0}
 .shop-nw{grid-template-columns:1fr}}
@media (max-width:767px){body.shop-seite .shop-kopf{padding:56px 0 64px}.shop-kopf h1{font-size:46px;margin-bottom:22px}body.shop-seite .shop-lead{margin-bottom:40px}
 body.shop-seite .shop-such input{font-size:18px}
 body.shop-seite .shop-raster{padding:64px 0 64px}body.shop-seite .pks{grid-template-columns:repeat(2,1fr);grid-auto-rows:210px;gap:12px}
 .pk-mu{top:-26px;left:10px;font-size:8.5px;padding:4px 6px}.pk-g .pk-t b{font-size:15px}.pk-g .pk-t{padding:12px 12px 14px}
 .shop-nicht{padding-bottom:90px}.shop-nw{padding-top:40px}.shop-btn,.shop-btn2{padding:17px 26px}}

/* 5. News im Magazin-Stil: große Kachel randlos mit Titel auf dunklem Verlauf, kleine Kacheln Bild oben (Breitformat), Text auf Weiß; leicht schwebend */
#news .news{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;grid-auto-flow:row;gap:22px}
#news .ni,#news .ni:nth-child(n){grid-column:auto;grid-row:auto;padding:0;background:#fff;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;
 box-shadow:0 1px 2px rgba(70,55,0,.08),0 16px 38px rgba(70,55,0,.16);transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
#news .ni:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(70,55,0,.08),0 26px 56px rgba(70,55,0,.22)}
.ni-b{display:block;aspect-ratio:16/9;overflow:hidden;background:#EDE6C8}
.ni-b img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) sepia(.06);transition:scale 1.6s var(--ease)}
#news .ni:hover .ni-b img{scale:1.03}
.ni-t{position:relative;display:flex;flex-direction:column;flex:1;padding:22px 24px 26px}
#news .ni h3{font-size:16.5px;line-height:1.35;margin:8px 0 8px}
#news .ni p{font-size:14px;line-height:1.6;margin:0}
#news .ni .ex{top:-12px;right:14px;background:#fff;border-color:#E2DCC4}
#news .ni.ni-gross{grid-column:1/3;grid-row:1/3;position:relative;min-height:560px;justify-content:flex-end}
#news .ni-gross .ni-b{position:absolute;inset:0;aspect-ratio:auto}
#news .ni-gross .ni-t{flex:0 0 auto;padding:150px 40px 38px;background:linear-gradient(rgba(18,16,8,0),rgba(18,16,8,.5) 45%,rgba(18,16,8,.8))}
#news .ni-gross h3{font-size:28px;font-weight:300;line-height:1.2;letter-spacing:-.01em;color:#fff;margin:10px 0 10px}
#news .ni-gross p{color:rgba(255,255,255,.86);font-size:15px}
#news .ni-gross time{color:rgba(255,255,255,.72)}
#news .ni-gross .ex{top:22px;right:22px;position:absolute;background:rgba(255,255,255,.92);border-color:transparent;color:var(--ink)}
#news .ni-gross .ni-t{position:static}
@media (max-width:767px){#news .news{grid-template-columns:1fr;gap:16px}#news .ni.ni-gross{grid-column:auto;grid-row:auto;min-height:460px}
 #news .ni-gross .ni-t{padding:120px 24px 26px}#news .ni-gross h3{font-size:22px}}
html[data-bereich=m] .q.c:after{transform:scaleX(1)}

/* ==== v29 (03.11.): Abbau/Aufbau-Video in Leistung 01, neue Leistung 05 Trockeneisreinigung ==== */
/* Video füllt denselben Rahmen wie bisher das Bild (gleiche Rahmengröße), ohne Einblendung, ohne Mitlauf; gleiche Tonung wie die Fotos */
.sv .bild .bg.bg-video{left:0;top:0;width:100%;height:100%;transform:none!important}
.sv .bg video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.8) contrast(1.05) brightness(1.02) sepia(.08);opacity:1;transition:none}
/* neue Leistung 05: Linie Cyan wie bisher Punkt 05, Bildausschnitt */
.sv[data-bild=trockeneis]:before{background:var(--c-druck)}
.sv[data-bild=trockeneis]{--hx:.4}
.sv h3 sub{font-size:.62em;vertical-align:baseline;position:relative;top:.18em}
/* v29b: Trockeneisbild (Simons Foto, Ausschnitt 1600 × 1408 px: Gesicht, Strahler, Farbwerk) – Innenbild nur so breit wie der Rahmen (kein Hochskalieren auf 200 %),
   Mitlauf wandert vom Strahler/Gesicht bis zum Farbwerk; Tonung wie die anderen Leistungsbilder (gemeinsame Regel) */
.sv[data-bild=trockeneis] .bild .bg{width:100%;left:0;right:auto}

/* ==== v31 (03.11.): Reparatur mit Bildwechsel, Gebrauchtmaschinen-Check neues Foto, weniger Mitlauf, Nummern weg ==== */
/* Nummern über den Leistungsüberschriften entfernt – Überschrift rückt hoch */
.sv .nr,#leistungen .sv .nr{display:none}
/* Bild in voller Rahmenbreite (weiter herausgezoomt statt 140–200 %), Ebene mind. so hoch wie der Rahmen */
.sv .bild .bg.bg-voll{left:0;right:auto;width:100%;height:auto;aspect-ratio:var(--ar,4/3);min-height:100%}
html .sv .bild .bg.bg-voll img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Bildwechsel: nur das Bild mit .an ist sichtbar, ruhiges Überblenden (nur Deckkraft) */
html .sv .bild .bg.bg-wechsel img{opacity:0;transition:opacity 2.2s cubic-bezier(.45,0,.2,1)}
html .sv .bild .bg.bg-wechsel img.an{opacity:1}
@media (prefers-reduced-motion:reduce){html .sv .bild .bg.bg-wechsel img:not(.an){opacity:0!important}html .sv .bild .bg.bg-wechsel img{transition:none!important}}

/* ==== v32 (03.11.): Gebrauchtmaschinen-Check – Ebene 108 % breit, langsamer Schwenk links → rechts (±2 %, site.js data-schwenk), kein Rand ==== */
.sv .bild .bg.bg-voll.bg-schwenk{width:108%;left:-4%}
@media (prefers-reduced-motion:reduce){.sv .bild .bg.bg-schwenk{left:-4%}}

/* ==== v33 (03.11.): längere Leistungstexte – minimal weniger Innenabstand und Zeilenabstand am Desktop, damit jedes Band auf einen Laptop-Bildschirm passt ==== */
@media (min-width:768px){#leistungen .sv .st{padding-top:40px;padding-bottom:40px}#leistungen .sv .st p{line-height:1.72}}

/* ==== v34 (03.11.): News – Kacheln als Links, „Alle Neuigkeiten“, Übersichtsseite und Detailseiten; ruhig, ohne Einblendung ==== */
#news a.ni{text-decoration:none;color:inherit;cursor:pointer}
#news .ni-m{margin-top:auto;padding-top:14px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
#news .ni-gross .ni-m{color:#fff}
#news .ni h3{text-transform:none}
.news-alle{margin:46px 0 0;text-align:right}
.news-alle a{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:16px 26px;background:#fff;box-shadow:0 1px 2px rgba(70,55,0,.08),0 16px 38px rgba(70,55,0,.16);transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.news-alle a:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(70,55,0,.08),0 26px 56px rgba(70,55,0,.22)}
/* Übersicht */
body.news-seite{padding-top:64px}
body.news-seite #news{padding:90px 0 120px}
.nu-h{font-size:clamp(40px,5.2vw,68px);font-weight:300;letter-spacing:-.02em;line-height:1.05;margin:0 0 18px;color:var(--ink);text-transform:none}
.nu-lead{max-width:36em;font-size:17px;line-height:1.75;color:var(--ink);margin:0 0 56px}
#news .ni.ni-breit{grid-column:1/-1;flex-direction:row;min-height:300px}
#news .ni-breit .ni-b{flex:0 0 50%;aspect-ratio:auto}
#news .ni-breit .ni-t{padding:36px 40px}
#news .ni-breit h3{font-size:22px;font-weight:400}
/* Detailseite */
.nd-kopf{background:var(--y-druck);color:var(--ink);padding:clamp(70px,11vh,120px) 0 clamp(60px,9vh,100px)}
.nd-kopf .w{max-width:1100px}
.nd-zur,.nd-alle{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.nd-kopf time{display:block;margin:48px 0 14px;font-size:13px;letter-spacing:.12em;color:rgba(27,27,29,.7)}
.nd-kopf h1{font-size:clamp(32px,4.2vw,56px);font-weight:300;letter-spacing:-.02em;line-height:1.1;margin:0 0 24px;color:var(--ink);text-transform:none;max-width:20em}
.nd-lead{font-size:18px;line-height:1.7;max-width:38em;margin:0;color:var(--ink)}
.nd-w{max-width:1100px;padding-top:70px;padding-bottom:110px}
.nd-f{margin:0}
.nd-f img,.nd-f video{display:block;width:100%;height:auto;background:#f2f2f2}
.nd-f figcaption{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--leise);margin-top:12px}
.nd-held img{width:auto;max-width:100%;max-height:78vh;margin:0}
.nd-vn{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.nd-text{max-width:680px;margin:64px 0 0}
.nd-text p{font-size:17px;line-height:1.8;margin:0 0 1.2em;color:var(--text)}
.nd-galerie{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:56px;align-items:start}
.nd-galerie.nd-g1{grid-template-columns:minmax(0,760px)}
.nd-video video{max-height:80vh;width:auto;max-width:100%}
.nd-fuss{margin-top:80px;padding-top:34px;border-top:2px solid var(--y-druck);display:flex;flex-wrap:wrap;gap:22px 40px;align-items:baseline;justify-content:space-between}
.nd-fuss p{margin:0;font-size:15px;line-height:1.7;color:var(--text)}
.nd-fuss p a{color:var(--ink)}
@media (max-width:767px){body.news-seite{padding-top:52px}body.news-seite #news{padding:60px 0 80px}
 #news .ni.ni-breit{flex-direction:column;min-height:0}#news .ni-breit .ni-b{flex:none;aspect-ratio:16/9}#news .ni-breit .ni-t{padding:22px 24px 26px}#news .ni-breit h3{font-size:16.5px}
 .news-alle{text-align:left;margin-top:30px}
 .nd-kopf time{margin-top:34px}.nd-lead{font-size:16px}.nd-w{padding-top:40px;padding-bottom:70px}
 .nd-vn,.nd-galerie{grid-template-columns:1fr;gap:14px}.nd-text{margin-top:40px}.nd-text p{font-size:16px}.nd-held img{max-height:none;width:100%}}
#news .ni-gross .ni-t{position:relative;z-index:1}
.nd-galerie .nd-video:not(:only-child){grid-column:1/-1;order:-1}

/* ==== v37 (04.11.): Hochformat-Paar Vorher/Nachher ruhig nebeneinander, begrenzte Höhe; Handy untereinander ==== */
.nd-vn.nd-hoch{grid-template-columns:repeat(2,auto);justify-content:start;gap:18px}
.nd-vn.nd-hoch img{width:auto;max-width:100%;max-height:72vh}
@media (max-width:767px){.nd-vn.nd-hoch{grid-template-columns:1fr}.nd-vn.nd-hoch img{width:100%;max-height:none}}
.nd-kopf{position:static;box-shadow:none;z-index:auto}/* v37: alte header-Regel (sticky) galt versehentlich auch für den gelben News-Kopf */

/* ===== v41: Gegendruckaufzüge, Teiledatenbank, Teil-Detailseite ===== */
.gda{background:#f6f4f2;padding:clamp(80px,11vw,140px) 0}
.gda-w{max-width:1240px;display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,6vw,96px);align-items:start}
.gda-b{position:relative;padding-bottom:18%;margin-right:8%}
.gda-g{margin:0;aspect-ratio:3/4;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.14)}
.gda-g img,.gda-k img{width:100%;height:100%;object-fit:cover;display:block}
.gda-k{position:absolute;right:-14%;bottom:0;width:72%;aspect-ratio:16/9;margin:0;border:8px solid #f6f4f2;overflow:hidden}
.gda-k figcaption{position:absolute;left:0;bottom:0;background:rgba(255,255,255,.94);color:var(--ink);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:7px 10px}
.gda-kz{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--m-druck)}
.gda-t h2{font-size:clamp(36px,4.4vw,62px);font-weight:300;letter-spacing:-.02em;line-height:1.05;margin:0 0 22px;color:var(--ink);text-transform:none}
.gda-lead{font-size:18px;line-height:1.7;color:var(--ink);margin:0 0 26px}
.gda-t ul{list-style:none;margin:0 0 36px;padding:0}
.gda-t li{position:relative;padding:0 0 14px 22px;font-size:15px;line-height:1.7;color:var(--text)}
.gda-t li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;background:var(--m-druck)}
.gda-kn{display:flex;flex-wrap:wrap;gap:22px 30px;align-items:center;margin:0}
.gda-l{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.tl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:34px 28px}
.tl-lade{grid-column:1/-1;text-align:center;color:var(--leise);font-size:15px}
.tk{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff}
.tk-b{aspect-ratio:4/3;overflow:hidden;background:#f2f0ee;display:flex;align-items:center;justify-content:center}
.tk-b img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.tk:hover .tk-b img{scale:1.03}
.tl-ohne,.td-leer span{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#aaa}
.tk-t{display:flex;flex-direction:column;gap:4px;padding:16px 2px 0}
.tk-t b{font-size:17px;font-weight:500;color:var(--ink);line-height:1.35}
.tk-t small{font-size:13px;color:var(--leise);line-height:1.5}
.tk-nr{color:var(--text)!important;letter-spacing:.02em}
.tk-f{color:var(--m-druck)!important;font-weight:600;font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.tl-kol{margin:26px 0 0;font-size:13px}.tl-kol a{color:var(--leise);text-decoration:none;border-bottom:1px solid #ccc}
body.td-seite{padding-top:64px;background:#fff}
.td{padding:clamp(40px,6vw,80px) 0 0}
.td-zu{margin:0 0 30px;font-size:13px;letter-spacing:.08em}.td-zu a{color:var(--leise);text-decoration:none}
.td-raster{display:grid;grid-template-columns:7fr 5fr;gap:clamp(30px,5vw,80px);align-items:start}
.td-gross{margin:0;aspect-ratio:4/3;background:#f2f0ee;overflow:hidden;display:flex;align-items:center;justify-content:center}
.td-gross img{width:100%;height:100%;object-fit:contain;display:block}
.td-reihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px;margin-top:12px}
.td-mini{padding:0;border:1px solid transparent;background:#f2f0ee;aspect-ratio:1;cursor:pointer;overflow:hidden}
.td-mini.an{border-color:var(--m-druck)}.td-mini img{width:100%;height:100%;object-fit:cover;display:block}
.td-text h1{font-size:clamp(30px,3.4vw,46px);font-weight:300;letter-spacing:-.015em;line-height:1.12;margin:10px 0 18px;color:var(--ink);text-transform:none}
.td-kurz{font-size:16px;line-height:1.75;margin:0 0 26px}
.td-daten{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0 0 28px;padding:22px 0;border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;font-size:14.5px}
.td-daten dt{color:var(--leise)}.td-daten dd{margin:0;color:var(--ink)}
.td-preis{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--m-druck);margin:0 0 22px}
.td-anf{background:#f6f4f2;margin-top:clamp(70px,9vw,120px);padding:clamp(60px,8vw,100px) 0}
.td-anf .w{max-width:820px}
.td-anf h2{font-size:clamp(26px,2.8vw,36px);font-weight:300;color:var(--ink);margin:0 0 8px;text-transform:none;letter-spacing:-.01em}
.td-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-top:30px}
.td-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ink)}
.td-form input:not([type=checkbox]),.td-form textarea{font:inherit;font-size:16px;font-weight:400;border:0;border-bottom:1px solid #bbb;background:transparent;padding:10px 0;color:var(--ink);outline:none}
.td-form input:focus,.td-form textarea:focus{border-bottom-color:var(--m-druck)}
.td-form .ganz{grid-column:1/-1}
.td-ds{flex-direction:row!important;align-items:flex-start;font-weight:400!important;letter-spacing:0!important;font-size:13px!important;color:var(--text)!important}
.td-ds input{margin-top:3px;accent-color:var(--m-druck)}
.td-form button{border:0;cursor:pointer;font-family:inherit}
.td-meld{margin:14px 0 0;font-size:14px;color:var(--ink)}
@media (max-width:860px){
 .gda-w,.td-raster{grid-template-columns:1fr}
 .gda-b{margin-right:0;padding-bottom:22%}.gda-g{width:82%}.gda-k{right:0;width:70%}
 .td-form{grid-template-columns:1fr}
 body.td-seite{padding-top:52px}
 .tl{grid-template-columns:1fr 1fr;gap:26px 14px}
 .tk-t b{font-size:15px}
}
@media (max-width:420px){.tl{grid-template-columns:1fr}}
.td-text .pk-mu,.tk-t .pk-mu{position:static;display:inline-block;align-self:flex-start;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--m-druck);border:1px solid var(--m-druck);padding:3px 8px}
.td-seite .fuss{padding-top:28px!important;padding-bottom:28px!important;min-height:0!important}
.td-ds,.td-ds span{text-transform:none!important}
.td-seite footer.fuss{padding:30px 0!important}.td-seite footer.fuss .fu{margin-top:0!important;padding-top:0!important;border-top:0!important}
.gda-b.gda-solo{padding-bottom:0;margin-right:0}.gda-solo .gda-g{width:100%}
/* v44: LMC-Stapel groß, eigenes Aufzug-Foto klein darüber */
.gda-b.gda-zwei{padding-bottom:26%;margin-right:10%}
.gda-zwei .gda-g{aspect-ratio:auto;width:100%;background:#eceae7}
.gda-zwei .gda-g img{height:auto}
.gda-zwei .gda-k{width:36%;aspect-ratio:3/4;right:-12%;bottom:0;border-color:#f6f4f2}
@media (max-width:860px){.gda-b.gda-zwei{margin-right:0;padding-bottom:34%}.gda-zwei .gda-g{width:100%}.gda-zwei .gda-k{right:0;width:38%}}
@media (min-width:861px){.gda-w:has(.gda-zwei){grid-template-columns:6fr 5fr}}
/* v45: eigenes Aufzug-Foto groß, LMC-Stapel klein unten rechts davor */
.gda-umg .gda-k{aspect-ratio:1600/937;width:72%;right:-14%}
@media (max-width:860px){.gda-umg .gda-k{right:0;width:62%}}
/* v82: Titel optisch bündig mit Bildoberkante; Zeilenhöhe-Ausgleich nur Desktop */
@media (min-width:861px){.gda-t h2{margin-top:-0.17em}}

/* ==== v50 (04.11.): Startseite – das weiße Band über der ersten Leistung (v27) verdeckte beim Hochschieben das Einstiegslogo. Band jetzt durchsichtig; Cyan der Leistungen beginnt erst an der Linie. ==== */
.svs .sv:nth-child(1 of .sv){background:none}
.svs,#leistungen.svs{--pt1:calc(64px + 6vh);background:linear-gradient(var(--c-druck),var(--c-druck)) 0 var(--pt1)/100% 100% no-repeat}
@media (max-width:767px){.svs,#leistungen.svs{--pt1:calc(52px + 3vh)}}

/* ==== v52 (04.11.): Kontakt = Schwarz. Kontaktseite und Kontaktbereich unten gleich; helles Logo ohne weißen Kasten ==== */
.fuss .fn{background:none;padding:0}
.fuss .fn img{width:clamp(220px,24vw,300px)}
.fuss .ff select{font:inherit;font-size:16px;letter-spacing:0;text-transform:none;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);border-radius:0;padding:10px 0;outline:none;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);background-position:calc(100% - 10px) 52%,calc(100% - 5px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.fuss .ff select option{color:#111;background:#fff}
.fuss .ff select:focus{border-bottom-color:#fff}
.fuss .ff .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fuss .fs .fmeld{max-width:28em;line-height:1.5}
#kontakt{scroll-margin-top:64px}
@media (max-width:767px){#kontakt{scroll-margin-top:52px}}
body.kseite{background:var(--k-druck)}
.kseite .fuss{background:var(--k-druck);color:#fff;padding:90px 0 0;font-size:15px}
.kseite .fuss .fu{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:90px;padding-top:28px;padding-bottom:90px;font-size:12px;color:rgba(255,255,255,.5);background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)) 24px 0/calc(100% - 48px) 1px no-repeat}
.kseite .fuss .fu a{color:rgba(255,255,255,.6);border:0;margin-left:22px;text-decoration:none}
.kseite .fuss .imp{margin-top:100px;color:rgba(255,255,255,.62)}
.kseite .fuss .imp h3{color:#fff;font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;margin-bottom:12px}
.kseite .fuss .imp p{line-height:1.8}
.kseite .fuss .imp a{color:#fff;border-bottom:1px solid rgba(255,255,255,.25);text-decoration:none}
.kseite .fuss .imp .ph{color:rgba(255,255,255,.4)}
.kseite .fuss .w{max-width:1100px}
.kseite .fuss .fw{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,110px);align-items:start}
@media (max-width:767px){.kseite .fuss{padding-top:48px}.kseite .fuss .fw{grid-template-columns:1fr;gap:56px}.kseite .fuss .fu{flex-direction:column;margin-top:64px}.kseite .fuss .fu a{margin:0 18px 0 0}.kseite .fuss .imp{margin-top:64px}}
/* v52: Aktuelles-Kacheln etwa 15–20 % niedriger (flacheres Bild, Anrisstext auf drei Zeilen, etwas weniger Innenabstand) */
#news .ni:not(.ni-gross):not(.ni-breit) .ni-b{aspect-ratio:2/1}
#news .ni:not(.ni-gross):not(.ni-breit) .ni-t{padding:18px 22px 20px}
#news .ni:not(.ni-gross) p{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#news .ni:not(.ni-gross) .ni-m{padding-top:10px}
/* v52: Ersatzteile-Kopf – statt „Ersatzteile“ die längere Leitzeile, daher kleiner gesetzt */
.shop-kopf h1.shop-h{font-size:clamp(34px,3.6vw,54px);line-height:1.12;max-width:16em}
@media (max-width:767px){.shop-kopf h1.shop-h{font-size:30px}}
html:has(body.kseite),body.kseite{background:var(--k-druck)!important}

/* ==== v53 (04.11.): Ersatzteile-Leitzeile in zwei sauberen Zeilen, ohne kleine Zeile darüber; Textblock breiter ==== */
.zl{display:block}
.spx-w:has(.spx-h){grid-template-columns:7fr 5fr}
.spx h2.spx-h{font-size:clamp(28px,2.4vw,40px);margin-top:0}
.shop-kw:has(.shop-h){grid-template-columns:7fr 5fr}
.shop-kopf h1.shop-h{font-size:clamp(30px,2.5vw,42px);max-width:none}
@media (min-width:1100px){.spx-h .zl,.shop-h .zl{white-space:nowrap}}
@media (max-width:900px){.shop-kw:has(.shop-h){grid-template-columns:1fr}}
@media (max-width:767px){.spx-w:has(.spx-h){grid-template-columns:1fr}.spx h2.spx-h{font-size:27px}.shop-kopf h1.shop-h{font-size:29px}}
/* v53: Gebrauchtmaschinen-Check jetzt senkrecht (von oben nach unten) statt seitlich; Trockeneis bekommt überall etwas Bildreserve, damit es sofort und durchgehend ruhig läuft */
.sv[data-bild=gebrauchtcheck] .bild .bg.bg-voll,.sv[data-bild=trockeneis] .bild .bg.bg-voll{left:0;width:100%;top:0;bottom:auto;aspect-ratio:auto;min-height:0;height:122%}

/* ==== v53: Kontaktformular wieder mit umrandeten Feldern (wie die frühere Kontaktseite), auf Schwarz ==== */
.fuss .ff.ff-rahmen{gap:20px 22px}
.fuss .ff-rahmen label{gap:9px}
.fuss .ff-rahmen input,.fuss .ff-rahmen textarea,.fuss .ff-rahmen select{border:1px solid rgba(255,255,255,.34);padding:13px 14px;background-color:rgba(255,255,255,.03)}
.fuss .ff-rahmen select{background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;padding-right:40px}
.fuss .ff-rahmen input:focus,.fuss .ff-rahmen textarea:focus,.fuss .ff-rahmen select:focus{border-color:#fff}
.fuss .ff-rahmen textarea{min-height:140px}
.fuss .fk .fl1{max-width:26em}
/* Impressumsseite: ruhig, hell */
body.iseite .iseite-m .sec{padding:70px 0 90px}
.i-h{font-size:clamp(28px,3vw,40px);font-weight:300;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
body.iseite .imp{margin-top:36px}body.iseite .imp p{line-height:1.8}
body.iseite .imp > div{scroll-margin-top:90px}
/* Einstieg: Claim „Quality in Press Service“ erscheint ein Viertel früher (2,8 s → 2,1 s) */
@media (prefers-reduced-motion:no-preference){#intro .cl,#intro .ln{animation-delay:1.5s}}
/* v53 (l): Intro-Logo und Claim wandern beim Scrollen mit und bleiben mittig im sichtbaren Weiß; sie sind ganz ausgeblendet, bevor die Leistungsfläche sie erreicht (vorher bei p = .2, jetzt .13) */
@media (prefers-reduced-motion:no-preference){#intro .il,#intro .ic{translate:0 calc(var(--p,0)*-150vh)}}
#intro{opacity:max(0,calc(1 - var(--p,0)/.13))}
/* v54: Ersatzteil-Abschnitt Startseite – Textblock deutlich breiter, Überschrift sauber in zwei Zeilen */
.spx-w:has(.spx-h){max-width:1240px;grid-template-columns:3fr 2fr;gap:clamp(32px,4vw,64px)}
.spx h2.spx-h{font-size:clamp(28px,2.7vw,42px)}
@media (min-width:1000px){.spx-h .zl{white-space:nowrap}}
@media (max-width:999px){.spx-w:has(.spx-h){grid-template-columns:1fr}}
/* v55: Logo/Claim per JS (--iy) mittig im sichtbaren Weiß; Ausblenden wieder etwas langsamer (fertig bei p = .17) */
#intro .il,#intro .ic{translate:0 var(--iy,0px)!important}
#intro{opacity:max(0,calc(1 - var(--p,0)/.17))}

/* ==== v57 (04.11.): Kontaktblock – erster Satz als ruhige Überschrift, Rest als Fließtext, ausgewogene Umbrüche ==== */
.fuss .fk-h{font-size:clamp(24px,2.3vw,32px);font-weight:300;letter-spacing:-.005em;line-height:1.25;text-transform:none;color:#fff;margin:48px 0 18px;text-wrap:balance;max-width:14em}
.fuss .fk .fl1{text-wrap:pretty;max-width:25em}
@supports not (text-wrap:pretty){.fuss .fk .fl1{text-wrap:balance}}
@media (max-width:767px){.fuss .fk-h{font-size:24px;margin-top:36px}}

/* ==== v57: Ersatzteil-Abschnitt Startseite – großes Zahnrad-Bild über die volle Breite mit Überschrift, darunter zwei Kacheln ==== */
.spx.spx2{padding:clamp(56px,8vh,84px) 0}
.spx2-w{max-width:1240px}
.spx2-hero{position:relative;overflow:hidden;aspect-ratio:21/8;background:#3a0020;box-shadow:0 22px 54px rgba(70,0,35,.28)}
.spx2-hero>img,.spx2-kf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.spx2-hero>img{object-position:50% 55%}
.spx2-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(120,0,58,.86) 0%,rgba(150,8,78,.62) 42%,rgba(150,8,78,.12) 78%,rgba(150,8,78,0) 100%)}
.spx2-t{position:absolute;z-index:1;left:clamp(28px,4.5vw,64px);bottom:clamp(28px,4.5vw,60px);right:30%}
.spx2 h2.spx-h{margin:0 0 28px;font-size:clamp(28px,2.7vw,42px);text-shadow:0 1px 18px rgba(60,0,30,.35)}
.spx2 .spx-btn{background:rgba(255,255,255,.02)}
.spx2-cap{position:absolute;z-index:1;right:0;bottom:0;background:rgba(255,255,255,.94);color:var(--ink);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:9px 14px}
.spx2-k{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.spx2-kf{position:relative;display:block;overflow:hidden;aspect-ratio:2/1;background:#fff;box-shadow:0 22px 54px rgba(70,0,35,.22)}
.spx2-kf .spx2-cap{left:0;right:auto}
.spx2-kf img{transition:scale 1.6s var(--ease)}.spx2-kf:hover img{scale:1.03}
@media (max-width:999px){.spx2-t{right:12%}}
@media (max-width:767px){.spx.spx2{padding:48px 0 56px}
 .spx2-hero{aspect-ratio:auto;display:flex;flex-direction:column}
 .spx2-hero>img{position:relative;inset:auto;aspect-ratio:4/3;height:auto}
 .spx2-hero:after{display:none}
 .spx2-t{position:relative;left:auto;bottom:auto;right:auto;background:var(--m-druck);padding:24px 0 0}
 .spx2-hero{background:var(--m-druck);box-shadow:none}
 .spx2-hero .spx2-cap{top:0;bottom:auto}
 .spx2 h2.spx-h{font-size:26px;margin-bottom:22px;text-shadow:none}
 .spx2-k{grid-template-columns:1fr;gap:12px;margin-top:28px}.spx2-kf{aspect-ratio:16/10}}

/* v59: Zurückfahrt ins Intro – Logo samt Claim blendet leicht weicher ein */
html.hochfahrt #intro{transition:opacity .35s ease}

/* v62: Menüleiste ohne Unterlinie (keine Trennlinie, kein Schatten) und Abschnittskanten exakt an der Menüunterkante (64 px) */
body:has(.qm):before,html.js body:has(#intro):before,html.js.linie body:has(#intro):before{border-bottom:0;box-shadow:none}
@media (min-width:768px){.full,section[id],#kontakt{scroll-margin-top:64px}}

/* v75: ein einziger Anfrage-Knopf mit ganzem Satz – mittig, darf umbrechen, ruhig gesetzt */
.td-send-z{text-align:center;margin-top:8px}
.td-send{display:inline-block;max-width:560px;width:100%;border:0;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:.02em;font-size:15px;line-height:1.45;padding:18px 28px;text-wrap:balance}
@media (max-width:600px){.td-send{font-size:15px;padding:16px 20px}}
/* v75: Pflichtfeld-Fehler im Anfrageformular – gleiche Kennzeichnung wie in der App (v69) */
.td-form .e-pflicht-hinweis{color:#C0262D;background:#FDECEC;border:2px solid #C0262D;border-radius:10px;padding:12px 14px;font-weight:700;font-size:16px;margin:0;letter-spacing:0}
.td-form label.e-fehlt{color:#C0262D;font-weight:700;flex-direction:column}
.td-form .e-fehlt input{border-bottom:2px solid #C0262D!important}
.td-form .e-warn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#C0262D;color:#fff;font-weight:800;font-size:13px;line-height:1;letter-spacing:0}
.td-ds-hin{margin:0;font-size:13px;line-height:1.5;color:#666}

/* v77: Impressum / Datenschutz */
.imp-recht{align-items:start}
.imp-leise{margin-top:14px;font-size:12px}
.imp-leise a{opacity:.75}
.ds-text{max-width:720px;margin-top:28px;font-size:15px;line-height:1.7;color:var(--mu)}
.ds-text h2{font-size:16px;font-weight:600;color:var(--ink);margin:28px 0 8px;letter-spacing:.02em}
.ds-text p{margin:0 0 10px}
.ds-stand{margin-top:36px;font-size:13px;color:#888}
.ds-hinweis{max-width:720px;margin:8px 0 0;font-size:14px;line-height:1.6;color:#666}
.melde{font-size:12px;opacity:.7;margin:18px 0 0}
.melde a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.full .cr a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* v78: Ultraschall-Sparten */
.us-sp{padding:64px 0 40px;background:#fff}
.us-sp + .us-sp{padding-top:20px;border-top:1px solid #eee}
.us-sp h2{font-size:clamp(22px,2.4vw,30px);font-weight:300;letter-spacing:-.01em;color:var(--ink);margin:0 0 16px}
.us-sp .us-lead{font-size:16px;line-height:1.65;color:var(--mu);max-width:720px;margin:0 0 22px}
.us-sp .us-btn{margin-top:28px}
.us-paar{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0 8px}
.us-paar figure{margin:0}
.us-paar img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:#eee}
.us-paar figcaption{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--leise);margin-top:10px}
@media (max-width:700px){.us-paar{grid-template-columns:1fr;gap:14px}.us-sp{padding:48px 0 28px}}

/* v78b: Ultraschall-Sparten immer sichtbar (kein leeres Zwischenstück durch .rv) */
.us-sp .rv,.us-sp.rv{opacity:1!important;transform:none!important}

/* v79: Ultraschall – niedriger Hero, kleinere Bildpaare */
.full.sm.us-hero{min-height:32vh;background-position:100% 48%}
@media (min-width:900px){.full.sm.us-hero{min-height:30vh;background-position:68% 50%}}
.us-sp{padding:56px 0 36px;background:#fff}
.us-sp + .us-sp{padding-top:16px;border-top:1px solid #eee}
.us-sp h2{font-size:clamp(22px,2.4vw,30px);font-weight:300;letter-spacing:-.01em;color:var(--ink);margin:0 0 14px}
.us-sp .us-sub{font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:36px 0 12px;color:var(--ink)}
.us-sp .us-lead{font-size:16px;line-height:1.65;color:var(--mu);max-width:720px;margin:0 0 18px}
.us-sp .us-btn{margin-top:24px}
.us-paar{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 6px;max-width:1040px}
.us-paar-quer{max-width:960px}
.us-paar-hoch{max-width:720px}
.us-paar figure{margin:0}
.us-paar img{display:block;width:100%;height:auto;max-width:520px;background:#eee}
.us-paar-hoch img{max-width:340px;margin:0 auto}
.us-paar figcaption{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--leise);margin-top:8px}
.us-cap{font-size:13.5px;color:var(--leise);margin:4px 0 0;letter-spacing:.02em}
.us-hinweis{font-size:12px;color:#999;margin:36px 0 0;line-height:1.5;max-width:640px}
@media (max-width:700px){
 .full.sm.us-hero{min-height:34vh;background-position:100% 48%}
 .us-paar{grid-template-columns:1fr;gap:12px;max-width:420px}
 .us-paar img{max-width:100%}
 .us-sp{padding:40px 0 24px}
}

/* ==== v83: deutliche Bestätigung nach dem Absenden der Kontakt- und Anfrageformulare ==== */
.ff-ort{min-width:0}
/* hidden muss display:grid der Formulare überstimmen, sonst bleibt das leere Formular sichtbar */
.ff-ort .ff[hidden],.af-f[hidden]{display:none!important}
.fuss .ff.ff-weg{opacity:0;pointer-events:none;transition:opacity .32s var(--ease)}
.fuss .ff-ok{color:#fff;padding:4px 0 8px;outline:none}
.fuss .ff-ok.ff-ok-an{animation:ffOkEin .45s var(--ease) both}
@keyframes ffOkEin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ff-ok-z{display:block;width:64px;height:64px;margin:0 0 22px;color:#fff}
.ff-ok-z svg{display:block;width:64px;height:64px}
.fuss .ff-ok-t{font-size:clamp(22px,2.2vw,30px);font-weight:300;letter-spacing:-.01em;line-height:1.25;color:#fff;margin:0 0 12px;text-transform:none;max-width:18em}
.fuss .ff-ok-s{font-size:16px;line-height:1.65;color:rgba(255,255,255,.82);margin:0 0 28px;max-width:24em}
.fuss .ff-ok-n{font:inherit;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);background:none;border:0;border-bottom:1px solid rgba(255,255,255,.4);padding:0 0 3px;cursor:pointer}
.fuss .ff-ok-n:hover{color:#fff;border-bottom-color:#fff}
.fuss .ff-ok:focus{outline:none}
.fuss .ff-ok:focus-visible{outline:1px solid rgba(255,255,255,.45);outline-offset:8px}
.fuss .ff-fehl{grid-column:1/-1;font-size:14px;line-height:1.55;color:#E8A317;margin:0 0 2px}
.fuss .fs button[disabled]{opacity:.55;cursor:wait}
/* Anfragefenster: gleiche Bestätigung, Häkchen in Cyan auf Weiß, Fehler in Orange */
.af-ok{padding:28px 0 20px}
.af-ok:before{content:none;display:none}
.af-ok .ff-ok-z{color:var(--c-druck);margin-bottom:24px}
.af-ok .ff-ok-t,.af-ok1{font-size:clamp(22px,2.2vw,28px);font-weight:300;letter-spacing:-.01em;color:var(--ink);margin:0 0 10px;text-transform:none}
.af-ok .ff-ok-s,.af-ok2{font-size:16px;line-height:1.65;color:var(--text);margin:0 0 28px}
.af-ok .ff-ok-n{font:inherit;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 3px;cursor:pointer}
.af-ok.ff-ok-an{animation:ffOkEin .45s var(--ease) both}
.af-fehl{color:#C47A12}
.af-ok:focus{outline:none}
.af-ok:focus-visible{outline:1px solid var(--c-druck);outline-offset:8px}
@media (prefers-reduced-motion:reduce){
 .fuss .ff.ff-weg{transition:none;opacity:0}
 .fuss .ff-ok.ff-ok-an,.af-ok.ff-ok-an{animation:none;opacity:1;transform:none}
}
.af-hinweis{font-size:14px;line-height:1.5;color:var(--text);margin:4px 0 8px}.af-hinweis a{color:var(--ink)}

/* ==== v88: Ultraschall-Hero – drei Felder mit weißen Fugen (Übergang, bis ein eigenes Kopfbild kommt) ==== */
.full.sm.us-hero{position:relative;overflow:hidden;background:#111}
.full.sm.us-hero .us-hc{position:absolute;inset:0;display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:3px;background:#fff;z-index:0;pointer-events:none}
.full.sm.us-hero .us-hc-i{overflow:hidden;min-width:0;min-height:0;background:#222}
.full.sm.us-hero .us-hc-i img{display:block;width:100%;height:100%;object-fit:cover}
.full.sm.us-hero .us-hc-walze img{object-position:right 48%}
.full.sm.us-hero .us-hc-naepf img{object-position:center}
.full.sm.us-hero .us-hc-gtw img{object-position:center 42%}
.full.sm.us-hero:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(12,12,14,.62) 0%,rgba(12,12,14,.36) 28%,rgba(12,12,14,.12) 52%,rgba(12,12,14,0) 72%)}
.full.sm.us-hero>.w{position:relative;z-index:2}
.full.sm.us-hero h1,.full.sm.us-hero p{text-shadow:0 1px 10px rgba(0,0,0,.45)}
@media (max-width:900px){
 .full.sm.us-hero .us-hc{grid-template-columns:1.4fr 1fr}
 .full.sm.us-hero .us-hc-gtw{display:none}
}
@media (max-width:700px){
 .full.sm.us-hero .us-hc{grid-template-columns:1fr;gap:0}
 .full.sm.us-hero .us-hc-naepf,.full.sm.us-hero .us-hc-gtw{display:none}
 .full.sm.us-hero .us-hc-walze img{object-position:right 48%}
 .full.sm.us-hero h1{font-size:clamp(22px,5.8vw,28px);letter-spacing:-.03em}
 .full.sm.us-hero:after{background:linear-gradient(90deg,rgba(12,12,14,.58) 0%,rgba(12,12,14,.28) 50%,rgba(12,12,14,.1) 100%)}
}


/* ==== v89: Gegendruckaufzüge flächig Magenta (CI --m-druck), unabhängig vom Scroll-Ton.
   Ursache: .gda hatte den opaken Hintergrund #f6f4f2 und deckte html[data-bereich=m]/--ton zu.
   Aktuelles bleibt über #news.yel gelb; dieser Block macht #gegendruckaufzuege ebenso flächig magenta. ==== */
#gegendruckaufzuege.gda,
.gda{background:var(--m-druck)}
.gda .gda-t h2,
.gda .gda-kz,
.gda .gda-l{color:#fff}
.gda .gda-lead,
.gda .gda-t li{color:rgba(255,255,255,.92)}
.gda .gda-t li::before{background:#fff}
.gda .gda-k,
.gda-zwei .gda-k{border-color:var(--m-druck)}
#gegendruckaufzuege .shop-btn,
.gda .shop-btn{background:transparent;color:#fff;border:1px solid #fff}
#gegendruckaufzuege .shop-btn:hover,
.gda .shop-btn:hover{background:#fff;color:var(--m-druck)}
.cbar.m:before{background:var(--m-druck)}

/* v89: einheitliches Fußformular – Anliegen zuerst, Zusatzfelder, lesbarer Hinweis auf Schwarz */
#anfrage{scroll-margin-top:88px}
.fuss .ff-extra{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
.fuss .ff-extra[hidden]{display:none!important}
.fuss .ff-extra .ganz{grid-column:1/-1}
.fuss fieldset.af-pos,
.fuss fieldset.af-vers{border:0;margin:0;padding:0}
.fuss fieldset legend{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)!important;padding:0;margin:0 0 12px}
.fuss .af-hinweis,
.fuss .af-hinweis a,
.fuss .af-r,
.fuss .af-r span,
.fuss .e-haken,
.fuss .e-haken span,
.fuss .e-haken a,
.fuss .ff-agb,
.fuss .ff-agb span,
.fuss .ff-agb a,
.fuss .af-plus{color:rgba(255,255,255,.82)!important}
.fuss .af-hinweis a,
.fuss .e-haken a,
.fuss .ff-agb a{color:#fff!important;border-bottom:1px solid rgba(255,255,255,.35);text-decoration:none}
.fuss .af-plus{color:#fff!important;background:none;border:0;padding:4px 0;cursor:pointer;text-align:left;letter-spacing:.08em}
.fuss .af-r input,
.fuss .e-haken input,
.fuss .ff-agb input{accent-color:#fff;margin-top:3px;width:16px;height:16px;flex:none}
.fuss .ff-agb,
.fuss .e-haken{display:flex!important;align-items:flex-start;gap:12px;font-size:14px!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer;line-height:1.5;color:rgba(255,255,255,.82)!important}
@media (max-width:767px){
 .fuss .ff-extra{grid-template-columns:1fr}
}

/* v91: feste Mail-Leiste (.cbar) entfernt */
.cbar{display:none!important}

/* v97: Händler-Anfrage im Fußformular – Anrede (freiwillig), Vorname, Nachname statt Name */
.fuss .ff label[hidden]{display:none!important}
.fuss .ff-anr{display:flex;flex-wrap:wrap;gap:4px 32px}
.fuss .ff-anr .af-r{margin-bottom:0}