Design-System — krisenfall.eu

Interne Referenz-Page. Alle kanonischen Komponenten aus AGENTS.md §8 live gerendert. Kein Index, kein Follow — nicht öffentlich.

1. Farben

CSS-Variablen aus globals.css als Single Source of Truth. Light-only — kein Dark-Mode.

--primary

#1B4332

--secondary

#40916C

--accent

#F4A261

--warning

#D97706

--success

#16A34A

--background

#F8F9FA

--background-secondary

#EEF4F0

--background-tertiary

#E2EEE7

--border

#C8DDD2

--primary-light

#E8F5EE

2. Button

<Button variant='primary|secondary|affiliate|ghost' size='sm|md|lg' href?={...}>. href → Link, ohne href → <button>.

Primary (Haupt-CTA)

Secondary (Outline)

Affiliate (Amazon-CTA)

Ghost (Tertiär)

Als Link (href=/blog/...)

Zum Artikel →External Link

3. Card

<Card variant='default|highlight|muted' interactive?>. Default = weiße Kachel, Highlight = primary-light (wichtig), Muted = background-secondary (sekundär).

Notstromaggregat kaufen

Die 5 wichtigsten Kriterien beim Kauf — Leistung, Lautstärke, Kraftstoff, Autonomie und Schutzklasse.

Wasserfilter-Vergleich →

BBK-konforme Filter im Praxis-Test. Aktivkohle, UF-Membran, Keramik. (interactive: hover me)

⚠ Empfehlung

Mindestens 10 Liter Trinkwasser pro Person für 10 Tage nach BBK-Richtlinie.

Auch interessant

Blackout-Checkliste · Notvorrat-Rechner · Krisenvorsorge für Familien

4. Badge

Alle Variants

KrisenvorsorgeEnergieAffiliateNur noch 3 verfügbarBBK-geprüftWichtig

Im Kontext

RatgeberBBK-konformAktualisiert: 22. April 2026 · 8 Min. Lesezeit

Wasserfilter-Vergleich 2026: Diese 5 Modelle schützen im Krisenfall

5. InfoBox

<InfoBox variant='info|warning|danger|tip'>. Bestehende Komponente (55 Files) — 5 inline Duplikate werden migriert.

Info

Die Bundesnetzagentur meldet die durchschnittliche Versorgungsunterbrechung bei 12,2 Minuten pro Jahr.

Warnung

Benzin-Notstromaggregate dürfen auf keinen Fall in geschlossenen Räumen betrieben werden — CO-Vergiftungsgefahr.

Gefahr

Abgelaufene Notfallmedikamente nicht im Hausmüll entsorgen — Apotheke-Rückgabe verpflichtend nach AMG §43.

→

Tipp

BBK empfiehlt: 2 Liter Trinkwasser pro Person pro Tag, plus 20 Liter für Hygiene.

6. Table

CSS-Klasse .mdx-table-wrap in globals.css. Dark-Header + Zebra + rounded-Wrapper. Bereits live auf /energie und MDX-Posts.

Filter-Typ	Entfernt Viren	Wartung	Preisklasse
Aktivkohle-Block	Nein	Kartusche 6 Monate	50–150 €
UF-Hohlfaser	Ja (0,1 μm)	Rückspülen quartalsweise	200–400 €
Keramik + Silber	Teilweise	Reinigung monatlich	80–200 €
UV-C-Entkeimung	Ja (99,9%)	Lampe jährlich	300–600 €

7. Section

<Section maxW='5xl' padding='md' as='section'>. Ersetzt inline <section className='max-w-5xl mx-auto px-4 py-12'>.

Diese ganze Demo-Page nutzt <Section maxW="6xl" padding="md"> als Wrapper.

Options: maxW ∈ { 3xl, 4xl, 5xl (Default), 6xl, full } · padding ∈ { none, sm, md (Default), lg }.

Stand: 2026-04-22 · Definiert in AGENTS.md §8 · Komponenten in src/components/ui/