/*
General Custom CSS:
Feel free to modify the styles below to customize the appearance.
To override any value, simply define your custom styles after this comment block.
*/
:root {
  color-scheme: light;
}
body.darkmode--activated {
  color-scheme: dark;
}
.region.region--content > * {
	margin-block-end: 0;
}
.text-content {
	font-family: "Outfit", sans-serif;
}
/* the slides */
.slick-slide {
	margin: 0 16px;
}
/* Mobile menu issue */
@media screen and (max-width: 500px) {
	.tbm-collapse {
		height: 100vh;
		overflow-y: scroll !important;
		overflow-x: hidden !important;
		padding-bottom: 120px;
	}
	.tbm-collapse .tbm-group-title {
		font-weight: normal !important;
		text-transform: unset !important;
	}
	/* Tackling the font issue */
	.tbm-nav .tbm-item a {
		-webkit-font-smoothing: antialiased;
		font-size: 14px !important;
	}
}
/* remaining cards classes */
.col-5 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 576px) {
  .col-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
.col-6 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 576px) {
  .col-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}
.col-7 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 576px) {
  .col-7 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .col-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}
.col-8 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 576px) {
  .col-8 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .col-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* the parent */
.slick-list {
	margin: 0 -16px;
	overflow: visible;
}
/* Making the hero text vertically center */
.header_banner__discription {
	align-self: center;
	padding: 48px 16px !important;
}
/* taxonomy-terms-view */
.all-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}
@media screen and (max-width: 1200px) {
	.taxonomy-terms-view .all-content {
		display: grid;
		gap: 30px;
		grid-template-columns: 1fr;
	}
}
/* Adding IDs to button */
.header_banner__discription a.link_types {
	font-family: var(--font-regular);
	font-weight: 400;
	font-size: var(--fs-btn);
	line-height: var(--lh-body);
	text-decoration: unset;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	height: unset;
	box-sizing: content-box;
	cursor: pointer;
	color: #fff;
	background-color: #627d77;
	border: 1px solid #627d77;
	border-radius: 3px;
	padding: 8px 15px;
}
.header_banner__discription a.link_types:hover,
.header_banner__discription a.link_types:active {
	font-weight: 400;
	background-color: #4e645f;
	text-shadow: none;
	outline: 0;
	border: 1px solid #627d77;
}

.header_banner__discription a.link_types:last-child {
	color: #627d77;
	background-color: transparent;
	border: 1px solid #627d77;
}
.header_banner__discription a.link_types:last-child:hover,
.header_banner__discription a.link_types:last-child:active {
	color: #fff;
	background-color: #4e645f;
	border-width: 1px;
	border-color: #627d77;
}

section.block-region-sidebar-second .block-inner {
	background-color: var(--color-bg-primary);
	border-radius: 6px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
	padding: 16px;
}

@media (min-width: 43.75rem) {
	section.block-region-sidebar-second .block-inner {
		background-color: var(--color-bg-primary);
		border-radius: 6px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
		padding: 16px;
		position: relative;
		right: 20%;
	}
}

/* accordion styling */
.accordion .accordion-header {
	background: var(--color-bg-primary);
}

/* captcha styling */
.captcha {
	width: 100% !important;
	border: 0;
	padding: 0;
}
.captcha .captcha__title {
	display: none;
}

/*testing*/
body {
	background-color: transparent;
	overflow-x: hidden;
}
body *{
  transition: background-color 0s ease-in-out !important;
}

.layout_form.cr_form {
	padding: 24px;
}
.form-wrapper .paragraphs-dropdown-action.button {
	color: #000;
	font-weight: 600;
}


.card__image.left {
  margin-left: 0;
}
.card__image.right {
  margin-right: 0;
}
.card__title.center {
  text-align: center;
}
.card__title.right {
  text-align: right;
}

.card__body--link.center {
  justify-content: center;
}
.card__body--link.right {
  justify-content: flex-end;
}
.card-slider .custom-navigation {
	position: absolute;
	right: 0;
	top: 45px;
}
.text-img-cards-wrapper:has(.card-slider) {
   position: relative;
}

.card-slider .custom-prev-btn:disabled,
.card-slider .custom-next-btn:disabled {
	background-color: #afafaf; /* Disabled state */
	cursor: not-allowed;
}
.card-slider{
        Overflow-x: hidden;
}
.card-slider .slick-arrow {
  position: absolute;
  top: -50px;
}
.card-slider .slick-arrow.slick-prev {
  right: 32px;
}
.card-slider .slick-arrow.slick-next {
  right: 0;
}
.card-slider .slick-track{
	display: flex;
}
.card-slider .slick-slide{
	height: inherit;
}
.card-slider .draggable:hover,.logo_brands .draggable:hover {
	background-color: unset;
}
/* the slides */
.slick-slide {
  margin: 0 12px;
}

/* the parent */
.slick-list {
  margin: 0 -12px;
}

.card-property-form > .olivero-details__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card-property-form > .olivero-details__wrapper > * {
  flex: 1;
}
.card-property-form > .olivero-details__wrapper .olivero-details__description {
  flex: 100%;
}

pre.line-numbers code,
pre.line-numberse pre code {
    display: block;
    overflow: visible;
}
pre.line-numbers.language-javascript {
    margin-inline-start: unset !important;
}
pre[class*=language-].line-numbers>code {
    padding-block: unset;
}
.darkmode--activated .card a,.darkmode--activated .text-content a:not(.button,.btn) {
    color: #d0e18e !important;
}

.d-block {
	display: block !important;
}

/* Back-to-top: nach links verschieben damit Darkmode-Toggle nicht überlagert wird */
#backtotop {
  right: 100px !important;
}