/* ===============================
   FONTS
=============================== */

@font-face {
  font-family: "HK Grotesk";
  src: url("../fonts/HKGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HK Grotesk";
  src: url("../fonts/HKGrotesk-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ===============================
   ROOT
=============================== */

:root{
  --bg: #ffffff;
  --fg: #000000;
  --muted: rgba(0,0,0,1);
  --max: 1200px;
  --top: 44px;

  --bottom: 44px;

  --edge-pad: clamp(10px, 3vw, 24px);
  --col-w: min(980px, calc(100vw - (2 * var(--edge-pad))));
  --text-w: min(720px, 100%);
  --x-nudge: clamp(0px, 6vw, 120px);

  --past-desc-left-shift: clamp(80px, 8vw, 180px);
  --past-desc-x: 0px;
  --past-desc-w: 900px;

  --h2-size: 32px;
  --h2-lh: 1.15;
  --name-line: calc(var(--h2-size) * var(--h2-lh));
  --below-gap: 16px;

  --scale-default: 0.75;
  --scale-present: 0.75;
  --scale-about: 0.75;
  --scale-past-hover: 0.75;

  /* unified "content bottom cut" for all scroll blocks */
  --content-bottom: var(--bottom);

  /* mobile footer helper (overwritten in mobile media query) */
  --mobile-footer-h: 0px;
}

/* ===============================
   BASE
=============================== */

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: "HK Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

body:not(.legal){ overflow: hidden; }

/* ===============================
   TYPO (H1/H2/H3)
=============================== */

.topnav{
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.topnav__item{
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
}

.topnav__item[aria-current="page"]{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.name,
.present-title,
.past-title,
.past-year{
  font-weight: 600;
  font-size: var(--h2-size);
  letter-spacing: -0.06em;
  line-height: var(--h2-lh);
  margin: 0;
}

.present-title,
.past-title,
.past-year{
  text-transform: uppercase;
}

.name{
  text-transform: none;
}

.present-sub,
.present-meta,
.about-info,
.past-sub,
.past-desc__inner{
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0;
}

/* disable uppercase for ABOUT + all hover texts */
.about-info,
.past-desc__inner{
  text-transform: none;
}

.about-info{ text-align: left; }
.about-info p{ margin: 0; }
.about-info strong{
  font-weight: 600;
  text-transform: none;
}

/* legal blocks should look like about */
.impressum-info,
.datenschutz-info{
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0;
  text-align: left;
  width: var(--text-w);
}

/* disable uppercase for IMPRESSUM + DATENSCHUTZ */
.impressum-info,
.datenschutz-info{
  text-transform: none;
}

.impressum-info p,
.datenschutz-info p{ margin: 0; }

/* ===============================
   NAV
=============================== */

.topbar{
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--top);
  z-index: 100;
}

.container{
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

.topnav{
  height: var(--top);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}

.topnav__item:nth-child(1){ justify-self: start; }
.topnav__item:nth-child(2){ justify-self: center; }
.topnav__item:nth-child(3){ justify-self: end; }

/* ===============================
   STAGE / BACKGROUNDS
=============================== */

.stage{
  position: relative;
  height: 100vh;
  height: 100dvh;
  padding-top: var(--top);
  padding-bottom: var(--bottom);
  display: grid;
  place-items: center;

  /* CHANGED: padding counts into the fixed-height viewport */
  box-sizing: border-box;
}

.bg{
  position: absolute;

  /* CHANGED: backgrounds only between top and bottom navigation */
  inset: var(--top) 0 var(--bottom) 0;

  z-index: 1;
  pointer-events: none;
  display: none;
}

body.mode-default .bg--slideshow{ display: block; }
body.mode-present .bg--present{ display: block; }
body.mode-about .bg--about{ display: block; }
body.mode-past .bg--past-hover{ display: block; }

/* For impressum/datenschutz: keep slideshow background */
body.mode-impressum .bg--slideshow{ display: block; }
body.mode-datenschutz .bg--slideshow{ display: block; }

.bg--slideshow .slide{
  position: absolute;
  inset: 0;

  /* CHANGED: fill the bg area (not full viewport) */
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center center;
  transform: scale(var(--scale-default));
  opacity: 0;
  visibility: hidden;
}

.bg--slideshow .s1{ animation: slide1 24s infinite; }
.bg--slideshow .s2{ animation: slide2 24s infinite; }
.bg--slideshow .s3{ animation: slide3 24s infinite; }
.bg--slideshow .s4{ animation: slide4 24s infinite; }
.bg--slideshow .s5{ animation: slide5 24s infinite; }
.bg--slideshow .s6{ animation: slide6 24s infinite; }
.bg--slideshow .s7{ animation: slide7 24s infinite; }
.bg--slideshow .s8{ animation: slide8 24s infinite; }

@keyframes slide1{ 0%,12.5%{opacity:1;visibility:visible;} 12.51%,100%{opacity:0;visibility:hidden;} }
@keyframes slide2{ 0%,12.5%{opacity:0;visibility:hidden;} 12.51%,25%{opacity:1;visibility:visible;} 25.01%,100%{opacity:0;visibility:hidden;} }
@keyframes slide3{ 0%,25%{opacity:0;visibility:hidden;} 25.01%,37.5%{opacity:1;visibility:visible;} 37.51%,100%{opacity:0;visibility:hidden;} }
@keyframes slide4{ 0%,37.5%{opacity:0;visibility:hidden;} 37.51%,50%{opacity:1;visibility:visible;} 50.01%,100%{opacity:0;visibility:hidden;} }
@keyframes slide5{ 0%,50%{opacity:0;visibility:hidden;} 50.01%,62.5%{opacity:1;visibility:visible;} 62.51%,100%{opacity:0;visibility:hidden;} }
@keyframes slide6{ 0%,62.5%{opacity:0;visibility:hidden;} 62.51%,75%{opacity:1;visibility:visible;} 75.01%,100%{opacity:0;visibility:hidden;} }
@keyframes slide7{ 0%,75%{opacity:0;visibility:hidden;} 75.01%,87.5%{opacity:1;visibility:visible;} 87.51%,100%{opacity:0;visibility:hidden;} }
@keyframes slide8{ 0%,87.5%{opacity:0;visibility:hidden;} 87.51%,100%{opacity:1;visibility:visible;} }

.bg__img{
  position: absolute;
  inset: 0;

  /* CHANGED: fill the bg area (not full viewport) */
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center center;
  opacity: 1;
}

body.mode-present .bg--present .bg__img{ transform: scale(var(--scale-present)); }
body.mode-about .bg--about .bg__img{ transform: scale(var(--scale-about)); }
body.mode-past .bg--past-hover .bg__img{ transform: scale(var(--scale-past-hover)); }

.bg__img--past{
  display: none;
  opacity: 0;
  transition: opacity 120ms linear;
}

.bg__img--past.is-visible{
  display: block;
  opacity: 1;
}

/* ===============================
   CENTER SYSTEM
=============================== */

.center{
  position: absolute;
  inset: 0;
  z-index: 10;
}

.center-col{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(calc(-50% + var(--x-nudge) + 25px));
  width: var(--col-w);
  text-align: left;
}

.name{
  transform: translateY(calc(-1 * var(--name-line) / 2));
}

.below{
  margin-top: calc(var(--name-line) / 2 + var(--below-gap));
}

/* ===============================
   MODE VISIBILITY
=============================== */

.present-info,
.about-info,
.impressum-info,
.datenschutz-info,
.past{
  display: none;
}

body.mode-present .present-info{ display: grid; }
body.mode-about .about-info{ display: block; }
body.mode-impressum .impressum-info{ display: block; }
body.mode-datenschutz .datenschutz-info{ display: block; }
body.mode-past .past{ display: block; }

.present-info{ gap: 6px; }
.about-info{ width: var(--text-w); }

/* ===============================
   PAST
=============================== */

.past{ width: 100%; }

.past-grid{
  display: grid;
  grid-template-columns: var(--text-w) 1fr;
  gap: 28px;
  align-items: start;
}

.past-list{
  width: var(--text-w);

  max-height: calc(50vh - var(--name-line) - var(--below-gap) - var(--edge-pad) - var(--content-bottom) + 29px);
  max-height: calc(50dvh - var(--name-line) - var(--below-gap) - var(--edge-pad) - var(--content-bottom) + 29px);

  overflow: auto;
  padding-right: 10px;

  padding-bottom: var(--edge-pad);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  text-align: left;
}

.past-list::-webkit-scrollbar{ width: 8px; }
.past-list::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.15); border-radius: 99px; }
.past-list::-webkit-scrollbar-track{ background: transparent; }

.past-item{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 15px 0px;
  cursor: pointer;
  color: var(--fg);
  font-family: inherit;
}

/* CHANGED: remove the "air" above the first item (e.g. above 2025) */
.past-item:first-child{
  padding-top: 0;
}

/* CHANGED: remove gray separators between projects */
.past-item + .past-item{
  border-top: 0;
}

.past-item:focus{ outline: none; }

.past-headline{
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}

.past-year{ display: inline-block; opacity: 1; }
.past-title{ display: inline-block; }

.past-sub{
  margin-top: 6px;
  color: var(--muted);
}

body.mode-past .past-desc{
  position: absolute;
  top: calc(var(--name-line) / 2 - 4px);

  left: calc(var(--text-w) + 28px - var(--past-desc-left-shift));
  transform: translateY(-100%) translateX(var(--past-desc-x));

  width: min(var(--past-desc-w), calc(100vw - (2 * var(--edge-pad))));
  max-width: calc(100vw - (2 * var(--edge-pad)));

  text-align: left;
  pointer-events: none;
}

.past-desc__inner{
  min-height: 0;
  opacity: 1;
  text-transform: uppercase;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* disable uppercase specifically inside hover text paragraphs too */
.past-desc__inner,
.past-desc__inner *{
  text-transform: none;
}

.past-desc__inner p{ margin: 0 0 12px 0; }
.past-desc__inner p:last-child{ margin-bottom: 0; }

.past-item:hover .past-title,
.past-item:focus-visible .past-title{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===============================
   TOUCH DEVICES: disable hover box
=============================== */

body.is-touch .past-desc{
  display: none !important;
}

/* ===============================
   MODAL
=============================== */

.modal{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
}

.modal[aria-hidden="false"]{
  display: block;
}

/* CHANGED: 100% opaque overlay */
.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,1);
}

.modal__panel{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.modal__bg{
  position: absolute;
  inset: 0;
  pointer-events: none;

  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.modal__bgimg{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center center;

  transform: scale(var(--scale-past-hover));
  transform-origin: center center;

  display: block;
  max-width: none;
  max-height: none;
}

.modal__close{
  position: absolute;
  top: calc(var(--top) + 10px);
  right: var(--edge-pad);
  z-index: 5;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: var(--fg);
}

/* CHANGED: equal white margin left/right for modal textControlled top padding moved to match PAST first row */
.modal__content{
  position: absolute;
  top: 0;

  left: var(--edge-pad);
  right: var(--edge-pad);
  transform: none;

  width: auto;
  max-width: var(--col-w);
  margin-inline: auto;

  /* CHANGED: align modal text top with list-top (2025) */
  padding-top: calc(var(--top) + var(--edge-pad));
  padding-bottom: 24px;

  max-height: 100vh;
  max-height: 100dvh;
  overflow: auto;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 4;
}

.modal__headline{
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 12px 0;
}

.modal__year,
.modal__title{
  font-weight: 600;
  font-size: var(--h2-size);
  letter-spacing: -0.06em;
  line-height: var(--h2-lh);
  text-transform: uppercase;
  margin: 0;
}

.modal__body{
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}

/* modal hover text should not be uppercase */
.modal__body{
  text-transform: none;
}

.modal__body p{
  margin: 0 0 12px 0;
}
.modal__body p:last-child{
  margin-bottom: 0;
}

/* ===============================
   BOTTOM NAV
=============================== */

.bottombar{
  position: fixed;
  inset: auto 0 0 0;
  height: var(--bottom);
  z-index: 100;
}

.bottomnav{
  height: var(--bottom);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;

  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.bottomnav__item{
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
}

/* underline current page in bottom too */
.bottomnav__item[aria-current="page"]{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bottomnav__left{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.bottomnav__sep{
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fg);
}

.bottomnav__center{ justify-self: center; }
.bottomnav__right{ justify-self: end; }

/* ===============================
   MOBILE
=============================== */

@media (max-width: 640px){
  :root{
    --x-nudge: 0px;

    /* estimate footer height for content-safe scrolling */
    --mobile-footer-h: 120px;

    /* content bottom includes footer + safe area */
    --content-bottom: calc(var(--mobile-footer-h) + env(safe-area-inset-bottom));
  }

  .container{ width: min(100% - 1rem, var(--max)); }

  /* CHANGED: Stefan Mießeler + alle Inhalte exakt auf die gleiche linke Kante wie PAST */
  .center-col{
    left: 0;
    top: 50%;
    transform: translateX(0);
    width: calc(100vw - (2 * var(--edge-pad)));
    margin-left: var(--edge-pad);
    margin-right: var(--edge-pad);
  }

  /* CHANGED: align text blocks top with PAST list-top (2025) */
  body.mode-present .present-info,
  body.mode-about .about-info,
  body.mode-impressum .impressum-info,
  body.mode-datenschutz .datenschutz-info{
    margin-top: 0;
  }

  /* PAST: allow full scroll above fixed footer */
  .past-list{
    max-height: calc(
      50vh
      - var(--name-line)
      - var(--below-gap)
      - var(--edge-pad)
      - var(--content-bottom)
      + 40px
    );

    max-height: calc(
      50dvh
      - var(--name-line)
      - var(--below-gap)
      - var(--edge-pad)
      - var(--content-bottom)
      + 40px
    );

    /* CHANGED: extra bottom space so last item can scroll ABOVE footer */
    padding-bottom: calc(
      var(--edge-pad)
      + var(--mobile-footer-h)
      + env(safe-area-inset-bottom)
      + 24px
    );
  }

  body.mode-about .about-info{
    max-height: calc(50vh - var(--name-line) - var(--below-gap) - var(--edge-pad) - var(--content-bottom));
    max-height: calc(50dvh - var(--name-line) - var(--below-gap) - var(--edge-pad) - var(--content-bottom));
    overflow: auto;
    padding-right: 10px;

    /* CHANGED: allow full scroll above footer */
    padding-bottom: calc(
      var(--edge-pad)
      + var(--mobile-footer-h)
      + env(safe-area-inset-bottom)
      + 24px
    );

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  body.mode-impressum .impressum-info,
  body.mode-datenschutz .datenschutz-info{
    max-height: calc(50vh - var(--name-line) - var(--below-gap) - var(--edge-pad) - var(--content-bottom));
    max-height: calc(50dvh - var(--name-line) - var(--below-gap) - var(--edge-pad) - var(--content-bottom));
    overflow: auto;
    padding-right: 10px;

    /* CHANGED: important -> more bottom space so last lines can scroll ABOVE footer */
    padding-bottom: calc(
      var(--edge-pad)
      + var(--mobile-footer-h)
      + env(safe-area-inset-bottom)
      + 24px
    );

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Bottomnav untereinander, linksbündig */
  .bottombar{
    position: fixed;
    inset: auto 0 0 0;
    height: auto;
    padding: 12px 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--bg);
  }

  .bottomnav{
    height: auto;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 10px;
    text-align: left;
    justify-items: start;
    align-items: start;
  }

  .bottomnav__right{
    order: 1; /* MERCH */
    justify-self: start;
  }

  .bottomnav__center{
    order: 2; /* KONTAKT */
    justify-self: start;
  }

  .bottomnav__left{
    order: 3; /* IMPRESSUM / DATENSCHUTZ */
    justify-self: start;
    flex-direction: row;
    gap: 6px;
  }
}

/* ===============================
   MOTION REDUCTION
=============================== */

@media (prefers-reduced-motion: reduce){
  .bg--slideshow .slide{
    animation: none;
    opacity: 0;
    visibility: hidden;
  }
  .bg--slideshow .s1{
    opacity: 1;
    visibility: visible;
  }
}

/* ===============================
   LEGAL PAGES (if any)
=============================== */

body.legal{ overflow: auto; }

.legal-page{
  padding-top: calc(var(--top) + 2rem);
  padding-bottom: 3rem;
  max-width: 80ch;
}

/* ===============================
   DATENSCHUTZ / IMPRESSUM SCROLL FIX
=============================== */

body.mode-datenschutz .datenschutz-info{
  width: var(--text-w);

  /* CHANGED: align top with PAST first row (2025) */
  padding-top: 0;

  max-height: calc(
    50vh
    - var(--name-line)
    - var(--below-gap)
    - var(--edge-pad)
    - var(--content-bottom)
  );
  max-height: calc(
    50dvh
    - var(--name-line)
    - var(--below-gap)
    - var(--edge-pad)
    - var(--content-bottom)
  );

  overflow: auto;
  padding-right: 10px;
  padding-bottom: var(--edge-pad);

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.mode-impressum .impressum-info{
  width: var(--text-w);

  /* CHANGED: align top with PAST first row (2025) */
  padding-top: 0;

  max-height: calc(
    50vh
    - var(--name-line)
    - var(--below-gap)
    - var(--edge-pad)
    - var(--content-bottom)
  );
  max-height: calc(
    50dvh
    - var(--name-line)
    - var(--below-gap)
    - var(--edge-pad)
    - var(--content-bottom)
  );

  overflow: auto;
  padding-right: 10px;
  padding-bottom: var(--edge-pad);

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* etwas Luft zwischen Absätzen */
.datenschutz-info p,
.impressum-info p{
  margin: 0 0 12px 0;
}

.datenschutz-info p:last-child,
.impressum-info p:last-child{
  margin-bottom: 0;
}

h3{
  line-height: 1.35;
}

/* ===============================
   FIX: PAST gap wie PRESENT/ABOUT
=============================== */
body.mode-past .past{
  margin-top: -29px;
}

/* ===============================
   ALIGN TOPS: PRESENT / ABOUT / IMPRESSUM / DATENSCHUTZ to PAST (2025)
=============================== */

/* CHANGED: pull these blocks up by the same offset the PAST block uses */
body.mode-present .present-info,
body.mode-about .about-info,
body.mode-impressum .impressum-info,
body.mode-datenschutz .datenschutz-info{
  margin-top: -29px;
}