Files
dogfather-universe/webdesign/portfolio.html
T
DogFatherGitandClaude Opus 5 5ef3a13615 Jede App der Domain bekommt eine eigene Fensterfarbe
Beim Installieren als App sahen alle Dienste gleich aus. Nicht wegen der
Symbole - die sind seit heute Mittag gut unterscheidbar - sondern wegen
der Farbe: zwoelf von vierzehn trugen dasselbe Fast-Schwarz (#05070b,
#05070d, #0a0910, #0b0d10, #0d0817, #0e0a16). Das ist die theme_color,
also am PC die Titelleiste des App-Fensters und am Handy die Statusleiste.

Neu, je App eine Farbe, abgeleitet vom eigenen Symbol:

  Hauptseite            #065f76  Petrol      (Symbol stahlblau)
  DogiCrew-Verwaltung   #8d4125  Kupfer      (Symbol orange)
  Webdesign             #564e95  Violett     (Symbol lila)
  Kundenportal          #924985  Magenta     (Symbol pink)
  WD-Verwaltung         #b44f5e  Rose        (Symbol rot)
  Creator Workspace     #0674b9  Blau        (Symbol nachtblau)

Nextcloud (#17a5a6) bleibt unveraendert - als einzige hob sie sich schon ab.

WICHTIG war, beide Stellen zu aendern: Die meta-Angabe im HTML
ueberschreibt die theme_color aus dem Manifest. Nur das Manifest zu
aendern haette gar nichts bewirkt.

Der background_color (Startbildschirm beim Oeffnen) bleibt bewusst sehr
dunkel, nur leicht in Richtung der App-Farbe getoent - kraeftig ist nur
die schmale Leiste, damit nichts grossflaechig aufblitzt (Vorgabe
augenschonend).

Wie die Farben entstanden sind: Zwei Entwuerfe fielen bei der eigenen
Pruefung durch. In HSL gerechnet lagen Workspace und Webdesign bei einem
Farbabstand von 12.6 statt der noetigen 25 - auf dem Papier 30 Grad
auseinander, fuers Auge dasselbe Blauviolett. Auch der zweite Versuch
scheiterte (Hauptseite zu nah an Nextclouds Tuerkis, 19.1). Neun Farben
bei gleicher Helligkeit passen schlicht nicht mit genug Abstand auf den
Farbkreis. Erst mit der Helligkeit als dritter Dimension und einem
Optimierer, der den KLEINSTEN Abstand im Satz maximiert, kam ein Satz
heraus, der haelt: kleinster Abstand 25.5.

Geprueft: 68 Farbpruefungen (weisse Schrift ueberall lesbar 5.0-7.2:1,
keine blendet, jede hebt sich vom bisherigen Schwarz ab, alle Paare
>= 25 Delta E) und 101 Browserpruefungen ueber 16 Seiten (Manifest und
meta stimmen ueberein, genau eine theme-color je Seite, Symbole
vorhanden) - alle gruen, Gegenprobe schlaegt an.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-05 23:35:25 +02:00

502 lines
27 KiB
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>Portfolio — Dogfather Webdesign</title>
<meta name="description" content="Echte Projekte statt erfundener Beispiele: Website, Onlineshop, Spieleseite, Buchhaltung, Auswertung und eine Rechtsplattform — jeweils mit Ausgangslage, Lösung und Ergebnis." />
<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="#564e95" />
<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>
/* GENAU zwei Projekte nebeneinander.
Zuerst stand hier auto-fit mit einer Mindestbreite. Das fuellt aber
so viele Spalten, wie hineinpassen -- auf einem breiten Schirm
waren es drei. Gewuenscht sind ausdruecklich zwei, also steht die
Zahl jetzt fest.
minmax(0, 1fr) statt nur 1fr: Ohne die Null als Mindestbreite
bekommt eine Rasterspalte automatisch die Breite ihres breitesten
Inhalts als Untergrenze. Ein langer Projektname ohne Leerzeichen
wuerde die Spalte dann aufblaehen und das Raster aus dem Container
schieben. */
.pfo-raster {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.2rem, 2.4vw, 2rem);
/* align-items bleibt auf dem Standard "stretch": Alle Kacheln einer
Zeile bekommen dieselbe Hoehe, naemlich die der hoechsten.
Vorher stand hier "start". Dann behaelt jede Kachel ihre
natuerliche Hoehe -- und weil die Projekttexte unterschiedlich
lang sind, standen zwei Kacheln nebeneinander, die sichtbar
verschieden hoch waren. */
}
/* Damit "stretch" wirkt, muss der Inhalt die zusaetzliche Hoehe auch
aufnehmen koennen. Ohne diese drei Zeilen waere die Kachel zwar
hoeher, ihr Inhalt bliebe aber oben kleben und darunter entstuende
ein leeres Feld. */
.pfo-raster .pfo-projekt { display: flex; flex-direction: column; }
.pfo-raster .pfo-inhalt { flex: 1; display: flex; flex-direction: column; }
/* Das letzte Element sitzt am unteren Rand, nicht direkt unter dem
Text. Dadurch stehen die Knoepfe zweier nebeneinanderliegender
Kacheln auf einer Linie, auch wenn die Texte unterschiedlich lang
sind -- genau das macht den Unterschied zwischen "gleich hoch" und
"sieht aufgeraeumt aus".
Bewusst :last-child statt einer Regel nur fuer den Knopf: Die
Buchhaltungs-Kachel hat gar keinen Knopf, sondern einen
Hinweistext an dieser Stelle. Der soll genauso unten stehen.
Die Abstaende standen vorher als style-Angabe direkt im HTML. Eine
solche Angabe schlaegt jede Regel aus dem Stilblatt -- die Knoepfe
blieben deshalb an unterschiedlicher Hoehe kleben, obwohl die
Kacheln laengst gleich hoch waren. Sie sind jetzt entfernt. */
.pfo-raster .pfo-inhalt > :last-child {
margin-top: auto;
padding-top: 1rem;
/* Ohne das haengen die letzten Elemente unterschiedlich hoch ueber
dem Kachelboden: Ein Absatz bringt einen eigenen Abstand nach
unten mit, eine Knopfreihe nicht. Gemessen waren es 48 gegen 33
Punkte -- bei sonst exakt gleich hohen Kacheln faellt genau das
auf. */
margin-bottom: 0;
}
@media (max-width: 760px) {
/* Darunter waeren zwei Spalten so schmal, dass Ueberschrift und
Schilder im Kachelkopf umbrechen. Dann lieber untereinander. */
.pfo-raster { grid-template-columns: 1fr; }
}
/* Der Abstand kommt jetzt vom Raster. Ein zusaetzlicher Abstand unten
wuerde die Kacheln einer Zeile ungleich hoch aussehen lassen. */
.pfo-projekt { overflow: hidden; padding: 0; margin-bottom: 0; }
/* Bei halber Breite ist ein 16:10-Bild sehr hoch. Etwas flacher
gehalten, damit Bild und Text in der Kachel im Verhaeltnis bleiben. */
.pfo-raster .pfo-bild { aspect-ratio: 16 / 9; }
.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">Sechs Projekte, die es wirklich gibt</h1>
<p class="wd-lead" style="max-width:72ch" data-i18n="pf_lead">Jede dieser Seiten läuft wirklich, unter ihrer eigenen Adresse. Die Vorschaubilder sind echte Aufnahmen der laufenden Seiten — keine gezeichneten Entwürfe. Wo eine Aufnahme bearbeitet ist, steht der Grund beim Projekt dabei. Eine der Seiten ist bewusst gesperrt und lässt sich nicht besuchen; auch das steht dort.</p>
</div>
</section>
<!-- Blickfang: der Monolith. Steht zwischen Einleitung und den
echten Projekten -- ein ruhiger Moment, bevor die Arbeit kommt.
aria-hidden, weil rein atmosphaerisch: Die Aussage der Seite
steckt in den Projekten darunter, nicht in diesem Bild. -->
<section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:0">
<div class="wd-container wd-container--schmal">
<div class="wd-blickfang wd-blickfang--monolith wd-auf" aria-hidden="true"></div>
</div>
</section>
<section class="wd-abschnitt" style="padding-top:0">
<div class="wd-container">
<!-- ---------------- Projekt 1 ---------------- -->
<!-- Zwei Projekte nebeneinander. Der Umbruch auf eine Spalte
passiert ueber auto-fit, nicht ueber eine feste Bildschirm-
breite: So bricht das Raster genau dann um, wenn eine Kachel
schmaler als 420 Punkte wuerde -- unabhaengig davon, wie
breit das Fenster gerade ist oder ob spaeter eine Spalte
dazukommt. -->
<div class="pfo-raster">
<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">
<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">
<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>
<!-- ---------------- Projekt 3 ---------------- -->
<article class="wd-karte wd-karte--aqua pfo-projekt wd-auf">
<img class="pfo-bild" src="/assets/img/wd-projekt-zockeranstalt.jpg"
alt="Startseite von zockeranstalt.dogfather-universe.com" width="1200" height="750" loading="lazy" decoding="async"
data-i18n-attr="alt:p3_alt" />
<div class="pfo-inhalt">
<div class="pfo-kopf">
<h2 data-i18n="p3_h2">Dogi's ZockerAnstalt</h2>
<span class="wd-tag wd-tag--aqua" data-i18n="p3_art">Spieleseite</span>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
<p data-i18n="p3_ausgang">Die Runde wollte zusammen spielen, ohne sich bei einem fremden Anbieter anzumelden.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
<p data-i18n="p3_loesung">Eine eigene Spielhalle mit acht selbst gebauten Spielen, mehrere davon gemeinsam in Echtzeit spielbar.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
<p data-i18n="p3_ergebnis">Läuft unter eigener Adresse auf dem eigenen Server.</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="p3_f1">Acht Spiele, jedes einzeln gebaut</li>
<li data-i18n="p3_f2">Mehrspieler in Echtzeit, mit Live-Ranglisten</li>
<li data-i18n="p3_f3">Konten und Bestenlisten</li>
<li data-i18n="p3_f4">Ein Regelwerk zu jedem Spiel</li>
<li data-i18n="p3_f5">Eigene Fotos hochladbar, für ein Suchbild daraus</li>
</ul>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_stil">Stilrichtung</h3>
<p data-i18n="p3_stil">Spielhallen-Optik in Neonfarben — kräftig, aber ohne Flackern und Blinken.</p>
</div>
</div>
</details>
<div class="wd-btn-reihe">
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://zockeranstalt.dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
</div>
</div>
</article>
<!-- ---------------- Projekt 4 ---------------- -->
<article class="wd-karte wd-karte--vip pfo-projekt wd-auf">
<img class="pfo-bild" src="/assets/img/wd-projekt-buchhaltung.jpg"
alt="Anmeldeseite von buchhaltung.vans-diy-bastelbedarf.com" width="1200" height="750" loading="lazy" decoding="async"
data-i18n-attr="alt:p4_alt" />
<div class="pfo-inhalt">
<div class="pfo-kopf">
<h2 data-i18n="p4_h2">Buchhaltung &amp; Steuern</h2>
<span class="wd-tag wd-tag--gold" data-i18n="p4_art">Fachanwendung</span>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
<p data-i18n="p4_ausgang">Die Zahlen des Shops lagen in Tabellen und Zetteln verstreut, und vor dem Steuertermin musste alles von Hand zusammengesucht werden.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
<p data-i18n="p4_loesung">Eine eigene Buchhaltung mit doppelter Buchführung, die Verkäufe automatisch aus dem Shop übernimmt.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
<p data-i18n="p4_ergebnis">Im laufenden Betrieb, mit einer schriftlichen Verfahrensdokumentation an den GoBD entlang.</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="p4_f1">Verkäufe kommen alle fünf Minuten selbst aus dem Shop</li>
<li data-i18n="p4_f2">Rechnungen mit fortlaufender Nummer, Korrektur nur per Stornorechnung</li>
<li data-i18n="p4_f3">Kontoauszüge einlesen (CAMT.053, MT940 oder CSV)</li>
<li data-i18n="p4_f4">Eigene Konten je Kunde und Lieferant</li>
<li data-i18n="p4_f5">Auswertungen entstehen alle aus demselben Buchungsbestand</li>
</ul>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_stil">Stilrichtung</h3>
<p data-i18n="p4_stil">Ruhig und zurückhaltend — bei Zahlen soll nichts vom Lesen ablenken.</p>
</div>
</div>
</details>
<!-- Kein "Live ansehen": Dahinter liegt eine Anmeldung, und was
dort steht, sind echte Geschäftszahlen. Ein Knopf, der nur
zu einer Anmeldemaske führt, wäre ein leeres Versprechen. -->
<p class="wd-klein wd-leise" data-i18n="p4_kein_link">Ohne öffentlichen Zugang: Dahinter liegen echte Geschäftszahlen.</p>
</div>
</article>
<!-- ---------------- Projekt 5 ---------------- -->
<article class="wd-karte wd-karte--premium pfo-projekt wd-auf">
<img class="pfo-bild" src="/assets/img/wd-projekt-analyse.jpg"
alt="Startseite von analyse.dogfather-universe.com, die Gesichter sind zum Schutz der Beteiligten unkenntlich gemacht" width="1200" height="750" loading="lazy" decoding="async"
data-i18n-attr="alt:p5_alt" />
<div class="pfo-inhalt">
<div class="pfo-kopf">
<h2 data-i18n="p5_h2">Command Center</h2>
<span class="wd-tag wd-tag--indigo" data-i18n="p5_art">Auswertung</span>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
<p data-i18n="p5_ausgang">Die Zahlen zu Videos und Reichweite standen an verschiedenen Stellen, und niemand im Team sah dasselbe Bild.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
<p data-i18n="p5_loesung">Eine gemeinsame Auswertung, zu der jede und jeder im Team einen eigenen Zugang hat.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
<p data-i18n="p5_ergebnis">Im täglichen Einsatz, alle arbeiten mit demselben Stand.</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="p5_f1">Videos, Zahlen, Monate und Notizen an einer Stelle</li>
<li data-i18n="p5_f2">Eigener Zugang je Person, mit unterschiedlichen Rechten</li>
<li data-i18n="p5_f3">Zugangscodes selbst änderbar, nichts fest eingebaut</li>
<li data-i18n="p5_f4">Als App installierbar</li>
</ul>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_stil">Stilrichtung</h3>
<p data-i18n="p5_stil">Dunkel und aufgeräumt, mit einer ruhigen Leitfarbe je Bereich.</p>
</div>
<!-- Warum das Vorschaubild bearbeitet ist: siehe alt-Text. -->
<div class="pfo-block">
<h3 data-i18n="p5_hinweis_h3">Zum Vorschaubild</h3>
<p data-i18n="p5_hinweis">Die Gesichter auf der Aufnahme sind unkenntlich gemacht. Die Seite gehört dem Team, nicht mir — und niemand hat zugestimmt, sein Bild hier zu zeigen.</p>
</div>
</div>
</details>
<div class="wd-btn-reihe">
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://analyse.dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
</div>
</div>
</article>
<!-- ---------------- Projekt 6 ---------------- -->
<article class="wd-karte wd-karte--premium pfo-projekt wd-auf">
<img class="pfo-bild" src="/assets/img/wd-projekt-safeaddress.jpg"
alt="Zugangswand von safeaddress.dogfather-universe.com, die Gesichter sind zum Schutz der Beteiligten unkenntlich gemacht" width="1200" height="750" loading="lazy" decoding="async"
data-i18n-attr="alt:p6_alt" />
<div class="pfo-inhalt">
<div class="pfo-kopf">
<h2 data-i18n="p6_h2">Spicy SafeAddress</h2>
<span class="wd-tag wd-tag--lila" data-i18n="p6_art">Rechtsplattform</span>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
<p data-i18n="p6_ausgang">Wer im Netz etwas anbietet, muss im Impressum eine Anschrift angeben, an die Post zugestellt werden kann. Für Creator ist das die eigene Wohnadresse — und die steht damit für jeden lesbar im Netz.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
<p data-i18n="p6_loesung">Eine Plattform, die eine Anschrift für das Impressum bereitstellt, die eingehende Post ordnet und die Wohnadresse getrennt davon unter Verschluss hält.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
<p data-i18n="p6_ergebnis">Fertig gebaut und bewusst noch vollständig gesperrt. Sie geht erst dann online, wenn eine deutsche Fachkanzlei Betreiber, Standort, Verträge und den Postablauf schriftlich freigegeben hat.</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="p6_f1">Die Wohnadresse liegt in einer eigenen Tabelle — keine Liste, keine Suche und kein Export kann sie versehentlich mitnehmen</li>
<li data-i18n="p6_f2">Die fachlichen Regeln stehen in der Datenbank, nicht nur im Formular: Ein Fehler in der Oberfläche kann sie nicht umgehen</li>
<li data-i18n="p6_f3">Ein Protokoll, das sich nicht nachträglich ändern lässt — jede Manipulation fällt beim Prüfen auf</li>
<li data-i18n="p6_f4">Adressfelder werden einzeln verschlüsselt, mit einem eigenen Schlüssel</li>
<li data-i18n="p6_f5">Die Impressumsseiten kommen ohne JavaScript aus, denn sie müssen dauerhaft erreichbar sein</li>
</ul>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_stil">Stilrichtung</h3>
<p data-i18n="p6_stil">Sehr dunkel, mit einem einzigen kräftigen Rot, das sparsam eingesetzt wird. Kein Countdown und kein Plätze-Zähler — Druck als Verkaufsmittel ist hier ausdrücklich ausgeschlossen.</p>
</div>
<!-- Gleiche Begruendung wie bei Projekt 5. -->
<div class="pfo-block">
<h3 data-i18n="p6_hinweis_h3">Zum Vorschaubild</h3>
<p data-i18n="p6_hinweis">Die Gesichter auf der Aufnahme sind unkenntlich gemacht. Auf der Seite arbeiten zwei Menschen zusammen, und niemand hat zugestimmt, sein Bild hier zu zeigen.</p>
</div>
</div>
</details>
<!-- Kein Knopf: Ein "Live ansehen" wuerde auf eine Zugangswand
fuehren und damit ein Versprechen brechen, das der Knopf
gibt. Stattdessen ein Satz, der erklaert, warum. -->
<p class="wd-klein wd-leise" data-i18n="p6_kein_link">Diese Seite lässt sich nicht ansehen: Sie ist vollständig gesperrt und zeigt nach außen nur die Zugangswand.</p>
</div>
</article>
<!-- Ehrliche Leerstelle statt erfundener Kundenstimmen. -->
</div>
<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 sechste 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>