Files
dogfather-universe/webdesign/faq.html
T
DogFatherGitandClaude Opus 5 51c3d4402b Audit des Creator Workspace, App-Symbole fuer alle Apps der Domain
AUDIT (Auftrag: vollstaendiger Durchgang, Fehler direkt beheben)

Ausgangslage waren 40 Pruefungen mit 1616 Einzelpunkten, alle gruen.
Acht neue Pruefungen kamen dazu; sie haben gefunden, was die alten nicht
sehen konnten.

Der schwerste Fund: Die Zugangsschranke verglich req.path EXAKT gegen
eine Liste. Express raeumt Punkt-Segmente selbst weg, mehrfache
Schraegstriche aber nicht. Damit kam //workspace/start.html OHNE
Anmeldung mit HTTP 200, und ein Creator bekam ueber
/workspace//personen.html die Verwaltungsseite. Die DATEN waren nie
betroffen (nachgemessen: 404 bzw. 401). Behoben durch Normalisierung
UND eine Umkehr der Logik -- jetzt ist jede .html geschuetzt ausser der
Anmeldeseite, statt nur die in der Liste. Eine vergessene neue Seite
steht damit nicht mehr versehentlich offen.

Weiter behoben:
  * Kaputter/abgebrochener Rumpf ergab 500 in HTML statt 400 in JSON --
    die Oberflaeche ruft ueberall a.json() und lief in einen zweiten
    Fehler; der Knopf hing ohne Meldung.
  * POST /zustand/sichern war der einzige von 60 schreibenden Wegen
    ohne Herkunftspruefung.
  * workspace-sicherung.js gab interne Pfade in Fehlermeldungen nach
    aussen; alle 23 anderen Module antworten neutral.
  * admin_notiz war als einziges von 14 Feldern ohne <label>.
  * Der aktive Filter hatte keinen sichtbaren Fokus (CSS-Spezifitaet
    0,3,0 schlug 0,2,0) -- genau der Knopf, auf dem man steht.
  * h1 -> h3 ohne Zwischenstufe auf zwei Seiten.
  * HSTS ging auch ueber http mit (RFC 6797, 7.2 verbietet das).
  * upgrade-insecure-requests galt auch auf 127.0.0.1 -- dadurch war
    WebKit/Safari ueberhaupt nicht pruefbar, also der Browser, den
    jedes iPhone benutzt.
  * pruef-grosscheck las readdirSync(".") und pruefte aus server/
    gestartet NULL oeffentliche Seiten -- meldete aber "ok".

Neue Pruefungen: struktur, schranke, haerte, alle-wege,
barrierefrei-workspace, breiten, tempo-workspace, browser.
Jede mit Gegenprobe und mit der geprueften Anzahl in der Bedingung.
Vier davon sind beim Bauen durch die eigene Gegenprobe aufgeflogen und
haetten sonst dauerhaft gruen gemeldet, ohne etwas zu messen.

APP-SYMBOLE (Wunsch: alle Apps der Domain, jede anders, ausser
safeaddress)

Zehn Apps, zehn Stile, zehn in OKLCH gerechnete Farben. Zusammen haelt
sie dasselbe Logo, dieselbe Eckenrundung und eine gemeinsame gedeckte
Farbreihe. Beim Bauen wird gemessen, ob sich das Logo vom Grund abhebt
(19 bis 58 Helligkeitsstufen).

Dabei aufgefallen: Das Kundenportal hatte kein eigenes Manifest und
trug Namen und Symbol der Webdesign-Seite. Der Workspace hatte gar
keins und war als App nicht installierbar. Beide haben jetzt eins.

Geaendert wurde AUSSCHLIESSLICH das Symbol. Ein Zwischenstand hatte
auch die Themenfarben gesetzt; das war mehr als bestellt und wurde
zurueckgenommen.

Werkzeuge: tools/logo-freistellen.mjs, tools/app-symbole.mjs,
tools/app-symbole-einbinden.mjs -- alles im Browser gerechnet, kein
Bildprogramm, keine neue Abhaengigkeit.

Gitea und Nextcloud sind bereits live und nachgeprueft.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-05 11:42:17 +02:00

207 lines
11 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>Häufige Fragen — Dogfather Webdesign</title>
<meta name="description" content="Preise, Dauer, Inhalte, Änderungen, Hosting, Rechte, Zahlung und Veröffentlichung — offen beantwortet." />
<meta name="robots" content="noindex, nofollow, noarchive" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/webdesign-32.png" />
<meta name="theme-color" content="#05070b" />
<link rel="manifest" href="/webdesign/app.webmanifest" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/webdesign-180.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd20" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd20" />
<style>
.fq-thema { scroll-margin-top: 90px; }
.fq-thema + .fq-thema { margin-top: clamp(2rem, 4vw, 3rem); }
.fq-thema > h2 {
font-size: clamp(1.2rem, 2.6vw, 1.5rem);
padding-bottom: .5rem; margin-bottom: 1.1rem;
border-bottom: 1px solid var(--wd-rand);
}
/* Sprungmarken.
Frueher eine waagerecht wischbare Leiste. Rueckmeldung 22.08.2026:
"ich will nicht dass man die hin und her schieben muss man soll die
alle sehen aber nicht schieben muessen" -- voellig richtig. Eine
Wischleiste verbirgt, DASS es noch mehr gibt: was rechts aus dem Bild
ragt, existiert fuer die meisten Menschen nicht. Dazu kommt ein
haesslicher Balken quer ueber die Seite.
Jetzt bricht die Leiste einfach um. Der Text in den Knoepfen darf
dabei mitbrechen (white-space: normal) -- sonst sprengt ein langer
Name wie "Buchhaltungs- & Steuerverwaltungsseiten" auf 320px die
Zeile und der waagerechte Ueberlauf waere durch die Hintertuer
zurueck. */
.fq-sprung {
display: flex; flex-wrap: wrap; gap: .5rem;
padding: .2rem 0 1rem;
}
.fq-sprung a {
flex: 0 1 auto;
padding: .55rem 1rem; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; border: 1px solid var(--wd-rand);
font-size: .92rem; font-weight: 600; color: var(--wd-text-mid);
white-space: normal; text-align: center; line-height: 1.25;
}
.fq-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgb(var(--wd-blau-rgb) / .06); }
/* Ab 700px alle nebeneinander in EINER Reihe.
Rueckmeldung 22.08.2026: "alle neben einander bitte". Vorher passten
nur vier in die Zeile und die fuenfte rutschte allein darunter — das
sieht aus wie ein Versehen, nicht wie eine Gestaltung.
"flex: 1 1 0" statt "auto": damit teilen sich alle fuenf den Platz zu
gleichen Teilen, unabhaengig von der Textlaenge. Mit "auto" waere
"Preise & Zahlung" schmal und "Inhalte & Zusammenarbeit" breit —
ungleiche Kacheln in einer Reihe, genau was hier nicht gewollt ist.
"min-width: 0" ist noetig, weil Flex-Elemente sonst nicht unter ihre
Inhaltsbreite schrumpfen und die Reihe doch wieder umbrechen wuerde.
Laengere Namen brechen dadurch innerhalb ihrer Kachel auf zwei
Zeilen; die Kacheln bleiben durch die Reihe trotzdem gleich hoch.
Unter 700px bleibt es beim Umbruch — fuenf Spalten waeren auf einem
Handy unlesbar schmal. */
@media (min-width: 700px) {
.fq-sprung a { flex: 1 1 0; min-width: 0; padding-left: .6rem; padding-right: .6rem; }
}
</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 wd-container--schmal">
<span class="wd-eyebrow" data-i18n="fq_eyebrow">Häufige Fragen</span>
<h1 data-i18n="fq_h1">Alles, was vorher geklärt sein sollte</h1>
<p class="wd-lead" data-i18n="fq_lead">Sortiert nach Thema. Wenn deine Frage nicht dabei ist, schreib sie einfach ins Anfrageformular — sie landet dann hier, wenn sie öfter kommt.</p>
<nav class="fq-sprung" aria-label="Themen">
<a href="#preis" data-i18n="fq_t_preis">Preise &amp; Zahlung</a>
<a href="#dauer" data-i18n="fq_t_dauer">Dauer &amp; Änderungen</a>
<a href="#inhalt" data-i18n="fq_t_inhalt">Inhalte &amp; Zusammenarbeit</a>
<a href="#technik" data-i18n="fq_t_technik">Hosting, Domain &amp; Rechte</a>
<a href="#veroeff" data-i18n="fq_t_veroeff">Veröffentlichung &amp; danach</a>
</nav>
</div>
</section>
<section class="wd-abschnitt" style="padding-top:0">
<div class="wd-container wd-container--schmal">
<div class="fq-thema wd-auf" id="preis">
<h2 data-i18n="fq_t_preis">Preise &amp; Zahlung</h2>
<details class="wd-faq">
<summary data-i18n="f1_f">Warum steht kein Festpreis auf der Seite?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f1_a">Weil ein ehrlicher Festpreis erst möglich ist, wenn der Umfang bekannt ist.</p></div>
</details>
<details class="wd-faq">
<summary data-i18n="f2_f">Was passiert, wenn ich nach der Anzahlung abspringe?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f2_a">Die Anzahlung hat den Zweck, dein Zeitfenster zu reservieren.</p></div>
</details>
<details class="wd-faq">
<summary data-i18n="f3_f">Kommen später versteckte Kosten dazu?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f3_a">Von mir nicht — was extra kostet, steht vorher im Angebot.</p></div>
</details>
</div>
<div class="fq-thema wd-auf" id="dauer">
<h2 data-i18n="fq_t_dauer">Dauer &amp; Änderungen</h2>
<details class="wd-faq">
<summary data-i18n="f4_f">Woran liegt es, wenn ein Projekt länger dauert?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f4_a">In den allermeisten Fällen an fehlenden Inhalten, nicht an der Technik.</p></div>
</details>
<details class="wd-faq">
<summary data-i18n="f5_f">Wie viele Änderungen sind drin?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f5_a">Typischerweise zwei Feedbackrunden.</p></div>
</details>
<details class="wd-faq">
<summary data-i18n="f6_f">Kann ich Texte später selbst ändern?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f6_a">Ja, das ist ausdrücklich das Ziel.</p></div>
</details>
</div>
<div class="fq-thema wd-auf" id="inhalt">
<h2 data-i18n="fq_t_inhalt">Inhalte &amp; Zusammenarbeit</h2>
<details class="wd-faq">
<summary data-i18n="f7_f">Ich habe kein Logo. Ist das ein Problem?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f7_a">Kein Hindernis, aber auch nicht kostenlos.</p></div>
</details>
<details class="wd-faq">
<summary data-i18n="f8_f">Kann ich Bilder aus dem Internet verwenden?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f8_a">Nur wenn die Lizenz das erlaubt.</p></div>
</details>
<details class="wd-faq">
<summary data-i18n="f9_f">Wie läuft die Kommunikation während des Projekts?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f9_a">Über deinen eigenen Kundenbereich auf dieser Seite.</p></div>
</details>
</div>
<div class="fq-thema wd-auf" id="technik">
<h2 data-i18n="fq_t_technik">Hosting, Domain &amp; Rechte</h2>
<details class="wd-faq">
<summary data-i18n="f10_f">Brauche ich eine eigene Domain und ein eigenes Hosting?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f10_a">Ja, beides gehört dir und läuft auf deinen Namen.</p></div>
</details>
<details class="wd-faq">
<summary data-i18n="f11_f">Bin ich danach von dir abhängig?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f11_a">Nein, und das ist Absicht.</p></div>
</details>
<details class="wd-faq">
<summary data-i18n="f12_f">Wie steht es um Datenschutz und Impressum?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f12_a">Die technischen Voraussetzungen baue ich ein.</p></div>
</details>
</div>
<div class="fq-thema wd-auf" id="veroeff">
<h2 data-i18n="fq_t_veroeff">Veröffentlichung &amp; danach</h2>
<details class="wd-faq">
<summary data-i18n="f13_f">Wird meine Seite ins Portfolio aufgenommen?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f13_a">Nur wenn du es erlaubst.</p></div>
</details>
<details class="wd-faq">
<summary data-i18n="f14_f">Was passiert, wenn die Seite ausfällt?</summary>
<div class="wd-faq-inhalt"><p data-i18n="f14_a">Mit Betreuung merke ich es in der Regel selbst.</p></div>
</details>
</div>
<!-- Gold: Zahlungsinformation, hier als Erinnerung an die zentrale Regel. -->
<div class="wd-hinweis wd-auf" style="margin-top:2rem">
<p class="wd-hinweis-titel" data-i18n="anzahlung_titel">Wichtig: 30 % Anzahlung</p>
<p data-i18n="anzahlung_text">Der Projektstart wird nach Annahme des schriftlichen Angebots und Eingang einer Anzahlung von 30 % des vereinbarten Gesamtpreises reserviert.</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="fq_rest_titel">Deine Frage war nicht dabei?</h2>
<p class="wd-lead" data-i18n="fq_rest_text">Schreib sie einfach ins Anfrageformular — es gibt dort ein freies Feld dafür. Du kannst mir auch direkt eine E-Mail schreiben, wenn dir das lieber ist.</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>
<a class="wd-btn wd-btn--zweit" href="mailto:[email protected]" data-i18n="fuss_email">E-Mail schreiben</a>
</div>
</div>
</section>
</main>
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-faq.js?v=20260823wd20"></script>
<script src="/assets/js/wd-core.js?v=20260823wd20"></script>
</body>
</html>