:root {
  /* Primary Colors */
  --pink: #ff007a;
  --blau: #12114a;
  --gelb: #dddc00;
  --theme: #dddc00;
  --schrift: #4b5563;
  --hellgrau: #f9fafb;
  --hellpink: #ffe5f1;
  --white: #ffffff;
  --white-2:#ffffff;
}

/* bebas-neue-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bebas-neue-v15-latin-regular.woff2') format('woff2'); 
}

/* roboto-condensed-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v30-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v30-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-condensed-v30-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/roboto-condensed-v30-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v30-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


body {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}


h1, h2, h3, h4, h5 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--blau);
}

.menu-toggle-lg {
  font-size: 1.8rem; /* Icon größer */
  padding: 0.75rem;  /* Klickfläche größer */
}

.menu-toggle-lg i {
  font-size: 1.8rem; /* Icongröße explizit setzen */
}

.header__nav .main-menu ul li a {
  color: var(--blau);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.header__nav .main-menu ul li a:hover {
  background-color: var(--pink);
  color: var(--white);
}


.gradient-blau-pink {
  background: linear-gradient(
    135deg,                    /* 135° Winkel = oben links nach unten rechts */
    var(--blau) 0%,           /* Start mit Blau */
    var(--blau) 40%,          /* Blau bis 40% */
    var(--pink) 100%          /* Ende mit Pink */
  );
  color: var(--white) !important;  
}

.gradient-blau-pink-soft {
  background: linear-gradient(
    135deg,
    var(--blau) 0%,
    var(--blau) 20%,
    color-mix(in srgb, var(--blau) 50%, var(--pink)) 50%,  /* Mischfarbe in der Mitte */
    var(--pink) 100%
  );
  color: var(--white) !important;  
}

.gradient-blau-pink-soft .content {color: var(--white)}
.gradient-blau-pink-soft h2 {color: var(--white)}
.gradient-blau-pink-soft p {color: var(--white)}

.feature-box .title {
  font-size: 26px;
  line-height: 1.1;
  color: var(--white);
}
.feature-box .text {
  color: var(--white);
  margin-top: 28px;
}

.image-area .video-btn {
  width: 200px;
  height: 200px;
  background-color: var(--pink);
  color: var(--white);
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-pink-bold {color: var(--pink) !important; font-weight: 600; font-size: 26px;}


.hero-area .section-subtitle {
  font-size: 20px;
  text-transform: none;
   font-family: "Roboto Condensed", sans-serif;
  color: var(--text);
  font-weight: 300;
  display: inline-flex;
  gap: 15px;
  align-items: center;
}

.hero-area .section-title span {color: var(--pink);}
.section-title span {color: var(--pink)}

.zahlen {font-size: 90px; font-weight: 600;font-family: "Bebas Neue", sans-serif; }

.tools-area .section-content .tools-list {
  margin-top: 40px;
  margin-inline-start: 110px;
}

.tools-area {
  background-color: var(--white);
}


.about-area {
  background-color: var(--hellgrau);
}

  .features-area {
    padding-top: 20px;
    padding-bottom: 60px;
  }


.about-area .section-subtitle {
  font-size: 16px;
  text-transform: uppercase;
  color: var(--pink);
}

.about-area .section-title {
  color: var(--blau);
  line-height: 55px;
  padding-bottom: 15px;
}
.about-area .section-title span {
  color: var(--pink);
}
.about-area .section-subtitle {font-size: 20px; font-weight: 600;}

.about-area .title-wrapper p {color: var(--text)}

.about-area .text-wrapper .text {
  color: var(--text);
  max-width: 330px;
  margin-inline-start: 62%;
  font-size: 16px;
}

.blog-area .blog-wrapper > :not(:first-child) {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 30px;
}
.blog-area .blog-wrapper > :last-child {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 30px;
  padding-bottom: 40px;
}

.pink {color: var(--pink)}


.arrow-list {
  list-style: none;
  padding: 10px 0 0 0;
  margin: 0;
}
.arrow-list li {
  padding: 12px 0px;
  margin-bottom: 8px;
  font-weight: 400;
  font-size: 18px;
  position: relative;
  padding-left: 30px;

}

.arrow-list li::before {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--gelb);
  color: var(--blau);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.ticketslisteleistungen ul {
  list-style: none;
  padding: 3px 0 17px 0;
  margin: 0;
}
.ticketslisteleistungen ul li {
  padding: 12px 0px;
  margin-bottom: 8px;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  position: relative;
  padding-left: 35px;

}

.ticketslisteleistungen ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--gelb);
  color: var(--blau);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}



.blog {
  display: grid;
  gap: 20px 60px;
  grid-template-columns: auto 0;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-area {
  }

.footer-area .section-header .text {
  font-size: 36px;
  line-height: 1.2;
  max-width: 850px;
  font-weight: 300;
  color: var(--white);
}

.work-area-inner {
    padding-top: 0px;
}

.about-area .section-header {
  padding-bottom: 20px;
  display: grid;
  gap: 20px 60px;
  grid-template-columns: auto 850px;
}

.team-area .team-wrapper {
  display: grid;
  gap: 40px 30px;
  grid-template-columns: repeat(5, 1fr);
}

.team-box h4 {font-size: 24px;padding-top: 8px;}


.main-bottom-area {
  background-color: var(--hellgrau);
}
.main-bottom-area .section-content .tools-list {
  margin-top: 40px;
  margin-inline-start: 0px;
}

.main-bottom-area .tools-area-inner {padding-top: 110px;}

.main-bottom-area .section-content .tools-list ul li {
  font-size: 18px;
  font-weight: 500;
  color: var(--pink);
  text-transform: uppercase;
  display: inline-block;
  border: 1px solid currentColor;
  padding: 12px 24px;
  border-radius: 20px;
}

.arrow-list {
  list-style: none;
  padding: 10px 0 0 0;
  margin: 0;
}
.arrow-list li {
  padding: 12px 0px;
  margin-bottom: 8px;
  font-weight: 400;
  font-size: 18px;
  position: relative;
  padding-left: 40px;
}

.arrow-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--gelb);
  color: var(--blau);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.footer-cta {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 79px;
  padding-bottom: 79px;
  margin-top: 60px;
  display: grid;
  gap: 30px 120px;
  grid-template-columns: 450px 1fr;
}


.footer-widget-wrapper h4 span{color: var(--gelb);}
.white {color: var(--white)}

.footer-cta .title {
  font-size: 34px;
  line-height: 1.3;
  color: var(--white);
}

.footer-widget-wrapper a {color: var(--white)}
.footer-widget-wrapper a:hover {color: var(--gelb)}

.copyright-area-inner {
  display: flex;
  gap: 20px 60px;
  justify-content: space-between;
  align-items: center;
  padding: 51px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}


/****************************** Mentoren ****************************/

.min-h-screen {
  min-height: 100vh;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

/* Text */
.text-center {
  text-align: center;
}

.text-lg {
  font-size: 1.125rem;
}

.font-bold {
  font-weight: 700;
}

.text-gray-600 {
  color: #4b5563;
}

/* Loading Spinner */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
}

.spinner {
  width: 3rem;
  height: 3rem;
  border: 4px solid #12114a;
  border-top: 4px solid #ff007a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Grid layout for mentors */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Card styles */
.mentorcard {
  background-color: white;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mentorcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.mentorcard-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f3f4f6;
  position: relative;
}

.mentorcard-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.mentorcard:hover .mentorcard-image img {
  transform: scale(1.05);
}

.mentorcard-content {
  padding: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.mentorcard-title {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 0.5rem;
}

.mentorcard-company {
  color: var(--schrift);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.mentorcard-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: auto;
}

/* LinkedIn button */
.linkedin-button {
  background-color: #0077b5;
  color: white;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
}

.linkedin-button:hover {
  background-color: #005885;
}

/* Filter dropdown */
.filter-container {
  margin-bottom: 2rem;
}

.filter-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: white;
  border: 2px solid #12114a;
  color: #12114a;
  border-radius: 0.5rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.filter-button:hover {
  background-color: #12114a;
  color: white;
}

.filter-dropdown {
  position: relative;
  display: inline-block;
}

.filter-dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.5rem);
  width: 16rem;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.filter-dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Roboto Condensed', sans-serif;
  transition: background-color 0.2s;
}

.filter-dropdown-menu button:hover {
  background-color: #f3f4f6;
}

.filter-dropdown-menu button.active {
  background-color: #12114a;
  color: white;
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
}

.modalmentor {
  width: 100%;
  max-width: 48rem;
  max-height: 90vh;
  background-color: white;
  border-radius: 0rem;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.modal-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  overflow: hidden;
  background-color: #f3f4f6;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
}

.modal-close {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0.5rem;
}

.modal-close:hover {
  color: #111827;
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: calc(90vh - 8rem);
}

.modal-section {
  margin-bottom: 2rem;
}

.modal-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #12114a;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e5e7eb;
}

.modal-footer-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #0077b5;
  text-decoration: none;
  font-weight: 500;
}

.modal-footer-link:hover {
  color: #005885;
}

.modal-footer-button {
  padding: 0.5rem 1rem;
  background-color: #12114a;
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s;
  font-weight: 500;
}

.modal-footer-button:hover {
  background-color: #0e0d3b;
}

/* Theme colors for tags */
.tag-personal {
  background-color: #ff007a1a;
  color:#ff007a;
}

.tag-leadership {
  background-color: #ff007a1a;
  color:#ff007a;
}

.tag-recht {
  background-color: #ff007a1a;
  color:#ff007a;
}

.tag-newwork {
  background-color: #ff007a1a;
  color:#ff007a;
}

.tag-kultur {
  background-color: #ff007a1a;
  color:#ff007a;
}

.tag-recruiting {
  background-color: #ff007a1a;
  color:#ff007a;
}

.tag-digital {
  background-color: #ff007a1a;
  color:#ff007a;
}

.tag-health {
  background-color: #ff007a1a;
  color:#ff007a;
}

.tag-workplace {
  background-color: #ff007a1a;
  color:#ff007a;
}

.tag-tools {
  background-color: #ff007a1a;
  color:#ff007a;
}

.tag-default {
  background-color: #ff007a1a;
  color:#ff007a;
}

/* Prose styling for rich text */
.prose {
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 1.5;
  color: #333;
}

.prose h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.prose h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.prose h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.prose p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.prose ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.prose li {
  margin-bottom: 0.25rem;
}

.prose strong {
  font-weight: 700;
}

.prose em {
  font-style: italic;
}

.prose a {
  color: #ff007a;
  text-decoration: underline;
}

.prose a:hover {
  color: #d4006a;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
  
  .modal-header-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

.team-area .text-wrapper {padding-bottom: 30px;}

/*************************** Mentoren End *******************************/

.com-content-article {padding: 0 10px;}

.design1 .section-heading, .design1 .content {
  text-align: center;
}

.design2 .einleitung-top-wrapper {
  display: grid;
  grid-template-columns: 1fr 420px;
  align-items: top;
}

.icons .icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 -70px;
  gap: 50px 0;
}

.icons .icon-grid .icon-item {text-align: center;}

.icon-box {
  text-align: center; /* zentriert alles */
}
.big-icon {padding-bottom: 15px;}
.big-icon i {
  background-color: var(--blau); 
  color: var(--white); 
  width: 60px;    
  height: 60px; 
  border-radius: 50%;
  font-size: 28px; 
  line-height: 55px;
}

.clients-area .client-box img {
  opacity: 1;
}

.clients-area .clients-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--border);
  border-inline-start: 1px solid var(--border);
}

@media only screen and (max-width: 1919px) {
  .clients-area {
    padding-top: 70px;
    padding-bottom: 50px;
  }
}


/*************************** Kontakt ************************************/


@media only screen and (max-width: 1919px) {
  .kontakt .hero-area-inner {
    padding-top: 147px;
  }
}

@media only screen and (max-width: 1919px) {
  .kontakt-hero-area .section-content {
    grid-template-columns: 1fr 840px;
  }
}
.kontakt-hero-area .hero-area-inner {
  padding-top: 217px;
  padding-bottom: 30px;
  margin-inline-end: calc((100vw - var(--container-max-widths))/-2 - 12px);
}
.kontakt-hero-area .section-content {
  display: grid;
  gap: 40px 60px;
  grid-template-columns: 1fr 960px;
}
.kontakt-hero-area .content-last {
  display: grid;
  gap: 30px;
  grid-template-columns: 280px 1fr;
  align-items: flex-end;
}
.kontakt-hero-area .content-last .col-first {
  display: grid;
  gap: 30px;
}
.kontakt .overflow-hidden {
  overflow: hidden !important;
}
.kontakt-hero-area .contact-box {
  padding: 85px 30px 40px;
  background-color: var(--pink);
  position: relative;
  z-index: 1;
}
.kontakt-hero-area .content-last .col-second {
  display: grid;
  gap: 30px;
}
.kontakt-hero-area .contact-box .link {
  font-size: 24px;
  line-height: 1;
  margin-top: 12px;
  color: var(--white);
}
.kontakt-hero-area .contact-box .title {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
  display: inline-block;
}

.kontakt-hero-area .contact-box .title a {
  font-weight: 400;
  color: var(--gelb);
  text-decoration: none;
  font-size: 18px;
}
.kontakt-hero-area .contact-box .title a:hover {

  color: var(--white);
}

.kontakt-hero-area .contact-box .shape-1 {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: -1;
  width: 90px;
}
.kontakt-hero-area .contact-box .shape-1 img {
  width: 80px;
}

.kontakt-hero-area .title-wrapper p {
  color: var(--schrift);
  padding: 15px 0 25px 0;
}

.kontakt-feld {
  padding: 0.75rem 1rem;
}

.kontakt-icon {
  background-color: #ff007a; /* Pink */
  color: #fff; /* Weißes Icon */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem; /* Icon-Größe */
  flex-shrink: 0;
}

.kontakt-text {
  padding-left: 22px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
}

.hrc-team-area {background-color: var(--hellgrau); color: var(--schrift)}
.hrc-team-area .section-header {
  text-align: left;
}
.hrc-team-area .team-wrapper-box {
  margin-top: 63px;
}
.hrc-team-area .team-wrapper {
  display: grid;
  gap: 40px 30px;
  grid-template-columns: repeat(4, 1fr);
}
.hrc-team-area .team-wrapper > :nth-child(2n+1) {
  margin-top: 70px;
}
.hrc-team-area .team-box .thumb img {
  width: 100%;
}
.hrc-team-area .team-box .content {
  margin-top: 27px;
}
.hrc-team-area .team-box .title {
  font-size: 28px;
  line-height: 1;
  color: var(--pink);
}
.hrc-team-area .team-box .text {
  font-size: 16px;
  font-weight: 500;
  margin-top: 7px;
  color: var(--blau);

}
.team-mail {  padding-bottom: 10px;}
.team-linkedin i {
  font-size: 1.6rem; /* Standard: ca. 1rem, hier größer */
  line-height: 1;    /* sorgt dafür, dass es vertikal mittig bleibt */
}
.team-linkedin a {
  display: inline-flex;
  align-items: center;
  justify-content: left;
  width: 30px;   /* Klickfläche */
  height: 30px;  /* Klickfläche */
  color: var(--pink)
}
@media only screen and (max-width: 767px) {
  .hrc-team-area .team-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .hrc-team-area .team-wrapper > :nth-child(2n+1) {
  margin-top: 40px;
}
}
/**************************** Kontakt Ende *******************************/


/*************** BLOG ********************/
.blog-area-inner {
  display: grid;
  gap: 30px 60px;
  grid-template-columns: 1fr 850px;
}
@media only screen and (max-width: 1919px) {
  .section-spacing {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

@media only screen and (max-width: 919px) {
  .section-spacing {
    padding-top: 20px;
    padding-bottom: 80px;
  }
}

.blog-area .section-title {
  max-width: 340px;
}
.blog-area .section-content .text-wrapper {
  margin-top: 22px;
}
.blog-area .section-content .text {
  max-width: 300px;
}

.blog-area .blogs-wrapper {
  display: grid;
  gap: 45px 50px;
  grid-template-columns: repeat(2, 1fr);
}

.blog-area .blog-box .content {
  padding-top: 25px;
  padding-bottom: 23px;
  border-bottom: 1px solid var(--schrift);
 
  transition: all .5s;
}
.blog-area .blog-box .number {
  font-size: 18px;
  line-height: 1;
}
.blog-area .blog-box .title {
  font-size: 24px;
  line-height: 1.25;
}
.blog-area .blog-box .icon {
  transform: translate(-10px, 10px);
  opacity: 0;
  transition: all .5s;
}
.blog-area .blog-box .icon i {
  font-size: 20px;
  color: var(--pink);
  transform: rotate(-45deg);
}
.blog-area .pagination-box {
  margin-top: 50px;
}
.blog-area .pagination {
  display: flex;
  gap: 10px;
}
.blog-area .pagination a {
  width: 60px;
  height: 60px;
  border: 1px solid var(--schrift);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 18px;
  color: var(--schrift);
}
.blog-area .number i {color: var(--blau);}
.blog-area .title  {color: var(--pink)}
.blog-area .title:hover {color: var(--blau)}

@media only screen and (max-width: 991px) {
  .blog-area-inner {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 767px) {
.blog-area .blogs-wrapper {
  display: grid;
  gap: 45px 50px;
  grid-template-columns: repeat(1, 1fr);
}
}


@media only screen and (max-width: 1919px) {
  .blog-details-area-inner {
    padding-top: 147px;
  }
}



.blog-details-fullBody {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 400;
    font-style: normal;
    color: var(--schrift)
}

.blog-details-area .section-title-wrapper {
  padding-bottom: 10px;
}

/************** BLOG ENDE *****************/


/************ PARTNER-SEITE*******************/
.partner-about-area .about-area-inner {
  display: grid;
  gap: 50px 60px;
  grid-template-columns: 510px 544px;
  justify-content: space-between;
  align-items: center;
}
.partner-about-area .thumbs {
  width: 100%;
  aspect-ratio: 100/118;
  position: relative;
  max-width: 610px;
}
.partner-about-area .thumbs img {
  border-radius: 0px;
}
.partner-about-area .thumbs .img-1 {
  width: 49%;
  position: absolute;
  top: 9%;
  inset-inline-start: 0;
}
.partner-about-area .thumbs .img-2 {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 41%;
}
.partner-about-area .thumbs .img-3 {
  position: absolute;
  bottom: 0;
  inset-inline-start: 26%;
  width: 50%;
}
.partner-about-area .section-content .btn-wrapper {
  margin-top: 43px;
  display: flex;
  gap: 30px;
  align-items: center;
}


.partner-clients-area .client-area-text {
  position: relative;
}

.partner-clients-area .client-area-text .section-title {
  font-size: 40px;
  line-height: 1;
  max-width: 370px;
  position: absolute;
  inset-inline-start: 40%;
  top: 70px;
}

.partner-clients-area .clients-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.partner-client-area .client-box:nth-child(1) {
  grid-column-start: 2;
  border-inline-start-color: var(--border);
}
.partner-client-area .client-box:nth-child(2) {
  grid-column-start: 1;
  border-inline-start-color: var(--border);
}

.partner-client-area .client-box:nth-child(8), .partner-client-area .client-box:nth-child(14), .partner-client-area .client-box:nth-child(20), .partner-client-area .client-box:nth-child(26) {
  grid-column-start: 1;
  border-inline-start-color: var(--border);
} 
.partner-client-area .client-box:nth-child(32) {
  grid-column-start: 2;
  border-inline-start-color: var(--border);
}
.partner-client-area .client-box:nth-child(35) {
  grid-column-start: 3;
  border-inline-start-color: var(--border);
}
.partner-client-area .client-box:nth-child(38) {
  grid-column-start: 1;
  border-inline-start-color: var(--border);
}


.partner-client-area .client-box {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--border);
  min-width: 100px;
  aspect-ratio: 100/100;
  padding: 0 20px;
  margin-top: -1px;
  border-inline-start-color: rgba(0,0,0,0);
}
.partner-client-area .client-box img {
  opacity:1;
  transition: all .5s;
}

@media only screen and (max-width: 1919px) {
  .partner-about-area .about-area-inner {
    padding-top: 130px;
    padding-bottom: 73px;
  }
}

.partner-about-area .tools-list ul li {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--pink);
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 12px 24px;
  border-radius: 20px;
  transition: color .2s ease, border-color .2s ease;
}

.partner-about-area .tools-list ul li:hover,
.partner-about-area .tools-list ul li:focus-within {
  color: var(--blue, #12114a);          /* Schrift + Border werden blau */
  border-color: var(--blue, #12114a);
}

.partner-cta {padding-top: 30px;}

.galerie_blog {padding-top: 30px;}

/*************** UNTERSEITE ENDE**********/

.unterseiten-area {padding-bottom: 40px; padding-top: 120px;}
.introtext-bold {font-size: 22px; font-weight: 600; line-height: 26px; color: var(--blau); padding-bottom: 30px;}
.unterseiten-area h2 {font-size: 30px; line-height: 34px;padding-bottom: 10px; padding-top: 40px;}
.unterseiten-area h3 {font-size: 22px; line-height: 24px; padding-bottom: 5px; padding-top: 20px;}
/* Box vor dem Geltungsbereich */
.unterseiten-area .info-box {
  background-color: var(--hellgrau);
  border-left: 6px solid var(--pink);
  padding: 20px;
  margin-bottom: 30px;
  padding-top: 30px;
  border-radius: 0px;
}

/* Eigene Überschrift im Kasten */
.unterseiten-area .info-box h2 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--pink);
  font-size: 1.5rem; /* unabhängige Größe */
  font-weight: 700;
  line-height: 1.2;
  padding: 0;
}

/* Absätze im Kasten */
.unterseiten-area .info-box p {
  margin-bottom: 15px;
  line-height: 1.5;
  color: var(--blau);
}



.padding-top-100 {padding-top: 140px;}
.padding-top-50 {padding-top: 130px;}

.blog-details-area .blogdetails__wrapper {
  margin-top: 100px;
  display: grid;
  gap: 30px 140px;
  grid-template-columns: 80px 850px;
}

.blog-details-area .blogdetails-overview {
  display: flex;
  gap: 20px;
  flex-direction: column;
  max-width: 80px;
  border-inline-end: 1px solid var(--border);
}
.blog-details-area .blogdetails-overview li:first-child::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  bottom: -25px;
  width: 80px;
  height: 1px;
  background: var(--border);
}
.blog-details-area .blogdetails-overview li:first-child {
  margin-bottom: 30px;
}
.blog-details-area .blogdetails-overview li {
  text-align: center;
  position: relative;
  line-height: 1.1;
}
.blog-details-area .blogdetails-overview li i {
  display: block;
  padding-bottom: 3px;
  color: var(--primary);
}
.blog-details-area .blogdetails-overview li i {
  color: var(--primary);
}

.blog-details-fullBody .text-wrapper strong {font-weight: 600;}
.blog-details-fullBody h1 {font-size: 44px; line-height: 48px; padding-top: 0px; padding-bottom: 20px}
.blog-details-fullBody .text-wrapper h2 {font-size: 34px; line-height: 38px; padding-top: 20px; padding-bottom: 8px}
.blog-details-fullBody .text-wrapper h3 {font-size: 26px; line-height: 30px;padding-top: 10px; padding-bottom: 5px}

.blog-details-fullBody .text-wrapper a {color: var(--pink)}
.blog-details-fullBody .text-wrapper a:hover {color: var(--blau)}
.blog-details-area .blogdetails-overview li i {
  color: var(--pink);
  font-size: 30px;
}

.icons_blog {padding-top: 20px;}
.icons_blog i {
  color: var(--pink);
  font-size: 30px;
}


/* =========================================
   Responsive Media Queries
   ========================================= */

   /* ---------- Bis 1920px (große Tablets / kleine Laptops) ---------- */
@media (max-width: 1920px) {
  .padding-top-100 {padding-top: 5px;}
  .padding-top-50 {padding-top: 5px;}

  .blog-details-area-inner {
    padding-top: 117px;
  }

}

/* ---------- Bis 1200px (große Tablets / kleine Laptops) ---------- */
@media (max-width: 1200px) {
  .team-area .team-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
  .hrc-team-area .team-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
  .partner-about-area .about-area-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .partner-about-area .thumbs {
    max-width: 100%;
    margin: 0 auto;
  }
    .padding-top-100 {padding-top: 5px;}
.padding-top-50 {padding-top: 5px;}

  .blog-details-area-inner {
    padding-top: 117px;
  }

  .blog-details-area .blogdetails__wrapper {
  margin-top: 80px;
  display: grid;
  gap: 30px 140px;
  grid-template-columns: 30px auto;
}


.blog-details-area .blogdetails-overview li:first-child::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  bottom: -25px;
  width: 30px;
  height: 1px;
  background: var(--border);
}

  .blog-details-area .blogdetails__wrapper {
    margin-top: 80px;
    display: grid;
    gap: 10px 50px;
    grid-template-columns: 30px auto;
  }

.blog-details-area .blogdetails-overview {
  display: flex;
  gap: 10px;
  flex-direction: column;
  max-width: 60px;
  border-inline-end: 0px solid var(--border);
}

}

/* ---------- Bis 992px (Tablets hochkant) ---------- */
@media (max-width: 992px) {
  .tools-area .section-content .tools-list {
    margin-inline-start: 0;
  }
  .about-area .text-wrapper .text {
    margin-inline-start: 0;
    max-width: 100%;
  }
  .about-area .section-header {
    grid-template-columns: 1fr;
  }
  .team-area .team-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .hrc-team-area .team-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-cta {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .blog-area .blogs-wrapper {
    grid-template-columns: 1fr;
  }
  .partner-clients-area .clients-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .kontakt-hero-area .hero-area-inner {
    display: grid !important;
    grid-template-columns: 1fr !important; /* genau 1 Spalte */
    gap: 20px;                              /* optionaler Abstand */
    margin-inline-end: 0;                   /* evtl. Rand zurücknehmen */
  }

  /* falls Kinder feste Breiten haben */
  .kontakt-hero-area .hero-area-inner > * {
    width: 100%;
  }
    .kontakt-hero-area .section-content {
    grid-template-columns: 1fr; /* nur 1 Spalte */
    gap: 20px; /* optional: Abstand anpassen */
  }

  .kontakt-hero-area .hero-area-inner {
  padding-top: 120px;
  padding-bottom: 30px;
}

.kontakt-feld {
  padding: 0.75rem 0.2rem;
}
.kontakt-text {
  padding-left: 2px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

.kontakt-hero-area .content-last {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px;
    align-items: flex-start;
  }
  .kontakt-main-img {
    display: none !important;
  }
  .copyright-area br, .partner-cta br, .kontakt-feld br, .contact-box br, .unterseiten-area br, .title-wrapper br {
    display: inline;
  }

  .padding-top-100 {padding-top: 5px;}
.padding-top-50 {padding-top: 5px;}

  .blog-details-area-inner {
    padding-top: 117px;
  }


}

/* ---------- Bis 768px (Smartphones quer / kleine Tablets) ---------- */
@media (max-width: 768px) {
  .zahlen {
    font-size: 60px;
  }
  .hero-area .section-subtitle {
    font-size: 18px;
  }
  .feature-box .title {
    font-size: 22px;
  }
  .design2 .einleitung-top-wrapper {
    grid-template-columns: 1fr;
  }
  .icons .icon-grid {
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    gap: 30px 0;
  }
  .clients-area .clients-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
  .hrc-team-area .team-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .hero-area .section-title {
    font-size: 50px;
  }
    .hero-area .section-content .text-wrapper {
    margin-top: 2px;
  }
  .image-area .video-btn {
  width: 70px;
  height: 70px;
  background-color: var(--pink);
  color: var(--white);
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
  .feature-box .content {
    margin-top: 10px;
    text-align: center;
  }

  .feature-box .text {
  color: var(--white);
  margin-top: 18px;
  font-size: 30px;
}
.about-area .section-title {
  color: var(--blau);
  line-height: 40px;
  padding-bottom: 15px;
}
  .tools-area-inner {
    padding-top: 70px;
  }

.section-spacing-bottom {
    padding-bottom: 0px;
  }

.blog-area {
    padding-top: 40px;
  }
.blog-area .blog-wrapper > :not(:first-child) {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 25px;
}
.blog-area .blog-wrapper > :last-child {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 25px;
  padding-bottom: 40px;
}
.main-bottom-area .tools-area-inner {
  padding-top: 60px;
}
.kontakt-hero-area .content-last {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px;
    align-items: flex-start;
  }
  .kontakt-main-img {
    display: none !important;
  }

  .blog-details-area .blogdetails__wrapper {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr; /* nur eine Spalte */
    gap: 0; /* optional */
}

  .blog-details-fullBody .text-wrapper strong {font-weight: 600;}
.blog-details-fullBody h1 {font-size: 34px; line-height: 38px; padding-top: 0px; padding-bottom: 20px}
.blog-details-fullBody .text-wrapper h2 {font-size: 28px; line-height: 32px; padding-top: 20px; padding-bottom: 8px}
.blog-details-fullBody .text-wrapper h3 {font-size: 24px; line-height: 28px;padding-top: 10px; padding-bottom: 5px}

.blog-details-fullBody .text-wrapper a {color: var(--pink)}
.blog-details-fullBody .text-wrapper a:hover {color: var(--blau)}
.blog-details-area .blogdetails-overview li i {
  color: var(--pink);
  font-size: 30px;
}

.icons_blog {padding-top: 20px;}
.icons_blog i {
  color: var(--pink);
  font-size: 30px;
}



}

/* ---------- Bis 576px (Smartphones hochkant) ---------- */
@media (max-width: 576px) {
  .zahlen {
    font-size: 48px;
  }
  h1, h2, h3 {
    font-size: 90%;
  }
  .hero-area .section-subtitle {
    font-size: 16px;
  }
  .feature-box .title {
    font-size: 20px;
  }
  .icons .icon-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .clients-area .clients-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
 .team-area .team-wrapper,
.hrc-team-area .team-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px; /* Abstand zwischen den Spalten */
}
.team-area .section-spacing {
  padding-top: 40px;
    padding-bottom: 40px;
}
.team-box h4 {
  font-size: 20px;
  line-height: 24px;
  padding-top: 8px;
}
.team-wrapper-box .content p {
  font-size: 14px;
}
  .mentorcard-title {
    font-size: 18px;
  }
  .mentorcard-company {
    font-size: 0.8rem;
  }
   .hero-area-inner {
    padding-top: 127px;
    padding-bottom: 44px;
  }

  .clients-area {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .main-bottom-area .section-content .tools-list {
  margin-top: 20px;
  margin-inline-start: 0px;
  padding-bottom: 30px;
}
.footer-area .section-title {
    font-size: 50px;
  }
  .footer-area .section-header .text {
  font-size: 24px;
  line-height: 1.2;
  max-width: 560px;
  font-weight: 400;
  color: var(--white);
}

.footer-cta .title {
  font-size: 34px;
  line-height: 37px;
  color: var(--white);
  text-align: left;
}
.footer-cta p {
  color: var(--white);
  text-align: left;
}
.footer-cta {
  padding-top: 49px;
  padding-bottom: 49px;
}
.copyright-area br, .partner-cta br, .kontakt-feld br, .contact-box br, .unterseiten-area br {
    display: inline;
  }
.copyright-area-inner {
  align-items: flex-start !important;
}

.hr-campus-container {
    padding: 100px 1rem 40px 1rem;
  }

  .hr-campus-container  .section-spacing {
    padding-top: 20px;
    padding-bottom: 40px;
  }
  .icon-item h2 {font-size: 26px;line-height: 30px;}
  .icons {padding-bottom: 40px;}
  .hrc-programm-container {padding-top: 100px; padding-bottom: 0;}
  .hrc-programm-container .section-spacing {
    padding-top: 0px;
    padding-bottom: 40px;
  }
  .partner-about-area .text-wrapper {padding-bottom: 10px; padding-top: 20px;}
  .partner-about-area .text-wrapper h2 {padding-bottom: 10px; padding-top: 20px; font-size: 30px; line-height: 34px;}
  
  .partner-clients-area .client-area-text {
  position: static;
}

.partner-clients-area .client-area-text .section-title {
  font-size: 40px;
  line-height: 1;
  max-width: 370px;
  position: static;
  inset-inline-start: 40%;
  padding-bottom: 30px;
}

.partner-clients-area .clients-wrapper-box {padding-bottom: 40px;}

.hrc-blog-area {padding-bottom: 40px; padding-top: 80px;}

.blog-details-area {padding-bottom: 50px;}

.blog-details-area-inner .overflow-hidden {
  overflow: visible !important;
}
.blog-details-fullBody {padding: 20px 0;}

.blog-details-area .blogdetails-overview {
    display: block;

    border-inline-end: 0px solid var(--border);
  } 

.blogdetails-contentleft {
  display: none;
}

}

.kontakt-feld a {color: var(--pink); font-weight: 600;}
.kontakt-feld a:hover {color: var(--schrift)}