Elternbeirat.Web/Features/Events/EventList.razor.css

@@ -1,14 +1,29 @@
 /* The card grid (.event-list) is shared with the home-page embed and lives in the
    global app.css; the card itself is EventCard. Only the page's own parts are here. */
 
+/* Same centred 42rem reading column as a content page (ContentPage.razor.css), so
+   every page of the site shares one column under the header. */
+h1,
+h2,
+article,
+p,
+.event-list,
+.past-events {
+    max-width: 42rem;
+    margin-inline: auto;
+}
+
+/* auto, not 0: this rule outweighs the column rule above and would otherwise pull
+   the button back to the left edge of the page. */
 .events-subscribe {
-    margin: var(--space-4) 0;
+    margin: var(--space-4) auto;
 }
 
 /* Past events: one folded-up card. Opened, a compact list grouped by year,
    deliberately quieter than the upcoming cards above. The open/close triangle is
    the shared .disclosure rule in app.css, the same as on the FAQ topics. */
 .past-events {
+    box-sizing: border-box;   /* padding inside the 42rem, flush with the text */
     margin-top: var(--space-5);
     padding: var(--space-3) var(--space-4);
     border: 1px solid var(--color-border);

Elternbeirat.Web/Features/Faqs/FaqList.razor.css

@@ -0,0 +1,17 @@
+/* Same centred 42rem reading column as a content page (ContentPage.razor.css), so
+   every page of the site shares one column under the header. The topic cards and
+   the questions inside them live in the global app.css. */
+h1,
+article,
+p,
+.faq-topic {
+    box-sizing: border-box;   /* padding inside the 42rem, flush with the text */
+    max-width: 42rem;
+    margin-inline: auto;
+}
+
+/* The intro's last paragraph drops its margin (app.css), so the first card would
+   sit right under the text; this gives it the same air as between sections. */
+article {
+    margin-bottom: var(--space-5);
+}

Elternbeirat.Web/Features/Pages/ContentPage.razor.css

@@ -0,0 +1,11 @@
+/* A content page is one reading column: its text, boxes and card grids all stop at
+   42rem (app.css). Left-aligned in the 72rem layout that column left a wide empty
+   strip on the right of a desktop screen; centred, the empty space splits evenly and
+   the page sits balanced under the header. Title and body share the column, so they
+   keep one left edge. The children inside keep margin 0 and simply fill it. */
+h1,
+article,
+p {
+    max-width: 42rem;
+    margin-inline: auto;
+}

Elternbeirat.Web/Features/Posts/PostDetail.razor.css

@@ -1,13 +1,21 @@
-/* The article: a reading column of about 68 characters with generous leading, so a
+/* The article: the site's centred 42rem reading column (as on a content page,
-   long post reads like a page, not like a form. Everything inside follows this
+   ContentPage.razor.css) with generous leading, so a long post reads like a page,
-   width -- the global 42rem cap on paragraphs, lists and boxes is lifted here, or
+   not like a form. Everything inside follows this width -- the global 42rem cap on
-   the text would stop short of the column it sits in. */
+   paragraphs, lists and boxes is lifted here, so nothing stops short of the column
+   (the post's own leading makes the text a touch wider than elsewhere). */
 .post {
-    max-width: 68ch;
+    max-width: 42rem;
-    margin-top: var(--space-4);
+    margin: var(--space-4) auto 0;
     line-height: 1.75;
 }
 
+/* The back link is an inline button, which margin: auto cannot centre. A left
+   margin of half the free space puts it on the column's left edge instead, and
+   max() keeps it at 0 once the screen is narrower than the column. */
+.btn-quiet {
+    margin-left: max(0px, (100% - 42rem) / 2);
+}
+
 .post ::deep :is(p, ul, ol, blockquote, .aufruf, .hinweis) {
     max-width: none;
 }
@@ -46,8 +54,8 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--space-3);
-    max-width: 68ch;
+    max-width: 42rem;
-    margin-top: var(--space-6);
+    margin: var(--space-6) auto 0;
     padding-top: var(--space-4);
     border-top: 1px solid var(--color-border);
 }

Elternbeirat.Web/Features/Posts/PostList.razor.css

@@ -10,3 +10,20 @@
         grid-column: 1 / -1;
     }
 }
+
+/* Same centred 42rem reading column as a content page (ContentPage.razor.css), so
+   every page of the site shares one column under the header. Two cards still fit
+   side by side in it. */
+h1,
+article,
+p,
+.post-list {
+    max-width: 42rem;
+    margin-inline: auto;
+}
+
+/* The intro's last paragraph drops its margin (app.css), so the first card would
+   sit right under the text; this gives it the same air as between sections. */
+article {
+    margin-bottom: var(--space-5);
+}

Elternbeirat.Web/wwwroot/app.css

@@ -1050,13 +1050,17 @@ main:focus {
    a normal heading; every group is a block of its own. One raster for all of them,
    so the cards line up across groups: a group of one person gets the same card
    width as a group of six, not a stretched one. 17rem fits a long double name.
+   Like every other block it stays in the 42rem reading column, so the cards share
+   the edges of the text above and below them; that leaves room for two columns
+   (three would need 52.5rem), one on a phone.
    The cards of a row share one height (the grid's default stretch), so a row reads
    as a calm band; the card itself keeps its content at the top (align-content). */
 .markdown-body .team > ul {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
     gap: var(--space-3);
-    max-width: none;
+    box-sizing: border-box;
+    max-width: 42rem;
     margin: 0 0 var(--space-4);
     padding: 0;
     list-style: none;