diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css new file mode 100644 index 00000000..b71f2b3c --- /dev/null +++ b/assets/css/webdesign.css @@ -0,0 +1,851 @@ +/* ===================================================================== + DOGFATHER WEBDESIGN — webdesign.css + Eigenes Designsystem für den Bereich /webdesign, umgesetzt nach dem + "Website Masterplan" (Seite 6, VISUELLE DNA). + + Warum eine EIGENE Datei statt main.css zu erweitern: + - main.css trägt drei Welten (Dogfather/HasiDog/SpicyMedia) über + theme-*.css. Der Webdesign-Bereich ist eine vierte, eigenständige + Marke mit eigener Farblogik (Gold ist hier z.B. AUSSCHLIESSLICH für + Hinweise/Zahlung reserviert, im Universe ist es allgemeine Deko). + Eine Vermischung würde beide Systeme unscharf machen. + - Der Bereich ist bis zur Freigabe nicht öffentlich. Solange darf er + am laufenden Universe nichts kaputt machen können — getrennte Datei + heißt: null Risiko für die Live-Seite. + Die Grundtokens (--radius, Schriftfamilien) kommen weiterhin aus + main.css, das hier zusätzlich geladen wird. Alles Eigene trägt bewusst + das Präfix --wd- / .wd-, damit es sich nie mit main.css beißt. + + AUGENSCHONEND ist Dauervorgabe (nicht projektspezifisch): + gedeckte Flächen statt greller Neon-Optik, Leuchten nur als weicher + Schimmer, keine Flacker-/Strobe-Effekte, jede Animation respektiert + prefers-reduced-motion, Textkontraste durchgehend über WCAG-AA. + ===================================================================== */ + +/* --------------------------------------------------------------------- + 1. FARBWELT & TOKENS + Kontraste gegen die dunkelste Fläche (#05070b) nachgerechnet: + --wd-text #eef4fb -> 17.4:1 (AAA) + --wd-text-mid #b3c2d4 -> 10.2:1 (AAA) + --wd-text-soft #8f9fb4 -> 6.6:1 (AA, auch für kleine Schrift) + --wd-blau #7fd0e8 -> 10.6:1 (AAA) + --wd-lila #b79dff -> 8.1:1 (AAA) + --wd-gold #e8c877 -> 11.0:1 (AAA) + Bewusst KEIN reines #00e5ff / #ff00ff — solche vollgesättigten Neons + blenden auf dunklem Grund und sind genau das, was vermieden werden soll. + --------------------------------------------------------------------- */ +:root { + --wd-schwarz: #05070b; /* Tiefschwarz — Grundfläche */ + --wd-dunkelblau: #0a1220; /* Dunkelblau — zweite Grundfläche */ + --wd-dunkelblau-2: #0e1826; /* leicht angehoben, für Abschnittswechsel */ + --wd-flaeche: #101a29; /* Kartengrund (deckend, für Formularfelder) */ + + --wd-blau: #7fd0e8; /* Babyblau — Hauptaktionen, Linien, Leuchten */ + --wd-blau-hell: #a9e2f2; /* Eisblau — Lesbarkeit auf dunklem Grund */ + --wd-blau-tief: #3d9dbd; /* für Ränder/Verläufe, nicht für Text */ + --wd-lila: #b79dff; /* sekundäre Bereiche, Kontrast */ + --wd-lila-tief: #7c5cd6; + --wd-gold: #e8c877; /* NUR Hinweise & Zahlungsinformationen */ + --wd-gold-tief: #a8873a; + + --wd-text: #eef4fb; + --wd-text-mid: #b3c2d4; + --wd-text-soft: #8f9fb4; + + --wd-rand: rgba(127, 208, 232, .16); + --wd-rand-stark: rgba(127, 208, 232, .34); + --wd-glas: rgba(16, 26, 41, .62); + --wd-glas-tief: rgba(10, 18, 32, .82); + + --wd-ok: #6fd6a3; + --wd-fehler: #ff9d9d; + --wd-warnung: var(--wd-gold); + + --wd-r: 16px; /* Standardradius */ + --wd-r-gross: 22px; + --wd-schatten: 0 24px 60px -28px rgba(0, 0, 0, .9); + --wd-schatten-tief: 0 40px 90px -34px rgba(0, 0, 0, .95); + + /* Bewegung an EINER Stelle steuerbar — die Reduktions-Regel ganz unten + setzt diese Variablen auf 0s, damit auch neu hinzukommende Animationen + automatisch mit abgeschaltet sind und nicht einzeln nachgepflegt + werden müssen. */ + --wd-zeit-schnell: .16s; + --wd-zeit: .28s; + --wd-zeit-lang: .6s; +} + +/* --------------------------------------------------------------------- + 2. GRUNDLAGEN + --------------------------------------------------------------------- */ +body.wd { + background: var(--wd-schwarz); + color: var(--wd-text); + font-family: var(--font-body); + line-height: 1.7; + overflow-x: hidden; +} + +/* Cinematische Tiefe: zwei sehr weiche, weit auseinanderliegende + Lichtquellen statt eines flächigen Verlaufs. Fest positioniert, damit + beim Scrollen echte Tiefe entsteht, ohne eine einzige Animation zu + kosten (Masterplan S.6 "Cinematische Tiefe, Licht, Nebel" — S.15 aber + auch "Animationen leistungsbewusst"). */ +body.wd::before { + content: ""; + position: fixed; + inset: 0; + z-index: -2; + pointer-events: none; + background: + radial-gradient(1100px 720px at 18% -8%, rgba(61, 157, 189, .20), transparent 68%), + radial-gradient(900px 640px at 92% 8%, rgba(124, 92, 214, .16), transparent 66%), + linear-gradient(180deg, #070b12 0%, var(--wd-schwarz) 46%, #04060a 100%); +} + +/* Feine Rasterlinien — gibt der Fläche Struktur (Premium statt Baukasten), + bleibt mit 3 % Deckkraft klar unter der Wahrnehmungsschwelle für + "unruhig". mask blendet das Raster nach unten aus, damit es nicht + teppichartig über die ganze Seite liegt. */ +body.wd::after { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + opacity: .5; + background-image: + linear-gradient(rgba(127, 208, 232, .03) 1px, transparent 1px), + linear-gradient(90deg, rgba(127, 208, 232, .03) 1px, transparent 1px); + background-size: 64px 64px; + -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%); + mask-image: linear-gradient(180deg, #000 0%, transparent 62%); +} + +.wd-container { width: min(1180px, 92vw); margin: 0 auto; } +.wd-container--schmal { width: min(860px, 92vw); } + +.wd-abschnitt { padding: clamp(3.4rem, 7vw, 6.5rem) 0; position: relative; } +.wd-abschnitt--eng { padding: clamp(2rem, 4vw, 3.2rem) 0; } +/* Abwechselnde Grundfläche statt Trennlinien — ruhiger und trotzdem klar. */ +.wd-abschnitt--gehoben { background: linear-gradient(180deg, transparent, var(--wd-dunkelblau) 14%, var(--wd-dunkelblau) 86%, transparent); } + +/* ---------- Typografie (Masterplan S.6) ---------- + Dynamische Größen mit clamp(); Fließtext bewusst ruhiger und kleiner als + im Universe (dort 1.32rem), weil hier deutlich mehr Sachtext steht — + Preise, Bedingungen und Abläufe müssen lesbar sein, nicht laut. */ +.wd h1, .wd h2, .wd h3, .wd h4 { + font-family: var(--font-head); + line-height: 1.15; + letter-spacing: -.015em; + margin: 0 0 .5em; + color: var(--wd-text); + /* Verhindert, dass lange deutsche Komposita ("Buchhaltungsverwaltungs- + seiten") auf dem Handy aus dem Kasten laufen. */ + overflow-wrap: break-word; + hyphens: auto; +} +.wd h1 { font-size: clamp(2.15rem, 5.6vw, 3.9rem); font-weight: 800; } +.wd h2 { font-size: clamp(1.75rem, 4.2vw, 2.75rem); font-weight: 800; } +.wd h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 700; } +.wd h4 { font-size: 1.05rem; font-weight: 700; } +.wd p { margin: 0 0 1em; color: var(--wd-text-mid); font-size: clamp(1rem, 1.5vw, 1.12rem); } +.wd .wd-lead { font-size: clamp(1.08rem, 2vw, 1.32rem); color: var(--wd-text); line-height: 1.65; } +.wd .wd-klein { font-size: .92rem; } +.wd .wd-leise { color: var(--wd-text-soft); } +.wd a { color: var(--wd-blau); text-decoration: none; } +.wd a:hover { color: var(--wd-blau-hell); } +.wd strong { color: var(--wd-text); font-weight: 700; } + +.wd-eyebrow { + display: inline-block; + font-size: .74rem; + letter-spacing: .18em; + text-transform: uppercase; + font-weight: 800; + color: var(--wd-blau); + margin-bottom: .9em; +} +.wd-eyebrow--lila { color: var(--wd-lila); } + +/* Sichtbarer Fokus ÜBERALL (Masterplan S.15 Barrierearmut). :focus-visible + statt :focus, damit Mausklicks keinen Rahmen hinterlassen, Tastatur aber + immer einen — und zwar auch auf Elementen, die erst später dazukommen. */ +.wd :focus-visible { + outline: 3px solid var(--wd-blau); + outline-offset: 3px; + border-radius: 6px; +} + +/* Sprungmarke für Tastatur-/Screenreader-Nutzung. */ +.wd-skip { + position: absolute; left: -9999px; top: 0; z-index: 200; + background: var(--wd-blau); color: #04060a; font-weight: 800; + padding: .8rem 1.2rem; border-radius: 0 0 10px 0; +} +.wd-skip:focus { left: 0; } + +.wd-visuell-versteckt { + position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; +} + +/* --------------------------------------------------------------------- + 3. KARTEN — "glasartig mit feinen Neonrändern" (Masterplan S.6) + Der Rand ist bewusst ein Verlauf über border-box statt einer flachen + Farbe: dadurch wirkt er wie eine Lichtkante, nicht wie ein Strich. + --------------------------------------------------------------------- */ +.wd-karte { + position: relative; + border-radius: var(--wd-r-gross); + padding: clamp(1.3rem, 2.6vw, 1.9rem); + background: + linear-gradient(180deg, rgba(20, 32, 50, .72), rgba(9, 15, 26, .86)) padding-box, + linear-gradient(140deg, rgba(127, 208, 232, .40), rgba(127, 208, 232, .07) 45%, rgba(183, 157, 255, .30)) border-box; + border: 1px solid transparent; + box-shadow: var(--wd-schatten); + backdrop-filter: blur(10px); + transition: transform var(--wd-zeit) ease, box-shadow var(--wd-zeit) ease; +} +/* Sekundäre Bereiche tragen Lila (Masterplan S.6). */ +.wd-karte--lila { + background: + linear-gradient(180deg, rgba(26, 22, 48, .72), rgba(12, 10, 24, .88)) padding-box, + linear-gradient(140deg, rgba(183, 157, 255, .42), rgba(183, 157, 255, .07) 45%, rgba(127, 208, 232, .26)) border-box; +} +/* Nur für Karten, die wirklich klickbar sind — eine Karte, die sich hebt, + ohne dass man sie anklicken kann, verspricht eine Aktion, die es nicht + gibt. */ +a.wd-karte:hover, .wd-karte--klickbar:hover { + transform: translateY(-4px); + box-shadow: var(--wd-schatten-tief), 0 0 44px -20px rgba(127, 208, 232, .55); +} + +/* Farbige Kappe oben — übernimmt die Optik der Masterplan-PDF, in der jede + Karte einen blauen bzw. lila Balken trägt. */ +.wd-karte--kappe { padding-top: clamp(1.6rem, 3vw, 2.2rem); overflow: hidden; } +.wd-karte--kappe::before { + content: ""; + position: absolute; top: 0; left: 0; right: 0; height: 5px; + background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau)); +} +.wd-karte--lila.wd-karte--kappe::before { background: linear-gradient(90deg, var(--wd-lila-tief), var(--wd-lila)); } + +.wd-karte h3 { margin-bottom: .55em; } +.wd-karte > :last-child { margin-bottom: 0; } + +/* Aufzählung in Karten — Punkt als eigenes Element statt list-style, damit + die Farbe steuerbar ist und mehrzeilige Punkte sauber einrücken. */ +.wd-liste { margin: 0; padding: 0; list-style: none; } +.wd-liste li { + position: relative; + padding-left: 1.35rem; + margin-bottom: .55rem; + color: var(--wd-text-mid); + font-size: clamp(.98rem, 1.4vw, 1.05rem); +} +.wd-liste li::before { + content: ""; + position: absolute; left: 0; top: .62em; + width: 7px; height: 7px; border-radius: 50%; + background: var(--wd-blau); + box-shadow: 0 0 10px rgba(127, 208, 232, .7); +} +.wd-karte--lila .wd-liste li::before { background: var(--wd-lila); box-shadow: 0 0 10px rgba(183, 157, 255, .7); } +.wd-liste li:last-child { margin-bottom: 0; } + +/* ---------- Raster ---------- */ +.wd-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); } +.wd-grid--2 { grid-template-columns: repeat(2, 1fr); } +.wd-grid--3 { grid-template-columns: repeat(3, 1fr); } +.wd-grid--4 { grid-template-columns: repeat(4, 1fr); } +@media (max-width: 900px) { .wd-grid--3, .wd-grid--4 { grid-template-columns: repeat(2, 1fr); } } +@media (max-width: 640px) { .wd-grid--2, .wd-grid--3, .wd-grid--4 { grid-template-columns: 1fr; } } + +/* --------------------------------------------------------------------- + 4. KNÖPFE + Genau EIN Haupt-CTA pro Seite (Masterplan S.3) — deshalb gibt es + bewusst nur eine einzige auffällige Knopfvariante. Alles andere ist + sichtbar, konkurriert aber nicht. + --------------------------------------------------------------------- */ +.wd-btn { + display: inline-flex; align-items: center; justify-content: center; gap: .5rem; + /* min-height 48px = Touch-Ziel-Mindestmaß (Masterplan S.15). */ + min-height: 48px; + padding: .85rem 1.6rem; + border-radius: 999px; + border: 1px solid transparent; + font-family: var(--font-head); + font-weight: 700; + font-size: 1rem; + line-height: 1.2; + cursor: pointer; + text-align: center; + transition: transform var(--wd-zeit-schnell) ease, box-shadow var(--wd-zeit) ease, + background var(--wd-zeit) ease, border-color var(--wd-zeit) ease, color var(--wd-zeit) ease; +} +/* Sofortige, sichtbare Reaktion (Masterplan S.6 "Buttons reagieren sofort + und sichtbar") — active feuert ohne Verzögerung, auch auf dem Handy. */ +.wd-btn:active { transform: translateY(1px) scale(.985); } +.wd-btn[disabled], .wd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } + +.wd-btn--haupt { + /* Dunkler Text auf hellem Babyblau: 11.7:1 — der einzige Weg, einen + leuchtenden Knopf zu bauen, ohne die Lesbarkeit zu opfern. */ + background: linear-gradient(135deg, var(--wd-blau-hell), var(--wd-blau) 55%, #63bcd8); + color: #04070c; + box-shadow: 0 12px 34px -14px rgba(127, 208, 232, .8); +} +.wd-btn--haupt:hover { box-shadow: 0 16px 44px -14px rgba(127, 208, 232, .95); transform: translateY(-2px); } + +.wd-btn--zweit { + background: rgba(127, 208, 232, .07); + border-color: var(--wd-rand-stark); + color: var(--wd-blau-hell); +} +.wd-btn--zweit:hover { background: rgba(127, 208, 232, .14); border-color: var(--wd-blau); } + +.wd-btn--still { background: transparent; border-color: var(--wd-rand); color: var(--wd-text-mid); } +.wd-btn--still:hover { border-color: var(--wd-rand-stark); color: var(--wd-text); } + +.wd-btn--breit { width: 100%; } +/* "klein" heißt schmaler und leiser, NICHT niedriger als das Touch-Ziel. + Die Höhe stand hier ursprünglich auf 40px — die Handy-Abnahme + (server/pruefe-webdesign-handy.mjs) hat das quer über alle Seiten + angemerkt: „Dieses Paket anfragen“, „Live ansehen“ und „Was genau + enthalten ist“ waren durchgehend 4px zu flach. 44px ist die Untergrenze, + ab der ein Ziel mit dem Daumen zuverlässig getroffen wird. */ +.wd-btn--klein { min-height: 44px; padding: .6rem 1.05rem; font-size: .9rem; } + +.wd-btn-reihe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; } + +/* --------------------------------------------------------------------- + 5. HINWEISFLÄCHEN — Gold ist AUSSCHLIESSLICH hierfür reserviert + (Masterplan S.6: "Gold ausschließlich für wichtige Hinweise und + Zahlungsinformationen"). Wer Gold sieht, soll wissen: das ist wichtig. + --------------------------------------------------------------------- */ +.wd-hinweis { + position: relative; + border-radius: var(--wd-r); + padding: 1.15rem 1.35rem 1.15rem 1.6rem; + background: linear-gradient(180deg, rgba(232, 200, 119, .09), rgba(232, 200, 119, .04)); + border: 1px solid rgba(232, 200, 119, .32); + border-left: 4px solid var(--wd-gold); +} +.wd-hinweis-titel { + margin: 0 0 .35rem; + font-family: var(--font-head); + font-weight: 800; + font-size: .82rem; + letter-spacing: .12em; + text-transform: uppercase; + color: var(--wd-gold); +} +.wd-hinweis p { margin: 0; color: var(--wd-text-mid); font-size: .98rem; } +.wd-hinweis p + p { margin-top: .6rem; } + +/* Neutrale Variante für Erklärungen, die NICHT wichtig-wichtig sind — + damit Gold seine Signalwirkung behält. */ +.wd-notiz { + border-radius: var(--wd-r); + padding: 1rem 1.25rem; + background: rgba(127, 208, 232, .05); + border: 1px solid var(--wd-rand); +} +.wd-notiz p { margin: 0; font-size: .96rem; } + +/* --------------------------------------------------------------------- + 6. TAGS / KENNZEICHEN + --------------------------------------------------------------------- */ +.wd-tag { + display: inline-flex; align-items: center; gap: .35rem; + padding: .3rem .7rem; + border-radius: 999px; + font-size: .78rem; font-weight: 700; letter-spacing: .04em; + background: rgba(127, 208, 232, .12); + border: 1px solid var(--wd-rand-stark); + color: var(--wd-blau-hell); +} +.wd-tag--lila { background: rgba(183, 157, 255, .12); border-color: rgba(183, 157, 255, .34); color: var(--wd-lila); } +.wd-tag--gold { background: rgba(232, 200, 119, .12); border-color: rgba(232, 200, 119, .34); color: var(--wd-gold); } +.wd-tag--ok { background: rgba(111, 214, 163, .12); border-color: rgba(111, 214, 163, .34); color: var(--wd-ok); } +.wd-tags { display: flex; flex-wrap: wrap; gap: .45rem; } + +/* --------------------------------------------------------------------- + 7. PREISKARTEN (Masterplan S.8) + Preis, Dauer und Personalisierungshinweis gehören sichtbar zusammen — + der Hinweis steht deshalb direkt unter dem Preis, nicht im Kleingedruckten. + --------------------------------------------------------------------- */ +.wd-preis-karte { display: flex; flex-direction: column; } +.wd-preis { + font-family: var(--font-head); + font-weight: 800; + font-size: clamp(1.9rem, 4.4vw, 2.5rem); + line-height: 1.1; + margin: .2rem 0 .5rem; + color: var(--wd-blau); +} +.wd-karte--lila .wd-preis { color: var(--wd-lila); } +.wd-preis-zeile { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; } +.wd-preis-label { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wd-blau); } +.wd-karte--lila .wd-preis-label { color: var(--wd-lila); } +.wd-preis-wert { color: var(--wd-text-mid); font-size: .98rem; } +/* mt:auto schiebt den Knopf immer an den Kartenboden — sonst stehen die + Knöpfe in einer Reihe unterschiedlich hoher Karten treppenförmig. */ +.wd-preis-karte .wd-btn { margin-top: auto; } +.wd-personalisierung { + margin-top: .2rem; + font-size: .88rem; + color: var(--wd-text-soft); + font-style: italic; +} + +/* --------------------------------------------------------------------- + 8. NUMMERIERTE SCHRITTE (Ablauf / Customer Journey) + --------------------------------------------------------------------- */ +.wd-schritte { display: grid; gap: 1rem; } +.wd-schritt { + display: grid; + grid-template-columns: auto 1fr; + gap: 1.1rem; + align-items: start; + border-radius: var(--wd-r-gross); + padding: 1.25rem 1.4rem; + background: linear-gradient(180deg, rgba(20, 32, 50, .55), rgba(9, 15, 26, .75)); + border: 1px solid var(--wd-rand); +} +.wd-schritt-nr { + font-family: var(--font-head); + font-weight: 800; + font-size: clamp(1.4rem, 3vw, 1.9rem); + line-height: 1; + min-width: 2.2ch; + color: var(--wd-blau); + font-variant-numeric: tabular-nums; +} +.wd-schritt:nth-child(even) { border-color: rgba(183, 157, 255, .18); } +.wd-schritt:nth-child(even) .wd-schritt-nr { color: var(--wd-lila); } +.wd-schritt h3 { margin: 0 0 .3em; font-size: 1.12rem; } +.wd-schritt p { margin: 0; font-size: 1rem; } +@media (max-width: 520px) { + .wd-schritt { grid-template-columns: 1fr; gap: .4rem; } +} + +/* --------------------------------------------------------------------- + 9. FAQ — natives
, damit es ohne JavaScript funktioniert + und die Tastaturbedienung vom Browser kommt statt nachgebaut zu werden. + --------------------------------------------------------------------- */ +.wd-faq { border-radius: var(--wd-r); border: 1px solid var(--wd-rand); background: rgba(16, 26, 41, .5); margin-bottom: .7rem; overflow: hidden; } +.wd-faq > summary { + cursor: pointer; + list-style: none; + padding: 1.05rem 3rem 1.05rem 1.25rem; + position: relative; + font-family: var(--font-head); + font-weight: 700; + font-size: 1.04rem; + color: var(--wd-text); + transition: background var(--wd-zeit-schnell) ease; +} +.wd-faq > summary::-webkit-details-marker { display: none; } +.wd-faq > summary:hover { background: rgba(127, 208, 232, .05); } +.wd-faq > summary::after { + content: "+"; + position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); + font-size: 1.5rem; line-height: 1; color: var(--wd-blau); + transition: transform var(--wd-zeit) ease; +} +.wd-faq[open] > summary::after { transform: translateY(-50%) rotate(45deg); } +.wd-faq-inhalt { padding: 0 1.25rem 1.15rem; } +.wd-faq-inhalt p { margin: 0; font-size: 1rem; } +.wd-faq-inhalt p + p { margin-top: .7rem; } + +/* --------------------------------------------------------------------- + 10. FORMULARE (Masterplan S.10 + S.15) + Zustände für Fehler und Erfolg sind Pflicht — und der Fehler steht + IMMER unter dem Feld, nie nur als Farbe: Farbe allein ist für + farbfehlsichtige Menschen keine Information. + --------------------------------------------------------------------- */ +.wd-feld { margin-bottom: 1.15rem; } +.wd-feld > label, +.wd-feld-legende { + display: block; + margin-bottom: .45rem; + font-weight: 700; + font-size: .95rem; + color: var(--wd-text); +} +.wd-pflicht { color: var(--wd-blau); margin-left: .15rem; } +.wd-feld-hilfe { display: block; margin: -.2rem 0 .5rem; font-size: .88rem; color: var(--wd-text-soft); } + +.wd-eingabe, +.wd-feld input[type="text"], .wd-feld input[type="email"], .wd-feld input[type="tel"], +.wd-feld input[type="url"], .wd-feld input[type="number"], .wd-feld input[type="date"], +.wd-feld input[type="password"], .wd-feld input[type="search"], +.wd-feld select, .wd-feld textarea { + width: 100%; + box-sizing: border-box; + padding: .82rem 1rem; + min-height: 48px; + border-radius: 12px; + background: var(--wd-flaeche); + border: 1.5px solid var(--wd-rand); + color: var(--wd-text); + font-family: var(--font-body); + /* 16px verhindert, dass iOS beim Fokus in ein Feld hineinzoomt. */ + font-size: 16px; + line-height: 1.5; + transition: border-color var(--wd-zeit-schnell) ease, box-shadow var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease; +} +.wd-feld textarea { min-height: 130px; resize: vertical; } +.wd-feld select { + /* Eigener Pfeil: das Standard-Dreieck von Windows ist auf dunklem Grund + fast unsichtbar. */ + appearance: none; + background-image: linear-gradient(45deg, transparent 50%, var(--wd-blau) 50%), linear-gradient(135deg, var(--wd-blau) 50%, transparent 50%); + background-position: calc(100% - 20px) center, calc(100% - 14px) center; + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + padding-right: 2.6rem; +} +.wd-feld ::placeholder { color: rgba(143, 159, 180, .7); } +.wd-eingabe:focus, .wd-feld input:focus, .wd-feld select:focus, .wd-feld textarea:focus { + outline: none; + border-color: var(--wd-blau); + background: #12203180; + box-shadow: 0 0 0 4px rgba(127, 208, 232, .16); +} + +/* Fehlerzustand */ +.wd-feld--fehler .wd-eingabe, +.wd-feld--fehler input, .wd-feld--fehler select, .wd-feld--fehler textarea { + border-color: var(--wd-fehler); + box-shadow: 0 0 0 4px rgba(255, 157, 157, .12); +} +.wd-feld-fehler { + display: none; + margin: .45rem 0 0; + font-size: .9rem; + color: var(--wd-fehler); + font-weight: 600; +} +.wd-feld-fehler::before { content: "⚠ "; } +.wd-feld--fehler .wd-feld-fehler { display: block; } + +/* Auswahlkacheln (Radio/Checkbox als anklickbare Fläche) — deutlich + fingerfreundlicher als native Punkte und zeigt den gewählten Zustand + nicht nur farblich, sondern über Rand + Häkchen. */ +.wd-wahl { display: grid; gap: .7rem; } +.wd-wahl--2 { grid-template-columns: repeat(2, 1fr); } +@media (max-width: 640px) { .wd-wahl--2 { grid-template-columns: 1fr; } } +.wd-wahl-kachel { position: relative; display: block; cursor: pointer; } +.wd-wahl-kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; } +.wd-wahl-inhalt { + display: block; + padding: 1rem 1.15rem 1rem 2.9rem; + border-radius: 14px; + background: rgba(16, 26, 41, .6); + border: 1.5px solid var(--wd-rand); + transition: border-color var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease; +} +.wd-wahl-inhalt::before { + content: ""; + position: absolute; left: 1rem; top: 1.15rem; + width: 20px; height: 20px; border-radius: 6px; + border: 2px solid var(--wd-rand-stark); + background: rgba(5, 7, 11, .6); + transition: border-color var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease; +} +.wd-wahl-kachel input[type="radio"] + .wd-wahl-inhalt::before { border-radius: 50%; } +.wd-wahl-kachel:hover .wd-wahl-inhalt { border-color: var(--wd-rand-stark); } +.wd-wahl-kachel input:checked + .wd-wahl-inhalt { + border-color: var(--wd-blau); + background: rgba(127, 208, 232, .09); +} +.wd-wahl-kachel input:checked + .wd-wahl-inhalt::before { + border-color: var(--wd-blau); + background: var(--wd-blau); + /* Häkchen als CSS-Maske — kein Bild, keine Schriftart nötig. */ + box-shadow: inset 0 0 0 3px #05070b, inset 0 0 0 20px var(--wd-blau); +} +.wd-wahl-kachel input:focus-visible + .wd-wahl-inhalt { outline: 3px solid var(--wd-blau); outline-offset: 3px; } +.wd-wahl-titel { display: block; font-weight: 700; color: var(--wd-text); } +.wd-wahl-text { display: block; font-size: .9rem; color: var(--wd-text-soft); margin-top: .15rem; } + +/* Erfolgs-/Fehlermeldung eines ganzen Formulars */ +.wd-meldung { border-radius: var(--wd-r); padding: 1rem 1.2rem; margin-bottom: 1.2rem; font-weight: 600; } +.wd-meldung--ok { background: rgba(111, 214, 163, .1); border: 1px solid rgba(111, 214, 163, .38); color: var(--wd-ok); } +.wd-meldung--fehler { background: rgba(255, 157, 157, .1); border: 1px solid rgba(255, 157, 157, .38); color: var(--wd-fehler); } +.wd-meldung[hidden] { display: none; } + +/* --------------------------------------------------------------------- + 11. FORTSCHRITT (mehrstufiges Formular) + --------------------------------------------------------------------- */ +.wd-fortschritt { margin-bottom: 1.8rem; } +.wd-fortschritt-schiene { height: 6px; border-radius: 999px; background: rgba(127, 208, 232, .12); overflow: hidden; } +.wd-fortschritt-balken { + height: 100%; width: 0%; + border-radius: 999px; + background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau)); + transition: width var(--wd-zeit-lang) cubic-bezier(.4, 0, .2, 1); +} +.wd-fortschritt-text { margin: .6rem 0 0; font-size: .88rem; color: var(--wd-text-soft); } + +/* --------------------------------------------------------------------- + 12. TABELLEN (Verwaltung / Portal) + Auf schmalen Bildschirmen scrollt die Tabelle waagerecht in ihrem + eigenen Kasten, statt die ganze Seite zu verbreitern. + --------------------------------------------------------------------- */ +.wd-tabelle-rahmen { overflow-x: auto; border-radius: var(--wd-r); border: 1px solid var(--wd-rand); } +.wd-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; } +.wd-tabelle th, .wd-tabelle td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--wd-rand); } +.wd-tabelle th { + font-family: var(--font-head); font-size: .78rem; font-weight: 800; + letter-spacing: .1em; text-transform: uppercase; color: var(--wd-blau); + background: rgba(127, 208, 232, .05); + position: sticky; top: 0; +} +.wd-tabelle tbody tr:last-child td { border-bottom: none; } +.wd-tabelle tbody tr:hover { background: rgba(127, 208, 232, .04); } +.wd-tabelle td { color: var(--wd-text-mid); } + +/* --------------------------------------------------------------------- + 13. BEWEGUNG — "kontrolliert beim Scrollen" (Masterplan S.6) + Die Elemente starten sichtbar und werden erst per JS auf unsichtbar + gesetzt (Klasse .wd-bereit am ). Ohne JavaScript oder bei einem + Skriptfehler bleibt dadurch ALLES lesbar — der häufigste schwere Fehler + bei Scroll-Animationen ist eine dauerhaft unsichtbare Seite. + --------------------------------------------------------------------- */ +.wd-bereit .wd-auf { + opacity: 0; + transform: translateY(18px); + transition: opacity var(--wd-zeit-lang) ease, transform var(--wd-zeit-lang) cubic-bezier(.22, 1, .36, 1); +} +.wd-bereit .wd-auf.wd-sichtbar { opacity: 1; transform: none; } + +/* --------------------------------------------------------------------- + 14. KOPF- UND FUSSZEILE des Webdesign-Bereichs + Eigene Leiste statt der Universe-Navigation: der Bereich hat eigene + Ziele (Anfrage statt Bewerbung) und ist bis zur Freigabe nicht + öffentlich. Der Rückweg ins Universe steht trotzdem immer sichtbar + drin (Masterplan S.14 "Direkte Navigation zwischen Universe und + Webdesign"). + --------------------------------------------------------------------- */ +.wd-kopf { + position: sticky; top: 0; z-index: 60; + background: rgba(5, 7, 11, .92); + backdrop-filter: blur(14px); + border-bottom: 1px solid var(--wd-rand); +} +.wd-kopf-bar { + width: min(1320px, 94vw); margin: 0 auto; + display: flex; align-items: center; gap: 1rem; + padding: .7rem 0; +} +/* min-height 44px: die Marke ist ein Link auf die Startseite und damit + ein echtes Touch-Ziel — sie war vorher exakt so hoch wie das Logo (42px). */ +.wd-marke { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; min-height: 44px; } +.wd-marke img { width: 42px; height: 42px; object-fit: contain; } +.wd-marke-text { display: flex; flex-direction: column; line-height: 1.1; } +.wd-marke-oben { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--wd-text); letter-spacing: .02em; } +.wd-marke-unten { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wd-blau); font-weight: 700; } + +.wd-nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; } +.wd-nav a { + /* inline-flex + min-height statt nur Innenabstand: mit reinem padding + kam der Menüpunkt auf 43px — einen Pixel unter dem Touch-Ziel, was + die Handy-Abnahme zu Recht angemerkt hat. */ + display: inline-flex; align-items: center; min-height: 44px; + padding: .5rem .8rem; border-radius: 10px; + font-size: .95rem; font-weight: 600; color: var(--wd-text-mid); + transition: color var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease; +} +.wd-nav a:hover { color: var(--wd-text); background: rgba(127, 208, 232, .07); } +.wd-nav a.wd-aktiv { color: var(--wd-blau); background: rgba(127, 208, 232, .11); } +.wd-nav .wd-btn { margin-left: .5rem; } + +.wd-menue-knopf { + display: none; margin-left: auto; + align-items: center; gap: .45rem; + min-height: 44px; padding: .5rem .9rem; + border-radius: 10px; border: 1px solid var(--wd-rand); + background: transparent; color: var(--wd-text); cursor: pointer; font-weight: 700; +} + +/* Sprachschalter — teilt sich die gespeicherte Sprache mit dem Universe + (localStorage "dogi-sprache"), damit ein Wechsel hier auch dort gilt. */ +.wd-sprache { position: relative; } +.wd-sprache-knopf { + display: inline-flex; align-items: center; gap: .35rem; + /* 44px statt 40px — auch auf dem Computer ist das der bessere Wert: + Touchscreen-Laptops und Tablets im Querformat landen ebenfalls hier. */ + min-height: 44px; padding: .5rem .75rem; + border-radius: 10px; border: 1px solid var(--wd-rand); + background: transparent; color: var(--wd-text-mid); cursor: pointer; + font-weight: 700; font-size: .88rem; +} +.wd-sprache-knopf:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); } +.wd-sprache-liste { + position: absolute; right: 0; top: calc(100% + .4rem); + min-width: 190px; padding: .35rem; + border-radius: 12px; + background: #0b1320; + border: 1px solid var(--wd-rand-stark); + box-shadow: var(--wd-schatten); + display: none; + z-index: 70; +} +.wd-sprache.wd-offen .wd-sprache-liste { display: block; } +.wd-sprache-liste button { + display: flex; align-items: center; gap: .6rem; + width: 100%; min-height: 42px; padding: .5rem .7rem; + border: none; border-radius: 8px; background: transparent; + color: var(--wd-text-mid); cursor: pointer; text-align: left; font-size: .95rem; +} +.wd-sprache-liste button:hover { background: rgba(127, 208, 232, .09); color: var(--wd-text); } +.wd-sprache-liste button[aria-current="true"] { color: var(--wd-blau); font-weight: 700; } +.wd-sprache-punkt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } + +@media (max-width: 1080px) { + .wd-menue-knopf { display: inline-flex; } + .wd-nav { + display: none; + position: absolute; left: 0; right: 0; top: 100%; + flex-direction: column; align-items: stretch; gap: .2rem; + padding: .8rem 4vw 1.2rem; + background: #070b12; + border-bottom: 1px solid var(--wd-rand); + box-shadow: var(--wd-schatten); + /* Vollbildnavigation auf dem Handy (Masterplan S.5), aber scrollbar — + bei 8 Punkten + Sprachschalter passt sonst nicht alles auf ein + kleines Display. */ + max-height: calc(100vh - 70px); + overflow-y: auto; + } + .wd-nav.wd-offen { display: flex; } + /* Die minimale Kopfzeile (Zugangswand) enthält nur den Sprachschalter und + hat deshalb bewusst keinen Menü-Knopf. Ohne diese Ausnahme wäre sie auf + dem Handy durch die Regel oben komplett unsichtbar — man könnte die + Sprache dort dann gar nicht mehr umstellen. */ + .wd-nav--minimal { + display: flex; position: static; flex-direction: row; + padding: 0; background: none; border: none; box-shadow: none; + max-height: none; overflow: visible; width: auto; + } + .wd-nav--minimal .wd-sprache { margin-top: 0; } + .wd-nav--minimal .wd-sprache-knopf { width: auto; } + .wd-nav--minimal .wd-sprache-liste { position: absolute; width: auto; } + .wd-nav a { padding: .8rem .9rem; font-size: 1.02rem; } + .wd-nav .wd-btn { margin: .6rem 0 0; } + .wd-sprache { margin-top: .6rem; } + .wd-sprache-knopf { width: 100%; justify-content: center; } + .wd-sprache-liste { position: static; width: 100%; margin-top: .4rem; } +} + +/* Fußzeile */ +.wd-fuss { border-top: 1px solid var(--wd-rand); background: rgba(5, 7, 11, .8); padding: 2.6rem 0 2rem; margin-top: 3rem; } +.wd-fuss-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; } +@media (max-width: 780px) { .wd-fuss-grid { grid-template-columns: 1fr; gap: 1.5rem; } } +.wd-fuss h4 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wd-blau); margin-bottom: .8rem; } +.wd-fuss ul li { margin-bottom: .1rem; } +/* Fußzeilenlinks waren nur so hoch wie ihre Zeile (20px) und damit auf dem + Handy praktisch nicht sicher zu treffen — sie liegen zudem dicht + untereinander, was Fehlgriffe zusätzlich begünstigt. Als inline-flex mit + Mindesthöhe sind sie ein ordentliches Touch-Ziel; die Fußzeile wird + dadurch etwas höher, was hier die richtige Abwägung ist. */ +.wd-fuss a { + display: inline-flex; align-items: center; min-height: 44px; + color: var(--wd-text-mid); font-size: .95rem; +} +/* Die Marke in der Fußzeile bringt ihre eigene Höhe mit. */ +.wd-fuss a.wd-marke { min-height: 48px; } +.wd-fuss a:hover { color: var(--wd-blau); } +.wd-fuss-unten { + margin-top: 2rem; padding-top: 1.2rem; + border-top: 1px solid var(--wd-rand); + display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; + font-size: .86rem; color: var(--wd-text-soft); +} + +/* --------------------------------------------------------------------- + 15. HERO + "Der erste Bildschirm enthält niemals zu viel Text" (Masterplan S.7). + min-height bewusst mit svh: 100vh ist auf dem Handy die Höhe OHNE + Adressleiste — der Knopf rutscht damit beim ersten Laden unter die + sichtbare Kante, genau das, was die Hero-Regel verbietet. + --------------------------------------------------------------------- */ +.wd-hero { position: relative; padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem); min-height: 78svh; display: flex; align-items: center; } +.wd-hero-inhalt { max-width: 780px; } +.wd-hero h1 { margin-bottom: .45em; } +.wd-hero .wd-lead { margin-bottom: 1.8rem; max-width: 62ch; } +.wd-hero-glanz { + /* Kein Farbverlauf über den ganzen Titel — nur die Kernaussage trägt ihn, + sonst leidet die Lesbarkeit langer Überschriften. */ + background: linear-gradient(120deg, var(--wd-blau-hell), var(--wd-blau) 45%, var(--wd-lila)); + -webkit-background-clip: text; background-clip: text; color: transparent; +} +.wd-hero-belege { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 2rem; } +.wd-hero-beleg { display: flex; align-items: center; gap: .45rem; font-size: .92rem; color: var(--wd-text-soft); } +.wd-hero-beleg::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wd-blau); box-shadow: 0 0 8px var(--wd-blau); } + +/* --------------------------------------------------------------------- + 16. INSTALLATIONS-HINWEIS ("Als App installieren") + Sitzt unten statt oben: oben würde er die Kopfzeile verdecken, und auf + dem Handy ist der Daumen unten. env(safe-area-inset-bottom) hält ihn + über der Gestenleiste neuerer iPhones — ohne das liegt der Schließen- + Knopf genau unter dem Strich und ist praktisch nicht treffbar. + --------------------------------------------------------------------- */ +.wd-install { + position: fixed; z-index: 80; + left: 50%; transform: translateX(-50%); + bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); + width: min(560px, calc(100vw - 1.6rem)); + display: flex; align-items: center; gap: 1rem; + padding: .85rem 1rem; + border-radius: var(--wd-r); + background: rgba(11, 19, 32, .97); + border: 1px solid var(--wd-rand-stark); + box-shadow: var(--wd-schatten-tief); + backdrop-filter: blur(12px); + animation: wd-install-auf .45s cubic-bezier(.22, 1, .36, 1) both; +} +@keyframes wd-install-auf { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } } +.wd-install-text { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0; } +.wd-install-text img { border-radius: 9px; flex-shrink: 0; } +.wd-install-text strong { display: block; font-size: .95rem; color: var(--wd-text); } +.wd-install-text span { display: block; font-size: .84rem; color: var(--wd-text-soft); line-height: 1.45; } +.wd-install-knoepfe { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; } +.wd-install-knoepfe .wd-btn--still { min-width: 44px; padding: .5rem .7rem; } +@media (max-width: 560px) { + /* Auf schmalen Bildschirmen untereinander — nebeneinander wird der Text + auf zwei Wörter pro Zeile gequetscht. */ + .wd-install { flex-direction: column; align-items: stretch; gap: .7rem; } + .wd-install-knoepfe { justify-content: flex-end; } + .wd-install-knoepfe .wd-btn--haupt { flex: 1; } +} + +/* --------------------------------------------------------------------- + 17. BEWEGUNGSREDUKTION — eine Regel für alles + --------------------------------------------------------------------- */ +@media (prefers-reduced-motion: reduce) { + :root { --wd-zeit-schnell: 0s; --wd-zeit: 0s; --wd-zeit-lang: 0s; } + .wd *, .wd *::before, .wd *::after { + animation-duration: .001ms !important; + animation-iteration-count: 1 !important; + transition-duration: .001ms !important; + scroll-behavior: auto !important; + } + /* Wichtig: die Einblend-Elemente müssen dann SOFORT sichtbar sein, + nicht "unsichtbar mit 0s Übergang". */ + .wd-bereit .wd-auf { opacity: 1; transform: none; } + .wd-btn:hover, a.wd-karte:hover, .wd-karte--klickbar:hover { transform: none; } +} + +/* Druckansicht: Angebote/Zusammenfassungen werden erfahrungsgemäß + ausgedruckt oder als PDF gesichert. */ +@media print { + body.wd { background: #fff; color: #000; } + body.wd::before, body.wd::after, .wd-kopf, .wd-fuss, .wd-btn { display: none !important; } + .wd-karte { border: 1px solid #bbb; background: #fff; box-shadow: none; } + .wd h1, .wd h2, .wd h3, .wd p, .wd li { color: #000 !important; } +} diff --git a/assets/img/wd-app-180.png b/assets/img/wd-app-180.png new file mode 100644 index 00000000..c9b1b694 Binary files /dev/null and b/assets/img/wd-app-180.png differ diff --git a/assets/img/wd-app-192.png b/assets/img/wd-app-192.png new file mode 100644 index 00000000..d310dc40 Binary files /dev/null and b/assets/img/wd-app-192.png differ diff --git a/assets/img/wd-app-512-maskable.png b/assets/img/wd-app-512-maskable.png new file mode 100644 index 00000000..ed15314b Binary files /dev/null and b/assets/img/wd-app-512-maskable.png differ diff --git a/assets/img/wd-app-512.png b/assets/img/wd-app-512.png new file mode 100644 index 00000000..c70f937e Binary files /dev/null and b/assets/img/wd-app-512.png differ diff --git a/assets/img/wd-dogfather-karte.jpg b/assets/img/wd-dogfather-karte.jpg new file mode 100644 index 00000000..52da8a0c Binary files /dev/null and b/assets/img/wd-dogfather-karte.jpg differ diff --git a/assets/img/wd-dogfather-portrait.jpg b/assets/img/wd-dogfather-portrait.jpg new file mode 100644 index 00000000..b11a0a5e Binary files /dev/null and b/assets/img/wd-dogfather-portrait.jpg differ diff --git a/assets/img/wd-projekt-universe.jpg b/assets/img/wd-projekt-universe.jpg new file mode 100644 index 00000000..6e4d78e5 Binary files /dev/null and b/assets/img/wd-projekt-universe.jpg differ diff --git a/assets/img/wd-projekt-vandiy.jpg b/assets/img/wd-projekt-vandiy.jpg new file mode 100644 index 00000000..498477a3 Binary files /dev/null and b/assets/img/wd-projekt-vandiy.jpg differ diff --git a/assets/img/wd-vanvan-karte.jpg b/assets/img/wd-vanvan-karte.jpg new file mode 100644 index 00000000..1354c104 Binary files /dev/null and b/assets/img/wd-vanvan-karte.jpg differ diff --git a/assets/img/wd-vanvan-portrait.jpg b/assets/img/wd-vanvan-portrait.jpg new file mode 100644 index 00000000..fae7f56b Binary files /dev/null and b/assets/img/wd-vanvan-portrait.jpg differ diff --git a/assets/js/i18n-wd-ablauf.js b/assets/js/i18n-wd-ablauf.js new file mode 100644 index 00000000..f161fd33 --- /dev/null +++ b/assets/js/i18n-wd-ablauf.js @@ -0,0 +1,107 @@ +/* ===================================================================== + i18n-wd-ablauf.js — Ablauf (Masterplan S.5, Punkt 05) + Die sechs Schritte selbst stehen in wd-core.js NICHT nochmal — sie sind + hier ausführlicher als auf der Startseite und deshalb eigene Texte. + ===================================================================== */ +window.I18N_WD = { + seiten_titel: { + de: "Ablauf — Dogfather Webdesign", + "de-CH": "So laufts — Dogfather Webdesign", + en: "Process — Dogfather Web Design", + fr: "Déroulement — Dogfather Web Design", + pt: "Processo — Dogfather Web Design", + }, + + ab_eyebrow: { de: "Ablauf", "de-CH": "So laufts", en: "Process", fr: "Déroulement", pt: "Processo" }, + ab_h1: { + de: "Sieben Schritte, keine Überraschungen", + "de-CH": "Sibe Schritt, kei Überraschige", + en: "Seven steps, no surprises", + fr: "Sept étapes, aucune surprise", + pt: "Sete passos, sem surpresas", + }, + ab_lead: { + de: "Jeder Schritt endet mit etwas, das du sehen und prüfen kannst. Du weißt jederzeit, wo dein Projekt steht und was als Nächstes von wem gebraucht wird.", + "de-CH": "Jede Schritt ändet mit öppisem, wo du gseh und prüefe chasch. Du weisch jederziit, wo dis Projekt stoht und was als nöchsts vo wäm bruucht wird.", + en: "Every step ends with something you can see and check. You always know where your project stands and what is needed next, from whom.", + fr: "Chaque étape se termine par quelque chose que tu peux voir et vérifier. Tu sais à tout moment où en est ton projet et ce qui est attendu, de qui.", + pt: "Cada passo termina com algo que podes ver e verificar. Sabes sempre em que ponto está o teu projeto e o que é preciso a seguir, e de quem.", + }, + + du_machst: { de: "Du machst", "de-CH": "Du machsch", en: "You do", fr: "Tu fais", pt: "Tu fazes" }, + ich_mache: { de: "Ich mache", "de-CH": "Ich mache", en: "I do", fr: "Je fais", pt: "Eu faço" }, + ergebnis: { de: "Am Ende steht", "de-CH": "Am Schluss stoht", en: "The outcome", fr: "Résultat de l'étape", pt: "No fim fica" }, + + /* --- 1 Anfrage --- */ + s1_h2: { de: "Anfrage", "de-CH": "Aafrog", en: "Enquiry", fr: "Demande", pt: "Pedido" }, + s1_du: { de: "Formular ausfüllen — Ziel, Umfang, Budgetrahmen, Wunschtermin.", "de-CH": "S Formular usfülle — Ziel, Umfang, Budgetrahme, Wunschtermin.", en: "Fill in the form — goal, scope, budget range, desired date.", fr: "Remplir le formulaire — objectif, étendue, budget, date souhaitée.", pt: "Preencher o formulário — objetivo, âmbito, orçamento, data pretendida." }, + s1_ich: { de: "Anfrage prüfen und innerhalb weniger Tage melden.", "de-CH": "D Aafrog prüefe und innert weniger Täg mälde.", en: "Review the enquiry and get back to you within a few days.", fr: "Examiner la demande et revenir vers toi sous quelques jours.", pt: "Analisar o pedido e responder dentro de poucos dias." }, + s1_erg: { de: "Eine Bestätigung mit Zusammenfassung dessen, was du angegeben hast.", "de-CH": "E Bestätigung mit ere Zämefassig vo dem, was du aagäh hesch.", en: "A confirmation with a summary of what you submitted.", fr: "Une confirmation avec le récapitulatif de ce que tu as indiqué.", pt: "Uma confirmação com o resumo do que indicaste." }, + + /* --- 2 Briefing --- */ + s2_h2: { de: "Briefing", "de-CH": "Briefing", en: "Briefing", fr: "Briefing", pt: "Briefing" }, + s2_du: { de: "Fragen beantworten und sagen, was du schon an Texten, Bildern und Logo hast.", "de-CH": "Frage beantworte und säge, was du scho a Täxt, Bilder und Logo hesch.", en: "Answer questions and say what texts, images and logo you already have.", fr: "Répondre aux questions et indiquer les textes, images et logo déjà disponibles.", pt: "Responder a perguntas e dizer que textos, imagens e logótipo já tens." }, + s2_ich: { de: "Nachfragen, wo etwas unklar ist — lieber jetzt als mitten im Bau.", "de-CH": "Nachefroge, wo öppis unklar isch — lieber jetzt als mitte im Bau.", en: "Ask where something is unclear — better now than mid-build.", fr: "Poser des questions là où c'est flou — mieux vaut maintenant qu'en pleine construction.", pt: "Perguntar onde algo não está claro — melhor agora do que a meio da construção." }, + s2_erg: { de: "Ein gemeinsames Bild davon, was die Seite können muss.", "de-CH": "Es gmeinsams Bild devo, was d Site chöne muess.", en: "A shared picture of what the site has to do.", fr: "Une vision commune de ce que le site doit faire.", pt: "Uma imagem partilhada do que o site tem de fazer." }, + + /* --- 3 Angebot --- */ + s3_h2: { de: "Angebot & Anzahlung", "de-CH": "Aagebot & Aazahlig", en: "Quote & deposit", fr: "Devis & acompte", pt: "Orçamento & sinal" }, + s3_du: { de: "Angebot lesen, Fragen stellen, annehmen oder ablehnen — und bei Annahme die 30 % überweisen.", "de-CH": "S Aagebot läse, Frage stelle, aanäh oder ablähne — und bi dr Aanahm d 30 % überwiise.", en: "Read the quote, ask questions, accept or decline — and on acceptance transfer the 30 %.", fr: "Lire le devis, poser des questions, accepter ou refuser — et en cas d'acceptation verser les 30 %.", pt: "Ler o orçamento, colocar perguntas, aceitar ou recusar — e, ao aceitar, transferir os 30 %." }, + s3_ich: { de: "Preis, Umfang, Zeitrahmen und alles, was extra kostet, schriftlich festhalten.", "de-CH": "Priis, Umfang, Ziitrahme und alles, was extra choschtet, schriftlich festhalte.", en: "Put price, scope, timeframe and everything that costs extra in writing.", fr: "Consigner par écrit le prix, l'étendue, le délai et tout ce qui coûte en supplément.", pt: "Registar por escrito preço, âmbito, prazo e tudo o que custa à parte." }, + s3_erg: { de: "Ein reservierter Starttermin. Vorher wird kein Zeitfenster blockiert.", "de-CH": "En reservierte Starttermin. Vorher wird kes Ziitfenschter blockiert.", en: "A reserved start date. No slot is blocked before that.", fr: "Une date de démarrage réservée. Aucun créneau n'est bloqué avant.", pt: "Uma data de início reservada. Antes disso não há data bloqueada." }, + + /* --- 4 Design --- */ + s4_h2: { de: "Design", "de-CH": "Design", en: "Design", fr: "Design", pt: "Design" }, + s4_du: { de: "Entwurf ansehen und Rückmeldung geben — am besten gesammelt statt in vielen einzelnen Nachrichten.", "de-CH": "Dr Entwurf aaluege und Rückmäldig gäh — am beschte gsammlet statt i viilne einzelne Nachrichte.", en: "Look at the draft and give feedback — ideally bundled rather than in many separate messages.", fr: "Regarder la maquette et donner ton retour — de préférence groupé plutôt qu'en messages épars.", pt: "Ver o esboço e dar feedback — de preferência agrupado em vez de muitas mensagens soltas." }, + s4_ich: { de: "Aufbau, Farben und Schriften entwerfen — und dir Handy- und Computeransicht zeigen, nicht nur eine davon.", "de-CH": "Ufbau, Farbe und Schrifte entwerfe — und dir Handy- und Computeraasicht zeige, nöd nur eini devo.", en: "Design layout, colours and typography — and show you both the mobile and desktop view, not just one.", fr: "Concevoir structure, couleurs et typographie — et te montrer la vue mobile ET ordinateur, pas seulement l'une.", pt: "Desenhar estrutura, cores e tipografia — e mostrar-te a vista de telemóvel e de computador, não só uma." }, + s4_erg: { de: "Ein freigegebener Entwurf. Erst danach wird gebaut.", "de-CH": "En freigäh Entwurf. Erscht denn wird baut.", en: "An approved design. Only then does building start.", fr: "Une maquette validée. La construction ne commence qu'après.", pt: "Um design aprovado. Só depois se constrói." }, + + /* --- 5 Entwicklung --- */ + s5_h2: { de: "Entwicklung", "de-CH": "Entwicklig", en: "Development", fr: "Développement", pt: "Desenvolvimento" }, + s5_du: { de: "Fehlende Inhalte nachliefern, falls noch welche offen sind.", "de-CH": "Fählendi Inhalt nachliefere, falls no welli offe sind.", en: "Supply any content that is still outstanding.", fr: "Fournir les contenus encore manquants.", pt: "Fornecer os conteúdos que ainda faltem." }, + s5_ich: { de: "Die Seite bauen — mit den echten Inhalten, nicht mit Blindtext.", "de-CH": "D Site baue — mit de ächte Inhalt, nöd mit Blindtäxt.", en: "Build the site — with the real content, not with dummy text.", fr: "Construire le site — avec les vrais contenus, pas du faux texte.", pt: "Construir o site — com os conteúdos reais, não com texto fictício." }, + s5_erg: { de: "Eine benutzbare Seite auf einer Vorschauadresse, die nur du und ich kennen.", "de-CH": "E bruuchbari Site uf ere Vorschauadress, wo nur du und ich kenned.", en: "A usable site on a preview address only you and I know.", fr: "Un site utilisable sur une adresse de prévisualisation connue de toi et moi seuls.", pt: "Um site utilizável num endereço de pré-visualização que só tu e eu conhecemos." }, + + /* --- 6 Tests --- */ + s6_h2: { de: "Tests", "de-CH": "Teschts", en: "Testing", fr: "Tests", pt: "Testes" }, + s6_du: { de: "Selbst durchklicken — besonders auf deinem eigenen Handy.", "de-CH": "Sälber dureklicke — bsunders uf dim eigene Handy.", en: "Click through it yourself — especially on your own phone.", fr: "Tout parcourir toi-même — surtout sur ton propre téléphone.", pt: "Percorrer tudo tu mesmo — sobretudo no teu próprio telemóvel." }, + s6_ich: { de: "Jedes Formular, jeden Link und jeden Fehlerfall durchspielen, auf Handy, Tablet und Computer.", "de-CH": "Jedes Formular, jede Link und jede Fählerfall durespiele, uf Handy, Tablet und Computer.", en: "Play through every form, every link and every error case, on mobile, tablet and desktop.", fr: "Tester chaque formulaire, chaque lien et chaque cas d'erreur, sur mobile, tablette et ordinateur.", pt: "Testar cada formulário, cada ligação e cada caso de erro, em telemóvel, tablet e computador." }, + s6_erg: { de: "Eine Liste dessen, was geprüft wurde — und was bewusst nicht enthalten ist.", "de-CH": "E Lischte vo dem, was prüeft worde isch — und was bewusst nöd dinne isch.", en: "A list of what was checked — and what is deliberately not included.", fr: "Une liste de ce qui a été vérifié — et de ce qui n'est délibérément pas inclus.", pt: "Uma lista do que foi verificado — e do que fica deliberadamente de fora." }, + + /* --- 7 Übergabe --- */ + s7_h2: { de: "Freigabe & Übergabe", "de-CH": "Freigab & Übergab", en: "Approval & handover", fr: "Validation & remise", pt: "Aprovação & entrega" }, + s7_du: { de: "Ausdrücklich freigeben und den Restbetrag begleichen.", "de-CH": "Uusdrücklich freigäh und dr Rescht zahle.", en: "Give explicit approval and settle the remaining amount.", fr: "Donner ta validation explicite et régler le solde.", pt: "Dar aprovação explícita e liquidar o valor restante." }, + s7_ich: { de: "Live schalten, dich einweisen und die Zugänge übergeben.", "de-CH": "Live schalte, dich iiwiise und d Zuegäng übergäh.", en: "Take it live, walk you through it and hand over the access details.", fr: "Mettre en ligne, te former et te remettre les accès.", pt: "Colocar no ar, dar-te formação e entregar os acessos." }, + s7_erg: { de: "Deine Seite, deine Zugänge, deine Nutzungsrechte. Betreuung ist optional, kein Zwang.", "de-CH": "Dini Site, dini Zuegäng, dini Nutzigsrächt. D Betreuig isch optional, kein Zwang.", en: "Your site, your access, your usage rights. Support is optional, not compulsory.", fr: "Ton site, tes accès, tes droits d'utilisation. Le suivi est optionnel, pas obligatoire.", pt: "O teu site, os teus acessos, os teus direitos de utilização. O acompanhamento é opcional, não obrigatório." }, + + ab_wichtig_titel: { + de: "Keine Veröffentlichung ohne deine Freigabe", + "de-CH": "Kei Veröffentlichig ohni dini Freigab", + en: "No publication without your approval", + fr: "Aucune mise en ligne sans ta validation", + pt: "Sem publicação sem a tua aprovação", + }, + ab_wichtig_text: { + de: "Die Seite geht ausschließlich dann online, wenn du das ausdrücklich sagst. Das gilt auch für die Aufnahme ins Portfolio — beides ist getrennt und beides brauchst du nicht zu erlauben.", + "de-CH": "D Site goht uusschliesslich denn online, wenn du das uusdrücklich seisch. Das gilt au für d Ufnahm is Portfolio — beidi sind trennt und beidi muesch nöd erlaube.", + en: "The site goes online only when you explicitly say so. The same applies to being included in the portfolio — the two are separate and you need not permit either.", + fr: "Le site n'est mis en ligne que si tu le demandes explicitement. Il en va de même pour l'ajout au portfolio — les deux sont indépendants et tu n'es obligé d'accepter ni l'un ni l'autre.", + pt: "O site só vai para o ar quando o disseres explicitamente. O mesmo se aplica à inclusão no portfólio — são coisas separadas e não tens de autorizar nenhuma.", + }, + + ab_dauer_h2: { + de: "Wie lange dauert das insgesamt?", + "de-CH": "Wie lang duuret das im Ganze?", + en: "How long does all of this take?", + fr: "Combien de temps cela prend-il en tout ?", + pt: "Quanto tempo demora tudo isto?", + }, + ab_dauer_p: { + de: "Die Zeitrahmen auf der Preisseite gelten ab dem Eingang der Anzahlung — nicht ab der ersten Nachricht. Der häufigste Grund für Verzögerungen ist nicht die Technik, sondern dass Texte oder Bilder noch fehlen. Deshalb wird im Formular gleich danach gefragt.", + "de-CH": "D Ziitrahme uf dr Priissite gälted ab em Iigang vo dr Aazahlig — nöd ab dr erschte Nachricht. Dr hüüfigscht Grund für Verzögerige isch nöd d Technik, sondern dass Täxt oder Bilder no fähled. Drum wird im Formular grad dernoch gfrogt.", + en: "The timeframes on the pricing page start when the deposit arrives — not from the first message. The most common reason for delays is not the technology but missing texts or images. That is why the form asks about it right away.", + fr: "Les délais indiqués sur la page tarifs courent à partir de la réception de l'acompte — pas du premier message. La principale cause de retard n'est pas la technique mais l'absence de textes ou d'images. C'est pourquoi le formulaire pose la question d'emblée.", + pt: "Os prazos na página de preços contam a partir da entrada do sinal — não da primeira mensagem. A causa mais comum de atrasos não é a tecnologia, mas a falta de textos ou imagens. Por isso o formulário pergunta isso logo.", + }, + ab_zu_preise: { de: "Zu den Zeitrahmen", "de-CH": "Zu de Ziitrahme", en: "See the timeframes", fr: "Voir les délais", pt: "Ver os prazos" }, +}; diff --git a/assets/js/i18n-wd-faq.js b/assets/js/i18n-wd-faq.js new file mode 100644 index 00000000..3dcfad8e --- /dev/null +++ b/assets/js/i18n-wd-faq.js @@ -0,0 +1,178 @@ +/* ===================================================================== + i18n-wd-faq.js — Häufige Fragen (Masterplan S.5, Punkt 07) + Abgedeckte Themen laut Masterplan: Preise, Dauer, Inhalte, Änderungen, + Hosting, Rechte, Zahlung und Veröffentlichung. + + Die fünf Fragen, die schon auf der Startseite stehen, sind hier bewusst + NICHT wiederholt — dort ist der Auszug, hier die Vollversion mit den + Themen, die dort keinen Platz hatten. + ===================================================================== */ +window.I18N_WD = { + seiten_titel: { + de: "Häufige Fragen — Dogfather Webdesign", + "de-CH": "Hüüfigi Frage — Dogfather Webdesign", + en: "FAQ — Dogfather Web Design", + fr: "Questions fréquentes — Dogfather Web Design", + pt: "Perguntas frequentes — Dogfather Web Design", + }, + + fq_eyebrow: { de: "Häufige Fragen", "de-CH": "Hüüfigi Frage", en: "Frequently asked questions", fr: "Questions fréquentes", pt: "Perguntas frequentes" }, + fq_h1: { + de: "Alles, was vorher geklärt sein sollte", + "de-CH": "Alles, wo vorher klärt si sött", + en: "Everything that should be clear beforehand", + fr: "Tout ce qui devrait être clair au préalable", + pt: "Tudo o que deve ficar claro antes", + }, + fq_lead: { + de: "Sortiert nach Thema. Wenn deine Frage nicht dabei ist, schreib sie einfach ins Anfrageformular — sie landet dann hier, wenn sie öfter kommt.", + "de-CH": "Sortiert nach Thema. Wenn dini Frog nöd debii isch, schriib si eifach is Aafrogformular — si landet denn do, wenn si öfter chunnt.", + en: "Sorted by topic. If your question is not here, just put it in the enquiry form — it ends up on this page if it comes up more often.", + fr: "Classées par thème. Si ta question n'y figure pas, écris-la simplement dans le formulaire — elle atterrira ici si elle revient souvent.", + pt: "Ordenadas por tema. Se a tua pergunta não estiver aqui, escreve-a no formulário — acaba nesta página se surgir com frequência.", + }, + + /* Themen-Überschriften */ + fq_t_preis: { de: "Preise & Zahlung", "de-CH": "Priis & Zahlig", en: "Pricing & payment", fr: "Tarifs & paiement", pt: "Preços & pagamento" }, + fq_t_dauer: { de: "Dauer & Änderungen", "de-CH": "Duur & Änderige", en: "Duration & changes", fr: "Durée & modifications", pt: "Duração & alterações" }, + fq_t_inhalt: { de: "Inhalte & Zusammenarbeit", "de-CH": "Inhalt & Zämeschaffe", en: "Content & collaboration", fr: "Contenus & collaboration", pt: "Conteúdos & colaboração" }, + fq_t_technik: { de: "Hosting, Domain & Rechte", "de-CH": "Hosting, Domain & Rächt", en: "Hosting, domain & rights", fr: "Hébergement, domaine & droits", pt: "Alojamento, domínio & direitos" }, + fq_t_veroeff: { de: "Veröffentlichung & danach", "de-CH": "Veröffentlichig & dernoch", en: "Publication & afterwards", fr: "Mise en ligne & après", pt: "Publicação & depois" }, + + /* --- Preise & Zahlung --- */ + f1_f: { de: "Warum steht kein Festpreis auf der Seite?", "de-CH": "Wieso stoht kein Fixpriis uf dr Site?", en: "Why is there no fixed price on the site?", fr: "Pourquoi aucun prix fixe n'est indiqué ?", pt: "Porque não há um preço fixo no site?" }, + f1_a: { + de: "Weil ein ehrlicher Festpreis erst möglich ist, wenn der Umfang bekannt ist. Eine Seite mit drei Abschnitten und eine mit dreißig Produkten kosten nun einmal nicht dasselbe. Die Beträge hier sind Einstiegspunkte, die dir zeigen, in welcher Größenordnung du planen musst — der verbindliche Preis kommt schriftlich nach dem Briefing.", + "de-CH": "Wil en ehrliche Fixpriis erscht möglich isch, wenn dr Umfang bekannt isch. E Site mit drü Abschnitt und eini mit driissg Produkt choschted halt nöd s Glich. D Beträg do sind Iistiegspünkt, wo dir zeiged, i welere Grössenordnig du plane muesch — dr verbindlich Priis chunnt schriftlich nach em Briefing.", + en: "Because an honest fixed price is only possible once the scope is known. A site with three sections and one with thirty products simply do not cost the same. The figures here are starting points that show you the ballpark you need to plan for — the binding price comes in writing after the briefing.", + fr: "Parce qu'un prix fixe honnête n'est possible qu'une fois l'étendue connue. Un site à trois sections et un site à trente produits ne coûtent tout simplement pas la même chose. Les montants ici sont des points de départ qui te montrent l'ordre de grandeur — le prix ferme arrive par écrit après le briefing.", + pt: "Porque um preço fixo honesto só é possível quando o âmbito é conhecido. Um site com três secções e outro com trinta produtos não custam o mesmo. Os valores aqui são pontos de partida que mostram a ordem de grandeza — o preço vinculativo vem por escrito após o briefing.", + }, + f2_f: { de: "Was passiert, wenn ich nach der Anzahlung abspringe?", "de-CH": "Was passiert, wenn i nach dr Aazahlig abspringe?", en: "What happens if I pull out after paying the deposit?", fr: "Que se passe-t-il si je me désiste après l'acompte ?", pt: "O que acontece se desistir depois do sinal?" }, + f2_a: { + de: "Die Anzahlung hat den Zweck, dein Zeitfenster zu reservieren — dieses Fenster war dann für andere blockiert. Bereits geleistete Arbeit wird verrechnet; wenn noch praktisch nichts passiert ist, finden wir eine faire Lösung. Das steht so auch im Angebot, damit es im Ernstfall nicht Auslegungssache ist.", + "de-CH": "D Aazahlig het dr Zwäck, dis Ziitfenschter z reserviere — das Fenschter isch denn für anderi blockiert gsi. Scho gleischtete Arbet wird verrächnet; wenn no praktisch nüt passiert isch, finded mer e fairi Lösig. Das stoht so au im Aagebot, damit s im Ärnschtfall nöd Uuslegigssach isch.", + en: "The deposit exists to reserve your time slot — that slot was then blocked for others. Work already done is offset; if practically nothing has happened yet, we find a fair solution. This is written into the quote so it is not a matter of interpretation if it ever comes up.", + fr: "L'acompte sert à réserver ton créneau — ce créneau était alors bloqué pour d'autres. Le travail déjà réalisé est décompté ; si presque rien n'a encore été fait, nous trouvons une solution équitable. C'est écrit dans le devis pour que cela ne soit pas sujet à interprétation le cas échéant.", + pt: "O sinal serve para reservar a tua janela de tempo — essa janela ficou bloqueada para outros. O trabalho já feito é descontado; se praticamente nada aconteceu ainda, encontramos uma solução justa. Isto fica escrito no orçamento para não ser questão de interpretação se acontecer.", + }, + f3_f: { de: "Kommen später versteckte Kosten dazu?", "de-CH": "Chömed spöter versteckti Choschte dezue?", en: "Are there hidden costs later on?", fr: "Y a-t-il des coûts cachés par la suite ?", pt: "Há custos escondidos mais tarde?" }, + f3_a: { + de: "Von mir nicht — was extra kostet, steht vorher im Angebot. Was aber sehr wohl dauerhaft Geld kostet und nicht von mir kommt: die Domain (meist ein kleiner Jahresbetrag), der Server beziehungsweise das Hosting, und bei einem Shop die Gebühren des Zahlungsanbieters pro Bestellung. Diese Posten benenne ich im Angebot ausdrücklich, damit sie dich nicht überraschen.", + "de-CH": "Vo mir nöd — was extra choschtet, stoht vorher im Aagebot. Was aber sehr wohl duurhaft Gäld choschtet und nöd vo mir chunnt: d Domain (meischtens en chline Jahresbetrag), dr Server bzw. s Hosting, und bi eme Shop d Gebühre vom Zahligsaabieter pro Bstellig. Die Poschte benenn i im Aagebot uusdrücklich, damit si dich nöd überrasched.", + en: "Not from me — anything that costs extra is in the quote beforehand. What does cost money on an ongoing basis and does not come from me: the domain (usually a small annual amount), the server or hosting, and for a shop the payment provider's fee per order. I name these items explicitly in the quote so they do not surprise you.", + fr: "Pas de mon côté — tout supplément figure au devis à l'avance. Ce qui coûte en revanche de façon récurrente et ne vient pas de moi : le domaine (généralement un petit montant annuel), le serveur ou l'hébergement, et pour une boutique les frais du prestataire de paiement par commande. Je nomme ces postes explicitement dans le devis pour éviter les surprises.", + pt: "Da minha parte não — tudo o que custa à parte está no orçamento antecipadamente. O que custa mesmo de forma recorrente e não vem de mim: o domínio (normalmente um valor anual pequeno), o servidor ou alojamento e, numa loja, as taxas do fornecedor de pagamento por encomenda. Nomeio estes itens explicitamente no orçamento para não te surpreenderem.", + }, + + /* --- Dauer & Änderungen --- */ + f4_f: { de: "Woran liegt es, wenn ein Projekt länger dauert?", "de-CH": "A was ligt s, wenn es Projekt länger duuret?", en: "What makes a project take longer?", fr: "Pourquoi un projet prend-il parfois plus de temps ?", pt: "Porque é que um projeto às vezes demora mais?" }, + f4_a: { + de: "In den allermeisten Fällen an fehlenden Inhalten, nicht an der Technik. Solange Texte, Logo oder Produktfotos nicht da sind, kann die Seite nicht fertig werden — und Blindtext hilft niemandem. Der zweitwichtigste Grund sind Rückmeldungen, die tröpfchenweise kommen: fünf einzelne Nachrichten über zwei Wochen kosten mehr Zeit als eine gesammelte Liste.", + "de-CH": "I de allermeischte Fäll a fählende Inhalt, nöd a dr Technik. So lang Täxt, Logo oder Produktfotene nöd do sind, cha d Site nöd fertig wärde — und Blindtäxt hilft niemertem. Dr zweitwichtigscht Grund sind Rückmäldige, wo tröpfliwiis chömed: füf einzelni Nachrichte über zwei Wuche choschted meh Ziit als ei gsammleti Lischte.", + en: "In the vast majority of cases it is missing content, not the technology. As long as texts, logo or product photos are not there, the site cannot be finished — and dummy text helps nobody. The second biggest reason is feedback trickling in: five separate messages over two weeks cost more time than one collected list.", + fr: "Dans la grande majorité des cas, ce sont les contenus manquants, pas la technique. Tant que textes, logo ou photos produits ne sont pas là, le site ne peut pas être terminé — et le faux texte n'aide personne. La deuxième cause : des retours au compte-gouttes ; cinq messages séparés sur deux semaines coûtent plus de temps qu'une liste unique.", + pt: "Na grande maioria dos casos são conteúdos em falta, não a tecnologia. Enquanto textos, logótipo ou fotos de produtos não existirem, o site não pode ficar pronto — e texto fictício não ajuda ninguém. A segunda maior razão é feedback aos poucos: cinco mensagens separadas ao longo de duas semanas custam mais tempo do que uma lista reunida.", + }, + f5_f: { de: "Wie viele Änderungen sind drin?", "de-CH": "Wie viili Änderige sind dinne?", en: "How many changes are included?", fr: "Combien de modifications sont incluses ?", pt: "Quantas alterações estão incluídas?" }, + f5_a: { + de: "Typischerweise zwei Feedbackrunden — gemeint sind gesammelte Rückmeldungen, nicht einzelne Korrekturen. Kleinigkeiten wie ein Tippfehler oder eine vertauschte Telefonnummer zähle ich nicht mit. Was darüber hinausgeht (neue Abschnitte, ein anderes Grundlayout, zusätzliche Funktionen) wird vorher beziffert, und du entscheidest, ob es dir das wert ist.", + "de-CH": "Typischerwiis zwei Feedbackrunde — gmeint sind gsammleti Rückmäldige, nöd einzelni Korrekture. Chliigkeite wie en Tippfähler oder e vertuschti Telefonnummere zell i nöd mit. Was drüber use goht (neui Abschnitt, es anders Grundlayout, zuesätzlichi Funktione) wird vorher bezifferet, und du entscheidsch, ob s dir das wärt isch.", + en: "Typically two feedback rounds — meaning collected feedback, not individual corrections. Small things like a typo or a swapped phone number I do not count. Anything beyond that (new sections, a different base layout, extra features) is quoted beforehand and you decide whether it is worth it to you.", + fr: "Généralement deux tours de retours — il s'agit de retours groupés, pas de corrections isolées. Les broutilles comme une faute de frappe ou un numéro inversé ne comptent pas. Au-delà (nouvelles sections, autre mise en page de base, fonctions supplémentaires), c'est chiffré à l'avance et tu décides si cela en vaut la peine.", + pt: "Tipicamente duas rondas de feedback — entenda-se feedback reunido, não correções isoladas. Pequenas coisas como uma gralha ou um número de telefone trocado não conto. O que vai além disso (novas secções, outro layout base, funcionalidades extra) é orçamentado antes e tu decides se vale a pena.", + }, + f6_f: { de: "Kann ich Texte später selbst ändern?", "de-CH": "Cha ich Täxt spöter sälber ändere?", en: "Can I change texts myself later?", fr: "Puis-je modifier les textes moi-même plus tard ?", pt: "Posso alterar textos eu próprio mais tarde?" }, + f6_a: { + de: "Ja, das ist ausdrücklich das Ziel. Bei größeren Projekten gehört ein Verwaltungsbereich dazu, in dem du Texte, Bilder und Produkte ohne Programmierkenntnisse pflegst — plus eine Einweisung dafür. Bei einem einfachen Onepager ist so ein Bereich meist überdimensioniert; dort sind kleine Textänderungen Teil der Betreuung oder werden nach Aufwand abgerechnet.", + "de-CH": "Jo, das isch uusdrücklich s Ziel. Bi grössere Projekt ghört en Verwaltigsbereich dezue, wo du Täxt, Bilder und Produkt ohni Programmierkenntnis pflegsch — plus e Iiwiisig defür. Bi eme eifache Onepager isch so en Bereich meischtens überdimensioniert; dete sind chlini Täxtänderige Teil vo dr Betreuig oder wärded nach Ufwand abgrächnet.", + en: "Yes, that is explicitly the goal. Larger projects include an admin area where you maintain texts, images and products without programming knowledge — plus a walkthrough for it. For a simple one-pager such an area is usually overkill; there, small text changes are part of the support package or billed by effort.", + fr: "Oui, c'est explicitement l'objectif. Les projets plus importants incluent un espace d'administration où tu gères textes, images et produits sans compétences en programmation — avec une prise en main. Pour une page unique, un tel espace est généralement surdimensionné ; les petites modifications de texte relèvent alors du suivi ou sont facturées au temps passé.", + pt: "Sim, esse é explicitamente o objetivo. Projetos maiores incluem uma área de administração onde geres textos, imagens e produtos sem conhecimentos de programação — mais uma introdução. Numa página única simples, essa área costuma ser exagerada; aí, pequenas alterações de texto fazem parte do acompanhamento ou são faturadas por esforço.", + }, + + /* --- Inhalte & Zusammenarbeit --- */ + f7_f: { de: "Ich habe kein Logo. Ist das ein Problem?", "de-CH": "Ich han kes Logo. Isch das es Problem?", en: "I don't have a logo. Is that a problem?", fr: "Je n'ai pas de logo. Est-ce un problème ?", pt: "Não tenho logótipo. Isso é problema?" }, + f7_a: { + de: "Kein Hindernis, aber auch nicht kostenlos. Eine Seite lässt sich sauber ohne Logo bauen — mit einem gut gesetzten Schriftzug sieht das oft besser aus als ein schnell zusammengeklicktes Symbol. Ein richtiges Logo zu entwerfen ist eine eigene Leistung und wird separat berechnet.", + "de-CH": "Kes Hindernis, aber au nöd gratis. E Site loht sich suuber ohni Logo baue — mit eme guet gsetzte Schriftzug gseht das oft besser us als es schnäll zämeklicktes Symbol. Es richtigs Logo z entwerfe isch e eigeni Leischtig und wird separat verrächnet.", + en: "Not an obstacle, but not free either. A site can be built cleanly without a logo — a well-set wordmark often looks better than a quickly clicked-together symbol. Designing a proper logo is a separate service and is billed separately.", + fr: "Pas un obstacle, mais pas gratuit non plus. Un site peut très bien se construire sans logo — un logotype typographique bien composé fait souvent meilleur effet qu'un symbole bricolé à la hâte. Concevoir un vrai logo est une prestation distincte, facturée séparément.", + pt: "Não é obstáculo, mas também não é gratuito. Um site pode ser feito bem sem logótipo — um lettering bem composto costuma ficar melhor do que um símbolo montado à pressa. Desenhar um logótipo a sério é um serviço à parte e é faturado separadamente.", + }, + f8_f: { de: "Kann ich Bilder aus dem Internet verwenden?", "de-CH": "Cha ich Bilder us em Internet bruuche?", en: "Can I use images from the internet?", fr: "Puis-je utiliser des images trouvées sur internet ?", pt: "Posso usar imagens da internet?" }, + f8_a: { + de: "Nur wenn die Lizenz das erlaubt. Ein Bild, das man irgendwo gefunden hat, ist rechtlich der häufigste teure Fehler auf kleinen Webseiten — Abmahnungen kosten schnell ein Vielfaches der ganzen Seite. Ich setze deshalb nur Bilder ein, deren Herkunft geklärt ist, und sage dir bei deinen eigenen Bildern, worauf zu achten ist.", + "de-CH": "Nur wenn d Lizänz das erlaubt. Es Bild, wo mer irgendwo gfunde het, isch rächtlich dr hüüfigscht tüüre Fähler uf chline Websites — Abmahnige choschted schnäll es Viilfachs vo dr ganze Site. Ich setze drum nur Bilder ii, wo d Herkunft klärt isch, und säge dir bi dine eigene Bilder, uf was z achte isch.", + en: "Only if the licence allows it. An image found somewhere is legally the most common expensive mistake on small websites — a warning letter quickly costs a multiple of the whole site. I therefore only use images whose origin is clear, and I tell you what to watch out for with your own images.", + fr: "Uniquement si la licence le permet. Une image trouvée quelque part est juridiquement l'erreur coûteuse la plus fréquente sur les petits sites — une mise en demeure coûte vite plusieurs fois le prix du site entier. Je n'utilise donc que des images dont l'origine est établie, et je t'indique à quoi faire attention pour tes propres images.", + pt: "Só se a licença o permitir. Uma imagem encontrada algures é, juridicamente, o erro caro mais comum em sites pequenos — uma notificação custa depressa várias vezes o preço do site inteiro. Por isso uso apenas imagens com origem esclarecida e digo-te a que estar atento nas tuas próprias imagens.", + }, + f9_f: { de: "Wie läuft die Kommunikation während des Projekts?", "de-CH": "Wie lauft d Kommunikation während em Projekt?", en: "How does communication work during the project?", fr: "Comment se passe la communication pendant le projet ?", pt: "Como funciona a comunicação durante o projeto?" }, + f9_a: { + de: "Über deinen eigenen Kundenbereich auf dieser Seite. Dort siehst du den Projektstatus, die vereinbarten Leistungen, offene Rückfragen und alle Dateien — und dort landen auch Änderungswünsche samt Aufwand und Preis. Der Vorteil gegenüber Nachrichten in einem Chat: nichts geht verloren und beide Seiten können später nachlesen, was vereinbart war.", + "de-CH": "Über din eigene Kundebereich uf dere Site. Dete gsehsch dr Projektstatus, d vereinbarte Leischtige, offni Rückfroge und alli Datei — und dete lande au Änderigswünsch samt Ufwand und Priis. Dr Vorteil gägenüber Nachrichte in eme Chat: nüt goht verlore und beidi Site chönd spöter nacheläse, was vereinbart gsi isch.", + en: "Through your own client area on this site. There you see the project status, the agreed services, open questions and all files — and that is also where change requests land, together with effort and price. The advantage over messages in a chat: nothing gets lost and both sides can look up later what was agreed.", + fr: "Via ton espace client sur ce site. Tu y vois l'état du projet, les prestations convenues, les questions en suspens et tous les fichiers — et c'est aussi là qu'arrivent les demandes de modification, avec l'effort et le prix. L'avantage par rapport à des messages dans un chat : rien ne se perd et les deux parties peuvent relire ce qui a été convenu.", + pt: "Através da tua área de cliente neste site. Aí vês o estado do projeto, os serviços acordados, questões em aberto e todos os ficheiros — e é também aí que chegam os pedidos de alteração, com esforço e preço. A vantagem sobre mensagens num chat: nada se perde e ambos os lados podem consultar depois o que foi acordado.", + }, + + /* --- Hosting, Domain & Rechte --- */ + f10_f: { de: "Brauche ich eine eigene Domain und ein eigenes Hosting?", "de-CH": "Bruuch i e eigeni Domain und es eigets Hosting?", en: "Do I need my own domain and hosting?", fr: "Ai-je besoin de mon propre domaine et hébergement ?", pt: "Preciso de domínio e alojamento próprios?" }, + f10_a: { + de: "Ja, beides gehört dir und läuft auf deinen Namen — das ist wichtig, damit du unabhängig bleibst. Wenn du noch nichts hast, helfe ich bei der Auswahl und der Einrichtung. Wenn du schon eine Domain hast, ziehen wir um; die Adresse bleibt dann dieselbe.", + "de-CH": "Jo, beidi ghöred dir und laufed uf din Name — das isch wichtig, damit du unabhängig blibsch. Wenn du no nüt hesch, hilf i bi dr Uuswahl und dr Iirichtig. Wenn du scho e Domain hesch, züged mer um; d Adress blibt denn diesälb.", + en: "Yes, both belong to you and run in your name — that matters so you stay independent. If you have nothing yet, I help with choosing and setting it up. If you already have a domain, we migrate; the address then stays the same.", + fr: "Oui, les deux t'appartiennent et sont à ton nom — c'est important pour rester indépendant. Si tu n'as encore rien, je t'aide à choisir et à configurer. Si tu as déjà un domaine, nous migrons ; l'adresse reste alors identique.", + pt: "Sim, ambos te pertencem e ficam em teu nome — isso é importante para manteres a independência. Se ainda não tens nada, ajudo na escolha e na configuração. Se já tens domínio, migramos; o endereço mantém-se.", + }, + f11_f: { de: "Bin ich danach von dir abhängig?", "de-CH": "Bin i dernoch vo dir abhängig?", en: "Will I depend on you afterwards?", fr: "Serai-je dépendant de toi ensuite ?", pt: "Fico dependente de ti depois?" }, + f11_a: { + de: "Nein, und das ist Absicht. Domain und Hosting laufen auf dich, du bekommst alle Zugänge, und nach vollständiger Bezahlung liegen die Nutzungsrechte an der Seite bei dir. Betreuung ist ein Angebot, keine Voraussetzung — wenn du sie kündigst, läuft deine Seite trotzdem weiter.", + "de-CH": "Nei, und das isch Absicht. Domain und Hosting laufed uf dich, du überchunnsch alli Zuegäng, und nach vollständiger Zahlig liged d Nutzigsrächt a dr Site bi dir. Betreuig isch es Aagebot, kei Voruussetzig — wenn du si kündsch, lauft dini Site trotzdem wiiter.", + en: "No, and that is deliberate. Domain and hosting are in your name, you receive all access details, and after full payment the usage rights to the site are yours. Support is an offer, not a requirement — if you cancel it, your site keeps running.", + fr: "Non, et c'est voulu. Domaine et hébergement sont à ton nom, tu reçois tous les accès, et après paiement intégral les droits d'utilisation du site sont à toi. Le suivi est une offre, pas une obligation — si tu le résilies, ton site continue de fonctionner.", + pt: "Não, e isso é intencional. Domínio e alojamento ficam em teu nome, recebes todos os acessos e, após o pagamento integral, os direitos de utilização do site são teus. O acompanhamento é uma oferta, não um requisito — se o cancelares, o teu site continua a funcionar.", + }, + f12_f: { de: "Wie steht es um Datenschutz und Impressum?", "de-CH": "Wie stoht s um Datesch un Impressum?", en: "What about data protection and legal notice?", fr: "Qu'en est-il de la protection des données et des mentions légales ?", pt: "E quanto à proteção de dados e informações legais?" }, + f12_a: { + de: "Die technischen Voraussetzungen baue ich ein: verschlüsselte Verbindung, sichere Cookies, keine unnötigen Dienste von Dritten, ein Datenschutztext, der zu den tatsächlich eingesetzten Bausteinen passt. Was ich ausdrücklich nicht mache, ist Rechtsberatung — die endgültige rechtliche Prüfung deiner Texte gehört zu einer Fachperson.", + "de-CH": "D technische Voruussetzige bau i ii: verschlüsselti Verbindig, sicheri Cookies, kei unnötigi Dienscht vo Dritte, en Dateschutztäxt, wo zu de tatsächlich iigsetzte Bauteil passt. Was i uusdrücklich nöd mache, isch Rächtsberatig — d ändgültigi rächtlichi Prüefig vo dine Täxt ghört zu ere Fachperson.", + en: "I build in the technical prerequisites: encrypted connection, secure cookies, no unnecessary third-party services, a privacy text that matches the components actually used. What I explicitly do not do is legal advice — the final legal review of your texts belongs with a qualified professional.", + fr: "Je mets en place les prérequis techniques : connexion chiffrée, cookies sécurisés, pas de services tiers superflus, un texte de confidentialité correspondant aux composants réellement utilisés. Ce que je ne fais explicitement pas, c'est du conseil juridique — la validation juridique finale de tes textes revient à un professionnel.", + pt: "Implemento os requisitos técnicos: ligação encriptada, cookies seguros, sem serviços de terceiros desnecessários, um texto de privacidade que corresponde aos componentes realmente usados. O que explicitamente não faço é aconselhamento jurídico — a validação legal final dos teus textos cabe a um profissional.", + }, + + /* --- Veröffentlichung & danach --- */ + f13_f: { de: "Wird meine Seite ins Portfolio aufgenommen?", "de-CH": "Wird mini Site is Portfolio ufgnoh?", en: "Will my site be added to the portfolio?", fr: "Mon site sera-t-il ajouté au portfolio ?", pt: "O meu site vai para o portfólio?" }, + f13_a: { + de: "Nur wenn du es erlaubst, und das ist eine eigene Entscheidung — unabhängig davon, ob deine Seite live geht. Du kannst jederzeit widerrufen, dann verschwindet der Eintrag. Erfundene Kundenstimmen gibt es hier grundsätzlich nicht; ein Zitat erscheint nur, wenn du es selbst geschrieben und freigegeben hast.", + "de-CH": "Nur wenn du s erlaubsch, und das isch e eigeni Entscheidig — unabhängig devo, ob dini Site live goht. Du chasch jederziit widerrüefe, denn verschwindet dr Iitrag. Erfundeni Kundestimme git s do grundsätzlich nöd; es Zitat erschiint nur, wenn du s sälber gschriebe und freigäh hesch.", + en: "Only if you allow it, and that is a separate decision — independent of whether your site goes live. You can withdraw at any time and the entry disappears. Invented customer quotes do not exist here on principle; a quote only appears if you wrote and approved it yourself.", + fr: "Uniquement si tu l'autorises, et c'est une décision distincte — indépendante de la mise en ligne de ton site. Tu peux te rétracter à tout moment et l'entrée disparaît. Les témoignages inventés n'existent pas ici par principe ; une citation n'apparaît que si tu l'as écrite et validée toi-même.", + pt: "Só se autorizares, e essa é uma decisão separada — independente de o teu site ir para o ar. Podes retirar a autorização a qualquer momento e a entrada desaparece. Depoimentos inventados não existem aqui por princípio; uma citação só aparece se a tiveres escrito e aprovado.", + }, + f14_f: { de: "Was passiert, wenn die Seite ausfällt?", "de-CH": "Was passiert, wenn d Site uusfallt?", en: "What happens if the site goes down?", fr: "Que se passe-t-il si le site tombe en panne ?", pt: "O que acontece se o site ficar em baixo?" }, + f14_a: { + de: "Mit Betreuung: Ich merke es in der Regel selbst, weil die Erreichbarkeit überwacht wird, und es gibt Sicherungen, die nachweislich zurückgespielt werden können — eine Sicherung, die noch nie getestet wurde, ist keine. Ohne Betreuung: Du meldest dich, und ich helfe nach Aufwand, so schnell es geht.", + "de-CH": "Mit Betreuig: Ich merk s in dr Regel sälber, wil d Erreichbarkeit überwacht wird, und s git Sicherige, wo nachwiisbar zrugg gspielt wärde chönd — e Sicherig, wo no nie tescht worde isch, isch kei. Ohni Betreuig: Du mäldsch dich, und ich hilf nach Ufwand, so schnäll s goht.", + en: "With support: I usually notice myself because uptime is monitored, and there are backups that can demonstrably be restored — a backup that has never been tested is not one. Without support: you get in touch and I help, billed by effort, as fast as possible.", + fr: "Avec suivi : je le remarque généralement moi-même car la disponibilité est surveillée, et il existe des sauvegardes dont la restauration a été testée — une sauvegarde jamais testée n'en est pas une. Sans suivi : tu me contactes et j'interviens au temps passé, aussi vite que possible.", + pt: "Com acompanhamento: normalmente dou por isso, porque a disponibilidade é monitorizada, e existem cópias de segurança que comprovadamente podem ser restauradas — uma cópia nunca testada não é uma cópia. Sem acompanhamento: contactas-me e ajudo por esforço, o mais rápido possível.", + }, + + fq_rest_titel: { + de: "Deine Frage war nicht dabei?", + "de-CH": "Dini Frog isch nöd debii gsi?", + en: "Your question wasn't there?", + fr: "Ta question n'y était pas ?", + pt: "A tua pergunta não estava aqui?", + }, + fq_rest_text: { + de: "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.", + "de-CH": "Schriib si eifach is Aafrogformular — es git dete es freis Fäld defür. Du chasch mer au grad e E-Mail schriibe, wenn dir das lieber isch.", + en: "Just write it in the enquiry form — there is a free-text field for exactly that. You can also simply e-mail me if you prefer.", + fr: "Écris-la simplement dans le formulaire — un champ libre est prévu pour cela. Tu peux aussi m'envoyer un e-mail si tu préfères.", + pt: "Escreve-a simplesmente no formulário — existe um campo livre para isso. Também me podes enviar um e-mail, se preferires.", + }, +}; diff --git a/assets/js/i18n-wd-index.js b/assets/js/i18n-wd-index.js new file mode 100644 index 00000000..88954d5a --- /dev/null +++ b/assets/js/i18n-wd-index.js @@ -0,0 +1,487 @@ +/* ===================================================================== + i18n-wd-index.js — Startseite des Webdesign-Bereichs, 5 Sprachen. + + Grundsätze (gelten für alle i18n-wd-*.js): + - Markennamen bleiben unübersetzt: Dogfather, VanVan, Dogfather Universe. + - Schweizerdeutsch ist echter Dialekt, keine ß→ss-Umschrift. + - Preise und Zeitrahmen sind an EINER Stelle formuliert und werden + überall gleich zitiert — Masterplan S.16 verlangt ausdrücklich + "Preise, Dauer, 30 % Anzahlung und Personalisierung sind überall + widerspruchsfrei". + ===================================================================== */ +window.I18N_WD = { + seiten_titel: { + de: "Dogfather Webdesign — individuelle Webseiten, persönlich umgesetzt", + "de-CH": "Dogfather Webdesign — eigeti Websites, persönlich gmacht", + en: "Dogfather Web Design — individual websites, built personally", + fr: "Dogfather Web Design — des sites sur mesure, réalisés personnellement", + pt: "Dogfather Web Design — sites individuais, feitos pessoalmente", + }, + + /* ---------- 01 HERO ---------- */ + hero_eyebrow: { + de: "Dogfather Webdesign", + "de-CH": "Dogfather Webdesign", + en: "Dogfather Web Design", + fr: "Dogfather Web Design", + pt: "Dogfather Web Design", + }, + hero_h1: { + de: "Deine Webseite soll nicht mithalten.
Sie soll auffallen.", + "de-CH": "Dini Website söll nöd mithalte.
Si söll uffalle.", + en: "Your website shouldn't keep up.
It should stand out.", + fr: "Ton site ne doit pas suivre le rythme.
Il doit se démarquer.", + pt: "O teu site não deve acompanhar.
Deve destacar-se.", + }, + hero_text: { + de: "Individuell gebaut statt aus dem Baukasten. Du sprichst von der ersten Idee bis zur fertigen Seite mit einer Person — und weißt vorher, was es kostet und wie lange es dauert.", + "de-CH": "Eigets baut statt us em Baukaste. Du redsch vo dr erste Idee bis zur fertige Site mit einere Person — und weisch vorher, was es choscht und wie lang s duuret.", + en: "Built individually, not from a template kit. From the first idea to the finished site you talk to one single person — and you know the cost and the timeframe up front.", + fr: "Conçu sur mesure, pas à partir d'un kit. De la première idée au site fini, tu parles à une seule personne — et tu connais le prix et les délais à l'avance.", + pt: "Construído individualmente, não a partir de um kit. Da primeira ideia ao site pronto falas com uma única pessoa — e sabes o preço e o prazo à partida.", + }, + hero_cta: { + de: "Projekt anfragen", + "de-CH": "Projekt aafroge", + en: "Start a project", + fr: "Demander un projet", + pt: "Pedir projeto", + }, + hero_cta2: { + de: "Beispiele ansehen", + "de-CH": "Bispiel aaluege", + en: "See examples", + fr: "Voir des exemples", + pt: "Ver exemplos", + }, + hero_beleg1: { de: "Ab 300 €", "de-CH": "Ab 300 €", en: "From €300", fr: "À partir de 300 €", pt: "A partir de 300 €" }, + hero_beleg2: { de: "Erste Seiten in 5–10 Arbeitstagen", "de-CH": "Erschti Site i 5–10 Arbeitstäg", en: "First sites in 5–10 working days", fr: "Premiers sites en 5 à 10 jours ouvrés", pt: "Primeiros sites em 5–10 dias úteis" }, + hero_beleg3: { de: "Eine feste Ansprechperson", "de-CH": "Ei feschti Aaspröchperson", en: "One fixed contact person", fr: "Un interlocuteur unique", pt: "Uma pessoa de contacto fixa" }, + + /* ---------- 02 VERTRAUEN ---------- */ + vt_h2: { + de: "Warum das hier anders läuft", + "de-CH": "Wieso s da andersch lauft", + en: "Why this works differently", + fr: "Pourquoi ça se passe autrement ici", + pt: "Porque é que aqui é diferente", + }, + vt_1_h3: { de: "Individuell", "de-CH": "Eiget", en: "Individual", fr: "Sur mesure", pt: "Individual" }, + vt_1_p: { + de: "Kein fertiges Muster mit ausgetauschtem Logo. Aufbau, Farben und Texte entstehen für dein Vorhaben.", + "de-CH": "Kes fertigs Muschter mit uustuschtem Logo. Ufbau, Farbe und Täxt entstöhnd für dis Vorhabe.", + en: "No ready-made template with a swapped logo. Structure, colours and copy are created for your project.", + fr: "Pas de modèle tout fait avec un logo remplacé. Structure, couleurs et textes sont créés pour ton projet.", + pt: "Nenhum modelo pronto com o logótipo trocado. Estrutura, cores e textos são criados para o teu projeto.", + }, + vt_2_h3: { de: "Persönlich", "de-CH": "Persönlich", en: "Personal", fr: "Personnel", pt: "Pessoal" }, + vt_2_p: { + de: "Du hast eine Ansprechperson — keine Ticketnummer und keine wechselnden Zuständigkeiten.", + "de-CH": "Du hesch ei Aaspröchperson — kei Ticketnummere und kei wächslendi Zueständigkeite.", + en: "You have one contact person — no ticket number and no changing responsibilities.", + fr: "Tu as un interlocuteur — pas de numéro de ticket ni de responsables qui changent.", + pt: "Tens uma pessoa de contacto — sem número de bilhete e sem responsáveis a mudar.", + }, + vt_3_h3: { de: "Auf jedem Gerät", "de-CH": "Uf jedem Grät", en: "On every device", fr: "Sur chaque appareil", pt: "Em todos os dispositivos" }, + vt_3_p: { + de: "Handy zuerst geprüft, dann Tablet und Computer. Nichts wird abgeschnitten, nichts ist zu klein zum Antippen.", + "de-CH": "S Handy zerscht prüeft, denn s Tablet und dr Computer. Nüt wird abgschnitte, nüt isch z chli zum Aatippe.", + en: "Mobile checked first, then tablet and desktop. Nothing gets cut off, nothing is too small to tap.", + fr: "Mobile vérifié en premier, puis tablette et ordinateur. Rien n'est coupé, rien n'est trop petit à toucher.", + pt: "Telemóvel verificado primeiro, depois tablet e computador. Nada fica cortado, nada é pequeno demais para tocar.", + }, + vt_4_h3: { de: "Klare Preise", "de-CH": "Klari Priis", en: "Clear pricing", fr: "Tarifs clairs", pt: "Preços claros" }, + vt_4_p: { + de: "Einstiegspreise und Zeitrahmen stehen offen auf der Seite. Der Endpreis kommt schriftlich, bevor gearbeitet wird.", + "de-CH": "Iistiegspriis und Ziitrahme stöhnd offe uf dr Site. Dr Ändpriis chunnt schriftlich, bevor gschaffet wird.", + en: "Starting prices and timeframes are stated openly on the site. The final price comes in writing before any work starts.", + fr: "Les prix de départ et les délais sont indiqués ouvertement. Le prix final est confirmé par écrit avant le début du travail.", + pt: "Preços iniciais e prazos estão indicados abertamente. O preço final vem por escrito antes de começar o trabalho.", + }, + + /* ---------- 03 LEISTUNGSKARTEN ---------- */ + ls_eyebrow: { de: "Leistungen", "de-CH": "Was mir mache", en: "Services", fr: "Prestations", pt: "Serviços" }, + ls_h2: { + de: "Vier Wege zu deiner Seite", + "de-CH": "Vier Wäg zu dinere Site", + en: "Four routes to your website", + fr: "Quatre voies vers ton site", + pt: "Quatro caminhos para o teu site", + }, + ls_text: { + de: "Alle Preise sind Einstiegspunkte. Umfang, Funktionen und Personalisierung können Preis und Dauer verändern — was bei dir gilt, steht im schriftlichen Angebot.", + "de-CH": "Alli Priis sind Iistiegspünkt. Umfang, Funktione und Personalisierig chönd Priis und Duur verändere — was bi dir gilt, stoht im schriftliche Aagebot.", + en: "All prices are starting points. Scope, features and personalisation can change price and duration — what applies to you is set out in the written quote.", + fr: "Tous les prix sont des points de départ. L'étendue, les fonctions et la personnalisation peuvent modifier le prix et la durée — ce qui s'applique à toi figure dans le devis écrit.", + pt: "Todos os preços são pontos de partida. Âmbito, funcionalidades e personalização podem alterar preço e duração — o que se aplica a ti consta do orçamento escrito.", + }, + + pk_onepager_p: { + de: "Eine starke einzelne Seite für Person, Angebot, Aktion oder Kampagne.", + "de-CH": "Ei starchi einzelni Site für Person, Aagebot, Aktion oder Kampagne.", + en: "One strong single page for a person, an offer, a campaign or a promotion.", + fr: "Une seule page forte pour une personne, une offre, une action ou une campagne.", + pt: "Uma página única e forte para pessoa, oferta, ação ou campanha.", + }, + + pk_website_p: { + de: "Mehrere Unterseiten für Unternehmen, Creator, Teams oder Projekte.", + "de-CH": "Mehreri Undersite für Firme, Creator, Teams oder Projekt.", + en: "Several sub-pages for companies, creators, teams or projects.", + fr: "Plusieurs sous-pages pour entreprises, créateurs, équipes ou projets.", + pt: "Várias subpáginas para empresas, criadores, equipas ou projetos.", + }, + + pk_shop_p: { + de: "Produktverkauf, Nutzerbereiche und umfangreiche Funktionen.", + "de-CH": "Produktverchauf, Nutzerbereich und viili Funktione.", + en: "Product sales, user areas and extensive functionality.", + fr: "Vente de produits, espaces utilisateurs et fonctions étendues.", + pt: "Venda de produtos, áreas de utilizador e funcionalidades extensas.", + }, + + pk_verwaltung_p: { + de: "Technisches Portal für Belege, Einnahmen, Ausgaben und Dokumente.", + "de-CH": "Technischs Portal für Bäläg, Iinahme, Uusgabe und Dokumänt.", + en: "A technical portal for receipts, income, expenses and documents.", + fr: "Un portail technique pour justificatifs, recettes, dépenses et documents.", + pt: "Um portal técnico para comprovativos, receitas, despesas e documentos.", + }, + + pk_details: { de: "Was genau enthalten ist", "de-CH": "Was gnau dinne isch", en: "What exactly is included", fr: "Ce qui est inclus exactement", pt: "O que está exatamente incluído" }, + + betreuung_p: { + de: "Kleine Änderungen werden typischerweise innerhalb von ca. 2–5 Arbeitstagen bearbeitet. Umfang und Priorität richten sich nach dem gewählten Paket.", + "de-CH": "Chlini Änderige wärded typischerwiis innert öppe 2–5 Arbeitstäg gmacht. Umfang und Priorität richted sich nach em gwählte Paket.", + en: "Small changes are typically handled within approx. 2–5 working days. Scope and priority depend on the package you choose.", + fr: "Les petites modifications sont généralement traitées en 2 à 5 jours ouvrés. L'étendue et la priorité dépendent de la formule choisie.", + pt: "Pequenas alterações são normalmente tratadas em aprox. 2–5 dias úteis. O âmbito e a prioridade dependem do pacote escolhido.", + }, + + + /* ---------- 04 AUSGEWÄHLTE PROJEKTE ---------- */ + pf_eyebrow: { de: "Ausgewählte Projekte", "de-CH": "Uusgwählti Projekt", en: "Selected projects", fr: "Projets sélectionnés", pt: "Projetos selecionados" }, + pf_h2: { + de: "Zwei Seiten, die wirklich laufen", + "de-CH": "Zwei Site, wo würklich laufed", + en: "Two sites that are genuinely live", + fr: "Deux sites réellement en ligne", + pt: "Dois sites realmente no ar", + }, + pf_text: { + de: "Keine erfundenen Beispiele und keine Bewertungen, die es nie gab. Beides sind echte, öffentlich erreichbare Seiten mit allem, was dahintersteckt.", + "de-CH": "Kei erfundeni Bispiel und kei Bewärtige, wo s nie ggäh het. Beidi sind ächti, öffentlich erreichbari Site mit allem, wo dehinter steckt.", + en: "No invented examples and no reviews that never existed. Both are real, publicly reachable sites — including everything behind them.", + fr: "Aucun exemple inventé, aucun avis qui n'a jamais existé. Les deux sont de vrais sites accessibles publiquement, avec tout ce qu'il y a derrière.", + pt: "Sem exemplos inventados e sem avaliações que nunca existiram. Ambos são sites reais, publicamente acessíveis — incluindo tudo o que está por trás.", + }, + pf_alle: { de: "Alle Projekte ansehen", "de-CH": "Alli Projekt aaluege", en: "View all projects", fr: "Voir tous les projets", pt: "Ver todos os projetos" }, + pf_aufgabe: { de: "Aufgabe", "de-CH": "Ufgab", en: "Task", fr: "Mission", pt: "Tarefa" }, + pf_ergebnis: { de: "Ergebnis", "de-CH": "Ergebnis", en: "Result", fr: "Résultat", pt: "Resultado" }, + pf_ansehen: { de: "Live ansehen", "de-CH": "Live aaluege", en: "View live", fr: "Voir en ligne", pt: "Ver ao vivo" }, + + pf_universe_h3: { de: "Dogfather Universe", "de-CH": "Dogfather Universe", en: "Dogfather Universe", fr: "Dogfather Universe", pt: "Dogfather Universe" }, + pf_universe_alt: { + de: "Startseite von dogfather-universe.com", + "de-CH": "Startsite vo dogfather-universe.com", + en: "Home page of dogfather-universe.com", + fr: "Page d'accueil de dogfather-universe.com", + pt: "Página inicial de dogfather-universe.com", + }, + pf_universe_p: { + de: "Content- und Community-Plattform mit fünf Sprachen, Teamseiten, Streamplan, Bewerbungssystem, Supporter-Abo und eigenem Verwaltungsbereich.", + "de-CH": "Content- und Community-Plattform mit füf Sprooche, Teamsite, Streamplan, Bewerbigssyschtem, Supporter-Abo und eigenem Verwaltigsbereich.", + en: "Content and community platform with five languages, team pages, stream schedule, application system, supporter subscription and its own admin area.", + fr: "Plateforme de contenu et de communauté en cinq langues, avec pages d'équipe, planning de stream, système de candidature, abonnement supporter et espace d'administration.", + pt: "Plataforma de conteúdo e comunidade em cinco idiomas, com páginas de equipa, plano de streams, sistema de candidaturas, subscrição de apoiante e área de administração própria.", + }, + pf_universe_aufgabe: { + de: "Drei getrennte Welten unter ein Dach bringen, ohne dass es unübersichtlich wird.", + "de-CH": "Drü trennti Wälte under es Dach bringe, ohni dass es unübersichtlich wird.", + en: "Bring three separate worlds under one roof without it becoming confusing.", + fr: "Réunir trois univers distincts sous un même toit sans que cela devienne confus.", + pt: "Reunir três mundos separados sob o mesmo teto sem que se torne confuso.", + }, + pf_universe_ergebnis: { + de: "Öffentlich seit August 2026, läuft auf einem eigenen Server, inhaltlich komplett selbst pflegbar.", + "de-CH": "Öffentlich sit Auguscht 2026, lauft uf eme eigene Server, inhaltlich komplett sälber pflegbar.", + en: "Public since August 2026, running on its own server, fully maintainable in-house.", + fr: "En ligne depuis août 2026, hébergé sur un serveur dédié, entièrement gérable en interne.", + pt: "Público desde agosto de 2026, a correr em servidor próprio, totalmente gerível internamente.", + }, + pf_tag_mehrsprachig: { de: "5 Sprachen", "de-CH": "5 Sprooche", en: "5 languages", fr: "5 langues", pt: "5 idiomas" }, + pf_tag_verwaltung: { de: "Eigene Verwaltung", "de-CH": "Eigeni Verwaltig", en: "Own admin area", fr: "Espace d'administration", pt: "Área de administração" }, + pf_tag_abo: { de: "Abo & Zahlung", "de-CH": "Abo & Zahlig", en: "Subscription & payment", fr: "Abonnement & paiement", pt: "Subscrição & pagamento" }, + + pf_shop_alt: { + de: "Startseite von vans-diy-bastelbedarf.com", + "de-CH": "Startsite vo vans-diy-bastelbedarf.com", + en: "Home page of vans-diy-bastelbedarf.com", + fr: "Page d'accueil de vans-diy-bastelbedarf.com", + pt: "Página inicial de vans-diy-bastelbedarf.com", + }, + pf_shop_h3: { de: "Van's DIY & Bastelbedarf", "de-CH": "Van's DIY & Bastelbedarf", en: "Van's DIY & Bastelbedarf", fr: "Van's DIY & Bastelbedarf", pt: "Van's DIY & Bastelbedarf" }, + pf_shop_p: { + de: "Vollständiger Onlineshop mit Produktverwaltung, Warenkorb, Gutscheincodes, Versandabläufen und einem Adminbereich, in dem Artikel ohne Technikkenntnisse gepflegt werden.", + "de-CH": "Vollständige Onlineshop mit Produktverwaltig, Warechorb, Gutscheincodes, Versandabläuf und eme Adminbereich, wo Artikel ohni Technikkenntnis pflegt wärded.", + en: "A complete online shop with product management, basket, voucher codes, shipping flows and an admin area where items are maintained without any technical knowledge.", + fr: "Une boutique en ligne complète avec gestion des produits, panier, codes de réduction, flux d'expédition et un espace d'administration où les articles se gèrent sans connaissances techniques.", + pt: "Uma loja online completa com gestão de produtos, carrinho, códigos de desconto, fluxos de envio e uma área de administração onde os artigos se gerem sem conhecimentos técnicos.", + }, + pf_shop_aufgabe: { + de: "Ein Shop, den die Inhaberin komplett selbst befüllen kann — ohne Schulung und ohne Angst, etwas kaputtzumachen.", + "de-CH": "En Shop, wo d Inhaberin komplett sälber befülle cha — ohni Schuelig und ohni Angscht, öppis kaputt z mache.", + en: "A shop the owner can fill entirely herself — without training and without fear of breaking something.", + fr: "Une boutique que la propriétaire peut alimenter entièrement elle-même — sans formation et sans crainte de casser quelque chose.", + pt: "Uma loja que a proprietária consegue preencher sozinha — sem formação e sem medo de estragar algo.", + }, + pf_shop_ergebnis: { + de: "Läuft auf eigener Domain und eigenem Server; Artikelpflege passiert selbstständig im Adminbereich.", + "de-CH": "Lauft uf eigener Domain und eigenem Server; d Artikelpflege passiert sälbstständig im Adminbereich.", + en: "Running on its own domain and server; item maintenance happens independently in the admin area.", + fr: "Hébergée sur son propre domaine et serveur ; la gestion des articles se fait en autonomie dans l'espace d'administration.", + pt: "A funcionar em domínio e servidor próprios; a gestão de artigos é feita de forma autónoma na área de administração.", + }, + pf_shop_hinweis: { + de: "Bilder und Detailansicht folgen, sobald die Inhaberin sie freigegeben hat. Ohne Freigabe zeigen wir hier nichts.", + "de-CH": "Bilder und Detailaasicht chömed, sobald d Inhaberin sie freigäh het. Ohni Freigab zeiged mir do nüt.", + en: "Images and the detailed view will follow as soon as the owner has approved them. Without approval we show nothing here.", + fr: "Les images et la vue détaillée suivront dès que la propriétaire les aura validées. Sans validation, nous ne montrons rien ici.", + pt: "Imagens e a vista detalhada seguem assim que a proprietária as aprovar. Sem aprovação não mostramos nada aqui.", + }, + pf_tag_shop: { de: "Shop & Kasse", "de-CH": "Shop & Kasse", en: "Shop & checkout", fr: "Boutique & paiement", pt: "Loja & pagamento" }, + pf_tag_admin: { de: "Selbstpflege", "de-CH": "Sälberpflege", en: "Self-service editing", fr: "Gestion autonome", pt: "Gestão autónoma" }, + pf_tag_gutschein: { de: "Gutscheincodes", "de-CH": "Gutscheincodes", en: "Voucher codes", fr: "Codes promo", pt: "Códigos de desconto" }, + + /* ---------- 05 SO LÄUFT ES AB ---------- */ + ab_eyebrow: { de: "So läuft es ab", "de-CH": "So laufts ab", en: "How it works", fr: "Comment ça se passe", pt: "Como funciona" }, + ab_h2: { + de: "Von der Anfrage bis zur Übergabe", + "de-CH": "Vo dr Aafrog bis zur Übergab", + en: "From enquiry to handover", + fr: "De la demande à la remise", + pt: "Do pedido à entrega", + }, + ab_1_h3: { de: "Anfrage", "de-CH": "Aafrog", en: "Enquiry", fr: "Demande", pt: "Pedido" }, + ab_1_p: { + de: "Du füllst das Formular aus. Es fragt genau das ab, was für ein ehrliches Angebot nötig ist — nicht mehr.", + "de-CH": "Du füllsch s Formular us. Es frogt gnau das ab, wo für es ehrlichs Aagebot nötig isch — nöd meh.", + en: "You fill in the form. It asks exactly what is needed for an honest quote — nothing more.", + fr: "Tu remplis le formulaire. Il demande exactement ce qui est nécessaire pour un devis honnête — rien de plus.", + pt: "Preenches o formulário. Pergunta exatamente o necessário para um orçamento honesto — nada mais.", + }, + ab_2_h3: { de: "Briefing", "de-CH": "Briefing", en: "Briefing", fr: "Briefing", pt: "Briefing" }, + ab_2_p: { + de: "Wir klären offene Punkte im Gespräch: Ziel, Zielgruppe, Umfang und was du schon an Inhalten hast.", + "de-CH": "Mir kläred offni Pünkt im Gspröch: Ziel, Zielgruppe, Umfang und was du scho a Inhalt hesch.", + en: "We clarify the open points in a conversation: goal, audience, scope and the content you already have.", + fr: "Nous clarifions les points ouverts lors d'un échange : objectif, public, étendue et contenus déjà disponibles.", + pt: "Esclarecemos os pontos em aberto numa conversa: objetivo, público, âmbito e os conteúdos que já tens.", + }, + ab_3_h3: { de: "Angebot", "de-CH": "Aagebot", en: "Quote", fr: "Devis", pt: "Orçamento" }, + ab_3_p: { + de: "Du bekommst Preis, Zeitrahmen und Umfang schriftlich. Erst wenn du zustimmst und die 30 % Anzahlung da sind, wird dein Termin reserviert.", + "de-CH": "Du überchunnsch Priis, Ziitrahme und Umfang schriftlich. Erscht wenn du zuestimmsch und d 30 % Aazahlig do sind, wird din Termin reserviert.", + en: "You receive price, timeframe and scope in writing. Your slot is reserved only once you agree and the 30 % deposit has arrived.", + fr: "Tu reçois le prix, le délai et l'étendue par écrit. Ton créneau n'est réservé qu'après ton accord et la réception de l'acompte de 30 %.", + pt: "Recebes preço, prazo e âmbito por escrito. A tua data só é reservada depois de concordares e de o sinal de 30 % ter chegado.", + }, + ab_4_h3: { de: "Design", "de-CH": "Design", en: "Design", fr: "Design", pt: "Design" }, + ab_4_p: { + de: "Du siehst den Entwurf, bevor gebaut wird — auf Handy und Computer. Zwei Feedbackrunden sind üblich eingeplant.", + "de-CH": "Du gsehsch dr Entwurf, bevor baut wird — uf Handy und Computer. Zwei Feedbackrunde sind üblich iiplant.", + en: "You see the draft before anything gets built — on mobile and desktop. Two feedback rounds are usually included.", + fr: "Tu vois la maquette avant toute construction — sur mobile et ordinateur. Deux tours de retours sont généralement prévus.", + pt: "Vês o esboço antes de se construir seja o que for — em telemóvel e computador. Normalmente estão previstas duas rondas de feedback.", + }, + ab_5_h3: { de: "Entwicklung & Tests", "de-CH": "Entwicklig & Teschts", en: "Development & testing", fr: "Développement & tests", pt: "Desenvolvimento & testes" }, + ab_5_p: { + de: "Die Seite wird gebaut und danach durchgespielt: jedes Formular, jeder Link, jeder Fehlerfall — auf echten Bildschirmgrößen.", + "de-CH": "D Site wird baut und denn durespielt: jedes Formular, jede Link, jede Fählerfall — uf ächte Bildschirmgrössi.", + en: "The site gets built and then played through: every form, every link, every error case — at real screen sizes.", + fr: "Le site est développé puis testé de bout en bout : chaque formulaire, chaque lien, chaque cas d'erreur — à des tailles d'écran réelles.", + pt: "O site é construído e depois testado por completo: cada formulário, cada ligação, cada caso de erro — em tamanhos de ecrã reais.", + }, + ab_6_h3: { de: "Übergabe", "de-CH": "Übergab", en: "Handover", fr: "Remise", pt: "Entrega" }, + ab_6_p: { + de: "Veröffentlichung erst nach deiner ausdrücklichen Freigabe. Danach eine Einweisung, damit du deine Inhalte selbst pflegen kannst.", + "de-CH": "Veröffentlichig erscht nach dinere uusdrückliche Freigab. Denn e Iiwiisig, damit du dini Inhalt sälber pflege chasch.", + en: "Publication happens only after your explicit approval. Then a walkthrough so you can maintain your content yourself.", + fr: "La mise en ligne n'a lieu qu'après ta validation explicite. Ensuite une prise en main pour que tu puisses gérer tes contenus toi-même.", + pt: "A publicação só acontece após a tua aprovação explícita. Depois uma introdução para poderes gerir os teus conteúdos.", + }, + + /* ---------- 06 WARUM DOGFATHER ---------- */ + wd_eyebrow: { de: "Warum Dogfather", "de-CH": "Wieso Dogfather", en: "Why Dogfather", fr: "Pourquoi Dogfather", pt: "Porquê Dogfather" }, + wd_h2: { + de: "Eine Person, die dranbleibt", + "de-CH": "Ei Person, wo dra bliibt", + en: "One person who stays on it", + fr: "Une personne qui reste impliquée", + pt: "Uma pessoa que não larga o projeto", + }, + wd_p1: { + de: "Hinter Dogfather Webdesign steht keine Agentur mit wechselnden Zuständigkeiten, sondern eine Person, die dein Projekt von Anfang bis Ende begleitet — und die dieselbe Sorgfalt hineinsteckt, die im Dogfather Universe steckt.", + "de-CH": "Hinder Dogfather Webdesign stoht kei Agentur mit wächslende Zueständigkeite, sondern ei Person, wo dis Projekt vo Aafang bis Änd begleitet — und wo diesälb Sorgfalt inestecht, wo im Dogfather Universe stecht.", + en: "Behind Dogfather Web Design there is no agency with changing responsibilities, but one person who accompanies your project from start to finish — with the same care that went into the Dogfather Universe.", + fr: "Derrière Dogfather Web Design, il n'y a pas d'agence aux responsables changeants, mais une personne qui accompagne ton projet du début à la fin — avec le même soin que celui investi dans le Dogfather Universe.", + pt: "Por trás do Dogfather Web Design não está uma agência com responsáveis a mudar, mas uma pessoa que acompanha o teu projeto do início ao fim — com o mesmo cuidado investido no Dogfather Universe.", + }, + wd_p2: { + de: "Das heißt auch: keine Versprechen, die später nicht gehalten werden. Was nicht geht, sage ich vorher — nicht, wenn die Anzahlung schon da ist.", + "de-CH": "Das heisst au: kei Verspräche, wo spöter nöd ghalte wärded. Was nöd goht, säg i vorher — nöd, wenn d Aazahlig scho do isch.", + en: "That also means: no promises that later go unkept. If something isn't feasible I say so up front — not once the deposit has landed.", + fr: "Cela signifie aussi : pas de promesses non tenues par la suite. Si quelque chose n'est pas faisable, je le dis à l'avance — pas une fois l'acompte encaissé.", + pt: "Isso também significa: sem promessas que depois não se cumprem. Se algo não é viável, digo-o à partida — não depois de o sinal ter entrado.", + }, + wd_mehr: { de: "Mehr über Dogfather", "de-CH": "Meh über dä Dogfather", en: "More about Dogfather", fr: "En savoir plus sur Dogfather", pt: "Mais sobre o Dogfather" }, + wd_foto_alt: { + de: "Dogfather", + "de-CH": "Dogfather", + en: "Dogfather", + fr: "Dogfather", + pt: "Dogfather", + }, + + /* ---------- 07 FAQ ---------- */ + faq_eyebrow: { de: "Häufige Fragen", "de-CH": "Hüüfigi Frage", en: "Frequently asked", fr: "Questions fréquentes", pt: "Perguntas frequentes" }, + faq_h2: { + de: "Das, was fast alle fragen", + "de-CH": "Das, wo fascht alli fröged", + en: "What almost everyone asks", + fr: "Ce que presque tout le monde demande", + pt: "O que quase todos perguntam", + }, + faq_1_f: { + de: "Ist der genannte Preis der Endpreis?", + "de-CH": "Isch dä gnennt Priis dr Ändpriis?", + en: "Is the stated price the final price?", + fr: "Le prix indiqué est-il le prix final ?", + pt: "O preço indicado é o preço final?", + }, + faq_1_a: { + de: "Nein. Die Beträge auf dieser Seite sind Einstiegspreise. Der verbindliche Endpreis entsteht erst durch ein schriftliches Angebot, nachdem der tatsächliche Umfang geklärt ist. Das Anfrageformular erzeugt keinen Vertrag.", + "de-CH": "Nei. D Beträg uf dere Site sind Iistiegspriis. Dr verbindlich Ändpriis entstoht erscht dur es schriftlichs Aagebot, nachdem dr tatsächlich Umfang klärt isch. S Aafrogformular macht kein Vertrag.", + en: "No. The amounts on this page are starting prices. The binding final price only comes from a written quote once the actual scope has been clarified. The enquiry form does not create a contract.", + fr: "Non. Les montants sur cette page sont des prix de départ. Le prix final contractuel découle d'un devis écrit, une fois l'étendue réelle clarifiée. Le formulaire de demande ne crée aucun contrat.", + pt: "Não. Os valores nesta página são preços iniciais. O preço final vinculativo resulta de um orçamento escrito, depois de esclarecido o âmbito real. O formulário de pedido não cria qualquer contrato.", + }, + faq_2_f: { + de: "Warum 30 % Anzahlung?", + "de-CH": "Wieso 30 % Aazahlig?", + en: "Why a 30 % deposit?", + fr: "Pourquoi un acompte de 30 % ?", + pt: "Porquê um sinal de 30 %?", + }, + faq_2_a: { + de: "Weil damit dein Zeitfenster fest reserviert wird. Solange keine Anzahlung da ist, ist kein Termin blockiert — und ein Projekt, das kurzfristig abspringt, geht sonst auf Kosten aller anderen, die warten.", + "de-CH": "Wil demit dis Ziitfenschter fescht reserviert wird. So lang kei Aazahlig do isch, isch kein Termin blockiert — und es Projekt, wo churzfrischtig abspringt, goht süsch uf Choschte vo allne andere, wo warted.", + en: "Because it firmly reserves your time slot. Without a deposit no slot is blocked — and a project that drops out at short notice otherwise comes at the expense of everyone else who is waiting.", + fr: "Parce qu'il réserve fermement ton créneau. Sans acompte, aucun créneau n'est bloqué — et un projet qui se désiste au dernier moment se fait sinon au détriment de tous ceux qui attendent.", + pt: "Porque reserva firmemente a tua janela de tempo. Sem sinal não há data bloqueada — e um projeto que desiste em cima da hora fica de outro modo à custa de todos os que esperam.", + }, + faq_3_f: { + de: "Was ist, wenn ich noch keine Texte und Bilder habe?", + "de-CH": "Was isch, wenn i no kei Täxt und Bilder han?", + en: "What if I don't have any text or images yet?", + fr: "Et si je n'ai encore ni textes ni images ?", + pt: "E se ainda não tiver textos nem imagens?", + }, + faq_3_a: { + de: "Das ist normal und kein Hindernis. Sag es im Anfrageformular ehrlich — dann planen wir es von Anfang an ein, statt später überrascht zu werden. Fehlende Inhalte sind der häufigste Grund, warum Projekte länger dauern als geplant.", + "de-CH": "Das isch normal und kes Hindernis. Sägs im Aafrogformular ehrlich — denn plane mers vo Aafang a ii, statt spöter überrascht z wärde. Fählendi Inhalt sind dr hüüfigscht Grund, wieso Projekt länger duured als plant.", + en: "That is normal and no obstacle. Say so honestly in the enquiry form — then we plan for it from the start instead of being surprised later. Missing content is the most common reason why projects take longer than planned.", + fr: "C'est normal et ce n'est pas un obstacle. Indique-le honnêtement dans le formulaire — nous l'intégrons dès le départ au lieu d'être surpris plus tard. Les contenus manquants sont la première cause de retard des projets.", + pt: "É normal e não é obstáculo. Diz isso honestamente no formulário — assim planeamos desde o início em vez de sermos surpreendidos depois. Falta de conteúdos é a causa mais comum de projetos demorarem mais do que o previsto.", + }, + faq_4_f: { + de: "Gehört die Seite danach mir?", + "de-CH": "Ghört d Site denn mir?", + en: "Do I own the site afterwards?", + fr: "Le site m'appartient-il ensuite ?", + pt: "O site fica meu depois?", + }, + faq_4_a: { + de: "Ja. Nach vollständiger Bezahlung erhältst du die Nutzungsrechte an der für dich erstellten Seite samt Inhalten. Eingesetzte fremde Bausteine (z. B. Schriften oder Bilder aus Bibliotheken) behalten ihre eigene Lizenz — welche das sind, steht im Angebot.", + "de-CH": "Jo. Nach vollständiger Zahlig überchunnsch d Nutzigsrächt a dr für dich erstellte Site samt Inhalt. Iigsetzti frömdi Bauteil (z. B. Schrifte oder Bilder us Bibliotheke) behalted ihri eigeni Lizänz — weli das sind, stoht im Aagebot.", + en: "Yes. After full payment you receive the usage rights to the site created for you, including its content. Third-party components used (e.g. fonts or stock images) keep their own licence — which ones these are is listed in the quote.", + fr: "Oui. Après paiement intégral, tu obtiens les droits d'utilisation du site créé pour toi, contenus compris. Les composants tiers utilisés (polices, images de banque) conservent leur propre licence — lesquels, c'est précisé dans le devis.", + pt: "Sim. Após o pagamento integral recebes os direitos de utilização do site criado para ti, incluindo os conteúdos. Componentes de terceiros utilizados (p. ex. tipos de letra ou imagens de banco) mantêm a sua própria licença — quais são consta do orçamento.", + }, + faq_5_f: { + de: "Wird ohne meine Zustimmung etwas veröffentlicht?", + "de-CH": "Wird ohni mini Zuestimmig öppis veröffentlicht?", + en: "Will anything be published without my consent?", + fr: "Quelque chose sera-t-il publié sans mon accord ?", + pt: "Será publicado algo sem o meu consentimento?", + }, + faq_5_a: { + de: "Nein. Weder die Seite selbst noch ein Beispiel davon im Portfolio. Beides braucht deine ausdrückliche Freigabe, und beides ist getrennt — du kannst die Seite live schalten und trotzdem nicht im Portfolio auftauchen wollen.", + "de-CH": "Nei. Weder d Site sälber no es Bispiel devo im Portfolio. Beidi bruuched dini uusdrücklichi Freigab, und beidi sind trennt — du chasch d Site live schalte und trotzdem nöd im Portfolio uftauche welle.", + en: "No. Neither the site itself nor an example of it in the portfolio. Both require your explicit approval, and both are separate — you can take the site live and still not want to appear in the portfolio.", + fr: "Non. Ni le site lui-même, ni un exemple dans le portfolio. Les deux nécessitent ton accord explicite et sont indépendants — tu peux mettre le site en ligne sans vouloir figurer au portfolio.", + pt: "Não. Nem o site em si nem um exemplo dele no portfólio. Ambos exigem a tua aprovação explícita e são independentes — podes pôr o site no ar e mesmo assim não querer aparecer no portfólio.", + }, + faq_alle: { de: "Alle Fragen und Antworten", "de-CH": "Alli Frage und Antworte", en: "All questions and answers", fr: "Toutes les questions et réponses", pt: "Todas as perguntas e respostas" }, + + /* ---------- 08 ABSCHLUSS-CTA ---------- */ + cta_h2: { + de: "Erzähl mir von deinem Vorhaben", + "de-CH": "Verzell mer vo dim Vorhabe", + en: "Tell me about your project", + fr: "Parle-moi de ton projet", + pt: "Conta-me o teu projeto", + }, + cta_p: { + de: "Ein paar Minuten für das Formular reichen. Du bekommst danach eine Zusammenfassung, ich melde mich mit Rückfragen oder direkt mit einem Angebot — unverbindlich und ohne Kosten.", + "de-CH": "E paar Minute fürs Formular länged. Du überchunnsch denn e Zämefassig, ich mälde mich mit Rückfroge oder grad mit eme Aagebot — unverbindlich und ohni Choschte.", + en: "A few minutes with the form is enough. You then get a summary, and I come back with follow-up questions or directly with a quote — non-binding and free of charge.", + fr: "Quelques minutes suffisent pour le formulaire. Tu reçois ensuite un récapitulatif, et je reviens vers toi avec des questions ou directement avec un devis — sans engagement ni frais.", + pt: "Bastam alguns minutos no formulário. Recebes depois um resumo e eu volto com perguntas ou diretamente com um orçamento — sem compromisso e sem custos.", + }, + cta_knopf: { de: "Projekt anfragen", "de-CH": "Projekt aafroge", en: "Start a project", fr: "Demander un projet", pt: "Pedir projeto" }, + cta_klein: { + de: "Unverbindlich · Keine Kosten · Keine automatische Preiszusage", + "de-CH": "Unverbindlich · Kei Choschte · Kei automatischi Priiszuesag", + en: "Non-binding · Free of charge · No automatic price commitment", + fr: "Sans engagement · Gratuit · Aucun engagement de prix automatique", + pt: "Sem compromisso · Sem custos · Sem compromisso automático de preço", + }, + + /* ---------- Marken-Intro nach dem Zugang (Masterplan S.3, Schritt 02) ---------- */ + intro_gruss_dogfather: { + de: "Willkommen, Dogfather", + "de-CH": "Willkomme, Dogfather", + en: "Welcome, Dogfather", + fr: "Bienvenue, Dogfather", + pt: "Bem-vindo, Dogfather", + }, + intro_gruss_vanvan: { + de: "Willkommen, VanVan", + "de-CH": "Willkomme, VanVan", + en: "Welcome, VanVan", + fr: "Bienvenue, VanVan", + pt: "Bem-vinda, VanVan", + }, + intro_gruss_allgemein: { + de: "Willkommen", + "de-CH": "Willkomme", + en: "Welcome", + fr: "Bienvenue", + pt: "Bem-vindo", + }, + intro_unter: { + de: "Dogfather Webdesign — Vorabversion", + "de-CH": "Dogfather Webdesign — Vorabversion", + en: "Dogfather Web Design — preview version", + fr: "Dogfather Web Design — version préliminaire", + pt: "Dogfather Web Design — versão prévia", + }, + intro_ueberspringen: { + de: "Überspringen", + "de-CH": "Überspringe", + en: "Skip", + fr: "Passer", + pt: "Saltar", + }, +}; diff --git a/assets/js/i18n-wd-leistungen.js b/assets/js/i18n-wd-leistungen.js new file mode 100644 index 00000000..c2491b36 --- /dev/null +++ b/assets/js/i18n-wd-leistungen.js @@ -0,0 +1,213 @@ +/* ===================================================================== + i18n-wd-leistungen.js — Leistungsdetails (Masterplan S.9) + Fünf Sprachen. Preise/Dauer sind wortgleich zur Startseite und zur + Preisseite formuliert (Masterplan S.16: überall widerspruchsfrei). + ===================================================================== */ +window.I18N_WD = { + seiten_titel: { + de: "Leistungen — Dogfather Webdesign", + "de-CH": "Was mir mache — Dogfather Webdesign", + en: "Services — Dogfather Web Design", + fr: "Prestations — Dogfather Web Design", + pt: "Serviços — Dogfather Web Design", + }, + + ls_eyebrow: { de: "Klare Pakete", "de-CH": "Klari Pakete", en: "Clear packages", fr: "Des formules claires", pt: "Pacotes claros" }, + ls_h1: { + de: "Was du ungefähr bekommst", + "de-CH": "Was du öppe überchunnsch", + en: "What you get, roughly", + fr: "Ce que tu obtiens, en gros", + pt: "O que recebes, aproximadamente", + }, + ls_lead: { + de: "Keine leeren Werbeversprechen. Zu jeder Kategorie steht hier, für wen sie gedacht ist, was typischerweise drin ist, was extra kostet — und wo die Grenze verläuft.", + "de-CH": "Kei leeri Werbeverspräche. Zu jedere Kategorie stoht do, für wän si dänkt isch, was typischerwiis dinne isch, was extra choschtet — und wo d Gränze verlauft.", + en: "No empty marketing promises. For every category this page states who it is for, what is typically included, what costs extra — and where the limit lies.", + fr: "Pas de promesses publicitaires creuses. Pour chaque catégorie, cette page indique à qui elle s'adresse, ce qui est généralement inclus, ce qui coûte en plus — et où se situe la limite.", + pt: "Sem promessas publicitárias vazias. Para cada categoria esta página indica a quem se destina, o que está tipicamente incluído, o que custa extra — e onde está o limite.", + }, + + /* --- Gemeinsame Beschriftungen --- */ + fuer_wen: { de: "Für wen", "de-CH": "Für wän", en: "Who it's for", fr: "Pour qui", pt: "Para quem" }, + enthalten: { de: "Typisch enthalten", "de-CH": "Typisch dinne", en: "Typically included", fr: "Généralement inclus", pt: "Tipicamente incluído" }, + beispiel: { de: "Konkretes Beispiel", "de-CH": "Konkrets Bispiel", en: "A concrete example", fr: "Exemple concret", pt: "Exemplo concreto" }, + extras: { de: "Kostet extra", "de-CH": "Choschtet extra", en: "Costs extra", fr: "En supplément", pt: "Custa à parte" }, + grenze: { de: "Nicht enthalten", "de-CH": "Nöd dinne", en: "Not included", fr: "Non inclus", pt: "Não incluído" }, + jetzt_anfragen: { de: "Dieses Paket anfragen", "de-CH": "Das Paket aafroge", en: "Enquire about this package", fr: "Demander cette formule", pt: "Pedir este pacote" }, + + extras_allgemein: { + de: "Zusätzliche Sprachen · weitere Unterseiten · Logo- und Bildbearbeitung · Texterstellung · Anbindung an fremde Systeme · zusätzliche Feedbackrunden über die vereinbarten hinaus", + "de-CH": "Zuesätzlichi Sprooche · wiiteri Undersite · Logo- und Bildbearbeitig · Täxt schriibe · Aabindig a frömdi Syschtem · zuesätzlichi Feedbackrunde über die vereinbarte use", + en: "Additional languages · further sub-pages · logo and image editing · copywriting · connections to third-party systems · extra feedback rounds beyond those agreed", + fr: "Langues supplémentaires · pages additionnelles · retouche de logo et d'images · rédaction · connexion à des systèmes tiers · tours de retours supplémentaires au-delà de ce qui est convenu", + pt: "Idiomas adicionais · mais subpáginas · edição de logótipo e imagens · redação de textos · ligação a sistemas externos · rondas de feedback extra além das acordadas", + }, + + /* --- Onepager --- */ + op_h2: { de: "Onepager", "de-CH": "Onepager", en: "One-pager", fr: "Page unique", pt: "Página única" }, + op_fuer: { + de: "Einzelpersonen, Creator, eine einzelne Aktion oder ein klar umrissenes Angebot, das keine Unterseiten braucht.", + "de-CH": "Einzelpersone, Creator, ei einzelni Aktion oder es klar umrissnigs Aagebot, wo kei Undersite bruucht.", + en: "Individuals, creators, a single campaign or a clearly defined offer that does not need sub-pages.", + fr: "Particuliers, créateurs, une action ponctuelle ou une offre clairement définie qui n'a pas besoin de sous-pages.", + pt: "Particulares, criadores, uma ação pontual ou uma oferta bem definida que não precisa de subpáginas.", + }, + op_1: { de: "Bis zu ca. fünf Inhaltsbereiche auf einer Seite", "de-CH": "Bis zu öppe füf Inhaltsbereich uf einere Site", en: "Up to approx. five content sections on one page", fr: "Jusqu'à environ cinq sections de contenu sur une page", pt: "Até cerca de cinco secções de conteúdo numa página" }, + op_2: { de: "Hero, Vorstellung, Angebot, Links und Kontakt", "de-CH": "Hero, Vorstellig, Aagebot, Links und Kontakt", en: "Hero, introduction, offer, links and contact", fr: "Hero, présentation, offre, liens et contact", pt: "Hero, apresentação, oferta, ligações e contacto" }, + op_3: { de: "Responsiv auf Handy, Tablet und Computer", "de-CH": "Responsiv uf Handy, Tablet und Computer", en: "Responsive on mobile, tablet and desktop", fr: "Responsive sur mobile, tablette et ordinateur", pt: "Responsivo em telemóvel, tablet e computador" }, + op_4: { de: "Grundstruktur für Suchmaschinen (Titel, Beschreibung, Überschriften)", "de-CH": "Grundstruktur für Suechmaschine (Titel, Beschriibig, Überschrifte)", en: "Basic search engine structure (title, description, headings)", fr: "Structure de base pour les moteurs de recherche (titre, description, titres)", pt: "Estrutura básica para motores de busca (título, descrição, cabeçalhos)" }, + op_5: { de: "Typischerweise zwei Feedbackrunden", "de-CH": "Typischerwiis zwei Feedbackrunde", en: "Typically two feedback rounds", fr: "Généralement deux tours de retours", pt: "Tipicamente duas rondas de feedback" }, + op_beispiel: { + de: "Eine Seite für einen Creator: oben wer du bist und was du machst, darunter die aktuelle Aktion, deine Kanäle, ein kurzes Kontaktformular. Alles auf einem Bildschirm erreichbar, ohne Menü.", + "de-CH": "Ei Site für en Creator: obe wär du bisch und was du machsch, drunter d aktuelli Aktion, dini Kanäl, es churzes Kontaktformular. Alles uf eme Bildschirm erreichbar, ohni Menü.", + en: "One page for a creator: who you are and what you do at the top, below it the current campaign, your channels, a short contact form. Everything reachable on one screen, without a menu.", + fr: "Une page pour un créateur : en haut qui tu es et ce que tu fais, en dessous l'action en cours, tes canaux, un court formulaire de contact. Tout accessible sur un écran, sans menu.", + pt: "Uma página para um criador: em cima quem és e o que fazes, abaixo a ação atual, os teus canais, um formulário de contacto curto. Tudo acessível num ecrã, sem menu.", + }, + op_grenze: { + de: "Kein Shop, keine Nutzerkonten, keine Unterseiten. Wenn absehbar mehr als eine Seite nötig wird, ist die professionelle Website der ehrlichere Weg — auch wenn sie mehr kostet.", + "de-CH": "Kei Shop, kei Nutzerkonte, kei Undersite. Wenn abgseh isch, dass meh als ei Site nötig wird, isch d Profi-Website dr ehrlicher Wäg — au wenn si meh choschtet.", + en: "No shop, no user accounts, no sub-pages. If more than one page is foreseeably needed, the professional website is the more honest route — even though it costs more.", + fr: "Pas de boutique, pas de comptes utilisateurs, pas de sous-pages. Si plus d'une page s'avère nécessaire, le site professionnel est la voie la plus honnête — même s'il coûte plus cher.", + pt: "Sem loja, sem contas de utilizador, sem subpáginas. Se for previsível ser necessária mais do que uma página, o website profissional é o caminho mais honesto — mesmo custando mais.", + }, + + /* --- Professionelle Website --- */ + ws_h2: { de: "Professionelle Website", "de-CH": "Profi-Website", en: "Professional website", fr: "Site professionnel", pt: "Website profissional" }, + ws_fuer: { + de: "Unternehmen, Teams, Vereine, Creator mit mehreren Themen — überall dort, wo eine einzelne Seite zu voll würde.", + "de-CH": "Firme, Teams, Verein, Creator mit mehrere Thema — überall dete, wo ei einzelni Site z voll wär.", + en: "Companies, teams, clubs, creators with several topics — wherever a single page would become too crowded.", + fr: "Entreprises, équipes, associations, créateurs avec plusieurs thèmes — partout où une seule page serait trop chargée.", + pt: "Empresas, equipas, associações, criadores com vários temas — sempre que uma única página ficaria demasiado cheia.", + }, + ws_1: { de: "Typisch bis zu fünf Kernseiten", "de-CH": "Typisch bis zu füf Kernsite", en: "Typically up to five core pages", fr: "Généralement jusqu'à cinq pages principales", pt: "Tipicamente até cinco páginas principais" }, + ws_2: { de: "Navigation, Formulare, Galerie oder Videos", "de-CH": "Navigation, Formular, Galerie oder Video", en: "Navigation, forms, gallery or videos", fr: "Navigation, formulaires, galerie ou vidéos", pt: "Navegação, formulários, galeria ou vídeos" }, + ws_3: { de: "Responsive Umsetzung und Funktionscheck auf echten Geräten", "de-CH": "Responsivi Umsetzig und Funktionscheck uf ächte Grät", en: "Responsive build and functional check on real devices", fr: "Réalisation responsive et vérification fonctionnelle sur appareils réels", pt: "Implementação responsiva e verificação funcional em dispositivos reais" }, + ws_4: { de: "Unterstützung bei der Veröffentlichung (Domain, Zertifikat, Umzug)", "de-CH": "Understützig bi dr Veröffentlichig (Domain, Zertifikat, Umzug)", en: "Support with going live (domain, certificate, migration)", fr: "Accompagnement à la mise en ligne (domaine, certificat, migration)", pt: "Apoio na publicação (domínio, certificado, migração)" }, + ws_5: { de: "Einweisung, damit du Texte selbst ändern kannst", "de-CH": "Iiwiisig, damit du Täxt sälber ändere chasch", en: "A walkthrough so you can change texts yourself", fr: "Une prise en main pour modifier les textes toi-même", pt: "Uma introdução para poderes alterar textos sozinho" }, + ws_beispiel: { + de: "Ein Handwerksbetrieb: Startseite, Leistungen, Referenzen mit Bildern, Über uns, Kontakt mit Anfahrt und Formular. Anfragen landen strukturiert im Postfach statt als formlose Mail.", + "de-CH": "En Handwärchsbetrieb: Startsite, Leischtige, Referänze mit Bilder, Über üs, Kontakt mit Aafahrt und Formular. Aafroge lande strukturiert im Poschtfach statt als formlosi Mail.", + en: "A trade business: home, services, references with images, about us, contact with directions and a form. Enquiries arrive structured in the inbox instead of as a formless e-mail.", + fr: "Une entreprise artisanale : accueil, prestations, références avec photos, à propos, contact avec plan d'accès et formulaire. Les demandes arrivent structurées dans la boîte de réception au lieu d'un e-mail informe.", + pt: "Uma empresa de ofício: início, serviços, referências com imagens, sobre nós, contacto com indicações e formulário. Os pedidos chegam estruturados à caixa de entrada em vez de um e-mail informe.", + }, + ws_grenze: { + de: "Kein Produktverkauf und keine geschützten Nutzerbereiche. Sobald etwas verkauft oder ein Login gebraucht wird, gilt die nächste Kategorie.", + "de-CH": "Kein Produktverchauf und kei gschützti Nutzerbereich. Sobald öppis verchauft wird oder es Login bruucht wird, gilt d nöchscht Kategorie.", + en: "No product sales and no protected user areas. As soon as something is sold or a login is needed, the next category applies.", + fr: "Pas de vente de produits ni d'espaces utilisateurs protégés. Dès qu'il y a vente ou besoin d'un identifiant, c'est la catégorie suivante.", + pt: "Sem venda de produtos e sem áreas de utilizador protegidas. Assim que houver venda ou necessidade de login, aplica-se a categoria seguinte.", + }, + + /* --- Shop --- */ + sh_h2: { de: "Shop & umfangreiche Website", "de-CH": "Shop & grossi Website", en: "Shop & large website", fr: "Boutique & grand site", pt: "Loja & site extenso" }, + sh_fuer: { + de: "Alle, die tatsächlich online verkaufen wollen — Handgemachtes, digitale Produkte, Merch — oder einen geschützten Bereich für Kundinnen und Kunden brauchen.", + "de-CH": "Alli, wo würklich online verchaufe wänd — Handgmachts, digitali Produkt, Merch — oder en gschützte Bereich für Chunde bruuched.", + en: "Anyone who genuinely wants to sell online — handmade goods, digital products, merch — or needs a protected area for customers.", + fr: "Tous ceux qui veulent réellement vendre en ligne — fait main, produits numériques, merch — ou qui ont besoin d'un espace protégé pour leurs clients.", + pt: "Quem quer mesmo vender online — artigos feitos à mão, produtos digitais, merch — ou precisa de uma área protegida para clientes.", + }, + sh_1: { de: "Produkte, Detailseiten, Warenkorb und Kasse", "de-CH": "Produkt, Detailsite, Warechorb und Kasse", en: "Products, detail pages, basket and checkout", fr: "Produits, fiches détaillées, panier et paiement", pt: "Produtos, páginas de detalhe, carrinho e finalização" }, + sh_2: { de: "Zahlungs- und Versandabläufe eingerichtet und durchgespielt", "de-CH": "Zahligs- und Versandabläuf iigrichtet und durespielt", en: "Payment and shipping flows set up and tested end to end", fr: "Flux de paiement et d'expédition configurés et testés de bout en bout", pt: "Fluxos de pagamento e envio configurados e testados de ponta a ponta" }, + sh_3: { de: "Mobile Kundenführung — Kasse funktioniert auf dem Handy wirklich", "de-CH": "Mobili Chundeführig — d Kasse funktioniert uf em Handy würklich", en: "Mobile customer journey — checkout genuinely works on a phone", fr: "Parcours client mobile — le paiement fonctionne vraiment sur téléphone", pt: "Percurso de cliente móvel — a finalização funciona mesmo no telemóvel" }, + sh_4: { de: "Adminbereich zur eigenständigen Produktpflege", "de-CH": "Adminbereich zur sälbstständige Produktpflege", en: "Admin area for maintaining products yourself", fr: "Espace d'administration pour gérer les produits toi-même", pt: "Área de administração para gerires os produtos" }, + sh_5: { de: "Einweisung in die Produktpflege", "de-CH": "Iiwiisig i d Produktpflege", en: "A walkthrough of product maintenance", fr: "Prise en main de la gestion des produits", pt: "Introdução à gestão de produtos" }, + sh_beispiel: { + de: "Van's DIY & Bastelbedarf: Kategorien, Artikel mit Bildern und Varianten, Warenkorb, Gutscheincodes, Versandregeln — und ein Adminbereich, in dem neue Artikel ohne Technikkenntnisse angelegt werden.", + "de-CH": "Van's DIY & Bastelbedarf: Kategorie, Artikel mit Bilder und Variante, Warechorb, Gutscheincodes, Versandregle — und en Adminbereich, wo neui Artikel ohni Technikkenntnis aagleit wärded.", + en: "Van's DIY & Bastelbedarf: categories, items with images and variants, basket, voucher codes, shipping rules — and an admin area where new items are created without any technical knowledge.", + fr: "Van's DIY & Bastelbedarf : catégories, articles avec photos et variantes, panier, codes promo, règles d'expédition — et un espace d'administration où les nouveaux articles se créent sans connaissances techniques.", + pt: "Van's DIY & Bastelbedarf: categorias, artigos com imagens e variantes, carrinho, códigos de desconto, regras de envio — e uma área de administração onde se criam novos artigos sem conhecimentos técnicos.", + }, + sh_grenze: { + de: "Gebühren von Zahlungsanbietern, Kosten für Domain und Server sowie steuerliche Pflichten liegen bei dir. Ich richte die Technik ein, übernehme aber weder Buchhaltung noch Rechtsberatung.", + "de-CH": "Gebühre vo Zahligsaabieter, Choschte für Domain und Server und stüürlichi Pflichte liged bi dir. Ich richte d Technik ii, übernimm aber weder Buechhaltig no Rächtsberatig.", + en: "Payment provider fees, domain and server costs and tax obligations remain yours. I set up the technology but take on neither bookkeeping nor legal advice.", + fr: "Les frais des prestataires de paiement, les coûts de domaine et de serveur ainsi que les obligations fiscales restent à ta charge. Je mets en place la technique, mais je n'assure ni la comptabilité ni le conseil juridique.", + pt: "Taxas de fornecedores de pagamento, custos de domínio e servidor e obrigações fiscais são da tua responsabilidade. Eu monto a tecnologia, mas não assumo contabilidade nem aconselhamento jurídico.", + }, + + /* --- Verwaltungsseiten --- */ + vw_h2: { de: "Buchhaltungs- & Steuerverwaltungsseiten", "de-CH": "Buechhaltigs- & Stüürverwaltigssite", en: "Bookkeeping & tax administration portals", fr: "Portails de gestion comptable & fiscale", pt: "Portais de gestão contabilística & fiscal" }, + vw_fuer: { + de: "Selbstständige und kleine Betriebe, die Belege, Einnahmen und Ausgaben nicht mehr in Ordnern und Tabellen suchen wollen.", + "de-CH": "Sälbstständigi und chlini Betrieb, wo Bäläg, Iinahme und Uusgabe nüm i Ordner und Tabelle sueche wänd.", + en: "Self-employed people and small businesses who no longer want to search for receipts, income and expenses in folders and spreadsheets.", + fr: "Indépendants et petites structures qui ne veulent plus chercher justificatifs, recettes et dépenses dans des classeurs et des tableurs.", + pt: "Trabalhadores independentes e pequenas empresas que já não querem procurar comprovativos, receitas e despesas em pastas e folhas de cálculo.", + }, + vw_1: { de: "Geschützter Login und Benutzerrollen", "de-CH": "Gschützts Login und Benutzerrolle", en: "Protected login and user roles", fr: "Connexion protégée et rôles utilisateurs", pt: "Login protegido e perfis de utilizador" }, + vw_2: { de: "Belege, Einnahmen, Ausgaben und Dokumente an einem Ort", "de-CH": "Bäläg, Iinahme, Uusgabe und Dokumänt an eim Ort", en: "Receipts, income, expenses and documents in one place", fr: "Justificatifs, recettes, dépenses et documents au même endroit", pt: "Comprovativos, receitas, despesas e documentos num só lugar" }, + vw_3: { de: "Filter, Suche, Auswertungen und Export", "de-CH": "Filter, Suechi, Uuswärtige und Export", en: "Filters, search, reports and export", fr: "Filtres, recherche, analyses et export", pt: "Filtros, pesquisa, análises e exportação" }, + vw_4: { de: "Nachvollziehbarer Änderungsverlauf mit Zeitstempel", "de-CH": "Nachvollziehbare Änderigsverlauf mit Ziitstämpel", en: "Traceable change history with timestamps", fr: "Historique des modifications horodaté et traçable", pt: "Histórico de alterações rastreável com data e hora" }, + vw_5: { de: "Regelmäßige Sicherungen mit geprüfter Wiederherstellung", "de-CH": "Regelmässigi Sicherige mit prüefter Wiederherstellig", en: "Regular backups with a tested restore", fr: "Sauvegardes régulières avec restauration testée", pt: "Cópias de segurança regulares com restauro testado" }, + vw_beispiel: { + de: "Ein Portal, in dem du ein Foto eines Belegs hochlädst, Betrag und Kategorie einträgst und am Jahresende alles gefiltert exportierst — statt einen Schuhkarton zur Steuerberatung zu tragen.", + "de-CH": "Es Portal, wo du es Foto vom Bäläg ufelodsch, Betrag und Kategorie iiträitsch und am Jahresänd alles gfilteret exportiersch — statt en Schuehchartone zur Stüürberatig z trage.", + en: "A portal where you upload a photo of a receipt, enter amount and category, and export everything filtered at the end of the year — instead of carrying a shoebox to the tax advisor.", + fr: "Un portail où tu télécharges la photo d'un justificatif, saisis le montant et la catégorie, et exportes tout filtré en fin d'année — au lieu d'apporter une boîte à chaussures au comptable.", + pt: "Um portal onde carregas a foto de um comprovativo, indicas valor e categoria e no fim do ano exportas tudo filtrado — em vez de levares uma caixa de sapatos ao contabilista.", + }, + vw_grenze: { + de: "Das ist ausdrücklich eine technische Organisationslösung. Keine Buchhaltung, keine Steuerberatung, keine Erstellung von Steuererklärungen — dafür braucht es weiterhin eine Fachperson.", + "de-CH": "Das isch uusdrücklich e technischi Organisationslösig. Kei Buechhaltig, kei Stüürberatig, kei Erstellig vo Stüürerklärige — defür bruuchts wiiterhin e Fachperson.", + en: "This is explicitly a technical organisational tool. No bookkeeping, no tax advice, no preparation of tax returns — a qualified professional is still required for that.", + fr: "Il s'agit explicitement d'un outil d'organisation technique. Pas de comptabilité, pas de conseil fiscal, pas d'établissement de déclarations — un professionnel qualifié reste nécessaire.", + pt: "Trata-se explicitamente de uma solução técnica de organização. Sem contabilidade, sem aconselhamento fiscal, sem elaboração de declarações — para isso continua a ser necessário um profissional.", + }, + + /* --- Betreuung --- */ + bt_h2: { de: "Laufende Betreuung", "de-CH": "Laufendi Betreuig", en: "Ongoing support", fr: "Suivi continu", pt: "Acompanhamento contínuo" }, + bt_fuer: { + de: "Alle, die nach der Übergabe nicht selbst an der Technik schrauben wollen — oder einfach wissen möchten, dass jemand hinschaut.", + "de-CH": "Alli, wo nach dr Übergab nöd sälber a dr Technik schruube wänd — oder eifach wüsse wänd, dass öpper hiluegt.", + en: "Anyone who does not want to tinker with the technology after handover — or simply wants to know that someone is keeping an eye on it.", + fr: "Tous ceux qui ne veulent pas bricoler la technique après la remise — ou qui veulent simplement savoir que quelqu'un veille.", + pt: "Quem não quer mexer na tecnologia depois da entrega — ou simplesmente quer saber que alguém está atento.", + }, + bt_1: { de: "Kleine Änderungen typischerweise in ca. 2–5 Arbeitstagen", "de-CH": "Chlini Änderige typischerwiis i öppe 2–5 Arbeitstäg", en: "Small changes typically within approx. 2–5 working days", fr: "Petites modifications généralement sous 2 à 5 jours ouvrés", pt: "Pequenas alterações tipicamente em aprox. 2–5 dias úteis" }, + bt_2: { de: "Sicherheitsaktualisierungen und Überwachung der Erreichbarkeit", "de-CH": "Sicherheitsaktualisierige und Überwachig vo dr Erreichbarkeit", en: "Security updates and uptime monitoring", fr: "Mises à jour de sécurité et surveillance de la disponibilité", pt: "Atualizações de segurança e monitorização da disponibilidade" }, + bt_3: { de: "Regelmäßige Sicherungen, die auch wirklich zurückgespielt werden können", "de-CH": "Regelmässigi Sicherige, wo au würklich zrugg gspielt wärde chönd", en: "Regular backups that can genuinely be restored", fr: "Sauvegardes régulières réellement restaurables", pt: "Cópias de segurança regulares que podem mesmo ser restauradas" }, + bt_4: { de: "Umfang und Priorität nach gewähltem Paket", "de-CH": "Umfang und Priorität nach gwählitem Paket", en: "Scope and priority according to the chosen package", fr: "Étendue et priorité selon la formule choisie", pt: "Âmbito e prioridade conforme o pacote escolhido" }, + bt_grenze: { + de: "Betreuung ist keine unbegrenzte Weiterentwicklung. Neue Funktionen oder ganze Unterseiten sind eigene Aufträge — der Aufwand wird vorher genannt, du entscheidest.", + "de-CH": "Betreuig isch kei unbegränzti Wiiterentwicklig. Neui Funktione oder ganzi Undersite sind eigeni Ufträg — dr Ufwand wird vorher gnennt, du entscheidsch.", + en: "Support is not unlimited further development. New features or entire sub-pages are separate jobs — the effort is quoted beforehand and you decide.", + fr: "Le suivi n'est pas un développement illimité. De nouvelles fonctions ou des pages entières sont des missions distinctes — l'effort est chiffré à l'avance et tu décides.", + pt: "O acompanhamento não é desenvolvimento ilimitado. Novas funcionalidades ou páginas inteiras são trabalhos à parte — o esforço é indicado previamente e tu decides.", + }, + + abgrenzung_titel: { + de: "Technische Abgrenzung", + "de-CH": "Technischi Abgränzig", + en: "Technical boundary", + fr: "Périmètre technique", + pt: "Delimitação técnica", + }, + abgrenzung_text: { + de: "Buchhaltungs- und Steuerverwaltungsseiten sind ausschließlich technische Organisationslösungen. Diese Seite verspricht keine Buchhaltung, keine Steuerberatung und keine Erstellung von Steuererklärungen.", + "de-CH": "Buechhaltigs- und Stüürverwaltigssite sind uusschliesslich technischi Organisationslösige. Die Site verspricht kei Buechhaltig, kei Stüürberatig und kei Erstellig vo Stüürerklärige.", + en: "Bookkeeping and tax administration portals are exclusively technical organisational solutions. This site promises no bookkeeping, no tax advice and no preparation of tax returns.", + fr: "Les portails de gestion comptable et fiscale sont exclusivement des outils d'organisation technique. Ce site ne promet ni comptabilité, ni conseil fiscal, ni établissement de déclarations.", + pt: "Os portais de gestão contabilística e fiscal são exclusivamente soluções técnicas de organização. Este site não promete contabilidade, aconselhamento fiscal nem elaboração de declarações.", + }, + + cta_h2: { + de: "Nicht sicher, welches Paket passt?", + "de-CH": "Nöd sicher, weles Paket passt?", + en: "Not sure which package fits?", + fr: "Pas sûr de la formule adaptée ?", + pt: "Não sabes que pacote encaixa?", + }, + cta_p: { + de: "Beschreib einfach dein Vorhaben. Wenn ein kleineres Paket reicht, sage ich das — auch wenn das weniger Umsatz bedeutet.", + "de-CH": "Beschriib eifach dis Vorhabe. Wenn es chliners Paket längt, säg i das — au wenn das weniger Umsatz heisst.", + en: "Just describe your project. If a smaller package is enough, I will say so — even if that means less revenue.", + fr: "Décris simplement ton projet. Si une formule plus petite suffit, je le dirai — même si cela signifie moins de chiffre d'affaires.", + pt: "Descreve simplesmente o teu projeto. Se um pacote menor chegar, eu digo-o — mesmo que isso signifique menos faturação.", + }, +}; diff --git a/assets/js/i18n-wd-portfolio.js b/assets/js/i18n-wd-portfolio.js new file mode 100644 index 00000000..dabf4f14 --- /dev/null +++ b/assets/js/i18n-wd-portfolio.js @@ -0,0 +1,164 @@ +/* ===================================================================== + i18n-wd-portfolio.js — Portfolio (Masterplan S.11) + + Inhaltsregeln, die hier bewusst eingehalten sind: + - Keine erfundenen Kundenbewertungen. Auf dieser Seite steht KEIN + einziges Zitat, weil es noch keines gibt, das jemand freigegeben hat. + - Keine fremden Projekte ohne Erlaubnis. Beide gezeigten Seiten sind + eigene Projekte; die Vorschaubilder sind echte Screenshots der + laufenden Seiten vom 22.08.2026, keine Mockups. + - Jede Referenz im gleichen Format: Ausgangslage, Lösung, Ergebnis. + ===================================================================== */ +window.I18N_WD = { + seiten_titel: { + de: "Portfolio — Dogfather Webdesign", + "de-CH": "Portfolio — Dogfather Webdesign", + en: "Portfolio — Dogfather Web Design", + fr: "Portfolio — Dogfather Web Design", + pt: "Portfólio — Dogfather Web Design", + }, + + pf_eyebrow: { de: "Portfolio", "de-CH": "Portfolio", en: "Portfolio", fr: "Portfolio", pt: "Portfólio" }, + pf_h1: { + de: "Zwei Projekte, die man anfassen kann", + "de-CH": "Zwei Projekt, wo mer aalange cha", + en: "Two projects you can actually visit", + fr: "Deux projets que l'on peut réellement visiter", + pt: "Dois projetos que se podem mesmo visitar", + }, + pf_lead: { + de: "Beide Seiten laufen wirklich, unter ihrer eigenen Adresse, auf einem eigenen Server. Die Vorschaubilder sind echte Aufnahmen der laufenden Seiten — keine gezeichneten Entwürfe.", + "de-CH": "Beidi Site laufed würklich, under ihrer eigene Adress, uf eme eigene Server. D Vorschaubilder sind ächti Ufnahme vo de laufende Site — kei zeichneti Entwürf.", + en: "Both sites are genuinely running, at their own address, on their own server. The preview images are real captures of the live sites — not drawn mockups.", + fr: "Les deux sites fonctionnent réellement, à leur propre adresse, sur un serveur dédié. Les aperçus sont de vraies captures des sites en ligne — pas des maquettes dessinées.", + pt: "Ambos os sites estão mesmo no ar, no seu próprio endereço, em servidor próprio. As pré-visualizações são capturas reais dos sites ativos — não são maquetes desenhadas.", + }, + + /* Gemeinsame Beschriftungen — gleiches Format für jede Referenz */ + pf_ausgang: { de: "Ausgangslage", "de-CH": "Uusgangslag", en: "Starting point", fr: "Situation de départ", pt: "Ponto de partida" }, + pf_loesung: { de: "Umgesetzte Lösung", "de-CH": "Umgsetzti Lösig", en: "Solution built", fr: "Solution réalisée", pt: "Solução implementada" }, + pf_ergebnis: { de: "Ergebnis", "de-CH": "Ergebnis", en: "Result", fr: "Résultat", pt: "Resultado" }, + pf_funktionen: { de: "Wichtigste Funktionen", "de-CH": "Wichtigschti Funktione", en: "Key features", fr: "Fonctions clés", pt: "Funcionalidades principais" }, + pf_stil: { de: "Stilrichtung", "de-CH": "Stilrichtig", en: "Visual style", fr: "Style visuel", pt: "Estilo visual" }, + pf_details: { de: "Details ansehen", "de-CH": "Details aaluege", en: "See details", fr: "Voir les détails", pt: "Ver detalhes" }, + pf_ansehen: { de: "Live ansehen", "de-CH": "Live aaluege", en: "View live", fr: "Voir en ligne", pt: "Ver ao vivo" }, + + /* --- Projekt 1: Dogfather Universe --- */ + p1_h2: { de: "Dogfather Universe", "de-CH": "Dogfather Universe", en: "Dogfather Universe", fr: "Dogfather Universe", pt: "Dogfather Universe" }, + p1_alt: { + de: "Startseite von dogfather-universe.com", + "de-CH": "Startsite vo dogfather-universe.com", + en: "Home page of dogfather-universe.com", + fr: "Page d'accueil de dogfather-universe.com", + pt: "Página inicial de dogfather-universe.com", + }, + p1_art: { de: "Umfangreiche Website", "de-CH": "Grossi Website", en: "Large website", fr: "Grand site", pt: "Site extenso" }, + p1_ausgang: { + de: "Drei getrennte Welten — Streaming, eine Community rund um HasiDog und der Manager-Bereich — sollten unter ein Dach, ohne dass Besucher sich verlaufen. Vorher lagen die Inhalte über mehrere Plattformen verstreut und niemand hatte den Überblick.", + "de-CH": "Drü trennti Wälte — Streaming, e Community rund um HasiDog und dr Manager-Bereich — hend under es Dach sölle, ohni dass Bsuecher sich verlaufed. Vorher sind d Inhalt über mehreri Plattforme verstreut gläge und niemert het dr Überblick gha.", + en: "Three separate worlds — streaming, a community around HasiDog, and the manager area — had to live under one roof without visitors getting lost. Previously the content was scattered across several platforms and nobody had an overview.", + fr: "Trois univers distincts — le streaming, une communauté autour de HasiDog et l'espace manager — devaient cohabiter sans que les visiteurs se perdent. Auparavant, les contenus étaient éparpillés sur plusieurs plateformes et personne n'avait de vue d'ensemble.", + pt: "Três mundos separados — streaming, uma comunidade em torno do HasiDog e a área de manager — tinham de caber sob o mesmo teto sem que os visitantes se perdessem. Antes, os conteúdos estavam espalhados por várias plataformas e ninguém tinha visão de conjunto.", + }, + p1_loesung: { + de: "Eine Seite mit drei farblich klar getrennten Welten, gemeinsamer Navigation und durchgängig fünf Sprachen. Dazu ein Verwaltungsbereich, in dem Teammitglieder, Termine, Texte und Bewerbungen ohne Programmierkenntnisse gepflegt werden — und ein Supporter-Abo mit angebundener Zahlung.", + "de-CH": "Ei Site mit drü farblich klar trennte Wälte, gmeinsamer Navigation und durchgängig füf Sprooche. Dezue en Verwaltigsbereich, wo Teammitglieder, Termin, Täxt und Bewerbige ohni Programmierkenntnis pflegt wärded — und es Supporter-Abo mit aabundener Zahlig.", + en: "One site with three clearly colour-separated worlds, shared navigation and five languages throughout. Plus an admin area where team members, dates, texts and applications are maintained without programming knowledge — and a supporter subscription with integrated payment.", + fr: "Un site avec trois univers nettement distingués par la couleur, une navigation commune et cinq langues partout. S'y ajoutent un espace d'administration où membres de l'équipe, dates, textes et candidatures se gèrent sans compétences en programmation — et un abonnement supporter avec paiement intégré.", + pt: "Um site com três mundos claramente separados por cor, navegação partilhada e cinco idiomas em toda a parte. Além disso, uma área de administração onde membros da equipa, datas, textos e candidaturas são geridos sem conhecimentos de programação — e uma subscrição de apoiante com pagamento integrado.", + }, + p1_ergebnis: { + de: "Seit August 2026 öffentlich und im täglichen Einsatz. Inhalte werden vom Team selbst gepflegt, ohne dass jemand Code anfassen muss. Die Seite läuft auf einem eigenen Server statt bei einem Anbieter, der jederzeit die Bedingungen ändern kann.", + "de-CH": "Sit Auguscht 2026 öffentlich und im tägliche Iisatz. Inhalt wärded vom Team sälber pflegt, ohni dass öpper Code aalange muess. D Site lauft uf eme eigene Server statt bi eme Aabieter, wo jederziit d Bedingige ändere cha.", + en: "Public since August 2026 and in daily use. Content is maintained by the team itself without anyone having to touch code. The site runs on its own server rather than with a provider that can change the terms at any time.", + fr: "En ligne depuis août 2026 et utilisé quotidiennement. Les contenus sont gérés par l'équipe elle-même sans que personne ait à toucher au code. Le site tourne sur un serveur dédié plutôt que chez un prestataire pouvant modifier ses conditions à tout moment.", + pt: "Público desde agosto de 2026 e em uso diário. Os conteúdos são geridos pela própria equipa sem ninguém ter de tocar em código. O site corre em servidor próprio em vez de num fornecedor que pode alterar as condições a qualquer momento.", + }, + p1_f1: { de: "Fünf Sprachen, inklusive echtem Schweizerdeutsch", "de-CH": "Füf Sprooche, inklusiv ächtem Schwiizerdütsch", en: "Five languages, including genuine Swiss German", fr: "Cinq langues, dont un véritable suisse allemand", pt: "Cinco idiomas, incluindo suíço-alemão autêntico" }, + p1_f2: { de: "Verwaltungsbereich mit Rollen und Rechten", "de-CH": "Verwaltigsbereich mit Rolle und Rächt", en: "Admin area with roles and permissions", fr: "Espace d'administration avec rôles et droits", pt: "Área de administração com perfis e permissões" }, + p1_f3: { de: "Bewerbungssystem mit Statusverfolgung", "de-CH": "Bewerbigssyschtem mit Statusverfolgig", en: "Application system with status tracking", fr: "Système de candidature avec suivi de statut", pt: "Sistema de candidaturas com acompanhamento de estado" }, + p1_f4: { de: "Supporter-Abo mit Zahlungsanbindung", "de-CH": "Supporter-Abo mit Zahligsaabindig", en: "Supporter subscription with payment integration", fr: "Abonnement supporter avec paiement intégré", pt: "Subscrição de apoiante com pagamento integrado" }, + p1_f5: { de: "Automatische Live-Erkennung des Streams", "de-CH": "Automatischi Live-Erkennig vom Stream", en: "Automatic live detection of the stream", fr: "Détection automatique du direct", pt: "Deteção automática de transmissão em direto" }, + p1_f6: { de: "Als App installierbar", "de-CH": "Als App installierbar", en: "Installable as an app", fr: "Installable comme application", pt: "Instalável como aplicação" }, + p1_stil: { + de: "Dunkel und cinematisch, mit einer eigenen Leitfarbe je Welt.", + "de-CH": "Dunkel und cinematisch, mit ere eigene Leitfarb pro Wält.", + en: "Dark and cinematic, with its own signature colour per world.", + fr: "Sombre et cinématographique, avec une couleur dominante par univers.", + pt: "Escuro e cinematográfico, com uma cor própria para cada mundo.", + }, + + /* --- Projekt 2: Van's DIY --- */ + p2_h2: { de: "Van's DIY & Bastelbedarf", "de-CH": "Van's DIY & Bastelbedarf", en: "Van's DIY & Bastelbedarf", fr: "Van's DIY & Bastelbedarf", pt: "Van's DIY & Bastelbedarf" }, + p2_alt: { + de: "Startseite von vans-diy-bastelbedarf.com", + "de-CH": "Startsite vo vans-diy-bastelbedarf.com", + en: "Home page of vans-diy-bastelbedarf.com", + fr: "Page d'accueil de vans-diy-bastelbedarf.com", + pt: "Página inicial de vans-diy-bastelbedarf.com", + }, + p2_art: { de: "Onlineshop", "de-CH": "Onlineshop", en: "Online shop", fr: "Boutique en ligne", pt: "Loja online" }, + p2_ausgang: { + de: "Handgemachte Häkelwerke, Plushies und Bastelzubehör wurden bis dahin über Nachrichten verkauft: Preis nachfragen, Verfügbarkeit klären, Versand einzeln absprechen. Das kostete pro Bestellung mehr Zeit als das Herstellen mancher Artikel.", + "de-CH": "Handgmachti Häkelwärch, Plushies und Bastelzubehör sind bis dete über Nachrichte verchauft worde: Priis nachefroge, Verfüegbarkeit kläre, Versand einzeln abspräche. Das het pro Bstellig meh Ziit choschtet als s Herstelle vo mängem Artikel.", + en: "Handmade crochet work, plushies and craft supplies were sold via messages until then: ask for the price, clarify availability, arrange shipping individually. That cost more time per order than making some of the items.", + fr: "Les créations au crochet, peluches et fournitures créatives se vendaient jusque-là par messages : demander le prix, vérifier la disponibilité, convenir de l'expédition au cas par cas. Cela coûtait plus de temps par commande que la fabrication de certains articles.", + pt: "Peças de crochet feitas à mão, plushies e material de artesanato eram vendidos por mensagens: perguntar o preço, confirmar a disponibilidade, combinar o envio caso a caso. Isso custava mais tempo por encomenda do que produzir alguns dos artigos.", + }, + p2_loesung: { + de: "Ein vollständiger Shop mit Kategorien, Artikeln samt Varianten, Warenkorb, Gutscheincodes und Versandregeln — und ein Adminbereich, der bewusst so gebaut wurde, dass die Inhaberin ihn ohne Technikkenntnisse bedient. Die Kategorien sind dort standardmäßig zugeklappt, damit die Artikelliste nicht erschlägt.", + "de-CH": "En vollständige Shop mit Kategorie, Artikel samt Variante, Warechorb, Gutscheincodes und Versandregle — und en Adminbereich, wo bewusst so baut worde isch, dass d Inhaberin ihn ohni Technikkenntnis bediene cha. D Kategorie sind dete standardmässig zueklappt, damit d Artikellischte nöd erschloht.", + en: "A complete shop with categories, items including variants, basket, voucher codes and shipping rules — plus an admin area deliberately built so the owner operates it without technical knowledge. Categories there are collapsed by default so the item list is not overwhelming.", + fr: "Une boutique complète avec catégories, articles et variantes, panier, codes promo et règles d'expédition — et un espace d'administration conçu pour que la propriétaire l'utilise sans compétences techniques. Les catégories y sont repliées par défaut afin que la liste d'articles ne submerge pas.", + pt: "Uma loja completa com categorias, artigos e variantes, carrinho, códigos de desconto e regras de envio — e uma área de administração propositadamente feita para que a proprietária a use sem conhecimentos técnicos. As categorias estão recolhidas por defeito para a lista de artigos não ser esmagadora.", + }, + p2_ergebnis: { + de: "Artikel werden selbstständig angelegt und gepflegt, ohne Rückfrage und ohne Wartezeit. Bestellungen laufen strukturiert ein statt als lose Nachrichten. Die Seite läuft auf eigener Domain und eigenem Server.", + "de-CH": "Artikel wärded sälbstständig aagleit und pflegt, ohni Rückfrog und ohni Wartziit. Bstellige laufed strukturiert ii statt als losi Nachrichte. D Site lauft uf eigener Domain und eigenem Server.", + en: "Items are created and maintained independently, without asking and without waiting. Orders come in structured instead of as loose messages. The site runs on its own domain and its own server.", + fr: "Les articles sont créés et gérés en autonomie, sans demande préalable ni attente. Les commandes arrivent structurées au lieu de messages épars. Le site tourne sur son propre domaine et son propre serveur.", + pt: "Os artigos são criados e geridos de forma autónoma, sem perguntar e sem esperar. As encomendas chegam estruturadas em vez de mensagens soltas. O site corre em domínio e servidor próprios.", + }, + p2_f1: { de: "Kategorien, Artikel und Varianten", "de-CH": "Kategorie, Artikel und Variante", en: "Categories, items and variants", fr: "Catégories, articles et variantes", pt: "Categorias, artigos e variantes" }, + p2_f2: { de: "Warenkorb und Kasse, auf dem Handy geprüft", "de-CH": "Warechorb und Kasse, uf em Handy prüeft", en: "Basket and checkout, tested on mobile", fr: "Panier et paiement, testés sur mobile", pt: "Carrinho e finalização, testados em telemóvel" }, + p2_f3: { de: "Gutscheincodes und Versandregeln", "de-CH": "Gutscheincodes und Versandregle", en: "Voucher codes and shipping rules", fr: "Codes promo et règles d'expédition", pt: "Códigos de desconto e regras de envio" }, + p2_f4: { de: "Adminbereich für die eigenständige Artikelpflege", "de-CH": "Adminbereich für d sälbstständigi Artikelpflege", en: "Admin area for maintaining items independently", fr: "Espace d'administration pour gérer les articles en autonomie", pt: "Área de administração para gerir artigos de forma autónoma" }, + p2_f5: { de: "Mehrsprachig", "de-CH": "Mehrsprachig", en: "Multilingual", fr: "Multilingue", pt: "Multilíngue" }, + p2_stil: { + de: "Dunkel mit warmen Violett- und Rosétönen, passend zum handgemachten Sortiment.", + "de-CH": "Dunkel mit warme Violett- und Rosétöne, passend zum handgmachte Sortimänt.", + en: "Dark with warm violet and rosé tones, matching the handmade range.", + fr: "Sombre avec des tons violets et rosés chauds, en accord avec l'assortiment fait main.", + pt: "Escuro com tons quentes de violeta e rosé, a condizer com a gama feita à mão.", + }, + + pf_regeln_titel: { + de: "Was hier bewusst fehlt", + "de-CH": "Was do bewusst fählt", + en: "What is deliberately missing here", + fr: "Ce qui manque ici volontairement", + pt: "O que falta aqui de propósito", + }, + pf_regeln_text: { + de: "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 — und erfundene Bewertungen kommen hier grundsätzlich nicht vor. Sobald echte da sind, stehen sie hier. Vorher lieber eine leere Stelle als eine erfundene.", + "de-CH": "Es stoht kes einzigs Kundezitat uf dere Site. Nöd, wil s kei zfriedene Chunde gäb, sondern wil no niemert es Zitat gschriebe und freigäh het — und erfundeni Bewärtige chömed do grundsätzlich nöd vor. Sobald ächti do sind, stöhnd si do. Vorher lieber e läeri Stell als e erfundeni.", + en: "There is not a single customer quote on this page. Not because there are no satisfied customers, but because nobody has written and approved a quote yet — and invented reviews do not appear here on principle. As soon as real ones exist, they will be here. Until then, an empty spot is preferable to a fabricated one.", + fr: "Aucune citation client ne figure sur cette page. Non pas faute de clients satisfaits, mais parce que personne n'a encore rédigé et validé de témoignage — et les avis inventés n'ont pas leur place ici, par principe. Dès qu'il y en aura de véritables, ils seront ici. En attendant, mieux vaut un espace vide qu'un faux.", + pt: "Não há uma única citação de cliente nesta página. Não por falta de clientes satisfeitos, mas porque ainda ninguém escreveu e aprovou um depoimento — e avaliações inventadas não aparecem aqui por princípio. Assim que existirem reais, estarão aqui. Até lá, prefiro um espaço vazio a um inventado.", + }, + + pf_cta_h2: { + de: "Soll deins das dritte sein?", + "de-CH": "Söll dis s dritte si?", + en: "Shall yours be the third?", + fr: "Le tien sera-t-il le troisième ?", + pt: "O teu vai ser o terceiro?", + }, + pf_cta_p: { + de: "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.", + "de-CH": "Ob dis Projekt do spöter uftaucht, entscheidsch uusschliesslich du — d Ufnahm is Portfolio isch vo dr Veröffentlichig vo dinere Site trennt und bruucht dini uusdrücklichi Erlaubnis.", + en: "Whether your project appears here later is entirely your decision — inclusion in the portfolio is separate from publishing your site and requires your explicit permission.", + fr: "Que ton projet apparaisse ici plus tard ne dépend que de toi — l'ajout au portfolio est indépendant de la mise en ligne de ton site et requiert ton autorisation explicite.", + pt: "Se o teu projeto aparece aqui mais tarde é decisão exclusivamente tua — a inclusão no portfólio é separada da publicação do teu site e exige a tua autorização explícita.", + }, +}; diff --git a/assets/js/i18n-wd-preise.js b/assets/js/i18n-wd-preise.js new file mode 100644 index 00000000..047fc82d --- /dev/null +++ b/assets/js/i18n-wd-preise.js @@ -0,0 +1,140 @@ +/* ===================================================================== + i18n-wd-preise.js — Preise & Zeit (Masterplan S.8) + Die konkreten Beträge und Zeitrahmen stehen NICHT hier, sondern in + wd-core.js — siehe dort den Abschnitt "EINZIGE QUELLE DER WAHRHEIT". + Hier nur die Texte drumherum. + ===================================================================== */ +window.I18N_WD = { + seiten_titel: { + de: "Preise & Zeit — Dogfather Webdesign", + "de-CH": "Priis & Ziit — Dogfather Webdesign", + en: "Pricing & time — Dogfather Web Design", + fr: "Tarifs & délais — Dogfather Web Design", + pt: "Preços & prazos — Dogfather Web Design", + }, + + pr_eyebrow: { de: "Preise & Zeit", "de-CH": "Priis & Ziit", en: "Pricing & time", fr: "Tarifs & délais", pt: "Preços & prazos" }, + pr_h1: { + de: "Was es kostet und wie lange es dauert", + "de-CH": "Was es choschtet und wie lang s duuret", + en: "What it costs and how long it takes", + fr: "Combien ça coûte et combien de temps ça prend", + pt: "Quanto custa e quanto tempo demora", + }, + pr_lead: { + de: "Alle Werte sind transparente Einstiegspunkte. Personalisierung, Funktionsumfang, Materialien und zusätzliche Änderungswünsche können Preis und Dauer verändern.", + "de-CH": "Alli Wärt sind transparänti Iistiegspünkt. Personalisierig, Funktionsumfang, Material und zuesätzlichi Änderigswünsch chönd Priis und Duur verändere.", + en: "All figures are transparent starting points. Personalisation, feature scope, materials and additional change requests can alter price and duration.", + fr: "Tous les montants sont des points de départ transparents. La personnalisation, l'étendue des fonctions, les matériaux et les demandes de modification supplémentaires peuvent modifier le prix et la durée.", + pt: "Todos os valores são pontos de partida transparentes. Personalização, âmbito de funcionalidades, materiais e pedidos de alteração adicionais podem alterar preço e duração.", + }, + + pr_tabelle_titel: { + de: "Alles auf einen Blick", + "de-CH": "Alles uf ei Blick", + en: "Everything at a glance", + fr: "Tout en un coup d'œil", + pt: "Tudo num relance", + }, + pr_sp_paket: { de: "Paket", "de-CH": "Paket", en: "Package", fr: "Formule", pt: "Pacote" }, + pr_sp_preis: { de: "Einstiegspreis", "de-CH": "Iistiegspriis", en: "Starting price", fr: "Prix de départ", pt: "Preço inicial" }, + pr_sp_dauer: { de: "Zeitrahmen", "de-CH": "Ziitrahme", en: "Timeframe", fr: "Délai", pt: "Prazo" }, + pr_sp_fuer: { de: "Gedacht für", "de-CH": "Dänkt für", en: "Intended for", fr: "Destiné à", pt: "Destinado a" }, + + pr_kurz_onepager: { de: "Eine Person, ein Angebot, eine Aktion", "de-CH": "Ei Person, es Aagebot, ei Aktion", en: "One person, one offer, one campaign", fr: "Une personne, une offre, une action", pt: "Uma pessoa, uma oferta, uma ação" }, + pr_kurz_website: { de: "Firmen, Teams, mehrere Themen", "de-CH": "Firme, Teams, mehreri Thema", en: "Companies, teams, several topics", fr: "Entreprises, équipes, plusieurs thèmes", pt: "Empresas, equipas, vários temas" }, + pr_kurz_shop: { de: "Wer wirklich online verkauft", "de-CH": "Wär würklich online verchauft", en: "Anyone genuinely selling online", fr: "Ceux qui vendent vraiment en ligne", pt: "Quem vende mesmo online" }, + pr_kurz_verwaltung: { de: "Belege und Zahlen organisieren", "de-CH": "Bäläg und Zahle organisiere", en: "Organising receipts and figures", fr: "Organiser justificatifs et chiffres", pt: "Organizar comprovativos e números" }, + pr_kurz_betreuung: { de: "Nach der Übergabe weiterlaufen lassen", "de-CH": "Nach dr Übergab wiiterlaufe lo", en: "Keeping things running after handover", fr: "Faire vivre le site après la remise", pt: "Manter tudo a funcionar após a entrega" }, + + pr_was_h2: { + de: "Was den Preis bewegt", + "de-CH": "Was dä Priis bewegt", + en: "What moves the price", + fr: "Ce qui fait bouger le prix", + pt: "O que faz mexer o preço", + }, + pr_hoch_h3: { de: "Macht es teurer und länger", "de-CH": "Macht s tüürer und länger", en: "Makes it more expensive and longer", fr: "Rend le projet plus cher et plus long", pt: "Torna mais caro e mais demorado" }, + pr_hoch_1: { de: "Viele Unterseiten oder viele Produkte", "de-CH": "Viili Undersite oder viili Produkt", en: "Many sub-pages or many products", fr: "Beaucoup de sous-pages ou de produits", pt: "Muitas subpáginas ou muitos produtos" }, + pr_hoch_2: { de: "Zusätzliche Sprachen", "de-CH": "Zuesätzlichi Sprooche", en: "Additional languages", fr: "Langues supplémentaires", pt: "Idiomas adicionais" }, + pr_hoch_3: { de: "Texte und Bilder müssen erst erstellt werden", "de-CH": "Täxt und Bilder mönd zerscht gmacht wärde", en: "Texts and images still have to be created", fr: "Les textes et images doivent encore être créés", pt: "Textos e imagens ainda têm de ser criados" }, + pr_hoch_4: { de: "Anbindung an fremde Systeme (Kasse, Kalender, Warenwirtschaft)", "de-CH": "Aabindig a frömdi Syschtem (Kasse, Kaländer, Warewirtschaft)", en: "Connections to third-party systems (checkout, calendar, inventory)", fr: "Connexions à des systèmes tiers (caisse, agenda, gestion des stocks)", pt: "Ligações a sistemas externos (caixa, calendário, gestão de stock)" }, + pr_hoch_5: { de: "Mehr Feedbackrunden als vereinbart", "de-CH": "Meh Feedbackrunde als vereinbart", en: "More feedback rounds than agreed", fr: "Plus de tours de retours que convenu", pt: "Mais rondas de feedback do que o acordado" }, + + pr_runter_h3: { de: "Macht es günstiger und schneller", "de-CH": "Macht s günschtiger und schnäller", en: "Makes it cheaper and faster", fr: "Rend le projet moins cher et plus rapide", pt: "Torna mais barato e mais rápido" }, + pr_runter_1: { de: "Texte, Logo und Bilder liegen fertig vor", "de-CH": "Täxt, Logo und Bilder sind fertig do", en: "Texts, logo and images are ready", fr: "Textes, logo et images sont prêts", pt: "Textos, logótipo e imagens já prontos" }, + pr_runter_2: { de: "Klare Vorstellung vom Ziel der Seite", "de-CH": "Klari Vorstellig vom Ziel vo dr Site", en: "A clear idea of what the site should achieve", fr: "Une idée claire de l'objectif du site", pt: "Uma ideia clara do objetivo do site" }, + pr_runter_3: { de: "Eine Person entscheidet, nicht ein Gremium", "de-CH": "Ei Person entscheidet, nöd es Gremium", en: "One person decides, not a committee", fr: "Une personne décide, pas un comité", pt: "Uma pessoa decide, não um comité" }, + pr_runter_4: { de: "Rückmeldungen gebündelt statt tröpfchenweise", "de-CH": "Rückmäldige bündlet statt tröpfliwiis", en: "Feedback bundled instead of trickling in", fr: "Des retours groupés plutôt qu'au compte-gouttes", pt: "Feedback agrupado em vez de aos poucos" }, + pr_runter_5: { de: "Bestehende Domain und bestehendes Hosting", "de-CH": "Bestehendi Domain und bestehends Hosting", en: "An existing domain and existing hosting", fr: "Un domaine et un hébergement existants", pt: "Domínio e alojamento já existentes" }, + + pr_zahlung_h2: { + de: "Wie bezahlt wird", + "de-CH": "Wie zahlt wird", + en: "How payment works", + fr: "Comment se passe le paiement", + pt: "Como se paga", + }, + pr_z1_h3: { de: "1. Angebot", "de-CH": "1. Aagebot", en: "1. Quote", fr: "1. Devis", pt: "1. Orçamento" }, + pr_z1_p: { + de: "Nach dem Briefing bekommst du Preis, Umfang und Zeitrahmen schriftlich. Bis dahin entstehen dir keine Kosten.", + "de-CH": "Nach em Briefing überchunnsch Priis, Umfang und Ziitrahme schriftlich. Bis dete entstöhnd dir kei Choschte.", + en: "After the briefing you receive price, scope and timeframe in writing. Up to that point you incur no costs.", + fr: "Après le briefing, tu reçois le prix, l'étendue et le délai par écrit. Jusque-là, aucun frais pour toi.", + pt: "Após o briefing recebes preço, âmbito e prazo por escrito. Até aí não tens custos.", + }, + pr_z2_h3: { de: "2. Anzahlung 30 %", "de-CH": "2. Aazahlig 30 %", en: "2. Deposit 30 %", fr: "2. Acompte 30 %", pt: "2. Sinal 30 %" }, + pr_z2_p: { + de: "Mit der Annahme des Angebots und dem Eingang der Anzahlung wird dein Zeitfenster fest reserviert. Erst dann beginnt die Arbeit.", + "de-CH": "Mit dr Aanahm vom Aagebot und em Iigang vo dr Aazahlig wird dis Ziitfenschter fescht reserviert. Erscht denn foht d Arbet a.", + en: "Accepting the quote and the arrival of the deposit firmly reserve your time slot. Only then does work begin.", + fr: "L'acceptation du devis et la réception de l'acompte réservent fermement ton créneau. Le travail commence seulement ensuite.", + pt: "A aceitação do orçamento e a entrada do sinal reservam firmemente a tua janela. Só então começa o trabalho.", + }, + pr_z3_h3: { de: "3. Restbetrag", "de-CH": "3. Rescht", en: "3. Remaining amount", fr: "3. Solde", pt: "3. Valor restante" }, + pr_z3_p: { + de: "Der Rest wird nach deiner Abnahme fällig, vor der Veröffentlichung. Die Nutzungsrechte gehen mit der vollständigen Bezahlung an dich über.", + "de-CH": "Dr Rescht wird nach dinere Abnahm fällig, vor dr Veröffentlichig. D Nutzigsrächt göhnd mit dr vollständige Zahlig a dich über.", + en: "The remainder is due after your acceptance, before publication. Usage rights transfer to you upon full payment.", + fr: "Le solde est dû après ta validation, avant la mise en ligne. Les droits d'utilisation te sont transférés au paiement intégral.", + pt: "O restante é devido após a tua aceitação, antes da publicação. Os direitos de utilização passam para ti com o pagamento integral.", + }, + pr_z4_h3: { de: "Betreuung", "de-CH": "Betreuig", en: "Support", fr: "Suivi", pt: "Acompanhamento" }, + pr_z4_p: { + de: "Läuft monatlich und ist jederzeit zum Monatsende kündbar. Keine Mindestlaufzeit, keine automatische Verlängerung um ein ganzes Jahr.", + "de-CH": "Lauft monetlich und isch jederziit uf s Monetsänd kündbar. Kei Mindeschtlaufziit, kei automatischi Verlängerig um es ganzes Jahr.", + en: "Runs monthly and can be cancelled at any time to the end of the month. No minimum term, no automatic renewal for a whole year.", + fr: "Mensuel et résiliable à tout moment pour la fin du mois. Pas de durée minimale, pas de reconduction automatique d'un an.", + pt: "É mensal e cancelável a qualquer momento para o fim do mês. Sem prazo mínimo, sem renovação automática por um ano inteiro.", + }, + + pr_keine_zusage_titel: { + de: "Keine automatische Preiszusage", + "de-CH": "Kei automatischi Priiszuesag", + en: "No automatic price commitment", + fr: "Aucun engagement de prix automatique", + pt: "Sem compromisso automático de preço", + }, + pr_keine_zusage_text: { + de: "Die Angaben auf dieser Seite sind Richtwerte, kein Vertrag. Auch das Anfrageformular erzeugt keine verbindliche Zusage. Der Endpreis entsteht ausschließlich durch ein schriftliches Angebot nach Prüfung des tatsächlichen Umfangs.", + "de-CH": "D Aagabe uf dere Site sind Richtwärt, kein Vertrag. Au s Aafrogformular macht kei verbindlichi Zuesag. Dr Ändpriis entstoht uusschliesslich dur es schriftlichs Aagebot nach Prüefig vom tatsächliche Umfang.", + en: "The figures on this page are guide values, not a contract. The enquiry form does not create a binding commitment either. The final price arises exclusively from a written quote after the actual scope has been reviewed.", + fr: "Les indications de cette page sont des valeurs indicatives, pas un contrat. Le formulaire de demande ne crée pas non plus d'engagement ferme. Le prix final résulte exclusivement d'un devis écrit après examen de l'étendue réelle.", + pt: "Os valores nesta página são indicativos, não um contrato. O formulário de pedido também não cria compromisso vinculativo. O preço final resulta exclusivamente de um orçamento escrito após análise do âmbito real.", + }, + + pr_cta_h2: { + de: "Passt das zu deinem Budget?", + "de-CH": "Passt das zu dim Budget?", + en: "Does that fit your budget?", + fr: "Est-ce compatible avec ton budget ?", + pt: "Isto encaixa no teu orçamento?", + }, + pr_cta_p: { + de: "Sag im Formular einfach, welcher Rahmen realistisch ist. Wenn es nicht passt, sage ich das offen — statt ein Angebot zu schreiben, das nachher niemand bezahlen will.", + "de-CH": "Säg im Formular eifach, wele Rahme realistisch isch. Wenn s nöd passt, säg i das offe — statt es Aagebot z schriibe, wo nachher niemert zahle will.", + en: "Just state in the form what range is realistic. If it doesn't fit, I'll say so openly — instead of writing a quote nobody wants to pay afterwards.", + fr: "Indique simplement dans le formulaire la fourchette réaliste. Si cela ne convient pas, je le dirai franchement — plutôt que d'écrire un devis que personne ne voudra payer.", + pt: "Diz simplesmente no formulário que intervalo é realista. Se não encaixar, digo-o abertamente — em vez de escrever um orçamento que depois ninguém quer pagar.", + }, +}; diff --git a/assets/js/i18n-wd-ueber.js b/assets/js/i18n-wd-ueber.js new file mode 100644 index 00000000..a87d5de2 --- /dev/null +++ b/assets/js/i18n-wd-ueber.js @@ -0,0 +1,144 @@ +/* ===================================================================== + i18n-wd-ueber.js — Über Dogfather (Masterplan S.5, Punkt 06) + Persönlichkeit, Erfahrung, Arbeitsweise, Anspruch, direkte Betreuung. + + Bewusst KEINE bürgerlichen Daten im Fließtext: öffentlich tritt nur der + Künstlername auf (Regel aus DogiHompage/CLAUDE.md). Die vollständigen + Angaben stehen dort, wo sie hingehören — im Impressum. + ===================================================================== */ +window.I18N_WD = { + seiten_titel: { + de: "Über Dogfather — Dogfather Webdesign", + "de-CH": "Über dä Dogfather — Dogfather Webdesign", + en: "About Dogfather — Dogfather Web Design", + fr: "À propos de Dogfather — Dogfather Web Design", + pt: "Sobre o Dogfather — Dogfather Web Design", + }, + + ue_eyebrow: { de: "Über Dogfather", "de-CH": "Über dä Dogfather", en: "About Dogfather", fr: "À propos de Dogfather", pt: "Sobre o Dogfather" }, + ue_h1: { + de: "Wer hier eigentlich baut", + "de-CH": "Wär do eigentlich baut", + en: "Who actually builds this", + fr: "Qui construit réellement", + pt: "Quem constrói isto de facto", + }, + ue_lead: { + de: "Keine Agentur, kein Callcenter, keine Ticketnummer. Eine Person, die dein Projekt von der ersten Nachricht bis zur Übergabe begleitet — und die danach noch erreichbar ist.", + "de-CH": "Kei Agentur, kes Callcenter, kei Ticketnummere. Ei Person, wo dis Projekt vo dr erschte Nachricht bis zur Übergab begleitet — und wo dernoch no erreichbar isch.", + en: "No agency, no call centre, no ticket number. One person who accompanies your project from the first message to handover — and who is still reachable afterwards.", + fr: "Pas d'agence, pas de centre d'appels, pas de numéro de ticket. Une personne qui accompagne ton projet du premier message à la remise — et qui reste joignable ensuite.", + pt: "Sem agência, sem call center, sem número de bilhete. Uma pessoa que acompanha o teu projeto desde a primeira mensagem até à entrega — e que continua contactável depois.", + }, + ue_foto_alt: { de: "Dogfather", "de-CH": "Dogfather", en: "Dogfather", fr: "Dogfather", pt: "Dogfather" }, + + ue_text1: { + de: "Dogfather ist der Name, unter dem ich seit Jahren im Netz unterwegs bin — als Streamer, als Teil einer Community und mittlerweile auch als jemand, der Webseiten baut. Das eine ist aus dem anderen entstanden: Irgendwann brauchte das eigene Projekt eine richtige Seite, dann brauchte jemand aus dem Umfeld eine, dann noch jemand.", + "de-CH": "Dogfather isch dr Name, under dem i sit Jahre im Netz underwägs bi — als Streamer, als Teil vo ere Community und mittlerwiil au als öpper, wo Websites baut. S eint isch us em andere entstande: Irgendwenn het s eigene Projekt e richtigi Site bruucht, denn het öpper us em Umfäld eini bruucht, denn no öpper.", + en: "Dogfather is the name I have been going by online for years — as a streamer, as part of a community, and by now also as someone who builds websites. One grew out of the other: at some point my own project needed a proper site, then someone around me needed one, then someone else.", + fr: "Dogfather est le nom sous lequel je suis présent en ligne depuis des années — comme streamer, comme membre d'une communauté, et désormais aussi comme personne qui construit des sites. L'un est né de l'autre : à un moment, mon propre projet a eu besoin d'un vrai site, puis quelqu'un de mon entourage, puis un autre.", + pt: "Dogfather é o nome com que ando na internet há anos — como streamer, como parte de uma comunidade e, entretanto, também como alguém que constrói sites. Uma coisa nasceu da outra: a certa altura o meu próprio projeto precisou de um site a sério, depois alguém à minha volta precisou de um, depois outra pessoa.", + }, + ue_text2: { + de: "Dadurch sind die Seiten hier nicht am Reißbrett entstanden, sondern an echten Problemen: Eine Shop-Inhaberin, die ihre Artikel selbst pflegen können muss, ohne Angst etwas kaputtzumachen. Ein Team, das seine eigenen Inhalte ändern will, ohne jedes Mal jemanden zu fragen. Genau daran messe ich, ob eine Seite gut ist — nicht daran, wie sie auf einem Werbebild aussieht.", + "de-CH": "Dedurch sind d Site do nöd am Riissbrätt entstande, sondern a ächte Probläm: E Shop-Inhaberin, wo ihri Artikel sälber pflege chöne muess, ohni Angscht öppis kaputt z mache. Es Team, wo sini eigene Inhalt ändere will, ohni jedes Mal öpper z froge. Gnau dra mäss i, ob e Site guet isch — nöd dra, wie si uf eme Werbebild uusgseht.", + en: "As a result the sites here were not conceived at a drawing board but on real problems: a shop owner who has to be able to maintain her own items without fear of breaking something. A team that wants to change its own content without asking someone every time. That is exactly how I judge whether a site is good — not by how it looks in a promo image.", + fr: "De ce fait, les sites ici ne sont pas nés sur une planche à dessin mais de problèmes réels : une commerçante qui doit pouvoir gérer ses articles elle-même sans craindre de tout casser. Une équipe qui veut modifier ses contenus sans devoir demander à chaque fois. C'est précisément à cela que je juge la qualité d'un site — pas à son allure sur une image promotionnelle.", + pt: "Por isso, os sites aqui não nasceram numa prancheta, mas de problemas reais: uma dona de loja que tem de conseguir gerir os seus artigos sem medo de estragar algo. Uma equipa que quer alterar os seus conteúdos sem ter de perguntar sempre a alguém. É exatamente por aí que avalio se um site é bom — não pelo aspeto numa imagem publicitária.", + }, + + ue_werte_h2: { + de: "Wie ich arbeite", + "de-CH": "Wie ich schaffe", + en: "How I work", + fr: "Comment je travaille", + pt: "Como trabalho", + }, + ue_w1_h3: { de: "Ehrlich vor gefällig", "de-CH": "Ehrlich vor gfällig", en: "Honest before agreeable", fr: "Honnête plutôt que complaisant", pt: "Honesto antes de agradável" }, + ue_w1_p: { + de: "Wenn ein kleineres Paket reicht, sage ich das — auch wenn ich damit weniger verdiene. Wenn etwas technisch nicht sinnvoll ist, sage ich das vorher, nicht wenn die Anzahlung schon da ist.", + "de-CH": "Wenn es chliners Paket längt, säg i das — au wenn i demit weniger verdiene. Wenn öppis technisch nöd sinnvoll isch, säg i das vorher, nöd wenn d Aazahlig scho do isch.", + en: "If a smaller package is enough, I say so — even if I earn less. If something does not make technical sense, I say so up front, not once the deposit has arrived.", + fr: "Si une formule plus petite suffit, je le dis — même si je gagne moins. Si quelque chose n'a pas de sens techniquement, je le dis avant, pas une fois l'acompte encaissé.", + pt: "Se um pacote menor chegar, digo-o — mesmo ganhando menos. Se algo não faz sentido tecnicamente, digo-o antes, não depois de o sinal ter chegado.", + }, + ue_w2_h3: { de: "Handy zuerst", "de-CH": "S Handy zerscht", en: "Mobile first", fr: "Le mobile d'abord", pt: "Primeiro o telemóvel" }, + ue_w2_p: { + de: "Die meisten Besucher kommen mit dem Handy. Deshalb wird dort zuerst geprüft, nicht zuletzt — und zwar auf echten Bildschirmgrößen, nicht nur in einem verkleinerten Fenster am Computer.", + "de-CH": "Die meischte Bsuecher chömed mit em Handy. Drum wird dete zerscht prüeft, nöd zletscht — und zwar uf ächte Bildschirmgrössi, nöd nur i eme verchlinerte Fänschter am Computer.", + en: "Most visitors come on a phone. So that is where I check first, not last — and at real screen sizes, not just in a shrunken desktop window.", + fr: "La plupart des visiteurs viennent sur mobile. C'est donc là que je vérifie en premier, pas en dernier — et à des tailles d'écran réelles, pas seulement dans une fenêtre réduite sur ordinateur.", + pt: "A maioria dos visitantes chega pelo telemóvel. Por isso é aí que verifico primeiro, não por último — e em tamanhos de ecrã reais, não apenas numa janela reduzida no computador.", + }, + ue_w3_h3: { de: "Fertig heißt fertig", "de-CH": "Fertig heisst fertig", en: "Done means done", fr: "Terminé veut dire terminé", pt: "Pronto significa pronto" }, + ue_w3_p: { + de: "Keine halb fertigen Unterseiten, keine Platzhalter und keine Links, die ins Leere führen. Eine Seite gilt erst als fertig, wenn jedes Formular, jeder Zugang und jeder Fehlerfall wirklich durchgespielt wurde.", + "de-CH": "Kei halb fertigi Undersite, kei Platzhalter und kei Links, wo is Läre füehred. E Site gilt erscht als fertig, wenn jedes Formular, jede Zuegang und jede Fählerfall würklich durespielt worde isch.", + en: "No half-finished sub-pages, no placeholders and no links that lead nowhere. A site only counts as finished once every form, every login and every error case has genuinely been played through.", + fr: "Pas de sous-pages à moitié faites, pas de contenus provisoires, pas de liens qui ne mènent nulle part. Un site n'est considéré comme terminé qu'une fois chaque formulaire, chaque accès et chaque cas d'erreur réellement testés.", + pt: "Sem subpáginas meio feitas, sem marcadores de posição e sem ligações que não levam a lado nenhum. Um site só conta como terminado depois de cada formulário, cada acesso e cada caso de erro terem sido realmente testados.", + }, + ue_w4_h3: { de: "Augenschonend", "de-CH": "Augeschonend", en: "Easy on the eyes", fr: "Reposant pour les yeux", pt: "Suave para os olhos" }, + ue_w4_p: { + de: "Dunkel, kontraststark genug zum Lesen, aber ohne grelle Neonfarben und ohne flackernde Effekte. Wer in den Systemeinstellungen weniger Bewegung wünscht, bekommt sie auch nicht.", + "de-CH": "Dunkel, kontrastriich gnueg zum Läse, aber ohni grelli Neonfarbe und ohni flackerndi Effäkt. Wär i de Syschtemiistellige weniger Bewegig wünscht, überchunnt si au nöd.", + en: "Dark, with enough contrast to read comfortably, but without glaring neon colours and without flickering effects. Anyone who asks for less motion in their system settings gets less motion.", + fr: "Sombre, avec assez de contraste pour lire confortablement, mais sans néons criards ni effets clignotants. Qui demande moins d'animations dans ses réglages système en obtient moins.", + pt: "Escuro, com contraste suficiente para ler bem, mas sem cores néon berrantes e sem efeitos a piscar. Quem pede menos movimento nas definições do sistema recebe menos movimento.", + }, + + ue_erfahrung_h2: { + de: "Woran ich das gelernt habe", + "de-CH": "Wo dra ich das glernt han", + en: "Where I learned this", + fr: "Où j'ai appris tout cela", + pt: "Onde aprendi isto", + }, + ue_e1_h3: { de: "Dogfather Universe", "de-CH": "Dogfather Universe", en: "Dogfather Universe", fr: "Dogfather Universe", pt: "Dogfather Universe" }, + ue_e1_p: { + de: "Eine Plattform mit fünf Sprachen, Teamseiten, Bewerbungssystem, Supporter-Abo mit Zahlungsanbindung und einem Verwaltungsbereich, in dem Inhalte ohne Programmierkenntnisse gepflegt werden. Öffentlich seit August 2026, auf einem eigenen Server.", + "de-CH": "E Plattform mit füf Sprooche, Teamsite, Bewerbigssyschtem, Supporter-Abo mit Zahligsaabindig und eme Verwaltigsbereich, wo Inhalt ohni Programmierkenntnis pflegt wärded. Öffentlich sit Auguscht 2026, uf eme eigene Server.", + en: "A platform with five languages, team pages, an application system, a supporter subscription with payment integration and an admin area where content is maintained without programming knowledge. Public since August 2026, on its own server.", + fr: "Une plateforme en cinq langues, avec pages d'équipe, système de candidature, abonnement supporter relié au paiement et espace d'administration où les contenus se gèrent sans compétences en programmation. En ligne depuis août 2026, sur un serveur dédié.", + pt: "Uma plataforma em cinco idiomas, com páginas de equipa, sistema de candidaturas, subscrição de apoiante com pagamento integrado e uma área de administração onde os conteúdos são geridos sem conhecimentos de programação. Público desde agosto de 2026, em servidor próprio.", + }, + ue_e2_h3: { de: "Van's DIY & Bastelbedarf", "de-CH": "Van's DIY & Bastelbedarf", en: "Van's DIY & Bastelbedarf", fr: "Van's DIY & Bastelbedarf", pt: "Van's DIY & Bastelbedarf" }, + ue_e2_p: { + de: "Ein vollständiger Onlineshop mit Warenkorb, Gutscheincodes und Versandabläufen — und einem Adminbereich, der so gebaut ist, dass die Inhaberin ihn ohne Technikkenntnisse bedient. Genau daran habe ich gelernt, wie viel Aufwand in „einfach zu bedienen“ steckt.", + "de-CH": "En vollständige Onlineshop mit Warechorb, Gutscheincodes und Versandabläuf — und eme Adminbereich, wo so baut isch, dass d Inhaberin ihn ohni Technikkenntnis bediene cha. Gnau dra han i glernt, wie viil Ufwand i „eifach z bediene“ steckt.", + en: "A complete online shop with basket, voucher codes and shipping flows — and an admin area built so the owner can operate it without technical knowledge. That is exactly where I learned how much work goes into “easy to use”.", + fr: "Une boutique en ligne complète avec panier, codes promo et flux d'expédition — et un espace d'administration conçu pour que la propriétaire l'utilise sans compétences techniques. C'est précisément là que j'ai appris tout le travail que représente « simple à utiliser ».", + pt: "Uma loja online completa com carrinho, códigos de desconto e fluxos de envio — e uma área de administração feita para que a proprietária a use sem conhecimentos técnicos. Foi exatamente aí que aprendi quanto trabalho está por trás de “fácil de usar”.", + }, + ue_projekte: { de: "Projekte ansehen", "de-CH": "Projekt aaluege", en: "View projects", fr: "Voir les projets", pt: "Ver projetos" }, + + ue_team_titel: { + de: "Nicht allein, aber verantwortlich", + "de-CH": "Nöd elei, aber verantwortlich", + en: "Not alone, but accountable", + fr: "Pas seul, mais responsable", + pt: "Não sozinho, mas responsável", + }, + ue_team_text: { + de: "Bei Rückfragen, Gegenlesen und der Abnahme hilft VanVan mit — sie hat auf diese Vorabversion dieselben Rechte wie ich. Deine Ansprechperson für dein Projekt bleibe trotzdem ich, damit du nie erklären musst, was du letzte Woche schon erklärt hast.", + "de-CH": "Bi Rückfroge, Gägeläse und dr Abnahm hilft d VanVan mit — si het uf die Vorabversion diesälbe Rächt wie ich. Dini Aaspröchperson für dis Projekt blib trotzdem ich, damit du nie erkläre muesch, was du letschti Wuche scho erklärt hesch.", + en: "VanVan helps with follow-up questions, proofreading and sign-off — she has exactly the same rights to this preview as I do. Your contact person for your project remains me, so you never have to explain again what you already explained last week.", + fr: "VanVan aide pour les questions, la relecture et la validation — elle a exactement les mêmes droits sur cette version préliminaire que moi. Ton interlocuteur pour ton projet reste moi, pour que tu n'aies jamais à réexpliquer ce que tu as déjà expliqué la semaine dernière.", + pt: "A VanVan ajuda com perguntas de seguimento, revisão e aprovação — tem exatamente os mesmos direitos nesta versão prévia que eu. A tua pessoa de contacto para o teu projeto continuo a ser eu, para que nunca tenhas de explicar de novo o que já explicaste na semana passada.", + }, + + ue_cta_h2: { + de: "Klingt das nach jemandem, mit dem du arbeiten willst?", + "de-CH": "Tönt das nach öpperem, mit dem du schaffe wottsch?", + en: "Does that sound like someone you want to work with?", + fr: "Cela ressemble-t-il à quelqu'un avec qui tu veux travailler ?", + pt: "Isto soa a alguém com quem queres trabalhar?", + }, + ue_cta_p: { + de: "Dann erzähl mir von deinem Vorhaben. Das Formular dauert ein paar Minuten und verpflichtet dich zu nichts.", + "de-CH": "Denn verzell mer vo dim Vorhabe. S Formular duuret e paar Minute und verpflichtet dich zu nüt.", + en: "Then tell me about your project. The form takes a few minutes and commits you to nothing.", + fr: "Alors parle-moi de ton projet. Le formulaire prend quelques minutes et ne t'engage à rien.", + pt: "Então conta-me o teu projeto. O formulário demora alguns minutos e não te compromete a nada.", + }, +}; diff --git a/assets/js/i18n-wd-zugang.js b/assets/js/i18n-wd-zugang.js new file mode 100644 index 00000000..00519be0 --- /dev/null +++ b/assets/js/i18n-wd-zugang.js @@ -0,0 +1,108 @@ +/* ===================================================================== + i18n-wd-zugang.js — Texte der Zugangswand (/webdesign/zugang.html) + Fünf Sprachen wie im gesamten Dogfather Universe. + Schweizerdeutsch ist echter Dialekt, keine ß→ss-Umschrift. + ===================================================================== */ +window.I18N_WD = { + seiten_titel: { + de: "Zugang — Dogfather Webdesign", + "de-CH": "Zuegang — Dogfather Webdesign", + en: "Access — Dogfather Web Design", + fr: "Accès — Dogfather Web Design", + pt: "Acesso — Dogfather Web Design", + }, + + zg_eyebrow: { + de: "Nicht öffentlich bis zur Freigabe", + "de-CH": "Nöd öffentlich bis zur Freigab", + en: "Not public until release", + fr: "Non public jusqu'à la validation", + pt: "Não público até à aprovação", + }, + zg_h1: { + de: "Willkommen zurück", + "de-CH": "Willkomme zrugg", + en: "Welcome back", + fr: "Bon retour", + pt: "Bem-vindo de volta", + }, + zg_text: { + de: "Diese Vorabversion ist nur für Dogfather und VanVan gedacht. Wähle deine Karte und gib deinen persönlichen Zugangscode ein.", + "de-CH": "Die Vorabversion isch nur für dä Dogfather und d VanVan dänkt. Wähl dini Charte und tipp din persönlich Zuegangscode ii.", + en: "This preview is intended for Dogfather and VanVan only. Choose your card and enter your personal access code.", + fr: "Cette version préliminaire est réservée à Dogfather et VanVan. Choisis ta carte et saisis ton code d'accès personnel.", + pt: "Esta versão prévia destina-se apenas ao Dogfather e à VanVan. Escolhe o teu cartão e introduz o teu código de acesso pessoal.", + }, + + zg_dogfather: { de: "Dogfather", "de-CH": "Dogfather", en: "Dogfather", fr: "Dogfather", pt: "Dogfather" }, + zg_vanvan: { de: "VanVan", "de-CH": "VanVan", en: "VanVan", fr: "VanVan", pt: "VanVan" }, + + /* Beide Karten tragen bewusst dieselbe Rollenbeschreibung — Masterplan + S.4: "Exakt dieselbe vollständige Ansicht", "Exakt dieselben + Verwaltungs-, Änderungs- und Freigaberechte". */ + zg_rolle: { + de: "Volladministrator", + "de-CH": "Volladministrator", + en: "Full administrator", + fr: "Administrateur complet", + pt: "Administrador total", + }, + zg_code_label: { + de: "Zugangscode", + "de-CH": "Zuegangscode", + en: "Access code", + fr: "Code d'accès", + pt: "Código de acesso", + }, + zg_oeffnen: { de: "Öffnen", "de-CH": "Ufmache", en: "Open", fr: "Ouvrir", pt: "Abrir" }, + zg_pruefe: { + de: "Wird geprüft…", + "de-CH": "Wird prüeft…", + en: "Checking…", + fr: "Vérification…", + pt: "A verificar…", + }, + zg_willkommen: { + de: "Willkommen!", + "de-CH": "Willkomme!", + en: "Welcome!", + fr: "Bienvenue !", + pt: "Bem-vindo!", + }, + zg_leer: { + de: "Bitte zuerst den Zugangscode eingeben.", + "de-CH": "Bitte zerscht dä Zuegangscode iigäh.", + en: "Please enter your access code first.", + fr: "Merci de saisir d'abord ton code d'accès.", + pt: "Introduz primeiro o teu código de acesso.", + }, + zg_falsch: { + de: "Falscher Zugangscode.", + "de-CH": "Falsche Zuegangscode.", + en: "Wrong access code.", + fr: "Code d'accès incorrect.", + pt: "Código de acesso incorreto.", + }, + + zg_sicher_titel: { + de: "Warum ein Code?", + "de-CH": "Wieso en Code?", + en: "Why a code?", + fr: "Pourquoi un code ?", + pt: "Porquê um código?", + }, + zg_sicher_text: { + de: "Solange die Seite nicht freigegeben ist, soll niemand Preise, Beispiele oder Kundendaten sehen können. Der Code wird ausschließlich auf dem Server geprüft und nie im Browser gespeichert. Nach fünf Fehlversuchen greift eine kurze Wartezeit.", + "de-CH": "So lang d Site nöd freigäh isch, söll niemert Priis, Bispiel oder Kundedate gseh chönne. Dä Code wird nur uf em Server prüeft und nie im Browser gspeicheret. Nach füf Fählversüech chunnt e churzi Wartziit.", + en: "Until the site is released, nobody should be able to see prices, examples or client data. The code is checked exclusively on the server and never stored in the browser. After five failed attempts a short waiting period applies.", + fr: "Tant que le site n'est pas validé, personne ne doit voir les tarifs, les exemples ou les données clients. Le code est vérifié uniquement sur le serveur et n'est jamais stocké dans le navigateur. Après cinq tentatives échouées, un court délai d'attente s'applique.", + pt: "Enquanto o site não for aprovado, ninguém deve conseguir ver preços, exemplos ou dados de clientes. O código é verificado exclusivamente no servidor e nunca é guardado no navegador. Após cinco tentativas falhadas aplica-se um curto período de espera.", + }, + zg_zurueck: { + de: "Zum Dogfather Universe", + "de-CH": "Zum Dogfather Universe", + en: "To the Dogfather Universe", + fr: "Vers le Dogfather Universe", + pt: "Para o Dogfather Universe", + }, +}; diff --git a/assets/js/wd-core.js b/assets/js/wd-core.js new file mode 100644 index 00000000..661d5b1f --- /dev/null +++ b/assets/js/wd-core.js @@ -0,0 +1,800 @@ +/* ===================================================================== + DOGFATHER WEBDESIGN — wd-core.js + Gemeinsamer Unterbau für ALLE Seiten unter /webdesign/: + Sprachumschaltung (5 Sprachen), Kopf- und Fußzeile, Einblenden beim + Scrollen, kleine Helfer für Formulare und API-Aufrufe. + + Warum ein eigener Kern statt assets/js/main.js: + 1. main.js baut seine Kopfzeile mit RELATIVEN Adressen ("index.html", + "assets/img/..."). Aus einem Unterordner wie /webdesign/ zeigen die + auf /webdesign/index.html bzw. /webdesign/assets/... — alles kaputt. + Nachträglich auf absolute Pfade umzustellen würde die 40 bestehenden + Universe-Seiten anfassen; das Risiko steht in keinem Verhältnis. + 2. main.js enthält eine nahtlose Seitennavigation (Austausch des +
-Inhalts per fetch), Musik-Widget, Vorschau-Modus und die + Universe-Navigation. Nichts davon gehört in einen geschäftlichen + Webdesign-Bereich, der bis zur Freigabe nicht öffentlich ist. + 3. Getrennte Datei = der Bereich kann die laufende Live-Seite nicht + beschädigen. + + Was BEWUSST geteilt wird, damit es sich wie eine Marke anfühlt: + - derselbe localStorage-Schlüssel "dogi-sprache" → wer im Universe auf + Französisch stellt, landet hier auf Französisch und umgekehrt; + - dieselbe Sprachliste inkl. Farben; + - dieselben Grundtokens aus main.css. + ===================================================================== */ +(function () { + "use strict"; + + /* =================================================================== + 1. SPRACHEN + Identisch zur Liste in main.js (Code, Kürzel, Name, Leuchtfarbe) — + bewusst dupliziert statt importiert: main.js kapselt alles in einer + IIFE ohne Export, und ein ", + ziel: "Zeile1\nZeile2\tmit Tabulator", + }, { ip: "198.51.100.3" }), res2); + const z2 = db.prepare(`SELECT * FROM wd_anfragen WHERE nummer = ?`).get(res2.daten.nummer); + pruefe("HTML wird als Text gespeichert, nicht ausgefuehrt", z2.name.includes(" + + + diff --git a/webdesign/app.webmanifest b/webdesign/app.webmanifest new file mode 100644 index 00000000..dc107ca7 --- /dev/null +++ b/webdesign/app.webmanifest @@ -0,0 +1,41 @@ +{ + "name": "Dogfather Webdesign", + "short_name": "DF Webdesign", + "description": "Individuell gebaute Webseiten, persönlich umgesetzt. Projekte anfragen, Angebote und Dateien im eigenen Kundenbereich verwalten.", + "lang": "de", + "dir": "ltr", + "start_url": "/webdesign/", + "scope": "/webdesign/", + "id": "/webdesign/", + "display": "standalone", + "display_override": ["window-controls-overlay", "standalone", "minimal-ui"], + "orientation": "any", + "background_color": "#05070b", + "theme_color": "#05070b", + "categories": ["business", "productivity"], + "icons": [ + { "src": "/assets/img/wd-app-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, + { "src": "/assets/img/wd-app-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, + { "src": "/assets/img/wd-app-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } + ], + "shortcuts": [ + { + "name": "Projekt anfragen", + "short_name": "Anfrage", + "url": "/webdesign/anfrage.html", + "icons": [{ "src": "/assets/img/wd-app-192.png", "sizes": "192x192" }] + }, + { + "name": "Kundenportal", + "short_name": "Portal", + "url": "/webdesign/portal.html", + "icons": [{ "src": "/assets/img/wd-app-192.png", "sizes": "192x192" }] + }, + { + "name": "Verwaltung", + "short_name": "Verwaltung", + "url": "/webdesign/verwaltung.html", + "icons": [{ "src": "/assets/img/wd-app-192.png", "sizes": "192x192" }] + } + ] +} diff --git a/webdesign/faq.html b/webdesign/faq.html new file mode 100644 index 00000000..a0eb7322 --- /dev/null +++ b/webdesign/faq.html @@ -0,0 +1,166 @@ + + + + + +Häufige Fragen — Dogfather Webdesign + + + + + + + + + + + + + + + +
+ +
+ +
+
+ Häufige Fragen +

Alles, was vorher geklärt sein sollte

+

Sortiert nach Thema. Wenn deine Frage nicht dabei ist, schreib sie einfach ins Anfrageformular — sie landet dann hier, wenn sie öfter kommt.

+ + +
+
+ +
+
+ +
+

Preise & Zahlung

+
+ Warum steht kein Festpreis auf der Seite? +

Weil ein ehrlicher Festpreis erst möglich ist, wenn der Umfang bekannt ist.

+
+
+ Was passiert, wenn ich nach der Anzahlung abspringe? +

Die Anzahlung hat den Zweck, dein Zeitfenster zu reservieren.

+
+
+ Kommen später versteckte Kosten dazu? +

Von mir nicht — was extra kostet, steht vorher im Angebot.

+
+
+ +
+

Dauer & Änderungen

+
+ Woran liegt es, wenn ein Projekt länger dauert? +

In den allermeisten Fällen an fehlenden Inhalten, nicht an der Technik.

+
+
+ Wie viele Änderungen sind drin? +

Typischerweise zwei Feedbackrunden.

+
+
+ Kann ich Texte später selbst ändern? +

Ja, das ist ausdrücklich das Ziel.

+
+
+ +
+

Inhalte & Zusammenarbeit

+
+ Ich habe kein Logo. Ist das ein Problem? +

Kein Hindernis, aber auch nicht kostenlos.

+
+
+ Kann ich Bilder aus dem Internet verwenden? +

Nur wenn die Lizenz das erlaubt.

+
+
+ Wie läuft die Kommunikation während des Projekts? +

Über deinen eigenen Kundenbereich auf dieser Seite.

+
+
+ +
+

Hosting, Domain & Rechte

+
+ Brauche ich eine eigene Domain und ein eigenes Hosting? +

Ja, beides gehört dir und läuft auf deinen Namen.

+
+
+ Bin ich danach von dir abhängig? +

Nein, und das ist Absicht.

+
+
+ Wie steht es um Datenschutz und Impressum? +

Die technischen Voraussetzungen baue ich ein.

+
+
+ +
+

Veröffentlichung & danach

+
+ Wird meine Seite ins Portfolio aufgenommen? +

Nur wenn du es erlaubst.

+
+
+ Was passiert, wenn die Seite ausfällt? +

Mit Betreuung merke ich es in der Regel selbst.

+
+
+ + +
+

Wichtig: 30 % Anzahlung

+

Der Projektstart wird nach Annahme des schriftlichen Angebots und Eingang einer Anzahlung von 30 % des vereinbarten Gesamtpreises reserviert.

+
+ +
+
+ +
+
+

Deine Frage war nicht dabei?

+

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.

+
+ Projekt anfragen + E-Mail schreiben +
+
+
+ +
+ +
+ + + + + diff --git a/webdesign/index.html b/webdesign/index.html new file mode 100644 index 00000000..e7b02427 --- /dev/null +++ b/webdesign/index.html @@ -0,0 +1,480 @@ + + + + + +Dogfather Webdesign — individuelle Webseiten, persönlich umgesetzt + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+
+
+ Dogfather Webdesign +

Deine Webseite soll nicht mithalten.
Sie soll auffallen.

+

Individuell gebaut statt aus dem Baukasten. Du sprichst von der ersten Idee bis zur fertigen Seite mit einer Person — und weißt vorher, was es kostet und wie lange es dauert.

+
+ Projekt anfragen + Beispiele ansehen +
+
+ Ab 300 € + Erste Seiten in 5–10 Arbeitstagen + Eine feste Ansprechperson +
+
+
+
+ + +
+
+

Warum das hier anders läuft

+
+
+

Individuell

+

Kein fertiges Muster mit ausgetauschtem Logo. Aufbau, Farben und Texte entstehen für dein Vorhaben.

+
+
+

Persönlich

+

Du hast eine Ansprechperson — keine Ticketnummer und keine wechselnden Zuständigkeiten.

+
+
+

Auf jedem Gerät

+

Handy zuerst geprüft, dann Tablet und Computer. Nichts wird abgeschnitten, nichts ist zu klein zum Antippen.

+
+
+

Klare Preise

+

Einstiegspreise und Zeitrahmen stehen offen auf der Seite. Der Endpreis kommt schriftlich, bevor gearbeitet wird.

+
+
+
+
+ + +
+
+ Leistungen +

Vier Wege zu deiner Seite

+

Alle Preise sind Einstiegspunkte. Umfang, Funktionen und Personalisierung können Preis und Dauer verändern — was bei dir gilt, steht im schriftlichen Angebot.

+ +
+ +
+

Onepager

+

ab 300 €

+
+ Dauer + ca. 5–10 Arbeitstage +
+

Eine starke einzelne Seite für Person, Angebot, Aktion oder Kampagne.

+

Personalisierung möglich — verändert Preis und Dauer.

+ Was genau enthalten ist +
+ +
+

Professionelle Website

+

ab 500 €

+
+ Dauer + ca. 2–4 Wochen +
+

Mehrere Unterseiten für Unternehmen, Creator, Teams oder Projekte.

+

Personalisierung möglich — verändert Preis und Dauer.

+ Was genau enthalten ist +
+ +
+

Shop & umfangreiche Website

+

ab 1.000 €

+
+ Dauer + ca. 4–8 Wochen +
+

Produktverkauf, Nutzerbereiche und umfangreiche Funktionen.

+

Personalisierung möglich — verändert Preis und Dauer.

+ Was genau enthalten ist +
+ +
+

Buchhaltungs- & Steuerverwaltungsseiten

+

ab 1.500 €

+
+ Dauer + ca. 6–12 Wochen +
+

Technisches Portal für Belege, Einnahmen, Ausgaben und Dokumente.

+

Personalisierung möglich — verändert Preis und Dauer.

+ Was genau enthalten ist +
+ +
+ +
+
+

Laufende Betreuung

+

ab 49 € / Monat

+

Kleine Änderungen werden typischerweise innerhalb von ca. 2–5 Arbeitstagen bearbeitet. Umfang und Priorität richten sich nach dem gewählten Paket.

+
+ +
+

Wichtig: 30 % Anzahlung

+

Der Projektstart wird nach Annahme des schriftlichen Angebots und Eingang einer Anzahlung von 30 % des vereinbarten Gesamtpreises reserviert.

+
+
+
+
+ + +
+
+ Ausgewählte Projekte +

Zwei Seiten, die wirklich laufen

+

Keine erfundenen Beispiele und keine Bewertungen, die es nie gab. Beides sind echte, öffentlich erreichbare Seiten mit allem, was dahintersteckt.

+ +
+ +
+ Startseite von dogfather-universe.com +
+

Dogfather Universe

+

Content- und Community-Plattform mit fünf Sprachen, Teamseiten, Streamplan, Bewerbungssystem, Supporter-Abo und eigenem Verwaltungsbereich.

+
+
Aufgabe
+
Drei getrennte Welten unter ein Dach bringen, ohne dass es unübersichtlich wird.
+
Ergebnis
+
Öffentlich seit August 2026, läuft auf einem eigenen Server, inhaltlich komplett selbst pflegbar.
+
+
+ 5 Sprachen + Eigene Verwaltung + Abo & Zahlung +
+ Live ansehen +
+
+ + +
+ Startseite von vans-diy-bastelbedarf.com +
+

Van's DIY & Bastelbedarf

+

Vollständiger Onlineshop mit Produktverwaltung, Warenkorb, Gutscheincodes, Versandabläufen und einem Adminbereich, in dem Artikel ohne Technikkenntnisse gepflegt werden.

+
+
Aufgabe
+
Ein Shop, den die Inhaberin komplett selbst befüllen kann — ohne Schulung und ohne Angst, etwas kaputtzumachen.
+
Ergebnis
+
Läuft auf eigener Domain und eigenem Server; Artikelpflege passiert selbstständig im Adminbereich.
+
+
+ Shop & Kasse + Selbstpflege + Gutscheincodes +
+ Live ansehen +
+
+ +
+ +
+ Alle Projekte ansehen +
+
+
+ + +
+
+ So läuft es ab +

Von der Anfrage bis zur Übergabe

+ +
+
+ +

Anfrage

Du füllst das Formular aus. Es fragt genau das ab, was für ein ehrliches Angebot nötig ist — nicht mehr.

+
+
+ +

Briefing

Wir klären offene Punkte im Gespräch: Ziel, Zielgruppe, Umfang und was du schon an Inhalten hast.

+
+
+ +

Angebot

Du bekommst Preis, Zeitrahmen und Umfang schriftlich. Erst wenn du zustimmst und die 30 % Anzahlung da sind, wird dein Termin reserviert.

+
+
+ +

Design

Du siehst den Entwurf, bevor gebaut wird — auf Handy und Computer. Zwei Feedbackrunden sind üblich eingeplant.

+
+
+ +

Entwicklung & Tests

Die Seite wird gebaut und danach durchgespielt: jedes Formular, jeder Link, jeder Fehlerfall — auf echten Bildschirmgrößen.

+
+
+ +

Übergabe

Veröffentlichung erst nach deiner ausdrücklichen Freigabe. Danach eine Einweisung, damit du deine Inhalte selbst pflegen kannst.

+
+
+
+
+ + +
+
+
+ Dogfather +
+ Warum Dogfather +

Eine Person, die dranbleibt

+

Hinter Dogfather Webdesign steht keine Agentur mit wechselnden Zuständigkeiten, sondern eine Person, die dein Projekt von Anfang bis Ende begleitet — und die dieselbe Sorgfalt hineinsteckt, die im Dogfather Universe steckt.

+

Das heißt auch: keine Versprechen, die später nicht gehalten werden. Was nicht geht, sage ich vorher — nicht, wenn die Anzahlung schon da ist.

+
+ Mehr über Dogfather +
+
+
+
+
+ + +
+
+ Häufige Fragen +

Das, was fast alle fragen

+ +
+
+ Ist der genannte Preis der Endpreis? +

Nein. Die Beträge auf dieser Seite sind Einstiegspreise. Der verbindliche Endpreis entsteht erst durch ein schriftliches Angebot, nachdem der tatsächliche Umfang geklärt ist. Das Anfrageformular erzeugt keinen Vertrag.

+
+
+ Warum 30 % Anzahlung? +

Weil damit dein Zeitfenster fest reserviert wird. Solange keine Anzahlung da ist, ist kein Termin blockiert — und ein Projekt, das kurzfristig abspringt, geht sonst auf Kosten aller anderen, die warten.

+
+
+ Was ist, wenn ich noch keine Texte und Bilder habe? +

Das ist normal und kein Hindernis. Sag es im Anfrageformular ehrlich — dann planen wir es von Anfang an ein, statt später überrascht zu werden. Fehlende Inhalte sind der häufigste Grund, warum Projekte länger dauern als geplant.

+
+
+ Gehört die Seite danach mir? +

Ja. Nach vollständiger Bezahlung erhältst du die Nutzungsrechte an der für dich erstellten Seite samt Inhalten. Eingesetzte fremde Bausteine (z. B. Schriften oder Bilder aus Bibliotheken) behalten ihre eigene Lizenz — welche das sind, steht im Angebot.

+
+
+ Wird ohne meine Zustimmung etwas veröffentlicht? +

Nein. Weder die Seite selbst noch ein Beispiel davon im Portfolio. Beides braucht deine ausdrückliche Freigabe, und beides ist getrennt — du kannst die Seite live schalten und trotzdem nicht im Portfolio auftauchen wollen.

+
+
+ +
+ Alle Fragen und Antworten +
+
+
+ + +
+
+
+

Erzähl mir von deinem Vorhaben

+

Ein paar Minuten für das Formular reichen. Du bekommst danach eine Zusammenfassung, ich melde mich mit Rückfragen oder direkt mit einem Angebot — unverbindlich und ohne Kosten.

+
+ Projekt anfragen +
+

Unverbindlich · Keine Kosten · Keine automatische Preiszusage

+
+
+
+ +
+ +
+ + + + + + diff --git a/webdesign/leistungen.html b/webdesign/leistungen.html new file mode 100644 index 00000000..5eb5cb4a --- /dev/null +++ b/webdesign/leistungen.html @@ -0,0 +1,307 @@ + + + + + +Leistungen — Dogfather Webdesign + + + + + + + + + + + + + + + +
+ +
+ +
+
+ Klare Pakete +

Was du ungefähr bekommst

+

Keine leeren Werbeversprechen. Zu jeder Kategorie steht hier, für wen sie gedacht ist, was typischerweise drin ist, was extra kostet — und wo die Grenze verläuft.

+ + +
+
+ +
+
+ + +
+

Onepager

+
+ ab 300 € + Dauer: ca. 5–10 Arbeitstage +
+

Personalisierung möglich — verändert Preis und Dauer.

+ +
+
+

Für wen

+

Einzelpersonen, Creator, eine einzelne Aktion oder ein klar umrissenes Angebot, das keine Unterseiten braucht.

+
+
+

Typisch enthalten

+
    +
  • Bis zu ca. fünf Inhaltsbereiche auf einer Seite
    • +
  • Hero, Vorstellung, Angebot, Links und Kontakt
    • +
  • Responsiv auf Handy, Tablet und Computer
    • +
  • Grundstruktur für Suchmaschinen (Titel, Beschreibung, Überschriften)
    • +
  • Typischerweise zwei Feedbackrunden
    • +
+
+
+

Konkretes Beispiel

+

Eine Seite für einen Creator: oben wer du bist und was du machst, darunter die aktuelle Aktion, deine Kanäle, ein kurzes Kontaktformular. Alles auf einem Bildschirm erreichbar, ohne Menü.

+
+
+

Nicht enthalten

+

Kein Shop, keine Nutzerkonten, keine Unterseiten. Wenn absehbar mehr als eine Seite nötig wird, ist die professionelle Website der ehrlichere Weg — auch wenn sie mehr kostet.

+
+
+ +
+

Kostet extra: Zusätzliche Sprachen · weitere Unterseiten · Logo- und Bildbearbeitung · Texterstellung · Anbindung an fremde Systeme · zusätzliche Feedbackrunden über die vereinbarten hinaus

+
+ +
+ Dieses Paket anfragen +
+
+ + +
+

Professionelle Website

+
+ ab 500 € + Dauer: ca. 2–4 Wochen +
+

Personalisierung möglich — verändert Preis und Dauer.

+ +
+
+

Für wen

+

Unternehmen, Teams, Vereine, Creator mit mehreren Themen — überall dort, wo eine einzelne Seite zu voll würde.

+
+
+

Typisch enthalten

+
    +
  • Typisch bis zu fünf Kernseiten
    • +
  • Navigation, Formulare, Galerie oder Videos
    • +
  • Responsive Umsetzung und Funktionscheck auf echten Geräten
    • +
  • Unterstützung bei der Veröffentlichung (Domain, Zertifikat, Umzug)
    • +
  • Einweisung, damit du Texte selbst ändern kannst
    • +
+
+
+

Konkretes Beispiel

+

Ein Handwerksbetrieb: Startseite, Leistungen, Referenzen mit Bildern, Über uns, Kontakt mit Anfahrt und Formular. Anfragen landen strukturiert im Postfach statt als formlose Mail.

+
+
+

Nicht enthalten

+

Kein Produktverkauf und keine geschützten Nutzerbereiche. Sobald etwas verkauft oder ein Login gebraucht wird, gilt die nächste Kategorie.

+
+
+ +
+

Kostet extra: Zusätzliche Sprachen · weitere Unterseiten · Logo- und Bildbearbeitung · Texterstellung · Anbindung an fremde Systeme · zusätzliche Feedbackrunden über die vereinbarten hinaus

+
+ +
+ Dieses Paket anfragen +
+
+ + +
+

Shop & umfangreiche Website

+
+ ab 1.000 € + Dauer: ca. 4–8 Wochen +
+

Personalisierung möglich — verändert Preis und Dauer.

+ +
+
+

Für wen

+

Alle, die tatsächlich online verkaufen wollen — Handgemachtes, digitale Produkte, Merch — oder einen geschützten Bereich für Kundinnen und Kunden brauchen.

+
+
+

Typisch enthalten

+
    +
  • Produkte, Detailseiten, Warenkorb und Kasse
    • +
  • Zahlungs- und Versandabläufe eingerichtet und durchgespielt
    • +
  • Mobile Kundenführung — Kasse funktioniert auf dem Handy wirklich
    • +
  • Adminbereich zur eigenständigen Produktpflege
    • +
  • Einweisung in die Produktpflege
    • +
+
+
+

Konkretes Beispiel

+

Van's DIY & Bastelbedarf: Kategorien, Artikel mit Bildern und Varianten, Warenkorb, Gutscheincodes, Versandregeln — und ein Adminbereich, in dem neue Artikel ohne Technikkenntnisse angelegt werden.

+
+
+

Nicht enthalten

+

Gebühren von Zahlungsanbietern, Kosten für Domain und Server sowie steuerliche Pflichten liegen bei dir. Ich richte die Technik ein, übernehme aber weder Buchhaltung noch Rechtsberatung.

+
+
+ +
+

Kostet extra: Zusätzliche Sprachen · weitere Unterseiten · Logo- und Bildbearbeitung · Texterstellung · Anbindung an fremde Systeme · zusätzliche Feedbackrunden über die vereinbarten hinaus

+
+ +
+ Dieses Paket anfragen +
+
+ + +
+

Buchhaltungs- & Steuerverwaltungsseiten

+
+ ab 1.500 € + Dauer: ca. 6–12 Wochen +
+

Personalisierung möglich — verändert Preis und Dauer.

+ +
+
+

Für wen

+

Selbstständige und kleine Betriebe, die Belege, Einnahmen und Ausgaben nicht mehr in Ordnern und Tabellen suchen wollen.

+
+
+

Typisch enthalten

+
    +
  • Geschützter Login und Benutzerrollen
    • +
  • Belege, Einnahmen, Ausgaben und Dokumente an einem Ort
    • +
  • Filter, Suche, Auswertungen und Export
    • +
  • Nachvollziehbarer Änderungsverlauf mit Zeitstempel
    • +
  • Regelmäßige Sicherungen mit geprüfter Wiederherstellung
    • +
+
+
+

Konkretes Beispiel

+

Ein Portal, in dem du ein Foto eines Belegs hochlädst, Betrag und Kategorie einträgst und am Jahresende alles gefiltert exportierst — statt einen Schuhkarton zur Steuerberatung zu tragen.

+
+
+

Nicht enthalten

+

Das ist ausdrücklich eine technische Organisationslösung. Keine Buchhaltung, keine Steuerberatung, keine Erstellung von Steuererklärungen — dafür braucht es weiterhin eine Fachperson.

+
+
+ + +
+

Technische Abgrenzung

+

Buchhaltungs- und Steuerverwaltungsseiten sind ausschließlich technische Organisationslösungen. Diese Seite verspricht keine Buchhaltung, keine Steuerberatung und keine Erstellung von Steuererklärungen.

+
+ +
+ Dieses Paket anfragen +
+
+ + +
+

Laufende Betreuung

+
+ ab 49 € / Monat +
+ +
+
+

Für wen

+

Alle, die nach der Übergabe nicht selbst an der Technik schrauben wollen — oder einfach wissen möchten, dass jemand hinschaut.

+
+
+

Typisch enthalten

+
    +
  • Kleine Änderungen typischerweise in ca. 2–5 Arbeitstagen
    • +
  • Sicherheitsaktualisierungen und Überwachung der Erreichbarkeit
    • +
  • Regelmäßige Sicherungen, die auch wirklich zurückgespielt werden können
    • +
  • Umfang und Priorität nach gewähltem Paket
    • +
+
+
+

Nicht enthalten

+

Betreuung ist keine unbegrenzte Weiterentwicklung. Neue Funktionen oder ganze Unterseiten sind eigene Aufträge — der Aufwand wird vorher genannt, du entscheidest.

+
+
+ +
+ Dieses Paket anfragen +
+
+ +
+
+ +
+
+

Nicht sicher, welches Paket passt?

+

Beschreib einfach dein Vorhaben. Wenn ein kleineres Paket reicht, sage ich das — auch wenn das weniger Umsatz bedeutet.

+
+ Projekt anfragen +
+
+
+ +
+ +
+ + + + + diff --git a/webdesign/portfolio.html b/webdesign/portfolio.html new file mode 100644 index 00000000..0af18ab9 --- /dev/null +++ b/webdesign/portfolio.html @@ -0,0 +1,198 @@ + + + + + +Portfolio — Dogfather Webdesign + + + + + + + + + + + + + + + +
+ +
+ +
+
+ Portfolio +

Zwei Projekte, die man anfassen kann

+

Beide Seiten laufen wirklich, unter ihrer eigenen Adresse, auf einem eigenen Server. Die Vorschaubilder sind echte Aufnahmen der laufenden Seiten — keine gezeichneten Entwürfe.

+
+
+ +
+
+ + +
+ Startseite von dogfather-universe.com +
+
+

Dogfather Universe

+ Umfangreiche Website +
+ +
+

Ausgangslage

+

Drei getrennte Welten sollten unter ein Dach, ohne dass Besucher sich verlaufen.

+
+
+

Umgesetzte Lösung

+

Eine Seite mit drei farblich klar getrennten Welten, gemeinsamer Navigation und durchgängig fünf Sprachen.

+
+
+

Ergebnis

+

Seit August 2026 öffentlich und im täglichen Einsatz.

+
+ +
+ Details ansehen +
+
+

Wichtigste Funktionen

+
    +
  • Fünf Sprachen, inklusive echtem Schweizerdeutsch
    • +
  • Verwaltungsbereich mit Rollen und Rechten
    • +
  • Bewerbungssystem mit Statusverfolgung
    • +
  • Supporter-Abo mit Zahlungsanbindung
    • +
  • Automatische Live-Erkennung des Streams
    • +
  • Als App installierbar
    • +
+
+
+

Stilrichtung

+

Dunkel und cinematisch, mit einer eigenen Leitfarbe je Welt.

+
+
+
+ +
+ Live ansehen +
+
+
+ + +
+ Startseite von vans-diy-bastelbedarf.com +
+
+

Van's DIY & Bastelbedarf

+ Onlineshop +
+ +
+

Ausgangslage

+

Handgemachtes wurde bis dahin über Nachrichten verkauft.

+
+
+

Umgesetzte Lösung

+

Ein vollständiger Shop mit Kategorien, Artikeln, Warenkorb und Gutscheincodes.

+
+
+

Ergebnis

+

Artikel werden selbstständig angelegt und gepflegt, ohne Rückfrage und ohne Wartezeit.

+
+ +
+ Details ansehen +
+
+

Wichtigste Funktionen

+
    +
  • Kategorien, Artikel und Varianten
    • +
  • Warenkorb und Kasse, auf dem Handy geprüft
    • +
  • Gutscheincodes und Versandregeln
    • +
  • Adminbereich für die eigenständige Artikelpflege
    • +
  • Mehrsprachig
    • +
+
+
+

Stilrichtung

+

Dunkel mit warmen Violett- und Rosétönen, passend zum handgemachten Sortiment.

+
+
+
+ +
+ Live ansehen +
+
+
+ + +
+

Was hier bewusst fehlt
+ 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.

+
+ +
+
+ +
+
+

Soll deins das dritte sein?

+

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.

+
+ Projekt anfragen +
+
+
+ +
+ +
+ + + + + diff --git a/webdesign/preise.html b/webdesign/preise.html new file mode 100644 index 00000000..859a0ba0 --- /dev/null +++ b/webdesign/preise.html @@ -0,0 +1,202 @@ + + + + + +Preise & Zeit — Dogfather Webdesign + + + + + + + + + + + + + + + +
+ +
+ +
+
+ Preise & Zeit +

Was es kostet und wie lange es dauert

+

Alle Werte sind transparente Einstiegspunkte. Personalisierung, Funktionsumfang, Materialien und zusätzliche Änderungswünsche können Preis und Dauer verändern.

+
+
+ + +
+
+

Alles auf einen Blick

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PaketEinstiegspreisZeitrahmenGedacht für
Onepagerab 300 €ca. 5–10 ArbeitstageEine Person, ein Angebot, eine Aktion
Professionelle Websiteab 500 €ca. 2–4 WochenFirmen, Teams, mehrere Themen
Shop & umfangreiche Websiteab 1.000 €ca. 4–8 WochenWer wirklich online verkauft
Buchhaltungs- & Steuerverwaltungsseitenab 1.500 €ca. 6–12 WochenBelege und Zahlen organisieren
Laufende Betreuungab 49 € / Monat—Nach der Übergabe weiterlaufen lassen
+
+

Personalisierung möglich — verändert Preis und Dauer.

+
+
+ + +
+
+

Was den Preis bewegt

+
+
+

Macht es teurer und länger

+
    +
  • Viele Unterseiten oder viele Produkte
    • +
  • Zusätzliche Sprachen
    • +
  • Texte und Bilder müssen erst erstellt werden
    • +
  • Anbindung an fremde Systeme (Kasse, Kalender, Warenwirtschaft)
    • +
  • Mehr Feedbackrunden als vereinbart
    • +
+
+
+

Macht es günstiger und schneller

+
    +
  • Texte, Logo und Bilder liegen fertig vor
    • +
  • Klare Vorstellung vom Ziel der Seite
    • +
  • Eine Person entscheidet, nicht ein Gremium
    • +
  • Rückmeldungen gebündelt statt tröpfchenweise
    • +
  • Bestehende Domain und bestehendes Hosting
    • +
+
+
+
+
+ + +
+
+

Wie bezahlt wird

+ +
+
+

1. Angebot

+

Nach dem Briefing bekommst du Preis, Umfang und Zeitrahmen schriftlich. Bis dahin entstehen dir keine Kosten.

+
+
+

2. Anzahlung 30 %

+

Mit der Annahme des Angebots und dem Eingang der Anzahlung wird dein Zeitfenster fest reserviert. Erst dann beginnt die Arbeit.

+
+
+

3. Restbetrag

+

Der Rest wird nach deiner Abnahme fällig, vor der Veröffentlichung. Die Nutzungsrechte gehen mit der vollständigen Bezahlung an dich über.

+
+
+

Betreuung

+

Läuft monatlich und ist jederzeit zum Monatsende kündbar. Keine Mindestlaufzeit, keine automatische Verlängerung um ein ganzes Jahr.

+
+
+ + +
+

Wichtig: 30 % Anzahlung

+

Der Projektstart wird nach Annahme des schriftlichen Angebots und Eingang einer Anzahlung von 30 % des vereinbarten Gesamtpreises reserviert.

+
+ +
+

Keine automatische Preiszusage

+

Die Angaben auf dieser Seite sind Richtwerte, kein Vertrag. Auch das Anfrageformular erzeugt keine verbindliche Zusage. Der Endpreis entsteht ausschließlich durch ein schriftliches Angebot nach Prüfung des tatsächlichen Umfangs.

+
+
+
+ +
+
+

Passt das zu deinem Budget?

+

Sag im Formular einfach, welcher Rahmen realistisch ist. Wenn es nicht passt, sage ich das offen — statt ein Angebot zu schreiben, das nachher niemand bezahlen will.

+
+ Projekt anfragen + Leistungen +
+
+
+ +
+ +
+ + + + + diff --git a/webdesign/sw.js b/webdesign/sw.js new file mode 100644 index 00000000..d01f4e27 --- /dev/null +++ b/webdesign/sw.js @@ -0,0 +1,155 @@ +/* ===================================================================== + sw.js — Service Worker NUR für /webdesign/ + Macht den Bereich auf Handy und Computer als App installierbar und + sorgt dafür, dass die Oberfläche auch bei wackeliger Verbindung + sofort da ist. + + ⚠️ SICHERHEITSENTSCHEIDUNG, DIE HIER DEN AUSSCHLAG GIBT + + Der Webdesign-Bereich ist zugangsgeschützt (server/webdesign-gate.js). + Ein Service Worker, der HTML-Seiten zwischenspeichert, würde diesen + Schutz aushebeln: Nach dem Abmelden — oder nachdem jemand anders das + Gerät in die Hand nimmt — lieferte der Zwischenspeicher die geschützten + Seiten samt Preisen, Anfragen und Kundendaten weiterhin aus, ohne dass + der Server je gefragt wird. Genau das ist der klassische Fehler bei + PWAs hinter einer Anmeldung. + + Deshalb gilt hier strikt: + - HTML-Seiten werden NIEMALS zwischengespeichert. Immer Netz. + Ist kein Netz da, kommt eine schlichte Offline-Meldung — nicht die + zuletzt gesehene, möglicherweise vertrauliche Seite. + - Zwischengespeichert werden ausschließlich die neutralen Bausteine + unter /assets/ (Stilvorlagen, Skripte, Logo, Icons). Die enthalten + keine Kunden- oder Projektdaten und liegen ohnehin außerhalb der + Zugangsschranke. + - Antworten der API (postfach.dogfather-universe.com) werden + ebenfalls nie zwischengespeichert. + + Das kostet Offline-Komfort. Der ist hier aber weniger wert als die + Zusicherung, dass nach dem Schließen der Sitzung wirklich nichts mehr + einsehbar ist. + ===================================================================== */ + +/* Version im Namen: eine Änderung dieser Zeichenkette wirft beim nächsten + Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den + Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten + Stand fest. */ +const CACHE_NAME = "dogfather-webdesign-v1"; + +/* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE + HTML-Datei in dieser Liste. */ +const GRUNDGERUEST = [ + "/assets/css/main.css", + "/assets/css/webdesign.css", + "/assets/js/wd-core.js", + "/assets/img/logo-dogfather-transparent.png", + "/assets/img/wd-app-192.png", + "/assets/img/wd-app-512.png", +]; + +self.addEventListener("install", (ereignis) => { + ereignis.waitUntil( + caches.open(CACHE_NAME).then((speicher) => + /* addAll bricht komplett ab, wenn EINE Datei fehlt — dann wäre der + Service Worker gar nicht erst installiert und die App nicht + installierbar. Deshalb jede Datei einzeln und Fehler schlucken. */ + Promise.all( + GRUNDGERUEST.map((pfad) => + speicher.add(new Request(pfad, { cache: "reload" })).catch(() => {}) + ) + ) + ) + ); + /* Sofort übernehmen statt auf das Schließen aller Tabs zu warten — + sonst bleibt nach einem Deploy tagelang die alte Fassung aktiv. */ + self.skipWaiting(); +}); + +self.addEventListener("activate", (ereignis) => { + ereignis.waitUntil( + caches.keys() + .then((namen) => Promise.all( + namen.filter((n) => n !== CACHE_NAME).map((n) => caches.delete(n)) + )) + .then(() => self.clients.claim()) + ); +}); + +/* Schlichte Offline-Meldung. Bewusst als erzeugte Antwort statt als + Datei — so kann sie nie mit echtem Seiteninhalt verwechselt werden. + Fünf Sprachen wären hier Überinstrumentierung: der Text erscheint nur + ohne Internet und ist absichtlich sehr kurz gehalten. */ +function offlineSeite() { + return new Response( + ` + + Keine Verbindung + +
+

Keine Verbindung

+

Dogfather Webdesign braucht eine Internetverbindung. Sobald du wieder online bist, geht es normal weiter.

+ +
`, + { status: 503, headers: { "Content-Type": "text/html; charset=utf-8" } } + ); +} + +self.addEventListener("fetch", (ereignis) => { + const anfrage = ereignis.request; + + // Nur einfache Abrufe. Absendungen (POST) gehen immer direkt ans Netz. + if (anfrage.method !== "GET") return; + + const url = new URL(anfrage.url); + + // Fremde Server (API, externe Bilder) nie anfassen. + if (url.origin !== self.location.origin) return; + + /* --- HTML: immer Netz, niemals zwischenspeichern (siehe Kopf) --- */ + const willHtml = anfrage.mode === "navigate" || + (anfrage.headers.get("accept") || "").includes("text/html"); + if (willHtml) { + ereignis.respondWith( + fetch(anfrage).catch(() => offlineSeite()) + ); + return; + } + + /* --- Zugangs-Endpunkte niemals zwischenspeichern --- */ + if (url.pathname.startsWith("/webdesign/zugang-")) return; + + /* --- Neutrale Bausteine: erst Zwischenspeicher, dann Netz --- + "stale-while-revalidate": die gespeicherte Fassung geht sofort raus + (die Seite baut sich ohne Wartezeit auf), im Hintergrund wird eine + frische geholt und für das nächste Mal abgelegt. */ + if (url.pathname.startsWith("/assets/")) { + ereignis.respondWith( + caches.open(CACHE_NAME).then(async (speicher) => { + const gespeichert = await speicher.match(anfrage); + const ausDemNetz = fetch(anfrage) + .then((antwort) => { + /* Nur vollständige, eigene Antworten ablegen. Teilantworten + (206, z.B. bei Video-Sprüngen) lassen sich nicht sinnvoll + zwischenspeichern und würden den Speicher beschädigen. */ + if (antwort && antwort.status === 200 && antwort.type === "basic") { + speicher.put(anfrage, antwort.clone()); + } + return antwort; + }) + .catch(() => null); + + return gespeichert || (await ausDemNetz) || Response.error(); + }) + ); + } + /* Alles Übrige: kein respondWith -> der Browser macht es ganz normal + selbst. Das ist die sicherste Voreinstellung. */ +}); diff --git a/webdesign/ueber.html b/webdesign/ueber.html new file mode 100644 index 00000000..12f205f4 --- /dev/null +++ b/webdesign/ueber.html @@ -0,0 +1,133 @@ + + + + + +Über Dogfather — Dogfather Webdesign + + + + + + + + + + + + + + + +
+ +
+ +
+
+
+
+ Dogfather +
+
+ Über Dogfather +

Wer hier eigentlich baut

+

Keine Agentur, kein Callcenter, keine Ticketnummer. Eine Person, die dein Projekt von der ersten Nachricht bis zur Übergabe begleitet — und die danach noch erreichbar ist.

+
+
+
+
+ +
+
+

Dogfather ist der Name, unter dem ich seit Jahren im Netz unterwegs bin — als Streamer, als Teil einer Community und mittlerweile auch als jemand, der Webseiten baut. Das eine ist aus dem anderen entstanden: Irgendwann brauchte das eigene Projekt eine richtige Seite, dann brauchte jemand aus dem Umfeld eine, dann noch jemand.

+

Dadurch sind die Seiten hier nicht am Reißbrett entstanden, sondern an echten Problemen: Eine Shop-Inhaberin, die ihre Artikel selbst pflegen können muss, ohne Angst etwas kaputtzumachen. Ein Team, das seine eigenen Inhalte ändern will, ohne jedes Mal jemanden zu fragen. Genau daran messe ich, ob eine Seite gut ist — nicht daran, wie sie auf einem Werbebild aussieht.

+
+
+ + +
+
+

Wie ich arbeite

+
+
+

Ehrlich vor gefällig

+

Wenn ein kleineres Paket reicht, sage ich das — auch wenn ich damit weniger verdiene. Wenn etwas technisch nicht sinnvoll ist, sage ich das vorher, nicht wenn die Anzahlung schon da ist.

+
+
+

Handy zuerst

+

Die meisten Besucher kommen mit dem Handy. Deshalb wird dort zuerst geprüft, nicht zuletzt — und zwar auf echten Bildschirmgrößen, nicht nur in einem verkleinerten Fenster am Computer.

+
+
+

Fertig heißt fertig

+

Keine halb fertigen Unterseiten, keine Platzhalter und keine Links, die ins Leere führen. Eine Seite gilt erst als fertig, wenn jedes Formular, jeder Zugang und jeder Fehlerfall wirklich durchgespielt wurde.

+
+
+

Augenschonend

+

Dunkel, kontraststark genug zum Lesen, aber ohne grelle Neonfarben und ohne flackernde Effekte. Wer in den Systemeinstellungen weniger Bewegung wünscht, bekommt sie auch nicht.

+
+
+
+
+ + +
+
+

Woran ich das gelernt habe

+
+
+

Dogfather Universe

+

Eine Plattform mit fünf Sprachen, Teamseiten, Bewerbungssystem, Supporter-Abo mit Zahlungsanbindung und einem Verwaltungsbereich, in dem Inhalte ohne Programmierkenntnisse gepflegt werden. Öffentlich seit August 2026, auf einem eigenen Server.

+
+
+

Van's DIY & Bastelbedarf

+

Ein vollständiger Onlineshop mit Warenkorb, Gutscheincodes und Versandabläufen — und einem Adminbereich, der so gebaut ist, dass die Inhaberin ihn ohne Technikkenntnisse bedient. Genau daran habe ich gelernt, wie viel Aufwand in „einfach zu bedienen“ steckt.

+
+
+
+ Projekte ansehen +
+ +
+

Nicht allein, aber verantwortlich
+ Bei Rückfragen, Gegenlesen und der Abnahme hilft VanVan mit — sie hat auf diese Vorabversion dieselben Rechte wie ich. Deine Ansprechperson für dein Projekt bleibe trotzdem ich, damit du nie erklären musst, was du letzte Woche schon erklärt hast.

+
+
+
+ +
+
+

Klingt das nach jemandem, mit dem du arbeiten willst?

+

Dann erzähl mir von deinem Vorhaben. Das Formular dauert ein paar Minuten und verpflichtet dich zu nichts.

+
+ Projekt anfragen +
+
+
+ +
+ +
+ + + + + diff --git a/webdesign/zugang.html b/webdesign/zugang.html new file mode 100644 index 00000000..e04e8169 --- /dev/null +++ b/webdesign/zugang.html @@ -0,0 +1,280 @@ + + + + + +Zugang — Dogfather Webdesign + + + + + + + + + + + + + + + + +
+ +
+
+ + + + Nicht öffentlich bis zur Freigabe +

Willkommen zurück

+

Diese Vorabversion ist nur für Dogfather und VanVan gedacht. Wähle deine Karte und gib deinen persönlichen Zugangscode ein.

+ +
+ + +
+
+ +
+

Dogfather

+

Volladministrator

+
+
+
+ + + + +
+ + +
+ + +
+
+ +
+

VanVan

+

Volladministrator

+
+
+
+ + +
+ + +
+ +
+ +
+

Warum ein Code?

+

Solange die Seite nicht freigegeben ist, soll niemand Preise, Beispiele oder Kundendaten sehen können. Der Code wird ausschließlich auf dem Server geprüft und nie im Browser gespeichert. Nach fünf Fehlversuchen greift eine kurze Wartezeit.

+
+ +
+ Zum Dogfather Universe +
+ +
+
+ + + + + +