/*!
Theme Name: Optiweb
Theme URI: https://www.optiweb.de
Template: kadence
Author: OptiWeb
Author URI: https://www.optiweb.de
Description: A child theme for Optiweb and the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: optiweb-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */

/* Header
-------------------------------------------------------------- */
.head-subline {
	color: var(--global-palette6);
	font-size: 20px;
}
/* Kontakt-Button im Menü */
.main-navigation .primary-menu-container > ul > li.menu-kontakt {
	background: var(--global-palette2);
	border-radius: 50px;
	margin-left: 1.4em;
}
.main-navigation .primary-menu-container > ul > li.menu-kontakt:hover {
	background: var(--global-palette1);
}
.main-navigation .primary-menu-container > ul > li.menu-kontakt a,
.main-navigation .primary-menu-container > ul > li.menu-kontakt.menu-kontakt.current-menu-item a {
	color: var(--global-palette9);
	padding: 0.3em 2.2em;
}
.main-navigation .primary-menu-container > ul > li.menu-kontakt a:hover {
	color: var(--global-palette3) !important;
}
/* Sticky Header */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
	background: rgba(0,0,72,.7) !important;
}

/* RankMath */
.rank-math-breadcrumb a,
.rank-math-breadcrumb {
	color: var(--global-palette4);
	font-size: 15px;
}
.rank-math-breadcrumb a:hover {
	color: var(--global-palette1);
}

/* Footer
-------------------------------------------------------------- */
.site-bottom-footer-inner-wrap {
	border-top: 1px solid var(--global-palette1);
}
.footer-titel {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: -22px;
	color: var(--global-palette1);
}

#footer-menu .menu-item {
	margin-left: 1.8em;
}
#footer-menu .menu-item:first-child {
	margin-left: 0;
}

/* Anything else
-------------------------------------------------------------- */

/* Leistungsboxen */
.leistungsboxen .wp-block-kadence-column .kt-inside-inner-col {
	border-radius: 20px;
	aspect-ratio: 1;
	padding: var(--global-kb-spacing-md, 2rem);
}
.leistungsboxen h3 {
	text-transform: uppercase;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.1em !important;
	color: var(--global-palette9);
	margin-bottom: 10px !important;
}
.leistungsboxen p {
	color: var(--global-palette3);
}
@media screen and (max-width: 1024px) {
	.leistungsboxen .wp-block-kadence-column .kt-inside-inner-col {
		aspect-ratio: unset;
		min-height: 300px;
	}
	.leistungsboxen h3 {
		font-size: 30px;
	}
}

/* Schrittboxen */
.schrittboxen .wp-block-kadence-column .kt-inside-inner-col {
	border-radius: 20px;
	aspect-ratio: 1;
	padding: var(--global-kb-spacing-md, 2rem);
}
.quer .wp-block-kadence-column .kt-inside-inner-col {
	aspect-ratio: unset;
}
.schrittboxen h3 {
	font-weight: 700;
	color: var(--global-palette2);
	line-height: 1.4 !important;
	margin-bottom: 10px !important;
}
.schrittboxen p {
	color: var(--global-palette3);
}
@media screen and (max-width: 1024px) {
	.schrittboxen .wp-block-kadence-column .kt-inside-inner-col {
		aspect-ratio: unset;
		min-height: 300px;
	}
}

/* Nachteilsboxen */
.nachteile .wp-block-kadence-column .kt-inside-inner-col {
	border-radius: 20px;
	/*aspect-ratio: 1;*/
	padding: var(--global-kb-spacing-md, 2rem);
}
.nachteile h3 {
	line-height: 1.4em !important;
}
.nachteile p {
	color: var(--global-palette9);
}

/* Vorteilsboxen */
.vorteilsboxen h3 {
	margin-bottom: 10px !important;
}

/* Warum OptiWeb Boxen */
.warum-optiweb .wp-block-kadence-column .kt-inside-inner-col {
	border-radius: 20px;
	padding: var(--global-kb-spacing-md, 2rem);
	box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.2);
}
.warum-optiweb h3 {
	text-align: center;
	line-height: 1.4 !important;
	margin-top: 0.5em !important;
}
.warum-optiweb p {
	text-align: center;
}

/* Vergleichstabelle */
.vergleichstabelle {
	margin-top: 60px !important;
	border-radius: 20px;
	box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.2);
}
.vergleichstabelle figure {
	width: 34px;
}
.vergleichstabelle th:last-child {
	background: var(--global-palette7);
}
.vergleichstabelle tr:nth-of-type(2n) td:last-child {
	background: #eff1ff;
}
.vergleichstabelle tr:nth-of-type(2n+1) td:last-child {
	background: #dde1ff;
}

/* ###### Referenz-Slider ###### */
/* inaktive ausgrauen */
.referenzen .kb-portfolio-content-item-inner {
	max-width: 100%;
}
.referenzen .kb-slide-item .kadence-portfolio-image {
	opacity: 0.6;
}
.referenzen .kb-slide-item.is-active .kadence-portfolio-image {
	opacity: 1;
}
.referenzen .kb-slide-item .kb-portfolio-grid-item-inner {
	display: none;
}
.referenzen .kb-slide-item.is-active .kb-portfolio-grid-item-inner {
	display: flex;
}

.referenzen .kb-blocks-portfolio-grid-item {
	background: none;
}
.referenzen .kb-blocks-portfolio-grid-item .kadence-portfolio-image {
	border-radius: 20px;
}
.referenzen .kb-blocks-portfolio-grid-item .kb-portfolio-loop-excerpt { 
	max-width: 710px;
}
.referenzen .kb-portfolio-grid-item-inner {
	position: relative;
	/*background: var(--global-palette9);*/
}

.referenzen .portfolio-hover-item-link {
	display: none;
}
.referenzen .kb-portfolio-overlay-color {
	display: none;
}
.referenzen .kb-portfolio-overlay-border {
	display: none;
}
.referenzen .kb-portfolio-content-item-inner {
	opacity: 1;
	transform: none !important;
	margin-top: 38px;
}
.referenzen .kb-portfolio-content-item-inner .kb-portfolio-loop-title {
	font-size: 20px !important;
	line-height: 1.4 !important;
}
@media screen and (max-width: 1024px) {
	.referenzen .kb-portfolio-content-item-inner .kb-portfolio-loop-title {
		font-size: 19px !important;
	}
}
@media screen and (max-width: 767px) {
	.referenzen .kb-portfolio-content-item-inner .kb-portfolio-loop-title {
		font-size: 18px !important;
	}
}
/* ###### Ende Referenz-Slider ###### */

/* Referenzseite */
.referenzliste .kb-post-list-item article {
	grid-template-columns: 1fr 1fr !important;
}
/* Menü Referenzseite */
.single-post .item-at-start .site-header-row-container-inner {
	background: rgba(0,0,72,.7) !important;
}
/* Ähnliche Referenzen */
.loop-entry .entry-meta {
	display: none;
}

/* RankMath FAQ */
/*.rank-math-block {
	background: url(/wp-content/uploads/optiweb-icon.svg) no-repeat;
	background-position: bottom -30px right -90px;
}*/
.rank-math-block .rank-math-list {
	max-width: var(--global-content-width);
	padding-left: var(--global-content-edge-padding);
	padding-right: var(--global-content-edge-padding);
	margin-left: auto;
	margin-right: auto;
	/* 2-spaltig ausgeblendet 
	grid-template-columns: repeat(2, 1fr);*/	
	grid-column-gap: 40px;
	grid-row-gap: 50px;
	display: grid;
	padding-bottom: 7rem;
}
.rank-math-list-item {
	display: grid;
	grid-template-columns: 74px auto;
	column-gap: 30px;
	grid-template-areas: "icon frage" "icon antwort";
	grid-template-rows: min-content;
}
.rank-math-list-item::before {
	grid-area: icon;
	display: inline-block;
	width: 74px;
	height: 46px;
	margin-top: 4px;
	background-image: url(/wp-content/uploads/optiweb-icon-2.svg);
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	content: " ";
	vertical-align: middle;
}
.rank-math-list-item .rank-math-question {
	grid-area: frage;
}
.rank-math-list-item .rank-math-answer {
	grid-area: antwort;
}

/* Fluent Formulare */
.fluentform .ff-el-form-control {
	padding: 8px 12px !important;
	border-radius: 6px !important;
}
/*.fluentform .ff-el-form-check-label span a,
.fluentform .ff-el-form-check-label span {
	color: var(--global-palette9);
}*/
.fluentform .ff-btn-submit {
	border-radius: 50px !important;
	padding: 10px 50px !important;
	background-color: var(--global-palette2) !important;
	color: var(--global-palette9) !important;
	font-size: 16px !important;
	margin-top: 26px;
}
.fluentform .ff-btn-submit:hover {
	background-color: var(--global-palette1) !important;
	color: var(--global-palette9) !important;
	opacity: 1 !important;
}

/* Button mit Verlauf */
.b-verlauf a,
.ff-default .ff_btn_style {
	background: linear-gradient(110deg, #5763c9 21%, #40CCFD 100%);
	border: none !important;
}
.ff-default .ff_btn_style:hover {
	background: var(--global-palette1) !important;
}

/* ### Animierte Karte ### */
#kartediv {
	position:relative;
	display: inline-block;
}
#karte {
	width:100%;
	height:auto;
}
.kartelink {
	position:absolute;
	color:#00B1EB;
	text-decoration:none;
	transition: 0.5s;
	font-size: 1.25rem;
	line-height: 1rem;
}
.kartelink:hover {
	color:#fff;
}
@media (max-width: 1200px) {
	.kartelink {
		font-size: 1.1rem;
		line-height: 1.1rem;
	}
}
@media (max-width: 800px) {
	.kartelink {
		font-size: 0.6rem;
		line-height: 0.5rem;
	}
}

@media screen and (min-width: 1025px) and (max-width: 1140px) {

}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 767px) {

}


@media screen and (max-width: 540px) {

}