2026-10-01 19:28:05 +02:00
1 changed files with 20 additions and 0 deletions
@@ -93,6 +93,26 @@
    outline-color: var(--color-focus-inverse);
 }

+/* On a phone the buttons used to wrap onto a row each: two wide blocks stacked,
+   far too heavy for the top of the page. Instead they share one row in equal
+   columns -- the same buttons as on the desktop, just side by side and a little
+   tighter. Short labels ("Termine", "Kontakt") fit on one line; a longer one
+   wraps inside its button (centred) rather than pushing the other off the row. */
+@media (max-width: 40rem) {
+    .hero-actions {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
+        gap: var(--space-2);
+    }
+
+    .hero .btn {
+        justify-content: center;
+        padding: var(--space-2) var(--space-3);
+        text-align: center;
+    }
+}
+
 /* --- Next event ---------------------------------------------------------------
   A card on the gradient: the regular card surface, so its text uses the normal
   tokens and adapts to dark mode by itself. The whole card is one link to the