/* ===== layout.css ===== */

/* 3-Spalten (links „Ghost“, Mitte Content, rechts Insta) */
.content-wrap {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)                             /* linke freie Spalte */
    minmax(0, clamp(560px, 58vw, 820px))       /* Mittelspalte */
    clamp(260px, 28vw, 340px);                 /* Sidebar */
  gap: clamp(16px, 2vw, 24px);
  align-items: start;

  /* Überlappung in den Hero:
     - nutzt eine Kombination aus vh (relativ zur Fensterhöhe) UND px (harte Unterkante)
     - damit wirkt es bei 100–200% Zoom wieder so „hoch“ wie gewünscht,
       ohne bei starkem Zoom/kleinen Viewports zu übertreiben */
  margin: calc(-1 * max(50vh, 700px)) 0 40px 0;

  position: relative;
  z-index: 2;  /* über dem Hero */
}

.left-ghost { min-height: 1px; }

/* Galerie-Bereich */
.gallery-section { padding: 4px 0 0 0; }

/* Projekt-Boxen: dunkelgrau halbtransparent + helle Schrift + Schwebe-Effekt */
.project-block {
  margin-bottom: 32px;
  background: rgba(34, 34, 34, 0.7);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  padding: clamp(12px, 1.4vw, 16px);
}

.project-block h3 { margin: 0 0 14px 0; }
.project-separator {
  border: none;
  border-top: 2px solid rgba(255,255,255,.25);
  margin: 32px 0 40px 0;
}

/* ===== feinere Anpassung je Breite (damit nichts springt) ===== */
@media (max-width: 1440px) {
  .content-wrap {
    margin-top: calc(-1 * max(46vh, 680px));
  }
}

@media (max-width: 1280px) {
  .content-wrap {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, clamp(540px, 56vw, 760px))
      clamp(240px, 26vw, 320px);
    margin-top: calc(-1 * max(40vh, 520px));
  }
}

/* Ab ~1120px: 1-Spalten Layout (Stack) */
@media (max-width: 1120px) {
  .content-wrap {
    grid-template-columns: minmax(0,1fr);
    margin-top: -100px; /* sanfte Überlappung auf kleineren Screens */
    gap: 16px;
  }
}

/* Ab ~768px: kleinere Innenabstände */
@media (max-width: 768px) {
  .project-block { padding: 12px; }
}
/* Überschrift + Intro-Text in der Galerie weiß darstellen */
.gallery-section > h2,
.gallery-section > p{
  color: #fff;
}