From 6d8df3d5088783ef2cc319f52546cde16f9c1d74 Mon Sep 17 00:00:00 2001 From: NotPika69 <86320278+NotPika69@users.noreply.github.com> Date: Thu, 1 Oct 2026 18:58:29 +0200 Subject: [PATCH] Erster Entwurf: Landingpage mit 4 Kacheln und Unterseiten Co-Authored-By: Claude Opus 5.5 --- .gitignore | 11 + README.md | 35 +++ assets/site.css | 497 +++++++++++++++++++++++++++++++++++++++++++ assets/site.js | 42 ++++ ernaehrung.html | 106 +++++++++ hundeschule.html | 109 ++++++++++ impressum.html | 58 +++++ index.html | 163 ++++++++++++++ shop.html | 77 +++++++ tools/build_pages.py | 374 ++++++++++++++++++++++++++++++++ transportboxen.html | 84 ++++++++ 11 files changed, 1556 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 assets/site.css create mode 100644 assets/site.js create mode 100644 ernaehrung.html create mode 100644 hundeschule.html create mode 100644 impressum.html create mode 100644 index.html create mode 100644 shop.html create mode 100644 tools/build_pages.py create mode 100644 transportboxen.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c12ea99 --- /dev/null +++ b/.gitignore @@ -0,0 +1,11 @@ +# macOS +.DS_Store +._* + +# Editor / lokale Werkzeuge +.vscode/ +.idea/ +.claude/ +__pycache__/ +*.log +node_modules/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..b978267 --- /dev/null +++ b/README.md @@ -0,0 +1,35 @@ +# Schmacko Napf & Hundetraining by Katha — Website + +Neuer Entwurf für die Website von Katha (bisher WordPress: `schmacko-napf.de`). Statisches HTML/CSS/JS. + +| Datei | Seite | +|---|---| +| `index.html` | Start: 4 Kacheln mit Logo-Siegel, darunter Über mich, Training, Ernährung, 5 Säulen, Shop/Transportboxen, Kontakt | +| `hundeschule.html` | Einzeltraining, Außentraining, 5 Säulen, Preise | +| `ernaehrung.html` | Futterarten, Ablauf, Preise | +| `shop.html` | Sortiment (Platzhaltertext, Shop im Aufbau) | +| `transportboxen.html` | Maßanfertigung fürs Auto (Platzhaltertext) | +| `impressum.html` | Impressum | +| `assets/site.css` | Farben (oben als Variablen) und alle Komponenten | +| `assets/site.js` | Menü, Header nach dem Hero, Einblend-Animationen | +| `tools/build_pages.py` | **Quelle der Seiten** — Inhalte hier ändern, dann neu erzeugen | + +## Lokal ansehen + +```bash +python3 -m http.server 4175 +``` + +Dann http://localhost:4175 öffnen. + +## Seiten ändern + +```bash +python3 tools/build_pages.py +``` + +## Offen + +- Logo und Fotos (KK-Fotografie) werden noch direkt von `schmacko-napf.de` geladen, die übrigen Bilder von Unsplash — vor dem Livegang lokal in `assets/img/` ablegen. +- Texte für Shop und Transportboxen sind Platzhalter. +- Datenschutzerklärung fehlt noch. diff --git a/assets/site.css b/assets/site.css new file mode 100644 index 0000000..ffb9dc3 --- /dev/null +++ b/assets/site.css @@ -0,0 +1,497 @@ +/* ===== Farben – aus dem Schmacko-Napf-Branding ===== */ +:root { + --bg: #fcfaf4; /* Creme */ + --surface: #f2eee0; /* dunkleres Creme für Flächen */ + --ink: #194242; /* Petrol-Grün (Logo) */ + --ink-2: #0f2e2e; + --muted: #4a6866; + --sage: #d0e6a5; /* Salbeigrün */ + --sage-soft: #e6f0d0; + --line: rgba(25, 66, 66, .14); + --on-image: #ffffff; + --radius: 22px; + --gap: 14px; + --pad: clamp(16px, 2.2vw, 28px); + --ease: cubic-bezier(.22, .61, .36, 1); +} + +*, *::before, *::after { box-sizing: border-box; } +html { scroll-behavior: smooth; scroll-padding-top: 96px; } +html, body { margin: 0; } +body { + background: var(--bg); + color: var(--ink); + font-family: "Questrial", "Century Gothic", system-ui, sans-serif; + font-size: 19px; + line-height: 1.55; + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} +a { color: inherit; text-decoration: none; } +img { display: block; max-width: 100%; } +h1, h2, h3 { font-weight: 400; line-height: 1.05; letter-spacing: -.025em; margin: 0; } +p { margin: 0; } +svg { flex: none; } + +/* ===== Header ===== */ +.site-header { + position: sticky; top: 0; z-index: 50; + background: color-mix(in srgb, var(--bg) 90%, transparent); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); +} +.header-inner { + display: flex; align-items: center; gap: 24px; + height: 88px; + padding: 0 var(--pad); +} +.brand { display: inline-flex; align-items: center; } +.brand img { width: 84px; height: 84px; transition: transform .5s var(--ease); } +.brand:hover img { transform: rotate(-6deg); } +.nav { display: flex; gap: 4px; margin-left: auto; } +.nav a { + padding: 10px 16px; + border-radius: 999px; + font-size: 1.05rem; + transition: background .25s var(--ease); +} +.nav a:hover, .nav a[aria-current="page"] { background: var(--sage-soft); } +.burger { + display: none; + width: 52px; height: 52px; + margin-left: auto; + border: 1px solid var(--line); + border-radius: 50%; + background: transparent; + color: var(--ink); + cursor: pointer; + place-items: center; +} +.burger svg { width: 22px; height: 22px; } + +/* Startseite: Header erst nach dem Hero einblenden */ +.is-home .site-header { + position: fixed; left: 0; right: 0; + transform: translateY(-100%); + transition: transform .45s var(--ease); +} +.is-home.scrolled .site-header, .is-home.menu-open .site-header { transform: none; } + +/* ===== Buttons ===== */ +.btn { + display: inline-flex; align-items: center; justify-content: center; gap: 12px; + height: 60px; padding: 0 28px; + border-radius: 999px; + font-size: 1.12rem; + border: 1px solid transparent; + transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); + white-space: nowrap; +} +.btn svg { width: 22px; height: 22px; } +.btn--sage { background: var(--sage); color: var(--ink); } +.btn--sage:hover { background: #c2dc8f; } +.btn--ink { background: var(--ink); color: var(--bg); } +.btn--ink:hover { background: var(--ink-2); } +.btn--line { border-color: rgba(255, 255, 255, .3); color: var(--bg); } +.btn--line:hover { border-color: var(--bg); } +.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } + +/* ===== Hero / Kacheln ===== */ +.hero { + height: 100svh; + min-height: 600px; + display: flex; + padding: var(--pad); +} +.tiles { + flex: 1; + position: relative; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: var(--gap); +} +.tile { + position: relative; + overflow: hidden; + border-radius: var(--radius); + background: var(--surface); + isolation: isolate; + opacity: 0; + transform: translateY(14px); + animation: rise .8s var(--ease) forwards; + transition: opacity .4s var(--ease), filter .4s var(--ease); +} +.tile:nth-of-type(2) { animation-delay: .08s; } +.tile:nth-of-type(3) { animation-delay: .16s; } +.tile:nth-of-type(4) { animation-delay: .24s; } +@keyframes rise { to { opacity: 1; transform: none; } } + +.tile img { + position: absolute; inset: 0; + width: 100%; height: 100%; + object-fit: cover; + z-index: -2; + transition: transform 1s var(--ease); +} +.tile::after { + content: ""; + position: absolute; inset: 0; + z-index: -1; + background: linear-gradient(to top, rgba(10, 18, 14, .62) 0%, rgba(10, 18, 14, .12) 45%, rgba(10, 18, 14, 0) 70%); +} +.tile-foot { + position: absolute; + left: clamp(18px, 2.4vw, 32px); + right: clamp(18px, 2.4vw, 32px); + bottom: clamp(18px, 2.4vw, 30px); + display: flex; + align-items: flex-end; + gap: 16px; + color: var(--on-image); +} +/* rechte Spalte: Beschriftung an die Außenkante */ +.tile:nth-of-type(even) .tile-foot { flex-direction: row-reverse; text-align: right; } +.tile-label { + font-size: clamp(1.7rem, 2.8vw, 2.7rem); + line-height: 1.1; + letter-spacing: -.01em; +} +.tile-label small { + display: block; + margin-top: 6px; + font-size: .48em; + letter-spacing: .02em; + opacity: .85; +} +.tile-arrow { + flex: none; + width: 54px; height: 54px; + border-radius: 50%; + background: rgba(255, 255, 255, .18); + border: 1px solid rgba(255, 255, 255, .45); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + color: var(--on-image); + display: grid; place-items: center; + transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); +} +.tile-arrow svg { width: 20px; height: 20px; transition: transform .5s var(--ease); } + +@media (hover: hover) { + .tiles:has(.tile:hover) .tile:not(:hover) { filter: saturate(.75) brightness(.92); } + .tile:hover img { transform: scale(1.05); } + .tile:hover .tile-arrow { background: var(--sage); border-color: var(--sage); color: var(--ink); } + .tile:hover .tile-arrow svg { transform: rotate(-45deg); } +} +.tile:focus-visible, .btn:focus-visible, .nav a:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; } + +/* Logo-Siegel in der Mitte */ +.seal { + position: absolute; + left: 50%; top: 50%; + z-index: 5; + width: clamp(220px, 21vw, 300px); + aspect-ratio: 1; + margin: 0; + border-radius: 50%; + background: var(--bg); + box-shadow: 0 0 0 var(--gap) var(--bg), 0 18px 50px rgba(25, 66, 66, .18); + display: grid; place-items: center; + transform: translate(-50%, -50%) scale(.9); + opacity: 0; + animation: seal .9s .35s var(--ease) forwards; +} +.seal img { width: 94%; height: 94%; object-fit: contain; } +@keyframes seal { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } + +.scroll-hint { + position: absolute; + left: 50%; bottom: calc(var(--pad) + 14px); + transform: translateX(-50%); + z-index: 6; + width: 44px; height: 44px; + border-radius: 50%; + background: var(--bg); + display: grid; place-items: center; + box-shadow: 0 8px 24px rgba(25, 66, 66, .18); + animation: bob 2.4s var(--ease) infinite; +} +.scroll-hint svg { width: 18px; height: 18px; } +@keyframes bob { 50% { transform: translate(-50%, 6px); } } + + +/* ===== Mosaik aus Flächen (gleicher Stil wie die Kacheln) ===== */ +.mosaic { + display: grid; + gap: var(--gap); + padding: 0 var(--pad) var(--pad); +} +.row { display: grid; gap: var(--gap); grid-template-columns: 1fr 1fr; } +.row--3 { grid-template-columns: repeat(3, 1fr); } +.row--wide { grid-template-columns: 1.25fr 1fr; } +.row--wide-r { grid-template-columns: 1fr 1.25fr; } + +.panel { + position: relative; + overflow: hidden; + isolation: isolate; + border-radius: var(--radius); + padding: clamp(28px, 4.2vw, 72px); + min-height: min(82svh, 820px); + display: flex; flex-direction: column; justify-content: flex-end; + background: var(--surface); +} +.panel--auto { min-height: 0; } +.panel--mid { min-height: min(62svh, 620px); } +.panel--center { justify-content: center; } +.panel--ink { background: var(--ink); color: var(--bg); } +.panel--sage { background: var(--sage); } +.panel--cream { background: var(--surface); } +.panel--plain { background: transparent; } + +/* Foto-Fläche */ +.panel--photo { color: var(--on-image); background: var(--ink); } +.panel--photo > img { + position: absolute; inset: 0; + width: 100%; height: 100%; + object-fit: cover; + z-index: -2; + transition: transform 1.2s var(--ease); +} +.panel--photo::after { + content: ""; position: absolute; inset: 0; z-index: -1; + background: linear-gradient(to top, rgba(10, 22, 20, .72) 0%, rgba(10, 22, 20, .25) 40%, rgba(10, 22, 20, 0) 65%); +} +.panel--photo.plain::after { display: none; } +a.panel--photo:hover > img { transform: scale(1.04); } + +/* Typografie in Flächen */ +.kicker { + display: block; + font-size: 1rem; + letter-spacing: .2em; + text-transform: uppercase; + margin-bottom: 22px; + opacity: .75; +} +.panel--ink .kicker, .panel--photo .kicker { color: var(--sage); opacity: 1; } +.display { font-size: clamp(2.8rem, 6.2vw, 6.4rem); } +.title { font-size: clamp(2.2rem, 4.2vw, 4rem); } +.big { + font-size: clamp(1.25rem, 1.8vw, 1.65rem); + line-height: 1.45; + max-width: 32ch; + margin-top: 24px; +} +.panel--cream .big, .panel--sage .big { color: var(--muted); } +.panel--sage .big { color: var(--ink); opacity: .85; } +.panel--ink .big { color: color-mix(in srgb, var(--bg) 80%, transparent); } +.panel--photo .big { color: rgba(255, 255, 255, .9); } + +/* Pfeil oben rechts in verlinkten Flächen */ +.panel-arrow { + position: absolute; + top: clamp(20px, 2.6vw, 36px); right: clamp(20px, 2.6vw, 36px); + width: 64px; height: 64px; + border-radius: 50%; + display: grid; place-items: center; + background: rgba(255, 255, 255, .18); + border: 1px solid rgba(255, 255, 255, .45); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + color: var(--on-image); + transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); +} +.panel-arrow svg { width: 24px; height: 24px; transition: transform .5s var(--ease); } +a.panel:hover .panel-arrow { background: var(--sage); border-color: var(--sage); color: var(--ink); } +a.panel:hover .panel-arrow svg { transform: rotate(-45deg); } + +/* Kurze Fakten als Pillen */ +.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } +.fact { + padding: 12px 22px; + border-radius: 999px; + font-size: 1.12rem; + background: rgba(255, 255, 255, .16); + border: 1px solid rgba(255, 255, 255, .35); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} +.panel--cream .fact, .panel--sage .fact { background: var(--bg); border-color: transparent; } +.panel--ink .fact { background: rgba(208, 230, 165, .12); border-color: transparent; } + +/* Großes Zitat */ +.statement { + font-size: clamp(2rem, 4.6vw, 4.6rem); + line-height: 1.12; + letter-spacing: -.025em; + max-width: 22ch; + margin: 0 auto; + text-align: center; +} +.statement-by { display: block; text-align: center; margin-top: 28px; font-size: 1.15rem; opacity: .7; } + +/* 5 Säulen als große Wörter */ +.words { list-style: none; padding: 0; margin: 10px 0 0; } +.words li { + display: flex; align-items: baseline; gap: clamp(16px, 2vw, 32px); + padding: clamp(10px, 1.4vw, 18px) 0; + border-bottom: 1px solid rgba(255, 255, 255, .12); + font-size: clamp(2.4rem, 6vw, 6rem); + line-height: 1; + letter-spacing: -.03em; + transition: color .3s var(--ease), padding .4s var(--ease); +} +.words li:hover { color: var(--sage); padding-left: 12px; } +.words small { font-size: 1rem; letter-spacing: .1em; color: var(--sage); width: 2.2em; flex: none; } +.words span { font-size: clamp(1.05rem, 1.4vw, 1.3rem); letter-spacing: 0; color: color-mix(in srgb, var(--bg) 70%, transparent); margin-left: auto; text-align: right; max-width: 26ch; line-height: 1.35; } + +/* Schritte */ +.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); } +.steps li { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 22px; } +.steps b { display: block; font-weight: 400; font-size: clamp(2.6rem, 4vw, 3.6rem); color: var(--sage); line-height: 1; } +.steps strong { display: block; font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.8rem); margin-top: 18px; } +.steps span { display: block; margin-top: 10px; font-size: 1.12rem; color: color-mix(in srgb, var(--bg) 75%, transparent); } + +/* Preise */ +.price-big { margin-top: 30px; } +.price-big strong { display: block; font-weight: 400; font-size: clamp(3rem, 5vw, 4.8rem); line-height: 1; letter-spacing: -.03em; } +.price-big span { display: block; margin-top: 10px; font-size: 1.15rem; opacity: .75; } +.price-rows { margin-top: 36px; } +.price-rows div { + display: flex; justify-content: space-between; align-items: baseline; gap: 20px; + padding: 22px 0; + border-bottom: 1px solid var(--line); + font-size: clamp(1.3rem, 2vw, 1.8rem); +} +.price-rows div:first-child { border-top: 1px solid var(--line); } +.price-rows small { display: block; font-size: 1.05rem; color: var(--muted); margin-top: 6px; letter-spacing: 0; } +.price-rows strong { font-weight: 400; white-space: nowrap; font-size: clamp(1.6rem, 2.6vw, 2.4rem); } + +/* Icon in Flächen */ +.panel-icon { + width: 76px; height: 76px; + border-radius: 50%; + background: var(--bg); + display: grid; place-items: center; + margin-bottom: auto; +} +.panel-icon svg { width: 34px; height: 34px; } +.panel--ink .panel-icon { background: rgba(208, 230, 165, .14); color: var(--sage); } + +/* BARF-Teller */ +.plate-panel { align-items: center; justify-content: center; } +.plate-panel img { width: min(82%, 560px); filter: drop-shadow(0 34px 46px rgba(25, 66, 66, .25)); } + +/* Kontakt */ +.contact-links { display: grid; gap: 12px; margin-top: 40px; max-width: 520px; } +.contact-links a { + display: flex; align-items: center; gap: 18px; + padding: 20px 24px; + border-radius: 18px; + background: rgba(255, 255, 255, .07); + font-size: clamp(1.15rem, 1.6vw, 1.4rem); + transition: background .3s var(--ease); +} +.contact-links a:hover { background: rgba(208, 230, 165, .18); } +.contact-links svg { width: 28px; height: 28px; color: var(--sage); } +.contact-links a > span:last-child { margin-left: auto; opacity: .5; } +.contact-links a > span:last-child svg { width: 22px; height: 22px; color: currentColor; } + +/* Footer */ +.site-footer { + border-radius: var(--radius); + background: var(--ink-2); + color: color-mix(in srgb, var(--bg) 75%, transparent); + padding: clamp(28px, 3.4vw, 48px); + display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; + font-size: 1.05rem; +} +.footer-brand { display: flex; align-items: center; gap: 22px; } +.footer-logo { width: 96px; height: 96px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; flex: none; } +.footer-logo img { width: 92%; } +.footer-links { display: flex; flex-wrap: wrap; gap: 8px 26px; } +.footer-links a:hover { color: var(--bg); } +.footer-meta { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .95rem; opacity: .75; } + +/* Unterseiten-Hero */ +.page-hero { min-height: calc(100svh - 88px - var(--pad)); } +.page-hero h1 { font-size: clamp(3.2rem, 8vw, 8rem); letter-spacing: -.035em; line-height: .98; } + +/* Text-Seite (Impressum) */ +.legal { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.6; } +.legal p + p { margin-top: 28px; } +.legal b { font-weight: 400; display: block; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin-bottom: 6px; } + +/* ===== Scroll-Animationen ===== */ +.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); } +.reveal.in { opacity: 1; transform: none; } +.d1 { transition-delay: .1s; } +.d2 { transition-delay: .2s; } + +.tile:focus-visible, .btn:focus-visible, .nav a:focus-visible, a.panel:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; } + +/* ===== Responsive ===== */ +@media (max-width: 1100px) { + .steps { grid-template-columns: repeat(2, 1fr); row-gap: 34px; } + .nav a { padding: 10px 12px; font-size: 1rem; } +} +@media (max-width: 980px) { + .nav { display: none; } + .burger { display: grid; } + .menu-open .nav { + display: flex; flex-direction: column; gap: 4px; + position: fixed; top: 88px; left: 0; right: 0; + padding: 16px var(--pad) 28px; + background: var(--bg); + box-shadow: 0 24px 40px rgba(25, 66, 66, .12); + } + .menu-open .nav a { padding: 16px 18px; font-size: 1.35rem; } + .row, .row--3, .row--wide, .row--wide-r { grid-template-columns: 1fr; } + .panel { min-height: 0; } + .panel--photo { min-height: 64svh; } + .panel--photo.tall { min-height: 80svh; } + .plate-panel { min-height: 0; padding-block: 56px; } + .words span { display: none; } +} +@media (max-width: 767px) { + body { font-size: 18px; } + .header-inner { height: 76px; } + .brand img { width: 70px; height: 70px; } + .menu-open .nav { top: 76px; } + .hero { height: auto; min-height: 0; display: block; padding: 0 16px 16px; } + .tiles { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; } + .tile { height: 44svh; min-height: 260px; } + .tile:nth-of-type(even) .tile-foot { flex-direction: row; text-align: left; } + .tile-arrow { width: 50px; height: 50px; } + .seal { + position: static; + width: 210px; + margin: 4px auto -6px; + box-shadow: none; + transform: scale(.9); + } + @keyframes seal { to { opacity: 1; transform: none; } } + .scroll-hint { display: none; } + .mosaic { gap: 12px; padding: 0 16px 16px; } + .row { gap: 12px; } + .panel { padding: 30px 24px; } + .panel-arrow { width: 54px; height: 54px; } + .steps { grid-template-columns: 1fr; } + .contact-links a { padding: 18px 18px; } + .page-hero { min-height: calc(100svh - 76px - 16px); } + .footer-brand { flex-direction: column; align-items: flex-start; } +} + +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + .tile, .seal { animation: none; opacity: 1; } + .tile { transform: none; } + .seal { transform: translate(-50%, -50%); } + .scroll-hint { animation: none; } + .reveal { opacity: 1; transform: none; transition: none; } +} +@media (prefers-reduced-motion: reduce) and (max-width: 767px) { + .seal { transform: none; } +} diff --git a/assets/site.js b/assets/site.js new file mode 100644 index 0000000..3e7a965 --- /dev/null +++ b/assets/site.js @@ -0,0 +1,42 @@ +(() => { + const body = document.body; + + // Mobiles Menü + const burger = document.querySelector('.burger'); + if (burger) { + burger.addEventListener('click', () => { + const open = body.classList.toggle('menu-open'); + burger.setAttribute('aria-expanded', open); + }); + document.querySelectorAll('.nav a').forEach(a => + a.addEventListener('click', () => { + body.classList.remove('menu-open'); + burger.setAttribute('aria-expanded', 'false'); + }) + ); + } + + // Startseite: Header einblenden, sobald der Hero verlassen wird + const hero = document.querySelector('.hero'); + if (body.classList.contains('is-home') && hero) { + new IntersectionObserver(([e]) => body.classList.toggle('scrolled', !e.isIntersecting), { + rootMargin: '-120px 0px 0px 0px' + }).observe(hero); + } + + // Elemente beim Scrollen einblenden + const items = document.querySelectorAll('.reveal'); + if ('IntersectionObserver' in window) { + const io = new IntersectionObserver(entries => { + entries.forEach(e => { + if (e.isIntersecting) { + e.target.classList.add('in'); + io.unobserve(e.target); + } + }); + }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); + items.forEach(el => io.observe(el)); + } else { + items.forEach(el => el.classList.add('in')); + } +})(); diff --git a/ernaehrung.html b/ernaehrung.html new file mode 100644 index 0000000..81e9f63 --- /dev/null +++ b/ernaehrung.html @@ -0,0 +1,106 @@ + + + + + + Ernährungsberatung – Schmacko Napf + + + + + + + + + +
+
+ Schmacko Napf & Hundetraining by Katha + + +
+
+
+
+ Hund schnuppert an einem Napf mit Trockenfutter + Ernährungs- & Gesundheitsberatung +

Fürsorge
in Napfform.

+

Individuelle Futterpläne – gesund, sensibel oder mit Diagnose.

+
+ +
+
+ Kennst du das? +

Jeder sagt
etwas anderes.

+

Ich bringe Klarheit in die Futter-Frage – und erstelle einen Plan, der zu deinem Hund passt.

+
BARFTeil-BARFKoch-BARFNassfutterTrockenfutter
+
+
Teller mit frischem Fleisch, Gemüse und Obst
+
+ +
+ Ablauf +

So starten wir.

+
    +
  1. 01ErstgesprächVor Ort, am Telefon oder online.
    2. +
  2. 02FutterplanGenau auf deinen Hund abgestimmt.
    3. +
  3. 03Fragen klärenNach 3 Tagen gehen wir alles durch.
    4. +
  4. 04NachbesprechungNach 4 Wochen schauen wir gemeinsam drauf.
    5. +
+
+ +
+
+ Rationsprüfung +

Passt das
Futter?

+
kostenlos
+
+
+ Erstgespräch +

Kennen­lernen

+
ab 45 €ca. 60 Minuten
+
+
+ Futterplan +

Dein
Plan

+
ab 75 €inkl. Folgegespräch nach 4 Wochen
+
+
+ +
+
+ Kontakt +

Lass uns
sprechen.

+
+ WhatsApp + +49 176 569 329 42 + info@schmacko-napf.de +
+
+
Schwarze Schäferhündin steht aufmerksam im Wald
+
+ +
+ + + diff --git a/hundeschule.html b/hundeschule.html new file mode 100644 index 0000000..bbfa12c --- /dev/null +++ b/hundeschule.html @@ -0,0 +1,109 @@ + + + + + + Hundetraining – Schmacko Napf + + + + + + + + + +
+
+ Schmacko Napf & Hundetraining by Katha + + +
+
+
+
+ Katha mit ihrem Hund auf einer Wiese im Abendlicht + Hundetraining +

Für beide Seiten
der Leine.

+

Vertrauen, klare Kommunikation und Training, das im Alltag funktioniert.

+
+ +
+
+ Einzeltraining & Hausbesuch +

Individuell.
Bei dir zu Hause.

+

Für Grundgehorsam, Unsicherheit, Leinenführigkeit oder einen neuen Hund im Haus.

+
60 €pro Stunde · nach dem Erstgespräch (120 €, ca. 2 Std.)
+
+
Schwarze Schäferhündin steht aufmerksam im Wald
+
+ +
+
Schwarzer Schäferhund rennt über einen Feldweg
+
+ Gruppe & Außentraining +

Training da, wo
das Leben ist.

+

In der Stadt, im Grünen, in Geschäften – mit max. 6 Mensch-Hund-Teams.

+
18 €pro Mensch-Hund-Team
+
+
+ +
+ Die 5 Säulen +
    +
  • 01RespektHunde wollen ernst genommen werden.
    • +
  • 02EhrlichkeitHunde lesen unsere Körpersprache sofort.
    • +
  • 03GeduldLernen braucht Zeit und Wiederholung.
    • +
  • 04KonsequenzKlare Regeln, ganz ohne Gewalt.
    • +
  • 05VerständnisRealistische Erwartungen an jeden Hund.
    • +
+
+ +
+ Preise +

Fair und klar.

+
+
Erstgespräch Einzeltrainingca. 2 Stunden · zzgl. 0,30 € / km120 €
+
Einzeltrainingpro Stunde · zzgl. 0,30 € / km60 €
+
Gruppentrainingpro Mensch-Hund-Team18 €
+
10er-KarteGruppe & Einzel frei kombinierbar165 €
+
+
+ +
+
+ Kontakt +

Lass uns
sprechen.

+
+ WhatsApp + +49 176 569 329 42 + info@schmacko-napf.de +
+
+
Katha sitzt mit ihrer Schäferhündin im Grünen
+
+ +
+ + + diff --git a/impressum.html b/impressum.html new file mode 100644 index 0000000..bf628a9 --- /dev/null +++ b/impressum.html @@ -0,0 +1,58 @@ + + + + + + Impressum – Schmacko Napf + + + + + + + + + +
+
+ Schmacko Napf & Hundetraining by Katha + + +
+
+
+
+ Rechtliches +

Impressum

+
+

Angaben gemäß § 5 TMGKatharina Schulz
Seewiese 19
84109 Wörth a.d. Isar

+

KontaktTelefon: +49 176 569 329 42
E-Mail: info@schmacko-napf.de

+

Verantwortlich gemäß § 18 Abs. 2 MStVKatharina Schulz, Anschrift wie oben

+

FotosSteffi Biller, KK-Fotografie · weitere Bilder: Unsplash

+
+
+ +
+ + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..2f35bf4 --- /dev/null +++ b/index.html @@ -0,0 +1,163 @@ + + + + + + Schmacko Napf & Hundetraining by Katha + + + + + + + + + +
+
+ Schmacko Napf & Hundetraining by Katha + + +
+
+
+ +
+ +
+
+
+ Über mich +

Hallo,
ich bin Katha.

+

Hundetrainerin und Ernährungsberaterin – mit Herz und Verstand. Für beide Seiten der Leine.

+
+ § 11 TierSchG zertifiziert + Ernährungs- & Gesundheitsberaterin +
+
+
Katha sitzt mit ihrer Schäferhündin Elina im Grünen
+
+ + + Schwarzer Schäferhund rennt freudig über einen Feldweg + + Hundetraining +

Entspannt durch
den Alltag.

+

Einzeltraining, Hausbesuch und Außentraining in der Gruppe.

+
+ Einzeltraining 60 € / Std. + Gruppe 18 € + 10er-Karte 165 € +
+ + +
+
Teller mit frischem Fleisch, Gemüse und Obst für die Rohfütterung
+ + + Ernährungsberatung +

Gesund
gefüttert.

+

Individuelle Futterpläne – für jedes Alter, auch bei Magen-Darm- oder Pankreas-Problemen.

+
BARFKoch-BARFNass- & Trockenfutter
+ +
+ +
+

„Futter ist mehr als nur Nahrung – es ist Fürsorge in Napfform.“

+ — Katha +
+ +
+ Meine Philosophie · die 5 Säulen +
    +
  • 01RespektDen Hund als eigenständiges Wesen ernst nehmen.
    • +
  • 02EhrlichkeitKlare Signale schaffen Vertrauen.
    • +
  • 03GeduldJeder Hund lernt in seinem Tempo.
    • +
  • 04KonsequenzKlare Regeln – fair und ohne Druck.
    • +
  • 05VerständnisBedürfnisse und Gefühle verstehen.
    • +
+
+ +
+ + Hund in einem Laden mit Hundezubehör + + Shop +

Futter, Snacks
& Zubehör.

+ + + Hund sitzt im Kofferraum hinter einem Trenngitter + + Maßanfertigung +

Transportboxen
fürs Auto.

+ +
+ +
+
+ Kontakt +

Lass uns
sprechen.

+
+ WhatsApp + +49 176 569 329 42 + info@schmacko-napf.de +
+
+
Schwarze Schäferhündin steht aufmerksam im Wald
+
+ +
+ + + diff --git a/shop.html b/shop.html new file mode 100644 index 0000000..fcdcb13 --- /dev/null +++ b/shop.html @@ -0,0 +1,77 @@ + + + + + + Shop – Schmacko Napf + + + + + + + + + +
+
+ Schmacko Napf & Hundetraining by Katha + + +
+
+
+
+ Hund in einem Laden mit Hundezubehör + Shop +

Ausgewählt
mit Herz.

+

Futter, Snacks und Zubehör, hinter denen ich stehe.

+
+ +
+

Futter

Passend zu deinem Futterplan.

+

Snacks

Natürlich – fürs Training und zum Belohnen.

+

Zubehör

Robust und durchdacht für den Alltag.

+
+ +
+

Der Online-Shop ist bald da.
Bis dahin: schreib mir einfach.

+
+ +
+
+ Kontakt +

Lass uns
sprechen.

+
+ WhatsApp + +49 176 569 329 42 + info@schmacko-napf.de +
+
+
Schwarze Schäferhündin steht aufmerksam im Wald
+
+ +
+ + + diff --git a/tools/build_pages.py b/tools/build_pages.py new file mode 100644 index 0000000..9cab3eb --- /dev/null +++ b/tools/build_pages.py @@ -0,0 +1,374 @@ +import os +OUT = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) + +WP = "https://schmacko-napf.de/wp-content/uploads/" +LOGO = WP + "2024/12/Logo-Transparent-Rechnung.png" +KK = {n: f"{WP}2025/01/KK-Fotografie-{n}.jpg" for n in (35, 46, 51, 66)} +BARF = WP + "2023/06/Barf.png" +def U(pid, w=1600): return f"https://images.unsplash.com/photo-{pid}?auto=format&fit=crop&w={w}&q=80" +IMG_FOOD = "1714068691210-073dc52c6c1d" +IMG_SHOP = "1733451629760-d5fc1c818698" +IMG_CAR = "1771777400696-3af9b6470ff8" + +PHONE, PHONE_HREF = "+49 176 569 329 42", "tel:+4917656932942" +MAIL = "info@schmacko-napf.de" +WA = "https://wa.me/4917656932942" + +def ic(d, sw="1.8"): + return f'' +I = { + "arrow": ic('', "2"), + "down": ic('', "2"), + "menu": ic('', "2"), + "phone": ic(''), + "mail": ic(''), + "chat": ic(''), + "bowl": ic(''), + "bone": ic(''), + "leash": ic(''), + "car": ic(''), + "shield": ic(''), + "wind": ic(''), +} +ARROW_BADGE = f'{I["arrow"]}' + +NAV = [("hundeschule.html", "Hundetraining"), ("ernaehrung.html", "Ernährung"), ("shop.html", "Shop"), + ("transportboxen.html", "Transportboxen"), ("index.html#kontakt", "Kontakt")] + +def head(title, desc): + return f''' + + + + + {title} + + + + + + + + +''' + +def header(current=None): + cur = ' aria-current="page"' + links = "\n".join(f' {t}' for h, t in NAV) + return f'''
+
+ Schmacko Napf & Hundetraining by Katha + + +
+
+''' + +def contact(photo=KK[46], alt="Schwarze Schäferhündin steht aufmerksam im Wald"): + go = f'{I["arrow"]}' + return f'''
+
+ Kontakt +

Lass uns
sprechen.

+
+ {I["chat"]}WhatsApp{go} + {I["phone"]}{PHONE}{go} + {I["mail"]}{MAIL}{go} +
+
+
{alt}
+
+''' + +def footer(): + return f''' + + + + +''' + +def page_hero(img, kicker, title, text, alt): + return f'''
+ {alt} + {kicker} +

{title}

+

{text}

+
+''' + +def page(name, title, desc, current, body): + write(name, head(title, desc) + "\n" + header(current) + '
\n' + body + footer()) + +def write(name, html): + open(os.path.join(OUT, name), "w").write(html) + +# ================================================================ Startseite +tiles = [ + ("hundeschule.html", "Hundeschule", "", KK[66], "Katha mit ihrem Hund auf einer Wiese im Abendlicht", None), + ("ernaehrung.html", "Ernährungsberatung", "", U(IMG_FOOD, 1400), "Hund schnuppert an einem Napf mit Trockenfutter", IMG_FOOD), + ("shop.html", "Shop", "", U(IMG_SHOP, 1400), "Hund in einem Laden mit Hundezubehör", IMG_SHOP), + ("transportboxen.html", "Transportboxen", "Maßanfertigung fürs Auto", U(IMG_CAR, 1400), "Hund sitzt im offenen Kofferraum hinter einem Trenngitter", IMG_CAR), +] +tile_html = "" +for href, name, sub, src, alt, pid in tiles: + small = f"{sub}" if sub else "" + srcset = f' srcset="{U(pid,800)} 800w, {U(pid,1400)} 1400w, {U(pid,2000)} 2000w" sizes="(max-width: 767px) 100vw, 50vw"' if pid else "" + tile_html += f''' + {alt} + + {name}{small} + {I["arrow"]} + + +''' + +index = head("Schmacko Napf & Hundetraining by Katha", "Hundetraining, Ernährungs- und Gesundheitsberatung, Shop und maßgefertigte Transportboxen – Schmacko Napf by Katha.") + '\n' + header() + f'''
+ +
+ +
+
+
+ Über mich +

Hallo,
ich bin Katha.

+

Hundetrainerin und Ernährungsberaterin – mit Herz und Verstand. Für beide Seiten der Leine.

+
+ § 11 TierSchG zertifiziert + Ernährungs- & Gesundheitsberaterin +
+
+
Katha sitzt mit ihrer Schäferhündin Elina im Grünen
+
+ + + Schwarzer Schäferhund rennt freudig über einen Feldweg + {ARROW_BADGE} + Hundetraining +

Entspannt durch
den Alltag.

+

Einzeltraining, Hausbesuch und Außentraining in der Gruppe.

+
+ Einzeltraining 60 € / Std. + Gruppe 18 € + 10er-Karte 165 € +
+ + +
+
Teller mit frischem Fleisch, Gemüse und Obst für die Rohfütterung
+ + {I["arrow"]} + Ernährungsberatung +

Gesund
gefüttert.

+

Individuelle Futterpläne – für jedes Alter, auch bei Magen-Darm- oder Pankreas-Problemen.

+
BARFKoch-BARFNass- & Trockenfutter
+ +
+ +
+

„Futter ist mehr als nur Nahrung – es ist Fürsorge in Napfform.“

+ — Katha +
+ +
+ Meine Philosophie · die 5 Säulen +
    +
  • 01RespektDen Hund als eigenständiges Wesen ernst nehmen.
    • +
  • 02EhrlichkeitKlare Signale schaffen Vertrauen.
    • +
  • 03GeduldJeder Hund lernt in seinem Tempo.
    • +
  • 04KonsequenzKlare Regeln – fair und ohne Druck.
    • +
  • 05VerständnisBedürfnisse und Gefühle verstehen.
    • +
+
+ +
+ + Hund in einem Laden mit Hundezubehör + {ARROW_BADGE} + Shop +

Futter, Snacks
& Zubehör.

+ + + Hund sitzt im Kofferraum hinter einem Trenngitter + {ARROW_BADGE} + Maßanfertigung +

Transportboxen
fürs Auto.

+ +
+ +{contact()}''' + footer().replace("
\n", "
\n", 1) +write("index.html", index) + +# ================================================================ Hundetraining +page("hundeschule.html", "Hundetraining – Schmacko Napf", + "Einzeltraining, Hausbesuche und Gruppentraining im Außenbereich mit Katha, zertifizierte Hundetrainerin nach § 11 TierSchG.", + "hundeschule.html", + page_hero(KK[66], "Hundetraining", "Für beide Seiten
der Leine.", + "Vertrauen, klare Kommunikation und Training, das im Alltag funktioniert.", + "Katha mit ihrem Hund auf einer Wiese im Abendlicht") + f''' +
+
+ Einzeltraining & Hausbesuch +

Individuell.
Bei dir zu Hause.

+

Für Grundgehorsam, Unsicherheit, Leinenführigkeit oder einen neuen Hund im Haus.

+
60 €pro Stunde · nach dem Erstgespräch (120 €, ca. 2 Std.)
+
+
Schwarze Schäferhündin steht aufmerksam im Wald
+
+ +
+
Schwarzer Schäferhund rennt über einen Feldweg
+
+ Gruppe & Außentraining +

Training da, wo
das Leben ist.

+

In der Stadt, im Grünen, in Geschäften – mit max. 6 Mensch-Hund-Teams.

+
18 €pro Mensch-Hund-Team
+
+
+ +
+ Die 5 Säulen +
    +
  • 01RespektHunde wollen ernst genommen werden.
    • +
  • 02EhrlichkeitHunde lesen unsere Körpersprache sofort.
    • +
  • 03GeduldLernen braucht Zeit und Wiederholung.
    • +
  • 04KonsequenzKlare Regeln, ganz ohne Gewalt.
    • +
  • 05VerständnisRealistische Erwartungen an jeden Hund.
    • +
+
+ +
+ Preise +

Fair und klar.

+
+
Erstgespräch Einzeltrainingca. 2 Stunden · zzgl. 0,30 € / km120 €
+
Einzeltrainingpro Stunde · zzgl. 0,30 € / km60 €
+
Gruppentrainingpro Mensch-Hund-Team18 €
+
10er-KarteGruppe & Einzel frei kombinierbar165 €
+
+
+ +{contact(KK[35], "Katha sitzt mit ihrer Schäferhündin im Grünen")}''') + +# ================================================================ Ernährung +page("ernaehrung.html", "Ernährungsberatung – Schmacko Napf", + "Individuelle Futterpläne und Gesundheitsberatung für Hunde jeden Alters – BARF, Koch-BARF, Nass- und Trockenfutter.", + "ernaehrung.html", + page_hero(U(IMG_FOOD, 2000), "Ernährungs- & Gesundheitsberatung", "Fürsorge
in Napfform.", + "Individuelle Futterpläne – gesund, sensibel oder mit Diagnose.", + "Hund schnuppert an einem Napf mit Trockenfutter") + f''' +
+
+ Kennst du das? +

Jeder sagt
etwas anderes.

+

Ich bringe Klarheit in die Futter-Frage – und erstelle einen Plan, der zu deinem Hund passt.

+
BARFTeil-BARFKoch-BARFNassfutterTrockenfutter
+
+
Teller mit frischem Fleisch, Gemüse und Obst
+
+ +
+ Ablauf +

So starten wir.

+
    +
  1. 01ErstgesprächVor Ort, am Telefon oder online.
    2. +
  2. 02FutterplanGenau auf deinen Hund abgestimmt.
    3. +
  3. 03Fragen klärenNach 3 Tagen gehen wir alles durch.
    4. +
  4. 04NachbesprechungNach 4 Wochen schauen wir gemeinsam drauf.
    5. +
+
+ +
+
+ Rationsprüfung +

Passt das
Futter?

+
kostenlos
+
+
+ Erstgespräch +

Kennen­lernen

+
ab 45 €ca. 60 Minuten
+
+
+ Futterplan +

Dein
Plan

+
ab 75 €inkl. Folgegespräch nach 4 Wochen
+
+
+ +{contact()}''') + +# ================================================================ Shop +page("shop.html", "Shop – Schmacko Napf", "Ausgewähltes Futter, Snacks und Zubehör für deinen Hund.", "shop.html", + page_hero(U(IMG_SHOP, 2000), "Shop", "Ausgewählt
mit Herz.", + "Futter, Snacks und Zubehör, hinter denen ich stehe.", + "Hund in einem Laden mit Hundezubehör") + f''' +
+
{I["bowl"]}

Futter

Passend zu deinem Futterplan.

+
{I["bone"]}

Snacks

Natürlich – fürs Training und zum Belohnen.

+
{I["leash"]}

Zubehör

Robust und durchdacht für den Alltag.

+
+ +
+

Der Online-Shop ist bald da.
Bis dahin: schreib mir einfach.

+
+ +{contact()}''') + +# ================================================================ Transportboxen +page("transportboxen.html", "Transportboxen nach Maß – Schmacko Napf", + "Maßgefertigte Hunde-Transportboxen fürs Auto – passgenau für Fahrzeug und Hund.", "transportboxen.html", + page_hero(U(IMG_CAR, 2000), "Maßanfertigung", "Transportboxen
fürs Auto.", + "Passgenau für dein Fahrzeug und deinen Hund.", + "Hund sitzt im offenen Kofferraum hinter einem Trenngitter") + f''' +
+
{I["car"]}

Passgenau

Exakt für deinen Kofferraum gebaut.

+
{I["shield"]}

Sicher

Stabil – für jede Fahrt.

+
{I["wind"]}

Bequem

Luftig und mit genug Platz.

+
+ +
+ Ablauf +

In 4 Schritten zur eigenen Box.

+
    +
  1. 01BeratungAuto, Hund und Wünsche.
    2. +
  2. 02AusmessenKofferraum und Hund genau vermessen.
    3. +
  3. 03FertigungDeine Box entsteht nach Maß.
    4. +
  4. 04ÜbergabeEinbau – und los geht’s.
    5. +
+
+ +{contact()}''') + +# ================================================================ Impressum +page("impressum.html", "Impressum – Schmacko Napf", "Impressum von Schmacko Napf & Hundetraining by Katha.", None, f'''
+ Rechtliches +

Impressum

+
+

Angaben gemäß § 5 TMGKatharina Schulz
Seewiese 19
84109 Wörth a.d. Isar

+

KontaktTelefon: {PHONE}
E-Mail: {MAIL}

+

Verantwortlich gemäß § 18 Abs. 2 MStVKatharina Schulz, Anschrift wie oben

+

FotosSteffi Biller, KK-Fotografie · weitere Bilder: Unsplash

+
+
+''') +print("ok") diff --git a/transportboxen.html b/transportboxen.html new file mode 100644 index 0000000..2a557ca --- /dev/null +++ b/transportboxen.html @@ -0,0 +1,84 @@ + + + + + + Transportboxen nach Maß – Schmacko Napf + + + + + + + + + +
+
+ Schmacko Napf & Hundetraining by Katha + + +
+
+
+
+ Hund sitzt im offenen Kofferraum hinter einem Trenngitter + Maßanfertigung +

Transportboxen
fürs Auto.

+

Passgenau für dein Fahrzeug und deinen Hund.

+
+ +
+

Passgenau

Exakt für deinen Kofferraum gebaut.

+

Sicher

Stabil – für jede Fahrt.

+

Bequem

Luftig und mit genug Platz.

+
+ +
+ Ablauf +

In 4 Schritten zur eigenen Box.

+
    +
  1. 01BeratungAuto, Hund und Wünsche.
    2. +
  2. 02AusmessenKofferraum und Hund genau vermessen.
    3. +
  3. 03FertigungDeine Box entsteht nach Maß.
    4. +
  4. 04ÜbergabeEinbau – und los geht’s.
    5. +
+
+ +
+
+ Kontakt +

Lass uns
sprechen.

+
+ WhatsApp + +49 176 569 329 42 + info@schmacko-napf.de +
+
+
Schwarze Schäferhündin steht aufmerksam im Wald
+
+ +
+ + +