/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 23 2026 | 12:34:27 */
/* --------------------------------------------------
   Boxen – Basis
-------------------------------------------------- */

.boxmitbutton,
.boxohnebutton,
.boxohnebutton-active,
.karrierelisting {
  background-color: transparent !important;

  border: 0 solid var(--e-global-color-secondary) !important;
  border-radius: 0.5em !important;

  box-shadow: 0 0 1em 0 rgba(29, 47, 73, 0.2) !important;
}


/* --------------------------------------------------
   Box MIT Button
-------------------------------------------------- */

.boxmitbutton {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;

  background-image: linear-gradient(
    148deg,
    var(--e-global-color-secondary) 33%,
    var(--e-global-color-accent) 100%
  ) !important;

  border-radius: 0.5em 0.5em 2.5em 0.5em !important;
}


/* --------------------------------------------------
   Box OHNE Button
-------------------------------------------------- */

.boxohnebutton {
  background-image: linear-gradient(
    148deg,
    var(--e-global-color-secondary) 33%,
    var(--e-global-color-accent) 100%
  ) !important;
}


/* --------------------------------------------------
   Box OHNE Button – Active
-------------------------------------------------- */

.boxohnebutton-active {
  background-image: linear-gradient(
    148deg,
    var(--e-global-color-primary) 33%,
    var(--e-global-color-primary) 100%
  ) !important;

  border-color: var(--e-global-color-primary) !important;
}

.boxohnebutton-active .elementor-heading-title {
  color: var(--e-global-color-text) !important;
}


/* --------------------------------------------------
   Boxen – Darkmode Shadow dunkelblau
-------------------------------------------------- */

html.darkmode .boxmitbutton,
html.darkmode .boxohnebutton,
html.darkmode .boxohnebutton-active,
body.darkmode .boxmitbutton,
body.darkmode .boxohnebutton,
body.darkmode .boxohnebutton-active,
body.darkmode .karrierelisting {
  box-shadow:
    0 0 0.7em 0 rgba(0, 0, 0, 0.3),
    0 0 1em 0 rgba(10, 16, 32, 0.6) !important;
}


/* --------------------------------------------------
   Box MIT Button – Padding
-------------------------------------------------- */

@media (min-width: 768px) {
  .boxmitbutton, .karrierelisting {
    padding: 1vw !important;
  }
}

@media (max-width: 767px) {
  .boxmitbutton, .karrierelisting {
    padding: 15px !important;
  }
}




/* --------------------------------------------------
   Karriere Listing
-------------------------------------------------- */

.karrierelisting {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;

  background-image: linear-gradient(
    148deg,
    var(--e-global-color-secondary) 33%,
    var(--e-global-color-accent) 100%
  ) !important;

  border-radius: 5em !important;
}

/* --------------------------------------------------
   Karriere Listing - Borderradius
-------------------------------------------------- */

@media (min-width: 768px) {
  .karrierelisting {
    border-radius: 1.5em 5em 5em 1.5em !important;
  }
}

@media (max-width: 767px) {
  .karrierelisting {
    border-radius: 0.5em 0.5em 2.5em 0.5em !important;
  }
}




/* --------------------------------------------------
   Portfolio-Boxen – Listen als kompakte Hover-Pills
   Bereich: .portfolioboxen / .boxmitbutton / #kachelhover
-------------------------------------------------- */

.portfolioboxen .boxmitbutton#kachelhover ul,
.portfolioboxen #kachelhover.boxmitbutton ul {
  list-style: none !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 0.18em !important;

  margin: 1.2em 0 0 0 !important;
  padding: 0 !important;
}


/* Listenelement */
.portfolioboxen .boxmitbutton#kachelhover ul li,
.portfolioboxen #kachelhover.boxmitbutton ul li {
  position: relative !important;

  list-style: none !important;

  margin: 0 !important;
  padding: 0.22em 0.55em 0.22em 1.25em !important;

  border-radius: 0.35em !important;

  background: transparent !important;
  box-shadow: inset 0 0 0 0 transparent !important;

  color: var(--e-global-color-primary) !important;
  -webkit-text-fill-color: var(--e-global-color-primary) !important;

  line-height: 1.25 !important;

  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease !important;
}


/* Globale Striche entfernen */
.portfolioboxen .boxmitbutton#kachelhover ul li::marker,
.portfolioboxen #kachelhover.boxmitbutton ul li::marker {
  content: none !important;
  display: none !important;
}


/* Punkt statt Strich */
.portfolioboxen .boxmitbutton#kachelhover ul li::before,
.portfolioboxen #kachelhover.boxmitbutton ul li::before {
  content: "•" !important;

  position: absolute !important;
  left: 0.45em !important;
  top: 0.22em !important;

  display: block !important;

  color: var(--e-global-color-primary) !important;
  -webkit-text-fill-color: var(--e-global-color-primary) !important;

  font-size: 1em !important;
  line-height: 1.25 !important;
}


/* Links innerhalb der Liste */
.portfolioboxen .boxmitbutton#kachelhover ul li a,
.portfolioboxen #kachelhover.boxmitbutton ul li a {
  color: var(--e-global-color-primary) !important;
  -webkit-text-fill-color: var(--e-global-color-primary) !important;

  text-decoration: none !important;
}


/* Hover – hellgrüne Box mit grüner Outline */
.portfolioboxen .boxmitbutton#kachelhover ul li:hover,
.portfolioboxen #kachelhover.boxmitbutton ul li:hover {
  background: color-mix(in srgb, var(--e-global-color-primary) 12%, transparent) !important;

  box-shadow: inset 0 0 0 0.08em color-mix(in srgb, var(--e-global-color-primary) 22%, transparent) !important;

  color: var(--e-global-color-primary) !important;
  -webkit-text-fill-color: var(--e-global-color-primary) !important;
}


/* Hover Text/Punkt bleibt grün */
.portfolioboxen .boxmitbutton#kachelhover ul li:hover::before,
.portfolioboxen #kachelhover.boxmitbutton ul li:hover::before,
.portfolioboxen .boxmitbutton#kachelhover ul li:hover a,
.portfolioboxen #kachelhover.boxmitbutton ul li:hover a {
  color: var(--e-global-color-primary) !important;
  -webkit-text-fill-color: var(--e-global-color-primary) !important;
}


/* Mobile etwas kompakter */
@media (max-width: 767px) {

  .portfolioboxen .boxmitbutton#kachelhover ul,
  .portfolioboxen #kachelhover.boxmitbutton ul {
    gap: 4px !important;
    margin-top: 15px !important;
  }

  .portfolioboxen .boxmitbutton#kachelhover ul li,
  .portfolioboxen #kachelhover.boxmitbutton ul li {
    padding: 5px 9px 5px 20px !important;
    border-radius: 8px !important;
  }

  .portfolioboxen .boxmitbutton#kachelhover ul li::before,
  .portfolioboxen #kachelhover.boxmitbutton ul li::before {
    left: 8px !important;
    top: 5px !important;
  }
}