5 Säulen: eine Fläche mit sanftem Grün-Verlauf pro Zeile

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

assets/site.css

@@ -279,6 +279,7 @@ svg { flex: none; }
 .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 */
@@ -367,20 +368,39 @@ 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 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);
+/* 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);
   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; }
+.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); }
+}
 
 /* Schritte */
 .steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@@ -487,7 +507,8 @@ 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; }
-  .words span { display: none; }
+  .pillar { flex-wrap: wrap; row-gap: 8px; }
+  .pillar span:not(.kicker) { margin-left: 0; text-align: left; width: 100%; }
 }
 @media (max-width: 767px) {
   body { font-size: 18px; }

hundeschule.html

@@ -54,16 +54,14 @@
       </div>
     </div>
 
-    <div class="panel panel--ink tone-1 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>
+    <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--sage tone-8 panel--auto reveal">
       <span class="kicker">Preise</span>

index.html

@@ -105,16 +105,14 @@
       <span class="statement-by">— Katha</span>
     </div>
 
-    <div class="panel panel--ink tone-1 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>
+    <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="row">
       <a class="panel panel--photo reveal" href="shop.html">

tools/build_pages.py

@@ -116,6 +116,19 @@ 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)
 
@@ -190,17 +203,7 @@ index = head("Schmacko Napf & Hundetraining by Katha", "Hundetraining, Ernährun
       <span class="statement-by">— Katha</span>
     </div>
 
-    <div class="panel panel--ink tone-1 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>
-
+{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="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">
@@ -246,17 +249,7 @@ page("hundeschule.html", "Hundetraining – Schmacko Napf",
       </div>
     </div>
 
-    <div class="panel panel--ink tone-1 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>
-
+{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">
       <span class="kicker">Preise</span>
       <h2 class="title">Fair und klar.</h2>