@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&family=Nunito+Sans:wght@300;400;600;700&display=swap');

/* Accessibility layer: WCAG 2.1 AA improvements over the imported design. */
:root { --focus: #005fcc; --ink: #171717; --paper: #fff; }

html {
  scroll-behavior: smooth;
  font-synthesis: none;
}
body { color: var(--ink); }

.skip-link {
  position: fixed; z-index: 10000; top: .75rem; left: .75rem;
  padding: .8rem 1rem; color: var(--paper); background: #111;
  transform: translateY(-180%); transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }

a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px rgba(255,255,255,.9);
}

button.navigation-desktop-trigger {
  appearance: none; border: 0; padding: 0; font: inherit; color: inherit;
  background: transparent; cursor: pointer;
}

/* Menu is usable with mouse, keyboard, touch, and assistive technology. */
.navigation-full-wrapper[hidden] { display: none !important; }
.navigation-full-wrapper:not([hidden]) {
  display: flex !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-.75rem);
  transition: opacity .68s cubic-bezier(.16, 1, .3, 1), transform .68s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .68s;
  z-index: 20;
}
.navigation-full-wrapper.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.navigation-full-wrapper.is-closing { pointer-events: none; }
.navigation-content { z-index: 21; }
body.menu-is-open { overflow: hidden; }
body.menu-is-open .navbar {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  z-index: 21;
}
.navigation-full-wrapper-link {
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity .48s ease, transform .48s cubic-bezier(.16, 1, .3, 1);
}
.navigation-full-wrapper.is-open .navigation-full-wrapper-link {
  opacity: 1;
  transform: translateY(0);
}
.navigation-full-wrapper.is-open .navigation-full-wrapper-link:nth-child(1) { transition-delay: 120ms; }
.navigation-full-wrapper.is-open .navigation-full-wrapper-link:nth-child(2) { transition-delay: 190ms; }
.navigation-full-wrapper.is-open .navigation-full-wrapper-link:nth-child(3) { transition-delay: 260ms; }
.navigation-full-wrapper.is-open .navigation-full-wrapper-link:nth-child(4) { transition-delay: 330ms; }
.navigation-desktop-trigger { position: relative; }
.header-menu { transition: opacity .32s cubic-bezier(.16, 1, .3, 1), transform .32s cubic-bezier(.16, 1, .3, 1); }
.navigation-desktop-trigger[aria-expanded="true"] .header-menu:not(.close) {
  opacity: 0;
  transform: translateY(-.25rem);
}
.navigation-desktop-trigger[aria-expanded="true"] .header-menu.close {
  opacity: 1;
  transform: translateY(0);
}

/* Motion replaces the former Webflow interactions and is disabled above when requested. */
.reveal { opacity: 0; transform: translateY(1.25rem); }
.reveal.is-visible { animation: reveal .78s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
.home-project-wrapper .homepage-project-image-wrapper { overflow: hidden; }
.home-project-wrapper .homepage-project-image-wrapper img {
  transition: transform .85s cubic-bezier(.645, .045, .355, 1);
}
.home-project-wrapper.reveal .homepage-project-image-wrapper img { transform: scale(1.25); }
.home-project-wrapper.reveal.is-visible .homepage-project-image-wrapper img { transform: scale(1); }
.home-project-wrapper.reveal.is-visible:hover .homepage-project-image-wrapper img,
.home-project-wrapper.reveal.is-visible:focus-visible .homepage-project-image-wrapper img {
  transform: scale(1.05);
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}

/* The contact portrait keeps the original circular zoom-in entrance. */
.portrait-reveal {
  opacity: 0;
  transform: scale(.8);
}
.portrait-reveal .roundedimage-animation-child { transform: scale(1.4); }
.portrait-reveal.is-visible {
  animation: portrait-enter .85s cubic-bezier(.645, .045, .355, 1) var(--portrait-delay, 0ms) forwards;
}
.portrait-reveal.is-visible .roundedimage-animation-child {
  transition: transform .85s cubic-bezier(.645, .045, .355, 1) var(--portrait-delay, 0ms);
  transform: scale(1);
}
@keyframes portrait-enter { to { opacity: 1; transform: scale(1); } }

/* About case studies respond directly, but softly, to scroll direction. */
.horizontal-composition-content { will-change: transform; }

/* Portfolio project images enter zoomed and retain a clear linked hover state. */
.portfolio-image-reveal .works-single-image {
  transform: scale(1.25);
  transition: transform .85s cubic-bezier(.645, .045, .355, 1) var(--reveal-delay, 0ms);
}
.portfolio-image-reveal.is-visible .works-single-image { transform: scale(1); }
.works-entry-link:hover .portfolio-image-reveal.is-visible .works-single-image,
.works-entry-link:focus-visible .portfolio-image-reveal.is-visible .works-single-image {
  transform: scale(1.05);
  transition-delay: 0ms;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}
.works-entry-link:hover .project-tile-arrow-icon,
.works-entry-link:focus-visible .project-tile-arrow-icon { transform: translateX(-10px) !important; }

/* CTA motion: small CTAs use the original -5 px / 400 ms inOutQuart movement. */
.cta-icon,
.home-project-arrow-icon,
.works-entry-icon .project-tile-arrow-icon,
.homepage-contact-title-container .big-arrow-icon,
.project-next-link .big-arrow-icon {
  will-change: transform;
}

.cta-icon { transition: transform .4s cubic-bezier(.77, 0, .175, 1); }
.homepage-contact-title-container .big-arrow-icon,
.project-next-link .big-arrow-icon { transition: transform .25s ease-in-out; }

.cta:hover .cta-icon,
.cta:focus-visible .cta-icon { transform: translateX(-5px) !important; }

.homepage-contact-title-container:hover .big-arrow-icon,
.homepage-contact-title-container:focus-visible .big-arrow-icon {
  transform: translateX(10px) !important;
}

.project-next-link:hover .big-arrow-icon,
.project-next-link:focus-visible .big-arrow-icon {
  transform: translateX(10px) !important;
}

/* Project cards use the original opposing direction: their plus moves left. */
.home-project-wrapper:hover .home-project-arrow-icon,
.home-project-wrapper:focus-visible .home-project-arrow-icon,
.works-entry-link:hover .project-tile-arrow-icon,
.works-entry-link:focus-visible .project-tile-arrow-icon {
  transform: translateX(-10px) !important;
  transition: transform .85s cubic-bezier(.645, .045, .355, 1);
}
.home-project-arrow-icon,
.works-entry-icon .project-tile-arrow-icon {
  transition: transform .85s cubic-bezier(.645, .045, .355, 1);
}

.site-main:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Decorative icon assets should never carry the entire meaning of a link. */
img[alt="Plus Icon auf dunklem Hintergrund."],
img[alt="Dunkles Icon eines Pfeil"],
img[alt="Icon Pfeil"] { pointer-events: none; }

/* Avoid text loss when user overrides WCAG text-spacing values. */
p, li, dd, dt, a, h1, h2, h3 { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  a, button { forced-color-adjust: auto; }
}