/* Reset & Variablen */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
:root{
  --page-padding: 1rem;
  --nav-size: 1.1rem;
  --nav-weight: 600;
  --header-h: 56px;             /* wird per JS exakt gesetzt */
  --center-pad: 33vh;           /* wird per JS exakt gesetzt (Fallback) */
}

/* Base */
body{
  font-family:Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:#000;color:#fff;-webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
body.overview{background:#fff;color:#000}

/* Header (transparent) */
.site-header{
  position:sticky; top:0; z-index:1200;
  display:flex; justify-content:space-between; align-items:center; /* <— mittig ausgerichtet */
  padding:.6rem var(--page-padding);
  background:transparent;
}
.site-nav{display:flex; gap:1rem}

/* Navi – bureaulehni-like (difference in Projektansicht) */
body:not(.overview) .site-header{ color:#fff; mix-blend-mode:normal; }
body.overview .site-header{ color:#fff; mix-blend-mode:difference; }

/* Link-Typo (Nav) */
.site-header .brand a,
.site-header .nav-link{
  font-size:var(--nav-size);
  font-weight:var(--nav-weight);
  text-decoration:none;
  color:inherit;
  line-height:1;                 /* gleiche vertikale Metrik */
}

/* NUR Visual Communication: feste 50%-Grautönung, ohne Blend */
#visualBtn{
  mix-blend-mode:normal !important;
}
body:not(.overview) #visualBtn{ color:#808080; }   /* „50% Schwarz“ auf Landing */
body.overview #visualBtn{ color:#808080; }         /* „50% Grau“ in Projektansicht */

/* About (invertiert je Modus) */
#aboutme{
  position:fixed; left:0; right:0; top:0; z-index:1300;
  transform:translateY(-100%);
  padding:1rem var(--page-padding);
  transition:transform .6s ease;
  backdrop-filter: blur(6px);
}
body:not(.overview) #aboutme{ background:rgba(0,0,0,.9); color:#fff; }
body.overview #aboutme{ background:rgba(255,255,255,.96); color:#000; }
#aboutme.aboutmeopen{ transform:translateY(0); }

/* About Typografie wie Navi */
#aboutme h3{
  font-size:var(--nav-size);
  font-weight:var(--nav-weight);
  line-height:1.4;
}
#aboutme h3 a{ text-decoration:underline; }

/* Landing Slideshow */
#landingSlideshow{
  position:fixed; inset:0; z-index:500; background:#000;
  display:flex; align-items:center; justify-content:center;
}
.visual-inner{ position:relative; width:100%; height:100%; }
.visual-inner img{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:90vw; max-height:90vh; object-fit:contain;
  opacity:0; transition:opacity .8s ease;
}
.visual-inner img.show{ opacity:1; }

/* Overview – Flex; Titel animiert Mitte ↔ oben */
#projectOverview{
  display:none;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  min-height:calc(100vh - var(--header-h));
  padding:0;
  /* Standard im Top-Modus: immer Navi-Abstand */
  padding-top: var(--header-h);
  will-change: padding-top;
  /* schnelleres Easing (.8s) */
  transition: padding-top .8s cubic-bezier(.4,0,1,1);
}
#projectOverview.show{ display:flex; }

/* Einstiegs-Fix (keine Animation) */
#projectOverview.no-anim{ transition:none !important; }

/* Alle Projekte zu → Titel mittig */
body.overview.center-titles #projectOverview{
  min-height:100vh;
  padding-top: var(--center-pad);
}

/* Projektzeilen */
.project-row{
  width:100%; margin:.25rem 0;
  scroll-margin-top: calc(var(--header-h) + .5rem);
}
.row-title{
  width:100%; text-align:left;
  margin-left:var(--page-padding);            /* gleiche Flucht wie Header */
  background:transparent; border:none;
  font-size:1.1rem; font-weight:550; cursor:pointer; color:inherit;
  padding:.5rem 0;
}

/* Panel & Scroller */
.panel{
  position:relative; max-height:0; overflow:hidden;
  transition:max-height .475s cubic-bezier(.2,.9,.2,1);
}
.project-row.open .panel{ max-height:80vh; }

/* Scroller: randlos, keine Lücken; iOS Momentum on */
.scroller{
  display:flex; gap:0; overflow:hidden;
  margin:0; padding:0;
  line-height:0; letter-spacing:0;
  touch-action:pan-y;
  -webkit-overflow-scrolling: touch; /* <— iOS */
}
.scroller img{
  flex:0 0 auto; width:100vw; height:80vh; object-fit:contain;
  display:block; margin:0; border:0;
  user-select:none; -webkit-user-drag:none; cursor:pointer; position:relative; z-index:1;
}

/* Banner (randlos, invertiert) */
.project-banner{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  width:100%; height:33%;
  display:flex; align-items:center; justify-content:center;
  padding:1rem var(--page-padding); text-align:center;
  backdrop-filter: blur(14px);
  background: rgba(0,0,0,.22);
  color:#fff; mix-blend-mode:difference;
  font-weight:600; font-size:1.05rem;
  opacity:0; transition:opacity .25s ease, transform .25s ease;
  pointer-events:none; z-index:2;
}
.project-banner.show{ opacity:1; pointer-events:auto; }

/* Video */
.video-player{ padding:.5rem 0; }

/* Footer (nur Projektansicht; unten im Flow) */
.site-footer{
  display:block;
  width:100%;
  padding:1rem var(--page-padding);
  margin-top:auto; flex-shrink:0;
}
#projectOverview:not(.show) .site-footer{ display:none; }

.site-footer small{
  font-size:calc(var(--nav-size)*.7);
  font-weight:500;
  color:#fff;
  mix-blend-mode:difference;
  opacity:.95;
}

/* Responsive */
@media (max-width:900px){
  .scroller img{ height:65vh; }
  .project-row.open .panel{ max-height:70vh; }
}

/* Fallback für Browser ohne mix-blend-mode */
@supports not (mix-blend-mode: difference) {
  body.overview .site-header{
    mix-blend-mode:normal !important;
    color:#fff !important;
    text-shadow:0 0 6px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.55);
  }
  #projectOverview.show .site-footer small{
    mix-blend-mode:normal !important;
    color:#fff !important;
    text-shadow:0 0 6px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.55);
  }
}