/* Layout: "Typenschild". Linksbündige, breite Spalten wie ein Maschinendatenblatt;
   technische Werte stehen in Mono als Label/Wert-Paare, Maschinenblau trägt, Signalgelb ruft. */
:root{
  /* helle Version: weißer Grund, Blau und Gelb als Akzent */
  --bg:#FFFFFF; --surface:#F4F6FA; --ink:#131936; --muted:#525B7A; --line:#D5DBE8;
  --blue:#1B4F8C; --signal:#F4AE0B; --on-signal:#1C1600; --on-signal-soft:rgba(28,22,0,.24);
  --panel:#EEF2FA; --panel-2:#FFFFFF; --panel-deep:#DCE3F1; --panel-line:#C6CFE3;
  --on-panel:#131936; --on-panel-muted:#525B7A; --panel-accent:#1B4F8C; --hl:#222853; --on-hl:#F3F5FB;
  --mat:#1B4F8C; --mat2:#7FA0CC; --mat-line:#EEF2FA;
  --nv:#222853; --nv-2:#2C3469; --nv-deep:#161B3D; --nv-line:#414A86; --on-nv:#F3F5FB; --on-nv-muted:#B6BEDC;
  --photo:#FFFFFF; --scrim:rgba(9,12,30,.9);
  --ok:#1B8553; --off:#B2452C;
  --display:"Sofia Sans Condensed","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --body:"Sofia Sans","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --gutter:clamp(16px,4vw,40px);
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D1124; --surface:#151A36; --ink:#EDF0F8; --muted:#A4ACCA; --line:#2A3157;
    --blue:#86B3EA; --signal:#F6B728; --on-signal:#1C1600; --on-signal-soft:rgba(28,22,0,.24);
    --panel:#191F45; --panel-2:#232B5A; --panel-deep:#0F1430; --panel-line:#3A437C;
    --on-panel:#F3F5FB; --on-panel-muted:#B6BEDC; --panel-accent:#F6B728; --hl:#F6B728; --on-hl:#1C1600;
    --mat:#B6BEDC; --mat2:#F3F5FB; --mat-line:#0F1430;
    --nv:#191F45; --nv-2:#232B5A; --nv-deep:#0F1430; --nv-line:#3A437C; --on-nv:#F3F5FB; --on-nv-muted:#B6BEDC;
    --photo:#FFFFFF; --scrim:rgba(4,6,16,.92);
    --ok:#4DC48B; --off:#F08D72; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1124; --surface:#151A36; --ink:#EDF0F8; --muted:#A4ACCA; --line:#2A3157;
  --blue:#86B3EA; --signal:#F6B728; --on-signal:#1C1600; --on-signal-soft:rgba(28,22,0,.24);
  --panel:#191F45; --panel-2:#232B5A; --panel-deep:#0F1430; --panel-line:#3A437C;
  --on-panel:#F3F5FB; --on-panel-muted:#B6BEDC; --panel-accent:#F6B728; --hl:#F6B728; --on-hl:#1C1600;
  --mat:#B6BEDC; --mat2:#F3F5FB; --mat-line:#0F1430;
  --nv:#191F45; --nv-2:#232B5A; --nv-deep:#0F1430; --nv-line:#3A437C; --on-nv:#F3F5FB; --on-nv-muted:#B6BEDC;
  --photo:#FFFFFF; --scrim:rgba(4,6,16,.92);
  --ok:#4DC48B; --off:#F08D72; color-scheme:dark;
}
/* Flächen, die in beiden Versionen dunkelblau bleiben */
.plate,.smart,footer,.lb,.foto-tools,.saver-num.win{--panel:var(--nv);--panel-2:var(--nv-2);--panel-deep:var(--nv-deep);--panel-line:var(--nv-line);--on-panel:var(--on-nv);--on-panel-muted:var(--on-nv-muted);--panel-accent:var(--signal)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
[hidden]{display:none!important}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- Type ---------- */
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2.9rem,7.4vw,5.6rem);line-height:.92;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance}
h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1;text-wrap:balance}
h3{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.1}
.lead{font-size:1.14rem;max-width:62ch;color:var(--muted)}
.more{font-weight:700;text-decoration:none;display:inline-flex;gap:.4rem;align-items:center}
.more span{display:inline-block;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.more:hover span{transform:translateX(4px)}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:0 1.25rem;border-radius:6px;border:1px solid transparent;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform 160ms var(--ease-out),background-color 160ms ease,border-color 160ms ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--signal);color:var(--on-signal)}
.btn-ic{flex:none;margin-left:-.15rem}
.btn-line{background:transparent;border-color:var(--panel-line);color:var(--on-panel)}
.btn-quiet{background:transparent;border-color:var(--line);color:var(--ink);min-height:40px;padding:0 1rem;font-size:.94rem}
.btn-sm{min-height:36px;padding:0 .8rem;font-size:.88rem}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:color-mix(in srgb,var(--signal) 86%,#fff)}
  .btn-line:hover{border-color:var(--on-panel)}
  .btn-quiet:hover{border-color:var(--ink)}
}

/* ---------- Header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.head-row{position:relative;display:flex;align-items:center;gap:1.4rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto;flex:none}
.brand img{height:38px;width:auto}
.brand-name{display:flex;flex-direction:column;line-height:1.05}
.brand-name b{font-family:var(--display);font-weight:700;font-size:1.2rem}
.brand-name small{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;gap:1.2rem;flex:none}
.nav a{text-decoration:none;font-weight:600;font-size:.98rem;padding:.4rem 0;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav a:hover::after{transform:scaleX(1)}}
.head-tel{font-family:var(--mono);font-size:.92rem;user-select:all;white-space:nowrap}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:6px;background:transparent;cursor:pointer;place-items:center;transition:transform 160ms var(--ease-out)}
.menu-btn:active{transform:scale(.95)}
.menu-btn span,.menu-btn span::before{display:block;width:18px;height:2px;background:var(--ink);content:"";position:relative}
.menu-btn span::before{position:absolute;top:6px}
.menu-btn span{top:-3px}
.sheet{position:absolute;right:var(--gutter);top:calc(100% + 8px);width:min(300px,calc(100vw - 2 * var(--gutter)));background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.5rem;box-shadow:0 18px 40px -18px rgba(10,14,40,.45);transform-origin:top right;opacity:0;transform:scale(.96);visibility:hidden;transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out),visibility 0s linear 150ms}
.sheet[data-open="true"]{opacity:1;transform:scale(1);visibility:visible;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s}
.sheet a{display:block;padding:.8rem .9rem;border-radius:6px;text-decoration:none;font-weight:600}
.sheet a[aria-current="page"]{background:var(--bg)}
.sheet a:active{background:var(--bg)}
.sheet .sheet-tel{border-top:1px solid var(--line);margin-top:.4rem;padding:.9rem;font-family:var(--mono);font-size:.9rem;user-select:all}
/* Telefon steht im gelben Band, in Kontakt und Fußzeile; in der Kopfzeile ist dafür kein Platz mehr */
.head-tel{display:none}
/* Menü bleibt bis 1000 px Breite sichtbar (Schrift etwas kleiner); unter 1100 px ohne „Angebot anfragen“,
   der Weg dorthin steht als „Kontakt“ im Menü. Erst unter 1000 px klappt es ins Burger-Menü. */
@media (max-width:1400px){.nav{gap:.95rem}.nav a{font-size:.93rem}}
@media (max-width:1099px){.head-cta{display:none}}
@media (max-width:999px){.nav,.head-cta{display:none}.menu-btn{display:grid}}
/* mit vollem Menü reicht der Platz nur für das Logo; der Schriftzug erscheint, wenn das Menü eingeklappt ist */
@media (min-width:1000px){.brand-name{display:none}}

/* ---------- Video ganz oben (Startseite) ---------- */
.vhero{position:relative;background:var(--nv-deep);overflow:hidden}
.vhero video{display:block;width:100%;height:min(56.25vw,72vh);min-height:190px;object-fit:cover;background:var(--nv-deep)}
/* Logo und Zeile mittig über dem Video; ein dunkler Schleier hält beides lesbar */
.vhero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 70% at 50% 50%,rgba(9,12,30,.62),rgba(9,12,30,.18) 72%,rgba(9,12,30,.1));pointer-events:none}
.vhero-brand{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.7rem,2vw,1.5rem);padding:1rem var(--gutter);text-align:center;pointer-events:none;animation:rise 700ms var(--ease-out) both}
.vhero-brand img{width:clamp(170px,30vw,420px);height:auto;filter:drop-shadow(0 14px 30px rgba(4,6,16,.5))}
.vhero-brand p{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,3.6vw,3.2rem);line-height:1.05;letter-spacing:.01em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(4,6,16,.7),0 4px 26px rgba(4,6,16,.85);text-wrap:balance;max-width:24ch}
@media (prefers-reduced-motion:reduce){.vhero-brand{animation:none}}
/* Auftritt: Logo fliegt herein, die Zeile Buchstabe für Buchstabe; nach 3 s fliegt die Zeile weg und das Logo wandert klein nach rechts oben */
.vhero.anim .vhero-brand{animation:none}
.vhero.anim .vhero-brand img{opacity:0;will-change:transform,opacity,filter}
.vhero.anim.go .vhero-brand img{animation:vbLogoIn 1000ms cubic-bezier(.16,1.12,.3,1) forwards}
.vhero.anim.shown .vhero-brand img{animation:none;opacity:1;transform:none;filter:drop-shadow(0 14px 30px rgba(4,6,16,.5))}
.vhero.anim.out .vhero-brand img{transform-origin:50% 50%;transform:translate(var(--lx,0px),var(--ly,0px)) scale(var(--ls,1));filter:drop-shadow(0 6px 14px rgba(4,6,16,.55));transition:transform 1100ms cubic-bezier(.65,0,.25,1),filter 1100ms ease}
@keyframes vbLogoIn{
  0%{opacity:0;transform:perspective(900px) translateZ(420px) rotateX(28deg) rotate(-12deg) scale(1.5);filter:blur(16px) drop-shadow(0 14px 30px rgba(4,6,16,0))}
  55%{opacity:1;filter:blur(0) drop-shadow(0 14px 30px rgba(4,6,16,.5))}
  100%{opacity:1;transform:none;filter:blur(0) drop-shadow(0 14px 30px rgba(4,6,16,.5))}}
.vhero-brand .w{display:inline-block;white-space:nowrap}
.vhero-brand .ch{display:inline-block;transform-origin:50% 100%}
.vhero-brand .hy{display:none}
.vhero-brand .hy.on{display:inline-block}
.vhero.anim .vhero-brand .ch{opacity:0}
.vhero.anim.go .vhero-brand .ch{animation:vbChIn 560ms cubic-bezier(.2,.9,.25,1.3) forwards;animation-delay:calc(var(--i) * 22ms + 380ms)}
.vhero.anim.out .vhero-brand .ch{opacity:1;animation:vbChOut 520ms cubic-bezier(.55,0,.8,.4) forwards;animation-delay:calc(var(--i) * 14ms)}
@keyframes vbChIn{
  0%{opacity:0;transform:perspective(500px) translate3d(0,.9em,0) rotateX(-95deg) scale(.6);filter:blur(6px)}
  100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes vbChOut{
  0%{opacity:1;transform:none;filter:blur(0)}
  100%{opacity:0;transform:perspective(500px) translate3d(var(--dx,0em),-1.3em,0) rotateX(80deg) rotate(var(--rz,0deg)) scale(.7);filter:blur(5px)}}
.vhero.anim::after{transition:opacity 1200ms ease}
.vhero.anim.out::after{opacity:.25}

/* ---------- Hero (Startseite) ---------- */
.hero,.phero{background:var(--panel);color:var(--on-panel)}
.hero .eyebrow,.phero .eyebrow{color:var(--panel-accent)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(2.5rem,6vw,5rem)}
.hero-copy{display:flex;flex-direction:column;gap:1.4rem;min-width:0}
.hero-copy p{font-size:1.16rem;max-width:54ch;color:var(--on-panel-muted)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.4rem}
.rise{animation:rise 600ms var(--ease-out) both}
.rise:nth-child(2){animation-delay:60ms}.rise:nth-child(3){animation-delay:120ms}.rise:nth-child(4){animation-delay:180ms}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

.demo{background:var(--panel-2);border:1px solid var(--panel-line);border-radius:12px;padding:clamp(1rem,2.4vw,1.5rem);display:flex;flex-direction:column;gap:1rem;min-width:0}
.demo-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.demo-top .lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-panel-muted)}
.readout{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,3.6rem);line-height:.9;font-variant-numeric:tabular-nums;color:var(--panel-accent)}
.readout small{font-size:.5em;margin-left:.1em}
.press{display:block;width:100%;height:auto}
.press .st{fill:none;stroke:var(--on-panel-muted);stroke-width:1.5}
.press .body{fill:var(--panel);stroke:var(--on-panel-muted);stroke-width:1.5}
.press .rib{stroke:var(--panel-line);stroke-width:1.5}
.press .chamber{fill:var(--panel-deep);stroke:var(--panel-line);stroke-width:1}
.press .h-bg{fill:var(--mat)}
.press .h-ln{stroke:var(--mat-line);stroke-width:3}
.press .ram{fill:var(--signal)}
.press .rod{fill:var(--on-panel-muted)}
.press .wheel{fill:var(--panel-deep);stroke:var(--on-panel-muted);stroke-width:1.5}
.press text{font-family:var(--mono);font-size:10px;letter-spacing:.1em;fill:var(--on-panel-muted)}
.press .h-bg2{fill:var(--mat2)}
.press .slab{stroke:var(--panel-deep);stroke-width:1.5;vector-effect:non-scaling-stroke}
.press .mouth{fill:none;stroke:var(--panel-accent);stroke-width:1.5;stroke-dasharray:4 4;opacity:.7}
.replay{align-self:flex-start;background:transparent;border:0;padding:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-panel-muted);cursor:pointer;text-decoration:underline;text-underline-offset:4px;transition:transform 160ms var(--ease-out)}
.replay:active{transform:scale(.97)}
.calc{border-top:1px solid var(--panel-line);padding-top:1rem;display:grid;gap:.7rem}
.calc label{font-size:.95rem;color:var(--on-panel-muted)}
.calc-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.calc-row output{font-family:var(--mono);font-size:.95rem}
.calc-row output b{font-size:1.25rem;color:var(--signal);font-weight:500}
.calc small{font-size:.8rem;color:var(--on-panel-muted);line-height:1.4}

.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--panel-line)}
.facts div{padding:1.3rem 1.2rem 1.5rem 0;display:flex;flex-direction:column;gap:.15rem}
.facts div+div{border-left:1px solid var(--panel-line);padding-left:1.2rem}
.facts dt{order:2;font-size:.9rem;color:var(--on-panel-muted)}
.facts dd{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts div:nth-child(3){border-left:0;padding-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--panel-line)}
}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.phero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(2.5rem,5.5vw,4.5rem)}
.phero-grid.solo{grid-template-columns:minmax(0,1fr)}
.phero h1{font-size:clamp(2.5rem,5.6vw,4.4rem)}
.phero-copy{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.phero-copy p{font-size:1.14rem;max-width:58ch;color:var(--on-panel-muted)}
.crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-panel-muted)}
.crumb a{text-decoration:none;color:var(--panel-accent)}
.phero-img{border-radius:12px;overflow:hidden;border:1px solid var(--panel-line);background:var(--photo);aspect-ratio:3/2}
.phero-img img{width:100%;height:100%;object-fit:cover}
.phero-img.cut img{object-fit:contain;padding:3%}
.phero-img.has-note{position:relative}
.img-note{position:absolute;right:.6rem;bottom:.6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:rgba(255,255,255,.92);background:rgba(9,12,30,.55);border-radius:4px;padding:.18rem .45rem;pointer-events:none}
.phero h1{-webkit-hyphens:auto;hyphens:auto}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.chips li{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--panel-line);border-radius:4px;padding:.35rem .6rem}
@media (max-width:900px){.phero-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Sections ---------- */
.sec{padding-block:clamp(3.5rem,8vw,6.5rem)}
.sec-white{background:var(--surface);border-block:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head.row{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem}
.sec-head.row>div{display:flex;flex-direction:column;gap:1rem;min-width:0}

.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.way{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.way-img{display:block;aspect-ratio:3/2;background:var(--photo);border-radius:10px;overflow:hidden;border:1px solid var(--line);margin-bottom:.5rem}
.way-img img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease-out)}
.way-img.cut img{object-fit:contain;padding:3%}
@media (hover:hover) and (pointer:fine){.way:hover .way-img img{transform:scale(1.03)}}
.way p{color:var(--muted)}
.way .more{margin-top:auto;padding-top:.6rem;align-self:flex-start}
@media (max-width:820px){.ways{grid-template-columns:minmax(0,1fr)}}

.rent{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.benefits{display:grid;gap:1.6rem}
.benefits li{display:grid;gap:.25rem;padding-left:1.1rem;border-left:3px solid var(--signal);min-width:0}
.benefits b{font-family:var(--display);font-size:1.3rem;font-weight:700;line-height:1.15}
.benefits span{color:var(--muted)}

.plate{position:relative;background:var(--panel);color:var(--on-panel);border-radius:10px;padding:1.6rem 1.7rem 1.4rem;border:1px solid var(--panel-line);min-width:0}
.plate::before,.plate::after,.plate i::before,.plate i::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--panel-deep);border:1px solid var(--panel-line)}
.plate::before{top:10px;left:10px}.plate::after{top:10px;right:10px}
.plate i::before{bottom:10px;left:10px}.plate i::after{bottom:10px;right:10px}
.plate-head{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--panel-accent);padding:.2rem 0 .9rem;border-bottom:1px solid var(--panel-line)}
.plate dl div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--panel-line)}
.plate dt{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-panel-muted)}
.plate dd{font-family:var(--mono);font-size:.88rem;text-align:right}
.plate p{font-size:.86rem;color:var(--on-panel-muted);padding:.9rem 0 .5rem;line-height:1.45}

.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.75rem,1.4vw,1.1rem);counter-reset:s}
/* Schritte als Kästen: große Nummer im Hintergrund, Inhalt mittig darüber */
.steps li{counter-increment:s;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;min-width:0;padding:1.6rem 1.1rem 1.8rem;background:var(--bg);border:1px solid var(--line);border-radius:14px}
.steps li>*{position:relative;z-index:1}
.steps li::before{content:"0" counter(s);position:absolute;top:-.14em;right:.06em;z-index:0;font-family:var(--display);font-weight:800;font-size:clamp(3.8rem,5vw,5rem);line-height:1;letter-spacing:-.03em;color:color-mix(in srgb,var(--ink) 13%,transparent);pointer-events:none}
.steps b{font-family:var(--display);font-size:1.22rem;font-weight:700;line-height:1.15}
.steps span{font-size:.94rem;color:var(--muted)}
.steps a{text-underline-offset:3px}
@media (max-width:980px){.rent{grid-template-columns:minmax(0,1fr)}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps li:last-child{grid-column:1/-1}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}

/* Label/Wert-Liste */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.two>div{display:grid;gap:1.2rem;min-width:0}
.kv{border-top:1px solid var(--ink)}
.kv>div{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.kv dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:.3rem}
.ticks{display:grid;gap:.6rem}
.ticks li{position:relative;padding-left:1.5rem}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.7rem;height:3px;background:var(--signal)}
@media (max-width:820px){.two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.kv>div{grid-template-columns:minmax(0,1fr);gap:.2rem}}

/* ---------- Maschinenkarten (Startseite) ---------- */
.feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.fc{display:flex;flex-direction:column;gap:.5rem;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;padding-bottom:.9rem;transition:border-color 200ms ease}
.fc>:not(.fc-img){margin-inline:1rem}
@media (hover:hover) and (pointer:fine){.fc:hover{border-color:var(--muted)}}
.fc-img{display:block;width:100%;aspect-ratio:1;overflow:hidden;background:var(--photo);border-bottom:1px solid var(--line);padding:0;cursor:zoom-in;margin-bottom:.5rem}
.fc-img img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.fc-img:hover img{transform:scale(1.03)}}
.fc h3{font-size:1.6rem;line-height:1.08}
.fc p{font-size:.92rem;color:var(--muted)}
/* Verfügbarkeit als Marke auf dem Foto, im Fuß steht nur der Preis */
.fc{position:relative}
.fc>.avail{position:absolute;top:.6rem;left:.6rem;margin:0;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem .2rem .55rem;font-size:.8rem;font-weight:600;box-shadow:0 6px 12px -8px rgba(10,14,40,.5);pointer-events:none}
/* Preis als gelber Keil in der rechten unteren Ecke */
.fc{padding-bottom:0}
.fc>.fc-foot{margin:auto 0 0 auto;align-self:flex-end;min-width:64%;max-width:100%;padding:.85rem 1.1rem .8rem 2.8rem;background:var(--signal);color:var(--on-signal);clip-path:polygon(2.2rem 0,100% 0,100% 100%,0 100%);text-align:right}
/* Schatten nach innen entlang Oberkante und Schräge: ein unsichtbarer Rahmen um den Keil wirft seinen Schatten hinein */
.fc>.fc-foot{position:relative;isolation:isolate}
.fc-shade{position:absolute;inset:0;z-index:0;pointer-events:none;filter:drop-shadow(2px 4px 4px rgba(60,40,0,.5))}
.fc-shade i{position:absolute;inset:-20px;background:#000;clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,calc(2.2rem + 20px) 20px,calc(100% - 20px) 20px,calc(100% - 20px) calc(100% - 20px),20px calc(100% - 20px),calc(2.2rem + 20px) 20px)}
.fc-foot .price{position:relative;z-index:1}
.fc-foot .price{text-align:right;font-size:1.45rem;font-weight:500;line-height:1.1;color:inherit;white-space:nowrap}
.fc-foot .price small{margin-top:.3rem;color:inherit;opacity:.8;font-size:.68rem;white-space:normal}
.fc>p{margin-bottom:1rem}
@media (max-width:980px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.feat{grid-template-columns:minmax(0,1fr)}}

/* ---------- Lagerliste ---------- */
.tabs{overflow-x:auto;margin-bottom:1.25rem;padding-bottom:4px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs-inner{position:relative;display:inline-flex;gap:2px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.tab,.tabs-active>span{display:inline-flex;align-items:center;gap:.45rem;height:38px;padding:0 1rem;border-radius:999px;font-weight:600;font-size:.94rem;white-space:nowrap}
.tab{border:0;background:transparent;cursor:pointer;color:var(--ink)}
.tab .n,.tabs-active .n{font-family:var(--mono);font-size:.74rem;opacity:.7}
.tabs-active{position:absolute;inset:0;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--ink);color:var(--bg);pointer-events:none;clip-path:inset(4px 100% 4px 4px round 999px);transition:clip-path 260ms var(--ease-out)}

.stock{border-top:1px solid var(--ink)}
.m{display:grid;grid-template-columns:88px minmax(0,1.3fr) minmax(0,1.45fr) 9.5rem 8.2rem auto;gap:1rem 1.4rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line)}
.m.in{animation:rowin 320ms var(--ease-out) both}
/* jede zweite Zeile hinterlegt */
.stock .m{padding-inline:.9rem;border-bottom:0;border-radius:10px}
.stock .m:nth-child(even){background:var(--surface)}
.stock .m:nth-child(even) .m-specs div{background:var(--bg)}
.stock{padding-top:.5rem}
@keyframes rowin{from{opacity:0;transform:translateY(6px)}}
.m-thumb{width:88px;height:88px;border-radius:8px;overflow:hidden;background:var(--photo);border:1px solid var(--line);padding:0;cursor:zoom-in;transition:transform 160ms var(--ease-out)}
.m-thumb:active{transform:scale(.97)}
.m-thumb img{width:100%;height:100%;object-fit:cover}
.m-thumb.none{display:grid;place-items:center;cursor:default;background:var(--surface);font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.3}
.m h3{font-size:1.28rem}
.m-state{font-size:.92rem;color:var(--muted);margin-top:.2rem}
.m-specs{display:flex;flex-wrap:wrap;gap:.35rem .5rem}
.m-specs div{display:inline-flex;align-items:baseline;gap:.45rem;border:1px solid var(--line);border-radius:4px;padding:.18rem .5rem;background:var(--surface)}
.m-specs dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.m-specs dd{font-family:var(--mono);font-size:.82rem;font-variant-numeric:tabular-nums}
.avail{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.avail::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.avail[data-out="true"]{color:var(--muted)}
.avail[data-out="true"]::before{background:transparent;border:1.5px solid var(--off)}
.price{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.05rem;font-weight:500;white-space:nowrap}
.price small{display:block;font-size:.68rem;font-weight:400;color:var(--muted);line-height:1.3;margin-top:.15rem;white-space:normal}
.stock-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.4rem}
.stock-foot p{font-size:.88rem;color:var(--muted);max-width:60ch}
@media (max-width:1120px){
  .m{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"thumb main price" "specs specs specs" "avail avail btn"}
  .m-thumb{grid-area:thumb;width:72px;height:72px;align-self:start}.m-main{grid-area:main}.m-specs{grid-area:specs}.m .avail{grid-area:avail}.m .price{grid-area:price;align-self:start}.m-btns{grid-area:btn;justify-self:end}
}
@media (max-width:480px){
  .m{grid-template-areas:"thumb main main" "specs specs specs" "avail avail price" "btn btn btn"}
  .m-btns{justify-self:stretch}.m-btns .btn{flex:1}
}
/* ---------- Kundendienst ---------- */
.band{background:var(--panel);color:var(--on-panel)}
.band .eyebrow{color:var(--panel-accent)}
.band .lead{color:var(--on-panel-muted)}
.band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.band-grid>div{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.band-img{border-radius:12px;overflow:hidden;border:1px solid var(--panel-line);aspect-ratio:16/10}
.band-img img{width:100%;height:100%;object-fit:cover}
.band .ticks li{color:var(--on-panel)}
.band .more{color:var(--panel-accent);align-self:flex-start}
@media (max-width:900px){.band-grid{grid-template-columns:minmax(0,1fr)}}

.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.svc-grid li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;min-width:0;padding:1.6rem 1.6rem 1.8rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:border-color 200ms ease}
.svc-grid li>.ico{width:54px;height:54px;padding:12px;border-radius:14px;margin-bottom:.7rem}
@media (hover:hover) and (pointer:fine){.svc-grid li:hover{border-color:var(--muted)}}
.svc-grid span{color:var(--muted);font-size:.97rem}
.smart{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 3rem;align-items:center;background:var(--panel);color:var(--on-panel);border:1px solid var(--panel-line);border-radius:10px;padding:1.6rem 1.8rem}
.smart p{color:var(--on-panel-muted);max-width:60ch;margin-top:.8rem}
.smart ul{display:flex;gap:.5rem;flex-wrap:wrap}
.smart li{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--panel-line);border-radius:4px;padding:.35rem .6rem}
@media (max-width:1000px) and (min-width:641px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.svc-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .smart{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Über uns ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.about-end{align-items:end}   /* Vorteile unten bündig mit dem Bild */
.about-text{display:grid;gap:1.1rem}
.about-text p{max-width:60ch;color:var(--muted)}
/* höchstens zwei Spalten, jede mind. 15rem breit – sonst untereinander */
.gains{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(15rem,40%)),1fr));gap:clamp(.75rem,1.6vw,1rem)}
.gains li>span{min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.gains li{display:flex;align-items:center;gap:1rem;min-width:0;padding:1rem 1.2rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.15}
.gains.five li:last-child{grid-column:1/-1}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.nums div{padding:1.2rem 1rem 1.3rem 0;display:flex;flex-direction:column;gap:.15rem;border-bottom:1px solid var(--line)}
.nums div+div{border-left:1px solid var(--line);padding-left:1rem}
.nums dt{order:2;font-size:.9rem;color:var(--muted)}
.nums dd{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1}
@media (max-width:820px){.about{grid-template-columns:minmax(0,1fr)}.nums{grid-template-columns:repeat(2,minmax(0,1fr))}.nums div:nth-child(3){border-left:0;padding-left:0}}

/* ---------- Galerie ---------- */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.gal.strip{grid-template-columns:repeat(6,minmax(0,1fr))}
.gal-item{display:block;width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--photo);border:1px solid var(--line);padding:0;cursor:zoom-in;transition:transform 160ms var(--ease-out)}
.gal-item:active{transform:scale(.98)}
.gal-item img{width:100%;height:100%;object-fit:contain;transition:transform 400ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.gal-item:hover img{transform:scale(1.05)}}
a.gal-item{cursor:pointer}
@media (max-width:900px){.gal{grid-template-columns:repeat(3,minmax(0,1fr))}.gal.strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:70;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.5rem;padding:calc(16px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px));background:var(--scrim);opacity:0;visibility:hidden;transition:opacity 150ms var(--ease-out),visibility 0s linear 150ms}
.lb[data-open="true"]{opacity:1;visibility:visible;transition:opacity 220ms var(--ease-out),visibility 0s}
.lb-fig{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:.8rem;min-width:0;transform:scale(.96);transition:transform 150ms var(--ease-out)}
.lb[data-open="true"] .lb-fig{transform:scale(1);transition:transform 220ms var(--ease-out)}
.lb-fig img{max-width:100%;max-height:min(76vh,860px);width:auto;height:auto;border-radius:8px;background:var(--photo)}
.lb-fig figcaption{color:var(--on-panel);font-size:.95rem;text-align:center;max-width:60ch}
.lb-fig figcaption small{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--on-panel-muted);margin-top:.2rem}
.lb button{width:46px;height:46px;border-radius:50%;border:1px solid var(--panel-line);background:var(--panel-2);color:var(--on-panel);font-size:1.2rem;cursor:pointer;display:grid;place-items:center;transition:transform 160ms var(--ease-out)}
.lb button:active{transform:scale(.94)}
.lb-prev{grid-column:1}.lb-next{grid-column:3}
.lb-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px}
@media (max-width:640px){.lb{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-content:center}.lb-fig{grid-column:1/-1;grid-row:1;align-self:end}.lb-prev{grid-column:1;grid-row:2;justify-self:end}.lb-next{grid-column:2;grid-row:2;justify-self:start}}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.c-list{display:grid;border-top:1px solid var(--ink)}
.c-list>div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);align-items:start}
.c-list dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:.3rem}
.c-list dd{display:grid;gap:.35rem;min-width:0}
.copy-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.copy-row .val{font-family:var(--mono);font-size:1rem;user-select:all;overflow-wrap:anywhere}
.copy{position:relative;border:1px solid var(--line);background:transparent;border-radius:4px;height:28px;padding:0 .55rem;font-size:.78rem;font-weight:600;cursor:pointer;transition:transform 160ms var(--ease-out)}
.copy:active{transform:scale(.96)}
.copy span{display:inline-block;transition:filter 200ms ease,opacity 200ms ease}
.copy.swap span{filter:blur(2px);opacity:.4}
.hours{font-family:var(--mono);font-size:.9rem;font-variant-numeric:tabular-nums;display:grid;grid-template-columns:auto 1fr;gap:.1rem 1.2rem;justify-content:start}
.state{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600}
.state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--off)}
.state[data-open="true"]::before{background:var(--ok)}
.forms{display:flex;gap:.6rem;flex-wrap:wrap}

form{display:grid;gap:1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:clamp(1.2rem,3vw,2rem);min-width:0}
.f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;align-items:start}
.field{display:grid;gap:.4rem;min-width:0}
.field label{font-size:.9rem;font-weight:600}
.field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:.75rem .85rem;font-size:1rem;transition:border-color 160ms ease}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.field[data-err="true"] input,.field[data-err="true"] textarea{border-color:var(--off)}
.err{font-size:.84rem;color:var(--off)}
.err:empty{display:none}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.94rem}
.check input{-webkit-appearance:none;appearance:none;position:relative;display:grid;place-items:center;width:22px;height:22px;margin:.1rem 0 0;padding:0;box-shadow:none;flex:none;border:1.5px solid var(--muted);border-radius:5px;background:var(--bg);cursor:pointer;transition:background-color 140ms ease,border-color 140ms ease}
.check input::before{content:"";width:12px;height:12px;background:var(--on-hl);clip-path:polygon(14% 46%,0 62%,40% 100%,100% 22%,84% 8%,38% 68%);transform:scale(0);transition:transform 140ms var(--ease-out)}
.check input[type=radio]{border-radius:50%}
.check input[type=radio]::before{width:10px;height:10px;border-radius:50%;clip-path:none}
.check input:checked{background:var(--hl);border-color:var(--hl)}
.check input:checked::before{transform:scale(1)}
.check[data-err="true"] input{border-color:var(--off)}
@media (hover:hover) and (pointer:fine){.check input:not(:checked):hover{border-color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.check input,.check input::before{transition:none}}
.check[data-err="true"]{color:var(--off)}
form .btn{justify-self:start}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.f-row{grid-template-columns:minmax(0,1fr)}.c-list>div{grid-template-columns:minmax(0,1fr);gap:.3rem}}

/* ---------- CTA + Footer ---------- */
.cta{background:var(--signal);color:var(--on-signal)}
.cta{overflow:hidden}
.cta-row{--pad:clamp(2rem,4.5vw,3rem);display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"who ask side";align-items:center;gap:1.4rem clamp(2.6rem,5vw,4rem);padding-block:var(--pad)}
/* Figur: Strichzeichnung in den Hausfarben, steht auf der Unterkante des Bands */
.thinker{grid-area:who;align-self:end;display:block;width:clamp(140px,14vw,184px);height:auto;margin-bottom:calc(var(--pad) * -1);overflow:visible}
.tk-ln>*{stroke:var(--nv-deep);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.tk-lt{fill:#fff}
.tk-dk{fill:var(--nv)}
.tk-pu{fill:var(--nv-deep)}
.tk-st{fill:none;stroke:var(--nv-deep);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
/* Gedankenblase mit der Frage */
.cta h2.cta-bubble{grid-area:ask;position:relative;max-width:17ch;margin-bottom:clamp(.6rem,2vw,1.6rem);padding:1.1rem 1.9rem 1.2rem;background:#fff;color:var(--nv-deep);border:3px solid var(--nv-deep);border-radius:2.6rem 3rem 2.8rem 2.4rem / 2.4rem 2.8rem 3rem 2.6rem;font-size:clamp(1.55rem,2.7vw,2.25rem);box-shadow:6px 7px 0 rgba(22,27,61,.16)}
.cta-dots{position:absolute;right:100%;top:58%;width:0;height:0}
.cta-dots i{position:absolute;border-radius:50%;background:#fff;border:3px solid var(--nv-deep);animation:think 2.6s var(--ease-in-out) infinite both}
.cta-dots i:nth-child(1){width:11px;height:11px;right:46px;top:20px}
.cta-dots i:nth-child(2){width:16px;height:16px;right:25px;top:6px;animation-delay:.22s}
.cta-dots i:nth-child(3){width:22px;height:22px;right:0;top:-12px;animation-delay:.44s}
@keyframes think{0%,12%{opacity:0;transform:scale(.6)}30%,82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}
.cta-side{grid-area:side;justify-self:end;display:grid;gap:.75rem}
.cta-lead{font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.05;color:var(--nv-deep);text-align:center;margin-bottom:.1rem}
.cta-lead span{display:block}
/* Anfrage-Wege: groß, mit Symbol */
.cta-act{display:flex;align-items:center;gap:.8rem;min-height:64px;padding:0 1.7rem 0 1.3rem;border:3px solid var(--nv-deep);border-radius:12px;font-weight:700;font-size:1.3rem;line-height:1.1;text-decoration:none;white-space:nowrap;box-shadow:6px 7px 0 rgba(22,27,61,.16);transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background-color 160ms ease}
.cta-act svg{flex:none;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cta-act.tel{background:#fff;color:var(--nv-deep);font-family:var(--mono);font-weight:500;font-size:1.45rem;letter-spacing:-.01em}
.cta-act.mail{background:var(--nv-deep);color:#fff}
.cta-act:active{transform:translate(3px,3px);box-shadow:3px 4px 0 rgba(22,27,61,.16)}
@media (hover:hover) and (pointer:fine){.cta-act.tel:hover{background:#FFF6DC}.cta-act.mail:hover{background:var(--nv)}}
@media (max-width:860px){
  .cta-row{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ask ask" "who side";gap:2.7rem 1.2rem}
  .cta h2.cta-bubble{justify-self:start;margin-bottom:0;margin-left:clamp(0px,6vw,2.5rem)}
  .cta-dots{right:auto;left:2.4rem;top:100%}
  .cta-dots i:nth-child(1){right:auto;left:-26px;top:44px}
  .cta-dots i:nth-child(2){right:auto;left:-12px;top:24px}
  .cta-dots i:nth-child(3){right:auto;left:6px;top:2px}
  .thinker{width:118px}
  .cta-side{justify-self:stretch;align-self:center}
  .cta-act{min-height:56px;padding:0 1rem 0 .9rem;gap:.6rem;font-size:1.08rem}
  .cta-act.tel{font-size:1.15rem}
  .cta-act svg{width:24px;height:24px}
}
/* Handy und Tablet: Männchen und Gedankenblase gemeinsam oben, Angebot und Knöpfe darunter */
@media (max-width:860px){
  .cta-row{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"who ask" "side side";gap:1.6rem 1.6rem}
  .thinker{width:clamp(104px,16vw,130px);align-self:start;margin-bottom:0}
  .cta h2.cta-bubble{justify-self:start;align-self:start;margin:0;padding:.8rem 1.1rem .9rem;font-size:clamp(1.3rem,3.4vw,1.75rem);max-width:22ch}
  .cta-side{justify-self:center;width:min(100%,32rem)}
  .cta-dots{left:auto;right:100%;top:1.8rem}
  .cta-dots i:nth-child(1){left:auto;right:38px;top:20px}
  .cta-dots i:nth-child(2){left:auto;right:19px;top:7px}
  .cta-dots i:nth-child(3){left:auto;right:-2px;top:-8px}
}
@media (prefers-reduced-motion:reduce){.cta-dots i{animation:none}.cta-act:active{transform:none}}
.btn-dark{background:var(--nv-deep);color:var(--on-nv)}

footer{background:var(--panel-deep);color:var(--on-panel-muted);font-size:.92rem;padding-block:3rem 2rem}
.foot{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:2rem 2.5rem}
.foot img{height:44px;width:auto;margin-bottom:1rem}
.foot h4{margin:0 0 .7rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-panel);font-weight:500}
.foot ul{display:grid;gap:.4rem}
.foot a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--on-panel)}}
.foot .sel{user-select:all}
.draft-r{margin-left:auto}
.draft{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--panel-line);display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:900px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot{grid-template-columns:minmax(0,1fr)}}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:80;max-width:min(520px,calc(100vw - 32px));width:max-content;background:var(--ink);color:var(--bg);border-radius:10px;padding:.85rem 1.1rem;font-size:.95rem;font-weight:500;box-shadow:0 14px 34px -14px rgba(10,14,40,.6);transform:translate(-50%,calc(100% + 40px));opacity:0;transition:transform 400ms ease,opacity 400ms ease;pointer-events:none}
.toast[data-show="true"]{transform:translate(-50%,0);opacity:1}

@media (prefers-reduced-motion:reduce){
  .rise,.m.in{animation:none}
  .toast{transition:opacity 200ms ease;transform:translate(-50%,0)}
  .lb-fig,.lb[data-open="true"] .lb-fig{transform:none;transition:none}
  .tabs-active,.sheet,.nav a::after,.more span,.way-img img,.fc-img img,.gal-item img{transition-duration:0ms}
  .theme-btn:active,.btn:active,.copy:active,.menu-btn:active,.replay:active,.m-thumb:active,.gal-item:active,.lb button:active{transform:none}
}

/* ---------- Schieberegler ---------- */
.range{position:relative;--f:.31;--rng-fill:var(--signal);--rng-track:var(--panel-line);--rng-thumb:var(--signal);--rng-edge:var(--panel-2);--rng-grip:var(--on-signal);--rng-ring:var(--signal)}
.range input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:grab;accent-color:var(--rng-fill)}
.range input[type=range]:active{cursor:grabbing}
.range input[type=range]::-webkit-slider-runnable-track{height:12px;border-radius:6px;background:linear-gradient(to right,var(--rng-fill) calc(var(--f) * 100%),var(--rng-track) 0)}
.range input[type=range]::-moz-range-track{height:12px;border-radius:6px;background:var(--rng-track)}
.range input[type=range]::-moz-range-progress{height:12px;border-radius:6px;background:var(--rng-fill)}
.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:38px;height:38px;margin-top:-13px;border-radius:50%;border:3px solid var(--rng-edge);background:linear-gradient(90deg,transparent 13px,var(--rng-grip) 13px 15px,transparent 15px 17px,var(--rng-grip) 17px 19px,transparent 19px) center/100% 12px no-repeat,var(--rng-thumb);box-shadow:0 3px 10px rgba(0,0,0,.35);transition:transform 160ms var(--ease-out)}
.range input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;border:3px solid var(--rng-edge);background:var(--rng-thumb);box-shadow:0 3px 10px rgba(0,0,0,.35)}
.range input[type=range]:active::-webkit-slider-thumb{transform:scale(1.1)}
.range-halo{position:absolute;top:50%;left:calc(19px + (100% - 38px) * var(--f));width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:2px solid var(--rng-ring);pointer-events:none;animation:ping 1.8s var(--ease-out) infinite}
.range[data-touched="true"] .range-halo{display:none}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(2.2);opacity:0}}
.range-scale{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--on-panel-muted);margin-top:-.3rem}
.range-hint{color:var(--panel-accent);text-transform:uppercase;font-weight:500;transition:opacity 300ms ease}
.range-hint[data-off="true"]{opacity:0}
.range-hint i{display:inline-block;font-style:normal;animation:nudge 1.6s var(--ease-in-out) infinite}
.range-hint i:last-child{animation-direction:reverse}
@keyframes nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}

/* ---------- Sparrechner (kompakt) ---------- */
.demo-cap{font-size:.9rem;color:var(--on-panel-muted);line-height:1.4}
.saver{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.1rem,3vw,2.6rem);align-items:center;background:var(--signal);color:var(--on-signal);border-radius:14px;padding:clamp(1.1rem,2.4vw,1.8rem);margin-bottom:clamp(2rem,4.5vw,3.2rem);box-shadow:0 24px 50px -30px rgba(10,14,40,.55)}
.saver-in,.saver-out{display:grid;gap:.75rem;min-width:0}
.saver-tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.saver h2{font-size:clamp(1.45rem,2.6vw,2.05rem)}
.saver-lead{font-size:.98rem;max-width:44ch}
.saver .range{--rng-fill:var(--nv);--rng-track:var(--on-signal-soft);--rng-thumb:var(--nv);--rng-edge:var(--signal);--rng-grip:var(--on-nv);--rng-ring:var(--nv)}
.saver .range-scale,.saver .range-hint{color:var(--on-signal)}
.saver .range-scale{margin-top:-.4rem}
.saver-cost{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;font-size:.94rem;font-weight:600}
.saver-eurin{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono)}
.saver-eurin input{width:6.5rem;min-height:44px;border:2px solid var(--on-signal);border-radius:6px;background:var(--photo);color:var(--nv-deep);padding:0 .7rem;font-size:1rem}
.saver-eurin input::placeholder{color:var(--nv-line)}
.saver-nums{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.6rem;align-items:stretch}
.saver-num{display:flex;flex-direction:column;gap:.1rem;border:2px solid var(--on-signal);border-radius:10px;padding:.6rem .85rem .7rem;min-width:0}
.saver-num small{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.saver-num b{font-family:var(--display);font-weight:800;font-size:clamp(2.3rem,4.6vw,3.3rem);line-height:.95;font-variant-numeric:tabular-nums}
.saver-num span{font-size:.86rem}
.saver-num.win{background:var(--nv);border-color:var(--nv);color:var(--on-nv)}
.saver-num.win b{color:var(--signal)}
.saver-arrow{align-self:center;font-size:1.5rem;font-weight:700}
.saver-sum{font-family:var(--display);font-weight:700;font-size:clamp(1.12rem,1.9vw,1.4rem);line-height:1.2}
.saver-sum .ln{display:block}
.saver-sum b{font-weight:800;font-size:1.2em;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.saver-eur{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem;background:var(--nv);color:var(--on-nv);border-radius:10px;padding:.6rem .95rem .7rem}
.saver-eur b{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1;color:var(--signal);font-variant-numeric:tabular-nums}
.saver-eur span{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.1}
.saver-eur small{flex-basis:100%;font-size:.84rem;color:var(--on-nv-muted)}
.saver-wins-h{font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.1;margin:.2rem 0 -.3rem}
.saver-wins{display:flex;flex-wrap:wrap;gap:.35rem .4rem}
.saver-wins li{display:inline-flex;align-items:center;gap:.45rem;border:1.5px solid var(--on-signal);border-radius:999px;padding:.2rem .7rem .2rem .6rem;font-size:.84rem;font-weight:600}
.saver-wins li::before{content:"";width:.55rem;height:.3rem;border-left:2px solid;border-bottom:2px solid;transform:translateY(-2px) rotate(-45deg)}
.saver-note{font-size:.72rem;line-height:1.3;opacity:.85}
.saver .fn{font-size:.75em;margin-left:.1em}
@media (max-width:900px){.saver{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.saver-in,.saver-out{gap:.6rem}.saver-lead{font-size:.92rem}.saver-cost{flex-wrap:nowrap}.saver-wins-h{display:none}.saver-wins{margin-top:.1rem}}
@media (max-width:420px){.saver-nums{gap:.35rem}.saver-num{padding:.5rem .6rem .6rem}.saver-arrow{font-size:1.15rem}.saver-num span{font-size:.8rem}}

/* ---------- Umschalter hell / dunkel ---------- */
.theme-btn{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:transform 160ms var(--ease-out),border-color 160ms ease}
.theme-btn:active{transform:scale(.95)}
.theme-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn[data-mode="dark"] .i-moon,.theme-btn[data-mode="light"] .i-sun{display:none}
@media (hover:hover) and (pointer:fine){.theme-btn:hover{border-color:var(--ink)}}

/* ---------- Karussell ---------- */
.car{position:relative;--per:4;--gap:1.5rem;--btn-top:40%}
.car.gcar{--per:6;--gap:1rem}
.car-view{overflow:hidden}
.car-track{display:flex;gap:var(--gap);transition:transform 650ms var(--ease-in-out);will-change:transform}
.car-track>li{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));min-width:0}
.car-btn{position:absolute;top:var(--btn-top);z-index:2;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:0 10px 22px -10px rgba(10,14,40,.55);cursor:pointer;display:grid;place-items:center;font-size:1.15rem;padding:0;transition:transform 160ms var(--ease-out),border-color 160ms ease}
.car-btn:active{transform:scale(.94)}
.car-prev{left:-12px}.car-next{right:-12px}
@media (min-width:900px){.car-prev{left:-23px}.car-next{right:-23px}}
@media (hover:hover) and (pointer:fine){.car-btn:hover{border-color:var(--ink)}}
.fc-img.none{display:grid;place-items:center;cursor:default;background:var(--surface);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:980px){.car{--per:2}.car.gcar{--per:3}}
@media (max-width:520px){.car{--per:1}.car.gcar{--per:2;--gap:.7rem}}
@media (prefers-reduced-motion:reduce){.car-track{transition:none}.range-halo,.range-hint i{animation:none}.range-halo{display:none}.car-btn:active{transform:none}}

/* ---------- Ansichten ---------- */
.view-msg{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:1.4rem 1.6rem;max-width:62ch;display:grid;gap:.5rem;color:var(--muted)}
.view-msg b{color:var(--ink);font-family:var(--display);font-size:1.3rem}
.m-msg{padding:1.6rem 0;color:var(--muted);border-bottom:1px solid var(--line)}
.m h3 a,.fc h3 a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.m h3 a:hover,.fc h3 a:hover{text-decoration:underline;text-underline-offset:3px}}
a.m-thumb{display:block}
a.m-thumb,a.fc-img{cursor:pointer}
.m-btns{display:flex;gap:.4rem}

/* ---------- Maschinen-Detail ---------- */
.det{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.det-main{display:block;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--photo);border:1px solid var(--line);padding:0;cursor:zoom-in}
.det-main img{width:100%;height:100%;object-fit:contain}
.det-main.none{display:grid;place-items:center;cursor:default;background:var(--surface);font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.det-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin-top:.6rem}
.det-thumbs button{display:block;width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--photo);padding:0;cursor:pointer;transition:transform 160ms var(--ease-out)}
.det-thumbs button:active{transform:scale(.97)}
.det-thumbs button[aria-current="true"]{outline:3px solid var(--signal);outline-offset:1px}
.det-thumbs img{width:100%;height:100%;object-fit:cover}
.det-info{display:grid;gap:1.5rem;min-width:0}
.det-price{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums}
.det-price small{display:block;font-family:var(--body);font-weight:400;font-size:.9rem;color:var(--muted);margin-top:.5rem;line-height:1.4}
.det-text{display:grid;gap:.8rem;color:var(--muted);max-width:60ch}
.det-actions{display:flex;flex-wrap:wrap;gap:.75rem 1.2rem;align-items:center}
@media (max-width:900px){.det{grid-template-columns:minmax(0,1fr)}}

/* ---------- Verwaltung ---------- */
.adm-bar{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;margin-bottom:1.2rem}
.adm-who{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.adm-who::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.adm-bar input[type=search]{flex:1 1 200px;max-width:320px;min-height:44px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:0 .85rem;font-size:1rem}
.adm-list{border-top:1px solid var(--ink)}
.adm-row{display:grid;grid-template-columns:56px minmax(0,1fr) 7.5rem 7rem auto;gap:.6rem 1.2rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--line)}
.adm-pic{width:56px;height:56px;border-radius:6px;overflow:hidden;background:var(--photo);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:.55rem;color:var(--muted);text-transform:uppercase}
.adm-pic img{width:100%;height:100%;object-fit:cover}
.adm-row b{font-family:var(--display);font-size:1.18rem;font-weight:700;line-height:1.15;display:block}
.adm-row small{color:var(--muted);font-size:.86rem}
.badge{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:4px;padding:.1rem .4rem;margin-left:.4rem;vertical-align:middle;color:var(--off)}
.adm-btns{display:flex;gap:.4rem;justify-self:end}
@media (max-width:820px){.adm-row{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"pic main price" "pic main avail" "btns btns btns"}.adm-pic{grid-area:pic;align-self:start}.adm-main{grid-area:main}.adm-row .price{grid-area:price}.adm-row .avail{grid-area:avail;justify-self:end}.adm-btns{grid-area:btns;justify-self:stretch}.adm-btns .btn{flex:1}}

.adm-form{max-width:900px}
.adm-form h2{font-size:clamp(1.7rem,3vw,2.2rem)}
.adm-form fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:1.2rem 0 0;display:grid;gap:1rem;min-width:0}
.adm-form legend{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);padding:0 .6rem 0 0}
.field select{width:100%;min-height:48px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:0 .85rem;font:inherit;color:inherit}
.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.field small{color:var(--muted);font-size:.84rem}
.f-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;align-items:start}
.spec-rows{display:grid;gap:.6rem}
.spec-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 44px;gap:.6rem}
.spec-row input{width:100%;min-height:44px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:0 .75rem;font-size:.98rem}
.icon-btn{width:44px;height:44px;border-radius:6px;border:1px solid var(--line);background:transparent;cursor:pointer;display:grid;place-items:center;font-size:1rem;transition:transform 160ms var(--ease-out)}
.icon-btn:active{transform:scale(.95)}
.fotos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem}
.foto{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--photo)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto-tag{position:absolute;top:6px;left:6px;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;background:var(--signal);color:var(--on-signal);border-radius:3px;padding:.1rem .35rem}
.foto-tools{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:4px;padding:5px;background:var(--scrim)}
.foto-tools button{width:30px;height:30px;border-radius:5px;border:1px solid var(--panel-line);background:var(--panel-2);color:var(--on-panel);cursor:pointer;font-size:.85rem;padding:0}
.foto-tools button:disabled{opacity:.35;cursor:default}
.foto-add{display:grid;place-items:center;text-align:center;aspect-ratio:1;border:2px dashed var(--line);border-radius:8px;cursor:pointer;font-size:.86rem;font-weight:600;color:var(--muted);padding:.5rem;transition:border-color 160ms ease}
.foto-add[data-busy="true"]{cursor:progress;opacity:.7}
.foto-add input{position:absolute;width:1px;height:1px;opacity:0}
.foto-add:focus-within{outline:2px solid var(--signal);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.foto-add:hover{border-color:var(--ink)}}
.adm-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;border-top:1px solid var(--line);padding-top:1.2rem}
.adm-actions .sp{margin-left:auto;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.btn-danger{background:transparent;border-color:var(--off);color:var(--off);min-height:40px;padding:0 1rem;font-size:.94rem}
.btn[disabled]{opacity:.55;cursor:progress}
@media (max-width:700px){.f-row3{grid-template-columns:minmax(0,1fr)}.fotos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.det-thumbs button:active,.icon-btn:active{transform:none}}
a.fc-img.none,a.m-thumb.none{text-decoration:none}
.adm-row .price small{display:none}
@media (max-width:820px){
  .adm-row{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"pic main main" "price price avail" "btns btns btns"}
  .adm-row .price{text-align:left}
}
@media (max-width:700px){.fotos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.spec-row{grid-template-columns:minmax(0,1fr) 44px}.spec-row input:first-child{grid-column:1/-1}.spec-row{padding-bottom:.5rem;border-bottom:1px solid var(--line)}}

/* ---------- Detail: zwischen Maschinen blättern ---------- */
/* Blätter-Pfeile: halbtransparente Laschen am Seitenrand, bleiben beim Scrollen auf halber Höhe stehen */
.det-nav{position:sticky;top:50vh;height:0;z-index:5}
.det-step{position:absolute;top:-42px;left:0;display:grid;place-items:center;width:46px;height:84px;border:1px solid var(--line);border-left:0;border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--surface) 62%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);font-size:1.3rem;text-decoration:none;opacity:.72;transform-origin:left center;transition:opacity 200ms ease,background-color 200ms ease,transform 160ms var(--ease-out)}
.det-step.next{left:auto;right:0;border:1px solid var(--line);border-right:0;border-radius:12px 0 0 12px;transform-origin:right center}
.det-step span{display:block;transition:transform 200ms var(--ease-out)}
.det-step:active{transform:scale(.96)}
.det-step:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){.det-step:hover{opacity:1;background:var(--surface)}.det-step:hover span{transform:translateX(-3px)}.det-step.next:hover span{transform:translateX(3px)}}
@media (max-width:640px){.det-step{width:30px;height:64px;top:-32px;font-size:1.05rem}}
@media (prefers-reduced-motion:reduce){.det-step:active{transform:none}.det-step span{transition:none}}
/* Kopf der Detailseite: gleicher Grund wie die Maschinendaten */
.det-sec{padding-top:clamp(2rem,4.5vw,3.5rem)}
.det-head{display:grid;gap:1rem;margin-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.det-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1.5rem}
.det-head .crumb{color:var(--muted)}
.det-head .crumb a{color:var(--blue)}
.det-head h1{font-size:clamp(2.4rem,5.2vw,4.2rem);overflow-wrap:anywhere}
.det-head p{font-size:1.14rem;max-width:62ch;color:var(--muted)}
.det-head .chips li{border-color:var(--line)}
.det-pos{font-family:var(--mono);font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
#detail .sec>.wrap{position:relative}
#detail.sliding section{overflow:hidden;overflow:clip}
.kv.imp{max-width:760px}
.kv.imp>div{grid-template-columns:15rem minmax(0,1fr)}
.sel{user-select:all}
@media (max-width:560px){.kv.imp>div{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1290px){.head-row{gap:.6rem}}
@media (max-width:400px){.brand-name{display:none}}

/* ---------- Cookie-Einwilligung ---------- */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -18px 40px -24px rgba(10,14,40,.5);padding:1.1rem var(--gutter) calc(1.1rem + env(safe-area-inset-bottom,0px))}
.cc-in{max-width:1240px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2.5rem}
.cc-text{flex:1 1 420px;min-width:0;display:grid;gap:.3rem}
.cc-text b{font-family:var(--display);font-size:1.25rem;line-height:1.1}
.cc-text p{font-size:.95rem;color:var(--muted);max-width:78ch}
.cc-btns{display:flex;flex-wrap:wrap;gap:.6rem}
.cc-btns .btn{min-height:46px}
.ccd{position:fixed;inset:0;z-index:75;display:grid;place-items:center;padding:16px;background:var(--scrim);opacity:0;visibility:hidden;transition:opacity 150ms var(--ease-out),visibility 0s linear 150ms}
.ccd[data-open="true"]{opacity:1;visibility:visible;transition:opacity 200ms var(--ease-out),visibility 0s}
.ccd-box{width:min(620px,100%);max-height:calc(100% - 8px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:clamp(1.2rem,3vw,2rem);display:grid;gap:1.1rem;transform:scale(.96);transition:transform 150ms var(--ease-out)}
.ccd[data-open="true"] .ccd-box{transform:scale(1);transition:transform 200ms var(--ease-out)}
.ccd-box h2{font-size:clamp(1.7rem,3vw,2.1rem)}
.ccd-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;border-top:1px solid var(--line);padding-top:1rem}
.ccd-row b{font-family:var(--display);font-size:1.25rem}
.ccd-row p{font-size:.94rem;color:var(--muted);margin-top:.2rem}
.ccd-fix{flex:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:.4rem}
.ccd-btns{display:flex;flex-wrap:wrap;gap:.6rem;border-top:1px solid var(--line);padding-top:1.1rem}
.ccd-note{font-size:.84rem;color:var(--muted)}
.switch{position:relative;display:inline-flex;flex:none;cursor:pointer;margin-top:.2rem}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch span{display:block;width:54px;height:30px;border-radius:999px;background:var(--line);position:relative;transition:background-color 160ms ease}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--photo);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform 160ms var(--ease-out)}
.switch input:checked+span{background:var(--ok)}
.switch input:checked+span::after{transform:translateX(24px)}
.switch input:focus-visible+span{outline:2px solid var(--signal);outline-offset:3px}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
@media (hover:hover) and (pointer:fine){.foot .linklike:hover{color:var(--on-panel)}}

/* ---------- Karten ---------- */
.maps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:900px){.maps{grid-template-columns:minmax(0,1fr)}}
/* je Standort: Foto und Karte nebeneinander */
/* Foto im Hochformat 3:4 neben der Karte 4:3; die Spalten 9:16 ergeben gleiche Höhe */
.loc-media{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,16fr);gap:clamp(.6rem,1.4vw,.9rem)}
/* Platzhalter kompakt, damit er auch in die kleinere Karte passt */
.loc-media .map-ph{padding:clamp(.7rem,1.8vw,1.1rem);gap:.45rem}
.loc-media .map-ph b{font-size:clamp(1rem,1.5vw,1.2rem)}
.loc-media .map-ph span{font-size:.86rem;line-height:1.4}
.loc-media .map-btns{gap:.4rem}
.loc-media .map-ph .btn{min-height:36px;padding:0 .75rem;font-size:.84rem}
@media (max-width:560px){.loc-media .map-btns [data-cc-open]{display:none}.loc-media .map-ph span{font-size:.78rem}.loc-media .map-ph .btn{min-height:32px;padding:0 .55rem;font-size:.76rem}}
.loc-photo{aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--photo)}
.loc-photo img{width:100%;height:100%;object-fit:cover}
.map{display:flex;flex-direction:column;gap:.9rem;min-width:0}
/* Standort als Kasten mit Überschrift */
.maps .map{gap:1rem;padding:clamp(1rem,2.2vw,1.5rem);background:var(--bg);border:1px solid var(--line);border-radius:16px}
.loc-title{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.05;display:flex;align-items:center;gap:.6rem}
.loc-title::before{content:"";width:.55rem;height:1.1em;border-radius:3px;background:var(--signal);flex:none}
.maps .map figcaption{align-items:center}
.maps .map figcaption span{font-size:1.02rem;color:var(--ink)}
.map-frame{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.7rem;padding:clamp(1rem,3vw,2rem);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;background-position:-1px -1px}
.map-ph b{font-family:var(--display);font-size:1.4rem;line-height:1.1;background:var(--bg);padding:.1rem .3rem;margin-left:-.3rem}
.map-ph span{color:var(--muted);max-width:44ch;background:var(--bg);padding:.1rem .3rem;margin-left:-.3rem}
.map-btns{display:flex;flex-wrap:wrap;gap:.6rem}
.map-ph .btn-quiet{background:var(--bg)}
.map figcaption{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 1.5rem}
.map figcaption b{display:block;font-family:var(--display);font-size:1.35rem;line-height:1.15}
.map figcaption span{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.ccd-box,.ccd[data-open="true"] .ccd-box{transform:none;transition:none}.switch span::after{transition:none}}

/* ---------- Fließtext-Seiten (Datenschutz) ---------- */
.prose{display:grid;gap:1rem;max-width:74ch}
h1{overflow-wrap:anywhere}
.prose h2{font-size:clamp(1.5rem,2.6vw,1.9rem);margin-top:1.2rem}
.prose p,.prose li{color:var(--muted)}
.prose ul{display:grid;gap:.45rem;padding-left:1.2rem;list-style:disc}
.prose a,.linklike.inline{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.prose-meta{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;margin-top:1rem}

/* ---------- Formblätter hervorgehoben ---------- */
.forms-big{gap:1rem}
.formbtn{display:flex;align-items:center;gap:1rem;flex:1 1 250px;min-height:78px;padding:.9rem 1.3rem;border-radius:10px;background:var(--hl);color:var(--on-hl);text-decoration:none;box-shadow:0 16px 30px -18px rgba(10,14,40,.65);transition:transform 160ms var(--ease-out)}
.formbtn:active{transform:scale(.98)}
.formbtn svg{flex:none;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.formbtn b{display:block;font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.1}
.formbtn small{display:block;font-size:.88rem;margin-top:.15rem}
@media (hover:hover) and (pointer:fine){.formbtn:hover{transform:translateY(-2px)}.formbtn:hover:active{transform:scale(.98)}}
@media (prefers-reduced-motion:reduce){.formbtn,.formbtn:hover,.formbtn:active{transform:none}}

/* ---------- PDF-Symbol an allen Formblatt-Links ---------- */
a[data-dl]:not(.formbtn)::before{content:"";display:inline-block;flex:none;width:1.15em;height:1.35em;margin-right:.35em;vertical-align:-.28em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M4 1h11l6 6v20H4z'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M15 1v6h6'/%3E%3Ctext x='12.5' y='22' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='8.2'%3EPDF%3C/text%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M4 1h11l6 6v20H4z'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M15 1v6h6'/%3E%3Ctext x='12.5' y='22' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='8.2'%3EPDF%3C/text%3E%3C/svg%3E") center/contain no-repeat}
.btn[data-dl]:not(.formbtn)::before{margin-right:0}
.formbtn svg.pdfico{width:36px;height:42px;stroke-width:1.8}
.pdfico .pg{fill:none;stroke:currentColor}
.pdfico .bd{fill:currentColor;stroke:none}
.pdfico text{fill:var(--hl);stroke:none;font-family:var(--body);font-weight:700;font-size:7.4px;letter-spacing:.2px}

/* ---------- Formblätter als Online-Formulare ---------- */
.oform .field textarea.low{min-height:92px}
.oform .lbl{font-size:.9rem;font-weight:600}
.oform-alt{font-size:.95rem;color:var(--muted)}
.oform-alt a{color:var(--blue);text-underline-offset:3px}
.oform-note{font-size:.94rem;color:var(--muted);max-width:74ch}
.oform-info{display:grid;gap:.6rem;border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:8px;background:var(--bg);padding:1rem 1.2rem;font-size:.94rem;color:var(--muted)}
.oform-info b{color:var(--ink)}
.choices{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;padding-top:.5rem}
.choices.wide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem 1.2rem;padding-top:0}
.field[data-err="true"] .choices{color:var(--off)}
@media (max-width:700px){.choices.wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.choices.wide{grid-template-columns:minmax(0,1fr)}}

/* Datei-Anhänge */
.upl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;align-items:start}
.upl-add{position:relative;display:grid;gap:.15rem;justify-items:center;text-align:center;border:2px dashed var(--line);border-radius:8px;background:var(--bg);padding:1rem .8rem;cursor:pointer;transition:border-color 160ms ease,background-color 160ms ease}
.upl-add b{font-size:.98rem;color:var(--blue)}
.upl-add span{font-size:.84rem;color:var(--muted)}
.upl-add input{position:absolute;width:1px;height:1px;opacity:0}
.upl-add:focus-within{outline:2px solid var(--signal);outline-offset:3px}
.upl-add[data-over="true"]{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,var(--bg))}
@media (hover:hover) and (pointer:fine){.upl-add:hover{border-color:var(--blue)}}
.upl[data-busy="true"] .upl-add{cursor:progress;opacity:.6}
.upl[data-full="true"] .upl-add{display:none}
.upl[data-err="true"] .upl-add{border-color:var(--off)}
.upl-list{display:grid;gap:.4rem}
.upl-list:empty{display:none}
.upl-list li{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:.7rem;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:.35rem}
.upl-pic{display:grid;place-items:center;width:44px;height:44px;border-radius:5px;overflow:hidden;background:var(--panel);color:var(--panel-accent);font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.04em}
.upl-pic img{width:100%;height:100%;object-fit:cover}
.upl-name{display:grid;min-width:0}
.upl-name b{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upl-name small{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.upl-rules span{white-space:nowrap}
@media (max-width:820px){.upl-grid{grid-template-columns:minmax(0,1fr)}}

/* Karten bei „Schneller zum Angebot“: online ausfüllen oder PDF */
.formcard{flex:1 1 270px;display:grid;gap:1rem;align-content:space-between;padding:1.2rem 1.3rem 1.3rem;border-radius:12px;background:var(--hl);color:var(--on-hl);box-shadow:0 16px 30px -18px rgba(10,14,40,.65);min-width:0}
.formcard b{display:block;font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1.05}
.formcard small{display:block;font-size:.95rem;margin-top:.2rem}
.formcard-acts{display:flex;flex-wrap:wrap;gap:.6rem}
.fc-go,.fc-pdf{display:inline-flex;align-items:center;gap:.4rem;min-height:46px;padding:0 1rem;border-radius:6px;font-weight:700;text-decoration:none;white-space:nowrap;transition:transform 160ms var(--ease-out)}
.fc-go{background:var(--on-hl);color:var(--hl)}
.fc-pdf{border:1.5px solid currentColor}
.fc-go:active,.fc-pdf:active{transform:scale(.97)}
.fc-go span{display:inline-block;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.fc-go:hover span{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.fc-go:active,.fc-pdf:active{transform:none}.fc-go span{transition:none}}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Symbole für Vorteile, Ablauf und Zusatzleistungen */
.ico{flex:none;width:46px;height:46px;padding:10px;border-radius:12px;background:var(--nv-2);color:var(--signal);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.benefits li:has(>.ico){grid-template-columns:46px minmax(0,1fr);column-gap:1.1rem;row-gap:.25rem;padding-left:0;border-left:0}
.benefits li>.ico{grid-row:span 2;align-self:start}
.steps li>.ico{margin-bottom:.6rem}
.ticks.icons{gap:.75rem}
.ticks.icons li{display:flex;align-items:center;gap:.9rem;padding-left:0}
.ticks.icons li::before{content:none}
.ticks.icons .ico{width:40px;height:40px;padding:8px;border-radius:10px}

/* Figur über dem Sparrechner: schaut von oben herein und zeigt auf das gelbe Feld */
.saver-stage{--pw:clamp(150px,19vw,250px);position:relative;z-index:0;margin-top:clamp(1rem,3vw,2rem)}
.saver-top{position:relative;display:flex;align-items:center;min-height:calc(var(--pw) * .66);padding:.6rem 0 1.1rem calc(var(--pw) + clamp(1.4rem,5vw,4rem))}
.saver-claim{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.6vw,3rem);line-height:1;text-transform:uppercase;color:var(--on-panel);max-width:22ch}
@media (max-width:560px){.saver-stage{--pw:128px}.saver-stage .saver{padding-top:2.6rem}.saver-claim{font-size:1.32rem}.saver-top{padding-left:calc(var(--pw) + 1.6rem)}}
.saver-stage .saver{position:relative;z-index:1}
/* heller Hintergrund läuft unter dem Sparrechner etwa bis zur Mitte des Abstands weiter */
.hero-saver{padding-bottom:clamp(2.2rem,5vw,4.8rem)}
.hero-saver .saver-stage .saver{margin-bottom:0}
.hero-saver + .sec{padding-top:clamp(2.2rem,5vw,4.8rem)}
.peek{position:absolute;left:clamp(.6rem,4vw,3rem);bottom:calc(var(--pw) * -70 / 260);width:var(--pw);height:auto;overflow:visible;pointer-events:none}
.peek-back{z-index:0}
.peek-front{z-index:2}
.tk-st2{fill:none;stroke:var(--nv-deep);stroke-width:2.5;stroke-linecap:round}
.tk-mouth{fill:#fff}
.tk-dkf{fill:var(--nv)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .peek-back,:root:not([data-theme="light"]) .peek-front .tk-ln{filter:drop-shadow(0 0 1.5px rgba(255,255,255,.85))}}
:root[data-theme="dark"] .peek-back,:root[data-theme="dark"] .peek-front .tk-ln{filter:drop-shadow(0 0 1.5px rgba(255,255,255,.85))}

/* Eigener Bereich: Partner-Aussage mit Kennzahlen, über dem Sparrechner */
.partner-sec{background:var(--panel);color:var(--on-panel);border-bottom:1px solid var(--panel-line)}
.partner{padding-block:clamp(2.5rem,6vw,4.5rem)}
.partner .facts dt{color:var(--on-panel-muted)}
.partner-title{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1;max-width:30ch;margin-bottom:clamp(1.6rem,3.5vw,2.6rem);text-wrap:balance}
.partner .facts dd{font-size:clamp(1.7rem,3.3vw,2.8rem);color:var(--panel-accent);white-space:nowrap}
.partner .facts dt{font-size:1rem}

/* Lagerliste: Rubriken und Sortierung in einer Zeile */
.stock-bar{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.6rem 1.2rem;margin-bottom:1.25rem}
.stock-bar .tabs{margin-bottom:0;max-width:100%;min-width:0}
.stock-sort{display:inline-flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;color:var(--muted);height:48px}
.stock-sort select{min-height:44px;padding:0 2.2rem 0 .9rem;border:1px solid var(--line);border-radius:999px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23525B7A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .9rem center/12px 8px;color:var(--ink);font:inherit;font-weight:600;-webkit-appearance:none;appearance:none;cursor:pointer}
.stock-sort select:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
/* Verwaltung: Rubriken als Schalter */
.adm-tabs{margin-bottom:1rem}
.adm-tabs .tab[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.adm-tabs .tab{transition:background-color 160ms ease,color 160ms ease}

/* Handy: Startseiten-Slider mit 2 Maschinen nebeneinander */
@media (max-width:520px){
  .car:not(.gcar){--per:2;--gap:.6rem;--btn-top:30%}
  .car:not(.gcar) .car-btn{width:38px;height:38px;margin-top:-19px;font-size:1rem}
  .car:not(.gcar) .car-prev{left:-8px}.car:not(.gcar) .car-next{right:-8px}
  .car:not(.gcar) .fc{gap:.3rem;border-radius:10px}
  .car:not(.gcar) .fc>:not(.fc-img){margin-inline:.6rem}
  .car:not(.gcar) .fc-img{margin-bottom:.2rem}
  .car:not(.gcar) .fc h3{font-size:1.02rem;line-height:1.15;overflow-wrap:anywhere}
  .car:not(.gcar) .fc>p{font-size:.76rem;line-height:1.3;margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .car:not(.gcar) .fc>.avail{top:.4rem;left:.4rem;margin:0;font-size:.66rem;padding:.12rem .5rem .12rem .4rem;gap:.3rem}
  .car:not(.gcar) .fc>.fc-foot{margin:auto 0 0 auto;min-width:82%;padding:.5rem .65rem .45rem 2.5rem}
  .car:not(.gcar) .fc-foot .price{font-size:.98rem}
  .car:not(.gcar) .fc-foot .price small{font-size:.58rem;margin-top:.15rem}
}

/* Verwaltung: englische Fassung */
.adm-en{background:var(--surface);border:1px solid var(--line)!important;border-radius:12px;padding:1.1rem 1.2rem 1.3rem!important}
.adm-en legend{display:inline-flex;align-items:center;gap:.5rem;padding:0 .4rem;font-weight:700}
.lang-tag{display:inline-grid;place-items:center;min-width:2rem;height:1.5rem;border-radius:4px;background:var(--nv);color:var(--signal);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}
.adm-hint{font-size:.88rem;color:var(--muted);margin-top:-.4rem}
.f-label{display:block;font-weight:600;font-size:.94rem;margin-bottom:.45rem}
.adm-en-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.en-ok{color:var(--ok);font-weight:600}
.en-miss{color:#C4161C;font-weight:600}
.adm-en-kat{font-size:.92rem}.adm-en-kat small{color:var(--muted)}
/* Verwaltung: Kategorien */
.adm-kats h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:.4rem}
.kat-rows{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.8rem}
.kat-row{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem 1rem}
.kat-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.kat-head b{font-size:1.05rem}.kat-head small{color:var(--muted)}
.kat-tools{margin-left:auto;display:flex;gap:.35rem}
.kat-tools .icon-btn:disabled{opacity:.35;cursor:not-allowed}
.kat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1rem}
.kat-f{display:grid;gap:.3rem;font-size:.86rem;font-weight:600}
.kat-f>span{display:flex;align-items:center;gap:.4rem}
.kat-f input{width:100%;min-height:42px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:0 .7rem;font-size:.96rem;font-weight:400}
@media (max-width:560px){.kat-grid{grid-template-columns:minmax(0,1fr)}}
/* Kennzahlen mit drei Werten */
.facts.three,.nums.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .facts.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts.three div:first-child{grid-column:1/-1}
  .facts.three div:nth-child(2){border-left:0;padding-left:0;border-top:1px solid var(--panel-line)}
  .facts.three div:nth-child(3){border-left:1px solid var(--panel-line);padding-left:1.2rem}
}
@media (max-width:820px){
  .nums.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums.three div:first-child{grid-column:1/-1}
  .nums.three div:nth-child(2){border-left:0;padding-left:0}
  .nums.three div:nth-child(3){border-left:1px solid var(--line);padding-left:1rem}
}
/* Gebrauchtmaschinen: Umschalter Liste/Kacheln und Kachelansicht */
.stock-tools{display:flex;align-items:center;gap:.8rem 1rem;flex-wrap:wrap}
.view-tog{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.view-tog button{display:grid;place-items:center;width:42px;height:38px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;transition:background-color 160ms ease,color 160ms ease}
.view-tog button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.view-tog button[data-view="list"] svg circle{fill:currentColor;stroke:none}
.view-tog button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
@media (hover:hover) and (pointer:fine){.view-tog button[aria-pressed="false"]:hover{color:var(--ink);background:var(--bg)}}
.view-tog button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.stock.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr));gap:1rem;border-top:0;padding-top:.2rem}
.stock.grid .m-msg{grid-column:1/-1}
.stock.grid .m,.stock.grid .m:nth-child(even){display:flex;flex-direction:column;align-items:stretch;gap:.35rem;padding:0 0 .8rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color 200ms ease,transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.stock.grid .m:hover{border-color:var(--ink);transform:translateY(-2px)}}
.stock.grid .m-thumb{width:100%;height:auto;aspect-ratio:4/3;border:0;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:.35rem}
.stock.grid .m-thumb.none{font-size:.7rem}
.stock.grid .m-main,.stock.grid .m .avail,.stock.grid .m .price,.stock.grid .m-btns{margin-inline:.85rem}
.stock.grid .m h3{font-size:1.12rem;line-height:1.15;overflow-wrap:anywhere}
.stock.grid .m-state{font-size:.84rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stock.grid .m-specs{display:none}
.stock.grid .m .avail{font-size:.84rem;margin-top:auto;padding-top:.3rem}
.stock.grid .m .price{text-align:left;font-size:1.05rem}
.stock.grid .m-btns{margin-top:.3rem}
.stock.grid .m-btns .btn{flex:1;padding:0 .5rem}
@media (max-width:600px){
  .stock.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .stock.grid .m,.stock.grid .m:nth-child(even){gap:.3rem;padding-bottom:.6rem;border-radius:10px}
  .stock.grid .m-main,.stock.grid .m .avail,.stock.grid .m .price,.stock.grid .m-btns{margin-inline:.6rem}
  .stock.grid .m h3{font-size:1rem}
  .stock.grid .m-state{font-size:.76rem}
  .stock.grid .m .avail{font-size:.74rem}
  .stock.grid .m .price{font-size:.95rem}
  .stock.grid .m .price small{font-size:.64rem}
  .stock.grid .m-btns .btn:first-child{display:none}
  .stock.grid .m-btns .btn{min-height:38px}
}
.stock-tools{margin-left:auto}
/* Reiter, Ansicht und Sortierung in einer Zeile; die Reiter scrollen, falls der Platz nicht reicht */
@media (min-width:601px){
  .stock-bar{flex-wrap:nowrap;align-items:center}
  .stock-bar .tabs{flex:1 1 auto;padding-bottom:0}
  .stock-tools{flex:none;flex-wrap:nowrap;margin-left:0}
  .stock-sort{height:auto}
}
@media (min-width:601px){
  .stock-sort>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stock-bar .tab,.stock-bar .tabs-active>span{padding:0 .8rem}
}
.stock-bar .tabs.ovf{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent)}
.stock-bar .tabs.ovf.end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5rem);mask-image:linear-gradient(90deg,transparent,#000 2.5rem)}
/* Englischer Bereich in der Verwaltung deutlich abgesetzt */
.adm-en{border:2px solid var(--signal)!important}
.adm-en legend{color:var(--ink)}
.adm-en .lang-tag{background:var(--signal);color:var(--nv-deep)}
/* ---------- Videos bei den Maschinen: Abspiel-Zeichen auf Vorschaubildern ---------- */
.fc-img,.m-thumb,.det-main,.det-thumbs button,.adm-pic{position:relative}
.play{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;display:grid;place-items:center;background:rgba(9,12,30,.62);border:1.5px solid rgba(255,255,255,.85);box-shadow:0 6px 18px -6px rgba(0,0,0,.6);pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform 200ms var(--ease-out),background-color 200ms ease}
.play svg{width:60%;height:60%;fill:#fff;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}   /* Dreieck optisch mittig: Schwerpunkt knapp rechts der Mitte */
.play.big{width:76px;height:76px;margin:-38px 0 0 -38px;border-width:2px}
.m-thumb .play,.det-thumbs .play,.adm-pic .play,.foto .play{width:30px;height:30px;margin:-15px 0 0 -15px;border-width:1px}
.stock.grid .m-thumb .play{width:48px;height:48px;margin:-24px 0 0 -24px}
@media (hover:hover) and (pointer:fine){
  .fc-img:hover .play,.m-thumb:hover .play,.det-main:hover .play{transform:scale(1.08);background:var(--signal);border-color:var(--signal)}
  .fc-img:hover .play svg,.m-thumb:hover .play svg,.det-main:hover .play svg{fill:var(--on-signal);stroke:var(--on-signal)}
}
.det-main.is-vid{cursor:pointer}

/* Lightbox mit Video: so groß wie möglich, im Querformat am Handy bildschirmfüllend */
.lb-fig video{--vmax:min(78vh,900px);display:block;width:min(100%,calc(var(--vmax) * var(--ar,1.7778)));aspect-ratio:var(--ar,1.7778);height:auto;max-height:var(--vmax);border-radius:8px;background:#000}
@supports (height:1dvh){.lb-fig video{--vmax:min(78dvh,900px)}}
@media (orientation:landscape) and (max-height:560px){
  .lb.vid{display:block;padding:0}
  .lb.vid .lb-fig{position:absolute;inset:0;justify-content:center;gap:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
  .lb.vid .lb-fig video{--vmax:100vh;border-radius:0}
  @supports (height:1dvh){.lb.vid .lb-fig video{--vmax:100dvh}}
  .lb.vid figcaption{display:none}
  .lb.vid .lb-prev,.lb.vid .lb-next{position:absolute;top:50%;margin-top:-23px;z-index:2;opacity:.85}
  .lb.vid .lb-prev{left:calc(8px + env(safe-area-inset-left,0px))}
  .lb.vid .lb-next{right:calc(8px + env(safe-area-inset-right,0px))}
  .lb.vid .lb-x{z-index:3;top:8px;right:calc(8px + env(safe-area-inset-right,0px))}
}

/* Verwaltung: Video-Kacheln und Fortschritt */
.foto-tag.vid{left:auto;right:6px;background:var(--nv);color:var(--on-nv)}
.foto-add.vid-add{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem}
.foto-add.vid-add svg{width:26px;height:26px;fill:currentColor}
.foto-add{position:relative}
.vid-job{display:grid;place-items:center;background:var(--surface)}
.vj-in{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.5rem;text-align:center;width:100%}
.vj-in svg{width:22px;height:22px;fill:var(--blue)}
.vj-in b{font-size:.8rem;line-height:1.2}
.vj-bar{display:block;width:82%;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.vj-bar i{display:block;height:100%;background:var(--signal);border-radius:3px;transition:width 300ms linear}
.vj-in small{font-family:var(--mono);font-size:.72rem;color:var(--muted);min-height:1em}
.vj-in .btn{min-height:30px;padding:0 .6rem;font-size:.75rem}
@media (max-width:640px){.vj-in .btn{display:none}}

/* Verwaltung: Website-Status (online / Baustelle) */
.site-mode{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;padding:1.1rem 1.25rem;margin-bottom:1.6rem;border-radius:12px;border:2px solid var(--line);background:var(--surface)}
.site-mode[data-mode="online"]{border-color:var(--ok)}
.site-mode[data-mode="baustelle"]{border-color:var(--signal);background:linear-gradient(var(--surface),var(--surface)) padding-box,repeating-linear-gradient(-45deg,var(--signal) 0 12px,#1C1600 12px 24px) border-box;border-color:transparent;border-width:4px}
.sm-text{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1 1 18rem}
.sm-text b{font-family:var(--display);font-weight:800;font-size:1.35rem;text-transform:uppercase;letter-spacing:.01em}
.sm-text span{color:var(--muted);font-size:.95rem}
.sm-switch{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.sm-switch button{display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:0 1.3rem;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-weight:700;font-size:1rem;cursor:pointer;transition:background-color 160ms ease,color 160ms ease,transform 160ms var(--ease-out)}
.sm-switch button:active{transform:scale(.97)}
.sm-switch button:disabled{cursor:default;opacity:.55}
.sm-switch button[aria-checked="true"]{opacity:1}
.sm-switch i{width:10px;height:10px;border-radius:50%;border:2px solid currentColor;flex:none}
.sm-switch [data-set="online"][aria-checked="true"]{background:var(--ok);color:#fff}
.sm-switch [data-set="baustelle"][aria-checked="true"]{background:var(--signal);color:var(--on-signal)}
.sm-switch button[aria-checked="true"] i{background:currentColor}
/* Hinweis für Angemeldete, solange die Baustellen-Seite aktiv ist */
.bau-pill{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem .45rem .7rem;border-radius:999px;background:var(--signal);color:var(--on-signal);font-size:.82rem;font-weight:700;text-decoration:none;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.bau-pill::before{content:"";width:14px;height:14px;border-radius:3px;background:repeating-linear-gradient(-45deg,#1C1600 0 4px,transparent 4px 8px)}
@media (prefers-reduced-motion:reduce){.play{transition:none}.vj-bar i{transition:none}.sm-switch button:active{transform:none}}

/* ---------- Server-Version ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.login{max-width:420px}