dogfather-universe/webdesign/ablauf.html

<!DOCTYPE html>
<html lang="de" data-i18n-titel="seiten_titel">
<head>
<meta charset="UTF-8" />
<!-- viewport-fit=cover ist die Voraussetzung dafuer, dass env(safe-area-inset-*)
     ueberhaupt einen Wert liefert. Ohne diese Angabe gibt jedes env() null zurueck
     -- die Sicherheitsabstaende im CSS waeren totes Recht. Zusammen mit
     apple-mobile-web-app-status-bar-style=black-translucent (siehe unten) laeuft
     der Inhalt sonst installiert unter Uhr und Akkuanzeige. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Ablauf — Dogfather Webdesign</title>
<meta name="description" content="Von der Anfrage bis zur Übergabe: sieben Schritte, jeweils mit dem, was du machst, was ich mache und was am Ende dabei herauskommt." />
<meta name="robots" content="noindex, nofollow, noarchive" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/webdesign-32.png" />
<meta name="theme-color" content="#05070b" />
<link rel="manifest" href="/webdesign/app.webmanifest" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/webdesign-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>
  /* Zeitstrahl: die Linie verbindet die Nummernkreise. Sie liegt hinter
     den Kreisen (z-index) und endet beim letzten Schritt, damit sie nicht
     ins Leere weiterläuft. */
  .abl-strahl { position: relative; }
  .abl-strahl::before {
    content: "";
    position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px;
    background: linear-gradient(180deg, var(--wd-blau-tief), var(--wd-lila-tief));
    opacity: .35;
  }
  @media (max-width: 640px) { .abl-strahl::before { display: none; } }

  .abl-schritt { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 1.2rem; margin-bottom: 1.1rem; }
  @media (max-width: 640px) { .abl-schritt { grid-template-columns: 1fr; gap: .7rem; } }

  .abl-nr {
    position: relative; z-index: 1;
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
    color: var(--wd-blau); background: #0b1320;
    border: 2px solid var(--wd-rand-stark);
    font-variant-numeric: tabular-nums;
  }
  .abl-schritt--lila .abl-nr { color: var(--wd-lila); border-color: rgb(var(--wd-lila-rgb) / .4); }
  @media (max-width: 640px) { .abl-nr { width: 40px; height: 40px; font-size: 1rem; } }

  .abl-karte h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-bottom: .9em; }
  .abl-rollen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  @media (max-width: 820px) { .abl-rollen { grid-template-columns: 1fr; gap: .8rem; } }
  .abl-rolle h3 { font-size: 0.8rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .35em; color: var(--wd-blau); }
  .abl-schritt--lila .abl-rolle h3 { color: var(--wd-lila); }
  /* Die dritte Spalte ist das Ergebnis — bekommt einen leichten Rahmen,
     damit sie sich von "wer macht was" abhebt. */
  .abl-rolle--erg {
    background: rgb(var(--wd-blau-rgb) / .05); border: 1px solid var(--wd-rand);
    border-radius: 10px; padding: .8rem .9rem; margin: -.8rem -.9rem;
  }
  .abl-rolle p { margin: 0; font-size: .98rem; }
</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="ab_eyebrow">Ablauf</span>
      <h1 data-i18n="ab_h1">Sieben Schritte, keine Überraschungen</h1>
      <p class="wd-lead" style="max-width:72ch" data-i18n="ab_lead">Jeder Schritt endet mit etwas, das du sehen und prüfen kannst. Du weißt jederzeit, wo dein Projekt steht und was als Nächstes von wem gebraucht wird.</p>
    </div>
  </section>

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

        <div class="abl-schritt wd-auf">
          <span class="abl-nr" aria-hidden="true">01</span>
          <div class="wd-karte abl-karte">
            <h2 data-i18n="s1_h2">Anfrage</h2>
            <div class="abl-rollen">
              <div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s1_du">Formular ausfüllen — Ziel, Umfang, Budgetrahmen, Wunschtermin.</p></div>
              <div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s1_ich">Anfrage prüfen und innerhalb weniger Tage melden.</p></div>
              <div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s1_erg">Eine Bestätigung mit Zusammenfassung dessen, was du angegeben hast.</p></div>
            </div>
          </div>
        </div>

        <div class="abl-schritt abl-schritt--lila wd-auf">
          <span class="abl-nr" aria-hidden="true">02</span>
          <div class="wd-karte wd-karte--lila abl-karte">
            <h2 data-i18n="s2_h2">Briefing</h2>
            <div class="abl-rollen">
              <div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s2_du">Fragen beantworten und sagen, was du schon an Texten, Bildern und Logo hast.</p></div>
              <div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s2_ich">Nachfragen, wo etwas unklar ist — lieber jetzt als mitten im Bau.</p></div>
              <div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s2_erg">Ein gemeinsames Bild davon, was die Seite können muss.</p></div>
            </div>
          </div>
        </div>

        <div class="abl-schritt wd-auf">
          <span class="abl-nr" aria-hidden="true">03</span>
          <div class="wd-karte abl-karte">
            <h2 data-i18n="s3_h2">Angebot &amp; Anzahlung</h2>
            <div class="abl-rollen">
              <div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s3_du">Angebot lesen, Fragen stellen, annehmen oder ablehnen — und bei Annahme die 30 % überweisen.</p></div>
              <div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s3_ich">Preis, Umfang, Zeitrahmen und alles, was extra kostet, schriftlich festhalten.</p></div>
              <div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s3_erg">Ein reservierter Starttermin. Vorher wird kein Zeitfenster blockiert.</p></div>
            </div>
          </div>
        </div>

        <div class="abl-schritt abl-schritt--lila wd-auf">
          <span class="abl-nr" aria-hidden="true">04</span>
          <div class="wd-karte wd-karte--lila abl-karte">
            <h2 data-i18n="s4_h2">Design</h2>
            <div class="abl-rollen">
              <div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s4_du">Entwurf ansehen und Rückmeldung geben — am besten gesammelt statt in vielen einzelnen Nachrichten.</p></div>
              <div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s4_ich">Aufbau, Farben und Schriften entwerfen — und dir Handy- und Computeransicht zeigen, nicht nur eine davon.</p></div>
              <div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s4_erg">Ein freigegebener Entwurf. Erst danach wird gebaut.</p></div>
            </div>
          </div>
        </div>

        <div class="abl-schritt wd-auf">
          <span class="abl-nr" aria-hidden="true">05</span>
          <div class="wd-karte abl-karte">
            <h2 data-i18n="s5_h2">Entwicklung</h2>
            <div class="abl-rollen">
              <div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s5_du">Fehlende Inhalte nachliefern, falls noch welche offen sind.</p></div>
              <div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s5_ich">Die Seite bauen — mit den echten Inhalten, nicht mit Blindtext.</p></div>
              <div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s5_erg">Eine benutzbare Seite auf einer Vorschauadresse, die nur du und ich kennen.</p></div>
            </div>
          </div>
        </div>

        <div class="abl-schritt abl-schritt--lila wd-auf">
          <span class="abl-nr" aria-hidden="true">06</span>
          <div class="wd-karte wd-karte--lila abl-karte">
            <h2 data-i18n="s6_h2">Tests</h2>
            <div class="abl-rollen">
              <div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s6_du">Selbst durchklicken — besonders auf deinem eigenen Handy.</p></div>
              <div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s6_ich">Jedes Formular, jeden Link und jeden Fehlerfall durchspielen, auf Handy, Tablet und Computer.</p></div>
              <div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s6_erg">Eine Liste dessen, was geprüft wurde — und was bewusst nicht enthalten ist.</p></div>
            </div>
          </div>
        </div>

        <div class="abl-schritt wd-auf">
          <span class="abl-nr" aria-hidden="true">07</span>
          <div class="wd-karte abl-karte">
            <h2 data-i18n="s7_h2">Freigabe &amp; Übergabe</h2>
            <div class="abl-rollen">
              <div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s7_du">Ausdrücklich freigeben und den Restbetrag begleichen.</p></div>
              <div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s7_ich">Live schalten, dich einweisen und die Zugänge übergeben.</p></div>
              <div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s7_erg">Deine Seite, deine Zugänge, deine Nutzungsrechte. Betreuung ist optional, kein Zwang.</p></div>
            </div>
          </div>
        </div>

      </div>

      <div class="wd-hinweis wd-auf" style="margin-top:1.6rem">
        <p class="wd-hinweis-titel" data-i18n="ab_wichtig_titel">Keine Veröffentlichung ohne deine Freigabe</p>
        <p data-i18n="ab_wichtig_text">Die Seite geht ausschließlich dann online, wenn du das ausdrücklich sagst. Das gilt auch für die Aufnahme ins Portfolio — beides ist getrennt und beides brauchst du nicht zu erlauben.</p>
      </div>
    </div>
  </section>

  <section class="wd-abschnitt wd-abschnitt--gehoben">
    <div class="wd-container wd-container--schmal">
      <h2 class="wd-auf" data-i18n="ab_dauer_h2">Wie lange dauert das insgesamt?</h2>
      <p class="wd-lead wd-auf" data-i18n="ab_dauer_p">Die Zeitrahmen auf der Preisseite gelten ab dem Eingang der Anzahlung — nicht ab der ersten Nachricht. Der häufigste Grund für Verzögerungen ist nicht die Technik, sondern dass Texte oder Bilder noch fehlen. Deshalb wird im Formular gleich danach gefragt.</p>
      <div class="wd-btn-reihe">
        <a class="wd-btn wd-btn--haupt" href="/webdesign/anfrage.html" data-i18n="nav_anfrage">Projekt anfragen</a>
        <a class="wd-btn wd-btn--zweit" href="/webdesign/leistungen.html" data-i18n="ab_zu_preise">Zu den Zeitrahmen</a>
      </div>
    </div>
  </section>

</main>

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

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