/* About page only (loaded on the page with the "Über mich" template). */

/* ── Story: heading left, text right ── */
.prose { max-width: var(--container-text); }
.prose > :last-child { margin-bottom: 0; }

/* ── Way of working: short statements, no cards ── */
.attitude__list { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.attitude__title { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.attitude__text { margin: 0; color: var(--color-text-muted); }

/* ── Career timeline: period left, role right, no lines ── */
.career__list { display: grid; gap: var(--space-5); max-width: var(--container-text); margin: 0; padding: 0; list-style: none; }
.career__item { display: grid; gap: var(--space-1); }
.career__period { margin: 0; color: var(--color-text-subtle); font-size: var(--text-sm); }
.career__role { margin: 0; font-weight: 500; }
.career__org { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── Photo strip ── */
/* Flex, not grid: photos keep one size (2 per row on phones, 4 from 48rem) and every row, including an
   incomplete last one, is centred. One photo sits in the middle, three leave the second in the middle. */
.photo-strip__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.photo-strip__list li { flex: 0 0 calc((100% - var(--space-4)) / 2); min-width: 0; }
.photo-strip__list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }

/* ── "Mehr anzeigen" under the qualification cards ── */
.quals__more { margin-top: var(--space-5); }
.quals__more summary { width: fit-content; color: var(--color-primary); font-weight: 500; cursor: pointer; }
.quals__more[open] summary { margin-bottom: var(--space-5); }

@media (min-width: 48rem) {
  .attitude__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .photo-strip__list li { flex-basis: calc((100% - 3 * var(--space-4)) / 4); }
}

@media (min-width: 52rem) {
  .story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-7); align-items: start; }
  .story .section-heading { margin: 0; }
  .career { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-7); align-items: start; }
  .career .section-heading { margin: 0; }
  .career__item { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); }
  .career__org { grid-column: 2; }
}