/* Farben und Schriften wie auf der Wix-Vorlage */
:root {
  --navy: #010127;
  --cream: #f6f3ed;
  --sky-blue: #a8dcff; /* Hover-Farbe der Buttons */
  --rose: #b89c9c;
  --font: 'Montserrat', sans-serif;
  --max: 980px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #0b0a2e;
  color: var(--cream);
  font: 400 15px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  /* Footer bleibt auch bei kurzen Seiten ganz unten */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Dreamy-Sky-Hintergrund: Verlauf von tiefem Nachtblau zu Violett, weiche Wolkenschleier
   in Rosa, Blau und Pfirsich, dazu ein paar Sterne. Liegt fest hinter der ganzen Seite. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1px 1px at 28% 8%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.5px 1.5px at 47% 22%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1px 1px at 63% 12%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.5px 1.5px at 81% 26%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 92% 6%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1px 1px at 6% 38%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 72% 40%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(ellipse 55% 30% at 18% 82%, rgba(255, 168, 205, .30), transparent 70%),
    radial-gradient(ellipse 50% 32% at 82% 70%, rgba(140, 185, 255, .30), transparent 70%),
    radial-gradient(ellipse 70% 25% at 50% 100%, rgba(255, 195, 170, .28), transparent 70%),
    radial-gradient(ellipse 45% 25% at 68% 32%, rgba(175, 145, 255, .22), transparent 70%),
    radial-gradient(ellipse 40% 22% at 28% 48%, rgba(120, 160, 255, .16), transparent 70%),
    linear-gradient(to bottom, #07072a 0%, #16144a 30%, #2c2268 58%, #4a3584 82%, #64468f 100%);
}

/* Wolken: zwei Schichten aus weichem Fraktal-Rauschen (SVG), eine große ferne und eine
   nähere. Nach oben hin ausgeblendet, damit der Sternenhimmel frei bleibt. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1600'%20height%3D'900'%3E%3Cfilter%20id%3D'c'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.0035%200.009'%20numOctaves%3D'5'%20seed%3D'11'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%201%200%200%200%200%200.86%200%200%200%200%200.94%201.7%200%200%200%20-0.72'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23c)'%2F%3E%3C%2Fsvg%3E") center bottom / cover no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1600'%20height%3D'900'%3E%3Cfilter%20id%3D'c'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.0018%200.0055'%20numOctaves%3D'5'%20seed%3D'4'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200.82%200%200%200%200%200.86%200%200%200%200%201%201.5%200%200%200%20-0.6'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23c)'%2F%3E%3C%2Fsvg%3E") center / cover no-repeat;
  opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, transparent 5%, rgba(0, 0, 0, .55) 35%, #000 75%);
  mask-image: linear-gradient(to bottom, transparent 5%, rgba(0, 0, 0, .55) 35%, #000 75%);
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

h1, h2, h3, h4, p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

/* Überschriften im Wix-Stil: kursiv, fett */
.display {
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 7, 42, .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #fff;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: none;
  height: 100px;
  padding: 0 40px;
}

/* Startseite: Header liegt transparent über dem Video und wird beim Scrollen farbig */
.home .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  transition: background-color .4s ease;
}
/* nach dem Video halbtransparent mit Weichzeichner, die Seite scheint durch */
.home .site-header.solid {
  background: rgba(1, 1, 39, .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.home.menu-open .site-header { background: rgba(7, 7, 42, .9); }

@media (max-width: 760px) {
  .site-header .wrap { padding: 0 20px; }
}
.logo {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .02em;
}
.nav { display: flex; gap: 6px; }
/* Header-Links: beim Hovern leicht ranzoomen und hellblau eingekreist */
.nav a {
  display: inline-block;
  padding: 6px 16px;
  border: 1.5px solid transparent;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 700;
  transition: color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.nav a:hover {
  transform: scale(1.12);
  border-color: var(--sky-blue);
  box-shadow: 0 0 14px rgba(168, 220, 255, .35);
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--sky-blue); }
/* aktuelle Seite dauerhaft hellblau eingekreist */
.nav a[aria-current="page"] { border-color: var(--sky-blue); }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  margin: 6px 0;
  background: var(--cream);
  transition: transform .3s ease, opacity .3s ease;
}

@media (max-width: 760px) {
  .menu-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 10px 20px 24px;
    background: var(--navy);
    border-bottom: 1px solid var(--cream);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; font-size: 18px; }
  .menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 34px;
  border: 1px solid var(--cream);
  border-radius: 50px;
  background: rgba(7, 7, 42, .45);
  color: var(--cream);
  font-size: 15px;
  text-align: center;
  transition: color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* alle Buttons wie die Header-Links: ranzoomen und hellblau eingekreist */
.btn:hover {
  transform: scale(1.08);
  border-color: var(--sky-blue);
  color: var(--sky-blue);
  box-shadow: 0 0 14px rgba(168, 220, 255, .35);
}

/* ---------- Video-Hintergründe ---------- */
.video-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--navy);
}
.video-bg video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.video-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(1, 1, 39, .35), rgba(1, 1, 39, .75));
}

/* ---------- Startseite: Hero ---------- */
/* Hero ist 125vh hoch: die oberen 100vh sind der sichtbare Bereich, darunter liegt der
   Fade. So sieht man ihn ganz oben fast nicht, erst beim Runterscrollen. */
.hero {
  position: relative;
  min-height: 125vh;
  padding-bottom: 25vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero .wrap {
  position: relative;
  z-index: 1;
  max-width: none;
  padding: 80px 40px 100px;
}

/* Schlagschatten für Name und Untertitel über dem Video */
.hero h1,
.hero .subtitle { text-shadow: 4px 4px 0 rgba(0, 0, 0, .55), 0 6px 24px rgba(0, 0, 0, .45); }
.hero h1 {
  font-size: clamp(32px, 10vw, 135px);
  line-height: .9;
  white-space: nowrap;
  /* hellblaue Outline um die Buchstaben, außen gezeichnet, mit leichtem Leuchten */
  -webkit-text-stroke: 2px var(--sky-blue);
  paint-order: stroke fill;
  text-shadow:
    0 0 8px rgba(168, 220, 255, .4),
    0 0 22px rgba(168, 220, 255, .2),
    4px 4px 0 rgba(0, 0, 0, .55),
    0 6px 24px rgba(0, 0, 0, .45);
}
/* Hero-Video: die vier Projektvideos liegen übereinander und blenden ineinander über */
.hero-reel video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-reel video.active { opacity: 1; }

/* Weicher Übergang vom Video nach unten in die Seitenfarbe */
.hero .video-bg::after {
  background: linear-gradient(to bottom,
    rgba(1, 1, 39, .35) 0%,
    rgba(1, 1, 39, .35) 100%);
}
.hero .video-bg {
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

@media (max-width: 760px) {
  .hero .wrap { padding: 80px 20px 100px; }
}
/* Untertitel in einer Blase wie die anderen */
.hero .subtitle {
  display: inline-block;
  margin-top: 32px;
  padding: 12px 40px;
  border: 1px solid var(--cream);
  border-radius: 50px;
  background: rgba(7, 7, 42, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: clamp(22px, 3.8vw, 40px);
}
@media (max-width: 640px) {
  .hero .subtitle { padding: 10px 24px; }
}
.scroll-down {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(25vh + 32px);
  width: 36px;
  height: 20px;
  margin-left: -18px;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(8px); } }

/* ---------- Startseite: Projekte ---------- */
.section-title {
  font-size: clamp(34px, 6vw, 50px);
  padding: 80px 40px 40px;
}
.project-row {
  display: grid;
  grid-template-columns: 90px 1fr minmax(0, 1.1fr);
  gap: 40px;
  /* Textkasten und Bild gleich hoch, oben und unten bündig */
  align-items: stretch;
  min-height: 380px;
  padding: 60px 40px;
  border-top: 1px solid var(--cream);
}
/* Nummer ganz links oben, Genre senkrecht in der Mitte des Reiters */
.project-meta {
  position: relative;
  align-self: stretch;
}
.project-meta .num { font-size: 50px; line-height: 1; }
.project-meta .genre {
  position: absolute;
  top: 50%;
  left: 6px;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .12em;
  white-space: nowrap;
}
/* Bild füllt die volle Höhe des Reiters (mindestens 16:9), damit es mit dem Kasten
   abschließt */
.project-img {
  display: block;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
}
/* Beschreibung im Rahmen. Inhalt immer gleich angeordnet: Titel, Rolle und Beschreibung
   oben, der Button unten an der Kante, egal wie viel Text drinsteht */
.project-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 50px;
  padding: 40px 44px;
  border: 1px solid var(--cream);
  border-radius: 18px;
}
.project-info .btn { margin-top: auto; }
.project-img img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .6s ease;
}
.project-img:hover img { transform: scale(1.03); }

/* Beim Hovern über das Projektbild: die vier Infos der Projektseite als kleine Blasen
   am unteren Bildrand. Auf Touch-Geräten ohne Hover sind sie immer sichtbar. */
.project-img { position: relative; }
.img-facts {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.project-img:hover .img-facts,
.project-img:focus-visible .img-facts { opacity: 1; transform: none; }
.img-facts > div {
  padding: 8px 10px;
  border: 1px solid var(--cream);
  border-radius: 20px;
  background: rgba(7, 7, 42, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
}
.img-facts span {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
}
@media (hover: none) {
  .img-facts { opacity: 1; transform: none; }
}

/* Roter Warnstreifen „AI Generated“ */
.ai-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid #ff8080;
  border-radius: 14px;
  background: rgba(190, 25, 40, .85);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ai-warning svg { width: 18px; height: 18px; flex: none; }
/* im Projektkasten auf der Startseite: über die volle Kastenbreite oben */
.ai-warning.ai-tab { align-self: stretch; margin-bottom: 22px; }
/* beim Hovern oben im Bild, wie die Info-Blasen unten */
.ai-warning.img-warning {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.project-img:hover .img-warning,
.project-img:focus-visible .img-warning { opacity: 1; transform: none; }
@media (hover: none) {
  .ai-warning.img-warning { opacity: 1; transform: none; }
}
/* auf der Projektseite ganz oben über die volle Breite */
.ai-warning.ai-banner {
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 12px 20px;
  font-size: 15px;
}

/* Box „Game Concept Document“ mit Text und Download-Button */
.concept-block .btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 26px auto 0;
}
@media (max-width: 640px) {
  .img-facts { grid-template-columns: repeat(2, 1fr); left: 10px; right: 10px; bottom: 10px; }
}
.project-info .title { font-size: clamp(30px, 5vw, 50px); }
/* Zusatz in Klammern hinter dem Projektnamen, bleibt zusammen in einer Zeile */
.project-info .title-note,
.project-head .title-note { white-space: nowrap; }
.project-info .tags { margin-top: 10px; font-size: 20px; }
.project-info .desc { margin: 52px 0 32px; max-width: 560px; font-size: 18px; line-height: 1.65; }
.project-info .credit { margin-top: 10px; font-size: 20px; }

@media (max-width: 900px) {
  .project-row { grid-template-columns: 60px 1fr; gap: 24px; }
  .project-meta { grid-row: span 2; }
  .project-info { margin-left: 0; padding: 28px 22px; }
  .project-img { grid-column: 2; }
}
@media (max-width: 760px) {
  .section-title { padding: 60px 20px 30px; }
  .project-row { padding: 50px 20px; }
  .project-meta .num { font-size: 38px; }
  .project-info .tags { font-size: 17px; }
}

/* ---------- Seitenkopf der Unterseiten ---------- */
.page-head { padding: 70px 0 40px; }
.page-head h1 { font-size: clamp(38px, 7vw, 70px); }
.page-head .subtitle { margin-top: 14px; font-size: clamp(18px, 3vw, 30px); }

/* ---------- Portfolio-Übersicht ---------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 30px;
  padding-bottom: 90px;
}
.card { display: block; }
.card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.card:hover .card-img img { transform: scale(1.05); }
.card h2 { margin-top: 16px; font-size: 26px; transition: color .4s ease; }
.card:hover h2 { color: var(--sky-blue); }
.card p { margin-top: 4px; font-size: 14px; letter-spacing: .04em; }

@media (max-width: 640px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ---------- Projektseiten ---------- */
/* Projektkopf: Titel und Fakten volle Breite, getrennt durch weiße Linien */
.project-head {
  padding: 60px 40px 40px;
  border-bottom: 1px solid #fff;
}
.project-head h1 { font-size: clamp(38px, 7vw, 70px); }

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 60px;
  padding: 32px 40px;
  border-bottom: 1px solid #fff;
}
.facts dl { margin: 0; }
.facts dt {
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
}
.facts dd { margin: 4px 0 0; font-size: 17px; }
.facts dd + dt { margin-top: 28px; }
/* Tasks/Role und Description in einer Blase wie die Punkte rechts */
/* mittig zwischen linkem Seitenrand und Mittelstrich: das -40px gleicht den
   Seitenabstand der .facts aus, sodass von 0 bis zum Strich zentriert wird */
.facts .main {
  align-self: stretch;
  justify-self: center;
  max-width: min(800px, calc(100% - 60px));
  margin-left: -40px;
  padding: 30px 36px;
  border: 1px solid var(--cream);
  border-radius: 32px;
  background: rgba(7, 7, 42, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* linke Spalte größer */
.facts .main dt { font-size: 22px; }
.facts .main dd { font-size: 21px; line-height: 1.6; }
.facts .main dd + dt { margin-top: 34px; }
/* Year, Genre, Platform, Engine: zwei oben, zwei darunter, jeder Punkt in einer
   eigenen Blase wie die Teammitglieder */
/* die vier Blasen füllen zusammen genau die Höhe der linken Blase: oben und unten bündig */
.facts .side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-self: stretch;
  gap: 16px;
  padding: 0 0 0 60px;
  border-left: 1px solid #fff;
}
.facts .side dt { font-size: 22px; }
.facts .side dd { font-size: 21px; line-height: 1.5; }
.facts .side > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
  border: 1px solid var(--cream);
  border-radius: 32px;
  background: rgba(7, 7, 42, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
}

@media (max-width: 760px) {
  .project-head { padding: 40px 20px 30px; }
  .facts { grid-template-columns: 1fr; padding: 30px 20px; }
  .facts .main { justify-self: stretch; max-width: none; margin-left: 0; padding: 24px 22px; }
  .facts .side {
    margin-top: 30px;
    padding: 30px 0 0;
    border-left: 0;
    border-top: 1px solid #fff;
  }
}

/* Galerie-Slideshow */
.gallery { padding-bottom: 70px; }
.gallery-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
/* nur Bilder/Videos stapeln und ausblenden, nicht die Pfeile */
.gallery-stage > img,
.gallery-stage > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.gallery-stage > .active { opacity: 1; visibility: visible; }
.gallery-stage img { cursor: zoom-in; }
.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border: 1px solid var(--cream);
  border-radius: 50%;
  background: rgba(1, 1, 39, .6);
  color: var(--cream);
  font-size: 20px;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.gallery-arrow:hover {
  transform: scale(1.12);
  border-color: var(--sky-blue);
  color: var(--sky-blue);
  box-shadow: 0 0 14px rgba(168, 220, 255, .35);
}
.gallery-arrow.prev { left: 14px; }
.gallery-arrow.next { right: 14px; }
.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.gallery-thumbs button {
  flex: 0 0 auto;
  position: relative;
  width: 96px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid transparent;
  background: #000 center / cover no-repeat;
  opacity: .5;
  cursor: pointer;
  transition: opacity .3s ease, border-color .3s ease;
}
.gallery-thumbs button:hover { opacity: .85; }
.gallery-thumbs button.active { opacity: 1; border-color: var(--sky-blue); }
.gallery-thumbs button.is-video::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--cream);
  font-size: 18px;
  background: rgba(1, 1, 39, .35);
}

/* Fließtext-Abschnitte */
/* Projektvideo allein oben, so breit wie die Kästen darunter */
.project-video { padding: 0 40px 70px; }
.project-video video {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 18px;
  background: #000;
}

/* Video-Umschalter (The Dream: Showreel und Trailer) */
.project-video .gallery-stage {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 18px;
}
.project-video .gallery-stage video { max-width: none; border-radius: 0; }
/* Pfeile mittig an den Seiten, aber über der Steuerleiste des Videos */
.project-video .gallery-arrow { margin-top: -40px; }

/* Bilder unter der Contributions-Überschrift, immer zwei nebeneinander */
.media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto 30px;
}
.media-grid img,
.media-grid video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  background: #000;
}
.media-grid img { cursor: zoom-in; }
.media-grid figure { margin: 0; }
/* Zwischenüberschrift im Bilder-Raster, mit Trennstrich darüber, über beide Spalten */
.media-grid .media-heading {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid #fff;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  font-style: italic;
  text-align: center;
}
.media-grid figcaption {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 640px) {
  .project-video { padding: 0 20px 50px; }
  .media-grid { gap: 12px; }
}

/* My Contributions / Background: Titel mittig, Text im gleichen Kasten wie beim Team */
.text-block { padding: 0 40px 70px; }
.text-block h2 { font-size: clamp(30px, 5vw, 50px); margin-bottom: 36px; text-align: center; }
.text-box {
  max-width: 1100px;
  margin: 0 auto;
  padding: 44px 48px;
  border: 1px solid var(--cream);
  border-radius: 18px;
  background: rgba(7, 7, 42, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.text-box p { margin-bottom: 16px; font-size: 18px; line-height: 1.7; }
.text-box p:last-child { margin-bottom: 0; }
/* What I Learned: Liste mit fettem Begriff vorne */
.learned-list { margin: 0; padding-left: 22px; }
.learned-list li { margin-bottom: 14px; font-size: 18px; line-height: 1.7; }
.learned-list li:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .text-block { padding: 0 20px 60px; }
  .text-box { padding: 28px 22px; }
}

.showreel { padding-bottom: 80px; }
.showreel h2 { font-size: clamp(30px, 5vw, 50px); margin-bottom: 24px; }
.showreel video { width: 100%; background: #000; }

/* Team: Bereich genauso breit wie der Contributions-Kasten, jedes Mitglied in einer eigenen Blase. Raster mit 6 Spalten:
   oben drei Mitglieder (je 2 Spalten), unten zwei, versetzt in die Lücken zwischen
   den oberen. Jedes Mitglied belegt zwei Rasterzeilen (Name, Rollen), die per subgrid
   in einer Reihe gleich hoch sind, damit Namen und Rollen bündig stehen. */
.team { padding: 0 0 70px; }
.team .wrap { max-width: none; padding: 0 40px; }
.team h2 { font-size: clamp(30px, 5vw, 50px); margin-bottom: 36px; text-align: center; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.team-grid > div {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  padding: 26px 22px;
  border: 1px solid var(--cream);
  border-radius: 32px;
  background: rgba(7, 7, 42, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.team-grid > div:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.team-grid > div:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 3; }
.team-grid > div:nth-child(3) { grid-column: 5 / 7; grid-row: 1 / 3; }
.team-grid > div:nth-child(4) { grid-column: 2 / 4; grid-row: 3 / 5; margin-top: 20px; }
.team-grid > div:nth-child(5) { grid-column: 4 / 6; grid-row: 3 / 5; margin-top: 20px; }
@media (max-width: 760px) {
  .team-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    row-gap: 16px;
  }
  .team-grid > div:nth-child(n) { grid-column: auto; grid-row: auto / span 2; margin-top: 0; }
  .team-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .team .wrap { padding: 0 20px; }
}

/* Alle Textkästen: halbtransparent dunkel mit Weichzeichner, damit der Text vor dem
   Himmel gut lesbar ist */
.project-info,
.about > div:first-child {
  background: rgba(7, 7, 42, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* alle Teammitglieder gleich breit nebeneinander, Rollen darunter */
/* Trennstrich unter jedem Namen; durch das subgrid liegt er in einer Reihe überall
   auf derselben Höhe */
.team-grid h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(246, 243, 237, .6);
}
.team-grid p { font-size: 18px; line-height: 1.55; }

/* bündig mit den Kästen: gleiche Maximalbreite (1100px) und gleicher Seitenabstand */
.pager.wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: calc(1100px + 80px);
  padding: 50px 40px;
}
@media (max-width: 640px) {
  .pager.wrap { padding: 40px 20px; }
}

/* ---------- About Me ---------- */
.project-head .subtitle { margin-top: 14px; font-size: clamp(18px, 3vw, 30px); }

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 60px 40px 80px;
}
/* Überschrift ABOUT ME mittig im Trennstrich: Linie – Text – Linie */
#about .section-title {
  display: flex;
  align-items: center;
  gap: 32px;
}
#about .section-title::before,
#about .section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #fff;
}
/* ABOUT ME als Blase mitten im Trennstrich */
.title-bubble {
  padding: 12px 40px;
  border: 1px solid var(--cream);
  border-radius: 50px;
  background: rgba(7, 7, 42, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Text und Bild in zwei gleich breiten Hälften; der Text sitzt in einem Rahmen,
   der zu den abgerundeten Projektbildern passt */
.about > div:first-child {
  margin-left: 40px;
  padding: 56px 60px;
  border: 1px solid var(--cream);
  border-radius: 18px;
}
.about .portrait { margin-right: 40px; }
.about h2 { font-size: clamp(30px, 5vw, 50px); margin-bottom: 20px; }
/* Ausrufezeichen bei „Welcome!“ etwas abrücken, in der Kursivschrift klebt es sonst am e */
.about h2 .bang { margin-left: .1em; }
.about p { margin-bottom: 14px; font-size: 19px; line-height: 1.75; }
/* drei gleich breite Buttons über die volle Textbreite */
.about .actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
}
.about .actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}
.btn-icon { width: 18px; height: 18px; flex: none; }
.pager .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 520px) {
  .about .actions { grid-template-columns: 1fr; }
}
/* rundes Profilbild am rechten Rand */
.portrait {
  justify-self: center;
  width: 100%;
  max-width: 580px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 8px rgba(246, 243, 237, .12), 0 10px 40px rgba(0, 0, 0, .35);
  background: #11113a;
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait .fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 90px;
  color: var(--rose);
}

/* Contact-Me-Button mit Auswahl des Mailprogramms */
.mail-picker { position: relative; }
.mail-picker > .btn { font: inherit; font-size: 15px; cursor: pointer; }
.mail-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: 8px;
  border: 1px solid var(--cream);
  border-radius: 16px;
  background: rgba(7, 7, 42, .85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.mail-menu[hidden] { display: none; }
.mail-menu .mail-address {
  margin: 4px 12px 8px;
  font-size: 13px;
  opacity: .7;
}
.mail-menu a,
.mail-menu button {
  padding: 10px 12px;
  border: 1.5px solid transparent;
  border-radius: 50px;
  background: none;
  color: var(--cream);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transform-origin: left center;
  transition: color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.mail-menu a:hover,
.mail-menu button:hover {
  transform: scale(1.04);
  border-color: var(--sky-blue);
  color: var(--sky-blue);
  box-shadow: 0 0 14px rgba(168, 220, 255, .35);
}

@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; padding: 40px 20px 60px; }
  .about > div:first-child { margin-left: 0; padding: 28px 22px; }
  .about .portrait { margin-right: 0; }
  .portrait { justify-self: center; max-width: 320px; }
}

/* ---------- Rechtstexte ---------- */
main { flex: 1; }

/* kleiner Zurück-Button oben links */
.back-link { padding: 30px 40px 0; }
.back-link .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  font-size: 14px;
}
.back-link .btn-icon { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .back-link { padding: 20px 20px 0; }
}

/* Imprint / Privacy Policy: Überschrift und Text mittig, etwas größere Schrift */
.page-head,
.legal { text-align: center; }
.legal { padding-bottom: 90px; }
.legal p { margin: 0 auto 18px; max-width: 700px; font-size: 19px; line-height: 1.7; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--sky-blue); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--cream); }
/* Links unten: Imprint/Data Protection und Copyright; rechts unten: UP */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 40px 30px;
  font-size: 13px;
}
/* Imprint, Data Protection und Copyright in einer Zeile */
.footer-bottom > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
.footer-bottom .links { display: flex; gap: 24px; }
.footer-bottom .copy { opacity: .8; }
.footer-bottom a {
  padding: 4px 12px;
  margin: 0 -12px;
  border: 1.5px solid transparent;
  border-radius: 50px;
  transition: color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.footer-bottom a:hover {
  transform: scale(1.1);
  border-color: var(--sky-blue);
  color: var(--sky-blue);
  box-shadow: 0 0 14px rgba(168, 220, 255, .35);
}
.footer-bottom .up {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: .08em;
}
.footer-bottom .up svg { width: 12px; height: 14px; }

@media (max-width: 640px) {
  .footer-bottom { padding: 24px 20px 30px; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px 100px;
  background: rgba(1, 1, 39, .95);
  cursor: zoom-out;
}
/* Pfeile zum Blättern, gleicher Stil und Hover wie die übrigen runden Buttons */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  border: 1.5px solid var(--cream);
  border-radius: 50%;
  background: rgba(7, 7, 42, .6);
  color: var(--cream);
  font-size: 24px;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.lightbox-arrow:hover {
  transform: scale(1.12);
  border-color: var(--sky-blue);
  color: var(--sky-blue);
  box-shadow: 0 0 14px rgba(168, 220, 255, .35);
}
.lightbox-arrow.prev { left: 24px; }
.lightbox-arrow.next { right: 24px; }
.lightbox.single .lightbox-arrow { display: none; }
@media (max-width: 640px) {
  .lightbox { padding: 20px 12px; }
  .lightbox-arrow { top: auto; bottom: 20px; margin-top: 0; }
}
.lightbox.open { display: flex; }
.lightbox img { max-height: 100%; object-fit: contain; }
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: 0;
  color: var(--cream);
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}