.info-page {
  align-items: start;
  padding-top: var(--page-pad);
}

.info-intro-unit {
  grid-column: 2 / 4;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gap);
}

.info-intro-column {
  min-width: 0;
}

.info-intro-unit h2 {
  margin: 0 0 1.15em;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

.info-intro-unit p {
  margin: 0 0 1.15em;
  max-width: 34em;
}

.info-cv {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gap);
  row-gap: 0;
  margin-top: 1.15em;
}

.info-cv-column {
  min-width: 0;
}

.info-cv-column p {
  margin: 0 0 1.15em;
  max-width: 34em;
}

.info-cv-column--left {
  grid-column: 1 / 2;
}

.info-cv-column--right {
  grid-column: 2 / 3;
}

.info-outro {
  margin-top: 1.15em;
}

@media (max-width: 1020px) {
  .info-intro-unit,
  .info-cv {
    grid-column: 1 / 5;
  }
}

@media (max-width: 760px) {
  .info-page {
    padding-top: calc(var(--page-pad) + 3.45em);
  }

  .info-intro-unit {
    display: block;
  }

  .info-cv {
    display: block;
  }
}

.info-intro-unit--office {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gap);
}

.info-intro-unit--office .info-team-photo {
  grid-column: 1 / -1;
}

.info-copy-column {
  min-width: 0;
}

.info-copy-column--left {
  grid-column: 1 / 2;
}

.info-copy-column--right {
  grid-column: 2 / 3;
}

.info-copy-column p {
  margin: 0 0 1.15em;
  max-width: 34em;
}

.info-list-label,
.info-list-text {
  min-width: 0;
}

.info-list-label {
  grid-column: 1 / 2;
}

.info-list-text {
  grid-column: 2 / 3;
}

.info-list-label p,
.info-list-text p {
  margin: 0 0 1.15em;
  max-width: 34em;
}

.info-team-photo {
  margin: 0 0 1.15em;
}

.info-team-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Body text links on info and person pages */
.info-intro-unit a,
.person-description a,
.person-cv a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.08em;
}

/* Person sub pages: two-column content aligned to the global 4-column frame */
.person-page {
  padding-top: calc(var(--page-pad) + 2.3em);
}

.person-title {
  position: fixed;
  top: var(--page-pad);
  left: calc(
    var(--page-pad) +
      ((100vw - (2 * var(--page-pad)) - (3 * var(--grid-gap))) / 4) +
      var(--grid-gap)
  );
  width: calc((100vw - (2 * var(--page-pad)) - (3 * var(--grid-gap))) / 4);
  z-index: 25;
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  color: #fff;
  mix-blend-mode: difference;
}

.person-title a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.person-back {
  position: fixed;
  top: var(--page-pad);
  left: calc(
    var(--page-pad) + 2 *
      (
        (100vw - (2 * var(--page-pad)) - (3 * var(--grid-gap))) / 4 +
          var(--grid-gap)
      )
  );
  width: calc((100vw - (2 * var(--page-pad)) - (3 * var(--grid-gap))) / 4);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  mix-blend-mode: difference;
  text-decoration: none;
  line-height: inherit;
}

.person-back::before {
  content: "✕";
  display: inline-block;
  transform: translateY(-0.03em);
}

.person-back span {
  display: none !important;
}

.person-photo {
  grid-column: 2 / 4;
  margin: 0 0 1.15em;
}

.person-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.person-description,
.person-cv {
  grid-column: 2 / 4;
  columns: 2;
  column-gap: var(--grid-gap);
}

.person-description {
  margin-bottom: 1.15em;
}

.person-description p,
.person-cv p {
  margin: 0 0 1.15em;
  max-width: 34em;
  break-inside: avoid;
}

.person-cv span {
  font-family: "__jpba_mono", "Courier New", monospace;
  font-size: var(--mono-small-size);
}

@media (max-width: 1020px) {
  .person-page {
    padding-top: calc(var(--page-pad) + 4.6em);
  }

  .person-title {
    top: calc(var(--page-pad) + 2.3em);
    left: var(--page-pad);
    width: calc(100vw - (2 * var(--page-pad)) - 3em);
  }

  .person-back {
    top: calc(var(--page-pad) + 2.3em);
    right: var(--page-pad);
    left: auto;
    width: auto;
  }

  .person-photo,
  .person-description,
  .person-cv {
    grid-column: 1 / 5;
  }
}

@media (max-width: 760px) {
  .info-intro-unit--office {
    display: block;
  }

  .info-copy-column--left,
  .info-copy-column--right,
  .info-list-label,
  .info-list-text {
    grid-column: auto;
  }

  .person-page {
    display: block;
    padding-top: calc(var(--page-pad) + 4.6em);
  }

  .person-title {
    top: 3.5rem;
    left: var(--page-pad);
    width: 55vw;
  }

  .person-back {
    top: 3.5rem;
    right: var(--page-pad);
    left: auto;
    width: auto;
  }

  .person-description,
  .person-cv {
    columns: auto;
  }
}

/* 2026-05 person pages: align mobile title/x with project detail pages */
@media (max-width: 760px) {
  .person-page {
    padding-top: calc(var(--page-pad) + 5.75em);
  }

  .person-title,
  .person-back {
    top: calc(var(--page-pad) + 3.45em);
  }

  .person-title {
    left: var(--page-pad);
    width: calc(100vw - (2 * var(--page-pad)) - 3em);
  }

  .person-back {
    right: var(--page-pad);
    left: auto;
    width: auto;
  }
}

/* 2026-05: tablet/all-column info image uses same vertical offset as one-column layout */
@media (max-width: 1020px) {
  .info-page:not(.person-page) {
    padding-top: calc(var(--page-pad) + 3.45em);
  }
}

/* 2026-05: profile PDF link */
.person-pdf-link {
  grid-column: 2 / 4;
  margin: 1.15em 0 0;
  max-width: 34em;
}

.person-pdf-link a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.08em;
}

@media (max-width: 1020px) {
  .person-pdf-link {
    grid-column: 1 / 5;
  }
}

/* 2026-05: when hovering the X-link, blur the page title as well */
.person-page:has(.person-back:hover) .person-title,
.person-page:has(.person-back:focus-visible) .person-title {
  filter: blur(3px);
}

/* 2026-05: reverse hover state — when hovering/focusing the page title, blur the X as well */
.person-page:has(.person-title:hover) .person-back,
.person-page:has(.person-title:focus-visible) .person-back {
  filter: blur(3px);
}

/* 2026-05: robust person-page title/X hover link, including browsers without reliable :has refresh */
.person-title:hover + .person-back,
.person-title:active + .person-back,
.person-title:focus-visible + .person-back,
.person-title:has(a:hover) + .person-back,
.person-title:has(a:focus-visible) + .person-back {
  filter: blur(3px);
}

.person-title {
  cursor: pointer;
}

/* 2026-05 robust shared title/X hover state on person pages: hovering either element blurs both. */
.person-title:hover,
.person-title:has(a:hover),
.person-title:has(a:focus-visible),
.person-title:focus-visible,
.person-page:has(.person-title:hover) .person-title,
.person-page:has(.person-title:focus-visible) .person-title,
.person-page:has(.person-back:hover) .person-title,
.person-page:has(.person-back:focus-visible) .person-title,
.person-page:has(.person-title:hover) .person-back,
.person-page:has(.person-title:focus-visible) .person-back,
.person-page:has(.person-back:hover) .person-back,
.person-page:has(.person-back:focus-visible) .person-back,
.person-title:hover + .person-back,
.person-title:focus-visible + .person-back {
  filter: blur(3px);
}

/* 2026-05: make the complete fixed person-title area clickable, not only the visible name. */
.person-title a {
  display: block;
  width: 100%;
  min-height: 1.15em;
}

.info-jp-photo {
  grid-column: 2 / 4;
  margin: 0 0 1.15em;
}

.info-jp-photo img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1020px) {
  .info-jp-photo {
    grid-column: 1 / 5;
  }
}

@media (max-width: 760px) {
  .info-jp-photo {
    grid-column: 1 / 5;
  }
}


.privacy-page {
  align-items: start;
  padding-top: var(--page-pad);
}

.privacy-copy {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gap);
  font-family: "__jpba_text", Arial, sans-serif;
  font-size: var(--base-font-size);
  line-height: 1.15;
}

.privacy-copy__column {
  min-width: 0;
}

@media (min-width: 1021px) {
  .privacy-copy__column:nth-child(2) {
    padding-top: 2.3em;
  }
}

.privacy-copy p {
  margin: 0 0 1.15em;
  max-width: 34em;
}

.privacy-copy a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.08em;
}

@media (max-width: 1020px) {
  .privacy-page {
    padding-top: calc(var(--page-pad) + 3.45em);
  }

  .privacy-copy {
    grid-column: 1 / 5;
  }
}

@media (max-width: 760px) {
  .privacy-copy {
    display: block;
  }
}

/* 2026-06: Datenschutz / Privacy Policy: Titel Regular in Standardgröße, Text klein Monospace wie Impressum/Legal. */
.privacy-copy {
  font-family: "__jpba_mono", "Courier New", monospace;
  font-size: var(--mono-small-size);
  line-height: 1.15;
}
.privacy-copy .privacy-title {
  font-family: "__jpba_text", Arial, sans-serif;
  font-size: 166.6667%;
  line-height: 1.15;
  margin-bottom: 1.15em;
}

@media (max-width: 760px) {
  .privacy-copy .privacy-title { font-size: 142.8571%; }
}
html.jpba-mobile .privacy-copy .privacy-title,
html.jpba-tablet .privacy-copy .privacy-title { font-size: 142.8571%; }

.info-office-photo{grid-column:1/-1;margin:0 0 1.15em}.info-office-photo img{display:block;width:100%;height:auto}