Editorial: Kicker, Serif-Titel, Haarlinie bis zur rechten Meta-Angabe.

Instrument-Label: vertikaler Akzentbalken keyt den ganzen Block.

Overline-Kicker: durchgehende Haarlinie oben, Kicker darunter.

Kopf der Startseite.

Abschließendes CTA-Band.

Karussell (Auto-Advance, Hover-Pause).

Ratgeber

Was ist WordPress-Hosting? Der Unterschied zu normalem Hosting

Von Advanced Content Systems12. Juni 20268 Min. Lesezeit

Bevor die erste Website online gehen kann, braucht sie einen Ort, an dem sie wohnt. Wir erklären, was Hosting überhaupt ist, worin sich WordPress-Hosting davon unterscheidet — und worauf es für Einsteiger wirklich ankommt.

Weiterlesen→

Ratgeber

Lokal oder gehostet? So triffst du die richtige Wahl

Von Advanced Content Systems8. Juni 20266 Min. Lesezeit

Auf dem eigenen Rechner testen oder gleich online gehen? Wir wägen Tempo, Kosten und Kontrolle ab — damit du weißt, welcher Weg zu deinem Projekt passt.

Weiterlesen→

Werkzeuge

Die ersten Plugins: schlank starten, sinnvoll erweitern

Von Advanced Content Systems3. Juni 20265 Min. Lesezeit

Weniger ist mehr: eine kleine, verlässliche Auswahl bringt dich weiter als ein überladenes System. Wir zeigen, worauf es am Anfang wirklich ankommt.

Weiterlesen→

Dashboard mit allen Kachel-Typen.

Karten-Raster externer Quellen.

Eigenständige Fakten-Karte.

Fließtext-Grundbaustein. Ein Rich-Text-Slot (strong · em · a · code).

Definitionsbox — Begriff + Bedeutung als semantische <dl>. Zwei Slots: term, definition.

Section-Überschrift — <h2>–<h4> per level-Prop, mit stabiler Anker-id. Ein Rich-Text-Slot.

Container-Karte (note/tip/warning) mit Icon + optionalem Titel (sonst Variant-Label); rendert Kind-Elemente aus DATEN über den BlockRenderer.

Artikel-Kopf — Eyebrow, <h1>-Titel, Meta-Byline (Autor · <time> · Lesezeit), Untertitel + optionales Cover. Ein config = das vault-inputSchema; hier ohne Cover (der bildlose Standard).

Einfache Liste — <ul> (Standard) oder <ol> per ordered-Prop. Kein Kasten; jedes Element ist Rich-Text (strong · em · a · code).

Struktur-Teaser: Medien-Region (mediaType img/video) plus benannte Slots — Eyebrow · verlinkbarer Titel · Meta · Excerpt · CTA. Neutraler Standard = vertikale Karte; erst das .blog-hero-Skin macht daraus den Spotlight (siehe Blog-Hero). Platzhalter = eigenes Motiv.

Kategorie

Der Titel der Karte — als Link

Von Advanced Content Systems14. Juli 20265 Min. Lesezeit

Ein kurzer Anrisstext. Neutrale Typografie über die --acs-*-Tokens; erst ein Skin verändert Anordnung und Look der Karte.

Weiterlesen→

Alle Slots außer der Medien-Region sind optional — hier ohne Eyebrow, Meta, Excerpt und CTA.

Minimal: nur Bild und Titel

Reines Maschinenwerk um beliebige Block-Nodes — Crossfade, Auto-Advance, Play/Pause, Pfeile, Punkte, reduced-motion, Live-Region. Folien absichtlich gemischt (Callout · Definition · Paragraph); das Karussell schaut nie hinein. Unskinned — Viewport-Fläche und Seiten-Gutter kommen erst vom Consumer-Skin (siehe Blog-Hero).

Interaktive Bild-Annotation (Tab-Muster): nummerierte Marker über dem Bild (Position in %); ein Klick blendet unten den zugehörigen Text ein. Optionaler Startzustand (Titel + Text, ohne Nummer) vor der ersten Auswahl — hier aktiv; danach genau ein Marker aktiv. Optionaler Titel je Punkt (mit Nummer) — der letzte Punkt zeigt den titellosen Fall. Optionale `region` (Rechteck) je Punkt: die Fläche bleibt transparent, alles außerhalb dunkelt mit weichem, unscharfem Verlauf ab (gleitet sanft zwischen Regionen); der letzte Punkt hat keine. Pfeil-/Pos1-/Ende-Tasten wandern durch die Marker. Standard-Marker sind Buchstaben (A, B, C…); `isOrdered: true` nummeriert sie (hier aktiv). Platzhalter = eigenes WP-Admin-Mock. Zweites interaktives Element nach dem Karussell.

1234

Startzustand

Optionaler Intro-Text (Titel + Beschreibung, ohne Nummer). Solange er sichtbar ist, ist kein Marker aktiv — ein Klick wählt einen aus.

Geführter Mehrschritt-Prozess (Lesemodus): oben ein gemeinsamer, nummerierter Stepper (Sprungmarken), darunter jeder Schritt inline gestapelt — eine Karte mit Screenshot + optionalem `region`-Spotlight und nummerierter Bildunterschrift. Die Schritt-Nummer ist GLOBAL (1…N) und läuft über alle Bilder durch, startet also nie neu. Ein Klick auf eine Nummer scrollt zum Schritt; beim Scrollen hebt der Stepper den sichtbaren Schritt hervor (Scroll-Spy). Alles ist serverseitig gerendert und funktioniert ohne JS (der Stepper sind reine Anker). Der letzte Schritt zeigt den Fall ohne Spotlight. Die Verbindungslinie zwischen den Karten ist optional (`vertical: { connector: false }`); modus-spezifische Optionen liegen in eigenen Unter-Objekten, nicht flach. Platzhalter = eigenes WP-Admin-Mock (mehrfach verwendet, um die durchlaufende Nummerierung zu zeigen). Drittes interaktives Element — die Verallgemeinerung einer geordneten hotspot-image über mehrere Bilder.

Derselbe Prozess im WIZARD-Modus (`mode: 'wizard'`): nur EIN Schritt sichtbar, die übrigen bleiben im DOM (hidden → weiter crawlbar; das Tab-Muster, das Google voll wertet). Navigation über den horizontalen, scrollbaren Nummern-Indikator mit Chevron-Buttons links/rechts; Pfeil-/Pos1-/Ende-Tasten wandern durch die Tabs, der aktive bleibt zentriert. Modus-spezifische a11y-Texte liegen im `wizard`-Unterobjekt (`wizard: { labels: { prev, next } }`).

1234

Menü öffnen

Im linken Menü wählst du den gewünschten Bereich — im Wizard wird nur dieser Schritt gezeigt.

Eigenständiges Inhaltsbild — <figure> + <img> + optionale Rich-Text-<figcaption>. `alt` ist im Schema PFLICHT (leer nur bei rein dekorativen Bildern), `width`/`height` reservieren den Platz (kein CLS), `loading` ist standardmäßig `lazy`. Layout-neutral: Breiten-Varianten (Satzspiegel / breit / randlos) kommen über den `className`-Hook (z. B. `.blog-post-bleed`), nicht über ein `size`-Enum. Nicht zu verwechseln mit acs/media-card (Teaser-Karte) oder acs/hotspot-image (annotiertes Bild).

Der optionale `credit`-Block — Attribution im selben <figcaption>, nur leiser und in eigener Zeile. Drei feste, je optionale Teile (author · source · license), jeder wird verlinkt, sobald sein `*Href` gesetzt ist; die Trenn-Middots dazwischen sind dekoratives CSS. Das `label` ist DATEN, kein CSS-`::before` — bleibt so im DOM (crawlbar, übersetzbar, vorlesbar) und das Element trifft keine Sprachannahme. `license` braucht nur, wer es braucht: bei Openverse/CC Pflicht, bei Unsplash/Pexels unnötig.

Mit `href` wird NUR das Bild zum Link — die Bildunterschrift bleibt außerhalb, damit deren eigene Links nicht darin verschachteln. Ohne `caption` entfällt die <figcaption> ganz; der Fokusring liegt auf dem Link.

Der eigenständige Link — ein <a> als eigener Block (CTA, Weiterlesen, externe Quelle), NICHT der Inline-Link im Fließtext (das bleibt der rich-text-`link`-Knoten). Rendert immer ein <a>, nie einen <button>: ein Link FÜHRT irgendwohin, ein Button TUT etwas. `label` ist bewusst ein einfacher String — Rich Text könnte einen Link-Knoten enthalten und damit ein <a> im <a> verschachteln. Die drei `variant`s landen als `data-variant` am selben <a>, das Produkt skinnt darüber.

`newTab: 'auto'` (Standard) entscheidet an der URL: eine EXTERNE (mit Schema/protokoll-relativ) öffnet einen neuen Tab und bekommt `target=_blank rel='noopener noreferrer'`, das Richtungszeichen wird „↗“ statt „→“ — und ein visuell verborgener Hinweis „(öffnet in neuem Tab)“ reist IM Link mit, damit Screenreader ihn als Teil des Links vorlesen. Der Pfeil selbst ist dekorativ (aria-hidden). Text kommt aus der neutralen Label-Registry, die wp-prof einmalig im Seam setzt — die Bibliothek selbst bleibt sprachneutral. `newTab: 'never'` bzw. `'always'` überstimmt die URL-Entscheidung.

Die Pause im Fließtext — dort, wo eine Überschrift zu laut wäre. Ein echtes <hr>, kein dekoriertes <div>: es IST ein thematischer Bruch, und die Semantik ist der Punkt (Screenreader kündigen die Trennung an, die Bedeutung überlebt auch ohne CSS). Zwei Varianten = die zwei Linien-Familien der Design-Sprache: „hairline" (Standard) ist der neutrale Trenner, „shimmer" die Marken-Kante (derselbe Verlauf wie die Regel über dem Post-Header-Lead) — lauter, deshalb selten.

Der Fluss-Hinweis nach unten — das visuelle „und dann…", das den Blick zum nächsten Block trägt (etwa als Anlauf zu einem CTA). Rein dekorativ und deshalb aria-hidden: er wiederholt nur die Reihenfolge, in der die Blöcke ohnehin stehen. EIN einziger <path> — und das ist der Kern: als zwei Formen gezeichnet müssen Schaft und Kopf sich überlappen, und bei TRANSLUZENTER Farbe addieren sich überlappende Formen zu einem sichtbar helleren Fleck an der Spitze. Ein einzelner Pfad wird als EINE Fläche gestrichen und nur einmal gefüllt — bleibt also flach, egal wie seine Teilpfade sich kreuzen; Linienbreite und Chevron-Strich sind dadurch per Konstruktion derselbe Strich. Die Geometrie wird aus `height` (Standard 90px) in px gegen eine 1:1-viewBox BERECHNET, statt eine feste viewBox zu skalieren: so bleibt die Strichstärke ehrlich (2 = 2px bei jeder Höhe) und der Chevron ungestreckt — die Höhe verlängert nur den Schaft. `weight` (Standard 2px) ist die EINE Strichstärke — nicht zwei, die synchron gehalten werden: Schaft und Chevron SIND derselbe Strich. Sie bemisst auch die Box, die sich um ihre Hälfte einrückt, damit die runden Enden nicht abgeschnitten werden (hier: 1px und 4px).

Tabellarische Daten: eine echte <table> mit echten Headern (<th scope="col">, optional <th scope="row">) — nur so wird eine Zelle mit ihrer Spalte UND ihrer Zeile angesagt; genau dafür ist es eine Tabelle und kein div-Raster. „unboxed" (Standard) ist die nackte redaktionelle Tabelle: Haarlinien als Zeilentrenner, dieselbe Linien-Familie wie acs/divider, keine Fläche. `rowHeader` macht die erste Zelle jeder Zeile zum Zeilen-Header. `align: 'end'` bekommt zusätzlich `tabular-nums` — Ziffern stehen stellenrichtig untereinander.

Dieselbe Tabelle auf der gemeinsamen Karten-Fläche — dieselben Tokens, auf denen acs/definition und acs/callout sitzen, damit die drei als Geschwister lesen. Kein neues Aussehen, nur die vorhandene Fläche. Die Box bekommt KEIN Padding: sie ist der Scroll-Container, und dessen nachlaufendes Padding ist unzuverlässig — die Zellen rücken den Inhalt selbst ein.

`columns` ist optional — ohne Labels entfällt der <thead> ganz (hier eine reine Schlüssel/Wert-Tabelle). `columns` darf trotzdem angegeben werden, nur um die Ausrichtung zu deklarieren. Zellen sind Rich Text: Auszeichnungen, Links und Code funktionieren darin. Ohne `caption` bekommt der Wrapper KEINE `role=region` — eine unbenannte Region wird ohnehin nicht als Landmark ausgegeben, die Rolle wäre also nur Rauschen.

`captionSide` (Standard „top") verschiebt die Beschriftung unter die Tabelle. Oben ist der Normalfall — so will es sowohl der HTML-Standard als auch die Typografie-Konvention: eine TABELLE wird oben beschriftet, eine ABBILDUNG unten (deshalb sitzt die figcaption von acs/image darunter). Dahinter steckt eine Logik: die Tabellen-Beschriftung ist ein Label, das man VOR dem Lesen der Zeilen braucht; eine Bildunterschrift kommentiert etwas, das man schon gesehen hat. „bottom" ist für die Fälle, in denen eine Überschrift direkt darüber die Tabelle bereits benennt. Der Abstand wandert mit: er liegt immer an der Kante ZUR Tabelle hin.

Der Marker ist KEIN eigenes Element, sondern eine Auszeichnung der gemeinsamen Rich-Text-Grammatik (`{ type: 'mark', text }` → <mark>) — denn eine Markierung liegt INNERHALB eines Satzes, ein Element ist ein Block im Content-Baum. Dieselbe Grenze wie bei acs/link. Dadurch kann JEDES textführende Element markieren: Absatz, Tabellenzelle, Listenpunkt, Bildunterschrift, Callout — auch die, die es noch nicht gibt. Schwarz auf dem Orange erreicht 9,2:1 (AAA); Weiß käme auf 2,1:1 und würde durchfallen — die dunkle Tinte ist also eine Kontrast-Anforderung, kein Geschmack. Über mehrere Zeilen bekommt dank `box-decoration-break: clone` JEDES Fragment Polsterung und Radius.