Backup eingespielt

app/leistungen/[slug]/page.module.css

@@ -0,0 +1,172 @@
+.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;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  align-items: center;
+}
+
+.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: 24ch;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  text-align: center;
+  align-self: center;
+}
+
+.headingSub {
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-muted);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.imageWrapper {
+  position: relative;
+  width: min(100%, 300px);
+  margin-inline: auto;
+  aspect-ratio: 4 / 3;
+  flex-shrink: 0;
+  order: -1;
+  z-index: 1;
+}
+
+.imageWrapper::before {
+  content: "";
+  position: absolute;
+  left: 8%;
+  right: 8%;
+  bottom: -4px;
+  height: 28%;
+  background: color-mix(in srgb, var(--color-accent) 55%, transparent);
+  filter: blur(22px);
+  opacity: 0.45;
+  border-radius: 999px;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.imageFrame {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.08),
+    0 24px 60px rgba(0, 0, 0, 0.06);
+}
+
+.image {
+  object-fit: cover;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-6);
+  align-items: center;
+  text-align: center;
+}
+
+.lead {
+  font-size: var(--font-size-base);
+  text-align: center;
+  width: min(100%, 48ch);
+  margin-inline: auto;
+}
+
+/* Tablet: 768px */
+@media (min-width: 768px) {
+  .content {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--space-8);
+  }
+
+  .inner {
+    align-items: flex-start;
+  }
+
+  .heading {
+    text-align: left;
+    align-self: flex-start;
+  }
+
+  .body {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .lead {
+    text-align: left;
+    margin-inline: 0;
+  }
+
+  .decoration {
+    display: grid;
+    top: -24px;
+  }
+
+  .imageWrapper {
+    width: 260px;
+
+    order: 0; /* zurück zur normalen Reihenfolge */
+  }
+
+  .dot {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+/* Desktop: 1024px */
+@media (min-width: 1024px) {
+  .hero {
+    padding-block: var(--space-36);
+  }
+
+  .decoration {
+    top: -42px;
+  }
+}