H1 — page title (title)

H2 — section title (sub-title)

H2 with a decorative icon (title-icon)

H3 — sub-heading (sub-sub-title)

Body paragraph with bold emphasis via <strong>. Text is justified and long words hyphenate automatically, so the edges stay clean and reading flows nicely across all screen widths.

Section background variants: default (white), .section-block.darker (light grey — this block), and .section-block.green (below).

The standard "learn more" button follows a paragraph after a <br>:
Mehr erfahren

The variant .btn.btn--more.hidden is hidden (no target) — not shown here since it is invisible.

External-link icon: a body-text link to an outside domain automatically gets an "open in new tab" icon after it (a[href^="http"]:not(.btn)…::after), while an internal link does not:

External example: § 49 EStG. Internal example: this page (no icon).

The last image of an .img-flex carries .has-slogan and gets the gold "Live life a little differently" stamp (default: bottom-right):

Position variants: .slogan-tl (top-left), .slogan-tr (top-right), .slogan-bl (bottom-left); shadow variant .slogan-gold (warm bronze halo for light skies):

.list-check — default (green check):

• First benefit with a green check
• Second benefit

.list-law — regulatory / legal items:

• Legal requirement one
• Legal requirement two

.list-minus — cons / drawbacks (minus circle):

• First drawback
• Second drawback

<ol> — numbered list (CSS-counter marker):

1. First step
2. Second step with a bold part

Plain <ul> with no class:

• Item A
• Item B

.list-q — question list (question-mark circle):

• Is your business international or local?
• Should the company enable a visa, or is that not needed?

.check-grid — multi-column keyword lists (auto-fit columns, each a ul.list-check):

Simple note box:

Horizontal variant — text left, image right at text height:

.offset-left — a block indented from the left; combined with fixed-width FontAwesome icons (i.fa-fw) the text lines up in a column. Used for document / advantage lists:

Icon + bold label + description variant (same fa-fw pattern):

Tax optimisation
Holding companies based in Dubai benefit from a tax system with little or no corporate tax.

p.example — a worked-example paragraph with an uppercase "Beispiel"/"Example" badge pinned top-left:

The company earns annual licence income in the millions. Thanks to the IP box, this income is taxed at 0% in Dubai.

.chart-wrap — Chart.js container with a background frame + right-aligned .source-note (the canvas renders a live chart on real pages):

With the "example" chip:

Text belonging to the first scenario.

Without the chip:

Text belonging to the second scenario.

Option 1 Description of the first option

Explanatory text for the first option.

Premium package Alternative colour variant (--alt)

Explanatory text for the alternative variant.

.attention-headline — a small red kicker line above a title:

Beispiel-Titel darunter

.text-w-icon — a text row with a small leading SVG icon (pinned top-left):

Real <table> with a <thead> — used for figures / comparisons. Default is the tan colour scheme; .grey-color makes it light grey (shown here).

Modifiers (add to the wrapper): .td__h-center, .td__h-center_but-first, .head-big-icons, .first-cell-all-raws, .left-col-category-name, .sticky-header, .table-taxes (country comparison with flags).

The seal image (.ausg-badge__seal) is the background; score / review count / label overlay the grey band under the stars. Live values are loaded by the Ausgezeichnet widget (targets .ausg-icon-clone). The badge sizes to its container — constrained here to seal width:

Click a tab to reveal its pane. Each .tab-btn's data-tab matches a .tab-pane id; main.js toggles .active. One button and one pane must start with .active. Panes own their own vertical rhythm (flex column, --content-gap) because content elements carry no margins.