From 61250e13393ff6f337605235449db8f9a364c2c8 Mon Sep 17 00:00:00 2001
From: annika koenig <annika.koenig@stud.ph-weingarten.de>
Date: Thu, 11 Jun 2026 14:07:11 +0200
Subject: [PATCH] darkmodegeht!!

---
 style.css | 337 ++++++++++++------------------------------------------
 1 file changed, 76 insertions(+), 261 deletions(-)

diff --git a/style.css b/style.css
index 86ba420..09143d8 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,6 @@
 /* ================================
-   EIS PROJEKT – style.css
-   ================================ */
+   EIS PROJEKT – STYLE (CLEAN)
+================================ */
 
 *, *::before, *::after {
   box-sizing: border-box;
@@ -17,6 +17,10 @@
   --muted: #7a5c7e;
 }
 
+/* ================================
+   BASE
+================================ */
+
 body {
   font-family: 'DM Sans', sans-serif;
   background: var(--cream);
@@ -25,7 +29,10 @@ body {
   overflow-x: hidden;
 }
 
-/* ── NAVIGATION ── */
+/* ================================
+   NAVIGATION
+================================ */
+
 nav {
   position: sticky;
   top: 0;
@@ -44,7 +51,6 @@ nav {
   font-family: 'Playfair Display', serif;
   font-size: 1.3rem;
   color: var(--rose);
-  letter-spacing: 0.02em;
 }
 
 .nav-links {
@@ -58,15 +64,17 @@ nav {
   font-size: 0.9rem;
   font-weight: 500;
   color: var(--muted);
-  letter-spacing: 0.04em;
-  transition: color 0.2s;
+  transition: 0.2s;
 }
 
 .nav-links a:hover {
   color: var(--rose);
 }
 
-/* ── HERO ── */
+/* ================================
+   HERO
+================================ */
+
 .hero {
   position: relative;
   display: grid;
@@ -75,7 +83,6 @@ nav {
   min-height: 88vh;
   padding: 4rem 2.5rem;
   gap: 3rem;
-  overflow: hidden;
 }
 
 .hero::before {
@@ -83,9 +90,8 @@ nav {
   position: absolute;
   inset: 0;
   background:
-    radial-gradient(ellipse 70% 60% at 80% 50%, rgba(249, 168, 201, 0.25) 0%, transparent 70%),
-    radial-gradient(ellipse 50% 50% at 10% 80%, rgba(155, 89, 182, 0.1) 0%, transparent 60%);
-  pointer-events: none;
+    radial-gradient(ellipse 70% 60% at 80% 50%, rgba(249,168,201,0.25), transparent),
+    radial-gradient(ellipse 50% 50% at 10% 80%, rgba(155,89,182,0.1), transparent);
 }
 
 .hero-content {
@@ -95,123 +101,76 @@ nav {
 
 .hero-tag {
   display: inline-flex;
-  align-items: center;
-  gap: 6px;
   font-size: 0.78rem;
-  font-weight: 500;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--rose);
-  background: rgba(232, 103, 154, 0.1);
   padding: 6px 14px;
+  background: rgba(232,103,154,0.1);
+  border: 1px solid rgba(232,103,154,0.2);
   border-radius: 100px;
-  margin-bottom: 1.5rem;
-  border: 1px solid rgba(232, 103, 154, 0.2);
+  color: var(--rose);
+  margin-bottom: 1rem;
 }
 
 .hero h1 {
   font-family: 'Playfair Display', serif;
-  font-size: clamp(2.8rem, 5vw, 4.2rem);
+  font-size: 3rem;
   line-height: 1.1;
-  margin-bottom: 1.5rem;
-  color: var(--text);
 }
 
 .hero h1 span {
   background: linear-gradient(135deg, var(--rose), var(--violet));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  background-clip: text;
 }
 
 .hero p {
-  font-size: 1.05rem;
-  line-height: 1.75;
   color: var(--muted);
+  margin-top: 1rem;
   max-width: 420px;
-  margin-bottom: 2.5rem;
 }
 
+/* ================================
+   BUTTONS
+================================ */
+
 .btn-group {
+  margin-top: 2rem;
   display: flex;
   gap: 1rem;
-  flex-wrap: wrap;
 }
 
 .btn-primary {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
   background: linear-gradient(135deg, var(--rose), var(--violet));
   color: white;
   padding: 13px 26px;
   border-radius: 50px;
-  font-size: 0.9rem;
-  font-weight: 500;
   text-decoration: none;
-  transition: transform 0.2s, box-shadow 0.2s;
-  box-shadow: 0 4px 20px rgba(232, 103, 154, 0.35);
-}
-
-.btn-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 28px rgba(232, 103, 154, 0.45);
 }
 
 .btn-ghost {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
+  border: 1px solid rgba(232,103,154,0.4);
   color: var(--rose);
   padding: 13px 26px;
   border-radius: 50px;
-  font-size: 0.9rem;
-  font-weight: 500;
   text-decoration: none;
-  border: 1.5px solid rgba(232, 103, 154, 0.35);
-  transition: background 0.2s, border-color 0.2s;
 }
 
-.btn-ghost:hover {
-  background: rgba(232, 103, 154, 0.07);
-  border-color: var(--rose);
-}
+/* ================================
+   HERO IMAGE
+================================ */
 
-/* ── HERO IMAGE ── */
 .hero-visual {
-  position: relative;
-  z-index: 1;
   display: flex;
-  align-items: center;
   justify-content: center;
 }
 
 .img-frame {
   position: relative;
-  width: 100%;
   max-width: 420px;
 }
 
-.img-frame::before {
-  content: '';
-  position: absolute;
-  top: -12px;
-  left: -12px;
-  right: 12px;
-  bottom: 12px;
-  border: 2px solid rgba(232, 103, 154, 0.25);
-  border-radius: 24px;
-  z-index: 0;
-}
-
 .img-frame img {
-  position: relative;
-  z-index: 1;
   width: 100%;
-  height: 360px;
-  object-fit: cover;
   border-radius: 20px;
-  display: block;
 }
 
 .img-badge {
@@ -219,109 +178,73 @@ nav {
   bottom: -16px;
   left: 24px;
   background: white;
-  border-radius: 14px;
   padding: 10px 18px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-  z-index: 2;
+  border-radius: 14px;
 }
 
-.badge-icon {
-  font-size: 1.5rem;
-}
+/* ================================
+   SECTIONS
+================================ */
 
-.badge-text {
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: var(--text);
-  line-height: 1.3;
-}
-
-.badge-text span {
-  display: block;
-  font-size: 0.7rem;
-  color: var(--muted);
-}
-
-/* ── SECTIONS ── */
 section {
   padding: 5rem 2.5rem;
   max-width: 1100px;
-  margin: 0 auto;
+  margin: auto;
 }
 
 .section-label {
   font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
   color: var(--rose);
-  margin-bottom: 0.75rem;
+  text-transform: uppercase;
 }
 
 .section-title {
-  font-family: 'Playfair Display', serif;
-  font-size: clamp(1.8rem, 3vw, 2.4rem);
-  margin-bottom: 1rem;
-  color: var(--text);
+  font-family: 'Playfair Display';
+  margin: 1rem 0;
 }
 
 .section-sub {
-  font-size: 1rem;
   color: var(--muted);
-  max-width: 560px;
-  line-height: 1.7;
-  margin-bottom: 3rem;
+  max-width: 600px;
 }
 
-/* ── STATS ── */
+/* ================================
+   STATS
+================================ */
+
 .stats-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
-  margin-top: 3rem;
+  margin-top: 2rem;
 }
 
 .stat-card {
-  text-align: center;
-  padding: 2rem 1.5rem;
-  border: 1px solid rgba(232, 103, 154, 0.18);
-  border-radius: 20px;
   background: white;
+  padding: 2rem;
+  border-radius: 20px;
+  text-align: center;
 }
 
 .stat-num {
-  font-family: 'Playfair Display', serif;
-  font-size: 2.5rem;
+  font-size: 2rem;
   color: var(--rose);
-  display: block;
-  margin-bottom: 0.4rem;
 }
 
-.stat-label {
-  font-size: 0.85rem;
-  color: var(--muted);
-}
+/* ================================
+   GALLERY
+================================ */
 
-/* ── GALLERY ── */
 .gallery-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 1.25rem;
-}
-
-.gallery-col {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
+  gap: 1rem;
 }
 
 .gallery-card {
-  border-radius: 16px;
-  overflow: hidden;
   position: relative;
+  overflow: hidden;
+  border-radius: 16px;
   background: #f0e8ef;
 }
 
@@ -329,159 +252,53 @@ section {
   width: 100%;
   height: 240px;
   object-fit: cover;
-  display: block;
-  transition: transform 0.4s ease;
 }
 
-.gallery-card.tall img {
-  height: 360px;
-}
-
-.gallery-col .gallery-card img {
-  height: 160px;
-}
-
-.gallery-card:hover img {
-  transform: scale(1.04);
-}
-
-.gallery-overlay {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to top, rgba(45, 26, 46, 0.6) 0%, transparent 50%);
-  opacity: 0;
-  transition: opacity 0.3s;
-  display: flex;
-  align-items: flex-end;
-  padding: 1.25rem;
-}
-
-.gallery-card:hover .gallery-overlay {
-  opacity: 1;
-}
-
-.gallery-overlay-text {
-  color: white;
-  font-size: 0.85rem;
-  font-weight: 500;
-}
-
-/* ── CTA STRIP ── */
-.cta-section {
-  padding-top: 0;
-}
+/* ================================
+   CTA
+================================ */
 
 .info-strip {
   background: linear-gradient(135deg, var(--rose), var(--violet));
+  padding: 3rem;
   border-radius: 24px;
-  padding: 3rem 3.5rem;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  gap: 2rem;
-}
-
-.info-strip h3 {
-  font-family: 'Playfair Display', serif;
-  font-size: 1.8rem;
+  display: flex;
+  justify-content: space-between;
   color: white;
-  margin-bottom: 0.5rem;
 }
 
-.info-strip p {
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.95rem;
-  line-height: 1.6;
-}
+/* ================================
+   FOOTER
+================================ */
 
-.btn-white {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  background: white;
-  color: var(--rose);
-  padding: 13px 26px;
-  border-radius: 50px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  text-decoration: none;
-  white-space: nowrap;
-  transition: transform 0.2s;
-}
-
-.btn-white:hover {
-  transform: translateY(-2px);
-}
-
-/* ── FOOTER ── */
 footer {
-  background: var(--text);
-  color: rgba(255, 255, 255, 0.65);
   text-align: center;
   padding: 2rem;
-  font-size: 0.85rem;
-  margin-top: 4rem;
+  background: var(--text);
+  color: white;
 }
 
-footer span {
-  color: var(--pink);
-}
+/* ================================
+   RESPONSIVE
+================================ */
 
-/* ── RESPONSIVE ── */
 @media (max-width: 768px) {
   .hero {
     grid-template-columns: 1fr;
   }
-  .hero-visual {
-    display: none;
-  }
+
   .gallery-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-  .info-strip {
     grid-template-columns: 1fr;
   }
+
   .stats-row {
     grid-template-columns: 1fr;
   }
-  nav {
-    padding: 0 1.5rem;
-  }
-  .nav-links {
-    display: none;
-  }
-  section {
-    padding: 3rem 1.5rem;
-  }
-
-  body.dark {
-  --cream: #120d14;
-  --text: #f5e9f2;
-  --muted: #c7b2c9;
-
-  background: var(--cream);
-  color: var(--text);
 }
 
-body.dark nav {
-  background: rgba(18, 13, 20, 0.85);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-body.dark .stat-card,
-body.dark .gallery-card {
-  background: #1b141d;
-  border-color: rgba(255, 255, 255, 0.08);
-}
-
-body.dark .img-badge {
-  background: #1b141d;
-  color: var(--text);
-}
-
-body.dark footer {
-  background: #0d0a10;
-}
+/* ================================
+   DARK MODE (WICHTIG: AUSSERHALB MEDIA QUERY)
+================================ */
 
 body.dark {
   --cream: #120d14;
@@ -494,13 +311,12 @@ body.dark {
 
 body.dark nav {
   background: rgba(18, 13, 20, 0.85);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid rgba(255,255,255,0.08);
 }
 
 body.dark .stat-card,
 body.dark .gallery-card {
   background: #1b141d;
-  border-color: rgba(255, 255, 255, 0.08);
 }
 
 body.dark .img-badge {
@@ -510,5 +326,4 @@ body.dark .img-badge {
 
 body.dark footer {
   background: #0d0a10;
-}
 }
\ No newline at end of file