/* =====================================================================
   styles.css — Hubkolbenverdichter, interaktives Funktionsmodell

   Gestaltungsidee: ein technisches Datenblatt, das man anfassen kann.
   Dunkler Hintergrund, damit der rohe Grauguss die hellste Fläche im
   Bild bleibt. Haarlinien statt Kästen, Ziffern in Monospace.

   DIE FARBREGEL, und sie gilt ohne Ausnahme: Farbe heisst Temperatur.
   --heiss ist der einzige Akzent und traegt zugleich die Bedienung
   (Kicker, Fokus, aktives Kapitel, gewaehltes Teil). --kalt kommt NUR
   an Temperatur- und Gaselementen vor: Legende, kalte Seite des
   p-h-Diagramms, Gasanteil der Energiebilanz. Nirgends sonst. Ein
   Verlauf ist nur dort erlaubt, wo er selbst die Temperaturskala ist.

   Abschnitte (gleiche Namen wie die data-sid im HTML):
     1. Marken, Schrift, Grundlagen
     2. buehne          — Canvas und 3D-Beschriftungen
     3. kopf            — Wortmarke und Kapitelschiene
     4. werkzeuge       — globale Regler
     5. inhalt          — Kapitel und Fließtext
     6. panel           — Teileliste, Montage, Steuerpult
     6d. kap-schnitt    — Temperaturlegende
     6e. kap-funktion   — Energiebilanz
     6f. kap-steuerpult — Instrumente p-V und p-h
     6g. kap-steuerpult — Gegenprobe-Tabelle
     6h. kap-quelle     — Unterlagenliste
     7. fuss
     8. schmal          — Telefon und Tablet
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. MARKEN, SCHRIFT, GRUNDLAGEN
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Grotesk';
  src: url('assets/space-grotesk-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: optional;
}
@font-face {
  font-family: 'Mono';
  src: url('assets/jetbrains-mono-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: optional;
}

:root {
  /* Grund und Stahl: neutrales Graphit statt des blaustichigen Schwarz
     der Pumpe, weil unlackierter Grauguss neutral grau ist und ein
     blauer Grund ihn kalt einfaerbt — und Kaelte ist hier eine Aussage
     und keine Stimmung. --theme-color in index.html ist derselbe Wert. */
  --tinte: #0b0b0c;
  --tinte-weich: #131315;
  --stahl-100: #eceded;
  --stahl-300: #b3b6b8;
  --stahl-500: #7c8083;
  --linie: rgba(178, 182, 186, 0.17);
  --linie-hell: rgba(178, 182, 186, 0.34);
  /* der einzige Akzent: Heissgas. Er traegt auch die Bedienung. */
  --heiss: #e2732b;
  --heiss-hell: #ef8f4d;
  /* nur an Temperatur- und Gaselementen, nie an Bedienelementen */
  --kalt: #5aa2d8;
  --warn: #e0685f;
  --gut: #7fc08c;
  --spalte: min(36rem, 40vw);
  --rand: clamp(1.25rem, 4vw, 3.5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--tinte);
  color: var(--stahl-300);
  font-family: 'Grotesk', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.06rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Der Textschleier: er liegt fest über dem Canvas, damit der Fließtext
   lesbar bleibt, ohne dass um jeden Absatz ein Kasten steht. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(11, 11, 12, 0.95) 0%,
    rgba(11, 11, 12, 0.86) 22%,
    rgba(11, 11, 12, 0.35) 42%,
    rgba(11, 11, 12, 0) 56%);
}

.skip {
  position: fixed; left: 0; top: 0; z-index: 100;
  transform: translateY(-120%);
  background: var(--heiss); color: #120a04;
  padding: 0.6rem 1rem; font-weight: 600; text-decoration: none;
}
.skip:focus { transform: none; }

:focus-visible { outline: 2px solid var(--heiss); outline-offset: 3px; }

/* ---------------------------------------------------------------------
   2. BUEHNE — Canvas und die am Modell hängenden Beschriftungen
   --------------------------------------------------------------------- */
/* Ueber dem Text (z 10), unter dem Kopf (z 20). pointer-events aus, sonst
   liegt eine unsichtbare Scheibe ueber jedem Link und jedem Absatz - gedreht
   wird ohnehin ueber Fenster-Handler, nicht ueber die Leinwand. */
#buehne { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
#szene { pointer-events: none; }

#standbild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%;
  transition: opacity 0.6s ease;
}
#standbild.weg { opacity: 0; }

#szene {
  display: block; width: 100%; height: 100%;
  touch-action: pan-y; cursor: grab;
  opacity: 0; transition: opacity 0.6s ease;
}
#szene.an { opacity: 1; }
#szene:active { cursor: grabbing; }

/* ---------------------------------------------------------------------
   Das Modell lässt sich von ÜBERALL drehen, nicht nur auf dem freien
   Canvas. Der Textstreifen liegt fest über dem Modell und ist auf dem
   Telefon die ganze Breite — wer dort zieht, will das Modell drehen und
   nicht den Absatz markieren. Der Zeiger sagt das vorher: sobald WebGL
   wach ist, zeigt die ganze Seite die greifende Hand. Bedienelemente
   behalten ihren eigenen Zeiger, weil sie ihre eigene Aufgabe haben.
   --------------------------------------------------------------------- */
body:has(#szene.an) { cursor: grab; }
body:has(#szene.an) a,
body:has(#szene.an) button,
body:has(#szene.an) label,
body:has(#szene.an) summary { cursor: pointer; }
/* Der Greifzeiger endet am Text: dort markiert die Maus, sie dreht nicht.
   Ein Zeiger, der Ziehen verspricht, wo in Wahrheit markiert wird, ist eine
   Luege — und umgekehrt genauso. Auf dem Touchgeraet gilt das nicht: dort
   dreht der Wisch weiterhin ueberall, und markiert wird per langem Druck. */
@media (pointer: fine) {
  body:has(#szene.an) .kapitel .text,
  body:has(#szene.an) .fussnote,
  body:has(#szene.an) dl.ablesung,
  body:has(#szene.an) footer { cursor: auto; }
}

body:has(#szene.an) input,
body:has(#szene.an) select,
body:has(#szene.an) textarea { cursor: auto; }

/* Während der Drehung: keine Textmarkierung, die über den Absatz schmiert. */
body.dreht { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* Waagerecht ziehen dreht das Modell, senkrecht scrollt die Seite.
   pinch-zoom bleibt ausdrücklich erlaubt — das Wegnehmen wäre eine
   Barriere für alle, die die Seite vergrößern müssen. */
body { touch-action: pan-y pinch-zoom; }
/* Schieberegler brauchen die Waagerechte für sich. */
input[type='range'] { touch-action: auto; }

/* Der Startknopf steht im Text, nicht auf dem Modell: er ist die
   tastaturbedienbare Variante des ersten Klicks aufs Canvas. */
#starten { margin-top: 1.1rem; }
#starten[hidden] { display: none; }

#marken { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#bestellmarke { position: absolute; inset: 0; pointer-events: none; z-index: 7; }

.marker {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'Mono', ui-monospace, monospace;
  font-size: 0.7rem; letter-spacing: 0.04em; line-height: 1.45;
  color: var(--stahl-100);
  white-space: nowrap;
  padding: 0.4rem 0.65rem;
  background: rgba(11, 11, 12, 0.72);
  border-left: 1px solid var(--heiss);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.45s ease;
}
.marker.an { opacity: 1; }
.marker b { display: block; font-weight: 500; }
.marker i { font-style: normal; color: var(--stahl-500); font-size: 0.66rem; }


/* Aufnahme-Modus: index.html?standbild=1 zeigt nur das Canvas, damit das
   Standbild aus genau derselben Szene aufgenommen werden kann. */
body.aufnahme header,
body.aufnahme main,
body.aufnahme footer,
body.aufnahme #werkzeuge,
body.aufnahme #marken,
body.aufnahme #bestellmarke,
body.aufnahme #standbild,
body.aufnahme #starten,
body.aufnahme::before { display: none !important; }
body.aufnahme #szene { opacity: 1; }

/* ---------------------------------------------------------------------
   3. KOPF — Wortmarke links, Kapitelschiene rechts
   --------------------------------------------------------------------- */
header {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  /* Waagerecht der Seitenrand, senkrecht deutlich weniger: mit var(--rand)
     oben und unten war der Kopf auf einem 1920er Schirm 159 px hoch, obwohl
     die Wortmarke nur 47 braucht - ein Balken quer durchs Modell. Jetzt
     71 px, also so hoch wie sein Inhalt. */
  padding: 0.75rem var(--rand); pointer-events: none;
}

/* Der Text laeuft unter dem Modell durch - und muss auch unter dem Kopf
   durchlaufen. Der Kopf liegt zwar darueber, hatte aber keinen Grund, also
   stand beides gleichzeitig da. Deckend ueber die GANZE Kopfhoehe, und erst
   in den 1,6rem darunter ausgeblendet: ein Verlauf, der schon im Kopf selbst
   duenn wird, laesst genau die Zeile durch, die gerade vorbeikommt. */
header::before {
  content: ''; position: absolute; z-index: -1;
  top: 0; left: 0; right: 0; height: calc(100% + 1.6rem);
  background: linear-gradient(180deg,
    var(--tinte) 0%,
    var(--tinte) calc(100% - 1.6rem),
    transparent 100%);
  pointer-events: none;
}


.marke { pointer-events: auto; }
.marke-name {
  display: block; font-weight: 600; letter-spacing: -0.01em;
  color: var(--stahl-100); font-size: 1.02rem;
}
.marke-note {
  display: block; font-family: 'Mono', monospace;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stahl-500); margin-top: 0.15rem;
}

/* Kapitelschiene und Sprache stehen in EINER Zeile rechts im Kopf. Als
   Raster untereinander wuchs der Kopf auf zwei Reihen und damit fast doppelt
   so hoch, wie die Wortmarke braucht — auf breiten Schirmen ein Balken quer
   durchs Bild. Der Abstand ist derselbe wie zwischen zwei Kapiteleintraegen,
   damit die Sprache als weiterer Eintrag derselben Zeile liest. */
.kopf-rechts { pointer-events: auto; display: flex; align-items: center; gap: 1.15rem; }

/* SPRACHE — ein Knopf, vier Sprachen. Die Liste liegt absolut ueber der
   Seite, damit das Oeffnen nichts verschiebt (CLS bleibt 0); der Knopf ist
   so breit wie das alte "DE · EN" und der Kopf ruehrt sich nicht. */
#sprache { position: relative; display: flex; align-items: center; }
.sprache-knopf {
  background: none; border: 0; cursor: pointer; padding: 0.1rem 0.15rem;
  display: inline-flex; align-items: center; gap: 0.28rem;
  font-family: 'Mono', monospace; font-size: 0.68rem; letter-spacing: 0.1em;
  color: var(--stahl-100); transition: color 0.2s;
}
.sprache-knopf:hover { color: var(--heiss); }
.sprache-knopf i { font-style: normal; font-size: 0.6rem; color: var(--stahl-500); }
#sprache-liste {
  position: absolute; z-index: 40; top: calc(100% + 0.5rem); right: 0;
  margin: 0; padding: 0.3rem 0; list-style: none; min-width: 7.5rem;
  background: var(--tinte-weich); border: 1px solid var(--linie-hell);
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.45);
}
#sprache-liste[hidden] { display: none; }
#sprache-liste li {
  padding: 0.34rem 0.85rem; cursor: pointer; white-space: nowrap;
  font-size: 0.78rem; color: var(--stahl-300); transition: color 0.15s, background 0.15s;
}
#sprache-liste li:hover { background: rgba(178, 182, 186, 0.08); color: var(--stahl-100); }
#sprache-liste li[aria-selected='true'] { color: var(--heiss); }

/* EINE ZEILE, nicht eine Spalte. Als Liste untereinander zog die Schiene
   sich ueber ein Viertel der Bildhoehe und schob sich auf breiten Schirmen
   quer durchs Bild; acht kurze Woerter passen nebeneinander in den Kopf und
   nehmen dort keinen Platz weg, den das Modell braucht. */
#schiene { display: flex; align-items: center; gap: 1.15rem; }
/* Die Eintraege sind Verweise auf die Kapitel-Kennungen (js/main.js),
   sehen aber aus wie zuvor: keine Unterstreichung ausser der Marke der
   aktuellen Seite. */
#schiene a {
  background: none; border: 0; cursor: pointer; text-decoration: none;
  padding: 0.2rem 0 0.32rem; border-bottom: 1px solid transparent;
  font-family: 'Mono', monospace; font-size: 0.68rem; letter-spacing: 0.07em;
  color: var(--stahl-500); text-transform: uppercase; white-space: nowrap;
  transition: color 0.2s, border-color 0.25s;
}
#schiene a:hover { color: var(--stahl-300); }
#schiene a[aria-current='true'] { color: var(--heiss); }
#schiene a[aria-current='true'] { border-bottom-color: var(--heiss); }

/* ---------------------------------------------------------------------
   4. WERKZEUGE — die drei Regler, die immer verfügbar bleiben
   --------------------------------------------------------------------- */
#werkzeuge {
  position: fixed; z-index: 20; right: var(--rand); bottom: var(--rand);
  display: flex; align-items: flex-end; gap: 1.05rem; flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 0.9rem; border-top: 1px solid var(--linie);
  max-width: min(44rem, 56vw);
  animation: auf 0.5s ease both;
}
@keyframes auf { from { opacity: 0; transform: translateY(0.6rem); } }

.wz { display: grid; gap: 0.35rem; }
.wz span {
  font-family: 'Mono', monospace; font-size: 0.63rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--stahl-500);
}

input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 7rem; height: 1rem; background: none; cursor: pointer; margin: 0;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 1px; background: var(--linie-hell);
}
input[type='range']::-moz-range-track { height: 1px; background: var(--linie-hell); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 0.75rem; height: 0.75rem; margin-top: -0.37rem;
  background: var(--stahl-100); border: 0; border-radius: 50%;
}
input[type='range']::-moz-range-thumb {
  width: 0.75rem; height: 0.75rem; background: var(--stahl-100);
  border: 0; border-radius: 50%;
}
input[type='range']:hover::-webkit-slider-thumb { background: var(--heiss); }
input[type='range']:hover::-moz-range-thumb { background: var(--heiss); }

.knopf {
  font-family: 'Mono', monospace; font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--stahl-100); background: none;
  border: 1px solid var(--linie-hell); padding: 0.5rem 0.85rem;
  cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.knopf:hover { border-color: var(--heiss); color: var(--heiss); }
.knopf b { color: var(--heiss); font-weight: 500; }
.knopf-still { color: var(--stahl-500); border-color: var(--linie); }
.knopf[disabled] { opacity: 0.35; cursor: default; }
.knopf[disabled]:hover { border-color: var(--linie); color: var(--stahl-500); }

/* ---------------------------------------------------------------------
   5. INHALT — die Kapitel scrollen, das Modell bleibt stehen
   --------------------------------------------------------------------- */
main { position: relative; z-index: 10; pointer-events: none; }

.kapitel {
  min-height: 118vh;
  display: flex; align-items: center;
  padding: 8rem var(--rand) 8rem;
}
.kapitel .text { width: var(--spalte); pointer-events: auto; }

.kicker {
  font-family: 'Mono', monospace; font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--heiss); margin: 0 0 1rem;
}

h1, h2 {
  font-weight: 500; letter-spacing: -0.025em; line-height: 1.05;
  color: var(--stahl-100); margin: 0 0 1.2rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }

.kapitel p { margin: 0 0 1rem; max-width: 34rem; }
.lead { font-size: 1.1em; color: var(--stahl-300); }
.hinweis, .fussnote {
  font-family: 'Mono', monospace; font-size: 0.7rem; line-height: 1.75;
  letter-spacing: 0.03em; color: var(--stahl-500);
}
.hinweis { margin-top: 2rem; }
.fussnote { margin-top: 1.5rem; border-left: 1px solid var(--linie); padding-left: 0.9rem; }

a { color: var(--stahl-100); text-decoration-color: var(--linie-hell); text-underline-offset: 0.2em; }
a:hover { color: var(--heiss); }

/* ---------------------------------------------------------------------
   6. PANEL — Teileliste, Montage, Steuerpult
   --------------------------------------------------------------------- */
.panel {
  margin-top: 1.8rem; border-top: 1px solid var(--linie);
  padding-top: 1.1rem;
}

#teileliste { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 1.4rem; }
#teileliste button {
  display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline;
  text-align: left; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--linie);
  padding: 0.42rem 0; cursor: pointer;
  font-family: 'Mono', monospace; font-size: 0.7rem; letter-spacing: 0.02em;
  color: var(--stahl-300); transition: color 0.18s, border-color 0.18s;
}
#teileliste button em { font-style: normal; color: var(--stahl-500); font-size: 0.63rem; }
#teileliste button:hover { color: var(--stahl-100); border-color: var(--linie-hell); }
#teileliste button[aria-selected='true'] { color: var(--heiss); border-color: var(--heiss); }

.panel-info { border-top-color: var(--heiss); }
.panel-info h3 {
  margin: 0 0 0.2rem; font-size: 1.15rem; font-weight: 500; color: var(--stahl-100);
}
/* die Positionsnummer aus der Herstellerzeichnung */
.panel-info h3 i {
  font-style: normal; font-family: 'Mono', monospace; font-size: 0.62rem;
  color: var(--stahl-500); letter-spacing: 0.08em; vertical-align: 0.35em;
}
.panel-info .werkstoff {
  font-family: 'Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--heiss); margin: 0 0 0.7rem;
}
.panel-info p { font-size: 0.95rem; }
/* die Handbuch-Details unter dem Absatz: gleiche Fussnote wie im Kapitel 03,
   nur muss die Groesse zurueckgeholt werden, die .panel-info p ueberschreibt */
.panel-info .fussnote { font-size: 0.7rem; }
.panel-info button { margin-top: 0.4rem; }

/* Der Bestellknopf im Panel gibt es nur auf schmalen Schirmen, wo die Marke
   am Modell nicht hin kann (main.js, WIDE_ENOUGH_FOR_TAG). Er ist gefuellt,
   nicht umrandet: unter lauter Umrissknoepfen ist Fuellung das, was auffaellt. */
.knopf-bestellen {
  background: var(--heiss); border-color: var(--heiss); color: var(--tinte);
  font-weight: 600; margin: 0 0 1.1rem;
}
.knopf-bestellen:hover { background: #ef8f4d; border-color: #ef8f4d; color: var(--tinte); }

/* ---------------------------------------------------------------------
   6c. BESTELLMARKE — der Bestellknopf haengt am gewaehlten Teil im Modell.
   Sie liegt in #marken (pointer-events:none), also muss sie ihre Klicks
   selbst wieder einschalten. Position setzt main.js pro Frame.
   --------------------------------------------------------------------- */
.bestell-marke {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  pointer-events: auto;
  opacity: 0; transition: opacity 0.35s ease;
}
.bestell-marke.an { opacity: 1; }
/* die Leine vom Teil hinunter zur Marke */
.bestell-marke .bm-leine {
  width: 1px; height: 1.6rem; background: linear-gradient(var(--heiss), var(--heiss));
  opacity: 0.75;
}
.bestell-marke .bm-name {
  font-family: 'Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--stahl-100); white-space: nowrap;
  background: rgba(11, 11, 12, 0.82); padding: 0.28rem 0.6rem;
  border: 1px solid var(--linie);
}
.bestell-marke .bm-name i { font-style: normal; color: var(--stahl-500); }
/* gefuellt, damit er aus einem Bild voller Umrisse herausspringt */
.bestell-marke .bm-knopf {
  font-family: 'Mono', monospace; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinte); background: var(--heiss); border: 1px solid var(--heiss);
  padding: 0.5rem 1.1rem; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(226, 115, 43, 0.55);
  animation: bm-puls 2.6s ease-out 3;
  transition: background 0.18s, box-shadow 0.18s;
}
.bestell-marke .bm-knopf:hover { background: #ef8f4d; box-shadow: 0 0 18px rgba(226,115,43,0.45); }
/* drei Pulse beim Erscheinen: das Auge steht beim Klick auf dem Teil, nicht
   auf dem Knopf, der eine Zeile darunter neu auftaucht */
@keyframes bm-puls {
  0%   { box-shadow: 0 0 0 0 rgba(226, 115, 43, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(226, 115, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 115, 43, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bestell-marke .bm-knopf { animation: none; }
  .bestell-marke { transition: none; }
}

/* ---------------------------------------------------------------------
   6b. BESTELLHINWEIS — der Dialog hinter dem Bestellknopf.
   Er liegt ausserhalb von <main>, also gilt dessen pointer-events:none
   hier nicht; ein <dialog> im Modal-Modus faengt die Eingaben ohnehin ab.
   --------------------------------------------------------------------- */
#bestell-dialog {
  max-width: min(30rem, calc(100vw - 2rem));
  border: 1px solid var(--linie-hell); border-top: 1px solid var(--heiss);
  background: var(--tinte-weich); color: var(--stahl-300);
  padding: 1.6rem 1.7rem 1.4rem;
}
#bestell-dialog::backdrop { background: rgba(11, 11, 12, 0.72); }
#bestell-dialog h2 {
  margin: 0 0 0.2rem; font-size: 1.15rem; font-weight: 500; color: var(--stahl-100);
}
/* Name und Positionsnummer des gewaehlten Teils, gesetzt in main.js */
#bestell-dialog .bestell-teil {
  font-family: 'Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--heiss); margin: 0 0 0.9rem;
}
#bestell-dialog p { font-size: 0.9rem; line-height: 1.6; }
#bestell-dialog button { margin-top: 1rem; }

.panel-schritt .schritt-zahl {
  font-family: 'Mono', monospace; font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stahl-500); margin: 0 0 0.5rem;
}
.schritt-name { font-size: 1.2rem; color: var(--stahl-100); margin: 0 0 0.4rem; }
.schritt-text { min-height: 5.2em; }
.schritt-knoepfe { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fortschritt { height: 1px; background: var(--linie); }
#fortschritt-balken { height: 1px; background: var(--heiss); width: 0; transition: width 0.4s ease; }

.panel-pult { display: grid; gap: 1.15rem; }
.regler { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; align-items: baseline; }
.regler input { grid-column: 1 / -1; width: 100%; }
.regler-name {
  font-family: 'Mono', monospace; font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--stahl-500);
}
.regler-wert {
  font-family: 'Mono', monospace; font-size: 0.78rem; color: var(--stahl-100);
  font-variant-numeric: tabular-nums;
}

.ablesung {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.4rem;
  margin: 0.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--linie);
}
.ablesung div { display: grid; gap: 0.15rem; }
.ablesung dt {
  font-family: 'Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--stahl-500);
}
.ablesung dd {
  margin: 0; font-family: 'Mono', monospace; font-size: 1.35rem;
  color: var(--stahl-100); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ablesung dd small { font-size: 0.62rem; color: var(--stahl-500); letter-spacing: 0.06em; }

.status {
  font-family: 'Mono', monospace; font-size: 0.72rem; line-height: 1.6;
  border-left: 2px solid var(--gut); padding-left: 0.8rem; color: var(--stahl-300);
  margin: 0;
}
.status[data-art='warn'] { border-color: var(--warn); color: var(--warn); }

/* Die zweite Reihe des Pults: Frequenz und Kaeltemittel sind Umschalter
   und keine Regler, stehen aber in derselben Spalte. */
.pult-zeile { display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; align-items: flex-end; }
.regler-schalter, .regler-wahl { grid-template-columns: auto; }

#ctl-hz { display: flex; gap: 0.7rem; }
#ctl-hz button {
  background: none; border: 0; cursor: pointer; padding: 0.1rem 0;
  border-bottom: 1px solid transparent;
  font-family: 'Mono', monospace; font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--stahl-500); transition: color 0.2s, border-color 0.25s;
}
#ctl-hz button:hover { color: var(--stahl-300); }
#ctl-hz button[aria-pressed='true'] { color: var(--heiss); border-bottom-color: var(--heiss); }

/* Kein Auswahlfeld mehr, sondern der gesetzte Wert (index.html). */
.regler-fest {
  font-family: 'Mono', monospace; font-size: 0.78rem;
  color: var(--stahl-100); padding: 0.15rem 0 0.2rem;
}

/* DIE SKALA UNTER DEM REGLER ist der veroeffentlichte Einsatzbereich.
   Der Regler selbst laeuft weiter, denn Ueberfahren ist erlaubt und
   gehoert zur Aussage der Seite; die Klammer zeigt nur, wo BITZERs
   Diagramm aufhoert. left/width stehen im Markup, weil sie aus min und
   max des jeweiligen Reglers gerechnet sind. */
.regler .skala, .regler .skala-text { grid-column: 1 / -1; }
.skala { position: relative; display: block; height: 0.45rem; margin-top: -0.3rem; }
.skala-band {
  position: absolute; top: 0; height: 0.3rem; display: block;
  border: 1px solid var(--linie-hell); border-top: 0;
}
.skala-text {
  font-family: 'Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em;
  color: var(--stahl-500);
}

/* ---------------------------------------------------------------------
   6d. KAP-SCHNITT — die Temperaturlegende

   Der einzige Verlauf der Seite, der erlaubt ist: er IST die
   Temperaturskala. Beide Endwerte schreibt main.js aus dem geloesten
   Betriebspunkt fort, damit die Legende nie etwas anderes behauptet
   als das Modell daneben.
   --------------------------------------------------------------------- */
.legende { display: flex; align-items: center; gap: 0.8rem; margin: 1.8rem 0 0.7rem; }
.legende-band {
  flex: 1 1 auto; height: 3px; min-width: 3rem;
  background: linear-gradient(90deg, var(--kalt), var(--heiss));
}
.legende-wert {
  font-family: 'Mono', monospace; font-size: 0.7rem; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; color: var(--kalt); white-space: nowrap;
}
.legende-wert-heiss { color: var(--heiss); }

/* ---------------------------------------------------------------------
   6e. KAP-FUNKTION — die Energiebilanz

   Ein Balken, zwei Abschnitte, drei beschriftete Zahlen. Der Gasanteil
   traegt den Temperaturverlauf, weil genau das seine Aussage ist: was
   als Strom hineingeht, geht als warmes Gas hinaus.
   --------------------------------------------------------------------- */
.bilanz { border-top-color: var(--linie-hell); }
.bilanz-balken { display: flex; height: 0.55rem; margin-bottom: 1.1rem; }
.bilanz-seg { height: 100%; }
.bilanz-gas { background: linear-gradient(90deg, var(--kalt), var(--heiss)); }
.bilanz-huelle { background: var(--stahl-500); }

.bilanz-werte {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.9rem 1.4rem; margin: 0 0 0.4rem;
}
.bilanz-werte div { display: grid; gap: 0.15rem; }
.bilanz-werte dt {
  font-family: 'Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--stahl-500);
}
.bilanz-werte dd {
  margin: 0; font-family: 'Mono', monospace; font-size: 1.15rem;
  color: var(--stahl-100); font-variant-numeric: tabular-nums;
}
.bilanz-werte dd small { font-size: 0.6rem; color: var(--stahl-500); letter-spacing: 0.06em; }
/* die zwei Farbtupfer verbinden Zahl und Balkenabschnitt */
.bilanz-marke-gas dt::before,
.bilanz-marke-huelle dt::before {
  content: ''; display: inline-block; width: 0.5rem; height: 0.5rem;
  margin-right: 0.4rem; vertical-align: 0;
}
.bilanz-marke-gas dt::before { background: var(--heiss); }
.bilanz-marke-huelle dt::before { background: var(--stahl-500); }

/* ---------------------------------------------------------------------
   6f. KAP-STEUERPULT — die beiden Instrumente

   Beide SVG liegen im Markup und werden nicht nachgeladen. Die Achsen
   sind Haarlinien in derselben Staerke wie jede andere Linie der Seite,
   die Beschriftung ist Monospace, und die einzige farbige Linie ist die
   Kurve selbst: Heissgas fuer den Kreisprozess, Kaltblau fuer die
   Sattdampfkurve, weil sie die Temperaturgrenze des Stoffes ist.
   --------------------------------------------------------------------- */
.instrument { margin: 2.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.instrument figcaption,
.instrument-titel {
  font-family: 'Mono', monospace; font-size: 0.63rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--stahl-500);
  margin: 0 0 0.8rem;
}
.instrument-titel { margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); }

.diagramm { display: block; width: 100%; height: auto; }
.diagramm .achse { stroke: var(--linie-hell); stroke-width: 1; }
.diagramm .netz { stroke: var(--linie); stroke-width: 1; }
.diagramm .hilfslinie { stroke: var(--linie-hell); stroke-width: 1; stroke-dasharray: 2 3; }
.diagramm .kurve {
  fill: none; stroke: var(--heiss); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round;
}
#pv-schleife { fill: rgba(226, 115, 43, 0.1); }
.diagramm .dome { fill: none; stroke: var(--kalt); stroke-width: 1.2; }
.diagramm .punkt { fill: var(--stahl-100); }
.diagramm .punkt-hilfe { fill: none; stroke: var(--stahl-500); stroke-width: 1; }
.diagramm text { font-family: 'Mono', monospace; fill: var(--stahl-500); }
.diagramm .tick { font-size: 8px; font-variant-numeric: tabular-nums; }
.diagramm .marke { font-size: 8.5px; fill: var(--stahl-300); }
.diagramm .achsentext { font-size: 9px; letter-spacing: 0.08em; }

/* ---------------------------------------------------------------------
   6g. KAP-STEUERPULT — die Gegenprobe

   Haarlinien, keine Kaesten, Ziffern mit fester Breite, damit die
   Spalten untereinander lesbar bleiben. Die drei Modellspalten tragen
   den Akzent: sie sind das, was diese Seite behauptet, und daneben
   stehen unveraendert BITZERs eigene Zahlen.
   --------------------------------------------------------------------- */
.tabelle-rolle { overflow-x: auto; margin-top: 0.4rem; }
#gegenprobe {
  border-collapse: collapse; width: 100%; min-width: 27rem;
  font-family: 'Mono', monospace; font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}
#gegenprobe caption {
  caption-side: bottom; text-align: left; padding-top: 0.7rem;
  font-size: 0.62rem; line-height: 1.6; letter-spacing: 0.02em;
  color: var(--stahl-500);
}
#gegenprobe th, #gegenprobe td {
  border-bottom: 1px solid var(--linie);
  padding: 0.38rem 0.55rem 0.38rem 0; text-align: right; font-weight: 400;
}
#gegenprobe thead th {
  color: var(--stahl-500); text-transform: uppercase;
  font-size: 0.57rem; letter-spacing: 0.08em;
  border-bottom-color: var(--linie-hell);
}
/* der Betriebspunkt bleibt einzeilig: "-10 / 45" ueber zwei Zeilen
   gebrochen liest sich wie zwei Punkte */
#gegenprobe tbody th { text-align: left; color: var(--stahl-300); white-space: nowrap; }
#gegenprobe tbody td { color: var(--stahl-300); }
#gegenprobe tbody td:nth-child(3),
#gegenprobe tbody td:nth-child(5),
#gegenprobe tbody td:nth-child(7) { color: var(--heiss); }

/* ---------------------------------------------------------------------
   6h. KAP-QUELLE — die Liste der Unterlagen
   --------------------------------------------------------------------- */
.quellen-titel {
  font-family: 'Mono', monospace; font-size: 0.63rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--stahl-500);
  margin: 2rem 0 0.2rem;
}
.quellen { list-style: none; margin: 0 0 1.8rem; padding: 0; max-width: 44rem; }
.quellen li {
  border-top: 1px solid var(--linie); padding: 0.7rem 0;
  font-size: 0.88rem; line-height: 1.6;
}

.kapitel-quelle { min-height: auto; padding-bottom: 4rem; }
.kapitel-quelle .text { width: min(44rem, 92vw); }
.kapitel-quelle p { max-width: 44rem; font-size: 0.92rem; }

/* ---------------------------------------------------------------------
   7. FUSS
   --------------------------------------------------------------------- */
/* Halbtransparent, damit das Modell auch unter dem Fuß noch da ist: es
   soll über die ganze Länge der Seite sichtbar und drehbar bleiben. */
footer {
  position: relative; z-index: 10;
  padding: 2rem var(--rand) 3rem; border-top: 1px solid var(--linie);
  font-family: 'Mono', monospace; font-size: 0.68rem; color: var(--stahl-500);
  background: rgba(11, 11, 12, 0.78);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
footer p { margin: 0; }

/* Das Studio-Siegel steht im normalen Fluss hinter dem Footer. Ohne
   position/z-index läge es hinter dem fixierten Canvas (z-index 1). */
/* isolate: das Siegel nutzt mix-blend-mode: difference. Ohne eigenen
   Stapelkontext mischt es sich mit dem fixierten Canvas dahinter und
   taucht dann an der falschen Stelle im Bild auf. */
.wdm-seal { position: relative; z-index: 10; background: var(--tinte); isolation: isolate; }

/* ---------------------------------------------------------------------
   8. SCHMAL — Telefon und Tablet
   Das Modell bleibt im Hintergrund, der Schleier dreht sich von der
   Seite nach unten, damit der Text über dem Bild lesbar wird.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Beide Masse des Telefon-Layouts stehen HIER und nur hier: die Kopfhoehe
     und die Bandhoehe des Modells. Kapiteltext und Buehne rechnen mit
     denselben Werten, sonst schiebt sich eines unter das andere. */
  :root { --spalte: 100%; --kopf-h: 6.9rem; --buehne-h: 44vh; }

  /* Keep enough tint at the very top for the wordmark, then get out of
     the model's way, then close in again where the copy starts. */
  body::before {
    background: linear-gradient(180deg,
      rgba(11, 11, 12, 0.72) 0%,
      rgba(11, 11, 12, 0.18) 13%,
      rgba(11, 11, 12, 0.2) 34%,
      rgba(11, 11, 12, 0.88) 46%,
      rgba(11, 11, 12, 0.97) 58%);
  }

  .kapitel {
    min-height: 100vh; align-items: flex-start;
    /* faengt genau unter dem Modellband an, plus eine Zeile Luft */
    padding: calc(var(--kopf-h) + var(--buehne-h) + 1.3rem) var(--rand) 5rem;
  }

  /* Der Absatz behaelt seinen eigenen Grund - randlos, damit daraus keine
     Karte wird. main bleibt bei z-index 10 und laeuft damit UNTER dem
     Modellband durch; das ist der ganze Sinn des Bandes. */
  .kapitel .text {
    background: color-mix(in srgb, var(--tinte) 88%, transparent);
    padding: 1.15rem var(--rand);
    margin: 0 calc(var(--rand) * -1);
  }

  header { flex-direction: column; gap: 0.9rem; }
  /* Auch schmal EINE Zeile: die Schiene rollt, die Sprache steht rechts
     daneben und rollt nicht mit. */
  .kopf-rechts { width: 100%; }
  #schiene {
    display: flex; gap: 0.9rem; justify-items: start;
    /* min-width:0 stops the flex item from growing to its content width
       and poking past the header padding */
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
    /* Zwei Kapitel stehen rechts ausserhalb. Die Kante faengt frueh genug an
       auszublenden, dass sie als Schnitt gelesen wird und nicht als Ende der
       Liste; -webkit- mit, weil aeltere Mobil-Chrome nur das kennen. */
    -webkit-mask-image: linear-gradient(90deg, #000 72%, rgba(0, 0, 0, 0.12));
    mask-image: linear-gradient(90deg, #000 72%, rgba(0, 0, 0, 0.12));
  }
  #schiene a { flex: 0 0 auto; }
  #schiene::-webkit-scrollbar { display: none; }
  #schiene a::after { display: none; }

  /* DAS MODELL IST EIN FESTES BAND OBEN, kein Bild hinter dem ganzen Text.
     Es steht unter dem Kopf, ist --buehne-h hoch, deckend, und der
     Kapiteltext laeuft darunter durch und wird an seiner Kante beschnitten.
     Vorher lag der Text UEBER dem Modell (main z-index 16) und verdeckte es
     beim Lesen - auf dem Telefon war die Maschine nach dem ersten Wisch weg.
     Beide Masse sind fest und stehen im :root oben, nichts wird gemessen
     oder nachtraeglich gesetzt -> CLS bleibt 0. */
  #buehne {
    top: var(--kopf-h); height: var(--buehne-h); bottom: auto;
    background: var(--tinte); border-bottom: 1px solid var(--linie);
  }


  /* One row, nothing wrapped, and the page gets matching bottom padding
     so no text can end up hidden behind it. */
  #werkzeuge {
    left: 0; right: 0; bottom: 0; max-width: none;
    padding: 0.6rem var(--rand) 0.75rem;
    gap: 0.85rem; flex-wrap: nowrap; justify-content: space-between;
    background: rgba(11, 11, 12, 0.94);
    backdrop-filter: blur(6px); border-top: 1px solid var(--linie);
  }
  input[type='range'] { width: 4.6rem; }
  /* the view resets itself on every chapter change — on a phone the
     button costs more room than it saves */
  #wz-view { display: none; }
  footer { padding-bottom: 6rem; }
  .kapitel-quelle { padding-bottom: 6rem; }

  #schiene a { font-size: 0.6rem; letter-spacing: 0.05em; }
  .marker { font-size: 0.62rem; white-space: normal; max-width: 62vw; }
  #teileliste { grid-template-columns: 1fr; }
  .ablesung { grid-template-columns: 1fr 1fr; }

  /* Die Gegenprobe bleibt eine Tabelle und wird nicht zu Karten
     umgebaut: sieben Zeilen mit sechs Zahlen sind nur nebeneinander
     vergleichbar. Sie rollt in ihrem eigenen Kasten, die Seite nicht. */
  #gegenprobe { font-size: 0.62rem; min-width: 0; }
  #gegenprobe th, #gegenprobe td { padding-right: 0.35rem; }
  #gegenprobe thead th { font-size: 0.53rem; letter-spacing: 0.04em; }
  .legende { gap: 0.55rem; }
  .legende-wert { font-size: 0.64rem; }
}

/* ---------------------------------------------------------------------
   SEHR SCHMALE TELEFONE — der Lesbarkeitsboden
   Die Mono-Beschriftungen stehen bei 0,6-0,64rem, auf einem 390er Geraet
   sind das 9,6-10,2 px. Auf Armlaenge ist das keine Schrift mehr, sondern
   ein Muster. 12 px ist der Boden. Der Reglerknopf bleibt gleich gross -
   nur seine Trefferflaeche waechst auf 24 px, damit ein Daumen sie trifft.
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  .regler-name,
  .skala-text,
  .ablesung dt,
  .ablesung dd small,
  .bilanz-werte dt,
  .bilanz-werte dd small { font-size: 0.75rem; }

  input[type='range'] { height: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------
   9. RAHMEN-MODUS — die Seite als Modell im Fenster einer anderen Seite
   ---------------------------------------------------------------------
   index.html?rahmen=1 setzt html.im-rahmen (Inline-Skript im <head>).
   WARUM: die Studio-Seite zeigt dieses Modell in einem kleinen Fenster
   (auf dem Telefon rund 400 x 560 px). Die ganze Seite passt dort nicht
   hinein: Kopf, Kapitelleiste, Ueberschrift und Fliesstext druecken das
   Modell zusammen oder liegen darauf. Im Rahmen ist die Seite deshalb nur
   noch das Modell und die Regler, die es bedienen. Alles andere bleibt im
   Dokument, wird aber nicht gezeigt.
   Ohne den Parameter greift keine dieser Regeln — die eigenstaendige
   Seite sieht aus wie vorher.
   --------------------------------------------------------------------- */
html.im-rahmen, html.im-rahmen body { height: 100%; overflow: hidden; }
html.im-rahmen header,
html.im-rahmen main,
html.im-rahmen footer,
html.im-rahmen .skip,
html.im-rahmen .wdm-seal,
html.im-rahmen body::before { display: none !important; }
/* Die Leinwand endet ueber der Reglerzeile, statt unter ihr durchzulaufen:
   so sitzt das Modell in der Mitte der FREIEN Flaeche und nichts liegt darauf. */
html.im-rahmen #buehne { top: 0; bottom: 4rem; height: auto; border-bottom: 0; }
/* Die Regler als eine Zeile ueber die ganze Breite, auch im breiten Fenster —
   unten rechts stuenden sie dort vor dem Modell. */
html.im-rahmen #werkzeuge {
  left: 0; right: 0; bottom: 0; max-width: none;
  height: 4rem; box-sizing: border-box; padding: 0 var(--rand);
  gap: 1rem; flex-wrap: nowrap; align-items: center; justify-content: center;
  background: rgba(11, 11, 12, 0.94); border-top: 1px solid var(--linie);
  animation: none;
}