@jjlmoya/utils-diy 1.15.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-diy",
-    "version": "1.15.0",
+    "version": "1.16.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/entries.ts

@@ -16,6 +16,7 @@ export { thermalExpansionCalculator } from './tool/thermalExpansionCalculator/en
 export { voltageDropCalculator } from './tool/voltageDropCalculator/entry';
 export { workshopFractionConverter } from './tool/workshopFractionConverter/entry';
 export { pythagoreanRightAngleCalculator } from './tool/pythagoreanRightAngleCalculator/entry';
+export { twoStrokeMixtureCalculator } from './tool/twoStrokeMixtureCalculator/entry';
 export { diyCategory } from './category';
 import { balusterCalculator } from './tool/balusterCalculator/entry';
 import { clayCalculator } from './tool/clayCalculator/entry';
@@ -32,4 +33,5 @@ import { thermalExpansionCalculator } from './tool/thermalExpansionCalculator/en
 import { voltageDropCalculator } from './tool/voltageDropCalculator/entry';
 import { workshopFractionConverter } from './tool/workshopFractionConverter/entry';
 import { pythagoreanRightAngleCalculator } from './tool/pythagoreanRightAngleCalculator/entry';
-export const ALL_ENTRIES = [balusterCalculator, clayCalculator, concreteCalculator, cutOptimizer, drillCalculator, drillSharpener, epoxyCalculator, furnitureFit, mortarCalculator, passepartoutCalculator, stairCalculator, thermalExpansionCalculator, voltageDropCalculator, workshopFractionConverter, pythagoreanRightAngleCalculator];
+import { twoStrokeMixtureCalculator } from './tool/twoStrokeMixtureCalculator/entry';
+export const ALL_ENTRIES = [balusterCalculator, clayCalculator, concreteCalculator, cutOptimizer, drillCalculator, drillSharpener, epoxyCalculator, furnitureFit, mortarCalculator, passepartoutCalculator, stairCalculator, thermalExpansionCalculator, voltageDropCalculator, workshopFractionConverter, pythagoreanRightAngleCalculator, twoStrokeMixtureCalculator];

package/src/index.ts

@@ -46,3 +46,5 @@ export { DRILL_SHARPENER_TOOL } from './tool/drillSharpener/index';
 export { WORKSHOP_FRACTION_CONVERTER_TOOL } from './tool/workshopFractionConverter/index';
 
 export { PYTHAGOREAN_RIGHT_ANGLE_CALCULATOR_TOOL } from './tool/pythagoreanRightAngleCalculator/index';
+
+export { TWO_STROKE_MIXTURE_CALCULATOR_TOOL } from './tool/twoStrokeMixtureCalculator/index';

package/src/tests/locale_completeness.test.ts

@@ -33,8 +33,8 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 15 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(15);
+  it('all 16 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(16);
   });
 });
 

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { diyCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 15 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(15);
+    it('should have 16 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(16);
     });
 
     it('diyCategory should be defined', () => {

package/src/tool/twoStrokeMixtureCalculator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/twoStrokeMixtureCalculator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Two-Stroke Engine Fuel Mixture Ratios',
+    url: 'https://en.wikipedia.org/wiki/Two-stroke_engine',
+  },
+  {
+    name: 'Gasoline and Oil Mix Ratios for Small Engines',
+    url: 'https://homelivinghandbook.com/how-much-oil-should-you-mix-with-gas-for-small-engine-tools',
+  },
+];

package/src/tool/twoStrokeMixtureCalculator/component.astro

@@ -0,0 +1,266 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { TwoStrokeMixtureCalculatorUI } from './ui';
+
+interface Props { ui?: TwoStrokeMixtureCalculatorUI; }
+const { ui } = Astro.props;
+const t = (ui ?? {}) as TwoStrokeMixtureCalculatorUI;
+---
+
+<div class="tsmc-root" data-tsmc-root data-ui={JSON.stringify(t)}>
+  <div class="tsmc-mission-selector">
+    <button class="tsmc-mission-btn active" data-mission="fuel">
+      <Icon name="mdi:gas-cylinder" />
+      <span>{t.copyTextFuel}</span>
+    </button>
+    <button class="tsmc-mission-btn" data-mission="oil">
+      <Icon name="mdi:beaker-outline" />
+      <span>{t.copyTextOil}</span>
+    </button>
+  </div>
+
+  <div class="tsmc-container">
+    <div class="tsmc-input-section">
+      <label id="tsmc-volume-label" class="tsmc-section-label">{t.labelVolume}</label>
+
+      <div class="tsmc-slider-container">
+        <input
+          type="range"
+          id="tsmc-slider"
+          min="1"
+          max="50"
+          step="1"
+          value="5"
+          class="tsmc-slider"
+        >
+        <div class="tsmc-slider-value-display">
+          <span id="tsmc-slider-value">5</span><span id="tsmc-slider-unit" class="tsmc-unit">L</span>
+        </div>
+      </div>
+
+      <div class="tsmc-quick-buttons">
+        <button class="tsmc-quick-btn fuel-btn" data-volume="2">2L</button>
+        <button class="tsmc-quick-btn fuel-btn active" data-volume="5">5L</button>
+        <button class="tsmc-quick-btn fuel-btn" data-volume="10">10L</button>
+        <button class="tsmc-quick-btn fuel-btn" data-volume="20">20L</button>
+
+        <button class="tsmc-quick-btn oil-btn hidden" data-volume="125">125ml</button>
+        <button class="tsmc-quick-btn oil-btn hidden" data-volume="250">250ml</button>
+        <button class="tsmc-quick-btn oil-btn hidden" data-volume="500">500ml</button>
+        <button class="tsmc-quick-btn oil-btn hidden" data-volume="1000">1L</button>
+      </div>
+    </div>
+
+    <div class="tsmc-ratio-section">
+      <label class="tsmc-section-label">{t.labelPresets}</label>
+      <div class="tsmc-ratio-cards">
+        <button class="tsmc-ratio-card" data-ratio="25">
+          <span class="tsmc-ratio-value">1:25</span>
+          <span class="tsmc-ratio-desc">{t.ratio25Desc}</span>
+        </button>
+        <button class="tsmc-ratio-card" data-ratio="33">
+          <span class="tsmc-ratio-value">1:33</span>
+          <span class="tsmc-ratio-desc">{t.ratio33Desc}</span>
+        </button>
+        <button class="tsmc-ratio-card active" data-ratio="40">
+          <span class="tsmc-ratio-value">1:40</span>
+          <span class="tsmc-ratio-desc">{t.ratio40Desc}</span>
+        </button>
+        <button class="tsmc-ratio-card" data-ratio="50">
+          <span class="tsmc-ratio-value">1:50</span>
+          <span class="tsmc-ratio-desc">{t.ratio50Desc}</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="tsmc-mega-result">
+      <div class="tsmc-result-label">{t.labelOilRequired}</div>
+      <div class="tsmc-result-display">
+        <span id="tsmc-result-value" class="tsmc-result-big">--</span>
+        <span id="tsmc-result-unit" class="tsmc-result-unit">ml</span>
+      </div>
+
+      <svg id="tsmc-container-visual" class="tsmc-container-visual" viewBox="0 0 200 240">
+        <rect x="65" y="30" width="70" height="12" fill="#64748b" rx="3"/>
+        <rect x="70" y="22" width="60" height="8" fill="#475569" rx="2"/>
+        <path d="M 50 42 Q 45 50 45 70 L 45 160 Q 45 175 60 180 L 140 180 Q 155 175 155 160 L 155 70 Q 155 50 150 42 Z"
+              fill="none" stroke="#64748b" stroke-width="3" stroke-linejoin="round"/>
+        <rect id="tsmc-fuel-fill" x="50" y="160" width="100" height="0" fill="#fbbf24"/>
+        <rect id="tsmc-oil-fill" x="50" y="160" width="100" height="0" fill="#dc2626"/>
+        <text id="tsmc-ratio-display" x="100" y="105" text-anchor="middle" dominant-baseline="middle"
+              font-size="20" font-weight="bold" fill="#1e293b" />
+      </svg>
+
+      <button id="tsmc-share" class="tsmc-share-btn" title="Share">
+        <Icon name="mdi:share-variant" />
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  @import './two-stroke-fuel-mixture-calculator.css';
+</style>
+
+<script>
+  import { calculateMixture } from './logic';
+
+  const root = document.querySelector('.tsmc-root') as HTMLElement;
+  const ui = root ? JSON.parse(root.dataset.ui || '{}') : {};
+
+  const slider = document.getElementById('tsmc-slider') as HTMLInputElement;
+  const missionBtns = document.querySelectorAll('.tsmc-mission-btn');
+  const sliderUnit = document.getElementById('tsmc-slider-unit')!;
+  const sliderValue = document.getElementById('tsmc-slider-value')!;
+  const quickBtns = document.querySelectorAll('.tsmc-quick-btn');
+  const fuelBtns = document.querySelectorAll('.fuel-btn');
+  const oilBtns = document.querySelectorAll('.oil-btn');
+  const ratioCards = document.querySelectorAll('.tsmc-ratio-card');
+  const resultLabel = document.querySelector('.tsmc-result-label')!;
+  const resultValue = document.getElementById('tsmc-result-value')!;
+  const resultUnit = document.getElementById('tsmc-result-unit')!;
+  const fuelFill = document.getElementById('tsmc-fuel-fill')!;
+  const oilFill = document.getElementById('tsmc-oil-fill')!;
+  const ratioDisplay = document.getElementById('tsmc-ratio-display')!;
+  const shareBtn = document.getElementById('tsmc-share')!;
+  const volumeLabel = document.getElementById('tsmc-volume-label')!;
+  const container = document.querySelector('.tsmc-container')!;
+
+  const params = new URLSearchParams(window.location.search);
+  let currentMission: 'fuel' | 'oil' = (params.get('mode') as 'fuel' | 'oil') || 'fuel';
+  let currentVolume = parseFloat(params.get('volume') || '5');
+  let currentRatio = parseInt(params.get('ratio') || '40');
+
+  function setFuelMode(skipSliderUpdate: boolean) {
+    container.classList.remove('tsmc-oil-mode');
+    slider.min = '1';
+    slider.max = '50';
+    slider.step = '1';
+    if (!skipSliderUpdate) slider.value = '5';
+    sliderUnit.textContent = 'L';
+    volumeLabel.textContent = ui.labelVolume || 'Volume';
+    resultLabel.textContent = ui.labelOilRequired || 'Oil Required';
+    fuelBtns.forEach(btn => btn.classList.remove('hidden'));
+    oilBtns.forEach(btn => btn.classList.add('hidden'));
+  }
+
+  function setOilMode(skipSliderUpdate: boolean) {
+    container.classList.add('tsmc-oil-mode');
+    slider.min = '20';
+    slider.max = '1000';
+    slider.step = '10';
+    if (!skipSliderUpdate) slider.value = '125';
+    sliderUnit.textContent = 'ml';
+    volumeLabel.textContent = ui.labelOilRequired || 'Oil';
+    resultLabel.textContent = ui.labelFuelVolume || 'Fuel Required';
+    fuelBtns.forEach(btn => btn.classList.add('hidden'));
+    oilBtns.forEach(btn => btn.classList.remove('hidden'));
+  }
+
+  function setMission(mission: 'fuel' | 'oil', skipSliderUpdate = false) {
+    currentMission = mission;
+    missionBtns.forEach(btn => {
+      btn.classList.toggle('active', (btn as HTMLElement).getAttribute('data-mission') === mission);
+    });
+    if (mission === 'fuel') {
+      setFuelMode(skipSliderUpdate);
+    } else {
+      setOilMode(skipSliderUpdate);
+    }
+    sliderValue.textContent = currentVolume.toString();
+  }
+
+  function setVolume(volume: number) {
+    currentVolume = volume;
+    slider.value = String(volume);
+    sliderValue.textContent = volume.toFixed(1);
+    quickBtns.forEach(btn => {
+      btn.classList.toggle('active', parseFloat((btn as HTMLElement).getAttribute('data-volume') || '0') === volume);
+    });
+    calculate();
+  }
+
+  function setRatio(ratio: number) {
+    currentRatio = ratio;
+    ratioCards.forEach(card => {
+      card.classList.toggle('active', parseInt((card as HTMLElement).getAttribute('data-ratio') || '40') === ratio);
+    });
+    calculate();
+  }
+
+  function calculate() {
+    const calc = calculateMixture(currentVolume, currentRatio, ui);
+
+    if (calc.status === 'calculated') {
+      const oilMl = calc.oilRequired * (calc.displayUnit === 'ml' ? 1 : 1000);
+
+      if (oilMl < 1000) {
+        resultValue.textContent = oilMl.toFixed(0);
+        resultUnit.textContent = 'ml';
+      } else if (oilMl % 1000 === 0) {
+        resultValue.textContent = (oilMl / 1000).toFixed(0);
+        resultUnit.textContent = 'L';
+      } else {
+        resultValue.textContent = oilMl.toFixed(0);
+        resultUnit.textContent = 'ml';
+      }
+
+      ratioDisplay.textContent = `1:${currentRatio}`;
+
+      const containerHeight = 120;
+      const oilRatioHeight = (1 / (1 + currentRatio)) * containerHeight;
+
+      fuelFill.setAttribute('y', (160 - containerHeight).toString());
+      fuelFill.setAttribute('height', containerHeight.toString());
+
+      oilFill.setAttribute('y', (160 - oilRatioHeight).toString());
+      oilFill.setAttribute('height', oilRatioHeight.toString());
+    } else {
+      resultValue.textContent = '--';
+      resultUnit.textContent = 'ml';
+      ratioDisplay.textContent = '';
+      fuelFill.setAttribute('height', '0');
+      oilFill.setAttribute('height', '0');
+    }
+  }
+
+  missionBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      setMission((btn as HTMLElement).getAttribute('data-mission') as 'fuel' | 'oil');
+    });
+  });
+
+  slider.addEventListener('input', (e) => {
+    setVolume(parseFloat((e.target as HTMLInputElement).value));
+  });
+
+  quickBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      setVolume(parseFloat((btn as HTMLElement).getAttribute('data-volume') || '5'));
+    });
+  });
+
+  ratioCards.forEach(card => {
+    card.addEventListener('click', () => {
+      setRatio(parseInt((card as HTMLElement).getAttribute('data-ratio') || '40'));
+    });
+  });
+
+  shareBtn.addEventListener('click', () => {
+    const url = new URL(window.location.href);
+    url.searchParams.set('mode', currentMission);
+    url.searchParams.set('volume', String(currentVolume));
+    url.searchParams.set('ratio', String(currentRatio));
+    navigator.clipboard.writeText(url.toString()).then(() => {
+      const originalHTML = shareBtn.innerHTML;
+      shareBtn.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>';
+      setTimeout(() => (shareBtn.innerHTML = originalHTML), 1500);
+    });
+  });
+
+  setMission(currentMission, true);
+  setRatio(currentRatio);
+  slider.value = String(currentVolume);
+  sliderValue.textContent = currentVolume.toString();
+  calculate();
+</script>

package/src/tool/twoStrokeMixtureCalculator/entry.ts

@@ -0,0 +1,24 @@
+import type { DiyToolEntry } from '../../types';
+import type { TwoStrokeMixtureCalculatorUI } from './ui';
+
+export const twoStrokeMixtureCalculator: DiyToolEntry<TwoStrokeMixtureCalculatorUI> = {
+  id: 'two-stroke-fuel-mixture-calculator',
+  icons: { bg: 'mdi:gas-cylinder', fg: 'mdi:beaker-outline' },
+  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/twoStrokeMixtureCalculator/i18n/de.ts

@@ -0,0 +1,194 @@
+import type { WithContext, FAQPage, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { TwoStrokeMixtureCalculatorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'zweitakt-gemischrechner';
+const title = 'Zweitakt Gemischrechner: Präzise Öl und Kraftstoff Verhältnisse';
+const description = 'Berechnen Sie sofort präzise 2-Takt-Mischungsverhältnisse. Unverzichtbares Werkzeug für Motorsägen, Mofas, Motorräder und Kleinmotoren. Unterstützt 1:25, 1:33, 1:40 und 1:50.';
+
+const faqData = [
+  {
+    question: 'Was ist ein Zweitaktmotor?',
+    answer: 'Ein Zweitaktmotor kombiniert Ansaugen und Verdichten in zwei Kolbenhüben, was ihn einfacher und leichter als Viertaktmotoren macht. Sie treiben Motorsägen, Laubbläser, Mofas und einige Motorräder an. Sie benötigen zur Schmierung Öl, das dem Kraftstoff beigemischt wird.',
+  },
+  {
+    question: 'Was sind gängige Kraftstoff-Öl-Mischungsverhältnisse?',
+    answer: 'Gängige Verhältnisse sind 1:25 (fett, schützend), 1:33 (ältere Geräte), 1:40 (Standard) und 1:50 (mager, moderne Motoren). Prüfen Sie das Handbuch Ihres Motors – ein falsches Verhältnis kann den Motor beschädigen.',
+  },
+  {
+    question: 'Was passiert bei falschem Mischungsverhältnis?',
+    answer: 'Zu viel Öl (fettes Gemisch) führt zu übermäßiger Rauchentwicklung, verrußten Zündkerzen und schlechter Leistung. Zu wenig Öl (mageres Gemisch) führt zum Kolbenfresser, Kolbenschäden und Motorausfall.',
+  },
+  {
+    question: 'Welches Öl soll ich verwenden?',
+    answer: 'Verwenden Sie Zweitaktöl, das für Ihr Gerät zugelassen ist. Hochwertige synthetische Zweitaktöle bieten besseren Schutz und verbrennen sauberer als herkömmliche Öle. Verwenden Sie niemals Viertaktöl – es führt zu Motorschäden.',
+  },
+  {
+    question: 'Wie mische ich Kraftstoff und Öl?',
+    answer: 'Gießen Sie einen Teil des Benzins in einen sauberen Behälter, geben Sie die berechnete Menge Öl hinzu und füllen Sie das restliche Benzin auf. Mischen Sie gründlich durch 1-2 Minuten langes Schütteln. Beschriften Sie den Behälter mit dem Mischdatum.',
+  },
+];
+
+const howToData = [
+  { name: 'Verhältnis kennen', text: 'Suchen Sie das Handbuch Ihres Motors oder die Gerätedokumentation. Gängige Verhältnisse: Motorsägen (1:40 oder 1:50), Mofas (1:33), ältere Motorräder (1:25). Ein falsches Verhältnis schadet dem Motor.' },
+  { name: 'Kraftstoffmenge messen', text: 'Entscheiden Sie, wie viel Benzin Sie benötigen. Dieses Tool verarbeitet Liter, Gallonen oder jede Volumeneinheit. Genaue Kraftstoffmessung = genaue Ölmenge.' },
+  { name: 'Ölbedarf berechnen', text: 'Geben Sie Kraftstoffmenge und Verhältnis ein. Dieser Rechner zeigt genau, wie viel Öl (in ml oder Litern) Sie für eine perfekte Mischung benötigen.' },
+  { name: 'Sorgfältig mischen', text: 'Benzin in einen sauberen Behälter füllen, berechnetes Öl zugeben, dann Restbenzin einfüllen. 1-2 Minuten kräftig schütteln.' },
+  { name: 'Beschriften und verwenden', text: 'Behälter mit Datum und Verhältnis markieren. Mischung für beste Ergebnisse innerhalb von 30 Tagen verbrauchen (besonders bei synthetischen Ölen).' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<any> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'de',
+};
+
+export const content: ToolLocaleContent<TwoStrokeMixtureCalculatorUI> = {
+  slug,
+  title,
+  description,
+  faqTitle: 'Häufig gestellte Fragen',
+  faq: faqData,
+  bibliography,
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Zweitakt-Gemischrechner: Präzise Öl-Kraftstoff-Verhältnisse für Motorsägen und Mofas', level: 2 },
+    { type: 'paragraph', html: 'Zweitaktmotoren benötigen ein präzises Kraftstoff-Öl-Gemisch zum Überleben. Eine falsche Mischung kann Ihren Motor in wenigen Minuten zerstören. Dieser Rechner ermittelt sofort die exakte Ölmenge für Ihre Kraftstoffmenge und Ihren Motortyp – Schluss mit dem Rätselraten in der Werkstatt.' },
+
+    { type: 'title', text: 'Warum Zweitaktmotoren Öl im Kraftstoff benötigen', level: 3 },
+    { type: 'card', icon: 'mdi:engine', title: 'Der entscheidende Unterschied', html: 'Im Gegensatz zu Viertaktmotoren mit separaten Öltanks mischen Zweitaktmotoren das Öl direkt in den Kraftstoff. Bei jedem Arbeitstakt verbrennt der Motor das Gemisch sowohl für Energie als auch zur Schmierung. Es gibt keine Ölwanne, keine separate Ölpumpe – nur das Mischbenzin hält die Kolben am Leben.' },
+
+    { type: 'title', text: 'Schnellreferenz für Zweitakt-Verhältnisse', level: 3 },
+    { type: 'table', headers: ['Verhältnis', 'Öl %', 'Einsatzzweck', 'Motortyp', 'Eigenschaften'], rows: [
+      ['1:25', '3,85%', 'Maximaler Schutz', 'Geräte vor 1980, Hochlast, Oldtimer-Motorräder', 'Fettes Gemisch: mehr Rauch, mehr Ölkohle, maximaler Schutz gegen Fresser'],
+      ['1:33', '2,94%', 'Klassische Geräte', 'Kleinmotoren der 80er-90er, ältere Motorsägen', 'Moderate Fettigkeit: Balance zwischen Schutz und Effizienz'],
+      ['1:40', '2,44%', 'Industriestandard', 'Die meisten modernen Sägen, Mofas, moderne Kleinmotoren', 'Standardempfehlung: ausgelegt für heutige synthetische Öle'],
+      ['1:50', '1,96%', 'Moderne Effizienz', 'Neueste Motorsägen, Hochleistungsmofas, neue Motorräder', 'Mageres Gemisch: weniger Rauch, saubere Verbrennung, für Premium-Synthetiköle']
+    ] },
+
+    { type: 'title', text: 'Folgen falscher Verhältnisse', level: 3 },
+    { type: 'proscons', items: [
+      { pro: 'Zu viel Öl (Fettes Gemisch)', con: 'Übermäßiger weißer Rauch, verrußte Kerzen, Ölkohlebildung, schlechte Beschleunigung, Motorausfall' },
+      { pro: 'Zu wenig Öl (Mageres Gemisch)', con: 'Kolbenfresser binnen Sekunden, riefige Zylinderwände, katastrophaler Motorschaden' },
+      { pro: 'Korrektes Verhältnis', con: 'Ruhiger Lauf, ordnungsgemäße Schmierung, optimale Verbrennung, längere Lebensdauer, zuverlässiger Start' }
+    ] },
+
+    { type: 'title', text: 'Gängige Geräte-Verhältnisse', level: 3 },
+    { type: 'card', icon: 'mdi:tree', title: 'Motorsägen', html: '<strong>Stihl, Husqvarna, Echo:</strong> Moderne Modelle benötigen typischerweise 1:40 oder 1:50. Prüfen Sie immer Ihr Handbuch – 1:25 bei einer modernen Säge riskiert verrußte Kerzen. Ältere Stihl-Maschinen (90er und früher) können 1:25 oder 1:33 vorschreiben.' },
+    { type: 'card', icon: 'mdi:motorcycle', title: 'Mofas & Motorräder', html: '<strong>Vespa, Honda, Yamaha:</strong> Die meisten benötigen 1:33 bei älteren Modellen, 1:40–1:50 bei modernen Versionen. Hochleistungs-Mofas und Straßenmaschinen schreiben oft 1:50 vor. Das Werkstatthandbuch ist die einzige Wahrheit.' },
+    { type: 'card', icon: 'mdi:tools', title: 'Laubbläser & Trimmer', html: '<strong>Stihl, Husqvarna, DeWalt:</strong> Typischerweise 1:50 (modern) oder 1:40 (etwas älter). Diese Geräte sind für kurzen saisonalen Einsatz konzipiert, magere Mischungen sparen Rauch ohne Zuverlässigkeitsverlust.' },
+
+    { type: 'title', text: 'Ölsorte ist so wichtig wie das Verhältnis', level: 3 },
+    { type: 'comparative', items: [
+      { title: 'Mineralisches Zweitaktöl', description: 'Günstige Option für gelegentliche Nutzung. Höherer Aschegehalt, mehr Rauch, ausreichender Schutz für Standardverhältnisse.', icon: 'mdi:beaker', points: ['Günstiger Preis', 'Sichtbarer Rauch', 'Höhere Ablagerungen', 'Gut für 1:40 Verhältnisse'] },
+      { title: 'Synthetisches Zweitaktöl', description: 'Premium-Wahl für Vielnutzer. Sauberere Verbrennung, besserer Schutz, ermöglicht magerere Mischungen. Temperaturstabil.', icon: 'mdi:flame', points: ['Geringere Rauchentwicklung', 'Bester Motorschutz', 'Ermöglicht sicheres 1:50', 'Längere Lagerstabilität'], highlight: true },
+      { title: 'Teilsynthetisches Öl', description: 'Mittelweg zwischen mineralisch und vollsynthetisch. Guter Schutz bei moderaten Kosten. Oft von Herstellern empfohlen.', icon: 'mdi:beaker-outline', points: ['Ausgewogene Leistung', 'Moderate Kosten', 'Gut für 1:40 Verhältnisse', 'Weniger Rauch als mineralisch'] }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Schritt-für-Schritt Mischvorgang', level: 3 },
+    { type: 'card', icon: 'mdi:check-circle', title: 'Der richtige Weg zum Mischen', html: '<ol style="margin: 1rem 0; padding-left: 1.5rem;"><li><strong>Verwenden Sie einen speziellen Behälter</strong> nur für Kraftstoffmischungen. Sauber, trocken, markiert.</li><li><strong>Gießen Sie zuerst die Hälfte des Benzins</strong> ein.</li><li><strong>Geben Sie die berechnete Ölmenge zu</strong> (nutzen Sie diesen Rechner für Präzision).</li><li><strong>Füllen Sie das restliche Benzin auf</strong>, um die Zielmenge zu erreichen.</li><li><strong>Schütteln Sie kräftig für 1–2 Minuten</strong>, bis die Farbe gleichmäßig ist. Ein homogenes Gemisch = gleichmäßige Schmierung.</li><li><strong>Beschriften Sie den Behälter</strong> mit Datum, Verhältnis und Kraftstoffart.</li><li><strong>Innerhalb von 30 Tagen verbrauchen</strong> (Synthetiköle halten bis zu 60 Tage).</li></ol>' },
+
+    { type: 'title', text: 'Wann Sie das Handbuch infrage stellen sollten', level: 3 },
+    { type: 'tip', html: '<strong>Prüfen Sie immer zuerst das Verhältnis im Gerätehandbuch.</strong> Wenn Sie es nicht finden, besuchen Sie die Website des Herstellers oder kontaktieren Sie den Support. Niemals raten – ein falsches Verhältnis führt zum Erlöschen der Garantie und riskiert einen Motorschaden.' },
+
+    { type: 'title', text: 'Glossar: Zweitakt-Begriffe erklärt', level: 3 },
+    { type: 'glossary', items: [
+      { term: 'Mageres Gemisch', definition: 'Kraftstoff mit zu wenig Öl (hohes Verhältnis wie 1:50). Gefahr von Kolbenfressern durch mangelnde Schmierung.' },
+      { term: 'Fettes Gemisch', definition: 'Kraftstoff mit zu viel Öl (niedriges Verhältnis wie 1:25). Verursacht Rauch, verrußte Kerzen und Ablagerungen.' },
+      { term: 'Homogenes Gemisch', definition: 'Gleichmäßige Mischung von Benzin und Öl, erreicht durch gründliches Schütteln. Lebenswichtig für Schmierung und Verbrennung.' },
+      { term: 'Kolbenfresser', definition: 'Wenn der Kolben im Zylinder aufgrund mangelnder Schmierung und Reibung festbrennt. Führt zum totalen Motorschaden.' },
+      { term: 'Synthetiköl', definition: 'Laborformuliertes Öl für überlegenen Schutz, sauberere Verbrennung und Temperaturstabilität im Vergleich zu Mineralölen.' },
+      { term: 'Zweitaktmotor', definition: 'Motor, der den Verbrennungszyklus in zwei Kolbenbewegungen abschließt. Leichter und einfacher als Viertaktmotoren.' },
+      { term: 'Viertaktmotor', definition: 'Motor mit separatem Ölkreislauf und vier Arbeitstakten. Öl wird nicht dem Kraftstoff beigemischt. Schwerer, aber effizienter.' }
+    ] },
+
+    { type: 'title', text: 'Wie dieser Rechner Zeit & Geld spart', level: 3 },
+    { type: 'stats', items: [
+      { value: '100%', label: 'Genaue Berechnungen, keine Messfehler', icon: 'mdi:check-circle' },
+      { value: 'Sofort', label: 'Exakte Mengen in Sekunden statt Schätzen', icon: 'mdi:flash' },
+      { value: '4 Ratios', label: '1:25, 1:33, 1:40, 1:50 abgedeckt', icon: 'mdi:counter', trend: { value: 'Plus eigene Verhältnisse', positive: true } },
+      { value: 'Teilbar', label: 'Teilen Sie Ihr Misch-Setup per URL', icon: 'mdi:share-variant' }
+    ], columns: 2 },
+
+    { type: 'title', text: 'Häufige Fehler, die Motoren töten', level: 3 },
+    { type: 'diagnostic', variant: 'error', title: 'Viertaktöl in Zweitaktmotoren verwenden', icon: 'mdi:alert', badge: 'Motortod', html: 'Viertaktöle sind für die Zirkulation im Motorblock gedacht. Im Zweitakter verbrennen sie nicht sauber und zerstören den Motor binnen Stunden.' },
+    { type: 'diagnostic', variant: 'warning', title: 'Gründliches Mischen vergessen', icon: 'mdi:alert', badge: 'Fresser-Risiko', html: 'Wenn sich Öl und Benzin trennen, laufen Teile Ihres Motors ohne Schmierung. Mindestens 1–2 Minuten lang kräftig schütteln.' },
+    { type: 'diagnostic', variant: 'warning', title: 'Alten Kraftstoff verwenden (über 60 Tage)', icon: 'mdi:alert', badge: 'Verharzungsgefahr', html: 'Ethanol-Benzin zersetzt sich mit der Zeit. Alte Mischung hinterlässt Harzablagerungen im Vergaser. Nur mischen, was in 30 Tagen verbraucht wird.' },
+
+    { type: 'title', text: 'FAQ Zusammenfassung', level: 3 },
+    { type: 'summary', title: 'Vor dem Mischen', items: [
+      'Prüfen Sie das Handbuch auf das exakte Verhältnis – das ist die Vorgabe des Herstellers.',
+      'Sicherstellen, dass Sie Zweitaktöl verwenden, kein Viertakt- oder sonstiges Öl.',
+      'Verwenden Sie einen sauberen, speziellen Behälter nur zum Mischen.',
+      'Frisches Benzin (nicht monatelang gelagert) und passendes Öl verwenden.',
+      'Gründlich mischen und mit Datum, Verhältnis und Kraftstoffart beschriften.',
+      'Mischung innerhalb von 30 Tagen verbrauchen.'
+    ] },
+  ],
+  ui: {
+    titleMain: 'Zweitakt-Gemischrechner',
+    labelFuelVolume: 'Kraftstoffmenge',
+    labelRatio: 'Mischungsverhältnis',
+    labelOilRequired: 'Ölbedarf',
+    labelTotalMixture: 'Gesamtgemisch',
+    labelRichness: 'Gemisch-Fettigkeit',
+    labelPresets: 'Gängige Verhältnisse',
+    labelCustomRatio: 'Eigener Wert (1:X)',
+    btnClear: 'Leeren',
+    btnCopyResults: 'Ergebnisse kopieren',
+    btnSwitchMode: 'Modus wechseln',
+    unitLiters: 'L',
+    unitMilliliters: 'ml',
+    richLean: 'Mager (weniger Öl, Fresser-Risiko)',
+    richBalanced: 'Ausgewogen (Standard-Mix)',
+    richRich: 'Fett (mehr Öl, mehr Rauch, Motorschutz)',
+    msgReady: 'Bereit',
+    msgMixtureReady: 'Gemisch berechnet',
+    tooltipFuelVolume: 'Geben Sie die Benzinmenge in Litern ein',
+    tooltipRatio: 'Geben Sie den Wert als 25, 33, 40 oder 50 ein (für 1:25, 1:33 etc.)',
+    recipientLabel: 'Mischbehälter',
+    oilPercentage: 'Öl %',
+    labelVolume: 'Volumen',
+    labelRatioShort: 'Verhältnis',
+    labelOilTip: '2% Öl-Mix = 1:50 Verhältnis',
+    labelMixingTips: 'Tipps zum Mischen',
+    labelMixingTipsDesc: 'In sauberem Behälter mischen – erst Benzin, dann Öl, dann Restbenzin. 1-2 Minuten kräftig schütteln. Mit Datum und Verhältnis beschriften.',
+    recipePrefix: 'Für',
+    recipeAt: 'Benzin bei',
+    recipeAdd: 'fügen Sie genau',
+    recipeOfOil: 'Zweitaktöl hinzu.',
+    copyTextPrefix: '2-Takt Mix',
+    copyTextFuel: 'Benzin',
+    copyTextOil: 'Öl',
+  },
+};