@charset "UTF-8";
/* #region Colors */
:root {
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--black: #000000;
  --wp--preset--color--blue: #0060AC;
  --wp--preset--color--grey: #606060;
  --wp--preset--color--light-grey: #f0f0f7;
  --wp--preset--color--medium-grey: #88888B;
}

/* #region Filters */
div.colleagues-sort .sort-link.active::before {
  filter: saturate(0%) brightness(0) contrast(400%) invert(22%) sepia(98%) saturate(1749%) hue-rotate(189deg) brightness(95%) contrast(103%);
}

/* #endregion Filters */
/* #endregion Colors */
/* #region Spacing */
/* #endregion Spacing */
/* #region Container and Sizes */
.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  width: 90%;
}

.small-white-container, .small-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
  width: 90%;
}

.small-white-container {
  background-color: #ffffff;
  padding: 2rem;
}
.small-white-container h1 {
  color: #0060AC;
}

/* #endregion Container and Sizes */
/* #region Fonts */
/* #endregion Fonts */
/* #region Font Sizes */
/* #endregion Font Sizes */
/* #region CI / CD Hönninger */
/* #endregion CI / CD Hönninger */
/* #region Icons */
div.colleagues-sort .sort-link[data-sort-order=asc]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M183.6 469.6C177.5 476.2 169 480 160 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L128 365.7 128 64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 301.7 32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 320c0-17.7 14.3-32 32-32l128 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9L429.3 416l50.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-128 0c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L402.7 352 352 352c-17.7 0-32-14.3-32-32zM416 32c12.1 0 23.2 6.8 28.6 17.7l64 128 16 32c7.9 15.8 1.5 35-14.3 42.9s-35 1.5-42.9-14.3L460.2 224l-88.4 0-7.2 14.3c-7.9 15.8-27.1 22.2-42.9 14.3s-22.2-27.1-14.3-42.9l16-32 64-128C392.8 38.8 403.9 32 416 32zM395.8 176l40.4 0L416 135.6 395.8 176z'/%3E%3C/svg%3E");
}

div.colleagues-sort .sort-link[data-sort-order=desc]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M183.6 469.6C177.5 476.2 169 480 160 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L128 365.7 128 64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 301.7 32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 64c0-17.7 14.3-32 32-32l128 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9L429.3 160l50.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-128 0c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L402.7 96 352 96c-17.7 0-32-14.3-32-32zm96 192c12.1 0 23.2 6.8 28.6 17.7l64 128 16 32c7.9 15.8 1.5 35-14.3 42.9s-35 1.5-42.9-14.3L460.2 448l-88.4 0-7.2 14.3c-7.9 15.8-27.1 22.2-42.9 14.3s-22.2-27.1-14.3-42.9l16-32 64-128c5.4-10.8 16.5-17.7 28.6-17.7zM395.8 400l40.4 0L416 359.6 395.8 400z'/%3E%3C/svg%3E");
}

/* #endregion Icons */
/**
* Filter im Modul Kollegen zur Filterung von Abteilung, Position etc.
*/
#colleagues-filter {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
#colleagues-filter .select-wrapper {
  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
  width: calc((100% - 40px) / 3);
  height: fit-content;
}
#colleagues-filter .select-wrapper select {
  width: 100%;
}
#colleagues-filter .select-wrapper select option:disabled {
  color: #bdbdbd;
  font-style: italic;
}
@media screen and (max-width: 768px) {
  #colleagues-filter {
    flex-direction: column;
  }
  #colleagues-filter .select-wrapper {
    width: 100%;
  }
}

#reset-filters {
  margin: 0.25rem auto 0.75rem;
  padding: 0.2rem 1rem;
}

/* #region Sorting Buttons */
div.colleagues-sort {
  display: flex;
  flex-flow: row wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 0.75rem;
}
div.colleagues-sort .sort-link {
  background-color: transparent;
  border: none;
  color: #000000;
  cursor: pointer;
  font-variant: small-caps;
  font-weight: 600;
  line-height: 1em;
  padding: 0 0 0 2rem;
  position: relative;
}
div.colleagues-sort .sort-link::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 1.375rem;
  left: 0;
  position: absolute;
  top: -0.25rem;
  width: 1.375rem;
}
div.colleagues-sort .sort-link.active {
  color: #0060AC;
}
/* #endregion Sorting Buttons */
/**
 * Grid für die Anzeige der Kollegen
 */
.user-profiles-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 3rem;
}

/**
 * User Profile Card (Compact View)
 */
.user-profile-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: visible;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 95px;
}
.user-profile-card.card-hidden {
  display: none;
}
.user-profile-card .user-profile-content {
  padding: 20px;
}
.user-profile-card .user-profile-summary {
  text-align: center;
}
.user-profile-card .user-profile-avatar {
  margin-top: -95px;
}
.user-profile-card .user-profile-avatar img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.user-profile-card .user-profile-name {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 10px 0;
  color: #0060AC;
}
.user-profile-card .user-profile-position,
.user-profile-card .user-profile-department {
  margin-bottom: 5px;
}
.user-profile-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/**
 * User Profile Card (Expanded View)
 */
.user-profile-card-expanded {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  left: 50%;
  max-height: 90vh;
  max-width: 800px;
  overflow-y: auto;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  z-index: 1000;
}
.user-profile-card-expanded:not(.card-visible) {
  display: none;
}
.user-profile-card-expanded .user-profile-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.user-profile-card-expanded .user-profile-cover {
  height: 200px;
  background-size: cover;
  background-position: center;
}
.user-profile-card-expanded .user-profile-content {
  padding: 20px;
}
.user-profile-card-expanded .user-profile-summary {
  display: flex;
}
.user-profile-card-expanded .user-profile-avatar {
  margin-top: -95px;
}
.user-profile-card-expanded .user-profile-avatar img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.user-profile-card-expanded .user-profile-info {
  margin-left: 20px;
  flex: 1;
}
.user-profile-card-expanded .user-profile-title {
  font-size: 1.2rem;
  color: #0060AC;
}
.user-profile-card-expanded .user-profile-name {
  font-size: 2rem;
  font-weight: 600;
  margin: 5px 0;
  color: #0060AC;
}
.user-profile-card-expanded .user-profile-position {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 10px;
  color: #0060AC;
}
.user-profile-card-expanded .user-profile-department {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: #0060AC;
}
.user-profile-card-expanded .user-profile-contact {
  margin-top: 15px;
}
.user-profile-card-expanded .user-profile-details {
  margin-top: 30px;
}
.user-profile-card-expanded .user-profile-description,
.user-profile-card-expanded .user-profile-responsibilities {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.user-profile-card-expanded .user-profile-responsibilities {
  display: flex;
  gap: 20px;
}
.user-profile-card-expanded .user-profile-responsibilities .user-profile-responsible-for,
.user-profile-card-expanded .user-profile-responsibilities .user-profile-competent-for {
  flex: 1;
}

body.body-user-profile-card-visible {
  overflow: hidden;
}

/* #region Responsive Design */
/* #region width <= 560px */
@media only screen and (width <= 560px) {
  .user-profile-card-expanded .user-profile-summary {
    flex-flow: column nowrap;
  }
}
/* #endregion width <= 560px */
/* #endregion Responsive Design *//*# sourceMappingURL=user-profile-card.css.map */