From f03b67e675fd067b183f57bd547aff6311147089 Mon Sep 17 00:00:00 2001
From: Brummel <mould@mycelium.de>
Date: Thu, 21 May 2026 00:08:25 +0200
Subject: [PATCH] feat: home page section_title macros and restored markup

Restores the markup contracts the theme CSS expects on the home page:
- imports section_title macro (st) and calls it on all four sections
- news/about/services/team sections get bordered-icon headings via macro
- service cards use thumbnail/caption/clearfix structure (2-col grid)
- team portraits use figure/figcaption with small for position
- gray-bg (not bg-gray) on the services section
---
 templates/index.html | 60 +++++++++++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 23 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 7012423..01a9881 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% import "macros/image.html" as image %}
+{% import "macros/section_title.html" as st %}
 
 {% block content %}
 
@@ -34,14 +35,18 @@
 
 {# ───────── News (loaded from content/news.md) ───────── #}
 {% set news_page = get_page(path="news.md") %}
-<section class="ptb-100" id="aktuelles">
+<section class="news-text ptb-text" id="aktuelles">
+  {{ st::section_title(title="Aktuelles") }}
   <div class="container">
-    {{ news_page.content | safe }}
+    <div class="row">
+      {{ news_page.content | safe }}
+    </div>
   </div>
 </section>
 
 {# ───────── About columns ───────── #}
-<section class="ptb-100">
+<section class="about-text ptb-100">
+  {{ st::section_title(title="Willkommen in unserer Praxis am Lienhardplatz") }}
   <div class="container">
     <div class="row">
       {% for col in section.extra.about_columns %}
@@ -52,36 +57,45 @@
 </section>
 
 {# ───────── Service grid ───────── #}
-<section class="ptb-100 bg-gray">
+<section class="x-services ptb-100 gray-bg">
+  {{ st::section_title(title="Unsere Leistungen") }}
   <div class="container">
-    <h2 class="text-center">Unsere Leistungen</h2>
-    <div class="row">
-      {% for card in section.extra.service_cards %}
-        <div class="col-md-4 col-sm-6">
-          <a href="{{ card.url }}" class="service-card">
-            {{ image::render(src=card.image, width=600, alt=card.title) }}
-            <h3>{{ card.title }}</h3>
-            <p>{{ card.description }}</p>
-          </a>
+    {% for card in section.extra.service_cards %}
+      {% if loop.index0 % 2 == 0 %}<div class="row">{% endif %}
+        <div class="col-md-6">
+          <div class="thumbnail clearfix">
+            <a href="{{ card.url | safe }}">
+              {{ image::render(src=card.image, width=600, alt=card.title) }}
+            </a>
+            <div class="caption">
+              <h3><a href="{{ card.url | safe }}">{{ card.title }}</a></h3>
+              <p>{{ card.description }}</p>
+            </div>
+          </div>
         </div>
-      {% endfor %}
-    </div>
+      {% if loop.index0 % 2 == 1 or loop.last %}</div>{% endif %}
+    {% endfor %}
   </div>
 </section>
 
 {# ───────── Team preview ───────── #}
 {% if section.extra.team_preview %}
-<section class="ptb-100">
+<section class="team ptb-100">
+  {{ st::section_title(title="Ihr Ärzteteam") }}
   <div class="container">
-    <h2 class="text-center">Unser Team</h2>
     <div class="row">
       {% for member in section.extra.team_preview %}
-        <div class="col-md-4 col-sm-6 text-center">
-          <a href="{{ member.url }}">
-            {{ image::render(src=member.image, width=400, alt=member.name) }}
-            <h4>{{ member.name }}</h4>
-            <p>{{ member.position }}</p>
-          </a>
+        <div class="col-md-4">
+          <figure class="thumbnail">
+            <a href="{{ member.url | safe }}">
+              {{ image::render(src=member.image, width=400, alt=member.name) }}
+            </a>
+            <figcaption class="caption text-center">
+              <h3>{{ member.name }} -
+                <small>{{ member.position }}</small>
+              </h3>
+            </figcaption>
+          </figure>
         </div>
       {% endfor %}
     </div>