/* ============================================================
   Zweizunull — overrides loaded AFTER the Webflow stylesheets.
   Brand palette:
     --zzn-blue:   #002632  (page background base)
     --zzn-green:  #364604
     --zzn-orange: #d24410
   ============================================================ */

/* ------------------------------------------------------------
   FONT ALIASES — the Webflow sheet only declares the families
   "Eudoxussans", "Eudoxussansgx" and "Font Bureau Heronsans".
   Several rules below (and older CMS sections) ask for
   "Heronsans" / "HeronSansCond", which were never declared and
   silently fell back to the system sans. The Google WebFont
   loader (Inter, Droid Serif, Open Sans) is stripped for DSGVO,
   so those never load either. These aliases map the missing
   names onto the self-hosted Heron Sans files.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Heronsans";
  src: url("/fonts/Font-Bureau---HeronSans-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Heronsans";
  src: url("/fonts/Font-Bureau---HeronSans-Light-Italic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Heronsans";
  src: url("/fonts/Font-Bureau---HeronSans-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Heronsans";
  src: url("/fonts/Font-Bureau---HeronSans-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Heronsans";
  src: url("/fonts/Font-Bureau---HeronSans-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Heronsans";
  src: url("/fonts/Font-Bureau---HeronSans-Medium-Italic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Heronsans";
  src: url("/fonts/Font-Bureau---HeronSans-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Heronsans";
  src: url("/fonts/Font-Bureau---HeronSans-SemiBold-Italic.otf") format("opentype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Heronsans";
  src: url("/fonts/Font-Bureau---HeronSans-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Heronsans";
  src: url("/fonts/Font-Bureau---HeronSans-Bold-Italic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
/* No condensed cut is licensed/self-hosted — alias to the normal cut
   so it renders in brand type instead of the system sans. */
@font-face {
  font-family: "HeronSansCond";
  src: url("/fonts/Font-Bureau---HeronSans-Medium.otf") format("opentype");
  font-weight: 400 700; font-style: normal; font-display: swap;
}



:root {
  --zzn-blue: #002632;
  --zzn-green: #364604;
  --zzn-orange: #d24410;
  /* Soft blush the /about page lands on below the project wall, and the
     ink that reads on it. */
  --kr-blush: #fdf4f7;
  --kr-ink-on-blush: #0a0a0a;
}

html {
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: clip;
  overscroll-behavior-y: none;
}
/* Pinned dot-transition stage: pan-y hint so iOS never misreads a small
   horizontal drift as horizontal scroll intent competing with the pin. */
.zzn-stage { touch-action: pan-y; }

/* Animated brand gradient — moves background-position only, GPU cheap.
   Reused by nav cover, off-page menu, mobile overlay, cookie banner. */
@keyframes zzn-gradient-shift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
@keyframes zzn-menu-gradient-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.04); background-position: 0% 50%, 0% 50%, 0% 50%; }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.08); background-position: 100% 50%, 60% 50%, 0% 50%; }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.04); background-position: 0% 50%, 0% 50%, 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .zzn-grad-anim, .navigation-cover, .w-nav-overlay, .off-page-menu,
  .navigation-cover::after, .w-nav-overlay::before, .off-page-menu::before,
  #zzn-cookie-banner { animation: none !important; }
}

/* ---------- 1. Menu / navigation gradient ----------
   Webflow paints:
     - .navigation-cover  → solid orange bar behind navbar
     - .w-nav-overlay     → light-gray panel for mobile dropdown
     - .off-page-menu     → solid #fff slide-out for desktop "Menu" button
   Replace with the brand gradient on top of the deep-blue page base.
*/

.nav-bar,
.nav-bar.w-nav,
.w-nav {
  background-color: transparent !important;
}

/* Top bar behind logo / nav links — Webflow animates height on scroll;
   we only paint when it has size, so at scroll=0 nothing shows.
   Plain smoked glass rather than the brand gradient: the gradient fought
   whatever the page underneath happened to be, and read as a coloured
   band across the top of every page. */
.navigation-cover {
  overflow: hidden;
  isolation: isolate;
  background-color: transparent !important;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.40)) !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* saturate lifts the colour the blur would otherwise wash out — this is
     what separates glass from flat grey. */
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  /* Specular top edge + hairline foot, the two cues that read as a pane. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 12px 36px -14px rgba(0, 0, 0, 0.5) !important;
}

/* Fix header logo aspect ratio — explicit width/height attributes on the
   brand image were distorting it when CSS constrained only one axis. */
.brand img,
.w-nav-brand img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Light, quick sheen. Only transform animates, so it stays off the paint
   path; the long hold keeps it from turning into a nightclub. */
.navigation-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(255, 255, 255, 0.10) 50%,
    transparent 58%
  );
  transform: translate3d(-100%, 0, 0);
  animation: zzn-nav-sheen 9s ease-in-out infinite;
  will-change: transform;
}
@keyframes zzn-nav-sheen {
  0%, 80% { transform: translate3d(-100%, 0, 0); }
  100%    { transform: translate3d(100%, 0, 0); }
}

.w-nav-overlay::before,
.off-page-menu::before {
  content: "";
  position: absolute;
  inset: -18% -12% -18% 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 80% at 82% 12%, rgba(210, 68, 16, 0.76) 0%, rgba(210, 68, 16, 0.34) 38%, transparent 68%),
    linear-gradient(105deg, transparent 0%, rgba(54, 70, 4, 0.84) 24%, rgba(0, 38, 50, 0.64) 48%, rgba(210, 68, 16, 0.58) 72%, rgba(54, 70, 4, 0.62) 100%),
    linear-gradient(90deg, rgba(0, 38, 50, 1) 0%, rgba(0, 38, 50, 0.95) 24%, transparent 66%);
  background-size: 130% 130%, 135% 135%, 100% 100%;
  background-position: 0% 50%, 0% 50%, 0% 50%;
  opacity: 0.98;
  animation: zzn-menu-gradient-drift 7s ease-in-out infinite;
  will-change: transform, background-position;
}

/* Nav dropdown overlay — styled to match the cookie banner */
[data-nav-menu-open],
.w-nav-overlay [data-nav-menu-open] {
  background: transparent !important;
}
.w-nav-overlay {
  isolation: isolate;
  /* Cancel the shared ::before drift gradient inherited from the menu panels */
  background: transparent !important;
  background-image: none !important;
  animation: none !important;
}
.w-nav-overlay::before {
  display: none !important;
}
.w-nav-overlay > * {
  position: relative;
  z-index: 1;
}

/* Desktop: compact dropdown anchored under the menu button, sized to its links */
@media (min-width: 992px) {
  .w-nav-overlay {
    left: auto !important;
    right: 16px !important;
    top: 100% !important;
    bottom: auto !important;
    width: max-content !important;
    height: auto !important;
    max-width: min(360px, calc(100vw - 32px));
    margin-top: 10px;
    border-radius: 16px;
    overflow: visible;
    background: rgba(0, 22, 30, 0.96) !important;
    box-shadow:
      0 30px 80px -20px rgba(0, 0, 0, 0.75),
      0 0 60px -20px rgba(210, 68, 16, 0.25);
    backdrop-filter: blur(24px) saturate(160%);
    /* Fade-in only — kill Webflow's slide-from-top translate */
    transform: none !important;
    transition: opacity 0.22s ease !important;
    animation: none !important;
  }
  .w-nav-overlay [data-nav-menu-open] {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Subtle radial wash (matches cookie banner ::before) */
  .w-nav-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    background:
      radial-gradient(120% 80% at 0% 0%, rgba(54, 70, 4, 0.32) 0%, transparent 55%),
      radial-gradient(110% 90% at 100% 0%, rgba(0, 56, 74, 0.45) 0%, transparent 60%);
    opacity: 0.95;
  }
  /* Animated brand-gradient ring (matches cookie banner ::after) */
  .w-nav-overlay > [data-nav-menu-open]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--zzn-blue) 0%, var(--zzn-green) 45%, var(--zzn-orange) 100%);
    background-size: 220% 220%;
    animation: zzn-gradient-shift 14s ease-in-out infinite;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
            mask-composite: exclude;
  }
  .w-nav-overlay [data-nav-menu-open] {
    position: relative !important;
    width: max-content;
    min-width: 220px !important;
    background: transparent !important;
    text-align: center;
    padding: 10px 0;
    border-radius: 16px;
    overflow: hidden;
  }
  .w-nav-overlay .nav-link,
  .w-nav-overlay .w-nav-link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    color: #fff !important;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .w-nav-overlay .nav-link:hover,
  .w-nav-overlay .w-nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}

/* Mobile + tablet: full-screen overlay with centered menu items */
@media (max-width: 991px) {
  .w-nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh;
    background: rgba(0, 22, 30, 0.96) !important;
    backdrop-filter: blur(24px) saturate(160%);
    overflow: hidden !important;
  }
  .w-nav-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(80% 50% at 0% 0%, rgba(54, 70, 4, 0.32) 0%, transparent 60%),
      radial-gradient(80% 50% at 100% 100%, rgba(210, 68, 16, 0.22) 0%, transparent 60%);
  }
  .w-nav-overlay [data-nav-menu-open] {
    background: transparent !important;
    position: relative !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    padding: clamp(84px, 16vh, 140px) 24px 72px;
    margin: 0 !important;
  }
  .w-nav-overlay .nav-link,
  .w-nav-overlay .w-nav-link {
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: min(76vw, 320px) !important;
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #fff !important;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center !important;
    padding: 10px 16px;
  }
}




/* Desktop slide-out "Menu" panel.
   Webflow toggles this via inline `display: flex` on click; the !important
   keeps our gradient on top of the inline white background that ships in
   the export. */
.off-page-menu {
  overflow: hidden;
  isolation: isolate;
  background-color: var(--zzn-blue) !important;
  background-image: linear-gradient(90deg, rgba(0, 38, 50, 0.99), rgba(0, 38, 50, 0.96)) !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff !important;
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: -40px 0 80px -20px rgba(0, 0, 0, 0.6);
}
.off-page-menu > * {
  position: relative;
  z-index: 1;
}
.off-page-menu a,
.off-page-menu .nav-link,
.off-page-menu .footer-nav-link,
.off-page-menu .quick-list-item,
.off-page-menu .quick-list-item * {
  color: #fff !important;
}
.off-page-menu .quick-list-item {
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
  transition: background 0.2s ease, padding-left 0.25s ease;
}
.off-page-menu .quick-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
  padding-left: 28px;
}

/* Hamburger button when open */
.w-nav-button.w--open,
.menu-button.w--open {
  background-color: rgba(0, 38, 50, 0.75) !important;
  color: #fff !important;
}

/* ---------- 2. Cookie banner ---------- */
#zzn-cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 99999;
  width: min(440px, calc(100vw - 32px));
  color: #fff;
  border-radius: 18px;
  font-family: "Eudoxussans", Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  transform: translateY(24px) scale(0.98);
  opacity: 0;
  transform-origin: 12px calc(100% - 12px);
  will-change: transform, opacity;
  transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(0, 22, 30, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.75),
    0 0 60px -20px rgba(210, 68, 16, 0.25);
  backdrop-filter: blur(24px) saturate(160%);
}
#zzn-cookie-banner[data-visible="true"] {
  transform: translateY(0) scale(1);
  opacity: 1;
}
#zzn-cookie-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(54, 70, 4, 0.32) 0%, transparent 55%),
    radial-gradient(110% 90% at 100% 0%, rgba(0, 56, 74, 0.45) 0%, transparent 60%);
  opacity: 0.95;
}
/* Animated gradient border ring (mask trick — only paints the 1.5px perimeter) */
#zzn-cookie-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--zzn-blue) 0%, var(--zzn-green) 45%, var(--zzn-orange) 100%);
  background-size: 220% 220%;
  animation: zzn-gradient-shift 14s ease-in-out infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
}
#zzn-cookie-banner .zzn-cb-inner {
  position: relative;
  z-index: 1;
  padding: 22px 24px;
}

#zzn-cookie-banner h2 {
  font-family: "Font Bureau Heronsans", "Eudoxussans", Inter, sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
#zzn-cookie-banner h2::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zzn-green), var(--zzn-orange));
  box-shadow: 0 0 12px rgba(210, 68, 16, 0.7);
}
#zzn-cookie-banner p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
}
#zzn-cookie-banner a {
  color: #ff8a3d;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 138, 61, 0.35);
  transition: border-color 0.15s ease, color 0.15s ease;
}
#zzn-cookie-banner a:hover {
  color: #ffa769;
  border-bottom-color: #ffa769;
}
#zzn-cookie-banner .zzn-cb-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}
#zzn-cookie-banner button {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0 16px;
  height: 44px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  background-clip: padding-box;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.08s ease;
}
#zzn-cookie-banner button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
#zzn-cookie-banner button:active { transform: translateY(1px); }
#zzn-cookie-banner button.zzn-cb-primary {
  background: linear-gradient(90deg, var(--zzn-green) 0%, var(--zzn-orange) 100%);
  background-clip: padding-box;
  border: 1px solid transparent;
  color: #fff;
  flex: 1 1 auto;
  box-shadow: 0 8px 24px -8px rgba(210, 68, 16, 0.55);
}
#zzn-cookie-banner button.zzn-cb-primary:hover {
  background: linear-gradient(90deg, #475c06 0%, #ea5418 100%);
  background-clip: padding-box;
  box-shadow: 0 10px 28px -8px rgba(210, 68, 16, 0.7);
}


/* Preferences panel */
#zzn-cookie-banner .zzn-cb-prefs {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  padding-top: 0;
  transition:
    max-height 0.36s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.24s ease,
    margin 0.32s ease,
    padding 0.32s ease,
    border-color 0.32s ease;
}
#zzn-cookie-banner[data-mode="prefs"] .zzn-cb-prefs {
  max-height: 520px;
  opacity: 1;
  margin: 4px 0 16px;
  padding-top: 14px;
  border-top-color: rgba(255, 255, 255, 0.08);
}
#zzn-cookie-banner .zzn-cb-intro {
  transition: opacity 0.22s ease, max-height 0.32s ease;
  max-height: 320px;
  opacity: 1;
  overflow: hidden;
}
#zzn-cookie-banner[data-mode="prefs"] .zzn-cb-intro {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
}
#zzn-cookie-banner .zzn-cb-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
}
#zzn-cookie-banner .zzn-cb-row + .zzn-cb-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#zzn-cookie-banner .zzn-cb-row label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}
#zzn-cookie-banner .zzn-cb-row label small {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11.5px;
  font-weight: 400;
  margin-top: 3px;
  letter-spacing: 0;
  text-transform: none;
}

/* Custom toggle switch */
#zzn-cookie-banner .zzn-cb-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 38px;
  height: 22px;
  margin: 1px 0 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
#zzn-cookie-banner .zzn-cb-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#zzn-cookie-banner .zzn-cb-row input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--zzn-green), var(--zzn-orange));
  border-color: transparent;
}
#zzn-cookie-banner .zzn-cb-row input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}
#zzn-cookie-banner .zzn-cb-row input[type="checkbox"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Reopen pill */
#zzn-cookie-reopen {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9998;
  background: rgba(14, 18, 6, 0.78);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 9px 16px 9px 32px;
  font-family: "Eudoxussans", Inter, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(140%);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  display: none;
}
#zzn-cookie-reopen[data-visible="true"] { display: inline-flex; align-items: center; }
#zzn-cookie-reopen::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zzn-green), var(--zzn-orange));
  box-shadow: 0 0 8px rgba(210, 68, 16, 0.6);
}
#zzn-cookie-reopen:hover {
  background: rgba(20, 26, 8, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  #zzn-cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    border-radius: 16px;
  }
  #zzn-cookie-banner .zzn-cb-inner { padding: 18px 18px; }
  #zzn-cookie-banner .zzn-cb-actions button { flex: 1 1 calc(50% - 4px); }
  #zzn-cookie-banner button.zzn-cb-primary { flex: 1 1 100%; order: -1; }
  #zzn-cookie-reopen { left: 10px; bottom: 10px; }
}

/* Studio styles moved to public/css/studio.css (linked from admin/auth route heads). */


/* ============================================================
   ZZN scroll-reveal + menu polish
   ============================================================ */

/* 1. Trigger Webflow reveals earlier — finish during approach. */
@supports (animation-timeline: view()) {
  [data-w-id]:not(.social-items [data-w-id]):not(.social-block):not(.w-nav-overlay):not(.off-page-menu):not(.navigation-cover) {
    animation: zzn-early-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
  @keyframes zzn-early-reveal {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
@supports not (animation-timeline: view()) {
  [data-w-id][style*="opacity: 0"]:not(.social-items [data-w-id]):not(.social-block) {
    opacity: 1 !important;
  }
}


/* Social grid — enforce a true 2x2 square layout regardless of content. */
.box:has(> .social-items) {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}
.social-items {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  grid-auto-columns: minmax(0, 1fr) !important;
}
.social-items .social-block {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(14px);
  animation: zzn-social-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* /team gives <body> a drifting radial glow via ::before. The Webflow
   "shade" wrapper sits over it filled with flat, opaque site blue, which
   punched a hard-edged rectangle out of that glow around the "Lernen wir
   uns kennen" block. Only /team has both layers — every other page has the
   same opaque wrapper but no glow behind it, so it reads as blue on blue. */
body[data-page="team"] .wrapper.shade-wrapper { background-color: transparent; }

/* Icons only — the handles read as noise at tile size and repeat what the
   mark already says. Hidden rather than stripped from the markup so the
   link text stays available to screen readers via the tile's own label. */
.social-items .social-text { display: none !important; }
.social-items .social-block {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.social-items .social-icon { margin-bottom: 0 !important; }

.social-items .social-block:nth-child(1) { animation-delay: 0.00s; }
.social-items .social-block:nth-child(2) { animation-delay: 0.06s; }
.social-items .social-block:nth-child(3) { animation-delay: 0.12s; }
.social-items .social-block:nth-child(4) { animation-delay: 0.18s; }
@keyframes zzn-social-in {
  to { opacity: 1; transform: translateY(0); }
}
.social-items .social-block:hover {
  transform: translateY(-2px) scale(1.015);
}
.overlay-social {
  display: block !important;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.social-block:hover .overlay-social { opacity: 1; }

/* 3. Menu — smoother open. (Webflow toggles inline `display`, which we must
   not override or the nav script's open/close state breaks.) */
.w-nav-overlay[style*="display: block"] .nav-link,
.w-nav-overlay[style*="display:block"] .nav-link,
.w-nav-overlay[style*="display: block"] .w-nav-link,
.w-nav-overlay[style*="display:block"] .w-nav-link {
  animation: zzn-navlink-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes zzn-navlink-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.w-nav-overlay .nav-link:nth-child(1),
.w-nav-overlay .w-nav-link:nth-child(1) { animation-delay: 0.05s; }
.w-nav-overlay .nav-link:nth-child(2),
.w-nav-overlay .w-nav-link:nth-child(2) { animation-delay: 0.10s; }
.w-nav-overlay .nav-link:nth-child(3),
.w-nav-overlay .w-nav-link:nth-child(3) { animation-delay: 0.15s; }
.w-nav-overlay .nav-link:nth-child(4),
.w-nav-overlay .w-nav-link:nth-child(4) { animation-delay: 0.20s; }
.w-nav-overlay .nav-link:nth-child(5),
.w-nav-overlay .w-nav-link:nth-child(5) { animation-delay: 0.25s; }
.w-nav-overlay .nav-link:nth-child(6),
.w-nav-overlay .w-nav-link:nth-child(6) { animation-delay: 0.30s; }

.off-page-menu .quick-list-item {
  animation: zzn-navlink-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.off-page-menu .quick-list-item:nth-child(1) { animation-delay: 0.06s; }
.off-page-menu .quick-list-item:nth-child(2) { animation-delay: 0.12s; }
.off-page-menu .quick-list-item:nth-child(3) { animation-delay: 0.18s; }
.off-page-menu .quick-list-item:nth-child(4) { animation-delay: 0.24s; }
.off-page-menu .quick-list-item:nth-child(5) { animation-delay: 0.30s; }

/* Hamburger button — smooth toggle. */
.w-nav-button,
.w-nav-button * {
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease;
}

/* Smooth close (driven by /js/menu-close.js adding `.zzn-closing`). */
.w-nav-overlay.zzn-closing {
  opacity: 0 !important;
  transform: translateY(-6px) scale(0.98) !important;
  transition: opacity 0.26s ease, transform 0.28s cubic-bezier(0.4, 0, 1, 1) !important;
  pointer-events: none !important;
}
.off-page-menu.zzn-closing {
  transform: translateX(100%) !important;
  opacity: 0 !important;
  transition: transform 0.38s cubic-bezier(0.4, 0, 1, 1), opacity 0.26s ease !important;
  pointer-events: none !important;
}



/* 4. Cookie banner button micro-interaction. */
#zzn-cookie-banner button {
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    transform 0.08s ease;
}
#zzn-cookie-banner button:active { transform: scale(0.97); }

/* 5. Reduced motion — opt out of all of the above. */
@media (prefers-reduced-motion: reduce) {
  [data-w-id],
  .social-items .social-block,
  .w-nav-overlay,
  .w-nav-overlay .nav-link,
  .w-nav-overlay .w-nav-link,
  .off-page-menu,
  .off-page-menu .quick-list-item,
  .overlay-social,
  #zzn-cookie-banner {
    animation: none !important;
    transition: opacity 0.15s ease !important;
    transform: none !important;
  }
  [data-w-id] { opacity: 1 !important; }
}




/* ============================================================
   Project detail page — custom layout (replaces Webflow's
   two adapt-clients sections). Matches menu / cookie aesthetic:
   deep-blue base, brand-gradient accents, generous negative space.
   ============================================================ */

.zzn-projekt {
  color: #f4f6f8;
  background: var(--zzn-blue);
  padding-bottom: 6rem;
}

/* --- Hero --- */
.zzn-projekt__hero {
  position: relative;
  width: 100%;
  min-height: 62vh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}
.zzn-projekt__hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.02);
}
.zzn-projekt__hero-veil {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,38,50,0.35) 0%, rgba(0,38,50,0.55) 55%, rgba(0,38,50,0.98) 100%),
    linear-gradient(115deg, rgba(54,70,4,0.35), rgba(210,68,16,0.25) 60%, transparent 90%);
  background-size: 100% 100%, 220% 220%;
  animation: zzn-gradient-shift 22s ease-in-out infinite;
  pointer-events: none;
}
.zzn-projekt__hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
}
.zzn-projekt__kicker {
  display: inline-block;
  font-family: 'Eudoxussans', 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f0e6d0;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(54,70,4,0.55), rgba(210,68,16,0.55));
  border: 1px solid rgba(255,255,255,0.14);
  margin-bottom: 1.5rem;
}
.zzn-projekt__title {
  font-family: 'Heronsans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}

/* --- Body: 2-col meta + prose --- */
.zzn-projekt__body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 4rem;
}
@media (max-width: 800px) {
  .zzn-projekt__body { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.5rem; }
}
.zzn-projekt__meta {
  position: sticky;
  top: 6rem;
  align-self: start;
  padding: 1.5rem;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}
@media (max-width: 800px) { .zzn-projekt__meta { position: static; } }
.zzn-projekt__meta-label {
  font-family: 'Eudoxussans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1rem;
}
.zzn-projekt__logo {
  display: block;
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.zzn-projekt__logo--light { background: #fff; }
.zzn-projekt__logo--dark  { background: var(--zzn-blue, #0e2a34); }
.zzn-projekt__meta-name {
  font-family: 'Heronsans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  line-height: 1.3;
}
.zzn-projekt__prose {
  font-family: 'Eudoxussans', 'Inter', system-ui, sans-serif;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.86);
  max-width: 65ch;
}
.zzn-projekt__prose > *:first-child { margin-top: 0; }
.zzn-projekt__prose p { margin: 0 0 1.2em; }
.zzn-projekt__prose p:first-of-type::first-line { color: #fff; }
.zzn-projekt__prose strong { color: #fff; font-weight: 600; }
.zzn-projekt__prose a {
  color: #fff;
  border-bottom: 1px solid rgba(210,68,16,0.65);
  text-decoration: none;
  transition: border-color .2s;
}
.zzn-projekt__prose a:hover { border-bottom-color: #d24410; }
.zzn-projekt__prose h2, .zzn-projekt__prose h3 {
  font-family: 'Heronsans', sans-serif;
  color: #fff;
  margin: 2em 0 0.6em;
  line-height: 1.2;
}
.zzn-projekt__prose h2 { font-size: 1.6rem; }
.zzn-projekt__prose h3 { font-size: 1.25rem; }
.zzn-projekt__prose ul, .zzn-projekt__prose ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.zzn-projekt__prose li { margin: 0.35em 0; }

/* --- Gallery — Pinterest-style masonry that respects native image aspect ratios --- */
.zzn-projekt-gallery {
  max-width: 1200px;
  margin: 2rem auto 0;
  padding: 0 2rem;
  column-count: 3;
  column-gap: 1.25rem;
}
@media (max-width: 900px) { .zzn-projekt-gallery { column-count: 2; } }
@media (max-width: 560px) { .zzn-projekt-gallery { column-count: 1; } }
.zzn-projekt-gallery__item {
  margin: 0 0 1.25rem;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
}
.zzn-projekt-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s ease;
}
.zzn-projekt-gallery__item:hover img { transform: scale(1.03); }

/* ============================================================
   Homepage project wall — editorial rhythm grid.
   Every 5th card spans 2 cols to break the flat matrix.
   ============================================================ */
.zzn-proj-wall {
  --gap: 1.25rem;
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(260px, 26vw, 420px);
  gap: var(--gap);
  margin: 2rem auto 0;
  width: 100%;
  max-width: 1280px;
}
@media (max-width: 1024px) { .zzn-proj-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(280px, 40vw, 440px); } }
@media (max-width: 640px)  { .zzn-proj-wall { grid-template-columns: 1fr; grid-auto-rows: 68vw; } }

.zzn-proj-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  isolation: isolate;
  display: block;
  text-decoration: none;
  color: #fff;
  background: var(--zzn-blue);
  border: 1px solid rgba(255,255,255,0.06);
  transform: translateZ(0);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
}
.zzn-proj-card--wide { grid-column: span 2; }
@media (max-width: 640px) { .zzn-proj-card--wide { grid-column: span 1; } }

.zzn-proj-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .8s cubic-bezier(.16,1,.3,1), filter .5s;
  filter: saturate(0.9);
}
.zzn-proj-card__veil {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,20,28,0) 25%, rgba(0,20,28,0.55) 55%, rgba(0,20,28,0.92) 82%, rgba(0,20,28,0.98) 100%),
    linear-gradient(115deg, rgba(54,70,4,0) 55%, rgba(210,68,16,0.30) 100%);
  transition: opacity .5s;
}
/* Sharper readability shade behind the text block itself */
.zzn-proj-card__body::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; top: -40%;
  background: linear-gradient(180deg, rgba(0,20,28,0) 0%, rgba(0,20,28,0.55) 55%, rgba(0,20,28,0.9) 100%);
  z-index: -1;
  pointer-events: none;
}
.zzn-proj-card__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.4rem 1.5rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.45rem;
  isolation: isolate;
}
.zzn-proj-card__kicker {
  font-family: 'Eudoxussans', 'Inter', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #ffe8d6;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.zzn-proj-card__title {
  font-family: 'Heronsans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 1.7vw, 1.8rem);
  line-height: 1.12;
  margin: 0;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
}
.zzn-proj-card--wide .zzn-proj-card__title {
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
}
.zzn-proj-card__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.65rem;
  font-family: 'Eudoxussans', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.zzn-proj-card__cta svg { transition: transform .35s cubic-bezier(.16,1,.3,1); }

/* Brand-gradient outline ring, revealed on hover */
.zzn-proj-card::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(120deg, rgba(54,70,4,0.9), rgba(210,68,16,0.9) 60%, rgba(54,70,4,0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.zzn-proj-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55); }
.zzn-proj-card:hover .zzn-proj-card__img { transform: scale(1.06); filter: saturate(1.05); }
.zzn-proj-card:hover .zzn-proj-card__veil { opacity: 1; }
.zzn-proj-card:hover .zzn-proj-card__cta { opacity: 1; transform: translateY(0); }
.zzn-proj-card:hover .zzn-proj-card__cta svg { transform: translateX(4px); }
.zzn-proj-card:hover::after { opacity: 1; }

/* Kill Webflow's default wrapper padding around the injected wall */
.collection-list-wrapper-3 { width: 100%; }

/* "Mehr in Arbeit" teaser below the last published project */
.zzn-proj-more {
  grid-column: 1 / -1;
  max-width: 1200px;
  margin: 2.5rem auto 0;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: 22px;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)),
    var(--zzn-blue);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.zzn-proj-more::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 20% 0%, rgba(210,68,16,0.22), transparent 60%),
    radial-gradient(70% 70% at 85% 100%, rgba(54,70,4,0.28), transparent 60%);
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}
.zzn-proj-more__inner { position: relative; z-index: 1; }
.zzn-proj-more__title {
  font-family: 'Heronsans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 0.55rem;
  color: #fff;
}
.zzn-proj-more__text {
  font-family: 'Eudoxussans', sans-serif;
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 46ch;
  color: rgba(255,255,255,0.72);
}
@media (max-width: 640px) {
  .zzn-proj-more { margin-top: 1.5rem; }
}


/* ============================================================
   About / Projekte page — service categories + project wall
   ============================================================ */
/* ============================================================
   About — "Kreation → Umsetzung" strip
   ------------------------------------------------------------
   A white, hairline-ruled index in the vein of a fashion
   e-commerce landing (Balenciaga / 032c): rules instead of
   cards, uppercase display type, generous empty space.

   Structure: one expandable ROW (Kreation), four expandable
   COLUMNS (disciplines), one expandable ROW (Umsetzung).
   Behaviour lives in /js/zzn-kreation.js, which only toggles
   .is-open — all motion is CSS.
   ============================================================ */

.zzn-kr {
  --kr-ink: #0a0a0a;
  --kr-muted: rgba(0, 0, 0, 0.52);
  --kr-line: rgba(0, 0, 0, 0.16);
  --kr-hover: #f4f4f1;
  --kr-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Pink/red ramp, shared by the top band and the outro headline so the
     page opens and closes on the same colour. */
  --kr-pink-deep: #4a0d22;
  --kr-pink: #c81e5a;
  --kr-pink-hot: #ff5c7a;

  position: relative;
  background: #fff;
  color: var(--kr-ink);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  /* The section paints its own white, so it must sit above the
     dark-blue <body> that the rest of the site relies on. */
  isolation: isolate;
}

/* Blue → white ramp behind the (transparent) nav. Multi-stop so the
   teal does not pass through a muddy grey on its way to white. */
/* Top band: the homepage hero video, multiplied with the brand-surface
   gradient animation (zzn-gradient-shift) recoloured pink. The mask
   dissolves the whole stack into the white page, so the band can run deep
   enough to wash over the top of the heading without a hard edge. */
.zzn-kr__fade {
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(460px, 68vh, 860px);
  pointer-events: none;
  overflow: hidden;
  isolation: isolate; /* keeps the multiply off everything underneath */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
.zzn-kr__fade-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Half strength: at full opacity the multiply crushed the video to a flat
   red. At 0.5 the footage still reads through the pink. */
.zzn-kr__fade-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--kr-pink-deep) 0%, var(--kr-pink) 45%, var(--kr-pink-hot) 100%);
  background-size: 220% 220%;
  animation: zzn-gradient-shift 14s ease-in-out infinite;
  mix-blend-mode: multiply;
  opacity: 0.5;
}
/* A looping video is motion too, so drop to the flat gradient. */
@media (prefers-reduced-motion: reduce) {
  .zzn-kr__fade-tint { animation: none; mix-blend-mode: normal; }
  .zzn-kr__fade-video { display: none; }
}

.zzn-kr__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

/* --- Head ------------------------------------------------- */
/* Starts inside the tail of the band on purpose — the mask has faded it to
   a light wash by here, so the heading reads while still sitting in colour. */
.zzn-kr__head {
  padding-top: clamp(380px, 56vh, 700px);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.zzn-kr__eyebrow {
  font-family: 'Eudoxussans', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kr-muted);
  margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
}
.zzn-kr__display {
  font-family: 'Font Bureau Heronsans', 'Heronsans', sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 8.5vw, 6.5rem);
  /* Uppercase German needs room for the umlaut: below ~0.95 the dots on
     Ü/Ö collide with the descender line of the row above. */
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--kr-ink);
  margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
}
.zzn-kr__lede {
  font-family: 'Eudoxussans', sans-serif;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.55;
  color: var(--kr-muted);
  margin: 0;
  max-width: 46ch;
}

/* --- Shared rules ----------------------------------------- */
.zzn-kr__grid { border-top: 1px solid var(--kr-line); }
.zzn-kr__row,
.zzn-kr__cols { border-bottom: 1px solid var(--kr-line); }

/* Every trigger is a real <button>; strip the UA chrome. */
.zzn-kr__trigger {
  display: flex;
  width: 100%;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.45s var(--kr-ease);
}
.zzn-kr__trigger:focus-visible {
  outline: 2px solid var(--zzn-orange, #d24410);
  outline-offset: -3px;
}

.zzn-kr__num {
  font-family: 'Eudoxussans', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--kr-muted);
  font-variant-numeric: tabular-nums;
}
.zzn-kr__title {
  display: block;
  font-family: 'Font Bureau Heronsans', 'Heronsans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.95;
  color: var(--kr-ink);
}
.zzn-kr__teaser {
  display: block;
  font-family: 'Eudoxussans', sans-serif;
  line-height: 1.5;
  color: var(--kr-muted);
}

/* --- Rows (Kreation / Umsetzung) --------------------------- */
.zzn-kr__row .zzn-kr__trigger {
  align-items: baseline;
  gap: clamp(1rem, 3.5vw, 3.5rem);
  padding: clamp(1.6rem, 3vw, 2.75rem) clamp(0.75rem, 1.5vw, 1.25rem);
}
/* Fixed gutter so the ordinal, the title and the expanded panel below all
   sit on the same vertical. --kr-gutter mirrors the trigger's own box. */
.zzn-kr__row {
  --kr-gutter: calc(
    clamp(0.75rem, 1.5vw, 1.25rem) + 3rem + clamp(1rem, 3.5vw, 3.5rem)
  );
}
.zzn-kr__row .zzn-kr__num { flex: 0 0 auto; width: 3rem; }
.zzn-kr__row-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.zzn-kr__row .zzn-kr__title { font-size: clamp(1.9rem, 5vw, 3.4rem); }
.zzn-kr__row .zzn-kr__teaser {
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  max-width: 52ch;
}

/* +/− indicator: two hairlines, the vertical one collapses when open. */
.zzn-kr__sign {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  align-self: center;
}
.zzn-kr__sign::before,
.zzn-kr__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--kr-ink);
  transition: transform 0.5s var(--kr-ease);
}
.zzn-kr__sign::after { transform: rotate(90deg); }
.zzn-kr__row.is-open .zzn-kr__sign::after { transform: rotate(90deg) scaleX(0); }

/* --- Columns (the disciplines) ----------------------------- */
.zzn-kr__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  transition: grid-template-columns 0.65s var(--kr-ease);
}
/* Column is a flex stack so the trigger absorbs the leftover height. Without
   this a teaser that wraps to one more line pushes its "Mehr" foot out of
   line with its neighbours', since the grid stretches the column but not the
   button inside it. */
.zzn-kr__col {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--kr-line);
  min-width: 0;
}
.zzn-kr__col:first-child { border-left: 0; }
.zzn-kr__col .zzn-kr__trigger { flex: 1 1 auto; }

.zzn-kr__col .zzn-kr__trigger {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  /* Tall and mostly empty on purpose — the whitespace is the point. */
  min-height: clamp(340px, 48vh, 520px);
  padding: clamp(1.4rem, 2.2vw, 2.1rem) clamp(1.05rem, 1.7vw, 1.6rem);
}
.zzn-kr__col { transition: background-color 0.45s var(--kr-ease); }
.zzn-kr__col .zzn-kr__title {
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  transition: transform 0.5s var(--kr-ease);
}
.zzn-kr__col .zzn-kr__teaser { font-size: 0.88rem; max-width: 24ch; }

/* Pushes the foot to the bottom of the tall column. */
.zzn-kr__spacer { flex: 1 1 auto; }

.zzn-kr__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 1.25rem;
  border-top: 1px solid var(--kr-line);
  color: var(--kr-ink);
}
.zzn-kr__foot-label {
  font-family: 'Eudoxussans', sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kr-muted);
  transition: color 0.4s var(--kr-ease);
}
/* Both labels ship in the markup; CSS picks the one that matches state,
   so the swap cannot fall out of sync with the .is-open class. */
.zzn-kr__foot-label [data-label="open"],
.zzn-kr__col.is-open .zzn-kr__foot-label [data-label="closed"] { display: none; }
.zzn-kr__col.is-open .zzn-kr__foot-label [data-label="open"] { display: inline; }
.zzn-kr__arrow {
  display: block;
  transition: transform 0.55s var(--kr-ease);
}
/* Flip up when open (dismissal). The hover nudge lives in the
   pointer-gated block below. */
.zzn-kr__col.is-open .zzn-kr__arrow { transform: rotate(180deg); }

/* --- Hover affordances ------------------------------------
   Gated on a real pointer. On touch, :hover latches after a tap and
   leaves a column tinted and shifted until you tap elsewhere, which
   reads as a stuck selection rather than feedback. */
@media (hover: hover) and (pointer: fine) {
  .zzn-kr__row:hover .zzn-kr__trigger { background-color: var(--kr-hover); }
  /* Tint the whole column, not just the trigger, so an open panel stays
     visually attached to the header that opened it. */
  .zzn-kr__col:hover { background-color: var(--kr-hover); }
  .zzn-kr__col:hover .zzn-kr__title { transform: translateX(4px); }
  .zzn-kr__col:hover .zzn-kr__foot-label { color: var(--kr-ink); }
  /* Nudge down on hover — the invitation to click. */
  .zzn-kr__col:hover .zzn-kr__arrow { transform: translateY(4px); }
  .zzn-kr__col.is-open:hover .zzn-kr__arrow { transform: rotate(180deg) translateY(4px); }
}

/* Hovered column takes a little extra width — the "lean in" cue.
   :has() is unsupported on older engines, where it simply no-ops.
   Must stay inside the 4-up breakpoint: these selectors outrank the
   narrow-screen track reset, so unscoped they would drag the 2-up and
   1-up layouts back to four columns on hover. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .zzn-kr__cols:has(.zzn-kr__col:nth-child(1):hover) { grid-template-columns: 1.14fr 1fr 1fr 1fr; }
  .zzn-kr__cols:has(.zzn-kr__col:nth-child(2):hover) { grid-template-columns: 1fr 1.14fr 1fr 1fr; }
  .zzn-kr__cols:has(.zzn-kr__col:nth-child(3):hover) { grid-template-columns: 1fr 1fr 1.14fr 1fr; }
  .zzn-kr__cols:has(.zzn-kr__col:nth-child(4):hover) { grid-template-columns: 1fr 1fr 1fr 1.14fr; }
}

/* --- Expanding panel --------------------------------------- */
/* 0fr → 1fr animates without measuring heights in JS. The inner box
   must clip and be allowed to shrink below its content height. */
.zzn-kr__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--kr-ease);
}
.zzn-kr__panel-inner {
  overflow: hidden;
  min-height: 0;
}
.zzn-kr__panel-content {
  padding: 0 clamp(1.05rem, 1.7vw, 1.6rem) clamp(1.75rem, 3vw, 2.5rem);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--kr-ease), transform 0.5s var(--kr-ease);
}
.is-open > .zzn-kr__panel { grid-template-rows: 1fr; }
.is-open > .zzn-kr__panel .zzn-kr__panel-content {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
/* Rows indent their panel to clear the ordinal gutter. */
.zzn-kr__row .zzn-kr__panel-content {
  padding-left: var(--kr-gutter);
  max-width: 68ch;
}

.zzn-kr__panel-content p {
  font-family: 'Eudoxussans', sans-serif;
  font-size: clamp(0.88rem, 1.05vw, 0.98rem);
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.72);
  margin: 0 0 1rem;
}
.zzn-kr__panel-content p:last-of-type { margin-bottom: 1.5rem; }

.zzn-kr__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
}
.zzn-kr__tags li {
  font-family: 'Eudoxussans', sans-serif;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kr-ink);
  border: 1px solid var(--kr-line);
  padding: 0.42rem 0.75rem;
}

/* --- Outro: the closing statement under 03 ------------------ */
.zzn-kr__outro {
  padding: clamp(3.5rem, 8vw, 7rem) clamp(0.75rem, 1.5vw, 1.25rem)
           clamp(1rem, 3vw, 2rem);
}
.zzn-kr__outro-title {
  font-family: 'Font Bureau Heronsans', 'Heronsans', sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--kr-ink);
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}
/* Pink version of the homepage headline sweep. Three stops easing back and
   forth barely read as movement, so this uses a repeating dark->hot->dark
   ramp travelling linearly across 4x its own width — the same trick, and
   the same keyframes, as .zzn-grad-move. First and last stop match so the
   loop has no seam. Light end stops at #ff8fb0, which still holds on white. */
.zzn-kr__grad {
  background: linear-gradient(
    115deg,
    #4a0d22 0%, #8c0f2e 12%, #c81e5a 25%, #ff2d6f 37%,
    #ff8fb0 50%, #ff2d6f 63%, #c81e5a 75%, #8c0f2e 88%, #4a0d22 100%
  );
  background-size: 400% 100%;
  animation: zzn-grad-move 9s linear infinite;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .zzn-kr__grad { animation: none; }
}
.zzn-kr__outro-text {
  font-family: 'Eudoxussans', sans-serif;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: var(--kr-muted);
  margin: 0;
  max-width: 46ch;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 991px) {
  .zzn-kr__cols { grid-template-columns: repeat(2, 1fr); }
  /* Row 2 of the 2x2 needs its own rule, and col 3 restarts the row. */
  .zzn-kr__col:nth-child(3) { border-left: 0; }
  .zzn-kr__col:nth-child(n + 3) { border-top: 1px solid var(--kr-line); }
}
@media (max-width: 640px) {
  /* Deliberately still 2-up: one column per row would read as four more
     list items and blur the line between 01, 02 and 03. Two columns keep
     02 legible as a single block of four sub-steps. */
  .zzn-kr__col .zzn-kr__trigger { min-height: 200px; padding-inline: 0.85rem; }
  .zzn-kr__col .zzn-kr__title { font-size: 1.35rem; }
  .zzn-kr__col .zzn-kr__teaser { font-size: 0.8rem; }
  .zzn-kr__foot-label { font-size: 0.6rem; letter-spacing: 0.18em; }

  .zzn-kr__head { padding-top: clamp(210px, 30vh, 280px); }
  .zzn-kr__row .zzn-kr__trigger { gap: 0.75rem; padding-inline: 0.5rem; }
  .zzn-kr__row { --kr-gutter: calc(0.5rem + 2.25rem + 0.75rem); }
  .zzn-kr__row .zzn-kr__num { width: 2.25rem; }

  /* Group separation. On a narrow screen the three stages otherwise read
     as one long ladder of rules, so 01 / 02 / 03 each get a heavier
     boundary than the hairlines used inside 02. */
  .zzn-kr__grid { border-top-width: 2px; border-top-color: var(--kr-ink); }
  .zzn-kr__row { border-bottom-width: 2px; border-bottom-color: var(--kr-ink); }
  .zzn-kr__cols { border-bottom-width: 2px; border-bottom-color: var(--kr-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .zzn-kr__panel,
  .zzn-kr__panel-content,
  .zzn-kr__cols,
  .zzn-kr__arrow,
  .zzn-kr__title,
  .zzn-kr__sign::before,
  .zzn-kr__sign::after,
  .zzn-kr__trigger { transition: none !important; }
}

/* --- About: project wall wrapper --- */
.zzn-about-projects {
  background: var(--zzn-blue);
  color: #fff;
  padding: 3rem 2rem 6rem;
}
.zzn-about-projects__head {
  max-width: 1200px;
  margin: 0 auto 2rem;
}
.zzn-about-projects__kicker {
  font-family: 'Eudoxussans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.6rem;
}
.zzn-about-projects__title {
  font-family: 'Heronsans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin: 0;
  color: #fff;
}
.zzn-about-projects .zzn-proj-wall {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- About: project wall, light variant ---------------------
   Carries the white, hairline treatment of .zzn-kr through to
   the CMS wall so the page reads as one surface instead of two.
   Scoped to --light; the homepage keeps its dark --home variant.
   ------------------------------------------------------------ */
.zzn-about-projects--light {
  /* Same gutter + measure as .zzn-kr__inner, so the hairline under the
     heading lands on exactly the same vertical as the rules above it. */
  --kr-pad: clamp(1.25rem, 4vw, 3.5rem);
  --kr-measure: calc(1440px - 2 * clamp(1.25rem, 4vw, 3.5rem));

  background: #fff;
  color: #0a0a0a;
  padding: clamp(3.5rem, 7vw, 6rem) var(--kr-pad) 0;
}
.zzn-about-projects--light .zzn-about-projects__head,
.zzn-about-projects--light .zzn-proj-wall {
  max-width: var(--kr-measure);
  margin-inline: auto;
  padding-inline: 0;
}
.zzn-about-projects--light .zzn-about-projects__head {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.zzn-about-projects--light .zzn-about-projects__kicker { color: rgba(0, 0, 0, 0.52); }
.zzn-about-projects--light .zzn-about-projects__title {
  color: #0a0a0a;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}
/* Square corners to match the ruled grid above. */
.zzn-about-projects--light .zzn-proj-card { border-radius: 0; }

/* White wall blushes into the soft-pink closing block. The two are only a
   few percent apart, so this is a short tint shift rather than the long
   ramp a dark landing needed. Full-bleed via the negative inline margin. */
.zzn-about-projects--light::after {
  content: "";
  display: block;
  height: clamp(140px, 18vh, 240px);
  margin: clamp(4rem, 8vw, 7rem) calc(-1 * var(--kr-pad)) 0;
  background: linear-gradient(180deg, #fff 0%, #fffafb 45%, var(--kr-blush) 100%);
}

/* ---- "Sie melden sich." closing block (/about only) ----
   Soft blush, near white, with the type inverted to dark. It paints
   nothing of its own, so without this the blue <body> showed through.
   The lower third hands back to the site blue for the footer; blush to
   blue direct is muddy, so it routes through lilac and violet. */
.zzn-about-projects--light + .section {
  /* Webflow gives this section no vertical padding and its content
     overflowed the box by 40px. The padding both contains it and clears
     the hand-off ramp below. */
  /* Shorter ramp than before. At 340px+ the blush band read as an empty,
     unfinished screen between the projects and the footer. */
  padding-bottom: clamp(180px, 22vh, 300px);
  background-color: var(--kr-blush);
  /* Blush straight down into the site blue. The earlier version detoured
     through lilac and violet to avoid a muddy mix; the purple read as an
     off-brand colour of its own, so the ramp now steps through desaturated
     blue-greys taken from the navy itself, which stays neutral the whole
     way and still never bands. */
  background-image: linear-gradient(
    180deg,
    rgba(253, 244, 247, 0) 0%, #f1eae8 14%, #d6dde0 32%, #a8bfc4 48%,
    #6d979f 63%, #3c7079 76%, #1b4c57 88%, var(--zzn-blue) 100%
  );
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% clamp(260px, 32vh, 420px);
}
/* Three Webflow children fill the same box with the flat site blue, which
   covered everything but the top few pixels. Cleared only for this page's
   instance — the homepage copy of this section keeps them. */
.zzn-about-projects--light + .section .background-shade,
.zzn-about-projects--light + .section .wrapper.shade-wrapper,
.zzn-about-projects--light + .section .background-cover {
  background-color: transparent;
  background-image: none;
}

/* Invert the type for the light ground. */
.zzn-about-projects--light + .section :is(h1, h2, h3, .large-heading, .giant-heading) {
  color: var(--kr-ink-on-blush);
}
/* `.section .body-display.large` sets the colour with !important and forces
   nested <strong> to #fff. Written out rather than wrapped in :is(), which
   takes only its most specific argument and tied at (0,3,0) — losing on
   source order to a rule ~170 lines further down. */
.zzn-about-projects--light + .section p,
.zzn-about-projects--light + .section .paragraph-2,
.zzn-about-projects--light + .section .body-display,
.zzn-about-projects--light + .section .body-display.large {
  color: rgba(10, 10, 10, 0.68) !important;
}
.zzn-about-projects--light + .section .paragraph-2 strong,
.zzn-about-projects--light + .section .body-display.large strong {
  color: var(--kr-ink-on-blush);
}
/* Webflow's .button.solid is a light pill for dark grounds; flip it. */
.zzn-about-projects--light + .section .button.solid {
  background-color: var(--kr-ink-on-blush);
  border-color: var(--kr-ink-on-blush);
  color: #fff;
}
.zzn-about-projects--light + .section .button.solid:hover {
  background-color: var(--zzn-orange);
  border-color: var(--zzn-orange);
}

/* This section carries a [data-w-id], so the global scroll-reveal fades the
   whole element in. That was fine while it was transparent, but it now
   paints the page ground — so mid-scroll the blush and the ramp faded too,
   letting the body show through as a grey wash with a hard edge along the
   section's top. Hold the box opaque; its contents still reveal via the
   .about-wrapper > * rule.
   !important because the reveal selector's five :not() arguments stack to
   (0,7,0) — no practical selector for this one section reaches that. */
@supports (animation-timeline: view()) {
  .zzn-about-projects--light + .section[data-w-id] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Drop the team photo strip and the social tiles from this page. Hidden
   rather than deleted server-side, which also stops the browser fetching
   their background images. */
.zzn-about-projects--light + .section .box-two,
.zzn-about-projects--light + .section .box {
  display: none;
}

/* ============================================================
   Homepage — unified section typography (match .giant-heading.start)
   + scroll-reveal animations + brand-gradient buttons
   ============================================================ */

/* Section headings on the homepage share the top hero style. */
.section .heading,
.section .large-heading,
.section .large-heading.small-tema,
.section .large-heading.small-tema.giant-heading.team,
.section .giant-heading.siemelden,
.section .giant-heading:not(.start) {
  font-family: 'Font Bureau Heronsans', 'Heronsans', 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.6rem, 6.2vw, 5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  text-transform: none;
  margin: 0 0 1.25rem;
  color: #fff;
}
.section .heading { text-transform: uppercase; }

/* Animated brand-gradient word in the "HUNGER AUF MEHR?" homepage heading. */
.zzn-fade-word {
  display: inline-block;
  color: #ffe8d6;
  background-image: linear-gradient(
    115deg,
    #fff6eb 0%,
    #ffe8d6 8%,
    #f7d9a8 17%,
    #f2a65a 28%,
    #ea6a3d 39%,
    #d24410 50%,
    #ea6a3d 61%,
    #f2a65a 72%,
    #f7d9a8 83%,
    #ffe8d6 92%,
    #fff6eb 100%
  );
  background-size: 220% 100%;
  background-repeat: repeat;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: zzn-mehr-gradient 8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes zzn-mehr-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .zzn-fade-word { animation: none; background-position: 25% 50%; }
}

/* Hunger auf Mehr: left-bound text; socials sit beside it on desktop */
.zzn-hunger-word {
  display: inline-block;
  margin-right: 0.18em;
}
.zzn-hunger-word:last-child { margin-right: 0; }
.zzn-hunger .about-wrapper {
  align-items: flex-start !important;
  text-align: left !important;
}
.zzn-hunger .about-wrapper > .clip {
  width: 100% !important;
  text-align: left !important;
}
.zzn-hunger .about-wrapper .giant-heading.siemelden {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.zzn-hunger .half-dual {
  justify-items: start !important;
  width: 100% !important;
}
.zzn-hunger .half-dual > .clip {
  text-align: left !important;
  max-width: 70ch !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
.zzn-hunger .half-dual > .clip p {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
.zzn-hunger .box {
  aspect-ratio: auto !important;
  width: 100% !important;
  max-width: 720px !important;
  background-color: transparent !important;
  margin: 0 0 3rem !important;
  position: relative !important;
  z-index: 1;
}
.zzn-hunger .social-items {
  width: 100% !important;
  height: auto !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}
.zzn-hunger { padding-bottom: clamp(4rem, 8vw, 8rem) !important; }

/* One-line headline at every width. "HUNGER AUF MEHR?" measures 8.89em, so
   the size has to key off the column it sits in, not the viewport — the
   column's share of the viewport swings from 81% at 390px to 73% at 480px,
   which no single vw coefficient covers. cqw does it directly; the clamp
   above it is the fallback for engines without container queries. */
/* "HUNGER AUF MEHR?" measures 8.89em, so the size is capped at
   column-width / 8.89. The column holds 81% of the viewport below 480px and
   73% up to 1600, which 8vw clears; at 1920 Webflow drops it to ~55%, so
   that range gets its own coefficient.
   Container queries would express this directly but are not usable here:
   .about-wrapper is a flex item and therefore content-sized, and
   `contain: inline-size` zeroes the contained element's intrinsic
   contribution — the column collapsed from 1066px to 581px at 1920. */
.zzn-hunger .zzn-hunger-br-mobile { display: none !important; }
.zzn-hunger .giant-heading.siemelden {
  white-space: nowrap !important;
  font-size: min(8vw, 7.5rem) !important;
}
@media (min-width: 1920px) {
  .zzn-hunger .giant-heading.siemelden { font-size: min(6vw, 7.5rem) !important; }
}

/* Lead: its hard <br>s were cut for a wider column and broke mid-sentence
   on small screens. Own block, balanced wrap, breaks ignored. */
.zzn-hunger .zzn-hunger-lead {
  display: block;
  margin-bottom: 1.4rem;
  text-wrap: balance;
}
.zzn-hunger .zzn-hunger-lead br { display: none; }
.zzn-hunger .half-dual > .clip p {
  max-width: 52ch !important;
  /* pretty, not balance: left-bound copy should fill its measure and only
     avoid the lone orphan word. */
  text-wrap: pretty;
}

/* Desktop: text column left, social grid in its own column beside it. The
   lead paragraph returns here — the two-column row balances it against the
   2x2 grid. The box override needs !important to outrank Webflow's
   #w-node-* grid-area rules. */
@media (min-width: 768px) {
  .zzn-hunger .half-dual {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-column-gap: clamp(48px, 6vw, 110px) !important;
    align-items: center !important;
  }
  .zzn-hunger .half-dual > .clip {
    grid-area: 1 / 1 / 2 / 2 !important;
  }
  .zzn-hunger .half-dual > .box {
    grid-area: 1 / 2 / 2 / 3 !important;
    order: 0 !important;
    width: 300px !important;
    max-width: 300px !important;
    margin: 0 !important;
  }
  .zzn-hunger .social-items {
    grid-column-gap: 8px !important;
    grid-row-gap: 8px !important;
    border-radius: 16px !important;
  }
  .zzn-hunger .social-icon {
    width: 26px !important;
    margin-bottom: 0 !important;
  }
  .zzn-hunger .social-text {
    font-size: 11px !important;
  }
}
@media (max-width: 767px) {
  .zzn-hunger .box {
    max-width: 100% !important;
    margin-bottom: 2rem !important;
  }
  .zzn-hunger .social-items {
    grid-column-gap: 24px !important;
    grid-row-gap: 24px !important;
  }
}

/* Body paragraphs on the homepage share the top hero paragraph style. */
.section .paragraph-2,
.section .body-display,
.section .body-display.large {
  font-family: 'Eudoxussans', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(1rem, 1.15vw, 1.15rem) !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.82) !important;
  max-width: 60ch;
  margin: 0 0 1rem;
  -webkit-text-stroke: 0;
}
.section .body-display.large strong,
.section .paragraph-2 strong { color: #fff; font-weight: 700; }

/* Reintroduce the About-page project-wall backdrop under the homepage list. */
/* The parent .wrapper.effizientes-team is 90% wide with overflow:hidden — it
   visually clips our breakout section. Neutralise it whenever it contains us. */
.section:has(> .wrapper.effizientes-team > .zzn-about-projects--home),
.section:has(> .wrapper > .zzn-about-projects--home) { overflow: visible; }
.wrapper.effizientes-team:has(> .zzn-about-projects--home),
.wrapper:has(> .zzn-about-projects--home) {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.zzn-about-projects--home {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 6rem 2rem 7rem;
  background: #002632;
  overflow: hidden;
  isolation: isolate;
}
.zzn-about-projects--home::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 45% at 20% 45%, rgba(54,70,4,0.42), transparent 70%),
    radial-gradient(50% 45% at 85% 55%, rgba(210,68,16,0.32), transparent 70%),
    radial-gradient(70% 55% at 50% 50%, rgba(0,90,110,0.28), transparent 75%);
  filter: blur(40px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: zzn-home-projects-drift 22s ease-in-out infinite alternate;
}
.zzn-about-projects--home::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
@keyframes zzn-home-projects-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 2%, 0) scale(1.08); }
}
.zzn-about-projects--home > * { position: relative; z-index: 1; }

/* Scroll-reveal for homepage sections (Safari-friendly fallback: no motion) */
@supports (animation-timeline: view()) {
  .section .centered-intro > .clip,
  .section .centered-call-to-action,
  .section .three-grid-wrapper.small-team > *,
  .section .about-wrapper > *,
  .zzn-about-projects--home .zzn-about-projects__head {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    animation: zzn-reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
}
@keyframes zzn-reveal-up {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Brand-gradient outline buttons (like the About/menu aesthetic) */
.section .button,
.section .button-top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s;
}
.section .button:hover,
.section .button-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -20px rgba(210,68,16,0.55);
}
.section .button::before,
.section .button-top::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(120deg, #f0d78c, #d24410 45%, #364604 80%, #f0d78c);
  background-size: 220% 220%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.9;
  animation: zzn-btn-drift 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.section .button::after,
.section .button-top::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(210,68,16,0.0), rgba(210,68,16,0.35), rgba(240,215,140,0.0));
  background-size: 220% 100%;
  opacity: 0;
  transition: opacity .4s;
  z-index: 0;
  pointer-events: none;
}
.section .button:hover::after,
.section .button-top:hover::after { opacity: 1; }
@keyframes zzn-btn-drift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

/* "PROJEKT BESPRECHEN?" CTA bar — equal breathing room to sections above
   and below, and visible on mobile (Webflow hid it by default). */
.section.thin-section { margin-top: 0 !important; }
@media (max-width: 767px) {
  .section.thin-section { display: flex !important; margin-top: 0 !important; }
  .section.thin-section .centered-call-to-action {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
  .section.thin-section .heading { font-size: 2.4rem; line-height: 1.05; }
}



/* Animated brand gradient for emphasised words (e.g. ERGEBNISSE).
   Rebuilt from the original Webflow Gradient_BG_ZZN.jpg palette with
   more stops so no single hue dominates and a wider bright/white band
   for contrast. The gradient is tilted a little more (110deg) so the
   two lines of "Marketing / Abteilung" sample visibly different colours.
   Identical start/end colour keeps the loop seamless. */
.zzn-grad-move {
  background: linear-gradient(
    115deg,
    #002632 0%,
    #062b35 3%,
    #0d3a42 6%,
    #1a4d53 9%,
    #2d6b66 12%,
    #3d857d 15%,
    #4f9d91 18%,
    #6ab3a3 21%,
    #8ec9b8 24%,
    #b3ddd0 27%,
    #d4ece3 30%,
    #f5f0e4 33%,
    #f7e6d0 36%,
    #f5d4b8 39%,
    #f0c090 42%,
    #e8a24a 45%,
    #e87a3c 48%,
    #d24410 51%,
    #b8240a 54%,
    #d24410 57%,
    #e87a3c 60%,
    #f0c090 63%,
    #f0d78c 66%,
    #d4b85c 69%,
    #a8c46a 72%,
    #8ec9b8 75%,
    #5ba89a 78%,
    #2d6b66 81%,
    #0d3a42 84%,
    #002632 87%,
    #002632 90%,
    #0d3a42 93%,
    #2d6b66 96%,
    #002632 100%
  );
  background-size: 500% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: zzn-grad-move 12s linear infinite;
  display: inline-block;
  padding-right: .05em; /* prevent italic-like clipping of last glyph */
  will-change: background-position;
}
/* Hero "Marketing Abteilung" keeps its sizing but swaps the static JPG for the moving gradient */
.gradient-span.zzn-grad-move {
  background-image: none;
  background: linear-gradient(
    115deg,
    #002632 0%,
    #062b35 3%,
    #0d3a42 6%,
    #1a4d53 9%,
    #2d6b66 12%,
    #3d857d 15%,
    #4f9d91 18%,
    #6ab3a3 21%,
    #8ec9b8 24%,
    #b3ddd0 27%,
    #d4ece3 30%,
    #f5f0e4 33%,
    #f7e6d0 36%,
    #f5d4b8 39%,
    #f0c090 42%,
    #e8a24a 45%,
    #e87a3c 48%,
    #d24410 51%,
    #b8240a 54%,
    #d24410 57%,
    #e87a3c 60%,
    #f0c090 63%,
    #f0d78c 66%,
    #d4b85c 69%,
    #a8c46a 72%,
    #8ec9b8 75%,
    #5ba89a 78%,
    #2d6b66 81%,
    #0d3a42 84%,
    #002632 87%,
    #002632 90%,
    #0d3a42 93%,
    #2d6b66 96%,
    #002632 100%
  );
  background-size: 500% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  line-height: 1.1;
}
@keyframes zzn-grad-move {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Homepage hero headline: fluid instead of Webflow's fixed steps.
   Webflow sets .giant-heading.start to 80px with no small-screen rule of
   its own — its ≤991px rule targets the bare .giant-heading, which the
   .start compound outranks. So the hero stayed at 80px down to 390px and
   ran off the side. One clamp replaces all three breakpoints; the top end
   matches the old ≥1920px size. */
.giant-heading.start {
  font-size: clamp(2.5rem, 8.2vw, 10rem);
  line-height: 1.04;
}
/* Grid and flex items default to min-width:auto, i.e. "never shrink below
   your content". The hero heading sits three levels inside such items, so a
   long word pushed .centered-intro wider than its own .wrapper instead of
   wrapping — 515px of content in a 389px column at 480px viewport. */
.zzn-home-main-hero .centered-intro,
.zzn-home-main-hero .clip { min-width: 0; }

/* Webflow sizes the two halves of this headline independently of the
   heading and of each other — .gradient-span at 50/90/160px per breakpoint,
   .bold-text at 50/90/160px, plus line-height:.6em on .bold-text below
   479px. So the plain words and the gradient words rendered at different
   sizes at every width, and the squashed leading made the lines overlap.
   Both now inherit, so the single clamp above governs the whole headline. */
.giant-heading.start .gradient-span,
.giant-heading.start .bold-text {
  font-size: inherit;
  line-height: inherit;
}
/* Inline-block so the gradient resolves per word rather than per line box;
   capped so a long word wraps to its own line instead of overflowing. */
.giant-heading.start .gradient-span { max-width: 100%; }

/* Mobile-only line break to pull "ist" down onto the "käuflich" line,
   shortening each line so the headline can scale larger. */
.zzn-hero-br-mobile { display: none; }

/* Mobile: Webflow resets .gradient-span to the static JPG and a 1px
   line-height, which hides the animated text. Force the gradient and
   a readable line-height back on small screens. */
@media screen and (max-width: 767px) {
  .gradient-span.zzn-grad-move,
  .zzn-grad-move {
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-background-clip: text;
            background-clip: text;
    line-height: 1.1;
    opacity: 1;
  }

  /* Bigger hero headline on mobile: three short lines
     ("Unser" / "Geschmack" / "ist käuflich") scale up without overflowing.
     The floor was 2.6rem, which only ever mattered below ~385px (10.4vw
     crosses it there) — but at the narrowest real phones (320px) the
     nowrap "ist käuflich" line fits at most 2.55rem before it outgrows its
     column, so the floor was forcing it past that on every ~320-360px
     device. 2.35rem leaves a safety margin rather than sitting right on
     the measured edge. */
  .giant-heading.start {
    font-size: clamp(2.35rem, 10.4vw, 5.2rem);
    line-height: 1.02;
  }
  .zzn-hero-br-mobile { display: block; }
  .zzn-hero-nowrap-mobile { white-space: nowrap; }
}

/* Mobile: full-bleed the projects backdrop across the viewport while keeping
   content comfortably inset. width:100vw + the calc margins break out of any
   constrained wrapper without causing horizontal overflow. */
@media (max-width: 767px) {
  .zzn-about-projects--home {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 3.5rem 1.25rem 4.5rem;
    box-sizing: border-box;
  }
  .zzn-about-projects__title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.05 !important;
    word-break: break-word;
  }
}


/* ============================================================
   Rental Gear page — /rental
   ============================================================ */
.zzn-rental-section {
  background: #002632;
  color: #f5f2ea;
  padding: 8rem 0 6rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.zzn-rental-section::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 20% 50%, rgba(58,95,10,0.30), transparent 70%),
    radial-gradient(55% 45% at 90% 55%, rgba(255,145,60,0.16), transparent 70%);
  filter: blur(40px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.zzn-rental__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  position: relative;
  z-index: 1;
}
.zzn-rental__hero-head {
  max-width: 820px;
  margin-bottom: 4rem;
}
.zzn-rental__kicker {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.03);
  margin-bottom: 1.4rem;
}
.zzn-rental__title-hero {
  font-family: 'Font Bureau Heronsans', 'Heronsans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 1.2rem;
  background: linear-gradient(90deg, #f7f0e0 0%, #d9c398 40%, #f4b982 70%, #f7f0e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.zzn-rental__lede {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0;
}
.zzn-rental__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.8rem;
}
.zzn-rental__chip {
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, transform 0.2s ease;
}
.zzn-rental__chip:hover {
  background: rgba(255,255,255,0.09);
  transform: translateY(-1px);
}

.zzn-rental__cat {
  margin-bottom: 4.5rem;
  scroll-margin-top: 6rem;
}
.zzn-rental__cat-head {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 1rem;
  margin-bottom: 1.8rem;
}
.zzn-rental__cat-num {
  font-family: 'Font Bureau Heronsans', 'Heronsans', system-ui, sans-serif;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
}
.zzn-rental__cat-title {
  font-family: 'Font Bureau Heronsans', 'Heronsans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0;
  color: #f5f2ea;
}

.zzn-rental__cat-count {
  margin-left: auto;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zzn-rental__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}

.zzn-rental__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease, box-shadow 0.3s ease;
  scroll-margin-top: 6rem;
}
.zzn-rental__card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5);
}
.zzn-rental__card.is-added {
  border-color: rgba(180, 220, 120, 0.45);
  box-shadow: 0 0 0 1px rgba(180, 220, 120, 0.25),
              0 20px 50px -20px rgba(58, 95, 10, 0.4);
}

.zzn-rental__media {
  padding: 0.9rem 0.9rem 0;
}
.zzn-rental__hero {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #0d3a42, #1f2a17);
  display: flex;
  align-items: center;
  justify-content: center;
}
.zzn-rental__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.zzn-rental__card:hover .zzn-rental__hero img { transform: scale(1.03); }
.zzn-rental__placeholder {
  color: rgba(255,255,255,0.35);
  font-family: 'Font Bureau Heronsans', 'Heronsans', system-ui, sans-serif;
  font-size: 1.1rem;
  padding: 1rem;
  text-align: center;
}
.zzn-rental__thumbs {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.zzn-rental__thumb {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.zzn-rental__thumb:hover { border-color: rgba(255,255,255,0.3); transform: translateY(-1px); }
.zzn-rental__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zzn-rental__body {
  padding: 1.4rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}
.zzn-rental__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.zzn-rental__title {
  margin: 0;
  font-family: 'Font Bureau Heronsans', 'Heronsans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.15rem;
  color: #f5f2ea;
  line-height: 1.25;
}

.zzn-rental__price {
  text-align: right;
  white-space: nowrap;
}
.zzn-rental__price-value {
  font-family: 'Font Bureau Heronsans', 'Heronsans', system-ui, sans-serif;
  font-size: 1.2rem;
  color: #f4b982;
  font-weight: 600;
}
.zzn-rental__price-unit {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}
.zzn-rental__notes {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  color: rgba(244, 185, 130, 0.9);
  border: 1px solid rgba(244, 185, 130, 0.35);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.zzn-rental__desc {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
  line-height: 1.55;
}
.zzn-rental__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.zzn-rental__specs > div { display: flex; flex-direction: column; gap: 2px; }
.zzn-rental__specs dt {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.zzn-rental__specs dd { margin: 0; color: rgba(255,255,255,0.85); font-size: 0.9rem; }

.zzn-rental__block-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.4rem;
}
.zzn-rental__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.25rem;
}
.zzn-rental__list li {
  color: rgba(255,255,255,0.78);
  font-size: 0.88rem;
  padding-left: 0.9rem;
  position: relative;
}
.zzn-rental__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(244, 185, 130, 0.8);
}

.zzn-rental__actions { margin-top: auto; padding-top: 0.5rem; }
.zzn-rental__cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: #0f1a1d;
  background: linear-gradient(90deg, #cfe89a 0%, #f4b982 100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.zzn-rental__cta:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -12px rgba(244, 185, 130, 0.5);
  filter: brightness(1.05);
}
.zzn-rental__cta[disabled] {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.4);
  cursor: not-allowed;
}
.zzn-rental__card.is-added .zzn-rental__cta {
  background: linear-gradient(90deg, rgba(207, 232, 154, 0.9), rgba(180, 220, 120, 0.9));
}

.zzn-rental__foot {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
}
.zzn-rental__foot a { color: #f4b982; text-decoration: none; }
.zzn-rental__foot a:hover { text-decoration: underline; }

.zzn-rental__empty {
  padding: 4rem 1rem;
  text-align: center;
  color: rgba(255,255,255,0.5);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 20px;
}

/* Sticky cart bar */
.zzn-rental-bar {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  border-radius: 999px;
  padding: 0.5rem 0.5rem 0.5rem 1.3rem;
  background: rgba(0, 22, 30, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 20px 60px -12px rgba(0,0,0,0.6);
  animation: zzn-rental-bar-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes zzn-rental-bar-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.zzn-rental-bar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #f5f2ea;
}
.zzn-rental-bar__count {
  display: inline-flex;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #cfe89a, #f4b982);
  color: #0f1a1d;
  font-weight: 700;
  font-size: 0.8rem;
  align-items: center;
  justify-content: center;
}
.zzn-rental-bar__label { font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.zzn-rental-bar__open {
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(90deg, #cfe89a, #f4b982);
  color: #0f1a1d;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.zzn-rental-bar__open:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Modal */
html.zzn-rental-modal-open { overflow: hidden; }
.zzn-rental-modal[hidden] { display: none !important; }
.zzn-rental-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: zzn-rental-modal-in 0.25s ease;
}
@keyframes zzn-rental-modal-in { from { opacity: 0; } to { opacity: 1; } }
.zzn-rental-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 15, 20, 0.72);
  backdrop-filter: blur(6px);
}
.zzn-rental-modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: linear-gradient(160deg, #002632 0%, #0d3a42 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7);
  color: #f5f2ea;
}
.zzn-rental-modal__details {
  margin-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 0.75rem;
}
.zzn-rental-modal__details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  user-select: none;
}
.zzn-rental-modal__details > summary::-webkit-details-marker { display: none; }
.zzn-rental-modal__details > summary::after {
  content: "▾";
  transition: transform 0.2s ease;
  color: rgba(255,255,255,0.5);
}
.zzn-rental-modal__details[open] > summary::after { transform: rotate(180deg); }
.zzn-rental-modal__details-count {
  margin-left: auto;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.75);
}
.zzn-rental-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.zzn-rental-modal__head h2 {
  margin: 0;
  font-family: 'Font Bureau Heronsans', 'Heronsans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
}
.zzn-rental-modal__x {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.7);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.5rem;
}
.zzn-rental-modal__x:hover { color: #fff; }
.zzn-rental-modal__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: 1.25rem 1.4rem;
  overflow: auto;
}
.zzn-rental-modal__cart h3 {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.zzn-rental-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  max-height: 42vh;
  overflow: auto;
}
.zzn-rental-modal__empty { color: rgba(255,255,255,0.5); font-size: 0.9rem; padding: 1rem 0; }
.zzn-rental-modal__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 0.75rem;
  padding: 0.75rem 2rem 0.75rem 0.9rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.zzn-rental-modal__item-name { font-weight: 500; }
.zzn-rental-modal__item-meta { grid-column: 1; font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.zzn-rental-modal__item-qty {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: center;
}
.zzn-rental-modal__item-qty button {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f5f2ea;
  cursor: pointer;
  line-height: 1;
}
.zzn-rental-modal__item-qty button:hover { background: rgba(255,255,255,0.16); }
.zzn-rental-modal__item-qty span { min-width: 1.5rem; text-align: center; }
.zzn-rental-modal__item-line { grid-column: 1 / span 2; font-size: 0.82rem; color: #f4b982; }
.zzn-rental-modal__item-remove {
  position: absolute;
  top: 6px; right: 8px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.45);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.zzn-rental-modal__item-remove:hover { color: #ff8a8a; }
.zzn-rental-modal__total {
  display: flex;
  justify-content: space-between;
  padding-top: 0.8rem;
  margin-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 1rem;
  color: #f4b982;
  font-weight: 600;
}
.zzn-rental-modal__total-hint { margin: 0.3rem 0 0; font-size: 0.72rem; color: rgba(255,255,255,0.4); }

.zzn-rental-modal__form { display: grid; gap: 0.75rem; }
.zzn-rental-modal__form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.zzn-rental-modal__form input,
.zzn-rental-modal__form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #f5f2ea;
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
}
.zzn-rental-modal__form input:focus,
.zzn-rental-modal__form textarea:focus {
  outline: none;
  border-color: rgba(244, 185, 130, 0.6);
  box-shadow: 0 0 0 3px rgba(244, 185, 130, 0.18);
}
.zzn-rental-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.zzn-rental-modal__consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.65) !important;
  display: flex !important;
}
.zzn-rental-modal__consent input { width: auto; margin-top: 0.15rem; }
.zzn-rental-modal__consent a { color: #f4b982; }

.zzn-rental-modal__actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.4rem; }
.zzn-rental-modal__ghost,
.zzn-rental-modal__submit {
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.zzn-rental-modal__ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
}
.zzn-rental-modal__ghost:hover { background: rgba(255,255,255,0.05); }
.zzn-rental-modal__submit {
  background: linear-gradient(90deg, #cfe89a, #f4b982);
  color: #0f1a1d;
}
.zzn-rental-modal__submit:hover { filter: brightness(1.05); }
.zzn-rental-modal__submit[disabled] { opacity: 0.7; cursor: wait; }

.zzn-rental-modal__status { margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.7); min-height: 1.2em; }
.zzn-rental-modal__status.is-ok { color: #cfe89a; }
.zzn-rental-modal__status.is-err { color: #ffb0b0; }

/* ============================================================
   Contact page — homepage style + soft pink fade
   ============================================================ */
body[data-page="contact"] .about-hero-section,
body[data-page="contact"] .contact-secction {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
body[data-page="contact"] .about-hero-section {
  background: #002632;
}
body[data-page="contact"] .contact-secction {
  background: #002632;
  padding: 5rem 0 6rem;
}
body[data-page="contact"] .about-hero-section::before,
body[data-page="contact"] .contact-secction::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 45% at 25% 45%, rgba(255, 155, 190, 0.28), rgba(255, 155, 190, 0.08) 55%, transparent 75%),
    radial-gradient(50% 45% at 80% 60%, rgba(210, 68, 16, 0.22), rgba(210, 68, 16, 0.06) 55%, transparent 75%),
    radial-gradient(40% 40% at 55% 50%, rgba(54, 70, 4, 0.26), rgba(54, 70, 4, 0.08) 55%, transparent 75%);
  filter: blur(70px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: zzn-home-projects-drift 24s ease-in-out infinite alternate;
}
body[data-page="contact"] .about-hero-section::after,
body[data-page="contact"] .contact-secction::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
body[data-page="contact"] .about-hero-section > *,
body[data-page="contact"] .contact-secction > * {
  position: relative;
  z-index: 1;
}
/* Ensure the inner wrapper of the contact section is horizontally centered
   at every breakpoint (Webflow's default leaves it flush-left on tablet/mobile). */
body[data-page="contact"] .contact-secction > .wrapper,
body[data-page="contact"] .about-hero-section > .wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: min(1200px, 92vw);
  width: 100%;
  box-sizing: border-box;
}

/* Center the "Sie melden sich" intro text */
body[data-page="contact"] .centered-intro {
  text-align: center;
  justify-items: center;
  margin-left: auto;
  margin-right: auto;
}
body[data-page="contact"] .centered-intro .large-heading,
body[data-page="contact"] .centered-intro .body-display,
body[data-page="contact"] .centered-intro .body-display.large {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}
body[data-page="contact"] .centered-intro .clip {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Frosted glass form card in homepage aesthetic */
body[data-page="contact"] .form-wrapper {
  position: relative;
  max-width: 880px;
  margin: 2.5rem auto 0;
  padding: 2.5rem clamp(1.5rem, 3vw, 3rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.6);
}
body[data-page="contact"] .form-wrapper::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(120deg, rgba(255,155,190,0.55), rgba(210,68,16,0.35), rgba(54,70,4,0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
}

body[data-page="contact"] .text-field,
body[data-page="contact"] .text-field.w-input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-radius: 12px !important;
  transition: border-color .2s ease, background .2s ease;
}
body[data-page="contact"] .text-field:focus {
  border-color: rgba(255,155,190,0.55) !important;
  background: rgba(255,255,255,0.06) !important;
  outline: none !important;
}
body[data-page="contact"] .text-field::placeholder { color: rgba(255,255,255,0.4); }
body[data-page="contact"] .field-label { color: rgba(255,255,255,0.75); }

body[data-page="contact"] .submit-button {
  background: linear-gradient(90deg, #ff9bbe 0%, #f4b982 55%, #cfe89a 100%) !important;
  color: #0f1a1d !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0.9rem 1.6rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: filter .2s ease, transform .2s ease;
}
body[data-page="contact"] .submit-button:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* About/Projekte: force Kontakt button to sit below paragraph on every breakpoint */
body[data-page="about"] .about-wrapper .half-dual .buttons-wrapper {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  justify-self: start !important;
  margin-top: 1.5rem !important;
  display: flex !important;
  opacity: 1 !important;
  transform: none !important;
  width: 100%;
}
body[data-page="about"] .about-wrapper .half-dual .buttons-wrapper .button {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
}
@media (max-width: 767px) {
  body[data-page="about"] .about-wrapper .half-dual .buttons-wrapper {
    justify-self: center !important;
    justify-content: center !important;
    margin-top: 1.25rem !important;
  }
}

/* About: ensure paragraph + button stack vertically inside .clip */
body[data-page="about"] .about-wrapper .half-dual > .clip {
  display: block !important;
  width: 100%;
}
body[data-page="about"] .about-wrapper .half-dual > .clip > p {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ========== BTS Pinterest Gallery ========== */
.zzn-bts {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 4vw, 3rem) 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--zzn-blue, #0b1a2a);
}
.zzn-bts__bg {
  position: absolute; inset: 0 0 25% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 15% 10%, rgba(232, 148, 90, 0.18), transparent 70%),
    radial-gradient(55% 40% at 88% 20%, rgba(90, 168, 232, 0.20), transparent 72%);
  filter: blur(20px);
  animation: zzn-bts-drift 28s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
@keyframes zzn-bts-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  100% { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
.zzn-bts__head {
  max-width: 960px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.zzn-bts__kicker {
  font-family: 'Font Bureau Heronsans', 'Inter', system-ui, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1rem;
}
.zzn-bts__title {
  margin: 0 0 1.25rem;
  font-family: 'Font Bureau Heronsans', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-size: clamp(2.4rem, 7vw, 5.75rem);
  color: #fff;
  overflow-wrap: break-word;
  word-break: break-word;
}
.zzn-bts__title .zzn-fade-word { display: inline-block; }
.zzn-bts__lede {
  display: block !important;
  color: rgba(255,255,255,0.72);
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
  text-wrap: balance;
}

.zzn-bts__grid {
  column-count: 3;
  column-gap: 1.25rem;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 991px) { .zzn-bts__grid { column-count: 2; } }
@media (max-width: 560px) { .zzn-bts__grid { column-count: 1; column-gap: 1rem; } }

.zzn-bts__item {
  display: block;
  break-inside: avoid;
  margin: 0 0 1.25rem;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 12px 40px -20px rgba(0,0,0,0.55);
  transform: translateZ(0);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.zzn-bts__item::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  pointer-events: none;
  transition: box-shadow 480ms ease;
}
.zzn-bts__item img {
  width: 100%;
  /* height:auto + the width/height attributes in the markup give each slot
     its correct aspect ratio before the lazy image decodes, so the masonry
     columns (and the page height) don't jump as they stream in. */
  height: auto;
  display: block;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 600ms ease;
  filter: saturate(0.92);
}
.zzn-bts__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -22px rgba(0,0,0,0.7);
}
.zzn-bts__item:hover img {
  transform: scale(1.045);
  filter: saturate(1.08);
}
.zzn-bts__item:hover::after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}

/* Collapsible reveal with fade-to-bg + "Mehr davon" toggle */
.zzn-bts__reveal {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  max-height: 66vh;
  overflow: hidden;
  transition: max-height 700ms cubic-bezier(0.22, 1, 0.36, 1),
              padding-bottom 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.zzn-bts__toggle:checked ~ .zzn-bts__reveal {
  max-height: 12000px;
  /* Room for the button below the grid once expanded — collapsed it floats
     over the fade, which is the point; expanded it would sit on the last
     photo. */
  padding-bottom: 6.5rem;
}
.zzn-bts__fade {
  pointer-events: none;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(to bottom,
    rgba(1, 44, 44, 0) 0%,
    var(--zzn-blue, #012c2c) 78%,
    var(--zzn-blue, #012c2c) 100%);
  transition: opacity 500ms ease;
}
.zzn-bts__toggle:checked ~ .zzn-bts__reveal .zzn-bts__fade { opacity: 0; }

.zzn-bts__more {
  position: absolute;
  left: 50%;
  bottom: 2.25rem;
  transform: translateX(-50%);
  z-index: 3;
  cursor: pointer;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-family: 'Font Bureau Heronsans', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 300ms ease, border-color 300ms ease, transform 300ms ease;
}
.zzn-bts__more:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
  transform: translateX(-50%) translateY(-2px);
}
.zzn-bts__more-label::before { content: attr(data-more); }
.zzn-bts__toggle:checked ~ .zzn-bts__reveal .zzn-bts__more-label::before { content: attr(data-less); }

/* ============================================================
   Team page — headline sizing is defined inline in team.html
   (responsive clamps per breakpoint) so no override here.
   ============================================================ */


/* ============================================================
   Team page — orange ambient glow (single continuous wash)
   ============================================================ */
body[data-page="team"] {
  background: #002632;
  position: relative;
}

/* One fixed, full-viewport orange wash behind everything — no seams */
body[data-page="team"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(70% 60% at 60% 30%, rgba(210, 68, 16, 0.55) 0%, rgba(210, 68, 16, 0.18) 50%, transparent 80%),
    radial-gradient(65% 65% at 20% 60%, rgba(210, 68, 16, 0.42) 0%, rgba(210, 68, 16, 0.08) 55%, transparent 82%),
    radial-gradient(55% 55% at 85% 75%, rgba(210, 68, 16, 0.32) 0%, transparent 72%),
    radial-gradient(50% 50% at 45% 90%, rgba(255, 155, 190, 0.10) 0%, transparent 75%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: zzn-home-projects-drift 26s ease-in-out infinite alternate;
}

/* Subtle noise overlay for texture */
body[data-page="team"]::after {
  content: "";
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* Sections themselves must be transparent so the fixed wash shows through */
body[data-page="team"] .zzn-team-hero,
body[data-page="team"] .zzn-team-care,
body[data-page="team"] .no-top-padding {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* Keep content above the wash */
body[data-page="team"] .zzn-team-hero > .wrapper,
body[data-page="team"] .zzn-team-care > .wrapper,
body[data-page="team"] .no-top-padding > .wrapper {
  position: relative;
  z-index: 1;
}

/* CTA section — remove the default blue cover so the orange wash shows through */
body[data-page="team"] .no-top-padding > .background-shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: transparent !important;
}
body[data-page="team"] .no-top-padding > .background-shade .background-cover {
  background: transparent !important;
}


/* ============================================================
   Hero 3D room outline (public/js/hero-room.js)
   ============================================================ */
.zzn-home-main-hero {
  isolation: isolate;
  overflow: hidden;
}

/* Explicit local stack for the real, visible hero. */
.zzn-home-main-hero > .hero-div-bg { z-index: 0; }
.zzn-home-main-hero > .background_fade { z-index: 1; }
.zzn-home-main-hero > .wrapper { z-index: 3; }

.zzn-hero-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.zzn-hero-stage.is-visible { opacity: 1; }

.zzn-hero-room {
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: screen;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}
.zzn-hero-video-slot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.zzn-hero-stage[data-mode="video"] .zzn-hero-video-slot { opacity: 1; }
.zzn-hero-stage[data-mode="video"] .zzn-hero-room { opacity: 0; }

/* === ZZN DOT TRANSITION + BW ZONE ==================================
 * Geometry rule: CSS never positions .zzn-dot. GSAP owns every transform.
 * .zzn-dot is left:0/top:0 with intrinsic size via --dot-size; the JS
 * places it with x/y (px) + xPercent/yPercent -50 so the dot center sits
 * exactly on the JS-computed (CX, CY) inside .zzn-dot-sticky.
 * --zzn-bg is written from JS at init (sampled from the real page bg). */

.zzn-dot-stage {
  position: relative;
  /* Entry colour must equal the section above, or the top seam shows a step.
     GSAP drives this to black and then to white. */
  background: var(--zzn-bg, #002632);
  margin-bottom: -1px;
  border: 0;
  outline: 0;
  box-shadow: none;
  /* One viewport of content plus the scroll distance the timeline needs.
     --zzn-stage-len is set by zzn-dot-transition.js (shorter on touch). svh,
     not vh, so the iOS URL bar showing or hiding cannot resize the stage
     mid-scroll and shift every trigger under the reader. */
  height: calc(100svh * var(--zzn-stage-len, 4));
}
.zzn-dot-stage + * {
  position: relative;
  z-index: 1;
}
.zzn-dot-sticky {
  /* Native sticky, deliberately: it is the ONLY thing holding this element
     on screen. GSAP no longer pins the stage — see zzn-dot-transition.js.
     The browser sticks this on the compositor, so it stays put even when
     the main thread is throttled (iOS Low Power Mode), which is exactly
     when GSAP's transform-based pin used to lag a frame behind the scroll
     and wobble. Two systems holding the same element is what caused the
     original desync; now there is only one, and it is the fast one. */
  position: sticky;
  top: 0;
  /* lvh, not svh: the panel must cover the LARGEST viewport (URL bar hidden)
     or a strip of the page shows below it while the bar is retracting, which
     reads as the stage sliding. lvh never changes, so nothing resizes
     mid-scroll either. Falls back to svh where lvh is unsupported. */
  height: 100svh;
  height: 100lvh;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
  /* iOS Safari: promote to its own compositor layer so scrubbed transforms
     inside don't force a full-page repaint each frame. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout paint;
}

/* Structural centering: zero-size anchor placed by CSS at the true
   viewport center of .zzn-dot-sticky. Never animated, never referenced
   by GSAP. All dots + labels position relative to this point. */
.zzn-center-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  /* Above .zzn-goo so an encapsulated word reads on top of its dot. */
  z-index: 3;
}
/* Goo layer: holds only the two dots, so the merge filter never touches the
   text. Sized in JS to just contain them plus the blur halo — a filter over a
   viewport-sized surface is what makes this technique expensive. */
.zzn-goo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
.zzn-goo--on {
  filter: url(#zzn-goo-filter);
}
.zzn-goo-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.zzn-goo-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.zzn-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--dot-size, 16vmin);
  height: var(--dot-size, 16vmin);
  border-radius: 50%;
  background: #fff;
  will-change: transform, background-color, opacity;
}
.zzn-dot--a { z-index: 3; }
.zzn-dot--b { z-index: 3; }

/* Stage background — sits behind the anchor, above the flat stage bg.
   Deliberately a flat colour: drifting radial glows used to live here and
   left visible colour in the corners against the black. */
.zzn-stage-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: var(--zzn-bg, #002632);
}
.zzn-dot-label {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-family: 'HeronSansCond', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* Sized so the longest line ("Das Team liefert die Umsetzung") still fits
     on one line at narrow widths — the lines never wrap. */
  font-size: clamp(16px, 3.6vmin, 40px);
  line-height: 1;
  color: #fff;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity, color;
  /* Above the dots so an encapsulated word reads on top of the white dot. */
  z-index: 4;
}
/* Write-on: one span per character, revealed by the scrub. Starts hidden so
   a line never flashes in before GSAP takes over. */
.zzn-char {
  display: inline-block;
  white-space: pre;
  opacity: 0;
}
.zzn-label-pre,
.zzn-label-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Reduced-motion fallback: static stage showing the two-dot logo. */
.zzn-dot-stage--static {
  height: 60vh;
}
.zzn-dot-stage--static .zzn-dot { opacity: 1; }
.zzn-dot-stage--static .zzn-dot--a { transform: translate(-50%, calc(-50% - 12vmin)); }
.zzn-dot-stage--static .zzn-dot--b { transform: translate(-50%, calc(-50% + 12vmin)); }
@media (max-width: 640px) {
  .zzn-dot-stage--static .zzn-dot--a { transform: translate(-50%, calc(-50% - 9.75vmin)); }
  .zzn-dot-stage--static .zzn-dot--b { transform: translate(-50%, calc(-50% + 9.75vmin)); }
}

/* Showreel overlay — fades to sampled page bg before the pin. */
.zzn-showreel-blackout {
  position: absolute;
  inset: 0;
  background: var(--zzn-bg, #000);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}



/* --- BW zone (Effizientes Team + CMS grid) -------------------------- */
.zzn-bw-zone {
  --zzn-bg: #ffffff;
  --zzn-text: #000000;
  --zzn-accent: #000000;
  --zzn-muted: #666666;
  background: #fff !important;
  color: #000 !important;
  padding-block: clamp(96px, 12vh, 160px);
  position: relative;
  z-index: 1;
  /* Webflow's scroll interaction fades and slides this section in. Over the
     blue page background the fade reads as a grey-blue wash, and the 24px
     slide leaves a teal strip between the stage and this section — both
     break the white landing the transition just made. Children keep their
     own reveal animations. */
  opacity: 1 !important;
  transform: none !important;
}
/* Kill any decorative shade/veil that Webflow injected inside this section. */
.zzn-bw-zone .background-shade,
.zzn-bw-zone .background-cover,
.zzn-bw-zone .gradient-background-fill {
  background: #fff !important;
  filter: none !important;
  box-shadow: none !important;
}
/* Force text black across the Effizientes Team hero copy. Excludes the CMS
   "Ausgewählte Projekte" block via :not(...) so the card copy keeps its
   own white palette, and excludes .zzn-fade-word ("Ergebnisse") plus
   .zzn-grad-move so their brand gradient stays intact. */
.zzn-bw-zone :is(h1, h2, h3, h4, .large-heading, .giant-heading, .heading-5, .body-display, .paragraph-2, p, strong):not(.zzn-fade-word):not(.zzn-grad-move):not(.zzn-about-projects *):not(.zzn-about-projects) {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
}


/* CMS "Ausgewählte Projekte" block sits inside the bw-zone section but must
   keep its ORIGINAL dark palette, masonry grid, gradient veils, and white
   text. We fully opt it out of every bw-zone rule below by re-asserting the
   original values with !important. */
.zzn-bw-zone .zzn-about-projects,
.zzn-bw-zone .zzn-about-projects--home {
  background: #ffffff !important;
  color: #fff !important;
}
.zzn-bw-zone .zzn-about-projects--home::before,
.zzn-bw-zone .zzn-about-projects--home::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
}

.zzn-bw-zone .zzn-about-projects__kicker {
  color: rgba(0,0,0,0.55) !important;
  -webkit-text-fill-color: rgba(0,0,0,0.55) !important;
  background: none !important;
}
.zzn-bw-zone .zzn-about-projects__title {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: none !important;
}

/* Ergebnisse (fade-word) inside BW zone: black/grey animated gradient */
@keyframes zzn-bw-grad-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.zzn-bw-zone .zzn-fade-word,
.zzn-bw-zone .zzn-grad-move {
  background-image: linear-gradient(115deg,
    #000 0%, #1a1a1a 10%, #3a3a3a 20%, #666 30%, #9a9a9a 40%,
    #d0d0d0 50%, #9a9a9a 60%, #666 70%, #3a3a3a 80%, #1a1a1a 90%, #000 100%
  ) !important;
  background-size: 300% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: zzn-bw-grad-move 6s ease-in-out infinite !important;
  animation-play-state: running !important;
}
@media (prefers-reduced-motion: reduce) {
  .zzn-bw-zone .zzn-fade-word,
  .zzn-bw-zone .zzn-grad-move {
    animation: zzn-bw-grad-move 6s ease-in-out infinite !important;
  }
}

/* Global media desaturation — SCOPE OUT the CMS project wall so cards keep
   native color. */
.zzn-bw-zone img,
.zzn-bw-zone video {
  filter: grayscale(1) contrast(1.06);
}
.zzn-bw-zone .zzn-about-projects img,
.zzn-bw-zone .zzn-about-projects video,
.zzn-bw-zone .zzn-proj-card__img {
  filter: none !important;
}

/* Cards inside the CMS block keep native chrome (radius, veil, hover ring,
   white gradient text). Neutralise every bw-zone !important reset here. */
.zzn-bw-zone .zzn-about-projects .zzn-proj-card {
  background: #0a0a0a !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 40px -18px rgba(0,0,0,0.6) !important;
  color: #fff !important;
}
.zzn-bw-zone .zzn-about-projects a,
.zzn-bw-zone .zzn-about-projects .zzn-proj-card a {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.zzn-bw-zone .zzn-about-projects a:hover,
.zzn-bw-zone .zzn-about-projects .zzn-proj-card a:hover {
  background: transparent !important;
  color: #fff !important;
}
.zzn-bw-zone .zzn-about-projects .zzn-proj-card__kicker {
  color: rgba(255,255,255,0.72) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.72) !important;
  background: none !important;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6) !important;
}
.zzn-bw-zone .zzn-about-projects .zzn-proj-card__title,
.zzn-bw-zone .zzn-about-projects .zzn-proj-card .heading-5 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.65) !important;
}
.zzn-bw-zone .zzn-about-projects .zzn-proj-card__cta {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}
.zzn-bw-zone .zzn-about-projects .zzn-proj-card__veil {
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65) 100%) !important;
}

/* "Effizientes Team" copy block. Webflow gives this node place-self:center,
   and justify-self does apply to block-level boxes — so the 450px block gets
   centred in its column and sits ~108px in from the headline. Flush it left
   with the headline instead. !important because the Webflow rule is an ID
   selector, which no class selector can outrank. */
.wrapper.effizientes-team .three-grid-wrapper.small-team > .max-450 {
  justify-self: start !important;
}

/* Team page, closing CTA. The block ends on a hard horizontal edge exactly
   where the footer starts, so the warm backdrop looks cut off rather than
   finished. A fade to the footer colour over the last stretch joins the two
   into one surface. It sits at z-index 0 with the copy lifted above it, or
   it washes out the Kontakt button it is supposed to sit behind. */
body[data-page="team"] .section.no-top-padding {
  position: relative;
}
body[data-page="team"] .section.no-top-padding::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(110px, 20vh, 220px);
  background: linear-gradient(to bottom, rgba(0, 38, 50, 0) 0%, var(--zzn-blue, #002632) 92%);
  pointer-events: none;
  z-index: 0;
}
body[data-page="team"] .section.no-top-padding > .wrapper {
  position: relative;
  z-index: 1;
}

/* "Hunger auf Mehr" social tile. The server swaps Webflow's mismatched logo
   files for the footer's single-colour SVGs; these give them one size and
   weight so the four read as a set. */
.zzn-hunger svg.social-icon {
  width: 26px;
  height: 26px;
  fill: #fff;
  opacity: 0.92;
  transition: opacity 220ms ease, transform 220ms ease;
}
.zzn-hunger .social-block:hover svg.social-icon {
  opacity: 1;
  transform: translateY(-2px);
}

/* ============================================================
   FOOTER — corporate, quiet. Four columns on desktop collapsing to one
   on mobile, a hairline rule instead of boxes, muted type that only
   resolves to full white on hover, and the brand orange used exactly
   once (the hover underline) so it reads as an accent, not decoration.
   ============================================================ */
.section.footer {
  background: var(--zzn-bg, #002632) !important;
  padding: 0 !important;
}
.zzn-foot {
  max-width: 1400px;
  margin: 0 auto;
  /* Bottom padding clears the fixed "Cookie-Einstellungen" pill, which sits
     in the bottom-left corner and otherwise covers the copyright line. */
  padding: clamp(3.5rem, 6vw, 6rem) clamp(1.5rem, 5vw, 4rem) clamp(5rem, 7vw, 6rem);
  font-family: 'Eudoxussans', 'HeronSans', system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.zzn-foot__top {
  display: grid;
  grid-template-columns: 1.7fr repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.zzn-foot__logo {
  display: inline-block;
  width: clamp(150px, 14vw, 190px);
}
.zzn-foot__logo img { width: 100%; height: auto; display: block; }
.zzn-foot__claim {
  margin: 1.35rem 0 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.5);
}
/* Column headings: the only uppercase type down here, kept small and wide
   so they read as labels rather than headlines. */
.zzn-foot__h {
  margin: 0 0 1.1rem;
  font-family: 'HeronSansCond', 'Eudoxussans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.zzn-foot__list { list-style: none; margin: 0; padding: 0; }
.zzn-foot__list li { margin: 0 0 0.6rem; }
/* One link treatment for the whole footer: an orange rule that wipes in
   from the left while the label lifts to full white. */
.zzn-foot a:not(.zzn-foot__social):not(.zzn-foot__logo) {
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: color 220ms ease;
}
.zzn-foot a:not(.zzn-foot__social):not(.zzn-foot__logo)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--zzn-orange, #ec6507);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.zzn-foot a:not(.zzn-foot__social):not(.zzn-foot__logo):hover {
  color: #fff;
}
.zzn-foot a:not(.zzn-foot__social):not(.zzn-foot__logo):hover::after {
  transform: scaleX(1);
}
.zzn-foot__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.zzn-foot__socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.zzn-foot__social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.62);
  transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease, transform 220ms ease;
}
.zzn-foot__social svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.zzn-foot__social:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}
.zzn-foot__bar {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.42);
}
.zzn-foot__copy { margin: 0; }
.zzn-foot__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }

@media (max-width: 991px) {
  .zzn-foot__top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .zzn-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  /* Keep the two short link lists side by side — stacking all four blocks
     turns the footer into a 1100px scroll on a phone. */
  .zzn-foot__top { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .zzn-foot__brand,
  .zzn-foot__col--contact { grid-column: 1 / -1; }
  .zzn-foot__bar { justify-content: flex-start; gap: 0.5rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .zzn-foot a::after { transition: none; }
  .zzn-foot__social { transition: none; }
  .zzn-foot__social:hover { transform: none; }
}

/* Safety net: never let a section stay invisible on touch devices.
 * Webflow's IX2 reveals "Hunger auf Mehr" and the footer by animating them
 * from opacity 0 when they scroll into view. On mobile viewports both were
 * measured stuck at opacity 0 — the reveal never fires, so the page ends in
 * two blank screens (including the footer that carries the legal links).
 * The fade is decoration; being able to read the imprint is not. Desktop
 * keeps the animation. */
@media (hover: none) and (pointer: coarse) {
  .zzn-hunger,
  .section.footer {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Exit gradient spacer below the CMS block: white -> sampled page bg.
   Only used as the fallback when the pinned exit stage cannot run (reduced
   motion, or GSAP unavailable) — otherwise the script replaces it. */
.zzn-bw-exit {
  height: 32vh;
  width: 100%;
  pointer-events: none;
  background: linear-gradient(to bottom, #ffffff 0%, var(--zzn-bg, #002632) 100%);
}

/* === EXIT STAGE (dot shrinks into a spiral vortex) ===================
 * White ball at cover scale shrinks to reveal a coiled ribbon spiral that
 * already fills the frame; the dot settles into the vortex eye and is
 * swallowed, then the scrub flies through the coil until the eye itself has
 * grown past the corners and left only the page blue that "Hunger auf mehr"
 * sits on. Entry rhymes with the dot takeover that landed on the CMS block;
 * the exit is flown through the eye, not faded out. */
.zzn-exit-stage {
  position: relative;
  /* Must equal the section above or the top seam steps; GSAP drives it to
     the page blue underneath the covering ball. */
  background: #fff;
  margin-bottom: -1px;
  border: 0;
  outline: 0;
  box-shadow: none;
  /* See .zzn-dot-stage — same native-sticky scheme, own length. */
  height: calc(100svh * var(--zzn-exit-len, 3.8));
}
.zzn-exit-stage + * {
  position: relative;
  z-index: 1;
}
.zzn-exit-sticky {
  /* See .zzn-dot-sticky above — native sticky, no GSAP pin. */
  position: sticky;
  top: 0;
  /* See .zzn-dot-sticky — lvh so the URL bar can never uncover a strip. */
  height: 100svh;
  height: 100lvh;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  /* Clips the ball as it drops, so it leaves the frame instead of the page. */
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout paint;
}

.zzn-exit-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #fff;
  pointer-events: none;
}
/* Vortex layer: one <canvas>, painted exactly once with the whole coil (see
   buildSpiralCanvas). The scrub only animates the parent stage's transform
   (rotate + zoom), so the entire flight is a single composited texture with
   no repaint. Sits between the flat bg and the ball: the shrinking white dot
   is what reveals it, and it must never cover the dot while the dot is
   parked in its eye. */
.zzn-spiral-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 1;
  pointer-events: none;
}


.zzn-spiral-stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  /* will-change is toggled from JS only while the exit timeline runs, so an
     oversized GPU layer isn't held for the whole page. */
}
.zzn-spiral-stage > canvas {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
}

.zzn-exit-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 2;
}
.zzn-exit-ball {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--exit-ball, 30vmin);
  height: var(--exit-ball, 30vmin);
  border-radius: 50%;
  background: #fff;
  will-change: transform;
  pointer-events: none;
  /* Gaussian edge while shrinking. The radius is fixed per layout (keyed to
     the ball's own size) and NEVER animated — filter renders before
     transform, so the compositor scales the one pre-blurred texture and the
     softness tracks the ball for free on every device. Animating the blur
     value instead would re-run the filter every scrubbed frame.
     EXIT_COVER in zzn-dot-transition.js carries extra margin so the soft
     edge stays off screen while the ball must read as solid white. */
  filter: blur(calc(var(--exit-ball, 30vmin) * 0.055));
}



/* Nav links asked for Inter, which is no longer loaded (Google WebFont
   loader stripped for DSGVO) — use the brand sans instead. */
.nav-link {
  font-family: 'Eudoxussans', system-ui, sans-serif;
}