From 7977792071413f34e560f4b890f73bcf8ba40e84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Estelle=20K=C3=B6hler?= <estellekoehler37@gmail.com>
Date: Thu, 26 Mar 2026 11:08:20 +0100
Subject: [PATCH] docs: add human-readable comments to HTML and CSS for the
 team

---
 index.html     |  45 +++++++++------
 stylesheet.css | 153 ++++++++++---------------------------------------
 2 files changed, 57 insertions(+), 141 deletions(-)
diff --git a/index.html b/index.html
index c1c8b9a..aad51c4 100644
--- a/index.html
+++ b/index.html
@@ -7,58 +7,69 @@
   <link rel="stylesheet" href="stylesheet.css" />
 </head>
 <body>
+
   <div class="page-wrapper">
+
     <header class="header" aria-label="Hauptnavigation">
-      <div class="header__brand" aria-label="Logo Platzhalter">LOGO</div>
+      <div class="header__brand" aria-label="Firmenlogo Invité">LOGO</div>
+      
       <nav class="nav" aria-label="Seitennavigation">
         <a class="nav__link" href="#" role="link">Event finden</a>
       </nav>
-      <button class="btn btn--outline header__login" aria-label="Login" type="button">Login</button>
+
+      <button class="btn btn--outline header__login" aria-label="Zum Login-Bereich" type="button">Login</button>
     </header>
 
     <main class="main-content">
+
       <section class="hero" aria-labelledby="hero-title">
+        
         <div class="hero__left">
           <h1 class="hero__title" id="hero-title">Zu Tisch mit Fremden – bereit für die nächste kulinarische Begegnung?</h1>
-          <p class="hero__description">Dein Ort um neue Leute kennen zu lernen! Erstelle eigene Events und lade Gäste zu dir nach Hause ein, oder suche nach passenden Events in deiner Umgebung.</p>
-          <button class="btn btn--primary" aria-label="Anmelden" type="button">Anmelden</button>
+          <p class="hero__description">
+            Beschreibung: Erklärt das Konzept von Social Cooking und lädt Nutzer ein, Events zu erstellen oder zu suchen.
+          </p>
+          <button class="btn btn--primary" aria-label="Kostenlos Anmelden" type="button">Anmelden</button>
         </div>
 
         <div class="hero__right">
-          <div class="image-card" aria-label="Hero Bild Platzhalter">
+          <div class="image-card" aria-label="Visualisierung eines Cooking-Events">
             <div class="image-card__placeholder" aria-hidden="true"></div>
-            <div class="social-badge" aria-label="Social Badge mit Teilnehmern">
-              <span class="social-badge__dot"></span>
-              <span class="social-badge__dot"></span>
-              <span class="social-badge__dot"></span>
+            
+            <div class="social-badge" aria-label="Anzeige der Teilnehmeranzahl">
+              <span class="social-badge__dot" title="Teilnehmer 1"></span>
+              <span class="social-badge__dot" title="Teilnehmer 2"></span>
+              <span class="social-badge__dot" title="Teilnehmer 3"></span>
             </div>
           </div>
         </div>
       </section>
 
-      <section class="gallery" aria-label="Galerie mit Platzhaltern">
+      <section class="gallery" aria-label="Vorschau vergangener Events">
+        
         <div class="gallery__controls">
-          <button class="arrow arrow--prev" type="button" aria-label="Vorheriges Bild">&lt;</button>
-          <button class="arrow arrow--next" type="button" aria-label="Nächstes Bild">&gt;</button>
+          <button class="arrow arrow--prev" type="button" aria-label="Vorheriges Bild anzeigen">&lt;</button>
+          <button class="arrow arrow--next" type="button" aria-label="Nächstes Bild anzeigen">&gt;</button>
         </div>
 
         <div class="gallery__track">
-          <article class="gallery__item" data-index="0" aria-label="Galerie Element 1">
+          <article class="gallery__item" aria-label="Event Foto 1">
             <div class="placeholder"></div>
           </article>
-          <article class="gallery__item" data-index="1" aria-label="Galerie Element 2">
+          <article class="gallery__item" aria-label="Event Foto 2">
             <div class="placeholder"></div>
           </article>
-          <article class="gallery__item" data-index="2" aria-label="Galerie Element 3">
+          <article class="gallery__item" aria-label="Event Foto 3">
             <div class="placeholder"></div>
           </article>
         </div>
 
         <div class="gallery__info">
-          <div class="profile-badge" aria-label="Profil Badge"></div>
-          <div class="gallery__handle" aria-label="Instagram Handle">@social_cooking</div>
+          <div class="profile-badge" aria-label="Profilbild des Hosts"></div>
+          <div class="gallery__handle" aria-label="Instagram Link zu social_cooking">@social_cooking</div>
         </div>
       </section>
+
     </main>
   </div>
 
diff --git a/stylesheet.css b/stylesheet.css
index d700709..021ba4a 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -1,12 +1,12 @@
-/* Wireframe Stile (schwarz/weiß) */
+/* GRUNDLEGENDE EINSTELLUNGEN */
 * {
-  box-sizing: border-box;
+  box-sizing: border-box; /* Sorgt dafür, dass Abstände die Boxen nicht breiter machen als gewollt */
 }
 
 :root {
   --black: #000000;
   --white: #ffffff;
-  --max-width: 1440px;
+  --max-width: 1440px; /* Die Standard-Desktop-Breite laut Figma */
 }
 
 html, body {
@@ -18,19 +18,21 @@ html, body {
   min-height: 100%;
 }
 
+/* HAUPTRAHMEN: Hält den gesamten Inhalt mittig und begrenzt die Breite */
 .page-wrapper {
   max-width: var(--max-width);
-  margin: 0 auto;
+  margin: 0 auto; /* Zentriert die ganze Seite im Browser */
   padding: 24px;
   background: var(--white);
-  min-height: 1343px;
-  border: 2px solid var(--black);
+  min-height: 1343px; /* Die exakte Höhe aus dem Figma-Entwurf */
+  border: 2px solid var(--black); /* Äußerer schwarzer Rahmen */
 }
 
+/* NAVIGATION / HEADER: Der obere Balken mit Logo und Links */
 .header {
-  display: flex;
+  display: flex; /* Ordnet Logo und Button nebeneinander an */
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-between; /* Logo links, Login rechts */
   border: 1px solid var(--black);
   padding: 16px 24px;
   margin-bottom: 24px;
@@ -41,18 +43,9 @@ html, body {
   font-size: 1.2rem;
   border: 1px solid var(--black);
   padding: 8px 12px;
-  background: var(--white);
-}
-
-.nav__link {
-  color: var(--black);
-  text-decoration: none;
-  font-weight: 600;
-  border: 1px solid var(--black);
-  padding: 8px 12px;
-  background: var(--white);
 }
 
+/* BUTTONS: Einheitlicher Stil für alle Schaltflächen */
 .btn {
   border: 2px solid var(--black);
   background: var(--white);
@@ -60,17 +53,9 @@ html, body {
   padding: 10px 18px;
   font-weight: 700;
   cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.btn--primary {
-  background: var(--white);
-}
-
-.btn--outline {
-  background: var(--white);
 }
 
+/* BARRIEREFREIHEIT: Markiert Elemente deutlich, wenn man sie mit der Tastatur (Tab) ansteuert */
 .btn:focus-visible,
 .nav__link:focus-visible,
 .arrow:focus-visible {
@@ -78,15 +63,10 @@ html, body {
   outline-offset: 3px;
 }
 
-.main-content {
-  display: grid;
-  grid-template-rows: auto auto;
-  gap: 32px;
-}
-
+/* HERO-BEREICH: Die große Sektion unter dem Header */
 .hero {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr; /* Teilt den Bereich in zwei gleich große Spalten (Text links, Bild rechts) */
   gap: 24px;
   align-items: center;
   padding: 24px;
@@ -96,57 +76,27 @@ html, body {
 .hero__title {
   font-size: 2rem;
   line-height: 1.25;
-  margin: 0 0 16px;
-}
-
-.hero__description {
-  margin: 0 0 20px;
-  line-height: 1.5;
-}
-
-.hero__left {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.hero__right {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.image-card {
-  position: relative;
-  width: 100%;
-  max-width: 620px;
-  height: 400px;
-  border: 1px solid var(--black);
-}
-
-.image-card__placeholder {
-  width: 100%;
-  height: 100%;
-  background: var(--white);
-  position: relative;
 }
 
+/* BILD-PLATZHALTER: Erzeugt das "X" in der Mitte der Boxen */
 .image-card__placeholder::before,
-.image-card__placeholder::after {
+.image-card__placeholder::after,
+.placeholder::before,
+.placeholder::after {
   content: "";
   position: absolute;
   inset: 0;
-  border: 1px solid var(--black);
 }
 
-.image-card__placeholder::before {
+/* Diese Linien zeichnen das "X" per Farbverlauf (Gradient) */
+.image-card__placeholder::before, .placeholder::before {
   background-image: linear-gradient(135deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%);
 }
-
-.image-card__placeholder::after {
+.image-card__placeholder::after, .placeholder::after {
   background-image: linear-gradient(225deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%);
 }
 
+/* SOCIAL BADGE: Das kleine Fenster mit den Teilnehmer-Punkten über dem Bild */
 .social-badge {
   position: absolute;
   bottom: 16px;
@@ -162,82 +112,37 @@ html, body {
   width: 16px;
   height: 16px;
   background: var(--black);
-  border-radius: 50%;
+  border-radius: 50%; /* Macht das Quadrat zum Kreis */
 }
 
+/* GALERIE: Bereich für die drei Bild-Platzhalter */
 .gallery {
   border: 1px solid var(--black);
   padding: 24px;
 }
 
-.gallery__controls {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.arrow {
-  border: 2px solid var(--black);
-  background: var(--white);
-  color: var(--black);
-  padding: 8px 16px;
-  font-size: 1.2rem;
-  cursor: pointer;
-}
-
 .gallery__track {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, 1fr); /* Erzeugt 3 Spalten nebeneinander */
   gap: 16px;
 }
 
-.gallery__item {
-  border: 1px solid var(--black);
-  min-height: 240px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 8px;
-  position: relative;
-  background: var(--white);
-}
-
-.placeholder {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  border: 1px solid var(--black);
-}
-
-.placeholder::before,
-.placeholder::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background-image: linear-gradient(135deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%);
-}
-
-.placeholder::after {
-  background-image: linear-gradient(225deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%);
-}
-
+/* UNTERER GALERIE-BEREICH: Profilbild und Social Media Handle */
 .gallery__info {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
-  position: relative;
 }
 
 .profile-badge {
   width: 72px;
   height: 72px;
   border: 1px solid var(--black);
-  border-radius: 50%;
-  background: var(--white);
-  margin: 0 auto;
+  border-radius: 50%; /* Macht das Profilbild rund */
+  margin: 0 auto; /* Zentriert den Kreis */
 }
 
 .gallery__handle {
   font-weight: 700;
-}
+}
\ No newline at end of file
