/*
 * Papiertheater theme.
 *
 * The page is a stage built from paper sheets:
 *   Bühne      – pictures stand uncropped on a dark matte (.pt-card__stage)
 *   Bogen      – cards are stacked sheets of paper (.pt-card)
 *   Vorhang    – the red of the logo is the only accent, its two curtains frame the home page (.pt-curtain)
 *   Schnittkante – a scalloped cut edge under the home stage and above the footer
 *   Regal      – printed issues stand as covers on a shelf (.pt-shelf)
 *   Billett    – an issue of the web magazine is a ticket with its number on the stub (.pt-issue)
 *
 * Loaded after the Bootstrap Package theme, which provides grid, reset and content elements.
 */

:root {
  --pt-paper: #faf6ee;
  --pt-paper-deep: #efe7d6;
  --pt-sheet: #fff;
  --pt-ink: #1d1b1a;
  --pt-ink-soft: #5d574f;
  --pt-line: rgba(29, 27, 26, 0.16);
  --pt-red: #cc2128;
  --pt-red-deep: #a3171d;
  --pt-night: #16263f;
  --pt-night-deep: #0e1a2d;
  --pt-night-light: #27406a;
  --pt-gold: #e0a93b;

  --pt-font-display: "Fraunces Variable", "Iowan Old Style", Palatino, Georgia, serif;
  --pt-font-text: "Figtree Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --pt-radius: 3px;
  --pt-header-height: 5rem;
  --pt-measure: 44rem;
  --pt-scallop: 12px;
}

/* ---------- Base ---------- */

html {
  scroll-padding-top: calc(var(--pt-header-height) + 1rem);
}

body,
.pt-site {
  background: var(--pt-paper);
  color: var(--pt-ink);
}

body {
  font-family: var(--pt-font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: var(--pt-font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: inherit;
}

a {
  color: var(--pt-red-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--pt-red);
}

:focus-visible {
  outline: 3px solid var(--pt-gold);
  outline-offset: 2px;
}

::selection {
  background: var(--pt-red);
  color: #fff;
}

/* ---------- Header ---------- */

.pt-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--pt-paper);
  border-bottom: 1px solid var(--pt-line);
}

.pt-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--pt-header-height);
}

.pt-brand {
  display: block;
  flex: none;
  font-family: var(--pt-font-display);
  font-size: 1.4rem;
  color: var(--pt-ink);
  text-decoration: none;
}

.pt-brand img {
  display: block;
  width: auto;
  height: 3.375rem;
}

.pt-nav__list {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--pt-header-height);
}

.pt-nav__link {
  position: relative;
  display: block;
  padding: 0.55rem 0.85rem;
  font-weight: 600;
  color: var(--pt-ink);
  text-decoration: none;
}

.pt-nav__link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.3rem;
  height: 2px;
  background: var(--pt-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.pt-nav__link:hover,
.pt-nav__link.is-active {
  color: var(--pt-ink);
}

.pt-nav__link:hover::after,
.pt-nav__link.is-active::after {
  transform: scaleX(1);
}

.pt-nav__toggle {
  width: 1.5rem;
  height: 1.75rem;
  margin-left: -0.6rem;
  padding: 0;
  border: 0;
  border-radius: var(--pt-radius);
  background: none;
  color: var(--pt-ink-soft);
  cursor: pointer;
}

.pt-nav__toggle::before {
  content: "";
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  margin: -0.2rem auto 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.pt-nav__sub {
  position: absolute;
  top: calc(100% - 0.5rem);
  left: 0;
  z-index: 5;
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--pt-sheet);
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  box-shadow: 5px 5px 0 0 var(--pt-paper-deep), 6px 6px 0 0 var(--pt-line), 0 18px 40px rgba(29, 27, 26, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.pt-nav__item:last-child .pt-nav__sub {
  left: auto;
  right: 0;
}

.pt-nav__item:hover > .pt-nav__sub,
.pt-nav__item:focus-within > .pt-nav__sub,
.pt-nav__item.is-open > .pt-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.pt-nav__item:hover > .pt-nav__toggle::before,
.pt-nav__item.is-open > .pt-nav__toggle::before {
  transform: rotate(225deg) translate(-0.15rem, -0.15rem);
}

.pt-nav__sublink {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: 2px;
  color: var(--pt-ink);
  text-decoration: none;
}

.pt-nav__sublink:hover,
.pt-nav__sublink:focus-visible {
  background: var(--pt-paper);
  color: var(--pt-red-deep);
}

.pt-nav__sublink.is-active {
  color: var(--pt-red-deep);
  font-weight: 700;
}

.pt-menu-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  background: var(--pt-sheet);
  color: var(--pt-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.pt-menu-toggle__bars,
.pt-menu-toggle__bars::before,
.pt-menu-toggle__bars::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, background 0.2s ease;
}

.pt-menu-toggle__bars {
  position: relative;
}

.pt-menu-toggle__bars::before,
.pt-menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.pt-menu-toggle__bars::before {
  top: -0.35rem;
}

.pt-menu-toggle__bars::after {
  top: 0.35rem;
}

.is-menu-open .pt-menu-toggle__bars {
  background: transparent;
}

.is-menu-open .pt-menu-toggle__bars::before {
  transform: translateY(0.35rem) rotate(45deg);
}

.is-menu-open .pt-menu-toggle__bars::after {
  transform: translateY(-0.35rem) rotate(-45deg);
}

@media (max-width: 991.98px) {
  :root {
    --pt-header-height: 4.25rem;
  }

  .pt-brand img {
    height: 2.75rem;
  }

  .pt-menu-toggle {
    display: inline-flex;
  }

  /* The whole menu on one sheet: every section with its entries, nothing to unfold. */
  .pt-nav {
    position: fixed;
    inset: var(--pt-header-height) 0 0 0;
    z-index: 1029;
    padding: 0.5rem 1.25rem 3rem;
    overflow-y: auto;
    background: var(--pt-paper);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  .is-menu-open .pt-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .pt-nav__list {
    flex-direction: column;
    gap: 0;
    max-width: 40rem;
    margin: 0 auto;
  }

  .pt-nav__item {
    display: block;
    height: auto;
    padding: 1.1rem 0 1.2rem;
    border-bottom: 1px solid var(--pt-line);
  }

  .pt-nav__link {
    display: inline-block;
    padding: 0;
    font-family: var(--pt-font-display);
    font-size: 1.6rem;
    font-weight: 500;
  }

  .pt-nav__link::after {
    left: 0;
    right: 0;
    bottom: -0.15rem;
  }

  .pt-nav__toggle {
    display: none;
  }

  .pt-nav__sub,
  .pt-nav__item:last-child .pt-nav__sub {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0 1rem;
    min-width: 0;
    padding: 0.5rem 0 0;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: inherit;
    transform: none;
    transition: none;
  }

  .pt-nav__sublink {
    padding: 0.4rem 0;
  }
}

/* ---------- Page ---------- */

.bp-page-content {
  padding-top: 1.5rem;
  min-height: 50vh;
}

/* The Bootstrap Package hides the overflow here. "clip" does the same without becoming
   the scroll frame of the page index, which has to stick to the window. */
.pt-site .section {
  overflow: clip;
}

.frame-header .element-header {
  margin-bottom: 1.5rem;
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  font-weight: 450;
}

.pt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pt-ink-soft);
}

.pt-meta__category {
  font-weight: 700;
  color: var(--pt-red-deep);
}

.pt-meta__category::before {
  content: "·";
  margin-right: 0.6rem;
  font-weight: 500;
  color: var(--pt-ink-soft);
}

/* ---------- Article lists ---------- */

.pt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 2.25rem 1.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Bogen: a sheet of paper with a second one underneath. */
.pt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--pt-sheet);
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  box-shadow: 5px 5px 0 0 var(--pt-paper-deep), 6px 6px 0 0 var(--pt-line);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pt-card:hover,
.pt-card:focus-within {
  transform: translate(-2px, -3px) rotate(-0.25deg);
  box-shadow: 8px 9px 0 0 var(--pt-paper-deep), 9px 10px 0 0 var(--pt-line);
}

/* Bühne: the picture is shown whole, a poster as well as a wide photo. */
.pt-card__stage {
  position: relative;
  flex: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px 2px 0 0;
  background: radial-gradient(120% 90% at 50% 0%, var(--pt-night-light) 0%, var(--pt-night) 55%, var(--pt-night-deep) 100%);
}

.pt-card__stage img {
  position: absolute;
  inset: 0.9rem;
  width: calc(100% - 1.8rem);
  height: calc(100% - 1.8rem);
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}

/* No picture: the empty stage with the two curtains of the logo. */
.pt-card--blank .pt-card__stage::before,
.pt-card--blank .pt-card__stage::after {
  content: "";
  position: absolute;
  top: 0;
  opacity: 0.9;
}

.pt-card--blank .pt-card__stage::before {
  left: 0;
  width: 22%;
  height: 62%;
  background: url("../Images/curtain-left.svg") 0 0 / 100% 100% no-repeat;
}

.pt-card--blank .pt-card__stage::after {
  right: 0;
  width: 24%;
  height: 100%;
  background: url("../Images/curtain-right.svg") 0 0 / 100% 100% no-repeat;
}

.pt-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem 1.35rem;
}

.pt-card__title {
  margin: 0;
  font-family: var(--pt-font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 1.3rem;
  line-height: 1.22;
  overflow-wrap: break-word;
  hyphens: auto;
}

.pt-card__link {
  color: inherit;
  text-decoration: none;
}

/* The whole sheet is the link. */
.pt-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pt-card__link:focus-visible {
  outline: none;
}

.pt-card:focus-within {
  outline: 3px solid var(--pt-gold);
  outline-offset: 3px;
}

.pt-card:hover .pt-card__link {
  color: var(--pt-red-deep);
}

.pt-card__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--pt-ink-soft);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.pt-card__more {
  align-self: flex-start;
  margin-top: 0.6rem;
  padding: 0.5rem 1rem;
  border-radius: var(--pt-radius);
  background: var(--pt-red);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}

.pt-curtain {
  display: none;
}

/* The first article of a page is the large sheet. */
.pt-card--lead {
  grid-column: 1 / -1;
  flex-direction: row;
}

.pt-card--lead .pt-card__stage {
  flex: 0 0 52%;
  aspect-ratio: auto;
  min-height: 22rem;
  border-radius: 2px 0 0 2px;
}

.pt-card--lead .pt-card__body {
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 2.25rem;
}

.pt-card--lead .pt-card__title {
  font-size: clamp(1.6rem, 2.7vw, 2.25rem);
  line-height: 1.15;
}

.pt-card--lead .pt-card__excerpt {
  font-size: 1.05rem;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

/* Layout "lead" (home page): the newest article on stage, between the curtains of the logo. */
.pt-list--lead .pt-card--lead {
  align-items: center;
  gap: 3rem;
  margin-bottom: 0.75rem;
  padding: 3.25rem 11rem calc(3.5rem + var(--pt-scallop));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: radial-gradient(120% 90% at 50% 0%, var(--pt-night-light) 0%, var(--pt-night) 50%, var(--pt-night-deep) 100%);
  box-shadow: none;
  color: var(--pt-paper);
  transform: none;
  /* Schnittkante: the lower edge is cut in scallops. */
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--pt-scallop)) no-repeat,
    radial-gradient(circle at 50% 0, #000 calc(var(--pt-scallop) - 0.5px), transparent var(--pt-scallop)) bottom left / calc(var(--pt-scallop) * 2) var(--pt-scallop) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--pt-scallop)) no-repeat,
    radial-gradient(circle at 50% 0, #000 calc(var(--pt-scallop) - 0.5px), transparent var(--pt-scallop)) bottom left / calc(var(--pt-scallop) * 2) var(--pt-scallop) repeat-x;
}

.pt-list--lead .pt-card--lead:focus-within {
  outline-offset: -6px;
}

.pt-list--lead .pt-card--lead .pt-card__stage {
  display: flex;
  flex: 0 1 46%;
  justify-content: center;
  min-height: 0;
  overflow: visible;
  background: none;
}

/* The picture as a printed sheet, pinned slightly askew. */
.pt-list--lead .pt-card--lead .pt-card__stage img {
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 27rem;
  padding: 7px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  filter: none;
  transform: rotate(-1.2deg);
}

.pt-list--lead .pt-card--lead .pt-card__body {
  flex: 1 1 54%;
  padding: 0;
}

.pt-list--lead .pt-card--lead .pt-card__title {
  font-size: clamp(1.8rem, 3.1vw, 2.75rem);
  line-height: 1.1;
}

.pt-list--lead .pt-card--lead .pt-meta {
  color: rgba(250, 246, 238, 0.75);
}

.pt-list--lead .pt-card--lead .pt-meta__category,
.pt-list--lead .pt-card--lead:hover .pt-card__link {
  color: var(--pt-gold);
}

.pt-list--lead .pt-card--lead .pt-meta__category::before {
  color: rgba(250, 246, 238, 0.75);
}

.pt-list--lead .pt-card--lead .pt-card__excerpt {
  color: rgba(250, 246, 238, 0.85);
}

.pt-list--lead .pt-curtain {
  position: absolute;
  /* The curtains of the logo are cut slanted at the top. Here they hang from the upper edge. */
  top: -1.1rem;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.pt-list--lead .pt-curtain--left {
  left: 0;
  width: 8.5rem;
  height: 66%;
  background: url("../Images/curtain-left.svg") 0 0 / 100% 100% no-repeat;
  transform-origin: left top;
}

.pt-list--lead .pt-curtain--right {
  right: 0;
  width: 9.5rem;
  height: calc(100% - var(--pt-scallop) + 1.1rem);
  background: url("../Images/curtain-right.svg") 0 0 / 100% 100% no-repeat;
  transform-origin: right top;
}

@media (prefers-reduced-motion: no-preference) {
  .pt-list--lead .pt-curtain {
    animation: pt-curtain-open 1.3s cubic-bezier(0.3, 0.7, 0.2, 1) 0.15s both;
  }

  @keyframes pt-curtain-open {
    from {
      transform: scaleX(7);
    }

    to {
      transform: scaleX(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-card,
  .pt-nav__sub,
  .pt-nav,
  .pt-nav__link::after {
    transition: none;
  }

  .pt-card:hover,
  .pt-card:focus-within {
    transform: none;
  }
}

@media (max-width: 1199.98px) {
  .pt-list--lead .pt-card--lead {
    gap: 2.25rem;
    padding-inline: 8.5rem;
  }

  .pt-list--lead .pt-curtain--left {
    width: 6.5rem;
  }

  .pt-list--lead .pt-curtain--right {
    width: 7.25rem;
  }
}

@media (max-width: 991.98px) {
  .pt-card--lead {
    flex-direction: column;
  }

  .pt-card--lead .pt-card__stage {
    flex: none;
    aspect-ratio: 16 / 10;
    min-height: 0;
    border-radius: 2px 2px 0 0;
  }

  .pt-card--lead .pt-card__body {
    padding: 1.5rem 1.5rem 1.75rem;
  }

  .pt-list--lead .pt-card--lead {
    align-items: stretch;
    gap: 1.75rem;
    padding: 2.5rem 6.5rem calc(2.75rem + var(--pt-scallop));
  }

  .pt-list--lead .pt-card--lead .pt-card__stage {
    flex: none;
    aspect-ratio: auto;
  }

  .pt-list--lead .pt-card--lead .pt-card__stage img {
    max-height: 22rem;
  }

  .pt-list--lead .pt-curtain--left {
    width: 5rem;
    height: 16rem;
  }

  .pt-list--lead .pt-curtain--right {
    width: 5.5rem;
  }
}

@media (max-width: 575.98px) {
  .pt-cards {
    gap: 1.75rem;
  }

  /* On a phone the curtains only frame the picture, the text below uses the full width. */
  .pt-list--lead .pt-card--lead {
    margin-inline: -0.5rem;
    padding: 2rem 1.25rem calc(2.25rem + var(--pt-scallop));
  }

  .pt-list--lead .pt-card--lead .pt-card__stage {
    padding-inline: 2.75rem;
  }

  .pt-list--lead .pt-card--lead .pt-card__stage img {
    max-height: 17rem;
  }

  .pt-list--lead .pt-curtain--left {
    width: 3rem;
    height: 7rem;
  }

  .pt-list--lead .pt-curtain--right {
    width: 3.25rem;
    height: 11rem;
  }
}

/* ---------- Pagination ---------- */

.pt-pagination {
  margin-top: 3rem;
}

.pt-pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-pagination__page,
.pt-pagination__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.8rem;
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  background: var(--pt-sheet);
  color: var(--pt-ink);
  font-weight: 600;
  text-decoration: none;
}

a.pt-pagination__page:hover,
a.pt-pagination__step:hover {
  border-color: var(--pt-red);
  color: var(--pt-red-deep);
}

.pt-pagination__page.is-current {
  border-color: var(--pt-ink);
  background: var(--pt-ink);
  color: var(--pt-paper);
}

.pt-pagination__gap {
  color: var(--pt-ink-soft);
}

/* ---------- Article and text pages ---------- */

.news-single,
.frame-type-text .frame-inner {
  max-width: var(--pt-measure);
}

.news-single {
  margin-inline: auto;
}

.pt-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pt-ink-soft);
  text-decoration: none;
}

.pt-back:hover {
  color: var(--pt-red-deep);
}

.pt-article__header {
  margin-bottom: 2.25rem;
}

.pt-article__header .pt-meta {
  margin-top: 1.75rem;
}

.pt-article__title {
  margin: 0.6rem 0 0;
  text-wrap: balance;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 450;
  line-height: 1.1;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* A large title is not hyphenated where there is room to wrap it. */
@media (min-width: 576px) {
  .pt-article__title {
    hyphens: manual;
  }
}

.pt-article__header::after {
  content: "";
  display: block;
  width: 4rem;
  height: 3px;
  margin-top: 1.75rem;
  background: var(--pt-red);
}

.pt-article__footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pt-line);
}

.pt-prose,
.frame-type-text .frame-inner {
  font-size: 1.125rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}

:is(.pt-prose, .frame-type-text .frame-inner) p,
:is(.pt-prose, .frame-type-text .frame-inner) ul,
:is(.pt-prose, .frame-type-text .frame-inner) ol {
  margin: 0 0 1.15em;
}

/* An empty paragraph with an id is the target of a link, such as the start of a page of an issue. */
:is(.pt-prose, .frame-type-text .frame-inner) p:empty:not([id]) {
  display: none;
}

:is(.pt-prose, .frame-type-text .frame-inner) :is(h2, h3, h4) {
  margin: 2em 0 0.6em;
}

:is(.pt-prose, .frame-type-text .frame-inner) > :first-child {
  margin-top: 0;
}

:is(.pt-prose, .frame-type-text .frame-inner) h2 {
  font-size: 1.75rem;
}

:is(.pt-prose, .frame-type-text .frame-inner) h3 {
  font-size: 1.4rem;
}

:is(.pt-prose, .frame-type-text .frame-inner) h4 {
  font-size: 1.15rem;
  font-family: var(--pt-font-text);
  font-weight: 700;
  letter-spacing: 0;
}

:is(.pt-prose, .frame-type-text .frame-inner) img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

/* Spacer pictures of the old pages. */
:is(.pt-prose, .frame-type-text .frame-inner) img[height="1"] {
  display: none;
}

:is(.pt-prose, .frame-type-text .frame-inner) hr {
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--pt-line);
  opacity: 1;
}

:is(.pt-prose, .frame-type-text .frame-inner) blockquote {
  margin: 2em 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--pt-red);
  font-family: var(--pt-font-display);
  font-size: 1.3rem;
  line-height: 1.45;
}

:is(.pt-prose, .frame-type-text .frame-inner) table {
  width: 100%;
  margin: 0 0 1.5em;
  border-collapse: collapse;
  font-size: 1rem;
}

:is(.pt-prose, .frame-type-text .frame-inner) :is(td, th) {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--pt-line);
  vertical-align: top;
}

/* ---------- Page head, text pages ---------- */

.pt-pagehead:not(.pt-pagehead--wide),
.pt-view-page .frame-inner {
  max-width: var(--pt-measure);
  margin-inline: auto;
}

/* The head is a .container: it keeps the gutter of the text below it. */
.pt-pagehead.container:not(.pt-pagehead--wide) {
  max-width: calc(var(--pt-measure) + var(--bs-gutter-x, 1.5rem));
}

.pt-pagehead {
  margin-bottom: 1.25rem;
}

.pt-pagehead .pt-back {
  margin-bottom: 1.5rem;
}

.pt-pagehead__title {
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  font-weight: 450;
}

.pt-pagehead::after {
  content: "";
  display: block;
  width: 4rem;
  height: 3px;
  margin-top: 1.5rem;
  background: var(--pt-red);
}

/* A sub page of a section page (Erleben › Museen) carries the filter bar of that page.
   Its head is as wide as the head of the lists, so the bar does not move between them;
   the text starts at the same edge. */
.pt-pagehead--wide {
  margin-bottom: 0;
}

.pt-pagehead--wide::after {
  content: none;
}

.pt-pagehead--wide .pt-pagehead__title {
  margin-bottom: 1.5rem;
}

.pt-pagehead--wide .pt-chips {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.pt-has-filter.pt-view-page .frame-inner {
  margin-inline: 0;
}

/* Sub pages of a page: a row of sheets. */
.frame-type-menu_subpages ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ".frame" in the selectors: the Bootstrap Package colours links without a class inside a frame. */
.frame.frame-type-menu_subpages a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 100%;
  padding: 1rem 1.15rem;
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  background: var(--pt-sheet);
  box-shadow: 4px 4px 0 0 var(--pt-paper-deep), 5px 5px 0 0 var(--pt-line);
  color: var(--pt-ink);
  font-family: var(--pt-font-display);
  font-size: 1.2rem;
  line-height: 1.25;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.frame.frame-type-menu_subpages a::after {
  content: "→";
  color: var(--pt-red);
  font-family: var(--pt-font-text);
}

.frame.frame-type-menu_subpages a:hover {
  color: var(--pt-red-deep);
  transform: translate(-1px, -2px);
  box-shadow: 6px 7px 0 0 var(--pt-paper-deep), 7px 8px 0 0 var(--pt-line);
}

/* ---------- Home page: introduction ---------- */

.pt-intro {
  padding: 0 0 0.5rem;
}

.pt-intro .frame-type-text {
  text-align: center;
}

.pt-intro .frame-type-text .frame-inner {
  max-width: 47rem;
  margin-inline: auto;
  font-size: 1.2rem;
  line-height: 1.6;
}

.pt-intro .frame-type-text .frame-header .element-header {
  margin-bottom: 1.1rem;
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  font-weight: 450;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pt-intro .frame-type-text .frame-inner p {
  color: var(--pt-ink-soft);
  text-wrap: pretty;
}

.pt-intro .frame-type-text .frame-inner p:last-child {
  margin-bottom: 0;
}

/* Below the introduction "Aktuelles" is a heading among others. */
.pt-home.pt-first-page .frame-type-news_pi1 > * .frame-header .element-header,
.pt-band__head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 500;
}

.pt-home.pt-first-page .frame-type-news_pi1 .frame-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.pt-home.pt-first-page .frame-type-news_pi1 .frame-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pt-line);
}

/* ---------- Category bar ---------- */

.pt-chips {
  margin: -0.25rem 0 2.25rem;
}

.pt-chips ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  background: var(--pt-sheet);
  color: var(--pt-ink);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.pt-chip:hover {
  border-color: var(--pt-red);
  color: var(--pt-red-deep);
}

.pt-chip__count {
  font-size: 0.8rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--pt-ink-soft);
}

.pt-chip.is-active {
  border-color: var(--pt-ink);
  background: var(--pt-ink);
  color: var(--pt-paper);
}

.pt-chip.is-active .pt-chip__count {
  color: rgba(250, 246, 238, 0.75);
}

.pt-list__empty {
  color: var(--pt-ink-soft);
}

/* ---------- Video mark ---------- */

.pt-card__play,
.pt-video__play::before {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--pt-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 62% no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.pt-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

/* ---------- Shelf: the printed issues ---------- */

.pt-shelf {
  --pt-shelf-gap: 1.75rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2.75rem var(--pt-shelf-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-shelf--list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pt-shelf__item {
  min-width: 0;
}

.pt-shelf__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--pt-ink);
  text-decoration: none;
}

/* The covers stand on a board that runs through the row. */
.pt-shelf__cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 5 / 7;
  margin-bottom: 9px;
}

.pt-shelf__cover::after {
  content: "";
  position: absolute;
  left: calc(var(--pt-shelf-gap) / -2);
  right: calc(var(--pt-shelf-gap) / -2);
  top: 100%;
  height: 9px;
  border-top: 1px solid var(--pt-line);
  background: var(--pt-paper-deep);
  box-shadow: 0 5px 6px -4px rgba(29, 27, 26, 0.35);
}

.pt-shelf__cover img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--pt-line);
  background: #fff;
  box-shadow: 3px 0 0 -1px var(--pt-paper-deep), 4px 0 0 -1px var(--pt-line), 0 -6px 18px rgba(29, 27, 26, 0.14);
  transform-origin: 50% 100%;
  transition: transform 0.18s ease;
}

.pt-shelf__cover--blank::before {
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid var(--pt-line);
  background: var(--pt-sheet) url("../Images/forum-papiertheater.svg") center / 60% no-repeat;
}

.pt-shelf__link:hover img,
.pt-shelf__link:focus-visible img {
  transform: translateY(-5px) rotate(-1.2deg);
}

.pt-shelf__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.95rem;
}

.pt-shelf__date {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pt-ink-soft);
}

.pt-shelf__title {
  font-family: var(--pt-font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
}

.pt-shelf__link:hover .pt-shelf__title {
  color: var(--pt-red-deep);
}

/* ---------- Issues of the web magazine ---------- */

.pt-issues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1200px) {
  .pt-issues {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

/* Two complete lists on one page (Publikationen, below them the Webzeitung):
   the second one starts a section of its own. The Bootstrap Package would pull it up. */
.pt-site .frame-type-news_pi1 + .frame-type-news_pi1 {
  margin-top: 0;
}

.pt-issue__link {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 100%;
  padding: 0.9rem 1.25rem 0.9rem 0;
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  background: var(--pt-sheet);
  box-shadow: 4px 4px 0 0 var(--pt-paper-deep), 5px 5px 0 0 var(--pt-line);
  color: var(--pt-ink);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pt-issue__link:hover {
  transform: translate(-1px, -2px);
  box-shadow: 6px 7px 0 0 var(--pt-paper-deep), 7px 8px 0 0 var(--pt-line);
}

/* The number is the stub of a ticket. */
.pt-issue__number {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 5.25rem;
  border-right: 2px dotted var(--pt-line);
  font-family: var(--pt-font-display);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--pt-red-deep);
}

.pt-issue__nr {
  margin-bottom: 0.2rem;
  font-family: var(--pt-font-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pt-ink-soft);
}

.pt-issue__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.pt-issue__date {
  font-family: var(--pt-font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
}

.pt-issue__name {
  font-size: 0.9rem;
  color: var(--pt-ink-soft);
}

.pt-issue__arrow {
  color: var(--pt-red);
}

.pt-issue__link:hover .pt-issue__date {
  color: var(--pt-red-deep);
}

/* ---------- Home page: bands below the list ---------- */

.pt-band {
  padding: 3.75rem 0 0;
}

.pt-band__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.75rem;
}

.pt-more {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pt-more:hover {
  text-decoration: underline;
}

/* Galleries: slides in the dark, between two cut edges. */
.pt-band--pictures {
  position: relative;
  margin-top: calc(4rem + var(--pt-scallop));
  padding: 3.25rem 0 calc(3.5rem + var(--pt-scallop));
  background: var(--pt-night);
  color: var(--pt-paper);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--pt-scallop)) no-repeat,
    radial-gradient(circle at 50% 0, #000 calc(var(--pt-scallop) - 0.5px), transparent var(--pt-scallop)) bottom left / calc(var(--pt-scallop) * 2) var(--pt-scallop) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--pt-scallop)) no-repeat,
    radial-gradient(circle at 50% 0, #000 calc(var(--pt-scallop) - 0.5px), transparent var(--pt-scallop)) bottom left / calc(var(--pt-scallop) * 2) var(--pt-scallop) repeat-x;
}

.pt-band--pictures .pt-more {
  color: var(--pt-gold);
}

.pt-pictures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-picture__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pt-picture__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 0.6rem;
  background: var(--pt-night-deep);
  border: 1px solid rgba(250, 246, 238, 0.14);
  border-radius: var(--pt-radius);
}

.pt-picture__frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease;
}

.pt-picture__link:hover img {
  transform: scale(1.03);
}

.pt-picture__title {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--pt-font-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
}

.pt-picture__link:hover .pt-picture__title {
  color: var(--pt-gold);
}

/* Museum and Verein: two doors. */
.pt-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.9rem;
}

.pt-door {
  position: relative;
  padding: 2rem 2.25rem 2.1rem;
  border: 1px solid var(--pt-line);
  border-top: 4px solid var(--pt-red);
  border-radius: var(--pt-radius);
  background: var(--pt-sheet);
  box-shadow: 5px 5px 0 0 var(--pt-paper-deep), 6px 6px 0 0 var(--pt-line);
}

.pt-door__title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
}

.pt-door__title a {
  color: inherit;
  text-decoration: none;
}

.pt-door__title a::after {
  content: " →";
  color: var(--pt-red);
  font-family: var(--pt-font-text);
  font-size: 0.75em;
}

.pt-door__title a:hover {
  color: var(--pt-red-deep);
}

.pt-door__text {
  margin: 0 0 1.25rem;
  color: var(--pt-ink-soft);
}

.pt-door__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--pt-line);
  list-style: none;
  font-weight: 600;
}

.pt-door__list a {
  text-decoration: none;
}

.pt-door__list a:hover {
  text-decoration: underline;
}

/* ---------- Article: issue with page index ---------- */

.pt-pageindex {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.4rem 1.35rem;
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  background: var(--pt-sheet);
  box-shadow: 4px 4px 0 0 var(--pt-paper-deep), 5px 5px 0 0 var(--pt-line);
}

.pt-pageindex__title {
  margin: 0 0 0.75rem;
  font-family: var(--pt-font-text);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pt-ink-soft);
}

.pt-pageindex ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-pageindex li + li {
  border-top: 1px solid var(--pt-line);
}

.pt-pageindex__link {
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0 0.55rem 0.8rem;
  border-left: 3px solid transparent;
  color: var(--pt-ink);
  line-height: 1.3;
  text-decoration: none;
}

.pt-pageindex__link:hover .pt-pageindex__name,
.pt-pageindex__link:hover .pt-pageindex__number:only-child {
  color: var(--pt-red-deep);
}

.pt-pageindex__link.is-current {
  border-left-color: var(--pt-red);
}

.pt-pageindex__number {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pt-ink-soft);
}

.pt-pageindex__name {
  font-family: var(--pt-font-display);
  font-size: 1rem;
}

/* The start of a page of the issue: a cut through the sheet. */
:is(.pt-prose, .frame-type-text .frame-inner) .pt-pagebreak {
  margin: 4rem 0 2.25rem;
  padding-top: 1.1rem;
  border-top: 2px dotted var(--pt-line);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pt-ink-soft);
}

/* Its running head is not shown: only the cut remains. */
:is(.pt-prose, .frame-type-text .frame-inner) .pt-pagebreak:empty {
  margin-bottom: 2.5rem;
  padding: 0;
}

.pt-prose [id] {
  scroll-margin-top: calc(var(--pt-header-height) + 1rem);
}

.pt-prose [tabindex="-1"]:focus {
  outline: none;
}

@media (min-width: 1200px) {
  .news-single:has(.pt-article--paged) {
    max-width: calc(var(--pt-measure) + 21rem);
  }

  .pt-article--paged {
    display: grid;
    grid-template-columns: minmax(0, var(--pt-measure)) 17rem;
    column-gap: 4rem;
  }

  .pt-article--paged > * {
    grid-column: 1;
  }

  .pt-article--paged > .pt-pageindex {
    position: sticky;
    top: calc(var(--pt-header-height) + 1.5rem);
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    max-height: calc(100vh - var(--pt-header-height) - 3rem);
    margin: 0;
    overflow-y: auto;
  }
}

/* ---------- Article: cover, downloads, video, gallery ---------- */

.pt-cover {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin: 0 0 2.25rem;
}

.pt-cover__sheet {
  flex: 0 1 19rem;
  min-width: 0;
}

.pt-prose .pt-cover__sheet img {
  display: block;
  width: 100%;
  border: 1px solid var(--pt-line);
  border-radius: 0;
  background: #fff;
  box-shadow: 4px 4px 0 0 var(--pt-paper-deep), 5px 5px 0 0 var(--pt-line), 0 16px 34px rgba(29, 27, 26, 0.18);
  transform: rotate(-1deg);
  transition: transform 0.18s ease;
}

.pt-cover__sheet:hover img {
  transform: rotate(0deg) translateY(-3px);
}

.pt-cover figcaption {
  flex: 1 1 12rem;
}

.pt-download {
  font-weight: 600;
}

.pt-download__meta {
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--pt-ink-soft);
}

.pt-download--button {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.75rem;
  padding: 0.7rem 1.15rem;
  border-radius: var(--pt-radius);
  background: var(--pt-red);
  color: #fff;
  font-family: var(--pt-font-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-decoration: none;
}

.pt-download--button::before {
  content: "↓";
  font-weight: 500;
}

.pt-download--button:hover {
  background: var(--pt-red-deep);
  color: #fff;
}

.pt-download--button .pt-download__meta {
  color: rgba(255, 255, 255, 0.9);
}

.pt-video {
  margin: 0 0 2rem;
}

.pt-video__link,
.pt-video__frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--pt-radius);
  background: radial-gradient(120% 90% at 50% 0%, var(--pt-night-light) 0%, var(--pt-night) 55%, var(--pt-night-deep) 100%);
}

.pt-prose .pt-video__link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* No picture of the video: the empty stage with the curtains. */
.pt-video--blank .pt-video__link::before,
.pt-video--blank .pt-video__link::after {
  content: "";
  position: absolute;
  top: 0;
}

.pt-video--blank .pt-video__link::before {
  left: 0;
  width: 17%;
  height: 62%;
  background: url("../Images/curtain-left.svg") 0 0 / 100% 100% no-repeat;
}

.pt-video--blank .pt-video__link::after {
  right: 0;
  width: 19%;
  height: 100%;
  background: url("../Images/curtain-right.svg") 0 0 / 100% 100% no-repeat;
}

.pt-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 1.25rem 0.45rem 0.45rem;
  border-radius: 2.5rem;
  background: rgba(14, 26, 45, 0.82);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.pt-video__play::before {
  content: "";
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  box-shadow: none;
}

.pt-video__link:hover .pt-video__play {
  background: var(--pt-night-deep);
}

.pt-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pt-video__note,
.pt-gallery figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--pt-ink-soft);
}

.pt-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1.25rem 1rem;
  margin: 0 0 2rem;
}

.pt-gallery__item {
  margin: 0;
  min-width: 0;
}

/* Bühne, as in the lists: every picture whole on the dark matte. */
.pt-gallery__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 0.5rem;
  border-radius: var(--pt-radius);
  background: var(--pt-night);
  cursor: zoom-in;
}

.pt-prose .pt-gallery__item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  transition: transform 0.18s ease;
}

.pt-gallery__item a:hover img {
  transform: scale(1.03);
}

.pt-prose a.lightbox {
  cursor: zoom-in;
}

.pt-scroll {
  margin: 0 0 1.5em;
  overflow-x: auto;
}

.pt-scroll table {
  margin: 0;
}

/* ---------- Smaller screens: lists, bands, article ---------- */

@media (max-width: 991.98px) {
  .pt-shelf,
  .pt-shelf--list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pt-pictures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .pt-issues,
  .pt-doors {
    grid-template-columns: minmax(0, 1fr);
  }

  .pt-door {
    padding: 1.6rem 1.5rem 1.7rem;
  }
}

@media (max-width: 575.98px) {
  .pt-shelf,
  .pt-shelf--list {
    --pt-shelf-gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pt-pictures {
    gap: 1.25rem;
  }

  .pt-picture__title {
    font-size: 1rem;
  }

  .pt-intro .frame-type-text .frame-inner {
    font-size: 1.1rem;
  }

  .pt-cover {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .pt-cover__sheet {
    flex: none;
    width: min(100%, 17rem);
  }

  .pt-cover figcaption {
    flex: none;
  }

  .pt-issue__number {
    width: 4.25rem;
    font-size: 1.8rem;
  }

  .pt-video__play {
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-shelf__cover img,
  .pt-issue__link,
  .pt-picture__frame img,
  .pt-gallery__item img,
  .pt-cover__sheet img,
  .frame-type-menu_subpages a {
    transition: none;
  }

  .pt-shelf__link:hover img,
  .pt-issue__link:hover,
  .pt-picture__link:hover img,
  .pt-gallery__item a:hover img,
  .frame-type-menu_subpages a:hover {
    transform: none;
  }
}

/* ---------- Footer ---------- */

.pt-footer {
  position: relative;
  margin-top: calc(5rem + var(--pt-scallop));
  padding: 3.25rem 0 1.75rem;
  background: var(--pt-night);
  color: rgba(250, 246, 238, 0.85);
}

/* Schnittkante */
.pt-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--pt-scallop);
  background: radial-gradient(circle at 50% 100%, var(--pt-night) calc(var(--pt-scallop) - 0.5px), transparent var(--pt-scallop)) 0 0 / calc(var(--pt-scallop) * 2) var(--pt-scallop) repeat-x;
}

.pt-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.pt-footer__brand img {
  display: block;
  width: 10.375rem;
  height: auto;
}

.pt-footer__brand a {
  display: inline-block;
  color: var(--pt-paper);
  font-family: var(--pt-font-display);
  font-size: 1.4rem;
  text-decoration: none;
}

.pt-footer__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-footer__nav li + li {
  margin-top: 0.5rem;
}

.pt-footer__nav a {
  color: var(--pt-paper);
  text-decoration: none;
}

.pt-footer__nav a:hover,
.pt-footer__nav a[aria-current="page"] {
  color: var(--pt-gold);
}

.pt-footer__nav:not(.pt-footer__nav--legal) a {
  font-family: var(--pt-font-display);
  font-size: 1.2rem;
}

.pt-footer__base {
  margin-top: 2.75rem;
  font-size: 0.9rem;
  color: rgba(250, 246, 238, 0.7);
}

.pt-footer__base p {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(250, 246, 238, 0.18);
}

@media (max-width: 767.98px) {
  .pt-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .pt-footer__brand {
    grid-column: 1 / -1;
  }
}