Überarbeitung landing und index

assets/css/public.css

@@ -71,11 +71,23 @@ body.public-page {
     padding: 4rem 6vw;
 }
 
+/* Section intros (Titel + Unterzeile) sind ueberall zentriert, damit die
+   Seite nicht zwischen linksbuendigen und zentrierten Abschnitten springt.
+   Die Karteninhalte darunter bleiben davon unberuehrt links ausgerichtet. */
+.public-section > header.major {
+    text-align: center;
+    max-width: 42rem;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .public-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 1.25rem;
     max-width: 72rem;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .public-feature,
@@ -84,6 +96,13 @@ body.public-page {
     border-radius: 8px;
     padding: 1.5rem;
     background: #ffffff;
+    text-align: left;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.public-feature:hover {
+    transform: translateY(-0.2rem);
+    box-shadow: 0 0.75rem 1.75rem rgba(61, 68, 73, 0.1);
 }
 
 .public-feature h3 {
@@ -94,6 +113,18 @@ body.public-page {
     margin-bottom: 0;
 }
 
+.public-highlight {
+    background: #eef4ea;
+}
+
+.public-fineprint {
+    max-width: 72rem;
+    margin-left: auto;
+    margin-right: auto;
+    color: #7f888f;
+    font-size: 0.9em;
+}
+
 .public-auth {
     min-height: 100vh;
     background-image: url("../images/landing-hero.png");
@@ -171,6 +202,8 @@ body.public-page {
 
 .public-demo-frame {
     max-width: 72rem;
+    margin-left: auto;
+    margin-right: auto;
     border: solid 1px rgba(210, 215, 217, 0.75);
     border-radius: 8px;
     overflow: hidden;
@@ -188,6 +221,8 @@ body.public-page {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 1.25rem;
     max-width: 72rem;
+    margin-left: auto;
+    margin-right: auto;
     margin-bottom: 1.5rem;
 }
 
@@ -221,14 +256,8 @@ body.public-page {
     margin: 0 0.5rem;
 }
 
-.public-cta {
-    text-align: center;
-}
-
-.public-cta .major {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.public-cta ul.actions {
+    justify-content: center;
 }
 
 @media screen and (max-width: 980px) {