.hero {
  background-position: center;
  border-bottom: 1px solid #e6e4e0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-repeat: no-repeat;
  background-size: cover;
  height: 413px;
}
.hero {
  background-image: url("../../assets/icons/oda-hero.webp");
}
.hero.has--search-form {
  padding-top: 172px;
  border-bottom: 0px;
  background-size: 100% 80%;
  padding-bottom: 0;
  height: unset;
  background-position: top;
}

/* Mobile: content-page hero (no search form) — fixed height, text vertically
   centered (like desktop), per Figma 414:1514 (390×306 below the 77px header). */
@media (max-width: 600px) {
  .hero:not(.has--search-form) {
    height: 306px;
    background-size: 110%;
  }
  .hero:not(.has--search-form) .h1__size {
    line-height: 40.8px;
  }
  .hero:not(.has--search-form) .paragraph__18,
  .hero:not(.has--search-form) .paragraph__18 p {
    line-height: 22px;
  }
  .hero.has--search-form {
    background-size: 150%;
  }
}
.hero-form {
  padding-top: 170px;
}

/* Breadcrumb (shown above the title when there is no search form) */
.hero .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.hero .breadcrumb__item,
.hero .breadcrumb__sep {
  color: #0f0f10;
  font-size: 12px;
  font-weight: 500;
  line-height: 20.25px;
  letter-spacing: -0.1px;
  text-transform: uppercase;
}

.hero .breadcrumb__item {
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.hero .breadcrumb__item--active {
  opacity: 1;
}

.hero a.breadcrumb__item:hover {
  opacity: 1;
}

.hero .breadcrumb__sep {
  opacity: 0.5;
}

/* ===================================================================== *
 * Home hero: search card + latest-news card (Figma 290:377 / 290:404).
 * Search card 676x251 bg-white border; news card 676x251 bg-#f4f4f3 border.
 * ===================================================================== */
.hero-form {
  display: grid;
  grid-template-columns: 676fr 676fr;
  gap: 24px;
  margin-top: 40px;
  max-width: 1376px;
  align-items: stretch;
}
.hero-search,
.hero-news {
  border: 1px solid #e6e4e0;
  border-radius: 10px;
}
/* ---- Search card ---- */
.hero-search {
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.hero-search__tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-search__tab {
  background: #0f0f10;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.4px;
}
.hero-search__tabnote {
  color: #87878d;
  font-size: 12px;
  line-height: 17px;
}
.hero-search__form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  background: #f4f4f3;
  border: 0;
  border-radius: 999px;
  padding: 10px 10px 10px 20px;
}
.hero-search__icon {
  flex: none;
  display: inline-flex;
}
.hero-search__form .hero-search__input {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  box-shadow: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  letter-spacing: -0.15px;
  color: #0f0f10;
  font-family: "Inter", sans-serif;
}
.hero-search__form .hero-search__input::-webkit-search-decoration,
.hero-search__form .hero-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.hero-search__input::placeholder {
  color: #87878d;
}
.hero-search__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #c00;
  color: #fff;
  border: 0;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  font-family: "Inter", sans-serif;
}
.hero-search__btn:hover {
  background: #a80000;
}
.hero-search__chips {
  margin-top: 41px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-search__chips-label {
  color: #87878d;
  font-size: 12px;
  letter-spacing: -0.08px;
}
.hero-search__chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.hero-search__chip {
  background: #fff;
  border: 1px solid #e6e4e0;
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.08px;
  color: #424248;
  text-decoration: none;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.hero-search__chip:hover {
  border-color: #c00;
  color: #c00;
}
/* ---- News card ---- */
.hero-news {
  position: relative;
  background: #f4f4f3;
  overflow: hidden;
}
/* Slider dots rendered as 26x3 progress bars (Figma 290:408-411). */
.hero-news__bars {
  position: absolute;
  top: 30px;
  right: 44px;
  z-index: 2;
}
.hero-news__bars ul.slick-dots {
  position: static;
  display: flex !important;
  align-items: center;
  gap: 4px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-news__bars ul.slick-dots li {
  width: 26px !important;
  height: 3px !important;
  margin: 0 !important;
  padding: 0;
}
.hero-news__bars ul.slick-dots li button {
  width: 26px !important;
  height: 3px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 15, 16, 0.12) !important;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
}
.hero-news__bars ul.slick-dots li button:before {
  display: none !important;
  content: none !important;
}
.hero-news__bars ul.slick-dots li.slick-active button {
  background: #0f0f10 !important;
}
.hero-news__item {
  display: flex;
  flex-direction: column;
  padding: 24px 28px 27px;
  text-decoration: none;
}
.hero-news__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #87878d;
  font-size: 12px;
  line-height: 16.5px;
  text-transform: uppercase;
}
.hero-news__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #c00;
}
.hero-news__title {
  margin: 17px 0 0;
  color: #0f0f10;
  font-size: 22px;
  font-weight: 600;
  line-height: 26.4px;
  letter-spacing: -0.44px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-news__text {
  margin: 17px 0 0;
  color: #424248;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.08px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-news__more {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: 23px;
  color: #c00;
  font-weight: 600;
  font-size: 16px;
  line-height: 19.5px;
  letter-spacing: -0.08px;
}
.hero-news__arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e6e4e0;
  border-radius: 999px;
  background: #fff;
}
@media (max-width: 900px) {
  /* Stack the cards; minmax(0,1fr) lets the track shrink below the cards'
     min-content (otherwise the non-wrapping tabnote forced a 415px overflow). */
  .hero-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Phone: search + news cards 1/1 with Figma mobile (650:842 / 650:868) ---- */
@media (max-width: 600px) {
  /* Search card */
  .hero-search {
    padding: 16px;
  }
  /* Pill on row 1, tabnote on row 2 */
  .hero-search__tabs {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .hero-search__form {
    margin-top: 14px;
    padding: 7px 7px 7px 19px;
  }
  /* Submit becomes a 34px icon-only circle (no "Suchen" label) */
  .hero-search__btn {
    width: 34px;
    height: 34px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .hero-search__btn span {
    display: none;
  }
  /* Chips: hide the label, keep the 2-up wrap */
  .hero-search__chips {
    margin-top: 14px;
  }
  .hero-search__chips-label {
    display: none;
  }

  /* News card */
  .hero-news__item {
    padding: 24px 15px;
  }
  .hero-news__bars {
    top: 32px;
    right: 15px;
  }
  .hero-news__bars ul.slick-dots {
    gap: 6px;
  }
  .hero-news__bars ul.slick-dots li,
  .hero-news__bars ul.slick-dots li button {
    width: 24px !important;
  }
  .hero-news__title {
    -webkit-line-clamp: 3;
  }
  .hero-news__text {
    -webkit-line-clamp: 4;
  }
}