update

components/slider/Slider.module.css

@@ -0,0 +1,197 @@
+/* ==========================================================
+   Mobile First Basis-Styles (< 768px)
+   ========================================================== */
+
+.slider {
+  /* Slide-Abstand zentral als Variable, pro Breakpoint überschreibbar */
+  --slide-spacing: 1rem;
+
+  width: 100%;
+  margin: 0 auto;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.viewport {
+  overflow: hidden;
+  border-radius: 24px;
+}
+
+.container {
+  display: flex;
+  touch-action: pan-y pinch-zoom;
+  /* Kompensiert das padding-left des ersten Slides, damit dieser
+     bündig am linken Rand des Viewports beginnt. */
+  margin-left: calc(var(--slide-spacing) * -1);
+}
+
+.slide {
+  flex: 0 0 100%;
+  min-width: 0;
+  /* Erzeugt den sichtbaren Abstand zum vorherigen Slide.
+     Padding statt margin, weil Embla SSR nur bei padding-basiertem
+     Spacing zuverlässig unterstützt. */
+  padding-left: var(--slide-spacing);
+}
+
+/* Mobil: gestapelt, Bild oben, Text darunter */
+.split {
+  display: grid;
+  grid-template-columns: 1fr;
+  height: auto;
+  overflow: hidden;
+}
+
+.imagePanel {
+  position: relative;
+  min-width: 0;
+  height: 230px;
+  order: -1;
+  overflow: hidden;
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+}
+
+.image {
+  object-fit: cover;
+  object-position: center;
+}
+
+.textPanel {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  min-width: 0;
+  min-height: 220px;
+  padding: 1.5rem;
+  color: #fff;
+  background:
+    radial-gradient(circle at 5% 0%, rgb(117 211 193 / 58%), transparent 49%),
+    linear-gradient(135deg, #42ac99 0%, var(--color-accent) 80%);
+  border-bottom-left-radius: 24px;
+  border-bottom-right-radius: 24px;
+}
+
+.heading {
+  color: #f9f9f9;
+  padding: 0 0 8px 0;
+}
+
+.text {
+  margin: 0;
+  line-height: var(--line-height-card);
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.arrow {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: #000;
+  color: #fff;
+  cursor: pointer;
+}
+
+.arrow:hover:not(:disabled) {
+  background: #242424;
+}
+
+.arrow:disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+
+.dots {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+.dot {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: #b8b8b8;
+  cursor: pointer;
+}
+
+.dotActive {
+  background: #000;
+}
+
+.arrow:focus-visible,
+.dot:focus-visible {
+  outline: 3px solid #177f73;
+  outline-offset: 3px;
+}
+
+/* ==========================================================
+   Tablet (>= 768px): zurück zum Split-Layout, Text links / Bild rechts
+   ========================================================== */
+@media (min-width: 768px) {
+  .slider {
+    --slide-spacing: 1.5rem;
+  }
+
+  .split {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    height: 360px;
+  }
+
+  .imagePanel {
+    height: 360px;
+    order: 0;
+    border-top-right-radius: 24px;
+    border-bottom-right-radius: 24px;
+    border-top-left-radius: 0;
+  }
+
+  .textPanel {
+    min-height: 0;
+    padding: clamp(1.5rem, 3vw, 3rem);
+    border-top-left-radius: 24px;
+    border-bottom-left-radius: 24px;
+    border-bottom-right-radius: 0;
+  }
+}
+
+/* ==========================================================
+   Desktop (>= 1024px): finale Maße wie im Ursprungsdesign
+   ========================================================== */
+@media (min-width: 1024px) {
+  .slider {
+    width: 992px;
+    --slide-spacing: 2rem;
+  }
+
+  .viewport {
+    border-radius: 24px;
+  }
+
+  .split {
+    height: 400px;
+  }
+
+  .imagePanel {
+    height: 400px;
+  }
+
+  .textPanel {
+    padding: clamp(2rem, 4vw, 4.75rem);
+  }
+}