@font-face {
  font-family: 'Geologica';
  src: url('/assets/fonts/Geologica-VariableFont_CRSV\,SHRP\,slnt\,wght.ttf') format('truetype');
 /* supports full variable weight range */
  font-style: normal;    /* adjust for italic if you have one */
  
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: block;   /* normal flow */
  min-height: 100vh;
  width: 100%;
  text-align: center;
  margin: 0;
  font-family: "Geologica", Helvetica !important;
  
}
.spacer-60 {
  height: 80px;       /* height of the empty space */
  width: 100%;        /* full width */
  display: block;     /* ensure it behaves like a block element */
}
.spacer-20 {
  height: 20px;       /* height of the empty space */
  width: 100%;        /* full width */
  display: block;     /* ensure it behaves like a block element */
}
.spacer-100 {
  height: 120px;       /* height of the empty space */
  width: 100%;        /* full width */
  display: block;     /* ensure it behaves like a block element */
}
.spacer-120 {
  height: 200px;       /* height of the empty space */
  width: 100%;        /* full width */
  display: block;     /* ensure it behaves like a block element */
}
.spacer-200 {
  height: 200px;      /* height of the empty space */
  width: 100%;        /* full width */
  display: block;     /* ensure it behaves like a block element */
}


.sides-padding_two-lines {
  margin: 0 auto;       /* center the paragraph */
  white-space: normal;  /* allow wrapping */
  word-break: break-word; /* break long words if needed */
  line-height: 1.2;     /* spacing between lines */
}


 a {
  text-decoration: none;  /* removes underline */
  color: inherit;         /* use parent text color instead of blue */
  font-size: 1.25rem;         /* optional: slightly larger font size */
}

 a:hover {
  text-decoration: underline; /* optional: underline on hover */
  color: #498a81;             /* optional: change color on hover */
}

/* Make active link bold */
a.active {
  font-weight:600 ;
  color: #ffffff; /* optional: match your design */
}
p a {
  font-size: 2rem; /* smaller links in paragraphs */
  text-decoration: none;
}
.non-link-smaller {
  font-size: 2rem; /* smaller text for non-links */
}


.separator {
  font-weight: 400  ;      
  font-size: 1.96rem;           /* slightly larger than normal text */
  margin: 0;          /* spacing around separator */
}


footer p{ margin-top: 2rem; font-size: 0.6rem; color: gray; }
.sides-padding {
  padding: 0 110px;
}


.sides-padding.text-wrapper p,
.sides-padding.text-wrapper h1 {
  margin-top: 0 ;       /* remove top margin */
  margin-bottom:  1.5rem; /* small gap below */
}

h1 {
  
  font-family: "Geologica", Helvetica !important ;
  font-variation-settings: 
    "wght" 600,   /* weight = Semibold */
    "slnt" 0,     /* slant = normal */
    "SHRP" 0;    /* sharpness if supported */
  color: #63666a;
  font-size: 5.8rem; /* responsive size  = 72px*/
  line-height: 1.2;
}

p {
  font-family: "Geologica", Helvetica !important;
  font-weight: 300; /* light */
  font-size: 1.97rem; /* responsive size = 20px,   1.1875rem =  19px  */
  letter-spacing: 0;
  /* margin: 0.5rem 0; */
  line-height: 40px;
}

.text-color {
  color: white;
  
}
.text-color p{
  color: white;
  font-variation-settings: 
    "wght" 200,   /* weight = Semibold */
    "slnt" 0,     /* slant = normal */
    "SHRP" 0 ;    /* sharpness if supported */
}

.text-thicker p{
 
    font-variation-settings: 
    "wght" 700,   /* weight = Semibold */
    "slnt" 0,     /* slant = normal */
    "SHRP" 0;    /* sharpness if supported */
 
}



.group {
  background: linear-gradient(
    rgba(0, 150, 129, 1) 30%,
    rgba(0, 113, 188, 1) 100%
  );
  
}

.group-two {
  background: linear-gradient(
    rgba(0, 113, 188, 1)  0%,
     rgba(0, 150, 129, 1) 100%
  );

}
.group_circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(0, 113, 188, 1), rgba(0, 150, 129, 1));

  display: flex;             /* enable flex for centering */
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  color: #63666a;             /* text color */
  font-weight: bold;
  font-size: 2.0rem;
  line-height: 31px;  
  text-align: center;
  box-sizing: border-box;
}

.group_circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 65%;               /* inner circle size */
  height: 65%;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;               /* place behind text */
}

.group_circle > * {
  position: relative;        /* ensures text stays above pseudo-element */
  z-index: 1;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 per row (like your table) */
  gap: 20px;
  width: 100%;
  margin: 0 auto; /* center the grid */
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.group_circle {
  margin: 0 auto; /* center circle in cell */
}



.container-20 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* force 4 columns */
  gap: 32px;
  grid-template-areas:
    "a1 a2 a3 a4"
    "a5 a6 a7 a8"
    ".  a9 a10 .";

}
.container-contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 32px;
}
.left-column {
  grid-column: 2;
  
}


.howitworks-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 images in a row */

  width: 100%;
}




.howitworks-container img {
  width: 100%;
  object-fit: contain;
}

.howitworks-el {
   height: auto;
  display: block; 
}

.factory-image{
  width: 100%;
  max-width: 800px;  /* max size on large screens */
  height: auto;
  display: block;
  margin: 0 auto;    /* center it */
  border-radius: 20em;
}
.container-box
 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: self-start;


}

.container-box2{
  align-items: center;
}


header {
  display: flex;
  justify-content: space-between; /* pushes items apart */
  align-items: center;            /* vertical alignment */
  padding: 1rem;
}

/* remove absolute positioning */
.NSO-logo {
  width:  45%;   /* adjust as needed */
  height: auto;
  max-width: 680px; /* ensures it doesn’t overflow */
}

.NSO-logo-white-RGB {
  width: 100%;
  align-self: flex-start;
}

.NSO-logo-white-RGB img {
  width: clamp(420px, 40vw, 900px);
  height: auto;
  display: block;
max-width: 1600px;
margin-top: -1rem;
  
}

.two-columns {
  display: flex;
  justify-content: space-between; /* push left & right */
  align-items: flex-start;        /* align at top */
  align-items: left;

  gap: 0;                      /* space between columns */
}

.two-columns > div {
  flex-basis: 48%;  /* roughly half each column */
  min-width: 100%; /* ensures it doesn’t shrink too small */
  text-align: left;      /* align content inside the column to the left */
}
.contact-info {
  text-align: left;        /* align all text to left */
  
  flex-direction: column;  /* stack items vertically */
  align-items: flex-start; /* align everything to left edge */
   width: min(416px, 100%);
}
.contact-info img {
  align-self: flex-end;  /* force image to left */
  margin-bottom: 1rem;
  width: 300px;
}
.contact-info-box  {
  align-self: flex-end;  /* force image to left */
  
}



.card {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 1px 2px -1px #0000001a,
              0px 1px 3px #0000001a;
  
  display: flex;
  flex-direction: column; /* keeps text stacked */
  justify-content: center; /* vertical centering */
  align-items: center; /* horizontal centering */

  color: black;
  width: min(616px, 100%);
  min-height: 4.6875rem;

  
}

.card2 {
  height: 180px;             /* same card height for all */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 1px 2px -1px #0000001a, 0px 1px 3px #0000001a;
 padding: 2px 10px; /* less padding to fit logos */
  padding-bottom: -20px;
  box-sizing: border-box;
  overflow: hidden;

}

/* container for all logos */
.card2 img {
  display: block;
  width: auto;               /* preserve aspect ratio */
  height: auto;              /* uniform visual height */
  max-width: 80%;           /* prevent overflow */
  object-fit: contain;
  margin: 0 auto;
}

.card2 p {
  font-size: 14px;
  line-height: 1.2;
}

.card2:nth-child(1)  { grid-area: a1; }
.card2:nth-child(2)  { grid-area: a2; }
.card2:nth-child(3)  { grid-area: a3; }
.card2:nth-child(4)  { grid-area: a4; }
.card2:nth-child(5)  { grid-area: a5; }
.card2:nth-child(6)  { grid-area: a6; }
.card2:nth-child(7)  { grid-area: a7; }
.card2:nth-child(8)  { grid-area: a8; }
.card2:nth-child(9)  { grid-area: a9; }
.card2:nth-child(10) { grid-area: a10; }


/* new logo container */
.logo-box {
  height: 80%;             /* max visual logo height */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;               /* allow horizontal centering */
}

.logo-box img {
  max-height: 100%;
  width: auto;        /* keep aspect ratio */
  display: block;
  margin: 0 auto;
}
img[src*="logo-UMSICHT-teaser-1.png"] {
  transform: translateY(-1px);
}

.logo-box img[src*="maag"] {
  width: 120%;
  max-width: 75%;
  height: auto;
}

.logo-box img[alt="invest in bavaria partner logo"] {
  width: 100%;
  max-width: 50%;
  height: auto;
}
.image-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
          /* match your .logo-box height */
  width: 90%;        /* full width of container */
}
.image-stack img {
  height: 80%;        /* each image takes part of the stack */
  width: auto;        /* keeps aspect ratio */
  object-fit: contain;
  display: block;
}
.image-stack p {
  font-size: 12px;
}
.image-stack img[alt="mistra_autex_as logo"] {
  height: 80%;   /* take full available height */
   transform: translateY(10px);
}

.text-wrapper {
  font-family: "Geologica", Helvetica;
  letter-spacing: -0.5px;   /* less aggressive */

  white-space: normal;        /* allow wrapping */
  word-break: break-word;     /* break long words if needed */
  margin: 0;
}



.howitworks-container div img {
  width: 100%;           /* fill container width */
  height: 100%;          /* fill container height */
  object-fit: contain;     
  display: block;
}
 nav {
    display: flex;
    justify-content: center;  /* or flex-start if you prefer */
    align-items: center;
                  /* controls spacing between items */
    font-size: 1.97rem;        /* slightly smaller text */
  }


@media (max-width: 1500px) {
    h1 {
    font-size: 4rem; /* smaller headings */
    line-height: 1.2; /* tighter line spacing */
    
  }
  p {
  font-size: 1.10rem; /* responsive size = 20px,   1.1875rem =  19px  */
  line-height:31px;

}
 .separator {
    margin: 0 2px;            /* tighter spacing around | */
      font-size: 1.10rem; 
  }
 p a {
  font-size: 1.10rem; /* smaller links in paragraphs */
  text-decoration: none;
}
 nav {
    display: flex;
    justify-content: center;  /* or flex-start if you prefer */
    align-items: center;
                  /* controls spacing between items */
    font-size: 1.10rem;        /* slightly smaller text */
  }
.non-link-smaller {
  font-size: 1.10rem; /* smaller text for non-links */
}
.spacer-60 {
  height: 60px;       /* height of the empty space */
  width: 100%;        /* full width */
  display: block;     /* ensure it behaves like a block element */
}
.spacer-20 {
  height: 20px;       /* height of the empty space */
  width: 100%;        /* full width */
  display: block;     /* ensure it behaves like a block element */
}
.spacer-100 {
  height: 100px;       /* height of the empty space */
  width: 100%;        /* full width */
  display: block;     /* ensure it behaves like a block element */
}
.spacer-120 {
  height: 120px;       /* height of the empty space */
  width: 100%;        /* full width */
  display: block;     /* ensure it behaves like a block element */
}
.spacer-200 {
  height: 200px;      /* height of the empty space */
  width: 100%;        /* full width */
  display: block;     /* ensure it behaves like a block element */
}
.group_circle {
    width: 100px;
    height: 100px;
    font-size: 1.25rem;
    
  }
  .card {
      min-height: 4.6875rem;
      width: min(416px, 100%);
  }
  .card2 {
  height: 110px;  }
  .container-20{
     gap: 24px;
  }

.NSO-logo-white-RGB img {
  width: clamp(4rem, 100%, 14rem);
  margin-top: -0.5rem;
}
}

@media (max-width: 1030px) {
 
    nav {
    display: flex;
    justify-content: center;  /* or flex-start if you prefer */
    align-items: center;
                  /* controls spacing between items */
    font-size: 0.9rem;        /* slightly smaller text */
  }

  nav a {
    display: block; /* stack nav links vertically */
    margin: 0;
    padding: 0;
  }
   .separator {
    margin: 0 2px;            /* tighter spacing around | */
      font-size: 1.10rem; 
  }

  h1 {
    font-size: 4rem; /* smaller headings */
    line-height: 1.1; /* tighter line spacing */
  }
  .card{
    padding: 20px 20px; /* smaller cards */
  }
  footer p{
    font-size: 0.6rem;
    margin-top: 1rem;
  }
   .container-20 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
     grid-template-areas: none;
   
  }
  

    .container-20 > .card2 {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
 
  }

  

  .card2 img {
  display: block;
  width: auto;               /* preserve aspect ratio */
  height: auto;              /* uniform visual height */
  max-width: 80%;           /* prevent overflow */
  object-fit: contain;
  margin: 0 auto;
}
  .sides-padding {
    padding: 0 110px;
  }
    .timeline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
   
  
   .card2 img[alt="nextgeneration partner logo"] {

  max-height: 100%;
}
.spacer-200 {
  height: 60px;      /* reduce spacer height on small screens */
}
.spacer-100 {
  height: 100px;      /* reduce spacer height on small screens */  
 
}

p a {
  font-size: 1.10rem; /* smaller links in paragraphs */
}
.non-link-smaller {
  font-size: 1.10rem; /* smaller text for non-links */
}
.group_circle {
    width: 100px;
    height: 100px;
     font-size: 1.25rem;
  }
   .card2 {
  height: 120px; 

  }

  .container-contact {
  display: grid;
  grid-template-columns: repeat(1, 1fr); 

}
.left-column {
  grid-column: 1;
  
}

.logo-box img[src*="maag"],
.logo-box img[alt="invest in bavaria partner logo"] {
  width: 150%;
  max-width: 100%;
  height: auto;
}

}

/* Extra small screens: <= 270px */
@media (max-width: 750px) {
 .NSO-logo {
  width:  75%;   /* adjust as needed */
  height: auto;
}
  nav a {
    font-size:1.25rem;
    margin: 0.25rem 0; /* reduce spacing between links */
  }

  h1 {
    font-size: 2.6rem; /* shrink headings */
    line-height: 1 ; /* tighter line spacing */
    
  }
  p {
    font-size: 1rem; /* smaller body text */
    line-height: 1.4; /* tighter line spacing */
    line-height:31px;
  }
 .mobile-columns {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mobile-text {
  width: min(416px, 100%);
}


  footer p{
    font-size: 0.6rem;
    margin-top: 0.5rem;
  }
   .container-20 {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
   .separator {
              /* tighter spacing around | */
      font-size: 1rem; 
  }
    .sides-padding {
    padding: 0 30px;
  }
     .timeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .top-padding {
    padding-top: 20px;
  }
  .group_circle {
    width: 100px;
    height: 100px;
  }
  .howitworks-container {
  grid-template-columns: repeat(1, 1fr); /* 3 images in a row */
  width: 100%;
}

 
  .howitworks-el {
   height: auto;
  display: block; 
}
 .image-stack img[alt="mistra_autex_as logo"] {
  height: 80%;   /* take full available height */
   transform: translateY(0px);
}
  .card2{
    width:auto;
    height: 80px;
    padding: 10px;
    
  }
  .card2 img {
    max-height: 100%;
    width: auto; 
  }

   .card2 img[alt="nextgeneration partner logo"] {
  max-height: 80%;
  
}
.card2 img[alt="logo-hafen-straubing-sand partner logo"] {
  max-height: 60%;
}
.spacer-200 {
  height: 120px;      /* reduce spacer height on small screens */
}
.spacer-100 {
  height: 200px;      /* reduce spacer height on small screens */  
}
.spacer-60 {
  height: 40px;      /* reduce spacer height on small screens */

}
.text-wrapper {
  line-height: 1; /* tighter line spacing */

}
.sides-padding.text-wrapper p,
.sides-padding.text-wrapper h1 {
  margin-top: 0 ;       /* remove top margin */
  margin-bottom:  0.8rem; /* small gap below */
}
.image-stack {
  gap: -2px; /* smaller gap between stacked images */
  max-height: 60px;        /* match your .logo-box height */
  width: 100%;        /* full width of container */
}
p a {
  font-size: 1rem; /* smaller links in paragraphs */
}
.image-stack img[alt="mistra_autex_as logo"] {
  height: 40%;   /* take full available height */
  margin-top: 20px;
}
.image-stack p {
  font-size: 12px;
  line-height: auto;
  margin-top: -2px;
}
.non-link-smaller {
  font-size: 1rem; /* smaller text for non-links */
}

.contact-mobile {
  align-items: flex-start;
}
.container-contact {
  display: grid;
  grid-template-columns: repeat(1, 1fr); 

}
.left-column {
  grid-column: 1;
  
}
.card {
      height: 20px;
      width: min(416px, 100%);

  }
   .NSO-logo-white-RGB img {
    width: clamp(220px, 45%, 400px);
  }

  .logo-box img[src*="maag"],
.logo-box img[alt="invest in bavaria partner logo"] {
  width: 180%;
  max-width: 100%;
  height: auto;
}

}