Ganze Seiten-Gerüste und Layout-Muster: Rechtstexte, Detailseiten, Kontakt-Splits,
Vergleichsslider, Hub-Grids und mehr. Akzentfarbe über --akzent in einer Zeile anpassbar;
Layouts hier als verkleinerte, repräsentative Demos in der Bühne.
Schlanker Seitenkopf mit Akzent-Trennlinie und lesefreundlicher Rechtstext-Spalte; nummerierte Counter-Liste statt Standard-ol. Die .fx-ph-Hervorhebung markiert noch zu füllende Platzhalter mit ⚠ — fällt beim Korrekturlesen sofort auf. Vorbild: NDS, Silver, Nördlicht.
<section class="fx-legal-page">
<header class="fx-legal-head">
<a href="#" class="fx-legal-back">← Zurück zur Startseite</a>
<h2>Datenschutzerklärung</h2>
</header>
<div class="fx-legal-body">
<h3>1. Verantwortlicher</h3>
<p>Verantwortlich ist <span class="fx-ph">Firmenname einsetzen</span>, vertreten
durch die Geschäftsführung.</p>
<h3>2. Ihre Rechte</h3>
<ol>
<li>Recht auf Auskunft über die gespeicherten Daten.</li>
<li>Recht auf Berichtigung und Löschung.</li>
<li>Beschwerderecht bei der <a href="#">zuständigen Aufsichtsbehörde</a>.</li>
</ol>
<p class="fx-legal-stand">Stand: <span class="fx-ph">Datum einsetzen</span></p>
</div>
</section>
<style>
.fx-legal-page{max-width:560px;background:#16161a;border:1px solid #26262c;border-radius:12px;overflow:hidden}
.fx-legal-head{padding:26px 28px 22px;background:linear-gradient(180deg,#1c1c22,#16161a);position:relative}
.fx-legal-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,var(--akzent, #7c87ff) 30%,var(--akzent, #7c87ff) 70%,transparent);opacity:.5}
.fx-legal-back{display:inline-flex;align-items:center;gap:6px;color:#a1a1aa;font-size:12px;font-weight:600;
text-decoration:none;margin-bottom:14px;transition:color .2s ease}
.fx-legal-back:hover,.fx-legal-back:focus-visible{color:var(--akzent, #7c87ff)}
.fx-legal-head h2{margin:0;font-size:1.35rem;color:#f4f4f5}
.fx-legal-body{padding:22px 28px 26px;color:#a1a1aa;font-size:.86rem;line-height:1.75}
.fx-legal-body h3{color:#f4f4f5;font-size:.95rem;font-weight:700;margin:20px 0 8px}
.fx-legal-body h3:first-child{margin-top:0}
.fx-legal-body ol{counter-reset:lg;list-style:none;padding-left:0;margin:0 0 12px}
.fx-legal-body ol li{counter-increment:lg;position:relative;padding-left:24px;margin-bottom:7px}
.fx-legal-body ol li::before{content:counter(lg) ".";position:absolute;left:0;top:0;color:var(--akzent, #7c87ff);font-weight:700}
.fx-legal-body a{color:var(--akzent, #7c87ff);text-decoration:underline;text-underline-offset:3px}
/* Platzhalter-Markierung */
.fx-ph{color:var(--akzent, #7c87ff);background:#7c87ff14;border:1px dashed #7c87ff66;border-radius:3px;
padding:1px 6px;font-weight:600;font-style:italic}
.fx-ph::before{content:"\26A0 ";font-style:normal}
.fx-legal-stand{margin-top:18px;padding-top:14px;border-top:1px solid #26262c;font-size:.78rem;color:#71717a;font-style:italic}
</style>
Container-System (3 Breiten) + Section-Rhythmus
Pol 2 · KlarheitAnlass: Grundgerüst jeder Seite
Drei zentrierte Container-Breiten (schmal / Standard / breit) plus ein wiederverwendbarer Section-Titel mit Akzent-Linie. Das Fundament für ein einheitliches Layout über alle Unterseiten. Vorbild: NDS.
.container-narrow
.container
.container-wide
Unsere Leistungen
Zentrierter Section-Titel mit Akzent-Linie und optionalem Untertitel.
Zwei deckungsgleiche Bilder; das obere wird per clip-path: inset() aufgedeckt, ein ziehbarer Knopf folgt Maus und Touch. Bilder hier als CSS-Verlauf angedeutet. Vorbild: Hauszeit, NDS. JS: ja.
Komplettes Gerüst einer Leistungs-Unterseite: Banner-Hero mit Zurück-Pille, alternierende Text/Bild-Blöcke (.fx-rev), Vorteile-Liste mit Häkchen und CTA-Abschluss. Bild als Verlauf/Platzhalter angedeutet. Vorbild: Hauszeit/NDS.
Text und Bild abwechselnd nebeneinander; .reverse tauscht die Spalten per grid-column, ohne das Markup umzustellen. Ruhiger Lese-Rhythmus für längere Erklärseiten. Vorbild: Hauszeit.
Schritt 1 — Beratung
Wir nehmen vor Ort Maß und besprechen Ihre Wünsche im Detail.
Schritt 2 — Umsetzung
Die Ausführung erfolgt termintreu und sauber, ohne Folgekosten.
Info-Spalte links, Formular rechts. Oben eine horizontale Info-Bar, deren Liste per display:contents direkt im Grid liegt — dadurch teilen sich die Einträge die Bar-Spalten ohne Zwischen-Wrapper. Vorbild: Silver.
Schmale Lese-Spalte für maximale Lesbarkeit; Meta-Pill, Cover und wiederverwendbare Bausteine: Absatz, Zitat, Bild mit Bildunterschrift und Abschluss-CTA. Bilder als Verlauf angedeutet. Vorbild: Hauszeit.
Referenz5 Min. Lesezeit
Wie aus einer alten Küche ein neuer Treffpunkt wurde
Ein Projektbericht über Planung, Montage und das Ergebnis nach drei Tagen.
Den Auftakt machte ein ausführliches Aufmaß vor Ort, um Maße und Wünsche exakt zu erfassen.
„Am Ende zählt, dass alles auf den Millimeter passt."
Detail der fertig montierten Arbeitsplatte.
Nach drei Tagen war die Montage abgeschlossen — termintreu und ohne Folgekosten.
<article class="fx-blog">
<div class="fx-blog-meta"><span class="fx-blog-pill">Referenz</span><span>5 Min. Lesezeit</span></div>
<h3>Wie aus einer alten Küche ein neuer Treffpunkt wurde</h3>
<p class="fx-blog-lead">Ein Projektbericht über Planung, Montage und Ergebnis.</p>
<div class="fx-blog-cover" aria-hidden="true"></div>
<div class="fx-blog-body">
<p>Den Auftakt machte ein ausführliches Aufmaß vor Ort …</p>
<blockquote class="fx-blog-quote">„Am Ende zählt, dass alles auf den Millimeter passt."</blockquote>
<figure class="fx-blog-figure">
<div class="fx-blog-figimg" aria-hidden="true"></div>
<figcaption>Detail der montierten Arbeitsplatte.</figcaption>
</figure>
<p>Nach drei Tagen war die Montage abgeschlossen — termintreu.</p>
</div>
<div class="fx-blog-cta">
<h4>Auch Interesse an einer neuen Küche?</h4>
<p>Wir beraten Sie unverbindlich.</p>
<a href="#">Kontakt aufnehmen</a>
</div>
</article>
<style>
.fx-blog{max-width:440px}
.fx-blog-meta{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.4px;
text-transform:uppercase;color:#a1a1aa;margin-bottom:14px}
.fx-blog-pill{padding:4px 12px;border-radius:99px;background:#7c87ff22;color:var(--akzent, #7c87ff);font-size:11px}
.fx-blog h3{margin:0 0 12px;font-size:1.35rem;line-height:1.15;letter-spacing:-.02em;color:#f4f4f5}
.fx-blog-lead{margin:0 0 20px;font-size:.92rem;line-height:1.55;color:#c4c4cc}
.fx-blog-cover{width:100%;aspect-ratio:16/9;border-radius:12px;margin-bottom:20px;
background:linear-gradient(135deg,#23234a,#16161a);border:1px solid #26262c} /* echtes Bild --> img */
.fx-blog-body p{margin:0 0 14px;font-size:.88rem;line-height:1.65;color:#a1a1aa}
.fx-blog-quote{border-left:3px solid var(--akzent, #7c87ff);padding:4px 0 4px 18px;margin:20px 0;font-size:1.05rem;
font-weight:600;line-height:1.4;color:var(--akzent, #7c87ff)}
.fx-blog-figure{margin:18px 0;border-radius:10px;overflow:hidden;border:1px solid #26262c}
.fx-blog-figure .fx-blog-figimg{aspect-ratio:16/10;
background:repeating-linear-gradient(45deg,#1c1c22 0 14px,#16161a 14px 28px)}
.fx-blog-figure figcaption{padding:10px 14px;font-size:11px;color:#71717a;background:#16161a}
.fx-blog-cta{margin-top:24px;padding:24px 22px;border-radius:12px;text-align:center;color:#f4f4f5;
background:linear-gradient(135deg,var(--akzent, #7c87ff),#23234a)}
.fx-blog-cta h4{margin:0 0 8px;font-size:1.05rem}
.fx-blog-cta p{margin:0 0 16px;font-size:.82rem;color:#e9e9eecc}
.fx-blog-cta a{display:inline-block;padding:.6rem 1.3rem;border-radius:8px;background:#f4f4f5;color:#16161a;
font-weight:700;font-size:.82rem;text-decoration:none;transition:transform .2s ease}
.fx-blog-cta a:hover,.fx-blog-cta a:focus-visible{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.fx-blog-cta a{transition:none}}
</style>
Kategorie-Hub-Grid
Pol 2 · KlarheitAnlass: Leistungs-Übersicht
Klickbare Service-Karten in einer dezenten Gradient-Sektion; die ganze Karte ist ein Link, der „Mehr erfahren"-Pfeil schiebt beim Hover/Fokus nach rechts. Vorbild: NDS.
Versteckte Radio-Buttons schalten Panels per :checked ~-Selektor um — komplett ohne JavaScript, daher CSP-sicher. Tastatur-fokussierbar über die Radios. Vorbild: Silver.
Planung
Aufmaß vor Ort und detaillierte Abstimmung Ihrer Wünsche.
Montage
Fachgerechter, termintreuer Aufbau ohne Folgekosten.
Zentrierter Erfolgs-Block als eigene Seite nach erfolgreichem Absenden: Eyebrow, Inline-SVG-Symbol, klare Zusage und zwei Aktionen (anrufen / zurück). Eigenständige Seite, noindex empfohlen. Vorbild: Nördlicht.
Anfrage erhalten
Vielen Dank für Ihre Nachricht.
Ihre Anfrage ist bei uns eingegangen. Wir melden uns innerhalb von 24 Stunden.
Bei dringenden Anliegen erreichen Sie uns telefonisch.
<div class="fx-thanks">
<svg class="fx-thanks-star" viewBox="0 0 64 64" aria-hidden="true">…Inline-SVG-Symbol…</svg>
<span class="fx-thanks-eyebrow">Anfrage erhalten</span>
<h3>Vielen Dank für Ihre Nachricht.</h3>
<p class="fx-thanks-lead">Ihre Anfrage ist eingegangen. Wir melden uns innerhalb 24 Std.</p>
<p class="fx-thanks-detail">Bei dringenden Anliegen erreichen Sie uns telefonisch.</p>
<div class="fx-thanks-actions">
<a class="fx-thanks-btn fx-thanks-primary" href="#">Jetzt anrufen</a>
<a class="fx-thanks-btn fx-thanks-ghost" href="#">Zurück zur Startseite</a>
</div>
</div>
<style>
.fx-thanks{position:relative;max-width:420px;text-align:center;border-radius:18px;padding:36px 30px;
background:radial-gradient(ellipse at 30% 10%,#23234a 0%,#16161a 60%,#0d0d10 100%);
border:1px solid #26262c;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.fx-thanks-star{margin:0 auto 18px;width:64px;height:64px;display:block}
.fx-thanks-eyebrow{display:inline-block;background:#7c87ff22;border:1px solid #7c87ff55;color:var(--akzent, #7c87ff);
font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:99px;margin-bottom:14px}
.fx-thanks h3{margin:0 0 10px;font-size:1.45rem;line-height:1.15;color:#f4f4f5}
.fx-thanks-lead{margin:0 0 6px;font-size:.9rem;color:#c4c4cc}
.fx-thanks-detail{margin:0 0 24px;font-size:.8rem;color:#a1a1aa}
.fx-thanks-actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.fx-thanks-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:99px;font-size:.85rem;
font-weight:700;text-decoration:none;border:1px solid transparent;transition:transform .2s ease,background .2s ease}
.fx-thanks-btn svg{width:15px;height:15px}
.fx-thanks-primary{background:var(--akzent, #7c87ff);color:#fff;border-color:var(--akzent, #7c87ff)}
.fx-thanks-primary:hover,.fx-thanks-primary:focus-visible{transform:translateY(-1px)}
.fx-thanks-ghost{background:#ffffff10;color:#e9e9ee;border-color:#ffffff22}
.fx-thanks-ghost:hover,.fx-thanks-ghost:focus-visible{background:#ffffff1c}
@media (prefers-reduced-motion:reduce){.fx-thanks-btn{transition:none}}
</style>
SPA Page-Switcher (Nische)
Pol 1 · CraftAnlass: One-Page-Site ohne Reload
Mehrere „Seiten" in einer Datei: nur die .page.active wird gezeigt, der Wechsel läuft ohne Neuladen. Kompakte Version des Musters; in echten Projekten zusätzlich History/Deep-Links absichern. Vorbild: Nördlicht. JS: ja.
Start
Willkommen — alle Bereiche liegen in einer Datei, der Wechsel läuft ohne Neuladen.
Pol 2 · KlarheitAnlass: Vollmacht / Formular zum Drucken
Ein druckfertiges Dokument mit eigenem @media print, das die ganze Web-UI ausblendet und nur das Blatt druckt; der Knopf trägt data-action="print". Hier kompakt; den vollständigen Print-Block zeigt der Code. Vorbild: NDS. JS: ja (nur Druck-Knopf).
Vollmacht
zur Vorlage bei Behörden
Vollmachtgeber
Name, Anschrift und Geburtsdatum der vollmachtgebenden Person.
Umfang
Die bevollmächtigte Person ist berechtigt, in den genannten Angelegenheiten zu handeln.
Repräsentativ aus der Familie Versus/Bracket/Timeline: eine gespiegelte Matchup-Zeile (links/rechts via order, „VS" in der Mitte) plus eine nummerierte Timeline mit Counter-Punkten. Kompakt gehalten — der volle Turnierbaum folgt demselben Spiegel-Prinzip. Vorbild: Silver.
Struktur-Vorlage, kein fertiger Rechtstext. Alle konkreten Angaben sind
⚠-Platzhalter und müssen ausgefüllt werden; die Rechtsgrundlagen (§ 5 DDG, § 18 Abs. 2 MStV, § 27a UStG)
und der Streitschlichtungs-Hinweis sind vor Live an gesetze-im-internet.de auf den aktuellen
Stand zu prüfen (die EU-Online-Streitbeilegungs-Plattform wurde 2025 eingestellt — alte OS-Link-Bausteine
nicht mehr verwenden). Nutzt das Layout des Legal-Templates.
Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV
Name und Anschrift
Verbraucherstreitbeilegung
Streitschlichtungs-Hinweis — aktuellen Stand prüfen
Stand: Datum einsetzen
<!-- nutzt die .fx-legal-* Styles aus dem Legal-Template -->
<section class="fx-legal-page">
<header class="fx-legal-head">
<a href="#" class="fx-legal-back">← Zurück zur Startseite</a>
<h2>Impressum</h2>
</header>
<div class="fx-legal-body">
<h3>Angaben gemäß § 5 DDG</h3>
<p><span class="fx-ph">Firmenname / Name</span><br><span class="fx-ph">Straße und Hausnummer</span><br><span class="fx-ph">PLZ Ort</span></p>
<h3>Vertreten durch</h3>
<p><span class="fx-ph">Geschäftsführung / Inhaber:in</span></p>
<h3>Kontakt</h3>
<p>Telefon: <span class="fx-ph">Nummer</span><br>E-Mail: <span class="fx-ph">adresse@domain.de</span></p>
<h3>Umsatzsteuer-ID</h3>
<p>USt-IdNr. gemäß § 27a UStG: <span class="fx-ph">falls vorhanden</span></p>
<h3>Verantwortlich nach § 18 Abs. 2 MStV</h3>
<p><span class="fx-ph">Name und Anschrift</span></p>
<h3>Verbraucherstreitbeilegung</h3>
<p><span class="fx-ph">Hinweis — aktuellen Stand prüfen</span></p>
<p class="fx-legal-stand">Stand: <span class="fx-ph">Datum</span></p>
</div>
</section>
Datenschutz-Vorlage (DSGVO/TDDDG) — vollständiger
Pol 2 · KlarheitAnlass: Pflicht-Datenschutz
Struktur-Vorlage, kein fertiger Rechtstext. Erweitert das kurze Legal-Demo
um die üblichen Abschnitte (Verantwortlicher, Server-Logs, Kontaktformular, Cookies/§ 25 TDDDG, Rechte der
Betroffenen, Empfänger). Alle Inhalte sind ⚠-Platzhalter und müssen projektspezifisch und rechtssicher
ausgefüllt werden (Prüfung an gesetze-im-internet.de, im Zweifel anwaltlich).
Hoster, Analyse, Zahlungsdienstleister usw. — jeweils mit Rechtsgrundlage
Stand: Datum einsetzen
<!-- nutzt die .fx-legal-* Styles aus dem Legal-Template -->
<section class="fx-legal-page">
<header class="fx-legal-head">
<a href="#" class="fx-legal-back">← Zurück zur Startseite</a>
<h2>Datenschutzerklärung</h2>
</header>
<div class="fx-legal-body">
<h3>1. Verantwortlicher</h3>
<p>Verantwortlich ist <span class="fx-ph">Firmenname und Anschrift</span>.</p>
<h3>2. Zugriffsdaten / Server-Logfiles</h3>
<p><span class="fx-ph">Logdaten, Zweck, Art. 6 Abs. 1 lit. f DSGVO</span></p>
<h3>3. Kontaktformular und E-Mail</h3>
<p><span class="fx-ph">Daten, Zweck, Speicherdauer</span></p>
<h3>4. Cookies und Einwilligung (§ 25 TDDDG)</h3>
<p><span class="fx-ph">Einwilligung vor nicht-notwendigen Cookies</span></p>
<h3>5. Ihre Rechte</h3>
<ol><li>Auskunft, Berichtigung, Löschung …</li><li>… Widerspruch (Art. 21)</li><li>Beschwerde bei der Aufsichtsbehörde</li></ol>
<h3>6. Empfänger / Auftragsverarbeiter</h3>
<p><span class="fx-ph">Hoster, Analyse, Zahlung — mit Rechtsgrundlage</span></p>
<p class="fx-legal-stand">Stand: <span class="fx-ph">Datum</span></p>
</div>
</section>
Coming-Soon / Countdown-Landingpage
Pol 1 · CraftAnlass: Vorab-Seite vor Launch
Ganze Vorab-Seite als eine Sektion: pulsierende Status-Pille, großer Titel, ein Countdown aus vier Zellen (Live per JS, zählt auf ein Zieldatum herunter) und eine E-Mail-Vormerkung. Bei ausgeschaltetem JS bleiben Platzhalter-Ziffern stehen. JS: ja.
In Kürze verfügbar
Bald ist es soweit
Wir arbeiten an etwas Neuem. Tragen Sie sich ein und erfahren Sie als Erste, wenn wir starten.
Komplette 404-Seite: ein per CSS-Maske ausgeblendetes Raster im Hintergrund, eine große Zahl mit dezentem Glitch-Versatz (zwei farbige ::before/::after-Ebenen) und zwei klare Aktionen zurück. Rein CSS, kein JS.
404
Seite nicht gefunden
Die aufgerufene Seite existiert nicht oder wurde verschoben. Kein Grund zur Sorge.
Pol 2 · KlarheitAnlass: eingeloggter Bereich / Admin
Kompaktes App-Layout: schmale Icon-Sidebar links, Topbar mit Titel und Profil, Inhaltsbereich mit Kennzahl-Karten und einem CSS-Balkendiagramm. Fundament für jede eingeloggte Ansicht; die Zahlen sind generische Platzhalter. Rein CSS.
Ganze Preis-Sektion mit drei Tarif-Karten; die mittlere ist als „Beliebt" hervorgehoben (Akzent-Rahmen, Glow, Badge). Ein versteckter Checkbox schaltet über den :checked-Selektor zwischen Monats- und Jahrespreis um — komplett ohne JavaScript.