@media (max-width: 991px) {
  .topbar {
    justify-content: space-between;
    min-height: 52px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  .topbar-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.1rem;
    min-width: 0;
  }

  .topbar-brand {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    font-size: clamp(1.15rem, 5vw, 1.45rem);
  }

  .topbar-page {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--muted);
    line-height: 1;
    transition: opacity 0.3s ease;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  body.home .cover-nav {
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.85rem;
    pointer-events: none;
    gap: 0.75rem;
  }

  body.home .cover-nav .cover-brand,
  body.home .cover-nav .nav-toggle {
    pointer-events: auto;
  }

  body.home .cover-brand {
    display: inline-flex;
    align-items: center;
    max-width: calc(100vw - 5.5rem);
    overflow: hidden;
    font-family: var(--display);
    font-size: clamp(0.95rem, 4vw, 1.25rem);
    letter-spacing: 0.02em;
    line-height: 0.88;
    color: var(--blue);
    text-decoration: none;
    min-height: 44px;
    flex: 1 1 auto;
    min-width: 0;
    transition: opacity 0.3s ease, transform 0.35s ease;
  }

  body.home .cover-brand:hover {
    text-decoration: none;
    opacity: 0.88;
  }

  /* Trio screen: brand + back button were stacking on the same corner */
  body.home.is-open .cover-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    justify-content: flex-end;
  }

  body.home.is-open .cover-brand {
    display: none;
  }

  body.home.is-open .back-cover {
    top: 0.75rem;
    left: 0.75rem;
  }

  body.home.is-open .screen-trio {
    padding-top: 3.75rem;
  }

  .topbar .nav,
  body.home .cover-nav .nav,
  body > .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 65;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 4.75rem 1.35rem calc(1.5rem + env(safe-area-inset-bottom));
    background: var(--cream);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition:
      opacity 0.35s ease,
      transform 0.4s cubic-bezier(0.2, 0.85, 0.2, 1),
      visibility 0.4s;
  }

  body.nav-open .topbar .nav,
  body.nav-open .cover-nav .nav,
  body.nav-open > .nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  body.nav-open .topbar {
    position: sticky;
    z-index: 70;
    background: var(--cream);
  }

  body.nav-open .cover-nav {
    z-index: 70;
  }

  body.nav-open .nav-toggle {
    position: relative;
    z-index: 71;
  }

  body.nav-open {
    overflow: hidden;
  }

  .nav-main,
  .nav-sub {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
  }

  .nav-main {
    margin-top: 0.35rem;
  }

  .nav-sub {
    margin-top: 1.15rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--blue-soft);
    gap: 0.15rem;
  }

  .nav > .nav-link {
    margin-top: 0.35rem;
  }

  .nav-num {
    display: inline-block;
    width: 1.75rem;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .nav-foot {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.5rem;
  }

  .topbar .nav .nav-link,
  body.home .cover-nav .nav .nav-link,
  body > .nav .nav-link {
    position: relative;
    width: 100%;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.65rem;
    min-height: 52px;
    padding: 0.55rem 0.85rem 0.55rem 0.75rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    font-size: clamp(1.15rem, 5.5vw, 1.55rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.35s cubic-bezier(0.2, 0.85, 0.2, 1),
      transform 0.4s cubic-bezier(0.2, 0.85, 0.2, 1),
      background 0.2s ease,
      box-shadow 0.2s ease;
    transition-delay: 0s;
  }

  .topbar .nav .nav-link::after,
  body.home .cover-nav .nav .nav-link::after,
  body > .nav .nav-link::after {
    display: none;
  }

  .topbar .nav .nav-link .nav-label::before,
  body.home .cover-nav .nav .nav-link .nav-label::before,
  body > .nav .nav-link .nav-label::before {
    display: none;
  }

  .topbar .nav .nav-link--sub,
  body.home .cover-nav .nav .nav-link--sub,
  body > .nav .nav-link--sub {
    font-size: clamp(0.85rem, 3.8vw, 1rem);
    letter-spacing: 0.14em;
    min-height: 44px;
    opacity: 0;
    color: var(--muted);
  }

  body.nav-open .topbar .nav .nav-link,
  body.nav-open .cover-nav .nav .nav-link,
  body.nav-open > .nav .nav-link {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.06s + var(--i, 0) * 0.05s);
  }

  body.nav-open .topbar .nav .nav-link--sub,
  body.nav-open .cover-nav .nav .nav-link--sub,
  body.nav-open > .nav .nav-link--sub {
    opacity: 0.75;
  }

  body.nav-open .topbar .nav .nav-link--sub[aria-current="page"],
  body.nav-open .cover-nav .nav .nav-link--sub[aria-current="page"],
  body.nav-open > .nav .nav-link--sub[aria-current="page"] {
    opacity: 1;
    color: var(--blue);
  }

  .nav-main .nav-link:nth-child(1) { --i: 0; }
  .nav-main .nav-link:nth-child(2) { --i: 1; }
  .nav-main .nav-link:nth-child(3) { --i: 2; }
  .nav-sub .nav-link:nth-child(1) { --i: 3; }
  .nav-sub .nav-link:nth-child(2) { --i: 4; }
  .nav > .nav-link { --i: 5; }

  .topbar .nav .nav-link[aria-current="page"],
  body.home .cover-nav .nav .nav-link[aria-current="page"],
  body > .nav .nav-link[aria-current="page"] {
    background: color-mix(in srgb, var(--blue) 6%, transparent);
    box-shadow: inset 3px 0 0 var(--blue);
  }

  .topbar .nav .nav-link[aria-current="page"] .nav-num,
  body.home .cover-nav .nav .nav-link[aria-current="page"] .nav-num,
  body > .nav .nav-link[aria-current="page"] .nav-num {
    color: var(--blue);
  }

  .topbar .nav .nav-link[aria-current="page"] .nav-label::after,
  body.home .cover-nav .nav .nav-link[aria-current="page"] .nav-label::after,
  body > .nav .nav-link[aria-current="page"] .nav-label::after {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.55rem;
    border-radius: 50%;
    background: var(--blue);
    vertical-align: 0.15em;
  }

  .topbar .nav .nav-link:hover,
  .topbar .nav .nav-link:focus,
  .topbar .nav .nav-link:focus-visible,
  body.home .cover-nav .nav .nav-link:hover,
  body.home .cover-nav .nav .nav-link:focus,
  body.home .cover-nav .nav .nav-link:focus-visible,
  body > .nav .nav-link:hover,
  body > .nav .nav-link:focus,
  body > .nav .nav-link:focus-visible {
    outline: none;
    background: var(--blue-soft);
    text-decoration: none;
    opacity: 1;
  }

  .topbar .nav .nav-link:focus,
  .topbar .nav .nav-link:focus-visible,
  body.home .cover-nav .nav .nav-link:focus,
  body.home .cover-nav .nav .nav-link:focus-visible,
  body > .nav .nav-link:focus,
  body > .nav .nav-link:focus-visible {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--blue) 45%, transparent);
  }

  .topbar .nav .nav-link[aria-current="page"]:focus,
  .topbar .nav .nav-link[aria-current="page"]:focus-visible,
  body.home .cover-nav .nav .nav-link[aria-current="page"]:focus,
  body.home .cover-nav .nav .nav-link[aria-current="page"]:focus-visible,
  body > .nav .nav-link[aria-current="page"]:focus,
  body > .nav .nav-link[aria-current="page"]:focus-visible {
    box-shadow: inset 3px 0 0 var(--blue);
  }

  .topbar .nav .nav-link.is-nav-pressed,
  body.home .cover-nav .nav .nav-link.is-nav-pressed,
  body > .nav .nav-link.is-nav-pressed {
    transform: scale(0.98);
    background: var(--blue-soft);
  }

  .nav-next {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 0.9rem;
    border: 1.5px solid var(--blue);
    text-decoration: none;
    color: var(--blue);
    min-height: 44px;
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.35s ease,
      transform 0.4s cubic-bezier(0.2, 0.85, 0.2, 1),
      background 0.2s ease;
    transition-delay: 0s;
  }

  body.nav-open .nav-next {
    opacity: 1;
    transform: none;
    transition-delay: 0.32s;
  }

  .nav-next:hover {
    background: var(--blue-soft);
    text-decoration: none;
  }

  .nav-next-kicker {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--muted);
  }

  .nav-next-meta {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .nav-cta {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.35s ease,
      transform 0.4s cubic-bezier(0.2, 0.85, 0.2, 1);
    transition-delay: 0s;
  }

  body.nav-open .nav-cta {
    opacity: 1;
    transform: none;
    transition-delay: 0.38s;
  }

  @media (prefers-reduced-motion: reduce) {
    .topbar .nav,
    body.home .cover-nav .nav,
    body > .nav,
    .topbar .nav .nav-link,
    body.home .cover-nav .nav .nav-link,
    body > .nav .nav-link,
    .nav-next,
    .nav-cta,
    .nav-toggle,
    .nav-toggle-box,
    .nav-toggle-bar,
    .topbar-brand,
    .cover-brand {
      transition: none !important;
      animation: none !important;
    }

    .topbar .nav,
    body.home .cover-nav .nav,
    body > .nav {
      transform: none;
    }

    .topbar .nav .nav-link,
    body.home .cover-nav .nav .nav-link,
    body > .nav .nav-link,
    .nav-next,
    .nav-cta {
      opacity: 1;
      transform: none;
      transition-delay: 0s !important;
    }
  }

  .page-header {
    flex-direction: column;
    padding: 1.15rem 1.1rem 0.75rem;
    gap: 0.65rem;
  }

  .page-header--solo,
  .page-header--compact {
    padding-top: 1rem;
    padding-bottom: 0.55rem;
  }

  .page-title,
  .meta-row {
    text-align: left;
    justify-content: flex-start;
    width: 100%;
  }

  .page-title h1,
  .page-title h2 {
    font-size: clamp(1.35rem, 6.5vw, 1.85rem);
    letter-spacing: 0.14em;
    line-height: 1.15;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .home-cell:nth-child(odd) {
    border-right: none;
  }

  /* Page h1 already names the section — sideways SVG eats the viewport */
  .vtitle {
    display: none;
  }

  .section {
    padding: 0 1.1rem 2.5rem;
  }

  .section-split {
    flex-direction: column;
    gap: 1.1rem;
  }

  .tour-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .tour-main {
    display: contents;
  }

  .tour-upcoming {
    order: 1;
    position: static;
    padding-bottom: 0;
    background: transparent;
    backdrop-filter: none;
  }

  /* Side photo is desktop chrome — interrupts list hierarchy on phone */
  .tour-figure {
    display: none;
  }

  .tour-archive {
    order: 2;
    margin-top: 1.75rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--blue-soft);
  }

  .tour-section-title {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    margin-bottom: 1rem;
  }

  .tour-archive .tour-section-title {
    margin-top: 0;
    margin-bottom: 0.65rem;
    color: color-mix(in srgb, var(--blue) 55%, var(--cream));
  }

  .tour-upcoming-list.is-loading {
    gap: 1rem;
  }

  .tour-upcoming-list.is-loading .tour-skeleton:first-child {
    border: 1.5px solid color-mix(in srgb, var(--blue) 28%, transparent);
    background: color-mix(in srgb, var(--blue) 5%, var(--cream));
    padding: 1.15rem 1rem;
    margin-bottom: 0.25rem;
  }

  .tour-skeleton {
    gap: 0.65rem;
    padding: 1rem 0;
  }

  .tour-item {
    gap: 0.55rem;
    padding: 1.15rem 0;
    align-items: start;
  }

  .tour-item,
  .tour-item.next {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  /* Primary: next concert as clear hero block */
  .tour-item.next {
    padding: 1.15rem 1.05rem 1.2rem;
    width: 100%;
    margin-bottom: 1rem;
    gap: 0.85rem;
    box-sizing: border-box;
    align-items: stretch;
  }

  .tour-item.next .tour-info {
    gap: 0.55rem;
    width: 100%;
  }

  .tour-item.next .badge {
    margin: 0;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    padding: 0.32rem 0.55rem;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    align-self: center;
    width: max-content;
    max-width: 100%;
  }

  .tour-item.next .tour-scan {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.65rem;
  }

  .tour-item.next .tour-date {
    font-size: clamp(1.28rem, 6vw, 1.5rem);
    letter-spacing: 0.04em;
    line-height: 1.15;
  }

  .tour-item.next .tour-when {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }

  .tour-item.next .tour-venue,
  .tour-item.next .tour-city {
    width: 100%;
    flex: 1 1 100%;
  }

  .tour-item.next .tour-venue {
    font-size: 1.05rem;
    margin-top: 0.35rem;
    line-height: 1.35;
  }

  .tour-item.next .tour-city {
    font-size: 0.85rem;
    margin-top: 0;
  }

  /* Scan rows: date + weekday on one line, venue/city below */
  .tour-scan {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.65rem;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

  .tour-item.past .tour-scan {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: none;
    gap: 0.15rem 0.55rem;
  }

  .tour-date {
    font-size: 1.08rem;
    letter-spacing: 0.05em;
  }

  .tour-item.past {
    padding: 0.85rem 0;
    gap: 0.25rem;
  }

  .tour-item.past .tour-date {
    font-size: 0.95rem;
  }

  .tour-when {
    font-size: 0.74rem;
    letter-spacing: 0.08em;
  }

  .tour-venue,
  .tour-place {
    flex: 1 1 100%;
    line-height: 1.4;
    font-size: 0.92rem;
    margin-top: 0.2rem;
  }

  .tour-item.past .tour-venue,
  .tour-item.past .tour-place {
    font-size: 0.84rem;
    margin-top: 0.1rem;
  }

  .tour-city {
    flex: 1 1 100%;
    font-size: 0.8rem;
    margin-top: 0;
    line-height: 1.35;
  }

  .tour-item.past .tour-city {
    font-size: 0.74rem;
  }

  .tour-item.past .link-ext--archive {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    min-height: 44px;
    padding: 0.2rem 0;
  }

  .tour-meta {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin-top: 0.15rem;
  }

  .tour-item.next .tour-meta {
    margin: 0;
    gap: 0.4rem 0.75rem;
  }

  /* Labeled maps control — icon alone was hard to parse */
  .tour-maps {
    width: auto;
    height: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0.35rem 0.15rem;
    gap: 0.4rem;
    justify-content: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .tour-maps::after {
    content: "Wegbeschreibung";
  }

  .tour-item.next .tour-maps {
    min-height: 40px;
    padding: 0.2rem 0;
  }

  .tour-item.next .tour-maps::after {
    content: "Wegbeschreibung";
  }

  .tour-ticket-note {
    font-size: 0.76rem;
    line-height: 1.4;
    flex: 1 1 12rem;
  }

  .tour-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    gap: 0.55rem;
    margin-top: 0.35rem;
  }

  .tour-item.next .tour-actions {
    margin-top: 0;
    min-width: 0;
    width: 100%;
    gap: 0.5rem;
  }

  .tour-item.next .tour-actions .btn {
    min-height: 48px;
    padding: 0.7rem 0.95rem;
    font-size: 0.74rem;
  }

  .tour-actions .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    padding: 0.7rem 0.95rem;
    min-height: 48px;
    box-sizing: border-box;
  }

  .tour-more {
    font-size: 0.84rem;
    line-height: 1.55;
    padding: 1.15rem 0 0.25rem;
    gap: 0.55rem;
  }

  .tour-more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.35rem 0;
  }

  .tour-empty {
    padding: 1.15rem 1.05rem;
    gap: 0.85rem;
  }

  .tour-empty .btn {
    width: 100%;
    min-height: 48px;
  }

  .group-label {
    margin-top: 1.75rem;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
  }

  .group-year {
    margin: 1.1rem 0 0.25rem;
    font-size: 0.78rem;
  }

  .group-label + .group-year {
    margin-top: 0.55rem;
  }

  .tour-older {
    margin-top: 1rem;
    padding-top: 0.65rem;
  }

  .tour-older summary {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    padding: 0.25rem 0;
  }

  .section-note {
    font-size: 0.78rem;
    line-height: 1.6;
  }

  .listen-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .track-list li {
    grid-template-columns: 1.75rem 1.25rem minmax(0, 1fr) auto;
    gap: 0.4rem 0.5rem;
    padding: 0.75rem 0.4rem 0.75rem 0.5rem;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
  }

  .player-dock {
    position: sticky;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 30;
    background: var(--cream);
    padding: 0.65rem 0.35rem 0.75rem;
    margin-left: -0.15rem;
    margin-right: -0.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .player-wrap {
    position: relative;
    top: 0;
    width: min(100%, 560px);
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    max-height: min(42vh, 280px);
  }

  .player-caption,
  .playlist-yt {
    text-align: center;
  }

  .playlist-yt {
    align-self: center;
  }

  .about-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
    gap: 0.85rem;
  }

  .member-card {
    padding: 0.35rem 0.15rem;
  }

  .member-card .portrait {
    width: min(260px, 100%);
    border-width: 4px;
    margin-bottom: 0.65rem;
  }

  .member-card .name {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
  }

  .member-card .role {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }

  .member-card .more {
    display: none;
  }

  .about-lead {
    max-width: none;
  }

  .about-lead .lead {
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .about-lead p:not(.lead) {
    font-size: 0.78rem;
  }

  .about-next {
    justify-content: stretch;
  }

  .about-next .btn {
    flex: 1 1 auto;
    text-align: center;
    min-height: 44px;
  }

  .about-next-concert {
    align-items: center;
  }

  .profile {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0 1.1rem 1.5rem;
    justify-items: stretch;
  }

  .profile-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    width: 100%;
  }

  .profile .portrait {
    width: min(280px, 72vw);
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    border-width: 4px;
    flex-shrink: 0;
    margin: 0 auto;
  }

  .profile-identity h1 {
    font-size: clamp(1.2rem, 5.5vw, 1.55rem);
    letter-spacing: 0.1em;
  }

  .profile-role {
    font-size: 0.74rem;
  }

  .profile-meta .summary {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .profile-links {
    flex-direction: column;
  }

  .profile-links .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .profile .bio p {
    font-size: 0.84rem;
  }

  .profile-awards h2 {
    font-size: 0.7rem;
  }

  .profile-awards li {
    font-size: 0.82rem;
  }

  .profile-siblings {
    margin: 0 1.1rem;
    padding: 0.25rem 0 2rem;
    gap: 0.35rem;
  }

  .profile-siblings a {
    flex: 1 1 auto;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .booking-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .booking-strip .btn {
    width: 100%;
    min-height: 44px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .contact-main {
    max-width: none;
  }

  .contact-figure {
    position: static;
    max-width: none;
  }

  .contact-figure img {
    aspect-ratio: 3 / 2;
    object-position: center 35%;
  }

  .contact-actions {
    gap: 0.65rem;
  }

  .contact-action,
  .contact-address-link {
    min-height: 44px;
  }

  .galerie {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }

  .galerie-item img {
    height: 160px;
  }

  .modal-content {
    max-width: min(92vw, 640px);
    max-height: 78vh;
  }
}

@media (max-width: 600px) {
  .meta-card {
    width: 100%;
  }

  .galerie {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .galerie-item img {
    height: 140px;
  }

  .galerie-item--group img {
    max-height: 260px;
  }

  .home-hero .stack {
    font-size: clamp(2.8rem, 16vw, 4rem);
  }

  /* Stack musicians for readable names & tap targets */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 320px;
    margin-inline: auto;
  }

  .member-card {
    padding: 0.5rem 0.25rem 0.75rem;
  }

  .member-card .portrait {
    width: min(280px, 78vw);
    max-width: none;
    border-width: 4px;
    margin-bottom: 0.85rem;
  }

  .member-card .name {
    font-size: 1rem;
    letter-spacing: 0.1em;
  }

  .member-card .role {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    max-width: none;
  }

  .member-card .more {
    display: block;
    opacity: 1;
    transform: none;
    margin-top: 0.45rem;
    font-size: 0.68rem;
  }

  .about-next {
    flex-direction: column;
  }

  .about-next .btn {
    width: 100%;
  }

  .page-brand {
    font-size: clamp(1.35rem, 7vw, 1.75rem);
  }

  .page-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .page-title h1,
  .page-title h2 {
    font-size: clamp(1.25rem, 7vw, 1.65rem);
  }

  .section {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2.25rem;
  }

  .tour-item.next {
    padding: 1.05rem 0.95rem 1.1rem;
    gap: 0.75rem;
  }

  .tour-item.next .tour-date {
    font-size: clamp(1.22rem, 7vw, 1.4rem);
  }

  .tour-item.next .tour-venue {
    font-size: 1rem;
  }

  .tour-item.next .tour-actions {
    gap: 0.45rem;
  }

  .tour-actions .btn {
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    padding: 0.65rem 0.8rem;
  }

  .tour-archive {
    margin-top: 1.5rem;
    padding-top: 1.15rem;
  }

  .tour-maps {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }

  .topbar {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .topbar-brand {
    font-size: clamp(1.15rem, 5.5vw, 1.4rem);
  }

  .profile {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .profile-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
  }

  .profile .portrait {
    width: min(280px, 72vw);
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    border-width: 4px;
    margin: 0 auto;
  }

  .profile-siblings {
    margin-left: 1rem;
    margin-right: 1rem;
    flex-direction: column;
  }

  .profile-siblings a {
    width: 100%;
  }

  .track-list li {
    grid-template-columns: 1.5rem 1.1rem minmax(0, 1fr) auto;
    font-size: 0.78rem;
  }

  .track-dur {
    font-size: 0.64rem;
  }

  .player-wrap {
    max-height: min(36vh, 220px);
    width: min(100%, 420px);
  }

  .contact-lead,
  .contact-person {
    font-size: 0.88rem;
  }

  .booking-strip .pitch {
    font-size: 0.82rem;
    line-height: 1.55;
  }
}

@media (max-width: 400px) {
  .galerie {
    grid-template-columns: 1fr;
  }

  .galerie-item img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .tour-actions .btn {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }

  .about-grid {
    max-width: 100%;
  }

  .member-card .portrait {
    width: min(250px, 82vw);
  }

  .track-list li {
    font-size: 0.74rem;
    letter-spacing: 0.04em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}