dogfather-universe/webdesign/portfolio.html

<!DOCTYPE html>
<html lang="de" data-i18n-titel="seiten_titel">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio — Dogfather Webdesign</title>
<meta name="description" content="Echte Projekte statt erfundener Beispiele: Dogfather Universe und Van's DIY & Bastelbedarf — mit Ausgangslage, Lösung und Ergebnis." />
<meta name="robots" content="noindex, nofollow, noarchive" />
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<meta name="theme-color" content="#05070b" />
<link rel="manifest" href="/webdesign/app.webmanifest" />
<link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd20" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd20" />
<style>
  .pfo-projekt { overflow: hidden; padding: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
  .pfo-bild {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
    border-bottom: 1px solid var(--wd-rand);
  }
  .pfo-inhalt { padding: clamp(1.3rem, 3vw, 2rem); }
  .pfo-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: 1rem; }
  .pfo-kopf h2 { margin: 0; font-size: clamp(1.4rem, 3.2vw, 1.9rem); }

  .pfo-block { margin-bottom: 1.1rem; }
  .pfo-block h3 { font-size: 0.8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--wd-blau); margin-bottom: .35em; }
  .wd-karte--lila .pfo-block h3 { color: var(--wd-lila); }
  .pfo-block p { margin: 0; }

  /* Die Detailangaben stecken in einem aufklappbaren Bereich: die Karte
     bleibt beim Überfliegen kurz, wer mehr will, klappt auf. Bewusst das
     native Klapp-Element des Browsers, damit Tastatur und Screenreader
     ohne Zusatzcode funktionieren.
     (Der Tag-Name steht hier absichtlich nicht ausgeschrieben — sonst
     zählt ihn die Tag-Balance-Prüfung in server/pruefe-webdesign-i18n.mjs
     als öffnendes Element mit und meldet einen Fehler, den es nicht gibt.) */
  .pfo-mehr { margin-top: .4rem; }
  .pfo-mehr > summary {
    cursor: pointer; list-style: none;
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 44px; padding: .5rem .1rem;
    font-weight: 700; color: var(--wd-blau); font-size: .95rem;
  }
  .wd-karte--lila .pfo-mehr > summary { color: var(--wd-lila); }
  .pfo-mehr > summary::-webkit-details-marker { display: none; }
  .pfo-mehr > summary::after { content: "▾"; transition: transform var(--wd-zeit) ease; }
  .pfo-mehr[open] > summary::after { transform: rotate(180deg); }
  .pfo-mehr-inhalt { padding-top: .6rem; border-top: 1px solid var(--wd-rand); margin-top: .3rem; }
</style>
</head>
<body class="wd">

<div id="wd-kopf"></div>

<main id="wd-inhalt">

  <section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:clamp(2.4rem,6vw,4rem)">
    <div class="wd-container">
      <span class="wd-eyebrow" data-i18n="pf_eyebrow">Portfolio</span>
      <h1 data-i18n="pf_h1">Zwei Projekte, die man anfassen kann</h1>
      <p class="wd-lead" style="max-width:72ch" data-i18n="pf_lead">Beide Seiten laufen wirklich, unter ihrer eigenen Adresse, auf einem eigenen Server. Die Vorschaubilder sind echte Aufnahmen der laufenden Seiten — keine gezeichneten Entwürfe.</p>
    </div>
  </section>

  <section class="wd-abschnitt" style="padding-top:0">
    <div class="wd-container">

      <!-- ---------------- Projekt 1 ---------------- -->
      <article class="wd-karte pfo-projekt wd-auf">
        <img class="pfo-bild" src="/assets/img/wd-projekt-universe.jpg"
             alt="Startseite von dogfather-universe.com" width="1200" height="750" loading="lazy" decoding="async"
             data-i18n-attr="alt:p1_alt" />
        <div class="pfo-inhalt">
          <div class="pfo-kopf">
            <h2 data-i18n="p1_h2">Dogfather Universe</h2>
            <span class="wd-tag" data-i18n="p1_art">Umfangreiche Website</span>
          </div>

          <div class="pfo-block">
            <h3 data-i18n="pf_ausgang">Ausgangslage</h3>
            <p data-i18n="p1_ausgang">Drei getrennte Welten sollten unter ein Dach, ohne dass Besucher sich verlaufen.</p>
          </div>
          <div class="pfo-block">
            <h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
            <p data-i18n="p1_loesung">Eine Seite mit drei farblich klar getrennten Welten, gemeinsamer Navigation und durchgängig fünf Sprachen.</p>
          </div>
          <div class="pfo-block">
            <h3 data-i18n="pf_ergebnis">Ergebnis</h3>
            <p data-i18n="p1_ergebnis">Seit August 2026 öffentlich und im täglichen Einsatz.</p>
          </div>

          <details class="pfo-mehr">
            <summary data-i18n="pf_details">Details ansehen</summary>
            <div class="pfo-mehr-inhalt">
              <div class="pfo-block">
                <h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
                <ul class="wd-liste">
                  <li data-i18n="p1_f1">Fünf Sprachen, inklusive echtem Schweizerdeutsch</li>
                  <li data-i18n="p1_f2">Verwaltungsbereich mit Rollen und Rechten</li>
                  <li data-i18n="p1_f3">Bewerbungssystem mit Statusverfolgung</li>
                  <li data-i18n="p1_f4">Supporter-Abo mit Zahlungsanbindung</li>
                  <li data-i18n="p1_f5">Automatische Live-Erkennung des Streams</li>
                  <li data-i18n="p1_f6">Als App installierbar</li>
                </ul>
              </div>
              <div class="pfo-block">
                <h3 data-i18n="pf_stil">Stilrichtung</h3>
                <p data-i18n="p1_stil">Dunkel und cinematisch, mit einer eigenen Leitfarbe je Welt.</p>
              </div>
            </div>
          </details>

          <div class="wd-btn-reihe" style="margin-top:1rem">
            <a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
          </div>
        </div>
      </article>

      <!-- ---------------- Projekt 2 ---------------- -->
      <article class="wd-karte wd-karte--lila pfo-projekt wd-auf">
        <img class="pfo-bild" src="/assets/img/wd-projekt-vandiy.jpg"
             alt="Startseite von vans-diy-bastelbedarf.com" width="1200" height="696" loading="lazy" decoding="async"
             data-i18n-attr="alt:p2_alt" />
        <div class="pfo-inhalt">
          <div class="pfo-kopf">
            <h2 data-i18n="p2_h2">Van's DIY &amp; Bastelbedarf</h2>
            <span class="wd-tag wd-tag--lila" data-i18n="p2_art">Onlineshop</span>
          </div>

          <div class="pfo-block">
            <h3 data-i18n="pf_ausgang">Ausgangslage</h3>
            <p data-i18n="p2_ausgang">Handgemachtes wurde bis dahin über Nachrichten verkauft.</p>
          </div>
          <div class="pfo-block">
            <h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
            <p data-i18n="p2_loesung">Ein vollständiger Shop mit Kategorien, Artikeln, Warenkorb und Gutscheincodes.</p>
          </div>
          <div class="pfo-block">
            <h3 data-i18n="pf_ergebnis">Ergebnis</h3>
            <p data-i18n="p2_ergebnis">Artikel werden selbstständig angelegt und gepflegt, ohne Rückfrage und ohne Wartezeit.</p>
          </div>

          <details class="pfo-mehr">
            <summary data-i18n="pf_details">Details ansehen</summary>
            <div class="pfo-mehr-inhalt">
              <div class="pfo-block">
                <h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
                <ul class="wd-liste">
                  <li data-i18n="p2_f1">Kategorien, Artikel und Varianten</li>
                  <li data-i18n="p2_f2">Warenkorb und Kasse, auf dem Handy geprüft</li>
                  <li data-i18n="p2_f3">Gutscheincodes und Versandregeln</li>
                  <li data-i18n="p2_f4">Adminbereich für die eigenständige Artikelpflege</li>
                  <li data-i18n="p2_f5">Mehrsprachig</li>
                </ul>
              </div>
              <div class="pfo-block">
                <h3 data-i18n="pf_stil">Stilrichtung</h3>
                <p data-i18n="p2_stil">Dunkel mit warmen Violett- und Rosétönen, passend zum handgemachten Sortiment.</p>
              </div>
            </div>
          </details>

          <div class="wd-btn-reihe" style="margin-top:1rem">
            <a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://vans-diy-bastelbedarf.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
          </div>
        </div>
      </article>

      <!-- Ehrliche Leerstelle statt erfundener Kundenstimmen. -->
      <div class="wd-notiz wd-auf">
        <p><strong data-i18n="pf_regeln_titel">Was hier bewusst fehlt</strong><br />
        <span data-i18n="pf_regeln_text">Es steht kein einziges Kundenzitat auf dieser Seite. Nicht, weil es keine zufriedenen Kunden gäbe, sondern weil noch niemand ein Zitat geschrieben und freigegeben hat.</span></p>
      </div>

    </div>
  </section>

  <section class="wd-abschnitt wd-abschnitt--gehoben">
    <div class="wd-container wd-container--schmal" style="text-align:center">
      <h2 data-i18n="pf_cta_h2">Soll deins das dritte sein?</h2>
      <p class="wd-lead" data-i18n="pf_cta_p">Ob dein Projekt hier später auftaucht, entscheidest ausschließlich du — die Aufnahme ins Portfolio ist von der Veröffentlichung deiner Seite getrennt und braucht deine ausdrückliche Erlaubnis.</p>
      <div class="wd-btn-reihe" style="justify-content:center">
        <a class="wd-btn wd-btn--haupt" href="/webdesign/anfrage.html" data-i18n="nav_anfrage">Projekt anfragen</a>
      </div>
    </div>
  </section>

</main>

<div id="wd-fuss"></div>

<script src="/assets/js/i18n-wd-portfolio.js?v=20260823wd20"></script>
<script src="/assets/js/wd-core.js?v=20260823wd20"></script>
</body>
</html>