/* ============================================================
   FLOW-AID -- produkt.css
   Bygget af Claude-tools/produkt/build_produkt.py. Ret kilden i
   Claude-tools/produkt/produkt.src.css, ikke denne fil.

   Farverne kommer fra brand.css. Der staar ingen hexvaerdi her ud
   over membranfarverne, som er OLI's egne, og de saettes pr. kort
   som --pr-membran fra datafilen.

   Skriften er sitets egen, IBM Plex Sans, arvet fra shared.css.
   ============================================================ */

.container--smal { max-width: 820px; }

/* ---- hero ------------------------------------------------- */
.pr-hero-sec { padding-top: 1rem; }
.pr-hero__txt h1 { margin: .35rem 0 .6rem; }
.pr-hero__txt .hero__subhead { font-size: 1.12rem; color: var(--text-main); }
.pr-hero__txt .hero__lead { color: var(--text-soft); }
.pr-hero__txt .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }

/* ---- gennemgangen, de fire trin --------------------------- */
.pr-trin { margin-top: 1.5rem; }

.pr-faner__l { list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.pr-fane { display: flex; flex-direction: column; gap: .15rem;
  padding: .85rem 1rem; border: 1px solid var(--border-light);
  border-radius: var(--r-md, 8px); background: var(--bg-main);
  color: var(--text-main); text-decoration: none;
  border-left: 3px solid var(--border-medium); transition: border-color .15s, background .15s; }
.pr-fane:hover { border-color: var(--brand-blue); border-left-color: var(--brand-blue);
  background: var(--bg-soft); text-decoration: none; }
.pr-fane__nr { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--text-meta); }
.pr-fane__t { font-weight: 600; }
.pr-fane__u { font-size: .84rem; color: var(--text-soft); }
.pr-fane[aria-selected="true"] { border-left-color: var(--brand-blue);
  background: var(--bg-soft); border-color: var(--accent-blue); }
.pr-fane[aria-selected="true"] .pr-fane__nr { color: var(--brand-blue); }

.pr-panel { border-top: 1px solid var(--border-light); padding-top: 1.5rem; margin-top: 1.5rem; }
.pr-panel:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.pr-panel__h { display: flex; align-items: baseline; gap: .6rem; font-size: 1.25rem; margin: 0 0 1rem; }
.pr-panel__nr { font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--brand-blue); }
.pr-panel__krop { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 2rem; align-items: start; }
.pr-panel__scene { background: var(--bg-muted); border: 1px solid var(--border-light);
  border-radius: var(--r-md, 8px); padding: 1.1rem; }
.pr-panel__tekst > p:first-child { margin-top: 0; }

/* naar JavaScript er slaaet fra, staar alle fire trin under hinanden
   og hele indholdet kan laeses. Det er med vilje. */
.pr-panel[hidden] { display: none; }

@media (max-width: 900px) {
  .pr-panel__krop { grid-template-columns: 1fr; gap: 1.25rem; }
  .pr-panel__scene { padding: .85rem; }
  .pr-duo { gap: .4rem; }
}
@media (max-width: 560px) {
  .pr-faner__l { grid-template-columns: 1fr 1fr; }
  .pr-panel__h { font-size: 1.12rem; }
}

/* ---- tegningerne ------------------------------------------ */
.pr-svg { width: 100%; height: auto; display: block; color: var(--brand-blue); }
/* 400 og ikke 340: rammen blev 480 x 380 med den nye trin 2-tegning,
   og ved 340 px kom en etiket paa 13 enheder ned paa 9 px paa
   skaermen. Panelet har rigelig plads. */
.pr-svg--skive { max-width: 400px; margin: 0 auto; }
.pr-svg--plan { max-width: 280px; margin: 1rem auto 0; }

.pr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pr-duo__en { min-width: 0; }

.pr-skal   { fill: none; stroke: var(--text-main); stroke-width: 2; stroke-linejoin: round; }
.pr-mat    { fill: #cfc7b5; stroke: none; }
.pr-mat--los { fill: #ded8ca; }
.pr-tom    { fill: var(--bg-main); stroke: none; }
.pr-problem{ fill: none; stroke: #b4341f; stroke-width: 2.4; stroke-linecap: round; }
.pr-aer    { fill: var(--brand-blue); stroke: var(--bg-main); stroke-width: .6; }
.pr-aer-d  { fill: var(--bg-main); }
.pr-luft   { fill: none; stroke: var(--brand-blue); stroke-width: 1.8; stroke-linecap: round; }
.pr-faldt  { fill: none; stroke: var(--text-soft); stroke-width: 2.4; stroke-linecap: round; }
.pr-boks   { fill: var(--bg-main); stroke: var(--text-main); stroke-width: 1.6; }
.pr-boks-i { fill: none; stroke: var(--text-main); stroke-width: 1.4; }
.pr-roer   { fill: none; stroke: var(--text-soft); stroke-width: 1.6; }
/* Overlejringen paa roeret og luftpustene hoerer til HER, sammen med de
   oevrige tegneklasser -- ikke nede i bevaegelsesafsnittet. Da afsnittet
   blev skrevet om 6. august 2026, forsvandt deres fill og stroke med, og
   roerene blev til sorte kiler, fordi en path uden fill er sort. */
.pr-roer--flow { fill: none; stroke: var(--brand-blue); stroke-width: 1.6;
  stroke-dasharray: 7 21; opacity: .8; }
.pr-pust   { fill: none; stroke: var(--brand-blue); stroke-width: 2.6;
  stroke-linecap: round; opacity: 0; }
.pr-pust--svag { stroke: var(--text-meta); stroke-width: 1.8; }
.pr-ventil { fill: var(--bg-main); stroke: var(--text-main); stroke-width: 1.4; }
.pr-styre  { fill: none; stroke: var(--text-meta); stroke-width: 1.2; stroke-dasharray: 4 3; }
.pr-maal   { fill: none; stroke: var(--text-meta); stroke-width: .9; }
.pr-lbl    { fill: var(--text-main); font-family: inherit; }
.pr-lbl--svag { fill: var(--text-meta); }
.pr-skive  { fill: var(--pr-membran, #e8eaec); stroke: var(--text-main);
             stroke-width: 1.6; stroke-linejoin: round; }
.pr-kavitet{ fill: #bcd8ef; stroke: none; }
.pr-tap    { fill: #c9ced4; stroke: var(--text-main); stroke-width: 1.3; }
/* tappen inde i klokken staar bag membranen og skal traede tilbage */
.pr-tap--bag { fill: #d7dbe0; stroke-width: 1.1; }
.pr-slangeteg { fill: none; stroke: var(--text-soft); stroke-width: 2.6;
                stroke-linecap: round; }
/* indsatsen i trin 2: skiven set nedefra */
.pr-inds__bg    { fill: var(--bg-main); stroke: var(--border-light); stroke-width: 1.2; }
.pr-inds__skive { fill: var(--pr-membran, #e8eaec); stroke: var(--text-main);
                  stroke-width: 1.4; }
.pr-inds__lomme { fill: #cdd3d9; stroke: var(--text-soft); stroke-width: .9; }
.pr-inds__nav   { fill: #c9ced4; stroke: var(--text-main); stroke-width: 1.3; }
.pr-plan-skal { fill: none; stroke: var(--text-main); stroke-width: 1.8; }
.pr-plan-ring { fill: none; stroke: var(--text-soft); stroke-width: 1; stroke-dasharray: 5 4; }
.pr-plan-pkt  { fill: var(--brand-blue); }
.pr-plan-udl  { fill: var(--bg-muted); stroke: var(--text-main); stroke-width: 1.4; }

.pr-hot__ring { fill: var(--bg-main); stroke: var(--brand-blue); stroke-width: 2; }
.pr-hot__nr   { fill: var(--brand-blue); font-family: inherit; font-weight: 700; }
.pr-hot--paa .pr-hot__ring { fill: var(--brand-blue); }
.pr-hot--paa .pr-hot__nr { fill: #fff; }

/* ---- membranerne ------------------------------------------ */
.pr-membraner { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.pr-membran { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; }
.pr-membran__prik { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .18rem;
  border-radius: 50%; background: var(--pr-membran); border: 1px solid var(--border-medium); }
.pr-membran__m { color: var(--text-meta); font-size: .84rem; }

.pr-mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem; margin: 1.5rem 0; }
.pr-mkort { position: relative; padding-top: .35rem; }
.pr-mkort__prik { position: absolute; top: 1.15rem; right: 1.25rem; width: 26px; height: 26px;
  border-radius: 50%; background: var(--pr-membran); border: 1px solid var(--border-medium); }
.pr-mkort__temp { font-weight: 600; color: var(--brand-blue); margin: 0 0 .4rem; font-size: .95rem; }
.pr-mkort__mod { font-size: .82rem; color: var(--text-meta); margin: .6rem 0 0; }

/* ---- hotspotlisten ---------------------------------------- */
.pr-hots { margin: 1.1rem 0 0; padding-left: 1.2rem; display: grid; gap: .7rem; font-size: .93rem; }
.pr-hots__i { padding-left: .25rem; }
.pr-hots__i strong { color: var(--text-main); }
.pr-hots__k { display: block; font-size: .78rem; color: var(--text-meta); margin-top: .2rem; }
.pr-hots__i--paa { background: var(--bg-soft); border-radius: var(--r-sm, 4px);
  padding: .5rem .6rem .5rem .35rem; margin-left: -.35rem; }

/* ---- tabeller --------------------------------------------- */
.pr-tabel-wrap { margin: 1.25rem 0 .75rem; }
.pr-tabel-wrap .dimension-table caption { text-align: left; font-size: .84rem;
  color: var(--text-meta); padding-bottom: .5rem; }
.pr-note { font-size: .9rem; color: var(--text-soft); }
.pr-forbehold { font-size: .9rem; color: var(--text-soft); border-left: 3px solid var(--accent-blue);
  padding-left: .85rem; margin: 1.1rem 0 .6rem; }

/* ---- montering -------------------------------------------- */
.pr-kits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.75rem; }
.pr-kit h3 { display: flex; align-items: baseline; gap: .55rem; font-size: 1.08rem; margin: 0 0 .4rem; }
.pr-kit__kode { font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  color: var(--brand-blue); background: var(--bg-soft); padding: .12rem .45rem; border-radius: 3px; }
.pr-kit .spec-table { margin-bottom: .5rem; }

/* ---- afsluttende CTA og forsidekort ----------------------- */
.pr-cta .info-callout h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
.pr-kortlink { font-size: .88rem; font-weight: 600; }

/* ---- print ------------------------------------------------ */
@media print {
  .pr-faner, .back-to-top { display: none; }
  .pr-panel[hidden] { display: block !important; }
  .pr-panel { page-break-inside: avoid; }
}

/* tilfoejet efter foerste gennemsyn i browser.
   BEMAERK: her maa der IKKE staa regler for .pr-panel__krop's spalter.
   De stod her foerst og overskrev media-forespoergslen laengere oppe,
   saa telefoner beholdt to spalter og tegningen blev ulaeselig. */
.pr-luft--svag { stroke: var(--text-meta); stroke-width: 1.2; opacity: .75; }
.pr-aer-t { fill: #9aa4ae; stroke: none; }
.pr-svg--plan { max-width: 300px; }
.pr-duo__en .pr-svg { max-width: 230px; margin: 0 auto; }

/* ============================================================
   Tilfoejet 3. august 2026 efter Thomas' gennemsyn
   ============================================================ */

/* ---- hero-billedet ----------------------------------------
   shared.css saetter .prod-img { max-width:100%; max-height:360px;
   height:auto }. Naar max-height traeder i kraft, bliver hoejden
   beskaaret uden at bredden foelger med, og billedet staar strukket
   paa bredden. width:auto og object-fit retter det. */
.prod-img { width: auto; height: auto; object-fit: contain; }
.prod-img-wrap { min-height: 260px; }

/* ---- skydere ---------------------------------------------- */
.pr-skyder { margin: .9rem 0 .2rem; }
.pr-skyder__lbl { display: block; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-meta);
  margin-bottom: .4rem; }
.pr-skyder__in { width: 100%; accent-color: var(--brand-blue); cursor: grab; }
.pr-skyder__in:active { cursor: grabbing; }
.pr-skyder__in:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; }
.pr-skyder__t { margin: .5rem 0 0; font-size: .95rem; font-weight: 600;
  color: var(--brand-blue); }

/* ---- for og efter ------------------------------------------ */
.pr-delelinje { stroke: var(--text-main); stroke-width: 1.4; opacity: .5;
  stroke-dasharray: 6 5; }
.pr-svg--wipe { max-width: 380px; margin: 0 auto; }

/* ---- placeringen, snit og plan ved siden af hinanden ------- */
.pr-plac { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: .5rem; align-items: center; }
@media (max-width: 640px) { .pr-plac { grid-template-columns: 1fr; } }
.pr-ring--skjult { display: none; }

/* ---- vaeggen i trin 2 -------------------------------------- */
.pr-vaeg { fill: #b9c0c7; stroke: var(--text-main); stroke-width: 1.4; }
.pr-fluid { fill: var(--brand-blue); opacity: 0; }
/* spalten ved randen. Staar usynlig i hvile og kommer frem i takt med
   membranens loeft, saa den ikke laeses som en fast prik paa vaeggen. */
.pr-spalte { fill: var(--brand-blue); opacity: 0; }

/* ---- bevaegelse --------------------------------------------
   FORMAALET ER FORSTAAELSE, IKKE PYNT. En laeser forstaar en tegning
   hurtigere, naar noget flytter sig i en RETNING: luften fra padden mod
   udloebet, materialet ned gennem keglen, kornene ud af slusen. Noget,
   der bare aander paa stedet, laeses som venten.
   Alle takter er derfor korte. Er de for lange, naar oejet at holde op
   med at kigge, foer der er sket noget, og saa virker tegningen doed.
   Thomas bad om det 6. august 2026.

   BEMAERK: her er ingen prefers-reduced-motion-blok og ingen knap.
   Bevaegelsen koerer altid. Det er et bevidst valg -- se
   claude/bevaegelse-i-tegningerne.md for hvad det betyder for
   tilgaengelighedserklaeringen. */

/* pilene og ventilerne: de aander stadig, men hurtigt, og de er kun
   akkompagnement til det, der rejser */
@keyframes pr-puls   { 0%,100% { opacity:.3 } 45% { opacity:1 } }
@keyframes pr-blink  { 0%,100% { fill: var(--bg-main) } 40% { fill: var(--brand-blue) } }
@keyframes pr-drej   { to { transform: rotate(360deg) } }
@keyframes pr-pop    { 0% { transform: scale(.2); opacity:0 } 60% { transform: scale(1.15) }
                       100% { transform: scale(1); opacity:1 } }

/* MATERIALET UD. Kornene falder hele faldhoejden og fortsaetter ud af
   billedet. --fald saettes pr. korn, saa den samme regel virker baade
   under studsen i trin 01 og under celleslusen i trin 03. */
@keyframes pr-fald   { 0%   { transform: translateY(0); opacity:0 }
                       10%  { opacity:.95 }
                       82%  { opacity:.9 }
                       100% { transform: translateY(var(--fald, 52px)); opacity:0 } }

/* MATERIALET I KEGLEN. Driver ned mod udloebet i stedet for at vippe. */
@keyframes pr-drift  { 0%   { opacity:0; transform: translate(0,0) }
                       18%  { opacity:.5 }
                       70%  { opacity:.34 }
                       100% { opacity:0; transform: translate(var(--dx), var(--dy)) } }

/* LUFTEN. Et pust, der glider vaek og fader. */
@keyframes pr-pust   { 0%   { opacity:0; transform: translate(0,0) }
                       14%  { opacity:.95 }
                       58%  { opacity:.6 }
                       100% { opacity:0; transform: translate(var(--dx), var(--dy)) } }

/* SLAGET. En hammer aander ikke -- den rammer. Kurven er derfor
   naesten helt nede og springer op i seks procent af omloebet, saa
   oejet laeser eet slag og ikke en pulseren. Det er den samme
   forskel som mellem et pust og et aandedraet. */
@keyframes pr-slag   { 0%,100% { opacity:.10 } 5% { opacity:1 }
                       24% { opacity:.10 } }

/* SLAGET GENNEM GODSET. Fronten staar stille, til slaget falder, og
   rejser saa ind i materialet. --dx og --dy saettes pr. front, saa
   den samme regel virker paa begge keglevaegge. */
@keyframes pr-front  { 0%   { opacity:0; transform: translate(0,0) }
                       6%   { opacity:.9 }
                       46%  { opacity:.45 }
                       100% { opacity:0; transform: translate(var(--dx), var(--dy)) } }

@keyframes pr-f-puls { 0%   { opacity:0 }
                      14%  { opacity:.85 }
                      62%  { opacity:.28 }
                      100% { opacity:0 } }
/* Stemplet FLYDER. Udsvinget er 5 px paa et ark, hvor den korteste
   luftpude er 66 px, saa det kan ikke naa enden. Det er hele pointen:
   der er ingen metallisk anslag, og derfor 80 dB(A). */
@keyframes pr-f-stempel { 0%,100% { transform: translateX(-5px) }
                          50%     { transform: translateX(5px) } }

/* LUFTEN I ROERET. */
@keyframes pr-flow   { to { stroke-dashoffset: -28 } }

/* SEKVENSEN I TRIN 03. Tre ringe, eet forloeb paa 3 s, eet sekund til
   hver. Rytmen er den, styringen koerer: nederste ring foerst, saa
   materialet altid har et frit udloeb at falde imod. */
@keyframes pr-sekvens     { 0% { opacity:.2 } 6% { opacity:1 }
                            28% { opacity:1 } 34%,100% { opacity:.2 } }
@keyframes pr-sek-ventil  { 0%,100% { fill: var(--bg-main) }
                            6%, 28%  { fill: var(--brand-blue) }
                            34%      { fill: var(--bg-main) } }

/* MEMBRANEN I TRIN 02. Randen loefter sig, fordi hele skiven skaleres
   2,8 procent mod sin egen haette -- haetten er boltet fast, randen er
   fri. Samme takt som pustet, saa randen slipper og luften loeber i
   samme aandedrag. */
@keyframes pr-membran{ 0%,62%,100% { transform: scaleY(1) }
                       26%         { transform: scaleY(.972) } }
@keyframes pr-spalte { 0%,60%,100% { opacity:0; transform: scale(.4) }
                       28%         { opacity:.3; transform: scale(1) } }

/* HVORFOR DER STAAR !important PAA HVER ENESTE AF DEM.

   shared.css indeholder den udbredte "safe defaults"-blok:

     @media (prefers-reduced-motion: reduce) {
       *, ::before, ::after { animation-duration: .01ms !important;
                              animation-iteration-count: 1 !important; ... } }

   Den rammer med stjerne OG !important, saa ingen specificitet i dette
   stilark kan naa den. Paa en maskine, der beder om mindre bevaegelse --
   og det goer Thomas' -- blev hver eneste af tegningernes animationer
   derfor klemt til 0,01 ms og koert EEN gang. Maalt i hans egen Chrome
   6. august 2026 paa den uploadede side: "pr-pust 1e-05s 1". Det er
   praecis den fejl, han beskrev: for langsomt, og det gentager sig ikke.
   Det var ALDRIG et Playwright-artefakt; det var den rigtige aarsag.

   Thomas har 6. august 2026 valgt at se bort fra WCAG 2.2 AA paa netop
   dette punkt: tegningerne SKAL bevaege sig, fordi de forklarer en
   RETNING -- luft ind, materiale ud -- og en stillestaaende streg
   forklarer ingen retning. !important overtrumfer nulstillingen for
   praecis disse klasser og roerer ikke noget andet paa sitet.

   Varigheden staar KUN her. Bliver den gentaget i en ekstra blok inde i
   en media query, driver de to fra hinanden -- det er sket foer. */
/* OG HVORFOR DER STAAR LANGE NAVNE I STEDET FOR DEN KORTE animation:.
   Kortformen nulstiller ALLE animation-*-egenskaber, ogsaa dem den ikke
   naevner -- herunder animation-delay. Med !important paa kortformen slaar
   den samtidig kornenes egne style="animation-delay:-0,06s" ihjel, fordi
   !important i et stilark vejer tungere end en almindelig inline-stil.
   Resultatet var en klump korn, der faldt samlet i stedet for en stroem.
   Set paa et billede 6. august 2026, ikke i koden. Derfor faar kun de to
   egenskaber, shared.css overskriver, !important. */
.pr-luft--puls   { animation-name: pr-puls; animation-timing-function: ease-in-out;
  animation-duration: 1s !important; animation-iteration-count: infinite !important; }
.pr-luft--sek    { animation-name: pr-sekvens; animation-timing-function: linear;
  animation-duration: 2.1s !important; animation-iteration-count: infinite !important; }
.pr-ventil--puls { animation-name: pr-blink; animation-timing-function: ease-in-out;
  animation-duration: 1s !important; animation-iteration-count: infinite !important; }
.pr-ventil--sek  { animation-name: pr-sek-ventil; animation-timing-function: linear;
  animation-duration: 2.1s !important; animation-iteration-count: infinite !important; }
.pr-sluse    { transform-box: fill-box; transform-origin: center;
  animation-name: pr-drej; animation-timing-function: linear;
  animation-duration: 1.5s !important; animation-iteration-count: infinite !important; }
.pr-korn     { fill: var(--text-soft); opacity: 0;
  animation-name: pr-fald; animation-timing-function: linear;
  animation-duration: .9s !important; animation-iteration-count: infinite !important; }
.pr-fluid    { animation-name: pr-drift; animation-timing-function: linear;
  animation-duration: 1.1s !important; animation-iteration-count: infinite !important; }
.pr-pust     { animation-name: pr-pust; animation-timing-function: cubic-bezier(.2,.6,.4,1);
  animation-duration: .9s !important; animation-iteration-count: infinite !important; }
.pr-roer--flow { animation-name: pr-flow; animation-timing-function: linear;
  animation-duration: .6s !important; animation-iteration-count: infinite !important; }
.pr-ps-slag  { animation-name: pr-slag; animation-timing-function: ease-out;
  animation-duration: 1.8s !important; animation-iteration-count: infinite !important; }
.pr-ps-front { animation-name: pr-front; animation-timing-function: cubic-bezier(.15,.7,.35,1);
  animation-duration: 1.8s !important; animation-iteration-count: infinite !important; }
/* F's vibration. En hammer RAMMER og skal have en kurve, der springer.
   En vibrator SVINGER, og kurven er derfor jaevn og kort: 0,9 sekund,
   som luftfamiliernes eget aandedraet. Varighed og gentagelse staar med
   !important, fordi shared.css slaar al animation ihjel paa en maskine,
   der beder om mindre bevaegelse -- og de LANGE egenskabsnavne bruges,
   fordi kortformen "animation:" ogsaa ville nulstille delay'et. */
.pr-f-front { animation-name: pr-f-puls; animation-timing-function: ease-out;
  animation-duration: .9s !important; animation-iteration-count: infinite !important; }
.pr-f-stempel { transform-box: fill-box; transform-origin: center;
  animation-name: pr-f-stempel; animation-timing-function: ease-in-out;
  animation-duration: .72s !important; animation-iteration-count: infinite !important; }

.pr-mem      { transform-box: fill-box; transform-origin: 50% 0%;
  animation-name: pr-membran; animation-timing-function: ease-in-out;
  animation-duration: .9s !important; animation-iteration-count: infinite !important; }
.pr-spalte   { transform-box: fill-box; transform-origin: center;
  animation-name: pr-spalte; animation-timing-function: ease-in-out;
  animation-duration: .9s !important; animation-iteration-count: infinite !important; }
.pr-plan-pkt { animation: pr-pop .45s ease-out both; transform-box: fill-box;
  transform-origin: center; }

/* ---- portraet i CTA'en ------------------------------------- */
.pr-cta__grid { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem; align-items: center; }
.pr-cta__foto { width: 116px; height: 116px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto; }
.pr-cta__rolle { font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand-blue); margin: 0 0 .3rem; }
@media (max-width: 560px) {
  .pr-cta__grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---- monteringssaettene ------------------------------------ */
.pr-kit__foto { width: 100%; max-width: 260px; height: auto; display: block;
  margin: 0 0 1rem; border: 1px solid var(--border-light);
  border-radius: var(--r-md, 8px); background: #fff; }
.pr-trin-liste { counter-reset: pr-t; list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .7rem; }
.pr-trin-liste li { counter-increment: pr-t; position: relative; padding-left: 2.1rem;
  font-size: .93rem; color: var(--text-soft); line-height: 1.55; }
.pr-trin-liste li::before { content: counter(pr-t); position: absolute; left: 0; top: 0;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bg-soft);
  color: var(--brand-blue); font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }

/* --- de tre problemtegninger ---------------------------------------
   Samme silo paa alle tre kort, saa oejet sammenligner problemet og
   ikke geometrien. Tegningen er dekorativ: alt indhold staar ogsaa
   som tekst under den. */
.pr-ikon { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 0 .9rem; }
.pr-ikon .v { fill: none; stroke: var(--text-meta); stroke-width: 3.2;
              stroke-linejoin: round; stroke-linecap: round; }
.pr-ikon .m { fill: var(--bg-soft); }
.pr-ikon .o { fill: none; stroke: var(--cta-primary); stroke-width: 3.2;
              stroke-linecap: round; }
.pr-ikon .s { fill: var(--cta-primary); }

/* --- FlexCore-slangerne --------------------------------------------
   Billederne ligger paa /flexcore/ paa samme domaene. Hoejden staar
   i CSS og ikke i markup'en, fordi vi ikke kender billedernes egne
   maal her; saa er der stadig ingen layoutspring. */
.pr-slanger { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
              gap: 1.25rem; max-width: 1040px; margin: 0 auto; }
.pr-slange { display: flex; flex-direction: column; background: var(--bg-main);
             border: 1px solid var(--border-light); border-radius: var(--r-md);
             overflow: hidden; text-decoration: none; color: var(--text-main);
             transition: border-color .15s, box-shadow .15s; }
.pr-slange:hover { border-color: var(--brand-blue); box-shadow: var(--shadow-md);
                   text-decoration: none; }
.pr-slange__media { display: block; background: #fff; }
.pr-slange__media img { display: block; width: 100%; height: 170px; object-fit: contain; }
.pr-slange__krop { display: block; padding: 1.1rem 1.35rem 1.35rem; font-size: .92rem;
                   color: var(--text-soft); line-height: 1.55; }
.pr-slange__h { display: block; font-size: 1.02rem; font-weight: 600;
                color: var(--brand-blue); margin-bottom: .45rem; }
.pr-slanger__alle { max-width: 1040px; margin: 1.35rem auto 0; text-align: center;
                    font-size: .92rem; }

/* --- slangekortene, lidt strammere ---------------------------------
   Produktfotoene staar paa en lys blaa baggrund hos NORRES. Feltet
   under billedet faar samme tone, saa fotoet ikke ser ud som en
   udklipsseddel paa et hvidt kort. */
.pr-slange__media { background: #eaf2fa; padding: .5rem; border-bottom: 1px solid var(--border-light); }
.pr-slange__media img { height: 150px; }
.pr-slange__h { letter-spacing: .01em; }
.pr-slange::after { content: ""; display: block; height: 3px; background: var(--cta-primary);
                    transform: scaleX(0); transform-origin: left;
                    transition: transform .18s ease; }
.pr-slange:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .pr-slange::after { transition: none; } }

/* --- databladet ----------------------------------------------------
   Staar to steder: under knapperne i toppen og under knapperne i
   kontaktfeltet.

   Det var foer en graa tekstlinje under knapperne, og det var forkert.
   Databladet er et salgsargument -- fire sider med alle varianter, maal
   og specifikationer, som kunden kan tage med til sin kollega -- og det
   skal derfor kunne ses. Det er nu et felt med ramme, ikke en tredje
   knap: knapperne beholder deres rangorden, men feltet kan ikke overses.

   Kortet aabner altid i et nyt faneblad, og pilen oeverst til hoejre er
   den gaengse maade at vise det paa. */
.pr-hero__pdf, .pr-cta__pdf { margin: 1.25rem 0 0; }
.pr-pdf { display: inline-flex; align-items: center; gap: .85rem;
    max-width: 30rem; padding: .8rem 1.05rem .8rem .95rem;
    border: 1.5px solid var(--brand-blue); border-radius: var(--r-md);
    background: #fff; color: var(--brand-blue); text-decoration: none;
    position: relative; transition: background .16s ease, box-shadow .16s ease; }
.pr-pdf:hover, .pr-pdf:focus-visible { background: var(--bg-muted);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1); text-decoration: none; }

/* arket, tegnet med et ombukket hjoerne */
.pr-pdf__ark { flex: 0 0 auto; width: 1.55rem; height: 1.95rem;
    border: 1.5px solid currentColor; border-radius: 2px;
    border-top-right-radius: .55rem; position: relative; }
.pr-pdf__ark::before { content: ""; position: absolute; right: -1.5px; top: -1.5px;
    width: .55rem; height: .55rem; border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor; border-bottom-left-radius: 2px; }
.pr-pdf__ark::after { content: ""; position: absolute; left: .28rem; right: .28rem;
    top: .9rem; height: 1.5px; background: currentColor;
    box-shadow: 0 .3rem 0 currentColor; opacity: .55; }

.pr-pdf__txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.pr-pdf__h { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.pr-pdf__u { font-size: .84rem; line-height: 1.35; color: var(--text-soft); }
.pr-pdf__meta { flex: 0 0 auto; margin-left: auto; padding-left: .6rem;
    font-size: .78rem; color: var(--text-soft); white-space: nowrap; }

/* Pilen for "aabner i et nyt faneblad". Den staar som et rigtigt tegn,
   ↗, og ikke som to CSS-kanter. Foerste forsoeg var en drejet
   hjoerneramme, og den lignede en almindelig chevron, altsaa "videre"
   og ikke "nyt faneblad". Et forkert ikon er vaerre end ingen. */
.pr-pdf__ny { position: absolute; top: .35rem; right: .5rem;
    font-size: .82rem; line-height: 1; opacity: .65; }

@media (max-width: 560px) {
    .pr-pdf { flex-wrap: wrap; max-width: 100%; }
    .pr-pdf__meta { margin-left: 2.4rem; padding-left: 0; }
}

/* --- pop-up'en bag slangekortene -----------------------------------
   <dialog> er lukket og display:none af sig selv, saa der skal ikke
   skjules noget her. Bredden er sat i ch og ikke i procent, saa
   teksten ikke bliver en meter bred paa en stor skaerm. */
.pr-dial { position: fixed; inset: 0; margin: auto;
           width: min(56rem, 92vw); max-height: 88vh; padding: 0; border: 0;
           border-radius: var(--r-md); background: var(--bg-main);
           color: var(--text-main); box-shadow: var(--shadow-lg, 0 18px 48px rgba(0,0,0,.28));
           overflow: auto; }
.pr-dial::backdrop { background: rgba(11, 26, 45, .58); }
.pr-dial__lukform { position: sticky; top: 0; z-index: 2; height: 0; margin: 0; }
.pr-dial__luk { position: absolute; top: .55rem; right: .6rem; width: 2.1rem;
                height: 2.1rem; line-height: 1; font-size: 1.4rem; cursor: pointer;
                border: 1px solid var(--border-light); border-radius: 999px;
                background: var(--bg-main); color: var(--text-soft); }
.pr-dial__luk:hover { color: var(--text-main); border-color: var(--brand-blue); }
.pr-dial__krop { display: grid; grid-template-columns: 340px 1fr; gap: 1.6rem;
                 padding: 1.6rem 1.75rem 1.75rem; align-items: start; }
.pr-dial__media { margin: 0; background: #eaf2fa; border: 1px solid var(--border-light);
                  border-radius: var(--r-sm, 6px); padding: .75rem; }
.pr-dial__media img { display: block; width: 100%; height: 240px; object-fit: contain; }
.pr-dial__tekst h3 { margin: .2rem 0 .55rem; font-size: 1.45rem; color: var(--brand-blue); }
.pr-dial__tekst > p { color: var(--text-soft); line-height: 1.6; }
.pr-dial__spec { margin: 1.1rem 0 0; border-top: 1px solid var(--border-light); }
.pr-dial__spec > div { display: flex; justify-content: space-between; gap: 1rem;
                       padding: .5rem 0; border-bottom: 1px solid var(--border-light);
                       font-size: .93rem; }
.pr-dial__spec dt { color: var(--text-soft); margin: 0; }
.pr-dial__spec dd { margin: 0; font-weight: 600; text-align: right; }
.pr-dial__ud { margin: 1.2rem 0 0; font-size: .95rem; }
@media (max-width: 720px) {
  .pr-dial__krop { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.4rem 1.2rem 1.5rem; }
  .pr-dial__media img { height: 190px; }
}

/* =====================================================================
   VBT: silotraileren, enheden i tragtvaeggen og taper-valget
   Tilfoejet 6. august 2026 sammen med familie nr. 2.

   BEMAERK udseendet staar HER, sammen med de oevrige tegneklasser, og
   ikke nede i bevaegelsesafsnittet. Da bevaegelsen blev skrevet om 6.
   august, roeg fill og stroke for .pr-roer--flow og .pr-pust med i
   samme ombaering, og rorene blev til sorte kiler -- en SVG-path uden
   fill er sort. Det maa ikke gentage sig.
   ===================================================================== */

/* traileren er bredere end siloen og maa fylde mere end de 380 px */
.pr-svg--bred { max-width: 560px; margin: 0 auto; }

.pr-chassis { fill: none; stroke: var(--text-soft); stroke-width: 3;
  stroke-linecap: round; }
.pr-chassis--tynd { stroke-width: 2; }
/* lugerne paa tankens top -- det traek, der goer traileren til en
   SILOtrailer og ikke bare en tank */
.pr-neck    { fill: var(--bg-main); stroke: var(--text-soft); stroke-width: 2.4;
  stroke-linejoin: round; }
.pr-luge    { fill: var(--bg-main); stroke: var(--text-main); stroke-width: 1.8;
  stroke-linejoin: round; }
/* kappen om tappen oeverst paa membranen */
.pr-kappe   { fill: #6b7480; stroke: var(--text-main); stroke-width: 1.2; }
/* hjulene tegnes FOER de to halvdele og staar altsaa bag materialet.
   Paa en rigtig trailer sidder udloebet mellem vangerne og hjulene
   udenfor, saa materialestroemmen skal kunne loebe foran dem. */
.pr-hjul    { fill: var(--bg-main); stroke: var(--text-soft); stroke-width: 2.2; }
.pr-hjul-i  { fill: var(--text-soft); stroke: none; opacity: .6; }
.pr-blaeser { fill: none; stroke: var(--text-main); stroke-width: 1.4;
  stroke-linecap: round; }
/* henvisningsstregen fra hotspottets tal til det sted, det peger paa */
.pr-hot__leder { fill: none; stroke: var(--brand-blue); stroke-width: 1.2;
  opacity: .55; }
/* kredsen gennem de tre enheder, set i perspektiv */
.pr-kreds   { fill: none; stroke: var(--text-meta); stroke-width: 1.2;
  stroke-dasharray: 5 4; }
/* den tredje enhed staar foran snittet og skal traede tilbage */
.pr-vbt--bag { opacity: .42; }

/* enheden i snit: godset, hullet, luftsamleren og T-haandtaget */
.pr-vaeg    { fill: #c9ced4; stroke: var(--text-main); stroke-width: 1.6;
  stroke-linejoin: round; }
.pr-hul     { fill: var(--bg-main); stroke: none; }
.pr-samler  { fill: #b4bbc3; stroke: var(--text-main); stroke-width: 1.3;
  stroke-linejoin: round; }
.pr-haandtag { fill: none; stroke: #4a5560; stroke-width: 7;
  stroke-linecap: round; }
.pr-haandtag--tvaers { stroke-width: 9; }
.pr-korn2   { fill: var(--text-soft); opacity: .55; }

/* ---- taper-valget i trin 04 -----------------------------------------
   Ingen JavaScript. Radioknapperne ligger som soeskende til arkene, saa
   ":checked ~" kan naa dem; "~" naar kun soeskende, og laa knapperne i
   et <fieldset>, ville vaelgeren ikke ramme noget.

   Knappen skjules med clip og ikke med display:none. Et felt, der er
   display:none, kan ikke faa tastaturfokus, og saa kunne taperen kun
   vaelges med mus. */
.pr-taper__in { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0; }
.pr-taper__valg { display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem; margin-bottom: .9rem; }
.pr-taper__t { font-size: .82rem; color: var(--text-meta); margin-right: .25rem; }
.pr-taper__lbl { cursor: pointer; border: 1px solid var(--border-light);
  border-radius: 999px; padding: .3rem .85rem; font-size: .85rem;
  background: var(--bg-main); color: var(--text-main); user-select: none; }
.pr-taper__lbl:hover { border-color: var(--brand-blue); }
#pr-taper-45:checked ~ .pr-taper__valg .pr-taper__lbl[for="pr-taper-45"],
#pr-taper-37:checked ~ .pr-taper__valg .pr-taper__lbl[for="pr-taper-37"] {
  background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
#pr-taper-45:focus-visible ~ .pr-taper__valg .pr-taper__lbl[for="pr-taper-45"],
#pr-taper-37:focus-visible ~ .pr-taper__valg .pr-taper__lbl[for="pr-taper-37"] {
  outline: 2px solid var(--brand-blue); outline-offset: 2px; }
/* uden CSS staar begge ark under hinanden og kan laeses. Med CSS vises
   det valgte. */
.pr-taper__ark { display: none; }
#pr-taper-45:checked ~ .pr-taper__ark--45,
#pr-taper-37:checked ~ .pr-taper__ark--37 { display: block; }
.pr-taper__note { margin-top: .6rem; }

/* ---- I100, fluidiseringspuder ------------------------------- */
/* Puden set fra kanten. Den beholder sit eget forhold, 166 til 32, saa
   den ikke laeses som en skive -- det er hele forskellen paa den og en
   VBS. */
.pr-i100    { fill: var(--brand-blue); stroke: var(--bg-main); stroke-width: .6; }
.pr-i100-t  { fill: #9aa4ae; stroke: none; }
/* Puden i snit. IKKE .pr-mem: den klasse baerer VBS' loefteanimation,
   hvor membranens rand slipper vaeggen. En I100 er stiv, og luften gaar
   tvaers gennem den poroese flade. */
.pr-i100-skal { fill: #eceef0; stroke: var(--text-main); stroke-width: 1.5;
  stroke-linejoin: round; }
/* fladen set ovenfra, indsat i trin 02 */
.pr-i100-hus { fill: #3a3f45; stroke: var(--text-main); stroke-width: 1.2; }
.pr-i100-mem { fill: #f2f3f4; stroke: var(--text-soft); stroke-width: 1; }
.pr-i100-port { fill: #c9ced4; stroke: var(--text-main); stroke-width: 1.1; }
/* filteret og flowreguleringsventilen i trin 03. Kataloget naevner de to
   og ikke andet -- der er hverken styreboks eller magnetventil, fordi
   I100 kun koerer kontinuerligt. */
.pr-filter   { fill: var(--bg-main); stroke: var(--text-main); stroke-width: 1.4; }
.pr-filter-i { fill: none; stroke: var(--text-soft); stroke-width: 1.1; }
.pr-ventil-hjul { fill: var(--bg-main); stroke: var(--text-main); stroke-width: 1.4; }
.pr-svg--valg { max-width: 340px; margin: 0 auto; }

/* ---- PG, luftkanoner -----------------------------------------------
   FARVERNE SIGER, HVAD DER ER INDE OG HVAD DER ER UDE. VBS, VBT og I100
   sidder alle INDE i materialet, og deres dele er derfor tegnet i
   sitets blaa. En PG er den foerste familie, der vender omvendt:
   trykbeholderen bliver siddende paa vaeggens yderside, og kun dysen
   gaar ind. Kroppen er derfor tegnet som det aluminium, den er -- lys
   og metallisk -- mens dysen, der ER inde i materialet, staar moerk som
   paa OLI's egne fotos. Kan man ikke se forskel paa de to, forsvinder
   hele pointen i trin 02.

   Tallene er OLI's egne. Kroppens diameter er 0,72 gange pladens side,
   maalt paa katalogets view nedefra -- se noten i tegninger.py. */
.pr-pg-krop  { fill: #dfe3e7; stroke: var(--text-main); stroke-width: 1.5;
  stroke-linejoin: round; }
.pr-pg-ribbe { fill: none; stroke: #a9b1b9; stroke-width: 1.1;
  stroke-linecap: round; }
/* pladen er i staal, ikke aluminium. Den er moerkere end kroppen, saa de
   to materialer kan skelnes uden farvesyn. */
.pr-pg-plade { fill: #7f868d; stroke: var(--text-main); stroke-width: 1.3; }
.pr-pg-bolt  { fill: var(--bg-main); stroke: var(--text-main); stroke-width: 1.1; }
/* hovedet med ventil og spole. SYMBOL -- OLI maalsaetter det ikke. */
.pr-pg-hoved { fill: #3a3f45; stroke: var(--text-main); stroke-width: 1.2; }
/* dyseroeret: den ENESTE del, der er inde i siloen */
.pr-pg-dyse  { fill: #2f343a; stroke: var(--text-main); stroke-width: 1.3;
  stroke-linejoin: round; }
/* dyseroeret i de maalfaste tegninger. Det tegnes som EN POLYLINJE med
   stroke-width = Ø E og runde hjoerner, ikke som en fyldt polygon med
   seks hjoerner sat i haanden. Foerste udgave gjorde det sidste, og
   knaeet foldede forkert: paa skaermbilledet blev roeret til en sort
   vimpel paa skraa ind i materialet. En streg med tykkelse kan ikke
   folde forkert. */
.pr-pg-roer { fill: none; stroke: #2f343a; stroke-linejoin: round;
  stroke-linecap: round; }
/* styringen i trin 03. En luftkanon skal have et signal for at skyde --
   det er forskellen paa den og de tre andre familier, og derfor er
   signalledningen tegnet tyndere og stiplet, saa den ikke forveksles
   med en trykluftledning. */
.pr-pg-led    { fill: var(--brand-blue); stroke: none; }
.pr-pg-signal { fill: none; stroke: var(--text-soft); stroke-width: 1.2;
  stroke-dasharray: 3 3; stroke-linecap: round; }


/* ---- trin 04: hvilken af de tre ----------------------------- */
/* Samme opskrift som VBT's taper-valg: rene radioknapper og ":checked ~".
   Knapperne SKAL ligge som soeskende til arkene -- "~" naar kun
   soeskende. Knappen skjules med clip og ikke med display:none, for et
   felt, der er display:none, kan ikke faa tastaturfokus. */
.pr-valg__in { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0; }
.pr-valg__knapper { display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem; margin-bottom: .9rem; }
.pr-valg__t { font-size: .82rem; color: var(--text-meta); margin-right: .25rem; }
.pr-valg__lbl { cursor: pointer; border: 1px solid var(--border-light);
  border-radius: 999px; padding: .3rem .85rem; font-size: .85rem;
  background: var(--bg-main); color: var(--text-main); user-select: none; }
.pr-valg__lbl:hover { border-color: var(--brand-blue); }
#pr-valg-i100:checked ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-i100"],
#pr-valg-u:checked    ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-u"],
#pr-valg-vbs:checked  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-vbs"],
#pr-valg-u025:checked ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-u025"],
#pr-valg-pg40:checked ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-pg40"],
#pr-valg-pg63:checked ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-pg63"],
#pr-valg-pg80:checked ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-pg80"],
#pr-valg-u060:checked ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-u060"],
#pr-valg-psa:checked  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-psa"],
#pr-valg-psb:checked  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-psb"],
#pr-valg-fh:checked   ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-fh"],
#pr-valg-fl:checked   ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-fl"],
#pr-valg-fl1:checked  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-fl1"],
#pr-valg-k:checked    ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-k"],
#pr-valg-klf:checked  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-klf"],
#pr-valg-pstd:checked ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-pstd"],
#pr-valg-pex:checked  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-pex"],
#pr-valg-mvo3000:checked ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-mvo3000"],
#pr-valg-mvo6000:checked ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-mvo6000"],
#pr-valg-s2:checked   ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-s2"],
#pr-valg-s4:checked   ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-s4"],
#pr-valg-s6:checked   ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-s6"],
#pr-valg-or2:checked  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-or2"],
#pr-valg-or4:checked  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-or4"],
#pr-valg-or6:checked  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-or6"],
#pr-valg-ot20:checked  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-ot20"],
#pr-valg-ot25:checked  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-ot25"],
#pr-valg-ot25s:checked ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-ot25s"],
#pr-valg-fm:checked   ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-fm"] {
  background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
#pr-valg-i100:focus-visible ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-i100"],
#pr-valg-u:focus-visible    ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-u"],
#pr-valg-vbs:focus-visible  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-vbs"],
#pr-valg-u025:focus-visible ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-u025"],
#pr-valg-pg40:focus-visible ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-pg40"],
#pr-valg-pg63:focus-visible ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-pg63"],
#pr-valg-pg80:focus-visible ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-pg80"],
#pr-valg-u060:focus-visible ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-u060"],
#pr-valg-psa:focus-visible  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-psa"],
#pr-valg-psb:focus-visible  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-psb"],
#pr-valg-fh:focus-visible   ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-fh"],
#pr-valg-fl:focus-visible   ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-fl"],
#pr-valg-fl1:focus-visible  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-fl1"],
#pr-valg-k:focus-visible    ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-k"],
#pr-valg-klf:focus-visible  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-klf"],
#pr-valg-pstd:focus-visible ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-pstd"],
#pr-valg-pex:focus-visible  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-pex"],
#pr-valg-mvo3000:focus-visible ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-mvo3000"],
#pr-valg-mvo6000:focus-visible ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-mvo6000"],
#pr-valg-s2:focus-visible   ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-s2"],
#pr-valg-s4:focus-visible   ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-s4"],
#pr-valg-s6:focus-visible   ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-s6"],
#pr-valg-or2:focus-visible  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-or2"],
#pr-valg-or4:focus-visible  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-or4"],
#pr-valg-or6:focus-visible  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-or6"],
#pr-valg-ot20:focus-visible  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-ot20"],
#pr-valg-ot25:focus-visible  ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-ot25"],
#pr-valg-ot25s:focus-visible ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-ot25s"],
#pr-valg-fm:focus-visible   ~ .pr-valg__knapper .pr-valg__lbl[for="pr-valg-fm"] {
  outline: 2px solid var(--brand-blue); outline-offset: 2px; }
/* uden CSS staar alle tre ark under hinanden og kan laeses */
.pr-valg__ark { display: none; }
#pr-valg-i100:checked ~ .pr-valg__ark--i100,
#pr-valg-u:checked    ~ .pr-valg__ark--u,
#pr-valg-vbs:checked  ~ .pr-valg__ark--vbs,
#pr-valg-u025:checked ~ .pr-valg__ark--u025,
#pr-valg-pg40:checked ~ .pr-valg__ark--pg40,
#pr-valg-pg63:checked ~ .pr-valg__ark--pg63,
#pr-valg-pg80:checked ~ .pr-valg__ark--pg80,
#pr-valg-u060:checked ~ .pr-valg__ark--u060,
#pr-valg-psa:checked  ~ .pr-valg__ark--psa,
#pr-valg-psb:checked  ~ .pr-valg__ark--psb,
#pr-valg-fh:checked   ~ .pr-valg__ark--fh,
#pr-valg-fl:checked   ~ .pr-valg__ark--fl,
#pr-valg-fl1:checked  ~ .pr-valg__ark--fl1,
#pr-valg-k:checked    ~ .pr-valg__ark--k,
#pr-valg-klf:checked  ~ .pr-valg__ark--klf,
#pr-valg-pstd:checked ~ .pr-valg__ark--pstd,
#pr-valg-pex:checked  ~ .pr-valg__ark--pex,
#pr-valg-mvo3000:checked ~ .pr-valg__ark--mvo3000,
#pr-valg-mvo6000:checked ~ .pr-valg__ark--mvo6000,
#pr-valg-s2:checked   ~ .pr-valg__ark--s2,
#pr-valg-s4:checked   ~ .pr-valg__ark--s4,
#pr-valg-s6:checked   ~ .pr-valg__ark--s6,
#pr-valg-or2:checked  ~ .pr-valg__ark--or2,
#pr-valg-or4:checked  ~ .pr-valg__ark--or4,
#pr-valg-or6:checked  ~ .pr-valg__ark--or6,
#pr-valg-ot20:checked  ~ .pr-valg__ark--ot20,
#pr-valg-ot25:checked  ~ .pr-valg__ark--ot25,
#pr-valg-ot25s:checked ~ .pr-valg__ark--ot25s,
#pr-valg-fm:checked   ~ .pr-valg__ark--fm { display: block; }
.pr-valg__note { margin-top: .6rem; }

/* ---- PS, silohamre -------------------------------------------------
   Kroppen, pladen, boltene og hovedet er de samme dele som paa PG og
   genbruger derfor .pr-pg-*: et ribbet aluminiumhus paa en staalplade.
   Det er ikke dovenskab -- det ER den samme opbygning, og to farvesaet
   til det samme ville sige, at der var forskel, hvor der ingen er.

   Det, der ER forskelligt, staar herunder. En PG har en dyse INDE i
   siloen; en PS har ingenting derinde. Til gengaeld har den tre ting,
   PG ikke har: en svejsning mod vaeggen, et stempel inde i huset og et
   slag, der forplanter sig gennem godset. */

/* den flarede fod paa type A. Staal som pladen, men lysere, saa den
   ikke smelter sammen med pladen paa arket i trin 04. */
.pr-ps-fod   { fill: #98a0a7; stroke: var(--text-main); stroke-width: 1.3;
  stroke-linejoin: round; }
/* svejsningen. Den ENESTE bearbejdning, monteringen kraever -- der
   bores ikke hul i vaeggen -- og derfor tegnet og ikke underforstaaet. */
.pr-ps-svejs { fill: #5b6169; stroke: var(--text-main); stroke-width: 1; }
/* stemplet inde i huset. SYMBOL: OLI viser intet snit. Moerkt som
   hovedet, saa det laeses som en del inde i noget og ikke som en
   flade paa ydersiden. */
.pr-ps-stempel { fill: #3a3f45; stroke: var(--text-main); stroke-width: 1.2; }
.pr-ps-slagpil { fill: none; stroke: var(--text-main); stroke-width: 2.2;
  color: var(--text-main); }
/* slaget paa vaeggen og fronterne gennem godset. Sitets egen orange og
   ikke blaa: blaa betyder LUFT paa alle fem foregaaende familier, og
   det, der naar materialet her, er ikke luft. Den moerke af de to
   orange (--cta-primary-hover) er valgt for kontrastens skyld. */
.pr-ps-slag  { fill: none; stroke: var(--cta-primary-hover, #c47720); stroke-width: 2.4;
  stroke-linecap: round; }
.pr-ps-front { fill: none; stroke: var(--cta-primary-hover, #c47720); stroke-width: 2.2;
  stroke-linecap: round; }
/* hjaelpelinjerne mellem en del og dens maallinje. Tyndere og svagere end
   selve maalet, saa de ikke laeses som en kant paa noget. */
.pr-maal--hjaelp { stroke-width: .8; opacity: .55; }
/* flangen paa pladen set forfra: dér hvor huset boltes fast. */
.pr-ps-flange { fill: none; stroke: var(--text-main); stroke-width: 1.2; }

/* den lyse poroese flade oven paa symbolets moerke krop. Uden den kunne
   man ikke se, at det var en pude -- kun at der sad en klat. */
.pr-i100-flade { fill: none; stroke: #f2f3f4; stroke-width: 2.4;
  stroke-linecap: round; }
/* kagen paa keglevaeggen i trin 01, venstre halvdel: materialet, der er
   blevet siddende. Moerkere end det loese materiale, saa forskellen kan
   ses uden farvesyn. */
.pr-kage    { fill: #b3a68c; stroke: none; }
/* og modstykket i hoejre halvdel: laget langs vaeggen, luften har naaet */
.pr-fluidlag { fill: #cfe2f2; stroke: none; opacity: .85; }

/* ---- U: fluidiseringsdyser ----------------------------------------
   Dysen sidder anderledes end baade VBS og I100: de to andre monteres
   INDEFRA, mens U skrues i en ring svejst paa siloens YDERSIDE. Derfor
   har den to dele, ingen af de andre har -- ringen og svejsesoemmen --
   og derfor er farverne staal og ikke membran.

   .pr-u-flade og .pr-u-msg er de to poroese elementer: hvid
   hoejdensitetspolyethylen paa U060, sintret messing paa U025. De ER
   forskellige i virkeligheden, og forskellen er det, trin 04 handler
   om, saa de har hver sin farve. */
.pr-u-ring  { fill: #8a9099; stroke: var(--text-main); stroke-width: 1.3; }
.pr-u-svejs { fill: #6d747c; stroke: none; }
.pr-u-hus   { fill: #dfe2e5; stroke: var(--text-main); stroke-width: 1.4;
  stroke-linejoin: round; }
.pr-u-flade { fill: #f4f5f6; stroke: var(--text-soft); stroke-width: 1; }
.pr-u-msg   { fill: #c3a06a; stroke: var(--text-main); stroke-width: 1.1;
  stroke-linejoin: round; }


/* ---- F, justerbare stempelvibratorer -------------------------------
   Kroppen genbruger .pr-pg-krop og monteringsfladen .pr-pg-plade: det
   ER den samme opbygning som PG og PS, et hus paa en plade, og to
   farvesaet til det samme ville sige, at der var forskel, hvor der
   ingen er.

   Det, der er nyt, er tre ting, ingen af de seks foregaaende har: en
   boring med et stempel, der ikke roerer enderne, en gevindskaaret
   aksel med masser paa, og en vibration, der ikke er luft. */

/* boringen. Lys, saa stemplet kan ses ligge FRIT i den. */
.pr-f-boring  { fill: var(--bg-main); stroke: #a9b1b9; stroke-width: 1; }
/* det flydende stempel. SYMBOL: OLI viser intet snit gennem en F. */
.pr-f-stempel { fill: #3a3f45; stroke: var(--text-main); stroke-width: 1.2; }
/* akslen og masserne. Staal, som paa OLI's egne fotos. Akslen tegnes
   som EN streg med tykkelse og ikke som en kontur. */
.pr-f-aksel   { fill: none; stroke: #98a0a7; stroke-linecap: round; }
.pr-f-masse   { fill: #7f868d; stroke: var(--text-main); stroke-width: 1.1; }
/* lyddaemperen. Messing paa alle fire af katalogets renders. */
.pr-f-lyd     { fill: none; stroke: #b08d4e; stroke-linecap: round; }
/* de fire komponenter i kredsloebet. F er den eneste familie paa sitet,
   der kraever smoering, og derfor er der fire kasser og ikke to. */
.pr-komp      { fill: var(--bg-main); stroke: var(--text-main); stroke-width: 1.3; }
/* vibrationsaksen. Den FORKLARER mekanikken og staar derfor stille --
   den skal kunne laeses, naar tegningen ikke bevaeger sig. */
.pr-f-akse    { fill: none; stroke: var(--text-main); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
/* det, der naar materialet. Sitets orange og ikke blaa: blaa betyder
   LUFT paa alle seks foregaaende familier, og en vibration gennem
   godset er ikke luft. Buer om selve indgangspunktet, ikke streger paa
   tvaers -- reglen er PS'. */
.pr-f-front   { fill: none; stroke: var(--cta-primary-hover, #c47720);
  stroke-width: 2.2; stroke-linecap: round; }

/* ---- K, daempede stempelvibratorer ---------------------------------
   Kroppen, monteringspladen, boltene og endedaekslet er de samme dele
   som paa PG, PS og F og genbruger derfor .pr-pg-*. Boringen, stemplet,
   lyddaemperen, vibrationsaksen, buerne og kredsloebets kasser
   genbruges fra F.

   Det, der er NYT, er een ting, ingen af de syv foregaaende har:
   luftpuden. Den er hele K's pointe -- stemplet naar aldrig metallet --
   og den skal derfor kunne ses. */

/* luftpuden mod hver endeflade: nestede buer, altsaa sammentrykt luft.
   Sitets blaa, fordi det ER luft. Den staar STILLE med vilje: den
   forklarer, og en forklaring skal kunne laeses, naar tegningen ikke
   bevaeger sig. F-omgangen laerte, at to faste FELTER i enderne laeses
   som dele af huset -- en bue om en flade kan kun laeses paa een maade. */
.pr-k-pude { fill: none; stroke: var(--brand-blue); stroke-width: 1.8;
  stroke-linecap: round; opacity: .85; }

/* smoereapparatet i trin 04: den ene kasse, der IKKE er der paa
   LF-udgaven. Stiplet, saa forskellen mellem de to ark kan SES og ikke
   kun laeses. */
.pr-komp--valg { stroke-dasharray: 4 3; }

/* ---- P: stempelvibratorer med slag ---------------------------------
   Kroppen, den paasvejste plade og boltene er de samme dele som paa PG,
   PS, F og K og genbruger derfor .pr-pg-*. Det, der ER anderledes, staar
   herunder.

   TAKTEN. En PS slaar EEN gang og har 1,8 sekunder paa sit slag. En P
   slaar 1 200 til 4 500 gange i minuttet, og takten er derfor 0,6
   sekunder -- den korte ende af drejebogens 0,6 til 2,1. Stemplet,
   stjernen og fronterne deler den SAMME varighed, saa stemplet rammer i
   netop det oejeblik, stjernen staar op. Havde de tre haft hver sin
   takt, ville tegningen vise et stempel, der rammer, naar der ikke sker
   noget.

   Varighed og gentagelse staar med !important, fordi shared.css slaar
   al animation ihjel paa en maskine, der beder om mindre bevaegelse --
   og de LANGE egenskabsnavne bruges, fordi kortformen "animation:" ogsaa
   ville nulstille delay'et. */

/* stemplet, der RAMMER. Det er hele forskellen paa P og K: K's stempel
   standser i en luftpude, P's gaar hele vejen ned i bunden. Udsvinget
   er 9 px, og hvilestillingen ligger 9 px fra bunden, saa det naar
   metallet -- og der staar en assert paa tallet i tegninger.py. */
@keyframes pr-p-stempel { 0%   { transform: translateX(0) }
                          5%   { transform: translateX(-9px) }
                          30%  { transform: translateX(0) }
                          100% { transform: translateX(0) } }
.pr-p-stempel { fill: #3a3f45; stroke: var(--text-main); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center;
  animation-name: pr-p-stempel;
  animation-timing-function: cubic-bezier(.35,.05,.2,1);
  animation-duration: .6s !important; animation-iteration-count: infinite !important; }

/* slaget og fronterne gennem godset. Sitets egen orange og ikke blaa:
   blaa betyder LUFT paa alle otte foregaaende familier, og det, der naar
   materialet her, er ikke luft. Keyframes pr-slag og pr-front er PS',
   og de er gode nok -- det er kun varigheden, der er P's egen. */
.pr-p-slag  { fill: none; stroke: var(--cta-primary-hover, #c47720);
  stroke-width: 2.4; stroke-linecap: round;
  animation-name: pr-slag; animation-timing-function: ease-out;
  animation-duration: .6s !important; animation-iteration-count: infinite !important; }
.pr-p-front { fill: none; stroke: var(--cta-primary-hover, #c47720);
  stroke-width: 2.2; stroke-linecap: round;
  animation-name: pr-front;
  animation-timing-function: cubic-bezier(.15,.7,.35,1);
  animation-duration: .6s !important; animation-iteration-count: infinite !important; }

/* vibratorens egen fod. Lysere staal end den paasvejste plade, saa de to
   ikke smelter sammen: det er to dele, og den ene skal svejses paa, mens
   den anden boltes fast paa den. */
.pr-p-fod   { fill: #98a0a7; stroke: var(--text-main); stroke-width: 1.3;
  stroke-linejoin: round; }
/* svejsningen. Den ENESTE bearbejdning, monteringen kraever -- der bores
   ikke hul i vaeggen -- og derfor tegnet og ikke underforstaaet. */
.pr-p-svejs { fill: #5b6169; stroke: var(--text-main); stroke-width: 1; }
/* termometerbjaelken i trin 04. Graa med vilje: den er hverken luft
   eller slag og maa derfor ikke laane nogen af de to farver. */
.pr-p-bjaelke { fill: none; stroke: #7f868d; stroke-width: 9;
  stroke-linecap: butt; }

/* --- MVO, hydrauliske vibratorer ------------------------------------
   TIENDE FAMILIE, og den foerste, der ikke koerer paa trykluft.

   FARVEN ER DET, DER SKILLER DEN UD. Sitets blaa betyder LUFT paa alle
   ni foregaaende familier, og sitets orange betyder det, der NAAR
   materialet. Hydraulikolien er hverken det ene eller det andet, og den
   maatte derfor have sin egen. Valget faldt paa en moerk olivengroen,
   som staar tydeligt fra begge -- ogsaa naar de ligger ved siden af
   hinanden i samme tegning, hvilket de goer i trin 02 og 03. Farven er
   ikke en opfundet standard: det er farven paa motoren i OLI's eget
   render paa katalogets side 44. Thomas valgte den 8. august 2026.

   TAKTEN. MVO drejer 3 000 til 6 000 gange i minuttet, altsaa 50 til
   100 gange i sekundet. Det kan ikke tegnes, og det skal heller ikke:
   en rotor, der drejer 100 gange i sekundet paa skaermen, er en graa
   plet. Takten er derfor 0,9 sekunder pr. omdrejning -- inden for
   drejebogens 0,6 til 2,1 -- og den er et SYMBOL paa rotationen og
   ikke en gengivelse af frekvensen. Vaegten, svirpene og olien deler
   den samme takt, saa svirpet kommer, naar vaegten staar ud.

   Varighed og gentagelse staar med !important af samme grund som paa P:
   shared.css slaar al animation ihjel paa en maskine, der beder om
   mindre bevaegelse, og de LANGE egenskabsnavne bruges, fordi
   kortformen "animation:" ogsaa ville nulstille delay'et. */

/* olien. Den ene farve, der ikke fandtes paa sitet foer MVO. */
.pr-mvo-olie { fill: none; stroke: #4f6b2f; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round; }
.pr-mvo-olie--tynd { stroke-width: 1.9; }
/* slidsen i foden. Hul og ikke bolt: det er den, der giver de
   12 mm mellem B og B1. */
.pr-mvo-slids { fill: var(--bg-main); stroke: var(--text-main);
  stroke-width: 1.2; }
/* den marcherende stiplede streg oven paa olieledningen. Samme greb som
   pr-roer--flow, men i oliens farve i stedet for luftens. */
@keyframes pr-mvo-flow { to { stroke-dashoffset: -26 } }
.pr-mvo-flow { fill: none; stroke: #7d9c52; stroke-width: 2.2;
  stroke-linecap: round; stroke-dasharray: 7 6;
  animation-name: pr-mvo-flow; animation-timing-function: linear;
  animation-duration: .9s !important; animation-iteration-count: infinite !important; }
.pr-mvo-olie-fyld { fill: #6d8b45; stroke: none; opacity: .55; }

/* rotoren: excentervaegten, der drejer om akslen. transform-box er
   view-box og ikke fill-box, fordi omdrejningspunktet er akslens plads
   i tegningen og ikke elementets egen midte -- en halvskive drejer om
   sin RETTE kant, ikke om sit tyngdepunkt. */
.pr-mvo-rotor { fill: #3a3f45; stroke: var(--text-main); stroke-width: 1.2;
  transform-box: view-box; transform-origin: var(--ox) var(--oy);
  animation-name: pr-drej; animation-timing-function: linear;
  animation-duration: .9s !important; animation-iteration-count: infinite !important; }
/* akslen selv */
.pr-mvo-aksel { fill: #c9ced4; stroke: var(--text-main); stroke-width: 1.2; }
/* lejerne. To, og de er hele pointen i trin 04: de er det, der slides. */
.pr-mvo-leje { fill: none; stroke: var(--text-soft); stroke-width: 2.6;
  stroke-linecap: round; }

/* svirpet ud i materialet. Sitets orange som paa P, F og K: det, der
   naar materialet, er en RYSTELSE og ikke olie. */
.pr-mvo-svirp { fill: none; stroke: var(--cta-primary-hover, #c47720);
  stroke-width: 2.2; stroke-linecap: round;
  animation-name: pr-front;
  animation-timing-function: cubic-bezier(.15,.7,.35,1);
  animation-duration: .9s !important; animation-iteration-count: infinite !important; }

/* ladets plade og fod. Samme graatoner som P's, saa de to familier
   laeses ens, hvor de viser det samme. */
.pr-mvo-fod  { fill: #98a0a7; stroke: var(--text-main); stroke-width: 1.3;
  stroke-linejoin: round; }
.pr-mvo-lad  { fill: #c9ced4; stroke: var(--text-main); stroke-width: 1.6;
  stroke-linejoin: round; }
/* ladets omrids. EGEN KLASSE og ikke fill="none" paa .pr-mvo-lad: en
   praesentationsattribut taber til en klasseregel, saa den foerste
   udgave fyldte hele ladet graat og skjulte baade materialet og de to
   enheder under bunden. Det kunne kun ses paa skaermbilledet. */
.pr-mvo-skal { fill: none; stroke: var(--text-main); stroke-width: 1.8;
  stroke-linejoin: round; }
.pr-mvo-motor { fill: #b6bcc3; stroke: var(--text-main); stroke-width: 1.3;
  stroke-linejoin: round; }
/* bjaelkerne i trin 04. Kraften er graa som P's termometerbjaelke;
   levetiden er den samme graa i en tyndere streg, saa de to skalaer
   ikke laeses som to forskellige stoerrelser. */
.pr-mvo-bjaelke { fill: none; stroke: #7f868d; stroke-width: 9;
  stroke-linecap: butt; }
.pr-mvo-bjaelke--tynd { stroke-width: 6; }

/* --- S, kuglevibratorer ----------------------------------------------
   ELLEVTE FAMILIE, og den foerste ROTERENDE. Farven er sitets blaa igen:
   S koerer paa trykluft, hvor MVO koerte paa olie og maatte have sin
   egen. Det, der naar materialet gennem godset, er stadig sitets orange.

   REGLERNE ER ADDITIVE. Ingen af klasserne herunder aendrer noget, en af
   de ti foregaaende familier bruger. */

/* den haerdede loebebane. En RING og ikke en flade: kuglen ruller paa
   dens indre side, og ringens tykkelse er maalt paa katalogets eget
   frontsnit som 0,352 minus 0,326 af A. */
.pr-s-bane { fill: none; stroke: #a9b1b9; }

/* kuglen. Staal, som katalogets ordlyd siger: "a steel ball that rotates
   inside two housings made of hardened and ground steel". */
.pr-s-kugle { fill: #6f767e; stroke: var(--text-main); stroke-width: 1.2; }

/* KUGLENS OMLOEB. Gruppen drejer om BORINGENS centrum og ikke om sin
   egen midte -- derfor transform-box: view-box og et transform-origin,
   der saettes pr. element i style. Med fill-box ville kuglen have drejet
   om sit eget tyngdepunkt og staaet stille.

   TAKTEN ER ET SYMBOL. En S13 loeber 250 til 375 omgange i SEKUNDET, og
   det kan ikke tegnes: en kugle med den hastighed er en graa ring. De
   1,1 sekunder viser AT den loeber rundt, ikke hvor hurtigt. Samme valg
   som paa MVO's rotor. */
.pr-s-rot { transform-box: view-box; transform-origin: var(--ox) var(--oy);
  animation-name: pr-drej; animation-timing-function: linear;
  animation-duration: 1.1s !important; animation-iteration-count: infinite !important; }

/* cirkelpilen paa vaeggen. K, F og P er lineaere og faar en dobbeltpil;
   S er roterende, og kraften loeber rundt. To familier med hver sin
   mekanik maa ikke faa det samme symbol. Den staar stille: den
   FORKLARER, og en forklaring skal kunne laeses, naar tegningen ikke
   bevaeger sig. */
.pr-s-rotpil { fill: none; stroke: var(--cta-primary-hover, #c47720);
  stroke-width: 2.2; stroke-linecap: round; }
.pr-s-rotspids { fill: var(--cta-primary-hover, #c47720); stroke: none; }

/* den aabne slids i foden. Tegnet som EN streg med tykkelse og runde
   ender, ikke som seks haandsatte hjoerner -- en polylinje kan ikke
   folde forkert. */
.pr-s-slids { fill: none; stroke: var(--bg-main); }

/* bjaelkerne i trin 04. Sporet er den faste skala, bjaelken er
   vaerdien. De tre ark deler skala, saa forskellen kan laeses som en
   LAENGDE og ikke som tre tal i en tabel. */
/* de to porte i oversiden. Fysisk ens -- samme gevind ind og ud paa alle
   otte stoerrelser -- og derfor tegnet ens. Foerste udgave gav udgangen
   lyddaemperens messingfarve, og det lover et stykke tilbehoer,
   kataloget ikke naevner. */
.pr-s-port { fill: none; stroke: #8d949c; stroke-linecap: round; }

.pr-s-spor    { fill: none; stroke: #d7dbe0; stroke-width: 9;
  stroke-linecap: butt; }
.pr-s-bjaelke { fill: none; stroke: #7f868d; stroke-width: 9;
  stroke-linecap: butt; }

/* ---- OR, rullevibratorer -------------------------------------------
   Samme mekaniske klasse som S: roterende, udvendig montering,
   trykluft. Cirkelpilen paa vaeggen genbruges derfor uaendret fra S --
   reglen er, at to familier med hver sin mekanik ikke maa dele symbol,
   og det modsatte gaelder ogsaa.

   FORSKELLEN FRA S ER MATERIALET. S er EEN aluminiumstoebning; OR har
   "Aluminium body and brass cover". Snittet gaar gennem midten, og bag
   rullen staar indersiden af det fjerne daeksel. To dele i to farver
   siger, at det ER to dele, og her er der faktisk to.

   REGLERNE ER ADDITIVE. Ingen af klasserne herunder aendrer noget, en af
   de elleve foregaaende familier bruger. */

/* det fjerne messingdaeksel, set indefra gennem snittet. Messing, ikke
   sitets orange: orange betyder det, der naar materialet. Tonen er
   holdt olivenagtig og afdaempet, saa den ikke kan forveksles med
   #c47720. */
.pr-or-daeksel { fill: #cbbb8e; stroke: #8d949c; stroke-width: 1; }

/* den haerdede og slebne bane. En STREG paa boringens flade og ikke en
   foring med maalt tykkelse: kataloget oplyser ingen tykkelse, og den
   cirkel paa arket, der kunne have vaeret en foring, er ikke forklaret.
   Se hovedet af OR-afsnittet i tegninger.py. */
.pr-or-bane { fill: none; stroke: #6f767e; stroke-width: 3; }

/* rullen. Staal, som katalogets ordlyd siger: "a roller that describes
   an epicycloidal movement inside two housings made of hardened and
   ground steel". */
.pr-or-rulle { fill: #6f767e; stroke: var(--text-main); stroke-width: 1.2; }
/* de to cirkler inde i rullen tegnes IKKE -- se hovedet af
   OR-afsnittet i tegninger.py. Klasserne er fjernet igen. */

/* MAERKET paa rullen. En cylinder set for enden er en cirkel, og en
   cirkel kan ikke vise, at den drejer. Maerket er en TEGNEKONVENTION og
   ikke en del, kataloget naevner -- alt-teksten siger, at det er et
   maerke. */
.pr-or-maerke { fill: none; stroke: #d7dbe0; stroke-width: 1.6;
  stroke-linecap: round; }

/* DE TO BEVAEGELSER. Den ydre gruppe loeber RUNDT om boringens centrum
   (view-box og et transform-origin, der saettes pr. element i style);
   den indre drejer om SIN EGEN midte (fill-box). Med fill-box paa den
   ydre ville rullen have drejet om sig selv og staaet stille.

   TAKTERNE GAAR MED VILJE IKKE OP I HINANDEN. En OR65 loeber 317 til
   433 omgange i SEKUNDET, saa takten er i forvejen et symbol -- men
   omdrejningsFORHOLDET mellem rullen og omloebet er ikke oplyst nogen
   steder, og to takter, der gik op, ville paastaa et gearforhold, ingen
   kilde naevner. 1,1 og 1,7 sekund gaar ikke op. */
.pr-or-rot  { transform-box: view-box; transform-origin: var(--ox) var(--oy);
  animation-name: pr-drej; animation-timing-function: linear;
  animation-duration: 1.1s !important; animation-iteration-count: infinite !important; }
.pr-or-spin { transform-box: fill-box; transform-origin: center;
  animation-name: pr-drej; animation-timing-function: linear;
  animation-duration: 1.7s !important; animation-iteration-count: infinite !important; }

/* den aabne slids i foden. Samme greb som S': EEN streg med tykkelse og
   runde ender, ikke seks haandsatte hjoerner. */
.pr-or-slids { fill: none; stroke: var(--bg-main); }

/* de to porte i oversiden. Ens paa OR50, OR65 og OR80 -- samme gevind
   ind og ud. OR100 er den ene undtagelse, og den staar i tabellen, ikke
   i en farve. */
.pr-or-port { fill: none; stroke: #8d949c; stroke-linecap: round; }

/* bjaelkerne i trin 04. Sporet er den faste skala, bjaelken er
   vaerdien. De tre ark deler skala, saa forskellen kan laeses som en
   LAENGDE og ikke som tre tal i en tabel. */
.pr-or-spor    { fill: none; stroke: #d7dbe0; stroke-width: 9;
  stroke-linecap: butt; }
.pr-or-bjaelke { fill: none; stroke: #7f868d; stroke-width: 9;
  stroke-linecap: butt; }


/* ======================================================================
   OT -- turbinevibratorer. Familie nr. TRETTEN.
   Baggrunden for hver enkelt farve og hver enkelt fravalgt streg staar i
   hovedet af OT-afsnittet i tegninger.py.
   ====================================================================== */

/* det fjerne daeksel, set indefra. MATERIAL-feltet siger kun "Aluminium
   body", og daekslets materiale er derfor IKKE oplyst. Baade
   fotografierne og katalogets render viser et SORT rundt daeksel med
   fire huller -- men det er UDVENDIGT. Snittet viser INDERSIDEN af det
   fjerne daeksel, altsaa en flade BAG turbinen, og den tegnes derfor i
   et lyst neutralt graat som en baggrundsflade. Foerste udgave brugte
   fotografiets sorte, og hele boringen blev til en moerk skive, hvor
   hverken masserne eller lejet kunne laeses. Det kunne kun ses paa
   skaermbilledet. Ikke messing -- messing er OR's og betyder
   "brass cover". */
.pr-ot-daeksel { fill: #b9c0c7; stroke: #8d949c; stroke-width: 1; }

/* ringen inderst i boringen. Kataloget tegner den med en fin savtakket
   kant, men tandtallet kan ikke laeses -- hverken ved at taelle
   tandspidser eller ved en vinkel-FFT, hverken paa 400 eller 1200 dpi.
   Den tegnes derfor GLAT. Og den DREJER IKKE: om ringen er turbinens
   skovlkrans eller husets boringsvaeg kan ikke afgoeres af kilden, og
   en ring, der drejede, ville paastaa en arbejdsdeling, ingen kilde
   naevner. */
.pr-ot-ring { fill: none; stroke: #98a0a8; }

/* de fem integrerede masser. Lige store, alle 0,244 A fra aksen, og
   IKKE jaevnt fordelt: mellemrummene er 55,0 / 54,8 / 94,8 / 59,9 og
   95,5 grader. Det er ubalancen, og det er derfor der kommer en
   centrifugalkraft ud af det. */
.pr-ot-masse { fill: #6f767e; stroke: var(--text-main); stroke-width: 1.2; }

/* lejet. Det ENE indvendige, kataloget selv forklarer: "a higher
   rotation speed thanks to the presence of BEARINGS". Massernes
   inderste punkt og lejets ydre radius er fundet uafhaengigt af
   hinanden og er ens paa en femtedel pixel. */
.pr-ot-leje     { fill: #d7dbe0; stroke: var(--text-main); stroke-width: 1.2; }
.pr-ot-leje-hul { fill: #6f767e; stroke: var(--text-main); stroke-width: 1; }

/* EEN BEVAEGELSE OG EEN TRANSFORM-BOX. OR havde to -- rullen loeb rundt
   i banen OG drejede om sig selv -- og de to krsvede hver sin boks. OT
   har kun een: rotoren drejer om sin egen faste akse. Der er derfor
   view-box og et transform-origin sat pr. element, og ingen indre
   fill-box.

   TAKTEN ER ET SYMBOL. En OT20 loeber 242 til 383 omgange i SEKUNDET og
   en OT8 naar 700. Det kan ikke tegnes. */
.pr-ot-rot { transform-box: view-box; transform-origin: var(--ox) var(--oy);
  animation-name: pr-drej; animation-timing-function: linear;
  animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }

/* den aabne slids i foden. Samme greb som S' og OR's: EEN streg med
   tykkelse og runde ender. */
.pr-ot-slids { fill: none; stroke: var(--bg-main); }

/* de to porte i oversiden. Ens ind og ud paa hele serien. */
.pr-ot-port { fill: none; stroke: #8d949c; stroke-linecap: round; }

/* bjaelkerne i trin 04. Sporet er den faste skala, bjaelken er
   vaerdien. De tre ark deler skala, saa forskellen kan laeses som en
   LAENGDE -- og luftbjaelken er ens paa alle tre, hvilket er selve
   pointen: samme hus, samme luft, forskellig hastighed. */
.pr-ot-spor    { fill: none; stroke: #d7dbe0; stroke-width: 9;
  stroke-linecap: butt; }
.pr-ot-bjaelke { fill: none; stroke: #7f868d; stroke-width: 9;
  stroke-linecap: butt; }