update

2026-09-10 14:31:05 +02:00
1 parent cc2b84dcad
commit 3bda7d6eb6
@@ -0,0 +1,207 @@
+.hero {
+  background: var(--color-background-linear);
+  padding-block: var(--space-16);
+  position: relative;
+  overflow: hidden;
+}
+
+.inner {
+  max-width: var(--container-width);
+  margin-inline: auto;
+  padding-inline: var(--space-4);
+  position: relative;
+  z-index: 1;
+}
+
+.decoration {
+  position: absolute;
+  top: var(--space-8);
+  right: var(--space-8);
+  display: none;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: var(--space-3);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.dot {
+  width: 14px;
+  height: 14px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-accent);
+  opacity: 0.8;
+}
+
+.heading {
+  color: var(--color-heading);
+  max-width: 26ch;
+  position: relative;
+  z-index: 2;
+}
+
+.lead {
+  margin-top: var(--space-3);
+  font-size: var(--font-size-base);
+  max-width: 65ch;
+  position: relative;
+  z-index: 2;
+}
+
+/* --- Story Section --- */
+.storySection {
+  padding-block: var(--space-16);
+}
+
+.storyInner {
+  max-width: var(--container-width);
+  margin-inline: auto;
+  padding-inline: var(--space-4);
+}
+
+.storyText {
+  max-width: 70ch;
+}
+
+.storyHeading {
+  color: var(--color-heading);
+  margin-bottom: var(--space-4);
+}
+
+.storyLead {
+  font-size: var(--font-size-base);
+  margin-bottom: var(--space-4);
+}
+
+.storyLead:last-child {
+  margin-bottom: 0;
+}
+
+/* --- Werte Section (Kachel-Design wie MaintenanceCleaningSection) --- */
+.werteSection {
+  background: var(--color-background-linear);
+  padding-block: var(--space-16);
+}
+
+.werteInner {
+  max-width: var(--container-width);
+  margin-inline: auto;
+  padding-inline: var(--space-4);
+}
+
+.werteHeading {
+  max-width: 24ch;
+  color: var(--color-heading);
+}
+
+.werteLead {
+  margin-top: var(--space-3);
+  font-size: var(--font-size-base);
+  max-width: 48ch;
+}
+
+.werteGrid {
+  margin-top: var(--space-8);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: var(--space-5);
+}
+
+.werteCard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  background: var(--color-surface-muted, #e6ede9);
+  border-radius: 12px;
+  padding: var(--space-5);
+}
+
+.werteIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--color-accent);
+}
+
+.werteCardHeading {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-heading);
+}
+
+.werteCardText {
+  font-size: var(--font-size-xs);
+  color: var(--font-heading-color);
+}
+
+/* --- Philosophy Section --- */
+.philosophySection {
+  padding-block: var(--space-16);
+}
+
+.philosophyInner {
+  max-width: var(--container-width);
+  margin-inline: auto;
+  padding-inline: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.philosophyCol {
+  flex: 1;
+}
+
+.philosophyHeading {
+  color: var(--color-heading);
+  margin-bottom: var(--space-3);
+}
+
+.philosophyText {
+  font-size: var(--font-size-base);
+}
+
+/* Tablet: 768px */
+@media (min-width: 768px) {
+  .storySection,
+  .werteSection,
+  .philosophySection {
+    padding-block: var(--space-24);
+  }
+
+  .decoration {
+    display: grid;
+    top: -24px;
+  }
+
+  .dot {
+    width: 24px;
+    height: 24px;
+  }
+
+  .werteGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .philosophyInner {
+    flex-direction: row;
+    gap: var(--space-10);
+  }
+}
+
+/* Desktop: 1024px */
+@media (min-width: 1024px) {
+  .hero {
+    padding-block: var(--space-36);
+  }
+
+  .decoration {
+    top: -42px;
+  }
+
+  .werteGrid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}