Anpassung impressum + style css

css/style.css

@@ -107,6 +107,7 @@ footer a:hover { color: #fff; }
 .page-hero { padding: 5rem 3rem 3.5rem; max-width: 820px; margin: 0 auto; animation: fadeUp 0.9s ease both; }
 .page-hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1; letter-spacing: 0.03em; color: #fff; margin-bottom: 2rem; }
 .page-hero h1 span { color: var(--accent); }
+.page-hero .sub { font-size: 1.05rem; font-weight: 300; color: rgba(255,255,255,0.62); line-height: 1.8; margin-bottom: 3rem; max-width: 560px; }
 
 .page { max-width: 820px; margin: 0 auto; padding: 0 3rem 4rem; }
 .page hr { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 2.5rem 0; }
@@ -114,10 +115,43 @@ footer a:hover { color: #fff; }
 .bio, .page p { font-size: 1.05rem; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.9; margin-bottom: 0.6rem; }
 .skills-label, .page .label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 1rem; }
 
+.legal-page { max-width: 900px; padding-bottom: 5rem; }
+.legal-page h1 { margin-bottom: 1rem; }
+.legal-page section {
+  padding: 1.65rem 0 1.65rem 1.5rem;
+  border-left: 2px solid rgba(122,179,255,0.35);
+  border-bottom: 1px solid rgba(255,255,255,0.07);
+}
+.legal-page section + section { margin-top: 1.2rem; }
+.legal-page h2 {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 1.55rem;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  color: #fff;
+  margin-bottom: 0.9rem;
+}
+.legal-page p,
+.legal-page address {
+  max-width: 680px;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 300;
+  color: rgba(255,255,255,0.68);
+  line-height: 1.85;
+}
+.legal-page a { color: var(--accent); text-decoration: none; }
+.legal-page a:hover { color: #fff; }
+
 .skills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
 .skill { padding: 0.4rem 1.1rem; border: 1px solid rgba(255,255,255,0.15); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); transition: border-color 0.2s, color 0.2s; }
 .skill:hover { border-color: var(--accent); color: var(--accent); }
 
+@media (max-width: 640px) {
+  .legal-page { padding-inline: 1.5rem; }
+  .legal-page section { padding-left: 1rem; }
+}
+
 /* ========================= Dark Mode ========================= */
 
 body.dark {
@@ -147,10 +181,14 @@ body.dark #dark-mode-toggle { background: var(--accent); color: #0b1220; border-
 
 body.dark .page p, body.dark .bio { color: rgba(226,232,240,0.8); }
 body.dark .skill { border-color: rgba(226,232,240,0.2); color: rgba(226,232,240,0.7); }
+body.dark .page-hero .sub,
+body.dark .legal-page p,
+body.dark .legal-page address { color: rgba(226,232,240,0.78); }
+body.dark .legal-page section { border-left-color: rgba(96,165,250,0.45); border-bottom-color: #334155; }
 
 .dropdown { position: relative; }
 .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: rgba(0,20,60,0.97); border: 1px solid rgba(255,255,255,0.07); min-width: 160px; z-index: 200; }
 .dropdown-menu li { list-style: none; }
 .dropdown-menu a { display: block; padding: 0.7rem 1.2rem; color: var(--text-muted); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
 .dropdown-menu a:hover { color: #fff; }
-.dropdown.open .dropdown-menu { display: block; }
+.dropdown.open .dropdown-menu { display: block; }

impressum.html

@@ -29,29 +29,53 @@
 <button id="dark-mode-toggle">🌙</button>
 </nav>
 
-  <div class="page-hero">
+  <div class="page-hero legal-page">
     <p class="hero-tag">Rechtliches</p>
     <h1>Impressum</h1>
+    <p class="sub">Privates Lernprojekt mit Glück-Auf Potenzial.</p>
 
     <section>
-      <h2>Angaben gemäß § 5 TMG</h2>
+      <h2>Angaben</h2>
-      <address>Vorname Nachname<br>Musterstraße 1<br>12345 Musterstadt<br>Deutschland</address>
+      <address>
+        Mara<br>
+        Glück-Auf-Straße 4<br>
+        1904 Glückaufstadt<br>
+        Deutschland
+      </address>
     </section>
+
     <section>
       <h2>Kontakt</h2>
-      <p>E-Mail: <a href="mailto:info@beispiel.de">info@beispiel.de</a></p>
+      <p>E-Mail: <a href="mailto:kontakt@example.com">kontakt@example.com</a></p>
     </section>
+
+    <section>
+      <h2>Verantwortlich für den Inhalt</h2>
+      <address>
+        Mara<br>
+        Glück-Auf-Straße 4<br>
+        1904 Glückaufstadt
+      </address>
+    </section>
+
     <section>
       <h2>Haftung für Inhalte</h2>
-      <p>Als Diensteanbieter sind wir gemäß § 7 Abs. 1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen.</p>
+      <p>Die Inhalte dieser Website wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte wird jedoch keine Gewähr übernommen.</p>
     </section>
+
     <section>
       <h2>Haftung für Links</h2>
       <p>Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber verantwortlich.</p>
     </section>
+
     <section>
       <h2>Urheberrecht</h2>
-      <p>Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Vervielfältigung und Verbreitung bedürfen der schriftlichen Zustimmung des jeweiligen Autors.</p>
+      <p>Die auf dieser Website erstellten Inhalte und Werke unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung oder Verbreitung außerhalb der Grenzen des Urheberrechts bedarf der Zustimmung der jeweiligen Rechteinhaberin.</p>
+    </section>
+
+    <section>
+      <h2>Hinweis</h2>
+      <p>Diese Seite ist Teil eines privaten Lernprojekts. Die Angaben sind fiktiv und nicht für eine öffentliche Veröffentlichung gedacht.</p>
     </section>
   </div>