Sven/JuConnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dateien nach "/" hochladen

Browse Source
This commit is contained in:
Sven
2026-02-11 11:56:58 +01:00
commit 0f54048ace
3 changed files with 896 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.gitlab-ci.yml Normal file
View File

@@ -0,0 +1,12 @@
pages:
stage: deploy
image: alpine:latest
script:
- apk add --no-cache rsync
- mkdir -p public
- rsync -av --delete --exclude public --exclude .git --exclude .gitlab-ci.yml ./ public/
artifacts:
paths:
- public
only:
- main

31
README.md Normal file
View File

@@ -0,0 +1,31 @@
# JuConnect · Styleguide (v0.2)
Dieses Paket ist ein **Tool-first Styleguide** und gleichzeitig ein **Starter** für die spätere Website.
## Fokus
- **Kopierbar**: Farben, Tokens, Snippets (HTML/CSS) per Button
- **Seriös & ruhig**: primär über Markenblau, Akzent nur unterstützend
- **Komponenten-Basis**: Buttons, Forms, Feedback, Layout, Patterns
## Start
1. Entpacken
2. `index.html` öffnen (ideal über lokalen Server)
## Copy-Funktionen
- `[data-copy="..."]` kopiert beliebigen Text
- `data-snippet-copy` kopiert Inhalt des nächsten `<pre><code>`
- Swatches: „Hex“ / „Token“ kopieren
## Brand Tokens
- Primär: `#1d354f` (`--primary`)
- Akzent: `#8FAE9A` (`--accent`) → Fokus/Marker/kleine Highlights
## Struktur
- `assets/css/style.css` – Tokens + Komponenten
- `assets/js/app.js` – Copy, Toast, Tabs, Accordion, Modal, Sticky-Navigation-Highlight, Nav-Suche
- `assets/img/juconnect.svg` – Logo
## Nächste Ausbaustufe (wenn ihr wollt)
- Icons-System (SVG Sprites)
- Weitere Komponenten: Breadcrumbs, Pagination, Stepper, File Upload, Search/Filter Chips
- Seiten-Templates: Start / Leistungen / Trägerinfo / Downloads / Kontakt / Datenschutz / Impressum

853
index.html Normal file
View File

@@ -0,0 +1,853 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<title>JuConnect · Styleguide</title>
<link rel="stylesheet" href="./assets/css/style.css" />
</head>
<body>
<a class="skip-link" href="#content">Zum Inhalt springen</a>
<div class="app" id="top">
<!-- Side Navigation -->
<aside class="sidenav" aria-label="Navigation">
<div class="sidenav__inner">
<div class="sidenav__top">
<a class="brand" href="#top" aria-label="JuConnect Styleguide">
<img
class="brand__logo"
src="./assets/img/juconnect_icon.svg"
data-logo-light="./assets/img/juconnect_icon.svg"
data-logo-dark="./assets/img/juconnect_icon_light.svg"
alt="JuConnect Icon" />
<div class="brand__text">
<div class="brand__name">JuConnect</div>
<div class="brand__tagline">Hilfen zur Erziehung</div>
</div>
</a>
<div class="sidenav__actions">
<button class="btn btn--ghost btn--sm" type="button" data-theme-toggle title="Theme wechseln">
<span class="btn__icon" aria-hidden="true">☼</span>
<span class="btn__label">Theme</span>
</button>
<button class="btn btn--ghost btn--sm" type="button" data-copy=":root{\n --primary:#1d354f;\n --accent:#8FAE9A;\n}" data-copy-label="Tokens kopieren">
<span class="btn__icon" aria-hidden="true">⧉</span>
<span class="btn__label">Tokens</span>
</button>
</div>
</div>
<div class="sidenav__search">
<label class="sr-only" for="navSearch">Suche</label>
<input class="input input--sm" id="navSearch" type="search" placeholder="Suchen (z. B. button, form, logo) …" data-nav-search />
</div>
<nav class="sidenav__nav" data-nav>
<div class="navgroup">
<div class="navgroup__title">Grundlagen</div>
<a class="navlink" href="#brand">Marke & Kommunikation</a>
<a class="navlink" href="#bildsprache">Bildsprache</a>
<a class="navlink" href="#logo">Logo</a>
<a class="navlink" href="#tokens">Design Tokens</a>
<a class="navlink" href="#colors">Farben</a>
<a class="navlink" href="#typography">Typografie</a>
</div>
<div class="navgroup">
<div class="navgroup__title">UI-Bausteine</div>
<a class="navlink" href="#buttons">Buttons</a>
<a class="navlink" href="#forms">Formulare</a>
<a class="navlink" href="#feedback">Feedback</a>
<a class="navlink" href="#layout">Layout</a>
<a class="navlink" href="#patterns">Patterns</a>
</div>
</nav>
<div class="sidenav__bottom">
<div class="mini-note">
<div class="mini-note__title">Leitlinie</div>
<div class="mini-note__text">
Klar · seriös · freundlich. <br/>
Primärfarbe führt, Akzent unterstützt.
</div>
</div>
</div>
</div>
</aside>
<!-- Main -->
<main class="main" id="content" tabindex="-1">
<header class="pagehead">
<div class="pagehead__left">
<div class="pagehead__eyebrow">
<span class="badge badge--info">Design System</span>
<span class="muted">Version 0.2</span>
</div>
<div class="pagehead__brand">
<img
src="./assets/img/juconnect.svg"
data-logo-light="./assets/img/juconnect.svg"
data-logo-dark="./assets/img/juconnect_light.svg"
alt="JuConnect Logo" />
</div>
<h1 class="h1">Styleguide</h1>
<p class="lead">
Toolbox Styleguide für JuConnect. Klar strukturierte Regeln und kopierbare Code-Snippets für konsistente Gestaltung und Kommunikation.
</p>
<div class="pagehead__chips">
<span class="pill">
<span class="pill__dot" aria-hidden="true"></span>
<span>Primär <code>#1d354f</code></span>
<button class="pill__copy" type="button" data-copy="#1d354f" data-copy-label="Primärfarbe kopiert" aria-label="Primärfarbe kopieren">⧉</button>
</span>
<span class="pill pill--accent">
<span class="pill__dot" aria-hidden="true"></span>
<span>Akzent <code>#8FAE9A</code></span>
<button class="pill__copy" type="button" data-copy="#8FAE9A" data-copy-label="Akzentfarbe kopiert" aria-label="Akzentfarbe kopieren">⧉</button>
</span>
</div>
</div>
<div class="pagehead__right">
<div class="card card--tight">
<div class="kpi">
<div class="kpi__label">Use-case</div>
<div class="kpi__value">Öffentliche Träger</div>
</div>
<div class="kpi">
<div class="kpi__label">Ton</div>
<div class="kpi__value">Sachlich, respektvoll</div>
</div>
<div class="kpi">
<div class="kpi__label">Akzent</div>
<div class="kpi__value">sparsam, unterstützend</div>
</div>
</div>
</div>
</header>
<!-- Brand -->
<section class="section" id="brand">
<div class="section__head">
<h2 class="h2">Marke & Kommunikation</h2>
<p class="muted">Kurzregeln für Sprache, Tonalität und visuelle Haltung.</p>
</div>
<div class="grid grid--2">
<article class="card">
<div class="card__head">
<h3 class="h3">Stimme (Voice)</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy="• Sie-Ansprache\n• kurz & klar\n• keine Buzzwords\n• keine Überversprechen\n• fachlich korrekt, aber verständlich"
data-copy-label="Voice-Regeln kopiert">⧉ Copy</button>
</div>
<ul class="list">
<li>Sie-Ansprache, respektvoll</li>
<li>kurze Sätze, klare Begriffe</li>
<li>keine Marketing-Floskeln, keine Superlative</li>
<li>keine Emotionalisierung sensibler Themen</li>
<li>präzise Zuständigkeiten & Abläufe</li>
</ul>
</article>
<article class="card">
<div class="card__head">
<h3 class="h3">Do / Don’t</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy="DO: strukturiert, neutral, lösungsorientiert\nDON'T: dramatisierend, reißerisch, stock-klischee"
data-copy-label="Do/Don't kopiert">⧉ Copy</button>
</div>
<div class="grid grid--2">
<div>
<div class="badge badge--success">Do</div>
<ul class="list">
<li>„Ablauf in 3 Schritten“</li>
<li>„Zuständigkeit & Kontakt“</li>
<li>„Dokumente & Nachweise“</li>
</ul>
</div>
<div>
<div class="badge badge--danger">Don’t</div>
<ul class="list">
<li>„Wir ändern Ihr Leben“</li>
<li>zu viele Fotos/Emotionen</li>
<li>verspielte UI-Effekte</li>
</ul>
</div>
</div>
</article>
</div>
</section>
<!-- Bildsprache -->
<section class="section" id="bildsprache">
<div class="section__head">
<h2 class="h2">Bildsprache</h2>
<p class="muted">Leitlinien für sachliche, respektvolle Illustrationen im JuConnect-Kontext.</p>
</div>
<div class="grid grid--2">
<article class="card">
<div class="card__head">
<h3 class="h3">Regeln</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy="Stil: sachlich, reduziert, freundlich\nKeine Verniedlichung\nKeine übertriebenen Emotionen\nKlare Formen, ruhige Farben\nEher erklärend als erzählend"
data-copy-label="Bildsprache-Regeln kopiert">⧉ Copy</button>
</div>
<ul class="list">
<li>Stil: sachlich, reduziert, freundlich</li>
<li>Keine Verniedlichung</li>
<li>Keine übertriebenen Emotionen</li>
<li>Klare Formen, ruhige Farben</li>
<li>Eher erklärend als erzählend</li>
</ul>
</article>
<article class="card">
<div class="card__head">
<h3 class="h3">Beispiele</h3>
<span class="badge badge--info">Referenz</span>
</div>
<div class="image-grid">
<figure class="image-card">
<img src="./assets/img/helfer.png" alt="Beispielbild Helfer" />
<figcaption class="muted">Helfer</figcaption>
</figure>
<figure class="image-card">
<img src="./assets/img/gruppe.png" alt="Beispielbild Gruppe" />
<figcaption class="muted">Gruppe</figcaption>
</figure>
</div>
</article>
</div>
<article class="card">
<div class="card__head">
<h3 class="h3">Prompt-Generator</h3>
<button class="btn btn--ghost btn--sm" type="button" data-bild-copy data-copy-label="Bildprompt kopiert">⧉ Copy</button>
</div>
<div class="field">
<label class="label" for="bildTopic">Thema</label>
<input class="input" id="bildTopic" type="text" placeholder="z. B. Hilfeplangespräch mit Jugendamt" data-bild-topic />
<div class="help">Beim Kopieren wird das Thema direkt in den Prompt eingesetzt.</div>
</div>
</article>
</section>
<!-- Logo -->
<section class="section" id="logo">
<div class="section__head">
<h2 class="h2">Logo</h2>
<p class="muted">Anwendung, Schutzraum, Mindestgröße, Varianten.</p>
</div>
<div class="grid grid--2">
<article class="card">
<div class="card__head">
<h3 class="h3">Logo-Assets</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy='<img src="./assets/img/juconnect.svg" alt="JuConnect" />'
data-copy-label="Logo-HTML kopiert">⧉ Copy</button>
</div>
<div class="logo-demo">
<div class="logo-demo__tile">
<div class="logo-demo__label">Hell</div>
<div class="logo-demo__surface logo-demo__surface--light">
<img src="./assets/img/juconnect.svg" alt="JuConnect Logo" />
</div>
</div>
<div class="logo-demo__tile">
<div class="logo-demo__label">Dunkel</div>
<div class="logo-demo__surface logo-demo__surface--dark">
<img src="./assets/img/juconnect_light.svg" alt="JuConnect Logo hell" />
</div>
</div>
</div>
<div class="logo-downloads">
<a class="btn btn--ghost btn--sm" href="./assets/img/juconnect.svg" download="juconnect.svg">Download Logo (Standard)</a>
<a class="btn btn--ghost btn--sm" href="./assets/img/juconnect_light.svg" download="juconnect_light.svg">Download Logo (Hell)</a>
</div>
<p class="muted">Hinweis: Auf dunklen Flächen die helle Logo-Variante verwenden.</p>
<hr class="hr" />
<div>
<h4 class="h3">Icon-Assets</h4>
<div class="logo-demo logo-demo--icon">
<div class="logo-demo__tile">
<div class="logo-demo__label">Hell</div>
<div class="logo-demo__surface logo-demo__surface--light">
<img class="logo-demo__icon" src="./assets/img/juconnect_icon.svg" alt="JuConnect Icon" />
</div>
</div>
<div class="logo-demo__tile">
<div class="logo-demo__label">Dunkel</div>
<div class="logo-demo__surface logo-demo__surface--dark">
<img class="logo-demo__icon" src="./assets/img/juconnect_icon_light.svg" alt="JuConnect Icon hell" />
</div>
</div>
</div>
</div>
<div class="logo-downloads">
<a class="btn btn--ghost btn--sm" href="./assets/img/juconnect_icon.svg" download="juconnect_icon.svg">Download Icon (Standard)</a>
<a class="btn btn--ghost btn--sm" href="./assets/img/juconnect_icon_light.svg" download="juconnect_icon_light.svg">Download Icon (Hell)</a>
</div>
</article>
<article class="card">
<div class="card__head">
<h3 class="h3">Regeln</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy="Schutzraum: mindestens 1× Logo-Höhe\nMindestbreite Web: 120 px\nNicht verzerren, nicht schattieren, keine Farbänderung"
data-copy-label="Logo-Regeln kopiert">⧉ Copy</button>
</div>
<div class="callout callout--info">
<div class="callout__title">Schutzraum</div>
<div class="callout__text">Rundum mindestens <strong>1× Logo-Höhe</strong> Abstand zu anderen Elementen.</div>
</div>
<div class="callout">
<div class="callout__title">Verboten</div>
<ul class="list">
<li>Strecken/Quetschen</li>
<li>Schatten/Glow hinzufügen</li>
<li>Farben ändern</li>
<li>auf unruhigen Bildern platzieren</li>
</ul>
</div>
</article>
</div>
</section>
<!-- Tokens -->
<section class="section" id="tokens">
<div class="section__head">
<h2 class="h2">Design Tokens</h2>
<p class="muted">Copy & paste: CSS Variablen als Single Source of Truth.</p>
</div>
<article class="card">
<div class="snippet" data-snippet>
<div class="snippet__head">
<div class="snippet__title">CSS Tokens (Auszug)</div>
<div class="snippet__actions">
<button class="btn btn--ghost btn--sm" type="button" data-snippet-copy data-copy-label="CSS Tokens kopiert">⧉ Copy</button>
</div>
</div>
<pre class="snippet__code"><code>:root{
--primary: #1d354f;
--accent: #8FAE9A;
--bg: #f6f7f8;
--surface: #ffffff;
--surface2: #eef1f3;
--text: #101922;
--text2: #3c4a58;
--muted: #607384;
--line: #d7dee5;
--radius: 14px;
--shadow-sm: 0 6px 16px rgba(16, 25, 34, .08);
--focus: 0 0 0 3px rgba(143, 174, 154, .35);
}</code></pre>
</div>
</article>
</section>
<!-- Colors -->
<section class="section" id="colors">
<div class="section__head">
<h2 class="h2">Farben</h2>
<p class="muted">Primärfarbe führt. Akzent ist Unterstützung, nicht Hauptdarsteller.</p>
</div>
<div class="grid grid--3">
<article class="swatch card" data-swatch data-name="primary" data-hex="#1d354f">
<div class="swatch__chip swatch__chip--primary"></div>
<div class="swatch__meta">
<div class="swatch__name">Primär</div>
<div class="swatch__row"><code>--primary</code> <span class="dot">·</span> <code>#1d354f</code></div>
<div class="swatch__actions">
<button class="btn btn--ghost btn--sm" type="button" data-swatch-copy="hex">Hex</button>
<button class="btn btn--ghost btn--sm" type="button" data-swatch-copy="token">Token</button>
</div>
</div>
</article>
<article class="swatch card" data-swatch data-name="accent" data-hex="#8FAE9A">
<div class="swatch__chip swatch__chip--accent"></div>
<div class="swatch__meta">
<div class="swatch__name">Akzent (Salbei)</div>
<div class="swatch__row"><code>--accent</code> <span class="dot">·</span> <code>#8FAE9A</code></div>
<div class="swatch__actions">
<button class="btn btn--ghost btn--sm" type="button" data-swatch-copy="hex">Hex</button>
<button class="btn btn--ghost btn--sm" type="button" data-swatch-copy="token">Token</button>
</div>
</div>
</article>
<article class="swatch card" data-swatch data-name="bg" data-hex="#f6f7f8">
<div class="swatch__chip swatch__chip--bg"></div>
<div class="swatch__meta">
<div class="swatch__name">Hintergrund</div>
<div class="swatch__row"><code>--bg</code> <span class="dot">·</span> <code data-bg-hex>#f6f7f8</code></div>
<div class="swatch__actions">
<button class="btn btn--ghost btn--sm" type="button" data-swatch-copy="hex">Hex</button>
<button class="btn btn--ghost btn--sm" type="button" data-swatch-copy="token">Token</button>
</div>
</div>
</article>
</div>
<div class="grid">
<article class="card">
<div class="card__head">
<h3 class="h3">Header-Verlauf</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy="background:\n radial-gradient(120% 140% at 100% 0%, var(--header-grad-accent) 0%, rgba(143,174,154,0) 50%),\n radial-gradient(120% 140% at 0% 100%, var(--header-grad-primary) 0%, rgba(29,53,79,0) 60%),\n var(--surface);"
data-copy-label="Header-Verlauf kopiert">⧉ Copy</button>
</div>
<div class="gradient-preview" aria-label="Vorschau Header-Verlauf"></div>
<div class="swatch__row"><code>Layer 1 (light)</code> <span class="dot">·</span> <code>#8FAE9A38</code> → <code>#8FAE9A00</code></div>
<div class="swatch__row"><code>Layer 2 (light)</code> <span class="dot">·</span> <code>#1D354F1A</code> → <code>#1D354F00</code></div>
<div class="swatch__row"><code>Layer 1 (dark)</code> <span class="dot">·</span> <code>#8FAE9A2E</code> → <code>#8FAE9A00</code></div>
<div class="swatch__row"><code>Layer 2 (dark)</code> <span class="dot">·</span> <code>#8FAE9A26</code> → <code>#8FAE9A00</code></div>
<div class="swatch__row"><code>Base</code> <span class="dot">·</span> <code>var(--surface)</code></div>
<div class="swatch__actions">
<button class="btn btn--ghost btn--sm" type="button"
data-copy="radial-gradient(120% 140% at 100% 0%, var(--header-grad-accent) 0%, rgba(143,174,154,0) 50%)"
data-copy-label="Gradient Layer 1 kopiert">Layer 1 CSS</button>
<button class="btn btn--ghost btn--sm" type="button"
data-copy="radial-gradient(120% 140% at 0% 100%, var(--header-grad-primary) 0%, rgba(29,53,79,0) 60%)"
data-copy-label="Gradient Layer 2 kopiert">Layer 2 CSS</button>
<button class="btn btn--ghost btn--sm" type="button"
data-copy="background:\n radial-gradient(120% 140% at 100% 0%, var(--header-grad-accent) 0%, rgba(143,174,154,0) 50%),\n radial-gradient(120% 140% at 0% 100%, var(--header-grad-primary) 0%, rgba(29,53,79,0) 60%),\n var(--surface);"
data-copy-label="Header-Verlauf CSS kopiert">Full CSS</button>
</div>
<p class="muted">Einsatz: Page-Header, Hero-Flächen und ruhige visuelle Trennung.</p>
</article>
</div>
<div class="grid grid--2">
<article class="card">
<div class="card__head">
<h3 class="h3">Primär in UI</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy=".btn--primary{ background:var(--primary); color:#fff; }"
data-copy-label="CSS kopiert">⧉ Copy</button>
</div>
<p class="muted">Primärfarbe für Navigation, Headlines, Primary Actions.</p>
<div class="row wrap">
<button class="btn btn--primary" type="button">Primär-CTA</button>
<button class="btn btn--secondary" type="button">Sekundär</button>
<button class="btn btn--ghost" type="button">Ghost</button>
</div>
</article>
<article class="card">
<div class="card__head">
<h3 class="h3">Akzent sparsam</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy="Akzent nur für: Marker, Icons, Fokus, kleine Highlights"
data-copy-label="Regel kopiert">⧉ Copy</button>
</div>
<div class="callout callout--accent">
<div class="callout__title">Beispiel: dezenter Highlight</div>
<div class="callout__text">Akzent nur als feiner Rahmen / Marker — nicht als große Fläche.</div>
</div>
</article>
</div>
</section>
<!-- Typography -->
<section class="section" id="typography">
<div class="section__head">
<h2 class="h2">Typografie</h2>
<p class="muted">Source Sans 3. Lesbarkeit und ruhige Hierarchie.</p>
</div>
<div class="grid grid--2">
<article class="card">
<div class="card__head">
<h3 class="h3">Skala</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy="H1 32px/1.2\nH2 24px/1.25\nH3 18px/1.25\nBody 16px/1.55\nSmall 14px/1.55"
data-copy-label="Typo-Skala kopiert">⧉ Copy</button>
</div>
<div class="typeset">
<h1 class="h1">H1 — Überschrift</h1>
<h2 class="h2">H2 — Abschnitt</h2>
<h3 class="h3">H3 — Unterpunkt</h3>
<p class="lead">Lead: kurze Einleitung. Keine Floskeln, klare Sprache.</p>
<p>Fließtext: max. 75 Zeichen pro Zeile. <a href="#!" class="link">Link</a> ist deutlich.</p>
<p class="muted">Muted: Metadaten, Hilfetexte, sekundäre Inhalte.</p>
</div>
</article>
<article class="card">
<div class="card__head">
<h3 class="h3">Copy Snippets</h3>
<button class="btn btn--ghost btn--sm" type="button" data-copy="max-width:75ch; line-height:1.55;" data-copy-label="CSS kopiert">⧉ Copy</button>
</div>
<div class="callout">
<div class="callout__title">Regel</div>
<div class="callout__text">Fließtext-Breite begrenzen (<code>max-width: 75ch</code>).</div>
</div>
<div class="callout callout--info">
<div class="callout__title">Betonung</div>
<div class="callout__text">Fett sparsam; Bedeutung entsteht durch Struktur, nicht Gewicht.</div>
</div>
</article>
</div>
</section>
<!-- Buttons -->
<section class="section" id="buttons">
<div class="section__head">
<h2 class="h2">Buttons</h2>
<p class="muted">Primär = Markenblau. Akzent bleibt dezent.</p>
</div>
<div class="grid grid--2">
<article class="card">
<div class="card__head">
<h3 class="h3">Preview</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy='<button class="btn btn--primary" type="button">Primär</button>'
data-copy-label="Button-HTML kopiert">⧉ Copy</button>
</div>
<div class="row wrap">
<button class="btn btn--primary" type="button">Primär</button>
<button class="btn btn--secondary" type="button">Sekundär</button>
<button class="btn btn--ghost" type="button">Ghost</button>
<button class="btn btn--danger" type="button" data-modal-open="#demoModal">Danger</button>
<button class="btn btn--primary" type="button" disabled>Disabled</button>
</div>
<p class="muted">Fokuszustand ist sichtbar, Hover ist zurückhaltend.</p>
</article>
<article class="card">
<div class="card__head">
<h3 class="h3">Button CSS</h3>
<button class="btn btn--ghost btn--sm" type="button" data-snippet-copy data-copy-label="CSS kopiert">⧉ Copy</button>
</div>
<pre class="snippet__code"><code>.btn--primary{
background: var(--primary);
color: #fff;
border-color: rgba(0,0,0,.06);
}</code></pre>
</article>
</div>
</section>
<!-- Forms -->
<section class="section" id="forms">
<div class="section__head">
<h2 class="h2">Formulare</h2>
<p class="muted">Klare Labels, Hilfetexte, Validierung. Tool-first: HTML direkt kopieren.</p>
</div>
<div class="grid grid--2">
<article class="card">
<div class="card__head">
<h3 class="h3">Kontaktformular (Snippet)</h3>
<button class="btn btn--ghost btn--sm" type="button" data-snippet-copy data-copy-label="Formular-HTML kopiert">⧉ Copy</button>
</div>
<div class="snippet" data-snippet>
<pre class="snippet__code"><code>&lt;form class=&quot;form&quot;&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;label class=&quot;label&quot; for=&quot;name&quot;&gt;Name&lt;/label&gt;
&lt;input class=&quot;input&quot; id=&quot;name&quot; type=&quot;text&quot; /&gt;
&lt;div class=&quot;help&quot;&gt;Pflichtfeld.&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;label class=&quot;label&quot; for=&quot;email&quot;&gt;E-Mail&lt;/label&gt;
&lt;input class=&quot;input&quot; id=&quot;email&quot; type=&quot;email&quot; /&gt;
&lt;/div&gt;
&lt;button class=&quot;btn btn--primary&quot; type=&quot;submit&quot;&gt;Senden&lt;/button&gt;
&lt;/form&gt;</code></pre>
</div>
<hr class="hr"/>
<form class="form" data-demo-form>
<div class="field">
<label class="label" for="fName">Name</label>
<input class="input" id="fName" name="name" type="text" placeholder="Vor- und Nachname" autocomplete="name" />
<div class="help">Pflichtfeld.</div>
</div>
<div class="field">
<label class="label" for="fEmail">E-Mail</label>
<input class="input" id="fEmail" name="email" type="email" placeholder="name@beispiel.de" autocomplete="email" />
<div class="help">Wir antworten i. d. R. innerhalb von 2 Werktagen.</div>
</div>
<div class="field">
<label class="label" for="fTopic">Thema</label>
<select class="select" id="fTopic" name="topic">
<option value="">Bitte wählen …</option>
<option>Allgemeine Anfrage</option>
<option>Kooperation / Träger</option>
<option>Dokumente / Nachweise</option>
</select>
</div>
<div class="field">
<label class="label" for="fMsg">Nachricht</label>
<textarea class="textarea" id="fMsg" name="msg" rows="5" placeholder="Kurze Beschreibung Ihres Anliegens …"></textarea>
</div>
<div class="field field--inline">
<label class="check">
<input type="checkbox" class="check__box" name="privacy" />
<span class="check__text">Datenschutzhinweise gelesen</span>
</label>
<span class="muted">Pflicht für Anfrage.</span>
</div>
<div class="row wrap">
<button class="btn btn--primary" type="submit">Senden</button>
<button class="btn btn--secondary" type="reset">Zurücksetzen</button>
</div>
<div class="form__status" aria-live="polite"></div>
</form>
</article>
<article class="card">
<div class="card__head">
<h3 class="h3">Zustände</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy="is-error + aria-invalid=true\nhelp + error Text"
data-copy-label="State-Regeln kopiert">⧉ Copy</button>
</div>
<div class="field is-error">
<label class="label" for="errEmail">E-Mail</label>
<input class="input" id="errEmail" type="email" value="name@" aria-invalid="true" />
<div class="error">Bitte eine gültige E-Mail-Adresse eingeben.</div>
</div>
<div class="field">
<label class="label" for="okEmail">E-Mail (ok)</label>
<input class="input" id="okEmail" type="email" value="name@beispiel.de" />
<div class="help">Beispiel für korrekte Eingabe.</div>
</div>
<div class="callout callout--info">
<div class="callout__title">Regel</div>
<div class="callout__text">Fehlertexte sind konkret, kurz, lösungsorientiert.</div>
</div>
</article>
</div>
</section>
<!-- Feedback -->
<section class="section" id="feedback">
<div class="section__head">
<h2 class="h2">Feedback</h2>
<p class="muted">Modal, Toast, Tooltip, Accordion/Tabs (kopierbar).</p>
</div>
<div class="grid grid--2">
<article class="card">
<div class="card__head">
<h3 class="h3">Modal</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy='<button class="btn btn--secondary" data-modal-open="#demoModal">Modal öffnen</button>'
data-copy-label="Modal-Trigger kopiert">⧉ Copy</button>
</div>
<div class="row wrap">
<button class="btn btn--secondary" type="button" data-modal-open="#demoModal">Modal öffnen</button>
<button class="btn btn--ghost" type="button" data-toast="Hinweis gespeichert.">Toast</button>
<button class="btn btn--ghost" type="button" data-tooltip="Kurzer, sachlicher Hinweis.">Tooltip</button>
</div>
<p class="muted">Modal: Esc schließt, Backdrop klick schließt, Fokus-Falle aktiv.</p>
</article>
<article class="card">
<div class="card__head">
<h3 class="h3">Accordion + Tabs</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy="data-accordion / data-tabs"
data-copy-label="Hooks kopiert">⧉ Copy</button>
</div>
<div class="tabs" data-tabs>
<div class="tabs__list" role="tablist" aria-label="Beispiel Tabs">
<button class="tab is-active" role="tab" aria-selected="true" aria-controls="tabA" id="tabBtnA">Leistung</button>
<button class="tab" role="tab" aria-selected="false" aria-controls="tabB" id="tabBtnB">Ablauf</button>
<button class="tab" role="tab" aria-selected="false" aria-controls="tabC" id="tabBtnC">Kontakt</button>
</div>
<div class="tabs__panel is-active" role="tabpanel" id="tabA" aria-labelledby="tabBtnA">
<p>Kurze, klare Beschreibung der Leistung.</p>
</div>
<div class="tabs__panel" role="tabpanel" id="tabB" aria-labelledby="tabBtnB">
<ol class="list"><li>Anfrage</li><li>Rückmeldung</li><li>Abstimmung</li></ol>
</div>
<div class="tabs__panel" role="tabpanel" id="tabC" aria-labelledby="tabBtnC">
<p>Kontaktmöglichkeiten für Träger.</p>
</div>
</div>
<div class="spacer"></div>
<div class="accordion" data-accordion>
<button class="acc__trigger" aria-expanded="false">
Was sind „Hilfen zur Erziehung“?
<span class="acc__icon" aria-hidden="true">⌄</span>
</button>
<div class="acc__panel" hidden>
<p class="muted">Kurz, neutral, ohne Pathos.</p>
</div>
<button class="acc__trigger" aria-expanded="false">
Wie läuft eine Anfrage über den Träger?
<span class="acc__icon" aria-hidden="true">⌄</span>
</button>
<div class="acc__panel" hidden>
<p class="muted">Schritte, Zuständigkeiten, Zeitrahmen.</p>
</div>
</div>
</article>
</div>
</section>
<!-- Layout -->
<section class="section" id="layout">
<div class="section__head">
<h2 class="h2">Layout</h2>
<p class="muted">Cards, Grid, Tables. Vorlagen für spätere Seiten.</p>
</div>
<div class="grid grid--2">
<article class="card">
<div class="card__head">
<h3 class="h3">Card</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy='<article class="card">…</article>'
data-copy-label="Card-HTML kopiert">⧉ Copy</button>
</div>
<p class="muted">Für Inhalt, nicht für Deko. Konsistente Abstände.</p>
<a class="link" href="#!">Mehr</a>
</article>
<article class="card">
<div class="card__head">
<h3 class="h3">Callout</h3>
<button class="btn btn--ghost btn--sm" type="button"
data-copy='<div class="callout callout--info"><div class="callout__title">Hinweis</div><div class="callout__text">…</div></div>'
data-copy-label="Callout-HTML kopiert">⧉ Copy</button>
</div>
<div class="callout callout--info">
<div class="callout__title">Hinweis</div>
<div class="callout__text">Ruhige Information ohne Alarmismus.</div>
</div>
</article>
<article class="card layout__table">
<div class="card__head">
<h3 class="h3">Tabelle</h3>
<button class="btn btn--ghost btn--sm" type="button" data-snippet-copy data-copy-label="Table-HTML kopiert">⧉ Copy</button>
</div>
<div class="tablewrap">
<table class="table">
<thead>
<tr><th>Dokument</th><th>Status</th><th>Aktion</th></tr>
</thead>
<tbody>
<tr><td>Leistungsbeschreibung</td><td><span class="badge badge--info">Entwurf</span></td><td><button class="btn btn--ghost btn--sm" type="button">Öffnen</button></td></tr>
<tr><td>Datenschutz</td><td><span class="badge badge--success">Final</span></td><td><button class="btn btn--ghost btn--sm" type="button">Öffnen</button></td></tr>
</tbody>
</table>
</div>
</article>
</div>
</section>
<!-- Patterns -->
<section class="section" id="patterns">
<div class="section__head">
<h2 class="h2">Patterns</h2>
<p class="muted">Basis-Sektionen für die spätere Website (Hero, Section, CTA).</p>
</div>
<article class="card">
<div class="card__head">
<h3 class="h3">Hero (Template)</h3>
<button class="btn btn--ghost btn--sm" type="button" data-snippet-copy data-copy-label="Hero-HTML kopiert">⧉ Copy</button>
</div>
<div class="snippet" data-snippet>
<pre class="snippet__code"><code>&lt;section class=&quot;hero&quot;&gt;
&lt;div class=&quot;hero__inner&quot;&gt;
&lt;h1 class=&quot;h1&quot;&gt;Hilfen zur Erziehung – strukturiert &amp; verlässlich&lt;/h1&gt;
&lt;p class=&quot;lead&quot;&gt;Informationen für öffentliche Träger und Kooperationspartner.&lt;/p&gt;
&lt;div class=&quot;row wrap&quot;&gt;
&lt;a class=&quot;btn btn--primary&quot; href=&quot;#kontakt&quot;&gt;Kontakt&lt;/a&gt;
&lt;a class=&quot;btn btn--secondary&quot; href=&quot;#leistungen&quot;&gt;Leistungen&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre>
</div>
<section class="hero">
<div class="hero__inner">
<h1 class="h1">Hilfen zur Erziehung – strukturiert &amp; verlässlich</h1>
<p class="lead">Informationen für öffentliche Träger und Kooperationspartner.</p>
<div class="row wrap">
<a class="btn btn--primary" href="#forms">Kontakt</a>
<a class="btn btn--secondary" href="#brand">Leitlinien</a>
</div>
</div>
</section>
</article>
</section>
<footer class="footer">
<span class="muted">JuConnect · Styleguide v0.2</span>
</footer>
</main>
</div>
<!-- Modal -->
<div class="modal" id="demoModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" hidden>
<div class="modal__backdrop" data-modal-close></div>
<div class="modal__panel" role="document">
<div class="modal__head">
<h2 class="h3" id="modalTitle">Beispiel-Modal</h2>
<button class="btn btn--ghost btn--icon" type="button" aria-label="Schließen" data-modal-close>✕</button>
</div>
<div class="modal__body">
<p class="muted">
Modals sparsam verwenden. Für kritische Bestätigungen oder komprimierte Prozesse.
</p>
</div>
<div class="modal__foot">
<button class="btn btn--secondary" type="button" data-modal-close>Abbrechen</button>
<button class="btn btn--primary" type="button" data-toast="Aktion bestätigt.">Bestätigen</button>
</div>
</div>
</div>
<!-- Toast container -->
<div class="toasts" aria-live="polite" aria-relevant="additions"></div>
<script src="./assets/js/app.js"></script>
</body>
</html>