- 
+ 
Termin buchen
@@ -43,26 +42,26 @@
Fehler 404
Hier ist leider
-
+
diff --git a/README.md b/README.md
index 2d94540..9a76df8 100644
--- a/README.md
+++ b/README.md
@@ -24,8 +24,14 @@ Neue Website für Katha (bisher WordPress auf `schmacko-napf.de`). Statisches HT
Alle „Termin buchen“-Knöpfe führen zu Kathas Buchungsportal **PetWorkers** (`https://schmacko-napf.petworkers.app`): Kopfleiste, Kontakt-Fläche, Buchungs-Fläche auf Start/Hundetraining/Ernährung und die Buchen-Knöpfe in den Trainings-Flächen. Die einzelnen Links stehen zentral in `BOOK` in `tools/build_pages.py`.
+Verlinkt werden die Portal-Seiten direkt über ihre ID (`index.php?id=…`). Die Adressen `seite.php?name=ernaehrungsberatung` und `…name=kaufberatung` leiten im Portal nur auf die Startseite um. Für die Kaufberatung gibt es im Portal noch keine eigene Seite, deshalb fehlt sie in den Buchungs-Flächen. Sobald Katha eine anlegt, in `BOOK` ergänzen.
+
Die alte Seite verlinkte für das Ernährungs-Erstgespräch teilweise auch Microsoft Bookings – die neue Seite nutzt einheitlich PetWorkers.
+## Alte Adressen
+
+`.htaccess` leitet die Adressen der alten WordPress-Seite (z. B. `/hundetraining/`, `/futterplaene/`, `/impressum/`, `/kontakt/`) per 301 auf die neuen Seiten um. So landen Google-Treffer, Lesezeichen und die Links im PetWorkers-Portal nicht auf der Fehlerseite.
+
## Lokal ansehen
```bash
@@ -53,3 +59,4 @@ Alles außer `tools/`, `README.md` und `.git` in das Hauptverzeichnis des Webspa
- Texte für Shop und Transportboxen mit Katha abstimmen (aktuell allgemein formuliert).
- Impressum und Datenschutz rechtlich prüfen lassen; im Datenschutz ggf. den Hosting-Anbieter namentlich nennen.
- Nutzungsrecht der Fotos von KK-Fotografie (Steffi Biller) für die neue Seite bestätigen.
+- Im PetWorkers-Portal (Katha): Die Knöpfe „Ernährungsberatung“ und „Kaufberatung“ auf der Portal-Startseite führen ins Leere. Der Text der Ernährungs-Seite (`id=107`) spricht noch von „DogWorkers“ (Vorlagentext).
diff --git a/assets/site.css b/assets/site.css
index dbcd1a4..df4ec41 100644
--- a/assets/site.css
+++ b/assets/site.css
@@ -46,7 +46,7 @@ body {
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
-img { display: block; max-width: 100%; }
+img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 400; line-height: 1.05; letter-spacing: -.025em; margin: 0; }
p { margin: 0; }
svg { flex: none; }
@@ -60,6 +60,10 @@ svg { flex: none; }
}
.skip:focus { transform: none; }
+/* Tastatur-Fokus: dunkler Ring auf hellem Grund, Salbei auf dunklen Flächen */
+:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
+.panel--ink :focus-visible, .panel--photo :focus-visible, .site-footer :focus-visible { outline-color: var(--sage); }
+
/* ===== Header: Logo und Menü als zwei schwebende Elemente ===== */
.site-header {
position: sticky; top: 0; z-index: 50;
@@ -239,7 +243,6 @@ svg { flex: none; }
.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 {
@@ -375,6 +378,8 @@ a.panel:hover .panel-arrow { background: var(--sage); border-color: var(--sage);
a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
.panel-arrow--ink { background: var(--ink); border-color: var(--ink); }
+/* Steht die Überschrift oben (Handy), darf sie nicht unter den Pfeil laufen */
+.panel-arrow--ink ~ .kicker { padding-right: 64px; }
/* Kurze Fakten als Pillen */
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
@@ -461,6 +466,14 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
.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); }
+/* Dreier-Reihen: Überschriften, Texte und Preise auf einer Linie, auch wenn ein Text kürzer ist */
+@media (min-width: 981px) {
+ .row--3 { grid-template-rows: 1fr auto auto; min-height: min(62svh, 620px); } /* Höhe wie .panel--mid – im Subgrid zählt die der Flächen nicht */
+ .row--3 > .panel { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; justify-content: stretch; }
+ .row--3 > .panel > * { align-self: start; }
+ .row--3 > .panel > .kicker { align-self: end; }
+}
+
/* Icon in Flächen */
.panel-icon {
width: 76px; height: 76px;
@@ -490,7 +503,7 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
.book-links a:hover { background: var(--ink); color: var(--bg); }
.book-links svg { width: 22px; height: 22px; transition: transform .4s var(--ease); }
.book-links a:hover svg { transform: translate(2px, -2px); }
-.book-links a:only-child { grid-column: 1 / -1; }
+.book-links a:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* G&H-Zertifikat */
.cert { display: block; width: clamp(150px, 13vw, 200px); height: auto; margin-top: 36px; }
@@ -549,18 +562,28 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
.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) {
+ .header-inner { gap: 10px; }
.nav { display: none; }
- .burger { display: grid; margin-left: 10px; }
+ .burger { display: grid; margin-left: 0; }
.book-btn { margin-left: auto; }
- .booking { grid-template-columns: 1fr; align-items: start; }
+ .booking { grid-template-columns: minmax(0, 1fr); align-items: start; }
+ /* Logo-Siegel über den Kacheln – mittig wäre es den Beschriftungen im Weg */
+ .tiles { grid-template-rows: auto 1fr 1fr; }
+ .seal {
+ position: static;
+ grid-column: 1 / -1;
+ width: 190px;
+ margin: 0 auto;
+ transform: scale(.9);
+ }
+ @keyframes seal { to { opacity: 1; transform: none; } }
+ .seal-joint { display: none; }
.menu-open .nav {
display: flex; flex-direction: column; gap: 4px;
position: fixed; top: 88px; left: var(--pad); right: var(--pad);
@@ -583,7 +606,7 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
.header-inner { height: 76px; }
.brand { width: 62px; height: 62px; }
.book-btn { height: 54px; padding: 0 18px; font-size: 1rem; }
- .book-links { grid-template-columns: 1fr; }
+ .book-links { grid-template-columns: minmax(0, 1fr); }
.footer-cert { height: 72px; }
.brand img { width: 58px; height: 58px; }
.burger { width: 54px; height: 54px; }
@@ -592,15 +615,10 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
.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;
- transform: scale(.9);
- }
- @keyframes seal { to { opacity: 1; transform: none; } }
- .seal-joint { display: none; }
+ .tile-foot { gap: 12px; }
+ .tile-label { font-size: clamp(1.4rem, 6.6vw, 1.7rem); }
+ .tile-arrow { width: 46px; height: 46px; }
+ .seal { width: 210px; margin: 4px auto -6px; }
.scroll-hint { display: none; }
.mosaic { gap: 12px; padding: 0 16px 16px; }
.row { gap: 12px; }
@@ -610,6 +628,10 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
.contact-links a { padding: 18px 18px; }
.page-hero { min-height: calc(100svh - 76px - 16px); }
.footer-brand { flex-direction: column; align-items: flex-start; }
+ /* lange Wörter („Transportboxen“, „Konsequenz“) passen auch auf schmale Handys */
+ .page-hero h1 { font-size: min(3.2rem, 11vw); }
+ .display { font-size: min(2.8rem, 12.5vw); }
+ .words li { font-size: min(2.4rem, 10.5vw); }
}
.book-short { display: none; }
@@ -627,6 +649,6 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
.scroll-hint { animation: none; }
.reveal { opacity: 1; transform: none; transition: none; }
}
-@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
+@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
.seal { transform: none; }
}
diff --git a/assets/site.js b/assets/site.js
index 53a26c4..cd5a56d 100644
--- a/assets/site.js
+++ b/assets/site.js
@@ -1,31 +1,41 @@
(() => {
const body = document.body;
- // Mobiles Menü
+ // Mobiles Menü – schließt auch mit Escape oder Tipp daneben
const burger = document.querySelector('.burger');
if (burger) {
- burger.addEventListener('click', () => {
- const open = body.classList.toggle('menu-open');
+ const setMenu = open => {
+ body.classList.toggle('menu-open', open);
burger.setAttribute('aria-expanded', open);
+ burger.setAttribute('aria-label', open ? 'Menü schließen' : 'Menü öffnen');
+ };
+ burger.addEventListener('click', () => setMenu(!body.classList.contains('menu-open')));
+ document.querySelectorAll('.nav a').forEach(a => a.addEventListener('click', () => setMenu(false)));
+ document.addEventListener('keydown', e => {
+ if (e.key === 'Escape' && body.classList.contains('menu-open')) { setMenu(false); burger.focus(); }
+ });
+ document.addEventListener('click', e => {
+ if (body.classList.contains('menu-open') && !e.target.closest('.nav, .burger')) setMenu(false);
});
- 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
+ // Startseite: Header einblenden, sobald der Hero verlassen wird. Auf Handy/Tablet steht das
+ // Siegel über den Kacheln – dort kommt der Header schon, sobald das Siegel aus dem Bild ist.
const hero = document.querySelector('.hero');
+ const seal = document.querySelector('.seal');
if (body.classList.contains('is-home') && hero) {
- new IntersectionObserver(([e]) => body.classList.toggle('scrolled', !e.isIntersecting), {
+ const past = { hero: false, seal: false };
+ const update = () => body.classList.toggle('scrolled', past.hero || past.seal);
+ new IntersectionObserver(([e]) => { past.hero = !e.isIntersecting; update(); }, {
rootMargin: '-120px 0px 0px 0px'
}).observe(hero);
+ if (seal) new IntersectionObserver(([e]) => {
+ past.seal = !e.isIntersecting && e.boundingClientRect.top < 0 && getComputedStyle(seal).position === 'static';
+ update();
+ }).observe(seal);
}
// Ring um das Logo-Siegel: Kreis + die vier Kachel-Lücken, Übergänge mit Radius f abgerundet
- const seal = document.querySelector('.seal');
const joint = document.querySelector('.seal-joint');
if (seal && joint) {
const drawJoint = () => {
diff --git a/datenschutz.html b/datenschutz.html
index 9217d20..7deedd5 100644
--- a/datenschutz.html
+++ b/datenschutz.html
@@ -18,7 +18,7 @@
-
+
Zum Inhalt springen
@@ -86,6 +86,6 @@
-
+
+
Termin buchen
@@ -43,26 +42,26 @@
Fehler 404
Hier ist leider
nichts zu finden.
Vielleicht hat ein Hund die Seite vergraben. Über die Startseite findest du alles wieder.
- +