Die Kacheln nahmen bisher die volle Breite ein -- ueber 1180 Punkte pro Stueck. Jetzt stehen zwei nebeneinander, jede etwa 574 Punkte breit. ZWEI UMWEGE, DIE NICHT FUNKTIONIERT HABEN Zuerst stand hier auto-fit mit einer Mindestbreite von 420 Punkten. Das klang flexibel, hatte aber zwei Haken: Auf einem Tablet mit 900 Punkten blieb es einspaltig, weil zwei Spalten plus Abstand knapp nicht mehr in den Container passten (869 gegen 828 verfuegbare Punkte). Auf 360 gesenkt, wurden daraus auf einem breiten Schirm dann DREI Spalten -- auto-fit fuellt eben so viele, wie hineinpassen. Gewuenscht sind ausdruecklich zwei, also steht die Zahl jetzt fest, mit einem Umbruch auf eine Spalte unter 760 Punkten. 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. WAS SICH NEBENBEI VON SELBST ERLEDIGT Der Kippwinkel haengt an der Kachelgroesse. Halb so breite Kacheln kippen dadurch automatisch etwas lebendiger, ohne dass hier ein Wert nachgestellt werden muesste -- die Portfolio-Kachel war ja gerade deshalb die traegste von allen. Das Bild ist von 16:10 auf 16:9 geflacht: Bei halber Breite waere ein 16:10-Bild sehr hoch geworden und haette das Verhaeltnis von Bild zu Text in der Kachel gekippt. Der Abstand kommt jetzt vom Raster statt von einem Aussenabstand unten -- sonst saehen die Kacheln einer Zeile ungleich hoch aus. GEPRUEFT UEBER SECHS BILDSCHIRMBREITEN 1920px 2 Spalten Kachel 574px 1440px 2 Spalten Kachel 574px 1200px 2 Spalten Kachel 538px 900px 2 Spalten Kachel 403px 700px 1 Spalte Kachel 644px 390px 1 Spalte Kachel 359px Jeweils mit Gegenprobe, dass nichts seitlich ueberlaeuft. Ein Test auf nur einer Breite haette den Dreispalten-Fall nie bemerkt. Geprueft: 310 Pruefungen gruen (Portfolio 31, Bewegung 34, Verwaltung 62, CRYONOVA 53, Blickfang 13, System 5, Abmelden 16, Abbruch 42, Angebot 54). Co-Authored-By: Claude Opus 5 <[email protected]>
408 lines
21 KiB
HTML
408 lines
21 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: start;
|
|
}
|
|
@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" 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 & 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>
|
|
|
|
<!-- ---------------- 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" style="margin-top:1rem">
|
|
<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" style="margin-top:1rem" 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" style="margin-top:1rem">
|
|
<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>
|