/*
Theme Name: DiviChild by wplo.de
Theme URI: http://elegantthemes.com
Description: A Child Theme built for Divi
Author: Wplo - WordPress für Einsteiger
Author URI: https://www.wplo.de
Template: Divi
Version: 1.0.0
*/

/* Zusätzliches CSS hinter dem abschließenden Schrägstrich einfügen
------------------------------------------------------------------- */

/* Anpassung Main Menu */
#page-container nav.et-menu-nav ul#menu-main-menu li:last-child a {
  padding: 14px 30px 14px 30px !important;
  border-radius: 25px;
  background-color: #00a1cb;
  color: #fff !important;
  transition: transform 0.3s ease;
}

#page-container nav.et-menu-nav ul#menu-main-menu li:last-child a:hover {
  transform: scale(1.1);
	opacity:1;
}

/* Anpassung Menu EN */
#page-container nav.et-menu-nav ul#menu-menu-en li:last-child a {
  padding: 14px 30px 14px 30px !important;
  border-radius: 25px;
  background-color: #00a1cb;
  color: #fff !important;
  transition: transform 0.3s ease;
}

#page-container nav.et-menu-nav ul#menu-menu-en li:last-child a:hover {
  transform: scale(1.1);
	opacity:1;
}

#page-container nav.et-menu-nav ul#menu-menu-en li:last-child {
  display: inline-block !important;
  vertical-align: middle;
	 display: flex !important;
  align-items: center; /* vertikale Zentrierung */
  justify-content: center;
}



#page-container nav.et-menu-nav ul#menu-main-menu li:last-child {
  display: inline-block !important;
  vertical-align: middle;
	 display: flex !important;
  align-items: center; /* vertikale Zentrierung */
  justify-content: center;
}

#page-container nav.et-menu-nav .et-menu>li {
    padding-left: 1.0vw;
	padding-right: 1.0vw;}

/* Anpassung Layout Kategorieseiten */

body.archive.category #page-container .et_pb_column .blog-overview-standard {
	background:none;
}

body.archive.category #page-container .et_pb_column .blog-overview-standard article{
	margin-bottom:30px !important;
}

/* Anpassung Back to top Pfeil */

.et_pb_scroll_top {
	background-color: #b8d157 !important;
	transition: transform .2s ease-in-out, -webkit-transform .4s ease-in-out;
	font-size: 40px !important;
}

.et_pb_scroll_top:hover {
	-webkit-transform: scale(1.2);
    transform: scale(1.2);
	transition: transform .2s ease-in-out, -webkit-transform .4s ease-in-out;
}

/* Mitglieder – Logo-Hover */
.mitglieder .et_pb_image_wrap img:hover {
	transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out;
	-webkit-transform: scale(1.2);
    transform: scale(1.2);
}
.mitglieder .et_pb_image_wrap img {
	transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out;
}

/* Styling für Labels */
label {
    font-family: 'Scada', sans-serif;
    font-size: 15px;
    color: #04102c;
    display: block;
    margin-bottom: 5px;
}

/* Styling für Input-Feld */
input[type="text"] {
    width: 100%;
    height: 52px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s ease-in-out;
}

input[type="text"]::placeholder {
    color: #aaa;
    font-style: italic;
}

input[type="text"]:focus {
    border-color: #04102c;
}

/* Styling für Checkbox und Datenschutztext */
.cr_ipe_checkbox {
    margin-right: 8px;
}

/* Gestylter Datenschutztext mit integriertem Link */
label[for="datenschutz"] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #04102c;
}

label[for="datenschutz"]::after {
    content: "\1F517"; /* Unicode für ein Link-Symbol */
    font-size: 16px;
    color: #0073e6;
    cursor: pointer;
}

label[for="datenschutz"]::after:hover {
    color: #005bb5;
}

label[for="datenschutz"]:after {
    display: inline-block;
}

/* Styling für den Button */
button.cr_button {
    background-color: #04102c;
    color: #fff;
    font-size: 16px;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

button.cr_button:hover {
    background-color: #0073e6;
}


/* Kontaktformular */
.nf-form-wrap.ninja-forms-form-wrap form nf-fields-wrap input {
	padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}


.nf-form-wrap.ninja-forms-form-wrap form input[type="submit"] {
    padding-top: 13px !important;
    padding-right: 30px !important;
    padding-bottom: 12px !important;
    padding-left: 30px !important;
    border-width: 0px !important;
    border-radius: 25px;
    font-size: 15px;
    background-color: #00a1cb;
	color:#fff;
	transition-duration: .3s;
	cursor: pointer;
}

.nf-form-wrap.ninja-forms-form-wrap form input[type="submit"]:hover {
    transform: scale(1.1);
    transition-duration: .3s;
}

.nf-form-cont #nf-form-title-2 {
font-size: 1.25rem;
    color: #04102c !important;
    line-height: 2.1rem;
     font-weight: bold;
    text-transform: uppercase;
}

form .nf-form-fields-required, form .nf-label-span {
	color: #04102c !important;
	font-size: 15px;
}

form .nf-form-content {
	margin-top:15px;
}

form .list-radio-wrap .nf-field-element li input {
	margin-top: .6em;
}




/* Zeichenformatierungen */
.green {
	color:#B8D157;
}

/* Abstand zwischen Menüpunkten */
.et_pb_menu .et-menu>li {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Styling Blog – Standard – Einheitliche Höhe der Boxen bei Desktop */
@media (min-width: 980px) {
	.blog-overview-standard h2.entry-title {
		height: 50px;
	}
	.blog-overview-standard .post-content {
		height: 240px;
	}


/* Styling Blog – Standard – Titel auf 2 Zeilen begrenzen */
.blog-overview-standard h2.entry-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Maximal 2 Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; /* Wichtig für Zeilenumbruch */
}

/* Styling Blog – Standard – Textauszug auf 6 Zeilen begrenzen */
.blog-overview-standard .post-content-inner p {
    display: -webkit-box;
    -webkit-line-clamp: 6; /* Maximal 3 Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
	}	
}

/* Styling Blog – Standard – Bildgröße immer gleiche Proportionen */
#main-content .et_pb_blog_grid article img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Styling Blog – Standard – Abstand nach Unten */
.blog-overview-standard article .post-content .post-content-inner {
	padding-bottom: 23px;
}

/* Styling Blog – Standard – Hintergrundfarbe */
.blog-overview-standard .et_pb_blog_grid article {
	background-color: #F0F0F0;
}

/* Styling Blog – Standard – Flexboxen */
.blog-overview-standard article {
    display: flex;
    flex-direction: column; /* Elemente untereinander anordnen */
    position: relative; /* Wichtig für gestapelte Inhalte */
	padding: 0 0 20px !important;
	margin-bottom:0 !important;
}

/* Styling Blog – Standard – Abstände Beitragsbild */
.blog-overview-standard article .et_pb_image_container {
	padding:19px;
	margin-bottom:0;
	padding-bottom:0;
}

/* Styling Blog – Standard – Metainformationen */
.blog-overview-standard .post-meta {
    background-color: #B8D157;
    display: inline-block !important;
    padding: 10px 20px 7px 20px !important;
	margin-bottom:0;
    order: 1; /* Metadaten zuerst */
	z-index:3;
    align-self: flex-end; /* Rechtsbündig innerhalb des Containers */
}

/* Styling Blog – Standard – Titel */
.blog-overview-standard h2.entry-title {
    order: 2; /* Titel kommt nach den Metadaten */
	padding:15px 19px 5px;
}

/* Styling Blog – Standard – Content */
.blog-overview-standard .post-content {
    order: 3; /* Textauszug kommt zuletzt */
	padding: 15px 19px 5px;
	display:flex;
	flex-direction: column; /* Inhalt untereinander anordnen */
    align-items: flex-start; /* Inhalt links ausrichten */
}

/* Styling Blog – Standard – Metainformationen in Beitragsbild */
.blog-overview-standard .et_pb_image_container a {
	margin-bottom:-20px;
}

/* Styling Blog – Standard – Button */
.blog-overview-standard .more-link {
	border: 1px solid #00A1CB;
	padding: 10px 25px;
	border-radius:50px;
	bottom:20px;
	margin-top: auto; /* Automatischer Abstand zum oberen Inhalt */
    align-self: flex-start; /* Optional: linksbündig ausrichten */
	transition-duration: .3s;
}

.blog-overview-standard a.more-link:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	transition-duration: .3s;
}

/* Styling Blog – Highlight – Hintergrund */
.blog-overview-standard.highlight article {
	    background-color: #fff;
}

/* Styling Blog – Highlight – Abstände */
.blog-overview-standard.highlight .post-content {
	padding: 0 40px 15px;
}
.blog-overview-standard.highlight h2.entry-title{
		padding:25px 40px 5px;
}
/* Styling Blog – Highlight – Metainformationen */
.blog-overview-standard.highlight .post-meta{
    margin-top: -22px;
    margin-right: -1px;
	}

/* Styling Blog – Highlight – Abstände Auto */
@media (min-width: 980px) {
	.blog-overview-standard.highlight h2.entry-title {
		height: auto;
	}
	.blog-overview-standard.highlight .post-content {
		height: auto;
	}
}
/* Styling Blogbeitrag – Button */
#page-container #main-content .blog-content .wp-block-buttons a {
	background:none !important;
	border: 1px solid #00A1CB;
	margin: 10px 0 20px;
    transition-duration: .3s;
}

#page-container #main-content .blog-content .wp-block-buttons a:hover {
	-webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition-duration: .3s;
    }



/* Styling Video-Button */
a.btn-video {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-left: 2.5rem; /* Platz für das Icon */
    background: #007BFF;
    color: #fff;
    border: none;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
body #page-container .et_pb_section .et_pb_button.btn-video:before {
	content: '\f03d' !important; 
	font-family: FontAwesome !important;
	font-weight: 900; /* falls du z. B. solid Icons willst */
	font-size:1em;
	margin-right:20px;
	content: "\f689"; /* Icon-Code */
	margin-left: -2em;
}

.button-row .et_pb_button_module_wrapper {
	display:
	inline;
}

/* Hover "Button Blog" und "Standard Button" */

.themen:hover, .et_pb_button_module_wrapper a.et_pb_button:hover{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	transition-duration: .3s;
}

.themen, .et_pb_button_module_wrapper a.et_pb_button {
	transition-duration: .3s;
}

/* Styling global Footer */
@media (max-width: 600px) {
.global-footer .footer-btn-newsletter .et_pb_button_module_wrapper a{
	width:100%;
	text-align:center;
	}
}

/* Konfiguration Newsletter Size */
#newsletter form .formbox {
	width: 100%;
	max-width: 640px;
}


/* Styling Themenbereiche */
.themen .et_pb_blurb_content, .themen .et_pb_blurb_container {
  display: flex;
  flex-direction: column; /* Standardmäßig werden die Elemente vertikal angeordnet */
}

.themen .et_pb_main_blurb_image {
  order: 3;
}

.themen .et_pb_blurb_description {
  order: 1;
	width:80%;
	margin:20px auto;
}

.themen .et_pb_module_header {
  order: 2;
	width:80%;
	margin:20px auto 0; 
}


/* Vorstand Image Accordion – Anpassung Breite beim Aktiv-Zustand */
@media screen and (min-width: 980px) {
.hero-sidebyside .dsm_image_accordion_child.dsm_image_accordion_active_item {
    -ms-flex: 2 0 auto;
    flex: 2 0 auto;
	}
}


@media screen and (max-width: 980px) {
.hero-sidebyside .dsm_image_accordion_child.dsm_image_accordion_active_item {
    -ms-flex: 6 0 auto;
    flex: 6 0 auto;
	}
}

/* Vorstand Image Accordion – Anpassung Abstand */
.hero-sidebyside .dsm_image_accordion_child_content {
    padding-left: 2vw;
    padding-right: 2vw;
}

/* Vorstand Image Accordion – Stile für das Eltern-Element */
.et_pb_module .dsm_image_accordion {
    position: relative;
}

/* Vorstand Image Accordion – Stile für die einzelnen Accordions */
.et_pb_module .dsm_image_accordion_child {
    position: relative;
    overflow: hidden; /* Sicherstellen, dass das Overlay nicht über das Element hinausragt */
}

/* Vorstand Image Accordion – Hinzufügen eines zusätzlichen Elements für das Hintergrundbild */
.et_pb_module .dsm_image_accordion_child::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    z-index: 0; /* Hintergrundbild soll unter dem Text bleiben */
    transition: filter 0.5s ease, background-color 0.5s ease; /* Transition-Effekte */
}

/* Vorstand Image Accordion – Grundzustand für die Overlays (keine Überlagerung im inaktiven Zustand) */
.et_pb_module .dsm_image_accordion_child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Keine Farbe im inaktiven Zustand */
    z-index: 1; /* Überlagerung soll unter dem Text bleiben */
    transition: background-color 0.5s ease; /* Transition-Effekt */
}

/* Vorstand Image Accordion – Stile für das aktive Accordion */
.et_pb_module .dsm_image_accordion_child.dsm_image_accordion_active_item::before {
    background-color: rgba(29, 34, 47, 0.88); /* Halbtransparente schwarze Überlagerung */
}

/* Vorstand Image Accordion – Stile für den Hover-Effekt */
.et_pb_module .dsm_image_accordion_child:hover::after {
    filter: blur(3px); /* Weichzeichnung bei Hover */
}

/* Vorstand Image Accordion – Stile für den Text im Accordion */
.et_pb_module .dsm_image_accordion_child .et_pb_module {
    position: relative;
    z-index: 2; /* Text soll über der Überlagerung bleiben */
}

/* Vorstand Image Accordion – Stile für den Text im Accordion */
.hero-sidebyside h4 {
	color:#fff;
	font-size: 1.3rem;
}

/* Vorstand Image Accordion – Stile für den Text im Accordion */
.hero-sidebyside strong {
	color:#b8d157;
}

/* Button Icon */
body #page-container .et_pb_button_module_wrapper a.et_pb_button.btn-icon-before:before {
font-family: FontAwesome !important; /* FontAwesome-Schrift */
}

/* News-Bereich */
body .blog-overview-standard.news article {
	margin-bottom: 40px !important;
}

/* Blog auf Unterseiten – Hintergrundfarbe und Abstände */
body .blog-overview-standard.blog-sub article {
	background-color:#fff;
	padding-bottom:10px !important;
}

/* Blog auf Unterseiten – Ältere Einträge */
body .blog-overview-standard.blog-sub .pagination{
	float: right;
    margin-top: 20px;
    border: 1px solid #B8D157;
    border-radius: 25px;
    padding: 10px 20px;
    background-color: #B8D157;
	}

/* Blog auf Unterseiten – Ältere Einträge */
body .blog-overview-standard.blog-sub .pagination a {
	color: #fff;
	font-size: 15px;
}

/* Blog auf Unterseiten – Ältere Einträge */
body .blog-overview-standard.blog-sub .pagination:hover{
	-webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition-duration: .3s;
}

/* Blog auf Unterseiten – Ältere Einträge */
body .blog-overview-standard.blog-sub .pagination{
    transition-duration: .3s;
}

/* Blog auf Unterseiten – Button ausblenden, wenn keine "weiteren" Beiträge */
.pagination {
  visibility: visible;
}

/* E-Geld-Check – Radio-Buttons nebeneinander platzieren */
.question p {
  display: flex; /* Ordnet die Elemente horizontal an */
  flex-wrap: wrap; /* Falls nicht genug Platz ist, wird umgebrochen */
  gap: 15px; /* Abstand zwischen den Optionen */
  align-items: center; /* Zentriert Buttons und Text vertikal */
}
.question label {
  display: flex; /* Macht den Label-Container flexibel */
  align-items: center; /* Zentriert den Text vertikal */
  gap: 5px; /* Abstand zwischen Radio-Button und Text */
  line-height: 1.5; /* Sorgt für gleichmäßige Zeilenhöhe */
}
input[type="radio"] {
  transform: translateY(-1px); /* Hebt den Kreis minimal an */
}

/* Blog der Stellungnahmen – Integration Icon */
body .blog-overview-standard.blog-sub.blog-stellungnahmen article:before {
	content:'\f15b' !important;
	color:#B8D157;
	margin-right:25px;
	margin-top:25px;
    font-family: FontAwesome !important; /* FontAwesome-Schrift */
    font-size: 35px; /* Größe des Icons */
	line-height: 1.2em;
	position:absolute;
	right:0;
}

/* Blog der Stellungnahmen – Abstand */
body .blog-overview-standard.blog-sub.blog-stellungnahmen article h2 {
	margin-top:10px;
}
/* Newsletter Anmeldung */
body .newsletter label {
	font-weight: inherit;
}

body .newsletter input, body .newsletter label {
	font-family: 'Scada', sans-serif;
}

body .newsletter button[type="submit"] {
	color: #fff !important;
	background-color:#00a1cb;
	border-radius: 30px;
	font-size: 15px;
	font-family: 'Scada', sans-serif;
	font-weight: 500;
	padding-top: 8px !important;
	padding-right: 40px !important;
	padding-bottom: 7px !important;
	padding-left: 40px !important;
	height: auto;
	border: 1px solid #00a1cb;
	transition: transform 0.3s ease-in-out; 
}

body .newsletter button[type="submit"]:hover {
    transform: scale(1.1); /* Vergrößert den Button um 10% */
	opacity:1;
}



/* Fonts lokal einbinden */

/* scada-regular - latin */
@font-face {
  font-family: 'Scada';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/uploads/fonts/scada-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* scada-italic - latin */
@font-face {
  font-family: 'Scada';
  font-style: italic;
  font-weight: 400;
  src: url('/wp-content/uploads/fonts/scada-v15-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* scada-700 - latin */
@font-face {
  font-family: 'Scada';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/uploads/fonts/scada-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* scada-700italic - latin */
@font-face {
  font-family: 'Scada';
  font-style: italic;
  font-weight: 700;
  src: url('/wp-content/uploads/fonts/scada-v15-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}