EscapeVelocityBrand
Brand Kit ↓
Auf dieser Seite
Components

12 components

Mid-level building blocks you drop into a layout — cards, callouts, overlays, disclosure widgets and data tables. Defined once in css/components.css and declared in components.meta.ts, the single registry behind this gallery, the list_components MCP tool and the skill catalog. The same css/components.css is injected into render templates as {{ COMPONENTS_CSS }}, so social cards and PDFs compose from these classes too — not just web pages.

Cards

Cards

Dark card

High-emphasis card on the brand black, with a terracotta hairline. .card-dark .card-title .card-body

FLAGSHIP
Tech Upgrade
Engpass gefunden? Wir lösen ihn. Prozesse digitalisieren, Systeme verbinden, Automatisierung aufsetzen.
View source 
<div class="card-dark">
  <div class="badge">FLAGSHIP</div>
  <div class="card-title">Tech Upgrade</div>
  <div class="card-body">Engpass gefunden? Wir lösen ihn. Prozesse digitalisieren, Systeme verbinden, Automatisierung aufsetzen.</div>
</div>

Light card

Standard content card on white. Use in rows via .grid-auto / .grid-3. .card-light .card-title .card-body

Aha! Moment Workshop
Der Einstieg. Halber Tag, voller Durchblick: wo Ihre größten Hebel liegen.
View source 
<div class="card-light">
  <div class="card-title">Aha! Moment Workshop</div>
  <div class="card-body">Der Einstieg. Halber Tag, voller Durchblick: wo Ihre größten Hebel liegen.</div>
</div>

Light card — Highlight: top accent

Add .card-featured for a terracotta accent from the top — the recommended option in a row.

Laufende Begleitung
Fractional CIO: Tech-Entscheidungen mit Rückendeckung, ohne Vollzeit-Lead.
View source 
<div class="card-light card-featured">
  <div class="card-title">Laufende Begleitung</div>
  <div class="card-body">Fractional CIO: Tech-Entscheidungen mit Rückendeckung, ohne Vollzeit-Lead.</div>
</div>

Light card — Highlight: left accent

Add .card-accent-left for a terracotta accent from the left — good for stacked/list layouts.

Prozess-Review
Der Einstieg: ein klares Bild über fünf Dimensionen.
View source 
<div class="card-light card-accent-left">
  <div class="card-title">Prozess-Review</div>
  <div class="card-body">Der Einstieg: ein klares Bild über fünf Dimensionen.</div>
</div>

Light card — Highlight: full border

Add .card-bordered for a full terracotta border + ring — the strongest highlight.

Kernanalyse
Die Dimension, die alle anderen ausbremst — und warum.
View source 
<div class="card-light card-bordered">
  <div class="card-title">Kernanalyse</div>
  <div class="card-body">Die Dimension, die alle anderen ausbremst — und warum.</div>
</div>

Light card — Corner pill

Add a .card-badge as the first child for a corner tag. Composes with any highlight (or none).

Kernanalyse
Den Engpass finden
Eine Dimension bremst alle anderen. Wir zeigen Ihnen, welche.
View source 
<div class="card-light card-bordered">
  <div class="card-badge">Kernanalyse</div>
  <div class="card-title">Den Engpass finden</div>
  <div class="card-body">Eine Dimension bremst alle anderen. Wir zeigen Ihnen, welche.</div>
</div>

Light card — Numbered (mono index)

Add .card-numbered + a .card-num (brand mono) to the LEFT; wrap title + body in one element. The mono cap aligns flush with the title.

01
Ihr Level sehen
Wo steht Ihr Unternehmen wirklich? Ein klares Bild über fünf Dimensionen.
View source 
<div class="card-light card-numbered">
  <div class="card-num">01</div>
  <div>
    <div class="card-title">Ihr Level sehen</div>
    <div class="card-body">Wo steht Ihr Unternehmen wirklich? Ein klares Bild über fünf Dimensionen.</div>
  </div>
</div>

Light card — Interactive (clickable)

Add .card-interactive for hover-lift link/selectable cards; .is-selected for the active state.

Klick mich
Hover hebt die Karte an und zieht eine Terracotta-Kontur.
View source 
<div class="card-light card-interactive">
  <div class="card-title">Klick mich</div>
  <div class="card-body">Hover hebt die Karte an und zieht eine Terracotta-Kontur.</div>
</div>
States
default
Klick mich
Hover hebt die Karte an und zieht eine Terracotta-Kontur.
hover
Klick mich
Hover hebt die Karte an und zieht eine Terracotta-Kontur.
selected
Klick mich
Hover hebt die Karte an und zieht eine Terracotta-Kontur.

Testimonial

Client quote with attribution — a card-family member. Compose with .card-accent-left for the signature terracotta bar. Monogram avatar by default; swap for <img class="testimonial-avatar"> or add .testimonial-avatar--photo. Use <figure>/<blockquote>/<figcaption> for semantics. .testimonial .testimonial-quote .testimonial-attr .testimonial-avatar .testimonial-avatar--monogram .testimonial-meta .testimonial-name .testimonial-role

Wir wussten, dass unsere Tools nicht zusammenspielen – aber nicht, wo wir ansetzen sollten. Tommi hat aus Insellösungen eine klare Architektur gemacht.
Francesco Rocchetti
Operations, Europe's Futures Initiative
View source 
<figure class="testimonial card-accent-left" style="margin:0">
  <blockquote class="testimonial-quote" style="margin:0">Wir wussten, dass unsere Tools nicht zusammenspielen – aber nicht, wo wir ansetzen sollten. Tommi hat aus Insellösungen eine klare Architektur gemacht.</blockquote>
  <figcaption class="testimonial-attr">
    <span class="testimonial-avatar testimonial-avatar--monogram" aria-hidden="true">FR</span>
    <div class="testimonial-meta">
      <div class="testimonial-name">Francesco Rocchetti</div>
      <div class="testimonial-role">Operations, Europe's Futures Initiative</div>
    </div>
  </figcaption>
</figure>

Testimonial — Editorial quote-mark

Add .testimonial--editorial for a large terracotta quote mark — a single standalone testimonial.

Bei der Software-Auswahl hätten wir uns leicht verrennen können. Tommi hat die Optionen nüchtern gegeneinandergestellt.
Christian Skihar
Inhaber, Die Skischule.at
View source 
<figure class="testimonial testimonial--editorial" style="margin:0">
  <blockquote class="testimonial-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="testimonial-attr">
    <span class="testimonial-avatar testimonial-avatar--monogram" aria-hidden="true">CS</span>
    <div class="testimonial-meta"><div class="testimonial-name">Christian Skihar</div><div class="testimonial-role">Inhaber, Die Skischule.at</div></div>
  </figcaption>
</figure>

Testimonial — With company logo

Add a .testimonial-logo wordmark (or <img>) above the quote.

Heute läuft zwischen CRM, Newsletter und Eventplanung alles über einen sauberen Make.com-Fluss.
Francesco Rocchetti
Operations, EFI
View source 
<figure class="testimonial card-accent-left" style="margin:0">
  <span class="testimonial-logo">EUROPE'S FUTURES INITIATIVE</span>
  <blockquote class="testimonial-quote" style="margin:0">Heute läuft zwischen CRM, Newsletter und Eventplanung alles über einen sauberen Make.com-Fluss.</blockquote>
  <figcaption class="testimonial-attr"><span class="testimonial-avatar testimonial-avatar--monogram" aria-hidden="true">FR</span><div class="testimonial-meta"><div class="testimonial-name">Francesco Rocchetti</div><div class="testimonial-role">Operations, EFI</div></div></figcaption>
</figure>

Testimonial — Compact 3-up grid

Wrap .testimonial--compact items in .testimonial-grid for a 2–3-up strip.

Endlich Klarheit, welchen Hebel wir zuerst ziehen.
Christian Skihar
Die Skischule.at
Aus einem Wust von Insellösungen eine klare Architektur.
Francesco Rocchetti
EFI
View source 
<div class="testimonial-grid">
  <figure class="testimonial testimonial--compact" style="margin:0"><blockquote class="testimonial-quote" style="margin:0">Endlich Klarheit, welchen Hebel wir zuerst ziehen.</blockquote><figcaption class="testimonial-attr"><span class="testimonial-avatar testimonial-avatar--monogram" aria-hidden="true">CS</span><div class="testimonial-meta"><div class="testimonial-name">Christian Skihar</div><div class="testimonial-role">Die Skischule.at</div></div></figcaption></figure>
  <figure class="testimonial testimonial--compact" style="margin:0"><blockquote class="testimonial-quote" style="margin:0">Aus einem Wust von Insellösungen eine klare Architektur.</blockquote><figcaption class="testimonial-attr"><span class="testimonial-avatar testimonial-avatar--monogram" aria-hidden="true">FR</span><div class="testimonial-meta"><div class="testimonial-name">Francesco Rocchetti</div><div class="testimonial-role">EFI</div></div></figcaption></figure>
</div>

Testimonial — Dark surface

Add .testimonial--dark for black sections (composes with --editorial / --accent-left).

Tommi hat aus Insellösungen eine klare Architektur gemacht.
Francesco Rocchetti
Operations, EFI
View source 
<figure class="testimonial testimonial--dark card-accent-left" style="margin:0">
  <blockquote class="testimonial-quote" style="margin:0">Tommi hat aus Insellösungen eine klare Architektur gemacht.</blockquote>
  <figcaption class="testimonial-attr"><span class="testimonial-avatar testimonial-avatar--monogram" aria-hidden="true">FR</span><div class="testimonial-meta"><div class="testimonial-name">Francesco Rocchetti</div><div class="testimonial-role">Operations, EFI</div></div></figcaption>
</figure>

Pricing / package card

A standalone priced offer package — name, price, included-features list, optional "Empfohlen" emphasis, CTA. Distinct from the comparison .table--compare. Add .pricing-card--interactive for hover-lift, .pricing-card--featured for the highlighted option, li.is-excluded for a struck-through "nicht enthalten" row. .pricing-card .pricing-card--featured .pricing-card--interactive .pricing-card__name .pricing-card__price .pricing-card__features .pricing-card__cta

Einstieg

Pilotpaket

ab

einmaliges Projekthonorar

  • 1–2 Automationen umgesetzt
  • Tool-Setup & Einrichtung
  • Einschulung Ihres Teams
  • Laufende Betreuung
Anfragen →
View source 
<article class="pricing-card pricing-card--interactive">
  <header><p class="pricing-card__eyebrow eyebrow">Einstieg</p><h3 class="pricing-card__name">Pilotpaket</h3></header>
  <div class="pricing-card__price" aria-label="ab 2.400 Euro"><span class="pricing-card__price-prefix">ab</span><span aria-hidden="true">2.400 €</span></div>
  <p class="pricing-card__note">einmaliges Projekthonorar</p>
  <ul class="pricing-card__features" aria-label="Leistungen enthalten">
    <li>1–2 Automationen umgesetzt</li>
    <li>Tool-Setup &amp; Einrichtung</li>
    <li>Einschulung Ihres Teams</li>
    <li class="is-excluded">Laufende Betreuung</li>
  </ul>
  <div class="pricing-card__cta"><a class="btn-primary btn--block" href="#kontakt">Anfragen →</a></div>
</article>

Pricing / package card — Featured ("Meistgebucht")

Add .pricing-card--featured for the highlighted option — top border, "Empfohlen" pill, subtle gradient. Drop a .pricing-card__badge as the first child for the label.

Meistgebucht

Flagship

Back-Office Upgrade

ab

einmaliges Projekthonorar

  • Prozess-Review über fünf Dimensionen
  • Systeme verbinden & Automatisierung
  • Umsetzungsbegleitung bis Go-live
  • 30 Tage Nachbetreuung
Anfragen →
View source 
<article class="pricing-card pricing-card--featured pricing-card--interactive">
  <span class="pricing-card__badge" aria-label="Meistgebucht">Meistgebucht</span>
  <header><p class="pricing-card__eyebrow eyebrow">Flagship</p><h3 class="pricing-card__name">Back-Office Upgrade</h3></header>
  <div class="pricing-card__price" aria-label="ab 7.500 Euro"><span class="pricing-card__price-prefix">ab</span><span aria-hidden="true">7.500 €</span></div>
  <p class="pricing-card__note">einmaliges Projekthonorar</p>
  <ul class="pricing-card__features" aria-label="Leistungen enthalten">
    <li>Prozess-Review über fünf Dimensionen</li>
    <li>Systeme verbinden &amp; Automatisierung</li>
    <li>Umsetzungsbegleitung bis Go-live</li>
    <li>30 Tage Nachbetreuung</li>
  </ul>
  <div class="pricing-card__cta"><a class="btn-primary btn--block" href="#kontakt">Anfragen →</a></div>
</article>
Callouts

Callouts

TLDR box

Dark summary box for a one-line takeaway. .tldr-box .tldr-label .tldr-body

TLDR
Die meisten Unternehmen brauchen keinen Rundumschlag. Sie brauchen einen Aha! Moment.
View source 
<div class="tldr-box">
  <div class="tldr-label">TLDR</div>
  <div class="tldr-body">Die meisten Unternehmen brauchen keinen Rundumschlag. Sie brauchen einen Aha! Moment.</div>
</div>

Quote block

Cream quote/callout block with terracotta left border. .callout-block .callout-quote .callout-source

Wer den Engpass findet, findet den Hebel.
— Tommi Enenkel
View source 
<div class="callout-block">
  <div class="callout-quote">Wer den Engpass findet, findet den Hebel.</div>
  <div class="callout-source">— Tommi Enenkel</div>
</div>

Callout (light)

Light info callout with semantic risk/fit variants. .callout .callout--risk .callout--fit

Hinweis: Die Diagnose dauert in der Regel einen halben Tag.
View source 
<div class="callout">Hinweis: Die Diagnose dauert in der Regel einen halben Tag.</div>

Callout (light) — Risk

Risiko: Ohne saubere Datenbasis bringt Automatisierung wenig.
View source 
<div class="callout callout--risk">Risiko: Ohne saubere Datenbasis bringt Automatisierung wenig.</div>

Callout (light) — Fit

Passt, wenn: wiederkehrende manuelle Abläufe den Betrieb bremsen.
View source 
<div class="callout callout--fit">Passt, wenn: wiederkehrende manuelle Abläufe den Betrieb bremsen.</div>
Overlays

Overlays

Centered dialog over a blurred backdrop; bottom-sheet on mobile. .modal-backdrop .modal .modal-close

Erstgespräch buchen

30 Minuten, unverbindlich. Wir schauen, wo Ihre größten Hebel liegen.

View source 
<div class="modal-backdrop" style="position: static; padding: 0;">
  <div class="modal" style="box-shadow: 0 8px 32px rgba(0,0,0,0.18);">
    <button class="modal-close" aria-label="Schließen">×</button>
    <h3>Erstgespräch buchen</h3>
    <p class="card-body" style="margin-top: 8px;">30 Minuten, unverbindlich. Wir schauen, wo Ihre größten Hebel liegen.</p>
  </div>
</div>

DSGVO consent modal with per-category toggles, localStorage + cookie persistence and a backend-agnostic callback contract. Ships as the OPTIONAL cookie-consent add-on (css/cookie-consent.css + css/cookie-consent.js), NOT the core bundle — load it explicitly and wire it with EVCookieConsent.init({onChange, onLog}). Live demo + integration docs on the Cookie-Consent page. .cc-banner .cc-title .cc-text .cc-actions .cc-btn-accept .cc-btn-reject .cc-btn-settings .cc-settings .cc-category .cc-toggle

View source 
<!-- optional add-on: css/cookie-consent.css + css/cookie-consent.js; shown static here -->
<div class="cc-banner" style="position: static; display: block; transform: none; max-width: 460px; max-height: none; margin: 0 auto;" role="dialog" aria-label="Cookie-Einstellungen">
  <div class="cc-title">Cookie-Einstellungen</div>
  <div class="cc-text">Wir verwenden Cookies, um unsere Website zu verbessern und Ihnen relevante Inhalte zu zeigen.</div>
  <div class="cc-actions">
    <button class="cc-btn-accept">Alle akzeptieren</button>
    <button class="cc-btn-reject">Nur notwendige</button>
    <button class="cc-btn-settings">Einstellungen</button>
  </div>
  <div class="cc-settings" style="display: block;">
    <div class="cc-category">
      <div class="cc-cat-info"><div class="cc-cat-name">Notwendig</div><div class="cc-cat-desc">Erforderlich für den Betrieb der Website</div></div>
      <label class="cc-toggle"><input type="checkbox" checked disabled><span class="cc-toggle-slider"></span></label>
    </div>
    <div class="cc-category">
      <div class="cc-cat-info"><div class="cc-cat-name">Analyse</div><div class="cc-cat-desc">Google Analytics — anonymisierte Nutzungsstatistiken</div></div>
      <label class="cc-toggle"><input type="checkbox" checked><span class="cc-toggle-slider"></span></label>
    </div>
    <div class="cc-category">
      <div class="cc-cat-info"><div class="cc-cat-name">Marketing</div><div class="cc-cat-desc">LinkedIn Insight Tag, HubSpot — Reichweitenmessung und Kommunikation</div></div>
      <label class="cc-toggle"><input type="checkbox"><span class="cc-toggle-slider"></span></label>
    </div>
  </div>
</div>
Disclosure

Disclosure

Accordion / FAQ

Collapsible Q&A / disclosure rows — Manrope header, terracotta +/− glyph, hairline dividers. Interactive: auto-initialised by components.js (EVComponents.initAccordion). Multi-open by default; add data-accordion-mode="single" to auto-collapse siblings. .accordion .accordion-item .accordion-trigger .accordion-label .accordion-icon .accordion-panel .accordion-panel-inner

In zwei bis drei Tagen sehe ich mir Ihre Abläufe an – vor Ort oder remote. Am Ende: eine priorisierte Hebel-Landkarte.

Nein – genau das ist der Punkt. Das Review schafft erst die Klarheit, auf der eine Strategie aufsetzt.

View source 
<div class="accordion" data-accordion>
  <div class="accordion-item is-open">
    <button class="accordion-trigger" type="button" aria-expanded="true" aria-controls="faq-1" id="faq-1-t">
      <span class="accordion-label">Wie läuft ein Prozess-Review konkret ab?</span>
      <span class="accordion-icon" aria-hidden="true"></span>
    </button>
    <div class="accordion-panel" id="faq-1" role="region" aria-labelledby="faq-1-t">
      <div class="accordion-panel-inner"><p>In zwei bis drei Tagen sehe ich mir Ihre Abläufe an – vor Ort oder remote. Am Ende: eine priorisierte Hebel-Landkarte.</p></div>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-trigger" type="button" aria-expanded="false" aria-controls="faq-2" id="faq-2-t">
      <span class="accordion-label">Brauche ich dafür schon eine Digitalstrategie?</span>
      <span class="accordion-icon" aria-hidden="true"></span>
    </button>
    <div class="accordion-panel" id="faq-2" role="region" aria-labelledby="faq-2-t">
      <div class="accordion-panel-inner"><p>Nein – genau das ist der Punkt. Das Review schafft erst die Klarheit, auf der eine Strategie aufsetzt.</p></div>
    </div>
  </div>
</div>

Accordion / FAQ — Chevron glyph

Add .accordion--chevron for a rotating chevron instead of the +/− glyph.

Transparent und fix kalkuliert – Sie erhalten vorab ein klares Angebot.

View source 
<div class="accordion accordion--chevron" data-accordion>
  <div class="accordion-item is-open">
    <button class="accordion-trigger" type="button" aria-expanded="true"><span class="accordion-label">Was kostet ein Prozess-Review?</span><span class="accordion-icon" aria-hidden="true"></span></button>
    <div class="accordion-panel"><div class="accordion-panel-inner"><p>Transparent und fix kalkuliert – Sie erhalten vorab ein klares Angebot.</p></div></div>
  </div>
</div>

Tabs

Tabbed content switcher — segment dense offer sub-sections without long scrolls. The interactive sibling of the accordion. Full WAI-ARIA tablist (auto-initialised by components.js — EVComponents.initTabs): ←/→ wrap + auto-activate, Home/End, roving tabindex. Static markup renders the first tab active, so it works without JS. .tabs--pill for a compact inline switcher. .tabs .tabs--pill .tab .is-active .tab-panel

Für wen

Mittelständische Betriebe, die wissen, dass es besser laufen müsste — aber nicht, wo sie ansetzen sollen.

View source 
<div class="tabs" role="tablist" aria-label="Abschnitte">
  <button class="tab is-active" role="tab" type="button" id="tab-1" aria-selected="true" aria-controls="tab-p-1" tabindex="0">Für wen</button>
  <button class="tab" role="tab" type="button" id="tab-2" aria-selected="false" aria-controls="tab-p-2" tabindex="-1">Format</button>
  <button class="tab" role="tab" type="button" id="tab-3" aria-selected="false" aria-controls="tab-p-3" tabindex="-1">Ablauf</button>
</div>
<div class="tab-panel" role="tabpanel" id="tab-p-1" aria-labelledby="tab-1"><h3>Für wen</h3><p>Mittelständische Betriebe, die wissen, dass es besser laufen müsste — aber nicht, wo sie ansetzen sollen.</p></div>
<div class="tab-panel" role="tabpanel" id="tab-p-2" aria-labelledby="tab-2" hidden><h3>Format</h3><p>Vor Ort oder remote, ein halber bis ganzer Tag, plus ein Abschlussgespräch mit der Hebel-Landkarte.</p></div>
<div class="tab-panel" role="tabpanel" id="tab-p-3" aria-labelledby="tab-3" hidden><h3>Ablauf</h3><p>Erstgespräch, Diagnose, priorisierte Empfehlung — in der Regel innerhalb von zwei Wochen.</p></div>

Tabs — Pill

Add .tabs--pill for a compact bordered switcher (active tab = terracotta fill) — "Monatlich/Jährlich", "Liste/Karte".

Ein fokussierter Termin zu einem konkreten Engpass.

View source 
<div class="tabs tabs--pill" role="tablist" aria-label="Abrechnung">
  <button class="tab is-active" role="tab" type="button" id="pill-1" aria-selected="true" aria-controls="pill-p-1" tabindex="0">Einzel-Workshop</button>
  <button class="tab" role="tab" type="button" id="pill-2" aria-selected="false" aria-controls="pill-p-2" tabindex="-1">Begleitung</button>
</div>
<div class="tab-panel" role="tabpanel" id="pill-p-1" aria-labelledby="pill-1"><p>Ein fokussierter Termin zu einem konkreten Engpass.</p></div>
<div class="tab-panel" role="tabpanel" id="pill-p-2" aria-labelledby="pill-2" hidden><p>Laufende Begleitung als Fractional CIO — Tech-Entscheidungen mit Rückendeckung.</p></div>
Data

Data

Data / comparison table

Borderless, terracotta-headed table. .table--compare for multi-tier comparison (one column .is-featured), .table--boxed for a contained offer block. Wrap wide tables in .table-wrap for horizontal scroll. ✓/– cells carry a .sr-only label. .table .table-wrap .table--compare .table--boxed .table__num .is-featured .cell-yes .cell-no

Leistung Prozess-Review EmpfohlenUmsetzung Fractional CIO
Vor-Ort-Diagnose✓enthalten✓enthalten–nicht enthalten
Priorisierte Hebel-Map✓✓✓
Laufende Betreuung––monatlich
Investitionab 2.400 €auf Anfrageab 1.800 € / Mt.
View source 
<div class="table-wrap" tabindex="0" role="region" aria-label="Leistungsvergleich">
  <table class="table table--compare">
    <thead><tr>
      <th scope="col">Leistung</th>
      <th scope="col">Prozess-Review</th>
      <th scope="col" class="is-featured"><span class="featured-flag">Empfohlen</span>Umsetzung</th>
      <th scope="col">Fractional CIO</th>
    </tr></thead>
    <tbody>
      <tr><th scope="row">Vor-Ort-Diagnose</th><td><span class="cell-yes">✓<span class="sr-only">enthalten</span></span></td><td class="is-featured"><span class="cell-yes">✓<span class="sr-only">enthalten</span></span></td><td><span class="cell-no">–<span class="sr-only">nicht enthalten</span></span></td></tr>
      <tr><th scope="row">Priorisierte Hebel-Map</th><td><span class="cell-yes">✓</span></td><td class="is-featured"><span class="cell-yes">✓</span></td><td><span class="cell-yes">✓</span></td></tr>
      <tr><th scope="row">Laufende Betreuung</th><td><span class="cell-no">–</span></td><td class="is-featured"><span class="cell-no">–</span></td><td><span class="tag tag-geht">monatlich</span></td></tr>
      <tr><th scope="row">Investition</th><td class="table__num">ab 2.400 €</td><td class="table__num is-featured">auf Anfrage</td><td class="table__num">ab 1.800 € / Mt.</td></tr>
    </tbody>
  </table>
</div>

Data / comparison table — Boxed offer block

Add .table--boxed for a contained commercial block (cream bg + terracotta bar) — document/offer use.

LeistungProzess-Review Back-Office
Umfang2 Tage vor Ort, Hebel-Map, Abschlussgespräch
Honorar3.900 € zzgl. USt.
View source 
<table class="table table--boxed">
  <tbody>
    <tr><th scope="row">Leistung</th><td>Prozess-Review Back-Office</td></tr>
    <tr><th scope="row">Umfang</th><td>2 Tage vor Ort, Hebel-Map, Abschlussgespräch</td></tr>
    <tr><th scope="row">Honorar</th><td class="table__num">3.900 € zzgl. USt.</td></tr>
  </tbody>
</table>

Breakpoints, container behavior, and the fluid type scale → Patterns. Full-page examples → Archetypes.