/* Responsive refinements; kept separate so editorial content stays untouched. */
:root { --person: var(--gold); }
body.theme-popovic .page-title { --person: var(--pop); }
body.theme-belic .page-title { --person: var(--bel); }
body.theme-cajkanovic .page-title { --person: var(--caj); }
body.theme-dzonic .page-title { --person: var(--dzo); }
.material-page.theme-popovic { --person: var(--pop); }
.material-page.theme-belic { --person: var(--bel); }
.material-page.theme-cajkanovic { --person: var(--caj); }
.material-page.theme-dzonic { --person: var(--dzo); }
.menu-toggle { display: none; }
.nav > *, .hero > *, .page-title > *, .intro > *, .item > * { min-width: 0; }
h1, h2, h3, p, .material-slot, .brand { overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--person); outline-offset: 4px; }
main { scroll-margin-top: 7rem; }
.material-slot { line-height: 1.8; }
.material-slot img { height: auto; }
.material-slot table { display: block; max-width: 100%; overflow-x: auto; }
.material-slot pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .nav { gap: .75rem; flex-wrap: wrap; padding: .8rem 1.2rem; }
  .nav .brand { flex: 1; font-size: .95rem; }
  .nav .brand small { font-size: .78rem; }
  .nav.menu-ready .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; min-width: 44px; border: 1px solid var(--line); border-radius: 4px; padding: .5rem .65rem; background: var(--white); color: var(--ink); font: inherit; cursor: pointer; }
  .hamburger { display: grid; gap: 4px; width: 21px; }
  .hamburger span { height: 2px; background: currentColor; }
  .nav .links { flex: 0 0 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .2rem .8rem; }
  .nav.menu-ready .links { display: none; }
  .nav.menu-ready .links.is-open { display: grid; max-height: 65vh; overflow-y: auto; padding-top: .65rem; border-top: 1px solid var(--line); }
  .links a { display: flex; align-items: center; min-height: 44px; padding: .5rem .65rem; font-size: 1rem; }
  .links a[aria-current] { background: var(--white); font-weight: bold; }
  .hero { grid-template-columns: minmax(0,1fr); min-height: auto; gap: 2.5rem; }
  .portrait-map { width: 100%; max-width: 640px; min-height: 700px; margin: 0 auto 2rem; }
}
@media (max-width: 600px) {
  .nav { position: sticky; top: 0; padding: .65rem 1rem; align-items: center; }
  .nav .brand { font-size: .78rem; letter-spacing: .025em; }
  .nav .brand small { font-size: .72rem; line-height: 1.4; }
  .menu-word { display: none; }
  .hero { padding: 2rem 1rem 2.5rem; }
  .hero h1 { font-size: clamp(2.2rem,10vw,3.4rem); line-height: 1.08; }
  .hero-note, .intro-copy { font-size: 1rem; }
  .portrait-map { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem .85rem; min-height: 0; }
  .portrait-map .person { position: static; width: auto; height: auto; }
  .portrait-map .popovic, .portrait-map .dzonic { grid-column: 1 / -1; width: 64%; justify-self: center; }
  .portrait-map .person img { height: auto; aspect-ratio: 4/5; object-fit: cover; }
  .portrait-map .person strong { font-size: 1rem; line-height: 1.35; }
  .intro, .page-title { padding: 2.5rem 1rem; gap: 1.5rem; }
  .intro h2, .page-title h1 { font-size: clamp(2rem,8.5vw,3rem); line-height: 1.15; }
  .page-title img { max-width: 320px; margin-inline: auto; height: auto; }
  .people, .collection { padding: 2.5rem 1rem; }
  .cards { gap: .75rem; }
  .card { padding: .65rem; }
  .card h3 { font-size: 1.2rem; line-height: 1.25; }
  .item { grid-template-columns: minmax(0,1fr); gap: .75rem; }
  .material-button { white-space: normal; min-height: 44px; display: inline-flex; align-items: center; }
  .material { padding: 2rem 1rem 3rem; }
  .material h1 { font-size: clamp(1.85rem,8vw,2.7rem); line-height: 1.15; margin-top: 2rem; }
  .material h1 + h1 { margin-top: .75rem; }
  .material-slot { padding: 1rem; margin-top: 1.5rem; min-height: 0; }
  .material-slot h2 { font-size: 1.6rem; }
  .material-meta { padding-bottom: 1rem; }
  .text-block { padding: 1rem; }
  .impressum { padding: 2.5rem 1rem; }
  .impressum h1 { font-size: 2.7rem; }
  footer { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1rem; }
  footer a, .back { display: inline-block; min-height: 44px; padding-block: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .person, .card, .material-button { transition: none; }
}