Anpassung Kontakt html

README.md

@@ -15,8 +15,8 @@ public_html/
 ├── index.html              Startseite
 ├── ueber_mich.html         Persönliche Vorstellungsseite
 ├── eis_projekt.html        Projektseite
-├── kontakt.html            Kontaktseite mit Formular-Layout
-├── impressum.html          Impressum / rechtliche Angaben
+├── kontakt.html            Kontaktseite mit gestaltetem Formular-Layout
+├── impressum.html          Impressum mit fiktiven Platzhalterangaben
 ├── README.md               Diese Datei
 │
 ├── css/
@@ -62,15 +62,18 @@ public_html/
 
 ### `kontakt.html` - Kontakt
 
-- Kontaktseite mit Eingabefeldern für Name, E-Mail und Nachricht
+- Kontaktseite mit gestaltetem Formularbereich
+- Eingabefelder für Name, E-Mail und Nachricht
+- Hinweis, dass das Formular aktuell nur ein Layout ist
 - Absenden-Button ist aktuell nur visuell vorhanden
 - Es gibt noch keine Backend-Anbindung und keine Formularübertragung
 
 ### `impressum.html` - Impressum
 
-- Impressumsseite mit Platzhalterdaten
-- Enthält Abschnitte zu Betreiberangaben, Kontakt, Haftung und Urheberrecht
-- Die Angaben müssen vor einer echten Veröffentlichung geprüft und ersetzt werden
+- Impressumsseite für ein privates Lernprojekt
+- Enthält fiktive Platzhalterangaben
+- Enthält Abschnitte zu Angaben, Kontakt, Verantwortung, Haftung, Links, Urheberrecht und Hinweis
+- Die Angaben sind nicht für eine öffentliche Veröffentlichung gedacht
 
 ### `uebungen/notenrechner.html` - Notenrechner
 
@@ -100,6 +103,7 @@ Es enthält:
 - Einblendanimation `fadeUp`
 - Dark-Mode-Styles über `body.dark`
 - Dropdown-Styles für das Übungen-Menü
+- Spezielle Styles für Kontaktformular und Impressum
 - Wiederverwendbare Seitenklassen wie `.page-hero`, `.page`, `.cards`, `.card`, `.btn`, `.skill`
 
 ## JavaScript
@@ -188,5 +192,5 @@ Funktionen:
 
 - Das Kontaktformular sendet aktuell keine Daten ab.
 - Die Projektseite `eis_projekt.html` enthält noch keinen fertigen Projektinhalt.
-- Die Angaben im Impressum sind Platzhalterdaten und müssen vor Veröffentlichung ersetzt werden.
+- Die Angaben im Impressum sind fiktive Platzhalterdaten und nicht für eine öffentliche Veröffentlichung gedacht.
 - Die Übungsseiten erzeugen ihre Eingabeoberflächen per JavaScript.

css/style.css

@@ -143,6 +143,77 @@ footer a:hover { color: #fff; }
 .legal-page a { color: var(--accent); text-decoration: none; }
 .legal-page a:hover { color: #fff; }
 
+.contact-page { max-width: 900px; padding-bottom: 5rem; }
+.contact-page h1 { margin-bottom: 1rem; }
+.contact-form {
+  display: grid;
+  gap: 1.35rem;
+  max-width: 760px;
+  padding-top: 0.5rem;
+}
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.2rem;
+}
+.form-group { display: grid; gap: 0.55rem; }
+.form-group label {
+  font-size: 0.72rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.48);
+}
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  border: 1px solid rgba(255,255,255,0.13);
+  background: rgba(255,255,255,0.045);
+  color: var(--off-white);
+  font-family: 'Barlow', sans-serif;
+  font-size: 1rem;
+  line-height: 1.6;
+  padding: 0.95rem 1rem;
+  outline: none;
+  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
+}
+.form-group textarea { resize: vertical; min-height: 180px; }
+.form-group input::placeholder,
+.form-group textarea::placeholder { color: rgba(255,255,255,0.32); }
+.form-group input:focus,
+.form-group textarea:focus {
+  border-color: rgba(122,179,255,0.85);
+  background: rgba(255,255,255,0.07);
+  box-shadow: 0 0 0 3px rgba(122,179,255,0.12);
+}
+.form-actions {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+  flex-wrap: wrap;
+  padding-top: 0.4rem;
+}
+.form-actions button {
+  border: 0;
+  cursor: pointer;
+  padding: 0.85rem 2.3rem;
+  background: #fff;
+  color: var(--royal-dark);
+  font-family: 'Barlow', sans-serif;
+  font-size: 0.82rem;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  transition: background 0.2s, color 0.2s, transform 0.15s;
+}
+.form-actions button:hover { background: var(--royal-light); color: #fff; transform: translateY(-2px); }
+.form-actions p {
+  max-width: 340px;
+  font-size: 0.88rem;
+  font-weight: 300;
+  color: rgba(255,255,255,0.48);
+  line-height: 1.6;
+}
+
 .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); }
@@ -150,6 +221,10 @@ footer a:hover { color: #fff; }
 @media (max-width: 640px) {
   .legal-page { padding-inline: 1.5rem; }
   .legal-page section { padding-left: 1rem; }
+  .contact-page { padding-inline: 1.5rem; }
+  .form-row { grid-template-columns: 1fr; }
+  .form-actions { align-items: flex-start; flex-direction: column; }
+  .form-actions button { width: 100%; }
 }
 
 /* ========================= Dark Mode ========================= */
@@ -185,6 +260,21 @@ 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; }
+body.dark .form-group label,
+body.dark .form-actions p { color: rgba(226,232,240,0.62); }
+body.dark .form-group input,
+body.dark .form-group textarea {
+  border-color: rgba(226,232,240,0.18);
+  background: rgba(15,23,42,0.55);
+  color: #e2e8f0;
+}
+body.dark .form-group input:focus,
+body.dark .form-group textarea:focus {
+  border-color: rgba(96,165,250,0.9);
+  box-shadow: 0 0 0 3px rgba(96,165,250,0.16);
+}
+body.dark .form-actions button { background: var(--accent); color: #0b1220; }
+body.dark .form-actions button:hover { background: #3b82f6; }
 
 .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; }

kontakt.html

@@ -29,15 +29,34 @@
 <button id="dark-mode-toggle">🌙</button>
 </nav>
 
-  <div class="page-hero">
+  <div class="page-hero contact-page">
     <p class="hero-tag">Kontakt</p>
     <h1>Schreib <span>mir</span>.</h1>
-    <p class="sub">Ich freue mich über jede Nachricht – egal ob Frage, Zusammenarbeit oder einfach Hallöchen.</p>
+    <p class="sub">Ich freue mich über Nachrichten, Fragen oder Ideen zu meinem Lernprojekt.</p>
 
-    <div class="form-group"><label for="name">Name</label><input type="text" id="name" placeholder="Dein Name"></div>
-    <div class="form-group"><label for="email">E-Mail</label><input type="email" id="email" placeholder="deine@email.de"></div>
-    <div class="form-group"><label for="msg">Nachricht</label><textarea id="msg" placeholder="Deine Nachricht..."></textarea></div>
-    <button type="button">Absenden</button>
+    <form class="contact-form">
+      <div class="form-row">
+        <div class="form-group">
+          <label for="name">Name</label>
+          <input type="text" id="name" name="name" placeholder="Dein Name">
+        </div>
+
+        <div class="form-group">
+          <label for="email">E-Mail</label>
+          <input type="email" id="email" name="email" placeholder="deine@email.de">
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="msg">Nachricht</label>
+        <textarea id="msg" name="message" rows="7" placeholder="Deine Nachricht..."></textarea>
+      </div>
+
+      <div class="form-actions">
+        <button type="button">Absenden</button>
+        <p>Das Formular ist aktuell nur ein Layout und sendet noch keine Nachricht ab.</p>
+      </div>
+    </form>
   </div>
 
   <footer>