Prüfdurchgang: Buchungslinks, alte Adressen, Tablet/Handy-Layout

- Buchungslinks direkt auf Portal-IDs; Ernährungsberatung auf id=107,
  Kaufberatung entfernt (im Portal gibt es keine Seite dafür)
- .htaccess: alte WordPress-Adressen per 301 auf die neuen Seiten
- Tablet bis 980 px: Logo-Siegel über den Kacheln statt darauf
- Handy: lange Wörter werden nicht mehr abgeschnitten, Pfeile
  überdecken keinen Text mehr, „Buchen“ neben dem Menü-Knopf
- Dreier-Karten: Überschriften auf einer Linie (Subgrid)
- Menü schließt mit Escape und Tipp daneben; sichtbarer Fokusrahmen
- Startseite Handy/Tablet: Kopfleiste, sobald das Siegel weg ist
- 404: Pfade ab der Wurzel statt <base>, Sprunglink bleibt auf der Seite

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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; }
 }