/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** VORLAGEN  ***************/

/* BRANCHEN ÜBERSICHT */

/***** WHAT MAKES US DIFFERENT [STARTSEITE] *****/
/* aufteilung spalten */
.moderne-loesungen > div > div {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
@media only screen and (min-width:576px) and (max-width:991.98px) {
.moderne-loesungen > div > div {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width:575.98px) {
.moderne-loesungen > div > div {grid-template-columns: repeat(1, 1fr);}
}
.moderne-loesungen > div > div:before {display: none;}
.moderne-loesungen > div > div > div {background-color: rgba(0,51,81,0.05); color: #003351; border-radius: 4px; border: 1px solid #003351; display: flex; flex-direction: column; margin-bottom: 5px; padding: 20px; transition: 0.25s ease-in-out;}
.moderne-loesungen > div > div > div:hover {background-color: rgba(0,51,81,1); color: #fff; transition: 0.25s ease-in-out;}
.moderne-loesungen > div > div > div:hover h3 {color: #fff; transition: 0.25s ease-in-out;}
/* überschriften */
.moderne-loesungen h3.porto-sicon-title {font-family: Noto Sans Regular; font-size: 1.875rem; line-height: 2.25rem; margin-bottom: 35px; transition: 0.25s ease-in-out;}

/***** PRODUKTÜBERSICHT [STARTSEITE] *****/
/* aufteilung spalten */
.startseite-produktuebersicht > div > div {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
@media only screen and (min-width:576px) and (max-width:991.98px) {
.startseite-produktuebersicht > div > div {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width:575.98px) {
.startseite-produktuebersicht > div > div {grid-template-columns: repeat(1, 1fr);}
}
.startseite-produktuebersicht > div > div:before {display: none;}
.startseite-produktuebersicht > div > div > div > div > div {border-radius: 4px; border: 1px solid #ec6409; display: flex; flex-direction: column; height: 100%; margin-bottom: 5px; padding: 20px !important; transition: 0.25s ease-in-out;}
.startseite-produktuebersicht > div > div > div > div > div:hover {background: #004361; border: 1px solid #fff; transition: 0.25s ease-in-out;}
/* überschriften */
.startseite-produktuebersicht h3.porto-sicon-title {font-family: Noto Sans Regular; font-size: 1.875rem; line-height: 2.25rem; margin-bottom: 35px; transition: 0.25s ease-in-out;}
/* buttons */
.button-produktuebersicht {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);}
/* abstand */
.startseite-produktuebersicht .porto-sicon-header {margin-bottom: 3rem;}

/***** EINSATZBEREICH SPAREPART [STARRTSEITE] *****/
/* aufteilung spalten */
.startseite-branchen > div > div {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
@media only screen and (max-width:575.98px) {
.startseite-branchen > div > div {grid-template-columns: repeat(1, 1fr);}
}
.startseite-branchen > div > div:before {display: none;}
.startseite-branchen > div > div > div > div > div {display: flex; flex-direction: column; height: 100%; margin-bottom: 5px;}
.startseite-branchen img {border-radius: 4px;}

/***** BETRIEB [SERVICE] *****/
/* aufteilung spalten */
.betrieb > div > div {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.betrieb > div > div > div:nth-child(3) {grid-column: 1 / -1;}
@media only screen and (max-width:767.98px) {
.betrieb > div > div {grid-template-columns: 1fr;}
.betrieb > div > div > div:nth-child(3) {grid-column: auto;}
}
.betrieb > div > div:before {display: none;}
.betrieb > div > div > div > div > div {border-radius: 4px; border: 1px solid #ec6409; display: flex; flex-direction: column; height: 100%; margin-bottom: 5px; padding: 20px !important; transition: 0.25s ease-in-out;}
.betrieb > div > div > div > div > div:hover {background: #004361; border: 1px solid #fff; transition: 0.25s ease-in-out;}

/* überschriften */
.betrieb h3.porto-sicon-title {font-family: Noto Sans Bold; font-size: 1.875rem; line-height: 2.25rem; margin-top: 35px !important; transition: 0.25s ease-in-out;}
.betrieb li > strong  {color: #ec6409; font-family: Noto Sans Bold;}

/***** BRANCHEN *****/
/***** BRANCHE LINKS *****/
.branche-links {background-repeat: no-repeat; background-position: center; background-size: auto auto; height: 100%; display: block;}
@media (min-width: 992px) {
.branche-links {position: absolute; right: 0;  top: 0;}
}
@media (max-width: 991.98px) {
.branche-links {position: relative; width: calc(100% - 30px) !important; height: 350px; background-size: cover; margin: 0 calc(var(--bs-gutter-x) / 2) 100px;}
.branche-links-text {width: 100% !important;}
}

/* BRANCHE RECHTS*/
.branche-rechts {background-repeat: no-repeat; background-position: center; background-size: auto auto; height: 100%; display: block;}
@media (min-width: 992px) {
.branche-rechts {position: absolute; left: 0;  top: 0; height: 100% !important;}
.branche-rechts-text {margin-left: 50%;}
}
@media (max-width: 991.98px) {
.branche-rechts {position: relative; width: calc(100% - 30px) !important; height: 350px; background-size: cover; margin: 0 15px 100px;}
.branche-rechts-text {width: 100% !important;}
} 

/* KONTAKTFORMULAR ANFORDERUNGEN */
#anforderungen .form-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 40px;}
#anforderungen .form-left, #bewerbung .form-right {display: flex; flex-direction: column; gap: 20px;}
@media only screen and (max-width: 768px) {#anforderungen  .form-grid {grid-template-columns: 1fr;}}

#anforderungen input[type="text"], input[type="email"], input[type="tel"], select, textarea {background-color: rgba(255,255,255,1) !important; border: 1px solid #003351; border-radius: 4px; color: #18191c; font-family: Noto Sans Regular; font-size: 1rem; height: 40px; padding: 6px 12px; width: 100%;}
#anforderungen input[type="submit"] {width: max-content; position: relative; top: 24px;}
#anforderungen textarea {height: 246px;}
#anforderungen label {margin: 0 0 10px; width: 100%;}
#anforderungen label br {margin: 0 0 5px;}

/* HINTERGRÜNDE */
.hg-titel, .hg-blau {
background: linear-gradient(0deg, rgba(0, 24, 45, 0.7) 0%, rgba(0, 24, 45, 0) 50%), linear-gradient(180deg, rgba(0, 24, 45, 0.7) 0%, rgba(0, 24, 45, 0) 45%), linear-gradient(90deg,rgba(0, 24, 45, 1) 0%, rgba(0, 67, 97, 1) 25%, rgba(0, 67, 97, 1) 50%, rgba(0, 67, 97, 1) 75%, rgba(0, 24, 45, 1) 100%);}
@media only screen and (max-width:575.98px) {
.hg-titel, .hg-blau {background: #003351;}	
}
/* .hg-blau {background-color: #004361; background-image: url('/wp-content/uploads/2026/02/rahmen-schwarz.webp'); background-repeat: no-repeat; background-size: 100% 100%; background-position: center;} */
.hg-weiss {background-color: #fff; background-image: url('/wp-content/uploads/2026/02/rahmen-schwarz-soft.webp'); background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.hg-orange {background-color: rgba(236,100,8,1);}
.hg-grau {background-color: #e8eff3;}
.hg-schwarz {background-image: url('/wp-content/uploads/2026/02/rahmen-schwarz.webp'); background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.hg-soft {background-image: url('/wp-content/uploads/2026/02/rahmen-schwarz-soft.webp'); background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
/* HG Mega Menu */
@media only screen and (min-width:992px) {
.hg-weiss-grau {background: linear-gradient(to right, #fff 50%, #e8eff3 50%) !important;}
}

/* FUNKTIONEN FLIPBOXEN */
.flip {cursor: pointer; position:relative;}
.flip > div {background-color: rgba(243,247,249,.5); border: 1px solid #003351; border-radius: 4px; margin-bottom: 30px; padding: 20px !important; transition: 0.25s ease-in-out; display: grid;}
.hg-grau .flip > div, .hg-blau .flip > div {background-color: rgba(255,255,255,.85); border: 1px solid #003351; border-radius: 4px; margin-bottom: 30px; padding: 20px !important; transition: 0.25s ease-in-out; display: grid;}
.flip > div:hover, .hg-grau .flip > div:hover, .hg-blau .flip > div:hover {background-color: #003351; color: #fff; transition: 0.5s ease-in-out;}
.flip > div > * {grid-area: 1 / 1;}

/* Default Text */
.flip .text-default {opacity: 1; transition: opacity .4s ease; margin-bottom: 0;}
.flip .text-default.has-flip strong:before, .flip .text-default.has-flip h3:before {content: ""; display: inline-block; width: 14px; height: 14px; background-image: url("/wp-content/uploads/2026/03/pfeil-orange-rechts.svg"); background-size: contain; background-repeat: no-repeat;}

/* Hover Text */
.flip .text-hover {opacity: 0; transition: opacity .4s ease; margin-bottom: 0;}

/* Hover Zustand */
.flip:hover .text-default {opacity: 0; margin-bottom: 0;}
.flip:hover .text-hover {opacity: 1; z-index: 2; margin-bottom: 0;}

/* Styling */
.flip {cursor: pointer; position:relative;}
.flip p {font-size: 0.8rem; line-height: 1.15rem;}
.flip strong {color: #ec6409; font-family: Noto Sans Bold !important; font-size: 1rem;}
.flip a:not(:has(img)) {background-color: #003351; border: 1px solid #fff; border-radius: 4px; color: #fff; padding: 5px 10px; transition: 0.25s ease-in-out;}
.flip a:not(:has(img)):hover {background-color: #ec6409; transition: 0.25s ease-in-out;}
.flip img {border-radius: 4px; margin-top: 50px;}

@media only screen and (min-width:1270px) {.flip > div {height: 280px;}}

@media only screen and (max-width: 1269.98px) {.flip.col-md-6 {width: 100%;}}

/* BLOG ARCHIV SEITE */
.spareparts-blog .nav-pills > li > a {background: 0; transition: 0.25s ease-in-out;}
.spareparts-blog .nav-pills > li > a:hover {background-color: #ec6409; color: #fff; transition: 0.25s ease-in-out;}
.spareparts-blog .nav-pills > li.active > a {background-color: #ec6409; color: #fff;}

/* BLOG ARCHIV POST TYPE */
.spareparts-blog .porto-tb-item {display: flex;}
.spareparts-blog .porto-tb-item > div {flex: 1 !important; border: 1px solid #003351; border-radius: 4px;}
.spareparts-blog .porto-tb-featured-image {border-radius: 4px; display: flex; justify-content: center; border-radius: 4px; overflow: hidden;}
@media only screen and (min-width:992px) {
.spareparts-blog .porto-tb-featured-image {height: 248px;}
}
@media only screen and (min-width:768px) and (max-width:991.98px) {
.spareparts-blog .porto-tb-featured-image {height: 220px;}
}         
.spareparts-blog .porto-tb-featured-image img {width: 100%; height: 100%; }

/* BLOG SINGLE POST */
.beitragsbild .img-thumbnail {border-radius: 4px;}

/* BLOG RELATED POSTS */
.related .porto-tb-item {background-color: #fff; border: 1px solid #003351; border-radius: 4px;}
.related h3.porto-post-title {padding: 0 20px 0; margin-bottom: 0;}
.related h3.porto-post-title a {transition: 0.25s ease-in-out;}
.related h3.porto-post-title a:hover {color: #ec6409; transition: 0.25s ease-in-out;}
/* Share ausblenden */
.post-share h3 {display: none;}
/* Auszugstext ausblenden */
.related .post {font-size: 0;}
.related .post h3, .related .post a {font-size: 1.25rem; line-height: 1.688rem;}
/* Gleiche Höhe */
.related .posts-wrap {display: flex; align-items: stretch;}
.related.posts-wrap .post-item {display: flex; flex-direction: column; height: 100%;}
.related .posts-wrap .post-item > * {flex-grow: 1;}
.related .posts-wrap.owl-carousel .owl-stage {display: flex;}
.related .posts-wrap.owl-carousel .owl-item {display: flex;}

/* 2 SPALTEN 3 REIHEN */
/* Aufteilung Spalten */
.reihen-3-spalten-2 > div > div {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}

@media only screen and (max-width:767.98px) {
.reihen-3-spalten-2 > div > div {grid-template-columns: 1fr;}
}
.reihen-3-spalten-2 > div > div:before {display: none;}
.reihen-3-spalten-2 > div > div > div > div > div {background: #fff; border-radius: 4px; border: 1px solid #003351; display: flex; flex-direction: column; height: 100%; margin-bottom: 5px; padding: 20px !important; transition: 0.25s ease-in-out;}
.reihen-3-spalten-2 > div > div > div > div > div:hover {background: #004361; border: 1px solid #fff; color: #fff; transition: 0.25s ease-in-out;}

/* Überschriften */
.reihen-3-spalten-2 h3.porto-sicon-title {font-family: Noto Sans Bold; font-size: 1.875rem; line-height: 2.25rem; margin-top: 35px !important; transition: 0.25s ease-in-out;}
.reihen-3-spalten-2 > div > div > div > div > div:hover h3.porto-sicon-title {color: #ec6409;}
.reihen-3-spalten-2 p strong {font-family: Noto Sans Bold;}