/* ===============================================
   GLOBAL RESET & BASE
   =============================================== */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

:root {
   --radius-sm: 1rem;
   --radius-md: 1.5rem;
   --radius-lg: 2rem;
   --radius-xl: 2.75rem;
   --header-bar-height: clamp(76px, 13vw, 96px);
   --header-inline-padding: clamp(12px, 3.2vw, 32px);
   --color-text: #3C3C3C;
   --color-text-muted: rgba(60, 60, 60, 0.78);
   --color-text-soft: rgba(60, 60, 60, 0.55);
   --color-accent: #C3A843;
   --color-accent-hover: #d4b85a;
   --color-accent-soft: rgba(195, 168, 67, 0.2);
   --color-footer-bg: #3C3C3C;
}

html {
   scroll-behavior: smooth;
}

@media (max-width: 899px) {
   html {
      scroll-behavior: auto;
   }
}

html.lenis,
html.lenis body {
   height: auto;
   min-height: 100dvh;
}

.lenis.lenis-smooth {
   scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
   overscroll-behavior: contain;
}

.lenis.lenis-smooth [data-lenis-prevent] iframe {
   pointer-events: auto;
}

.lenis.lenis-stopped {
   overflow: hidden;
}

.lenis.lenis-smooth iframe {
   pointer-events: none;
}

body {
   font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   background: #f4f0ea;
   color: var(--color-text);
   min-height: 100vh;
   min-height: 100dvh;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

body::-webkit-scrollbar {
   display: none;
}

html {
   scrollbar-width: none;
   -ms-overflow-style: none;
}

html::-webkit-scrollbar {
   display: none;
}

/* Demo page sitting behind the menu */
.page {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 80px;
}

.page__title {
   font-size: clamp(40px, 8vw, 120px);
   font-weight: 300;
   color: #3C3C3C;
}

/* ===============================================
   BLOCK: header
   Fixed top bar. Contains the toggle, logo, shop
   links, the drop-down nav and the dark backdrop.
   =============================================== */
header.header {
   background-color: #f4f0ea;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: 0 var(--header-inline-padding);
   /* Stays above page content and scroll-pinned sections */
   z-index: 500;
   transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

body.page-hero-top header.header {
   background-color: transparent;
   box-shadow: none;
}

body.page-hero-top header.header.header--solid {
   background-color: #f4f0ea;
   box-shadow: 0 1px 0 rgba(60, 60, 60, 0.06);
}

/* Hinter JG: Kontakt-Button weiß, solange Header transparent ist */
body.page-hero-top.page-about header.header:not(.header--solid) .header__contact-link,
body.page-hero-top.page-kundenbereich header.header:not(.header--solid) .header__contact-link {
   color: #ffffff;
}

body.page-hero-top.page-about header.header:not(.header--solid) .header__contact-link:hover,
body.page-hero-top.page-kundenbereich header.header:not(.header--solid) .header__contact-link:hover {
   color: rgba(255, 255, 255, 0.82);
}

/* ELEMENT: the visible top row with logo / toggle / shop */
.header__bar {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: var(--header-bar-height);
   width: 100%;
   text-transform: uppercase;
   font-size: 12px;
   font-weight: 400;
   position: relative;
}

.header__bar p {
   margin: 0;
}

/* ELEMENT: logo anchored to the left */
.header__logo {
   text-decoration: none;
   color: var(--color-text);
   position: absolute;
   left: 0;
   top: 50%;
   text-transform: none;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
}

.header__logo-img {
   display: block;
   height: clamp(58px, 12vw, 72px);
   width: auto;
   max-width: min(58vw, 320px);
   object-fit: contain;
}

/* ELEMENT: the toggle (burger + text) — horizontally centered */
.header__toggle {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   cursor: pointer;
   color: var(--color-text);
}

/* ELEMENT: Nav-Symbol neben Menü-Label */
.header__star {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   flex-shrink: 0;
   border: 1px solid color-mix(in srgb, currentColor 36%, transparent);
   border-radius: 50%;
   background: transparent;
   pointer-events: none;
   transform-origin: 50% 50%;
   will-change: transform, opacity;
}

.header__star::after {
   content: "";
   display: block;
   width: 19px;
   height: 19px;
   background-color: currentColor;
   -webkit-mask-image: url('../img/Nav.png');
   mask-image: url('../img/Nav.png');
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-size: contain;
   mask-size: contain;
}

.header__star--active {
   opacity: 0.75;
}

/* ELEMENT: the text label wrapper — "Menu" and "Close"
   are stacked in the same spot and cross-faded by GSAP. */
.header__label {
   position: relative;
   display: flex;
   align-items: center;
}

.header__label-text {
   /* Default: visible (used by "Menu") */
}

/* Second label is absolutely positioned on top of the first,
   initially invisible; GSAP fades it in when the menu opens. */
.header__label-text--close {
   position: absolute;
   opacity: 0;
}

/* ELEMENT: shop + cart block — fades out while menu is open */
.header__shop {
   display: flex;
   gap: 30px;
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   align-items: center;
}

/* "Shop" text is hidden on small screens */
.header__shop-label {
   display: none;
}

.header__shop-label a {
   text-decoration: none;
   color: inherit;
}

.header__contact-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--color-text);
   text-decoration: none;
   transition: color 0.25s ease, opacity 0.25s ease;
}

.header__contact-link:hover {
   color: var(--color-accent);
}

.header__contact-text {
   display: none;
}

.header__contact-icon {
   display: block;
   width: 26px;
   height: 26px;
   flex-shrink: 0;
}

/* ELEMENT: dark backdrop below the header.
   Positioned flush to the bottom of the header (top: 100%)
   and grows downward as GSAP animates its height. */
.header__background {
   background-color: black;
   opacity: 0.5;
   width: 100%;
   height: 0;
   position: absolute;
   left: 0;
   top: 100%;
   pointer-events: none;
}

/* ===============================================
   BLOCK: nav
   The drop-down panel. Its height animates 0 → auto
   (measured live in JS) to reveal the content.
   =============================================== */
.nav {
   overflow: hidden;
   height: 0;
}

.nav__wrapper {
   display: flex;
   gap: 50px;
   margin-bottom: 80px;
}

.nav__container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   flex: 1;
}

/* ELEMENT: nav__body — the big list of links */
.nav__body {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   gap: 4px;
   margin-top: 40px;
}

/* ELEMENT: a single nav link.
   display:flex is used for the per-character stagger (each
   character is wrapped in a <span> by JS, sitting inline).
   NOTE: no CSS transition here — GSAP handles blur/opacity
   animations; a CSS transition on top would fight GSAP and
   cause the hovered link to "stick" before updating. */
.nav__link {
   color: var(--color-text);
   text-decoration: none;
   text-transform: uppercase;
   display: flex;
   flex-wrap: nowrap;
   white-space: nowrap;
   /* overflow: hidden clips each character's initial y:100% */
   overflow: hidden;
   font-size: 18px;
   padding-right: 0;
   padding-top: 6px;
   font-weight: 300;
   filter: blur(0px);
   opacity: 1;
}

/* Each character is wrapped in a span by JS so it can slide up individually */
.nav__link span {
   display: inline-block;
   will-change: transform, opacity;
}

/* ELEMENT: nav__footer — small credit lines at the bottom */
.nav__footer {
   display: flex;
   align-items: flex-end;
   flex-wrap: wrap;
   font-size: 12px;
   text-transform: uppercase;
   margin-top: 40px;
}

.nav__footer ul {
   width: 50%;
   margin-top: 10px;
   overflow: hidden;
   list-style: none;
}

.nav__footer li {
   /* Each <li> will be animated (slide up from y:100%) */
   will-change: transform, opacity;
}

.nav__footer li span {
   color: var(--color-text-soft);
}

.nav__footer a {
   color: inherit;
   text-decoration: none;
}

/* ELEMENT: nav preview — image or text on the right (desktop only) */
.nav__preview {
   display: none;
}

.nav__image {
   display: none;
   width: 100%;
   height: 100%;
}

.nav__image.is-active {
   display: flex;
   align-items: center;
   justify-content: center;
}

.nav__image img {
   width: auto;
   height: auto;
   max-width: min(52%, 280px);
   max-height: min(52%, 260px);
   object-fit: contain;
   object-position: center;
   background: #f4f0ea;
}

.nav__preview-text {
   display: none;
   flex-direction: column;
   gap: 16px;
   max-width: 100%;
   color: #3C3C3C;
   font-weight: 400;
   line-height: 1.65;
}

.nav__preview-text.is-active {
   display: flex;
}

.nav__preview-lead {
   font-size: clamp(1.05rem, 1.35vw, 1.35rem);
   font-weight: 600;
   letter-spacing: 0.01em;
   line-height: 1.35;
   text-transform: none;
   color: #3C3C3C;
}

.nav__preview-body {
   font-size: clamp(0.95rem, 1.1vw, 1.08rem);
   color: #3C3C3C;
   line-height: 1.7;
}

.nav__preview-list {
   margin: 0;
   padding-left: 1.15em;
   font-size: clamp(0.9rem, 1vw, 1rem);
   color: #3C3C3C;
   line-height: 1.65;
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.nav__preview-footer {
   font-size: clamp(0.85rem, 0.95vw, 0.95rem);
   font-weight: 500;
   color: var(--color-text-muted);
   letter-spacing: 0.03em;
   line-height: 1.5;
   margin-top: 6px;
}

/* ===============================================
   RESPONSIVE
   =============================================== */
@media (min-width: 600px) {
   :root {
      --header-bar-height: clamp(84px, 9vw, 108px);
      --header-inline-padding: clamp(16px, 3vw, 40px);
   }

   .header__bar {
      font-size: 15px;
   }

   .header__logo-img {
      height: clamp(72px, 8vw, 92px);
      max-width: min(42vw, 420px);
   }
}

@media (min-width: 900px) {
   .header__contact-text {
      display: inline;
   }

   .header__contact-icon {
      display: none;
   }
}

@media (min-width: 1000px) {
   .nav__wrapper {
      margin-bottom: 0;
      justify-content: space-between;
      max-height: calc(100vh - var(--header-bar-height) - 24px);
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
   }

   .nav__wrapper::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
   }

   .nav__body {
      max-width: 1200px;
      margin-top: 60px;
   }

   .nav__link {
      font-size: clamp(18px, 1.75vw, 30px);
      padding-right: 0;
      transform-origin: left center;
   }

   .nav__footer {
      justify-content: space-between;
   }

   .nav__footer ul {
      width: auto;
   }

   /* Show the preview panel only on large screens */
   .nav__preview {
      display: block;
      width: 500px;
      height: 450px;
      position: relative;
      opacity: 0;
   }

   .nav__preview-text,
   .nav__image {
      position: absolute;
      inset: 0;
   }

   .nav__preview-text {
      justify-content: center;
      padding: 28px 32px;
   }
}

/* Sticky footer on short content pages (Artikel, Rechtliches, Kundenbereich) */
body:has(.leadership-page--compact) {
   display: flex;
   flex-direction: column;
}

body:has(.leadership-page--compact) > main {
   flex: 1 0 auto;
   display: flex;
   flex-direction: column;
}

.leadership-page--compact {
   flex: 1;
   overflow: visible;
}

.leadership-page--compact .article {
   flex: 1;
   display: flex;
   flex-direction: column;
}

.leadership-page--compact .article-body,
.leadership-page--compact .kundenbereich-intro {
   flex: 1;
}

.leadership-page--compact .kundenbereich-intro {
   display: flex;
   align-items: center;
   justify-content: center;
   padding-block: clamp(3.5rem, 10vh, 5.5rem);
}