bifroest/app/static/css-framework/dist/index.html
2026-10-27 08:34:17 +01:00

2215 lines
No EOL
99 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="de" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Framework Docs — Komponenten & Tokens</title>
<!-- Theme vor dem ersten Rendern setzen, ohne Inline-Skript -->
<script src="theme.min.js"></script>
<!-- In deinen Projekten: nur main.css einbinden -->
<link rel="stylesheet" href="main.min.css">
<!-- Demo-spezifische Styles (nicht Teil des Frameworks) -->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div class="docs-layout">
<!-- NAV -->
<nav class="nav docs-nav">
<a href="#" class="nav-brand">⬡ CSS-Framework</a>
<ul class="nav-links">
<li><a href="#tokens" class="active">Tokens</a></li>
<li><a href="#base">Base</a></li>
<li><a href="#components">Komponenten</a></li>
</ul>
<div class="nav-end">
<span class="text-sm text-muted">v1.0</span>
<!-- Dark Mode Toggle -->
<button class="btn btn-ghost btn-icon" id="theme-toggle" data-action="theme-toggle" aria-label="Dark Mode umschalten"
title="Dark Mode umschalten">
<svg id="icon-sun" class="icon-theme-dark" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
<svg id="icon-moon" class="icon-theme-light" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</svg>
</button>
</div>
</nav>
<!-- SIDEBAR -->
<aside class="docs-sidebar">
<nav class="sidebar-nav">
<div class="sidebar-nav-section">Design Tokens</div>
<a href="#colors">Farben</a>
<a href="#spacing">Abstände</a>
<a href="#typography-tokens">Typografie</a>
<a href="#shadows">Schatten</a>
<div class="sidebar-nav-section">Base</div>
<a href="#typography">Typografie</a>
<a href="#forms-base">Formulare</a>
<a href="#tables-base">Tabellen</a>
<div class="sidebar-nav-section">Komponenten</div>
<a href="#buttons">Buttons</a>
<a href="#badges">Badges</a>
<a href="#cards">Cards</a>
<a href="#forms">Formulare</a>
<a href="#tables">Tabellen</a>
<a href="#alerts">Alerts</a>
<a href="#modal">Modal</a>
<a href="#tabs">Tabs</a>
<a href="#accordion">Accordion</a>
<a href="#navigation">Navigation</a>
<a href="#sidebar-demo">Sidebar</a>
<a href="#footer-demo">Footer</a>
<a href="#dropdowns">Dropdowns</a>
<a href="#feedback">Feedback</a>
<a href="#meta-list">Meta List</a>
<a href="#chips">Filter Chips</a>
<a href="#timeline">Timeline</a>
<a href="#stepper">Stepper</a>
<a href="#list-group">List Group</a>
<a href="#responsive-tables">Responsive Tables</a>
<a href="#dismissible-alert">Dismissible Alert</a>
<a href="#sortable-table">Sortierbare Tabellen</a>
<a href="#tooltip">Tooltip</a>
<a href="#toast">Toast</a>
<div class="sidebar-nav-section">Utilities</div>
<a href="#alignment">Alignment</a>
</nav>
</aside>
<!-- CONTENT -->
<main class="docs-content">
<div class="stack stack-lg">
<!-- INTRO -->
<div>
<p class="section-label">Dokumentation</p>
<h1>CSS-Framework</h1>
<p class="text-muted demo-s1">
Ein schlankes, klassenloses CSS-Framework für konsistente Jinja2/HTMX-Webapps.
Alle Werte zentral in <code>tokens.css</code> anpassbar.
</p>
<div class="cluster demo-s2">
<code class="text-sm">tokens.css</code>
<code class="text-sm">base.css</code>
<code class="text-sm">components.css</code>
<code class="text-sm">utilities.css</code>
</div>
</div>
<!-- FARBEN -->
<section class="section" id="colors">
<div class="section-header">
<p class="section-label">Tokens</p>
<h2>Farben</h2>
<p class="text-muted">Alle semantischen Aliases aus <code>tokens.css</code>. Diese anpassen, nicht die
Rohpalette.</p>
</div>
<div class="demo-block">
<p class="demo-label">Semantische Farben (Backgrounds)</p>
<div class="token-grid">
<div class="token-swatch">
<div class="swatch demo-s3"></div><span
class="token-name">--bg</span>
</div>
<div class="token-swatch">
<div class="swatch demo-s4"></div><span
class="token-name">--bg-subtle</span>
</div>
<div class="token-swatch">
<div class="swatch demo-s5"></div><span
class="token-name">--bg-muted</span>
</div>
<div class="token-swatch">
<div class="swatch demo-s6"></div><span
class="token-name">--surface</span>
</div>
<div class="token-swatch">
<div class="swatch demo-s7"></div><span
class="token-name">--surface-raised</span>
</div>
</div>
</div>
<div class="demo-block">
<p class="demo-label">Accent Palette</p>
<div class="token-grid">
<div class="token-swatch">
<div class="swatch demo-s8"></div><span
class="token-name">--accent-subtle</span>
</div>
<div class="token-swatch">
<div class="swatch demo-s9"></div><span
class="token-name">--accent-muted</span>
</div>
<div class="token-swatch">
<div class="swatch demo-s10"></div><span class="token-name">--accent</span>
</div>
<div class="token-swatch">
<div class="swatch demo-s11"></div><span
class="token-name">--accent-hover</span>
</div>
<div class="token-swatch">
<div class="swatch demo-s12"></div><span
class="token-name">--accent-active</span>
</div>
</div>
</div>
<div class="demo-block">
<p class="demo-label">Semantisch (Status)</p>
<div class="token-grid">
<div class="token-swatch">
<div class="swatch demo-s13"></div><span
class="token-name">--color-success</span>
</div>
<div class="token-swatch">
<div class="swatch demo-s14"></div><span
class="token-name">--color-warning</span>
</div>
<div class="token-swatch">
<div class="swatch demo-s15"></div><span
class="token-name">--color-danger</span>
</div>
<div class="token-swatch">
<div class="swatch demo-s16"></div><span
class="token-name">--color-info</span>
</div>
</div>
</div>
</section>
<!-- ABSTÄNDE -->
<section class="section" id="spacing">
<div class="section-header">
<p class="section-label">Tokens</p>
<h2>Abstände</h2>
<p class="text-muted">4px-Grid. 12 Stufen von <code>--space-1</code> (4px) bis <code>--space-24</code>
(96px).</p>
</div>
<div class="demo-preview">
<div class="space-demo">
<div class="space-block">
<div class="space-vis demo-s17"></div><span class="token-name">1</span>
</div>
<div class="space-block">
<div class="space-vis demo-s18"></div><span class="token-name">2</span>
</div>
<div class="space-block">
<div class="space-vis demo-s19"></div><span class="token-name">3</span>
</div>
<div class="space-block">
<div class="space-vis demo-s20"></div><span class="token-name">4</span>
</div>
<div class="space-block">
<div class="space-vis demo-s21"></div><span class="token-name">5</span>
</div>
<div class="space-block">
<div class="space-vis demo-s22"></div><span class="token-name">6</span>
</div>
<div class="space-block">
<div class="space-vis demo-s23"></div><span class="token-name">8</span>
</div>
<div class="space-block">
<div class="space-vis demo-s24"></div><span class="token-name">10</span>
</div>
<div class="space-block">
<div class="space-vis demo-s25"></div><span class="token-name">12</span>
</div>
<div class="space-block">
<div class="space-vis demo-s26"></div><span class="token-name">16</span>
</div>
</div>
</div>
</section>
<!-- TYPOGRAFIE -->
<section class="section" id="typography">
<div class="section-header">
<p class="section-label">Base</p>
<h2>Typografie</h2>
<p class="text-muted">Classless — kein Markup nötig.</p>
</div>
<div class="demo-block">
<p class="demo-label">Headings</p>
<div class="demo-preview demo-col demo-s27">
<h1>H1 — Seitenüberschrift (3rem)</h1>
<h2>H2 — Abschnittsüberschrift (2.25rem)</h2>
<h3>H3 — Unterabschnitt (1.875rem)</h3>
<h4>H4 — Kartenüberschrift (1.5rem)</h4>
<h5>H5 — Gruppenheader (1.25rem)</h5>
<h6>H6 — Label-Header (1rem)</h6>
</div>
</div>
<div class="demo-block">
<p class="demo-label">Body & Inline</p>
<div class="demo-preview demo-col">
<p>Normaler Absatztext mit <strong>fettem</strong>, <em>kursivem</em> Text und einem <a href="#">Link</a>.
<code>inline code</code> und <mark>markierter Text</mark> sind ebenfalls enthalten.
</p>
<p>Zweiter Absatz. <small>Kleiner Hilfstext darunter.</small></p>
<blockquote>
Ein Zitat als Blockquote, ideal für wichtige Aussagen oder Kundenstimmen.
<cite>— Max Mustermann, CEO</cite>
</blockquote>
<p>Keyboard Shortcut: <kbd>⌘</kbd> + <kbd>K</kbd></p>
<pre><code>// Code Block
const greet = (name) => `Hallo, ${name}!`;</code></pre>
</div>
</div>
</section>
<!-- FORMS BASE -->
<section class="section" id="forms-base">
<div class="section-header">
<p class="section-label">Base</p>
<h2>Formulare (classless)</h2>
<p class="text-muted">Standard-HTML-Elemente ohne Klassen gestylt.</p>
</div>
<div class="demo-preview demo-col demo-s28">
<label for="demo-text">Textfeld</label>
<input type="text" id="demo-text" placeholder="Placeholder…">
<label for="demo-select">Select</label>
<select id="demo-select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<label for="demo-textarea">Textarea</label>
<textarea id="demo-textarea" rows="3" placeholder="Mehrzeiliger Text…"></textarea>
<fieldset>
<legend>Optionen</legend>
<div class="cluster">
<label class="demo-s29"
>
<input type="checkbox" checked> Checkbox
</label>
<label class="demo-s29"
>
<input type="radio" name="r"> Radio A
</label>
<label class="demo-s29"
>
<input type="radio" name="r"> Radio B
</label>
</div>
</fieldset>
</div>
</section>
<!-- TABLES BASE -->
<section class="section" id="tables-base">
<div class="section-header">
<p class="section-label">Base</p>
<h2>Tabellen (classless)</h2>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Rolle</th>
<th>Erstellt</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anna Müller</td>
<td>Aktiv</td>
<td>Admin</td>
<td>12. Jan 2025</td>
</tr>
<tr>
<td>Ben Schmidt</td>
<td>Inaktiv</td>
<td>Nutzer</td>
<td>3. Feb 2025</td>
</tr>
<tr>
<td>Clara Weber</td>
<td>Ausstehend</td>
<td>Editor</td>
<td>21. Mär 2025</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Gesamt</td>
<td>3 Nutzer</td>
</tr>
</tfoot>
</table>
</section>
<!-- BUTTONS -->
<section class="section" id="buttons">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Buttons</h2>
</div>
<div class="demo-block">
<p class="demo-label">Varianten</p>
<div class="demo-preview">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-secondary" disabled>Disabled</button>
</div>
</div>
<div class="demo-block">
<p class="demo-label">Größen</p>
<div class="demo-preview demo-s30">
<button class="btn btn-primary btn-xs">XSmall</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-xl">XLarge</button>
</div>
</div>
<div class="demo-block">
<p class="demo-label">Mit Icon</p>
<div class="demo-preview">
<button class="btn btn-primary">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
Neu erstellen
</button>
<button class="btn btn-secondary">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
Export
</button>
<button class="btn btn-ghost btn-icon" title="Einstellungen">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3" />
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
</button>
</div>
</div>
<div class="demo-block">
<p class="demo-label">Button Group & Segmented Control</p>
<div class="demo-preview demo-col">
<div class="button-group" role="group" aria-label="Ansicht wechseln">
<button class="btn btn-secondary">Liste</button>
<button class="btn btn-secondary">Board</button>
<button class="btn btn-secondary">Kalender</button>
</div>
<fieldset class="form-group demo-s31">
<legend>Zeitraum</legend>
<div class="segmented" role="radiogroup" aria-label="Zeitraum wählen">
<label class="segmented-option" for="range-day">
<input class="segmented-input" type="radio" name="range" id="range-day">
<span class="segmented-button">Tag</span>
</label>
<label class="segmented-option" for="range-week">
<input class="segmented-input" type="radio" name="range" id="range-week" checked>
<span class="segmented-button">Woche</span>
</label>
<label class="segmented-option" for="range-month">
<input class="segmented-input" type="radio" name="range" id="range-month">
<span class="segmented-button">Monat</span>
</label>
<label class="segmented-option" for="range-quarter">
<input class="segmented-input" type="radio" name="range" id="range-quarter" disabled>
<span class="segmented-button">Quartal</span>
</label>
</div>
<span class="form-hint">Für serverseitige Filter oder Ansichtsauswahl ohne zusätzliche
JavaScript-Logik.</span>
</fieldset>
</div>
</div>
</section>
<!-- BADGES -->
<section class="section" id="badges">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Badges</h2>
</div>
<div class="demo-preview">
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Erfolg</span>
<span class="badge badge-warning">Warnung</span>
<span class="badge badge-danger">Fehler</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-outline">Outline</span>
<span class="badge badge-success badge-dot">Live</span>
<span class="badge badge-danger badge-dot">Offline</span>
</div>
</section>
<!-- CARDS -->
<section class="section" id="cards">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Cards</h2>
</div>
<div class="grid-2 grid demo-s27">
<!-- Standard Card -->
<div class="card card-hover">
<div class="card-header">
<h3>Projekt Alpha</h3>
<span class="badge badge-success badge-dot">Aktiv</span>
</div>
<div class="card-body stack-sm stack">
<p class="text-muted text-sm">Vollständige Card mit Header, Body und Footer. Hover für Shadow-Effekt.
</p>
<div class="cluster">
<div class="avatar">AM</div>
<div class="avatar demo-s32">BS</div>
<span class="text-sm text-muted">+ 3 weitere</span>
</div>
</div>
<div class="card-footer">
<button class="btn btn-ghost btn-sm">Details</button>
<button class="btn btn-primary btn-sm ml-auto">Öffnen</button>
</div>
</div>
<!-- Ghost Card -->
<div class="card card-ghost">
<div class="card-body">
<div class="stat">
<span class="stat-label">Gesamtumsatz</span>
<span class="stat-value">€ 48.291</span>
<span class="stat-change up">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.5">
<polyline points="18 15 12 9 6 15" />
</svg>
+12.4% diesen Monat
</span>
</div>
</div>
</div>
<!-- Raised Card -->
<div class="card card-raised">
<div class="card-body stack-sm stack">
<h4>Fortschritt</h4>
<div class="stack-sm stack">
<div class="flex-between flex">
<span class="text-sm text-muted">Onboarding</span>
<span class="text-sm font-medium">80%</span>
</div>
<div class="progress">
<div class="progress-bar" data-progress="80"></div>
</div>
</div>
<div class="stack-sm stack">
<div class="flex-between flex">
<span class="text-sm text-muted">Tests</span>
<span class="text-sm font-medium">45%</span>
</div>
<div class="progress">
<div class="progress-bar warning" data-progress="45"></div>
</div>
</div>
<div class="stack-sm stack">
<div class="flex-between flex">
<span class="text-sm text-muted">Deployment</span>
<span class="text-sm font-medium">12%</span>
</div>
<div class="progress">
<div class="progress-bar danger" data-progress="12"></div>
</div>
</div>
</div>
</div>
<!-- Image Card -->
<div class="card card-hover">
<div class="demo-s36"
>
<svg class="demo-s37" viewBox="0 0 400 225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
<circle cx="100" cy="60" r="80" fill="var(--accent)" />
<circle cx="320" cy="180" r="120" fill="var(--accent)" />
<rect x="150" y="30" width="200" height="140" rx="16" fill="var(--accent)" opacity="0.5" />
</svg>
<div class="demo-s38">
<span class="demo-s39">🖼</span>
</div>
</div>
<div class="card-body stack-sm stack">
<div class="flex-between flex">
<span class="badge badge-primary">Tutorial</span>
<span class="text-xs text-muted">5 Min. Lesezeit</span>
</div>
<h4 class="demo-s40">CSS Custom Properties richtig einsetzen</h4>
<p class="text-muted text-sm">Wie du mit einem einzigen Token-System konsistente Designs über mehrere
Projekte hinweg erreichst.</p>
</div>
<div class="card-footer">
<div class="avatar avatar-sm">MW</div>
<span class="text-sm text-muted">Max Weber</span>
<button class="btn btn-ghost btn-sm ml-auto">Lesen →</button>
</div>
</div>
<!-- Empty State Card -->
<div class="card">
<div class="empty">
<svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3 7l9-4 9 4v10l-9 4-9-4V7z" />
<path d="M12 3v18" />
<path d="M3 7l9 4 9-4" />
</svg>
<p class="empty-title">Keine Einträge</p>
<p class="empty-description">Erstelle deinen ersten Eintrag, um hier Daten zu sehen.</p>
<button class="btn btn-primary btn-sm">Erstellen</button>
</div>
</div>
</div>
</section>
<!-- FORMS COMPONENTS -->
<section class="section" id="forms">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Formulare (Opt-in Klassen)</h2>
</div>
<div class="card">
<div class="card-header">
<h3>Nutzerdaten bearbeiten</h3>
</div>
<div class="card-body">
<div class="stack">
<div class="form-row">
<div class="form-group">
<label for="fn">Vorname</label>
<input type="text" id="fn" placeholder="Max">
</div>
<div class="form-group">
<label for="ln">Nachname</label>
<input type="text" id="ln" placeholder="Mustermann">
</div>
</div>
<div class="form-group">
<label for="email">E-Mail</label>
<div class="input-group">
<span class="input-group-prefix">@</span>
<input type="email" id="email" placeholder="max@beispiel.de">
</div>
<span class="form-hint">Wird für Login und Benachrichtigungen verwendet.</span>
</div>
<div class="form-group">
<label for="url-input">Website</label>
<div class="input-group">
<input type="text" id="url-input" placeholder="meineseite">
<span class="input-group-suffix">.de</span>
</div>
</div>
<div class="form-group">
<label for="pwd-err">Passwort (Fehler)</label>
<input type="password" id="pwd-err" class="error" value="123">
<span class="form-error">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.5">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
Mindestens 8 Zeichen erforderlich.
</span>
</div>
<div class="form-group">
<label for="role">Rolle</label>
<select id="role">
<option>Administrator</option>
<option>Editor</option>
<option>Nutzer</option>
</select>
</div>
<div class="form-row">
<div class="form-group">
<label for="contract-upload">Vertragsdokument</label>
<label class="file-upload" for="contract-upload">
<input class="file-upload-input" type="file" id="contract-upload">
<span class="file-upload-head">
<span class="file-upload-body">
<span class="file-upload-title">PDF oder DOCX hochladen</span>
<span class="file-upload-description">Für Angebote, Verträge oder Briefings ohne weitere
Upload-Logik.</span>
</span>
<span class="file-upload-button">Datei wählen</span>
</span>
<span class="file-upload-meta" aria-hidden="true">
<span>Max. 10 MB</span>
<span>PDF, DOCX</span>
</span>
</label>
<span class="form-hint">Die Datei wird beim Absenden des Formulars normal übertragen.</span>
</div>
<div class="form-group">
<label for="asset-upload">Brand Assets</label>
<label class="file-upload file-upload-dropzone is-error" for="asset-upload">
<input class="file-upload-input" type="file" id="asset-upload">
<span class="file-upload-head">
<span class="file-upload-body">
<span class="file-upload-title">Datei hier ablegen oder auswählen</span>
<span class="file-upload-description">Optionaler Dropzone-Look ohne Preview oder
Drag-and-drop-Logik.</span>
</span>
<span class="file-upload-button">Asset auswählen</span>
</span>
<span class="file-upload-meta" aria-hidden="true">
<span>SVG, PNG</span>
<span>Empfohlen: 2048 px</span>
</span>
</label>
<span class="form-error">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.5">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
Bitte nur Logos im SVG- oder PNG-Format verwenden.
</span>
</div>
</div>
<div class="form-group">
<span class="demo-label">Benachrichtigungen</span>
<label class="switch" for="notify-comments">
<input class="switch-input" type="checkbox" id="notify-comments" checked>
<span class="switch-control" aria-hidden="true"></span>
<span class="switch-body">
<span class="switch-label">Kommentar-Benachrichtigungen</span>
<span class="switch-description">Informiert bei Antworten und Erwähnungen in Projekten.</span>
</span>
</label>
<label class="switch" for="notify-digest">
<input class="switch-input" type="checkbox" id="notify-digest">
<span class="switch-control" aria-hidden="true"></span>
<span class="switch-body">
<span class="switch-label">Tägliche Zusammenfassung</span>
<span class="switch-description">Sendet einmal täglich einen kompakten Statusbericht per
E-Mail.</span>
</span>
</label>
<label class="switch" for="notify-security">
<input class="switch-input" type="checkbox" id="notify-security" checked disabled>
<span class="switch-control" aria-hidden="true"></span>
<span class="switch-body">
<span class="switch-label">Sicherheitswarnungen</span>
<span class="switch-description">Bleibt aktiv, solange Zwei-Faktor-Anmeldung erzwungen ist.</span>
</span>
</label>
</div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-ghost btn-sm">Abbrechen</button>
<button class="btn btn-primary btn-sm ml-auto">Speichern</button>
</div>
</div>
</section>
<!-- TABLES COMPONENT -->
<section class="section" id="tables">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Tabellen (table-wrap)</h2>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Nutzer</th>
<th>Status</th>
<th>Rolle</th>
<th>Letzter Login</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="flex-start flex gap-3">
<div class="avatar avatar-sm">AM</div>
<div>
<div class="font-medium">Anna Müller</div>
<div class="text-xs text-muted">anna@beispiel.de</div>
</div>
</div>
</td>
<td><span class="badge badge-success badge-dot">Aktiv</span></td>
<td><span class="badge badge-default">Admin</span></td>
<td class="text-muted text-sm">Vor 2 Stunden</td>
<td>
<div class="dropdown" id="dd1">
<button class="btn btn-ghost btn-icon btn-sm" data-action="dropdown" data-target="dd1">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
<div class="dropdown-menu">
<div class="dropdown-label">Aktionen</div>
<button class="dropdown-item">Bearbeiten</button>
<button class="dropdown-item">Passwort zurücksetzen</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item danger">Deaktivieren</button>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="flex-start flex gap-3">
<div class="avatar avatar-sm demo-s32">
BS</div>
<div>
<div class="font-medium">Ben Schmidt</div>
<div class="text-xs text-muted">ben@beispiel.de</div>
</div>
</div>
</td>
<td><span class="badge badge-warning badge-dot">Ausstehend</span></td>
<td><span class="badge badge-default">Editor</span></td>
<td class="text-muted text-sm">Vor 3 Tagen</td>
<td>
<button class="btn btn-ghost btn-icon btn-sm">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
</td>
</tr>
<tr>
<td>
<div class="flex-start flex gap-3">
<div class="avatar avatar-sm demo-s41"
>CW</div>
<div>
<div class="font-medium">Clara Weber</div>
<div class="text-xs text-muted">clara@beispiel.de</div>
</div>
</div>
</td>
<td><span class="badge badge-danger badge-dot">Inaktiv</span></td>
<td><span class="badge badge-default">Nutzer</span></td>
<td class="text-muted text-sm">Vor 2 Wochen</td>
<td>
<button class="btn btn-ghost btn-icon btn-sm">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="flex-between flex">
<span class="text-sm text-muted">1–3 von 24 Einträgen</span>
<ul class="pagination">
<li><a class="disabled" href="#">←</a></li>
<li><a class="active" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">…</a></li>
<li><a href="#">8</a></li>
<li><a href="#">→</a></li>
</ul>
</div>
</section>
<!-- ALERTS -->
<section class="section" id="alerts">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Alerts</h2>
</div>
<div class="stack">
<div class="alert alert-info">
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="16" x2="12" y2="12" />
<line x1="12" y1="8" x2="12.01" y2="8" />
</svg>
<div class="alert-content">
<p class="alert-title">Information</p>
<p>Deine Daten werden automatisch gespeichert. Du kannst jederzeit fortfahren.</p>
</div>
</div>
<div class="alert alert-success">
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
<polyline points="22 4 12 14.01 9 11.01" />
</svg>
<div class="alert-content">
<p class="alert-title">Erfolgreich gespeichert</p>
<p>Alle Änderungen wurden übernommen.</p>
</div>
</div>
<div class="alert alert-warning">
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
<line x1="12" y1="9" x2="12" y2="13" />
<line x1="12" y1="17" x2="12.01" y2="17" />
</svg>
<div class="alert-content">
<p class="alert-title">Abo läuft ab</p>
<p>Dein Abonnement endet in 7 Tagen. Bitte verlängere es rechtzeitig.</p>
</div>
</div>
<div class="alert alert-danger">
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<circle cx="12" cy="12" r="10" />
<line x1="15" y1="9" x2="9" y2="15" />
<line x1="9" y1="9" x2="15" y2="15" />
</svg>
<div class="alert-content">
<p class="alert-title">Fehler aufgetreten</p>
<p>Die Anfrage konnte nicht verarbeitet werden. Bitte versuche es erneut.</p>
</div>
</div>
</div>
</section>
<!-- MODAL -->
<section class="section" id="modal">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Modal</h2>
</div>
<div class="demo-preview">
<button class="btn btn-primary" data-action="modal-open" data-target="demo-modal">Modal öffnen</button>
<button class="btn btn-secondary" data-action="modal-open" data-target="confirm-modal">Bestätigen-Dialog</button>
</div>
</section>
<!-- TABS -->
<section class="section" id="tabs">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Tabs</h2>
</div>
<div class="tabs">
<ul class="tab-list" role="tablist">
<li><button class="active" role="tab" data-action="tab" data-target="tab-overview">Übersicht</button></li>
<li><button role="tab" data-action="tab" data-target="tab-settings">Einstellungen</button></li>
<li><button role="tab" data-action="tab" data-target="tab-logs">Logs</button></li>
</ul>
<div id="tab-overview" class="tab-panel active">
<div class="card">
<div class="card-body">
<p class="text-muted">Inhalt des ersten Tab-Panels. Hier können beliebige Inhalte stehen.</p>
</div>
</div>
</div>
<div id="tab-settings" class="tab-panel">
<div class="card">
<div class="card-body">
<p class="text-muted">Einstellungen und Konfigurationsoptionen.</p>
</div>
</div>
</div>
<div id="tab-logs" class="tab-panel">
<div class="card">
<div class="card-body">
<pre><code>[2025-01-15 09:12:03] INFO Server gestartet
[2025-01-15 09:12:04] INFO Datenbank verbunden
[2025-01-15 09:15:22] WARN Hohe Speichernutzung</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- ACCORDION -->
<section class="section" id="accordion">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Accordion</h2>
<p class="text-muted">Opt-in Pattern für gruppierte details-Elemente mit klaren Abständen und Varianten.</p>
</div>
<div class="demo-block">
<p class="demo-label">Standard</p>
<div class="demo-preview demo-col">
<div class="accordion demo-s42">
<details class="accordion-item" open>
<summary>Was ist ein classless Framework?</summary>
<div class="accordion-body">
<p class="text-muted text-sm">Ein classless Framework stylt HTML-Elemente direkt, ohne dass
zusätzliche Klassen für jede Kleinigkeit nötig sind.</p>
<p class="text-muted text-sm">Für komplexere Muster wie gruppierte FAQs oder Einstellungsblöcke
kommen opt-in Komponentenklassen gezielt darüber.</p>
</div>
</details>
<details class="accordion-item">
<summary>Wie passe ich Farben an?</summary>
<div class="accordion-body">
<p class="text-muted text-sm">Alle Farben liegen in <code>tokens.css</code> als semantische Custom
Properties vor.</p>
<p class="text-muted text-sm">Typische Einstiegspunkte sind <code>--accent</code>,
<code>--bg</code>, <code>--surface</code> und <code>--text</code>.
</p>
</div>
</details>
<details class="accordion-item">
<summary>Wann nutze ich eine Accordion-Variante?</summary>
<div class="accordion-body">
<p class="text-muted text-sm">Für FAQ-Bereiche, Einstellungsgruppen oder kompakte
Informationslisten, die ohne JavaScript auskommen sollen.</p>
</div>
</details>
</div>
</div>
</div>
<div class="demo-block">
<p class="demo-label">Flush & Muted</p>
<div class="demo-preview demo-col">
<div class="accordion accordion-flush demo-s42">
<details class="accordion-item" open>
<summary>API-Zugriff</summary>
<div class="accordion-body">
<p class="text-muted text-sm">Flush eignet sich für Listen mit durchgehender Kante, etwa in
Sidepanels oder Settings-Cards.</p>
</div>
</details>
<details class="accordion-item">
<summary>Webhooks</summary>
<div class="accordion-body">
<p class="text-muted text-sm">Die Einträge schließen nahtlos aneinander an, bleiben aber technisch
eigenständige details-Elemente.</p>
</div>
</details>
</div>
<div class="accordion accordion-muted demo-s42">
<details class="accordion-item">
<summary>Hinweise für Teams</summary>
<div class="accordion-body">
<p class="text-muted text-sm">Muted hebt den Container subtil gegen sehr helle Oberflächen ab und
passt gut zu Hilfstexten oder begleitenden FAQs.</p>
</div>
</details>
</div>
</div>
</div>
</section>
<!-- FEEDBACK -->
<section class="section" id="feedback">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Feedback & Status</h2>
</div>
<div class="demo-block">
<p class="demo-label">Spinner</p>
<div class="demo-preview demo-s30">
<div class="spinner spinner-sm"></div>
<div class="spinner"></div>
<div class="spinner spinner-lg"></div>
<button class="btn btn-primary" disabled>
<div class="spinner spinner-sm demo-s43">
</div>
Laden…
</button>
</div>
</div>
<div class="demo-block">
<p class="demo-label">Skeleton</p>
<div class="demo-preview demo-col demo-s44">
<div class="skeleton demo-s45"></div>
<div class="skeleton demo-s46"></div>
<div class="skeleton demo-s47"></div>
<div class="skeleton demo-s48"></div>
</div>
</div>
<div class="demo-block">
<p class="demo-label">Toast (simuliert)</p>
<div class="demo-preview">
<button class="btn btn-secondary" data-action="demo-toast">Toast anzeigen</button>
</div>
</div>
</section>
<!-- TOP NAVIGATION -->
<section class="section" id="navigation">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Navigation</h2>
<p class="text-muted">Top Navigation und Breadcrumbs für hierarchische Seitenpfade.</p>
</div>
<div class="demo-block">
<p class="demo-label">Breadcrumbs</p>
<div class="demo-preview demo-col">
<nav class="breadcrumbs" aria-label="Breadcrumb">
<ol>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Projekte</a></li>
<li><a href="#">Kundenportal</a></li>
<li><span aria-current="page">Einstellungen</span></li>
</ol>
</nav>
<p class="text-sm text-muted">Semantisch als <code>nav</code> mit <code>ol</code>, mobil horizontal
scrollbar und ohne JavaScript nutzbar.</p>
</div>
</div>
<div class="demo-block">
<p class="demo-label">Standard Topnav</p>
<div class="demo-s49"
>
<nav class="topnav topnav-static">
<div class="topnav-inner">
<a class="topnav-brand" href="#">
<svg class="topnav-brand-logo" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="28" height="28" rx="8" fill="var(--accent)" />
<path d="M8 14 L14 8 L20 14 L14 20 Z" fill="white" />
</svg>
Acme
</a>
<ul class="topnav-links">
<li><a href="#" class="active">Dashboard</a></li>
<li><a href="#">Projekte</a></li>
<li>
<button data-action="nav-dropdown">
Mehr
<svg class="nav-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.5">
<polyline points="6 9 12 15 18 9" />
</svg>
</button>
<div class="topnav-dropdown">
<div class="dropdown-label">Weitere Seiten</div>
<a href="#">Einstellungen</a>
<a href="#">Team</a>
<a href="#">Dokumentation</a>
<div class="dropdown-divider"></div>
<a href="#">API</a>
</div>
</li>
</ul>
<div class="topnav-end">
<button class="btn btn-ghost btn-sm">Anmelden</button>
<button class="btn btn-primary btn-sm">Registrieren</button>
</div>
</div>
</nav>
<div class="demo-s50"
>
Seiteninhalt</div>
</div>
</div>
<div class="demo-block">
<p class="demo-label">Mit Avatar & User-Dropdown (App-Nav)</p>
<div class="demo-s49"
>
<nav class="topnav topnav-static">
<div class="topnav-inner">
<a class="topnav-brand" href="#">⬡ MyApp</a>
<ul class="topnav-links">
<li><a href="#" class="active">Übersicht</a></li>
<li><a href="#">Daten</a></li>
<li><a href="#">Berichte</a></li>
</ul>
<div class="topnav-end">
<span class="topnav-sep"></span>
<!-- User-Dropdown -->
<div class="dropdown" id="user-dd">
<button class="btn btn-ghost btn-sm demo-s51"
data-action="dropdown" data-target="user-dd">
<div class="avatar avatar-sm">AM</div>
<span class="hide-mobile">Anna M.</span>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.5">
<polyline points="6 9 12 15 18 9" />
</svg>
</button>
<div class="dropdown-menu">
<div class="dropdown-header">
<div class="avatar">AM</div>
<div>
<div class="dropdown-header-name">Anna Müller</div>
<div class="dropdown-header-sub">anna@beispiel.de</div>
</div>
</div>
<button class="dropdown-item">Profil</button>
<button class="dropdown-item">Einstellungen</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item danger">Abmelden</button>
</div>
</div>
</div>
</div>
</nav>
<div class="demo-s50"
>
App-Inhalt</div>
</div>
</div>
</section>
<!-- SIDEBAR -->
<section class="section" id="sidebar-demo">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Sidebar</h2>
<p class="text-muted">Mit Header, kollapsiblen Gruppen, Badges und User-Footer.</p>
</div>
<div class="demo-block">
<p class="demo-label">Vollständige App-Sidebar</p>
<div class="demo-s52"
>
<aside class="sidebar demo-s53">
<div class="sidebar-header">
<div class="demo-s54">
<div class="demo-s55"
>
<svg width="12" height="12" viewBox="0 0 28 28" fill="none">
<path d="M4 14 L14 4 L24 14 L14 24 Z" fill="white" />
</svg>
</div>
<span class="demo-s56">Acme Inc.</span>
</div>
</div>
<nav class="sidebar-nav">
<div class="sidebar-section">Haupt</div>
<a href="#" class="active">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="7" height="7" />
<rect x="14" y="3" width="7" height="7" />
<rect x="3" y="14" width="7" height="7" />
<rect x="14" y="14" width="7" height="7" />
</svg>
Dashboard
</a>
<a href="#">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
</svg>
Projekte
<span class="nav-count">4</span>
</a>
<a href="#">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
Team
</a>
<div class="sidebar-section">Analyse</div>
<details class="sidebar-group" open>
<summary>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<line x1="18" y1="20" x2="18" y2="10" />
<line x1="12" y1="20" x2="12" y2="4" />
<line x1="6" y1="20" x2="6" y2="14" />
</svg>
Berichte
</summary>
<div class="sidebar-group-items">
<a href="#">Umsatz</a>
<a href="#">Nutzer</a>
<a href="#">Traffic</a>
</div>
</details>
<a href="#">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
Logs
<span class="nav-count">12</span>
</a>
</nav>
<div class="sidebar-footer">
<a href="#" class="sidebar-user">
<div class="avatar avatar-sm">AM</div>
<div class="sidebar-user-info">
<div class="sidebar-user-name">Anna Müller</div>
<div class="sidebar-user-role">Administrator</div>
</div>
<svg class="demo-s57" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
>
<circle cx="12" cy="12" r="1" />
<circle cx="19" cy="12" r="1" />
<circle cx="5" cy="12" r="1" />
</svg>
</a>
</div>
</aside>
<div class="demo-s58"
>
Hauptinhalt
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<section class="section" id="footer-demo">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Footer</h2>
</div>
<div class="demo-block">
<p class="demo-label">Einfacher Footer (eine Zeile)</p>
<div class="demo-s59">
<footer class="footer">
<div class="footer-inner">
<a class="footer-brand" href="#">⬡ CSS-Framework</a>
<ul class="footer-links">
<li><a href="#">Impressum</a></li>
<li><a href="#">Datenschutz</a></li>
<li><a href="#">AGB</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
<p class="footer-copy">© 2025 Acme GmbH</p>
</div>
</footer>
</div>
</div>
<div class="demo-block">
<p class="demo-label">Mehrspaltig mit Footer-Bottom</p>
<div class="demo-s59">
<footer class="footer footer-full">
<div class="footer-inner">
<div class="footer-col demo-s60">
<a class="footer-brand demo-s61" href="#">⬡ CSS-Framework</a>
<p class="demo-s62">Ein schlankes
CSS-Framework für konsistente Jinja2/HTMX-Webapps.</p>
</div>
<div class="footer-col">
<p class="footer-col-title">Produkt</p>
<a href="#">Features</a>
<a href="#">Changelog</a>
<a href="#">Roadmap</a>
<a href="#">Preise</a>
</div>
<div class="footer-col">
<p class="footer-col-title">Ressourcen</p>
<a href="#">Dokumentation</a>
<a href="#">Beispiele</a>
<a href="#">Blog</a>
<a href="#">GitHub</a>
</div>
<div class="footer-col">
<p class="footer-col-title">Unternehmen</p>
<a href="#">Über uns</a>
<a href="#">Team</a>
<a href="#">Kontakt</a>
<a href="#">Impressum</a>
</div>
</div>
<div class="footer-bottom demo-s63">
<span>© 2025 Acme GmbH — Alle Rechte vorbehalten</span>
<ul class="footer-social">
<li>
<a href="#" title="GitHub">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
</svg>
</a>
</li>
<li>
<a href="#" title="Twitter / X">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
</svg>
</a>
</li>
<li>
<a href="#" title="LinkedIn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
<rect x="2" y="9" width="4" height="12" />
<circle cx="4" cy="4" r="2" />
</svg>
</a>
</li>
</ul>
</div>
</footer>
</div>
</div>
</section>
<!-- DROPDOWNS ERWEITERT -->
<section class="section" id="dropdowns">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Dropdowns</h2>
<p class="text-muted">Verschiedene Varianten: Standard, User, Filter mit Checkmarks, Rich Items.</p>
</div>
<div class="demo-preview demo-s64"
>
<!-- Standard -->
<div>
<p class="text-xs text-muted demo-s61">Standard</p>
<div class="dropdown" id="dd-std">
<button class="btn btn-secondary" data-action="dropdown" data-target="dd-std">
Aktionen
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<polyline points="6 9 12 15 18 9" />
</svg>
</button>
<div class="dropdown-menu">
<button class="dropdown-item">Bearbeiten</button>
<button class="dropdown-item">Duplizieren</button>
<button class="dropdown-item">Exportieren</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item danger">Löschen</button>
</div>
</div>
</div>
<!-- Filter mit Checkmarks -->
<div>
<p class="text-xs text-muted demo-s61">Filter</p>
<div class="dropdown" id="dd-filter">
<button class="btn btn-secondary" data-action="dropdown" data-target="dd-filter">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
</svg>
Filter
</button>
<div class="dropdown-menu">
<div class="dropdown-label">Status</div>
<button class="dropdown-item dropdown-item-check checked"
data-action="toggle-class" data-class="checked">Aktiv</button>
<button class="dropdown-item dropdown-item-check"
data-action="toggle-class" data-class="checked">Inaktiv</button>
<button class="dropdown-item dropdown-item-check checked"
data-action="toggle-class" data-class="checked">Ausstehend</button>
<div class="dropdown-divider"></div>
<div class="dropdown-label">Rolle</div>
<button class="dropdown-item dropdown-item-check"
data-action="toggle-class" data-class="checked">Admin</button>
<button class="dropdown-item dropdown-item-check checked"
data-action="toggle-class" data-class="checked">Nutzer</button>
</div>
</div>
</div>
<!-- Rich Items -->
<div>
<p class="text-xs text-muted demo-s61">Rich Items</p>
<div class="dropdown" id="dd-rich">
<button class="btn btn-secondary" data-action="dropdown" data-target="dd-rich">
Neu erstellen
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<polyline points="6 9 12 15 18 9" />
</svg>
</button>
<div class="dropdown-menu dropdown-wide">
<div class="dropdown-label">Typ wählen</div>
<button class="dropdown-item dropdown-item-rich">
<div class="dropdown-item-title">Projekt</div>
<div class="dropdown-item-desc">Neue Projektmappe mit Team und Aufgaben</div>
</button>
<button class="dropdown-item dropdown-item-rich">
<div class="dropdown-item-title">Dokument</div>
<div class="dropdown-item-desc">Leeres Dokument im Editor öffnen</div>
</button>
<button class="dropdown-item dropdown-item-rich">
<div class="dropdown-item-title">Report</div>
<div class="dropdown-item-desc">Automatisch generierter Bericht</div>
</button>
</div>
</div>
</div>
<!-- Nach oben öffnend -->
<div class="demo-s65">
<p class="text-xs text-muted demo-s61">Nach oben</p>
<div class="dropdown" id="dd-top">
<button class="btn btn-ghost btn-sm" data-action="dropdown" data-target="dd-top">↑ Öffnet oben</button>
<div class="dropdown-menu dropdown-menu-top">
<button class="dropdown-item">Option A</button>
<button class="dropdown-item">Option B</button>
</div>
</div>
</div>
</div>
</section>
<!-- ALIGNMENT UTILITIES -->
<section class="section" id="alignment">
<div class="section-header">
<p class="section-label">Utilities</p>
<h2>Alignment</h2>
<p class="text-muted">Standalone <code>align-items</code>, <code>justify-content</code> und <code>align-self</code> — kombinierbar mit <code>.flex</code> und <code>.grid-u</code>.</p>
</div>
<div class="stack">
<!-- items-* -->
<div>
<p class="text-sm font-semibold mb-2">align-items — <code>.items-*</code></p>
<div class="stack stack-sm">
<div class="flex items-start gap-2 bg-subtle rounded-lg p-4 demo-s66">
<div class="bg-surface border rounded p-2 text-sm">.items-start</div>
<div class="bg-surface border rounded p-2 text-sm demo-s67">höher</div>
<div class="bg-surface border rounded p-2 text-sm">kurz</div>
</div>
<div class="flex items-center gap-2 bg-subtle rounded-lg p-4 demo-s66">
<div class="bg-surface border rounded p-2 text-sm">.items-center</div>
<div class="bg-surface border rounded p-2 text-sm demo-s67">höher</div>
<div class="bg-surface border rounded p-2 text-sm">kurz</div>
</div>
<div class="flex items-end gap-2 bg-subtle rounded-lg p-4 demo-s66">
<div class="bg-surface border rounded p-2 text-sm">.items-end</div>
<div class="bg-surface border rounded p-2 text-sm demo-s67">höher</div>
<div class="bg-surface border rounded p-2 text-sm">kurz</div>
</div>
<div class="flex items-stretch gap-2 bg-subtle rounded-lg p-4 demo-s66">
<div class="bg-surface border rounded p-2 text-sm">.items-stretch</div>
<div class="bg-surface border rounded p-2 text-sm">füllt Höhe</div>
</div>
</div>
</div>
<!-- justify-* -->
<div>
<p class="text-sm font-semibold mb-2">justify-content — <code>.justify-*</code></p>
<div class="stack stack-sm">
<div class="flex justify-start gap-2 bg-subtle rounded-lg p-4">
<div class="bg-surface border rounded p-2 text-sm">.justify-start</div>
<div class="bg-surface border rounded p-2 text-sm">B</div>
</div>
<div class="flex justify-center gap-2 bg-subtle rounded-lg p-4">
<div class="bg-surface border rounded p-2 text-sm">.justify-center</div>
<div class="bg-surface border rounded p-2 text-sm">B</div>
</div>
<div class="flex justify-end gap-2 bg-subtle rounded-lg p-4">
<div class="bg-surface border rounded p-2 text-sm">.justify-end</div>
<div class="bg-surface border rounded p-2 text-sm">B</div>
</div>
<div class="flex justify-between bg-subtle rounded-lg p-4">
<div class="bg-surface border rounded p-2 text-sm">.justify-between</div>
<div class="bg-surface border rounded p-2 text-sm">rechts</div>
</div>
</div>
</div>
<!-- self-* -->
<div>
<p class="text-sm font-semibold mb-2">align-self auf Kind-Elementen — <code>.self-*</code></p>
<div class="flex items-stretch gap-2 bg-subtle rounded-lg p-4 demo-s68">
<div class="bg-surface border rounded p-2 text-sm self-start">.self-start</div>
<div class="bg-surface border rounded p-2 text-sm self-center">.self-center</div>
<div class="bg-surface border rounded p-2 text-sm self-end">.self-end</div>
<div class="bg-surface border rounded p-2 text-sm self-stretch">.self-stretch</div>
</div>
</div>
<!-- Kombinations-Beispiel -->
<div>
<p class="text-sm font-semibold mb-2">Typisches Kompositions-Beispiel</p>
<div class="card">
<div class="card-body flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="avatar avatar-sm">AM</div>
<div>
<p class="font-semibold">Anna Müller</p>
<p class="text-sm text-muted">anna@beispiel.de</p>
</div>
</div>
<span class="badge badge-success">Aktiv</span>
</div>
</div>
<pre class="mt-2"><code class="text-xs">&lt;div class="flex items-center justify-between"&gt;
&lt;div class="flex items-center gap-3"&gt;...&lt;/div&gt;
&lt;span class="badge badge-success"&gt;Aktiv&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</section>
<!-- META LIST -->
<section class="section" id="meta-list">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Meta List / Definition List</h2>
<p class="text-muted">Label-Wert-Paare für Detailseiten, Profile und Systeminfos.</p>
</div>
<div class="demo-preview demo-s69">
<div>
<p class="text-xs text-muted mb-2">Standard (zweispaltig)</p>
<dl class="meta-list">
<div class="meta-item">
<dt class="meta-label">Status</dt>
<dd class="meta-value"><span class="badge badge-success badge-dot">Aktiv</span></dd>
</div>
<div class="meta-item">
<dt class="meta-label">Erstellt am</dt>
<dd class="meta-value">12. Januar 2025</dd>
</div>
<div class="meta-item">
<dt class="meta-label">Verantwortlich</dt>
<dd class="meta-value">
<div class="flex items-center gap-2">
<div class="avatar avatar-sm">AM</div>
Anna Müller
</div>
</dd>
</div>
<div class="meta-item">
<dt class="meta-label">Abteilung</dt>
<dd class="meta-value">Design</dd>
</div>
<div class="meta-item">
<dt class="meta-label">Letzter Login</dt>
<dd class="meta-value text-muted">vor 2 Stunden</dd>
</div>
</dl>
</div>
<div class="grid grid-2">
<div>
<p class="text-xs text-muted mb-2">Gestapelt (.meta-list-stacked)</p>
<dl class="meta-list meta-list-stacked meta-list-flush">
<div class="meta-item">
<dt class="meta-label">Projektname</dt>
<dd class="meta-value">Acme Redesign</dd>
</div>
<div class="meta-item">
<dt class="meta-label">Deadline</dt>
<dd class="meta-value">30. Juni 2025</dd>
</div>
<div class="meta-item">
<dt class="meta-label">Budget</dt>
<dd class="meta-value">€ 24.000</dd>
</div>
</dl>
</div>
<div>
<p class="text-xs text-muted mb-2">Kompakt (.meta-list-compact)</p>
<dl class="meta-list meta-list-compact">
<div class="meta-item">
<dt class="meta-label">Version</dt>
<dd class="meta-value">2.4.1</dd>
</div>
<div class="meta-item">
<dt class="meta-label">Node</dt>
<dd class="meta-value font-mono">20.11.0</dd>
</div>
<div class="meta-item">
<dt class="meta-label">Umgebung</dt>
<dd class="meta-value"><span class="badge badge-info">Staging</span></dd>
</div>
<div class="meta-item">
<dt class="meta-label">Region</dt>
<dd class="meta-value">eu-central-1</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<!-- FILTER CHIPS -->
<section class="section" id="chips">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Filter Chips</h2>
<p class="text-muted">Checkbox- oder Radio-Basis. Kein JavaScript nötig.</p>
</div>
<div class="demo-preview demo-s70">
<div>
<p class="text-xs text-muted mb-2">Mehrfachauswahl (Checkboxen)</p>
<div class="chip-group">
<label class="chip">
<input class="chip-input" type="checkbox" checked>
<span class="chip-label">Design</span>
</label>
<label class="chip">
<input class="chip-input" type="checkbox" checked>
<span class="chip-label">Entwicklung</span>
</label>
<label class="chip">
<input class="chip-input" type="checkbox">
<span class="chip-label">Marketing</span>
</label>
<label class="chip">
<input class="chip-input" type="checkbox">
<span class="chip-label">Vertrieb</span>
</label>
<label class="chip">
<input class="chip-input" type="checkbox" disabled>
<span class="chip-label">Gesperrt</span>
</label>
</div>
</div>
<div>
<p class="text-xs text-muted mb-2">Einzelauswahl (Radio)</p>
<div class="chip-group">
<label class="chip">
<input class="chip-input" type="radio" name="status" checked>
<span class="chip-label">Alle</span>
</label>
<label class="chip">
<input class="chip-input" type="radio" name="status">
<span class="chip-label">Aktiv</span>
</label>
<label class="chip">
<input class="chip-input" type="radio" name="status">
<span class="chip-label">Inaktiv</span>
</label>
<label class="chip">
<input class="chip-input" type="radio" name="status">
<span class="chip-label">Ausstehend</span>
</label>
</div>
</div>
<div>
<p class="text-xs text-muted mb-2">Klein (.chip-sm)</p>
<div class="chip-group chip-sm">
<label class="chip">
<input class="chip-input" type="checkbox" checked>
<span class="chip-label">Q1</span>
</label>
<label class="chip">
<input class="chip-input" type="checkbox">
<span class="chip-label">Q2</span>
</label>
<label class="chip">
<input class="chip-input" type="checkbox">
<span class="chip-label">Q3</span>
</label>
<label class="chip">
<input class="chip-input" type="checkbox">
<span class="chip-label">Q4</span>
</label>
</div>
</div>
</div>
</section>
<!-- TIMELINE -->
<section class="section" id="timeline">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Timeline / Activity Feed</h2>
<p class="text-muted">Vertikales Muster für Logs, Status-Historien und Prozessschritte.</p>
</div>
<div class="demo-preview demo-s71">
<div class="demo-s72">
<p class="text-xs text-muted mb-4">Standard mit Farbvarianten</p>
<div class="timeline">
<div class="timeline-item timeline-success">
<div class="timeline-marker">
<div class="timeline-dot"></div>
<div class="timeline-connector"></div>
</div>
<div class="timeline-content">
<p class="timeline-title">Deployment abgeschlossen</p>
<p class="timeline-meta">vor 2 Stunden</p>
<p class="timeline-body">Version 2.4.1 ist live auf Produktion.</p>
</div>
</div>
<div class="timeline-item timeline-warning">
<div class="timeline-marker">
<div class="timeline-dot"></div>
<div class="timeline-connector"></div>
</div>
<div class="timeline-content">
<p class="timeline-title">Review ausstehend</p>
<p class="timeline-meta">vor 5 Stunden</p>
</div>
</div>
<div class="timeline-item timeline-accent">
<div class="timeline-marker">
<div class="timeline-dot"></div>
<div class="timeline-connector"></div>
</div>
<div class="timeline-content">
<p class="timeline-title">Branch erstellt</p>
<p class="timeline-meta">gestern</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker">
<div class="timeline-dot"></div>
<div class="timeline-connector"></div>
</div>
<div class="timeline-content">
<p class="timeline-title">Ticket eröffnet</p>
<p class="timeline-meta">vor 3 Tagen</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- STEPPER -->
<section class="section" id="stepper">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Stepper / Progress Steps</h2>
<p class="text-muted">Rein visuelle Schrittanzeige. Kein JavaScript nötig.</p>
</div>
<div class="demo-preview demo-s69">
<div>
<p class="text-xs text-muted mb-4">Horizontal</p>
<div class="stepper">
<div class="step step-done">
<div class="step-indicator">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<span class="step-label">Konto</span>
</div>
<div class="step step-done">
<div class="step-indicator">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<span class="step-label">Profil</span>
</div>
<div class="step step-active">
<div class="step-indicator">3</div>
<span class="step-label">Zahlung</span>
</div>
<div class="step">
<div class="step-indicator">4</div>
<span class="step-label">Fertig</span>
</div>
</div>
</div>
<div>
<p class="text-xs text-muted mb-4">Vertikal</p>
<div class="stepper stepper-vertical demo-s44">
<div class="step step-done">
<div class="step-indicator">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div class="step-body">
<p class="step-title">Konto anlegen</p>
<p class="step-desc">E-Mail und Passwort festlegen.</p>
</div>
</div>
<div class="step step-active">
<div class="step-indicator">2</div>
<div class="step-body">
<p class="step-title">Profil ausfüllen</p>
<p class="step-desc">Name, Rolle und Profilbild.</p>
</div>
</div>
<div class="step">
<div class="step-indicator">3</div>
<div class="step-body">
<p class="step-title">Abschließen</p>
<p class="step-desc">Einstellungen bestätigen.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- LIST GROUP / ACTION LIST -->
<section class="section" id="list-group">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>List Group / Action List</h2>
<p class="text-muted">Kompaktes Pattern für Einstellungslisten, Menüs und Inbox-artige Ansichten.</p>
</div>
<div class="demo-preview demo-s73">
<div class="demo-s74">
<p class="text-xs text-muted mb-2">List Group</p>
<ul class="list-group">
<li class="list-item list-item-active">Dashboard</li>
<li class="list-item">Projekte</li>
<li class="list-item">Team</li>
<li class="list-item list-item-muted">Archiv</li>
</ul>
</div>
<div class="demo-s75">
<p class="text-xs text-muted mb-2">Action List</p>
<div class="action-list">
<a href="#" class="action-item">
<svg class="action-item-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
<div class="action-item-content">
<p class="action-item-title">Profil bearbeiten</p>
<p class="action-item-desc">Name, Avatar und Kontakt</p>
</div>
<svg class="action-item-end" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
</a>
<a href="#" class="action-item">
<svg class="action-item-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
<div class="action-item-content">
<p class="action-item-title">Sicherheit</p>
<p class="action-item-desc">Passwort und 2FA</p>
</div>
<svg class="action-item-end" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
</a>
<button class="action-item action-item-danger">
<svg class="action-item-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/></svg>
<div class="action-item-content">
<p class="action-item-title">Konto löschen</p>
</div>
</button>
</div>
</div>
<div class="demo-s74">
<p class="text-xs text-muted mb-2">Kompakt + Flush</p>
<div class="action-list action-list-compact action-list-flush">
<a href="#" class="action-item">Übersicht</a>
<a href="#" class="action-item">Rechnungen</a>
<a href="#" class="action-item">Integrationen</a>
<a href="#" class="action-item">API-Schlüssel</a>
</div>
</div>
</div>
</section>
<!-- RESPONSIVE TABLES -->
<section class="section" id="responsive-tables">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Responsive Table Patterns</h2>
<p class="text-muted">Sticky Header, Sticky erste Spalte, Mobile Key-Value-Stacking (<code>data-label</code> auf <code>td</code> erforderlich).</p>
</div>
<div class="stack">
<div>
<p class="text-xs text-muted mb-2">Sticky Header + Sticky erste Spalte (<code>.table-sticky .table-sticky-col</code>)</p>
<div class="table-wrap demo-s76">
<table class="table-sticky table-sticky-col">
<thead>
<tr><th>Name</th><th>Rolle</th><th>Status</th><th>Abteilung</th><th>Datum</th></tr>
</thead>
<tbody>
<tr><td>Anna Müller</td><td>Admin</td><td><span class="badge badge-success badge-dot">Aktiv</span></td><td>Design</td><td>12.01.2025</td></tr>
<tr><td>Ben Schmidt</td><td>Editor</td><td><span class="badge badge-warning badge-dot">Ausstehend</span></td><td>Entwicklung</td><td>08.03.2025</td></tr>
<tr><td>Clara Hoffmann</td><td>Nutzer</td><td><span class="badge badge-success badge-dot">Aktiv</span></td><td>Marketing</td><td>22.02.2025</td></tr>
<tr><td>David Braun</td><td>Nutzer</td><td><span class="badge badge-danger badge-dot">Gesperrt</span></td><td>Vertrieb</td><td>05.04.2025</td></tr>
<tr><td>Eva Fischer</td><td>Admin</td><td><span class="badge badge-success badge-dot">Aktiv</span></td><td>Design</td><td>17.05.2025</td></tr>
</tbody>
</table>
</div>
</div>
<div>
<p class="text-xs text-muted mb-2">Mobile Key-Value-Stacking (<code>.table-stack</code>) — auf schmalen Viewports als Karten</p>
<div class="table-wrap">
<table class="table-stack">
<thead>
<tr><th>Name</th><th>Rolle</th><th>Status</th><th>Datum</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Name">Anna Müller</td>
<td data-label="Rolle">Admin</td>
<td data-label="Status"><span class="badge badge-success badge-dot">Aktiv</span></td>
<td data-label="Datum">12.01.2025</td>
</tr>
<tr>
<td data-label="Name">Ben Schmidt</td>
<td data-label="Rolle">Editor</td>
<td data-label="Status"><span class="badge badge-warning badge-dot">Ausstehend</span></td>
<td data-label="Datum">08.03.2025</td>
</tr>
<tr>
<td data-label="Name">Clara Hoffmann</td>
<td data-label="Rolle">Nutzer</td>
<td data-label="Status"><span class="badge badge-success badge-dot">Aktiv</span></td>
<td data-label="Datum">22.02.2025</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- DISMISSIBLE ALERT -->
<section class="section" id="dismissible-alert">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Dismissible Alert</h2>
<p class="text-muted">Alert mit Close-Button. Minimales JavaScript — <code>dismissAlert(btn)</code>.</p>
</div>
<div class="demo-preview demo-s77">
<div class="alert alert-success">
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
<div class="alert-content">
<p class="alert-title">Erfolgreich gespeichert</p>
<p>Deine Änderungen wurden übernommen.</p>
</div>
<button class="alert-dismiss" data-action="alert-dismiss" aria-label="Schließen">✕</button>
</div>
<div class="alert alert-warning">
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
<div class="alert-content">
<p class="alert-title">Abo läuft bald ab</p>
<p>Dein Plan endet in 7 Tagen.</p>
</div>
<button class="alert-dismiss" data-action="alert-dismiss" aria-label="Schließen">✕</button>
</div>
<div class="alert alert-danger">
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
<div class="alert-content">
<p class="alert-title">Fehler aufgetreten</p>
<p>Die Verbindung konnte nicht hergestellt werden.</p>
</div>
<button class="alert-dismiss" data-action="alert-dismiss" aria-label="Schließen">✕</button>
</div>
<div class="alert alert-info">
<svg class="alert-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<div class="alert-content">
<p>Neue Funktionen verfügbar — sieh dir die Versionshinweise an.</p>
</div>
<button class="alert-dismiss" data-action="alert-dismiss" aria-label="Schließen">✕</button>
</div>
</div>
</section>
<!-- SORTIERBARE TABELLEN -->
<section class="section" id="sortable-table">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Sortierbare Tabellen</h2>
<p class="text-muted"><code>.table-sortable</code> auf <code>&lt;table&gt;</code>, <code>data-action="sort"</code> und <code>data-sort=""</code> auf sortierbaren <code>&lt;th&gt;</code>.</p>
</div>
<div class="demo-preview">
<div class="table-wrap demo-s78">
<table class="table-sortable">
<thead>
<tr>
<th data-action="sort" data-sort="">Name</th>
<th data-action="sort" data-sort="">Abteilung</th>
<th>Status</th>
<th data-action="sort" data-sort="">Datum</th>
<th data-action="sort" data-sort="">Betrag</th>
</tr>
</thead>
<tbody>
<tr><td>Anna Müller</td><td>Design</td><td><span class="badge badge-success badge-dot">Aktiv</span></td><td>12.01.2025</td><td>€ 4.200</td></tr>
<tr><td>Ben Schmidt</td><td>Entwicklung</td><td><span class="badge badge-warning badge-dot">Ausstehend</span></td><td>08.03.2025</td><td>€ 6.800</td></tr>
<tr><td>Clara Hoffmann</td><td>Marketing</td><td><span class="badge badge-success badge-dot">Aktiv</span></td><td>22.02.2025</td><td>€ 3.100</td></tr>
<tr><td>David Braun</td><td>Vertrieb</td><td><span class="badge badge-danger badge-dot">Gesperrt</span></td><td>05.04.2025</td><td>€ 5.500</td></tr>
<tr><td>Eva Fischer</td><td>Design</td><td><span class="badge badge-success badge-dot">Aktiv</span></td><td>17.05.2025</td><td>€ 2.900</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- TOOLTIP -->
<section class="section" id="tooltip">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Tooltip</h2>
<p class="text-muted">CSS-only via <code>data-tooltip="..."</code>. Position über <code>data-tooltip-pos="top|bottom|left|right"</code> (Standard: top).</p>
</div>
<div class="demo-preview demo-s79">
<button class="btn btn-secondary" data-tooltip="Standardposition oben">
Hover mich (oben)
</button>
<button class="btn btn-secondary" data-tooltip="Position unten" data-tooltip-pos="bottom">
Hover mich (unten)
</button>
<button class="btn btn-secondary" data-tooltip="Position links" data-tooltip-pos="left">
Hover mich (links)
</button>
<button class="btn btn-secondary" data-tooltip="Position rechts" data-tooltip-pos="right">
Hover mich (rechts)
</button>
<span data-tooltip="Funktioniert auf jedem Element" class="badge badge-info demo-s80">
Badge mit Tooltip
</span>
<button class="btn btn-ghost btn-icon" data-tooltip="Einstellungen öffnen" aria-label="Einstellungen">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
</button>
</div>
</section>
<!-- TOAST -->
<section class="section" id="toast">
<div class="section-header">
<p class="section-label">Komponenten</p>
<h2>Toast</h2>
<p class="text-muted"><code>showToast(message, type)</code> — automatisch nach 4s entfernt, manuell über ✕ schließbar.</p>
</div>
<div class="demo-preview">
<button class="btn btn-secondary" data-action="demo-toast">Toast auslösen</button>
</div>
</section>
</div><!-- /stack -->
</main>
</div><!-- /docs-layout -->
<!-- MODALS -->
<div class="modal-backdrop" id="demo-modal" data-action="modal-backdrop">
<div class="modal">
<div class="modal-header">
<h3>Modal Titel</h3>
<button class="btn btn-ghost btn-icon btn-sm" data-action="modal-close" data-target="demo-modal">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</div>
<div class="modal-body stack">
<p class="text-muted">Modal-Inhalt hier. Formulare, Informationen oder komplexe Inhalte können hier platziert
werden.</p>
<div class="form-group">
<label>Beispielfeld</label>
<input type="text" placeholder="Eingabe…">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-ghost" data-action="modal-close" data-target="demo-modal">Abbrechen</button>
<button class="btn btn-primary">Bestätigen</button>
</div>
</div>
</div>
<div class="modal-backdrop" id="confirm-modal" data-action="modal-backdrop">
<div class="modal modal-sm">
<div class="modal-header">
<h3>Eintrag löschen?</h3>
</div>
<div class="modal-body">
<p class="text-muted">Diese Aktion kann nicht rückgängig gemacht werden. Der Eintrag wird permanent gelöscht.
</p>
</div>
<div class="modal-footer">
<button class="btn btn-ghost" data-action="modal-close" data-target="confirm-modal">Abbrechen</button>
<button class="btn btn-danger" data-action="modal-close" data-target="confirm-modal">Löschen</button>
</div>
</div>
</div>
<!-- TOAST CONTAINER -->
<div class="toast-container" id="toast-container"></div>
<script src="framework.min.js"></script>
<script src="demo.js"></script>
</body>
</html>