<?php include 'header.php'; ?>

<style>
    /* ─── Impressum Styles ─── */
    .impressum {
        padding: 3rem 1.5rem 4rem;
        max-width: 900px;
        margin: 0 auto;
        animation: fadeInUp 0.6s ease both;
    }

    .impressum__hero {
        text-align: center;
        margin-bottom: 3rem;
    }

    .impressum__hero-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        border-radius: var(--radius-xl);
        background: linear-gradient(135deg, var(--color-primary-soft), rgba(16, 185, 129, 0.08));
        border: 1px solid var(--border-default);
        margin-bottom: 1.25rem;
        font-size: 2rem;
        animation: float 6s ease-in-out infinite;
    }

    .impressum__hero h1 {
        font-size: 2.2rem;
        font-weight: 800;
        background: linear-gradient(135deg, var(--text-primary), var(--color-primary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.5rem;
    }

    .impressum__hero p {
        color: var(--text-secondary);
        font-size: 1rem;
        max-width: 520px;
        margin: 0 auto;
        line-height: 1.7;
    }

    .impressum__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .impressum__card {
        background: var(--bg-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        padding: 2rem;
        transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-smooth);
        position: relative;
        overflow: hidden;
    }

    .impressum__card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
        opacity: 0;
        transition: opacity var(--transition-normal);
    }

    .impressum__card:hover {
        border-color: var(--border-glow);
        box-shadow: var(--shadow-glow-blue);
        transform: translateY(-3px);
    }

    .impressum__card:hover::before {
        opacity: 1;
    }

    .impressum__card--full {
        grid-column: 1 / -1;
    }

    .impressum__card-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
        font-size: 1.25rem;
    }

    .impressum__card-icon--blue {
        background: var(--color-primary-soft);
        border: 1px solid rgba(59, 130, 246, 0.15);
    }

    .impressum__card-icon--green {
        background: var(--color-accent-soft);
        border: 1px solid rgba(16, 185, 129, 0.15);
    }

    .impressum__card-icon--orange {
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.15);
    }

    .impressum__card-icon--purple {
        background: rgba(139, 92, 246, 0.1);
        border: 1px solid rgba(139, 92, 246, 0.15);
    }

    .impressum__card-icon--red {
        background: var(--color-danger-soft);
        border: 1px solid rgba(239, 68, 68, 0.15);
    }

    .impressum__card h2 {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.85rem;
    }

    .impressum__card p,
    .impressum__card li {
        color: var(--text-secondary);
        font-size: 0.92rem;
        line-height: 1.75;
    }

    .impressum__card ul {
        list-style: none;
        padding: 0;
    }

    .impressum__card ul li {
        padding: 0.3rem 0;
        padding-left: 1.2rem;
        position: relative;
    }

    .impressum__card ul li::before {
        content: "›";
        position: absolute;
        left: 0;
        color: var(--color-primary);
        font-weight: 700;
    }

    .impressum__label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        margin-bottom: 0.25rem;
    }

    .impressum__value {
        color: var(--text-primary) !important;
        font-weight: 500;
    }

    .impressum__divider {
        border: none;
        height: 1px;
        background: var(--border-default);
        margin: 1rem 0;
    }

    .impressum__footer-note {
        text-align: center;
        margin-top: 2.5rem;
        padding: 1.5rem;
        border-radius: var(--radius-lg);
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
    }

    .impressum__footer-note p {
        color: var(--text-muted);
        font-size: 0.82rem;
        line-height: 1.7;
    }

    /* ─── Responsive ─── */
    @media (max-width: 700px) {
        .impressum__grid {
            grid-template-columns: 1fr;
        }

        .impressum__hero h1 {
            font-size: 1.7rem;
        }

        .impressum {
            padding: 2rem 1rem 3rem;
        }

        .impressum__card {
            padding: 1.5rem;
        }

        .impressum__card--full div[style*="grid-template-columns"] {
            grid-template-columns: 1fr !important;
        }
    }
</style>

<main class="impressum">

    <!-- ═══ Hero ═══ -->
    <div class="impressum__hero">
        <div class="impressum__hero-icon">⚖️</div>
        <h1>Impressum</h1>
        <p>Angaben gemäß § 5 TMG und § 25 MedienG – Informationen über die Betreiber dieser Website.</p>
    </div>

    <!-- ═══ Karten-Grid ═══ -->
    <div class="impressum__grid">
        <!-- Karte 1 – Website-Inhaber (volle Breite) -->
        <div class="impressum__card impressum__card--full">
            <div class="impressum__card-icon impressum__card-icon--green">🌐</div>
            <h2>Website-Inhaber</h2>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
                <ul>
                    <li>
                        <span class="impressum__label">Name</span>
                        <span class="impressum__value">Fabian Schieder</span>
                    </li>
                    <li>
                        <span class="impressum__label">Rolle</span>
                        Website-Inhaber & Server-Betreiber
                    </li>
                    <li>
                        <span class="impressum__label">Kontakt</span>
                        fabian@geizkragen.store
                    </li>
                </ul>
                <ul>
                    <li>
                        <span class="impressum__label">Name</span>
                        <span class="impressum__value">Paul Eisenbock</span>
                    </li>
                    <li>
                        <span class="impressum__label">Rolle</span>
                        Website-Inhaber
                    </li>
                    <li>
                        <span class="impressum__label">Kontakt</span>
                        paul@geizkragen.store
                    </li>
                </ul>
            </div>
        </div>

        <!-- Karte 2 – Server-Betreiber -->
        <div class="impressum__card impressum__card--full">
            <div class="impressum__card-icon impressum__card-icon--blue">🖥️</div>
            <h2>Server-Betreiber</h2>
            <ul>
                <li>
                    <span class="impressum__label">Verantwortlich</span>
                    <span class="impressum__value">Fabian Schieder</span>
                </li>
                <li>
                    <span class="impressum__label">Aufgaben</span>
                    Technische Bereitstellung, Hosting, Serverbetrieb & Wartung
                </li>
            </ul>
        </div>

        <!-- Karte 3 – Projektinfo (volle Breite) -->
        <div class="impressum__card impressum__card--full">
            <div class="impressum__card-icon impressum__card-icon--purple">🚀</div>
            <h2>Über das Projekt</h2>
            <p>
                <strong>Geizkragen</strong> ist eine Preisvergleichsplattform, die es Nutzern ermöglicht, die besten
                Angebote verschiedener Online-Shops auf einen Blick zu vergleichen. Das Projekt wird als Schulprojekt
                von Fabian Schieder und Paul Eisenbock entwickelt und betrieben.
            </p>
        </div>

        <!-- Karte 4 – Haftungsausschluss -->
        <div class="impressum__card">
            <div class="impressum__card-icon impressum__card-icon--orange">⚠️</div>
            <h2>Haftungsausschluss</h2>
            <p>
                Die Inhalte dieser Website werden mit größtmöglicher Sorgfalt erstellt. Der Anbieter übernimmt jedoch
                keine Gewähr für die Richtigkeit, Vollständigkeit und Aktualität der bereitgestellten Inhalte.
            </p>
            <hr class="impressum__divider">
            <p>
                Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links.
                Für den Inhalt verlinkter Seiten sind ausschließlich deren Betreiber verantwortlich.
            </p>
        </div>

        <!-- Karte 5 – Urheberrecht -->
        <div class="impressum__card">
            <div class="impressum__card-icon impressum__card-icon--red">©</div>
            <h2>Urheberrecht</h2>
            <p>
                Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem
                österreichischen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der
                Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des
                jeweiligen Autors bzw. Erstellers.
            </p>
        </div>

        <!-- Karte 6 – Datenschutz (volle Breite) -->
        <div class="impressum__card impressum__card--full">
            <div class="impressum__card-icon impressum__card-icon--blue">🔒</div>
            <h2>Datenschutzhinweis</h2>
            <p>
                Die Nutzung unserer Website ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf
                unseren Seiten personenbezogene Daten (z.&thinsp;B. Name, E-Mail-Adresse) erhoben werden, erfolgt dies
                stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte
                weitergegeben. Wir weisen darauf hin, dass die Datenübertragung im Internet (z.&thinsp;B. bei der
                Kommunikation per E-Mail) Sicherheitslücken aufweisen kann.
            </p>
        </div>

    </div>

    <!-- ═══ Footer-Note ═══ -->
    <div class="impressum__footer-note">
        <p>
            Stand: <?= date('F Y') ?> · Dieses Impressum wurde nach bestem Wissen und Gewissen erstellt.<br>
            Bei Fragen wenden Sie sich bitte an die oben genannten Ansprechpartner.
        </p>
    </div>

</main>

<?php include 'footer.php'; ?>