KI-AGENT: Zielgruppen-Seite für Webseite ergänzt

website/app/assets/css/main.css

@@ -392,6 +392,7 @@ footer {
 }
 
 .workflow-section,
+.audience-teaser,
 .matrix-section,
 .open-source-section,
 .script-section,
@@ -443,6 +444,17 @@ footer {
   width: 2rem;
 }
 
+.audience-teaser {
+  align-items: center;
+  border-top: 1px solid rgba(23, 33, 31, 0.12);
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.audience-teaser h2 {
+  font-size: clamp(1.8rem, 3vw, 2.8rem);
+  max-width: 52rem;
+}
+
 .matrix-section {
   border-top: 1px solid rgba(23, 33, 31, 0.12);
   grid-template-columns: 1fr;
@@ -663,6 +675,79 @@ footer {
   padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2rem) 5rem;
 }
 
+.audience-page {
+  margin: 0 auto;
+  max-width: 1180px;
+  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2rem) 5rem;
+}
+
+.audience-heading {
+  max-width: 58rem;
+  margin-bottom: 2.5rem;
+}
+
+.audience-heading h1 {
+  max-width: 12ch;
+}
+
+.audience-heading p {
+  color: #51605c;
+  font-size: 1.08rem;
+  line-height: 1.7;
+  max-width: 46rem;
+}
+
+.audience-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.audience-grid article {
+  background: rgba(255, 255, 255, 0.76);
+  border: 1px solid rgba(23, 33, 31, 0.1);
+  border-radius: 0.5rem;
+  padding: 1.35rem;
+}
+
+.audience-grid span {
+  color: var(--accent-dark);
+  display: inline-block;
+  font-size: 0.82rem;
+  font-weight: 800;
+  margin-bottom: 1rem;
+}
+
+.audience-grid h2 {
+  font-size: 1.2rem;
+  margin-bottom: 0.75rem;
+}
+
+.audience-grid p,
+.audience-grid li,
+.audience-fit li {
+  color: #51605c;
+  line-height: 1.6;
+}
+
+.audience-grid ul,
+.audience-fit ul {
+  display: grid;
+  gap: 0.55rem;
+  margin: 1rem 0 0;
+  padding-left: 1.1rem;
+}
+
+.audience-fit {
+  align-items: start;
+  border-top: 1px solid rgba(23, 33, 31, 0.12);
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
+  margin-top: 5rem;
+  padding-top: 4rem;
+}
+
 .legal-heading {
   max-width: 45rem;
   margin-bottom: 2.5rem;
@@ -742,6 +827,7 @@ footer p {
 @media (max-width: 980px) {
   .hero-section,
   .workflow-section,
+  .audience-teaser,
   .matrix-section,
   .open-source-section,
   .script-section,
@@ -755,6 +841,8 @@ footer p {
 
   .highlights,
   .feature-grid,
+  .audience-grid,
+  .audience-fit,
   .matrix-layout,
   .federation-panel,
   .legal-grid {
@@ -797,6 +885,11 @@ footer p {
     font-size: 3rem;
   }
 
+  .audience-heading h1 {
+    font-size: 2.55rem;
+    max-width: none;
+  }
+
   .product-preview {
     min-height: auto;
   }
@@ -812,6 +905,7 @@ footer p {
   .metric-row,
   .highlights,
   .feature-grid,
+  .audience-grid,
   .matrix-stack,
   .legal-grid {
     grid-template-columns: 1fr;