@font-face {
  font-family: "__jpba_text";
  src: url("../fonts/f01.woff2") format("woff2"),
       url("../fonts/f01.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "__jpba_text";
  src: url("../fonts/f01.woff2") format("woff2"),
       url("../fonts/f01.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "__jpba_mono";
  src: url("../fonts/f03.woff2") format("woff2"),
       url("../fonts/f03.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --base-font-size: 125%;
  --page-pad: 1rem;
  --bottom-pad: 1rem;
  --fade: 600ms;
  --grid-gap: 0.9rem;
  --mono-small-size: 60%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  font-family: "__jpba_text", Arial, sans-serif;
  font-size: var(--base-font-size);
  line-height: 1.15;
  color: #000;
  background: #fff;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  filter: blur(3px);
}

.site-frame {
  position: fixed;
  inset: var(--page-pad);
  z-index: 20;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr auto;
  color: #fff;
  mix-blend-mode: difference;
}

.site-frame a {
  pointer-events: auto;
}

.brand {
  grid-column: 1;
  grid-row: 1;
}

.menu {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}

.language {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}

.top-link {
  grid-column: 4;
  grid-row: 3;
  align-self: end;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.top-link::before {
  content: "↑";
  display: inline-block;
  transform: translateY(-0.03em);
}

.page {
  padding: 8rem var(--page-pad) 6rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gap);
  row-gap: 0;
}

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

@media (max-width: 760px) {
  .site-frame {
    inset: var(--page-pad);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    min-height: calc(100vh - (2 * var(--page-pad)));
  }

  .brand,
  .menu,
  .language,
  .top-link {
    position: fixed;
  }

  .brand {
    left: var(--page-pad);
    top: var(--page-pad);
    max-width: 50vw;
  }

  .menu {
    right: var(--page-pad);
    top: var(--page-pad);
    text-align: right;
    max-width: 9.2em;
    line-height: 1.15;
  }

  .language {
    left: var(--page-pad);
    bottom: var(--bottom-pad);
  }

  .top-link {
    right: var(--page-pad);
    bottom: var(--bottom-pad);
    justify-self: end;
  }

  .page {
    display: block;
    padding-top: 8rem;
  }
}

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

.cursor-circle {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
}

.cursor-circle.is-visible {
  opacity: 1;
}

@media (min-width: 1021px) and (hover: hover) and (pointer: fine) {
  a,
  a:hover,
  a:focus-visible {
    cursor: none;
  }

  .cursor-circle.link-arrow-cursor {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: #000;
    mix-blend-mode: normal;
    font-size: inherit;
    line-height: inherit;
  }

  body.home .cursor-circle.link-arrow-cursor {
    color: #fff;
  }
}

/* Standard up-arrow glyphs */
.top-link span {
  display: none !important;
}

.top-link::before {
  content: "↑";
  display: inline-block;
  transform: translateY(-0.03em);
}

/* 2026-05-06 one-column navigation correction */
@media (max-width: 620px) {
  .menu {
    max-width: 8.2em;
    line-height: 1.15;
    text-align: right;
  }
}

@media (max-width: 620px) {
  .muted {
    font-size: var(--mono-small-size) !important;
  }
}

/* Navigation: no orphan line breaks; desktop 1 row, mobile 2/2 */
.menu {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 0 0.3em;
  white-space: nowrap;
}
.menu a:not(:last-child)::after {
  content: ",";
}
@media (max-width: 760px) {
  .menu {
    grid-template-columns: repeat(2, max-content);
    justify-content: end;
    white-space: normal;
    max-width: none !important;
  }
}

.nowrap {
  white-space: nowrap;
}

/* 2026-05 mobile menu: keep equal spacing when wrapping to 2/2 */
@media (max-width: 760px) {
  .menu {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    justify-items: end;
    column-gap: 0.45em;
    row-gap: 0;
    max-width: none;
  }
}

/* 2026-05 mobile menu: equal word spacing on both wrapped rows */
@media (max-width: 760px) {
  .menu {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-start;
    gap: 0 0.45em;
    width: 7.8em;
    max-width: none !important;
    white-space: normal;
    text-align: right;
  }

  .menu a {
    flex: 0 0 auto;
  }
}

/* 2026-05: keep office title fixed in exactly two lines */
.brand {
  white-space: nowrap;
  max-width: none;
}

@media (max-width: 760px) {
  .brand {
    max-width: none !important;
  }
}

/* 2026-06: phone-only typography reduction.
   Uses real mobile input signals so a narrow desktop browser window is not affected. */
html.jpba-phone,
html.jpba-tablet,
html.jpba-mobile {
  --base-font-size: calc(125% * 0.7);
}

/* 2026-06 mobile typography balance:
   Schriftgroesse war mobil uneinheitlich, weil Start-/Projektseiten per JS
   html.jpba-phone auf 87.5% reduziert wurden, waehrend Info/Kontakt bei 125%
   blieben. Hier wird fuer alle mobilen Seiten ein gemeinsamer Mittelwert gesetzt. */
@media (max-width: 760px) {
  :root,
  html.jpba-phone,
  html.jpba-tablet,
  html.jpba-mobile {
    --base-font-size: 105%;
    --mono-small-size: 70%;
  }
}


/* 2026-06 Kontakt: Die kleinere Grundschrift greift bereits vor dem Umbruch,
   sobald die Kontaktdaten in Spalte 2 sonst in das Impressum in Spalte 3 laufen würden. */
@media (min-width: 761px) and (max-width: 1280px) {
  :root {
    --base-font-size: 105%;
    --mono-small-size: 70%;
  }
}

/* 2026-06 mobile/tablet: no custom circle cursor on touch/mobile layouts. */
@media (max-width: 1020px), (hover: none), (pointer: coarse) {
  .cursor-circle {
    display: none !important;
  }

  .home-slideshow,
  .project-card img,
  .project-card video,
  .detail-slideshow {
    cursor: auto !important;
  }
}

/* 2026-06: tablets use the same typography scale as phones, independent of viewport width. */
html.jpba-tablet,
html.jpba-mobile {
  --base-font-size: 105%;
  --mono-small-size: 70%;
}

/* 2026-06: no visible cursor on touch devices. */
html.jpba-mobile *,
html.jpba-tablet * {
  cursor: none !important;
}

/* 2026-06 tablet: Info/Kontakt/Datenschutz dürfen die Grundgröße nicht nochmals multiplizieren.
   body hat bereits font-size: var(--base-font-size); daher hier nur erben. */
@media (min-width: 761px) and (max-width: 1020px) {
  .info-page,
  .contact-page,
  .privacy-page {
    font-size: inherit;
  }

  .privacy-copy,
  .imprint-column,
  .privacy-link {
    font-size: inherit;
  }
}

/* Tablet/phone typography is controlled only via shared CSS variables, so all text scales in parallel. */


/* 2026-06: keep all mobile/tablet type changes synchronized via shared variables. */
html.jpba-phone body,
html.jpba-tablet body,
html.jpba-mobile body {
  font-size: var(--base-font-size);
}

/* Language switch: inactive language and slash at 50%, no blur while active/pressed. */
.language button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.language .is-inactive,
.language .lang-separator {
  opacity: 0.5;
}
.language button:hover,
.language button:focus-visible,
.language button:active,
a:active {
  filter: none !important;
}

/* DE/EN switch is intentionally hidden on the home page. */
body.home .language { display: none !important; }


/* Mobile hover/focus fix */
@media (hover: none) {
  a:hover,
  a:focus,
  a:focus-visible {
    filter: none !important;
  }
}

.language,
.top-link {
  -webkit-tap-highlight-color: transparent;
}

.language a,
.top-link {
  touch-action: manipulation;
}