Auf dieser Seite
10 components
The page's content furniture — full-width blocks like hero, CTA, stat strip, logo cloud, steps, feature grid, founder bio and media split. Assembled into complete pages on the Archetypes page.
Hero
Full-width dark hero with fluid padding; optional grid texture.
.hero .hero--grid
Ein Prozess-Review zeigt in einem halben Tag, wo Ihre größten Hebel liegen.
View source
<div class="hero hero--grid">
<div class="container">
<div class="eyebrow">Digitalisierung & Prozessoptimierung</div>
<div class="display">Klarheit auf CIO-Niveau.</div>
<p>Ein Prozess-Review zeigt in einem halben Tag, wo Ihre größten Hebel liegen.</p>
<div class="row" style="margin-top: 24px;">
<a href="#" class="btn-primary">Erstgespräch buchen →</a>
<a href="#" class="btn-secondary">Mehr erfahren</a>
</div>
</div>
</div>CTA / newsletter block
Text + action band; stacks on mobile. Good for newsletter prompts.
.cta-block
View source
<div class="cta-block">
<div class="cta-text"><strong>Bleiben Sie auf dem Laufenden.</strong> Ein Impuls pro Woche, kein Spam.</div>
<a href="#" class="btn-email">Abonnieren →</a>
</div>Stat / KPI block
Big-number proof points in a row of 2–4. Uppercase labels. Add .stat-row--divided for hairline separators, .stat-row--on-dark for hero sections, .stat-block--bar for a relative-value bar.
.stat-row .stat-block .stat-value .stat-label .stat-prefix .stat-suffix .stat-row--divided .stat-row--on-dark .stat-block--bar
View source
<div class="stat-row stat-row--divided">
<div class="stat-block"><div class="stat-value"><span class="stat-prefix">€</span>133<span class="stat-suffix"> Mio.</span></div><div class="stat-label">Ökosystem unter Governance</div></div>
<div class="stat-block"><div class="stat-value">17</div><div class="stat-label">Jahre als Tech & Org Lead</div></div>
<div class="stat-block"><div class="stat-value">5</div><div class="stat-label">Dimensionen im Prozess-Review</div></div>
</div>Stat / KPI block — Bar-augmented
Add .stat-block--bar for a thin relative-value bar (maturity, fit %).
View source
<div class="stat-row">
<div class="stat-block stat-block--bar"><div class="stat-value">82<span class="stat-suffix">%</span></div><div class="stat-bar" role="presentation"><div class="stat-bar-fill" style="width:82%"></div></div><div class="stat-label">Digitaler Reifegrad nach Umsetzung</div></div>
</div>Stat / KPI block — On dark (hero stats-bar)
Add .stat-row--on-dark — sits under hero copy on a dark surface, with a top hairline.
View source
<div style="background:var(--color-black);padding:40px;border-radius:var(--radius-card)">
<div class="stat-row stat-row--divided stat-row--on-dark" style="margin-top:0;border-top:none;padding-top:0">
<div class="stat-block"><div class="stat-value">133</div><div class="stat-label">Mio. € Governance</div></div>
<div class="stat-block"><div class="stat-value">17</div><div class="stat-label">Jahre Erfahrung</div></div>
<div class="stat-block"><div class="stat-value">5</div><div class="stat-label">Dimensionen</div></div>
</div>
</div>Big-stat hero
A single oversized proof number + label + optional context, sized for a band or hero — the section-tier counterpart to the Stat / KPI row. Use when ONE number is the whole point. Prefix/suffix (€, %, Mio.) sit on the numeral baseline. Add .stat-hero--on-dark for dark sections (and the social big-stat card it back-ports).
.stat-hero .stat-hero__value .stat-hero__prefix .stat-hero__unit .stat-hero__label .stat-hero__context .stat-hero--on-dark
View source
<div class="stat-hero">
<div class="stat-hero__value">82<span class="stat-hero__unit">%</span></div>
<div class="stat-hero__label">weniger manuelle Nacharbeit nach dem Prozess-Review</div>
<div class="stat-hero__context">Gemessen über drei Monate in Back-Office und Fulfillment.</div>
</div>Big-stat hero — On dark
Add .stat-hero--on-dark — the numeral uses the on-dark terracotta (--color-accent); label + context flip to the on-dark palette. This is the look back-ported from the social big-stat card.
View source
<div style="background:var(--color-black);padding:48px;border-radius:var(--radius-card)">
<div class="stat-hero stat-hero--on-dark">
<div class="stat-hero__value"><span class="stat-hero__prefix">€</span>133<span class="stat-hero__unit"> Mio.</span></div>
<div class="stat-hero__label">Ökosystem unter Governance</div>
<div class="stat-hero__context">Als CIO und Governance-Lead für OpenGov.Watch.</div>
</div>
</div>Pull-quote / quote hero
Full-bleed editorial pull-quote for a band or hero — no card chrome, an oversized decorative quote-mark bleeding behind the opening words, then author + role. The section-tier counterpart to the Testimonial card: use when a single quote IS the section, not a tile in a grid. Add .pullquote--on-dark for dark bands (the look back-ported from the social quote card).
.pullquote .pullquote__quote .pullquote__cite .pullquote__author .pullquote__role .pullquote--on-dark
Wir wussten, dass unsere Tools nicht zusammenspielen – aber nicht, wo wir ansetzen sollten.
View source
<figure class="pullquote" style="margin:0">
<blockquote class="pullquote__quote" style="margin:0">Wir wussten, dass unsere Tools nicht zusammenspielen – aber nicht, wo wir ansetzen sollten.</blockquote>
<figcaption class="pullquote__cite">
<span class="pullquote__author">— Francesco Rocchetti</span>
<span class="pullquote__role">Operations, Europe's Futures Initiative</span>
</figcaption>
</figure>Pull-quote / quote hero — On dark
Add .pullquote--on-dark for black bands — the bleeding mark lifts to 0.15 opacity and the quote goes light. This is the look back-ported from the social quote card.
View source
<div style="background:var(--color-black);padding:64px 56px 48px;border-radius:var(--radius-card);overflow:hidden">
<figure class="pullquote pullquote--on-dark" style="margin:0">
<blockquote class="pullquote__quote" style="margin:0">Bei der Software-Auswahl hätten wir uns leicht verrennen können. Tommi hat die Optionen nüchtern gegeneinandergestellt.</blockquote>
<figcaption class="pullquote__cite">
<span class="pullquote__author">— Christian Skihar</span>
<span class="pullquote__role">Inhaber, Die Skischule.at</span>
</figcaption>
</figure>
</div>Logo cloud / trust strip
Muted, centred row of client/partner logos. Use real <img class="logo-cloud__logo"> (grayscale, colour on hover) or text wordmark placeholders. Add .logo-cloud--dark for hero sections.
.logo-cloud .logo-cloud--dark .logo-cloud__label .logo-cloud__row .logo-cloud__item .logo-cloud__logo .logo-cloud__note
Ausgewählte Kunden
View source
<section class="logo-cloud">
<div class="container">
<p class="logo-cloud__label eyebrow">Ausgewählte Kunden</p>
<div class="logo-cloud__row" role="list" aria-label="Ausgewählte Kunden">
<div class="logo-cloud__item" role="listitem"><span class="logo-wordmark">Europe's Futures Initiative</span></div>
<div class="logo-cloud__item" role="listitem"><span class="logo-wordmark">Die Skischule.at</span></div>
</div>
</div>
</section>Logo cloud / trust strip — Dark
Add .logo-cloud--dark for placement on a dark hero.
Ausgewählte Kunden
View source
<section class="logo-cloud logo-cloud--dark">
<div class="container">
<p class="logo-cloud__label eyebrow">Ausgewählte Kunden</p>
<div class="logo-cloud__row" role="list" aria-label="Ausgewählte Kunden">
<div class="logo-cloud__item" role="listitem"><span class="logo-wordmark">Europe's Futures Initiative</span></div>
<div class="logo-cloud__item" role="listitem"><span class="logo-wordmark">Die Skischule.at</span></div>
</div>
</div>
</section>Steps / Ablauf
Numbered process steps — "So läuft ein Prozess-Review ab", an offer Ablauf, a workshop agenda. .steps--list (compact), .steps--journey (connected timeline), .steps--bar (milestone strip), .steps--levels (the quiz level roadmap), .steps--flow (diagram-style cards with arrowhead connectors). Optional progress states .is-done / .is-active / .is-upcoming for live trackers; .step--accent marks a pivotal step; .steps--dark places any variant on a dark surface.
.steps .steps--list .steps--journey .steps--bar .steps--levels .steps--flow .steps--flow-h .steps--dark .step .step--accent .step-num .step-line .step-body .step-tag .step-title .step-text
- 1
Erstgespräch
30 Minuten, unverbindlich — wo liegen die größten Hebel?
- 2
Angebot
Klarer Fixpreis und Umfang, in zwei bis drei Tagen.
- 3
Projektstart
Los geht's — in der Regel innerhalb von zwei Wochen.
View source
<ol class="steps steps--list" aria-label="Ablauf">
<li class="step"><span class="step-num">1</span><div class="step-body"><p class="step-title">Erstgespräch</p><p class="step-text">30 Minuten, unverbindlich — wo liegen die größten Hebel?</p></div></li>
<li class="step"><span class="step-num">2</span><div class="step-body"><p class="step-title">Angebot</p><p class="step-text">Klarer Fixpreis und Umfang, in zwei bis drei Tagen.</p></div></li>
<li class="step"><span class="step-num">3</span><div class="step-body"><p class="step-title">Projektstart</p><p class="step-text">Los geht's — in der Regel innerhalb von zwei Wochen.</p></div></li>
</ol>Steps / Ablauf — Journey (connected timeline)
Add .steps--journey for a vertical timeline with a connector line between markers (last step omits the line). One sentence per step — workshop agendas, process flows.
- 1
Bestandsaufnahme
Ich sehe mir Ihre Abläufe an — vor Ort oder remote.
- 2
Hebel-Map
Eine priorisierte Landkarte: wo der größte Hebel liegt.
- 3
Umsetzung
Wir ziehen den ersten Hebel — sichtbar, messbar.
View source
<ol class="steps steps--journey" aria-label="Ablauf">
<li class="step"><div class="step-marker"><span class="step-num">1</span><span class="step-line" aria-hidden="true"></span></div><div class="step-body"><p class="step-title">Bestandsaufnahme</p><p class="step-text">Ich sehe mir Ihre Abläufe an — vor Ort oder remote.</p></div></li>
<li class="step"><div class="step-marker"><span class="step-num">2</span><span class="step-line" aria-hidden="true"></span></div><div class="step-body"><p class="step-title">Hebel-Map</p><p class="step-text">Eine priorisierte Landkarte: wo der größte Hebel liegt.</p></div></li>
<li class="step"><div class="step-marker"><span class="step-num">3</span><span class="step-line" aria-hidden="true"></span></div><div class="step-body"><p class="step-title">Umsetzung</p><p class="step-text">Wir ziehen den ersten Hebel — sichtbar, messbar.</p></div></li>
</ol>Steps / Ablauf — Bar (milestone strip)
Add .steps--bar for a horizontal week/phase strip with a hairline connector.
View source
<ol class="steps steps--bar" aria-label="Ablauf">
<li class="step-milestone"><span class="step-num">1</span><span class="step-label">Woche 1</span><span class="step-text">Diagnose</span></li>
<li class="step-milestone"><span class="step-num">2</span><span class="step-label">Woche 3</span><span class="step-text">Hebel-Map</span></li>
<li class="step-milestone"><span class="step-num">3</span><span class="step-label">Woche 5</span><span class="step-text">Umsetzung</span></li>
</ol>Steps / Ablauf — Levels (roadmap)
Add .steps--levels for the quiz "4 Level" roadmap — outlined number dots on a terracotta gradient connector, with LEVEL / name / quote centered beneath each.
View source
<div class="steps steps--levels" role="list" aria-label="Digitalisierungs-Level">
<div class="level-item" role="listitem"><div class="level-dot" aria-hidden="true">1</div><div class="level-label">Level 1</div><div class="level-name">Manuell</div><div class="level-quote">„Es funktioniert, weil die richtigen Leute wissen wie."</div></div>
<div class="level-item" role="listitem"><div class="level-dot" aria-hidden="true">2</div><div class="level-label">Level 2</div><div class="level-name">Digitalisiert</div><div class="level-quote">„Wir haben die Tools, aber sie reden nicht miteinander."</div></div>
<div class="level-item" role="listitem"><div class="level-dot" aria-hidden="true">3</div><div class="level-label">Level 3</div><div class="level-name">Vernetzt</div><div class="level-quote">„Es läuft, auch wenn ich nicht da bin."</div></div>
<div class="level-item" role="listitem"><div class="level-dot" aria-hidden="true">4</div><div class="level-label">Level 4</div><div class="level-name">Optimiert</div><div class="level-quote">„Mein Team arbeitet an dem, was wirklich zählt."</div></div>
</div>Steps / Ablauf — Flow (diagram cards)
Add .steps--flow for filled step cards joined by arrowhead connectors — a process diagram. Vertical by default; add .steps--flow-h for a horizontal row. Mark the pivotal step with .step--accent (terracotta tint). Each card: optional .step-tag eyebrow / .step-title / .step-text. This is the look the social/process-flow card renders (with .steps--dark on its dark canvas).
- 1
Manuell
Eingang
Belege landen per Mail und Papier.
- 2
KI-Andock
Verarbeitung
Automatische Erfassung und Zuordnung.
- 3
Freigabe
Ein Klick statt Tippen.
View source
<ol class="steps steps--flow" aria-label="Ablauf">
<li class="step"><span class="step-num">1</span><div class="step-body"><p class="step-tag">Manuell</p><p class="step-title">Eingang</p><p class="step-text">Belege landen per Mail und Papier.</p></div></li>
<li class="step step--accent"><span class="step-num">2</span><div class="step-body"><p class="step-tag">KI-Andock</p><p class="step-title">Verarbeitung</p><p class="step-text">Automatische Erfassung und Zuordnung.</p></div></li>
<li class="step"><span class="step-num">3</span><div class="step-body"><p class="step-title">Freigabe</p><p class="step-text">Ein Klick statt Tippen.</p></div></li>
</ol>Feature / service grid
Icon/heading/copy tiles — "Leistungen", "Was Sie mitnehmen", the Prozess-Review dimensions. White card with a terracotta top accent; optional .feature-icon slot (inline Lucide line-icon, stroke 1.5). .feature-grid--2col / --list layouts, .feature-grid--on-dark for dark sections, .feature--full to span all columns.
.feature-grid .feature-grid--2col .feature-grid--list .feature-grid--on-dark .feature .feature--full .feature-icon .feature-name .feature-body
- Marketing
Vom ersten Kontakt bis zum Lead — wo Reichweite verpufft und wo sie wirkt.
- Vertrieb
Vom Angebot bis zum Abschluss — strukturiert statt aus dem Bauch.
- Back-Office
Die wiederkehrende Handarbeit, die niemand sehen will — automatisiert.
View source
<ul class="feature-grid">
<li class="feature"><span class="feature-icon"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 7h6v6"/><path d="m22 7-8.5 8.5-5-5L2 17"/></svg></span><div class="feature-name">Marketing</div><p class="feature-body">Vom ersten Kontakt bis zum Lead — wo Reichweite verpufft und wo sie wirkt.</p></li>
<li class="feature"><span class="feature-icon"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg></span><div class="feature-name">Vertrieb</div><p class="feature-body">Vom Angebot bis zum Abschluss — strukturiert statt aus dem Bauch.</p></li>
<li class="feature"><span class="feature-icon"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 4H14"/><path d="M10 4H3"/><path d="M21 12h-9"/><path d="M8 12H3"/><path d="M21 20h-5"/><path d="M12 20H3"/><path d="M14 2v4"/><path d="M8 10v4"/><path d="M16 18v4"/></svg></span><div class="feature-name">Back-Office</div><p class="feature-body">Die wiederkehrende Handarbeit, die niemand sehen will — automatisiert.</p></li>
</ul>Feature / service grid — On dark
Add .feature-grid--on-dark on a dark section — translucent card fill, terracotta-tint icon circle, light text.
- Schnell
Klarheit in einem halben Tag, nicht in einem Quartal.
- Orientiert
Eine priorisierte Landkarte — Sie wissen, wo Sie zuerst ansetzen.
View source
<div style="background:var(--bg-dark);padding:32px;border-radius:var(--radius-card)">
<ul class="feature-grid feature-grid--2col feature-grid--on-dark">
<li class="feature"><span class="feature-icon"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg></span><div class="feature-name">Schnell</div><p class="feature-body">Klarheit in einem halben Tag, nicht in einem Quartal.</p></li>
<li class="feature"><span class="feature-icon"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z"/><path d="m16.24 7.76-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z"/></svg></span><div class="feature-name">Orientiert</div><p class="feature-body">Eine priorisierte Landkarte — Sie wissen, wo Sie zuerst ansetzen.</p></li>
</ul>
</div>Founder / Über-mich bio
Portrait + name + role + bio + credentials — the "Über mich" block and proposal author block. Dark portrait section by default (.founder), or .founder--inline for a light surface with a circular photo embedded mid-offer. The .founder__credentials slot holds proof points.
.founder .founder--inline .founder__inner .founder__photo-well .founder__name .founder__role .founder__bio .founder__credentials
Wer dahintersteht
Tommi Enenkel
Digitalisierung & Prozessoptimierung
17 Jahre als Tech-, Marketing- und Org-Lead. Früher CIO bei NEOS (2.500 User), heute Fractional CIO für den Mittelstand im DACH-Raum.
- 17Jahre Tech · Marketing · Org
- €133 Mio.Polkadot Governance
View source
<section class="founder" aria-label="Über mich">
<div class="founder__inner">
<div class="founder__photo-well"><svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><path d="M12 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg></div>
<div class="founder__body">
<p class="founder__eyebrow eyebrow">Wer dahintersteht</p>
<h2 class="founder__name">Tommi Enenkel</h2>
<p class="founder__role">Digitalisierung & Prozessoptimierung</p>
<p class="founder__bio">17 Jahre als <strong>Tech-, Marketing- und Org-Lead</strong>. Früher CIO bei NEOS (2.500 User), heute Fractional CIO für den Mittelstand im DACH-Raum.</p>
<ul class="founder__credentials" aria-label="Referenzen">
<li><div class="founder__cred-value">17</div><div class="founder__cred-label">Jahre Tech · Marketing · Org</div></li>
<li><div class="founder__cred-value">€133 Mio.</div><div class="founder__cred-label">Polkadot Governance</div></li>
</ul>
</div>
</div>
</section>Founder / Über-mich bio — Inline (light surface)
Add .founder--inline for a light card with a circular photo — embeds mid-offer. No credentials row.
Tommi Enenkel
Fractional CIO
Ich übersetze zwischen Geschäftsführung und Technik — und baue Lösungen, statt PowerPoints.
View source
<section class="founder founder--inline" aria-label="Über mich">
<div class="founder__inner">
<div class="founder__photo-well"><svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><path d="M12 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg></div>
<div class="founder__body">
<h2 class="founder__name">Tommi Enenkel</h2>
<p class="founder__role">Fractional CIO</p>
<p class="founder__bio">Ich übersetze zwischen Geschäftsführung und Technik — und baue Lösungen, statt PowerPoints.</p>
</div>
</div>
</section>Media split section
Alternating image-+-text row for landing/service storytelling. Light by default; .media-split--dark for a black surface, .media-split--reverse to put the image on the right (neutralized on mobile so the image always leads).
.media-split .media-split--dark .media-split--reverse .media-split__inner .media-split__media .media-split__img .media-split__body .media-split__actions
Schritt 1
Den Engpass finden
Ein strukturierter Blick auf Marketing, Vertrieb, Back-Office und Fulfillment — am Ende eine priorisierte Hebel-Landkarte.
View source
<section class="media-split" aria-label="Prozess-Review">
<div class="media-split__inner">
<div class="media-split__media"><div class="media-split__img" role="img" aria-label="Bildplatzhalter"><svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3z"/><path d="M8.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg></div></div>
<div class="media-split__body">
<p class="media-split__eyebrow eyebrow">Schritt 1</p>
<h2>Den Engpass finden</h2>
<p>Ein strukturierter Blick auf Marketing, Vertrieb, Back-Office und Fulfillment — am Ende eine priorisierte Hebel-Landkarte.</p>
<div class="media-split__actions"><a class="btn-primary" href="#">Mehr erfahren →</a></div>
</div>
</div>
</section>Media split section — Dark + reverse
Compose .media-split--dark (black surface, light text) with .media-split--reverse (image right).
Schritt 2
Den Hebel ziehen
Prozesse digitalisieren, Systeme verbinden, Automatisierung aufsetzen — sichtbar und messbar.
View source
<section class="media-split media-split--dark media-split--reverse" aria-label="Umsetzung">
<div class="media-split__inner">
<div class="media-split__media"><div class="media-split__img" role="img" aria-label="Bildplatzhalter"><svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3z"/><path d="M8.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg></div></div>
<div class="media-split__body">
<p class="media-split__eyebrow eyebrow">Schritt 2</p>
<h2>Den Hebel ziehen</h2>
<p>Prozesse digitalisieren, Systeme verbinden, Automatisierung aufsetzen — sichtbar und messbar.</p>
<div class="media-split__actions"><a class="btn-primary" href="#">Mehr erfahren →</a></div>
</div>
</div>
</section>