Files
dogfather-universe/webdesign/portfolio.html
T
DogFatherGitandClaude Opus 5 686e8924bb Portfolio: Kacheln einer Reihe sind gleich gross
Die Projekttexte sind unterschiedlich lang, also waren auch die Kacheln
unterschiedlich hoch. Jetzt bekommen alle Kacheln einer Reihe dieselbe
Hoehe, naemlich die der hoechsten.

Dafuer waren drei Dinge noetig, und nur das erste ist offensichtlich:

1. "align-items: start" musste weg. Es liess jede Kachel ihre
   natuerliche Hoehe behalten -- genau das war der Fehler.

2. Der Inhalt muss die zusaetzliche Hoehe auch aufnehmen koennen.
   Ohne Flex-Aufbau in Kachel und Inhalt waere die Kachel zwar hoeher,
   ihr Inhalt bliebe aber oben kleben und darunter entstuende ein
   leeres Feld.

3. Das letzte Element sitzt am unteren Rand.

DER PUNKT, DER FAST DURCHGERUTSCHT WAERE

Gleich hohe Kacheln heissen NICHT automatisch, dass der Inhalt buendig
steht. Nach Schritt 1 und 2 waren die Kacheln exakt gleich hoch -- und
die Knoepfe standen trotzdem auf verschiedener Hoehe.

Grund: Die Abstaende standen als style-Angabe direkt im HTML
(style="margin-top:1rem"). Eine solche Angabe schlaegt jede Regel aus
dem Stilblatt, das "margin-top: auto" lief also ins Leere. Fuenf
Vorkommen entfernt.

Danach blieben 33 gegen 48 Punkte Abstand zum Kachelboden: Ein Absatz
bringt einen eigenen Abstand nach unten mit, eine Knopfreihe nicht.
Auch das ist jetzt vereinheitlicht.

Die Regel greift ueber :last-child statt nur ueber die Knopfreihe --
die Buchhaltungs-Kachel hat naemlich gar keinen Knopf, sondern einen
Hinweistext an dieser Stelle. Der soll genauso unten stehen.

DIE PRUEFUNG MISST BEIDES GETRENNT

Einmal "jede Reihe ist in sich gleich hoch", einmal "die letzten
Elemente stehen auf einer Linie". Ein einzelner Test auf die Hoehe
haette den Knopf-Versatz nie bemerkt -- die Kacheln waren ja bereits
gleich hoch, als die Knoepfe noch verrutscht waren.

Gemessen: 1129/1129, 881/881, 831 -- und ueberall 33 Punkte Abstand zum
Kachelboden.

Geprueft: 313 Pruefungen gruen (Portfolio 34, Bewegung 34, Verwaltung 62,
CRYONOVA 53, Blickfang 13, System 5, Abmelden 16, Abbruch 42,
Angebot 54).

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-25 13:28:31 +02:00

446 lines
23 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 und Auswertung — jeweils 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>
/* 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">Fünf Projekte, die man anfassen kann</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.</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>
<!-- 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>