/* ===================================
    Web agency
====================================== */
/* font */
@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-Regular.woff2') format('woff2'),
    url('fonts/TitilliumWeb-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-Bold.woff2') format('woff2'),
    url('fonts/TitilliumWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
/* variable */
:root {
    --base-color: #95C11C;
    --green: #95C11C;
    --dark-green: #616F3C;
    --black: #000000;
    --dark-gray: #1A1A18;
    --medium-gray:#B9B9B9;
    --light-gray: #ECECEC;
    --very-light-gray: #eeeeee;
    --white: #ffffff;
    --alt-font: 'Titillium Web', sans-serif !important;
    --primary-font: 'Titillium Web', sans-serif !important;
}
body {
    line-height: 30px;
}
a:hover {
    color: var(--dark-gray);
}
h1, .h1 {
    line-height: 4rem;
}
h3, .h3 {
    line-height: 2.813rem;
}
h4 {
    line-height: 2.6rem;
}
/* header */
.navbar .navbar-nav .nav-link {
    font-size: 18px;
    font-weight: 600;
}
header .header-button .btn.btn-switch-text.btn-medium > span {
    padding: 12px 22px;
}
header .navbar-brand img {
    max-height: 34px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    font-size: 17px;
    font-weight: 500;
    color: var(--dark-gray) !important;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover {
    background-color: #f6f4f3;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a i {
    font-size: 30px;
    width: 35px;
}
/*margin*/
.ms-100px {
    margin-left: 100px;
}
.ms-80px {
    margin-left: 80px;
}
.mb-minus-50px {
    margin-bottom: -50px;
}
/* btn */
.btn {
    text-transform: none;
    letter-spacing: 0;
}
.btn.btn-extra-large {
    font-size: 16px;
    padding: 16px 32px;
}
.btn.btn-large {
    font-size: 15px;
    padding: 15px 30px;
}
.btn.btn-switch-text.btn-large > span {
    padding: 15px 30px;
}
.btn-gradient-fuel-yellow-blue {
    background-image: linear-gradient(to right, #d18215, #3797a1, #d18215);
    background-size: 200% auto;
    color: var(--white);
}
/* left right top bottom */
.left-minus-45 {
    left: -45%;
}
.bottom-minus-200px {
    bottom: -200px;
}
.one-half-screen {
    height: 750px !important;
}
.swiper-pagination-progress .swiper-progress {
    background-color: var(--dark-gray);
}
.magic-drag-cursor #ball-cursor:before {
    font-weight: 500;
}
/* text gradient color */
.text-gradient-base-color {
    background-image: linear-gradient(to right, #e97522 0%, #1ea3b1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-orange{
    color: #e97522;
}
.text-blue{
    color: #1ea3b1;
}
/* bg gradient color */
.bg-gradient-top-very-light-gray {
    background-image:linear-gradient(to right, #fbf3e9, #f9f4eb, #f4f4f0, #f2f4f2, #eff4f4);
}
.bg-linen {
    background: #f6f4f3;
}
.bg-gradient-orange-transparent {
    background: linear-gradient(to right, rgba(233, 117, 34, 1.0) 10%, rgba(255, 255, 255, 0.0) 95%);
}
.bg-gradient-blue-transparent {
    background: linear-gradient(to right, rgba(30, 163, 177, 1.0) 10%, rgba(255, 255, 255, 0.0) 95%);
}
/* blog only text */
.blog-only-text .card-body:after {
    display: none;
}
/* social icon style 06 */
.social-icon-style-06 li {
    position: relative;
}
.social-icon-style-06 li:before {
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: var(--medium-gray);
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    opacity: .5;
}
.social-icon-style-06 li:last-child:before {
    display: none;
}
.google-maps-link a:hover {
    color: var(--white);
}
/* footer */
footer ul li {
    margin-bottom: 0;
    line-height: 28px;
}
footer a:hover {
    color: var(--white);
}
footer .footer-logo img {
    max-height: 34px;
}
/* z-index */
.z-index-99 {
    z-index: 99;
}
@media (min-width: 992px) {
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
        padding: 20px 30px;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        width: 285px;
    }
}
@media (max-width: 1199px) {
    .left-minus-45 {
        left: -78%;
    }
    .lg-ms-70px {
        margin-left: 70px;
    }
    .lg-bg-transparent {
        background-color: transparent;
    }
    .one-half-screen {
        height: auto !important;
    }
}
@media (max-width: 991px) {
    [data-mobile-nav-style=modern] .navbar-modern-inner .navbar-nav .nav-item .dropdown-menu a i {
        font-size: 19px;
        vertical-align: middle;
        color: var(--white);
    }
    .md-top-auto {
        top: auto;
    }
}

/* ===================================
    by Vanessa Blaschek
====================================== */
body, p {
    font-family: var(--primary-font);
    font-weight: normal;
    font-size: 1.25rem !important;
    line-height: 1.75rem;
    color: #1A1A18 !important;
}
.h1, .h2, .h3, h1, h2, h3 {
    font-family: var(--alt-font);
    margin-bottom: 30px;
    font-weight: bold;
    color: var(--base-color) !important;
}
h1, .h1 {
    font-size: 4rem;
    line-height: 4.5rem;
}
h2, .h2 {
    font-size: 2.813rem;
    line-height: 3.313rem;
}
h3, .h3 {
    font-size: 1.5rem;
    line-height: 2rem;
}
h4, .h4 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 20px
}
h5 {
    font-size: 2rem;
    line-height: 2.2rem;
}
h6 {
    font-size: 1.75rem;
    line-height: 1.95rem;
}
ul {
    padding-left: 1rem;
}
ul li {
    list-style: circle;
    list-style-position: outside;
    padding-left: 0.5rem;
}
li.nav-item {
    list-style: none !important;
}
.popular-post-sidebar > li {
    list-style: none !important;
    padding-left: 0 !important;
}
ul li.grid-item {
    list-style: none;
}
ul li.grid-sizer {
    list-style: none;
}
a {
    color: var(--green);
    -webkit-transition: 0.3s;
    transition: 0.3s;
    text-decoration: underline 1px;
}
a:hover {
    color: var(--green);
    text-decoration: underline 3px;
}
a.no-decoration {
    text-decoration: none !important;
    border: 0; /* Sicherheitshalber, falls auch ein Border genutzt wird */
}
a.no-decoration:hover {
    text-decoration: none !important;
    border: 0; /* Sicherheitshalber, falls auch ein Border genutzt wird */
}

.btn.green-button {
    font-family: var(--primary-font);
    font-weight: bold;
    font-size: 18px;
    padding: 16px 30px !important;
    text-decoration: none !important;
    text-transform: none !important;
    border-radius: 16px;
    background-color: var(--green);
    color: var(--white);
}
.btn.green-button:hover, .btn.green-button:active {
    background-color: var(--dark-green);
}

.navbar .navbar-nav .nav-link {
    color: var(--black);
}
.navbar .navbar-nav .nav-link:hover {
    color: var(--black);
    opacity: 1 !important;
    text-decoration: underline !important;
    text-decoration-style: solid !important;
    text-decoration-color: var(--green) !important;
    text-decoration-thickness: 5px !important;
    text-underline-offset: 5px !important;
}
.navbar .navbar-nav .nav-item .nav-link.active{
    opacity: 1 !important;
    text-decoration: underline !important;
    text-decoration-style: solid !important;
    text-decoration-color: var(--green) !important;
    text-decoration-thickness: 5px !important;
    text-underline-offset: 5px !important;
}
/* Den Dropdown-Pfeil immer anzeigen */
.navbar-nav .dropdown-toggle {
    display: inline-block !important; /* Erzwingt die Anzeige */
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: -10px;
    margin-right: 10px;
    cursor: pointer; /* Zeigt die Hand beim Drüberfahren */
    vertical-align: middle; /* Schön mittig zum Text */
}
.dropdown-toggle::after {
    display: none !important;
}
.dropdown-menu li a {
    color: var(--black);
    font-weight: 600 !important;
    text-decoration: none !important;
}
.dropdown-menu li:hover {
    color: var(--black);
    opacity: 1 !important;
    text-decoration: underline !important;
    text-decoration-style: solid !important;
    text-decoration-color: var(--green) !important;
    text-decoration-thickness: 5px !important;
    text-underline-offset: 5px !important;
}

footer {
    padding-top: 75px;
    padding-bottom: 75px;
}
footer .row > * {
    padding: 0 !important;
}
footer p {
    color: var(--white) !important;
    font-size: 1.1rem !important;
    line-height: 1.6rem !important;
}
footer ul li {
    margin-bottom: 0 !important;
    list-style: none !important;
    padding-left: 0 !important;
}
footer a {
    font-size: 1.1rem;
    color: var(--white) !important;
    text-decoration: none !important;
}
footer a:hover {
    color: var(--white) !important;
    text-decoration: underline !important;
}
footer .nav-link {
    font-family: var(--primary-font);
    font-weight: normal;
    font-size: 1.1rem !important;
    line-height: 1.6rem !important;
    padding: 0;
    color: var(--white) !important;
}
footer .nav-link:hover {
    color: var(--white) !important;
    text-decoration: underline !important;
}

.bg-green {
    background-color: var(--green);
}
.bg-white {
    background-color: var(--white);
}

.text-outline-color-light-gray {
    -webkit-text-stroke-color: var(--light-gray);
}

.mt-100px {
    margin-top: 100px !important;
}

.portfolio-box .portfolio-image {
    width: 350px !important;
    height: 350px !important;
}

.portfolio-filter li a {
    font-weight: 600 !important;
    border: none !important;
    text-decoration: none !important;
}
.portfolio-filter li:hover a {

    text-decoration: underline !important;
    text-decoration-style: solid !important;
    text-decoration-color: var(--green) !important;
    text-decoration-thickness: 5px !important;
    text-underline-offset: 6px !important;
}
.portfolio-filter li.active a {
    text-decoration: underline !important;
    text-decoration-style: solid !important;
    text-decoration-color: var(--green) !important;
    text-decoration-thickness: 5px !important;
    text-underline-offset: 6px !important;
}

.tab-style-01 .nav-tabs .nav-link {
    font-family: var(--primary-font);
    font-weight: bold;
    font-size: 18px;
    padding: 16px 30px !important;
    text-decoration: none !important;
    text-transform: none !important;
    border-radius: 16px;
    background-color: var(--white);
    color: var(--black);
    border: solid 2px var(--green) !important;
}
.tab-style-01 .nav-tabs .nav-link.active {
    font-family: var(--primary-font);
    font-weight: bold;
    font-size: 18px;
    padding: 16px 30px !important;
    text-decoration: none !important;
    text-transform: none !important;
    border-radius: 16px;
    background-color: var(--green);
    color: var(--white);
    border: solid 2px var(--green) !important;
    transform: none !important
}
.tab-style-01 .nav-tabs .nav-link:hover {
    font-family: var(--primary-font);
    font-weight: bold;
    font-size: 18px;
    padding: 16px 30px !important;
    text-decoration: none !important;
    text-transform: none !important;
    border-radius: 16px;
    background-color: var(--green);
    color: var(--white);
    border: solid 2px var(--green) !important;
    transform: none !important
}

.contact-form-style-03 input::placeholder, .contact-form-style-03 textarea::placeholder  {
    color: var(--black) !important;
}
input[type=checkbox] {
    height: 20px !important;
    width: 20px !important;
    outline: 2px solid var(--green) !important;
    border-radius: 0px !important;
    accent-color: var(--green) !important;
    border: none !important;
}
.ms-minus-5 {
    margin-left: -5% !important;
}
.border-green {
    border-bottom: solid 2px var(--green) !important;
}
/* --- Basis Layout für die Liste --- */
.keyword-list {
    column-count: 2;        /* 2 Spalten */
    column-gap: 40px;       /* Abstand dazwischen */
    /* WICHTIG: Sagt dem Browser, er soll die Spalten so füllen,
       dass sie möglichst gleich lang sind. Bei ungerader Zahl
       wird links eins mehr genommen (z.B. 3 links, 2 rechts). */
    column-fill: balance;
}
/* --- Der Listenpunkt als Flex-Container --- */
.keyword-list li {
    display: flex;          /* Macht Icon und Text zu Nachbarn */
    align-items: flex-start;/* Richtet beide oben bündig aus */
    /* Verhindert das Umbrechen DES GANZEN Elements in die nächste Spalte */
    break-inside: avoid-column;
    page-break-inside: avoid;
    margin-bottom: 5px;    /* Abstand nach unten */
}
/* --- Das Icon fixieren --- */
.keyword-list li i {
    /* Verhindert, dass das Icon gedrückt wird, wenn der Platz eng wird */
    flex-shrink: 0;
    margin-top: -1px;
    margin-right: 10px; /* Abstand zum Text */
}

/* Damit sich das Div genauso verhält wie früher das Formular */
.contact-form-style-03 {
    width: 100%;
    position: relative;
}
/* Falls dein CSS so war: form.contact-form-style-03 ... */
/* Wir sorgen dafür, dass die Styles auch greifen, wenn die Klasse im Eltern-Div ist */
.contact-form-style-03 form input,
.contact-form-style-03 form textarea,
.contact-form-style-03 form select {
    /* Deine Styles sollten hier meistens automatisch greifen,
       aber falls Abstände fehlen, kannst du sie hier korrigieren */
}
/* Rahmenfarbe bei Erfolg ändern */
.form-control.is-valid {
    border-color: #95C11C !important; /* Hier dein Grün als normaler Hex-Code */
    padding-right: calc(1.5em + 0.75rem); /* Platz für das Häkchen schaffen */
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

    /* Das ist das neue Häkchen-Bild in DEINER Farbe */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2395C11C' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
}
/* --- Fehlerhafter Zustand (Rufzeichen & Rahmen) --- */
.form-control.is-invalid {
    /* 1. Rahmenfarbe in dein Blau ändern */
    border-color: #b20014 !important;

    /* Platzhalter für das Icon (Standard-Einstellungen sicherstellen) */
    padding-right: calc(1.5em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);

    /* 2. Das Rufzeichen-Icon austauschen */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23b20014' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%230014FF' stroke='none'/%3e%3c/svg%3e") !important;
}
/* --- Eingabefelder Textfarbe --- */
.contact-form-style-03 input,
.contact-form-style-03 textarea,
.contact-form-style-03 select {
    color: var(--black) !important;
}
/* Farbe des Platzhalters (Placeholder) steuern */
.contact-form-style-03 input::placeholder,
.contact-form-style-03 textarea::placeholder {
    color: var(--dark-gray);
    opacity: 0.6;
}
/* --- Erfolgsmeldung (unten) --- */
.wpcf7-response-output {
    border-radius: 4px; /* Leicht abgerundet */
    padding: 15px 20px !important;
    text-align: center;
    font-weight: 500;
    margin-top: 30px;
    font-size: 18px;
}
/* Speziell für erfolgreiches Senden (Grün) */
form.sent .wpcf7-response-output {
    border: 2px solid var(--base-color) !important; /* <--- HIER DEIN GRÜN EINFÜGEN */
    color: var(base-color) !important;             /* <--- HIER DEIN GRÜN EINFÜGEN */
    background-color: #ffffff; /* Weißer Hintergrund */
}
/* Speziell für Fehler (Rot) - falls doch mal was schief geht */
form.invalid .wpcf7-response-output,
form.failed .wpcf7-response-output,
form.spam .wpcf7-response-output {
    border: 2px solid #b20014 !important; /* Standard Rot */
    color: #b20014 !important;
}

/* media query responsive */
@media (min-width: 1400px) {
    h1, .h1 {
        font-size: 3rem;
        line-height: 3.5rem;
    }
    h2, .h2 {
        font-size: 2.313rem;
        line-height: 2.813rem;
    }
    h3, .h3 {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    h4, .h4 {
        font-size: 1.4rem;
        line-height: 1.9rem;
        margin-bottom: 20px
    }
    h5 {
        font-size: 2rem;
        line-height: 2.2rem;
    }
    h6 {
        font-size: 1.75rem;
        line-height: 1.95rem;
    }

    header .container-fluid {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
    header .navbar-brand img {
        max-height: 80px !important;
        max-width: 150% !important;
    }
    .navbar .navbar-nav .nav-link {
        font-size: 20px !important;
    }
    .header-icon .header-social-icon a {
        font-size: 28px !important;
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100% !important;
        padding-left: 10% !important;
        padding-right: 10% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    footer .footer-logo img {
        max-height: 100px !important;
        max-width: 150% !important;
    }
}
@media (min-width: 1200px) {
    header .container-fluid {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
    header .navbar-brand img {
        max-height: 80px !important;
        max-width: 150% !important;
    }
    .navbar .navbar-nav .nav-link {
        font-size: 19px !important;
    }
    .header-icon .header-social-icon a {
        font-size: 25px !important;
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100% !important;
        padding-left: 10% !important;
        padding-right: 10% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    footer .footer-logo img {
        max-height: 100px !important;
        max-width: 150% !important;
    }
}
@media (min-width: 992px) {
    header .container-fluid {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
    header .navbar-brand img {
        max-height: 80px !important;
        max-width: 125% !important;
    }
    .navbar .navbar-nav .nav-link {
        font-size: 18px !important;
    }
    .header-icon .header-social-icon a {
        font-size: 22px !important;
    }
    .navbar-nav .dropdown-toggle {
        width: auto !important;
        height: auto !important;
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100% !important;
        padding-left: 10% !important;
        padding-right: 10% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
@media (min-width: 768px) {
    header .container-fluid {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
    .header-icon .header-social-icon a {
        font-size: 25px !important;
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100% !important;
        padding-left: 10% !important;
        padding-right: 10% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
@media (min-width: 576px) {
    header .container-fluid {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
    .header-icon .header-social-icon a {
        font-size: 25px !important;
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100% !important;
        padding-left: 10% !important;
        padding-right: 10% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
@media (min-width: 446px) {

}

@media (max-width: 1199px) {
    .ce-banner {
        margin-top: -50px !important;
    }
    .row-cols-lg-1>* {
        width: 75% !important;
    }
}
@media (max-width: 991px) {
    body, p {
        font-family: var(--primary-font);
        font-weight: normal;
        font-size: 1.5rem !important;
        line-height: 2rem;
    }
    header .navbar-brand img {
        max-height: 100px !important;
        max-width: 150% !important;
    }
    header .navbar-expand-lg {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .navbar-collapse .navbar-nav .nav-link {
        font-size: 17px !important;
        text-align: center !important;
    }
    .ce-banner .border-color-medium-gray {
        border-color: var(--dark-gray) !important;
    }
    .row-cols-md-1>* {
        width: 75% !important;
    }
    .ce-text .container {
        margin-top: -5% !important;
    }
    .popular-post-sidebar li {
        list-style: none !important;
        padding-left: 0 !important;
    }
    footer .footer-logo img {
        max-height: 80px !important;
        max-width: 125% !important;
    }
}
@media (max-width: 767px) {
    .ce-vertical-list .title {
        margin-bottom: 2% !important;
    }
    .keyword-list {
        column-count: 1;
    }
}
@media (max-width: 575px) {
    header .container-fluid {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
    header .navbar-brand {
        padding: 15px 0 !important;
    }
    header .navbar-brand img {
        max-height: 100px !important;
        max-width: 125% !important;
    }
    .header-icon .header-social-icon a {
        font-size: 20px !important;
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100% !important;
        padding-left: 5% !important;
        padding-right: 5% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .row-cols-md-1>* {
        width: 100% !important;
    }
    .popular-post-sidebar li .media-body {
        padding-top: 3% !important;
    }
    .ce-project-overview .title {
        margin-bottom: 2% !important;
    }
}
@media (max-width: 445px) {
    header .container-fluid {
        padding-left: 4% !important;
        padding-right: 4% !important;
    }
    header .navbar-brand {
        padding: 15px 0 !important;
    }
    header .navbar-brand img {
        max-height: 80px !important;
        max-width: 70% !important;
    }
    .header-icon .header-social-icon a {
        font-size: 20px !important;
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100% !important;
        padding-left: 4% !important;
        padding-right: 4% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}