/*========================================================================

	Template Name : Tralse - Construction Building HTML Template
	Author : Rainbow Design

========================================================================*/
/*----------------------------------

	Table of contents
	
	00. Fonts
	01. Common
	02. Header
	03. Slider
	04. About us
	04.1 Project News
	05. Counter
	06. Services
	07. Call to action
	08. Awesome Features
	09. Our Work / Projects
	10. Pricing table
	11. Our Team
	12. Testimonials
	13. Blog
	14. Client
	15. Footer
	16. Page Title
	17. Services & Information
	18. Contact Us
	19. Newsletter
	20. Terms And Conditions
	21. DSGVO Banner / PopUp	

----------------------------------*/

/* Theme Font Use */
@font-face {
    /* font-family: 'localfonts'; */
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Calibri, Montserrat, sans-serif;
}

/* ===================================
	01. Common
=================================== */
::selection {
  background-color: #007bff;
  color: #fff;
}
::-moz-selection {
  background-color: #007bff;
  color: #fff;
}
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  background-color: #000; /* Farbe für Hintergrund: Anthrazit-Dunkelgrau  */
}
p {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: #ccc; /* Farbe für p: Hellgrau */
}
ul, li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
img {
  max-width: 100%;
}
.h1,.h2,.h3,.h4,.h5,.h6 {
  line-height: 1.4;
  font-family: 'Montserrat', sans-serif;
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'Montserrat', sans-serif; 
}
.bg-grey {
  background-color: #f5f5f5;
}
.bg-mediumgrey {
  background-color: #333333;
}
a,a:hover,a:focus,a:active {
  text-decoration: none;
}
hr {
  color: white;
}
/* --- Top Scroll --- */
.scroll-top {
  display: none;
  position: fixed;
  bottom: 30px;
  text-align: center;
  right: 3%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
  background-color: #ff383f;
  text-decoration: none;
  border-radius:4px;
  z-index: 9999;
}
.scroll-top:hover {
  color: #fff !important;
  text-decoration: none;
  background-color: #cd3333;
}
/* --- Loading --- */
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  text-align: center;
  height: 100%;
  vertical-align: middle;
  height: 100%;
  overflow: visible;
  background-color: #fff;
}
#preloader .spinner-grow {
  top: 50%;
  position: relative;
}
/* --- Section title --- */
.section-title h2 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 8px 0px;
  line-height: 40px;
  color: #fff;
  position: relative;
  padding: 0px;
  text-transform: uppercase;
}
.section-title h6 {
  text-transform: uppercase;
  font-size: 12px;
  color: #ccc; /* Hellgrau */
}
.section-title h2 span {
  color: #ff383f;
  /* color: #fd7e14; */
  text-decoration: underline;
}
/* --- Buttons --- */
.btn-style-1 {
  background-color: #ff383f;
  position: relative;
  display: inline-block;
  padding: 14px 20px;
  color: #fff;
  border: 0px;
  text-decoration: none;
  border-radius: 4px;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.btn-style-1:hover {
  background-color: #ff383f;
  color: #fff;
}
.btn-style-2 {
  background-color: #07687b;
  position: relative;
  display: inline-block;
  padding: 14px 20px;
  border: 0px;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  text-transform: uppercase;
  font-family: 'Helvetica', sans-serif;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.btn-style-2:hover {
  background-color: #137728;
  color: #fff;
}
.btn-style-2.btn-sm {
  padding: 10px 14px;
  font-size: 12px;
}
.list-inline-item li {
 font-size: 18px;
}

/* ===================================
	02. Header
================================== */
.header-top-contact {
  top: 50%;
  transform: translateY(-50%);
  position: relative;
}
.header .header-upper-bar {
  background-color: #272727;
  padding: 10px 0px;
}
.header-top-contact ul li {
  position: relative;
  border-right: 1px solid rgba(255,255,255,0.2);
  color: #ccc;
  padding: 0px 12px 0px 0px;
}
.header-top-contact ul li:last-child {
  border-right: 0px;
  padding: 0px 0px 0px 0px;
}
.header-top-contact ul li a {
  color: #ccc;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.header-top-contact ul li a:hover {
  color: #ff383f;
}
.header-social-icons {
  display: inline-block;
  margin-top: 5px;
}
.header-social-icons a {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  margin: 0 4px 0 0px;
  font-size: 12px;
  background-color: #3e3e3e;
  border-radius: 100px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  float: left;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.header-social-icons a:last-child {
  margin-right: 0px;
}
.header-social-icons a:hover {
  color: #fff;
  background-color: #ff383f;
}
.header {
  /* background: #fff; Hellgrauer Hintergrund ausgeblendet BG zentral bestimmt */
  z-index: 9;
  box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0);
}
.header-navigation {
  padding-top: 0;
  padding-bottom: 0;
}
.header-navigation .navbar-toggler span {
  background: #2d2e33;
}
.header-navigation .navbar-brand {
  position: relative;
  padding: 0px;
  margin: 0;
}
.header-navigation .navbar-nav > li {
  margin: 0px 16px;
  position: relative;
}
.header-navigation .navbar-nav > li:last-child {
  margin-right: 0px;
}
.header-navigation .navbar-nav > li .nav-link {
  padding: 30px 0px;
  color: #0dcaf0;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.header-navigation .navbar-nav > li .nav-link:hover {
  color: #cd3333;
}
.header-navigation .navbar-nav > li.active .nav-link, .header-navigation .navbar-nav > li:hover a {
  color: #cd3333;
}
.header-navigation .navbar-nav > li .dropdown-menu {
  margin: 0px;
  padding: 0px 0px;
  background-color: #272727;
  border: 0px;
  border-radius: 0px;
  overflow: hidden;
}
.header-navigation .navbar-nav > li .dropdown-menu .dropdown-item {
  border-left: 2px solid #272727;
  background-color: #3e3e3e;
  text-transform: uppercase;
  color: #c1c1c1;
}
.header-navigation .navbar-nav > li .dropdown-menu .dropdown-item:last-child {
  border-bottom: 0px;
}
.header-navigation .navbar-nav > li .dropdown-menu .dropdown-item:hover {
  color: #fff;
  background-color: #3e3e3e;
  border-left: 2px solid #ff383f;
}
.header-navigation .navbar-nav > li .dropdown-menu a {
  padding: 8px 13px;
  font-size: 12px;
  line-height: 20px;
}
.header-navigation .navbar-nav .nav-link .nav-link-btn {
  padding: 10px 25px;
}
.header-navigation .navbar-nav .nav-link .nav-link-btn:not(:hover) {
  color: #fff;
}
/* Navbar Toogle */
.navbar-toggler {
  border: none;
  padding: 10px 6px;
  background-color: #0dcaf0;
  outline: none !important;
}
.navbar-toggler span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.navbar-toggler span + span {
  margin-top: 4px;
  width: 18px;
}
.navbar-toggler span + span + span {
  width: 10px;
}
/* sticky */
.sticky {
  position: fixed;
  top: 0px;
  z-index: 999 !important;
}
.is-sticky .navbar {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  z-index: 999 !important;
  background-color: #212529; /* Zeile für Dark-Theme background-color: #222; */
}

/* Gilt nur für Smartphones und Tablets, wenn das Menü einklappt (unter 992px) */

@media screen and (min-width: 920px) {

.navbar-brand img {
  height: 35px; /* Passe diesen Wert nach Wunsch an (z. B. 25px oder 30px) */
  width: auto;
  }
/* shows the dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover {
	display: block!important;
	background-color: #212529;
}
}

/* ===================================
	03. Slider
=================================== */
.slider .carousel-item:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
  background-color: rgba(0,0,0,0.3);
}
.slider .carousel-caption {
  top: 50%;
  bottom: auto;
  left: 0px;
  right: 0px;
  z-index: 2;
  padding-top: 0px;
  padding-bottom: 0px;
  transform: translateY(-50%);
}
.slider .carousel-caption .slider-caption-box {
  padding: 0px 0px 0px 0px;
  position: relative;
  z-index: 0;
  text-align: center;
}
.slider .carousel-caption h2 {
  font-size: 50px;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
}
.slider .carousel-caption h2 span {
  color: #ff383f;
}
.slider .carousel-control-next, .slider .carousel-control-prev {
  border-radius: 100%;
  color: #fff;
  line-height: 50px;
  background-color: #212529;
  border: 2px solid rgba(14,200,240,0.6);
  font-size: 18px;
}
.slider .carousel-control-next {
  width: 50px;
  bottom: auto;
  top: 50%;
  height: 50px;
  right: 60px;
  color: #0ec8f0;
  background-color: #212529;
  transform: translateY(-50%);
}

.slider .carousel-control-next:hover {
  color: #212529;
  background-color: #0dcaf0;
  border: none;
}

.slider .carousel-control-prev {
  left: 60px;
  width: 50px;
  display: inline-block;
  bottom: auto;
  top: 50%;
  height: 50px;
  color: #0ec8f0;
  background-color: #212529; 
  transform: translateY(-50%);
}

.slider .carousel-control-prev:hover {
  color: #212529;
  background-color: #0dcaf0;
  border: none;
}

/* ===================================
	04. About us
=================================== */
.about-content h6 {
  text-transform: uppercase;
  font-size: 14px;
  color: #ff383f;
}
.about-content h2 {
  font-size: 30px;
  font-weight: 600;
  /* color: #fff; Farbe für Dark Theme */
}
.about-content p {
  /* letter-spacing: 1px; */
  font-size: 16px;
  color: #fff;
  line-height: 24px;
  font-style: normal;
  margin-bottom: 20px;
  margin-right: 20px;
  display: inline-block;
  text-align: justify
}

.about-content-link {
  color: #0dcaf0;
}

.about-content p .about-content-link:hover {
  color: #ff383f; 
}

.about-content-main h6 {
  text-transform: uppercase;
  font-size: 14px;
  color: #ff383f;
}
.about-content-main h2 {
  font-size: 30px;
  font-weight: 600;
  /* color: #fff; Farbe für Dark Theme */
}
.about-content-main p {
  font-size: 16px;
  text-align: justify; 
  /* color: #fff; Farbe für Dark Theme */
}

/* ===================================
	04.1. Project News
=================================== */
.project-content h6 {
  text-transform: uppercase;
  font-size: 14px;
  color: #ff383f;
}

.project-newssection {
  background-color: rgba(33,33,33,33.7);
}

.project-content h2 {
  font-size: 30px;
  font-weight: 600;
  /* color: #fff; Farbe für Dark Theme */
}
.project-content p {
  /* letter-spacing: 1px; */
  font-size: 16px;
  color: #fff;
  line-height: 24px;
  font-style: normal;
  margin-bottom: 20px;
  margin-right: 20px;
  display: inline-block;
  text-align: justify
}

.project-content p .project-content-link {
  color: #0dcaf0; 
}

.project-content p .project-content-link:hover {
  color: #ff383f; 
}

.project-content-main h6 {
  text-transform: uppercase;
  font-size: 14px;
  color: #ff383f;
}
.project-content-main h2 {
  font-size: 30px;
  font-weight: 600;
  /* color: #fff; Farbe für Dark Theme */
}
.project-content-main p {
  font-size: 16px;
  text-align: justify; 
  /* color: #fff; Farbe für Dark Theme */
}

/* ===================================
	05. Counter
=================================== */
.counter-area {
  background-image: url(../img/bg/counter-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
  z-index: 0;
}
.counter-area:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(0,0,0,0.7);
  z-index: -1;
}
.single-counter-box {
  text-align: center;
  position: relative;
}
.counter-area .col-lg-3 {
  border-right: 1px solid rgba(255,255,255,0.2);
}
.counter-area .col-lg-3:last-child {
  border-right: 0px;
}
.single-counter-box .content {
  position: relative;
}
.single-counter-box .content .counter-info-text {
  font-size: 70px;
  font-weight: 600;
  line-height: 50px;
  margin-bottom: 0px;
  font-family: 'Montserrat', sans-serif;
  color: #ff383f;
}
.single-counter-box .content .title {
  font-size: 18px;
  padding-top: 20px;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0px;
}
/* ===================================
	06. Services
=================================== */
.service-item-box {
  position: relative;
  border-radius: 4px;
  padding: 30px;
  background-color: #fff; /* Zeile für Dark-Theme background-color: #222; */
  border: 1px solid #ecebeb; /* Zeile für Dark-Theme border: 1px solid rgba(255,255,255,0.1); */
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.service-item-box:hover {
  border: 1px solid #ff383f;
}
.service-item-box .icon {
  font-size: 20px;
  margin-bottom: 20px;
  display: inline-block;
  color: #fff;
  width: 80px;
  height: 80px;
  background-color: #ff383f;
  text-align: center;
  line-height: 80px;
  border-radius: 100px 100px 100px 100px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.service-item-box:hover .icon {
  border-radius: 4px;
}
.service-item-box h3 {
  font-size: 22px;
  color: #2d2e33; /* Zeile für Dark-Theme color: #fff; */
  font-weight: 600;
  text-transform: capitalize;
  margin: 0px 0px 10px 0px;
}
.service-item-box p {
  margin: 0;
}
/* service side link */
.widget {
  border-radius: 4px;
  border: 2px solid #07687b;
  position: sticky; /* schwebendes Menu beim scrollen */
  top: 85px;	/* Abstand zum oberen Bildschirmrand beim Scrollen */
  z-index: 100; /* Stellt sicher, dass das Menü über anderen Elementen bleibt */
  /* overflow: hidden; */
}
.title-widget {
  padding: 25px 30px;
  border-bottom: 1px solid #07687b; /* Zeile für Dark-Theme border-bottom: 1px solid rgba(255,255,255,0.1); */
  background-color: #272727;
}
.title-widget h3 {
  position: relative;
  font-size: 20px;
  font-weight: 600;
  line-height: 14px;
  margin-bottom: 0px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}
.links-services {
  padding-left: 0;
  background: #fff; /* Zeile für Dark-Theme background: #222; */
  margin-bottom: 0;
  border-top: none;
  padding-bottom: 15px;
  padding-top: 15px;
  border: 0px solid #0ea5e9; /* Zeile für Dark-Theme border: 1px solid rgba(255,255,255,0.1); */
  flex: 1; /* schwebendes Menu beim scrollen */
}
.links-services li {
  border-bottom: 1px solid #07687b; /* Zeile für Dark-Theme border-bottom: 1px solid rgba(255,255,255,0.1); */
  margin-right: 20px;
  margin-left: 20px;
}
.links-services li a {
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 15px;
  display: block;
  line-height: 15px;
  text-transform: capitalize;
  color: #f5f5f5; /* Zeile für Dark-Theme color: #fff; */
  padding-top: 15px;
  transition: all .4s;
}
.links-services li a:hover {
  color: #ff383f;
  padding-left: 10px;
}
.links-services li.active a {
  color: #ff383f;
  padding-left: 0px;
}
.links-services li a i {
  margin-right: 15px;
  }
.links-services li:last-child {
  border-bottom: none;
}
/* Download broucher */
.lists-brochures {
  padding: 20px;
  background: #fff; /* Zeile für Dark-Theme background: #222; */
  border-top: none;
  border: 1px solid #f1f1f1; /* Zeile für Dark-Theme border: 1px solid rgba(255,255,255,0.1); */
}
.lists-brochures li a {
  width: 100%;
  position: relative;
  border: 1px solid #f1f1f1; /* Zeile für Dark-Theme border: 1px solid rgba(255,255,255,0.1); */
  background: #f5f5f5; /* Zeile für Dark-Theme background: #000; */
  color: #333333; /* Zeile für Dark-Theme color: #fff; */
  line-height: 20px;
  display: block;
  margin-bottom: 4px;
  text-align: left;
  padding: 14px 10px;
  z-index: 2;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.20px;
}
.lists-brochures li a:hover {
  background-color: #ff383f;
  color: #fff;
}
.lists-brochures li a i {
  margin-right: 10px;
  font-size: 14px;
}
.lists-brochures li:last-child a {
  margin-bottom: 0;
}
/* need help */
.need-help {
  padding: 20px;
  background-color: #fff; /* Zeile für Dark-Theme background-color: #000; */
  border-top: none;
  border: 1px solid #f1f1f1; /* Zeile für Dark-Theme border: 1px solid rgba(255,255,255,0.1); */
}
.need-help-call {
  color: #ff383f;
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 6px;
}
.need-help-call:hover {
  color: #272727; /* Zeile für Dark-Theme color: #fff; */
}
/* single service img carousel */
.service-detail-content h2, .service-detail-content h6, .service-detail-content h4 {
	color: #fff;
}
.service-detail-content ul li {
	color: #fff;
}
.service-detail-content p {
	color: #ddd;
	font-size: 16px;
	line-height: 26px;
	text-align: justify;
}

.service-detail-content-link {
  color: #0dcaf0;
}

.service-detail-content p .service-detail-content-link:hover {
  color: #ff383f; 
}

.single-service-img-carousel .owl-nav {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0;
  text-align: left;
}
.single-service-img-carousel .owl-nav .owl-prev, .single-service-img-carousel .owl-nav .owl-next {
  color: #333 !important;
  line-height: 40px;
  font-size: 12px;
  margin: 4px 0px 0px 4px;
  width: 40px;
  height: 40px;
  border: 0 !important;
  border-radius: 3px;
  background-color: rgba(44,94,106,0.9) !important;
}
.single-service-img-carousel .owl-nav .owl-prev:hover, .single-service-img-carousel .owl-nav .owl-next:hover {
  background-color: #137728 !important;
  color: #fff !important;
}

.container p {
	font-size: 16px;
	/* display: flex;	/* Für schwebendes mitscrollen des Seitenmenüs - Wichtig, damit das Menü nicht unendlich gestreckt wird */
  /* align-items: flex-start; /* Für schwebendes mitscrollen des Seitenmenüs - Wichtig, damit das Menü nicht unendlich gestreckt wird */
}

/* ===================================
	07. Call to action
=================================== */
.call-to-action-section {
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  background: url(../img/bg/call-to-action-bg.jpg) fixed no-repeat;
}
.call-to-action-section:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(0,0,0,0.7);
  z-index: -1;
}
.call-to-action h4 {
  font-size: 40px;
  color: #fff;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 20px;
}
.call-to-action p {
  letter-spacing: 1px;
  font-size: 16px;
  color: #fff;
  line-height: 28px;
  font-style: normal;
  margin-bottom: 20px;
  display: inline-block;
}
/* ===================================
	08. Awesome Features
=================================== */
.features-tab .nav-tabs a {
  border: 1px solid #f5f5f5; /* Zeile für Dark-Theme  border: 1px solid rgba(255,255,255,0.1) !important; */
  border-radius: 0px;
  padding: 18px 12px;
  color: #333; /* Zeile für Dark-Theme  color: #fff; */
  position: relative;
  text-transform: capitalize;
  font-family: 'Montserrat', sans-serif;
}
.features-tab .nav-tabs a.active:after {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  background-color: #ff383f;
  right: 0px;
  left: 0px;
  margin: auto;
  bottom: -6px;
  transform: rotate(45deg);
}
.features-tab .nav-tabs a.active {
  background-color: #ff383f;
  color: #fff;
}
.features-tab .nav-tabs a:hover {
  background-color: #ff383f;
  color: #fff;
}
.features-tab .tab-content {
  border: 1px solid #f5f5f5; /* Zeile für Dark-Theme 	border: 1px solid rgba(255,255,255,0.1); */
  padding: 20px 20px 5px 20px;
}
/* Zeilen für Dark-Theme .features-tab .tab-content ul li {
	color: #fff;
} */

/* ===================================
	09. Our Work / Projects
=================================== */
.project-section {
  position: relative;
  z-index: 0;
  background-color: #f5f5f5; /* Zeile für Dark-Theme background-color: #222; */
}
#portfoliolist .portfolio {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  display: none;
}
.portfolio-box {
  margin-bottom: 25px;
  overflow: hidden;
  border-radius: 4px;
}
.portfolio-box .portfolio-box-img {
  position: relative;
  border-radius: 2px 2px 0px 0px;
  overflow: hidden;
}
.portfolio-box .portfolio-box-img .hoverlay {
  background: rgba(11, 156, 185, 0.8);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.4);
  -moz-transform: scale(0.4);
  -ms-transform: scale(0.4);
  -o-transform: scale(0.4);
  transform: scale(0.4);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.portfolio-box:hover .hoverlay {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.portfolio-box .hoverlay a {
  color: #fff;
  font-size: 36px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /* NEUE ZEILEN: Macht den Link so groß wie das gesamte Overlay */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Zentriert das Plus-Zeichen perfekt in der Mitte */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  
}
.portfolio-box .hoverlay a:hover {
  color: #fff;
}
.portfolio-box:hover p {
  color: #fff;
}
.portfolio-box:hover .portfolio-box-des {
  background-color: #ff383f !important;
  border-color: #ff383f;
}
.filter1 {
  background-color: #444444; /* Wurde im HTML aktuell durch bg-dark überschrieben */
  color: #fff;
  border: 0px solid #f5f5f5; /* Zeile für Dark-Theme border: 1px solid rgba(255,255,255,0.1); */
  padding: 15px;
  /* HIER DIE ENTSCHEIDENDEN ZEILEN FÜR DEN RAHMEN: */
  border-radius: 4px !important; /* Erzwingt die runden Ecken gegenüber Bootstrap */
  overflow: hidden;               /* Schneidet den dunklen bg-dark Hintergrund an den Ecken rund ab */
}
.filter1 li span {
  cursor: pointer;
  padding: 8px 20px; /* für größere Rechtecke Std. war 2px 12 px */
  border-radius: 3px;
  display: inline-block;
  position: relative;
  font-size: 12px;
  /* Zeile für Dark-Theme color: #fff; */
  font-weight: 400;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.filter1 li span:hover {
  color: #fff;
  background-color: #07687b;
}
.filter1 li span.active {
  color: #fff;
  background-color: #07687b;
}
/* project info */
/* Zeilen für Dark-Theme .project-details-section h4 {
	color: #fff;
} */
.project-info-box {
  background-color: #ff383f;
  padding: 25px;
  color: #fff;
}
.project-info-box ul li h5 {
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 2px;
}
/* Progressbar */
.skill-progress .progress-title-holder {
  position: relative;
  font-size: 14px;
  color: #1e1e27; /* Zeile für Dark-Theme color: #fff; */
  text-transform: capitalize;
  padding-bottom: 6px;
}
.skill-progress .progress-wrapper {
  width: 100%;
  z-index: 10;
}
.skill-progress .progress-mark {
  position: absolute;
  bottom: 0;
  line-height: 38px;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.skill-progress .progress-outter {
  background-color: #e5e5e5;
}
.skill-progress .progress-content {
  width: 0%;
  background: #474d53;
}
.skill-progress .progress-content, .skill-progress .progress-outter {
  height: 20px;
}
.skill-progress .percent {
  color: #1e1e27;
  font-size: 12px;
}
.skill-progress .progress-content, .skill-progress .progress-outter {
  height: 4px;
}
.skill-progress .progress-content {
  background: #ff383f;
}
.skill-progress .percent {
  position: relative;
  /* Zeile für Dark-Theme color: #fff; */
}
.skill-progress .percent:before {
  background: #ff383f;
  border-radius: 100%;
  bottom: -29px;
  content: "";
  height: 15px;
  position: absolute;
  right: 10px;
  width: 15px;
}
.skill-progress .skill-bar {
  margin-bottom: 24px;
}
.skill-progress .skill-bar:last-child {
  margin-bottom: 0px;
}
/* single project img carousel */
.single-project-img-carousel .owl-nav {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0;
  text-align: left;
}
.single-project-img-carousel .owl-nav .owl-prev, .single-project-img-carousel .owl-nav .owl-next {
  border-radius: 0;
  color: #333 !important;
  line-height: 40px;
  font-size: 12px;
  margin: 0px 2px 0px 0px;
  width: 40px;
  border: 0 !important;
  height: 40px;
  background-color: #f5f5f5 !important;
}
.single-project-img-carousel .owl-nav .owl-prev:hover, .single-project-img-carousel .owl-nav .owl-next:hover {
  background-color: #ff383f !important;
  color: #fff !important;
}

/* NAVIGATIONS Symbole in Venobox Bildgallerie positionieren */
.vbox-close, .vbox-prev, .vbox-next {
    top: 20px !important;       /* Abstand zum oberen Bildschirmrand */
    height: 44px !important;     /* Alle drei Buttons MÜSSEN exakt gleich hoch sein */
    width: 44px !important;      /* Alle drei Buttons sind quadratisch */
    bottom: auto !important;
    transform: none !important;  /* Deaktiviert die großflächige Venobox-Verschiebung des Containers */
    display: inline-flex !important;     /* Zentriert die inneren Icons exakt innerhalb des Buttons */
    align-items: center !important;
    justify-content: center !important;
}

.vbox-close, .vbox-prev, .vbox-next {
    background-color: rgba(44,94,106,0.4) !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 3px !important; /* 0 Entfernt die Kreisform. 50% Macht den Hintergrund perfekt kreisrund */
    width: 70px !important;       /* Breite des Rechtecks */
    height: 50px !important;      /* Höhe des Rechtecks */
    line-height: 50px !important; /* Zentriert die Pfeile/Icons perfekt im neuen Rechteck und muss exakt derselbe Wert wie 'height' sein */
    transition: background-color 0.25s ease-in-out !important; /* Animiert nur den Hintergrund */
}

/* Den Cancel-Button exakt in der Mitte platzieren */
.vbox-close {
    left: 50% !important;
    margin-left: -22px !important; /* Hälfte der eigenen Breite, um perfekt zu zentrieren */
    right: auto !important;
    z-index: 99999 !important;
    font-size: 42px !important;   /* Standard ist oft um die 18px-24px. Hier erhöhen für ein größeres X */
}

/* Symbole (X und Pfeile) auch beim Hovern weiß lassen */
.vbox-close:hover {
    color: #ffffff !important;
    background-color: #de0005 !important; /* Hover BG Grün */
}

/* Linker Pfeil (Zurück) links neben das X setzen */
.vbox-prev {
    top: 35px !important;        /* 35px tiefer als das X */
    left: calc(50% - 95px) !important;
    right: auto !important;
}

/* Rechter Pfeil (Vor) rechts neben das X setzen */
.vbox-next {
    top: 35px !important;        /* 35px tiefer als das X */
    right: calc(50% - 120px) !important;
    left: auto !important;
}

/* Hover-Effekt: Hintergründe grün färben */
.vbox-prev:hover, .vbox-next:hover {
    background-color: #137728 !important; /* Hover BG Grün */
}

.vbox-prev span, .vbox-next span {
    width: 20px !important;        /* Erhöht die Länge der Pfeilschenkel (Standard: 12px) */
    height: 20px !important;       /* Erhöht die Länge der Pfeilschenkel (Standard: 12px) */
    border-top-width: 3px !important;   /* Macht die obere Linie dicker (= Fettschrift) */
    border-right-width: 3px !important; /* Macht die rechte Linie dicker (= Fettschrift) */
}

.vbox-prev:hover span, .vbox-next:hover span {
    /* KORREKTUR: Nur die Pfeilschenkel weiß färben, den Rest unsichtbar lassen */
    border-top-color: #ffffff !important;
    border-right-color: #ffffff !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;

    width: 20px !important;        
    height: 20px !important;       
    border-top-width: 3px !important;   
    border-right-width: 3px !important; 
}

/* KORREKTUR: Befreit die inneren Spans, erlaubt aber die Pfeil-Drehung */
.vbox-prev span, .vbox-next span {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    /* transform: none !important; <-- Gelöscht! Venobox darf die Pfeil-Spans hier wieder rotieren */
}

/* ENDE - NAVIGATIONS Symbole in Venobox Bildgallerie positionieren */

/* ===================================
	10. Pricing table
=================================== */
.pricing-table {
  position: relative;
  padding: 0px;
  border: 1px solid #ecebeb; /* Zeile für Dark-Theme border: 1px solid rgba(255,255,255,0.1); */
  text-align: center;
}
.pricing-table .price span:first-of-type {
  font-size: 40px;
  font-weight: 300;
  color: #ff383f;
  font-family: 'Montserrat', sans-serif;
}
.pricing-table .price span:last-of-type {
  font-size: 14px;
  color: #888;
}
.pricing-header {
  background-color: #e5e5e5; /* Zeile für Dark-Theme 	background-color: #000; */
}
.pricing-header h5 {
  padding: 20px 0px;
  margin-bottom: 0px;
  /* Zeile für Dark-Theme color: #fff; */
}
.pricing-header .price {
  background-color: #f6f6f6; /* Zeile für Dark-Theme background-color: #222; */
  padding: 20px 0px;
}
.pricing-body {
  padding: 32px 0 32px 0;
}
.pricing-body ul li {
  font-size: 14px;
  color: #888;
  padding-bottom: 16px;
}
.pricing-body ul li i {
  font-size: 10px;
  padding-right: 4px;
}
.pricing-body ul li:last-child {
  padding-bottom: 0px;
}
.pricing-footer {
  padding: 0px 0 32px 0;
}
.pricing-footer p {
  font-size: 12px;
  font-style: italic;
}
/* ===================================
	11. Our Team
=================================== */
.team-wrapper-box {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
.team-wrapper-box .team-img-box {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.team-wrapper-box .team-img-box img {
  transition: ease all 0.3s;
  -webkit-transition: ease all 0.3s;
  transform: scale(1) rotate(0deg);
  -webkit-transform: scale(1) rotate(0deg);
}
.team-wrapper-box .team-img-box:after {
  content: "";
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  position: absolute;
  pointer-events: none;
  transition: ease all 0.3s;
  -webkit-transition: ease all 0.3s;
}

.team-social {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0px;
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 15;
  text-align: center;
  opacity: 0;
  bottom: 0px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.team-wrapper-box:hover .team-social {
  opacity: 1;
}
.team-social li {
  display: inline-block;
  margin: 0px 0px;
  padding: 6px 12px;
  background-color: #fff;
  text-align: center;
}
.team-social li a {
  color: #333;
}
.team-social li a:hover {
  color: #ff383f;
}
.team-wrapper-box .team-member-info {
  padding: 25px;
  position: relative;
  background-color: #272727;
  border-radius: 6px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.team-wrapper-box .team-member-info:before {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  background-color: #0ec8f0;
  top: -5px;
  left: 20px;
  transform: rotate(45deg);
}
.team-wrapper-box .team-member-info h3 {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 5px;
}
.team-wrapper-box .team-member-info h3 a {
  color: #fff;
}
.team-wrapper-box .team-member-info h3 a:hover {
  color: #ff383f;
}
.team-wrapper-box .team-member-info span {
  font-size: 13px;
  display: inline-block;
  opacity: 1.0;
  color: #fff;
}

/* ===================================
	12. Testimonials
=================================== */
.testimonial-bg {
  background-image: url(../img/bg/testimonial-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
  z-index: 0;
}
.testimonial-bg:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(0,0,0,0.7);
  z-index: -1;
}
.testimonial-item {
  position: relative;
  text-align: center;
  border-radius: 6px;
  padding: 2px 0px 0px 0px;
}
.testimonial-item .img {
  display: inline-block;
  width: 100px;
}
.testimonial-item .img img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 6px;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255,255,255,0.6);
  -moz-box-shadow: 0px 0px 0px 2px rgba(255,255,255,0.6);
  box-shadow: 0px 0px 0px 2px rgba(255,255,255,0.6);
}
.testimonial-item h6 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 15px;
  margin-bottom: 5px;
}
.testimonial-item label {
  color: #fff;
  font-size: 12px;
  margin-bottom: 0px;
}
.testimonial-item p {
  color: #fff;
  font-weight: 300;
  font-size: 18px;
  margin-top: 20px;
  line-height: 30px;
  font-family: 'Montserrat', sans-serif;
  position: relative;
}
.testimonial-section .owl-nav {
  text-align: center;
  bottom: 0px;
  width: 100%;
  margin-top: 20px;
}
.testimonial-section .owl-nav .owl-prev, .testimonial-section .owl-nav .owl-next {
  width: 40px;
  height: 40px;
  text-align: center;
  border: 2px solid #fff !important;
  border-radius: 100%;
  line-height: 40px;
  color: #fff !important;
  margin: 0px 6px 0px 6px;
}
.testimonial-section .owl-nav .owl-prev:hover, .testimonial-section .owl-nav .owl-next:hover {
  background-color: #ff383f;
  color: #fff !important;
}

/* ===================================
	13. Blog
=================================== */
.single-news-item {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05); /* Zeile für Dark-Theme border: 1px solid rgba(255,255,255,0.1); */
  border-radius: 6px;
  overflow: hidden;
}
.single-news-item .post-thumbnail {
  position: relative;
  overflow: hidden;
}
.single-news-item .post-thumbnail img {
  width: 100%;
  height: auto;
}
.single-news-item .hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.30s ease;
}
.single-news-item:hover .hover {
  opacity: 1;
}
.single-news-item .post-meta {
  margin: 0 0 8px 0;
  padding: 0;
  width: 100%;
}
.single-news-item .post-meta li {
  display: inline-block;
  list-style: none;
}
.single-news-item .post-meta li {
  border-right: 1px solid rgba(0,0,0,0.1);
  padding-right: 10px;
  margin-right: 6px;
}
.single-news-item .post-meta li:last-child {
  border-right: 0px;
  padding-right: 0px;
  margin-right: 0px;
}
.single-news-item .post-meta li a {
  color: #333; /* Zeile für Dark-Theme color: #fff; */
  position: relative;
  font-size: 12px;
  display: inline-block;
  text-align: center;
}
.single-news-item .post-meta li a i {
  color: #ff383f;
  padding-right: 4px;
}
.single-news-item .post-meta li a:hover {
  color: #ff383f;
}
.single-news-item .post-content {
  padding: 24px;
}
.single-news-item .post-title {
  margin: 0 0 15px 0;
}
.single-news-item .post-title a {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  line-height: 26px;
  display: inline-block;
  text-transform: capitalize;
  transition: all 0.3s ease 0s;
}
.single-news-item .post-title a:hover {
  text-decoration: none;
  color: #ff383f;
}
.single-news-item .post-description {
  line-height: 22px;
  color: #505050;
}
/* blog widget */
.blog-widget {
  border: 1px solid #f5f5f5; /* Zeile für Dark-Theme border: 1px solid rgba(255,255,255,0.1); */
  padding: 20px;
  border-radius: 4px;
}
.blog-title-widget h3 {
  font-size: 20px;
  /* Zeile für Dark-Theme color: #fff; */
  position: relative;
}
.blog-title-widget h3:before {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  background-color: #ff383f;
  top: 0px;
  left: -20px;
}
/* search widget */
.search-widget {
  position: relative;
}
.search-widget input {
  height: 50px;
  /* Zeilem für Dark-Theme background-color: #222;
	color: #fff;
	border: 0; */
}
/* Zeilen für Dark-Theme .search-widget input:focus {
	background-color: #222;
	color: #fff;
	border: 0;
} */
.search-widget button {
  position: absolute;
  right: 0px;
  top: 50%;
  background-color: #ff383f;
  color: #fff;
  height: 100%;
  border-radius: 0px 4px 4px 0px;
  width: 50px;
  transform: translateY(-50%);
}
/* blog categories */
.blog-categories ul li {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f5f5f5; /* Zeile für Dark-Theme border-bottom: 1px solid rgba(255,255,255,0.1); */
}
.blog-categories ul li:last-child {
  padding-bottom: 0px;
  margin-bottom: 0px;
  border-bottom: 0px;
}
.blog-categories ul li a {
  color: #333; /* Zeile für Dark-Theme color: #fff; */
}
.blog-categories ul li a:hover {
  color: #ff383f;
}
/* blog tags */
.blog-tags a {
  background-color: #f5f5f5; /* Zeile für Dark-Theme background-color: #222; */
  padding: 4px 10px;
  display: inline-block;
  color: #333; /* Zeile für Dark-Theme color: #fff; */
  border-radius: 4px;
  margin-right: 4px;
  margin-bottom: 6px;
}
.blog-tags a:hover {
  background-color: #ff383f;
  color: #fff;
}
/* Recent post */
.recent-post-box {
  display: inline-block;
  width: 100%;
  position: relative;
}
.recnt_pst_imge {
  width: 20%;
  float: left;
  margin-right: 15px;
}
.recnt_pst_imge img {
  border-radius: 4px;
}
.recent-title {
  text-align: left;
  display: inline-block;
  width: 75%;
  float: left;
}
.recent-title > a {
  font-size: 16px;
  margin-bottom: 10px;
  display: inline-block;
  letter-spacing: 0px;
  color: #2c2c2c; /* Zeile für Dark-Theme color: #fff; */
  line-height: 22px;
}
.recent-title > p {
  font-size: 13px;
  color: #505050;
  margin-top: -8px;
  margin-bottom: 0px;
}
/* singal blog */
.singal-blog-section blockquote {
  background-color: #f5f5f5; /* Zeile für Dark-Theme background-color: #222; */
  padding: 20px;
  text-align: center;
  border-top: 1px solid #ff383f;
}
.singal-blog-section blockquote p {
  font-size: 15px;
  font-style: italic;
  line-height: 26px;
  font-family: 'Montserrat', sans-serif;
}
.singal-blog-section .post-share-options {
  position: relative;
  margin-top: 10px;
  width: 100%;
}
.singal-blog-section .post-share-options {
  position: relative;
  display: inline-block;
}
.singal-blog-section .post-share-options .share-tags {
  float: left;
  /* Zeile für Dark-Theme color: #fff; */
}
.singal-blog-section .post-share-options .share-tags a:first-child {
  margin-left: 10px;
}
.singal-blog-section .post-share-options .share-tags a {
  position: relative;
  color: #222222; /* Zeile für Dark-Theme color: #fff; */
  text-transform: uppercase !important;
  line-height: 1em;
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 4px;
  background-color: #f5f5f5; /* Zeile für Dark-Theme background-color: #222; */
  margin-right: 2px;
  display: inline-block;
  text-align: center;
  text-transform: capitalize;
}
.singal-blog-section .post-share-options .share-tags a:hover {
  background-color: #ff383f;
  color: #fff;
}
.singal-blog-section .post-share-options .share-tags a:last-child {
  margin-right: 0px;
}
.singal-blog-section .post-share-options .share-social {
  float: right;
  /* Zeile für Dark-Theme color: #fff; */
}
.singal-blog-section .post-share-options .share-social a:first-child {
  margin-left: 10px;
}
.singal-blog-section .post-share-options .share-social a {
  position: relative;
  color: #222222; /* Zeile für Dark-Theme color: #fff; */
  text-transform: uppercase !important;
  line-height: 1em;
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 4px;
  background-color: #f5f5f5; /* Zeile für Dark-Theme background-color: #222; */
  margin-right: 2px;
  display: inline-block;
  text-align: center;
  text-transform: capitalize;
}
.singal-blog-section .post-share-options .share-social a:hover {
  background-color: #ff383f;
  color: #fff;
}
.singal-blog-section .post-share-options .share-social a:last-child {
  margin-right: 0px;
}
/* Comments */
.list-comments {
  border: 1px solid #f5f5f5; /* Zeile für Dark-Theme border: 1px solid rgba(255,255,255,0.1); */
  padding: 20px;
  border-radius: 4px;
}
h4.single-blog-inner-title {
  margin-top: 0px;
  font-size: 24px;
  letter-spacing: 0px;
  text-transform: capitalize;
  text-align: left;
  font-weight: 600;
  padding: 6px 0px;
  position: relative;
  color: #333; /* Zeile für Dark-Theme color: #fff; */
}
h4.single-blog-inner-title:before {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  background-color: #ff383f;
  top: 0px;
  left: -20px;
}
.comments li .comment {
  padding: 0px;
  position: relative;
  overflow: hidden;
  background: transparent;
}
.comments .comment_imgg {
  width: 12%;
  float: left;
}
.comments .comment_imgg img.comment-avatar {
  border-radius: 4px;
}
.comments .comment_content {
  position: relative;
  width: 85%;
  background-color: #f5f5f5; /* Zeile für Dark-Theme background-color: #222; */
  border-radius: 4px;
  padding: 15px;
  float: right;
}
.comments li .comment strong.commenter-title {
  font-weight: 500;
  font-size: 16px;
  text-transform: capitalize;
  display: block;
  color: #888888;
}
.comments li .comment strong.commenter-title a {
  color: #333; /* Zeile für Dark-Theme color: #fff; */
  font-size: 20px;
  font-weight: 600;
}
.comments li .comment span.comment-date {
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
  margin-top: 0px;
  /* Zeile für Dark-Theme color: #fff; */
  text-transform: uppercase;
}
.comments li .comment span.comment-reply a {
  transition: all 0.5s ease 0s;
  font-size: 11px;
  padding: 5px 15px;
  position: absolute;
  right: 5px;
  top: 5px;
  border-radius: 4px;
  background-color: #333;
  text-transform: uppercase;
  color: #fff;
}
.comments li .comment span.comment-reply a:hover {
  background-color: #ff383f;
}
.comments li .comment p {
  margin-top: 7px;
  font-size: 14px;
}
.comments li .comment p:last-child {
  margin-bottom: 0px;
}
/* leave a comment form */
.leave-a-comment-form {
  border: 1px solid #f5f5f5; /* Zeile für Dark-Theme border: 1px solid rgba(255,255,255,0.1); */
  padding: 20px;
  border-radius: 4px;
  background-color: #f5f5f5; /* Zeile für Dark-Theme background-color: #222; */
}
.leave-a-comment-form input {
  border: 0px;
  height: 50px;
  /* Zeilen für Dark-Theme background-color: #222;
	border: 1px solid rgba(255,255,255,0.1);
	color: #fff; */
}
.leave-a-comment-form textarea {
 border: 0px;
 /* Zeilen für Dark-Theme background-color: #222;
 border: 1px solid rgba(255,255,255,0.1);
 color: #fff; */
}
/* Zeilem für Dark-Theme .leave-a-comment-form input:focus, .leave-a-comment-form textarea:focus {
	background-color: #000;
	border: 1px solid #cd3333 !important;
	color: #fff;
	box-shadow: none;
} */

/* ===================================
	14. Client
=================================== */
.client-item-logo {
  margin: 0px 0;
  opacity: 0.5;
  transition: ease all 0.3s;
  border: 1px solid #fff;
  -webkit-transition: ease all 0.3s;
}
.client-item-logo:hover {
  opacity: 1;
  border: 1px solid #ff383f;
}

/* ===================================
	15. Footer
=================================== */

.footer {
  background: #111;
}
.footer-area .footer-title {
  font-size: 18px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  padding-bottom: 6px;
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
  color: #fff;
}

.footer-content1 {
	font-size: 14x;
	color: #ffa500;
}

.footer-link li a {
  color: #fff;
  padding-bottom: 9px;
  display: inline-block;
}
.footer-link li a:hover {
  color: #ff383f;
}
.footer-area p {
  color: #fff;
  margin-bottom: 20px;
}
.footer-contact li a {
  color: #fff;
}
.footer-contact li {
  color: #ffffff;
}
.footer-contact li a:hover {
  color: #ff383f;
}
.footer-copyright {
  background-color: #272727;
}
.footer-copyright p {
  text-align: center;
  color: #fff;
  font-size: 12px;
  margin: 0;
  padding: 20px 0;
}
.footer-social-icons li a {
  background-color: #272727;
  color: #ccc;
  width: 25px;
  height: 25px;
  display: inline-block;
  border-radius: 100%;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
}
.footer-social-icons li a:hover {
  background-color: #ff383f;
  color: #fff;
}
.footer-instagram a img {
  max-width: 75px;
  margin-bottom: 6px;
  margin-right: 6px;
  border-radius: 4px;
}

/* Standard-Zustand der Social-Media-Bilder */
.footer-external a img {
  transition: filter 0.3s ease, transform 0.2s ease; /* Macht den Übergang geschmeidig */
}

/* Hover-Zustand: Wenn die Maus über den LINK oder das BILD fährt */
.footer-external a:hover img {
  /* Dieser CSS-Filter verwandelt Weiß exakt in ein kräftiges Rot */
  filter: brightness(0) saturate(100%) invert(17%) sepia(93%) saturate(6646%) hue-rotate(357deg) brightness(97%) contrast(116%);
  
  /* Optional: Lässt das Icon beim Hovern minimal größer werden (Smarter Effekt) */
  transform: scale(1.1); 
}


/* ===================================
	16. Page Title
=================================== */
.page-title {
  position: relative;
  text-align: center;
}
.page-title h1 {
  color: #fff;
  font-weight: 300;
  font-size: 50px;
}
.page-title-bg {
  background-image: url(../img/bg/page-title-bg.jpg);
  background-position: center top;
  z-index: 0;
}
.page-title-center {
  background-color: rgba(0,0,0,0.7);
  display: inline-block;
  padding: 25px 25px;
}
.breadcrumb-box .breadcrumb-item.active {
  color: #ccc;
}
.breadcrumb-box li {
  margin-right: 0px !important;
}
.breadcrumb-box li a {
  color: #ff383f;
}

/* ===================================
	17. Services & Information
=================================== */
.accordion-box .accordion-item .accordion-header .accordion-button i {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.accordion-box .accordion-item .accordion-header .accordion-button .fa-eye {
  display: inline-block;
  color: #fff;
}
.accordion-box .accordion-item .accordion-header .accordion-button.collapsed .fa-eye {
  display: none;
}
.accordion-box .accordion-item .accordion-header .accordion-button.collapsed .fa-eye-slash {
  display: inline-block;
}
.accordion-box .accordion-item .accordion-header .accordion-button .fa-eye-slash {
  display: none;
}
.accordion-box .accordion-item {
  margin-bottom: 3px;
  border-radius: 0px;
  border: 0;
  background-color: transparent;
  /* Zeile für Dark-Theme background-color: transparent; */
}
.accordion-box .accordion-item .accordion-header .accordion-button {
  text-decoration: none;
  font-size: 17px;
  font-weight: 300;
  background-color: #ff383f;
  padding: 16Px 16px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif;
}
.accordion-box .accordion-item .accordion-header .accordion-button.collapsed {
  background-color: #272727;
  color: #fff !importanT;
}
.accordion-box .accordion-item .accordion-header {
  padding-right: 0px;
  padding-left: 0;
}
.accordion-box .accordion-item .accordion-body {
  line-height: 22px;
  padding: 15px;
  background-color: #222; 
  /* Zeile für Light-Theme: background-color: #f5f5f5; Zeile für Dark-Theme: background-color: #222; */
  border-radius: 4px;
  position: relative;
  margin-top: 20px;
  color: #fff;
  /* Zeile für Light-Theme: color: #222; Zeile für Dark-Theme: color: #fff; */
}
.accordion-body p { 
	text-align: left;
	}
.accordion-box .accordion-item .accordion-body:after {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  /* Zeile für Light-Theme: background-color: #f5f5f5; Zeile für Dark-Theme: background-color: #222; */
  top: -8px;
  left: 20px;
  transform: rotate(45deg);
}
.accordion-box .accordion-item .accordion-button {
  position: relative;
  width: 100%;
  text-align: left;
  white-space: normal;
}
.accordion-box .accordion-item .accordion-button:after {
  display: none;
}
.have-any-question {
  background-color: #ff383f;
  border-radius: 4px;
  padding: 20px;
}
.have-any-question .form-control {
  font-size: 14px;
  height: auto;
  padding: 16px 10px;
  border: 0px;
  background-color: #f8f9fa;
  color: #2d2e33;
}

/* ===================================
	18. Contact Us - Form
=================================== */

.contact-card {
    background-color: #444444;
    padding: 35px;
    width: 100%;
    max-width: 1190px;
/*     border: 1px solid #888888; */
    border-radius: 2px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);

}

.contact-header h2 {
    margin-bottom: 25px;
    text-align: center;
    color: #0dcaf0;
}

.input-group {
    margin-bottom: 18px;
}

label {
    display: block;
    margin-bottom: 6px;
    color: #0dcaf0;
    font-size: 16px;
    font-weight: 700;
}

.info {
    font-size: 12px;
    color: #64748b;
}

input[type="text"],
input[type="email"],

textarea {
    width: 100%;
    padding: 12px;
    background-color: #333333;
    border: 1px solid #888888;
    border-radius: 2px;
    color: #ffffff;
    font-size: 16px;
    transition: border-color 0.2s;
/* 		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); */
}

input:focus, textarea:focus {
    outline: none;
    border-color: #38bdf8;
}

textarea {
    resize: vertical;
}

/* Upload Bereich */
.upload-zone {
    border: 2px dashed #888888;
    background-color: #333333;
    border-radius: 2px;
    padding: 30px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
/*    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6); */
}

.upload-zone:hover, .upload-zone.drag-active {
    border-color: #38bdf8;
}

.upload-zone p {
    font-size: 16px;
    color: #ffff00;
}

.upload-restrictions p {
    font-size: 14px;
    font-style: italic;
    color: #ffa500;
}

#file-input {
    display: none;
}

.preview-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333333;
    padding: 10px 14px;
    width: 100%;
    border-radius: 2px;
    border: 1px solid #888888;
}

#file-name {
    font-size: 14px;
    color: #fff;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-btn {
    background-color: #de0005;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 12px;
}

.remove-btn:hover {
    background-color: #137728;
}

/* Das visuelle „Ich bin kein Roboter“-Captcha-Feld */
.captcha-box {
    
    background-color: #333333;
/*    border: 1px solid #888888; */
    padding: 25px;
    border-radius: 2px;
    margin-bottom: 20px;
    display: flex;
    width: 100%;
    max-width: 1190px;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
}

.captcha-container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.captcha-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    height: 26px;
    width: 26px;
    background-color: #333333;
    border: 2px solid #ffff00;
    border-radius: 1px;
    margin-right: 14px;
    display: inline-block;
    position: relative;
    transition: all 0.2s;
}

.captcha-container:hover input ~ .checkmark {
    border-color: #198754;
}

.captcha-container input:checked ~ .checkmark {
/*     background-color: #198754; /* Wird grün bei erfolgreichem Check */
    border-color: #ffff00;
}

/* Der weiße Haken in der Checkbox */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 8px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.captcha-container input:checked ~ .checkmark:after {
    display: block;
}

.captcha-label {
    color: #ffff00;
    font-size: 15px;
    font-weight: 200;
}

/* Rechte Seite der Box mit dem Bild/Icon */
.captcha-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
/*     border-left: 1px solid #242b3d; */
}

.robot-icon {
    transition: transform 0.3s ease;
}

.captcha-container input:checked ~ .captcha-right .robot-icon {
    transform: scale(1.1);
}

.captcha-brand {
    font-size: 12px;
    color: #dc3545;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Button & Alerts */
.submit-btn {
    width: 100%;
    padding: 14px;
    max-width: 1190px;
    background-color: #07687b;
    color: #fff;
    border: none;
    border-radius: 2px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.submit-btn:hover {
    background-color: #137728;
    color: #fff;
}

.submit-info {
    color: #ffa500;
    font-style: italic;
    width: 100%;
    max-width: 1190px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 14px;
}

.status-alert {
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 14px;
}
.status-alert.success { 
	background-color: rgba(34, 197, 94, 0.15); 
	color: #4ade80; 
	border: 1px solid rgba(34, 197, 94, 0.3);
}
.status-alert.error { 
	background-color: rgba(239, 68, 68, 0.15); 
	color: #f87171; 
	border: 1px solid rgba(239, 68, 68, 0.3); 
}

/* ===================================
	19. Newsletter
=================================== */
.newsletter-area {
  position: relative;
  background-image: url(../img/bg/newsletter-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 0;
}
.newsletter-area:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(0,0,0,0.7);
  z-index: -1;
}
.newsletter-area .title {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-size: 20px;
  padding-bottom: 6px;
}
.newsletter-area p {
  color: #fff;
}
.newsletter-area .form-control {
  position: relative;
  display: block;
  width: 100%;
  line-height: 20px;
  height: 50px;
  font-size: 13px;
  color: #ababab;
  background-color: #fff;
  border: 0px;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  transition: all 300ms ease;
  padding: 10px 50px 10px 30px;
}
.newsletter-area .subscription-btn {
  border: 0px;
  color: #fff;
  background-color: #ff383f;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  height: 50px;
  text-align: center;
}
/*--------------------------------------------------------------
	20. Terms And Conditions
--------------------------------------------------------------*/
.terms-and-conditions-single-content h3 {
  color: #ff383f;
  font-size: 22px;
}
.terms-and-conditions-single-content p {
  color: #fff;
  font-size: 16px;
  text-align: justify;
}

/*--------------------------------------------------------------
	21. DSGVO Banner / PopUp
--------------------------------------------------------------*/

/* Das Overlay blockiert den gesamten Bildschirm */
.popup-overlay {
    display: none; /* Wird per JS aktiviert */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dunkler, transparenter Hintergrund */
    z-index: 9999; /* Stellt sicher, dass das Pop-up über allem anderen liegt */
    justify-content: center;
    align-items: center;
}
/* Das eigentliche graue Pop-up-Fenster */
.popup-content {
    background-color: #444444; /* Modernes Hellgrau */
    color: #ffffff; /* Weißer Text für gute Lesbarkeit */
    padding: 30px;
    border-radius: 8px;
    max-width: 600px;
    width: 95%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-family: Helvetica, sans-serif;
    box-sizing: border-box;
}
.popup-content h2 {
    margin-top: 0;
    color: #0ec8f0;
    font-size: 1.5rem;
    font-weight: bold;
}
.popup-content p {
    font-size: 1.0rem;
    color: #ffffff;
    line-height: 1.5;
    margin: 15px 0;
    text-align: center;
}

.popup-content b {
    color: #0ec8f0;
}
/* Link zur Datenschutzerklärung */
.popup-link {
    color: #ffa500;
    text-decoration: underline;
}
.popup-link:hover {
		color: #ff383f;
}
/* Der "Verstanden"-Button */
.popup-btn {
    background-color: #07687b; /* Angenehmes Grün für Bestätigung */
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 10px;
    width: 100%;
}
.popup-btn:hover {
    background-color: #137728;
}
/* Verhindert das Scrollen der Webseite, solange das Pop-up aktiv ist */
body.popup-active {
    overflow: hidden;
}
/* Blendet das Popup nur im Pinegrow-Editor aus */
body.pg-workspace .popup-overlay {
    display: none !important;
}