/* ==========================================================================
   Huisman – Entwurf 01 – Seitenansichten der Maschinen
   Zeichnungen aus Entwurf 02 (Kundenwunsch 30.09.2026) in Farben und Schriften
   der Linienführung. Bühne = Planblatt mit Reitern und Plankopf (home.css).
   ========================================================================== */

/* ---------- Zeichnung ---------- */
.sv { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 2px; }
.sv text { font-family: var(--font-mono); }
.sv .sv-ghost { fill: #F4F6F2; stroke: #9AAB9C; stroke-width: 1.8; stroke-linejoin: round; }
.sv .sv-ghost-glass { fill: #fff; stroke: #C4CFC2; stroke-width: 1.2; }
.sv .sv-ghost-tyre { fill: #F4F6F2; stroke: #9AAB9C; stroke-width: 6; }
.sv .sv-ghost-hub { fill: #DCE4D8; }
.sv .sv-ghost-line { fill: none; stroke: #9AAB9C; stroke-width: 1.8; stroke-linecap: round; }
.sv .sv-steel { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.sv .sv-steel-2 { fill: #FFE07A; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.sv .sv-tooth { fill: #26322A; }
.sv .sv-rail { fill: none; stroke: var(--ink); stroke-width: .9; opacity: .45; }
.sv .sv-bolt { fill: var(--ink); }
.sv .sv-chain { fill: none; stroke: var(--ink); stroke-width: 5.5; stroke-dasharray: 3 6.5; }
.sv .sv-auger { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.sv .sv-link { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.sv .sv-pto { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-dasharray: 7 4; }
.sv .sv-ram-rod { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.sv .sv-ram-body { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }
.sv .sv-ram-in { fill: none; stroke: var(--yellow); stroke-width: 6; stroke-linecap: round; }
.sv .sv-grid line { stroke: #E6EEE2; stroke-width: 1; }
.sv .sv-soil-grid { stroke: #D6C7A8; stroke-width: 1; stroke-dasharray: 2 5; }
.sv .sv-turf { stroke: #5FA844; stroke-width: 3.4; }
.sv .sv-ground { stroke: var(--ink); stroke-width: 1.5; }
.sv .sv-gticks line { stroke: var(--ink); stroke-width: 1; opacity: .5; }
.sv .sv-cut-fill { fill: #fff; }
.sv .sv-cut-line { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.sv .sv-ruler-bg { fill: var(--yellow); stroke: rgba(15, 42, 27, .35); stroke-width: 1; }
.sv .sv-ruler line { stroke: var(--ink); stroke-width: 1; }
.sv .sv-ruler-t { font-size: 12px; font-weight: 600; fill: var(--ink); }
.sv .sv-level { stroke: var(--green); stroke-width: 1.2; stroke-dasharray: 6 4; }
.sv .sv-dims { transition: opacity .3s; }
.sv .sv-dim { fill: none; stroke: var(--green); stroke-width: 1.6; }
.sv .sv-dim-head { fill: var(--green); }
.sv .sv-dim-text { font-family: var(--font-display); font-weight: 800; font-size: 36px; fill: var(--green); paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.sv .sv-name { font-family: var(--font-display); font-weight: 900; fill: none; stroke: #CBD9C6; stroke-width: 1.4; letter-spacing: .01em; }
.sv .sv-note { font-size: 10.5px; fill: var(--ink-3); letter-spacing: .06em; }
.sv .sv-lbl-s { font-size: 10.5px; fill: var(--ink-2); letter-spacing: .08em; paint-order: stroke; stroke: #F6F0E3; stroke-width: 4px; stroke-linejoin: round; }
.sv .sv-pipe { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.sv .sv-pipe-in { fill: none; stroke: var(--yellow); stroke-width: 8.5; stroke-linecap: round; stroke-linejoin: round; }
.sv .sv-leader { stroke: var(--ink); stroke-width: 1; }
.sv .sv-anchor-dot { fill: var(--ink); }
.sv .sv-num-dot { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.6; }
.sv .sv-num-txt { font-family: var(--font-display); font-weight: 800; font-size: 17px; fill: var(--ink); }
.sv .sv-model { transition: opacity .35s ease; }
/* AFTraction, Sandbander, Hopper */
.sv .sv-track { fill: #2B3A31; stroke: var(--ink); stroke-width: 1.4; }
.sv .sv-track-wheel { fill: #FFE07A; stroke: var(--ink); stroke-width: 1.2; }
.sv .sv-engine { fill: #DCE4D8; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.sv .sv-sand-heap { fill: #EBD9A6; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.sv .sv-gravel-heap { fill: #E3D2A2; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.sv .sv-sand-flow { fill: none; stroke: #C9AE70; stroke-width: 5; stroke-dasharray: 2 5; stroke-linecap: round; }
.sv .sv-gravel-flow { fill: none; stroke: #A98F58; stroke-width: 7; stroke-dasharray: 3 5; stroke-linecap: round; }
.sv .sv-cut-sand { stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .sv .sv-sand-flow, .sv .sv-gravel-flow { animation: sv-flow .6s linear infinite; }
}
@keyframes sv-flow { to { stroke-dashoffset: -14; } }

/* ---------- Bühne (Planblatt mit Reitern) ---------- */
.sv-stage .plan-sheet { padding: 10px; }
.sv-stage .plan-tab small { white-space: nowrap; }
.sv-caption { margin-top: 12px; font: 400 .76rem/1.45 var(--font-mono); color: var(--ink-3); }

/* Gruppen über den Reitern (Produktübersicht) */
.sv-groups { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sv-group { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font: 600 .82rem/1.2 var(--font-body); color: var(--ink-2); cursor: pointer; }
.sv-group:hover { background: var(--dew); }
.sv-group[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.sv-group small { margin-left: 6px; font: 500 .7rem/1 var(--font-mono); opacity: .7; }

/* Einzelansicht (Detailseiten): Knopf „Noch einmal“ */
.sv-replay { position: absolute; right: 18px; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .92); font: 500 .7rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; }
.sv-replay:hover { background: var(--dew); color: var(--ink); }
.sv-replay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Startseite: Bühne links, Texte rechts */
.sv-feature { grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); align-items: start; }
@media (max-width: 1180px) { .sv-feature { grid-template-columns: minmax(0, 1fr); } .sv-feature .feature-copy { max-width: 760px; } }
.sv-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 18px; border-top: 2px solid var(--ink); }
.sv-copy-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sv-copy-head h3 { font: 900 clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem)/.95 var(--font-display); text-transform: uppercase; }
.sv-copy > p { color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .sv-copy:not([hidden]) { animation: sv-in .45s ease both; }
  .sv-copy:not([hidden]) .range-track i { animation: sv-grow .7s .12s cubic-bezier(.3, .7, .2, 1) both; transform-origin: left center; }
}
@keyframes sv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Zeichnung mit Tiefenregler (AFT-100-Seite) ---------- */
.sv-plate .drawing-scroll .sv { min-width: 640px; }
.sv-ctrl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 14px 6px 4px; }
.sv-ctrl label { font: 500 .74rem/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.sv-ctrl output { text-align: right; font: 800 2rem/1 var(--font-display); color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-angle { grid-column: 1 / -1; font: 400 .76rem/1.4 var(--font-mono); color: var(--ink-3); }
@media (max-width: 560px) {
  .sv-ctrl { grid-template-columns: minmax(0, 1fr) auto; }
  .sv-ctrl input { grid-column: 1 / -1; grid-row: 2; }
}