/*
Theme Name:     PROtechPLAN
Theme URI:      n/a
Template:       kadence
Author:         Lisa Hammer
Author URI:     https://ds-hammer.de/
Description:    Child Theme Description
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/


/*SDG Piktograme*/
.sdg-piktos {
  gap: 10px;
  display: flex;
  flex-wrap: wrap;
}

.sdg-piktos img {
  max-width: 80px;
}


/* Stellenangebote */
.benefit-list li {
  display: flex;
}

.Ansprechpartner-Box {
  position: fixed !important;
  right: 0;
  top: 50%;
}

.repeater-list ul {
  list-style: disc;
  margin: 0 0 1.7em 1.7em !important;
}

.repeater-list ul li::marker {
  color: var(--global-palette2);
}

.team-cards li {
  display: flex;
  flex-direction: column;
}

.team-cards .team-card-content,
.team-cards .team-card-content>.kt-inside-inner-col {
  flex: 1;
}

.timeline>.kt-has-3-columns {
  grid-template-columns: 1fr 1fr 10fr !important;
}

.eyebrow .wp-block-kadence-spacer {
  width: 40px;
  margin: 0;
}

.eyebrow .kadence-breadcrumbs .breadcrumb {
  color: var(--global-palette1);
  text-transform: uppercase;
  font-size: var(--global-kb-font-size-md, 1.25rem);
  font-weight: 600;
  font-family: var(--global-heading-font-family, inherit);
  padding: unset;
}

.eyebrow .kadence-breadcrumbs .breadcrumb .breadcrumb-item {
  color: var(--global-palette3);
}

.eyebrow .kadence-breadcrumbs .breadcrumb .breadcrumb-item:not(.active):hover {
  color: var(--global-palette2);
}

.eyebrow .kadence-breadcrumbs .breadcrumb .breadcrumb-item.active {
  color: var(--global-palette1);
}

.eyebrow .kadence-breadcrumbs .breadcrumb a {
  text-decoration: none;
}

.eyebrow.light .kadence-breadcrumbs .breadcrumb .breadcrumb-item {
  color: var(--global-palette7);
}

.leistungsphasen-list .leistungsphase-item>.kt-inside-inner-col {
  height: 100%;
}


.leistungsphasen-list .leistungsphase-item>.kt-inside-inner-col {
  align-items: stretch;
  flex-wrap: wrap !important;
}

.leistungsphasen-list .leistungsphase-item {
  flex-basis: 30% !important;
}

.leistungsphasen-list .leistungsphase-item h3 {
  font-size: clamp(0.8125rem, -0.3169rem + 1.7647vw, 1.1875rem) !important;
}

@media (max-width: 767px) {

  .leistungsphasen-list .leistungsphase-item {
    flex-basis: 100% !important;
  }
}

/* ============================================================
   HOAI Leistungsphasen – nur Tab-Navigation
   Klasse: .leistungsphasen-tabs
   ============================================================ */



/* ── Grid: 9 gleichbreite Spalten ────────────────────────── */
.leistungsphasen-tabs .kt-tabs-title-list {
  display: grid !important;
  grid-template-columns: repeat(9, 1fr) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

/* ── Verbindungslinie zwischen den Dots ──────────────────── */
.leistungsphasen-tabs .kt-tabs-title-list::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(100% / 18);
  right: calc(100% / 18);
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 0;
}

/* ── Tab-Item: Spalte zentriert ──────────────────────────── */
.leistungsphasen-tabs .kt-title-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  border: none !important;
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.leistungsphasen-tabs .kt-tab-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer;
}

.leistungsphasen-tabs .kb-tab-titles-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ── Zahl (der "Dot") ────────────────────────────────────── */
.leistungsphasen-tabs .kt-title-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.3) !important;
  background: #213354 !important;
  border: 2px solid rgba(255, 255, 255, 0.12) !important;
  transition: background 0.25s, border-color 0.25s, color 0.25s !important;
}

/* ── Phasenname darunter ─────────────────────────────────── */
.leistungsphasen-tabs .kt-title-sub-text {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.3) !important;
  text-align: center !important;
  line-height: 1.3 !important;
  max-width: 80px !important;
  white-space: normal !important;
  padding-bottom: 20px !important;
  transition: color 0.25s !important;
}

/* ── Aktiver Tab ─────────────────────────────────────────── */
.leistungsphasen-tabs .kt-tab-title-active .kt-title-text {
  background: var(--global-palette1) !important;
  /* gegen Kadence active-styles */
  border-color: var(--global-palette2) !important;
  color: var(--global-palette9) !important;
}

.leistungsphasen-tabs .kt-tab-title-active .kt-title-sub-text {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Hover ───────────────────────────────────────────────── */
.leistungsphasen-tabs .kt-title-item:not(.kt-tab-title-active):hover .kt-title-text {
  background: var(--global-palette1) !important;
  border-color: var(--global-palette2) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.leistungsphasen-tabs .kt-title-item:not(.kt-tab-title-active):hover .kt-title-sub-text {
  color: rgba(255, 255, 255, 0.7) !important;
}

.wp-block-kadence-iconlist.leistungs-liste ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single {
  padding-top: 10px;
}

/* ============================================================
   Karriere – Query Loop Filter Styling
   ============================================================ */

/* ── Suchfeld ────────────────────────────────────────────── */
.offene-stellen .kb-filter-search-wrap {
  display: flex;
  position: relative;
}

.offene-stellen .kb-filter-search {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 16px;
  background: var(--global-palette9);
  border: 1px solid var(--global-palette7);
  border-left: 3px solid var(--global-palette1);
  color: var(--global-palette3);
  font-family: inherit;
  font-size: var(--global-kb-font-size-sm, 0.9rem);
  outline: none;
  transition: border-color 0.2s;
}

.offene-stellen .kb-filter-search::placeholder {
  color: var(--global-palette5);
}

.offene-stellen .kb-filter-search:focus {
  border-color: var(--global-palette2);
  border-left-color: var(--global-palette2);
}

.offene-stellen .kb-filter-search-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 44px;
  width: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--global-palette5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.offene-stellen .kb-filter-search-btn:hover {
  color: var(--global-palette1);
}

.offene-stellen .kb-filter-search-btn svg {
  width: 16px;
  height: 16px;
}

/* ── Dropdown Container ──────────────────────────────────── */
.offene-stellen .kadence-filter-wrap {
  margin: 0;
  padding: 0;
  border: none;
}

.offene-stellen .filter-refresh-container {
  position: relative;
  height: 44px;
}

/* ── Trigger ─────────────────────────────────────────────── */
.offene-stellen .kb-custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 44px;
  padding: 0 12px 0 14px;
  background: var(--global-palette9);
  border: 1px solid var(--global-palette7);
  border-left: 3px solid var(--global-palette1);
  color: var(--global-palette5);
  font-family: inherit;
  font-size: var(--global-kb-font-size-sm, 0.9rem);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, color 0.2s;
}

.offene-stellen .kb-custom-select-trigger.has-value {
  color: var(--global-palette3);
  border-left-color: var(--global-palette2);
}

.offene-stellen .filter-refresh-container:hover .kb-custom-select-trigger {
  border-color: var(--global-palette6);
}

.offene-stellen .filter-refresh-container.is-open .kb-custom-select-trigger {
  border-color: var(--global-palette2);
  border-left-color: var(--global-palette2);
}

.offene-stellen .kb-custom-select-trigger:focus {
  outline: 2px solid var(--global-palette2);
  outline-offset: -2px;
}

.offene-stellen .kb-custom-select-arrow {
  width: 14px;
  height: 14px;
  color: var(--global-palette5);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.offene-stellen .filter-refresh-container.is-open .kb-custom-select-arrow {
  transform: rotate(180deg);
}

/* ── Optionsliste ─────────────────────────────────────────── */
.offene-stellen .kb-custom-select-options {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--global-palette9);
  border: 1px solid var(--global-palette7);
  border-top: 2px solid var(--global-palette2);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 9999;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.offene-stellen .filter-refresh-container.is-open .kb-custom-select-options {
  display: block;
}

/* ── Reset-Eintrag ───────────────────────────────────────── */
.offene-stellen .kb-custom-select-option--reset {
  padding: 10px 14px;
  font-size: var(--global-kb-font-size-sm, 0.9rem);
  color: var(--global-palette5);
  cursor: pointer;
  border-left: 3px solid transparent;
  font-style: italic;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.offene-stellen .kb-custom-select-option--reset:hover,
.offene-stellen .kb-custom-select-option--reset:focus {
  background: var(--global-palette8);
  color: var(--global-palette3);
  outline: none;
}

.offene-stellen .kb-custom-select-option--reset.is-selected {
  color: var(--global-palette5);
  background: transparent;
  font-weight: normal;
}

/* ── Trennlinie ──────────────────────────────────────────── */
.offene-stellen .kb-custom-select-divider {
  height: 1px;
  background: var(--global-palette7);
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* ── Normale Option ──────────────────────────────────────── */
.offene-stellen .kb-custom-select-option {
  padding: 10px 14px;
  font-size: var(--global-kb-font-size-sm, 0.9rem);
  color: var(--global-palette3);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.offene-stellen .kb-custom-select-option:hover,
.offene-stellen .kb-custom-select-option:focus {
  background: var(--global-palette8);
  border-left-color: var(--global-palette1);
  outline: none;
}

.offene-stellen .kb-custom-select-option.is-selected {
  background: var(--global-palette7);
  border-left-color: var(--global-palette1);
  color: var(--global-palette1);
  font-weight: 600;
}

/* ── Reset-Button (global) ───────────────────────────────── */
.offene-stellen .kb-query-filter-reset-button {
  height: 44px;
  padding: 0 20px !important;
  background: transparent !important;
  border: 1px solid var(--global-palette7) !important;
  border-left: 3px solid var(--global-palette5) !important;
  color: var(--global-palette5) !important;
  font-family: inherit;
  font-size: var(--global-kb-font-size-sm, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  box-shadow: none !important;
}

.offene-stellen .kb-query-filter-reset-button:hover {
  border-color: var(--global-palette13) !important;
  border-left-color: var(--global-palette13) !important;
  color: var(--global-palette13) !important;
}

.ueber-uns-icon.kb-vector-container {
  justify-content: start;
}

.full-img,
.full-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}