DogFatherGitandClaude Opus 5
9186d4cc1a
Rueckmeldung 22.08.2026 zur Anfrage-Detailansicht: "das ganze soll viel uebersichtlicher sein und nicht so durcheinander" und "die leiste rechts zum hoch und runter, kannst du die mal geil aussehen lassen anstatt einfach so kake weiss." 1. DAS DURCHEINANDER HATTE EINE URSACHE Die Kaesten standen in "columns: 2" -- Zeitungsspalten. Die fuellen sich von selbst: erst Spalte eins bis oben voll, dann Spalte zwei. Wo ein Kasten landet, haengt allein davon ab, wie lang die vor ihm sind. Bei einer Anfrage stand "Interne Notizen" oben rechts, bei der naechsten unten links. Es gab schlicht keine Ordnung, der man haette folgen koennen. Jetzt ein festes Raster mit einer Aussage: LINKS = was der Kunde geschickt hat (lesen) RECHTS = was du damit machst (handeln) Immer gleich. Nach der zweiten Anfrage weiss man, wo man hinschaut, ohne zu suchen. Rechts ist schmaler (Knoepfe brauchen weniger Platz als laufender Text) und klebt beim Scrollen mit -- die Handlungen sind der Grund, warum man die Ansicht oeffnet, sie duerfen nicht aus dem Bild wandern. Reihenfolge rechts korrigiert: "Anfrage uebernehmen" steht jetzt oben. Es ist der Knopf, den man bei einer neuen Anfrage druecken WILL -- er stand unter den Notizen und damit ausserhalb des sichtbaren Bereichs. 2. "KEINE ANGABE" WAR DIE HALBE ANSICHT Jede fehlende Angabe bekam eine eigene Zeile. Der Kasten "Umfang" enthielt zweimal nichts und war trotzdem so gross wie einer mit Inhalt. Leere Felder sind aber keine Information, sondern deren Fehlen. Sie stehen jetzt als EINE leise Zeile am Fuss: "Ohne Angabe: Bereiche, Funktionen". Aus sechs Zeilen wird eine. Weggelassen werden sie nicht -- man muss sehen, wonach gefragt wurde und was unbeantwortet blieb, genau daraus entstehen die Rueckfragen. Neu darueber: "Auf einen Blick" mit Paket, Budget, Wunschtermin und Alter. Die vier Fragen, die man immer zuerst hat, standen vorher auf drei Kaesten verteilt. Das Alter als "vor 3 Tagen" statt als Datum -- die Frage ist nie "welcher Tag war das", sondern "wie lange liegt das schon hier", und die beantwortet ein Datum erst nach Kopfrechnen. 3. BILDLAUFLEISTE -- und ein Fehler, der fast durchgegangen waere Auf einer durchgehend dunklen Seite ist eine weisse Bildlaufleiste der einzige grelle Streifen im Bild. Sie zieht den Blick dorthin, wo nichts Wichtiges steht, und blendet. Verstoesst gegen die Dauervorgabe "augenschonend". Zwei Wege noetig, weil kein Browser beide versteht: color-scheme: dark fuer Firefox/Safari (wirkt zusaetzlich auf Auswahl- und Datumsfelder, die sonst weiss aufblitzen), ::-webkit-scrollbar fuer Chrome/Edge. scrollbar-width/-color bewusst NICHT gesetzt -- sobald es dasteht, ignoriert Chrome die feineren ::-webkit-Regeln. Beim ersten Versuch stand dort nur ".wd ::-webkit-scrollbar" -- MIT Leerzeichen. Das trifft nur Elemente INNERHALB der Seite, nicht den body selbst. Alle Messungen sahen gut aus; an der einen Leiste, ueber die sich jemand beschwert hatte, haette sich nichts geaendert. Jetzt beide Fassungen, mit einem Warnhinweis im CSS. GEPRUEFT Neue Datei pruef-detail.mjs: echter Browser, 1440x900 und 390x844, mit einer absichtlich sehr knappen Anfrage -- genau die sah vorher schlecht aus. 20 Pruefungen, alle bestanden: Spalten nebeneinander bzw. auf dem Handy untereinander, rechte schmaler als linke, keine Ueberlappung, kein waagerechtes Schieben, nichts ragt aus dem Fenster, keine einzelne "keine Angabe"-Zeile mehr, keine Fehler im Protokoll. Die Bildlaufleiste liess sich nur in einem ECHTEN Browserfenster pruefen: Headless-Chromium blendet Leisten grundsaetzlich ueber dem Inhalt ein und meldet deshalb immer 0 px Breite. Mit sichtbarem Fenster gemessen: 12 px, alle sechs Regeln vom Browser akzeptiert. Versionsstempel auf allen 11 Seiten und Cache-Name des Service Workers auf v3 -- sonst liefert der eigene Zwischenspeicher beim ersten Laden weiter die alte Fassung aus. 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=20260822wd3" />
|
|
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd3" />
|
|
<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: 12px; 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: rgba(127,208,232,.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=20260822wd3"></script>
|
|
<script src="/assets/js/wd-core.js?v=20260822wd3"></script>
|
|
</body>
|
|
</html>
|