update

app/kontakt/page.module.css

@@ -0,0 +1,189 @@
+.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: 24ch;
+  position: relative;
+  z-index: 2;
+}
+
+.lead {
+  margin-top: var(--space-3);
+  font-size: var(--font-size-base);
+  max-width: 60ch;
+  position: relative;
+  z-index: 2;
+}
+
+/* --- Form Section --- */
+.formSection {
+  padding-block: var(--space-16);
+}
+
+.formInner {
+  max-width: var(--container-width);
+  margin-inline: auto;
+  padding-inline: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--space-2);
+  padding: var(--space-2) var(--space-2) var(--space-2) 0;
+}
+
+/* Links: kein eigener Hintergrund - bleibt leer/weiß */
+.formPanel {
+  padding: var(--space-8) var(--space-6) var(--space-6);
+}
+
+/*
+  Rechts: Hintergrundbild mit dunklem Verlauf zur Lesbarkeit.
+  Inhalt wird als Flex-Column mit space-between verteilt:
+  Überschrift oben links, Kontaktdaten unten links.
+*/
+.infoPanel {
+  position: relative;
+  background-image:
+    linear-gradient(
+      180deg,
+      rgb(0 0 0 / 35%) 0%,
+      rgb(0 0 0 / 20%) 45%,
+      rgb(0 0 0 / 65%) 100%
+    ),
+    url("/images/contact.jpg");
+  background-size: cover;
+  background-position: center;
+  padding: var(--space-8) var(--space-6) var(--space-6);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 420px;
+  border-radius: var(--space-2);
+}
+
+.infoHeading {
+  color: #fff;
+  max-width: 20ch;
+}
+
+.infoList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  list-style: none;
+  padding: 0;
+}
+
+.infoItem {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.infoLabel {
+  font-size: var(--font-size-small, 0.875rem);
+  font-weight: var(--font-weight-medium);
+  color: rgb(255 255 255 / 80%);
+}
+
+.infoValue {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: #fff;
+  text-decoration: none;
+}
+
+a.infoValue:hover {
+  text-decoration: underline;
+}
+
+/* Tablet: 768px – 50/50 Aufteilung */
+@media (min-width: 768px) {
+  .hero,
+  .formSection {
+    padding-block: var(--space-24);
+  }
+
+  .decoration {
+    display: grid;
+    top: -24px;
+  }
+
+  .dot {
+    width: 24px;
+    height: 24px;
+  }
+
+  .formInner {
+    flex-direction: row;
+    align-items: stretch;
+    background: var(--color-background-linear);
+  }
+
+  .formPanel {
+    width: 50%;
+    padding: var(--space-8);
+  }
+
+  .infoPanel {
+    width: 50%;
+    padding: var(--space-10) var(--space-8) var(--space-8);
+    min-height: 480px;
+  }
+}
+
+/* Desktop: 1024px – zurück auf 40/60 */
+@media (min-width: 1024px) {
+  .hero {
+    padding-block: var(--space-36);
+  }
+
+  .decoration {
+    top: -42px;
+  }
+
+  .formPanel {
+    width: 40%;
+    padding: var(--space-10);
+  }
+
+  .infoPanel {
+    width: 60%;
+    padding: var(--space-12) var(--space-10) var(--space-10);
+    min-height: 560px;
+  }
+}