/*
Theme Name: Becker Brakel (2023)
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: Kaeding Anderson + the WordPress team
Author URI: https://wordpress.org/
Description: Theme für Becker Brakel (2023). 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bb

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@charset "UTF-8";

/* VARIABLES */

:root {
	--green: #00B2A0;
	--greenlight: #96d0ca;
	--greenhover: #008e80;
	--black: #111111;
	--darkgrey: #333333;
	--darkgreyhover: #525252;
	--midgrey: #898988;
	--lightgrey: #EDEFED;
	--nature: #E3E2DC;
	--white: #ffffff;
}

.has-global-padding .has-global-padding.alignwide {
	padding-left: 0;
	padding-right: 0;
} 

/* ############################################ */

/* Mobile First */
body {
	font-weight: 400;
	/*font-family: 'Univers Next Condensed', sans-serif;*/
	font-family: 'Barlow Condensed',sans-serif;
	--bs-nav-link-font-size: 1.1rem;
	--bs-body-font-size: 1.1rem
}

/* Barlow Fixes START */
.ka-cookies-content {
	font-size: 1rem;
}
/* Barlow Fixes ENDE */

#header {	
	z-index: 2000;
}

#header_search,
#header_language {
	transition: all ease .2s;
	max-height: 35px;
	opacity: 1;
}	

#header_functions {
	margin-bottom: 1rem;
	transition: all ease .2s;
}

#header.is-sticky {	
}
#header.is-sticky #header_search,
#header.is-sticky #header_language {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
}
#header.is-sticky #header_functions {
	margin-bottom: 0;
}

#header .header-top {
	transition: all ease .2s;
	padding: .75rem 0;
	box-shadow: 0 1rem 3rem rgba(0,0,0,.1);
}

#header .header-bottom {
	transition: all ease .2s;
	padding: .3rem 0;
}

#header .logo,
#footer .logo {
	width: 110px;
	height: auto;
	display: inline;
}

#header .logo-link {
	display: block;
}

.sticky.is-sticky {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1000;
	width: 100%;
}

.navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
}

/* Animated Burger 2022: https://jsfiddle.net/Beaniie/s8rm1f0q/5/ */
.navbar-toggler,
.navbar-toggler:focus {
border: none;
background: transparent !important;
padding-left: 0;
padding-right: 0;	
}  

.navbar-toggler .icon-bar {
transform: rotate(0deg) translate(0px, 0px);
transition: ease all .2s;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background: var(--black)
}

.navbar-toggler .icon-bar+.icon-bar {
margin-top: 4px;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
transform: rotate(45deg) translate(4px, 0px);
transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
transform: rotate(-45deg) translate(4px, -1px);
transition: ease all .2s;
}

#header_search .search-query {
	font-size: .9rem;
}

#header_search .search-query:focus {
	outline: none;
	box-shadow: none;
}

#main_nav {
}

#main_nav a {
	color: var(--darkgrey);
	transition: all ease .2s;
}
#main_nav a:hover {
	color: var(--midgrey);
}
#main_nav .active > a,
body.single-tool #main_nav #menu-item-34 > a,
#main_nav .current-page-ancestor > a {
	color: var(--midgrey);
}
#main_nav a:focus-visible {
	outline: none;
}
/*#main_nav .jobs_count {
	position: relative;
	margin-right: .5rem;
}*/
#main_nav .jobs_count a {
	display: inline-flex;
	align-items: center;
}
#main_nav .jobs_count a .badge {
	margin-left: .25rem;
}

#main {
	min-height: 60vh;
	position: relative;
}

#footer {
	color: var(--lightgrey)
}

#footer a {
	color: var(--lightgrey)
}

#footer .footer-top {
	background-color: var(--lightgrey);
}

#footer_social_nav a {
	font-size: 1.5rem;
	color: var(--darkgrey);
	--bs-nav-link-padding-x: .5rem
}
#footer_social_nav li:first-child a {
	padding-left: 0;
}
#footer_social_nav li:last-child a {
	padding-right: 0;
}
#footer_social_nav a:hover {
	color: var(--midgrey)
}

#footer_sitemap_nav a,
#footer_legal_nav a {
	color: var(--lightgrey)
}
#footer_sitemap_nav > ul > li > a {
	margin-bottom: 1rem;
	padding: 0;
}
#footer_sitemap_nav > ul > li > ul > li > a {
	margin-bottom: .25rem;
	padding: 0;
	font-weight: 300;
}
#footer_legal_nav li:first-child a {
	padding-left: 0;
}


/* Typo */
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}

h2.multiline::first-line,
h3.multiline::first-line,
h4.multiline::first-line {
	color: var(--midgrey);
}

.entry-content p,
.entry-content li:not(.wp-social-link) {
	font-size: clamp(1rem, calc(1rem + .25vw), 1.2rem)
}

.has-hero-font-size {
	line-height: 1.1;
	hyphens: auto;
	-webkit-hyphens: auto;
}
.has-h-1-font-size,
.has-h-2-font-size,
.has-h-3-font-size {
	line-height: 1.2;
}

.has-intro-font-size {
	color: var(--midgrey)
}

/* Links */
a {
	text-underline-offset: 3px;
}


/* Blocks */
.entry-content > h1:nth-of-type(1) {
	margin-top: 4rem;
}
.page-template-material .entry-content > .wp-block-group:nth-of-type(1),
.has-anchors .entry-content > .wp-block-group:nth-of-type(1) {
	padding-top: 0;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	padding-left: 0;
}
.wp-block-column.has-background {
	padding: 1.5rem
}
.wp-block-columns .wp-block-column.has-white-background-color {
	padding-left: 0;
}
.wp-block-media-text .wp-block-media-text__content {
	align-self: start;
}

.wp-block-button__link {
	border-color: var(--darkgrey);
}
.wp-block-button__link:hover {
	color: var(--white)!important;
	border-color: var(--darkgreyhover)!important;
	background-color: var(--darkgreyhover)!important;
}
.wp-block-button__link.has-green-color {
	border-color: var(--green);
}
.wp-block-button__link.has-green-color:hover {
	color: var(--greenhover)!important;
	border-color: var(--greenhover)!important;
	background-color: var(--white)!important;
}
.wp-block-button__link.has-green-background-color {
	border-color: var(--green);
}
.wp-block-button__link.has-green-background-color:hover {
	color: var(--white)!important;
	border-color: var(--greenhover)!important;
	background-color: var(--greenhover)!important;
}

.entry-content > .wp-block-group:not(.alignwide):not(.alignfull):not(.has-background) {
	padding-left: 0;
	padding-right: 0
}

.wp-block-cover, .wp-block-cover-image {
	aspect-ratio: 1/1;
	min-height: auto;
}

.wp-block-cover.cover-video {
	aspect-ratio: 4/3;
	min-height: auto;	
}
.wp-block-cover.cover-video .wp-block-cover__background {
	display: none;
}

.wp-block-group.alignfull + .wp-block-group,
.wp-block-group.alignwide + .wp-block-group,
.wp-block-columns.alignwide + .wp-block-group {
	margin-top: 0;
}

.wp-block-embed {
	border: 1px solid var(--lightgrey);
	box-shadow: 0 1rem 1rem rgba(0,0,0,.05);
}
.wp-block-embed p {
	margin: 0;
}

.wp-block-pullquote {
	border-color: var(--lightgrey);
	border-width: 2px;
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.wp-block-pullquote blockquote {
	margin: 0;
	position: relative;
}
.wp-block-pullquote p {
	font-size: clamp(1rem, calc(1.2rem + .45vw), 1.8rem);
	margin: 0
}
.wp-block-pullquote cite {
	text-transform: none;
	font-size: .9rem;
	color: var(--midgrey)
}

.wp-block-group.alignfull:not(.has-background) + .wp-block-group.alignfull:not(.has-background) {
	padding-top: 0;
}

:where(body .is-layout-constrained)>:last-child:last-child:not(.alignfull):not(.alignwide) {
	margin-bottom: 4rem!important;
}

#content .entry-content > .wp-block-group.alignfull > *:last-child {
	margin-bottom: 0!important;
}


/* Images */
.caption_line {
	position: relative;
}
.caption_line:before {
	content: "";
	width: 2rem;
	height: 2px;
	left: -2.75rem;
	top: 50%;
	background-color: var(--lightgrey);
	position: absolute;
}


/* Add. Navs */

.anchor_nav ul {
	overflow-x: scroll;
	flex-wrap: nowrap;
	white-space: nowrap;
	padding-bottom: .75rem;
	padding-bottom: 0;
}

.anchor_nav li:first-child a {
	padding-left: 0;
}
.anchor_nav a {
	--bs-nav-link-padding-x: .5rem;
	text-decoration: underline;
}
.anchor_nav li:last-child a {
	padding-right: 0;
}
.anchor_nav a:hover {
	color: var(--midgrey);
}
.anchor_nav a.active {
	color: var(--midgrey);
	text-decoration: none;
}


/* Lists */
article ul:not([class]) {
	list-style: none;
	padding-left: 1em;
}
article ul:not([class]) li {
	margin-bottom: .5rem;
}
article ul:not([class]) li::before {
	content: "–";  
	color: var(--green);
	display: inline-block;
	width: 1em; 
	margin-left: -1em;
}


/* Single Post */
.single-post .entry-content p:first-of-type {
	margin-top: 0;
}


/* Utilities */
.bg-transparent {
	background: transparent;
}

.cursor-pointer {
	cursor: pointer;
}

.hyphens {
	hyphens: auto
}

.small, small {
	font-size: .85rem;
}

.text-decoration-none > a {
	text-decoration: none;
}

#btn-to-top {
	width: 49px;
	height: 49px;
	font-size: 25px;
	line-height: 49px;
	padding: 0;
	position: fixed;
	z-index: 2000;
	bottom: 18px;
	right: 22px;
	display: none;
}

.aspect-ratio img {
	width: 100%!important;
	height: 100%!important;
	object-fit: cover;
}
.aspect-ratio-1-1 {
	aspect-ratio: 1 / 1;
}
.aspect-ratio-2-1 {
	aspect-ratio: 2 / 1;
}
.aspect-ratio-3-1 {
	aspect-ratio: 3 / 1;
}

.img-multiply {
	mix-blend-mode: multiply;
}

hr {
	border-top: 2px solid var(--lightgrey);
	margin-top: 2rem;
	margin-bottom: 2rem;
	opacity: 1;
}


/* Transitions */
a,
.wp-block-button__link {
	transition: all ease .3s;
}

/* Pagination  */
.pagination {
	white-space: nowrap;
}
.pagination .nav-links {
	display: flex;
}
.pagination .page-numbers {
	width: 30px;
	height: 30px;
	padding: .125rem .5rem;
	display: flex;
	margin-right: .25rem;
	color: var(--darkgrey);
	background-color: var(--white);
	text-decoration: none;
	font-size: 1rem;
	justify-content: center;
	align-content: center;
	transition: all ease .3s;
}
.pagination .current,
.pagination .page-numbers:hover {
	background-color: var(--lightgrey);
}
.pagination .next,
.pagination .prev {
	width: auto;
}

/* Search */
.searchwp-live-search-results {
	border-radius: 0!important;
}
.searchwp-live-search-results:has(.searchwp-live-search-result.general) {
	width: 177px!important;
}
.searchwp-live-search-results:has(.searchwp-live-search-result.tools) {
	width: 300px!important;
}

/* KA Cookies */
#ka-cookies .form-check-input:checked {
	background-color: var(--green);
	border-color: var(--green);
}
#ka-cookies .ka-cookies-buttons button {
	text-decoration: none;
	background-color: var(--green);
	border-color: var(--green);
	color: var(--white);
	font-weight: 600;
	--bs-btn-padding-x: 1.5rem;
}
#ka-cookies .ka-cookies-buttons button:hover {
	background-color: var(--greenhover);
	border-color: var(--greenhover);
	color: var(--white);
}

/* Forms */
.form_publications .wpforms-field-textarea textarea {
	height: 70px!important
}
.form_publications .wpforms-submit,
.form_downloads .wpforms-submit {
	background-color: var(--green)!important;
	color: var(--white)!important;
	padding: 0.375rem 2.5rem!important;
	border: none!important
}
.form_publications .wpforms-submit:hover,
.form_downloads .wpforms-submit:hover {
	background-color: var(--greenhover)!important;
	color: var(--white)!important;
}
div.wpforms-container-full .wpforms-form ul.wpforms-image-choices-modern .wpforms-image-choices-image:after {
	background-color: var(--green)!important;
}
.wpforms-field-gdpr-checkbox a {
	text-decoration: underline!important;
}
.wpforms-confirmation-container-full {
	background: var(--green)!important;
	border: 0!important;
	color: #fff!important;
}
.wpforms-confirmation-container-full a,
.wpforms-confirmation-container-full a:hover {
	color: var(--black)!important
}
div.wpforms-container-full .wpforms-form ul.wpforms-image-choices-modern li.wpforms-selected img {
	opacity: .4;
}
div.wpforms-container-full.form_downloads .wpforms-image-choices-label {
	display: none!important;
}
div.wpforms-container-full.form_downloads .wpforms-form ul.wpforms-image-choices label:not(.wpforms-error) {
	padding: 0!important;
}
div.wpforms-container-full.form_downloads .wpforms-form .wpforms-field-checkbox > label {
	margin-bottom: 1rem!important;
}
div.wpforms-container-full.form_downloads .wpforms-form .wpforms-list-3-columns ul li {
	width: calc(50% - 1rem);
	padding: 0!important;
	margin: 0!important;
}
div.wpforms-container-full.form_downloads  .wpforms-form .wpforms-list-3-columns ul {
	gap: 1.25rem
}
.form-control:focus {
	box-shadow: none;
	border-color: var(--midgrey)!important
}
.has-midgrey-background-color .form-control:focus {
	box-shadow: none;
	border-color: var(--green)!important
}
select {
	display: block!important;
width: 100%;
font-size: 1rem!important;
font-weight: 400!important;
line-height: 1.5!important;
background-color: #fff!important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")!important;
background-repeat: no-repeat!important;
background-position: right .75rem center!important;
background-size: 16px 12px!important;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out!important;
appearance: none!important;
}

.form_application .wpforms-required-label {
	display: none;
}

div.wpforms-container-full.form_publications  .wpforms-form ul li .wpforms-image-choices-image img {
	width: 96px;
	height: 135px;
}

/* Werkzeugübersicht */
.tool_icon {
	width: 32px;
	height: auto;
	background-color: var(--white);
	padding: .25rem;
	display: inline-block;
	margin-right: .25rem;
	text-align: center;
}
.tool_icon:before {
	margin: 0;
}

.tool_category {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 120px 120px;
	aspect-ratio: 1/1;
	text-decoration: none;
	background-color: var(--lightgrey);
	background-blend-mode: darken;
	border: 5px solid var(--lightgrey);
	transition: all ease .2s;
	background-image: var(--icon);
	line-height: 1.1;
}
.tool_category:hover {
	border: 5px solid var(--greenhover);
	background-image: var(--iconhover);
}
.tool_category.active {
	border: 5px solid var(--darkgreyhover);
	background-image: var(--iconhover);
}
.tool_category.active .category_name {
	text-decoration: underline;
}

/* Fade In Lazeloaded Content */
img[data-src] {
	opacity: 0;
}
img.lazyloaded {
	-webkit-transition: opacity .3s linear 0.15s;
	-moz-transition: opacity .3s linear 0.15s;
	transition: opacity .3s linear 0.15s;
	opacity: 1;
}
.is-style-colored {
	border-bottom: 0;
}
.is-style-colored table tr td:nth-child(1),
.is-style-colored table tr th:nth-child(1) {
	background-color: var(--white);
	border-color: var(--green);
	border-left: 0;
	border-right: 0
}
.is-style-colored table tr td:nth-child(2),
.is-style-colored table tr th:nth-child(2) {
	background-color: var(--lightgrey);
	border-color: var(--white);
	border-left: 0;
	border-right: 0
}
.is-style-colored table tr td:nth-child(3),
.is-style-colored table tr th:nth-child(3) {
	background-color: var(--greenlight);
	border-color: var(--white);
	border-left: 0;
	border-right: 0
}
.is-style-colored table tr:last-child td {
	border-bottom: 0;
}
.is-style-colored table tr th {
	border-top: 0;
}
.is-style-colored table thead {
	border-bottom: 5px solid var(--white);
}

/* XXS */
@media screen and (max-width: 375px) {

	.tool_category {
		background-size: 50px 50px;
		background-position: center 25px;
		font-size: .8rem
	}

}


/* XS */
@media screen and (max-width: 575px) {

	.wp-block-group {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}	
	.wp-block-media-text .wp-block-media-text__content {
		padding: 1rem 0
	}

	.aspect-ratio-1-1 {
		aspect-ratio: 2 / 1;
	}

	.tool_category {
		background-size: 70px 70px;
		font-size: .9rem;
	}

}


/* XS-MD */
@media screen and (max-width: 991px) {

	#main_nav {
		position: absolute;
		left: -1.5rem;
		width: calc(100% + 2*1.5rem);
		padding: 1rem 1.5rem;
		background-color: var(--lightgrey);
		z-index: 100;
	}

	#main_nav.show {
		display: flex;
		flex-direction: column;
		padding-bottom: 2rem;
		height: 100vh;
	}

	#main_nav.show > * {
		width: 100%;
	}

	#main_nav li {
		border-bottom: 1px solid var(--midgrey)
	}

	.card-tool {
		min-height: 200px;
	}
	.card-tool img {
		border-top: 2rem solid #dddddd;
		border-bottom: 2rem solid #dddddd;
		height: 200px!important;
		object-fit: cover;
	}
	.card-tool .card-title {
		font-size: 1rem;
		font-weight: 600;
	}
	.card-tool .card-subtitle {
		font-size: .9rem;
	}
	
}

/* XS-LG */
@media screen and (max-width: 1199px) {
	.has-h-1-font-size {
		font-size: calc(1.375rem + 1.5vw);
	}
	.has-h-2-font-size {
		font-size: calc(1.325rem + .9vw);
	}
	.has-h-3-font-size {
		font-size: calc(1.3rem + .6vw);
	}
}


/* SM-LG */
@media screen and (min-width: 576px) and (max-width: 991px) {

	.container {
		max-width: unset;
	}

}


/* SM+ */
@media screen and (min-width: 576px) {	
	.wp-block-cover, .wp-block-cover-image,
	.wp-block-cover.cover-video {
		aspect-ratio: inherit;
		min-height: 330px; /* WP default */
	}

	.anchor_nav ul {
		overflow-x: none;
	}
}


/* MD+ */
@media screen and (min-width: 768px) {

	.container-md, .container-sm, .container {
		max-width: calc(100% - 2rem);
	}

	#header .logo,
	#footer .logo {
		width: 180px
	}

	#header .header-top {
		padding: 1rem 0;
	}

	#header .header-bottom {
		padding: .5rem 0;
	}

	#main_nav_navbar > li:first-child > a {
		padding-left: 0;
	}

	.wp-block-cover, .wp-block-cover-image {
		aspect-ratio: inherit;
		min-height: 430px; /* WP default */
	}

}



/* LG+ */
@media screen and (min-width: 992px) {

	.container-lg, .container-md, .container-sm, .container {
		max-width: calc(100% - 2rem);
	}

	.has-nature-background-color {
		background-image: url(assets/images/noise_pattern.png);
		background-repeat: repeat;
		/*background-size: cover;*/
		background-blend-mode: overlay;
	}

	#header .header-top  {
		padding: 1.25rem 0;
	}

	#header .header-bottom {
		padding: 1rem 0;
	}

	#header.is-sticky .header-top {
		padding: .75rem 0;
	}

	#main_nav {
		font-size: 1rem;
	}

	#main_nav_navbar a {
		padding-bottom: 0;
		padding-top: 0;
	}

	#main_nav li:last-child a {
		padding-right: 0;
	}

	#ka-cookies .ka-cookies-option {
		flex: 1 33.33%;
	}

	div.wpforms-container-full.form_downloads  .wpforms-form .wpforms-list-3-columns ul li {
		width: auto;
	}
	div.wpforms-container-full.form_publications  .wpforms-form ul li .wpforms-image-choices-image,
	div.wpforms-container-full.form_downloads  .wpforms-form .wpforms-list-3-columns ul li .wpforms-image-choices-image {
		max-width: 198px;
	}
	div.wpforms-container-full.form_downloads  .wpforms-form .wpforms-list-3-columns ul li .wpforms-image-choices-image img {
		width: 198px;
	}
	div.wpforms-container-full.form_publications  .wpforms-form ul li .wpforms-image-choices-image {
		max-width: 160px; /* 4 in a row */
	}
	div.wpforms-container-full.form_downloads  .wpforms-form .wpforms-list-3-columns ul li .wpforms-field-label-inline {
		border-radius: 0!important;
	}

}

/* LG-Tablet */
@media screen and (min-width: 992px) and (max-width: 1080px) {

	#main_nav_navbar a {
		--bs-navbar-nav-link-padding-x: .35rem
	}

}

/* Tablet+ */
@media screen and (min-width: 1080px) {

	#main_nav {
		font-size: 1.05rem;
	}

}


/* XL+ */
@media screen and (min-width: 1200px) {

	.container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: calc(100% - 2rem);
	}

	/* General Alignment */
	body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width: var(--wp--style--global--content-size);
		margin-left: auto !important;
		margin-right: auto !important;
	}
	body .is-layout-constrained > .alignwide {
		max-width: var(--wp--style--global--wide-size);
		margin-left: auto !important;
		margin-right: auto !important;
	}

	#header .logo,
	#footer .logo {
		width: 200px
	}

	#main_nav {
		font-size: 1.15rem;
		--bs-nav-link-font-size: 1.15rem;
	}

	.home .wp-block-cover,
	.page-id-5716 .wp-block-cover {
		min-height: 400px!important;
	}

}

/* XL+X */
@media screen and (min-width: 1300px) {
	.home .wp-block-cover,
	.page-id-5716 .wp-block-cover {
		min-height: calc(400px + 8.5vw)!important;
	}
}

/* XL - XXL */
@media screen and (min-width: 1352px) and (max-width: 1599px)  {

	.container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: 1320px;
	}
}

/* XXL+ */
@media screen and (min-width: 1600px) {	

	.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: 1320px;
	}

	.home .wp-block-cover .wp-block-cover__video-background {
		max-width: 3000px;
		margin: 0 auto;
	}

}


/* Safari 13: gap / :where Fix TODO! */
/* TEST IT! */

html.cssgridlegacy .is-layout-flex > * {
	margin-left: 1rem;
	margin-right: 1rem;
}
html.cssgridlegacy .is-layout-constrained > *:not(.alignleft):not(.alignright):not(.alignfull) {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}
html.cssgridlegacy .is-layout-constrained > *.alignwide {
	max-width: var(--wp--style--global--wide-size)!important;
}
html.cssgridlegacy .is-layout-constrained > *.alignfull {
	max-width: unset;
}