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

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

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>