Grüntöne zurückgenommen: wieder Creme-Flächen und einfarbige Säulen
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
NotPika69andClaude Opus 5.5 committed
1 parent
0ca675320d
commit
70af6d9ccd
8 files changed
+108
-128
No files matched your search
+14
-45
@@ -270,19 +270,8 @@ svg { flex: none; }
|
||||
.panel--auto { min-height: 0; }
|
||||
.panel--mid { min-height: min(62svh, 620px); }
|
||||
.panel--center { justify-content: center; }
|
||||
.panel--ink { background: var(--tone, var(--ink)); color: var(--bg); }
|
||||
.panel--sage { background: var(--tone, var(--sage)); }
|
||||
|
||||
/* Grüntöne – jede Fläche bekommt einen eigenen (1–5 dunkel mit heller Schrift, 7–9 hell mit dunkler Schrift) */
|
||||
.tone-1 { --tone: #194242; } /* Petrol (Logo) */
|
||||
.tone-2 { --tone: #1d4a3d; } /* Tannengrün */
|
||||
.tone-3 { --tone: #234f4a; } /* Tiefes Teal */
|
||||
.tone-4 { --tone: #2f5a45; } /* Moos */
|
||||
.tone-5 { --tone: #3f6a4c; } /* Waldgrün */
|
||||
.tone-6 { --tone: #4a7553; } /* Blattgrün */
|
||||
.tone-7 { --tone: #bcd69a; } /* Lindgrün */
|
||||
.tone-8 { --tone: #d0e6a5; } /* Salbei */
|
||||
.tone-9 { --tone: #e5efd1; } /* Helles Salbei */
|
||||
.panel--ink { background: var(--ink); color: var(--bg); }
|
||||
.panel--sage { background: var(--sage); }
|
||||
.panel--cream { background: var(--surface); }
|
||||
.panel--plain { background: transparent; }
|
||||
|
||||
@@ -368,39 +357,20 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
|
||||
}
|
||||
.statement-by { display: block; text-align: center; margin-top: 28px; font-size: 1.15rem; opacity: .7; }
|
||||
|
||||
/* 5 Säulen: eine Fläche, jede Zeile in leicht anderem Grünton */
|
||||
.pillars {
|
||||
list-style: none; padding: 0; margin: 0;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.pillar {
|
||||
display: flex; align-items: center; gap: clamp(18px, 3vw, 48px);
|
||||
background: var(--tone);
|
||||
color: var(--bg);
|
||||
padding: clamp(22px, 2.6vw, 36px) clamp(26px, 4.2vw, 72px);
|
||||
transition: padding .5s var(--ease);
|
||||
}
|
||||
.pillar--head { display: block; padding-block: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px); }
|
||||
.pillar--head .kicker { color: var(--sage); opacity: 1; }
|
||||
.pillar small { flex: none; width: 2.4em; font-size: 1rem; letter-spacing: .1em; opacity: .7; }
|
||||
.pillar strong {
|
||||
font-weight: 400;
|
||||
font-size: clamp(2.4rem, 5.6vw, 5.6rem);
|
||||
/* 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);
|
||||
}
|
||||
.pillar span:not(.kicker) {
|
||||
margin-left: auto;
|
||||
max-width: 30ch;
|
||||
text-align: right;
|
||||
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
|
||||
line-height: 1.35;
|
||||
opacity: .82;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.pillar:not(.pillar--head):hover { padding-left: clamp(40px, 5.5vw, 96px); }
|
||||
}
|
||||
.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); }
|
||||
@@ -507,8 +477,7 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
|
||||
.panel--photo { min-height: 64svh; }
|
||||
.panel--photo.tall { min-height: 80svh; }
|
||||
.plate-panel { min-height: 0; padding-block: 56px; }
|
||||
.pillar { flex-wrap: wrap; row-gap: 8px; }
|
||||
.pillar span:not(.kicker) { margin-left: 0; text-align: left; width: 100%; }
|
||||
.words span { display: none; }
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
body { font-size: 18px; }
|
||||
|
||||
+7
-7
@@ -35,16 +35,16 @@
|
||||
</section>
|
||||
|
||||
<div class="row">
|
||||
<div class="panel panel--ink tone-4 reveal">
|
||||
<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 tone-8 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 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 tone-1 panel--auto reveal">
|
||||
<div class="panel panel--ink panel--auto reveal">
|
||||
<span class="kicker">Ablauf</span>
|
||||
<h2 class="title">So starten wir.</h2>
|
||||
<ol class="steps">
|
||||
@@ -56,17 +56,17 @@
|
||||
</div>
|
||||
|
||||
<div class="row row--3">
|
||||
<div class="panel panel--ink tone-5 panel--mid reveal">
|
||||
<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 tone-7 panel--mid reveal d1">
|
||||
<div class="panel panel--sage panel--mid reveal d1">
|
||||
<span class="kicker">Erstgespräch</span>
|
||||
<h2 class="title">Kennen­lernen</h2>
|
||||
<div class="price-big"><strong>ab 45 €</strong><span>ca. 60 Minuten</span></div>
|
||||
</div>
|
||||
<div class="panel panel--ink tone-2 panel--mid reveal d2">
|
||||
<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>
|
||||
@@ -74,7 +74,7 @@
|
||||
</div>
|
||||
|
||||
<div class="row row--wide" id="kontakt">
|
||||
<div class="panel panel--ink tone-3 reveal">
|
||||
<div class="panel panel--ink reveal">
|
||||
<span class="kicker">Kontakt</span>
|
||||
<h2 class="display">Lass uns<br>sprechen.</h2>
|
||||
<div class="contact-links">
|
||||
|
||||
+14
-12
@@ -35,7 +35,7 @@
|
||||
</section>
|
||||
|
||||
<div class="row row--wide-r">
|
||||
<div class="panel panel--ink tone-4 reveal">
|
||||
<div class="panel panel--cream reveal">
|
||||
<span class="kicker">Einzeltraining & 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>
|
||||
@@ -46,7 +46,7 @@
|
||||
|
||||
<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 tone-2 reveal d1">
|
||||
<div class="panel panel--ink reveal d1">
|
||||
<span class="kicker">Gruppe & 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>
|
||||
@@ -54,16 +54,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="pillars reveal">
|
||||
<li class="pillar pillar--head tone-1"><span class="kicker">Meine Philosophie</span><h2 class="title">Die 5 Säulen.</h2></li>
|
||||
<li class="pillar tone-2"><small>01</small><strong>Respekt</strong><span>Hunde wollen ernst genommen werden.</span></li>
|
||||
<li class="pillar tone-3"><small>02</small><strong>Ehrlichkeit</strong><span>Hunde lesen unsere Körpersprache sofort.</span></li>
|
||||
<li class="pillar tone-4"><small>03</small><strong>Geduld</strong><span>Lernen braucht Zeit und Wiederholung.</span></li>
|
||||
<li class="pillar tone-5"><small>04</small><strong>Konsequenz</strong><span>Klare Regeln, ganz ohne Gewalt.</span></li>
|
||||
<li class="pillar tone-6"><small>05</small><strong>Verständnis</strong><span>Realistische Erwartungen an jeden Hund.</span></li>
|
||||
</ul>
|
||||
<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--sage tone-8 panel--auto reveal">
|
||||
<div class="panel panel--cream panel--auto reveal">
|
||||
<span class="kicker">Preise</span>
|
||||
<h2 class="title">Fair und klar.</h2>
|
||||
<div class="price-rows">
|
||||
@@ -75,7 +77,7 @@
|
||||
</div>
|
||||
|
||||
<div class="row row--wide" id="kontakt">
|
||||
<div class="panel panel--ink tone-3 reveal">
|
||||
<div class="panel panel--ink reveal">
|
||||
<span class="kicker">Kontakt</span>
|
||||
<h2 class="display">Lass uns<br>sprechen.</h2>
|
||||
<div class="contact-links">
|
||||
|
||||
+1
-1
@@ -27,7 +27,7 @@
|
||||
</div>
|
||||
</header>
|
||||
<main class="mosaic">
|
||||
<div class="panel panel--sage tone-9 panel--auto">
|
||||
<div class="panel panel--cream panel--auto">
|
||||
<span class="kicker">Rechtliches</span>
|
||||
<h1 class="display">Impressum</h1>
|
||||
<div class="legal" style="margin-top:48px">
|
||||
|
||||
+16
-14
@@ -64,7 +64,7 @@
|
||||
|
||||
<main class="mosaic">
|
||||
<div class="row row--wide-r" id="ueber-mich">
|
||||
<div class="panel panel--ink tone-4 reveal">
|
||||
<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>
|
||||
@@ -90,9 +90,9 @@
|
||||
</a>
|
||||
|
||||
<div class="row">
|
||||
<div class="panel panel--sage tone-8 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--ink tone-2 reveal d1" href="ernaehrung.html">
|
||||
<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>
|
||||
<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>
|
||||
@@ -100,19 +100,21 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="panel panel--sage tone-9 panel--mid panel--center reveal">
|
||||
<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>
|
||||
|
||||
<ul class="pillars reveal">
|
||||
<li class="pillar pillar--head tone-1"><span class="kicker">Meine Philosophie</span><h2 class="title">Die 5 Säulen für Mensch und Hund.</h2></li>
|
||||
<li class="pillar tone-2"><small>01</small><strong>Respekt</strong><span>Den Hund als eigenständiges Wesen ernst nehmen.</span></li>
|
||||
<li class="pillar tone-3"><small>02</small><strong>Ehrlichkeit</strong><span>Klare Signale schaffen Vertrauen.</span></li>
|
||||
<li class="pillar tone-4"><small>03</small><strong>Geduld</strong><span>Jeder Hund lernt in seinem Tempo.</span></li>
|
||||
<li class="pillar tone-5"><small>04</small><strong>Konsequenz</strong><span>Klare Regeln – fair und ohne Druck.</span></li>
|
||||
<li class="pillar tone-6"><small>05</small><strong>Verständnis</strong><span>Bedürfnisse und Gefühle verstehen.</span></li>
|
||||
</ul>
|
||||
<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">
|
||||
@@ -130,7 +132,7 @@
|
||||
</div>
|
||||
|
||||
<div class="row row--wide" id="kontakt">
|
||||
<div class="panel panel--ink tone-3 reveal">
|
||||
<div class="panel panel--ink reveal">
|
||||
<span class="kicker">Kontakt</span>
|
||||
<h2 class="display">Lass uns<br>sprechen.</h2>
|
||||
<div class="contact-links">
|
||||
|
||||
@@ -35,17 +35,17 @@
|
||||
</section>
|
||||
|
||||
<div class="row row--3">
|
||||
<div class="panel panel--ink tone-4 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 tone-8 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 tone-2 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 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--sage tone-9 panel--mid panel--center reveal">
|
||||
<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 tone-3 reveal">
|
||||
<div class="panel panel--ink reveal">
|
||||
<span class="kicker">Kontakt</span>
|
||||
<h2 class="display">Lass uns<br>sprechen.</h2>
|
||||
<div class="contact-links">
|
||||
|
||||
+46
-39
@@ -69,7 +69,7 @@ def header(current=None):
|
||||
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 tone-3 reveal">
|
||||
<div class="panel panel--ink reveal">
|
||||
<span class="kicker">Kontakt</span>
|
||||
<h2 class="display">Lass uns<br>sprechen.</h2>
|
||||
<div class="contact-links">
|
||||
@@ -116,19 +116,6 @@ def page_hero(img, kicker, title, text, alt):
|
||||
def page(name, title, desc, current, body):
|
||||
write(name, head(title, desc) + "<body>\n" + header(current) + ' <main class="mosaic">\n' + body + footer())
|
||||
|
||||
|
||||
PILLAR_TONES = [(2, ""), (3, ""), (4, ""), (5, ""), (6, "")]
|
||||
|
||||
def pillars(title, items):
|
||||
rows = "\n".join(
|
||||
f' <li class="pillar tone-{t}{dark}"><small>0{i + 1}</small><strong>{word}</strong><span>{text}</span></li>'
|
||||
for i, ((t, dark), (word, text)) in enumerate(zip(PILLAR_TONES, items)))
|
||||
return f''' <ul class="pillars reveal">
|
||||
<li class="pillar pillar--head tone-1"><span class="kicker">Meine Philosophie</span><h2 class="title">{title}</h2></li>
|
||||
{rows}
|
||||
</ul>
|
||||
'''
|
||||
|
||||
def write(name, html):
|
||||
open(os.path.join(OUT, name), "w").write(html)
|
||||
|
||||
@@ -162,7 +149,7 @@ index = head("Schmacko Napf & Hundetraining by Katha", "Hundetraining, Ernährun
|
||||
|
||||
<main class="mosaic">
|
||||
<div class="row row--wide-r" id="ueber-mich">
|
||||
<div class="panel panel--ink tone-4 reveal">
|
||||
<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>
|
||||
@@ -188,9 +175,9 @@ index = head("Schmacko Napf & Hundetraining by Katha", "Hundetraining, Ernährun
|
||||
</a>
|
||||
|
||||
<div class="row">
|
||||
<div class="panel panel--sage tone-8 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--ink tone-2 reveal d1" href="ernaehrung.html">
|
||||
<span class="panel-arrow">{I["arrow"]}</span>
|
||||
<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>
|
||||
@@ -198,12 +185,22 @@ index = head("Schmacko Napf & Hundetraining by Katha", "Hundetraining, Ernährun
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="panel panel--sage tone-9 panel--mid panel--center reveal">
|
||||
<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>
|
||||
|
||||
{pillars('Die 5 Säulen für Mensch und Hund.', [('Respekt', 'Den Hund als eigenständiges Wesen ernst nehmen.'), ('Ehrlichkeit', 'Klare Signale schaffen Vertrauen.'), ('Geduld', 'Jeder Hund lernt in seinem Tempo.'), ('Konsequenz', 'Klare Regeln – fair und ohne Druck.'), ('Verständnis', 'Bedürfnisse und Gefühle verstehen.')])}
|
||||
<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">
|
||||
@@ -230,7 +227,7 @@ page("hundeschule.html", "Hundetraining – Schmacko Napf",
|
||||
"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--ink tone-4 reveal">
|
||||
<div class="panel panel--cream reveal">
|
||||
<span class="kicker">Einzeltraining & 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>
|
||||
@@ -241,7 +238,7 @@ page("hundeschule.html", "Hundetraining – Schmacko Napf",
|
||||
|
||||
<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 tone-2 reveal d1">
|
||||
<div class="panel panel--ink reveal d1">
|
||||
<span class="kicker">Gruppe & 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>
|
||||
@@ -249,8 +246,18 @@ page("hundeschule.html", "Hundetraining – Schmacko Napf",
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{pillars('Die 5 Säulen.', [('Respekt', 'Hunde wollen ernst genommen werden.'), ('Ehrlichkeit', 'Hunde lesen unsere Körpersprache sofort.'), ('Geduld', 'Lernen braucht Zeit und Wiederholung.'), ('Konsequenz', 'Klare Regeln, ganz ohne Gewalt.'), ('Verständnis', 'Realistische Erwartungen an jeden Hund.')])}
|
||||
<div class="panel panel--sage tone-8 panel--auto reveal">
|
||||
<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">
|
||||
@@ -271,16 +278,16 @@ page("ernaehrung.html", "Ernährungsberatung – Schmacko Napf",
|
||||
"Individuelle Futterpläne – gesund, sensibel oder mit Diagnose.",
|
||||
"Hund schnuppert an einem Napf mit Trockenfutter") + f'''
|
||||
<div class="row">
|
||||
<div class="panel panel--ink tone-4 reveal">
|
||||
<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 tone-8 plate-panel reveal d1"><img src="{BARF}" alt="Teller mit frischem Fleisch, Gemüse und Obst" loading="lazy"></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 tone-1 panel--auto reveal">
|
||||
<div class="panel panel--ink panel--auto reveal">
|
||||
<span class="kicker">Ablauf</span>
|
||||
<h2 class="title">So starten wir.</h2>
|
||||
<ol class="steps">
|
||||
@@ -292,17 +299,17 @@ page("ernaehrung.html", "Ernährungsberatung – Schmacko Napf",
|
||||
</div>
|
||||
|
||||
<div class="row row--3">
|
||||
<div class="panel panel--ink tone-5 panel--mid reveal">
|
||||
<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 tone-7 panel--mid reveal d1">
|
||||
<div class="panel panel--sage panel--mid reveal d1">
|
||||
<span class="kicker">Erstgespräch</span>
|
||||
<h2 class="title">Kennen­lernen</h2>
|
||||
<div class="price-big"><strong>ab 45 €</strong><span>ca. 60 Minuten</span></div>
|
||||
</div>
|
||||
<div class="panel panel--ink tone-2 panel--mid reveal d2">
|
||||
<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>
|
||||
@@ -317,12 +324,12 @@ page("shop.html", "Shop – Schmacko Napf", "Ausgewähltes Futter, Snacks und Zu
|
||||
"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--ink tone-4 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 tone-8 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 tone-2 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 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--sage tone-9 panel--mid panel--center reveal">
|
||||
<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>
|
||||
|
||||
@@ -335,12 +342,12 @@ page("transportboxen.html", "Transportboxen nach Maß – Schmacko Napf",
|
||||
"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--ink tone-4 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 tone-8 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 tone-2 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 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 tone-1 panel--auto reveal">
|
||||
<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">
|
||||
@@ -354,7 +361,7 @@ page("transportboxen.html", "Transportboxen nach Maß – Schmacko Napf",
|
||||
{contact()}''')
|
||||
|
||||
# ================================================================ Impressum
|
||||
page("impressum.html", "Impressum – Schmacko Napf", "Impressum von Schmacko Napf & Hundetraining by Katha.", None, f''' <div class="panel panel--sage tone-9 panel--auto">
|
||||
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">
|
||||
|
||||
+5
-5
@@ -35,12 +35,12 @@
|
||||
</section>
|
||||
|
||||
<div class="row row--3">
|
||||
<div class="panel panel--ink tone-4 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 tone-8 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 tone-2 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 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 tone-1 panel--auto reveal">
|
||||
<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">
|
||||
@@ -52,7 +52,7 @@
|
||||
</div>
|
||||
|
||||
<div class="row row--wide" id="kontakt">
|
||||
<div class="panel panel--ink tone-3 reveal">
|
||||
<div class="panel panel--ink reveal">
|
||||
<span class="kicker">Kontakt</span>
|
||||
<h2 class="display">Lass uns<br>sprechen.</h2>
|
||||
<div class="contact-links">
|
||||
|
||||
Reference in new issue
Block a user