diff --git a/impressum.php b/impressum.php
index eaa38e9..944bca8 100644
--- a/impressum.php
+++ b/impressum.php
@@ -1,12 +1,349 @@
 <?php include 'header.php'; ?>
 
-<main style="padding: 2rem 1rem; max-width: 800px; margin: 0 auto; animation: fadeInUp 0.5s ease both;">
-    <div class="auth__card" style="width: 100%; max-width: 100%;">
-        <header class="auth__header" style="grid-template-columns: 1fr;">
-            <h1 class="auth__title">Impressum</h1>
-        </header>
-        <p style="color: var(--text-secondary); line-height: 1.8; font-size: 0.95rem;">Impressum 123</p>
+<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.at
+                    </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.at
+                    </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'; ?>
\ No newline at end of file