/* Maßstabrechner (Wunsch Hopf 03.11.2026). Ein Instrument: Eingaben links, Zeichnung rechts,
   darunter die Maßstabsleiste und das Ergebnis. Hausfarben, eckig, Plex wie die übrige Seite. */
.rechner .lead{max-width:56ch}
.ms{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);grid-template-areas:"rail draw" "ruler ruler" "result result";margin-top:clamp(40px,5vw,64px);background:var(--surface);border:1px solid var(--line)}

/* Eingaben */
.ms-rail{grid-area:rail;display:grid;gap:32px;align-content:start;padding:clamp(22px,2.4vw,32px);border-right:1px solid var(--line)}
.ms-group{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.ms-cap{padding:0;font-size:14px;font-weight:500;color:var(--ink-2)}
.ms-pre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ms-pre button{min-height:44px;padding:0 10px;border:1px solid var(--line);background:transparent;color:var(--ink-2);font:500 14px/1 var(--font);cursor:pointer;transition:color .2s,border-color .2s,background-color .2s}
.ms-pre button:hover{color:var(--ink);border-color:var(--ink-3)}
.ms-pre button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ms-dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ms-f{display:grid;gap:6px;min-width:0}
.ms-f label{font-size:13.5px;color:var(--ink-3)}
.ms-in{position:relative}
.ms-in input{width:100%;min-height:50px;padding:0 30px 0 13px;border:1px solid rgba(244,244,244,.28);border-radius:var(--radius);background:var(--bg);color:var(--ink);font:500 18px/1 var(--font);font-variant-numeric:tabular-nums;transition:border-color .2s,box-shadow .2s}
.ms-in input:hover{border-color:rgba(244,244,244,.48)}
.ms-in input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,236,0,.22)}
.ms-in input[aria-invalid="true"]{border-color:#ff9a7a}
.ms-in i{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:400 14px/1 var(--font);font-style:normal;color:var(--ink-3);pointer-events:none}
.ms-err{font-size:14px;line-height:1.4;color:#ff9a7a}
.ms-err:empty{display:none}
.ms-tables{display:grid;gap:6px}
.ms-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 14px;border:1px solid var(--line);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.ms-row:hover{border-color:var(--ink-3)}
.ms-row input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ms-row b{font-weight:500;font-size:15.5px;letter-spacing:-.01em}
.ms-row span{font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ms-row:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ms-row:has(input:checked) span{color:#44535b}
.ms-row:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}

/* Zeichnung */
.ms-draw{grid-area:draw;display:grid;gap:8px;align-content:start;min-width:0;padding:clamp(18px,2.4vw,32px)}
.ms-tag{font:300 12.5px/1.3 var(--mono);color:var(--ink-3)}
.ms-pane+.ms-tag{margin-top:6px}
.ms-pane{min-width:0}
.ms-pane svg{display:block;width:100%;height:auto;overflow:hidden}
.t-grid{stroke:rgba(244,244,244,.075);stroke-width:1;fill:none}
.t-table{fill:rgba(1,66,95,.55);stroke:rgba(244,244,244,.3);stroke-width:1}
.t-edge{fill:none;stroke:rgba(244,244,244,.6);stroke-width:1}
.t-slab{fill:rgba(1,66,95,.95);stroke:rgba(244,244,244,.3);stroke-width:1}
.t-model{fill:url(#ms-hatch);stroke:var(--accent);stroke-width:1.5}
.t-model.no{stroke:#ff9a7a;stroke-dasharray:6 4}
.t-dim{stroke:var(--accent);stroke-width:1;fill:none}
.t-dim.no{stroke:#ff9a7a}
.t-dim.g{stroke:var(--ink-3)}
.t-ghost{fill:rgba(244,244,244,.04);stroke:var(--ink-3);stroke-dasharray:3 3;stroke-width:1}
.t-txt{font:500 12.5px var(--mono);fill:var(--accent);paint-order:stroke;stroke:var(--surface);stroke-width:6px;stroke-linejoin:round}
.t-txt.no{fill:#ff9a7a}
.t-txt.g{font-weight:300;fill:var(--ink-3)}
.t-txt.n{stroke:none}

/* Maßstabsleiste */
.ms-ruler{grid-area:ruler;min-width:0;margin:0;padding:0;border:0;border-top:1px solid var(--line)}
.ms-scales{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line)}
.ms-step{position:relative;display:grid;gap:7px;align-content:start;padding:18px clamp(14px,1.6vw,22px) 20px;background:var(--surface);cursor:pointer;transition:background-color .25s var(--ease)}
.ms-step::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.ms-step:hover{background:color-mix(in srgb,var(--ink) 3%,var(--surface))}
.ms-step:has(input:checked){background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.ms-step:has(input:checked)::before{transform:none}
.ms-step:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.ms-step input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ms-step .st{min-height:1.25em;font-size:12.5px;color:var(--ink-3)}
.ms-step.rec .st{color:var(--accent);font-weight:500}
.ms-step .s{font:500 clamp(20px,1.8vw,26px)/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ms-step .z{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ms-step.no .s,.ms-step.no .z{color:var(--ink-3)}

/* Ergebnis */
.ms-result{grid-area:result;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"real arrow model cta" "verdict verdict verdict cta";align-items:stretch;gap:10px clamp(16px,2.2vw,32px);padding:clamp(22px,2.6vw,36px) clamp(22px,2.4vw,32px);border-top:1px solid var(--line)}
.ms-num{display:grid;grid-template-rows:auto 1fr;gap:6px;min-width:0}
.ms-num b{align-self:end}
.ms-num:first-child{grid-area:real}
.ms-big{grid-area:model}
.ms-num b{font:400 clamp(1.35rem,2vw,1.75rem)/1.1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ms-big b{font-weight:500;font-size:clamp(1.9rem,3.2vw,2.85rem);letter-spacing:-.03em;color:var(--accent)}
.ms-arrow{grid-area:arrow;align-self:end;width:22px;height:22px;margin-bottom:.55em;color:var(--ink-3)}
.ms-verdict{grid-area:verdict;max-width:60ch;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
#ms-cta{grid-area:cta;align-self:center;min-height:52px;padding:0 24px}
.ms-link{display:inline;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ms-link:hover{color:var(--accent)}

/* Vormerkung in der Anfrage */
.a-prefill{padding:12px 14px;border:1px solid rgba(255,236,0,.35);background:rgba(255,236,0,.06);font-size:14.5px;line-height:1.45;color:var(--ink)}
.a-prefill[hidden]{display:none}

/* Einblenden der Leiste */
@keyframes msIn{from{opacity:0;transform:translateY(8px)}}
.ms.in .ms-step{animation:msIn .7s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms + .15s)}

@media (max-width:1100px){
  .ms-result{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"real arrow model" "verdict verdict verdict" "cta cta cta"}
  #ms-cta{justify-self:start;margin-top:8px}
}
@media (max-width:900px){
  .ms{grid-template-columns:1fr;grid-template-areas:"rail" "draw" "ruler" "result"}
  .ms-rail{border-right:0;border-bottom:1px solid var(--line)}
  .ms-scales{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .ms-num b{white-space:normal}
  .ms-result{grid-template-columns:1fr;grid-template-areas:"real" "model" "verdict" "cta"}
  .ms-arrow{display:none}
  #ms-cta{justify-self:stretch}
  .ms-step{padding:14px 12px 16px}
}
@media (prefers-reduced-motion:reduce){
  .ms.in .ms-step{animation:none}
  .ms-step,.ms-step::before,.ms-row{transition:none}
}