/* Minimog Wirtschaftlichkeitsrechner v3 · Armaturenbrett (23.10.2026) */
.rx3-sec{
  --a-bg:#1f271b; --a-line:rgba(243,240,232,.09);
  --a-ink:#f3f0e8; --a-ink2:#d6dacb; --a-ink3:#a2a995;
  --a-lime:#a4c639; --a-lime2:#c8e36a; --a-blue:#6f9cf0;
  --kopf:76px;
}
@property --p{syntax:'<percentage>';inherits:true;initial-value:0%}
.rx3-sec.section{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--kopf) + 14px) 0 44px;box-sizing:border-box}


.ae{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);border-radius:6px;overflow:hidden;
  min-height:clamp(540px,calc(100svh - var(--kopf) - 146px),720px);
  background:radial-gradient(120% 140% at 85% 0%,#33412c 0%,var(--a-bg) 55%,#182015 100%);color:var(--a-ink);
  box-shadow:0 30px 70px -24px rgba(15,20,14,.6);font-family:'Barlow',sans-serif}
.ae *{box-sizing:border-box}
.ae-num{font-variant-numeric:tabular-nums}

/* ---------- Bedienpult: keine Rahmen, nur Abstand ---------- */
.ae-pult{padding:24px 26px 30px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;background:rgba(0,0,0,.14)}
.ae-label{display:flex;justify-content:space-between;align-items:baseline;font:600 11.5px/1 'Barlow',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--a-ink3);margin-bottom:9px}
.ae-label b{font:700 24px/1 'Barlow Semi Condensed',sans-serif;letter-spacing:0;color:var(--a-ink);text-transform:none}

.ae-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:4px;background:rgba(0,0,0,.28)}
.ae-seg::before{content:"";position:absolute;top:3px;bottom:3px;left:calc(3px + var(--i,0) * (100% - 6px) / var(--n,2));width:calc((100% - 6px) / var(--n,2));border-radius:3px;
  background:var(--a-lime);transition:left .3s cubic-bezier(.4,0,.2,1)}
.ae-seg button{position:relative;appearance:none;border:0;background:none;padding:9px 6px;min-height:38px;color:var(--a-ink2);font:600 14px/1.1 'Barlow',sans-serif;cursor:pointer;transition:color .3s}
.ae-seg button:hover{color:var(--a-ink)}
.ae-seg button[aria-pressed=true]{color:#1b2112}
.ae-seg button:focus-visible,.ae-chips button:focus-visible,.ae-zoom button:focus-visible{outline:2px solid var(--a-lime2);outline-offset:-2px}

.ae-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ae-chips button{appearance:none;border:1px solid rgba(243,240,232,.14);border-radius:3px;padding:7px 11px;background:transparent;color:var(--a-ink2);font:600 13.5px/1 'Barlow Semi Condensed',sans-serif;letter-spacing:.02em;cursor:pointer;transition:background .25s,color .25s}
.ae-chips button:hover{border-color:rgba(243,240,232,.32);color:var(--a-ink)}
.ae-chips button[aria-pressed=true]{border-color:var(--a-lime);background:rgba(164,198,57,.1);color:var(--a-lime2)}
.ae[data-rx-fest="1"] .ae-seg[data-g="typ"],.ae[data-rx-fest="1"] .ae-chips{display:none}
.ae[data-rx-fest="1"] .ae-preis{display:block;margin-top:0;font-size:14px}
.ae-preis{margin-top:7px;font-size:12.5px;color:var(--a-ink3)}
.ae-preis b{color:var(--a-ink2);font-weight:600}

/* Schieberegler: stufenlos, Knopf gleitet */
.ae-fader{position:relative;height:var(--fh,26px);--p:0%;margin:0 -8px;--rh:2px;transform-origin:var(--ox,50%) 50%;
  transition:--p .18s ease-out,transform .6s cubic-bezier(.25,1.8,.4,1)}
.ae-fader.zieht{transition:transform .6s cubic-bezier(.25,1.8,.4,1)}
.ae-fader.zerrt{transition:none}
.ae-fader:hover,.ae-fader.zieht{--rh:4px}
.ae-fader input{position:absolute;inset:0 4px;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2;touch-action:pan-y}
.ae-rail,.ae-fill{transition:height .3s cubic-bezier(.3,1.5,.5,1),top .3s cubic-bezier(.3,1.5,.5,1)}
.ae-segs{position:absolute;inset:0 8px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:3px;border-radius:3px;pointer-events:none;
  background:#050605;box-shadow:inset 0 0 0 1px #2a5f93}
.ae-segs i{background:#141a13;transition:background .15s}
.ae-segs i.an{background:#7cc934}
.ae-segs i.spitze{background:#f06a2c}
.ae-fader:hover .ae-segs,.ae-fader.zieht .ae-segs{box-shadow:inset 0 0 0 1px #3d82c4}
.ae-fader input:focus-visible ~ .ae-segs{box-shadow:inset 0 0 0 2px #7fd8d4}
.ae-rail{position:absolute;left:0;right:0;top:calc(var(--fh,34px)/2 - var(--rh)/2);height:var(--rh);border-radius:9px;background:rgba(243,240,232,.18)}
.ae-fill{position:absolute;left:0;top:calc(var(--fh,34px)/2 - var(--rh)/2);height:var(--rh);border-radius:9px;background:#c8e36a;width:var(--p)}
.ae-knob{position:absolute;top:calc(var(--fh,34px)/2 - 8px);left:var(--p);width:16px;height:16px;margin-left:-8px;border-radius:50%;
  background:#c8e36a;border:3px solid #1f271b;box-shadow:0 0 0 1px #c8e36a;transition:transform .2s,box-shadow .2s}
.ae-fader:hover .ae-knob{box-shadow:0 0 0 1px #c8e36a,0 0 0 6px rgba(200,227,106,.15)}
.ae-fader.zieht .ae-knob{transform:scale(1.25);box-shadow:0 0 0 1px #c8e36a,0 0 0 7px rgba(200,227,106,.18)}
.ae-regs{display:grid;gap:12px}
.ae-reg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:center;gap:16px}
.ae-reg .ae-label{flex-direction:column;align-items:flex-start;gap:7px;margin:0;line-height:1.2}
/* Wert groß und klar in Display-Türkis */
.ae-reg .ae-label b{display:block;font:700 22px/1 'Barlow',sans-serif;letter-spacing:0;text-transform:none;color:#7fd8d4;font-variant-numeric:tabular-nums}

/* ---------- Armaturen ---------- */
.ae-arm{padding:22px 26px 20px;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}
.ae-top{display:flex;gap:22px;align-items:center}
.ae-tacho{flex:0 0 clamp(170px,19vw,250px);position:relative;container-type:inline-size}
.ae-tacho svg{display:block;width:100%;height:auto}
.ae-mitte{position:absolute;left:0;right:0;top:49%;transform:translateY(-50%);text-align:center;pointer-events:none}
.ae-mitte b{display:block;font:700 12cqw/1 'Barlow',sans-serif;color:#9be03c;font-variant-numeric:tabular-nums}
.ae-mitte>span{display:block;margin-top:2cqw;font:700 4cqw/1 'Barlow',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.ae-satz{min-width:0}
.ae-satz small{display:block;font:600 11px/1 'Barlow',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--a-ink3);margin-bottom:9px}
.ae-satz h3{margin:0;font:800 clamp(24px,2.4vw,34px)/1.02 'Barlow Semi Condensed',sans-serif;text-transform:uppercase;color:#9be03c}
.ae-satz p{margin:8px 0 0;color:var(--a-ink2);font-size:14.5px;line-height:1.4}

/* Anzeigen ohne Kästen: nur Trennstriche */
.ae-anz{display:grid;grid-template-columns:repeat(4,1fr)}
.ae-anz div{padding:2px 14px}
.ae-anz div:first-child{padding-left:0}
.ae-anz div+div{border-left:1px solid var(--a-line)}
.ae-anz small{display:block;font:600 10.5px/1.2 'Barlow',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--a-ink3)}
.ae-anz b{display:block;margin-top:6px;font:700 clamp(18px,1.75vw,24px)/1 'Barlow',sans-serif;white-space:nowrap;color:#7fd8d4;font-variant-numeric:tabular-nums}
.ae-anz div>span{display:block;margin-top:4px;font-size:12px;color:var(--a-ink3);line-height:1.25}

.ae-chart{position:relative;flex:1 1 auto;min-height:120px;display:flex;flex-direction:column}
.ae-chart-kopf{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--a-ink3);margin-bottom:2px}
.ae-leg{display:flex;gap:14px}
.ae-leg i{display:inline-block;width:16px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.ae-zoom{display:inline-flex;gap:2px;margin-right:14px;padding:2px;border-radius:4px;background:rgba(0,0,0,.25)}
.ae-zoom button{appearance:none;border:0;border-radius:3px;padding:4px 10px;background:none;color:var(--a-ink3);font:600 12px/1 'Barlow',sans-serif;cursor:pointer;transition:background .25s,color .25s}
.ae-zoom button[aria-pressed=true]{background:rgba(164,198,57,.22);color:var(--a-lime2)}
.ae-plot{position:relative;flex:1 1 auto;min-height:0}
.ae-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ae-tip{position:absolute;top:6px;pointer-events:none;padding:8px 10px;border-radius:7px;background:rgba(18,23,15,.94);box-shadow:0 8px 24px rgba(0,0,0,.4);font-size:12.5px;line-height:1.5;white-space:nowrap;opacity:0;transition:opacity .15s}
.ae-tip b{display:block}
.ae-cta{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:4px;background:var(--a-lime);color:#1b2112;font:600 16px/1 'Barlow',sans-serif;letter-spacing:.01em;text-decoration:none;transition:background .2s}
.ae-cta:hover,.ae-mcta:hover,.ae-teaser-knopf:hover{background:#b3d24a}
.ae-fuss{font-size:11px;color:var(--a-ink3);margin:-6px 0 0;text-align:center}

.rz{--zh:1.2em;display:inline-flex;align-items:flex-start;height:var(--zh);line-height:var(--zh);overflow:hidden;vertical-align:top;margin:-.1em 0}
.rz-z{display:inline-block;height:var(--zh);overflow:hidden}
.rz-z>span{display:block;transition:transform .8s cubic-bezier(.2,.95,.25,1)}
.rz-z>span>i{display:block;height:var(--zh);font-style:normal;text-align:center}
.rz-c{display:inline-block;white-space:pre}
@media (prefers-reduced-motion:reduce){.rz-z>span{transition:none}}
@keyframes ae-puls{0%{r:6;opacity:.7}100%{r:18;opacity:0}}
.ae-puls{animation:ae-puls 1.8s ease-out infinite}

/* ---------- Handy: Ergebnis oben, Bedienung unten, alles in einem Bildschirm ---------- */
@media (max-width:999px){
  .rx3-sec.section{min-height:0;padding:40px 0 44px;justify-content:flex-start}
  .rx3-sec>.wrap{padding-inline:10px}
      .ae{grid-template-columns:minmax(0,1fr);height:auto}
  .ae-pult>div:nth-last-child(3) .ae-label{display:none}
  .ae-pult,.ae-arm{min-width:0}
    .ae-arm{order:-1;padding:12px 14px 4px;gap:8px}
  .ae-pult{padding:10px 14px 12px;gap:7px;justify-content:flex-start}
  .ae-top{gap:12px}.ae-tacho{flex-basis:132px}
  .ae-satz{min-width:0}
.ae-satz small{display:none}.ae-satz h3{font-size:21px}.ae-satz p{font-size:12.5px;margin-top:4px}
  .ae-anz{grid-template-columns:1fr 1fr}.ae-anz div:nth-child(n+3){display:none}
  .ae-anz b{font-size:19px}.ae-anz div>span{font-size:11px}
  .ae-chart{flex:none;min-height:0}.ae-plot{flex:none;height:84px}.ae-chart-kopf>span:first-child{display:none}.ae-chart-kopf{justify-content:flex-end}
  .ae-cta,.ae-fuss{display:none}
  .ae-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:6px -14px 0;padding:0 14px}
  .ae-chips::-webkit-scrollbar{display:none}.ae-chips button{flex:0 0 auto}
  .ae-preis{display:none}
  .ae-label{margin-bottom:5px}
  .ae-seg button{min-height:34px;padding:7px 4px;font-size:13px}
  .ae-regs{gap:8px}.ae-reg{gap:12px}.ae-reg .ae-label b{font-size:18px}
  .ae-fader{--fh:24px;margin:0 -4px}
  .ae-mcta{display:flex!important}
}
.ae-mcta{display:none;align-items:center;justify-content:center;min-height:46px;margin-top:2px;border-radius:4px;background:var(--a-lime);color:#1b2112;font:600 15px/1 'Barlow',sans-serif;text-decoration:none;transition:background .2s}
/* Korn der Seite (welt-fx.js) unter dem Inhalt */
.ae,.ae-teaser{position:relative;isolation:isolate}
.ae>.grain,.ae-teaser>.grain{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ae-arm{position:relative}
.ae-zu{display:none}

/* ---------- Handy zuerst: Vorschau + Vollbild ---------- */
.ae-teaser{display:grid;grid-template-columns:104px minmax(0,1fr);gap:4px 14px;align-items:center;padding:16px 16px 16px 12px;border-radius:6px;overflow:hidden;
  background:radial-gradient(120% 140% at 85% 0%,#33412c 0%,var(--a-bg) 55%,#182015 100%);color:var(--a-ink);box-shadow:0 22px 50px -24px rgba(15,20,14,.65);font-family:'Barlow',sans-serif}
.ae-teaser-tacho{position:relative}
.ae-teaser-tacho svg{display:block;width:100%;height:auto}
.ae-teaser-text small{display:block;font:600 10.5px/1 'Barlow',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--a-ink3);margin-bottom:6px}
.ae-teaser-text b{display:block;font:800 22px/1.02 'Barlow Semi Condensed',sans-serif;text-transform:uppercase;color:var(--a-lime2)}
.ae-teaser-text span{display:block;margin-top:5px;font-size:13px;line-height:1.35;color:var(--a-ink2)}
.ae-teaser-knopf{grid-column:1/-1;margin-top:12px;min-height:50px;border:0;border-radius:4px;background:var(--a-lime);color:#1b2112;font:600 16px/1 'Barlow',sans-serif;cursor:pointer;transition:background .2s}
.ae-dlg{position:fixed;inset:0;padding:0;border:0;margin:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;background:#182015;color:var(--a-ink);overflow:hidden auto;overscroll-behavior:contain}
.ae-dlg::backdrop{background:rgba(10,14,9,.7)}
.ae-dlg[open]{animation:ae-hoch .45s cubic-bezier(.2,.9,.25,1)}
@keyframes ae-hoch{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.ae.im-dlg{display:flex;flex-direction:column;height:100%;border-radius:0;box-shadow:none}
.im-dlg .ae-arm{flex:1 1 auto;min-height:0;padding-top:calc(max(14px,env(safe-area-inset-top)) + 12px)}
.im-dlg .ae-satz{padding-right:44px}
.im-dlg .ae-chart{flex:1 1 auto;min-height:90px}
.im-dlg .ae-plot{flex:1 1 auto;height:auto}
.im-dlg .ae-pult{padding-bottom:max(14px,env(safe-area-inset-bottom))}
.im-dlg .ae-zu{display:grid;place-items:center;position:absolute;top:max(10px,env(safe-area-inset-top));right:10px;z-index:3;width:40px;height:40px;border:1px solid rgba(243,240,232,.18);border-radius:4px;
  background:rgba(243,240,232,.1);color:var(--a-ink);font:400 26px/1 'Barlow',sans-serif;cursor:pointer}
@media (max-width:999px){ .ae:not(.im-dlg){display:none} }
@media (min-width:1000px){ .ae-teaser,.ae-dlg{display:none} }

@media (prefers-reduced-motion:reduce){ .ae-dlg[open]{animation:none} .ae-puls{animation:none} .ae-fader,.ae-seg::before{transition:none} }

/* Kopf: Seitenbausteine eyebrow/display/lead wie in den anderen Abschnitten; ab Desktop eine Zeile */
.rx3-kopf{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.rx3-kopf .eyebrow{margin-bottom:8px}
.rx3-kopf h2.display{margin:0}
.rx3-kopf .lead{margin:0}
.rx3-sec{scroll-margin-top:0}
@media (min-width:1000px){
  .rx3-kopf{flex-direction:row;justify-content:space-between;align-items:end;gap:32px;margin-bottom:14px}
  .rx3-kopf h2.display{font-size:clamp(26px,2.8vw,40px);line-height:1.02}
  .rx3-kopf h2.display span{display:inline}
  .rx3-kopf .lead{max-width:500px;font-size:15px;line-height:1.45;color:var(--muted,#555b57)}
}

/* 24.10.2026: Handy zuerst – kleinere Überschrift, Zeitknöpfe, Preiszeile, Umschalter und Beschriftungen; kurze Bildschirme scrollen statt abzuschneiden */
@media (max-width:999px){
  .ae-satz h3{font-size:17px;line-height:1.08;letter-spacing:.01em}
  .ae-satz p{font-size:12px;line-height:1.35}
  .ae-tacho{flex-basis:112px}
  .ae-anz small{font-size:9.5px;letter-spacing:.12em}
  .ae-anz b{font-size:17px;margin-top:4px}
  .ae-anz div>span{font-size:10.5px}
  .ae-zoom{margin-right:8px}
  .ae-zoom button{padding:3px 7px;font-size:11px}
  .ae-leg{gap:10px;font-size:11px}.ae-leg i{width:12px;margin-right:4px}
  .ae[data-rx-fest="1"] .ae-preis{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ae-seg button{min-height:30px;padding:6px 4px;font-size:12.5px}
  .ae-reg{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:10px}
  .ae-reg .ae-label{font-size:10px;letter-spacing:.1em;gap:4px}
  .ae-reg .ae-label b{font-size:17px}
  .ae-fader{--fh:20px}
  .ae-mcta{min-height:44px;font-size:14.5px}
}
@media (max-width:999px) and (max-height:640px){
  .ae.im-dlg{height:auto;min-height:100%}
  .im-dlg .ae-chart{flex:none}.im-dlg .ae-plot{flex:none;height:84px}
}
@media (max-width:400px){ .ae-reg .ae-label{font-size:9.5px;letter-spacing:.05em} .ae-reg{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr)} }
/* 1000–1199 px: zwei Spalten bleiben, aber Anzeigen 2 × 2 und nichts bricht um */
.ae-zoom button,.ae-leg span{white-space:nowrap}
@media (min-width:1000px) and (max-width:1199px){
  .ae-pult{padding:20px 20px 24px}.ae-arm{padding:20px 22px 18px}
  .ae-anz{grid-template-columns:1fr 1fr;row-gap:12px}
  .ae-anz div:nth-child(3){padding-left:0;border-left:0}
  .ae-chart-kopf>span:first-child{display:none}.ae-chart-kopf{justify-content:flex-end}
  .ae-reg .ae-label{font-size:10.5px;letter-spacing:.08em}
  .ae-reg{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px}
  .ae-satz h3{font-size:24px}
}
/* Maschinenseiten, Desktop: keine Löcher im Bedienpult – Maschine als Kopfblock, Abstände gleichmäßig, Regler größer */
@media (min-width:1000px){
  .ae[data-rx-fest="1"] .ae-pult{justify-content:flex-start;gap:28px}
  .ae[data-rx-fest="1"] .ae-preis{padding-bottom:22px;border-bottom:1px solid var(--a-line);font-size:14px}
  .ae[data-rx-fest="1"] .ae-preis b{display:block;font-weight:600}
  .ae[data-rx-fest="1"] .ae-pname{display:block;font:700 clamp(26px,2.4vw,34px)/1 'Barlow Semi Condensed',sans-serif;color:var(--a-ink);margin-bottom:10px}
  .ae[data-rx-fest="1"] .ae-preis b .ae-psep{display:none}
  .ae[data-rx-fest="1"] .ae-pnetto{color:#7fd8d4;font:700 20px/1 'Barlow',sans-serif}
  .ae[data-rx-fest="1"] .ae-pnetto+*,.ae[data-rx-fest="1"] .ae-preis>.ae-psep{color:var(--a-ink3)}
  .ae[data-rx-fest="1"] .ae-pbrutto{color:var(--a-ink3)}
  .ae[data-rx-fest="1"] .ae-regs{flex:1 1 auto;align-content:space-evenly;gap:18px}
  .ae[data-rx-fest="1"] .ae-fader{--fh:32px}
  .ae[data-rx-fest="1"] .ae-reg .ae-label b{font-size:26px}
}
@media (min-width:1000px){ .ae[data-rx-fest="1"] .ae-preis>.ae-psep{display:none} .ae[data-rx-fest="1"] .ae-pbrutto{display:block;margin-top:6px;font-size:13px} }
/* Folgt ein schräger Abschnitt (zieht sich mit negativem Rand hoch), braucht der Rechner unten mehr Luft */
.rx3-sec.section:has(+ .slant){padding-bottom:calc(44px + 7vw)}
/* Modellwahl am Desktop in EINER Reihe, Knöpfe teilen sich die Breite */
@media (min-width:1000px){ .ae-chips{flex-wrap:nowrap;gap:4px} .ae-chips button{flex:1 1 0;min-width:0;padding:7px 4px;font-size:12.5px;white-space:nowrap;text-align:center} }
@media (min-width:1000px) and (max-width:1199px){ .ae-chips{overflow-x:auto;scrollbar-width:none} .ae-chips::-webkit-scrollbar{display:none} .ae-chips button{flex:0 0 auto;padding:7px 9px} }
/* 24.10.2026 Handy/Tablet: Tacho größer, Diagramm begrenzt, Bedienung bekommt den Platz */
@media (max-width:999px){
  .ae-tacho{flex-basis:clamp(150px,42vw,250px)}
  .ae-satz h3{font-size:clamp(17px,3.4vw,26px)}
  .im-dlg .ae-arm{flex:0 0 auto}
  .im-dlg .ae-chart{flex:0 0 auto;min-height:0}
  .im-dlg .ae-plot{flex:none;height:clamp(84px,22vh,210px)}
  .im-dlg .ae-pult{flex:1 1 auto;justify-content:space-evenly}
  .im-dlg .ae-fader{--fh:26px}
}
/* Handy (bis 599 px): Tacho groß und mittig, Satz zentriert darunter */
@media (max-width:599px){
  .ae-top{flex-direction:column;align-items:center;gap:6px;text-align:center}
  .ae-tacho{flex:none;width:min(62vw,250px)}
  .im-dlg .ae-satz{padding-right:0}
  .ae-satz h3{font-size:19px}
  .ae-satz p{margin-top:3px}
}
/* 24.10.2026 Drehscheibe statt Balken unter 1000 px: Walze hinter Glas wie die Senderskala eines Radios, roter geteilter Zeiger */
.ae-scheibe{display:none}
@media (max-width:999px){
  .ae-reg .ae-fader{display:none}
  .ae-scheibe{display:block;position:relative;height:48px;min-width:0;border-radius:7px;overflow:hidden;background:#0a0d08;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.9),inset 0 0 0 1px rgba(243,240,232,.08),0 1px 0 rgba(243,240,232,.06)}
  .ae-scheibe-band{position:relative;z-index:1;display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 calc(50% - 22px);
    overscroll-behavior-x:contain;touch-action:pan-x;cursor:grab;-webkit-user-select:none;user-select:none;outline:0}
  .ae-scheibe-band::-webkit-scrollbar{display:none}
  .ae-scheibe-band span{flex:0 0 44px;scroll-snap-align:center;display:grid;place-items:center;padding-top:13px;
    font:700 16px/1 'Barlow',sans-serif;font-variant-numeric:tabular-nums;color:#e9e2cf;will-change:transform,opacity;
    background:
      linear-gradient(90deg,transparent calc(50% - 1px),rgba(233,226,207,.85) calc(50% - 1px),rgba(233,226,207,.85) calc(50% + 1px),transparent calc(50% + 1px)) 0 5px/100% 11px no-repeat,
      repeating-linear-gradient(90deg,transparent 0 7.8px,rgba(233,226,207,.35) 7.8px 8.8px) 0 7px/100% 7px no-repeat}
  .ae-scheibe-band span.an{color:#fff6dc;font-size:19px;text-shadow:0 0 10px rgba(255,200,120,.55)}
  .ae-scheibe::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
      linear-gradient(90deg,#0a0d08 0%,rgba(10,13,8,.85) 12%,rgba(10,13,8,.25) 32%,transparent 45%,transparent 55%,rgba(10,13,8,.25) 68%,rgba(10,13,8,.85) 88%,#0a0d08 100%),
      radial-gradient(60% 140% at 50% 50%,rgba(255,196,110,.16),transparent 70%),
      linear-gradient(180deg,rgba(255,255,255,.07) 0%,transparent 35%,transparent 70%,rgba(0,0,0,.35) 100%)}
  .ae-scheibe::after{content:"";position:absolute;z-index:3;top:3px;bottom:3px;left:50%;width:2px;margin-left:-1px;border-radius:1px;pointer-events:none;
    background:linear-gradient(180deg,#f0562c 0 30%,transparent 30% 78%,#f0562c 78% 100%);filter:drop-shadow(0 0 4px rgba(240,86,44,.9))}
  .ae-scheibe:focus-within{box-shadow:inset 0 2px 6px rgba(0,0,0,.9),inset 0 0 0 2px #7fd8d4}
  .ae-regs{gap:10px}
}
/* Vollbild mit Drehscheiben: passt auf übliche Handys; reicht die Höhe nicht, scrollt das Vollbild statt abzuschneiden */
@media (max-width:999px){
  .ae.im-dlg{height:auto;min-height:100%}
  .im-dlg .ae-plot{height:clamp(80px,15vh,180px)}
  .ae-scheibe{height:44px}
  .ae-scheibe-band span{padding-top:11px}
}
@media (max-width:599px){ .ae-tacho{width:min(50vw,210px)} }
/* 24.10.2026 Handy/Tablet: Bedienteil passend zur Drehscheibe – Radiotasten statt Lime-Fläche, warme Werte, Typenschild, Taste */
@media (max-width:999px){
  .ae-pult .ae-seg{padding:4px;gap:4px;border-radius:7px;background:#0a0d08;box-shadow:inset 0 2px 6px rgba(0,0,0,.9),inset 0 0 0 1px rgba(243,240,232,.08),0 1px 0 rgba(243,240,232,.06)}
  .ae-pult .ae-seg::before{display:none}
  .ae-pult .ae-seg button{border-radius:5px;min-height:38px;color:#8d9483;letter-spacing:.04em;text-transform:uppercase;font:700 12px/1 'Barlow',sans-serif;
    background:linear-gradient(180deg,#2a3226 0%,#1b2118 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #050605;transition:transform .12s,box-shadow .12s,color .2s}
  .ae-pult .ae-seg button[aria-pressed=true]{color:#fff6dc;transform:translateY(2px);background:linear-gradient(180deg,#1d241a 0%,#262e22 100%);
    box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 0 0 #050605;text-shadow:0 0 8px rgba(255,200,120,.45)}
  .ae-pult .ae-seg button::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;vertical-align:1px;background:#3a2a1c;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
  .ae-pult .ae-seg button[aria-pressed=true]::before{background:#ffb347;box-shadow:0 0 6px 1px rgba(255,170,70,.85)}
  .ae-chips button{border-radius:5px;border:0;color:#8d9483;background:linear-gradient(180deg,#2a3226 0%,#1b2118 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #050605}
  .ae-chips button[aria-pressed=true]{color:#fff6dc;background:linear-gradient(180deg,#1d241a,#262e22);transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(0,0,0,.7);text-shadow:0 0 8px rgba(255,200,120,.45)}
  .ae-reg .ae-label b{color:#fff6dc;text-shadow:0 0 10px rgba(255,200,120,.35)}
  .ae-reg .ae-label{color:#a2a995}
  .ae-pult>div>.ae-label{color:#a2a995}
  .ae-preis,.ae[data-rx-fest="1"] .ae-preis{padding:6px 10px;border-radius:5px;background:linear-gradient(180deg,#141a12,#0f140d);box-shadow:inset 0 1px 2px rgba(0,0,0,.7),0 1px 0 rgba(243,240,232,.05);
    color:#8d9483;letter-spacing:.03em}
  .ae-preis b{color:#e9e2cf}
  .ae-mcta{border-radius:7px;background:linear-gradient(180deg,#b6d64a 0%,#a4c639 55%,#93b52e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 0 #5d7518,0 6px 14px rgba(0,0,0,.35);
    transition:transform .12s,box-shadow .12s}
  .ae-mcta:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 #5d7518}
}
/* Handy/Tablet, Farbwelt wie der Tacho (Nutzer 24.10.): blaue Ringlinie, weiße Striche, grün = gewählt, oranger Zeiger */
@media (max-width:999px){
  .ae-pult .ae-seg,.ae-scheibe{box-shadow:inset 0 0 0 1px #2a6fb0,inset 0 2px 6px rgba(0,0,0,.85)}
  .ae-pult .ae-seg button{background:#141a13;color:#a2a995;box-shadow:none;transform:none;text-shadow:none}
  .ae-pult .ae-seg button::before{display:none}
  .ae-pult .ae-seg button[aria-pressed=true]{background:linear-gradient(180deg,#8bd63d 0%,#7cc934 60%,#6fb52c 100%);color:#10150c;transform:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 12px rgba(124,201,52,.35);text-shadow:none}
  .ae-chips button{background:#141a13;color:#a2a995;box-shadow:inset 0 0 0 1px #2a5f93;transform:none;text-shadow:none}
  .ae-chips button[aria-pressed=true]{background:#7cc934;color:#10150c;box-shadow:inset 0 0 0 1px #7cc934,0 0 10px rgba(124,201,52,.35);transform:none;text-shadow:none}
  .ae-scheibe-band span{color:#d6dacb;
    background:
      linear-gradient(90deg,transparent calc(50% - 1px),#e8f0f6 calc(50% - 1px),#e8f0f6 calc(50% + 1px),transparent calc(50% + 1px)) 0 5px/100% 11px no-repeat,
      repeating-linear-gradient(90deg,transparent 0 7.8px,rgba(232,240,246,.4) 7.8px 8.8px) 0 7px/100% 7px no-repeat}
  .ae-scheibe-band span.an{color:#9be03c;text-shadow:0 0 10px rgba(155,224,60,.45)}
  .ae-scheibe::before{background:
      linear-gradient(90deg,#0a0d08 0%,rgba(10,13,8,.85) 12%,rgba(10,13,8,.25) 32%,transparent 45%,transparent 55%,rgba(10,13,8,.25) 68%,rgba(10,13,8,.85) 88%,#0a0d08 100%),
      radial-gradient(60% 140% at 50% 50%,rgba(124,201,52,.12),transparent 70%),
      linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 35%,transparent 70%,rgba(0,0,0,.35) 100%)}
  .ae-scheibe::after{background:linear-gradient(180deg,#f06a2c 0 30%,transparent 30% 78%,#f06a2c 78% 100%);filter:drop-shadow(0 0 4px rgba(240,106,44,.85))}
  .ae-reg .ae-label b{color:#f3f0e8;text-shadow:none}
}
/* Handy/Tablet (Nutzer 24.10.): Kennzahlen mittig unter dem Tacho; Tasten edler wie auf der Website – feine Linie, Lime-Kontur, flacher Knopf */
@media (max-width:599px){
  .ae-anz div{padding:2px 8px;text-align:center}
  .ae-anz div:first-child{padding-left:8px}
}
@media (max-width:999px){
  .ae-pult .ae-seg{padding:3px;gap:3px;border-radius:4px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(243,240,232,.12)}
  .ae-pult .ae-seg button,.ae-pult .ae-seg button[aria-pressed=true]{border-radius:3px;min-height:38px;font:600 12px/1 'Barlow',sans-serif;letter-spacing:.12em;text-transform:uppercase}
  .ae-pult .ae-seg button{background:transparent;color:#a2a995;box-shadow:none}
  .ae-pult .ae-seg button[aria-pressed=true]{background:rgba(164,198,57,.12);color:#c8e36a;box-shadow:inset 0 0 0 1px #a4c639}
  .ae-chips button{border-radius:3px;background:transparent;color:#a2a995;box-shadow:inset 0 0 0 1px rgba(243,240,232,.14)}
  .ae-chips button[aria-pressed=true]{background:rgba(164,198,57,.12);color:#c8e36a;box-shadow:inset 0 0 0 1px #a4c639}
  .ae-scheibe{box-shadow:inset 0 0 0 1px rgba(243,240,232,.12),inset 0 2px 6px rgba(0,0,0,.85)}
  .ae-scheibe:focus-within{box-shadow:inset 0 0 0 1px #a4c639,inset 0 2px 6px rgba(0,0,0,.85)}
  .ae-preis,.ae[data-rx-fest="1"] .ae-preis{background:none;box-shadow:none;padding:0;border-radius:0}
  .ae-mcta,.ae-mcta:active{border-radius:4px;background:var(--a-lime);box-shadow:none;transform:none;font:600 15px/1 'Barlow',sans-serif;letter-spacing:.01em}
  .ae-mcta:hover{background:#b3d24a}
}
/* 24.10.2026 Handy/Tablet: Schieber statt Drehscheibe (Vorbild React Bits Elastic Slider / 21st.dev): Name + Wert in einer Zeile,
   Schiene über die volle Breite, dick, wächst beim Anfassen, großer runder Griff mit Lime-Ring; Anfrage-Knopf klebt unten */
.ae-griff{display:none}
@media (max-width:999px){
  .ae-scheibe{display:none!important}
  .ae-reg .ae-fader{display:block}
  .ae-regs{gap:14px}
  .ae-reg{grid-template-columns:minmax(0,1fr);gap:6px}
  .ae-reg .ae-label{flex-direction:row;justify-content:space-between;align-items:baseline;font-size:10.5px;letter-spacing:.12em;gap:10px}
  .ae-reg .ae-label b{font-size:20px;color:#f3f0e8}
  .ae-fader{--fh:30px;margin:0}
  .ae-segs{top:7px;bottom:7px;inset-inline:0;padding:2px;gap:2px;border-radius:9px;transition:top .2s,bottom .2s}
  .ae-segs i{border-radius:2px}
  .ae-fader.zieht .ae-segs{top:4px;bottom:4px}
  .ae-fader input{inset:0}
  .ae-griff{display:block;position:absolute;z-index:1;top:50%;left:clamp(13px,var(--p),calc(100% - 13px));width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle at 50% 35%,#ffffff,#e3e6dc 70%);box-shadow:0 0 0 3px #a4c639,0 4px 10px rgba(0,0,0,.55);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
  .ae-fader.zieht .ae-griff{transform:scale(1.18);box-shadow:0 0 0 3px #c8e36a,0 0 0 9px rgba(164,198,57,.18),0 6px 14px rgba(0,0,0,.6)}
  .ae.im-dlg{overflow:visible}
  .im-dlg .ae-plot{height:clamp(72px,13vh,170px)}
  .im-dlg .ae-pult{padding-bottom:0}
  .im-dlg .ae-mcta{position:sticky;bottom:0;z-index:5;margin:8px -14px 0;border-radius:0;min-height:calc(52px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -10px 24px rgba(10,14,9,.85)}
}
@media (max-width:999px){ .ae-segs i.spitze{background:#7cc934} }
/* Griff als Fader-Kappe wie am Mischpult (statt Ball): schmal, aufrecht, hell-metallisch mit Mittelrille; Pult dichter, damit alle Regler über dem Knopf sichtbar sind */
@media (max-width:999px){
  .ae-griff{width:16px;height:30px;margin:-15px 0 0 -8px;border-radius:3px;left:clamp(8px,var(--p),calc(100% - 8px));
    background:linear-gradient(90deg,#9aa093 0%,#eef0ea 30%,#f7f8f4 50%,#e3e6de 70%,#8e9488 100%);
    box-shadow:0 0 0 1px rgba(0,0,0,.55),0 3px 6px rgba(0,0,0,.55);transition:transform .15s}
  .ae-griff::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;background:#1f271b;border-radius:1px}
  .ae-fader.zieht .ae-griff{transform:scaleY(1.12);box-shadow:0 0 0 1px #a4c639,0 3px 8px rgba(0,0,0,.6)}
  .ae-regs{gap:9px}
  .ae-reg{gap:3px}
  .ae-fader{--fh:30px}
  .im-dlg .ae-plot{height:clamp(60px,10vh,140px)}
  .im-dlg .ae-arm{gap:6px}
  .im-dlg .ae-pult{gap:8px;justify-content:flex-start;padding-bottom:4px}
}
@media (max-width:599px){ .ae-tacho{width:min(44vw,190px)} }
/* Kurze Handy-Bildschirme: Diagramm im Vollbild weglassen, damit alle Regler über dem Anfrage-Knopf sichtbar bleiben */
@media (max-width:999px) and (max-height:760px){ .im-dlg .ae-chart{display:none} }
/* Handy (Nutzer 24.10. Nacht): Schieber wie am Desktop – Segmentbalken mit blauem Rahmen und oranger Spitze, kein Griff; volle Breite bleibt */
@media (max-width:999px){
  .ae-griff{display:none!important}
  .ae-fader{--fh:30px;margin:0}
  .ae-segs,.ae-fader.zieht .ae-segs{top:0;bottom:0;inset-inline:0;padding:3px;gap:2px;border-radius:3px}
  .ae-segs i{border-radius:0}
  .ae-segs i.spitze{background:#f06a2c}
}
/* Handy: mehr Rand links und rechts im Bedienfeld (Nutzer 24.10.) */
@media (max-width:999px){ .ae-pult{padding-left:22px;padding-right:22px} .im-dlg .ae-mcta{margin-left:-22px;margin-right:-22px} }
@media (max-width:599px){ .ae-tacho{width:min(56vw,230px)} }
/* Handy (Nutzer 24.10.): Schieber flacher und schmaler wie am Desktop – Name/Wert links, Schieber rechts; mehr Luft darüber */
@media (max-width:999px){
  .ae-regs{gap:16px;margin-top:10px}
  .ae-reg{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;align-items:center}
  .ae-reg .ae-label{flex-direction:column;align-items:flex-start;gap:4px}
  .ae-reg .ae-label b{font-size:19px}
  .ae-fader,.ae-fader.zieht{--fh:22px}
}
/* Ratgeber-Artikel (31.10.2026): Rechner in der rechten Spalte (Inhaltsverzeichnis bleibt links daneben stehen), nach rechts so breit wie Platz ist */
.rg-layout { container-type: inline-size; }
.rg-layout > .rg-rechner { grid-column: 2; min-width: 0; width: min(1040px, max(100%, calc(100cqw - 230px - clamp(36px, 6vw, 110px)))); margin: 0 0 clamp(44px, 5vw, 64px); }
.rg-layout > .rg-rechner .rx3-sec { padding: 0; }
.rg-layout > .rg-rechner .rx3-sec > .wrap { width: 100%; max-width: none; padding-inline: 0; }
.rg-layout > .rg-text-2 { grid-column: 2; }
@media (max-width: 900px) { .rg-layout > .rg-rechner, .rg-layout > .rg-text-2 { grid-column: 1; width: auto; } }
@media (min-width:1000px){ .rg-layout > .rg-rechner .ae-chips{flex-wrap:wrap;overflow:visible;gap:6px} .rg-layout > .rg-rechner .ae-chips button{flex:0 0 auto;padding:7px 11px;font-size:13.5px} }
/* handy-ohne-diagramm 04.11.2026 */
@media (max-width:767px){ .im-dlg .ae-chart{display:none} }