* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #050505;
  color: #f4f4f4;
  overflow-x: hidden;
}

/* Cursor Glow */

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  pointer-events: none;
  z-index: 5;

  background: radial-gradient(
    circle,
    rgba(255, 47, 125, 0.12),
    rgba(255, 47, 125, 0.04) 35%,
    transparent 70%
  );

  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Intro Animation */

.loader {
  position: fixed;
  inset: 0;
  z-index: 999;

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

  background: #050505;

  animation: loaderSlide 0.75s cubic-bezier(0.8, 0, 0.2, 1) forwards;
  animation-delay: 0.9s;
}

.loader-text {
  color: #ff2f7d;
  font-size: clamp(56px, 12vw, 180px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.1em;

  animation: loaderText 0.9s cubic-bezier(0.2, 1, 0.2, 1) forwards;
}

@keyframes loaderText {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.85) rotate(-2deg);
  }

  45% {
    opacity: 1;
    transform: translateY(0) scale(1.06) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes loaderSlide {
  to {
    transform: translateY(-100%);
  }
}

/* Header */

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  width: 100%;
  padding: 24px 36px;

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

  mix-blend-mode: difference;
}

.logo {
  color: #ffffff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

nav {
  display: flex;
  gap: 24px;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

/* Home Hero */

.hero {
  min-height: 55vh;
  padding: 120px 36px 60px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.label {
  margin-bottom: 20px;

  color: #ff2f7d;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  max-width: 980px;

  font-size: clamp(56px, 10vw, 150px);
  line-height: 0.88;
  letter-spacing: -0.06em;
}

.hero .label,
.hero h1 {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeIn 0.9s ease forwards;
}

.hero .label {
  animation-delay: 1.05s;
}

.hero h1 {
  animation-delay: 1.15s;
}

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Home Gallery */

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
  padding: 36px;
}

.card {
  position: relative;
  grid-column: span 5;
  min-height: 520px;

  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;

  background: #111111;
  border: 2px solid #222222;
  border-radius: 24px;
  overflow: hidden;

  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.card-large {
  grid-column: span 7;
  min-height: 720px;
}

.card-wide {
  grid-column: span 7;
  min-height: 800px;
}

.card:hover {
  transform: translateY(-8px);
  border-color: #ff2f7d;
  background: #181818;
  box-shadow: 0 0 40px rgba(255, 47, 125, 0.25);
}

.card:hover img {
  transform: scale(1.06);
  filter: contrast(1.25) saturate(1.25);
}

.card span {
  position: absolute;
  left: 16px;
  bottom: 0;
  z-index: 2;

  color: #ffffff;
  font-size: 70px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.08em;

  transition: color 0.25s ease, transform 0.25s ease;
}

.card:hover span {
  color: #ff2f7d;
  transform: translateX(8px);
}

/* Important image/video fix
   These rules prevent the black empty border below images.
   Images are stretched to cover the full card/box area. */

.card img,
.project-image img,
.detail-image img,
.vitra-main-image img,
.vitra-small-image img,
.running-main-image img,
.running-small-image img,
.time-main-image img,
.time-small-image img,
.knight-small-image img,
.bugz-video-box video,
.sfc-image img,
.seealpsee-small-image img,
.luana-small-image img,
.mattenalpsee-small-image img,
.saas-fee-main-image img,
.saas-fee-small-image img,
.sonja-main-image img,
.sonja-small-image img,
.hurghada-small-image img,
.victor-main-image img,
.victor-small-image img,
.manu-main-image img,
.manu-small-image img,
.burger-image img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
}

.video-box video,
.knight-video-box video,
.seealpsee-video-box video,
.luana-video-box video,
.mattenalpsee-video-box video,
.hurghada-video-box video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
}

.card img {
  filter: contrast(1.1) saturate(1.15);
  transition: transform 0.5s ease, filter 0.5s ease;
}

/* About */

.about {
  margin: 36px;
  padding: 100px 36px;

  background: #111111;
  border: 2px solid #222222;
  border-radius: 36px;
}

.about-inner {
  max-width: 980px;
}

.about h2 {
  margin-bottom: 28px;

  color: #ffffff;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.07em;
}

.about p:not(.label) {
  max-width: 760px;

  color: #d0d0d0;
  font-size: 22px;
  line-height: 1.45;
}

/* Contact */

.contact {
  margin: 36px;
  padding: 120px 36px 160px;

  background: #ff2f7d;
  color: #050505;
  border-radius: 36px;
}

.contact h2 {
  margin-bottom: 28px;

  font-size: clamp(42px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.button-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.button {
  display: inline-block;
  padding: 18px 28px;

  border: 2px solid #050505;
  border-radius: 999px;

  color: #050505;
  text-decoration: none;
  font-weight: 700;

  transition: 0.2s ease;
}

.button:hover {
  background: #050505;
  color: #ff2f7d;
}

/* Year Overview Pages */

.project-page,
.project-detail {
  padding: 36px;
}

.project-hero,
.project-detail-hero {
  min-height: 55vh;
  padding: 120px 0 60px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.project-hero h1,
.project-detail-hero h1 {
  max-width: 1100px;

  font-size: clamp(56px, 10vw, 150px);
  line-height: 0.88;
  letter-spacing: -0.06em;
}

.project-detail-hero h1 {
  font-size: clamp(72px, 14vw, 220px);
  line-height: 0.82;
}

.single-line-title {
  white-space: nowrap;
  font-size: clamp(64px, 12vw, 180px);
  letter-spacing: -0.04em;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
}

.project-image {
  position: relative;
  grid-column: span 6;
  min-height: 520px;

  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;

  background: #111111;
  border: 2px solid #222222;
  border-radius: 24px;
  overflow: hidden;

  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.project-image.large {
  grid-column: span 12;
  min-height: 720px;
}

.project-image:hover {
  transform: translateY(-8px);
  border-color: #ff2f7d;
  box-shadow: 0 0 40px rgba(255, 47, 125, 0.2);
}

/* Nur für 2019–2023 */

.gallery-2019-2023 .project-image {
  min-height: 900px;
}

.gallery-2019-2023 .project-image img {
  object-fit: cover;
  object-position: center top;
}

.project-title {
  position: absolute;
  left: 24px;
  bottom: 12px;
  z-index: 2;

  color: #ffffff;
  font-size: 70px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.08em;

  transition: color 0.25s ease, transform 0.25s ease;
}

.project-image:hover .project-title {
  color: #ff2f7d;
  transform: translateX(8px);
}

.placeholder {
  width: 100%;
  min-height: inherit;

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

  color: #666666;
  font-size: 22px;
  font-weight: 700;
}

/* Project Detail Pages */

.back-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 48px;

  color: #8a8a8a;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  transition: color 0.2s ease, transform 0.2s ease;
}

.back-link:hover {
  color: #ff2f7d;
  transform: translateX(-4px);
}

.project-intro {
  max-width: 720px;
  margin-top: 32px;

  color: #cfcfcf;
  font-size: 22px;
  line-height: 1.45;
}

.project-text-block {
  margin: 24px 0 120px;
  padding: 48px;
  max-width: 900px;

  background: #111111;
  border: 2px solid #222222;
  border-radius: 24px;
}

.project-text-block p:not(.label) {
  color: #cfcfcf;
  font-size: 22px;
  line-height: 1.45;
}

/* Gallery grids */

.detail-gallery,
.vitra-gallery,
.running-gallery,
.time-gallery,
.bugz-gallery,
.sfc-gallery,
.seealpsee-gallery,
.luana-gallery,
.mattenalpsee-gallery,
.saas-fee-gallery,
.sonja-gallery,
.hurghada-gallery,
.victor-gallery,
.manu-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
  padding-bottom: 24px;
}

.knight-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  padding-bottom: 24px;
}

/* Shared box styles */

.detail-image,
.video-box,
.vitra-main-image,
.vitra-small-image,
.running-main-image,
.running-small-image,
.time-main-image,
.time-small-image,
.knight-video-box,
.knight-small-image,
.bugz-video-box,
.sfc-image,
.seealpsee-video-box,
.seealpsee-small-image,
.luana-video-box,
.luana-small-image,
.mattenalpsee-video-box,
.mattenalpsee-small-image,
.saas-fee-main-image,
.saas-fee-small-image,
.sonja-main-image,
.sonja-small-image,
.hurghada-video-box,
.hurghada-small-image,
.victor-main-image,
.victor-small-image,
.manu-main-image,
.manu-small-image,
.burger-image {
  position: relative;

  background: #111111;
  border: 2px solid #222222;
  overflow: hidden;
}

/* Island */

.video-box {
  grid-column: span 12;
  min-height: 680px;
  margin-bottom: 28px;
  border-radius: 24px;
}

.detail-image {
  grid-column: span 3;
  min-height: 300px;
  border-radius: 20px;
}

/* Vitra / Running / Saas Fee / Victor / Manu */

.vitra-main-image,
.running-main-image,
.saas-fee-main-image,
.victor-main-image,
.manu-main-image {
  grid-column: span 12;
  min-height: 720px;
  border-radius: 24px;
}

.vitra-small-image,
.running-small-image,
.saas-fee-small-image,
.victor-small-image,
.manu-small-image {
  grid-column: span 4;
  min-height: 320px;
  border-radius: 20px;
}

/* Time */

.time-main-image {
  grid-column: span 12;
  min-height: 720px;
  border-radius: 24px;
}

.time-small-image {
  grid-column: span 6;
  min-height: 380px;
  border-radius: 20px;
}

/* Knight Rider */

.knight-video-box {
  grid-column: 1 / -1;
  min-height: 680px;
  border-radius: 24px;
}

.knight-small-image {
  min-height: 260px;
  border-radius: 20px;
}

/* Bugz & Fasko */

.bugz-video-box {
  grid-column: span 12;
  min-height: 720px;
  border-radius: 24px;
}

/* SFC Gastro overview */

.sfc-gallery {
  grid-template-columns: repeat(2, 1fr);
}

.sfc-image {
  height: 620px;
  border-radius: 24px;

  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sfc-image:hover {
  border-color: #ff2f7d;
  box-shadow: 0 0 40px rgba(255, 47, 125, 0.2);
  transform: translateY(-8px);
}

.hover-name {
  position: absolute;
  left: 24px;
  bottom: 18px;
  z-index: 2;

  color: #ffffff;
  font-size: clamp(36px, 5vw, 70px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;

  transition: color 0.25s ease, transform 0.25s ease;
}

.hover-name-box:hover .hover-name {
  color: #ff2f7d;
  transform: translateX(8px);
}

/* Video + 3 small images */

.seealpsee-video-box,
.luana-video-box,
.mattenalpsee-video-box,
.hurghada-video-box {
  grid-column: span 12;
  min-height: 680px;
  border-radius: 24px;
}

.seealpsee-small-image,
.luana-small-image,
.mattenalpsee-small-image,
.hurghada-small-image {
  grid-column: span 4;
  min-height: 320px;
  border-radius: 20px;
}

/* Sonja: image grid only */

.sonja-main-image {
  grid-column: span 12;
  min-height: 720px;
  border-radius: 24px;
}

.sonja-small-image {
  grid-column: span 4;
  min-height: 320px;
  border-radius: 20px;
}

/* Burger legacy */

.burger-image {
  grid-column: span 6;
  min-height: 520px;
  border-radius: 24px;
}

/* Shoot Film With Me Detail Gallery */

.shoot-film-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
  padding-bottom: 24px;
}

.shoot-film-video-box {
  grid-column: span 12;
  min-height: 680px;

  position: relative;
  background: #111111;
  border: 2px solid #222222;
  border-radius: 24px;
  overflow: hidden;
}

.shoot-film-small-image {
  grid-column: span 4;
  min-height: 320px;

  position: relative;
  background: #111111;
  border: 2px solid #222222;
  border-radius: 20px;
  overflow: hidden;
}

.shoot-film-video-box video,
.shoot-film-small-image img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
}

.project-text-block {
  margin: 24px 0 120px;
  padding: 48px;

  max-width: 900px;

  background: #111111;
  border: 2px solid #222222;
  border-radius: 24px;
}

.project-text-block p:not(.label) {
  color: #cfcfcf;
  font-size: 22px;
  line-height: 1.45;
}


/* To Top Button */

.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 100;

  padding: 14px 18px;

  background: #111111;
  border: 2px solid #222222;
  border-radius: 999px;

  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  box-shadow: 0 0 30px rgba(255, 47, 125, 0.18);

  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.to-top:hover {
  transform: translateY(-4px);
  border-color: #ff2f7d;
  color: #ff2f7d;
}


/* Mobile */

@media (max-width: 800px) {
  .header {
    padding: 20px;
  }

  .single-line-title {
    white-space: normal;
  }

  nav {
    gap: 14px;
  }

  nav a {
    font-size: 13px;
  }

  .hero {
    min-height: 45vh;
    padding: 120px 20px 50px;
  }

  .gallery,
  .project-gallery,
  .detail-gallery,
  .vitra-gallery,
  .running-gallery,
  .time-gallery,
  .bugz-gallery,
  .sfc-gallery,
  .seealpsee-gallery,
  .luana-gallery,
  .mattenalpsee-gallery,
  .saas-fee-gallery,
  .sonja-gallery,
  .hurghada-gallery,
  .victor-gallery,
  .shoot-film-gallery
  .manu-gallery,
  .knight-gallery {
    display: block;
    padding: 20px;
  }

  .card,
  .card-large,
  .card-wide,
  .project-image,
  .project-image.large,
  .detail-image,
  .video-box,
  .vitra-main-image,
  .vitra-small-image,
  .running-main-image,
  .running-small-image,
  .time-main-image,
  .time-small-image,
  .knight-video-box,
  .knight-small-image,
  .bugz-video-box,
  .sfc-image,
  .seealpsee-video-box,
  .seealpsee-small-image,
  .luana-video-box,
  .luana-small-image,
  .mattenalpsee-video-box,
  .mattenalpsee-small-image,
  .saas-fee-main-image,
  .saas-fee-small-image,
  .sonja-main-image,
  .sonja-small-image,
  .hurghada-video-box,
  .hurghada-small-image,
  .victor-main-image,
  .victor-small-image,
  .manu-main-image,
  .manu-small-image,
  .shoot-film-small-image
  .shoot-film-video-box
  .burger-image {
    width: 100%;
min-height: unset;
height: auto;
aspect-ratio: 16 / 9;
margin-bottom: 28px;
  }

  .card span,
  .project-title {
    font-size: 56px;
  }

  .about,
  .contact {
    margin: 20px;
    padding: 80px 20px;
  }

  .about p:not(.label),
  .project-intro,
  .project-text-block p:not(.label) {
    font-size: 18px;
  }

  .project-page,
  .project-detail {
    padding: 20px;
  }

  .project-hero,
  .project-detail-hero {
    min-height: 45vh;
    padding: 120px 0 50px;
  }

  .project-text-block {
    margin: 24px 0 80px;
    padding: 28px;
  }

  .button-row {
    gap: 14px;
  }

@media (max-width: 800px) {
  .shoot-film-gallery {
    display: block;
  }

  .shoot-film-video-box,
  .shoot-film-small-image {
    width: 100%;
    min-height: unset;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: 28px;

    position: relative;
    overflow: hidden;
  }

  .shoot-film-video-box video,
  .shoot-film-small-image img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
  }

  .project-text-block {
    margin: 24px 0 80px;
    padding: 28px;
  }

  .project-text-block p:not(.label) {
    font-size: 18px;
  }
}

@media (max-width: 800px) {
  .gallery-2019-2023 .project-image,
  .gallery-2019-2023 .project-image.large {
    width: 100%;
    min-height: unset !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin-bottom: 28px;

    position: relative;
    overflow: hidden;
  }

  .gallery-2019-2023 .project-image img,
  .gallery-2019-2023 .project-image.large img {
    position: relative;
    inset: auto;

    width: 100%;
    height: auto;

    display: block;
    object-fit: contain;
  }
}

@media (max-width: 800px) {
  .project-image,
  .project-image.large,
  .detail-image,
  .detail-large,
  .detail-wide,
  .vitra-main-image,
  .vitra-small-image,
  .running-main-image,
  .running-small-image,
  .time-main-image,
  .time-small-image,
  .seealpsee-small-image,
  .shoot-film-small-image,
  .knight-small-image,
  .bugz-small-image,
  .sfc-image,
  .luana-small-image,
  .mattenalpsee-small-image,
  .saas-fee-main-image,
  .saas-fee-small-image,
  .sonja-main-image,
  .sonja-small-image,
  .hurghada-small-image,
  .victor-main-image,
  .victor-small-image,
  .manu-main-image,
  .manu-small-image,
  .burger-image {
    width: 100%;
    min-height: unset !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin-bottom: 28px;

    position: relative;
    overflow: hidden;
  }

  .project-image img,
  .project-image.large img,
  .detail-image img,
  .detail-large img,
  .detail-wide img,
  .vitra-main-image img,
  .vitra-small-image img,
  .running-main-image img,
  .running-small-image img,
  .time-main-image img,
  .time-small-image img,
  .seealpsee-small-image img,
  .shoot-film-small-image img,
  .knight-small-image img,
  .bugz-small-image img,
  .sfc-image img,
  .luana-small-image img,
  .mattenalpsee-small-image img,
  .saas-fee-main-image img,
  .saas-fee-small-image img,
  .sonja-main-image img,
  .sonja-small-image img,
  .hurghada-small-image img,
  .victor-main-image img,
  .victor-small-image img,
  .manu-main-image img,
  .manu-small-image img,
  .burger-image img {
    position: relative !important;
    inset: auto !important;

    width: 100%;
    height: auto !important;

    display: block;
    object-fit: contain !important;
  }
}
}

  .to-top {
    right: 20px;
    bottom: 20px;
    padding: 12px 14px;
    font-size: 12px;
  }