@jjlmoya/utils-science 1.27.0 → 1.29.0

package/src/tool/phase-diagram-critical-points/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'NIST Chemistry WebBook',
+    url: 'https://webbook.nist.gov/chemistry/',
+  },
+  {
+    name: 'OpenStax Chemistry 2e, Phase Diagrams',
+    url: 'https://openstax.org/books/chemistry-2e/pages/10-4-phase-diagrams',
+  },
+  {
+    name: 'IUPAC Gold Book, Critical Point',
+    url: 'https://goldbook.iupac.org/terms/view/C01396',
+  },
+];

package/src/tool/phase-diagram-critical-points/component.astro

@@ -0,0 +1,397 @@
+---
+import './phase-diagram-critical-points-visualizer.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="phase-lab" id="phase-lab">
+  <section class="phase-panel phase-controls" aria-label={ui.controls}>
+    <label class="phase-field" for="phase-substance">
+      <span>{ui.substance}</span>
+      <select id="phase-substance">
+        <option value="water">Water</option>
+        <option value="carbon-dioxide">Carbon dioxide</option>
+        <option value="nitrogen">Nitrogen</option>
+      </select>
+    </label>
+
+    <label class="phase-field" for="phase-units">
+      <span>{ui.units}</span>
+      <select id="phase-units">
+        <option value="scientific">{ui.scientificUnits}</option>
+        <option value="metric">{ui.metricUnits}</option>
+        <option value="imperial">{ui.imperialUnits}</option>
+      </select>
+    </label>
+
+    <label class="phase-field" for="phase-temperature">
+      <span>{ui.temperature}</span>
+      <output id="phase-temperature-output">373 K</output>
+      <input id="phase-temperature" type="range" min="40" max="720" step="1" value="373" />
+    </label>
+
+    <label class="phase-field" for="phase-pressure">
+      <span>{ui.pressure}</span>
+      <output id="phase-pressure-output">0.10 MPa</output>
+      <input id="phase-pressure" type="range" min="-3" max="1.45" step="0.01" value="-1" />
+    </label>
+
+    <button type="button" id="phase-reset">{ui.reset}</button>
+  </section>
+
+  <section class="phase-map-shell" aria-label={ui.diagram}>
+    <div class="phase-map-frame">
+      <span class="phase-axis-label phase-axis-label-y" aria-hidden="true">{ui.pressure}</span>
+      <svg class="phase-map" id="phase-map" viewBox="0 0 820 560" role="img" aria-label={ui.diagram}>
+      <defs>
+        <linearGradient id="phase-supercritical-glow" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#ffcf5a" stop-opacity="0.18"></stop>
+          <stop offset="100%" stop-color="#4fd6b5" stop-opacity="0.3"></stop>
+        </linearGradient>
+        <filter id="phase-soft-glow" x="-30%" y="-30%" width="160%" height="160%">
+          <feGaussianBlur stdDeviation="8" result="glow"></feGaussianBlur>
+          <feMerge>
+            <feMergeNode in="glow"></feMergeNode>
+            <feMergeNode in="SourceGraphic"></feMergeNode>
+          </feMerge>
+        </filter>
+      </defs>
+      <rect class="phase-region phase-region-gas" x="46" y="72" width="730" height="410" rx="14"></rect>
+      <path class="phase-region phase-region-solid" id="phase-solid-region"></path>
+      <path class="phase-region phase-region-liquid" id="phase-liquid-region"></path>
+      <path class="phase-region phase-region-supercritical" id="phase-super-region"></path>
+      <path class="phase-grid" d="M46 482 H776 M46 379.5 H776 M46 277 H776 M46 174.5 H776 M46 72 H776 M46 72 V482 M228.5 72 V482 M411 72 V482 M593.5 72 V482 M776 72 V482"></path>
+      <path class="phase-boundary phase-vapor" id="phase-vapor-curve"></path>
+      <path class="phase-boundary phase-melt" id="phase-melt-line"></path>
+      <g class="phase-point phase-triple" id="phase-triple-point">
+        <circle r="7"></circle>
+        <text x="15" y="24">{ui.triplePoint}</text>
+      </g>
+      <g class="phase-point phase-critical" id="phase-critical-point">
+        <circle r="9"></circle>
+        <text x="-106" y="-24">{ui.criticalPoint}</text>
+      </g>
+      <g class="phase-sample-marker" id="phase-sample-marker">
+        <circle class="phase-sample-trail phase-sample-trail-outer" r="38"></circle>
+        <circle class="phase-sample-trail phase-sample-trail-inner" r="22"></circle>
+        <circle class="phase-sample-dot" r="7"></circle>
+      </g>
+      <text class="phase-region-label phase-label-solid" id="phase-label-solid">{ui.solid}</text>
+      <text class="phase-region-label phase-label-liquid" id="phase-label-liquid">{ui.liquid}</text>
+      <text class="phase-region-label phase-label-gas" id="phase-label-gas">{ui.gas}</text>
+      <text class="phase-region-label phase-label-super" id="phase-label-super">{ui.supercritical}</text>
+      </svg>
+      <span class="phase-axis-label phase-axis-label-x" aria-hidden="true">{ui.temperature}</span>
+    </div>
+  </section>
+
+  <section class="phase-panel phase-readout" aria-label={ui.sample}>
+    <span>{ui.phase}</span>
+    <strong id="phase-state">{ui.liquid}</strong>
+    <p id="phase-coordinates">{ui.coordinates}: 373 K / 0.10 MPa</p>
+
+    <div class="phase-meter">
+      <div>
+        <span>{ui.latentHeat}</span>
+        <output id="phase-latent-output">0.82</output>
+      </div>
+      <i id="phase-latent-bar"></i>
+    </div>
+
+    <div class="phase-meter">
+      <div>
+        <span>{ui.criticalProximity}</span>
+        <output id="phase-critical-output">0.18</output>
+      </div>
+      <i id="phase-critical-bar"></i>
+    </div>
+
+    <div class="phase-coexistence" aria-label={ui.interpretation}>
+      <div class="phase-coexistence-head">
+        <span>{ui.purePhase}</span>
+        <output id="phase-coexistence-output">12%</output>
+        <span>{ui.coexistence}</span>
+      </div>
+      <div class="phase-coexistence-axis">
+        <i id="phase-coexistence-marker"></i>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script>
+  import {
+    buildPhaseCurve,
+    classifyPhase,
+    formatPressureForUnits,
+    formatTemperatureForUnits,
+    getSubstance,
+    meltingPressureAt,
+    vaporPressureAt,
+  } from './logic';
+
+  const substanceSelect = document.getElementById('phase-substance') as HTMLSelectElement | null;
+  const unitsSelect = document.getElementById('phase-units') as HTMLSelectElement | null;
+  const temperatureInput = document.getElementById('phase-temperature') as HTMLInputElement | null;
+  const pressureInput = document.getElementById('phase-pressure') as HTMLInputElement | null;
+  const temperatureOutput = document.getElementById('phase-temperature-output');
+  const pressureOutput = document.getElementById('phase-pressure-output');
+  const resetButton = document.getElementById('phase-reset');
+  const vaporCurve = document.getElementById('phase-vapor-curve');
+  const meltLine = document.getElementById('phase-melt-line');
+  const solidRegion = document.getElementById('phase-solid-region');
+  const liquidRegion = document.getElementById('phase-liquid-region');
+  const superRegion = document.getElementById('phase-super-region');
+  const triplePoint = document.getElementById('phase-triple-point');
+  const criticalPoint = document.getElementById('phase-critical-point');
+  const sampleMarker = document.getElementById('phase-sample-marker');
+  const stateOutput = document.getElementById('phase-state');
+  const coordinatesOutput = document.getElementById('phase-coordinates');
+  const latentOutput = document.getElementById('phase-latent-output');
+  const criticalOutput = document.getElementById('phase-critical-output');
+  const latentBar = document.getElementById('phase-latent-bar');
+  const criticalBar = document.getElementById('phase-critical-bar');
+  const coexistenceOutput = document.getElementById('phase-coexistence-output');
+  const coexistenceMarker = document.getElementById('phase-coexistence-marker');
+  const coexistenceAxis = document.querySelector('.phase-coexistence-axis') as HTMLElement | null;
+  const storageKey = 'phase-diagram-critical-points:last-state';
+
+  const plot = {
+    left: 46,
+    top: 72,
+    width: 730,
+    height: 410,
+  };
+  const phaseLabelNodes = {
+    solid: document.getElementById('phase-label-solid'),
+    liquid: document.getElementById('phase-label-liquid'),
+    gas: document.getElementById('phase-label-gas'),
+    supercritical: document.getElementById('phase-label-super'),
+  };
+
+  const labels = {
+    solid: document.getElementById('phase-label-solid')?.textContent ?? 'Solid',
+    liquid: document.getElementById('phase-label-liquid')?.textContent ?? 'Liquid',
+    gas: document.getElementById('phase-label-gas')?.textContent ?? 'Gas',
+    supercritical: document.getElementById('phase-label-super')?.textContent ?? 'Supercritical',
+  };
+
+  function pressureFromSlider() {
+    return 10 ** Number(pressureInput?.value ?? -1);
+  }
+
+  function currentSubstance() {
+    return getSubstance(substanceSelect?.value ?? 'water');
+  }
+
+  function currentUnits() {
+    return (unitsSelect?.value ?? 'scientific') as 'scientific' | 'metric' | 'imperial';
+  }
+
+  function xForTemperature(temperature: number, minTemperature: number, maxTemperature: number) {
+    return plot.left + ((temperature - minTemperature) / (maxTemperature - minTemperature)) * plot.width;
+  }
+
+  function yForPressure(pressure: number, minPressure: number, maxPressure: number) {
+    const logMin = Math.log10(minPressure);
+    const logMax = Math.log10(maxPressure);
+    const progress = (Math.log10(Math.max(minPressure, pressure)) - logMin) / (logMax - logMin);
+
+    return plot.top + plot.height - progress * plot.height;
+  }
+
+  function pathFromPoints(points: { x: number; y: number }[]) {
+    return points.map((point, index) => `${index === 0 ? 'M' : 'L'}${point.x.toFixed(1)} ${point.y.toFixed(1)}`).join(' ');
+  }
+
+  function setAttribute(node: Element | null, name: string, value: string) {
+    node?.setAttribute(name, value);
+  }
+
+  function setText(node: Element | null, value: string) {
+    if (node) node.textContent = value;
+  }
+
+  function setCssValue(node: HTMLElement | null, name: string, value: string) {
+    node?.style.setProperty(name, value);
+  }
+
+  function updateSliderFill(input: HTMLInputElement | null) {
+    if (!input) return;
+    const min = Number(input.min);
+    const max = Number(input.max);
+    const value = Number(input.value);
+    input.style.setProperty('--fill', `${((value - min) / (max - min)) * 100}%`);
+  }
+
+  function boundaryCoexistence(substance: ReturnType<typeof getSubstance>, temperature: number, pressure: number) {
+    const vaporPressure = vaporPressureAt(substance, temperature);
+    const vaporDistance = Math.abs(Math.log10(Math.max(0.001, pressure)) - Math.log10(Math.max(0.001, vaporPressure)));
+    const meltPressure = meltingPressureAt(substance, temperature);
+    const meltDistance = Math.abs(Math.log10(Math.max(0.001, pressure)) - Math.log10(Math.max(0.001, meltPressure)));
+    const temperatureWindow = Math.abs(temperature - substance.tripleTemperature) < substance.criticalTemperature * 0.5;
+    const nearestDistance = Math.min(vaporDistance, temperatureWindow ? meltDistance : 99);
+
+    return Math.max(0, Math.min(1, 1 - nearestDistance / 0.22));
+  }
+
+  function readSavedState() {
+    try {
+      const rawState = window.localStorage.getItem(storageKey);
+      return rawState ? JSON.parse(rawState) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  function saveState() {
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify({
+        substance: substanceSelect?.value,
+        units: unitsSelect?.value,
+        temperature: temperatureInput?.value,
+        pressure: pressureInput?.value,
+      }));
+    } catch {
+    }
+  }
+
+  function getPlotBounds(substance: ReturnType<typeof getSubstance>) {
+    return {
+      minTemperature: Math.max(35, substance.tripleTemperature * 0.55),
+      maxTemperature: substance.criticalTemperature * 1.18,
+      minPressure: Math.max(0.001, substance.triplePressure * 0.2),
+      maxPressure: substance.criticalPressure * 1.45,
+    };
+  }
+
+  function pointForValues(temperature: number, pressure: number, bounds: ReturnType<typeof getPlotBounds>) {
+    return {
+      x: xForTemperature(temperature, bounds.minTemperature, bounds.maxTemperature),
+      y: yForPressure(pressure, bounds.minPressure, bounds.maxPressure),
+    };
+  }
+
+  function buildGeometry(substance: ReturnType<typeof getSubstance>) {
+    const bounds = getPlotBounds(substance);
+    const minTemperature = Math.max(35, substance.tripleTemperature * 0.55);
+    const maxTemperature = substance.criticalTemperature * 1.18;
+    const curve = buildPhaseCurve(substance).map((point) => ({
+      x: xForTemperature(point.temperature, bounds.minTemperature, bounds.maxTemperature),
+      y: yForPressure(point.pressure, bounds.minPressure, bounds.maxPressure),
+    }));
+    const triple = pointForValues(substance.tripleTemperature, substance.triplePressure, bounds);
+    const critical = pointForValues(substance.criticalTemperature, substance.criticalPressure, bounds);
+    const meltTopTemperature = substance.tripleTemperature
+      + Math.sign(substance.fusionSlope) * (maxTemperature - minTemperature) * 0.24;
+    const meltTop = pointForValues(meltTopTemperature, bounds.maxPressure, bounds);
+    const meltLower = pointForValues(substance.tripleTemperature - 46, bounds.minPressure, bounds);
+
+    return { bounds, curve, triple, critical, meltTop, meltLower };
+  }
+
+  function drawPhaseGeometry(geometry: ReturnType<typeof buildGeometry>) {
+    const { curve, triple, critical, meltTop, meltLower } = geometry;
+    vaporCurve?.setAttribute('d', pathFromPoints(curve));
+    meltLine?.setAttribute('d', pathFromPoints([meltLower, triple, meltTop]));
+    solidRegion?.setAttribute('d', `M${plot.left} ${plot.top} H${meltTop.x.toFixed(1)} L${triple.x.toFixed(1)} ${triple.y.toFixed(1)} L${meltLower.x.toFixed(1)} ${plot.top + plot.height} H${plot.left} Z`);
+    liquidRegion?.setAttribute('d', `M${triple.x.toFixed(1)} ${triple.y.toFixed(1)} L${meltTop.x.toFixed(1)} ${plot.top} H${plot.left + plot.width} V${critical.y.toFixed(1)} L${critical.x.toFixed(1)} ${critical.y.toFixed(1)} ${pathFromPoints(curve.slice().reverse()).replace('M', 'L')} Z`);
+    superRegion?.setAttribute('d', `M${critical.x.toFixed(1)} ${plot.top} H${plot.left + plot.width} V${critical.y.toFixed(1)} H${critical.x.toFixed(1)} Z`);
+    triplePoint?.setAttribute('transform', `translate(${triple.x.toFixed(1)} ${triple.y.toFixed(1)})`);
+    criticalPoint?.setAttribute('transform', `translate(${critical.x.toFixed(1)} ${critical.y.toFixed(1)})`);
+  }
+
+  function positionRegionLabels(critical: { x: number; y: number }) {
+    setAttribute(phaseLabelNodes.solid, 'x', `${plot.left + 64}`);
+    setAttribute(phaseLabelNodes.solid, 'y', `${plot.top + 80}`);
+    setAttribute(phaseLabelNodes.liquid, 'x', `${Math.min(plot.left + plot.width - 162, critical.x - 118)}`);
+    setAttribute(phaseLabelNodes.liquid, 'y', `${plot.top + 126}`);
+    setAttribute(phaseLabelNodes.gas, 'x', `${plot.left + plot.width - 124}`);
+    setAttribute(phaseLabelNodes.gas, 'y', `${plot.top + plot.height - 54}`);
+    setAttribute(phaseLabelNodes.supercritical, 'x', `${Math.min(critical.x + 14, plot.left + plot.width - 168)}`);
+    setAttribute(phaseLabelNodes.supercritical, 'y', `${Math.max(plot.top + 42, critical.y + 38)}`);
+  }
+
+  function updateSampleReadout(substance: ReturnType<typeof getSubstance>, geometry: ReturnType<typeof buildGeometry>) {
+    const temperature = Number(temperatureInput?.value ?? substance.normalBoilingPoint);
+    const pressure = pressureFromSlider();
+    const sample = classifyPhase(substance, { temperature, pressure });
+    const samplePoint = pointForValues(temperature, pressure, geometry.bounds);
+    const meltPressure = meltingPressureAt(substance, temperature);
+    const coexistence = boundaryCoexistence(substance, temperature, pressure);
+
+    setAttribute(sampleMarker, 'transform', `translate(${samplePoint.x.toFixed(1)} ${samplePoint.y.toFixed(1)})`);
+    setAttribute(sampleMarker, 'data-phase', sample.phase);
+    setText(stateOutput, labels[sample.phase]);
+    setText(coordinatesOutput, `${formatTemperatureForUnits(temperature, currentUnits())} / ${formatPressureForUnits(pressure, currentUnits())}`);
+    setText(temperatureOutput, formatTemperatureForUnits(temperature, currentUnits()));
+    setText(pressureOutput, formatPressureForUnits(pressure, currentUnits()));
+    setText(latentOutput, sample.latentHeatIndex.toFixed(2));
+    setText(criticalOutput, sample.proximityToCritical.toFixed(2));
+    setText(coexistenceOutput, `${Math.round(coexistence * 100)}%`);
+    setCssValue(latentBar, '--value', `${sample.latentHeatIndex}`);
+    setCssValue(criticalBar, '--value', `${sample.proximityToCritical}`);
+    setCssValue(coexistenceMarker, '--value', `${coexistence}`);
+    setCssValue(coexistenceAxis, '--coexistence', `${coexistence}`);
+    document.getElementById('phase-lab')?.style.setProperty('--melt-pressure', `${meltPressure}`);
+    updateSliderFill(temperatureInput);
+    updateSliderFill(pressureInput);
+    saveState();
+  }
+
+  function drawDiagram() {
+    const substance = currentSubstance();
+    const geometry = buildGeometry(substance);
+
+    drawPhaseGeometry(geometry);
+    positionRegionLabels(geometry.critical);
+    updateSampleReadout(substance, geometry);
+  }
+
+  function resetForSubstance(savedState?: { temperature?: string; pressure?: string }) {
+    const substance = currentSubstance();
+    if (temperatureInput) {
+      temperatureInput.min = `${Math.max(40, Math.floor(substance.tripleTemperature * 0.55))}`;
+      temperatureInput.max = `${Math.ceil(substance.criticalTemperature * 1.18)}`;
+      temperatureInput.value = savedState?.temperature ?? `${Math.round(substance.normalBoilingPoint)}`;
+    }
+    if (pressureInput) {
+      pressureInput.min = `${Math.log10(Math.max(0.001, substance.triplePressure * 0.2)).toFixed(2)}`;
+      pressureInput.max = `${Math.log10(substance.criticalPressure * 1.45).toFixed(2)}`;
+      pressureInput.value = savedState?.pressure ?? `${Math.log10(Math.min(0.101, substance.criticalPressure * 0.72)).toFixed(2)}`;
+    }
+    drawDiagram();
+  }
+
+  function hydrateSavedState() {
+    const savedState = readSavedState();
+    if (!savedState) {
+      resetForSubstance();
+      return;
+    }
+
+    if (savedState.substance && substanceSelect) {
+      substanceSelect.value = savedState.substance;
+    }
+
+    if (savedState.units && unitsSelect) {
+      unitsSelect.value = savedState.units;
+    }
+
+    resetForSubstance({
+      temperature: savedState.temperature,
+      pressure: savedState.pressure,
+    });
+  }
+
+  substanceSelect?.addEventListener('change', () => resetForSubstance());
+  unitsSelect?.addEventListener('change', drawDiagram);
+  temperatureInput?.addEventListener('input', drawDiagram);
+  pressureInput?.addEventListener('input', drawDiagram);
+  resetButton?.addEventListener('click', () => resetForSubstance());
+  hydrateSavedState();
+</script>

package/src/tool/phase-diagram-critical-points/entry.ts

@@ -0,0 +1,26 @@
+import type { ScienceToolEntry } from '../../types';
+
+export const phaseDiagramCriticalPoints: ScienceToolEntry = {
+  id: 'phase-diagram-critical-points',
+  icons: {
+    bg: 'mdi:chart-bell-curve-cumulative',
+    fg: 'mdi:state-machine',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/phase-diagram-critical-points/i18n/de.ts

@@ -0,0 +1,179 @@
+import { bibliography } from '../bibliography';
+import type { ToolLocaleContent } from '../../../types';
+
+const slug = 'phasendiagramm-kritischer-punkt-visualisierer';
+const title = 'Phasendiagramm und Kritischer Punkt Visualisierer';
+const description = 'Erkunden Sie feste, flussige, gasformige und uberkritische Bereiche in einem interaktiven Druck-Temperatur-Phasendiagramm mit Tripelpunkt- und Kritischer-Punkt-Markierungen.';
+
+const howTo = [
+  {
+    name: 'Substanz auswahlen',
+    text: 'Wechseln Sie zwischen Wasser, Kohlendioxid und Stickstoff, um zu sehen, wie reale Tripelpunkte und kritische Punkte das Phasenbild verandern.',
+  },
+  {
+    name: 'Temperatur und Druck andern',
+    text: 'Nutzen Sie die Schieberegler, um die Probe auf der Druck-Temperatur-Ebene zu positionieren. Das Diagramm aktualisiert den aktiven Phasenbereich und die Live-Probenmarkierung.',
+  },
+  {
+    name: 'Den kritischen Hof beobachten',
+    text: 'Bewegen Sie sich zum Ende der Dampf-Flussig-Grenze, um zu sehen, wie die latente Warme verschwindet und der Flussig-Gas-Unterscheid in einer uberkritischen Flussigkeit aufgeht.',
+  },
+  {
+    name: 'Das Lehrpanel lesen',
+    text: 'Nutzen Sie die Phasenbezeichnung, den Latenzwarme-Indikator und die Punktanzeigen, um das visuelle Diagramm mit thermodynamischen Fachbegriffen zu verknupfen.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Was ist ein Phasendiagramm?',
+    answer: 'Ein Phasendiagramm zeigt, welcher Aggregatzustand bei verschiedenen Kombinationen von Temperatur und Druck stabil ist. Die Grenzlinien markieren Bedingungen, unter denen zwei Phasen im Gleichgewicht nebeneinander existieren konnen.',
+  },
+  {
+    question: 'Was passiert am kritischen Punkt?',
+    answer: 'Am kritischen Punkt endet die Dampf-Flussig-Grenze. Oberhalb der kritischen Temperatur und des kritischen Drucks wird das Material zu einer uberkritischen Flussigkeit, und es gibt keine scharfe Trennung zwischen Flussigkeit und Gas.',
+  },
+  {
+    question: 'Warum hat Wasser eine andere Schmelzlinie?',
+    answer: 'Wasser ist ungewohnlich, weil Eis in der Nahe des Schmelzpunkts eine geringere Dichte als flussiges Wasser hat. Steigender Druck kann die dichtere flussige Phase begunstigen, weshalb die Fest-Flussig-Grenze einen anderen Verlauf hat als bei vielen anderen Substanzen.',
+  },
+  {
+    question: 'Sind die dargestellten Kurven laborgenau?',
+    answer: 'Nein. Das Werkzeug verwendet vereinfachte Kurven, die an publizierte Tripelpunkt- und Kritischer-Punkt-Werte angelehnt sind. Es ist fur das konzeptionelle Lernen konzipiert, nicht fur Verfahrenstechnik oder Sicherheitsberechnungen.',
+  },
+];
+
+export const content: ToolLocaleContent = {
+  slug,
+  title,
+  description,
+  ui: {
+    controls: 'Phasendiagramm Steuerung',
+    substance: 'Substanz',
+    units: 'Einheiten',
+    scientificUnits: 'Wissenschaftlich (K, MPa)',
+    metricUnits: 'Metrisch (Celsius, kPa)',
+    imperialUnits: 'Imperial (Fahrenheit, psi)',
+    temperature: 'Temperatur',
+    pressure: 'Druck',
+    diagram: 'Druck-Temperatur-Phasendiagramm',
+    sample: 'Probenzustand',
+    phase: 'Stabile Phase',
+    triplePoint: 'Tripelpunkt',
+    criticalPoint: 'Kritischer Punkt',
+    vaporCurve: 'Dampf-Flussig-Grenze',
+    meltingLine: 'Fest-Flussig-Grenze',
+    latentHeat: 'Latentwarme Kontrast',
+    criticalProximity: 'Kritische Nahe',
+    coordinates: 'Koordinaten',
+    solid: 'Fest',
+    liquid: 'Flussig',
+    gas: 'Gasformig',
+    supercritical: 'Uberkritisch',
+    low: 'niedrig',
+    high: 'hoch',
+    reset: 'Zurucksetzen',
+    interpretation: 'Interpretation',
+    note: 'Grenzlinien markieren Koexistenz; Bereiche markieren die stabilste Phase fur die gewahlten Bedingungen.',
+  },
+  seo: [
+    {
+      type: 'title',
+      text: 'Interaktives Phasendiagramm Visualisierer fur Tripelpunkte, Siedekurven und kritische Punkte',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Dieser Phasendiagramm-Visualisierer verwandelt ein abstraktes Druck-Temperatur-Diagramm in eine interaktive Karte. Wahlen Sie eine Substanz, andern Sie Temperatur und Druck, und sehen Sie, ob die Probe als Feststoff, Flussigkeit, Gas oder uberkritische Flussigkeit vorhergesagt wird. Das Ziel ist es, Phasengrenzen raumlich erfahrbar zu machen: Das Uberschreiten einer Linie andert den stabilen Zustand, wahrend die Annaherung an den kritischen Punkt die Bedeutung einer Phasengrenze selbst verandert.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Das Werkzeug richtet sich an Studenten, Lehrer, Wissenschaftsautoren und alle, die eine klare Erklarung von Phasendiagrammen suchen. Es betont die Merkmale, die in der einfuhrenden Thermodynamik am wichtigsten sind: den Tripelpunkt, an dem drei Phasen koexistieren, die Dampf-Flussig-Kurve, die Fest-Flussig-Grenze und den kritischen Endpunkt, an dem der Flussig-Gas-Unterschied verschwindet.',
+    },
+    {
+      type: 'title',
+      text: 'Wie man das Druck-Temperatur-Diagramm liest',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Ein Phasendiagramm tragt die Temperatur auf der einen und den Druck auf der anderen Achse auf. Jeder Bereich zeigt die Phase, die unter diesen Bedingungen stabil ist. Die Linien zwischen den Bereichen sind Koexistenzkurven: Entlang dieser Linien konnen zwei Phasen im Gleichgewicht bleiben, anstatt dass eine Phase die andere vollstandig ersetzt.',
+    },
+    {
+      type: 'table',
+      headers: ['Diagrammmerkmal', 'Bedeutung', 'Was im Werkzeug zu beachten ist'],
+      rows: [
+        ['Tripelpunkt', 'Fest, Flussig und Gas koexistieren', 'Der Tieftemperatur-Knotenpunkt, an dem die Grenzen aufeinandertreffen.'],
+        ['Dampf-Flussig-Kurve', 'Siede- oder Kondensationsgleichgewicht', 'Die gekrummte Linie vom Tripelpunkt zum kritischen Punkt.'],
+        ['Fest-Flussig-Grenze', 'Schmelz- oder Gefriergleichgewicht', 'Die steile Linie, die feste und flussige Bereiche trennt.'],
+        ['Kritischer Punkt', 'Ende der Dampf-Flussig-Grenze', 'Der hervorgehobene Endpunkt, an dem die latente Warme verschwindet.'],
+        ['Uberkritischer Bereich', 'Keine scharfe Flussig-Gas-Unterscheidung', 'Der Hochtemperatur- und Hochdruckbereich jenseits des kritischen Punkts.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Warum der kritische Punkt wichtig ist',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Unterhalb des kritischen Punkts ist Sieden ein Phasenubergang: Flussigkeit und Dampf konnen koexistieren, und Energie kann als latente Warme aufgenommen werden, wahrend die Temperatur an die Randbedingung gebunden bleibt. Am kritischen Punkt endet diese Grenze. Daruber andert sich die Dichte kontinuierlich, und die Substanz wird als uberkritische Flussigkeit und nicht als normale Flussigkeit oder Gas beschrieben.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Dies ist in der Chemie, der Planetenwissenschaft, der industriellen Extraktion, der Kalte- und Hochdruckphysik von Bedeutung. Kohlendioxid wird beispielsweise unter relativ zuganglichen Bedingungen uberkritisch im Vergleich zu Wasser, weshalb uberkritisches CO2 in der Extraktion und Materialverarbeitung eingesetzt wird. Wasser erfordert viel hohere Temperaturen und Drucke, was seinen kritischen Punkt fur Energiesysteme und Geophysik wichtig macht.',
+    },
+    {
+      type: 'title',
+      text: 'Was dieser Visualisierer vereinfacht',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Reale Phasendiagramme konnen Polymorphe, metastabile Zustande, nichtideale Mischungen, mehrere feste Phasen und experimentell angepasste Zustandsgleichungen umfassen. Dieses Lehrwerkzeug halt das Modell bewusst kompakt. Es verankert jede Substanz an erkennbaren Referenzwerten und zeichnet glatte Lehrkurven, damit die Hauptideen leicht zu erfassen sind, ohne dass eine Thermodynamik-Tabelle benotigt wird.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Nutzen Sie es fur die Intuition:</strong> Es hilft zu erklaren, warum sich Schnellkochtopfe, Trockeneis, Sieden und uberkritische Flussigkeiten unterschiedlich verhalten.',
+        '<strong>Nicht fur technische Grenzwerte verwenden:</strong> Vereinfachte Kurven sind kein Ersatz fur zertifizierte Stoffdaten.',
+        '<strong>Fokus auf Topologie:</strong> Das wichtigste Lernergebnis ist, wie Phasenbereiche zusammenhangen und wo Grenzen enden.',
+      ],
+    },
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: title,
+      description,
+      applicationCategory: 'ScientificApplication',
+      operatingSystem: 'Any',
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: {
+          '@type': 'Answer',
+          text: item.answer,
+        },
+      })),
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: title,
+      step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+      })),
+    },
+  ],
+};