/* Component styles ported from the original Vue single-file components whose
   scoped CSS was loaded as runtime chunks (not part of the inlined critical
   CSS in styles.css). Kept here, hand-authored and de-scoped. */

/* Homepage sections used to be wrapped in .mt-8; now that each section is a run
   of blocks preceded by its anchor, restore the inter-section breathing room by
   spacing the (invisible, offset) anchor. */
.main-container a.anchor { margin-top: 2rem; }

/* index.vue: news banner + welcome heading */
.news {
  width: 100%;
  padding: 20px;
  border: 1px solid;
  border-radius: 4px;
  border-color: #acce32;
  margin: 40px auto;
  text-align: center;
  font-size: 16px;
}
.news-link {
  font-weight: bold;
}
.welcome {
  max-width: 600px;
  margin: 0 auto;
}

/* Editor "Hervorheben" (highlight) inline mark — on-brand green. */
.main-container mark { background-color: #acce32; padding: 0 2px; border-radius: 2px; }

/* index.vue / behandlungsspektrum.vue: rounded content images */
.main-container img {
  border-radius: 10px;
}

/* Match prod's `section img { display:block; margin:auto }` — content images
   (which are display:block via Tailwind preflight) are horizontally centered.
   This centers e.g. the HSP cards image inside the karten heading. */
.main-container img {
  margin-left: auto;
  margin-right: auto;
}

/* ...but auto margins on a FLEX item absorb free space, which would tear the
   "psych • help" logo apart and stretch image rows. Reset those. */
.main-container .flex img {
  margin-left: 0;
  margin-right: 0;
}