/* ============================================================
   site.css — eigene Anpassungen (nach dem Webflow-CSS geladen)
   ============================================================ */

/* ---------- 0) Browser-Overlays (Kamera/PiP-Symbole) unterdrücken ----------
   Chrome & Co. blenden auf gehoverten <video>-Elementen eigene Buttons ein.
   Ohne Hover-/Klick-Ziel gibt es keine Overlays; Klicks fangen die Wrapper. */
video { pointer-events: none; }

/* Bilder tragen explizite width/height-Attribute (Seitenverhältnis vor dem
   Laden bekannt → kein Safari-Grid-Chaos). Die Höhe skaliert trotzdem mit:
   :where() hält die Spezifität bei null, Klassen-Regeln gewinnen weiter. */
img:where([width][height]) { height: auto; }

/* ---------- 1) Cookie-Banner: clean, ohne Hintergrundbild ---------- */
.fs-cc-banner2_component {
  background-image: none;
  background-color: #fff;
  color: #111;
  width: 24rem;
  max-width: calc(100vw - 3rem);
  height: auto;
  border: 1px solid #111;
  padding: 1.2rem 1.4rem 1.3rem;
  box-shadow: 8px 8px 0 rgba(17, 17, 17, .07);
}

.fs-cc-banner2_container {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.heading.capital.cookies {
  color: #111;
  margin: 0 0 .45rem;
  font-size: .95rem;
  line-height: 1.3;
}

.fs-cc-banner2_text {
  color: #444;
  font-size: .78rem;
  line-height: 1.4;
  text-align: center;
}

.fs-cc-banner2_text-link { color: #111; }

.fs-cc-banner2_buttons-wrapper {
  justify-content: center;
  margin-top: 1rem;
}

.fs-cc-banner2_button {
  background-color: #111;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 0;
  padding: .45rem 1.2rem;
}

.fs-cc-banner2_button.fs-cc-button-alt {
  background-color: transparent;
  color: #111;
  border: 1px solid #111;
}

/* Cookie-Einstellungen (Modal) im selben cleanen Stil */
.fs-cc-prefs2_form {
  background-color: #fff;
  color: #111;
  border: 1px solid #111;
}

.fs-cc-prefs2_title { color: #111; }

.fs-cc-prefs2_button {
  background-color: #111;
  color: #fff;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.fs-cc-prefs2_button.fs-cc-button-alt {
  background-color: transparent;
  color: #111;
  border: 1px solid #111;
}

.fs-cc-prefs2_submit {
  background-color: transparent;
  color: #444;
  text-decoration: underline;
}

/* ---------- 2) Titel: größer, klickbar, rote Linie immer so lang wie der Titel ---------- */
.heading-div .h1.text-size { font-size: 30px; line-height: 1.15; }
.works-headline .h1.text-size { font-size: 30px; line-height: 1.15; }

/* Titel + Linie hängen in einem Wrapper: die Linie übernimmt exakt die Titelbreite */
.fp-heading-link,
.fp-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  text-decoration: none;
  color: inherit;
}
.fp-heading-link { cursor: pointer; }
.fp-heading-link .h1 { transition: opacity .15s ease; }
.fp-heading-link:hover .h1 { opacity: .65; }
.fp-heading-link .line,
.fp-heading-link .line.mobil,
.fp-title-wrap .image-4 {
  width: 0;
  min-width: 100%;
  height: 8px;
  object-fit: fill;
  align-self: stretch;
  display: block;
}

/* Handy: Titel skaliert so, dass er in EINE Zeile passt */
@media screen and (max-width: 767px) {
  .heading-div .h1.text-size,
  .works-headline .h1.text-size {
    font-size: min(6.2vw, 30px);
    white-space: nowrap;
  }
}

/* Handy: Behind-the-Scenes-Bilder untereinander statt winzig nebeneinander */
@media screen and (max-width: 479px) {
  .grid-10 { grid-template-columns: 1fr; }
  .grid-10 > img {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100%;
  }
}

/* ---------- 3) Abstände ---------- */
.video-div.showreel .cta-img { margin-top: 1.4rem; }
.junk-jornal-div .div-block-65 { margin-top: 2.5rem; }

/* ---------- 4) Nosedive-Logo: grauer und kleiner ---------- */
.nosedive-logo { width: 3.8rem; opacity: .5; }
.nosedive-logo:hover { opacity: .8; }

/* ---------- 5) Logo-Reihen unter der Überschrift ---------- */
/* Festival-Laurels (Say Wuff): klein, direkt unter der Kopfzeile */
.fp-laurels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 2rem;
  align-self: center;
  margin-top: -1rem;
  margin-bottom: .5rem;
  max-width: 60rem;
}
.fp-laurels img { height: 48px; width: auto; }

/* Presse-Logos (Oracles): klein, direkt unter der Kopfzeile */
.fp-press {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 3.5rem;
  align-self: center;
  margin-top: -2.1rem;
  margin-bottom: -1.6rem;
}
.fp-press img { height: 44px; width: auto; max-width: none; }

/* Oracles: einzeilige Notiz dicht unter den GIFs */
.fp-oracles-note {
  align-self: center;
  text-align: center;
  margin-top: -2rem;
}

/* ---------- 6) Play-Pfeil mittig auf den Vorschaubildern ----------
   Schlichter, transparenter Umriss-Pfeil, immer sichtbar; beim Hover wird er
   gräulich-kräftiger. Mauszeiger bleibt der normale Klick-Zeiger. */
.video-thumbnail,
.play-button,
.fp-play-main,
.fp-thumb-wrap { cursor: pointer; }

.fp-thumb-wrap { position: relative; display: block; }
.fp-play-main { position: relative; display: block; }
.video-thumbnail { position: relative; }
.fp-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  color: #fff;
  opacity: .38;
  transition: opacity .15s ease, color .15s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .25));
}
.fp-play-overlay svg { width: 52px; height: 52px; stroke-width: 1.6; }
@media (hover: hover) {
  .video-thumbnail:hover .fp-play-overlay,
  .fp-thumb-wrap:hover .fp-play-overlay,
  .fp-play-main:hover .fp-play-overlay {
    color: #dedede;
    opacity: .75;
  }
}
/* Showreel-GIF hat Handschrift im Bild: Pfeil dort fast unsichtbar */
.video-thumbnail.showreel .fp-play-overlay { opacity: .13; }
@media (hover: hover) {
  .video-thumbnail.showreel:hover .fp-play-overlay { opacity: .3; }
}

/* Click-to-Watch-Flächen: beim Hover leicht verkleinern und halten,
   beim Verlassen federnd zurück in die Originalgröße */
.video-thumbnail { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) {
  .video-thumbnail:hover { transform: scale(.98); }
  .video-thumbnail.oracles:hover { filter: brightness(.92); }
}

/* Click-to-Watch-Grafik ist eine reine Anmerkung: keine Animation, kein Hover */

/* ---------- 7) Ton-Videos: dezentes Lautsprecher-Badge oben rechts ----------
   Stumm: Lautsprecher mit X, dauerhaft sichtbar (sehr transparent).
   Klick: Ton an, Wellen-Symbol erscheint und fadet von selbst aus. */
.video-wrapper { cursor: pointer; }
.fp-sound-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  color: #fff;
  opacity: .4;
  transition: opacity .6s ease;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .3));
}
.fp-sound-badge svg { width: 30px; height: 30px; display: block; stroke-width: 1.6; }
.fp-sound-badge .fp-snd-waves { display: none; }
.video-wrapper.fp-unmuted .fp-snd-x { display: none; }
.video-wrapper.fp-unmuted .fp-snd-waves { display: block; }
.video-wrapper.fp-unmuted .fp-sound-badge { opacity: 0; }
.video-wrapper.fp-unmuted.fp-badge-show .fp-sound-badge { opacity: .4; }
@media (hover: hover) {
  .video-wrapper.fp-unmuted:hover .fp-sound-badge { opacity: .4; }
}

/* ---------- 8) Sidebar: Banner und alle Overlays skalieren im Gleichschritt ----
   Der Banner (274x1024, attachment: fixed) füllt immer die volle Fensterhöhe;
   jedes Element sitzt absolut in vh-Einheiten — alles bewegt und skaliert
   sich bei jeder Fenstergröße exakt gemeinsam, ohne Obergrenze. */
@media screen and (min-width: 768px) {
  .sidemenu {
    position: relative;
    width: 25vh;
    background-position: 0 0;
    background-size: auto 100vh;
  }
  .sidemenu > a {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }
  .sidemenu .logo { width: 25vh; }
  .sticker-1 { width: 4.1vh; }
  .works-about-div {
    position: absolute;
    top: 30.7vh;
    left: 0;
    width: 20vh;
    max-width: none;
    grid-row-gap: 23.3vh;
  }
  .email-n-1-div {
    position: absolute;
    top: 93.2vh;
    left: 0;
    width: 25vh;
    justify-content: flex-start;
    align-items: center;
    column-gap: 3.2vh;
    padding-left: 2.2vh;
    padding-right: 0;
  }
  .img_standby.email, .img_hover.email { width: 6.4vh; }
  .email-div { width: 6.4vh; }
  .div-block-44 {
    width: 6.4vh;
    height: 4.85vh; /* 127x96-PNG: Höhe = Breite x 0,756 */
    position: relative;
  }
  .image-11 {
    width: 4.4vh;
    opacity: .8;
    margin-left: .8vh;
  }
  /* ABOUT ein Stück nach rechts, bündig unter WORKS */
  .div-about-menu { margin-left: 1.7vh; }
}

/* ---------- 9) Credits im Filmplakat-Stil (Billing-Block) ---------- */
.fp-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  margin-top: 3.5rem;
  margin-bottom: 1rem;
}
.fp-credits-line { width: 9rem; }
.fp-credits-title {
  letter-spacing: .4em;
  text-indent: .4em;
  font-family: myriad-pro, 'Source Sans 3', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
}
.fp-credits-billing {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.2rem 2.4rem;
  max-width: 54rem;
}
.fp-credits-billing .fp-credit {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}
/* Plakat-Typo: Rolle klein darüber, Name größer in Condensed */
.fp-credit {
  font-family: myriad-pro-condensed, myriad-pro, 'Source Sans 3', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}
.fp-credit strong {
  display: block;
  font-family: myriad-pro, 'Source Sans 3', sans-serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .16em;
  opacity: .7;
  margin-bottom: .1em;
}
.fp-credit strong + br { display: none; }
.fp-credit-starring { max-width: 30rem; margin-left: auto; margin-right: auto; }
.fp-credits-footer { opacity: .7; margin: .6rem auto 0; font-size: .8rem; }

/* Zitat unter dem Player (LUZ) */
.fp-quote { text-align: center; margin: 1.75rem auto 0; max-width: 44rem; }

/* ---------- 10) Say Wuff: Trailer-Vorschau bündig mit den Stills ----------
   Der Container bringt 80px Seiten-Padding mit — weg damit, dann ist das
   Vorschaubild (und der Player) exakt so breit wie das Still-Raster. */
.main-body.works .video-div.showreel {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.main-body.works img.video-thumbnail.say-wuff { width: 100%; height: auto; }

/* ---------- 11) LUZ: Player-Vorschau unbeschnitten + Zitat mittig ---------- */
.main-body.works .video-thumbnail.luz {
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 429; /* Seitenverhältnis des Vorschau-Stills */
  background-size: contain;
}
.video-div.luz > .fp-quote { width: 100%; }

/* Vorschaubilder mit Standbild-Hintergrund: das innen liegende Loop-Video
   bleibt unsichtbar (sonst blitzt es beim Hover über dem Standbild auf) */
.video-thumbnail.luz video,
.video-thumbnail.milcky-chance video,
.video-thumbnail.golf video { display: none !important; }

/* Startseite: "More here" bei Oracles nicht an den GIFs kleben */
.grid-9 + .div-block-65 { margin-top: 2.5rem; }

/* ---------- 12) Credits: rote Linie als Unterstrich von "Credits" ---------- */
.fp-credits-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.fp-credits-head .fp-credits-line {
  width: 0;
  min-width: 100%;
  height: 6px;
  object-fit: fill;
  margin-top: .25rem;
}

/* ---------- 13) Next Project (Fuß jeder Projektseite) ---------- */
.fp-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 4.5rem auto 1.5rem;
  text-decoration: none;
  color: inherit;
}
.fp-next-label {
  font-size: .62rem;
  letter-spacing: .3em;
  text-indent: .3em;
  opacity: .65;
  text-transform: uppercase;
}
.fp-next-title {
  font-family: myriad-pro, 'Source Sans 3', sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  transition: opacity .15s ease;
}
.fp-next-line {
  align-self: stretch;
  width: 0;
  min-width: 100%;
  height: 6px;
  object-fit: fill;
  margin-top: .2rem;
}
.fp-next:hover .fp-next-title { opacity: .65; }

/* ---------- 14) Oracles-Startseite: Loops in Links/Play-Fläche sichtbar halten ---------- */
.grid-9 > .fp-play-main { display: block; }
.grid-9 > a.fp-loop-link { display: block; height: 100%; }
.grid-9 > a.fp-loop-link > .w-background-video,
.grid-9 > .fp-play-main > .w-background-video { height: 100%; }
.grid-9 > .fp-play-main > .background-video-8 { height: auto; }


/* ---------- 15) Say Wuff: neu aufgebaute Seite ---------- */
.fp-sw-intro {
  text-align: center;
  margin: -1.4rem auto 0;
  max-width: 44rem;
}
.fp-sw-poster {
  align-self: center;
  width: min(100%, 30rem);
  margin-top: -3.4rem;
}
.fp-sw-poster img { width: 100%; height: auto; }
.fp-stills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: -3.4rem;
}
/* Alle Stills auf ein gemeinsames Seitenverhältnis bringen — Zeilen schließen
   bündig ab, Ausreißer werden minimal beschnitten (object-fit: cover) */
.fp-stills img {
  width: 100%;
  height: auto;
  aspect-ratio: 2.55 / 1;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 479px) {
  .fp-stills { grid-template-columns: 1fr; }
}
.fp-sw-text {
  text-align: center;
  margin: -3rem auto 0;
  max-width: 44rem;
}

/* ---------- 16) Mobil-Feinschliff ---------- */
@media screen and (max-width: 767px) {
  /* Junk Jornal: eine Spalte, volle Fotos */
  .junk-grid.page { grid-template-columns: 1fr !important; }

  /* Oracles-Startseite: kleine Loops brauchen eigene Höhe (16:9) */
  .grid-9 > a.fp-loop-link { height: auto; }
  .grid-9 > a.fp-loop-link > .w-background-video { height: auto; aspect-ratio: 16 / 9; }

  /* Oracles-Projektseite: Loops einspaltig, im echten Video-Format */
  .grid-8 { grid-template-columns: 1fr !important; }
  .grid-8 > .w-background-video { height: auto; aspect-ratio: 16 / 9; }
}

/* Kleiner grauer Cookies-Link neben Legal (About-Seite) */
.fp-cookie-link {
  font-size: .68rem;
  letter-spacing: .08em;
  color: #333;
  opacity: .45;
  text-decoration: none;
  text-transform: uppercase;
  align-self: center;
  margin-left: 1rem;
}
.fp-cookie-link:hover { opacity: .8; }

/* ---------- 17) Feinschliff Runde 8 ---------- */
/* Weniger Leerraum zwischen Showreel und erstem Projekt */
@media screen and (min-width: 768px) {
  .hero-landing { margin-bottom: -5rem; }
}

/* "More here": dezent größer als Original, mit Luft zum Projekt darüber
   und (mobil) deutlich mehr Abstand zum nächsten Projekt */
.div-block-65 { width: 22%; margin-top: 1.5rem; }
@media screen and (max-width: 767px) {
  .div-block-65 {
    width: 34%;
    min-width: 110px;
    margin-top: 1.75rem;
    margin-bottom: 2.5rem;
  }
}

/* Text unterm Video: eine zentrierte Zeile statt links/rechts-Spalten */
.fp-film-note {
  text-align: center;
  margin: 0 auto;
  max-width: 52rem;
}

/* Say-Wuff-Teaser: deutlicherer Play-Pfeil, verschwindet beim ersten Klick */
.video-wrapper .fp-play-overlay { opacity: .5; }
.video-wrapper.fp-played .fp-play-overlay { opacity: 0; }

/* scroll-audio.js: Vor dem Entsperren zeigen die Videos nur den Play-Pfeil
   (es gibt noch keinen Ton-Status). Nach dem Entsperren übernehmen die
   Sound-Badges (X = stumm, Wellen = an), die Pfeile verschwinden. */
.video-wrapper .fp-sound-badge { display: none; }
.video-wrapper.fp-audio-ready .fp-sound-badge { display: block; }
.video-wrapper.fp-audio-ready .fp-play-overlay { display: none; }

/* Statisches Ton-aus-Badge auf dem Showreel-GIF */
.fp-sound-badge.fp-badge-static { opacity: .4; }

/* About: auch der Section-Hintergrund ist fixiert — kein Mitscrollen/Bouncen */
.section.about { background-attachment: fixed; }

/* Mobil-Header: etwas höher und mit weichem Schatten nach unten */
@media screen and (max-width: 767px) {
  .mobil-header {
    min-height: 92px;
    box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .28);
  }
}