dogfather-universe/assets/js/wd-core.js

/* =====================================================================
   DOGFATHER WEBDESIGN — wd-core.js
   Gemeinsamer Unterbau für ALLE Seiten unter /webdesign/:
   Sprachumschaltung (5 Sprachen), Kopf- und Fußzeile, Einblenden beim
   Scrollen, kleine Helfer für Formulare und API-Aufrufe.

   Warum ein eigener Kern statt assets/js/main.js:
     1. main.js baut seine Kopfzeile mit RELATIVEN Adressen ("index.html",
        "assets/img/..."). Aus einem Unterordner wie /webdesign/ zeigen die
        auf /webdesign/index.html bzw. /webdesign/assets/... — alles kaputt.
        Nachträglich auf absolute Pfade umzustellen würde die 40 bestehenden
        Universe-Seiten anfassen; das Risiko steht in keinem Verhältnis.
     2. main.js enthält eine nahtlose Seitennavigation (Austausch des
        <main>-Inhalts per fetch), Musik-Widget, Vorschau-Modus und die
        Universe-Navigation. Nichts davon gehört in einen geschäftlichen
        Webdesign-Bereich, der bis zur Freigabe nicht öffentlich ist.
     3. Getrennte Datei = der Bereich kann die laufende Live-Seite nicht
        beschädigen.

   Was BEWUSST geteilt wird, damit es sich wie eine Marke anfühlt:
     - derselbe localStorage-Schlüssel "dogi-sprache" → wer im Universe auf
       Französisch stellt, landet hier auf Französisch und umgekehrt;
     - dieselbe Sprachliste inkl. Farben;
     - dieselben Grundtokens aus main.css.
   ===================================================================== */
(function () {
  "use strict";

  /* ===================================================================
     1. SPRACHEN
     Identisch zur Liste in main.js (Code, Kürzel, Name, Leuchtfarbe) —
     bewusst dupliziert statt importiert: main.js kapselt alles in einer
     IIFE ohne Export, und ein <script src="main.js"> nur wegen dieser
     Liste zu laden würde die komplette Universe-Navigation mitschleppen.
     Ändert sich die Liste dort, muss sie hier mitgeändert werden — dieser
     Hinweis steht deshalb bewusst so deutlich hier.
     =================================================================== */
  var SPRACHEN = [
    { code: "de", kurz: "DE", name: "Deutsch", glut: "#ffb300" },
    { code: "de-CH", kurz: "CH", name: "Schwiizerdütsch", glut: "#ff3b3b" },
    { code: "en", kurz: "EN", name: "English", glut: "#2f6bff" },
    { code: "fr", kurz: "FR", name: "Français", glut: "#00c2ff" },
    { code: "pt", kurz: "PT", name: "Português", glut: "#20d97a" },
  ];
  var SPRACHE_SCHLUESSEL = "dogi-sprache";

  function getSprache() {
    var gespeichert = null;
    /* localStorage kann werfen (Privatmodus in älteren Safari-Versionen,
       gesperrte Cookies von Drittanbietern im iframe). Ein Absturz hier
       würde die ganze Seite ohne Kopfzeile lassen — deshalb abgesichert. */
    try { gespeichert = localStorage.getItem(SPRACHE_SCHLUESSEL); } catch (e) { /* egal */ }
    for (var i = 0; i < SPRACHEN.length; i++) {
      if (SPRACHEN[i].code === gespeichert) return gespeichert;
    }
    return "de"; // nie automatische Browsersprache — gleiche Regel wie im Universe
  }

  function setSprache(code) {
    var gueltig = SPRACHEN.some(function (s) { return s.code === code; });
    if (!gueltig) return;
    try { localStorage.setItem(SPRACHE_SCHLUESSEL, code); } catch (e) { /* egal */ }
    document.documentElement.setAttribute("lang", code);
    uebersetzeSeite();
    zeichneKopf();
    zeichneFuss();
    /* Seiteneigene Skripte (Formular-Zusammenfassung, Portal-Tabellen …)
       setzen Text per JS und können hier nachziehen. */
    document.dispatchEvent(new CustomEvent("wd-sprache-geaendert", { detail: { sprache: code } }));
  }

  /* ===================================================================
     2. WÖRTERBUCH FÜR KOPF-/FUSSZEILE UND GETEILTE BAUSTEINE
     Seiteneigene Texte kommen zusätzlich aus window.I18N_WD
     (assets/js/i18n-wd-<seite>.js).

     Schweizerdeutsch ist echter Dialekt, keine ß→ss-Umschrift:
     "Leistungen" → "Was mir mache", "Preise & Zeit" → "Priis & Ziit",
     "Häufige Fragen" → "Hüüfigi Frage".
     =================================================================== */
  var I18N_WD_CORE = {
    /* --- Navigation --- */
    nav_start:      { de: "Start",            "de-CH": "Start",             en: "Home",       fr: "Accueil",    pt: "Início" },
    nav_leistungen: { de: "Leistungen",       "de-CH": "Was mir mache",     en: "Services",   fr: "Prestations", pt: "Serviços" },
    nav_preise:     { de: "Preise &amp; Zeit",    "de-CH": "Priis &amp; Ziit",      en: "Pricing &amp; time", fr: "Tarifs &amp; délais", pt: "Preços &amp; prazos" },
    nav_portfolio:  { de: "Portfolio",        "de-CH": "Portfolio",         en: "Portfolio",  fr: "Portfolio",  pt: "Portfólio" },
    nav_ablauf:     { de: "Ablauf",           "de-CH": "So laufts",         en: "Process",    fr: "Déroulement", pt: "Processo" },
    nav_ueber:      { de: "Über Dogfather",   "de-CH": "Über Dogfather",    en: "About",      fr: "À propos",   pt: "Sobre" },
    nav_faq:        { de: "Fragen",           "de-CH": "Frage",             en: "FAQ",        fr: "FAQ",        pt: "Perguntas" },
    nav_anfrage:    { de: "Projekt anfragen", "de-CH": "Projekt aafroge",   en: "Start a project", fr: "Demander un projet", pt: "Pedir projeto" },
    nav_menue:      { de: "Menü",             "de-CH": "Menü",              en: "Menu",       fr: "Menu",       pt: "Menu" },
    nav_menue_aria: { de: "Navigation öffnen und schließen", "de-CH": "Navigation uf- und zuemache", en: "Open and close navigation", fr: "Ouvrir et fermer la navigation", pt: "Abrir e fechar a navegação" },
    nav_sprache_aria: { de: "Sprache wählen",  "de-CH": "Sprooch uswähle",  en: "Choose language", fr: "Choisir la langue", pt: "Escolher idioma" },
    nav_zum_inhalt: { de: "Direkt zum Inhalt", "de-CH": "Direkt zum Inhalt", en: "Skip to content", fr: "Aller au contenu", pt: "Ir para o conteúdo" },

    /* --- Marke --- */
    marke_oben:  { de: "DOGFATHER",  "de-CH": "DOGFATHER",  en: "DOGFATHER",  fr: "DOGFATHER",  pt: "DOGFATHER" },
    marke_unten: { de: "Webdesign",  "de-CH": "Webdesign",  en: "Web design", fr: "Web design", pt: "Web design" },
    marke_aria:  { de: "Dogfather Webdesign — zur Startseite", "de-CH": "Dogfather Webdesign — zur Startsite", en: "Dogfather Web Design — to the home page", fr: "Dogfather Web Design — vers l'accueil", pt: "Dogfather Web Design — para a página inicial" },

    /* --- Fußzeile --- */
    fuss_claim: {
      de: "Individuelle Webseiten, persönlich umgesetzt — vom ersten Gespräch bis zur fertigen Seite bei einer Ansprechperson.",
      "de-CH": "Eigeti Websites, persönlich gmacht — vom erste Gspröch bis zur fertige Site bi einere Aaspröchperson.",
      en: "Individual websites, built personally — from the first conversation to the finished site with one single contact.",
      fr: "Des sites sur mesure, réalisés personnellement — du premier échange au site fini, avec un seul interlocuteur.",
      pt: "Sites individuais, feitos pessoalmente — da primeira conversa ao site pronto, com uma única pessoa de contacto.",
    },
    fuss_bereiche:  { de: "Bereiche",   "de-CH": "Bereich",    en: "Sections",  fr: "Sections",  pt: "Secções" },
    fuss_zugang:    { de: "Zugang",     "de-CH": "Zuegang",    en: "Access",    fr: "Accès",     pt: "Acesso" },
    fuss_portal:    { de: "Kundenportal", "de-CH": "Kundeportal", en: "Client portal", fr: "Espace client", pt: "Portal do cliente" },
    fuss_verwaltung:{ de: "Verwaltung", "de-CH": "Verwaltig",  en: "Administration", fr: "Administration", pt: "Administração" },
    fuss_universe:  { de: "Zum Dogfather Universe", "de-CH": "Zum Dogfather Universe", en: "To the Dogfather Universe", fr: "Vers le Dogfather Universe", pt: "Para o Dogfather Universe" },
    fuss_kontakt:   { de: "Kontakt &amp; Rechtliches", "de-CH": "Kontakt &amp; Rächtlichs", en: "Contact &amp; legal", fr: "Contact &amp; mentions légales", pt: "Contacto &amp; jurídico" },
    /* Kontaktwege laut Entscheidung vom 22.08.2026: Anfrageformular als
       Hauptweg (strukturierte, qualifizierte Anfragen — Masterplan S.2)
       plus E-Mail als niedrigschwellige Alternative. Bewusst KEINE
       Telefonnummer und kein Messenger: beides erzeugt unstrukturierte
       Nachrichten, die im Verwaltungsbereich nicht auftauchen. */
    fuss_email:     { de: "E-Mail schreiben", "de-CH": "E-Mail schriibe", en: "Send an e-mail", fr: "Écrire un e-mail", pt: "Enviar e-mail" },
    fuss_rechte:    { de: "Alle Rechte vorbehalten.", "de-CH": "Alli Rächt vorbhalte.", en: "All rights reserved.", fr: "Tous droits réservés.", pt: "Todos os direitos reservados." },
    fuss_status: {
      de: "Vorabversion — nicht öffentlich",
      "de-CH": "Vorabversion — nöd öffentlich",
      en: "Preview version — not public",
      fr: "Version préliminaire — non publique",
      pt: "Versão prévia — não pública",
    },

    /* --- Wiederkehrende Bausteine --- */
    ab_preis:    { de: "ab",       "de-CH": "ab",        en: "from",     fr: "à partir de", pt: "a partir de" },
    dauer:       { de: "Dauer",    "de-CH": "Duur",      en: "Duration", fr: "Durée",    pt: "Duração" },

    /* ---------------------------------------------------------------
       PREISE UND ZEITRAHMEN — EINZIGE QUELLE DER WAHRHEIT

       Masterplan S.16, Definition of Done: "Preise, Dauer, 30 %
       Anzahlung und Personalisierung sind überall widerspruchsfrei."
       Genau deshalb stehen diese Angaben hier im Kern und NICHT in den
       einzelnen Seiten-Wörterbüchern: sie erscheinen auf Startseite,
       Leistungen, Preise und im Anfrageformular. Vier Kopien laufen
       früher oder später auseinander — spätestens bei der ersten
       Preisänderung, und dann steht auf einer Seite noch der alte Wert.
       Wird ein Preis geändert, wird er HIER geändert. Einmal.
       --------------------------------------------------------------- */
    pk_onepager_dauer:   { de: "ca. 5–10 Arbeitstage", "de-CH": "öppe 5–10 Arbeitstäg", en: "approx. 5–10 working days", fr: "env. 5 à 10 jours ouvrés", pt: "aprox. 5–10 dias úteis" },
    pk_website_dauer:    { de: "ca. 2–4 Wochen",       "de-CH": "öppe 2–4 Wuche",       en: "approx. 2–4 weeks",         fr: "env. 2 à 4 semaines",      pt: "aprox. 2–4 semanas" },
    pk_shop_dauer:       { de: "ca. 4–8 Wochen",       "de-CH": "öppe 4–8 Wuche",       en: "approx. 4–8 weeks",         fr: "env. 4 à 8 semaines",      pt: "aprox. 4–8 semanas" },
    pk_verwaltung_dauer: { de: "ca. 6–12 Wochen",      "de-CH": "öppe 6–12 Wuche",      en: "approx. 6–12 weeks",        fr: "env. 6 à 12 semaines",     pt: "aprox. 6–12 semanas" },
    betreuung_preis:     { de: "ab 49 € / Monat",      "de-CH": "ab 49 € / Monet",      en: "from €49 / month",          fr: "à partir de 49 € / mois",  pt: "a partir de 49 € / mês" },
    pk_personalisierung: {
      de: "Personalisierung möglich — verändert Preis und Dauer.",
      "de-CH": "Personalisierig möglich — verändert Priis und Duur.",
      en: "Personalisation available — changes price and duration.",
      fr: "Personnalisation possible — modifie le prix et la durée.",
      pt: "Personalização possível — altera preço e duração.",
    },

    /* Paketnamen — erscheinen auf Startseite, Leistungen, Preise und im
       Anfrageformular. Aus demselben Grund wie oben nur EINMAL definiert. */
    pk_onepager_h3:   { de: "Onepager", "de-CH": "Onepager", en: "One-pager", fr: "Page unique", pt: "Página única" },
    pk_website_h3:    { de: "Professionelle Website", "de-CH": "Profi-Website", en: "Professional website", fr: "Site professionnel", pt: "Website profissional" },
    pk_shop_h3:       { de: "Shop &amp; umfangreiche Website", "de-CH": "Shop &amp; grossi Website", en: "Shop &amp; large website", fr: "Boutique &amp; grand site", pt: "Loja &amp; site extenso" },
    pk_verwaltung_h3: { de: "Buchhaltungs- &amp; Steuerverwaltungsseiten", "de-CH": "Buechhaltigs- &amp; Stüürverwaltigssite", en: "Bookkeeping &amp; tax admin portals", fr: "Portails de gestion comptable &amp; fiscale", pt: "Portais de gestão contabilística &amp; fiscal" },
    betreuung_h3:     { de: "Laufende Betreuung", "de-CH": "Laufendi Betreuig", en: "Ongoing support", fr: "Suivi continu", pt: "Acompanhamento contínuo" },

    /* Die 30-%-Regel. Steht auf drei Seiten wortgleich und ist rechtlich
       relevant — deshalb erst recht nur an einer Stelle. */
    anzahlung_titel: { de: "Wichtig: 30 % Anzahlung", "de-CH": "Wichtig: 30 % Aazahlig", en: "Important: 30 % deposit", fr: "Important : acompte de 30 %", pt: "Importante: sinal de 30 %" },
    anzahlung_text: {
      de: "Der Projektstart wird nach Annahme des schriftlichen Angebots und Eingang einer Anzahlung von 30 % des vereinbarten Gesamtpreises reserviert.",
      "de-CH": "Dr Projektstart wird nach Aanahm vom schriftliche Aagebot und Iigang vo ere Aazahlig vo 30 % vom vereinbarte Gsamtpriis reserviert.",
      en: "The project start is reserved once the written quote has been accepted and a deposit of 30 % of the agreed total price has been received.",
      fr: "Le démarrage du projet est réservé après acceptation du devis écrit et réception d'un acompte de 30 % du prix total convenu.",
      pt: "O início do projeto é reservado após a aceitação do orçamento escrito e a receção de um sinal de 30 % do preço total acordado.",
    },
    mehr_dazu:   { de: "Mehr dazu", "de-CH": "Meh dezue", en: "Learn more", fr: "En savoir plus", pt: "Saber mais" },
    laedt:       { de: "Wird geladen…", "de-CH": "Wird glade…", en: "Loading…", fr: "Chargement…", pt: "A carregar…" },
    fehler_allg: {
      de: "Etwas hat nicht geklappt. Bitte später noch einmal versuchen.",
      "de-CH": "Öppis het nöd klappet. Bitte spöter nomol probiere.",
      en: "Something went wrong. Please try again later.",
      fr: "Une erreur est survenue. Merci de réessayer plus tard.",
      pt: "Algo correu mal. Por favor tente novamente mais tarde.",
    },
    fehler_verbindung: {
      de: "Keine Verbindung zum Server. Bitte Internetverbindung prüfen und erneut versuchen.",
      "de-CH": "Kei Verbindig zum Server. Bitte d Internetverbindig prüefe und nomol probiere.",
      en: "No connection to the server. Please check your internet connection and try again.",
      fr: "Pas de connexion au serveur. Vérifiez votre connexion internet et réessayez.",
      pt: "Sem ligação ao servidor. Verifique a ligação à internet e tente novamente.",
    },
    /* --- App-Installation --- */
    install_titel: {
      de: "Als App installieren",
      "de-CH": "Als App installiere",
      en: "Install as an app",
      fr: "Installer en tant qu'application",
      pt: "Instalar como aplicação",
    },
    install_text: {
      de: "Schneller starten, eigenes Symbol, ohne Adressleiste — direkt vom Startbildschirm.",
      "de-CH": "Schnäller starte, eiges Symbol, ohni Adressleischte — direkt vom Startbildschirm.",
      en: "Faster to open, its own icon, no address bar — straight from your home screen.",
      fr: "Ouverture plus rapide, icône dédiée, sans barre d'adresse — directement depuis l'écran d'accueil.",
      pt: "Abre mais depressa, com ícone próprio e sem barra de endereço — direto do ecrã principal.",
    },
    install_knopf: {
      de: "Installieren",
      "de-CH": "Installiere",
      en: "Install",
      fr: "Installer",
      pt: "Instalar",
    },
    install_ios: {
      de: "Unten auf <strong>Teilen</strong> tippen, dann <strong>„Zum Home-Bildschirm“</strong> wählen.",
      "de-CH": "Unde uf <strong>Teile</strong> tippe, denn <strong>„Zum Home-Bildschirm“</strong> uswähle.",
      en: "Tap <strong>Share</strong> at the bottom, then choose <strong>“Add to Home Screen”</strong>.",
      fr: "Touche <strong>Partager</strong> en bas, puis choisis <strong>« Sur l'écran d'accueil »</strong>.",
      pt: "Toca em <strong>Partilhar</strong> em baixo e escolhe <strong>“Adicionar ao ecrã principal”</strong>.",
    },
    install_weg_aria: {
      de: "Hinweis schließen",
      "de-CH": "Hiiwiis zuemache",
      en: "Dismiss notice",
      fr: "Fermer la notification",
      pt: "Fechar aviso",
    },

    fehler_zeit: {
      de: "Zeitüberschreitung — die Verbindung war zu langsam. Bitte noch einmal versuchen.",
      "de-CH": "Ziitüberschritig — d Verbindig isch z langsam gsi. Bitte nomol probiere.",
      en: "Timed out — the connection was too slow. Please try again.",
      fr: "Délai dépassé — la connexion était trop lente. Merci de réessayer.",
      pt: "Tempo esgotado — a ligação estava demasiado lenta. Tente novamente.",
    },
  };

  function t(schluessel) {
    var eintrag = I18N_WD_CORE[schluessel];
    if (!eintrag) return schluessel;
    var sprache = getSprache();
    return eintrag[sprache] || eintrag.de || schluessel;
  }

  /* Seiteneigenen Text nachschlagen — für Werte, die per JS gesetzt werden
     (z.B. Fehlermeldungen im Anfrageformular) und deshalb kein data-i18n
     tragen können. Fällt auf den Kern und dann auf den Schlüssel zurück. */
  function feld(schluessel) {
    var seite = window.I18N_WD || {};
    var eintrag = seite[schluessel] || I18N_WD_CORE[schluessel];
    if (!eintrag) return schluessel;
    var sprache = getSprache();
    return eintrag[sprache] || eintrag.de || schluessel;
  }

  /* Übersetzt ein beliebiges mehrsprachiges Objekt {de,de-CH,en,fr,pt} —
     für Daten, die aus der Datenbank kommen (Leistungstexte aus der
     Verwaltung), nicht aus einer i18n-Datei. */
  function ausObjekt(obj) {
    if (!obj) return "";
    if (typeof obj === "string") return obj;
    return obj[getSprache()] || obj.de || "";
  }

  /* ===================================================================
     3. ÜBERSETZUNG ANWENDEN
     Gleiche Attribut-Konventionen wie im Universe, damit man beim
     Wechseln zwischen den Bereichen nicht umdenken muss:
       data-i18n="schluessel"                     → innerHTML
       data-i18n-attr="alt:key;title:anderer"     → Attribute
     =================================================================== */
  function uebersetzeSeite() {
    var sprache = getSprache();
    document.documentElement.setAttribute("lang", sprache);

    var seite = window.I18N_WD || {};

    document.querySelectorAll("[data-i18n]").forEach(function (el) {
      var schluessel = el.getAttribute("data-i18n");
      var eintrag = seite[schluessel] || I18N_WD_CORE[schluessel];
      if (!eintrag) return;
      var text = eintrag[sprache] || eintrag.de;
      if (text) el.innerHTML = text;
    });

    document.querySelectorAll("[data-i18n-attr]").forEach(function (el) {
      el.getAttribute("data-i18n-attr").split(";").forEach(function (teil) {
        var stueck = teil.trim();
        if (!stueck) return;
        var pos = stueck.indexOf(":");
        if (pos < 1) return;
        var attribut = stueck.slice(0, pos).trim();
        var schluessel = stueck.slice(pos + 1).trim();
        var eintrag = seite[schluessel] || I18N_WD_CORE[schluessel];
        if (!eintrag) return;
        var text = eintrag[sprache] || eintrag.de;
        if (text) el.setAttribute(attribut, text);
      });
    });

    /* Seitentitel und Beschreibung mit übersetzen (Masterplan S.15,
       "Saubere Seitentitel"). Der Schlüssel steht am <html>-Element. */
    var titelKey = document.documentElement.getAttribute("data-i18n-titel");
    if (titelKey) {
      var titelEintrag = seite[titelKey];
      if (titelEintrag) {
        var titel = titelEintrag[sprache] || titelEintrag.de;
        /* Der Titel ist reiner Text — HTML-Entities aus dem Wörterbuch
           (z.B. &amp;) würden sonst wörtlich im Tab stehen. */
        if (titel) document.title = entschaerfe(titel);
      }
    }
  }

  /* Wandelt die im Wörterbuch erlaubten HTML-Entities in echte Zeichen —
     nur für Stellen, die reinen Text brauchen (title, aria-label). */
  function entschaerfe(html) {
    var hilfe = document.createElement("textarea");
    hilfe.innerHTML = html;
    return hilfe.value.replace(/<[^>]*>/g, "");
  }

  /* ===================================================================
     4. NAVIGATION
     Genau sieben Hauptpunkte (Masterplan S.5: "Maximal sieben
     Hauptpunkte in der Desktopnavigation") plus EIN Haupt-CTA.
     Kundenportal und Verwaltung stehen bewusst nur in der Fußzeile —
     sie sind keine Verkaufswege, sondern Zugänge für bestehende Kunden.
     =================================================================== */
  var NAV = [
    { key: "nav_start",      href: "/webdesign/" },
    { key: "nav_leistungen", href: "/webdesign/leistungen.html" },
    { key: "nav_preise",     href: "/webdesign/preise.html" },
    { key: "nav_portfolio",  href: "/webdesign/portfolio.html" },
    { key: "nav_ablauf",     href: "/webdesign/ablauf.html" },
    { key: "nav_ueber",      href: "/webdesign/ueber.html" },
    { key: "nav_faq",        href: "/webdesign/faq.html" },
  ];

  /* Aktiver Punkt: Vergleich über den Dateinamen statt über den ganzen
     Pfad — "/webdesign/" und "/webdesign/index.html" sind dieselbe Seite,
     ein reiner Zeichenkettenvergleich würde das nicht erkennen. */
  function aktuelleDatei() {
    var teil = location.pathname.split("/").pop();
    return teil ? teil : "index.html";
  }
  function istAktiv(href) {
    var zielDatei = href.split("/").pop();
    if (!zielDatei) zielDatei = "index.html";
    return zielDatei === aktuelleDatei();
  }

  function zeichneKopf() {
    var el = document.getElementById("wd-kopf");
    if (!el) return;

    var sprache = getSprache();
    var aktiv = SPRACHEN.filter(function (s) { return s.code === sprache; })[0] || SPRACHEN[0];

    /* Die Zugangswand setzt data-wd-kopf="minimal": dort gibt es noch keine
       Sitzung, also darf die Kopfzeile auch keine Links auf geschützte
       Seiten anbieten (die würden nur wieder auf die Zugangswand
       zurückwerfen — eine Navigation, die sich im Kreis dreht). Der
       Sprachschalter muss aber schon dort erreichbar sein, sonst kann
       jemand, der kein Deutsch liest, die Anleitung gar nicht verstehen. */
    var minimal = el.getAttribute("data-wd-kopf") === "minimal";

    var navHtml = minimal ? "" : NAV.map(function (item) {
      return '<a href="' + item.href + '"' + (istAktiv(item.href) ? ' class="wd-aktiv" aria-current="page"' : "") +
             ' data-i18n="' + item.key + '">' + t(item.key) + "</a>";
    }).join("");

    var sprachHtml = SPRACHEN.map(function (s) {
      return '<button type="button" data-sprache="' + s.code + '"' +
             (s.code === sprache ? ' aria-current="true"' : "") + ">" +
             '<span class="wd-sprache-punkt" style="background:' + s.glut + '"></span>' + s.name + "</button>";
    }).join("");

    /* In der minimalen Fassung ist die Marke KEIN Link: es gibt noch keine
       Sitzung, ein Klick landete nur wieder auf dieser Seite. */
    var markeInnen =
      '<img src="/assets/img/logo-dogfather-transparent.png" alt="" width="42" height="42" />' +
      '<span class="wd-marke-text">' +
        '<span class="wd-marke-oben" data-i18n="marke_oben">' + t("marke_oben") + "</span>" +
        '<span class="wd-marke-unten" data-i18n="marke_unten">' + t("marke_unten") + "</span>" +
      "</span>";
    var markeHtml = minimal
      ? '<span class="wd-marke">' + markeInnen + "</span>"
      : '<a class="wd-marke" href="/webdesign/" aria-label="' + entschaerfe(t("marke_aria")) +
        '" data-i18n-attr="aria-label:marke_aria">' + markeInnen + "</a>";

    el.innerHTML =
      (minimal ? "" : '<a class="wd-skip" href="#wd-inhalt" data-i18n="nav_zum_inhalt">' + t("nav_zum_inhalt") + "</a>") +
      '<header class="wd-kopf">' +
        '<div class="wd-kopf-bar">' +
          markeHtml +
          (minimal ? "" :
            '<button class="wd-menue-knopf" type="button" aria-expanded="false" aria-controls="wd-nav" ' +
              'aria-label="' + entschaerfe(t("nav_menue_aria")) + '" data-i18n-attr="aria-label:nav_menue_aria">' +
              '<span aria-hidden="true">☰</span><span data-i18n="nav_menue">' + t("nav_menue") + "</span>" +
            "</button>") +
          '<nav class="wd-nav' + (minimal ? " wd-nav--minimal" : "") + '" id="wd-nav">' +
            navHtml +
            '<div class="wd-sprache">' +
              '<button class="wd-sprache-knopf" type="button" aria-expanded="false" ' +
                'aria-label="' + entschaerfe(t("nav_sprache_aria")) + '" data-i18n-attr="aria-label:nav_sprache_aria">' +
                '<span aria-hidden="true">🌐</span><span>' + aktiv.kurz + "</span><span aria-hidden=\"true\">▾</span>" +
              "</button>" +
              '<div class="wd-sprache-liste">' + sprachHtml + "</div>" +
            "</div>" +
            (minimal ? "" :
              '<a class="wd-btn wd-btn--haupt wd-btn--klein" href="/webdesign/anfrage.html" data-i18n="nav_anfrage">' + t("nav_anfrage") + "</a>") +
          "</nav>" +
        "</div>" +
      "</header>";

    /* --- Handy-Menü (in der minimalen Kopfzeile gibt es keins) --- */
    var menueKnopf = el.querySelector(".wd-menue-knopf");
    var nav = el.querySelector(".wd-nav");
    if (menueKnopf && nav) {
      menueKnopf.addEventListener("click", function () {
        var offen = nav.classList.toggle("wd-offen");
        menueKnopf.setAttribute("aria-expanded", String(offen));
      });
    }

    /* --- Sprachauswahl --- */
    var sprachBox = el.querySelector(".wd-sprache");
    var sprachKnopf = el.querySelector(".wd-sprache-knopf");
    sprachKnopf.addEventListener("click", function (e) {
      e.stopPropagation();
      var offen = sprachBox.classList.toggle("wd-offen");
      sprachKnopf.setAttribute("aria-expanded", String(offen));
    });
    el.querySelectorAll("[data-sprache]").forEach(function (btn) {
      btn.addEventListener("click", function () { setSprache(btn.dataset.sprache); });
    });
  }

  /* Klick außerhalb schließt die Sprachliste. Bewusst NUR EINMAL beim Start
     angemeldet, nicht in zeichneKopf() — die Funktion läuft bei jedem
     Sprachwechsel erneut, und ein Zuhörer pro Wechsel würde sich sonst
     endlos aufsummieren (genau dieser Fehler ist in main.js dokumentiert). */
  document.addEventListener("click", function (e) {
    var kopf = document.getElementById("wd-kopf");
    if (!kopf) return;
    var box = kopf.querySelector(".wd-sprache");
    if (box && !box.contains(e.target)) {
      box.classList.remove("wd-offen");
      var knopf = box.querySelector(".wd-sprache-knopf");
      if (knopf) knopf.setAttribute("aria-expanded", "false");
    }
  });
  document.addEventListener("keydown", function (e) {
    if (e.key !== "Escape") return;
    var kopf = document.getElementById("wd-kopf");
    if (!kopf) return;
    kopf.querySelectorAll(".wd-offen").forEach(function (n) { n.classList.remove("wd-offen"); });
    kopf.querySelectorAll('[aria-expanded="true"]').forEach(function (n) { n.setAttribute("aria-expanded", "false"); });
  });

  function zeichneFuss() {
    var el = document.getElementById("wd-fuss");
    if (!el) return;
    var jahr = new Date().getFullYear();

    var bereicheHtml = NAV.slice(1).map(function (item) {
      return '<li><a href="' + item.href + '" data-i18n="' + item.key + '">' + t(item.key) + "</a></li>";
    }).join("");

    el.innerHTML =
      '<footer class="wd-fuss">' +
        '<div class="wd-container">' +
          '<div class="wd-fuss-grid">' +
            "<div>" +
              '<a class="wd-marke" href="/webdesign/" style="margin-bottom:.9rem">' +
                '<img src="/assets/img/logo-dogfather-transparent.png" alt="" width="42" height="42" />' +
                '<span class="wd-marke-text">' +
                  '<span class="wd-marke-oben" data-i18n="marke_oben">' + t("marke_oben") + "</span>" +
                  '<span class="wd-marke-unten" data-i18n="marke_unten">' + t("marke_unten") + "</span>" +
                "</span>" +
              "</a>" +
              '<p class="wd-klein wd-leise" data-i18n="fuss_claim">' + t("fuss_claim") + "</p>" +
            "</div>" +
            "<div>" +
              '<h4 data-i18n="fuss_bereiche">' + t("fuss_bereiche") + "</h4>" +
              "<ul>" + bereicheHtml + "</ul>" +
            "</div>" +
            "<div>" +
              '<h4 data-i18n="fuss_zugang">' + t("fuss_zugang") + "</h4>" +
              "<ul>" +
                '<li><a href="/webdesign/portal.html" data-i18n="fuss_portal">' + t("fuss_portal") + "</a></li>" +
                '<li><a href="/webdesign/verwaltung.html" data-i18n="fuss_verwaltung">' + t("fuss_verwaltung") + "</a></li>" +
                '<li><a href="/index.html" data-i18n="fuss_universe">' + t("fuss_universe") + "</a></li>" +
                '<li><a href="mailto:[email protected]" data-i18n="fuss_email">' + t("fuss_email") + "</a></li>" +
                '<li><a href="/kontakt.html" data-i18n="fuss_kontakt">' + t("fuss_kontakt") + "</a></li>" +
              "</ul>" +
            "</div>" +
          "</div>" +
          '<div class="wd-fuss-unten">' +
            "<span>© " + jahr + ' Dogfather Webdesign — <span data-i18n="fuss_rechte">' + t("fuss_rechte") + "</span></span>" +
            '<span class="wd-tag wd-tag--gold" data-i18n="fuss_status">' + t("fuss_status") + "</span>" +
          "</div>" +
        "</div>" +
      "</footer>";
  }

  /* ===================================================================
     5. EINBLENDEN BEIM SCROLLEN
     Die Klasse .wd-bereit wird erst HIER gesetzt — dadurch sind alle
     Elemente ohne JavaScript (oder bei einem Skriptfehler weiter oben)
     ganz normal sichtbar, statt dauerhaft unsichtbar zu bleiben.
     =================================================================== */
  function einblendenAktivieren() {
    var elemente = document.querySelectorAll(".wd-auf");
    if (!elemente.length) return;

    var reduziert = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduziert || !("IntersectionObserver" in window)) return; // alles bleibt sofort sichtbar

    document.documentElement.classList.add("wd-bereit");

    var beobachter = new IntersectionObserver(function (eintraege) {
      eintraege.forEach(function (eintrag) {
        if (!eintrag.isIntersecting) return;
        eintrag.target.classList.add("wd-sichtbar");
        beobachter.unobserve(eintrag.target); // einmal eingeblendet reicht
      });
    }, { rootMargin: "0px 0px -8% 0px", threshold: .08 });

    elemente.forEach(function (el, i) {
      /* Leichte Staffelung innerhalb einer Reihe — aber gedeckelt, sonst
         wartet man bei zehn Karten fast eine Sekunde auf die letzte. */
      el.style.transitionDelay = Math.min(i % 4, 3) * 70 + "ms";
      beobachter.observe(el);
    });
  }

  /* ===================================================================
     6. HELFER FÜR SEITENEIGENE SKRIPTE
     =================================================================== */

  /* Interne API (Postfach-Server, siehe DEPLOY.md). Gleiche Adresse wie
     der Rest der Seite benutzt. */
  var API_BASIS = "https://postfach.dogfather-universe.com";
  var ZEITLIMIT_MS = 15000;

  /* Ein Aufruf mit hartem Zeitlimit. Ohne das hängt fetch() im Mobilfunk
     unbegrenzt — für die Person sieht es dann so aus, als sei der Tipp auf
     den Knopf gar nicht angekommen. Exakt der Fehler, der in gate.html am
     19.08.2026 gemeldet und behoben wurde; hier von Anfang an richtig. */
  async function api(pfad, optionen) {
    var opt = optionen || {};
    var abbruch = new AbortController();
    var timer = setTimeout(function () { abbruch.abort(); }, opt.zeitlimit || ZEITLIMIT_MS);
    try {
      var kopfzeilen = Object.assign({}, opt.headers || {});
      var koerper = opt.body;
      /* FormData darf KEINEN Content-Type gesetzt bekommen — der Browser
         muss die multipart-Grenze selbst anhängen. */
      if (koerper && !(koerper instanceof FormData) && typeof koerper !== "string") {
        koerper = JSON.stringify(koerper);
        kopfzeilen["Content-Type"] = "application/json";
      }
      var antwort = await fetch(API_BASIS + pfad, {
        method: opt.method || (koerper ? "POST" : "GET"),
        headers: kopfzeilen,
        body: koerper,
        signal: abbruch.signal,
        cache: "no-store",
      });
      var daten = await antwort.json().catch(function () { return null; });
      if (!antwort.ok || !daten || daten.ok === false) {
        var meldung = (daten && (daten.error || daten.fehler)) || feld("fehler_allg");
        var fehler = new Error(meldung);
        fehler.status = antwort.status;
        fehler.daten = daten;
        throw fehler;
      }
      return daten;
    } catch (e) {
      if (e && e.name === "AbortError") throw new Error(feld("fehler_zeit"));
      if (e instanceof TypeError) throw new Error(feld("fehler_verbindung")); // Netzwerk, nicht erreichbar
      throw e;
    } finally {
      clearTimeout(timer);
    }
  }

  /* Knopf während eines Vorgangs sperren + beschriften. Verhindert
     Doppel-Absendungen (die bei Rate-Limits besonders teuer sind) und gibt
     sofort sichtbare Rückmeldung. */
  function knopfSperren(btn, an, textWaehrend) {
    if (!btn) return;
    if (an) {
      if (!btn.dataset.originalText) btn.dataset.originalText = btn.textContent;
      btn.disabled = true;
      btn.setAttribute("aria-busy", "true");
      if (textWaehrend) btn.textContent = textWaehrend;
    } else {
      btn.disabled = false;
      btn.removeAttribute("aria-busy");
      if (btn.dataset.originalText) btn.textContent = btn.dataset.originalText;
    }
  }

  /* Meldungskasten setzen und den Fokus dorthin lenken — sonst bekommt
     eine Person mit Screenreader gar nicht mit, dass etwas passiert ist. */
  function meldung(el, text, art) {
    if (!el) return;
    el.textContent = text;
    el.className = "wd-meldung wd-meldung--" + (art === "ok" ? "ok" : "fehler");
    el.hidden = false;
    el.setAttribute("role", art === "ok" ? "status" : "alert");
    el.setAttribute("tabindex", "-1");
    el.focus({ preventScroll: false });
  }

  function meldungAus(el) {
    if (!el) return;
    el.hidden = true;
    el.textContent = "";
  }

  /* Preis-/Datumsformate richten sich nach der gewählten Sprache. */
  function preis(betrag) {
    var karte = { de: "de-DE", "de-CH": "de-CH", en: "en-GB", fr: "fr-FR", pt: "pt-PT" };
    try {
      return new Intl.NumberFormat(karte[getSprache()] || "de-DE", {
        style: "currency", currency: "EUR", maximumFractionDigits: 0,
      }).format(betrag);
    } catch (e) {
      return betrag + " €";
    }
  }

  function datum(wert) {
    if (!wert) return "—";
    var karte = { de: "de-DE", "de-CH": "de-CH", en: "en-GB", fr: "fr-FR", pt: "pt-PT" };
    var d = new Date(wert);
    if (isNaN(d.getTime())) return "—";
    try {
      return new Intl.DateTimeFormat(karte[getSprache()] || "de-DE", {
        day: "2-digit", month: "2-digit", year: "numeric",
      }).format(d);
    } catch (e) {
      return d.toLocaleDateString();
    }
  }

  /* Schützt vor eingeschleustem HTML, wenn Text aus der Datenbank oder aus
     einem Formular in die Seite geschrieben wird. Überall dort Pflicht, wo
     innerHTML mit fremden Daten benutzt wird. */
  function sicher(text) {
    return String(text == null ? "" : text)
      .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;").replace(/'/g, "&#39;");
  }

  /* ===================================================================
     7. ALS APP INSTALLIERBAR (Handy und Computer)

     Drei verschiedene Welten, die sich nicht vereinheitlichen lassen:

     a) Android/Chrome und Chrome/Edge am Computer feuern
        "beforeinstallprompt". Das Ereignis lässt sich abfangen und der
        Einbau-Dialog später gezielt öffnen — genau einmal, und nur wenn
        die Person den eigenen Knopf drückt.
     b) iPhone/iPad (Safari) hat KEIN solches Ereignis und wird es
        absehbar auch nicht bekommen. Dort geht es ausschließlich über
        "Teilen → Zum Home-Bildschirm". Ohne Anleitung findet das kaum
        jemand, deshalb dort ein kurzer, wegklickbarer Hinweis mit den
        echten Schritten statt eines Knopfes, der nichts tut.
     c) Bereits installiert (display-mode: standalone) → gar nichts
        anzeigen. Ein "Installieren"-Knopf in einer schon installierten
        App ist der sicherste Weg, unseriös zu wirken.
     =================================================================== */
  var INSTALL_ABGELEHNT = "wd-install-weg";

  function schonInstalliert() {
    return (window.matchMedia && window.matchMedia("(display-mode: standalone)").matches) ||
           window.navigator.standalone === true;   // iOS-eigene Kennung
  }

  function istApple() {
    var ua = navigator.userAgent || "";
    /* iPadOS meldet sich seit Version 13 als "Macintosh". Die zusätzliche
       Touch-Prüfung unterscheidet ein iPad von einem echten Mac — ohne
       sie bekämen Mac-Nutzer eine iPhone-Anleitung angezeigt. */
    var iphone = /iPad|iPhone|iPod/.test(ua);
    var ipadNeu = /Macintosh/.test(ua) && navigator.maxTouchPoints > 1;
    return iphone || ipadNeu;
  }

  function installBannerBauen(inhalt, mitKnopf) {
    var box = document.createElement("div");
    box.className = "wd-install";
    box.setAttribute("role", "region");
    box.innerHTML =
      '<div class="wd-install-text">' +
        '<img src="/assets/img/wd-app-192.png" alt="" width="40" height="40" />' +
        "<div><strong>" + t("install_titel") + "</strong><span>" + inhalt + "</span></div>" +
      "</div>" +
      '<div class="wd-install-knoepfe">' +
        (mitKnopf ? '<button type="button" class="wd-btn wd-btn--haupt wd-btn--klein" data-wd-install>' + t("install_knopf") + "</button>" : "") +
        '<button type="button" class="wd-btn wd-btn--still wd-btn--klein" data-wd-install-weg aria-label="' +
          entschaerfe(t("install_weg_aria")) + '">✕</button>' +
      "</div>";
    document.body.appendChild(box);

    box.querySelector("[data-wd-install-weg]").addEventListener("click", function () {
      box.remove();
      /* localStorage, nicht sessionStorage: ein "nein danke" soll halten.
         Wer es sich anders überlegt, kann jederzeit über das Browsermenü
         installieren. */
      try { localStorage.setItem(INSTALL_ABGELEHNT, "ja"); } catch (e) { /* egal */ }
    });
    return box;
  }

  function installierbarkeitAktivieren() {
    if (schonInstalliert()) return;
    var abgelehnt = false;
    try { abgelehnt = localStorage.getItem(INSTALL_ABGELEHNT) === "ja"; } catch (e) { /* egal */ }
    if (abgelehnt) return;

    // --- a) Android / Chrome / Edge ---
    window.addEventListener("beforeinstallprompt", function (e) {
      /* Den eigenen Dialog des Browsers unterdrücken und selbst
         entscheiden, wann er kommt — sonst poppt er ungefragt über den
         Inhalt, was viele sofort wegklicken. */
      e.preventDefault();
      var box = installBannerBauen(t("install_text"), true);
      box.querySelector("[data-wd-install]").addEventListener("click", async function () {
        box.remove();
        e.prompt();
        try { await e.userChoice; } catch (err) { /* egal, Entscheidung liegt beim Nutzer */ }
      });
    });

    // --- b) iPhone / iPad ---
    if (istApple()) {
      /* Etwas verzögert, damit der Hinweis nicht beim ersten Blick auf
         die Seite ins Gesicht springt. */
      setTimeout(function () {
        if (!schonInstalliert()) installBannerBauen(t("install_ios"), false);
      }, 2500);
    }
  }

  function serviceWorkerAnmelden() {
    if (!("serviceWorker" in navigator)) return;
    // Über file:// gibt es keine Service Worker — dort gar nicht erst versuchen.
    if (!/^https?:$/.test(location.protocol)) return;
    window.addEventListener("load", function () {
      navigator.serviceWorker
        .register("/webdesign/sw.js", { scope: "/webdesign/" })
        .catch(function () { /* still schlucken: ohne SW funktioniert alles weiter */ });
    });
  }

  /* ===================================================================
     8. ZUGANG BEIM SCHLIESSEN DER SEITE BEENDEN

     Wunsch vom 22.08.2026: "ich will das ich jedes mal den code gefragt
     werde wenn man die seite zu macht."

     Warum das Sitzungs-Cookie allein dafür NICHT reicht:
     Ein Cookie ohne Ablaufdatum wirft der Browser beim Schließen zwar weg
     — aber "Tabs wiederherstellen" (Chrome: "Dort fortfahren, wo du
     aufgehört hast", Android beim erneuten Öffnen, iOS beim Zurückholen
     einer App aus dem Speicher) stellt genau diese Cookies wieder her.
     Man landet dann ohne Codeabfrage wieder mitten in der Seite.

     Deshalb zusätzlich eine Kennung im sessionStorage. Der ist an die
     Browser-Sitzung des Tabs gebunden und ist beim echten Schließen weg.
     Fehlt die Kennung, obwohl ein Cookie da ist, war die Seite zu →
     Sitzung serverseitig beenden und zurück zur Zugangswand.

     Ehrliche Einschränkung: Wer die Adresse in einem NEUEN Tab von Hand
     eingibt, hat dort ebenfalls einen leeren sessionStorage und wird
     erneut gefragt. Das ist der Preis dafür, dass es beim Schließen
     zuverlässig greift — und entspricht dem, was gewünscht war.
     =================================================================== */
  var SITZUNGS_MARKE = "wd-sitzung-aktiv";

  function sitzungsMarkeSetzen() {
    try { sessionStorage.setItem(SITZUNGS_MARKE, "1"); } catch (e) { /* egal */ }
  }

  function hatRollenCookie() {
    return document.cookie.split(";").some(function (s) {
      return s.trim().indexOf("dogiwd_rolle=") === 0;
    });
  }

  function zugangPruefen() {
    // Auf der Zugangswand selbst gibt es nichts zu beenden.
    if (location.pathname.indexOf("/webdesign/zugang.html") === 0) return;

    var marke = null;
    try { marke = sessionStorage.getItem(SITZUNGS_MARKE); } catch (e) { return; }
    if (marke) return;                 // laufende Sitzung, alles gut

    /* Kein Rollen-Cookie -> es gab hier noch nie eine Anmeldung in diesem
       Browser (oder der Bereich ist freigegeben). Dann NICHT abmelden:
       sonst würde eine gerade erst begonnene Sitzung sofort beendet. */
    if (!hatRollenCookie()) { sitzungsMarkeSetzen(); return; }

    /* Cookie da, Marke weg -> die Seite war zwischendurch zu. */
    fetch("/webdesign/zugang-beenden", { method: "POST" })
      .catch(function () { /* auch ohne Antwort weiterleiten */ })
      .then(function () {
        location.replace(
          "/webdesign/zugang.html?next=" + encodeURIComponent(location.pathname + location.search)
        );
      });
  }

  /* ===================================================================
     9. START
     =================================================================== */
  function start() {
    document.body.classList.add("wd");
    zugangPruefen();
    sitzungsMarkeSetzen();
    uebersetzeSeite();
    zeichneKopf();
    zeichneFuss();
    einblendenAktivieren();
    serviceWorkerAnmelden();
    installierbarkeitAktivieren();
    document.dispatchEvent(new CustomEvent("wd-bereit"));
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", start);
  } else {
    start();
  }

  /* Nach außen sichtbare Schnittstelle für seiteneigene Skripte. */
  window.WD = {
    sprachen: SPRACHEN,
    getSprache: getSprache,
    setSprache: setSprache,
    t: feld,
    ausObjekt: ausObjekt,
    uebersetzeSeite: uebersetzeSeite,
    api: api,
    apiBasis: API_BASIS,
    knopfSperren: knopfSperren,
    meldung: meldung,
    meldungAus: meldungAus,
    preis: preis,
    datum: datum,
    sicher: sicher,
  };
})();