<nk-btn variant="primary">Speichern</nk-btn>
<nk-btn variant="secondary">Abbrechen</nk-btn>
<nk-btn variant="danger" small>Löschen</nk-btn>

<button class="nk-btn primary">Speichern</button>
<button class="nk-btn secondary">Abbrechen</button>
<button class="nk-btn danger small">Löschen</button>

<nk-input name="name" value="Ada Lovelace" placeholder="Anzeigename"></nk-input>

<input class="nk-input" name="name" value="Ada Lovelace" placeholder="Anzeigename">

<div style="max-width:340px"><nk-copy-field value="https://monahilft.notionkit.app" copy-label="Kopieren"></nk-copy-field></div>
<div style="max-width:340px;margin-top:10px"><nk-copy-field value="ntn_4f2a9c1e8b7d6a5f3e2c" secret mono copy-label="Kopieren" show-label="Zeigen"></nk-copy-field></div>
<div style="max-width:340px;margin-top:10px"><nk-copy-field value="ntn_4f2a9c1e8b7d6a5f3e2c" secret mono icons copy-label="Kopieren" show-label="Zeigen"></nk-copy-field></div>

<div style="max-width:340px"><div class="nk-copy-field"><span class="cf-value">https://monahilft.notionkit.app</span><button class="cf-btn" aria-label="Kopieren"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 9V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4"/><rect x="9" y="9" width="12" height="12" rx="2"/></svg><span>Kopieren</span></button></div></div>
<div style="max-width:340px;margin-top:10px"><div class="nk-copy-field mono"><span class="cf-value">••••••••••••••••••••••••</span><button class="cf-btn" aria-label="Zeigen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg><span>Zeigen</span></button><button class="cf-btn" aria-label="Kopieren"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 9V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4"/><rect x="9" y="9" width="12" height="12" rx="2"/></svg><span>Kopieren</span></button></div></div>
<div style="max-width:340px;margin-top:10px"><div class="nk-copy-field mono icons"><span class="cf-value">••••••••••••••••••••••••</span><button class="cf-btn" aria-label="Zeigen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg><span>Zeigen</span></button><button class="cf-btn" aria-label="Kopieren"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 9V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4"/><rect x="9" y="9" width="12" height="12" rx="2"/></svg><span>Kopieren</span></button></div></div>

AL

Bild hochladen

Bild ändernEntfernen

<nk-image-picker initials="AL" choose-label="Bild hochladen"></nk-image-picker>
<nk-image-picker square src="/favicon.svg" change-label="Bild ändern" remove-label="Entfernen"></nk-image-picker>

<div class="nk-profile-row"><div class="big-avatar">AL</div><div class="pr-actions"><button class="nk-btn secondary small">Bild hochladen</button></div></div>
<div class="nk-profile-row"><div class="big-avatar square"><img src="/favicon.svg" alt=""></div><div class="pr-actions"><button class="nk-btn secondary small">Bild ändern</button><button class="nk-btn secondary small pr-remove">Entfernen</button></div></div>

<div style="display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start">
<div class="nk-pop"><nk-calendar name="due" value="2026-06-02T09:30" time clearable weeks week-start="1" weekend="6,0" today="2026-06-17" today-label="Heute" time-label="Uhrzeit" clear-label="Löschen" days='{"2026-06-04":{"off":true,"label":"Fronleichnam"},"2026-06-02":{"marks":["blue"]},"2026-06-11":{"marks":["orange","red"]},"2026-06-24":{"marks":["green"]}}'></nk-calendar></div>
<div class="nk-pop"><nk-calendar name="sprint" range value="2026-06-08/2026-06-12" weeks week-start="1" weekend="6,0" today="2026-06-17" today-label="Heute" days='{"2026-06-04":{"off":true,"label":"Fronleichnam"}}'></nk-calendar></div>
</div>

<div style="display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start">
<div class="nk-pop">
  <div class="nk-calendar weeks">
    <div class="cal-head"><div class="cal-title">Juni 2026</div><button class="cal-nav">Heute</button><button class="cal-nav" aria-label="Voriger Monat"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><button class="cal-nav" aria-label="Nächster Monat"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div>
    <div class="cal-grid">
      <span class="cal-wd">KW</span><span class="cal-wd">Mo</span><span class="cal-wd">Di</span><span class="cal-wd">Mi</span><span class="cal-wd">Do</span><span class="cal-wd">Fr</span><span class="cal-wd">Sa</span><span class="cal-wd">So</span>
      <span class="cal-week">23</span><button class="cal-day">1</button><button class="cal-day selected">2<span class="cal-marks"><i class="blue"></i></span></button><button class="cal-day">3</button><button class="cal-day off" title="Fronleichnam">4</button><button class="cal-day">5</button><button class="cal-day off">6</button><button class="cal-day off">7</button>
      <span class="cal-week">24</span><button class="cal-day">8</button><button class="cal-day">9</button><button class="cal-day">10</button><button class="cal-day">11<span class="cal-marks"><i class="orange"></i><i class="red"></i></span></button><button class="cal-day">12</button><button class="cal-day off">13</button><button class="cal-day off">14</button>
      <span class="cal-week">25</span><button class="cal-day">15</button><button class="cal-day">16</button><button class="cal-day today">17</button><button class="cal-day">18</button><button class="cal-day">19</button><button class="cal-day off">20</button><button class="cal-day off">21</button>
      <span class="cal-week">26</span><button class="cal-day">22</button><button class="cal-day">23</button><button class="cal-day">24<span class="cal-marks"><i class="green"></i></span></button><button class="cal-day">25</button><button class="cal-day">26</button><button class="cal-day off">27</button><button class="cal-day off">28</button>
      <span class="cal-week">27</span><button class="cal-day">29</button><button class="cal-day">30</button><button class="cal-day out">1</button><button class="cal-day out">2</button><button class="cal-day out">3</button><button class="cal-day out off">4</button><button class="cal-day out off">5</button>
      <span class="cal-week">28</span><button class="cal-day out">6</button><button class="cal-day out">7</button><button class="cal-day out">8</button><button class="cal-day out">9</button><button class="cal-day out">10</button><button class="cal-day out off">11</button><button class="cal-day out off">12</button>
    </div>
    <div class="cal-foot"><input class="nk-input" type="time" value="09:30" aria-label="Uhrzeit"><button class="cal-nav">Löschen</button></div>
  </div>
</div>
<div class="nk-pop">
  <div class="nk-calendar weeks">
    <div class="cal-head"><div class="cal-title">Juni 2026</div><button class="cal-nav">Heute</button><button class="cal-nav" aria-label="Voriger Monat"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><button class="cal-nav" aria-label="Nächster Monat"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div>
    <div class="cal-grid">
      <span class="cal-wd">KW</span><span class="cal-wd">Mo</span><span class="cal-wd">Di</span><span class="cal-wd">Mi</span><span class="cal-wd">Do</span><span class="cal-wd">Fr</span><span class="cal-wd">Sa</span><span class="cal-wd">So</span>
      <span class="cal-week">23</span><button class="cal-day">1</button><button class="cal-day">2</button><button class="cal-day">3</button><button class="cal-day off" title="Fronleichnam">4</button><button class="cal-day">5</button><button class="cal-day off">6</button><button class="cal-day off">7</button>
      <span class="cal-week">24</span><button class="cal-day start">8</button><button class="cal-day in-range">9</button><button class="cal-day in-range">10</button><button class="cal-day in-range">11</button><button class="cal-day end">12</button><button class="cal-day off">13</button><button class="cal-day off">14</button>
      <span class="cal-week">25</span><button class="cal-day">15</button><button class="cal-day">16</button><button class="cal-day today">17</button><button class="cal-day">18</button><button class="cal-day">19</button><button class="cal-day off">20</button><button class="cal-day off">21</button>
      <span class="cal-week">26</span><button class="cal-day">22</button><button class="cal-day">23</button><button class="cal-day">24</button><button class="cal-day">25</button><button class="cal-day">26</button><button class="cal-day off">27</button><button class="cal-day off">28</button>
      <span class="cal-week">27</span><button class="cal-day">29</button><button class="cal-day">30</button><button class="cal-day out">1</button><button class="cal-day out">2</button><button class="cal-day out">3</button><button class="cal-day out off">4</button><button class="cal-day out off">5</button>
      <span class="cal-week">28</span><button class="cal-day out">6</button><button class="cal-day out">7</button><button class="cal-day out">8</button><button class="cal-day out">9</button><button class="cal-day out">10</button><button class="cal-day out off">11</button><button class="cal-day out off">12</button>
    </div>
  </div>
</div>
</div>

<nk-textarea name="bio" rows="3" placeholder="Ein Satz über dich"></nk-textarea>

<textarea class="nk-textarea" name="bio" rows="3" placeholder="Ein Satz über dich"></textarea>

<nk-select name="role" value="editor">
  <option value="viewer">Betrachter</option>
  <option value="editor">Bearbeiter</option>
  <option value="admin">Admin</option>
</nk-select>

<select class="nk-select" name="role">
  <option value="viewer">Betrachter</option>
  <option value="editor" selected>Bearbeiter</option>
  <option value="admin">Admin</option>
</select>

<div style="display:flex;gap:20px;flex-wrap:wrap;align-items:center"><nk-switch name="notify" checked label="E-Mail-Benachrichtigungen"></nk-switch>
<nk-switch name="planned" checked>Geplant</nk-switch><nk-switch name="progress">In Arbeit</nk-switch><nk-switch name="done" text="Erledigt" checked></nk-switch></div>

<div style="display:flex;gap:20px;flex-wrap:wrap;align-items:center"><button class="nk-switch" role="switch" aria-checked="true" aria-label="E-Mail-Benachrichtigungen"></button>
<label class="nk-switch-label"><button class="nk-switch" role="switch" aria-checked="true"></button><span>Geplant</span></label><label class="nk-switch-label"><button class="nk-switch" role="switch" aria-checked="false"></button><span>In Arbeit</span></label><label class="nk-switch-label"><button class="nk-switch" role="switch" aria-checked="true"></button><span>Erledigt</span></label></div>

<nk-check indeterminate>Alle</nk-check>
<nk-check name="digest" value="weekly" checked>Wöchentliche Zusammenfassung</nk-check>
<nk-check name="digest" value="mentions">Nur Erwähnungen</nk-check>

<label class="nk-check"><input type="checkbox">Alle</label><script>document.currentScript.previousElementSibling.querySelector('input').indeterminate = true</script>
<label class="nk-check"><input type="checkbox" name="digest" value="weekly" checked>Wöchentliche Zusammenfassung</label>
<label class="nk-check"><input type="checkbox" name="digest" value="mentions">Nur Erwähnungen</label>

<nk-radio name="style" value="concise">Knapp</nk-radio>
<nk-radio name="style" value="balanced" checked>Ausgewogen</nk-radio>
<nk-radio name="style" value="detailed">Ausführlich</nk-radio>

<label class="nk-check"><input type="radio" name="style" value="concise">Knapp</label>
<label class="nk-check"><input type="radio" name="style" value="balanced" checked>Ausgewogen</label>
<label class="nk-check"><input type="radio" name="style" value="detailed">Ausführlich</label>

<nk-slider name="size" min="12" max="18" value="14" unit="px" show-value></nk-slider>

<input type="range" class="nk-slider" name="size" min="12" max="18" value="14"><div class="nk-slider-value">14px</div>

<nk-field label="Anzeigename" desc="Erscheint neben deinen Kommentaren.">
  <nk-input value="Ada Lovelace"></nk-input>
</nk-field>
<nk-field label="E-Mail-Benachrichtigungen">
  <nk-switch checked></nk-switch>
</nk-field>
<nk-field label="Kurzprofil" stacked>
  <nk-textarea rows="2" placeholder="Ein Satz über dich"></nk-textarea>
</nk-field>

<div class="nk-field">
  <div><div class="f-label">Anzeigename</div><div class="f-desc">Erscheint neben deinen Kommentaren.</div></div>
  <div class="f-control"><input class="nk-input" value="Ada Lovelace"></div>
</div>
<div class="nk-field">
  <div><div class="f-label">E-Mail-Benachrichtigungen</div></div>
  <div class="f-control"><button class="nk-switch" role="switch" aria-checked="true"></button></div>
</div>
<div class="nk-field stacked">
  <div><div class="f-label">Kurzprofil</div></div>
  <div class="f-control"><textarea class="nk-textarea wide" rows="2" placeholder="Ein Satz über dich"></textarea></div>
</div>

<nk-fields>
  <nk-field label="Anzeigename"><nk-input value="Ada Lovelace"></nk-input></nk-field>
  <nk-field label="E-Mail"><nk-input value="ada@acme.com"></nk-input></nk-field>
  <nk-field label="Rolle"><nk-select value="editor"><option value="viewer">Betrachter</option><option value="editor">Bearbeiter</option></nk-select></nk-field>
</nk-fields>

<div class="nk-fields">
  <div class="nk-field"><div><div class="f-label">Anzeigename</div></div><div class="f-control"><input class="nk-input" value="Ada Lovelace"></div></div>
  <div class="nk-field"><div><div class="f-label">E-Mail</div></div><div class="f-control"><input class="nk-input" value="ada@acme.com"></div></div>
  <div class="nk-field"><div><div class="f-label">Rolle</div></div><div class="f-control"><select class="nk-select"><option>Betrachter</option><option selected>Bearbeiter</option></select></div></div>
</div>

<nk-tag>Nicht begonnen</nk-tag> <nk-tag color="brown">Archiv</nk-tag> <nk-tag color="orange">Geplant</nk-tag> <nk-tag color="yellow">Review</nk-tag> <nk-tag color="green">Erledigt</nk-tag> <nk-tag color="blue">In Arbeit</nk-tag> <nk-tag color="purple">Design</nk-tag> <nk-tag color="pink">Idee</nk-tag> <nk-tag color="red">Blockiert</nk-tag>

<span class="nk-tag">Nicht begonnen</span> <span class="nk-tag brown">Archiv</span> <span class="nk-tag orange">Geplant</span> <span class="nk-tag yellow">Review</span> <span class="nk-tag green">Erledigt</span> <span class="nk-tag blue">In Arbeit</span> <span class="nk-tag purple">Design</span> <span class="nk-tag pink">Idee</span> <span class="nk-tag red">Blockiert</span>

<nk-progress value="72" label="72%"></nk-progress>
<div class="nk-panel" style="margin-top:12px"><h3>Fortschritt</h3><nk-progress value="40" label="40 %" wide></nk-progress></div>

<span class="nk-progress-row"><span class="nk-progress"><i style="width:72%"></i></span><span class="nk-progress-label">72%</span></span>
<div class="nk-panel" style="margin-top:12px"><h3>Fortschritt</h3><span class="nk-progress-row"><span class="nk-progress wide"><i style="width:40%"></i></span><span class="nk-progress-label">40 %</span></span></div>

<nk-callout icon="💡"><b>Core idea:</b> Ein Callout trägt einen Gedanken, der nicht untergehen darf.</nk-callout>

<div class="nk-callout"><span class="c-icon">💡</span><div><b>Core idea:</b> Ein Callout trägt einen Gedanken, der nicht untergehen darf.</div></div>

NotionKit – der ruhige Workspace-Look als CSSNotionKit ist eine reine CSS-Komponentenbibliothek im Notion-Look: Sidebar, Seitenbaum, Dokument-Shell, Datenbank-Views, Einstellungen und KI-Flächen.https://notionkit.jungherz.com

<div style="max-width:600px"><nk-bookmark href="https://notionkit.jungherz.com" title="NotionKit – der ruhige Workspace-Look als CSS" desc="NotionKit ist eine reine CSS-Komponentenbibliothek im Notion-Look: Sidebar, Seitenbaum, Dokument-Shell, Datenbank-Views, Einstellungen und KI-Flächen." favicon="/favicon.svg" cover="/covers/notionkit-og.jpg"></nk-bookmark></div>

<div style="max-width:600px"><a class="nk-bookmark" href="https://notionkit.jungherz.com" target="_blank" rel="noopener"><span class="bm-text"><span class="bm-title">NotionKit – der ruhige Workspace-Look als CSS</span><span class="bm-desc">NotionKit ist eine reine CSS-Komponentenbibliothek im Notion-Look: Sidebar, Seitenbaum, Dokument-Shell, Datenbank-Views, Einstellungen und KI-Flächen.</span><span class="bm-url"><img class="bm-favicon" src="/favicon.svg" alt=""><span>https://notionkit.jungherz.com</span></span></span><span class="bm-cover"><img src="/covers/notionkit-og.jpg" alt=""></span></a></div>

<nk-divider></nk-divider>

<hr class="nk-divider">

<nk-heading>Abschnittsüberschrift</nk-heading>

<h2 class="nk-heading">Abschnittsüberschrift</h2>

<nk-toggle label="Details" open>Hier steht der eingeklappte Inhalt.</nk-toggle>

<details class="nk-toggle" open><summary>Details</summary><div class="toggle-body">Hier steht der eingeklappte Inhalt.</div></details>

<nk-todo checked>Doku schreiben</nk-todo>
<nk-todo>Ausliefern</nk-todo>

<label class="nk-todo"><input type="checkbox" checked><span>Doku schreiben</span></label>
<label class="nk-todo"><input type="checkbox"><span>Ausliefern</span></label>

<nk-kbd>⌘</nk-kbd> <nk-kbd>K</nk-kbd>

<kbd class="nk-kbd">⌘</kbd> <kbd class="nk-kbd">K</kbd>

<nk-code lang="html" highlight>&lt;nk-btn variant="primary"&gt;Speichern&lt;/nk-btn&gt;</nk-code>

<div class="nk-code"><span class="lang">html</span>&lt;<span class="tag">nk-btn</span> <span class="attr">variant</span>="primary"&gt;Speichern&lt;/<span class="tag">nk-btn</span>&gt;</div>

<nk-quote cite="Unbekannt">Die beste Oberfläche ist die, die aus dem Weg geht.</nk-quote>

<blockquote class="nk-quote">Die beste Oberfläche ist die, die aus dem Weg geht.<cite class="q-cite">Unbekannt</cite></blockquote>

<nk-app>
  <nk-sidebar slot="sidebar">
    <nk-workspace-switcher slot="workspace" name="MonaHilft"></nk-workspace-switcher>
    <nk-tree>
      <nk-tree-item icon="🔍">Suche<span slot="end" class="nk-kbd-hint"><nk-kbd>⌘</nk-kbd><nk-kbd>K</nk-kbd></span></nk-tree-item>
      <nk-tree-item icon="🏠" active>Start</nk-tree-item>
      <nk-tree-item icon="📥">Eingang</nk-tree-item>
    </nk-tree>
    <nk-tree-item slot="footer" icon="⚙️">Einstellungen</nk-tree-item>
  </nk-sidebar>
  <nk-topbar>
    <nk-breadcrumb><span>📊 Projektübersicht</span></nk-breadcrumb>
    <nk-btn slot="actions" variant="share">Teilen</nk-btn>
    <nk-theme-toggle slot="actions"></nk-theme-toggle>
  </nk-topbar>
  <div class="nk-page-scroll"><div class="nk-page" style="padding-top:16px">
    <h1 class="nk-page-title" style="font-size:28px">NotionKit MVP</h1>
    <p class="lead">Eine ruhige, dokumentzentrierte Workspace-App – nur aus Elementen gebaut.</p>
  </div></div>
</nk-app>

<div class="nk-app">
  <aside class="nk-sidebar">
    <div class="nk-workspace"><div class="avatar">M</div><span>MonaHilft</span><span class="chev">⌄</span></div>
    <div class="nk-sidebar-scroll">
      <div class="nk-tree-item"><span class="icon">🔍</span><span class="label">Suche</span><span class="nk-kbd-hint"><kbd class="nk-kbd">⌘</kbd><kbd class="nk-kbd">K</kbd></span></div>
      <div class="nk-tree-item active"><span class="icon">🏠</span><span class="label">Start</span></div>
      <div class="nk-tree-item"><span class="icon">📥</span><span class="label">Eingang</span></div>
    </div>
    <div class="nk-sidebar-footer">
      <div class="nk-tree-item"><span class="icon">⚙️</span><span class="label">Einstellungen</span></div>
    </div>
  </aside>
  <main class="nk-main">
    <div class="nk-topbar">
      <nav class="nk-breadcrumb"><span class="crumb current">📊 Projektübersicht</span></nav>
      <div class="nk-topbar-actions"><button class="nk-topbar-btn nk-share-btn">Teilen</button><button class="nk-topbar-btn nk-theme-toggle">🌙</button></div>
    </div>
    <div class="nk-page-scroll"><div class="nk-page" style="padding-top:16px">
      <h1 class="nk-page-title" style="font-size:28px">NotionKit MVP</h1>
      <p class="lead">Eine ruhige, dokumentzentrierte Workspace-App – nur aus Elementen gebaut.</p>
    </div></div>
  </main>
</div>

<div style="display:flex;height:100%"><nk-sidebar collapsible collapse-label="Seitenleiste schließen">
  <nk-workspace-switcher slot="workspace" name="MonaHilft"></nk-workspace-switcher>
  <nk-tree>
    <nk-tree-item icon="🏠" active>Start</nk-tree-item>
    <nk-tree-item icon="📥">Eingang</nk-tree-item>
  </nk-tree>
  <nk-tree-item slot="footer" icon="⚙️">Einstellungen</nk-tree-item>
  <nk-tree-item slot="footer" icon="🗑️">Papierkorb</nk-tree-item>
</nk-sidebar></div>

<div style="display:flex;height:100%"><aside class="nk-sidebar">
  <div class="nk-sidebar-head"><div class="nk-workspace"><div class="avatar">M</div><span>MonaHilft</span><span class="chev">⌄</span></div><button class="nk-sidebar-collapse" aria-label="Seitenleiste schließen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m18 17-5-5 5-5M11 17l-5-5 5-5"/></svg></button></div>
  <div class="nk-sidebar-scroll">
    <div class="nk-tree-item active"><span class="icon">🏠</span><span class="label">Start</span></div>
    <div class="nk-tree-item"><span class="icon">📥</span><span class="label">Eingang</span></div>
  </div>
  <div class="nk-sidebar-footer">
    <div class="nk-tree-item"><span class="icon">⚙️</span><span class="label">Einstellungen</span></div>
    <div class="nk-tree-item"><span class="icon">🗑️</span><span class="label">Papierkorb</span></div>
  </div>
</aside></div>

<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:260px"><nk-workspace-switcher name="MonaHilft"></nk-workspace-switcher></div>

<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:260px"><div class="nk-workspace"><div class="avatar">M</div><span>MonaHilft</span><span class="chev">⌄</span></div></div>

<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:244px;padding:0 8px 6px"><nk-section-label addable>Favoriten</nk-section-label><nk-tree-item icon="📊">Projektübersicht</nk-tree-item></div>

<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:244px;padding:0 8px 6px"><div class="nk-section-label">Favoriten <span class="plus">＋</span></div><div class="nk-tree-item"><span class="icon">📊</span><span class="label">Projektübersicht</span><span class="actions"><span>＋</span><span>⋯</span></span></div></div>

<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:244px;padding:6px 8px"><nk-tree>
  <nk-section-label addable>Favoriten</nk-section-label>
  <nk-tree-item icon="📊" open>Projektübersicht
    <nk-tree-item icon="🚀" active>NotionKit MVP</nk-tree-item>
    <nk-tree-item icon="🎙️">Voice-Office-Hub</nk-tree-item>
  </nk-tree-item>
  <nk-tree-item icon="🧠">Wissensbasis
    <nk-tree-item icon="📄">Onboarding</nk-tree-item>
  </nk-tree-item>
  <nk-tree-item icon="🎨">Designsystem</nk-tree-item>
</nk-tree></div>

<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:244px;padding:6px 8px"><div>
  <div class="nk-section-label">Favoriten <span class="plus">＋</span></div>
  <div class="nk-tree-item"><span class="nk-toggle-arrow open">▸</span><span class="icon">📊</span><span class="label">Projektübersicht</span><span class="actions"><span>＋</span><span>⋯</span></span></div>
  <div class="nk-tree-children">
    <div class="nk-tree-item active"><span class="icon">🚀</span><span class="label">NotionKit MVP</span><span class="actions"><span>＋</span><span>⋯</span></span></div>
    <div class="nk-tree-item"><span class="icon">🎙️</span><span class="label">Voice-Office-Hub</span><span class="actions"><span>＋</span><span>⋯</span></span></div>
  </div>
  <div class="nk-tree-item"><span class="nk-toggle-arrow">▸</span><span class="icon">🧠</span><span class="label">Wissensbasis</span><span class="actions"><span>＋</span><span>⋯</span></span></div>
  <div class="nk-tree-children collapsed">
    <div class="nk-tree-item"><span class="icon">📄</span><span class="label">Onboarding</span></div>
  </div>
  <div class="nk-tree-item"><span class="icon">🎨</span><span class="label">Designsystem</span><span class="actions"><span>＋</span><span>⋯</span></span></div>
</div></div>

<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:244px;padding:6px 8px">
  <nk-tree-item icon="🔍" value="search">Suche<span slot="end" class="nk-kbd-hint"><nk-kbd>⌘</nk-kbd><nk-kbd>K</nk-kbd></span></nk-tree-item>
  <nk-tree-item icon="📊" active>Projektübersicht</nk-tree-item>
  <nk-tree-item icon="🎨">Designsystem</nk-tree-item>
</div>

<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:244px;padding:6px 8px">
  <div class="nk-tree-item"><span class="icon">🔍</span><span class="label">Suche</span><span class="nk-kbd-hint"><kbd class="nk-kbd">⌘</kbd><kbd class="nk-kbd">K</kbd></span></div>
  <div class="nk-tree-item active"><span class="icon">📊</span><span class="label">Projektübersicht</span><span class="actions"><span>＋</span><span>⋯</span></span></div>
  <div class="nk-tree-item"><span class="icon">🎨</span><span class="label">Designsystem</span><span class="actions"><span>＋</span><span>⋯</span></span></div>
</div>

<div style="border:1px solid var(--nk-border);border-radius:8px;display:flex;flex-direction:column"><nk-topbar>
  <nk-breadcrumb><span>📊 Projektübersicht</span><span>🚀 NotionKit MVP</span></nk-breadcrumb>
  <span slot="actions" class="nk-topbar-meta">Zuletzt bearbeitet vor 2 Min.</span>
  <nk-btn slot="actions" variant="share">Teilen</nk-btn>
  <nk-btn slot="actions" variant="topbar">⭐</nk-btn>
  <nk-theme-toggle slot="actions"></nk-theme-toggle>
</nk-topbar></div>

<div style="border:1px solid var(--nk-border);border-radius:8px;display:flex;flex-direction:column"><div class="nk-topbar">
  <nav class="nk-breadcrumb"><span class="crumb">📊 Projektübersicht</span><span class="sep">/</span><span class="crumb current">🚀 NotionKit MVP</span></nav>
  <div class="nk-topbar-actions"><span class="nk-topbar-meta">Zuletzt bearbeitet vor 2 Min.</span><button class="nk-topbar-btn nk-share-btn">Teilen</button><button class="nk-topbar-btn">⭐</button><button class="nk-topbar-btn nk-theme-toggle">🌙</button></div>
</div></div>

<nk-breadcrumb><a href="#">📊 Projektübersicht</a><span>🚀 NotionKit MVP</span></nk-breadcrumb>

<nav class="nk-breadcrumb"><a class="crumb" href="#">📊 Projektübersicht</a><span class="sep">/</span><span class="crumb current">🚀 NotionKit MVP</span></nav>

<nk-theme-toggle></nk-theme-toggle>

<button class="nk-topbar-btn nk-theme-toggle">🌙</button>

<div style="max-width:390px;border:1px solid var(--nk-border);border-radius:12px;overflow:hidden"><nk-tab-bar always value="inbox">
  <nk-tab-bar-item icon="🏠" value="home">Start</nk-tab-bar-item>
  <nk-tab-bar-item icon="📥" value="inbox">Eingang</nk-tab-bar-item>
  <nk-tab-bar-item icon="🔍" value="search">Suche</nk-tab-bar-item>
  <nk-tab-bar-item icon="⚙️" value="settings">Einstellungen</nk-tab-bar-item>
  <nk-tab-bar-item icon="☰" drawer>Mehr</nk-tab-bar-item>
</nk-tab-bar></div>

<div style="max-width:390px;border:1px solid var(--nk-border);border-radius:12px;overflow:hidden"><nav class="nk-tab-bar always">
  <button class="nk-tab-bar-item"><span class="icon">🏠</span><span class="label">Start</span></button>
  <button class="nk-tab-bar-item active"><span class="icon">📥</span><span class="label">Eingang</span></button>
  <button class="nk-tab-bar-item"><span class="icon">🔍</span><span class="label">Suche</span></button>
  <button class="nk-tab-bar-item"><span class="icon">⚙️</span><span class="label">Einstellungen</span></button>
  <button class="nk-tab-bar-item"><span class="icon">☰</span><span class="label">Mehr</span></button>
</nav></div>

<div style="max-width:390px;border:1px solid var(--nk-border);border-radius:12px;overflow:hidden"><nk-tab-bar always><nk-tab-bar-item icon="🏠" value="home" active>Start</nk-tab-bar-item><nk-tab-bar-item icon="📥" value="inbox">Eingang</nk-tab-bar-item></nk-tab-bar></div>

<div style="max-width:390px;border:1px solid var(--nk-border);border-radius:12px;overflow:hidden"><nav class="nk-tab-bar always"><button class="nk-tab-bar-item active"><span class="icon">🏠</span><span class="label">Start</span></button><button class="nk-tab-bar-item"><span class="icon">📥</span><span class="label">Eingang</span></button></nav></div>

<div style="display:flex;flex-direction:column;height:100%"><nk-page icon="🚀" cover>
  <nk-page-title>NotionKit MVP</nk-page-title>
  <nk-page-actions><span>👤 Marcel Karas</span><span>📅 Erstellt am 12. Mai 2026</span><span>🏷️ <nk-tag color="purple">Designsystem</nk-tag></span></nk-page-actions>
  <p class="lead">Eine ruhige, dokumentzentrierte Workspace-App – nur aus Elementen gebaut.</p>
</nk-page></div>

<div style="display:flex;flex-direction:column;height:100%"><div class="nk-page-scroll"><div class="nk-cover"></div><div class="nk-page">
  <div class="nk-page-icon">🚀</div>
  <h1 class="nk-page-title">NotionKit MVP</h1>
  <div class="nk-page-meta"><span>👤 Marcel Karas</span><span>📅 Erstellt am 12. Mai 2026</span><span>🏷️ <span class="nk-tag purple">Designsystem</span></span></div>
  <p class="lead">Eine ruhige, dokumentzentrierte Workspace-App – nur aus Elementen gebaut.</p>
</div></div></div>

<nk-page-cover src="/covers/meadow.svg"></nk-page-cover>

<div class="nk-cover"><img src="/covers/meadow.svg" alt=""></div>

<nk-page-title editable>NotionKit MVP</nk-page-title>

<h1 class="nk-page-title" contenteditable="plaintext-only" spellcheck="false">NotionKit MVP</h1>

<nk-page-actions><span>👤 Marcel Karas</span><span>📅 Erstellt am 12. Mai 2026</span><span>🏷️ <nk-tag color="purple">Designsystem</nk-tag></span></nk-page-actions>

<div class="nk-page-meta"><span>👤 Marcel Karas</span><span>📅 Erstellt am 12. Mai 2026</span><span>🏷️ <span class="nk-tag purple">Designsystem</span></span></div>

<nk-props style="max-width:520px">
  <nk-prop label="Status" icon="◉"><nk-tag color="blue">In Arbeit</nk-tag></nk-prop>
  <nk-prop label="Verantwortlich" icon="👤"><nk-avatar size="small" color="purple">AL</nk-avatar>Ada Lovelace</nk-prop>
  <nk-prop label="Fällig" icon="📅">2. Juni 2026</nk-prop>
  <nk-prop label="Tags" icon="🏷️"><nk-tag color="purple">Designsystem</nk-tag><nk-tag>CSS</nk-tag></nk-prop>
  <nk-prop label="Fortschritt" icon="▰"><nk-progress value="65" label="65 %" wide></nk-progress></nk-prop>
</nk-props>

<dl class="nk-props" style="max-width:520px">
  <div class="nk-prop"><dt class="p-name"><span class="p-icon">◉</span>Status</dt><dd class="p-value"><span class="nk-tag blue">In Arbeit</span></dd></div>
  <div class="nk-prop"><dt class="p-name"><span class="p-icon">👤</span>Verantwortlich</dt><dd class="p-value"><span class="nk-avatar small purple">AL</span>Ada Lovelace</dd></div>
  <div class="nk-prop"><dt class="p-name"><span class="p-icon">📅</span>Fällig</dt><dd class="p-value">2. Juni 2026</dd></div>
  <div class="nk-prop"><dt class="p-name"><span class="p-icon">🏷️</span>Tags</dt><dd class="p-value"><span class="nk-tag purple">Designsystem</span><span class="nk-tag">CSS</span></dd></div>
  <div class="nk-prop"><dt class="p-name"><span class="p-icon">▰</span>Fortschritt</dt><dd class="p-value"><span class="nk-progress wide"><i style="width:65%"></i></span><span class="nk-progress-label">65 %</span></dd></div>
</dl>

<nk-props style="max-width:520px"><nk-prop label="Fällig" icon="📅">2. Juni 2026</nk-prop><nk-prop label="Adresse" icon="✉️" text>support+design@notionkit.example.com · <nk-tag color="green">Bestätigt</nk-tag></nk-prop></nk-props>

<dl class="nk-props" style="max-width:520px"><div class="nk-prop"><dt class="p-name"><span class="p-icon">📅</span>Fällig</dt><dd class="p-value">2. Juni 2026</dd></div><div class="nk-prop"><dt class="p-name"><span class="p-icon">✉️</span>Adresse</dt><dd class="p-value text">support+design@notionkit.example.com · <span class="nk-tag green">Bestätigt</span></dd></div></dl>

🚀

NotionKit MVP

vor 2 Min.

📚

Wissensbasis

Gestern

Wochenrückblick

Drei Seiten haben sich geändert, ein Kommentar wartet auf Antwort.

<nk-panels>
  <nk-panel href="#" cover="/covers/aurora.svg" icon="🚀" title="NotionKit MVP"><p>vor 2 Min.</p></nk-panel>
  <nk-panel href="#" cover="/covers/dunes.svg" icon="📚" title="Wissensbasis"><p>Gestern</p></nk-panel>
  <nk-panel title="Wochenrückblick"><p>Drei Seiten haben sich geändert, ein Kommentar wartet auf Antwort.</p></nk-panel>
</nk-panels>

<div class="nk-panels">
  <a class="nk-panel" href="#"><div class="nk-cover"><img src="/covers/aurora.svg" alt=""></div><div class="nk-page-icon">🚀</div><h3>NotionKit MVP</h3><p>vor 2 Min.</p></a>
  <a class="nk-panel" href="#"><div class="nk-cover"><img src="/covers/dunes.svg" alt=""></div><div class="nk-page-icon">📚</div><h3>Wissensbasis</h3><p>Gestern</p></a>
  <div class="nk-panel"><h3>Wochenrückblick</h3><p>Drei Seiten haben sich geändert, ein Kommentar wartet auf Antwort.</p></div>
</div>

<div style="max-width:360px;display:grid;gap:12px"><nk-panel href="#" cover icon="🚀" title="NotionKit MVP"><p>vor 2 Min.</p></nk-panel>
<nk-panel title="Wochenrückblick"><nk-tag slot="end" color="blue">In Arbeit</nk-tag><p>Drei Seiten haben sich geändert, ein Kommentar wartet auf Antwort.</p></nk-panel></div>

<div style="max-width:360px;display:grid;gap:12px"><a class="nk-panel" href="#"><div class="nk-cover"></div><div class="nk-page-icon">🚀</div><h3>NotionKit MVP</h3><p>vor 2 Min.</p></a>
<div class="nk-panel"><div class="p-head"><h3>Wochenrückblick</h3><span class="p-end"><span class="nk-tag blue">In Arbeit</span></span></div><p>Drei Seiten haben sich geändert, ein Kommentar wartet auf Antwort.</p></div></div>

<nk-block-host handle><p style="margin:0" contenteditable="true">Hier steht Block-Inhalt – klicken zum Fokussieren.</p></nk-block-host>

<div class="nk-block-host"><span class="nk-block-handle">⠿</span><p style="margin:0" contenteditable="true">Hier steht Block-Inhalt – klicken zum Fokussieren.</p></div>

<nk-banner variant="info">ℹ️ <span>Diese Seite ist eine <b>Komponenten-Vorschau</b> – jedes Element folgt denselben Design-Tokens.</span><button slot="action" type="button">Palette öffnen</button></nk-banner>
<nk-banner variant="warning">⚠️ <span>Die Datenbank „Projektübersicht“ hat 2 überfällige Einträge.</span><button slot="action" type="button">Ansehen</button></nk-banner>
<nk-banner variant="success">✓ <span>Alle Änderungen wurden synchronisiert.</span></nk-banner>
<nk-banner variant="danger">⛔ <span>Die Verbindung zu Notion ist abgerissen.</span></nk-banner>

<div class="nk-banner info">ℹ️ <span>Diese Seite ist eine <b>Komponenten-Vorschau</b> – jedes Element folgt denselben Design-Tokens.</span><button class="b-action" type="button">Palette öffnen</button></div>
<div class="nk-banner warning">⚠️ <span>Die Datenbank „Projektübersicht“ hat 2 überfällige Einträge.</span><button class="b-action" type="button">Ansehen</button></div>
<div class="nk-banner success">✓ <span>Alle Änderungen wurden synchronisiert.</span></div>
<div class="nk-banner danger">⛔ <span>Die Verbindung zu Notion ist abgerissen.</span></div>

<nk-empty icon="🗂️" title="Noch keine Einträge" desc="Lege den ersten Eintrag an oder importiere Daten."><nk-btn variant="primary" small>＋ Neuer Eintrag</nk-btn><nk-btn variant="secondary" small>Importieren</nk-btn></nk-empty>

<div class="nk-empty"><div class="e-icon">🗂️</div><div class="e-title">Noch keine Einträge</div><div class="e-desc">Lege den ersten Eintrag an oder importiere Daten.</div><div class="e-actions"><button class="nk-btn primary small">＋ Neuer Eintrag</button><button class="nk-btn secondary small">Importieren</button></div></div>

<nk-skeleton height="18" width="60%"></nk-skeleton>
<nk-skeleton lines="3" widths="100%,85%,40%"></nk-skeleton>

<div class="nk-skeleton" style="height:18px;width:60%"></div>
<div class="nk-skeleton" style="height:13px"></div>
<div class="nk-skeleton" style="height:13px;width:85%"></div>
<div class="nk-skeleton" style="height:13px;width:40%"></div>

<nk-synced badge="⟳ 3 Orte"><div style="font-size:14px;line-height:1.55"><b>Unsere Mission:</b> Dem Arbeitstag echtes Gewicht nehmen – ruhig, klar, wirksam.</div></nk-synced>

<div class="nk-synced"><span class="synced-badge">⟳ 3 Orte</span><div style="font-size:14px;line-height:1.55"><b>Unsere Mission:</b> Dem Arbeitstag echtes Gewicht nehmen – ruhig, klar, wirksam.</div></div>

<nk-tabs value="notes">
  <nk-tab value="notes">📝 Notizen</nk-tab>
  <nk-tab value="tasks">✅ Aufgaben</nk-tab>
  <nk-tab value="files">📎 Dateien</nk-tab>
  <div slot="panel" data-tab="notes" class="nk-tab-panel">Freie Notizen zum Projekt – Protokolle, Ideen, Entwürfe.</div>
  <div slot="panel" data-tab="tasks" class="nk-tab-panel">Aufgaben zu diesem Projekt, verknüpft mit der Datenbank.</div>
  <div slot="panel" data-tab="files" class="nk-tab-panel">Angehängte Dateien und Exporte.</div>
</nk-tabs>

<div class="nk-tabs">
  <span class="nk-tab active">📝 Notizen</span>
  <span class="nk-tab">✅ Aufgaben</span>
  <span class="nk-tab">📎 Dateien</span>
</div>
<div class="nk-tab-panel">Freie Notizen zum Projekt – Protokolle, Ideen, Entwürfe.</div>

<nk-tabs><nk-tab value="a" active>📝 Notizen</nk-tab><nk-tab value="b">✅ Aufgaben</nk-tab></nk-tabs>

<div class="nk-tabs"><span class="nk-tab active">📝 Notizen</span><span class="nk-tab">✅ Aufgaben</span></div>