/* ---------- 0. Selbstgehostete Schrift (Montserrat) ---------- */
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Tokens & Reset ---------- */
:root {
  --c-white: #ffffff;
  --c-text: #25150b;
  --c-text-soft: #5a4538;
  --c-text-mute: #8a7466;
  --c-bg-soft: #f2e9e1;
  --c-bg-softer: #f8f3ee;
  --c-accent: #bf926b;
  --c-accent-dark: #a87a55;
  --c-line: rgba(37, 21, 11, 0.12);
  --c-line-soft: rgba(37, 21, 11, 0.08);
  --c-line-light: rgba(255, 255, 255, 0.18);

  --ff-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  --w-light: 300;
  --w-regular: 400;
  --w-medium: 600;

  --container: 1320px;
  --gutter: clamp(1.5rem, 4vw, 3rem);

  --r-sm: 2px;
  --r-md: 4px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 240ms;
  --t-med: 480ms;
  --t-slow: 800ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--ff-base);
  font-weight: var(--w-light);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--c-accent); color: var(--c-white); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   2. Typography helpers
   ========================================================================== */
.section-headline {
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: var(--w-medium);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--c-text);
}
.section-headline--light { color: var(--c-white); }
.section-headline .muted { color: var(--c-text-mute); font-weight: var(--w-light); }

.lead {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--c-text);
  font-weight: var(--w-light);
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 2.5rem;
  background: var(--c-accent);
  color: var(--c-white);
  font-weight: var(--w-medium);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
}
.btn-primary svg { transition: transform var(--t-fast) var(--ease); }
.btn-primary:hover { background: var(--c-accent-dark); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-primary--full { width: 100%; justify-content: space-between; padding: 1.25rem 1.75rem; margin-top: 1.5rem; }


/* ==========================================================================
   4. Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 2.5rem 0;
  transition: background var(--t-med) var(--ease), padding var(--t-med) var(--ease), backdrop-filter var(--t-med) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.6);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  padding: 0.95rem 0;
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.header-logo {
  display: block;
  width: clamp(115px, 12vw, 145px);
  transition: filter var(--t-med) var(--ease);
  margin-left:5px;
}
.header-logo img { width: 100%; height: auto; filter: brightness(0) invert(1); transition: filter var(--t-med) var(--ease); }
.site-header.is-scrolled .header-logo img { filter: none; width:80% }

.header-nav {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.header-nav a {
  font-size: 0.92rem;
  font-weight: var(--w-regular);
  color: var(--c-white);
  position: relative;
  padding: 0.2rem 0;
  transition: color var(--t-fast) var(--ease);
}
.site-header.is-scrolled .header-nav a { color: var(--c-text); }
.header-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-med) var(--ease);
}
.header-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-nav a.nav-cta {
  padding: 0.4rem 1.8rem;
  background: var(--c-accent);
  color: var(--c-white);
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.header-nav a.nav-cta::after { display: none; }
.header-nav a.nav-cta svg { transition: transform var(--t-fast) var(--ease); }
.header-nav a.nav-cta:hover { background: var(--c-accent-dark); }
.header-nav a.nav-cta:hover svg { transform: translateX(4px); }
.site-header.is-scrolled .header-nav a.nav-cta { color: var(--c-white); }

.header-burger {
  display: none;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  align-items: flex-end;
}
.header-burger span {
  display: block;
  height: 1.5px;
  background: var(--c-white);
  transition: all var(--t-fast) var(--ease);
}
.header-burger span:nth-child(1) { width: 24px; }
.header-burger span:nth-child(2) { width: 16px; }
.site-header.is-scrolled .header-burger span { background: var(--c-text); }
.header-burger.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); width: 24px; }
.header-burger.is-open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); width: 24px; }


/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--c-white);
  overflow: hidden;
  padding-bottom: 6rem;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-poster {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.hero-video {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
  transform: translate3d(0, var(--hero-parallax, 0px), 0);
  will-change: transform;
  z-index: 0;
  opacity: 0;                       /* verborgen, bis das Video abspielt */
  transition: opacity 0.6s ease;
}
.hero-video.is-ready { opacity: 1; }

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(26,14,7,0.80) 0%,
      rgba(26,14,7,0.35) 25%,
      rgba(26,14,7,0.55) 80%,
      rgba(26,14,7,0.80) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  padding:0 var(--gutter);
  width: 100%;
  margin: 0 auto;
  animation: heroIn 1400ms var(--ease-out) both;
  animation-delay: 200ms;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  margin-left:5px;
}
.hero-meta-line {
  display: block;
  width: 50px;
  height: 1px;
  background: #fff;
}
.hero-meta-text {
  font-size: 0.78rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-bg-soft);
}

.hero-headline {
  font-size: clamp(2.6rem, 6.2vw, 5.1rem);
  font-weight: var(--w-medium);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 3rem;
  max-width: 22ch;
}
.hero-headline-emph {
  display: block;
  color: rgba(255,255,255,0.85);
  font-weight: var(--w-light);
  margin-top: 0.4rem;
  font-size: 0.85em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2.25rem;
}


/* ==========================================================================
   6. MANIFEST
   ========================================================================== */
.manifest {
  padding: clamp(5rem, 12vw, 10rem) 0 clamp(5rem, 12vw, 10rem);
  background: var(--c-white);
}
.manifest-grid {
  display: grid;
  gap: 3rem;
  align-items: start;
  margin-bottom: clamp(3.5rem, 8vw, 5rem);
}

.manifest-headline {
  font-size: clamp(2.3rem, 5.5vw, 4.2rem);
  font-weight: var(--w-medium);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--c-text);
}

/* Letter-by-letter color animation (light tone #dad1c6 → dark on scroll).
   Each .char receives --p (0..1) from JS based on the headline's scroll progress. */
.manifest-headline .char {
  --p: 0;
  --c-char-pre: #dad1c6; /* start tone, before the letter is revealed */
  color: color-mix(in srgb, var(--c-text) calc(var(--p) * 100%), var(--c-char-pre));
  /* Tiny transition to smooth out scroll jitter */
  transition: color 80ms linear;
}
/* Fallback for browsers without color-mix support: use opacity */
@supports not (color: color-mix(in srgb, red, blue)) {
  .manifest-headline .char {
    color: var(--c-text);
    opacity: calc(0.30 + 0.70 * var(--p));
  }
}

.manifest-body { display: flex; flex-direction: column; gap: 1.4rem;}
.manifest-body p { color: var(--c-text-soft); font-size: 1.05rem; line-height: 1.65; }
.manifest-body p.lead { color: var(--c-text); font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.5; font-weight: var(--w-light); }

.manifest-stats {
  display:flex;
  justify-content: space-between;
}
.stat-num {
  font-size: 4.3rem;
  font-weight: var(--w-medium);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-text);
}

@media screen and (min-width: 950px) {
  .stat-num {
    font-size: 5rem;
  }
}


.stat-num-white {
  font-size: 5rem;
  font-weight: var(--w-medium);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: white;
}


.stat-label {
  font-size: 0.78rem;
  font-weight: var(--w-regular);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}


/* ==========================================================================
   7. CAPABILITIES
   ========================================================================== */
.capabilities {
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(5rem, 10vw, 9rem) 0;
  background: var(--c-bg-softer);
}
/* The slider element carries the shared tokens; they inherit down to the track. */
.cap-slider {
  --cap-gap: clamp(1.25rem, 2.4vw, 2rem);
  --cap-progress: 0;
  --cap-shift: 0px;
}

/* ---- Base layout (touch / reduced-motion): native, swipeable carousel ---- */
.cap-slider-pin { position: static; }

.cap-track-wrap {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cap-track-wrap::-webkit-scrollbar { display: none; }

.cap-track {
  display: flex;
  gap: var(--cap-gap);
}

.cap-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 min(80vw, 30rem);
  scroll-snap-align: start;
}
.cap-card[data-card] { cursor: pointer; }
.cap-card[data-card]:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: var(--r-md); }

/* Landscape (Querformat) imagery */
.cap-card .cap-image { aspect-ratio: 5 / 4; }

/* ---- Enhanced layout (≥768px, motion OK): pinned, scroll-driven horizontal slide ---- */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* The tall section provides the vertical scroll distance that drives the slide. */
  .cap-slider { height: var(--cap-slider-h, 260vh); }

  .cap-slider-pin {
    position: sticky;
    top: 15vh;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;            /* clip the cards that run off the right edge */
  }

  .cap-track-wrap {
    overflow: visible;
    scroll-snap-type: none;
  }

  /* Track width = container content width → exactly 2 cards fit; 3 & 4 overflow right. */
  .cap-track {
    width: 100%;
    transform: translate3d(calc(var(--cap-progress) * var(--cap-shift) * -1), 0, 0);
    will-change: transform;
  }

  .cap-card {
    flex: 0 0 calc((100% - var(--cap-gap)) / 2);
    scroll-snap-align: none;
  }
}

/* Mobile: the slider runs edge-to-edge, but the first and last cards keep the
   same inset as the container text. Leading inset = start padding on the track.
   Trailing inset = a flex spacer (::after): end margin/padding on flex scroll
   content is not reliably added to the scroll width across browsers, but a real
   flex item always is. The track gap also applies before the spacer, so we
   subtract it to keep the visible end gap exactly one gutter. */
@media (max-width: 767px) {
  .cap-slider-inner { max-width: none; padding: 0; }
  .cap-track { padding-inline-start: var(--gutter); }
  .cap-track::after {
    content: "";
    flex: 0 0 calc(var(--gutter) - var(--cap-gap));
  }
  .cap-track-wrap { scroll-padding-inline: var(--gutter); }
}

/* Zoom indicator on cap-card images */
.cap-zoom {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--c-text);
  z-index: 3;
  opacity: 0;
  transform: translateY(-4px) scale(0.9);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cap-card:hover .cap-zoom,
.cap-card:focus-visible .cap-zoom {
  opacity: 1;
  transform: translateY(0) scale(1);
  background: var(--c-accent);
  color: var(--c-white);
}

/* Image / Placeholder */
.cap-image, .heritage-image, .showcase-image {
  position: relative;
  width: 100%;
  background: var(--c-bg-soft);
  overflow: hidden;
  border-radius: var(--r-md);
  transition: transform var(--t-med) var(--ease);
}
.cap-image::before, .heritage-image::before, .showcase-image::before {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--c-text-mute);
  font-size: 0.85rem;
  font-weight: var(--w-light);
  line-height: 1.5;
  letter-spacing: 0.04em;
  max-width: 28ch;
  margin: auto;
}

.showcase-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cap-card:hover .cap-image { transform: translateY(-4px); }

.cap-text {
  padding-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 50ch;
}
.cap-text h3 {
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  font-weight: var(--w-medium);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-text);
}
.cap-text p {
  color: var(--c-text-soft);
  font-size: 1rem;
  line-height: 1.6;
}
.cap-details {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.95rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.02em;
  color: var(--c-text);
}
.cap-details svg { transition: transform var(--t-fast) var(--ease); }
.cap-card:hover .cap-details svg,
.cap-card:focus-visible .cap-details svg { transform: translateX(4px); }

.cap-meta {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-line);
  color: var(--c-text-soft);
  font-size: 1rem;
}
.cap-meta a {
  color: var(--c-accent);
  font-weight: var(--w-medium);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
.cap-meta a:hover { border-color: currentColor; }


/* ==========================================================================
   8. HERITAGE
   ========================================================================== */
.heritage {
  padding: clamp(6rem, 12vw, 10rem) 0;
  background: var(--c-text);
  color: var(--c-white);
  position: relative;
  overflow: hidden;
}
.heritage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(191,146,107,0.08), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(191,146,107,0.06), transparent 50%);
  pointer-events: none;
}
.heritage > * { position: relative; }

.heritage-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}
.heritage-text { max-width: 56ch; }
.heritage-text .section-headline { margin-bottom: 2rem; }
.heritage-body { display: flex; flex-direction: column; gap: 1.3rem; }
.heritage-body p { color: rgba(255,255,255,0.92); font-size: 1.1rem; line-height: 1.55; }

.heritage-media {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.heritage-image {
  background: rgba(255,255,255,0.04);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.025) 0,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 8px);
}
.heritage-image::before { color: rgba(255,255,255,0.45); }
.heritage-image::after { border-color: rgba(255,255,255,0.1); }
.heritage-image--main { aspect-ratio: 4 / 5; }

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: 2.75rem;
}
/* Full-bleed horizontal axis: runs from the left screen edge to the right. */
.timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.20);
}

@media (max-width: 767px) {
  .timeline {
    border-top: none;
    padding-top: 0;
  }

  .timeline-item { padding-bottom: 2rem !important; padding-right:0 !important; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .timeline-item::after { display: none !important; }
  .timeline-item:last-child { border-bottom: 0; padding-bottom: 0; }
}
.timeline-item {
  padding: 0 2.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  position: relative;
}
.timeline-item:last-child {
  padding: 0;
}
.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 1.25rem;
  top: 0.5rem;
  width: 1px;
  height: calc(100% - 1rem);
  background: rgba(255,255,255,0.12);
}
.timeline-year {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
  color: var(--c-accent);
}
.timeline-text {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* --- Timeline markers (scoped to the history timeline only) --- */
.timeline .timeline-item {
  padding: 2.4rem 2.5rem 0 0;
  position: relative;
}
.timeline .timeline-item:last-child { padding-right: 0; }
.timeline .timeline-item::after { display: none; }   /* drop old column separators */
.timeline .timeline-item::before {                    /* node sitting on the axis */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-text);                /* ring in section bg, so the line meets the node cleanly */
  z-index: 1;
}


/* ==========================================================================
   9. PRODUCTION / MANUFAKTUR
   ========================================================================== */
.production {
  padding: clamp(6rem, 12vw, 10rem) 0;
  background: var(--c-white);
}
.production-intro {
  display: grid;
  gap: 2rem;
  margin-bottom: clamp(4rem, 7vw, 6rem);
}
.production-intro .section-headline { max-width: 22ch; }

.production-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line);
  margin-bottom: clamp(4rem, 7vw, 6rem);
}
.prod-block {
  padding: 2.5rem 2rem 2.5rem 0;
  border-bottom: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}
.prod-block:nth-child(3n) { border-right: 0; padding-right: 0; }
.prod-block:nth-child(3n+1) { padding-left: 0; }
.prod-block:not(:nth-child(3n+1)) { padding-left: 2rem; }
.prod-num {
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  font-weight: var(--w-medium);
  color: var(--c-accent);
}
.prod-block h3 {
  font-size: 1.4rem;
  font-weight: var(--w-medium);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.prod-block p {
  font-size: 0.98rem;
  line-height: 1.6;
}

.production-showcase {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.5rem;
}
.showcase-image { aspect-ratio: 4 / 3; }
.showcase-image--wide { height:100%; }
.production-showcase {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "wide a"
    "wide b";
}
.production-showcase .showcase-image:nth-child(1) { grid-area: wide; }
.production-showcase .showcase-image:nth-child(2) { grid-area: a; }
.production-showcase .showcase-image:nth-child(3) { grid-area: b; }


/* ==========================================================================
   10. AUSTRIA
   ========================================================================== */
.austria {
  padding: clamp(6rem, 12vw, 10rem) 0 0;
  background: var(--c-bg-soft);
  overflow: hidden;
}
/* Scoped override: no bottom margin on the intro block here — elsewhere
   on the page .production-intro keeps its default margin-bottom. */
.austria .production-intro { margin-bottom: 0; }

@media (min-width: 900px) {
  .austria-list {
    display: flex;
    gap: 2rem;
  }

  .austria-list li {
    padding: 0;
    font-size: clamp(1.0rem, 1.4vw, 1.2rem);
  }
}

.austria-list li {
  padding: .3rem 0;
  display: flex;
  gap: .5rem;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: var(--w-light);
  line-height: 1.4;
}

.austria-list li span { color: var(--c-accent); flex-shrink: 0; }

/* Full-bleed image below the text — direct child of the section (not .container),
   so it can run edge-to-edge without any breakout hacks. */
.austria-image {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  margin-top: -4vw;
}
.austria-image picture,
.austria-image img {
  display: block;
  width: 100%;
  height: 100%;
}
.austria-image img { object-fit: cover; }

.austria-text { position: relative; z-index: 2; }


/* ==========================================================================
   11. CONTACT
   ========================================================================== */
.contact {
  padding: clamp(6rem, 12vw, 10rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--c-text);
  color: var(--c-white);
  position: relative;
  overflow: hidden;
}
.contact > * { position: relative; }

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.contact-headline {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: var(--w-medium);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1.75rem;
}
.contact-sub {
  color: rgba(255,255,255,0.72);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 50ch;
}

.contact-info {
  display: flex;
  flex-direction: column;
}
.contact-block {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-block:first-child {
  padding: 0 0 1.5rem 0;
}
.contact-label {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: var(--w-regular);
}
.contact-link {
  font-size: 1.25rem;
  font-weight: var(--w-light);
  color: var(--c-white);
  letter-spacing: -0.005em;
  transition: color var(--t-fast) var(--ease);
}
.contact-link:hover { color: var(--c-accent); }
.contact-address {
  font-size: 1.05rem;
  font-weight: var(--w-light);
  color: rgba(255,255,255,0.85);
  font-style: normal;
  line-height: 1.55;
}

.contact-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(4rem, 8vw, 6rem);
  padding-top: 2rem;
  border-top: 1px solid var(--c-line-light);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255);
}
.contact-legal-link {
  color: rgba(255,255,255);
  letter-spacing: 0.08em;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.contact-legal-link:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}
.contact-legal-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}


/* ==========================================================================
   12B. EXPANDING IMAGE SECTION (sticky pin + width expansion at fixed height)
   ========================================================================== */
.expand-section {
  --expand-progress: 0;
  position: relative;
  background: var(--c-bg-softer);
  /* Total section height */
  height: 90vh;
}
.expand-pin {
  position: sticky;
  top: 0;
  height: 90vh;
  height: 90svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-bg-softer);
}
.expand-image {
  /* Full height from the start; only the width grows from the container width to full-bleed. */
  --start-w: calc(min(var(--container), 100vw) - 2 * var(--gutter));   /* exact container content width */
  --end-w: 100vw;
  --end-h: 90vh;
  width: calc(var(--start-w) + (var(--end-w) - var(--start-w)) * var(--expand-progress));
  height: var(--end-h);
  border-radius: calc(var(--r-md) * (1 - var(--expand-progress)));
  position: relative;
  overflow: hidden;
  transition: none;
  will-change: width, border-radius;
}

/* Actual photograph */
.expand-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Gradient overlay — bottom-heavy, like the hero section */
.expand-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(26, 14, 7, 0.82) 0%,
      rgba(26, 14, 7, 0.40) 35%,
      rgba(26, 14, 7, 0.10) 60%,
      transparent 100%
    );
  pointer-events: none;
}

/* Content wrapper — fills the image, aligns children to the bottom */
.expand-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

/* Inner respects the same container math as .container (max-width + auto margins + gutter padding) */
.expand-content-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  pointer-events: auto;
}

/* Body text — soft white, readable */
.expand-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: var(--w-regular);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  max-width: 44ch;
}


/* ==========================================================================
   12C. CAPABILITY MODAL
   ========================================================================== */
body.modal-open { overflow: hidden; }

.cap-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.cap-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--t-med) var(--ease), visibility 0s linear 0s;
}
.cap-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 8, 4, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cap-modal-dialog {
  position: relative;
  z-index: 1;
  background: var(--c-white);
  width: min(1080px, 100%);
  max-height: calc(100vh - 4rem);
  max-height: calc(100svh - 4rem);
  overflow-y: auto;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  transform: translateY(20px) scale(0.98);
  opacity: 0;
  transition: transform var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);
}
.cap-modal.is-open .cap-modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
  transition-delay: 60ms;
}
.cap-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-bg-soft);
  color: var(--c-text);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cap-modal-close:hover {
  background: var(--c-accent);
  color: var(--c-white);
  transform: rotate(90deg);
}
.cap-modal-content {
  padding: clamp(2rem, 4vw, 3.25rem);
}
/* Titelbild-Variante: deutlich weniger Abstand oben, da die Überschrift
   bereits im Bild sitzt — sonst entsteht eine unnötig große Lücke zum Fließtext. */
.cap-modal--with-hero .cap-modal-content {
  padding-top: 0.85rem;
}

/* --- Titelbild: randlos am Kopf des Popups, Text überlagert das untere Drittel --- */
.cap-modal-hero {
  position: relative;
  width: 100%;
  line-height: 0; /* kein Zeilenabstand unter dem Bild */
  background: var(--c-bg-soft);
}
.cap-modal-hero-img {
  display: block;
  width: 100%;
  height: auto; /* Höhe folgt dem Seitenverhältnis der Bilddatei */
  aspect-ratio: 1600 / 465; /* Platz reservieren (Desktop-Titelbild), verhindert CLS */
}
.cap-modal-hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3.25rem) 0.5rem;
}
.cap-modal-hero-text .cap-modal-title {
  margin-bottom: 0;
}
/* Fallback, falls kein Titelbild hinterlegt ist / das Bild nicht lädt */
.cap-modal-hero.is-fallback {
  min-height: 180px;
  background: linear-gradient(135deg, var(--c-text) 0%, var(--c-accent-dark) 100%);
}
.cap-modal-hero.is-fallback .cap-modal-hero-img { display: none; }

/* Der Schließen-Button liegt jetzt direkt über dem Titelbild und braucht mehr Kontrast */
.cap-modal--with-hero .cap-modal-close {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cap-modal--with-hero .cap-modal-close:hover {
  background: var(--c-accent);
  color: var(--c-white);
}

.cap-modal-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: var(--w-medium);
  margin-bottom: .8rem;
}
.cap-modal-title {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: var(--w-medium);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin-bottom: 1rem;
  max-width: 22ch;
}
.cap-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 3.5rem;
}
.cap-modal-bullets {
  list-style: none;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.7rem;
  max-width: 65ch;
}
.cap-modal-bullets li {
  position: relative;
  padding-left: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}
.cap-modal-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  transform: translateY(-50%);
}
.cap-modal-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cap-modal-image img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cap-modal-image::before {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--c-text-mute);
  font-size: 0.8rem;
  font-weight: var(--w-light);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.cap-modal-text {
  font-size: 1.05rem;
  line-height: 1.65;
}
.cap-modal-text p + p {
  margin-top: 1em;
}

/* --- Legal modal (Impressum / AGB): narrower, text-focused --- */
.legal-modal .cap-modal-dialog { width: min(680px, 100%); }
.legal-modal .cap-modal-title { margin-bottom: 1.5rem; }
.legal-modal-body {
  color: var(--c-text-soft);
  font-size: 0.97rem;
  line-height: 1.7;
}
.legal-modal-body h4 {
  color: var(--c-text);
  font-size: 1rem;
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
  margin: 1.6rem 0 0.4rem;
}
.legal-modal-body h4:first-child { margin-top: 0; }
.legal-modal-body p { margin: 0 0 0.9rem; }
.legal-modal-body p:last-child { margin-bottom: 0; }
.legal-modal-body a { color: var(--c-accent); }

/* ==========================================================================
   12D. FAQ
   ========================================================================== */
.faq {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--c-white);
}
.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.faq-headline-area .section-headline { margin-bottom: 1.75rem; }
.faq-headline-area .lead {
  color: var(--c-text-soft);
  max-width: 36ch;
}

.faq-list {
  border-top: 1px solid var(--c-line);
}
.faq-item {
  border-bottom: 1px solid var(--c-line);
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1.6rem 0;
  text-align: left;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: var(--w-regular);
  color: var(--c-text);
  letter-spacing: -0.005em;
  transition: color var(--t-fast) var(--ease);
}
.faq-question:hover { color: var(--c-accent); }
.faq-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  position: relative;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  top: 50%;
  left: 50%;
  transition: transform var(--t-med) var(--ease);
}
.faq-icon::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.faq-icon::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.faq-item.is-open .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med) var(--ease);
}
.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-answer-inner p {
  padding: 0 0 1.6rem;
  color: var(--c-text-soft);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 60ch;
}


/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .manifest-grid { grid-template-columns: 1fr; gap: 1rem; }
  .manifest-stats { 
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }
  .heritage-layout { grid-template-columns: 1fr; gap: 3rem; }
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .timeline .timeline-item { padding-right: 1.25rem; }
  .production-intro { grid-template-columns: 1fr; gap: 1rem; }
  .production-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-block:nth-child(3n) { border-right: 1px solid var(--c-line); padding-right: 2rem; }
  .prod-block:nth-child(2n) { border-right: 0; padding-right: 0; }
  .prod-block:nth-child(3n+1) { padding-left: 2rem; }
  .prod-block:nth-child(2n+1) { padding-left: 0; }
  .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
  .faq-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media screen and (min-width: 950px) {
  .manifest-stats { 
    border-top: 1px solid var(--c-line);
    padding-top:3.5rem;
  }
}

@media (max-width: 768px) {
  body { font-size: 16px; }

  /* Slightly smaller section headlines on mobile */
  .section-headline { font-size: clamp(2.1rem, 7vw, 2.5rem); }
  .manifest-headline { font-size: clamp(2.1rem, 7vw, 2.5rem); }

  /* Tighter vertical rhythm on mobile */
  .production { padding-top: 4rem; padding-bottom: 4rem; }
  .faq { padding-top: 3.5rem; }
  .contact { padding-top: 4rem; }

  /* Austria: text sits above, no bottom padding — the image runs
     to the very bottom edge of the section, full-bleed. */
  .austria { padding: 4rem 0 0; }
  .austria-text { position: relative; z-index: 2; }

  /* Own (portrait) mobile image, pulled up so the text overlaps
     roughly its top 20% — no gradient/shadow, just a plain overlap. */
  .austria-image {
    z-index: 1;
    margin-top: -22vw; /* ≈ 20% of the image's own rendered height at a 4:5 ratio */
  }

  .austria-text { position: relative; z-index: 2; }

  .header-burger { display: flex; position: relative; z-index: 2; }

  /* Mobile navigation: unfolds from the top as a solid, full-width white panel */
  .header-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 1;
    background: var(--c-white);
    color: var(--c-text);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 6.75rem var(--gutter) 2.5rem;
    max-height: 100svh;
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform var(--t-med) var(--ease);
    box-shadow: 0 26px 50px rgba(37, 21, 11, 0.12);
  }
  .header-nav.is-open { transform: translateY(0); }

  /* Keep logo + burger above the panel; force their dark (solid) look while open */
  .header-logo { position: relative; z-index: 2; }
  .site-header.is-menu-open { background: var(--c-white); }
  .site-header.is-menu-open .header-logo img { filter: none; }
  .site-header.is-menu-open .header-burger span { background: var(--c-text); }

  /* Stacked links with thin separators */
  .header-nav a,
  .site-header.is-scrolled .header-nav a {
    color: var(--c-text);
    font-size: 1.3rem;
    font-weight: var(--w-light);
    letter-spacing: -0.01em;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--c-line);
  }
  .header-nav a::after { display: none; }

  /* Full-width accent CTA at the bottom */
  .header-nav a.nav-cta,
  .site-header.is-scrolled .header-nav a.nav-cta {
    margin-top: 2.5rem;
    padding: 1.2rem 0;
    border-bottom: 0;
    background: var(--c-accent);
    color: var(--c-white);
    justify-content: center;
    font-size: 1.05rem;
    font-weight: var(--w-medium);
    letter-spacing: 0.04em;
  }
  .header-nav a.nav-cta svg { width: 16px; height: 16px; }

  .hero {
    min-height: 95vh;
    padding-bottom: 3rem;
  }

  /* Capability slider handles its own responsive layout (see section 7). */

  .production-grid { grid-template-columns: 1fr; }
  .prod-block, .prod-block:nth-child(3n), .prod-block:nth-child(2n), .prod-block:nth-child(3n+1), .prod-block:nth-child(2n+1) {
    border-right: 0;
    padding: 2rem 0;
  }

  .production-showcase {
    grid-template-columns: 1fr;
    grid-template-areas: "wide" "a" "b";
  }
  .showcase-image--wide { grid-row: auto; }

  .contact-legal { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

  .cap-modal-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .cap-modal-content { padding: 2rem 1.25rem 2rem; padding-top: 3.5rem; }
  .cap-modal--with-hero .cap-modal-content { padding-top: 0.75rem; }
  .cap-modal-close { top: 0.85rem; right: 0.85rem; width: 38px; height: 38px; }
  .cap-modal-hero-text { padding: 1.5rem 1.25rem 0.5rem; }
  .cap-modal-hero-img { aspect-ratio: 900 / 915; } /* Mobil-Titelbild */

  /* Mobile: the image keeps a fixed size (full-bleed, viewport-fitting height);
     no sticky pin (which had pushed the bottom text out of view). The source
     image is very wide, so on scroll we pan the visible crop horizontally from
     left to right via object-position — the image size itself never changes. */
  .expand-section { height: auto; }
  .expand-pin {
    position: relative;
    top: auto;
    height: 78svh;
    min-height: 440px;
  }
  .expand-image {
    width: 100vw;
    height: 100%;
    border-radius: 0;
  }
  .expand-image img {
    object-position: calc(var(--expand-pan, 0) * 100%) center;
  }
  .expand-content-inner { padding-bottom: clamp(1.75rem, 6vw, 2.75rem); }
  .stat-num-white { font-size: 4.3rem; }

  /* Heritage timeline → vertical axis (top to bottom) on mobile */
  .timeline { display: block; grid-template-columns: none; margin-top: 1.75rem; }
  .timeline::before {                       /* flip the axis to vertical */
    top: 0.5rem;
    bottom: 0.5rem;
    left: 6px;
    width: 1px;
    height: auto;
    transform: none;
  }
  .timeline .timeline-item {
    padding: 0 0 1.85rem 1.9rem;            /* room for the line + node on the left */
    border-bottom: 0;
  }
  .timeline .timeline-item:last-child { padding-bottom: 0; }
  .timeline .timeline-item::before {        /* node on the vertical axis */
    top: 0.3rem;
    left: 6px;
    transform: translateX(-50%);
  }
  .timeline .timeline-year { margin-top: -5px; }   /* align years with the nodes */

  /* manifest-stats also use .timeline-item — keep their existing mobile look */
  .manifest-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .manifest-stats { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}