diff --git a/assets/antrag/darc-antrag.css b/assets/antrag/darc-antrag.css
new file mode 100644
index 0000000..263f33e
--- /dev/null
+++ b/assets/antrag/darc-antrag.css
@@ -0,0 +1,273 @@
+/* ==========================================================================
+ DARC Mitgliedsantrag – Buttons, Banner & Floating CTA
+ Feste, kontrastgeprüfte Palette (nicht durch Redakteure änderbar):
+ Hintergrund #2aa6da (DARC-Blau)
+ Schrift #16294a (Dunkelnavy) → Kontrast 5,2:1
+ Hover #4cb8e6 (aufgehellt) → Kontrast 6,4:1
+ ========================================================================== */
+
+.darc-antrag {
+ --darc-blue: #00ADEF;
+ --darc-blue-hover: #4cb8e6;
+ --darc-navy: #16294a;
+ --darc-radius: 5px;
+ --darc-font: inherit;
+ font-family: var(--darc-font);
+ line-height: 1.4;
+}
+
+/* ==========================================================================
+ Buttons
+ ========================================================================== */
+.darc-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.55em;
+ padding: 0.75em 1.4em;
+ min-height: 44px;
+ box-sizing: border-box;
+ font-size: 1rem;
+ text-decoration: none;
+ color: #fff;
+ border-radius: var(--darc-radius);
+ border: 2px solid transparent;
+ cursor: pointer;
+ transition: transform .12s ease, background-color .12s ease, color .12s ease;
+ -webkit-tap-highlight-color: transparent;
+}
+.darc-btn:hover { transform: translateY(-1px); }
+.darc-btn:focus-visible { outline: 3px solid var(--darc-navy); outline-offset: 2px; }
+
+.darc-btn__icon { display: inline-flex; }
+.darc-btn__label { white-space: nowrap; }
+.darc-btn__arrow { width: 1.1em; height: 1.1em; transition: transform .12s ease; }
+.darc-btn:hover .darc-btn__arrow { transform: translateX(3px); }
+.darc-icon { width: 1.25em; height: 1.25em; }
+
+/* Primär (gefüllt): Navy-Schrift auf DARC-Blau */
+.darc-btn--primary {
+ background: var(--darc-blue);
+ color: #fff;
+}
+.darc-btn--primary:hover {
+ background: var(--darc-blue-hover);
+ color: #fff;
+}
+
+/* Outline: Navy-Schrift, blauer Rahmen */
+.darc-btn--outline {
+ background: transparent;
+ color: #fff;
+ border-color: var(--darc-blue);
+}
+.darc-btn--outline:hover {
+ background: var(--darc-blue);
+ color: #fff;
+}
+
+/* Pille mit Icon */
+.darc-btn--pill {
+ background: var(--darc-blue);
+ color: #fff;
+ border-radius: 999px;
+ padding: 0.7em 1.5em;
+}
+.darc-btn--pill:hover { background: var(--darc-blue-hover); color: #fff; }
+
+/* ==========================================================================
+ Banner – breit (Streifen)
+ ========================================================================== */
+.darc-banner {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem 1.5rem;
+ padding: 1.25rem 1.5rem;
+ border-radius: 14px;
+ background: var(--darc-blue);
+ color: var(--darc-navy);
+}
+.darc-banner__body { display: flex; align-items: center; gap: 1rem; min-width: 0; }
+.darc-banner__icon .darc-icon { width: 2.2em; height: 2.2em; }
+.darc-banner__headline { margin: 0; font-size: 1.3rem; font-weight: 800; }
+.darc-banner__sub { margin: .15rem 0 0; font-size: .95rem; }
+/* CTA auf dem blauen Banner: weiße Fläche mit Navy-Schrift (hoher Kontrast).
+ Dezente Navy-Outline, damit der Button auch auf sehr hellen Seiten und am
+ helleren Rand des Banners klar abgegrenzt bleibt. */
+.darc-banner__cta {
+ background: #ffffff;
+ color: var(--darc-navy);
+ border-color: rgba(22, 41, 74, .3);
+ box-shadow: none;
+ flex-shrink: 0;
+}
+.darc-banner__cta:hover {
+ background: #eaf6fc;
+ color: var(--darc-navy);
+ border-color: rgba(22, 41, 74, .55);
+}
+
+/* ==========================================================================
+ Banner – Karte mit Vorteilen
+ ========================================================================== */
+.darc-card {
+ max-width: 420px;
+ padding: 1.5rem;
+ border-radius: 16px;
+ background: #ffffff;
+ border: 1px solid #e4eef3;
+ color: var(--darc-navy);
+}
+.darc-card__head { display: flex; align-items: center; gap: .75rem; }
+.darc-card__icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.6rem; height: 2.6rem;
+ border-radius: 50%;
+ background: var(--darc-blue);
+ color: var(--darc-navy);
+ flex-shrink: 0;
+}
+.darc-card__icon .darc-icon { width: 1.4em; height: 1.4em; }
+.darc-card__headline { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--darc-navy); }
+.darc-card__sub { margin: .85rem 0 0; font-size: .95rem; opacity: .85; }
+.darc-card__benefits {
+ list-style: none !important;
+ margin: 1rem 0 1.25rem;
+ padding: 0;
+ display: grid;
+ gap: .5rem;
+}
+/* !important, damit eingebettete Host-Themes (z. B. darc.de) keine Aufzählungs-
+ punkte auf die li zurückbringen. */
+.darc-card__benefits li {
+ list-style: none !important;
+ position: relative;
+ margin: 0;
+ padding-left: 1.6rem;
+ font-size: .95rem;
+}
+.darc-card__benefits li::marker { content: none; }
+.darc-card__benefits li::before {
+ content: "";
+ position: absolute;
+ left: 0; top: .15rem;
+ width: 1.1rem; height: 1.1rem;
+ background: no-repeat center/contain
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316294a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
+}
+.darc-card__cta { width: 100%; justify-content: center; }
+
+/* Schmale Sidebar-Variante (max. 240px) ---------------------------------- */
+.darc-card--sidebar {
+ max-width: 240px;
+ padding: 1rem;
+ border-radius: 14px;
+}
+.darc-card--sidebar .darc-card__head {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: .5rem;
+}
+.darc-card--sidebar .darc-card__icon { width: 2.1rem; height: 2.1rem; }
+.darc-card--sidebar .darc-card__headline {
+ font-size: .95rem;
+ line-height: 1.2;
+ hyphens: none;
+ text-wrap: balance; /* falls doch zwei Zeilen: ausgewogen statt einzelnes Wort */
+}
+.darc-card--sidebar .darc-card__sub { margin-top: .55rem; font-size: .85rem; }
+.darc-card--sidebar .darc-card__benefits {
+ margin: .85rem 0 1rem;
+ gap: .4rem;
+}
+.darc-card--sidebar .darc-card__benefits li {
+ padding-left: 1.4rem;
+ font-size: .82rem;
+ line-height: 1.35;
+}
+.darc-card--sidebar .darc-card__benefits li::before {
+ width: .95rem; height: .95rem; top: .1rem;
+}
+.darc-card--sidebar .darc-card__cta {
+ padding: .6em 1em;
+ font-size: .92rem;
+}
+
+/* ==========================================================================
+ Text-Link (dezent)
+ ========================================================================== */
+.darc-inline-link {
+ display: inline-flex;
+ align-items: center;
+ gap: .4em;
+ color: var(--darc-navy);
+ font-weight: 600;
+ text-decoration: none;
+ border-bottom: 1px solid transparent;
+}
+.darc-inline-link .darc-icon { width: 1.1em; height: 1.1em; }
+.darc-inline-link__arrow { width: 1em; height: 1em; transition: transform .12s ease; }
+.darc-inline-link:hover { border-bottom-color: currentColor; }
+.darc-inline-link:hover .darc-inline-link__arrow { transform: translateX(3px); }
+
+/* ==========================================================================
+ Floating CTA (mitlaufend)
+ ========================================================================== */
+.darc-floating {
+ position: fixed;
+ bottom: 1.25rem;
+ z-index: 9999;
+ display: inline-flex;
+ align-items: stretch;
+ border-radius: 8px;
+ background: var(--darc-blue);
+ color: var(--darc-navy);
+ transform: translateY(140%);
+ opacity: 0;
+ transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, background-color .12s ease;
+}
+.darc-floating--right { right: 1.25rem; }
+.darc-floating--left { left: 1.25rem; }
+.darc-floating.is-visible { transform: translateY(0); opacity: 1; }
+.darc-floating[hidden] { display: none; }
+.darc-floating:hover { background: var(--darc-blue-hover); }
+
+.darc-floating__link {
+ display: inline-flex;
+ align-items: center;
+ gap: .55em;
+ padding: 0.8em 1.3em;
+ color: #fff;
+ text-decoration: none;
+ border-radius: 8px;
+}
+.darc-floating__icon .darc-icon { width: 1.3em; height: 1.3em; }
+.darc-floating__close {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.2em;
+ padding: 0 .6em 0 .2em;
+ background: transparent;
+ border: 0;
+ border-left: 1px solid rgba(22, 41, 74, .3);
+ color: #fff;
+ cursor: pointer;
+ border-radius: 0 8px 8px 0;
+}
+.darc-floating__close svg { width: 1.1em; height: 1.1em; }
+.darc-floating__close:hover { background: rgba(22, 41, 74, .12); }
+.darc-floating :focus-visible { outline: 2px solid var(--darc-navy); outline-offset: 2px; }
+
+@media (max-width: 480px) {
+ .darc-floating { left: 1rem; right: 1rem; justify-content: center; }
+ .darc-floating__label { font-size: .95rem; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .darc-btn, .darc-btn__arrow, .darc-floating, .darc-inline-link__arrow { transition: none; }
+ .darc-btn:hover { transform: none; }
+}
diff --git a/assets/antrag/floating-cta.js b/assets/antrag/floating-cta.js
new file mode 100644
index 0000000..3a61641
--- /dev/null
+++ b/assets/antrag/floating-cta.js
@@ -0,0 +1,98 @@
+/**
+ * DARC Mitgliedsantrag – Floating CTA
+ *
+ * Blendet den mitlaufenden Button automatisch nach kurzer Verzögerung ein,
+ * damit er auch auf großen Bildschirmen / kurzen Seiten ohne Scrollen sichtbar
+ * ist. Wird vorher gescrollt, erscheint er sofort.
+ *
+ * Es werden KEINE personenbezogenen Daten und keine dauerhaften Marker
+ * gespeichert – nur ein sessionStorage-Flag pro Element, das beim Schließen des
+ * Tabs verfällt.
+ */
+(function () {
+ 'use strict';
+
+ var REVEAL_DELAY = 800; // ms: spätestens nach dieser Zeit einblenden.
+ var REVEAL_AFTER = 200; // px Scroll-Tiefe, ab der sofort eingeblendet wird.
+
+ function storageKey(el) {
+ return 'darcFloatingDismissed_' + (el.getAttribute('data-uid') || '0');
+ }
+
+ function isDismissed(el) {
+ if (el.getAttribute('data-dismissible') !== '1') {
+ return false;
+ }
+ try {
+ return window.sessionStorage.getItem(storageKey(el)) === '1';
+ } catch (e) {
+ return false;
+ }
+ }
+
+ function dismiss(el) {
+ el.classList.remove('is-visible');
+ window.setTimeout(function () { el.setAttribute('hidden', 'hidden'); }, 350);
+ try {
+ window.sessionStorage.setItem(storageKey(el), '1');
+ } catch (e) { /* sessionStorage nicht verfügbar – egal */ }
+ }
+
+ function reveal(el) {
+ el.removeAttribute('hidden');
+ // Doppeltes rAF, damit der Display-Wechsel die Transition auslöst.
+ window.requestAnimationFrame(function () {
+ window.requestAnimationFrame(function () { el.classList.add('is-visible'); });
+ });
+ }
+
+ function setup(el) {
+ if (isDismissed(el)) {
+ return;
+ }
+
+ var closeBtn = el.querySelector('.darc-floating__close');
+ if (closeBtn) {
+ closeBtn.addEventListener('click', function () { dismiss(el); });
+ }
+
+ var shown = false;
+ var timer = null;
+
+ function show() {
+ if (shown) {
+ return;
+ }
+ shown = true;
+ window.removeEventListener('scroll', onScroll);
+ if (timer) {
+ window.clearTimeout(timer);
+ }
+ reveal(el);
+ }
+
+ function onScroll() {
+ if ((window.pageYOffset || document.documentElement.scrollTop) > REVEAL_AFTER) {
+ show();
+ }
+ }
+
+ // Garantierte Einblendung nach kurzer Verzögerung (auch ohne Scrollen).
+ timer = window.setTimeout(show, REVEAL_DELAY);
+ // Früher einblenden, sobald der Besucher scrollt.
+ window.addEventListener('scroll', onScroll, { passive: true });
+ }
+
+ function init() {
+ var elements = Array.prototype.slice.call(
+ document.querySelectorAll('[data-darc-floating]')
+ );
+ elements.forEach(setup);
+ }
+
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', init);
+ } else {
+ init();
+ }
+})();
diff --git a/templates/html/page.html b/templates/html/page.html
index d05dc54..a5b2482 100644
--- a/templates/html/page.html
+++ b/templates/html/page.html
@@ -9,6 +9,7 @@
+
@@ -16,6 +17,7 @@
+
@@ -164,7 +166,31 @@
-
+
+