WEBklar/Schmacko-napf
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Erster Entwurf: Landingpage mit 4 Kacheln und Unterseiten

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
NotPika69andClaude Opus 5.5 committed 2026-10-01 18:58:29 +02:00
commit 6d8df3d508
11 files changed
+1556
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.gitignore
+11
View File
@@ -0,0 +1,11 @@
# macOS
.DS_Store
._*
# Editor / lokale Werkzeuge
.vscode/
.idea/
.claude/
__pycache__/
*.log
node_modules/
README.md
+35
View File
@@ -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.
assets/site.css
+497
View File
@@ -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; }
}
assets/site.js
+42
View File
@@ -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'));
}
})();
ernaehrung.html
+106
View File
@@ -0,0 +1,106 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ernährungsberatung – Schmacko Napf</title>
<meta name="description" content="Individuelle Futterpläne und Gesundheitsberatung für Hunde jeden Alters – BARF, Koch-BARF, Nass- und Trockenfutter.">
<meta name="theme-color" content="#fcfaf4">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23194242'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/site.css">
</head>
<body>
<header class="site-header">
<div class="header-inner">
<a class="brand" href="index.html" aria-label="Schmacko Napf – Startseite"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<nav class="nav" aria-label="Hauptmenü">
<a href="hundeschule.html">Hundetraining</a>
<a href="ernaehrung.html" aria-current="page">Ernährung</a>
<a href="shop.html">Shop</a>
<a href="transportboxen.html">Transportboxen</a>
<a href="index.html#kontakt">Kontakt</a>
</nav>
<button class="burger" type="button" aria-label="Menü öffnen" aria-expanded="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
</div>
</header>
<main class="mosaic">
<section class="panel panel--photo page-hero">
<img src="https://images.unsplash.com/photo-1714068691210-073dc52c6c1d?auto=format&fit=crop&w=2000&q=80" alt="Hund schnuppert an einem Napf mit Trockenfutter">
<span class="kicker">Ernährungs- &amp; Gesundheitsberatung</span>
<h1>Fürsorge<br>in Napfform.</h1>
<p class="big">Individuelle Futterpläne – gesund, sensibel oder mit Diagnose.</p>
</section>
<div class="row">
<div class="panel panel--cream reveal">
<span class="kicker">Kennst du das?</span>
<h2 class="title">Jeder sagt<br>etwas anderes.</h2>
<p class="big">Ich bringe Klarheit in die Futter-Frage – und erstelle einen Plan, der zu deinem Hund passt.</p>
<div class="facts"><span class="fact">BARF</span><span class="fact">Teil-BARF</span><span class="fact">Koch-BARF</span><span class="fact">Nassfutter</span><span class="fact">Trockenfutter</span></div>
</div>
<div class="panel panel--sage plate-panel reveal d1"><img src="https://schmacko-napf.de/wp-content/uploads/2023/06/Barf.png" alt="Teller mit frischem Fleisch, Gemüse und Obst" loading="lazy"></div>
</div>
<div class="panel panel--ink panel--auto reveal">
<span class="kicker">Ablauf</span>
<h2 class="title">So starten wir.</h2>
<ol class="steps">
<li><b>01</b><strong>Erstgespräch</strong><span>Vor Ort, am Telefon oder online.</span></li>
<li><b>02</b><strong>Futterplan</strong><span>Genau auf deinen Hund abgestimmt.</span></li>
<li><b>03</b><strong>Fragen klären</strong><span>Nach 3 Tagen gehen wir alles durch.</span></li>
<li><b>04</b><strong>Nachbesprechung</strong><span>Nach 4 Wochen schauen wir gemeinsam drauf.</span></li>
</ol>
</div>
<div class="row row--3">
<div class="panel panel--cream panel--mid reveal">
<span class="kicker">Rationsprüfung</span>
<h2 class="title">Passt das<br>Futter?</h2>
<div class="price-big"><strong>kostenlos</strong></div>
</div>
<div class="panel panel--sage panel--mid reveal d1">
<span class="kicker">Erstgespräch</span>
<h2 class="title">Kennen&shy;lernen</h2>
<div class="price-big"><strong>ab 45 €</strong><span>ca. 60 Minuten</span></div>
</div>
<div class="panel panel--ink panel--mid reveal d2">
<span class="kicker">Futterplan</span>
<h2 class="title">Dein<br>Plan</h2>
<div class="price-big"><strong>ab 75 €</strong><span>inkl. Folgegespräch nach 4 Wochen</span></div>
</div>
</div>
<div class="row row--wide" id="kontakt">
<div class="panel panel--ink reveal">
<span class="kicker">Kontakt</span>
<h2 class="display">Lass uns<br>sprechen.</h2>
<div class="contact-links">
<a href="https://wa.me/4917656932942" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4A8 8 0 1 1 20 11.5z"/></svg><span>WhatsApp</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
<a href="tel:+4917656932942"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span>+49 176 569 329 42</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
<a href="mailto:info@schmacko-napf.de"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/></svg><span>info@schmacko-napf.de</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
</div>
</div>
<div class="panel panel--photo plain reveal d1"><img src="https://schmacko-napf.de/wp-content/uploads/2025/01/KK-Fotografie-46.jpg" alt="Schwarze Schäferhündin steht aufmerksam im Wald" loading="lazy"></div>
</div>
<footer class="site-footer">
<div class="footer-brand">
<a class="footer-logo" href="index.html"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<span>Ernährung, Gesundheit und Training –<br>mit Herz und Verstand.</span>
</div>
<nav class="footer-links" aria-label="Footer">
<a href="hundeschule.html">Hundetraining</a>
<a href="ernaehrung.html">Ernährung</a>
<a href="shop.html">Shop</a>
<a href="transportboxen.html">Transportboxen</a>
<a href="impressum.html">Impressum</a>
<a href="#">Datenschutz</a>
</nav>
<div class="footer-meta"><span>© 2026 Schmacko Napf &amp; Hundetraining by Katha</span><span>Fotos: Steffi Biller, KK-Fotografie</span></div>
</footer>
</main>
<script src="assets/site.js"></script>
</body>
</html>
hundeschule.html
+109
View File
@@ -0,0 +1,109 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hundetraining – Schmacko Napf</title>
<meta name="description" content="Einzeltraining, Hausbesuche und Gruppentraining im Außenbereich mit Katha, zertifizierte Hundetrainerin nach § 11 TierSchG.">
<meta name="theme-color" content="#fcfaf4">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23194242'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/site.css">
</head>
<body>
<header class="site-header">
<div class="header-inner">
<a class="brand" href="index.html" aria-label="Schmacko Napf – Startseite"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<nav class="nav" aria-label="Hauptmenü">
<a href="hundeschule.html" aria-current="page">Hundetraining</a>
<a href="ernaehrung.html">Ernährung</a>
<a href="shop.html">Shop</a>
<a href="transportboxen.html">Transportboxen</a>
<a href="index.html#kontakt">Kontakt</a>
</nav>
<button class="burger" type="button" aria-label="Menü öffnen" aria-expanded="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
</div>
</header>
<main class="mosaic">
<section class="panel panel--photo page-hero">
<img src="https://schmacko-napf.de/wp-content/uploads/2025/01/KK-Fotografie-66.jpg" alt="Katha mit ihrem Hund auf einer Wiese im Abendlicht">
<span class="kicker">Hundetraining</span>
<h1>Für beide Seiten<br>der Leine.</h1>
<p class="big">Vertrauen, klare Kommunikation und Training, das im Alltag funktioniert.</p>
</section>
<div class="row row--wide-r">
<div class="panel panel--cream reveal">
<span class="kicker">Einzeltraining &amp; Hausbesuch</span>
<h2 class="title">Individuell.<br>Bei dir zu Hause.</h2>
<p class="big">Für Grundgehorsam, Unsicherheit, Leinenführigkeit oder einen neuen Hund im Haus.</p>
<div class="price-big"><strong>60 €</strong><span>pro Stunde · nach dem Erstgespräch (120 €, ca. 2 Std.)</span></div>
</div>
<div class="panel panel--photo plain reveal d1"><img src="https://schmacko-napf.de/wp-content/uploads/2025/01/KK-Fotografie-46.jpg" alt="Schwarze Schäferhündin steht aufmerksam im Wald" loading="lazy"></div>
</div>
<div class="row row--wide">
<div class="panel panel--photo plain reveal"><img src="https://schmacko-napf.de/wp-content/uploads/2025/01/KK-Fotografie-51.jpg" alt="Schwarzer Schäferhund rennt über einen Feldweg" loading="lazy"></div>
<div class="panel panel--ink reveal d1">
<span class="kicker">Gruppe &amp; Außentraining</span>
<h2 class="title">Training da, wo<br>das Leben ist.</h2>
<p class="big">In der Stadt, im Grünen, in Geschäften – mit max. 6 Mensch-Hund-Teams.</p>
<div class="price-big"><strong>18 €</strong><span>pro Mensch-Hund-Team</span></div>
</div>
</div>
<div class="panel panel--ink panel--auto reveal">
<span class="kicker">Die 5 Säulen</span>
<ul class="words">
<li><small>01</small>Respekt<span>Hunde wollen ernst genommen werden.</span></li>
<li><small>02</small>Ehrlichkeit<span>Hunde lesen unsere Körpersprache sofort.</span></li>
<li><small>03</small>Geduld<span>Lernen braucht Zeit und Wiederholung.</span></li>
<li><small>04</small>Konsequenz<span>Klare Regeln, ganz ohne Gewalt.</span></li>
<li><small>05</small>Verständnis<span>Realistische Erwartungen an jeden Hund.</span></li>
</ul>
</div>
<div class="panel panel--cream panel--auto reveal">
<span class="kicker">Preise</span>
<h2 class="title">Fair und klar.</h2>
<div class="price-rows">
<div><span>Erstgespräch Einzeltraining<small>ca. 2 Stunden · zzgl. 0,30 € / km</small></span><strong>120 €</strong></div>
<div><span>Einzeltraining<small>pro Stunde · zzgl. 0,30 € / km</small></span><strong>60 €</strong></div>
<div><span>Gruppentraining<small>pro Mensch-Hund-Team</small></span><strong>18 €</strong></div>
<div><span>10er-Karte<small>Gruppe &amp; Einzel frei kombinierbar</small></span><strong>165 €</strong></div>
</div>
</div>
<div class="row row--wide" id="kontakt">
<div class="panel panel--ink reveal">
<span class="kicker">Kontakt</span>
<h2 class="display">Lass uns<br>sprechen.</h2>
<div class="contact-links">
<a href="https://wa.me/4917656932942" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4A8 8 0 1 1 20 11.5z"/></svg><span>WhatsApp</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
<a href="tel:+4917656932942"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span>+49 176 569 329 42</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
<a href="mailto:info@schmacko-napf.de"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/></svg><span>info@schmacko-napf.de</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
</div>
</div>
<div class="panel panel--photo plain reveal d1"><img src="https://schmacko-napf.de/wp-content/uploads/2025/01/KK-Fotografie-35.jpg" alt="Katha sitzt mit ihrer Schäferhündin im Grünen" loading="lazy"></div>
</div>
<footer class="site-footer">
<div class="footer-brand">
<a class="footer-logo" href="index.html"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<span>Ernährung, Gesundheit und Training –<br>mit Herz und Verstand.</span>
</div>
<nav class="footer-links" aria-label="Footer">
<a href="hundeschule.html">Hundetraining</a>
<a href="ernaehrung.html">Ernährung</a>
<a href="shop.html">Shop</a>
<a href="transportboxen.html">Transportboxen</a>
<a href="impressum.html">Impressum</a>
<a href="#">Datenschutz</a>
</nav>
<div class="footer-meta"><span>© 2026 Schmacko Napf &amp; Hundetraining by Katha</span><span>Fotos: Steffi Biller, KK-Fotografie</span></div>
</footer>
</main>
<script src="assets/site.js"></script>
</body>
</html>
impressum.html
+58
View File
@@ -0,0 +1,58 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Impressum – Schmacko Napf</title>
<meta name="description" content="Impressum von Schmacko Napf & Hundetraining by Katha.">
<meta name="theme-color" content="#fcfaf4">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23194242'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/site.css">
</head>
<body>
<header class="site-header">
<div class="header-inner">
<a class="brand" href="index.html" aria-label="Schmacko Napf – Startseite"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<nav class="nav" aria-label="Hauptmenü">
<a href="hundeschule.html">Hundetraining</a>
<a href="ernaehrung.html">Ernährung</a>
<a href="shop.html">Shop</a>
<a href="transportboxen.html">Transportboxen</a>
<a href="index.html#kontakt">Kontakt</a>
</nav>
<button class="burger" type="button" aria-label="Menü öffnen" aria-expanded="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
</div>
</header>
<main class="mosaic">
<div class="panel panel--cream panel--auto">
<span class="kicker">Rechtliches</span>
<h1 class="display">Impressum</h1>
<div class="legal" style="margin-top:48px">
<p><b>Angaben gemäß § 5 TMG</b>Katharina Schulz<br>Seewiese 19<br>84109 Wörth a.d. Isar</p>
<p><b>Kontakt</b>Telefon: +49 176 569 329 42<br>E-Mail: info@schmacko-napf.de</p>
<p><b>Verantwortlich gemäß § 18 Abs. 2 MStV</b>Katharina Schulz, Anschrift wie oben</p>
<p><b>Fotos</b>Steffi Biller, KK-Fotografie · weitere Bilder: Unsplash</p>
</div>
</div>
<footer class="site-footer">
<div class="footer-brand">
<a class="footer-logo" href="index.html"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<span>Ernährung, Gesundheit und Training –<br>mit Herz und Verstand.</span>
</div>
<nav class="footer-links" aria-label="Footer">
<a href="hundeschule.html">Hundetraining</a>
<a href="ernaehrung.html">Ernährung</a>
<a href="shop.html">Shop</a>
<a href="transportboxen.html">Transportboxen</a>
<a href="impressum.html">Impressum</a>
<a href="#">Datenschutz</a>
</nav>
<div class="footer-meta"><span>© 2026 Schmacko Napf &amp; Hundetraining by Katha</span><span>Fotos: Steffi Biller, KK-Fotografie</span></div>
</footer>
</main>
<script src="assets/site.js"></script>
</body>
</html>
index.html
+163
View File
@@ -0,0 +1,163 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schmacko Napf & Hundetraining by Katha</title>
<meta name="description" content="Hundetraining, Ernährungs- und Gesundheitsberatung, Shop und maßgefertigte Transportboxen – Schmacko Napf by Katha.">
<meta name="theme-color" content="#fcfaf4">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23194242'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/site.css">
</head>
<body class="is-home">
<header class="site-header">
<div class="header-inner">
<a class="brand" href="index.html" aria-label="Schmacko Napf – Startseite"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<nav class="nav" aria-label="Hauptmenü">
<a href="hundeschule.html">Hundetraining</a>
<a href="ernaehrung.html">Ernährung</a>
<a href="shop.html">Shop</a>
<a href="transportboxen.html">Transportboxen</a>
<a href="index.html#kontakt">Kontakt</a>
</nav>
<button class="burger" type="button" aria-label="Menü öffnen" aria-expanded="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
</div>
</header>
<section class="hero">
<nav class="tiles" aria-label="Bereiche">
<h1 class="seal"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></h1>
<a class="tile" href="hundeschule.html">
<img src="https://schmacko-napf.de/wp-content/uploads/2025/01/KK-Fotografie-66.jpg" alt="Katha mit ihrem Hund auf einer Wiese im Abendlicht">
<span class="tile-foot">
<span class="tile-label">Hundeschule</span>
<span class="tile-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</span>
</a>
<a class="tile" href="ernaehrung.html">
<img src="https://images.unsplash.com/photo-1714068691210-073dc52c6c1d?auto=format&fit=crop&w=1400&q=80" srcset="https://images.unsplash.com/photo-1714068691210-073dc52c6c1d?auto=format&fit=crop&w=800&q=80 800w, https://images.unsplash.com/photo-1714068691210-073dc52c6c1d?auto=format&fit=crop&w=1400&q=80 1400w, https://images.unsplash.com/photo-1714068691210-073dc52c6c1d?auto=format&fit=crop&w=2000&q=80 2000w" sizes="(max-width: 767px) 100vw, 50vw" alt="Hund schnuppert an einem Napf mit Trockenfutter">
<span class="tile-foot">
<span class="tile-label">Ernährungsberatung</span>
<span class="tile-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</span>
</a>
<a class="tile" href="shop.html">
<img src="https://images.unsplash.com/photo-1733451629760-d5fc1c818698?auto=format&fit=crop&w=1400&q=80" srcset="https://images.unsplash.com/photo-1733451629760-d5fc1c818698?auto=format&fit=crop&w=800&q=80 800w, https://images.unsplash.com/photo-1733451629760-d5fc1c818698?auto=format&fit=crop&w=1400&q=80 1400w, https://images.unsplash.com/photo-1733451629760-d5fc1c818698?auto=format&fit=crop&w=2000&q=80 2000w" sizes="(max-width: 767px) 100vw, 50vw" alt="Hund in einem Laden mit Hundezubehör">
<span class="tile-foot">
<span class="tile-label">Shop</span>
<span class="tile-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</span>
</a>
<a class="tile" href="transportboxen.html">
<img src="https://images.unsplash.com/photo-1771777400696-3af9b6470ff8?auto=format&fit=crop&w=1400&q=80" srcset="https://images.unsplash.com/photo-1771777400696-3af9b6470ff8?auto=format&fit=crop&w=800&q=80 800w, https://images.unsplash.com/photo-1771777400696-3af9b6470ff8?auto=format&fit=crop&w=1400&q=80 1400w, https://images.unsplash.com/photo-1771777400696-3af9b6470ff8?auto=format&fit=crop&w=2000&q=80 2000w" sizes="(max-width: 767px) 100vw, 50vw" alt="Hund sitzt im offenen Kofferraum hinter einem Trenngitter">
<span class="tile-foot">
<span class="tile-label">Transportboxen<small>Maßanfertigung fürs Auto</small></span>
<span class="tile-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</span>
</a>
<a class="scroll-hint" href="#ueber-mich" aria-label="Weiter nach unten"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6"/></svg></a>
</nav>
</section>
<main class="mosaic">
<div class="row row--wide-r" id="ueber-mich">
<div class="panel panel--cream reveal">
<span class="kicker">Über mich</span>
<h2 class="display">Hallo,<br>ich bin Katha.</h2>
<p class="big">Hundetrainerin und Ernährungsberaterin – mit Herz und Verstand. Für beide Seiten der Leine.</p>
<div class="facts">
<span class="fact">§ 11 TierSchG zertifiziert</span>
<span class="fact">Ernährungs- &amp; Gesundheitsberaterin</span>
</div>
</div>
<div class="panel panel--photo plain reveal d1"><img src="https://schmacko-napf.de/wp-content/uploads/2025/01/KK-Fotografie-35.jpg" alt="Katha sitzt mit ihrer Schäferhündin Elina im Grünen" loading="lazy"></div>
</div>
<a class="panel panel--photo tall reveal" href="hundeschule.html">
<img src="https://schmacko-napf.de/wp-content/uploads/2025/01/KK-Fotografie-51.jpg" alt="Schwarzer Schäferhund rennt freudig über einen Feldweg" loading="lazy">
<span class="panel-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
<span class="kicker">Hundetraining</span>
<h2 class="display">Entspannt durch<br>den Alltag.</h2>
<p class="big">Einzeltraining, Hausbesuch und Außentraining in der Gruppe.</p>
<div class="facts">
<span class="fact">Einzeltraining 60 € / Std.</span>
<span class="fact">Gruppe 18 €</span>
<span class="fact">10er-Karte 165 €</span>
</div>
</a>
<div class="row">
<div class="panel panel--sage plate-panel reveal"><img src="https://schmacko-napf.de/wp-content/uploads/2023/06/Barf.png" alt="Teller mit frischem Fleisch, Gemüse und Obst für die Rohfütterung" loading="lazy"></div>
<a class="panel panel--cream reveal d1" href="ernaehrung.html">
<span class="panel-arrow" style="background:var(--ink);border-color:var(--ink)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
<span class="kicker">Ernährungsberatung</span>
<h2 class="display">Gesund<br>gefüttert.</h2>
<p class="big">Individuelle Futterpläne – für jedes Alter, auch bei Magen-Darm- oder Pankreas-Problemen.</p>
<div class="facts"><span class="fact">BARF</span><span class="fact">Koch-BARF</span><span class="fact">Nass- &amp; Trockenfutter</span></div>
</a>
</div>
<div class="panel panel--plain panel--mid panel--center reveal">
<p class="statement">„Futter ist mehr als nur Nahrung – es ist Fürsorge in Napfform.“</p>
<span class="statement-by">— Katha</span>
</div>
<div class="panel panel--ink panel--auto reveal">
<span class="kicker">Meine Philosophie · die 5 Säulen</span>
<ul class="words">
<li><small>01</small>Respekt<span>Den Hund als eigenständiges Wesen ernst nehmen.</span></li>
<li><small>02</small>Ehrlichkeit<span>Klare Signale schaffen Vertrauen.</span></li>
<li><small>03</small>Geduld<span>Jeder Hund lernt in seinem Tempo.</span></li>
<li><small>04</small>Konsequenz<span>Klare Regeln – fair und ohne Druck.</span></li>
<li><small>05</small>Verständnis<span>Bedürfnisse und Gefühle verstehen.</span></li>
</ul>
</div>
<div class="row">
<a class="panel panel--photo reveal" href="shop.html">
<img src="https://images.unsplash.com/photo-1733451629760-d5fc1c818698?auto=format&fit=crop&w=1600&q=80" alt="Hund in einem Laden mit Hundezubehör" loading="lazy">
<span class="panel-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
<span class="kicker">Shop</span>
<h2 class="title">Futter, Snacks<br>&amp; Zubehör.</h2>
</a>
<a class="panel panel--photo reveal d1" href="transportboxen.html">
<img src="https://images.unsplash.com/photo-1771777400696-3af9b6470ff8?auto=format&fit=crop&w=1600&q=80" alt="Hund sitzt im Kofferraum hinter einem Trenngitter" loading="lazy">
<span class="panel-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
<span class="kicker">Maßanfertigung</span>
<h2 class="title">Transportboxen<br>fürs Auto.</h2>
</a>
</div>
<div class="row row--wide" id="kontakt">
<div class="panel panel--ink reveal">
<span class="kicker">Kontakt</span>
<h2 class="display">Lass uns<br>sprechen.</h2>
<div class="contact-links">
<a href="https://wa.me/4917656932942" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4A8 8 0 1 1 20 11.5z"/></svg><span>WhatsApp</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
<a href="tel:+4917656932942"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span>+49 176 569 329 42</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
<a href="mailto:info@schmacko-napf.de"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/></svg><span>info@schmacko-napf.de</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
</div>
</div>
<div class="panel panel--photo plain reveal d1"><img src="https://schmacko-napf.de/wp-content/uploads/2025/01/KK-Fotografie-46.jpg" alt="Schwarze Schäferhündin steht aufmerksam im Wald" loading="lazy"></div>
</div>
<footer class="site-footer">
<div class="footer-brand">
<a class="footer-logo" href="index.html"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<span>Ernährung, Gesundheit und Training –<br>mit Herz und Verstand.</span>
</div>
<nav class="footer-links" aria-label="Footer">
<a href="hundeschule.html">Hundetraining</a>
<a href="ernaehrung.html">Ernährung</a>
<a href="shop.html">Shop</a>
<a href="transportboxen.html">Transportboxen</a>
<a href="impressum.html">Impressum</a>
<a href="#">Datenschutz</a>
</nav>
<div class="footer-meta"><span>© 2026 Schmacko Napf &amp; Hundetraining by Katha</span><span>Fotos: Steffi Biller, KK-Fotografie</span></div>
</footer>
</main>
<script src="assets/site.js"></script>
</body>
</html>
shop.html
+77
View File
@@ -0,0 +1,77 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shop – Schmacko Napf</title>
<meta name="description" content="Ausgewähltes Futter, Snacks und Zubehör für deinen Hund.">
<meta name="theme-color" content="#fcfaf4">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23194242'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/site.css">
</head>
<body>
<header class="site-header">
<div class="header-inner">
<a class="brand" href="index.html" aria-label="Schmacko Napf – Startseite"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<nav class="nav" aria-label="Hauptmenü">
<a href="hundeschule.html">Hundetraining</a>
<a href="ernaehrung.html">Ernährung</a>
<a href="shop.html" aria-current="page">Shop</a>
<a href="transportboxen.html">Transportboxen</a>
<a href="index.html#kontakt">Kontakt</a>
</nav>
<button class="burger" type="button" aria-label="Menü öffnen" aria-expanded="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
</div>
</header>
<main class="mosaic">
<section class="panel panel--photo page-hero">
<img src="https://images.unsplash.com/photo-1733451629760-d5fc1c818698?auto=format&fit=crop&w=2000&q=80" alt="Hund in einem Laden mit Hundezubehör">
<span class="kicker">Shop</span>
<h1>Ausgewählt<br>mit Herz.</h1>
<p class="big">Futter, Snacks und Zubehör, hinter denen ich stehe.</p>
</section>
<div class="row row--3">
<div class="panel panel--cream panel--mid reveal"><div class="panel-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12h18a9 9 0 0 1-18 0z"/><path d="M8 8c0-2 2-2 2-4M13 8c0-2 2-2 2-4"/></svg></div><h2 class="title">Futter</h2><p class="big">Passend zu deinem Futterplan.</p></div>
<div class="panel panel--sage panel--mid reveal d1"><div class="panel-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 8 16 16M6.5 4.5a2 2 0 0 0-2 2 2 2 0 1 0 3 2.5l7.5 7.5a2 2 0 1 0 2.5 3 2 2 0 0 0 2-2 2 2 0 1 0-2.5-3L9.5 7a2 2 0 0 0-3-2.5z"/></svg></div><h2 class="title">Snacks</h2><p class="big">Natürlich – fürs Training und zum Belohnen.</p></div>
<div class="panel panel--ink panel--mid reveal d2"><div class="panel-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="17" cy="7" r="3"/><path d="M15 9.5 6 19M4 17l3 3"/></svg></div><h2 class="title">Zubehör</h2><p class="big">Robust und durchdacht für den Alltag.</p></div>
</div>
<div class="panel panel--cream panel--mid panel--center reveal">
<p class="statement">Der Online-Shop ist bald da.<br>Bis dahin: schreib mir einfach.</p>
</div>
<div class="row row--wide" id="kontakt">
<div class="panel panel--ink reveal">
<span class="kicker">Kontakt</span>
<h2 class="display">Lass uns<br>sprechen.</h2>
<div class="contact-links">
<a href="https://wa.me/4917656932942" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4A8 8 0 1 1 20 11.5z"/></svg><span>WhatsApp</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
<a href="tel:+4917656932942"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span>+49 176 569 329 42</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
<a href="mailto:info@schmacko-napf.de"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/></svg><span>info@schmacko-napf.de</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
</div>
</div>
<div class="panel panel--photo plain reveal d1"><img src="https://schmacko-napf.de/wp-content/uploads/2025/01/KK-Fotografie-46.jpg" alt="Schwarze Schäferhündin steht aufmerksam im Wald" loading="lazy"></div>
</div>
<footer class="site-footer">
<div class="footer-brand">
<a class="footer-logo" href="index.html"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<span>Ernährung, Gesundheit und Training –<br>mit Herz und Verstand.</span>
</div>
<nav class="footer-links" aria-label="Footer">
<a href="hundeschule.html">Hundetraining</a>
<a href="ernaehrung.html">Ernährung</a>
<a href="shop.html">Shop</a>
<a href="transportboxen.html">Transportboxen</a>
<a href="impressum.html">Impressum</a>
<a href="#">Datenschutz</a>
</nav>
<div class="footer-meta"><span>© 2026 Schmacko Napf &amp; Hundetraining by Katha</span><span>Fotos: Steffi Biller, KK-Fotografie</span></div>
</footer>
</main>
<script src="assets/site.js"></script>
</body>
</html>
tools/build_pages.py
+374
View File
@@ -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'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="{sw}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{d}</svg>'
I = {
"arrow": ic('<path d="M5 12h14M13 6l6 6-6 6"/>', "2"),
"down": ic('<path d="M12 5v14M6 13l6 6 6-6"/>', "2"),
"menu": ic('<path d="M4 7h16M4 12h16M4 17h16"/>', "2"),
"phone": ic('<path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/>'),
"mail": ic('<rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/>'),
"chat": ic('<path d="M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4A8 8 0 1 1 20 11.5z"/>'),
"bowl": ic('<path d="M3 12h18a9 9 0 0 1-18 0z"/><path d="M8 8c0-2 2-2 2-4M13 8c0-2 2-2 2-4"/>'),
"bone": ic('<path d="M8 8 16 16M6.5 4.5a2 2 0 0 0-2 2 2 2 0 1 0 3 2.5l7.5 7.5a2 2 0 1 0 2.5 3 2 2 0 0 0 2-2 2 2 0 1 0-2.5-3L9.5 7a2 2 0 0 0-3-2.5z"/>'),
"leash": ic('<circle cx="17" cy="7" r="3"/><path d="M15 9.5 6 19M4 17l3 3"/>'),
"car": ic('<path d="M5 16V11l2-5h10l2 5v5"/><path d="M3 16h18v3H3z"/><circle cx="7.5" cy="13" r="1"/><circle cx="16.5" cy="13" r="1"/>'),
"shield": ic('<path d="M12 3 5 6v6c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6z"/><path d="m9 12 2 2 4-4"/>'),
"wind": ic('<path d="M3 9h11a3 3 0 1 0-3-3M3 15h15a3 3 0 1 1-3 3M3 12h8"/>'),
}
ARROW_BADGE = f'<span class="panel-arrow">{I["arrow"]}</span>'
NAV = [("hundeschule.html", "Hundetraining"), ("ernaehrung.html", "Ernährung"), ("shop.html", "Shop"),
("transportboxen.html", "Transportboxen"), ("index.html#kontakt", "Kontakt")]
def head(title, desc):
return f'''<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{title}</title>
<meta name="description" content="{desc}">
<meta name="theme-color" content="#fcfaf4">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23194242'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/site.css">
</head>
'''
def header(current=None):
cur = ' aria-current="page"'
links = "\n".join(f' <a href="{h}"{cur if h == current else ""}>{t}</a>' for h, t in NAV)
return f''' <header class="site-header">
<div class="header-inner">
<a class="brand" href="index.html" aria-label="Schmacko Napf – Startseite"><img src="{LOGO}" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<nav class="nav" aria-label="Hauptmenü">
{links}
</nav>
<button class="burger" type="button" aria-label="Menü öffnen" aria-expanded="false">{I["menu"]}</button>
</div>
</header>
'''
def contact(photo=KK[46], alt="Schwarze Schäferhündin steht aufmerksam im Wald"):
go = f'<span>{I["arrow"]}</span>'
return f''' <div class="row row--wide" id="kontakt">
<div class="panel panel--ink reveal">
<span class="kicker">Kontakt</span>
<h2 class="display">Lass uns<br>sprechen.</h2>
<div class="contact-links">
<a href="{WA}" target="_blank" rel="noopener">{I["chat"]}<span>WhatsApp</span>{go}</a>
<a href="{PHONE_HREF}">{I["phone"]}<span>{PHONE}</span>{go}</a>
<a href="mailto:{MAIL}">{I["mail"]}<span>{MAIL}</span>{go}</a>
</div>
</div>
<div class="panel panel--photo plain reveal d1"><img src="{photo}" alt="{alt}" loading="lazy"></div>
</div>
'''
def footer():
return f''' <footer class="site-footer">
<div class="footer-brand">
<a class="footer-logo" href="index.html"><img src="{LOGO}" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<span>Ernährung, Gesundheit und Training –<br>mit Herz und Verstand.</span>
</div>
<nav class="footer-links" aria-label="Footer">
<a href="hundeschule.html">Hundetraining</a>
<a href="ernaehrung.html">Ernährung</a>
<a href="shop.html">Shop</a>
<a href="transportboxen.html">Transportboxen</a>
<a href="impressum.html">Impressum</a>
<a href="#">Datenschutz</a>
</nav>
<div class="footer-meta"><span>© 2026 Schmacko Napf &amp; Hundetraining by Katha</span><span>Fotos: Steffi Biller, KK-Fotografie</span></div>
</footer>
</main>
<script src="assets/site.js"></script>
</body>
</html>
'''
def page_hero(img, kicker, title, text, alt):
return f''' <section class="panel panel--photo page-hero">
<img src="{img}" alt="{alt}">
<span class="kicker">{kicker}</span>
<h1>{title}</h1>
<p class="big">{text}</p>
</section>
'''
def page(name, title, desc, current, body):
write(name, head(title, desc) + "<body>\n" + header(current) + ' <main class="mosaic">\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"<small>{sub}</small>" 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''' <a class="tile" href="{href}">
<img src="{src}"{srcset} alt="{alt}">
<span class="tile-foot">
<span class="tile-label">{name}{small}</span>
<span class="tile-arrow">{I["arrow"]}</span>
</span>
</a>
'''
index = head("Schmacko Napf & Hundetraining by Katha", "Hundetraining, Ernährungs- und Gesundheitsberatung, Shop und maßgefertigte Transportboxen – Schmacko Napf by Katha.") + '<body class="is-home">\n' + header() + f''' <section class="hero">
<nav class="tiles" aria-label="Bereiche">
<h1 class="seal"><img src="{LOGO}" alt="Schmacko Napf &amp; Hundetraining by Katha"></h1>
{tile_html} <a class="scroll-hint" href="#ueber-mich" aria-label="Weiter nach unten">{I["down"]}</a>
</nav>
</section>
<main class="mosaic">
<div class="row row--wide-r" id="ueber-mich">
<div class="panel panel--cream reveal">
<span class="kicker">Über mich</span>
<h2 class="display">Hallo,<br>ich bin Katha.</h2>
<p class="big">Hundetrainerin und Ernährungsberaterin – mit Herz und Verstand. Für beide Seiten der Leine.</p>
<div class="facts">
<span class="fact">§ 11 TierSchG zertifiziert</span>
<span class="fact">Ernährungs- &amp; Gesundheitsberaterin</span>
</div>
</div>
<div class="panel panel--photo plain reveal d1"><img src="{KK[35]}" alt="Katha sitzt mit ihrer Schäferhündin Elina im Grünen" loading="lazy"></div>
</div>
<a class="panel panel--photo tall reveal" href="hundeschule.html">
<img src="{KK[51]}" alt="Schwarzer Schäferhund rennt freudig über einen Feldweg" loading="lazy">
{ARROW_BADGE}
<span class="kicker">Hundetraining</span>
<h2 class="display">Entspannt durch<br>den Alltag.</h2>
<p class="big">Einzeltraining, Hausbesuch und Außentraining in der Gruppe.</p>
<div class="facts">
<span class="fact">Einzeltraining 60 € / Std.</span>
<span class="fact">Gruppe 18 €</span>
<span class="fact">10er-Karte 165 €</span>
</div>
</a>
<div class="row">
<div class="panel panel--sage plate-panel reveal"><img src="{BARF}" alt="Teller mit frischem Fleisch, Gemüse und Obst für die Rohfütterung" loading="lazy"></div>
<a class="panel panel--cream reveal d1" href="ernaehrung.html">
<span class="panel-arrow" style="background:var(--ink);border-color:var(--ink)">{I["arrow"]}</span>
<span class="kicker">Ernährungsberatung</span>
<h2 class="display">Gesund<br>gefüttert.</h2>
<p class="big">Individuelle Futterpläne – für jedes Alter, auch bei Magen-Darm- oder Pankreas-Problemen.</p>
<div class="facts"><span class="fact">BARF</span><span class="fact">Koch-BARF</span><span class="fact">Nass- &amp; Trockenfutter</span></div>
</a>
</div>
<div class="panel panel--plain panel--mid panel--center reveal">
<p class="statement">„Futter ist mehr als nur Nahrung – es ist Fürsorge in Napfform.“</p>
<span class="statement-by">— Katha</span>
</div>
<div class="panel panel--ink panel--auto reveal">
<span class="kicker">Meine Philosophie · die 5 Säulen</span>
<ul class="words">
<li><small>01</small>Respekt<span>Den Hund als eigenständiges Wesen ernst nehmen.</span></li>
<li><small>02</small>Ehrlichkeit<span>Klare Signale schaffen Vertrauen.</span></li>
<li><small>03</small>Geduld<span>Jeder Hund lernt in seinem Tempo.</span></li>
<li><small>04</small>Konsequenz<span>Klare Regeln – fair und ohne Druck.</span></li>
<li><small>05</small>Verständnis<span>Bedürfnisse und Gefühle verstehen.</span></li>
</ul>
</div>
<div class="row">
<a class="panel panel--photo reveal" href="shop.html">
<img src="{U(IMG_SHOP)}" alt="Hund in einem Laden mit Hundezubehör" loading="lazy">
{ARROW_BADGE}
<span class="kicker">Shop</span>
<h2 class="title">Futter, Snacks<br>&amp; Zubehör.</h2>
</a>
<a class="panel panel--photo reveal d1" href="transportboxen.html">
<img src="{U(IMG_CAR)}" alt="Hund sitzt im Kofferraum hinter einem Trenngitter" loading="lazy">
{ARROW_BADGE}
<span class="kicker">Maßanfertigung</span>
<h2 class="title">Transportboxen<br>fürs Auto.</h2>
</a>
</div>
{contact()}''' + footer().replace(" </main>\n", " </main>\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<br>der Leine.",
"Vertrauen, klare Kommunikation und Training, das im Alltag funktioniert.",
"Katha mit ihrem Hund auf einer Wiese im Abendlicht") + f'''
<div class="row row--wide-r">
<div class="panel panel--cream reveal">
<span class="kicker">Einzeltraining &amp; Hausbesuch</span>
<h2 class="title">Individuell.<br>Bei dir zu Hause.</h2>
<p class="big">Für Grundgehorsam, Unsicherheit, Leinenführigkeit oder einen neuen Hund im Haus.</p>
<div class="price-big"><strong>60 €</strong><span>pro Stunde · nach dem Erstgespräch (120 €, ca. 2 Std.)</span></div>
</div>
<div class="panel panel--photo plain reveal d1"><img src="{KK[46]}" alt="Schwarze Schäferhündin steht aufmerksam im Wald" loading="lazy"></div>
</div>
<div class="row row--wide">
<div class="panel panel--photo plain reveal"><img src="{KK[51]}" alt="Schwarzer Schäferhund rennt über einen Feldweg" loading="lazy"></div>
<div class="panel panel--ink reveal d1">
<span class="kicker">Gruppe &amp; Außentraining</span>
<h2 class="title">Training da, wo<br>das Leben ist.</h2>
<p class="big">In der Stadt, im Grünen, in Geschäften – mit max. 6 Mensch-Hund-Teams.</p>
<div class="price-big"><strong>18 €</strong><span>pro Mensch-Hund-Team</span></div>
</div>
</div>
<div class="panel panel--ink panel--auto reveal">
<span class="kicker">Die 5 Säulen</span>
<ul class="words">
<li><small>01</small>Respekt<span>Hunde wollen ernst genommen werden.</span></li>
<li><small>02</small>Ehrlichkeit<span>Hunde lesen unsere Körpersprache sofort.</span></li>
<li><small>03</small>Geduld<span>Lernen braucht Zeit und Wiederholung.</span></li>
<li><small>04</small>Konsequenz<span>Klare Regeln, ganz ohne Gewalt.</span></li>
<li><small>05</small>Verständnis<span>Realistische Erwartungen an jeden Hund.</span></li>
</ul>
</div>
<div class="panel panel--cream panel--auto reveal">
<span class="kicker">Preise</span>
<h2 class="title">Fair und klar.</h2>
<div class="price-rows">
<div><span>Erstgespräch Einzeltraining<small>ca. 2 Stunden · zzgl. 0,30 € / km</small></span><strong>120 €</strong></div>
<div><span>Einzeltraining<small>pro Stunde · zzgl. 0,30 € / km</small></span><strong>60 €</strong></div>
<div><span>Gruppentraining<small>pro Mensch-Hund-Team</small></span><strong>18 €</strong></div>
<div><span>10er-Karte<small>Gruppe &amp; Einzel frei kombinierbar</small></span><strong>165 €</strong></div>
</div>
</div>
{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- &amp; Gesundheitsberatung", "Fürsorge<br>in Napfform.",
"Individuelle Futterpläne – gesund, sensibel oder mit Diagnose.",
"Hund schnuppert an einem Napf mit Trockenfutter") + f'''
<div class="row">
<div class="panel panel--cream reveal">
<span class="kicker">Kennst du das?</span>
<h2 class="title">Jeder sagt<br>etwas anderes.</h2>
<p class="big">Ich bringe Klarheit in die Futter-Frage – und erstelle einen Plan, der zu deinem Hund passt.</p>
<div class="facts"><span class="fact">BARF</span><span class="fact">Teil-BARF</span><span class="fact">Koch-BARF</span><span class="fact">Nassfutter</span><span class="fact">Trockenfutter</span></div>
</div>
<div class="panel panel--sage plate-panel reveal d1"><img src="{BARF}" alt="Teller mit frischem Fleisch, Gemüse und Obst" loading="lazy"></div>
</div>
<div class="panel panel--ink panel--auto reveal">
<span class="kicker">Ablauf</span>
<h2 class="title">So starten wir.</h2>
<ol class="steps">
<li><b>01</b><strong>Erstgespräch</strong><span>Vor Ort, am Telefon oder online.</span></li>
<li><b>02</b><strong>Futterplan</strong><span>Genau auf deinen Hund abgestimmt.</span></li>
<li><b>03</b><strong>Fragen klären</strong><span>Nach 3 Tagen gehen wir alles durch.</span></li>
<li><b>04</b><strong>Nachbesprechung</strong><span>Nach 4 Wochen schauen wir gemeinsam drauf.</span></li>
</ol>
</div>
<div class="row row--3">
<div class="panel panel--cream panel--mid reveal">
<span class="kicker">Rationsprüfung</span>
<h2 class="title">Passt das<br>Futter?</h2>
<div class="price-big"><strong>kostenlos</strong></div>
</div>
<div class="panel panel--sage panel--mid reveal d1">
<span class="kicker">Erstgespräch</span>
<h2 class="title">Kennen&shy;lernen</h2>
<div class="price-big"><strong>ab 45 €</strong><span>ca. 60 Minuten</span></div>
</div>
<div class="panel panel--ink panel--mid reveal d2">
<span class="kicker">Futterplan</span>
<h2 class="title">Dein<br>Plan</h2>
<div class="price-big"><strong>ab 75 €</strong><span>inkl. Folgegespräch nach 4 Wochen</span></div>
</div>
</div>
{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<br>mit Herz.",
"Futter, Snacks und Zubehör, hinter denen ich stehe.",
"Hund in einem Laden mit Hundezubehör") + f'''
<div class="row row--3">
<div class="panel panel--cream panel--mid reveal"><div class="panel-icon">{I["bowl"]}</div><h2 class="title">Futter</h2><p class="big">Passend zu deinem Futterplan.</p></div>
<div class="panel panel--sage panel--mid reveal d1"><div class="panel-icon">{I["bone"]}</div><h2 class="title">Snacks</h2><p class="big">Natürlich – fürs Training und zum Belohnen.</p></div>
<div class="panel panel--ink panel--mid reveal d2"><div class="panel-icon">{I["leash"]}</div><h2 class="title">Zubehör</h2><p class="big">Robust und durchdacht für den Alltag.</p></div>
</div>
<div class="panel panel--cream panel--mid panel--center reveal">
<p class="statement">Der Online-Shop ist bald da.<br>Bis dahin: schreib mir einfach.</p>
</div>
{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<br>fürs Auto.",
"Passgenau für dein Fahrzeug und deinen Hund.",
"Hund sitzt im offenen Kofferraum hinter einem Trenngitter") + f'''
<div class="row row--3">
<div class="panel panel--cream panel--mid reveal"><div class="panel-icon">{I["car"]}</div><h2 class="title">Passgenau</h2><p class="big">Exakt für deinen Kofferraum gebaut.</p></div>
<div class="panel panel--sage panel--mid reveal d1"><div class="panel-icon">{I["shield"]}</div><h2 class="title">Sicher</h2><p class="big">Stabil – für jede Fahrt.</p></div>
<div class="panel panel--ink panel--mid reveal d2"><div class="panel-icon">{I["wind"]}</div><h2 class="title">Bequem</h2><p class="big">Luftig und mit genug Platz.</p></div>
</div>
<div class="panel panel--ink panel--auto reveal">
<span class="kicker">Ablauf</span>
<h2 class="title">In 4 Schritten zur eigenen Box.</h2>
<ol class="steps">
<li><b>01</b><strong>Beratung</strong><span>Auto, Hund und Wünsche.</span></li>
<li><b>02</b><strong>Ausmessen</strong><span>Kofferraum und Hund genau vermessen.</span></li>
<li><b>03</b><strong>Fertigung</strong><span>Deine Box entsteht nach Maß.</span></li>
<li><b>04</b><strong>Übergabe</strong><span>Einbau – und los geht’s.</span></li>
</ol>
</div>
{contact()}''')
# ================================================================ Impressum
page("impressum.html", "Impressum – Schmacko Napf", "Impressum von Schmacko Napf & Hundetraining by Katha.", None, f''' <div class="panel panel--cream panel--auto">
<span class="kicker">Rechtliches</span>
<h1 class="display">Impressum</h1>
<div class="legal" style="margin-top:48px">
<p><b>Angaben gemäß § 5 TMG</b>Katharina Schulz<br>Seewiese 19<br>84109 Wörth a.d. Isar</p>
<p><b>Kontakt</b>Telefon: {PHONE}<br>E-Mail: {MAIL}</p>
<p><b>Verantwortlich gemäß § 18 Abs. 2 MStV</b>Katharina Schulz, Anschrift wie oben</p>
<p><b>Fotos</b>Steffi Biller, KK-Fotografie · weitere Bilder: Unsplash</p>
</div>
</div>
''')
print("ok")
transportboxen.html
+84
View File
@@ -0,0 +1,84 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Transportboxen nach Maß – Schmacko Napf</title>
<meta name="description" content="Maßgefertigte Hunde-Transportboxen fürs Auto – passgenau für Fahrzeug und Hund.">
<meta name="theme-color" content="#fcfaf4">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23194242'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/site.css">
</head>
<body>
<header class="site-header">
<div class="header-inner">
<a class="brand" href="index.html" aria-label="Schmacko Napf – Startseite"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<nav class="nav" aria-label="Hauptmenü">
<a href="hundeschule.html">Hundetraining</a>
<a href="ernaehrung.html">Ernährung</a>
<a href="shop.html">Shop</a>
<a href="transportboxen.html" aria-current="page">Transportboxen</a>
<a href="index.html#kontakt">Kontakt</a>
</nav>
<button class="burger" type="button" aria-label="Menü öffnen" aria-expanded="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
</div>
</header>
<main class="mosaic">
<section class="panel panel--photo page-hero">
<img src="https://images.unsplash.com/photo-1771777400696-3af9b6470ff8?auto=format&fit=crop&w=2000&q=80" alt="Hund sitzt im offenen Kofferraum hinter einem Trenngitter">
<span class="kicker">Maßanfertigung</span>
<h1>Transportboxen<br>fürs Auto.</h1>
<p class="big">Passgenau für dein Fahrzeug und deinen Hund.</p>
</section>
<div class="row row--3">
<div class="panel panel--cream panel--mid reveal"><div class="panel-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 16V11l2-5h10l2 5v5"/><path d="M3 16h18v3H3z"/><circle cx="7.5" cy="13" r="1"/><circle cx="16.5" cy="13" r="1"/></svg></div><h2 class="title">Passgenau</h2><p class="big">Exakt für deinen Kofferraum gebaut.</p></div>
<div class="panel panel--sage panel--mid reveal d1"><div class="panel-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 5 6v6c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6z"/><path d="m9 12 2 2 4-4"/></svg></div><h2 class="title">Sicher</h2><p class="big">Stabil – für jede Fahrt.</p></div>
<div class="panel panel--ink panel--mid reveal d2"><div class="panel-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9h11a3 3 0 1 0-3-3M3 15h15a3 3 0 1 1-3 3M3 12h8"/></svg></div><h2 class="title">Bequem</h2><p class="big">Luftig und mit genug Platz.</p></div>
</div>
<div class="panel panel--ink panel--auto reveal">
<span class="kicker">Ablauf</span>
<h2 class="title">In 4 Schritten zur eigenen Box.</h2>
<ol class="steps">
<li><b>01</b><strong>Beratung</strong><span>Auto, Hund und Wünsche.</span></li>
<li><b>02</b><strong>Ausmessen</strong><span>Kofferraum und Hund genau vermessen.</span></li>
<li><b>03</b><strong>Fertigung</strong><span>Deine Box entsteht nach Maß.</span></li>
<li><b>04</b><strong>Übergabe</strong><span>Einbau – und los geht’s.</span></li>
</ol>
</div>
<div class="row row--wide" id="kontakt">
<div class="panel panel--ink reveal">
<span class="kicker">Kontakt</span>
<h2 class="display">Lass uns<br>sprechen.</h2>
<div class="contact-links">
<a href="https://wa.me/4917656932942" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4A8 8 0 1 1 20 11.5z"/></svg><span>WhatsApp</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
<a href="tel:+4917656932942"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span>+49 176 569 329 42</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
<a href="mailto:info@schmacko-napf.de"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/></svg><span>info@schmacko-napf.de</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a>
</div>
</div>
<div class="panel panel--photo plain reveal d1"><img src="https://schmacko-napf.de/wp-content/uploads/2025/01/KK-Fotografie-46.jpg" alt="Schwarze Schäferhündin steht aufmerksam im Wald" loading="lazy"></div>
</div>
<footer class="site-footer">
<div class="footer-brand">
<a class="footer-logo" href="index.html"><img src="https://schmacko-napf.de/wp-content/uploads/2024/12/Logo-Transparent-Rechnung.png" alt="Schmacko Napf &amp; Hundetraining by Katha"></a>
<span>Ernährung, Gesundheit und Training –<br>mit Herz und Verstand.</span>
</div>
<nav class="footer-links" aria-label="Footer">
<a href="hundeschule.html">Hundetraining</a>
<a href="ernaehrung.html">Ernährung</a>
<a href="shop.html">Shop</a>
<a href="transportboxen.html">Transportboxen</a>
<a href="impressum.html">Impressum</a>
<a href="#">Datenschutz</a>
</nav>
<div class="footer-meta"><span>© 2026 Schmacko Napf &amp; Hundetraining by Katha</span><span>Fotos: Steffi Biller, KK-Fotografie</span></div>
</footer>
</main>
<script src="assets/site.js"></script>
</body>
</html>