/* ===== Supplemental styles: inner pages, blog, section tweaks ===== */

/* Sections that use a white background in the mockup (set via inline style there). */
#werte,
#mitmachen { background: var(--white); }

/* Inline-style replacements from the mockup. */
.grid-ueber { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mit-title {
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 800;
  margin: 14px 0 26px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
}

/* Group blocks should not add their own width constraint – the mockup .wrap handles it. */
.wp-block-group { margin: 0; }

/* ===== Inner pages / blog readable content ===== */
main.pad { min-height: 46vh; }

.prose { padding-top: 46px; padding-bottom: 56px; }
.prose > * { max-width: 760px; }
.prose .post-title,
.prose > h1:first-child {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 24px;
}
.prose h2 { font-size: 1.8rem; font-weight: 800; margin: 36px 0 12px; }
.prose h3 { font-size: 1.35rem; font-weight: 700; margin: 26px 0 10px; }
.prose p { margin: 0 0 16px; font-size: 1.08rem; }
.prose ul, .prose ol { margin: 0 0 18px 1.3em; }
.prose li { margin: 7px 0; }
.prose a { color: var(--coral-deep); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--coral); }
.prose img { border-radius: 16px; max-width: 100%; height: auto; }
.prose blockquote {
  border-left: 4px solid var(--yellow);
  padding: 4px 0 4px 20px;
  margin: 22px 0;
  color: #414954;
  font-size: 1.12rem;
}

/* Blog post list */
.post-card {
  background: var(--white);
  border: 2px solid rgba(33,41,51,.08);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 22px;
}
.post-card h2 { font-size: 1.5rem; margin-bottom: 8px; }
.post-card .post-meta { font-size: .9rem; color: #6b7480; margin-bottom: 10px; }

.post-meta { color: #6b7480; font-size: .95rem; margin-bottom: 18px; }