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]>
446 lines
23 KiB
HTML
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 & 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 & 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>
|