← Hub
Component Library v1.0

Code, Preview, Block-Pattern.

Jede Component ist hier dokumentiert mit live Preview, kopierbarem HTML, dem zugeordneten Gutenberg-Block-Pattern-Slug und einem Verwendungs-Hinweis. Werte stammen aus tokens.css — nichts hart kodiert.

Buttons

Block-Pattern autismusstiftung/buttons · 5 Varianten

Alle Buttons sind pill-shaped (border-radius 50px), UPPERCASE, weight 700, letter-spacing 0.05em. Hover-Animation: leichtes Translate-Y und Schatten. Default ist btn-primary für die Hauptaktion einer Section.

Jetzt spenden Mehr erfahren Abbrechen Newsletter
Jetzt spenden Mehr erfahren
HTML
<a class="btn btn-primary">Jetzt spenden</a>
<a class="btn btn-outline-dark">Mehr erfahren</a>
<a class="btn btn-ghost">Abbrechen</a>
<a class="btn btn-sm btn-primary">Newsletter</a>

<!-- Auf dunkler Section -->
<a class="btn btn-outline">Mehr erfahren</a>
Verwendung. Höchstens ein btn-primary pro Section. Sekundäre CTAs als btn-outline-dark. Ghost nur für „Abbrechen"/„Schließen".

Section-Label (Eyebrow)

Block-Pattern autismusstiftung/section-label

Markenstil-Eyebrow mit Doppelstrich-Präfix (||). Steht oberhalb jeder H2. Magenta auf hell, weiß auf dunkel. Hilft Personas, schnell Sektionen zu scannen.

Vorsorge
Spenden
HTML
<div class="section-label">Vorsorge</div>
<div class="section-label sl-white">Spenden</div>  <!-- auf dunkel -->
Verwendung. Genau eine pro Section. Maximal 2 Wörter. Niemals als Headline-Ersatz.

Karten

Inline-Element · nicht als eigenes Pattern (in Patterns enthalten)

Drei Varianten: Standard-Card, Card mit Bild, Card mit Icon-Box. Alle weiß, Schatten --shadow-sm, Border-Radius --radius-md (14px). Auf Hover: Translate-Y -3 + Border-Color Magenta-Light.

Behindertentestament

Wie Sie Ihr Vermögen so vererben, dass es Ihrem Kind direkt zugutekommt.

HTML
<div class="card">
  <h3>Behindertentestament</h3>
  <p>Wie Sie Ihr Vermögen so vererben, dass es Ihrem Kind direkt zugutekommt.</p>
</div>

Hero-Patterns (4 Varianten)

Block-Pattern autismusstiftung/hero-standard · hero-dark · hero-split · hero-blob

Hero ist ACF-gesteuert (Snippet 64 — Hero-Config per ACF Page Meta). Acht Felder: Eyebrow, H1, H1-Highlight (pink), Lead, Primary-CTA-Text, Primary-CTA-Link, Secondary-CTA-Text, Secondary-CTA-Link.

Vorsorge
Was Sie heute regeln,
schützt morgen Ihr Kind.

Ein klar geregeltes Behindertentestament ist mehr als ein Dokument. Es ist die Sicherheit, dass Ihr Kind auch dann gut versorgt ist, wenn Sie nicht mehr da sind.

Beratung anfragen Mehr erfahren
HTML — Standard
<section class="hero hero-standard">
  <div class="container">
    <div class="section-label">Vorsorge</div>
    <h1>Was Sie heute regeln,<br>schützt morgen <span class="pink">Ihr Kind.</span></h1>
    <p class="lead">Ein klar geregeltes Behindertentestament ist mehr als ein Dokument...</p>
    <a class="btn btn-primary">Beratung anfragen</a>
    <a class="btn btn-outline-dark">Mehr erfahren</a>
  </div>
</section>
ACF Field Group (Snippet 64)
hero_eyebrow         (Text)         "Vorsorge"
hero_h1              (Text)         "Was Sie heute regeln,"
hero_h1_highlight    (Text)         "Ihr Kind."
hero_lead            (Textarea)     "Ein klar geregeltes Behindertentestament..."
hero_cta_primary     (Group)        text + link
hero_cta_secondary   (Group)        text + link
hero_variant         (Select)       standard | dark | split | blob
hero_image           (Image)        nur für split + blob
Verwendung. Genau ein Hero pro Seite (oben). Lead nicht länger als 2 Sätze. Variant blob nur mit hochwertigem Foto (nie Stockfotos).

FAQ-Akkordeon

Block-Pattern autismusstiftung/faq-accordion

Native HTML <details>/<summary> — kein JavaScript. FAQ-Schema-JSON-LD wird zwingend mit ausgeliefert (24 FAQs auf 5 Vorsorge-Pages registriert). Plus-Icon dreht 45° auf open.

Was ist ein Behindertentestament?

Ein Behindertentestament ist eine spezielle Testamentsform, mit der Sie Ihr Vermögen so weitergeben, dass es nicht vom Sozialamt verbraucht wird, sondern direkt Ihrem Kind im Autismus-Spektrum zugutekommt.

Brauche ich dafür einen Anwalt?

Wir empfehlen die Erstellung durch eine Fachanwältin oder einen Fachanwalt für Erbrecht. Wir vermitteln gerne erfahrene Ansprechpartnerinnen und Ansprechpartner in Ihrer Region.

Was kostet die Beratung?

Unser Erstgespräch ist immer kostenlos und unverbindlich. Anwaltliche Folgekosten sind transparent und richten sich nach RVG.

HTML
<details>
  <summary>Was ist ein Behindertentestament?</summary>
  <p>Eine spezielle Testamentsform, mit der Sie Ihr Vermögen so weitergeben...</p>
</details>
Pflicht-JSON-LD (Schema)
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Was ist ein Behindertentestament?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Eine spezielle Testamentsform, mit der..."
    }
  }]
}
</script>
Verwendung. Mindestens 3, höchstens 8 FAQs pro Block. Frage = ganzer Satz mit Fragezeichen. Antwort = 1–3 Sätze, max. 600 Zeichen.

Trust-Block

Block-Pattern autismusstiftung/trust-block

Stats-Grid mit Magenta-Zahlen auf Navy-Deep. Belegt Glaubwürdigkeit mit Zahlen statt Worten. Pflicht für: Spendenseite, „Über uns", Vorsorge-Pages.

9.152 €in Projekte 2025
12Projekte gefördert
21Jahre Erfahrung
100 %transparent
HTML
<section class="section-dark">
  <div class="container">
    <div class="trust-grid">
      <div><span class="num">9.152 €</span><span class="lbl">in Projekte 2025</span></div>
      <div><span class="num">12</span><span class="lbl">Projekte gefördert</span></div>
      <div><span class="num">21</span><span class="lbl">Jahre Erfahrung</span></div>
      <div><span class="num">100 %</span><span class="lbl">transparent</span></div>
    </div>
  </div>
</section>
Verwendung. 3 oder 4 Stats. Niemals nur Prozente. Mindestens eine Zahl muss konkret nachprüfbar sein (Geschäftsbericht).

Soft-CTA

Block-Pattern autismusstiftung/soft-cta

Inline-CTA-Karte zwischen Content-Blöcken. Hellpink, dezent, unterbricht den Lesefluss nur sanft. 9× auf der Spenden-Section eingesetzt — jede Seite-Sektion bekommt einen.

Sie haben Fragen?

Wir sind nur einen Anruf entfernt. Persönlich, kostenlos, unverbindlich.

Beratung anfragen
HTML
<div class="soft-cta">
  <h3>Sie haben Fragen?</h3>
  <p>Wir sind nur einen Anruf entfernt. Persönlich, kostenlos, unverbindlich.</p>
  <a class="btn btn-sm btn-primary" href="/kontakt/">Beratung anfragen</a>
</div>
Verwendung. Pro 600–800 Wörter ein Soft-CTA. CTA-Text muss zur Persona passen (Johanna: Beratung · Lisa: E-Book · Peter: persönliches Gespräch).

Persona-Trio

Block-Pattern autismusstiftung/persona-trio

Drei Cards nebeneinander, je eine pro Persona. Hintergrund mit Persona-Tint-Gradient (oben getintet, unten weiß). Standardbestandteil der Landingpages „Für Eltern" und „Für Angehörige".

55–75

Johanna

Besorgte Mutter im Ruhestand
30–50

Lisa

Engagierte Mutter
60–80

Peter

Engagierter Großvater
HTML
<div class="persona-trio">
  <div class="pc j">
    <div class="age">55–75</div>
    <h4>Johanna</h4>
    <div class="role">Besorgte Mutter im Ruhestand</div>
  </div>
  <div class="pc l">...</div>
  <div class="pc p">...</div>
</div>
Verwendung. Klassen .j, .l, .p setzen den Persona-Tint. Reihenfolge: J · L · P (alphabetisch egal, aber konsistent).

Newsletter-Form (Form 4)

Block-Pattern autismusstiftung/newsletter-form · FluentCRM-Form-ID 4

Multi-Listen-Auswahl: Allgemein (vorausgewählt), Aktuelle Recht-News, Buchtipp des Monats. Pflichtfelder: Vorname, Nachname, E-Mail. Pro angekreuzter Liste feuert ein conditional FluentCRM-Feed → die jeweilige Welcome-Sequenz startet. Spam-Schutz: Cloudflare Turnstile (compact-size, JS lädt MU-Plugin). DOI an alle Listen.

Was möchten Sie erhalten?
Geschützt durch Cloudflare Turnstile (compact)
Verwendung. Auf jeder Content-Seite (außer Spenden-Conversion-Pages). „Allgemein" ist immer vorausgewählt. mailto:-Links sind verboten — nutze die Form.
FluentCRM Setup
Form ID:        4
Lists (3):      Allgemein (default), News, Buchtipp
Tags:           Quelle:Newsletter-Footer (auto)
Funnel:         Welcome-Sequenz Persona-detected
DOI:            an, Wartezeit 30 Tage Auto-Cleanup
Captcha:        Turnstile compact (MU-JS lädt nach)

Persona-Bar / Audience-Tags (NICHT Breadcrumb!)

Block-Pattern autismusstiftung/persona-bar · optional, NICHT Pflicht

Was es ist: Ein schmaler Tag-Streifen direkt unter dem Header, der zeigt „diese Seite richtet sich an folgende Persona(s)". Klickbar zur jeweiligen Persona-Hub-Page (z.B. /fuer-eltern/).

Was es NICHT ist: Es ist kein Breadcrumb. Breadcrumb zeigt den Navigations-Pfad zur Seite (Home › Vorsorge › Behindertentestament). Persona-Bar zeigt Zielgruppen-Tags. Beide können koexistieren — meist reicht aber eines pro Seite.

Wann benutzen? Optional auf Inhalts-Pages, die klar an 1–2 Personas gerichtet sind (z.B. „Behindertentestament" → Tag „Für Eltern"). Auf Spenden-Conversion-Seiten und im Listing-Bereich (Einrichtungen) eher Breadcrumb verwenden.

Fuer Eltern Fuer Unterstuetzer Vorsorge
HTML
<div class="persona-bar">
  <a class="persona-tag persona-tag--lisa" href="/fuer-eltern/">Fuer Eltern</a>
  <a class="persona-tag persona-tag--peter" href="/fuer-unterstuetzer/">Fuer Unterstuetzer</a>
  <a class="persona-tag persona-tag--johanna" href="/vorsorge/">Vorsorge</a>
</div>
Verwendung. Direkt nach Header, vor Hero. Maximal 3 Tags pro Seite. Tag-Variante faerbt sich nach Ziel-Persona-Tint.

Values — 1·2·3·4 numbered

Block-Pattern autismusstiftung/values-numbered

Vier Karten mit Magenta-Grosszahl als „Wir lernen / teilen / inspirieren / fordern“-Sequenz. Standard-Block fuer „Ueber uns“-, Mission- und Werte-Sections.

1

Wir lernen.

Seit 20+ Jahren wachsen wir mit jeder Erfahrung.

2

Wir teilen.

Wir sprechen aus, was wir gelernt haben.

3

Wir inspirieren.

Wir feiern Fortschritte und motivieren.

4

Wir fordern.

Unwissenheit akzeptieren wir nicht.

HTML
<section class="values">
  <div class="value-card"><div class="value-num">1</div><h3>Wir lernen.</h3><p>...</p></div>
  <div class="value-card"><div class="value-num">2</div><h3>Wir teilen.</h3><p>...</p></div>
  <div class="value-card"><div class="value-num">3</div><h3>Wir inspirieren.</h3><p>...</p></div>
  <div class="value-card"><div class="value-num">4</div><h3>Wir fordern.</h3><p>...</p></div>
</section>
Verwendung. Genau 4 Karten. Aktiv-Verb am Anfang („Wir lernen.“). Magenta-Grosszahl ist Pflicht.

Two-Tiles (zwei nebeneinander)

Block-Pattern autismusstiftung/two-tiles

Zwei gleichgrosse Karten nebeneinander, Bild oben + Text unten. Fuer „Was wir machen“-Sections oder zum Verweisen auf zwei Hauptthemen.

Foerderung

Wir foerdern Projekte, die Menschen im Autismus-Spektrum direkt zugutekommen.

Aufklaerung

Wir bauen Verstaendnis in der Gesellschaft — mit Vortraegen, Inhalten, Begegnung.

HTML
<section class="two-tiles">
  <div class="card-img"><img src="..."><div class="card-body"><h3>Foerderung</h3><p>...</p></div></div>
  <div class="card-img"><img src="..."><div class="card-body"><h3>Aufklaerung</h3><p>...</p></div></div>
</section>
Verwendung. Genau 2 Tiles. Bilder gleicher Aspect-Ratio (16:9). Headline maximal 3 Woerter, Body 1 Satz.

Image-Text-Split (50/50, 40/60, 60/40)

Block-Pattern autismusstiftung/image-text-split

Klassisches Hero-darunter-Pattern: Foto links, Text rechts (oder umgekehrt). Fuer Geschichten, Projekt-Beschreibungen, „Ueber uns“-Vertiefung.

Geschichte

Wir kaempfen seit 1995 fuer die Rechte autistischer Menschen

Was als Elternverein begann, ist heute eine Stiftung mit 20+ Jahren Erfahrung.

Unsere Geschichte
HTML
<section class="image-text split-50">
  <div class="image-text-img"><img src="..."></div>
  <div class="image-text-body">
    <div class="section-label">Geschichte</div>
    <h2>Wir kaempfen seit 1995...</h2>
    <p>...</p>
    <a class="btn btn-primary">Unsere Geschichte</a>
  </div>
</section>
Verwendung. Varianten: .split-50 · .split-40-60 (Bild schmal) · .split-60-40 (Bild breit). Bild ist Pflicht — keine Stockfotos.

Card-Image

Inline-Element · Teil von Two-Tiles, Grid-3, Grid-4

Standard-Card mit Bild oben (16:9), Body unten. Hover-Lift wie Standard-Card. Fuer Blog-Listing, Projekt-Uebersicht, Teaser-Grids.

Vorsorge

Behindertentestament richtig gestalten

Was Sie heute regeln, schuetzt morgen Ihr Kind.

HTML
<article class="card-img">
  <img src="hero.jpg" alt="">
  <div class="card-body">
    <div class="card-eyebrow">Vorsorge</div>
    <h3>Behindertentestament richtig gestalten</h3>
    <p>Was Sie heute regeln, schuetzt morgen Ihr Kind.</p>
  </div>
</article>

Card-Icon

Inline-Element · fuer Feature-/Benefit-Grids

Card mit 52×52px Magenta-Icon-Box oben links. Fuer Features, Vorteile, Service-Uebersicht.

★

Persoenliche Beratung

Kostenlos, unverbindlich, 20+ Jahre Erfahrung.

HTML
<div class="card-icon">
  <div class="icon-box"><svg>...</svg></div>
  <h3>Persoenliche Beratung</h3>
  <p>Kostenlos, unverbindlich, 20+ Jahre Erfahrung.</p>
</div>
Verwendung. Icon-Box ist immer Magenta, immer 52×52, immer SVG. Headline 2–4 Woerter.

Full-CTA (Section auf Magenta)

Block-Pattern autismusstiftung/full-cta

Volle Section-Breite auf Magenta-HG mit grosser Headline + Primary-CTA. Wird sparsam eingesetzt — maximal 1× pro Seite, vor dem Footer.

Spenden

Jede Spende verbessert das Leben
eines Menschen im Autismus-Spektrum.

Jetzt spenden
HTML
<section class="full-cta">
  <div class="container">
    <div class="section-label sl-white">Spenden</div>
    <h2>Jede Spende verbessert das Leben...</h2>
    <a class="btn btn-primary-on-magenta">Jetzt spenden</a>
  </div>
</section>
Verwendung. Maximal 1× pro Seite. Headline emotional aber niemals Mitleid-triggernd. CTA-Button auf Magenta = weiss mit Magenta-Schrift (Sonderfall).

CTA-Bar (schmal, vor Footer)

Block-Pattern autismusstiftung/cta-bar · Pflicht in Page-Anatomy

Schmaler CTA-Streifen zwischen letzter Content-Section und Footer. „Nehmen Sie Kontakt auf“-Pattern. Auf JEDER Seite Pflicht — sonst hat der Leser am Ende keinen Anker.

Nehmen Sie Kontakt mit uns auf

Beratung anfragen
HTML
<div class="cta-bar">
  <div class="cta-bar-inner">
    <h3>Nehmen Sie Kontakt mit uns auf</h3>
    <a class="btn btn-primary" href="/kontakt/">Beratung anfragen</a>
  </div>
</div>
Verwendung. Pflicht-Element auf jeder Seite (ausser Conversion-Pages mit eigenem Hero-CTA). Hintergrund Navy-Mid, niemals Magenta (sonst kollidiert mit Full-CTA).

Page Anatomy — das universelle Skelett

Pflicht fuer JEDE Seite · Reihenfolge ist verbindlich

So sind alle Seiten der Autismus-Stiftung aufgebaut. Abweichungen brauchen eine begruendete Ausnahme. Wer mit dem Skelett startet, baut automatisch on-brand.

+---------------------------------------------------------+
|  1.  HEADER (sticky, Logo + Nav + Spenden-CTA)          |  <-- Locked v2.3
+---------------------------------------------------------+
|  2.  PERSONA-BAR (1-3 Tags)                              |  <-- optional
+---------------------------------------------------------+
|  3.  HERO (Eyebrow + H1 + Lead + 1-2 CTAs)              |  <-- genau 1 pro Seite
+---------------------------------------------------------+
|  4.  TRUST-BLOCK (Stats auf Navy)                        |  <-- Pflicht auf Spenden-/Ueber-Pages
+---------------------------------------------------------+
|  5.  CONTENT (Image-Text * Two-Tiles * Values * Cards)   |  <-- maximal 5 H2-Sections
|       Jede Section: Section-Label + H2 + Body            |
|       Soft-CTA pro 600-800 Woerter                       |
+---------------------------------------------------------+
|  6.  FAQ-AKKORDEON (3-8 Fragen + JSON-LD-Schema)         |  <-- Pflicht auf Vorsorge-Pages
+---------------------------------------------------------+
|  7.  RELATED / CROSS-LINK (3 Cards)                      |  <-- optional
+---------------------------------------------------------+
|  8.  FULL-CTA oder CTA-BAR                               |  <-- Pflicht: einer von beiden
+---------------------------------------------------------+
|  9.  FOOTER (4-Spalten + Bottom-Bar)                     |  <-- Locked v2.3
+---------------------------------------------------------+
Regel-Set
  • Header + Footer sind Locked-Components (v2.3, 2026-04-13). Werden vom Theme injiziert. Niemals neu bauen.
  • Genau 1 Hero pro Seite. Variant nach Kontext (Standard / Dark / Split / Blob).
  • Maximal 5 H2 pro Seite (Content-Sections). Mehr → Inhalt aufteilen auf mehrere Seiten.
  • Soft-CTA pro 600-800 Woerter. Persona-passender Text.
  • FAQ wenn die Seite eine Vorsorge-, Beratungs- oder How-To-Page ist (Pflicht inkl. JSON-LD-Schema).
  • Pflicht-Abschluss: entweder Full-CTA (Magenta) ODER CTA-Bar (Navy-Mid). Niemals beides, niemals keins.
  • Section-BG-Wechsel: Weiss → Gray (#F8F8F8) → Weiss → Navy → Weiss. Creme NUR als Akzent in Cards/Tints.
Test. Wenn du beim Bauen einer Seite eine Section nicht in Anatomy 1–9 einordnen kannst, ist sie wahrscheinlich ueberfluessig. Streichen oder neu denken.

Page Template — News-Artikel

Block-Pattern autismusstiftung/template-news-article · CPT post

Standard-Layout fuer Blog-Posts und News-Artikel. Auf single.php automatisch geladen. Neue Posts brauchen keine eigene Block-Anordnung — Featured-Image + Content reicht.

+---------------------------------------------------------+
|  HEADER + PERSONA-BAR (Tag = Kategorie + Persona)        |
+---------------------------------------------------------+
|  HERO (variant: standard, mit Featured-Image)            |
|   Eyebrow:     Kategorie + Datum                         |
|   H1:          Artikel-Titel                             |
|   Meta:        Autor * Lesedauer * Datum                 |
|   Featured:    16:9 Foto unter Lead                      |
+---------------------------------------------------------+
|  CONTENT (the_content() — Gutenberg-Blocks)            |
|   max. 5 H2  *  Soft-CTA pro 600-800 Woerter             |
|   Quote-Block fuer Zitate                                |
+---------------------------------------------------------+
|  CTA: NEWSLETTER-FORM (statt FAQ)                        |
|   "Diese Themen interessieren Sie? Newsletter abonnieren"|
+---------------------------------------------------------+
|  RELATED ARTICLES (3 Cards via tax_query)                |
+---------------------------------------------------------+
|  CTA-BAR (Navy-Mid)                                      |
+---------------------------------------------------------+
|  FOOTER                                                  |
+---------------------------------------------------------+
Pflicht-Felder
  • post_title — H1, max 70 Zeichen, Person-First
  • excerpt — Lead, 1-2 Saetze, max 160 Zeichen (auch Meta-Description)
  • featured_image — 1600×900 (16:9), authentisch, kein Stock
  • category — genau 1 (Vorsorge / Diagnose / Therapie / Inklusion / Stiftung)
  • tags — 3-5, Persona-Tags optional
  • author — sichtbar im Hero-Meta
JSON-LD (automatisch via Snippet 58)
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "{post_title}",
  "image": ["{featured_image}"],
  "datePublished": "{post_date}",
  "author": {"@type":"Person","name":"{author}"},
  "publisher": {"@type":"Organization","name":"Autismus-Stiftung"}
}
Verwendung. WP-Template single.php ruft dieses Pattern + the_content(). Redakteure muessen nur Blocks reinschreiben — Layout ist fix.

Page Template — Einrichtung (Listing)

Block-Pattern autismusstiftung/template-einrichtung · CPT job_listing

Standard-Layout fuer die 6.486 Einrichtungs-Detail-Pages. Wird auf single-job_listing.php automatisch geladen. ACF-Felder treiben den Inhalt — Redakteure aendern nur Daten, nie Layout.

+---------------------------------------------------------+
|  HEADER + BREADCRUMB (Hessen > Stadt > Einrichtung)      |
+---------------------------------------------------------+
|  HERO (variant: split-50)                                |
|   Links:  Foto / Logo der Einrichtung                    |
|   Rechts: Region-Tag * H1: Einrichtungsname              |
|           Lead: 1-Satz-Beschreibung                      |
|           CTAs: "Kontakt" + "Webseite"                  |
+---------------------------------------------------------+
|  QUICK-FACTS (Card-Icon-Grid 4-up)                       |
|   Traeger * Zielgruppe * Plaetze * Aufnahmealter         |
+---------------------------------------------------------+
|  SERVICES (Two-Tiles oder Card-Grid)                     |
|   Was bietet die Einrichtung an?                         |
+---------------------------------------------------------+
|  KONTAKT-BLOCK                                            |
|   Adresse + Telefon + E-Mail (obfuskiert) + OSM-Map      |
+---------------------------------------------------------+
|  RELATED LISTINGS (3 Cards same region/Traeger)          |
+---------------------------------------------------------+
|  CTA-BAR: "Wir vermitteln Ihnen einen Erstkontakt"       |
+---------------------------------------------------------+
|  FOOTER                                                  |
+---------------------------------------------------------+
ACF-Pflichtfelder (job_listing)
einrichtung_name        Text         (= post_title)
einrichtung_traeger     Text         "Lebenshilfe Kassel e.V."
einrichtung_region      Select       Hessen | Bayern | ... (Spur A: Hessen)
einrichtung_stadt       Text
einrichtung_strasse     Text
einrichtung_plz         Text
einrichtung_lat/lng     Number       fuer Karte
einrichtung_zielgruppe  Multi        Kinder | Jugendliche | Erwachsene
einrichtung_plaetze     Number
einrichtung_telefon     Text         als tel: erlaubt
einrichtung_email       Email        wird obfuskiert dargestellt
einrichtung_webseite    URL
einrichtung_foto        Image        16:9, 1600x900
JSON-LD (automatisch)
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "{einrichtung_name}",
  "address": {"@type":"PostalAddress","streetAddress":"{einrichtung_strasse}","postalCode":"{einrichtung_plz}","addressLocality":"{einrichtung_stadt}"},
  "geo": {"@type":"GeoCoordinates","latitude":"{lat}","longitude":"{lng}"},
  "telephone": "{einrichtung_telefon}"
}
Verwendung. 6.486 Listings nutzen dieses Template automatisch. Bei strukturellen Aenderungen muss EIN Pattern aktualisiert werden — alle Listings updaten sich.

Page Template — Buch / Produkt

Block-Pattern autismusstiftung/template-buch · CPT product (WC-Shop ID 23079)

Standard-Layout fuer Buchempfehlungen und Buch-Verkauf. Wird auf single-product.php in /buchempfehlungen/-Shop automatisch geladen. WooCommerce-Felder + ACF-Buch-Felder treiben den Inhalt.

+---------------------------------------------------------+
|  HEADER + BREADCRUMB (Buchempf. > Kategorie > Buch)      |
+---------------------------------------------------------+
|  HERO (variant: split-40-60)                             |
|   Links 40%:  Buchcover (Aspect 2:3)                    |
|   Rechts 60%: Section-Label "Sachbuch / Roman"           |
|               H1: Buchtitel                              |
|               Subtitle: Autor:in * Verlag * Jahr         |
|               Stars-Rating + WC-Preis                    |
|               CTAs: "In den Warenkorb" + "Leseprobe"    |
+---------------------------------------------------------+
|  BESCHREIBUNG (Content-Block)                            |
|   Klappentext + Empfehlung der Stiftung                  |
+---------------------------------------------------------+
|  AUTOR-BLOCK (Card-Image)                                |
|   Foto + Bio + Link zu Autor:in-Page                     |
+---------------------------------------------------------+
|  SPEC-TABELLE (technische Details)                       |
|   ISBN * Seiten * Sprache * Format * Erscheinungsdatum   |
+---------------------------------------------------------+
|  ERLOES-HINWEIS (Soft-CTA, Magenta-XLight)               |
|   "Der Erloes fliesst zu 100% in unsere Stiftungsarbeit" |
+---------------------------------------------------------+
|  RELATED BUECHER (3 Cards same category)                 |
+---------------------------------------------------------+
|  CTA-BAR: "Buecher passen zu Ihnen? Newsletter Buchtipp" |
+---------------------------------------------------------+
|  FOOTER                                                  |
+---------------------------------------------------------+
WC + ACF-Pflichtfelder (product)
// WooCommerce-Standard
product_title           Text         Buchtitel
product_image           Image        Cover, 600x900 (2:3)
product_short_desc      Text         Klappentext, 2-3 Saetze
product_long_desc       Editor       Volle Beschreibung
product_price           Number       in EUR
product_categories      Taxonomy     Sachbuch | Roman | Kinderbuch | ...

// Custom ACF
buch_autor              Text         "Maria Muster"
buch_autor_foto         Image
buch_autor_bio          Editor
buch_verlag             Text
buch_jahr               Number
buch_isbn               Text         "978-3-00-000000-0"
buch_seiten             Number
buch_sprache            Text         "Deutsch"
buch_format             Select       Hardcover | Taschenbuch | E-Book
buch_leseprobe_url      URL          PDF-Link
buch_empfehlung         Editor       "Wir empfehlen dieses Buch, weil..."
JSON-LD (automatisch)
{
  "@context": "https://schema.org",
  "@type": "Book",
  "name": "{product_title}",
  "author": {"@type":"Person","name":"{buch_autor}"},
  "isbn": "{buch_isbn}",
  "publisher": "{buch_verlag}",
  "datePublished": "{buch_jahr}",
  "offers": {"@type":"Offer","price":"{product_price}","priceCurrency":"EUR"}
}
Verwendung. Im WC-Shop unter /buchempfehlungen/. Erloes-Hinweis ist Pflicht — der Buch-Verkauf ist eine Spendenform mit Gegenleistung.

Form-Pack — Eingabe-Components

Native HTML-Forms mit ARIA, Keyboard-Navigation, WCAG 2.2 AA. Form-3 (Kontakt) und Form-4 (Newsletter) basieren darauf.

Text-Input

Atom · .as-input · Standard für Text-, Email-, Tel-Inputs
Pflichtfeld. So sprechen wir Sie an.
Diese E-Mail-Adresse ist nicht gültig. 
<div class="form-row">
  <label for="vorname">Vorname <span style="color:#b01f52" aria-hidden="true">*</span></label>
  <input id="vorname" type="text" class="as-input"
         required aria-required="true" aria-describedby="vorname-help">
  <span id="vorname-help" class="help">So sprechen wir Sie an.</span>
</div>
WCAG
2.2 AA: Label sichtbar, aria-required, Fehler via aria-invalid + role="alert"
Tokens
--color-magenta, --radius-sm, --duration-150
Varianten
type=text · email · tel · password · number · search

Select-Dropdown

Atom · .as-select · Native <select> für volle A11Y
Wir spielen Ihnen passende Inhalte aus. 
<select id="situation" class="as-select">
  <option value="">Bitte wählen ...</option>
  <option value="elternteil">Elternteil</option>
</select>
WCAG
Native <select> = volle Browser-A11Y, native Mobile-Picker
Erste Option
Pflicht: leerer Wert „Bitte wählen ..." damit Required validiert

Checkbox

Atom · .as-checkbox · Single oder Group
<label class="as-checkbox">
  <input type="checkbox" name="newsletter" checked>
  <span>Ich möchte den Newsletter abonnieren</span>
</label>
WCAG
Native <input type="checkbox"> in <label> — Click auf Text aktiviert
Touch-Target
≥ 44px durch Padding

Radio-Group

Atom · .as-radio in <fieldset> mit <legend>
Spendenhäufigkeit 
<fieldset>
  <legend>Spendenhäufigkeit</legend>
  <div class="as-radio-group" role="radiogroup">
    <label class="as-radio"><input type="radio" name="freq"><span>Einmalspende</span></label>
  </div>
</fieldset>
WCAG
<fieldset>/<legend> für Gruppierung. Pfeil-Tasten wechseln Auswahl (Browser nativ).

Date-Picker

Atom · native <input type="date"> mit min/max
Format: TT.MM.JJJJ 
<input type="date" class="as-input" min="1900-01-01" max="2026-12-31">
WCAG
Native = volle Browser-A11Y, Mobile öffnet System-Date-Picker
min/max
Pflicht — verhindert sinnlose Eingaben

UI-Pack — Interaktion

Toast, Modal, Tab — voll-funktional mit Focus-Trap und Keyboard-Navigation.

Toast / Notification

Component · .as-toast · Auto-Dismiss + Live-Region
// HTML — globale Live-Region irgendwo im DOM
<div role="status" aria-live="polite" aria-atomic="true" id="toast-region"></div>

// JS
function showToast(msg, type='info', duration=4000) {
  const t = document.createElement('div');
  t.className = 'as-toast ' + type;
  t.setAttribute('role','status');
  t.innerHTML = msg + '<button class="close" aria-label="Schließen">×</button>';
  document.body.appendChild(t);
  const close = () => t.remove();
  t.querySelector('.close').onclick = close;
  if (duration > 0) setTimeout(close, duration);
}
WCAG
role="status" + aria-live="polite" + aria-atomic="true"
Auto-Dismiss
Standard 4s, bei Errors 0 (manuell schließen)

Tab-Navigation

Component · .as-tabs · ARIA-Tablist mit Pfeil-Tasten

Einmalspenden helfen sofort — z.B. für Beratungstermine, Druckkosten, akute Familien-Notlagen.

<div class="as-tabs" role="tablist">
  <button role="tab" aria-selected="true" aria-controls="p1" id="t1" tabindex="0">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="p2" id="t2" tabindex="-1">Tab 2</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1" aria-hidden="false">...</div>
WCAG
ARIA-Tabs-Pattern: Pfeil-Links/Rechts, Home/End. tabindex="0" nur auf aktivem Tab.

Status-Pack — Listen & Loading

Pagination, Skeleton, Empty-State — Pflicht für jede Listen-Page.

Pagination

Component · .as-pagination · aria-current für aktive Seite
<nav class="as-pagination" aria-label="Seiten-Navigation">
  <button disabled>← Zurück</button>
  <a href="?page=3" aria-current="page" aria-label="Seite 3, aktuelle Seite">3</a>
  <a href="?page=4">Weiter →</a>
</nav>
WCAG
<nav> + aria-label, aria-current="page" auf aktive Seite

Skeleton-Loader

Component · .as-skeleton · Loading-State für Listen / Cards
<div aria-busy="true" aria-label="Inhalte werden geladen">
  <div class="as-skeleton box"></div>
  <div class="as-skeleton line medium"></div>
  <div class="as-skeleton line short"></div>
</div>
WCAG
aria-busy="true" auf Container
Reduced-Motion
Pulse-Animation respektiert prefers-reduced-motion
Varianten
.line, .line.short, .line.medium, .box, .circle

Empty-State

Component · .as-empty · Wenn Liste/Suche keine Ergebnisse hat

Keine Einrichtungen gefunden

Wir haben für Ihre Suche „autismus kassel kinder" keine passenden Einrichtungen. Probieren Sie weniger Filter oder eine andere PLZ.

Filter zurücksetzen 
<div class="as-empty">
  <div class="as-empty-icon" aria-hidden="true"><svg>...</svg></div>
  <h3>Keine Ergebnisse</h3>
  <p>Erklärung + Lösungs-Vorschlag</p>
  <a class="btn btn-primary" href="#">Aktion</a>
</div>
Pflicht-Inhalte
1. Icon (Lucide), 2. Headline, 3. Erklärung + Lösung, 4. CTA
Voice
Niemals „Hoppla!" oder „Ups!" — sachlich