/* Body & allgemeine Styles */
html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
  background: #fff;
  color: #111;
}

/* Header */
header {
  width: 100%;
  padding: 1rem 2rem;
  background: rgba(255,255,255,0.9);
  box-sizing: border-box;
}

.header-left h1 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.header-left a {
  display: block;
  margin-top: 0.2rem;
  font-size: 1rem;
  color: #0066cc;
  text-decoration: underline;
}

.header-left a:hover {
  color: #004499;
  text-decoration: none;
}

/* Hauptbereich */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
}

/* Projekt */
.project {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 25vh; /* Abstand zwischen Projekten */
}

/* Container für Beschreibung, Link & Galerie */
.project-container {
  display: flex;
  flex-direction: column; /* Text + Link + Bild untereinander */
  align-items: flex-start; /* Text linksbündig */
  gap: 8px;               /* Abstand zwischen Text, Link und Bild */
  width: 85%;
  max-width: 1200px;
}

/* Projektbeschreibung */
.work-description {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  text-align: left;
}

/* Vimeo-Link unter Beschreibung */
.video-link {
  font-size: 13px;
  margin: 0;
  text-align: left;
}

.video-link a {
  color: #0066cc;
  text-decoration: underline;
}

.video-link a:hover {
  color: #004499;
  text-decoration: none;
}

/* Galerie */
.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;    /* Bilder zentriert */
  width: 100%;
}

.gallery img {
  width: 100%;
  max-width: 1200px;

  max-height: 85vh;   /* ← wichtig: begrenzt Höhe auf 85% des Bildschirms */
  height: auto;

  margin: 0 0 1.5rem 0;
  border-radius: 4px;
  object-fit: contain;
  display: block;
}