<div class="bg-primary-500 on-primary-500">Automatischer Kontrast</div>

// color-scale() Funktion
.mein-element {
  background: color-scale("primary", 100);
  color:      color-scale("primary", 800);
}

// CSS Custom Properties
.badge {
  background: var(--color-success-100);
  color:      var(--color-success-800);
}

<h1>Headline 1</h1>

<p class="font-black">font-black (900)</p>

$spacing-base: 0.25rem !default;
$spacings: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 20, 24, 28, 32, 36, 40, 48, 56, 64) !default;

<div class="p-4 bg-surface-100">Innenabstand (1rem)</div>
<div class="m-4 bg-surface-100">Außenabstand (1rem)</div>

<div class="d-flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="row">
  <div class="col-12">...</div>
  <div class="col-12">...</div>
</div>

<div class="grid grid-cols-12 gap-4">
  <div class="col-span-4">4 Spalten</div>
  <div class="col-span-8">8 Spalten</div>
</div>

<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem;">
          <div>Auto-Fit (min 180px)</div>
          <div>Auto-Fit (min 180px)</div>
          <div>Auto-Fit (min 180px)</div>
        </div>

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>

<button class="btn btn-outline-primary">Outline</button>

<button class="btn btn-ghost-primary">Ghost</button>

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-loading">Loading</button>
<div class="btn-group">
  <button class="btn btn-outline-secondary">A</button>
  <button class="btn btn-outline-secondary">B</button>
</div>

<span class="badge badge-primary">Primary</span>
<span class="badge badge-soft-success badge-pill">Soft Pill</span>
<span class="badge badge-dot badge-danger"></span>

<div class="alert alert-success">
  <div class="alert-content">
    <div class="alert-title">Erfolg!</div>
    <p class="alert-text">Aktion abgeschlossen.</p>
  </div>
  <button class="alert-close">✕</button>
</div>

<div class="card">
  <div class="card-header">
    <h4 class="card-title">Header Titel</h4>
  </div>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Inhalt der Karte...</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary">Speichern</button>
  </div>
</div>

<!-- Mit Badge & Media -->
<div class="card">
  <span class="card-badge">Neu</span>
  <div class="card-media card-media-sm">
    <img src="image.jpg" alt="...">
  </div>
  <div class="card-body">...</div>
</div>

<!-- Overlay Card -->
<div class="card">
  <div class="card-media card-media-lg">
    <img src="image.jpg" alt="...">
    <div class="card-media-overlay">
      <h4 class="card-title">Overlay Header</h4>
    </div>
  </div>
</div>

<div class="card-primary">...</div>
<div class="card-solid-primary">...</div>

<div class="form-group">
  <label class="form-label required" for="email">E-Mail-Adresse</label>
  <input type="email" id="email" class="form-control" placeholder="max@example.com">
  <span class="form-hint">Hinweistext hier...</span>
</div>

<div class="form-group">
  <label class="form-label" for="bio">Biografie</label>
  <textarea id="bio" class="form-control"></textarea>
</div>

<input type="text" class="form-control form-control-sm" placeholder="Small">
<input type="text" class="form-control" placeholder="Default">
<input type="text" class="form-control form-control-lg" placeholder="Large">
<input type="text" class="form-control-plaintext" readonly value="Nur Text">

<select class="form-select">
  <option value="1">Option 1</option>
</select>

<select class="form-select" multiple size="3">
  <option value="1">Option A</option>
</select>

<!-- Checkbox -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="c1" checked>
  <label class="form-check-label" for="c1">Checkbox Label</label>
</div>

<!-- Radio Inline -->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="r" id="r1" checked>
  <label class="form-check-label" for="r1">Radio Label</label>
</div>

<div class="form-switch">
  <input class="form-check-input" type="checkbox" id="switch1" checked>
  <label class="form-check-label" for="switch1">Toggle Text</label>
</div>

<label class="form-label" for="r">Wert: 50%</label>
<input type="range" class="form-range" id="r" min="0" max="100" value="50">

<!-- Valid -->
<input type="text" class="form-control is-valid" value="OK">
<div class="valid-feedback">Erfolgreich!</div>

<!-- Invalid -->
<input type="text" class="form-control is-invalid" value="Fehler">
<div class="invalid-feedback">Fehlermeldung!</div>

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Suche...">
  <button class="btn btn-primary">Suchen</button>
</div>

<div class="form-floating">
  <input type="email" class="form-control" id="f-email" placeholder="name@example.com">
  <label for="f-email">E-Mail-Adresse</label>
</div>

<!-- Inline -->
<form class="form-inline">
  <div class="form-group">
    <label class="form-label">Name</label>
    <input type="text" class="form-control">
  </div>
  <button class="btn btn-primary">OK</button>
</form>

<!-- Horizontal -->
<form class="form-horizontal">
  <div class="form-group">
    <label class="form-label">E-Mail</label>
    <div class="form-control-wrap">
      <input type="email" class="form-control">
    </div>
  </div>
</form>

<div class="form-card">
  <div class="form-card-title">Titel</div>
  <div class="form-card-subtitle">Untertitel</div>
  
  <fieldset>
    <legend>Upload</legend>
    <input type="file" class="form-file">
  </fieldset>

  <div class="form-card-footer">
    <button class="btn btn-secondary">Abbrechen</button>
    <button class="btn btn-primary">Speichern</button>
  </div>
</div>

<nav class="navbar navbar-light">
  <a href="#" class="navbar-brand">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
    Brand
  </a>
  <button class="navbar-toggler" onclick="toggleNavbar('navLight')" aria-expanded="false">
    <span class="toggler-bar"></span>
    <span class="toggler-bar"></span>
    <span class="toggler-bar"></span>
  </button>
  <div class="navbar-collapse" id="navLight">
    <div>
      <ul class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
        <li class="nav-item-dropdown">
          <a href="#" class="nav-link has-dropdown">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a href="#" class="dropdown-item">Aktion 1</a></li>
            <li><a href="#" class="dropdown-item">Aktion 2</a></li>
            <li class="dropdown-divider"></li>
            <li><a href="#" class="dropdown-item danger">Löschen</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="navbar-actions">
    <a href="#" class="btn btn-primary">Anmelden</a>
  </div>
</nav>

<nav class="navbar navbar-dark">...</nav>

<div class="hero-simulation">
  <nav class="navbar navbar-transparent">
   ...
  </nav>
  <div style="padding: 3rem 1rem; text-align: center;">
    <h2>Hero Section Content</h2>
    <p>Die transparente Navbar liegt nahtlos über dem Hintergrund-Gefälle.</p>
  </div>
</div>

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-header">
      <div>
        <h3 class="modal-title">Modal-Titel</h3>
        <p class="modal-subtitle">Optionaler Untertitel</p>
      </div>
      <button class="modal-close" onclick="closeModal('myModal')">&times;</button>
    </div>
    <div class="modal-body">
      <p>Inhalt des Dialogs...</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('myModal')">Abbrechen</button>
      <button class="btn btn-primary">Speichern</button>
    </div>
  </div>
</div>

<div class="modal modal-scrollable" id="scrollModal">
  <div class="modal-dialog">...</div>
</div>

<div class="modal-footer modal-footer-between">
  <button class="btn btn-danger">Löschen</button>
  <div>
    <button class="btn btn-secondary">Abbrechen</button>
    <button class="btn btn-primary">Speichern</button>
  </div>
</div>

<div class="modal-backdrop" id="drawerBackdrop"></div>
<div class="drawer" id="drawerRight">
  <div class="drawer-dialog">
    <div class="modal-header">
      <h3 class="modal-title">Seitenleiste Rechts</h3>
      <button class="modal-close">&times;</button>
    </div>
    <div class="modal-body">Inhalt...</div>
  </div>
</div>

function setScrollLock(lock) {
  document.body.style.overflow = lock ? 'hidden' : '';
}

function openModal(id) {
  const modal = document.getElementById(id);
  if (modal) {
    modal.classList.add('is-open');
    setScrollLock(true);
  }
}

function closeModal(id) {
  const modal = document.getElementById(id);
  if (modal) {
    modal.classList.remove('is-open');
    const openModals = document.querySelectorAll('.modal.is-open, .drawer.is-open');
    if (openModals.length === 0) setScrollLock(false);
  }
}

function openDrawer(id) {
  const drawer = document.getElementById(id);
  const backdrop = document.getElementById('drawerBackdrop');
  if (drawer && backdrop) {
    backdrop.classList.add('is-visible');
    drawer.classList.add('is-open');
    setScrollLock(true);
  }
}

function closeDrawer(id) {
  const drawer = document.getElementById(id);
  const backdrop = document.getElementById('drawerBackdrop');
  if (drawer) drawer.classList.remove('is-open');
  
  const openDrawers = document.querySelectorAll('.drawer.is-open');
  if (openDrawers.length === 0 && backdrop) {
    backdrop.classList.remove('is-visible');
  }

  const openModals = document.querySelectorAll('.modal.is-open, .drawer.is-open');
  if (openModals.length === 0) setScrollLock(false);
}

document.addEventListener('click', (e) => {
  if (e.target.classList.contains('modal') && e.target.classList.contains('is-open')) {
    closeModal(e.target.id);
  }
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    const openModalEl = document.querySelector('.modal.is-open');
    if (openModalEl) closeModal(openModalEl.id);
    document.querySelectorAll('.drawer.is-open').forEach(drawer => closeDrawer(drawer.id));
  }
});

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Benutzer</th>
      <th>Rolle</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Max Mustermann</td>
      <td>Administrator</td>
      <td><span class="badge badge-success">Aktiv</span></td>
    </tr>
  </tbody>
</table>

<div class="table-responsive">
  <table class="table table-bordered table-sm">
    <thead>
      <tr><th>ID</th><th>Produkt</th><th>Preis</th></tr>
    </thead>
    <tbody>
      <tr><td>101</td><td>Software Lizenz</td><td>49,99 €</td></tr>
    </tbody>
  </table>
</div>

<div class="table-card">
  <div class="table-card-header">
    <h4 class="table-card-title">Titel</h4>
  </div>
  <table class="table table-hover">
    <!-- Tabellen-Inhalt -->
  </table>
  <div class="table-card-footer">
    <span>Info-Text</span>
    <ul class="pagination pagination-sm">
      <li class="page-item disabled"><a class="page-link" href="#">&laquo;</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
    </ul>
  </div>
</div>

<!-- Avatare und Status-Anzeigen -->
<div class="avatar avatar-lg">
  <img src="avatar.jpg" alt="User">
  <span class="avatar-status status-online"></span>
</div>

<!-- Avatar Gruppe -->
<div class="avatar-group">
  <div class="avatar avatar-sm">JD</div>
  <div class="avatar avatar-sm">AS</div>
  <div class="avatar avatar-sm avatar-more">+3</div>
</div>

<!-- Tooltip Attribut-Nutzung -->
<button class="btn" data-tooltip="Das ist ein Hilfetext">Hover mich</button>

<div class="jumbotron">
  <div class="jumbotron-inner">
    <span class="jumbotron-eyebrow">Neu erschienen</span>
    <h1 class="jumbotron-title">Titel mit <em>Akzent</em></h1>
    <p class="jumbotron-lead">Einleitungstext für die Landing-Page...</p>
    <div class="jumbotron-actions">
      <button class="btn btn-primary">Starten</button>
    </div>
    <div class="jumbotron-meta">
      <span>✓ Feature 1</span>
    </div>
  </div>
</div>

<div class="feature-grid">
  <div class="feature-card">
    <div class="feature-icon">⚡</div>
    <h3 class="feature-title">Feature Titel</h3>
    <p class="feature-text">Beschreibungstext des Features.</p>
    <a href="#" class="feature-link">Mehr erfahren</a>
  </div>
</div>

<div class="pricing-grid">
  <div class="pricing-card pricing-card-featured">
    <span class="pricing-badge">Empfohlen</span>
    <div class="pricing-plan">Pro</div>
    <div class="pricing-price">
      <span class="price-currency">€</span>
      <span class="price-amount">29</span>
      <span class="price-period">/ Mon.</span>
    </div>
    <p class="pricing-desc">Beschreibungstext...</p>
    <div class="pricing-divider"></div>
    <ul class="pricing-features">
      <li>Integrierte Funktion</li>
    </ul>
    <button class="btn btn-primary btn-block">Auswählen</button>
  </div>
</div>

<ul class="timeline">
  <li class="timeline-item is-done">
    <div class="timeline-dot"></div>
    <div class="timeline-date">Datum / Phase</div>
    <h4 class="timeline-title">Titel</h4>
    <p class="timeline-body">Inhaltstext...</p>
  </li>
</ul>

<article class="article-card">
  <span class="article-category-pill">Tech</span>
  <button class="article-bookmark">&#9733;</button>
  <div class="article-media"><img src="..." alt="" /></div>
  <div class="article-body">
    <a href="#" class="article-category">Kategorie</a>
    <a href="#" class="article-title">Artikel Überschrift</a>
    <p class="article-teaser">Teaser Text...</p>
    <div class="article-meta">
      <div class="article-author">
        <div class="author-avatar">MM</div>
        <span>Autor Name</span>
      </div>
      <span class="article-date">Datum</span>
      <span class="article-read-time">3 Min</span>
    </div>
  </div>
</article>

<div class="article-grid-magazine">
  <article class="article-card"> ... </article>
  <article class="article-card article-card-sm"> ... </article>
</div>

<div class="news-feed">
  <div class="news-feed-header">
    <h4 class="news-feed-title">Titel</h4>
    <a href="#" class="news-feed-link">Link</a>
  </div>
  <a href="#" class="news-item is-breaking">
    <span class="news-item-rank">1</span>
    <div class="news-item-content">
      <span class="news-item-category">Kategorie</span>
      <div class="news-item-title">Artikel Titel</div>
    </div>
  </a>
</div>

<div class="breaking-banner">
  <span class="breaking-label">Eilmeldung</span>
  <span class="breaking-text">Wichtige Entwicklungen im Sektor angekündigt.</span>
  <a href="#" class="breaking-link">Mehr erfahren</a>
  <button class="breaking-close">&times;</button>
</div>

<div class="cta-section cta-section-primary">
  <h3 class="cta-title">Bereit für den <em>Durchbruch</em>?</h3>
  <p class="cta-text">Starte noch heute dein Projekt mit unserem Framework.</p>
  <div class="cta-actions">
    <button class="btn btn-white">Jetzt starten</button>
  </div>
  <div class="cta-note">Keine Kreditkarte erforderlich</div>
</div>

<div class="testimonials-grid">
  <div class="testimonial-card">
    <div class="testimonial-stars">★★★★★</div>
    <div class="testimonial-quote">Das Framework hat unsere Entwicklungszeit verkürzt!</div>
    <div class="testimonial-author">
      <div class="testimonial-avatar">JD</div>
      <div>
        <div class="testimonial-name">John Doe</div>
        <div class="testimonial-role">Senior Developer</div>
      </div>
    </div>
  </div>
</div>

<ul class="faq-list">
  <li class="faq-item">
    <button class="faq-question is-open">
      <span>Wie kann ich das Framework installieren?</span>
      <span class="faq-icon">+</span>
    </button>
    <div class="faq-answer is-open">
      <p>Du kannst das Framework direkt über npm oder CDN einbinden.</p>
    </div>
  </li>
</ul>

<div class="product-card">
  <div class="product-media">
    <span class="product-badge product-badge-sale">Sale</span>
    [ Produktbild ]
  </div>
  <div class="product-body">
    <span class="product-category">Kategorie</span>
    <a href="#" class="product-name">Produktname</a>
    <div class="product-price">
      <span class="price-current">99,99 €</span>
      <span class="price-original">129,99 €</span>
    </div>
  </div>
  <div class="product-footer">
    <button class="btn btn-primary btn-sm btn-block">Kaufen</button>
  </div>
</div>

<section class="fullscreen fs-hero fs-hero-left fs-bg-gradient-forest">
  <div class="fs-hero-content">
    <div class="fs-badge"><span class="fs-badge-dot"></span> Badge</div>
    <h1 class="fs-title">Titel</h1>
    <p class="fs-subtitle">Untertitel...</p>
  </div>
</section>

<blockquote class="quote">
  <p class="quote-text">Zitattext hier...</p>
  <footer class="quote-footer">
    <img src="avatar.jpg" class="quote-avatar" alt="Author">
    <span class="quote-author">Autor Name</span>
    <cite class="quote-source">Quelle / Buchtitel</cite>
  </footer>
</blockquote>

<blockquote class="quote quote-bordered quote-primary"> ... </blockquote>
<blockquote class="quote quote-highlight quote-warning"> ... </blockquote>

<blockquote class="quote quote-card quote-primary"> ... </blockquote>
<blockquote class="quote quote-pull"> ... </blockquote>

<blockquote class="quote quote-speech quote-primary"> ... </blockquote>
<blockquote class="quote quote-sm"> ... </blockquote>
<blockquote class="quote quote-lg"> ... </blockquote>

<button class="theme-toggle-btn" data-theme-toggle title="Theme wechseln" aria-label="Theme wechseln" data-theme-current="auto">
  <svg class="theme-toggle-icon" data-theme-icon width="16" height="16" fill="currentColor" viewBox="0 0 16 16"></svg>
</button>

<button class="theme-toggle-btn theme-toggle-btn--sm">...</button>
<button class="theme-toggle-btn theme-toggle-btn--lg">...</button>
<button class="theme-toggle-btn theme-toggle-btn--square">...</button>

<div class="p-4 bg-primary-20 text-primary rounded border border-dashed">Transparenter Hintergrund</div>
<div class="p-4 rounded shadow-lg">Schatten-Box</div>

<div class="d-flex justify-between items-center">
  <div>Linkes Flex-Element</div>
  <div>Rechtes Flex-Element</div>
</div>

<h3 class="h3">Überschrift</h3>
<p class="lead">Einleitungstext...</p>
<p class="text-muted italic">Hinweis...</p>