Test

	A	B	C	D	E
1
2
3
4
5
6

test

Das Verschwinden der Weinfasswagen

Sie wirkten, als hätte jemand ein Weingut auf Räder gestellt. Doch Weinfasswagen waren weit mehr als eine Kuriosität der Eisenbahngeschichte. Eine Zeit lang veränderten sie den internationalen Weinhandel grundlegend, wurden gegen Diebstahl gesichert und rollten in langen Zügen durch Frankreich und Europa. Bis moderne Kesselwagen ihre Arbeit übernahmen.

.cms-test { --cms-bg: #f6f7f9; --cms-card: #ffffff; --cms-ink: #1f2933; --cms-muted: #5d6773; --cms-line: #d8dde5; --cms-accent: #005ea8; --cms-accent-soft: #e8f3fc; --cms-warning: #fff4d6; --cms-success: #e9f7ef; --cms-radius: 18px; --cms-shadow: 0 18px 45px rgba(20, 32, 50, 0.08); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--cms-ink); background: linear-gradient(135deg, #f7f9fc 0%, #eef3f8 100%); border: 1px solid var(--cms-line); border-radius: var(--cms-radius); overflow: hidden; line-height: 1.65; } .cms-test * { box-sizing: border-box; } .cms-test a { color: var(--cms-accent); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } .cms-test a:hover, .cms-test a:focus { text-decoration-thickness: 0.14em; } .cms-test__hero { padding: clamp(28px, 5vw, 64px); background: radial-gradient(circle at 18% 25%, rgba(0, 94, 168, 0.18), transparent 30%), radial-gradient(circle at 84% 12%, rgba(0, 94, 168, 0.13), transparent 28%), linear-gradient(145deg, #ffffff 0%, #eef5fb 100%); border-bottom: 1px solid var(--cms-line); } .cms-test__kicker { display: inline-flex; gap: 0.5rem; align-items: center; margin: 0 0 1rem; padding: 0.35rem 0.7rem; border: 1px solid rgba(0, 94, 168, 0.25); border-radius: 999px; background: rgba(255, 255, 255, 0.76); color: var(--cms-accent); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .cms-test__title { max-width: 960px; margin: 0; font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1.05; letter-spacing: -0.04em; } .cms-test__subtitle { max-width: 780px; margin: 1.3rem 0 0; color: var(--cms-muted); font-size: clamp(1.05rem, 2vw, 1.35rem); } .cms-test__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; color: var(--cms-muted); font-size: 0.95rem; } .cms-test__meta span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.38rem 0.7rem; border: 1px solid var(--cms-line); border-radius: 999px; background: #fff; } .cms-test__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(22px, 4vw, 44px); padding: clamp(24px, 5vw, 56px); } .cms-test__main { min-width: 0; } .cms-test__sidebar { align-self: start; position: sticky; top: 20px; } .cms-test__lead { margin: 0 0 1.8rem; padding: 1.4rem 1.6rem; border-left: 6px solid var(--cms-accent); border-radius: 0 var(--cms-radius) var(--cms-radius) 0; background: var(--cms-card); box-shadow: var(--cms-shadow); font-size: 1.15rem; } .cms-test__section { margin: 0 0 2.2rem; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--cms-line); border-radius: var(--cms-radius); background: var(--cms-card); box-shadow: var(--cms-shadow); } .cms-test__section h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; } .cms-test__section h3 { margin: 1.6rem 0 0.7rem; font-size: 1.22rem; } .cms-test__section p { margin: 0 0 1rem; } .cms-test__section p:last-child { margin-bottom: 0; } .cms-test__dropcap::first-letter { float: left; margin: 0.12rem 0.55rem 0 0; color: var(--cms-accent); font-size: 4.2rem; font-weight: 800; line-height: 0.85; } .cms-test__highlight { padding: 0.12em 0.28em; border-radius: 0.35em; background: linear-gradient(180deg, transparent 45%, #fff0a8 45%); } .cms-test__quote { margin: 1.6rem 0; padding: 1.4rem 1.6rem; border: 1px solid rgba(0, 94, 168, 0.18); border-radius: var(--cms-radius); background: var(--cms-accent-soft); } .cms-test__quote blockquote { margin: 0; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.45; font-weight: 750; letter-spacing: -0.015em; } .cms-test__quote figcaption { margin-top: 0.8rem; color: var(--cms-muted); font-size: 0.95rem; } .cms-test__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.4rem 0; } .cms-test__card { padding: 1rem; border: 1px solid var(--cms-line); border-radius: 14px; background: #fafcff; } .cms-test__card strong { display: block; margin-bottom: 0.35rem; font-size: 1.02rem; } .cms-test__number { display: block; margin-bottom: 0.25rem; color: var(--cms-accent); font-size: 2rem; font-weight: 850; line-height: 1; } .cms-test__callout { margin: 1.5rem 0; padding: 1.2rem 1.35rem; border: 1px solid #efd37a; border-radius: var(--cms-radius); background: var(--cms-warning); } .cms-test__callout strong { display: block; margin-bottom: 0.35rem; } .cms-test__success { margin: 1.5rem 0; padding: 1.2rem 1.35rem; border: 1px solid #b9dfc8; border-radius: var(--cms-radius); background: var(--cms-success); } .cms-test__list { display: grid; gap: 0.7rem; padding: 0; list-style: none; } .cms-test__list li { padding: 0.85rem 1rem; border: 1px solid var(--cms-line); border-radius: 12px; background: #fff; } .cms-test__list li::before { content: "✓"; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-right: 0.55rem; border-radius: 999px; background: var(--cms-accent); color: #fff; font-size: 0.85rem; font-weight: 800; } .cms-test__figure { margin: 1.5rem 0; overflow: hidden; border: 1px solid var(--cms-line); border-radius: var(--cms-radius); background: #fff; } .cms-test__placeholder { display: grid; min-height: 260px; place-items: center; padding: 2rem; background: linear-gradient(45deg, rgba(0, 94, 168, 0.08) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 94, 168, 0.08) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 94, 168, 0.08) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 94, 168, 0.08) 75%); background-size: 34px 34px; background-position: 0 0, 0 17px, 17px -17px, -17px 0; color: var(--cms-accent); font-weight: 800; text-align: center; } .cms-test__figure figcaption { padding: 0.8rem 1rem; color: var(--cms-muted); font-size: 0.9rem; } .cms-test__table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--cms-line); border-radius: var(--cms-radius); } .cms-test__table { width: 100%; min-width: 620px; border-collapse: collapse; background: #fff; } .cms-test__table caption { padding: 0.9rem 1rem; text-align: left; font-weight: 800; } .cms-test__table th, .cms-test__table td { padding: 0.85rem 1rem; border-top: 1px solid var(--cms-line); text-align: left; vertical-align: top; } .cms-test__table th { background: #f2f6fb; color: #243447; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; } .cms-test__timeline { display: grid; gap: 1rem; margin: 1.4rem 0; padding: 0; list-style: none; } .cms-test__timeline li { position: relative; padding: 1rem 1rem 1rem 3rem; border: 1px solid var(--cms-line); border-radius: 14px; background: #fff; } .cms-test__timeline li::before { content: attr(data-step); position: absolute; left: 1rem; top: 1rem; display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 999px; background: var(--cms-accent); color: #fff; font-size: 0.78rem; font-weight: 800; } .cms-test__details { margin: 1rem 0; border: 1px solid var(--cms-line); border-radius: 14px; background: #fff; } .cms-test__details summary { cursor: pointer; padding: 1rem; font-weight: 800; } .cms-test__details div { padding: 0 1rem 1rem; color: var(--cms-muted); } .cms-test__aside-card { margin-bottom: 1rem; padding: 1.1rem; border: 1px solid var(--cms-line); border-radius: var(--cms-radius); background: rgba(255, 255, 255, 0.92); box-shadow: var(--cms-shadow); } .cms-test__aside-card h2 { margin: 0 0 0.7rem; font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; } .cms-test__toc { margin: 0; padding-left: 1.1rem; } .cms-test__toc li { margin: 0.4rem 0; } .cms-test__badge-list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; } .cms-test__badge-list li { padding: 0.32rem 0.55rem; border: 1px solid var(--cms-line); border-radius: 999px; background: #fff; color: var(--cms-muted); font-size: 0.85rem; } .cms-test__progress { display: grid; gap: 0.8rem; } .cms-test__progress label { display: grid; gap: 0.25rem; color: var(--cms-muted); font-size: 0.9rem; } .cms-test__progress progress { width: 100%; height: 0.85rem; accent-color: var(--cms-accent); } .cms-test__footer { padding: clamp(20px, 4vw, 36px); border-top: 1px solid var(--cms-line); background: #17202b; color: #edf3f8; } .cms-test__footer a { color: #b9dcff; } .cms-test__footer-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 1.5rem; } .cms-test__small { color: var(--cms-muted); font-size: 0.9rem; } .cms-test__footer .cms-test__small { color: #b8c6d4; } @media (max-width: 900px) { .cms-test__body { grid-template-columns: 1fr; } .cms-test__sidebar { position: static; } .cms-test__grid, .cms-test__footer-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .cms-test__meta { display: grid; } .cms-test__hero, .cms-test__body, .cms-test__footer { padding-left: 18px; padding-right: 18px; } }

CMS-Testblock · Kreative Textformatierung

Hier steht die Hauptüberschrift des formatierten Textes

Dieser HTML-Block testet Überschriften, Lead, Infoboxen, Tabellen, Zitate, Akkordeons, Listen, Bildplatzhalter, Randspalten und responsive Layouts innerhalb eines CMS-Artikels.

Rubrik: Testformat Lesedauer: 5 Minuten Stand: 11.06.2026 Autor: Redaktion

Lead: Der eigentliche Text kann hier eingesetzt werden. Dieser Abschnitt hebt den Einstieg hervor und prüft, ob das CMS größere Textblöcke, starke Gewichtungen und farbige Hervorhebungen sauber ausgibt.

1. Einstieg mit typografischem Akzent

Dies ist ein Beispielabschnitt für den Haupttext. Der erste Buchstabe ist als Initiale gestaltet. Innerhalb des Fließtexts lassen sich einzelne Begriffe mit gezielter Hervorhebung markieren, ohne die Lesbarkeit zu verlieren.

Der Block prüft außerdem, ob Standardelemente wie fette Begriffe, kursive Einschübe, CMS-Abkürzungen und interne Sprungmarken korrekt verarbeitet werden.

„Ein guter CMS-Test zeigt nicht nur, ob HTML angezeigt wird, sondern auch, ob Struktur, Abstände, Kontraste und Sonderfälle stabil bleiben.“

Beispielzitat für Pullquote-Darstellung

2. Kennzahlen und Kartenlayout

Karten eignen sich für Zahlen, Kernaussagen oder kompakte Zwischenfazits. Das Raster bricht auf kleineren Bildschirmen automatisch um.

01 Typografie Überschriften, Absätze, Links, Initialen und Hervorhebungen.

02 Struktur Artikel, Sektionen, Randspalten, Tabellen und Akkordeons.

03 Responsivität Darstellung auf Desktop, Tablet und Smartphone.

Hinweisbox: Dieser Bereich kann für redaktionelle Hinweise, Warnungen, Kontext oder technische Testmeldungen genutzt werden.

Positive Rückmeldung: Wenn dieser Kasten sauber dargestellt wird, funktionieren Hintergrundfarben, Rahmen, Rundungen und Innenabstände.

3. Checkliste für die CMS-Prüfung

Werden eingebettete Styles akzeptiert oder vom CMS entfernt?
Bleiben interne Sprungmarken und semantische HTML-Elemente erhalten?
Sind Tabellen auf kleinen Bildschirmen horizontal scrollbar?
Funktionieren Details-Elemente ohne JavaScript?
Bleiben Kontraste, Fokuszustände und Abstände ausreichend sauber?

4. Bild, Caption und Platzhalter

Diese Figur simuliert ein Artikelbild. Der Platzhalter kann später durch ein echtes <img>-Element ersetzt werden.

Bildplatzhalter im CMS-Test

Bildunterschrift: Hier kann die Quelle, der Urheber, eine Beschreibung oder ein rechtlicher Hinweis stehen.

5. Tabelle mit responsiver Hülle

Tabellen sind in CMS-Blöcken oft kritisch. Diese Tabelle prüft Spaltenbreite, horizontales Scrollen und Kopfzeilen.

Beispieltabelle für Formatierungs- und Layouttests
Element	Zweck	Testkriterium	Status
Lead	Starker Einstieg in den Artikel	Abstand, Schriftgröße, Rahmen	Prüfen
Pullquote	Zitat oder zentrale These	Hintergrund, Typografie, Figcaption	Prüfen
Tabelle	Strukturierte Daten	Mobile Scrollbarkeit	Prüfen
Akkordeon	Zusatzinformationen	Funktion ohne JavaScript	Prüfen

6. Ablauf als Timeline

Text einsetzen: Den eigentlichen Artikeltext in die vorgesehenen Absätze kopieren.
CMS speichern: Prüfen, ob Styles, Klassen und semantische Elemente erhalten bleiben.
Frontend prüfen: Desktop, Tablet und Smartphone vergleichen.
Fehler dokumentieren: Abstände, Schriftgrößen, Kontraste, Tabellen und Sonderzeichen prüfen.

7. Akkordeons und Zusatzinformationen

Was testet dieses Akkordeon?

Es testet das native HTML-Element <details>. Es benötigt kein JavaScript und ist deshalb für viele CMS-Blöcke robust.

Was passiert, wenn das CMS Styles entfernt?

Die semantische Struktur bleibt grundsätzlich erhalten, aber die visuelle Gestaltung wird reduziert. Genau das lässt sich mit diesem Block erkennen.

Warum ist ein offenes Akkordeon enthalten?

So wird geprüft, ob das Attribut open vom CMS akzeptiert wird und ob standardmäßig geöffnete Zusatzbereiche korrekt dargestellt werden.

8. Abschluss und Fußnoten

Am Ende kann ein Fazit stehen. Der Block eignet sich als Belastungstest für redaktionelle Formatierung, weil er viele typische Elemente eines Online-Artikels in einem einzigen HTML-Modul kombiniert.

Fußnote 1: Dieser Hinweistext ist bewusst kleiner gesetzt und kann für Quellen, Korrekturhinweise oder redaktionelle Ergänzungen verwendet werden.

Testfortschritt

Struktur 85 Prozent Typografie 75 Prozent Mobile Darstellung 60 Prozent

Kurzinfo

Diese Randspalte testet Sticky-Verhalten, kompakte Karten, Sprungmarken und Nebeninformationen.

Redaktioneller Abschlussbereich

Hier können Kontakt, Quellenhinweise, weiterführende Links oder ein kurzer Transparenzhinweis stehen.

Weiterlesen

Beispiel-Link 1
Beispiel-Link 2
Beispiel-Link 3