/* ==========================================================================
   GREENWOODCREEK — "Waldlicht" redesign layer
   Loaded after finalversion.webflow.shared*.css and only re-tints /
   refines the existing design-token system (CSS custom properties) plus
   adds a handful of new decorative details. Structure, layout, grid and
   all JS-driven interaction classes from the base stylesheet are untouched.
   ========================================================================== */

:root {
  /* ---- repointed base tokens (same light/dark relationships, warmer hue) ---- */
  --_primitives---color--white: #f6f0e1;
  --_primitives---color--neutral-darkest: #141a10;
  --_primitives---color--neutral-lightest: #f3ede0;
  --_primitives---color--outer-space: #141a10;
  --_primitives---opacity--neutral-darkest-5: rgba(20, 26, 16, .05);
  --_primitives---opacity--neutral-darkest-15: rgba(20, 26, 16, .13);

  --_color-schemes---color-scheme-3--background: #10140c;
  --_color-schemes---color-scheme-3--text: #ece3cd;

  --_color-schemes---color-scheme-5--background: #f3ede0;
  --_color-schemes---color-scheme-5--text: #171d11;
  --_color-schemes---color-scheme-5--border: rgba(23, 29, 17, .13);

  --_ui-styles---radius--large: 3px;
  --_ui-styles---radius--medium: 3px;

  /* ---- fluid editorial type scale (supersedes the shared file's fixed
     breakpoint values below, since this stylesheet loads last) ---- */
  --_typography---text-sizes--heading-1: clamp(2.75rem, 2vw + 2.35rem, 7.25rem);
  --_typography---text-sizes--heading-2: clamp(2.1rem, 1.4vw + 1.7rem, 4rem);
  --_typography---text-sizes--heading-3: clamp(1.65rem, 1vw + 1.35rem, 3rem);
  --_typography---text-sizes--heading-4: clamp(1.45rem, .8vw + 1.2rem, 2.5rem);
  --_typography---text-sizes--heading-5: clamp(1.25rem, .5vw + 1.1rem, 2rem);
  --_typography---text-sizes--text-medium: clamp(1.05rem, .2vw + 1rem, 1.3rem);
  --_typography---text-sizes--text-regular: clamp(1rem, .15vw + .95rem, 1.1rem);
  --_typography---text-sizes--text-small: clamp(.85rem, .1vw + .82rem, .95rem);

  /* ---- new accent palette ---- */
  --gwc-ink: #10140c;
  --gwc-paper: #f3ede0;
  --gwc-ivory: #ece3cd;
  --gwc-accent: #bd8a3f;
  --gwc-accent-soft: #e0b26a;
  --gwc-moss: #6f8763;
  --gwc-rust: #a94a34;
  --gwc-border-dark: rgba(236, 227, 205, .16);
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Instrument Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--_color-schemes---color-scheme-3--background);
}

::selection {
  background: var(--gwc-accent);
  color: var(--gwc-ink);
}

* {
  scrollbar-color: var(--gwc-accent) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--gwc-paper);
}
::-webkit-scrollbar-thumb {
  background-color: var(--gwc-accent);
  border-radius: 8px;
  border: 2px solid var(--gwc-paper);
}

a, button, input, textarea {
  outline-color: var(--gwc-accent);
}

/* Film-grain atmosphere, fixed above every section but never blocking clicks. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.gwc-navbar-glass {
  background-color: rgba(16, 20, 12, .62);
  border: 1px solid rgba(236, 227, 205, .14);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
@media screen and (max-width: 767px) {
  .gwc-navbar-glass .column {
    background-color: rgba(16, 20, 12, .88);
    border: 1px solid rgba(236, 227, 205, .14);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
  }
}
.gwc-navbar-glass .link-text-3 {
  color: var(--gwc-ivory);
  position: relative;
}
.gwc-navbar-glass .link-style {
  position: relative;
}
.gwc-navbar-glass .link-style::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--gwc-accent);
  transition: right .3s cubic-bezier(.22, 1, .36, 1);
}
.gwc-navbar-glass .link-style:hover::after {
  right: 0;
}
img[src*="logo_variant_3"] {
  filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(451%) hue-rotate(357deg) brightness(97%) contrast(93%);
}

.button-style-30 {
  background-color: transparent;
  border: 1px solid var(--gwc-accent);
  box-shadow: none;
  transition: background-color .25s ease, color .25s ease;
}
.button-style-30 .gwc-btn-label {
  color: var(--gwc-ivory);
  transition: color .25s ease;
}
.button-style-30:hover {
  background-color: var(--gwc-accent);
}
.button-style-30:hover .gwc-btn-label {
  color: var(--gwc-ink);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.header-65-3::before {
  background: linear-gradient(180deg, rgba(16, 20, 12, .55) 0%, rgba(16, 20, 12, .3) 45%, rgba(16, 20, 12, .75) 100%);
}
.header-65-3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gwc-accent) 20%, var(--gwc-accent) 80%, transparent);
  opacity: .8;
}
.header-65-3::after {
  bottom: 0;
}
.geschichten-in-bildern-2,
.geschichten-die-berhren-2,
.uber-uns-hero-text .ber-uns-9 {
  letter-spacing: -.02em;
}
.geschichten-in-bildern-2 em,
.geschichten-die-berhren-2 em,
.heading-9 em,
.uber-uns-hero-text em {
  font-style: normal;
  color: var(--gwc-accent-soft);
}

/* ==========================================================================
   Kickers / eyebrow labels
   ========================================================================== */

.tagline-4,
.tagline-6,
.tagline-7,
.tagline-8 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gwc-accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  font-weight: 600;
}
.tagline-4::before,
.tagline-6::before,
.tagline-7::before,
.tagline-8::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gwc-accent);
  flex: 0 0 auto;
}

/* Step numerals (01 / 02 / 03) as oversized ghost marks. */
.section-info-2 p {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  color: var(--gwc-accent);
  opacity: .35;
  line-height: 1;
}

/* ==========================================================================
   Headings / body copy already inherit the retinted scheme variables above;
   a couple of composite classes need a direct nudge.
   ========================================================================== */

.heading-9, .heading-10, .heading-11, .heading-16, .heading-17, .heading-18,
.heading-19, .heading-20, .heading-21, .heading-22, .heading-23, .heading-24,
.heading-27, .heading-28 {
  letter-spacing: -.02em;
}

/* ==========================================================================
   Buttons, links & form controls
   ========================================================================== */

[class*="button-style-"] {
  border-radius: 3px !important;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease, border-color .25s ease;
}

.gwc-input,
.gwc-textarea {
  background-color: #fbf8f1;
  border-color: var(--_color-schemes---color-scheme-5--border);
}
.gwc-input:focus,
.gwc-textarea:focus {
  border-color: var(--gwc-accent);
  box-shadow: 0 0 0 3px rgba(189, 138, 63, .18);
}
.gwc-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  opacity: .75;
}
.gwc-submit {
  background-color: var(--gwc-accent);
  color: var(--gwc-ink);
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background-color .25s ease, transform .2s ease;
}
.gwc-submit:hover {
  background-color: var(--gwc-accent-soft);
  opacity: 1;
  transform: translateY(-1px);
}

/* Services: request CTA mirrors the contact form's submit button. */
.leistungen-desktop [data-figma-id="10202:71552"] .button-style-30 {
  background-color: var(--gwc-accent);
  border-color: var(--gwc-accent);
  border-radius: 3px !important;
}
.leistungen-desktop [data-figma-id="10202:71552"] .button-style-30 .gwc-btn-label {
  color: var(--gwc-ink);
  font-weight: 700;
  letter-spacing: .02em;
}
.leistungen-desktop [data-figma-id="10202:71552"] .button-style-30:hover {
  background-color: var(--gwc-accent-soft);
  border-color: var(--gwc-accent-soft);
  transform: translateY(-1px);
}

/* Center the services contact form like the homepage form. */
.leistungen-desktop .cta-33-2 .gwc-form {
  margin-right: auto;
  margin-left: auto;
  align-items: center;
}
.gwc-status.is-success {
  color: var(--gwc-moss);
}
.gwc-status.is-error {
  color: var(--gwc-rust);
}

.link-style-3 {
  transition: color .2s ease;
}
.link-style-3:hover .startseite-3,
.link-style-3:hover .portfolio-3,
.link-style-3:hover .leistungen-3,
.link-style-3:hover .ber-uns-3,
.link-style-3:hover .fotografie-3,
.link-style-3:hover .videografie-3,
.link-style-3:hover .anfrage-3 {
  color: var(--gwc-accent);
}

/* ==========================================================================
   Imagery — camera-frame hover treatment
   ========================================================================== */

.placeholder-image-3,
.placeholder-image-10,
[class*="placeholder-image-"],
.header-44-2 img,
.header-64-2 img {
  border-radius: 16px;
  transition: box-shadow .35s ease, filter .35s ease;
}
.placeholder-image-3:hover,
.placeholder-image-10:hover,
[class*="placeholder-image-"]:hover {
  box-shadow: inset 0 0 0 2px var(--gwc-accent);
  filter: saturate(1.08) contrast(1.03);
}

/* Homepage: video replacing the Concept & Strategy image */
.gwc-concept-video {
  width: 600px;
  max-width: calc(50% - 40px);
  aspect-ratio: 1;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

.gwc-concept-section {
  display: block;
  height: 320vh;
  overflow: clip;
}

/* Bring the concept scene closer to the introductory copy above it. */
.layout-501-2 .container-13 {
  grid-row-gap: 24px;
}

/* Allow the sticky scroll scene to remain fixed while its animation plays. */
.layout-501-2 {
  overflow: visible;
}

.gwc-concept-scene {
  position: sticky;
  top: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  grid-template-rows: auto;
  column-gap: 80px;
  align-items: start;
  min-height: calc(100vh - 76px);
  padding-top: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.gwc-concept-video {
  grid-column: 2;
  grid-row: 1;
  width: 600px;
  max-width: 100%;
  will-change: transform;
}

.gwc-concept-copy {
  grid-row: 1;
  transition: opacity .1s linear, transform .1s linear;
}

.gwc-concept-copy .heading-10 {
  margin-bottom: 20px;
}

.gwc-preproduction-image,
.gwc-postproduction-image {
  width: 600px;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.gwc-portfolio-video-frame {
  position: relative;
  width: var(--_spacing-sizing---container--container-large);
  max-width: calc(100% - 2 * var(--_spacing-sizing---page-padding--padding-global));
  margin-right: auto;
  margin-left: auto;
}

.gwc-portfolio-video {
  width: 100%;
  aspect-ratio: 1289 / 725;
  border-radius: 24px;
  object-fit: cover;
  display: block;
}

.gwc-portfolio-sound {
  position: absolute;
  right: 16px;
  bottom: 16px;
  border: 1px solid var(--gwc-accent);
  border-radius: 999px;
  background: rgba(24, 24, 20, .78);
  color: #fff;
  padding: 8px 12px;
  font: 600 14px/1 'Instrument Sans', sans-serif;
  cursor: pointer;
}

.gwc-nightlife-frame {
  width: 100%;
  max-width: 1280px;
  border-radius: 16px;
  overflow: hidden;
}

.gwc-nightlife-image {
  width: 100%;
  display: block;
  transform-origin: center;
  will-change: transform, filter;
}

.gwc-italy-video-frame {
  position: relative;
  width: var(--_spacing-sizing---container--container-large);
  max-width: 100%;
  border-radius: 24px;
  overflow: hidden;
}

.gwc-italy-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.gwc-services-video {
  width: 100%;
  border-radius: 16px;
  display: block;
}

/* Portfolio: remove the two side-by-side images below “Weniger Worte. Mehr Wirkung.” */
.gallery-17-2 .content-style-23 {
  display: none;
}

.gallery-17-2 {
  padding-bottom: 24px;
}

.layout-164-2 {
  padding-top: 24px;
}

/* Alternate the production step: image left, copy right. */
@media screen and (min-width: 768px) {
  .feature-two-2 .content-style-5 {
    flex-direction: row-reverse;
  }

  .feature-two-2 .section-info-2 {
    justify-content: flex-end;
  }
}

.gwc-concept-copy-first {
  grid-column: 1;
}

.gwc-concept-copy-second {
  grid-column: 2;
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .gwc-concept-section {
    height: 250vh;
  }
  .gwc-concept-scene {
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: center;
  }
  .gwc-concept-video {
    width: 100%;
    max-width: none;
    flex-basis: auto;
  }
  .gwc-concept-copy {
    width: 100%;
    padding: 0 4vw;
  }
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.tab-one-2 {
  border-color: var(--_color-schemes---color-scheme-5--border);
  transition: border-color .25s ease;
}
.tab-one-2.w--current {
  border-color: var(--gwc-accent);
}
.tab-one-2.w--current .am-set-2,
.tab-one-2.w--current .zur-auslieferung-2 {
  color: var(--gwc-accent);
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-toggle-icon {
  color: var(--gwc-accent);
}
.question-3 {
  transition: opacity .2s ease;
}
.question-3:hover {
  opacity: .75;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer-3-3,
.footer-3-5,
.footer-3-6,
.footer-3-8 {
  border-top: 1px solid var(--gwc-border-dark);
  position: relative;
}
.footer-3-3::before,
.footer-3-5::before,
.footer-3-6::before,
.footer-3-8::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 120px;
  height: 1px;
  background: var(--gwc-accent);
}
.credits {
  border-top: 1px solid var(--gwc-border-dark);
  padding-top: 24px;
}
._49-151-55828308-3, .neumeyerjanwebde-3,
._49-151-55828308-5, .neumeyerjanwebde-5,
._49-151-55828308-6, .neumeyerjanwebde-6,
._49-151-55828308-8, .neumeyerjanwebde-8 {
  text-decoration-color: var(--gwc-border-dark);
  transition: color .2s ease, text-decoration-color .2s ease;
}
._49-151-55828308-3:hover, .neumeyerjanwebde-3:hover,
._49-151-55828308-5:hover, .neumeyerjanwebde-5:hover,
._49-151-55828308-6:hover, .neumeyerjanwebde-6:hover,
._49-151-55828308-8:hover, .neumeyerjanwebde-8:hover {
  color: var(--gwc-accent);
  text-decoration-color: var(--gwc-accent);
}
.footer-links a {
  transition: color .2s ease;
}
.footer-links a:hover p {
  color: var(--gwc-accent);
}

/* ==========================================================================
   Legal pages
   ========================================================================== */

.legal-text a {
  text-decoration-color: var(--gwc-border-dark);
  transition: color .2s ease;
}
.legal-text a:hover {
  color: var(--gwc-accent);
}