/* Buchweite Gestaltung: Glossar-Tooltipps (P5) und Reglerwerkstatt (§6). */

/* ---- Glossar-Tooltipps (P5): unauffällig, feine gepunktete Linie ---- */
.gl-begriff {
  border-bottom: 1px dotted #9aa;
  cursor: help;
}
/* Kein Farbwechsel, kein Symbol — der Lesefluss bleibt unberührt. */

/* ---- Reglerwerkstatt ------------------------------------------------ */
.werkstatt {
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 1.2rem 0;
  background: #fbfcfd;
}
.werkstatt-kopf {
  font-weight: 600;
  margin-bottom: 8px;
  color: #24343f;
}
.werkstatt-bedien { margin-bottom: 8px; }
.werkstatt-bedien label { display: block; margin: 6px 0; font-size: 0.95rem; }
.werkstatt-bedien input[type=range].gl-schieber { width: 100%; }
.werkstatt-canvas {
  border: 1px solid #99a;
  background: #fff;
  max-width: 100%;
  display: block;
}
.werkstatt-antwort {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: #046;
  margin: 6px 0 0;
  min-height: 1.1em;
}

/* Fortschrittsanzeige beim Pyodide-Kaltstart (17–28 s, AP0). */
.werkstatt-fortschritt {
  position: relative;
  height: 20px;
  background: #eef1f4;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.werkstatt-fortschritt-balken {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, #4a90c2, #6bb);
  transition: width 0.3s ease;
}
.werkstatt-fortschritt-text {
  position: relative;
  font-size: 0.8rem;
  line-height: 20px;
  padding-left: 8px;
  color: #33454f;
}

/* Umschalter, Play/Reset-Knöpfe */
.werkstatt-bedien button {
  font: inherit;
  padding: 5px 12px;
  margin: 2px 6px 2px 0;
  border: 1px solid #4a90c2;
  border-radius: 5px;
  background: #eaf3fa;
  cursor: pointer;
}
.werkstatt-bedien button:hover { background: #d8ebf7; }

/* Gewichtsverteilung */
.gl-gewicht-zeile { display: flex; align-items: center; gap: 8px; }
.gl-gewicht-zeile input[type=range] { flex: 1; }
.gl-gewicht-proz { width: 3em; text-align: right; font-variant-numeric: tabular-nums; }

/* Formkurve */
.gl-formkurve { border: 1px solid #ccd; background: #fff; touch-action: none; }
.gl-formkurve-hinweis { font-size: 0.85rem; color: #667; margin: 4px 0; }
.gl-iter { font-variant-numeric: tabular-nums; color: #445; }

/* Anatomischer Kontext unter dem Titel jeder Reglerwerkstatt (P2:
   die Lernenden wissen jederzeit, wo im Fuß sie sind und wie sie
   darauf schauen). */
.werkstatt-kontext {
  font-size: 0.8rem;
  color: #666;
  margin: 0.15rem 0 0.5rem 0;
}

/* ---- Kapitel-Animationen (Abspielen/Anhalten) ---------------------- */
.kapitel-animation {
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 1.2rem 0;
  background: #fbfcfd;
}
.kapitel-animation .anim-canvas {
  border: 1px solid #99a;
  background: #fff;
  max-width: 100%;
  display: block;
}
.kapitel-animation .anim-bedien { margin-top: 8px; }
.kapitel-animation button {
  font: inherit;
  padding: 5px 12px;
  margin: 2px 6px 2px 0;
  border: 1px solid #4a90c2;
  border-radius: 5px;
  background: #eaf3fa;
  cursor: pointer;
}
.kapitel-animation button:hover { background: #d8ebf7; }

/* Abbildungen skalieren mit der Textspalte.
 *
 * Ohne diese Regel steht ein Abbildungsbild auf `max-width: none` (die
 * Canvas-Elemente oben haben ihre Regel, die Bilder hatten keine). Gemessen
 * am 1.9.2026: Bei 1100 px Fensterbreite ist die Textspalte 572 px breit,
 * während Bilder mit bis zu 701 px gerendert werden — sie ragten also aus
 * der Spalte. Bei breitem Fenster fiel das nicht auf.
 *
 * `height: auto` ist nötig, weil Quarto den Bildern feste width- UND
 * height-Attribute mitgibt; ohne die Regel würde das Bild beim Schrumpfen
 * verzerrt. */
figure img,
.quarto-figure img,
.cell-output-display img {
  max-width: 100%;
  height: auto;
}

/* ---- Abbildungen füllen die Textspalte ------------------------------ */
/* Quarto leitet die Anzeigebreite einer Abbildung aus der Zollangabe der
   Figur ab (rund 87 px je Zoll). Die figsize-Werte des Buches stammen aus
   der PDF-Zeit mit ihrer Satzbreite von etwa 6,5 Zoll; im HTML-Buch mit
   999 px breiter Spalte standen die 97 Abbildungen dadurch auf im Mittel
   63 % der Breite (die kleinste auf 27 %), mit entsprechend winziger
   Beschriftung. Autorentscheidung vom 1. September 2026: Statt 97 figsize-
   Angaben zu ändern, füllt jede Abbildung die Spalte. Der Preis ist
   bekannt: Die Bilder werden hochskaliert und verlieren die doppelte
   Pixeldichte, mit der Quarto sie ablegt.
   Alle 97 Abbildungen des Buches stehen in einem <figure>; Bilder
   ausserhalb gibt es nicht, der Selektor trifft also genau sie. */
figure img {
  width: 100%;
  height: auto;
}