praxis-page/docs/plans/2026-05-21-praxis-visual-parity-2.md

Visual Parity Pass 2 — Implementation Plan

Goal: Restore the missing team carousel on /team/, fix carousel image distortion, clean up markdown / autoescape glitches in doctors.md and navbar — closing the regressions reported after Phase 1.5 deploy.

Architecture: New team_carousel.html macro + section.html dispatch by page.extra.layout; rewrite content/team/employees.md to carry slides as front-matter data; spot fixes in doctors.md and navbar.html.

Tech Stack: Zola 0.22, Tera, Bootstrap 3 (carousel JS already wired in base.html), Font Awesome (icons already loaded).

---

Task 1: Rewrite content/team/employees.md with carousel front matter

Files:

• Modify: content/team/employees.md (full rewrite)

Replace the entire file with TOML front matter holding the five slides and an empty body:

+++
title = "Unser Praxis-Team"
weight = 20

[extra]
anchor = "employees"
layout = "carousel"

[[extra.slides]]
name = "Frau Berscheidt"
image = "Berscheidt.jpg"
description = "Medizinische Fachangestellte, Diabetes-Assistentin"

[[extra.slides]]
name = "Frau Bolz"
image = "Bolz.jpg"
description = "Medizinische Fachangestellte"

[[extra.slides]]
name = "Frau Frohne"
image = "Frohne.jpg"
description = "Medizinische Fachangestellte"

[[extra.slides]]
name = "Frau Merhof"
image = "Merhof.jpg"
description = "Medizinische Fachangestellte"

[[extra.slides]]
name = "Frau Rodrigues"
image = "Rodrigues.jpg"
description = "Medizinische Fachangestellte"
+++

Commit:

fix(team): convert employees.md to carousel front-matter data

Task 2: Create templates/macros/team_carousel.html

Files:

• Create: templates/macros/team_carousel.html

{% macro team_carousel(title, anchor, slides) %}
<section class="employees">
  <section class="section-title">
    <div class="container text-center">
      {%- if anchor %}
      <div class="anchor" id="{{ anchor }}">
        <h2>{{ title }}</h2>
      </div>
      {%- else %}
      <h2>{{ title }}</h2>
      {%- endif %}
      <span class="bordered-icon"><i class="fa fa-circle-thin"></i></span>
    </div>
  </section>

  <div class="container">
    <div id="employeesSlider" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
        {%- for slide in slides %}
        <div class="item{% if loop.first %} active{% endif %}">
          <blockquote>
            <ul>
              <li><img src="/images/team/{{ slide.image }}" alt="{{ slide.name }}"></li>
              <li class="name">{{ slide.name }}</li>
            </ul>
            <p>{{ slide.description }}</p>
          </blockquote>
        </div>
        {%- endfor %}
      </div>
      <a class="left carousel-control" href="#employeesSlider" role="button" data-slide="prev">
        <span><i class="fa fa-angle-left"></i></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#employeesSlider" role="button" data-slide="next">
        <span><i class="fa fa-angle-right"></i></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</section>
{% endmacro %}

Commit:

feat(templates): add team_carousel macro mirroring live employees block

Task 3: Wire macro into templates/section.html

Files:

• Modify: templates/section.html

Add the macro import alongside the others, and branch on page.extra.layout in the child-page loop:

{% extends "base.html" %}
{% import "macros/section_title.html" as st %}
{% import "macros/page_title.html" as pt %}
{% import "macros/team_carousel.html" as tc %}

{% block content %}

{{ pt::page_title(title=section.title) }}

{% if section.content %}
<section class="ptb-100">
  <div class="container">
    <div class="row"><div class="col-md-12">{{ section.content | safe }}</div></div>
  </div>
</section>
{% endif %}

{% for page in section.pages %}
  {% if page.extra.layout == "carousel" %}
    {{ tc::team_carousel(
         title=page.title,
         anchor=page.extra.anchor | default(value=page.slug),
         slides=page.extra.slides) }}
  {% else %}
    <section class="text ptb-text">
      {{ st::section_title(title=page.title, anchor=page.extra.anchor | default(value=page.slug)) }}
      <div class="container">
        <div class="row">
          {{ page.content | safe }}
        </div>
      </div>
    </section>
  {% endif %}
{% endfor %}

{% endblock %}

Commit:

feat(templates): dispatch section pages by extra.layout for carousel support

Task 4: Fix <h5> headings in content/team/doctors.md

Files:

• Modify: content/team/doctors.md

Replace every #####X (no space) with ##### X (with space) — exactly six lines:

• #####Qualifikation → ##### Qualifikation (3×)
• #####Tätigkeitsschwerpunkte → ##### Tätigkeitsschwerpunkte (2×)
• #####Tätigkeitsschwerpunkt → ##### Tätigkeitsschwerpunkt (1×)
• #####Interessenschwerpunkt → ##### Interessenschwerpunkt (1×)

(Total occurrences: 6 — verified via grep -c '^#####[^ ]' content/team/doctors.md.)

Task 5: Fix </th> closing tags in content/team/doctors.md

Files:

• Modify: content/team/doctors.md

Each doctor block has a schedule table with two <td>…</th> mismatches in its first row. Replace </th> with </td> — six total occurrences.

Combine commits 4+5:

fix(content): proper md headings and td closing tags in doctors.md

Task 6: Strip base_url from nav permalinks in templates/partials/navbar.html

Files:

• Modify: templates/partials/navbar.html

For each <a href="{{ ... .permalink }}"> (two top-level loops, plus the mobile menu list further down):

• Old: href="{{ sub.permalink }}" (etc.)
• New: href="{{ sub.permalink | replace(from=config.base_url, to='') | safe }}"

Same treatment for cpage.permalink inside the dropdown.

Commit:

fix(navbar): render nav hrefs as relative paths to match live markup

Task 7: Build, deploy, verify

• Run zola build from project root. Expect zero warnings/errors.
• Read public/team/index.html and confirm:
  • One <section class="employees"> containing id="employeesSlider".
  • Exactly five <div class="item"> blocks (first with active).
  • Each item has <blockquote><ul><li><img src="/images/team/…"></li><li class="name">…</li></ul><p>…</p></blockquote>.
  • No <p>#####…</p> literals in the doctors section.
  • No </th> substrings.
• Read public/index.html and confirm nav <a href="/services/"> (no /).
• rsync -avz --delete public/ mycelium:~/public/praxis/.
• curl -sI https://preview.praxis-am-lienhardplatz.de/team → expect HTTP/2 200.
• Final commit on the deploy step:

chore(deploy): visual parity pass 2 — team carousel restored, markup cleaned

• git push origin main.

---

Self-review checklist (before exec)

• Every spec finding has a corresponding task.
• No placeholders / TBDs.
• Type consistency: slides list, slide.image, slide.name, slide.description are the same names in employees.md, the macro, and the spec.
• Images path: static/images/team/<file>.jpg → served at /images/team/<file>.jpg.
• Bootstrap-3 carousel auto-init (data-ride="carousel") — no extra JS needed.
• Footer + base.html unchanged.