Atemberaubend: ein Blog über Philosophie.

• Hallo Welt!

  Willkommen bei WordPress. Dies ist dein erster Beitrag. Bearbeite oder lösche ihn und beginne mit dem Schreiben!

  14. Mai 2025

<div class="lp-container">
    <header class="lp-hero">
        <div class="lp-hero-content">
            <h1 class="lp-hero-title">Deine überzeugende Überschrift hier</h1>
            <p class="lp-hero-subtitle">Ein kurzer, prägnanter Text, der das Interesse weckt und den Nutzen kommuniziert.</p>
            <a href="#dein-link-ziel" class="lp-cta-button">Call to Action Button</a>
        </div>
    </header>

    <section class="lp-section lp-section-light">
        <h2 class="lp-section-title">Warum unser Angebot das Richtige für Sie ist</h2>
        <div class="lp-features">
            <div class="lp-feature-item">
                <img src="https://via.placeholder.com/100?text=Icon1" alt="Feature 1 Icon" class="lp-feature-icon">
                <h3>Vorteil 1</h3>
                <p>Beschreibung des ersten Vorteils oder Features. Erkläre klar und deutlich, was der Nutzer davon hat.</p>
            </div>
            <div class="lp-feature-item">
                <img src="https://via.placeholder.com/100?text=Icon2" alt="Feature 2 Icon" class="lp-feature-icon">
                <h3>Vorteil 2</h3>
                <p>Beschreibung des zweiten Vorteils oder Features. Halte es kurz und informativ.</p>
            </div>
            <div class="lp-feature-item">
                <img src="https://via.placeholder.com/100?text=Icon3" alt="Feature 3 Icon" class="lp-feature-icon">
                <h3>Vorteil 3</h3>
                <p>Beschreibung des dritten Vorteils oder Features. Fokussiere dich auf den Kundennutzen.</p>
            </div>
        </div>
    </section>

    <section class="lp-section lp-section-dark">
        <h2 class="lp-section-title">Ein weiterer Abschnitt für mehr Details</h2>
        <p>Hier kannst du weitere Informationen, Bilder, Kundenstimmen oder ein Kontaktformular einfügen. Für ein Kontaktformular könntest du den Shortcode eines WordPress-Plugins (z.B. Contact Form 7, WPForms) hier einfügen.</p>
        <img src="https://via.placeholder.com/600x300?text=Platzhalterbild" alt="Platzhalterbild" style="max-width: 100%; height: auto; margin-top: 20px;">
    </section>

    <footer class="lp-footer">
        <p>&copy; 2024 Deine Firma. Alle Rechte vorbehalten. | <a href="/impressum">Impressum</a> | <a href="/datenschutz">Datenschutz</a></p>
    </footer>
</div>

<style>
    /* Globale Stile für die Landingpage */
    .lp-container {
        font-family: Arial, sans-serif; /* Wähle eine passende Schriftart */
        line-height: 1.6;
        color: #333;
        margin: 0 auto;
        padding: 0;
        background-color: #fff; /* Hintergrundfarbe der gesamten Seite */
    }

    /* Hero Bereich */
    .lp-hero {
        background-color: #f0f0f0; /* Hintergrundfarbe des Hero-Bereichs */
        background-image: url('https://via.placeholder.com/1200x500?text=Hintergrundbild+Hero'); /* Ersetze dies mit deinem Bild-URL */
        background-size: cover;
        background-position: center;
        color: #ffffff; /* Textfarbe im Hero-Bereich */
        padding: 80px 20px;
        text-align: center;
    }

    .lp-hero-content {
        max-width: 800px;
        margin: 0 auto;
        background-color: rgba(0,0,0,0.5); /* Optional: Dunkler Overlay für bessere Lesbarkeit des Textes */
        padding: 30px;
        border-radius: 8px;
    }

    .lp-hero-title {
        font-size: 2.8em; /* Größe der Hauptüberschrift */
        margin-bottom: 15px;
        font-weight: bold;
    }

    .lp-hero-subtitle {
        font-size: 1.4em; /* Größe des Untertitels */
        margin-bottom: 30px;
    }

    .lp-cta-button {
        display: inline-block;
        background-color: #007bff; /* Farbe des Call-to-Action Buttons */
        color: #ffffff;
        padding: 15px 30px;
        text-decoration: none;
        font-size: 1.2em;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    .lp-cta-button:hover {
        background-color: #0056b3; /* Farbe des Buttons beim Hover */
    }

    /* Sektionen */
    .lp-section {
        padding: 60px 20px;
        text-align: center;
    }

    .lp-section-title {
        font-size: 2.2em;
        margin-bottom: 40px;
        color: #333;
    }

    .lp-section-light {
        background-color: #ffffff;
    }

    .lp-section-dark {
        background-color: #f9f9f9; /* Etwas dunklerer Hintergrund für Abwechslung */
        color: #333;
    }

    .lp-section-dark .lp-section-title {
        color: #333;
    }

    /* Features Bereich */
    .lp-features {
        display: flex;
        flex-wrap: wrap; /* Sorgt für Umbruch auf kleineren Bildschirmen */
        justify-content: space-around; /* Verteilt die Elemente gleichmäßig */
        gap: 20px; /* Abstand zwischen den Feature-Items */
        max-width: 1000px;
        margin: 0 auto;
    }

    .lp-feature-item {
        flex-basis: calc(33.333% - 20px); /* Drei Items pro Zeile, berücksichtigt den Gap */
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        text-align: left; /* Oder center, je nach Präferenz */
    }

    .lp-feature-item img.lp-feature-icon {
        width: 60px; /* Größe der Icons anpassen */
        height: 60px;
        margin-bottom: 15px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .lp-feature-item h3 {
        font-size: 1.5em;
        margin-bottom: 10px;
        color: #007bff;
    }

    /* Footer */
    .lp-footer {
        background-color: #333333; /* Dunkler Hintergrund für den Footer */
        color: #ffffff;
        text-align: center;
        padding: 20px;
        font-size: 0.9em;
    }

    .lp-footer a {
        color: #007bff; /* Linkfarbe im Footer */
        text-decoration: none;
    }

    .lp-footer a:hover {
        text-decoration: underline;
    }

    /* Responsive Design Anpassungen */
    @media (max-width: 768px) {
        .lp-hero-title {
            font-size: 2em;
        }
        .lp-hero-subtitle {
            font-size: 1.1em;
        }
        .lp-features {
            flex-direction: column; /* Feature-Items untereinander auf kleinen Bildschirmen */
        }
        .lp-feature-item {
            flex-basis: 100%; /* Volle Breite für jedes Item */
            margin-bottom: 20px;
        }
    }
</style>