HTML-CSS-JS-Minifizierer

Ein Minifizierer entfernt aus Quellcode alles, was nicht zum Ausführen nötig ist: Kommentare, überflüssigen Leerraum, Leerzeilen und redundante Zeichen. Kleinere Dateien bedeuten schnellere Seiten, niedrigere Bandbreiten und bessere Core-Web-Vitals. Sicher ist das nur mit Sorgfalt: Leerraum in Zeichenketten-Literalen ist signifikant, Regexes enthalten "/" und "//", die wie Kommentare aussehen, und HTML-Leerraum in

 muss überleben.
Was es kann
Minifiziert HTML, CSS oder JavaScript in einem Werkzeug
Entfernt Kommentare, ohne darin versteckte Strings anzufassen
Reduziert Leerraum unter Beibehaltung von Zeichenketten-, Regex- und Template-Inhalten
Lässt 
/-Inhalt in HTML unangetastet</li><li>Zeigt Bytes vorher → nachher und die Einsparung in Prozent</li><li>Kopiert oder lädt das Ergebnis herunter</li></ul><h3>Wann verwenden</h3><ul><li>JS-Snippets, CSS-Blöcke oder Inline-HTML vor der Auslieferung verkleinern</li><li>Seiten mit weniger Payload durch Performance-Budgets bringen</li><li>Einzeilige Ausgaben für Felder vorbereiten, die keinen Zeilenumbruch akzeptieren</li><li>Die Größe eines eingebetteten Assets schnell verkleinern</li></ul><p>Datenschutz: Die Minifizierung läuft vollständig in Ihrem Browser – nichts wird je hochgeladen.</p></div>
</section>
<section class="mt-14 max-w-3xl mx-auto card p-6 sm:p-8">
  <h2 class="text-xl font-semibold mb-4">Sichere Minimierung versus riskante Tricks</h2>
  <div class="prose prose-slate dark:prose-invert max-w-none text-sm sm:text-base"><ul><li>Kommentare, Einrückungen und Zeilenumbrüche werden zuerst entfernt — normalerweise ein Drittel der Größe des ursprünglichen Skripts, ohne jegliches Risiko.</li><li>Die Umbenennung lokaler Variablen erfolgt ausschließlich dort, wo der Gültigkeitsbereich (Scope) dies als sicher erweist; globale Variablen und Eigenschaftsnamen bleiben unverändert, sodass externe APIs niemals beeinträchtigt werden.</li><li>Auch nach gzip bleibt der minimierte Quellcode deutlich kleiner — beide Schichten beseitigen unterschiedliche Arten von Redundanz.</li></ul></div>
</section>
<section class="mt-16 max-w-4xl mx-auto">
  <h2 class="text-2xl font-bold text-center">Wohin die Bytes tatsächlich gelangen</h2>
  <div class="mt-6 grid gap-4 sm:grid-cols-3"><div class="feature-card">
      <div class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">⚡</div>
      <h3 class="font-semibold mt-1">Drei Sprachen, ein Werkzeug</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">HTML-, CSS- und JS-Minifizierung teilen eine einzige Registerkartenseite, jede mit passendem Tokenizer – kein Springen zwischen Einzweck-Sites.</p>
    </div>
<div class="feature-card">
      <div class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🔒</div>
      <h3 class="font-semibold mt-1">Zeichenketten und Regexes überleben</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">Der Tokenizer versteht quotierte Zeichenketten, Template-Literale und Regex-Literale, sodass die Minifizierung nie "a/ b/c" oder darin enthaltene kommentarähnliche Texte zerstört.</p>
    </div>
<div class="feature-card">
      <div class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🎯</div>
      <h3 class="font-semibold mt-1">Einsparung gemessen</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">Die Statusleiste berichtet Bytes vorher und nachher plus die gesparten Prozent – Sie sehen genau, wie viel Payload jeder Minify entfernt.</p>
    </div></div>
</section>
<section class="mt-14 max-w-3xl mx-auto">
  <h2 class="text-xl font-semibold mb-4">Häufige Fragen</h2>
  <div class="space-y-3"><details class="faq-item">
      <summary class="font-medium cursor-pointer list-none flex justify-between items-center gap-3">Ist das sicher für JavaScript?<span class="text-slate-400 group-open:rotate-180 transition shrink-0">⌄</span></summary>
      <p class="mt-3 text-slate-600 dark:text-slate-300 leading-relaxed">Ja. Der JS-Minifizierer tokenisiert zuerst und unterscheidet Kommentare von Regex-Literalen und Zeichenketten, sodass "/…/"-Muster und "//"-Texte in Strings bytegenau erhalten bleiben, während nur echte Kommentare und reine Formatierung entfernt werden.</p>
    </details>
<details class="faq-item">
      <summary class="font-medium cursor-pointer list-none flex justify-between items-center gap-3">Und Leerraum in HTML?<span class="text-slate-400 group-open:rotate-180 transition shrink-0">⌄</span></summary>
      <p class="mt-3 text-slate-600 dark:text-slate-300 leading-relaxed">Leerraum zwischen Tags wird reduziert, aber Inhalte in <pre>/<textarea> bleiben erhalten, weil sie bedeutungsvoll sein können, und String-Attribute bleiben unverändert. Die Ausgabe bleibt gültiges, identisch gerendertes HTML.</p>
    </details>
<details class="faq-item">
      <summary class="font-medium cursor-pointer list-none flex justify-between items-center gap-3">Ersetzt das eine Build-Pipeline?<span class="text-slate-400 group-open:rotate-180 transition shrink-0">⌄</span></summary>
      <p class="mt-3 text-slate-600 dark:text-slate-300 leading-relaxed">Für einmalige Aufgaben ja. Für ein ganzes Projekt nutzen Sie weiterhin esbuild/terser/CSSNano in CI; dieses Tool ist ideal, um ein Snippet, eine E-Mail-Vorlage oder ein einzelnes Asset in die kleinste Form zu bringen.</p>
    </details></div>
</section>
<section class="mt-14 max-w-3xl mx-auto">
  <h2 class="text-xl font-semibold mb-4">Ähnliche Tools</h2>
  <div class="grid gap-3 sm:grid-cols-2"><a href="/de/tools/html-beautifier" class="feature-card card-hover flex-row items-center gap-3">
      <span class="grid place-items-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-xl shrink-0">🌐</span>
      <span class="font-medium text-sm">HTML-Beautifier</span>
    </a>
<a href="/de/tools/css-beautifier" class="feature-card card-hover flex-row items-center gap-3">
      <span class="grid place-items-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-xl shrink-0">🎨</span>
      <span class="font-medium text-sm">CSS-Beautifier</span>
    </a>
<a href="/de/tools/js-beautifier" class="feature-card card-hover flex-row items-center gap-3">
      <span class="grid place-items-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-xl shrink-0">🟨</span>
      <span class="font-medium text-sm">JS-Beautifier</span>
    </a>
<a href="/de/tools/sql-formatter" class="feature-card card-hover flex-row items-center gap-3">
      <span class="grid place-items-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-xl shrink-0">🗄️</span>
      <span class="font-medium text-sm">SQL-Formatierer</span>
    </a></div>
</section>

<script id="mn-i18n" type="application/json">{"ui.input":"Eingabe","ui.output":"Ausgabe","ui.minify":"Minimieren","ui.sample":"Beispiel laden","ui.clear":"Leeren","ui.copy":"Kopieren","ui.copied":"Kopiert","ui.download":"Herunterladen","ui.html":"HTML","ui.css":"CSS","ui.js":"JavaScript","ui.placeholder":"Hier HTML, CSS oder JavaScript einfügen …","ui.error":"Fehler","ui.saved":"Gespart","ui.privacy":"Alles läuft in Ihrem Browser – Ihr Code bleibt auf Ihrem Gerät."}</script>
<script>
(function () {
  'use strict';
  var S = JSON.parse(document.getElementById('mn-i18n').textContent);
  var mfTokenizeJs = (function mfTokenizeJs(src) {
  var tokens = [];
  var i = 0, n = src.length;
  var codeBuf = "";
  function flushCode() {
    if (codeBuf) {
      tokens.push({ text: codeBuf, kind: "code" });
      codeBuf = "";
    }
  }
  __name(flushCode, "flushCode");
  while (i < n) {
    var ch = src[i];
    if (ch === '"' || ch === "'") {
      flushCode();
      var quote = ch, start = i;
      i++;
      while (i < n) {
        if (src[i] === "\\" && i + 1 < n)
          i += 2;
        else if (src[i] === quote) {
          i++;
          break;
        } else if (src[i] === "\n") {
          i++;
          break;
        } else
          i++;
      }
      tokens.push({ text: src.slice(start, i), kind: "string" });
      continue;
    }
    if (ch === "`") {
      flushCode();
      var tplStart = i;
      i++;
      while (i < n) {
        if (src[i] === "\\" && i + 1 < n)
          i += 2;
        else if (src[i] === "`") {
          i++;
          break;
        } else
          i++;
      }
      tokens.push({ text: src.slice(tplStart, i), kind: "string" });
      continue;
    }
    if (ch === "/" && src[i + 1] === "/") {
      flushCode();
      var end = src.indexOf("\n", i);
      tokens.push({ text: src.slice(i, end === -1 ? n : end), kind: "comment" });
      i = end === -1 ? n : end;
      continue;
    }
    if (ch === "/" && src[i + 1] === "*") {
      flushCode();
      var end2 = src.indexOf("*/", i + 2);
      tokens.push({ text: src.slice(i, end2 === -1 ? n : end2 + 2), kind: "comment" });
      i = end2 === -1 ? n : end2 + 2;
      continue;
    }
    if (ch === "/" && (src[i + 1] !== "/" && src[i + 1] !== "*")) {
      var prev = src.slice(0, i).replace(/\s+$/, "").slice(-1);
      var ahead = src.slice(0, i).replace(/\s+$/, "");
      var wordM = /([A-Za-z_$][A-Za-z0-9_$]*)$/.exec(ahead);
      var prevWord = wordM ? wordM[1] : "";
      var kwRe = /^(return|typeof|case|instanceof|in|of|void|new|delete|do|else|yield|await|throw)$/.test(prevWord);
      var exprPos = prev === "" || /[(\[,;=!&|?{}]/.test(prev) || kwRe;
      if (exprPos) {
        flushCode();
        var rxStart = i;
        i++;
        var inClass = false;
        while (i < n) {
          var c = src[i];
          if (c === "\\") {
            i += 2;
            continue;
          }
          if (c === "[")
            inClass = true;
          else if (c === "]")
            inClass = false;
          else if (c === "/" && !inClass) {
            i++;
            break;
          } else if (c === "\n") {
            i++;
            break;
          }
          i++;
        }
        tokens.push({ text: src.slice(rxStart, i), kind: "regex" });
        continue;
      }
    }
    codeBuf += ch;
    i++;
  }
  flushCode();
  return tokens;
});
  var mfMinifyHtml = (function mfMinifyHtml(html) {
  var PRESERVE = ["pre", "textarea"];
  var out = "";
  var i = 0, n = html.length;
  while (i < n) {
    var tagMatch = /^<(pre|textarea)\b[^>]*>/i.exec(html.slice(i));
    if (tagMatch) {
      var tagName = tagMatch[1].toLowerCase();
      var closeIdx = html.toLowerCase().indexOf("</" + tagName, i);
      var end = closeIdx === -1 ? n : html.indexOf(">", closeIdx) + 1;
      out += html.slice(i, end);
      i = end;
      continue;
    }
    var ch = html[i];
    if (ch === " " || ch === "	" || ch === "\n" || ch === "\r") {
      var j = i;
      while (j < n && /\s/.test(html[j] || ""))
        j++;
      var prevChar = out.slice(-1);
      var nextChar = html[j] || "";
      if (prevChar === ">" && nextChar === "<") {
      } else {
        out += " ";
      }
      i = j;
      continue;
    }
    out += ch;
    i++;
  }
  return out.replace(/<!--[\s\S]*?-->/g, "").trim();
});
  var mfMinifyCss = (function mfMinifyCss(css) {
  var noComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
  var strings = [];
  var placeheld = noComments.replace(/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g, function(m) {
    strings.push(m);
    return "\0" + (strings.length - 1) + "\0";
  });
  var minified = placeheld.replace(/\s*([{}:;,])\s*/g, "$1").replace(/;}/g, "}").replace(/\s+/g, " ").trim();
  return minified.replace(/\x00(\d+)\x00/g, function(_m, idx) {
    return strings[Number(idx)];
  });
});
  var mfMinifyJs = (function mfMinifyJs(src) {
  var tokens = mfTokenizeJs(src);
  var out = "";
  for (var i = 0; i < tokens.length; i++) {
    var tok = tokens[i];
    if (tok.kind === "comment")
      continue;
    if (tok.kind === "code")
      out += tok.text.replace(/\s+/g, " ");
    else
      out += tok.text;
  }
  return out.replace(/\s*([{}();,:])\s*/g, "$1").replace(/\s+/g, " ").trim();
});
  var inp = document.getElementById('mn-in'), out = document.getElementById('mn-out'), status = document.getElementById('mn-status');
  var tabs = { html: 'mn-tab-html', css: 'mn-tab-css', js: 'mn-tab-js' };
  var active = 'html';

  function setStatus(ok, msg) {
    status.textContent = msg;
    status.className = 'mt-3 text-sm ' + (ok ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400');
  }

  function setTab(kind) {
    active = kind;
    Object.keys(tabs).forEach(function (k) {
      var el = document.getElementById(tabs[k]);
      if (k === active) { el.classList.add('bg-indigo-600', 'text-white'); el.classList.remove('text-slate-600'); }
      else { el.classList.remove('bg-indigo-600', 'text-white'); el.classList.add('text-slate-600'); }
    });
    inp.value = '';
    out.value = '';
    status.className = 'hidden';
  }
  document.getElementById('mn-tab-html').addEventListener('click', function () { setTab('html'); });
  document.getElementById('mn-tab-css').addEventListener('click', function () { setTab('css'); });
  document.getElementById('mn-tab-js').addEventListener('click', function () { setTab('js'); });

  var SAMPLES = {
    html: '<div class="box">\n  <p>Hello & welcome</p>\n  <!-- A comment to strip -->\n  <br>\n</div>',
    css: '.box { color: red; /* c */\n  margin: 0 auto;\n}',
    js: 'function add(a, b) {\n  // comment\n  return a + b;\n}\nconst x = add(1, 2);'
  };

  document.getElementById('mn-run').addEventListener('click', function () {
    var text = inp.value;
    if (!text.trim()) { setStatus(false, S['ui.error'] + ': (empty)'); return; }
    var fn = active === 'html' ? mfMinifyHtml : active === 'css' ? mfMinifyCss : mfMinifyJs;
    var before = new Blob([text]).size;
    out.value = fn(text);
    var after = new Blob([out.value]).size;
    setStatus(true, '✓ ' + S['ui.saved'] + ': ' + before.toLocaleString() + ' → ' + after.toLocaleString() + ' bytes (' + Math.round((1 - after / before) * 100) + '%)');
  });
  document.getElementById('mn-clear').addEventListener('click', function () { inp.value = ''; out.value = ''; status.className = 'hidden'; });
  document.getElementById('mn-sample').addEventListener('click', function () { inp.value = SAMPLES[active]; });
  document.getElementById('mn-copy').addEventListener('click', function () {
    navigator.clipboard.writeText(out.value).then(function () {
      var btn = document.getElementById('mn-copy');
      var orig = btn.textContent;
      btn.textContent = S['ui.copied'];
      setTimeout(function () { btn.textContent = orig; }, 1500);
    });
  });
  document.getElementById('mn-dl').addEventListener('click', function () {
    var mime = active === 'html' ? 'text/html' : active === 'css' ? 'text/css' : 'text/javascript';
    var ext = active === 'html' ? 'html' : active === 'css' ? 'css' : 'js';
    var a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob([out.value], { type: mime + ';charset=utf-8' }));
    a.download = 'minified.' + ext;
    a.click();
    URL.revokeObjectURL(a.href);
  });
})();
</script><section class="mt-14 max-w-4xl mx-auto">
        <h2 class="text-xl font-semibold mb-4">Ähnliche Tools</h2>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"><a href="/de/tools/json-formatter" class="feature-card card-hover">
    <div class="flex items-start justify-between gap-2">
      <span class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🧩</span>
      <div class="flex items-center gap-1.5">
        
        <span class="badge-free">Kostenlos</span>
      </div>
    </div>
    <h3 class="font-semibold mt-1">JSON-Formatierer</h3>
    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-2">Formatieren, validieren, minifizieren, Schlüssel sortieren — 100% im Browser</p>
  </a>
<a href="/de/tools/base64" class="feature-card card-hover">
    <div class="flex items-start justify-between gap-2">
      <span class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🔤</span>
      <div class="flex items-center gap-1.5">
        
        <span class="badge-free">Kostenlos</span>
      </div>
    </div>
    <h3 class="font-semibold mt-1">Base64 kodieren/dekodieren</h3>
    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-2">UTF-8-korrekt mit URL-safe-Variante und Dateiunterstützung</p>
  </a>
<a href="/de/tools/uuid-generator" class="feature-card card-hover">
    <div class="flex items-start justify-between gap-2">
      <span class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🆔</span>
      <div class="flex items-center gap-1.5">
        
        <span class="badge-free">Kostenlos</span>
      </div>
    </div>
    <h3 class="font-semibold mt-1">UUID-Generator</h3>
    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-2">v4 zufällig / v7 zeitgeordnet (RFC 9562) in Serie</p>
  </a></div>
      </section>
    <div class="mt-8 max-w-6xl mx-auto ad-slot ad-slot-global_footer" role="complementary" aria-label="Advertisement">
  <div class="ad-label">Werbung</div>
  <div class="ad-content"><ins class="adsbygoogle" style="display:block" data-ad-client="pub-6594328378083782" data-ad-format="auto" data-full-width-responsive="true"></ins></div>
  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
  </main>
  <footer class="border-t border-slate-200/70 dark:border-slate-800/70 mt-8">
    <div class="mx-auto max-w-6xl px-4 py-8 space-y-5 text-sm text-slate-500 dark:text-slate-400">
      <nav class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2" aria-label="Footer">
        <a href="/de/about" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Über uns</a>
        <a href="/de/contact" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Kontakt</a>
        <a href="/de/pricing" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Preise</a>
        <a href="/de/guides" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Anleitungen</a>
        <a href="/de/privacy" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Datenschutzerklärung</a>
        <a href="/de/terms" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Nutzungsbedingungen</a>
        <a href="/de/aup" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Akzeptable Nutzung</a>
        <a href="/de/refund" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Rückerstattungsrichtlinie</a>
        <a href="/de/ai-models" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">KI-Modelle</a>
        <a href="/de/announcements" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Ankündigungen</a>
        <a id="sprite-reset-link" href="#" style="display:none" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition" onclick="localStorage.removeItem('sprite_hidden');location.reload()">Hilfe-Assistent anzeigen</a>
      </nav>
      <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
        <p class="flex items-center gap-2">
          <span class="grid place-items-center h-6 w-6 rounded-lg bg-gradient-to-br from-indigo-600 to-fuchsia-600 text-white text-xs">✦</span>
          © 2026 tomai
        </p>
        <p>Online-Tools für den Alltag</p>
      </div>
    </div>
  </footer>
  <script>
    // Global credit spend/refund toast — call from any tool's script as
    // window.showCreditToast(message, 'spend' | 'refund'). Auto-dismisses
    // after 3s. message is caller-provided plain text (already localized
    // and interpolated), rendered via textContent — never HTML.
    window.showCreditToast = function (message, kind) {
      var root = document.getElementById('credit-toast-root');
      if (!root) return;
      var el = document.createElement('div');
      el.className = 'credit-toast ' + (kind === 'refund' ? 'refund' : 'spend');
      var icon = document.createElement('span');
      icon.className = 'credit-toast-icon';
      icon.textContent = kind === 'refund' ? '↩️' : '🪙';
      var text = document.createElement('span');
      text.textContent = message;
      var bar = document.createElement('span');
      bar.className = 'credit-toast-bar';
      el.appendChild(icon);
      el.appendChild(text);
      el.appendChild(bar);
      root.appendChild(el);
      // The bar's own 3s CSS animation is the visual countdown; this timeout
      // (same 3000ms) is what actually removes the toast once it empties.
      setTimeout(function () {
        el.classList.add('leaving');
        setTimeout(function () { el.remove(); }, 250);
      }, 3000);
    };
  </script>
  <script>
    // Swap the login link for "My account" when the login-hint cookie is set.
    (function () {
      if (/(?:^|;\s*)li=1/.test(document.cookie)) {
        var a = document.getElementById('nav-auth');
        a.href = a.dataset.accountHref;
        a.textContent = a.dataset.accountLabel;
      }
    })();
  </script>
  <script>
    // Header membership CTA: anonymous/free users see "⚡ Upgrade" -> /pricing
    // (the prominent entry point, not just the footer link). Signed-in Pro/Max
    // members see a calm plan badge -> /account instead of a repeated upsell.
    (function () {
      if (!/(?:^|;\s*)li=1/.test(document.cookie)) return;
      var a = document.getElementById('nav-upgrade');
      if (!a) return;
      fetch('/api/credits').then(function (r) { return r.json(); }).then(function (b) {
        if (!b || !b.ok || (b.data.plan !== 'pro' && b.data.plan !== 'max')) return;
        a.href = a.dataset.accountHref;
        a.classList.add('member');
        var label = document.getElementById('nav-upgrade-label');
        if (label) label.textContent = b.data.plan.toUpperCase();
        a.setAttribute('aria-label', b.data.plan.toUpperCase());
      }).catch(function () {});
    })();
  </script>
  <script>
    // Record visit for the home page "recently used" row (local only).
    try {
      var _id = "minifier";
      var _r = JSON.parse(localStorage.getItem('recent_tools') || '[]').filter(function (x) { return x !== _id; });
      _r.unshift(_id);
      localStorage.setItem('recent_tools', JSON.stringify(_r.slice(0, 8)));
    } catch (e) {}
  </script>
  <script>
    // Announcement bar — fetches latest banner, renders inline. Ephemeral content,
    // not SEO-critical; the /announcements page IS full SSR for indexing.
    (function(){
      var bar=document.getElementById('announcement-bar');
      var link=document.getElementById('announcement-bar-link');
      var closeBtn=document.getElementById('announcement-bar-close');
      if(!bar||!link)return;
      var locale="de";
      fetch('/api/announcements/latest?lang='+encodeURIComponent(locale))
        .then(function(r){return r.json()})
        .then(function(b){
          if(!b.ok||!b.data||!b.data.banner)return;
          var ann=b.data.banner;
          try{if(sessionStorage.getItem('ab_'+ann.id)==='1')return}catch(e){}
          link.textContent=ann.title;
          if(ann.slug)link.href='/'+locale+'/announcements/'+ann.slug;
          bar.classList.remove('hidden')
        }).catch(function(){});
      closeBtn.addEventListener('click',function(){
        bar.classList.add('hidden');
        try{sessionStorage.setItem('ab_'+link.href.split('/').pop(),'1')}catch(e){}
      })
    })();
    // First-visit popup — lazy-shown 4s after load, localStorage-dismissed forever.
    (function(){
      if(false)return; // game pages: no popup over gameplay
      var locale="de";
      fetch('/api/announcements/latest?lang='+encodeURIComponent(locale))
        .then(function(r){return r.json()})
        .then(function(b){
          if(!b.ok||!b.data||!b.data.popups||!b.data.popups.length)return;
          var popup=b.data.popups[0];
          try{if(localStorage.getItem('ap_'+popup.id)==='1')return}catch(e){}
          setTimeout(function(){showPopup(popup)},4000)
        }).catch(function(){});
      function showPopup(p){
        var o=document.createElement('div');
        o.className='fixed inset-0 bg-black/50 z-[9998] flex items-center justify-center p-4';
        o.style.animation='fadeIn .25s ease';
        var slug = p.slug||'';
        var detailUrl = slug ? '/'+locale+'/announcements/'+slug : '';
        o.innerHTML='<div class="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl max-w-md w-full p-6 sm:p-8 relative" style="animation:scaleIn .25s ease">'+
          '<button id="apx" class="absolute top-3 right-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 text-xl leading-none">×</button>'+
          '<div class="text-3xl mb-3">📢</div>'+
          '<h2 class="text-lg font-bold mb-2"></h2>'+
          '<p class="text-sm text-slate-600 dark:text-slate-300 mb-5 leading-relaxed"></p>'+
          '<div class="flex gap-2">'+
          '<button id="apd" class="btn-primary text-sm flex-1">Got it</button>'+
          (detailUrl ? '<a href="'+detailUrl+'" class="btn-ghost text-sm flex-1 text-center">Read more →</a>' : '')+
          '</div></div>';
        document.body.appendChild(o);
        o.querySelector('h2').textContent=p.title;
        o.querySelector('p').textContent=p.content.length>200?p.content.slice(0,200)+'…':p.content;
        function close(){o.remove();try{localStorage.setItem('ap_'+p.id,'1')}catch(e){}}
        o.querySelector('#apx').addEventListener('click',close);
        o.querySelector('#apd').addEventListener('click',close);
        o.addEventListener('click',function(e){if(e.target===o)close()})
      }
    })();
  </script>
</body>
</html>