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

/* =========================================
   Loader
========================================= */

/* LOADER BASIS */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fa7f29;

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

  z-index: 9999;

  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Logo */
.loader-logo {
  width: 80px; /* anpassbar */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInLogo 1s ease forwards;
}

/* Animation */
@keyframes fadeInLogo {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Loader verschwinden */
#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* =========================================
   FONTS
========================================= */
@font-face {
  font-family: "inter";
  src: url("01_fonts/inter-18pt-thin.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter";
  src: url("01_fonts/inter-18pt-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter";
  src: url("01_fonts/inter-18pt-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter";
  src: url("01_fonts/inter-18pt-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter";
  src: url("01_fonts/inter-18pt-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "inter";
  src: url("01_fonts/inter-18pt-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "noto sans";
  src: url("01_fonts/noto-sans-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "noto sans";
  src: url("01_fonts/noto-sans-mono-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "noto sans";
  src: url("01_fonts/noto-sans-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   VARIABLES
========================================= */
:root {
  --color-orange: #FA7F29;
  --color-white: #fff;
  --header-height: 80px;
  --page-padding: 24px;
  --header-padding: 24px;
  --section-spacing: 36px;

  /* Indent-Breite: 1400px bei 1920er-Desktop (= unverändert), skaliert auf
     größeren Screens fließend bis max. 1800px hoch. */
  --indent-max: clamp(1400px, 100vw - 520px, 1800px);
}

/* =========================================
   BASE
========================================= */
html,
body {
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  color: var(--color-orange);
  background: var(--color-white);
  overflow-x: hidden; /* verhindert horizontales Scrollen durch Full-Bleed (war vorher auf main) */
}

/* Bilder proportional skalieren: width/height-Attribute liefern nur das
   Seitenverhältnis (CLS-Reservierung), die tatsächliche Höhe ergibt sich
   automatisch. Spezifischere Regeln (z. B. .project-thumb img) überschreiben. */
img {
  height: auto;
}

/* Nur für Screenreader/SEO sichtbar – visuell ausgeblendet, ohne Layout-Einfluss */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}


/* =========================================
   TYPOGRAPHY
========================================= */
h1 {

  margin-bottom: 0;
  font-family: "inter";
  font-size: 4rem;
  font-weight: 500;
  color: var(--color-orange);
  line-height: 1.3;
  text-transform: uppercase;
}


h2 {
  font-family: "inter";
  font-size: 3rem;
  font-weight: 500;
  color: var(--color-orange);
  line-height: 1.3;
  text-transform: uppercase;
}

.h2-bold {
  font-family: "inter";
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--color-orange);
  line-height: 1.3;
  text-transform: uppercase;
}


h3 {
  font-family: "inter";
  font-size: 2.0rem;
  font-weight: 400;
  color: var(--color-orange);
  line-height: 1.3;
}

.h3-bold {
  font-family: "inter";
  font-size: 2.0rem;
  font-weight: 500;
  color: var(--color-orange);
  line-height: 1.3;
}

p {
  font-family: "inter";
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-orange);
  line-height: 1.6;
}


.p-detail {
  font-family: "noto sans";
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--color-orange);
  text-transform: uppercase;
}

a{
 color:var(--color-orange);
  transition: 0.1s ease-out;
   display: inline-block;
   text-decoration: none;
}

a:hover {
  transform: scale(0.98);
   text-decoration: underline;
   text-decoration-thickness: 3px;
}

/* =========================================
   GOBAL LAYOUT
========================================= */
main {
  flex: 1;
  min-height: 100vh;
  /* Inhalt max. 2100px (+ 2×24px Padding) → bremst die vollbreiten Grids auf großen Screens */
  width: 100%;        /* füllt zuverlässig die Breite (sonst „shrink-to-fit" durch margin:auto im Flex-Body) */
  max-width: 2148px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--header-height) var(--page-padding) 0;
}

section {
  padding-top: var(--section-spacing);
  padding-bottom: var(--section-spacing);
  position:relative;
}

.video-container {
  position: relative; /* Wichtig: Referenz für absolute Elemente */
  width: 100%;
  height: auto;
}

.sound-btn {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 10;
  background: none;
  border: none;
  color: var(--color-orange);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.sound-btn:hover {
  opacity: 0.7;
}

/* Lautsprecher-Linien werden im "Ton an" Zustand ausgeblendet */
.sound-btn.active .sound-line {
  display: none;
}

.main{
  object-fit: cover;
  margin-top: 0px;
  width: 100%;
  display: block;
}

.indent{
  object-fit:fill;
  width: 100%;
  max-width: var(--indent-max);
  display: block;
     margin: 0 auto;
}

/* Safari Edge-Bleed Fix für Logo-Animationen auf hellem Hintergrund.
   Die volldeckende mask-image zwingt WebKit in einen anderen Render-Pfad,
   damit der GPU-Compositor an den Video-Kanten keine 1px schwarze Linie
   interpoliert. In Chrome/Firefox ohne Effekt. */
.logo-anim {
  background-color: #fff;
  -webkit-mask-image: linear-gradient(#000, #000);
}

.full-bleed {
  /* Voll bis zum Rand, aber gedeckelt auf 2100px (wie die Grids), dann zentriert */
  width: min(100vw, 2100px);
  position: relative;
  margin-left: calc(50% - min(50vw, 1050px));

  /* Safari Edge-Bleed Fix (Iteration 2): dünne schwarze Ränder durch den
     WebKit-Video-Compositor verhindern. display:block entfernt die inline
     Baseline-Lücke, background:#fff matcht den hellen Videoinhalt, und die
     volldeckende mask-image zwingt Safari in einen anderen Render-Pfad. */
  display: block;
  background-color: #fff;
  -webkit-mask-image: linear-gradient(#000, #000);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.grid-2-indent {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--indent-max);
   margin: 0 auto;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Sprungziel "Work" (Projektkacheln): Offset für den fixen Header, damit die
   Kacheln beim Scrollen nicht unter dem Header verschwinden. */
#work {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.grid-3-indent {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
    max-width: var(--indent-max);
   margin: 0 auto;
}

.grid-4-indent {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--indent-max);
  margin: 0 auto;
}

/* Bilder/Videos als Grid-Item NICHT auf Reihenhöhe strecken.
   Ohne dies verzerrt Safari/WebKit direkte <img>/<video>-Grid-Items
   (Chromium/Firefox wahren das Seitenverhältnis automatisch). */
.grid-2,
.grid-2-indent,
.grid-3,
.grid-3-indent,
.grid-4-indent {
  align-items: start;
}

.grid-4-broad {
  grid-column: 1 / 4;
}

.grid-4-indent:has(.expand-btn) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.grid-4-indent:has(.expand-btn) > .grid-4-broad {
  grid-column: auto;
}

.grid-3-broad {
  grid-column: 1 / 3;
}

.grid-5-item {
  break-inside: avoid;  /* verhindert, dass Elemente zerschnitten werden */
  margin-bottom: 20px;
  width: 100%;
}




/* =========================================
   HEADER
========================================= */
.site-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: var(--header-height);
  z-index: 100;
  background: var(--color-white);
}

.nav {
  width: 100%;
  padding: 20px var(--page-padding);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.nav-right {
  display: flex;
  gap: 24px;
}

/* CTA-Pointer unter dem "Über mich"-Link (nur Index, per JS getaktet) */
.nav-about-link {
  position: relative;
}

/* Während der Pointer sichtbar ist, pulsiert der Text synchron leicht mit:
   oben (Pointer hoch) minimal größer, unten zurück auf Normalgröße. */
.nav-about-link.cta-pulse {
  display: inline-block;
  animation: nav-about-pulse 1s ease-in-out 3;
}

@keyframes nav-about-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Wrapper: übernimmt Zentrierung + Entrance/Exit-Skalierung.
   Exit (Basis-Zustand): einfaches Kleinerwerden über plain ease. */
.nav-pointer {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  width: 130px;
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
  transition: opacity 0.3s ease, transform 0.35s ease;
  pointer-events: none;
}

/* Entrance: hochskalieren mit leichtem Bounce (Overshoot via easeOutBack). */
.nav-pointer.visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transition: opacity 0.3s ease,
              transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.nav-pointer img {
  display: block;
  width: 100%;
  height: auto;
  /* Orange Outline entlang der Motiv-Silhouette (nutzt den Alpha-Kanal des
     transparenten WebP). Acht gestapelte drop-shadows ohne Blur (Kardinal +
     Diagonal) für eine breitere, gleichmäßige Kante. */
  filter:
    drop-shadow(1.8px 0 0 var(--color-orange))
    drop-shadow(-1.8px 0 0 var(--color-orange))
    drop-shadow(0 1.8px 0 var(--color-orange))
    drop-shadow(0 -1.8px 0 var(--color-orange))
    drop-shadow(1.3px 1.3px 0 var(--color-orange))
    drop-shadow(-1.3px 1.3px 0 var(--color-orange))
    drop-shadow(1.3px -1.3px 0 var(--color-orange))
    drop-shadow(-1.3px -1.3px 0 var(--color-orange));
}

/* Bob läuft auf dem inneren Bild, solange sichtbar — kollidiert dadurch
   nicht mit der Entrance/Exit-Skalierung des Wrappers.
   Genau 3 Durchläufe pro Zyklus, dann verschwindet der Pointer (JS-getaktet). */
.nav-pointer.visible img {
  animation: nav-pointer-bob 1s ease-in-out 3;
}

@keyframes nav-pointer-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.04); }
}


.logo img {
  height: 35px;
  display: block;
  animation: logo-pulse 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes logo-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* =========================================
   FOOTER
========================================= */
.site-footer {
  width: 100%;
  padding: 100px var(--page-padding);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 160px;
  align-items: start;
  justify-content: start;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-bottom {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 48px;
}

/* Erzwungene Zeilenumbrüche, die NUR im Tablet-Bereich greifen
   (Einblendung im 769–1024px-Media-Query). Auf Desktop & Mobile: kein Umbruch. */
.br-tablet {
  display: none;
}




/* =========================================
   Mainpage Intro
========================================= */

.video-trigger {

  cursor: pointer;
  position: relative;

}

.video-trigger:hover {
  cursor: pointer;
}

/* Mobile Showreel Player – auf Desktop unsichtbar */
.showreel-mobile-player {
  display: none;
}

/* Fullscreen: immer letterboxen statt beschneiden (YouTube-Verhalten).
   Hochformat → klein mit Balken, Querformat (Device gedreht) → groß. */
.showreel-mobile-player:fullscreen,
.showreel-mobile-player:-webkit-full-screen {
  object-fit: contain;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  background: #000;
}

.cta-link {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 0.15em;
}

.cta-link:hover {
  text-decoration-thickness: 5px;
}

.cta-arrow {
  display: inline-block;
  margin-right: 0.3em;
  animation: cta-arrow-pulse 1.6s ease-in-out infinite;
}

.cta-arrow-inner {
  display: inline-block;
  transition: transform 0.3s ease;
}

@keyframes cta-arrow-pulse {
  0%, 100% { transform: translateX(0); }
  50%     { transform: translateX(8px); }
}

/* Wenn das Expand-Panel offen ist: Pulse pausieren, innerer Pfeil 90° kippen */
.expand-btn.active .cta-arrow {
  animation: none;
}

.expand-btn.active .cta-arrow-inner {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .cta-arrow,
  .carousel-arrow-icon,
  .logo img { animation: none; }
}

.showreel-cursor {
  position: fixed;
  top: 0;
  left: 0;
  color: var(--color-orange);
  font-family: "inter";
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(12px, 12px);
  transition: opacity 0.15s ease;
  z-index: 9999;
}

.showreel-cursor.active {
  opacity: 1;
}



/* Overlay */

#videoOverlay {
  position: fixed;
  inset: 0;              /* wichtig: echte Fullscreen Fläche */
  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;
  transition: 0.25s ease;

  z-index: 9998;

  background: transparent; /* bleibt clean */
}

#videoOverlay.active {
  opacity: 1;
  visibility: visible;
}

/* Video bleibt zentriert */
#videoOverlay video {
  width: 80vw;
  max-width: 1100px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

/* =========================================
   Mainpage Projects
========================================= */

.project-item {
  display: flex;
  flex-direction: column;
}

.project-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #ccc;
  position: relative;
}

.project-thumb:hover {
  text-decoration: none;
}

.project-thumb-title {
  position: absolute;
  inset: 0;
  background: rgba(250, 127, 41, 1);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "inter";
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
  padding: 0 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.project-thumb:hover .project-thumb-title {
  opacity: 1;
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;


}


.project-meta {
  margin-top: 8px;
  color: var(--color-orange);
  display: flex;
  flex-direction: column;
  gap: 12px;
}




/* =========================================
   ABOUT PAGE Page
========================================= */



/* About intro: 2-Spalten-Grid (Text links, Foto rechts) */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
}

.about-intro-photo {
  width: 100%;
  grid-column: 2;
  grid-row: 1 / 3;
}

.about-intro-text-1 {
  grid-column: 1;
  grid-row: 1;
}

.about-intro-text-2 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 1.2em;
}


/* =========================================
   COLLAGE (About Page) — Ein-Item-Karussell mit Pfeilen
========================================= */
.collage-section {
  padding: 20px var(--page-padding);
  position: relative;
  margin-top: 48px; /* mehr Abstand zur Section darüber (Experience/Tools) */
}

.collage-title {
  position: relative;
  z-index: 1;
  display: inline-block;          /* Box umschließt nur den Text → saubere Rotation um die Mitte */
  font-family: "noto sans";       /* Noto Sans Mono */
  font-weight: 500;               /* Medium – etwas fetter (kräftigster geladener Mono-Schnitt) */
  font-size: 1.8rem;
  text-transform: uppercase;
  transform: rotate(-10deg);      /* leicht nach links gekippt */
  margin: 48px 0 0 80px;          /* oben Luft, kein Abstand nach unten, links eingerückt (Desktop/Tablet) */
}

.carousel {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* Viewport zeigt immer genau ein Item; vertikales Padding gibt den
   leicht gekippten Items Luft, damit Ecken nicht abgeschnitten werden. */
.carousel-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  /* Höhe wird per JS auf das aktive Item gesetzt → kein toter Raum */
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: center; /* Items vertikal zentriert in der konstanten Höhe */
  height: 100%;
}

.carousel-item {
  grid-area: 1 / 1; /* alle Items übereinander gestapelt (kein Quer-Slide) */
  width: 100%;
  margin: 0;
  padding: 32px 0; /* Luft für die leicht gekippten Items */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0; /* nur das aktive Item ist sichtbar */
  transform: translateX(0);
  /* schneller Fade, dezenter seitlicher Drift */
  transition: opacity 0.22s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.carousel-item.is-active {
  opacity: 1;
  pointer-events: auto;
}

.carousel-item img {
  --rot: 0deg;
  --scale: 1; /* per-Item-Größe */
  width: auto;
  max-width: calc(min(70%, 460px) * var(--scale));
  max-height: calc(55vh * var(--scale));
  transform: rotate(var(--rot));
}

/* Charakter pro Item: leichte Kippung + individuelle Größe */
.collage-item-1 img { --rot: -3deg; --scale: 1.15; } /* Jacke etwas größer */
.collage-item-3 img { --rot: 4deg; }                 /* Kamera unverändert */
.collage-item-2 img { --rot: -6deg; --scale: 0.6; }  /* iPod deutlich kleiner */
.collage-item-5 img { --rot: 8deg; --scale: 0.8; }   /* Uhr etwas kleiner */
.collage-item-brille img { --rot: 4deg; --scale: 0.9; }
.collage-item-parfum img { --rot: -5deg; --scale: 0.7; }

.carousel-item .collage-text {
  max-width: 420px;
  margin-top: 24px;
  color: var(--color-orange);
  font-family: "noto sans";
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: center;
}

/* Pfeile + Labels */
.carousel-arrow {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-orange);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  transition: transform 0.15s ease-out;
}

.carousel-arrow:hover {
  transform: scale(1.06);
}

.carousel-arrow-icon {
  font-family: "inter";
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1;
  display: inline-block;
}

/* Subtiler Puls als zusätzlicher "klick mich"-Impuls */
.carousel-next .carousel-arrow-icon { animation: arrow-pulse-right 1.8s ease-in-out infinite; }
.carousel-prev .carousel-arrow-icon { animation: arrow-pulse-left 1.8s ease-in-out infinite; }

@keyframes arrow-pulse-right {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

@keyframes arrow-pulse-left {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}

/* Desktop (>1024px): Karussell-Markup wird zur freien Collage —
   Layout & Verhalten 1:1 aus der v4-Version übernommen. */
@media (min-width: 1025px) {
  .collage-section {
    overflow: hidden; /* schneidet rechts überragende Objekte sauber ab */
  }

  /* Collage-Titel auf Desktop etwas weiter nach rechts (Basis-Einzug = 80px) */
  .collage-title {
    margin-left: 140px;
  }

  /* Der Karussell-Wrapper wird zum festen Collage-Container */
  .carousel {
    display: block;
    position: relative;
    margin: 0 auto;
    width: calc(100% - 2 * var(--page-padding));
    max-width: 1000px;
    aspect-ratio: 3 / 2;
  }

  /* old.webp als Hintergrund der GESAMTEN Collage – eigene Ebene (::before),
     füllt die komplette Bühne hinter allen Objekten. Bild-Seitenverhältnis
     ≈ 3:2 (1920×1281) = Bühne, daher praktisch kein Beschnitt. */
  .carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("06_assets/old.webp");
    background-size: cover;   /* füllt die Bühne ohne Extra-Zoom → ganze Person sichtbar, kein Schnitt oben/unten */
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
  }

  .carousel-arrow {
    display: none;
  }

  .carousel-viewport {
    overflow: visible;
    height: auto !important; /* schlägt evtl. zurückgebliebene JS-Inline-Höhe */
    width: 100%;
    transition: none;
  }

  /* Track wird zur transparenten Bühne über die volle Container-Fläche */
  .carousel-track {
    display: block;
    position: absolute;
    inset: 0;
    height: auto;
  }

  /* Items absolut positioniert, alle Karussell-Defaults zurücksetzen */
  .carousel-item {
    position: absolute;
    display: block;
    padding: 0;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    cursor: pointer;
    text-align: initial;
    transition: none;
  }

  .carousel-item img {
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
    display: block;
    transition: transform 0.3s ease, filter 0.25s ease;
    transform: rotate(var(--rot-desktop));
    /* Outline-Shadows bereits hier (transparent) anlegen, damit Chrome beim
       Hover NUR die Farbe interpoliert (gleiche Filter-Struktur) → kein
       Flackern. Beim Hover werden exakt dieselben Shadows orange. */
    filter:
      drop-shadow(2px 0 0 transparent)
      drop-shadow(-2px 0 0 transparent)
      drop-shadow(0 2px 0 transparent)
      drop-shadow(0 -2px 0 transparent)
      drop-shadow(1.5px 1.5px 0 transparent)
      drop-shadow(-1.5px 1.5px 0 transparent)
      drop-shadow(1.5px -1.5px 0 transparent)
      drop-shadow(-1.5px -1.5px 0 transparent);
  }

  /* Per-Item Positionierung + Rotation (Werte aus v4 übernommen) */
  .collage-item-1 { display: none; top: 10%;  left: -8%; width: 46%; } /* Jacke vorerst raus (Desktop) – display:none entfernen, um sie zurückzuholen */
  .collage-item-1 img { --rot-desktop: -7deg; }

  .collage-item-3 { top: 15%; left: -5%;  width: 34%; }
  .collage-item-3 img { --rot-desktop: -3deg; }

  .collage-item-2 { top: 44%; left: 89%;  width: 19%; }
  .collage-item-2 img { --rot-desktop: 5deg; }

  .collage-item-5 { top: 10%; left: -10%;  width: 10%; }
  .collage-item-5 img { --rot-desktop: -12deg; }

  .collage-item-brille { top: 52%; left: 0%; width: 35%; }
  .collage-item-brille img { --rot-desktop: -41deg; }

  .collage-item-parfum { top: -3%; left: 84%; width: 13%; }
  .collage-item-parfum img { --rot-desktop: -8deg; }

  /* Hover und persistenter Click: Item zoomt leicht, kippt dezent um +3° und
     bekommt eine leichte orange Outline entlang der Silhouette (gestapelte
     drop-shadows nutzen den Alpha-Kanal der freigestellten Objekte – ein
     normales border/outline würde nur ein Rechteck zeichnen). */
  .carousel-item:hover img,
  .carousel-item.active img {
    transform: scale(1.03) rotate(calc(var(--rot-desktop) + 3deg));
    filter:
      drop-shadow(2px 0 0 var(--color-orange))
      drop-shadow(-2px 0 0 var(--color-orange))
      drop-shadow(0 2px 0 var(--color-orange))
      drop-shadow(0 -2px 0 var(--color-orange))
      drop-shadow(1.5px 1.5px 0 var(--color-orange))
      drop-shadow(-1.5px 1.5px 0 var(--color-orange))
      drop-shadow(1.5px -1.5px 0 var(--color-orange))
      drop-shadow(-1.5px -1.5px 0 var(--color-orange));
  }

  /* Caption als Tooltip am Cursor — Position wird per JS via transform gesetzt */
  .carousel-item .collage-text {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-9999px, -9999px); /* initial außerhalb */
    width: max-content;
    max-width: 320px;
    margin-top: 0;
    padding: 8px 12px;
    color: var(--color-orange);
    font-family: "inter";
    font-size: 1rem;
    line-height: 1.4;
    text-align: left;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 9999;
  }

  .carousel-item:hover .collage-text,
  .carousel-item.active .collage-text {
    opacity: 1;
  }
}


/* =========================================
   Project Page
========================================= */

.video-player {
  width: 100%;

  object-fit: contain;
 aspect-ratio: 16 / 9;
  background: black; /* für Letterboxing */
}

.project-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  max-width: 66.6667%;
}

/* =========================================
   HAMBURGER MENU
========================================= */
.hamburger {
  display: none; /* Hidden by default, visible on mobile */
}

.nav-mobile {
  display: none; /* Hidden by default, visible on mobile */
}

/* =========================================
   PROJECT INTRO EXPAND
========================================= */
.expand-btn {
  background: none;
  border: none;
  font-family: "inter";
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--color-orange);
  cursor: pointer;
  padding: 0;
  line-height: 1.3;
  justify-self: end;
  align-self: baseline;
  transition: 0.1s ease-out;
}

.expand-btn:hover {
   transform: scale(0.98);
   text-decoration: underline;
   text-decoration-thickness: 3px;
}



.expand-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.25s ease;
  max-width: var(--indent-max);
  margin-left: auto;
  margin-right: auto;
}

.expand-panel.active {
  max-height: 2000px;
  opacity: 1;
}

.expand-panel-inner {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateY(-20px);
  transition: transform 0.4s ease;
}

.expand-panel.active .expand-panel-inner {
  transform: translateY(0);
}

.project-meta .p-detail {
  margin: 0;
}

/* =========================================
   RESPONSIVE
========================================= */

/* Tablet: ≤ 1024px */
@media (max-width: 1024px) {
  :root {
    --section-spacing: 24px;
    --page-padding: 20px;
  }

  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
  .h2-bold { font-size: 2rem; }
  h3, .h3-bold { font-size: 1.6rem; }
  .expand-btn { font-size: 1.75rem; }
  p { font-size: 1.35rem; }
  .project-thumb-title { font-size: 1.3rem; }

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

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

  .grid-4-broad,
  .grid-3-broad { grid-column: 1 / -1; }

  .site-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px;
    padding: 80px var(--page-padding);
  }

  /* Showreel: Desktop-Trigger ausblenden, Touch-Player einblenden */
  .video-trigger {
    display: none;
  }
  .showreel-mobile-player {
    display: block;
  }

  /* Karussell (Tablet + Mobile): Pfeile unter dem Bild, Viewport full-bleed –
     so hat die driftende Animation genug Rand und schneidet nicht an der Kante ab. */
  .carousel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "view view"
      "prev next";
    gap: 8px 16px;
    align-items: start;
  }

  .carousel-viewport {
    grid-area: view;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .carousel-prev { grid-area: prev; justify-self: start; }
  .carousel-next { grid-area: next; justify-self: end; }

  .carousel-arrow-icon { font-size: 2.25rem; }
  .carousel-item img { max-width: calc(min(78%, 380px) * var(--scale)); }
  .carousel-item .collage-text { font-size: 1rem; }
}

/* Mobile: ≤ 768px */
@media (max-width: 768px) {
  :root {
    --section-spacing: 16px;
    --page-padding: 16px;
  }

  h1 { font-size: 2.25rem; margin-bottom: 48px; }
  h2 { font-size: 1.75rem; }
  .h2-bold { font-size: 1.5rem; }
  h3, .h3-bold { font-size: 1.3rem; }
  .expand-btn { font-size: 1.4rem; }
  p { font-size: 1.1rem; }
  .project-thumb-title { font-size: 1.15rem; }

  .project-info { max-width: none; }

  .cta-link,
  .cta-link:hover { text-decoration-thickness: 2px; }

  .about-intro {
    display: flex;
    flex-direction: column;
  }

  .about-intro-text-1 { order: 1; }

  .about-intro-photo {
    order: 2;
    float: none;
    width: 100%;
    margin: 24px 0;
  }

  .about-intro-text-2 {
    order: 3;
    margin-top: 0;
  }

  .grid-2,
  .grid-2-indent,
  .grid-3,
  .grid-3-indent { grid-template-columns: minmax(0, 1fr); }

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

  /* Karussell auf Mobile: kleinere Bilder/Pfeile (Layout kommt aus ≤1024px) */
  .collage-title { margin-left: 0; font-size: 0.9rem; } /* Rechts-Einrückung nur Desktop/Tablet; auf Mobile kleiner, damit die Mono-Zeile in den Viewport passt */
  .carousel-item { padding: 16px 0; }
  .carousel-item img { max-width: calc(68% * var(--scale)); max-height: calc(42vh * var(--scale)); }
  .carousel-item .collage-text { max-width: 300px; }

  .carousel-arrow-icon { font-size: 2rem; }
  .carousel-arrow-label { font-size: 0.95rem; }

  .site-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
    padding: 60px var(--page-padding);
  }

  /* Projekttitel + Mehr-Infos-Button: auf Mobile untereinander stapeln */
  .grid-4-indent:has(.expand-btn) {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Mehr-Infos-Button: kein interner Zeilenumbruch */
  .expand-btn {
    white-space: nowrap;
  }

  /* Sound Button: kleiner und enger an der Ecke */
  .sound-btn {
    bottom: 8px;
    left: 8px;
    padding: 4px;
  }

  .sound-btn svg {
    width: 20px;
    height: 20px;
  }

  /* Hamburger Button */
  .hamburger {
    display: block;
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    cursor: pointer;
    padding: 0;
    z-index: 10;
  }

  .hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-orange);
    margin: 5px 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }

  /* Mobile Navigation */
  .nav-right {
    display: none;
  }

  .nav-mobile {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.25s ease;
    z-index: 9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .nav-mobile.active {
    max-height: 500px;
    opacity: 1;
  }

  .nav-mobile a {
    padding: 16px 24px;
    font-family: "inter";
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-orange);
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
  }

  .nav-mobile a:last-child {
    border-bottom: none;
  }

  .nav-mobile a:hover {
    background-color: #fafafa;
  }
}

/* =========================================
   Tablet — leichter Seiten-Indent auf allen Seiten
========================================= */
@media (min-width: 769px) and (max-width: 1024px) {
  main {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  /* Index-Seite behält auf Tablet den normalen Seitenabstand (kein Indent) */
  .home main {
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
  }

  /* CTA-Pointer auf Tablet deutlich kleiner */
  .nav-pointer {
    width: 70px;
  }

  /* Footer-„About": erzwungene Umbrüche nur auf Tablet sichtbar machen */
  .br-tablet {
    display: inline;
  }
}