/* =====================================================================
   Einlasskanal im Schnitt (pv-)
   Konstruktionszeichnung trifft Produktdesign: Zylinderkopf im Schnitt A–A
   mit Schraffur nach ISO 128, Strich-Punkt-Mittellinien, Positionsnummern,
   Stückliste und Schriftfeld. Ölkohle als poröse Filtertextur, Strömung als
   Partikel. Ein einziger roter Signalpunkt markiert die kritische Stelle.
   Zwei Ebenen: unten gestrahlt, oben verkokt, per clip-path beschnitten.
   Animiert werden nur transform, opacity und clip-path.
   Ort: Detail-Kachel der Simulationen (#portSim im Dialog, sims.js) und
   als leichte Vorschau (.pv.pv-p, von port.js in die Kachel gesetzt).
   Raster der Detail-Kachel: ab 1000 px zweispaltig (Zeichnung mit
   Bildunterschrift links, Stückliste, Messwerte und Schriftfeld rechts),
   darunter einspaltig.
   ===================================================================== */
.pv{
  /* Zeichnung, dunkel: Nothing-Schwarz mit Haarlinien */
  --pv-paper:#090b0e;
  --pv-ink:#d2d9e2;
  --pv-ink2:#7e8794;
  --pv-hatch:rgba(210,217,226,.22);
  --pv-mat:#10141a;
  --pv-mat2:#141920;
  --pv-part:#1b2028;
  --pv-steel-0:#242a32;
  --pv-steel-1:#7b8794;
  --pv-steel-2:#e2e8ef;
  --pv-coke:#2a1f16;
  --pv-coke-hi:#a47a50;
  --pv-coke-sh:#ffe3c2;
  --pv-shine:color-mix(in srgb,var(--acc) 70%,transparent);
  --pv-flow:var(--acc);
  --pv-flow-k:color-mix(in srgb,var(--acc) 62%,var(--pv-coke-hi));
  --pv-grid:rgba(210,217,226,.07);
  /* Signalrot nach Nothing: bewusste Ausnahme zur Akzentfarbe, nur einmal im Bild */
  --pv-red:#ff3131;
  --pv-k:1;
  margin:0;display:flex;flex-direction:column;gap:14px;min-width:0;
}
:root[data-theme="light"] .pv{
  /* Zeichnung, hell: Papierweiß wie ein Plotterblatt */
  --pv-paper:#fbfbf9;
  --pv-ink:#1a1e24;
  --pv-ink2:#5f6672;
  --pv-hatch:rgba(26,30,36,.32);
  --pv-mat:#f2f3f4;
  --pv-mat2:#eaecef;
  --pv-part:#e2e6ea;
  --pv-steel-0:#5c6671;
  --pv-steel-1:#aeb8c3;
  --pv-steel-2:#fcfdfd;
  --pv-coke:#36271b;
  --pv-coke-hi:#b48a5c;
  --pv-coke-sh:#fff1de;
  --pv-shine:color-mix(in srgb,var(--acc) 55%,transparent);
  --pv-grid:rgba(26,30,36,.075);
  --pv-red:#d71921;
}

/* ---------- Detail-Kachel: Kopf über der Figur ---------- */
.pv-sim{display:flex;flex-direction:column;gap:16px;min-width:0}
.pv-sh{display:grid;gap:8px var(--pad);min-width:0}
.pv-sh .kicker{margin:0 0 6px}
.pv-h{font-size:clamp(20px,1.7vw,24px)}
.pv-lead{margin:0;font-size:var(--t-p);line-height:1.55;color:var(--fg2);max-width:62ch;text-wrap:pretty}

/* ---------- Vorschau in der Kachel: füllt die .sim-stage, ohne Bedienung ---------- */
.pv.pv-p{position:absolute;inset:0;z-index:1;isolation:isolate;display:block;overflow:hidden;background:var(--pv-paper);pointer-events:none}
/* Papier im Ton der Kachel, damit die drei Vorschauen ruhig nebeneinander stehen */
.sim-stage>.pv-p{--pv-paper:var(--sim-stage,#090b0e)}
.pv-p .pv-dt,.pv-p .pv-bl,.pv-p .pv-sig-ld,.pv-p .pv-cl2,.pv-p .pv-cs{display:none}

/* ---------- Kopfzeile der Figur ---------- */
.pv-hd{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;min-width:0}
.pv-hd-l{display:flex;align-items:center;gap:10px;min-width:0}
.pv-ctl{display:inline-flex;gap:6px}
.pv-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;
  border:1px solid var(--line2);background:var(--surface2);color:var(--fg2);
  font:500 var(--t-micro)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;transition:transform .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
/* Trefferfläche 46 px hoch */
.pv-btn::after{content:"";position:absolute;inset:-5px -3px}
.pv-btn:active{transform:scale(.97)}
.pv-btn i{width:6px;height:6px;border-radius:50%;border:1px solid currentColor;flex:none}
.pv-btn[aria-pressed="true"]{color:var(--fg);border-color:var(--fg2)}
.pv-btn[aria-pressed="true"] i{background:var(--acc);border-color:var(--acc)}
@media (hover:hover) and (pointer:fine){.pv-btn:hover{color:var(--fg);border-color:var(--fg2)}}

/* ---------- Bühne ----------
   Seitenverhältnis gleich der viewBox der jeweiligen Ansicht in port.js (VB_D, VB_M) */
.pv-stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1050/818;border-radius:var(--r-sm);background:var(--pv-paper);
  border:1px solid var(--line);touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.pv.is-compact .pv-stage{aspect-ratio:992/738}
.pv-stage.is-drag,.pv-stage.is-drag *{cursor:ew-resize}
.pv-l{position:absolute;inset:0}
/* eigene Stapelebene: das Etikett „Gestrahlt“ bleibt unter der verkokten Ebene */
.pv-l-clean{z-index:0}
.pv-l,.pv-in{background-color:var(--pv-paper);
  background-image:radial-gradient(var(--pv-grid) 1px,transparent 1.3px);background-size:16px 16px;background-position:8px 8px}
.pv-l-coke{z-index:1;clip-path:inset(0 50% 0 0)}
/* mit Skript: Teiler als Verschiebung (Ebene nach links, Inhalt .pv-in zurück), ohne Neuzeichnen der Filter */
.pv-in{position:absolute;inset:0;will-change:transform}
.pv.is-js .pv-l-coke{clip-path:none;overflow:hidden;background:none;will-change:transform}
.pv-svg,.pv-ov{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;overflow:hidden}
/* Ventilhub: die Ventilgruppe wird als eigene Ebene nur verschoben (Ölkohle-Filter rechnen nicht neu),
   Feder und Signal liegen auf einer eigenen kleinen Ebene darüber */
.pv-vs,.pv-dy{will-change:transform;pointer-events:none}
.pv-ov{z-index:2;pointer-events:none}
.pv-cv{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;pointer-events:none;transition:opacity .3s var(--ease)}
.pv.is-ex .pv-cv{opacity:.12}
.pv-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Seitenetiketten, je in ihrer Ebene beschnitten; im Blatt innerhalb des Rahmens (Rand 3 + Feld 14 + 8 px) */
.pv-side{position:absolute;top:25px;z-index:3;padding:5px 9px;border-radius:999px;background:var(--glass2);border:1px solid var(--glass-line);
  font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);pointer-events:none;white-space:nowrap;
  transition:opacity .2s var(--ease)}
.pv-side.l{left:25px}.pv-side.r{right:25px}
.pv.is-compact .pv-side{top:8px;padding:4px 8px}
.pv.is-compact .pv-side.l{left:8px}.pv.is-compact .pv-side.r{right:8px}
.pv.is-ex .pv-side{opacity:0}
/* Vorschau: unten, oben rechts liegt der Start-Knopf der Kachel */
.pv.pv-p .pv-side{top:auto;bottom:8px}

/* Teiler */
.pv-div{position:absolute;top:0;bottom:0;left:50%;z-index:4;width:0;pointer-events:none;will-change:transform}
.pv.is-js .pv-div{left:0}
.pv-div::before{content:"";position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:var(--acc)}
.pv-grip{position:absolute;top:90%;left:-19px;width:38px;height:38px;margin-top:-19px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass2);border:1px solid var(--acc-line);color:var(--acc);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 22px -10px rgba(3,4,6,.7);transition:transform .16s var(--ease)}
.pv-grip svg{width:20px;height:10px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* kompakt: im Brennraum unter dem Teller; die Vorschau zeigt nur die Linie */
.pv.is-compact .pv-grip{top:93%;left:-15px;width:30px;height:30px;margin-top:-15px}
.pv-p .pv-grip{display:none}
.pv-stage.is-drag .pv-grip{transform:scale(1.08)}
.pv-range{position:absolute;left:0;bottom:0;width:1px;height:1px;margin:0;padding:0;opacity:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pv-range:focus-visible~.pv-div .pv-grip{outline:2px solid var(--acc);outline-offset:3px}

/* ---------- Zeichnung (SVG) ----------
   Linienbreiten nach DIN-Liniengruppe 0,35: breit 1,15 px / schmal 0,6 px auf dem Bildschirm.
   --pv-k rechnet Bildschirm-Pixel in Zeichnungseinheiten um, damit die
   Haarlinien in jeder Größe gleich fein bleiben. Texte stehen in Gruppen,
   die port.js mit --pv-k skaliert: ihre Schriftgrößen sind Bildschirm-Pixel. */
.pv-e{stroke:var(--pv-ink);stroke-width:calc(1.15px * var(--pv-k));stroke-linejoin:round;stroke-linecap:round}
.pv-tn{fill:none;stroke:var(--pv-ink2);stroke-width:calc(.6px * var(--pv-k));stroke-linejoin:round}
.pv-cl{fill:none;stroke:var(--pv-ink2);stroke-width:calc(.6px * var(--pv-k));
  stroke-dasharray:calc(14px * var(--pv-k)) calc(3px * var(--pv-k)) calc(1.6px * var(--pv-k)) calc(3px * var(--pv-k))}
.pv-sec{fill:none;stroke:var(--pv-ink);stroke-width:calc(2px * var(--pv-k));stroke-linecap:butt}
.pv-pm{fill:var(--pv-mat)}.pv-pm2{fill:var(--pv-mat2)}
.pv-ph{fill:none;stroke:var(--pv-hatch);stroke-width:calc(.6px * var(--pv-k))}
.pv-s0{stop-color:var(--pv-steel-0)}.pv-s1{stop-color:var(--pv-steel-1)}.pv-s2{stop-color:var(--pv-steel-2)}
.pv-sol{fill:var(--pv-ink2)}
.pv-part{fill:var(--pv-part)}
.pv-wire,.pv-shaft{fill:var(--pv-steel-1)}
.pv-hid{fill:none;stroke:var(--pv-ink2);stroke-width:calc(.6px * var(--pv-k));stroke-dasharray:calc(5px * var(--pv-k)) calc(2.5px * var(--pv-k))}
.pv-coke{fill:var(--pv-coke)}
.pv-shine{fill:none;stroke:var(--pv-shine);stroke-width:calc(1px * var(--pv-k));stroke-linecap:round}
.pv-dim{fill:none;stroke:var(--pv-ink);stroke-width:calc(.7px * var(--pv-k))}
.pv-ah{fill:var(--pv-ink)}
.pv-dt{font:italic 500 11px var(--mono);fill:var(--pv-ink)}
.pv-dbg{fill:var(--pv-paper);opacity:.86}
.pv-ld{fill:none;stroke:var(--pv-ink2);stroke-width:calc(.6px * var(--pv-k));transition:stroke .2s var(--ease)}
.pv-ldot{fill:var(--pv-ink);transition:fill .2s var(--ease)}
.pv-bc{fill:var(--pv-paper);stroke:var(--pv-ink);stroke-width:1;transition:stroke .2s var(--ease)}
.pv-bt{font:600 10.5px var(--mono);fill:var(--pv-ink);font-variant-numeric:tabular-nums;transition:fill .2s var(--ease)}
.pv-blab{font:500 10px var(--mono);letter-spacing:.1em;fill:var(--pv-ink);opacity:0;transition:opacity .2s var(--ease)}
/* Verknüpfung mit der Stückliste */
.pv-bal.is-hl .pv-ld{stroke:var(--acc)}
.pv-bal.is-hl .pv-ldot,.pv-bal.is-hl .pv-bt{fill:var(--acc)}
.pv-bal.is-hl .pv-bc{stroke:var(--acc)}
.pv-bal.is-hl .pv-blab{opacity:1}
.pv-tk{font:500 10px var(--mono);letter-spacing:.16em;fill:var(--pv-ink2)}
.pv-aa{font:850 24px var(--dots);fill:var(--pv-ink);letter-spacing:.02em}
.pv-sc{font:500 10px var(--mono);letter-spacing:.04em;fill:var(--pv-ink2)}
.pv-bl{font:850 15px var(--dots);fill:var(--pv-ink)}
.pv-fr{fill:none;stroke:var(--pv-ink2);stroke-width:calc(.6px * var(--pv-k))}
.pv-fr2{fill:none;stroke:var(--pv-ink);stroke-width:calc(1.1px * var(--pv-k))}
.pv-zn{font:500 10px var(--mono);fill:var(--pv-ink2);letter-spacing:.04em}
.pv-cl2{font:600 10.5px var(--mono);letter-spacing:.14em;fill:var(--pv-ink)}
.pv-cs{font:500 10px var(--mono);letter-spacing:.04em;fill:var(--pv-ink2)}
.pv-halo{paint-order:stroke fill;stroke:var(--pv-paper);stroke-width:3.5px;stroke-linejoin:round}
.pv-sig{fill:var(--pv-red)}
.pv-sig-r{fill:none;stroke:var(--pv-red);stroke-width:1;transform-box:fill-box;transform-origin:center;opacity:0}
.pv.is-live .pv-sig-r{animation:pv-ping 2.8s var(--ease) infinite}
@keyframes pv-ping{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(2.4);opacity:0}}
.pv.is-compact .pv-title,.pv.is-compact .pv-cs{display:none}

/* Explosionsansicht: Bauteile fahren entlang der Ventilachse auseinander. Wege so, dass auch bei
   vollem Hub der Teller über dem Kolben und bei geschlossenem Ventil die Keile im Rahmen bleiben */
.pv-m{transition:transform .3s var(--ease-io),opacity .3s var(--ease)}
.pv.is-ex .pv-m-keep{transform:translateY(-56px)}
.pv.is-ex .pv-m-ret{transform:translateY(-44px);transition-delay:30ms}
.pv.is-ex .pv-m-spring{transform:translateY(-28px);transition-delay:60ms}
.pv.is-ex .pv-m-guide{transform:translateY(-14px);transition-delay:90ms}
.pv.is-ex .pv-l .pv-m-guide{opacity:.55}
.pv.is-ex .pv-m-valve{transform:translateY(28px)}
/* kompakter Ausschnitt: kürzere Wege, die Keile bleiben im Bild */
.pv.is-compact.is-ex .pv-m-keep{transform:translateY(-44px)}
.pv.is-compact.is-ex .pv-m-ret{transform:translateY(-34px)}
.pv.is-compact.is-ex .pv-m-spring{transform:translateY(-22px)}
.pv.is-compact.is-ex .pv-m-guide{transform:translateY(-11px)}
.pv.is-compact.is-ex .pv-m-valve{transform:translateY(22px)}

/* ---------- Stückliste, Messwerte, Schriftfeld ---------- */
.pv-info{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.pv-cell{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 14px 14px;border-top:1px solid var(--line)}
.pv-cell:first-child{border-top:0}
/* Kopf der Stückliste: Titel links, Legende rechts, die Liste darunter */
.pv-c-bom{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.pv-bom{order:2;flex:1 0 100%;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(6,auto);grid-auto-flow:column;column-gap:20px}
.pv-bom li{display:grid;grid-template-columns:20px minmax(0,1fr) 6px;align-items:center;gap:9px;min-height:26px;padding:2px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;line-height:1.25;color:var(--fg)}
.pv-bn{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--fg2);font:600 10px/1 var(--mono);color:var(--fg);
  font-variant-numeric:tabular-nums;transition:border-color .2s var(--ease),color .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.pv-bom li:hover .pv-bn{border-color:var(--acc);color:var(--acc)}}
.pv-dep{display:block;width:6px;height:6px;border-radius:50%;border:1px solid var(--line2)}
.pv-dep.on{background:var(--fg2);border-color:var(--fg2)}
.pv-legend{order:1;display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;line-height:1.3;color:var(--mut)}
.pv-legend .pv-dep{flex:none}
/* Messwerte nebeneinander, Zahlen auf einer Grundlinie */
.pv-c-met{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
.pv-c-met>.label,.pv-c-met>.pv-note{grid-column:1/-1}
.pv-met{display:flex;flex-direction:column;gap:4px;min-width:0}
.pv-mk{font-size:13px;line-height:1.35;color:var(--fg2)}
.pv-mk2{font-size:12.5px;line-height:1.35;color:var(--mut)}
.pv-mv{display:flex;align-items:baseline;gap:5px;margin:auto 0 0;padding-top:6px}
.pv-mv b{font-size:clamp(30px,2.6vw,38px);color:var(--fg)}
.pv-mv small{font:600 14px/1 var(--mono);color:var(--fg2)}
.pv-mv span{margin-left:4px;font:500 var(--t-micro)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.pv-bar{position:relative;display:block;height:3px;margin-top:4px;border-radius:3px;background:var(--surface3);overflow:hidden}
.pv-bar i{position:absolute;inset:0;border-radius:3px;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--r,1))}
.pv-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--mut)}
.pv-g{font-family:var(--mono);font-size:11.5px;color:var(--fg2);white-space:nowrap}
/* Schriftfeld als Tabelle mit Haarlinien wie auf dem Zeichnungsblatt */
.pv-tb{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:8px;overflow:hidden}
/* Trennlinien als Schatten nach links und oben: unabhängig vom Untergrund der Detail-Kachel */
.pv-tb div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:5px 10px 6px;box-shadow:-1px -1px 0 var(--line)}
.pv-tb div.w{grid-column:1/-1}
.pv-tb dt{font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.pv-tb dd{margin:0;font-size:13.5px;line-height:1.35;color:var(--fg);overflow-wrap:anywhere}
.pv-cap{margin:0;font-size:14px;line-height:1.55;color:var(--fg2);max-width:84ch}

/* Desktop: Zeichnung links (höchstens 608 px, etwa 470 px hoch), Angaben rechts, Bildunterschrift unter der Zeichnung;
   Kopf der Detail-Kachel im selben Spaltenraster */
@media (min-width:1000px){
  .pv-sh{grid-template-columns:minmax(0,min(608px,56%)) minmax(0,1fr);align-items:end}
  .pv-sh .pv-lead{grid-column:2}
  .pv{display:grid;grid-template-columns:minmax(0,min(608px,56%)) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:14px var(--pad)}
  .pv-hd{grid-column:1/-1}
  .pv-stage{grid-column:1;grid-row:2}
  .pv-cap{grid-column:1;grid-row:3;align-self:start}
  .pv-info{grid-column:2;grid-row:2/4}
  .pv-c-tb{flex:1}
  .pv-tb{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pv-tb div.w{grid-column:auto}
  .pv-tb div:nth-child(1){grid-column:1/3}
  .pv-tb div:nth-child(4),.pv-tb div:nth-child(6){grid-column:2/4}
}
/* Tablet: einspaltig, Stückliste über die volle Breite, Messwerte und Schriftfeld nebeneinander */
@media (min-width:641px) and (max-width:999px){
  .pv-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-c-bom{grid-column:1/-1}
  .pv-bom{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto)}
  .pv-c-tb{border-left:1px solid var(--line)}
  .pv-c-met{border-top:1px solid var(--line)}
}
/* Telefon */
@media (max-width:640px){
  .pv-sim{gap:14px}
  .pv{gap:12px}
  .pv-hd-l{flex-wrap:wrap;gap:6px 10px}
  .pv-cell{padding:12px 12px 14px}
  .pv-bom{column-gap:14px}
  .pv-bom li{gap:7px;min-height:32px;font-size:13px}
  .pv-c-met{column-gap:14px}
  .pv-mv b{font-size:28px}
  .pv-mv small{font-size:13px}
  .pv-cap{font-size:15px}
}

/* Weniger Bewegung: keine Positionsbewegung, ruhiges Standbild */
.motion-reduce .pv-m,.motion-reduce .pv-cv,.motion-reduce .pv-grip,.motion-reduce .pv-btn{transition:none!important}
.motion-reduce .pv-sig-r{animation:none!important;opacity:0}