/* Was wir außerdem tun: pure text at one size, three columns, a description in the empty fourth */
.ix { padding: var(--section) var(--margin); }
.ix-title { font-size: var(--step-lead); font-weight: 400; }
.ix-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 4rem; }
.ix-col:nth-child(1) { grid-column: 1 / 4; }
.ix-col:nth-child(2) { grid-column: 4 / 7; }
.ix-col:nth-child(3) { grid-column: 7 / 10; }
.ix-group { font-size: var(--step-lead); font-weight: 400; }
.ix-col ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.ix-col li { color: var(--soft); line-height: 1.45; cursor: default; transition: color var(--t-hover) ease; }
.ix-col li:hover, .ix-col li:focus-visible, .ix-col li.is-on { color: var(--ink); outline: none; }
.ix-sum { display: none; }
.ix-act { display: inline-block; margin-top: 1.5rem; font-size: var(--step-small); }
.ix-desc { grid-column: 10 / 13; grid-row: 1; margin: 0; color: var(--ink); max-width: 22ch; align-self: start; font-size: var(--step-lead); line-height: 1.25; }
@media (max-width: 52em) {
  .ix-cols { display: grid; grid-template-columns: 1fr; row-gap: 3rem; margin-top: 3rem; }
  .ix-col:nth-child(n) { grid-column: 1 / -1; }
  .ix-sum { display: block; margin-top: 1rem; color: var(--soft); }
  .ix-desc { display: none; }
}

/* Besuch: address, hours and the quiet map */
.visit { padding: 0 var(--margin) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.visit-title { grid-column: 1 / 4; }
.visit-main { grid-column: 4 / 13; }
.visit-address { font-size: var(--step-display); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; max-width: 18ch; }
.visit-now { margin-top: 1.25rem; }
.visit-link { display: inline-block; margin-top: 0.75rem; font-size: var(--step-small); }
.visit-cols { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: 4rem; }
.visit-name { font-size: var(--step-small); font-weight: 400; color: var(--soft); letter-spacing: 0; margin-bottom: 0.75rem; }
.visit-hours { border-collapse: collapse; font-size: var(--step-body); font-variant-numeric: tabular-nums; align-self: start; }
.visit-hours th, .visit-hours td { padding: 0.12rem 0; text-align: left; font-weight: 400; }
.visit-hours td { padding-left: 1.5rem; color: var(--soft); }
.visit-hours tr.is-today th, .visit-hours tr.is-today td { color: var(--accent); }
.visit-map { grid-column: 1 / 13; margin: 5rem 0 0; background: var(--tone); }
.visit-map img { width: 100%; height: auto; background: transparent; }
.visit-map figcaption { padding-top: 0.75rem; font-size: var(--step-small); color: var(--soft); background: var(--bg); max-width: none; }
.visit-map figcaption span { display: block; max-width: 60ch; }
@media (max-width: 52em) {
  .visit { display: block; }
  .visit-main { margin-top: 2rem; }
  .visit-address { font-size: 2.25rem; }
  .visit-cols { grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; }
  .visit-map { margin-top: 3rem; }
  .visit-map img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 50%; }
}

/* Footer: the last photograph is the footer, the name along its bottom */
.foot { position: relative; height: 100svh; min-height: 36rem; overflow: hidden; color: var(--bg); background: var(--dark); }
.foot-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); transform: scale(1.08); }
.foot-top { position: relative; display: flex; justify-content: space-between; padding: 2rem var(--margin) 0; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: var(--step-body); }
.foot-links--end { text-align: right; }
.foot-bottom { position: absolute; left: var(--margin); right: var(--margin); bottom: 2rem; }
.foot-mark { margin: 0; font-size: 19vw; font-weight: 300; line-height: 0.8; letter-spacing: -0.045em; max-width: none; }
.foot-legal { margin-top: 1.5rem; font-size: var(--step-small); max-width: 70ch; opacity: 0.85; }
@media (max-width: 52em) {
  .foot { height: 88svh; }
  .foot-top { flex-direction: column; gap: 1.5rem; }
  .foot-links--end { text-align: left; }
  .foot-mark { font-size: 33vw; }
}