feat(articles): visual upgrades — timeline, callouts, cards, severity pills

Add 4 reusable CSS article components and apply them across 6 cornerstone articles:

CSS (input.css):
- article-timeline: horizontal phase diagram with numbered cards, collapses to vertical on mobile
- article-callout (warning/tip/info): left-bordered callout boxes with icon and title
- article-cards: 2-col grid of accent-topped cards (success/failure/neutral/established/growth/emerging)
- severity: inline pill badges (high/medium-high/medium/low-medium/low) for risk tables

Articles updated:
- padel-hall-build-guide-en + padel-halle-bauen-de: ASCII code block → timeline HTML; 3 bold/blockquote warnings → callout boxes; success/failure patterns → 4 cards
- padel-hall-investment-risks-en + padel-halle-risiken-de: risk overview table severity → pills; personal guarantee section → callout; risk management section → 4 cards
- padel-hall-location-guide-en + padel-standort-analyse-de: market maturity paragraphs → 3 stage cards

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

data/content/articles/padel-hall-investment-risks-en.md

@@ -21,20 +21,20 @@ This article covers the 14 risks that don't get enough airtime in investor discu
 
 | # | Risk | Category | Severity |
 |---|------|----------|----------|
-| 1 | Trend / fad risk | Strategic | High |
-| 2 | Construction cost overruns | Construction & Development | High |
-| 3 | Construction delays | Construction & Development | High |
-| 4 | Landlord risk: sale, insolvency, non-renewal | Property & Lease | High |
-| 5 | New competitor in your catchment | Competition | Medium–High |
-| 6 | Key-person dependency | Operations | Medium |
-| 7 | Staff retention and wage pressure | Operations | Medium |
-| 8 | Court surface and maintenance cycles | Operations | Medium |
-| 9 | Energy price volatility | Financial | Medium |
-| 10 | Interest rate risk | Financial | Medium |
-| 11 | Personal guarantee exposure | Financial | High |
-| 12 | Customer concentration | Financial | Medium |
-| 13 | Noise complaints and regulatory restrictions | Regulatory & Legal | Medium |
-| 14 | Booking platform dependency | Regulatory & Legal | Low–Medium |
+| 1 | Trend / fad risk | Strategic | <span class="severity severity--high">High</span> |
+| 2 | Construction cost overruns | Construction & Development | <span class="severity severity--high">High</span> |
+| 3 | Construction delays | Construction & Development | <span class="severity severity--high">High</span> |
+| 4 | Landlord risk: sale, insolvency, non-renewal | Property & Lease | <span class="severity severity--high">High</span> |
+| 5 | New competitor in your catchment | Competition | <span class="severity severity--medium-high">Medium–High</span> |
+| 6 | Key-person dependency | Operations | <span class="severity severity--medium">Medium</span> |
+| 7 | Staff retention and wage pressure | Operations | <span class="severity severity--medium">Medium</span> |
+| 8 | Court surface and maintenance cycles | Operations | <span class="severity severity--medium">Medium</span> |
+| 9 | Energy price volatility | Financial | <span class="severity severity--medium">Medium</span> |
+| 10 | Interest rate risk | Financial | <span class="severity severity--medium">Medium</span> |
+| 11 | Personal guarantee exposure | Financial | <span class="severity severity--high">High</span> |
+| 12 | Customer concentration | Financial | <span class="severity severity--medium">Medium</span> |
+| 13 | Noise complaints and regulatory restrictions | Regulatory & Legal | <span class="severity severity--medium">Medium</span> |
+| 14 | Booking platform dependency | Regulatory & Legal | <span class="severity severity--low-medium">Low–Medium</span> |
 
 ---
 
@@ -137,9 +137,12 @@ Your costs will increase three to five percent per year. Whether you can pass th
 
 ## The Risk No One Talks About: Personal Guarantees
 
-**This section gets skipped in almost every padel hall investment conversation. That's a serious mistake.**
-
-Banks financing a single-asset leisure facility without corporate backing will almost universally require personal guarantees from the principal shareholders. Not as an unusual request — as standard terms for this type of deal.
+<div class="article-callout article-callout--warning">
+  <div class="article-callout__body">
+    <span class="article-callout__title">This section gets skipped in almost every padel hall investment conversation. That's a serious mistake.</span>
+    <p>Banks financing a single-asset leisure facility without corporate backing will almost universally require personal guarantees from the principal shareholders. Not as an unusual request — as standard terms for this type of deal.</p>
+  </div>
+</div>
 
 Here is what that means in practice:
 
@@ -180,13 +183,36 @@ Building a parallel booking capability — even a simple direct booking option
 
 The investors who succeed long-term in padel aren't the ones who found a risk-free opportunity. There isn't one. They're the ones who went in with their eyes open.
 
-**They modeled the bad scenarios before assuming the good ones.** A business plan that shows only the base case isn't a planning tool — it's wishful thinking. Explicit downside modeling — 40% utilization, six-month delay, new competitor in year three — is the baseline, not an optional exercise.
-
-**They built structural buffers into the plan.** Liquid reserves covering at least six months of fixed costs. Construction contingency treated as a budget line, not a hedge. These aren't comfort margins; they're operational requirements.
-
-**They got the contractual foundations right from the start.** Lease terms. Financing conditions. Guarantee scope. The cost of good legal and financial advice at the planning stage is trivial relative to the downside exposure it addresses.
-
-**They planned for competition.** Not by hoping it wouldn't come, but by building a product — community, quality, service — that gives existing customers a reason to stay when someone cheaper opens nearby.
+<div class="article-cards">
+  <div class="article-card article-card--success">
+    <div class="article-card__accent"></div>
+    <div class="article-card__inner">
+      <span class="article-card__title">Model the bad scenarios first</span>
+      <p class="article-card__body">A business plan showing only the base case isn't a planning tool — it's wishful thinking. Explicit downside modeling — 40% utilization, six-month delay, new competitor in year three — is the baseline, not an optional exercise.</p>
+    </div>
+  </div>
+  <div class="article-card article-card--success">
+    <div class="article-card__accent"></div>
+    <div class="article-card__inner">
+      <span class="article-card__title">Build structural buffers in</span>
+      <p class="article-card__body">Liquid reserves covering at least six months of fixed costs. Construction contingency treated as a budget line, not a hedge. These aren't comfort margins; they're operational requirements.</p>
+    </div>
+  </div>
+  <div class="article-card article-card--success">
+    <div class="article-card__accent"></div>
+    <div class="article-card__inner">
+      <span class="article-card__title">Get the contractual foundations right</span>
+      <p class="article-card__body">Lease terms. Financing conditions. Guarantee scope. The cost of good legal and financial advice at the planning stage is trivial relative to the downside exposure it addresses.</p>
+    </div>
+  </div>
+  <div class="article-card article-card--success">
+    <div class="article-card__accent"></div>
+    <div class="article-card__inner">
+      <span class="article-card__title">Plan for competition</span>
+      <p class="article-card__body">Not by hoping it won't come, but by building a product — community, quality, service — that gives existing customers a reason to stay when someone cheaper opens nearby.</p>
+    </div>
+  </div>
+</div>
 
 ---