:root {
  --column-gap: clamp(3rem, 6vw, 6rem);
  --row-gap: clamp(4rem, 8vw, 7rem);
  --hero-height: clamp(320px, 55vw, 560px);
  --intro-gap: clamp(3rem, 8vw, 6rem);
  --hero-portrait-height: var(--hero-height);
  --portrait-width: clamp(320px, 60vw, 620px);
  --portrait-y: 50%;      /* 50% = exakt Mitte, z.B. 55% = etwas tiefer */
  --portrait-x: 50%;      /* normalerweise 50% */


}


/* Header über Hero, nur Brand*/
.project .header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: transparent;
  color: var(--color-white);
  padding: clamp(3rem, 8vw, 5rem) 0;
  z-index: 10;
}

.project .header_inner {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--page-padding);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
}

.project .header_brand,
.project .header_contact,
.project .header_contact a {
  color: var(--color-white);
}

.project .header_contact {
  text-align: right;
  font-size: var(--s);
  line-height: 1.6;
}

.project .header_contact a { display: block; }

/* Hero */
.hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: var(--hero-height);
  position: relative;
  overflow: hidden;
}

.hero_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: var(--portrait-x) var(--portrait-y);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.15) 45%, rgba(0,0,0,0));
  pointer-events: none;
}

/* Hero Portrait Variante (Background + freigestelltes Portrait) */
.hero.hero--portrait {
  height: var(--hero-portrait-height);
}

/* Hintergrundbild */
.hero--portrait .hero_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero--portrait .hero_portrait{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);

  width: var(--portrait-width);
  height: auto;

  /* WICHTIG: verhindert Abschneiden */
  max-height: 100%;
  object-fit: contain;

  display: block;
}

.hero--portrait::after{
  content: none;
}



/* Intro */
.intro { padding-block: clamp(3rem, 8vw, 5rem); }

.intro_inner {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--page-padding);
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--intro-gap);
  align-items: baseline;
}

.intro_desc { max-width: 55ch; }
/* VIDEO BLOCK */
.video-block{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: clamp(0.8rem, 2.5vw, 1.4rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.video-block_inner{
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--page-padding);
}

/* DIRECT VIDEO EMBED */
.video-embed{
  width:100%;
  aspect-ratio:16/9;
}

.video-embed iframe{
  width:100%;
  height:100%;
  border:0;
}



/* Gallery */
.gallery {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--page-padding);
  padding-bottom: var(--row-gap);
  column-count: 3;
  column-gap: var(--column-gap);
}


.tile { break-inside: avoid; margin: 0 0 var(--row-gap); }
.tile img { width: 100%; height: auto; display: block; }

/* =========================
   LIGHTBOX (shared)
   ========================= */

.lightbox{
  position: fixed;
  inset: 0;
  background: var(--color-white);
  z-index: 999;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Öffnen: smooth */
  transition: opacity 140ms ease, visibility 0s linear 140ms;
}

.lightbox.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 140ms ease;
}

/* Schliessen: Overlay blitzschnell weg */
.lightbox.closing{
  opacity: 0;
  transition: opacity 80ms ease;
}

/* Bild */
.lightbox_img{
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;

  position: relative;
  z-index: 1;
}

/* Fly über Overlay, unter Controls */
.lightbox_fly{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  pointer-events: none;
  will-change: transform;
  transform-origin: top left;
  backface-visibility: hidden;
}

/* =========================
   LIGHTBOX CONTROLS
   ========================= */

.lightbox_close,
.lightbox_prev,
.lightbox_next{
  position: absolute;
  z-index: 1002;

  width: 36px;
  height: 36px;

  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Position Desktop */
.lightbox_close{
  top: 1rem;
  right: 1rem;
}

.lightbox_prev{
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox_next{
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}


/* ================================================= */
/* ============== FULL WIDTH IMAGE BLOCK =========== */
/* ================================================= */

.image-block{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  /* gleiche Abstände wie Video */
  padding-top: clamp(0.8rem, 2.5vw, 1.4rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

/* Stack ohne Abstände */
.image-block_inner{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Jedes Item ist 16:9 */
.image-item{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
}

/* Bild füllt sein 16:9 Item */
.image-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}



/* =========================
   Weitere Projekte (Project Pages)
   ========================= */
.projects--more{
  padding-top: clamp(2.5rem, 6vw, 5rem);
}

.projects--more .projects_title{
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  font-size: var(--xl);
  font-weight: 600;
  line-height: 1.1;
}

.projects.projects--more{
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--page-padding);
  padding-top: clamp(2.5rem, 6vw, 5rem);

  /* falls irgendwo columns drauf wirken */
  column-count: initial;
  column-gap: normal;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.projects.projects--more .projects_title{
  grid-column: 1 / -1;
}

/* Icons */
.lightbox_close img,
.lightbox_prev img,
.lightbox_next img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  pointer-events: none;

  
}

/* Pfeil links spiegeln */
.lightbox_prev img{
  transform: scaleX(-1);
}


/* Footer, nur Brand links und Kontakte rechts */
.footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--color-white);
  padding: clamp(3rem, 8vw, 5rem) 0;
}

.footer_inner {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--page-padding);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
}

.footer_brand { margin: 0; }

.footer_right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  color: var(--color-black);
  font-size: var(--s);
  line-height: 1.6;
}

.footer_title {
    margin-bottom: var(--xl);
}

.footer_link + .footer_link { margin-top: var(--xs) }

.footer_brand a { color: inherit; }

/* ================================================= */
/* =================== BREAKPOINTS ================= */
/* ================================================= */
/* ---------- DESKTOP SMALL (≤1100px) ---------- */
@media (max-width: 1100px) { .gallery { column-count: 2; } }

/* ---------- TABLET (≤900px) ---------- */
@media (max-width: 900px) {
  .intro_inner { grid-template-columns: 1fr;}

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

/* ---------- PHONE (≤640px) ---------- */
@media (max-width: 640px) {

  /* Gallery: Mobile MUSS 1 Spalte sein */
  .gallery {
    column-count: 1;
    padding-inline: var(--page-padding); /* gleich wie Startseite */
  }

  /* Header/Brand/Intro: gleiche Kante wie Startseite */
  .project .header_inner,
  .intro_inner,
  .footer_inner {
    padding-inline: var(--page-padding);
  }

  /* Intro kompakter (dein Wunsch) */
  .intro {
    padding-block: 1rem 1.2rem;
  }

  /* Titel ↔ Text Abstand (gap ist bei dir die Ursache) */
  .intro_inner {
    gap: 1rem;
  }

  /* Default Margins weg */
  .intro_title,
  .intro_desc {
    margin: 0;
  }

  .projects.projects--more{
    grid-template-columns: 1fr;
  }

  /* Footer layout (hattest du, bleibt) */
  .footer_inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer_right {
    align-items: flex-end;
    text-align: right;
  }

}