Dokumentation

<section class="fwt-cta">
    <p class="fwt-cta-kicker">FWT Baustein</p>

    <h3 class="fwt-cta-title">
        Ein klarer Aktionsbereich für wichtige Hinweise
    </h3>

    <p class="fwt-cta-text">
        CTA-Blöcke verbinden kurze Erklärung mit einer konkreten Handlung.
        Sie eignen sich für Startseiten, Toolseiten, Downloads oder Projektbereiche.
    </p>

    <div class="fwt-cta-actions">
        <a class="fwt-btn fwt-btn-primary" href="#">Mehr erfahren</a>
        <a class="fwt-btn fwt-btn-secondary" href="#">Dokumentation öffnen</a>
    </div>
</section>

<section class="fwt-cta fwt-cta-hero fwt-cta-primary">
    <p class="fwt-cta-kicker">Freie Webtools</p>

    <h3 class="fwt-cta-title">
        Bausteine, die nicht nur funktionieren, sondern verstanden werden
    </h3>

    <p class="fwt-cta-text">
        FWT soll Webseiten, Dokus, Tools und Adminbereiche schneller und klarer
        aufbauen helfen. Mit sichtbaren Beispielen, verständlichen Klassen und
        erweiterbaren Komponenten.
    </p>

    <ul class="fwt-cta-meta">
        <li>modular</li>
        <li>barrierearm</li>
        <li>datenschutzfreundlich</li>
        <li>erweiterbar</li>
    </ul>

    <div class="fwt-cta-actions">
        <a class="fwt-btn fwt-btn-primary" href="#">Jetzt ansehen</a>
        <a class="fwt-btn fwt-btn-secondary" href="#">Grundlagen lesen</a>
    </div>
</section>

<section class="fwt-cta fwt-cta-info">
    <p class="fwt-cta-kicker">Nächster Schritt</p>

    <h3 class="fwt-cta-title">
        Starte mit einem fertigen Baustein
    </h3>

    <p class="fwt-cta-text">
        Ein CTA mit zwei Buttons eignet sich gut, wenn eine Hauptaktion und eine
        Nebenaktion angeboten werden sollen.
    </p>

    <div class="fwt-cta-actions">
        <a class="fwt-btn fwt-btn-primary" href="#">Projekt starten</a>
        <a class="fwt-btn fwt-btn-light" href="#">Erst Beispiele ansehen</a>
    </div>
</section>

<section class="fwt-cta fwt-cta-download fwt-cta-success">
    <span class="fwt-cta-download-icon" aria-hidden="true">↓</span>

    <div>
        <p class="fwt-cta-kicker">Download</p>

        <h3 class="fwt-cta-title">
            FWT später als Paket bereitstellen
        </h3>

        <p class="fwt-cta-text">
            Download-CTAs eignen sich für Dateien, Vorlagen, Pakete oder
            Dokumentationen. Der Nutzer sollte immer wissen, was geladen wird.
        </p>

        <div class="fwt-cta-actions">
            <a class="fwt-btn fwt-btn-primary" href="#">Paket herunterladen</a>
            <a class="fwt-btn fwt-btn-secondary" href="#">Änderungen ansehen</a>
        </div>
    </div>
</section>

<section class="fwt-cta fwt-cta-newsletter">
    <p class="fwt-cta-kicker">Newsletter</p>

    <h3 class="fwt-cta-title">
        Über neue Bausteine informiert bleiben
    </h3>

    <p class="fwt-cta-text">
        Newsletter-CTAs sollten klar erklären, was Nutzer bekommen und wie ihre
        Daten verwendet werden.
    </p>

    <form class="fwt-cta-form" action="#" method="post">
        <div class="fwt-cta-form-row">
            <label class="fwt-sr-only" for="cta-newsletter-email">
                E-Mail-Adresse
            </label>

            <input
                class="fwt-input"
                id="cta-newsletter-email"
                name="email"
                type="email"
                placeholder="E-Mail-Adresse"
            >

            <button class="fwt-btn fwt-btn-primary" type="submit">
                Anmelden
            </button>
        </div>

        <p class="fwt-cta-form-note">
            Beispiel ohne echte Anmeldung. In echten Projekten muss der Datenschutz klar erklärt werden.
        </p>
    </form>
</section>

<section class="fwt-cta fwt-cta-split fwt-cta-primary">
    <div>
        <p class="fwt-cta-kicker">Für echte Webseiten</p>

        <h3 class="fwt-cta-title">
            Ein CTA kann erklären, führen und Vertrauen schaffen
        </h3>

        <p class="fwt-cta-text">
            Split-CTAs eignen sich, wenn links die Hauptbotschaft steht und rechts
            ein kompakter Zusatzbereich, eine Liste oder ein kleiner Hinweis sitzt.
        </p>

        <div class="fwt-cta-actions">
            <a class="fwt-btn fwt-btn-primary" href="#">Anfrage vorbereiten</a>
            <a class="fwt-btn fwt-btn-secondary" href="#">Mehr lesen</a>
        </div>
    </div>

    <aside class="fwt-cta-panel">
        <h4 class="fwt-cta-panel-title">
            Gut geeignet für
        </h4>

        <p class="fwt-cta-panel-text">
            Startseiten, Toolseiten, Projektvorstellungen, Downloads,
            Newsletter und Landingpages.
        </p>

        <ul class="fwt-feature-list">
            <li>klare Handlung</li>
            <li>kurze Erklärung</li>
            <li>sichtbare Vorteile</li>
        </ul>
    </aside>
</section>

<section class="fwt-cta fwt-cta-dark fwt-cta-hero">
    <p class="fwt-cta-kicker">Premium-Wirkung</p>

    <h3 class="fwt-cta-title">
        Dunkler CTA für hochwertige Bereiche
    </h3>

    <p class="fwt-cta-text">
        Die dunkle Variante eignet sich für starke Startseitenbereiche,
        Produktvorstellungen, Webtools oder besondere Hinweise mit mehr Gewicht.
    </p>

    <ul class="fwt-cta-meta">
        <li>edel</li>
        <li>kontraststark</li>
        <li>auffällig</li>
    </ul>

    <div class="fwt-cta-actions">
        <a class="fwt-btn fwt-btn-primary" href="#">Jetzt starten</a>
        <a class="fwt-btn fwt-btn-secondary" href="#">Details ansehen</a>
    </div>
</section>