/* ==========================================================================
   Huisman – Entwurf 01 – Vorlagen „Produktwelt“ und „Anwendung“
   Baut auf site.css (Basis), home.css (Plan, Ablauf, Referenzliste, Chips)
   und product.css (Brotkrumen, Tabellen, FAQ, Abschluss-Band) auf.
   ========================================================================== */

.t-hero-grid > *, .kvr > *, .model > *, .levels > *, .calc > *, .causes > *, .t-refs > *, .fill-row > *, .finder-filters > * { min-width: 0; }

/* ---------- Seitenkopf für Welt- und Anwendungsseiten ---------- */
.t-hero { position: relative; padding-block: 16px clamp(36px, 5vw, 64px); }
.t-title {
  margin-top: 14px; max-width: 17ch;
  font: 900 clamp(2.7rem, 1rem + 5.4vw, 6.6rem)/.94 var(--font-display);
  text-transform: uppercase; letter-spacing: .004em; overflow-wrap: anywhere;
}
.t-title .u { position: relative; display: inline-block; color: var(--green); }
.t-hero-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(26px, 4vw, 60px); align-items: start; margin-top: clamp(22px, 3.2vw, 38px); }
.t-hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; }
.t-hero-copy .lead { max-width: 50ch; }
.t-hero-copy .p-keyfacts b { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); }
@media (max-width: 1080px) { .t-hero-grid { grid-template-columns: 1fr; } }

.t-figure .plan-sheet { padding: 10px; }
.t-sheet-note { margin-top: 10px; font: 400 .74rem/1.4 var(--font-mono); color: var(--ink-3); }

/* ---------- Zeichnung „Grabenprofile“ (Produktwelt) ---------- */
.pf-svg { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 2px; background: #fff; }
.pf-svg text { font-family: var(--font-mono); }
.pf-svg .pf-name { font-family: var(--font-display); font-weight: 800; font-size: 25px; fill: var(--ink); letter-spacing: .01em; }
.pf-svg .pf-meta { font-size: 10.5px; fill: var(--ink-2); letter-spacing: .08em; }
.pf-svg .pf-dim { font-size: 12px; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.pf-svg .pf-depth { font-family: var(--font-display); font-weight: 800; font-size: 24px; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.pf-svg .pf-frame { font-size: 10px; fill: var(--ink-3); letter-spacing: .1em; }
.pf-svg .pf-tape { font-size: 10px; font-weight: 600; fill: var(--ink); }
.pf-model { cursor: pointer; transition: opacity .35s ease; }
.pf-model:focus { outline: none; }
.pf-model .pf-cut { fill: #FFF3C4; stroke: var(--ink); stroke-width: 1.6; transition: fill .25s; }
.pf-model .pf-ring { fill: none; stroke: transparent; stroke-width: 3; }
.pf-model:hover .pf-cut, .pf-model.is-hover .pf-cut, .pf-model:focus-visible .pf-cut { fill: var(--yellow); }
.pf-model:focus-visible .pf-ring { stroke: var(--green); }
.pf-model.is-dim { opacity: .2; }
@media (max-width: 600px) {
  .pf-svg .pf-meta, .pf-svg .pf-dim, .pf-svg .pf-frame { display: none; }
  .pf-svg .pf-name { font-size: 30px; }
  .pf-svg .pf-depth { font-size: 32px; }
  .pf-svg .pf-tape { font-size: 15px; }
}

/* ---------- Kette oder Rad ---------- */
.kvr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .kvr { grid-template-columns: 1fr; } }
.kvr-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; padding: clamp(18px, 2.8vw, 30px); border: 1px solid var(--line-2); border-radius: 22px; background: #fff; }
.kvr-svg { width: 100%; height: auto; border-radius: 12px; background: var(--dew); }
.kvr-svg text { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-2); letter-spacing: .06em; }
.kvr-card h3 { font: 800 var(--fs-l)/1 var(--font-display); text-transform: uppercase; hyphens: auto; -webkit-hyphens: auto; }
.tick-list { display: grid; border-top: 1px solid var(--line); }
.tick-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .97rem; }
.tick-list svg { width: 18px; height: 18px; color: var(--green); margin-top: 3px; }
.tick-list b { color: var(--ink); }
.rule-of-thumb { margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 16px 20px; background: var(--yellow); border-radius: 14px; }
.rule-of-thumb b { font: 800 1.35rem/1 var(--font-display); text-transform: uppercase; }
.rule-of-thumb span { font-weight: 600; }
@media (max-width: 560px) { .rule-of-thumb { grid-template-columns: 1fr; } }

/* ---------- Modellfinder mit PS-Wegweiser ---------- */
.finder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(18px, 2.6vw, 34px); align-items: start; margin-bottom: clamp(20px, 3vw, 34px); }
.finder-grid > * { min-width: 0; }
.finder-grid .finder { margin-bottom: 0; }
.finder-grid .finder-filters { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1081px) { .finder-grid .pf-figure { position: sticky; top: calc(var(--header-h) + 72px); } }
@media (max-width: 1080px) { .finder-grid { grid-template-columns: minmax(0, 1fr); } }
.finder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: clamp(18px, 2.6vw, 30px); margin-bottom: clamp(20px, 3vw, 34px); background: #fff; border: 1px solid var(--line-2); border-radius: 22px; box-shadow: var(--shadow-1); }
.finder-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.finder-head label { font: 600 1.02rem/1.2 var(--font-body); }
.finder-head output { font: 800 clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }

.ps-scale { --lc: 160px; --gap: 16px; --p: .5; display: grid; gap: 10px; }
.ps-row { display: grid; grid-template-columns: var(--lc) minmax(0, 1fr); gap: var(--gap); align-items: center; transition: opacity .3s; }
.ps-lbl { display: grid; gap: 3px; min-width: 0; }
.ps-lbl b { font: 800 1.2rem/1 var(--font-display); text-transform: uppercase; transition: color .2s; }
.ps-lbl small { font: 500 .7rem/1.25 var(--font-mono); color: var(--ink-3); letter-spacing: .03em; }
.ps-ruler input[type="range"]::-webkit-slider-thumb { background: #fff; border-color: var(--ink); box-shadow: 0 2px 8px rgba(15, 42, 27, .35); }
.ps-ruler input[type="range"]::-moz-range-thumb { background: #fff; }
.ps-ruler {
  position: relative; height: 58px; border-radius: 6px; border: 1px solid rgba(15, 42, 27, .3);
  background-color: var(--yellow);
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px calc(100% / 16)),
    repeating-linear-gradient(90deg, rgba(15, 42, 27, .7) 0 1px, transparent 1px calc(100% / 32));
  background-size: 100% 15px, 100% 8px; background-repeat: no-repeat;
}
.ps-nums { position: absolute; inset: 0; pointer-events: none; }
.ps-nums i { position: absolute; top: 17px; transform: translateX(-50%); font: 600 .7rem/1 var(--font-mono); font-style: normal; color: var(--ink); }
.ps-ruler input[type="range"] { position: absolute; left: -14px; right: -14px; bottom: 0; width: calc(100% + 28px); height: 34px; margin: 0; }
.ps-ruler input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.ps-ruler input[type="range"]::-moz-range-track { background: transparent; }
.ps-ruler input[type="range"]::-moz-range-progress { background: transparent; }
.ps-rows { position: relative; display: grid; gap: 10px; }
.ps-track { position: relative; height: 26px; border-bottom: 1.5px solid var(--line-2); }
.ps-bar { position: absolute; top: 3px; height: 18px; border-radius: 4px; background: var(--dew-2); border: 1.5px solid var(--line-2); transition: background-color .25s, border-color .25s; }
.ps-bar.open { border-right: 0; border-radius: 4px 0 0 4px; -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.ps-ideal { position: absolute; top: 3px; height: 18px; border-radius: 3px; background: repeating-linear-gradient(135deg, rgba(11, 122, 62, .32) 0 5px, transparent 5px 10px); pointer-events: none; }
.ps-free { font: 500 .78rem/1.3 var(--font-mono); color: var(--ink-2); }
.ps-row.is-free .ps-track { display: flex; align-items: center; border-bottom-style: dashed; }
.ps-row.is-fit .ps-bar { background: var(--green); border-color: var(--green); }
.ps-row.is-fit .ps-ideal { background: repeating-linear-gradient(135deg, rgba(255, 203, 5, .75) 0 5px, transparent 5px 10px); }
.ps-row.is-fit .ps-lbl b { color: var(--green); }
.ps-row.is-out { opacity: .45; }
.ps-marker {
  position: absolute; top: -12px; bottom: -4px; width: 2px; background: var(--ink); pointer-events: none;
  left: calc(var(--lc) + var(--gap) + (100% - var(--lc) - var(--gap)) * var(--p)); transform: translateX(-1px);
  opacity: 0; transition: opacity .25s;
}
.ps-marker.on { opacity: 1; }
.ps-say { font-size: .98rem; color: var(--ink-2); min-height: 1.6em; }
.ps-say b { color: var(--ink); }
@media (max-width: 620px) {
  .ps-scale { --lc: 104px; --gap: 10px; }
  .ps-lbl b { font-size: 1rem; }
  .ps-lbl small { font-size: .64rem; }
  .ps-nums i.minor { display: none; }
}

.finder-filters { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 18px 32px; align-items: start; }
@media (max-width: 900px) { .finder-filters { grid-template-columns: minmax(0, 1fr); } }
.finder-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.finder-group legend { font: 600 .95rem/1.2 var(--font-body); padding: 0; margin-bottom: 10px; }
.finder-result { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); font: 500 .8rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.text-btn { background: none; border: 0; padding: 0; cursor: pointer; font: 600 .95rem/1.2 var(--font-body); color: var(--green); text-transform: none; letter-spacing: 0; }
.text-btn:hover { text-decoration: underline; }

/* ---------- Modellzeilen ---------- */
.model-list { border-bottom: 1px solid var(--line-2); }
.model {
  position: relative; display: grid; grid-template-columns: 116px minmax(0, 1fr) minmax(0, 330px); gap: clamp(18px, 3vw, 40px);
  align-items: start; padding: 28px 0; border-top: 1px solid var(--line-2);
  transition: opacity .3s ease; scroll-margin-top: calc(var(--header-h) + 70px);
}
.model.is-dim { opacity: .34; }
.model:target { background: linear-gradient(90deg, rgba(255, 203, 5, .18), transparent 60%); }
.model-draw svg { width: 100%; height: auto; }
.model-draw text { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); }
.model-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.model-kicker { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font: 500 .74rem/1.3 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.model-main h3 { font: 800 clamp(2.2rem, 1.5rem + 2vw, 3.3rem)/.95 var(--font-display); text-transform: uppercase; }
.model-main p { color: var(--ink-2); max-width: 62ch; }
.fit { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 4px; border-radius: 999px; background: var(--green); color: #fff; font: 600 .66rem/1 var(--font-mono); letter-spacing: .08em; }
.fit svg { width: 12px; height: 12px; }
.model-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-2); }
.facts-grid div { padding: 11px 0 10px; border-bottom: 1px solid var(--line-2); min-width: 0; }
.facts-grid div:nth-child(odd) { padding-right: 12px; border-right: 1px solid var(--line-2); }
.facts-grid div:nth-child(even) { padding-left: 14px; }
.facts-grid dt { font: 500 .66rem/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.facts-grid dd { margin: 0; font: 800 1.35rem/1.05 var(--font-display); overflow-wrap: anywhere; }
.model-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.soon { font: 500 .76rem/1.3 var(--font-mono); color: var(--ink-3); letter-spacing: .03em; }
@media (max-width: 1000px) { .model { grid-template-columns: 92px minmax(0, 1fr); } .model-side { grid-column: 2; } }
@media (max-width: 600px) { .model { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 22px 0; } .model-side { grid-column: 1 / -1; } }

/* ---------- Karten „Anwendungen“ ---------- */
.app-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .app-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .app-links { grid-template-columns: minmax(0, 1fr); } }
.app-link { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line-2); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.app-link:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.app-link > svg { width: 34px; height: 34px; color: var(--green); }
.app-link b { font: 800 1.55rem/1 var(--font-display); text-transform: uppercase; }
.app-link > span { color: var(--ink-2); font-size: .95rem; }
.app-link .go { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; font-weight: 600; font-size: .92rem; color: var(--green); }
.app-link .go svg { width: 16px; height: 16px; }
.app-link.is-live { box-shadow: inset 0 4px 0 var(--yellow); border-color: var(--line-2); }
.app-link.is-soon .go { font: 500 .74rem/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- Referenzen ---------- */
.t-refs { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .t-refs { grid-template-columns: minmax(0, 1fr); } }
.t-refs > :only-child { grid-column: 1 / -1; max-width: 760px; }   /* Livefassung ohne Platzhalter-Referenz */
.ref-case { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: #fff; border: 1.5px dashed var(--line-2); }
.ref-case h3 { font: 800 var(--fs-m)/1.05 var(--font-display); text-transform: uppercase; }
.ref-case p { color: var(--ink-2); font-size: .95rem; }
.ref-case .facts-grid dd { color: var(--ink-3); }
.t-refs .refs-title { margin-top: 12px; }

/* ==========================================================================
   Anwendungsseite
   ========================================================================== */

/* ---------- Blockbild „Schnitt durch den Platz“ ---------- */
.bk-svg { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 2px; background: #fff; }
.bk-svg text { font-family: var(--font-mono); }
.bk-svg .bk-lbl { font-size: 13px; font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 4.5px; stroke-linejoin: round; }
.bk-svg .bk-lbl-s { font-size: 11px; fill: var(--ink-2); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.bk-svg .bk-frame { font-size: 10px; fill: var(--ink-3); letter-spacing: .1em; }
.bk-svg .bk-leader { fill: none; stroke: var(--ink); stroke-width: 1; }
.bk-svg .bk-dot { fill: var(--ink); }
@media (max-width: 600px) { .bk-svg .bk-lbl, .bk-svg .bk-lbl-s, .bk-svg .bk-leader, .bk-svg .bk-dot, .bk-svg .bk-frame { display: none; } }
.bk-only1, .bk-from2, .bk-from3 { transition: opacity .7s ease; }
.bk-svg[data-stage="2"] .bk-only1, .bk-svg[data-stage="3"] .bk-only1 { opacity: 0; }
.bk-svg[data-stage="1"] .bk-from2 { opacity: 0; }
.bk-svg:not([data-stage="3"]) .bk-from3 { opacity: 0; }
.bk-puddle { transform-box: fill-box; transform-origin: center; transition: transform .9s ease, opacity .9s ease; }
.bk-svg[data-stage="2"] .bk-puddle { transform: scale(.62); }
.bk-svg[data-stage="2"] .bk-puddle.p-edge { transform: scale(.25); opacity: 0; }
.bk-svg[data-stage="3"] .bk-puddle { transform: scale(.2); opacity: 0; }
.bk-drain { transition: stroke-dashoffset 1.2s ease; }
@media (prefers-reduced-motion: no-preference) {
  .bk-rain line { animation: bk-fall 1.15s linear infinite; }
  .bk-drop { animation: bk-drip 2.4s ease-in infinite; }
}
@keyframes bk-fall { from { transform: translate(6px, -26px); opacity: 0; } 20% { opacity: 1; } to { transform: translate(-6px, 26px); opacity: 0; } }
@keyframes bk-drip { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(var(--dy, 40px)); opacity: 0; } }

/* ---------- Ursachen ---------- */
.causes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .causes { grid-template-columns: minmax(0, 1fr); } }
.cause { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line-2); }
.cause-svg { width: 100%; height: auto; border-radius: 10px; background: var(--dew); }
.cause-svg text { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-2); letter-spacing: .06em; }
.cause-num { font: 500 .72rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.cause h3 { font: 800 1.65rem/1 var(--font-display); text-transform: uppercase; }
.cause p { color: var(--ink-2); font-size: .96rem; }
.consequence { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.consequence > b { font: 800 1.3rem/1 var(--font-display); text-transform: uppercase; margin-right: 4px; }

/* ---------- Verfahren (zwei Ebenen) ---------- */
.levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .levels { grid-template-columns: minmax(0, 1fr); } }
.level { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; padding: clamp(18px, 2.8vw, 30px); border-radius: 22px; background: #fff; border: 1px solid var(--line-2); }
.level-svg { width: 100%; height: auto; border-radius: 12px; background: var(--dew); }
.level-svg text { font-family: var(--font-mono); font-size: 11px; fill: var(--ink); paint-order: stroke; stroke: var(--dew); stroke-width: 4px; stroke-linejoin: round; }
.level h3 { font: 800 clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem)/1 var(--font-display); text-transform: uppercase; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.level > p { color: var(--ink-2); }
.fill-row { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr) auto; gap: 18px 30px; align-items: center; padding: clamp(18px, 2.6vw, 28px); border-radius: 22px; background: var(--sand); border: 1px solid var(--sand-2); }
.fill-svg { width: 100%; max-width: 300px; height: auto; border-radius: 12px; background: #fff; border: 1px solid var(--sand-2); }
.fill-row h3 { font: 800 var(--fs-m)/1.05 var(--font-display); text-transform: uppercase; margin-top: 8px; }
.fill-row p { color: var(--ink-2); }
@media (max-width: 980px) { .fill-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Schlitzmeter-Rechner ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.calc-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: clamp(18px, 2.8vw, 30px); border-radius: 22px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.calc-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-form legend { font: 600 .95rem/1.2 var(--font-body); padding: 0; margin-bottom: 10px; }
.calc-dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field .unit { position: relative; }
.field .unit input { padding-right: 44px; }
.field .unit span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 500 .85rem/1 var(--font-mono); color: var(--ink-3); pointer-events: none; }
.calc-sheet { position: relative; display: grid; gap: 0; padding: clamp(18px, 2.6vw, 28px); background: #fff; border: 1.5px solid var(--ink); border-radius: 4px; }
.calc-sheet-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.calc-sheet-head b { font: 800 1.5rem/1 var(--font-display); text-transform: uppercase; }
.calc-sheet-head span { font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.calc-out { margin: 0; }
.calc-out > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line-2); }
.calc-out dt { font: 500 .74rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.calc-out dd { margin: 0; text-align: right; font: 900 clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.calc-out small { grid-column: 1 / -1; font-size: .86rem; color: var(--ink-3); }
.calc-out .hl dd { color: var(--green); }
.calc-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 18px; }
.calc-sheet .data-note { margin-top: 14px; }
@media (max-width: 420px) { .calc-dims { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Maschinen je Arbeitsgang ---------- */
.m-group + .m-group { margin-top: clamp(28px, 3.5vw, 44px); }
.m-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.m-group-head h3 { font: 800 clamp(1.6rem, 1.2rem + 1vw, 2.1rem)/1 var(--font-display); text-transform: uppercase; }
.m-group-head span { font: 500 .76rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.m-grid > * { min-width: 0; }
.m-grid .chip { white-space: normal; line-height: 1.3; }