@font-face {
  font-family: "Amsterdam";
  src: url("../fonts/amsterdam.ttf") format("truetype");
}
@font-face {
  font-family: "ChunkFive-Regular";
  src: url("../fonts/ChunkFive-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Earth";
  src: url("../fonts/Earth\ 2073.ttf") format("truetype");
}
@font-face {
  font-family: "Rubik-Bold";
  src: url("../fonts/Rubik-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Rubik-Italic";
  src: url("../fonts/Rubik-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Rubik-Medium";
  src: url("../fonts/Rubik-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Rubik-MediumItalic";
  src: url("../fonts/Rubik-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Rubik-Regular";
  src: url("../fonts/Rubik-Regular.ttf") format("truetype");
}
body {
  background-color: #000;
}
html,
body {
  overflow-x: hidden;
  position: relative;
  width: 100%;
}
.hero-nav {
  font-family: "Rubik-Bold";
  position: relative;
  aspect-ratio: 16 / 9; /* adjust to match your image */
  width: 100%;
  background: url("../images/main-img.jpg") center top / cover no-repeat;
  min-height: 320px;
  z-index: 1;
}
.hero-nav .container-fluid {
  padding-left: 7%;
}

/* Navbar height only */
.hero-nav .navbar {
  min-height: 90px;
  background: transparent;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Button styling */
.nav-btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 1.3rem;
  margin-right: 7px;
  color: #fff;
  background-color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.nav-btn:hover {
  background-color: #c6ff34; /* Your bright lime-green */
  color: #000;
}

/* The active class for the ScrollSpy effect */
.nav-btn.active {
  background-color: #c6ff34 !important; /* Forces the color when active */
  color: #000 !important;
}

.navbar-toggler {
  background-color: rgba(36, 36, 36, 0.35);
  border-radius: 4px;
}
@media (max-width: 1020px) {
  /* 1. Target the expanded menu container */
  .navbar-collapse {
    background-color: rgba(
      0,
      0,
      0,
      0.7
    ) !important; /* Black with 80% opacity */
    text-align: center; /* Centers the text of the buttons */
    padding: 10px 0; /* Adds some breathing room top and bottom */
  }

  /* 2. Style the buttons within the mobile menu */
  .nav-btn {
    font-size: 1.5rem;
    width: 70%; /* Increased width for better mobile look */
    display: block;
    margin: 10px auto; /* Centers the button block itself */
  }
}
/* Mobile buttons full width (Bootstrap handles collapse) */
@media (max-width: 600px) {
  /* 1. Target the expanded menu container */
  .navbar-collapse {
    background-color: rgba(
      0,
      0,
      0,
      0.7
    ) !important; /* Black with 80% opacity */
    text-align: center; /* Centers the text of the buttons */
    padding: 10px 0; /* Adds some breathing room top and bottom */
  }

  /* 2. Style the buttons within the mobile menu */
  .nav-btn {
    font-size: 1rem;
    width: 70%; /* Increased width for better mobile look */
    display: block;
    margin: 6px auto; /* Centers the button block itself */
  }
}

/* end of Navbar */

/*IMAGE SECTION*/

.block-container {
  width: 100%;
}

.block-items {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.intro {
  position: absolute;
  bottom: 18%; /* controls vertical placement */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 2;
}
.block-items img {
  width: 370px; /* control size */
  max-width: 45%;
  height: auto;
  cursor: pointer;
}
/* If any collapse inside .intro is shown, hide the section with class .title */
.intro:has(.collapse.show) ~ .title {
  display: none;
}
#collapseGroup {
  margin-top: -25px; /* remove white gap */
}
.title-collapse {
  background-color: black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  padding-left: 260px; /* move from left */
  box-sizing: border-box;
}

.collapse-arrow {
  width: 10rem;
  height: auto;
  padding-bottom: 23px;
}

.collapse-heading {
  font-family: "ChunkFive-Regular";
  font-size: clamp(3rem, 4.5vw, 5rem);
  padding-top: 100px;
  letter-spacing: 2px;
}
.text-green {
  color: #c6ff34;
}
.bg-true-black {
  background-color: #000 !important;
}

.collapse-text {
  color: white;
  font-family: "Rubik-Regular";
  font-size: 30px;
  line-height: 1.2;
  width: 50%;
  margin-left: 32%;
  margin-top: 30px;
}
.text-insta {
  margin-top: 70px; /* This creates the gap above the Instagram row */
  margin-left: 0px; /* Moves the whole container to align with text */
  margin-bottom: 70px;
}
.text-insta a {
  color: #c6ff34;
  font-family: "Rubik-Medium";
  font-size: 30px;
  line-height: 1.2;
  width: 50%;
  margin-left: 32%;
  text-decoration: none;
}

.text-insta img {
  width: 70px;
  height: 70px;
  margin-right: 40px;
}
/*BIG DESKTOPS */
@media (min-width: 1516px) {
  .title-collapse {
    padding: 40px 0 10px 27%; /* Use % padding instead of fixed margin-left */
  }
  .collapse-text {
    padding-left: 5%;
  }
  .text-insta a {
    margin-left: 37%;
  }
}
@media (min-width: 1441px) and (max-width: 1515px) {
  .block-items {
    gap: 55px;
  }
  .block-items img {
    width: 490px; /* control size */
    height: auto;
  }
  .title-collapse {
    padding: 40px 0 10px 20%; /* Use % padding instead of fixed margin-left */
  }
  .collapse-heading {
    font-size: 68px;
    padding-top: 88px; /* Removed the 60px padding that creates top gaps */
    line-height: 1;
    margin: 0;
  }
  .collapse-text {
    width: 100% !important;
    max-width: 800px;
    padding-left: 1%;
    font-size: 30px;
    line-height: 1.3;
  }
  .text-insta a {
    width: 50%;
    margin-left: 32%;
  }
}

/*LARGER TABLETS - IPAD PRO*/
@media (min-width: 1023px) and (max-width: 1336px) {
  .block-items {
    flex-direction: row;
    gap: 28px;
  }

  .title-collapse {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* Start from left but with controlled padding */
    padding: 40px 0 10px 15%; /* Use % padding instead of fixed margin-left */
    width: 100%; /* Changed from 85% to 100% to fill container */
    box-sizing: border-box;
    gap: 20px;
    margin-left: 0;
  }
  .collapse-arrow {
    width: 80px; /* Adjusted based on image */
    height: auto;
  }
  .collapse-heading {
    font-size: 46px;
    padding-top: 30px; /* Removed the 60px padding that creates top gaps */
    line-height: 1;
    margin: 0;
  }
  .collapse-text {
    width: 60% !important;
    max-width: 550px;
    margin-left: calc(15% + 100px) !important;
    margin-right: 15% !important;
    padding: 0;
    font-size: 30px;
    line-height: 1.4;
    text-align: left;
    box-sizing: border-box;
  }
  .text-insta {
    padding-left: 25px;
  }

  .text-insta a {
    width: 100%;
    margin-left: 175px;
    display: flex;
    align-items: center;
    font-size: 23px;
    gap: 15px;
  }

  .text-insta img {
    width: 35px;
    height: 35px;
    margin-right: 0;
  }
}
/* Tablet (up to 1024px) */
@media (min-width: 601px) and (max-width: 1022px) {
  .intro {
    bottom: 20%;
  }
  .block-items {
    flex-direction: row;
    gap: 28px;
  }
  .block-items img {
    width: 190px; /* control size */
    max-width: 45%;
    height: auto;
    cursor: pointer;
  }
  /* Reset the main container to remove Bootstrap's default side padding if necessary */
  .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden; /* Safety net to prevent side-scrolling */
  }

  /* 1. Reset Title Section */
  .title-collapse {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* Start from left but with controlled padding */
    padding: 40px 0 10px 15%; /* Use % padding instead of fixed margin-left */
    width: 100%; /* Changed from 85% to 100% to fill container */
    box-sizing: border-box;
    gap: 20px;
    margin-left: 0;
  }

  .collapse-arrow {
    width: 80px; /* Adjusted based on image */
    height: auto;
  }

  .collapse-heading {
    font-size: 46px;
    padding-top: 30px; /* Removed the 60px padding that creates top gaps */
    line-height: 1;
    margin: 0;
  }

  /* 2. Reset Paragraph Text */
  .collapse-text {
    width: 60% !important;
    max-width: 550px;
    margin-left: calc(15% + 100px) !important;
    margin-right: 15% !important;
    padding: 0;
    font-size: 18px;
    line-height: 1.4;
    text-align: left;
    box-sizing: border-box;
  }

  /* 3. Reset Instagram Link */
  .text-insta {
    padding-left: 25px;
  }

  .text-insta a {
    width: 100%;
    margin-left: 180px;
    display: flex;
    align-items: center;
    font-size: 18px;
    gap: 15px;
  }

  .text-insta img {
    width: 35px;
    height: 35px;
    margin-right: 0;
  }
}

/* Mobile (up to 600px) */
@media (max-width: 600px) {
  .intro {
    bottom: 28%;
  }
  .block-items {
    flex-direction: row;
    gap: 0px;
  }
  .block-items img {
    width: 130px; /* control size */
    max-width: 45%;
    height: auto;
    cursor: pointer;
  }
  /* Reset the main container to remove Bootstrap's default side padding if necessary */
  .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 1. Reset Title Section */
  .title-collapse {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 10px 30px 10px 30px; /* Top, Right, Bottom, Left */
    margin-left: 10px;
    width: 90%;
    gap: 15px; /* Space between arrow and heading */
  }

  .collapse-arrow {
    width: 80px; /* Adjusted based on image */
    padding-bottom: 0;
    margin-left: 25px !important; /* Optical alignment for the arrow tip */
  }

  .collapse-heading {
    font-size: 32px;
    margin-left: 25px !important; /* Override the desktop 32% */
    padding-top: 15px;
    line-height: 1;
  }

  /* 2. Reset Paragraph Text */
  .collapse-text {
    width: 100% !important; /* Override the desktop 50% */
    max-width: 90%;
    margin-left: 30px !important; /* Override the desktop 32% */
    padding: 0 30px 0 30px; /* Match the title's side padding */
    font-size: 18px;
    line-height: 1.3;
    box-sizing: border-box;
  }

  /* 3. Reset Instagram Link */
  .text-insta {
    padding-left: 25px;
    margin-top: 30px !important;
    margin-bottom: 10px !important;
  }

  .text-insta a {
    width: 100%;
    margin-left: 35px;
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 15px;
  }

  .text-insta img {
    width: 25px;
    height: 25px;
    margin-right: 0;
  }
}

/*CALENDAR SECTION*/

.calendar-container {
  background-color: #ffffff !important;
  width: 100vw !important; /* Viewport width: spans edge to edge */
  position: relative;
  left: 50%; /* Move to center */
  right: 50%; /* Move to center */
  margin-left: -50vw !important; /* Pull back to the far left edge */
  margin-right: -50vw !important; /* Pull back to the far right edge */
  color: #000000 !important;
  box-sizing: border-box;
}
/* Container for the white calendar box */
.calendar-wrapper {
  background-color: #ffffff !important;
  color: #000000 !important;
  padding: 60px 0px !important;
  margin: 40px auto 0px auto !important;
  width: 95%;
  max-width: 900px;
  box-sizing: border-box;
  text-align: left; /* Ensures everything stays left-aligned */
}

/* Header Section */
.cal-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  margin-left: 0px;
  width: 100%;
  margin-bottom: 20px;
}

.cal-arrow {
  width: 160px;
  height: auto;
  margin-bottom: 23px;
}

.cal-heading {
  font-family: "ChunkFive-Regular", serif;
  font-size: clamp(3rem, 4.5vw, 5rem);
  letter-spacing: 2px;
  margin-top: 160px;
  line-height: 0.9;
  color: #000 !important;
}

/* 2. Bold Date Range and Purple Text */
.cal-sub {
  color: #5447f8 !important;
  font-weight: 900;
  margin-top: 8px;
  font-family: "Rubik-Bold", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 28px;
}

/* Row separation */
.cal-row {
  display: flex;
  padding: 30px 0;
  margin-top: 10px;
  border-top: 1px solid #000 !important;
}

.cal-date-side {
  min-width: 130px;
  color: #5447f8 !important;
  margin-left: 200px;
  margin-top: 20px;
}
/* Date number stays Purple */
.date-num {
  display: block;
  color: #5447f8 !important;
  font-family: "Rubik-Bold", serif;
  font-size: 60px;
  line-height: 0.8; /* Pulls the text closer together vertically */
  margin-bottom: 5px; /* Controls the exact gap to the day name */
  margin-left: 0; /* Remove individual margin */
}

/* 4. Day of the week in BLACK */
.date-name {
  display: block;
  color: #000 !important;
  font-size: 16px;
  font-weight: 800;
  font-family: "Rubik-Bold", sans-serif;
  text-transform: uppercase;
  margin-top: 15px;
  margin-left: 0;
  line-height: 1;
}
/* Events Column */
.cal-events-side {
  flex-grow: 1;
  margin-left: 10px;
}

/* 3. Thicker separators for events */
.event-entry {
  border-bottom: 1px solid #000;
  padding: 15px 0;
}

.event-entry:last-child {
  border-bottom: none; /* No line under the last event of the day */
}

.event-title {
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  font-size: 30px;
  color: #000 !important;
  font-family: "Rubik-Bold", sans-serif;
}

.event-info {
  font-size: 20px;
  margin: 5px 0 0 0;
  color: #000 !important;
  font-family: "Rubik-Medium", sans-serif;
}

/* Footer Link */
.cal-footer {
  display: flex !important;
  /* Adjust this to 'flex-start' if you want them on the left, 
     or 'space-between' to push them to opposite corners */
  justify-content: space-between;
  gap: 40px; /* This creates the visible space between Zurück and Nächste Woche */
  padding: 20px 0;
  margin-left: 1%; /* Matches your heading alignment */
}

.next-week-link {
  color: #5447f8 !important;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  font-family: "Rubik-Bold", sans-serif;
}

.next-week-link:hover {
  text-decoration: underline;
}
.no-events-msg {
  font-family: "Rubik-Medium", sans-serif;
  font-size: 20px; /* Matching your footer/address text size */
  color: #000000; /* Or 'white' if this section has a dark background */
  padding: 40px 0; /* Adds breathing room between header and footer */
  line-height: 1.2;
  text-align: center; /* Adjust to 'center' if you want it middle-aligned */
}
@media (min-width: 1441px) {
  .cal-arrow {
    padding-top: 10px;
  }
}
/* Calender Tablet Adjustment */
@media (min-width: 601px) and (max-width: 1366px) {
  .calendar-wrapper {
    padding: 40px 20px !important;
  }
  .cal-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 0 10px 8%; /* Top, Right, Bottom, Left */
    margin-left: 20px;
    width: 100%;
    gap: 20px; /* Space between arrow and heading */
  }
  .cal-arrow {
    width: 80px; /* Adjusted based on image */
    height: auto;
    margin-left: 0px !important;
  }
  .cal-heading {
    font-size: 46px;
    margin-left: 0px !important; /* Override the desktop 32% */
    margin-top: 75px;
    line-height: 1;
  }
  .cal-sub {
    font-size: 16px;
  }
  .cal-row {
    display: flex;
    align-items: flex-start;
    padding: 20px 0;
  }
  .cal-date-side {
    width: 120px; /* Fixed width ensures 'Donnerstag' fits without pushing others */
    margin-left: 100px; /* Reduced from 180px to prevent overflow on smaller tablets */
    margin-top: 20px;
    flex-shrink: 0; /* Prevents the column from squishing */
    text-align: center;
  }
  .date-num {
    font-size: 50px;
    display: block; /* Ensures the number and name stack vertically */
    line-height: 1;
  }
  .date-name {
    font-size: 15px;
    display: block;
  }
  .event-title {
    font-size: 30px;
  }
  .event-info {
    font-size: 23px;
  }
  .cal-events-side {
    flex-grow: 1;
    padding-left: 20px; /* Stable gap between date and event text */
  }
  .cal-footer {
    padding-top: 10px !important;
    padding-left: 50px;
  }
  .next-week-link {
    font-size: 23px;
    padding-right: 40px;
  }
}
/* Calender Mobile Adjustments */
@media (max-width: 600px) {
  .calendar-wrapper {
    padding: 40px 20px 20px 20px !important;
    margin-bottom: 10px !important;
  }
  .cal-header {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 10px 30px 0px 30px; /* Top, Right, Bottom, Left */
    margin-left: 10px;
    width: 90%;
    gap: 15px; /* Space between arrow and heading */
  }
  .cal-arrow {
    width: 80px; /* Adjusted based on image */
    height: auto;
    margin-left: 0px !important;
  }
  .cal-heading {
    font-size: 32px;
    margin-left: 0px !important; /* Override the desktop 32% */
    margin-top: 0px;
    line-height: 1;
  }
  .cal-sub {
    font-size: 14px;
  }
  .cal-row {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 0px;
    gap: 15px;
    padding-bottom: 0px !important;
  }
  .cal-date-side {
    min-width: 130px;
    margin-left: 40px;
    margin-top: 8px;
  }
  .date-num {
    font-size: 45px;
  }
  .event-title {
    font-size: 23px;
  }
  .event-info {
    font-size: 16px;
  }
  .cal-events-side {
    margin-left: 38px;
  }
  .cal-footer {
    display: flex;
    /* This distributes the links to the far left and far right */
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px !important; /* Balanced padding for small screens */
    width: 100%;
    box-sizing: border-box;
  }
  .next-week-link {
    /* Slightly smaller font to prevent breaking on 395px screens */
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap; /* Forces the text to stay on one line */
    letter-spacing: 0.5px; /* Tighter spacing helps it fit */
  }
  .no-events-msg {
    font-size: 16px; /* Matching your footer/address text size */
    color: #000000; /* Or 'white' if this section has a dark background */
    padding: 20px 40px; /* Adds breathing room between header and footer */
    line-height: 1.2;
    text-align: center; /* Adjust to 'center' if you want it middle-aligned */
  }
}
/*TITLE SECTION*/

section.title {
  background-color: black;
  padding: 40px 20px 40px 20px; /* Gives the text room to breathe */
  display: flex;
  justify-content: center;
}
p.title {
  font-family: "Amsterdam";
  font-size: 70px;
  letter-spacing: 10px;
  text-align: center;
  color: white;
  margin: 0; /* Removes default browser spacing */
  line-height: 1.2; /* Normal desktop spacing */
}
@media (min-width: 601px) and (max-width: 1366px) {
  p.title {
    font-size: 40px;
    letter-spacing: 6px;
    /* This is the key to fixing your spacing */
    line-height: 1.1;
    padding: 10px 10px 0 10px;
  }
  section.title {
    padding: 20px 0;
  }
}
/* Mobile View */
@media (max-width: 600px) {
  p.title {
    font-size: 30px;
    letter-spacing: 6px;
    /* This is the key to fixing your spacing */
    line-height: 1.1;
    padding: 10px 10px 0 10px;
  }
  section.title {
    padding: 20px 0;
  }
}
/* UBER UNS */
.uber-uns {
  background-color: #c6ff34;
  display: grid;
  /* Adjusting column 1 to match the arrow width (160px) + gap (30px) */
  grid-template-columns: 190px minmax(300px, 700px);
  justify-content: center;
  padding: 80px 20px;
}
.title-wrapper {
  grid-column: 1 / span 2;
  display: grid; /* This ensures the arrow and H2 align with the main grid columns below */
  grid-template-columns: 190px 1fr;
  align-items: end; /* Aligns the bottom of the arrow with the text */
  gap: 0;
  margin-bottom: 40px;
}

.title-wrapper img {
  width: 160px;
  height: auto;
  padding-bottom: 15px; /* Let grid handle alignment */
}

.title-wrapper h2 {
  grid-column: 2; /* Forces "Über uns" into the second column */
  color: #000;
  font-family: "ChunkFive-Regular";
  font-size: clamp(3rem, 4.5vw, 5rem);
  letter-spacing: 2px;
  margin: 0;
  padding-top: 0;
}
.quote-section {
  grid-column: 2; /* Now starts exactly where the H2 starts */
  margin: 0;
}

.quote-section blockquote {
  color: #000;
  font-family: "Rubik-Medium";
  font-size: 30px;
  line-height: 1.3;
  margin: 8px 0; /* Reduced top margin to pull it closer to the title */
  padding: 0;
}

.quote-section figcaption {
  color: #000;
  font-family: "Rubik-Italic";
  font-size: 30px;
  padding-top: 25px;
  padding-left: 0px;
}
.team-section {
  grid-column: 2;
  margin-top: 45px;
  /* 1. Aggressive negative margin to pull it left */
  margin-left: -120px;
}
.team-section img {
  /* 2. Expand the width so it doesn't leave a gap on the right */
  width: calc(100% + 120px);
  max-width: 90%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  opacity: 1.2;
}
.team-section figcaption {
  color: #000;
  font-family: "Rubik-Medium";
  font-size: 25px; /* Slightly smaller for the names list */
  line-height: 1.4;
  margin-top: 15px;
  /* Keeps the caption aligned with the nudged image */
  padding-left: 120px;
  text-align: left;
  width: 95%;
}
@media (min-width: 601px) and (max-width: 1366px) {
  .title-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 0 10px 8%; /* Top, Right, Bottom, Left */
    margin-left: 45px;
    width: 100%;
    gap: 20px; /* Space between arrow and heading */
  }
  .title-wrapper img {
    width: 80px;
    height: auto;
    padding-bottom: 20px; /* Let grid handle alignment */
  }
  .title-wrapper h2 {
    padding-top: 30px;
  }
  .quote-section blockquote {
    width: 80% !important;
    max-width: 600px;
    margin-top: -20px;
    padding-left: 22px;
  }
  .quote-section figcaption {
    padding-left: 22px;
  }
}
@media (max-width: 600px) {
  .uber-uns {
    /* 1. Change to a single column so text can span the whole width */
    display: block;
    padding: 60px 20px;
  }
  .title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 2. Standardize left padding for a clean vertical line */
    padding: 0 0 0 40px;
    margin: 0;
    width: 100%;
    gap: 10px;
  }
  .title-wrapper img {
    width: 80px; /* Your preferred mobile size */
    height: auto;
    margin-left: 0 !important;
  }

  .title-wrapper h2 {
    font-size: 32px;
    margin: 0 !important;
    padding-top: 10px;
    line-height: 1.1;
  }

  .quote-section {
    /* 3. Ensure the container itself isn't pushed right */
    margin: 0;
    padding: 0 0 0 40px; /* Matches the title alignment */
  }

  .quote-section blockquote {
    width: 100% !important;
    max-width: 95%;
    font-size: 18px;
    line-height: 1.4;
    margin: 30px 0 0 0; /* Space above the quote */
    padding: 0;
    text-align: left;
  }

  .quote-section figcaption {
    font-size: 16px;
    padding-left: 0;
    margin-top: 0px;
  }
  .team-section {
    grid-column: 2;
    margin-top: 45px;
    /* 1. Aggressive negative margin to pull it left */
    margin-left: 0px;
  }
  .team-section img {
    /* 2. Expand the width so it doesn't leave a gap on the right */
    width: 100%;
    max-width: 90%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
    opacity: 1.2;
    padding-left: 30px;
  }
  .team-section figcaption {
    color: #000;
    font-family: "Rubik-Medium";
    font-size: 15px; /* Slightly smaller for the names list */
    line-height: 1.4;
    margin-top: 15px;
    /* Keeps the caption aligned with the nudged image */
    padding-left: 40px;
    text-align: left;
    width: 90%;
  }
}
/*KONTAKT*/
.kontakt {
  background-color: white;
  display: grid;
  grid-template-columns: 220px minmax(300px, 700px);
  justify-content: center;
  padding: 20px 20px 10px 20px;
}
.title-kontakt {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 0 10px 8%; /* Top, Right, Bottom, Left */
  margin-left: 2px;
  width: 100%;
  gap: 30px; /* Space between arrow and heading */
}
.kontakt h2 {
  font-family: "ChunkFive-Regular", serif;
  font-size: clamp(3rem, 4.5vw, 5rem);
  letter-spacing: 2px;
  margin-top: 120px;
  line-height: 0.9;
  color: #000 !important;
}
.kontakt img {
  width: 160px;
  height: auto;
}
.email {
  color: #000;
  grid-column: 2;
  grid-row: 2;
  font-family: "Rubik-Medium";
  font-size: 35px;
  line-height: 1.2;
  margin: 10px 0 70px -15px;
  padding-left: 0px;
}
.email a {
  color: #000;
  text-decoration: none;
}
@media (min-width: 1441px) {
  .title-kontakt {
    gap: 35px;
  }
  .kontakt h2 {
    padding-bottom: 10px;
  }
  .email {
    margin-left: -8px;
  }
}

@media (min-width: 601px) and (max-width: 1336px) {
  .kontakt {
    padding: 60px 0 30px 40px;
  }
  .title-kontakt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0 0 8%; /* Top, Right, Bottom, Left */
    margin-left: 80px;
    width: 100%;
    gap: 30px; /* Space between arrow and heading */
    margin-top: -50px;
  }
  .kontakt img {
    width: 80px;
    height: auto;
    margin-left: 0 !important;
    padding-top: 65px;
  }
  .kontakt h2 {
    padding-bottom: 0px;
  }
  .email {
    font-size: 30px;
    line-height: 1.2;
    margin-top: 10px;
    margin-left: -13px;
  }
}
@media (max-width: 600px) {
  .kontakt {
    /* 1. Switch parent to flex to make stacking easier */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 2. Standardize the left padding for the whole section */
    padding: 10px 0 60px 40px;
  }
  .title-kontakt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 3. Remove the margin-left that was pushing it away from the edge */
    margin: 0 !important;
    width: 100%;
    gap: 10px;
  }
  .kontakt img {
    width: 80px;
    height: auto;
    margin-left: 0 !important;
  }

  .kontakt h2 {
    font-size: 32px;
    margin: 0 !important;
    padding-top: 20px;
    line-height: 1.1;
    /* 4. Reduced padding-bottom to bring email closer */
    padding-bottom: 15px;
  }

  .email {
    /* 5. Reset grid properties so they don't interfere */
    grid-column: auto;
    grid-row: auto;
    font-size: 18px; /* Slightly smaller to ensure it fits on one line */
    line-height: 1.2;
    /* 6. Remove negative margins and use 0 to align with the H2 */
    margin: 0 !important;
    padding-left: 30px;
    word-break: break-all; /* Safety for very long email addresses */
  }
}
@media (max-width: 380px) {
  .email {
    font-size: 16px !important; /* Extra shrink for the smallest screens */
  }
}
/*DIVIDER SECTION*/
.divider {
  width: 100%;
  height: 60px; /* Slightly taller looks better with thin stripes */
  /* Each stripe is now 15px wide (30px total for a black/white set) */
  background: repeating-linear-gradient(
    -45deg,
    #000,
    #000 80px,
    #fff 80px,
    #fff 160px
  );
}
@media (min-width: 601px) and (max-width: 1440px) {
  .divider {
    width: 100%;
    height: 60px; /* Slightly taller looks better with thin stripes */
    /* Each stripe is now 15px wide (30px total for a black/white set) */
    background: repeating-linear-gradient(
      -45deg,
      #000,
      #000 60px,
      #fff 60px,
      #fff 120px
    );
  }
}
@media (max-width: 600px) {
  .divider {
    width: 100%;
    height: 40px; /* Slightly taller looks better with thin stripes */
    /* Each stripe is now 15px wide (30px total for a black/white set) */
    background: repeating-linear-gradient(
      -45deg,
      #000,
      #000 45px,
      #fff 45px,
      #fff 90px
    );
  }
}

/* INFO SECTION*/
.info {
  background-color: #5447f8;
  color: white;
  padding: 40px 20px;
}

/* Flex Layout */
.container-info {
  max-width: 1500px;
  padding: 0 0 0 15%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 80px;
}

.container-info > div {
  flex: 1;
  text-align: left;
}

.container-info h2 {
  color: white;
  font-family: "Rubik-Bold";
  font-size: 24px;
  margin-bottom: 0;
}

.container-info p {
  color: white;
  font-family: "Rubik-Regular";
  font-size: 23px;
  margin: 0 0 30px;
  line-height: 1.2;
}

.hours {
  font-family: "Rubik-Regular";
  font-size: 23px;
  line-height: 1.2;
}
.other-info a {
  font-family: "Rubik-Medium";
  font-size: 23px;
  display: inline-block;
  color: white;
  text-decoration: none;
  margin-bottom: 0px;
}
.other-info {
  /* This ensures the entire column remains a vertical stack */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Keeps text aligned to the left */
  line-height: 1.5;
}
.socials {
  margin-top: 15px !important;
  display: flex !important;
  justify-content: start !important;
}

.socials i {
  color: white;
  font-size: 30px;
  display: block; /* Changed from block to allow proper centering */
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}
.socials i:hover {
  transform: translateY(-3px) scale(1.1);
  cursor: pointer;
}
@media (min-width: 1516px) {
  .container-info {
    max-width: 100%;
    padding: 0 0 0 15%;
  }
  .socials {
    margin-top: 15px !important;
    display: flex !important;
    justify-content: start !important;
  }
}
@media (min-width: 1441px) and (max-width: 1515px) {
  .container-info {
    max-width: 100%;
    padding: 0 0 0 15%;
  }
  .container-info h2 {
    font-size: 26px;
    margin-bottom: 0;
  }
  .container-info p,
  .hours {
    font-size: 24px;
    line-height: 1.3;
  }
  .hours {
    padding-top: 5px;
  }
  .other-info a {
    font-size: 26px;
  }
  .socials {
    margin-top: 15px !important;
    display: flex !important;
    justify-content: start !important;
  }
  .socials i {
    font-size: 28px;
    padding-right: 30px;
  }
}
@media (min-width: 601px) and (max-width: 1336px) {
  .container-info {
    max-width: 100%;
    padding: 0 0 0 10%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 30px;
  }
  .socials {
    margin-top: 15px !important;
    display: flex !important;
    justify-content: start !important;
  }
}
@media (max-width: 600px) {
  .info {
    padding: 40px 0;
  }

  .container-info {
    /* 1. Use flex-row to keep addresses side-by-side as seen in your image */
    display: flex;
    flex-direction: row !important; /* Force side-by-side */
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    /* 2. Padding to align with your overall mobile grid */
    padding: 0 20px 0 40px;
    gap: 20px; /* Horizontal space between the two address blocks */
  }

  /* 3. Make the address blocks take up roughly half the width */
  .blockpark-info,
  .blocklab-info {
    flex: 0 1 calc(50% - 20px);
    min-width: 130px; /* Prevents them from getting too squished */
  }

  /* 4. Make the links and socials take up the full width below the addresses */
  .other-info {
    flex: 0 0 100%;
    margin-top: 20px;
  }

  .container-info h2 {
    font-size: 18px !important; /* Adjusted for side-by-side fit */
    margin-bottom: 3px;
  }

  .container-info p,
  .hours,
  .other-info a {
    font-size: 15px !important; /* Smaller font ensures addresses don't wrap weirdly */
    line-height: 1.3;
    margin-bottom: 0px;
  }

  .socials {
    margin-top: 25px;
    gap: 5px;
  }
  .socials {
    margin-top: 15px !important;
    display: flex !important;
    justify-content: start !important;
  }
  .socials i {
    font-size: 23px;
  }
}
/* GEFOERDERT*/
.gefördert {
  background-color: white;
  padding: 40px 0;
}
.inner {
  max-width: 1130px;
  margin: 0 auto;
  padding: 0 20px;
}
.container-gefördert {
  text-align: left;
  /* Remove text-align: center to allow left alignment */
  padding-left: 5%;
  width: 100%;
}
.inner h2 {
  font-family: "Rubik-Medium", sans-serif;
  font-size: 26px; /* Adjust based on your preferred scale */
  margin-bottom: 20px;
  /* Ensure no extra margins are pushing the text */
  margin-left: 0;
}
.img-gefördert {
  width: 90%;
  max-width: 1400px;
  display: block;
  height: auto;
}
/* new footer*/

.branding-footer {
  display: flex;
  justify-content: flex-start; /* Pushes text to the left and logo to the right */
  align-items: center;
  /* Match the same 15% padding so the bottom text also aligns */
  padding-left: 4%;
  gap: 90px;
  margin-top: 60px;
}

.branding-footer p {
  font-family: "Rubik-Medium", sans-serif;
  font-size: 24px; /* Adjust based on your preferred scale */
  color: #000000;
  line-height: 1.2;
  max-width: 700px; /* Prevents the text from stretching too wide */
}
.branding-footer a {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.branding-footer a:hover {
  opacity: 0.8; /* Subtle hover effect for the link */
}

.branding-footer img {
  margin-top: -30px;
  height: auto; /* Set a fixed height to keep the logo crisp */
  width: 220px; /* Maintains the logo's original aspect ratio */
}
@media (min-width: 1516px) {
  .img-gefördert {
    display: block;
    width: 100%;
    /* This should match the width of your footer content area */
    max-width: 1500px;
    margin: 0 auto;
    height: auto;
  }
  .inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
  }
}
@media (min-width: 1441px) and (max-width: 1515px) {
  .img-gefördert {
    display: block;
    width: 100%;
    /* This should match the width of your footer content area */
    max-width: 1045px;
    margin: 0 auto;
    height: auto;
  }
  .inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 20px;
  }
}
@media (min-width: 601px) and (max-width: 1336px) {
  .img-gefördert {
    width: 80%;
  }
  .inner {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .inner h2 {
    font-family: "Rubik-Medium", sans-serif;
    font-size: 20px; /* Adjust based on your preferred scale */
    margin-bottom: 20px;
    /* Ensure no extra margins are pushing the text */
    margin-left: 0;
  }
  .branding-footer {
    display: flex;
    justify-content: flex-start; /* Pushes text to the left and logo to the right */
    align-items: center;
    /* Match the same 15% padding so the bottom text also aligns */
    padding-left: 4%;
    gap: 40px;
    margin-top: 60px;
  }
  .branding-footer p {
    font-family: "Rubik-Medium", sans-serif;
    font-size: 20px; /* Adjust based on your preferred scale */
    color: #000000;
    line-height: 1.2;
    max-width: 700px; /* Prevents the text from stretching too wide */
  }
  .branding-footer img {
    margin-top: -30px;
    height: auto; /* Set a fixed height to keep the logo crisp */
    width: 120px; /* Maintains the logo's original aspect ratio */
  }
}
@media (max-width: 600px) {
  .img-gefördert {
    width: 85%;
  }
  .inner {
    max-width: 500px;
  }
  .inner h2 {
    font-size: 10px; /* Adjust based on your preferred scale */
  }
  .branding-footer {
    display: flex;
    justify-content: flex-start; /* Pushes text to the left and logo to the right */
    align-items: center;
    /* Match the same 15% padding so the bottom text also aligns */
    padding-left: 4%;
    gap: 20px;
    margin-top: 30px;
  }
  .branding-footer p {
    font-family: "Rubik-Medium", sans-serif;
    font-size: 8px; /* Adjust based on your preferred scale */
    color: #000000;
    line-height: 1.1;
    max-width: 300px; /* Prevents the text from stretching too wide */
  }
  .branding-footer img {
    margin-top: -30px;
    height: auto; /* Set a fixed height to keep the logo crisp */
    width: 60px; /* Maintains the logo's original aspect ratio */
  }
}