DogFatherGitandClaude Opus 5
be3599239d
Diese Runde ging eine Ebene tiefer als "sieht es gut aus": Ist das
System, aus dem das Aussehen entsteht, ueberhaupt eines?
DIE MESSUNG VORWEG
Markenfarben ausgeschrieben im Quelltext: 155 Stellen
davon Blau 74, Gold 33, Lila 22, Gruen 16, Rot 10
verschiedene Eckenradien: 12
darunter 5px, 7px, 9px, 11px
Die Farben gab es laengst als Variablen. Sie standen trotzdem ueberall
ausgeschrieben da, weil halbdurchsichtige Toene -- Raender, Leuchten,
sanfte Flaechen -- einen Alphawert brauchen, und das mit einer fertigen
Farbvariablen nicht geht: rgba(127, 208, 232, .16).
Die Folge waere beim ersten Farbwechsel sichtbar geworden: Man findet
150 Stellen, uebersieht fuenf, und die Seite hat danach zwei Blautoene,
die sich um eine Nuance unterscheiden. Genau das ist der Unterschied
zwischen einer gewachsenen und einer gestalteten Oberflaeche.
WAS GEAENDERT WURDE
Kanalvariablen (--wd-blau-rgb: 127 208 232) neben den fertigen Farben.
Damit schreibt man rgb(var(--wd-blau-rgb) / .16), und eine Aenderung
wirkt ueberall. 164 Stellen umgestellt, verteilt ueber CSS und neun
Seiten.
Auch die abgeleiteten Farben zeigen jetzt auf die Kanaele statt eigene
Werte zu fuehren -- und die vier Prozessfarben (--wd-p1 bis p4) sind
keine eigenen Farben mehr, sondern Rollen: --wd-p1: var(--wd-blau).
Sonst haette man vier weitere Stellen, die beim naechsten Farbwechsel
stillschweigend zurueckbleiben.
Ergebnis: Jede Markenfarbe hat genau EINE Quelle. Ausgeschriebene
Markenfarben im Quelltext: 0.
Radien auf vier Stufen plus Pillenform: 6 / 10 / 14 / 20 / 999. Kein
Wert wurde um mehr als 2px verschoben, optisch aendert sich also nichts
Spuerbares -- 12 verschiedene Werte sind auf 3 tatsaechlich verwendete
zusammengeschmolzen. Zwischenwerte wie 7px oder 11px entstehen nicht aus
Absicht, sondern weil man beim Bauen einer neuen Kachel nicht nachschaut,
was nebenan schon gilt.
DER BEWEIS, DASS ES EIN SYSTEM IST
Neue Pruefung pruef-system.mjs. Sie behauptet nicht, sie STELLT UM: Die
Markenfarbe wird von Babyblau auf kraeftiges Orange gesetzt und dann
nachgezaehlt, ob irgendwo der alte Ton stehen bleibt.
658 von 1975 sichtbaren Elementen tragen die Markenfarbe
0 bleiben nach der Umstellung beim alten Ton
Prozessfarben folgen nachweislich mit
Radien: 3 Stufen
UND DIE WICHTIGSTE ERKENNTNIS -- ueber das Messen selbst
Der erste Anlauf meldete 110 haengengebliebene Elemente, alle in Kopf-
und Fusszeile. Die naheliegende Erklaerung waere gewesen: "da steht die
Farbe noch ausgeschrieben". Sie war falsch.
Nachgewiesen ueber die DevTools-Schnittstelle: Auf diese Elemente wirkt
die Regel ".wd a:not(.wd-btn) -> var(--wd-blau)", und --wd-blau
resolviert an genau dieser Stelle korrekt zum neuen Orange. Trotzdem
blieb die berechnete Textfarbe alt -- auch nach erzwungener
Neuberechnung.
Der Unterschied: Kopf- und Fusszeile werden von wd-core.js per innerHTML
eingefuegt. Chromium erneuert solche Teilbaeume nicht zuverlaessig, wenn
man eine Variable NACHTRAEGLICH umstellt. Laedt man dieselbe Seite mit
bereits geaenderter Variable, sind sie orange -- gegengeprueft mit einem
Minimalbeispiel, in dem derselbe Mechanismus einwandfrei funktioniert.
Das Pruefverfahren wurde deshalb umgestellt: Die Variable wird VOR dem
Laden ueberschrieben. Das entspricht genau dem, was eine Aenderung in der
CSS-Datei bewirkt -- also dem Fall, um den es wirklich geht.
Haette ich der ersten Messung geglaubt, haette ich 110 einwandfreie
Stellen "repariert" und dabei das gerade aufgebaute System wieder
zerlegt. Es ist der siebte Fehlalarm in eigener Messtechnik innerhalb
von zwei Runden -- und der subtilste.
ALLE PRUEFUNGEN GRUEN: Gestaltung 0 Befunde (13 Seiten x 5 Sprachen
gegen WCAG 2.2 AA), Anfragedetail 20, Verwaltung 69, Portal 32,
Widerruf 58, Textkodierung 55 Kombinationen, Designsystem 5.
Versionsstempel und Cache-Name auf v9.
Co-Authored-By: Claude Opus 5 <[email protected]>
202 lines
10 KiB
HTML
202 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-i18n-titel="seiten_titel">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<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/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=20260823wd9" />
|
|
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
|
|
<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 & Zahlung</a>
|
|
<a href="#dauer" data-i18n="fq_t_dauer">Dauer & Änderungen</a>
|
|
<a href="#inhalt" data-i18n="fq_t_inhalt">Inhalte & Zusammenarbeit</a>
|
|
<a href="#technik" data-i18n="fq_t_technik">Hosting, Domain & Rechte</a>
|
|
<a href="#veroeff" data-i18n="fq_t_veroeff">Veröffentlichung & 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 & 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 & Ä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 & 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 & 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 & 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=20260823wd9"></script>
|
|
<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
|
|
</body>
|
|
</html>
|